orcasvn-react-diagrams 0.1.22 → 0.1.24

package/dist/cjs/index.js

@@ -442,7 +442,8 @@ function generateUniqueId() {
     return v4();
 }
 
-var Element$1 = /** @class */ (function () {
+var MANUALLY_TRIGGER_RENDER$1 = 'manuallyTriggerRender';
+var Element$2 = /** @class */ (function () {
     function Element(x, y, width, height, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection, parentElement, textsPlaceHolderClassName, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition) {
         if (portMovealeAreas === void 0) { portMovealeAreas = []; }
         this.resizability = {
@@ -468,9 +469,23 @@ var Element$1 = /** @class */ (function () {
     }
     Element.prototype.manuallyTriggerRender = function () {
         //TODO: Implement this
+        this._eventEmitter.emit(MANUALLY_TRIGGER_RENDER$1);
+    };
+    Element.prototype.manuallyTriggerRenderHandler = function (callback) {
+        var _this = this;
+        //TODO: Implement this
+        this._eventEmitter.on(MANUALLY_TRIGGER_RENDER$1, callback);
+        var canceller = function () {
+            _this._eventEmitter.off(MANUALLY_TRIGGER_RENDER$1, callback);
+        };
+        return canceller;
     };
     Element.prototype.manuallyTriggerRenderPort = function (portId) {
         //TODO: Implement this
+        var port = this.getPort(portId);
+        if (port) {
+            port.manuallyTriggerRender();
+        }
     };
     Object.defineProperty(Element.prototype, "id", {
         get: function () {
@@ -657,9 +672,12 @@ var CustomShape = React$1.forwardRef(function (props, ref) {
     return (React$1.createElement(ShapeWrapper, __assign({}, props, { ref: ref }), props.children));
 });
 
+var MANUALLY_TRIGGER_RENDER = 'manuallyTriggerRender';
 var Port$1 = /** @class */ (function () {
     function Port(x, y, label, shapeRenderer, width, height) {
         var _this = this;
+        //internal properties
+        this._eventEmitter = new EventEmitter();
         this._id = generateUniqueId();
         this.position = { x: x, y: y };
         if (!height) {
@@ -685,6 +703,18 @@ var Port$1 = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Port.prototype.manuallyTriggerRender = function () {
+        //TODO: Implement this
+        this._eventEmitter.emit(MANUALLY_TRIGGER_RENDER);
+    };
+    Port.prototype.manuallyTriggerRenderHandler = function (callback) {
+        var _this = this;
+        this._eventEmitter.on(MANUALLY_TRIGGER_RENDER, callback);
+        var canceller = function () {
+            _this._eventEmitter.off(MANUALLY_TRIGGER_RENDER, callback);
+        };
+        return canceller;
+    };
     return Port;
 }());
 
@@ -750,6 +780,9 @@ var Text$2 = /** @class */ (function () {
 }());
 
 var EVENT_PAPER_CLICKED = 'paperClicked';
+var EVENT_PAPER_MOUSE_MOVED = 'paperMouseMoved';
+var EVENT_PAPER_MOUSE_DOWN = 'paperMouseDown';
+var EVENT_PAPER_MOUSE_UP = 'paperMouseUp';
 var EVENT_PORT_MOVED = 'portMoved';
 var EVENT_PORT_SELECTED = 'portSelected';
 var EVENT_ELEMENT_CONTEXT_MENU = 'elementContextMenu';
@@ -825,6 +858,42 @@ var EditorContext = /** @class */ (function () {
     EditorContext.prototype.onPaperClickedHandler = function (position) {
         this._eventEmitter.emit(EVENT_PAPER_CLICKED, position);
     };
+    EditorContext.prototype.onPaperMouseMoved = function (callback) {
+        var _this = this;
+        this._eventEmitter.on(EVENT_PAPER_CLICKED, callback);
+        var off = function () {
+            _this._eventEmitter.off(EVENT_PAPER_CLICKED, callback);
+        };
+        return off;
+    };
+    /** @internal */
+    EditorContext.prototype.onPaperMouseMovedHandler = function (position) {
+        this._eventEmitter.emit(EVENT_PAPER_MOUSE_MOVED, position);
+    };
+    EditorContext.prototype.onPaperMouseDown = function (callback) {
+        var _this = this;
+        this._eventEmitter.on(EVENT_PAPER_MOUSE_DOWN, callback);
+        var off = function () {
+            _this._eventEmitter.off(EVENT_PAPER_MOUSE_DOWN, callback);
+        };
+        return off;
+    };
+    /** @internal */
+    EditorContext.prototype.onPaperMouseDownHandler = function (position) {
+        this._eventEmitter.emit(EVENT_PAPER_MOUSE_DOWN, position);
+    };
+    EditorContext.prototype.onPaperMouseUp = function (callback) {
+        var _this = this;
+        this._eventEmitter.on(EVENT_PAPER_MOUSE_UP, callback);
+        var off = function () {
+            _this._eventEmitter.off(EVENT_PAPER_MOUSE_UP, callback);
+        };
+        return off;
+    };
+    /** @internal */
+    EditorContext.prototype.onPaperMouseUpHandler = function (position) {
+        this._eventEmitter.emit(EVENT_PAPER_MOUSE_UP, position);
+    };
     EditorContext.prototype.onPortMoved = function (callback) {
         var _this = this;
         this._eventEmitter.on(EVENT_PORT_MOVED, callback);
@@ -923,9 +992,21 @@ var EditorContext = /** @class */ (function () {
     };
     EditorContext.prototype.triggerRenderElement = function (elementId) {
         //TODO: to be implemented
+        var element = this.getElement(elementId);
+        if (element) {
+            element.manuallyTriggerRender();
+        }
     };
     EditorContext.prototype.triggerRenderPort = function (portId, elementId) {
+        var _a;
         //TODO: to be implemented
+        var element = this.getElement(elementId);
+        if (element) {
+            var port = (_a = element.ports) === null || _a === void 0 ? void 0 : _a.find(function (p) { return p.id === portId; });
+            if (port) {
+                port.manuallyTriggerRender();
+            }
+        }
     };
     return EditorContext;
 }());
@@ -1046,11 +1127,13 @@ var EVENT_NAME = {
     ELEMENT_RESIZED: 'element_resized',
     ELEMENT_DELETED: 'element_deleted',
     ELEMENT_SELECTED: 'element_selected',
+    COMMAND_RENDER_ELEMENT: 'command_render_element',
     //PORT
     PORT_MOUSE_DOWN: 'port_mouse_down',
     PORT_MOUSE_UP: 'port_mouse_up',
     PORT_MOVED: 'port_moved',
     PORT_SELECTED: 'port_selected',
+    COMMAND_RENDER_PORT: 'command_render_port',
     //COMMAND
     COMMAND_DELETE_SELECTED_PORT: 'command_delete_selected_port',
     COMMAND_DELETE_SELECTED_LINK: 'command_delete_selected_link',
@@ -1123,7 +1206,7 @@ var SelectionFrame = function (props) {
             if (Date.now() - lastMoveTime < (props.movingRate || 0)) {
                 return;
             }
-            console.info('Selection frame moved by: ', offsetX, offsetY);
+            // console.info('Selection frame moved by: ', offsetX, offsetY);
             if (props.onMove) {
                 props.onMove(offsetX, offsetY);
                 setLastMoveTime(Date.now());
@@ -1399,6 +1482,18 @@ var onElementSelected = function (callback) {
         off: off
     };
 };
+var emitCommandRenderElement = function (elementId) {
+    eventEmitter.emit(EVENT_NAME.COMMAND_RENDER_ELEMENT, elementId);
+};
+var onCommandRenderElement = function (callback) {
+    eventEmitter.on(EVENT_NAME.COMMAND_RENDER_ELEMENT, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.COMMAND_RENDER_ELEMENT, callback);
+    };
+    return {
+        off: off
+    };
+};
 var emitPortSelected = function (port, elementId) {
     eventEmitter.emit(EVENT_NAME.PORT_SELECTED, port, elementId);
 };
@@ -1411,6 +1506,18 @@ var onPortSelected = function (callback) {
         off: off
     };
 };
+var emitCommandRenderPort = function (portId, elementId) {
+    eventEmitter.emit(EVENT_NAME.COMMAND_RENDER_PORT, portId, elementId);
+};
+var onCommandRenderPort = function (callback) {
+    eventEmitter.on(EVENT_NAME.COMMAND_RENDER_PORT, callback);
+    var off = function () {
+        eventEmitter.off(EVENT_NAME.COMMAND_RENDER_PORT, callback);
+    };
+    return {
+        off: off
+    };
+};
 var emitTextSelected = function (text) {
     eventEmitter.emit(EVENT_NAME.TEXT_SELECTED, text);
 };
@@ -1441,6 +1548,8 @@ var paperEventEmitterContext = React$1.createContext({
     onElementResized: onElementResized,
     emitElementSelected: emitElementSelected,
     onElementSelected: onElementSelected,
+    emitCommandRenderElement: emitCommandRenderElement,
+    onCommandRenderElement: onCommandRenderElement,
     emitCommandDeleteSelectedPort: emitCommandDeleteSelectedPort,
     onCommandDeleteSelectedPort: onCommandDeleteSelectedPort,
     emitCommandDeleteSelectedElement: emitCommandDeleteSelectedElement,
@@ -1455,6 +1564,8 @@ var paperEventEmitterContext = React$1.createContext({
     onElementLinkEnded: onElementLinkEnded,
     emitTextSelected: emitTextSelected,
     onTextSelected: onTextSelected,
+    emitCommandRenderPort: emitCommandRenderPort,
+    onCommandRenderPort: onCommandRenderPort,
 });
 
 var Text = React$1.forwardRef(function (_a, ref) {
@@ -1587,17 +1698,29 @@ var Text = React$1.forwardRef(function (_a, ref) {
 var Text$1 = React$1.memo(Text);
 
 var Port1 = React$1.forwardRef(function (props, ref) {
-    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, container = props.container, label = props.label, onPortLabelMoved = props.onPortLabelMoved, onPortLabelResized = props.onPortLabelResized, onPortLabelContentChanged = props.onPortLabelContentChanged, onSelected = props.onSelected, onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, onMouseMove = props.onMouseMove, calculateRotationAngle = props.calculateRotationAngle, renderShape = props.renderShape;
+    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, container = props.container, label = props.label, onPortLabelMoved = props.onPortLabelMoved, onPortLabelResized = props.onPortLabelResized, onPortLabelContentChanged = props.onPortLabelContentChanged, onSelected = props.onSelected, onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, onMouseMove = props.onMouseMove, calculateRotationAngle = props.calculateRotationAngle, onManuallyTriggerRenderHandler = props.onManuallyTriggerRenderHandler, renderShape = props.renderShape;
+    var _a = React$1.useState(false); _a[0]; var setUpdated = _a[1];
     var textRef = React$1.useRef(null);
+    React$1.useEffect(function () {
+        var off = onManuallyTriggerRenderHandler === null || onManuallyTriggerRenderHandler === void 0 ? void 0 : onManuallyTriggerRenderHandler(function () {
+            setUpdated(function (prev) { return !prev; });
+        });
+        return function () {
+            off === null || off === void 0 ? void 0 : off();
+        };
+    }, []);
     var rotationAngle = React$1.useMemo(function () {
         if (!calculateRotationAngle)
             return 0;
         return calculateRotationAngle(x, y);
     }, [calculateRotationAngle, x, y]);
+    React$1.useEffect(function () {
+        console.info('Testing - rendering Port ' + id);
+    });
     var renderLabel = function (label) {
         var content = label.content, size = label.size;
         var position = label.position || PORT_LABEL_POSITION;
-        return React$1.createElement(Text$1, { id: label.id, ref: textRef, x: x + position.x, y: y + position.y, width: size.width, height: size.height, content: content, fontSize: label.fontSize, border: label.border, container: container, onMoved: onPortLabelMoved, onResized: onPortLabelResized, onContentChanged: onPortLabelContentChanged });
+        return React$1.createElement(Text$1, { id: label.id, ref: textRef, x: x + position.x, y: y + position.y, width: size.width, height: size.height, content: content, fontSize: label.fontSize, border: label.border, container: container, onMoved: function (x, y) { return onPortLabelMoved === null || onPortLabelMoved === void 0 ? void 0 : onPortLabelMoved(x, y, id); }, onResized: function (width, height) { return onPortLabelResized === null || onPortLabelResized === void 0 ? void 0 : onPortLabelResized(width, height, id); }, onContentChanged: function (ev, newValue) { return onPortLabelContentChanged === null || onPortLabelContentChanged === void 0 ? void 0 : onPortLabelContentChanged(ev, newValue, id); } });
     };
     var renderedShape = React$1.useMemo(function () {
         if (renderShape) {
@@ -1605,7 +1728,7 @@ var Port1 = React$1.forwardRef(function (props, ref) {
             return (React$1.createElement(RenderShape, __assign({ ref: ref }, props, { rotation: rotationAngle })));
         }
         else {
-            return React$1.createElement(Circle, { onMouseDown: function (e) { return onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(id, e); }, onMouseUp: function (e) { return onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(id, e); }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseMove: onMouseMove, onClick: function (e) { return onSelected === null || onSelected === void 0 ? void 0 : onSelected(id, e); }, ref: ref, x: x, y: y, positioningAnchor: exports.PositioningAnchor.Center, height: height, width: width, stroke: "black", fill: "black" });
+            return React$1.createElement(Circle, { onMouseDown: function (e) { return onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(id, e); }, onMouseUp: function (e) { return onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(id, e); }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseMove: function (e) { return onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(id, e); }, onClick: function (e) { return onSelected === null || onSelected === void 0 ? void 0 : onSelected(id, e); }, ref: ref, x: x, y: y, positioningAnchor: exports.PositioningAnchor.Center, height: height, width: width, stroke: "black", fill: "black" });
         }
     }, [props]);
     return (React$1.createElement(React$1.Fragment, null,
@@ -7798,7 +7921,7 @@ var Ruler = function (_a) {
 };
 
 var ElementWrapper = React$1.forwardRef(function (_a, ref) {
-    var x = _a.x, y = _a.y, children = _a.children; _a.portPlaceholders; _a.ports; var onClick = _a.onClick, onContextMenu = _a.onContextMenu, onMouseMove = _a.onMouseMove, onMouseLeave = _a.onMouseLeave, onMouseUp = _a.onMouseUp;
+    var x = _a.x, y = _a.y, cssClass = _a.cssClass, children = _a.children; _a.portPlaceholders; _a.ports; var onClick = _a.onClick, onContextMenu = _a.onContextMenu, onMouseMove = _a.onMouseMove, onMouseLeave = _a.onMouseLeave, onMouseUp = _a.onMouseUp;
     var handleMouseDown = function (ev) {
         ev.stopPropagation();
     };
@@ -7812,7 +7935,7 @@ var ElementWrapper = React$1.forwardRef(function (_a, ref) {
                 onContextMenu(ev);
         }
     };
-    return (React$1.createElement("svg", { x: x, y: y, onClick: handleClick, onContextMenu: handleClick, onMouseDown: handleMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
+    return (React$1.createElement("svg", { className: cssClass, x: x, y: y, onClick: handleClick, onContextMenu: handleClick, onMouseDown: handleMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
 });
 
 // Calculate the position of the 4 vertices of a rectangle relative to its parent svg
@@ -9082,34 +9205,62 @@ var Flexbox$1 = /*@__PURE__*/getDefaultExportFromCjs(bundleExports);
 
 var Element = function (props) {
     var _a, _b, _c;
-    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, textsPlaceHolderFlexStyle = props.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition = props.textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName = props.textsPlaceHolderClassName, texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, defaultPortSize = props.defaultPortSize, onClick = props.onClick, onContextMenu = props.onContextMenu, renderShape = props.renderShape; props.onMoved; var onPortMoved = props.onPortMoved; props.onResized; var onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp; props.onMouseMove; props.onMouseLeave; props.onMouseUp; var onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated;
+    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, cssClass = props.cssClass, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, onManuallyTriggerRenderHandler = props.onManuallyTriggerRenderHandler, textsPlaceHolderFlexStyle = props.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition = props.textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName = props.textsPlaceHolderClassName, texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, defaultPortSize = props.defaultPortSize, onClick = props.onClick, onContextMenu = props.onContextMenu, renderShape = props.renderShape; props.onMoved; var onPortMoved = props.onPortMoved; props.onResized; var onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp; props.onMouseMove; props.onMouseLeave; props.onMouseUp; var onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated;
     var _d = React$1.useState(), selectedPort = _d[0], setSelectedPort = _d[1];
     var _e = React$1.useState(), hoveredPort = _e[0], setHoveredPort = _e[1];
-    var _f = React$1.useState((_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
-        return __assign(__assign({}, p), { id: p.id, ref: React$1.createRef() });
-    })) !== null && _b !== void 0 ? _b : []), ports = _f[0], setPorts = _f[1];
+    var _f = React$1.useState((_a = props.ports) !== null && _a !== void 0 ? _a : []), ports = _f[0], setPorts = _f[1];
     var _g = React$1.useState(false), someElementLinkStarted = _g[0], setSomeElementLinkStarted = _g[1];
     var _h = React$1.useState(), potentialPortPosition = _h[0], setPotentialPortPosition = _h[1];
+    var _j = React$1.useState(false); _j[0]; var setUpdated = _j[1];
     var _paperEventEmitterContext = React$1.useContext(paperEventEmitterContext);
     var elementRef = React$1.useRef(null);
     var elementLinkStarted = React$1.useRef();
+    var portsRef = React$1.useRef(ports);
+    //Listen to manually trigger render event
+    React$1.useEffect(function () {
+        var off = onManuallyTriggerRenderHandler === null || onManuallyTriggerRenderHandler === void 0 ? void 0 : onManuallyTriggerRenderHandler(function () {
+            console.log('Manually trigger render element', id);
+            setUpdated(function (prev) { return !prev; });
+        });
+        return function () {
+            off === null || off === void 0 ? void 0 : off();
+        };
+    }, []);
+    //Update portsRef when ports changed
+    React$1.useEffect(function () {
+        portsRef.current = ports;
+    }, [ports]);
+    React$1.useEffect(function () {
+        var _a;
+        console.info('Rendering Element ' + id + ' with text ' + ((_a = texts === null || texts === void 0 ? void 0 : texts[0]) === null || _a === void 0 ? void 0 : _a.content));
+    });
     //Listen a new port is created, after add new port to ports state
     React$1.useEffect(function () {
+        console.info('Ports changed', props.ports);
         setPorts(function (prev) {
             var _a, _b;
             return (_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p, index) {
-                var _a, _b;
-                var position = p.position;
-                //Handle the case when the port is created.
-                if (!((_a = prev[index]) === null || _a === void 0 ? void 0 : _a.ref)) {
-                    position = normalizePortPosition(position);
-                    onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(p, id, p.position, position);
-                    _paperEventEmitterContext.emitPortMoved(p, id, p.position, position);
-                }
-                return __assign(__assign({}, p), { position: position, id: p.id, ref: ((_b = prev[index]) === null || _b === void 0 ? void 0 : _b.ref) || React$1.createRef() });
+                var prevPortState = prev.find(function (_p) { return _p.id === p.id; });
+                var newPortState;
+                //If port is existed, keep the ref of the port
+                if (prevPortState) {
+                    newPortState = prevPortState;
+                }
+                else {
+                    newPortState = p;
+                }
+                //Handle the case new port is created and the ref of the port is not defined
+                if (!newPortState.ref) {
+                    var newPosition = normalizePortPosition(newPortState.position);
+                    onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(p, id, newPortState.position, newPosition);
+                    _paperEventEmitterContext.emitPortMoved(p, id, newPortState.position, newPosition);
+                    newPortState.position = newPosition;
+                    newPortState.ref = React$1.createRef();
+                }
+                return newPortState;
             })) !== null && _b !== void 0 ? _b : [];
         });
-    }, [(_c = props.ports) === null || _c === void 0 ? void 0 : _c.length]);
+    }, [props.ports]);
     //Listen trigger of Delete key, handle delete port is selected
     React$1.useEffect(function () {
         var listener = _paperEventEmitterContext.onCommandDeleteSelectedPort(function () {
@@ -9129,7 +9280,7 @@ var Element = function (props) {
         });
         //listen element resize to update position of the ports by element size.
         var eleResizeListener = _paperEventEmitterContext.onElementResized(id, function () {
-            var newPorts = ports.map(function (port) {
+            var newPorts = portsRef.current.map(function (port) {
                 var newPosition = normalizePortPosition({ x: port.position.x, y: port.position.y });
                 //Check port moved
                 if (port.position.x !== newPosition.x || port.position.y !== newPosition.y) {
@@ -9144,7 +9295,7 @@ var Element = function (props) {
             eventListener.off();
             eleResizeListener.off();
         };
-    }, [ports, onPortMoved]);
+    }, [onPortMoved]);
     //Listen creating element link started, ended.
     React$1.useEffect(function () {
         var elementStartedListener = _paperEventEmitterContext.onElementLinkStarted(function (tempLink) {
@@ -9191,11 +9342,14 @@ var Element = function (props) {
             portSelectedListener.off();
         };
     }, []);
-    var handleSelectedPort = function (port, e) {
+    var handleSelectedPort = React$1.useCallback(function (portId, e) {
         e.stopPropagation();
+        var port = portsRef.current.find(function (p) { return p.id === portId; });
+        if (!port)
+            return;
         setSelectedPort(port);
         _paperEventEmitterContext.emitPortSelected(port, id);
-    };
+    }, [_paperEventEmitterContext]);
     //From one point find another point on the line segment so that the distance between the two points is the shortest.
     var findNearestPointOnSegment = function (position, linePoints) {
         var beginPosition = linePoints[0], endPosition = linePoints[1];
@@ -9313,67 +9467,72 @@ var Element = function (props) {
         if (newPosition) {
             selectedPort.position = newPosition;
             onPortMoved === null || onPortMoved === void 0 ? void 0 : onPortMoved(selectedPort, id, oldPosition, newPosition);
-            setPorts(__spreadArray([], ports, true));
+            setPorts(__spreadArray([], portsRef.current, true));
             _paperEventEmitterContext.emitPortMoved(selectedPort, id, oldPosition, newPosition);
         }
     };
     //Handle when mouse down on port
-    var handlePortMouseDown = function (portId, e) {
+    var handlePortMouseDown = React$1.useCallback(function (portId, e) {
         e.stopPropagation();
-        var port = ports.find(function (p) { return p.id === portId; });
+        var port = portsRef.current.find(function (p) { return p.id === portId; });
+        if (!port)
+            return;
         _paperEventEmitterContext.emitPortMouseDown(e, port, id);
         onPortMouseDown === null || onPortMouseDown === void 0 ? void 0 : onPortMouseDown(e, port, id);
-    };
+    }, [_paperEventEmitterContext]);
     //Handle when mouse up on port
-    var handlePortMouseUp = function (portId, e) {
+    var handlePortMouseUp = React$1.useCallback(function (portId, e) {
         e.stopPropagation();
-        var port = ports.find(function (p) { return p.id === portId; });
+        var port = portsRef.current.find(function (p) { return p.id === portId; });
+        if (!port)
+            return;
         _paperEventEmitterContext.emitPortMouseUp(e, port, id);
         onPortMouseUp === null || onPortMouseUp === void 0 ? void 0 : onPortMouseUp(e, port, id);
         //Remove port placeholder if mouse up on port
         if (potentialPortPosition) {
             setPotentialPortPosition(undefined);
         }
-    };
+    }, [_paperEventEmitterContext, potentialPortPosition]);
     //Update state when label of port is moved
-    var handlePortLabelMoved = function (offsetX, offsetY, port, index) {
-        if (!port.label)
-            return;
-        var labelPos = port.label.position || PORT_LABEL_POSITION;
+    var handlePortLabelMoved = React$1.useCallback(function (offsetX, offsetY, portId) {
         setPorts(function (prevPorts) {
-            var newPorts = __spreadArray([], prevPorts, true);
-            var newLabelPosition = {
-                x: labelPos.x + offsetX,
-                y: labelPos.y + offsetY
-            };
-            newPorts[index].label.position = newLabelPosition;
-            return newPorts;
+            return prevPorts.map(function (p) {
+                if (p.id === portId && p.label) {
+                    if (!p.label.position) {
+                        p.label.position = PORT_LABEL_POSITION;
+                    }
+                    p.label.position.x += offsetX;
+                    p.label.position.y += offsetY;
+                }
+                return p;
+            });
         });
-    };
+    }, []);
     //Update state when label of port is resized
-    var handlePortLabelResized = function (width, height, port, index) {
-        if (!port.label)
-            return;
+    var handlePortLabelResized = React$1.useCallback(function (width, height, portId) {
         setPorts(function (prevPorts) {
-            var newPorts = __spreadArray([], prevPorts, true);
-            var newLabelSize = {
-                width: width,
-                height: height
-            };
-            newPorts[index].label.size = newLabelSize;
-            return newPorts;
+            return prevPorts.map(function (p) {
+                if (p.id === portId && p.label) {
+                    p.label.size = {
+                        width: width,
+                        height: height
+                    };
+                }
+                return p;
+            });
         });
-    };
+    }, []);
     //Update state when label of port is changed content
-    var handlePortLabelContentChanged = function (newValue, port, index) {
-        if (!port.label)
-            return;
+    var handlePortLabelContentChanged = React$1.useCallback(function (ev, newValue, portId) {
         setPorts(function (prevPorts) {
-            var newPorts = __spreadArray([], prevPorts, true);
-            newPorts[index].label.content = newValue;
-            return newPorts;
+            return prevPorts.map(function (p) {
+                if (p.id === portId && p.label) {
+                    p.label.content = newValue;
+                }
+                return p;
+            });
         });
-    };
+    }, []);
     function handleElementMouseMove(ev) {
         //ev.stopPropagation(); //Can't use stopPropagation here, because do not create tempLink
         if (someElementLinkStarted && elementRef.current) {
@@ -9419,10 +9578,24 @@ var Element = function (props) {
         //If an element link is being created, trigger onMouseUpAtLinkedPortPlaceholder when the mouse up the element.
         if (potentialPortPosition && elementLinkStarted.current) {
             var newElementLink = __assign(__assign({}, elementLinkStarted.current), { tempTargetPosition: undefined });
-            onMouseUpAtLinkedPortPlaceholder === null || onMouseUpAtLinkedPortPlaceholder === void 0 ? void 0 : onMouseUpAtLinkedPortPlaceholder(newElementLink, potentialPortPosition);
+            onMouseUpAtLinkedPortPlaceholder === null || onMouseUpAtLinkedPortPlaceholder === void 0 ? void 0 : onMouseUpAtLinkedPortPlaceholder(newElementLink, potentialPortPosition, id);
             elementLinkStarted.current = undefined;
         }
     };
+    //Handle when mouse move on port
+    var handlePortMouseMove = React$1.useCallback(function (portId) {
+        if (someElementLinkStarted) {
+            var port = portsRef.current.find(function (p) { return p.id === portId; });
+            if (!port)
+                return;
+            setHoveredPort(port);
+        }
+    }, [someElementLinkStarted]);
+    //Handle when mouse leave on port
+    var handlePortMouseLeave = React$1.useCallback(function () {
+        if (someElementLinkStarted)
+            setHoveredPort(undefined);
+    }, [someElementLinkStarted]);
     //Get rotate angle of port by port direction is defined.
     var rotatePort = React$1.useCallback(function (x, y) {
         // console.info('calculating port rotation', x, y)
@@ -9468,7 +9641,7 @@ var Element = function (props) {
         if (renderShape)
             return renderShape(props);
         return null;
-    }, [props]);
+    }, [props, renderShape]);
     //Re-render port again after rendered to automation rotate port
     //Because elementRef.current equals null in first render so automation rotate port is incorrect.
     //TODO: check if this is still needed -> Still needed
@@ -9480,7 +9653,7 @@ var Element = function (props) {
     //use selection frame
     useSelectionFrame({
         container: container,
-        targetSVGElement: (selectedPort === null || selectedPort === void 0 ? void 0 : selectedPort.ref.current) || undefined,
+        targetSVGElement: ((_b = selectedPort === null || selectedPort === void 0 ? void 0 : selectedPort.ref) === null || _b === void 0 ? void 0 : _b.current) || undefined,
         resizability: {
             enabled: false,
             keepRatio: false
@@ -9492,40 +9665,34 @@ var Element = function (props) {
     });
     useSelectionFrame({
         container: container,
-        targetSVGElement: (hoveredPort === null || hoveredPort === void 0 ? void 0 : hoveredPort.ref.current) || undefined,
+        targetSVGElement: ((_c = hoveredPort === null || hoveredPort === void 0 ? void 0 : hoveredPort.ref) === null || _c === void 0 ? void 0 : _c.current) || undefined,
         resizability: {
             enabled: false,
             keepRatio: false
         },
     });
-    return (React$1.createElement(ElementWrapper, { ref: elementRef, x: x, y: y, onClick: function (e) { return onClick ? onClick(id, e, elementRef.current) : true; }, onMouseMove: handleElementMouseMove, onMouseLeave: handleElementMouseLeave, onMouseUp: handleElementMouseUp, onContextMenu: function (e) { return onContextMenu ? onContextMenu(id, e, elementRef.current) : true; } },
+    return (React$1.createElement(ElementWrapper, { ref: elementRef, x: x, y: y, cssClass: cssClass, onClick: function (e) { return onClick ? onClick(id, e, elementRef.current) : true; }, onMouseMove: handleElementMouseMove, onMouseLeave: handleElementMouseLeave, onMouseUp: handleElementMouseUp, onContextMenu: function (e) { return onContextMenu ? onContextMenu(id, e, elementRef.current) : true; } },
         renderedShape,
         potentialPortPosition && (portPlaceholderShape
             ? React$1.createElement("svg", { x: potentialPortPosition.x, y: potentialPortPosition.y }, portPlaceholderShape)
             : React$1.createElement("rect", { x: potentialPortPosition.x - PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH / 2, y: potentialPortPosition.y - PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH / 2, width: PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH, height: PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH, rx: PORT_PLACEHOLDER_DEFAULT_SIZE, ry: PORT_PLACEHOLDER_DEFAULT_SIZE, stroke: PORT_PLACEHOLDER_DEFAULT_STROKE, fill: "none", strokeWidth: 3 })), ports === null || ports === void 0 ? void 0 :
         ports.map(function (p, index) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g;
             return React$1.createElement(Port, { key: p.id, ref: p.ref, id: p.id, x: p.position.x, y: p.position.y, width: (_c = (_b = (_a = p.size) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : defaultPortSize) !== null && _c !== void 0 ? _c : PORT_DEFAULT_SIZE, height: (_f = (_e = (_d = p.size) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : defaultPortSize) !== null && _f !== void 0 ? _f : PORT_DEFAULT_SIZE, container: container, 
                 // rotation={rotatePort(p)}
-                calculateRotationAngle: rotatePort, label: p.label, onPortLabelMoved: function (x, y) { return handlePortLabelMoved(x, y, p, index); }, onPortLabelResized: function (w, h) { return handlePortLabelResized(w, h, p, index); }, onPortLabelContentChanged: function (ev, newValue) { return handlePortLabelContentChanged(newValue, p, index); }, onSelected: function (portId, event) { return handleSelectedPort(p, event); }, onMouseDown: handlePortMouseDown, onMouseUp: handlePortMouseUp, onMouseMove: function () {
-                    if (someElementLinkStarted)
-                        setHoveredPort(p);
-                }, 
+                calculateRotationAngle: rotatePort, label: p.label, onPortLabelMoved: handlePortLabelMoved, onPortLabelResized: handlePortLabelResized, onPortLabelContentChanged: handlePortLabelContentChanged, onSelected: handleSelectedPort, onMouseDown: handlePortMouseDown, onMouseUp: handlePortMouseUp, onMouseMove: handlePortMouseMove, 
                 // onMouseEnter={() => {
                 //     if (someElementLinkStarted) setHoveredPort(p)
                 // }}
-                onMouseLeave: function () {
-                    console.log('onMouseLeave');
-                    if (someElementLinkStarted)
-                        setHoveredPort(undefined);
-                }, renderShape: p.renderShape });
+                onMouseLeave: handlePortMouseLeave, onManuallyTriggerRenderHandler: (_g = p.manuallyTriggerRenderHandler) === null || _g === void 0 ? void 0 : _g.bind(p), renderShape: p.renderShape });
         }),
         React$1.createElement(Flexbox$1, { className: textsPlaceHolderClassName, style: textsPlaceHolderFlexStyle, x: textsPlaceHolderFlexboxPosition === null || textsPlaceHolderFlexboxPosition === void 0 ? void 0 : textsPlaceHolderFlexboxPosition.x, y: textsPlaceHolderFlexboxPosition === null || textsPlaceHolderFlexboxPosition === void 0 ? void 0 : textsPlaceHolderFlexboxPosition.y }, texts === null || texts === void 0 ? void 0 : texts.map(function (t, index) {
             var _a, _b;
-            return React$1.createElement(Text$1, { id: t.id, key: index, content: t.content, x: (_a = t.position) === null || _a === void 0 ? void 0 : _a.x, y: (_b = t.position) === null || _b === void 0 ? void 0 : _b.y, width: t.size.width, height: t.size.height, align: t.align, fontSize: t.fontSize, border: t.border, container: container, style: t.style, onContentChanged: function (ev, newContent) { return onTextUpdated === null || onTextUpdated === void 0 ? void 0 : onTextUpdated(t.id, newContent); } });
+            return React$1.createElement(Text$1, { id: t.id, key: index, content: t.content, x: (_a = t.position) === null || _a === void 0 ? void 0 : _a.x, y: (_b = t.position) === null || _b === void 0 ? void 0 : _b.y, width: t.size.width, height: t.size.height, align: t.align, fontSize: t.fontSize, border: t.border, container: container, style: t.style, onContentChanged: function (ev, newContent) { return onTextUpdated === null || onTextUpdated === void 0 ? void 0 : onTextUpdated(id, t.id, newContent); } });
         })),
         children));
-};
+};
+var Element$1 = React$1.memo(Element);
 
 var createRect = function (x, y, width, height, strokeWidth, transformOrigin, transform) {
     var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
@@ -9761,13 +9928,23 @@ var Paper = function (props) {
     var _d = React$1.useState(), selectedElement = _d[0], setSelectedElement = _d[1];
     var _e = React$1.useState((_a = props.links) !== null && _a !== void 0 ? _a : []), links = _e[0], setLinks = _e[1];
     var _f = React$1.useState(), selectedLink = _f[0], setSelectedLink = _f[1];
-    var _g = React$1.useState(), tempLink = _g[0], setTempLink = _g[1];
+    var _g = React$1.useState(null), tempLink = _g[0], setTempLink = _g[1];
     var _h = React$1.useState(props.texts), texts = _h[0], setTexts = _h[1];
     var _j = React$1.useState(), selectedText = _j[0], setSelectedText = _j[1];
     var _k = React$1.useState(null), selectedElementSVG = _k[0], setSelectedElementSVG = _k[1];
     var _l = React$1.useState(false), mouseDownedOnPaper = _l[0], setMouseDownedOnPaper = _l[1];
     var paperEventEmitter = React$1.useContext(paperEventEmitterContext);
     var paperContainerRef = React$1.useRef(null);
+    var tempLinkRef = React$1.useRef(tempLink); //Cache tempLink to avoid re-render when tempLink changed
+    var elementsRef = React$1.useRef(elements); //Cache elements to avoid re-render when elements changed
+    var size = props.size;
+    React$1.useEffect(function () {
+        console.log('Render Paper');
+    });
+    //Cache elements to avoid re-render when elements changed
+    React$1.useEffect(function () {
+        elementsRef.current = elements;
+    }, [elements]);
     useKeyboardCommands({
         element: paperContainerRef.current
     });
@@ -9775,6 +9952,10 @@ var Paper = function (props) {
         var parsedElementsInTree = convertElementsToTree(elements);
         setElementsInTree(parsedElementsInTree);
     };
+    //Cache tempLink to avoid re-render when tempLink changed
+    React$1.useEffect(function () {
+        tempLinkRef.current = tempLink;
+    }, [tempLink]);
     //Listen text is selected
     React$1.useEffect(function () {
         var textSelectedListener = paperEventEmitter.onTextSelected(function (text) {
@@ -9797,7 +9978,7 @@ var Paper = function (props) {
             setSelectedElementSVG(null);
             setSelectedLink(undefined);
             //broadcast selected port to parent component
-            var element = elements.find(function (e) { return e.id === elementId; });
+            var element = elementsRef.current.find(function (e) { return e.id === elementId; });
             if (element) {
                 (_a = props.onPortSelected) === null || _a === void 0 ? void 0 : _a.call(props, port, element);
             }
@@ -9808,16 +9989,17 @@ var Paper = function (props) {
     }, []);
     React$1.useEffect(function () {
         //Listen parent of elements changed, then update elements tree
-        var parentChangedCancelers = elements.map(function (element) {
+        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) {
                 updateElementsTree();
             });
         });
         //Listen a new port added, then re-render the element component
-        var addedPortCancelers = elements.map(function (element) {
+        var addedPortCancelers = elementsRef.current.map(function (element) {
             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) {
                     if (ele.id === element.id) {
@@ -9831,11 +10013,11 @@ var Paper = function (props) {
             parentChangedCancelers.forEach(function (canceller) { return canceller === null || canceller === void 0 ? void 0 : canceller(); });
             addedPortCancelers.forEach(function (canceller) { return canceller(); });
         };
-    }, elements);
+    }, []);
     //Update elements tree when length of elements change
     React$1.useEffect(function () {
         updateElementsTree();
-    }, [elements.length]);
+    }, [elements]);
     //Get all child elements of the deleted element
     var getDeletedChildElements = function (deletedElement) {
         if (!deletedElement.childrenElements)
@@ -9901,9 +10083,9 @@ var Paper = function (props) {
             listener.off();
         };
     }, [selectedText]);
-    var size = props.size;
     //Automatically add points on the link so that the link does not cross elements, default maximum 10 points
-    var automationAddPointsToLink = function (eleLink, limitPoint) {
+    var automationAddPointsToLink = React$1.useCallback(function (eleLink, limitPoint) {
+        if (limitPoint === void 0) { limitPoint = 10; }
         var sourceElement = eleLink.sourceElement, sourcePort = eleLink.sourcePort, targetElement = eleLink.targetElement, targetPort = eleLink.targetPort;
         var sourcePosition = {
             x: sourceElement.position.x + sourcePort.position.x,
@@ -9931,10 +10113,12 @@ var Paper = function (props) {
             var appendedPoints = generatePositions(replacementPosition, targetPosition, elements);
             return __spreadArray(__spreadArray(__spreadArray([], prependedPoints, true), [replacementPosition], false), appendedPoints, true);
         }
+        var elements = elementsRef.current;
         var points = generatePositions(sourcePosition, targetPosition, elements);
         return __assign(__assign({}, eleLink), { points: points });
-    };
+    }, []);
     var handlePaperMouseMove = function (ev) {
+        var _a;
         //if there is a temp link, update the temp target point
         if (tempLink) {
             var currentTarget = ev.currentTarget;
@@ -9953,24 +10137,35 @@ var Paper = function (props) {
             };
             setTempLink(function (prev) { return (__assign(__assign({}, prev), { tempTargetPosition: tempTargetPosition_1 })); });
         }
+        //broadcast mouse moved position to parent component
+        (_a = props.onPaperMouseMoved) === null || _a === void 0 ? void 0 : _a.call(props, {
+            x: ev.clientX,
+            y: ev.clientY
+        });
     };
     var handleMouseDownOnPaper = function (ev) {
-        var _a;
+        var _a, _b;
         setMouseDownedOnPaper(true);
         (_a = props.onPaperClicked) === null || _a === void 0 ? void 0 : _a.call(props, {
             x: ev.clientX,
             y: ev.clientY
         });
         paperEventEmitter.emitPaperClicked(ev);
+        //broadcast mouse moved position to parent component
+        (_b = props.onPaperMouseDown) === null || _b === void 0 ? void 0 : _b.call(props, {
+            x: ev.clientX,
+            y: ev.clientY
+        });
     };
     var handleMouseUpOnPaper = function (ev) {
+        var _a;
         if (mouseDownedOnPaper) {
             setSelectedElement(undefined);
             setSelectedElementSVG(null);
         }
         //clear temp link if exists
         if (tempLink) {
-            setTempLink(undefined);
+            setTempLink(null);
             paperEventEmitter.emitElementLinkEnded();
         }
         //Clear selected text
@@ -9978,6 +10173,11 @@ var Paper = function (props) {
             setSelectedText(undefined);
         }
         setMouseDownedOnPaper(false);
+        //broadcast mouse moved position to parent component
+        (_a = props.onPaperMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, {
+            x: ev.clientX,
+            y: ev.clientY
+        });
     };
     var handlePathChange = React$1.useCallback(function (path, id) {
         //Update path of element link, that changed
@@ -9987,42 +10187,44 @@ var Paper = function (props) {
             return __spreadArray([], prevLinks, true);
         });
     }, []);
-    var handlePortMoved = function (port, elementId, oldPosition, newPosition) {
-        var element = elements.find(function (e) { return e.id === elementId; });
-        if (props.onPortMoved) {
-            props.onPortMoved(newPosition, port, element);
-        }
-        //set links equals a clone links to re-render links with new position
-        setLinks(function (prev) { return prev.map(function (link) {
-            var _a, _b;
-            if (link.sourceElement.id === elementId && link.sourcePort.id === port.id) {
-                link.sourcePort.position = newPosition;
-            }
-            if (((_a = link.targetElement) === null || _a === void 0 ? void 0 : _a.id) === elementId && ((_b = link.targetPort) === null || _b === void 0 ? void 0 : _b.id) === port.id) {
-                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;
+    var handlePortMoved = React$1.useCallback(function (port, elementId, oldPosition, newPosition) {
+        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 _a, _b;
+                if (link.sourceElement.id === elementId && link.sourcePort.id === port.id) {
+                    link.sourcePort.position = newPosition;
                 }
-                return p;
+                if (((_a = link.targetElement) === null || _a === void 0 ? void 0 : _a.id) === elementId && ((_b = link.targetPort) === null || _b === void 0 ? void 0 : _b.id) === port.id) {
+                    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;
             });
-            return prevElements;
-        });
-    };
+            if (props.onPortMoved) {
+                props.onPortMoved(newPosition, port, element);
+            }
+        }
+    }, [props.onPortMoved]);
     //Handle creating a new element link
-    var handlePortMouseDown = function (ev, port, elementId) {
+    var handlePortMouseDown = React$1.useCallback(function (ev, port, elementId) {
         ev.stopPropagation();
         //Return if creating a new element link
-        if (tempLink)
+        if (tempLinkRef.current)
             return;
-        var sourceElement = elements.find(function (e) { return e.id === elementId; });
+        var sourceElement = elementsRef.current.find(function (e) { return e.id === elementId; });
         //handle create temp element link;
         var newLink = {
             id: generateUniqueId(),
@@ -10032,8 +10234,8 @@ var Paper = function (props) {
         };
         setTempLink(newLink);
         paperEventEmitter.emitElementLinkStarted(newLink);
-    };
-    var createElementLink = function (sourcePort, sourceElement, targetPort, targetElement) {
+    }, [paperEventEmitter]);
+    var createElementLink = React$1.useCallback(function (sourcePort, sourceElement, targetPort, targetElement) {
         //if no onCreatingLink prop, no link will be created
         if (!props.onCreatingLink) {
             return null;
@@ -10046,17 +10248,17 @@ var Paper = function (props) {
             newElementLink = automationAddPointsToLink(newElementLink, MAX_LINK_KNOT_COUNT);
         }
         return newElementLink;
-    };
-    var handlePortMouseUp = function (ev, port, elementId) {
+    }, [props.onCreatingLink, automationAddPointsToLink]);
+    var handlePortMouseUp = React$1.useCallback(function (ev, port, elementId) {
         ev.stopPropagation();
         //Create new element link, if has tempLink
-        if (tempLink) {
+        if (tempLinkRef.current) {
             //Check if mouse up point is mouse down point or not
-            var isMouseUpOnNotSelf = tempLink.sourcePort.id !== port.id || tempLink.sourceElement.id !== elementId;
+            var isMouseUpOnNotSelf = tempLinkRef.current.sourcePort.id !== port.id || tempLinkRef.current.sourceElement.id !== elementId;
             var newElementLink_1 = null;
             if (isMouseUpOnNotSelf) {
-                var sourcePort = tempLink.sourcePort, sourceElement = tempLink.sourceElement;
-                var targetElement = elements.find(function (e) { return e.id === elementId; });
+                var _a = tempLinkRef.current, sourcePort = _a.sourcePort, sourceElement = _a.sourceElement;
+                var targetElement = elementsRef.current.find(function (e) { return e.id === elementId; });
                 newElementLink_1 = createElementLink(sourcePort, sourceElement, port, targetElement);
             }
             if (newElementLink_1) {
@@ -10066,9 +10268,9 @@ var Paper = function (props) {
             else {
                 paperEventEmitter.emitElementLinkEnded();
             }
-            setTempLink(undefined);
+            setTempLink(null);
         }
-    };
+    }, [paperEventEmitter, createElementLink]);
     var handleLinkLabelMoved = React$1.useCallback(function (offsetX, offsetY, index, labelType) {
         setLinks(function (prevLinks) {
             var newLinks = __spreadArray([], prevLinks, true);
@@ -10254,8 +10456,11 @@ var Paper = function (props) {
             });
         };
     }, []);
-    var handleMouseUpAtLinkedPortPlaceholder = function (link, position, targetElement) {
-        console.log("A port could have been created at position ".concat(JSON.stringify(position), " on element ").concat(targetElement.id));
+    var handleMouseUpAtLinkedPortPlaceholder = React$1.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));
         if (props.onCreatingPortByLinking) {
             var sourcePort = link.sourcePort, sourceElement = link.sourceElement;
             //Handle create port via onCreatingPortByLinking prop
@@ -10269,20 +10474,20 @@ var Paper = function (props) {
                 if (newElementLink_2) {
                     setLinks(function (prev) { return __spreadArray(__spreadArray([], prev, true), [newElementLink_2], false); });
                     paperEventEmitter.emitElementLinkEnded(newElementLink_2);
-                    setTempLink(undefined);
+                    setTempLink(null);
                     return;
                 }
             }
         }
         //Clear tempLink
-        setTempLink(undefined);
+        setTempLink(null);
         paperEventEmitter.emitElementLinkEnded();
-    };
-    var handleElementTextChange = function (element, textId, newContent) {
+    }, [props.onCreatingPortByLinking, createElementLink, paperEventEmitter]);
+    var handleElementTextChange = React$1.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 === element.id && curEle.texts) {
+                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;
@@ -10291,41 +10496,53 @@ var Paper = function (props) {
                 return curEle;
             });
         });
-    };
-    var handleElementClicked = function (id, e, ref, element) {
+    }, []);
+    var handleElementClicked = React$1.useCallback(function (elementId, e, ref) {
         e.stopPropagation();
+        var tempLink = tempLinkRef.current;
         if (tempLink) {
             //Clear tempLink
-            setTempLink(undefined);
+            setTempLink(null);
             paperEventEmitter.emitElementLinkEnded();
         }
         else {
+            var element = elementsRef.current.find(function (e) { return e.id === elementId; });
             setSelectedElementSVG(ref);
-            setSelectedElement(element);
-            paperEventEmitter.emitElementSelected(element);
+            if (element) {
+                setSelectedElement(element);
+                paperEventEmitter.emitElementSelected(element);
+            }
         }
         setMouseDownedOnPaper(false);
-    };
-    var renderElementInTree = function (element) {
-        var _a, _b;
+    }, [paperEventEmitter]);
+    var handleContextMenu = React$1.useCallback(function (elementId, e, ref) {
+        var _a;
+        e.preventDefault();
+        var element = elementsRef.current.find(function (e) { return e.id === elementId; });
+        if (element) {
+            handleElementClicked(elementId, e, ref);
+            (_a = props.onElementContextMenu) === null || _a === void 0 ? void 0 : _a.call(props, element, e);
+        }
+    }, [props.onElementContextMenu, handleElementClicked]);
+    var renderElementInTree = React$1.useCallback(function (element) {
+        var _a, _b, _c;
         //use the defined react element or the default Element component
-        var ReactElement = element.reactElement || Element;
-        return (React$1.createElement("g", { key: element.id }, React$1.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: function (id, e, ref) {
-                handleElementClicked(id, e, ref, element);
-            }, onContextMenu: function (id, e, ref) {
-                var _a;
-                handleElementClicked(id, e, ref, element);
-                (_a = props.onElementContextMenu) === null || _a === void 0 ? void 0 : _a.call(props, element, e);
-            }, 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: function (elementLink, position) { return handleMouseUpAtLinkedPortPlaceholder(elementLink, position, element); }, onTextUpdated: function (textId, newContent) { return handleElementTextChange(element, textId, newContent); }, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition }, element.childrenElements && element.childrenElements.map(renderElementInTree))));
-    };
+        var ReactElement = element.reactElement || Element$1;
+        console.log("Render element ".concat(element.id));
+        return (React$1.createElement("g", { key: element.id },
+            React$1.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, 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, onManuallyTriggerRenderHandler: (_c = element.manuallyTriggerRenderHandler) === null || _c === void 0 ? void 0 : _c.bind(element), textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition }, element.childrenElements && element.childrenElements.map(renderElementInTree))));
+    }, [handleElementClicked, handleContextMenu, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange]);
+    var ElementsInTree = React$1.useMemo(function () {
+        return elementsInTree.map(function (element, index) {
+            return renderElementInTree(element);
+        });
+    }, [elementsInTree, renderElementInTree]);
     return (React$1.createElement("div", { style: { position: "relative" } },
         React$1.createElement(Ruler, { squareSize: 100, border: '1px dashed grey' }),
         React$1.createElement("svg", { tabIndex: 0, width: size.width, height: size.height, ref: paperContainerRef, id: "paper-container", onMouseMove: handlePaperMouseMove, onMouseDown: handleMouseDownOnPaper, onMouseUp: handleMouseUpOnPaper },
-            paperContainerRef.current ? elementsInTree.map(function (element, index) {
-                return renderElementInTree(element);
-            }) : "",
+            paperContainerRef.current ? ElementsInTree : "",
             links && links.map(function (link, index) {
                 var _a, _b, _c, _d;
                 return (React$1.createElement(ElementLink, { key: link.id, id: link.id, path: link.path, sourcePosition: {
@@ -10345,10 +10562,17 @@ var Paper = function (props) {
                 } })); })),
         React$1.createElement(BBoxDebugger, { elementSVG: selectedElementSVG }),
         React$1.createElement(LinkDebugger, { links: links, svgContainer: paperContainerRef.current })));
-};
+};
+var Paper$1 = React$1.memo(Paper);
 
 function Editor(_a) {
-    var editorContext = _a.editorContext;
+    var editorContext = _a.editorContext, width = _a.width, height = _a.height;
+    if (!width) {
+        width = 3000;
+    }
+    if (!height) {
+        height = 3000;
+    }
     var handlePaperClicked = React$1.useCallback(function (position) {
         editorContext.onPaperClickedHandler(position);
     }, [editorContext]);
@@ -10376,15 +10600,37 @@ function Editor(_a) {
     var handleTextSelected = React$1.useCallback(function (text) {
         editorContext.onTextSelectedHandler(text);
     }, [editorContext]);
-    return (React$1.createElement(React$1.Fragment, null,
-        React$1.createElement(Paper, { size: { width: 3000, height: 3000 }, elements: editorContext.elements, links: editorContext.links, texts: editorContext.texts, onPaperClicked: handlePaperClicked, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onCreatingLink: editorContext.onCreatingLinkHandler, onCreatingPortByLinking: editorContext.onCreatingPortByLinkingHandler, onLinkSelected: handleLinkSelected, onTextSelected: handleTextSelected })));
+    var handleOnCreatingLink = React$1.useCallback(function (sourcePort, sourceElement, targetPort, targetElement) {
+        if (editorContext.onCreatingLinkHandler) {
+            return editorContext.onCreatingLinkHandler(sourcePort, sourceElement, targetPort, targetElement);
+        }
+        return null;
+    }, [editorContext]);
+    var handleOnCreatingPortByLinking = React$1.useCallback(function (sourceElement, sourcePort, targetElement, position) {
+        if (editorContext.onCreatingPortByLinkingHandler) {
+            return editorContext.onCreatingPortByLinkingHandler(sourceElement, sourcePort, targetElement, position);
+        }
+        return null;
+    }, [editorContext]);
+    var handlePaperMouseMoved = React$1.useCallback(function (position) {
+        editorContext.onPaperMouseMovedHandler(position);
+    }, [editorContext]);
+    var handlePaperMouseDown = React$1.useCallback(function (position) {
+        editorContext.onPaperMouseDownHandler(position);
+    }, [editorContext]);
+    var handlePaperMouseUp = React$1.useCallback(function (position) {
+        editorContext.onPaperMouseUpHandler(position);
+    }, [editorContext]);
+    if (editorContext)
+        return (React$1.createElement(Paper$1, { size: { width: width, height: height }, elements: editorContext.elements, links: editorContext.links, texts: editorContext.texts, onPaperClicked: handlePaperClicked, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onTextSelected: handleTextSelected, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseDown, onPaperMouseDown: handlePaperMouseUp }));
+    return null;
 }
 
 exports.CircleRC = Circle;
 exports.CrescentRC = Crescent;
 exports.CustomShapeRC = CustomShape;
 exports.EditorContext = EditorContext;
-exports.Element = Element$1;
+exports.Element = Element$2;
 exports.ElementLink = ElementLink$1;
 exports.ElementLinkRC = ElementLink;
 exports.Port = Port$1;