orcasvn-react-diagrams 0.2.2 → 0.2.3

package/src/displaybox/demos/EventHandlersDemoTab.tsx

@@ -82,6 +82,10 @@ const EventHandlersDemo = () => {
         onManualRender={controls.handleManualRender}
         onToggleLinkRouting={controls.handleToggleLinkRouting}
         onAction={controls.handleAction}
+        onExportImage={controls.handleExportImage}
+        onClearExportPreview={controls.handleClearExportPreview}
+        exportPreviewDataUrl={controls.exportPreviewDataUrl}
+        exportError={controls.exportError}
       />
       <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 12 }}>
         <label htmlFor="event-handler-select" style={{ fontWeight: 600 }}>
@@ -108,3 +112,4 @@ const EventHandlersDemo = () => {
 };
 
 export default EventHandlersDemo;
+

package/src/displaybox/demos/ExternalDragDropDemoTab.tsx

@@ -167,6 +167,10 @@ const ExternalDragDropDemo = () => {
         onManualRender={controls.handleManualRender}
         onToggleLinkRouting={controls.handleToggleLinkRouting}
         onAction={controls.handleAction}
+        onExportImage={controls.handleExportImage}
+        onClearExportPreview={controls.handleClearExportPreview}
+        exportPreviewDataUrl={controls.exportPreviewDataUrl}
+        exportError={controls.exportError}
       />
       <div style={{ display: 'flex', gap: 16, marginBottom: 12, alignItems: 'stretch' }}>
         <div
@@ -259,3 +263,4 @@ const ExternalDragDropDemo = () => {
 };
 
 export default ExternalDragDropDemo;
+

package/src/displaybox/demos/LayoutLabelReservedSpaceDemoTab.tsx

@@ -0,0 +1,291 @@
+import React, { useMemo, useState } from 'react';
+import type {
+  DiagramState,
+  ElementLayout,
+  ElementLayoutChildFitCrossAxis,
+  ElementLayoutChildFitMainAxis,
+  ElementLayoutLabelReservedSpaceMode,
+} 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 { gridStageStyle } from './shared';
+import { layoutLabelReservedSpaceDemoConfig, layoutReservedDemoIds } from './layoutLabelReservedSpaceDemo';
+
+const shortLabel = 'Parent label lane demo';
+const longLabel =
+  'Parent label lane demo with long wrapped content that expands height and pushes children lower in flexible mode.';
+
+const clamp = (value: number, min: number, max: number): number => Math.max(min, Math.min(max, value));
+
+const resolveLaneFromState = (state: DiagramState, parentId: string): number => {
+  const parent = state.elements.find((element) => element.id === parentId);
+  const policy = parent?.layout?.labelReservedSpace;
+  if (!parent || !policy) return 0;
+  const mode = policy.mode ?? 'none';
+  if (mode === 'none') return 0;
+  let lane = 0;
+  if (mode === 'fixed') {
+    lane = Math.max(0, policy.size ?? 0);
+  } else {
+    state.texts.forEach((text) => {
+      if (text.ownerId !== parentId) return;
+      const offsetY = text.displayOffset?.y ?? 0;
+      const height = text.displayClipSize?.height ?? text.size?.height ?? 0;
+      lane = Math.max(lane, text.position.y + offsetY + height);
+    });
+  }
+  const minSize = Math.max(0, policy.minSize ?? 0);
+  const maxSize = policy.maxSize !== undefined ? Math.max(minSize, policy.maxSize) : Number.POSITIVE_INFINITY;
+  return clamp(lane, minSize, maxSize);
+};
+
+const LayoutLabelReservedSpaceDemo = () => {
+  const demo = layoutLabelReservedSpaceDemoConfig;
+  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 [mode, setMode] = useState<ElementLayoutLabelReservedSpaceMode>('none');
+  const [fixedSize, setFixedSize] = useState(32);
+  const [minSize, setMinSize] = useState<number | ''>('');
+  const [maxSize, setMaxSize] = useState<number | ''>('');
+  const [childFitMainAxis, setChildFitMainAxis] = useState<ElementLayoutChildFitMainAxis>('none');
+  const [childFitCrossAxis, setChildFitCrossAxis] = useState<ElementLayoutChildFitCrossAxis>('none');
+
+  const parent = useMemo(
+    () => diagramState?.elements.find((element) => element.id === layoutReservedDemoIds.parent),
+    [diagramState],
+  );
+
+  const effectiveLane = useMemo(() => {
+    if (!diagramState) return 0;
+    return resolveLaneFromState(diagramState, layoutReservedDemoIds.parent);
+  }, [diagramState]);
+
+  const childBounds = useMemo(() => {
+    if (!parent) return { x: 0, y: 0, width: 0, height: 0 };
+    const paddingRaw = parent.layout?.padding ?? 12;
+    const padding = typeof paddingRaw === 'number' ? paddingRaw : Math.max(paddingRaw.x ?? 0, paddingRaw.y ?? 0);
+    return {
+      x: padding,
+      y: padding + effectiveLane,
+      width: Math.max(0, parent.size.width - padding * 2),
+      height: Math.max(0, parent.size.height - padding * 2 - effectiveLane),
+    };
+  }, [parent, effectiveLane]);
+
+  const applyLayout = () => {
+    if (!editorRef.current) return;
+    const labelReservedSpace: NonNullable<ElementLayout['labelReservedSpace']> = {
+      mode,
+      placement: 'top',
+      ...(mode === 'fixed' ? { size: fixedSize } : {}),
+      ...(minSize === '' ? {} : { minSize }),
+      ...(maxSize === '' ? {} : { maxSize }),
+    };
+    editorRef.current.setElementLayout(layoutReservedDemoIds.parent, {
+      mode: 'horizontal',
+      padding: 12,
+      gap: 10,
+      align: 'start',
+      childFitMainAxis,
+      childFitCrossAxis,
+      labelReservedSpace,
+    });
+  };
+
+  const setLabelContent = (value: string) => {
+    editorRef.current?.updateText(layoutReservedDemoIds.parentLabel, value);
+  };
+
+  const children = useMemo(() => {
+    if (!diagramState) return [];
+    return diagramState.elements.filter((element) => element.parentId === layoutReservedDemoIds.parent);
+  }, [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}
+        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: 8 }}>Scenario controls</div>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center', marginBottom: 10 }}>
+          <label style={{ fontSize: 13 }}>
+            Mode
+            <select value={mode} onChange={(event) => setMode(event.target.value as ElementLayoutLabelReservedSpaceMode)} style={{ marginLeft: 8 }}>
+              <option value="none">none</option>
+              <option value="fixed">fixed</option>
+              <option value="flexible">flexible</option>
+            </select>
+          </label>
+          <label style={{ fontSize: 13 }}>
+            Fixed size
+            <input
+              type="number"
+              value={fixedSize}
+              onChange={(event) => setFixedSize(Math.max(0, Number(event.target.value) || 0))}
+              style={{ width: 74, marginLeft: 8 }}
+              min={0}
+            />
+          </label>
+          <label style={{ fontSize: 13 }}>
+            Min
+            <input
+              type="number"
+              value={minSize}
+              onChange={(event) => setMinSize(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0))}
+              style={{ width: 74, marginLeft: 8 }}
+              min={0}
+            />
+          </label>
+          <label style={{ fontSize: 13 }}>
+            Max
+            <input
+              type="number"
+              value={maxSize}
+              onChange={(event) => setMaxSize(event.target.value === '' ? '' : Math.max(0, Number(event.target.value) || 0))}
+              style={{ width: 74, marginLeft: 8 }}
+              min={0}
+            />
+          </label>
+          <label style={{ fontSize: 13 }}>
+            Main-axis fit
+            <select
+              value={childFitMainAxis}
+              onChange={(event) => setChildFitMainAxis(event.target.value as ElementLayoutChildFitMainAxis)}
+              style={{ marginLeft: 8 }}
+            >
+              <option value="none">none</option>
+              <option value="distribute">distribute</option>
+            </select>
+          </label>
+          <label style={{ fontSize: 13 }}>
+            Cross-axis fit
+            <select
+              value={childFitCrossAxis}
+              onChange={(event) => setChildFitCrossAxis(event.target.value as ElementLayoutChildFitCrossAxis)}
+              style={{ marginLeft: 8 }}
+            >
+              <option value="none">none</option>
+              <option value="stretch">stretch</option>
+            </select>
+          </label>
+          <button type="button" onClick={applyLayout} style={{ padding: '6px 12px', fontWeight: 600 }}>
+            Apply
+          </button>
+        </div>
+
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 10 }}>
+          <button type="button" onClick={() => setLabelContent(shortLabel)} style={{ padding: '6px 10px' }}>
+            Flexible label: short
+          </button>
+          <button type="button" onClick={() => setLabelContent(longLabel)} style={{ padding: '6px 10px' }}>
+            Flexible label: long
+          </button>
+        </div>
+
+        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(300px, 1fr) minmax(260px, 1fr)', gap: 12 }}>
+          <div>
+            <div style={{ fontWeight: 600, marginBottom: 6 }}>Visual guide</div>
+            <svg width="320" height="180" viewBox="0 0 320 180" style={{ background: '#fff', border: '1px solid #e0e6ef', borderRadius: 6 }}>
+              <rect x="16" y="16" width="288" height="148" fill="#f5f8fd" stroke="#9fb6d6" strokeWidth="2" />
+              <rect
+                x={16 + (childBounds.x / Math.max(1, parent?.size.width ?? 1)) * 288}
+                y={16 + ((childBounds.y - effectiveLane) / Math.max(1, parent?.size.height ?? 1)) * 148}
+                width={(childBounds.width / Math.max(1, parent?.size.width ?? 1)) * 288}
+                height={(effectiveLane / Math.max(1, parent?.size.height ?? 1)) * 148}
+                fill="rgba(255,122,0,0.25)"
+                stroke="#ff7a00"
+              />
+              <rect
+                x={16 + (childBounds.x / Math.max(1, parent?.size.width ?? 1)) * 288}
+                y={16 + (childBounds.y / Math.max(1, parent?.size.height ?? 1)) * 148}
+                width={(childBounds.width / Math.max(1, parent?.size.width ?? 1)) * 288}
+                height={(childBounds.height / Math.max(1, parent?.size.height ?? 1)) * 148}
+                fill="rgba(31,77,153,0.08)"
+                stroke="#1f4d99"
+                strokeDasharray="6 4"
+              />
+              <text x="22" y="30" fontSize="11" fill="#24415f">
+                Parent bounds
+              </text>
+              <text x="22" y="46" fontSize="11" fill="#8a4a00">
+                Reserved lane
+              </text>
+              <text x="22" y="62" fontSize="11" fill="#1f4d99">
+                Child layout bounds
+              </text>
+            </svg>
+          </div>
+          <div>
+            <div style={{ fontWeight: 600, marginBottom: 6 }}>Verification</div>
+            <ol style={{ marginTop: 0, paddingLeft: 20, fontSize: 13 }}>
+              <li>Set mode none and apply: children can use the normal top area.</li>
+              <li>Set mode fixed (for example 32) and apply: children shift below lane.</li>
+              <li>Set mode flexible, apply, then switch label short/long to trigger relayout.</li>
+              <li>Enable distribute/stretch and apply to confirm fit options stay deterministic.</li>
+              <li>Inspect nested parent block on canvas to verify nested layout consistency.</li>
+            </ol>
+            <div style={{ fontSize: 13 }}>
+              Effective lane: <strong>{Math.round(effectiveLane)} px</strong>
+            </div>
+            <div style={{ fontSize: 12, marginTop: 4 }}>
+              Child bounds (relative): x {Math.round(childBounds.x)}, y {Math.round(childBounds.y)}, w {Math.round(childBounds.width)}, h {Math.round(childBounds.height)}
+            </div>
+            <div style={{ marginTop: 6, fontSize: 12 }}>
+              Children:
+              <pre style={{ marginTop: 4, background: '#fff', border: '1px solid #d9e1ec', borderRadius: 6, padding: 8, maxHeight: 120, overflow: 'auto' }}>
+                {children
+                  .map((child) => `${child.id}: pos(${Math.round(child.position.x)}, ${Math.round(child.position.y)}) size(${child.size.width}x${child.size.height})`)
+                  .join('\n') || 'No children'}
+              </pre>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <DisplayBoxStage containerRef={containerRef} stageStyle={gridStageStyle} />
+    </section>
+  );
+};
+
+export default LayoutLabelReservedSpaceDemo;

package/src/displaybox/demos/LinkCancelDemoTab.tsx

@@ -118,6 +118,10 @@ const LinkCancelDemo = () => {
         onManualRender={controls.handleManualRender}
         onToggleLinkRouting={controls.handleToggleLinkRouting}
         onAction={controls.handleAction}
+        onExportImage={controls.handleExportImage}
+        onClearExportPreview={controls.handleClearExportPreview}
+        exportPreviewDataUrl={controls.exportPreviewDataUrl}
+        exportError={controls.exportError}
       />
       <div style={{ display: 'grid', gap: 12, marginBottom: 12 }}>
         <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center' }}>
@@ -236,3 +240,4 @@ const LinkCancelDemo = () => {
 };
 
 export default LinkCancelDemo;
+

package/src/displaybox/demos/ShapeHoverControlsDemoTab.tsx

@@ -355,7 +355,11 @@ const ShapeHoverControlsDemo = () => {
         onToggleSnap={controls.handleToggleSnap}
         onManualRender={controls.handleManualRender}
         onToggleLinkRouting={controls.handleToggleLinkRouting}
-        onAction={controls.handleAction}
+        onAction={controls.handleAction}
+        onExportImage={controls.handleExportImage}
+        onClearExportPreview={controls.handleClearExportPreview}
+        exportPreviewDataUrl={controls.exportPreviewDataUrl}
+        exportError={controls.exportError}
       />
       <div
         style={{
@@ -556,3 +560,4 @@ const EllipseMidPointControlSection = ({
 );
 
 export default ShapeHoverControlsDemo;
+

package/src/displaybox/demos/SimpleDemo.tsx

@@ -57,6 +57,10 @@ const SimpleDemo = ({ demo, beforeStage, stageHandlers }: SimpleDemoProps) => {
         onManualRender={controls.handleManualRender}
         onToggleLinkRouting={controls.handleToggleLinkRouting}
         onAction={controls.handleAction}
+        onExportImage={controls.handleExportImage}
+        onClearExportPreview={controls.handleClearExportPreview}
+        exportPreviewDataUrl={controls.exportPreviewDataUrl}
+        exportError={controls.exportError}
       />
       {beforeStage}
       <DisplayBoxStage
@@ -71,3 +75,4 @@ const SimpleDemo = ({ demo, beforeStage, stageHandlers }: SimpleDemoProps) => {
 };
 
 export default SimpleDemo;
+

package/src/displaybox/demos/SvgPathDemoTab.tsx

@@ -166,6 +166,10 @@ const SvgPathDemo = () => {
         onManualRender={controls.handleManualRender}
         onToggleLinkRouting={controls.handleToggleLinkRouting}
         onAction={controls.handleAction}
+        onExportImage={controls.handleExportImage}
+        onClearExportPreview={controls.handleClearExportPreview}
+        exportPreviewDataUrl={controls.exportPreviewDataUrl}
+        exportError={controls.exportError}
       />
       <div
         style={{
@@ -325,3 +329,4 @@ const SvgPathDemo = () => {
 };
 
 export default SvgPathDemo;
+

package/src/displaybox/demos/TextLayoutDemoTab.tsx

@@ -176,7 +176,11 @@ const TextLayoutDemo = () => {
         onToggleSnap={controls.handleToggleSnap}
         onManualRender={controls.handleManualRender}
         onToggleLinkRouting={controls.handleToggleLinkRouting}
-        onAction={controls.handleAction}
+        onAction={controls.handleAction}
+        onExportImage={controls.handleExportImage}
+        onClearExportPreview={controls.handleClearExportPreview}
+        exportPreviewDataUrl={controls.exportPreviewDataUrl}
+        exportError={controls.exportError}
       />
 
       <div style={{ display: 'grid', gap: 10, marginBottom: 12 }}>
@@ -384,3 +388,4 @@ const TextLayoutDemo = () => {
 };
 
 export default TextLayoutDemo;
+