orcasvn-react-diagrams 0.1.51 → 0.1.53

package/dist/cjs/index.js

@@ -484,7 +484,7 @@ function generateUniqueId() {
 }
 
 var Element$2 = /** @class */ (function () {
-    function Element(x, y, width, height, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection, parentElement, textsPlaceHolderClassName, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition) {
+    function Element(id, x, y, width, height, cssClass, renderShape, texts, ports, portMovealeAreas, portSlideRailSVGClassName, portDirection, parentElement, textsPlaceHolderClassName, textsPlaceHolderFlexStyle, textsPlaceHolderFlexboxPosition) {
         if (portMovealeAreas === void 0) { portMovealeAreas = []; }
         this.positionAnchor = exports.PositioningAnchor.TopLeft;
         this._childrenElements = [];
@@ -494,7 +494,7 @@ var Element$2 = /** @class */ (function () {
         };
         //internal properties
         this._eventEmitter = new EventEmitter();
-        this._id = generateUniqueId();
+        this._id = id || generateUniqueId();
         this._position = { x: x, y: y };
         this._size = { width: width, height: height };
         this.cssClass = cssClass;
@@ -696,11 +696,11 @@ var CustomShape = React.forwardRef(function (props, ref) {
 });
 
 var Port$1 = /** @class */ (function () {
-    function Port(x, y, label, shapeRenderer, width, height) {
+    function Port(id, x, y, label, shapeRenderer, width, height) {
         var _this = this;
         //internal properties
         this._eventEmitter = new EventEmitter();
-        this._id = generateUniqueId();
+        this._id = id || generateUniqueId();
         this.position = { x: x, y: y };
         if (!height) {
             height = width;
@@ -731,8 +731,9 @@ var Port$1 = /** @class */ (function () {
 }());
 
 var ElementLink$1 = /** @class */ (function () {
-    function ElementLink(sourceElement, sourcePort, targetElement, targetPort, tempTargetPosition, points, path, markerStart, markerEnd, markerDistanceFromPort, markerSize, label, sourceLabel, targetLabel) {
-        this.id = generateUniqueId();
+    // 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;
         this.sourcePort = sourcePort;
         if (tempTargetPosition) {
@@ -769,8 +770,8 @@ var ElementLink$1 = /** @class */ (function () {
 }());
 
 var Text$2 = /** @class */ (function () {
-    function Text(content, width, height, editable, x, y, align, fontSize, border, style) {
-        this._id = generateUniqueId();
+    function Text(id, content, width, height, editable, selectable, x, y, align, fontSize, border, style) {
+        this._id = id || generateUniqueId();
         this.content = content;
         this.align = align;
         this.fontSize = fontSize;
@@ -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 };
         }
@@ -1710,9 +1715,9 @@ 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, 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 absolutePosition = React.useMemo(function () {
         var _a, _b;
         return {
@@ -1721,7 +1726,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 +1759,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,
@@ -7914,7 +7921,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 +8062,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.
@@ -8070,24 +8126,26 @@ function CloseIcon(_a) {
                 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>
+// const makerStart = <circle cx={10} cy={10} r={10} fill="blue"></circle>
+// 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, _e = _a.markerStart, markerStart = _e === void 0 ? makerStart : _e, _f = _a.markerEnd, markerEnd = _f === void 0 ? makerEnd : _f, _g = _a.markerDistanceFromPort, markerDistanceFromPort = _g === void 0 ? LINK_MARKER_DISTANCE_FROM_PORT : _g, _h = _a.markerSize, markerSize = _h === void 0 ? LINK_MARKER_SIZE : _h, label = _a.label, sourceLabel = _a.sourceLabel, targetLabel = _a.targetLabel, onLabelMoved = _a.onLabelMoved, onLabelResized = _a.onLabelResized, onLabelContentChanged = _a.onLabelContentChanged;
-    var _j = React.useState(path), pathStr = _j[0], setPathStr = _j[1];
-    var _k = React.useState(pointsProp !== null && pointsProp !== void 0 ? pointsProp : []), points = _k[0], setPoints = _k[1];
-    var _l = React.useState(false), isDragging = _l[0], setIsDragging = _l[1];
-    var _m = React.useState(), draggingPointIndex = _m[0], setDraggingPointIndex = _m[1];
-    var _o = React.useState({
+    var 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];
+    var _k = React.useState(), draggingPointIndex = _k[0], setDraggingPointIndex = _k[1];
+    var _l = 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;
+    }), selectedLabelRef = _l[0], setSelectedLabelRef = _l[1];
+    var _m = React.useState(false), isSelectedLink = _m[0], setIsSelectedLink = _m[1];
+    var _o = React.useContext(paperEventEmitterContext), onPaperClicked = _o.onPaperClicked, onElementSelected = _o.onElementSelected;
     var pathRef = React.useRef(null);
     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 +8175,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 +8362,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 +8565,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 +8915,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)));
 });
@@ -9440,6 +9513,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 +9632,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 +9889,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 +9954,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 +9973,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 }),
@@ -9896,6 +9987,83 @@ var Paper = function (props) {
 };
 var Paper$1 = React.memo(Paper);
 
+/**
+ * Zoom context to manage zoom level and related state.
+ * This context can be used to provide zoom functionality across the application.
+ */
+var zoomContext = React.createContext(null);
+var ZoomContextProvider = function (_a) {
+    var children = _a.children;
+    var _b = React.useState(1), zoom = _b[0], setZoom = _b[1];
+    var _c = React.useState(0), scrollLeft = _c[0], setScrollLeft = _c[1];
+    var _d = React.useState(0), scrollTop = _d[0], setScrollTop = _d[1];
+    var wrapperRef = React.useRef(null);
+    var contentRef = React.useRef(null);
+    var handleWheel = function (e) {
+        // Chỉ zoom khi giữ Ctrl
+        if (!e.ctrlKey)
+            return;
+        e.preventDefault();
+        var delta = -e.deltaY;
+        var zoomFactor = 0.05;
+        var newZoom = zoom + (delta > 0 ? zoomFactor : -zoomFactor);
+        newZoom = Math.max(0.1, Math.min(newZoom, 4));
+        if (!wrapperRef.current || !contentRef.current)
+            return;
+        var wrapper = wrapperRef.current;
+        var content = contentRef.current;
+        // Get bounding rectangle of the content
+        var rect = content.getBoundingClientRect();
+        var offsetX = e.clientX - rect.left;
+        var offsetY = e.clientY - rect.top;
+        var percentX = offsetX / (content.offsetWidth);
+        var percentY = offsetY / (content.offsetHeight);
+        console.log(offsetX, offsetY, content.offsetWidth, content.offsetHeight, percentX, percentY);
+        // Old width and height of content
+        var prevWidth = content.offsetWidth * zoom;
+        var prevHeight = content.offsetHeight * zoom;
+        var newWidth = content.offsetWidth * newZoom;
+        var newHeight = content.offsetHeight * newZoom;
+        var scrollLeft = wrapper.scrollLeft + (percentX * (newWidth - prevWidth));
+        var scrollTop = wrapper.scrollTop + (percentY * (newHeight - prevHeight));
+        setZoom(newZoom);
+        setScrollLeft(scrollLeft);
+        setScrollTop(scrollTop);
+    };
+    React.useLayoutEffect(function () {
+        var _a;
+        (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+            left: scrollLeft,
+            top: scrollTop,
+        });
+    }, [zoom, scrollLeft, scrollTop]);
+    var resetZoom = function () {
+        setZoom(1);
+    };
+    React.useEffect(function () {
+        var preventBrowserZoom = function (e) {
+            if (e.ctrlKey || e.metaKey) {
+                e.preventDefault();
+            }
+        };
+        window.addEventListener("wheel", preventBrowserZoom, { passive: false });
+        return function () {
+            window.removeEventListener("wheel", preventBrowserZoom);
+        };
+    }, []);
+    return (React.createElement(zoomContext.Provider, { value: { zoom: zoom, setZoom: setZoom, resetZoom: resetZoom } },
+        React.createElement("div", { ref: wrapperRef, onWheel: handleWheel, style: {
+                width: "100vw",
+                height: "92vh",
+                overflow: "auto",
+            } },
+            React.createElement("div", { ref: contentRef, style: {
+                    transform: "scale(".concat(zoom, ")"),
+                    transformOrigin: "top left",
+                    // transition: "transform 0.1s linear",
+                } }, children))));
+};
+
 var Editor = function (_a) {
     var editorContext = _a.editorContext, width = _a.width, height = _a.height;
     var _b = React.useState([]), elements = _b[0], setElements = _b[1];
@@ -9944,6 +10112,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]);
@@ -10004,7 +10175,8 @@ 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, 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(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;
@@ -10044,6 +10216,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/contexts/zoomContext.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+interface IZoomContext {
+    zoom: number;
+    setZoom: (zoom: number) => void;
+    resetZoom: () => void;
+}
+/**
+ * Zoom context to manage zoom level and related state.
+ * This context can be used to provide zoom functionality across the application.
+ */
+export declare const zoomContext: React.Context<IZoomContext | null>;
+export declare const ZoomContextProvider: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export {};

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/Element.d.ts

@@ -37,7 +37,7 @@ export default class Element implements IElement {
     textsPlaceHolderFlexStyle?: IFlexboxType;
     textsPlaceHolderFlexboxPosition?: IPosition;
     _eventEmitter: EventEmitter;
-    constructor(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?: Element, 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(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);
 }

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

@@ -12,7 +12,7 @@ export default class Port implements IPort {
     label?: IText;
     renderShape?: React.ForwardRefExoticComponent<IPortProps & React.RefAttributes<SVGSVGElement>>;
     _eventEmitter: EventEmitter;
-    constructor(x: number, y: number, label?: IText, shapeRenderer?: {
+    constructor(id: string | null, x: number, y: number, label?: IText, shapeRenderer?: {
         shape?: React.ForwardRefExoticComponent<IPortProps & React.RefAttributes<SVGSVGElement>>;
         customShapeWithJSX?: JSX.Element;
         positioningAnchor?: IPosition;

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

@@ -7,12 +7,13 @@ export default class Text implements IText {
     private readonly _id;
     content: string;
     editable: boolean;
+    selectable?: boolean;
     size: ISize;
     position?: IPosition;
     align?: TextAlign;
     fontSize?: number;
     border?: string;
     style?: IFlexboxType;
-    constructor(content: string, width: number, height: number, editable: boolean, x?: number, y?: number, align?: TextAlign, fontSize?: number, border?: string, style?: IFlexboxType);
+    constructor(id: string | null, content: string, width: number, height: number, editable: boolean, selectable?: boolean, x?: number, y?: number, align?: TextAlign, fontSize?: number, border?: string, style?: IFlexboxType);
     get id(): string;
 }

package/dist/cjs/types/utils/pathUtil.d.ts

@@ -8,4 +8,6 @@ export declare function pathDataToD(pathData: IPathCommand[], decimals?: number)
 export declare function createSmoothPathString(points: IPosition[], smoothing?: number, close?: boolean): string;
 export declare function dist(p1: IPosition, p2: IPosition): number;
 export declare function addPointToList(point: IPosition, listPoints: IPosition[], path: SVGPathElement): IPosition[];
+export declare function getPointsFromPathData(dAttribute: string): IPosition[];
+export declare function getPointsFromPathElement(pathElement: SVGPathElement): IPosition[];
 export {};