flexdesk 0.16.0 → 0.17.0

package/src/flow/canvas_editor/index.js

@@ -12,5 +12,6 @@ export { createCanvasEditor, CANVAS_ACTIONS } from './editor.js';
 export { CANVAS_STRINGS } from './strings.js';
 export {
     CANVAS_NODE, layoutGraph as arrangeCanvasGraph, portAnchor as canvasPortAnchor, nodeBottom as canvasNodeBottom,
-    isReturnEdge as isCanvasReturnEdge,
+    nodeWidth as canvasNodeWidth,
+    isReturnEdge as isCanvasReturnEdge, pathPoints as canvasPathPoints, pathMidpoint as canvasPathMidpoint,
 } from './layout.js';

package/src/flow/canvas_editor/layout.js

@@ -6,10 +6,13 @@
  *                    ARITHMETIC over these, never by measuring, so the
  *                    stylesheet must agree with them — `flow_canvas_css` reads
  *                    the sheet and holds it to them.
- *   portAnchor       where a port's line starts or ends
- *   nodeBottom       where a node's drawn box ends
+ *   nodeWidth        a node's width: its type's own `size.w`, else the box's
+ *   portAnchor       where a port's line starts or ends (a folded node's: its header)
+ *   nodeBottom       where a node's drawn box ends (a folded node's: its header)
  *   isReturnEdge     is this line a loop's body going back round?
  *   layoutGraph      ARRANGE: every step's place, left to right in run order
+ *   pathPoints       a drawn line's path, as the points along it
+ *   pathMidpoint     the point halfway along a drawn line, where its label sits
  */
 
 import { arrange } from '../../canvas/edge_router.js';
@@ -22,26 +25,42 @@ const FOOT = 12;
 const inputsOf = (catalogue, node) => (catalogue?.inputs ? catalogue.inputs(node?.type) : []);
 const outputsOf = (catalogue, node) => (catalogue?.outputs ? catalogue.outputs(node?.type) : []);
 const roleOf = (catalogue, node) => (catalogue?.role ? catalogue.role(node?.type) : 'step');
+const sizeOf = (catalogue, node) => (catalogue?.size ? catalogue.size(node?.type) : null);
+/** Is `node` drawn folded to its header? The box's own `folded(node)` decides
+ *  when it has one (the editor's, which folds only with `collapsible`); else
+ *  the node's `collapsed: true`. */
+const foldedOf = (node, box) => (typeof box?.folded === 'function' ? Boolean(box.folded(node))
+    : node?.collapsed === true);
+
+/** `node`'s width: its type's own `size.w` when it has one, else the box's. */
+export function nodeWidth(catalogue, node, box = CANVAS_NODE) {
+    return sizeOf(catalogue, node)?.w || box.width;
+}
 
 /**
  * The point a line meets `node`'s port `portName`: an input on the node's
  * left edge, an output on its right, one row of ports down from the header
  * per port before it — in the order the type DECLARES its ports, the order
  * they are drawn in. A port the type does not have anchors at the first row.
+ * A node folded to its header has its ports folded away: every line meets
+ * the header's middle, on its side.
  */
 export function portAnchor(catalogue, node, portName, direction, box = CANVAS_NODE) {
+    const x = node.position.x + (direction === 'input' ? 0 : nodeWidth(catalogue, node, box));
+    const side = direction === 'input' ? 'left' : 'right';
+    if (foldedOf(node, box)) return { x, y: node.position.y + box.header / 2, side };
     const list = direction === 'input' ? inputsOf(catalogue, node) : outputsOf(catalogue, node);
     const i = Math.max(0, list.findIndex((p) => p.name === portName));
-    return {
-        x: node.position.x + (direction === 'input' ? 0 : box.width),
-        y: node.position.y + box.header + box.row * i + box.row / 2,
-        side: direction === 'input' ? 'left' : 'right',
-    };
+    return { x, y: node.position.y + box.header + box.row * i + box.row / 2, side };
 }
 
 /** Where `node`'s drawn box ends — computed, because jsdom and a node not yet
- *  laid out both answer 0 for `offsetHeight`. */
+ *  laid out both answer 0 for `offsetHeight`. A type with its own `size.h` is
+ *  drawn exactly that tall; a node folded to its header, as tall as that. */
 export function nodeBottom(catalogue, node, box = CANVAS_NODE) {
+    if (foldedOf(node, box)) return node.position.y + box.header;
+    const h = sizeOf(catalogue, node)?.h;
+    if (h) return node.position.y + h;
     const rows = Math.max(inputsOf(catalogue, node).length, outputsOf(catalogue, node).length, 1);
     return node.position.y + box.header + box.row * rows + FOOT;
 }
@@ -74,13 +93,17 @@ export function isReturnEdge(connection, target, catalogue, loopEntry = 'in') {
  *    start step(s) that follows each step's outputs in the order its type
  *    declares them — so a condition's first arm sits above its second
  *    whatever the two steps are called.
+ *  - **each node's own box.** A type's `size` (or `heightOf(node)`, a height
+ *    the editor measured) is the node's height, a folded node's (`folded`, as
+ *    for `portAnchor`) is its header's, and the widest node sets the column
+ *    spacing; with neither, every node is the box's.
  *  - **a loop's return lines left out.** The line from a loop's body back into
  *    the loop is the loop, not a dependency; followed, it would pull the body
  *    left of the loop that runs it. Any other cycle is broken by `arrange`.
  */
 export function layoutGraph(graph, catalogue, { width = CANVAS_NODE.width, header = CANVAS_NODE.header,
                                                 row = CANVAS_NODE.row, gap = 96, rowGap = 40,
-                                                loopEntry = 'in' } = {}) {
+                                                loopEntry = 'in', heightOf = null, folded = undefined } = {}) {
     const nodes = graph?.nodes || [];
     const connections = graph?.connections || [];
     const byId = new Map(nodes.map((n) => [n.id, n]));
@@ -109,10 +132,94 @@ export function layoutGraph(graph, catalogue, { width = CANVAS_NODE.width, heade
     for (const n of nodes) if (!order.has(n.id)) order.set(n.id, order.size);
 
     const rows = (n) => Math.max(inputsOf(catalogue, n).length, outputsOf(catalogue, n).length);
+    const box = { width, header, row, ...(folded !== undefined ? { folded } : {}) };
+    const height = (n) => {
+        if (foldedOf(n, box)) return header + 24;
+        const own = sizeOf(catalogue, n)?.h || (typeof heightOf === 'function' ? heightOf(n) : null);
+        return own ? own + 2 * FOOT : header + row * rows(n) + 24;
+    };
+    const widest = Math.max(width, ...nodes.map((n) => nodeWidth(catalogue, n, box)));
     return arrange(
-        nodes.map((n) => ({ id: n.id, label: String(order.get(n.id)).padStart(6, '0'),
-                            height: header + row * rows(n) + 24 })),
+        nodes.map((n) => ({ id: n.id, label: String(order.get(n.id)).padStart(6, '0'), height: height(n) })),
         connections.filter((c) => !isReturn(c)).map((c) => ({ from: c.target, to: c.source })),
-        { columnGap: width + gap, rowGap },
+        { columnGap: widest + gap, rowGap },
     );
 }
+
+/** Points per curve segment of a sampled path: enough that a label's place
+ *  and a crossing test agree with what the browser draws to within a pixel. */
+const CURVE_STEPS = 24;
+
+/**
+ * The points along an SVG path `d`, as the kernel writes them: absolute `M`,
+ * `L`, `C`, `S` and `Z`, numbers separated by spaces or commas. Each curve is
+ * sampled at `steps` points; a straight run is its two ends. Computed rather
+ * than asked of the browser (`getPointAtLength`), because jsdom has no
+ * geometry and a label must sit in the same place in both.
+ */
+export function pathPoints(d, { steps = CURVE_STEPS } = {}) {
+    const tokens = String(d || '').match(/-?\d*\.?\d+(?:[eE][-+]?\d+)?|[A-Za-z]/g) || [];
+    const points = [];
+    let at = null;
+    let lastControl = null;
+    let opened = null;
+    let i = 0;
+    const num = () => Number(tokens[i++]);
+    const cubic = (c1, c2, end) => {
+        for (let k = 1; k <= steps; k += 1) {
+            const t = k / steps;
+            const u = 1 - t;
+            points.push({
+                x: u * u * u * at.x + 3 * u * u * t * c1.x + 3 * u * t * t * c2.x + t * t * t * end.x,
+                y: u * u * u * at.y + 3 * u * u * t * c1.y + 3 * u * t * t * c2.y + t * t * t * end.y,
+            });
+        }
+        lastControl = c2;
+        at = end;
+    };
+    while (i < tokens.length) {
+        const command = tokens[i++];
+        if (command === 'M') {
+            at = { x: num(), y: num() };
+            opened = at;
+            points.push(at);
+            lastControl = null;
+        } else if (command === 'Z') {
+            at = opened;
+            points.push(at);
+            lastControl = null;
+        } else if (command === 'L') {
+            at = { x: num(), y: num() };
+            points.push(at);
+            lastControl = null;
+        } else if (command === 'C') {
+            const c1 = { x: num(), y: num() };
+            const c2 = { x: num(), y: num() };
+            cubic(c1, c2, { x: num(), y: num() });
+        } else if (command === 'S') {
+            const c1 = lastControl ? { x: 2 * at.x - lastControl.x, y: 2 * at.y - lastControl.y } : at;
+            const c2 = { x: num(), y: num() };
+            cubic(c1, c2, { x: num(), y: num() });
+        } else {
+            throw new Error(`pathPoints reads M, L, C, S and Z only, not "${command}".`);
+        }
+    }
+    return points;
+}
+
+/** The point halfway along `d`, by length. */
+export function pathMidpoint(d) {
+    const points = pathPoints(d);
+    if (points.length < 2) return points[0] ? { ...points[0] } : { x: 0, y: 0 };
+    const lengths = [0];
+    for (let k = 1; k < points.length; k += 1) {
+        lengths.push(lengths[k - 1] + Math.hypot(points[k].x - points[k - 1].x, points[k].y - points[k - 1].y));
+    }
+    const half = lengths[lengths.length - 1] / 2;
+    let k = 1;
+    while (k < lengths.length - 1 && lengths[k] < half) k += 1;
+    const span = lengths[k] - lengths[k - 1];
+    const t = span > 0 ? (half - lengths[k - 1]) / span : 0;
+    return { x: points[k - 1].x + (points[k].x - points[k - 1].x) * t,
+             y: points[k - 1].y + (points[k].y - points[k - 1].y) * t };
+}

package/src/flow/canvas_editor/strings.js

@@ -7,14 +7,28 @@
  * through `strings` and the `dataPortRead` option.
  */
 
+/** `1 step`, `2 notes`, …; a count of none is left out of what is said. */
+const counted = (steps, notes) => [[steps, 'step'], [notes, 'note']].filter(([n]) => n > 0)
+    .map(([n, w]) => `${n} ${w}${n === 1 ? '' : 's'}`).join(' and ');
+
 export const CANVAS_STRINGS = Object.freeze({
     palette: 'Steps',
     canvasLabel: 'Flow canvas',
     toolbarLabel: 'Flow',
     arrange: 'Arrange',
     arrangeTitle: 'Lay the steps out left to right, in the order a run takes them',
+    arrangeLayeredTitle: 'Lay the steps out left to right, following their connections',
     fit: 'Fit',
     fitTitle: 'Show the whole flow',
+    zoomOut: 'Zoom out',
+    zoomOutTitle: 'Make the flow smaller, one step',
+    zoomIn: 'Zoom in',
+    zoomInTitle: 'Make the flow larger, one step',
+    zoomReset: '100%',
+    zoomResetTitle: 'Show the flow at its natural size',
+    zoomAtMin: 'This is as small as the flow is drawn.',
+    zoomAtMax: 'This is as large as the flow is drawn.',
+    minimapTitle: 'Click to move the view there',
     nothingToUndo: 'There is nothing to undo.',
     nothingToRedo: 'There is nothing to redo.',
     arrangeNeedsTwo: 'Arrange needs two steps or more.',
@@ -28,10 +42,76 @@ export const CANVAS_STRINGS = Object.freeze({
     returnLine: 'Back to the loop for its next pass',
     connectedReturn: 'Goes round the loop again.',
     unknownType: (type) => `There is no step type "${type}".`,
+    renderFailed: (name, why) => `${name} could not draw its body${why ? `: ${why}` : '.'}`,
+    updateFailed: (name, why) => `${name} could not bring its body up to date${why ? `: ${why}` : '.'}`,
     stepId: (id) => `Step id: ${id}`,
+    // `renameInPlace`
+    nameEmpty: 'A step needs a name: the one it had is kept.',
+    // `collapsible`
+    collapseNode: 'Fold this step to its header',
+    expandNode: 'Show this step\'s ports again',
     connection: 'Connection',
     connectionLine: (e) => `${e.source} · ${e.sourcePort} → ${e.target} · ${e.targetPort}`,
     removeConnection: 'Remove connection',
     portCount: (n) => `×${n}`,
     portNotTaken: 'not taken',
+
+    // ── under the `connections` option ───────────────────────────────
+    connectTypes: ({ from, fromStep, to, toStep, accepts, provides }) => `${to} on ${toStep} takes `
+        + `${accepts.join(' or ')}, and ${from} on ${fromStep} gives ${provides.join(' or ')}.`,
+    connectRefused: 'These two cannot be connected.',
+    connectDrag: 'Drop it on an input to connect, or on the canvas to add a step there. Esc cancels.',
+    dropOnInput: 'Drop the line on an input to connect it.',
+    dropPickerTitle: 'Add a step and connect it',
+    dropNothingFits: 'No step has an input this output can connect to.',
+    offerAccept: 'Accept',
+    offerDismiss: 'Not now',
+
+    // `multiSelect`
+    alignLeft: 'Align left edges',
+    alignCenter: 'Align centres',
+    alignRight: 'Align right edges',
+    alignTop: 'Align top edges',
+    alignMiddle: 'Align middles',
+    alignBottom: 'Align bottom edges',
+    distributeHorizontal: 'Distribute horizontally',
+    distributeVertical: 'Distribute vertically',
+    alignNeedsTwo: 'Pick two steps or more to align them.',
+    distributeNeedsThree: 'Pick three steps or more to distribute them.',
+    stepsPicked: (n) => `${n} steps picked`,
+    stepsPickedLine: 'Drag one to move them all. The arrow keys nudge them.',
+    removeSteps: (n) => (n === 1 ? 'Remove 1 step' : `Remove ${n} steps`),
+    // `groups`
+    group: 'Group',
+    groupTitle: 'Group the picked steps (Ctrl+G)',
+    ungroup: 'Ungroup',
+    ungroupTitle: 'Ungroup the groups the picked steps are in (Ctrl+Shift+G)',
+    groupNeedsOne: 'Pick the steps to group first.',
+    ungroupNeedsGroup: 'None of the picked steps is in a group.',
+    groupUntitled: 'Group',
+    groupName: 'Group name',
+    // `notes`
+    note: 'Note',
+    noteTitle: 'Add a note to the canvas',
+    noteKind: 'Note',
+    noteText: 'Note text',
+    noteEmpty: 'Empty note — double-click to write in it',
+    removeNote: 'Remove note',
+    itemsPicked: (steps, notes) => `${counted(steps, notes)} picked`,
+    removeItems: (n) => (n === 1 ? 'Remove 1 item' : `Remove ${n} items`),
+    // `clipboard`
+    copyLabel: (title, n) => (n > 1 ? `${title} (copy ${n})` : `${title} (copy)`),
+    copied: (n) => (n === 1 ? 'Copied 1 step.' : `Copied ${n} steps.`),
+    cutDone: (n) => (n === 1 ? 'Cut 1 step.' : `Cut ${n} steps.`),
+    // a copy or a cut that took notes too (`notes`)
+    copiedItems: (steps, notes) => `Copied ${counted(steps, notes)}.`,
+    cutDoneItems: (steps, notes) => `Cut ${counted(steps, notes)}.`,
+    nothingPicked: 'Pick a step first.',
+    cannotCopy: 'None of the picked steps can be copied.',
+    cannotCut: 'None of the picked steps can be removed, so none can be cut.',
+    nothingToPaste: 'There is nothing to paste.',
+    pasteNotSteps: 'What is on the clipboard is not steps of a flow.',
+    notAddable: (name) => `‘${name}’ cannot be added to this flow.`,
+    clipboardFailed: 'The clipboard could not be reached.',
+    routingFallback: (n) => `More than ${n} steps: the lines are drawn as plain curves, not routed round the steps.`,
 });

package/src/flow/kit/catalogue.js

@@ -11,6 +11,29 @@
  *
  * Any other key a type carries is kept and ignored.
  *
+ * ══ A TYPE MAY DRAW ITS OWN BODY ═══════════════════════════════════════
+ *
+ * Four optional keys are read by the canvas editor, and only by it:
+ *
+ *     render(body, node, ctx)   fills the node's body, below its ports, once
+ *     update(body, node, ctx)   brings that body up to date on every repaint
+ *     size: {w, h}              the node's box in px (either may be left out)
+ *     accent                    a tone (`dom.js`'s TONES) the node is marked in
+ *
+ * A type without them is drawn as every other step is. A `size` that is not
+ * positive numbers, an `accent` that is not a tone, a `render` or `update`
+ * that is not a function: each is a line in `problems`, and that key is not
+ * used.
+ *
+ * A fifth, `inline: ['key', …]`, names settings of the type's `config_schema`
+ * the canvas editor draws ON the node too, by the same widget registry the
+ * settings panel uses. A name the schema does not have, or an `inline` that is
+ * not a list of names, is a line in `problems`, and that name is not drawn.
+ *
+ * A sixth, `rank: 'source' | 'sink'`, is the hint the canvas editor's
+ * `layout: 'layered'` Arrange gives its steps: the first column or the last.
+ * Any other value is a line in `problems`, and it is not used.
+ *
  * ══ DECLARED PORT ORDER IS MEANING ═════════════════════════════════════
  *
  * A lane reads an operation's first FLOW input as its own lane and the rest as
@@ -33,7 +56,7 @@
  * consumer's catalogue with one bad entry still opens an editor.
  */
 
-import { checkSettingsSchema } from './settings_schema.js';
+import { checkSettingsSchema, fieldsFromSchema } from './settings_schema.js';
 import { TONES } from './dom.js';
 
 const isPlainObject = (v) => v !== null && typeof v === 'object' && !Array.isArray(v);
@@ -47,6 +70,41 @@ function cleanStem(stem) {
     return String(stem ?? '').replace(/[^A-Za-z0-9_-]/g, '-').slice(0, 40) || 'step';
 }
 
+const positive = (v) => (typeof v === 'number' && Number.isFinite(v) && v > 0 ? v : null);
+
+/** A type's `size` as `{w, h}` (either null), or null — with the problem, if any. */
+function readSize(raw) {
+    if (raw === undefined || raw === null) return { size: null, problem: null };
+    const refused = { size: null, problem: 'size must be {w, h} in positive pixels; it is not used.' };
+    if (!isPlainObject(raw)) return refused;
+    const w = raw.w === undefined ? null : positive(raw.w);
+    const h = raw.h === undefined ? null : positive(raw.h);
+    if ((raw.w !== undefined && w === null) || (raw.h !== undefined && h === null) || (w === null && h === null)) {
+        return refused;
+    }
+    return { size: Object.freeze({ w, h }), problem: null };
+}
+
+/** A type's `inline` names, those its schema has, in the order given — each
+ *  one it does not have a line in `problems`. */
+function readInline(raw, schema, id, problems) {
+    if (raw === undefined || raw === null) return Object.freeze([]);
+    if (!Array.isArray(raw)) {
+        problems.push({ type_id: id, message: `"${id}"'s inline must be a list of setting names; it is not used.` });
+        return Object.freeze([]);
+    }
+    const known = new Set(fieldsFromSchema(schema).map((f) => f.key));
+    const keys = [];
+    for (const key of raw) {
+        if (typeof key === 'string' && known.has(key)) {
+            if (!keys.includes(key)) keys.push(key);
+        } else {
+            problems.push({ type_id: id, message: `"${id}"'s inline names "${String(key)}", which its settings do not have; it is not drawn.` });
+        }
+    }
+    return Object.freeze(keys);
+}
+
 function normalisePort(p) {
     return {
         ...p,
@@ -69,6 +127,10 @@ export function createStepCatalogue(types, { categories = [], idBase = defaultId
     const problems = [];
     const byId = new Map();
     const order = [];
+    const sizes = new Map();
+    const accents = new Map();
+    const inlines = new Map();
+    const ranks = new Map();
 
     for (const raw of Array.isArray(types) ? types : []) {
         if (!isPlainObject(raw)) {
@@ -108,6 +170,24 @@ export function createStepCatalogue(types, { categories = [], idBase = defaultId
         });
         byId.set(id, type);
         order.push(type);
+        const { size, problem } = readSize(raw.size);
+        if (problem) problems.push({ type_id: id, message: `"${id}"'s ${problem}` });
+        if (size) sizes.set(id, size);
+        if (raw.accent !== undefined && raw.accent !== null) {
+            if (TONES.includes(raw.accent)) accents.set(id, raw.accent);
+            else problems.push({ type_id: id, message: `"${id}"'s accent "${raw.accent}" is not a tone; it is not used.` });
+        }
+        const inline = readInline(raw.inline, schema, id, problems);
+        if (inline.length) inlines.set(id, inline);
+        if (raw.rank !== undefined && raw.rank !== null) {
+            if (raw.rank === 'source' || raw.rank === 'sink') ranks.set(id, raw.rank);
+            else problems.push({ type_id: id, message: `"${id}"'s rank "${String(raw.rank)}" is not 'source' or 'sink'; it is not used.` });
+        }
+        for (const hook of ['render', 'update']) {
+            if (raw[hook] !== undefined && typeof raw[hook] !== 'function') {
+                problems.push({ type_id: id, message: `"${id}"'s ${hook} is not a function; it is not used.` });
+            }
+        }
     }
 
     const cats = (Array.isArray(categories) ? categories : []).filter(isPlainObject).map((c) => Object.freeze({
@@ -129,11 +209,11 @@ export function createStepCatalogue(types, { categories = [], idBase = defaultId
         extra.push(Object.freeze({ id: '', label: '', tone: 'grey', layout: 'list' }));
     }
     const allCats = Object.freeze([...cats, ...extra]);
-    const rank = (t) => {
+    const categoryIndex = (t) => {
         const id = t.category === null ? '' : t.category;
         return allCats.findIndex((c) => c.id === id);
     };
-    const sorted = [...order].sort((a, b) => (rank(a) - rank(b))
+    const sorted = [...order].sort((a, b) => (categoryIndex(a) - categoryIndex(b))
         || String(a.label).localeCompare(String(b.label)));
 
     const portsOf = (typeId, direction, flow) => {
@@ -160,6 +240,20 @@ export function createStepCatalogue(types, { categories = [], idBase = defaultId
             const t = byId.get(typeId);
             return (t && allCats.find((c) => c.id === (t.category ?? ''))?.tone) || 'grey';
         },
+        /** The type's own box, `{w, h}` (either null), or null when it has none. */
+        size: (typeId) => sizes.get(typeId) ?? null,
+        /** The type's accent tone, or null when it has none. */
+        accent: (typeId) => accents.get(typeId) ?? null,
+        /** The setting names the type draws on its node (`inline`), in order; `[]` when none. */
+        inline: (typeId) => inlines.get(typeId) ?? Object.freeze([]),
+        /** The type's layered-layout hint, 'source' or 'sink', or null when it has none. */
+        rank: (typeId) => ranks.get(typeId) ?? null,
+        /** The type's `{render, update}` (`update` may be null), or null when it has no `render`. */
+        body: (typeId) => {
+            const t = byId.get(typeId);
+            const render = typeof t?.render === 'function' ? t.render : null;
+            return render ? { render, update: typeof t.update === 'function' ? t.update : null } : null;
+        },
         inputs: (typeId, { flow = false } = {}) => portsOf(typeId, 'input', flow),
         outputs: (typeId, { flow = false } = {}) => portsOf(typeId, 'output', flow),
         port: (typeId, name, direction) => byId.get(typeId)?.ports

package/src/flow/kit/index.js

@@ -20,9 +20,9 @@ export {
 } from './references.js';
 export { createChipInput } from './chip_input.js';
 export {
-    createWidgetRegistry, GENERIC_WIDGETS, DEFAULT_WIDGET_REFERENCES, renderField, shownValue, typedValue,
-    fitToText,
+    createWidgetRegistry, GENERIC_WIDGETS, DEFAULT_WIDGET_REFERENCES, renderField, typedValue, fitToText,
 } from './widgets.js';
+export { shownValue } from '../../ui/components/choice_controls.js';
 export { createSettingsPanel } from './settings_panel.js';
 export { openStepPicker } from './step_picker.js';
 export { openValuePicker } from './value_picker.js';
@@ -34,5 +34,5 @@ export { FlowHistory } from './history.js';
 export { bindFlowKeys, ownsUndo, isTextField, isOwnControl } from './keys.js';
 export {
     ID_OK, LOGIC_GRAPH_STRINGS, emptyGraph, normalise, serialise, nextId, addNode, removeNode, moveNode,
-    canConnect, connect, disconnect, sameEdge, inputNamesOf,
+    canConnect, connect, addConnection, disconnect, sameEdge, inputNamesOf,
 } from './logic_graph.js';

package/src/flow/kit/keys.js

@@ -4,6 +4,8 @@
  *   Ctrl/⌘+Z · Ctrl/⌘+Y, Ctrl/⌘+Shift+Z   undo · redo
  *   Delete                                 remove the selection
  *   Ctrl/⌘+D · C · X · V                   duplicate · copy · cut · paste
+ *   Ctrl/⌘+A                               pick everything
+ *   Ctrl/⌘+G · Ctrl/⌘+Shift+G              group · ungroup the selection
  *   F2                                     rename
  *   Alt+↑ · Alt+↓ · Alt+←                  move up · down · out of its block
  *   ↑ ↓ ← →                                move the selection
@@ -66,7 +68,8 @@ export function isTextField(target) {
  *
  * @param {HTMLElement} root
  * @param {object} handlers  undo, redo, remove, duplicate, copy, cut, paste,
- *        rename, moveUp, moveDown, moveOut, up, down, left, right, open, escape
+ *        selectAll, group, ungroup, rename, moveUp, moveDown, moveOut, up, down, left, right,
+ *        open, escape
  * @returns {() => void} unbind
  */
 export function bindFlowKeys(root, handlers = {}) {
@@ -100,8 +103,11 @@ export function bindFlowKeys(root, handlers = {}) {
             if (lower === 'c') { run('copy', ev); return; }
             if (lower === 'x') { run('cut', ev); return; }
             if (lower === 'v') { run('paste', ev); return; }
+            if (lower === 'a') { run('selectAll', ev); return; }
+            if (lower === 'g') { run('group', ev); return; }
             return;
         }
+        if (mod && lower === 'g') { run('ungroup', ev); return; }
         if (ev.altKey && !ev.ctrlKey && !ev.metaKey) {
             if (k === 'ArrowUp') run('moveUp', ev);
             else if (k === 'ArrowDown') run('moveDown', ev);