orcasvn-react-diagrams 0.1.29 → 0.1.31

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;
@@ -7505,12 +7531,12 @@ var checkPointContainsPolygon = function (position, polygonPoints) {
  */
 var makePolygonOfElement = function (ele) {
     var polygon = new Flatten$1.Polygon();
-    var strokeWidthOffset = 1;
+    var vertexes = getFourVertexesOfBBoxFromElement(ele);
     polygon.addFace([
-        Flatten$1.point(ele.position.x + strokeWidthOffset, ele.position.y + strokeWidthOffset),
-        Flatten$1.point(ele.position.x + ele.size.width - strokeWidthOffset, ele.position.y + strokeWidthOffset),
-        Flatten$1.point(ele.position.x + ele.size.width - strokeWidthOffset, ele.position.y + ele.size.height - strokeWidthOffset),
-        Flatten$1.point(ele.position.x + strokeWidthOffset, ele.position.y + ele.size.height - strokeWidthOffset),
+        Flatten$1.point(vertexes[0].x, vertexes[0].y),
+        Flatten$1.point(vertexes[1].x, vertexes[1].y),
+        Flatten$1.point(vertexes[2].x, vertexes[2].y),
+        Flatten$1.point(vertexes[3].x, vertexes[3].y),
     ]);
     return polygon;
 };
@@ -7552,46 +7578,30 @@ var getFirstIntersection = function (startPosition, endPosition, elements) {
 //Find a point next to an element from a point on the element
 var generateSubstitutePosition = function (intersectedPosition, targetPosition, ele) {
     var translationOffset = 20;
-    var strokeWidthOffset = 1;
-    var vertex1Position = {
-        x: ele.position.x + strokeWidthOffset,
-        y: ele.position.y + strokeWidthOffset,
-    };
-    var vertex2Position = {
-        x: ele.position.x + ele.size.width - strokeWidthOffset,
-        y: ele.position.y + strokeWidthOffset,
-    };
-    var vertex3Position = {
-        x: ele.position.x + ele.size.width - strokeWidthOffset,
-        y: ele.position.y + ele.size.height - strokeWidthOffset,
-    };
-    var vertex4Position = {
-        x: ele.position.x + strokeWidthOffset,
-        y: ele.position.y + ele.size.height - strokeWidthOffset,
-    };
+    var _a = getFourVertexesOfBBoxFromElement(ele), vertex1Position = _a[0], vertex2Position = _a[1], vertex3Position = _a[2], vertex4Position = _a[3];
     var replacementPosition = null;
-    if (checkSamePosition(vertex1Position, intersectedPosition, 3)) {
+    if (checkSamePosition(vertex1Position, intersectedPosition, 0)) {
         //Cut at vertex 1 of bbox, move out a distance x,y
         replacementPosition = {
             x: vertex1Position.x - translationOffset,
             y: vertex1Position.y - translationOffset,
         };
     }
-    else if (checkSamePosition(vertex2Position, intersectedPosition, 3)) {
+    else if (checkSamePosition(vertex2Position, intersectedPosition, 0)) {
         //Cut at vertex 2 of bbox, move out a distance x,y
         replacementPosition = {
             x: vertex2Position.x + translationOffset,
             y: vertex2Position.y - translationOffset,
         };
     }
-    else if (checkSamePosition(vertex3Position, intersectedPosition, 3)) {
+    else if (checkSamePosition(vertex3Position, intersectedPosition, 0)) {
         //Cut at vertex 3 of bbox, move out a distance x,y
         replacementPosition = {
             x: vertex3Position.x + translationOffset,
             y: vertex3Position.y + translationOffset,
         };
     }
-    else if (checkSamePosition(vertex4Position, intersectedPosition, 3)) {
+    else if (checkSamePosition(vertex4Position, intersectedPosition, 0)) {
         //Cut at vertex 4 of bbox, move out a distance x,y
         replacementPosition = {
             x: vertex4Position.x - translationOffset,
@@ -7699,6 +7709,25 @@ var getRelativePosition = function (clientPosition, relativeElement) {
         x: clientPosition.x - relativeRect.left,
         y: clientPosition.y - relativeRect.top,
     };
+};
+var getFourVertexesOfBBoxFromElement = function (element) {
+    var vertex1Position = {
+        x: element.position.x,
+        y: element.position.y
+    };
+    var vertex2Position = {
+        x: element.position.x + element.size.width,
+        y: element.position.y
+    };
+    var vertex3Position = {
+        x: element.position.x + element.size.width,
+        y: element.position.y + element.size.height
+    };
+    var vertex4Position = {
+        x: element.position.x,
+        y: element.position.y + element.size.height
+    };
+    return [vertex1Position, vertex2Position, vertex3Position, vertex4Position];
 };
 
 var makerStart = React.createElement("circle", { cx: 10, cy: 10, r: 10, fill: "blue" });
@@ -8058,7 +8087,7 @@ var Element = function (props) {
     }, [ports]);
     React.useEffect(function () {
         var _a;
-        console.info('Rendering Element ' + ((_a = texts === null || texts === void 0 ? void 0 : texts[0]) === null || _a === void 0 ? void 0 : _a.content) || id);
+        console.info('Rendering Element ' + ((_a = texts === null || texts === void 0 ? void 0 : texts[0]) === null || _a === void 0 ? void 0 : _a.content) || id, props.ports);
     });
     //Listen a new port is created, after add new port to ports state
     React.useEffect(function () {
@@ -8703,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; });
@@ -8839,7 +8868,7 @@ var Paper = function (props) {
             parentChangedCancelers.forEach(function (canceller) { return canceller === null || canceller === void 0 ? void 0 : canceller(); });
             addedPortCancelers.forEach(function (canceller) { return canceller(); });
         };
-    }, []);
+    }, [elements]);
     //Update elements tree when length of elements change
     React.useEffect(function () {
         updateElementsTree();
@@ -8912,6 +8941,9 @@ var Paper = function (props) {
     //Automatically add points on the link so that the link does not cross elements, default maximum 10 points
     var automationAddPointsToLink = React.useCallback(function (eleLink, limitPoint) {
         if (limitPoint === void 0) { limitPoint = 10; }
+        if (!eleLink.targetElement) {
+            throw new Error("Target element is not found in element link");
+        }
         var sourceElement = eleLink.sourceElement, sourcePort = eleLink.sourcePort, targetElement = eleLink.targetElement, targetPort = eleLink.targetPort;
         var sourcePosition = {
             x: sourceElement.position.x + sourcePort.position.x,
@@ -8921,6 +8953,20 @@ var Paper = function (props) {
             x: targetElement.position.x + targetPort.position.x,
             y: targetElement.position.y + targetPort.position.y
         };
+        var fourVertexesOfSourceEleBBox = getFourVertexesOfBBoxFromElement(sourceElement);
+        var fourVertexesOfTargetEleBBox = getFourVertexesOfBBoxFromElement(targetElement);
+        var projectedSourcePositionOnBBox = findNearestProjectedPoint(sourcePosition, [
+            [fourVertexesOfSourceEleBBox[0], fourVertexesOfSourceEleBBox[1]],
+            [fourVertexesOfSourceEleBBox[1], fourVertexesOfSourceEleBBox[2]],
+            [fourVertexesOfSourceEleBBox[2], fourVertexesOfSourceEleBBox[3]],
+            [fourVertexesOfSourceEleBBox[3], fourVertexesOfSourceEleBBox[0]],
+        ]);
+        var projectedTargetPositionOnBBox = findNearestProjectedPoint(targetPosition, [
+            [fourVertexesOfTargetEleBBox[0], fourVertexesOfTargetEleBBox[1]],
+            [fourVertexesOfTargetEleBBox[1], fourVertexesOfTargetEleBBox[2]],
+            [fourVertexesOfTargetEleBBox[2], fourVertexesOfTargetEleBBox[3]],
+            [fourVertexesOfTargetEleBBox[3], fourVertexesOfTargetEleBBox[0]],
+        ]);
         var numberOfPoints = 0;
         //create points between the start and end points, to create a line segment that passes through the points without intersecting the elements
         function generatePositions(sourcePosition, targetPosition, elements) {
@@ -8940,7 +8986,7 @@ var Paper = function (props) {
             return __spreadArray(__spreadArray(__spreadArray([], prependedPoints, true), [replacementPosition], false), appendedPoints, true);
         }
         var elements = elementsRef.current;
-        var points = generatePositions(sourcePosition, targetPosition, elements);
+        var points = generatePositions(projectedSourcePositionOnBBox, projectedTargetPositionOnBBox, elements);
         return __assign(__assign({}, eleLink), { points: points });
     }, []);
     var handlePaperMouseMove = function (ev) {

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/cjs/types/utils/positionUtil.d.ts

@@ -45,3 +45,4 @@ export declare const getFirstIntersection: (startPosition: IPosition, endPositio
 } | undefined;
 export declare const generateSubstitutePosition: (intersectedPosition: IPosition, targetPosition: IPosition, ele: IElement) => IPosition;
 export declare const getRelativePosition: (clientPosition: IPosition, relativeElement: Element) => IPosition;
+export declare const getFourVertexesOfBBoxFromElement: (element: IElement) => IPosition[];

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;
@@ -7501,12 +7527,12 @@ var checkPointContainsPolygon = function (position, polygonPoints) {
  */
 var makePolygonOfElement = function (ele) {
     var polygon = new Flatten$1.Polygon();
-    var strokeWidthOffset = 1;
+    var vertexes = getFourVertexesOfBBoxFromElement(ele);
     polygon.addFace([
-        Flatten$1.point(ele.position.x + strokeWidthOffset, ele.position.y + strokeWidthOffset),
-        Flatten$1.point(ele.position.x + ele.size.width - strokeWidthOffset, ele.position.y + strokeWidthOffset),
-        Flatten$1.point(ele.position.x + ele.size.width - strokeWidthOffset, ele.position.y + ele.size.height - strokeWidthOffset),
-        Flatten$1.point(ele.position.x + strokeWidthOffset, ele.position.y + ele.size.height - strokeWidthOffset),
+        Flatten$1.point(vertexes[0].x, vertexes[0].y),
+        Flatten$1.point(vertexes[1].x, vertexes[1].y),
+        Flatten$1.point(vertexes[2].x, vertexes[2].y),
+        Flatten$1.point(vertexes[3].x, vertexes[3].y),
     ]);
     return polygon;
 };
@@ -7548,46 +7574,30 @@ var getFirstIntersection = function (startPosition, endPosition, elements) {
 //Find a point next to an element from a point on the element
 var generateSubstitutePosition = function (intersectedPosition, targetPosition, ele) {
     var translationOffset = 20;
-    var strokeWidthOffset = 1;
-    var vertex1Position = {
-        x: ele.position.x + strokeWidthOffset,
-        y: ele.position.y + strokeWidthOffset,
-    };
-    var vertex2Position = {
-        x: ele.position.x + ele.size.width - strokeWidthOffset,
-        y: ele.position.y + strokeWidthOffset,
-    };
-    var vertex3Position = {
-        x: ele.position.x + ele.size.width - strokeWidthOffset,
-        y: ele.position.y + ele.size.height - strokeWidthOffset,
-    };
-    var vertex4Position = {
-        x: ele.position.x + strokeWidthOffset,
-        y: ele.position.y + ele.size.height - strokeWidthOffset,
-    };
+    var _a = getFourVertexesOfBBoxFromElement(ele), vertex1Position = _a[0], vertex2Position = _a[1], vertex3Position = _a[2], vertex4Position = _a[3];
     var replacementPosition = null;
-    if (checkSamePosition(vertex1Position, intersectedPosition, 3)) {
+    if (checkSamePosition(vertex1Position, intersectedPosition, 0)) {
         //Cut at vertex 1 of bbox, move out a distance x,y
         replacementPosition = {
             x: vertex1Position.x - translationOffset,
             y: vertex1Position.y - translationOffset,
         };
     }
-    else if (checkSamePosition(vertex2Position, intersectedPosition, 3)) {
+    else if (checkSamePosition(vertex2Position, intersectedPosition, 0)) {
         //Cut at vertex 2 of bbox, move out a distance x,y
         replacementPosition = {
             x: vertex2Position.x + translationOffset,
             y: vertex2Position.y - translationOffset,
         };
     }
-    else if (checkSamePosition(vertex3Position, intersectedPosition, 3)) {
+    else if (checkSamePosition(vertex3Position, intersectedPosition, 0)) {
         //Cut at vertex 3 of bbox, move out a distance x,y
         replacementPosition = {
             x: vertex3Position.x + translationOffset,
             y: vertex3Position.y + translationOffset,
         };
     }
-    else if (checkSamePosition(vertex4Position, intersectedPosition, 3)) {
+    else if (checkSamePosition(vertex4Position, intersectedPosition, 0)) {
         //Cut at vertex 4 of bbox, move out a distance x,y
         replacementPosition = {
             x: vertex4Position.x - translationOffset,
@@ -7695,6 +7705,25 @@ var getRelativePosition = function (clientPosition, relativeElement) {
         x: clientPosition.x - relativeRect.left,
         y: clientPosition.y - relativeRect.top,
     };
+};
+var getFourVertexesOfBBoxFromElement = function (element) {
+    var vertex1Position = {
+        x: element.position.x,
+        y: element.position.y
+    };
+    var vertex2Position = {
+        x: element.position.x + element.size.width,
+        y: element.position.y
+    };
+    var vertex3Position = {
+        x: element.position.x + element.size.width,
+        y: element.position.y + element.size.height
+    };
+    var vertex4Position = {
+        x: element.position.x,
+        y: element.position.y + element.size.height
+    };
+    return [vertex1Position, vertex2Position, vertex3Position, vertex4Position];
 };
 
 var makerStart = React.createElement("circle", { cx: 10, cy: 10, r: 10, fill: "blue" });
@@ -8054,7 +8083,7 @@ var Element = function (props) {
     }, [ports]);
     useEffect(function () {
         var _a;
-        console.info('Rendering Element ' + ((_a = texts === null || texts === void 0 ? void 0 : texts[0]) === null || _a === void 0 ? void 0 : _a.content) || id);
+        console.info('Rendering Element ' + ((_a = texts === null || texts === void 0 ? void 0 : texts[0]) === null || _a === void 0 ? void 0 : _a.content) || id, props.ports);
     });
     //Listen a new port is created, after add new port to ports state
     useEffect(function () {
@@ -8699,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; });
@@ -8835,7 +8864,7 @@ var Paper = function (props) {
             parentChangedCancelers.forEach(function (canceller) { return canceller === null || canceller === void 0 ? void 0 : canceller(); });
             addedPortCancelers.forEach(function (canceller) { return canceller(); });
         };
-    }, []);
+    }, [elements]);
     //Update elements tree when length of elements change
     useEffect(function () {
         updateElementsTree();
@@ -8908,6 +8937,9 @@ var Paper = function (props) {
     //Automatically add points on the link so that the link does not cross elements, default maximum 10 points
     var automationAddPointsToLink = useCallback(function (eleLink, limitPoint) {
         if (limitPoint === void 0) { limitPoint = 10; }
+        if (!eleLink.targetElement) {
+            throw new Error("Target element is not found in element link");
+        }
         var sourceElement = eleLink.sourceElement, sourcePort = eleLink.sourcePort, targetElement = eleLink.targetElement, targetPort = eleLink.targetPort;
         var sourcePosition = {
             x: sourceElement.position.x + sourcePort.position.x,
@@ -8917,6 +8949,20 @@ var Paper = function (props) {
             x: targetElement.position.x + targetPort.position.x,
             y: targetElement.position.y + targetPort.position.y
         };
+        var fourVertexesOfSourceEleBBox = getFourVertexesOfBBoxFromElement(sourceElement);
+        var fourVertexesOfTargetEleBBox = getFourVertexesOfBBoxFromElement(targetElement);
+        var projectedSourcePositionOnBBox = findNearestProjectedPoint(sourcePosition, [
+            [fourVertexesOfSourceEleBBox[0], fourVertexesOfSourceEleBBox[1]],
+            [fourVertexesOfSourceEleBBox[1], fourVertexesOfSourceEleBBox[2]],
+            [fourVertexesOfSourceEleBBox[2], fourVertexesOfSourceEleBBox[3]],
+            [fourVertexesOfSourceEleBBox[3], fourVertexesOfSourceEleBBox[0]],
+        ]);
+        var projectedTargetPositionOnBBox = findNearestProjectedPoint(targetPosition, [
+            [fourVertexesOfTargetEleBBox[0], fourVertexesOfTargetEleBBox[1]],
+            [fourVertexesOfTargetEleBBox[1], fourVertexesOfTargetEleBBox[2]],
+            [fourVertexesOfTargetEleBBox[2], fourVertexesOfTargetEleBBox[3]],
+            [fourVertexesOfTargetEleBBox[3], fourVertexesOfTargetEleBBox[0]],
+        ]);
         var numberOfPoints = 0;
         //create points between the start and end points, to create a line segment that passes through the points without intersecting the elements
         function generatePositions(sourcePosition, targetPosition, elements) {
@@ -8936,7 +8982,7 @@ var Paper = function (props) {
             return __spreadArray(__spreadArray(__spreadArray([], prependedPoints, true), [replacementPosition], false), appendedPoints, true);
         }
         var elements = elementsRef.current;
-        var points = generatePositions(sourcePosition, targetPosition, elements);
+        var points = generatePositions(projectedSourcePositionOnBBox, projectedTargetPositionOnBBox, elements);
         return __assign(__assign({}, eleLink), { points: points });
     }, []);
     var handlePaperMouseMove = function (ev) {