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

port more updates

Browse Source
This commit is contained in:
peterkogo
2024-12-17 17:37:26 +01:00
parent 72d3e014b7
commit 39930e705d
14 changed files with 68 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/svelte/src/routes/examples/node-toolbar/SelectedNodesToolbar.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { NodeToolbar, useNodes } from '@xyflow/svelte';
const nodes = useNodes();
let nodes = useNodes();
let selectedNodeIds = $derived(
nodes.current.filter((node) => node.selected).map((node) => node.id)

9
examples/svelte/src/routes/examples/reset/+page.svelte
View File

@@ -1,11 +1,10 @@
<script lang="ts">
import { writable } from 'svelte/store';
import { SvelteFlow, Controls, Background, MiniMap, type Node, type Edge } from '@xyflow/svelte';
import '@xyflow/svelte/dist/style.css';
const nodes = writable<Node[]>([]);
const edges = writable<Edge[]>([]);
let nodes = $state.raw<Node[]>([]);
let edges = $state.raw<Edge[]>([]);
const resetNodesArray = () => {
const node1: Node = {
@@ -20,14 +19,14 @@
position: { x: 100, y: 0 }
};
$nodes = [node1, node2];
nodes = [node1, node2];
};
</script>
<button onclick={resetNodesArray}> Reset </button>
<div style:height="100vh">
<SvelteFlow {nodes} {edges} fitView>
<SvelteFlow bind:nodes bind:edges fitView>
<Controls />
<Background />
<MiniMap />

1
examples/svelte/src/routes/examples/stress/+page.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
import { writable } from 'svelte/store';
import {
SvelteFlow,
Controls,

7
examples/svelte/src/routes/examples/usesvelteflow/Flow.svelte
View File

@@ -1,12 +1,11 @@
<script lang="ts">
import { writable } from 'svelte/store';
import { SvelteFlow, Controls, Background, BackgroundVariant, MiniMap } from '@xyflow/svelte';
import Sidebar from './Sidebar.svelte';
import '@xyflow/svelte/dist/style.css';
const nodes = writable([
let nodes = $state.raw([
{
id: '1',
type: 'input',
@@ -27,7 +26,7 @@
}
]);
const edges = writable([
let edges = $state.raw([
{
id: '1-2',
type: 'default',
@@ -45,7 +44,7 @@
</script>
<main>
<SvelteFlow {nodes} {edges} fitView>
<SvelteFlow bind:nodes bind:edges fitView>
<Controls />
<Background variant={BackgroundVariant.Dots} />
<MiniMap />

27
examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { useEdges, useNodes, useSvelteFlow } from '@xyflow/svelte';
import { useEdges, useNodes, useSvelteFlow, useViewport } from '@xyflow/svelte';
const {
zoomIn,
@@ -9,17 +9,18 @@
setCenter,
setViewport,
getViewport,
viewport,
toObject,
deleteElements
} = useSvelteFlow();
const nodes = useNodes();
const edges = useEdges();
let nodes = useNodes();
let edges = useEdges();
let viewport = useViewport();
const deleteNode = () => {
$nodes.shift();
$nodes = $nodes;
//TODO: do we really want to allow this?
// nodes.shift();
// nodes = nodes;
};
</script>
@@ -33,11 +34,13 @@
<button onclick={() => setViewport({ x: 100, y: 100, zoom: 2 })}>setViewport</button>
<button onclick={() => console.log(getViewport())}>getViewport</button>
<button onclick={() => deleteElements({ edges: $edges.map((edge) => ({ id: edge.id })) })}
<button onclick={() => deleteElements({ edges: edges.current.map((edge) => ({ id: edge.id })) })}
>delete edges</button
>
<button onclick={() => deleteElements({ nodes: [{ id: $nodes[0].id }] })}>delete node</button>
<button onclick={() => deleteElements({ nodes: $nodes.map((node) => ({ id: node.id })) })}
<button onclick={() => deleteElements({ nodes: [{ id: nodes.current[0].id }] })}
>delete node</button
>
<button onclick={() => deleteElements({ nodes: nodes.current.map((node) => ({ id: node.id })) })}
>deleteElements</button
>
<button onclick={() => deleteNode()}>delete via store</button>
@@ -49,13 +52,15 @@
>
<div class="label">Nodes:</div>
{#each $nodes as node (node.id)}
{#each nodes.current as node (node.id)}
<div>id: {node.id} | x: {node.position.x.toFixed(1)} y: {node.position.y.toFixed(1)}</div>
{/each}
<div class="label">Viewport:</div>
<div>
x: {$viewport.x.toFixed(1)} y: {$viewport.y.toFixed(1)} zoom: {$viewport.zoom.toFixed(1)}
x: {viewport.current.x.toFixed(1)} y: {viewport.current.y.toFixed(1)} zoom: {viewport.current.zoom.toFixed(
1
)}
</div>
</aside>

7
examples/svelte/src/routes/examples/useupdatenodeinternals/Flow.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
import { writable } from 'svelte/store';
import {
SvelteFlow,
Controls,
@@ -19,7 +18,7 @@
custom: CustomNode
};
const nodes = writable([
const nodes = $state.raw([
{
id: '1',
type: 'custom',
@@ -40,7 +39,7 @@
}
]);
const edges = writable([
const edges = $state.raw([
{
id: '1-2',
source: '1',
@@ -53,7 +52,7 @@
}
]);
const { updateNode } = useSvelteFlow();
const { updateNode } = $derived(useSvelteFlow());
const updateNodePosition = () => {
updateNode('1', (node) => ({ position: { x: node.position.x + 10, y: node.position.y } }));

2
packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
View File

@@ -19,6 +19,8 @@
onedgemouseleave
}: { store: SvelteFlowStore; edge: EdgeLayouted } & EdgeEvents = $props();
$inspect(edge);
let {
source,
target,

2
packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
View File

@@ -36,7 +36,7 @@
const previous = previousLayoutedEdges.get(edge.id);
if (
previous &&
edge == previous.edge &&
edge === previous.edge &&
sourceNode == previous.sourceNode &&
targetNode == previous.targetNode
) {

19
packages/svelte/src/lib/hooks/useNodesEdges.svelte.ts → packages/svelte/src/lib/hooks/useNodesEdgesViewport.svelte.ts
View File

@@ -4,7 +4,7 @@ import { useStore } from '$lib/store';
* Hook for getting the current nodes from the store.
*
* @public
* @returns store with an array of nodes
* @returns reactive signal of the current edges
*/
export function useNodes() {
const { nodes } = $derived(useStore());
@@ -19,7 +19,7 @@ export function useNodes() {
* Hook for getting the current edges from the store.
*
* @public
* @returns store with an array of edges
* @returns reactive signal of the current edges
*/
export function useEdges() {
const { edges } = $derived(useStore());
@@ -29,3 +29,18 @@ export function useEdges() {
}
};
}
/**
* Hook for getting the current viewport from the store.
*
* @public
* @returns reactive signal of the current viewport
*/
export function useViewport() {
const { viewport } = $derived(useStore());
return {
get current() {
return viewport;
}
};
}

2
packages/svelte/src/lib/hooks/useSvelteFlow.ts → packages/svelte/src/lib/hooks/useSvelteFlow.svelte.ts
View File

@@ -370,7 +370,7 @@ export function useSvelteFlow(): {
return Promise.resolve(true);
},
getViewport: () => store.viewport,
getViewport: () => $state.snapshot(store.viewport),
setCenter: async (x, y, options) => {
const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : store.maxZoom;
const currentPanZoom = store.panZoom;

5
packages/svelte/src/lib/hooks/useUpdateNodeInternals.ts → packages/svelte/src/lib/hooks/useUpdateNodeInternals.svelte.ts
View File

@@ -1,4 +1,3 @@
import { get } from 'svelte/store';
import type { UpdateNodeInternals } from '@xyflow/system';
import { useStore } from '$lib/store';
@@ -10,7 +9,7 @@ import { useStore } from '$lib/store';
* @returns function for updating node internals
*/
export function useUpdateNodeInternals(): UpdateNodeInternals {
const { domNode, updateNodeInternals } = useStore();
const { domNode, updateNodeInternals } = $derived(useStore());
// @todo: do we want to add this to system?
const updateInternals = (id: string | string[]) => {
@@ -18,7 +17,7 @@ export function useUpdateNodeInternals(): UpdateNodeInternals {
const updates = new Map();
updateIds.forEach((updateId) => {
const nodeElement = get(domNode)?.querySelector(
const nodeElement = domNode?.querySelector(
`.svelte-flow__node[data-id="${updateId}"]`
) as HTMLDivElement;

6
packages/svelte/src/lib/index.ts
View File

@@ -31,10 +31,10 @@ export { useStore } from '$lib/store';
export * from '$lib/utils';
//hooks
export * from '$lib/hooks/useSvelteFlow';
export * from '$lib/hooks/useUpdateNodeInternals';
export * from '$lib/hooks/useSvelteFlow.svelte';
export * from '$lib/hooks/useUpdateNodeInternals.svelte';
export * from '$lib/hooks/useConnection.svelte';
export * from '$lib/hooks/useNodesEdges.svelte';
export * from '$lib/hooks/useNodesEdgesViewport.svelte';
export * from '$lib/hooks/useHandleConnections.svelte';
export * from '$lib/hooks/useNodesData';
export * from '$lib/hooks/useInternalNode';

34
packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
View File

@@ -11,7 +11,7 @@
type XYResizerChildChange
} from '@xyflow/system';
import type { ResizeControlProps } from './types';
import { get } from 'svelte/store';
import { useSvelteFlow } from '$lib/hooks/useSvelteFlow.svelte';
let {
nodeId,
@@ -34,6 +34,8 @@
const store = useStore();
const { updateNode } = useSvelteFlow();
let id = $derived(
typeof nodeId === 'string' ? nodeId : getContext<string>('svelteflow__node_id')
);
@@ -72,28 +74,20 @@
};
},
onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
const node = store.nodeLookup.get(id)?.internals.userNode;
if (!node) {
return;
}
if (change.x !== undefined && change.y !== undefined) {
node.position = { x: change.x, y: change.y };
}
if (change.width !== undefined && change.height !== undefined) {
node.width = change.width;
node.height = change.height;
}
updateNode(id, (node) => ({
...node,
position: { x: change.x ?? node.position.x, y: change.y ?? node.position.y },
width: change.width ?? node.width,
height: change.height ?? node.height
}));
// TODO: performance?
for (const childChange of childChanges) {
const childNode = store.nodeLookup.get(childChange.id)?.internals.userNode;
if (childNode) {
childNode.position = childChange.position;
}
updateNode(childChange.id, (node) => ({
...node,
position: childChange.position
}));
}
// store.nodes.set(get(store.nodes));
}
});
}

2
packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte
View File

@@ -4,7 +4,7 @@
import portal from '$lib/actions/portal';
import { useStore } from '$lib/store';
import { useSvelteFlow } from '$lib/hooks/useSvelteFlow';
import { useSvelteFlow } from '$lib/hooks/useSvelteFlow.svelte';
import type { InternalNode } from '$lib/types';
import type { NodeToolbarProps } from './types';