orcasvn-react-diagrams 0.1.30 → 0.1.32

package/dist/cjs/index.js

@@ -36,6 +36,49 @@ exports.TextAlign = void 0;
     TextAlign[TextAlign["center"] = 2] = "center";
 })(exports.TextAlign || (exports.TextAlign = {}));
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -443,6 +486,7 @@ function generateUniqueId() {
 var Element$2 = /** @class */ (function () {
     function Element(x, y, width, height, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection, parentElement, textsPlaceHolderClassName, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition) {
         if (portMovealeAreas === void 0) { portMovealeAreas = []; }
+        this._childrenElements = [];
         this.resizability = {
             enabled: true,
             keepRatio: false
@@ -519,9 +563,34 @@ var Element$2 = /** @class */ (function () {
             return this._parentElement;
         },
         set: function (value) {
+            var _this = this;
             var oldParent = this._parentElement;
+            if ((oldParent === null || oldParent === void 0 ? void 0 : oldParent.id) === (value === null || value === void 0 ? void 0 : value.id))
+                return;
             this._parentElement = value;
             this._eventEmitter.emit('parentChanged', oldParent, value);
+            if (value) {
+                value.childrenElements = __spreadArray(__spreadArray([], value.childrenElements, true), [this], false);
+            }
+            var index = oldParent === null || oldParent === void 0 ? void 0 : oldParent.childrenElements.findIndex(function (e) { return e.id === _this.id; });
+            if (index !== undefined && index !== -1) {
+                oldParent === null || oldParent === void 0 ? void 0 : oldParent.childrenElements.splice(index, 1);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Element.prototype, "childrenElements", {
+        get: function () {
+            return this._childrenElements;
+        },
+        /** @internal */
+        /**
+         * Warning: This setter should only be used if you fully understand its implications.
+         * Directly setting childrenElements can lead to inconsistencies in the element hierarchy. Please only use this in the setter of parentElement of the child element.
+         */
+        set: function (value) {
+            this._childrenElements = value;
         },
         enumerable: false,
         configurable: true
@@ -577,49 +646,6 @@ var Element$2 = /** @class */ (function () {
     return Element;
 }());
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 var ShapeWrapper = React.forwardRef(function (shapeProps, ref) {
     //if direction is provided, rotation is based on direction
     var rotation = shapeProps.rotation || 0;
@@ -8706,7 +8732,7 @@ function convertElementsToTree(elements) {
     //Find child elements in the child elements, that is possible child of element, then return element with child of it.
     function findChildElementsOfNode(elementNodeInTree, possibleChildElements) {
         if (possibleChildElements.length === 0) {
-            elementNodeInTree.childrenElements = undefined;
+            elementNodeInTree.childrenElementsInTree = undefined;
             return elementNodeInTree;
         }
         var foundChildElements = possibleChildElements.filter(function (ele) { var _a; return ((_a = ele.parentElement) === null || _a === void 0 ? void 0 : _a.id) === elementNodeInTree.id; });
@@ -8720,7 +8746,7 @@ function convertElementsToTree(elements) {
             var newNode = findChildElementsOfNode(_elementNodeInTree, orphanedElements);
             return newNode;
         });
-        elementNodeInTree.childrenElements = childElementsWithChild;
+        elementNodeInTree.childrenElementsInTree = childElementsWithChild;
         return elementNodeInTree;
     }
     var parentElms = elements.filter(function (e) { return !e.parentElement; });
@@ -8849,9 +8875,9 @@ var Paper = function (props) {
     }, [elements]);
     //Get all child elements of the deleted element
     var getDeletedChildElements = function (deletedElement) {
-        if (!deletedElement.childrenElements)
+        if (!deletedElement.childrenElementsInTree)
             return [];
-        var childElms = deletedElement.childrenElements;
+        var childElms = deletedElement.childrenElementsInTree;
         var childOfChildElements = childElms.reduce(function (acc, ele) {
             return __spreadArray(__spreadArray([], acc, true), getDeletedChildElements(ele), true);
         }, []);
@@ -9227,8 +9253,8 @@ var Paper = function (props) {
     var updateElementPosition = function (element, movementX, movementY) {
         element.position.x += movementX;
         element.position.y += movementY;
-        if (element.childrenElements && element.childrenElements.length > 0) {
-            element.childrenElements = element.childrenElements.map(function (child) { return updateElementPosition(child, movementX, movementY); });
+        if (element.childrenElementsInTree && element.childrenElementsInTree.length > 0) {
+            element.childrenElementsInTree = element.childrenElementsInTree.map(function (child) { return updateElementPosition(child, movementX, movementY); });
         }
         return element;
     };
@@ -9408,7 +9434,7 @@ var Paper = function (props) {
         return (React.createElement("g", { key: element.id },
             React.createElement(ReactElement, { key: "element-".concat(element.id), id: element.id, height: element.size.height, width: element.size.width, x: (_a = element.relativePosition) === null || _a === void 0 ? void 0 : _a.x, y: (_b = element.relativePosition) === null || _b === void 0 ? void 0 : _b.y, onClick: handleElementClicked, onContextMenu: handleContextMenu, onMouseUp: handleMouseUp, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, container: paperContainerRef.current, renderShape: element.renderShape, cssClass: element.cssClass, texts: element.texts, ports: element.ports, portMoveableAreas: element.portMoveableAreas, portSlideRailSVGClassName: element.portSlideRailSVGClassName, portDirection: element.portDirection, defaultPortSize: element.defaultPortSize, onPortMoved: handlePortMoved, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, 
                 // portPlaceholderShape={(<Circle x={0} y={0} width={10} height={10} fill='red' positioningAnchor={PositioningAnchor.Center} />)}
-                onMouseUpAtLinkedPortPlaceholder: handleMouseUpAtLinkedPortPlaceholder, onTextUpdated: handleElementTextChange, onManuallyTriggerRenderPort: props.onManuallyTriggerRenderPort, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition }, element.childrenElements && element.childrenElements.map(renderElementInTree))));
+                onMouseUpAtLinkedPortPlaceholder: handleMouseUpAtLinkedPortPlaceholder, onTextUpdated: handleElementTextChange, onManuallyTriggerRenderPort: props.onManuallyTriggerRenderPort, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition }, element.childrenElementsInTree && element.childrenElementsInTree.map(renderElementInTree))));
     }, [handleElementClicked, handleContextMenu, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, handleMouseUp, handleMouseMove, handleMouseLeave]);
     React.useEffect(function () {
         console.log('elementsInTree');

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

@@ -25,6 +25,7 @@ export default interface IElement {
     portDirection?: SubObjectDirection;
     defaultPortSize?: number;
     parentElement?: IElement;
+    childrenElements: IElement[];
     onParentChanged?: (callback: (oldParent?: IElement, newParent?: IElement) => void) => (() => void);
     addPort: (newPort: IPort) => void;
     onAddedPort: (callback: (newPort: IPort) => void) => (() => void);

package/dist/cjs/types/models/implementations/Element.d.ts

@@ -14,6 +14,7 @@ export default class Element implements IElement {
     protected _position: IPosition;
     protected _size: ISize;
     private _parentElement?;
+    private _childrenElements;
     cssClass?: string;
     /**
      * @deprecated This property is deprecated and will be removed in future versions.
@@ -41,6 +42,7 @@ export default class Element implements IElement {
     get position(): IPosition;
     get parentElement(): IElement | undefined;
     set parentElement(value: IElement | undefined);
+    get childrenElements(): IElement[];
     onParentChanged(callback: (oldParent?: IElement, newParent?: IElement) => void): () => void;
     addPort(newPort: IPort): void;
     onAddedPort(callback: (newPort: IPort) => void): () => void;

package/dist/esm/index.js

@@ -32,6 +32,49 @@ var TextAlign;
     TextAlign[TextAlign["center"] = 2] = "center";
 })(TextAlign || (TextAlign = {}));
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -439,6 +482,7 @@ function generateUniqueId() {
 var Element$2 = /** @class */ (function () {
     function Element(x, y, width, height, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection, parentElement, textsPlaceHolderClassName, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition) {
         if (portMovealeAreas === void 0) { portMovealeAreas = []; }
+        this._childrenElements = [];
         this.resizability = {
             enabled: true,
             keepRatio: false
@@ -515,9 +559,34 @@ var Element$2 = /** @class */ (function () {
             return this._parentElement;
         },
         set: function (value) {
+            var _this = this;
             var oldParent = this._parentElement;
+            if ((oldParent === null || oldParent === void 0 ? void 0 : oldParent.id) === (value === null || value === void 0 ? void 0 : value.id))
+                return;
             this._parentElement = value;
             this._eventEmitter.emit('parentChanged', oldParent, value);
+            if (value) {
+                value.childrenElements = __spreadArray(__spreadArray([], value.childrenElements, true), [this], false);
+            }
+            var index = oldParent === null || oldParent === void 0 ? void 0 : oldParent.childrenElements.findIndex(function (e) { return e.id === _this.id; });
+            if (index !== undefined && index !== -1) {
+                oldParent === null || oldParent === void 0 ? void 0 : oldParent.childrenElements.splice(index, 1);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Element.prototype, "childrenElements", {
+        get: function () {
+            return this._childrenElements;
+        },
+        /** @internal */
+        /**
+         * Warning: This setter should only be used if you fully understand its implications.
+         * Directly setting childrenElements can lead to inconsistencies in the element hierarchy. Please only use this in the setter of parentElement of the child element.
+         */
+        set: function (value) {
+            this._childrenElements = value;
         },
         enumerable: false,
         configurable: true
@@ -573,49 +642,6 @@ var Element$2 = /** @class */ (function () {
     return Element;
 }());
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 var ShapeWrapper = forwardRef(function (shapeProps, ref) {
     //if direction is provided, rotation is based on direction
     var rotation = shapeProps.rotation || 0;
@@ -8702,7 +8728,7 @@ function convertElementsToTree(elements) {
     //Find child elements in the child elements, that is possible child of element, then return element with child of it.
     function findChildElementsOfNode(elementNodeInTree, possibleChildElements) {
         if (possibleChildElements.length === 0) {
-            elementNodeInTree.childrenElements = undefined;
+            elementNodeInTree.childrenElementsInTree = undefined;
             return elementNodeInTree;
         }
         var foundChildElements = possibleChildElements.filter(function (ele) { var _a; return ((_a = ele.parentElement) === null || _a === void 0 ? void 0 : _a.id) === elementNodeInTree.id; });
@@ -8716,7 +8742,7 @@ function convertElementsToTree(elements) {
             var newNode = findChildElementsOfNode(_elementNodeInTree, orphanedElements);
             return newNode;
         });
-        elementNodeInTree.childrenElements = childElementsWithChild;
+        elementNodeInTree.childrenElementsInTree = childElementsWithChild;
         return elementNodeInTree;
     }
     var parentElms = elements.filter(function (e) { return !e.parentElement; });
@@ -8845,9 +8871,9 @@ var Paper = function (props) {
     }, [elements]);
     //Get all child elements of the deleted element
     var getDeletedChildElements = function (deletedElement) {
-        if (!deletedElement.childrenElements)
+        if (!deletedElement.childrenElementsInTree)
             return [];
-        var childElms = deletedElement.childrenElements;
+        var childElms = deletedElement.childrenElementsInTree;
         var childOfChildElements = childElms.reduce(function (acc, ele) {
             return __spreadArray(__spreadArray([], acc, true), getDeletedChildElements(ele), true);
         }, []);
@@ -9223,8 +9249,8 @@ var Paper = function (props) {
     var updateElementPosition = function (element, movementX, movementY) {
         element.position.x += movementX;
         element.position.y += movementY;
-        if (element.childrenElements && element.childrenElements.length > 0) {
-            element.childrenElements = element.childrenElements.map(function (child) { return updateElementPosition(child, movementX, movementY); });
+        if (element.childrenElementsInTree && element.childrenElementsInTree.length > 0) {
+            element.childrenElementsInTree = element.childrenElementsInTree.map(function (child) { return updateElementPosition(child, movementX, movementY); });
         }
         return element;
     };
@@ -9404,7 +9430,7 @@ var Paper = function (props) {
         return (React.createElement("g", { key: element.id },
             React.createElement(ReactElement, { key: "element-".concat(element.id), id: element.id, height: element.size.height, width: element.size.width, x: (_a = element.relativePosition) === null || _a === void 0 ? void 0 : _a.x, y: (_b = element.relativePosition) === null || _b === void 0 ? void 0 : _b.y, onClick: handleElementClicked, onContextMenu: handleContextMenu, onMouseUp: handleMouseUp, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, container: paperContainerRef.current, renderShape: element.renderShape, cssClass: element.cssClass, texts: element.texts, ports: element.ports, portMoveableAreas: element.portMoveableAreas, portSlideRailSVGClassName: element.portSlideRailSVGClassName, portDirection: element.portDirection, defaultPortSize: element.defaultPortSize, onPortMoved: handlePortMoved, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, 
                 // portPlaceholderShape={(<Circle x={0} y={0} width={10} height={10} fill='red' positioningAnchor={PositioningAnchor.Center} />)}
-                onMouseUpAtLinkedPortPlaceholder: handleMouseUpAtLinkedPortPlaceholder, onTextUpdated: handleElementTextChange, onManuallyTriggerRenderPort: props.onManuallyTriggerRenderPort, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition }, element.childrenElements && element.childrenElements.map(renderElementInTree))));
+                onMouseUpAtLinkedPortPlaceholder: handleMouseUpAtLinkedPortPlaceholder, onTextUpdated: handleElementTextChange, onManuallyTriggerRenderPort: props.onManuallyTriggerRenderPort, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition }, element.childrenElementsInTree && element.childrenElementsInTree.map(renderElementInTree))));
     }, [handleElementClicked, handleContextMenu, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, handleMouseUp, handleMouseMove, handleMouseLeave]);
     useEffect(function () {
         console.log('elementsInTree');