Skip to content

Add semantic node-to-node connectors with automatic edge routing #21

Description

@HananoshikaYomaru

What are you trying to build?

I am building a diagram or node-based canvas application with Quickdraw and need edges that remain semantically connected to nodes. The current arrow and line tools draw standalone geometry, so moving or resizing a node does not automatically update an edge endpoint. I would like to connect two shapes/nodes and have the connection follow them as they move.

Proposed solution

Add first-class semantic connectors/edges between shapes, initially supporting rectangle-to-rectangle connections with straight routing and arrowheads. A connector should reference source and target shape IDs rather than fixed pixel endpoints, calculate endpoints from the current shape geometry, snap to the target boundary with configurable padding, and update automatically when either shape moves or resizes.

Suggested phased scope:

  1. Add a connector shape/record with source and target IDs, normalized anchors, optional precise/exact anchor behavior, bend, and arrowhead settings.
  2. Add rectangle boundary ray intersection and live connector geometry calculation.
  3. Add interactive endpoint snapping and target highlighting while creating an edge.
  4. Preserve connector behavior through movement, deletion, duplication, copy/paste, undo/redo, snapshots, and sync.
  5. Later support ellipse/polygon boundaries and draggable curved-connector bend handles.

The first milestone could be limited to semantic rectangle-to-rectangle connectors with straight routing, automatic endpoint updates, arrowheads, and tests.

Workarounds you've tried

The existing arrow and line tools can be used as standalone strokes, but they do not provide node-to-node semantic bindings or automatic endpoint updates. A consuming application could implement a separate graph and rerender overlay edges, but that duplicates shape geometry, interaction, persistence, and synchronization logic outside Quickdraw.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions