fix(flow): disable panning/dragging when canvas=false

[nandanmen]

Fixes a bug where text inside a flow node is not selectable even when canvas is set to false in the parent component (therefore disabling all dragging features).

Changes

• When canvas={false}, pan event handlers (onPanStart, onPan, onPanEnd) are no longer attached to the motion wrapper, so dragging/panning is fully inert
• The grab/grabbing cursor and userSelect: none body mutations are suppressed — canvas && canPan && !isPanning guards the cursor style, and the handlers that set body styles are never called
• Adds FlowWithCodeBlockDemo to the /tests/flow test page: a canvas={false} flow where one node embeds a CodeHighlighted block, verifying syntax highlighting works inside a flow node and that text selection is not blocked

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@390

commit: 4b3bb9d

[github-actions]

Docs Preview

View docs preview

Commit: 4b3bb9d

[github-actions]

Visual Regression Report — 21 changed, 16 unchanged

21 screenshot(s) with visual changes:

Button / Basic

288 px (0.28%) changed

Before	After	Diff

Button / Variant: Secondary Destructive

0 px (0%) changed

Before	After	Diff

Button / With Icon

0 px (0%) changed

Before	After	Diff

Button / Icon Only

0 px (0%) changed

Before	After	Diff

Button / Loading State

2 px (0%) changed

Before	After	Diff

Button / Title

0 px (0%) changed

Before	After	Diff

Dialog / Dialog Alert

0 px (0%) changed

Before	After	Diff

Dialog / Dialog Confirmation

0 px (0%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

244 px (0.24%) changed

Before	After	Diff

Dialog (Open)

378,593 px (1.89%) changed

Before	After	Diff

Select / Select Basic

530 px (0.52%) changed

Before	After	Diff

Select / Select Sizes

0 px (0%) changed

Before	After	Diff

Select / Select Placeholder

0 px (0%) changed

Before	After	Diff

Select / Select With Tooltip

0 px (0%) changed

Before	After	Diff

Select / Select Custom Rendering

414 px (0.41%) changed

Before	After	Diff

Select / Select Loading

1,369 px (0.64%) changed

Before	After	Diff

Select / Select Multiple

0 px (0%) changed

Before	After	Diff

Select / Select Disabled Options

0 px (0%) changed

Before	After	Diff

Select / Select Grouped

346 px (0.34%) changed

Before	After	Diff

Select / Select Long List

1,428 px (1.21%) changed

Before	After	Diff

Select (Open)

605,042 px (2.53%) changed

Before	After	Diff

16 screenshot(s) unchanged

• Button / Variant: Primary
• Button / Variant: Secondary
• Button / Variant: Ghost
• Button / Variant: Destructive
• Button / Variant: Outline
• Button / Sizes
• Button / Disabled State
• Dialog / Dialog With Actions
• Dialog / Dialog Basic
• Dialog / Dialog With Select
• Dialog / Dialog With Combobox
• Select / Select Without Label
• Select / Select With Field
• Select / Select Complex
• Select / Select Disabled Items
• Select / Select Grouped With Disabled

---

Generated by Kumo Visual Regression

[mattrothenberg]

/bonk what say you?

[ask-bonk]

UnknownError: ProviderInitError

github run

[ask-bonk]

@mattrothenberg Bonk workflow failed. Check the logs for details.

View workflow run · To retry, trigger Bonk again.

[stritt]

/bigbonk review code

[ask-bonk]

Clean, minimal fix. The core change in diagram.tsx is correct — guarding the pan handlers and cursor with the canvas prop is the right approach and consistent with how the existing useEffect hooks already early-return when canvas is false.

One minor inconsistency in the test page, noted below.

[ask-bonk]

Review submitted. Here's a summary:

Approved the PR with one minor suggestion.

Core fix (diagram.tsx): The 4-line change is correct and minimal. It guards onPanStart/onPan/onPanEnd and the grab cursor behind the canvas prop. This is consistent with the existing pattern — all four useEffect hooks in the component already early-return with if (!canvas) return. The fix ensures that when canvas={false}, pan handlers are never attached to the motion wrapper, so text selection and other native interactions work as expected.

Demo + test page: The FlowWithCodeBlockDemo is a good addition that exercises the canvas={false} path with embedded code highlighting.

One nit: The new test section uses border-kumo-line while every other section on the page uses border-kumo-hairline — suggested a fix for consistency.

github run

[stritt]

thanks for this! the underlying canvas=false fix still looks useful, but the branch now conflicts with the current flow implementation. this may be easiest to port onto current main with the tests, but feel free to rebase it if you have time and we can get it reviewed again.