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

refactor(svelte/react): use edge layouting vanilla helpers

Browse Source
This commit is contained in:
moklick
2023-06-08 15:46:35 +02:00
parent 4707a07c8b
commit c1e2499028
21 changed files with 392 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+13 -13
View File
@@ -1,10 +1,10 @@
<script lang="ts">
import { createEventDispatcher, type SvelteComponentTyped } from 'svelte';
import { Position, getMarkerId } from '@xyflow/system';
import { getMarkerId } from '@xyflow/system';
import { useStore } from '$lib/store';
import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
import type { EdgeProps, EdgeLayouted } from '$lib/types';
import type { EdgeLayouted, EdgeProps } from '$lib/types';
type $$Props = EdgeLayouted;
@@ -12,14 +12,9 @@
export let type: $$Props['type'] = 'default';
export let source: $$Props['source'] = '';
export let target: $$Props['target'] = '';
export let sourceX: $$Props['sourceX'] = 0;
export let sourceY: $$Props['sourceY'] = 0;
export let targetX: $$Props['targetX'] = 0;
export let targetY: $$Props['targetY'] = 0;
export let data: $$Props['data'] = {};
export let style: $$Props['style'] = undefined;
export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
export let targetPosition: $$Props['targetPosition'] = Position.Top;
export let animated: $$Props['animated'] = false;
export let selected: $$Props['selected'] = false;
export let selectable: $$Props['selectable'] = true;
@@ -27,9 +22,14 @@
export let labelStyle: $$Props['labelStyle'] = undefined;
export let markerStart: $$Props['markerStart'] = undefined;
export let markerEnd: $$Props['markerEnd'] = undefined;
export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
export let targetHandleId: $$Props['targetHandleId'] = undefined;
export let sourceHandle: $$Props['sourceHandle'] = undefined;
export let targetHandle: $$Props['targetHandle'] = undefined;
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let sourcePosition: $$Props['sourcePosition'];
export let targetPosition: $$Props['targetPosition'];
// @ todo: support edge updates
const { edges, edgeTypes, flowId, addSelectedEdges } = useStore();
@@ -69,8 +69,8 @@
{labelStyle}
{data}
{style}
{sourceHandleId}
{targetHandleId}
sourceHandleId={sourceHandle}
targetHandleId={targetHandle}
markerStart={markerStartUrl}
markerEnd={markerEndUrl}
/>
packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
+16 -7
View File
@@ -3,16 +3,25 @@
import { MarkerDefinition } from '$lib/container/EdgeRenderer/MarkerDefinition';
import { useStore } from '$lib/store';
const { edgesLayouted, width, height } = useStore();
const { width, height, elementsSelectable, edgeTree } = useStore();
</script>
<svg width={$width} height={$height} class="svelte-flow__edges">
{#each $edgesLayouted as edge (edge.id)}
<EdgeWrapper {...edge} on:edge:click />
{/each}
{#each $edgeTree as group (group.level)}
<svg width={$width} height={$height} style="z-index: {group.level}" class="svelte-flow__edges">
{#if group.isMaxLevel} <MarkerDefinition />{/if}
<g>
{#each group.edges as edge (edge.id)}
{@const edgeType = edge.type || 'default'}
{@const selectable = !!(
edge.selectable ||
($elementsSelectable && typeof edge.selectable === 'undefined')
)}
<MarkerDefinition />
</svg>
<EdgeWrapper {...edge} type={edgeType} {selectable} on:edge:click />
{/each}
</g>
</svg>
{/each}
<style>
.svelte-flow__edges {
packages/svelte/src/lib/container/EdgeRenderer/utils.ts
-58
View File
@@ -1,58 +0,0 @@
import { getHandlePosition } from '@xyflow/system';
import {
type NodeHandleBounds,
type Rect,
type HandleElement,
Position,
internalsSymbol
} from '@xyflow/system';
import type { Node } from '$lib/types';
export function getNodeData(node?: Node): [Rect, NodeHandleBounds | null, boolean] {
const handleBounds = node?.[internalsSymbol]?.handleBounds || null;
const isValid =
handleBounds &&
node?.width &&
node?.height &&
typeof node?.positionAbsolute?.x !== 'undefined' &&
typeof node?.positionAbsolute?.y !== 'undefined';
return [
{
x: node?.positionAbsolute?.x || 0,
y: node?.positionAbsolute?.y || 0,
width: node?.width || 0,
height: node?.height || 0
},
handleBounds,
!!isValid
];
}
export type EdgePosition = {
sourceX: number;
sourceY: number;
targetX: number;
targetY: number;
};
export function getEdgePositions(
sourceNodeRect: Rect,
sourceHandle: HandleElement,
sourcePosition: Position,
targetNodeRect: Rect,
targetHandle: HandleElement,
targetPosition: Position
): EdgePosition {
const sourceHandlePos = getHandlePosition(sourcePosition, sourceNodeRect, sourceHandle);
const targetHandlePos = getHandlePosition(targetPosition, targetNodeRect, targetHandle);
return {
sourceX: sourceHandlePos.x,
sourceY: sourceHandlePos.y,
targetX: targetHandlePos.x,
targetY: targetHandlePos.y
};
}
packages/svelte/src/lib/store/edge-tree.ts
+88
View File
@@ -0,0 +1,88 @@
import { derived } from 'svelte/store';
import { groupEdgesByZLevel, isEdgeVisible, getEdgePosition, type OnError } from '@xyflow/system';
import type { EdgeLayouted } from '$lib/types';
import type { SvelteFlowStoreState } from './types';
export function getEdgeTree(store: SvelteFlowStoreState, onError: OnError) {
const visibleEdges = derived(
[
store.edges,
store.nodes,
store.onlyRenderVisibleElements,
store.transform,
store.width,
store.height
],
([edges, nodes, onlyRenderVisibleElements, transform, width, height]) => {
const visibleEdges = onlyRenderVisibleElements
? edges.filter((edge) => {
const sourceNode = nodes.find((node) => node.id === edge.source);
const targetNode = nodes.find((node) => node.id === edge.target);
return (
sourceNode?.width &&
sourceNode?.height &&
targetNode?.width &&
targetNode?.height &&
isEdgeVisible({
sourcePos: sourceNode.positionAbsolute || { x: 0, y: 0 },
targetPos: targetNode.positionAbsolute || { x: 0, y: 0 },
sourceWidth: sourceNode.width,
sourceHeight: sourceNode.height,
targetWidth: targetNode.width,
targetHeight: targetNode.height,
width,
height,
transform
})
);
})
: edges;
return visibleEdges;
}
);
return derived(
[visibleEdges, store.nodes, store.connectionMode],
([visibleEdges, nodes, connectionMode]) => {
const layoutedEdges = visibleEdges.reduce<EdgeLayouted[]>((res, edge) => {
const sourceNode = nodes.find((node) => node.id === edge.source);
const targetNode = nodes.find((node) => node.id === edge.target);
if (!sourceNode || !targetNode) {
return res;
}
const edgePosition = getEdgePosition({
id: edge.id,
sourceNode,
targetNode,
sourceHandle: edge.sourceHandle || null,
targetHandle: edge.targetHandle || null,
connectionMode,
onError
});
if (edgePosition) {
res.push({
...edge,
sourceX: edgePosition.sourceX,
sourceY: edgePosition.sourceY,
targetX: edgePosition.targetX,
targetY: edgePosition.targetY,
sourcePosition: edgePosition.sourcePosition,
targetPosition: edgePosition.targetPosition
});
}
return res;
}, []);
const groupedEdges = groupEdgesByZLevel<EdgeLayouted>(layoutedEdges, nodes, false);
return groupedEdges;
}
);
}
packages/svelte/src/lib/store/edges-layouted.ts
-69
View File
@@ -1,69 +0,0 @@
import { derived } from 'svelte/store';
import { Position, getHandle } from '@xyflow/system';
import { getEdgePositions, getNodeData } from '$lib/container/EdgeRenderer/utils';
import type { EdgeLayouted } from '$lib/types';
import type { SvelteFlowStoreState } from './types';
export function getEdgesLayouted(store: SvelteFlowStoreState) {
return derived(
[store.edges, store.nodes, store.elementsSelectable],
([edges, nodes, elementsSelectable]) => {
return edges.reduce<EdgeLayouted[]>((res, edge) => {
const sourceNode = nodes.find((node) => node.id === edge.source);
const targetNode = nodes.find((node) => node.id === edge.target);
const [sourceNodeRect, sourceHandleBounds, sourceIsValid] = getNodeData(sourceNode);
const [targetNodeRect, targetHandleBounds, targetIsValid] = getNodeData(targetNode);
if (!sourceIsValid || !targetIsValid) {
return res;
}
const edgeType = edge.type || 'default';
const targetNodeHandles = targetHandleBounds!.target;
const sourceHandle = getHandle(sourceHandleBounds!.source!, edge.sourceHandle);
const targetHandle = getHandle(targetNodeHandles!, edge.targetHandle);
const sourcePosition = sourceHandle?.position || Position.Bottom;
const targetPosition = targetHandle?.position || Position.Top;
if (!sourceHandle || !targetHandle) {
return res;
}
const { sourceX, sourceY, targetX, targetY } = getEdgePositions(
sourceNodeRect,
sourceHandle,
sourcePosition,
targetNodeRect,
targetHandle,
targetPosition
);
// we nee to do this to match the types
const sourceHandleId = edge.sourceHandle;
const targetHandleId = edge.targetHandle;
const selectable = !!(
edge.selectable ||
(elementsSelectable && typeof edge.selectable === 'undefined')
);
res.push({
...edge,
selectable,
type: edgeType,
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
sourceHandleId,
targetHandleId
} as EdgeLayouted);
return res;
}, []);
}
);
}
packages/svelte/src/lib/store/index.ts
+8 -3
View File
@@ -19,7 +19,6 @@ import {
import { addEdge as addEdgeUtil } from '$lib/utils';
import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions } from '$lib/types';
import { getEdgesLayouted } from './edges-layouted';
import { getConnectionPath } from './connection-path';
import {
initConnectionData,
@@ -29,6 +28,7 @@ import {
} from './initial-store';
import type { SvelteFlowStore } from './types';
import { syncNodeStores, syncEdgeStores } from './utils';
import { getEdgeTree } from './edge-tree';
export const key = Symbol();
@@ -332,12 +332,16 @@ export function createStore(): SvelteFlowStore {
cancelConnection();
}
function onError(id: string, msg: string) {
console.log(msg);
}
return {
// state
...store,
// derived state
edgesLayouted: getEdgesLayouted(store),
edgeTree: getEdgeTree(store, onError),
connectionPath: getConnectionPath(store),
markers: derived(
[store.edges, store.defaultMarkerColor, store.flowId],
@@ -364,7 +368,8 @@ export function createStore(): SvelteFlowStore {
panBy,
updateConnection,
cancelConnection,
reset
reset,
onError
};
}
packages/svelte/src/lib/store/initial-store.ts
+5 -3
View File
@@ -10,7 +10,8 @@ import {
type MarkerProps,
type PanZoomInstance,
type CoordinateExtent,
type IsValidConnection
type IsValidConnection,
type GroupedEdges
} from '@xyflow/system';
import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -47,7 +48,7 @@ export const getInitialStore = () => ({
flowId: writable<string | null>(null),
nodes: createNodes([]),
edges: createEdges([]),
edgesLayouted: readable<EdgeLayouted[]>([]),
edgeTree: readable<GroupedEdges<EdgeLayouted>[]>([]),
height: writable<number>(500),
width: writable<number>(500),
minZoom: writable<number>(0.5),
@@ -82,5 +83,6 @@ export const getInitialStore = () => ({
selectNodesOnDrag: writable<boolean>(true),
markers: readable<MarkerProps[]>([]),
defaultMarkerColor: writable<string>('#b1b1b7'),
lib: readable<string>('svelte')
lib: readable<string>('svelte'),
onlyRenderVisibleElements: writable<boolean>(false)
});
packages/svelte/src/lib/store/types.ts
+3 -1
View File
@@ -6,7 +6,8 @@ import type {
Connection,
UpdateNodePositions,
CoordinateExtent,
UpdateConnection
UpdateConnection,
OnError
} from '@xyflow/system';
import type { getInitialStore } from './initial-store';
@@ -33,6 +34,7 @@ export type SvelteFlowStoreActions = {
updateConnection: UpdateConnection;
cancelConnection: () => void;
reset(): void;
onError: OnError;
};
export type SvelteFlowStoreState = ReturnType<typeof getInitialStore>;
packages/svelte/src/lib/types/edges.ts
+20 -26
View File
@@ -4,7 +4,7 @@ import type {
BaseEdge,
BezierPathOptions,
DefaultEdgeOptionsBase,
Position,
EdgePosition,
SmoothStepPathOptions
} from '@xyflow/system';
@@ -39,30 +39,24 @@ export type Edge<T = any> =
| BezierEdgeType<T>
| StepEdgeType<T>;
export type EdgeLayouted = Omit<Edge, 'sourceHandle' | 'targetHandle'> & {
sourceX: number;
sourceY: number;
targetX: number;
targetY: number;
sourcePosition: Position;
targetPosition: Position;
sourceHandleId?: string;
targetHandleId?: string;
};
export type EdgeProps = Omit<Edge, 'sourceHandle' | 'targetHandle'> &
EdgePosition & {
sourceHandleId?: string | null;
targetHandleId?: string | null;
};
export type EdgeProps = Pick<
EdgeLayouted,
export type EdgeTypes = Record<string, typeof SvelteComponentTyped<EdgeProps>>;
export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
export type EdgeLayouted = Pick<
Edge,
| 'type'
| 'id'
| 'data'
| 'style'
| 'source'
| 'target'
| 'sourceX'
| 'sourceY'
| 'targetX'
| 'targetY'
| 'sourcePosition'
| 'targetPosition'
| 'animated'
| 'selected'
| 'selectable'
@@ -71,10 +65,10 @@ export type EdgeProps = Pick<
| 'interactionWidth'
| 'markerStart'
| 'markerEnd'
| 'sourceHandleId'
| 'targetHandleId'
>;
export type EdgeTypes = Record<string, typeof SvelteComponentTyped<EdgeProps>>;
export type DefaultEdgeOptions = DefaultEdgeOptionsBase<Edge>;
| 'sourceHandle'
| 'targetHandle'
> &
EdgePosition & {
sourceHandleId?: string | null;
targetHandleId?: string | null;
};
packages/svelte/src/routes/stress/+page.svelte
+2 -2
View File
@@ -9,8 +9,8 @@
type Edge
} from '../../lib/index';
const yNodes = 20;
const xNodes = 20;
const yNodes = 25;
const xNodes = 25;
const nodeItems: Node[] = [];
const edgeItems: Edge[] = [];
packages/svelte/src/routes/subflows/+page.svelte
+2 -2
View File
@@ -105,8 +105,8 @@
// },
},
{ id: 'e1-3', source: '1', target: '3' },
{ id: 'e3-4', source: '3', target: '4', zIndex: 100 },
{ id: 'e3-4b', source: '3', target: '4b' },
{ id: 'e3-4', source: '3', target: '4' },
{ id: 'e3-4b', source: '3', target: '4b', zIndex: 100 },
{ id: 'e4a-4b1', source: '4a', target: '4b1' },
{ id: 'e4a-4b2', source: '4a', target: '4b2', zIndex: 100 },
{ id: 'e4b1-4b2', source: '4b1', target: '4b2' }