@woosh/meep-engine 3.15.0 → 3.17.0

package/src/core/model/node-graph/visual/ConnectionVisualData.d.ts

@@ -0,0 +1,119 @@
+/**
+ * The path one connection is drawn along.
+ *
+ * A chain of cubic Hermite curves, joined end to end: each knot is a point and the tangent the curve
+ * passes through it with, and each pair of neighbouring knots is one curve. A wire that goes
+ * straight from one port to another is two knots and looks like what it always did; one that had to
+ * find its way around three nodes is a dozen, and the corners between its straight runs are the
+ * curves.
+ *
+ * **Hermite rather than Bézier** because the two ends of a curve are what everything here is stated
+ * in terms of — a wire leaves a port in a direction, meets a corner at a tangent, and shares both
+ * with whatever is on the other side of the knot. Bézier control points are the same information
+ * said less directly, and conversion is exact and one multiply away for the drawing code that wants
+ * them.
+ *
+ * Everything is held in one flat array rather than as objects per knot: a graph has hundreds of
+ * these, all of them are read on every repaint, and none of them is ever handled one knot at a time.
+ *
+ * @author Alex Goldring
+ * @copyright Company Named Limited (c) 2026
+ */
+export class ConnectionVisualData {
+    /**
+     * Id of the connection this is the path of.
+     * @type {number}
+     */
+    id: number;
+    /**
+     * `[x, y, tangent x, tangent y]` per knot.
+     * @type {Float64Array}
+     */
+    knots: Float64Array;
+    /**
+     * @type {number}
+     */
+    knot_count: number;
+    /**
+     * @returns {number}
+     */
+    get segment_count(): number;
+    /**
+     * Make room for a path of the given size, discarding whatever was here.
+     * @param {number} knot_count
+     * @returns {void}
+     */
+    allocate(knot_count: number): void;
+    /**
+     * @param {number} index
+     * @param {number} x
+     * @param {number} y
+     * @param {number} tangent_x
+     * @param {number} tangent_y
+     * @returns {void}
+     */
+    set_knot(index: number, x: number, y: number, tangent_x: number, tangent_y: number): void;
+    /**
+     * A point along the path.
+     *
+     * `t` runs from 0 at the source port to 1 at the target, split evenly between the segments
+     * rather than by their length — the segments are not the same length, so this walks the path
+     * unevenly. That is what a caller drawing or hit-testing wants anyway, since a corner is short
+     * and needs as many samples as a long straight run.
+     *
+     * @param {Vector2} result
+     * @param {number} t in [0, 1]
+     * @returns {void}
+     */
+    sample(result: Vector2, t: number): void;
+    /**
+     * @param {Vector2} result
+     * @param {number} segment
+     * @param {number} t in [0, 1]
+     * @returns {void}
+     */
+    sample_segment(result: Vector2, segment: number, t: number): void;
+    /**
+     * Control points of one segment, as a cubic Bézier.
+     * @param {number[]|Float64Array} result 8 numbers written: `[x0, y0, cx0, cy0, cx1, cy1, x1, y1]`
+     * @param {number} offset
+     * @param {number} segment
+     * @returns {void}
+     */
+    write_segment_bezier(result: number[] | Float64Array, offset: number, segment: number): void;
+    /**
+     * Exact bounds of the whole path.
+     *
+     * Exact rather than the bounds of the knots: a curve leaves the line between its ends, and a
+     * caller culling by these would drop a wire whose bulge is the only part on screen.
+     *
+     * @param {AABB2} result set, not expanded
+     * @returns {void}
+     */
+    computeBounds(result: AABB2): void;
+    /**
+     * Distance from a point to the path, by flattening it.
+     *
+     * Precision is ample for deciding what a click landed on, which is the only thing that asks.
+     *
+     * @param {number} x
+     * @param {number} y
+     * @returns {number}
+     */
+    distanceToPoint(x: number, y: number): number;
+    /**
+     * @param {ConnectionVisualData} other
+     * @returns {void}
+     */
+    copy(other: ConnectionVisualData): void;
+    /**
+     * @returns {ConnectionVisualData}
+     */
+    clone(): ConnectionVisualData;
+    toJSON(): {
+        id: number;
+        knots: any[];
+    };
+    fromJSON(json: any): void;
+}
+//# sourceMappingURL=ConnectionVisualData.d.ts.map

package/src/core/model/node-graph/visual/ConnectionVisualData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionVisualData.d.ts","sourceRoot":"","sources":["../../../../../../src/core/model/node-graph/visual/ConnectionVisualData.js"],"names":[],"mappings":"AAqBA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH;IAEI;;;OAGG;IACH,IAFU,MAAM,CAET;IAEP;;;OAGG;IACH,OAFU,YAAY,CAEM;IAE5B;;OAEG;IACH,YAFU,MAAM,CAED;IAEf;;OAEG;IACH,4BAEC;IAED;;;;OAIG;IACH,qBAHW,MAAM,GACJ,IAAI,CAQhB;IAED;;;;;;;OAOG;IACH,gBAPW,MAAM,KACN,MAAM,KACN,MAAM,aACN,MAAM,aACN,MAAM,GACJ,IAAI,CAShB;IAED;;;;;;;;;;;OAWG;IACH,2BAHW,MAAM,GACJ,IAAI,CA4BhB;IAED;;;;;OAKG;IACH,yCAJW,MAAM,KACN,MAAM,GACJ,IAAI,CAYhB;IAED;;;;;;OAMG;IACH,6BALW,MAAM,EAAE,GAAC,YAAY,UACrB,MAAM,WACN,MAAM,GACJ,IAAI,CAUhB;IAED;;;;;;;;OAQG;IACH,8BAFa,IAAI,CA8BhB;IAED;;;;;;;;OAQG;IACH,mBAJW,MAAM,KACN,MAAM,GACJ,MAAM,CA2ClB;IAED;;;OAGG;IACH,YAHW,oBAAoB,GAClB,IAAI,CAQhB;IAED;;OAEG;IACH,SAFa,oBAAoB,CAQhC;IAED;;;MAWC;IAED,0BAUC;CACJ"}

package/src/core/model/node-graph/visual/ConnectionVisualData.js

@@ -0,0 +1,317 @@
+import { line2_compute_segment_point_distance_sqr } from "../../../geom/2d/line/line2_compute_segment_point_distance_sqr.js";
+import { spline3_hermite } from "../../../math/spline/spline3_hermite.js";
+import { spline3_hermite_bounds } from "../../../math/spline/spline3_hermite_bounds.js";
+import { spline3_hermite_to_bezier } from "../../../math/spline/spline3_hermite_to_bezier.js";
+
+/**
+ * Numbers held per knot: position, then tangent.
+ * @type {number}
+ */
+const KNOT_STRIDE = 4;
+
+/**
+ * How finely a segment is chopped up when something needs a distance to it.
+ *
+ * A segment is at most a rounded corner or a straight run, neither of which needs many pieces to be
+ * measured to within a pixel, and this is asked once per wire per click.
+ *
+ * @type {number}
+ */
+const DISTANCE_SAMPLES = 8;
+
+/**
+ * The path one connection is drawn along.
+ *
+ * A chain of cubic Hermite curves, joined end to end: each knot is a point and the tangent the curve
+ * passes through it with, and each pair of neighbouring knots is one curve. A wire that goes
+ * straight from one port to another is two knots and looks like what it always did; one that had to
+ * find its way around three nodes is a dozen, and the corners between its straight runs are the
+ * curves.
+ *
+ * **Hermite rather than Bézier** because the two ends of a curve are what everything here is stated
+ * in terms of — a wire leaves a port in a direction, meets a corner at a tangent, and shares both
+ * with whatever is on the other side of the knot. Bézier control points are the same information
+ * said less directly, and conversion is exact and one multiply away for the drawing code that wants
+ * them.
+ *
+ * Everything is held in one flat array rather than as objects per knot: a graph has hundreds of
+ * these, all of them are read on every repaint, and none of them is ever handled one knot at a time.
+ *
+ * @author Alex Goldring
+ * @copyright Company Named Limited (c) 2026
+ */
+export class ConnectionVisualData {
+
+    /**
+     * Id of the connection this is the path of.
+     * @type {number}
+     */
+    id = 0;
+
+    /**
+     * `[x, y, tangent x, tangent y]` per knot.
+     * @type {Float64Array}
+     */
+    knots = new Float64Array(0);
+
+    /**
+     * @type {number}
+     */
+    knot_count = 0;
+
+    /**
+     * @returns {number}
+     */
+    get segment_count() {
+        return this.knot_count > 1 ? this.knot_count - 1 : 0;
+    }
+
+    /**
+     * Make room for a path of the given size, discarding whatever was here.
+     * @param {number} knot_count
+     * @returns {void}
+     */
+    allocate(knot_count) {
+        if (this.knots.length < knot_count * KNOT_STRIDE) {
+            this.knots = new Float64Array(knot_count * KNOT_STRIDE);
+        }
+
+        this.knot_count = knot_count;
+    }
+
+    /**
+     * @param {number} index
+     * @param {number} x
+     * @param {number} y
+     * @param {number} tangent_x
+     * @param {number} tangent_y
+     * @returns {void}
+     */
+    set_knot(index, x, y, tangent_x, tangent_y) {
+        const at = index * KNOT_STRIDE;
+
+        this.knots[at] = x;
+        this.knots[at + 1] = y;
+        this.knots[at + 2] = tangent_x;
+        this.knots[at + 3] = tangent_y;
+    }
+
+    /**
+     * A point along the path.
+     *
+     * `t` runs from 0 at the source port to 1 at the target, split evenly between the segments
+     * rather than by their length — the segments are not the same length, so this walks the path
+     * unevenly. That is what a caller drawing or hit-testing wants anyway, since a corner is short
+     * and needs as many samples as a long straight run.
+     *
+     * @param {Vector2} result
+     * @param {number} t in [0, 1]
+     * @returns {void}
+     */
+    sample(result, t) {
+        const segments = this.segment_count;
+
+        if (segments === 0) {
+            result.set(this.knots[0] ?? 0, this.knots[1] ?? 0);
+
+            return;
+        }
+
+        // Clamped before it is split, not after: clamping the curve alone and keeping the position
+        // along it would carry on past the end of the last curve rather than stopping at it.
+        let scaled = t * segments;
+
+        if (scaled < 0) {
+            scaled = 0;
+        } else if (scaled > segments) {
+            scaled = segments;
+        }
+
+        let segment = Math.floor(scaled);
+
+        if (segment >= segments) {
+            segment = segments - 1;
+        }
+
+        this.sample_segment(result, segment, scaled - segment);
+    }
+
+    /**
+     * @param {Vector2} result
+     * @param {number} segment
+     * @param {number} t in [0, 1]
+     * @returns {void}
+     */
+    sample_segment(result, segment, t) {
+        const knots = this.knots;
+
+        const a = segment * KNOT_STRIDE;
+        const b = a + KNOT_STRIDE;
+
+        result.set(
+            spline3_hermite(t, knots[a], knots[b], knots[a + 2], knots[b + 2]),
+            spline3_hermite(t, knots[a + 1], knots[b + 1], knots[a + 3], knots[b + 3])
+        );
+    }
+
+    /**
+     * Control points of one segment, as a cubic Bézier.
+     * @param {number[]|Float64Array} result 8 numbers written: `[x0, y0, cx0, cy0, cx1, cy1, x1, y1]`
+     * @param {number} offset
+     * @param {number} segment
+     * @returns {void}
+     */
+    write_segment_bezier(result, offset, segment) {
+        const knots = this.knots;
+
+        const a = segment * KNOT_STRIDE;
+        const b = a + KNOT_STRIDE;
+
+        spline3_hermite_to_bezier(result, offset, 2, knots[a], knots[b], knots[a + 2], knots[b + 2]);
+        spline3_hermite_to_bezier(result, offset + 1, 2, knots[a + 1], knots[b + 1], knots[a + 3], knots[b + 3]);
+    }
+
+    /**
+     * Exact bounds of the whole path.
+     *
+     * Exact rather than the bounds of the knots: a curve leaves the line between its ends, and a
+     * caller culling by these would drop a wire whose bulge is the only part on screen.
+     *
+     * @param {AABB2} result set, not expanded
+     * @returns {void}
+     */
+    computeBounds(result) {
+        if (this.knot_count === 0) {
+            result.set(0, 0, 0, 0);
+
+            return;
+        }
+
+        result.setNegativelyInfiniteBounds();
+
+        const knots = this.knots;
+
+        if (this.knot_count === 1) {
+            result._expandToFitPoint(knots[0], knots[1]);
+
+            return;
+        }
+
+        const span = _bounds_scratch;
+
+        for (let segment = 0, n = this.segment_count; segment < n; segment++) {
+            const a = segment * KNOT_STRIDE;
+            const b = a + KNOT_STRIDE;
+
+            spline3_hermite_bounds(span, 0, 2, knots[a], knots[b], knots[a + 2], knots[b + 2]);
+            spline3_hermite_bounds(span, 1, 2, knots[a + 1], knots[b + 1], knots[a + 3], knots[b + 3]);
+
+            result._expandToFit(span[0], span[1], span[2], span[3]);
+        }
+    }
+
+    /**
+     * Distance from a point to the path, by flattening it.
+     *
+     * Precision is ample for deciding what a click landed on, which is the only thing that asks.
+     *
+     * @param {number} x
+     * @param {number} y
+     * @returns {number}
+     */
+    distanceToPoint(x, y) {
+        const knots = this.knots;
+
+        if (this.knot_count === 0) {
+            return Infinity;
+        }
+
+        if (this.knot_count === 1) {
+            const dx = knots[0] - x;
+            const dy = knots[1] - y;
+
+            return Math.sqrt(dx * dx + dy * dy);
+        }
+
+        let best = Infinity;
+
+        for (let segment = 0, n = this.segment_count; segment < n; segment++) {
+            const a = segment * KNOT_STRIDE;
+            const b = a + KNOT_STRIDE;
+
+            let previous_x = knots[a];
+            let previous_y = knots[a + 1];
+
+            for (let i = 1; i <= DISTANCE_SAMPLES; i++) {
+                const t = i / DISTANCE_SAMPLES;
+
+                const cx = spline3_hermite(t, knots[a], knots[b], knots[a + 2], knots[b + 2]);
+                const cy = spline3_hermite(t, knots[a + 1], knots[b + 1], knots[a + 3], knots[b + 3]);
+
+                const distance = line2_compute_segment_point_distance_sqr(previous_x, previous_y, cx, cy, x, y);
+
+                if (distance < best) {
+                    best = distance;
+                }
+
+                previous_x = cx;
+                previous_y = cy;
+            }
+        }
+
+        return Math.sqrt(best);
+    }
+
+    /**
+     * @param {ConnectionVisualData} other
+     * @returns {void}
+     */
+    copy(other) {
+        this.id = other.id;
+
+        this.allocate(other.knot_count);
+
+        this.knots.set(other.knots.subarray(0, other.knot_count * KNOT_STRIDE));
+    }
+
+    /**
+     * @returns {ConnectionVisualData}
+     */
+    clone() {
+        const r = new ConnectionVisualData();
+
+        r.copy(this);
+
+        return r;
+    }
+
+    toJSON() {
+        const knots = new Array(this.knot_count * KNOT_STRIDE);
+
+        for (let i = 0; i < knots.length; i++) {
+            knots[i] = this.knots[i];
+        }
+
+        return {
+            id: this.id,
+            knots
+        };
+    }
+
+    fromJSON(json) {
+        this.id = json.id;
+
+        const knots = json.knots ?? [];
+
+        this.allocate((knots.length / KNOT_STRIDE) | 0);
+
+        for (let i = 0; i < this.knot_count * KNOT_STRIDE; i++) {
+            this.knots[i] = knots[i];
+        }
+    }
+}
+
+/**
+ * @type {Float64Array}
+ */
+const _bounds_scratch = new Float64Array(4);

package/src/core/model/node-graph/visual/NodeDescriptionVisualRegistry.d.ts

@@ -5,6 +5,10 @@ export class NodeDescriptionVisualRegistry {
      */
     data: Map<number, NodeVisualData>;
     /**
+     * Estimate the box a node of this description will occupy, and where its ports will sit in it.
+     *
+     * See the note at the top of this file: what comes back is a stand-in for a node that has not
+     * been drawn yet, and is expected to be replaced by a measurement of one that has.
      *
      * @param {NodeDescription} node
      * @returns {NodeVisualData}

package/src/core/model/node-graph/visual/NodeDescriptionVisualRegistry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeDescriptionVisualRegistry.d.ts","sourceRoot":"","sources":["../../../../../../src/core/model/node-graph/visual/NodeDescriptionVisualRegistry.js"],"names":[],"mappings":"AAOA;IAEI;;;OAGG;IACH,MAFU,IAAI,MAAM,EAAC,cAAc,CAAC,CAEnB;IAGjB;;;;OAIG;IACH,iCAFa,cAAc,CAsF1B;IAED;;;;OAIG;IACH,QAHW,MAAM,UACN,cAAc,QAMxB;IAED;;;;OAIG;IACH,QAHW,MAAM,GACJ,cAAc,GAAC,SAAS,CAIpC;CACJ;+BA1H8B,qBAAqB"}
+{"version":3,"file":"NodeDescriptionVisualRegistry.d.ts","sourceRoot":"","sources":["../../../../../../src/core/model/node-graph/visual/NodeDescriptionVisualRegistry.js"],"names":[],"mappings":"AAgFA;IAEI;;;OAGG;IACH,MAFU,IAAI,MAAM,EAAC,cAAc,CAAC,CAEnB;IAGjB;;;;;;;;OAQG;IACH,iCAFa,cAAc,CAgH1B;IAED;;;;OAIG;IACH,QAHW,MAAM,UACN,cAAc,QAMxB;IAED;;;;OAIG;IACH,QAHW,MAAM,GACJ,cAAc,GAAC,SAAS,CAIpC;CACJ;+BAlO8B,qBAAqB"}

package/src/core/model/node-graph/visual/NodeDescriptionVisualRegistry.js

@@ -1,10 +1,83 @@
 import { assert } from "../../../assert.js";
 import { max2 } from "../../../math/max2.js";
-import { max3 } from "../../../math/max3.js";
 import { PortDirection } from "../node/PortDirection.js";
 import { NodeVisualData } from "./NodeVisualData.js";
 import { PortVisualData } from "./PortVisualData.js";
 
+/*
+ What a node of a given description is expected to measure, before anyone has drawn one.
+
+ An estimate, and only an estimate. The real answer belongs to whatever draws the node — the editor's
+ `NodeView` measures the browser's layout and writes the result back over what is generated here —
+ and it has to, because a node's size depends on things a description does not carry: the length of
+ the text in a picker, the width of a control the host supplied for a parameter the generic
+ mechanism cannot describe, the metrics of the font in use.
+
+ What this is for is everything that happens before that: arranging a graph that is about to be
+ opened, laying out one that is never drawn at all (a thumbnail, a test, an export), and giving a
+ node a box for the instant between it being added and it being measured.
+
+ The numbers below track `editor/view/node-graph/node-graph.css` roughly, and are deliberately not
+ exact. Chasing the stylesheet from here would be chasing something that is already measured
+ properly a moment later; being in the right neighbourhood is the whole job.
+*/
+
+/** Height of a node's header, its name. @type {number} */
+const HEADER_HEIGHT = 24;
+
+/** Space around the block of ports. @type {number} */
+const PORTS_PADDING_X = 5;
+const PORTS_PADDING_Y = 5;
+
+/** Vertical pitch of one port row, and the height of one. @type {number} */
+const PORT_ROW_HEIGHT = 16;
+
+/** Distance from a node's edge to the centre of a port marker on that side. @type {number} */
+const PORT_MARKER_INSET = 10;
+
+/** Marker, plus the gap to the label beside it. @type {number} */
+const PORT_LABEL_OFFSET = 16;
+
+/** Gap held between the input column and the output column. @type {number} */
+const PORT_COLUMN_GAP = 14;
+
+/** Space around the block of parameter rows. @type {number} */
+const PARAMETERS_PADDING_X = 10;
+const PARAMETERS_PADDING_Y = 6;
+
+/** Vertical pitch of one parameter row. @type {number} */
+const PARAMETER_ROW_HEIGHT = 22;
+
+/**
+ * Width a parameter row is assumed to want: a label and a control of unknown size.
+ * @type {number}
+ */
+const PARAMETER_ROW_WIDTH = 200;
+
+/** Rough advance of a character of a port or parameter label. @type {number} */
+const LABEL_CHARACTER_WIDTH = 6;
+
+/** Rough advance of a character of the node's name, which is set larger and bolder. @type {number} */
+const NAME_CHARACTER_WIDTH = 7.5;
+
+/** Space either side of the node's name. @type {number} */
+const NAME_PADDING_X = 10;
+
+/**
+ * Width of the widest of a set of ports drawn as a column: a marker and a label.
+ * @param {Port[]} ports
+ * @returns {number}
+ */
+function port_column_width(ports) {
+    let width = 0;
+
+    for (const port of ports) {
+        width = max2(width, PORT_LABEL_OFFSET + port.name.length * LABEL_CHARACTER_WIDTH);
+    }
+
+    return width;
+}
+
 export class NodeDescriptionVisualRegistry {
 
     /**
@@ -15,6 +88,10 @@ export class NodeDescriptionVisualRegistry {
 
 
     /**
+     * Estimate the box a node of this description will occupy, and where its ports will sit in it.
+     *
+     * See the note at the top of this file: what comes back is a stand-in for a node that has not
+     * been drawn yet, and is expected to be replaced by a measurement of one that has.
      *
      * @param {NodeDescription} node
      * @returns {NodeVisualData}
@@ -36,64 +113,90 @@ export class NodeDescriptionVisualRegistry {
             }
         });
 
+        const parameter_count = node.parameters.length;
+
         //determine dimensions
-        let width = 10;
 
-        if (node.parameters.length > 0) {
-            width += 245;
+        // inputs down the left and outputs down the right, side by side
+        const input_width = port_column_width(inputs);
+        const output_width = port_column_width(outputs);
+
+        let ports_width = input_width + output_width + PORTS_PADDING_X * 2;
+
+        if (inputs.length > 0 && outputs.length > 0) {
+            ports_width += PORT_COLUMN_GAP;
         }
 
-        if (inputs.length > 0) {
-            width += 65;
+        // anything that is neither wraps onto a row underneath
+        let other_width = PORTS_PADDING_X * 2;
+
+        for (const port of other) {
+            other_width += PORT_LABEL_OFFSET + port.name.length * LABEL_CHARACTER_WIDTH + PORT_COLUMN_GAP;
         }
 
-        if (outputs.length > 0) {
-            width += 65;
+        let width = max2(ports_width, other_width);
+
+        width = max2(width, node.name.length * NAME_CHARACTER_WIDTH + NAME_PADDING_X * 2);
+
+        if (parameter_count > 0) {
+            width = max2(width, PARAMETER_ROW_WIDTH + PARAMETERS_PADDING_X * 2);
         }
 
-        // fit name
-        width = max2(width, node.name.length * 8);
+        // the two columns are drawn beside each other, so the taller one sets the height
+        const side_rows = max2(inputs.length, outputs.length);
 
-        const headerOffset = 20;
+        let height = HEADER_HEIGHT;
 
-        const PORT_HEIGHT = 20;
+        if (side_rows > 0 || other.length > 0) {
+            height += PORTS_PADDING_Y * 2 + side_rows * PORT_ROW_HEIGHT;
 
-        const height = headerOffset + max3(inputs.length, outputs.length, node.parameters.length) * PORT_HEIGHT;
+            if (other.length > 0) {
+                height += PORT_ROW_HEIGHT;
+            }
+        }
+
+        if (parameter_count > 0) {
+            height += PARAMETERS_PADDING_Y * 2 + parameter_count * PARAMETER_ROW_HEIGHT;
+        }
 
         const visual = new NodeVisualData();
 
+        const ports_top = HEADER_HEIGHT + PORTS_PADDING_Y;
 
         let i, l;
 
         for (i = 0, l = inputs.length; i < l; i++) {
-            const offset = headerOffset + PORT_HEIGHT * i + PORT_HEIGHT / 2;
-
             const portVisualData = new PortVisualData();
             portVisualData.id = inputs[i].id;
 
-            portVisualData.position.set(8, offset);
+            portVisualData.position.set(
+                PORT_MARKER_INSET,
+                ports_top + PORT_ROW_HEIGHT * i + PORT_ROW_HEIGHT / 2
+            );
 
             visual.ports.add(portVisualData);
         }
 
         for (i = 0, l = outputs.length; i < l; i++) {
-            const offset = headerOffset + PORT_HEIGHT * i + PORT_HEIGHT / 2;
-
             const portVisualData = new PortVisualData();
             portVisualData.id = outputs[i].id;
 
-            portVisualData.position.set(width - 8, offset);
+            portVisualData.position.set(
+                width - PORT_MARKER_INSET,
+                ports_top + PORT_ROW_HEIGHT * i + PORT_ROW_HEIGHT / 2
+            );
 
             visual.ports.add(portVisualData);
         }
 
-        for (i = 0, l = other.length; i < l; i++) {
-            const offset = (width) * (i + 1) / (l + 1);
+        const other_row_center = ports_top + side_rows * PORT_ROW_HEIGHT + PORT_ROW_HEIGHT / 2;
 
+        for (i = 0, l = other.length; i < l; i++) {
             const portVisualData = new PortVisualData();
             portVisualData.id = other[i].id;
 
-            portVisualData.position.set(offset, height);
+            // spread across the row they share
+            portVisualData.position.set(width * (i + 1) / (l + 1), other_row_center);
 
             visual.ports.add(portVisualData);
         }