orcasvn-react-diagrams 0.2.0 → 0.2.2

package/src/displaybox/demos/portConstraintsDemo.ts

@@ -0,0 +1,175 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const createPortConstraintState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'anchor-rect-host',
+      position: { x: 80, y: 120 },
+      size: { width: 220, height: 150 },
+      shapeId: 'anchor-rect',
+      portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'vertices' } },
+    },
+    {
+      id: 'anchor-triangle-host',
+      position: { x: 380, y: 100 },
+      size: { width: 220, height: 170 },
+      shapeId: 'anchor-triangle',
+      portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'vertices' } },
+    },
+    {
+      id: 'anchor-ellipse-host',
+      position: { x: 700, y: 120 },
+      size: { width: 220, height: 150 },
+      shapeId: 'anchor-ellipse',
+      portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+    },
+    {
+      id: 'anchor-peer-rect',
+      position: { x: 120, y: 390 },
+      size: { width: 180, height: 100 },
+      shapeId: 'panel',
+    },
+    {
+      id: 'anchor-peer-triangle',
+      position: { x: 420, y: 390 },
+      size: { width: 180, height: 100 },
+      shapeId: 'panel',
+    },
+    {
+      id: 'anchor-peer-ellipse',
+      position: { x: 740, y: 390 },
+      size: { width: 180, height: 100 },
+      shapeId: 'panel',
+    },
+  ],
+  ports: [
+    {
+      id: 'anchor-rect-port',
+      elementId: 'anchor-rect-host',
+      position: { x: 220, y: 0 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+      currentAnchorId: 'top-right',
+    },
+    {
+      id: 'anchor-triangle-port',
+      elementId: 'anchor-triangle-host',
+      position: { x: 205.2628, y: 127.5 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+      currentAnchorId: 'v1',
+    },
+    {
+      id: 'anchor-ellipse-port',
+      elementId: 'anchor-ellipse-host',
+      position: { x: 220, y: 75 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+      currentAnchorId: 'right',
+    },
+    {
+      id: 'anchor-peer-rect-port',
+      elementId: 'anchor-peer-rect',
+      position: { x: 0, y: 50 },
+      shapeId: 'port-dark',
+      moveMode: 'border',
+      anchorCenter: true,
+    },
+    {
+      id: 'anchor-peer-triangle-port',
+      elementId: 'anchor-peer-triangle',
+      position: { x: 0, y: 50 },
+      shapeId: 'port-dark',
+      moveMode: 'border',
+      anchorCenter: true,
+    },
+    {
+      id: 'anchor-peer-ellipse-port',
+      elementId: 'anchor-peer-ellipse',
+      position: { x: 0, y: 50 },
+      shapeId: 'port-dark',
+      moveMode: 'border',
+      anchorCenter: true,
+    },
+  ],
+  links: [
+    { id: 'anchor-link-rect', sourcePortId: 'anchor-rect-port', targetPortId: 'anchor-peer-rect-port', points: [] },
+    { id: 'anchor-link-triangle', sourcePortId: 'anchor-triangle-port', targetPortId: 'anchor-peer-triangle-port', points: [] },
+    { id: 'anchor-link-ellipse', sourcePortId: 'anchor-ellipse-port', targetPortId: 'anchor-peer-ellipse-port', points: [] },
+  ],
+  texts: [
+    {
+      id: 'anchor-instructions',
+      content: 'Specific points only: drag highlighted ports. Rect + triangle snap to vertices; ellipse snaps to top/right/bottom/left.',
+      position: { x: 80, y: 44 },
+    },
+    { id: 'anchor-rect-label', content: 'Rectangle: corners only', position: { x: 8, y: -20 }, ownerId: 'anchor-rect-host' },
+    { id: 'anchor-triangle-label', content: 'Triangle: peaks only', position: { x: 8, y: -20 }, ownerId: 'anchor-triangle-host' },
+    { id: 'anchor-ellipse-label', content: 'Ellipse: cardinal anchors', position: { x: 8, y: -20 }, ownerId: 'anchor-ellipse-host' },
+    { id: 'anchor-port-rect-label', content: 'Snap me', position: { x: 8, y: -18 }, ownerId: 'anchor-rect-port' },
+    { id: 'anchor-port-triangle-label', content: 'Snap me', position: { x: 8, y: -18 }, ownerId: 'anchor-triangle-port' },
+    { id: 'anchor-port-ellipse-label', content: 'Snap me', position: { x: 8, y: -18 }, ownerId: 'anchor-ellipse-port' },
+  ],
+});
+
+export const portConstraintsDemoConfig: DemoConfig = ({
+  id: 'port-constraints',
+  title: 'Port Discrete Anchors',
+  description: 'Element-level anchor policy: rectangle/polygon vertices and ellipse cardinal points only.',
+  createState: createPortConstraintState,
+  elementShapes: [
+    ...baseElementShapes,
+    {
+      id: 'anchor-rect',
+      kind: 'rect',
+      style: {
+        cornerRadius: 10,
+        fill: '#e6f2ff',
+        stroke: '#1f4d99',
+        strokeWidth: 2,
+      },
+    },
+    {
+      id: 'anchor-triangle',
+      kind: 'triangle',
+      style: {
+        fill: '#f4f1ff',
+        stroke: '#5b3cc4',
+        strokeWidth: 2,
+      },
+    },
+    {
+      id: 'anchor-ellipse',
+      kind: 'ellipse',
+      style: {
+        fill: '#e8f8ff',
+        stroke: '#1e6b8f',
+        strokeWidth: 2,
+      },
+    },
+  ],
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [
+    {
+      id: 'resize-anchor-hosts',
+      label: 'Resize hosts (anchor persistence)',
+      run: (editor, state) => {
+        const rectHost = state.elements.find((element) => element.id === 'anchor-rect-host');
+        const expanded = (rectHost?.size.width ?? 0) > 220;
+        if (expanded) {
+          editor.resizeElement('anchor-rect-host', 220, 150);
+          editor.resizeElement('anchor-triangle-host', 220, 170);
+          editor.resizeElement('anchor-ellipse-host', 220, 150);
+          return;
+        }
+        editor.resizeElement('anchor-rect-host', 280, 190);
+        editor.resizeElement('anchor-triangle-host', 280, 210);
+        editor.resizeElement('anchor-ellipse-host', 280, 190);
+      },
+    },
+  ],
+});

package/src/displaybox/demos/rotatedCreationDemo.ts

@@ -0,0 +1,185 @@
+import type { DiagramState, SimpleShape } from '../../api';
+import { createId } from '../../utils/ids';
+import type { DemoConfig } from '../types';
+import { basePortShapes } from './shared';
+
+const baseRectRotation = 18;
+const baseEllipseRotation = 14;
+const baseDiamondRotation = -20;
+
+const rotatedCreationShapes: SimpleShape[] = [
+  {
+    id: 'rot-rect-base',
+    kind: 'rect',
+    style: {
+      cornerRadius: 12,
+      fill: '#e9f5ff',
+      stroke: '#1e5f97',
+      strokeWidth: 2,
+      rotation: baseRectRotation,
+    },
+  },
+  {
+    id: 'rot-ellipse-base',
+    kind: 'ellipse',
+    style: {
+      fill: '#eefbe9',
+      stroke: '#2f7a3d',
+      strokeWidth: 2,
+      rotation: baseEllipseRotation,
+    },
+  },
+  {
+    id: 'rot-diamond-base',
+    kind: 'diamond',
+    style: {
+      fill: '#fff3e3',
+      stroke: '#a35e14',
+      strokeWidth: 2,
+      rotation: baseDiamondRotation,
+    },
+  },
+];
+
+const createRotatedCreationState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'rot-seed-rect',
+      position: { x: 180, y: 120 },
+      size: { width: 180, height: 110 },
+      shapeId: 'rot-rect-base',
+      style: { rotation: 20 },
+    },
+    {
+      id: 'rot-seed-ellipse',
+      position: { x: 360, y: 120 },
+      size: { width: 190, height: 110 },
+      shapeId: 'rot-ellipse-base',
+      style: { rotation: -16 },
+    },
+    {
+      id: 'rot-seed-diamond',
+      position: { x: 620, y: 120 },
+      size: { width: 170, height: 120 },
+      shapeId: 'rot-diamond-base',
+      style: { rotation: -12 },
+    },
+  ],
+  ports: [],
+  links: [],
+  texts: [
+    {
+      id: 'rot-seed-rect-label',
+      content: 'Seed rect: base 18 + instance 20',
+      ownerId: 'rot-seed-rect',
+      position: { x: 10, y: -14 },
+    },
+    {
+      id: 'rot-seed-ellipse-label',
+      content: 'Seed ellipse: base 14 + instance -16',
+      ownerId: 'rot-seed-ellipse',
+      position: { x: 10, y: -14 },
+    },
+    {
+      id: 'rot-seed-diamond-label',
+      content: 'Seed diamond: base -20 + instance -12',
+      ownerId: 'rot-seed-diamond',
+      position: { x: 10, y: -14 },
+    },
+    {
+      id: 'rot-demo-tip',
+      content: 'Verify alignment: select each rotated seed shape, drag-resize it, then reselect to confirm handle persistence.',
+      position: { x: 120, y: 70 },
+    },
+  ],
+});
+
+export const rotatedCreationDemoConfig: DemoConfig = {
+  id: 'rotated-shape-creation',
+  title: 'Rotated Shape Creation',
+  description: 'Validate class-based rotated rectangle/ellipse/polygon shapes and selection-resize alignment persistence.',
+  createState: createRotatedCreationState,
+  elementShapes: rotatedCreationShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'rot-rect-base',
+  defaultPortShapeId: 'port-circle',
+  actions: [
+    {
+      id: 'add-rotated-rect',
+      label: 'Create rotated rect',
+      run: (editor, _state, _demo, helpers) => {
+        const offset = helpers.nextOffset();
+        const id = `rot-rect-${createId()}`;
+        editor.addElement({
+          id,
+          position: { x: 160 + offset, y: 280 + offset },
+          size: { width: 180, height: 110 },
+          shapeId: 'rot-rect-base',
+          style: { rotation: 24 },
+        });
+        editor.addText({
+          id: `rot-label-${createId()}`,
+          content: 'base 18 + instance 24',
+          ownerId: id,
+          position: { x: 10, y: -14 },
+        });
+        editor.setSelection([id]);
+      },
+    },
+    {
+      id: 'add-rotated-diamond',
+      label: 'Create rotated diamond',
+      run: (editor, _state, _demo, helpers) => {
+        const offset = helpers.nextOffset();
+        const id = `rot-diamond-${createId()}`;
+        editor.addElement({
+          id,
+          position: { x: 460 + offset, y: 300 + offset },
+          size: { width: 170, height: 120 },
+          shapeId: 'rot-diamond-base',
+          style: { rotation: -18 },
+        });
+        editor.addText({
+          id: `rot-label-${createId()}`,
+          content: 'base -20 + instance -18',
+          ownerId: id,
+          position: { x: 10, y: -14 },
+        });
+        editor.setSelection([id]);
+      },
+    },
+    {
+      id: 'focus-rotated-rect',
+      label: 'Focus rotated rect',
+      run: (editor) => {
+        editor.setSelection(['rot-seed-rect']);
+      },
+    },
+    {
+      id: 'focus-rotated-ellipse',
+      label: 'Focus rotated ellipse',
+      run: (editor) => {
+        editor.setSelection(['rot-seed-ellipse']);
+      },
+    },
+    {
+      id: 'focus-rotated-diamond',
+      label: 'Focus rotated diamond',
+      run: (editor) => {
+        editor.setSelection(['rot-seed-diamond']);
+      },
+    },
+    {
+      id: 'verify-rotated-resize-persistence',
+      label: 'Verify rotated resize persistence',
+      run: (editor) => {
+        editor.setSelection(['rot-seed-rect']);
+        editor.resizeElement('rot-seed-rect', 210, 130);
+        editor.setSelection(['rot-seed-ellipse']);
+        editor.resizeElement('rot-seed-ellipse', 220, 130);
+        editor.setSelection(['rot-seed-diamond']);
+        editor.resizeElement('rot-seed-diamond', 190, 140);
+      },
+    },
+  ],
+};

package/src/displaybox/demos/roundedRectRadiusDemo.ts

@@ -0,0 +1,93 @@
+import type { DiagramState, SimpleShape } from '../../api';
+import type { DemoConfig } from '../types';
+import { basePortShapes } from './shared';
+
+const roundedRectShapes: SimpleShape[] = [
+  {
+    id: 'rounded-rect-r0',
+    kind: 'rect',
+    style: { cornerRadius: 0, fill: '#eef5ff', stroke: '#2c5aa0', strokeWidth: 2 },
+  },
+  {
+    id: 'rounded-rect-r10',
+    kind: 'rect',
+    style: { cornerRadius: 10, fill: '#edf9f1', stroke: '#2b7a45', strokeWidth: 2 },
+  },
+  {
+    id: 'rounded-rect-r24',
+    kind: 'rect',
+    style: { cornerRadius: 24, fill: '#fff5e8', stroke: '#9c5b17', strokeWidth: 2 },
+  },
+  {
+    id: 'rounded-rect-r42',
+    kind: 'rect',
+    style: { cornerRadius: 42, fill: '#fff0f2', stroke: '#a03e50', strokeWidth: 2 },
+  },
+];
+
+const baseSizes: Record<string, { width: number; height: number }> = {
+  'rounded-rect-0': { width: 180, height: 100 },
+  'rounded-rect-10': { width: 180, height: 100 },
+  'rounded-rect-24': { width: 180, height: 100 },
+  'rounded-rect-42': { width: 180, height: 100 },
+};
+
+const wideSizes: Record<string, { width: number; height: number }> = {
+  'rounded-rect-0': { width: 240, height: 120 },
+  'rounded-rect-10': { width: 240, height: 120 },
+  'rounded-rect-24': { width: 240, height: 120 },
+  'rounded-rect-42': { width: 240, height: 120 },
+};
+
+const createRoundedRectRadiusState = (): DiagramState => ({
+  elements: [
+    { id: 'rounded-rect-0', position: { x: 80, y: 140 }, size: { width: 180, height: 100 }, shapeId: 'rounded-rect-r0' },
+    { id: 'rounded-rect-10', position: { x: 320, y: 140 }, size: { width: 180, height: 100 }, shapeId: 'rounded-rect-r10' },
+    { id: 'rounded-rect-24', position: { x: 560, y: 140 }, size: { width: 180, height: 100 }, shapeId: 'rounded-rect-r24' },
+    { id: 'rounded-rect-42', position: { x: 800, y: 140 }, size: { width: 180, height: 100 }, shapeId: 'rounded-rect-r42' },
+  ],
+  ports: [
+    { id: 'rounded-port-0', elementId: 'rounded-rect-0', position: { x: 180, y: 50 }, moveMode: 'border', anchorCenter: true },
+    { id: 'rounded-port-10', elementId: 'rounded-rect-10', position: { x: 180, y: 50 }, moveMode: 'border', anchorCenter: true },
+    { id: 'rounded-port-24', elementId: 'rounded-rect-24', position: { x: 180, y: 50 }, moveMode: 'border', anchorCenter: true },
+    { id: 'rounded-port-42', elementId: 'rounded-rect-42', position: { x: 180, y: 50 }, moveMode: 'border', anchorCenter: true },
+  ],
+  links: [
+    { id: 'rounded-link-1', sourcePortId: 'rounded-port-0', targetPortId: 'rounded-port-10', points: [] },
+    { id: 'rounded-link-2', sourcePortId: 'rounded-port-10', targetPortId: 'rounded-port-24', points: [] },
+    { id: 'rounded-link-3', sourcePortId: 'rounded-port-24', targetPortId: 'rounded-port-42', points: [] },
+  ],
+  texts: [
+    { id: 'rounded-label-0', content: 'radius 0', position: { x: 10, y: -14 }, ownerId: 'rounded-rect-0' },
+    { id: 'rounded-label-10', content: 'radius 10', position: { x: 10, y: -14 }, ownerId: 'rounded-rect-10' },
+    { id: 'rounded-label-24', content: 'radius 24', position: { x: 10, y: -14 }, ownerId: 'rounded-rect-24' },
+    { id: 'rounded-label-42', content: 'radius 42', position: { x: 10, y: -14 }, ownerId: 'rounded-rect-42' },
+  ],
+});
+
+export const roundedRectRadiusDemoConfig: DemoConfig = {
+  id: 'rounded-rect-radius',
+  title: 'Rounded Rect Radius',
+  description: 'Compare rectangle corner radii and verify border ports stay attached while resizing variants.',
+  createState: createRoundedRectRadiusState,
+  elementShapes: roundedRectShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'rounded-rect-r10',
+  defaultPortShapeId: 'port-circle',
+  actions: [
+    {
+      id: 'expand-rounded-rects',
+      label: 'Expand all',
+      run: (editor) => {
+        Object.entries(wideSizes).forEach(([elementId, size]) => editor.resizeElement(elementId, size.width, size.height));
+      },
+    },
+    {
+      id: 'reset-rounded-rects',
+      label: 'Reset sizes',
+      run: (editor) => {
+        Object.entries(baseSizes).forEach(([elementId, size]) => editor.resizeElement(elementId, size.width, size.height));
+      },
+    },
+  ],
+};

package/src/displaybox/demos/routingDemo.ts

@@ -0,0 +1,57 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes, orthogonalRouter } from './shared';
+
+const createRoutingDemoState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'route-source',
+      position: { x: 120, y: 160 },
+      size: { width: 200, height: 120 },
+      shapeId: 'default',
+    },
+    {
+      id: 'route-target',
+      position: { x: 560, y: 220 },
+      size: { width: 200, height: 120 },
+      shapeId: 'panel',
+    },
+    {
+      id: 'route-obstacle',
+      position: { x: 360, y: 320 },
+      size: { width: 180, height: 100 },
+      shapeId: 'default',
+    },
+  ],
+  ports: [
+    { id: 'route-source-port', elementId: 'route-source', position: { x: 40, y: 50 }, shapeId: 'port-circle', anchorCenter: true },
+    { id: 'route-target-port', elementId: 'route-target', position: { x: 50, y: 40 }, shapeId: 'port-circle', anchorCenter: true },
+  ],
+  links: [
+    {
+      id: 'route-link',
+      sourcePortId: 'route-source-port',
+      targetPortId: 'route-target-port',
+      points: [],
+      routing: 'auto',
+    },
+  ],
+  texts: [
+    { id: 'route-source-label', content: 'Source', position: { x: 12, y: -12 }, ownerId: 'route-source' },
+    { id: 'route-target-label', content: 'Target', position: { x: 12, y: -12 }, ownerId: 'route-target' },
+    { id: 'route-obstacle-label', content: 'Obstacle', position: { x: 12, y: -12 }, ownerId: 'route-obstacle' },
+  ],
+});
+
+export const routingDemoConfig: DemoConfig = ({
+  id: 'routing-demo',
+  title: 'Routing Demo',
+  description: 'Auto routing uses an orthogonal router. Toggle routing to compare.',
+  createState: createRoutingDemoState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  router: orthogonalRouter,
+  actions: [],
+});

package/src/displaybox/demos/selectionDemo.ts

@@ -0,0 +1,49 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const createSelectionState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'select-1',
+      position: { x: 140, y: 140 },
+      size: { width: 180, height: 120 },
+      shapeId: 'default',
+    },
+    {
+      id: 'select-2',
+      position: { x: 380, y: 220 },
+      size: { width: 180, height: 120 },
+      shapeId: 'default',
+    },
+  ],
+  ports: [],
+  links: [],
+  texts: [
+    {
+      id: 'select-tip',
+      content: 'Click to select, drag to move, Delete/Backspace to remove.',
+      position: { x: 80, y: 80 },
+    },
+  ],
+});
+
+export const selectionDemoConfig: DemoConfig = ({
+  id: 'selection',
+  title: 'Selection + Interaction',
+  description: 'Click to select, drag to move, marquee-select on empty space, delete to remove.',
+  createState: createSelectionState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [
+    {
+      id: 'select-all',
+      label: 'Select all elements',
+      run: (editor, state) => {
+        editor.setSelection(state.elements.map((element) => element.id));
+      },
+    },
+  ],
+});

package/src/displaybox/demos/shapeBorderMovementDemo.ts

@@ -0,0 +1,126 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { basePortShapes, customGalleryShapes } from './shared';
+
+const resizeBaseSizes: Record<string, { width: number; height: number }> = {
+  'shape-border-rect': { width: 170, height: 120 },
+  'shape-border-circle': { width: 170, height: 170 },
+  'shape-border-ellipse': { width: 240, height: 130 },
+  'shape-border-hexagon': { width: 200, height: 130 },
+};
+
+const resizeExpandedSizes: Record<string, { width: number; height: number }> = {
+  'shape-border-rect': { width: 250, height: 150 },
+  'shape-border-circle': { width: 210, height: 210 },
+  'shape-border-ellipse': { width: 300, height: 170 },
+  'shape-border-hexagon': { width: 260, height: 170 },
+};
+
+const createShapeBorderMovementState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'shape-border-rect',
+      position: { x: 60, y: 110 },
+      size: { width: 170, height: 120 },
+      shapeId: 'rect-basic',
+    },
+    {
+      id: 'shape-border-circle',
+      position: { x: 280, y: 100 },
+      size: { width: 170, height: 170 },
+      shapeId: 'circle-basic',
+    },
+    {
+      id: 'shape-border-ellipse',
+      position: { x: 500, y: 120 },
+      size: { width: 240, height: 130 },
+      shapeId: 'ellipse-basic',
+    },
+    {
+      id: 'shape-border-hexagon',
+      position: { x: 790, y: 120 },
+      size: { width: 200, height: 130 },
+      shapeId: 'hexagon-basic',
+    },
+  ],
+  ports: [
+    {
+      id: 'shape-border-port-rect',
+      elementId: 'shape-border-rect',
+      position: { x: 85, y: 0 },
+      shapeId: 'port-circle',
+      moveMode: 'border',
+      anchorCenter: true,
+    },
+    {
+      id: 'shape-border-port-circle',
+      elementId: 'shape-border-circle',
+      position: { x: 85, y: 0 },
+      shapeId: 'port-circle',
+      moveMode: 'border',
+      anchorCenter: true,
+    },
+    {
+      id: 'shape-border-port-ellipse',
+      elementId: 'shape-border-ellipse',
+      position: { x: 120, y: 0 },
+      shapeId: 'port-circle',
+      moveMode: 'border',
+      anchorCenter: true,
+    },
+    {
+      id: 'shape-border-port-hexagon',
+      elementId: 'shape-border-hexagon',
+      position: { x: 100, y: 0 },
+      shapeId: 'port-circle',
+      moveMode: 'border',
+      anchorCenter: true,
+    },
+  ],
+  links: [
+    { id: 'shape-border-link-1', sourcePortId: 'shape-border-port-rect', targetPortId: 'shape-border-port-circle', points: [] },
+    { id: 'shape-border-link-2', sourcePortId: 'shape-border-port-circle', targetPortId: 'shape-border-port-ellipse', points: [] },
+    { id: 'shape-border-link-3', sourcePortId: 'shape-border-port-ellipse', targetPortId: 'shape-border-port-hexagon', points: [] },
+  ],
+  texts: [
+    { id: 'shape-border-rect-label', content: 'Rect (baseline)', position: { x: 8, y: -14 }, ownerId: 'shape-border-rect' },
+    { id: 'shape-border-circle-label', content: 'Circle', position: { x: 8, y: -14 }, ownerId: 'shape-border-circle' },
+    { id: 'shape-border-ellipse-label', content: 'Ellipse / Oval', position: { x: 8, y: -14 }, ownerId: 'shape-border-ellipse' },
+    { id: 'shape-border-hexagon-label', content: 'Hexagon', position: { x: 8, y: -14 }, ownerId: 'shape-border-hexagon' },
+    { id: 'shape-border-port-rect-label', content: 'Drag', position: { x: 8, y: -16 }, ownerId: 'shape-border-port-rect' },
+    { id: 'shape-border-port-circle-label', content: 'Drag', position: { x: 8, y: -16 }, ownerId: 'shape-border-port-circle' },
+    { id: 'shape-border-port-ellipse-label', content: 'Drag', position: { x: 8, y: -16 }, ownerId: 'shape-border-port-ellipse' },
+    { id: 'shape-border-port-hexagon-label', content: 'Drag', position: { x: 8, y: -16 }, ownerId: 'shape-border-port-hexagon' },
+  ],
+});
+
+export const shapeBorderMovementDemoConfig: DemoConfig = {
+  id: 'shape-border-movement',
+  title: 'Shape Border Port Movement',
+  description: 'Resize hosts (manual handles or quick actions) to verify border ports stay attached and connected links track them.',
+  createState: createShapeBorderMovementState,
+  elementShapes: customGalleryShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'rect-basic',
+  defaultPortShapeId: 'port-circle',
+  actions: [
+    {
+      id: 'expand-hosts',
+      label: 'Expand hosts',
+      run: (editor) => {
+        Object.entries(resizeExpandedSizes).forEach(([elementId, size]) => {
+          editor.resizeElement(elementId, size.width, size.height);
+        });
+      },
+    },
+    {
+      id: 'reset-host-sizes',
+      label: 'Reset host sizes',
+      run: (editor) => {
+        Object.entries(resizeBaseSizes).forEach(([elementId, size]) => {
+          editor.resizeElement(elementId, size.width, size.height);
+        });
+      },
+    },
+  ],
+};