swarm-ui: rewire a notification flow by drag or keyboard
The flow editor can now change a flow's shape on the canvas, not only through the inspector's fields: - drag a box onto another to move it and its branch there; a drop the save would refuse shows the target dashed red and gives the reason; - a palette of node kinds adds a node below the picked box on click, or below any box it is dragged onto; it offers what the controller lists; - arrow keys walk the tree, M picks a box up and Enter drops it under the focused one, Alt+Up/Down reorder a node among its siblings, Delete removes a branch; focus follows the edit; - each box with siblings says when it runs, and the inspector can move it earlier or later, since the router runs children in edge order; - request_reviewer is a second leaf kind beside todo, with a reviewer field; - leaving with unsaved edits asks first, also for in-app links and the back button (a router hook runs navigation past a page's guard).
This commit is contained in:
iris
mara
parent
e01770c056
commit
68e289fff5
16 changed files with 1072 additions and 133 deletions
|
|
@ -1,74 +1,400 @@
|
|||
// <FlowCanvas> — a flow drawn as boxes and lines: the source on the left, its
|
||||
// branches to the right. Pick a node to edit it; the inspector beside the
|
||||
// canvas does the editing.
|
||||
import { layoutFlow, NODE_HEIGHT, NODE_WIDTH } from "./FlowLayout.js";
|
||||
import { describeNode, ellipsize, type Flow } from "./FlowTypes.js";
|
||||
// branches to the right, with a palette of node kinds above.
|
||||
//
|
||||
// Rewiring is by pointer or by keyboard, and both end in the same edits the
|
||||
// inspector makes:
|
||||
// - drag a box onto another to move it (and its branch) under that one, or
|
||||
// drag a palette chip onto a box to add a new node under it;
|
||||
// - arrow keys walk the tree, M picks the focused box up and Enter drops it
|
||||
// under the box now focused, Alt+Up/Down changes when a branch runs among
|
||||
// its siblings, Delete removes the box and its branch.
|
||||
// A drop the save would refuse is turned away with the reason, so a bad flow
|
||||
// is never drawn.
|
||||
import { useEffect, useRef, useState } from "preact/hooks";
|
||||
import {
|
||||
addChild,
|
||||
blankNode,
|
||||
isLeafKind,
|
||||
reparent,
|
||||
siblingPosition,
|
||||
type AddableKind,
|
||||
type Edit,
|
||||
type Limits,
|
||||
} from "./FlowDraft.js";
|
||||
import {
|
||||
layoutFlow,
|
||||
neighbour,
|
||||
nodeAt,
|
||||
NODE_HEIGHT,
|
||||
NODE_WIDTH,
|
||||
} from "./FlowLayout.js";
|
||||
import { describeNode, ellipsize, ordinal, type Flow } from "./FlowTypes.js";
|
||||
|
||||
const TEXT_CHARS = 30;
|
||||
// How far the pointer must travel before a press counts as a drag.
|
||||
const DRAG_PX = 4;
|
||||
|
||||
export interface PaletteKind {
|
||||
kind: AddableKind;
|
||||
description: string;
|
||||
}
|
||||
|
||||
type Source = { kind: "move"; id: string } | { kind: "add"; node: AddableKind };
|
||||
|
||||
interface Drag {
|
||||
source: Source;
|
||||
startX: number;
|
||||
startY: number;
|
||||
x: number;
|
||||
y: number;
|
||||
moved: boolean;
|
||||
// The box under the pointer, if any.
|
||||
over: string | undefined;
|
||||
}
|
||||
|
||||
export interface CanvasEdits {
|
||||
onSelect: (id: string) => void;
|
||||
onAdd: (kind: AddableKind, parentId: string) => void;
|
||||
onMove: (id: string, parentId: string) => void;
|
||||
onReorder: (id: string, delta: -1 | 1) => void;
|
||||
onRemove: (id: string) => void;
|
||||
// A drop or key press the draft turned away, and why.
|
||||
onRefused: (reason: string) => void;
|
||||
}
|
||||
|
||||
const HELP =
|
||||
"Drag a box onto another to move it there, or drag a kind from above onto a box to add it. " +
|
||||
"Keys: arrows walk the tree, M picks a box up and Enter drops it under the focused box, " +
|
||||
"Alt+Up and Alt+Down change when a branch runs, Delete removes a box and its branch.";
|
||||
|
||||
export function FlowCanvas({
|
||||
flow,
|
||||
selected,
|
||||
onSelect,
|
||||
limits,
|
||||
palette,
|
||||
...edits
|
||||
}: {
|
||||
flow: Flow;
|
||||
selected: string | null;
|
||||
onSelect: (id: string) => void;
|
||||
}) {
|
||||
limits: Limits;
|
||||
palette: PaletteKind[];
|
||||
} & CanvasEdits) {
|
||||
const layout = layoutFlow(flow);
|
||||
const byId = new Map(flow.nodes.map((n) => [n.id, n]));
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
const dragRef = useRef<Drag | null>(null);
|
||||
const [, redraw] = useState(0);
|
||||
// The box picked up with the keyboard, and the one the cursor is on.
|
||||
const [carrying, setCarrying] = useState<string | null>(null);
|
||||
const [cursor, setCursor] = useState<string | null>(null);
|
||||
const [said, setSaid] = useState("");
|
||||
// When a key press last asked for focus to follow the selection, so a stale
|
||||
// request cannot pull focus out of the inspector later.
|
||||
const refocusAt = useRef(0);
|
||||
const wantRefocus = () => {
|
||||
refocusAt.current = Date.now();
|
||||
};
|
||||
|
||||
// What an edit at `over` would do, without doing it.
|
||||
const dryRun = (source: Source, over: string): Edit =>
|
||||
source.kind === "move"
|
||||
? reparent(flow, source.id, over, limits)
|
||||
: addChild(flow, over, blankNode(flow, source.node), limits);
|
||||
|
||||
// The pointer handlers outlive a render, so they read the latest of these.
|
||||
const latest = useRef({ layout, flow, dryRun, edits });
|
||||
latest.current = { layout, flow, dryRun, edits };
|
||||
|
||||
const focusNode = (id: string) =>
|
||||
svgRef.current?.querySelector<SVGGElement>(`[data-node="${id}"]`)?.focus();
|
||||
|
||||
// After an edit that moved or removed the focused box, put focus on the
|
||||
// selected one so the keyboard carries on from where it was.
|
||||
useEffect(() => {
|
||||
if (selected && Date.now() - refocusAt.current < 300) {
|
||||
refocusAt.current = 0;
|
||||
focusNode(selected);
|
||||
}
|
||||
});
|
||||
|
||||
const dragging = dragRef.current !== null;
|
||||
useEffect(() => {
|
||||
if (!dragging) return;
|
||||
const overAt = (e: PointerEvent): string | undefined => {
|
||||
const rect = svgRef.current?.getBoundingClientRect();
|
||||
if (!rect) return undefined;
|
||||
return nodeAt(
|
||||
latest.current.layout,
|
||||
e.clientX - rect.left,
|
||||
e.clientY - rect.top,
|
||||
);
|
||||
};
|
||||
const onMove = (e: PointerEvent) => {
|
||||
const d = dragRef.current;
|
||||
if (!d) return;
|
||||
const over = overAt(e);
|
||||
dragRef.current = {
|
||||
...d,
|
||||
x: e.clientX,
|
||||
y: e.clientY,
|
||||
moved:
|
||||
d.moved ||
|
||||
Math.hypot(e.clientX - d.startX, e.clientY - d.startY) > DRAG_PX,
|
||||
over:
|
||||
d.source.kind === "move" && over === d.source.id ? undefined : over,
|
||||
};
|
||||
redraw((n) => n + 1);
|
||||
};
|
||||
const end = (drop: boolean) => {
|
||||
const d = dragRef.current;
|
||||
dragRef.current = null;
|
||||
redraw((n) => n + 1);
|
||||
if (!d) return;
|
||||
const { edits: e, dryRun: dry } = latest.current;
|
||||
if (!d.moved) {
|
||||
// A press without travel: a click on a box picks it. A palette chip
|
||||
// is a button, and its own click adds.
|
||||
if (drop && d.source.kind === "move") e.onSelect(d.source.id);
|
||||
return;
|
||||
}
|
||||
if (!drop || !d.over) return;
|
||||
const result = dry(d.source, d.over);
|
||||
if (!result.ok) {
|
||||
e.onRefused(result.reason);
|
||||
return;
|
||||
}
|
||||
if (d.source.kind === "move") e.onMove(d.source.id, d.over);
|
||||
else e.onAdd(d.source.node, d.over);
|
||||
};
|
||||
const up = () => end(true);
|
||||
const cancel = () => end(false);
|
||||
const key = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") cancel();
|
||||
};
|
||||
window.addEventListener("pointermove", onMove);
|
||||
window.addEventListener("pointerup", up);
|
||||
window.addEventListener("pointercancel", cancel);
|
||||
window.addEventListener("keydown", key);
|
||||
return () => {
|
||||
window.removeEventListener("pointermove", onMove);
|
||||
window.removeEventListener("pointerup", up);
|
||||
window.removeEventListener("pointercancel", cancel);
|
||||
window.removeEventListener("keydown", key);
|
||||
};
|
||||
}, [dragging]);
|
||||
|
||||
const startDrag = (e: PointerEvent, source: Source) => {
|
||||
if (e.button !== 0) return;
|
||||
dragRef.current = {
|
||||
source,
|
||||
startX: e.clientX,
|
||||
startY: e.clientY,
|
||||
x: e.clientX,
|
||||
y: e.clientY,
|
||||
moved: false,
|
||||
over: undefined,
|
||||
};
|
||||
redraw((n) => n + 1);
|
||||
};
|
||||
|
||||
const drag = dragRef.current;
|
||||
const dragSource = drag?.source;
|
||||
// How a box reads while something is held over it.
|
||||
const holdClass = (id: string): string => {
|
||||
if (drag?.moved && dragSource && drag.over === id) {
|
||||
return dryRun(dragSource, id).ok
|
||||
? " notify-box-target"
|
||||
: " notify-box-refused";
|
||||
}
|
||||
if (carrying && cursor === id && carrying !== id) {
|
||||
return dryRun({ kind: "move", id: carrying }, id).ok
|
||||
? " notify-box-target"
|
||||
: " notify-box-refused";
|
||||
}
|
||||
return "";
|
||||
};
|
||||
|
||||
const drop = (id: string) => {
|
||||
if (!carrying) return;
|
||||
const moving = carrying;
|
||||
const result = reparent(flow, moving, id, limits);
|
||||
setCarrying(null);
|
||||
if (!result.ok) {
|
||||
edits.onRefused(result.reason);
|
||||
setSaid(`Not moved: ${result.reason}.`);
|
||||
return;
|
||||
}
|
||||
wantRefocus();
|
||||
edits.onMove(moving, id);
|
||||
setSaid(`Moved ${moving} under ${id}.`);
|
||||
};
|
||||
|
||||
const onKey = (e: KeyboardEvent, id: string) => {
|
||||
const dirs: Record<string, "up" | "down" | "left" | "right"> = {
|
||||
ArrowUp: "up",
|
||||
ArrowDown: "down",
|
||||
ArrowLeft: "left",
|
||||
ArrowRight: "right",
|
||||
};
|
||||
const dir = dirs[e.key];
|
||||
if (dir) {
|
||||
if (e.altKey && (dir === "up" || dir === "down")) {
|
||||
e.preventDefault();
|
||||
wantRefocus();
|
||||
edits.onReorder(id, dir === "up" ? -1 : 1);
|
||||
return;
|
||||
}
|
||||
const next = neighbour(layout, flow, id, dir);
|
||||
if (!next) return;
|
||||
e.preventDefault();
|
||||
setCursor(next);
|
||||
if (!carrying) edits.onSelect(next);
|
||||
focusNode(next);
|
||||
return;
|
||||
}
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
if (carrying) drop(id);
|
||||
else edits.onSelect(id);
|
||||
} else if (e.key === "m" || e.key === "M") {
|
||||
const node = byId.get(id);
|
||||
if (!node || node.kind === "source") return;
|
||||
e.preventDefault();
|
||||
setCarrying(id);
|
||||
setCursor(id);
|
||||
setSaid(
|
||||
`Picked up ${id}. Arrow to the box to move it under, Enter to drop, Escape to cancel.`,
|
||||
);
|
||||
} else if (e.key === "Escape" && carrying) {
|
||||
e.preventDefault();
|
||||
setCarrying(null);
|
||||
setSaid(`Put ${carrying} back.`);
|
||||
} else if (e.key === "Delete" || e.key === "Backspace") {
|
||||
const node = byId.get(id);
|
||||
if (!node || node.kind === "source") return;
|
||||
e.preventDefault();
|
||||
wantRefocus();
|
||||
edits.onRemove(id);
|
||||
}
|
||||
};
|
||||
|
||||
const tabStop = selected ?? flow.nodes.find((n) => n.kind === "source")?.id;
|
||||
const selectedNode = selected ? byId.get(selected) : undefined;
|
||||
const canAddBelow = !!selectedNode && !isLeafKind(selectedNode.kind);
|
||||
|
||||
return (
|
||||
<div class="notify-canvas">
|
||||
<svg
|
||||
width={layout.width}
|
||||
height={layout.height}
|
||||
viewBox={`0 0 ${layout.width} ${layout.height}`}
|
||||
role="group"
|
||||
aria-label={`${flow.name}, ${flow.nodes.length} nodes`}
|
||||
>
|
||||
{layout.edges.map((e) => {
|
||||
const mid = (e.x1 + e.x2) / 2;
|
||||
return (
|
||||
<path
|
||||
key={`${e.from}>${e.to}`}
|
||||
class="notify-edge"
|
||||
d={`M${e.x1} ${e.y1} C${mid} ${e.y1} ${mid} ${e.y2} ${e.x2} ${e.y2}`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{layout.nodes.map((p) => {
|
||||
const node = byId.get(p.id);
|
||||
if (!node) return null;
|
||||
const text = describeNode(node);
|
||||
return (
|
||||
<g
|
||||
key={p.id}
|
||||
class={`notify-box notify-box-${node.kind}${p.id === selected ? " notify-box-selected" : ""}`}
|
||||
transform={`translate(${p.x} ${p.y})`}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
aria-pressed={p.id === selected}
|
||||
aria-label={`${node.kind} ${p.id}: ${text}`}
|
||||
onClick={() => onSelect(p.id)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
<div class="notify-canvas-wrap">
|
||||
<div class="notify-palette" role="group" aria-label="add a node">
|
||||
<span class="notify-hint">add</span>
|
||||
{palette.map((p) => (
|
||||
<button
|
||||
key={p.kind}
|
||||
type="button"
|
||||
class={`notify-chip notify-chip-${p.kind}`}
|
||||
title={`${p.description ? `${p.description}. ` : ""}Click to add below the picked box, or drag onto a box.`}
|
||||
onPointerDown={(e) => startDrag(e, { kind: "add", node: p.kind })}
|
||||
onClick={() => {
|
||||
if (selected && canAddBelow) edits.onAdd(p.kind, selected);
|
||||
else edits.onRefused("pick a match or the source to add below");
|
||||
}}
|
||||
>
|
||||
{p.kind}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div class="notify-canvas">
|
||||
<svg
|
||||
ref={svgRef}
|
||||
width={layout.width}
|
||||
height={layout.height}
|
||||
viewBox={`0 0 ${layout.width} ${layout.height}`}
|
||||
role="group"
|
||||
aria-label={`${flow.name}, ${flow.nodes.length} nodes`}
|
||||
aria-describedby="notify-canvas-help"
|
||||
>
|
||||
{layout.edges.map((e) => {
|
||||
const mid = (e.x1 + e.x2) / 2;
|
||||
return (
|
||||
<path
|
||||
key={`${e.from}>${e.to}`}
|
||||
class="notify-edge"
|
||||
d={`M${e.x1} ${e.y1} C${mid} ${e.y1} ${mid} ${e.y2} ${e.x2} ${e.y2}`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{layout.nodes.map((p) => {
|
||||
const node = byId.get(p.id);
|
||||
if (!node) return null;
|
||||
const text = describeNode(node);
|
||||
const pos = siblingPosition(flow, p.id);
|
||||
const order =
|
||||
pos.count > 1
|
||||
? `, runs ${ordinal(pos.index + 1)} of ${pos.count}`
|
||||
: "";
|
||||
const held =
|
||||
drag?.moved &&
|
||||
dragSource?.kind === "move" &&
|
||||
dragSource.id === p.id;
|
||||
return (
|
||||
<g
|
||||
key={p.id}
|
||||
data-node={p.id}
|
||||
class={`notify-box notify-box-${node.kind}${p.id === selected ? " notify-box-selected" : ""}${held || carrying === p.id ? " notify-box-carried" : ""}${holdClass(p.id)}`}
|
||||
transform={`translate(${p.x} ${p.y})`}
|
||||
tabIndex={p.id === tabStop ? 0 : -1}
|
||||
role="button"
|
||||
aria-pressed={p.id === selected}
|
||||
aria-label={`${node.kind} ${p.id}: ${text}${order}`}
|
||||
onPointerDown={(e) => {
|
||||
if (node.kind === "source") {
|
||||
// The source cannot move; a press just picks it.
|
||||
if (e.button === 0) edits.onSelect(p.id);
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
onSelect(p.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<title>{text}</title>
|
||||
<rect width={NODE_WIDTH} height={NODE_HEIGHT} rx="6" />
|
||||
<text class="notify-box-kind" x="10" y="17">
|
||||
{node.kind}
|
||||
</text>
|
||||
<text class="notify-box-text" x="10" y="35">
|
||||
{ellipsize(text, TEXT_CHARS)}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
(e.currentTarget as SVGGElement).focus();
|
||||
startDrag(e, { kind: "move", id: p.id });
|
||||
}}
|
||||
onFocus={() => setCursor(p.id)}
|
||||
onKeyDown={(e) => onKey(e, p.id)}
|
||||
>
|
||||
<title>{text}</title>
|
||||
<rect width={NODE_WIDTH} height={NODE_HEIGHT} rx="6" />
|
||||
<text class="notify-box-kind" x="10" y="17">
|
||||
{node.kind}
|
||||
</text>
|
||||
{pos.count > 1 ? (
|
||||
<text
|
||||
class="notify-box-kind notify-box-order"
|
||||
x={NODE_WIDTH - 10}
|
||||
y="17"
|
||||
text-anchor="end"
|
||||
>
|
||||
{`runs ${ordinal(pos.index + 1)}`}
|
||||
</text>
|
||||
) : null}
|
||||
<text class="notify-box-text" x="10" y="35">
|
||||
{ellipsize(text, TEXT_CHARS)}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
</div>
|
||||
<p class="notify-hint" id="notify-canvas-help">
|
||||
{HELP}
|
||||
</p>
|
||||
<p class="notify-sr" role="status">
|
||||
{said}
|
||||
</p>
|
||||
{drag?.moved ? (
|
||||
<div
|
||||
class="notify-ghost"
|
||||
style={{ left: `${drag.x + 12}px`, top: `${drag.y + 12}px` }}
|
||||
>
|
||||
{dragSource?.kind === "move" ? dragSource.id : dragSource?.node}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue