orcasvn-react-diagrams 0.2.0 → 0.2.2

package/src/displaybox/demos/TextLayoutDemoTab.tsx

@@ -0,0 +1,386 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import type { TextLayout } from '../../api';
+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 {
+  textDemoConfig,
+  textDemoFloatingTextId,
+  textDemoLongSample,
+  textDemoOwnedTextId,
+  textDemoOwnerId,
+} from './textDemo';
+
+type TextTarget = 'owned' | 'floating';
+
+const TextLayoutDemo = () => {
+  const demo = textDemoConfig;
+  const { containerRef, editorRef, diagramState, selection, snapEnabled, setSnapEnabled } = useDemoEditor({
+    createState: demo.createState,
+    elementShapes: demo.elementShapes,
+    portShapes: demo.portShapes,
+  });
+
+  const nextOffset = useOffsetSequence();
+  const actionHelpers: DemoActionHelpers = useMemo(() => ({ nextOffset }), [nextOffset]);
+  const controls = useDemoControls({
+    demo,
+    editorRef,
+    diagramState,
+    selection,
+    snapEnabled,
+    setSnapEnabled,
+    actionHelpers,
+  });
+
+  const [target, setTarget] = useState<TextTarget>('owned');
+  const [wrap, setWrap] = useState<TextLayout['wrap']>('none');
+  const [overflow, setOverflow] = useState<TextLayout['overflow']>('ellipsis-middle');
+  const [padding, setPadding] = useState<number>(12);
+  const [boundsMode, setBoundsMode] = useState<TextLayout['boundsMode']>('owner-width');
+  const [maxLines, setMaxLines] = useState<number>(3);
+  const [fixedWidth, setFixedWidth] = useState<number>(240);
+  const [fixedHeight, setFixedHeight] = useState<number>(90);
+  const [ownerWidth, setOwnerWidth] = useState<number>(260);
+  const [ownerHeight, setOwnerHeight] = useState<number>(140);
+
+  useEffect(() => {
+    const owner = diagramState?.elements.find((element) => element.id === textDemoOwnerId);
+    if (!owner) return;
+    setOwnerWidth(owner.size.width);
+    setOwnerHeight(owner.size.height);
+  }, [diagramState]);
+
+  const selectedTextId = target === 'owned' ? textDemoOwnedTextId : textDemoFloatingTextId;
+  const selectedText = diagramState?.texts.find((text) => text.id === selectedTextId);
+  const selectedDisplayContent = selectedText?.displayContent ?? selectedText?.content ?? '';
+  const ownerElement = diagramState?.elements.find((element) => element.id === textDemoOwnerId);
+
+  const applyLayoutToTarget = (nextTarget: TextTarget, nextLayout: TextLayout) => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    if (nextTarget === 'owned') {
+      editor.removeText(textDemoOwnedTextId);
+      editor.addText({
+        id: textDemoOwnedTextId,
+        content: textDemoLongSample,
+        ownerId: textDemoOwnerId,
+        position: { x: 12, y: 12 },
+        layout: nextLayout,
+      });
+      editor.setSelection([textDemoOwnedTextId]);
+      return;
+    }
+
+    editor.removeText(textDemoFloatingTextId);
+    editor.addText({
+      id: textDemoFloatingTextId,
+      content: textDemoLongSample,
+      position: { x: 470, y: 120 },
+      layout: nextLayout,
+    });
+    editor.setSelection([textDemoFloatingTextId]);
+  };
+
+  const applyTextLayout = () => {
+    const layout: TextLayout = {
+      boundsMode,
+      wrap,
+      overflow,
+      padding,
+      maxLines,
+      ...(boundsMode === 'fixed' ? { fixedSize: { width: fixedWidth, height: fixedHeight } } : {}),
+    };
+    applyLayoutToTarget(target, layout);
+  };
+
+  const applyOwnerPaddingVerification = (nextPadding: number) => {
+    setTarget('owned');
+    setBoundsMode('owner-box');
+    setWrap('word');
+    setOverflow('ellipsis-end');
+    setPadding(nextPadding);
+    setMaxLines(4);
+    applyLayoutToTarget('owned', {
+      boundsMode: 'owner-box',
+      wrap: 'word',
+      overflow: 'ellipsis-end',
+      padding: nextPadding,
+      maxLines: 4,
+    });
+  };
+
+  const applyZeroPaddingOverflowPreset = () => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const presetWidth = 180;
+    const presetHeight = 58;
+    setTarget('owned');
+    setBoundsMode('owner-box');
+    setWrap('char');
+    setOverflow('clip');
+    setPadding(0);
+    setMaxLines(2);
+    setOwnerWidth(presetWidth);
+    setOwnerHeight(presetHeight);
+    editor.resizeElement(textDemoOwnerId, presetWidth, presetHeight);
+    applyLayoutToTarget('owned', {
+      boundsMode: 'owner-box',
+      wrap: 'char',
+      overflow: 'clip',
+      padding: 0,
+      maxLines: 2,
+    });
+  };
+
+  const applyOwnerSize = () => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    editor.resizeElement(textDemoOwnerId, ownerWidth, ownerHeight);
+    editor.setSelection([textDemoOwnerId]);
+  };
+
+  const ownerPadding = target === 'owned' ? Math.max(0, padding) : 0;
+  const resolvedOwnerContentWidth = ownerElement ? Math.max(0, ownerElement.size.width - ownerPadding * 2) : null;
+  const resolvedOwnerContentHeight = ownerElement ? Math.max(0, ownerElement.size.height - ownerPadding * 2) : null;
+  const selectedDisplayOffset = selectedText?.displayOffset ?? { x: 0, y: 0 };
+  const selectedClip = selectedText?.displayClipSize;
+  const selectedTextSize = selectedText?.size;
+  const selectedOwner = selectedText?.ownerId
+    ? diagramState?.elements.find((element) => element.id === selectedText.ownerId)
+    : null;
+  const selectedWorldX = (selectedOwner?.position.x ?? 0) + (selectedText?.position.x ?? 0) + selectedDisplayOffset.x;
+  const selectedWorldY = (selectedOwner?.position.y ?? 0) + (selectedText?.position.y ?? 0) + selectedDisplayOffset.y;
+
+  return (
+    <section>
+      <div style={{ marginBottom: 12 }}>
+        <h2 style={{ marginTop: 0, marginBottom: 4 }}>{demo.title}</h2>
+        <p style={{ marginTop: 0 }}>
+          Full text content is preserved in state. Overflow and ellipsis settings only change visual output
+          (`displayContent`) for rendering.
+        </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}
+      />
+
+      <div style={{ display: 'grid', gap: 10, marginBottom: 12 }}>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center' }}>
+          <label htmlFor="text-target" style={{ fontWeight: 600 }}>
+            Target
+          </label>
+          <select
+            id="text-target"
+            value={target}
+            onChange={(event) => {
+              const next = event.target.value as TextTarget;
+              setTarget(next);
+              if (next === 'owned') {
+                setBoundsMode('owner-width');
+                setWrap('none');
+                setOverflow('ellipsis-middle');
+                setPadding(12);
+                setMaxLines(2);
+              } else {
+                setBoundsMode('fixed');
+                setWrap('word');
+                setOverflow('ellipsis-end');
+                setPadding(8);
+                setMaxLines(3);
+              }
+            }}
+            style={{ padding: '6px 8px' }}
+          >
+            <option value="owned">Owned text (owner constrained)</option>
+            <option value="floating">Floating text (fixed bounds)</option>
+          </select>
+
+          <label htmlFor="text-bounds" style={{ fontWeight: 600 }}>
+            Bounds
+          </label>
+          <select
+            id="text-bounds"
+            value={boundsMode}
+            onChange={(event) => setBoundsMode(event.target.value as TextLayout['boundsMode'])}
+            style={{ padding: '6px 8px' }}
+          >
+            <option value="owner-width">owner-width</option>
+            <option value="owner-box">owner-box</option>
+            <option value="fixed">fixed</option>
+          </select>
+
+          <label htmlFor="text-wrap" style={{ fontWeight: 600 }}>
+            Wrap
+          </label>
+          <select
+            id="text-wrap"
+            value={wrap}
+            onChange={(event) => setWrap(event.target.value as TextLayout['wrap'])}
+            style={{ padding: '6px 8px' }}
+          >
+            <option value="none">none</option>
+            <option value="word">word</option>
+            <option value="char">char</option>
+          </select>
+
+          <label htmlFor="text-overflow" style={{ fontWeight: 600 }}>
+            Overflow
+          </label>
+          <select
+            id="text-overflow"
+            value={overflow}
+            onChange={(event) => setOverflow(event.target.value as TextLayout['overflow'])}
+            style={{ padding: '6px 8px' }}
+          >
+            <option value="clip">clip</option>
+            <option value="ellipsis-end">ellipsis-end</option>
+            <option value="ellipsis-middle">ellipsis-middle</option>
+            <option value="ellipsis-start">ellipsis-start</option>
+          </select>
+
+          <label htmlFor="text-padding" style={{ fontWeight: 600 }}>
+            Padding
+          </label>
+          <input
+            id="text-padding"
+            type="number"
+            value={padding}
+            min={0}
+            onChange={(event) => setPadding(Math.max(0, Number(event.target.value) || 0))}
+            style={{ width: 72, padding: '6px 8px' }}
+          />
+
+          <label htmlFor="text-max-lines" style={{ fontWeight: 600 }}>
+            Max lines
+          </label>
+          <input
+            id="text-max-lines"
+            type="number"
+            value={maxLines}
+            min={1}
+            onChange={(event) => setMaxLines(Math.max(1, Number(event.target.value) || 1))}
+            style={{ width: 72, padding: '6px 8px' }}
+          />
+
+          <button type="button" onClick={applyTextLayout} style={{ padding: '6px 12px', fontWeight: 600 }}>
+            Apply text layout
+          </button>
+        </div>
+
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center' }}>
+          <strong>Owner resize (reflow):</strong>
+          <label htmlFor="owner-width-input">Width</label>
+          <input
+            id="owner-width-input"
+            type="number"
+            value={ownerWidth}
+            min={60}
+            onChange={(event) => setOwnerWidth(Math.max(60, Number(event.target.value) || 60))}
+            style={{ width: 80, padding: '6px 8px' }}
+          />
+          <label htmlFor="owner-height-input">Height</label>
+          <input
+            id="owner-height-input"
+            type="number"
+            value={ownerHeight}
+            min={40}
+            onChange={(event) => setOwnerHeight(Math.max(40, Number(event.target.value) || 40))}
+            style={{ width: 80, padding: '6px 8px' }}
+          />
+          <button type="button" onClick={applyOwnerSize} style={{ padding: '6px 12px' }}>
+            Apply owner size
+          </button>
+          {boundsMode === 'fixed' && (
+            <>
+              <label htmlFor="fixed-width-input">Fixed W</label>
+              <input
+                id="fixed-width-input"
+                type="number"
+                value={fixedWidth}
+                min={40}
+                onChange={(event) => setFixedWidth(Math.max(40, Number(event.target.value) || 40))}
+                style={{ width: 80, padding: '6px 8px' }}
+              />
+              <label htmlFor="fixed-height-input">Fixed H</label>
+              <input
+                id="fixed-height-input"
+                type="number"
+                value={fixedHeight}
+                min={24}
+                onChange={(event) => setFixedHeight(Math.max(24, Number(event.target.value) || 24))}
+                style={{ width: 80, padding: '6px 8px' }}
+              />
+            </>
+          )}
+        </div>
+
+        <div style={{ border: '1px solid #d3dbe8', borderRadius: 8, padding: 10, display: 'grid', gap: 8 }}>
+          <strong>Padding verification (owner constrained)</strong>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+            <button type="button" onClick={() => applyOwnerPaddingVerification(0)} style={{ padding: '6px 10px' }}>
+              Verify padding: 0
+            </button>
+            <button type="button" onClick={() => applyOwnerPaddingVerification(18)} style={{ padding: '6px 10px' }}>
+              Verify padding: 18
+            </button>
+            <button type="button" onClick={applyZeroPaddingOverflowPreset} style={{ padding: '6px 10px' }}>
+              Zero-padding no-bleed preset
+            </button>
+          </div>
+          <div style={{ fontSize: 12 }}>
+            Owner bounds: {ownerElement ? `${ownerElement.size.width} x ${ownerElement.size.height}` : 'n/a'} | Padding:{' '}
+            {ownerPadding}
+          </div>
+          <div style={{ fontSize: 12 }}>
+            Resolved content box: {resolvedOwnerContentWidth ?? 'n/a'} x {resolvedOwnerContentHeight ?? 'n/a'}
+          </div>
+          <div style={{ fontSize: 12 }}>
+            Quick check: padding 0 should show no edge bleed; increasing padding should shift inset and truncation together.
+          </div>
+        </div>
+
+        <div style={{ border: '1px solid #d3dbe8', borderRadius: 8, padding: 10, display: 'grid', gap: 6, fontSize: 12 }}>
+          <strong>Resolved render bounds (selected text)</strong>
+          <div>
+            size: {selectedTextSize ? `${selectedTextSize.width} x ${selectedTextSize.height}` : 'n/a'} | offset:{' '}
+            {`${selectedDisplayOffset.x}, ${selectedDisplayOffset.y}`}
+          </div>
+          <div>
+            clip: {selectedClip ? `${selectedClip.width} x ${selectedClip.height}` : 'none'} | world origin:{' '}
+            {Number.isFinite(selectedWorldX) && Number.isFinite(selectedWorldY)
+              ? `${selectedWorldX.toFixed(1)}, ${selectedWorldY.toFixed(1)}`
+              : 'n/a'}
+          </div>
+        </div>
+
+        <div style={{ display: 'grid', gap: 6 }}>
+          <div style={{ fontSize: 12 }}>
+            <strong>Canonical content:</strong> {textDemoLongSample}
+          </div>
+          <div style={{ fontSize: 12 }}>
+            <strong>Rendered displayContent:</strong> <code>{selectedDisplayContent}</code>
+          </div>
+        </div>
+      </div>
+
+      <DisplayBoxStage containerRef={containerRef} />
+    </section>
+  );
+};
+
+export default TextLayoutDemo;

package/src/displaybox/demos/autoLayoutDemo.ts

@@ -0,0 +1,111 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const createAutoLayoutState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'layout-row',
+      position: { x: 60, y: 80 },
+      size: { width: 180, height: 96 },
+      shapeId: 'panel',
+      layout: { mode: 'horizontal', padding: { x: 14, y: 12 }, gap: 14, align: 'center' },
+    },
+    { id: 'row-a', position: { x: 0, y: 0 }, size: { width: 62, height: 44 }, shapeId: 'default', parentId: 'layout-row' },
+    { id: 'row-b', position: { x: 0, y: 0 }, size: { width: 96, height: 32 }, shapeId: 'default', parentId: 'layout-row' },
+    { id: 'row-c', position: { x: 0, y: 0 }, size: { width: 54, height: 56 }, shapeId: 'default', parentId: 'layout-row' },
+    {
+      id: 'row-nested-owner',
+      position: { x: 0, y: 0 },
+      size: { width: 82, height: 82 },
+      shapeId: 'default',
+      parentId: 'layout-row',
+      layout: { mode: 'vertical', padding: { x: 8, y: 6 }, gap: 6, align: 'start' },
+    },
+    { id: 'row-nested-child-a', position: { x: 0, y: 0 }, size: { width: 60, height: 20 }, shapeId: 'default', parentId: 'row-nested-owner' },
+    { id: 'row-nested-child-b', position: { x: 0, y: 0 }, size: { width: 76, height: 22 }, shapeId: 'default', parentId: 'row-nested-owner' },
+
+    {
+      id: 'layout-column',
+      position: { x: 400, y: 70 },
+      size: { width: 120, height: 140 },
+      shapeId: 'panel',
+      layout: { mode: 'vertical', padding: { x: 12, y: 10 }, gap: 16, align: 'end' },
+    },
+    { id: 'col-a', position: { x: 0, y: 0 }, size: { width: 44, height: 28 }, shapeId: 'default', parentId: 'layout-column' },
+    { id: 'col-b', position: { x: 0, y: 0 }, size: { width: 70, height: 36 }, shapeId: 'default', parentId: 'layout-column' },
+    { id: 'col-c', position: { x: 0, y: 0 }, size: { width: 92, height: 44 }, shapeId: 'default', parentId: 'layout-column' },
+
+    {
+      id: 'layout-nested',
+      position: { x: 120, y: 260 },
+      size: { width: 190, height: 130 },
+      shapeId: 'panel',
+      layout: { mode: 'horizontal', padding: { x: 12, y: 12 }, gap: 12, align: 'start' },
+    },
+    {
+      id: 'nested-stack',
+      position: { x: 0, y: 0 },
+      size: { width: 90, height: 92 },
+      shapeId: 'default',
+      parentId: 'layout-nested',
+      layout: { mode: 'vertical', padding: { x: 8, y: 8 }, gap: 8, align: 'center' },
+    },
+    { id: 'stack-a', position: { x: 0, y: 0 }, size: { width: 60, height: 24 }, shapeId: 'default', parentId: 'nested-stack' },
+    { id: 'stack-b', position: { x: 0, y: 0 }, size: { width: 90, height: 30 }, shapeId: 'default', parentId: 'nested-stack' },
+    {
+      id: 'stack-overflow',
+      position: { x: 0, y: 0 },
+      size: { width: 110, height: 26 },
+      shapeId: 'default',
+      parentId: 'nested-stack',
+    },
+    { id: 'nested-peer', position: { x: 0, y: 0 }, size: { width: 50, height: 90 }, shapeId: 'default', parentId: 'layout-nested' },
+
+    {
+      id: 'layout-manual',
+      position: { x: 420, y: 260 },
+      size: { width: 190, height: 120 },
+      shapeId: 'panel',
+    },
+    { id: 'manual-a', position: { x: 12, y: 18 }, size: { width: 60, height: 30 }, shapeId: 'default', parentId: 'layout-manual' },
+    { id: 'manual-b', position: { x: 90, y: 60 }, size: { width: 68, height: 32 }, shapeId: 'default', parentId: 'layout-manual' },
+  ],
+  ports: [],
+  links: [],
+  texts: [
+    { id: 'label-layout-row', content: 'Row parent', position: { x: 8, y: -18 }, ownerId: 'layout-row' },
+    { id: 'label-row-a', content: 'row-a', position: { x: 6, y: -14 }, ownerId: 'row-a' },
+    { id: 'label-row-b', content: 'row-b', position: { x: 6, y: -14 }, ownerId: 'row-b' },
+    { id: 'label-row-c', content: 'row-c', position: { x: 6, y: -14 }, ownerId: 'row-c' },
+    { id: 'label-row-nested-owner', content: 'owns children', position: { x: 6, y: -16 }, ownerId: 'row-nested-owner' },
+
+    { id: 'label-layout-column', content: 'Column parent', position: { x: 8, y: -18 }, ownerId: 'layout-column' },
+    { id: 'label-col-a', content: 'col-a', position: { x: 6, y: -14 }, ownerId: 'col-a' },
+    { id: 'label-col-b', content: 'col-b', position: { x: 6, y: -14 }, ownerId: 'col-b' },
+    { id: 'label-col-c', content: 'col-c', position: { x: 6, y: -14 }, ownerId: 'col-c' },
+
+    { id: 'label-layout-nested', content: 'Row + nested column', position: { x: 6, y: -18 }, ownerId: 'layout-nested' },
+    { id: 'label-nested-stack', content: 'nested stack', position: { x: 6, y: -16 }, ownerId: 'nested-stack' },
+    { id: 'label-stack-a', content: 'stack-a', position: { x: 6, y: -14 }, ownerId: 'stack-a' },
+    { id: 'label-stack-b', content: 'stack-b', position: { x: 6, y: -14 }, ownerId: 'stack-b' },
+    { id: 'label-stack-overflow', content: 'stack-overflow', position: { x: 6, y: -14 }, ownerId: 'stack-overflow' },
+    { id: 'label-nested-peer', content: 'nested-peer', position: { x: 6, y: -14 }, ownerId: 'nested-peer' },
+
+    { id: 'label-layout-manual', content: 'Manual (no layout)', position: { x: 6, y: -18 }, ownerId: 'layout-manual' },
+    { id: 'label-manual-a', content: 'manual-a', position: { x: 6, y: -14 }, ownerId: 'manual-a' },
+    { id: 'label-manual-b', content: 'manual-b', position: { x: 6, y: -14 }, ownerId: 'manual-b' },
+  ],
+});
+
+export const autoLayoutDemoConfig: DemoConfig = ({
+  id: 'auto-layout',
+  title: 'Element Auto-Layout',
+  description: 'Arrange children with padding/alignment plus fit options (main-axis distribute, cross-axis stretch).',
+  createState: createAutoLayoutState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [],
+});

package/src/displaybox/demos/basicDemo.ts

@@ -0,0 +1,131 @@
+import type { DiagramState } from '../../api';
+import { createId } from '../../utils/ids';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const createBasicState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'element-a',
+      position: { x: 120, y: 120 },
+      size: { width: 220, height: 140 },
+      shapeId: 'default',
+    },
+    {
+      id: 'element-b',
+      position: { x: 430, y: 260 },
+      size: { width: 240, height: 150 },
+      shapeId: 'default',
+    },
+  ],
+  ports: [
+    {
+      id: 'port-a',
+      elementId: 'element-a',
+      position: { x: 40, y: 40 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+    },
+    {
+      id: 'port-b',
+      elementId: 'element-b',
+      position: { x: 60, y: 60 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+    },
+  ],
+  links: [
+    {
+      id: 'link-ab',
+      sourcePortId: 'port-a',
+      targetPortId: 'port-b',
+      points: [],
+    },
+  ],
+  texts: [
+    {
+      id: 'text-a',
+      content: 'Element A',
+      position: { x: 10, y: -10 },
+      ownerId: 'element-a',
+      style: { fontSize: 14, fontFamily: 'sans-serif' },
+    },
+    {
+      id: 'text-b',
+      content: 'Element B',
+      position: { x: 10, y: -10 },
+      ownerId: 'element-b',
+      style: { fontSize: 14, fontFamily: 'sans-serif' },
+    },
+  ],
+});
+
+export const basicDemoConfig: DemoConfig = ({
+  id: 'basic',
+  title: 'Basic Diagram',
+  description: 'Elements, ports, link, and labels.',
+  createState: createBasicState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [
+    {
+      id: 'add-element',
+      label: 'Add element',
+      run: (editor, _state, demo, helpers) => {
+        const offset = helpers.nextOffset();
+        const id = `element-${createId()}`;
+        editor.addElement({
+          id,
+          position: { x: 140 + offset, y: 140 + offset },
+          size: { width: 200, height: 120 },
+          shapeId: demo.defaultElementShapeId ?? 'default',
+        });
+      },
+    },
+    {
+      id: 'add-port',
+      label: 'Add port',
+      run: (editor, state, demo, helpers) => {
+        const element = state.elements[0];
+        if (!element) return;
+        const offset = helpers.nextOffset();
+        editor.addPortToElement(element.id, {
+          id: `port-${createId()}`,
+          elementId: element.id,
+          position: { x: 20 + offset, y: 20 + offset },
+          shapeId: demo.defaultPortShapeId ?? 'port-circle',
+        });
+      },
+    },
+    {
+      id: 'add-link',
+      label: 'Add link',
+      run: (editor, state) => {
+        if (state.ports.length < 2) return;
+        const [first, second] = state.ports;
+        editor.addLink({
+          id: `link-${createId()}`,
+          sourcePortId: first.id,
+          targetPortId: second.id,
+          points: [],
+        });
+      },
+    },
+    {
+      id: 'add-text',
+      label: 'Add text',
+      run: (editor, state) => {
+        const element = state.elements[0];
+        if (!element) return;
+        editor.addText({
+          id: `text-${createId()}`,
+          content: 'New label',
+          position: { x: 12, y: -12 },
+          ownerId: element.id,
+        });
+      },
+    },
+  ],
+});

package/src/displaybox/demos/childConstraintsDemo.ts

@@ -0,0 +1,65 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const createChildConstraintState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'parent-box',
+      position: { x: 120, y: 120 },
+      size: { width: 320, height: 220 },
+      shapeId: 'panel',
+    },
+    {
+      id: 'child-inside',
+      position: { x: 30, y: 40 },
+      size: { width: 120, height: 80 },
+      shapeId: 'default',
+      parentId: 'parent-box',
+      moveMode: 'inside',
+    },
+    {
+      id: 'child-border',
+      position: { x: 160, y: 0 },
+      size: { width: 120, height: 80 },
+      shapeId: 'panel',
+      parentId: 'parent-box',
+      moveMode: 'border',
+      anchorCenter: true,
+    },
+  ],
+  ports: [],
+  links: [],
+  texts: [
+    { id: 'parent-label', content: 'Parent', position: { x: 12, y: -16 }, ownerId: 'parent-box' },
+    { id: 'child-inside-label', content: 'Inside', position: { x: 8, y: -14 }, ownerId: 'child-inside' },
+    { id: 'child-border-label', content: 'Border (center)', position: { x: 8, y: -14 }, ownerId: 'child-border' },
+  ],
+});
+
+export const childConstraintsDemoConfig: DemoConfig = ({
+  id: 'child-constraints',
+  title: 'Child Movement Constraints',
+  description: 'Child elements constrained inside or along the parent border (anchor-center on border child).',
+  createState: createChildConstraintState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [
+    {
+      id: 'nudge-border-child',
+      label: 'Nudge border child',
+      run: (editor) => {
+        editor.moveElementTo('child-border', 260, 220);
+      },
+    },
+    {
+      id: 'nudge-inside-child',
+      label: 'Nudge inside child',
+      run: (editor) => {
+        editor.moveElementTo('child-inside', 60, 140);
+      },
+    },
+  ],
+});