refactor(flow)!: Use watcher to change every prop as a single item

* instead of replacing the whole state on each watch trigger, split into multiple watchers that set a single state * improve reacitivty and two-way binding for v-models * remove elements option -> only modelValue (old api) or nodes/edges Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
2021-12-20 19:29:52 +01:00
parent cc7cedfda0
commit f8a23c59ec
9 changed files with 284 additions and 91 deletions
@@ -0,0 +1,160 @@
+import { Ref } from 'vue'
+import { FlowProps, FlowStore } from '~/types'
+
+const isDef = <T>(val: T): val is NonNullable<T> => typeof val !== 'undefined'
+export default (
+  modelValue: Ref<any[] | undefined> | undefined,
+  nodes: Ref<any[] | undefined> | undefined,
+  edges: Ref<any[] | undefined> | undefined,
+  props: FlowProps,
+  store: FlowStore,
+) => {
+  if (isDefined(modelValue)) {
+    const { pause, resume } = pausableWatch(modelValue, (v) => {
+      if (v) {
+        pause()
+        store.setElements(v)
+        resume()
+      }
+    })
+  }
+  if (isDefined(nodes)) {
+    const { pause, resume } = pausableWatch(nodes, (v) => {
+      if (v) {
+        pause()
+        store.setNodes(v)
+        resume()
+      }
+    })
+  }
+  if (isDefined(edges)) {
+    const { pause, resume } = pausableWatch(edges, (v) => {
+      if (v) {
+        pause()
+        store.setEdges(v)
+        resume()
+      }
+    })
+  }
+
+  watch(
+    () => props.maxZoom,
+    (v) => isDef(v) && store.setMaxZoom(v),
+  )
+  watch(
+    () => props.minZoom,
+    (v) => isDef(v) && store.setMinZoom(v),
+  )
+  watch(
+    () => props.edgesUpdatable,
+    (v) => isDef(v) && (store.edgesUpdatable = v),
+  )
+  watch(
+    () => props.elementsSelectable,
+    (v) => isDef(v) && (store.elementsSelectable = v),
+  )
+  watch(
+    () => props.nodesDraggable,
+    (v) => isDef(v) && (store.nodesDraggable = v),
+  )
+  watch(
+    () => props.nodesConnectable,
+    (v) => isDef(v) && (store.nodesConnectable = v),
+  )
+  watch(
+    () => props.onlyRenderVisibleElements,
+    (v) => isDef(v) && (store.onlyRenderVisibleElements = v),
+  )
+  watch(
+    () => props.snapToGrid,
+    (v) => isDef(v) && (store.snapToGrid = v),
+  )
+  watch(
+    () => props.snapGrid,
+    (v) => isDef(v) && (store.snapGrid = v),
+  )
+  watch(
+    () => props.paneMoveable,
+    (v) => isDef(v) && (store.paneMoveable = v),
+  )
+  watch(
+    () => props.panOnScroll,
+    (v) => isDef(v) && (store.panOnScroll = v),
+  )
+  watch(
+    () => props.panOnScrollMode,
+    (v) => isDef(v) && (store.panOnScrollMode = v),
+  )
+  watch(
+    () => props.panOnScrollSpeed,
+    (v) => isDef(v) && (store.panOnScrollSpeed = v),
+  )
+  watch(
+    () => props.zoomOnPinch,
+    (v) => isDef(v) && (store.zoomOnPinch = v),
+  )
+  watch(
+    () => props.zoomOnDoubleClick,
+    (v) => isDef(v) && (store.zoomOnDoubleClick = v),
+  )
+  watch(
+    () => props.zoomOnScroll,
+    (v) => isDef(v) && (store.zoomOnScroll = v),
+  )
+  watch(
+    () => props.deleteKeyCode,
+    (v) => isDef(v) && (store.deleteKeyCode = v),
+  )
+  watch(
+    () => props.zoomActivationKeyCode,
+    (v) => isDef(v) && (store.zoomActivationKeyCode = v),
+  )
+  watch(
+    () => props.selectionKeyCode,
+    (v) => isDef(v) && (store.selectionKeyCode = v),
+  )
+  watch(
+    () => props.multiSelectionKeyCode,
+    (v) => isDef(v) && (store.multiSelectionKeyCode = v),
+  )
+  watch(
+    () => props.connectionLineStyle,
+    (v) => isDef(v) && (store.connectionLineStyle = v),
+  )
+  watch(
+    () => props.connectionMode,
+    (v) => isDef(v) && (store.connectionMode = v),
+  )
+  watch(
+    () => props.connectionLineType,
+    (v) => isDef(v) && (store.connectionLineType = v),
+  )
+  watch(
+    () => props.defaultMarkerColor,
+    (v) => isDef(v) && (store.defaultMarkerColor = v),
+  )
+  watch(
+    () => props.defaultPosition,
+    (v) => isDef(v) && (store.defaultPosition = v),
+  )
+  watch(
+    () => props.defaultZoom,
+    (v) => isDef(v) && (store.defaultZoom = v),
+  )
+  watch(
+    () => props.translateExtent,
+    (v) => isDef(v) && (store.translateExtent = v),
+  )
+  watch(
+    () => props.nodeExtent,
+    (v) => isDef(v) && (store.nodeExtent = v),
+  )
+  watch(
+    () => props.selectNodesOnDrag,
+    (v) => isDef(v) && (store.selectNodesOnDrag = v),
+  )
+  watch(
+    () => props.edgeUpdaterRadius,
+    (v) => isDef(v) && (store.edgeUpdaterRadius = v),
+  )
+}