orcasvn-react-diagrams 0.2.12 → 0.2.13

package/dist/esm/examples.js

@@ -4384,7 +4384,7 @@ var createDeletionEventsState = function () { return ({
 var deletionEventsDemoConfig = {
     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,
@@ -8561,8 +8561,15 @@ var DiagramEngine = /** @class */ (function () {
         var _this = this;
         var _a;
         var existing = this.model.getElement(id);
-        var parentId = (_a = existing === null || existing === void 0 ? void 0 : existing.parentId) !== null && _a !== void 0 ? _a : null;
+        if (!existing)
+            return;
+        var parentId = (_a = existing.parentId) !== null && _a !== void 0 ? _a : null;
         var before = this.model.toState();
+        var root = { entity: 'element', id: id };
+        var plannedRemoval = this.planRemoval(before, root);
+        if (!plannedRemoval || this.emitDeletionLifecycleEvents(plannedRemoval.removed, root, 'direct')) {
+            return;
+        }
         this.commandQueue.run(createRemoveElementCommand(id), this.model);
         var removal = this.computeRemovalDiff(before);
         var allPatches = this.mutationPipeline.run({
@@ -8570,9 +8577,6 @@ var DiagramEngine = /** @class */ (function () {
             layoutSteps: [function () { return _this.applyLayoutCascade(parentId); }],
         });
         this.emitChange(allPatches);
-        if (existing) {
-            this.events.emit('elementDeleted', { elementId: id });
-        }
         this.emitEntityDeletionEvents(removal.removed);
     };
     DiagramEngine.prototype.addPortToElement = function (elementId, port) {
@@ -8653,7 +8657,14 @@ var DiagramEngine = /** @class */ (function () {
         }
     };
     DiagramEngine.prototype.removePort = function (id) {
+        if (!this.model.getPort(id))
+            return;
         var before = this.model.toState();
+        var root = { entity: 'port', id: id };
+        var plannedRemoval = this.planRemoval(before, root);
+        if (!plannedRemoval || this.emitDeletionLifecycleEvents(plannedRemoval.removed, root, 'direct')) {
+            return;
+        }
         this.commandQueue.run(createRemovePortCommand(id), this.model);
         var removal = this.computeRemovalDiff(before);
         this.emitChange(removal.patches);
@@ -8747,7 +8758,14 @@ var DiagramEngine = /** @class */ (function () {
         }
     };
     DiagramEngine.prototype.removeLink = function (id) {
+        if (!this.model.getLink(id))
+            return;
         var before = this.model.toState();
+        var root = { entity: 'link', id: id };
+        var plannedRemoval = this.planRemoval(before, root);
+        if (!plannedRemoval || this.emitDeletionLifecycleEvents(plannedRemoval.removed, root, 'direct')) {
+            return;
+        }
         this.commandQueue.run(createRemoveLinkCommand(id), this.model);
         var removal = this.computeRemovalDiff(before);
         this.emitChange(removal.patches);
@@ -8832,7 +8850,14 @@ var DiagramEngine = /** @class */ (function () {
         this.emitChange(patches);
     };
     DiagramEngine.prototype.removeText = function (id) {
+        if (!this.model.getText(id))
+            return;
         var before = this.model.toState();
+        var root = { entity: 'text', id: id };
+        var plannedRemoval = this.planRemoval(before, root);
+        if (!plannedRemoval || this.emitDeletionLifecycleEvents(plannedRemoval.removed, root, 'direct')) {
+            return;
+        }
         this.commandQueue.run(createRemoveTextCommand(id), this.model);
         var removal = this.computeRemovalDiff(before);
         this.emitChange(removal.patches);
@@ -9027,40 +9052,22 @@ var DiagramEngine = /** @class */ (function () {
         if (selected.length === 0)
             return;
         var before = this.model.toState();
-        var elementIds = [];
-        selected.forEach(function (id) {
-            if (_this.model.getElement(id))
-                elementIds.push(id);
-            else if (_this.model.getPort(id))
-                ;
-            else if (_this.model.getLink(id))
-                ;
-            else if (_this.model.getText(id))
-                ;
-        });
         selected.forEach(function (id) {
-            if (_this.model.getElement(id)) {
-                _this.commandQueue.run(createRemoveElementCommand(id), _this.model);
+            var root = _this.resolveDeletionRoot(id);
+            if (!root)
                 return;
-            }
-            if (_this.model.getPort(id)) {
-                _this.commandQueue.run(createRemovePortCommand(id), _this.model);
-                return;
-            }
-            if (_this.model.getLink(id)) {
-                _this.commandQueue.run(createRemoveLinkCommand(id), _this.model);
+            var currentState = _this.model.toState();
+            var plannedRemoval = _this.planRemoval(currentState, root);
+            if (!plannedRemoval || _this.emitDeletionLifecycleEvents(plannedRemoval.removed, root, 'selection')) {
                 return;
             }
-            if (_this.model.getText(id)) {
-                _this.commandQueue.run(createRemoveTextCommand(id), _this.model);
-            }
+            _this.applyRemovalCommand(root);
         });
         var removal = this.computeRemovalDiff(before);
+        if (removal.patches.length === 0)
+            return;
         this.emitChange(removal.patches);
         this.emitEntityDeletionEvents(removal.removed);
-        elementIds.forEach(function (elementId) { return _this.events.emit('elementDeleted', { elementId: elementId }); });
-        this.selection.clear();
-        this.emitSelection();
     };
     DiagramEngine.prototype.setViewport = function (pan, zoom) {
         var hasPanChange = this.viewport.pan.x !== pan.x || this.viewport.pan.y !== pan.y;
@@ -9113,6 +9120,9 @@ var DiagramEngine = /** @class */ (function () {
     DiagramEngine.prototype.emitElementClick = function (elementId, pointer, isMulti) {
         this.events.emit('elementClick', { elementId: elementId, pointer: pointer, isMulti: isMulti });
     };
+    DiagramEngine.prototype.emitElementDoubleClick = function (elementId, pointer, isMulti) {
+        this.events.emit('elementDoubleClick', { elementId: elementId, pointer: pointer, isMulti: isMulti });
+    };
     DiagramEngine.prototype.emitElementLinkStarted = function (event) {
         this.events.emit('elementLinkStarted', event);
     };
@@ -9756,8 +9766,8 @@ var DiagramEngine = /** @class */ (function () {
         });
         return { patches: normalizedPatches, movedPortIds: Array.from(movedPortIds) };
     };
-    DiagramEngine.prototype.computeRemovalDiff = function (before) {
-        var after = this.model.toState();
+    DiagramEngine.prototype.computeRemovalDiff = function (before, after) {
+        if (after === void 0) { after = this.model.toState(); }
         var removedPatches = [];
         var beforeElements = new Set(before.elements.map(function (element) { return element.id; }));
         var beforePorts = new Set(before.ports.map(function (port) { return port.id; }));
@@ -9767,9 +9777,13 @@ var DiagramEngine = /** @class */ (function () {
         var afterPorts = new Set(after.ports.map(function (port) { return port.id; }));
         var afterLinks = new Set(after.links.map(function (link) { return link.id; }));
         var afterTexts = new Set(after.texts.map(function (text) { return text.id; }));
+        var removedElements = [];
         beforeElements.forEach(function (id) {
             if (!afterElements.has(id))
                 removedPatches.push(patchRemove('element', id));
+            var removedElement = before.elements.find(function (element) { return element.id === id; });
+            if (!afterElements.has(id) && removedElement)
+                removedElements.push(removedElement);
         });
         var removedPorts = [];
         beforePorts.forEach(function (id) {
@@ -9800,11 +9814,144 @@ var DiagramEngine = /** @class */ (function () {
         });
         return {
             patches: removedPatches,
-            removed: { ports: removedPorts, links: removedLinks, texts: removedTexts },
+            removed: { elements: removedElements, ports: removedPorts, links: removedLinks, texts: removedTexts },
         };
     };
+    DiagramEngine.prototype.resolveDeletionRoot = function (id) {
+        if (this.model.getElement(id))
+            return { entity: 'element', id: id };
+        if (this.model.getPort(id))
+            return { entity: 'port', id: id };
+        if (this.model.getLink(id))
+            return { entity: 'link', id: id };
+        if (this.model.getText(id))
+            return { entity: 'text', id: id };
+        return null;
+    };
+    DiagramEngine.prototype.applyRemovalCommand = function (root) {
+        if (root.entity === 'element') {
+            this.commandQueue.run(createRemoveElementCommand(root.id), this.model);
+            return;
+        }
+        if (root.entity === 'port') {
+            this.commandQueue.run(createRemovePortCommand(root.id), this.model);
+            return;
+        }
+        if (root.entity === 'link') {
+            this.commandQueue.run(createRemoveLinkCommand(root.id), this.model);
+            return;
+        }
+        this.commandQueue.run(createRemoveTextCommand(root.id), this.model);
+    };
+    DiagramEngine.prototype.planRemoval = function (before, root) {
+        var tempModel = new DiagramModel();
+        tempModel.load(before);
+        if (root.entity === 'element') {
+            tempModel.removeElement(root.id);
+        }
+        else if (root.entity === 'port') {
+            tempModel.removePort(root.id);
+        }
+        else if (root.entity === 'link') {
+            tempModel.removeLink(root.id);
+        }
+        else {
+            tempModel.removeText(root.id);
+        }
+        return this.computeRemovalDiff(before, tempModel.toState());
+    };
+    DiagramEngine.prototype.emitDeletionLifecycleEvents = function (removed, root, rootTrigger) {
+        for (var _i = 0, _a = removed.elements; _i < _a.length; _i++) {
+            var element = _a[_i];
+            var trigger = root.entity === 'element' && element.id === root.id ? rootTrigger : 'cascade';
+            if (this.emitElementDeleting({
+                elementId: element.id,
+                trigger: trigger,
+                root: root,
+            })) {
+                return true;
+            }
+        }
+        for (var _b = 0, _c = removed.ports; _b < _c.length; _b++) {
+            var port = _c[_b];
+            var trigger = root.entity === 'port' && port.id === root.id ? rootTrigger : 'cascade';
+            if (this.emitPortDeleting({
+                portId: port.id,
+                elementId: port.elementId,
+                trigger: trigger,
+                root: root,
+            })) {
+                return true;
+            }
+        }
+        for (var _d = 0, _e = removed.links; _d < _e.length; _d++) {
+            var link = _e[_d];
+            var trigger = root.entity === 'link' && link.id === root.id ? rootTrigger : 'cascade';
+            if (this.emitLinkDeleting({
+                linkId: link.id,
+                sourcePortId: link.sourcePortId,
+                targetPortId: link.targetPortId,
+                trigger: trigger,
+                root: root,
+            })) {
+                return true;
+            }
+        }
+        for (var _f = 0, _g = removed.texts; _f < _g.length; _f++) {
+            var text = _g[_f];
+            var trigger = root.entity === 'text' && text.id === root.id ? rootTrigger : 'cascade';
+            if (this.emitTextDeleting({
+                textId: text.id,
+                ownerId: text.ownerId,
+                trigger: trigger,
+                root: root,
+            })) {
+                return true;
+            }
+        }
+        return false;
+    };
+    DiagramEngine.prototype.emitElementDeleting = function (event) {
+        var cancelled = false;
+        var payload = __assign(__assign({}, event), { cancelled: false, cancel: function () {
+                cancelled = true;
+                payload.cancelled = true;
+            } });
+        this.events.emit('elementDeleting', payload);
+        return cancelled || payload.cancelled;
+    };
+    DiagramEngine.prototype.emitPortDeleting = function (event) {
+        var cancelled = false;
+        var payload = __assign(__assign({}, event), { cancelled: false, cancel: function () {
+                cancelled = true;
+                payload.cancelled = true;
+            } });
+        this.events.emit('portDeleting', payload);
+        return cancelled || payload.cancelled;
+    };
+    DiagramEngine.prototype.emitLinkDeleting = function (event) {
+        var cancelled = false;
+        var payload = __assign(__assign({}, event), { cancelled: false, cancel: function () {
+                cancelled = true;
+                payload.cancelled = true;
+            } });
+        this.events.emit('linkDeleting', payload);
+        return cancelled || payload.cancelled;
+    };
+    DiagramEngine.prototype.emitTextDeleting = function (event) {
+        var cancelled = false;
+        var payload = __assign(__assign({}, event), { cancelled: false, cancel: function () {
+                cancelled = true;
+                payload.cancelled = true;
+            } });
+        this.events.emit('textDeleting', payload);
+        return cancelled || payload.cancelled;
+    };
     DiagramEngine.prototype.emitEntityDeletionEvents = function (removed) {
         var _this = this;
+        removed.elements.forEach(function (element) {
+            _this.events.emit('elementDeleted', { elementId: element.id });
+        });
         removed.ports.forEach(function (port) {
             _this.events.emit('portDeleted', { portId: port.id, elementId: port.elementId });
         });
@@ -11643,15 +11790,29 @@ var KonvaInteraction = /** @class */ (function () {
         this.stage.on(upEvents, pointerUp);
         this.handlers.push([upEvents, pointerUp]);
         var doubleClick = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            var event = args[0];
+            var nativeEvent = event === null || event === void 0 ? void 0 : event.evt;
             var point = _this.getPointerPosition();
             if (!point)
                 return;
             var hit = _this.resolveHit(point);
-            if (!hit || hit.type !== 'text')
+            if (!hit)
                 return;
-            if (!_this.isTextEditable(hit.id))
+            if (hit.type === 'text') {
+                if (!_this.isTextEditable(hit.id))
+                    return;
+                _this.startTextEdit(hit.id);
+                return;
+            }
+            if (hit.type !== 'element')
                 return;
-            _this.startTextEdit(hit.id);
+            var isMulti = Boolean(nativeEvent && (nativeEvent.ctrlKey || nativeEvent.metaKey || nativeEvent.shiftKey));
+            var pointerInfo = _this.buildPointerInfo(point, nativeEvent);
+            _this.engine.emitElementDoubleClick(hit.id, pointerInfo, isMulti);
         };
         this.stage.on('dblclick dbltap', doubleClick);
         this.handlers.push(['dblclick dbltap', doubleClick]);
@@ -14169,6 +14330,29 @@ var resolveViewportFitTransform = function (state, viewportSize, options) {
     };
     return { pan: pan, zoom: zoom };
 };
+var resolveFocusElementTransform = function (state, elementId, viewportSize, currentZoom, options) {
+    var elementsById = new Map(state.elements.map(function (element) { return [element.id, element]; }));
+    var element = elementsById.get(elementId);
+    if (!element)
+        return null;
+    var position = resolveElementWorldPositionInState(elementId, elementsById);
+    if (!position)
+        return null;
+    var safeWidth = Math.max(1, viewportSize.width);
+    var safeHeight = Math.max(1, viewportSize.height);
+    var requestedZoom = options === null || options === void 0 ? void 0 : options.zoom;
+    var zoom = typeof requestedZoom === 'number' && Number.isFinite(requestedZoom)
+        ? clamp(requestedZoom, DEFAULT_VIEWPORT_FIT_MIN_ZOOM, DEFAULT_VIEWPORT_FIT_MAX_ZOOM)
+        : currentZoom;
+    var safeZoom = zoom === 0 ? 1 : zoom;
+    var centerX = position.x + element.size.width / 2;
+    var centerY = position.y + element.size.height / 2;
+    var pan = {
+        x: safeWidth / 2 - centerX * safeZoom,
+        y: safeHeight / 2 - centerY * safeZoom,
+    };
+    return { pan: pan, zoom: zoom };
+};
 var resolveFitToContentPadding = function (fitToContent) {
     if (typeof fitToContent === 'object' && typeof fitToContent.padding === 'number') {
         return Math.max(0, fitToContent.padding);
@@ -14403,6 +14587,12 @@ var createDiagramEditor = function (config) {
                 return;
             engine.setViewport(transform.pan, transform.zoom);
         },
+        focusElement: function (elementId, options) {
+            var transform = resolveFocusElementTransform(engine.getState(), elementId, { width: stageWidth, height: stageHeight }, engine.getViewport().zoom, options);
+            if (!transform)
+                return;
+            engine.setViewport(transform.pan, transform.zoom);
+        },
         exportImage: function (options) {
             engine.render();
             if (typeof stage.toDataURL !== 'function') {
@@ -16432,10 +16622,21 @@ var ZoomToFitElementsDemo = function () { return (React.createElement(SimpleDemo
             React.createElement("li", null, "Use `Run Zoom-To-Fit (Padding 48)` to confirm optional padding keeps extra breathing room around content.")))) })); };
 
 var initialPayloads = {
+    elementDeleting: null,
     elementDeleted: null,
+    portDeleting: null,
     portDeleted: null,
+    linkDeleting: null,
     linkDeleted: null,
+    textDeleting: null,
     textDeleted: null,
+    elementDoubleClick: null,
+};
+var initialCancelFlags = {
+    element: false,
+    port: false,
+    link: false,
+    text: false,
 };
 var eventBoxStyle = {
     width: '100%',
@@ -16468,21 +16669,77 @@ var DeletionEventsDemo = function () {
         actionHelpers: actionHelpers,
     });
     var _f = useState(initialPayloads), payloads = _f[0], setPayloads = _f[1];
+    var _g = useState(initialCancelFlags), cancelFlags = _g[0], setCancelFlags = _g[1];
+    var _h = useState([]), eventLog = _h[0], setEventLog = _h[1];
+    var appendLog = React.useCallback(function (eventName, payload) {
+        setEventLog(function (prev) { return __spreadArray([
+            "".concat(eventName, ": ").concat(JSON.stringify(payload))
+        ], prev, true).slice(0, 18); });
+    }, []);
     useEffect(function () {
         var editor = editorRef.current;
         if (!editor)
             return undefined;
         setPayloads(initialPayloads);
+        setEventLog([]);
         var unsubs = [
-            editor.on('elementDeleted', function (payload) { return setPayloads(function (prev) { return (__assign(__assign({}, prev), { elementDeleted: payload })); }); }),
-            editor.on('portDeleted', function (payload) { return setPayloads(function (prev) { return (__assign(__assign({}, prev), { portDeleted: payload })); }); }),
-            editor.on('linkDeleted', function (payload) { return setPayloads(function (prev) { return (__assign(__assign({}, prev), { linkDeleted: payload })); }); }),
-            editor.on('textDeleted', function (payload) { return setPayloads(function (prev) { return (__assign(__assign({}, prev), { textDeleted: payload })); }); }),
+            editor.on('elementDeleting', function (payload) {
+                if (cancelFlags.element) {
+                    payload.cancel();
+                }
+                setPayloads(function (prev) { return (__assign(__assign({}, prev), { elementDeleting: payload })); });
+                appendLog('elementDeleting', payload);
+            }),
+            editor.on('elementDeleted', function (payload) {
+                setPayloads(function (prev) { return (__assign(__assign({}, prev), { elementDeleted: payload })); });
+                appendLog('elementDeleted', payload);
+            }),
+            editor.on('portDeleting', function (payload) {
+                if (cancelFlags.port) {
+                    payload.cancel();
+                }
+                setPayloads(function (prev) { return (__assign(__assign({}, prev), { portDeleting: payload })); });
+                appendLog('portDeleting', payload);
+            }),
+            editor.on('portDeleted', function (payload) {
+                setPayloads(function (prev) { return (__assign(__assign({}, prev), { portDeleted: payload })); });
+                appendLog('portDeleted', payload);
+            }),
+            editor.on('linkDeleting', function (payload) {
+                if (cancelFlags.link) {
+                    payload.cancel();
+                }
+                setPayloads(function (prev) { return (__assign(__assign({}, prev), { linkDeleting: payload })); });
+                appendLog('linkDeleting', payload);
+            }),
+            editor.on('linkDeleted', function (payload) {
+                setPayloads(function (prev) { return (__assign(__assign({}, prev), { linkDeleted: payload })); });
+                appendLog('linkDeleted', payload);
+            }),
+            editor.on('textDeleting', function (payload) {
+                if (cancelFlags.text) {
+                    payload.cancel();
+                }
+                setPayloads(function (prev) { return (__assign(__assign({}, prev), { textDeleting: payload })); });
+                appendLog('textDeleting', payload);
+            }),
+            editor.on('textDeleted', function (payload) {
+                setPayloads(function (prev) { return (__assign(__assign({}, prev), { textDeleted: payload })); });
+                appendLog('textDeleted', payload);
+            }),
+            editor.on('elementDoubleClick', function (payload) {
+                setPayloads(function (prev) { return (__assign(__assign({}, prev), { elementDoubleClick: payload })); });
+                appendLog('elementDoubleClick', payload);
+            }),
         ];
         return function () {
-            unsubs.forEach(function (unsub) { return unsub(); });
+            unsubs.forEach(function (unsub) {
+                if (typeof unsub === 'function') {
+                    unsub();
+                }
+            });
         };
-    }, [editorRef]);
+    }, [appendLog, cancelFlags, editorRef]);
     var hasPort = ((_a = diagramState === null || diagramState === void 0 ? void 0 : diagramState.ports) !== null && _a !== void 0 ? _a : []).some(function (port) { return port.id === 'delete-source-free-port'; });
     var hasLink = ((_b = diagramState === null || diagramState === void 0 ? void 0 : diagramState.links) !== null && _b !== void 0 ? _b : []).some(function (link) { return link.id === 'delete-link'; });
     var hasText = ((_c = diagramState === null || diagramState === void 0 ? void 0 : diagramState.texts) !== null && _c !== void 0 ? _c : []).some(function (text) { return text.id === 'delete-free-text'; });
@@ -16491,29 +16748,67 @@ var DeletionEventsDemo = function () {
         React.createElement("div", { style: { marginBottom: 12 } },
             React.createElement("h2", { style: { marginTop: 0, marginBottom: 4 } }, demo.title),
             React.createElement("p", { style: { marginTop: 0 } },
-                "Use direct delete buttons for port/link/text, then delete ",
+                "Use the direct delete buttons for port/link/text, then delete ",
                 React.createElement("code", null, "delete-source"),
-                " to trigger cascade removals. Latest payloads are shown below for integration debugging.")),
+                " to trigger cascades. Turn cancellation toggles on to veto deletes before commit, double click an element body to log",
+                React.createElement("code", null, " elementDoubleClick"),
+                ", and use the batch-selection helper before pressing Delete to verify partial success.")),
         React.createElement(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 }),
         React.createElement("div", { style: { display: 'grid', gap: 12, marginBottom: 12 } },
             React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 8 } },
                 React.createElement("button", { type: "button", onClick: function () { var _a; return (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.removePort('delete-source-free-port'); }, disabled: !hasPort }, "Delete Port"),
                 React.createElement("button", { type: "button", onClick: function () { var _a; return (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.removeLink('delete-link'); }, disabled: !hasLink }, "Delete Link"),
                 React.createElement("button", { type: "button", onClick: function () { var _a; return (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.removeText('delete-free-text'); }, disabled: !hasText }, "Delete Text"),
-                React.createElement("button", { type: "button", onClick: function () { var _a; return (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.removeElement('delete-source'); }, disabled: !hasCascadeElement }, "Delete Element (Cascade)")),
-            React.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 12 } },
+                React.createElement("button", { type: "button", onClick: function () { var _a; return (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.removeElement('delete-source'); }, disabled: !hasCascadeElement }, "Delete Element (Cascade)"),
+                React.createElement("button", { type: "button", onClick: function () { var _a; return (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.setSelection(['delete-free-text', 'delete-target']); }, disabled: !hasText }, "Prepare Batch Delete Selection")),
+            React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 12 } },
+                React.createElement("label", null,
+                    React.createElement("input", { type: "checkbox", checked: cancelFlags.element, onChange: function (event) { return setCancelFlags(function (prev) { return (__assign(__assign({}, prev), { element: event.target.checked })); }); } }),
+                    ' ',
+                    "Cancel elementDeleting"),
+                React.createElement("label", null,
+                    React.createElement("input", { type: "checkbox", checked: cancelFlags.port, onChange: function (event) { return setCancelFlags(function (prev) { return (__assign(__assign({}, prev), { port: event.target.checked })); }); } }),
+                    ' ',
+                    "Cancel portDeleting"),
+                React.createElement("label", null,
+                    React.createElement("input", { type: "checkbox", checked: cancelFlags.link, onChange: function (event) { return setCancelFlags(function (prev) { return (__assign(__assign({}, prev), { link: event.target.checked })); }); } }),
+                    ' ',
+                    "Cancel linkDeleting"),
+                React.createElement("label", null,
+                    React.createElement("input", { type: "checkbox", checked: cancelFlags.text, onChange: function (event) { return setCancelFlags(function (prev) { return (__assign(__assign({}, prev), { text: event.target.checked })); }); } }),
+                    ' ',
+                    "Cancel textDeleting")),
+            React.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 12 } },
+                React.createElement("div", null,
+                    React.createElement("label", { style: { display: 'block', fontWeight: 600, marginBottom: 6 } }, "elementDeleting"),
+                    React.createElement("textarea", { readOnly: true, value: payloads.elementDeleting ? JSON.stringify(payloads.elementDeleting, null, 2) : '', style: eventBoxStyle })),
                 React.createElement("div", null,
                     React.createElement("label", { style: { display: 'block', fontWeight: 600, marginBottom: 6 } }, "elementDeleted"),
                     React.createElement("textarea", { readOnly: true, value: payloads.elementDeleted ? JSON.stringify(payloads.elementDeleted, null, 2) : '', style: eventBoxStyle })),
+                React.createElement("div", null,
+                    React.createElement("label", { style: { display: 'block', fontWeight: 600, marginBottom: 6 } }, "portDeleting"),
+                    React.createElement("textarea", { readOnly: true, value: payloads.portDeleting ? JSON.stringify(payloads.portDeleting, null, 2) : '', style: eventBoxStyle })),
                 React.createElement("div", null,
                     React.createElement("label", { style: { display: 'block', fontWeight: 600, marginBottom: 6 } }, "portDeleted"),
                     React.createElement("textarea", { readOnly: true, value: payloads.portDeleted ? JSON.stringify(payloads.portDeleted, null, 2) : '', style: eventBoxStyle })),
+                React.createElement("div", null,
+                    React.createElement("label", { style: { display: 'block', fontWeight: 600, marginBottom: 6 } }, "linkDeleting"),
+                    React.createElement("textarea", { readOnly: true, value: payloads.linkDeleting ? JSON.stringify(payloads.linkDeleting, null, 2) : '', style: eventBoxStyle })),
                 React.createElement("div", null,
                     React.createElement("label", { style: { display: 'block', fontWeight: 600, marginBottom: 6 } }, "linkDeleted"),
                     React.createElement("textarea", { readOnly: true, value: payloads.linkDeleted ? JSON.stringify(payloads.linkDeleted, null, 2) : '', style: eventBoxStyle })),
+                React.createElement("div", null,
+                    React.createElement("label", { style: { display: 'block', fontWeight: 600, marginBottom: 6 } }, "textDeleting"),
+                    React.createElement("textarea", { readOnly: true, value: payloads.textDeleting ? JSON.stringify(payloads.textDeleting, null, 2) : '', style: eventBoxStyle })),
                 React.createElement("div", null,
                     React.createElement("label", { style: { display: 'block', fontWeight: 600, marginBottom: 6 } }, "textDeleted"),
-                    React.createElement("textarea", { readOnly: true, value: payloads.textDeleted ? JSON.stringify(payloads.textDeleted, null, 2) : '', style: eventBoxStyle })))),
+                    React.createElement("textarea", { readOnly: true, value: payloads.textDeleted ? JSON.stringify(payloads.textDeleted, null, 2) : '', style: eventBoxStyle })),
+                React.createElement("div", null,
+                    React.createElement("label", { style: { display: 'block', fontWeight: 600, marginBottom: 6 } }, "elementDoubleClick"),
+                    React.createElement("textarea", { readOnly: true, value: payloads.elementDoubleClick ? JSON.stringify(payloads.elementDoubleClick, null, 2) : '', style: eventBoxStyle }))),
+            React.createElement("div", null,
+                React.createElement("label", { style: { display: 'block', fontWeight: 600, marginBottom: 6 } }, "Event Log"),
+                React.createElement("textarea", { readOnly: true, value: eventLog.join('\n'), style: __assign(__assign({}, eventBoxStyle), { minHeight: 180 }) }))),
         React.createElement(DisplayBoxStage, { containerRef: containerRef })));
 };
 
@@ -17322,6 +17617,89 @@ var VertexControlLinkSessionDemo = function () {
         React.createElement(DisplayBoxStage, { containerRef: containerRef, stageStyle: gridStageStyle })));
 };
 
+var createFocusElementState = function () { return ({
+    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 },
+        },
+    ],
+}); };
+var focusLeftAction = {
+    id: 'focus-left-default',
+    label: 'Focus Left (Keep Zoom)',
+    run: function (editor) {
+        editor.focusElement('focus-left');
+    },
+};
+var focusRightZoomAction = {
+    id: 'focus-right-zoom',
+    label: 'Focus Right (Zoom 2.2)',
+    run: function (editor) {
+        editor.focusElement('focus-right', { zoom: 2.2 });
+    },
+};
+var focusChildZoomAction = {
+    id: 'focus-child-zoom',
+    label: 'Focus Nested Child (Zoom 1.8)',
+    run: function (editor) {
+        editor.focusElement('focus-child', { zoom: 1.8 });
+    },
+};
+var fitAllAction = {
+    id: 'focus-fit-all',
+    label: 'Zoom-To-Fit For Comparison',
+    run: function (editor) {
+        editor.zoomToFitElements({ padding: 40 });
+    },
+};
+var focusElementDemoConfig = {
+    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],
+};
+
 var wrapSimpleDemo = function (demo) { return function () { return React.createElement(SimpleDemo, { demo: demo }); }; };
 var menuGroupOrder = {
     basics: 1,
@@ -17360,6 +17738,7 @@ var basics = [
     registerDemo(selectionDemoConfig, wrapSimpleDemo(selectionDemoConfig), 'basics', 4),
     registerDemo(elementVisibilitySelectionDemoConfig, wrapSimpleDemo(elementVisibilitySelectionDemoConfig), 'basics', 5),
     registerDemo(zoomToFitElementsDemoConfig, ZoomToFitElementsDemo, 'basics', 6),
+    registerDemo(focusElementDemoConfig, wrapSimpleDemo(focusElementDemoConfig), 'basics', 7),
 ];
 var layoutAndText = [
     registerDemo(textDemoConfig, TextLayoutDemo, 'layoutText', 1),