refactor(flow!): Change transform to viewport

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

package/src/components/ConnectionLine/ConnectionLine.vue

@@ -27,8 +27,8 @@ const sourceY = props.sourceNode.computedPosition.y + sourceHandleY
 const isRightOrLeft = sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right
 const targetPosition = isRightOrLeft ? Position.Left : Position.Top
 
-const targetX = computed(() => (store.connectionPosition.x - store.transform[0]) / store.transform[2])
-const targetY = computed(() => (store.connectionPosition.y - store.transform[1]) / store.transform[2])
+const targetX = computed(() => (store.connectionPosition.x - store.viewport.x) / store.viewport.zoom)
+const targetY = computed(() => (store.connectionPosition.y - store.viewport.y) / store.viewport.zoom)
 
 const dAttr = computed(() => {
   let path = `M${sourceX},${sourceY} ${targetX.value},${targetY.value}`

package/src/components/Nodes/NodeWrapper.vue

@@ -117,14 +117,14 @@ const { scale, onDrag, onDragStart, onDragStop } = useDraggableCore(nodeElement,
   grid: props.snapGrid,
   cancel: `.${store.noDragClassName}`,
   enableUserSelectHack: false,
-  scale: store.transform[2],
+  scale: store.viewport.zoom,
 })
 
 onMounted(() => {
   debouncedWatch(
-    () => store.transform[2],
+    () => store.viewport.zoom,
     () => {
-      scale.value = store.transform[2]
+      scale.value = store.viewport.zoom
     },
     { debounce: 5 },
   )

package/src/components/NodesSelection/NodesSelection.vue

@@ -16,7 +16,7 @@ const innerStyle = computed(() => ({
   left: `${selectedNodesBBox.value.x}px`,
 }))
 
-const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
+const transform = computed(() => `translate(${store.viewport.x}px,${store.viewport.y}px) scale(${store.viewport.zoom})`)
 
 watch(selectedNodesBBox, (v) => (store.selectedNodesBbox = v))
 
@@ -25,14 +25,14 @@ const onContextMenu = (event: MouseEvent) => store.hooks.selectionContextMenu.tr
 const { onDragStart, onDrag, onDragStop, scale } = useDraggableCore(el, {
   grid: store.snapToGrid ? store.snapGrid : undefined,
   enableUserSelectHack: false,
-  scale: store.transform[2],
+  scale: store.viewport.zoom,
 })
 
 onMounted(() => {
   debouncedWatch(
-    () => store.transform[2],
+    () => store.viewport.zoom,
     () => {
-      scale.value = store.transform[2]
+      scale.value = store.viewport.zoom
     },
     { debounce: 5 },
   )

package/src/components/UserSelection/UserSelection.vue

@@ -64,7 +64,7 @@ const onMouseMove = (event: MouseEvent) => {
     height: Math.abs(mousePos.y - startY),
   }
 
-  const selectedNodes = getNodesInside(store.getNodes, rect.value, store.transform)
+  const selectedNodes = getNodesInside(store.getNodes, rect.value, store.viewport)
   const selectedEdges = getConnectedEdges(selectedNodes, store.getEdges)
 
   rect.value = nextUserSelectRect