refactor(core): merge defaultZoom & defaultPosition to defaultViewport

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/core/src/container/Viewport/Viewport.vue

@@ -11,8 +11,7 @@ const {
   id,
   minZoom,
   maxZoom,
-  defaultZoom,
-  defaultPosition,
+  defaultViewport,
   translateExtent,
   dimensions,
   zoomActivationKeyCode,

packages/core/src/store/state.ts

@@ -66,8 +66,7 @@ const defaultState = (): State => ({
   panOnDrag: true,
   edgeUpdaterRadius: 10,
   onlyRenderVisibleElements: false,
-  defaultZoom: 1,
-  defaultPosition: [0, 0],
+  defaultViewport: { x: 0, y: 0, zoom: 1 },
 
   nodesSelectionActive: false,
   userSelectionActive: false,

packages/core/src/types/flow.ts

@@ -3,7 +3,7 @@ import type { KeyFilter } from '@vueuse/core'
 import type { DefaultEdgeOptions, Edge, EdgeUpdatable, GraphEdge } from './edge'
 import type { CoordinateExtent, GraphNode, Node } from './node'
 import type { ConnectionLineOptions, ConnectionLineType, ConnectionMode, Connector } from './connection'
-import type { PanOnScrollMode } from './zoom'
+import type { PanOnScrollMode, Viewport } from './zoom'
 import type { EdgeTypesObject, NodeTypesObject } from './components'
 import type { CustomEvent } from './hooks'
 
@@ -129,8 +129,7 @@ export interface FlowProps {
   panOnDrag?: boolean
   minZoom?: number
   maxZoom?: number
-  defaultZoom?: number
-  defaultPosition?: [number, number]
+  defaultViewport?: Viewport
   translateExtent?: CoordinateExtent
   nodeExtent?: CoordinateExtent
   defaultMarkerColor?: string

packages/core/src/types/store.ts

@@ -48,7 +48,7 @@ export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
   minZoom: number
   /** use setMaxZoom action to change maxZoom */
   maxZoom: number
-  defaultZoom: number
+  defaultViewport: Viewport
   /** use setTranslateExtent action to change translateExtent */
   translateExtent: CoordinateExtent
   nodeExtent: CoordinateExtent
@@ -59,8 +59,6 @@ export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
   readonly viewport: Viewport
   /** if true will skip rendering any elements currently not inside viewport until they become visible */
   onlyRenderVisibleElements: boolean
-  defaultPosition: [number, number]
-
   nodesSelectionActive: boolean
   userSelectionActive: boolean
   multiSelectionActive: boolean