orcasvn-react-diagrams 0.1.34 → 0.1.36

package/dist/cjs/index.js

@@ -837,6 +837,9 @@ var EditorContext = /** @class */ (function () {
         get: function () {
             return this._elements;
         },
+        set: function (value) {
+            this._elements = value;
+        },
         enumerable: false,
         configurable: true
     });
@@ -844,6 +847,9 @@ var EditorContext = /** @class */ (function () {
         get: function () {
             return this._links;
         },
+        set: function (value) {
+            this._links = value;
+        },
         enumerable: false,
         configurable: true
     });
@@ -851,6 +857,9 @@ var EditorContext = /** @class */ (function () {
         get: function () {
             return this._texts;
         },
+        set: function (value) {
+            this._texts = value;
+        },
         enumerable: false,
         configurable: true
     });
@@ -858,6 +867,10 @@ var EditorContext = /** @class */ (function () {
         return this._elements.find(function (e) { return e.id === elementId; });
     };
     EditorContext.prototype.addElement = function (element) {
+        //check if element with the same id already exists
+        if (this._elements.find(function (e) { return e.id === element.id; })) {
+            throw new Error("Element with id ".concat(element.id, " already exists"));
+        }
         this._elements = __spreadArray(__spreadArray([], this._elements, true), [element], false);
         this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
     };
@@ -869,6 +882,10 @@ var EditorContext = /** @class */ (function () {
         return this._links.find(function (l) { return l.id === linkId; });
     };
     EditorContext.prototype.addLink = function (link) {
+        //check if link with the same id already exists
+        if (this._links.find(function (l) { return l.id === link.id; })) {
+            throw new Error("Link with id ".concat(link.id, " already exists"));
+        }
         this._links = __spreadArray(__spreadArray([], this._links, true), [link], false);
         this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
     };
@@ -880,6 +897,10 @@ var EditorContext = /** @class */ (function () {
         return this._texts.find(function (t) { return t.id === textId; });
     };
     EditorContext.prototype.addText = function (text) {
+        //check if text with the same id already exists
+        if (this._texts.find(function (t) { return t.id === text.id; })) {
+            throw new Error("Text with id ".concat(text.id, " already exists"));
+        }
         this._texts = __spreadArray(__spreadArray([], this._texts, true), [text], false);
         this._eventEmitter.emit(EVENT_EDITOR_CONTEXT_UPDATED);
     };
@@ -1171,80 +1192,87 @@ var LINK_TARGET_LABEL_POSITION_FROM_TARGET_PORT = { x: 15, y: 15 };
 var LINK_LABEL_POSITION_FROM_LINK_MID_POINT = { x: 0, y: 40 };
 var PORT_LABEL_POSITION = { x: 15, y: 0 };
 var TEXT_FONT_SIZE = 12;
-var TEXT_MOVING_OFFSET_THRESHOLD = 10;
 //PORT
 var PORT_PLACEHOLDER_DEFAULT_SIZE = 8;
 var PORT_PLACEHOLDER_DEFAULT_STROKE = 'green';
 var PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH = 20;
-var PORT_MOVING_OFFSET_THRESHOLD = 15;
 var PORT_DEFAULT_SIZE = 20;
 
 var SelectionFrame = function (props) {
-    var _a;
-    var bbox = (_a = props.targetSVGElement) === null || _a === void 0 ? void 0 : _a.getBBox();
-    var _b = React.useState(props.width || (bbox === null || bbox === void 0 ? void 0 : bbox.width) || MIN_ELEMENT_SIZE), width = _b[0], setWidth = _b[1];
-    var _c = React.useState(props.height || (bbox === null || bbox === void 0 ? void 0 : bbox.height) || MIN_ELEMENT_SIZE), height = _c[0], setHeight = _c[1];
-    var x = 0;
-    var y = 0;
-    var framePadding = props.framePadding || 0;
+    var _a, _b;
+    var propTargetSVGElement = props.targetSVGElement, propWidth = props.width, propHeight = props.height, propFramePadding = props.framePadding, 
+    // movingOffsetThreshold: propMovingOffsetThreshold,
+    propMovingRate = props.movingRate, propOnMove = props.onMove, propContainer = props.container, propResizability = props.resizability, propOnResize = props.onResize, PropDragDropHandlerElement = props.dragDropHandlerElement, propStrokeWidth = props.strokeWidth, propAnchor = props.anchor;
+    var bbox = propTargetSVGElement === null || propTargetSVGElement === void 0 ? void 0 : propTargetSVGElement.getBBox();
+    var _c = React.useState(propWidth || (bbox === null || bbox === void 0 ? void 0 : bbox.width) || MIN_ELEMENT_SIZE), width = _c[0], setWidth = _c[1];
+    var _d = React.useState(propHeight || (bbox === null || bbox === void 0 ? void 0 : bbox.height) || MIN_ELEMENT_SIZE), height = _d[0], setHeight = _d[1];
+    var _e = React.useState((_a = props.x) !== null && _a !== void 0 ? _a : 0), x = _e[0], setX = _e[1];
+    var _f = React.useState((_b = props.y) !== null && _b !== void 0 ? _b : 0), y = _f[0], setY = _f[1];
+    var framePadding = propFramePadding || 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 _g = React.useState(false), draggingRect = _g[0], setDraggingRect = _g[1];
+    var _h = React.useState(false), draggingCircle = _h[0], setDraggingCircle = _h[1];
+    var _j = React.useState(0), startX = _j[0], setStartX = _j[1];
+    var _k = React.useState(0), startY = _k[0], setStartY = _k[1];
+    var _l = React.useState(0), xFromMouse = _l[0], setXFromMouse = _l[1];
+    var _m = React.useState(0), yFromMouse = _m[0], setYFromMouse = _m[1];
+    var _o = React.useState(0), lastMoveTime = _o[0], setLastMoveTime = _o[1];
+    var getMousePosition = function (event) {
+        var elementBounding = propContainer.getBoundingClientRect();
+        //Coordinates of mouse on paper. 
+        var mousePosition = {
+            x: event.clientX - elementBounding.left,
+            y: event.clientY - elementBounding.top
+        };
+        return mousePosition;
+    };
     var addRectHandleMouseDown = function (event) {
         event.stopPropagation();
         if (!draggingCircle) {
-            //mouse down on rect
             setDraggingRect(true);
             setStartX(event.clientX);
             setStartY(event.clientY);
+            var mousePosition = getMousePosition(event);
+            var xFromMouse_1 = x - mousePosition.x;
+            var yFromMouse_1 = y - mousePosition.y;
+            setXFromMouse(xFromMouse_1);
+            setYFromMouse(yFromMouse_1);
         }
     };
     var rectHandleMouseMove = React.useCallback(function (event) {
         var mouseEvent = event;
         if (draggingRect) {
-            var offsetX = mouseEvent.clientX - startX;
-            var offsetY = mouseEvent.clientY - startY;
-            if (props.movingOffsetThreshold && Math.abs(offsetX) > props.movingOffsetThreshold) {
-                offsetX = offsetX / Math.abs(offsetX) * props.movingOffsetThreshold;
-            }
-            if (props.movingOffsetThreshold && Math.abs(offsetY) > props.movingOffsetThreshold) {
-                offsetY = offsetY / Math.abs(offsetY) * props.movingOffsetThreshold;
-            }
-            if (Date.now() - lastMoveTime < (props.movingRate || 0)) {
-                return;
-            }
-            // console.info('Selection frame moved by: ', offsetX, offsetY);
-            if (props.onMove) {
-                props.onMove(offsetX, offsetY);
+            //Coordinates of mouse on paper. 
+            var mousePosition = getMousePosition(mouseEvent);
+            var newX = mousePosition.x + xFromMouse;
+            var newY = mousePosition.y + yFromMouse;
+            if (propOnMove) {
+                console.log('newX', newX, 'newY', newY);
+                setX(newX);
+                setY(newY);
+                propOnMove(newX, newY);
                 setLastMoveTime(Date.now());
                 setStartX(mouseEvent.clientX);
                 setStartY(mouseEvent.clientY);
             }
         }
-    }, [draggingRect, props.onMove, props.movingRate, startX, startY, lastMoveTime]);
+    }, [draggingRect, propOnMove, propMovingRate, startX, startY, lastMoveTime, xFromMouse, yFromMouse]);
     React.useEffect(function () {
         var addRectHandleMouseUp = function () {
-            //mouse up
             setDraggingRect(false);
+            setXFromMouse(0);
+            setYFromMouse(0);
         };
-        //select container if it is a string
-        //const container = typeof props.container === 'string' ? document.querySelector(props.container) : props.container;
-        var container = props.container;
-        //add event listeners
-        container === null || container === void 0 ? void 0 : container.addEventListener('mousemove', rectHandleMouseMove);
-        container === null || container === void 0 ? void 0 : container.addEventListener('mouseup', addRectHandleMouseUp);
+        propContainer === null || propContainer === void 0 ? void 0 : propContainer.addEventListener('mousemove', rectHandleMouseMove);
+        propContainer === null || propContainer === void 0 ? void 0 : propContainer.addEventListener('mouseup', addRectHandleMouseUp);
         return function () {
-            container === null || container === void 0 ? void 0 : container.removeEventListener('mousemove', rectHandleMouseMove);
-            container === null || container === void 0 ? void 0 : container.removeEventListener('mouseup', addRectHandleMouseUp);
+            propContainer === null || propContainer === void 0 ? void 0 : propContainer.removeEventListener('mousemove', rectHandleMouseMove);
+            propContainer === null || propContainer === void 0 ? void 0 : propContainer.removeEventListener('mouseup', addRectHandleMouseUp);
         };
-    }, [props.container, rectHandleMouseMove]);
+    }, [propContainer, rectHandleMouseMove]);
     var circleHandleMouseDown = function (event) {
         event.stopPropagation();
         if (!draggingRect) {
-            // mouse down on resizing circle
             setStartX(event.clientX);
             setStartY(event.clientY);
             setDraggingCircle(true);
@@ -1256,7 +1284,7 @@ var SelectionFrame = function (props) {
             if (draggingCircle) {
                 var offsetX = mouseEvent.clientX - startX;
                 var offsetY = mouseEvent.clientY - startY;
-                if (Date.now() - lastMoveTime < (props.movingRate || 0)) {
+                if (Date.now() - lastMoveTime < (propMovingRate || 0)) {
                     return;
                 }
                 setStartX(mouseEvent.clientX);
@@ -1264,7 +1292,7 @@ var SelectionFrame = function (props) {
                 setLastMoveTime(Date.now());
                 var newWidth = width;
                 var newHeight = height;
-                if (props.resizability.keepRatio) {
+                if (propResizability.keepRatio) {
                     var resizingRatio = Math.abs(offsetX) > Math.abs(offsetY) ? (Math.abs(offsetX) / width) : (Math.abs(offsetY) / height);
                     var increasing = Math.abs(offsetX) > Math.abs(offsetY) ? offsetX > 0 : offsetY > 0;
                     offsetX = increasing ? resizingRatio * width : -resizingRatio * width;
@@ -1280,36 +1308,33 @@ var SelectionFrame = function (props) {
                 }
                 setWidth(newWidth);
                 setHeight(newHeight);
-                if (props.onResize) {
-                    props.onResize(newWidth, newHeight);
+                if (propOnResize) {
+                    propOnResize(newWidth, newHeight);
                 }
-                //}
             }
         };
         var circleHandleMouseUp = function () {
             setDraggingCircle(false);
         };
-        //select container if it is a string
-        //const container = typeof props.container === 'string' ? document.querySelector(props.container) : props.container;
-        var container = props.container;
+        var container = propContainer;
         container.addEventListener('mousemove', circleHandleMouseMove);
         container.addEventListener('mouseup', circleHandleMouseUp);
         return function () {
             container.removeEventListener('mousemove', circleHandleMouseMove);
             container.removeEventListener('mouseup', circleHandleMouseUp);
         };
-    }, [draggingCircle, startX, startY, x, y]);
+    }, [draggingCircle, width, height, lastMoveTime, propContainer, propMovingRate, propOnResize, propResizability, startX, startY]);
     var rectangleSize = Math.max(width, height);
     var leftX = framePadding;
     var topY = framePadding;
-    if (props.anchor === exports.PositioningAnchor.Center) {
+    if (propAnchor === exports.PositioningAnchor.Center) {
         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 }),
-        props.resizability.enabled ?
+        PropDragDropHandlerElement && React.createElement(PropDragDropHandlerElement, { dragging: draggingRect, onMouseDown: addRectHandleMouseDown }),
+        React.createElement("rect", { vectorEffect: "non-scaling-stroke", x: leftX, y: topY, width: width, height: height, fill: 'none', stroke: 'blue', strokeWidth: propStrokeWidth || 5, cursor: draggingRect ? 'grabbing' : 'grab', onMouseDown: addRectHandleMouseDown }),
+        propResizability.enabled ?
             (React.createElement("circle", { cursor: 'se-resize', cx: leftX + width, cy: topY + height, r: r, fill: 'blue', stroke: 'blue', onMouseDown: circleHandleMouseDown })) : null));
 };
 
@@ -1579,9 +1604,17 @@ var paperEventEmitterContext = React.createContext({
 });
 
 var Text = React.forwardRef(function (_a, ref) {
-    var id = _a.id, content = _a.content, x = _a.x, y = _a.y, width = _a.width, height = _a.height, editable = _a.editable, _b = _a.align, align = _b === void 0 ? exports.TextAlign.left : _b, fontSizeProp = _a.fontSize, border = _a.border, container = _a.container, onSelected = _a.onSelected, onMoved = _a.onMoved, onResized = _a.onResized, onContentChanged = _a.onContentChanged;
+    var id = _a.id, content = _a.content, x = _a.x, y = _a.y, width = _a.width, height = _a.height, editable = _a.editable, _b = _a.align, align = _b === void 0 ? exports.TextAlign.left : _b, fontSizeProp = _a.fontSize, border = _a.border, container = _a.container, parentAbsolutePosition = _a.parentAbsolutePosition, onSelected = _a.onSelected, onMoved = _a.onMoved, onResized = _a.onResized, onContentChanged = _a.onContentChanged;
+    console.log(content, x, y, parentAbsolutePosition);
     var _c = React.useState(false), isSelected = _c[0], setIsSelected = _c[1];
     var _d = React.useState(false), isEditing = _d[0], setIsEditing = _d[1];
+    var absolutePosition = React.useMemo(function () {
+        var _a, _b;
+        return {
+            x: ((_a = parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.x) !== null && _a !== void 0 ? _a : 0) + x,
+            y: ((_b = parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.y) !== null && _b !== void 0 ? _b : 0) + y,
+        };
+    }, [x, y, parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.x, parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.y]);
     var svgRef = React.useRef();
     var _e = React.useContext(paperEventEmitterContext), onPaperClicked = _e.onPaperClicked, emitTextSelected = _e.emitTextSelected, onPortSelected = _e.onPortSelected, onElementSelected = _e.onElementSelected, onTextSelected = _e.onTextSelected;
     React.useEffect(function () {
@@ -1617,7 +1650,7 @@ var Text = React.forwardRef(function (_a, ref) {
     //Handle click on svg element
     var handleClick = function (ev) {
         ev.stopPropagation();
-        var position = (x === undefined || y === undefined) ? undefined : {
+        var position = {
             x: x,
             y: y,
         };
@@ -1641,6 +1674,8 @@ var Text = React.forwardRef(function (_a, ref) {
         onContentChanged === null || onContentChanged === void 0 ? void 0 : onContentChanged(ev, ev.target.value);
     };
     useSelectionFrame({
+        x: absolutePosition === null || absolutePosition === void 0 ? void 0 : absolutePosition.x,
+        y: absolutePosition === null || absolutePosition === void 0 ? void 0 : absolutePosition.y,
         container: container,
         targetSVGElement: (isSelected && svgRef.current) ? svgRef.current : undefined,
         resizability: {
@@ -1650,7 +1685,6 @@ var Text = React.forwardRef(function (_a, ref) {
         onMove: onMoved,
         onResize: onResized,
         strokeWidth: 3,
-        movingOffsetThreshold: TEXT_MOVING_OFFSET_THRESHOLD,
     });
     var textAlign = React.useMemo(function () {
         switch (align) {
@@ -1710,217 +1744,6 @@ var Text = React.forwardRef(function (_a, ref) {
 });
 var Text$1 = React.memo(Text);
 
-var Port1 = React.forwardRef(function (props, ref) {
-    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, container = props.container, label = props.label, onPortLabelMoved = props.onPortLabelMoved, onPortLabelResized = props.onPortLabelResized, onPortLabelContentChanged = props.onPortLabelContentChanged, onSelected = props.onSelected, onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, onMouseMove = props.onMouseMove, calculateRotationAngle = props.calculateRotationAngle, 
-    // onManuallyTriggerRenderHandler,
-    renderShape = props.renderShape;
-    var _a = React.useState(false); _a[0]; _a[1];
-    var textRef = React.useRef(null);
-    // useEffect(() => {
-    //     const off = onManuallyTriggerRenderHandler?.(() => {
-    //         setUpdated(prev => !prev);
-    //     });
-    //     return () => {
-    //         off?.();
-    //     }
-    // }, [])
-    var rotationAngle = React.useMemo(function () {
-        if (!calculateRotationAngle)
-            return 0;
-        return calculateRotationAngle(x, y);
-    }, [calculateRotationAngle, x, y]);
-    React.useEffect(function () {
-        console.info('Testing - rendering Port ' + id);
-    });
-    var renderLabel = function (label) {
-        var content = label.content, size = label.size;
-        var position = label.position || PORT_LABEL_POSITION;
-        return React.createElement(Text$1, { id: label.id, ref: textRef, x: x + position.x, y: y + position.y, width: size.width, height: size.height, editable: label.editable, content: content, fontSize: label.fontSize, border: label.border, container: container, onMoved: function (x, y) { return onPortLabelMoved === null || onPortLabelMoved === void 0 ? void 0 : onPortLabelMoved(x, y, id); }, onResized: function (width, height) { return onPortLabelResized === null || onPortLabelResized === void 0 ? void 0 : onPortLabelResized(width, height, id); }, onContentChanged: function (ev, newValue) { return onPortLabelContentChanged === null || onPortLabelContentChanged === void 0 ? void 0 : onPortLabelContentChanged(ev, newValue, id); } });
-    };
-    var renderedShape = React.useMemo(function () {
-        if (renderShape) {
-            var RenderShape = renderShape;
-            return (React.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); }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseMove: function (e) { return onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(id, e); }, onClick: function (e) { return onSelected === null || onSelected === void 0 ? void 0 : onSelected(id, e); }, ref: ref, x: x, y: y, positioningAnchor: exports.PositioningAnchor.Center, height: height, width: width, stroke: "black", fill: "black" });
-        }
-    }, [props]);
-    return (React.createElement(React.Fragment, null,
-        renderedShape,
-        label && renderLabel(label)));
-});
-var Port = React.memo(Port1);
-
-// Render the svg <path> element
-function getCurvePathData(points, smoothing, closed) {
-    if (smoothing === void 0) { smoothing = 0.2; }
-    // Properties of a line
-    var line = function (pointA, pointB) {
-        var lengthX = pointB.x - pointA.x;
-        var lengthY = pointB.y - pointA.y;
-        return {
-            length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
-            angle: Math.atan2(lengthY, lengthX)
-        };
-    };
-    // Position of a control point
-    var controlPoint = function (current, previous, next, reverse) {
-        var p = previous || current;
-        var n = next || current;
-        var o = line(p, n);
-        var angle = o.angle + (reverse ? Math.PI : 0);
-        var length = o.length * smoothing;
-        var x = current.x + Math.cos(angle) * length;
-        var y = current.y + Math.sin(angle) * length;
-        return { x: x, y: y };
-    };
-    var pathData = [];
-    pathData.push({ type: "M", values: [points[0].x, points[0].y] });
-    for (var i = 1; i < points.length; i++) {
-        var point = points[i];
-        var cp1 = controlPoint(points[i - 1], points[i - 2], point);
-        var cp2 = controlPoint(point, points[i - 1], points[i + 1], true);
-        var command = {
-            type: "C",
-            values: [cp1.x, cp1.y, cp2.x, cp2.y, point.x, point.y]
-        };
-        pathData.push(command);
-    }
-    return pathData;
-}
-// convert pathdata to d attribute string
-function pathDataToD(pathData, decimals) {
-    if (decimals === void 0) { decimals = 3; }
-    var d = pathData
-        .map(function (com) {
-        return "".concat(com.type).concat(com.values.map(function (value) { return +value.toFixed(decimals); }).join(" "));
-    })
-        .join(" ");
-    return d;
-}
-function createSmoothPathString(points, smoothing, close) {
-    var pathData = getCurvePathData(points, smoothing);
-    var pathString = pathDataToD(pathData);
-    return pathString;
-}
-// a helper function to measure the distance between 2 points
-function dist(p1, p2) {
-    var dx = p2.x - p1.x;
-    var dy = p2.y - p1.y;
-    return Math.sqrt(dx * dx + dy * dy);
-}
-//find distance from starting point of path to a point
-function getLengthForPoint(p, thePath, precision) {
-    if (precision === void 0) { precision = 50; }
-    var pathLength = thePath.getTotalLength();
-    var theRecord = pathLength; //length of path
-    var division = pathLength / precision;
-    var theSegment;
-    for (var i = 0; i < precision; i++) {
-        // get a point on the path for thia distance
-        var _p = thePath.getPointAtLength(i * division);
-        // get the distance between the new point _p and the point p
-        var theDistance = dist(_p, p);
-        if (theDistance < theRecord) {
-            // if the distance is smaller than the record set the new record
-            theRecord = theDistance;
-            theSegment = i;
-        }
-    }
-    return (theSegment * division);
-}
-//Add points to the list of points in the correct position
-function addPointToList(point, listPoints, path) {
-    var getAddIndex = function (startIndex, endIndex) {
-        //Add in the middle if there are only 2 points
-        if ((endIndex - startIndex) === 1) {
-            return startIndex + 1;
-        }
-        var middleIndex = Math.ceil((startIndex + endIndex) / 2);
-        var lengthOfMiddlePoint = getLengthForPoint(listPoints[middleIndex], path); //distance from start point to mid point
-        var lengthOfAddedPoint = getLengthForPoint(point, path); //distance from adding point to mid point
-        //compare if lengthOfMiddlePoint is less than lengthOfAddedPoint, 
-        //then new point can be added in the range of mid point to end point, 
-        //otherwise it can be added in the range of start point to middle point.
-        if (lengthOfAddedPoint < lengthOfMiddlePoint) {
-            return getAddIndex(startIndex, middleIndex);
-        }
-        else {
-            return getAddIndex(middleIndex, endIndex);
-        }
-    };
-    var addedIndex = getAddIndex(0, listPoints.length - 1);
-    listPoints.splice(addedIndex, 0, point);
-    return __spreadArray([], listPoints, true);
-}
-
-// const topLeftOffsetOfSquareHoldingRect = (x: number, y: number, rectWidth: number, rectHeight: number, rotation?: number): IPosition => {
-//     rotation = rotation || 0;
-//     const rotationInRadians = rotation * Math.PI / 180;
-//     //calculate the bouding edge of the square that holds the rectangle with the given width and height and rotation, knowing that the square is always parallel to the x and y axis
-//     //calculate a1 equal sin of rotation * height
-//     const a1 = Math.abs(Math.sin(rotationInRadians) * rectHeight);
-//     //calculate a2 equal cos of rotation * width
-//     const a2 = Math.abs(Math.cos(rotationInRadians) * rectWidth);
-//     const a = a1 + a2;
-//     console.info(`a1: ${a1}, a2: ${a2}, a: ${a}`);
-//     //calculate b1 equal cos of rotation * height
-//     const b1 = Math.abs(Math.cos(rotationInRadians) * rectHeight);
-//     //calculate b2 equal sin of rotation * width
-//     const b2 = Math.abs(Math.sin(rotationInRadians) * rectWidth);
-//     const b = b1 + b2;
-//     console.info(`b1: ${b1}, b2: ${b2}, b: ${b}`);
-//     //const squareEdge = Math.max(rectWidth, rectHeight);
-//     return {x, y};
-//     return { x: x - (b - rectWidth) / 2, y: y - (a - rectHeight) / 2 };        
-// }
-function degreeToRadian(degree) {
-    return degree * (Math.PI / 180);
-}
-//rotate the four vertices of the rectangle
-function getRotatedRectangleCoordinates(actualPoints, centerX, centerY, angle) {
-    var coordinatesAfterRotation = [];
-    for (var i = 0; i < 4; i++) {
-        var point = actualPoints[i];
-        var tempX = point.x - centerX;
-        var tempY = point.y - centerY;
-        var rotatedX = tempX * Math.cos(degreeToRadian(angle)) - tempY * Math.sin(degreeToRadian(angle));
-        var rotatedY = tempX * Math.sin(degreeToRadian(angle)) + tempY * Math.cos(degreeToRadian(angle));
-        point.x = rotatedX + centerX;
-        point.y = rotatedY + centerY;
-        coordinatesAfterRotation.push({ x: point.x, y: point.y });
-    }
-    return coordinatesAfterRotation;
-}
-//Calculate the angle between 2 points relative to the OX axis
-function calculateAngleWithOx(pStart, pEnd) {
-    var deltaX = pEnd.x - pStart.x;
-    var deltaY = pEnd.y - pStart.y;
-    // Calculate the angle in radians
-    var angleInRadians = Math.atan2(deltaY, deltaX);
-    // Convert to degrees (optional)
-    var angleInDegrees = angleInRadians * (180 / Math.PI);
-    // Ensure the angle is positive (optional, depending on use case)
-    if (angleInDegrees < 0) {
-        angleInDegrees += 360;
-    }
-    return angleInDegrees;
-}
-
-//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" })))));
-}
-
 /**
  * Created by Alex Bol on 2/18/2017.
  */
@@ -7751,35 +7574,265 @@ var getAbsolutePosition = function (element) {
         x: x,
         y: y,
     };
+};
+var transformAbsPositionToElementRelativePosition = function (position, element) {
+    var parentElement = element.parentElement;
+    if (!parentElement) {
+        return position;
+    }
+    var absoluteParentElement = getAbsolutePosition(parentElement);
+    return {
+        x: position.x - absoluteParentElement.x,
+        y: position.y - absoluteParentElement.y,
+    };
+};
+var transformAbsPositionToRelativePositionInsideElement = function (absolutePosition, parentAbsolutePosition) {
+    var _a, _b;
+    var position = {
+        x: absolutePosition.x - ((_a = parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.x) !== null && _a !== void 0 ? _a : 0),
+        y: absolutePosition.y - ((_b = parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.y) !== null && _b !== void 0 ? _b : 0),
+    };
+    return position;
 };
 
-var makerStart = React.createElement("circle", { cx: 10, cy: 10, r: 10, fill: "blue" });
-var makerEnd = React.createElement("path", { d: "M0 0 L 20 10 L0 20 Z", fill: "blue" }); //<path d="M0 0 L 10 5 L0 10 Z"></path>
-var IElementLink = function (_a) {
-    var _b, _c;
-    var id = _a.id, path = _a.path, stroke = _a.stroke, _d = _a.strokeWidth, strokeWidth = _d === void 0 ? 4 : _d, pointsProp = _a.points, sourcePosition = _a.sourcePosition, targetPosition = _a.targetPosition, onPathChanged = _a.onPathChanged, onClickDelete = _a.onClickDelete, onSelected = _a.onSelected, onDeselected = _a.onDeselected, container = _a.container, _e = _a.markerStart, markerStart = _e === void 0 ? makerStart : _e, _f = _a.markerEnd, markerEnd = _f === void 0 ? makerEnd : _f, _g = _a.markerDistanceFromPort, markerDistanceFromPort = _g === void 0 ? LINK_MARKER_DISTANCE_FROM_PORT : _g, _h = _a.markerSize, markerSize = _h === void 0 ? LINK_MARKER_SIZE : _h, label = _a.label, sourceLabel = _a.sourceLabel, targetLabel = _a.targetLabel, onLabelMoved = _a.onLabelMoved, onLabelResized = _a.onLabelResized, onLabelContentChanged = _a.onLabelContentChanged;
-    var _j = React.useState(path), pathStr = _j[0], setPathStr = _j[1];
-    var _k = React.useState(pointsProp !== null && pointsProp !== void 0 ? pointsProp : []), points = _k[0], setPoints = _k[1];
-    var _l = React.useState(false), isDragging = _l[0], setIsDragging = _l[1];
-    var _m = React.useState(), draggingPointIndex = _m[0], setDraggingPointIndex = _m[1];
-    var _o = React.useState({
-        current: null,
-    }), selectedLabelRef = _o[0], setSelectedLabelRef = _o[1];
-    var _p = React.useState(false), isSelectedLink = _p[0], setIsSelectedLink = _p[1];
-    var _q = React.useContext(paperEventEmitterContext), onPaperClicked = _q.onPaperClicked, onElementSelected = _q.onElementSelected;
-    var pathRef = React.useRef(null);
-    var labelRef = React.useRef(null);
-    var sourceLabelRef = React.useRef(null);
-    var targetLabelRef = React.useRef(null);
-    React.useEffect(function () {
-        var paperClickListener = onPaperClicked(function () {
-            setSelectedLabelRef({
-                current: null,
-            });
-            setIsSelectedLink(false);
-            onDeselected === null || onDeselected === void 0 ? void 0 : onDeselected();
-        });
-        return function () {
+var Port1 = React.forwardRef(function (props, ref) {
+    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, container = props.container, label = props.label, parentAbsolutePosition = props.parentAbsolutePosition, onPortLabelMoved = props.onPortLabelMoved, onPortLabelResized = props.onPortLabelResized, onPortLabelContentChanged = props.onPortLabelContentChanged, onSelected = props.onSelected, onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, onMouseMove = props.onMouseMove, calculateRotationAngle = props.calculateRotationAngle, 
+    // onManuallyTriggerRenderHandler,
+    renderShape = props.renderShape;
+    var textRef = React.useRef(null);
+    var rotationAngle = React.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, parentAbsolutePosition: parentAbsolutePosition, width: size.width, height: size.height, editable: label.editable, content: content, fontSize: label.fontSize, border: label.border, container: container, onMoved: function (xOnPaper, yOnPaper) {
+                if (onPortLabelMoved) {
+                    var relativePosInSideEle = transformAbsPositionToRelativePositionInsideElement({ x: xOnPaper, y: yOnPaper }, parentAbsolutePosition);
+                    var newXPort = relativePosInSideEle.x - x;
+                    var newYPort = relativePosInSideEle.y - y;
+                    onPortLabelMoved(newXPort, newYPort, id);
+                }
+            }, onResized: function (width, height) { return onPortLabelResized === null || onPortLabelResized === void 0 ? void 0 : onPortLabelResized(width, height, id); }, onContentChanged: function (ev, newValue) { return onPortLabelContentChanged === null || onPortLabelContentChanged === void 0 ? void 0 : onPortLabelContentChanged(ev, newValue, id); } });
+    };
+    var renderedShape = React.useMemo(function () {
+        if (renderShape) {
+            var RenderShape = renderShape;
+            return (React.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); }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseMove: function (e) { return onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(id, e); }, onClick: function (e) { return onSelected === null || onSelected === void 0 ? void 0 : onSelected(id, e); }, ref: ref, x: x, y: y, positioningAnchor: exports.PositioningAnchor.Center, height: height, width: width, stroke: "black", fill: "black" });
+        }
+    }, [props]);
+    return (React.createElement(React.Fragment, null,
+        renderedShape,
+        label && renderLabel(label)));
+});
+var Port = React.memo(Port1);
+
+// Render the svg <path> element
+function getCurvePathData(points, smoothing, closed) {
+    if (smoothing === void 0) { smoothing = 0.2; }
+    // Properties of a line
+    var line = function (pointA, pointB) {
+        var lengthX = pointB.x - pointA.x;
+        var lengthY = pointB.y - pointA.y;
+        return {
+            length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
+            angle: Math.atan2(lengthY, lengthX)
+        };
+    };
+    // Position of a control point
+    var controlPoint = function (current, previous, next, reverse) {
+        var p = previous || current;
+        var n = next || current;
+        var o = line(p, n);
+        var angle = o.angle + (reverse ? Math.PI : 0);
+        var length = o.length * smoothing;
+        var x = current.x + Math.cos(angle) * length;
+        var y = current.y + Math.sin(angle) * length;
+        return { x: x, y: y };
+    };
+    var pathData = [];
+    pathData.push({ type: "M", values: [points[0].x, points[0].y] });
+    for (var i = 1; i < points.length; i++) {
+        var point = points[i];
+        var cp1 = controlPoint(points[i - 1], points[i - 2], point);
+        var cp2 = controlPoint(point, points[i - 1], points[i + 1], true);
+        var command = {
+            type: "C",
+            values: [cp1.x, cp1.y, cp2.x, cp2.y, point.x, point.y]
+        };
+        pathData.push(command);
+    }
+    return pathData;
+}
+// convert pathdata to d attribute string
+function pathDataToD(pathData, decimals) {
+    if (decimals === void 0) { decimals = 3; }
+    var d = pathData
+        .map(function (com) {
+        return "".concat(com.type).concat(com.values.map(function (value) { return +value.toFixed(decimals); }).join(" "));
+    })
+        .join(" ");
+    return d;
+}
+function createSmoothPathString(points, smoothing, close) {
+    var pathData = getCurvePathData(points, smoothing);
+    var pathString = pathDataToD(pathData);
+    return pathString;
+}
+// a helper function to measure the distance between 2 points
+function dist(p1, p2) {
+    var dx = p2.x - p1.x;
+    var dy = p2.y - p1.y;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+//find distance from starting point of path to a point
+function getLengthForPoint(p, thePath, precision) {
+    if (precision === void 0) { precision = 50; }
+    var pathLength = thePath.getTotalLength();
+    var theRecord = pathLength; //length of path
+    var division = pathLength / precision;
+    var theSegment;
+    for (var i = 0; i < precision; i++) {
+        // get a point on the path for thia distance
+        var _p = thePath.getPointAtLength(i * division);
+        // get the distance between the new point _p and the point p
+        var theDistance = dist(_p, p);
+        if (theDistance < theRecord) {
+            // if the distance is smaller than the record set the new record
+            theRecord = theDistance;
+            theSegment = i;
+        }
+    }
+    return (theSegment * division);
+}
+//Add points to the list of points in the correct position
+function addPointToList(point, listPoints, path) {
+    var getAddIndex = function (startIndex, endIndex) {
+        //Add in the middle if there are only 2 points
+        if ((endIndex - startIndex) === 1) {
+            return startIndex + 1;
+        }
+        var middleIndex = Math.ceil((startIndex + endIndex) / 2);
+        var lengthOfMiddlePoint = getLengthForPoint(listPoints[middleIndex], path); //distance from start point to mid point
+        var lengthOfAddedPoint = getLengthForPoint(point, path); //distance from adding point to mid point
+        //compare if lengthOfMiddlePoint is less than lengthOfAddedPoint, 
+        //then new point can be added in the range of mid point to end point, 
+        //otherwise it can be added in the range of start point to middle point.
+        if (lengthOfAddedPoint < lengthOfMiddlePoint) {
+            return getAddIndex(startIndex, middleIndex);
+        }
+        else {
+            return getAddIndex(middleIndex, endIndex);
+        }
+    };
+    var addedIndex = getAddIndex(0, listPoints.length - 1);
+    listPoints.splice(addedIndex, 0, point);
+    return __spreadArray([], listPoints, true);
+}
+
+// const topLeftOffsetOfSquareHoldingRect = (x: number, y: number, rectWidth: number, rectHeight: number, rotation?: number): IPosition => {
+//     rotation = rotation || 0;
+//     const rotationInRadians = rotation * Math.PI / 180;
+//     //calculate the bouding edge of the square that holds the rectangle with the given width and height and rotation, knowing that the square is always parallel to the x and y axis
+//     //calculate a1 equal sin of rotation * height
+//     const a1 = Math.abs(Math.sin(rotationInRadians) * rectHeight);
+//     //calculate a2 equal cos of rotation * width
+//     const a2 = Math.abs(Math.cos(rotationInRadians) * rectWidth);
+//     const a = a1 + a2;
+//     console.info(`a1: ${a1}, a2: ${a2}, a: ${a}`);
+//     //calculate b1 equal cos of rotation * height
+//     const b1 = Math.abs(Math.cos(rotationInRadians) * rectHeight);
+//     //calculate b2 equal sin of rotation * width
+//     const b2 = Math.abs(Math.sin(rotationInRadians) * rectWidth);
+//     const b = b1 + b2;
+//     console.info(`b1: ${b1}, b2: ${b2}, b: ${b}`);
+//     //const squareEdge = Math.max(rectWidth, rectHeight);
+//     return {x, y};
+//     return { x: x - (b - rectWidth) / 2, y: y - (a - rectHeight) / 2 };        
+// }
+function degreeToRadian(degree) {
+    return degree * (Math.PI / 180);
+}
+//rotate the four vertices of the rectangle
+function getRotatedRectangleCoordinates(actualPoints, centerX, centerY, angle) {
+    var coordinatesAfterRotation = [];
+    for (var i = 0; i < 4; i++) {
+        var point = actualPoints[i];
+        var tempX = point.x - centerX;
+        var tempY = point.y - centerY;
+        var rotatedX = tempX * Math.cos(degreeToRadian(angle)) - tempY * Math.sin(degreeToRadian(angle));
+        var rotatedY = tempX * Math.sin(degreeToRadian(angle)) + tempY * Math.cos(degreeToRadian(angle));
+        point.x = rotatedX + centerX;
+        point.y = rotatedY + centerY;
+        coordinatesAfterRotation.push({ x: point.x, y: point.y });
+    }
+    return coordinatesAfterRotation;
+}
+//Calculate the angle between 2 points relative to the OX axis
+function calculateAngleWithOx(pStart, pEnd) {
+    var deltaX = pEnd.x - pStart.x;
+    var deltaY = pEnd.y - pStart.y;
+    // Calculate the angle in radians
+    var angleInRadians = Math.atan2(deltaY, deltaX);
+    // Convert to degrees (optional)
+    var angleInDegrees = angleInRadians * (180 / Math.PI);
+    // Ensure the angle is positive (optional, depending on use case)
+    if (angleInDegrees < 0) {
+        angleInDegrees += 360;
+    }
+    return angleInDegrees;
+}
+
+//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" })))));
+}
+
+var makerStart = React.createElement("circle", { cx: 10, cy: 10, r: 10, fill: "blue" });
+var makerEnd = React.createElement("path", { d: "M0 0 L 20 10 L0 20 Z", fill: "blue" }); //<path d="M0 0 L 10 5 L0 10 Z"></path>
+var IElementLink = function (_a) {
+    var _b, _c;
+    var id = _a.id, path = _a.path, stroke = _a.stroke, _d = _a.strokeWidth, strokeWidth = _d === void 0 ? 4 : _d, pointsProp = _a.points, sourcePosition = _a.sourcePosition, targetPosition = _a.targetPosition, onPathChanged = _a.onPathChanged, onClickDelete = _a.onClickDelete, onSelected = _a.onSelected, onDeselected = _a.onDeselected, container = _a.container, _e = _a.markerStart, markerStart = _e === void 0 ? makerStart : _e, _f = _a.markerEnd, markerEnd = _f === void 0 ? makerEnd : _f, _g = _a.markerDistanceFromPort, markerDistanceFromPort = _g === void 0 ? LINK_MARKER_DISTANCE_FROM_PORT : _g, _h = _a.markerSize, markerSize = _h === void 0 ? LINK_MARKER_SIZE : _h, label = _a.label, sourceLabel = _a.sourceLabel, targetLabel = _a.targetLabel, onLabelMoved = _a.onLabelMoved, onLabelResized = _a.onLabelResized, onLabelContentChanged = _a.onLabelContentChanged;
+    var _j = React.useState(path), pathStr = _j[0], setPathStr = _j[1];
+    var _k = React.useState(pointsProp !== null && pointsProp !== void 0 ? pointsProp : []), points = _k[0], setPoints = _k[1];
+    var _l = React.useState(false), isDragging = _l[0], setIsDragging = _l[1];
+    var _m = React.useState(), draggingPointIndex = _m[0], setDraggingPointIndex = _m[1];
+    var _o = React.useState({
+        current: null,
+    }), selectedLabelRef = _o[0], setSelectedLabelRef = _o[1];
+    var _p = React.useState(false), isSelectedLink = _p[0], setIsSelectedLink = _p[1];
+    var _q = React.useContext(paperEventEmitterContext), onPaperClicked = _q.onPaperClicked, onElementSelected = _q.onElementSelected;
+    var pathRef = React.useRef(null);
+    var labelRef = React.useRef(null);
+    var sourceLabelRef = React.useRef(null);
+    var targetLabelRef = React.useRef(null);
+    var angleMarkerStart = '0';
+    var angleMarkerEnd = '0';
+    var markerStartPosition;
+    var markerEndPosition;
+    var centerPathPosition = undefined;
+    React.useEffect(function () {
+        var paperClickListener = onPaperClicked(function () {
+            setSelectedLabelRef({
+                current: null,
+            });
+            setIsSelectedLink(false);
+            onDeselected === null || onDeselected === void 0 ? void 0 : onDeselected();
+        });
+        return function () {
             paperClickListener.off();
         };
     }, []);
@@ -7887,16 +7940,22 @@ var IElementLink = function (_a) {
         setDraggingPointIndex(_draggingPointIndex);
         setPoints(pointsWithoutStartEndPoint);
     };
-    var handleLabelMoved = function (offsetX, offsetY) {
+    var handleLabelMoved = function (newX, newY) {
+        if (!onLabelMoved)
+            return;
+        var newPosition;
         switch (selectedLabelRef.current) {
             case labelRef.current:
-                onLabelMoved === null || onLabelMoved === void 0 ? void 0 : onLabelMoved(offsetX, offsetY, 'middle');
+                newPosition = transformAbsPositionToRelativePositionInsideElement({ x: newX, y: newY }, centerPathPosition);
+                onLabelMoved(newPosition.x, newPosition.y, 'middle');
                 break;
             case sourceLabelRef.current:
-                onLabelMoved === null || onLabelMoved === void 0 ? void 0 : onLabelMoved(offsetX, offsetY, 'source');
+                newPosition = transformAbsPositionToRelativePositionInsideElement({ x: newX, y: newY }, sourcePosition);
+                onLabelMoved(newPosition.x, newPosition.y, 'source');
                 break;
             case targetLabelRef.current:
-                onLabelMoved === null || onLabelMoved === void 0 ? void 0 : onLabelMoved(offsetX, offsetY, 'target');
+                newPosition = transformAbsPositionToRelativePositionInsideElement({ x: newX, y: newY }, targetPosition);
+                onLabelMoved(newPosition.x, newPosition.y, 'target');
                 break;
         }
     };
@@ -7931,7 +7990,6 @@ var IElementLink = function (_a) {
         onSelected === null || onSelected === void 0 ? void 0 : onSelected();
     };
     var renderLabel = function (label, labelType, relativePositionTo) {
-        if (relativePositionTo === void 0) { relativePositionTo = { x: 0, y: 0 }; }
         var content = label.content, size = label.size;
         var relativePosition = label.position;
         var curLabelRef;
@@ -7958,16 +8016,15 @@ var IElementLink = function (_a) {
                 throw new Error('This type of label does not exist.');
         }
         var position = {
-            x: relativePosition.x + relativePositionTo.x,
-            y: relativePosition.y + relativePositionTo.y,
+            x: relativePosition.x,
+            y: relativePosition.y,
         };
+        if (relativePositionTo) {
+            position.x += relativePositionTo.x;
+            position.y += relativePositionTo.y;
+        }
         return (React.createElement(Text$1, { id: label.id, x: position.x, y: position.y, width: size.width, height: size.height, editable: label.editable, content: content, fontSize: label.fontSize, border: label.border, ref: curLabelRef, container: container, onSelected: function () { return setSelectedLabelRef(curLabelRef); }, onMoved: handleLabelMoved, onResized: handleLabelResized, onContentChanged: handleLabelContentChanged }));
     };
-    var angleMarkerStart = '0';
-    var angleMarkerEnd = '0';
-    var markerStartPosition;
-    var markerEndPosition;
-    var centerPathPosition;
     if ((_b = pathRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute('d')) {
         if (markerStart) {
             markerStartPosition = pathRef.current.getPointAtLength(markerDistanceFromPort);
@@ -8072,7 +8129,7 @@ var getElementRotationInfo = function (element) {
 
 var Element = function (props) {
     var _a, _b;
-    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, cssClass = props.cssClass, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container; props.textsPlaceHolderFlexStyle; props.textsPlaceHolderFlexboxPosition; props.textsPlaceHolderClassName; var texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, defaultPortSize = props.defaultPortSize, onClick = props.onClick, onContextMenu = props.onContextMenu, renderShape = props.renderShape; props.onMoved; var onPortMoved = props.onPortMoved; props.onResized; var onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onMouseMove = props.onMouseMove, onMouseLeave = props.onMouseLeave, onMouseUp = props.onMouseUp, onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated;
+    var id = props.id, x = props.x, y = props.y, width = props.width, height = props.height, cssClass = props.cssClass, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, parentAbsolutePosition = props.parentAbsolutePosition; props.textsPlaceHolderFlexStyle; props.textsPlaceHolderFlexboxPosition; props.textsPlaceHolderClassName; var texts = props.texts, portSlideRailSVGClassName = props.portSlideRailSVGClassName, portMoveableAreas = props.portMoveableAreas, portDirection = props.portDirection, defaultPortSize = props.defaultPortSize, onClick = props.onClick, onContextMenu = props.onContextMenu, renderShape = props.renderShape; props.onMoved; var onPortMoved = props.onPortMoved; props.onResized; var onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onMouseMove = props.onMouseMove, onMouseLeave = props.onMouseLeave, onMouseUp = props.onMouseUp, onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onTextUpdated = props.onTextUpdated;
     var _c = React.useState(), selectedPort = _c[0], setSelectedPort = _c[1];
     var _d = React.useState(), hoveredPort = _d[0], setHoveredPort = _d[1];
     var _e = React.useState([]), ports = _e[0], setPorts = _e[1];
@@ -8082,22 +8139,24 @@ var Element = function (props) {
     var elementRef = React.useRef(null);
     var elementLinkStarted = React.useRef();
     var portsRef = React.useRef(ports);
-    React.useEffect(function () {
-        console.log('changed props.children', texts === null || texts === void 0 ? void 0 : texts[0].content);
-    }, [props.children]);
-    React.useEffect(function () {
-        return function () {
-            var _a;
-            console.log('un mount', (_a = texts === null || texts === void 0 ? void 0 : texts[0]) === null || _a === void 0 ? void 0 : _a.content);
+    var getElementAbsPosition = React.useCallback(function () {
+        var position = {
+            x: x,
+            y: y,
         };
-    }, []);
+        if (parentAbsolutePosition) {
+            position.x += parentAbsolutePosition.x;
+            position.y += parentAbsolutePosition.y;
+        }
+        return position;
+    }, [x, y, parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.x, parentAbsolutePosition === null || parentAbsolutePosition === void 0 ? void 0 : parentAbsolutePosition.y]);
+    var elementAbsPosition = React.useMemo(function () { return getElementAbsPosition(); }, [getElementAbsPosition]);
     //Listen to manually trigger render event
     React.useEffect(function () {
         var _a;
         var off = (_a = props.onManuallyTriggerRenderPort) === null || _a === void 0 ? void 0 : _a.call(props, function (portId, elementId) {
             if (elementId !== id)
                 return;
-            console.log('onManuallyTriggerRenderPort', id);
             setPorts(function (prev) { return __spreadArray([], prev, true); });
         });
         return function () {
@@ -8108,13 +8167,8 @@ var Element = function (props) {
     React.useEffect(function () {
         portsRef.current = ports;
     }, [ports]);
-    React.useEffect(function () {
-        var _a;
-        console.info('Rendering Element ' + ((_a = texts === null || texts === void 0 ? void 0 : texts[0]) === null || _a === void 0 ? void 0 : _a.content) || id, props.ports);
-    });
     //Listen a new port is created, after add new port to ports state
     React.useEffect(function () {
-        console.info('Ports changed', props.ports);
         setPorts(function (prev) {
             var _a, _b;
             return (_b = (_a = props.ports) === null || _a === void 0 ? void 0 : _a.map(function (p, index) {
@@ -8312,11 +8366,14 @@ var Element = function (props) {
         }
         return newPosition || tempNewPosition;
     };
-    var handlePortMove = function (offsetX, offsetY) {
+    var handlePortMove = function (newX, newY) {
         if (!selectedPort)
             return;
         var oldPosition = __assign({}, selectedPort.position);
-        var tempNewPosition = { x: oldPosition.x + offsetX, y: oldPosition.y + offsetY };
+        var tempNewPosition = transformAbsPositionToRelativePositionInsideElement({
+            x: newX,
+            y: newY,
+        }, elementAbsPosition);
         //handle to keep the port always in the correct allowed position
         var newPosition = normalizePortPosition(tempNewPosition);
         if (newPosition) {
@@ -8349,15 +8406,17 @@ var Element = function (props) {
         }
     }, [_paperEventEmitterContext, potentialPortPosition]);
     //Update state when label of port is moved
-    var handlePortLabelMoved = React.useCallback(function (offsetX, offsetY, portId) {
+    var handlePortLabelMoved = React.useCallback(function (newX, newY, portId) {
         setPorts(function (prevPorts) {
             return prevPorts.map(function (p) {
                 if (p.id === portId && p.label) {
-                    if (!p.label.position) {
-                        p.label.position = PORT_LABEL_POSITION;
-                    }
-                    p.label.position.x += offsetX;
-                    p.label.position.y += offsetY;
+                    var newLabel = Object.assign(Object.create(Object.getPrototypeOf(p.label)), p.label);
+                    var newPosition = {
+                        x: newX,
+                        y: newY
+                    };
+                    newLabel.position = newPosition;
+                    p.label = newLabel;
                 }
                 return p;
             });
@@ -8516,9 +8575,11 @@ var Element = function (props) {
             enabled: false,
             keepRatio: false
         },
+        x: selectedPort ? elementAbsPosition.x + selectedPort.position.x : undefined,
+        y: selectedPort ? elementAbsPosition.y + selectedPort.position.y : undefined,
         // width: selectedPort?.size.width,
         // height: selectedPort?.size.height,
-        movingOffsetThreshold: PORT_MOVING_OFFSET_THRESHOLD,
+        // movingOffsetThreshold: PORT_MOVING_OFFSET_THRESHOLD,
         onMove: handlePortMove
     });
     useSelectionFrame({
@@ -8536,7 +8597,7 @@ var Element = function (props) {
             : React.createElement("rect", { x: potentialPortPosition.x - PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH / 2, y: potentialPortPosition.y - PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH / 2, width: PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH, height: PORT_PLACEHOLDER_DEFAULT_STROKE_WIDTH, rx: PORT_PLACEHOLDER_DEFAULT_SIZE, ry: PORT_PLACEHOLDER_DEFAULT_SIZE, stroke: PORT_PLACEHOLDER_DEFAULT_STROKE, fill: "none", strokeWidth: 3 })), ports === null || ports === void 0 ? void 0 :
         ports.map(function (p, index) {
             var _a, _b, _c, _d, _e, _f;
-            return React.createElement(Port, { key: p.id, ref: p.ref, id: p.id, x: p.position.x, y: p.position.y, width: (_c = (_b = (_a = p.size) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : defaultPortSize) !== null && _c !== void 0 ? _c : PORT_DEFAULT_SIZE, height: (_f = (_e = (_d = p.size) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : defaultPortSize) !== null && _f !== void 0 ? _f : PORT_DEFAULT_SIZE, container: container, 
+            return React.createElement(Port, { key: p.id, ref: p.ref, id: p.id, x: p.position.x, y: p.position.y, parentAbsolutePosition: elementAbsPosition, width: (_c = (_b = (_a = p.size) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : defaultPortSize) !== null && _c !== void 0 ? _c : PORT_DEFAULT_SIZE, height: (_f = (_e = (_d = p.size) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : defaultPortSize) !== null && _f !== void 0 ? _f : PORT_DEFAULT_SIZE, container: container, 
                 // rotation={rotatePort(p)}
                 calculateRotationAngle: rotatePort, label: p.label, onPortLabelMoved: handlePortLabelMoved, onPortLabelResized: handlePortLabelResized, onPortLabelContentChanged: handlePortLabelContentChanged, onSelected: handleSelectedPort, onMouseDown: handlePortMouseDown, onMouseUp: handlePortMouseUp, onMouseMove: handlePortMouseMove, 
                 // onMouseEnter={() => {
@@ -8548,7 +8609,7 @@ var Element = function (props) {
         }), 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, editable: t.editable, align: t.align, fontSize: t.fontSize, border: t.border, container: container, style: t.style, onContentChanged: function (ev, newContent) { return onTextUpdated === null || onTextUpdated === void 0 ? void 0 : onTextUpdated(id, t.id, newContent); } });
+            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) || 0, y: ((_b = t.position) === null || _b === void 0 ? void 0 : _b.y) || 0, width: t.size.width, height: t.size.height, editable: t.editable, align: t.align, fontSize: t.fontSize, border: t.border, container: container, style: t.style, parentAbsolutePosition: elementAbsPosition, onContentChanged: function (ev, newContent) { return onTextUpdated === null || onTextUpdated === void 0 ? void 0 : onTextUpdated(id, t.id, newContent); } });
         }),
         children));
 };
@@ -8814,11 +8875,6 @@ function convertElementsToTree(elements) {
         var foundChildElements = possibleChildElements.filter(function (ele) { var _a; return ((_a = ele.parentElement) === null || _a === void 0 ? void 0 : _a.id) === elementNodeInTree.id; });
         var orphanedElements = possibleChildElements.filter(function (ele) { var _a; return ((_a = ele.parentElement) === null || _a === void 0 ? void 0 : _a.id) !== elementNodeInTree.id; });
         var childElementsWithChild = foundChildElements.map(function (_elementNodeInTree) {
-            // const relativePosition = {
-            //     x: _elementNodeInTree.position.x - elementNodeInTree.position.x,
-            //     y: _elementNodeInTree.position.y - elementNodeInTree.position.y,
-            // }
-            // _elementNodeInTree.relativePosition = relativePosition;
             var newNode = findChildElementsOfNode(_elementNodeInTree, orphanedElements);
             return newNode;
         });
@@ -8828,7 +8884,6 @@ function convertElementsToTree(elements) {
     var parentElms = elements.filter(function (e) { return !e.parentElement; });
     var childElms = elements.filter(function (e) { return e.parentElement; });
     var parsedElementsInTree = parentElms.map(function (ele) {
-        // ele.relativePosition = ele.position;
         var eleWithChild = findChildElementsOfNode(ele, childElms);
         return eleWithChild;
     });
@@ -8849,10 +8904,10 @@ var Paper = function (props) {
     var paperContainerRef = React.useRef(null);
     var tempLinkRef = React.useRef(tempLink); //Cache tempLink to avoid re-render when tempLink changed
     var elementsRef = React.useRef(elements); //Cache elements to avoid re-render when elements changed
+    var linksRef = React.useRef(links); //Cache links to avoid re-render when links changed
+    var textsRef = React.useRef(texts); //Cache texts to avoid re-render when texts changed
     var size = props.size;
-    React.useEffect(function () {
-        console.log('Render Paper');
-    });
+    var selectedElementAbsPosition = React.useMemo(function () { return selectedElement ? getAbsolutePosition(selectedElement) : null; }, [selectedElement]);
     React.useEffect(function () {
         setElements(props.elements);
     }, [props.elements]);
@@ -8864,17 +8919,27 @@ var Paper = function (props) {
     }, [props.texts]);
     React.useEffect(function () {
         var off = props.onManuallyTriggerRenderElement(function (elementId) {
-            console.log('onManuallyTriggerRenderElement');
-            setElements(function (prev) { return __spreadArray([], prev, true); });
+            setElements(__spreadArray([], elements, true));
+            if (props.onElementsChanged) {
+                props.onElementsChanged(__spreadArray([], elements, true));
+            }
         });
         return function () {
             off();
         };
-    }, [props.onManuallyTriggerRenderElement]);
+    }, [props.onManuallyTriggerRenderElement, props.onElementsChanged, elements]);
     //Cache elements to avoid re-render when elements changed
     React.useEffect(function () {
         elementsRef.current = elements;
     }, [elements]);
+    //Cache links to avoid re-render when links changed
+    React.useEffect(function () {
+        linksRef.current = links;
+    }, [links]);
+    //Cache texts to avoid re-render when texts changed
+    React.useEffect(function () {
+        textsRef.current = texts;
+    }, [texts]);
     useKeyboardCommands({
         element: paperContainerRef.current
     });
@@ -8922,7 +8987,6 @@ var Paper = function (props) {
         var parentChangedCancelers = elementsRef.current.map(function (element) {
             var _a;
             return (_a = element.onParentChanged) === null || _a === void 0 ? void 0 : _a.call(element, function (newPa, oldPa) {
-                console.log('onParentChanged');
                 updateElementsTree();
             });
         });
@@ -8931,13 +8995,18 @@ var Paper = function (props) {
             var _a;
             return (_a = element.onAddedPort) === null || _a === void 0 ? void 0 : _a.call(element, function (newPort) {
                 console.log("A new port has been added to element ".concat(element.id));
-                //Set state to re-render component
-                setElements(function (prev) { return prev.map(function (ele) {
+                var prevElements = elementsRef.current;
+                var newElements = prevElements.map(function (ele) {
                     if (ele.id === element.id) {
                         ele.ports = __spreadArray([], (ele.ports || []), true);
                     }
                     return ele;
-                }); });
+                });
+                //Set state to re-render component
+                setElements(newElements);
+                if (props.onElementsChanged) {
+                    props.onElementsChanged(newElements);
+                }
             });
         });
         return function () {
@@ -8966,8 +9035,20 @@ var Paper = function (props) {
             if (selectedElement) {
                 var deletedChildElements = getDeletedChildElements(selectedElement);
                 var deletedElementIds_1 = __spreadArray(__spreadArray([], deletedChildElements, true), [selectedElement], false).map(function (e) { return e.id; });
-                setElements(function (prev) { return prev.filter(function (e) { return !deletedElementIds_1.includes(e.id); }); });
-                setLinks(function (prevLinks) { return prevLinks.filter(function (l) { return !deletedElementIds_1.includes(l.sourceElement.id) && !deletedElementIds_1.includes(l.targetElement.id); }); });
+                var prevElements = elementsRef.current;
+                var newElements = prevElements.filter(function (e) { return !deletedElementIds_1.includes(e.id); });
+                //Set state to re-render component
+                setElements(newElements);
+                if (props.onElementsChanged) {
+                    props.onElementsChanged(newElements);
+                }
+                //Update links
+                var prevLinks = linksRef.current;
+                var newLinks = prevLinks.filter(function (l) { return !deletedElementIds_1.includes(l.sourceElement.id) && !deletedElementIds_1.includes(l.targetElement.id); });
+                setLinks(newLinks);
+                if (props.onLinksChanged) {
+                    props.onLinksChanged(newLinks);
+                }
                 setSelectedElement(undefined);
                 setSelectedElementSVG(null);
             }
@@ -8979,14 +9060,19 @@ var Paper = function (props) {
         return function () {
             listener.off();
         };
-    }, [selectedElement]);
+    }, [selectedElement, props.onElementsChanged]);
     //Listen command delete selected for link
     React.useEffect(function () {
         var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedLink(function () {
             if (selectedLink) {
-                setLinks(function (prev) { return prev.filter(function (l) { return l.id !== selectedLink.id; }); });
+                var prevLinks = linksRef.current;
+                var newLinks = prevLinks.filter(function (l) { return l.id !== selectedLink.id; });
+                setLinks(links);
                 setSelectedLink(undefined);
+                if (props.onLinksChanged) {
+                    props.onLinksChanged(newLinks);
+                }
             }
         });
         //broadcast selected link to parent component
@@ -8996,13 +9082,18 @@ var Paper = function (props) {
         return function () {
             listener.off();
         };
-    }, [selectedLink]);
+    }, [selectedLink, props.onLinksChanged]);
     //Listen command delete selected for Text
     React.useEffect(function () {
         var _a;
         var listener = paperEventEmitter.onCommandDeleteSelectedText(function () {
             if (selectedText) {
-                setTexts(function (prev) { return prev.filter(function (t) { return t.id !== selectedText.id; }); });
+                var prevTexts = textsRef.current;
+                var newTexts = prevTexts.filter(function (t) { return t.id !== selectedText.id; });
+                setTexts(newTexts);
+                if (props.onTextsChanged) {
+                    props.onTextsChanged(newTexts);
+                }
                 setSelectedText(undefined);
             }
         });
@@ -9013,7 +9104,7 @@ var Paper = function (props) {
         return function () {
             listener.off();
         };
-    }, [selectedText]);
+    }, [selectedText, props.onTextsChanged]);
     var handlePaperMouseMove = function (ev) {
         var _a;
         //if there is a temp link, update the temp target point
@@ -9078,17 +9169,22 @@ var Paper = function (props) {
     };
     var handlePathChange = React.useCallback(function (path, id) {
         //Update path of element link, that changed
-        setLinks(function (prevLinks) {
-            var updatedLinkIndex = prevLinks.findIndex(function (l) { return l.id === id; });
-            prevLinks[updatedLinkIndex].path = path;
-            return __spreadArray([], prevLinks, true);
-        });
-    }, []);
+        // const prevLinks = linksRef.current;
+        var updatedLinkIndex = links.findIndex(function (l) { return l.id === id; });
+        links[updatedLinkIndex].path = path;
+        var newLinks = __spreadArray([], links, true);
+        setLinks(newLinks);
+        if (props.onLinksChanged) {
+            props.onLinksChanged(newLinks);
+        }
+    }, [props.onLinksChanged, links]);
     var handlePortMoved = React.useCallback(function (port, elementId, oldPosition, newPosition) {
+        var _a;
         var element = elementsRef.current.find(function (e) { return e.id === elementId; });
         if (element) {
             //set links equals a clone links to re-render links with new position
-            setLinks(function (prev) { return prev.map(function (link) {
+            var prevLinks = linksRef.current;
+            var newLinks = prevLinks.map(function (link) {
                 var _a, _b;
                 if (link.sourceElement.id === elementId && link.sourcePort.id === port.id) {
                     link.sourcePort.position = newPosition;
@@ -9097,24 +9193,30 @@ var Paper = function (props) {
                     link.targetPort.position = newPosition;
                 }
                 return link;
-            }); });
-            //Update port position in element, not re-render
-            setElements(function (prevElements) {
-                var _a;
-                var updatedElementIndex = prevElements.findIndex(function (e) { return e.id === elementId; });
-                prevElements[updatedElementIndex].ports = (_a = prevElements[updatedElementIndex].ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
-                    if (p.id === port.id) {
-                        p.position = newPosition;
-                    }
-                    return p;
-                });
-                return prevElements;
             });
+            setLinks(newLinks);
+            if (props.onLinksChanged) {
+                props.onLinksChanged(newLinks);
+            }
+            var newElements = elementsRef.current;
+            var updatedElementIndex = newElements.findIndex(function (e) { return e.id === elementId; });
+            newElements[updatedElementIndex].ports = (_a = newElements[updatedElementIndex].ports) === null || _a === void 0 ? void 0 : _a.map(function (p) {
+                if (p.id === port.id) {
+                    p.position = newPosition;
+                }
+                return p;
+            });
+            //Update port position in element, not re-render
+            //To avoid re-render
+            setElements(newElements);
+            if (props.onElementsChanged) {
+                props.onElementsChanged(newElements);
+            }
             if (props.onPortMoved) {
                 props.onPortMoved(newPosition, port, element);
             }
         }
-    }, [props.onPortMoved]);
+    }, [props.onPortMoved, props.onElementsChanged, props.onLinksChanged]);
     //Handle creating a new element link
     var handlePortMouseDown = React.useCallback(function (ev, port, elementId) {
         var _a;
@@ -9163,112 +9265,112 @@ var Paper = function (props) {
         if (tempLinkRef.current) {
             //Check if mouse up point is mouse down point or not
             var isMouseUpOnNotSelf = tempLinkRef.current.sourcePort.id !== port.id || tempLinkRef.current.sourceElement.id !== elementId;
-            var newElementLink_1 = null;
+            var newElementLink = null;
             if (isMouseUpOnNotSelf) {
                 var _b = tempLinkRef.current, sourcePort = _b.sourcePort, sourceElement = _b.sourceElement;
                 var targetElement = elementsRef.current.find(function (e) { return e.id === elementId; });
-                newElementLink_1 = createElementLink(sourcePort, sourceElement, port, targetElement);
+                newElementLink = createElementLink(sourcePort, sourceElement, port, targetElement);
             }
-            if (newElementLink_1) {
-                setLinks(function (prev) { return __spreadArray(__spreadArray([], prev, true), [newElementLink_1], false); });
-                paperEventEmitter.emitElementLinkEnded(newElementLink_1);
+            if (newElementLink) {
+                var prevLinks = linksRef.current;
+                var newLinks = __spreadArray(__spreadArray([], prevLinks, true), [newElementLink], false);
+                setLinks(newLinks);
+                if (props.onLinksChanged) {
+                    props.onLinksChanged(newLinks);
+                }
+                paperEventEmitter.emitElementLinkEnded(newElementLink);
             }
             else {
                 paperEventEmitter.emitElementLinkEnded();
             }
             setTempLink(null);
         }
-    }, [paperEventEmitter, createElementLink, props.onPortMouseUp]);
-    var handleLinkLabelMoved = React.useCallback(function (offsetX, offsetY, index, labelType) {
-        setLinks(function (prevLinks) {
-            var newLinks = __spreadArray([], prevLinks, true);
-            var currentLink = newLinks[index];
-            switch (labelType) {
-                case 'middle': {
-                    var oldPosition = currentLink.label.position || LINK_LABEL_POSITION_FROM_LINK_MID_POINT;
-                    var newPosition = {
-                        x: oldPosition.x + offsetX,
-                        y: oldPosition.y + offsetY,
-                    };
-                    currentLink.label.position = newPosition;
-                    break;
-                }
-                case 'source': {
-                    var oldPosition = currentLink.sourceLabel.position || LINK_SOURCE_LABEL_POSITION_FROM_SOURCE_PORT;
-                    var newPosition = {
-                        x: oldPosition.x + offsetX,
-                        y: oldPosition.y + offsetY,
-                    };
-                    currentLink.sourceLabel.position = newPosition;
-                    break;
-                }
-                case 'target': {
-                    var oldPosition = currentLink.targetLabel.position || LINK_TARGET_LABEL_POSITION_FROM_TARGET_PORT;
-                    var newPosition = {
-                        x: oldPosition.x + offsetX,
-                        y: oldPosition.y + offsetY,
-                    };
-                    currentLink.targetLabel.position = newPosition;
-                    break;
-                }
+    }, [paperEventEmitter, createElementLink, props.onPortMouseUp, props.onLinksChanged]);
+    var handleLinkLabelMoved = React.useCallback(function (newX, newY, index, labelType) {
+        var prevLinks = linksRef.current;
+        var newLinks = __spreadArray([], prevLinks, true);
+        var currentLink = newLinks[index];
+        var newPosition = {
+            x: newX,
+            y: newY,
+        };
+        switch (labelType) {
+            case 'middle': {
+                currentLink.label.position = newPosition;
+                break;
             }
-            return newLinks;
-        });
-    }, []);
+            case 'source': {
+                currentLink.sourceLabel.position = newPosition;
+                break;
+            }
+            case 'target': {
+                currentLink.targetLabel.position = newPosition;
+                break;
+            }
+        }
+        setLinks(newLinks);
+        if (props.onLinksChanged) {
+            props.onLinksChanged(newLinks);
+        }
+    }, [props.onLinksChanged]);
     var handleLinkLabelResized = React.useCallback(function (width, height, index, labelType) {
-        setLinks(function (prevLinks) {
-            var newLinks = __spreadArray([], prevLinks, true);
-            var currentLink = newLinks[index];
-            switch (labelType) {
-                case 'middle': {
-                    var newSize = {
-                        width: width,
-                        height: height,
-                    };
-                    currentLink.label.size = newSize;
-                    break;
-                }
-                case 'source': {
-                    var newSize = {
-                        width: width,
-                        height: height,
-                    };
-                    currentLink.sourceLabel.size = newSize;
-                    break;
-                }
-                case 'target': {
-                    var newSize = {
-                        width: width,
-                        height: height,
-                    };
-                    currentLink.targetLabel.size = newSize;
-                    break;
-                }
+        var prevLinks = linksRef.current;
+        var newLinks = __spreadArray([], prevLinks, true);
+        var currentLink = newLinks[index];
+        switch (labelType) {
+            case 'middle': {
+                var newSize = {
+                    width: width,
+                    height: height,
+                };
+                currentLink.label.size = newSize;
+                break;
             }
-            return newLinks;
-        });
-    }, []);
+            case 'source': {
+                var newSize = {
+                    width: width,
+                    height: height,
+                };
+                currentLink.sourceLabel.size = newSize;
+                break;
+            }
+            case 'target': {
+                var newSize = {
+                    width: width,
+                    height: height,
+                };
+                currentLink.targetLabel.size = newSize;
+                break;
+            }
+        }
+        setLinks(newLinks);
+        if (props.onLinksChanged) {
+            props.onLinksChanged(newLinks);
+        }
+    }, [props.onLinksChanged]);
     var handleLinkLabelContentChanged = React.useCallback(function (newValue, index, labelType) {
-        setLinks(function (prevLinks) {
-            var newLinks = __spreadArray([], prevLinks, true);
-            var currentLink = newLinks[index];
-            switch (labelType) {
-                case 'middle': {
-                    currentLink.label.content = newValue;
-                    break;
-                }
-                case 'source': {
-                    currentLink.sourceLabel.content = newValue;
-                    break;
-                }
-                case 'target': {
-                    currentLink.targetLabel.content = newValue;
-                    break;
-                }
+        var prevLinks = linksRef.current;
+        var newLinks = __spreadArray([], prevLinks, true);
+        var currentLink = newLinks[index];
+        switch (labelType) {
+            case 'middle': {
+                currentLink.label.content = newValue;
+                break;
             }
-            return newLinks;
-        });
-    }, []);
+            case 'source': {
+                currentLink.sourceLabel.content = newValue;
+                break;
+            }
+            case 'target': {
+                currentLink.targetLabel.content = newValue;
+                break;
+            }
+        }
+        setLinks(newLinks);
+        if (props.onLinksChanged) {
+            props.onLinksChanged(newLinks);
+        }
+    }, [props.onLinksChanged]);
     var handleSelectLink = function (link, index) {
         setSelectedLink(link);
     };
@@ -9276,12 +9378,10 @@ var Paper = function (props) {
         setSelectedLink(undefined);
     };
     //update absolute position of element and absolute position of children elements
-    var updateElementPosition = function (element, movementX, movementY) {
-        element.position.x += movementX;
-        element.position.y += movementY;
-        // if (element.childrenElementsInTree && element.childrenElementsInTree.length > 0) {
-        //     element.childrenElementsInTree = element.childrenElementsInTree.map(child => updateElementPosition(child, movementX, movementY));
-        // }
+    var updateElementPosition = function (element, x, y) {
+        var relativePosition = transformAbsPositionToElementRelativePosition({ x: x, y: y }, element);
+        element.position.x = relativePosition.x;
+        element.position.y = relativePosition.y;
         return element;
     };
     //use selection frame
@@ -9292,18 +9392,16 @@ var Paper = function (props) {
             enabled: true,
             keepRatio: true
         },
+        x: selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.x,
+        y: selectedElementAbsPosition === null || selectedElementAbsPosition === void 0 ? void 0 : selectedElementAbsPosition.y,
         width: selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size.width,
         height: selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.size.height,
         //movingOffsetThreshold: ELEMENT_MOVING_OFFSET_THRESHOLD,
-        onMove: function (offsetX, offsetY) {
+        onMove: function (newX, newY) {
             if (!selectedElement)
                 return;
             var oldPosition = __assign({}, selectedElement.position);
-            var newElementPosition = updateElementPosition(selectedElement, offsetX, offsetY);
-            // newElementPosition.relativePosition = {
-            //     x: newElementPosition.relativePosition!.x + offsetX,
-            //     y: newElementPosition.relativePosition!.y + offsetY
-            // }
+            var newElementPosition = updateElementPosition(selectedElement, newX, newY);
             var indexSelectedElement = elements.findIndex(function (e) { return e.id === selectedElement.id; });
             //Set state to re-render UI with new position
             setElementsInTree(function (prev) { return __spreadArray([], prev, true); });
@@ -9320,7 +9418,11 @@ var Paper = function (props) {
             var oldSize = selectedElement.size;
             var newSize = { width: width, height: height };
             elements[indexSelectedElement].size = newSize;
-            setElements(__spreadArray([], elements, true));
+            var newElements = __spreadArray([], elements, true);
+            setElements(newElements);
+            if (props.onElementsChanged) {
+                props.onElementsChanged(newElements);
+            }
             if (props.onElementResized) {
                 props.onElementResized(newSize, selectedElement, indexSelectedElement);
             }
@@ -9333,8 +9435,8 @@ var Paper = function (props) {
        avoid causing the components using it to re-render unnecessarily
        */
     var onLabelMoved = React.useCallback(function (index) {
-        return function (offsetX, offsetY, labelType) {
-            handleLinkLabelMoved(offsetX, offsetY, index, labelType);
+        return function (newX, newY, labelType) {
+            handleLinkLabelMoved(newX, newY, index, labelType);
         };
     }, [handleLinkLabelMoved]);
     /*
@@ -9357,18 +9459,20 @@ var Paper = function (props) {
     }, [handleLinkLabelContentChanged]);
     var handleClickLinkDelete = React.useCallback(function (link, index) {
         return function () {
-            setLinks(function (prevLinks) {
-                var newLinks = __spreadArray([], prevLinks, true);
-                newLinks.splice(index, 1);
-                return newLinks;
-            });
+            var prevLinks = linksRef.current;
+            var newLinks = __spreadArray([], prevLinks, true);
+            newLinks.splice(index, 1);
+            setLinks(newLinks);
+            if (props.onLinksChanged) {
+                props.onLinksChanged(newLinks);
+            }
         };
-    }, []);
+    }, [props.onLinksChanged]);
     var handleMouseUpAtLinkedPortPlaceholder = React.useCallback(function (link, position, targetElementId) {
         var targetElement = elementsRef.current.find(function (e) { return e.id === targetElementId; });
         if (!targetElement)
             return;
-        console.log("A port could have been created at position ".concat(JSON.stringify(position), " on element ").concat(targetElementId, " by linking from element ").concat(link.sourceElement.id));
+        console.info("A port could have been created at position ".concat(JSON.stringify(position), " on element ").concat(targetElementId, " by linking from element ").concat(link.sourceElement.id));
         if (props.onCreatingPortByLinking) {
             var sourcePort = link.sourcePort, sourceElement = link.sourceElement;
             //Handle create port via onCreatingPortByLinking prop
@@ -9377,11 +9481,16 @@ var Paper = function (props) {
                 //Add new port to target element
                 targetElement.addPort(targetPort);
                 //Create new link with created port, that is returned.
-                var newElementLink_2 = createElementLink(sourcePort, sourceElement, targetPort, targetElement);
+                var newElementLink = createElementLink(sourcePort, sourceElement, targetPort, targetElement);
                 //Create link and clear some thing, then return
-                if (newElementLink_2) {
-                    setLinks(function (prev) { return __spreadArray(__spreadArray([], prev, true), [newElementLink_2], false); });
-                    paperEventEmitter.emitElementLinkEnded(newElementLink_2);
+                if (newElementLink) {
+                    var prevLinks = linksRef.current;
+                    var newLinks = __spreadArray(__spreadArray([], prevLinks, true), [newElementLink], false);
+                    setLinks(newLinks);
+                    if (props.onLinksChanged) {
+                        props.onLinksChanged(newLinks);
+                    }
+                    paperEventEmitter.emitElementLinkEnded(newElementLink);
                     setTempLink(null);
                     return;
                 }
@@ -9390,21 +9499,24 @@ var Paper = function (props) {
         //Clear tempLink
         setTempLink(null);
         paperEventEmitter.emitElementLinkEnded();
-    }, [props.onCreatingPortByLinking, createElementLink, paperEventEmitter]);
+    }, [props.onCreatingPortByLinking, createElementLink, paperEventEmitter, props.onLinksChanged]);
     var handleElementTextChange = React.useCallback(function (elementId, textId, newContent) {
-        setElements(function (prevElms) {
-            return prevElms.map(function (curEle) {
-                //Find changed text of element to update the content for it.
-                if (curEle.id === elementId && curEle.texts) {
-                    var updatedTextId = curEle.texts.findIndex(function (t) { return t.id === textId; });
-                    if (updatedTextId !== undefined) {
-                        curEle.texts[updatedTextId].content = newContent;
-                    }
+        var prevElms = elementsRef.current;
+        var newElements = prevElms.map(function (curEle) {
+            //Find changed text of element to update the content for it.
+            if (curEle.id === elementId && curEle.texts) {
+                var updatedTextId = curEle.texts.findIndex(function (t) { return t.id === textId; });
+                if (updatedTextId !== undefined) {
+                    curEle.texts[updatedTextId].content = newContent;
                 }
-                return curEle;
-            });
+            }
+            return curEle;
         });
-    }, []);
+        setElements(newElements);
+        if (props.onElementsChanged) {
+            props.onElementsChanged(newElements);
+        }
+    }, [props.onElementsChanged]);
     var handleElementClicked = React.useCallback(function (elementId, e, ref) {
         e.stopPropagation();
         var tempLink = tempLinkRef.current;
@@ -9459,14 +9571,8 @@ var Paper = function (props) {
         return (React.createElement("g", { id: "group-of-element-".concat(element.id), key: element.id },
             React.createElement(ReactElement, { key: "element-".concat(element.id), id: element.id, height: element.size.height, width: element.size.width, x: element.position.x, y: element.position.y, onClick: handleElementClicked, onContextMenu: handleContextMenu, onMouseUp: handleMouseUp, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, container: paperContainerRef.current, renderShape: element.renderShape, cssClass: element.cssClass, texts: element.texts, ports: element.ports, portMoveableAreas: element.portMoveableAreas, portSlideRailSVGClassName: element.portSlideRailSVGClassName, portDirection: element.portDirection, defaultPortSize: element.defaultPortSize, onPortMoved: handlePortMoved, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, 
                 // portPlaceholderShape={(<Circle x={0} y={0} width={10} height={10} fill='red' positioningAnchor={PositioningAnchor.Center} />)}
-                onMouseUpAtLinkedPortPlaceholder: handleMouseUpAtLinkedPortPlaceholder, onTextUpdated: handleElementTextChange, onManuallyTriggerRenderPort: props.onManuallyTriggerRenderPort, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition }, element.childrenElementsInTree && element.childrenElementsInTree.map(renderElementInTree))));
+                onMouseUpAtLinkedPortPlaceholder: handleMouseUpAtLinkedPortPlaceholder, onTextUpdated: handleElementTextChange, onManuallyTriggerRenderPort: props.onManuallyTriggerRenderPort, textsPlaceHolderClassName: element.textsPlaceHolderClassName, textsPlaceHolderFlexStyle: element.textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition: element.textsPlaceHolderFlexboxPosition, parentAbsolutePosition: element.parentElement ? getAbsolutePosition(element.parentElement) : undefined }, element.childrenElementsInTree && element.childrenElementsInTree.map(renderElementInTree))));
     }, [handleElementClicked, handleContextMenu, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, handleMouseUp, handleMouseMove, handleMouseLeave]);
-    React.useEffect(function () {
-        console.log('elementsInTree');
-    }, [elementsInTree]);
-    React.useEffect(function () {
-        console.log('renderElementInTree');
-    }, [renderElementInTree]);
     var ElementsInTree = React.useMemo(function () {
         return elementsInTree.map(function (element, index) {
             return renderElementInTree(element);
@@ -9524,7 +9630,6 @@ var Editor = function (_a) {
         var offs = [];
         if (editorContext) {
             offs.push(editorContext.onEditorContextUpdated(function () {
-                console.log("onEditorContextUpdated");
                 setEditorStates(editorContext);
             }));
         }
@@ -9568,12 +9673,21 @@ var Editor = function (_a) {
     var handleElementMouseUp = React.useCallback(function (ev, element) {
         editorContext.onElementMouseUpHandler(ev, element);
     }, [editorContext]);
+    var handleElementsChanged = React.useCallback(function (elements) {
+        editorContext.elements = elements;
+    }, [editorContext]);
     var handleLinkSelected = React.useCallback(function (link) {
         editorContext.onLinkSelectedHandler(link);
     }, [editorContext]);
+    var handleLinksChanged = React.useCallback(function (links) {
+        editorContext.links = links;
+    }, [editorContext]);
     var handleTextSelected = React.useCallback(function (text) {
         editorContext.onTextSelectedHandler(text);
     }, [editorContext]);
+    var handleTextsChanged = React.useCallback(function (texts) {
+        editorContext.texts = texts;
+    }, [editorContext]);
     var handleOnCreatingLink = React.useCallback(function (sourcePort, sourceElement, targetPort, targetElement) {
         if (editorContext.onCreatingLinkHandler) {
             return editorContext.onCreatingLinkHandler(sourcePort, sourceElement, targetPort, targetElement);
@@ -9595,7 +9709,7 @@ var Editor = function (_a) {
     var handlePaperMouseUp = React.useCallback(function (position) {
         editorContext.onPaperMouseUpHandler(position);
     }, [editorContext]);
-    return (React.createElement(Paper$1, { key: "paper", size: { width: width, height: height }, elements: elements, links: links, texts: texts, onPaperClicked: handlePaperClicked, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseUp: handleElementMouseUp, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onTextSelected: handleTextSelected, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, onManuallyTriggerRenderElement: editorContext.onManuallyTriggerRenderElement.bind(editorContext), onManuallyTriggerRenderPort: editorContext.onManuallyTriggerRenderPort.bind(editorContext) }));
+    return (React.createElement(Paper$1, { key: "paper", size: { width: width, height: height }, elements: elements, links: links, texts: texts, onPaperClicked: handlePaperClicked, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseUp: handleElementMouseUp, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, onManuallyTriggerRenderElement: editorContext.onManuallyTriggerRenderElement.bind(editorContext), onManuallyTriggerRenderPort: editorContext.onManuallyTriggerRenderPort.bind(editorContext) }));
 };
 
 exports.CircleRC = Circle;