orcasvn-react-diagrams 0.2.0 → 0.2.2

package/src/displaybox/demos/AutoLayoutDemoTab.tsx

@@ -0,0 +1,501 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import type { ElementLayout, ElementLayoutMode } 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 { autoLayoutDemoConfig } from './autoLayoutDemo';
+import { gridStageStyle } from './shared';
+
+const parentOptions = [
+  { id: 'layout-row', label: 'Horizontal layout' },
+  { id: 'layout-column', label: 'Vertical layout' },
+  { id: 'layout-nested', label: 'Nested layout' },
+  { id: 'layout-manual', label: 'Manual (compare)' },
+];
+
+const AutoLayoutDemo = () => {
+  const demo = autoLayoutDemoConfig;
+  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 [targetId, setTargetId] = useState<string>(parentOptions[0].id);
+  const [mode, setMode] = useState<ElementLayoutMode>('horizontal');
+  const [align, setAlign] = useState<ElementLayout['align']>('center');
+  const [padding, setPadding] = useState<number>(12);
+  const [gap, setGap] = useState<number>(12);
+  const [childFitMainAxis, setChildFitMainAxis] = useState<ElementLayout['childFitMainAxis']>('none');
+  const [childFitCrossAxis, setChildFitCrossAxis] = useState<ElementLayout['childFitCrossAxis']>('none');
+  const [childFitMinWidth, setChildFitMinWidth] = useState<number | ''>('');
+  const [childFitMinHeight, setChildFitMinHeight] = useState<number | ''>('');
+  const [childFitMaxWidth, setChildFitMaxWidth] = useState<number | ''>('');
+  const [childFitMaxHeight, setChildFitMaxHeight] = useState<number | ''>('');
+  const [lastTrigger, setLastTrigger] = useState<string>('None yet');
+
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return undefined;
+    const disposers = [
+      editor.on('elementMoved', () => setLastTrigger('child moved')),
+      editor.on('elementResized', () => setLastTrigger('child resized')),
+      editor.on('elementDeleted', () => setLastTrigger('child removed')),
+      editor.on('change', () => setLastTrigger((prev) => prev)),
+    ];
+    return () => disposers.forEach((off) => off && off());
+  }, [editorRef]);
+
+  useEffect(() => {
+    if (!diagramState) return;
+    if (selection.length === 1) {
+      const selectedId = selection[0];
+      const exists = diagramState.elements.some((el) => el.id === selectedId);
+      if (exists && selectedId !== targetId) {
+        setTargetId(selectedId);
+      }
+    }
+  }, [selection, diagramState, targetId]);
+
+  useEffect(() => {
+    if (!diagramState) return;
+    const exists = diagramState.elements.some((el) => el.id === targetId);
+    if (!exists) {
+      setTargetId(parentOptions[0].id);
+    }
+  }, [diagramState, targetId]);
+
+  const targetElement = useMemo(
+    () => diagramState?.elements.find((el) => el.id === targetId),
+    [diagramState, targetId],
+  );
+
+  const targetOptions = useMemo(() => {
+    const seen = new Set<string>();
+    const options: Array<{ id: string; label: string }> = [];
+    parentOptions.forEach((option) => {
+      if (!seen.has(option.id)) {
+        options.push(option);
+        seen.add(option.id);
+      }
+    });
+    if (diagramState) {
+      diagramState.elements
+        .filter((el) => (el.layout && el.layout.mode !== 'manual') || el.parentId)
+        .forEach((el) => {
+          if (!seen.has(el.id)) {
+            const modeLabel = el.layout?.mode ?? 'manual';
+            options.push({ id: el.id, label: `${el.id} (${modeLabel})` });
+            seen.add(el.id);
+          }
+        });
+    }
+    if (targetElement && !seen.has(targetElement.id)) {
+      options.push({ id: targetElement.id, label: `${targetElement.id} (selected)` });
+    }
+    return options;
+  }, [diagramState, targetElement]);
+
+  useEffect(() => {
+    const parent = diagramState?.elements.find((el) => el.id === targetId);
+    if (!parent) return;
+    const layout = parent.layout;
+    setMode(layout?.mode ?? 'manual');
+    setAlign(layout?.align ?? 'center');
+    const paddingValue =
+      typeof layout?.padding === 'number'
+        ? layout.padding
+        : layout?.padding
+          ? Math.max(layout.padding.x ?? 0, layout.padding.y ?? 0)
+          : 12;
+    setPadding(paddingValue ?? 12);
+    setGap(layout?.gap ?? 12);
+    setChildFitMainAxis(layout?.childFitMainAxis ?? 'none');
+    setChildFitCrossAxis(layout?.childFitCrossAxis ?? 'none');
+    setChildFitMinWidth(layout?.childFitMinSize?.width ?? '');
+    setChildFitMinHeight(layout?.childFitMinSize?.height ?? '');
+    setChildFitMaxWidth(layout?.childFitMaxSize?.width ?? '');
+    setChildFitMaxHeight(layout?.childFitMaxSize?.height ?? '');
+  }, [diagramState, targetId]);
+
+  const childOrder = useMemo(() => {
+    if (!diagramState) return [];
+    const children = diagramState.elements.filter((el) => el.parentId === targetId);
+    const parent = diagramState.elements.find((el) => el.id === targetId);
+    const axis = parent?.layout?.mode === 'vertical' ? 'y' : 'x';
+    return [...children].sort((a, b) => {
+      const aPos = axis === 'y' ? a.position.y : a.position.x;
+      const bPos = axis === 'y' ? b.position.y : b.position.x;
+      if (aPos === bPos) return a.id.localeCompare(b.id);
+      return aPos - bPos;
+    });
+  }, [diagramState, targetId]);
+
+  const parentSummaries = useMemo(() => {
+    return parentOptions.map((option) => {
+      const parent = diagramState?.elements.find((el) => el.id === option.id);
+      const childCount = diagramState?.elements.filter((el) => el.parentId === option.id).length ?? 0;
+      return {
+        ...option,
+        layoutMode: parent?.layout?.mode ?? 'manual',
+        size: parent?.size ?? { width: 0, height: 0 },
+        childCount,
+      };
+    });
+  }, [diagramState]);
+
+  const handleApplyLayout = () => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    if (!targetElement) return;
+    const childFitMinSize =
+      childFitMinWidth === '' && childFitMinHeight === ''
+        ? undefined
+        : {
+            ...(childFitMinWidth === '' ? {} : { width: childFitMinWidth }),
+            ...(childFitMinHeight === '' ? {} : { height: childFitMinHeight }),
+          };
+    const childFitMaxSize =
+      childFitMaxWidth === '' && childFitMaxHeight === ''
+        ? undefined
+        : {
+            ...(childFitMaxWidth === '' ? {} : { width: childFitMaxWidth }),
+            ...(childFitMaxHeight === '' ? {} : { height: childFitMaxHeight }),
+          };
+    const layout =
+      mode === 'manual'
+        ? { mode: 'manual' as const }
+        : {
+            mode,
+            padding,
+            gap,
+            align: align ?? 'center',
+            childFitMainAxis,
+            childFitCrossAxis,
+            childFitMinSize,
+            childFitMaxSize,
+          };
+    editor.setElementLayout(targetElement.id, layout);
+    setLastTrigger(`layout applied (${mode})`);
+  };
+
+  const handleAddChild = () => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    if (!targetElement) return;
+    const offset = nextOffset();
+    const sizeBump = (offset % 3) * 8;
+    editor.addElement({
+      id: `auto-child-${createId()}`,
+      position: { x: 16 + offset, y: 16 + offset },
+      size: { width: 50 + sizeBump, height: 30 + (offset % 2) * 6 },
+      shapeId: demo.defaultElementShapeId ?? 'default',
+      parentId: targetElement.id,
+    });
+    setLastTrigger('child added');
+  };
+
+  const handleRemoveChild = () => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const children = childOrder;
+    const target = children[children.length - 1];
+    if (target) {
+      editor.removeElement(target.id);
+      setLastTrigger('child removed');
+    }
+  };
+
+  const alignmentLabel =
+    mode === 'horizontal' ? 'Vertical align (top/center/bottom)' : 'Horizontal align (left/center/right)';
+
+  return (
+    <section>
+      <div style={{ marginBottom: 12 }}>
+        <h2 style={{ marginTop: 0, marginBottom: 4 }}>{demo.title}</h2>
+        <p style={{ marginTop: 0 }}>
+          Try horizontal, vertical, nested, and manual layout containers. Select a layout parent directly on the canvas
+          or pick it from the list; the controls below always act on the current selection. Drag, resize, add, or remove
+          children to see automatic reflow. Use fit controls to distribute/stretch child sizes with optional min/max
+          guards. Nested column shows fit propagation boundaries to its parent row.
+        </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: 12, marginBottom: 12 }}>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center' }}>
+          <label htmlFor="parent-select" style={{ fontWeight: 600 }}>
+            Target element (follows selection)
+          </label>
+          <select
+            id="parent-select"
+            value={targetId}
+            onChange={(event) => {
+              const nextId = event.target.value;
+              setTargetId(nextId);
+              if (editorRef.current) {
+                editorRef.current.setSelection([nextId]);
+              }
+            }}
+            style={{ padding: '6px 10px', minWidth: 180 }}
+          >
+            {targetOptions.map((option) => (
+              <option key={option.id} value={option.id}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+
+          <label htmlFor="mode-select" style={{ fontWeight: 600 }}>
+            Layout
+          </label>
+          <select
+            id="mode-select"
+            value={mode}
+            onChange={(event) => setMode(event.target.value as ElementLayoutMode)}
+            style={{ padding: '6px 10px', minWidth: 140 }}
+          >
+            <option value="manual">Manual</option>
+            <option value="horizontal">Horizontal</option>
+            <option value="vertical">Vertical</option>
+          </select>
+
+          <label htmlFor="align-select" style={{ fontWeight: 600 }}>
+            {alignmentLabel}
+          </label>
+          <select
+            id="align-select"
+            value={align ?? 'center'}
+            onChange={(event) => setAlign(event.target.value as ElementLayout['align'])}
+            style={{ padding: '6px 10px', minWidth: 140 }}
+          >
+            <option value="start">{mode === 'horizontal' ? 'Top' : 'Left'}</option>
+            <option value="center">Center</option>
+            <option value="end">{mode === 'horizontal' ? 'Bottom' : 'Right'}</option>
+          </select>
+
+          <label htmlFor="padding-input" style={{ fontWeight: 600 }}>
+            Padding
+          </label>
+          <input
+            id="padding-input"
+            type="number"
+            value={padding}
+            onChange={(event) => setPadding(Number(event.target.value) || 0)}
+            style={{ width: 72, padding: '6px 8px' }}
+            min={0}
+          />
+
+          <label htmlFor="gap-input" style={{ fontWeight: 600 }}>
+            Gap
+          </label>
+          <input
+            id="gap-input"
+            type="number"
+            value={gap}
+            onChange={(event) => setGap(Number(event.target.value) || 0)}
+            style={{ width: 72, padding: '6px 8px' }}
+            min={0}
+          />
+
+          <label htmlFor="fit-main-select" style={{ fontWeight: 600 }}>
+            Main-axis fit
+          </label>
+          <select
+            id="fit-main-select"
+            value={childFitMainAxis ?? 'none'}
+            onChange={(event) => setChildFitMainAxis(event.target.value as ElementLayout['childFitMainAxis'])}
+            style={{ padding: '6px 10px', minWidth: 130 }}
+          >
+            <option value="none">Off</option>
+            <option value="distribute">Distribute</option>
+          </select>
+
+          <label htmlFor="fit-cross-select" style={{ fontWeight: 600 }}>
+            Cross-axis fit
+          </label>
+          <select
+            id="fit-cross-select"
+            value={childFitCrossAxis ?? 'none'}
+            onChange={(event) => setChildFitCrossAxis(event.target.value as ElementLayout['childFitCrossAxis'])}
+            style={{ padding: '6px 10px', minWidth: 130 }}
+          >
+            <option value="none">Off</option>
+            <option value="stretch">Stretch</option>
+          </select>
+
+          <label htmlFor="fit-min-width-input" style={{ fontWeight: 600 }}>
+            Min W/H
+          </label>
+          <div style={{ display: 'inline-flex', gap: 6 }}>
+            <input
+              id="fit-min-width-input"
+              type="number"
+              value={childFitMinWidth}
+              onChange={(event) => setChildFitMinWidth(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0))}
+              style={{ width: 64, padding: '6px 8px' }}
+              min={0}
+              placeholder="w"
+            />
+            <input
+              type="number"
+              value={childFitMinHeight}
+              onChange={(event) => setChildFitMinHeight(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0))}
+              style={{ width: 64, padding: '6px 8px' }}
+              min={0}
+              placeholder="h"
+            />
+          </div>
+
+          <label htmlFor="fit-max-width-input" style={{ fontWeight: 600 }}>
+            Max W/H
+          </label>
+          <div style={{ display: 'inline-flex', gap: 6 }}>
+            <input
+              id="fit-max-width-input"
+              type="number"
+              value={childFitMaxWidth}
+              onChange={(event) => setChildFitMaxWidth(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0))}
+              style={{ width: 64, padding: '6px 8px' }}
+              min={0}
+              placeholder="w"
+            />
+            <input
+              type="number"
+              value={childFitMaxHeight}
+              onChange={(event) => setChildFitMaxHeight(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0))}
+              style={{ width: 64, padding: '6px 8px' }}
+              min={0}
+              placeholder="h"
+            />
+          </div>
+
+          <button type="button" onClick={handleApplyLayout} style={{ padding: '6px 12px', fontWeight: 600 }}>
+            Apply layout
+          </button>
+          <button type="button" onClick={handleAddChild} style={{ padding: '6px 10px' }} disabled={!targetElement}>
+            Add child
+          </button>
+          <button type="button" onClick={handleRemoveChild} style={{ padding: '6px 10px' }} disabled={!targetElement}>
+            Remove last child
+          </button>
+          <span
+            style={{
+              padding: '6px 10px',
+              borderRadius: 8,
+              background: '#f7f7f8',
+              border: '1px solid #e0e0e0',
+              display: 'inline-flex',
+              gap: 6,
+              alignItems: 'center',
+            }}
+          >
+            <span style={{ fontWeight: 600 }}>Target:</span> {targetElement ? targetElement.id : '—'}
+            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#1f4d99', display: 'inline-block' }} />
+            Last trigger: <strong>{lastTrigger}</strong>
+          </span>
+        </div>
+
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+          <div>
+            <div style={{ fontWeight: 600, marginBottom: 6 }}>Child order (based on layout axis)</div>
+            <ol style={{ marginTop: 0, paddingLeft: 18 }}>
+              {childOrder.map((child) => (
+                <li key={child.id} style={{ marginBottom: 4, fontSize: 13 }}>
+                  {child.id} — position ({Math.round(child.position.x)}, {Math.round(child.position.y)}) size (
+                  {child.size.width}×{child.size.height})
+                </li>
+              ))}
+              {childOrder.length === 0 && <li style={{ color: '#555' }}>No children.</li>}
+            </ol>
+            <p style={{ fontSize: 12, color: '#555', marginTop: 4 }}>
+              Drag a child before/after its sibling or resize it. The order above reflects the reflow sequence.
+            </p>
+          </div>
+          <div>
+            <div style={{ fontWeight: 600, marginBottom: 6 }}>Scenario tips</div>
+            <ul style={{ marginTop: 0, paddingLeft: 18, fontSize: 13 }}>
+              <li>Horizontal: try center vs bottom alignment and larger padding.</li>
+              <li>Vertical: see parent grow taller as children stack.</li>
+              <li>Fit main-axis distribute fills inner layout space across siblings.</li>
+              <li>Fit cross-axis stretch extends children across inner cross axis.</li>
+              <li>Min/max fit guards cap distributed or stretched child sizes.</li>
+              <li>Nested: the left column owns its own children and expands the row.</li>
+              <li>Deep bounds: stack-overflow widens the nested column and the outer row.</li>
+              <li>Re-order: drag along the layout axis then apply layout to keep the new order.</li>
+              <li>Select any container on the canvas to target it instantly—controls follow your selection.</li>
+              <li>Manual: switch to manual to compare with auto layout.</li>
+            </ul>
+          </div>
+        </div>
+
+        <div>
+          <div style={{ fontWeight: 600, marginBottom: 6 }}>Parent bounds snapshot</div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 8 }}>
+            {parentSummaries.map((parent) => (
+              <div
+                key={parent.id}
+                style={{
+                  padding: 10,
+                  borderRadius: 8,
+                  border: '1px solid #e0e0e0',
+                  background: '#fafafa',
+                  boxShadow: '0 1px 0 rgba(0,0,0,0.04)',
+                }}
+              >
+                <div style={{ fontWeight: 700 }}>{parent.label}</div>
+                <div style={{ fontSize: 12, color: '#444', marginTop: 2 }}>
+                  Layout: <code>{parent.layoutMode}</code> · {parent.childCount} children
+                </div>
+                <div
+                  style={{
+                    marginTop: 4,
+                    fontFamily:
+                      'ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',
+                    fontSize: 12,
+                  }}
+                >
+                  {Math.round(parent.size.width)} × {Math.round(parent.size.height)} px
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <DisplayBoxStage containerRef={containerRef} stageStyle={gridStageStyle} />
+    </section>
+  );
+};
+
+export default AutoLayoutDemo;

package/src/displaybox/demos/DeletionEventsDemoTab.tsx

@@ -0,0 +1,147 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import type {
+  ElementDeletedEvent,
+  LinkDeletedEvent,
+  PortDeletedEvent,
+  TextDeletedEvent,
+} 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 { deletionEventsDemoConfig } from './deletionEventsDemo';
+
+type EventPayloads = {
+  elementDeleted: ElementDeletedEvent | null;
+  portDeleted: PortDeletedEvent | null;
+  linkDeleted: LinkDeletedEvent | null;
+  textDeleted: TextDeletedEvent | null;
+};
+
+const initialPayloads: EventPayloads = {
+  elementDeleted: null,
+  portDeleted: null,
+  linkDeleted: null,
+  textDeleted: null,
+};
+
+const eventBoxStyle: React.CSSProperties = {
+  width: '100%',
+  minHeight: 130,
+  padding: '8px 10px',
+  borderRadius: 8,
+  border: '1px solid #d0d5dd',
+  background: '#fff',
+  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace',
+  fontSize: 12,
+  resize: 'vertical',
+};
+
+const DeletionEventsDemo = () => {
+  const demo = deletionEventsDemoConfig;
+  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 [payloads, setPayloads] = useState<EventPayloads>(initialPayloads);
+
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return undefined;
+    setPayloads(initialPayloads);
+    const unsubs = [
+      editor.on('elementDeleted', (payload) => setPayloads((prev) => ({ ...prev, elementDeleted: payload }))),
+      editor.on('portDeleted', (payload) => setPayloads((prev) => ({ ...prev, portDeleted: payload }))),
+      editor.on('linkDeleted', (payload) => setPayloads((prev) => ({ ...prev, linkDeleted: payload }))),
+      editor.on('textDeleted', (payload) => setPayloads((prev) => ({ ...prev, textDeleted: payload }))),
+    ];
+    return () => {
+      unsubs.forEach((unsub) => unsub());
+    };
+  }, [editorRef]);
+
+  const hasPort = (diagramState?.ports ?? []).some((port) => port.id === 'delete-source-free-port');
+  const hasLink = (diagramState?.links ?? []).some((link) => link.id === 'delete-link');
+  const hasText = (diagramState?.texts ?? []).some((text) => text.id === 'delete-free-text');
+  const hasCascadeElement = (diagramState?.elements ?? []).some((element) => element.id === 'delete-source');
+
+  return (
+    <section>
+      <div style={{ marginBottom: 12 }}>
+        <h2 style={{ marginTop: 0, marginBottom: 4 }}>{demo.title}</h2>
+        <p style={{ marginTop: 0 }}>
+          Use direct delete buttons for port/link/text, then delete <code>delete-source</code> to trigger cascade
+          removals. Latest payloads are shown below for integration debugging.
+        </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: 12, marginBottom: 12 }}>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+          <button type="button" onClick={() => editorRef.current?.removePort('delete-source-free-port')} disabled={!hasPort}>
+            Delete Port
+          </button>
+          <button type="button" onClick={() => editorRef.current?.removeLink('delete-link')} disabled={!hasLink}>
+            Delete Link
+          </button>
+          <button type="button" onClick={() => editorRef.current?.removeText('delete-free-text')} disabled={!hasText}>
+            Delete Text
+          </button>
+          <button type="button" onClick={() => editorRef.current?.removeElement('delete-source')} disabled={!hasCascadeElement}>
+            Delete Element (Cascade)
+          </button>
+        </div>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 12 }}>
+          <div>
+            <label style={{ display: 'block', fontWeight: 600, marginBottom: 6 }}>elementDeleted</label>
+            <textarea readOnly value={payloads.elementDeleted ? JSON.stringify(payloads.elementDeleted, null, 2) : ''} style={eventBoxStyle} />
+          </div>
+          <div>
+            <label style={{ display: 'block', fontWeight: 600, marginBottom: 6 }}>portDeleted</label>
+            <textarea readOnly value={payloads.portDeleted ? JSON.stringify(payloads.portDeleted, null, 2) : ''} style={eventBoxStyle} />
+          </div>
+          <div>
+            <label style={{ display: 'block', fontWeight: 600, marginBottom: 6 }}>linkDeleted</label>
+            <textarea readOnly value={payloads.linkDeleted ? JSON.stringify(payloads.linkDeleted, null, 2) : ''} style={eventBoxStyle} />
+          </div>
+          <div>
+            <label style={{ display: 'block', fontWeight: 600, marginBottom: 6 }}>textDeleted</label>
+            <textarea readOnly value={payloads.textDeleted ? JSON.stringify(payloads.textDeleted, null, 2) : ''} style={eventBoxStyle} />
+          </div>
+        </div>
+      </div>
+      <DisplayBoxStage containerRef={containerRef} />
+    </section>
+  );
+};
+
+export default DeletionEventsDemo;