orcasvn-react-diagrams 0.1.34 → 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);
     };
@@ -8082,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 () {
@@ -8814,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) {
-            // const 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;
         });
@@ -8828,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;
     });
@@ -8849,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]);
@@ -8864,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
     });
@@ -8922,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();
             });
         });
@@ -8931,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 () {
@@ -8966,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);
             }
@@ -8979,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
@@ -8996,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);
             }
         });
@@ -9013,7 +9053,7 @@ var Paper = function (props) {
         return function () {
             listener.off();
         };
-    }, [selectedText]);
+    }, [selectedText, props.onTextsChanged]);
     var handlePaperMouseMove = function (ev) {
         var _a;
         //if there is a temp link, update the temp target point
@@ -9078,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;
@@ -9097,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;
@@ -9163,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);
     };
@@ -9279,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(child => updateElementPosition(child, movementX, movementY));
-        // }
         return element;
     };
     //use selection frame
@@ -9300,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); });
@@ -9320,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);
             }
@@ -9357,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
@@ -9377,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;
                 }
@@ -9390,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;
@@ -9461,12 +9530,6 @@ var Paper = function (props) {
                 // 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);
@@ -9524,7 +9587,6 @@ var Editor = function (_a) {
         var offs = [];
         if (editorContext) {
             offs.push(editorContext.onEditorContextUpdated(function () {
-                console.log("onEditorContextUpdated");
                 setEditorStates(editorContext);
             }));
         }
@@ -9568,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);
@@ -9595,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;