orcasvn-react-diagrams 0.1.33 → 0.1.35

package/dist/cjs/index.js

@@ -837,6 +837,9 @@ var EditorContext = /** @class */ (function () {
         get: function () {
             return this._elements;
         },
+        set: function (value) {
+            this._elements = value;
+        },
         enumerable: false,
         configurable: true
     });
@@ -844,6 +847,9 @@ var EditorContext = /** @class */ (function () {
         get: function () {
             return this._links;
         },
+        set: function (value) {
+            this._links = value;
+        },
         enumerable: false,
         configurable: true
     });
@@ -851,6 +857,9 @@ var EditorContext = /** @class */ (function () {
         get: function () {
             return this._texts;
         },
+        set: function (value) {
+            this._texts = value;
+        },
         enumerable: false,
         configurable: true
     });
@@ -858,6 +867,10 @@ var EditorContext = /** @class */ (function () {
         return this._elements.find(function (e) { return e.id === elementId; });
     };
     EditorContext.prototype.addElement = function (element) {
+        //check if element with the same id already exists
+        if (this._elements.find(function (e) { return e.id === element.id; })) {
+            throw new Error("Element with id ".concat(element.id, " already exists"));
+        }
         this._elements = __spreadArray(__spreadArray([], this._elements, true), [element], false);
         this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
     };
@@ -869,6 +882,10 @@ var EditorContext = /** @class */ (function () {
         return this._links.find(function (l) { return l.id === linkId; });
     };
     EditorContext.prototype.addLink = function (link) {
+        //check if link with the same id already exists
+        if (this._links.find(function (l) { return l.id === link.id; })) {
+            throw new Error("Link with id ".concat(link.id, " already exists"));
+        }
         this._links = __spreadArray(__spreadArray([], this._links, true), [link], false);
         this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
     };
@@ -880,6 +897,10 @@ var EditorContext = /** @class */ (function () {
         return this._texts.find(function (t) { return t.id === textId; });
     };
     EditorContext.prototype.addText = function (text) {
+        //check if text with the same id already exists
+        if (this._texts.find(function (t) { return t.id === text.id; })) {
+            throw new Error("Text with id ".concat(text.id, " already exists"));
+        }
         this._texts = __spreadArray(__spreadArray([], this._texts, true), [text], false);
         this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
     };
@@ -7621,13 +7642,15 @@ var generateSubstitutePosition = function (intersectedPosition, targetPosition,
             };
         }
         else {
+            //Translate to the left of vertex 1
             var leftPosition = {
-                x: ele.position.x - translationOffset,
-                y: ele.position.y,
+                x: vertex1Position.x - translationOffset,
+                y: vertex1Position.y,
             };
+            //Translate to the right of vertex 2
             var rightPosition = {
-                x: ele.position.x + ele.size.width + translationOffset,
-                y: ele.position.y,
+                x: vertex2Position.x + translationOffset,
+                y: vertex2Position.y,
             };
             replacementPosition = findNearestPosition([leftPosition, rightPosition], targetPosition);
         }
@@ -7644,13 +7667,15 @@ var generateSubstitutePosition = function (intersectedPosition, targetPosition,
             };
         }
         else {
+            //Translate to the left of vertex 4
             var leftPosition = {
-                x: ele.position.x - translationOffset,
-                y: ele.position.y + ele.size.height,
+                x: vertex4Position.x - translationOffset,
+                y: vertex4Position.y,
             };
+            //Translate to the right of vertex 3
             var rightPosition = {
-                x: ele.position.x + ele.size.width + translationOffset,
-                y: ele.position.y + ele.size.height,
+                x: vertex3Position.x + translationOffset,
+                y: vertex3Position.y,
             };
             replacementPosition = findNearestPosition([leftPosition, rightPosition], targetPosition);
         }
@@ -7667,13 +7692,15 @@ var generateSubstitutePosition = function (intersectedPosition, targetPosition,
             };
         }
         else {
+            //Translate to the top of vertex 1
             var topPosition = {
-                x: ele.position.x,
-                y: ele.position.y - translationOffset,
+                x: vertex1Position.x,
+                y: vertex1Position.y - translationOffset,
             };
+            //Translate to the bottom of vertex 4
             var bottomPosition = {
-                x: ele.position.x,
-                y: ele.position.y + ele.size.height + translationOffset,
+                x: vertex4Position.x,
+                y: vertex4Position.y + translationOffset,
             };
             replacementPosition = findNearestPosition([topPosition, bottomPosition], targetPosition);
         }
@@ -7690,13 +7717,15 @@ var generateSubstitutePosition = function (intersectedPosition, targetPosition,
             };
         }
         else {
+            //Translate to the top of vertex 2
             var topPosition = {
-                x: ele.position.x + ele.size.width,
-                y: ele.position.y - translationOffset,
+                x: vertex2Position.x,
+                y: vertex2Position.y - translationOffset,
             };
+            //Translate to the bottom of vertex 3
             var bottomPosition = {
-                x: ele.position.x + ele.size.width,
-                y: ele.position.y + ele.size.height + translationOffset,
+                x: vertex3Position.x,
+                y: vertex3Position.y + translationOffset,
             };
             replacementPosition = findNearestPosition([topPosition, bottomPosition], targetPosition);
         }
@@ -7711,23 +7740,38 @@ var getRelativePosition = function (clientPosition, relativeElement) {
     };
 };
 var getFourVertexesOfBBoxFromElement = function (element) {
+    var absolutePosition = getAbsolutePosition(element);
     var vertex1Position = {
-        x: element.position.x,
-        y: element.position.y
+        x: absolutePosition.x,
+        y: absolutePosition.y
     };
     var vertex2Position = {
-        x: element.position.x + element.size.width,
-        y: element.position.y
+        x: absolutePosition.x + element.size.width,
+        y: absolutePosition.y
     };
     var vertex3Position = {
-        x: element.position.x + element.size.width,
-        y: element.position.y + element.size.height
+        x: absolutePosition.x + element.size.width,
+        y: absolutePosition.y + element.size.height
     };
     var vertex4Position = {
-        x: element.position.x,
-        y: element.position.y + element.size.height
+        x: absolutePosition.x,
+        y: absolutePosition.y + element.size.height
     };
     return [vertex1Position, vertex2Position, vertex3Position, vertex4Position];
+};
+//get absolute position of element
+var getAbsolutePosition = function (element) {
+    var parentElement = element.parentElement;
+    if (!parentElement) {
+        return __assign({}, element.position);
+    }
+    var absoluteParentElement = getAbsolutePosition(parentElement);
+    var x = element.position.x + absoluteParentElement.x;
+    var y = element.position.y + absoluteParentElement.y;
+    return {
+        x: x,
+        y: y,
+    };
 };
 
 var makerStart = React.createElement("circle", { cx: 10, cy: 10, r: 10, fill: "blue" });
@@ -8059,22 +8103,12 @@ var Element = function (props) {
     var elementRef = React.useRef(null);
     var elementLinkStarted = React.useRef();
     var portsRef = React.useRef(ports);
-    React.useEffect(function () {
-        console.log('changed props.children', texts === null || texts === void 0 ? void 0 : texts[0].content);
-    }, [props.children]);
-    React.useEffect(function () {
-        return function () {
-            var _a;
-            console.log('un mount', (_a = texts === null || texts === void 0 ? void 0 : texts[0]) === null || _a === void 0 ? void 0 : _a.content);
-        };
-    }, []);
     //Listen to manually trigger render event
     React.useEffect(function () {
         var _a;
         var off = (_a = props.onManuallyTriggerRenderPort) === null || _a === void 0 ? void 0 : _a.call(props, function (portId, elementId) {
             if (elementId !== id)
                 return;
-            console.log('onManuallyTriggerRenderPort', id);
             setPorts(function (prev) { return __spreadArray([], prev, true); });
         });
         return function () {
@@ -8728,6 +8762,59 @@ function useKeyboardCommands(_a) {
     }, [element]);
 }
 
+//Automatically add points on the link so that the link does not cross elements, default maximum 10 points
+var automationAddPointsToLink = function (eleLink, elements, limitPoint) {
+    if (!eleLink.targetElement || !eleLink.targetPort) {
+        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 absolutePositionOfSourceEle = getAbsolutePosition(sourceElement);
+    var absolutePositionOfTargetEle = getAbsolutePosition(targetElement);
+    var sourcePosition = {
+        x: absolutePositionOfSourceEle.x + sourcePort.position.x,
+        y: absolutePositionOfSourceEle.y + sourcePort.position.y
+    };
+    var targetPosition = {
+        x: absolutePositionOfTargetEle.x + targetPort.position.x,
+        y: absolutePositionOfTargetEle.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) {
+        var firstIntersection = getFirstIntersection(sourcePosition, targetPosition, elements);
+        //If there is no intersection point, then the line connecting the two points does not intersect any element.
+        if (!firstIntersection || limitPoint === numberOfPoints)
+            return [];
+        var nearestIntersection = firstIntersection.nearestIntersection; firstIntersection.intersectionPointsList; var intersectedElement = firstIntersection.element;
+        //Calculate to create a replacement point
+        var replacementPosition = generateSubstitutePosition(nearestIntersection, targetPosition, intersectedElement);
+        //Increases the number of points found by 1 
+        numberOfPoints += 1;
+        //Create points with the starting point being the sourcePosition and the ending point being the newly created point
+        var prependedPoints = generatePositions(sourcePosition, replacementPosition, elements);
+        //Create points with the starting point being the new newly created point and the ending point being the targetPosition
+        var appendedPoints = generatePositions(replacementPosition, targetPosition, elements);
+        return __spreadArray(__spreadArray(__spreadArray([], prependedPoints, true), [replacementPosition], false), appendedPoints, true);
+    }
+    var points = generatePositions(projectedSourcePositionOnBBox, projectedTargetPositionOnBBox, elements);
+    eleLink.points = points;
+    return eleLink;
+};
+
 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) {
@@ -8738,11 +8825,6 @@ function convertElementsToTree(elements) {
         var foundChildElements = possibleChildElements.filter(function (ele) { var _a; return ((_a = ele.parentElement) === null || _a === void 0 ? void 0 : _a.id) === elementNodeInTree.id; });
         var orphanedElements = possibleChildElements.filter(function (ele) { var _a; return ((_a = ele.parentElement) === null || _a === void 0 ? void 0 : _a.id) !== elementNodeInTree.id; });
         var childElementsWithChild = foundChildElements.map(function (_elementNodeInTree) {
-            var relativePosition = {
-                x: _elementNodeInTree.position.x - elementNodeInTree.position.x,
-                y: _elementNodeInTree.position.y - elementNodeInTree.position.y,
-            };
-            _elementNodeInTree.relativePosition = relativePosition;
             var newNode = findChildElementsOfNode(_elementNodeInTree, orphanedElements);
             return newNode;
         });
@@ -8752,7 +8834,6 @@ function convertElementsToTree(elements) {
     var parentElms = elements.filter(function (e) { return !e.parentElement; });
     var childElms = elements.filter(function (e) { return e.parentElement; });
     var parsedElementsInTree = parentElms.map(function (ele) {
-        ele.relativePosition = ele.position;
         var eleWithChild = findChildElementsOfNode(ele, childElms);
         return eleWithChild;
     });
@@ -8773,10 +8854,9 @@ var Paper = function (props) {
     var paperContainerRef = React.useRef(null);
     var tempLinkRef = React.useRef(tempLink); //Cache tempLink to avoid re-render when tempLink changed
     var elementsRef = React.useRef(elements); //Cache elements to avoid re-render when elements changed
+    var linksRef = React.useRef(links); //Cache links to avoid re-render when links changed
+    var textsRef = React.useRef(texts); //Cache texts to avoid re-render when texts changed
     var size = props.size;
-    React.useEffect(function () {
-        console.log('Render Paper');
-    });
     React.useEffect(function () {
         setElements(props.elements);
     }, [props.elements]);
@@ -8788,17 +8868,27 @@ var Paper = function (props) {
     }, [props.texts]);
     React.useEffect(function () {
         var off = props.onManuallyTriggerRenderElement(function (elementId) {
-            console.log('onManuallyTriggerRenderElement');
-            setElements(function (prev) { return __spreadArray([], prev, true); });
+            setElements(__spreadArray([], elements, true));
+            if (props.onElementsChanged) {
+                props.onElementsChanged(__spreadArray([], elements, true));
+            }
         });
         return function () {
             off();
         };
-    }, [props.onManuallyTriggerRenderElement]);
+    }, [props.onManuallyTriggerRenderElement, props.onElementsChanged, elements]);
     //Cache elements to avoid re-render when elements changed
     React.useEffect(function () {
         elementsRef.current = elements;
     }, [elements]);
+    //Cache links to avoid re-render when links changed
+    React.useEffect(function () {
+        linksRef.current = links;
+    }, [links]);
+    //Cache texts to avoid re-render when texts changed
+    React.useEffect(function () {
+        textsRef.current = texts;
+    }, [texts]);
     useKeyboardCommands({
         element: paperContainerRef.current
     });
@@ -8846,7 +8936,6 @@ var Paper = function (props) {
         var parentChangedCancelers = elementsRef.current.map(function (element) {
             var _a;
             return (_a = element.onParentChanged) === null || _a === void 0 ? void 0 : _a.call(element, function (newPa, oldPa) {
-                console.log('onParentChanged');
                 updateElementsTree();
             });
         });
@@ -8855,13 +8944,18 @@ var Paper = function (props) {
             var _a;
             return (_a = element.onAddedPort) === null || _a === void 0 ? void 0 : _a.call(element, function (newPort) {
                 console.log("A new port has been added to element ".concat(element.id));
-                //Set state to re-render component
-                setElements(function (prev) { return prev.map(function (ele) {
+                var prevElements = elementsRef.current;
+                var newElements = prevElements.map(function (ele) {
                     if (ele.id === element.id) {
                         ele.ports = __spreadArray([], (ele.ports || []), true);
                     }
                     return ele;
-                }); });
+                });
+                //Set state to re-render component
+                setElements(newElements);
+                if (props.onElementsChanged) {
+                    props.onElementsChanged(newElements);
+                }
             });
         });
         return function () {
@@ -8890,8 +8984,20 @@ var Paper = function (props) {
             if (selectedElement) {
                 var deletedChildElements = getDeletedChildElements(selectedElement);
                 var deletedElementIds_1 = __spreadArray(__spreadArray([], deletedChildElements, true), [selectedElement], false).map(function (e) { return e.id; });
-                setElements(function (prev) { return prev.filter(function (e) { return !deletedElementIds_1.includes(e.id); }); });
-                setLinks(function (prevLinks) { return prevLinks.filter(function (l) { return !deletedElementIds_1.includes(l.sourceElement.id) && !deletedElementIds_1.includes(l.targetElement.id); }); });
+                var prevElements = elementsRef.current;
+                var newElements = prevElements.filter(function (e) { return !deletedElementIds_1.includes(e.id); });
+                //Set state to re-render component
+                setElements(newElements);
+                if (props.onElementsChanged) {
+                    props.onElementsChanged(newElements);
+                }
+                //Update links
+                var prevLinks = linksRef.current;
+                var newLinks = prevLinks.filter(function (l) { return !deletedElementIds_1.includes(l.sourceElement.id) && !deletedElementIds_1.includes(l.targetElement.id); });
+                setLinks(newLinks);
+                if (props.onLinksChanged) {
+                    props.onLinksChanged(newLinks);
+                }
                 setSelectedElement(undefined);
                 setSelectedElementSVG(null);
             }
@@ -8903,14 +9009,19 @@ var Paper = function (props) {
         return function () {
             listener.off();
         };
-    }, [selectedElement]);
+    }, [selectedElement, props.onElementsChanged]);
     //Listen command delete selected for link
     React.useEffect(function () {
         var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedLink(function () {
             if (selectedLink) {
-                setLinks(function (prev) { return prev.filter(function (l) { return l.id !== selectedLink.id; }); });
+                var prevLinks = linksRef.current;
+                var newLinks = prevLinks.filter(function (l) { return l.id !== selectedLink.id; });
+                setLinks(links);
                 setSelectedLink(undefined);
+                if (props.onLinksChanged) {
+                    props.onLinksChanged(newLinks);
+                }
             }
         });
         //broadcast selected link to parent component
@@ -8920,13 +9031,18 @@ var Paper = function (props) {
         return function () {
             listener.off();
         };
-    }, [selectedLink]);
+    }, [selectedLink, props.onLinksChanged]);
     //Listen command delete selected for Text
     React.useEffect(function () {
         var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedText(function () {
             if (selectedText) {
-                setTexts(function (prev) { return prev.filter(function (t) { return t.id !== selectedText.id; }); });
+                var prevTexts = textsRef.current;
+                var newTexts = prevTexts.filter(function (t) { return t.id !== selectedText.id; });
+                setTexts(newTexts);
+                if (props.onTextsChanged) {
+                    props.onTextsChanged(newTexts);
+                }
                 setSelectedText(undefined);
             }
         });
@@ -8937,58 +9053,7 @@ var Paper = function (props) {
         return function () {
             listener.off();
         };
-    }, [selectedText]);
-    //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,
-            y: sourceElement.position.y + sourcePort.position.y
-        };
-        var targetPosition = {
-            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) {
-            var firstIntersection = getFirstIntersection(sourcePosition, targetPosition, elements);
-            //If there is no intersection point, then the line connecting the two points does not intersect any element.
-            if (!firstIntersection || limitPoint === numberOfPoints)
-                return [];
-            var nearestIntersection = firstIntersection.nearestIntersection; firstIntersection.intersectionPointsList; var intersectedElement = firstIntersection.element;
-            //Calculate to create a replacement point
-            var replacementPosition = generateSubstitutePosition(nearestIntersection, targetPosition, intersectedElement);
-            //Increases the number of points found by 1 
-            numberOfPoints += 1;
-            //Create points with the starting point being the sourcePosition and the ending point being the newly created point
-            var prependedPoints = generatePositions(sourcePosition, replacementPosition, elements);
-            //Create points with the starting point being the new newly created point and the ending point being the targetPosition
-            var appendedPoints = generatePositions(replacementPosition, targetPosition, elements);
-            return __spreadArray(__spreadArray(__spreadArray([], prependedPoints, true), [replacementPosition], false), appendedPoints, true);
-        }
-        var elements = elementsRef.current;
-        var points = generatePositions(projectedSourcePositionOnBBox, projectedTargetPositionOnBBox, elements);
-        return __assign(__assign({}, eleLink), { points: points });
-    }, []);
+    }, [selectedText, props.onTextsChanged]);
     var handlePaperMouseMove = function (ev) {
         var _a;
         //if there is a temp link, update the temp target point
@@ -9053,17 +9118,22 @@ var Paper = function (props) {
     };
     var handlePathChange = React.useCallback(function (path, id) {
         //Update path of element link, that changed
-        setLinks(function (prevLinks) {
-            var updatedLinkIndex = prevLinks.findIndex(function (l) { return l.id === id; });
-            prevLinks[updatedLinkIndex].path = path;
-            return __spreadArray([], prevLinks, true);
-        });
-    }, []);
+        // const prevLinks = linksRef.current;
+        var updatedLinkIndex = links.findIndex(function (l) { return l.id === id; });
+        links[updatedLinkIndex].path = path;
+        var newLinks = __spreadArray([], links, true);
+        setLinks(newLinks);
+        if (props.onLinksChanged) {
+            props.onLinksChanged(newLinks);
+        }
+    }, [props.onLinksChanged, links]);
     var handlePortMoved = React.useCallback(function (port, elementId, oldPosition, newPosition) {
+        var _a;
         var element = elementsRef.current.find(function (e) { return e.id === elementId; });
         if (element) {
             //set links equals a clone links to re-render links with new position
-            setLinks(function (prev) { return prev.map(function (link) {
+            var prevLinks = linksRef.current;
+            var newLinks = prevLinks.map(function (link) {
                 var _a, _b;
                 if (link.sourceElement.id === elementId && link.sourcePort.id === port.id) {
                     link.sourcePort.position = newPosition;
@@ -9072,24 +9142,30 @@ var Paper = function (props) {
                     link.targetPort.position = newPosition;
                 }
                 return link;
-            }); });
-            //Update port position in element, not re-render
-            setElements(function (prevElements) {
-                var _a;
-                var updatedElementIndex = prevElements.findIndex(function (e) { return e.id === elementId; });
-                prevElements[updatedElementIndex].ports = (_a = prevElements[updatedElementIndex].ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
-                    if (p.id === port.id) {
-                        p.position = newPosition;
-                    }
-                    return p;
-                });
-                return prevElements;
             });
+            setLinks(newLinks);
+            if (props.onLinksChanged) {
+                props.onLinksChanged(newLinks);
+            }
+            var newElements = elementsRef.current;
+            var updatedElementIndex = newElements.findIndex(function (e) { return e.id === elementId; });
+            newElements[updatedElementIndex].ports = (_a = newElements[updatedElementIndex].ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
+                if (p.id === port.id) {
+                    p.position = newPosition;
+                }
+                return p;
+            });
+            //Update port position in element, not re-render
+            //To avoid re-render
+            setElements(newElements);
+            if (props.onElementsChanged) {
+                props.onElementsChanged(newElements);
+            }
             if (props.onPortMoved) {
                 props.onPortMoved(newPosition, port, element);
             }
         }
-    }, [props.onPortMoved]);
+    }, [props.onPortMoved, props.onElementsChanged, props.onLinksChanged]);
     //Handle creating a new element link
     var handlePortMouseDown = React.useCallback(function (ev, port, elementId) {
         var _a;
@@ -9121,10 +9197,11 @@ var Paper = function (props) {
             return null;
         //Automatic bending, if is not defined points
         if (!newElementLink.points || newElementLink.points.length === 0) {
-            newElementLink = automationAddPointsToLink(newElementLink, MAX_LINK_KNOT_COUNT);
+            var elements_1 = elementsRef.current;
+            newElementLink = automationAddPointsToLink(newElementLink, elements_1, MAX_LINK_KNOT_COUNT);
         }
         return newElementLink;
-    }, [props.onCreatingLink, automationAddPointsToLink]);
+    }, [props.onCreatingLink]);
     var handlePortMouseUp = React.useCallback(function (ev, port, elementId) {
         var _a;
         ev.stopPropagation();
@@ -9137,112 +9214,123 @@ var Paper = function (props) {
         if (tempLinkRef.current) {
             //Check if mouse up point is mouse down point or not
             var isMouseUpOnNotSelf = tempLinkRef.current.sourcePort.id !== port.id || tempLinkRef.current.sourceElement.id !== elementId;
-            var newElementLink_1 = null;
+            var newElementLink = null;
             if (isMouseUpOnNotSelf) {
                 var _b = tempLinkRef.current, sourcePort = _b.sourcePort, sourceElement = _b.sourceElement;
                 var targetElement = elementsRef.current.find(function (e) { return e.id === elementId; });
-                newElementLink_1 = createElementLink(sourcePort, sourceElement, port, targetElement);
+                newElementLink = createElementLink(sourcePort, sourceElement, port, targetElement);
             }
-            if (newElementLink_1) {
-                setLinks(function (prev) { return __spreadArray(__spreadArray([], prev, true), [newElementLink_1], false); });
-                paperEventEmitter.emitElementLinkEnded(newElementLink_1);
+            if (newElementLink) {
+                var prevLinks = linksRef.current;
+                var newLinks = __spreadArray(__spreadArray([], prevLinks, true), [newElementLink], false);
+                setLinks(newLinks);
+                if (props.onLinksChanged) {
+                    props.onLinksChanged(newLinks);
+                }
+                paperEventEmitter.emitElementLinkEnded(newElementLink);
             }
             else {
                 paperEventEmitter.emitElementLinkEnded();
             }
             setTempLink(null);
         }
-    }, [paperEventEmitter, createElementLink, props.onPortMouseUp]);
+    }, [paperEventEmitter, createElementLink, props.onPortMouseUp, props.onLinksChanged]);
     var handleLinkLabelMoved = React.useCallback(function (offsetX, offsetY, index, labelType) {
-        setLinks(function (prevLinks) {
-            var newLinks = __spreadArray([], prevLinks, true);
-            var currentLink = newLinks[index];
-            switch (labelType) {
-                case 'middle': {
-                    var oldPosition = currentLink.label.position || LINK_LABEL_POSITION_FROM_LINK_MID_POINT;
-                    var newPosition = {
-                        x: oldPosition.x + offsetX,
-                        y: oldPosition.y + offsetY,
-                    };
-                    currentLink.label.position = newPosition;
-                    break;
-                }
-                case 'source': {
-                    var oldPosition = currentLink.sourceLabel.position || LINK_SOURCE_LABEL_POSITION_FROM_SOURCE_PORT;
-                    var newPosition = {
-                        x: oldPosition.x + offsetX,
-                        y: oldPosition.y + offsetY,
-                    };
-                    currentLink.sourceLabel.position = newPosition;
-                    break;
-                }
-                case 'target': {
-                    var oldPosition = currentLink.targetLabel.position || LINK_TARGET_LABEL_POSITION_FROM_TARGET_PORT;
-                    var newPosition = {
-                        x: oldPosition.x + offsetX,
-                        y: oldPosition.y + offsetY,
-                    };
-                    currentLink.targetLabel.position = newPosition;
-                    break;
-                }
+        var prevLinks = linksRef.current;
+        var newLinks = __spreadArray([], prevLinks, true);
+        var currentLink = newLinks[index];
+        switch (labelType) {
+            case 'middle': {
+                var oldPosition = currentLink.label.position || LINK_LABEL_POSITION_FROM_LINK_MID_POINT;
+                var newPosition = {
+                    x: oldPosition.x + offsetX,
+                    y: oldPosition.y + offsetY,
+                };
+                currentLink.label.position = newPosition;
+                break;
             }
-            return newLinks;
-        });
-    }, []);
+            case 'source': {
+                var oldPosition = currentLink.sourceLabel.position || LINK_SOURCE_LABEL_POSITION_FROM_SOURCE_PORT;
+                var newPosition = {
+                    x: oldPosition.x + offsetX,
+                    y: oldPosition.y + offsetY,
+                };
+                currentLink.sourceLabel.position = newPosition;
+                break;
+            }
+            case 'target': {
+                var oldPosition = currentLink.targetLabel.position || LINK_TARGET_LABEL_POSITION_FROM_TARGET_PORT;
+                var newPosition = {
+                    x: oldPosition.x + offsetX,
+                    y: oldPosition.y + offsetY,
+                };
+                currentLink.targetLabel.position = newPosition;
+                break;
+            }
+        }
+        setLinks(newLinks);
+        if (props.onLinksChanged) {
+            props.onLinksChanged(newLinks);
+        }
+    }, [props.onLinksChanged]);
     var handleLinkLabelResized = React.useCallback(function (width, height, index, labelType) {
-        setLinks(function (prevLinks) {
-            var newLinks = __spreadArray([], prevLinks, true);
-            var currentLink = newLinks[index];
-            switch (labelType) {
-                case 'middle': {
-                    var newSize = {
-                        width: width,
-                        height: height,
-                    };
-                    currentLink.label.size = newSize;
-                    break;
-                }
-                case 'source': {
-                    var newSize = {
-                        width: width,
-                        height: height,
-                    };
-                    currentLink.sourceLabel.size = newSize;
-                    break;
-                }
-                case 'target': {
-                    var newSize = {
-                        width: width,
-                        height: height,
-                    };
-                    currentLink.targetLabel.size = newSize;
-                    break;
-                }
+        var prevLinks = linksRef.current;
+        var newLinks = __spreadArray([], prevLinks, true);
+        var currentLink = newLinks[index];
+        switch (labelType) {
+            case 'middle': {
+                var newSize = {
+                    width: width,
+                    height: height,
+                };
+                currentLink.label.size = newSize;
+                break;
             }
-            return newLinks;
-        });
-    }, []);
+            case 'source': {
+                var newSize = {
+                    width: width,
+                    height: height,
+                };
+                currentLink.sourceLabel.size = newSize;
+                break;
+            }
+            case 'target': {
+                var newSize = {
+                    width: width,
+                    height: height,
+                };
+                currentLink.targetLabel.size = newSize;
+                break;
+            }
+        }
+        setLinks(newLinks);
+        if (props.onLinksChanged) {
+            props.onLinksChanged(newLinks);
+        }
+    }, [props.onLinksChanged]);
     var handleLinkLabelContentChanged = React.useCallback(function (newValue, index, labelType) {
-        setLinks(function (prevLinks) {
-            var newLinks = __spreadArray([], prevLinks, true);
-            var currentLink = newLinks[index];
-            switch (labelType) {
-                case 'middle': {
-                    currentLink.label.content = newValue;
-                    break;
-                }
-                case 'source': {
-                    currentLink.sourceLabel.content = newValue;
-                    break;
-                }
-                case 'target': {
-                    currentLink.targetLabel.content = newValue;
-                    break;
-                }
+        var prevLinks = linksRef.current;
+        var newLinks = __spreadArray([], prevLinks, true);
+        var currentLink = newLinks[index];
+        switch (labelType) {
+            case 'middle': {
+                currentLink.label.content = newValue;
+                break;
             }
-            return newLinks;
-        });
-    }, []);
+            case 'source': {
+                currentLink.sourceLabel.content = newValue;
+                break;
+            }
+            case 'target': {
+                currentLink.targetLabel.content = newValue;
+                break;
+            }
+        }
+        setLinks(newLinks);
+        if (props.onLinksChanged) {
+            props.onLinksChanged(newLinks);
+        }
+    }, [props.onLinksChanged]);
     var handleSelectLink = function (link, index) {
         setSelectedLink(link);
     };
@@ -9253,9 +9341,6 @@ var Paper = function (props) {
     var updateElementPosition = function (element, movementX, movementY) {
         element.position.x += movementX;
         element.position.y += movementY;
-        if (element.childrenElementsInTree && element.childrenElementsInTree.length > 0) {
-            element.childrenElementsInTree = element.childrenElementsInTree.map(function (child) { return updateElementPosition(child, movementX, movementY); });
-        }
         return element;
     };
     //use selection frame
@@ -9274,10 +9359,6 @@ var Paper = function (props) {
                 return;
             var oldPosition = __assign({}, selectedElement.position);
             var newElementPosition = updateElementPosition(selectedElement, offsetX, offsetY);
-            newElementPosition.relativePosition = {
-                x: newElementPosition.relativePosition.x + offsetX,
-                y: newElementPosition.relativePosition.y + offsetY
-            };
             var indexSelectedElement = elements.findIndex(function (e) { return e.id === selectedElement.id; });
             //Set state to re-render UI with new position
             setElementsInTree(function (prev) { return __spreadArray([], prev, true); });
@@ -9294,7 +9375,11 @@ var Paper = function (props) {
             var oldSize = selectedElement.size;
             var newSize = { width: width, height: height };
             elements[indexSelectedElement].size = newSize;
-            setElements(__spreadArray([], elements, true));
+            var newElements = __spreadArray([], elements, true);
+            setElements(newElements);
+            if (props.onElementsChanged) {
+                props.onElementsChanged(newElements);
+            }
             if (props.onElementResized) {
                 props.onElementResized(newSize, selectedElement, indexSelectedElement);
             }
@@ -9331,18 +9416,20 @@ var Paper = function (props) {
     }, [handleLinkLabelContentChanged]);
     var handleClickLinkDelete = React.useCallback(function (link, index) {
         return function () {
-            setLinks(function (prevLinks) {
-                var newLinks = __spreadArray([], prevLinks, true);
-                newLinks.splice(index, 1);
-                return newLinks;
-            });
+            var prevLinks = linksRef.current;
+            var newLinks = __spreadArray([], prevLinks, true);
+            newLinks.splice(index, 1);
+            setLinks(newLinks);
+            if (props.onLinksChanged) {
+                props.onLinksChanged(newLinks);
+            }
         };
-    }, []);
+    }, [props.onLinksChanged]);
     var handleMouseUpAtLinkedPortPlaceholder = React.useCallback(function (link, position, targetElementId) {
         var targetElement = elementsRef.current.find(function (e) { return e.id === targetElementId; });
         if (!targetElement)
             return;
-        console.log("A port could have been created at position ".concat(JSON.stringify(position), " on element ").concat(targetElementId, " by linking from element ").concat(link.sourceElement.id));
+        console.info("A port could have been created at position ".concat(JSON.stringify(position), " on element ").concat(targetElementId, " by linking from element ").concat(link.sourceElement.id));
         if (props.onCreatingPortByLinking) {
             var sourcePort = link.sourcePort, sourceElement = link.sourceElement;
             //Handle create port via onCreatingPortByLinking prop
@@ -9351,11 +9438,16 @@ var Paper = function (props) {
                 //Add new port to target element
                 targetElement.addPort(targetPort);
                 //Create new link with created port, that is returned.
-                var newElementLink_2 = createElementLink(sourcePort, sourceElement, targetPort, targetElement);
+                var newElementLink = createElementLink(sourcePort, sourceElement, targetPort, targetElement);
                 //Create link and clear some thing, then return
-                if (newElementLink_2) {
-                    setLinks(function (prev) { return __spreadArray(__spreadArray([], prev, true), [newElementLink_2], false); });
-                    paperEventEmitter.emitElementLinkEnded(newElementLink_2);
+                if (newElementLink) {
+                    var prevLinks = linksRef.current;
+                    var newLinks = __spreadArray(__spreadArray([], prevLinks, true), [newElementLink], false);
+                    setLinks(newLinks);
+                    if (props.onLinksChanged) {
+                        props.onLinksChanged(newLinks);
+                    }
+                    paperEventEmitter.emitElementLinkEnded(newElementLink);
                     setTempLink(null);
                     return;
                 }
@@ -9364,21 +9456,24 @@ var Paper = function (props) {
         //Clear tempLink
         setTempLink(null);
         paperEventEmitter.emitElementLinkEnded();
-    }, [props.onCreatingPortByLinking, createElementLink, paperEventEmitter]);
+    }, [props.onCreatingPortByLinking, createElementLink, paperEventEmitter, props.onLinksChanged]);
     var handleElementTextChange = React.useCallback(function (elementId, textId, newContent) {
-        setElements(function (prevElms) {
-            return prevElms.map(function (curEle) {
-                //Find changed text of element to update the content for it.
-                if (curEle.id === elementId && curEle.texts) {
-                    var updatedTextId = curEle.texts.findIndex(function (t) { return t.id === textId; });
-                    if (updatedTextId !== undefined) {
-                        curEle.texts[updatedTextId].content = newContent;
-                    }
+        var prevElms = elementsRef.current;
+        var newElements = prevElms.map(function (curEle) {
+            //Find changed text of element to update the content for it.
+            if (curEle.id === elementId && curEle.texts) {
+                var updatedTextId = curEle.texts.findIndex(function (t) { return t.id === textId; });
+                if (updatedTextId !== undefined) {
+                    curEle.texts[updatedTextId].content = newContent;
                 }
-                return curEle;
-            });
+            }
+            return curEle;
         });
-    }, []);
+        setElements(newElements);
+        if (props.onElementsChanged) {
+            props.onElementsChanged(newElements);
+        }
+    }, [props.onElementsChanged]);
     var handleElementClicked = React.useCallback(function (elementId, e, ref) {
         e.stopPropagation();
         var tempLink = tempLinkRef.current;
@@ -9428,20 +9523,13 @@ var Paper = function (props) {
         }
     }, [props.onElementMouseLeave]);
     var renderElementInTree = React.useCallback(function (element) {
-        var _a, _b;
         //use the defined react element or the default Element component
         var ReactElement = element.reactElement || Element$1;
         return (React.createElement("g", { id: "group-of-element-".concat(element.id), 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, 
+            React.createElement(ReactElement, { key: "element-".concat(element.id), id: element.id, height: element.size.height, width: element.size.width, x: element.position.x, y: element.position.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.childrenElementsInTree && element.childrenElementsInTree.map(renderElementInTree))));
     }, [handleElementClicked, handleContextMenu, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, handleMouseUp, handleMouseMove, handleMouseLeave]);
-    React.useEffect(function () {
-        console.log('elementsInTree');
-    }, [elementsInTree]);
-    React.useEffect(function () {
-        console.log('renderElementInTree');
-    }, [renderElementInTree]);
     var ElementsInTree = React.useMemo(function () {
         return elementsInTree.map(function (element, index) {
             return renderElementInTree(element);
@@ -9452,18 +9540,19 @@ var Paper = function (props) {
         React.createElement("svg", { tabIndex: 0, width: size.width, height: size.height, ref: paperContainerRef, id: "paper-container", onMouseMove: handlePaperMouseMove, onMouseDown: handleMouseDownOnPaper, onMouseUp: handleMouseUpOnPaper },
             paperContainerRef.current ? ElementsInTree : "",
             links && links.map(function (link, index) {
-                var _a, _b, _c, _d;
+                if (!link.targetElement || !link.targetPort)
+                    return null;
                 return (React.createElement(ElementLink, { key: link.id, id: link.id, path: link.path, sourcePosition: {
-                        x: link.sourceElement.position.x + link.sourcePort.position.x,
-                        y: link.sourceElement.position.y + link.sourcePort.position.y
+                        x: getAbsolutePosition(link.sourceElement).x + link.sourcePort.position.x,
+                        y: getAbsolutePosition(link.sourceElement).y + link.sourcePort.position.y
                     }, targetPosition: {
-                        x: ((_a = link.targetElement) === null || _a === void 0 ? void 0 : _a.position.x) + ((_b = link.targetPort) === null || _b === void 0 ? void 0 : _b.position.x),
-                        y: ((_c = link.targetElement) === null || _c === void 0 ? void 0 : _c.position.y) + ((_d = link.targetPort) === null || _d === void 0 ? void 0 : _d.position.y)
+                        x: getAbsolutePosition(link.targetElement).x + link.targetPort.position.x,
+                        y: getAbsolutePosition(link.targetElement).y + link.targetPort.position.y
                     }, points: link.points, onPathChanged: handlePathChange, onClickDelete: handleClickLinkDelete(link, index), onSelected: function () { return handleSelectLink(link); }, onDeselected: function () { return handleDeselectLink(); }, container: paperContainerRef.current, markerStart: link.markerStart, markerEnd: link.markerEnd, markerDistanceFromPort: link.markerDistanceFromPort, markerSize: link.markerSize, label: link.label, sourceLabel: link.sourceLabel, targetLabel: link.targetLabel, onLabelMoved: onLabelMoved(index), onLabelResized: onLabelResized(index), onLabelContentChanged: onLabelContentChanged(index) }));
             }),
             (tempLink === null || tempLink === void 0 ? void 0 : tempLink.tempTargetPosition) && React.createElement(ElementLink, { id: tempLink.id, points: tempLink.points, sourcePosition: {
-                    x: tempLink.sourceElement.position.x + tempLink.sourcePort.position.x,
-                    y: tempLink.sourceElement.position.y + tempLink.sourcePort.position.y
+                    x: getAbsolutePosition(tempLink.sourceElement).x + tempLink.sourcePort.position.x,
+                    y: getAbsolutePosition(tempLink.sourceElement).y + tempLink.sourcePort.position.y
                 }, targetPosition: tempLink.tempTargetPosition, container: paperContainerRef.current, markerStart: tempLink.markerStart, markerEnd: tempLink.markerEnd, markerDistanceFromPort: tempLink.markerDistanceFromPort, markerSize: tempLink.markerSize }),
             texts.map(function (text, index) { return (React.createElement(Text$1, { key: text.id, id: text.id, x: text.position.x, y: text.position.y, width: text.size.width, height: text.size.height, editable: text.editable, fontSize: text.fontSize, border: text.border, container: paperContainerRef.current, content: text.content, align: text.align, onSelected: function () {
                     setSelectedText(text);
@@ -9498,7 +9587,6 @@ var Editor = function (_a) {
         var offs = [];
         if (editorContext) {
             offs.push(editorContext.onEditorContextUpdated(function () {
-                console.log("onEditorContextUpdated");
                 setEditorStates(editorContext);
             }));
         }
@@ -9542,12 +9630,21 @@ var Editor = function (_a) {
     var handleElementMouseUp = React.useCallback(function (ev, element) {
         editorContext.onElementMouseUpHandler(ev, element);
     }, [editorContext]);
+    var handleElementsChanged = React.useCallback(function (elements) {
+        editorContext.elements = elements;
+    }, [editorContext]);
     var handleLinkSelected = React.useCallback(function (link) {
         editorContext.onLinkSelectedHandler(link);
     }, [editorContext]);
+    var handleLinksChanged = React.useCallback(function (links) {
+        editorContext.links = links;
+    }, [editorContext]);
     var handleTextSelected = React.useCallback(function (text) {
         editorContext.onTextSelectedHandler(text);
     }, [editorContext]);
+    var handleTextsChanged = React.useCallback(function (texts) {
+        editorContext.texts = texts;
+    }, [editorContext]);
     var handleOnCreatingLink = React.useCallback(function (sourcePort, sourceElement, targetPort, targetElement) {
         if (editorContext.onCreatingLinkHandler) {
             return editorContext.onCreatingLinkHandler(sourcePort, sourceElement, targetPort, targetElement);
@@ -9569,7 +9666,7 @@ var Editor = function (_a) {
     var handlePaperMouseUp = React.useCallback(function (position) {
         editorContext.onPaperMouseUpHandler(position);
     }, [editorContext]);
-    return (React.createElement(Paper$1, { key: "paper", size: { width: width, height: height }, elements: elements, links: links, texts: texts, onPaperClicked: handlePaperClicked, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseUp: handleElementMouseUp, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onTextSelected: handleTextSelected, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, onManuallyTriggerRenderElement: editorContext.onManuallyTriggerRenderElement.bind(editorContext), onManuallyTriggerRenderPort: editorContext.onManuallyTriggerRenderPort.bind(editorContext) }));
+    return (React.createElement(Paper$1, { key: "paper", size: { width: width, height: height }, elements: elements, links: links, texts: texts, onPaperClicked: handlePaperClicked, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseUp: handleElementMouseUp, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, onManuallyTriggerRenderElement: editorContext.onManuallyTriggerRenderElement.bind(editorContext), onManuallyTriggerRenderPort: editorContext.onManuallyTriggerRenderPort.bind(editorContext) }));
 };
 
 exports.CircleRC = Circle;