alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reafactor(react/svelte): rename some util functions #3528

Browse Source
This commit is contained in:
moklick
2023-11-13 10:45:06 +01:00
parent b368b14b22
commit 90912a6c1a
19 changed files with 109 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/react/src/examples/Undirectional/index.tsx
+3 -3
View File
@@ -183,7 +183,7 @@ const getId = () => `${id++}`;
const UpdateNodeInternalsFlow = () => {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const { project } = useReactFlow();
const { screenToFlowPosition } = useReactFlow();
const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
const onEdgeUpdate = useCallback(
@@ -196,12 +196,12 @@ const UpdateNodeInternalsFlow = () => {
setNodes((nds) =>
nds.concat({
id: getId(),
position: project({ x: evt.clientX, y: evt.clientY - 40 }),
position: screenToFlowPosition({ x: evt.clientX, y: evt.clientY }),
type: 'custom',
data: null,
})
),
[project, setNodes]
[screenToFlowPosition, setNodes]
);
return (
examples/react/src/examples/UseReactFlow/index.tsx
+4 -4
View File
@@ -57,7 +57,7 @@ const UseZoomPanHelperFlow = () => {
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
const {
project,
screenToFlowPosition,
setCenter,
zoomIn,
zoomOut,
@@ -72,9 +72,9 @@ const UseZoomPanHelperFlow = () => {
const onPaneClick = useCallback(
(evt: MouseEvent) => {
const projectedPosition = project({
const projectedPosition = screenToFlowPosition({
x: evt.clientX,
y: evt.clientY - 40,
y: evt.clientY,
});
setNodes((nds) =>
@@ -87,7 +87,7 @@ const UseZoomPanHelperFlow = () => {
})
);
},
[project, setNodes]
[screenToFlowPosition, setNodes]
);
const onNodeClick = useCallback(
examples/react/src/examples/UseUpdateNodeInternals/index.tsx
+3 -3
View File
@@ -36,20 +36,20 @@ const UpdateNodeInternalsFlow = () => {
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
const { project } = useReactFlow();
const { screenToFlowPosition } = useReactFlow();
const onPaneClick = useCallback(
(evt: MouseEvent) =>
setNodes((nds) =>
nds.concat({
id: getId(),
position: project({ x: evt.clientX, y: evt.clientY - 40 }),
position: screenToFlowPosition({ x: evt.clientX, y: evt.clientY }),
data: { label: 'new node' },
targetPosition: Position.Left,
sourcePosition: Position.Right,
})
),
[project, setNodes]
[screenToFlowPosition, setNodes]
);
return (
examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte
+4 -4
View File
@@ -69,10 +69,10 @@
return null;
}
const type = event.dataTransfer.getData('application/svelteflow');
const position = svelteFlow.project({
const type = event.dataTransfer.getData('application/svelteflow') || 'default';
const position = svelteFlow.screenToFlowPosition({
x: event.clientX,
y: event.clientY - 40
y: event.clientY
});
const newNode: Node = {
id: `${Math.random()}`,
@@ -81,7 +81,7 @@
data: { label: `${type} node` }
};
svelteFlow.nodes.update((nds) => nds.concat(newNode));
nodes.update((nds) => nds.concat(newNode));
};
$: {
packages/react/src/additional-components/MiniMap/MiniMap.tsx
+2 -2
View File
@@ -3,7 +3,7 @@
import { memo, useEffect, useRef, type MouseEvent, useCallback } from 'react';
import cc from 'classcat';
import { shallow } from 'zustand/shallow';
import { getRectOfNodes, getBoundsOfRects, XYMinimap, type Rect, type XYMinimapInstance } from '@xyflow/system';
import { getNodesBounds, getBoundsOfRects, XYMinimap, type Rect, type XYMinimapInstance } from '@xyflow/system';
import { useStore, useStoreApi } from '../../hooks/useStore';
import Panel from '../../components/Panel';
@@ -25,7 +25,7 @@ const selector = (s: ReactFlowState) => {
return {
viewBB,
boundingRect: s.nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(s.nodes, s.nodeOrigin), viewBB) : viewBB,
boundingRect: s.nodes.length > 0 ? getBoundsOfRects(getNodesBounds(s.nodes, s.nodeOrigin), viewBB) : viewBB,
rfId: s.rfId,
nodeOrigin: s.nodeOrigin,
panZoom: s.panZoom,
packages/react/src/additional-components/NodeToolbar/NodeToolbar.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { useCallback, CSSProperties } from 'react';
import cc from 'classcat';
import { shallow } from 'zustand/shallow';
import { getRectOfNodes, Transform, Rect, Position, internalsSymbol } from '@xyflow/system';
import { getNodesBounds, Transform, Rect, Position, internalsSymbol } from '@xyflow/system';
import { Node, ReactFlowState } from '../../types';
import { useStore } from '../../hooks/useStore';
@@ -105,7 +105,7 @@ function NodeToolbar({
return null;
}
const nodeRect: Rect = getRectOfNodes(nodes, nodeOrigin);
const nodeRect: Rect = getNodesBounds(nodes, nodeOrigin);
const zIndex: number = Math.max(...nodes.map((node) => (node[internalsSymbol]?.z || 1) + 1));
const wrapperStyle: CSSProperties = {
packages/react/src/components/NodesSelection/index.tsx
+2 -2
View File
@@ -6,7 +6,7 @@
import { memo, useRef, useEffect, type MouseEvent, type KeyboardEvent } from 'react';
import cc from 'classcat';
import { shallow } from 'zustand/shallow';
import { getRectOfNodes } from '@xyflow/system';
import { getNodesBounds } from '@xyflow/system';
import { useStore, useStoreApi } from '../../hooks/useStore';
import useDrag from '../../hooks/useDrag';
@@ -22,7 +22,7 @@ export type NodesSelectionProps = {
const selector = (s: ReactFlowState) => {
const selectedNodes = s.nodes.filter((n) => n.selected);
const { width, height, x, y } = getRectOfNodes(selectedNodes, s.nodeOrigin);
const { width, height, x, y } = getNodesBounds(selectedNodes, s.nodeOrigin);
return {
width,
packages/react/src/hooks/useViewportHelper.ts
+24 -34
View File
@@ -1,7 +1,7 @@
import { useMemo } from 'react';
import {
pointToRendererPoint,
getTransformForBounds,
getViewportForBounds,
fitView,
type XYPosition,
rendererPointToPoint,
@@ -76,50 +76,40 @@ const useViewportHelper = (): ViewportHelperFunctions => {
},
fitBounds: (bounds, options) => {
const { width, height, minZoom, maxZoom, panZoom } = store.getState();
const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
const viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
panZoom?.setViewport(
{
x,
y,
zoom,
},
{ duration: options?.duration }
);
panZoom?.setViewport(viewport, { duration: options?.duration });
},
project: (position: XYPosition) => {
const { transform, snapToGrid, snapGrid } = store.getState();
return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
},
screenToFlowCoordinate: (position: XYPosition) => {
screenToFlowPosition: (position: XYPosition) => {
const { transform, snapToGrid, snapGrid, domNode } = store.getState();
if (domNode) {
const { x: domX, y: domY } = domNode.getBoundingClientRect();
const correctedPosition = {
x: position.x - domX,
y: position.y - domY,
};
return pointToRendererPoint(correctedPosition, transform, snapToGrid, snapGrid || [1, 1]);
if (!domNode) {
return position;
}
return { x: 0, y: 0 };
const { x: domX, y: domY } = domNode.getBoundingClientRect();
const correctedPosition = {
x: position.x - domX,
y: position.y - domY,
};
return pointToRendererPoint(correctedPosition, transform, snapToGrid, snapGrid || [1, 1]);
},
flowToScreenCoordinate: (position: XYPosition) => {
flowToScreenPosition: (position: XYPosition) => {
const { transform, domNode } = store.getState();
if (domNode) {
const { x: domX, y: domY } = domNode.getBoundingClientRect();
const rendererPosition = rendererPointToPoint(position, transform);
return {
x: rendererPosition.x + domX,
y: rendererPosition.y + domY,
};
if (!domNode) {
return position;
}
return { x: 0, y: 0 };
const { x: domX, y: domY } = domNode.getBoundingClientRect();
const rendererPosition = rendererPointToPoint(position, transform);
return {
x: rendererPosition.x + domX,
y: rendererPosition.y + domY,
};
},
viewportInitialized: panZoomInitialized,
};
packages/react/src/index.ts
+2 -2
View File
@@ -85,6 +85,6 @@ export {
getSmoothStepPath,
type GetStraightPathParams,
getStraightPath,
getTransformForBounds,
getRectOfNodes,
getViewportForBounds,
getNodesBounds,
} from '@xyflow/system';
packages/react/src/store/initialState.ts
+5 -4
View File
@@ -2,8 +2,8 @@ import {
infiniteExtent,
ConnectionMode,
updateNodes,
getRectOfNodes,
getTransformForBounds,
getNodesBounds,
getViewportForBounds,
Transform,
} from '@xyflow/system';
@@ -32,8 +32,9 @@ const getInitialState = ({
width: node.size?.width,
height: node.size?.height,
}));
const bounds = getRectOfNodes(nodesWithDimensions, [0, 0]);
transform = getTransformForBounds(bounds, width, height, 0.5, 2, 0.1);
const bounds = getNodesBounds(nodesWithDimensions, [0, 0]);
const { x, y, z } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
transform = [x, y, z];
}
return {
packages/react/src/types/general.ts
+3 -4
View File
@@ -11,7 +11,7 @@ import {
GetViewport,
SetCenter,
FitBounds,
Project,
XYPosition,
} from '@xyflow/system';
import type { NodeChange, EdgeChange, Node, WrapNodeProps, Edge, EdgeProps, WrapEdgeProps, ReactFlowInstance } from '.';
@@ -54,8 +54,7 @@ export type ViewportHelperFunctions = {
fitView: FitView;
setCenter: SetCenter;
fitBounds: FitBounds;
project: Project;
screenToFlowCoordinate: Project;
flowToScreenCoordinate: Project;
screenToFlowPosition: (position: XYPosition) => XYPosition;
flowToScreenPosition: (position: XYPosition) => XYPosition;
viewportInitialized: boolean;
};
packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
+3 -3
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { getRectOfNodes } from '@xyflow/system';
import { getNodesBounds } from '@xyflow/system';
import { useStore } from '$lib/store';
import { Selection } from '$lib/components/Selection';
@@ -9,13 +9,13 @@
const { selectionRectMode, nodes } = store;
$: selectedNodes = $nodes.filter((n) => n.selected);
$: rect = getRectOfNodes(selectedNodes);
$: bounds = getNodesBounds(selectedNodes);
</script>
{#if selectedNodes && $selectionRectMode === 'nodes'}
<div
class="selection-wrapper nopan"
style="width: {rect.width}px; height: {rect.height}px; transform: translate({rect.x}px, {rect.y}px)"
style="width: {bounds.width}px; height: {bounds.height}px; transform: translate({bounds.x}px, {bounds.y}px)"
use:drag={{ disabled: false, store }}
>
<Selection width="100%" height="100%" x={0} y={0} />
packages/svelte/src/lib/hooks/useSvelteFlow.ts
+33 -42
View File
@@ -13,7 +13,7 @@ import {
type XYPosition,
type ZoomInOut,
type Rect,
getTransformForBounds,
getViewportForBounds,
getElementsToRemove,
rendererPointToPoint
} from '@xyflow/system';
@@ -45,8 +45,8 @@ export function useSvelteFlow(): {
nodesToRemove?: (Node | { id: Node['id'] })[],
edgesToRemove?: (Edge | { id: Edge['id'] })[]
) => { deletedNodes: Node[]; deletedEdges: Edge[] };
screenToFlowCoordinate: (position: XYPosition) => XYPosition;
flowToScreenCoordinate: (position: XYPosition) => XYPosition;
screenToFlowPosition: (position: XYPosition) => XYPosition;
flowToScreenPosition: (position: XYPosition) => XYPosition;
viewport: Writable<Viewport>;
getConnectedEdges: (id: string | (Node | { id: Node['id'] })[]) => Edge[];
getIncomers: (node: string | Node | { id: Node['id'] }) => Node[];
@@ -118,7 +118,7 @@ export function useSvelteFlow(): {
},
fitView,
fitBounds: (bounds: Rect, options?: FitBoundsOptions) => {
const [x, y, zoom] = getTransformForBounds(
const viewport = getViewportForBounds(
bounds,
get(width),
get(height),
@@ -127,14 +127,7 @@ export function useSvelteFlow(): {
options?.padding ?? 0.1
);
get(panZoom)?.setViewport(
{
x,
y,
zoom
},
{ duration: options?.duration }
);
get(panZoom)?.setViewport(viewport, { duration: options?.duration });
},
getIntersectingNodes: (
nodeOrRect: Node | { id: Node['id'] } | Rect,
@@ -201,45 +194,43 @@ export function useSvelteFlow(): {
deletedEdges: matchingEdges
};
},
screenToFlowCoordinate: (position: XYPosition) => {
screenToFlowPosition: (position: XYPosition) => {
const _domNode = get(domNode);
if (_domNode) {
const _snapGrid = get(snapGrid);
const { x, y, zoom } = get(viewport);
const { x: domX, y: domY } = _domNode.getBoundingClientRect();
const correctedPosition = {
x: position.x - domX,
y: position.y - domY
};
return pointToRendererPoint(
correctedPosition,
[x, y, zoom],
_snapGrid !== null,
_snapGrid || [1, 1]
);
if (!_domNode) {
return position;
}
return { x: 0, y: 0 };
const _snapGrid = get(snapGrid);
const { x, y, zoom } = get(viewport);
const { x: domX, y: domY } = _domNode.getBoundingClientRect();
const correctedPosition = {
x: position.x - domX,
y: position.y - domY
};
return pointToRendererPoint(
correctedPosition,
[x, y, zoom],
_snapGrid !== null,
_snapGrid || [1, 1]
);
},
flowToScreenCoordinate: (position: XYPosition) => {
flowToScreenPosition: (position: XYPosition) => {
const _domNode = get(domNode);
if (_domNode) {
const { x, y, zoom } = get(viewport);
const { x: domX, y: domY } = _domNode.getBoundingClientRect();
const rendererPosition = rendererPointToPoint(position, [x, y, zoom]);
return {
x: rendererPosition.x + domX,
y: rendererPosition.y + domY
};
if (!_domNode) {
return position;
}
return { x: 0, y: 0 };
const { x, y, zoom } = get(viewport);
const { x: domX, y: domY } = _domNode.getBoundingClientRect();
const rendererPosition = rendererPointToPoint(position, [x, y, zoom]);
return {
x: rendererPosition.x + domX,
y: rendererPosition.y + domY
};
},
getConnectedEdges: (node) => {
const nodeIds = new Set();
packages/svelte/src/lib/index.ts
+2 -2
View File
@@ -87,6 +87,6 @@ export {
getSmoothStepPath,
type GetStraightPathParams,
getStraightPath,
getTransformForBounds,
getRectOfNodes
getViewportForBounds,
getNodesBounds
} from '@xyflow/system';
packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+2 -2
View File
@@ -7,7 +7,7 @@
<script lang="ts">
import cc from 'classcat';
import { getBoundsOfRects, getNodePositionWithOrigin, getRectOfNodes } from '@xyflow/system';
import { getBoundsOfRects, getNodePositionWithOrigin, getNodesBounds } from '@xyflow/system';
import { useStore } from '$lib/store';
import { Panel } from '$lib/container/Panel';
@@ -64,7 +64,7 @@
width: $containerWidth / $viewport.zoom,
height: $containerHeight / $viewport.zoom
};
$: boundingRect = $nodes.length > 0 ? getBoundsOfRects(getRectOfNodes($nodes), viewBB) : viewBB;
$: boundingRect = $nodes.length > 0 ? getBoundsOfRects(getNodesBounds($nodes), viewBB) : viewBB;
$: elementWidth = width ?? defaultWidth;
$: elementHeight = height ?? defaultHeight;
$: scaledWidth = boundingRect.width / elementWidth;
packages/svelte/src/lib/store/initial-store.ts
+4 -5
View File
@@ -16,8 +16,8 @@ import {
devWarn,
type Viewport,
updateNodes,
getRectOfNodes,
getTransformForBounds
getNodesBounds,
getViewportForBounds
} from '@xyflow/system';
import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -69,9 +69,8 @@ export const getInitialStore = ({
width: node.size?.width,
height: node.size?.height
}));
const bounds = getRectOfNodes(nodesWithDimensions, [0, 0]);
const transform = getTransformForBounds(bounds, width, height, 0.5, 2, 0.1);
viewport = { x: transform[0], y: transform[1], zoom: transform[2] };
const bounds = getNodesBounds(nodesWithDimensions, [0, 0]);
viewport = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
}
return {
packages/system/src/utils/general.ts
+4 -3
View File
@@ -8,6 +8,7 @@ import type {
NodeOrigin,
SnapGrid,
Transform,
Viewport,
} from '../types';
import { getNodePositionWithOrigin } from './graph';
@@ -154,14 +155,14 @@ export const rendererPointToPoint = ({ x, y }: XYPosition, [tx, ty, tScale]: Tra
};
};
export const getTransformForBounds = (
export const getViewportForBounds = (
bounds: Rect,
width: number,
height: number,
minZoom: number,
maxZoom: number,
padding: number
): Transform => {
): Viewport => {
const xZoom = width / (bounds.width * (1 + padding));
const yZoom = height / (bounds.height * (1 + padding));
const zoom = Math.min(xZoom, yZoom);
@@ -171,7 +172,7 @@ export const getTransformForBounds = (
const x = width / 2 - boundsCenterX * clampedZoom;
const y = height / 2 - boundsCenterY * clampedZoom;
return [x, y, clampedZoom];
return { x, y, zoom: clampedZoom };
};
export const isMacOs = () => typeof navigator !== 'undefined' && navigator?.userAgent?.indexOf('Mac') >= 0;
packages/system/src/utils/graph.ts
+5 -5
View File
@@ -8,7 +8,7 @@ import {
rectToBox,
nodeToRect,
pointToRendererPoint,
getTransformForBounds,
getViewportForBounds,
} from './general';
import {
type Connection,
@@ -105,7 +105,7 @@ export const getNodePositionWithOrigin = (
};
};
export const getRectOfNodes = (nodes: NodeBase[], nodeOrigin: NodeOrigin = [0, 0]): Rect => {
export const getNodesBounds = (nodes: NodeBase[], nodeOrigin: NodeOrigin = [0, 0]): Rect => {
if (nodes.length === 0) {
return { x: 0, y: 0, width: 0, height: 0 };
}
@@ -195,9 +195,9 @@ export function fitView<Params extends FitViewParamsBase<NodeBase>, Options exte
});
if (filteredNodes.length > 0) {
const bounds = getRectOfNodes(filteredNodes, nodeOrigin);
const bounds = getNodesBounds(filteredNodes, nodeOrigin);
const [x, y, zoom] = getTransformForBounds(
const viewport = getViewportForBounds(
bounds,
width,
height,
@@ -206,7 +206,7 @@ export function fitView<Params extends FitViewParamsBase<NodeBase>, Options exte
options?.padding ?? 0.1
);
panZoom.setViewport({ x, y, zoom }, { duration: options?.duration });
panZoom.setViewport(viewport, { duration: options?.duration });
return true;
}
packages/system/src/xydrag/XYDrag.ts
+2 -2
View File
@@ -7,7 +7,7 @@ import {
getPointerPosition,
calcNextPosition,
snapPosition,
getRectOfNodes,
getNodesBounds,
rectToBox,
} from '../utils';
import { getDragItems, getEventHandlerParams, hasSelector, wrapSelectionDragFunc } from './utils';
@@ -119,7 +119,7 @@ export function XYDrag({
let nodesBox: Box = { x: 0, y: 0, x2: 0, y2: 0 };
if (dragItems.length > 1 && nodeExtent) {
const rect = getRectOfNodes(dragItems as unknown as NodeBase[], nodeOrigin);
const rect = getNodesBounds(dragItems as unknown as NodeBase[], nodeOrigin);
nodesBox = rectToBox(rect);
}