orcasvn-react-diagrams 0.2.9 → 0.2.10

package/dist/esm/examples.js

@@ -1162,13 +1162,21 @@ var createElementVisibilitySelectionState = function () { return ({
             style: { fill: '#e2e8f0', stroke: '#334155', strokeWidth: 2 },
         },
         {
-            id: 'policy-hidden',
-            position: { x: 700, y: 140 },
-            size: { width: 180, height: 120 },
+            id: 'policy-hidden-parent',
+            position: { x: 660, y: 110 },
+            size: { width: 220, height: 170 },
             shapeId: 'default',
             visible: false,
             style: { fill: '#fee2e2', stroke: '#dc2626', strokeWidth: 2 },
         },
+        {
+            id: 'policy-hidden-child',
+            parentId: 'policy-hidden-parent',
+            position: { x: 50, y: 58 },
+            size: { width: 120, height: 72 },
+            shapeId: 'default',
+            style: { fill: '#dcfce7', stroke: '#16a34a', strokeWidth: 2 },
+        },
     ],
     ports: [
         {
@@ -1184,9 +1192,15 @@ var createElementVisibilitySelectionState = function () { return ({
             shapeId: 'port-circle',
         },
         {
-            id: 'policy-hidden-port',
-            elementId: 'policy-hidden',
-            position: { x: 0, y: 60 },
+            id: 'policy-hidden-parent-port',
+            elementId: 'policy-hidden-parent',
+            position: { x: 0, y: 85 },
+            shapeId: 'port-circle',
+        },
+        {
+            id: 'policy-hidden-child-port',
+            elementId: 'policy-hidden-child',
+            position: { x: 120, y: 36 },
             shapeId: 'port-circle',
         },
     ],
@@ -1202,22 +1216,32 @@ var createElementVisibilitySelectionState = function () { return ({
             style: { stroke: '#2563eb', strokeWidth: 3 },
         },
         {
-            id: 'policy-hidden-link',
+            id: 'policy-hidden-parent-link',
             sourcePortId: 'policy-normal-port',
-            targetPortId: 'policy-hidden-port',
+            targetPortId: 'policy-hidden-parent-port',
             points: [
                 { x: 300, y: 220 },
-                { x: 700, y: 200 },
+                { x: 660, y: 195 },
             ],
             style: { stroke: '#dc2626', strokeWidth: 3 },
         },
+        {
+            id: 'policy-visible-child-link',
+            sourcePortId: 'policy-normal-port',
+            targetPortId: 'policy-hidden-child-port',
+            points: [
+                { x: 300, y: 220 },
+                { x: 830, y: 204 },
+            ],
+            style: { stroke: '#16a34a', strokeWidth: 3 },
+        },
     ],
     texts: [
         {
             id: 'policy-tip',
-            content: 'Blue node is normal. Slate node is visible but its body ignores click and marquee. Its port stays interactive. Hidden node, its port, and its attached red link stay in state but are suppressed from scene, selection, zoom-to-fit, and fit-to-content export.',
+            content: 'Blue node is normal. Slate node is visible but its body ignores click and marquee. Its port stays interactive. Red parent container is hidden, but its green child stays visible and interactive. Parent-owned port/text and the red parent link stay suppressed, while the green child link remains in scene, selection, zoom-to-fit, and fit-to-content export.',
             position: { x: 80, y: 72 },
-            size: { width: 760, height: 44 },
+            size: { width: 810, height: 60 },
             style: { fontSize: 14, fill: '#0f172a' },
         },
         {
@@ -1234,16 +1258,22 @@ var createElementVisibilitySelectionState = function () { return ({
         },
         {
             id: 'policy-hidden-label',
-            content: 'Hidden in state',
+            content: 'Hidden parent body',
             position: { x: 16, y: 14 },
-            ownerId: 'policy-hidden',
+            ownerId: 'policy-hidden-parent',
+        },
+        {
+            id: 'policy-hidden-child-label',
+            content: 'Visible child inside hidden parent',
+            position: { x: 10, y: 12 },
+            ownerId: 'policy-hidden-child',
         },
     ],
 }); };
 var elementVisibilitySelectionDemoConfig = {
     id: 'element-visibility-selection',
     title: 'Element Visibility + Selectability',
-    description: 'QA scene for visible-but-unselectable element bodies, hidden-in-state elements, and port/link propagation. Shift + drag marquee to confirm only eligible items are collected.',
+    description: 'QA scene for visible-but-unselectable bodies, hidden parent containers, and visible descendants that survive hidden ancestors. Shift + drag marquee to confirm only eligible items are collected.',
     createState: createElementVisibilitySelectionState,
     elementShapes: baseElementShapes,
     portShapes: basePortShapes,
@@ -1257,9 +1287,14 @@ var elementVisibilitySelectionDemoConfig = {
                 editor.setSelection([
                     'policy-normal',
                     'policy-unselectable',
-                    'policy-hidden',
+                    'policy-hidden-parent',
+                    'policy-hidden-child',
                     'policy-unselectable-port',
-                    'policy-hidden-link',
+                    'policy-hidden-parent-port',
+                    'policy-hidden-child-port',
+                    'policy-hidden-parent-link',
+                    'policy-visible-child-link',
+                    'policy-hidden-child-label',
                 ]);
             },
         },
@@ -5181,18 +5216,7 @@ var DiagramModel = /** @class */ (function () {
         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;
+        return element.visible !== false;
     };
     DiagramModel.prototype.isElementSelectable = function (id) {
         var element = this.elements.get(id);
@@ -5463,18 +5487,18 @@ var DiagramModel = /** @class */ (function () {
         }
         var current = element;
         while (current === null || current === void 0 ? void 0 : current.parentId) {
-            var parent_2 = this.elements.get(current.parentId);
-            if (!parent_2)
+            var parent_1 = this.elements.get(current.parentId);
+            if (!parent_1)
                 break;
-            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;
+            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;
             }
             x += parentX;
             y += parentY;
-            current = parent_2;
+            current = parent_1;
         }
         return { x: x, y: y };
     };
@@ -13589,22 +13613,10 @@ var resolveViewportFitOptions = function (options) {
 };
 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;
+    return element.visible !== false;
 };
 var isPortVisibleInState = function (portId, portsById, elementsById) {
     var port = portsById.get(portId);
@@ -13633,6 +13645,103 @@ var isTextVisibleInState = function (text, elementsById, portsById, linksById) {
         return isLinkVisibleInState(text.ownerId, linksById, portsById, elementsById);
     return true;
 };
+var resolveElementWorldPositionInState = function (elementId, elementsById) {
+    var element = elementsById.get(elementId);
+    if (!element)
+        return null;
+    var x = element.position.x;
+    var y = element.position.y;
+    if (element.anchorCenter) {
+        x -= element.size.width / 2;
+        y -= element.size.height / 2;
+    }
+    var current = element;
+    while (current.parentId) {
+        var parent_1 = elementsById.get(current.parentId);
+        if (!parent_1)
+            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;
+        }
+        x += parentX;
+        y += parentY;
+        current = parent_1;
+    }
+    return { x: x, y: y };
+};
+var resolvePortWorldPositionInState = function (portId, portsById, elementsById) {
+    var port = portsById.get(portId);
+    if (!port)
+        return null;
+    var elementPosition = resolveElementWorldPositionInState(port.elementId, elementsById);
+    if (!elementPosition)
+        return __assign({}, port.position);
+    return {
+        x: elementPosition.x + port.position.x,
+        y: elementPosition.y + port.position.y,
+    };
+};
+var resolveLinkMidpointInState = function (link) {
+    var points = link.points;
+    if (points.length === 0)
+        return { x: 0, y: 0 };
+    if (points.length === 1)
+        return __assign({}, points[0]);
+    var total = 0;
+    for (var i = 1; i < points.length; i += 1) {
+        total += distance(points[i - 1], points[i]);
+    }
+    var halfway = total / 2;
+    var traveled = 0;
+    for (var i = 1; i < points.length; i += 1) {
+        var segment = distance(points[i - 1], points[i]);
+        if (traveled + segment >= halfway) {
+            var ratio = segment === 0 ? 0 : (halfway - traveled) / segment;
+            return {
+                x: points[i - 1].x + (points[i].x - points[i - 1].x) * ratio,
+                y: points[i - 1].y + (points[i].y - points[i - 1].y) * ratio,
+            };
+        }
+        traveled += segment;
+    }
+    return __assign({}, points[points.length - 1]);
+};
+var resolveTextWorldPositionInState = function (text, elementsById, portsById, linksById) {
+    if (!text.ownerId)
+        return __assign({}, text.position);
+    if (elementsById.has(text.ownerId)) {
+        var elementPosition = resolveElementWorldPositionInState(text.ownerId, elementsById);
+        if (!elementPosition)
+            return __assign({}, text.position);
+        return {
+            x: elementPosition.x + text.position.x,
+            y: elementPosition.y + text.position.y,
+        };
+    }
+    if (portsById.has(text.ownerId)) {
+        var portPosition = resolvePortWorldPositionInState(text.ownerId, portsById, elementsById);
+        if (!portPosition)
+            return __assign({}, text.position);
+        return {
+            x: portPosition.x + text.position.x,
+            y: portPosition.y + text.position.y,
+        };
+    }
+    if (linksById.has(text.ownerId)) {
+        var link = linksById.get(text.ownerId);
+        if (!link)
+            return __assign({}, text.position);
+        var midpoint = resolveLinkMidpointInState(link);
+        return {
+            x: midpoint.x + text.position.x,
+            y: midpoint.y + text.position.y,
+        };
+    }
+    return __assign({}, text.position);
+};
 var resolveStateWorldBounds = function (state) {
     var bounds = createBounds();
     var elementsById = new Map(state.elements.map(function (element) { return [element.id, element]; }));
@@ -13641,20 +13750,26 @@ var resolveStateWorldBounds = function (state) {
     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);
+        var position = resolveElementWorldPositionInState(element.id, elementsById);
+        if (!position)
+            return;
+        includeRect(bounds, position.x, position.y, element.size.width, element.size.height);
     });
     state.ports.forEach(function (port) {
         var _a;
         if (!isPortVisibleInState(port.id, portsById, elementsById))
             return;
+        var position = resolvePortWorldPositionInState(port.id, portsById, elementsById);
+        if (!position)
+            return;
         var size = port.size;
         if (!size) {
-            expandBounds(bounds, port.position.x, port.position.y);
+            expandBounds(bounds, position.x, position.y);
             return;
         }
         var anchorCenter = (_a = port.anchorCenter) !== null && _a !== void 0 ? _a : true;
-        var x = anchorCenter ? port.position.x - size.width / 2 : port.position.x;
-        var y = anchorCenter ? port.position.y - size.height / 2 : port.position.y;
+        var x = anchorCenter ? position.x - size.width / 2 : position.x;
+        var y = anchorCenter ? position.y - size.height / 2 : position.y;
         includeRect(bounds, x, y, size.width, size.height);
     });
     state.links.forEach(function (link) {
@@ -13669,7 +13784,8 @@ var resolveStateWorldBounds = function (state) {
         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 worldPosition = resolveTextWorldPositionInState(text, elementsById, portsById, linksById);
+        var position = { x: worldPosition.x + offset.x, y: worldPosition.y + offset.y };
         var clipSize = text.displayClipSize;
         var size = clipSize !== null && clipSize !== void 0 ? clipSize : text.size;
         if (size) {
@@ -13686,7 +13802,10 @@ var resolveElementWorldBounds = function (state) {
     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);
+        var position = resolveElementWorldPositionInState(element.id, elementsById);
+        if (!position)
+            return;
+        includeRect(bounds, position.x, position.y, element.size.width, element.size.height);
     });
     return hasBounds(bounds) ? bounds : null;
 };