Any way to connect an anchor with a Node by dropping it anywhere on the node?

[rohanrajpal]

I was trying to figure out a way to connect an anchor to a node by just dropping the edge anywhere on the node. I guess it might require introducing some changes to svelvet? Mainly because of two issues

1. If I create a custom anchor that draws over the whole node, then the node can't be clicked or dragged
2. If an anchor is connected to a node, i guess it'll be connected at the top left of the other node? since and edge is pointing to the position of an anchor, so maybe we'll need some logic to allow connecting an edge to the center of an anchor (now that the anchor is completely the node itself)

Overall, I know it's a big ask, but just putting it out there to know how big of a feature request this is. Thanks in advance!

[briangregoryholmes]

Will look into it.

[briangregoryholmes]

Okay. There's a first pass of this in the newest version releasing tonight. You can pass the invisible prop to an Anchor to achieve, I think, exactly what you're looking for. It's not possible to disconnect the Anchor using drag and drop, but you can obviously do it programmatically now! I'll think about adding different connect/disconnect targets so you could connect this way, but then disconnect via drag from a specific anchor/element.

<Node useDefaults dimensions={{ width: 400, height: 300 }} position={{ x: 100, y: 300 }}>
  <Anchor invisible />
</Node>

Untitled.mov

[rohanrajpal]

Hey Brian, just gave this a spin, I guess its not working for me, here's a minimum reproducible.

<script lang="ts">
  import { Node, Svelvet, Anchor } from "svelvet";
</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"
      dimensions={{ width: 400, height: 300 }}
      position={{ x: 250, y: 100 }}
    >
      <Anchor invisible />
    </Node>
  </Svelvet>
</div>

[briangregoryholmes]

Your code works on my end. Sandbox linked below. The only thing I changed was the outer wrapper, for display purposes, but it worked that way too

https://stackblitz.com/edit/vitejs-vite-zd3zfq?file=src/App.svelte

[rohanrajpal]

Hmm, does seem to work, let me try to replicate on stackblitz

[rohanrajpal]

One more difference, i'm using tailwind & this stackblitz isnt, let me see if that is breaking it

[rohanrajpal]

yep, breaking with tailwnd, creating an issue for it

[briangregoryholmes]

There's now a prop on the Anchor component called nodeConnect. It doesn't make any styling adjustments like the previous invisible implementation. It's essentially just a trigger that passes mouse up events on the Node to the first available anchor where nodeConnect is set to true. Let me know how it works for you.