@xyflow/react 12.0.0-next.26 → 12.0.0-next.28
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/components/StoreUpdater/index.d.ts +1 -1
- package/dist/esm/components/StoreUpdater/index.d.ts.map +1 -1
- package/dist/esm/container/FlowRenderer/index.d.ts +1 -1
- package/dist/esm/container/FlowRenderer/index.d.ts.map +1 -1
- package/dist/esm/container/GraphView/index.d.ts +2 -2
- package/dist/esm/container/GraphView/index.d.ts.map +1 -1
- package/dist/esm/container/ReactFlow/index.d.ts.map +1 -1
- package/dist/esm/container/ZoomPane/index.d.ts +1 -1
- package/dist/esm/container/ZoomPane/index.d.ts.map +1 -1
- package/dist/esm/hooks/useViewportHelper.d.ts.map +1 -1
- package/dist/esm/index.js +82 -34
- package/dist/esm/index.mjs +82 -34
- package/dist/esm/store/index.d.ts.map +1 -1
- package/dist/esm/types/component-props.d.ts +4 -0
- package/dist/esm/types/component-props.d.ts.map +1 -1
- package/dist/esm/types/general.d.ts +1 -1
- package/dist/esm/types/general.d.ts.map +1 -1
- package/dist/esm/types/store.d.ts +3 -1
- package/dist/esm/types/store.d.ts.map +1 -1
- package/dist/umd/components/StoreUpdater/index.d.ts +1 -1
- package/dist/umd/components/StoreUpdater/index.d.ts.map +1 -1
- package/dist/umd/container/FlowRenderer/index.d.ts +1 -1
- package/dist/umd/container/FlowRenderer/index.d.ts.map +1 -1
- package/dist/umd/container/GraphView/index.d.ts +2 -2
- package/dist/umd/container/GraphView/index.d.ts.map +1 -1
- package/dist/umd/container/ReactFlow/index.d.ts.map +1 -1
- package/dist/umd/container/ZoomPane/index.d.ts +1 -1
- package/dist/umd/container/ZoomPane/index.d.ts.map +1 -1
- package/dist/umd/hooks/useViewportHelper.d.ts.map +1 -1
- package/dist/umd/index.js +2 -2
- package/dist/umd/store/index.d.ts.map +1 -1
- package/dist/umd/types/component-props.d.ts +4 -0
- package/dist/umd/types/component-props.d.ts.map +1 -1
- package/dist/umd/types/general.d.ts +1 -1
- package/dist/umd/types/general.d.ts.map +1 -1
- package/dist/umd/types/store.d.ts +3 -1
- package/dist/umd/types/store.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Node, Edge, ReactFlowProps } from '../../types';
|
|
2
|
-
declare const reactFlowFieldsToTrack: readonly ["nodes", "edges", "defaultNodes", "defaultEdges", "onConnect", "onConnectStart", "onConnectEnd", "onClickConnectStart", "onClickConnectEnd", "nodesDraggable", "nodesConnectable", "nodesFocusable", "edgesFocusable", "edgesReconnectable", "elevateNodesOnSelect", "elevateEdgesOnSelect", "minZoom", "maxZoom", "nodeExtent", "onNodesChange", "onEdgesChange", "elementsSelectable", "connectionMode", "snapGrid", "snapToGrid", "translateExtent", "connectOnClick", "defaultEdgeOptions", "fitView", "fitViewOptions", "onNodesDelete", "onEdgesDelete", "onDelete", "onNodeDrag", "onNodeDragStart", "onNodeDragStop", "onSelectionDrag", "onSelectionDragStart", "onSelectionDragStop", "onMoveStart", "onMove", "onMoveEnd", "noPanClassName", "nodeOrigin", "autoPanOnConnect", "autoPanOnNodeDrag", "onError", "connectionRadius", "isValidConnection", "selectNodesOnDrag", "nodeDragThreshold", "onBeforeDelete", "debug", "autoPanSpeed"];
|
|
2
|
+
declare const reactFlowFieldsToTrack: readonly ["nodes", "edges", "defaultNodes", "defaultEdges", "onConnect", "onConnectStart", "onConnectEnd", "onClickConnectStart", "onClickConnectEnd", "nodesDraggable", "nodesConnectable", "nodesFocusable", "edgesFocusable", "edgesReconnectable", "elevateNodesOnSelect", "elevateEdgesOnSelect", "minZoom", "maxZoom", "nodeExtent", "onNodesChange", "onEdgesChange", "elementsSelectable", "connectionMode", "snapGrid", "snapToGrid", "translateExtent", "connectOnClick", "defaultEdgeOptions", "fitView", "fitViewOptions", "onNodesDelete", "onEdgesDelete", "onDelete", "onNodeDrag", "onNodeDragStart", "onNodeDragStop", "onSelectionDrag", "onSelectionDragStart", "onSelectionDragStop", "onMoveStart", "onMove", "onMoveEnd", "noPanClassName", "nodeOrigin", "autoPanOnConnect", "autoPanOnNodeDrag", "onError", "connectionRadius", "isValidConnection", "selectNodesOnDrag", "nodeDragThreshold", "onBeforeDelete", "debug", "autoPanSpeed", "paneClickDistance"];
|
|
3
3
|
type ReactFlowFieldsToTrack = (typeof reactFlowFieldsToTrack)[number];
|
|
4
4
|
type StoreUpdaterProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = Pick<ReactFlowProps<NodeType, EdgeType>, ReactFlowFieldsToTrack> & {
|
|
5
5
|
rfId: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StoreUpdater/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAkB,cAAc,EAAkB,MAAM,aAAa,CAAC;AAI9F,QAAA,MAAM,sBAAsB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StoreUpdater/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAkB,cAAc,EAAkB,MAAM,aAAa,CAAC;AAI9F,QAAA,MAAM,sBAAsB,w7BAwDlB,CAAC;AAEX,KAAK,sBAAsB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AACtE,KAAK,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI,IAAI,CACvF,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAClC,sBAAsB,CACvB,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AA+BF,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EACrF,KAAK,EAAE,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC,QAyD7C"}
|
|
@@ -5,7 +5,7 @@ export type FlowRendererProps<NodeType extends Node = Node> = Omit<GraphViewProp
|
|
|
5
5
|
isControlledViewport: boolean;
|
|
6
6
|
children: ReactNode;
|
|
7
7
|
};
|
|
8
|
-
declare function FlowRendererComponent<NodeType extends Node = Node>({ children, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport, }: FlowRendererProps<NodeType>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function FlowRendererComponent<NodeType extends Node = Node>({ children, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, paneClickDistance, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport, }: FlowRendererProps<NodeType>): import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
declare namespace FlowRendererComponent {
|
|
10
10
|
var displayName: string;
|
|
11
11
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/FlowRenderer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK7C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9C,OAAO,KAAK,EAAkB,IAAI,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI,IAAI,CAChE,cAAc,CAAC,QAAQ,CAAC,EACtB,YAAY,GACZ,WAAW,GACX,WAAW,GACX,UAAU,GACV,oBAAoB,GACpB,8BAA8B,GAC9B,gBAAgB,GAChB,2BAA2B,GAC3B,mBAAmB,GACnB,oBAAoB,GACpB,MAAM,CACT,GAAG;IACF,oBAAoB,EAAE,OAAO,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAQF,iBAAS,qBAAqB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAC3D,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,WAAW,EAAE,YAAY,EACzB,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,SAAS,EAAE,UAAU,EACrB,eAAe,EACf,eAAe,EACf,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,gBAAgB,EAChB,oBAAoB,GACrB,EAAE,iBAAiB,CAAC,QAAQ,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/FlowRenderer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK7C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9C,OAAO,KAAK,EAAkB,IAAI,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI,IAAI,CAChE,cAAc,CAAC,QAAQ,CAAC,EACtB,YAAY,GACZ,WAAW,GACX,WAAW,GACX,UAAU,GACV,oBAAoB,GACpB,8BAA8B,GAC9B,gBAAgB,GAChB,2BAA2B,GAC3B,mBAAmB,GACnB,oBAAoB,GACpB,MAAM,CACT,GAAG;IACF,oBAAoB,EAAE,OAAO,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAQF,iBAAS,qBAAqB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAC3D,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,WAAW,EAAE,YAAY,EACzB,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,SAAS,EAAE,UAAU,EACrB,eAAe,EACf,eAAe,EACf,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,gBAAgB,EAChB,oBAAoB,GACrB,EAAE,iBAAiB,CAAC,QAAQ,CAAC,2CA2D7B;kBAhGQ,qBAAqB;;;AAoG9B,eAAO,MAAM,YAAY,8BAA8D,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { Edge, Node, ReactFlowProps } from '../../types';
|
|
2
|
-
export type GraphViewProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = Omit<ReactFlowProps<NodeType, EdgeType>, 'onSelectionChange' | 'nodes' | 'edges' | 'onMove' | 'onMoveStart' | 'onMoveEnd' | 'elevateEdgesOnSelect'> & Required<Pick<ReactFlowProps<NodeType, EdgeType>, 'selectionKeyCode' | 'deleteKeyCode' | 'multiSelectionKeyCode' | 'connectionLineType' | 'onlyRenderVisibleElements' | 'translateExtent' | 'minZoom' | 'maxZoom' | 'defaultMarkerColor' | 'noDragClassName' | 'noWheelClassName' | 'noPanClassName' | 'defaultViewport' | 'disableKeyboardA11y'>> & {
|
|
2
|
+
export type GraphViewProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = Omit<ReactFlowProps<NodeType, EdgeType>, 'onSelectionChange' | 'nodes' | 'edges' | 'onMove' | 'onMoveStart' | 'onMoveEnd' | 'elevateEdgesOnSelect'> & Required<Pick<ReactFlowProps<NodeType, EdgeType>, 'selectionKeyCode' | 'deleteKeyCode' | 'multiSelectionKeyCode' | 'connectionLineType' | 'onlyRenderVisibleElements' | 'translateExtent' | 'minZoom' | 'maxZoom' | 'defaultMarkerColor' | 'noDragClassName' | 'noWheelClassName' | 'noPanClassName' | 'defaultViewport' | 'disableKeyboardA11y' | 'paneClickDistance'>> & {
|
|
3
3
|
rfId: string;
|
|
4
4
|
};
|
|
5
|
-
declare function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge = Edge>({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeExtent, rfId, viewport, onViewportChange, }: GraphViewProps<NodeType, EdgeType>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge = Edge>({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeExtent, rfId, viewport, onViewportChange, }: GraphViewProps<NodeType, EdgeType>): import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
declare namespace GraphViewComponent {
|
|
7
7
|
var displayName: string;
|
|
8
8
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/GraphView/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG9D,MAAM,MAAM,cAAc,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI,IAAI,CAC3F,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAClC,mBAAmB,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,aAAa,GAAG,WAAW,GAAG,sBAAsB,CAC1G,GACC,QAAQ,CACN,IAAI,CACF,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAChC,kBAAkB,GAClB,eAAe,GACf,uBAAuB,GACvB,oBAAoB,GACpB,2BAA2B,GAC3B,iBAAiB,GACjB,SAAS,GACT,SAAS,GACT,oBAAoB,GACpB,iBAAiB,GACjB,kBAAkB,GAClB,gBAAgB,GAChB,iBAAiB,GACjB,qBAAqB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/GraphView/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG9D,MAAM,MAAM,cAAc,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI,IAAI,CAC3F,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAClC,mBAAmB,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,aAAa,GAAG,WAAW,GAAG,sBAAsB,CAC1G,GACC,QAAQ,CACN,IAAI,CACF,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAChC,kBAAkB,GAClB,eAAe,GACf,uBAAuB,GACvB,oBAAoB,GACpB,2BAA2B,GAC3B,iBAAiB,GACjB,SAAS,GACT,SAAS,GACT,oBAAoB,GACpB,iBAAiB,GACjB,kBAAkB,GAClB,gBAAgB,GAChB,iBAAiB,GACjB,qBAAqB,GACrB,mBAAmB,CACtB,CACF,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEJ,iBAAS,kBAAkB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EACtF,SAAS,EACT,SAAS,EACT,MAAM,EACN,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,mBAAmB,EACnB,uBAAuB,EACvB,4BAA4B,EAC5B,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,aAAa,EACb,yBAAyB,EACzB,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,gBAAgB,GACjB,EAAE,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,2CA4FpC;kBA5JQ,kBAAkB;;;AAgK3B,eAAO,MAAM,SAAS,2BAAwD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/ReactFlow/index.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/ReactFlow/index.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;;AA0R9D,wBAA0C"}
|
|
@@ -2,6 +2,6 @@ import type { FlowRendererProps } from '../FlowRenderer';
|
|
|
2
2
|
type ZoomPaneProps = Omit<FlowRendererProps, 'deleteKeyCode' | 'selectionKeyCode' | 'multiSelectionKeyCode' | 'noDragClassName' | 'disableKeyboardA11y' | 'selectionOnDrag'> & {
|
|
3
3
|
isControlledViewport: boolean;
|
|
4
4
|
};
|
|
5
|
-
export declare function ZoomPane({ onPaneContextMenu, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, }: ZoomPaneProps): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export declare function ZoomPane({ onPaneContextMenu, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance, }: ZoomPaneProps): import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
export {};
|
|
7
7
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/ZoomPane/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,aAAa,GAAG,IAAI,CACvB,iBAAiB,EACf,eAAe,GACf,kBAAkB,GAClB,uBAAuB,GACvB,iBAAiB,GACjB,qBAAqB,GACrB,iBAAiB,CACpB,GAAG;IACF,oBAAoB,EAAE,OAAO,CAAC;CAC/B,CAAC;AAOF,wBAAgB,QAAQ,CAAC,EACvB,iBAAiB,EACjB,YAAmB,EACnB,WAAkB,EAClB,WAAmB,EACnB,gBAAsB,EACtB,eAAsC,EACtC,iBAAwB,EACxB,SAAgB,EAChB,eAAe,EACf,eAAe,EACf,OAAO,EACP,OAAO,EACP,qBAAqB,EACrB,gBAAuB,EACvB,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,oBAAoB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/ZoomPane/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,aAAa,GAAG,IAAI,CACvB,iBAAiB,EACf,eAAe,GACf,kBAAkB,GAClB,uBAAuB,GACvB,iBAAiB,GACjB,qBAAqB,GACrB,iBAAiB,CACpB,GAAG;IACF,oBAAoB,EAAE,OAAO,CAAC;CAC/B,CAAC;AAOF,wBAAgB,QAAQ,CAAC,EACvB,iBAAiB,EACjB,YAAmB,EACnB,WAAkB,EAClB,WAAmB,EACnB,gBAAsB,EACtB,eAAsC,EACtC,iBAAwB,EACxB,SAAgB,EAChB,eAAe,EACf,eAAe,EACf,OAAO,EACP,OAAO,EACP,qBAAqB,EACrB,gBAAuB,EACvB,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,GAClB,EAAE,aAAa,2CAgGf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useViewportHelper.d.ts","sourceRoot":"","sources":["../../src/hooks/useViewportHelper.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useViewportHelper.d.ts","sourceRoot":"","sources":["../../src/hooks/useViewportHelper.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAExD;;;;;GAKG;AACH,QAAA,MAAM,iBAAiB,QAAO,uBAkI7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import cc from 'classcat';
|
|
4
|
-
import { errorMessages, infiniteExtent, isInputDOMNode, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, evaluateAbsolutePosition, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getInternalNodesBounds, isNumeric, nodeHasDimensions, getNodeDimensions, clampPosition, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, getConnectionStatus, ConnectionLineType, updateConnectionLookup, adoptUserNodes, initialConnection, devWarn, updateNodeInternals, updateAbsolutePositions, handleExpandParent, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
|
|
4
|
+
import { errorMessages, infiniteExtent, isInputDOMNode, getFitViewNodes, fitView, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, evaluateAbsolutePosition, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getInternalNodesBounds, isNumeric, nodeHasDimensions, getNodeDimensions, clampPosition, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, getConnectionStatus, ConnectionLineType, updateConnectionLookup, adoptUserNodes, initialConnection, devWarn, updateNodeInternals, updateAbsolutePositions, handleExpandParent, panBy, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
|
|
5
5
|
export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, reconnectEdge } from '@xyflow/system';
|
|
6
6
|
import { createContext, useContext, useMemo, useEffect, useRef, useState, forwardRef, useLayoutEffect, useCallback, memo } from 'react';
|
|
7
7
|
import { useStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';
|
|
@@ -184,6 +184,7 @@ const reactFlowFieldsToTrack = [
|
|
|
184
184
|
'onBeforeDelete',
|
|
185
185
|
'debug',
|
|
186
186
|
'autoPanSpeed',
|
|
187
|
+
'paneClickDistance',
|
|
187
188
|
];
|
|
188
189
|
// rfId doesn't exist in ReactFlowProps, but it's one of the fields we want to update
|
|
189
190
|
const fieldsToTrack = [...reactFlowFieldsToTrack, 'rfId'];
|
|
@@ -196,6 +197,7 @@ const selector$m = (s) => ({
|
|
|
196
197
|
setNodeExtent: s.setNodeExtent,
|
|
197
198
|
reset: s.reset,
|
|
198
199
|
setDefaultNodesAndEdges: s.setDefaultNodesAndEdges,
|
|
200
|
+
setPaneClickDistance: s.setPaneClickDistance,
|
|
199
201
|
});
|
|
200
202
|
const initPrevValues = {
|
|
201
203
|
// these are values that are also passed directly to other components
|
|
@@ -208,9 +210,10 @@ const initPrevValues = {
|
|
|
208
210
|
elementsSelectable: true,
|
|
209
211
|
noPanClassName: 'nopan',
|
|
210
212
|
rfId: '1',
|
|
213
|
+
paneClickDistance: 0,
|
|
211
214
|
};
|
|
212
215
|
function StoreUpdater(props) {
|
|
213
|
-
const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, } = useStore(selector$m, shallow);
|
|
216
|
+
const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, setPaneClickDistance, } = useStore(selector$m, shallow);
|
|
214
217
|
const store = useStoreApi();
|
|
215
218
|
useEffect(() => {
|
|
216
219
|
setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);
|
|
@@ -242,6 +245,8 @@ function StoreUpdater(props) {
|
|
|
242
245
|
setTranslateExtent(fieldValue);
|
|
243
246
|
else if (fieldName === 'nodeExtent')
|
|
244
247
|
setNodeExtent(fieldValue);
|
|
248
|
+
else if (fieldName === 'paneClickDistance')
|
|
249
|
+
setPaneClickDistance(fieldValue);
|
|
245
250
|
// Renamed fields
|
|
246
251
|
else if (fieldName === 'fitView')
|
|
247
252
|
store.setState({ fitViewOnInit: fieldValue });
|
|
@@ -403,17 +408,30 @@ const useViewportHelper = () => {
|
|
|
403
408
|
const store = useStoreApi();
|
|
404
409
|
return useMemo(() => {
|
|
405
410
|
return {
|
|
406
|
-
zoomIn: (options) =>
|
|
407
|
-
|
|
408
|
-
|
|
411
|
+
zoomIn: (options) => {
|
|
412
|
+
const { panZoom } = store.getState();
|
|
413
|
+
return panZoom ? panZoom.scaleBy(1.2, { duration: options?.duration }) : Promise.resolve(false);
|
|
414
|
+
},
|
|
415
|
+
zoomOut: (options) => {
|
|
416
|
+
const { panZoom } = store.getState();
|
|
417
|
+
return panZoom ? panZoom.scaleBy(1 / 1.2, { duration: options?.duration }) : Promise.resolve(false);
|
|
418
|
+
},
|
|
419
|
+
zoomTo: (zoomLevel, options) => {
|
|
420
|
+
const { panZoom } = store.getState();
|
|
421
|
+
return panZoom ? panZoom.scaleTo(zoomLevel, { duration: options?.duration }) : Promise.resolve(false);
|
|
422
|
+
},
|
|
409
423
|
getZoom: () => store.getState().transform[2],
|
|
410
|
-
setViewport: (viewport, options) => {
|
|
424
|
+
setViewport: async (viewport, options) => {
|
|
411
425
|
const { transform: [tX, tY, tZoom], panZoom, } = store.getState();
|
|
412
|
-
panZoom
|
|
426
|
+
if (!panZoom) {
|
|
427
|
+
return Promise.resolve(false);
|
|
428
|
+
}
|
|
429
|
+
await panZoom.setViewport({
|
|
413
430
|
x: viewport.x ?? tX,
|
|
414
431
|
y: viewport.y ?? tY,
|
|
415
432
|
zoom: viewport.zoom ?? tZoom,
|
|
416
433
|
}, { duration: options?.duration });
|
|
434
|
+
return Promise.resolve(true);
|
|
417
435
|
},
|
|
418
436
|
getViewport: () => {
|
|
419
437
|
const [x, y, zoom] = store.getState().transform;
|
|
@@ -421,33 +439,41 @@ const useViewportHelper = () => {
|
|
|
421
439
|
},
|
|
422
440
|
fitView: (options) => {
|
|
423
441
|
const { nodeLookup, width, height, minZoom, maxZoom, panZoom } = store.getState();
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
442
|
+
const fitViewNodes = getFitViewNodes(nodeLookup, options);
|
|
443
|
+
return panZoom
|
|
444
|
+
? fitView({
|
|
445
|
+
nodes: fitViewNodes,
|
|
446
|
+
width,
|
|
447
|
+
height,
|
|
448
|
+
minZoom,
|
|
449
|
+
maxZoom,
|
|
450
|
+
panZoom,
|
|
451
|
+
}, options)
|
|
452
|
+
: Promise.resolve(false);
|
|
435
453
|
},
|
|
436
|
-
setCenter: (x, y, options) => {
|
|
454
|
+
setCenter: async (x, y, options) => {
|
|
437
455
|
const { width, height, maxZoom, panZoom } = store.getState();
|
|
438
456
|
const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom;
|
|
439
457
|
const centerX = width / 2 - x * nextZoom;
|
|
440
458
|
const centerY = height / 2 - y * nextZoom;
|
|
441
|
-
panZoom
|
|
459
|
+
if (!panZoom) {
|
|
460
|
+
return Promise.resolve(false);
|
|
461
|
+
}
|
|
462
|
+
await panZoom.setViewport({
|
|
442
463
|
x: centerX,
|
|
443
464
|
y: centerY,
|
|
444
465
|
zoom: nextZoom,
|
|
445
466
|
}, { duration: options?.duration });
|
|
467
|
+
return Promise.resolve(true);
|
|
446
468
|
},
|
|
447
|
-
fitBounds: (bounds, options) => {
|
|
469
|
+
fitBounds: async (bounds, options) => {
|
|
448
470
|
const { width, height, minZoom, maxZoom, panZoom } = store.getState();
|
|
449
471
|
const viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
|
|
450
|
-
panZoom
|
|
472
|
+
if (!panZoom) {
|
|
473
|
+
return Promise.resolve(false);
|
|
474
|
+
}
|
|
475
|
+
await panZoom.setViewport(viewport, { duration: options?.duration });
|
|
476
|
+
return Promise.resolve(true);
|
|
451
477
|
},
|
|
452
478
|
screenToFlowPosition: (clientPosition, options = { snapToGrid: true }) => {
|
|
453
479
|
const { transform, snapGrid, domNode } = store.getState();
|
|
@@ -1035,7 +1061,7 @@ const selector$k = (s) => ({
|
|
|
1035
1061
|
userSelectionActive: s.userSelectionActive,
|
|
1036
1062
|
lib: s.lib,
|
|
1037
1063
|
});
|
|
1038
|
-
function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = true, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, }) {
|
|
1064
|
+
function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = true, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance, }) {
|
|
1039
1065
|
const store = useStoreApi();
|
|
1040
1066
|
const zoomPane = useRef(null);
|
|
1041
1067
|
const { userSelectionActive, lib } = useStore(selector$k, shallow);
|
|
@@ -1050,6 +1076,7 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
|
|
|
1050
1076
|
maxZoom,
|
|
1051
1077
|
translateExtent,
|
|
1052
1078
|
viewport: defaultViewport,
|
|
1079
|
+
paneClickDistance,
|
|
1053
1080
|
onTransformChange: (transform) => {
|
|
1054
1081
|
onViewportChange?.({ x: transform[0], y: transform[1], zoom: transform[2] });
|
|
1055
1082
|
if (!isControlledViewport) {
|
|
@@ -1643,7 +1670,7 @@ const win = typeof window !== 'undefined' ? window : undefined;
|
|
|
1643
1670
|
const selector$f = (s) => {
|
|
1644
1671
|
return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
|
|
1645
1672
|
};
|
|
1646
|
-
function FlowRendererComponent({ children, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport, }) {
|
|
1673
|
+
function FlowRendererComponent({ children, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, paneClickDistance, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport, }) {
|
|
1647
1674
|
const { nodesSelectionActive, userSelectionActive } = useStore(selector$f);
|
|
1648
1675
|
const selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win });
|
|
1649
1676
|
const panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win });
|
|
@@ -1651,7 +1678,7 @@ function FlowRendererComponent({ children, onPaneClick, onPaneMouseEnter, onPane
|
|
|
1651
1678
|
const panOnScroll = panActivationKeyPressed || _panOnScroll;
|
|
1652
1679
|
const isSelecting = selectionKeyPressed || userSelectionActive || (selectionOnDrag && panOnDrag !== true);
|
|
1653
1680
|
useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode });
|
|
1654
|
-
return (jsx(ZoomPane, { onPaneContextMenu: onPaneContextMenu, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, zoomOnDoubleClick: zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, zoomActivationKeyCode: zoomActivationKeyCode, preventScrolling: preventScrolling, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, onViewportChange: onViewportChange, isControlledViewport: isControlledViewport, children: jsxs(Pane, { onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, panOnDrag: panOnDrag, isSelecting: !!isSelecting, selectionMode: selectionMode, selectionKeyPressed: selectionKeyPressed, children: [children, nodesSelectionActive && (jsx(NodesSelection, { onSelectionContextMenu: onSelectionContextMenu, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y }))] }) }));
|
|
1681
|
+
return (jsx(ZoomPane, { onPaneContextMenu: onPaneContextMenu, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, zoomOnDoubleClick: zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, zoomActivationKeyCode: zoomActivationKeyCode, preventScrolling: preventScrolling, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, onViewportChange: onViewportChange, isControlledViewport: isControlledViewport, paneClickDistance: paneClickDistance, children: jsxs(Pane, { onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, panOnDrag: panOnDrag, isSelecting: !!isSelecting, selectionMode: selectionMode, selectionKeyPressed: selectionKeyPressed, children: [children, nodesSelectionActive && (jsx(NodesSelection, { onSelectionContextMenu: onSelectionContextMenu, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y }))] }) }));
|
|
1655
1682
|
}
|
|
1656
1683
|
FlowRendererComponent.displayName = 'FlowRenderer';
|
|
1657
1684
|
const FlowRenderer = memo(FlowRendererComponent);
|
|
@@ -2539,13 +2566,13 @@ function useStylesLoadedWarning() {
|
|
|
2539
2566
|
}, []);
|
|
2540
2567
|
}
|
|
2541
2568
|
|
|
2542
|
-
function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeExtent, rfId, viewport, onViewportChange, }) {
|
|
2569
|
+
function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeExtent, rfId, viewport, onViewportChange, }) {
|
|
2543
2570
|
useNodeOrEdgeTypesWarning(nodeTypes);
|
|
2544
2571
|
useNodeOrEdgeTypesWarning(edgeTypes);
|
|
2545
2572
|
useStylesLoadedWarning();
|
|
2546
2573
|
useOnInitHandler(onInit);
|
|
2547
2574
|
useViewportSync(viewport);
|
|
2548
|
-
return (jsx(FlowRenderer, { onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, deleteKeyCode: deleteKeyCode, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, onSelectionContextMenu: onSelectionContextMenu, preventScrolling: preventScrolling, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, onViewportChange: onViewportChange, isControlledViewport: !!viewport, children: jsxs(Viewport, { children: [jsx(EdgeRenderer, { edgeTypes: edgeTypes, onEdgeClick: onEdgeClick, onEdgeDoubleClick: onEdgeDoubleClick, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onlyRenderVisibleElements: onlyRenderVisibleElements, onEdgeContextMenu: onEdgeContextMenu, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, rfId: rfId }), jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsx("div", { className: "react-flow__edgelabel-renderer" }), jsx(NodeRenderer, { nodeTypes: nodeTypes, onNodeClick: onNodeClick, onNodeDoubleClick: onNodeDoubleClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onlyRenderVisibleElements: onlyRenderVisibleElements, noPanClassName: noPanClassName, noDragClassName: noDragClassName, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, rfId: rfId }), jsx("div", { className: "react-flow__viewport-portal" })] }) }));
|
|
2575
|
+
return (jsx(FlowRenderer, { onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneContextMenu: onPaneContextMenu, onPaneScroll: onPaneScroll, paneClickDistance: paneClickDistance, deleteKeyCode: deleteKeyCode, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, elementsSelectable: elementsSelectable, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, defaultViewport: defaultViewport, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, onSelectionContextMenu: onSelectionContextMenu, preventScrolling: preventScrolling, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, onViewportChange: onViewportChange, isControlledViewport: !!viewport, children: jsxs(Viewport, { children: [jsx(EdgeRenderer, { edgeTypes: edgeTypes, onEdgeClick: onEdgeClick, onEdgeDoubleClick: onEdgeDoubleClick, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onlyRenderVisibleElements: onlyRenderVisibleElements, onEdgeContextMenu: onEdgeContextMenu, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noPanClassName: noPanClassName, disableKeyboardA11y: disableKeyboardA11y, rfId: rfId }), jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsx("div", { className: "react-flow__edgelabel-renderer" }), jsx(NodeRenderer, { nodeTypes: nodeTypes, onNodeClick: onNodeClick, onNodeDoubleClick: onNodeDoubleClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onlyRenderVisibleElements: onlyRenderVisibleElements, noPanClassName: noPanClassName, noDragClassName: noDragClassName, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, rfId: rfId }), jsx("div", { className: "react-flow__viewport-portal" })] }) }));
|
|
2549
2576
|
}
|
|
2550
2577
|
GraphViewComponent.displayName = 'GraphView';
|
|
2551
2578
|
const GraphView = memo(GraphViewComponent);
|
|
@@ -2665,7 +2692,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
2665
2692
|
// changes its dimensions, this function is called to measure the
|
|
2666
2693
|
// new dimensions and update the nodes.
|
|
2667
2694
|
updateNodeInternals: (updates) => {
|
|
2668
|
-
const { triggerNodeChanges,
|
|
2695
|
+
const { triggerNodeChanges, nodeLookup, parentLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin, debug, fitViewSync, } = get();
|
|
2669
2696
|
const { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin);
|
|
2670
2697
|
if (!updatedInternals) {
|
|
2671
2698
|
return;
|
|
@@ -2674,7 +2701,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
2674
2701
|
// we call fitView once initially after all dimensions are set
|
|
2675
2702
|
let nextFitViewDone = fitViewDone;
|
|
2676
2703
|
if (!fitViewDone && fitViewOnInit) {
|
|
2677
|
-
nextFitViewDone =
|
|
2704
|
+
nextFitViewDone = fitViewSync({
|
|
2678
2705
|
...fitViewOnInitOptions,
|
|
2679
2706
|
nodes: fitViewOnInitOptions?.nodes,
|
|
2680
2707
|
});
|
|
@@ -2696,7 +2723,6 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
2696
2723
|
const parentExpandChildren = [];
|
|
2697
2724
|
const changes = [];
|
|
2698
2725
|
for (const [id, dragItem] of nodeDragItems) {
|
|
2699
|
-
// @todo add expandParent to drag item so that we can get rid of the look up here
|
|
2700
2726
|
const change = {
|
|
2701
2727
|
id,
|
|
2702
2728
|
type: 'position',
|
|
@@ -2797,6 +2823,9 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
2797
2823
|
get().panZoom?.setTranslateExtent(translateExtent);
|
|
2798
2824
|
set({ translateExtent });
|
|
2799
2825
|
},
|
|
2826
|
+
setPaneClickDistance: (clickDistance) => {
|
|
2827
|
+
get().panZoom?.setClickDistance(clickDistance);
|
|
2828
|
+
},
|
|
2800
2829
|
resetSelectedElements: () => {
|
|
2801
2830
|
const { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
|
|
2802
2831
|
const nodeChanges = nodes.reduce((res, node) => (node.selected ? [...res, createSelectionChange(node.id, false)] : res), []);
|
|
@@ -2827,16 +2856,35 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
2827
2856
|
fitView: (options) => {
|
|
2828
2857
|
const { panZoom, width, height, minZoom, maxZoom, nodeLookup } = get();
|
|
2829
2858
|
if (!panZoom) {
|
|
2830
|
-
return false;
|
|
2859
|
+
return Promise.resolve(false);
|
|
2831
2860
|
}
|
|
2861
|
+
const fitViewNodes = getFitViewNodes(nodeLookup, options);
|
|
2832
2862
|
return fitView({
|
|
2833
|
-
|
|
2863
|
+
nodes: fitViewNodes,
|
|
2864
|
+
width,
|
|
2865
|
+
height,
|
|
2866
|
+
panZoom,
|
|
2867
|
+
minZoom,
|
|
2868
|
+
maxZoom,
|
|
2869
|
+
}, options);
|
|
2870
|
+
},
|
|
2871
|
+
// we can't call an asnychronous function in updateNodeInternals
|
|
2872
|
+
// for that we created this sync version of fitView
|
|
2873
|
+
fitViewSync: (options) => {
|
|
2874
|
+
const { panZoom, width, height, minZoom, maxZoom, nodeLookup } = get();
|
|
2875
|
+
if (!panZoom) {
|
|
2876
|
+
return false;
|
|
2877
|
+
}
|
|
2878
|
+
const fitViewNodes = getFitViewNodes(nodeLookup, options);
|
|
2879
|
+
fitView({
|
|
2880
|
+
nodes: fitViewNodes,
|
|
2834
2881
|
width,
|
|
2835
2882
|
height,
|
|
2836
2883
|
panZoom,
|
|
2837
2884
|
minZoom,
|
|
2838
2885
|
maxZoom,
|
|
2839
2886
|
}, options);
|
|
2887
|
+
return fitViewNodes.size > 0;
|
|
2840
2888
|
},
|
|
2841
2889
|
cancelConnection: () => {
|
|
2842
2890
|
set({
|
|
@@ -2880,10 +2928,10 @@ const wrapperStyle = {
|
|
|
2880
2928
|
position: 'relative',
|
|
2881
2929
|
zIndex: 0,
|
|
2882
2930
|
};
|
|
2883
|
-
function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = 'Space', multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control', zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control', snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = '#b1b1b7', zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, children, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', debug, ...rest }, ref) {
|
|
2931
|
+
function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = 'Space', multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control', zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control', snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = '#b1b1b7', zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 0, children, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', debug, ...rest }, ref) {
|
|
2884
2932
|
const rfId = id || '1';
|
|
2885
2933
|
const colorModeClassName = useColorModeClass(colorMode);
|
|
2886
|
-
return (jsx("div", { ...rest, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), "data-testid": "rf__wrapper", id: id, children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, nodeOrigin: nodeOrigin, children: [jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, autoPanSpeed: autoPanSpeed, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete, debug: debug }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
|
|
2934
|
+
return (jsx("div", { ...rest, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), "data-testid": "rf__wrapper", id: id, children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, nodeOrigin: nodeOrigin, children: [jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, paneClickDistance: paneClickDistance, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, autoPanSpeed: autoPanSpeed, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete, paneClickDistance: paneClickDistance, debug: debug }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
|
|
2887
2935
|
}
|
|
2888
2936
|
var index = fixedForwardRef(ReactFlow);
|
|
2889
2937
|
|