orcasvn-react-diagrams 0.2.0 → 0.2.2

package/src/displaybox/demos/ShapeHoverControlsDemoTab.tsx

@@ -0,0 +1,558 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { EllipseMidPoint } from '../../api';
+import type {
+  DiagramEditorHandle,
+  DiagramState,
+  ElementShapeHoverControlInteractionEvent,
+  ElementShapeHoverControls,
+  Point,
+  PortData,
+  ShapeControlVisibilityTrigger,
+} 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 { createId } from '../../utils/ids';
+import { shapeHoverControlsDemoConfig, shapeHoverDemoIds } from './shapeHoverControlsDemo';
+
+const EDGE_ICON_PATH = 'M8 1 A7 7 0 1 1 7.999 1 M8 4 L8 12 M4 8 L12 8';
+const MIDPOINT_ICON_PATH = 'M2 8 H14 M8 2 V14 M4 4 L12 12 M12 4 L4 12';
+const VERTEX_ICON_PATH = 'M2 8 H14 M8 2 V14';
+const ELLIPSE_MIDPOINT_ICON_PATH = 'M3 8 H13 M8 3 V13 M3 8 A5 5 0 1 1 13 8 A5 5 0 1 1 3 8';
+const ellipseMidPointOrder: EllipseMidPoint[] = [
+  EllipseMidPoint.top,
+  EllipseMidPoint.right,
+  EllipseMidPoint.bottom,
+  EllipseMidPoint.left,
+];
+
+type TriggerMode = 'target-hover' | 'element-hover' | 'both';
+type IndexedHoverControlState = {
+  enabled: boolean;
+  triggerMode: TriggerMode;
+  indicesInput: string;
+  allowAllTargets: boolean;
+};
+type EllipseMidPointControlState = {
+  enabled: boolean;
+  triggerMode: TriggerMode;
+  allowAllTargets: boolean;
+  selectedMidPoints: Record<EllipseMidPoint, boolean>;
+};
+
+const toVisibilityTriggers = (mode: TriggerMode): ShapeControlVisibilityTrigger[] =>
+  mode === 'both' ? ['target-hover', 'element-hover'] : [mode];
+
+const parseIndices = (input: string): number[] | undefined => {
+  const values = input
+    .split(',')
+    .map((entry) => Number(entry.trim()))
+    .filter((entry) => Number.isInteger(entry) && entry >= 0);
+  const unique = Array.from(new Set(values));
+  return unique.length ? unique : undefined;
+};
+
+const resolveSelectedEllipseMidPoints = (
+  state: EllipseMidPointControlState,
+): EllipseMidPoint[] =>
+  ellipseMidPointOrder.filter((value) => state.selectedMidPoints[value]);
+
+const toEllipseMidPointSelector = (
+  selectedMidPoints: EllipseMidPoint[],
+): EllipseMidPoint | EllipseMidPoint[] | undefined => {
+  if (!selectedMidPoints.length) return undefined;
+  if (selectedMidPoints.length === 1) return selectedMidPoints[0];
+  return selectedMidPoints;
+};
+
+const buildShapeHoverControls = (
+  edgeState: IndexedHoverControlState,
+  midpointState: IndexedHoverControlState,
+  vertexState: IndexedHoverControlState,
+  ellipseMidPointState: EllipseMidPointControlState,
+): ElementShapeHoverControls | undefined => {
+  const controls: NonNullable<ElementShapeHoverControls['controls']> = [];
+  if (edgeState.enabled) {
+    controls.push({
+      id: 'drawer-edge-add-child',
+      targetKind: 'edge' as const,
+      targetIndices: parseIndices(edgeState.indicesInput),
+      allowAllTargets: edgeState.allowAllTargets,
+      visibilityTriggers: toVisibilityTriggers(edgeState.triggerMode),
+      tolerance: 12,
+      lineStyle: { stroke: '#ff7a00', strokeWidth: 3 },
+      icon: {
+        svgPath: EDGE_ICON_PATH,
+        size: { width: 16, height: 16 },
+        style: { fill: '#ffffff', stroke: '#ff7a00', strokeWidth: 2 },
+      },
+    });
+  }
+  if (midpointState.enabled) {
+    controls.push({
+      id: 'midpoint-drag-log',
+      targetKind: 'midpoint' as const,
+      targetIndices: parseIndices(midpointState.indicesInput),
+      allowAllTargets: midpointState.allowAllTargets,
+      visibilityTriggers: toVisibilityTriggers(midpointState.triggerMode),
+      tolerance: 12,
+      icon: {
+        svgPath: MIDPOINT_ICON_PATH,
+        size: { width: 16, height: 16 },
+        style: { fill: '#ffffff', stroke: '#2b6f99', strokeWidth: 1.8 },
+      },
+    });
+  }
+  if (vertexState.enabled) {
+    controls.push({
+      id: 'diamond-vertex-link',
+      targetKind: 'vertex' as const,
+      targetIndices: parseIndices(vertexState.indicesInput),
+      allowAllTargets: vertexState.allowAllTargets,
+      visibilityTriggers: toVisibilityTriggers(vertexState.triggerMode),
+      tolerance: 14,
+      icon: {
+        svgPath: VERTEX_ICON_PATH,
+        size: { width: 16, height: 16 },
+        style: { fill: 'none', stroke: '#6b3fa0', strokeWidth: 2, lineCap: 'round' },
+      },
+    });
+  }
+  if (ellipseMidPointState.enabled) {
+    controls.push({
+      id: 'ellipse-midpoint-log',
+      targetKind: 'ellipse-midpoint' as const,
+      ellipseMidPoints: toEllipseMidPointSelector(resolveSelectedEllipseMidPoints(ellipseMidPointState)),
+      allowAllTargets: ellipseMidPointState.allowAllTargets,
+      visibilityTriggers: toVisibilityTriggers(ellipseMidPointState.triggerMode),
+      tolerance: 14,
+      icon: {
+        svgPath: ELLIPSE_MIDPOINT_ICON_PATH,
+        size: { width: 16, height: 16 },
+        style: { fill: '#ffffff', stroke: '#0f766e', strokeWidth: 1.8 },
+      },
+    });
+  }
+  return controls.length ? { controls } : undefined;
+};
+
+const resolveElementWorldRect = (state: DiagramState, elementId: string) => {
+  const element = state.elements.find((item) => item.id === elementId);
+  if (!element) return null;
+  return {
+    element,
+    rect: {
+      x: element.position.x,
+      y: element.position.y,
+      width: element.size.width,
+      height: element.size.height,
+    },
+  };
+};
+
+const ensureBorderPort = (
+  editor: DiagramEditorHandle,
+  state: DiagramState,
+  elementId: string,
+  worldPoint: Point,
+): string => {
+  const existing = state.ports.find((port) => port.elementId === elementId);
+  if (existing) {
+    return existing.id;
+  }
+  const portId = `hover-port-${createId()}`;
+  const port: PortData = {
+    id: portId,
+    elementId,
+    position: { x: 0, y: 0 },
+    shapeId: 'port-dark',
+    moveMode: 'border',
+    anchorCenter: true,
+    orientToHostBorder: true,
+  };
+  editor.addPortToElement(elementId, port);
+  editor.movePortTo(portId, worldPoint.x, worldPoint.y);
+  return portId;
+};
+
+const ShapeHoverControlsDemo = () => {
+  const demo = shapeHoverControlsDemoConfig;
+  const [edgeState, setEdgeState] = useState<IndexedHoverControlState>({
+    enabled: true,
+    triggerMode: 'target-hover',
+    indicesInput: '2',
+    allowAllTargets: false,
+  });
+  const [midpointState, setMidpointState] = useState<IndexedHoverControlState>({
+    enabled: true,
+    triggerMode: 'target-hover',
+    indicesInput: '2',
+    allowAllTargets: false,
+  });
+  const [vertexState, setVertexState] = useState<IndexedHoverControlState>({
+    enabled: true,
+    triggerMode: 'target-hover',
+    indicesInput: '1',
+    allowAllTargets: false,
+  });
+  const [ellipseMidPointState, setEllipseMidPointState] = useState<EllipseMidPointControlState>({
+    enabled: true,
+    triggerMode: 'target-hover',
+    allowAllTargets: false,
+    selectedMidPoints: {
+      [EllipseMidPoint.top]: true,
+      [EllipseMidPoint.right]: false,
+      [EllipseMidPoint.bottom]: true,
+      [EllipseMidPoint.left]: false,
+    },
+  });
+  const [eventLog, setEventLog] = useState<string[]>([]);
+  const [eventCounts, setEventCounts] = useState({ click: 0, dragStart: 0, dragMove: 0, dragEnd: 0 });
+  const editorHandleRef = useRef<DiagramEditorHandle | null>(null);
+  const nextOffset = useOffsetSequence();
+  const actionHelpers: DemoActionHelpers = useMemo(() => ({ nextOffset }), [nextOffset]);
+  const initialHoverControls = useMemo(
+    () =>
+      buildShapeHoverControls(
+        { enabled: true, triggerMode: 'target-hover', indicesInput: '2', allowAllTargets: false },
+        { enabled: true, triggerMode: 'target-hover', indicesInput: '2', allowAllTargets: false },
+        { enabled: true, triggerMode: 'target-hover', indicesInput: '1', allowAllTargets: false },
+        {
+          enabled: true,
+          triggerMode: 'target-hover',
+          allowAllTargets: false,
+          selectedMidPoints: {
+            [EllipseMidPoint.top]: true,
+            [EllipseMidPoint.right]: false,
+            [EllipseMidPoint.bottom]: true,
+            [EllipseMidPoint.left]: false,
+          },
+        },
+      ),
+    [],
+  );
+
+  const onControlInteraction = useCallback((event: ElementShapeHoverControlInteractionEvent) => {
+    const editor = editorHandleRef.current;
+    if (!editor) return;
+    const currentState = editor.getState();
+    const dragDelta = event.drag ? `${event.drag.delta.x.toFixed(1)},${event.drag.delta.y.toFixed(1)}` : '-';
+    const ellipseMidPoint = event.ellipseMidPoint ? ` | ellipseMidPoint=${event.ellipseMidPoint}` : '';
+    const entry = `${event.eventType} | ${event.controlId} | ${event.targetKind}[${event.targetIndex}]${ellipseMidPoint} | delta=${dragDelta}`;
+    setEventLog((prev) => [entry, ...prev].slice(0, 10));
+    setEventCounts((prev) => ({
+      click: prev.click + (event.eventType === 'click' ? 1 : 0),
+      dragStart: prev.dragStart + (event.eventType === 'drag-start' ? 1 : 0),
+      dragMove: prev.dragMove + (event.eventType === 'drag-move' ? 1 : 0),
+      dragEnd: prev.dragEnd + (event.eventType === 'drag-end' ? 1 : 0),
+    }));
+
+    if (event.eventType !== 'click') return;
+    if (event.controlId === 'drawer-edge-add-child' && event.elementId === shapeHoverDemoIds.drawer && event.edge) {
+      const drawer = currentState.elements.find((element) => element.id === shapeHoverDemoIds.drawer);
+      if (!drawer) return;
+      const childCount = currentState.elements.filter((element) => element.parentId === shapeHoverDemoIds.drawer).length;
+      const id = `hover-child-${createId()}`;
+      const col = childCount % 3;
+      const row = Math.floor(childCount / 3);
+      editor.addElement({
+        id,
+        parentId: shapeHoverDemoIds.drawer,
+        position: { x: 24 + col * 116, y: 150 + row * 54 },
+        size: { width: 100, height: 44 },
+        shapeId: 'default',
+      });
+      editor.addText({
+        id: `hover-child-label-${createId()}`,
+        ownerId: id,
+        content: `Child ${childCount + 1}`,
+        position: { x: 8, y: 12 },
+        style: { fontSize: 12, fontFamily: 'sans-serif' },
+      });
+      editor.setSelection([id]);
+      return;
+    }
+    if (event.controlId !== 'diamond-vertex-link' || event.elementId !== shapeHoverDemoIds.diamond) {
+      return;
+    }
+    const sourcePoint = event.vertex?.position;
+    if (!sourcePoint) return;
+    const targetInfo = resolveElementWorldRect(currentState, shapeHoverDemoIds.target);
+    if (!targetInfo) return;
+    const targetPoint = {
+      x: targetInfo.rect.x,
+      y: targetInfo.rect.y + targetInfo.rect.height / 2,
+    };
+    const sourcePortId = ensureBorderPort(editor, currentState, shapeHoverDemoIds.diamond, sourcePoint);
+    const stateAfterSource = editor.getState();
+    const targetPortId = ensureBorderPort(editor, stateAfterSource, shapeHoverDemoIds.target, targetPoint);
+    const latestState = editor.getState();
+    const alreadyLinked = latestState.links.some(
+      (link) => link.sourcePortId === sourcePortId && link.targetPortId === targetPortId,
+    );
+    if (alreadyLinked) return;
+    const linkId = `hover-link-${createId()}`;
+    editor.addLink({
+      id: linkId,
+      sourcePortId,
+      targetPortId,
+      points: [],
+    });
+    editor.setSelection([linkId]);
+  }, []);
+
+  const { containerRef, editorRef, diagramState, selection, snapEnabled, setSnapEnabled } = useDemoEditor({
+    createState: demo.createState,
+    elementShapes: demo.elementShapes,
+    portShapes: demo.portShapes,
+    elementShapeHoverControls: initialHoverControls,
+    onElementShapeHoverControlInteraction: onControlInteraction,
+  });
+  editorHandleRef.current = editorRef.current;
+
+  const controls = useDemoControls({
+    demo,
+    editorRef,
+    diagramState,
+    selection,
+    snapEnabled,
+    setSnapEnabled,
+    actionHelpers,
+  });
+
+  const runtimeHoverControls = useMemo(
+    () => buildShapeHoverControls(edgeState, midpointState, vertexState, ellipseMidPointState),
+    [edgeState, midpointState, vertexState, ellipseMidPointState],
+  );
+
+  React.useEffect(() => {
+    editorRef.current?.setElementShapeHoverControls(runtimeHoverControls);
+  }, [editorRef, runtimeHoverControls]);
+
+  const drawerChildCount = useMemo(() => {
+    if (!diagramState) return 0;
+    return diagramState.elements.filter((element) => element.parentId === shapeHoverDemoIds.drawer).length;
+  }, [diagramState]);
+
+  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}
+      />
+      <div
+        style={{
+          marginBottom: 12,
+          padding: '10px 12px',
+          border: '1px solid #d9e1ec',
+          borderRadius: 8,
+          background: '#fbfdff',
+        }}
+      >
+        <div style={{ fontWeight: 600, marginBottom: 6 }}>How To Verify</div>
+        <div style={{ fontSize: 13, color: '#2d3a4d', marginBottom: 8 }}>
+          Switch each control between target-hover, element-hover, and both. Use index selectors (0-based) or enable
+          allow-all to control eligibility. Click drawer edge control to add children and click diamond vertex control to
+          create the link. Use ellipse-midpoint selectors to target top/right/bottom/left on the ellipse and circle hosts.
+          Drag any visible control icon to inspect drag-start/move/end payload behavior.
+        </div>
+        <div style={{ fontSize: 12, color: '#4d5a70', marginBottom: 8 }}>
+          Shape validity note: edge/midpoint index controls are available for rectangle/polygon hover geometry.
+          ellipse-midpoint controls are available for circle/ellipse only; the rectangle sample remains a safe no-op.
+        </div>
+        <div style={{ display: 'grid', gap: 8, gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))' }}>
+          <HoverControlSection
+            title="Edge Control"
+            state={edgeState}
+            onChange={setEdgeState}
+            toggleLabel={edgeState.enabled ? 'Disable Edge Control' : 'Enable Edge Control'}
+          />
+          <HoverControlSection
+            title="Midpoint Control"
+            state={midpointState}
+            onChange={setMidpointState}
+            toggleLabel={midpointState.enabled ? 'Disable Midpoint Control' : 'Enable Midpoint Control'}
+          />
+          <HoverControlSection
+            title="Vertex Control"
+            state={vertexState}
+            onChange={setVertexState}
+            toggleLabel={vertexState.enabled ? 'Disable Vertex Control' : 'Enable Vertex Control'}
+          />
+          <EllipseMidPointControlSection
+            title="Ellipse Midpoint Control"
+            state={ellipseMidPointState}
+            onChange={setEllipseMidPointState}
+            toggleLabel={ellipseMidPointState.enabled ? 'Disable Ellipse Midpoint Control' : 'Enable Ellipse Midpoint Control'}
+          />
+        </div>
+        <div style={{ marginTop: 10, fontSize: 13 }}>
+          Drawer child count: {drawerChildCount} | Click: {eventCounts.click} | Drag start/move/end:{' '}
+          {eventCounts.dragStart}/{eventCounts.dragMove}/{eventCounts.dragEnd}
+        </div>
+        <div style={{ marginTop: 8, fontSize: 12, color: '#2d3a4d' }}>
+          <strong>Latest control events:</strong>
+          <pre
+            style={{
+              marginTop: 6,
+              padding: 8,
+              maxHeight: 140,
+              overflow: 'auto',
+              background: '#ffffff',
+              border: '1px solid #d9e1ec',
+              borderRadius: 6,
+              whiteSpace: 'pre-wrap',
+            }}
+          >
+            {eventLog.length ? eventLog.join('\n') : 'No events yet'}
+          </pre>
+        </div>
+      </div>
+      <DisplayBoxStage containerRef={containerRef} />
+    </section>
+  );
+};
+
+const HoverControlSection = ({
+  title,
+  state,
+  onChange,
+  toggleLabel,
+}: {
+  title: string;
+  state: IndexedHoverControlState;
+  onChange: React.Dispatch<React.SetStateAction<IndexedHoverControlState>>;
+  toggleLabel: string;
+}) => (
+  <div style={{ border: '1px solid #d9e1ec', borderRadius: 6, padding: 8, background: '#ffffff' }}>
+    <div style={{ fontWeight: 600, marginBottom: 6 }}>{title}</div>
+    <button
+      type="button"
+      onClick={() => onChange((prev) => ({ ...prev, enabled: !prev.enabled }))}
+      style={{ marginBottom: 6, padding: '6px 10px' }}
+    >
+      {toggleLabel}
+    </button>
+    <div style={{ display: 'grid', gap: 6 }}>
+      <label style={{ fontSize: 12 }}>
+        Trigger mode
+        <select
+          value={state.triggerMode}
+          onChange={(event) => onChange((prev) => ({ ...prev, triggerMode: event.target.value as TriggerMode }))}
+          style={{ marginLeft: 8 }}
+        >
+          <option value="target-hover">target-hover</option>
+          <option value="element-hover">element-hover</option>
+          <option value="both">both</option>
+        </select>
+      </label>
+      <label style={{ fontSize: 12 }}>
+        Target indices (CSV)
+        <input
+          value={state.indicesInput}
+          onChange={(event) => onChange((prev) => ({ ...prev, indicesInput: event.target.value }))}
+          placeholder="example: 0,2"
+          style={{ marginLeft: 8, width: 120 }}
+        />
+      </label>
+      <label style={{ fontSize: 12 }}>
+        <input
+          type="checkbox"
+          checked={state.allowAllTargets}
+          onChange={(event) => onChange((prev) => ({ ...prev, allowAllTargets: event.target.checked }))}
+          style={{ marginRight: 6 }}
+        />
+        allowAllTargets
+      </label>
+    </div>
+  </div>
+);
+
+const EllipseMidPointControlSection = ({
+  title,
+  state,
+  onChange,
+  toggleLabel,
+}: {
+  title: string;
+  state: EllipseMidPointControlState;
+  onChange: React.Dispatch<React.SetStateAction<EllipseMidPointControlState>>;
+  toggleLabel: string;
+}) => (
+  <div style={{ border: '1px solid #d9e1ec', borderRadius: 6, padding: 8, background: '#ffffff' }}>
+    <div style={{ fontWeight: 600, marginBottom: 6 }}>{title}</div>
+    <button
+      type="button"
+      onClick={() => onChange((prev) => ({ ...prev, enabled: !prev.enabled }))}
+      style={{ marginBottom: 6, padding: '6px 10px' }}
+    >
+      {toggleLabel}
+    </button>
+    <div style={{ display: 'grid', gap: 6 }}>
+      <label style={{ fontSize: 12 }}>
+        Trigger mode
+        <select
+          value={state.triggerMode}
+          onChange={(event) => onChange((prev) => ({ ...prev, triggerMode: event.target.value as TriggerMode }))}
+          style={{ marginLeft: 8 }}
+        >
+          <option value="target-hover">target-hover</option>
+          <option value="element-hover">element-hover</option>
+          <option value="both">both</option>
+        </select>
+      </label>
+      <label style={{ fontSize: 12 }}>
+        <input
+          type="checkbox"
+          checked={state.allowAllTargets}
+          onChange={(event) => onChange((prev) => ({ ...prev, allowAllTargets: event.target.checked }))}
+          style={{ marginRight: 6 }}
+        />
+        allowAllTargets
+      </label>
+      <div style={{ fontSize: 12 }}>
+        Enum targets
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 4 }}>
+        {ellipseMidPointOrder.map((midPoint) => (
+          <label key={midPoint} style={{ fontSize: 12 }}>
+            <input
+              type="checkbox"
+              checked={state.selectedMidPoints[midPoint]}
+              onChange={(event) =>
+                onChange((prev) => ({
+                  ...prev,
+                  selectedMidPoints: {
+                    ...prev.selectedMidPoints,
+                    [midPoint]: event.target.checked,
+                  },
+                }))
+              }
+              style={{ marginRight: 6 }}
+            />
+            {midPoint}
+          </label>
+        ))}
+      </div>
+    </div>
+  </div>
+);
+
+export default ShapeHoverControlsDemo;

package/src/displaybox/demos/SimpleDemo.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import DisplayBoxControls from '../DisplayBoxControls';
+import DisplayBoxStage from '../DisplayBoxStage';
+import useDemoControls from '../useDemoControls';
+import useDemoEditor from '../useDemoEditor';
+import useOffsetSequence from '../useOffsetSequence';
+import type { DemoConfig, DemoActionHelpers } from '../types';
+
+type SimpleDemoProps = {
+  demo: DemoConfig;
+  beforeStage?: React.ReactNode;
+  stageHandlers?: {
+    onDragOver?: (event: React.DragEvent<HTMLDivElement>) => void;
+    onDragLeave?: () => void;
+    onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
+  };
+};
+
+const SimpleDemo = ({ demo, beforeStage, stageHandlers }: SimpleDemoProps) => {
+  const { containerRef, editorRef, diagramState, selection, snapEnabled, setSnapEnabled } = useDemoEditor({
+    createState: demo.createState,
+    elementShapes: demo.elementShapes,
+    portShapes: demo.portShapes,
+    router: demo.router,
+    snapDefault: demo.snapDefault,
+  });
+
+  const nextOffset = useOffsetSequence();
+  const actionHelpers: DemoActionHelpers = React.useMemo(() => ({ nextOffset }), [nextOffset]);
+
+  const controls = useDemoControls({
+    demo,
+    editorRef,
+    diagramState,
+    selection,
+    snapEnabled,
+    setSnapEnabled,
+    actionHelpers,
+  });
+
+  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}
+      />
+      {beforeStage}
+      <DisplayBoxStage
+        containerRef={containerRef}
+        onDragOver={stageHandlers?.onDragOver}
+        onDragLeave={stageHandlers?.onDragLeave}
+        onDrop={stageHandlers?.onDrop}
+        stageStyle={demo.stageStyle}
+      />
+    </section>
+  );
+};
+
+export default SimpleDemo;