@fusion.dev/helix-headless 0.110.3 → 0.110.5

package/custom-elements.json

@@ -11386,16 +11386,6 @@
               "description": "A card's geometry by its name.",
               "readonly": true
             },
-            {
-              "kind": "field",
-              "name": "groups",
-              "type": {
-                "text": "CanvasNode[]"
-              },
-              "privacy": "private",
-              "description": "The groups alone, which is all a card's group is chosen from.",
-              "readonly": true
-            },
             {
               "kind": "field",
               "name": "cache",
@@ -12196,6 +12186,26 @@
               ],
               "description": "The element behind a connection's key, for what only the element knows."
             },
+            {
+              "kind": "field",
+              "name": "keying",
+              "type": {
+                "text": "| {\n        byElement: Map<HelixHeadlessCanvasEdge, string>\n        byKey: Map<string, HelixHeadlessCanvasEdge>\n      }\n    | undefined"
+              },
+              "privacy": "private",
+              "default": "undefined",
+              "description": "Every connection's key and every key's element, worked out once for the\nrender that asks for them.\n\n**One pass, where each asked alone walked them all.** A connection with no\n`name` counts its twins to be told apart, and a render asks every\nconnection's element by key, so four hundred unnamed connections cost 53\nms a render and 4.7 seconds with them all chosen, every step of a drag.\nKept from `willUpdate` to `updated` only: outside a render a handler may\nhave just moved a connection's ends, and its key is worked out afresh."
+            },
+            {
+              "kind": "method",
+              "name": "keyAll",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{\n    byElement: Map<HelixHeadlessCanvasEdge, string>\n    byKey: Map<string, HelixHeadlessCanvasEdge>\n  }"
+                }
+              }
+            },
             {
               "kind": "field",
               "name": "edgeElements",
@@ -12766,6 +12776,16 @@
               },
               "description": "The board's current view: the document's point at the middle of the view,\nand the zoom.\n\n**Read to save a view and written to restore one**, which a consumer keeping\na minimap in step, or putting a reader back where they were, had no way to\ndo: where the board sat was private, and the events said only which way a\ncontrol had moved it. The middle rather than a corner, so a view saved in\none box shows the same thing in the middle of a box of another size.\nWriting one counts as the reader choosing a view, so a later resize keeps\nit rather than fitting the board again."
             },
+            {
+              "kind": "field",
+              "name": "waiting",
+              "type": {
+                "text": "CanvasView | undefined"
+              },
+              "privacy": "private",
+              "default": "undefined",
+              "description": "A view written before the board could place it, placed once it can."
+            },
             {
               "kind": "field",
               "name": "reported",
@@ -14109,7 +14129,7 @@
               "name": "holding"
             },
             {
-              "description": "The user has been still long enough for the controls to hide.",
+              "description": "The user has been still for `idle-delay` milliseconds. The board's own controls stay; select on it to hide chrome of your own.",
               "name": "idle"
             },
             {

package/dist/canvas/root/canvas-root.d.ts

@@ -119,7 +119,7 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * @cssstate empty - While the document has no nodes.
  * @cssstate fullscreen - While the board fills the screen.
  * @cssstate holding - An item picked up with a click follows the pointer until the next press puts it down.
- * @cssstate idle - The user has been still long enough for the controls to hide.
+ * @cssstate idle - The user has been still for `idle-delay` milliseconds. The board's own controls stay; select on it to hide chrome of your own.
  * @cssstate pressing - While a press on the board, its cards or its connections is under way.
  */
 export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
@@ -320,8 +320,6 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
     private get byName();
     /** A card's geometry by its name. */
     private get byId();
-    /** The groups alone, which is all a card's group is chosen from. */
-    private get groups();
     /**
      * What the board reads from its children, kept for the rest of the turn.
      *
@@ -549,6 +547,19 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
     private fixed;
     /** The element behind a connection's key, for what only the element knows. */
     private edgeElement;
+    /**
+     * Every connection's key and every key's element, worked out once for the
+     * render that asks for them.
+     *
+     * **One pass, where each asked alone walked them all.** A connection with no
+     * `name` counts its twins to be told apart, and a render asks every
+     * connection's element by key, so four hundred unnamed connections cost 53
+     * ms a render and 4.7 seconds with them all chosen, every step of a drag.
+     * Kept from `willUpdate` to `updated` only: outside a render a handler may
+     * have just moved a connection's ends, and its key is worked out afresh.
+     */
+    private keying;
+    private keyAll;
     /** The connections declared, in the order they were written. */
     private get edgeElements();
     /**
@@ -784,6 +795,8 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      */
     get view(): CanvasView;
     set view(next: CanvasView);
+    /** A view written before the board could place it, placed once it can. */
+    private waiting;
     /** The view last reported, so a render that did not move the board says nothing. */
     private reported?;
     /**

package/dist/canvas/root/canvas-root.js

@@ -9,7 +9,7 @@ import { html, nothing, svg } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { HelixHeadlessCanvasEdge } from '../edge/canvas-edge.js';
 import { HelixHeadlessCanvasNode } from '../node/canvas-node.js';
-import { colorOf, connector, ends, extent, groupOf, inside, port, reading, sideNear, } from './canvas-document.js';
+import { colorOf, connector, ends, extent, inside, port, reading, sideNear, } from './canvas-document.js';
 export { fromJsonCanvas } from './canvas-document.js';
 const MARGIN = 32;
 const ARROW = 'canvas-arrow';
@@ -65,6 +65,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.sides = new Map();
         this.pressing = false;
         this.pointing = false;
+        this.keying = undefined;
         this.edgeKeys = new WeakMap();
         this.handlePointerDown = (event) => {
             const path = event.composedPath();
@@ -379,6 +380,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             const key = edge ?? card.name;
             const along = inlineStep(this, event.key);
             const down = event.key === 'ArrowDown' ? 1 : event.key === 'ArrowUp' ? -1 : 0;
+            const plain = !event.metaKey && !event.ctrlKey && !event.altKey;
             if (card && event.shiftKey && (along !== 0 || down !== 0)) {
                 event.preventDefault();
                 if (this.fixed(card)) {
@@ -432,7 +434,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 this.partNamed('region')?.focus();
                 return;
             }
-            if (!this.linking && (event.key === 'F2' || (card && event.key === 'Enter'))) {
+            if (plain && !this.linking && (event.key === 'F2' || (card && event.key === 'Enter'))) {
                 event.preventDefault();
                 this.editStop(key);
                 return;
@@ -450,7 +452,11 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 }
                 return;
             }
-            if (card && !this.fixed(card) && !this.linking && (event.key === 'c' || event.key === 'C')) {
+            if (plain &&
+                card &&
+                !this.fixed(card) &&
+                !this.linking &&
+                (event.key === 'c' || event.key === 'C')) {
                 event.preventDefault();
                 this.startLinking(card.name);
                 return;
@@ -459,12 +465,13 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 !this.linking &&
                 !this.readOnly &&
                 !this.edgeElement(edge)?.readOnly &&
+                plain &&
                 (event.key === 'c' || event.key === 'C')) {
                 event.preventDefault();
                 this.startReconnect(edge, 'to');
                 return;
             }
-            if (event.key === 'Delete' || event.key === 'Backspace') {
+            if (plain && !this.linking && (event.key === 'Delete' || event.key === 'Backspace')) {
                 const picked = this.picked;
                 const keys = picked.includes(key) ? picked : [key];
                 const loose = keys.filter((one) => one.startsWith('edge:')
@@ -477,7 +484,8 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 return;
             }
             const walk = this.linking ? this.walk.filter((one) => one.kind === 'node') : this.walk;
-            const at = walk.findIndex((one) => one.key === key);
+            const found = walk.findIndex((one) => one.key === key);
+            const at = found === -1 && this.linking ? walk.findIndex((one) => one.key === this.linking?.from) : found;
             const to = event.key === 'Home'
                 ? 0
                 : event.key === 'End'
@@ -506,7 +514,9 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 if (this.linking) {
                     this.linking = { ...this.linking, to: this.arrival(card.name) };
                 }
-                this.reveal(card.name);
+                if (!this.pointing) {
+                    this.reveal(card.name);
+                }
             }
         };
         this.handleFocusOut = (event) => {
@@ -548,6 +558,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.handleEditorBlur = (event) => {
             this.finishEditing(event.currentTarget, true);
         };
+        this.waiting = undefined;
         this.handleSlotChange = () => {
             this.requestUpdate();
         };
@@ -568,9 +579,6 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
     get byId() {
         return this.remember('byId', () => new Map(this.nodes.map((node) => [node.id, node])));
     }
-    get groups() {
-        return this.remember('groups', () => this.nodes.filter((node) => node.type === 'group'));
-    }
     remember(key, compute) {
         const cache = this.cache;
         if (Object.keys(cache).length === 0) {
@@ -862,6 +870,12 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             element.toSide = detail.toSide;
             this.rekey(linking.edge, this.keyOfElement(element));
         }
+        if (linking.pointer === undefined) {
+            this.said = fillTemplate(this.connectedLabel, {
+                from: this.nameOf(detail.from),
+                to: this.nameOf(detail.to),
+            });
+        }
         this.dispatchEvent(new HelixReconnectEvent(detail));
     }
     rekey(was, now) {
@@ -967,12 +981,38 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         return this.readOnly || card === undefined || card.readOnly;
     }
     edgeElement(key) {
+        if (this.keying) {
+            return this.keying.byKey.get(key);
+        }
         return this.edgeElements.find((child) => this.keyOfElement(child) === key);
     }
+    keyAll() {
+        const byElement = new Map();
+        const byKey = new Map();
+        const twins = new Map();
+        for (const element of this.edgeElements) {
+            const base = keyBase({ fromNode: element.from, id: element.name, toNode: element.to });
+            let key = base;
+            if (!element.name) {
+                const count = (twins.get(base) ?? 0) + 1;
+                twins.set(base, count);
+                key = count > 1 ? `${base}#${count}` : base;
+            }
+            byElement.set(element, key);
+            if (!byKey.has(key)) {
+                byKey.set(key, element);
+            }
+        }
+        return { byElement, byKey };
+    }
     get edgeElements() {
         return this.knownChildren.filter((child) => child instanceof HelixHeadlessCanvasEdge);
     }
     keyOfElement(element) {
+        const known = this.keying?.byElement.get(element);
+        if (known !== undefined) {
+            return known;
+        }
         const base = keyBase({ fromNode: element.from, id: element.name, toNode: element.to });
         if (element.name) {
             return base;
@@ -1302,6 +1342,9 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         return whole;
     }
     get view() {
+        if (this.waiting) {
+            return this.waiting;
+        }
         const origin = this.origin ?? { x: 0, y: 0 };
         const { height, width } = this.box;
         return {
@@ -1311,10 +1354,18 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         };
     }
     set view(next) {
-        const origin = this.origin ?? { x: 0, y: 0 };
+        if (![next.x, next.y, next.zoom].every(Number.isFinite)) {
+            return;
+        }
+        this.touched = true;
+        if (!this.hasUpdated || !this.origin) {
+            this.waiting = next;
+            return;
+        }
+        this.waiting = undefined;
         const { height, width } = this.box;
+        const origin = this.origin;
         const zoom = Math.min(Math.max(next.zoom, ZOOM_MIN), ZOOM_MAX);
-        this.touched = true;
         this.direct = false;
         this.at = {
             x: width / 2 - (next.x - origin.x) * zoom,
@@ -1324,11 +1375,19 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
     }
     toJsonCanvas() {
         const taken = new Set(this.edges.map((edge) => edge.id).filter(Boolean));
-        const edges = this.edges.map((edge) => {
+        const edges = this.edges.map((read) => {
+            const { fromSide: _from, toSide: _to, ...rest } = read;
+            const key = this.keyOf(read);
+            const element = this.edgeElement(key);
+            const edge = {
+                ...rest,
+                ...(element?.fromSide ? { fromSide: element.fromSide } : {}),
+                ...(element?.toSide ? { toSide: element.toSide } : {}),
+            };
             if (edge.id) {
-                return { ...edge };
+                return edge;
             }
-            const base = this.publicName(this.keyOf(edge));
+            const base = this.publicName(key);
             let id = base;
             for (let count = 2; taken.has(id); count++) {
                 id = `${base}-${count}`;
@@ -1366,8 +1425,13 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
+        if (this.waiting) {
+            this.measured = this.box;
+            this.view = this.waiting;
+        }
     }
     updated(changed) {
+        this.keying = undefined;
         super.updated(changed);
         if (this.holding && !this.held) {
             this.letGo();
@@ -1502,6 +1566,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.removeEventListener('pointerup', this.handlePointerUp);
     }
     willUpdate(changed) {
+        this.keying = this.keyAll();
         super.willUpdate(changed);
         const drawn = extent(this.nodes);
         const origin = { x: drawn.x - MARGIN, y: drawn.y - MARGIN };
@@ -1528,18 +1593,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         const stop = this.stop !== undefined && this.keyNamed(this.stop) === this.stop
             ? this.stop
             : reading(all, this.edges, this.order ?? 'spatial')[0]?.id;
-        const groups = this.groups;
         for (const card of this.cards) {
-            const group = card.group
-                ? undefined
-                : groupOf({
-                    height: card.height,
-                    id: card.name,
-                    type: 'text',
-                    width: card.width,
-                    x: card.x,
-                    y: card.y,
-                }, groups);
             const x = finite(card.x) - origin.x;
             const y = finite(card.y) - origin.y;
             const placed = `${x} ${y} ${finite(card.width)} ${finite(card.height)}`;
@@ -1550,12 +1604,6 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 size(card, '--_canvas-card-inline-size', finite(card.width));
                 size(card, '--_canvas-card-block-size', finite(card.height));
             }
-            if (group) {
-                card.setAttribute('data-group', group.id);
-            }
-            else {
-                card.removeAttribute('data-group');
-            }
             const node = this.byId.get(card.name);
             card.links = node ? this.linksOf(node) : '';
             card.current = card.name === stop;
@@ -1616,7 +1664,8 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             const key = this.keyOf(edge);
             const element = elements.get(key);
             const drawn = this.geometryOf(edge, origin);
-            if (!drawn || (this.linking?.edge === key && !this.linking.pressed)) {
+            const lifted = this.linking?.edge === key && !this.linking.pressed;
+            if (!drawn || (lifted && this.linking?.pointer !== undefined)) {
                 return nothing;
             }
             const { from, to } = drawn;
@@ -1632,7 +1681,9 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             role="button"
             tabindex=${key === stop ? '0' : '-1'}
           />
-          <path
+          ${lifted
+                ? nothing
+                : svg `<path
             part="edge"
             aria-hidden="true"
             d=${drawn.d}
@@ -1643,7 +1694,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             marker-end=${ends.end ? `url(#${ARROW})` : nothing}
             marker-start=${ends.start ? `url(#${ARROW})` : nothing}
             style=${custom(element, '--canvas-edge-color') ? `--_canvas-edge-color: ${custom(element, '--canvas-edge-color')}` : nothing}
-          />
+          />`}
 `;
         })}
       ${this.renderDraft(origin)}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.110.3",
+  "version": "0.110.5",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,13 +46,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.110.3",
-    "@fusion.dev/helix-icons": "0.110.3",
+    "@fusion.dev/helix-core": "0.110.5",
+    "@fusion.dev/helix-icons": "0.110.5",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.110.3",
-    "@fusion.dev/helix-testing": "0.110.3",
+    "@fusion.dev/helix-cem": "0.110.5",
+    "@fusion.dev/helix-testing": "0.110.5",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -24856,7 +24856,7 @@ export type CustomElements = {
    * - `empty`: While the document has no nodes.
    * - `fullscreen`: While the board fills the screen.
    * - `holding`: An item picked up with a click follows the pointer until the next press puts it down.
-   * - `idle`: The user has been still long enough for the controls to hide.
+   * - `idle`: The user has been still for `idle-delay` milliseconds. The board's own controls stay; select on it to hide chrome of your own.
    * - `pressing`: While a press on the board, its cards or its connections is under way.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
@@ -44789,7 +44789,7 @@ export type CustomElementsSolidJs = {
    * - `empty`: While the document has no nodes.
    * - `fullscreen`: While the board fills the screen.
    * - `holding`: An item picked up with a click follows the pointer until the next press puts it down.
-   * - `idle`: The user has been still long enough for the controls to hide.
+   * - `idle`: The user has been still for `idle-delay` milliseconds. The board's own controls stay; select on it to hide chrome of your own.
    * - `pressing`: While a press on the board, its cards or its connections is under way.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */