orcasvn-react-diagrams 0.1.8 → 0.1.10

package/dist/cjs/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var React$1 = require('react');
 var require$$0 = require('react-dom');
 
 exports.PositioningAnchor = void 0;
@@ -36,6 +36,8 @@ 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;
 }
@@ -441,7 +443,7 @@ function generateUniqueId() {
 }
 
 var Element$1 = /** @class */ (function () {
-    function Element(x, y, width, height, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection, parentElement) {
+    function Element(x, y, width, height, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection, parentElement, textsPlaceHolderClassName, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition) {
         if (portMovealeAreas === void 0) { portMovealeAreas = []; }
         this.resizability = {
             enabled: true,
@@ -460,6 +462,9 @@ var Element$1 = /** @class */ (function () {
         this.portSlideRailSVGClassName = portSlideRailSVGClassName;
         this.portDirection = portDirection;
         this.parentElement = parentElement;
+        this.textsPlaceHolderClassName = textsPlaceHolderClassName;
+        this.textsPlaceHolderFlexStyle = textsPlaceHolderFlexStyle;
+        this.textsPlaceHolderFlexboxPosition = textsPlaceHolderFlexboxPosition;
     }
     Object.defineProperty(Element.prototype, "id", {
         get: function () {
@@ -612,13 +617,14 @@ var ElementLink$1 = /** @class */ (function () {
 }());
 
 var Text$2 = /** @class */ (function () {
-    function Text(content, width, height, x, y, align, fontSize, border) {
+    function Text(content, width, height, x, y, align, fontSize, border, style) {
         this._id = generateUniqueId();
         this.content = content;
         this.align = align;
         this.fontSize = fontSize;
         this.border = border;
         this.size = { width: width, height: height };
+        this.style = style;
         if (x && y) {
             this.position = { x: x, y: y };
         }
@@ -747,7 +753,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var ShapeWrapper = React.forwardRef(function (shapeProps, ref) {
+var ShapeWrapper = React$1.forwardRef(function (shapeProps, ref) {
     //if direction is provided, rotation is based on direction
     var rotation = shapeProps.rotation || 0;
     if (shapeProps.direction) {
@@ -777,7 +783,7 @@ var ShapeWrapper = React.forwardRef(function (shapeProps, ref) {
         position.x = position.x - shapeProps.width / 2;
         position.y = position.y - shapeProps.height / 2;
     }
-    var objectOfAllEventAttributes = React.useMemo(function () {
+    var objectOfAllEventAttributes = React$1.useMemo(function () {
         var arrayOfAllEventAttributes = Object.entries(shapeProps).filter(function (_a) {
             var k = _a[0]; _a[1];
             return k.startsWith('on');
@@ -787,26 +793,26 @@ var ShapeWrapper = React.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.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)));
+    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)));
 });
 
-var CustomShape = React.forwardRef(function (props, ref) {
-    return (React.createElement(ShapeWrapper, __assign({}, props, { ref: ref }), props.children));
+var CustomShape = React$1.forwardRef(function (props, ref) {
+    return (React$1.createElement(ShapeWrapper, __assign({}, props, { ref: ref }), props.children));
 });
 
-var CustomPort = /** @class */ (function (_super) {
-    __extends(CustomPort, _super);
-    function CustomPort(x, y, width, height, renderShape, shapePositioningAnchor, label) {
-        var _this = _super.call(this, x, y, width, height, label, 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: shapePositioningAnchor, 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); } }, renderShape));
+var CustomPortFromJSXElement = /** @class */ (function (_super) {
+    __extends(CustomPortFromJSXElement, _super);
+    function CustomPortFromJSXElement(x, y, width, height, renderCustomShape, label, shapePositioningAnchor) {
+        var _this = _super.call(this, x, y, width, height, label, 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: shapePositioningAnchor, 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); } }, renderCustomShape));
         })) || this;
         return _this;
     }
-    return CustomPort;
+    return CustomPortFromJSXElement;
 }(Port$1));
 
-var Circle = React.forwardRef(function (props, ref) {
+var Circle = React$1.forwardRef(function (props, ref) {
     var s = { height: 100, width: 100 };
     if (props.r) {
         s.height = props.r * 2;
@@ -819,11 +825,11 @@ var Circle = React.forwardRef(function (props, ref) {
         s.height = props.height;
         s.width = props.width;
     }
-    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 })));
+    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 })));
 });
 
-var Crescent = function (props) {
+var Crescent = React$1.forwardRef(function (props, ref) {
     var s = { height: 100, width: 100 };
     if (props.r) {
         s.height = props.r * 2;
@@ -837,11 +843,12 @@ var Crescent = function (props) {
         s.width = props.width;
     }
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
-    return (React.createElement(ShapeWrapper, __assign({ viewBox: '0 0 100 100' }, props, { width: s.width, height: s.height }),
-        React.createElement("path", { className: "".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", d: "M0,75 A50,50 0 1,1 100,75 Z", fill: props.fill || 'none', stroke: props.stroke || 'none', strokeWidth: sw })));
-};
+    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 })));
+});
 
-var Rectangle = function (props) {
+var Rectangle = React$1.forwardRef(function (props, ref) {
     var scaledWidth = props.width;
     var scaledHeight = props.height;
     if (props.width > 100 || props.height > 100) {
@@ -857,11 +864,11 @@ var Rectangle = function (props) {
         }
     }
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
-    return (React.createElement(ShapeWrapper, __assign({}, props, { 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 })));
-};
+    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 })));
+});
 
-var RectangularFrame = function (props) {
+var RectangularFrame = React$1.forwardRef(function (props, ref) {
     var scaledWidth = props.width;
     var scaledHeight = props.height;
     if (props.width > 100 || props.height > 100) {
@@ -881,11 +888,11 @@ var RectangularFrame = function (props) {
     var fw = props.frameColor ? (props.frameWidth || 1) : 0;
     var scaledFw = scaledWidth / props.width * fw;
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
-    return (React.createElement(ShapeWrapper, __assign({}, props, { 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" })));
-};
+    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" })));
+});
 
 var createRoot;
 
@@ -959,17 +966,17 @@ var PORT_MOVING_OFFSET_THRESHOLD = 15;
 var SelectionFrame = function (props) {
     var _a;
     var bbox = (_a = props.targetSVGElement) === null || _a === void 0 ? void 0 : _a.getBBox();
-    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 _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 x = 0;
     var y = 0;
     var framePadding = props.framePadding || 0;
     var r = 5;
-    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 _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 addRectHandleMouseDown = function (event) {
         event.stopPropagation();
         if (!draggingCircle) {
@@ -979,7 +986,7 @@ var SelectionFrame = function (props) {
             setStartY(event.clientY);
         }
     };
-    var rectHandleMouseMove = React.useCallback(function (event) {
+    var rectHandleMouseMove = React$1.useCallback(function (event) {
         var mouseEvent = event;
         if (draggingRect) {
             var offsetX = mouseEvent.clientX - startX;
@@ -1002,7 +1009,7 @@ var SelectionFrame = function (props) {
             }
         }
     }, [draggingRect, props.onMove, props.movingRate, startX, startY, lastMoveTime]);
-    React.useEffect(function () {
+    React$1.useEffect(function () {
         var addRectHandleMouseUp = function () {
             //mouse up
             setDraggingRect(false);
@@ -1027,7 +1034,7 @@ var SelectionFrame = function (props) {
             setDraggingCircle(true);
         }
     };
-    React.useEffect(function () {
+    React$1.useEffect(function () {
         var circleHandleMouseMove = function (event) {
             var mouseEvent = event;
             if (draggingCircle) {
@@ -1083,15 +1090,15 @@ var SelectionFrame = function (props) {
         leftX -= rectangleSize / 2;
         topY -= rectangleSize / 2;
     }
-    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 }),
+    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 }),
         props.resizability.enabled ?
-            (React.createElement("circle", { cursor: 'se-resize', cx: leftX + width, cy: topY + height, r: r, fill: 'blue', stroke: 'blue', onMouseDown: circleHandleMouseDown })) : null));
+            (React$1.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.useEffect(function () {
+    React$1.useEffect(function () {
         if (props.targetSVGElement && props.container) {
             //render SelectionFrame component to the parent element of the targetSVGElement            
             if (props.container) {
@@ -1100,7 +1107,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.createElement(SelectionFrame, __assign({}, props, { container: props.container })));
+                root_1.render(React$1.createElement(SelectionFrame, __assign({}, props, { container: props.container })));
                 return function () {
                     root_1.unmount();
                     if (props.targetSVGElement) {
@@ -1257,7 +1264,7 @@ var onElementLinkEnded = function (callback) {
         off: off
     };
 };
-var paperEventEmitterContext = React.createContext({
+var paperEventEmitterContext = React$1.createContext({
     emitter: eventEmitter,
     emitPaperClicked: emitPaperClicked,
     onPaperClicked: onPaperClicked,
@@ -1285,13 +1292,13 @@ var paperEventEmitterContext = React.createContext({
     onElementLinkEnded: onElementLinkEnded,
 });
 
-var Text = React.forwardRef(function (_a, ref) {
+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.useState(false), isSelected = _c[0], setIsSelected = _c[1];
-    var _d = React.useState(false), isEditing = _d[0], setIsEditing = _d[1];
-    var svgRef = React.useRef();
-    var onPaperClicked = React.useContext(paperEventEmitterContext).onPaperClicked;
-    React.useEffect(function () {
+    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 onPaperClicked = React$1.useContext(paperEventEmitterContext).onPaperClicked;
+    React$1.useEffect(function () {
         var paperClickListener = onPaperClicked(function (ev) {
             var _a;
             var textareaELe = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('textarea');
@@ -1338,7 +1345,7 @@ var Text = React.forwardRef(function (_a, ref) {
         strokeWidth: 3,
         movingOffsetThreshold: TEXT_MOVING_OFFSET_THRESHOLD,
     });
-    var textAlign = React.useMemo(function () {
+    var textAlign = React$1.useMemo(function () {
         switch (align) {
             case exports.TextAlign.left:
                 return 'left';
@@ -1352,7 +1359,7 @@ var Text = React.forwardRef(function (_a, ref) {
     }, [align]);
     var fontSize = fontSizeProp || TEXT_FONT_SIZE;
     var borderStyle = border || 'none';
-    return (React.createElement("svg", { style: { overflow: "visible" }, x: x, y: y, ref: function (node) {
+    return (React$1.createElement("svg", { style: { overflow: "visible" }, x: x, y: y, ref: function (node) {
             svgRef.current = node;
             if (typeof ref === 'function') {
                 ref(node);
@@ -1361,13 +1368,13 @@ var Text = React.forwardRef(function (_a, ref) {
                 ref.current = node;
             }
         }, onClick: handleClick },
-        React.createElement("foreignObject", { width: width, height: height, style: {
+        React$1.createElement("foreignObject", { width: width, height: height, style: {
                 overflow: 'visible',
                 userSelect: 'none',
                 WebkitUserSelect: 'none',
                 msUserSelect: 'none'
             } },
-            React.createElement("div", { style: {
+            React$1.createElement("div", { style: {
                     width: '100%',
                     height: '100%',
                     borderWidth: '1px',
@@ -1376,7 +1383,7 @@ var Text = React.forwardRef(function (_a, ref) {
                     // whiteSpace: 'pre-wrap',
                     boxSizing: 'border-box',
                 } },
-                React.createElement("textarea", { style: {
+                React$1.createElement("textarea", { style: {
                         fontFamily: 'initial',
                         display: 'inline-block',
                         width: '100%',
@@ -1394,29 +1401,35 @@ var Text = React.forwardRef(function (_a, ref) {
                         }
                     }, value: content, onChange: handleChangeText })))));
 });
-var Text$1 = React.memo(Text);
+var Text$1 = React$1.memo(Text);
 
-var Port = 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, renderShape = props.renderShape;
-    var textRef = React.useRef(null);
+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, calculateRotationAngle = props.calculateRotationAngle, renderShape = props.renderShape;
+    var textRef = React$1.useRef(null);
+    var rotationAngle = React$1.useMemo(function () {
+        if (!calculateRotationAngle)
+            return 0;
+        return calculateRotationAngle(x, y);
+    }, [calculateRotationAngle, x, y]);
     var renderLabel = function (label) {
         var content = label.content, size = label.size;
         var position = label.position || PORT_LABEL_POSITION;
-        return React.createElement(Text$1, { id: label.id, ref: textRef, x: x + position.x, y: y + position.y, width: size.width, height: size.height, content: content, fontSize: label.fontSize, border: label.border, container: container, onMoved: onPortLabelMoved, onResized: onPortLabelResized, onContentChanged: onPortLabelContentChanged });
+        return React$1.createElement(Text$1, { id: label.id, ref: textRef, x: x + position.x, y: y + position.y, width: size.width, height: size.height, content: content, fontSize: label.fontSize, border: label.border, container: container, onMoved: onPortLabelMoved, onResized: onPortLabelResized, onContentChanged: onPortLabelContentChanged });
     };
-    var renderedShape = React.useMemo(function () {
+    var renderedShape = React$1.useMemo(function () {
         if (renderShape) {
             var RenderShape = renderShape;
-            return (React.createElement(RenderShape, __assign({ ref: ref }, props)));
+            return (React$1.createElement(RenderShape, __assign({ ref: ref }, props, { rotation: rotationAngle })));
         }
         else {
-            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); }, onClick: function (e) { return onSelected === null || onSelected === void 0 ? void 0 : onSelected(id, e); }, ref: ref, x: x, y: y, positioningAnchor: exports.PositioningAnchor.Center, height: height, width: width, stroke: "black", fill: "black" });
+            return React$1.createElement(Circle, { onMouseDown: function (e) { return onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(id, e); }, onMouseUp: function (e) { return onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(id, e); }, 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.createElement(React.Fragment, null,
+    return (React$1.createElement(React$1.Fragment, null,
         renderedShape,
         label && renderLabel(label)));
-});
+});
+var Port = React$1.memo(Port1);
 
 // Render the svg <path> element
 function getCurvePathData(points, smoothing, closed) {
@@ -1577,14 +1590,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.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" })))));
+    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" })))));
 }
 
 /**
@@ -7339,25 +7352,25 @@ var getRelativePosition = function (clientPosition, relativeElement) {
     };
 };
 
-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 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 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.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({
+    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({
         current: null,
     }), selectedLabelRef = _o[0], setSelectedLabelRef = _o[1];
-    var _p = React.useState(false), isSelectedLink = _p[0], setIsSelectedLink = _p[1];
-    var onPaperClicked = React.useContext(paperEventEmitterContext).onPaperClicked;
-    var pathRef = React.useRef(null);
-    var labelRef = React.useRef(null);
-    var sourceLabelRef = React.useRef(null);
-    var targetLabelRef = React.useRef(null);
-    React.useEffect(function () {
+    var _p = React$1.useState(false), isSelectedLink = _p[0], setIsSelectedLink = _p[1];
+    var onPaperClicked = React$1.useContext(paperEventEmitterContext).onPaperClicked;
+    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 paperClickListener = onPaperClicked(function () {
             setSelectedLabelRef({
                 current: null,
@@ -7369,17 +7382,17 @@ var IElementLink = function (_a) {
             paperClickListener.off();
         };
     }, []);
-    React.useLayoutEffect(function () {
+    React$1.useLayoutEffect(function () {
         var pointsList = __spreadArray(__spreadArray([sourcePosition], points, true), [targetPosition], false);
         var _pathStr = createSmoothPathString(pointsList, undefined);
         setPathStr(_pathStr);
     }, [sourcePosition, points, targetPosition]);
-    React.useEffect(function () {
+    React$1.useEffect(function () {
         if (!pathStr)
             return;
         onPathChanged === null || onPathChanged === void 0 ? void 0 : onPathChanged(pathStr, id);
     }, [pathStr, id]);
-    React.useLayoutEffect(function () {
+    React$1.useLayoutEffect(function () {
         //handle when creating and moving point
         var handleMouseMove = function (ev) {
             var mouseEvent = ev;
@@ -7535,7 +7548,7 @@ var IElementLink = function (_a) {
             x: relativePosition.x + relativePositionTo.x,
             y: relativePosition.y + relativePositionTo.y,
         };
-        return (React.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$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 }));
     };
     var angleMarkerStart = '0';
     var angleMarkerEnd = '0';
@@ -7553,28 +7566,28 @@ var IElementLink = function (_a) {
         }
         centerPathPosition = (_c = pathRef.current) === null || _c === void 0 ? void 0 : _c.getPointAtLength(pathRef.current.getTotalLength() / 2);
     }
-    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 })),
+    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 })),
         label && renderLabel(label, 'middle', centerPathPosition),
         sourceLabel && renderLabel(sourceLabel, 'source', sourcePosition),
         targetLabel && renderLabel(targetLabel, 'target', targetPosition),
-        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))));
+        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))));
 };
-var ElementLink = React.memo(IElementLink);
+var ElementLink = React$1.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.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: {
+    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: {
                 width: squareSize,
                 height: squareSize,
                 border: border,
@@ -7585,16 +7598,16 @@ var Ruler = function (_a) {
                 position: 'relative',
                 fontSize: 12,
             } },
-            rowIndex === 0 ? React.createElement("span", { style: { marginLeft: "-12px" } }, colIndex * squareSize) : "",
-            colIndex === 0 ? React.createElement("span", { style: { top: "-9px", position: "absolute" } }, rowIndex * squareSize) : "")); }))); }))));
+            rowIndex === 0 ? React$1.createElement("span", { style: { marginLeft: "-12px" } }, colIndex * squareSize) : "",
+            colIndex === 0 ? React$1.createElement("span", { style: { top: "-9px", position: "absolute" } }, rowIndex * squareSize) : "")); }))); }))));
 };
 
-var ElementWrapper = React.forwardRef(function (_a, ref) {
+var ElementWrapper = React$1.forwardRef(function (_a, ref) {
     var x = _a.x, y = _a.y, children = _a.children; _a.portPlaceholders; _a.ports; var onClick = _a.onClick, onMouseMove = _a.onMouseMove, onMouseLeave = _a.onMouseLeave, onMouseUp = _a.onMouseUp;
     var handleMouseDown = function (ev) {
         ev.stopPropagation();
     };
-    return (React.createElement("svg", { x: x, y: y, onClick: onClick, onMouseDown: handleMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
+    return (React$1.createElement("svg", { x: x, y: y, onClick: onClick, 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
@@ -7640,27 +7653,1249 @@ var checkPositionOnLine = function (position, line) {
     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, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, onClick = props.onClick, 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.useState(), selectedPort = _d[0], setSelectedPort = _d[1];
-    var _e = React.useState((_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
-        return __assign(__assign({}, p), { id: p.id, ref: React.createRef() });
-    })) !== null && _b !== void 0 ? _b : []), 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 _a, _b;
+    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, textsPlaceHolderFlexStyle = props.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition = props.textsPlaceHolderFlexboxPosition, textsPlaceHolderClassName = props.textsPlaceHolderClassName, texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, onClick = props.onClick, 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 _c = React$1.useState(), selectedPort = _c[0], setSelectedPort = _c[1];
+    var _d = React$1.useState((_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
+        return __assign(__assign({}, p), { id: p.id, ref: React$1.createRef() });
+    })) !== null && _b !== void 0 ? _b : []), ports = _d[0], setPorts = _d[1];
+    var _e = React$1.useState(false), someElementLinkStarted = _e[0], setSomeElementLinkStarted = _e[1];
+    var _f = React$1.useState(), potentialPortPosition = _f[0], setPotentialPortPosition = _f[1];
+    var _paperEventEmitterContext = React$1.useContext(paperEventEmitterContext);
+    var elementRef = React$1.useRef(null);
+    var elementLinkStarted = React$1.useRef();
     //Listen a new port is created, after add new port to ports state
-    React.useEffect(function () {
+    React$1.useEffect(function () {
         var _a, _b;
         setPorts((_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
-            return __assign(__assign({}, p), { id: p.id, ref: React.createRef() });
+            return __assign(__assign({}, p), { id: p.id, ref: React$1.createRef() });
         })) !== null && _b !== void 0 ? _b : []);
     }, [props.ports]);
     //Listen trigger of Delete key, handle delete port is selected
-    React.useEffect(function () {
+    React$1.useEffect(function () {
         var listener = _paperEventEmitterContext.onCommandDeleteSelectedPort(function () {
             if (selectedPort) {
                 setPorts(function (prev) { return prev.filter(function (p) { return p.id !== selectedPort.id; }); });
@@ -7671,7 +8906,7 @@ var Element = function (props) {
             listener.off();
         };
     }, [selectedPort]);
-    React.useEffect(function () {
+    React$1.useEffect(function () {
         //Listener onMouseDown event on #paper-container
         var eventListener = _paperEventEmitterContext.onPaperClicked(function (ev) {
             setSelectedPort(undefined);
@@ -7694,7 +8929,7 @@ var Element = function (props) {
         };
     }, [ports, onPortMoved]);
     //Listen creating element link started, ended.
-    React.useEffect(function () {
+    React$1.useEffect(function () {
         var elementStartedListener = _paperEventEmitterContext.onElementLinkStarted(function (tempLink) {
             elementLinkStarted.current = tempLink;
             setSomeElementLinkStarted(true);
@@ -7770,11 +9005,11 @@ var Element = function (props) {
         }
         return coordinates;
     };
-    var getSlideRailSVG = function (portSlideRailSVGClassName) {
+    var getSlideRailSVG = React$1.useCallback(function (portSlideRailSVGClassName) {
         var _a;
         var slideRailSVG = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".".concat(portSlideRailSVGClassName));
         return slideRailSVG;
-    };
+    }, [elementRef.current]);
     var normalizePortPositionOnSlideRailSVG = function (portSlideRailSVGClassName, position) {
         var slideRailSVG = getSlideRailSVG(portSlideRailSVGClassName);
         if (!slideRailSVG)
@@ -7937,17 +9172,16 @@ var Element = function (props) {
         }
     };
     //Get rotate angle of port by port direction is defined.
-    var rotatePort = React.useCallback(function (port) {
-        console.info('calculating port rotation', port);
+    var rotatePort = React$1.useCallback(function (x, y) {
+        console.info('calculating port rotation', x, y);
         if (!portSlideRailSVGClassName)
             return 0;
         var slideRailSVG = getSlideRailSVG(portSlideRailSVGClassName);
         if (!slideRailSVG)
             return 0;
         var rotationAngle = 0;
-        port.id; var position = port.position; port.size;
         //Standardize the port position to be in the correct position
-        var normalizedPosition = normalizePortPosition(position);
+        var normalizedPosition = normalizePortPosition({ x: x, y: y });
         switch (portDirection) {
             case exports.SubObjectDirection.Radial:
                 var center = {
@@ -7977,8 +9211,8 @@ var Element = function (props) {
                 break;
         }
         return rotationAngle;
-    }, [portSlideRailSVGClassName, portDirection]);
-    var renderedShape = React.useMemo(function () {
+    }, [portSlideRailSVGClassName, portDirection, getSlideRailSVG]);
+    var renderedShape = React$1.useMemo(function () {
         if (renderShape)
             return renderShape(props);
         return null;
@@ -7986,7 +9220,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.useLayoutEffect(function () {
+    React$1.useLayoutEffect(function () {
         if (elementRef.current) {
             setPorts(function (prev) { return __spreadArray([], prev, true); });
         }
@@ -7994,26 +9228,30 @@ var Element = function (props) {
     //use selection frame
     useSelectionFrame({
         container: container,
-        targetSVGElement: ((_c = selectedPort === null || selectedPort === void 0 ? void 0 : selectedPort.ref) === null || _c === void 0 ? void 0 : _c.current) || undefined,
+        targetSVGElement: (selectedPort === null || selectedPort === void 0 ? void 0 : selectedPort.ref.current) || undefined,
         resizability: {
             enabled: false,
             keepRatio: false
         },
+        // width: selectedPort?.size.width,
+        // height: selectedPort?.size.height,
         movingOffsetThreshold: PORT_MOVING_OFFSET_THRESHOLD,
         onMove: handlePortMove
     });
-    return (React.createElement(ElementWrapper, { ref: elementRef, x: x, y: y, onClick: function (e) { return onClick ? onClick(id, e, elementRef.current) : true; }, onMouseMove: handleElementMouseMove, onMouseLeave: handleElementMouseLeave, onMouseUp: handleElementMouseUp },
+    return (React$1.createElement(ElementWrapper, { ref: elementRef, x: x, y: y, onClick: function (e) { return onClick ? onClick(id, e, elementRef.current) : true; }, onMouseMove: handleElementMouseMove, onMouseLeave: handleElementMouseLeave, onMouseUp: handleElementMouseUp },
         renderedShape,
         potentialPortPosition && (portPlaceholderShape
-            ? 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 :
+            ? React$1.createElement("svg", { x: potentialPortPosition.x, y: potentialPortPosition.y }, portPlaceholderShape)
+            : React$1.createElement("rect", { x: potentialPortPosition.x - PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH / 2, y: potentialPortPosition.y - PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH / 2, width: PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH, height: PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH, rx: PORT_PLACEHOLDER_DEFAULT_SIZE, ry: PORT_PLACEHOLDER_DEFAULT_SIZE, stroke: PORT_PLACEHOLDER_DEFAULT_STROKE, fill: "none", strokeWidth: 3 })), ports === null || ports === void 0 ? void 0 :
         ports.map(function (p, index) {
-            return React.createElement(Port, { key: p.id, ref: p.ref, id: p.id, x: p.position.x, y: p.position.y, width: p.size.width, height: p.size.height, container: container, rotation: rotatePort(p), label: p.label, onPortLabelMoved: function (x, y) { return handlePortLabelMoved(x, y, p, index); }, onPortLabelResized: function (w, h) { return handlePortLabelResized(w, h, p, index); }, onPortLabelContentChanged: function (ev, newValue) { return handlePortLabelContentChanged(newValue, p, index); }, onSelected: function (portId, event) { return handleSelectedPort(p, event); }, onMouseDown: handlePortMouseDown, onMouseUp: handlePortMouseUp, renderShape: p.renderShape });
-        }), texts === null || texts === void 0 ? void 0 :
-        texts.map(function (t, index) {
-            var _a, _b;
-            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, align: t.align, fontSize: t.fontSize, border: t.border, container: container, onContentChanged: function (ev, newContent) { return onTextUpdated === null || onTextUpdated === void 0 ? void 0 : onTextUpdated(t.id, newContent); } });
+            return React$1.createElement(Port, { key: p.id, ref: p.ref, id: p.id, x: p.position.x, y: p.position.y, width: p.size.width, height: p.size.height, container: container, 
+                // rotation={rotatePort(p)}
+                calculateRotationAngle: rotatePort, label: p.label, onPortLabelMoved: function (x, y) { return handlePortLabelMoved(x, y, p, index); }, onPortLabelResized: function (w, h) { return handlePortLabelResized(w, h, p, index); }, onPortLabelContentChanged: function (ev, newValue) { return handlePortLabelContentChanged(newValue, p, index); }, onSelected: function (portId, event) { return handleSelectedPort(p, event); }, onMouseDown: handlePortMouseDown, onMouseUp: handlePortMouseUp, renderShape: p.renderShape });
         }),
+        React$1.createElement(Flexbox$1, { className: textsPlaceHolderClassName, style: textsPlaceHolderFlexStyle, x: textsPlaceHolderFlexboxPosition === null || textsPlaceHolderFlexboxPosition === void 0 ? void 0 : textsPlaceHolderFlexboxPosition.x, y: textsPlaceHolderFlexboxPosition === null || textsPlaceHolderFlexboxPosition === void 0 ? void 0 : textsPlaceHolderFlexboxPosition.y }, texts === null || texts === void 0 ? void 0 : texts.map(function (t, index) {
+            var _a, _b;
+            return React$1.createElement(Text$1, { id: t.id, key: index, content: t.content, x: (_a = t.position) === null || _a === void 0 ? void 0 : _a.x, y: (_b = t.position) === null || _b === void 0 ? void 0 : _b.y, width: t.size.width, height: t.size.height, align: t.align, fontSize: t.fontSize, border: t.border, container: container, style: t.style, onContentChanged: function (ev, newContent) { return onTextUpdated === null || onTextUpdated === void 0 ? void 0 : onTextUpdated(t.id, newContent); } });
+        })),
         children));
 };
 
@@ -8033,9 +9271,9 @@ var createRect = function (x, y, width, height, strokeWidth, transformOrigin, tr
 };
 function BBoxDebugger(_a) {
     var elementSVG = _a.elementSVG;
-    var _b = React.useState(false), isTurnOn = _b[0], setIsTurnOn = _b[1];
-    var displayedBBoxDebug = React.useRef([]);
-    React.useEffect(function () {
+    var _b = React$1.useState(false), isTurnOn = _b[0], setIsTurnOn = _b[1];
+    var displayedBBoxDebug = React$1.useRef([]);
+    React$1.useEffect(function () {
         var keyPress = function (ev) {
             if (ev.ctrlKey && ev.key === 'b') {
                 setIsTurnOn(function (prev) { return !prev; });
@@ -8115,7 +9353,7 @@ function BBoxDebugger(_a) {
         }, 1000);
         return intervalId;
     };
-    React.useEffect(function () {
+    React$1.useEffect(function () {
         if (!isTurnOn || !elementSVG)
             return;
         var listChildrenGroupByLevel = getListChildrenAndGroupSameLevel(elementSVG);
@@ -8127,12 +9365,12 @@ function BBoxDebugger(_a) {
             clearBBoxDebugger(displayedBBoxDebug.current);
         };
     }, [isTurnOn, elementSVG]);
-    return (React.createElement("div", { style: {
+    return (React$1.createElement("div", { style: {
             position: 'fixed',
             top: 20,
             right: 20
         } },
-        React.createElement("div", { style: {
+        React$1.createElement("div", { style: {
                 backgroundColor: 'white',
                 boxShadow: '0px 1px 4px 1px',
                 borderRadius: 4,
@@ -8156,9 +9394,9 @@ var createDebuggerPoint = function (cx, cy) {
 };
 var LinkDebugger = function (_a) {
     var links = _a.links, svgContainer = _a.svgContainer;
-    var _b = React.useState(false), isTurnOn = _b[0], setIsTurnOn = _b[1];
-    var displayedDebuggerPoint = React.useRef([]);
-    React.useEffect(function () {
+    var _b = React$1.useState(false), isTurnOn = _b[0], setIsTurnOn = _b[1];
+    var displayedDebuggerPoint = React$1.useRef([]);
+    React$1.useEffect(function () {
         var keyPress = function (ev) {
             if (ev.ctrlKey && ev.key === 'l') {
                 setIsTurnOn(function (prev) { return !prev; });
@@ -8175,7 +9413,7 @@ var LinkDebugger = function (_a) {
             ele === null || ele === void 0 ? void 0 : ele.remove();
         }
     };
-    React.useEffect(function () {
+    React$1.useEffect(function () {
         if (isTurnOn) {
             links.forEach(function (link) {
                 var _a;
@@ -8190,13 +9428,13 @@ var LinkDebugger = function (_a) {
             clearDebuggerPoint();
         };
     }, [isTurnOn, links]);
-    return (React.createElement("div", null));
+    return (React$1.createElement("div", null));
 };
 
 function useKeyboardCommands(_a) {
     var element = _a.element;
-    var _b = React.useContext(paperEventEmitterContext), emitCommandDeleteSelectedElement = _b.emitCommandDeleteSelectedElement, emitCommandDeleteSelectedLink = _b.emitCommandDeleteSelectedLink, emitCommandDeleteSelectedPort = _b.emitCommandDeleteSelectedPort, emitCommandDeleteSelectedText = _b.emitCommandDeleteSelectedText;
-    React.useEffect(function () {
+    var _b = React$1.useContext(paperEventEmitterContext), emitCommandDeleteSelectedElement = _b.emitCommandDeleteSelectedElement, emitCommandDeleteSelectedLink = _b.emitCommandDeleteSelectedLink, emitCommandDeleteSelectedPort = _b.emitCommandDeleteSelectedPort, emitCommandDeleteSelectedText = _b.emitCommandDeleteSelectedText;
+    React$1.useEffect(function () {
         var callback = function (ev) {
             var keyboardEv = ev;
             if (keyboardEv.key === "Delete") {
@@ -8246,18 +9484,18 @@ function convertElementsToTree(elements) {
 }
 var Paper = function (props) {
     var _a;
-    var _b = React.useState(props.elements), elements = _b[0], setElements = _b[1];
-    var _c = React.useState([]), elementsInTree = _c[0], setElementsInTree = _c[1];
-    var _d = React.useState(), selectedElement = _d[0], setSelectedElement = _d[1];
-    var _e = React.useState((_a = props.links) !== null && _a !== void 0 ? _a : []), links = _e[0], setLinks = _e[1];
-    var _f = React.useState(), selectedLink = _f[0], setSelectedLink = _f[1];
-    var _g = React.useState(), tempLink = _g[0], setTempLink = _g[1];
-    var _h = React.useState(props.texts), texts = _h[0], setTexts = _h[1];
-    var _j = React.useState(), selectedText = _j[0], setSelectedText = _j[1];
-    var _k = React.useState(null), selectedElementSVG = _k[0], setSelectedElementSVG = _k[1];
-    var _l = React.useState(false), mouseDownedOnPaper = _l[0], setMouseDownedOnPaper = _l[1];
-    var paperEventEmitter = React.useContext(paperEventEmitterContext);
-    var paperContainerRef = React.useRef(null);
+    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(), 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);
     useKeyboardCommands({
         element: paperContainerRef.current
     });
@@ -8265,7 +9503,7 @@ var Paper = function (props) {
         var parsedElementsInTree = convertElementsToTree(elements);
         setElementsInTree(parsedElementsInTree);
     };
-    React.useEffect(function () {
+    React$1.useEffect(function () {
         //Listen parent of elements changed, then update elements tree
         var parentChangedCancelers = elements.map(function (element) {
             var _a;
@@ -8292,7 +9530,7 @@ var Paper = function (props) {
         };
     }, elements);
     //Update elements tree when length of elements change
-    React.useEffect(function () {
+    React$1.useEffect(function () {
         updateElementsTree();
     }, [elements.length]);
     //Get all child elements of the deleted element
@@ -8306,7 +9544,7 @@ var Paper = function (props) {
         return __spreadArray(__spreadArray([], childElms, true), childOfChildElements, true);
     };
     //Listen command delete selected for element
-    React.useEffect(function () {
+    React$1.useEffect(function () {
         var listener = paperEventEmitter.onCommandDeleteSelectedElement(function () {
             if (selectedElement) {
                 var deletedChildElements = getDeletedChildElements(selectedElement);
@@ -8321,7 +9559,7 @@ var Paper = function (props) {
         };
     }, [selectedElement]);
     //Listen command delete selected for link
-    React.useEffect(function () {
+    React$1.useEffect(function () {
         var listener = paperEventEmitter.onCommandDeleteSelectedLink(function () {
             if (selectedLink) {
                 setLinks(function (prev) { return prev.filter(function (l) { return l.id !== selectedLink.id; }); });
@@ -8333,7 +9571,7 @@ var Paper = function (props) {
         };
     }, [selectedLink]);
     //Listen command delete selected for Text
-    React.useEffect(function () {
+    React$1.useEffect(function () {
         var listener = paperEventEmitter.onCommandDeleteSelectedText(function () {
             if (selectedText) {
                 setTexts(function (prev) { return prev.filter(function (t) { return t.id !== selectedText.id; }); });
@@ -8419,7 +9657,7 @@ var Paper = function (props) {
         }
         setMouseDownedOnPaper(false);
     };
-    var handlePathChange = React.useCallback(function (path, id) {
+    var handlePathChange = React$1.useCallback(function (path, id) {
         //Update path of element link, that changed
         setLinks(function (prevLinks) {
             var updatedLinkIndex = prevLinks.findIndex(function (l) { return l.id === id; });
@@ -8506,7 +9744,7 @@ var Paper = function (props) {
             setTempLink(undefined);
         }
     };
-    var handleLinkLabelMoved = React.useCallback(function (offsetX, offsetY, index, labelType) {
+    var handleLinkLabelMoved = React$1.useCallback(function (offsetX, offsetY, index, labelType) {
         setLinks(function (prevLinks) {
             var newLinks = __spreadArray([], prevLinks, true);
             var currentLink = newLinks[index];
@@ -8542,7 +9780,7 @@ var Paper = function (props) {
             return newLinks;
         });
     }, []);
-    var handleLinkLabelResized = React.useCallback(function (width, height, index, labelType) {
+    var handleLinkLabelResized = React$1.useCallback(function (width, height, index, labelType) {
         setLinks(function (prevLinks) {
             var newLinks = __spreadArray([], prevLinks, true);
             var currentLink = newLinks[index];
@@ -8575,7 +9813,7 @@ var Paper = function (props) {
             return newLinks;
         });
     }, []);
-    var handleLinkLabelContentChanged = React.useCallback(function (newValue, index, labelType) {
+    var handleLinkLabelContentChanged = React$1.useCallback(function (newValue, index, labelType) {
         setLinks(function (prevLinks) {
             var newLinks = __spreadArray([], prevLinks, true);
             var currentLink = newLinks[index];
@@ -8659,7 +9897,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.useCallback(function (index) {
+    var onLabelMoved = React$1.useCallback(function (index) {
         return function (offsetX, offsetY, labelType) {
             handleLinkLabelMoved(offsetX, offsetY, index, labelType);
         };
@@ -8668,7 +9906,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.useCallback(function (index) {
+    var onLabelResized = React$1.useCallback(function (index) {
         return function (width, height, labelType) {
             handleLinkLabelResized(width, height, index, labelType);
         };
@@ -8677,12 +9915,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.useCallback(function (index) {
+    var onLabelContentChanged = React$1.useCallback(function (index) {
         return function (newValue, labelType) {
             handleLinkLabelContentChanged(newValue, index, labelType);
         };
     }, [handleLinkLabelContentChanged]);
-    var handleClickLinkDelete = React.useCallback(function (link, index) {
+    var handleClickLinkDelete = React$1.useCallback(function (link, index) {
         return function () {
             setLinks(function (prevLinks) {
                 var newLinks = __spreadArray([], prevLinks, true);
@@ -8733,24 +9971,24 @@ var Paper = function (props) {
         var _a, _b;
         //use the defined react element or the default Element component
         var ReactElement = element.reactElement || Element;
-        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: function (id, e, ref) {
+        return (React$1.createElement("g", { key: element.id }, React$1.createElement(ReactElement, { key: "element-".concat(element.id), id: element.id, height: element.size.height, width: element.size.width, x: (_a = element.relativePosition) === null || _a === void 0 ? void 0 : _a.x, y: (_b = element.relativePosition) === null || _b === void 0 ? void 0 : _b.y, onClick: function (id, e, ref) {
                 e.stopPropagation();
                 setSelectedElementSVG(ref);
                 setSelectedElement(element);
                 setMouseDownedOnPaper(false);
             }, container: paperContainerRef.current, renderShape: element.renderShape, cssClass: element.cssClass, texts: element.texts, ports: element.ports, portMoveableAreas: element.portMoveableAreas, portSlideRailSVGClassName: element.portSlideRailSVGClassName, portDirection: element.portDirection, onPortMoved: handlePortMoved, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, 
             // portPlaceholderShape={(<Circle x={0} y={0} width={10} height={10} fill='red' positioningAnchor={PositioningAnchor.Center} />)}
-            onMouseUpAtLinkedPortPlaceholder: function (elementLink, position) { return handleMouseUpAtLinkedPortPlaceholder(elementLink, position, element); }, onTextUpdated: function (textId, newContent) { return handleElementTextChange(element, textId, newContent); } }, element.childrenElements && element.childrenElements.map(renderElementInTree))));
+            onMouseUpAtLinkedPortPlaceholder: function (elementLink, position) { return handleMouseUpAtLinkedPortPlaceholder(elementLink, position, element); }, onTextUpdated: function (textId, newContent) { return handleElementTextChange(element, textId, newContent); }, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition }, element.childrenElements && element.childrenElements.map(renderElementInTree))));
     };
-    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 },
+    return (React$1.createElement("div", { style: { position: "relative" } },
+        React$1.createElement(Ruler, { squareSize: 100, border: '1px dashed grey' }),
+        React$1.createElement("svg", { tabIndex: 0, width: size.width, height: size.height, ref: paperContainerRef, id: "paper-container", onMouseMove: handlePaperMouseMove, onMouseDown: handleMouseDownOnPaper, onMouseUp: handleMouseUpOnPaper },
             paperContainerRef.current ? elementsInTree.map(function (element, index) {
                 return renderElementInTree(element);
             }) : "",
             links && links.map(function (link, index) {
                 var _a, _b, _c, _d;
-                return (React.createElement(ElementLink, { key: link.id, id: link.id, path: link.path, sourcePosition: {
+                return (React$1.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: {
@@ -8758,26 +9996,26 @@ 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.createElement(ElementLink, { id: tempLink.id, points: tempLink.points, sourcePosition: {
+            (tempLink === null || tempLink === void 0 ? void 0 : tempLink.tempTargetPosition) && React$1.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.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$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 () {
                     setSelectedText(text);
                 } })); })),
-        React.createElement(BBoxDebugger, { elementSVG: selectedElementSVG }),
-        React.createElement(LinkDebugger, { links: links, svgContainer: paperContainerRef.current })));
+        React$1.createElement(BBoxDebugger, { elementSVG: selectedElementSVG }),
+        React$1.createElement(LinkDebugger, { links: links, svgContainer: paperContainerRef.current })));
 };
 
 function Editor(_a) {
     var editorContext = _a.editorContext;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Paper, { size: { width: 3000, height: 3000 }, elements: editorContext.elements, links: editorContext.links, texts: editorContext.texts, onPaperClicked: editorContext.onPaperClicked, onPortMoved: editorContext.onPortMoved, onElementMoved: editorContext.onElementMoved, onElementResized: editorContext.onElementResized, onLinkValidation: editorContext.validateLink, onCreatingLink: editorContext.onCreatingLink, onCreatingPortByLinking: editorContext.onCreatingPortByLinking })));
+    return (React$1.createElement(React$1.Fragment, null,
+        React$1.createElement(Paper, { size: { width: 3000, height: 3000 }, elements: editorContext.elements, links: editorContext.links, texts: editorContext.texts, onPaperClicked: editorContext.onPaperClicked, onPortMoved: editorContext.onPortMoved, onElementMoved: editorContext.onElementMoved, onElementResized: editorContext.onElementResized, onLinkValidation: editorContext.validateLink, onCreatingLink: editorContext.onCreatingLink, onCreatingPortByLinking: editorContext.onCreatingPortByLinking })));
 }
 
 exports.CircleRC = Circle;
 exports.CrescentRC = Crescent;
-exports.CustomPort = CustomPort;
+exports.CustomPortFromJSXElement = CustomPortFromJSXElement;
 exports.CustomShapeRC = CustomShape;
 exports.EditorContext = EditorContext;
 exports.Element = Element$1;