From f8cf71cfb8cf92f3f3ced1774b6fe5f5912ed607 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 4 Dec 2021 14:52:26 +0100
Subject: [PATCH] refactor(store): rename param of setState

* newState -> opts

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/container/VueFlow/VueFlow.vue | 31 ++-----------
 src/store/actions.ts              | 73 +++++++++++++++----------------
 2 files changed, 39 insertions(+), 65 deletions(-)

diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue
index 50a72094..07b92a9e 100644
--- a/src/container/VueFlow/VueFlow.vue
+++ b/src/container/VueFlow/VueFlow.vue
@@ -63,44 +63,19 @@ interface FlowProps extends FlowOptions {
 
 const props = withDefaults(defineProps<FlowProps>(), {
   modelValue: () => [],
-  edgeTypes: () => [],
-  nodeTypes: () => [],
-  connectionMode: ConnectionMode.Loose,
-  connectionLineType: ConnectionLineType.Bezier,
-  selectionKeyCode: 'Shift',
-  multiSelectionKeyCode: 'Meta',
-  zoomActivationKeyCode: 'Meta',
-  deleteKeyCode: 'Backspace',
   snapToGrid: false,
-  snapGrid: () => [15, 15],
   onlyRenderVisibleElements: false,
   edgesUpdatable: false,
   nodesConnectable: true,
   nodesDraggable: true,
   elementsSelectable: true,
   selectNodesOnDrag: true,
-  minZoom: 0.5,
-  maxZoom: 2,
-  defaultZoom: 1,
-  defaultPosition: () => [0, 0],
-  translateExtent: () => [
-    [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
-    [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
-  ],
-  nodeExtent: () => [
-    [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
-    [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
-  ],
-  arrowHeadColor: '#b1b1b7',
   preventScrolling: true,
   zoomOnScroll: true,
   zoomOnPinch: true,
   zoomOnDoubleClick: true,
   panOnScroll: false,
-  panOnScrollSpeed: 0.5,
-  panOnScrollMode: PanOnScrollMode.Free,
   paneMoveable: true,
-  edgeUpdaterRadius: 10,
 })
 const emit = defineEmits([...Object.keys(createHooks()), 'update:modelValue'])
 const store = initFlow(emit, props.id)
@@ -231,9 +206,9 @@ export default {
           </ZoomPane>
         </Renderer>
       </template>
-      <template v-if="store.loading" #fallback>
-        <slot v-if="!store.isReady" name="loading-indicator">
-          <LoadingIndicator :label="store.loading">
+      <template #fallback>
+        <slot name="loading-indicator">
+          <LoadingIndicator v-if="store.loading && store.loading !== '' && !store.isReady" :label="store.loading">
             <slot name="loading-label" />
           </LoadingIndicator>
         </slot>
diff --git a/src/store/actions.ts b/src/store/actions.ts
index c07f55b8..61e3d144 100644
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -104,49 +104,48 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
   const addElements: FlowActions['addElements'] = (elements: Elements) => {
     setElements(elements, false)
   }
-  const setState: FlowActions['setState'] = (newState) => {
-    if (typeof newState.loading !== 'undefined') state.loading = newState.loading
-    if (typeof newState.panOnScroll !== 'undefined') state.panOnScroll = newState.panOnScroll
-    if (typeof newState.panOnScrollMode !== 'undefined') state.panOnScrollMode = newState.panOnScrollMode
-    if (typeof newState.panOnScrollSpeed !== 'undefined') state.panOnScrollSpeed = newState.panOnScrollSpeed
-    if (typeof newState.paneMoveable !== 'undefined') state.paneMoveable = newState.paneMoveable
-    if (typeof newState.zoomOnScroll !== 'undefined') state.zoomOnScroll = newState.zoomOnScroll
-    if (typeof newState.preventScrolling !== 'undefined') state.preventScrolling = newState.preventScrolling
-    if (typeof newState.zoomOnDoubleClick !== 'undefined') state.zoomOnDoubleClick = newState.zoomOnDoubleClick
-    if (typeof newState.zoomOnPinch !== 'undefined') state.zoomOnPinch = newState.zoomOnPinch
-    if (typeof newState.defaultZoom !== 'undefined') state.defaultZoom = newState.defaultZoom
-    if (typeof newState.defaultPosition !== 'undefined') state.defaultPosition = newState.defaultPosition
-    if (typeof newState.edgeTypes !== 'undefined') state.edgeTypes = newState.edgeTypes
-    if (typeof newState.nodeTypes !== 'undefined') state.nodeTypes = newState.nodeTypes
-    if (typeof newState.storageKey !== 'undefined') state.storageKey = newState.storageKey
-    if (typeof newState.edgeUpdaterRadius !== 'undefined') state.edgeUpdaterRadius = newState.edgeUpdaterRadius
-    if (typeof newState.elementsSelectable !== 'undefined') state.elementsSelectable = newState.elementsSelectable
-    if (typeof newState.onlyRenderVisibleElements !== 'undefined')
-      state.onlyRenderVisibleElements = newState.onlyRenderVisibleElements
-    if (typeof newState.edgesUpdatable !== 'undefined') state.edgesUpdatable = newState.edgesUpdatable
-    if (typeof newState.nodesConnectable !== 'undefined') state.nodesConnectable = newState.nodesConnectable
-    if (typeof newState.nodesDraggable !== 'undefined') state.nodesDraggable = newState.nodesDraggable
-    if (typeof newState.arrowHeadColor !== 'undefined') state.arrowHeadColor = newState.arrowHeadColor
-    if (typeof newState.markerEndId !== 'undefined') state.markerEndId = newState.markerEndId
-    if (typeof newState.deleteKeyCode !== 'undefined') state.deleteKeyCode = newState.deleteKeyCode
-    if (typeof newState.selectionKeyCode !== 'undefined') state.selectionKeyCode = newState.selectionKeyCode
-    if (typeof newState.zoomActivationKeyCode !== 'undefined') state.zoomActivationKeyCode = newState.zoomActivationKeyCode
-    if (typeof newState.multiSelectionKeyCode !== 'undefined') state.multiSelectionKeyCode = newState.multiSelectionKeyCode
-    if (typeof newState.snapToGrid !== 'undefined') state.snapToGrid = newState.snapToGrid
-    if (typeof newState.snapGrid !== 'undefined') state.snapGrid = newState.snapGrid
-    if (typeof newState.nodeExtent !== 'undefined') state.nodeExtent = newState.nodeExtent
+  const setState: FlowActions['setState'] = (opts) => {
+    if (typeof opts.loading !== 'undefined') state.loading = opts.loading
+    if (typeof opts.panOnScroll !== 'undefined') state.panOnScroll = opts.panOnScroll
+    if (typeof opts.panOnScrollMode !== 'undefined') state.panOnScrollMode = opts.panOnScrollMode
+    if (typeof opts.panOnScrollSpeed !== 'undefined') state.panOnScrollSpeed = opts.panOnScrollSpeed
+    if (typeof opts.paneMoveable !== 'undefined') state.paneMoveable = opts.paneMoveable
+    if (typeof opts.zoomOnScroll !== 'undefined') state.zoomOnScroll = opts.zoomOnScroll
+    if (typeof opts.preventScrolling !== 'undefined') state.preventScrolling = opts.preventScrolling
+    if (typeof opts.zoomOnDoubleClick !== 'undefined') state.zoomOnDoubleClick = opts.zoomOnDoubleClick
+    if (typeof opts.zoomOnPinch !== 'undefined') state.zoomOnPinch = opts.zoomOnPinch
+    if (typeof opts.defaultZoom !== 'undefined') state.defaultZoom = opts.defaultZoom
+    if (typeof opts.defaultPosition !== 'undefined') state.defaultPosition = opts.defaultPosition
+    if (typeof opts.edgeTypes !== 'undefined') state.edgeTypes = opts.edgeTypes
+    if (typeof opts.nodeTypes !== 'undefined') state.nodeTypes = opts.nodeTypes
+    if (typeof opts.storageKey !== 'undefined') state.storageKey = opts.storageKey
+    if (typeof opts.edgeUpdaterRadius !== 'undefined') state.edgeUpdaterRadius = opts.edgeUpdaterRadius
+    if (typeof opts.elementsSelectable !== 'undefined') state.elementsSelectable = opts.elementsSelectable
+    if (typeof opts.onlyRenderVisibleElements !== 'undefined') state.onlyRenderVisibleElements = opts.onlyRenderVisibleElements
+    if (typeof opts.edgesUpdatable !== 'undefined') state.edgesUpdatable = opts.edgesUpdatable
+    if (typeof opts.nodesConnectable !== 'undefined') state.nodesConnectable = opts.nodesConnectable
+    if (typeof opts.nodesDraggable !== 'undefined') state.nodesDraggable = opts.nodesDraggable
+    if (typeof opts.arrowHeadColor !== 'undefined') state.arrowHeadColor = opts.arrowHeadColor
+    if (typeof opts.markerEndId !== 'undefined') state.markerEndId = opts.markerEndId
+    if (typeof opts.deleteKeyCode !== 'undefined') state.deleteKeyCode = opts.deleteKeyCode
+    if (typeof opts.selectionKeyCode !== 'undefined') state.selectionKeyCode = opts.selectionKeyCode
+    if (typeof opts.zoomActivationKeyCode !== 'undefined') state.zoomActivationKeyCode = opts.zoomActivationKeyCode
+    if (typeof opts.multiSelectionKeyCode !== 'undefined') state.multiSelectionKeyCode = opts.multiSelectionKeyCode
+    if (typeof opts.snapToGrid !== 'undefined') state.snapToGrid = opts.snapToGrid
+    if (typeof opts.snapGrid !== 'undefined') state.snapGrid = opts.snapGrid
+    if (typeof opts.nodeExtent !== 'undefined') state.nodeExtent = opts.nodeExtent
     if (!state.isReady)
       until(() => state.d3Zoom)
         .not.toBeUndefined()
         .then(() => {
-          if (typeof newState.maxZoom !== 'undefined') setMaxZoom(newState.maxZoom)
-          if (typeof newState.minZoom !== 'undefined') setMinZoom(newState.minZoom)
-          if (typeof newState.translateExtent !== 'undefined') setTranslateExtent(newState.translateExtent)
+          if (typeof opts.maxZoom !== 'undefined') setMaxZoom(opts.maxZoom)
+          if (typeof opts.minZoom !== 'undefined') setMinZoom(opts.minZoom)
+          if (typeof opts.translateExtent !== 'undefined') setTranslateExtent(opts.translateExtent)
         })
     else {
-      if (typeof newState.maxZoom !== 'undefined') setMaxZoom(newState.maxZoom)
-      if (typeof newState.minZoom !== 'undefined') setMinZoom(newState.minZoom)
-      if (typeof newState.translateExtent !== 'undefined') setTranslateExtent(newState.translateExtent)
+      if (typeof opts.maxZoom !== 'undefined') setMaxZoom(opts.maxZoom)
+      if (typeof opts.minZoom !== 'undefined') setMinZoom(opts.minZoom)
+      if (typeof opts.translateExtent !== 'undefined') setTranslateExtent(opts.translateExtent)
     }
   }
   return {