orcasvn-react-diagrams 0.2.1 → 0.2.2

package/src/displaybox/demos/LinkCancelDemoTab.tsx

@@ -0,0 +1,238 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import type { ElementLinkConnectingEvent, ElementLinkEndedEvent } 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 { linkCancelDemoConfig } from './linkCancelDemo';
+
+type LinkEndedWithMeta = ElementLinkEndedEvent & { cancelledByHost?: boolean };
+type LinkConnectingSnapshot = Omit<ElementLinkConnectingEvent, 'cancel'>;
+
+const badgeStyle: React.CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 8,
+  padding: '6px 10px',
+  borderRadius: 10,
+  fontWeight: 600,
+  background: '#f3f4f6',
+  border: '1px solid #d0d5dd',
+};
+
+const LinkCancelDemo = () => {
+  const demo = linkCancelDemoConfig;
+  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 [lastEvent, setLastEvent] = useState<LinkEndedWithMeta | null>(null);
+  const [history, setHistory] = useState<LinkEndedWithMeta[]>([]);
+  const [hostCancels, setHostCancels] = useState<boolean>(true);
+  const [lastConnecting, setLastConnecting] = useState<LinkConnectingSnapshot | null>(null);
+  const cancelledByHostRef = useRef(false);
+
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return undefined;
+    setLastEvent(null);
+    setHistory([]);
+    return editor.on('elementLinkEnded', (payload) => {
+      const withMeta: LinkEndedWithMeta = {
+        ...payload,
+        cancelledByHost: payload.cancelled && cancelledByHostRef.current,
+      };
+      cancelledByHostRef.current = false;
+      setLastEvent(withMeta);
+      setHistory((prev) => [withMeta, ...prev].slice(0, 6));
+    });
+  }, [editorRef]);
+
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return undefined;
+    setLastConnecting(null);
+    return editor.on('elementLinkConnecting', (payload) => {
+      cancelledByHostRef.current = false;
+      if (hostCancels) {
+        payload.cancel();
+        cancelledByHostRef.current = true;
+      }
+      setLastConnecting({
+        sourcePortId: payload.sourcePortId,
+        sourceElementId: payload.sourceElementId,
+        targetPortId: payload.targetPortId,
+        targetElementId: payload.targetElementId,
+        cancelled: payload.cancelled,
+      });
+    });
+  }, [editorRef, hostCancels]);
+
+  const statusLabel = lastEvent
+    ? lastEvent.cancelled
+      ? lastEvent.cancelledByHost
+        ? 'Cancelled by host'
+        : 'Cancelled'
+      : 'Link created'
+    : 'Awaiting drag';
+  const statusColor = lastEvent ? (lastEvent.cancelled ? '#b42318' : '#027a48') : '#444';
+  const statusTone = lastEvent ? (lastEvent.cancelled ? '#fee4e2' : '#eaf6ec') : '#f3f4f6';
+
+  return (
+    <section>
+      <div style={{ marginBottom: 12 }}>
+        <h2 style={{ marginTop: 0, marginBottom: 4 }}>{demo.title}</h2>
+        <p style={{ marginTop: 0 }}>
+          Start a link drag from the left port and enter the right port area to complete immediately (before mouse
+          up). Drop on empty canvas to cancel. Use the toggle to simulate host-driven cancellation; payloads from
+          <code> elementLinkConnecting</code> and <code>elementLinkEnded</code> appear below.
+        </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' }}>
+          <span style={{ ...badgeStyle, background: statusTone, color: statusColor, borderColor: statusColor }}>
+            <span
+              style={{
+                width: 10,
+                height: 10,
+                borderRadius: '50%',
+                background: statusColor,
+                display: 'inline-block',
+              }}
+            />
+            {statusLabel}
+          </span>
+          <label style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
+            <input
+              type="checkbox"
+              checked={hostCancels}
+              onChange={(event) => setHostCancels(event.target.checked)}
+            />
+            Cancel link drops from host
+          </label>
+          {lastEvent && (
+            <div style={{ fontSize: 12, color: '#333' }}>
+              {lastEvent.cancelled
+                ? lastEvent.cancelledByHost
+                  ? 'Host cancelled this drop.'
+                  : 'Drop missed a valid port.'
+                : `Link ${lastEvent.linkId ?? '(generated)'} connected ${lastEvent.sourcePortId} → ${lastEvent.targetPortId}`}
+            </div>
+          )}
+        </div>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+          <div>
+            <label style={{ display: 'block', fontWeight: 600, marginBottom: 6 }}>Latest connecting payload</label>
+            <textarea
+              readOnly
+              value={lastConnecting ? JSON.stringify(lastConnecting, null, 2) : ''}
+              placeholder="Hover a destination port to see elementLinkConnecting."
+              style={{
+                width: '100%',
+                minHeight: 170,
+                padding: '8px 10px',
+                borderRadius: 8,
+                border: '1px solid #d0d5dd',
+                background: '#fff',
+                fontFamily:
+                  'ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',
+                fontSize: 12,
+                resize: 'vertical',
+              }}
+            />
+          </div>
+          <div>
+            <label style={{ display: 'block', fontWeight: 600, marginBottom: 6 }}>Latest ended payload</label>
+            <textarea
+              readOnly
+              value={lastEvent ? JSON.stringify(lastEvent, null, 2) : ''}
+              placeholder="Drag a link to see the payload."
+              style={{
+                width: '100%',
+                minHeight: 170,
+                padding: '8px 10px',
+                borderRadius: 8,
+                border: '1px solid #d0d5dd',
+                background: '#fff',
+                fontFamily:
+                  'ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',
+                fontSize: 12,
+                resize: 'vertical',
+              }}
+            />
+          </div>
+          <div>
+            <label style={{ display: 'block', fontWeight: 600, marginBottom: 6 }}>Recent drags</label>
+            <div
+              style={{
+                display: 'grid',
+                gap: 8,
+                padding: 8,
+                borderRadius: 8,
+                border: '1px solid #e0e0e0',
+                background: '#fafafa',
+              }}
+            >
+              {history.length === 0 && <div style={{ color: '#666', fontSize: 12 }}>No drags yet.</div>}
+              {history.map((event, index) => (
+                <div
+                  key={`${event.sourcePortId}-${event.targetPortId ?? 'none'}-${index}`}
+                  style={{
+                    padding: 8,
+                    borderRadius: 6,
+                    background: event.cancelled ? '#fff4f3' : '#f1f8f4',
+                    border: `1px solid ${event.cancelled ? '#f2b8b5' : '#b9dfc7'}`,
+                    fontSize: 12,
+                  }}
+                >
+                  <div style={{ fontWeight: 600, marginBottom: 4 }}>
+                    {event.cancelled ? (event.cancelledByHost ? 'Cancelled by host' : 'Cancelled') : 'Created'} —{' '}
+                    {new Date().toLocaleTimeString()}
+                  </div>
+                  <div>sourcePortId: {event.sourcePortId}</div>
+                  <div>targetPortId: {event.targetPortId ?? '—'}</div>
+                  <div>linkId: {event.linkId ?? '—'}</div>
+                  {event.targetElementId && <div>targetElementId: {event.targetElementId}</div>}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+      <DisplayBoxStage containerRef={containerRef} />
+    </section>
+  );
+};
+
+export default LinkCancelDemo;

package/src/displaybox/demos/ObstacleRoutingDemoTab.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import SimpleDemo from './SimpleDemo';
+import { obstacleRoutingDemoConfig } from './obstacleRoutingDemo';
+
+const ObstacleRoutingDemo = () => (
+  <SimpleDemo
+    demo={obstacleRoutingDemoConfig}
+    beforeStage={
+      <div
+        style={{
+          marginBottom: 12,
+          padding: '10px 12px',
+          borderRadius: 8,
+          border: '1px solid #2d2d2d',
+          background: '#f4f4f4',
+        }}
+      >
+        <strong>Expected routing behavior</strong>
+        <ul style={{ margin: '6px 0 0 16px' }}>
+          <li>Links between top nodes should route around the blocking element.</li>
+          <li>Sibling links inside a shared parent should ignore the parent as an obstacle.</li>
+          <li>Parent-child links should stay within the parent and avoid the child interior when ports are on edges.</li>
+          <li>Grandchild links should ignore shared ancestors (parent + grandparent containers).</li>
+        </ul>
+      </div>
+    }
+  />
+);
+
+export default ObstacleRoutingDemo;