Pick a link on its line and delete it from there (#289)
game-maker / gate (push) Successful in 2m37s
game-maker / suite (push) Successful in 13m10s

A link could only be removed through the menu of its port, and the
line itself took no input. A transition of a state machine could only
be deleted in the list of the inspector. Now the line is the handle,
in a behavior's graph and between states alike.

- A click on a line selects that link and draws a halo behind it. A
  press counts within 6 screen pixels of the line, and where two cross
  the one drawn last wins.
- Ctrl-click or Shift-click adds a link or takes it away. The rubber
  band takes every line it crosses, into the same selection as the
  nodes and boxes it caught.
- Delete or Backspace removes what is picked as one undo step. A
  right-click on a line offers Hide link and Delete link.
- The inspector shows a picked link: the node and port at each end and
  the type it carries, with Hide link and Delete link below. For
  several it says how many.
- The arrow of a transition is picked the same way, on its name too.
  Delete or a right-click with Delete transition removes it.
- The menu of a port is unchanged, Disconnect included, as answered in
  the issue.
- editor/graph/edgeHit.ts holds the hit test as pure functions, and
  editor/inspector/edgeSection.ts builds the section. The selection
  has a new kind edge, and node and annotation carry edgeIds.

Decided here:

- A hidden link has no line and is never picked this way, also while
  it is shown on loan. Its mark at the port stays its handle.
- The menu of a line speaks about the whole selection, like the menu
  of a box. With nodes or boxes held alongside it reads Delete N
  items.
- Hiding picked links lets go of them, since no line is left.
- A link wins over the box it crosses, and a mark wins over a link.
- A transition has no Hide entry.
- With nodes or boxes in the selection the inspector keeps showing
  the node or box, not the link.

Tests:
- Gate: 201 files, 2982 tests (2967 + 15), exit 0
- e2e, full run: 1635 checks passed (1629 + 6), exit 0
- Smokes: 24 / 19 / 21, exit 0
- The full run was done for exactly this state.
- 15 unit tests in tests/editor/edge-selection.test.ts
- Six e2e checks with a real mouse, block 6z-xi in module 06 and 26e7
  in module 26
- 12 unit counter-probes all fail tests, run on stein2
- Three browser counter-probes fail, the build went through each
  time: no hit on the line, no halo, a band that skips lines
- Screenshots of a picked link and a picked transition looked at
  before the last build, none after it

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
adminandClaude Opus 5.5 committed 2026-10-01 20:51:15 +02:00
1 parent 0f85476b93
commit c5ba21533d
15 files changed
+904 -41

No files matched your search

+5
View File
@@ -44,6 +44,9 @@ export function graphHooks({ state, editor }: HookContext) {
edgeDrawn: (edgeId: string) => graphEditor.canvas.edgeDrawn(edgeId),
/** The colour it was stroked in: `danger` is an edge whose two ends stopped fitting (#207). */
edgeColor: (edgeId: string) => graphEditor.canvas.edgeColor(edgeId),
/** Halfway along a link on screen, and the links drawn as picked (#289). */
edgeAt: (edgeId: string) => graphEditor.canvas.edgeGlobal(edgeId),
pickedEdges: () => graphEditor.canvas.pickedEdgesDrawn(),
/** The types the node's ports are drawn with, after a shared group had its say (#207). */
portTypes: (nodeId: string) => graphEditor.canvas.portTypes(nodeId),
blockFrames: () => graphEditor.canvas.blockFrames(),
@@ -72,6 +75,8 @@ export function graphHooks({ state, editor }: HookContext) {
portGrabbable: (nodeId: string, port: string, isOutput: boolean) =>
editor.stateMachineEditor.canvas.portGrabbable(nodeId, port, isOutput),
edgeDrawn: (edgeId: string) => editor.stateMachineEditor.canvas.edgeDrawn(edgeId),
edgeAt: (edgeId: string) => editor.stateMachineEditor.canvas.edgeGlobal(edgeId),
pickedEdges: () => editor.stateMachineEditor.canvas.pickedEdgesDrawn(),
transitionLabel: (edgeId: string) => editor.stateMachineEditor.canvas.transitionLabelDrawn(edgeId),
transitionLabelAt: (edgeId: string) => editor.stateMachineEditor.canvas.transitionLabelAt(edgeId),
hint: () => editor.stateMachineEditor.canvas.shownHint(),