diff --git a/.changeset/modern-rocks-breathe.md b/.changeset/modern-rocks-breathe.md new file mode 100644 index 000000000..31f6b706a --- /dev/null +++ b/.changeset/modern-rocks-breathe.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": minor +--- + +Separate flow import and export object shapes and interfaces. An export object has all fields as required, while an import object makes all fields optional. diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index 5019c6168..5160c40ed 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -830,9 +830,9 @@ export function useActions(state: State, nodeLookup: ComputedRef, ed setEdges(edges) } - if ((viewport?.x && viewport?.y) || position) { - const x = viewport?.x || position[0] - const y = viewport?.y || position[1] + const [xPos, yPos] = viewport?.x && viewport?.y ? [viewport.x, viewport.y] : position ?? [null, null] + + if (xPos && yPos) { const nextZoom = viewport?.zoom || zoom || state.viewport.zoom return until(() => viewportHelper.value.viewportInitialized) @@ -840,8 +840,8 @@ export function useActions(state: State, nodeLookup: ComputedRef, ed .then(() => { viewportHelper.value .setViewport({ - x, - y, + x: xPos, + y: yPos, zoom: nextZoom, }) .then(() => { diff --git a/packages/core/src/types/flow.ts b/packages/core/src/types/flow.ts index 4ea8134aa..7590d50e4 100644 --- a/packages/core/src/types/flow.ts +++ b/packages/core/src/types/flow.ts @@ -140,6 +140,8 @@ export interface FlowExportObject { viewport: ViewportTransform } +export type FlowImportObject = { [key in keyof FlowExportObject]?: FlowExportObject[key] } + export interface FlowProps { id?: string /** diff --git a/packages/core/src/types/store.ts b/packages/core/src/types/store.ts index 0fd614f82..14fce8f85 100644 --- a/packages/core/src/types/store.ts +++ b/packages/core/src/types/store.ts @@ -7,6 +7,7 @@ import type { Elements, FlowElements, FlowExportObject, + FlowImportObject, FlowOptions, FlowProps, Rect, @@ -297,7 +298,7 @@ export interface Actions extends Omit { /** return an object of graph values (elements, viewport transform) for storage and re-loading a graph */ toObject: () => FlowExportObject /** load graph from export obj */ - fromObject: (obj: FlowExportObject) => Promise + fromObject: (obj: FlowImportObject) => Promise /** force update node internal data, if handle bounds are incorrect, you might want to use this */ updateNodeInternals: UpdateNodeInternals /** start a connection */