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

refactor(utils): add getElementsToRemove and use in react and svelte packages

Browse Source
This commit is contained in:
moklick
2023-03-02 13:19:21 +01:00
parent e2961bfa8c
commit 3b83e029e6
9 changed files with 117 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/components/Handle/Handle.svelte
-3
View File
@@ -40,9 +40,6 @@
function onConnectExtended(params: Connection) {
addEdge(params);
// @todo add props
// onConnectAction?.(edgeParams);
// onConnect?.(edgeParams);
dispatchEvent('connect')
}
packages/svelte/src/lib/container/Pane/Pane.svelte
+2 -2
View File
@@ -62,7 +62,7 @@
$: hasActiveSelection = elementsSelectable && (isSelecting || $selectionRectMode === 'user');
function onClick(event: MouseEvent) {
dispatch('pane:click');
dispatch('pane:click', event);
resetSelectedElements();
selectionRectMode.set(null);
@@ -164,7 +164,7 @@
// return;
// }
dispatch('pane:contextmenu');
dispatch('pane:contextmenu', event);
};
</script>
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+7 -10
View File
@@ -28,11 +28,12 @@
export let edgeTypes: $$Props['edgeTypes'] = undefined;
export let selectionKey: $$Props['selectionKey'] = undefined;
export let deleteKey: $$Props['deleteKey'] = undefined;
export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined;
export let connectionRadius: $$Props['connectionRadius'] = undefined;
export let connectionLineType: $$Props['connectionLineType'] = undefined
export let style: $$Props['style'] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
const dispatch = createEventDispatcher<{ 'on:nodeclick': number }>();
let domNode: HTMLDivElement;
@@ -41,7 +42,6 @@
nodeTypes
});
setContext(key, {
getStore: () => store
});
@@ -66,19 +66,15 @@
const updatableProps = {
id,
connectionLineType,
connectionRadius,
defaultEdgeOptions
};
Object.keys(updatableProps).forEach(prop => {
// @ts-ignore
if (updatableProps[prop] !== undefined) {
// @ts-ignore
if (!store[prop]) {
// @ts-ignore
console.warn(store[prop], prop, 'ups')
} else {
// @ts-ignore
store[prop].set(updatableProps[prop]);
}
}
})
}
@@ -111,9 +107,10 @@
</script>
<div
bind:this={domNode}
style={style}
class={cc(['svelte-flow', className])}
data-testid="rf__wrapper"
bind:this={domNode}
>
<KeyHandler {selectionKey} {deleteKey} />
<Zoom {initialViewport}>
packages/svelte/src/lib/container/SvelteFlow/types.ts
+11 -4
View File
@@ -1,4 +1,10 @@
import type { ConnectionLineType, NodeOrigin, Viewport } from '@reactflow/system';
import type {
Connection,
ConnectionLineType,
NodeOrigin,
OnConnectStartParams,
Viewport
} from '@reactflow/system';
import type {
Edge,
@@ -24,6 +30,7 @@ export type SvelteFlowProps = {
maxZoom?: number;
initialViewport?: Viewport;
defaultEdgeOptions?: DefaultEdgeOptions;
connectionRadius?: number;
class?: string;
style?: string;
@@ -37,9 +44,9 @@ export type SvelteFlowEvents = {
'node:mousemove': CustomEvent<Node>;
'node:mouseleave': CustomEvent<Node>;
'edge:click': CustomEvent<Edge>;
'connect:start': CustomEvent<number>;
connect: CustomEvent<number>;
'connect:end': CustomEvent<number>;
'connect:start': CustomEvent<OnConnectStartParams>;
connect: CustomEvent<Connection>;
'connect:end': CustomEvent<OnConnectStartParams>;
'pane:click': CustomEvent;
'pane:contextmenu': CustomEvent;
};
packages/svelte/src/lib/store/index.ts
+25 -34
View File
@@ -12,7 +12,12 @@ import {
type XYPosition,
type CoordinateExtent
} from '@reactflow/system';
import { fitView as fitViewUtil, getD3Transition, getDimensions } from '@reactflow/utils';
import {
fitView as fitViewUtil,
getD3Transition,
getDimensions,
getElementsToRemove
} from '@reactflow/utils';
import { getHandleBounds, getConnectedEdges, addEdge as addEdgeUtil } from '$lib/utils';
import type { EdgeTypes, NodeTypes, Node, Edge, ConnectionData } from '$lib/types';
@@ -59,12 +64,16 @@ export function createStore({ fitView: fitViewOnInit = false }: CreateStoreProps
}
function setEdges(edges: Edge[]) {
store.edges.set(edges);
const defaultEdgeOptions = get(store.defaultEdgeOptions);
const nextEdges = defaultEdgeOptions
? edges.map((e) => ({ ...defaultEdgeOptions, ...e }))
: edges;
store.edges.set(nextEdges);
}
function addEdge(edgeParams: Edge | Connection) {
const edges = get(store.edges);
store.edges.set(addEdgeUtil(edgeParams, edges));
setEdges(addEdgeUtil(edgeParams, edges));
}
function setNodes(nodes: Node[]) {
@@ -229,38 +238,20 @@ export function createStore({ fitView: fitViewOnInit = false }: CreateStoreProps
const selectedNodes = nodes.filter((node) => node.selected);
const selectedEdges = edges.filter((edge) => edge.selected);
// @todo can we put this stuff into @reactflow/utils?
const nodeIds = selectedNodes.map((node) => node.id);
const edgeIds = selectedEdges.map((edge) => edge.id);
const nodesToRemove = nodes.reduce<Node[]>((res, node) => {
const parentHit =
!nodeIds.includes(node.id) &&
node.parentNode &&
res.find((n) => n.id === node.parentNode);
const deletable = typeof node.deletable === 'boolean' ? node.deletable : true;
if (deletable && (nodeIds.includes(node.id) || parentHit)) {
res.push(node);
}
const { matchingNodes, matchingEdges } = getElementsToRemove<Node, Edge>({
nodesToRemove: selectedNodes,
edgesToRemove: selectedEdges,
nodes,
edges
});
return res;
}, []);
const deletableEdges = edges.filter((e) =>
typeof e.deletable === 'boolean' ? e.deletable : true
);
const initialHitEdges = deletableEdges.filter((e) => edgeIds.includes(e.id));
if (nodesToRemove || initialHitEdges) {
const connectedEdges = getConnectedEdges(nodesToRemove, deletableEdges);
const edgesToRemove = [...initialHitEdges, ...connectedEdges];
const edgeIdsToRemove = edgesToRemove.reduce<string[]>((res, edge) => {
if (!res.includes(edge.id)) {
res.push(edge.id);
}
return res;
}, []);
store.nodes.update((nds) => nds.filter((node) => !nodeIds.includes(node.id)));
store.edges.update((eds) => eds.filter((edge) => !edgeIdsToRemove.includes(edge.id)));
if (matchingNodes.length || matchingEdges.length) {
store.nodes.update((nds) =>
nds.filter((node) => !matchingNodes.some((mN) => mN.id === node.id))
);
store.edges.update((eds) =>
eds.filter((edge) => !matchingEdges.some((mE) => mE.id === edge.id))
);
}
}
});
packages/svelte/src/lib/store/initial-store.ts
+10 -1
View File
@@ -16,7 +16,15 @@ import OutputNode from '$lib/components/nodes/OutputNode.svelte';
import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
import type { Node, Edge, ConnectionData, NodeTypes, EdgeTypes, EdgeLayouted } from '$lib/types';
import type {
Node,
Edge,
ConnectionData,
NodeTypes,
EdgeTypes,
EdgeLayouted,
DefaultEdgeOptions
} from '$lib/types';
export const initConnectionData = {
nodeId: null,
@@ -52,6 +60,7 @@ export const initialStoreState = {
zoom: null,
selection: null
}),
defaultEdgeOptions: writable<DefaultEdgeOptions | null>(null),
dragging: writable<boolean>(false),
selectionRect: writable<SelectionRect | null>(null),
selectionKeyPressed: writable<boolean>(false),
packages/svelte/src/routes/+page.svelte
+2 -1
View File
@@ -128,6 +128,7 @@
minZoom={0.1}
maxZoom={2.5}
initialViewport={{ x: 100, y: 100, zoom: 2 }}
defaultEdgeOptions={{ animated: true }}
on:node:click={(event) => console.log('on node click', event)}
on:node:mouseenter={(event) => console.log('on node enter', event)}
on:node:mouseleave={(event) => console.log('on node leave', event)}
@@ -136,7 +137,7 @@
on:connect={(event) => console.log('on connect', event)}
on:connect:end={(event) => console.log('on connect end', event)}
on:pane:click={(event) => console.log('on pane click', event)}
on:pane:contextmenu={(event) => { console.log('on pane contextmenu', event); }}
on:pane:contextmenu={(event) => { event.preventDefault(); console.log('on pane contextmenu', event); }}
>
<Controls />
<Background variant={BackgroundVariant.Dots} />