orcasvn-react-diagrams 0.2.12 → 0.2.13

package/dist/cjs/index.js

@@ -4137,8 +4137,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({
@@ -4146,9 +4153,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) {
@@ -4229,7 +4233,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);
@@ -4323,7 +4334,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);
@@ -4408,7 +4426,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);
@@ -4603,40 +4628,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;
@@ -4689,6 +4696,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);
     };
@@ -5332,8 +5342,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; }));
@@ -5343,9 +5353,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) {
@@ -5376,11 +5390,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 });
         });
@@ -7265,15 +7412,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]);
@@ -9791,6 +9952,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);
@@ -10025,6 +10209,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') {

package/dist/cjs/types/api/createDiagramEditor.d.ts

@@ -1,4 +1,4 @@
-import { DiagramEngineHandle, Point, DiagramState, ElementShapeHoverControlActivationEvent, ElementShapeHoverControlInteractionEvent, ElementShapeHoverControls, EngineChangeEvent, EngineSelectionEvent, LinkTargetPortCreationHandler, LinkColorPoolPolicy, LinkRouteRefreshPolicy, ViewportFitOptions } from './types';
+import { DiagramEngineHandle, Point, DiagramState, ElementShapeHoverControlActivationEvent, ElementShapeHoverControlInteractionEvent, ElementShapeHoverControls, EngineChangeEvent, EngineSelectionEvent, LinkTargetPortCreationHandler, LinkColorPoolPolicy, LinkRouteRefreshPolicy, FocusElementOptions, ViewportFitOptions } from './types';
 import { type BuiltInShapeKind } from '../shapes';
 export type SimpleShape = {
     id: string;
@@ -41,6 +41,7 @@ export type DiagramEditorHandle = DiagramEngineHandle & {
     completeLinkToElement: (targetElementId: string, pointer: Point) => void;
     cancelLink: () => void;
     zoomToFitElements: (options?: ViewportFitOptions) => void;
+    focusElement: (elementId: string, options?: FocusElementOptions) => void;
     exportImage: (options?: DiagramImageExportOptions) => string;
     resize: (width: number, height: number) => void;
     setElementShapeHoverControls: (controls?: ElementShapeHoverControls) => void;

package/dist/cjs/types/api/types.d.ts

@@ -24,6 +24,9 @@ export type ViewportFitOptions = {
     minZoom?: number;
     maxZoom?: number;
 };
+export type FocusElementOptions = {
+    zoom?: number;
+};
 export type MoveConstraint = 'free' | 'inside' | 'border';
 export type TextInteractionPolicy = {
     movable?: boolean;
@@ -394,6 +397,11 @@ export type ElementPointerEvent = {
     pointer: EnginePointerInfo;
     isMulti: boolean;
 };
+export type ElementDoubleClickEvent = {
+    elementId: string;
+    pointer: EnginePointerInfo;
+    isMulti: boolean;
+};
 export type ElementMovedEvent = {
     elementId: string;
     oldWorld: Point;
@@ -418,18 +426,55 @@ export type GridLayoutChangedEvent = {
     beforeGridTemplate?: ElementLayoutGridRowTemplate[];
     afterGridTemplate: ElementLayoutGridRowTemplate[];
 };
+export type DeletionTrigger = 'direct' | 'selection' | 'cascade';
+export type DeletionRootRef = {
+    entity: 'element' | 'port' | 'link' | 'text';
+    id: string;
+};
+export type ElementDeletingEvent = {
+    elementId: string;
+    trigger: DeletionTrigger;
+    root: DeletionRootRef;
+    cancel: () => void;
+    cancelled: boolean;
+};
 export type ElementDeletedEvent = {
     elementId: string;
 };
+export type PortDeletingEvent = {
+    portId: string;
+    elementId: string;
+    trigger: DeletionTrigger;
+    root: DeletionRootRef;
+    cancel: () => void;
+    cancelled: boolean;
+};
 export type PortDeletedEvent = {
     portId: string;
     elementId: string;
 };
+export type LinkDeletingEvent = {
+    linkId: string;
+    sourcePortId: string;
+    targetPortId: string;
+    trigger: DeletionTrigger;
+    root: DeletionRootRef;
+    cancel: () => void;
+    cancelled: boolean;
+};
 export type LinkDeletedEvent = {
     linkId: string;
     sourcePortId: string;
     targetPortId: string;
 };
+export type TextDeletingEvent = {
+    textId: string;
+    ownerId?: string | null;
+    trigger: DeletionTrigger;
+    root: DeletionRootRef;
+    cancel: () => void;
+    cancelled: boolean;
+};
 export type TextDeletedEvent = {
     textId: string;
     ownerId?: string | null;
@@ -483,13 +528,18 @@ export type EngineEventMap = {
     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;

package/dist/cjs/types/displaybox/demos/deletionEventsDemo.d.ts

@@ -1,2 +1,4 @@
+import type { DiagramState } from '../../api';
 import type { DemoConfig } from '../types';
+export declare const createDeletionEventsState: () => DiagramState;
 export declare const deletionEventsDemoConfig: DemoConfig;

package/dist/cjs/types/displaybox/demos/focusElementDemo.d.ts

@@ -0,0 +1,4 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+export declare const createFocusElementState: () => DiagramState;
+export declare const focusElementDemoConfig: DemoConfig;

package/dist/cjs/types/engine/DiagramEngine.d.ts

@@ -120,6 +120,7 @@ export default class DiagramEngine {
     emitPortMouseDown(event: PortMouseEvent): void;
     emitPortMouseUp(event: PortMouseEvent): void;
     emitElementClick(elementId: string, pointer: EnginePointerInfo, isMulti: boolean): void;
+    emitElementDoubleClick(elementId: string, pointer: EnginePointerInfo, isMulti: boolean): void;
     emitElementLinkStarted(event: {
         sourcePortId: string;
         sourceElementId: string;
@@ -172,6 +173,14 @@ export default class DiagramEngine {
     private refreshLinksForRenderCycle;
     private normalizePortsForHostPolicies;
     private computeRemovalDiff;
+    private resolveDeletionRoot;
+    private applyRemovalCommand;
+    private planRemoval;
+    private emitDeletionLifecycleEvents;
+    private emitElementDeleting;
+    private emitPortDeleting;
+    private emitLinkDeleting;
+    private emitTextDeleting;
     private emitEntityDeletionEvents;
 }
 export declare const createDiagramEngine: (config: DiagramEngineConfig) => DiagramEngineHandle;