orcasvn-react-diagrams 0.1.26 → 0.1.29

package/dist/cjs/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React$1 = require('react');
+var React = require('react');
 var require$$0 = require('react-dom');
 
 exports.PositioningAnchor = void 0;
@@ -36,8 +36,6 @@ exports.TextAlign = void 0;
     TextAlign[TextAlign["center"] = 2] = "center";
 })(exports.TextAlign || (exports.TextAlign = {}));
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -442,7 +440,6 @@ function generateUniqueId() {
     return v4();
 }
 
-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 = []; }
@@ -467,27 +464,26 @@ var Element$2 = /** @class */ (function () {
         this.textsPlaceHolderFlexStyle = textsPlaceHolderFlexStyle;
         this.textsPlaceHolderFlexboxPosition = textsPlaceHolderFlexboxPosition;
     }
-    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", {
+        // public manuallyTriggerRender() {
+        //     //TODO: Implement this
+        //     this._eventEmitter.emit(MANUALLY_TRIGGER_RENDER);
+        // }
+        // public manuallyTriggerRenderHandler(callback: () => void) {
+        //     //TODO: Implement this
+        //     this._eventEmitter.on(MANUALLY_TRIGGER_RENDER, callback);
+        //     const canceller = () => {
+        //         this._eventEmitter.off(MANUALLY_TRIGGER_RENDER, callback);
+        //     }
+        //     return canceller;
+        // }
+        // public manuallyTriggerRenderPort(portId: string) {
+        //     //TODO: Implement this
+        //     const port = this.getPort(portId);
+        //     if (port) {
+        //         port.manuallyTriggerRender();
+        //     }
+        // }
         get: function () {
             return this._id;
         },
@@ -624,7 +620,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var ShapeWrapper = React$1.forwardRef(function (shapeProps, ref) {
+var ShapeWrapper = React.forwardRef(function (shapeProps, ref) {
     //if direction is provided, rotation is based on direction
     var rotation = shapeProps.rotation || 0;
     if (shapeProps.direction) {
@@ -654,7 +650,7 @@ var ShapeWrapper = React$1.forwardRef(function (shapeProps, ref) {
         position.x = position.x - shapeProps.width / 2;
         position.y = position.y - shapeProps.height / 2;
     }
-    var objectOfAllEventAttributes = React$1.useMemo(function () {
+    var objectOfAllEventAttributes = React.useMemo(function () {
         var arrayOfAllEventAttributes = Object.entries(shapeProps).filter(function (_a) {
             var k = _a[0]; _a[1];
             return k.startsWith('on');
@@ -664,15 +660,14 @@ var ShapeWrapper = React$1.forwardRef(function (shapeProps, ref) {
     var viewboxWidth = shapeProps.width > shapeProps.height ? 100 : shapeProps.width / shapeProps.height * 100;
     var viewBoxHeight = shapeProps.height > shapeProps.width ? 100 : shapeProps.height / shapeProps.width * 100;
     var viewBox = shapeProps.viewBox || "0 0 ".concat(viewboxWidth, " ").concat(viewBoxHeight);
-    return (React$1.createElement("g", { transform: "rotate(".concat(rotation, ")"), style: { transformOrigin: transformOrigin, transformBox: "content-box" } },
-        React$1.createElement("svg", __assign({ ref: ref, style: { overflow: "visible" }, x: position.x, y: position.y, width: shapeProps.width, height: shapeProps.height, className: shapeProps.cssClass, viewBox: viewBox }, objectOfAllEventAttributes), shapeProps.children)));
+    return (React.createElement("g", { transform: "rotate(".concat(rotation, ")"), style: { transformOrigin: transformOrigin, transformBox: "content-box" } },
+        React.createElement("svg", __assign({ ref: ref, style: { overflow: "visible" }, x: position.x, y: position.y, width: shapeProps.width, height: shapeProps.height, className: shapeProps.cssClass, viewBox: viewBox }, objectOfAllEventAttributes), shapeProps.children)));
 });
 
-var CustomShape = React$1.forwardRef(function (props, ref) {
-    return (React$1.createElement(ShapeWrapper, __assign({}, props, { ref: ref }), props.children));
+var CustomShape = React.forwardRef(function (props, ref) {
+    return (React.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;
@@ -691,8 +686,8 @@ var Port$1 = /** @class */ (function () {
             this.renderShape = shapeRenderer.shape;
         }
         else if (shapeRenderer && shapeRenderer.customShapeWithJSX) {
-            this.renderShape = React$1.forwardRef(function (props, ref) {
-                return (React$1.createElement(CustomShape, { ref: ref, x: props.x, y: props.y, width: props.width, height: props.height, rotation: props.rotation, positioningAnchor: shapeRenderer.positioningAnchor, onClick: function (e) { var _a; return (_a = props.onSelected) === null || _a === void 0 ? void 0 : _a.call(props, _this.id, e); }, onMouseDown: function (e) { var _a; return (_a = props.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, _this.id, e); }, onMouseUp: function (e) { var _a; return (_a = props.onMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, _this.id, e); } }, shapeRenderer.customShapeWithJSX));
+            this.renderShape = React.forwardRef(function (props, ref) {
+                return (React.createElement(CustomShape, { ref: ref, x: props.x, y: props.y, width: props.width, height: props.height, rotation: props.rotation, positioningAnchor: shapeRenderer.positioningAnchor, onClick: function (e) { var _a; return (_a = props.onSelected) === null || _a === void 0 ? void 0 : _a.call(props, _this.id, e); }, onMouseDown: function (e) { var _a; return (_a = props.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, _this.id, e); }, onMouseUp: function (e) { var _a; return (_a = props.onMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, _this.id, e); } }, shapeRenderer.customShapeWithJSX));
             });
         }
     }
@@ -703,18 +698,6 @@ 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;
 }());
 
@@ -757,7 +740,7 @@ var ElementLink$1 = /** @class */ (function () {
 }());
 
 var Text$2 = /** @class */ (function () {
-    function Text(content, width, height, x, y, align, fontSize, border, style) {
+    function Text(content, width, height, editable, x, y, align, fontSize, border, style) {
         this._id = generateUniqueId();
         this.content = content;
         this.align = align;
@@ -765,6 +748,7 @@ var Text$2 = /** @class */ (function () {
         this.border = border;
         this.size = { width: width, height: height };
         this.style = style;
+        this.editable = editable;
         if (x && y) {
             this.position = { x: x, y: y };
         }
@@ -779,20 +763,37 @@ var Text$2 = /** @class */ (function () {
     return Text;
 }());
 
+var EVENT_MANUALLY_RENDER_ELEMENT = 'manuallyRenderElement';
+var EVENT_MANUALLY_RENDER_PORT = 'manuallyRenderPort';
+var EVENT_EDITOR_CONTEXT_UPDATED = 'editorContextUpdated';
 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_MOUSE_DOWN = 'portMouseDown';
+var EVENT_PORT_MOUSE_UP = 'portMouseUp';
 var EVENT_PORT_MOVED = 'portMoved';
 var EVENT_PORT_SELECTED = 'portSelected';
 var EVENT_ELEMENT_CONTEXT_MENU = 'elementContextMenu';
 var EVENT_ELEMENT_MOVED = 'elementMoved';
 var EVENT_ELEMENT_RESIZED = 'elementResized';
 var EVENT_ELEMENT_SELECTED = 'elementSelected';
+var EVENT_ELEMENT_MOUSE_MOVE = 'elementMouseMove';
+var EVENT_ELEMENT_MOUSE_LEAVE = 'elementMouseLeave';
+var EVENT_ELEMENT_MOUSE_UP = 'elementMouseUp';
 var EVENT_LINK_SELECTED = 'linkSelected';
 var EVENT_TEXT_SELECTED = 'textSelected';
 var EditorContext = /** @class */ (function () {
     function EditorContext(elements, links, texts) {
+        var _this = this;
+        /** @internal */
+        this.onEditorContextUpdated = function (callback) {
+            _this._eventEmitter.on(EVENT_EDITOR_CONTEXT_UPDATED, callback);
+            var off = function () {
+                _this._eventEmitter.off(EVENT_EDITOR_CONTEXT_UPDATED, callback);
+            };
+            return off;
+        };
         this._elements = elements;
         this._links = links;
         this._texts = texts;
@@ -832,27 +833,33 @@ var EditorContext = /** @class */ (function () {
     };
     EditorContext.prototype.addElement = function (element) {
         this._elements = __spreadArray(__spreadArray([], this._elements, true), [element], false);
+        this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
     };
     EditorContext.prototype.removeElement = function (elementId) {
         this._elements = this._elements.filter(function (e) { return e.id !== elementId; });
+        this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
     };
     EditorContext.prototype.getLink = function (linkId) {
         return this._links.find(function (l) { return l.id === linkId; });
     };
     EditorContext.prototype.addLink = function (link) {
         this._links = __spreadArray(__spreadArray([], this._links, true), [link], false);
+        this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
     };
     EditorContext.prototype.removeLink = function (linkId) {
         this._links = this._links.filter(function (l) { return l.id !== linkId; });
+        this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
     };
     EditorContext.prototype.getText = function (textId) {
         return this._texts.find(function (t) { return t.id === textId; });
     };
     EditorContext.prototype.addText = function (text) {
         this._texts = __spreadArray(__spreadArray([], this._texts, true), [text], false);
+        this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
     };
     EditorContext.prototype.removeText = function (textId) {
         this._texts = this._texts.filter(function (t) { return t.id !== textId; });
+        this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
     };
     EditorContext.prototype.onPaperClicked = function (callback) {
         return this.addEventListener(EVENT_PAPER_CLICKED, callback);
@@ -882,6 +889,20 @@ var EditorContext = /** @class */ (function () {
     EditorContext.prototype.onPaperMouseUpHandler = function (position) {
         this._eventEmitter.emit(EVENT_PAPER_MOUSE_UP, position);
     };
+    EditorContext.prototype.onPortMouseDown = function (callback) {
+        return this.addEventListener(EVENT_PORT_MOUSE_DOWN, callback);
+    };
+    /** @internal */
+    EditorContext.prototype.onPortMouseDownHandler = function (port, element) {
+        this._eventEmitter.emit(EVENT_PORT_MOUSE_DOWN, port, element);
+    };
+    EditorContext.prototype.onPortMouseUp = function (callback) {
+        return this.addEventListener(EVENT_PORT_MOUSE_UP, callback);
+    };
+    /** @internal */
+    EditorContext.prototype.onPortMouseUpHandler = function (port, element) {
+        this._eventEmitter.emit(EVENT_PORT_MOUSE_UP, port, element);
+    };
     EditorContext.prototype.onPortMoved = function (callback) {
         return this.addEventListener(EVENT_PORT_MOVED, callback);
     };
@@ -924,6 +945,27 @@ var EditorContext = /** @class */ (function () {
     EditorContext.prototype.onElementSelectedHandler = function (element) {
         this._eventEmitter.emit(EVENT_ELEMENT_SELECTED, element);
     };
+    EditorContext.prototype.onElementMouseMove = function (callback) {
+        return this.addEventListener(EVENT_ELEMENT_MOUSE_MOVE, callback);
+    };
+    /** @internal */
+    EditorContext.prototype.onElementMouseMoveHandler = function (ev, element) {
+        this._eventEmitter.emit(EVENT_ELEMENT_MOUSE_MOVE, ev, element);
+    };
+    EditorContext.prototype.onElementMouseLeave = function (callback) {
+        return this.addEventListener(EVENT_ELEMENT_MOUSE_LEAVE, callback);
+    };
+    /** @internal */
+    EditorContext.prototype.onElementMouseLeaveHandler = function (ev, element) {
+        this._eventEmitter.emit(EVENT_ELEMENT_MOUSE_LEAVE, ev, element);
+    };
+    EditorContext.prototype.onElementMouseUp = function (callback) {
+        return this.addEventListener(EVENT_ELEMENT_MOUSE_UP, callback);
+    };
+    /** @internal */
+    EditorContext.prototype.onElementMouseUpHandler = function (ev, element) {
+        this._eventEmitter.emit(EVENT_ELEMENT_MOUSE_UP, ev, element);
+    };
     EditorContext.prototype.onLinkSelected = function (callback) {
         return this.addEventListener(EVENT_LINK_SELECTED, callback);
     };
@@ -939,27 +981,21 @@ var EditorContext = /** @class */ (function () {
         this._eventEmitter.emit(EVENT_TEXT_SELECTED, text);
     };
     EditorContext.prototype.triggerRenderElement = function (elementId) {
-        //TODO: to be implemented
-        var element = this.getElement(elementId);
-        if (element) {
-            element.manuallyTriggerRender();
-        }
+        this._eventEmitter.emit(EVENT_MANUALLY_RENDER_ELEMENT, elementId);
+    };
+    EditorContext.prototype.onManuallyTriggerRenderElement = function (callback) {
+        return this.addEventListener(EVENT_MANUALLY_RENDER_ELEMENT, callback);
     };
     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();
-            }
-        }
+        this._eventEmitter.emit(EVENT_MANUALLY_RENDER_PORT, portId, elementId);
+    };
+    EditorContext.prototype.onManuallyTriggerRenderPort = function (callback) {
+        return this.addEventListener(EVENT_MANUALLY_RENDER_PORT, callback);
     };
     return EditorContext;
 }());
 
-var Circle = React$1.forwardRef(function (props, ref) {
+var Circle = React.forwardRef(function (props, ref) {
     var s = { height: 100, width: 100 };
     if (props.r) {
         s.height = props.r * 2;
@@ -972,11 +1008,11 @@ var Circle = React$1.forwardRef(function (props, ref) {
         s.height = props.height;
         s.width = props.width;
     }
-    return (React$1.createElement(ShapeWrapper, __assign({ viewBox: '0 0 100 100' }, props, { width: s.width, height: s.height, ref: ref }),
-        React$1.createElement("circle", { className: "".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", cx: 50, cy: 50, r: 50, fill: props.fill || 'transparent', stroke: props.stroke || "none", strokeWidth: props.strokeWidth })));
+    return (React.createElement(ShapeWrapper, __assign({ viewBox: '0 0 100 100' }, props, { width: s.width, height: s.height, ref: ref }),
+        React.createElement("circle", { className: "".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", cx: 50, cy: 50, r: 50, fill: props.fill || 'transparent', stroke: props.stroke || "none", strokeWidth: props.strokeWidth })));
 });
 
-var Crescent = React$1.forwardRef(function (props, ref) {
+var Crescent = React.forwardRef(function (props, ref) {
     var s = { height: 100, width: 100 };
     if (props.r) {
         s.height = props.r * 2;
@@ -990,12 +1026,12 @@ var Crescent = React$1.forwardRef(function (props, ref) {
         s.width = props.width;
     }
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
-    return (React$1.createElement(ShapeWrapper, __assign({ ref: ref, viewBox: '0 0 100 100' }, props, { width: s.width, height: s.height }),
-        React$1.createElement("rect", { width: 100, height: 100, stroke: "transparent", fill: 'transparent' }),
-        React$1.createElement("path", { className: "".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", d: "M 0 75 A 50 50 0 1 1 100 75 Z", fill: props.fill || 'none', stroke: props.stroke || 'none', strokeWidth: sw })));
+    return (React.createElement(ShapeWrapper, __assign({ ref: ref, viewBox: '0 0 100 100' }, props, { width: s.width, height: s.height }),
+        React.createElement("rect", { width: 100, height: 100, stroke: "transparent", fill: 'transparent' }),
+        React.createElement("path", { className: "".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", d: "M 0 75 A 50 50 0 1 1 100 75 Z", fill: props.fill || 'none', stroke: props.stroke || 'none', strokeWidth: sw })));
 });
 
-var Rectangle = React$1.forwardRef(function (props, ref) {
+var Rectangle = React.forwardRef(function (props, ref) {
     var scaledWidth = props.width;
     var scaledHeight = props.height;
     if (props.width > 100 || props.height > 100) {
@@ -1011,11 +1047,11 @@ var Rectangle = React$1.forwardRef(function (props, ref) {
         }
     }
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
-    return (React$1.createElement(ShapeWrapper, __assign({}, props, { ref: ref, height: props.height, width: props.width }),
-        React$1.createElement("rect", { className: "rect-border ".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", width: scaledWidth, height: scaledHeight, fill: props.fill || "transparent", stroke: props.stroke || "none", strokeWidth: sw })));
+    return (React.createElement(ShapeWrapper, __assign({}, props, { ref: ref, height: props.height, width: props.width }),
+        React.createElement("rect", { className: "rect-border ".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", width: scaledWidth, height: scaledHeight, fill: props.fill || "transparent", stroke: props.stroke || "none", strokeWidth: sw })));
 });
 
-var RectangularFrame = React$1.forwardRef(function (props, ref) {
+var RectangularFrame = React.forwardRef(function (props, ref) {
     var scaledWidth = props.width;
     var scaledHeight = props.height;
     if (props.width > 100 || props.height > 100) {
@@ -1035,10 +1071,10 @@ var RectangularFrame = React$1.forwardRef(function (props, ref) {
     var fw = props.frameColor ? (props.frameWidth || 1) : 0;
     var scaledFw = scaledWidth / props.width * fw;
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
-    return (React$1.createElement(ShapeWrapper, __assign({}, props, { ref: ref, height: props.height, width: props.width }),
-        React$1.createElement("rect", { vectorEffect: "non-scaling-stroke", className: "rectangular-frame-outer-border ".concat(props.portMoveableAreaCssClass), x: vbX, y: vbY, width: scaledWidth, height: scaledHeight, fill: "none", stroke: props.stroke || "none", strokeWidth: sw }),
-        React$1.createElement("rect", { vectorEffect: "non-scaling-stroke", className: 'rectangular-frame-hallway', x: vbX + scaledFw / 2, y: vbY + scaledFw / 2, width: scaledWidth - scaledFw, height: scaledHeight - scaledFw, stroke: props.frameColor || "none", strokeWidth: fw, fill: props.fill || "transparent" }),
-        React$1.createElement("rect", { vectorEffect: "non-scaling-stroke", className: 'rectangular-frame-inner-border', x: vbX + scaledFw, y: vbY + scaledFw, width: scaledWidth - scaledFw * 2, height: scaledHeight - scaledFw * 2, stroke: props.stroke || "none", strokeWidth: sw, fill: props.fill || "transparent" })));
+    return (React.createElement(ShapeWrapper, __assign({}, props, { ref: ref, height: props.height, width: props.width }),
+        React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: "rectangular-frame-outer-border ".concat(props.portMoveableAreaCssClass), x: vbX, y: vbY, width: scaledWidth, height: scaledHeight, fill: "none", stroke: props.stroke || "none", strokeWidth: sw }),
+        React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: 'rectangular-frame-hallway', x: vbX + scaledFw / 2, y: vbY + scaledFw / 2, width: scaledWidth - scaledFw, height: scaledHeight - scaledFw, stroke: props.frameColor || "none", strokeWidth: fw, fill: props.fill || "transparent" }),
+        React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: 'rectangular-frame-inner-border', x: vbX + scaledFw, y: vbY + scaledFw, width: scaledWidth - scaledFw * 2, height: scaledHeight - scaledFw * 2, stroke: props.stroke || "none", strokeWidth: sw, fill: props.fill || "transparent" })));
 });
 
 var createRoot;
@@ -1120,17 +1156,17 @@ var PORT_DEFAULT_SIZE = 20;
 var SelectionFrame = function (props) {
     var _a;
     var bbox = (_a = props.targetSVGElement) === null || _a === void 0 ? void 0 : _a.getBBox();
-    var _b = React$1.useState(props.width || (bbox === null || bbox === void 0 ? void 0 : bbox.width) || MIN_ELEMENT_SIZE), width = _b[0], setWidth = _b[1];
-    var _c = React$1.useState(props.height || (bbox === null || bbox === void 0 ? void 0 : bbox.height) || MIN_ELEMENT_SIZE), height = _c[0], setHeight = _c[1];
+    var _b = React.useState(props.width || (bbox === null || bbox === void 0 ? void 0 : bbox.width) || MIN_ELEMENT_SIZE), width = _b[0], setWidth = _b[1];
+    var _c = React.useState(props.height || (bbox === null || bbox === void 0 ? void 0 : bbox.height) || MIN_ELEMENT_SIZE), height = _c[0], setHeight = _c[1];
     var x = 0;
     var y = 0;
     var framePadding = props.framePadding || 0;
     var r = 5;
-    var _d = React$1.useState(false), draggingRect = _d[0], setDraggingRect = _d[1];
-    var _e = React$1.useState(false), draggingCircle = _e[0], setDraggingCircle = _e[1];
-    var _f = React$1.useState(0), startX = _f[0], setStartX = _f[1];
-    var _g = React$1.useState(0), startY = _g[0], setStartY = _g[1];
-    var _h = React$1.useState(0), lastMoveTime = _h[0], setLastMoveTime = _h[1];
+    var _d = React.useState(false), draggingRect = _d[0], setDraggingRect = _d[1];
+    var _e = React.useState(false), draggingCircle = _e[0], setDraggingCircle = _e[1];
+    var _f = React.useState(0), startX = _f[0], setStartX = _f[1];
+    var _g = React.useState(0), startY = _g[0], setStartY = _g[1];
+    var _h = React.useState(0), lastMoveTime = _h[0], setLastMoveTime = _h[1];
     var addRectHandleMouseDown = function (event) {
         event.stopPropagation();
         if (!draggingCircle) {
@@ -1140,7 +1176,7 @@ var SelectionFrame = function (props) {
             setStartY(event.clientY);
         }
     };
-    var rectHandleMouseMove = React$1.useCallback(function (event) {
+    var rectHandleMouseMove = React.useCallback(function (event) {
         var mouseEvent = event;
         if (draggingRect) {
             var offsetX = mouseEvent.clientX - startX;
@@ -1163,7 +1199,7 @@ var SelectionFrame = function (props) {
             }
         }
     }, [draggingRect, props.onMove, props.movingRate, startX, startY, lastMoveTime]);
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         var addRectHandleMouseUp = function () {
             //mouse up
             setDraggingRect(false);
@@ -1188,7 +1224,7 @@ var SelectionFrame = function (props) {
             setDraggingCircle(true);
         }
     };
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         var circleHandleMouseMove = function (event) {
             var mouseEvent = event;
             if (draggingCircle) {
@@ -1244,15 +1280,15 @@ var SelectionFrame = function (props) {
         leftX -= rectangleSize / 2;
         topY -= rectangleSize / 2;
     }
-    return (React$1.createElement(React$1.Fragment, null,
-        props.dragDropHandlerElement && React$1.createElement(props.dragDropHandlerElement, { dragging: draggingRect, onMouseDown: addRectHandleMouseDown }),
-        React$1.createElement("rect", { vectorEffect: "non-scaling-stroke", x: leftX, y: topY, width: width, height: height, fill: 'none', stroke: 'blue', strokeWidth: props.strokeWidth || 5, cursor: draggingRect ? 'grabbing' : 'grab', onMouseDown: addRectHandleMouseDown }),
+    return (React.createElement(React.Fragment, null,
+        props.dragDropHandlerElement && React.createElement(props.dragDropHandlerElement, { dragging: draggingRect, onMouseDown: addRectHandleMouseDown }),
+        React.createElement("rect", { vectorEffect: "non-scaling-stroke", x: leftX, y: topY, width: width, height: height, fill: 'none', stroke: 'blue', strokeWidth: props.strokeWidth || 5, cursor: draggingRect ? 'grabbing' : 'grab', onMouseDown: addRectHandleMouseDown }),
         props.resizability.enabled ?
-            (React$1.createElement("circle", { cursor: 'se-resize', cx: leftX + width, cy: topY + height, r: r, fill: 'blue', stroke: 'blue', onMouseDown: circleHandleMouseDown })) : null));
+            (React.createElement("circle", { cursor: 'se-resize', cx: leftX + width, cy: topY + height, r: r, fill: 'blue', stroke: 'blue', onMouseDown: circleHandleMouseDown })) : null));
 };
 
 var useSelectionFrame = function (props) {
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         if (props.targetSVGElement && props.container) {
             //render SelectionFrame component to the parent element of the targetSVGElement            
             if (props.container) {
@@ -1261,7 +1297,7 @@ var useSelectionFrame = function (props) {
                 svg_1.style.outline = 'none';
                 props.targetSVGElement.appendChild(svg_1);
                 var root_1 = createRoot(svg_1);
-                root_1.render(React$1.createElement(SelectionFrame, __assign({}, props, { container: props.container })));
+                root_1.render(React.createElement(SelectionFrame, __assign({}, props, { container: props.container })));
                 return function () {
                     root_1.unmount();
                     if (props.targetSVGElement) {
@@ -1478,7 +1514,7 @@ var onTextSelected = function (callback) {
         off: off
     };
 };
-var paperEventEmitterContext = React$1.createContext({
+var paperEventEmitterContext = React.createContext({
     emitter: eventEmitter,
     emitPaperClicked: emitPaperClicked,
     onPaperClicked: onPaperClicked,
@@ -1516,13 +1552,13 @@ var paperEventEmitterContext = React$1.createContext({
     onCommandRenderPort: onCommandRenderPort,
 });
 
-var Text = React$1.forwardRef(function (_a, ref) {
-    var id = _a.id, content = _a.content, x = _a.x, y = _a.y, width = _a.width, height = _a.height, _b = _a.align, align = _b === void 0 ? exports.TextAlign.left : _b, fontSizeProp = _a.fontSize, border = _a.border, container = _a.container, onSelected = _a.onSelected, onMoved = _a.onMoved, onResized = _a.onResized, onContentChanged = _a.onContentChanged;
-    var _c = React$1.useState(false), isSelected = _c[0], setIsSelected = _c[1];
-    var _d = React$1.useState(false), isEditing = _d[0], setIsEditing = _d[1];
-    var svgRef = React$1.useRef();
-    var _e = React$1.useContext(paperEventEmitterContext), onPaperClicked = _e.onPaperClicked, emitTextSelected = _e.emitTextSelected, onPortSelected = _e.onPortSelected, onElementSelected = _e.onElementSelected, onTextSelected = _e.onTextSelected;
-    React$1.useEffect(function () {
+var Text = React.forwardRef(function (_a, ref) {
+    var id = _a.id, content = _a.content, x = _a.x, y = _a.y, width = _a.width, height = _a.height, editable = _a.editable, _b = _a.align, align = _b === void 0 ? exports.TextAlign.left : _b, fontSizeProp = _a.fontSize, border = _a.border, container = _a.container, onSelected = _a.onSelected, onMoved = _a.onMoved, onResized = _a.onResized, onContentChanged = _a.onContentChanged;
+    var _c = React.useState(false), isSelected = _c[0], setIsSelected = _c[1];
+    var _d = React.useState(false), isEditing = _d[0], setIsEditing = _d[1];
+    var svgRef = React.useRef();
+    var _e = React.useContext(paperEventEmitterContext), onPaperClicked = _e.onPaperClicked, emitTextSelected = _e.emitTextSelected, onPortSelected = _e.onPortSelected, onElementSelected = _e.onElementSelected, onTextSelected = _e.onTextSelected;
+    React.useEffect(function () {
         var paperClickListener = onPaperClicked(function (ev) {
             var _a;
             var textareaELe = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('textarea');
@@ -1566,13 +1602,16 @@ var Text = React$1.forwardRef(function (_a, ref) {
             size: {
                 width: width,
                 height: height,
-            }
+            },
+            editable: editable
         };
         setIsSelected(true);
         onSelected && onSelected(text);
         emitTextSelected(text);
     };
     var handleChangeText = function (ev) {
+        if (!editable)
+            return;
         onContentChanged === null || onContentChanged === void 0 ? void 0 : onContentChanged(ev, ev.target.value);
     };
     useSelectionFrame({
@@ -1587,7 +1626,7 @@ var Text = React$1.forwardRef(function (_a, ref) {
         strokeWidth: 3,
         movingOffsetThreshold: TEXT_MOVING_OFFSET_THRESHOLD,
     });
-    var textAlign = React$1.useMemo(function () {
+    var textAlign = React.useMemo(function () {
         switch (align) {
             case exports.TextAlign.left:
                 return 'left';
@@ -1601,7 +1640,7 @@ var Text = React$1.forwardRef(function (_a, ref) {
     }, [align]);
     var fontSize = fontSizeProp || TEXT_FONT_SIZE;
     var borderStyle = border || 'none';
-    return (React$1.createElement("svg", { style: { overflow: "visible" }, x: x, y: y, ref: function (node) {
+    return (React.createElement("svg", { style: { overflow: "visible" }, x: x, y: y, ref: function (node) {
             svgRef.current = node;
             if (typeof ref === 'function') {
                 ref(node);
@@ -1610,13 +1649,13 @@ var Text = React$1.forwardRef(function (_a, ref) {
                 ref.current = node;
             }
         }, onClick: handleClick },
-        React$1.createElement("foreignObject", { width: width, height: height, style: {
+        React.createElement("foreignObject", { width: width, height: height, style: {
                 overflow: 'visible',
                 userSelect: 'none',
                 WebkitUserSelect: 'none',
                 msUserSelect: 'none'
             } },
-            React$1.createElement("div", { style: {
+            React.createElement("div", { style: {
                     width: '100%',
                     height: '100%',
                     borderWidth: '1px',
@@ -1625,7 +1664,7 @@ var Text = React$1.forwardRef(function (_a, ref) {
                     // whiteSpace: 'pre-wrap',
                     boxSizing: 'border-box',
                 } },
-                React$1.createElement("textarea", { style: {
+                React.createElement("textarea", { style: {
                         fontFamily: 'initial',
                         display: 'inline-block',
                         width: '100%',
@@ -1638,52 +1677,54 @@ var Text = React$1.forwardRef(function (_a, ref) {
                         textAlign: textAlign,
                         fontSize: fontSize,
                     }, readOnly: !isEditing, onDoubleClick: function () {
-                        if (onContentChanged) {
+                        if (editable) {
                             setIsEditing(true);
                         }
                     }, value: content, onChange: handleChangeText })))));
 });
-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, 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 () {
+var Text$1 = React.memo(Text);
+
+var Port1 = React.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, 
+    // onManuallyTriggerRenderHandler,
+    renderShape = props.renderShape;
+    var _a = React.useState(false); _a[0]; _a[1];
+    var textRef = React.useRef(null);
+    // useEffect(() => {
+    //     const off = onManuallyTriggerRenderHandler?.(() => {
+    //         setUpdated(prev => !prev);
+    //     });
+    //     return () => {
+    //         off?.();
+    //     }
+    // }, [])
+    var rotationAngle = React.useMemo(function () {
         if (!calculateRotationAngle)
             return 0;
         return calculateRotationAngle(x, y);
     }, [calculateRotationAngle, x, y]);
-    React$1.useEffect(function () {
+    React.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: 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); } });
+        return React.createElement(Text$1, { id: label.id, ref: textRef, x: x + position.x, y: y + position.y, width: size.width, height: size.height, editable: label.editable, 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 () {
+    var renderedShape = React.useMemo(function () {
         if (renderShape) {
             var RenderShape = renderShape;
-            return (React$1.createElement(RenderShape, __assign({ ref: ref }, props, { rotation: rotationAngle })));
+            return (React.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: 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" });
+            return React.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,
+    return (React.createElement(React.Fragment, null,
         renderedShape,
         label && renderLabel(label)));
 });
-var Port = React$1.memo(Port1);
+var Port = React.memo(Port1);
 
 // Render the svg <path> element
 function getCurvePathData(points, smoothing, closed) {
@@ -1844,14 +1885,14 @@ function calculateAngleWithOx(pStart, pEnd) {
 //Defined remove icon for element link, shown when element link is selected.
 function CloseIcon(_a) {
     var onClick = _a.onClick;
-    return (React$1.createElement("svg", { width: 20, height: 20, viewBox: "0 0 24.00 24.00", xmlns: "http://www.w3.org/2000/svg", fill: "#ff0000", transform: "rotate(0)", onMouseDown: function (ev) { ev.stopPropagation(); }, onClick: onClick, cursor: 'pointer' },
-        React$1.createElement("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0", transform: "translate(3.84,3.84), scale(0.68)" },
-            React$1.createElement("rect", { x: "0", y: "0", width: "24.00", height: "24.00", rx: "12", fill: "#ffffff", strokeWidth: "0" })),
-        React$1.createElement("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round", stroke: "#CCCCCC", "stroke-width": "0.048" }),
-        React$1.createElement("g", { id: "SVGRepo_iconCarrier" },
-            React$1.createElement("g", null,
-                React$1.createElement("path", { fill: "none", d: "M0 0h24v24H0z" }),
-                React$1.createElement("path", { d: "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z" })))));
+    return (React.createElement("svg", { width: 20, height: 20, viewBox: "0 0 24.00 24.00", xmlns: "http://www.w3.org/2000/svg", fill: "#ff0000", transform: "rotate(0)", onMouseDown: function (ev) { ev.stopPropagation(); }, onClick: onClick, cursor: 'pointer' },
+        React.createElement("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0", transform: "translate(3.84,3.84), scale(0.68)" },
+            React.createElement("rect", { x: "0", y: "0", width: "24.00", height: "24.00", rx: "12", fill: "#ffffff", strokeWidth: "0" })),
+        React.createElement("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round", stroke: "#CCCCCC", "stroke-width": "0.048" }),
+        React.createElement("g", { id: "SVGRepo_iconCarrier" },
+            React.createElement("g", null,
+                React.createElement("path", { fill: "none", d: "M0 0h24v24H0z" }),
+                React.createElement("path", { d: "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z" })))));
 }
 
 /**
@@ -7388,6 +7429,12 @@ var flattenJs = f;
 
 var Flatten$1 = /*@__PURE__*/getDefaultExportFromCjs(flattenJs);
 
+var checkPositionOnLine = function (position, line) {
+    var point = Flatten$1.point(position.x, position.y);
+    var _line = Flatten$1.segment(Flatten$1.point(line[0].x, line[0].y), Flatten$1.point(line[1].x, line[1].y));
+    return _line.contains(point);
+};
+
 /**
  * Check if position 1 is within the radius r of position 2
  * @returns boolean
@@ -7414,17 +7461,56 @@ var findNearestPosition = function (listPositions, targetPosition) {
     }
     return nearestPoint;
 };
+/**
+ * From one point find projected Point on the line segment.
+ * @param position
+ * @param linePoints
+ * @returns
+ */
+var findNearestPointOnSegment = function (position, linePoints) {
+    var beginPosition = linePoints[0], endPosition = linePoints[1];
+    var point = Flatten$1.point(position.x, position.y);
+    var segment = Flatten$1.segment(Flatten$1.point(beginPosition.x, beginPosition.y), Flatten$1.point(endPosition.x, endPosition.y));
+    var _a = point.distanceTo(segment); _a[0]; var segmentFromPointToSegment = _a[1];
+    return {
+        x: segmentFromPointToSegment.pe.x,
+        y: segmentFromPointToSegment.pe.y
+    };
+};
+/**
+ * From 1 point find projected Point on the line segments so that the distance between 2 points is shortest.
+ * @param position
+ * @param lines
+ * @returns
+ */
+var findNearestProjectedPoint = function (position, lines) {
+    var possiblePoints = lines.map(function (p) { return findNearestPointOnSegment(position, p); });
+    var nearestPoint = findNearestPosition(possiblePoints, position);
+    return nearestPoint;
+};
+/**
+ * Check if a point is inside a polygon
+ * @param position
+ * @param polygonPoints
+ * @returns
+ */
+var checkPointContainsPolygon = function (position, polygonPoints) {
+    var polygon = new Flatten$1.Polygon();
+    polygon.addFace(polygonPoints.map(function (p) { return Flatten$1.point(p.x, p.y); }));
+    return polygon.contains(Flatten$1.point(position.x, position.y));
+};
 /**
  * @param ele : IElement
  * @returns Flatten.Polygon
  */
 var makePolygonOfElement = function (ele) {
     var polygon = new Flatten$1.Polygon();
+    var strokeWidthOffset = 1;
     polygon.addFace([
-        Flatten$1.point(ele.position.x, ele.position.y),
-        Flatten$1.point(ele.position.x + ele.size.width, ele.position.y),
-        Flatten$1.point(ele.position.x + ele.size.width, ele.position.y + ele.size.height),
-        Flatten$1.point(ele.position.x, ele.position.y + ele.size.height),
+        Flatten$1.point(ele.position.x + strokeWidthOffset, ele.position.y + strokeWidthOffset),
+        Flatten$1.point(ele.position.x + ele.size.width - strokeWidthOffset, ele.position.y + strokeWidthOffset),
+        Flatten$1.point(ele.position.x + ele.size.width - strokeWidthOffset, ele.position.y + ele.size.height - strokeWidthOffset),
+        Flatten$1.point(ele.position.x + strokeWidthOffset, ele.position.y + ele.size.height - strokeWidthOffset),
     ]);
     return polygon;
 };
@@ -7466,44 +7552,53 @@ var getFirstIntersection = function (startPosition, endPosition, elements) {
 //Find a point next to an element from a point on the element
 var generateSubstitutePosition = function (intersectedPosition, targetPosition, ele) {
     var translationOffset = 20;
+    var strokeWidthOffset = 1;
     var vertex1Position = {
-        x: ele.position.x,
-        y: ele.position.y,
+        x: ele.position.x + strokeWidthOffset,
+        y: ele.position.y + strokeWidthOffset,
     };
     var vertex2Position = {
-        x: ele.position.x + ele.size.width,
-        y: ele.position.y,
+        x: ele.position.x + ele.size.width - strokeWidthOffset,
+        y: ele.position.y + strokeWidthOffset,
     };
     var vertex3Position = {
-        x: ele.position.x + ele.size.width,
-        y: ele.position.y + ele.size.height,
+        x: ele.position.x + ele.size.width - strokeWidthOffset,
+        y: ele.position.y + ele.size.height - strokeWidthOffset,
     };
     var vertex4Position = {
-        x: ele.position.x,
-        y: ele.position.y + ele.size.height,
+        x: ele.position.x + strokeWidthOffset,
+        y: ele.position.y + ele.size.height - strokeWidthOffset,
     };
     var replacementPosition = null;
-    if (checkSamePosition(vertex1Position, intersectedPosition, 0)) {
+    if (checkSamePosition(vertex1Position, intersectedPosition, 3)) {
         //Cut at vertex 1 of bbox, move out a distance x,y
-        replacementPosition.x = vertex1Position.x - translationOffset;
-        replacementPosition.y = vertex1Position.y - translationOffset;
+        replacementPosition = {
+            x: vertex1Position.x - translationOffset,
+            y: vertex1Position.y - translationOffset,
+        };
     }
-    else if (checkSamePosition(vertex2Position, intersectedPosition, 0)) {
+    else if (checkSamePosition(vertex2Position, intersectedPosition, 3)) {
         //Cut at vertex 2 of bbox, move out a distance x,y
-        replacementPosition.x = vertex1Position.x + translationOffset;
-        replacementPosition.y = vertex1Position.y - translationOffset;
+        replacementPosition = {
+            x: vertex2Position.x + translationOffset,
+            y: vertex2Position.y - translationOffset,
+        };
     }
-    else if (checkSamePosition(vertex3Position, intersectedPosition, 0)) {
+    else if (checkSamePosition(vertex3Position, intersectedPosition, 3)) {
         //Cut at vertex 3 of bbox, move out a distance x,y
-        replacementPosition.x = vertex1Position.x + translationOffset;
-        replacementPosition.y = vertex1Position.y + translationOffset;
+        replacementPosition = {
+            x: vertex3Position.x + translationOffset,
+            y: vertex3Position.y + translationOffset,
+        };
     }
-    else if (checkSamePosition(vertex4Position, intersectedPosition, 0)) {
+    else if (checkSamePosition(vertex4Position, intersectedPosition, 3)) {
         //Cut at vertex 4 of bbox, move out a distance x,y
-        replacementPosition.x = vertex1Position.x - translationOffset;
-        replacementPosition.y = vertex1Position.y + translationOffset;
+        replacementPosition = {
+            x: vertex4Position.x - translationOffset,
+            y: vertex4Position.y + translationOffset,
+        };
     }
-    else if (intersectedPosition.y === ele.position.y) {
+    else if (checkPositionOnLine(intersectedPosition, [vertex1Position, vertex2Position])) {
         //cut top edge, move left or right
         var lineOfVertex12 = Flatten$1.line(Flatten$1.point(vertex1Position.x, vertex1Position.y), Flatten$1.point(vertex2Position.x, vertex2Position.y));
         //Check if the line lies on the edge of the bbox then move the starting point out 1 distance perpendicular to the edge.
@@ -7527,7 +7622,7 @@ var generateSubstitutePosition = function (intersectedPosition, targetPosition,
             replacementPosition = findNearestPosition([leftPosition, rightPosition], targetPosition);
         }
     }
-    else if (intersectedPosition.y === ele.position.y + ele.size.height) {
+    else if (checkPositionOnLine(intersectedPosition, [vertex3Position, vertex4Position])) {
         //cut bottom edge, move left or right
         var lineOfVertex34 = Flatten$1.line(Flatten$1.point(vertex3Position.x, vertex3Position.y), Flatten$1.point(vertex4Position.x, vertex4Position.y));
         if (Flatten$1.point(intersectedPosition.x, intersectedPosition.y).distanceTo(lineOfVertex34)[0] === 0 &&
@@ -7550,7 +7645,7 @@ var generateSubstitutePosition = function (intersectedPosition, targetPosition,
             replacementPosition = findNearestPosition([leftPosition, rightPosition], targetPosition);
         }
     }
-    else if (intersectedPosition.x === ele.position.x) {
+    else if (checkPositionOnLine(intersectedPosition, [vertex1Position, vertex4Position])) {
         //cut left edge, move up or down
         var lineOfVertex14 = Flatten$1.line(Flatten$1.point(vertex1Position.x, vertex1Position.y), Flatten$1.point(vertex4Position.x, vertex4Position.y));
         if (Flatten$1.point(intersectedPosition.x, intersectedPosition.y).distanceTo(lineOfVertex14)[0] === 0 &&
@@ -7573,7 +7668,7 @@ var generateSubstitutePosition = function (intersectedPosition, targetPosition,
             replacementPosition = findNearestPosition([topPosition, bottomPosition], targetPosition);
         }
     }
-    else if (intersectedPosition.x === ele.position.x + ele.size.width) {
+    else if (checkPositionOnLine(intersectedPosition, [vertex2Position, vertex3Position])) {
         //cut right edge, move up or down
         var lineOfVertex23 = Flatten$1.line(Flatten$1.point(vertex2Position.x, vertex2Position.y), Flatten$1.point(vertex3Position.x, vertex3Position.y));
         if (Flatten$1.point(intersectedPosition.x, intersectedPosition.y).distanceTo(lineOfVertex23)[0] === 0 &&
@@ -7606,25 +7701,25 @@ var getRelativePosition = function (clientPosition, relativeElement) {
     };
 };
 
-var makerStart = React$1.createElement("circle", { cx: 10, cy: 10, r: 10, fill: "blue" });
-var makerEnd = React$1.createElement("path", { d: "M0 0 L 20 10 L0 20 Z", fill: "blue" }); //<path d="M0 0 L 10 5 L0 10 Z"></path>
+var makerStart = React.createElement("circle", { cx: 10, cy: 10, r: 10, fill: "blue" });
+var makerEnd = React.createElement("path", { d: "M0 0 L 20 10 L0 20 Z", fill: "blue" }); //<path d="M0 0 L 10 5 L0 10 Z"></path>
 var IElementLink = function (_a) {
     var _b, _c;
     var id = _a.id, path = _a.path, stroke = _a.stroke, _d = _a.strokeWidth, strokeWidth = _d === void 0 ? 4 : _d, pointsProp = _a.points, sourcePosition = _a.sourcePosition, targetPosition = _a.targetPosition, onPathChanged = _a.onPathChanged, onClickDelete = _a.onClickDelete, onSelected = _a.onSelected, onDeselected = _a.onDeselected, container = _a.container, _e = _a.markerStart, markerStart = _e === void 0 ? makerStart : _e, _f = _a.markerEnd, markerEnd = _f === void 0 ? makerEnd : _f, _g = _a.markerDistanceFromPort, markerDistanceFromPort = _g === void 0 ? LINK_MARKER_DISTANCE_FROM_PORT : _g, _h = _a.markerSize, markerSize = _h === void 0 ? LINK_MARKER_SIZE : _h, label = _a.label, sourceLabel = _a.sourceLabel, targetLabel = _a.targetLabel, onLabelMoved = _a.onLabelMoved, onLabelResized = _a.onLabelResized, onLabelContentChanged = _a.onLabelContentChanged;
-    var _j = React$1.useState(path), pathStr = _j[0], setPathStr = _j[1];
-    var _k = React$1.useState(pointsProp !== null && pointsProp !== void 0 ? pointsProp : []), points = _k[0], setPoints = _k[1];
-    var _l = React$1.useState(false), isDragging = _l[0], setIsDragging = _l[1];
-    var _m = React$1.useState(), draggingPointIndex = _m[0], setDraggingPointIndex = _m[1];
-    var _o = React$1.useState({
+    var _j = React.useState(path), pathStr = _j[0], setPathStr = _j[1];
+    var _k = React.useState(pointsProp !== null && pointsProp !== void 0 ? pointsProp : []), points = _k[0], setPoints = _k[1];
+    var _l = React.useState(false), isDragging = _l[0], setIsDragging = _l[1];
+    var _m = React.useState(), draggingPointIndex = _m[0], setDraggingPointIndex = _m[1];
+    var _o = React.useState({
         current: null,
     }), selectedLabelRef = _o[0], setSelectedLabelRef = _o[1];
-    var _p = React$1.useState(false), isSelectedLink = _p[0], setIsSelectedLink = _p[1];
-    var _q = React$1.useContext(paperEventEmitterContext), onPaperClicked = _q.onPaperClicked, onElementSelected = _q.onElementSelected;
-    var pathRef = React$1.useRef(null);
-    var labelRef = React$1.useRef(null);
-    var sourceLabelRef = React$1.useRef(null);
-    var targetLabelRef = React$1.useRef(null);
-    React$1.useEffect(function () {
+    var _p = React.useState(false), isSelectedLink = _p[0], setIsSelectedLink = _p[1];
+    var _q = React.useContext(paperEventEmitterContext), onPaperClicked = _q.onPaperClicked, onElementSelected = _q.onElementSelected;
+    var pathRef = React.useRef(null);
+    var labelRef = React.useRef(null);
+    var sourceLabelRef = React.useRef(null);
+    var targetLabelRef = React.useRef(null);
+    React.useEffect(function () {
         var paperClickListener = onPaperClicked(function () {
             setSelectedLabelRef({
                 current: null,
@@ -7636,7 +7731,7 @@ var IElementLink = function (_a) {
             paperClickListener.off();
         };
     }, []);
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         var elementSelectedListener = onElementSelected(function () {
             setSelectedLabelRef({
                 current: null,
@@ -7648,17 +7743,17 @@ var IElementLink = function (_a) {
             elementSelectedListener.off();
         };
     }, []);
-    React$1.useLayoutEffect(function () {
+    React.useLayoutEffect(function () {
         var pointsList = __spreadArray(__spreadArray([sourcePosition], points, true), [targetPosition], false);
         var _pathStr = createSmoothPathString(pointsList, undefined);
         setPathStr(_pathStr);
     }, [sourcePosition, points, targetPosition]);
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         if (!pathStr)
             return;
         onPathChanged === null || onPathChanged === void 0 ? void 0 : onPathChanged(pathStr, id);
     }, [pathStr, id]);
-    React$1.useLayoutEffect(function () {
+    React.useLayoutEffect(function () {
         //handle when creating and moving point
         var handleMouseMove = function (ev) {
             var mouseEvent = ev;
@@ -7814,7 +7909,7 @@ var IElementLink = function (_a) {
             x: relativePosition.x + relativePositionTo.x,
             y: relativePosition.y + relativePositionTo.y,
         };
-        return (React$1.createElement(Text$1, { id: label.id, x: position.x, y: position.y, width: size.width, height: size.height, content: content, fontSize: label.fontSize, border: label.border, ref: curLabelRef, container: container, onSelected: function () { return setSelectedLabelRef(curLabelRef); }, onMoved: handleLabelMoved, onResized: handleLabelResized, onContentChanged: handleLabelContentChanged }));
+        return (React.createElement(Text$1, { id: label.id, x: position.x, y: position.y, width: size.width, height: size.height, editable: label.editable, content: content, fontSize: label.fontSize, border: label.border, ref: curLabelRef, container: container, onSelected: function () { return setSelectedLabelRef(curLabelRef); }, onMoved: handleLabelMoved, onResized: handleLabelResized, onContentChanged: handleLabelContentChanged }));
     };
     var angleMarkerStart = '0';
     var angleMarkerEnd = '0';
@@ -7832,28 +7927,28 @@ var IElementLink = function (_a) {
         }
         centerPathPosition = (_c = pathRef.current) === null || _c === void 0 ? void 0 : _c.getPointAtLength(pathRef.current.getTotalLength() / 2);
     }
-    return (React$1.createElement("g", null,
-        React$1.createElement("path", { ref: pathRef, d: pathStr, className: isSelectedLink ? CSS_CLASS_LINK_SELECTED : '', fill: "none", stroke: stroke || LINK_DEFAULT_COLOR, strokeWidth: strokeWidth }),
-        React$1.createElement("path", { d: pathStr, fill: "none", stroke: 'transparent', strokeWidth: LINK_CLICKABLE_STROKE_WIDTH, onClick: handleClickPath, onMouseDown: handleMouseDownOnPath }),
-        isSelectedLink && centerPathPosition && React$1.createElement("svg", { x: centerPathPosition.x - 10, y: centerPathPosition.y - 10 },
-            React$1.createElement(CloseIcon, { onClick: onClickDelete })),
+    return (React.createElement("g", null,
+        React.createElement("path", { ref: pathRef, d: pathStr, className: isSelectedLink ? CSS_CLASS_LINK_SELECTED : '', fill: "none", stroke: stroke || LINK_DEFAULT_COLOR, strokeWidth: strokeWidth }),
+        React.createElement("path", { d: pathStr, fill: "none", stroke: 'transparent', strokeWidth: LINK_CLICKABLE_STROKE_WIDTH, onClick: handleClickPath, onMouseDown: handleMouseDownOnPath }),
+        isSelectedLink && centerPathPosition && React.createElement("svg", { x: centerPathPosition.x - 10, y: centerPathPosition.y - 10 },
+            React.createElement(CloseIcon, { onClick: onClickDelete })),
         label && renderLabel(label, 'middle', centerPathPosition),
         sourceLabel && renderLabel(sourceLabel, 'source', sourcePosition),
         targetLabel && renderLabel(targetLabel, 'target', targetPosition),
-        markerStartPosition && React$1.createElement("g", { transform: "rotate(".concat(angleMarkerStart, ")"), style: { transformOrigin: 'center', transformBox: 'content-box' } },
-            React$1.createElement("svg", { x: markerStartPosition.x - markerSize / 2, y: markerStartPosition.y - markerSize / 2, width: markerSize, height: markerSize }, markerStart)),
-        markerEndPosition && React$1.createElement("g", { transform: "rotate(".concat(angleMarkerEnd, ")"), style: { transformOrigin: 'center', transformBox: 'content-box' } },
-            React$1.createElement("svg", { x: markerEndPosition.x - markerSize / 2, y: markerEndPosition.y - markerSize / 2, width: markerSize, height: markerSize }, markerEnd))));
+        markerStartPosition && React.createElement("g", { transform: "rotate(".concat(angleMarkerStart, ")"), style: { transformOrigin: 'center', transformBox: 'content-box' } },
+            React.createElement("svg", { x: markerStartPosition.x - markerSize / 2, y: markerStartPosition.y - markerSize / 2, width: markerSize, height: markerSize }, markerStart)),
+        markerEndPosition && React.createElement("g", { transform: "rotate(".concat(angleMarkerEnd, ")"), style: { transformOrigin: 'center', transformBox: 'content-box' } },
+            React.createElement("svg", { x: markerEndPosition.x - markerSize / 2, y: markerEndPosition.y - markerSize / 2, width: markerSize, height: markerSize }, markerEnd))));
 };
-var ElementLink = React$1.memo(IElementLink);
+var ElementLink = React.memo(IElementLink);
 
 var Ruler = function (_a) {
     var squareSize = _a.squareSize, border = _a.border;
     var numColumns = Math.ceil(3000 / squareSize);
     var numRows = Math.ceil(3000 / squareSize);
     var tableWidth = numColumns * squareSize;
-    return (React$1.createElement("table", { style: { position: 'absolute', zIndex: -1, top: 0, left: 0, borderCollapse: 'collapse', width: tableWidth } },
-        React$1.createElement("tbody", null, Array.from({ length: numRows }).map(function (_, rowIndex) { return (React$1.createElement("tr", { key: rowIndex, style: { margin: 0, padding: 0 } }, Array.from({ length: numColumns }).map(function (_, colIndex) { return (React$1.createElement("td", { key: colIndex, style: {
+    return (React.createElement("table", { style: { position: 'absolute', zIndex: -1, top: 0, left: 0, borderCollapse: 'collapse', width: tableWidth } },
+        React.createElement("tbody", null, Array.from({ length: numRows }).map(function (_, rowIndex) { return (React.createElement("tr", { key: rowIndex, style: { margin: 0, padding: 0 } }, Array.from({ length: numColumns }).map(function (_, colIndex) { return (React.createElement("td", { key: colIndex, style: {
                 width: squareSize,
                 height: squareSize,
                 border: border,
@@ -7864,11 +7959,11 @@ var Ruler = function (_a) {
                 position: 'relative',
                 fontSize: 12,
             } },
-            rowIndex === 0 ? React$1.createElement("span", { style: { marginLeft: "-12px" } }, colIndex * squareSize) : "",
-            colIndex === 0 ? React$1.createElement("span", { style: { top: "-9px", position: "absolute" } }, rowIndex * squareSize) : "")); }))); }))));
+            rowIndex === 0 ? React.createElement("span", { style: { marginLeft: "-12px" } }, colIndex * squareSize) : "",
+            colIndex === 0 ? React.createElement("span", { style: { top: "-9px", position: "absolute" } }, rowIndex * squareSize) : "")); }))); }))));
 };
 
-var ElementWrapper = React$1.forwardRef(function (_a, ref) {
+var ElementWrapper = React.forwardRef(function (_a, ref) {
     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();
@@ -7883,7 +7978,7 @@ var ElementWrapper = React$1.forwardRef(function (_a, ref) {
                 onContextMenu(ev);
         }
     };
-    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));
+    return (React.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
@@ -7923,1267 +8018,50 @@ var getElementRotationInfo = function (element) {
     return rotationAngle;
 };
 
-var checkPositionOnLine = function (position, line) {
-    var point = Flatten$1.point(position.x, position.y);
-    var _line = Flatten$1.segment(Flatten$1.point(line[0].x, line[0].y), Flatten$1.point(line[1].x, line[1].y));
-    return _line.contains(point);
-};
-
-var bundle = {exports: {}};
-
-var cssLayout = {exports: {}};
-
-(function (module, exports) {
-	// UMD (Universal Module Definition)
-	// See https://github.com/umdjs/umd for reference
-	//
-	// This file uses the following specific UMD implementation:
-	// https://github.com/umdjs/umd/blob/master/returnExports.js
-	(function(root, factory) {
-	  {
-	    // Node. Does not work with strict CommonJS, but
-	    // only CommonJS-like environments that support module.exports,
-	    // like Node.
-	    module.exports = factory();
-	  }
-	}(commonjsGlobal, function() {
-	  /**
-	 * Copyright (c) 2014, Facebook, Inc.
-	 * All rights reserved.
-	 *
-	 * This source code is licensed under the BSD-style license found in the
-	 * LICENSE file in the root directory of this source tree. An additional grant
-	 * of patent rights can be found in the PATENTS file in the same directory.
-	 */
-
-	var computeLayout = (function() {
-
-	  var CSS_UNDEFINED;
-
-	  var CSS_DIRECTION_INHERIT = 'inherit';
-	  var CSS_DIRECTION_LTR = 'ltr';
-	  var CSS_DIRECTION_RTL = 'rtl';
-
-	  var CSS_FLEX_DIRECTION_ROW = 'row';
-	  var CSS_FLEX_DIRECTION_ROW_REVERSE = 'row-reverse';
-	  var CSS_FLEX_DIRECTION_COLUMN = 'column';
-	  var CSS_FLEX_DIRECTION_COLUMN_REVERSE = 'column-reverse';
-
-	  var CSS_JUSTIFY_FLEX_START = 'flex-start';
-	  var CSS_JUSTIFY_CENTER = 'center';
-	  var CSS_JUSTIFY_FLEX_END = 'flex-end';
-	  var CSS_JUSTIFY_SPACE_BETWEEN = 'space-between';
-	  var CSS_JUSTIFY_SPACE_AROUND = 'space-around';
-
-	  var CSS_ALIGN_FLEX_START = 'flex-start';
-	  var CSS_ALIGN_CENTER = 'center';
-	  var CSS_ALIGN_FLEX_END = 'flex-end';
-	  var CSS_ALIGN_STRETCH = 'stretch';
-
-	  var CSS_POSITION_RELATIVE = 'relative';
-	  var CSS_POSITION_ABSOLUTE = 'absolute';
-
-	  var leading = {
-	    'row': 'left',
-	    'row-reverse': 'right',
-	    'column': 'top',
-	    'column-reverse': 'bottom'
-	  };
-	  var trailing = {
-	    'row': 'right',
-	    'row-reverse': 'left',
-	    'column': 'bottom',
-	    'column-reverse': 'top'
-	  };
-	  var pos = {
-	    'row': 'left',
-	    'row-reverse': 'right',
-	    'column': 'top',
-	    'column-reverse': 'bottom'
-	  };
-	  var dim = {
-	    'row': 'width',
-	    'row-reverse': 'width',
-	    'column': 'height',
-	    'column-reverse': 'height'
-	  };
-
-	  // When transpiled to Java / C the node type has layout, children and style
-	  // properties. For the JavaScript version this function adds these properties
-	  // if they don't already exist.
-	  function fillNodes(node) {
-	    if (!node.layout || node.isDirty) {
-	      node.layout = {
-	        width: undefined,
-	        height: undefined,
-	        top: 0,
-	        left: 0,
-	        right: 0,
-	        bottom: 0
-	      };
-	    }
-
-	    if (!node.style) {
-	      node.style = {};
-	    }
-
-	    if (!node.children) {
-	      node.children = [];
-	    }
-	    node.children.forEach(fillNodes);
-	    return node;
-	  }
-
-	  function isUndefined(value) {
-	    return value === undefined;
-	  }
-
-	  function isRowDirection(flexDirection) {
-	    return flexDirection === CSS_FLEX_DIRECTION_ROW ||
-	           flexDirection === CSS_FLEX_DIRECTION_ROW_REVERSE;
-	  }
-
-	  function isColumnDirection(flexDirection) {
-	    return flexDirection === CSS_FLEX_DIRECTION_COLUMN ||
-	           flexDirection === CSS_FLEX_DIRECTION_COLUMN_REVERSE;
-	  }
-
-	  function getLeadingMargin(node, axis) {
-	    if (node.style.marginStart !== undefined && isRowDirection(axis)) {
-	      return node.style.marginStart;
-	    }
-
-	    var value = null;
-	    switch (axis) {
-	      case 'row':            value = node.style.marginLeft;   break;
-	      case 'row-reverse':    value = node.style.marginRight;  break;
-	      case 'column':         value = node.style.marginTop;    break;
-	      case 'column-reverse': value = node.style.marginBottom; break;
-	    }
-
-	    if (value !== undefined) {
-	      return value;
-	    }
-
-	    if (node.style.margin !== undefined) {
-	      return node.style.margin;
-	    }
-
-	    return 0;
-	  }
-
-	  function getTrailingMargin(node, axis) {
-	    if (node.style.marginEnd !== undefined && isRowDirection(axis)) {
-	      return node.style.marginEnd;
-	    }
-
-	    var value = null;
-	    switch (axis) {
-	      case 'row':            value = node.style.marginRight;  break;
-	      case 'row-reverse':    value = node.style.marginLeft;   break;
-	      case 'column':         value = node.style.marginBottom; break;
-	      case 'column-reverse': value = node.style.marginTop;    break;
-	    }
-
-	    if (value != null) {
-	      return value;
-	    }
-
-	    if (node.style.margin !== undefined) {
-	      return node.style.margin;
-	    }
-
-	    return 0;
-	  }
-
-	  function getLeadingPadding(node, axis) {
-	    if (node.style.paddingStart !== undefined && node.style.paddingStart >= 0
-	        && isRowDirection(axis)) {
-	      return node.style.paddingStart;
-	    }
-
-	    var value = null;
-	    switch (axis) {
-	      case 'row':            value = node.style.paddingLeft;   break;
-	      case 'row-reverse':    value = node.style.paddingRight;  break;
-	      case 'column':         value = node.style.paddingTop;    break;
-	      case 'column-reverse': value = node.style.paddingBottom; break;
-	    }
-
-	    if (value != null && value >= 0) {
-	      return value;
-	    }
-
-	    if (node.style.padding !== undefined && node.style.padding >= 0) {
-	      return node.style.padding;
-	    }
-
-	    return 0;
-	  }
-
-	  function getTrailingPadding(node, axis) {
-	    if (node.style.paddingEnd !== undefined && node.style.paddingEnd >= 0
-	        && isRowDirection(axis)) {
-	      return node.style.paddingEnd;
-	    }
-
-	    var value = null;
-	    switch (axis) {
-	      case 'row':            value = node.style.paddingRight;  break;
-	      case 'row-reverse':    value = node.style.paddingLeft;   break;
-	      case 'column':         value = node.style.paddingBottom; break;
-	      case 'column-reverse': value = node.style.paddingTop;    break;
-	    }
-
-	    if (value != null && value >= 0) {
-	      return value;
-	    }
-
-	    if (node.style.padding !== undefined && node.style.padding >= 0) {
-	      return node.style.padding;
-	    }
-
-	    return 0;
-	  }
-
-	  function getLeadingBorder(node, axis) {
-	    if (node.style.borderStartWidth !== undefined && node.style.borderStartWidth >= 0
-	        && isRowDirection(axis)) {
-	      return node.style.borderStartWidth;
-	    }
-
-	    var value = null;
-	    switch (axis) {
-	      case 'row':            value = node.style.borderLeftWidth;   break;
-	      case 'row-reverse':    value = node.style.borderRightWidth;  break;
-	      case 'column':         value = node.style.borderTopWidth;    break;
-	      case 'column-reverse': value = node.style.borderBottomWidth; break;
-	    }
-
-	    if (value != null && value >= 0) {
-	      return value;
-	    }
-
-	    if (node.style.borderWidth !== undefined && node.style.borderWidth >= 0) {
-	      return node.style.borderWidth;
-	    }
-
-	    return 0;
-	  }
-
-	  function getTrailingBorder(node, axis) {
-	    if (node.style.borderEndWidth !== undefined && node.style.borderEndWidth >= 0
-	        && isRowDirection(axis)) {
-	      return node.style.borderEndWidth;
-	    }
-
-	    var value = null;
-	    switch (axis) {
-	      case 'row':            value = node.style.borderRightWidth;  break;
-	      case 'row-reverse':    value = node.style.borderLeftWidth;   break;
-	      case 'column':         value = node.style.borderBottomWidth; break;
-	      case 'column-reverse': value = node.style.borderTopWidth;    break;
-	    }
-
-	    if (value != null && value >= 0) {
-	      return value;
-	    }
-
-	    if (node.style.borderWidth !== undefined && node.style.borderWidth >= 0) {
-	      return node.style.borderWidth;
-	    }
-
-	    return 0;
-	  }
-
-	  function getLeadingPaddingAndBorder(node, axis) {
-	    return getLeadingPadding(node, axis) + getLeadingBorder(node, axis);
-	  }
-
-	  function getTrailingPaddingAndBorder(node, axis) {
-	    return getTrailingPadding(node, axis) + getTrailingBorder(node, axis);
-	  }
-
-	  function getBorderAxis(node, axis) {
-	    return getLeadingBorder(node, axis) + getTrailingBorder(node, axis);
-	  }
-
-	  function getMarginAxis(node, axis) {
-	    return getLeadingMargin(node, axis) + getTrailingMargin(node, axis);
-	  }
-
-	  function getPaddingAndBorderAxis(node, axis) {
-	    return getLeadingPaddingAndBorder(node, axis) +
-	        getTrailingPaddingAndBorder(node, axis);
-	  }
-
-	  function getJustifyContent(node) {
-	    if (node.style.justifyContent) {
-	      return node.style.justifyContent;
-	    }
-	    return 'flex-start';
-	  }
-
-	  function getAlignContent(node) {
-	    if (node.style.alignContent) {
-	      return node.style.alignContent;
-	    }
-	    return 'flex-start';
-	  }
-
-	  function getAlignItem(node, child) {
-	    if (child.style.alignSelf) {
-	      return child.style.alignSelf;
-	    }
-	    if (node.style.alignItems) {
-	      return node.style.alignItems;
-	    }
-	    return 'stretch';
-	  }
-
-	  function resolveAxis(axis, direction) {
-	    if (direction === CSS_DIRECTION_RTL) {
-	      if (axis === CSS_FLEX_DIRECTION_ROW) {
-	        return CSS_FLEX_DIRECTION_ROW_REVERSE;
-	      } else if (axis === CSS_FLEX_DIRECTION_ROW_REVERSE) {
-	        return CSS_FLEX_DIRECTION_ROW;
-	      }
-	    }
-
-	    return axis;
-	  }
-
-	  function resolveDirection(node, parentDirection) {
-	    var direction;
-	    if (node.style.direction) {
-	      direction = node.style.direction;
-	    } else {
-	      direction = CSS_DIRECTION_INHERIT;
-	    }
-
-	    if (direction === CSS_DIRECTION_INHERIT) {
-	      direction = (parentDirection === undefined ? CSS_DIRECTION_LTR : parentDirection);
-	    }
-
-	    return direction;
-	  }
-
-	  function getFlexDirection(node) {
-	    if (node.style.flexDirection) {
-	      return node.style.flexDirection;
-	    }
-	    return CSS_FLEX_DIRECTION_COLUMN;
-	  }
-
-	  function getCrossFlexDirection(flexDirection, direction) {
-	    if (isColumnDirection(flexDirection)) {
-	      return resolveAxis(CSS_FLEX_DIRECTION_ROW, direction);
-	    } else {
-	      return CSS_FLEX_DIRECTION_COLUMN;
-	    }
-	  }
-
-	  function getPositionType(node) {
-	    if (node.style.position) {
-	      return node.style.position;
-	    }
-	    return 'relative';
-	  }
-
-	  function isFlex(node) {
-	    return (
-	      getPositionType(node) === CSS_POSITION_RELATIVE &&
-	      node.style.flex > 0
-	    );
-	  }
-
-	  function isFlexWrap(node) {
-	    return node.style.flexWrap === 'wrap';
-	  }
-
-	  function getDimWithMargin(node, axis) {
-	    return node.layout[dim[axis]] + getMarginAxis(node, axis);
-	  }
-
-	  function isDimDefined(node, axis) {
-	    return node.style[dim[axis]] !== undefined && node.style[dim[axis]] >= 0;
-	  }
-
-	  function isPosDefined(node, pos) {
-	    return node.style[pos] !== undefined;
-	  }
-
-	  function isMeasureDefined(node) {
-	    return node.style.measure !== undefined;
-	  }
-
-	  function getPosition(node, pos) {
-	    if (node.style[pos] !== undefined) {
-	      return node.style[pos];
-	    }
-	    return 0;
-	  }
-
-	  function boundAxis(node, axis, value) {
-	    var min = {
-	      'row': node.style.minWidth,
-	      'row-reverse': node.style.minWidth,
-	      'column': node.style.minHeight,
-	      'column-reverse': node.style.minHeight
-	    }[axis];
-
-	    var max = {
-	      'row': node.style.maxWidth,
-	      'row-reverse': node.style.maxWidth,
-	      'column': node.style.maxHeight,
-	      'column-reverse': node.style.maxHeight
-	    }[axis];
-
-	    var boundValue = value;
-	    if (max !== undefined && max >= 0 && boundValue > max) {
-	      boundValue = max;
-	    }
-	    if (min !== undefined && min >= 0 && boundValue < min) {
-	      boundValue = min;
-	    }
-	    return boundValue;
-	  }
-
-	  function fmaxf(a, b) {
-	    if (a > b) {
-	      return a;
-	    }
-	    return b;
-	  }
-
-	  // When the user specifically sets a value for width or height
-	  function setDimensionFromStyle(node, axis) {
-	    // The parent already computed us a width or height. We just skip it
-	    if (node.layout[dim[axis]] !== undefined) {
-	      return;
-	    }
-	    // We only run if there's a width or height defined
-	    if (!isDimDefined(node, axis)) {
-	      return;
-	    }
-
-	    // The dimensions can never be smaller than the padding and border
-	    node.layout[dim[axis]] = fmaxf(
-	      boundAxis(node, axis, node.style[dim[axis]]),
-	      getPaddingAndBorderAxis(node, axis)
-	    );
-	  }
-
-	  function setTrailingPosition(node, child, axis) {
-	    child.layout[trailing[axis]] = node.layout[dim[axis]] -
-	        child.layout[dim[axis]] - child.layout[pos[axis]];
-	  }
-
-	  // If both left and right are defined, then use left. Otherwise return
-	  // +left or -right depending on which is defined.
-	  function getRelativePosition(node, axis) {
-	    if (node.style[leading[axis]] !== undefined) {
-	      return getPosition(node, leading[axis]);
-	    }
-	    return -getPosition(node, trailing[axis]);
-	  }
-
-	  function layoutNodeImpl(node, parentMaxWidth, /*css_direction_t*/parentDirection) {
-	    var/*css_direction_t*/ direction = resolveDirection(node, parentDirection);
-	    var/*(c)!css_flex_direction_t*//*(java)!int*/ mainAxis = resolveAxis(getFlexDirection(node), direction);
-	    var/*(c)!css_flex_direction_t*//*(java)!int*/ crossAxis = getCrossFlexDirection(mainAxis, direction);
-	    var/*(c)!css_flex_direction_t*//*(java)!int*/ resolvedRowAxis = resolveAxis(CSS_FLEX_DIRECTION_ROW, direction);
-
-	    // Handle width and height style attributes
-	    setDimensionFromStyle(node, mainAxis);
-	    setDimensionFromStyle(node, crossAxis);
-
-	    // Set the resolved resolution in the node's layout
-	    node.layout.direction = direction;
-
-	    // The position is set by the parent, but we need to complete it with a
-	    // delta composed of the margin and left/top/right/bottom
-	    node.layout[leading[mainAxis]] += getLeadingMargin(node, mainAxis) +
-	      getRelativePosition(node, mainAxis);
-	    node.layout[trailing[mainAxis]] += getTrailingMargin(node, mainAxis) +
-	      getRelativePosition(node, mainAxis);
-	    node.layout[leading[crossAxis]] += getLeadingMargin(node, crossAxis) +
-	      getRelativePosition(node, crossAxis);
-	    node.layout[trailing[crossAxis]] += getTrailingMargin(node, crossAxis) +
-	      getRelativePosition(node, crossAxis);
-
-	    // Inline immutable values from the target node to avoid excessive method
-	    // invocations during the layout calculation.
-	    var/*int*/ childCount = node.children.length;
-	    var/*float*/ paddingAndBorderAxisResolvedRow = getPaddingAndBorderAxis(node, resolvedRowAxis);
-
-	    if (isMeasureDefined(node)) {
-	      var/*bool*/ isResolvedRowDimDefined = !isUndefined(node.layout[dim[resolvedRowAxis]]);
-
-	      var/*float*/ width = CSS_UNDEFINED;
-	      if (isDimDefined(node, resolvedRowAxis)) {
-	        width = node.style.width;
-	      } else if (isResolvedRowDimDefined) {
-	        width = node.layout[dim[resolvedRowAxis]];
-	      } else {
-	        width = parentMaxWidth -
-	          getMarginAxis(node, resolvedRowAxis);
-	      }
-	      width -= paddingAndBorderAxisResolvedRow;
-
-	      // We only need to give a dimension for the text if we haven't got any
-	      // for it computed yet. It can either be from the style attribute or because
-	      // the element is flexible.
-	      var/*bool*/ isRowUndefined = !isDimDefined(node, resolvedRowAxis) && !isResolvedRowDimDefined;
-	      var/*bool*/ isColumnUndefined = !isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) &&
-	        isUndefined(node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]]);
-
-	      // Let's not measure the text if we already know both dimensions
-	      if (isRowUndefined || isColumnUndefined) {
-	        var/*css_dim_t*/ measureDim = node.style.measure(
-	          /*(c)!node->context,*/
-	          /*(java)!layoutContext.measureOutput,*/
-	          width
-	        );
-	        if (isRowUndefined) {
-	          node.layout.width = measureDim.width +
-	            paddingAndBorderAxisResolvedRow;
-	        }
-	        if (isColumnUndefined) {
-	          node.layout.height = measureDim.height +
-	            getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN);
-	        }
-	      }
-	      if (childCount === 0) {
-	        return;
-	      }
-	    }
-
-	    var/*bool*/ isNodeFlexWrap = isFlexWrap(node);
-
-	    var/*css_justify_t*/ justifyContent = getJustifyContent(node);
-
-	    var/*float*/ leadingPaddingAndBorderMain = getLeadingPaddingAndBorder(node, mainAxis);
-	    var/*float*/ leadingPaddingAndBorderCross = getLeadingPaddingAndBorder(node, crossAxis);
-	    var/*float*/ paddingAndBorderAxisMain = getPaddingAndBorderAxis(node, mainAxis);
-	    var/*float*/ paddingAndBorderAxisCross = getPaddingAndBorderAxis(node, crossAxis);
-
-	    var/*bool*/ isMainDimDefined = !isUndefined(node.layout[dim[mainAxis]]);
-	    var/*bool*/ isCrossDimDefined = !isUndefined(node.layout[dim[crossAxis]]);
-	    var/*bool*/ isMainRowDirection = isRowDirection(mainAxis);
-
-	    var/*int*/ i;
-	    var/*int*/ ii;
-	    var/*css_node_t**/ child;
-	    var/*(c)!css_flex_direction_t*//*(java)!int*/ axis;
-
-	    var/*css_node_t**/ firstAbsoluteChild = null;
-	    var/*css_node_t**/ currentAbsoluteChild = null;
-
-	    var/*float*/ definedMainDim = CSS_UNDEFINED;
-	    if (isMainDimDefined) {
-	      definedMainDim = node.layout[dim[mainAxis]] - paddingAndBorderAxisMain;
-	    }
-
-	    // We want to execute the next two loops one per line with flex-wrap
-	    var/*int*/ startLine = 0;
-	    var/*int*/ endLine = 0;
-	    // var/*int*/ nextOffset = 0;
-	    var/*int*/ alreadyComputedNextLayout = 0;
-	    // We aggregate the total dimensions of the container in those two variables
-	    var/*float*/ linesCrossDim = 0;
-	    var/*float*/ linesMainDim = 0;
-	    var/*int*/ linesCount = 0;
-	    while (endLine < childCount) {
-	      // <Loop A> Layout non flexible children and count children by type
-
-	      // mainContentDim is accumulation of the dimensions and margin of all the
-	      // non flexible children. This will be used in order to either set the
-	      // dimensions of the node if none already exist, or to compute the
-	      // remaining space left for the flexible children.
-	      var/*float*/ mainContentDim = 0;
-
-	      // There are three kind of children, non flexible, flexible and absolute.
-	      // We need to know how many there are in order to distribute the space.
-	      var/*int*/ flexibleChildrenCount = 0;
-	      var/*float*/ totalFlexible = 0;
-	      var/*int*/ nonFlexibleChildrenCount = 0;
-
-	      // Use the line loop to position children in the main axis for as long
-	      // as they are using a simple stacking behaviour. Children that are
-	      // immediately stacked in the initial loop will not be touched again
-	      // in <Loop C>.
-	      var/*bool*/ isSimpleStackMain =
-	          (isMainDimDefined && justifyContent === CSS_JUSTIFY_FLEX_START) ||
-	          (!isMainDimDefined && justifyContent !== CSS_JUSTIFY_CENTER);
-	      var/*int*/ firstComplexMain = (isSimpleStackMain ? childCount : startLine);
-
-	      // Use the initial line loop to position children in the cross axis for
-	      // as long as they are relatively positioned with alignment STRETCH or
-	      // FLEX_START. Children that are immediately stacked in the initial loop
-	      // will not be touched again in <Loop D>.
-	      var/*bool*/ isSimpleStackCross = true;
-	      var/*int*/ firstComplexCross = childCount;
-
-	      var/*css_node_t**/ firstFlexChild = null;
-	      var/*css_node_t**/ currentFlexChild = null;
-
-	      var/*float*/ mainDim = leadingPaddingAndBorderMain;
-	      var/*float*/ crossDim = 0;
-
-	      var/*float*/ maxWidth;
-	      for (i = startLine; i < childCount; ++i) {
-	        child = node.children[i];
-	        child.lineIndex = linesCount;
-
-	        child.nextAbsoluteChild = null;
-	        child.nextFlexChild = null;
-
-	        var/*css_align_t*/ alignItem = getAlignItem(node, child);
-
-	        // Pre-fill cross axis dimensions when the child is using stretch before
-	        // we call the recursive layout pass
-	        if (alignItem === CSS_ALIGN_STRETCH &&
-	            getPositionType(child) === CSS_POSITION_RELATIVE &&
-	            isCrossDimDefined &&
-	            !isDimDefined(child, crossAxis)) {
-	          child.layout[dim[crossAxis]] = fmaxf(
-	            boundAxis(child, crossAxis, node.layout[dim[crossAxis]] -
-	              paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
-	            // You never want to go smaller than padding
-	            getPaddingAndBorderAxis(child, crossAxis)
-	          );
-	        } else if (getPositionType(child) === CSS_POSITION_ABSOLUTE) {
-	          // Store a private linked list of absolutely positioned children
-	          // so that we can efficiently traverse them later.
-	          if (firstAbsoluteChild === null) {
-	            firstAbsoluteChild = child;
-	          }
-	          if (currentAbsoluteChild !== null) {
-	            currentAbsoluteChild.nextAbsoluteChild = child;
-	          }
-	          currentAbsoluteChild = child;
-
-	          // Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both
-	          // left and right or top and bottom).
-	          for (ii = 0; ii < 2; ii++) {
-	            axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
-	            if (!isUndefined(node.layout[dim[axis]]) &&
-	                !isDimDefined(child, axis) &&
-	                isPosDefined(child, leading[axis]) &&
-	                isPosDefined(child, trailing[axis])) {
-	              child.layout[dim[axis]] = fmaxf(
-	                boundAxis(child, axis, node.layout[dim[axis]] -
-	                  getPaddingAndBorderAxis(node, axis) -
-	                  getMarginAxis(child, axis) -
-	                  getPosition(child, leading[axis]) -
-	                  getPosition(child, trailing[axis])),
-	                // You never want to go smaller than padding
-	                getPaddingAndBorderAxis(child, axis)
-	              );
-	            }
-	          }
-	        }
-
-	        var/*float*/ nextContentDim = 0;
-
-	        // It only makes sense to consider a child flexible if we have a computed
-	        // dimension for the node.
-	        if (isMainDimDefined && isFlex(child)) {
-	          flexibleChildrenCount++;
-	          totalFlexible += child.style.flex;
-
-	          // Store a private linked list of flexible children so that we can
-	          // efficiently traverse them later.
-	          if (firstFlexChild === null) {
-	            firstFlexChild = child;
-	          }
-	          if (currentFlexChild !== null) {
-	            currentFlexChild.nextFlexChild = child;
-	          }
-	          currentFlexChild = child;
-
-	          // Even if we don't know its exact size yet, we already know the padding,
-	          // border and margin. We'll use this partial information, which represents
-	          // the smallest possible size for the child, to compute the remaining
-	          // available space.
-	          nextContentDim = getPaddingAndBorderAxis(child, mainAxis) +
-	            getMarginAxis(child, mainAxis);
-
-	        } else {
-	          maxWidth = CSS_UNDEFINED;
-	          if (!isMainRowDirection) {
-	            if (isDimDefined(node, resolvedRowAxis)) {
-	              maxWidth = node.layout[dim[resolvedRowAxis]] -
-	                paddingAndBorderAxisResolvedRow;
-	            } else {
-	              maxWidth = parentMaxWidth -
-	                getMarginAxis(node, resolvedRowAxis) -
-	                paddingAndBorderAxisResolvedRow;
-	            }
-	          }
-
-	          // This is the main recursive call. We layout non flexible children.
-	          if (alreadyComputedNextLayout === 0) {
-	            layoutNode(/*(java)!layoutContext, */child, maxWidth, direction);
-	          }
-
-	          // Absolute positioned elements do not take part of the layout, so we
-	          // don't use them to compute mainContentDim
-	          if (getPositionType(child) === CSS_POSITION_RELATIVE) {
-	            nonFlexibleChildrenCount++;
-	            // At this point we know the final size and margin of the element.
-	            nextContentDim = getDimWithMargin(child, mainAxis);
-	          }
-	        }
-
-	        // The element we are about to add would make us go to the next line
-	        if (isNodeFlexWrap &&
-	            isMainDimDefined &&
-	            mainContentDim + nextContentDim > definedMainDim &&
-	            // If there's only one element, then it's bigger than the content
-	            // and needs its own line
-	            i !== startLine) {
-	          nonFlexibleChildrenCount--;
-	          alreadyComputedNextLayout = 1;
-	          break;
-	        }
-
-	        // Disable simple stacking in the main axis for the current line as
-	        // we found a non-trivial child. The remaining children will be laid out
-	        // in <Loop C>.
-	        if (isSimpleStackMain &&
-	            (getPositionType(child) !== CSS_POSITION_RELATIVE || isFlex(child))) {
-	          isSimpleStackMain = false;
-	          firstComplexMain = i;
-	        }
-
-	        // Disable simple stacking in the cross axis for the current line as
-	        // we found a non-trivial child. The remaining children will be laid out
-	        // in <Loop D>.
-	        if (isSimpleStackCross &&
-	            (getPositionType(child) !== CSS_POSITION_RELATIVE ||
-	                (alignItem !== CSS_ALIGN_STRETCH && alignItem !== CSS_ALIGN_FLEX_START) ||
-	                isUndefined(child.layout[dim[crossAxis]]))) {
-	          isSimpleStackCross = false;
-	          firstComplexCross = i;
-	        }
-
-	        if (isSimpleStackMain) {
-	          child.layout[pos[mainAxis]] += mainDim;
-	          if (isMainDimDefined) {
-	            setTrailingPosition(node, child, mainAxis);
-	          }
-
-	          mainDim += getDimWithMargin(child, mainAxis);
-	          crossDim = fmaxf(crossDim, boundAxis(child, crossAxis, getDimWithMargin(child, crossAxis)));
-	        }
-
-	        if (isSimpleStackCross) {
-	          child.layout[pos[crossAxis]] += linesCrossDim + leadingPaddingAndBorderCross;
-	          if (isCrossDimDefined) {
-	            setTrailingPosition(node, child, crossAxis);
-	          }
-	        }
-
-	        alreadyComputedNextLayout = 0;
-	        mainContentDim += nextContentDim;
-	        endLine = i + 1;
-	      }
-
-	      // <Loop B> Layout flexible children and allocate empty space
-
-	      // In order to position the elements in the main axis, we have two
-	      // controls. The space between the beginning and the first element
-	      // and the space between each two elements.
-	      var/*float*/ leadingMainDim = 0;
-	      var/*float*/ betweenMainDim = 0;
-
-	      // The remaining available space that needs to be allocated
-	      var/*float*/ remainingMainDim = 0;
-	      if (isMainDimDefined) {
-	        remainingMainDim = definedMainDim - mainContentDim;
-	      } else {
-	        remainingMainDim = fmaxf(mainContentDim, 0) - mainContentDim;
-	      }
-
-	      // If there are flexible children in the mix, they are going to fill the
-	      // remaining space
-	      if (flexibleChildrenCount !== 0) {
-	        var/*float*/ flexibleMainDim = remainingMainDim / totalFlexible;
-	        var/*float*/ baseMainDim;
-	        var/*float*/ boundMainDim;
-
-	        // If the flex share of remaining space doesn't meet min/max bounds,
-	        // remove this child from flex calculations.
-	        currentFlexChild = firstFlexChild;
-	        while (currentFlexChild !== null) {
-	          baseMainDim = flexibleMainDim * currentFlexChild.style.flex +
-	              getPaddingAndBorderAxis(currentFlexChild, mainAxis);
-	          boundMainDim = boundAxis(currentFlexChild, mainAxis, baseMainDim);
-
-	          if (baseMainDim !== boundMainDim) {
-	            remainingMainDim -= boundMainDim;
-	            totalFlexible -= currentFlexChild.style.flex;
-	          }
-
-	          currentFlexChild = currentFlexChild.nextFlexChild;
-	        }
-	        flexibleMainDim = remainingMainDim / totalFlexible;
-
-	        // The non flexible children can overflow the container, in this case
-	        // we should just assume that there is no space available.
-	        if (flexibleMainDim < 0) {
-	          flexibleMainDim = 0;
-	        }
-
-	        currentFlexChild = firstFlexChild;
-	        while (currentFlexChild !== null) {
-	          // At this point we know the final size of the element in the main
-	          // dimension
-	          currentFlexChild.layout[dim[mainAxis]] = boundAxis(currentFlexChild, mainAxis,
-	            flexibleMainDim * currentFlexChild.style.flex +
-	                getPaddingAndBorderAxis(currentFlexChild, mainAxis)
-	          );
-
-	          maxWidth = CSS_UNDEFINED;
-	          if (isDimDefined(node, resolvedRowAxis)) {
-	            maxWidth = node.layout[dim[resolvedRowAxis]] -
-	              paddingAndBorderAxisResolvedRow;
-	          } else if (!isMainRowDirection) {
-	            maxWidth = parentMaxWidth -
-	              getMarginAxis(node, resolvedRowAxis) -
-	              paddingAndBorderAxisResolvedRow;
-	          }
-
-	          // And we recursively call the layout algorithm for this child
-	          layoutNode(/*(java)!layoutContext, */currentFlexChild, maxWidth, direction);
-
-	          child = currentFlexChild;
-	          currentFlexChild = currentFlexChild.nextFlexChild;
-	          child.nextFlexChild = null;
-	        }
-
-	      // We use justifyContent to figure out how to allocate the remaining
-	      // space available
-	      } else if (justifyContent !== CSS_JUSTIFY_FLEX_START) {
-	        if (justifyContent === CSS_JUSTIFY_CENTER) {
-	          leadingMainDim = remainingMainDim / 2;
-	        } else if (justifyContent === CSS_JUSTIFY_FLEX_END) {
-	          leadingMainDim = remainingMainDim;
-	        } else if (justifyContent === CSS_JUSTIFY_SPACE_BETWEEN) {
-	          remainingMainDim = fmaxf(remainingMainDim, 0);
-	          if (flexibleChildrenCount + nonFlexibleChildrenCount - 1 !== 0) {
-	            betweenMainDim = remainingMainDim /
-	              (flexibleChildrenCount + nonFlexibleChildrenCount - 1);
-	          } else {
-	            betweenMainDim = 0;
-	          }
-	        } else if (justifyContent === CSS_JUSTIFY_SPACE_AROUND) {
-	          // Space on the edges is half of the space between elements
-	          betweenMainDim = remainingMainDim /
-	            (flexibleChildrenCount + nonFlexibleChildrenCount);
-	          leadingMainDim = betweenMainDim / 2;
-	        }
-	      }
-
-	      // <Loop C> Position elements in the main axis and compute dimensions
-
-	      // At this point, all the children have their dimensions set. We need to
-	      // find their position. In order to do that, we accumulate data in
-	      // variables that are also useful to compute the total dimensions of the
-	      // container!
-	      mainDim += leadingMainDim;
-
-	      for (i = firstComplexMain; i < endLine; ++i) {
-	        child = node.children[i];
-
-	        if (getPositionType(child) === CSS_POSITION_ABSOLUTE &&
-	            isPosDefined(child, leading[mainAxis])) {
-	          // In case the child is position absolute and has left/top being
-	          // defined, we override the position to whatever the user said
-	          // (and margin/border).
-	          child.layout[pos[mainAxis]] = getPosition(child, leading[mainAxis]) +
-	            getLeadingBorder(node, mainAxis) +
-	            getLeadingMargin(child, mainAxis);
-	        } else {
-	          // If the child is position absolute (without top/left) or relative,
-	          // we put it at the current accumulated offset.
-	          child.layout[pos[mainAxis]] += mainDim;
-
-	          // Define the trailing position accordingly.
-	          if (isMainDimDefined) {
-	            setTrailingPosition(node, child, mainAxis);
-	          }
-
-	          // Now that we placed the element, we need to update the variables
-	          // We only need to do that for relative elements. Absolute elements
-	          // do not take part in that phase.
-	          if (getPositionType(child) === CSS_POSITION_RELATIVE) {
-	            // The main dimension is the sum of all the elements dimension plus
-	            // the spacing.
-	            mainDim += betweenMainDim + getDimWithMargin(child, mainAxis);
-	            // The cross dimension is the max of the elements dimension since there
-	            // can only be one element in that cross dimension.
-	            crossDim = fmaxf(crossDim, boundAxis(child, crossAxis, getDimWithMargin(child, crossAxis)));
-	          }
-	        }
-	      }
-
-	      var/*float*/ containerCrossAxis = node.layout[dim[crossAxis]];
-	      if (!isCrossDimDefined) {
-	        containerCrossAxis = fmaxf(
-	          // For the cross dim, we add both sides at the end because the value
-	          // is aggregate via a max function. Intermediate negative values
-	          // can mess this computation otherwise
-	          boundAxis(node, crossAxis, crossDim + paddingAndBorderAxisCross),
-	          paddingAndBorderAxisCross
-	        );
-	      }
-
-	      // <Loop D> Position elements in the cross axis
-	      for (i = firstComplexCross; i < endLine; ++i) {
-	        child = node.children[i];
-
-	        if (getPositionType(child) === CSS_POSITION_ABSOLUTE &&
-	            isPosDefined(child, leading[crossAxis])) {
-	          // In case the child is absolutely positionned and has a
-	          // top/left/bottom/right being set, we override all the previously
-	          // computed positions to set it correctly.
-	          child.layout[pos[crossAxis]] = getPosition(child, leading[crossAxis]) +
-	            getLeadingBorder(node, crossAxis) +
-	            getLeadingMargin(child, crossAxis);
-
-	        } else {
-	          var/*float*/ leadingCrossDim = leadingPaddingAndBorderCross;
-
-	          // For a relative children, we're either using alignItems (parent) or
-	          // alignSelf (child) in order to determine the position in the cross axis
-	          if (getPositionType(child) === CSS_POSITION_RELATIVE) {
-	            /*eslint-disable */
-	            // This variable is intentionally re-defined as the code is transpiled to a block scope language
-	            var/*css_align_t*/ alignItem = getAlignItem(node, child);
-	            /*eslint-enable */
-	            if (alignItem === CSS_ALIGN_STRETCH) {
-	              // You can only stretch if the dimension has not already been set
-	              // previously.
-	              if (isUndefined(child.layout[dim[crossAxis]])) {
-	                child.layout[dim[crossAxis]] = fmaxf(
-	                  boundAxis(child, crossAxis, containerCrossAxis -
-	                    paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
-	                  // You never want to go smaller than padding
-	                  getPaddingAndBorderAxis(child, crossAxis)
-	                );
-	              }
-	            } else if (alignItem !== CSS_ALIGN_FLEX_START) {
-	              // The remaining space between the parent dimensions+padding and child
-	              // dimensions+margin.
-	              var/*float*/ remainingCrossDim = containerCrossAxis -
-	                paddingAndBorderAxisCross - getDimWithMargin(child, crossAxis);
-
-	              if (alignItem === CSS_ALIGN_CENTER) {
-	                leadingCrossDim += remainingCrossDim / 2;
-	              } else { // CSS_ALIGN_FLEX_END
-	                leadingCrossDim += remainingCrossDim;
-	              }
-	            }
-	          }
-
-	          // And we apply the position
-	          child.layout[pos[crossAxis]] += linesCrossDim + leadingCrossDim;
-
-	          // Define the trailing position accordingly.
-	          if (isCrossDimDefined) {
-	            setTrailingPosition(node, child, crossAxis);
-	          }
-	        }
-	      }
-
-	      linesCrossDim += crossDim;
-	      linesMainDim = fmaxf(linesMainDim, mainDim);
-	      linesCount += 1;
-	      startLine = endLine;
-	    }
-
-	    // <Loop E>
-	    //
-	    // Note(prenaux): More than one line, we need to layout the crossAxis
-	    // according to alignContent.
-	    //
-	    // Note that we could probably remove <Loop D> and handle the one line case
-	    // here too, but for the moment this is safer since it won't interfere with
-	    // previously working code.
-	    //
-	    // See specs:
-	    // http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#layout-algorithm
-	    // section 9.4
-	    //
-	    if (linesCount > 1 && isCrossDimDefined) {
-	      var/*float*/ nodeCrossAxisInnerSize = node.layout[dim[crossAxis]] -
-	          paddingAndBorderAxisCross;
-	      var/*float*/ remainingAlignContentDim = nodeCrossAxisInnerSize - linesCrossDim;
-
-	      var/*float*/ crossDimLead = 0;
-	      var/*float*/ currentLead = leadingPaddingAndBorderCross;
-
-	      var/*css_align_t*/ alignContent = getAlignContent(node);
-	      if (alignContent === CSS_ALIGN_FLEX_END) {
-	        currentLead += remainingAlignContentDim;
-	      } else if (alignContent === CSS_ALIGN_CENTER) {
-	        currentLead += remainingAlignContentDim / 2;
-	      } else if (alignContent === CSS_ALIGN_STRETCH) {
-	        if (nodeCrossAxisInnerSize > linesCrossDim) {
-	          crossDimLead = (remainingAlignContentDim / linesCount);
-	        }
-	      }
-
-	      var/*int*/ endIndex = 0;
-	      for (i = 0; i < linesCount; ++i) {
-	        var/*int*/ startIndex = endIndex;
-
-	        // compute the line's height and find the endIndex
-	        var/*float*/ lineHeight = 0;
-	        for (ii = startIndex; ii < childCount; ++ii) {
-	          child = node.children[ii];
-	          if (getPositionType(child) !== CSS_POSITION_RELATIVE) {
-	            continue;
-	          }
-	          if (child.lineIndex !== i) {
-	            break;
-	          }
-	          if (!isUndefined(child.layout[dim[crossAxis]])) {
-	            lineHeight = fmaxf(
-	              lineHeight,
-	              child.layout[dim[crossAxis]] + getMarginAxis(child, crossAxis)
-	            );
-	          }
-	        }
-	        endIndex = ii;
-	        lineHeight += crossDimLead;
-
-	        for (ii = startIndex; ii < endIndex; ++ii) {
-	          child = node.children[ii];
-	          if (getPositionType(child) !== CSS_POSITION_RELATIVE) {
-	            continue;
-	          }
-
-	          var/*css_align_t*/ alignContentAlignItem = getAlignItem(node, child);
-	          if (alignContentAlignItem === CSS_ALIGN_FLEX_START) {
-	            child.layout[pos[crossAxis]] = currentLead + getLeadingMargin(child, crossAxis);
-	          } else if (alignContentAlignItem === CSS_ALIGN_FLEX_END) {
-	            child.layout[pos[crossAxis]] = currentLead + lineHeight - getTrailingMargin(child, crossAxis) - child.layout[dim[crossAxis]];
-	          } else if (alignContentAlignItem === CSS_ALIGN_CENTER) {
-	            var/*float*/ childHeight = child.layout[dim[crossAxis]];
-	            child.layout[pos[crossAxis]] = currentLead + (lineHeight - childHeight) / 2;
-	          } else if (alignContentAlignItem === CSS_ALIGN_STRETCH) {
-	            child.layout[pos[crossAxis]] = currentLead + getLeadingMargin(child, crossAxis);
-	            // TODO(prenaux): Correctly set the height of items with undefined
-	            //                (auto) crossAxis dimension.
-	          }
-	        }
-
-	        currentLead += lineHeight;
-	      }
-	    }
-
-	    var/*bool*/ needsMainTrailingPos = false;
-	    var/*bool*/ needsCrossTrailingPos = false;
-
-	    // If the user didn't specify a width or height, and it has not been set
-	    // by the container, then we set it via the children.
-	    if (!isMainDimDefined) {
-	      node.layout[dim[mainAxis]] = fmaxf(
-	        // We're missing the last padding at this point to get the final
-	        // dimension
-	        boundAxis(node, mainAxis, linesMainDim + getTrailingPaddingAndBorder(node, mainAxis)),
-	        // We can never assign a width smaller than the padding and borders
-	        paddingAndBorderAxisMain
-	      );
-
-	      if (mainAxis === CSS_FLEX_DIRECTION_ROW_REVERSE ||
-	          mainAxis === CSS_FLEX_DIRECTION_COLUMN_REVERSE) {
-	        needsMainTrailingPos = true;
-	      }
-	    }
-
-	    if (!isCrossDimDefined) {
-	      node.layout[dim[crossAxis]] = fmaxf(
-	        // For the cross dim, we add both sides at the end because the value
-	        // is aggregate via a max function. Intermediate negative values
-	        // can mess this computation otherwise
-	        boundAxis(node, crossAxis, linesCrossDim + paddingAndBorderAxisCross),
-	        paddingAndBorderAxisCross
-	      );
-
-	      if (crossAxis === CSS_FLEX_DIRECTION_ROW_REVERSE ||
-	          crossAxis === CSS_FLEX_DIRECTION_COLUMN_REVERSE) {
-	        needsCrossTrailingPos = true;
-	      }
-	    }
-
-	    // <Loop F> Set trailing position if necessary
-	    if (needsMainTrailingPos || needsCrossTrailingPos) {
-	      for (i = 0; i < childCount; ++i) {
-	        child = node.children[i];
-
-	        if (needsMainTrailingPos) {
-	          setTrailingPosition(node, child, mainAxis);
-	        }
-
-	        if (needsCrossTrailingPos) {
-	          setTrailingPosition(node, child, crossAxis);
-	        }
-	      }
-	    }
-
-	    // <Loop G> Calculate dimensions for absolutely positioned elements
-	    currentAbsoluteChild = firstAbsoluteChild;
-	    while (currentAbsoluteChild !== null) {
-	      // Pre-fill dimensions when using absolute position and both offsets for
-	      // the axis are defined (either both left and right or top and bottom).
-	      for (ii = 0; ii < 2; ii++) {
-	        axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
-
-	        if (!isUndefined(node.layout[dim[axis]]) &&
-	            !isDimDefined(currentAbsoluteChild, axis) &&
-	            isPosDefined(currentAbsoluteChild, leading[axis]) &&
-	            isPosDefined(currentAbsoluteChild, trailing[axis])) {
-	          currentAbsoluteChild.layout[dim[axis]] = fmaxf(
-	            boundAxis(currentAbsoluteChild, axis, node.layout[dim[axis]] -
-	              getBorderAxis(node, axis) -
-	              getMarginAxis(currentAbsoluteChild, axis) -
-	              getPosition(currentAbsoluteChild, leading[axis]) -
-	              getPosition(currentAbsoluteChild, trailing[axis])
-	            ),
-	            // You never want to go smaller than padding
-	            getPaddingAndBorderAxis(currentAbsoluteChild, axis)
-	          );
-	        }
-
-	        if (isPosDefined(currentAbsoluteChild, trailing[axis]) &&
-	            !isPosDefined(currentAbsoluteChild, leading[axis])) {
-	          currentAbsoluteChild.layout[leading[axis]] =
-	            node.layout[dim[axis]] -
-	            currentAbsoluteChild.layout[dim[axis]] -
-	            getPosition(currentAbsoluteChild, trailing[axis]);
-	        }
-	      }
-
-	      child = currentAbsoluteChild;
-	      currentAbsoluteChild = currentAbsoluteChild.nextAbsoluteChild;
-	      child.nextAbsoluteChild = null;
-	    }
-	  }
-
-	  function layoutNode(node, parentMaxWidth, parentDirection) {
-	    node.shouldUpdate = true;
-
-	    var direction = node.style.direction || CSS_DIRECTION_LTR;
-	    var skipLayout =
-	      !node.isDirty &&
-	      node.lastLayout &&
-	      node.lastLayout.requestedHeight === node.layout.height &&
-	      node.lastLayout.requestedWidth === node.layout.width &&
-	      node.lastLayout.parentMaxWidth === parentMaxWidth &&
-	      node.lastLayout.direction === direction;
-
-	    if (skipLayout) {
-	      node.layout.width = node.lastLayout.width;
-	      node.layout.height = node.lastLayout.height;
-	      node.layout.top = node.lastLayout.top;
-	      node.layout.left = node.lastLayout.left;
-	    } else {
-	      if (!node.lastLayout) {
-	        node.lastLayout = {};
-	      }
-
-	      node.lastLayout.requestedWidth = node.layout.width;
-	      node.lastLayout.requestedHeight = node.layout.height;
-	      node.lastLayout.parentMaxWidth = parentMaxWidth;
-	      node.lastLayout.direction = direction;
-
-	      // Reset child layouts
-	      node.children.forEach(function(child) {
-	        child.layout.width = undefined;
-	        child.layout.height = undefined;
-	        child.layout.top = 0;
-	        child.layout.left = 0;
-	      });
-
-	      layoutNodeImpl(node, parentMaxWidth, parentDirection);
-
-	      node.lastLayout.width = node.layout.width;
-	      node.lastLayout.height = node.layout.height;
-	      node.lastLayout.top = node.layout.top;
-	      node.lastLayout.left = node.layout.left;
-	    }
-	  }
-
-	  return {
-	    layoutNodeImpl: layoutNodeImpl,
-	    computeLayout: layoutNode,
-	    fillNodes: fillNodes
-	  };
-	})();
-
-	// This module export is only used for the purposes of unit testing this file. When
-	// the library is packaged this file is included within css-layout.js which forms
-	// the public API.
-	{
-	  module.exports = computeLayout;
-	}
-
-
-	  return function(node) {
-	    /*eslint-disable */
-	    // disabling ESLint because this code relies on the above include
-	    computeLayout.fillNodes(node);
-	    computeLayout.computeLayout(node);
-	    /*eslint-enable */
-	  };
-	})); 
-} (cssLayout));
-
-var cssLayoutExports = cssLayout.exports;
-
-function _interopDefault$1(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var React=_interopDefault$1(React$1),reactDom=require$$0,computeLayout=_interopDefault$1(cssLayoutExports);function _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),n.forEach(function(t){_defineProperty(e,t,r[t]);});}return e}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n);}}function _createClass(e,t,r){return t&&_defineProperties(e.prototype,t),e}function _typeof2(e){return (_typeof2="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _typeof(e){return (_typeof="function"==typeof Symbol&&"symbol"===_typeof2(Symbol.iterator)?function(e){return _typeof2(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":_typeof2(e)})(e)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _possibleConstructorReturn(e,t){return !t||"object"!==_typeof(t)&&"function"!=typeof t?_assertThisInitialized(e):t}function _getPrototypeOf(e){return (_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function _setPrototypeOf(e,t){return (_setPrototypeOf=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&_setPrototypeOf(e,t);}var Flexbox=function(e){function t(){var e;return _classCallCheck(this,t),(e=_possibleConstructorReturn(this,_getPrototypeOf(t).call(this))).childRefs=[],e.shouldUpdateAgain=!1,e.state={layout:{children:[]}},e}return _inherits(t,React.Component),_createClass(t,[{key:"componentDidMount",value:function(){this.forceUpdate();}},{key:"componentDidUpdate",value:function(){if(this.shouldUpdateAgain=!this.shouldUpdateAgain,this.shouldUpdateAgain){var e=this.props,t=e.children,r=e.onLayout,n=e.style,o=this.getChildrenMeasured(this.childRefs),i=this.getFlattenedChildren(t),u=this.getChildrenAsMergedStyles(i,o),c=this.getComputedLayout(u,n);r(c),this.setState({layout:c});}}},{key:"getFlattenedChildren",value:function(e){return e.filter(function(e){return e}).filter(function(e){return "string"!=typeof e}).map(function(e){return Array.isArray(e)?e:[e]}).reduce(function(e,t){return e.concat(t)},[])}},{key:"getChildrenAsMergedStyles",value:function(e,t){return t.map(function(t,r){var n=e[r]||{},o=n&&n.props?n.props.style:{};return {style:_objectSpread({},o,{height:t.height||o.height,width:t.width||o.width})}})}},{key:"getChildrenMeasured",value:function(e){return e&&e.length?e.map(function(e){return e.getBBox?e.getBBox():reactDom.findDOMNode(e).getBBox()}):[]}},{key:"getComputedLayout",value:function(e,t){var r={children:Array.from(e||[]),style:_objectSpread({},t)};return computeLayout(r),r}},{key:"getLayoutChildren",value:function(e){return e&&e.children&&e.children.length?e.children:[]}},{key:"getLayoutAttributesForChild",value:function(e,t){if(t&&t.layout){var r=t.layout,n=r.left,o=r.top;switch(e.type){case"circle":var i=e.props.r||0;return {cx:n+i,cy:o+i};case"ellipse":return {cx:n+(e.props.rx||0),cy:o+(e.props.ry||0)};case"g":case"path":case"polygon":case"polyline":return {transform:"translate(".concat(n," ").concat(o,")")};default:return {x:n,y:o}}}return {}}},{key:"render",value:function(){var e=this,t=this.props,r=t.children,n=t.className,o=t.x,i=t.y,u=this.state.layout;this.childRefs=[];var c=this.getFlattenedChildren(r),a=this.getLayoutChildren(u);return React.createElement("g",{className:n,transform:"translate(".concat(o," ").concat(i,")")},c.map(function(t,r){return React.cloneElement(t,_objectSpread({},t.props,e.getLayoutAttributesForChild(t,a[r]),{key:"child-".concat(r),ref:function(t){return t?e.childRefs.push(t):null}}))}))}}]),t}();Flexbox.defaultProps={children:[],className:null,onLayout:function(){},style:{},x:0,y:0},bundle.exports=Flexbox;
-
-var bundleExports = bundle.exports;
-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, 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((_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);
+    var _a, _b;
+    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; props.textsPlaceHolderFlexStyle; props.textsPlaceHolderFlexboxPosition; props.textsPlaceHolderClassName; var 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, onMouseMove = props.onMouseMove, onMouseLeave = props.onMouseLeave, onMouseUp = props.onMouseUp, onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated;
+    var _c = React.useState(), selectedPort = _c[0], setSelectedPort = _c[1];
+    var _d = React.useState(), hoveredPort = _d[0], setHoveredPort = _d[1];
+    var _e = React.useState([]), ports = _e[0], setPorts = _e[1];
+    var _f = React.useState(false), someElementLinkStarted = _f[0], setSomeElementLinkStarted = _f[1];
+    var _g = React.useState(), potentialPortPosition = _g[0], setPotentialPortPosition = _g[1];
+    var _paperEventEmitterContext = React.useContext(paperEventEmitterContext);
+    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$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; });
+    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 () {
             off === null || off === void 0 ? void 0 : off();
         };
-    }, []);
+    }, [props.onManuallyTriggerRenderPort]);
     //Update portsRef when ports changed
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         portsRef.current = ports;
     }, [ports]);
-    React$1.useEffect(function () {
+    React.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));
+        console.info('Rendering Element ' + ((_a = texts === null || texts === void 0 ? void 0 : texts[0]) === null || _a === void 0 ? void 0 : _a.content) || id);
     });
     //Listen a new port is created, after add new port to ports state
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         console.info('Ports changed', props.ports);
         setPorts(function (prev) {
             var _a, _b;
@@ -9203,14 +8081,14 @@ var Element = function (props) {
                     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();
+                    newPortState.ref = React.createRef();
                 }
                 return newPortState;
             })) !== null && _b !== void 0 ? _b : [];
         });
     }, [props.ports]);
     //Listen trigger of Delete key, handle delete port is selected
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         var listener = _paperEventEmitterContext.onCommandDeleteSelectedPort(function () {
             if (selectedPort) {
                 setPorts(function (prev) { return prev.filter(function (p) { return p.id !== selectedPort.id; }); });
@@ -9221,7 +8099,7 @@ var Element = function (props) {
             listener.off();
         };
     }, [selectedPort]);
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         //Listener onMouseDown event on #paper-container
         var eventListener = _paperEventEmitterContext.onPaperClicked(function (ev) {
             setSelectedPort(undefined);
@@ -9245,7 +8123,7 @@ var Element = function (props) {
         };
     }, [onPortMoved]);
     //Listen creating element link started, ended.
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         var elementStartedListener = _paperEventEmitterContext.onElementLinkStarted(function (tempLink) {
             elementLinkStarted.current = tempLink;
             setSomeElementLinkStarted(true);
@@ -9262,7 +8140,7 @@ var Element = function (props) {
         };
     }, []);
     //Listen another port is selected
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         var portSelectedListener = _paperEventEmitterContext.onPortSelected(function (port, elementId) {
             if (elementId !== id) {
                 setSelectedPort(undefined);
@@ -9273,7 +8151,7 @@ var Element = function (props) {
         };
     }, []);
     //Listen text is selected
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         var textSelectedListener = _paperEventEmitterContext.onTextSelected(function (text) {
             setSelectedPort(undefined);
         });
@@ -9282,7 +8160,7 @@ var Element = function (props) {
         };
     }, []);
     //Listen another element is selected
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         var portSelectedListener = _paperEventEmitterContext.onElementSelected(function (element) {
             setSelectedPort(undefined);
         });
@@ -9290,7 +8168,7 @@ var Element = function (props) {
             portSelectedListener.off();
         };
     }, []);
-    var handleSelectedPort = React$1.useCallback(function (portId, e) {
+    var handleSelectedPort = React.useCallback(function (portId, e) {
         e.stopPropagation();
         var port = portsRef.current.find(function (p) { return p.id === portId; });
         if (!port)
@@ -9298,29 +8176,6 @@ var Element = function (props) {
         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];
-        var point = Flatten$1.point(position.x, position.y);
-        var segment = Flatten$1.segment(Flatten$1.point(beginPosition.x, beginPosition.y), Flatten$1.point(endPosition.x, endPosition.y));
-        var _a = point.distanceTo(segment); _a[0]; var segmentFromPointToSegment = _a[1];
-        return {
-            x: segmentFromPointToSegment.pe.x,
-            y: segmentFromPointToSegment.pe.y
-        };
-    };
-    //From 1 point find another point on the line segment so that the distance between 2 points is shortest.
-    var findNearestProjectedPoint = function (position, linePositions) {
-        var possiblePoints = linePositions.map(function (p) { return findNearestPointOnSegment(position, p); });
-        var nearestPoint = findNearestPosition(possiblePoints, position);
-        return nearestPoint;
-    };
-    //Check if a point is inside a polygon
-    var checkPointContainsPolygon = function (position, polygonPoints) {
-        var polygon = new Flatten$1.Polygon();
-        polygon.addFace(polygonPoints.map(function (p) { return Flatten$1.point(p.x, p.y); }));
-        return polygon.contains(Flatten$1.point(position.x, position.y));
-    };
     //Normalize a point so that it can lie exactly on an area
     var normalizePortPositionOnMoveableAreas = function (moveableAreas, position) {
         var lines = moveableAreas.filter(function (area) { return area.length === 2; });
@@ -9355,7 +8210,7 @@ var Element = function (props) {
         }
         return coordinates;
     };
-    var getSlideRailSVG = React$1.useCallback(function (portSlideRailSVGClassName) {
+    var getSlideRailSVG = React.useCallback(function (portSlideRailSVGClassName) {
         var _a;
         var slideRailSVG = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".".concat(portSlideRailSVGClassName));
         return slideRailSVG;
@@ -9420,7 +8275,7 @@ var Element = function (props) {
         }
     };
     //Handle when mouse down on port
-    var handlePortMouseDown = React$1.useCallback(function (portId, e) {
+    var handlePortMouseDown = React.useCallback(function (portId, e) {
         e.stopPropagation();
         var port = portsRef.current.find(function (p) { return p.id === portId; });
         if (!port)
@@ -9429,7 +8284,7 @@ var Element = function (props) {
         onPortMouseDown === null || onPortMouseDown === void 0 ? void 0 : onPortMouseDown(e, port, id);
     }, [_paperEventEmitterContext]);
     //Handle when mouse up on port
-    var handlePortMouseUp = React$1.useCallback(function (portId, e) {
+    var handlePortMouseUp = React.useCallback(function (portId, e) {
         e.stopPropagation();
         var port = portsRef.current.find(function (p) { return p.id === portId; });
         if (!port)
@@ -9442,7 +8297,7 @@ var Element = function (props) {
         }
     }, [_paperEventEmitterContext, potentialPortPosition]);
     //Update state when label of port is moved
-    var handlePortLabelMoved = React$1.useCallback(function (offsetX, offsetY, portId) {
+    var handlePortLabelMoved = React.useCallback(function (offsetX, offsetY, portId) {
         setPorts(function (prevPorts) {
             return prevPorts.map(function (p) {
                 if (p.id === portId && p.label) {
@@ -9457,7 +8312,7 @@ var Element = function (props) {
         });
     }, []);
     //Update state when label of port is resized
-    var handlePortLabelResized = React$1.useCallback(function (width, height, portId) {
+    var handlePortLabelResized = React.useCallback(function (width, height, portId) {
         setPorts(function (prevPorts) {
             return prevPorts.map(function (p) {
                 if (p.id === portId && p.label) {
@@ -9471,7 +8326,7 @@ var Element = function (props) {
         });
     }, []);
     //Update state when label of port is changed content
-    var handlePortLabelContentChanged = React$1.useCallback(function (ev, newValue, portId) {
+    var handlePortLabelContentChanged = React.useCallback(function (ev, newValue, portId) {
         setPorts(function (prevPorts) {
             return prevPorts.map(function (p) {
                 if (p.id === portId && p.label) {
@@ -9483,6 +8338,7 @@ var Element = function (props) {
     }, []);
     function handleElementMouseMove(ev) {
         //ev.stopPropagation(); //Can't use stopPropagation here, because do not create tempLink
+        onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(ev, id);
         if (someElementLinkStarted && elementRef.current) {
             //If an element link is being created, calculate the potential port position when the mouse moves over the element.
             if (hoveredPort) {
@@ -9517,12 +8373,14 @@ var Element = function (props) {
     }
     function handleElementMouseLeave(ev) {
         ev.stopPropagation();
+        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(ev, id);
         if (someElementLinkStarted) { //If an element link is being created, clear the placeholder when the mouse leaves the element.
             setPotentialPortPosition(undefined);
         }
     }
     var handleElementMouseUp = function (ev) {
         ev.stopPropagation();
+        onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(ev, id);
         //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 });
@@ -9531,7 +8389,7 @@ var Element = function (props) {
         }
     };
     //Handle when mouse move on port
-    var handlePortMouseMove = React$1.useCallback(function (portId) {
+    var handlePortMouseMove = React.useCallback(function (portId) {
         if (someElementLinkStarted) {
             var port = portsRef.current.find(function (p) { return p.id === portId; });
             if (!port)
@@ -9540,12 +8398,12 @@ var Element = function (props) {
         }
     }, [someElementLinkStarted]);
     //Handle when mouse leave on port
-    var handlePortMouseLeave = React$1.useCallback(function () {
+    var handlePortMouseLeave = React.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) {
+    var rotatePort = React.useCallback(function (x, y) {
         // console.info('calculating port rotation', x, y)
         if (!portSlideRailSVGClassName)
             return 0;
@@ -9585,7 +8443,7 @@ var Element = function (props) {
         }
         return rotationAngle;
     }, [portSlideRailSVGClassName, portDirection, getSlideRailSVG]);
-    var renderedShape = React$1.useMemo(function () {
+    var renderedShape = React.useMemo(function () {
         if (renderShape)
             return renderShape(props);
         return null;
@@ -9593,7 +8451,7 @@ var Element = function (props) {
     //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
-    React$1.useLayoutEffect(function () {
+    React.useLayoutEffect(function () {
         if (elementRef.current) {
             setPorts(function (prev) { return __spreadArray([], prev, true); });
         }
@@ -9601,7 +8459,7 @@ var Element = function (props) {
     //use selection frame
     useSelectionFrame({
         container: container,
-        targetSVGElement: ((_b = selectedPort === null || selectedPort === void 0 ? void 0 : selectedPort.ref) === null || _b === void 0 ? void 0 : _b.current) || undefined,
+        targetSVGElement: ((_a = selectedPort === null || selectedPort === void 0 ? void 0 : selectedPort.ref) === null || _a === void 0 ? void 0 : _a.current) || undefined,
         resizability: {
             enabled: false,
             keepRatio: false
@@ -9613,34 +8471,36 @@ var Element = function (props) {
     });
     useSelectionFrame({
         container: container,
-        targetSVGElement: ((_c = hoveredPort === null || hoveredPort === void 0 ? void 0 : hoveredPort.ref) === null || _c === void 0 ? void 0 : _c.current) || undefined,
+        targetSVGElement: ((_b = hoveredPort === null || hoveredPort === void 0 ? void 0 : hoveredPort.ref) === null || _b === void 0 ? void 0 : _b.current) || undefined,
         resizability: {
             enabled: false,
             keepRatio: false
         },
     });
-    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; } },
+    return (React.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 :
+            ? React.createElement("svg", { x: potentialPortPosition.x, y: potentialPortPosition.y }, portPlaceholderShape)
+            : React.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, _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, 
+            var _a, _b, _c, _d, _e, _f;
+            return React.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: handlePortLabelMoved, onPortLabelResized: handlePortLabelResized, onPortLabelContentChanged: handlePortLabelContentChanged, onSelected: handleSelectedPort, onMouseDown: handlePortMouseDown, onMouseUp: handlePortMouseUp, onMouseMove: handlePortMouseMove, 
                 // onMouseEnter={() => {
                 //     if (someElementLinkStarted) setHoveredPort(p)
                 // }}
-                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) {
+                onMouseLeave: handlePortMouseLeave, 
+                // onManuallyTriggerRenderHandler={p.manuallyTriggerRenderHandler?.bind(p)}
+                renderShape: p.renderShape });
+        }), 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(id, t.id, newContent); } });
-        })),
+            return React.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, editable: t.editable, 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 Element$1 = React.memo(Element);
 
 var createRect = function (x, y, width, height, strokeWidth, transformOrigin, transform) {
     var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
@@ -9658,9 +8518,9 @@ var createRect = function (x, y, width, height, strokeWidth, transformOrigin, tr
 };
 function BBoxDebugger(_a) {
     var elementSVG = _a.elementSVG;
-    var _b = React$1.useState(false), isTurnOn = _b[0], setIsTurnOn = _b[1];
-    var displayedBBoxDebug = React$1.useRef([]);
-    React$1.useEffect(function () {
+    var _b = React.useState(false), isTurnOn = _b[0], setIsTurnOn = _b[1];
+    var displayedBBoxDebug = React.useRef([]);
+    React.useEffect(function () {
         var keyPress = function (ev) {
             if (ev.ctrlKey && ev.key === 'b') {
                 setIsTurnOn(function (prev) { return !prev; });
@@ -9740,7 +8600,7 @@ function BBoxDebugger(_a) {
         }, 1000);
         return intervalId;
     };
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         if (!isTurnOn || !elementSVG)
             return;
         var listChildrenGroupByLevel = getListChildrenAndGroupSameLevel(elementSVG);
@@ -9752,12 +8612,12 @@ function BBoxDebugger(_a) {
             clearBBoxDebugger(displayedBBoxDebug.current);
         };
     }, [isTurnOn, elementSVG]);
-    return (React$1.createElement("div", { style: {
+    return (React.createElement("div", { style: {
             position: 'fixed',
             top: 20,
             right: 20
         } },
-        React$1.createElement("div", { style: {
+        React.createElement("div", { style: {
                 backgroundColor: 'white',
                 boxShadow: '0px 1px 4px 1px',
                 borderRadius: 4,
@@ -9781,9 +8641,9 @@ var createDebuggerPoint = function (cx, cy) {
 };
 var LinkDebugger = function (_a) {
     var links = _a.links, svgContainer = _a.svgContainer;
-    var _b = React$1.useState(false), isTurnOn = _b[0], setIsTurnOn = _b[1];
-    var displayedDebuggerPoint = React$1.useRef([]);
-    React$1.useEffect(function () {
+    var _b = React.useState(false), isTurnOn = _b[0], setIsTurnOn = _b[1];
+    var displayedDebuggerPoint = React.useRef([]);
+    React.useEffect(function () {
         var keyPress = function (ev) {
             if (ev.ctrlKey && ev.key === 'l') {
                 setIsTurnOn(function (prev) { return !prev; });
@@ -9800,7 +8660,7 @@ var LinkDebugger = function (_a) {
             ele === null || ele === void 0 ? void 0 : ele.remove();
         }
     };
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         if (isTurnOn) {
             links.forEach(function (link) {
                 var _a;
@@ -9815,13 +8675,13 @@ var LinkDebugger = function (_a) {
             clearDebuggerPoint();
         };
     }, [isTurnOn, links]);
-    return (React$1.createElement("div", null));
+    return (React.createElement("div", null));
 };
 
 function useKeyboardCommands(_a) {
     var element = _a.element;
-    var _b = React$1.useContext(paperEventEmitterContext), emitCommandDeleteSelectedElement = _b.emitCommandDeleteSelectedElement, emitCommandDeleteSelectedLink = _b.emitCommandDeleteSelectedLink, emitCommandDeleteSelectedPort = _b.emitCommandDeleteSelectedPort, emitCommandDeleteSelectedText = _b.emitCommandDeleteSelectedText;
-    React$1.useEffect(function () {
+    var _b = React.useContext(paperEventEmitterContext), emitCommandDeleteSelectedElement = _b.emitCommandDeleteSelectedElement, emitCommandDeleteSelectedLink = _b.emitCommandDeleteSelectedLink, emitCommandDeleteSelectedPort = _b.emitCommandDeleteSelectedPort, emitCommandDeleteSelectedText = _b.emitCommandDeleteSelectedText;
+    React.useEffect(function () {
         var callback = function (ev) {
             var keyboardEv = ev;
             if (keyboardEv.key === "Delete") {
@@ -9870,27 +8730,44 @@ function convertElementsToTree(elements) {
     return parsedElementsInTree;
 }
 var Paper = function (props) {
-    var _a;
-    var _b = React$1.useState(props.elements), elements = _b[0], setElements = _b[1];
-    var _c = React$1.useState([]), elementsInTree = _c[0], setElementsInTree = _c[1];
-    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(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 _a = React.useState([]), elements = _a[0], setElements = _a[1];
+    var _b = React.useState([]), elementsInTree = _b[0], setElementsInTree = _b[1];
+    var _c = React.useState(), selectedElement = _c[0], setSelectedElement = _c[1];
+    var _d = React.useState([]), links = _d[0], setLinks = _d[1];
+    var _e = React.useState(), selectedLink = _e[0], setSelectedLink = _e[1];
+    var _f = React.useState(null), tempLink = _f[0], setTempLink = _f[1];
+    var _g = React.useState([]), texts = _g[0], setTexts = _g[1];
+    var _h = React.useState(), selectedText = _h[0], setSelectedText = _h[1];
+    var _j = React.useState(null), selectedElementSVG = _j[0], setSelectedElementSVG = _j[1];
+    var _k = React.useState(false), mouseDownedOnPaper = _k[0], setMouseDownedOnPaper = _k[1];
+    var paperEventEmitter = React.useContext(paperEventEmitterContext);
+    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 size = props.size;
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         console.log('Render Paper');
     });
+    React.useEffect(function () {
+        setElements(props.elements);
+    }, [props.elements]);
+    React.useEffect(function () {
+        setLinks(props.links || []);
+    }, [props.links]);
+    React.useEffect(function () {
+        setTexts(props.texts);
+    }, [props.texts]);
+    React.useEffect(function () {
+        var off = props.onManuallyTriggerRenderElement(function (elementId) {
+            console.log('onManuallyTriggerRenderElement');
+            setElements(function (prev) { return __spreadArray([], prev, true); });
+        });
+        return function () {
+            off();
+        };
+    }, [props.onManuallyTriggerRenderElement]);
     //Cache elements to avoid re-render when elements changed
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         elementsRef.current = elements;
     }, [elements]);
     useKeyboardCommands({
@@ -9901,11 +8778,11 @@ var Paper = function (props) {
         setElementsInTree(parsedElementsInTree);
     };
     //Cache tempLink to avoid re-render when tempLink changed
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         tempLinkRef.current = tempLink;
     }, [tempLink]);
     //Listen text is selected
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         var textSelectedListener = paperEventEmitter.onTextSelected(function (text) {
             var _a;
             setSelectedElement(undefined);
@@ -9919,7 +8796,7 @@ var Paper = function (props) {
         };
     }, []);
     //Listen port is selected
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         var portSelectedListener = paperEventEmitter.onPortSelected(function (port, elementId) {
             var _a;
             setSelectedElement(undefined);
@@ -9935,11 +8812,12 @@ var Paper = function (props) {
             portSelectedListener.off();
         };
     }, []);
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         //Listen parent of elements changed, then update elements tree
         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();
             });
         });
@@ -9963,7 +8841,7 @@ var Paper = function (props) {
         };
     }, []);
     //Update elements tree when length of elements change
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         updateElementsTree();
     }, [elements]);
     //Get all child elements of the deleted element
@@ -9977,7 +8855,7 @@ var Paper = function (props) {
         return __spreadArray(__spreadArray([], childElms, true), childOfChildElements, true);
     };
     //Listen command delete selected for element
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedElement(function () {
             if (selectedElement) {
@@ -9998,7 +8876,7 @@ var Paper = function (props) {
         };
     }, [selectedElement]);
     //Listen command delete selected for link
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedLink(function () {
             if (selectedLink) {
@@ -10015,7 +8893,7 @@ var Paper = function (props) {
         };
     }, [selectedLink]);
     //Listen command delete selected for Text
-    React$1.useEffect(function () {
+    React.useEffect(function () {
         var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedText(function () {
             if (selectedText) {
@@ -10032,7 +8910,7 @@ var Paper = function (props) {
         };
     }, [selectedText]);
     //Automatically add points on the link so that the link does not cross elements, default maximum 10 points
-    var automationAddPointsToLink = React$1.useCallback(function (eleLink, limitPoint) {
+    var automationAddPointsToLink = React.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 = {
@@ -10127,7 +9005,7 @@ var Paper = function (props) {
             y: ev.clientY
         });
     };
-    var handlePathChange = React$1.useCallback(function (path, id) {
+    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; });
@@ -10135,7 +9013,7 @@ var Paper = function (props) {
             return __spreadArray([], prevLinks, true);
         });
     }, []);
-    var handlePortMoved = React$1.useCallback(function (port, elementId, oldPosition, newPosition) {
+    var handlePortMoved = React.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
@@ -10167,23 +9045,27 @@ var Paper = function (props) {
         }
     }, [props.onPortMoved]);
     //Handle creating a new element link
-    var handlePortMouseDown = React$1.useCallback(function (ev, port, elementId) {
+    var handlePortMouseDown = React.useCallback(function (ev, port, elementId) {
+        var _a;
         ev.stopPropagation();
-        //Return if creating a new element link
-        if (tempLinkRef.current)
-            return;
-        var sourceElement = elementsRef.current.find(function (e) { return e.id === elementId; });
-        //handle create temp element link;
-        var newLink = {
-            id: generateUniqueId(),
-            points: [],
-            sourceElement: sourceElement,
-            sourcePort: port,
-        };
-        setTempLink(newLink);
-        paperEventEmitter.emitElementLinkStarted(newLink);
-    }, [paperEventEmitter]);
-    var createElementLink = React$1.useCallback(function (sourcePort, sourceElement, targetPort, targetElement) {
+        var element = elementsRef.current.find(function (e) { return e.id === elementId; });
+        //broadcast port mouse down to parent component
+        if (element) {
+            (_a = props.onPortMouseDown) === null || _a === void 0 ? void 0 : _a.call(props, port, element);
+        }
+        if (!tempLinkRef.current && element) {
+            //handle create temp element link;
+            var newLink = {
+                id: generateUniqueId(),
+                points: [],
+                sourceElement: element,
+                sourcePort: port,
+            };
+            setTempLink(newLink);
+            paperEventEmitter.emitElementLinkStarted(newLink);
+        }
+    }, [paperEventEmitter, props.onPortMouseDown]);
+    var createElementLink = React.useCallback(function (sourcePort, sourceElement, targetPort, targetElement) {
         //if no onCreatingLink prop, no link will be created
         if (!props.onCreatingLink) {
             return null;
@@ -10197,15 +9079,21 @@ var Paper = function (props) {
         }
         return newElementLink;
     }, [props.onCreatingLink, automationAddPointsToLink]);
-    var handlePortMouseUp = React$1.useCallback(function (ev, port, elementId) {
+    var handlePortMouseUp = React.useCallback(function (ev, port, elementId) {
+        var _a;
         ev.stopPropagation();
+        var element = elementsRef.current.find(function (e) { return e.id === elementId; });
+        //broadcast port mouse down to parent component
+        if (element) {
+            (_a = props.onPortMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, port, element);
+        }
         //Create new element link, if has tempLink
         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;
             if (isMouseUpOnNotSelf) {
-                var _a = tempLinkRef.current, sourcePort = _a.sourcePort, sourceElement = _a.sourceElement;
+                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);
             }
@@ -10218,8 +9106,8 @@ var Paper = function (props) {
             }
             setTempLink(null);
         }
-    }, [paperEventEmitter, createElementLink]);
-    var handleLinkLabelMoved = React$1.useCallback(function (offsetX, offsetY, index, labelType) {
+    }, [paperEventEmitter, createElementLink, props.onPortMouseUp]);
+    var handleLinkLabelMoved = React.useCallback(function (offsetX, offsetY, index, labelType) {
         setLinks(function (prevLinks) {
             var newLinks = __spreadArray([], prevLinks, true);
             var currentLink = newLinks[index];
@@ -10255,7 +9143,7 @@ var Paper = function (props) {
             return newLinks;
         });
     }, []);
-    var handleLinkLabelResized = React$1.useCallback(function (width, height, index, labelType) {
+    var handleLinkLabelResized = React.useCallback(function (width, height, index, labelType) {
         setLinks(function (prevLinks) {
             var newLinks = __spreadArray([], prevLinks, true);
             var currentLink = newLinks[index];
@@ -10288,7 +9176,7 @@ var Paper = function (props) {
             return newLinks;
         });
     }, []);
-    var handleLinkLabelContentChanged = React$1.useCallback(function (newValue, index, labelType) {
+    var handleLinkLabelContentChanged = React.useCallback(function (newValue, index, labelType) {
         setLinks(function (prevLinks) {
             var newLinks = __spreadArray([], prevLinks, true);
             var currentLink = newLinks[index];
@@ -10372,7 +9260,7 @@ var Paper = function (props) {
        Cache to avoid re-initializing the function when the component re-renders to
        avoid causing the components using it to re-render unnecessarily
        */
-    var onLabelMoved = React$1.useCallback(function (index) {
+    var onLabelMoved = React.useCallback(function (index) {
         return function (offsetX, offsetY, labelType) {
             handleLinkLabelMoved(offsetX, offsetY, index, labelType);
         };
@@ -10381,7 +9269,7 @@ var Paper = function (props) {
        Cache to avoid re-initializing the function when the component re-renders to
        avoid causing the components using it to re-render unnecessarily
        */
-    var onLabelResized = React$1.useCallback(function (index) {
+    var onLabelResized = React.useCallback(function (index) {
         return function (width, height, labelType) {
             handleLinkLabelResized(width, height, index, labelType);
         };
@@ -10390,12 +9278,12 @@ var Paper = function (props) {
     Cache to avoid re-initializing the function when the component re-renders to
     avoid causing the components using it to re-render unnecessarily
     */
-    var onLabelContentChanged = React$1.useCallback(function (index) {
+    var onLabelContentChanged = React.useCallback(function (index) {
         return function (newValue, labelType) {
             handleLinkLabelContentChanged(newValue, index, labelType);
         };
     }, [handleLinkLabelContentChanged]);
-    var handleClickLinkDelete = React$1.useCallback(function (link, index) {
+    var handleClickLinkDelete = React.useCallback(function (link, index) {
         return function () {
             setLinks(function (prevLinks) {
                 var newLinks = __spreadArray([], prevLinks, true);
@@ -10404,7 +9292,7 @@ var Paper = function (props) {
             });
         };
     }, []);
-    var handleMouseUpAtLinkedPortPlaceholder = React$1.useCallback(function (link, position, targetElementId) {
+    var handleMouseUpAtLinkedPortPlaceholder = React.useCallback(function (link, position, targetElementId) {
         var targetElement = elementsRef.current.find(function (e) { return e.id === targetElementId; });
         if (!targetElement)
             return;
@@ -10431,7 +9319,7 @@ var Paper = function (props) {
         setTempLink(null);
         paperEventEmitter.emitElementLinkEnded();
     }, [props.onCreatingPortByLinking, createElementLink, paperEventEmitter]);
-    var handleElementTextChange = React$1.useCallback(function (elementId, textId, newContent) {
+    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.
@@ -10445,7 +9333,7 @@ var Paper = function (props) {
             });
         });
     }, []);
-    var handleElementClicked = React$1.useCallback(function (elementId, e, ref) {
+    var handleElementClicked = React.useCallback(function (elementId, e, ref) {
         e.stopPropagation();
         var tempLink = tempLinkRef.current;
         if (tempLink) {
@@ -10463,7 +9351,7 @@ var Paper = function (props) {
         }
         setMouseDownedOnPaper(false);
     }, [paperEventEmitter]);
-    var handleContextMenu = React$1.useCallback(function (elementId, e, ref) {
+    var handleContextMenu = React.useCallback(function (elementId, e, ref) {
         var _a;
         e.preventDefault();
         var element = elementsRef.current.find(function (e) { return e.id === elementId; });
@@ -10472,28 +9360,54 @@ var Paper = function (props) {
             (_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;
+    var handleMouseUp = React.useCallback(function (ev, elementId) {
+        var _a;
+        var element = elementsRef.current.find(function (ele) { return ele.id === elementId; });
+        if (element) {
+            (_a = props.onElementMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, ev, element);
+        }
+    }, [props.onElementMouseUp]);
+    var handleMouseMove = React.useCallback(function (ev, elementId) {
+        var _a;
+        var element = elementsRef.current.find(function (ele) { return ele.id === elementId; });
+        if (element) {
+            (_a = props.onElementMouseMove) === null || _a === void 0 ? void 0 : _a.call(props, ev, element);
+        }
+    }, [props.onElementMouseMove]);
+    var handleMouseLeave = React.useCallback(function (ev, elementId) {
+        var _a;
+        var element = elementsRef.current.find(function (ele) { return ele.id === elementId; });
+        if (element) {
+            (_a = props.onElementMouseLeave) === null || _a === void 0 ? void 0 : _a.call(props, ev, element);
+        }
+    }, [props.onElementMouseLeave]);
+    var renderElementInTree = React.useCallback(function (element) {
+        var _a, _b;
         //use the defined react element or the default Element component
         var ReactElement = element.reactElement || Element$1;
-        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, 
+        return (React.createElement("g", { key: element.id },
+            React.createElement(ReactElement, { key: "element-".concat(element.id), id: element.id, height: element.size.height, width: element.size.width, x: (_a = element.relativePosition) === null || _a === void 0 ? void 0 : _a.x, y: (_b = element.relativePosition) === null || _b === void 0 ? void 0 : _b.y, onClick: handleElementClicked, onContextMenu: handleContextMenu, onMouseUp: handleMouseUp, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, container: paperContainerRef.current, renderShape: element.renderShape, cssClass: element.cssClass, texts: element.texts, ports: element.ports, portMoveableAreas: element.portMoveableAreas, portSlideRailSVGClassName: element.portSlideRailSVGClassName, portDirection: element.portDirection, defaultPortSize: element.defaultPortSize, onPortMoved: handlePortMoved, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, 
                 // portPlaceholderShape={(<Circle x={0} y={0} width={10} height={10} fill='red' positioningAnchor={PositioningAnchor.Center} />)}
-                onMouseUpAtLinkedPortPlaceholder: handleMouseUpAtLinkedPortPlaceholder, onTextUpdated: handleElementTextChange, 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 () {
+                onMouseUpAtLinkedPortPlaceholder: handleMouseUpAtLinkedPortPlaceholder, onTextUpdated: handleElementTextChange, onManuallyTriggerRenderPort: props.onManuallyTriggerRenderPort, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition }, element.childrenElements && element.childrenElements.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);
         });
     }, [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 },
+    return (React.createElement("div", { style: { position: "relative" } },
+        React.createElement(Ruler, { squareSize: 100, border: '1px dashed grey' }),
+        React.createElement("svg", { tabIndex: 0, width: size.width, height: size.height, ref: paperContainerRef, id: "paper-container", onMouseMove: handlePaperMouseMove, onMouseDown: handleMouseDownOnPaper, onMouseUp: handleMouseUpOnPaper },
             paperContainerRef.current ? ElementsInTree : "",
             links && links.map(function (link, index) {
                 var _a, _b, _c, _d;
-                return (React$1.createElement(ElementLink, { key: link.id, id: link.id, path: link.path, sourcePosition: {
+                return (React.createElement(ElementLink, { key: link.id, id: link.id, path: link.path, sourcePosition: {
                         x: link.sourceElement.position.x + link.sourcePort.position.x,
                         y: link.sourceElement.position.y + link.sourcePort.position.y
                     }, targetPosition: {
@@ -10501,78 +9415,116 @@ var Paper = function (props) {
                         y: ((_c = link.targetElement) === null || _c === void 0 ? void 0 : _c.position.y) + ((_d = link.targetPort) === null || _d === void 0 ? void 0 : _d.position.y)
                     }, points: link.points, onPathChanged: handlePathChange, onClickDelete: handleClickLinkDelete(link, index), onSelected: function () { return handleSelectLink(link); }, onDeselected: function () { return handleDeselectLink(); }, container: paperContainerRef.current, markerStart: link.markerStart, markerEnd: link.markerEnd, markerDistanceFromPort: link.markerDistanceFromPort, markerSize: link.markerSize, label: link.label, sourceLabel: link.sourceLabel, targetLabel: link.targetLabel, onLabelMoved: onLabelMoved(index), onLabelResized: onLabelResized(index), onLabelContentChanged: onLabelContentChanged(index) }));
             }),
-            (tempLink === null || tempLink === void 0 ? void 0 : tempLink.tempTargetPosition) && React$1.createElement(ElementLink, { id: tempLink.id, points: tempLink.points, sourcePosition: {
+            (tempLink === null || tempLink === void 0 ? void 0 : tempLink.tempTargetPosition) && React.createElement(ElementLink, { id: tempLink.id, points: tempLink.points, sourcePosition: {
                     x: tempLink.sourceElement.position.x + tempLink.sourcePort.position.x,
                     y: tempLink.sourceElement.position.y + tempLink.sourcePort.position.y
                 }, targetPosition: tempLink.tempTargetPosition, container: paperContainerRef.current, markerStart: tempLink.markerStart, markerEnd: tempLink.markerEnd, markerDistanceFromPort: tempLink.markerDistanceFromPort, markerSize: tempLink.markerSize }),
-            texts.map(function (text, index) { return (React$1.createElement(Text$1, { key: text.id, id: text.id, x: text.position.x, y: text.position.y, width: text.size.width, height: text.size.height, fontSize: text.fontSize, border: text.border, container: paperContainerRef.current, content: text.content, align: text.align, onSelected: function () {
+            texts.map(function (text, index) { return (React.createElement(Text$1, { key: text.id, id: text.id, x: text.position.x, y: text.position.y, width: text.size.width, height: text.size.height, editable: text.editable, fontSize: text.fontSize, border: text.border, container: paperContainerRef.current, content: text.content, align: text.align, onSelected: function () {
                     setSelectedText(text);
                 } })); })),
-        React$1.createElement(BBoxDebugger, { elementSVG: selectedElementSVG }),
-        React$1.createElement(LinkDebugger, { links: links, svgContainer: paperContainerRef.current })));
+        React.createElement(BBoxDebugger, { elementSVG: selectedElementSVG }),
+        React.createElement(LinkDebugger, { links: links, svgContainer: paperContainerRef.current })));
 };
-var Paper$1 = React$1.memo(Paper);
+var Paper$1 = React.memo(Paper);
 
-function Editor(_a) {
+var Editor = function (_a) {
     var editorContext = _a.editorContext, width = _a.width, height = _a.height;
+    var _b = React.useState([]), elements = _b[0], setElements = _b[1];
+    var _c = React.useState([]), links = _c[0], setLinks = _c[1];
+    var _d = React.useState([]), texts = _d[0], setTexts = _d[1];
     if (!width) {
         width = 3000;
     }
     if (!height) {
         height = 3000;
     }
-    var handlePaperClicked = React$1.useCallback(function (position) {
+    var setEditorStates = React.useCallback(function (ctx) {
+        setElements(__spreadArray([], ctx.elements, true));
+        setLinks(__spreadArray([], ctx.links, true));
+        setTexts(__spreadArray([], ctx.texts, true));
+    }, []);
+    React.useEffect(function () {
+        if (editorContext) {
+            setEditorStates(editorContext);
+        }
+    }, [editorContext, setEditorStates]);
+    React.useEffect(function () {
+        var offs = [];
+        if (editorContext) {
+            offs.push(editorContext.onEditorContextUpdated(function () {
+                console.log("onEditorContextUpdated");
+                setEditorStates(editorContext);
+            }));
+        }
+        return function () {
+            offs.forEach(function (off) { return off(); });
+        };
+    }, [editorContext, setEditorStates]);
+    var handlePaperClicked = React.useCallback(function (position) {
         editorContext.onPaperClickedHandler(position);
     }, [editorContext]);
-    var handlePortMoved = React$1.useCallback(function (position, port, element) {
+    var handlePortMouseDown = React.useCallback(function (port, element) {
+        editorContext.onPortMouseDownHandler(port, element);
+    }, [editorContext]);
+    var handlePortMouseUp = React.useCallback(function (port, element) {
+        editorContext.onPortMouseUpHandler(port, element);
+    }, [editorContext]);
+    var handlePortMoved = React.useCallback(function (position, port, element) {
         editorContext.onPortMovedHandler(position, port, element);
     }, [editorContext]);
-    var handlePortSelected = React$1.useCallback(function (port, element) {
+    var handlePortSelected = React.useCallback(function (port, element) {
         editorContext.onPortSelectedHandler(port, element);
     }, [editorContext]);
-    var handleElementContextMenu = React$1.useCallback(function (element, event) {
+    var handleElementContextMenu = React.useCallback(function (element, event) {
         editorContext.onElementContextMenuHandler(element, event);
     }, [editorContext]);
-    var handleElementMoved = React$1.useCallback(function (position, element) {
+    var handleElementMoved = React.useCallback(function (position, element) {
         editorContext.onElementMovedHandler(position, element);
     }, [editorContext]);
-    var handleElementResized = React$1.useCallback(function (size, element) {
+    var handleElementResized = React.useCallback(function (size, element) {
         editorContext.onElementResizedHandler(size, element);
     }, [editorContext]);
-    var handleElementSelected = React$1.useCallback(function (element) {
+    var handleElementSelected = React.useCallback(function (element) {
         editorContext.onElementSelectedHandler(element);
     }, [editorContext]);
-    var handleLinkSelected = React$1.useCallback(function (link) {
+    var handleElementMouseLeave = React.useCallback(function (ev, element) {
+        editorContext.onElementMouseLeaveHandler(ev, element);
+    }, [editorContext]);
+    var handleElementMouseMove = React.useCallback(function (ev, element) {
+        editorContext.onElementMouseMoveHandler(ev, element);
+    }, [editorContext]);
+    var handleElementMouseUp = React.useCallback(function (ev, element) {
+        editorContext.onElementMouseUpHandler(ev, element);
+    }, [editorContext]);
+    var handleLinkSelected = React.useCallback(function (link) {
         editorContext.onLinkSelectedHandler(link);
     }, [editorContext]);
-    var handleTextSelected = React$1.useCallback(function (text) {
+    var handleTextSelected = React.useCallback(function (text) {
         editorContext.onTextSelectedHandler(text);
     }, [editorContext]);
-    var handleOnCreatingLink = React$1.useCallback(function (sourcePort, sourceElement, targetPort, targetElement) {
+    var handleOnCreatingLink = React.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) {
+    var handleOnCreatingPortByLinking = React.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) {
+    var handlePaperMouseMoved = React.useCallback(function (position) {
         editorContext.onPaperMouseMovedHandler(position);
     }, [editorContext]);
-    var handlePaperMouseDown = React$1.useCallback(function (position) {
+    var handlePaperMouseDown = React.useCallback(function (position) {
         editorContext.onPaperMouseDownHandler(position);
     }, [editorContext]);
-    var handlePaperMouseUp = React$1.useCallback(function (position) {
+    var handlePaperMouseUp = React.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: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown }));
-    return null;
-}
+    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) }));
+};
 
 exports.CircleRC = Circle;
 exports.CrescentRC = Crescent;