refactor(core): separate import and export objects and interfaces (#1978)

* refactor(core): separate import and export objects and interfaces

Signed-off-by: braks <[email protected]>

* chore(changeset): add

* chore: cleanup

Signed-off-by: braks <[email protected]>

---------

Signed-off-by: braks <[email protected]>

Author: bcakmakoglu

.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.

packages/core/src/store/actions.ts

@@ -830,18 +830,18 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, 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)
           .toBe(true)
           .then(() => {
             viewportHelper.value
               .setViewport({
-                x,
-                y,
+                x: xPos,
+                y: yPos,
                 zoom: nextZoom,
               })
               .then(() => {

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
   /**

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<ViewportHelper, 'viewportInitialized'> {
   /** 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<boolean>
+  fromObject: (obj: FlowImportObject) => Promise<boolean>
   /** force update node internal data, if handle bounds are incorrect, you might want to use this */
   updateNodeInternals: UpdateNodeInternals
   /** start a connection */