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

Merge branch 'xyflow' into get-connected-edges

Browse Source
This commit is contained in:
moklick
2023-10-05 20:22:41 +02:00
parent 6fd9d19797 e3660a2c4b
commit 8467932aad
17 changed files with 496 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/hooks/useReactFlow.ts
+2
View File
@@ -172,6 +172,8 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
}
}
}
return { deletedNodes: matchingNodes, deletedEdges: matchingEdges };
}, []);
const getNodeRect = useCallback(
packages/react/src/hooks/useViewportHelper.ts
+37 -1
View File
@@ -1,5 +1,11 @@
import { useMemo } from 'react';
import { pointToRendererPoint, getTransformForBounds, fitView, type XYPosition } from '@xyflow/system';
import {
pointToRendererPoint,
getTransformForBounds,
fitView,
type XYPosition,
rendererPointToPoint,
} from '@xyflow/system';
import { useStoreApi, useStore } from '../hooks/useStore';
import type { ViewportHelperFunctions, ReactFlowState } from '../types';
@@ -85,6 +91,36 @@ const useViewportHelper = (): ViewportHelperFunctions => {
const { transform, snapToGrid, snapGrid } = store.getState();
return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
},
screenToFlowCoordinate: (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]);
}
return { x: 0, y: 0 };
},
flowToScreenCoordinate: (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,
};
}
return { x: 0, y: 0 };
},
viewportInitialized: panZoomInitialized,
};
}, [panZoomInitialized]);
packages/react/src/types/general.ts
+2
View File
@@ -55,5 +55,7 @@ export type ViewportHelperFunctions = {
setCenter: SetCenter;
fitBounds: FitBounds;
project: Project;
screenToFlowCoordinate: Project;
flowToScreenCoordinate: Project;
viewportInitialized: boolean;
};
packages/react/src/types/instance.ts
+4 -1
View File
@@ -28,7 +28,10 @@ export namespace Instance {
export type GetEdge<EdgeData> = (id: string) => Edge<EdgeData> | undefined;
export type AddEdges<EdgeData> = (payload: Edge<EdgeData>[] | Edge<EdgeData>) => void;
export type ToObject<NodeData = any, EdgeData = any> = () => ReactFlowJsonObject<NodeData, EdgeData>;
export type DeleteElements = ({ nodes, edges }: DeleteElementsOptions) => void;
export type DeleteElements = ({ nodes, edges }: DeleteElementsOptions) => {
deletedNodes: Node[];
deletedEdges: Edge[];
};
export type GetIntersectingNodes<NodeData> = (
node: (Partial<Node<NodeData>> & { id: Node['id'] }) | Rect,
partially?: boolean,
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+6 -3
View File
@@ -71,13 +71,14 @@
export { className as class };
let domNode: HTMLDivElement;
let clientWidth: number;
let clientHeight: number;
const store = hasContext(key) ? useStore() : createStoreContext();
onMount(() => {
const { width, height } = domNode.getBoundingClientRect();
store.width.set(width);
store.height.set(height);
store.width.set(clientWidth);
store.height.set(clientHeight);
store.domNode.set(domNode);
store.syncNodeStores(nodes);
@@ -141,6 +142,8 @@
<div
bind:this={domNode}
bind:clientWidth
bind:clientHeight
{style}
class={cc(['svelte-flow', className])}
data-testid="svelte-flow__wrapper"
packages/svelte/src/lib/hooks/useNodesEdges.ts
+11
View File
@@ -0,0 +1,11 @@
import { useStore } from '$lib/store';
export function useNodes() {
const { nodes } = useStore();
return nodes;
}
export function useEdges() {
const { edges } = useStore();
return edges;
}
packages/svelte/src/lib/hooks/useSvelteFlow.ts
+176 -38
View File
@@ -2,18 +2,24 @@ import { get, type Writable } from 'svelte/store';
import {
getIncomersBase,
getOutgoersBase,
getOverlappingArea,
isRectObject,
nodeToRect,
pointToRendererPoint,
type Project,
type FitBoundsOptions,
type SetCenterOptions,
type Viewport,
type ViewportHelperFunctionOptions,
type XYPosition,
type ZoomInOut
type ZoomInOut,
type Rect,
getTransformForBounds,
getElementsToRemove,
rendererPointToPoint
} from '@xyflow/system';
import { useStore } from '$lib/store';
import type { Edge, FitViewOptions, Node } from '$lib/types';
import type { SvelteFlowStore } from '$lib/store/types';
export function useSvelteFlow(): {
zoomIn: ZoomInOut;
@@ -24,10 +30,24 @@ export function useSvelteFlow(): {
setViewport: (viewport: Viewport, options?: ViewportHelperFunctionOptions) => void;
getViewport: () => Viewport;
fitView: (options?: FitViewOptions) => void;
project: Project;
getIntersectingNodes: (
nodeOrRect: (Partial<Node> & { id: Node['id'] }) | Rect,
partially?: boolean,
nodesToIntersect?: Node[]
) => Node[];
isNodeIntersecting: (
nodeOrRect: (Partial<Node> & { id: Node['id'] }) | Rect,
area: Rect,
partially?: boolean
) => boolean;
fitBounds: (bounds: Rect, options?: FitBoundsOptions) => void;
deleteElements: (
nodesToRemove?: Partial<Node> & { id: string }[],
edgesToRemove?: Partial<Edge> & { id: string }[]
) => { deletedNodes: Node[]; deletedEdges: Edge[] };
screenToFlowCoordinate: (position: XYPosition) => XYPosition;
flowToScreenCoordinate: (position: XYPosition) => XYPosition;
viewport: Writable<Viewport>;
nodes: SvelteFlowStore['nodes'];
edges: SvelteFlowStore['edges'];
getConnectedEdges: (id: string | (Partial<Node> & { id: Node['id'] })[]) => Edge[];
getIncomers: (node: string | (Partial<Node> & { id: Node['id'] })) => Node[];
getOutgoers: (node: string | (Partial<Node> & { id: Node['id'] })) => Node[];
@@ -40,12 +60,29 @@ export function useSvelteFlow(): {
viewport,
width,
height,
minZoom,
maxZoom,
panZoom,
nodes,
edges
edges,
domNode
} = useStore();
const getNodeRect = (
nodeOrRect: (Partial<Node> & { id: Node['id'] }) | Rect
): [Rect | null, Node | null | undefined, boolean] => {
const isRect = isRectObject(nodeOrRect);
const node = isRect ? null : get(nodes).find((n) => n.id === nodeOrRect.id);
if (!isRect && !node) {
return [null, null, isRect];
}
const nodeRect = isRect ? nodeOrRect : nodeToRect(node!);
return [nodeRect, node, isRect];
};
return {
zoomIn,
zoomOut,
@@ -67,34 +104,145 @@ export function useSvelteFlow(): {
},
getViewport: () => get(viewport),
setCenter: (x, y, options) => {
const _width = get(width);
const _height = get(height);
const _maxZoom = get(maxZoom);
const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : _maxZoom;
const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : get(maxZoom);
get(panZoom)?.setViewport(
{
x: _width / 2 - x * nextZoom,
y: _height / 2 - y * nextZoom,
x: get(width) / 2 - x * nextZoom,
y: get(height) / 2 - y * nextZoom,
zoom: nextZoom
},
{ duration: options?.duration }
);
},
fitView,
project: (position: XYPosition) => {
const _snapGrid = get(snapGrid);
const { x, y, zoom } = get(viewport);
fitBounds: (bounds: Rect, options?: FitBoundsOptions) => {
const [x, y, zoom] = getTransformForBounds(
bounds,
get(width),
get(height),
get(minZoom),
get(maxZoom),
options?.padding ?? 0.1
);
return pointToRendererPoint(position, [x, y, zoom], _snapGrid !== null, _snapGrid || [1, 1]);
get(panZoom)?.setViewport(
{
x,
y,
zoom
},
{ duration: options?.duration }
);
},
nodes,
edges,
getConnectedEdges: (node) => {
const _edges = get(edges);
getIntersectingNodes: (
nodeOrRect: (Partial<Node> & { id: Node['id'] }) | Rect,
partially = true,
nodesToIntersect?: Node[]
) => {
const [nodeRect, node, isRect] = getNodeRect(nodeOrRect);
if (!nodeRect || !node) {
return [];
}
return (nodesToIntersect || get(nodes)).filter((n) => {
if (!isRect && (n.id === node.id || !n.positionAbsolute)) {
return false;
}
const currNodeRect = nodeToRect(n);
const overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
const partiallyVisible = partially && overlappingArea > 0;
return partiallyVisible || overlappingArea >= nodeOrRect.width! * nodeOrRect.height!;
});
},
isNodeIntersecting: (
nodeOrRect: (Partial<Node> & { id: Node['id'] }) | Rect,
area: Rect,
partially = true
) => {
const [nodeRect] = getNodeRect(nodeOrRect);
if (!nodeRect) {
return false;
}
const overlappingArea = getOverlappingArea(nodeRect, area);
const partiallyVisible = partially && overlappingArea > 0;
return partiallyVisible || overlappingArea >= nodeOrRect.width! * nodeOrRect.height!;
},
deleteElements: (
nodesToRemove: Partial<Node> & { id: string }[] = [],
edgesToRemove: Partial<Edge> & { id: string }[] = []
) => {
const _nodes = get(nodes);
const _edges = get(edges);
const { matchingNodes, matchingEdges } = getElementsToRemove<Node, Edge>({
nodesToRemove,
edgesToRemove,
nodes: _nodes,
edges: _edges
});
if (matchingNodes) {
nodes.set(_nodes.filter((node) => !matchingNodes.some(({ id }) => id === node.id)));
}
if (matchingEdges) {
edges.set(_edges.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id)));
}
return {
deletedNodes: matchingNodes,
deletedEdges: matchingEdges
};
},
screenToFlowCoordinate: (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]
);
}
return { x: 0, y: 0 };
},
flowToScreenCoordinate: (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
};
}
return { x: 0, y: 0 };
},
getConnectedEdges: (node) => {
const nodeIds = new Set();
if (typeof node === 'string') {
nodeIds.add(node);
} else if (node.length >= 1) {
@@ -103,28 +251,18 @@ export function useSvelteFlow(): {
});
}
return _edges.filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target));
return get(edges).filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target));
},
getIncomers: (node) => {
const _edges = get(edges);
const _nodes = get(nodes);
const _node = typeof node === 'string' ? { id: node } : node;
if (typeof node === 'string') {
return getIncomersBase({ id: node }, _nodes, _edges);
}
return getIncomersBase(node, _nodes, _edges);
return getIncomersBase(_node, get(nodes), get(edges));
},
getOutgoers: (node) => {
const _edges = get(edges);
const _nodes = get(nodes);
const _node = typeof node === 'string' ? { id: node } : node;
if (typeof node == 'string') {
return getOutgoersBase({ id: node }, _nodes, _edges);
}
return getOutgoersBase(node, _nodes, _edges);
return getOutgoersBase(_node, get(nodes), get(edges));
},
viewport: viewport
viewport
};
}
packages/svelte/src/lib/index.ts
+3
View File
@@ -19,9 +19,12 @@ export { useStore } from '$lib/store';
// utils
export * from '$lib/utils';
//hooks
export * from '$lib/hooks/useSvelteFlow';
export * from '$lib/hooks/useUpdateNodeInternals';
export * from '$lib/hooks/useConnection';
export * from '$lib/hooks/useNodesEdges';
// types
export type { Edge, EdgeProps, EdgeTypes, DefaultEdgeOptions } from '$lib/types/edges';
packages/svelte/src/styles/style.css
+1
View File
@@ -5,4 +5,5 @@
.svelte-flow__edge-label {
text-align: center;
position: absolute;
font-size: 10px;
}