@xyflow/react 12.0.0-next.4 → 12.0.0-next.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/additional-components/NodeResizer/NodeResizeControl.d.ts +7 -0
- package/dist/esm/additional-components/NodeResizer/NodeResizeControl.d.ts.map +1 -0
- package/dist/esm/additional-components/NodeResizer/NodeResizer.d.ts +2 -2
- package/dist/esm/additional-components/NodeResizer/NodeResizer.d.ts.map +1 -1
- package/dist/esm/additional-components/NodeResizer/ResizeControl.d.ts.map +1 -1
- package/dist/esm/additional-components/NodeResizer/index.d.ts +2 -2
- package/dist/esm/additional-components/NodeResizer/index.d.ts.map +1 -1
- package/dist/esm/additional-components/NodeResizer/types.d.ts +1 -23
- package/dist/esm/additional-components/NodeResizer/types.d.ts.map +1 -1
- package/dist/esm/container/ReactFlow/index.d.ts +1 -1
- package/dist/esm/index.d.ts +1 -1
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +105 -191
- package/dist/esm/index.mjs +105 -191
- package/dist/esm/types/changes.d.ts +0 -1
- package/dist/esm/types/changes.d.ts.map +1 -1
- package/dist/esm/types/component-props.d.ts +1 -1
- package/dist/esm/utils/changes.d.ts +2 -2
- package/dist/esm/utils/changes.d.ts.map +1 -1
- package/dist/style.css +3 -2
- package/dist/umd/additional-components/NodeResizer/NodeResizeControl.d.ts +7 -0
- package/dist/umd/additional-components/NodeResizer/NodeResizeControl.d.ts.map +1 -0
- package/dist/umd/additional-components/NodeResizer/NodeResizer.d.ts +2 -2
- package/dist/umd/additional-components/NodeResizer/NodeResizer.d.ts.map +1 -1
- package/dist/umd/additional-components/NodeResizer/ResizeControl.d.ts.map +1 -1
- package/dist/umd/additional-components/NodeResizer/index.d.ts +2 -2
- package/dist/umd/additional-components/NodeResizer/index.d.ts.map +1 -1
- package/dist/umd/additional-components/NodeResizer/types.d.ts +1 -23
- package/dist/umd/additional-components/NodeResizer/types.d.ts.map +1 -1
- package/dist/umd/container/ReactFlow/index.d.ts +1 -1
- package/dist/umd/index.d.ts +1 -1
- package/dist/umd/index.d.ts.map +1 -1
- package/dist/umd/index.js +2 -2
- package/dist/umd/types/changes.d.ts +0 -1
- package/dist/umd/types/changes.d.ts.map +1 -1
- package/dist/umd/types/component-props.d.ts +1 -1
- package/dist/umd/utils/changes.d.ts +2 -2
- package/dist/umd/utils/changes.d.ts.map +1 -1
- package/package.json +2 -9
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { ResizeControlProps, ResizeControlLineProps } from './types';
|
|
3
|
+
declare function ResizeControl({ nodeId, position, variant, className, style, children, color, minWidth, minHeight, maxWidth, maxHeight, keepAspectRatio, shouldResize, onResizeStart, onResize, onResizeEnd, }: ResizeControlProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export declare function ResizeControlLine(props: ResizeControlLineProps): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export declare const NodeResizeControl: import("react").MemoExoticComponent<typeof ResizeControl>;
|
|
6
|
+
export {};
|
|
7
|
+
//# sourceMappingURL=NodeResizeControl.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NodeResizeControl.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/additional-components/NodeResizer/NodeResizeControl.tsx"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAE1E,iBAAS,aAAa,CAAC,EACrB,MAAM,EACN,QAAQ,EACR,OAAqC,EACrC,SAAS,EACT,KAAU,EACV,QAAQ,EACR,KAAK,EACL,QAAa,EACb,SAAc,EACd,QAA2B,EAC3B,SAA4B,EAC5B,eAAuB,EACvB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,GACZ,EAAE,kBAAkB,2CAoHpB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAE9D;AAED,eAAO,MAAM,iBAAiB,2DAAsB,CAAC"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { NodeResizerProps } from './types';
|
|
2
|
-
export
|
|
1
|
+
import type { NodeResizerProps } from './types';
|
|
2
|
+
export declare function NodeResizer({ nodeId, isVisible, handleClassName, handleStyle, lineClassName, lineStyle, color, minWidth, minHeight, maxWidth, maxHeight, keepAspectRatio, shouldResize, onResizeStart, onResize, onResizeEnd, }: NodeResizerProps): import("react/jsx-runtime").JSX.Element | null;
|
|
3
3
|
//# sourceMappingURL=NodeResizer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NodeResizer.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/additional-components/NodeResizer/NodeResizer.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NodeResizer.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/additional-components/NodeResizer/NodeResizer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,SAAgB,EAChB,eAAe,EACf,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,QAAa,EACb,SAAc,EACd,QAA2B,EAC3B,SAA4B,EAC5B,eAAuB,EACvB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,GACZ,EAAE,gBAAgB,kDAgDlB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResizeControl.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/additional-components/NodeResizer/ResizeControl.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"ResizeControl.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/additional-components/NodeResizer/ResizeControl.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAE/E,iBAAS,aAAa,CAAC,EACrB,MAAM,EACN,QAAQ,EACR,OAAsC,EACtC,SAAS,EACT,KAAU,EACV,QAAQ,EACR,KAAK,EACL,QAAa,EACb,SAAc,EACd,QAA2B,EAC3B,SAA4B,EAC5B,eAAuB,EACvB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,GACZ,EAAE,kBAAkB,2CAqHpB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAE9D;;AAED,wBAAmC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export {
|
|
1
|
+
export { NodeResizer } from './NodeResizer';
|
|
2
|
+
export { NodeResizeControl } from './NodeResizeControl';
|
|
3
3
|
export * from './types';
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/additional-components/NodeResizer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/additional-components/NodeResizer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,cAAc,SAAS,CAAC"}
|
|
@@ -1,19 +1,5 @@
|
|
|
1
1
|
import type { CSSProperties, ReactNode } from 'react';
|
|
2
|
-
import type {
|
|
3
|
-
export type ResizeParams = {
|
|
4
|
-
x: number;
|
|
5
|
-
y: number;
|
|
6
|
-
width: number;
|
|
7
|
-
height: number;
|
|
8
|
-
};
|
|
9
|
-
export type ResizeParamsWithDirection = ResizeParams & {
|
|
10
|
-
direction: number[];
|
|
11
|
-
};
|
|
12
|
-
type OnResizeHandler<Params = ResizeParams, Result = void> = (event: ResizeDragEvent, params: Params) => Result;
|
|
13
|
-
export type ShouldResize = OnResizeHandler<ResizeParamsWithDirection, boolean>;
|
|
14
|
-
export type OnResizeStart = OnResizeHandler;
|
|
15
|
-
export type OnResize = OnResizeHandler<ResizeParamsWithDirection>;
|
|
16
|
-
export type OnResizeEnd = OnResizeHandler;
|
|
2
|
+
import type { ControlPosition, ControlLinePosition, ResizeControlVariant, ShouldResize, OnResizeStart, OnResize, OnResizeEnd } from '@xyflow/system';
|
|
17
3
|
export type NodeResizerProps = {
|
|
18
4
|
nodeId?: string;
|
|
19
5
|
color?: string;
|
|
@@ -32,12 +18,6 @@ export type NodeResizerProps = {
|
|
|
32
18
|
onResize?: OnResize;
|
|
33
19
|
onResizeEnd?: OnResizeEnd;
|
|
34
20
|
};
|
|
35
|
-
export type ControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
|
|
36
|
-
export type ControlPosition = ControlLinePosition | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
37
|
-
export declare enum ResizeControlVariant {
|
|
38
|
-
Line = "line",
|
|
39
|
-
Handle = "handle"
|
|
40
|
-
}
|
|
41
21
|
export type ResizeControlProps = Pick<NodeResizerProps, 'nodeId' | 'color' | 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight' | 'keepAspectRatio' | 'shouldResize' | 'onResizeStart' | 'onResize' | 'onResizeEnd'> & {
|
|
42
22
|
position?: ControlPosition;
|
|
43
23
|
variant?: ResizeControlVariant;
|
|
@@ -48,6 +28,4 @@ export type ResizeControlProps = Pick<NodeResizerProps, 'nodeId' | 'color' | 'mi
|
|
|
48
28
|
export type ResizeControlLineProps = ResizeControlProps & {
|
|
49
29
|
position?: ControlLinePosition;
|
|
50
30
|
};
|
|
51
|
-
export type ResizeDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
|
|
52
|
-
export {};
|
|
53
31
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/additional-components/NodeResizer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/additional-components/NodeResizer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,EACZ,MAAM,gBAAgB,CAAC;AAExB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,gBAAgB,EACd,QAAQ,GACR,OAAO,GACP,UAAU,GACV,WAAW,GACX,UAAU,GACV,WAAW,GACX,iBAAiB,GACjB,cAAc,GACd,eAAe,GACf,UAAU,GACV,aAAa,CAChB,GAAG;IACF,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,kBAAkB,GAAG;IACxD,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC,CAAC"}
|
|
@@ -16,7 +16,7 @@ declare const ReactFlow: import("react").ForwardRefExoticComponent<Omit<import("
|
|
|
16
16
|
onNodeDragStart?: import("../../types").NodeDragHandler | undefined;
|
|
17
17
|
onNodeDrag?: import("../../types").NodeDragHandler | undefined;
|
|
18
18
|
onNodeDragStop?: import("../../types").NodeDragHandler | undefined;
|
|
19
|
-
onEdgeClick?: ((event: import("react").MouseEvent<Element, MouseEvent>,
|
|
19
|
+
onEdgeClick?: ((event: import("react").MouseEvent<Element, MouseEvent>, edge: import("../../types").Edge<any>) => void) | undefined;
|
|
20
20
|
onEdgeUpdate?: import("../../types").OnEdgeUpdateFunc<any> | undefined;
|
|
21
21
|
onEdgeContextMenu?: import("../../types").EdgeMouseHandler | undefined;
|
|
22
22
|
onEdgeMouseEnter?: import("../../types").EdgeMouseHandler | undefined;
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -30,6 +30,6 @@ export { applyNodeChanges, applyEdgeChanges, handleParentExpand } from './utils/
|
|
|
30
30
|
export { isNode, isEdge, getIncomers, getOutgoers, addEdge, updateEdge, getConnectedEdges } from './utils/general';
|
|
31
31
|
export * from './additional-components';
|
|
32
32
|
export * from './types';
|
|
33
|
-
export { type SmoothStepPathOptions, type BezierPathOptions, ConnectionLineType, type EdgeMarker, type EdgeMarkerType, MarkerType, type OnMove, type OnMoveStart, type OnMoveEnd, type Connection, type ConnectionStatus, ConnectionMode, type OnConnectStartParams, type OnConnectStart, type OnConnect, type OnConnectEnd, type IsValidConnection, type Viewport, type SnapGrid, PanOnScrollMode, type ViewportHelperFunctionOptions, type SetCenterOptions, type FitBoundsOptions, type PanelPosition, type ProOptions, SelectionMode, type SelectionRect, type OnError, type NodeProps, type NodeOrigin, type OnNodeDrag, type OnSelectionDrag, Position, type XYPosition, type XYZPosition, type Dimensions, type Rect, type Box, type Transform, type CoordinateExtent, type ColorMode, type ColorModeClass, type HandleType, type OnBeforeDelete, } from '@xyflow/system';
|
|
33
|
+
export { type SmoothStepPathOptions, type BezierPathOptions, ConnectionLineType, type EdgeMarker, type EdgeMarkerType, MarkerType, type OnMove, type OnMoveStart, type OnMoveEnd, type Connection, type ConnectionStatus, ConnectionMode, type OnConnectStartParams, type OnConnectStart, type OnConnect, type OnConnectEnd, type IsValidConnection, type Viewport, type SnapGrid, PanOnScrollMode, type ViewportHelperFunctionOptions, type SetCenterOptions, type FitBoundsOptions, type PanelPosition, type ProOptions, SelectionMode, type SelectionRect, type OnError, type NodeProps, type NodeOrigin, type OnNodeDrag, type OnSelectionDrag, Position, type XYPosition, type XYZPosition, type Dimensions, type Rect, type Box, type Transform, type CoordinateExtent, type ColorMode, type ColorModeClass, type HandleType, type OnBeforeDelete, type ShouldResize, type OnResizeStart, type OnResize, type OnResizeEnd, type ControlPosition, type ControlLinePosition, type ResizeControlVariant, } from '@xyflow/system';
|
|
34
34
|
export { type GetBezierPathParams, getBezierEdgeCenter, getBezierPath, getEdgeCenter, type GetSmoothStepPathParams, getSmoothStepPath, type GetStraightPathParams, getStraightPath, getViewportForBounds, getNodesBounds, internalsSymbol, } from '@xyflow/system';
|
|
35
35
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/react/src/index.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/react/src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/esm/index.js
CHANGED
|
@@ -2,13 +2,11 @@
|
|
|
2
2
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { createContext, useContext, useMemo, useEffect, useRef, useState, useCallback, forwardRef, memo } from 'react';
|
|
4
4
|
import cc from 'classcat';
|
|
5
|
-
import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getOutgoersBase, getIncomersBase, addEdgeBase, updateEdgeBase, getConnectedEdgesBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calcNextPosition, Position, isMouseEvent, XYHandle, getHostForElement, getNodesBounds, clampPosition, internalsSymbol, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, isNumeric, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionMode, ConnectionLineType, updateConnectionLookup, adoptUserProvidedNodes, updateNodeDimensions, updateAbsolutePositions, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects,
|
|
5
|
+
import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getOutgoersBase, getIncomersBase, addEdgeBase, updateEdgeBase, getConnectedEdgesBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calcNextPosition, Position, isMouseEvent, XYHandle, getHostForElement, getNodesBounds, clampPosition, internalsSymbol, getPositionWithOrigin, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, isNumeric, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, ConnectionMode, ConnectionLineType, updateConnectionLookup, adoptUserProvidedNodes, updateNodeDimensions, updateAbsolutePositions, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, getNodePositionWithOrigin, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
|
|
6
6
|
export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, getBezierEdgeCenter, getBezierPath, getEdgeCenter, getNodesBounds, getSmoothStepPath, getStraightPath, getViewportForBounds, internalsSymbol } from '@xyflow/system';
|
|
7
7
|
import { useStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';
|
|
8
8
|
import { shallow } from 'zustand/shallow';
|
|
9
9
|
import { createPortal } from 'react-dom';
|
|
10
|
-
import { drag } from 'd3-drag';
|
|
11
|
-
import { select } from 'd3-selection';
|
|
12
10
|
|
|
13
11
|
const StoreContext = createContext(null);
|
|
14
12
|
const Provider$1 = StoreContext.Provider;
|
|
@@ -456,38 +454,41 @@ const useViewportHelper = () => {
|
|
|
456
454
|
return viewportHelperFunctions;
|
|
457
455
|
};
|
|
458
456
|
|
|
459
|
-
function handleParentExpand(
|
|
460
|
-
const
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
parent.computed
|
|
464
|
-
|
|
465
|
-
const extendWidth = updateItem.position.x + updateItem.computed.width - parent.computed.width;
|
|
466
|
-
const extendHeight = updateItem.position.y + updateItem.computed.height - parent.computed.height;
|
|
467
|
-
if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
|
|
468
|
-
parent.style = { ...parent.style } || {};
|
|
469
|
-
parent.style.width = parent.style.width ?? parent.computed.width;
|
|
470
|
-
parent.style.height = parent.style.height ?? parent.computed.height;
|
|
471
|
-
if (extendWidth > 0) {
|
|
472
|
-
parent.style.width += extendWidth;
|
|
457
|
+
function handleParentExpand(updatedElements, updateItem) {
|
|
458
|
+
for (const [index, item] of updatedElements.entries()) {
|
|
459
|
+
if (item.id === updateItem.parentNode) {
|
|
460
|
+
const parent = { ...item };
|
|
461
|
+
if (!parent.computed) {
|
|
462
|
+
parent.computed = {};
|
|
473
463
|
}
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
464
|
+
const extendWidth = updateItem.position.x + updateItem.computed.width - parent.computed.width;
|
|
465
|
+
const extendHeight = updateItem.position.y + updateItem.computed.height - parent.computed.height;
|
|
466
|
+
if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
|
|
467
|
+
parent.width = parent.width ?? parent.computed.width;
|
|
468
|
+
parent.height = parent.height ?? parent.computed.height;
|
|
469
|
+
if (extendWidth > 0) {
|
|
470
|
+
parent.width += extendWidth;
|
|
471
|
+
}
|
|
472
|
+
if (extendHeight > 0) {
|
|
473
|
+
parent.height += extendHeight;
|
|
474
|
+
}
|
|
475
|
+
if (updateItem.position.x < 0) {
|
|
476
|
+
const xDiff = Math.abs(updateItem.position.x);
|
|
477
|
+
parent.position.x = parent.position.x - xDiff;
|
|
478
|
+
parent.width += xDiff;
|
|
479
|
+
updateItem.position.x = 0;
|
|
480
|
+
}
|
|
481
|
+
if (updateItem.position.y < 0) {
|
|
482
|
+
const yDiff = Math.abs(updateItem.position.y);
|
|
483
|
+
parent.position.y = parent.position.y - yDiff;
|
|
484
|
+
parent.height += yDiff;
|
|
485
|
+
updateItem.position.y = 0;
|
|
486
|
+
}
|
|
487
|
+
parent.computed.width = parent.width;
|
|
488
|
+
parent.computed.height = parent.height;
|
|
489
|
+
updatedElements[index] = parent;
|
|
488
490
|
}
|
|
489
|
-
|
|
490
|
-
parent.computed.height = parent.style.height;
|
|
491
|
+
break;
|
|
491
492
|
}
|
|
492
493
|
}
|
|
493
494
|
}
|
|
@@ -526,6 +527,7 @@ function applyChanges(changes, elements) {
|
|
|
526
527
|
continue;
|
|
527
528
|
}
|
|
528
529
|
const updateItem = { ...item };
|
|
530
|
+
let isDeletion = false;
|
|
529
531
|
for (const currentChange of nextChanges) {
|
|
530
532
|
if (currentChange) {
|
|
531
533
|
switch (currentChange.type) {
|
|
@@ -558,9 +560,11 @@ function applyChanges(changes, elements) {
|
|
|
558
560
|
}
|
|
559
561
|
updateItem.computed.width = currentChange.dimensions.width;
|
|
560
562
|
updateItem.computed.height = currentChange.dimensions.height;
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
563
|
+
// this is needed for the node resizer to work
|
|
564
|
+
if (currentChange.resizing) {
|
|
565
|
+
updateItem.width = currentChange.dimensions.width;
|
|
566
|
+
updateItem.height = currentChange.dimensions.height;
|
|
567
|
+
}
|
|
564
568
|
}
|
|
565
569
|
if (typeof currentChange.resizing === 'boolean') {
|
|
566
570
|
updateItem.resizing = currentChange.resizing;
|
|
@@ -571,10 +575,13 @@ function applyChanges(changes, elements) {
|
|
|
571
575
|
break;
|
|
572
576
|
}
|
|
573
577
|
case 'remove': {
|
|
578
|
+
isDeletion = true;
|
|
574
579
|
continue;
|
|
575
580
|
}
|
|
576
581
|
}
|
|
577
582
|
}
|
|
583
|
+
}
|
|
584
|
+
if (!isDeletion) {
|
|
578
585
|
updatedElements.push(updateItem);
|
|
579
586
|
}
|
|
580
587
|
}
|
|
@@ -620,7 +627,7 @@ function applyNodeChanges(changes, nodes) {
|
|
|
620
627
|
);
|
|
621
628
|
|
|
622
629
|
return (
|
|
623
|
-
<
|
|
630
|
+
<ReactFlow nodes={nodes} edges={edges} onEdgesChange={onEdgesChange} />
|
|
624
631
|
);
|
|
625
632
|
*/
|
|
626
633
|
function applyEdgeChanges(changes, edges) {
|
|
@@ -1753,9 +1760,9 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
|
|
|
1753
1760
|
transform: `translate(${positionAbsoluteOrigin.x}px,${positionAbsoluteOrigin.y}px)`,
|
|
1754
1761
|
pointerEvents: hasPointerEvents ? 'all' : 'none',
|
|
1755
1762
|
visibility: initialized ? 'visible' : 'hidden',
|
|
1756
|
-
width,
|
|
1757
|
-
height,
|
|
1758
1763
|
...node.style,
|
|
1764
|
+
width: width ?? node.style?.width,
|
|
1765
|
+
height: height ?? node.style?.height,
|
|
1759
1766
|
}, "data-id": id, "data-testid": `rf__node-${id}`, onMouseEnter: onMouseEnterHandler, onMouseMove: onMouseMoveHandler, onMouseLeave: onMouseLeaveHandler, onContextMenu: onContextMenuHandler, onClick: onSelectNodeHandler, onDoubleClick: onDoubleClickHandler, onKeyDown: isFocusable ? onKeyDown : undefined, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : undefined, "aria-describedby": disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`, "aria-label": node.ariaLabel, children: jsx(Provider, { value: id, children: jsx(NodeComponent, { id: id, data: node.data, type: nodeType, width: computedWidth, height: computedHeight, positionAbsoluteX: positionAbsoluteX, positionAbsoluteY: positionAbsoluteY, selected: node.selected, isConnectable: isConnectable, sourcePosition: node.sourcePosition, targetPosition: node.targetPosition, dragging: dragging, dragHandle: node.dragHandle, zIndex: zIndex }) }) }));
|
|
1760
1767
|
}
|
|
1761
1768
|
|
|
@@ -3283,179 +3290,87 @@ nodeComponent, maskColor, maskStrokeColor = 'none', maskStrokeWidth = 1, positio
|
|
|
3283
3290
|
MiniMapComponent.displayName = 'MiniMap';
|
|
3284
3291
|
const MiniMap = memo(MiniMapComponent);
|
|
3285
3292
|
|
|
3286
|
-
var ResizeControlVariant;
|
|
3287
|
-
(function (ResizeControlVariant) {
|
|
3288
|
-
ResizeControlVariant["Line"] = "line";
|
|
3289
|
-
ResizeControlVariant["Handle"] = "handle";
|
|
3290
|
-
})(ResizeControlVariant || (ResizeControlVariant = {}));
|
|
3291
|
-
|
|
3292
|
-
// returns an array of two numbers (0, 1 or -1) representing the direction of the resize
|
|
3293
|
-
// 0 = no change, 1 = increase, -1 = decrease
|
|
3294
|
-
function getDirection({ width, prevWidth, height, prevHeight, invertX, invertY }) {
|
|
3295
|
-
const deltaWidth = width - prevWidth;
|
|
3296
|
-
const deltaHeight = height - prevHeight;
|
|
3297
|
-
const direction = [deltaWidth > 0 ? 1 : deltaWidth < 0 ? -1 : 0, deltaHeight > 0 ? 1 : deltaHeight < 0 ? -1 : 0];
|
|
3298
|
-
if (deltaWidth && invertX) {
|
|
3299
|
-
direction[0] = direction[0] * -1;
|
|
3300
|
-
}
|
|
3301
|
-
if (deltaHeight && invertY) {
|
|
3302
|
-
direction[1] = direction[1] * -1;
|
|
3303
|
-
}
|
|
3304
|
-
return direction;
|
|
3305
|
-
}
|
|
3306
|
-
|
|
3307
|
-
const initPrevValues = { width: 0, height: 0, x: 0, y: 0 };
|
|
3308
|
-
const initStartValues = {
|
|
3309
|
-
...initPrevValues,
|
|
3310
|
-
pointerX: 0,
|
|
3311
|
-
pointerY: 0,
|
|
3312
|
-
aspectRatio: 1,
|
|
3313
|
-
};
|
|
3314
3293
|
function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle, className, style = {}, children, color, minWidth = 10, minHeight = 10, maxWidth = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE, keepAspectRatio = false, shouldResize, onResizeStart, onResize, onResizeEnd, }) {
|
|
3315
3294
|
const contextNodeId = useNodeId();
|
|
3316
3295
|
const id = typeof nodeId === 'string' ? nodeId : contextNodeId;
|
|
3317
3296
|
const store = useStoreApi();
|
|
3318
3297
|
const resizeControlRef = useRef(null);
|
|
3319
|
-
const startValues = useRef(initStartValues);
|
|
3320
|
-
const prevValues = useRef(initPrevValues);
|
|
3321
3298
|
const defaultPosition = variant === ResizeControlVariant.Line ? 'right' : 'bottom-right';
|
|
3322
3299
|
const controlPosition = position ?? defaultPosition;
|
|
3300
|
+
const resizer = useRef(null);
|
|
3323
3301
|
useEffect(() => {
|
|
3324
3302
|
if (!resizeControlRef.current || !id) {
|
|
3325
3303
|
return;
|
|
3326
3304
|
}
|
|
3327
|
-
|
|
3328
|
-
|
|
3329
|
-
|
|
3330
|
-
|
|
3331
|
-
|
|
3332
|
-
|
|
3333
|
-
|
|
3334
|
-
|
|
3335
|
-
|
|
3336
|
-
|
|
3337
|
-
|
|
3338
|
-
|
|
3339
|
-
|
|
3340
|
-
|
|
3341
|
-
|
|
3342
|
-
|
|
3343
|
-
|
|
3344
|
-
...prevValues.current,
|
|
3345
|
-
pointerX: xSnapped,
|
|
3346
|
-
pointerY: ySnapped,
|
|
3347
|
-
aspectRatio: prevValues.current.width / prevValues.current.height,
|
|
3348
|
-
};
|
|
3349
|
-
onResizeStart?.(event, { ...prevValues.current });
|
|
3350
|
-
})
|
|
3351
|
-
.on('drag', (event) => {
|
|
3352
|
-
const { nodeLookup, transform, snapGrid, snapToGrid, triggerNodeChanges } = store.getState();
|
|
3353
|
-
const { xSnapped, ySnapped } = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
|
|
3354
|
-
const node = nodeLookup.get(id);
|
|
3355
|
-
if (node) {
|
|
3356
|
-
const changes = [];
|
|
3357
|
-
const { pointerX: startX, pointerY: startY, width: startWidth, height: startHeight, x: startNodeX, y: startNodeY, aspectRatio, } = startValues.current;
|
|
3358
|
-
const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues.current;
|
|
3359
|
-
const distX = Math.floor(enableX ? xSnapped - startX : 0);
|
|
3360
|
-
const distY = Math.floor(enableY ? ySnapped - startY : 0);
|
|
3361
|
-
let width = clamp(startWidth + (invertX ? -distX : distX), minWidth, maxWidth);
|
|
3362
|
-
let height = clamp(startHeight + (invertY ? -distY : distY), minHeight, maxHeight);
|
|
3363
|
-
if (keepAspectRatio) {
|
|
3364
|
-
const nextAspectRatio = width / height;
|
|
3365
|
-
const isDiagonal = enableX && enableY;
|
|
3366
|
-
const isHorizontal = enableX && !enableY;
|
|
3367
|
-
const isVertical = enableY && !enableX;
|
|
3368
|
-
width = (nextAspectRatio <= aspectRatio && isDiagonal) || isVertical ? height * aspectRatio : width;
|
|
3369
|
-
height = (nextAspectRatio > aspectRatio && isDiagonal) || isHorizontal ? width / aspectRatio : height;
|
|
3370
|
-
if (width >= maxWidth) {
|
|
3371
|
-
width = maxWidth;
|
|
3372
|
-
height = maxWidth / aspectRatio;
|
|
3373
|
-
}
|
|
3374
|
-
else if (width <= minWidth) {
|
|
3375
|
-
width = minWidth;
|
|
3376
|
-
height = minWidth / aspectRatio;
|
|
3377
|
-
}
|
|
3378
|
-
if (height >= maxHeight) {
|
|
3379
|
-
height = maxHeight;
|
|
3380
|
-
width = maxHeight * aspectRatio;
|
|
3381
|
-
}
|
|
3382
|
-
else if (height <= minHeight) {
|
|
3383
|
-
height = minHeight;
|
|
3384
|
-
width = minHeight * aspectRatio;
|
|
3385
|
-
}
|
|
3386
|
-
}
|
|
3387
|
-
const isWidthChange = width !== prevWidth;
|
|
3388
|
-
const isHeightChange = height !== prevHeight;
|
|
3389
|
-
if (invertX || invertY) {
|
|
3390
|
-
const x = invertX ? startNodeX - (width - startWidth) : startNodeX;
|
|
3391
|
-
const y = invertY ? startNodeY - (height - startHeight) : startNodeY;
|
|
3392
|
-
// only transform the node if the width or height changes
|
|
3393
|
-
const isXPosChange = x !== prevX && isWidthChange;
|
|
3394
|
-
const isYPosChange = y !== prevY && isHeightChange;
|
|
3395
|
-
if (isXPosChange || isYPosChange) {
|
|
3305
|
+
if (!resizer.current) {
|
|
3306
|
+
resizer.current = XYResizer({
|
|
3307
|
+
domNode: resizeControlRef.current,
|
|
3308
|
+
nodeId: id,
|
|
3309
|
+
getStoreItems: () => {
|
|
3310
|
+
const { nodeLookup, transform, snapGrid, snapToGrid } = store.getState();
|
|
3311
|
+
return {
|
|
3312
|
+
nodeLookup,
|
|
3313
|
+
transform,
|
|
3314
|
+
snapGrid,
|
|
3315
|
+
snapToGrid,
|
|
3316
|
+
};
|
|
3317
|
+
},
|
|
3318
|
+
onChange: (change) => {
|
|
3319
|
+
const { triggerNodeChanges } = store.getState();
|
|
3320
|
+
const changes = [];
|
|
3321
|
+
if (change.isXPosChange || change.isYPosChange) {
|
|
3396
3322
|
const positionChange = {
|
|
3397
|
-
id
|
|
3323
|
+
id,
|
|
3398
3324
|
type: 'position',
|
|
3399
3325
|
position: {
|
|
3400
|
-
x:
|
|
3401
|
-
y:
|
|
3326
|
+
x: change.x,
|
|
3327
|
+
y: change.y,
|
|
3402
3328
|
},
|
|
3403
3329
|
};
|
|
3404
3330
|
changes.push(positionChange);
|
|
3405
|
-
prevValues.current.x = positionChange.position.x;
|
|
3406
|
-
prevValues.current.y = positionChange.position.y;
|
|
3407
3331
|
}
|
|
3408
|
-
|
|
3409
|
-
|
|
3332
|
+
if (change.isWidthChange || change.isHeightChange) {
|
|
3333
|
+
const dimensionChange = {
|
|
3334
|
+
id,
|
|
3335
|
+
type: 'dimensions',
|
|
3336
|
+
resizing: true,
|
|
3337
|
+
dimensions: {
|
|
3338
|
+
width: change.width,
|
|
3339
|
+
height: change.height,
|
|
3340
|
+
},
|
|
3341
|
+
};
|
|
3342
|
+
changes.push(dimensionChange);
|
|
3343
|
+
}
|
|
3344
|
+
triggerNodeChanges(changes);
|
|
3345
|
+
},
|
|
3346
|
+
onEnd: () => {
|
|
3410
3347
|
const dimensionChange = {
|
|
3411
3348
|
id: id,
|
|
3412
3349
|
type: 'dimensions',
|
|
3413
|
-
|
|
3414
|
-
resizing: true,
|
|
3415
|
-
dimensions: {
|
|
3416
|
-
width: width,
|
|
3417
|
-
height: height,
|
|
3418
|
-
},
|
|
3350
|
+
resizing: false,
|
|
3419
3351
|
};
|
|
3420
|
-
|
|
3421
|
-
|
|
3422
|
-
|
|
3423
|
-
|
|
3424
|
-
|
|
3425
|
-
|
|
3426
|
-
|
|
3427
|
-
|
|
3428
|
-
|
|
3429
|
-
|
|
3430
|
-
|
|
3431
|
-
|
|
3432
|
-
|
|
3433
|
-
|
|
3434
|
-
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
if (callResize === false) {
|
|
3438
|
-
return;
|
|
3439
|
-
}
|
|
3440
|
-
onResize?.(event, nextValues);
|
|
3441
|
-
triggerNodeChanges(changes);
|
|
3442
|
-
}
|
|
3443
|
-
})
|
|
3444
|
-
.on('end', (event) => {
|
|
3445
|
-
const dimensionChange = {
|
|
3446
|
-
id: id,
|
|
3447
|
-
type: 'dimensions',
|
|
3448
|
-
resizing: false,
|
|
3449
|
-
};
|
|
3450
|
-
onResizeEnd?.(event, { ...prevValues.current });
|
|
3451
|
-
store.getState().triggerNodeChanges([dimensionChange]);
|
|
3352
|
+
store.getState().triggerNodeChanges([dimensionChange]);
|
|
3353
|
+
},
|
|
3354
|
+
});
|
|
3355
|
+
}
|
|
3356
|
+
resizer.current.update({
|
|
3357
|
+
controlPosition,
|
|
3358
|
+
boundaries: {
|
|
3359
|
+
minWidth,
|
|
3360
|
+
minHeight,
|
|
3361
|
+
maxWidth,
|
|
3362
|
+
maxHeight,
|
|
3363
|
+
},
|
|
3364
|
+
keepAspectRatio,
|
|
3365
|
+
onResizeStart,
|
|
3366
|
+
onResize,
|
|
3367
|
+
onResizeEnd,
|
|
3368
|
+
shouldResize,
|
|
3452
3369
|
});
|
|
3453
|
-
selection.call(dragHandler);
|
|
3454
3370
|
return () => {
|
|
3455
|
-
|
|
3371
|
+
resizer.current?.destroy();
|
|
3456
3372
|
};
|
|
3457
3373
|
}, [
|
|
3458
|
-
id,
|
|
3459
3374
|
controlPosition,
|
|
3460
3375
|
minWidth,
|
|
3461
3376
|
minHeight,
|
|
@@ -3465,21 +3380,20 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
|
|
|
3465
3380
|
onResizeStart,
|
|
3466
3381
|
onResize,
|
|
3467
3382
|
onResizeEnd,
|
|
3383
|
+
shouldResize,
|
|
3468
3384
|
]);
|
|
3469
3385
|
const positionClassNames = controlPosition.split('-');
|
|
3470
3386
|
const colorStyleProp = variant === ResizeControlVariant.Line ? 'borderColor' : 'backgroundColor';
|
|
3471
3387
|
const controlStyle = color ? { ...style, [colorStyleProp]: color } : style;
|
|
3472
3388
|
return (jsx("div", { className: cc(['react-flow__resize-control', 'nodrag', ...positionClassNames, variant, className]), ref: resizeControlRef, style: controlStyle, children: children }));
|
|
3473
3389
|
}
|
|
3474
|
-
|
|
3390
|
+
const NodeResizeControl = memo(ResizeControl);
|
|
3475
3391
|
|
|
3476
|
-
const handleControls = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
|
|
3477
|
-
const lineControls = ['top', 'right', 'bottom', 'left'];
|
|
3478
3392
|
function NodeResizer({ nodeId, isVisible = true, handleClassName, handleStyle, lineClassName, lineStyle, color, minWidth = 10, minHeight = 10, maxWidth = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE, keepAspectRatio = false, shouldResize, onResizeStart, onResize, onResizeEnd, }) {
|
|
3479
3393
|
if (!isVisible) {
|
|
3480
3394
|
return null;
|
|
3481
3395
|
}
|
|
3482
|
-
return (jsxs(Fragment, { children: [
|
|
3396
|
+
return (jsxs(Fragment, { children: [XY_RESIZER_LINE_POSITIONS.map((position) => (jsx(NodeResizeControl, { className: lineClassName, style: lineStyle, nodeId: nodeId, position: position, variant: ResizeControlVariant.Line, color: color, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, onResizeStart: onResizeStart, keepAspectRatio: keepAspectRatio, shouldResize: shouldResize, onResize: onResize, onResizeEnd: onResizeEnd }, position))), XY_RESIZER_HANDLE_POSITIONS.map((position) => (jsx(NodeResizeControl, { className: handleClassName, style: handleStyle, nodeId: nodeId, position: position, color: color, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, onResizeStart: onResizeStart, keepAspectRatio: keepAspectRatio, shouldResize: shouldResize, onResize: onResize, onResizeEnd: onResizeEnd }, position)))] }));
|
|
3483
3397
|
}
|
|
3484
3398
|
|
|
3485
3399
|
const selector = (state) => state.domNode?.querySelector('.react-flow__renderer');
|
|
@@ -3542,4 +3456,4 @@ function NodeToolbar({ nodeId, children, className, style, isVisible, position =
|
|
|
3542
3456
|
return (jsx(NodeToolbarPortal, { children: jsx("div", { style: wrapperStyle, className: cc(['react-flow__node-toolbar', className]), ...rest, "data-id": nodes.reduce((acc, node) => `${acc}${node.id} `, '').trim(), children: children }) }));
|
|
3543
3457
|
}
|
|
3544
3458
|
|
|
3545
|
-
export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, Handle, MiniMap,
|
|
3459
|
+
export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, Handle, MiniMap, NodeResizeControl, NodeResizer, NodeToolbar, Panel, ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, addEdge, applyEdgeChanges, applyNodeChanges, getConnectedEdges, getIncomers, getOutgoers, getSimpleBezierPath, handleParentExpand, isEdge, isNode, updateEdge, useConnection, useEdges, useEdgesState, useHandleConnections, useKeyPress, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };
|