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

refactor(svelte): cleanup store usage

Browse Source
This commit is contained in:
moklick
2023-02-28 12:43:29 +01:00
parent 7a879f3c54
commit 62a6278682
25 changed files with 420 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/container/EdgeRenderer/index.svelte
+4 -4
View File
@@ -2,15 +2,15 @@
import EdgeWrapper from '$lib/components/edges/EdgeWrapper.svelte';
import { useStore } from '$lib/store';
const { edgesWithDataStore, widthStore, heightStore } = useStore();
const { edgesLayouted, width, height } = useStore();
</script>
<svg
width={$widthStore}
<svg
width={$width}
height={$height}
class="react-flow__edges"
>
>
{#each $edgesLayouted as edge (edge.id)}
<EdgeWrapper {...edge} />
{/each}
packages/svelte/src/lib/container/NodeRenderer/index.svelte
+2 -2
View File
@@ -4,7 +4,7 @@
import NodeWrapper from '$lib/components/nodes/NodeWrapper.svelte';
import { useStore } from '$lib/store';
const { nodesStore, updateNodeDimensions } = useStore();
const { nodes, updateNodeDimensions } = useStore();
const resizeObserver: ResizeObserver | null = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver((entries: ResizeObserverEntry[]) => {
const updates = entries.map((entry: ResizeObserverEntry) => ({
id: entry.target.getAttribute('data-id') as string,
@@ -21,7 +21,7 @@
</script>
<div class="react-flow__nodes">
{#each $nodesStore as node (node.id)}
{#each $nodes as node (node.id)}
<NodeWrapper {...node} {resizeObserver} />
{/each}
</div>
packages/svelte/src/lib/container/Pane/index.svelte
+23 -23
View File
@@ -33,7 +33,7 @@
import { SelectionMode, type Node, type Edge } from '@reactflow/system';
import { getConnectedEdges, getEventPosition, getNodesInside } from '@reactflow/utils';
const { nodesStore, edgesStore, transformStore, nodeOriginStore, draggingStore, selectionRectStore, selectionRectModeStore, selectionKeyPressedStore, resetSelectedElements } = useStore();
const { nodes, edges, transform, nodeOrigin, dragging, selectionRect, selectionRectMode, selectionKeyPressed, resetSelectedElements } = useStore();
// @todo take from props
const elementsSelectable = true;
@@ -43,15 +43,15 @@
let containerBounds: DOMRect | null = null
let selectedNodes: Node[] = [];
$: isSelecting = $selectionKeyPressedStore;
$: hasActiveSelection = elementsSelectable && (isSelecting || $selectionRectModeStore === 'user');
$: isSelecting = $selectionKeyPressed;
$: hasActiveSelection = elementsSelectable && (isSelecting || $selectionRectMode === 'user');
function onClick (event: MouseEvent) {
// onPaneClick?.(event);
resetSelectedElements();
selectionRectModeStore.set(null)
selectionRectMode.set(null)
}
function onMouseDown(event: MouseEvent) {
@@ -71,7 +71,7 @@
resetSelectedElements();
selectionRectStore.set({
selectionRect.set({
width: 0,
height: 0,
startX: x,
@@ -87,14 +87,14 @@
function onMouseMove(event: MouseEvent) {
if (!isSelecting || !containerBounds || !$selectionRectStore) {
if (!isSelecting || !containerBounds || !$selectionRect) {
return;
}
const mousePos = getEventPosition(event, containerBounds);
const startX = $selectionRectStore.startX ?? 0;
const startY = $selectionRectStore.startY ?? 0;
const startX = $selectionRect.startX ?? 0;
const startY = $selectionRect.startY ?? 0;
const nextUserSelectRect = {
...$selectionRectStore,
...$selectionRect,
x: mousePos.x < startX ? mousePos.x : startX,
y: mousePos.y < startY ? mousePos.y : startY,
width: Math.abs(mousePos.x - startX),
@@ -102,21 +102,21 @@
};
selectedNodes = getNodesInside(
new Map($nodesStore.map(node => [node.id, node])),
new Map($nodes.map(node => [node.id, node])),
nextUserSelectRect,
$transformStore,
$transform,
selectionMode === SelectionMode.Partial,
true,
$nodeOriginStore
$nodeOrigin
);
const selectedEdgeIds = getConnectedEdges(selectedNodes, $edgesStore).map((e) => e.id);
const selectedEdgeIds = getConnectedEdges(selectedNodes, $edges).map((e) => e.id);
const selectedNodeIds = selectedNodes.map((n) => n.id);
nodesStore.update(nodes => nodes.map(toggleSelected(selectedNodeIds)));
edgesStore.update(edges => edges.map(toggleSelected(selectedEdgeIds)));
nodes.update(nodes => nodes.map(toggleSelected(selectedNodeIds)));
edges.update(edges => edges.map(toggleSelected(selectedEdgeIds)));
selectionRectModeStore.set('user');
selectionRectStore.set(nextUserSelectRect);
selectionRectMode.set('user');
selectionRect.set(nextUserSelectRect);
}
function onMouseUp(event: MouseEvent) {
@@ -129,10 +129,10 @@
// if (!userSelectionActive && userSelectionRect && event.target === container.current) {
// onClick?.(event);
// }
selectionRectStore.set(null);
selectionRect.set(null);
if (selectedNodes.length > 0) {
selectionRectModeStore.set('nodes');
selectionRectMode.set('nodes');
}
@@ -140,19 +140,19 @@
}
const onMouseLeave = (event: MouseEvent) => {
if ($selectionRectModeStore === 'user') {
selectionRectModeStore.set(selectedNodes.length > 0 ? 'nodes' : null);
if ($selectionRectMode === 'user') {
selectionRectMode.set(selectedNodes.length > 0 ? 'nodes' : null);
// onSelectionEnd?.(event);
}
selectionRectStore.set(null);
selectionRect.set(null);
};
</script>
<div
bind:this={container}
class="react-flow__pane"
class:dragging={$draggingStore}
class:dragging={$dragging}
class:selection={isSelecting}
on:click={hasActiveSelection ? undefined : wrapHandler(onClick, container)}
on:mousedown={hasActiveSelection ? onMouseDown : undefined}
packages/svelte/src/lib/container/SvelteFlow.svelte
+28 -5
View File
@@ -23,7 +23,8 @@
export let nodeTypes: $$Props['nodeTypes'] = undefined;
export let selectionKey: $$Props['selectionKey'] = undefined;
export let deleteKey: $$Props['deleteKey'] = undefined;
export let connectionLineType: $$Props['connectionLineType'] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
@@ -40,16 +41,38 @@
onMount(() => {
const { width, height } = domNode.getBoundingClientRect();
store.widthStore.set(width);
store.heightStore.set(height);
store.domNodeStore.set(domNode);
store.width.set(width);
store.height.set(height);
store.domNode.set(domNode);
// @todo: is this a svelte way for two way binding?
store.nodesStore.subscribe((ns) => {
store.nodes.subscribe((ns) => {
nodes = ns;
});
});
// $: {
// const updatableProps = {
// defaultEdgeOptions,
// connectionMode,
// snapToGrid,
// snapGrid,
// nodesDraggable,
// connectOnClick,
// fitViewOnInit: fitView,
// fitViewOnInitOptions: fitViewOptions,
// };
// Object.keys(updatableProps).forEach((key) => {
// store.update((state) => ({
// ...state,
// [key]: valuesToUpdate[key],
// }));
// });
// }
$: {
store.setNodes(nodes);
}
packages/svelte/src/lib/container/Viewport.svelte
+2 -2
View File
@@ -1,12 +1,12 @@
<script lang="ts">
import { useStore } from '$lib/store';
const { transformStore} = useStore();
const { transform } = useStore();
</script>
<div
class="react-flow__viewport"
style="transform: translate({$transformStore[0]}px, {$transformStore[1]}px) scale({$transformStore[2]})"
style="transform: translate({$transform[0]}px, {$transform[1]}px) scale({$transform[2]})"
>
<slot />
</div>
packages/svelte/src/lib/container/Zoom/index.svelte
+3 -3
View File
@@ -2,12 +2,12 @@
import { useStore } from '$lib/store';
import zoom from '$lib/actions/zoom';
const { transformStore, d3Store, selectionKeyPressedStore, selectionRectModeStore } = useStore();
const { transform, d3, selectionKeyPressed, selectionRectMode } = useStore();
$: selecting = $selectionKeyPressedStore || $selectionRectModeStore === 'user';
$: selecting = $selectionKeyPressed || $selectionRectMode === 'user';
</script>
<div class="react-flow__zoom" use:zoom={{ transformStore, d3Store, selecting }}>
<div class="react-flow__zoom" use:zoom={{ transform, d3, selecting }}>
<slot />
</div>