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

Merge branch 'xyflow' into feat/ssr

Browse Source
This commit is contained in:
moklick
2023-10-05 20:31:55 +02:00
parent 0888f69909 5313a9bfcc
commit d78b2aad6f
21 changed files with 602 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
+2 -2
View File
@@ -12,11 +12,11 @@
{#if $connection.path}
<svg width={$width} height={$height} class="svelte-flow__connectionline" style={containerStyle}>
<g class={cc(['svelte-flow__connection', $connection.status])} {style}>
<g class={cc(['svelte-flow__connection', $connection.status])}>
<slot name="connectionLine" />
<!-- slot fallbacks do not work if slots are forwarded in parent -->
{#if !isCustomComponent}
<path d={$connection.path} fill="none" class="svelte-flow__connection-path" />
<path d={$connection.path} {style} fill="none" class="svelte-flow__connection-path" />
{/if}
</g>
</svg>
packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+2
View File
@@ -1,3 +1,5 @@
<svelte:options immutable />
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import { getMarkerId } from '@xyflow/system';
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+2
View File
@@ -1,3 +1,5 @@
<svelte:options immutable />
<script lang="ts">
import {
createEventDispatcher,
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+6 -3
View File
@@ -74,15 +74,16 @@
export { className as class };
let domNode: HTMLDivElement;
let clientWidth: number;
let clientHeight: number;
const store = hasContext(key)
? useStore()
: createStoreContext({ nodes: get(nodes), edges: get(edges), width, height });
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);
@@ -146,6 +147,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
+199 -22
View File
@@ -1,17 +1,25 @@
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 { FitViewOptions } from '$lib/types';
import type { SvelteFlowStore } from '$lib/store/types';
import type { Edge, FitViewOptions, Node } from '$lib/types';
export function useSvelteFlow(): {
zoomIn: ZoomInOut;
@@ -22,10 +30,27 @@ 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[];
} {
const {
zoomIn,
@@ -35,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,
@@ -62,30 +104,165 @@ 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,
viewport: viewport
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) {
node.forEach((n) => {
nodeIds.add(n.id);
});
}
return get(edges).filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target));
},
getIncomers: (node) => {
const _node = typeof node === 'string' ? { id: node } : node;
return getIncomersBase(_node, get(nodes), get(edges));
},
getOutgoers: (node) => {
const _node = typeof node === 'string' ? { id: node } : node;
return getOutgoersBase(_node, get(nodes), get(edges));
},
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;
}