orcasvn-react-diagrams 0.2.12 → 0.2.13

package/dist/esm/index.js

@@ -4135,8 +4135,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({
@@ -4144,9 +4151,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) {
@@ -4227,7 +4231,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);
@@ -4321,7 +4332,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);
@@ -4406,7 +4424,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);
@@ -4601,40 +4626,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;
@@ -4687,6 +4694,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);
     };
@@ -5330,8 +5340,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; }));
@@ -5341,9 +5351,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) {
@@ -5374,11 +5388,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 });
         });
@@ -7263,15 +7410,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]);
@@ -9789,6 +9950,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);
@@ -10023,6 +10207,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') {