orcasvn-react-diagrams 0.2.2 → 0.2.4

package/src/displaybox/demos/VertexControlLinkSessionDemoTab.tsx

@@ -0,0 +1,302 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type {
+  DiagramEditorHandle,
+  DiagramState,
+  ElementShapeHoverControlInteractionEvent,
+  ElementShapeHoverControls,
+  Point,
+  PortData,
+} from '../../api';
+import { createId } from '../../utils/ids';
+import DisplayBoxControls from '../DisplayBoxControls';
+import DisplayBoxStage from '../DisplayBoxStage';
+import useDemoControls from '../useDemoControls';
+import useDemoEditor from '../useDemoEditor';
+import useOffsetSequence from '../useOffsetSequence';
+import type { DemoActionHelpers } from '../types';
+import { gridStageStyle } from './shared';
+import { vertexControlLinkSessionDemoConfig, vertexSessionDemoIds } from './vertexControlLinkSessionDemo';
+
+const VERTEX_CONTROL_ID = 'vertex-session-link';
+const VERTEX_CONTROL_SVG = 'M2 8 H14 M8 2 V14';
+
+type SessionTarget =
+  | { type: 'port'; id: string }
+  | { type: 'element'; id: string }
+  | { type: 'none' };
+
+const pointInRect = (point: Point, rect: { x: number; y: number; width: number; height: number }): boolean =>
+  point.x >= rect.x &&
+  point.x <= rect.x + rect.width &&
+  point.y >= rect.y &&
+  point.y <= rect.y + rect.height;
+
+const resolveTargetFromPointer = (
+  state: DiagramState,
+  pointer: Point,
+  sourcePortId: string,
+): SessionTarget => {
+  let closestPort: { id: string; distance: number } | null = null;
+  for (const port of state.ports) {
+    if (port.id === sourcePortId) continue;
+    const host = state.elements.find((element) => element.id === port.elementId);
+    if (!host) continue;
+    const world = {
+      x: host.position.x + port.position.x,
+      y: host.position.y + port.position.y,
+    };
+    const distance = Math.hypot(world.x - pointer.x, world.y - pointer.y);
+    if (distance > 16) continue;
+    if (!closestPort || distance < closestPort.distance) {
+      closestPort = { id: port.id, distance };
+    }
+  }
+  if (closestPort) {
+    return { type: 'port', id: closestPort.id };
+  }
+
+  const targetOrder = [vertexSessionDemoIds.elementTarget, vertexSessionDemoIds.portTarget];
+  for (let i = 0; i < targetOrder.length; i += 1) {
+    const element = state.elements.find((item) => item.id === targetOrder[i]);
+    if (!element) continue;
+    if (pointInRect(pointer, {
+      x: element.position.x,
+      y: element.position.y,
+      width: element.size.width,
+      height: element.size.height,
+    })) {
+      return { type: 'element', id: element.id };
+    }
+  }
+
+  return { type: 'none' };
+};
+
+const createVertexSessionSourcePort = (
+  editor: DiagramEditorHandle,
+  sourcePoint: Point,
+): string => {
+  const portId = `vertex-session-source-${createId()}`;
+  const port: PortData = {
+    id: portId,
+    elementId: vertexSessionDemoIds.source,
+    position: { x: 0, y: 0 },
+    shapeId: 'port-dark',
+    moveMode: 'border',
+    anchorCenter: true,
+    orientToHostBorder: true,
+  };
+  editor.addPortToElement(vertexSessionDemoIds.source, port);
+  editor.movePortTo(portId, sourcePoint.x, sourcePoint.y);
+  return portId;
+};
+
+const vertexControls: ElementShapeHoverControls = {
+  controls: [
+    {
+      id: VERTEX_CONTROL_ID,
+      targetKind: 'vertex',
+      allowAllTargets: true,
+      visibilityTriggers: ['target-hover'],
+      tolerance: 14,
+      icon: {
+        svgPath: VERTEX_CONTROL_SVG,
+        size: { width: 16, height: 16 },
+        style: { fill: 'none', stroke: '#6a3da3', strokeWidth: 2, lineCap: 'round' },
+      },
+    },
+  ],
+};
+
+const VertexControlLinkSessionDemo = () => {
+  const demo = vertexControlLinkSessionDemoConfig;
+  const editorHandleRef = useRef<DiagramEditorHandle | null>(null);
+  const activeSourcePortRef = useRef<string | null>(null);
+  const [cancelOnConnect, setCancelOnConnect] = useState(false);
+  const [eventLog, setEventLog] = useState<string[]>([]);
+  const [lastResolution, setLastResolution] = useState('none');
+  const [isLogExpanded, setIsLogExpanded] = useState(false);
+
+  const nextOffset = useOffsetSequence();
+  const actionHelpers: DemoActionHelpers = useMemo(() => ({ nextOffset }), [nextOffset]);
+
+  const onControlInteraction = useCallback((event: ElementShapeHoverControlInteractionEvent) => {
+    if (event.controlId !== VERTEX_CONTROL_ID || event.elementId !== vertexSessionDemoIds.source) return;
+    const editor = editorHandleRef.current;
+    if (!editor) return;
+
+    if (event.eventType === 'drag-start') {
+      const sourcePoint = event.vertex?.position ?? event.pointer.world;
+      const sourcePortId = createVertexSessionSourcePort(editor, sourcePoint);
+      activeSourcePortRef.current = sourcePortId;
+      editor.startLinkFromPort(sourcePortId, sourcePoint);
+      setLastResolution('started');
+      return;
+    }
+
+    if (event.eventType === 'drag-move') {
+      if (!activeSourcePortRef.current) return;
+      editor.updateLinkPreview(event.pointer.world);
+      return;
+    }
+
+    if (event.eventType === 'drag-end') {
+      const sourcePortId = activeSourcePortRef.current;
+      if (!sourcePortId) return;
+      const state = editor.getState();
+      const target = resolveTargetFromPointer(state, event.pointer.world, sourcePortId);
+      if (target.type === 'port') {
+        editor.completeLinkToPort(target.id);
+        setLastResolution(`completeLinkToPort(${target.id})`);
+      } else if (target.type === 'element') {
+        editor.completeLinkToElement(target.id, event.pointer.world);
+        setLastResolution(`completeLinkToElement(${target.id})`);
+      } else {
+        editor.cancelLink();
+        setLastResolution('cancelLink()');
+      }
+      activeSourcePortRef.current = null;
+    }
+  }, []);
+
+  const { containerRef, editorRef, diagramState, selection, snapEnabled, setSnapEnabled } = useDemoEditor({
+    createState: demo.createState,
+    elementShapes: demo.elementShapes,
+    portShapes: demo.portShapes,
+    elementShapeHoverControls: vertexControls,
+    onElementShapeHoverControlInteraction: onControlInteraction,
+  });
+
+  editorHandleRef.current = editorRef.current;
+
+  const controls = useDemoControls({
+    demo,
+    editorRef,
+    diagramState,
+    selection,
+    snapEnabled,
+    setSnapEnabled,
+    actionHelpers,
+  });
+
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return undefined;
+    const append = (entry: string) => {
+      setEventLog((prev) => [entry, ...prev].slice(0, 16));
+    };
+
+    const offStarted = editor.on('elementLinkStarted', (payload) => {
+      append(`elementLinkStarted source=${payload.sourcePortId} start=(${Math.round(payload.startWorld.x)},${Math.round(payload.startWorld.y)})`);
+    });
+    const offConnecting = editor.on('elementLinkConnecting', (payload) => {
+      if (cancelOnConnect) {
+        payload.cancel();
+      }
+      append(`elementLinkConnecting source=${payload.sourcePortId} target=${payload.targetPortId} cancelled=${payload.cancelled || cancelOnConnect}`);
+    });
+    const offEnded = editor.on('elementLinkEnded', (payload) => {
+      append(
+        `elementLinkEnded source=${payload.sourcePortId} targetPort=${payload.targetPortId ?? '-'} targetElement=${payload.targetElementId ?? '-'} cancelled=${payload.cancelled}`,
+      );
+    });
+
+    return () => {
+      offStarted();
+      offConnecting();
+      offEnded();
+    };
+  }, [editorRef, cancelOnConnect]);
+
+  const linksCount = diagramState?.links.length ?? 0;
+  const portsCount = diagramState?.ports.length ?? 0;
+
+  const handleManualCancel = () => {
+    editorRef.current?.cancelLink();
+    activeSourcePortRef.current = null;
+    setLastResolution('cancelLink()');
+  };
+
+  return (
+    <section>
+      <div style={{ marginBottom: 12 }}>
+        <h2 style={{ marginTop: 0, marginBottom: 4 }}>{demo.title}</h2>
+        <p style={{ marginTop: 0 }}>{demo.description}</p>
+      </div>
+      <DisplayBoxControls
+        actions={demo.actions}
+        snapEnabled={controls.snapEnabled}
+        selectedLinkRouting={controls.selectedLinkRouting}
+        canToggleLinkRouting={controls.canToggleLinkRouting}
+        onReload={controls.handleReload}
+        onZoomIn={controls.handleZoomIn}
+        onZoomOut={controls.handleZoomOut}
+        onResetViewport={controls.handleResetViewport}
+        onToggleSnap={controls.handleToggleSnap}
+        onManualRender={controls.handleManualRender}
+        onToggleLinkRouting={controls.handleToggleLinkRouting}
+        onAction={controls.handleAction}
+        onExportImage={controls.handleExportImage}
+        onClearExportPreview={controls.handleClearExportPreview}
+        exportPreviewDataUrl={controls.exportPreviewDataUrl}
+        exportError={controls.exportError}
+      />
+
+      <div style={{ marginBottom: 12, padding: 12, border: '1px solid #d9e1ec', borderRadius: 8, background: '#fbfdff' }}>
+        <div style={{ fontWeight: 700, marginBottom: 6 }}>Required scenarios</div>
+        <ol style={{ marginTop: 0, marginBottom: 10, paddingLeft: 20, fontSize: 13 }}>
+          <li>Drag source vertex control to the existing port on the left side of Scenario 1 target.</li>
+          <li>Drag source vertex control to Scenario 2 target body (not its border port).</li>
+          <li>Enable host cancellation, then repeat a completion drag to verify cancelled end event.</li>
+          <li>Start a drag and press Cancel Active Session to verify temp visuals clear and cancelled end event.</li>
+          <li>Use baseline native ports (bottom row) and drag from one port to the other to verify no regression.</li>
+        </ol>
+
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center', marginBottom: 8 }}>
+          <label style={{ fontSize: 13 }}>
+            <input
+              type="checkbox"
+              checked={cancelOnConnect}
+              onChange={(event) => setCancelOnConnect(event.target.checked)}
+              style={{ marginRight: 6 }}
+            />
+            Host cancels on elementLinkConnecting
+          </label>
+          <button type="button" onClick={handleManualCancel} style={{ padding: '6px 10px' }}>
+            Cancel Active Session
+          </button>
+          <button type="button" onClick={() => setIsLogExpanded((prev) => !prev)} style={{ padding: '6px 10px' }}>
+            {isLogExpanded ? 'Collapse Lifecycle Log' : 'Expand Lifecycle Log'}
+          </button>
+          <span style={{ fontSize: 13 }}>
+            Ports: <strong>{portsCount}</strong> | Links: <strong>{linksCount}</strong> | Last resolution: <strong>{lastResolution}</strong>
+          </span>
+        </div>
+
+        <div style={{ fontSize: 12, color: '#2d3a4d' }}>
+          <strong>Lifecycle log:</strong> {isLogExpanded ? 'expanded' : 'collapsed'}
+          {isLogExpanded ? (
+            <pre
+              style={{
+                marginTop: 6,
+                padding: 8,
+                maxHeight: 170,
+                overflow: 'auto',
+                background: '#ffffff',
+                border: '1px solid #d9e1ec',
+                borderRadius: 6,
+                whiteSpace: 'pre-wrap',
+              }}
+            >
+              {eventLog.length ? eventLog.join('\n') : 'No events yet'}
+            </pre>
+          ) : null}
+        </div>
+      </div>
+
+      <DisplayBoxStage containerRef={containerRef} stageStyle={gridStageStyle} />
+    </section>
+  );
+};
+
+export default VertexControlLinkSessionDemo;

package/src/displaybox/demos/asymmetricPortMultiAnchorDemo.ts

@@ -0,0 +1,357 @@
+import type { DiagramState, Point, PortData } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+export const asymmetricPortMultiAnchorDemoId = 'asymmetric-port-multi-anchor';
+export const asymmetricPortDefaultVariantId = 'classic';
+
+export type AsymmetricPortShapeVariant = {
+  id: string;
+  label: string;
+  description: string;
+  shapeId: string;
+  svgPath: string;
+  svgSize: { width: number; height: number };
+  placementPoint: Point;
+  externalLinkAttachPoint: Point;
+  internalLinkAttachPoint: Point;
+  rotationPivot: Point;
+};
+
+export const asymmetricPortShapeVariants: AsymmetricPortShapeVariant[] = [
+  {
+    id: asymmetricPortDefaultVariantId,
+    label: 'Classic arm',
+    description: 'Baseline square-line-circle asymmetric glyph.',
+    shapeId: 'displaybox-asymmetric-anchor-port-classic',
+    svgPath: 'M2 6 H10 V14 H2 Z M10 10 H24 M28 10 m-4 0 a4 4 0 1 0 8 0 a4 4 0 1 0 -8 0',
+    svgSize: { width: 36, height: 20 },
+    placementPoint: { x: 6, y: 10 },
+    externalLinkAttachPoint: { x: 28, y: 10 },
+    internalLinkAttachPoint: { x: 6, y: 10 },
+    rotationPivot: { x: 6, y: 10 },
+  },
+  {
+    id: 'forked-arm',
+    label: 'Forked arm',
+    description: 'Connector splits before reaching the terminal circle.',
+    shapeId: 'displaybox-asymmetric-anchor-port-forked',
+    svgPath: 'M2 6 H10 V14 H2 Z M10 10 H18 M18 10 L24 6 M18 10 L24 14 M30 10 m-4 0 a4 4 0 1 0 8 0 a4 4 0 1 0 -8 0',
+    svgSize: { width: 38, height: 20 },
+    placementPoint: { x: 6, y: 10 },
+    externalLinkAttachPoint: { x: 30, y: 10 },
+    internalLinkAttachPoint: { x: 6, y: 10 },
+    rotationPivot: { x: 6, y: 10 },
+  },
+  {
+    id: 'zigzag-arm',
+    label: 'Zigzag arm',
+    description: 'Connector uses a zigzag body before the endpoint marker.',
+    shapeId: 'displaybox-asymmetric-anchor-port-zigzag',
+    svgPath: 'M2 6 H10 V14 H2 Z M10 10 L15 6 L20 14 L25 6 L28 10 M34 10 m-4 0 a4 4 0 1 0 8 0 a4 4 0 1 0 -8 0',
+    svgSize: { width: 42, height: 20 },
+    placementPoint: { x: 6, y: 10 },
+    externalLinkAttachPoint: { x: 34, y: 10 },
+    internalLinkAttachPoint: { x: 6, y: 10 },
+    rotationPivot: { x: 6, y: 10 },
+  },
+  {
+    id: 'dual-bar',
+    label: 'Dual bar',
+    description: 'Body includes dual bars between pivot and circle endpoint.',
+    shapeId: 'displaybox-asymmetric-anchor-port-dual-bar',
+    svgPath: 'M2 6 H10 V14 H2 Z M10 10 H18 M18 6 V14 M22 6 V14 M22 10 H26 M32 10 m-4 0 a4 4 0 1 0 8 0 a4 4 0 1 0 -8 0',
+    svgSize: { width: 40, height: 20 },
+    placementPoint: { x: 6, y: 10 },
+    externalLinkAttachPoint: { x: 32, y: 10 },
+    internalLinkAttachPoint: { x: 6, y: 10 },
+    rotationPivot: { x: 6, y: 10 },
+  },
+];
+
+export const resolveAsymmetricPortShapeVariant = (variantId?: string): AsymmetricPortShapeVariant => {
+  if (!variantId) return asymmetricPortShapeVariants[0];
+  return asymmetricPortShapeVariants.find((variant) => variant.id === variantId) ?? asymmetricPortShapeVariants[0];
+};
+
+export const asymmetricPortMultiAnchorShapeId = resolveAsymmetricPortShapeVariant(asymmetricPortDefaultVariantId).shapeId;
+export const asymmetricPortMultiAnchorShapeSvgPath =
+  resolveAsymmetricPortShapeVariant(asymmetricPortDefaultVariantId).svgPath;
+export const asymmetricPortMultiAnchorShapeSize = resolveAsymmetricPortShapeVariant(asymmetricPortDefaultVariantId).svgSize;
+
+export const multiAnchorHostId = 'multi-anchor-host';
+export const multiAnchorExternalPortId = 'multi-anchor-port-external';
+
+const multiAnchorStroke = '#1f4d99';
+const legacyStroke = '#9b2c2c';
+
+type RowMode = 'multi-anchor' | 'legacy';
+
+type RowDefinition = {
+  elements: DiagramState['elements'];
+  ports: DiagramState['ports'];
+  links: DiagramState['links'];
+  texts: DiagramState['texts'];
+};
+
+const createAsymmetricPort = (options: {
+  id: string;
+  elementId: string;
+  position: Point;
+  stroke: string;
+  mode: RowMode;
+  shapeVariant: AsymmetricPortShapeVariant;
+}): PortData => {
+  const basePort: PortData = {
+    id: options.id,
+    elementId: options.elementId,
+    position: options.position,
+    shapeId: options.shapeVariant.shapeId,
+    size: { ...options.shapeVariant.svgSize },
+    moveMode: 'border',
+    anchorCenter: true,
+    orientToHostBorder: true,
+    style: {
+      stroke: options.stroke,
+      strokeWidth: 2,
+      fill: 'transparent',
+    },
+  };
+
+  if (options.mode === 'legacy') {
+    return basePort;
+  }
+
+  return {
+    ...basePort,
+    placementPoint: { ...options.shapeVariant.placementPoint },
+    externalLinkAttachPoint: { ...options.shapeVariant.externalLinkAttachPoint },
+    internalLinkAttachPoint: { ...options.shapeVariant.internalLinkAttachPoint },
+    rotationPivot: { ...options.shapeVariant.rotationPivot },
+  };
+};
+
+const createComparisonRow = (options: {
+  prefix: 'multi-anchor' | 'legacy';
+  top: number;
+  mode: RowMode;
+  shapeVariant: AsymmetricPortShapeVariant;
+}): RowDefinition => {
+  const { prefix, top, mode, shapeVariant } = options;
+  const hostId = `${prefix}-host`;
+  const peerId = `${prefix}-peer`;
+  const childId = `${prefix}-child`;
+  const externalPortId = `${prefix}-port-external`;
+  const topPortId = `${prefix}-port-top`;
+  const bottomPortId = `${prefix}-port-bottom`;
+  const internalPortId = `${prefix}-port-internal`;
+  const peerPortId = `${prefix}-peer-port`;
+  const childPortId = `${prefix}-child-port`;
+  const stroke = mode === 'multi-anchor' ? multiAnchorStroke : legacyStroke;
+  const title = mode === 'multi-anchor' ? 'Multi-anchor geometry' : 'Legacy/default geometry';
+  const subtitle =
+    mode === 'multi-anchor'
+      ? `${shapeVariant.label}: square pivot stays pinned to the border; right-side link starts at the circle endpoint.`
+      : 'Same svgPath without placement/link/pivot anchors for quick comparison.';
+
+  return {
+    elements: [
+      {
+        id: hostId,
+        position: { x: 80, y: top },
+        size: { width: 280, height: 180 },
+        shapeId: 'default',
+      },
+      {
+        id: peerId,
+        position: { x: 470, y: top + 36 },
+        size: { width: 170, height: 108 },
+        shapeId: 'panel',
+      },
+      {
+        id: childId,
+        position: { x: 88, y: 86 },
+        size: { width: 122, height: 72 },
+        shapeId: 'panel',
+        parentId: hostId,
+      },
+    ],
+    ports: [
+      createAsymmetricPort({
+        id: topPortId,
+        elementId: hostId,
+        position: { x: 112, y: 0 },
+        stroke,
+        mode,
+        shapeVariant,
+      }),
+      createAsymmetricPort({
+        id: externalPortId,
+        elementId: hostId,
+        position: { x: 280, y: 68 },
+        stroke,
+        mode,
+        shapeVariant,
+      }),
+      createAsymmetricPort({
+        id: bottomPortId,
+        elementId: hostId,
+        position: { x: 182, y: 180 },
+        stroke,
+        mode,
+        shapeVariant,
+      }),
+      createAsymmetricPort({
+        id: internalPortId,
+        elementId: hostId,
+        position: { x: 0, y: 130 },
+        stroke,
+        mode,
+        shapeVariant,
+      }),
+      {
+        id: peerPortId,
+        elementId: peerId,
+        position: { x: 0, y: 54 },
+        shapeId: 'port-dark',
+        moveMode: 'border',
+        anchorCenter: true,
+      },
+      {
+        id: childPortId,
+        elementId: childId,
+        position: { x: 0, y: 36 },
+        shapeId: 'port-circle',
+        moveMode: 'border',
+        anchorCenter: true,
+      },
+    ],
+    links: [
+      {
+        id: `${prefix}-link-external`,
+        sourcePortId: externalPortId,
+        targetPortId: peerPortId,
+        points: [],
+        style: {
+          stroke: stroke,
+          strokeWidth: 2,
+        },
+      },
+      {
+        id: `${prefix}-link-internal`,
+        sourcePortId: internalPortId,
+        targetPortId: childPortId,
+        points: [],
+        style: {
+          stroke: mode === 'multi-anchor' ? '#2f7a3d' : '#7a5f2f',
+          strokeWidth: 2,
+          dash: mode === 'multi-anchor' ? [8, 4] : [4, 4],
+        },
+      },
+    ],
+    texts: [
+      {
+        id: `${prefix}-title`,
+        content: title,
+        position: { x: 74, y: top - 42 },
+        style: { fontStyle: 'bold', fontSize: 20 },
+      },
+      {
+        id: `${prefix}-subtitle`,
+        content: subtitle,
+        position: { x: 74, y: top - 18 },
+        style: { fontSize: 13, fill: '#334155' },
+      },
+      {
+        id: `${prefix}-host-label`,
+        content: 'Drag border ports or use the side buttons below.',
+        position: { x: 14, y: -18 },
+        ownerId: hostId,
+        style: { fontSize: 12, fill: '#334155' },
+      },
+      {
+        id: `${prefix}-top-port-label`,
+        content: 'top',
+        position: { x: 10, y: -18 },
+        ownerId: topPortId,
+        style: { fontSize: 11 },
+      },
+      {
+        id: `${prefix}-external-port-label`,
+        content: 'external → circle',
+        position: { x: 12, y: -18 },
+        ownerId: externalPortId,
+        style: { fontSize: 11 },
+      },
+      {
+        id: `${prefix}-bottom-port-label`,
+        content: 'bottom',
+        position: { x: 12, y: 18 },
+        ownerId: bottomPortId,
+        style: { fontSize: 11 },
+      },
+      {
+        id: `${prefix}-internal-port-label`,
+        content: 'internal → square',
+        position: { x: 12, y: -18 },
+        ownerId: internalPortId,
+        style: { fontSize: 11 },
+      },
+      {
+        id: `${prefix}-peer-label`,
+        content: 'External peer',
+        position: { x: 12, y: -18 },
+        ownerId: peerId,
+        style: { fontSize: 12 },
+      },
+      {
+        id: `${prefix}-child-label`,
+        content: 'Child host for internal link',
+        position: { x: 8, y: -18 },
+        ownerId: childId,
+        style: { fontSize: 11 },
+      },
+    ],
+  };
+};
+
+export const createAsymmetricPortMultiAnchorState = (
+  showLegacyComparison = true,
+  variantId = asymmetricPortDefaultVariantId,
+): DiagramState => {
+  const shapeVariant = resolveAsymmetricPortShapeVariant(variantId);
+  const primaryRow = createComparisonRow({ prefix: 'multi-anchor', top: 92, mode: 'multi-anchor', shapeVariant });
+  const legacyRow = showLegacyComparison
+    ? createComparisonRow({ prefix: 'legacy', top: 356, mode: 'legacy', shapeVariant })
+    : { elements: [], ports: [], links: [], texts: [] };
+
+  return {
+    elements: [...primaryRow.elements, ...legacyRow.elements],
+    ports: [...primaryRow.ports, ...legacyRow.ports],
+    links: [...primaryRow.links, ...legacyRow.links],
+    texts: [
+      {
+        id: 'multi-anchor-legend',
+        content:
+          'Legend: square = placement/rotation pivot, line = glyph body, circle = external attach endpoint. Internal link uses the square anchor.',
+        position: { x: 72, y: 28 },
+        style: { fontSize: 13, fill: '#1f2937' },
+      },
+      ...primaryRow.texts,
+      ...legacyRow.texts,
+    ],
+  };
+};
+
+export const asymmetricPortMultiAnchorDemoConfig: DemoConfig = {
+  id: asymmetricPortMultiAnchorDemoId,
+  title: 'Asymmetric Multi-Anchor Ports',
+  description:
+    'Compares legacy/default origin-based svg glyph behavior with explicit placement, pivot, and external/internal link attach points.',
+  createState: () => createAsymmetricPortMultiAnchorState(true, asymmetricPortDefaultVariantId),
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [],
+};