Bind the node dimensions to its child's height and width

[rohanrajpal]

In the following example

<script lang="ts">
  import { Node, Svelvet, Anchor } from "svelvet";
  import CustomAnchor from "./CustomAnchor.svelte";

  let itemArr = ["h-40"];
</script>

<div class="h-screen w-full">
  <Svelvet id="my-canvas" TD minimap fitView>
    <Node id="beta" bgColor="green" label="Beta">
      <div class="w-40 h-20" />
      <Anchor id="beta-anchor" />
    </Node>
    <Node
      id="alpha"
      bgColor="red"
      label="Alpha"
      resizable
      position={{ x: 250, y: 100 }}
    >
      <div class="left-0 top-2 absolute">
        <Anchor nodeConnect let:connecting let:hovering let:linked>
          <CustomAnchor {connecting} {hovering} {linked} />
        </Anchor>
      </div>
      <button
        on:click={() => (itemArr = [...itemArr, "h-40"])}
        class="bg-white"
      >
        Increase height
      </button>
      <div>
        {#each itemArr as div, idx}
          <div class="w-40 h-40 bg-white border">
            <button
              class="border"
              on:click={() => {
                itemArr = itemArr.filter((_, i) => i !== idx);
                itemArr = itemArr;
              }}
            >
              Remove height
            </button>
          </div>
        {/each}
      </div>
    </Node>
  </Svelvet>
</div>

Now, if I click on "increase height", you'll notice the height of the node remains the same. It only adapts to the height of the node on the mount & then does not update.

Is this expected behavior? I guess binding the dimensions if the child contents increase/decrease would help.

[briangregoryholmes]

See: #324

[briangregoryholmes]

This is live in v7.0.41

[rohanrajpal]

This is live in v7.0.41

Works great! Thank you so much