orcasvn-react-diagrams 0.2.0 → 0.2.2

package/src/displaybox/demos/SvgPathDemoTab.tsx

@@ -0,0 +1,327 @@
+import React, { useMemo, useState } from 'react';
+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 { defaultSvgPath, defaultSvgPathSize } from './shared';
+import { svgPathDemoConfig } from './svgPathDemo';
+
+type GlyphPreset = {
+  id: string;
+  label: string;
+  path: string;
+  semantics: string;
+  borderRotationOffset?: number;
+};
+
+const glyphPresets: GlyphPreset[] = [
+  {
+    id: 'crow-foot',
+    label: 'Crow Foot (1..n)',
+    path: 'M0 10 L14 10 M14 10 L24 2 M14 10 L24 10 M14 10 L24 18',
+    semantics: 'One-to-many side marker (crow-foot/trident style).',
+    borderRotationOffset: -90,
+  },
+  {
+    id: 'optional-circle',
+    label: 'Optional (0..1)',
+    path: 'M0 10 L14 10 M22 10 m-6 0 a6 6 0 1 0 12 0 a6 6 0 1 0 -12 0',
+    semantics: 'Optional endpoint marker (0..1).',
+    borderRotationOffset: -90,
+  },
+  {
+    id: 'mandatory-bars',
+    label: 'Mandatory (1..1)',
+    path: 'M0 10 L12 10 M16 3 L16 17 M22 3 L22 17',
+    semantics: 'Mandatory single endpoint marker (1..1).',
+    borderRotationOffset: -90,
+  },
+];
+
+const SvgPathDemo = () => {
+  const demo = svgPathDemoConfig;
+  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 [svgPathInput, setSvgPathInput] = useState(defaultSvgPath);
+  const [addMode, setAddMode] = useState<'element' | 'port'>('element');
+  const [portMode, setPortMode] = useState<'manual' | 'border'>('manual');
+  const [targetElementId, setTargetElementId] = useState<string>('svg-host');
+  const [glyphSize, setGlyphSize] = useState<number>(18);
+  const [rotationAngle, setRotationAngle] = useState<number>(0);
+  const [anchorOffsetX, setAnchorOffsetX] = useState<number>(0);
+  const [anchorOffsetY, setAnchorOffsetY] = useState<number>(0);
+  const [presetId, setPresetId] = useState<string>(glyphPresets[0].id);
+
+  const hostElements = diagramState?.elements ?? [];
+  const selectedHost = hostElements.find((element) => element.id === targetElementId) ?? hostElements[0] ?? null;
+
+  const addSvgShape = (options?: {
+    path?: string;
+    mode?: 'element' | 'port';
+    forcedPortMode?: 'manual' | 'border';
+    rotationOffset?: number;
+  }) => {
+    const editor = editorRef.current;
+    const container = containerRef.current;
+    const mode = options?.mode ?? addMode;
+    const resolvedPortMode = options?.forcedPortMode ?? portMode;
+    const path = (options?.path ?? svgPathInput).trim();
+    if (!editor || !container || !path) return;
+    const shapeId = `svg-shape-${createId()}`;
+    editor.registerShape({ id: shapeId, svgPath: path });
+    if (mode === 'element') {
+      const size = defaultSvgPathSize;
+      const rect = container.getBoundingClientRect();
+      const world = editor.clientToWorld(
+        { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 },
+        container,
+      );
+      const offset = nextOffset();
+      const id = `svg-element-${createId()}`;
+      editor.addElement({
+        id,
+        position: { x: world.x - size.width / 2 + offset, y: world.y - size.height / 2 + offset },
+        size,
+        shapeId,
+      });
+      editor.setSelection([id]);
+      return;
+    }
+
+    if (!selectedHost) return;
+    const offset = Math.abs(nextOffset());
+    const usableHeight = Math.max(1, selectedHost.size.height - 20);
+    const y = 10 + (offset % usableHeight) + anchorOffsetY;
+    const portId = `svg-port-${createId()}`;
+    editor.addPortToElement(selectedHost.id, {
+      id: portId,
+      elementId: selectedHost.id,
+      position:
+        resolvedPortMode === 'border'
+          ? { x: selectedHost.size.width + anchorOffsetX, y }
+          : {
+              x: selectedHost.size.width / 2 + anchorOffsetX,
+              y: selectedHost.size.height / 2 + anchorOffsetY,
+            },
+      shapeId,
+      size: { width: glyphSize, height: glyphSize },
+      moveMode: resolvedPortMode === 'border' ? 'border' : 'inside',
+      anchorCenter: true,
+      orientToHostBorder: resolvedPortMode === 'border',
+      style: { rotation: rotationAngle + (options?.rotationOffset ?? 0) },
+    });
+    editor.setSelection([portId]);
+  };
+
+  const handleAddSvgShape = () => addSvgShape();
+
+  const selectedPreset = glyphPresets.find((preset) => preset.id === presetId) ?? glyphPresets[0];
+
+  const insertPresetPort = (forcedPortMode: 'manual' | 'border') => {
+    setSvgPathInput(selectedPreset.path);
+    addSvgShape({
+      path: selectedPreset.path,
+      mode: 'port',
+      forcedPortMode,
+      rotationOffset: forcedPortMode === 'border' ? (selectedPreset.borderRotationOffset ?? 0) : 0,
+    });
+  };
+
+  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={{
+          display: 'grid',
+          gridTemplateColumns: 'minmax(0, 1fr) 200px',
+          gap: 12,
+          marginBottom: 12,
+          alignItems: 'start',
+        }}
+      >
+        <div>
+          <label htmlFor="svg-path-input" style={{ fontWeight: 600, display: 'block', marginBottom: 6 }}>
+            SVG Path
+          </label>
+          <textarea
+            id="svg-path-input"
+            value={svgPathInput}
+            onChange={(event) => setSvgPathInput(event.target.value)}
+            rows={3}
+            style={{ width: '100%', resize: 'vertical', padding: '6px 8px' }}
+          />
+          <div style={{ fontSize: 12, color: '#555', marginTop: 6 }}>
+            Example: <code>{defaultSvgPath}</code>
+          </div>
+          <div style={{ fontSize: 12, color: '#555', marginTop: 4 }}>
+            Relationship icon ports are glyph visuals: interaction anchoring stays simple and deterministic.
+          </div>
+          <div style={{ marginTop: 10, borderTop: '1px solid #dde3ef', paddingTop: 10 }}>
+            <label htmlFor="svg-preset-select" style={{ fontWeight: 600, display: 'block', marginBottom: 6 }}>
+              Relationship Presets
+            </label>
+            <select
+              id="svg-preset-select"
+              value={presetId}
+              onChange={(event) => setPresetId(event.target.value)}
+              style={{ width: '100%', padding: '6px 8px' }}
+            >
+              {glyphPresets.map((preset) => (
+                <option key={preset.id} value={preset.id}>
+                  {preset.label}
+                </option>
+              ))}
+            </select>
+            <div style={{ fontSize: 12, color: '#555', marginTop: 6 }}>{selectedPreset.semantics}</div>
+            <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
+              <button type="button" onClick={() => insertPresetPort('manual')} style={{ padding: '6px 8px' }}>
+                Insert Manual Glyph
+              </button>
+              <button type="button" onClick={() => insertPresetPort('border')} style={{ padding: '6px 8px' }}>
+                Insert Border-Oriented Glyph
+              </button>
+            </div>
+            <div style={{ fontSize: 12, color: '#555', marginTop: 6 }}>
+              Quick check: insert border-oriented presets on each side and verify the marker foot stays perpendicular to the
+              boundary while link endpoints remain stable.
+            </div>
+          </div>
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+          <label htmlFor="svg-add-mode" style={{ fontWeight: 600, fontSize: 12 }}>
+            Add As
+          </label>
+          <select
+            id="svg-add-mode"
+            value={addMode}
+            onChange={(event) => setAddMode(event.target.value as 'element' | 'port')}
+            style={{ padding: '6px 8px' }}
+          >
+            <option value="element">Element</option>
+            <option value="port">Port (host border)</option>
+          </select>
+          {addMode === 'port' && (
+            <>
+              <label htmlFor="svg-port-mode" style={{ fontWeight: 600, fontSize: 12 }}>
+                Port Rotation Mode
+              </label>
+              <select
+                id="svg-port-mode"
+                value={portMode}
+                onChange={(event) => setPortMode(event.target.value as 'manual' | 'border')}
+                style={{ padding: '6px 8px' }}
+              >
+                <option value="manual">Manual rotation glyph</option>
+                <option value="border">Border-normal oriented glyph</option>
+              </select>
+              <label htmlFor="svg-port-host" style={{ fontWeight: 600, fontSize: 12 }}>
+                Host Element
+              </label>
+              <select
+                id="svg-port-host"
+                value={selectedHost?.id ?? ''}
+                onChange={(event) => setTargetElementId(event.target.value)}
+                style={{ padding: '6px 8px' }}
+              >
+                {hostElements.map((element) => (
+                  <option key={element.id} value={element.id}>
+                    {element.id}
+                  </option>
+                ))}
+              </select>
+              <label htmlFor="svg-port-size" style={{ fontWeight: 600, fontSize: 12 }}>
+                Glyph Size
+              </label>
+              <input
+                id="svg-port-size"
+                type="number"
+                min={8}
+                value={glyphSize}
+                onChange={(event) => setGlyphSize(Math.max(8, Number(event.target.value) || 8))}
+                style={{ padding: '6px 8px' }}
+              />
+              <label htmlFor="svg-port-rotation" style={{ fontWeight: 600, fontSize: 12 }}>
+                Rotation Angle
+              </label>
+              <input
+                id="svg-port-rotation"
+                type="number"
+                value={rotationAngle}
+                onChange={(event) => setRotationAngle(Number(event.target.value) || 0)}
+                style={{ padding: '6px 8px' }}
+              />
+              <label htmlFor="svg-port-anchor-x" style={{ fontWeight: 600, fontSize: 12 }}>
+                Anchor Offset X / Y
+              </label>
+              <div style={{ display: 'flex', gap: 6 }}>
+                <input
+                  id="svg-port-anchor-x"
+                  type="number"
+                  value={anchorOffsetX}
+                  onChange={(event) => setAnchorOffsetX(Number(event.target.value) || 0)}
+                  style={{ padding: '6px 8px', width: '50%' }}
+                />
+                <input
+                  type="number"
+                  value={anchorOffsetY}
+                  onChange={(event) => setAnchorOffsetY(Number(event.target.value) || 0)}
+                  style={{ padding: '6px 8px', width: '50%' }}
+                />
+              </div>
+            </>
+          )}
+          <button
+            onClick={handleAddSvgShape}
+            style={{ padding: '8px 12px' }}
+            disabled={!svgPathInput.trim() || (addMode === 'port' && !selectedHost)}
+          >
+            {addMode === 'element' ? 'Add SVG Element' : 'Add SVG Port'}
+          </button>
+          <div style={{ fontSize: 12, color: '#555' }}>
+            Size: {defaultSvgPathSize.width} x {defaultSvgPathSize.height}
+          </div>
+        </div>
+      </div>
+      <DisplayBoxStage containerRef={containerRef} />
+    </section>
+  );
+};
+
+export default SvgPathDemo;