@xyflow/system 0.0.13 → 0.0.14

package/dist/esm/index.d.ts

@@ -5,4 +5,5 @@ export * from './xydrag';
 export * from './xyhandle';
 export * from './xyminimap';
 export * from './xypanzoom';
+export * from './xyresizer';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}

package/dist/esm/index.js

@@ -2173,4 +2173,221 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
     };
 }
 
-export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, addEdgeBase, adoptUserProvidedNodes, areConnectionMapsEqual, boxToRect, calcAutoPan, calcNextPosition, clamp, clampPosition, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdgesBase, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHostForElement, getIncomersBase, getMarkerId, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoersBase, getOverlappingArea, getPointerPosition, getPositionWithOrigin, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, infiniteExtent, internalsSymbol, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeToBox, nodeToRect, panBy, pointToRendererPoint, rectToBox, rendererPointToPoint, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateEdgeBase, updateNodeDimensions };
+var ResizeControlVariant;
+(function (ResizeControlVariant) {
+    ResizeControlVariant["Line"] = "line";
+    ResizeControlVariant["Handle"] = "handle";
+})(ResizeControlVariant || (ResizeControlVariant = {}));
+const XY_RESIZER_HANDLE_POSITIONS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+const XY_RESIZER_LINE_POSITIONS = ['top', 'right', 'bottom', 'left'];
+
+/**
+ * Get all connecting edges for a given set of nodes
+ * @param width - new width of the node
+ * @param prevWidth - previous width of the node
+ * @param height - new height of the node
+ * @param prevHeight - previous height of the node
+ * @param affectsX - whether to invert the resize direction for the x axis
+ * @param affectsY - whether to invert the resize direction for the y axis
+ * @returns array of two numbers representing the direction of the resize for each axis, 0 = no change, 1 = increase, -1 = decrease
+ */
+function getResizeDirection({ width, prevWidth, height, prevHeight, affectsX, affectsY, }) {
+    const deltaWidth = width - prevWidth;
+    const deltaHeight = height - prevHeight;
+    const direction = [deltaWidth > 0 ? 1 : deltaWidth < 0 ? -1 : 0, deltaHeight > 0 ? 1 : deltaHeight < 0 ? -1 : 0];
+    if (deltaWidth && affectsX) {
+        direction[0] = direction[0] * -1;
+    }
+    if (deltaHeight && affectsY) {
+        direction[1] = direction[1] * -1;
+    }
+    return direction;
+}
+/**
+ * Parses the control position that is being dragged to dimensions that are being resized
+ * @param controlPosition - position of the control that is being dragged
+ * @returns isHorizontal, isVertical, affectsX, affectsY,
+ */
+function getControlDirection(controlPosition) {
+    const isHorizontal = controlPosition.includes('right') || controlPosition.includes('left');
+    const isVertical = controlPosition.includes('bottom') || controlPosition.includes('top');
+    const affectsX = controlPosition.includes('left');
+    const affectsY = controlPosition.includes('top');
+    return {
+        isHorizontal,
+        isVertical,
+        affectsX,
+        affectsY,
+    };
+}
+/**
+ * Calculates new width & height of node after resize based on pointer position
+ * @param startValues - starting values of resize
+ * @param controlDirection - dimensions affected by the resize
+ * @param pointerPosition - the current pointer position corrected for snapping
+ * @param boundaries - minimum and maximum dimensions of the node
+ * @param keepAspectRatio - prevent changes of asprect ratio
+ * @returns width: new width of node, height: new height of node
+ */
+function getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio) {
+    const { isHorizontal, isVertical, affectsX, affectsY } = controlDirection;
+    const { xSnapped, ySnapped } = pointerPosition;
+    const { minWidth, maxWidth, minHeight, maxHeight } = boundaries;
+    const { pointerX: startX, pointerY: startY, width: startWidth, height: startHeight, aspectRatio } = startValues;
+    const distX = Math.floor(isHorizontal ? xSnapped - startX : 0);
+    const distY = Math.floor(isVertical ? ySnapped - startY : 0);
+    let width = clamp(startWidth + (affectsX ? -distX : distX), minWidth, maxWidth);
+    let height = clamp(startHeight + (affectsY ? -distY : distY), minHeight, maxHeight);
+    if (keepAspectRatio) {
+        const nextAspectRatio = width / height;
+        const isDiagonal = isHorizontal && isVertical;
+        const isOnlyHorizontal = isHorizontal && !isVertical;
+        const isOnlyVertical = isVertical && !isHorizontal;
+        width = (nextAspectRatio <= aspectRatio && isDiagonal) || isOnlyVertical ? height * aspectRatio : width;
+        height = (nextAspectRatio > aspectRatio && isDiagonal) || isOnlyHorizontal ? width / aspectRatio : height;
+        if (width >= maxWidth) {
+            width = maxWidth;
+            height = maxWidth / aspectRatio;
+        }
+        else if (width <= minWidth) {
+            width = minWidth;
+            height = minWidth / aspectRatio;
+        }
+        if (height >= maxHeight) {
+            height = maxHeight;
+            width = maxHeight * aspectRatio;
+        }
+        else if (height <= minHeight) {
+            height = minHeight;
+            width = minHeight * aspectRatio;
+        }
+    }
+    return {
+        width,
+        height,
+    };
+}
+/**
+ * Determines new x & y position of node after resize based on new width & height
+ * @param startValues - starting values of resize
+ * @param controlDirection - dimensions affected by the resize
+ * @param width - new width of node
+ * @param height - new height of node
+ * @returns x: new x position of node, y: new y position of node
+ */
+function getPositionAfterResize(startValues, controlDirection, width, height) {
+    return {
+        x: controlDirection.affectsX ? startValues.x - (width - startValues.width) : startValues.x,
+        y: controlDirection.affectsY ? startValues.y - (height - startValues.height) : startValues.y,
+    };
+}
+
+const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
+const initStartValues = {
+    ...initPrevValues,
+    pointerX: 0,
+    pointerY: 0,
+    aspectRatio: 1,
+};
+const initChange = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    isXPosChange: false,
+    isYPosChange: false,
+    isWidthChange: false,
+    isHeightChange: false,
+};
+function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
+    const selection = select(domNode);
+    function update({ controlPosition, boundaries, keepAspectRatio, onResizeStart, onResize, onResizeEnd, shouldResize, }) {
+        let prevValues = { ...initPrevValues };
+        let startValues = { ...initStartValues };
+        const controlDirection = getControlDirection(controlPosition);
+        const dragHandler = drag()
+            .on('start', (event) => {
+            const { nodeLookup, transform, snapGrid, snapToGrid } = getStoreItems();
+            const node = nodeLookup.get(nodeId);
+            const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+            prevValues = {
+                width: node?.computed?.width ?? 0,
+                height: node?.computed?.height ?? 0,
+                x: node?.position.x ?? 0,
+                y: node?.position.y ?? 0,
+            };
+            startValues = {
+                ...prevValues,
+                pointerX: xSnapped,
+                pointerY: ySnapped,
+                aspectRatio: prevValues.width / prevValues.height,
+            };
+            onResizeStart?.(event, { ...prevValues });
+        })
+            .on('drag', (event) => {
+            const { nodeLookup, transform, snapGrid, snapToGrid } = getStoreItems();
+            const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+            const node = nodeLookup.get(nodeId);
+            if (node) {
+                const change = { ...initChange };
+                const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
+                const { width, height } = getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio);
+                const isWidthChange = width !== prevWidth;
+                const isHeightChange = height !== prevHeight;
+                if (controlDirection.affectsX || controlDirection.affectsY) {
+                    const { x, y } = getPositionAfterResize(startValues, controlDirection, width, height);
+                    // only transform the node if the width or height changes
+                    const isXPosChange = x !== prevX && isWidthChange;
+                    const isYPosChange = y !== prevY && isHeightChange;
+                    if (isXPosChange || isYPosChange) {
+                        change.isXPosChange = isXPosChange;
+                        change.isYPosChange = isYPosChange;
+                        change.x = isXPosChange ? x : prevX;
+                        change.y = isYPosChange ? y : prevY;
+                        prevValues.x = change.x;
+                        prevValues.y = change.y;
+                    }
+                }
+                if (isWidthChange || isHeightChange) {
+                    change.isWidthChange = isWidthChange;
+                    change.isHeightChange = isHeightChange;
+                    change.width = width;
+                    change.height = height;
+                    prevValues.width = width;
+                    prevValues.height = height;
+                }
+                if (!change.isXPosChange && !change.isYPosChange && !isWidthChange && !isHeightChange) {
+                    return;
+                }
+                const direction = getResizeDirection({
+                    width: prevValues.width,
+                    prevWidth,
+                    height: prevValues.height,
+                    prevHeight,
+                    affectsX: controlDirection.affectsX,
+                    affectsY: controlDirection.affectsY,
+                });
+                const nextValues = { ...prevValues, direction };
+                const callResize = shouldResize?.(event, nextValues);
+                if (callResize === false) {
+                    return;
+                }
+                onResize?.(event, nextValues);
+                onChange(change);
+            }
+        })
+            .on('end', (event) => {
+            onResizeEnd?.(event, { ...prevValues });
+        });
+        selection.call(dragHandler);
+    }
+    function destroy() {
+        selection.on('.drag', null);
+    }
+    return {
+        update,
+        destroy,
+    };
+}
+
+export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdgeBase, adoptUserProvidedNodes, areConnectionMapsEqual, boxToRect, calcAutoPan, calcNextPosition, clamp, clampPosition, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdgesBase, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHostForElement, getIncomersBase, getMarkerId, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoersBase, getOverlappingArea, getPointerPosition, getPositionWithOrigin, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, infiniteExtent, internalsSymbol, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeToBox, nodeToRect, panBy, pointToRendererPoint, rectToBox, rendererPointToPoint, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateEdgeBase, updateNodeDimensions };

package/dist/esm/index.mjs

@@ -2173,4 +2173,221 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
     };
 }
 
-export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, addEdgeBase, adoptUserProvidedNodes, areConnectionMapsEqual, boxToRect, calcAutoPan, calcNextPosition, clamp, clampPosition, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdgesBase, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHostForElement, getIncomersBase, getMarkerId, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoersBase, getOverlappingArea, getPointerPosition, getPositionWithOrigin, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, infiniteExtent, internalsSymbol, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeToBox, nodeToRect, panBy, pointToRendererPoint, rectToBox, rendererPointToPoint, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateEdgeBase, updateNodeDimensions };
+var ResizeControlVariant;
+(function (ResizeControlVariant) {
+    ResizeControlVariant["Line"] = "line";
+    ResizeControlVariant["Handle"] = "handle";
+})(ResizeControlVariant || (ResizeControlVariant = {}));
+const XY_RESIZER_HANDLE_POSITIONS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+const XY_RESIZER_LINE_POSITIONS = ['top', 'right', 'bottom', 'left'];
+
+/**
+ * Get all connecting edges for a given set of nodes
+ * @param width - new width of the node
+ * @param prevWidth - previous width of the node
+ * @param height - new height of the node
+ * @param prevHeight - previous height of the node
+ * @param affectsX - whether to invert the resize direction for the x axis
+ * @param affectsY - whether to invert the resize direction for the y axis
+ * @returns array of two numbers representing the direction of the resize for each axis, 0 = no change, 1 = increase, -1 = decrease
+ */
+function getResizeDirection({ width, prevWidth, height, prevHeight, affectsX, affectsY, }) {
+    const deltaWidth = width - prevWidth;
+    const deltaHeight = height - prevHeight;
+    const direction = [deltaWidth > 0 ? 1 : deltaWidth < 0 ? -1 : 0, deltaHeight > 0 ? 1 : deltaHeight < 0 ? -1 : 0];
+    if (deltaWidth && affectsX) {
+        direction[0] = direction[0] * -1;
+    }
+    if (deltaHeight && affectsY) {
+        direction[1] = direction[1] * -1;
+    }
+    return direction;
+}
+/**
+ * Parses the control position that is being dragged to dimensions that are being resized
+ * @param controlPosition - position of the control that is being dragged
+ * @returns isHorizontal, isVertical, affectsX, affectsY,
+ */
+function getControlDirection(controlPosition) {
+    const isHorizontal = controlPosition.includes('right') || controlPosition.includes('left');
+    const isVertical = controlPosition.includes('bottom') || controlPosition.includes('top');
+    const affectsX = controlPosition.includes('left');
+    const affectsY = controlPosition.includes('top');
+    return {
+        isHorizontal,
+        isVertical,
+        affectsX,
+        affectsY,
+    };
+}
+/**
+ * Calculates new width & height of node after resize based on pointer position
+ * @param startValues - starting values of resize
+ * @param controlDirection - dimensions affected by the resize
+ * @param pointerPosition - the current pointer position corrected for snapping
+ * @param boundaries - minimum and maximum dimensions of the node
+ * @param keepAspectRatio - prevent changes of asprect ratio
+ * @returns width: new width of node, height: new height of node
+ */
+function getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio) {
+    const { isHorizontal, isVertical, affectsX, affectsY } = controlDirection;
+    const { xSnapped, ySnapped } = pointerPosition;
+    const { minWidth, maxWidth, minHeight, maxHeight } = boundaries;
+    const { pointerX: startX, pointerY: startY, width: startWidth, height: startHeight, aspectRatio } = startValues;
+    const distX = Math.floor(isHorizontal ? xSnapped - startX : 0);
+    const distY = Math.floor(isVertical ? ySnapped - startY : 0);
+    let width = clamp(startWidth + (affectsX ? -distX : distX), minWidth, maxWidth);
+    let height = clamp(startHeight + (affectsY ? -distY : distY), minHeight, maxHeight);
+    if (keepAspectRatio) {
+        const nextAspectRatio = width / height;
+        const isDiagonal = isHorizontal && isVertical;
+        const isOnlyHorizontal = isHorizontal && !isVertical;
+        const isOnlyVertical = isVertical && !isHorizontal;
+        width = (nextAspectRatio <= aspectRatio && isDiagonal) || isOnlyVertical ? height * aspectRatio : width;
+        height = (nextAspectRatio > aspectRatio && isDiagonal) || isOnlyHorizontal ? width / aspectRatio : height;
+        if (width >= maxWidth) {
+            width = maxWidth;
+            height = maxWidth / aspectRatio;
+        }
+        else if (width <= minWidth) {
+            width = minWidth;
+            height = minWidth / aspectRatio;
+        }
+        if (height >= maxHeight) {
+            height = maxHeight;
+            width = maxHeight * aspectRatio;
+        }
+        else if (height <= minHeight) {
+            height = minHeight;
+            width = minHeight * aspectRatio;
+        }
+    }
+    return {
+        width,
+        height,
+    };
+}
+/**
+ * Determines new x & y position of node after resize based on new width & height
+ * @param startValues - starting values of resize
+ * @param controlDirection - dimensions affected by the resize
+ * @param width - new width of node
+ * @param height - new height of node
+ * @returns x: new x position of node, y: new y position of node
+ */
+function getPositionAfterResize(startValues, controlDirection, width, height) {
+    return {
+        x: controlDirection.affectsX ? startValues.x - (width - startValues.width) : startValues.x,
+        y: controlDirection.affectsY ? startValues.y - (height - startValues.height) : startValues.y,
+    };
+}
+
+const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
+const initStartValues = {
+    ...initPrevValues,
+    pointerX: 0,
+    pointerY: 0,
+    aspectRatio: 1,
+};
+const initChange = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    isXPosChange: false,
+    isYPosChange: false,
+    isWidthChange: false,
+    isHeightChange: false,
+};
+function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
+    const selection = select(domNode);
+    function update({ controlPosition, boundaries, keepAspectRatio, onResizeStart, onResize, onResizeEnd, shouldResize, }) {
+        let prevValues = { ...initPrevValues };
+        let startValues = { ...initStartValues };
+        const controlDirection = getControlDirection(controlPosition);
+        const dragHandler = drag()
+            .on('start', (event) => {
+            const { nodeLookup, transform, snapGrid, snapToGrid } = getStoreItems();
+            const node = nodeLookup.get(nodeId);
+            const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+            prevValues = {
+                width: node?.computed?.width ?? 0,
+                height: node?.computed?.height ?? 0,
+                x: node?.position.x ?? 0,
+                y: node?.position.y ?? 0,
+            };
+            startValues = {
+                ...prevValues,
+                pointerX: xSnapped,
+                pointerY: ySnapped,
+                aspectRatio: prevValues.width / prevValues.height,
+            };
+            onResizeStart?.(event, { ...prevValues });
+        })
+            .on('drag', (event) => {
+            const { nodeLookup, transform, snapGrid, snapToGrid } = getStoreItems();
+            const pointerPosition = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+            const node = nodeLookup.get(nodeId);
+            if (node) {
+                const change = { ...initChange };
+                const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
+                const { width, height } = getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio);
+                const isWidthChange = width !== prevWidth;
+                const isHeightChange = height !== prevHeight;
+                if (controlDirection.affectsX || controlDirection.affectsY) {
+                    const { x, y } = getPositionAfterResize(startValues, controlDirection, width, height);
+                    // only transform the node if the width or height changes
+                    const isXPosChange = x !== prevX && isWidthChange;
+                    const isYPosChange = y !== prevY && isHeightChange;
+                    if (isXPosChange || isYPosChange) {
+                        change.isXPosChange = isXPosChange;
+                        change.isYPosChange = isYPosChange;
+                        change.x = isXPosChange ? x : prevX;
+                        change.y = isYPosChange ? y : prevY;
+                        prevValues.x = change.x;
+                        prevValues.y = change.y;
+                    }
+                }
+                if (isWidthChange || isHeightChange) {
+                    change.isWidthChange = isWidthChange;
+                    change.isHeightChange = isHeightChange;
+                    change.width = width;
+                    change.height = height;
+                    prevValues.width = width;
+                    prevValues.height = height;
+                }
+                if (!change.isXPosChange && !change.isYPosChange && !isWidthChange && !isHeightChange) {
+                    return;
+                }
+                const direction = getResizeDirection({
+                    width: prevValues.width,
+                    prevWidth,
+                    height: prevValues.height,
+                    prevHeight,
+                    affectsX: controlDirection.affectsX,
+                    affectsY: controlDirection.affectsY,
+                });
+                const nextValues = { ...prevValues, direction };
+                const callResize = shouldResize?.(event, nextValues);
+                if (callResize === false) {
+                    return;
+                }
+                onResize?.(event, nextValues);
+                onChange(change);
+            }
+        })
+            .on('end', (event) => {
+            onResizeEnd?.(event, { ...prevValues });
+        });
+        selection.call(dragHandler);
+    }
+    function destroy() {
+        selection.on('.drag', null);
+    }
+    return {
+        update,
+        destroy,
+    };
+}
+
+export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdgeBase, adoptUserProvidedNodes, areConnectionMapsEqual, boxToRect, calcAutoPan, calcNextPosition, clamp, clampPosition, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdgesBase, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHostForElement, getIncomersBase, getMarkerId, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoersBase, getOverlappingArea, getPointerPosition, getPositionWithOrigin, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, infiniteExtent, internalsSymbol, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeToBox, nodeToRect, panBy, pointToRendererPoint, rectToBox, rendererPointToPoint, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateEdgeBase, updateNodeDimensions };

package/dist/esm/types/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/types/utils.ts"],"names":[],"mappings":"AAEA,oBAAY,QAAQ;IAClB,IAAI,SAAS;IACb,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAErD,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC;AAE3C,MAAM,MAAM,GAAG,GAAG,UAAU,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAEjD,MAAM,MAAM,gBAAgB,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/types/utils.ts"],"names":[],"mappings":"AAAA,oBAAY,QAAQ;IAClB,IAAI,SAAS;IACb,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAErD,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC;AAE3C,MAAM,MAAM,GAAG,GAAG,UAAU,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAEjD,MAAM,MAAM,gBAAgB,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC"}

package/dist/esm/xyresizer/XYResizer.d.ts

@@ -0,0 +1,46 @@
+import type { NodeLookup, Transform } from '../types';
+import type { OnResize, OnResizeEnd, OnResizeStart, ShouldResize, ControlPosition } from './types';
+declare const initChange: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    isXPosChange: boolean;
+    isYPosChange: boolean;
+    isWidthChange: boolean;
+    isHeightChange: boolean;
+};
+export type XYResizerChange = typeof initChange;
+type XYResizerParams = {
+    domNode: HTMLDivElement;
+    nodeId: string;
+    getStoreItems: () => {
+        nodeLookup: NodeLookup;
+        transform: Transform;
+        snapGrid?: [number, number];
+        snapToGrid: boolean;
+    };
+    onChange: (changes: XYResizerChange) => void;
+    onEnd?: () => void;
+};
+type XYResizerUpdateParams = {
+    controlPosition: ControlPosition;
+    boundaries: {
+        minWidth: number;
+        minHeight: number;
+        maxWidth: number;
+        maxHeight: number;
+    };
+    keepAspectRatio: boolean;
+    onResizeStart: OnResizeStart | undefined;
+    onResize: OnResize | undefined;
+    onResizeEnd: OnResizeEnd | undefined;
+    shouldResize: ShouldResize | undefined;
+};
+export type XYResizerInstance = {
+    update: (params: XYResizerUpdateParams) => void;
+    destroy: () => void;
+};
+export declare function XYResizer({ domNode, nodeId, getStoreItems, onChange }: XYResizerParams): XYResizerInstance;
+export {};
+//# sourceMappingURL=XYResizer.d.ts.map

package/dist/esm/xyresizer/XYResizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XYResizer.d.ts","sourceRoot":"","sources":["../../src/xyresizer/XYResizer.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAmB,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAWpH,QAAA,MAAM,UAAU;;;;;;;;;CASf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,OAAO,UAAU,CAAC;AAEhD,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,cAAc,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM;QACnB,UAAU,EAAE,UAAU,CAAC;QACvB,SAAS,EAAE,SAAS,CAAC;QACrB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC5B,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;IACF,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,eAAe,EAAE,eAAe,CAAC;IACjC,UAAU,EAAE;QACV,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,aAAa,GAAG,SAAS,CAAC;IACzC,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,WAAW,EAAE,WAAW,GAAG,SAAS,CAAC;IACrC,YAAY,EAAE,YAAY,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,eAAe,GAAG,iBAAiB,CA6H1G"}

package/dist/esm/xyresizer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './XYResizer';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/xyresizer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/xyresizer/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}

package/dist/esm/xyresizer/types.d.ts

@@ -0,0 +1,26 @@
+import type { D3DragEvent, SubjectPosition } from 'd3-drag';
+export type XYResizerParams = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type XYResizerParamsWithDirection = XYResizerParams & {
+    direction: number[];
+};
+export type ControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
+export type ControlPosition = ControlLinePosition | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export declare enum ResizeControlVariant {
+    Line = "line",
+    Handle = "handle"
+}
+export declare const XY_RESIZER_HANDLE_POSITIONS: ControlPosition[];
+export declare const XY_RESIZER_LINE_POSITIONS: ControlLinePosition[];
+type OnResizeHandler<Params = XYResizerParams, Result = void> = (event: ResizeDragEvent, params: Params) => Result;
+export type ResizeDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
+export type ShouldResize = OnResizeHandler<XYResizerParamsWithDirection, boolean>;
+export type OnResizeStart = OnResizeHandler;
+export type OnResize = OnResizeHandler<XYResizerParamsWithDirection>;
+export type OnResizeEnd = OnResizeHandler;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/xyresizer/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/xyresizer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG;IAC5B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG,eAAe,GAAG;IAC3D,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;AAE9G,oBAAY,oBAAoB;IAC9B,IAAI,SAAS;IACb,MAAM,WAAW;CAClB;AAED,eAAO,MAAM,2BAA2B,EAAE,eAAe,EAA6D,CAAC;AACvH,eAAO,MAAM,yBAAyB,EAAE,mBAAmB,EAAuC,CAAC;AAEnG,KAAK,eAAe,CAAC,MAAM,GAAG,eAAe,EAAE,MAAM,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;AACnH,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,cAAc,EAAE,IAAI,EAAE,eAAe,CAAC,CAAC;AAEjF,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAClF,MAAM,MAAM,aAAa,GAAG,eAAe,CAAC;AAC5C,MAAM,MAAM,QAAQ,GAAG,eAAe,CAAC,4BAA4B,CAAC,CAAC;AACrE,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC"}

package/dist/esm/xyresizer/utils.d.ts

@@ -0,0 +1,75 @@
+import { getPointerPosition } from '../utils';
+import { ControlPosition } from './types';
+type GetResizeDirectionParams = {
+    width: number;
+    prevWidth: number;
+    height: number;
+    prevHeight: number;
+    affectsX: boolean;
+    affectsY: boolean;
+};
+/**
+ * Get all connecting edges for a given set of nodes
+ * @param width - new width of the node
+ * @param prevWidth - previous width of the node
+ * @param height - new height of the node
+ * @param prevHeight - previous height of the node
+ * @param affectsX - whether to invert the resize direction for the x axis
+ * @param affectsY - whether to invert the resize direction for the y axis
+ * @returns array of two numbers representing the direction of the resize for each axis, 0 = no change, 1 = increase, -1 = decrease
+ */
+export declare function getResizeDirection({ width, prevWidth, height, prevHeight, affectsX, affectsY, }: GetResizeDirectionParams): number[];
+/**
+ * Parses the control position that is being dragged to dimensions that are being resized
+ * @param controlPosition - position of the control that is being dragged
+ * @returns isHorizontal, isVertical, affectsX, affectsY,
+ */
+export declare function getControlDirection(controlPosition: ControlPosition): {
+    isHorizontal: boolean;
+    isVertical: boolean;
+    affectsX: boolean;
+    affectsY: boolean;
+};
+type PrevValues = {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+};
+type StartValues = PrevValues & {
+    pointerX: number;
+    pointerY: number;
+    aspectRatio: number;
+};
+/**
+ * Calculates new width & height of node after resize based on pointer position
+ * @param startValues - starting values of resize
+ * @param controlDirection - dimensions affected by the resize
+ * @param pointerPosition - the current pointer position corrected for snapping
+ * @param boundaries - minimum and maximum dimensions of the node
+ * @param keepAspectRatio - prevent changes of asprect ratio
+ * @returns width: new width of node, height: new height of node
+ */
+export declare function getDimensionsAfterResize(startValues: StartValues, controlDirection: ReturnType<typeof getControlDirection>, pointerPosition: ReturnType<typeof getPointerPosition>, boundaries: {
+    minWidth: number;
+    maxWidth: number;
+    minHeight: number;
+    maxHeight: number;
+}, keepAspectRatio: boolean): {
+    width: number;
+    height: number;
+};
+/**
+ * Determines new x & y position of node after resize based on new width & height
+ * @param startValues - starting values of resize
+ * @param controlDirection - dimensions affected by the resize
+ * @param width - new width of node
+ * @param height - new height of node
+ * @returns x: new x position of node, y: new y position of node
+ */
+export declare function getPositionAfterResize(startValues: StartValues, controlDirection: ReturnType<typeof getControlDirection>, width: number, height: number): {
+    x: number;
+    y: number;
+};
+export {};
+//# sourceMappingURL=utils.d.ts.map

package/dist/esm/xyresizer/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/xyresizer/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,kBAAkB,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,KAAK,wBAAwB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,SAAS,EACT,MAAM,EACN,UAAU,EACV,QAAQ,EACR,QAAQ,GACT,EAAE,wBAAwB,YAc1B;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,eAAe,EAAE,eAAe;;;;;EAYnE;AAED,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,KAAK,WAAW,GAAG,UAAU,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CACtC,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,EACxD,eAAe,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,EACtD,UAAU,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,EACxF,eAAe,EAAE,OAAO;;;EA2CzB;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CACpC,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,EACxD,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM;;;EAMf"}

package/dist/umd/index.d.ts

@@ -5,4 +5,5 @@ export * from './xydrag';
 export * from './xyhandle';
 export * from './xyminimap';
 export * from './xypanzoom';
+export * from './xyresizer';
 //# sourceMappingURL=index.d.ts.map

package/dist/umd/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}