orcasvn-react-diagrams 0.2.12 → 0.2.13

package/src/displaybox/demos/DeletionEventsDemoTab.tsx

@@ -1,8 +1,13 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import type {
+  ElementDeletingEvent,
+  ElementDoubleClickEvent,
   ElementDeletedEvent,
+  LinkDeletingEvent,
   LinkDeletedEvent,
+  PortDeletingEvent,
   PortDeletedEvent,
+  TextDeletingEvent,
   TextDeletedEvent,
 } from '../../api';
 import DisplayBoxControls from '../DisplayBoxControls';
@@ -14,17 +19,41 @@ import type { DemoActionHelpers } from '../types';
 import { deletionEventsDemoConfig } from './deletionEventsDemo';
 
 type EventPayloads = {
+  elementDeleting: ElementDeletingEvent | null;
   elementDeleted: ElementDeletedEvent | null;
+  portDeleting: PortDeletingEvent | null;
   portDeleted: PortDeletedEvent | null;
+  linkDeleting: LinkDeletingEvent | null;
   linkDeleted: LinkDeletedEvent | null;
+  textDeleting: TextDeletingEvent | null;
   textDeleted: TextDeletedEvent | null;
+  elementDoubleClick: ElementDoubleClickEvent | null;
 };
 
 const initialPayloads: EventPayloads = {
+  elementDeleting: null,
   elementDeleted: null,
+  portDeleting: null,
   portDeleted: null,
+  linkDeleting: null,
   linkDeleted: null,
+  textDeleting: null,
   textDeleted: null,
+  elementDoubleClick: null,
+};
+
+type CancelFlags = {
+  element: boolean;
+  port: boolean;
+  link: boolean;
+  text: boolean;
+};
+
+const initialCancelFlags: CancelFlags = {
+  element: false,
+  port: false,
+  link: false,
+  text: false,
 };
 
 const eventBoxStyle: React.CSSProperties = {
@@ -61,21 +90,79 @@ const DeletionEventsDemo = () => {
   });
 
   const [payloads, setPayloads] = useState<EventPayloads>(initialPayloads);
+  const [cancelFlags, setCancelFlags] = useState<CancelFlags>(initialCancelFlags);
+  const [eventLog, setEventLog] = useState<string[]>([]);
+
+  const appendLog = React.useCallback((eventName: string, payload: unknown) => {
+    setEventLog((prev) => [
+      `${eventName}: ${JSON.stringify(payload)}`,
+      ...prev,
+    ].slice(0, 18));
+  }, []);
 
   useEffect(() => {
     const editor = editorRef.current;
     if (!editor) return undefined;
     setPayloads(initialPayloads);
+    setEventLog([]);
     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 }))),
+      editor.on('elementDeleting', (payload) => {
+        if (cancelFlags.element) {
+          payload.cancel();
+        }
+        setPayloads((prev) => ({ ...prev, elementDeleting: payload }));
+        appendLog('elementDeleting', payload);
+      }),
+      editor.on('elementDeleted', (payload) => {
+        setPayloads((prev) => ({ ...prev, elementDeleted: payload }));
+        appendLog('elementDeleted', payload);
+      }),
+      editor.on('portDeleting', (payload) => {
+        if (cancelFlags.port) {
+          payload.cancel();
+        }
+        setPayloads((prev) => ({ ...prev, portDeleting: payload }));
+        appendLog('portDeleting', payload);
+      }),
+      editor.on('portDeleted', (payload) => {
+        setPayloads((prev) => ({ ...prev, portDeleted: payload }));
+        appendLog('portDeleted', payload);
+      }),
+      editor.on('linkDeleting', (payload) => {
+        if (cancelFlags.link) {
+          payload.cancel();
+        }
+        setPayloads((prev) => ({ ...prev, linkDeleting: payload }));
+        appendLog('linkDeleting', payload);
+      }),
+      editor.on('linkDeleted', (payload) => {
+        setPayloads((prev) => ({ ...prev, linkDeleted: payload }));
+        appendLog('linkDeleted', payload);
+      }),
+      editor.on('textDeleting', (payload) => {
+        if (cancelFlags.text) {
+          payload.cancel();
+        }
+        setPayloads((prev) => ({ ...prev, textDeleting: payload }));
+        appendLog('textDeleting', payload);
+      }),
+      editor.on('textDeleted', (payload) => {
+        setPayloads((prev) => ({ ...prev, textDeleted: payload }));
+        appendLog('textDeleted', payload);
+      }),
+      editor.on('elementDoubleClick', (payload) => {
+        setPayloads((prev) => ({ ...prev, elementDoubleClick: payload }));
+        appendLog('elementDoubleClick', payload);
+      }),
     ];
     return () => {
-      unsubs.forEach((unsub) => unsub());
+      unsubs.forEach((unsub) => {
+        if (typeof unsub === 'function') {
+          unsub();
+        }
+      });
     };
-  }, [editorRef]);
+  }, [appendLog, cancelFlags, editorRef]);
 
   const hasPort = (diagramState?.ports ?? []).some((port) => port.id === 'delete-source-free-port');
   const hasLink = (diagramState?.links ?? []).some((link) => link.id === 'delete-link');
@@ -87,8 +174,10 @@ const DeletionEventsDemo = () => {
       <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.
+          Use the direct delete buttons for port/link/text, then delete <code>delete-source</code> to trigger
+          cascades. Turn cancellation toggles on to veto deletes before commit, double click an element body to log
+          <code> elementDoubleClick</code>, and use the batch-selection helper before pressing Delete to verify
+          partial success.
         </p>
       </div>
       <DisplayBoxControls
@@ -123,24 +212,93 @@ const DeletionEventsDemo = () => {
           <button type="button" onClick={() => editorRef.current?.removeElement('delete-source')} disabled={!hasCascadeElement}>
             Delete Element (Cascade)
           </button>
+          <button
+            type="button"
+            onClick={() => editorRef.current?.setSelection(['delete-free-text', 'delete-target'])}
+            disabled={!hasText}
+          >
+            Prepare Batch Delete Selection
+          </button>
+        </div>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
+          <label>
+            <input
+              type="checkbox"
+              checked={cancelFlags.element}
+              onChange={(event) => setCancelFlags((prev) => ({ ...prev, element: event.target.checked }))}
+            />
+            {' '}
+            Cancel elementDeleting
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              checked={cancelFlags.port}
+              onChange={(event) => setCancelFlags((prev) => ({ ...prev, port: event.target.checked }))}
+            />
+            {' '}
+            Cancel portDeleting
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              checked={cancelFlags.link}
+              onChange={(event) => setCancelFlags((prev) => ({ ...prev, link: event.target.checked }))}
+            />
+            {' '}
+            Cancel linkDeleting
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              checked={cancelFlags.text}
+              onChange={(event) => setCancelFlags((prev) => ({ ...prev, text: event.target.checked }))}
+            />
+            {' '}
+            Cancel textDeleting
+          </label>
         </div>
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 12 }}>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 12 }}>
+          <div>
+            <label style={{ display: 'block', fontWeight: 600, marginBottom: 6 }}>elementDeleting</label>
+            <textarea readOnly value={payloads.elementDeleting ? JSON.stringify(payloads.elementDeleting, null, 2) : ''} style={eventBoxStyle} />
+          </div>
           <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 }}>portDeleting</label>
+            <textarea readOnly value={payloads.portDeleting ? JSON.stringify(payloads.portDeleting, 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 }}>linkDeleting</label>
+            <textarea readOnly value={payloads.linkDeleting ? JSON.stringify(payloads.linkDeleting, 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 }}>textDeleting</label>
+            <textarea readOnly value={payloads.textDeleting ? JSON.stringify(payloads.textDeleting, 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>
+            <label style={{ display: 'block', fontWeight: 600, marginBottom: 6 }}>elementDoubleClick</label>
+            <textarea readOnly value={payloads.elementDoubleClick ? JSON.stringify(payloads.elementDoubleClick, null, 2) : ''} style={eventBoxStyle} />
+          </div>
+        </div>
+        <div>
+          <label style={{ display: 'block', fontWeight: 600, marginBottom: 6 }}>Event Log</label>
+          <textarea readOnly value={eventLog.join('\n')} style={{ ...eventBoxStyle, minHeight: 180 }} />
         </div>
       </div>
       <DisplayBoxStage containerRef={containerRef} />

package/src/displaybox/demos/deletionEventsDemo.ts

@@ -2,7 +2,7 @@ import type { DiagramState } from '../../api';
 import type { DemoConfig } from '../types';
 import { baseElementShapes, basePortShapes } from './shared';
 
-const createDeletionEventsState = (): DiagramState => ({
+export const createDeletionEventsState = (): DiagramState => ({
   elements: [
     {
       id: 'delete-source',
@@ -81,7 +81,7 @@ const createDeletionEventsState = (): DiagramState => ({
 export const deletionEventsDemoConfig: DemoConfig = {
   id: 'deletion-events',
   title: 'Deletion Events',
-  description: 'Inspect elementDeleted, portDeleted, linkDeleted, and textDeleted payloads for direct and cascade removals.',
+  description: 'Inspect cancellable delete lifecycle events, post-delete payloads, and element double click in one integration-focused scenario.',
   createState: createDeletionEventsState,
   elementShapes: baseElementShapes,
   portShapes: basePortShapes,

package/src/displaybox/demos/focusElementDemo.ts

@@ -0,0 +1,91 @@
+import type { DiagramState } from '../../api';
+import type { DemoAction, DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+export const createFocusElementState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'focus-left',
+      position: { x: 40, y: 80 },
+      size: { width: 140, height: 90 },
+      shapeId: 'default',
+      style: { fill: '#e0f2fe', stroke: '#0369a1', strokeWidth: 2 },
+    },
+    {
+      id: 'focus-right',
+      position: { x: 820, y: 120 },
+      size: { width: 180, height: 110 },
+      shapeId: 'panel',
+      style: { fill: '#fef3c7', stroke: '#b45309', strokeWidth: 2 },
+    },
+    {
+      id: 'focus-parent',
+      position: { x: 520, y: 420 },
+      size: { width: 220, height: 160 },
+      shapeId: 'default',
+      style: { fill: '#ecfccb', stroke: '#4d7c0f', strokeWidth: 2 },
+    },
+    {
+      id: 'focus-child',
+      parentId: 'focus-parent',
+      position: { x: 110, y: 60 },
+      size: { width: 70, height: 50 },
+      shapeId: 'default',
+      anchorCenter: true,
+      style: { fill: '#dcfce7', stroke: '#15803d', strokeWidth: 2 },
+    },
+  ],
+  ports: [],
+  links: [],
+  texts: [
+    {
+      id: 'focus-copy',
+      content: 'Compare explicit element focus against zoom-to-fit.',
+      position: { x: 40, y: 26 },
+    },
+  ],
+});
+
+const focusLeftAction: DemoAction = {
+  id: 'focus-left-default',
+  label: 'Focus Left (Keep Zoom)',
+  run: (editor) => {
+    editor.focusElement('focus-left');
+  },
+};
+
+const focusRightZoomAction: DemoAction = {
+  id: 'focus-right-zoom',
+  label: 'Focus Right (Zoom 2.2)',
+  run: (editor) => {
+    editor.focusElement('focus-right', { zoom: 2.2 });
+  },
+};
+
+const focusChildZoomAction: DemoAction = {
+  id: 'focus-child-zoom',
+  label: 'Focus Nested Child (Zoom 1.8)',
+  run: (editor) => {
+    editor.focusElement('focus-child', { zoom: 1.8 });
+  },
+};
+
+const fitAllAction: DemoAction = {
+  id: 'focus-fit-all',
+  label: 'Zoom-To-Fit For Comparison',
+  run: (editor) => {
+    editor.zoomToFitElements({ padding: 40 });
+  },
+};
+
+export const focusElementDemoConfig: DemoConfig = {
+  id: 'focus-element',
+  title: 'Focus Element',
+  description: 'Centers one explicit element, optionally with a chosen zoom, unlike zoom-to-fit which frames the whole scene.',
+  createState: createFocusElementState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [focusLeftAction, focusRightZoomAction, focusChildZoomAction, fitAllAction],
+};

package/src/displaybox/demos/index.tsx

@@ -53,6 +53,7 @@ import AsymmetricPortMultiAnchorDemo from './AsymmetricPortMultiAnchorDemoTab';
 import VertexControlLinkSessionDemo from './VertexControlLinkSessionDemoTab';
 import { offsetAnchorAvoidanceDemoConfig } from './offsetAnchorAvoidanceDemo';
 import { zoomToFitElementsDemoConfig } from './zoomToFitElementsDemo';
+import { focusElementDemoConfig } from './focusElementDemo';
 
 export {
   baseElementShapes,
@@ -120,6 +121,7 @@ const basics = [
   registerDemo(selectionDemoConfig, wrapSimpleDemo(selectionDemoConfig), 'basics', 4),
   registerDemo(elementVisibilitySelectionDemoConfig, wrapSimpleDemo(elementVisibilitySelectionDemoConfig), 'basics', 5),
   registerDemo(zoomToFitElementsDemoConfig, ZoomToFitElementsDemo, 'basics', 6),
+  registerDemo(focusElementDemoConfig, wrapSimpleDemo(focusElementDemoConfig), 'basics', 7),
 ];
 
 const layoutAndText = [