@grafloria/element 0.3.18 → 0.3.19

package/src/libs/renderer/src/svg/port-glyph.js

@@ -0,0 +1,97 @@
+"use strict";
+// port-glyph.ts — Wave 6 (Ports & connections), Card 0.
+//
+// The port's rendered marker. Before wave 6 every port in Grafloria was a `<circle>`
+// — hardcoded in `SVGRenderer.renderPort` — while THREE separate config surfaces
+// claimed otherwise and were all dead:
+//
+//   * `PortModel.style`  — serialized, deserialized, read by nobody.
+//   * `PortModel.visible` — same: round-tripped faithfully, never consulted.
+//   * `PortRenderingConfig.svg.{shape,fill,stroke,strokeWidth}` and `.size` —
+//     declared in the template system with shape: 'circle' | 'rect' | 'custom',
+//     of which only `.mode` and `.visibility` were ever read.
+//
+// This module is where a port's glyph is actually decided. PURE: spec in, VNode
+// in node-local coordinates out.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.glyphHalfExtents = glyphHalfExtents;
+exports.renderPortGlyph = renderPortGlyph;
+/** Half-extents of the glyph box, honouring size/width/height with `radius` fallback. */
+function glyphHalfExtents(shape, radius) {
+    var _a, _b, _c, _d;
+    const size = shape === null || shape === void 0 ? void 0 : shape.size;
+    const width = (_b = (_a = shape === null || shape === void 0 ? void 0 : shape.width) !== null && _a !== void 0 ? _a : size) !== null && _b !== void 0 ? _b : radius * 2;
+    const height = (_d = (_c = shape === null || shape === void 0 ? void 0 : shape.height) !== null && _c !== void 0 ? _c : size) !== null && _d !== void 0 ? _d : radius * 2;
+    return { hw: width / 2, hh: height / 2 };
+}
+/** `rotate(deg cx cy)` — omitted entirely when the glyph isn't rotated. */
+function rotationTransform(shape, x, y) {
+    const degrees = shape === null || shape === void 0 ? void 0 : shape.rotation;
+    if (!degrees)
+        return undefined;
+    return `rotate(${degrees} ${x} ${y})`;
+}
+/**
+ * Build the port's glyph VNode.
+ *
+ * BYTE-STABILITY CONTRACT: with `shape` undefined this returns exactly the
+ * `<circle cx cy r>` the renderer emitted before wave 6 — same element, same
+ * prop set, same order, no rotation attribute. Every existing diagram's port
+ * VNodes are unchanged.
+ */
+function renderPortGlyph(input) {
+    var _a;
+    const { x, y, shape, radius, props } = input;
+    const kind = (_a = shape === null || shape === void 0 ? void 0 : shape.shape) !== null && _a !== void 0 ? _a : 'circle';
+    const transform = rotationTransform(shape, x, y);
+    const extra = transform ? { transform } : {};
+    switch (kind) {
+        case 'square': {
+            const { hw, hh } = glyphHalfExtents(shape, radius);
+            return {
+                type: 'rect',
+                props: Object.assign(Object.assign({ x: x - hw, y: y - hh, width: hw * 2, height: hh * 2 }, props), extra),
+            };
+        }
+        case 'diamond': {
+            const { hw, hh } = glyphHalfExtents(shape, radius);
+            return {
+                type: 'polygon',
+                props: Object.assign(Object.assign({ points: `${x},${y - hh} ${x + hw},${y} ${x},${y + hh} ${x - hw},${y}` }, props), extra),
+            };
+        }
+        case 'triangle': {
+            // Apex UP by default; `rotation` aims it anywhere (a 90° triangle is the
+            // classic "signal flows this way" port of a node editor).
+            const { hw, hh } = glyphHalfExtents(shape, radius);
+            return {
+                type: 'polygon',
+                props: Object.assign(Object.assign({ points: `${x},${y - hh} ${x + hw},${y + hh} ${x - hw},${y + hh}` }, props), extra),
+            };
+        }
+        case 'path': {
+            // Author-supplied `d`, drawn in a box centred on (0,0) and translated onto
+            // the anchor. A path glyph with no `d` degrades to the default circle
+            // rather than emitting an empty <path> that hit-tests as nothing.
+            if (!(shape === null || shape === void 0 ? void 0 : shape.path))
+                break;
+            const translate = `translate(${x} ${y})`;
+            return {
+                type: 'path',
+                props: Object.assign(Object.assign({ d: shape.path }, props), { transform: transform ? `${translate} rotate(${shape.rotation} 0 0)` : translate }),
+            };
+        }
+        case 'circle':
+        default:
+            break;
+    }
+    // The legacy glyph. `r` honours an explicit size (size is a DIAMETER) but
+    // falls back to the interaction config's radius — so an unconfigured port is
+    // byte-for-byte what it always was.
+    const r = (shape === null || shape === void 0 ? void 0 : shape.size) !== undefined ? shape.size / 2 : radius;
+    return {
+        type: 'circle',
+        props: Object.assign(Object.assign({ cx: x, cy: y, r }, props), extra),
+    };
+}
+//# sourceMappingURL=port-glyph.js.map

package/src/libs/renderer/src/svg/port-glyph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"port-glyph.js","sourceRoot":"","sources":["../../../../../../renderer/src/svg/port-glyph.ts"],"names":[],"mappings":";AAAA,wDAAwD;AACxD,EAAE;AACF,qFAAqF;AACrF,iFAAiF;AACjF,uCAAuC;AACvC,EAAE;AACF,qEAAqE;AACrE,6EAA6E;AAC7E,8EAA8E;AAC9E,gFAAgF;AAChF,8DAA8D;AAC9D,EAAE;AACF,gFAAgF;AAChF,iCAAiC;;AAkBjC,4CAQC;AAiBD,0CAsEC;AAhGD,yFAAyF;AACzF,SAAgB,gBAAgB,CAC9B,KAAgC,EAChC,MAAc;;IAEd,MAAM,IAAI,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAC;IACzB,MAAM,KAAK,GAAG,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,mCAAI,IAAI,mCAAI,MAAM,GAAG,CAAC,CAAC;IACjD,MAAM,MAAM,GAAG,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,mCAAI,IAAI,mCAAI,MAAM,GAAG,CAAC,CAAC;IACnD,OAAO,EAAE,EAAE,EAAE,KAAK,GAAG,CAAC,EAAE,EAAE,EAAE,MAAM,GAAG,CAAC,EAAE,CAAC;AAC3C,CAAC;AAED,2EAA2E;AAC3E,SAAS,iBAAiB,CAAC,KAAgC,EAAE,CAAS,EAAE,CAAS;IAC/E,MAAM,OAAO,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,CAAC;IAChC,IAAI,CAAC,OAAO;QAAE,OAAO,SAAS,CAAC;IAC/B,OAAO,UAAU,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;AACxC,CAAC;AAED;;;;;;;GAOG;AACH,SAAgB,eAAe,CAAC,KAAqB;;IACnD,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC7C,MAAM,IAAI,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,mCAAI,QAAQ,CAAC;IACtC,MAAM,SAAS,GAAG,iBAAiB,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAE7C,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;YACnD,OAAO;gBACL,IAAI,EAAE,MAAM;gBACZ,KAAK,gCAAI,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,GAAG,CAAC,IAAK,KAAK,GAAK,KAAK,CAAE;aACnF,CAAC;QACJ,CAAC;QAED,KAAK,SAAS,CAAC,CAAC,CAAC;YACf,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;YACnD,OAAO;gBACL,IAAI,EAAE,SAAS;gBACf,KAAK,gCACH,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,IAClE,KAAK,GACL,KAAK,CACT;aACF,CAAC;QACJ,CAAC;QAED,KAAK,UAAU,CAAC,CAAC,CAAC;YAChB,yEAAyE;YACzE,0DAA0D;YAC1D,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;YACnD,OAAO;gBACL,IAAI,EAAE,SAAS;gBACf,KAAK,gCACH,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,IAC7D,KAAK,GACL,KAAK,CACT;aACF,CAAC;QACJ,CAAC;QAED,KAAK,MAAM,CAAC,CAAC,CAAC;YACZ,2EAA2E;YAC3E,sEAAsE;YACtE,kEAAkE;YAClE,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAA;gBAAE,MAAM;YACxB,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC;YACzC,OAAO;gBACL,IAAI,EAAE,MAAM;gBACZ,KAAK,gCACH,CAAC,EAAE,KAAK,CAAC,IAAI,IACV,KAAK,KACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,WAAW,KAAK,CAAC,QAAQ,OAAO,CAAC,CAAC,CAAC,SAAS,GAChF;aACF,CAAC;QACJ,CAAC;QAED,KAAK,QAAQ,CAAC;QACd;YACE,MAAM;IACV,CAAC;IAED,0EAA0E;IAC1E,6EAA6E;IAC7E,oCAAoC;IACpC,MAAM,CAAC,GAAG,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAC9D,OAAO;QACL,IAAI,EAAE,QAAQ;QACd,KAAK,gCAAI,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,IAAK,KAAK,GAAK,KAAK,CAAE;KAC/C,CAAC;AACJ,CAAC"}

package/src/libs/renderer/src/svg/port-label.d.ts

@@ -0,0 +1,74 @@
+import type { PortLabelSpec } from '@grafloria/engine';
+import type { VNode } from '../types/vnode.types';
+export interface PortLabelInput {
+    spec: PortLabelSpec;
+    /** Node-local anchor of the port's glyph. */
+    x: number;
+    y: number;
+    /** Half-extents of the glyph box — the label clears the glyph, not its centre. */
+    hw: number;
+    hh: number;
+    /** The port's side: the outward normal. */
+    side: 'left' | 'right' | 'top' | 'bottom';
+    /** Node box, for the `radial` layout's centre and for `inside` clamping. */
+    width: number;
+    height: number;
+    /** Vertical nudge applied by collision resolution (see `nudgePortLabels`). */
+    nudge?: number;
+    fontSize: number;
+    fontFamily?: string;
+    color?: string;
+    className?: string;
+}
+export interface PortLabelGeometry {
+    x: number;
+    y: number;
+    /** Total rotation in degrees (0 when the label is horizontal). */
+    rotation: number;
+    align: 'start' | 'middle' | 'end';
+    valign: 'top' | 'middle' | 'bottom';
+}
+/**
+ * Where does the label go, which way does it point, and how does it hang off its
+ * anchor?
+ *
+ * The `align`/`valign` choice matters as much as the position: a label to the
+ * LEFT of a port must be right-aligned (`end`), or it grows away from the port
+ * and collides with the node.
+ */
+export declare function portLabelGeometry(input: PortLabelInput): PortLabelGeometry;
+/**
+ * Total label rotation, with keep-upright auto-flip.
+ *
+ * `angle` rotates the label. `keepUpright` (default ON) then adds 180° to any
+ * label that would end up reading upside-down — the standard trick, and the
+ * reason a `radial` label on the LEFT half of a circle still reads
+ * left-to-right instead of mirror-written.
+ */
+export declare function resolveRotation(spec: PortLabelSpec, direction: {
+    x: number;
+    y: number;
+}): number;
+/**
+ * Collision-aware nudging: when several port labels crowd, push them apart along
+ * the axis they stack on.
+ *
+ * Deliberately a ONE-AXIS resolver over labels that share a side. That is the
+ * shape the crowding actually has — a column of inputs down the left edge whose
+ * labels overlap vertically — and a general 2-D label-placement solver would be
+ * both slower and less predictable (labels would visibly hop sideways as you
+ * dragged a node). Returns a per-label nudge, so the caller can decide whether
+ * to apply it.
+ *
+ * `heights` are the labels' rendered heights, `centres` their unnudged centre
+ * coordinates on the stacking axis, both in the SAME order.
+ */
+export declare function nudgePortLabels(centres: number[], heights: number[], gap?: number): number[];
+/** The label's rendered width, using the shared text engine's estimator. */
+export declare function portLabelWidth(spec: PortLabelSpec, fontSize: number): number;
+/**
+ * Render the port's label as a `<text>` (or a `<g>` when it is rotated — a
+ * rotation needs a transform, and putting it on the text itself would fight the
+ * `x`/`y` the text-block engine emits for its tspans).
+ */
+export declare function renderPortLabel(input: PortLabelInput): VNode;

package/src/libs/renderer/src/svg/port-label.js

@@ -0,0 +1,201 @@
+"use strict";
+// port-label.ts — Wave 6 (Ports & connections), Card 1.
+//
+// A text label per port, laid out relative to the glyph.
+//
+// This does NOT contain a text renderer. Line-breaking, wrapping, multi-line
+// `tspan` emission, ellipsis truncation and vertical alignment all belong to
+// `text-block.ts`, the engine that node labels and link labels (LabelRenderer)
+// already share — so a port label wraps by exactly the same rules as every other
+// piece of text in the diagram, and there is still exactly ONE place that knows
+// how to break a line. What lives here is only the part that is genuinely about
+// PORTS: where the label sits relative to the glyph, which way it faces, and what
+// to do when a column of them crowds together.
+//
+// PURE GEOMETRY + one call into the shared text engine. No models, no DOM.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.portLabelGeometry = portLabelGeometry;
+exports.resolveRotation = resolveRotation;
+exports.nudgePortLabels = nudgePortLabels;
+exports.portLabelWidth = portLabelWidth;
+exports.renderPortLabel = renderPortLabel;
+const engine_1 = require("@grafloria/engine");
+const text_block_1 = require("./text-block");
+/** The unit outward normal of a side. */
+function outwardNormal(side) {
+    switch (side) {
+        case 'left':
+            return { x: -1, y: 0 };
+        case 'right':
+            return { x: 1, y: 0 };
+        case 'top':
+            return { x: 0, y: -1 };
+        case 'bottom':
+            return { x: 0, y: 1 };
+    }
+}
+/** The glyph half-extent along a direction — how far the label must clear. */
+function clearance(direction, hw, hh) {
+    return Math.abs(direction.x) * hw + Math.abs(direction.y) * hh;
+}
+/**
+ * Where does the label go, which way does it point, and how does it hang off its
+ * anchor?
+ *
+ * The `align`/`valign` choice matters as much as the position: a label to the
+ * LEFT of a port must be right-aligned (`end`), or it grows away from the port
+ * and collides with the node.
+ */
+function portLabelGeometry(input) {
+    var _a, _b, _c;
+    const { spec, x, y, hw, hh, side, width, height } = input;
+    const layout = (_a = spec.layout) !== null && _a !== void 0 ? _a : 'outside';
+    const offset = (_b = spec.offset) !== null && _b !== void 0 ? _b : engine_1.DEFAULT_PORT_LABEL_OFFSET;
+    const nudge = (_c = input.nudge) !== null && _c !== void 0 ? _c : 0;
+    const normal = outwardNormal(side);
+    let direction;
+    switch (layout) {
+        case 'inside':
+            direction = { x: -normal.x, y: -normal.y };
+            break;
+        case 'orthogonal': {
+            // Perpendicular to the outward normal: the label reads ALONG the edge.
+            // Pick the perpendicular that points into the node's long axis so the text
+            // runs down a side-port column rather than off the top of it.
+            direction = { x: -normal.y, y: normal.x };
+            break;
+        }
+        case 'radial': {
+            // Along the ray from the node's centre through the port. On a circle or an
+            // ellipse this is the ONLY layout that reads right — `outside` would push
+            // every label along its side's normal and stack the diagonal ones.
+            const dx = x - width / 2;
+            const dy = y - height / 2;
+            const length = Math.hypot(dx, dy);
+            direction = length < 1e-6 ? normal : { x: dx / length, y: dy / length };
+            break;
+        }
+        case 'outside':
+        default:
+            direction = normal;
+            break;
+    }
+    const distance = clearance(direction, hw, hh) + offset;
+    const px = x + direction.x * distance;
+    const py = y + direction.y * distance + nudge;
+    // Anchor the text so it GROWS AWAY from the port, never back over it.
+    let align = 'middle';
+    if (direction.x > 0.3)
+        align = 'start';
+    else if (direction.x < -0.3)
+        align = 'end';
+    let valign = 'middle';
+    if (Math.abs(direction.x) <= 0.3) {
+        valign = direction.y > 0 ? 'top' : 'bottom';
+    }
+    // `inside` on a side port must not run out of the node: flip the anchor so the
+    // text reads back toward the body.
+    const rotation = resolveRotation(spec, direction);
+    return { x: px, y: py, rotation, align, valign };
+}
+/**
+ * Total label rotation, with keep-upright auto-flip.
+ *
+ * `angle` rotates the label. `keepUpright` (default ON) then adds 180° to any
+ * label that would end up reading upside-down — the standard trick, and the
+ * reason a `radial` label on the LEFT half of a circle still reads
+ * left-to-right instead of mirror-written.
+ */
+function resolveRotation(spec, direction) {
+    var _a;
+    const explicit = (_a = spec.angle) !== null && _a !== void 0 ? _a : 0;
+    if (explicit === 0)
+        return 0;
+    let total = explicit;
+    if (spec.keepUpright !== false) {
+        // Normalise to (-180, 180] and flip the upside-down half.
+        total = ((total % 360) + 540) % 360 - 180;
+        if (total > 90 || total < -90) {
+            total += total > 0 ? -180 : 180;
+        }
+    }
+    return total;
+}
+/**
+ * Collision-aware nudging: when several port labels crowd, push them apart along
+ * the axis they stack on.
+ *
+ * Deliberately a ONE-AXIS resolver over labels that share a side. That is the
+ * shape the crowding actually has — a column of inputs down the left edge whose
+ * labels overlap vertically — and a general 2-D label-placement solver would be
+ * both slower and less predictable (labels would visibly hop sideways as you
+ * dragged a node). Returns a per-label nudge, so the caller can decide whether
+ * to apply it.
+ *
+ * `heights` are the labels' rendered heights, `centres` their unnudged centre
+ * coordinates on the stacking axis, both in the SAME order.
+ */
+function nudgePortLabels(centres, heights, gap = 2) {
+    var _a;
+    const count = centres.length;
+    const nudges = new Array(count).fill(0);
+    if (count < 2)
+        return nudges;
+    // Resolve in visual order, not declaration order.
+    const order = centres.map((c, i) => i).sort((a, b) => centres[a] - centres[b]);
+    let previousBottom = -Infinity;
+    for (const i of order) {
+        const half = ((_a = heights[i]) !== null && _a !== void 0 ? _a : 0) / 2;
+        const wanted = centres[i];
+        const top = wanted - half;
+        if (top < previousBottom + gap) {
+            // Overlaps the label above: push it down just enough to clear.
+            nudges[i] = previousBottom + gap - top;
+        }
+        previousBottom = wanted + nudges[i] + half;
+    }
+    // Re-centre the whole stack on its original centroid, so a crowded column
+    // spreads symmetrically instead of drifting downward off the node.
+    const mean = nudges.reduce((sum, n) => sum + n, 0) / count;
+    return nudges.map((n) => n - mean);
+}
+/** The label's rendered width, using the shared text engine's estimator. */
+function portLabelWidth(spec, fontSize) {
+    var _a;
+    return (0, text_block_1.estimateTextWidth)(spec.text, (_a = spec.fontSize) !== null && _a !== void 0 ? _a : fontSize);
+}
+/**
+ * Render the port's label as a `<text>` (or a `<g>` when it is rotated — a
+ * rotation needs a transform, and putting it on the text itself would fight the
+ * `x`/`y` the text-block engine emits for its tspans).
+ */
+function renderPortLabel(input) {
+    var _a, _b, _c, _d;
+    const { spec } = input;
+    const fontSize = (_a = spec.fontSize) !== null && _a !== void 0 ? _a : input.fontSize;
+    const geometry = portLabelGeometry(input);
+    const text = (0, text_block_1.renderTextBlock)({
+        text: spec.text,
+        x: geometry.x,
+        y: geometry.y,
+        align: geometry.align,
+        valign: geometry.valign,
+        fontSize,
+        fontFamily: (_b = spec.fontFamily) !== null && _b !== void 0 ? _b : input.fontFamily,
+        fontWeight: spec.fontWeight,
+        color: (_c = spec.color) !== null && _c !== void 0 ? _c : input.color,
+        maxWidth: spec.maxWidth,
+        className: (_d = spec.className) !== null && _d !== void 0 ? _d : input.className,
+        // A label must never eat the port's pointer events — the port under it is
+        // the whole point of the drag.
+        nonInteractive: true,
+    });
+    if (!geometry.rotation)
+        return text;
+    return {
+        type: 'g',
+        props: { transform: `rotate(${geometry.rotation} ${geometry.x} ${geometry.y})` },
+        children: [text],
+    };
+}
+//# sourceMappingURL=port-label.js.map

package/src/libs/renderer/src/svg/port-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"port-label.js","sourceRoot":"","sources":["../../../../../../renderer/src/svg/port-label.ts"],"names":[],"mappings":"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"}

package/src/libs/renderer/src/svg/port-layout.d.ts

@@ -0,0 +1,50 @@
+import type { NodeModel, PortModel, PortLayoutArgs, PortLayoutSpec } from '@grafloria/engine';
+export interface PortLayoutInput {
+    /** Node-local box the ports live in. */
+    width: number;
+    height: number;
+    /** The port's side (after group inheritance). */
+    side: 'left' | 'right' | 'top' | 'bottom';
+    /** This port's rank among the ports sharing its LAYOUT SCOPE, and the scope size. */
+    rank: number;
+    count: number;
+    /** The node's shape type — the `shape` strategy needs it. */
+    shapeType: string;
+    /** The node's rotation in degrees (for `compensateRotation`). */
+    rotation?: number;
+}
+export type PortLayoutStrategy = (input: PortLayoutInput, args: PortLayoutArgs) => {
+    x: number;
+    y: number;
+};
+/** Register a custom strategy. Hosts can add their own; the built-ins are just entries. */
+export declare function registerPortLayout(name: string, strategy: PortLayoutStrategy): void;
+export declare function getPortLayout(name: string | undefined): PortLayoutStrategy;
+export declare function hasPortLayout(name: string): boolean;
+/** For tests / tooling. */
+export declare function portLayoutNames(): string[];
+/**
+ * Rotate `point` about the node's centre by `-degrees`, so a port on a rotated
+ * node keeps its WORLD-space arrangement (a `compensateRotation` group on a node
+ * spun 90° still shows its inputs on the left of the screen).
+ *
+ * Node-local in, node-local out: the node's own transform then rotates it BACK,
+ * and the two cancel.
+ */
+export declare function compensateForRotation(point: {
+    x: number;
+    y: number;
+}, width: number, height: number, degrees: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Run a port's layout: pick the strategy, apply it, then the shared `dx`/`dy`
+ * nudge and optional rotation compensation.
+ */
+export declare function runPortLayout(spec: PortLayoutSpec | undefined, input: PortLayoutInput): {
+    x: number;
+    y: number;
+};
+/** Re-exported so `port-positioning` and the tests agree on the type. */
+export type { PortLayoutSpec, PortLayoutArgs, NodeModel, PortModel };

package/src/libs/renderer/src/svg/port-layout.js

@@ -0,0 +1,212 @@
+"use strict";
+// port-layout.ts — Wave 6 (Ports & connections), Card 4.
+//
+// The pluggable port-layout engine: NAMED strategies, attachable to a port group,
+// each with its own args. A strategy answers one question — "where, in node-local
+// coordinates, does the port whose rank is `rank` of `count` sit?" — and knows
+// nothing about glyphs, links or validation.
+//
+// The DEFAULT strategy is `shape`, which defers to the shape registry's
+// `portAnchor`. That is the pre-wave-6 behaviour and it is not going anywhere:
+// the registry is where the geometry-true anchors live (the cylinder's rim seam,
+// the actor's hands, the hexagon's flats), and a generic "spread along the
+// bounding box" would throw all of that away. Shape-awareness and pluggable
+// layout are not alternatives — `shape` is one of the plugins.
+//
+// PURE GEOMETRY: numbers in, numbers out. No VNodes, no models beyond the two
+// read-only inputs, no DOM.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerPortLayout = registerPortLayout;
+exports.getPortLayout = getPortLayout;
+exports.hasPortLayout = hasPortLayout;
+exports.portLayoutNames = portLayoutNames;
+exports.compensateForRotation = compensateForRotation;
+exports.runPortLayout = runPortLayout;
+const shape_registry_1 = require("./shape-registry");
+const DEG = Math.PI / 180;
+/** The two node-local endpoints of an edge, corner to corner. */
+function edgeSpan(side, width, height, padding) {
+    switch (side) {
+        case 'left':
+            return { from: { x: 0, y: padding }, to: { x: 0, y: height - padding } };
+        case 'right':
+            return { from: { x: width, y: padding }, to: { x: width, y: height - padding } };
+        case 'top':
+            return { from: { x: padding, y: 0 }, to: { x: width - padding, y: 0 } };
+        case 'bottom':
+            return { from: { x: padding, y: height }, to: { x: width - padding, y: height } };
+    }
+}
+/**
+ * Spread `count` items along a span. Matches the shape registry's own
+ * convention: `(rank + 1) / (count + 1)`, so ONE port sits at the midpoint —
+ * not at the start — and N ports are evenly inset from both corners.
+ */
+function spreadFraction(rank, count) {
+    return (rank + 1) / (count + 1);
+}
+// ===========================================================================
+// The strategies
+// ===========================================================================
+/**
+ * `shape` — defer to the shape registry's true silhouette anchor. THE DEFAULT.
+ */
+const shapeStrategy = (input) => {
+    return (0, shape_registry_1.getShape)(input.shapeType).portAnchor(input.width, input.height, input.side, input.rank, input.count);
+};
+/**
+ * `absolute` — one fixed point. Fractions of the node box by default (so the
+ * port tracks a resize), or raw px with `units: 'px'`.
+ */
+const absoluteStrategy = (input, args) => {
+    var _a, _b, _c, _d;
+    const px = args.units === 'px';
+    return {
+        x: px ? ((_a = args.x) !== null && _a !== void 0 ? _a : 0) : ((_b = args.x) !== null && _b !== void 0 ? _b : 0.5) * input.width,
+        y: px ? ((_c = args.y) !== null && _c !== void 0 ? _c : 0) : ((_d = args.y) !== null && _d !== void 0 ? _d : 0.5) * input.height,
+    };
+};
+/**
+ * `line` — march the group's ports along the segment `start`→`end` (node-local
+ * px). With `step`, they advance at a fixed pitch from `start` (a fixed-pitch
+ * pin header); without it, they divide the segment evenly.
+ */
+const lineStrategy = (input, args) => {
+    var _a, _b;
+    const start = (_a = args.start) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
+    const end = (_b = args.end) !== null && _b !== void 0 ? _b : { x: input.width, y: 0 };
+    if (typeof args.step === 'number' && args.step !== 0) {
+        const dx = end.x - start.x;
+        const dy = end.y - start.y;
+        const length = Math.hypot(dx, dy) || 1;
+        const distance = args.step * input.rank;
+        return { x: start.x + (dx / length) * distance, y: start.y + (dy / length) * distance };
+    }
+    const t = spreadFraction(input.rank, input.count);
+    return { x: start.x + (end.x - start.x) * t, y: start.y + (end.y - start.y) * t };
+};
+/**
+ * `sideLinear` — spread along the node's own EDGE (the bounding box's, not the
+ * silhouette's), inset by `padding`. The workhorse for rectangular node editors:
+ * a column of inputs down the left, a column of outputs down the right.
+ *
+ * With `step`, ports march at a fixed pitch from the edge's start corner instead
+ * of dividing it — the layout an n8n / Node-RED node uses so that adding a
+ * fifth input doesn't shuffle the other four.
+ */
+const sideLinearStrategy = (input, args) => {
+    var _a;
+    const padding = (_a = args.padding) !== null && _a !== void 0 ? _a : 0;
+    const { from, to } = edgeSpan(input.side, input.width, input.height, padding);
+    if (typeof args.step === 'number' && args.step !== 0) {
+        const dx = to.x - from.x;
+        const dy = to.y - from.y;
+        const length = Math.hypot(dx, dy) || 1;
+        const distance = args.step * input.rank;
+        return { x: from.x + (dx / length) * distance, y: from.y + (dy / length) * distance };
+    }
+    const t = spreadFraction(input.rank, input.count);
+    return { x: from.x + (to.x - from.x) * t, y: from.y + (to.y - from.y) * t };
+};
+/** Shared ellipse maths for the two ring strategies. */
+function onEllipse(input, args, degrees) {
+    var _a, _b;
+    const cx = input.width / 2;
+    const cy = input.height / 2;
+    const rx = (_a = args.radiusX) !== null && _a !== void 0 ? _a : input.width / 2;
+    const ry = (_b = args.radiusY) !== null && _b !== void 0 ? _b : input.height / 2;
+    const radians = degrees * DEG;
+    return { x: cx + rx * Math.cos(radians), y: cy + ry * Math.sin(radians) };
+}
+/**
+ * `ellipse` — every port at ONE angle on the node's inscribed ellipse. Combined
+ * with a per-port `angle` override this is the "hand-place each pin on the dial"
+ * layout.
+ */
+const ellipseStrategy = (input, args) => {
+    var _a;
+    return onEllipse(input, args, (_a = args.angle) !== null && _a !== void 0 ? _a : 0);
+};
+/**
+ * `ellipseSpread` — fan the group's ports around the ellipse: `count` of them
+ * spread across `sweep` degrees starting at `angle`.
+ *
+ * A FULL ring (sweep 360°) divides by `count` so the first and last ports don't
+ * land on the same point; a partial arc divides by `count - 1` so the ports sit
+ * ON both ends of the arc, which is what "from 30° to 150°" is asking for.
+ */
+const ellipseSpreadStrategy = (input, args) => {
+    var _a, _b;
+    const startAngle = (_a = args.angle) !== null && _a !== void 0 ? _a : 0;
+    const sweep = (_b = args.sweep) !== null && _b !== void 0 ? _b : 360;
+    const full = Math.abs(sweep) >= 360;
+    const divisor = full ? input.count : Math.max(1, input.count - 1);
+    const stepAngle = sweep / divisor;
+    return onEllipse(input, args, startAngle + stepAngle * input.rank);
+};
+// ===========================================================================
+// Registry
+// ===========================================================================
+const STRATEGIES = new Map([
+    ['shape', shapeStrategy],
+    ['absolute', absoluteStrategy],
+    ['line', lineStrategy],
+    ['sideLinear', sideLinearStrategy],
+    ['ellipse', ellipseStrategy],
+    ['ellipseSpread', ellipseSpreadStrategy],
+]);
+/** Register a custom strategy. Hosts can add their own; the built-ins are just entries. */
+function registerPortLayout(name, strategy) {
+    STRATEGIES.set(name, strategy);
+}
+function getPortLayout(name) {
+    return (name && STRATEGIES.get(name)) || shapeStrategy;
+}
+function hasPortLayout(name) {
+    return STRATEGIES.has(name);
+}
+/** For tests / tooling. */
+function portLayoutNames() {
+    return Array.from(STRATEGIES.keys());
+}
+/**
+ * Rotate `point` about the node's centre by `-degrees`, so a port on a rotated
+ * node keeps its WORLD-space arrangement (a `compensateRotation` group on a node
+ * spun 90° still shows its inputs on the left of the screen).
+ *
+ * Node-local in, node-local out: the node's own transform then rotates it BACK,
+ * and the two cancel.
+ */
+function compensateForRotation(point, width, height, degrees) {
+    if (!degrees)
+        return point;
+    const cx = width / 2;
+    const cy = height / 2;
+    const radians = -degrees * DEG;
+    const cos = Math.cos(radians);
+    const sin = Math.sin(radians);
+    const dx = point.x - cx;
+    const dy = point.y - cy;
+    return {
+        x: cx + dx * cos - dy * sin,
+        y: cy + dx * sin + dy * cos,
+    };
+}
+/**
+ * Run a port's layout: pick the strategy, apply it, then the shared `dx`/`dy`
+ * nudge and optional rotation compensation.
+ */
+function runPortLayout(spec, input) {
+    var _a, _b, _c;
+    const args = (_a = spec === null || spec === void 0 ? void 0 : spec.args) !== null && _a !== void 0 ? _a : {};
+    const strategy = getPortLayout(spec === null || spec === void 0 ? void 0 : spec.strategy);
+    let point = strategy(input, args);
+    if (args.dx || args.dy) {
+        point = { x: point.x + ((_b = args.dx) !== null && _b !== void 0 ? _b : 0), y: point.y + ((_c = args.dy) !== null && _c !== void 0 ? _c : 0) };
+    }
+    if (args.compensateRotation && input.rotation) {
+        point = compensateForRotation(point, input.width, input.height, input.rotation);
+    }
+    return point;
+}
+//# sourceMappingURL=port-layout.js.map