@dxos/diagram 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/diagram",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Renderer-neutral scene DSL, diagram dialects, and layout engines.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -47,9 +47,9 @@
     "@lezer/highlight": "^1.2.3",
     "@lezer/lr": "^1.4.10",
     "elkjs": "^0.12.0",
-    "@dxos/effect": "0.13.0",
-    "@dxos/invariant": "0.13.0",
-    "@dxos/util": "0.13.0"
+    "@dxos/effect": "0.14.0",
+    "@dxos/invariant": "0.14.0",
+    "@dxos/util": "0.14.0"
   },
   "devDependencies": {
     "@lezer/generator": "^1.8.0",

package/src/dsl/semantic.test.ts

@@ -4,6 +4,7 @@
 
 import { describe, test } from 'vitest';
 
+import * as Scene from '../scene.ts';
 import { parse, read } from './parse.ts';
 import { formatId } from './print.ts';
 
@@ -96,6 +97,21 @@ describe('semantic statements', () => {
     ]);
   });
 
+  test('edges: `tail=arrow` is one connector headed at both ends', ({ expect }) => {
+    const { diagram, problems } = read(`
+      node A  node B
+      edge A -> B "syncs" tail=arrow
+    `);
+    expect(problems).toEqual([]);
+    expect(diagram?.edges).toHaveLength(1);
+    expect(diagram?.edges[0]).toMatchObject({ label: 'syncs', tail: 'arrow' });
+    expect(Scene.markersOf({ tail: 'arrow' })).toEqual({
+      start: 'arrow',
+      end: 'arrow',
+      dashed: false,
+    });
+  });
+
   test('buses: a fan with `bus`, and named buses across statements', ({ expect }) => {
     const { diagram, problems } = read(`
       node H  node A  node B  node C

package/src/nudge.test.ts

@@ -152,4 +152,35 @@ describe('nudge', () => {
     const result = nudge([edge(200), edge(200)], { obstacles });
     expect(result.map((points) => points[0].x)).toEqual([64, 64]);
   });
+
+  test('separates a shared run even when that costs one crossing', ({ expect }) => {
+    // Both leave the left side of one box; the line from the upper port turns off first, so either order crosses once.
+    const box: Rect = { x: 100, y: 0, w: 100, h: 40 };
+    const near: Rect = { x: 300, y: 80, w: 100, h: 40 };
+    const far: Rect = { x: 300, y: 180, w: 100, h: 40 };
+    const result = nudge([
+      {
+        points: [
+          { x: 100, y: 10 },
+          { x: 50, y: 10 },
+          { x: 50, y: 100 },
+          { x: 300, y: 100 },
+        ],
+        source: box,
+        target: near,
+      },
+      {
+        points: [
+          { x: 100, y: 30 },
+          { x: 50, y: 30 },
+          { x: 50, y: 200 },
+          { x: 300, y: 200 },
+        ],
+        source: box,
+        target: far,
+      },
+    ]);
+    expect(overlapping(result[0], result[1])).toBe(false);
+    expect(result.every(orthogonal)).toBe(true);
+  });
 });

package/src/nudge.ts

@@ -330,9 +330,11 @@ const separate = (
     }
     const overlaps = pairCount(candidate, changed, shared, true);
     const crossings = pairCount(candidate, changed, crosses);
+    const overlapsBefore = pairCount(lines, changed, shared, true);
+    // A crossing still reads as two lines and a shared run does not, so each overlap resolved may cost one crossing.
     if (
-      overlaps >= pairCount(lines, changed, shared, true) ||
-      crossings > pairCount(lines, changed, crosses) ||
+      overlaps >= overlapsBefore ||
+      crossings - pairCount(lines, changed, crosses) > overlapsBefore - overlaps ||
       obstructed(candidate, changed) > obstructed(lines, changed)
     ) {
       continue;

package/src/scene.ts

@@ -144,7 +144,7 @@ export type Text = Schema.Schema.Type<typeof Text>;
 /** UML-style end markers: the head sits at the target, the tail at the source. */
 export const ArrowHead = Schema.Literals(['arrow', 'triangle', 'crowsfoot', 'none']);
 export type ArrowHead = Schema.Schema.Type<typeof ArrowHead>;
-export const ArrowTail = Schema.Literals(['none', 'circle']);
+export const ArrowTail = Schema.Literals(['none', 'circle', 'arrow']);
 export type ArrowTail = Schema.Schema.Type<typeof ArrowTail>;
 
 /**
@@ -213,7 +213,7 @@ export const Arrow = Schema.Struct({
     description: 'Marker at the target end (default arrow): triangle for inheritance, crowsfoot for has-many.',
   }),
   tail: Schema.optional(ArrowTail).annotate({
-    description: 'Marker at the source end (default none): circle for containment.',
+    description: 'Marker at the source end (default none): circle for containment, arrow for a two-way connector.',
   }),
   relation: Schema.optional(Relation).annotate({
     description:

package/src/semantic-engine.ts

@@ -29,8 +29,9 @@ const MAX_W = GRID * 6;
 const MIN_H = GRID * 3;
 const PAD_X = GRID;
 const PAD_Y = GRID / 2;
-/** Frame inset around a group's members; the top band also holds the title. */
+/** Frame inset around a group's members, the same on every side; the title sits in the top inset. */
 const FRAME_PAD = GRID;
+/** Room a frame's title takes above its members, when sizing the default pitch. */
 const FRAME_LABEL_H = GRID;
 /** Extra gutter where two frames face each other across a row gutter, so packages read as separate. */
 const FRAME_STACK_GAP = GRID * 2;
@@ -212,15 +213,17 @@ const geometry = (
     });
     return Math.max(stacked ? FRAME_STACK_GAP : 0, ...gaps);
   };
+  // An explicit grid is a lattice the boxes must stay on (a canvas lattice, say): extra space is whole cells.
+  const whole = (extra: number, step: number) => (diagram.grid && extra > 0 ? Math.ceil(extra / step) * step : extra);
   const colX = new Map<number, number>();
   for (let col = minCol, x = minCol * pitch.w; col <= maxCol; col++) {
     colX.set(col, x);
-    x += pitch.w + extraAfterCol(col);
+    x += pitch.w + whole(extraAfterCol(col), pitch.w);
   }
   const rowY = new Map<number, number>();
   for (let row = minRow, y = minRow * pitch.h; row <= maxRow; row++) {
     rowY.set(row, y);
-    y += pitch.h + extraAfterRow(row);
+    y += pitch.h + whole(extraAfterRow(row), pitch.h);
   }
   const at = (lookup: Map<number, number>, min: number, max: number, step: number, value: number) =>
     value < min
@@ -259,7 +262,7 @@ const geometry = (
       continue;
     }
     const x = Math.min(...members.map((rect) => rect.x)) - FRAME_PAD;
-    const y = Math.min(...members.map((rect) => rect.y)) - FRAME_PAD - FRAME_LABEL_H;
+    const y = Math.min(...members.map((rect) => rect.y)) - FRAME_PAD;
     const right = Math.max(...members.map((rect) => rect.x + rect.w)) + FRAME_PAD;
     const bottom = Math.max(...members.map((rect) => rect.y + rect.h)) + FRAME_PAD;
     frames.set(group.id, { x, y, w: right - x, h: bottom - y });
@@ -273,7 +276,7 @@ const geometry = (
       ? [
           {
             x: frame.x + FRAME_PAD / 2,
-            y: frame.y + (FRAME_LABEL_H - LABEL_FONT.lineH) / 2,
+            y: frame.y + (FRAME_PAD - LABEL_FONT.lineH) / 2,
             w: group.label.length * LABEL_FONT.charW,
             h: LABEL_FONT.lineH,
           },
@@ -424,7 +427,7 @@ const draw = (
                   kind: 'text',
                   id: 'label',
                   x: FRAME_PAD / 2,
-                  y: (FRAME_LABEL_H - LABEL_FONT.lineH) / 2,
+                  y: (FRAME_PAD - LABEL_FONT.lineH) / 2,
                   text: group.label,
                   weight: 's',
                   color: 'grey',

package/src/view.ts

@@ -162,7 +162,7 @@ const HEADS: Record<string, string> = {
   crowsfoot: "crow's foot head",
   none: 'no head',
 };
-const TAILS: Record<string, string> = { circle: 'dot at the start' };
+const TAILS: Record<string, string> = { circle: 'dot at the start', arrow: 'arrowhead at the start' };
 
 /** A path's markers in words, e.g. "dashed, hollow triangle head", or undefined for a plain arrow. */
 const describe = (style?: Path['style']) => {