orcasvn-react-diagrams 0.2.8 → 0.2.9

package/dist/cjs/index.js

@@ -87,6 +87,8 @@ var ElementModel = /** @class */ (function () {
         this.style = data.style;
         this.portIds = data.portIds ? __spreadArray([], data.portIds, true) : [];
         this.textIds = data.textIds ? __spreadArray([], data.textIds, true) : [];
+        this.visible = data.visible;
+        this.selectable = data.selectable;
         this.parentId = (_a = data.parentId) !== null && _a !== void 0 ? _a : null;
         this.moveMode = data.moveMode;
         this.anchorCenter = data.anchorCenter;
@@ -125,6 +127,8 @@ var ElementModel = /** @class */ (function () {
             style: this.style,
             portIds: __spreadArray([], this.portIds, true),
             textIds: __spreadArray([], this.textIds, true),
+            visible: this.visible,
+            selectable: this.selectable,
             parentId: this.parentId,
             moveMode: this.moveMode,
             anchorCenter: this.anchorCenter,
@@ -528,6 +532,29 @@ var DiagramModel = /** @class */ (function () {
     DiagramModel.prototype.getElement = function (id) {
         return this.elements.get(id);
     };
+    DiagramModel.prototype.isElementVisible = function (id) {
+        var element = this.elements.get(id);
+        if (!element)
+            return false;
+        if (element.visible === false)
+            return false;
+        var currentParentId = element.parentId;
+        while (currentParentId) {
+            var parent_1 = this.elements.get(currentParentId);
+            if (!parent_1)
+                break;
+            if (parent_1.visible === false)
+                return false;
+            currentParentId = parent_1.parentId;
+        }
+        return true;
+    };
+    DiagramModel.prototype.isElementSelectable = function (id) {
+        var element = this.elements.get(id);
+        if (!element)
+            return false;
+        return this.isElementVisible(id) && element.selectable !== false;
+    };
     DiagramModel.prototype.setElementLayout = function (id, layout) {
         var element = this.elements.get(id);
         if (!element)
@@ -546,6 +573,12 @@ var DiagramModel = /** @class */ (function () {
     DiagramModel.prototype.getPort = function (id) {
         return this.ports.get(id);
     };
+    DiagramModel.prototype.isPortVisible = function (id) {
+        var port = this.ports.get(id);
+        if (!port)
+            return false;
+        return this.isElementVisible(port.elementId);
+    };
     DiagramModel.prototype.getPortWorldPosition = function (id) {
         var port = this.ports.get(id);
         if (!port)
@@ -561,6 +594,16 @@ var DiagramModel = /** @class */ (function () {
     DiagramModel.prototype.getLink = function (id) {
         return this.links.get(id);
     };
+    DiagramModel.prototype.isLinkVisible = function (id) {
+        var link = this.links.get(id);
+        if (!link)
+            return false;
+        var sourcePort = this.ports.get(link.sourcePortId);
+        var targetPort = this.ports.get(link.targetPortId);
+        var sourceVisible = sourcePort ? this.isPortVisible(sourcePort.id) : true;
+        var targetVisible = targetPort ? this.isPortVisible(targetPort.id) : true;
+        return sourceVisible && targetVisible;
+    };
     DiagramModel.prototype.getLinkMidpoint = function (id) {
         var link = this.links.get(id);
         if (!link)
@@ -570,6 +613,23 @@ var DiagramModel = /** @class */ (function () {
     DiagramModel.prototype.getText = function (id) {
         return this.texts.get(id);
     };
+    DiagramModel.prototype.isTextVisible = function (id) {
+        var text = this.texts.get(id);
+        if (!text)
+            return false;
+        if (!text.ownerId)
+            return true;
+        if (this.elements.has(text.ownerId)) {
+            return this.isElementVisible(text.ownerId);
+        }
+        if (this.ports.has(text.ownerId)) {
+            return this.isPortVisible(text.ownerId);
+        }
+        if (this.links.has(text.ownerId)) {
+            return this.isLinkVisible(text.ownerId);
+        }
+        return true;
+    };
     DiagramModel.prototype.getTextWorldPosition = function (id) {
         var text = this.texts.get(id);
         if (!text)
@@ -758,18 +818,18 @@ var DiagramModel = /** @class */ (function () {
         }
         var current = element;
         while (current === null || current === void 0 ? void 0 : current.parentId) {
-            var parent_1 = this.elements.get(current.parentId);
-            if (!parent_1)
+            var parent_2 = this.elements.get(current.parentId);
+            if (!parent_2)
                 break;
-            var parentX = parent_1.position.x;
-            var parentY = parent_1.position.y;
-            if (parent_1.anchorCenter) {
-                parentX -= parent_1.size.width / 2;
-                parentY -= parent_1.size.height / 2;
+            var parentX = parent_2.position.x;
+            var parentY = parent_2.position.y;
+            if (parent_2.anchorCenter) {
+                parentX -= parent_2.size.width / 2;
+                parentY -= parent_2.size.height / 2;
             }
             x += parentX;
             y += parentY;
-            current = parent_1;
+            current = parent_2;
         }
         return { x: x, y: y };
     };
@@ -4332,16 +4392,38 @@ var DiagramEngine = /** @class */ (function () {
         this.emitEntityDeletionEvents(removal.removed);
     };
     DiagramEngine.prototype.setSelection = function (ids) {
-        this.selection.set(ids);
+        this.selection.set(this.normalizeSelectionIds(ids));
         this.emitSelection();
     };
     DiagramEngine.prototype.toggleSelection = function (id) {
-        this.selection.toggle(id);
+        var current = new Set(this.selection.get());
+        if (current.has(id)) {
+            current.delete(id);
+        }
+        else if (this.isSelectableId(id)) {
+            current.add(id);
+        }
+        this.selection.set(Array.from(current));
         this.emitSelection();
     };
     DiagramEngine.prototype.getSelection = function () {
         return this.selection.get();
     };
+    DiagramEngine.prototype.isElementVisible = function (id) {
+        return this.model.isElementVisible(id);
+    };
+    DiagramEngine.prototype.isElementSelectable = function (id) {
+        return this.model.isElementSelectable(id);
+    };
+    DiagramEngine.prototype.isPortVisible = function (id) {
+        return this.model.isPortVisible(id);
+    };
+    DiagramEngine.prototype.isLinkVisible = function (id) {
+        return this.model.isLinkVisible(id);
+    };
+    DiagramEngine.prototype.isTextVisible = function (id) {
+        return this.model.isTextVisible(id);
+    };
     DiagramEngine.prototype.getElementWorldPosition = function (id) {
         return this.model.getElementWorldPosition(id);
     };
@@ -4603,11 +4685,15 @@ var DiagramEngine = /** @class */ (function () {
         var _this = this;
         var _a;
         var allPatches = this.appendTextLayoutPatches(patches, (_a = options === null || options === void 0 ? void 0 : options.emitTextUpdated) !== null && _a !== void 0 ? _a : true);
+        var selectionChanged = this.syncSelectionToPolicies();
         var state = this.model.toState();
         this.events.emit('change', { patches: allPatches, state: state });
-        if ((options === null || options === void 0 ? void 0 : options.render) === false)
-            return;
-        this.scheduler.requestRender(function () { return _this.renderer.render(_this.model); });
+        if ((options === null || options === void 0 ? void 0 : options.render) !== false) {
+            this.scheduler.requestRender(function () { return _this.renderer.render(_this.model); });
+        }
+        if (selectionChanged) {
+            this.emitSelection();
+        }
     };
     DiagramEngine.prototype.appendTextLayoutPatches = function (patches, emitTextUpdated) {
         var _this = this;
@@ -5053,6 +5139,31 @@ var DiagramEngine = /** @class */ (function () {
         });
         this.renderer.renderSelection(selectedIds);
     };
+    DiagramEngine.prototype.normalizeSelectionIds = function (ids) {
+        var _this = this;
+        return ids.filter(function (id, index) { return ids.indexOf(id) === index && _this.isSelectableId(id); });
+    };
+    DiagramEngine.prototype.isSelectableId = function (id) {
+        if (this.model.getElement(id))
+            return this.model.isElementSelectable(id);
+        if (this.model.getPort(id))
+            return this.model.isPortVisible(id);
+        if (this.model.getLink(id))
+            return this.model.isLinkVisible(id);
+        if (this.model.getText(id))
+            return this.model.isTextVisible(id);
+        return false;
+    };
+    DiagramEngine.prototype.syncSelectionToPolicies = function () {
+        var current = this.selection.get();
+        var normalized = this.normalizeSelectionIds(current);
+        if (current.length === normalized.length &&
+            current.every(function (id, index) { return id === normalized[index]; })) {
+            return false;
+        }
+        this.selection.set(normalized);
+        return true;
+    };
     DiagramEngine.prototype.applyLayoutForParent = function (parentId, options) {
         return this.autoLayoutService.applyLayoutForParent(parentId, options);
     };
@@ -6005,7 +6116,9 @@ var KonvaRenderer = /** @class */ (function () {
     };
     KonvaRenderer.prototype.syncElements = function (model) {
         var _this = this;
-        var elements = Array.from(model.elements.values()).map(function (element, index) { return ({
+        var elements = Array.from(model.elements.values())
+            .filter(function (element) { return model.isElementVisible(element.id); })
+            .map(function (element, index) { return ({
             element: element,
             depth: _this.getElementDepth(model, element),
             order: index,
@@ -6038,6 +6151,10 @@ var KonvaRenderer = /** @class */ (function () {
                 node.setAttrs({ __depth: depth });
             }
         });
+        var visibleElementIds = new Set(elements.map(function (_a) {
+            var element = _a.element;
+            return element.id;
+        }));
         elements.forEach(function (_a) {
             var _b;
             var element = _a.element;
@@ -6046,7 +6163,7 @@ var KonvaRenderer = /** @class */ (function () {
         });
         Array.from(this.elementNodes.keys()).forEach(function (id) {
             var _a;
-            if (!model.elements.has(id)) {
+            if (!visibleElementIds.has(id)) {
                 var node = _this.elementNodes.get(id);
                 (_a = node === null || node === void 0 ? void 0 : node.destroy) === null || _a === void 0 ? void 0 : _a.call(node);
                 _this.elementNodes.delete(id);
@@ -6069,7 +6186,7 @@ var KonvaRenderer = /** @class */ (function () {
     };
     KonvaRenderer.prototype.syncPorts = function (model) {
         var _this = this;
-        var ports = Array.from(model.ports.values());
+        var ports = Array.from(model.ports.values()).filter(function (port) { return model.isPortVisible(port.id); });
         ports.forEach(function (port) {
             var _a, _b, _c, _d, _e;
             var data = port.toData();
@@ -6087,9 +6204,10 @@ var KonvaRenderer = /** @class */ (function () {
             _this.updatePosition(node, position);
             _this.applyPortOrientation(node, data, position, model);
         });
+        var visiblePortIds = new Set(ports.map(function (port) { return port.id; }));
         Array.from(this.portNodes.keys()).forEach(function (id) {
             var _a;
-            if (!model.ports.has(id)) {
+            if (!visiblePortIds.has(id)) {
                 var node = _this.portNodes.get(id);
                 (_a = node === null || node === void 0 ? void 0 : node.destroy) === null || _a === void 0 ? void 0 : _a.call(node);
                 _this.portNodes.delete(id);
@@ -6100,7 +6218,7 @@ var KonvaRenderer = /** @class */ (function () {
     };
     KonvaRenderer.prototype.syncLinks = function (model) {
         var _this = this;
-        var links = Array.from(model.links.values());
+        var links = Array.from(model.links.values()).filter(function (link) { return model.isLinkVisible(link.id); });
         links.forEach(function (link) {
             var _a, _b;
             var node = _this.linkNodes.get(link.id);
@@ -6111,9 +6229,10 @@ var KonvaRenderer = /** @class */ (function () {
             }
             _this.updateLine(node, link.toData());
         });
+        var visibleLinkIds = new Set(links.map(function (link) { return link.id; }));
         Array.from(this.linkNodes.keys()).forEach(function (id) {
             var _a;
-            if (!model.links.has(id)) {
+            if (!visibleLinkIds.has(id)) {
                 var node = _this.linkNodes.get(id);
                 (_a = node === null || node === void 0 ? void 0 : node.destroy) === null || _a === void 0 ? void 0 : _a.call(node);
                 _this.linkNodes.delete(id);
@@ -6124,7 +6243,7 @@ var KonvaRenderer = /** @class */ (function () {
     };
     KonvaRenderer.prototype.syncTexts = function (model) {
         var _this = this;
-        var texts = Array.from(model.texts.values());
+        var texts = Array.from(model.texts.values()).filter(function (text) { return model.isTextVisible(text.id); });
         texts.forEach(function (text) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
             var node = _this.textNodes.get(text.id);
@@ -6213,9 +6332,10 @@ var KonvaRenderer = /** @class */ (function () {
                 _this.textBackgroundNodes.delete(text.id);
             }
         });
+        var visibleTextIds = new Set(texts.map(function (text) { return text.id; }));
         Array.from(this.textNodes.keys()).forEach(function (id) {
             var _a, _b;
-            if (!model.texts.has(id)) {
+            if (!visibleTextIds.has(id)) {
                 var backgroundNode = _this.textBackgroundNodes.get(id);
                 (_a = backgroundNode === null || backgroundNode === void 0 ? void 0 : backgroundNode.destroy) === null || _a === void 0 ? void 0 : _a.call(backgroundNode);
                 _this.textBackgroundNodes.delete(id);
@@ -7218,15 +7338,21 @@ var KonvaInteraction = /** @class */ (function () {
     KonvaInteraction.prototype.normalizeHit = function (hit) {
         if (!hit || hit.type === 'none')
             return null;
-        if (hit.type === 'port' ||
-            hit.type === 'link' ||
-            hit.type === 'text' ||
-            hit.type === 'resize-handle' ||
+        if (hit.type === 'port') {
+            return this.engine.isPortVisible(hit.id) ? hit : null;
+        }
+        if (hit.type === 'link') {
+            return this.engine.isLinkVisible(hit.id) ? hit : null;
+        }
+        if (hit.type === 'text') {
+            return this.engine.isTextVisible(hit.id) ? hit : null;
+        }
+        if (hit.type === 'resize-handle' ||
             hit.type === 'link-handle' ||
             hit.type === 'shape-hover-control') {
             return hit;
         }
-        return __assign(__assign({}, hit), { type: 'element' });
+        return this.engine.isElementSelectable(hit.id) ? __assign(__assign({}, hit), { type: 'element' }) : null;
     };
     KonvaInteraction.prototype.resolveHit = function (point) {
         var _this = this;
@@ -7292,6 +7418,8 @@ var KonvaInteraction = /** @class */ (function () {
         var best = null;
         state.elements.forEach(function (element) {
             var _a, _b, _c;
+            if (!_this.engine.isElementSelectable(element.id))
+                return;
             var world = (_a = _this.engine.getElementWorldPosition(element.id)) !== null && _a !== void 0 ? _a : element.position;
             var rotation = _this.engine.getElementRotation(element.id);
             if (!pointInRotatedRect(point, world, element.size, rotation, (_b = element.anchorCenter) !== null && _b !== void 0 ? _b : false))
@@ -7321,6 +7449,8 @@ var KonvaInteraction = /** @class */ (function () {
         var bestDistance = Number.POSITIVE_INFINITY;
         links.forEach(function (link) {
             var _a, _b;
+            if (!_this.engine.isLinkVisible(link.id))
+                return;
             if (link.points.length < 2)
                 return;
             var tolerance = ((_b = (_a = link.style) === null || _a === void 0 ? void 0 : _a.hitStrokeWidth) !== null && _b !== void 0 ? _b : 15) / 2;
@@ -8335,6 +8465,8 @@ var KonvaInteraction = /** @class */ (function () {
         };
         state.elements.forEach(function (element) {
             var _a, _b;
+            if (!_this.engine.isElementSelectable(element.id))
+                return;
             var position = (_a = _this.engine.getElementWorldPosition(element.id)) !== null && _a !== void 0 ? _a : element.position;
             var rotation = _this.engine.getElementRotation(element.id);
             var anchorCenter = (_b = element.anchorCenter) !== null && _b !== void 0 ? _b : false;
@@ -8352,6 +8484,8 @@ var KonvaInteraction = /** @class */ (function () {
         });
         state.ports.forEach(function (port) {
             var _a;
+            if (!_this.engine.isPortVisible(port.id))
+                return;
             var position = (_a = _this.engine.getPortWorldPosition(port.id)) !== null && _a !== void 0 ? _a : port.position;
             if (containsPoint(position)) {
                 selected.add(port.id);
@@ -8359,6 +8493,8 @@ var KonvaInteraction = /** @class */ (function () {
         });
         state.texts.forEach(function (text) {
             var _a, _b, _c, _d, _e;
+            if (!_this.engine.isTextVisible(text.id))
+                return;
             var position = (_a = _this.engine.getTextWorldPosition(text.id)) !== null && _a !== void 0 ? _a : text.position;
             var width = (_c = (_b = text.size) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : 0;
             var height = (_e = (_d = text.size) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : 0;
@@ -8368,6 +8504,8 @@ var KonvaInteraction = /** @class */ (function () {
             }
         });
         state.links.forEach(function (link) {
+            if (!_this.engine.isLinkVisible(link.id))
+                return;
             if (link.points.length === 0)
                 return;
             var xs = link.points.map(function (point) { return point.x; });
@@ -9299,13 +9437,65 @@ var resolveViewportFitOptions = function (options) {
     return { padding: padding, minZoom: minZoom, maxZoom: maxZoom };
 };
 var clamp = function (value, min, max) { return Math.max(min, Math.min(max, value)); };
+var isElementVisibleInState = function (elementId, elementsById) {
+    var _a, _b;
+    var element = elementsById.get(elementId);
+    if (!element)
+        return false;
+    if (element.visible === false)
+        return false;
+    var currentParentId = (_a = element.parentId) !== null && _a !== void 0 ? _a : null;
+    while (currentParentId) {
+        var parent_1 = elementsById.get(currentParentId);
+        if (!parent_1)
+            break;
+        if (parent_1.visible === false)
+            return false;
+        currentParentId = (_b = parent_1.parentId) !== null && _b !== void 0 ? _b : null;
+    }
+    return true;
+};
+var isPortVisibleInState = function (portId, portsById, elementsById) {
+    var port = portsById.get(portId);
+    if (!port)
+        return false;
+    return isElementVisibleInState(port.elementId, elementsById);
+};
+var isLinkVisibleInState = function (linkId, linksById, portsById, elementsById) {
+    var link = linksById.get(linkId);
+    if (!link)
+        return false;
+    var sourcePort = portsById.get(link.sourcePortId);
+    var targetPort = portsById.get(link.targetPortId);
+    var sourceVisible = sourcePort ? isPortVisibleInState(sourcePort.id, portsById, elementsById) : true;
+    var targetVisible = targetPort ? isPortVisibleInState(targetPort.id, portsById, elementsById) : true;
+    return sourceVisible && targetVisible;
+};
+var isTextVisibleInState = function (text, elementsById, portsById, linksById) {
+    if (!text.ownerId)
+        return true;
+    if (elementsById.has(text.ownerId))
+        return isElementVisibleInState(text.ownerId, elementsById);
+    if (portsById.has(text.ownerId))
+        return isPortVisibleInState(text.ownerId, portsById, elementsById);
+    if (linksById.has(text.ownerId))
+        return isLinkVisibleInState(text.ownerId, linksById, portsById, elementsById);
+    return true;
+};
 var resolveStateWorldBounds = function (state) {
     var bounds = createBounds();
+    var elementsById = new Map(state.elements.map(function (element) { return [element.id, element]; }));
+    var portsById = new Map(state.ports.map(function (port) { return [port.id, port]; }));
+    var linksById = new Map(state.links.map(function (link) { return [link.id, link]; }));
     state.elements.forEach(function (element) {
+        if (!isElementVisibleInState(element.id, elementsById))
+            return;
         includeRect(bounds, element.position.x, element.position.y, element.size.width, element.size.height);
     });
     state.ports.forEach(function (port) {
         var _a;
+        if (!isPortVisibleInState(port.id, portsById, elementsById))
+            return;
         var size = port.size;
         if (!size) {
             expandBounds(bounds, port.position.x, port.position.y);
@@ -9317,12 +9507,16 @@ var resolveStateWorldBounds = function (state) {
         includeRect(bounds, x, y, size.width, size.height);
     });
     state.links.forEach(function (link) {
+        if (!isLinkVisibleInState(link.id, linksById, portsById, elementsById))
+            return;
         link.points.forEach(function (point) {
             expandBounds(bounds, point.x, point.y);
         });
     });
     state.texts.forEach(function (text) {
         var _a;
+        if (!isTextVisibleInState(text, elementsById, portsById, linksById))
+            return;
         var offset = (_a = text.displayOffset) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
         var position = { x: text.position.x + offset.x, y: text.position.y + offset.y };
         var clipSize = text.displayClipSize;
@@ -9337,7 +9531,10 @@ var resolveStateWorldBounds = function (state) {
 };
 var resolveElementWorldBounds = function (state) {
     var bounds = createBounds();
+    var elementsById = new Map(state.elements.map(function (element) { return [element.id, element]; }));
     state.elements.forEach(function (element) {
+        if (!isElementVisibleInState(element.id, elementsById))
+            return;
         includeRect(bounds, element.position.x, element.position.y, element.size.width, element.size.height);
     });
     return hasBounds(bounds) ? bounds : null;

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

@@ -269,6 +269,8 @@ export type ElementData = {
     style?: Record<string, unknown>;
     portIds?: string[];
     textIds?: string[];
+    visible?: boolean;
+    selectable?: boolean;
     parentId?: string | null;
     moveMode?: MoveConstraint;
     anchorCenter?: boolean;

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

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

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

@@ -76,6 +76,11 @@ export default class DiagramEngine {
     setSelection(ids: string[]): void;
     toggleSelection(id: string): void;
     getSelection(): string[];
+    isElementVisible(id: string): boolean;
+    isElementSelectable(id: string): boolean;
+    isPortVisible(id: string): boolean;
+    isLinkVisible(id: string): boolean;
+    isTextVisible(id: string): boolean;
     getElementWorldPosition(id: string): Point | null;
     getElementRotation(id: string): number;
     normalizeElementResize(id: string, proposal: {
@@ -146,6 +151,9 @@ export default class DiagramEngine {
     private resolveTextPresentation;
     private resolveAllTextPresentationPatches;
     private emitSelection;
+    private normalizeSelectionIds;
+    private isSelectableId;
+    private syncSelectionToPolicies;
     private applyLayoutForParent;
     private applyLayoutCascade;
     private applyAllLayouts;

package/dist/cjs/types/models/DiagramModel.d.ts

@@ -13,14 +13,19 @@ export default class DiagramModel {
     load(state: DiagramState): void;
     toState(): DiagramState;
     getElement(id: string): ElementModel | undefined;
+    isElementVisible(id: string): boolean;
+    isElementSelectable(id: string): boolean;
     setElementLayout(id: string, layout: ElementData['layout']): void;
     getChildren(parentId: string): ElementModel[];
     getElementWorldPosition(id: string): Point | null;
     getPort(id: string): PortModel | undefined;
+    isPortVisible(id: string): boolean;
     getPortWorldPosition(id: string): Point | null;
     getLink(id: string): LinkModel | undefined;
+    isLinkVisible(id: string): boolean;
     getLinkMidpoint(id: string): Point | null;
     getText(id: string): TextModel | undefined;
+    isTextVisible(id: string): boolean;
     getTextWorldPosition(id: string): Point | null;
     addElement(data: ElementData): ElementModel;
     moveElement(id: string, position: Point): void;

package/dist/cjs/types/models/ElementModel.d.ts

@@ -7,6 +7,8 @@ export default class ElementModel {
     style?: Record<string, unknown>;
     portIds: string[];
     textIds: string[];
+    visible?: boolean;
+    selectable?: boolean;
     parentId: string | null;
     moveMode?: MoveConstraint;
     anchorCenter?: boolean;