orcasvn-react-diagrams 0.2.11 → 0.2.13

package/docs/API_CONTRACT.md

@@ -26,6 +26,7 @@ Primary definitions:
 - `elementShapeHoverControls?: ElementShapeHoverControls`
 - `onElementShapeHoverControlInteraction?: (event: ElementShapeHoverControlInteractionEvent) => void`
 - `onElementShapeHoverControlActivated?: (event: ElementShapeHoverControlActivationEvent) => void` (deprecated callback contract)
+- `onCreateLinkTargetPort?: (context: LinkTargetPortCreationContext) => Partial<LinkTargetPortDraft> | void`
 - `onChange?: (event: EngineChangeEvent) => void`
 - `onSelection?: (event: EngineSelectionEvent) => void`
 - `linkRouteRefreshPolicy?: LinkRouteRefreshPolicy`
@@ -104,6 +105,12 @@ Defaults:
   - non-finite values fall back to defaults
   - `minZoom`/`maxZoom` are clamped to positive values and normalized into ascending order
 
+### `FocusElementOptions`
+- Optional `zoom?: number`
+- Semantics:
+  - omitted `zoom` preserves the current viewport zoom
+  - provided `zoom` is clamped to the same normalized min/max range used by viewport fit helpers
+
 ### `TextInteractionPolicy`
 - Optional `movable?: boolean` (default behavior: `true`)
 - Optional `editable?: boolean` (default behavior: `true`)
@@ -138,12 +145,40 @@ Defaults:
   - `anchorCenter`: `true`
   - `orientToHostBorder`: `true`
 
+### `LinkTargetPortCreationPhase`
+- `'preview' | 'commit'`
+
+### `LinkTargetPortDraft`
+- Alias of `PortData` without `id` and `elementId`
+- `position` uses target-element-local coordinates
+- Returned overrides are normalized against the target element before placeholder render or commit
+
+### `LinkTargetPortCreationContext`
+- Required: `phase`, `pointer`, `sourcePortId`, `sourceElementId`, `targetElementId`, `sourcePort`, `targetElement`, `defaultPort`
+- `phase` indicates whether the callback is shaping the placeholder draft (`'preview'`) or the commit draft (`'commit'`)
+- `pointer` is the current world-space pointer/drop coordinate
+- `sourcePort` is a snapshot of the source port data used to derive the destination-port defaults
+- `targetElement` is a snapshot of the target element receiving the created port
+- `defaultPort` is the pre-normalization default draft before host overrides are applied
+
+### `LinkTargetPortCreationResult`
+- `Partial<LinkTargetPortDraft> | void`
+
+### `LinkTargetPortCreationHandler`
+- Signature: `(context: LinkTargetPortCreationContext) => LinkTargetPortCreationResult`
+- Applies only to link-to-element completion flows
+- Does not cancel creation; use `elementLinkConnecting.cancel()` for host veto
+
 ### `LinkData`
 - Required: `id`, `sourcePortId`, `targetPortId`, `points`
 - Optional: `routing`, `style`, `textIds`
 - Defaults at runtime/model:
   - `routing`: `'auto'`
   - `textIds`: `[]`
+- Link-label contract:
+  - link labels are represented as ordinary `TextData`
+  - a link-owned label uses `TextData.ownerId = link.id`
+  - `LinkData.textIds` is the owner-side index only; there is no separate `LinkData.label` or `LinkData.labels` field
 
 ### `LinkRouteRefreshPolicy`
 - Optional `mode?: 'mutation-only' | 'redraw-two-endpoint-change'` (default: `'mutation-only'`)
@@ -168,12 +203,47 @@ Defaults:
 - `beforeRows` / `afterRows`: arrays of `{ childIds: string[] }` snapshots describing derived row membership before and after the topology change
 - Emitted only when enabled grid-child width resizing causes a real row-topology change
 
+### `ElementDoubleClickEvent`
+- Required: `elementId`, `pointer`, `isMulti`
+- Emitted for eligible element-body double click / double tap
+- Observational only; does not cancel or replace the normal click-selection flow
+
+### `DeletionTrigger`
+- `'direct' | 'selection' | 'cascade'`
+
+### `DeletionRootRef`
+- Required: `entity`, `id`
+- `entity`: `'element' | 'port' | 'link' | 'text'`
+- `id` is the original requested delete root for the active delete pass
+
+### `ElementDeletingEvent`
+- Required: `elementId`, `trigger`, `root`, `cancel`, `cancelled`
+- Emitted before an element deletion commits, including descendant element cascades
+
+### `PortDeletingEvent`
+- Required: `portId`, `elementId`, `trigger`, `root`, `cancel`, `cancelled`
+- Emitted before a port deletion commits, including cascades caused by parent element removal
+
+### `LinkDeletingEvent`
+- Required: `linkId`, `sourcePortId`, `targetPortId`, `trigger`, `root`, `cancel`, `cancelled`
+- Emitted before a link deletion commits, including cascades caused by element or port removal
+
+### `TextDeletingEvent`
+- Required: `textId`, `trigger`, `root`, `cancel`, `cancelled`
+- Optional: `ownerId?: string | null`
+- Emitted before a text deletion commits, including cascades caused by owner deletion
+
 ### `TextData`
 - Required: `id`, `content`, `position`
 - Optional: `size`, `style`, `ownerId`, `layout`, `interaction`, `displayContent`, `displayOffset`, `displayClipSize`
 - Defaults at runtime/model:
   - `ownerId`: `null`
   - `displayContent`: mirrors `content` at creation
+- Ownership semantics:
+  - element-owned text stores owner-relative local position
+  - port-owned text stores owner-relative local position
+  - link-owned text stores local offset from the owning link's current geometric midpoint
+  - when a link reroutes or endpoints move, link-owned text keeps the same stored local offset and resolves a new world position from the recomputed midpoint
 
 ### `TextLayout`
 - Optional `boundsMode?: 'owner-width' | 'owner-box' | 'fixed'`
@@ -217,6 +287,7 @@ Defaults:
 - `completeLinkToElement(targetElementId, pointer)`
 - `cancelLink()`
 - `zoomToFitElements(options?)`
+- `focusElement(elementId, options?)`
 - `exportImage(options?)`
 - `resize(width, height)`
 - `setElementShapeHoverControls(controls?)`
@@ -256,13 +327,18 @@ Defaults:
 - `portMoved: PortMovedEvent`
 - `portSelected: PortSelectedEvent`
 - `elementClick: ElementPointerEvent`
+- `elementDoubleClick: ElementDoubleClickEvent`
 - `elementDragged: ElementDropEvent`
 - `elementMoved: ElementMovedEvent`
 - `elementResized: ElementResizedEvent`
 - `gridLayoutChanged: GridLayoutChangedEvent`
+- `elementDeleting: ElementDeletingEvent`
 - `elementDeleted: ElementDeletedEvent`
+- `portDeleting: PortDeletingEvent`
 - `portDeleted: PortDeletedEvent`
+- `linkDeleting: LinkDeletingEvent`
 - `linkDeleted: LinkDeletedEvent`
+- `textDeleting: TextDeletingEvent`
 - `textDeleted: TextDeletedEvent`
 - `textUpdated: TextUpdatedEvent`
 - `elementSelected: ElementSelectedEvent`
@@ -278,14 +354,25 @@ Defaults:
 - `zoomToFitElements` computes bounds from `elements[]` only, ignores ports/links/texts for fit expansion, and no-ops when no elements exist.
 - `zoomToFitElements` ignores hidden elements when computing fit bounds.
 - `zoomToFitElements` applies its result through `setViewport`, so hosts observe the standard viewport patch/change path.
+- `focusElement(elementId, options?)` centers the target element bounds in the current editor viewport and preserves the current zoom unless `options.zoom` is provided.
+- `focusElement(...)` no-ops when the target id does not resolve to an element world position.
 - `exportImage({ fitToContent })` derives crop bounds from visible scene entities only.
 - Built-in empty-paper panning now starts from plain primary-button drag and no longer requires `panKey`; marquee selection uses `Shift + primary drag`.
+- `elementDoubleClick` is observational; normal click selection still runs, and text double click keeps built-in text-edit precedence instead of also emitting `elementDoubleClick`.
 - `clientToWorld` uses: `world = (client - containerRect - pan) / zoom`, with zoom fallback to `1` when zoom is `0`.
 - `rerouteLinks(ids)` skips manual links unless `options.includeManual === true`.
 - `linkRouteRefreshPolicy.mode` defaults to `'mutation-only'`; `'redraw-two-endpoint-change'` enables redraw-cycle reroute checks for links whose two endpoints changed.
 - `updateLinkPoints` always marks the link as manual routing.
 - `linkColorPoolPolicy` is opt-in; it applies to newly created links when enabled, and it may also fill loaded links with missing strokes when `assignOnLoadWhenMissingStroke` is enabled. Explicit non-empty `style.stroke` values are preserved.
+- `onCreateLinkTargetPort` applies only when a link completes onto an element body; direct port-to-port linking and direct `addPortToElement(...)` behavior are unchanged.
+- `onCreateLinkTargetPort` runs during placeholder preview and again during commit, and both phases use the same post-callback target-port normalization path.
+- `onCreateLinkTargetPort` shapes the destination-port draft only; host cancellation remains exclusively on `elementLinkConnecting`.
+- `completeLinkToElement(...)` uses the same target-port callback and cancellation lifecycle as pointer-driven link drag.
+- Link labels use the existing text lifecycle and event surface: `addText(...)`, `moveTextTo(...)`, `updateText(...)`, `removeText(...)`, `textUpdated`, and `textDeleted`.
+- Link-owned text defaults to unconstrained layout unless `TextLayout.boundsMode` is explicitly set; element-only owner-width defaults do not apply to link labels.
 - `gridLayoutChanged` is additive and does not replace standard `change` / `elementResized` flows.
+- Deletion mutators emit cancellable `elementDeleting` / `portDeleting` / `linkDeleting` / `textDeleting` before commit and matching `...Deleted` events after successful removal.
+- Canceling any dependent `...Deleting` event aborts the current root deletion request; `deleteSelection()` still continues evaluating unrelated selected roots.
 - `ElementData.visible = false` hides only the element body from built-in renderer sync, hit testing, marquee selection, persisted selection, and fit/export helpers.
 - Descendant element visibility is not suppressed by hidden ancestors; direct-owned parent ports/texts still follow the hidden parent, and links remain visible whenever both endpoint ports are visible.
 - `ElementData.selectable = false` blocks built-in element-body selection while still allowing visible owned ports to participate in their normal interaction flows.
@@ -294,7 +381,7 @@ Defaults:
 - `TextData.interaction.movable = false` blocks built-in drag only; selection still works and programmatic movement remains allowed.
 - `TextData.interaction.editable = false` blocks built-in textarea editing only; selection still works and programmatic text updates remain allowed.
 - Text layout/overflow resolution updates `displayContent` and emits `textUpdated` when `updateText` is called.
-- Deletion mutators emit cascading `portDeleted`/`linkDeleted`/`textDeleted` for removed dependent entities.
+- Successful cascade removal still emits the matching dependent `...Deleted` events for removed entities.
 
 ## Verification References
 - `src/api/__tests__/createDiagramEditor.test.ts`

package/docs/ARCHITECTURE.md

@@ -3,8 +3,8 @@
 > Sections: [Module Boundaries](#module-boundaries) | [Runtime Flow](#runtime-flow) | [Integration Boundary](#integration-boundary) | [Key Sources](#key-sources)
 
 ## Module Boundaries
-- `src/api/`: public entry points and type contracts.
-- `src/engine/`: command execution, event bus, selection, viewport, routing/snap integration.
+- `src/api/`: public entry points, type contracts, and editor-only helpers such as `zoomToFitElements(...)` and `focusElement(...)`.
+- `src/engine/`: command execution, event bus, selection, viewport, routing/snap integration, and delete-lifecycle orchestration.
 - `src/engine/`: `DiagramEngine` orchestration plus extracted services (`TextLayoutService`, `AutoLayoutService`, `LinkRoutingService`, `MutationPipeline`).
 - `src/models/`: in-memory state graph for elements/ports/links/texts.
 - `src/renderer/`: renderer interface and shape registry contracts.
@@ -14,15 +14,17 @@
 - `src/utils/`: geometry, patch helpers, guards, ids.
 
 ## Runtime Flow
-1. Host calls API mutator.
-2. Engine executes command(s) against model.
-3. Engine emits patches + latest state via `change`.
-4. Scheduler requests render.
-5. Renderer syncs model to view nodes.
+1. Host calls API mutator or editor helper.
+2. Interaction or API helper resolves target intent and any required lifecycle hooks.
+3. Engine executes command(s) against model or applies viewport state updates.
+4. Engine emits patches + latest state via `change`.
+5. Scheduler requests render.
+6. Renderer syncs model to view nodes.
 
 ## Integration Boundary
 - Engine core does not require Konva if you use `createDiagramEngine` with a custom `Renderer`.
 - `createDiagramEditor` wires Konva stage, hit testing, and interaction defaults.
+- The Konva-backed editor surface also owns editor-only navigation helpers such as `focusElement(...)`.
 
 ## Key Sources
 - `src/api/createDiagramEditor.ts`

package/docs/CAPABILITIES.md

@@ -18,7 +18,12 @@
 - Optional grid-child width topology editing with `gridLayoutChanged` host events.
 - Parent-owned direct-child drag suppression through `ElementData.childElementInteraction`.
 - Element-level visibility/selectability policy through `ElementData.visible` and `ElementData.selectable`, with element-body-only hiding, direct-owned port/text suppression, and visible descendants that keep their own links/rendering behavior.
+- Host-callable viewport focus through `focusElement(elementId, options?)`.
 - Element shape hover controls with edge/vertex/midpoint targets and interaction callbacks.
+- Observational `elementDoubleClick` event for element-body double click / double tap.
+- Cancellable delete lifecycle events (`elementDeleting`, `portDeleting`, `linkDeleting`, `textDeleting`) before direct, selection, and cascade removals commit.
+- Link labels through link-owned `TextData`, including midpoint-relative attachment that follows reroute and endpoint movement.
+- Optional host callback for shaping auto-created destination ports during link-to-element preview and commit.
 - Optional random link color assignment from configurable pools during link creation, plus opt-in load-time fill for links missing `style.stroke`.
 - Per-text interaction policy for suppressing built-in text drag and/or built-in text editing.
 - Overlay shapes for external drag ghosting and previews.

package/docs/COMMANDS_EVENTS.md

@@ -6,7 +6,7 @@
 - Engine mutators route through command factories in `src/engine/EngineCommands.ts`.
 - Each command applies model mutation and returns one or more patches.
 - `emitChange` publishes `{ patches, state }` on `change`.
-- Editor helpers such as `zoomToFitElements(options?)` compose existing engine commands rather than introducing a separate patch type.
+- Editor helpers such as `zoomToFitElements(options?)` and `focusElement(elementId, options?)` compose existing viewport updates rather than introducing separate patch types.
 
 ## Patch Entities
 - `element`
@@ -20,7 +20,7 @@
 ## Mutation To Events Mapping
 - `add/move/resize/remove element`
   - Always `change`
-  - Plus `elementMoved`, `elementResized`, or `elementDeleted` when applicable
+  - Plus `elementMoved`, `elementResized`, `elementDeleting`, or `elementDeleted` when applicable
 - `resize element` with enabled grid-child width topology editing
   - Standard `change`
   - Standard `elementResized` when size changes
@@ -28,22 +28,26 @@
 - `add/move/remove port`
   - Always `change`
   - Plus `portMoved` on effective movement
-  - Plus `portDeleted` on removal (including cascade removal)
+  - Plus `portDeleting` before removal and `portDeleted` on successful removal (including cascade removal)
 - `add/update/remove link`
   - Always `change`
-  - Plus `linkDeleted` on removal (including cascade removal)
+  - Plus `linkDeleting` before removal and `linkDeleted` on successful removal (including cascade removal)
 - `add/update/move/remove text`
   - Always `change`
   - Plus `textUpdated` when `updateText` resolves display layout
-  - Plus `textDeleted` on removal (including cascade removal)
+  - Plus `textDeleting` before removal and `textDeleted` on successful removal (including cascade removal)
 - `setSelection/toggleSelection/deleteSelection`
   - `selection` plus derived selected entity events
+  - `deleteSelection` evaluates each selected root independently, so a vetoed root can be skipped while unrelated roots still delete
   - hidden element bodies, direct-owned hidden artifacts, and `selectable:false` element IDs are filtered out before selection persists/emits
 - `setViewport`
   - `change` with viewport patch (`render: false`)
 - `zoomToFitElements`
   - delegates to `setViewport` when at least one visible element exists
   - emits the same viewport `change` patch path
+- `focusElement`
+  - delegates to `setViewport` when the target element resolves
+  - preserves the current zoom unless `options.zoom` is supplied
 - `setRouting/setSnapping/registerShape`
   - `config` events
 
@@ -53,19 +57,25 @@
   - legacy `element-drop`
   - `elementDragged`
 - Click paper: `paperClick`
+- Double click/tap element body:
+  - `elementDoubleClick`
 - Linking:
   - `elementLinkStarted`
+  - optional `onCreateLinkTargetPort(...)` preview/commit shaping for link-to-element completion
   - `elementLinkConnecting` (cancelable via `cancel()`)
   - `elementLinkEnded`
 
 ## Preconditions
-- Events are emitted only after engine state transition logic.
+- Events are emitted only after engine state transition logic resolves a valid action.
+- Cancellable `...Deleting` events emit before the corresponding mutation commits.
 - Derived events require selected IDs to resolve to known entity types.
 
 ## Failure Modes
 - Unknown IDs do not emit entity-specific movement/selection events.
 - Canceled link creation emits `elementLinkEnded` with `cancelled=true` and no link creation.
+- `focusElement(...)` emits no viewport change when the target element id does not resolve.
 - Built-in element-body selection emits no persisted element selection when the target element is hidden or sets `selectable = false`.
+- Text double click continues text editing precedence and does not also emit `elementDoubleClick`.
 - Built-in drag on a direct child element emits no move/drop mutation when its parent sets `childElementInteraction.movable = false`.
 - `textUpdated` emits only when target text exists; missing IDs remain no-op.
 

package/docs/DOCUMENTATION_WORKFLOW.md

@@ -59,7 +59,7 @@ When resuming later:
 5. Re-run packaging verification.
 
 ## 6. Current Status
-- Last updated: 2026-06-20
+- Last updated: 2026-07-07
 - Last completed step: 10
 - Next step: 7 (optional additional fixture coverage for deeper nested/manual-route scenarios)
 - Owner: Codex (with repository maintainers)
@@ -91,3 +91,7 @@ When resuming later:
 - 2026-05-27: Completed release-doc pass for `v0.2.10`; refreshed release highlights, local-body visibility semantics, state/event integration notes, and machine-readable contract metadata.
 - 2026-06-20: Completed release-doc pass for `v0.2.11`; refreshed release highlights, link color pool load-time fill contract text, integration guidance, and machine-readable contract metadata.
 - 2026-06-20: Ran release validations: `npm run typecheck`, `npm test -- --watchAll=false`, `npm run build`, `npm run rollup-build-lib`, and `npm pack --dry-run`.
+- 2026-06-26: Completed release-doc pass for `v0.2.12`; refreshed release highlights, link-created target-port callback contract text, integration guidance, and machine-readable contract metadata.
+- 2026-06-26: Ran release validations: `npm run typecheck`, `npm test -- --watchAll=false`, `npm run build`, `npm run rollup-build-lib`, and `npm pack --dry-run`.
+- 2026-07-07: Completed release-doc pass for `v0.2.13`; refreshed release highlights, focus/navigation and delete-lifecycle API/event docs, and machine-readable contract metadata.
+- 2026-07-07: Ran release validations: `npm run typecheck`, `npm test -- --watchAll=false`, `npm run build`, `npm run rollup-build-lib`, and `npm pack --dry-run`.

package/docs/INTEGRATION_PLAYBOOK.md

@@ -21,6 +21,10 @@ Embed this library into another diagram host while preserving deterministic stat
 8. Set `ElementData.childElementInteraction` on parent elements when direct child nodes should stay selectable but not be draggable through built-in interaction.
 9. Set `ElementData.visible` and `ElementData.selectable` when hosts need hidden-but-retained nodes or visible-but-nonselectable element bodies; hidden elements hide only their own body while direct-owned ports/texts still follow the hidden parent and visible descendants remain available to built-in view helpers.
 10. Set `linkColorPoolPolicy` when hosts want random link colors on creation and optional load-time backfill for loaded links whose `style.stroke` is missing or blank.
+11. Create link labels with ordinary `TextData` by setting `ownerId` to the target link id; the stored `position` is midpoint-relative for link-owned text rather than a free world-space coordinate.
+12. Set `onCreateLinkTargetPort` when hosts need to customize the auto-created destination port for link-to-element drops; keep using `elementLinkConnecting` when the host needs to cancel the drop entirely.
+13. Use `focusElement(elementId, options?)` when the host needs to center one editor element in response to navigation, search, or external selection.
+14. Subscribe to `elementDoubleClick` and cancellable `...Deleting` events when the host needs double-click intent or pre-delete confirmation/guard logic.
 
 ## Path B: Engine-Only Adapter
 1. Implement `Renderer`:
@@ -37,10 +41,14 @@ Embed this library into another diagram host while preserving deterministic stat
   - host port/anchor -> `PortData`
   - host edge -> `LinkData`
   - host label -> `TextData`
+  - host edge label -> `TextData` with `ownerId = link.id`
 - Event mapping:
   - host click -> `setSelection` / `emitElementClick`-equivalent behavior
+  - host double click / double tap -> `elementDoubleClick`
   - host drag end -> `emitElementDrop`-equivalent payload
   - host link gesture -> `elementLinkStarted/Connecting/Ended` lifecycle
+  - optional host target-port shaping -> `onCreateLinkTargetPort(...)` for link-to-element preview/commit only
+  - host delete confirmation / veto surface -> cancellable `elementDeleting` / `portDeleting` / `linkDeleting` / `textDeleting`
 
 ## Behavioral Checklist Per Integration Step
 - Preconditions

package/docs/PORTING_CHECKLIST.md

@@ -32,14 +32,17 @@
 - Ensure host can emulate:
   - `elementDrop` + legacy `element-drop`
   - `paperClick`
+  - `elementDoubleClick`
   - `elementLinkStarted/Connecting/Ended`
   - `portMouseDown/portMouseUp`
-  - deletion and text lifecycle events (`portDeleted`, `linkDeleted`, `textDeleted`, `textUpdated`)
+  - cancellable delete lifecycle events (`elementDeleting`, `portDeleting`, `linkDeleting`, `textDeleting`)
+  - post-delete and text lifecycle events (`elementDeleted`, `portDeleted`, `linkDeleted`, `textDeleted`, `textUpdated`)
 
 ## 6. Verify Cascading Deletes
 - Deleting element should remove descendant ports, connected links, owned texts.
 - Deleting port should remove connected links and owned texts.
 - Deleting link should remove owned texts.
+- A veto from any `...Deleting` handler should abort that root delete request before mutation commit.
 
 ## 7. Run Fixture-Based Validation
 - Load fixtures from `fixtures/*.json`.

package/docs/STATE_INVARIANTS.md

@@ -39,12 +39,15 @@
 - Manual routing preserves interior bends on endpoint movement.
 - Links with unresolved source/target world positions are skipped by reroute/update paths.
 - Link visible-state requires both endpoint ports to remain visible.
+- Deleting a link cascades to any link-owned text labels.
 
 ## Text
 - `ownerId` can reference element, port, or link.
 - Owned text position is stored owner-relative.
+- Link-owned text stores owner-relative position as a local offset from the owning link midpoint.
 - Text with missing owner behaves as standalone world-position text.
 - Owned text visible-state follows its owner visibility when the owner resolves to an element, port, or link.
+- Link-owned text recomputes world position from the current link midpoint plus stored local offset.
 - Text interaction policy is persisted separately from style/layout metadata.
 - `interaction.movable = false` suppresses built-in drag without blocking selection or programmatic movement.
 - `interaction.editable = false` suppresses built-in editing without blocking selection or programmatic content updates.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcasvn-react-diagrams",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "dependencies": {
     "eventemitter3": "^5.0.1",
     "flatten-js": "^0.6.9",

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} />