refactor(flow!): Change transform to viewport

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

package/src/store/actions.ts

@@ -152,7 +152,7 @@ export default (state: State, getters: ComputedGetters): Actions => {
           dimensions.height &&
           (node.dimensions.width !== dimensions.width || node.dimensions.height !== dimensions.height || update.forceUpdate)
         )
-        node.handleBounds = getHandleBounds(update.nodeElement, state.transform[2])
+        node.handleBounds = getHandleBounds(update.nodeElement, state.viewport.zoom)
 
         if (doUpdate) {
           node.dimensions = dimensions

package/src/store/getters.ts

@@ -35,7 +35,7 @@ export default (state: State): ComputedGetters => {
               width: state.dimensions.width,
               height: state.dimensions.height,
             },
-            state.transform,
+            state.viewport,
             true,
           )
       : nodes ?? []
@@ -63,7 +63,7 @@ export default (state: State): ComputedGetters => {
             targetHeight: e.targetNode.dimensions.height,
             width: state.dimensions.width,
             height: state.dimensions.height,
-            transform: state.transform,
+            viewport: state.viewport,
           }),
       )
   })

package/src/store/state.ts

@@ -46,7 +46,7 @@ const defaultState = (): State => ({
     width: 0,
     height: 0,
   },
-  transform: [0, 0, 1],
+  viewport: { x: 0, y: 0, zoom: 1 },
 
   d3Zoom: null,
   d3Selection: null,