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

feat(svelte): make nodes deletable

Browse Source
This commit is contained in:
moklick
2023-02-23 13:44:57 +01:00
parent 658366e67f
commit bb528e6798
12 changed files with 167 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/components/KeyHandler/KeyHandler.d.ts
Vendored
+6
View File
@@ -0,0 +1,6 @@
import { KeyDefinition } from '$lib/types';
export type KeyHandlerProps = {
selectionKey?: KeyDefinition;
deleteKey?: KeyDefinition;
};
packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
+43
View File
@@ -0,0 +1,43 @@
<script lang="ts">
import { shortcut } from '@svelte-put/shortcut';
import { useStore } from '$lib/store';
import type { KeyHandlerProps } from './KeyHandler'
import type { KeyDefinition, KeyDefinitionObject } from '$lib/types';
const { selectionKeyPressedStore, deleteKeyPressedStore } = useStore();
type $$Props = KeyHandlerProps;
export let selectionKey: $$Props['selectionKey'] = 'Shift';
export let deleteKey: $$Props['deleteKey'] = 'Backspace';
function isKeyObject(key?: KeyDefinition): key is KeyDefinitionObject {
return typeof key === 'object';
}
$: selectionKeyString = typeof selectionKey === 'string' ? selectionKey : selectionKey!.key;
$: selectionKeyModifier = isKeyObject(selectionKey) ? selectionKey?.modifier : [];
$: deleteKeyString = typeof deleteKey === 'string' ? deleteKey : deleteKey!.key;
$: deleteKeyModifier = isKeyObject(deleteKey) ? deleteKey?.modifier : [];
</script>
<svelte:window
use:shortcut={{
trigger: [{ key: selectionKeyString, modifier: selectionKeyModifier, callback: () => selectionKeyPressedStore.set(true) }],
type: 'keydown'
}}
use:shortcut={{
trigger: [{ key: selectionKeyString, modifier: selectionKeyModifier, callback: () => selectionKeyPressedStore.set(false) }],
type: 'keyup'
}}
use:shortcut={{
trigger: [{ key: deleteKeyString, modifier: deleteKeyModifier, callback: () => deleteKeyPressedStore.set(true) }],
type: 'keydown'
}}
use:shortcut={{
trigger: [{ key: deleteKeyString, modifier: deleteKeyModifier, callback: () => deleteKeyPressedStore.set(false) }],
type: 'keyup'
}}
/>
packages/svelte/src/lib/components/KeyHandler/index.svelte
-26
View File
@@ -1,26 +0,0 @@
<script lang="ts">
import { shortcut } from '@svelte-put/shortcut';
import { useStore } from '$lib/store';
const { selectionKeyPressedStore } = useStore();
function onSelectionKeyDown() {
selectionKeyPressedStore.set(true);
}
function onSelectionKeyUp() {
selectionKeyPressedStore.set(false);
}
</script>
<svelte:window
use:shortcut={{
trigger: [{ key: 'Shift', callback: onSelectionKeyDown }],
type: 'keydown'
}}
use:shortcut={{
trigger: [{ key: 'Shift', callback: onSelectionKeyUp }],
type: 'keyup'
}}
/>
packages/svelte/src/lib/components/KeyHandler/index.ts
+2
View File
@@ -0,0 +1,2 @@
export { default as KeyHandler } from './KeyHandler.svelte';
export type { KeyHandlerProps } from './KeyHandler';
packages/svelte/src/lib/components/nodes/BaseNode.svelte
+24 -3
View File
@@ -23,14 +23,16 @@
export let type: WrapNodeProps['type'] = 'default';
export let sourcePosition: WrapNodeProps['sourcePosition'] = Position.Bottom;
export let targetPosition: WrapNodeProps['targetPosition'] = Position.Top;
let className: string = '';
export { className as class };
let nodeRef: HTMLDivElement;
const { nodesStore, transformStore, updateNodePositions, nodeTypesStore } = useStore();
const { nodesStore, transformStore, nodeTypesStore, updateNodePositions, addSelectedNodes } = useStore();
const nodeComponent: typeof SvelteComponentTyped<Partial<NodeProps>> = $nodeTypesStore[type] || DefaultNode;
const isSelectable = true;
const selectNodesOnDrag = false;
const isDraggable = true;
setContext('rf_nodeid', id);
@@ -41,6 +43,18 @@
resizeObserver?.unobserve(nodeRef);
}
});
function onSelectNodeHandler(event: MouseEvent) {
if (isSelectable && (!selectNodesOnDrag || !isDraggable)) {
// this handler gets called within the drag start event when selectNodesOnDrag=true
addSelectedNodes([id]);
}
// if (onClick) {
// const node = store.getState().nodeInternals.get(id)!;
// onClick(event, { ...node });
// }
};
</script>
<div
@@ -48,7 +62,9 @@
class={cc(['react-flow__node', `react-flow__node-${type}`, className])}
class:initializing={!width && !height}
class:dragging={dragging}
class:selected={selected}
bind:this={nodeRef}
on:click={onSelectNodeHandler}
style:transform={`translate(${positionAbsolute.x}px, ${positionAbsolute.y}px)`}
{style}
data-id={id}
@@ -82,6 +98,11 @@
user-select: none;
}
.selected {
outline: none;
box-shadow: 0 0 0 0.5px #1a192b;
}
.dragging {
cursor: grabbing;
}
packages/svelte/src/lib/container/EdgeRenderer/index.svelte
+1 -1
View File
@@ -10,7 +10,7 @@
width={$widthStore}
height={$heightStore}
class="react-flow__edges react-flow__container"
>
>
{#each $edgesWithDataStore as edge (edge.id)}
<Edge {...edge} />
{/each}
packages/svelte/src/lib/container/NodeRenderer/index.svelte
+3 -4
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { onDestroy } from 'svelte';
import Node from '$lib/components/nodes/BaseNode.svelte';
import BaseNode from '$lib/components/nodes/BaseNode.svelte';
import { useStore } from '$lib/store';
const { nodesStore, updateNodeDimensions } = useStore();
@@ -18,12 +18,11 @@
onDestroy(() => {
resizeObserver?.disconnect();
});
</script>
<div class="react-flow__nodes">
{#each $nodesStore as node}
<Node {...node} {resizeObserver} />
{#each $nodesStore as node (node.id)}
<BaseNode {...node} {resizeObserver} />
{/each}
</div>
packages/svelte/src/lib/container/SvelteFlow.svelte
+6 -3
View File
@@ -10,16 +10,19 @@
import EdgeRenderer from '$lib/container/EdgeRenderer/index.svelte';
import UserSelection from '$lib/components/UserSelection/index.svelte';
import NodeSelection from '$lib/components/NodeSelection/index.svelte';
import KeyHandler from '$lib/components/KeyHandler/index.svelte';
import { KeyHandler } from '$lib/components/KeyHandler';
import type { SvelteFlowProps } from '$lib/types';
interface $$Props extends SvelteFlowProps {}
type $$Props = SvelteFlowProps;
export let id: $$Props['id'] = '1';
export let nodes: $$Props['nodes'] = [];
export let edges: $$Props['edges'] = [];
export let fitView: $$Props['fitView'] = undefined;
export let nodeTypes: $$Props['nodeTypes'] = undefined;
export let selectionKey: $$Props['selectionKey'] = undefined;
export let deleteKey: $$Props['deleteKey'] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
@@ -61,7 +64,7 @@
id={id}
bind:this={domNode}
>
<KeyHandler />
<KeyHandler {selectionKey} {deleteKey} />
<Zoom>
<Pane>
<Viewport>
packages/svelte/src/lib/store/index.ts
+68 -2
View File
@@ -13,7 +13,7 @@ import {
type SelectionRect,
type Node as RFNode
} from '@reactflow/system';
import { fitView, getD3Transition, getDimensions } from '@reactflow/utils';
import { fitView, getConnectedEdges, getD3Transition, getDimensions } from '@reactflow/utils';
import { getHandleBounds } from '../../utils';
import {
@@ -65,6 +65,7 @@ type SvelteFlowStore = {
selectionRectModeStore: Writable<string | null>;
selectionMode: Writable<SelectionMode>;
selectionKeyPressedStore: Writable<boolean>;
deleteKeyPressedStore: Writable<boolean>;
nodeTypesStore: Writable<NodeTypes>;
edgeTypesStore: Writable<EdgeTypes>;
setNodes: (nodes: Node[]) => void;
@@ -79,6 +80,7 @@ type SvelteFlowStore = {
) => void;
updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void;
resetSelectedElements: () => void;
addSelectedNodes: (ids: string[]) => void;
};
export function createStore({
@@ -102,6 +104,8 @@ export function createStore({
const draggingStore = writable(false);
const selectionRectStore = writable(null);
const selectionKeyPressedStore = writable(false);
const multiselectionKeyPressedStore = writable(false);
const deleteKeyPressedStore = writable(false);
const selectionRectModeStore = writable(null);
const selectionMode = writable(SelectionMode.Partial);
const nodeTypesStore = writable({
@@ -310,6 +314,66 @@ export function createStore({
edgesStore.update((es) => es.map(resetSelectedItem));
}
deleteKeyPressedStore.subscribe((deleteKeyPressed) => {
if (deleteKeyPressed) {
const nodes = get(nodesStore);
const edges = get(edgesStore);
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);
}
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 as RFNode[], deletableEdges);
const edgesToRemove = [...initialHitEdges, ...connectedEdges];
const edgeIdsToRemove = edgesToRemove.reduce<string[]>((res, edge) => {
if (!res.includes(edge.id)) {
res.push(edge.id);
}
return res;
}, []);
nodesStore.update((nds) => nds.filter((node) => !nodeIds.includes(node.id)));
edgesStore.update((eds) => eds.filter((edge) => !edgeIdsToRemove.includes(edge.id)));
}
}
});
function addSelectedNodes(ids: string[]) {
selectionRectStore.set(null);
if (get(multiselectionKeyPressedStore)) {
// @todo handle multiselection key
}
nodesStore.update((ns) =>
ns.map((node) => {
return {
...node,
selected: ids.includes(node.id)
};
})
);
}
return {
nodesStore,
edgesStore,
@@ -323,6 +387,7 @@ export function createStore({
draggingStore,
selectionRectStore,
selectionKeyPressedStore,
deleteKeyPressedStore,
selectionRectModeStore,
selectionMode,
nodeTypesStore,
@@ -334,7 +399,8 @@ export function createStore({
zoomIn,
zoomOut,
fitView: _fitView,
resetSelectedElements
resetSelectedElements,
addSelectedNodes
};
}
packages/svelte/src/lib/types/edges.ts
+1
View File
@@ -9,6 +9,7 @@ export type Edge = {
sourceHandle?: string;
targetHandle?: string;
selected?: boolean;
deletable?: boolean;
};
export type EdgeProps = {
packages/svelte/src/lib/types/general.ts
+8
View File
@@ -1,9 +1,17 @@
import type { Node, NodeTypes } from './nodes';
import type { Edge } from './edges';
import type { ShortcutModifierDefinition } from '@svelte-put/shortcut';
export type KeyModifier = ShortcutModifierDefinition;
export type KeyDefinitionObject = { key: string; modifier?: KeyModifier };
export type KeyDefinition = string | KeyDefinitionObject;
export type SvelteFlowProps = {
nodes: Node[];
edges: Edge[];
selectionKey?: KeyDefinition;
deleteKey?: KeyDefinition;
nodeTypes?: NodeTypes;
fitView?: boolean;
class?: string;
packages/svelte/src/lib/types/nodes.ts
+5
View File
@@ -1,6 +1,8 @@
import type { SvelteComponentTyped } from 'svelte';
import type { internalsSymbol, NodeHandleBounds, Position, XYPosition } from '@reactflow/system';
// @todo: currently the helper function only like Node from '@reactflow/core'
// we need a base node type or helpes that accept Node like types
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type Node<NodeData = any> = {
id: string;
@@ -16,6 +18,9 @@ export type Node<NodeData = any> = {
selected?: boolean;
class?: string;
style?: string;
deletable?: boolean;
// not supported yet
parentNode?: string;
// only used internally
[internalsSymbol]?: {