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

updated typescript, implemented for svelte flow

Browse Source
This commit is contained in:
peterkogo
2025-03-05 16:20:05 +01:00
parent c98b6c01f9
commit 502a240560
14 changed files with 167 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/package.json
+1 -1
View File
@@ -85,7 +85,7 @@
"postcss-nested": "^6.0.0",
"postcss-rename": "^0.6.1",
"react": "^18.2.0",
"typescript": "5.1.3"
"typescript": "5.4.5"
},
"rollup": {
"globals": {
packages/svelte/package.json
+1 -1
View File
@@ -80,7 +80,7 @@
"svelte-eslint-parser": "^0.33.1",
"svelte-preprocess": "^5.1.3",
"tslib": "^2.6.2",
"typescript": "5.4.2"
"typescript": "5.4.5"
},
"peerDependencies": {
"svelte": "^3.0.0 || ^4.0.0 || ^5.0.0"
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+1 -1
View File
@@ -117,7 +117,7 @@
store.syncViewport(viewport);
if (fitView !== undefined) {
store.fitViewOnInit.set(fitView);
store.fitViewQueued.set(fitView);
}
if (fitViewOptions) {
packages/svelte/src/lib/store/index.ts
+11 -58
View File
@@ -2,7 +2,6 @@ import { getContext, setContext } from 'svelte';
import { derived, get, writable } from 'svelte/store';
import {
createMarkerIds,
fitView as fitViewSystem,
getElementsToRemove,
panBy as panBySystem,
updateNodeInternals as updateNodeInternalsSystem,
@@ -19,9 +18,7 @@ import {
type UpdateConnection,
type ConnectionState,
type NodeOrigin,
getFitViewNodes,
updateAbsolutePositions,
getDimensions
updateAbsolutePositions
} from '@xyflow/system';
import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions } from '$lib/types';
@@ -113,15 +110,6 @@ export function createStore({
updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin, nodeExtent });
if (!get(store.fitViewOnInitDone) && get(store.fitViewOnInit)) {
const fitViewOptions = get(store.fitViewOptions);
const fitViewOnInitDone = fitViewSync({
...fitViewOptions,
nodes: fitViewOptions?.nodes
});
store.fitViewOnInitDone.set(fitViewOnInitDone);
}
for (const change of changes) {
const node = nodeLookup.get(change.id)?.internals.userNode;
@@ -156,52 +144,18 @@ export function createStore({
}
function fitView(options?: FitViewOptions) {
const panZoom = get(store.panZoom);
const domNode = get(store.domNode);
console.log('fitView Store');
// We either create a new Promise or reuse the existing one
// Even if fitView is called multiple times in a row, we only end up with a single Promise
const fitViewResolver = get(store.fitViewResolver) ?? Promise.withResolvers<boolean>();
if (!panZoom || !domNode) {
return Promise.resolve(false);
}
// We schedule a fitView by setting fitViewQueued and triggering a setNodes
store.fitViewQueued.set(true);
store.fitViewOptions.set(options);
store.fitViewResolver.set(fitViewResolver);
store.nodes.set(get(store.nodes));
const { width, height } = getDimensions(domNode);
const fitViewNodes = getFitViewNodes(get(store.nodeLookup), options);
return fitViewSystem(
{
nodes: fitViewNodes,
width,
height,
minZoom: get(store.minZoom),
maxZoom: get(store.maxZoom),
panZoom
},
options
);
}
function fitViewSync(options?: FitViewOptions) {
const panZoom = get(store.panZoom);
if (!panZoom) {
return false;
}
const fitViewNodes = getFitViewNodes(get(store.nodeLookup), options);
fitViewSystem(
{
nodes: fitViewNodes,
width: get(store.width),
height: get(store.height),
minZoom: get(store.minZoom),
maxZoom: get(store.maxZoom),
panZoom
},
options
);
return fitViewNodes.size > 0;
return fitViewResolver.promise;
}
function zoomBy(factor: number, options?: ViewportHelperFunctionOptions) {
@@ -395,7 +349,6 @@ export function createStore({
}
function reset() {
store.fitViewOnInitDone.set(false);
store.selectionRect.set(null);
store.selectionRectMode.set(null);
store.snapGrid.set(null);
packages/svelte/src/lib/store/initial-store.ts
+32 -9
View File
@@ -112,9 +112,32 @@ export const getInitialStore = ({
viewport = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
}
const fitViewQueued = writable<boolean>(false);
const fitViewOptions = writable<FitViewOptions | undefined>(undefined);
const fitViewResolver = writable<PromiseWithResolvers<boolean> | null>(null);
const panZoom = writable<PanZoomInstance | null>(null);
const widthStore = writable<number>(500);
const heightStore = writable<number>(500);
const minZoom = writable<number>(0.5);
const maxZoom = writable<number>(2);
return {
flowId: writable<string | null>(null),
nodes: createNodesStore(nodes, nodeLookup, parentLookup, storeNodeOrigin, storeNodeExtent),
nodes: createNodesStore(
nodes,
nodeLookup,
parentLookup,
storeNodeOrigin,
storeNodeExtent,
fitViewQueued,
fitViewOptions,
fitViewResolver,
panZoom,
widthStore,
heightStore,
minZoom,
maxZoom
),
nodeLookup: readable<NodeLookup<InternalNode>>(nodeLookup),
parentLookup: readable<ParentLookup<InternalNode>>(parentLookup),
edgeLookup: readable<EdgeLookup<Edge>>(edgeLookup),
@@ -122,20 +145,20 @@ export const getInitialStore = ({
edges: createEdgesStore(edges, connectionLookup, edgeLookup),
visibleEdges: readable<EdgeLayouted[]>([]),
connectionLookup: readable<ConnectionLookup>(connectionLookup),
height: writable<number>(500),
width: writable<number>(500),
minZoom: writable<number>(0.5),
maxZoom: writable<number>(2),
width: widthStore,
height: heightStore,
minZoom,
maxZoom,
nodeOrigin: writable<NodeOrigin>(storeNodeOrigin),
nodeDragThreshold: writable<number>(1),
nodeExtent: writable<CoordinateExtent>(storeNodeExtent),
translateExtent: writable<CoordinateExtent>(infiniteExtent),
autoPanOnNodeDrag: writable<boolean>(true),
autoPanOnConnect: writable<boolean>(true),
fitViewOnInit: writable<boolean>(false),
fitViewOnInitDone: writable<boolean>(false),
fitViewOptions: writable<FitViewOptions>(undefined),
panZoom: writable<PanZoomInstance | null>(null),
fitViewQueued,
fitViewOptions,
fitViewResolver,
panZoom,
snapGrid: writable<SnapGrid | null>(null),
dragging: writable<boolean>(false),
selectionRect: writable<SelectionRect | null>(null),
packages/svelte/src/lib/store/utils.ts
+44 -4
View File
@@ -17,10 +17,18 @@ import {
type ParentLookup,
type NodeOrigin,
infiniteExtent,
type CoordinateExtent
type CoordinateExtent,
fitViewport
} from '@xyflow/system';
import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, InternalNode, Node } from '$lib/types';
import type {
DefaultEdgeOptions,
DefaultNodeOptions,
Edge,
FitViewOptions,
InternalNode,
Node
} from '$lib/types';
// we need to sync the user nodes and the internal nodes so that the user can receive the updates
// made by Svelte Flow (like dragging or selecting a node).
@@ -134,7 +142,15 @@ export const createNodesStore = (
nodeLookup: NodeLookup<InternalNode>,
parentLookup: ParentLookup<InternalNode>,
nodeOrigin: NodeOrigin = [0, 0],
nodeExtent: CoordinateExtent = infiniteExtent
nodeExtent: CoordinateExtent = infiniteExtent,
fitViewQueued: Writable<boolean>,
fitViewOptions: Writable<FitViewOptions | undefined>,
fitViewResolver: Writable<PromiseWithResolvers<boolean> | null>,
panZoom: Writable<PanZoomInstance | null>,
width: Writable<number>,
height: Writable<number>,
minZoom: Writable<number>,
maxZoom: Writable<number>
): {
subscribe: (this: void, run: Subscriber<Node[]>) => Unsubscriber;
update: (this: void, updater: Updater<Node[]>) => void;
@@ -148,7 +164,7 @@ export const createNodesStore = (
let elevateNodesOnSelect = true;
const _set = (nds: Node[]): Node[] => {
adoptUserNodes(nds, nodeLookup, parentLookup, {
const nodesInitialized = adoptUserNodes(nds, nodeLookup, parentLookup, {
elevateNodesOnSelect,
nodeOrigin,
nodeExtent,
@@ -156,6 +172,30 @@ export const createNodesStore = (
checkEquality: false
});
console.log(nodesInitialized);
if (get(fitViewQueued) && nodesInitialized && get(panZoom)) {
console.log('trying');
const fitViewPromise = fitViewport(
{
nodes: nodeLookup,
width: get(width),
height: get(height),
panZoom: get(panZoom)!,
minZoom: get(minZoom),
maxZoom: get(maxZoom)
},
get(fitViewOptions)
);
fitViewPromise.then((value) => {
get(fitViewResolver)?.resolve(value);
fitViewResolver.set(null);
});
fitViewQueued.set(false);
fitViewOptions.set(undefined);
}
value = nds;
set(value);
packages/system/package.json
+1 -1
View File
@@ -63,7 +63,7 @@
"@xyflow/eslint-config": "workspace:*",
"@xyflow/rollup-config": "workspace:*",
"@xyflow/tsconfig": "workspace:*",
"typescript": "5.1.3"
"typescript": "5.4.5"
},
"rollup": {
"globals": {
packages/system/src/utils/store.ts
+4 -1
View File
@@ -124,7 +124,10 @@ export function adoptUserNodes<NodeType extends NodeBase>(
nodeLookup.set(userNode.id, internalNode);
}
if (!internalNode.measured || !internalNode.measured.width || !internalNode.measured.height) {
if (
(!internalNode.measured || !internalNode.measured.width || !internalNode.measured.height) &&
!internalNode.hidden
) {
nodesInitialized = false;
}