orcasvn-react-diagrams 0.1.50 → 0.1.52

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,8 @@ 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();
+    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 +769,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, x, y, align, fontSize, border, style) {
+        this._id = id || generateUniqueId();
         this.content = content;
         this.align = align;
         this.fontSize = fontSize;
@@ -1094,17 +1094,15 @@ var Crescent = React.forwardRef(function (props, ref) {
 var Rectangle = React.forwardRef(function (props, ref) {
     var scaledWidth = props.width;
     var scaledHeight = props.height;
-    if (props.width > 100 || props.height > 100) {
-        var widthRatio = props.width / 100;
-        var heightRatio = props.height / 100;
-        if (widthRatio > heightRatio) {
-            scaledWidth = 100;
-            scaledHeight = scaledHeight / widthRatio;
-        }
-        else {
-            scaledHeight = 100;
-            scaledWidth = scaledWidth / heightRatio;
-        }
+    var widthRatio = props.width / 100;
+    var heightRatio = props.height / 100;
+    if (widthRatio > heightRatio) {
+        scaledWidth = 100;
+        scaledHeight = scaledHeight / widthRatio;
+    }
+    else {
+        scaledHeight = 100;
+        scaledWidth = scaledWidth / heightRatio;
     }
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
     return (React.createElement(ShapeWrapper, __assign({}, props, { ref: ref, height: props.height, width: props.width }),
@@ -1115,17 +1113,15 @@ var Rectangle = React.forwardRef(function (props, ref) {
 var RectangularFrame = React.forwardRef(function (props, ref) {
     var scaledWidth = props.width;
     var scaledHeight = props.height;
-    if (props.width > 100 || props.height > 100) {
-        var widthRatio = props.width / 100;
-        var heightRatio = props.height / 100;
-        if (widthRatio > heightRatio) {
-            scaledWidth = 100;
-            scaledHeight = scaledHeight / widthRatio;
-        }
-        else {
-            scaledHeight = 100;
-            scaledWidth = scaledWidth / heightRatio;
-        }
+    var widthRatio = props.width / 100;
+    var heightRatio = props.height / 100;
+    if (widthRatio > heightRatio) {
+        scaledWidth = 100;
+        scaledHeight = scaledHeight / widthRatio;
+    }
+    else {
+        scaledHeight = 100;
+        scaledWidth = scaledWidth / heightRatio;
     }
     var vbX = 0; //(100 - scaledWidth) / 2;
     var vbY = 0; //(100 - scaledHeight) / 2;
@@ -8074,20 +8070,20 @@ 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, 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);
@@ -9900,6 +9896,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];
@@ -10008,7 +10081,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, 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;

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

@@ -0,0 +1,5 @@
+import IText from "../models/IText";
+import { Port } from '../models';
+export declare class CustomPort2 extends Port {
+    constructor(x: number, y: number, label?: IText, width?: number, height?: number);
+}

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[]);
 }

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

@@ -13,6 +13,6 @@ export default class Text implements IText {
     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, x?: number, y?: number, align?: TextAlign, fontSize?: number, border?: string, style?: IFlexboxType);
     get id(): string;
 }

package/dist/esm/index.js

@@ -480,7 +480,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 = PositioningAnchor.TopLeft;
         this._childrenElements = [];
@@ -490,7 +490,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;
@@ -692,11 +692,11 @@ var CustomShape = 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;
@@ -727,8 +727,8 @@ 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();
+    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) {
@@ -765,8 +765,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, x, y, align, fontSize, border, style) {
+        this._id = id || generateUniqueId();
         this.content = content;
         this.align = align;
         this.fontSize = fontSize;
@@ -1090,17 +1090,15 @@ var Crescent = forwardRef(function (props, ref) {
 var Rectangle = forwardRef(function (props, ref) {
     var scaledWidth = props.width;
     var scaledHeight = props.height;
-    if (props.width > 100 || props.height > 100) {
-        var widthRatio = props.width / 100;
-        var heightRatio = props.height / 100;
-        if (widthRatio > heightRatio) {
-            scaledWidth = 100;
-            scaledHeight = scaledHeight / widthRatio;
-        }
-        else {
-            scaledHeight = 100;
-            scaledWidth = scaledWidth / heightRatio;
-        }
+    var widthRatio = props.width / 100;
+    var heightRatio = props.height / 100;
+    if (widthRatio > heightRatio) {
+        scaledWidth = 100;
+        scaledHeight = scaledHeight / widthRatio;
+    }
+    else {
+        scaledHeight = 100;
+        scaledWidth = scaledWidth / heightRatio;
     }
     var sw = props.stroke ? (props.strokeWidth || 1) : 0;
     return (React.createElement(ShapeWrapper, __assign({}, props, { ref: ref, height: props.height, width: props.width }),
@@ -1111,17 +1109,15 @@ var Rectangle = forwardRef(function (props, ref) {
 var RectangularFrame = forwardRef(function (props, ref) {
     var scaledWidth = props.width;
     var scaledHeight = props.height;
-    if (props.width > 100 || props.height > 100) {
-        var widthRatio = props.width / 100;
-        var heightRatio = props.height / 100;
-        if (widthRatio > heightRatio) {
-            scaledWidth = 100;
-            scaledHeight = scaledHeight / widthRatio;
-        }
-        else {
-            scaledHeight = 100;
-            scaledWidth = scaledWidth / heightRatio;
-        }
+    var widthRatio = props.width / 100;
+    var heightRatio = props.height / 100;
+    if (widthRatio > heightRatio) {
+        scaledWidth = 100;
+        scaledHeight = scaledHeight / widthRatio;
+    }
+    else {
+        scaledHeight = 100;
+        scaledWidth = scaledWidth / heightRatio;
     }
     var vbX = 0; //(100 - scaledWidth) / 2;
     var vbY = 0; //(100 - scaledHeight) / 2;
@@ -8070,20 +8066,20 @@ 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 = useState(path), pathStr = _j[0], setPathStr = _j[1];
-    var _k = useState(pointsProp !== null && pointsProp !== void 0 ? pointsProp : []), points = _k[0], setPoints = _k[1];
-    var _l = useState(false), isDragging = _l[0], setIsDragging = _l[1];
-    var _m = useState(), draggingPointIndex = _m[0], setDraggingPointIndex = _m[1];
-    var _o = 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, 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 = useState(path), pathStr = _g[0], setPathStr = _g[1];
+    var _h = useState(pointsProp !== null && pointsProp !== void 0 ? pointsProp : []), points = _h[0], setPoints = _h[1];
+    var _j = useState(false), isDragging = _j[0], setIsDragging = _j[1];
+    var _k = useState(), draggingPointIndex = _k[0], setDraggingPointIndex = _k[1];
+    var _l = useState({
         current: null,
-    }), selectedLabelRef = _o[0], setSelectedLabelRef = _o[1];
-    var _p = useState(false), isSelectedLink = _p[0], setIsSelectedLink = _p[1];
-    var _q = useContext(paperEventEmitterContext), onPaperClicked = _q.onPaperClicked, onElementSelected = _q.onElementSelected;
+    }), selectedLabelRef = _l[0], setSelectedLabelRef = _l[1];
+    var _m = useState(false), isSelectedLink = _m[0], setIsSelectedLink = _m[1];
+    var _o = useContext(paperEventEmitterContext), onPaperClicked = _o.onPaperClicked, onElementSelected = _o.onElementSelected;
     var pathRef = useRef(null);
     var labelRef = useRef(null);
     var sourceLabelRef = useRef(null);
@@ -9896,6 +9892,83 @@ var Paper = function (props) {
 };
 var Paper$1 = 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 = 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 = useRef(null);
+    var contentRef = 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);
+    };
+    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];
@@ -10004,7 +10077,8 @@ var Editor = function (_a) {
     var handlePaperMouseUp = 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, 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) })));
 };
 
 export { Circle as CircleRC, Crescent as CrescentRC, CustomShape as CustomShapeRC, EditorContext, Element$2 as Element, ElementLink$1 as ElementLink, ElementLink as ElementLinkRC, Port$1 as Port, Port as PortRC, PositioningAnchor, Rectangle as RectangleRC, RectangularFrame as RectangularFrameRC, ResizingDirection, ShapeWrapper as ShapeWrapperRC, SubObjectDirection, Text$2 as Text, TextAlign, Text$1 as TextRC, addPointToList, calculateAngleWithOx, checkPointContainsPolygon, checkPositionOnLine, checkSamePosition, configureLogger, correctPortPositionInElement, createSmoothPathString, Editor as default, degreeToRadian, diamondEdgeInsideSquare, dist, findNearestPointOnSegment, findNearestPosition, findNearestProjectedPoint, generateSubstitutePosition, generateUniqueId, getAbsolutePosition, getCurvePathData, getElementRotationInfo, getFirstIntersection, getFourVertexesOfBBoxFromElement, getIntersectionPositions, getPortAbsolutePosition, getRectangleCorners, getRelativePosition, getRotatedRectangleCoordinates, getRotatedSVGBBox, getSVGBBoxOutsideTransformedParent, makePolygonOfElement, pathDataToD, removeDuplicatePosition, transformAbsPositionToElementRelativePosition, transformAbsPositionToRelativePositionInsideElement };