orcasvn-react-diagrams 0.1.80 → 0.1.82

package/dist/cjs/index.js

@@ -869,8 +869,18 @@ var EVENT_MANUALLY_TRIGGER_DRAGGING_ELEMENT = 'manuallyTriggerDraggingElement';
 var EVENT_LINK_SELECTED = 'linkSelected';
 var EVENT_TEXT_SELECTED = 'textSelected';
 var EVENT_MANUALLY_TRIGGER_STARTED_LINKING = 'manuallyTriggerStartedLinking';
+var INITIAL_EDITOR_CONFIGURATION = {
+    paperBounds: {
+        minX: -1500,
+        minY: -1500,
+        maxX: 1500,
+        maxY: 1500
+    },
+    paperOrigin: { x: 0, y: 0 }
+};
 var EditorContext = /** @class */ (function () {
     function EditorContext(elements, links, texts, configuration) {
+        if (configuration === void 0) { configuration = INITIAL_EDITOR_CONFIGURATION; }
         var _this = this;
         /** @internal */
         this.onEditorContextUpdated = function (callback) {
@@ -883,7 +893,7 @@ var EditorContext = /** @class */ (function () {
         this._elements = elements;
         this._links = links;
         this._texts = texts;
-        this._configuration = configuration || {};
+        this._configuration = Object.assign({}, INITIAL_EDITOR_CONFIGURATION, configuration);
         this._eventEmitter = new EventEmitter();
     }
     EditorContext.prototype.addEventListener = function (event, callback) {
@@ -7636,14 +7646,14 @@ var correctPortPositionInElement = function (elementRelativePosition, elementWid
     }
     return newPosition || elementRelativePosition;
 };
-var windowsPositionToPaperPosition = function (clientPosition, paperElement, zoom) {
+var windowsPositionToPaperPosition = function (clientPosition, paperElement, zoom, paperBounds) {
     var paperRect = paperElement.getBoundingClientRect();
     // Calculate the position relative to the paper element
-    var xPosOnPaper = (clientPosition.x - paperRect.left) / zoom;
-    var yPosOnPaper = (clientPosition.y - paperRect.top) / zoom;
+    var xPosOnPaper = Math.round((clientPosition.x - paperRect.left) / zoom) + paperBounds.minX;
+    var yPosOnPaper = Math.round((clientPosition.y - paperRect.top) / zoom) + paperBounds.minY;
     return {
-        x: Math.round(xPosOnPaper),
-        y: Math.round(yPosOnPaper),
+        x: xPosOnPaper,
+        y: yPosOnPaper,
     };
 };
 
@@ -7763,11 +7773,22 @@ var automationAddPointsToLink = function (eleLink, elements, limitPoint) {
     return eleLink;
 };
 
+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;
+
 // import { paperEventEmitterContext } from '../../contexts/paperEventEmitterContext';
 var SelectionFrame = function (props) {
     var propTargetSVGElement = props.targetSVGElement, propWidth = props.width, propHeight = props.height, propFramePadding = props.framePadding, objectX = props.objectX, objectY = props.objectY, 
     // movingOffsetThreshold: propMovingOffsetThreshold,
     propMovingRate = props.movingRate, propOnMouseDown = props.onMouseDown, propOnMouseUp = props.onMouseUp, propOnMove = props.onMove, propContainer = props.container, propResizability = props.resizability, propOnResize = props.onResize, draggingByDefault = props.draggingByDefault, PropDragDropHandlerElement = props.dragDropHandlerElement, propStrokeWidth = props.strokeWidth, propAnchor = props.anchor, zoom = props.zoom;
+    var paperBounds = useEditorConfiguration().paperBounds;
     var bbox = propTargetSVGElement === null || propTargetSVGElement === void 0 ? void 0 : propTargetSVGElement.getBBox();
     var _a = React.useState(propWidth || (bbox === null || bbox === void 0 ? void 0 : bbox.width) || MIN_ELEMENT_SIZE), width = _a[0], setWidth = _a[1];
     var _b = React.useState(propHeight || (bbox === null || bbox === void 0 ? void 0 : bbox.height) || MIN_ELEMENT_SIZE), height = _b[0], setHeight = _b[1];
@@ -7815,7 +7836,7 @@ var SelectionFrame = function (props) {
         var position = windowsPositionToPaperPosition({
             x: event.clientX,
             y: event.clientY
-        }, propContainer, zoom);
+        }, propContainer, zoom, paperBounds);
         return position;
     }, [propContainer, zoom]);
     var addRectHandleMouseDown = function (event) {
@@ -8226,39 +8247,136 @@ 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;
-
 /**
  * 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 zoomPanContext = React.createContext(null);
+var ZoomPanContextProvider = function (_a) {
+    var paperOrigin = _a.paperOrigin, children = _a.children, bounds = _a.bounds, onExpandBounds = _a.onExpandBounds;
     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 _e = React.useState(false), isPanning = _e[0], setIsPanning = _e[1];
     var wrapperRef = React.useRef(null);
     var contentRef = React.useRef(null);
-    var handleWheel = function (e) {
-        // Chỉ zoom khi giữ Ctrl
-        if (!e.ctrlKey)
+    var originalWidth = bounds.maxX - bounds.minX;
+    var originalHeight = bounds.maxY - bounds.minY;
+    // Width and height of the content area based on zoom and bounds
+    var contentWidth = Math.min(originalWidth, originalWidth * zoom);
+    var contentHeight = Math.min(originalHeight, originalHeight * zoom);
+    React.useLayoutEffect(function () {
+        var _a;
+        (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+            left: scrollLeft,
+            top: scrollTop,
+        });
+    }, [scrollLeft, scrollTop]);
+    // Pan to paper origin on initial load
+    React.useLayoutEffect(function () {
+        var initialScrollLeft = Math.abs(bounds.minX) + (paperOrigin ? paperOrigin.x : 0);
+        var initialScrollTop = Math.abs(bounds.minY) + (paperOrigin ? paperOrigin.y : 0);
+        setScrollLeft(initialScrollLeft);
+        setScrollTop(initialScrollTop);
+    }, [paperOrigin === null || paperOrigin === void 0 ? void 0 : paperOrigin.x, paperOrigin === null || paperOrigin === void 0 ? void 0 : paperOrigin.y]);
+    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);
+        };
+    }, []);
+    var handleMouseDown = function (e) {
+        if (e.button === 0) { // Left mouse button
+            setIsPanning(true);
+        }
+    };
+    var handleMouseUp = function (e) {
+        setIsPanning(false);
+    };
+    // Throttle function to limit the frequency of handleMouseMove calls
+    var throttle = React.useCallback(function (func, delay) {
+        var timeoutId = null;
+        var lastExecTime = 0;
+        return function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            var currentTime = Date.now();
+            if (currentTime - lastExecTime > delay) {
+                func.apply(void 0, args);
+                lastExecTime = currentTime;
+            }
+            else {
+                if (timeoutId)
+                    clearTimeout(timeoutId);
+                timeoutId = setTimeout(function () {
+                    func.apply(void 0, args);
+                    lastExecTime = Date.now();
+                }, delay - (currentTime - lastExecTime));
+            }
+        };
+    }, []);
+    var handleMouseMoveCore = React.useCallback(function (e) {
+        if (!isPanning || !wrapperRef.current)
             return;
+        if (e.movementX === 0 && e.movementY === 0)
+            return; // Ignore if there's no movement
+        var newScrollLeft = wrapperRef.current.scrollLeft - e.movementX;
+        var newScrollTop = wrapperRef.current.scrollTop - e.movementY;
+        setScrollLeft(newScrollLeft);
+        setScrollTop(newScrollTop);
+        var increment = 100;
+        var newBounds = __assign({}, bounds);
+        var isChangedBounds = false;
+        // If pan reaches the right edge and mouse is moving right
+        if (newScrollLeft + wrapperRef.current.clientWidth > wrapperRef.current.scrollWidth &&
+            e.movementX < 0) {
+            newBounds.maxX += increment;
+            isChangedBounds = true;
+        }
+        // If pan reaches the left edge and mouse is moving left
+        if (newScrollLeft < 0 && e.movementX > 0) {
+            newBounds.minX -= increment;
+            isChangedBounds = true;
+        }
+        // If pan reaches the bottom edge and mouse is moving down
+        if (newScrollTop + wrapperRef.current.clientHeight > wrapperRef.current.scrollHeight &&
+            e.movementY < 0) {
+            newBounds.maxY += increment;
+            isChangedBounds = true;
+        }
+        // If pan reaches the top edge and mouse is moving up
+        if (newScrollTop < 0 && e.movementY > 0) {
+            newBounds.minY -= increment;
+            isChangedBounds = true;
+        }
+        if (isChangedBounds && onExpandBounds) {
+            onExpandBounds(newBounds);
+        }
+    }, [isPanning, bounds, onExpandBounds]);
+    // Throttled version of handleMouseMove (16ms = ~60fps)
+    var handleMouseMove = React.useCallback(throttle(handleMouseMoveCore, 16), [throttle, handleMouseMoveCore, bounds]);
+    var handleWheelCore = React.useCallback(function (e) {
         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));
+        // Only zoom when Ctrl key is pressed
+        if (!e.ctrlKey)
+            return;
         if (!wrapperRef.current || !contentRef.current)
             return;
+        var delta = -e.deltaY;
+        // Adjust zoom factor as needed
+        var zoomFactor = 0.02;
+        var newZoom = zoom + (delta > 0 ? zoomFactor : -zoomFactor);
+        newZoom = Math.max(0.1, Math.min(newZoom, 4)); // Clamp zoom between 0.1 and 4
         var wrapper = wrapperRef.current;
         var content = contentRef.current;
         // Get bounding rectangle of the content
@@ -8267,55 +8385,49 @@ var ZoomContextProvider = function (_a) {
         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;
+        // Calculate new scroll positions to keep the point under the cursor stationary
         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) {
+    }, [zoom]);
+    // Throttled version of handleWheel (16ms = ~60fps)
+    var handleWheel = React.useCallback(throttle(handleWheelCore, 16), [throttle, handleWheelCore]);
+    var value = {
+        zoom: zoom,
+        isPanning: isPanning,
+        wrapperContainer: wrapperRef.current,
+        setZoom: setZoom,
+        resetZoom: resetZoom
+    };
+    return (React.createElement(zoomPanContext.Provider, { value: value },
+        React.createElement("div", { ref: wrapperRef, onWheel: handleWheel, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseMove: handleMouseMove, 
+            // onScroll={handleScroll}
+            onContextMenu: function (e) {
                 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: {
+            }, style: {
                 width: "100vw",
                 height: "92vh",
                 overflow: "auto",
+                cursor: isPanning ? "grabbing" : "default",
             } },
             React.createElement("div", { ref: contentRef, style: {
                     transform: "scale(".concat(zoom, ")"),
                     transformOrigin: "top left",
-                    // transition: "transform 0.1s linear",
+                    width: contentWidth,
+                    height: contentHeight,
                 } }, children))));
 };
-var useZoomContext = function () {
-    var context = React.useContext(zoomContext);
+var useZoomPanContext = function () {
+    var context = React.useContext(zoomPanContext);
     if (!context) {
-        throw new Error("useZoomContext must be used within a ZoomContextProvider");
+        throw new Error("useZoomPanContext must be used within a ZoomPanContextProvider");
     }
     return context;
 };
@@ -8325,7 +8437,7 @@ var Text = React.forwardRef(function (_a, ref) {
     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 zoom = useZoomContext().zoom;
+    var zoom = useZoomPanContext().zoom;
     var absolutePosition = React.useMemo(function () {
         var _a, _b;
         return {
@@ -8533,7 +8645,8 @@ var IElementLink = function (_a) {
     }), selectedLabelRef = _k[0], setSelectedLabelRef = _k[1];
     var _l = React.useState(false), isSelectedLink = _l[0], setIsSelectedLink = _l[1];
     var _m = React.useContext(paperEventEmitterContext), onPaperClicked = _m.onPaperClicked, onElementSelected = _m.onElementSelected;
-    var zoom = useZoomContext().zoom;
+    var zoom = useZoomPanContext().zoom;
+    var paperBounds = useEditorConfiguration().paperBounds;
     var pathRef = React.useRef(null);
     var labelRef = React.useRef(null);
     var sourceLabelRef = React.useRef(null);
@@ -8658,7 +8771,7 @@ var IElementLink = function (_a) {
                 var paperPosition_1 = windowsPositionToPaperPosition({
                     x: mouseEvent.clientX,
                     y: mouseEvent.clientY
-                }, container, zoom);
+                }, container, zoom, paperBounds);
                 if (draggingPointIndexRef.current !== undefined) { // If dragging a point
                     setPoints(function (prev) {
                         var temp = __spreadArray([], prev, true);
@@ -8688,7 +8801,7 @@ var IElementLink = function (_a) {
             container === null || container === void 0 ? void 0 : container.removeEventListener('mousemove', handleMouseMove);
             container === null || container === void 0 ? void 0 : container.removeEventListener('mouseup', mouseUp);
         };
-    }, [container, isDragging, zoom, points, id, addMovingPoint]);
+    }, [container, isDragging, zoom, points, id, addMovingPoint, paperBounds]);
     React.useEffect(function () {
         console.info("Container changed in link", id);
     }, [addMovingPoint]);
@@ -8824,24 +8937,35 @@ function configureLogger(_a) {
 }
 
 var Ruler = function (_a) {
-    var squareSize = _a.squareSize, border = _a.border;
-    var numColumns = Math.ceil(3000 / squareSize);
-    var numRows = Math.ceil(3000 / squareSize);
-    var tableWidth = numColumns * squareSize;
-    return (React.createElement("table", { style: { position: 'absolute', zIndex: -1, top: 0, left: 0, borderCollapse: 'collapse', width: tableWidth } },
-        React.createElement("tbody", null, Array.from({ length: numRows }).map(function (_, rowIndex) { return (React.createElement("tr", { key: rowIndex, style: { margin: 0, padding: 0 } }, Array.from({ length: numColumns }).map(function (_, colIndex) { return (React.createElement("td", { key: colIndex, style: {
-                width: squareSize,
-                height: squareSize,
-                border: border,
-                margin: 0,
-                padding: 0,
-                boxSizing: 'border-box',
-                verticalAlign: 'top',
-                position: 'relative',
-                fontSize: 12,
-            } },
-            rowIndex === 0 ? React.createElement("span", { style: { marginLeft: "-12px" } }, colIndex * squareSize) : "",
-            colIndex === 0 ? React.createElement("span", { style: { top: "-9px", position: "absolute" } }, rowIndex * squareSize) : "")); }))); }))));
+    // const [offsetX, setOffsetX] = React.useState(0);
+    // const [offsetY, setOffsetY] = React.useState(0);
+    var squareSize = _a.squareSize, _b = _a.gridStroke, gridStroke = _b === void 0 ? 'grey' : _b, bounds = _a.bounds;
+    var minX = bounds.minX, minY = bounds.minY, maxX = bounds.maxX, maxY = bounds.maxY;
+    // const numColumnsInNegative = Math.ceil(Math.abs(minX) / squareSize);
+    // const numRowsInNegative = Math.ceil(Math.abs(minY) / squareSize);
+    var width = maxX - minX;
+    var height = maxY - minY;
+    var cellSize = squareSize;
+    var gridStrokeWidth = 1;
+    var borderStroke = '#000000';
+    var borderStrokeWidth = 2;
+    var patternId = "svg-grid-".concat(cellSize, "-").concat(gridStroke.replace(/[#(), ]/g, ""));
+    // When scrolling/panning/wheeling/zooming, we need to update the offsets of the grid so that it appears fixed relative to the content
+    // Update offsets when bounds change
+    // useLayoutEffect(() => {
+    //     console.count("Updating ruler offsets due to bounds/zoom/scrollOffset change");
+    //     const newOffsetX = scrollOffset.x / zoom;
+    //     const newOffsetY = scrollOffset.y / zoom;
+    //     setOffsetX(newOffsetX);
+    //     setOffsetY(newOffsetY);
+    // }, [minX, minY, maxX, maxY, zoom, scrollOffset.x, scrollOffset.y]);
+    return (React.createElement("div", { style: { width: width, height: height, position: 'absolute', top: 0, left: 0, zIndex: -1 } },
+        React.createElement("svg", { viewBox: "0 0 ".concat(width, " ").concat(height), width: "100%", height: "100%", preserveAspectRatio: "xMinYMin meet", role: "img", "aria-label": "Grid ".concat(width, " by ").concat(height, " with cell ").concat(cellSize) },
+            React.createElement("defs", null,
+                React.createElement("pattern", { id: patternId, width: cellSize, height: cellSize, patternUnits: "userSpaceOnUse" },
+                    React.createElement("path", { d: "M ".concat(cellSize, " 0 L 0 0 0 ").concat(cellSize), fill: "none", stroke: gridStroke, strokeWidth: gridStrokeWidth }))),
+            React.createElement("rect", { x: 0, y: 0, width: width, height: height, fill: "url(#".concat(patternId, ")") }),
+            React.createElement("rect", { x: 0, y: 0, width: width, height: height, fill: "none", stroke: borderStroke, strokeWidth: borderStrokeWidth }))));
 };
 
 var ElementWrapper = React.forwardRef(function (_a, ref) {
@@ -8863,14 +8987,23 @@ var ElementWrapper = React.forwardRef(function (_a, ref) {
     return (React.createElement("svg", { className: cssClass, x: x, y: y, onClick: handleClick, onContextMenu: handleClick, onMouseDown: onMouseDown, ref: ref, style: { overflow: "visible" }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseUp: onMouseUp }, children));
 });
 
+var transformPositionToAnchoredPosition = function (position, elementSize, anchor) {
+    var anchoredPosition = { x: position.x, y: position.y };
+    if (anchor === exports.PositioningAnchor.Center) {
+        anchoredPosition.x = position.x - elementSize.width / 2;
+        anchoredPosition.y = position.y - elementSize.height / 2;
+    }
+    return anchoredPosition;
+};
 var Element = React.forwardRef(function (props, forwardedRef) {
     var _paperEventEmitterContext = React.useContext(paperEventEmitterContext);
+    var paperBounds = useEditorConfiguration().paperBounds;
     // const elementObj = props.element;
     var beingSelected = props.beingSelected, portPlaceholderShape = props.portPlaceholderShape, children = props.children, container = props.container, onMouseUp = props.onMouseUp, onMouseDown = props.onMouseDown, onMouseLeave = props.onMouseLeave, onMouseMove = props.onMouseMove, onMoving = props.onMoving, onMoved = props.onMoved, onResized = props.onResized, onPortMoved = props.onPortMoved, onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, onClick = props.onClick, onContextMenu = props.onContextMenu, onPortContextMenu = props.onPortContextMenu, onMouseUpAtLinkedPortPlaceholder = props.onMouseUpAtLinkedPortPlaceholder, onManuallyTriggerRenderPort = props.onManuallyTriggerRenderPort, draggingByDefault = props.draggingByDefault, parentDOM = props.parentDOM;
     var _a = props.element, id = _a.id, cssClass = _a.cssClass; _a.textsPlaceHolderClassName; var portSlideRailSVGClassName = _a.portSlideRailSVGClassName, portMoveableAreas = _a.portMoveableAreas, portDirection = _a.portDirection, defaultPortSize = _a.defaultPortSize; _a.textsPlaceHolderFlexStyle; _a.textsPlaceHolderFlexboxPosition; var resizability = _a.resizability, renderShape = _a.renderShape;
     var propPorts = props.element.ports;
     //state for position
-    var _b = React.useState(__assign({}, props.element.position)), position = _b[0], setPosition = _b[1];
+    var _b = React.useState(__assign({}, transformPositionToAnchoredPosition(props.element.position, props.element.size, props.element.positionAnchor || exports.PositioningAnchor.TopLeft))), position = _b[0], setPosition = _b[1];
     //state for size
     var _c = React.useState(__assign({}, props.element.size)), size = _c[0], setSize = _c[1];
     var _d = React.useState(), selectedPort = _d[0], setSelectedPort = _d[1];
@@ -8880,8 +9013,8 @@ var Element = React.forwardRef(function (props, forwardedRef) {
     var _h = React.useState(false), someElementLinkStarted = _h[0], setSomeElementLinkStarted = _h[1];
     var _j = React.useState(), potentialPortPosition = _j[0], setPotentialPortPosition = _j[1];
     //Zoom
-    var zoom = useZoomContext().zoom;
-    var zoomRef = React.useRef(zoom);
+    var zoom = useZoomPanContext().zoom;
+    React.useRef(zoom);
     var elementRef = React.useRef(null);
     React.useImperativeHandle(forwardedRef, function () { return elementRef.current; });
     var elementLinkStarted = React.useRef();
@@ -8924,7 +9057,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             portsRef.current = newState;
             return newState;
         });
-    }, [normalizePortPosition]);
+    }, [normalizePortPosition, onPortMoved, id, _paperEventEmitterContext]);
     // useLayoutEffect(() => {
     //     if (!hasNormalizedPortPositions.current && elementRef.current) {
     //         handlePortsState(portsRef.current);
@@ -8949,9 +9082,10 @@ var Element = React.forwardRef(function (props, forwardedRef) {
     var elementAbsPosition = React.useMemo(function () { return getElementAbsPosition(); }, [getElementAbsPosition]);
     //update element position
     var updateElementPosition = React.useCallback(function (newPosition) {
-        setPosition({ x: newPosition.x, y: newPosition.y });
+        var newPositionAdjusted = transformPositionToAnchoredPosition(newPosition, { width: size.width, height: size.height }, props.element.positionAnchor || exports.PositioningAnchor.TopLeft);
+        setPosition(newPositionAdjusted);
         props.element.position = { x: newPosition.x, y: newPosition.y };
-    }, [props.element]);
+    }, [props.element, size.width, size.height]);
     //update element size
     var updateElementSize = React.useCallback(function (newSize) {
         setSize({ width: newSize.width, height: newSize.height });
@@ -9208,7 +9342,7 @@ var Element = React.forwardRef(function (props, forwardedRef) {
             var paper = windowsPositionToPaperPosition({
                 x: ev.clientX,
                 y: ev.clientY
-            }, container, zoom);
+            }, container, zoom, paperBounds);
             var elementAbsPosition_1 = getElementAbsPosition();
             var mousePositionOnElement = {
                 x: paper.x - elementAbsPosition_1.x,
@@ -9380,16 +9514,24 @@ var Element = React.forwardRef(function (props, forwardedRef) {
                 }, objectX: elementAbsPosition === null || elementAbsPosition === void 0 ? void 0 : elementAbsPosition.x, objectY: elementAbsPosition === null || elementAbsPosition === void 0 ? void 0 : elementAbsPosition.y, width: size.width, height: size.height, zoom: zoom, draggingByDefault: draggingByDefault, 
                 //movingOffsetThreshold: ELEMENT_MOVING_OFFSET_THRESHOLD,
                 onMouseDown: function (ev) {
-                    windowsPositionToPaperPosition({
-                        x: ev.clientX,
-                        y: ev.clientY
-                    }, container, zoomRef.current);
+                    // const paperPosition = windowsPositionToPaperPosition(
+                    //     {
+                    //         x: ev.clientX,
+                    //         y: ev.clientY
+                    //     },
+                    //     container as Element,
+                    //     zoomRef.current
+                    // )
                     onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(ev, id);
                 }, onMouseUp: function (ev) {
-                    windowsPositionToPaperPosition({
-                        x: ev.clientX,
-                        y: ev.clientY
-                    }, container, zoomRef.current);
+                    // const paperPosition = windowsPositionToPaperPosition(
+                    //     {
+                    //         x: ev.clientX,
+                    //         y: ev.clientY
+                    //     },
+                    //     container as Element,
+                    //     zoomRef.current
+                    // )
                     onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(ev, id);
                 }, onMove: function (newX, newY) {
                     var _a;
@@ -9701,14 +9843,16 @@ var Paper = function (props) {
     var _j = React.useState(null), selectedElementSVG = _j[0], setSelectedElementSVG = _j[1];
     var _k = React.useState(false), mouseDownedOnPaper = _k[0], setMouseDownedOnPaper = _k[1];
     var paperEventEmitter = React.useContext(paperEventEmitterContext);
-    var zoom = useZoomContext().zoom;
+    var zoom = useZoomPanContext().zoom;
+    var paperBounds = useEditorConfiguration().paperBounds;
+    var paperWidth = paperBounds.maxX - paperBounds.minX;
+    var paperHeight = paperBounds.maxY - paperBounds.minY;
     var zoomRef = React.useRef(zoom);
     var paperContainerRef = React.useRef(null);
     var tempLinkRef = React.useRef(tempLink); //Cache tempLink to avoid re-render when tempLink changed
     //const elementsRef = useRef<IElementState[]>([]); //Cache elements to avoid re-render when elements changed
     var linksRef = React.useRef(links); //Cache links to avoid re-render when links changed
     var textsRef = React.useRef(texts); //Cache texts to avoid re-render when texts changed
-    var size = props.size;
     var onPortMoved = props.onPortMoved, onPortSelected = props.onPortSelected, onPortMouseDown = props.onPortMouseDown, onPortMouseUp = props.onPortMouseUp, 
     //onPortsChanged,
     onPortContextMenu = props.onPortContextMenu, onElementSelected = props.onElementSelected, onElementsChanged = props.onElementsChanged, onElementResized = props.onElementResized, onElementContextMenu = props.onElementContextMenu, onElementMouseUp = props.onElementMouseUp, onElementMouseDown = props.onElementMouseDown, onElementMouseMove = props.onElementMouseMove, onElementMoved = props.onElementMoved, onElementMouseLeave = props.onElementMouseLeave, onElementDeleted = props.onElementDeleted, onLinksChanged = props.onLinksChanged, onLinkSelected = props.onLinkSelected, onTextSelected = props.onTextSelected, onTextsChanged = props.onTextsChanged, manuallyTriggerRenderElementsHandler = props.manuallyTriggerRenderElementsHandler, manuallyTriggerRenderElementHandler = props.manuallyTriggerRenderElementHandler, manuallyTriggerRenderPortHandler = props.manuallyTriggerRenderPortHandler, onCreatingPortByLinking = props.onCreatingPortByLinking, onCreatingLink = props.onCreatingLink, onElementMoving = props.onElementMoving, manuallySelectElementHandler = props.manuallySelectElementHandler, manuallyTriggerDraggingElementHandler = props.manuallyTriggerDraggingElementHandler, manuallyTriggerStartedLinkingHandler = props.manuallyTriggerStartedLinkingHandler;
@@ -9993,7 +10137,7 @@ var Paper = function (props) {
         var _b = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
-        }, paperContainerRef.current, zoom), xPosOnPaper = _b.x, yPosOnPaper = _b.y;
+        }, paperContainerRef.current, zoom, paperBounds), xPosOnPaper = _b.x, yPosOnPaper = _b.y;
         //if there is a temp link, update the temp target point
         if (tempLink) {
             var sourceElementAbsPosition = getAbsolutePosition(tempLink.sourceElement);
@@ -10019,7 +10163,7 @@ var Paper = function (props) {
         var _c = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
-        }, paperContainerRef.current, zoom), xPosOnPaper = _c.x, yPosOnPaper = _c.y;
+        }, paperContainerRef.current, zoom, paperBounds), xPosOnPaper = _c.x, yPosOnPaper = _c.y;
         setMouseDownedOnPaper(true);
         (_a = props.onPaperClicked) === null || _a === void 0 ? void 0 : _a.call(props, {
             x: xPosOnPaper,
@@ -10038,7 +10182,7 @@ var Paper = function (props) {
         var _b = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
-        }, paperContainerRef.current, zoom), xPosOnPaper = _b.x, yPosOnPaper = _b.y;
+        }, paperContainerRef.current, zoom, paperBounds), xPosOnPaper = _b.x, yPosOnPaper = _b.y;
         if (mouseDownedOnPaper) {
             setSelectedElement(undefined);
             setSelectedElementSVG(null);
@@ -10187,7 +10331,7 @@ var Paper = function (props) {
         var paperPosition = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
-        }, paperContainerRef.current, zoomRef.current);
+        }, paperContainerRef.current, zoomRef.current, paperBounds);
         //broadcast port mouse down to parent component
         if (element) {
             onPortMouseDown === null || onPortMouseDown === void 0 ? void 0 : onPortMouseDown(port, element, paperPosition);
@@ -10203,7 +10347,7 @@ var Paper = function (props) {
             setTempLink(newLink);
             paperEventEmitter.emitElementLinkStarted(newLink);
         }
-    }, [paperEventEmitter, elementsState, onPortMouseDown]);
+    }, [paperEventEmitter, elementsState, paperBounds, onPortMouseDown]);
     var createElementLink = React.useCallback(function (sourcePort, sourceElement, targetPort, targetElement) {
         //if no onCreatingLink prop, no link will be created
         if (!onCreatingLink) {
@@ -10225,7 +10369,7 @@ var Paper = function (props) {
         var paperPosition = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
-        }, paperContainerRef.current, zoomRef.current);
+        }, paperContainerRef.current, zoomRef.current, paperBounds);
         //broadcast port mouse down to parent component
         if (element) {
             onPortMouseUp === null || onPortMouseUp === void 0 ? void 0 : onPortMouseUp(port, element, paperPosition);
@@ -10254,7 +10398,7 @@ var Paper = function (props) {
             }
             setTempLink(null);
         }
-    }, [paperEventEmitter, elementsState, createElementLink, onPortMouseUp, onLinksChanged]);
+    }, [paperEventEmitter, elementsState, paperBounds, createElementLink, onPortMouseUp, onLinksChanged]);
     // const handlePortsChanged = useCallback((ports: IPort[], elementId: string) => {
     //     const element = elementsRef.current.find(e => e.id === elementId);
     //     if (element) {
@@ -10475,41 +10619,41 @@ var Paper = function (props) {
         var paperPosition = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
-        }, paperContainerRef.current, zoomRef.current);
+        }, paperContainerRef.current, zoomRef.current, paperBounds);
         if (element) {
             onElementMouseUp === null || onElementMouseUp === void 0 ? void 0 : onElementMouseUp(ev, element, paperPosition);
         }
-    }, [onElementMouseUp, elementsState]);
+    }, [onElementMouseUp, elementsState, paperBounds]);
     var handleMouseDown = React.useCallback(function (ev, elementId) {
         var element = elementsState.elements.find(function (ele) { return ele.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
-        }, paperContainerRef.current, zoomRef.current);
+        }, paperContainerRef.current, zoomRef.current, paperBounds);
         if (element) {
             onElementMouseDown === null || onElementMouseDown === void 0 ? void 0 : onElementMouseDown(ev, element, paperPosition);
         }
-    }, [onElementMouseDown, elementsState]);
+    }, [onElementMouseDown, elementsState, paperBounds]);
     var handleMouseMove = React.useCallback(function (ev, elementId) {
         var element = elementsState.elements.find(function (ele) { return ele.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
-        }, paperContainerRef.current, zoomRef.current);
+        }, paperContainerRef.current, zoomRef.current, paperBounds);
         if (element) {
             onElementMouseMove === null || onElementMouseMove === void 0 ? void 0 : onElementMouseMove(ev, element, paperPosition);
         }
-    }, [onElementMouseMove, elementsState]);
+    }, [onElementMouseMove, elementsState, paperBounds]);
     var handleMouseLeave = React.useCallback(function (ev, elementId) {
         var element = elementsState.elements.find(function (ele) { return ele.id === elementId; });
         var paperPosition = windowsPositionToPaperPosition({
             x: ev.clientX,
             y: ev.clientY
-        }, paperContainerRef.current, zoomRef.current);
+        }, paperContainerRef.current, zoomRef.current, paperBounds);
         if (element) {
             onElementMouseLeave === null || onElementMouseLeave === void 0 ? void 0 : onElementMouseLeave(ev, element, paperPosition);
         }
-    }, [onElementMouseLeave, elementsState]);
+    }, [onElementMouseLeave, elementsState, paperBounds]);
     var renderElementInTree = React.useCallback(function (element) {
         var _a;
         logger.info("Rendering element tree for element ".concat(element.id));
@@ -10518,7 +10662,7 @@ var Paper = function (props) {
         return (React.createElement("g", { id: "group-of-element-".concat(element.id), key: element.id },
             React.createElement(ReactElement, { key: "element-".concat(element.id, "-").concat(element.version), element: element, 
                 //id={element.id}
-                //ref={(refDOM) => element.DOM = refDOM}
+                ref: function (refDOM) { return element.DOM = refDOM; }, 
                 //height={element.size.height}
                 //width={element.size.width}
                 //x={element.positionAnchor === PositioningAnchor.Center ? element.position.x - element.size.width / 2 : element.position.x}
@@ -10547,8 +10691,8 @@ var Paper = function (props) {
         });
     }, [elementsState.elementsInTree, renderElementInTree]);
     return (React.createElement("div", { style: { position: "relative" } },
-        React.createElement(Ruler, { squareSize: 100, border: '1px dashed grey' }),
-        React.createElement("svg", { tabIndex: 0, width: size.width, height: size.height, ref: paperContainerRef, id: "paper-container", onMouseMove: handlePaperMouseMove, onMouseDown: handleMouseDownOnPaper, onMouseUp: handleMouseUpOnPaper },
+        React.createElement(Ruler, { bounds: paperBounds, squareSize: 100 }),
+        React.createElement("svg", { tabIndex: 0, width: paperWidth, height: paperHeight, viewBox: "".concat(paperBounds.minX, " ").concat(paperBounds.minY, " ").concat(paperWidth, " ").concat(paperHeight), ref: paperContainerRef, id: "paper-container", onMouseMove: handlePaperMouseMove, onMouseDown: handleMouseDownOnPaper, onMouseUp: handleMouseUpOnPaper },
             paperContainerRef.current ? ElementsInTree : "",
             links && links.map(function (link, index) {
                 if (!link.targetElement || !link.targetPort)
@@ -10567,16 +10711,11 @@ var Paper = function (props) {
 var Paper$1 = React.memo(Paper);
 
 var Editor = function (_a) {
-    var editorContext = _a.editorContext, width = _a.width, height = _a.height;
+    var editorContext = _a.editorContext; _a.width; _a.height;
     var _b = React.useState([]), elements = _b[0], setElements = _b[1];
     var _c = React.useState([]), links = _c[0], setLinks = _c[1];
     var _d = React.useState([]), texts = _d[0], setTexts = _d[1];
-    if (!width) {
-        width = 3000;
-    }
-    if (!height) {
-        height = 3000;
-    }
+    var _e = React.useState(editorContext.configuration.paperBounds), bounds = _e[0], setBounds = _e[1];
     var setEditorStates = React.useCallback(function (ctx) {
         setElements(__spreadArray([], ctx.elements, true));
         setLinks(__spreadArray([], ctx.links, true));
@@ -10687,8 +10826,11 @@ var Editor = function (_a) {
         editorContext.onElementRemovedHandler(element.id, parentElementId);
     }, [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, 
+        React.createElement(ZoomPanContextProvider, { bounds: bounds, paperOrigin: editorContext.configuration.paperOrigin, onExpandBounds: function (bounds) {
+                editorContext.configuration.paperBounds = bounds;
+                setBounds(bounds);
+            } },
+            React.createElement(Paper$1, { key: "paper", elements: elements, links: links, texts: texts, onPaperClicked: handlePaperClicked, onPortMouseDown: handlePortMouseDown, onPortMouseUp: handlePortMouseUp, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, 
                 //onPortsChanged={handlePortsChanged}
                 onPortContextMenu: handlePortContextMenu, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onElementMouseLeave: handleElementMouseLeave, onElementMouseMove: handleElementMouseMove, onElementMouseDown: handleElementMouseDown, onElementMouseUp: handleElementMouseUp, onElementDeleted: handleElementRemoved, onElementsChanged: handleElementsChanged, onCreatingLink: handleOnCreatingLink, onElementMoving: handleOnElementMoving, onCreatingPortByLinking: handleOnCreatingPortByLinking, onLinkSelected: handleLinkSelected, onLinksChanged: handleLinksChanged, onTextSelected: handleTextSelected, onTextsChanged: handleTextsChanged, onPaperMouseMoved: handlePaperMouseMoved, onPaperMouseUp: handlePaperMouseUp, onPaperMouseDown: handlePaperMouseDown, manuallyTriggerRenderElementsHandler: editorContext.manuallyTriggerRenderElementsHandler.bind(editorContext), manuallyTriggerRenderElementHandler: editorContext.manuallyTriggerRenderElementHandler.bind(editorContext), manuallyTriggerRenderPortHandler: editorContext.manuallyTriggerRenderPortHandler.bind(editorContext), manuallySelectElementHandler: editorContext.manuallySelectElementHandler.bind(editorContext), manuallyTriggerDraggingElementHandler: editorContext.manuallyTriggerDraggingElementHandler.bind(editorContext), manuallyTriggerStartedLinkingHandler: editorContext.manuallyTriggerStartedLinkingHandler.bind(editorContext) }))));
 };