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

refector viewport to use signals

Browse Source
This commit is contained in:
peterkogo
2024-12-06 15:35:43 +01:00
parent f29898f0bd
commit 4fcde6f6bf
19 changed files with 87 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/store/index.ts
+3 -4
View File
@@ -22,7 +22,7 @@ import {
import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions } from '$lib/types';
import { initialEdgeTypes, initialNodeTypes, getInitialStore } from './initial-store.svelte';
import { type StoreSignals, type SvelteFlowStore, type SvelteFlowStoreActions } from './types';
import { syncNodeStores, syncEdgeStores, syncViewportStores } from './utils';
import { syncNodeStores, syncEdgeStores } from './utils';
// import { getVisibleEdges } from './visible-edges';
// import { getVisibleNodes } from './visible-nodes';
@@ -314,11 +314,10 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
}
function panBy(delta: XYPosition) {
const viewport = get(store.viewport);
return panBySystem({
delta,
panZoom: store.panZoom,
transform: [viewport.x, viewport.y, viewport.zoom],
transform: [store.viewport.x, store.viewport.y, store.viewport.zoom],
translateExtent: store.translateExtent,
width: store.width,
height: store.height
@@ -346,7 +345,7 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
const storeWithActions = Object.assign(store, {
syncNodeStores: (nodes) => syncNodeStores(store.nodes, nodes),
syncEdgeStores: (edges) => syncEdgeStores(store.edges, edges),
syncViewport: (viewport) => syncViewportStores(store.panZoom, store.viewport, viewport),
// syncViewport: (viewport) => syncViewportStores(store.panZoom, store.viewport, viewport),
setNodeTypes,
setEdgeTypes,
addEdge,
packages/svelte/src/lib/store/initial-store.svelte.ts
+8 -7
View File
@@ -118,9 +118,7 @@ export const getInitialStore = (signals: StoreSignals) => {
nodeTypes: NodeTypes = $derived({ ...initialNodeTypes, ...signals.props.nodeTypes });
edgeTypes: EdgeTypes = $derived({ ...initialEdgeTypes, ...signals.props.edgeTypes });
viewport: Writable<Viewport> = writable(
signals.props.initialViewport ?? { x: 0, y: 0, zoom: 1 }
);
viewport: Viewport = $state(signals.props.initialViewport ?? { x: 0, y: 0, zoom: 1 });
connectionMode: ConnectionMode = $derived(
signals.props.connectionMode ?? ConnectionMode.Strict
@@ -128,10 +126,13 @@ export const getInitialStore = (signals: StoreSignals) => {
rawConnection: ConnectionState = $state(initialConnection);
connection: ConnectionState = $derived.by(() => {
if (this.rawConnection.inProgress) {
const viewport = get(this.viewport);
return {
...this.rawConnection,
to: pointToRendererPoint(this.rawConnection.to, [viewport.x, viewport.y, viewport.zoom])
to: pointToRendererPoint(this.rawConnection.to, [
this.viewport.x,
this.viewport.y,
this.viewport.zoom
])
};
} else {
return { ...this.rawConnection };
@@ -210,12 +211,12 @@ export const getInitialStore = (signals: StoreSignals) => {
this.edges = createEdgesStore(edges, this.connectionLookup, this.edgeLookup);
updateConnectionLookup(this.connectionLookup, this.edgeLookup, edges);
if (signals.props.fitView && this.width && this.height) {
if (signals.props.fitView && !signals.props.initialViewport && this.width && this.height) {
const bounds = getInternalNodesBounds(this.nodeLookup, {
filter: (node) =>
!!((node.width || node.initialWidth) && (node.height || node.initialHeight))
});
this.viewport.set(getViewportForBounds(bounds, this.width, this.height, 0.5, 2, 0.1));
this.viewport = getViewportForBounds(bounds, this.width, this.height, 0.5, 2, 0.1);
}
}
packages/svelte/src/lib/store/types.ts
+1 -1
View File
@@ -17,7 +17,7 @@ import type { SvelteFlowProps } from '$lib/container/SvelteFlow';
export type SvelteFlowStoreActions = {
syncNodeStores: (nodesStore: Writable<Node[]>) => void;
syncEdgeStores: (edgeStore: Writable<Edge[]>) => void;
syncViewport: (viewportStore?: Writable<Viewport>) => void;
// syncViewport: (viewportStore?: Writable<Viewport>) => void;
setNodeTypes: (nodeTypes: NodeTypes) => void;
setEdgeTypes: (edgeTypes: EdgeTypes) => void;
addEdge: (edge: Edge | Connection) => void;