refactor(flow!): Change transform to viewport

* Change array type to object type and rename transform type to viewport
* Update examples & docs

examples/package.json

@@ -10,7 +10,7 @@
     "serve": "vite serve"
   },
   "dependencies": {
-    "@braks/vue-flow": "^0.4.2-0"
+    "@braks/vue-flow": "^0.4.2-3"
   },
   "devDependencies": {
     "@types/dagre": "^0.7.46",

examples/src/Nesting/GroupNode.vue

@@ -3,7 +3,7 @@ import { Handle, Position, getNodesInside, useVueFlow } from '@braks/vue-flow'
 import type { NodeProps } from '@braks/vue-flow'
 
 const props = defineProps<NodeProps>()
-const { onNodeDragStop, getNodes, transform } = useVueFlow()
+const { onNodeDragStop, getNodes, viewport } = useVueFlow()
 onNodeDragStop(({ node }) => {
   const nodes = getNodesInside(
     getNodes.value,
@@ -12,7 +12,7 @@ onNodeDragStop(({ node }) => {
       x: props.computedPosition.x,
       y: props.computedPosition.y,
     },
-    transform.value,
+    viewport.value,
   )
   if (nodes.some((n) => n.id === node.id && n.id !== props.id)) {
     node.label = `In ${props.id}`

examples/src/Provider/Sidebar.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useVueFlow } from '@braks/vue-flow'
-const { nodesSelectionActive, addSelectedNodes, getNodes, transform } = useVueFlow()
+const { nodesSelectionActive, addSelectedNodes, getNodes, viewport } = useVueFlow()
 
 const selectAll = () => {
   addSelectedNodes(getNodes.value)
@@ -14,7 +14,7 @@ const selectAll = () => {
     </div>
     <div class="title">Zoom & pan transform</div>
     <div class="transform">
-      {{ [transform[0].toFixed(2), transform[1].toFixed(2), transform[2].toFixed(2)] }}
+      {{ [viewport.x.toFixed(2), viewport.y.toFixed(2), viewport.zoom.toFixed(2)] }}
     </div>
     <div class="title">Nodes</div>
     <div v-for="node of getNodes" :key="node.id">