orcasvn-react-diagrams 0.1.52 → 0.1.54

package/dist/cjs/index.js

@@ -731,6 +731,7 @@ var Port$1 = /** @class */ (function () {
 }());
 
 var ElementLink$1 = /** @class */ (function () {
+    // constructor(id: string | null, sourceElement: IElement, sourcePort: IPort, targetElement: IElement, targetPort: IPort, tempTargetPosition: IPosition, points?: IPosition[]);
     function ElementLink(id, sourceElement, sourcePort, targetElement, targetPort, tempTargetPosition, points, path, markerStart, markerEnd, markerDistanceFromPort, markerSize, label, sourceLabel, targetLabel) {
         this.id = id || generateUniqueId();
         this.sourceElement = sourceElement;
@@ -769,7 +770,7 @@ var ElementLink$1 = /** @class */ (function () {
 }());
 
 var Text$2 = /** @class */ (function () {
-    function Text(id, content, width, height, editable, x, y, align, fontSize, border, style) {
+    function Text(id, content, width, height, editable, selectable, x, y, align, fontSize, border, style) {
         this._id = id || generateUniqueId();
         this.content = content;
         this.align = align;
@@ -778,6 +779,10 @@ var Text$2 = /** @class */ (function () {
         this.size = { width: width, height: height };
         this.style = style;
         this.editable = editable;
+        this.selectable = selectable;
+        if (selectable === undefined) {
+            this.selectable = true; // Default to true if not specified
+        }
         if (x && y) {
             this.position = { x: x, y: y };
         }
@@ -814,7 +819,7 @@ var EVENT_ELEMENT_MOUSE_DOWN = 'elementMouseDown';
 var EVENT_LINK_SELECTED = 'linkSelected';
 var EVENT_TEXT_SELECTED = 'textSelected';
 var EditorContext = /** @class */ (function () {
-    function EditorContext(elements, links, texts) {
+    function EditorContext(elements, links, texts, configuration) {
         var _this = this;
         /** @internal */
         this.onEditorContextUpdated = function (callback) {
@@ -827,6 +832,7 @@ var EditorContext = /** @class */ (function () {
         this._elements = elements;
         this._links = links;
         this._texts = texts;
+        this._configuration = configuration || {};
         this._eventEmitter = new EventEmitter();
     }
     EditorContext.prototype.addEventListener = function (event, callback) {
@@ -867,6 +873,13 @@ var EditorContext = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(EditorContext.prototype, "configuration", {
+        get: function () {
+            return this._configuration;
+        },
+        enumerable: false,
+        configurable: true
+    });
     EditorContext.prototype.getElement = function (elementId) {
         return this._elements.find(function (e) { return e.id === elementId; });
     };
@@ -1105,8 +1118,20 @@ var Rectangle = React.forwardRef(function (props, ref) {
         scaledWidth = scaledWidth / heightRatio;
     }
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
+    var strokeDasharray;
+    var strokeLinecap = undefined;
+    if (props.strokeStyle === 'dashed') {
+        strokeDasharray = '8, 4';
+    }
+    else if (props.strokeStyle === 'dotted') {
+        strokeDasharray = '0, 4';
+        strokeLinecap = 'round';
+    }
+    else {
+        strokeDasharray = undefined;
+    }
     return (React.createElement(ShapeWrapper, __assign({}, props, { ref: ref, height: props.height, width: props.width }),
-        React.createElement("rect", { className: "rect-border ".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", width: scaledWidth, height: scaledHeight, fill: props.fill || "transparent", stroke: props.stroke || "none", strokeWidth: sw }),
+        React.createElement("rect", { className: "rect-border ".concat(props.portMoveableAreaCssClass), vectorEffect: "non-scaling-stroke", width: scaledWidth, height: scaledHeight, fill: props.fill || "transparent", stroke: props.stroke || "none", strokeWidth: sw, strokeDasharray: strokeDasharray, strokeLinecap: strokeLinecap }),
         props.children));
 });
 
@@ -1128,10 +1153,22 @@ var RectangularFrame = React.forwardRef(function (props, ref) {
     var fw = props.frameColor ? (props.frameWidth || 1) : 0;
     var scaledFw = scaledWidth / props.width * fw;
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
+    var strokeDasharray;
+    var strokeLinecap = undefined;
+    if (props.strokeStyle === 'dashed') {
+        strokeDasharray = '8, 4';
+    }
+    else if (props.strokeStyle === 'dotted') {
+        strokeDasharray = '0, 4';
+        strokeLinecap = 'round';
+    }
+    else {
+        strokeDasharray = undefined;
+    }
     return (React.createElement(ShapeWrapper, __assign({}, props, { ref: ref, height: props.height, width: props.width }),
-        React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: "rectangular-frame-outer-border ".concat(props.portMoveableAreaCssClass), x: vbX, y: vbY, width: scaledWidth, height: scaledHeight, fill: "none", stroke: props.stroke || "none", strokeWidth: sw }),
+        React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: "rectangular-frame-outer-border ".concat(props.portMoveableAreaCssClass), x: vbX, y: vbY, width: scaledWidth, height: scaledHeight, fill: "none", stroke: props.stroke || "none", strokeWidth: sw, strokeDasharray: strokeDasharray, strokeLinecap: strokeLinecap }),
         React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: 'rectangular-frame-hallway', x: vbX + scaledFw / 2, y: vbY + scaledFw / 2, width: scaledWidth - scaledFw, height: scaledHeight - scaledFw, stroke: props.frameColor || "none", strokeWidth: fw, fill: props.fill || "transparent" }),
-        React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: 'rectangular-frame-inner-border', x: vbX + scaledFw, y: vbY + scaledFw, width: scaledWidth - scaledFw * 2, height: scaledHeight - scaledFw * 2, stroke: props.stroke || "none", strokeWidth: sw, fill: props.fill || "transparent" }),
+        React.createElement("rect", { vectorEffect: "non-scaling-stroke", className: 'rectangular-frame-inner-border', x: vbX + scaledFw, y: vbY + scaledFw, width: scaledWidth - scaledFw * 2, height: scaledHeight - scaledFw * 2, stroke: props.stroke || "none", strokeWidth: sw, fill: props.fill || "transparent", strokeDasharray: strokeDasharray, strokeLinecap: strokeLinecap }),
         props.children));
 });
 
@@ -1709,10 +1746,21 @@ var paperEventEmitterContext = React.createContext({
     onCommandRenderPort: onCommandRenderPort,
 });
 
+var editorConfigurationContext = React.createContext(null);
+var useEditorConfiguration = function () {
+    var context = React.useContext(editorConfigurationContext);
+    if (!context) {
+        throw new Error("useEditorConfiguration must be used within an EditorConfigurationProvider");
+    }
+    return context;
+};
+var EditorConfigurationContextProvider = editorConfigurationContext.Provider;
+
 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, parentAbsolutePosition = _a.parentAbsolutePosition, onSelected = _a.onSelected, onMoved = _a.onMoved, onResized = _a.onResized, onContentChanged = _a.onContentChanged;
-    var _c = React.useState(false), isSelected = _c[0], setIsSelected = _c[1];
-    var _d = React.useState(false), isEditing = _d[0], setIsEditing = _d[1];
+    var id = _a.id, content = _a.content, x = _a.x, y = _a.y, width = _a.width, height = _a.height, editable = _a.editable, _b = _a.selectable, selectable = _b === void 0 ? true : _b, _c = _a.align, align = _c === void 0 ? exports.TextAlign.left : _c, fontSizeProp = _a.fontSize, border = _a.border, container = _a.container, parentAbsolutePosition = _a.parentAbsolutePosition, onSelected = _a.onSelected, onMoved = _a.onMoved, onResized = _a.onResized, onContentChanged = _a.onContentChanged;
+    var _d = React.useState(false), isSelected = _d[0], setIsSelected = _d[1];
+    var _e = React.useState(false), isEditing = _e[0], setIsEditing = _e[1];
+    var textFontSize = useEditorConfiguration().textFontSize;
     var absolutePosition = React.useMemo(function () {
         var _a, _b;
         return {
@@ -1721,7 +1769,7 @@ var Text = React.forwardRef(function (_a, ref) {
         };
     }, [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;
+    var _f = React.useContext(paperEventEmitterContext), onPaperClicked = _f.onPaperClicked, emitTextSelected = _f.emitTextSelected, onPortSelected = _f.onPortSelected, onElementSelected = _f.onElementSelected, onTextSelected = _f.onTextSelected;
     React.useEffect(function () {
         var paperClickListener = onPaperClicked(function (ev) {
             var _a;
@@ -1754,6 +1802,8 @@ var Text = React.forwardRef(function (_a, ref) {
     }, []);
     //Handle click on svg element
     var handleClick = function (ev) {
+        if (!selectable)
+            return;
         ev.stopPropagation();
         var position = {
             x: x,
@@ -1803,9 +1853,12 @@ var Text = React.forwardRef(function (_a, ref) {
                 return 'left';
         }
     }, [align]);
-    var fontSize = fontSizeProp || TEXT_FONT_SIZE;
+    var fontSize = fontSizeProp || textFontSize || TEXT_FONT_SIZE;
     var borderStyle = border || 'none';
-    return (React.createElement("svg", { style: { overflow: "visible" }, x: x, y: y, ref: function (node) {
+    return (React.createElement("svg", { style: {
+            overflow: "visible",
+            pointerEvents: selectable ? undefined : 'none',
+        }, x: x, y: y, ref: function (node) {
             svgRef.current = node;
             if (typeof ref === 'function') {
                 ref(node);
@@ -7914,7 +7967,7 @@ var Port1 = React.forwardRef(function (props, ref) {
     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) {
+        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, selectable: label.selectable, 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;
@@ -8055,6 +8108,55 @@ function addPointToList(point, listPoints, path) {
     var addedIndex = getAddIndex(0, listPoints.length - 1);
     listPoints.splice(addedIndex, 0, point);
     return __spreadArray([], listPoints, true);
+}
+// Parse the d attribute of a path element and extract points from path commands
+function getPointsFromPathData(dAttribute) {
+    var points = [];
+    // Remove extra whitespace and split by command letters
+    var cleanD = dAttribute.replace(/\s+/g, ' ').trim();
+    // Regular expression to match path commands (M, L, C, etc.) and their values
+    var commandRegex = /([MLCZmlcz])\s*([^MLCZmlcz]*)/g;
+    var match;
+    while ((match = commandRegex.exec(cleanD)) !== null) {
+        var command = match[1].toUpperCase();
+        var values = match[2].trim();
+        if (values) {
+            var coords = values.split(/[\s,]+/).map(Number).filter(function (num) { return !isNaN(num); });
+            switch (command) {
+                case 'M': // Move to
+                    if (coords.length >= 2) {
+                        points.push({ x: coords[0], y: coords[1] });
+                    }
+                    break;
+                case 'L': // Line to
+                    if (coords.length >= 2) {
+                        points.push({ x: coords[0], y: coords[1] });
+                    }
+                    break;
+                case 'C': // Cubic bezier curve
+                    // For cubic curves, we take the end point (last 2 coordinates)
+                    if (coords.length >= 6) {
+                        points.push({ x: coords[4], y: coords[5] });
+                    }
+                    break;
+                case 'Q': // Quadratic bezier curve
+                    // For quadratic curves, we take the end point (last 2 coordinates)
+                    if (coords.length >= 4) {
+                        points.push({ x: coords[2], y: coords[3] });
+                    }
+                    break;
+            }
+        }
+    }
+    return points;
+}
+// Get points from a path element's d attribute
+function getPointsFromPathElement(pathElement) {
+    var dAttribute = pathElement.getAttribute('d');
+    if (!dAttribute) {
+        return [];
+    }
+    return getPointsFromPathData(dAttribute);
 }
 
 //Defined remove icon for element link, shown when element link is selected.
@@ -8074,7 +8176,7 @@ function CloseIcon(_a) {
 // const makerEnd = <path d="M0 0 L 20 10 L0 20 Z" fill="blue"></path>//<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, markerStart = _a.markerStart, markerEnd = _a.markerEnd, _e = _a.markerDistanceFromPort, markerDistanceFromPort = _e === void 0 ? LINK_MARKER_DISTANCE_FROM_PORT : _e, _f = _a.markerSize, markerSize = _f === void 0 ? LINK_MARKER_SIZE : _f, label = _a.label, sourceLabel = _a.sourceLabel, targetLabel = _a.targetLabel, onLabelMoved = _a.onLabelMoved, onLabelResized = _a.onLabelResized, onLabelContentChanged = _a.onLabelContentChanged;
+    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, onPointsChanged = _a.onPointsChanged, container = _a.container, markerStart = _a.markerStart, markerEnd = _a.markerEnd, _e = _a.markerDistanceFromPort, markerDistanceFromPort = _e === void 0 ? LINK_MARKER_DISTANCE_FROM_PORT : _e, _f = _a.markerSize, markerSize = _f === void 0 ? LINK_MARKER_SIZE : _f, label = _a.label, sourceLabel = _a.sourceLabel, targetLabel = _a.targetLabel, onLabelMoved = _a.onLabelMoved, onLabelResized = _a.onLabelResized, onLabelContentChanged = _a.onLabelContentChanged;
     var _g = React.useState(path), pathStr = _g[0], setPathStr = _g[1];
     var _h = React.useState(pointsProp !== null && pointsProp !== void 0 ? pointsProp : []), points = _h[0], setPoints = _h[1];
     var _j = React.useState(false), isDragging = _j[0], setIsDragging = _j[1];
@@ -8088,6 +8190,8 @@ var IElementLink = function (_a) {
     var labelRef = React.useRef(null);
     var sourceLabelRef = React.useRef(null);
     var targetLabelRef = React.useRef(null);
+    var isFirstRender = React.useRef(true);
+    var onPointsChangedRef = React.useRef();
     var angleMarkerStart = '0';
     var angleMarkerEnd = '0';
     var markerStartPosition;
@@ -8117,6 +8221,18 @@ var IElementLink = function (_a) {
             elementSelectedListener.off();
         };
     }, []);
+    // Store onPointsChanged in a ref to avoid unnecessary re-renders
+    React.useEffect(function () {
+        onPointsChangedRef.current = onPointsChanged;
+    }, [onPointsChanged]);
+    React.useEffect(function () {
+        var _a;
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
+        (_a = onPointsChangedRef.current) === null || _a === void 0 ? void 0 : _a.call(onPointsChangedRef, points, id);
+    }, [points]);
     React.useLayoutEffect(function () {
         var pointsList = __spreadArray(__spreadArray([sourcePosition], points, true), [targetPosition], false);
         var _pathStr = createSmoothPathString(pointsList, undefined, false);
@@ -8292,7 +8408,7 @@ var IElementLink = function (_a) {
             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 }));
+        return (React.createElement(Text$1, { id: label.id, x: position.x, y: position.y, width: size.width, height: size.height, editable: label.editable, selectable: label.selectable, content: content, fontSize: label.fontSize, border: label.border, ref: curLabelRef, container: container, onSelected: function () { return setSelectedLabelRef(curLabelRef); }, onMoved: handleLabelMoved, onResized: handleLabelResized, onContentChanged: handleLabelContentChanged }));
     };
     if ((_b = pathRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute('d')) {
         if (markerStart) {
@@ -8495,15 +8611,18 @@ var Element = React.forwardRef(function (props, forwardedRef) {
     //Listen trigger of Delete key, handle delete port is selected
     React.useEffect(function () {
         var listener = _paperEventEmitterContext.onCommandDeleteSelectedPort(function () {
+            var _a;
             if (selectedPort) {
-                setPorts(function (prev) { return prev.filter(function (p) { return p.id !== selectedPort.id; }); });
+                var newPorts = portsRef.current.filter(function (p) { return p.id !== selectedPort.id; });
+                setPorts(newPorts);
                 setSelectedPort(undefined);
+                (_a = props.onPortsChanged) === null || _a === void 0 ? void 0 : _a.call(props, newPorts, id);
             }
         });
         return function () {
             listener.off();
         };
-    }, [selectedPort]);
+    }, [selectedPort, props.onPortsChanged]);
     React.useEffect(function () {
         //Listener onMouseDown event on #paper-container
         var eventListener = _paperEventEmitterContext.onPaperClicked(function (ev) {
@@ -8842,7 +8961,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             }), 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) || 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); } });
+                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, selectable: t.selectable, 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)));
 });
@@ -9368,13 +9487,13 @@ var Paper = function (props) {
     }, [selectedText, props.onTextsChanged]);
     var handlePaperMouseMove = function (ev) {
         var _a;
+        var currentTarget = ev.currentTarget;
+        // Get the mouse position relative to the paper container
+        var paperRect = currentTarget.getBoundingClientRect();
+        var xPosOnPaper = ev.clientX - paperRect.left;
+        var yPosOnPaper = ev.clientY - paperRect.top;
         //if there is a temp link, update the temp target point
         if (tempLink) {
-            var currentTarget = ev.currentTarget;
-            //get offset x,y of the temp target point relative paper container
-            var rect = currentTarget.getBoundingClientRect();
-            var offsetX = ev.clientX - rect.left;
-            var offsetY = ev.clientY - rect.top;
             var sourceElementAbsPosition = getAbsolutePosition(tempLink.sourceElement);
             var sourcePosition = {
                 x: sourceElementAbsPosition.x + tempLink.sourcePort.position.x,
@@ -9382,19 +9501,24 @@ var Paper = function (props) {
             };
             //reduce the position of offset to the direction of the source point 1 unit to avoid the link to reach the current mouse position
             var tempTargetPosition_1 = {
-                x: offsetX - (offsetX > sourcePosition.x ? 1 : -1),
-                y: offsetY - (offsetY > sourcePosition.y ? 1 : -1)
+                x: xPosOnPaper - (xPosOnPaper > sourcePosition.x ? 1 : -1),
+                y: yPosOnPaper - (yPosOnPaper > sourcePosition.y ? 1 : -1)
             };
             setTempLink(function (prev) { return (__assign(__assign({}, prev), { tempTargetPosition: tempTargetPosition_1 })); });
         }
         //broadcast mouse moved position to parent component
         (_a = props.onPaperMouseMoved) === null || _a === void 0 ? void 0 : _a.call(props, {
-            x: ev.clientX,
-            y: ev.clientY
+            x: xPosOnPaper,
+            y: yPosOnPaper
         });
     };
     var handleMouseDownOnPaper = function (ev) {
         var _a, _b;
+        var currentTarget = ev.currentTarget;
+        // Get the mouse position relative to the paper container
+        var paperRect = currentTarget.getBoundingClientRect();
+        var xPosOnPaper = ev.clientX - paperRect.left;
+        var yPosOnPaper = ev.clientY - paperRect.top;
         setMouseDownedOnPaper(true);
         (_a = props.onPaperClicked) === null || _a === void 0 ? void 0 : _a.call(props, {
             x: ev.clientX,
@@ -9403,12 +9527,17 @@ var Paper = function (props) {
         paperEventEmitter.emitPaperClicked(ev);
         //broadcast mouse moved position to parent component
         (_b = props.onPaperMouseDown) === null || _b === void 0 ? void 0 : _b.call(props, {
-            x: ev.clientX,
-            y: ev.clientY
+            x: xPosOnPaper,
+            y: yPosOnPaper
         });
     };
     var handleMouseUpOnPaper = function (ev) {
         var _a;
+        var currentTarget = ev.currentTarget;
+        // Get the mouse position relative to the paper container
+        var paperRect = currentTarget.getBoundingClientRect();
+        var xPosOnPaper = ev.clientX - paperRect.left;
+        var yPosOnPaper = ev.clientY - paperRect.top;
         if (mouseDownedOnPaper) {
             setSelectedElement(undefined);
             setSelectedElementSVG(null);
@@ -9425,8 +9554,8 @@ var Paper = function (props) {
         setMouseDownedOnPaper(false);
         //broadcast mouse moved position to parent component
         (_a = props.onPaperMouseUp) === null || _a === void 0 ? void 0 : _a.call(props, {
-            x: ev.clientX,
-            y: ev.clientY
+            x: xPosOnPaper,
+            y: yPosOnPaper
         });
     };
     var handlePathChange = React.useCallback(function (path, id) {
@@ -9440,6 +9569,17 @@ var Paper = function (props) {
             props.onLinksChanged(newLinks);
         }
     }, [props.onLinksChanged, links]);
+    var handlePointsOfLinkChange = React.useCallback(function (points, id) {
+        //Update path of element link, that changed
+        // const prevLinks = linksRef.current;
+        var updatedLinkIndex = links.findIndex(function (l) { return l.id === id; });
+        links[updatedLinkIndex].points = points;
+        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; });
@@ -9548,6 +9688,13 @@ var Paper = function (props) {
             setTempLink(null);
         }
     }, [paperEventEmitter, createElementLink, props.onPortMouseUp, props.onLinksChanged]);
+    var handlePortsChanged = React.useCallback(function (ports, elementId) {
+        var element = elementsRef.current.find(function (e) { return e.id === elementId; });
+        if (element) {
+            //broadcast ports changed to parent component
+            props.onPortsChanged(ports, element);
+        }
+    }, [props.onPortsChanged]);
     var handleLinkLabelMoved = React.useCallback(function (newX, newY, index, labelType) {
         var prevLinks = linksRef.current;
         var newLinks = __spreadArray([], prevLinks, true);
@@ -9798,7 +9945,7 @@ var Paper = function (props) {
         //use the defined react element or the default Element component
         var ReactElement = element.reactElement || Element$1;
         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, ref: function (refDOM) { return element.DOM = refDOM; }, height: element.size.height, width: element.size.width, x: element.positionAnchor === exports.PositioningAnchor.Center ? element.position.x - element.size.width / 2 : element.position.x, y: element.positionAnchor === exports.PositioningAnchor.Center ? element.position.y - element.size.height / 2 : element.position.y, onClick: handleElementClicked, onContextMenu: handleContextMenu, onMouseUp: handleMouseUp, onMouseDown: handleMouseDown, 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, 
+            React.createElement(ReactElement, { key: "element-".concat(element.id), id: element.id, ref: function (refDOM) { return element.DOM = refDOM; }, height: element.size.height, width: element.size.width, x: element.positionAnchor === exports.PositioningAnchor.Center ? element.position.x - element.size.width / 2 : element.position.x, y: element.positionAnchor === exports.PositioningAnchor.Center ? element.position.y - element.size.height / 2 : element.position.y, onClick: handleElementClicked, onContextMenu: handleContextMenu, onMouseUp: handleMouseUp, onMouseDown: handleMouseDown, 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, onPortsChanged: handlePortsChanged, 
                 // 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, parentAbsolutePosition: element.parentElement ? getAbsolutePosition(element.parentElement) : undefined },
                 element.childrenElementsInTree && element.childrenElementsInTree.map(renderElementInTree),
@@ -9863,7 +10010,7 @@ var Paper = function (props) {
                             paperEventEmitter.emitElementResized(selectedElement, oldSize, newSize);
                             setMouseDownedOnPaper(false);
                         } }))));
-    }, [handleElementClicked, handleContextMenu, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, handleMouseUp, handleMouseMove, handleMouseLeave, selectedElement, selectedElementAbsPosition]);
+    }, [handlePortsChanged, handleElementClicked, handleContextMenu, handlePortMoved, handlePortMouseDown, handlePortMouseUp, handleMouseUpAtLinkedPortPlaceholder, handleElementTextChange, handleMouseUp, handleMouseMove, handleMouseLeave, selectedElement, selectedElementAbsPosition]);
     var ElementsInTree = React.useMemo(function () {
         return elementsInTree.map(function (element, index) {
             return renderElementInTree(element);
@@ -9882,13 +10029,13 @@ var Paper = function (props) {
                     }, targetPosition: {
                         x: getAbsolutePosition(link.targetElement).x + link.targetPort.position.x,
                         y: getAbsolutePosition(link.targetElement).y + link.targetPort.position.y
-                    }, points: link.points, onPathChanged: handlePathChange, onClickDelete: handleClickLinkDelete(link, index), onSelected: function () { return handleSelectLink(link); }, onDeselected: function () { return handleDeselectLink(); }, container: paperContainerRef.current, markerStart: link.markerStart, markerEnd: link.markerEnd, markerDistanceFromPort: link.markerDistanceFromPort, markerSize: link.markerSize, label: link.label, sourceLabel: link.sourceLabel, targetLabel: link.targetLabel, onLabelMoved: onLabelMoved(index), onLabelResized: onLabelResized(index), onLabelContentChanged: onLabelContentChanged(index) }));
+                    }, points: link.points, onPathChanged: handlePathChange, onPointsChanged: handlePointsOfLinkChange, onClickDelete: handleClickLinkDelete(link, index), onSelected: function () { return handleSelectLink(link); }, onDeselected: function () { return handleDeselectLink(); }, container: paperContainerRef.current, markerStart: link.markerStart, markerEnd: link.markerEnd, markerDistanceFromPort: link.markerDistanceFromPort, markerSize: link.markerSize, label: link.label, sourceLabel: link.sourceLabel, targetLabel: link.targetLabel, onLabelMoved: onLabelMoved(index), onLabelResized: onLabelResized(index), onLabelContentChanged: onLabelContentChanged(index) }));
             }),
             (tempLink === null || tempLink === void 0 ? void 0 : tempLink.tempTargetPosition) && React.createElement(ElementLink, { id: tempLink.id, points: tempLink.points, sourcePosition: {
                     x: getAbsolutePosition(tempLink.sourceElement).x + tempLink.sourcePort.position.x,
                     y: getAbsolutePosition(tempLink.sourceElement).y + tempLink.sourcePort.position.y
                 }, targetPosition: tempLink.tempTargetPosition, container: paperContainerRef.current, markerStart: tempLink.markerStart, markerEnd: tempLink.markerEnd, markerDistanceFromPort: tempLink.markerDistanceFromPort, markerSize: tempLink.markerSize }),
-            texts.map(function (text, index) { return (React.createElement(Text$1, { key: text.id, id: text.id, x: text.position.x, y: text.position.y, width: text.size.width, height: text.size.height, editable: text.editable, fontSize: text.fontSize, border: text.border, container: paperContainerRef.current, content: text.content, align: text.align, onSelected: function () {
+            texts.map(function (text, index) { return (React.createElement(Text$1, { key: text.id, id: text.id, x: text.position.x, y: text.position.y, width: text.size.width, height: text.size.height, editable: text.editable, selectable: text.selectable, fontSize: text.fontSize, border: text.border, container: paperContainerRef.current, content: text.content, align: text.align, onSelected: function () {
                     setSelectedText(text);
                 } })); })),
         React.createElement(BBoxDebugger, { elementSVG: selectedElementSVG }),
@@ -10021,6 +10168,9 @@ var Editor = function (_a) {
     var handlePortSelected = React.useCallback(function (port, element) {
         editorContext.onPortSelectedHandler(port, element);
     }, [editorContext]);
+    var handlePortsChanged = React.useCallback(function (ports, element) {
+        element.ports = ports;
+    }, [editorContext]);
     var handleElementContextMenu = React.useCallback(function (element, event) {
         editorContext.onElementContextMenuHandler(element, event);
     }, [editorContext]);
@@ -10052,6 +10202,7 @@ var Editor = function (_a) {
         editorContext.onLinkSelectedHandler(link);
     }, [editorContext]);
     var handleLinksChanged = React.useCallback(function (links) {
+        console.log(links);
         editorContext.links = links;
     }, [editorContext]);
     var handleTextSelected = React.useCallback(function (text) {
@@ -10073,16 +10224,19 @@ var Editor = function (_a) {
         return null;
     }, [editorContext]);
     var handlePaperMouseMoved = React.useCallback(function (position) {
+        console.log("handlePaperMouseMoved", position);
         editorContext.onPaperMouseMovedHandler(position);
     }, [editorContext]);
     var handlePaperMouseDown = React.useCallback(function (position) {
+        console.log("handlePaperMouseDown", position);
         editorContext.onPaperMouseDownHandler(position);
     }, [editorContext]);
     var handlePaperMouseUp = React.useCallback(function (position) {
         editorContext.onPaperMouseUpHandler(position);
     }, [editorContext]);
-    return (React.createElement(ZoomContextProvider, null,
-        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, onElementMouseDown: handleElementMouseDown, 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) })));
+    return (React.createElement(EditorConfigurationContextProvider, { value: editorContext.configuration },
+        React.createElement(ZoomContextProvider, null,
+            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, onPortsChanged: handlePortsChanged, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, 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;
@@ -10122,6 +10276,8 @@ exports.getElementRotationInfo = getElementRotationInfo;
 exports.getFirstIntersection = getFirstIntersection;
 exports.getFourVertexesOfBBoxFromElement = getFourVertexesOfBBoxFromElement;
 exports.getIntersectionPositions = getIntersectionPositions;
+exports.getPointsFromPathData = getPointsFromPathData;
+exports.getPointsFromPathElement = getPointsFromPathElement;
 exports.getPortAbsolutePosition = getPortAbsolutePosition;
 exports.getRectangleCorners = getRectangleCorners;
 exports.getRelativePosition = getRelativePosition;

package/dist/cjs/types/components/paper.d.ts

@@ -21,6 +21,7 @@ interface PaperProps {
     onPortMouseUp?: (port: IPort, element: IElement) => void;
     onPortMoved?: (position: IPosition, port: IPort, element: IElement) => void;
     onPortSelected?: (port: IPort, element: IElement) => void;
+    onPortsChanged: (ports: IPort[], element: IElement) => void;
     onElementContextMenu?: (element: IElement, mouseEvent: React.MouseEvent<SVGElement>) => void;
     onElementMoved?: (position: IPosition, element: IElement, index: number) => void;
     onElementResized?: (size: ISize, element: IElement, index: number) => void;

package/dist/cjs/types/components/shapes/rectangle.d.ts

@@ -4,6 +4,7 @@ interface RectangleProps extends IShape {
     fill?: string;
     stroke?: string;
     strokeWidth?: number;
+    strokeStyle?: string;
 }
 declare const Rectangle: React.ForwardRefExoticComponent<RectangleProps & React.RefAttributes<SVGSVGElement>>;
 export default Rectangle;

package/dist/cjs/types/components/shapes/rectangularFrame.d.ts

@@ -6,6 +6,7 @@ interface RectangularFrameProps extends IShape {
     strokeWidth?: number;
     frameColor?: string;
     frameWidth?: number;
+    strokeStyle?: string;
 }
 declare const RectangularFrame: React.ForwardRefExoticComponent<RectangularFrameProps & React.RefAttributes<SVGSVGElement>>;
 export default RectangularFrame;

package/dist/cjs/types/contexts/editorConfigurationContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IEditorConfiguration } from "../models/IEditorConfiguration";
+export declare const useEditorConfiguration: () => IEditorConfiguration;
+export declare const EditorConfigurationContextProvider: import("react").Provider<IEditorConfiguration | null>;

package/dist/cjs/types/models/IEditorConfiguration.d.ts

@@ -0,0 +1,3 @@
+export interface IEditorConfiguration {
+    textFontSize?: number;
+}

package/dist/cjs/types/models/IEditorContext.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { IEditorConfiguration } from "./IEditorConfiguration";
 import IElement from "./IElement";
 import IElementLink from "./IElementLink";
 import IPort from "./IPort";
@@ -9,6 +10,7 @@ export default interface IEditorContext {
     elements: IElement[];
     links: IElementLink[];
     texts: IPaperText[];
+    configuration: IEditorConfiguration;
     onCreatingPortByLinkingHandler?: (sourceElement: IElement, sourcePort: IPort, targetElement: IElement, position: IPosition) => IPort | null;
     onCreatingLinkHandler?: (sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => IElementLink | null;
     onPaperClicked: (callback: (position: IPosition) => void) => (() => void);

package/dist/cjs/types/models/IElementLinkProps.d.ts

@@ -21,6 +21,7 @@ export default interface IElementLinkProps {
     markerDistanceFromPort?: number;
     markerSize?: number;
     onPathChanged?: (path: string, id: string) => void;
+    onPointsChanged?: (points: IPosition[], id: string) => void;
     onClickDelete?: (ev: React.MouseEvent) => void;
     onSelected?: () => void;
     onDeselected?: () => void;

package/dist/cjs/types/models/IElementProps.d.ts

@@ -29,6 +29,7 @@ interface IElementProps {
     onPortMoved?: onPortMovedHandler;
     onPortMouseDown?: onPortMouseDownHandler;
     onPortMouseUp?: onPortMouseUpHandler;
+    onPortsChanged?: (ports: IPort[], elementId: string) => void;
     portPlaceholderShape?: JSX.Element;
     onMouseMove?: (event: React.MouseEvent, elementId: string) => void;
     onMouseLeave?: (event: React.MouseEvent, elementId: string) => void;

package/dist/cjs/types/models/IText.d.ts

@@ -7,6 +7,7 @@ export default interface IText {
     content: string;
     size: ISize;
     editable: boolean;
+    selectable?: boolean;
     position?: IPosition;
     align?: TextAlign;
     fontSize?: number;

package/dist/cjs/types/models/ITextProps.d.ts

@@ -12,6 +12,7 @@ export default interface ITextProps {
     parentAbsolutePosition?: IPosition;
     height: number;
     width: number;
+    selectable?: boolean;
     align?: TextAlign;
     fontSize?: number;
     border?: string;

package/dist/cjs/types/models/implementations/EditorContext.d.ts

@@ -6,14 +6,16 @@ import IPosition from "../position";
 import IPort from "../IPort";
 import ISize from "../size";
 import IEditorContext from "../IEditorContext";
+import { IEditorConfiguration } from "../IEditorConfiguration";
 export declare class EditorContext implements IEditorContext {
     private _elements;
     private _links;
     private _texts;
     private _eventEmitter;
+    private _configuration;
     onCreatingPortByLinkingHandler?: ((sourceElement: IElement, sourcePort: IPort, targetElement: IElement, position: IPosition) => IPort | null) | undefined;
     onCreatingLinkHandler?: ((sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => IElementLink | null) | undefined;
-    constructor(elements: IElement[], links: IElementLink[], texts: IPaperText[]);
+    constructor(elements: IElement[], links: IElementLink[], texts: IPaperText[], configuration?: IEditorConfiguration);
     private addEventListener;
     get elements(): IElement[];
     get links(): IElementLink[];
@@ -21,6 +23,7 @@ export declare class EditorContext implements IEditorContext {
     set elements(value: IElement[]);
     set links(value: IElementLink[]);
     set texts(value: IPaperText[]);
+    get configuration(): IEditorConfiguration;
     getElement(elementId: string): IElement | undefined;
     addElement(element: IElement): void;
     removeElement(elementId: string): void;

package/dist/cjs/types/models/implementations/Element.d.ts

@@ -37,7 +37,7 @@ export default class Element implements IElement {
     textsPlaceHolderFlexStyle?: IFlexboxType;
     textsPlaceHolderFlexboxPosition?: IPosition;
     _eventEmitter: EventEmitter;
-    constructor(id: string | null, x: number, y: number, width: number, height: number, cssClass?: string, renderShape?: (props: IElementProps) => JSX.Element, texts?: IText[], ports?: IPort[], portMovealeAreas?: IPosition[][], portSlideRailSVGClassName?: string, portDirection?: SubObjectDirection, parentElement?: Element, textsPlaceHolderClassName?: string, textsPlaceHolderFlexStyle?: IFlexboxType, textsPlaceHolderFlexboxPosition?: IPosition);
+    constructor(id: string | null, x: number, y: number, width: number, height: number, cssClass?: string, renderShape?: (props: IElementProps) => JSX.Element, texts?: IText[], ports?: IPort[], portMovealeAreas?: IPosition[][], portSlideRailSVGClassName?: string, portDirection?: SubObjectDirection, parentElement?: IElement, textsPlaceHolderClassName?: string, textsPlaceHolderFlexStyle?: IFlexboxType, textsPlaceHolderFlexboxPosition?: IPosition);
     get id(): string;
     get size(): ISize;
     set size(value: ISize);

package/dist/cjs/types/models/implementations/ElementLink.d.ts

@@ -20,5 +20,5 @@ export default class ElementLink implements IElementLink {
     label?: IText;
     sourceLabel?: IText;
     targetLabel?: IText;
-    constructor(id: string | null, sourceElement: IElement, sourcePort: IPort, targetElement: IElement, targetPort: IPort, tempTargetPosition: IPosition, points?: IPosition[]);
+    constructor(id: string | null, sourceElement: IElement, sourcePort: IPort, targetElement?: IElement, targetPort?: IPort, tempTargetPosition?: IPosition, points?: IPosition[], path?: string, markerStart?: JSX.Element, markerEnd?: JSX.Element, markerDistanceFromPort?: number, markerSize?: number, label?: IText, sourceLabel?: IText, targetLabel?: IText);
 }