Select nodes with state
What you will make
Section titled “What you will make”Make the gold Sketch card selected at startup, then click any card to select
it. The selected card gets a 5-pixel dark outline, and the status bar reports
SELECTED · <TITLE> alongside ZOOM · 100%. As an exercise, make clicking
the already selected card clear the selection.
How it works
Section titled “How it works”The diagram owns ordinary application IDs such as "idea" and "sketch";
they are stable model data rather than Canvas target objects. DiagramEditor
stores the selected ID with useSignal, finds the
matching node record, and passes a boolean plus one selection callback down to
each NodeCard.
Build the change
Section titled “Build the change”Only the rounded card body has onClick and cursor: "pointer". Its title,
subtitle, ports, edges, and other decorative paint use pointerEvents="none",
so they cannot occlude that intended target. The workspace background owns its
own click handler to clear selection. The available event types
describe the DOM-aligned handler surface.
Predict and try
Section titled “Predict and try”Click Idea and predict when the status changes. The handler updates the signal, but
it does not synchronously repaint pixels: Pibbl coalesces the request into a
future scheduled frame. Then change onSelect so a matching selected ID
becomes null; clicking the same body again should show NO SELECTION.
Check your result
Section titled “Check your result”The initial status reads SELECTED · SKETCH. Clicking the center of Idea’s
painted body changes the next painted status to SELECTED · IDEA, while
clicking empty workspace clears it. If a label steals a click, it is decorative
paint that has not opted out of targeting; review Style and draw
and make that child non-targeting.
What you learned
Section titled “What you learned”Selection is explicit application state: a signal holds the selected model ID, and the rendered outline and status are consequences of that state. Constraining interaction to the painted body keeps target ownership legible, while scheduled rendering keeps rapid state writes coalesced into the next frame.
Open the interactive workbench
Implementation guidance for agents
Section titled “Implementation guidance for agents”Read the Authoring, signals, and lifecycle companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.
Documentation version
Section titled “Documentation version”Documentation built with @pibbl/core 0.0.2, revision 2dccb19. ALPHA — NOT FOR PRODUCTION USE.