From b1f541b63d7527118f3d4ef6afe7ef055ce1b023 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 4 Dec 2021 12:21:39 +0100
Subject: [PATCH] refactore(store)!: Remove transition and loading.transition
 property

* Tranisitions break testing and are superflous

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 examples/Stress/StressExample.vue |   2 +-
 src/container/VueFlow/VueFlow.vue | 201 ++++++++++++++----------------
 src/types/flow.ts                 |  16 +--
 src/utils/store.ts                |   2 +-
 4 files changed, 97 insertions(+), 124 deletions(-)

diff --git a/examples/Stress/StressExample.vue b/examples/Stress/StressExample.vue
index c6396d6e..7673cc2b 100644
--- a/examples/Stress/StressExample.vue
+++ b/examples/Stress/StressExample.vue
@@ -54,7 +54,7 @@ const updateElements = () => {
 <template>
   <VueFlow
     v-model="elements"
-    :loading="{ label: 'Loading...', transition: { name: 'fade', mode: 'out-in' } }"
+    loading="One moment please..."
     @load="onLoad"
     @elementsRemove="onElementsRemove"
     @connect="onConnect"
diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue
index ebb60f6d..260088c3 100644
--- a/src/container/VueFlow/VueFlow.vue
+++ b/src/container/VueFlow/VueFlow.vue
@@ -10,7 +10,6 @@ import {
   NodeExtent,
   NodeTypes,
   EdgeTypes,
-  Loading,
   FlowOptions,
 } from '../../types'
 import Renderer from '../Renderer/Renderer.vue'
@@ -59,7 +58,7 @@ interface FlowProps extends FlowOptions {
   zoomOnDoubleClick?: boolean
   edgeUpdaterRadius?: number
   storageKey?: string
-  loading?: Loading
+  loading?: string
 }
 
 const props = withDefaults(defineProps<FlowProps>(), {
@@ -102,7 +101,6 @@ const props = withDefaults(defineProps<FlowProps>(), {
   panOnScrollMode: PanOnScrollMode.Free,
   paneMoveable: true,
   edgeUpdaterRadius: 10,
-  loading: false,
 })
 const emit = defineEmits([...Object.keys(createHooks()), 'update:modelValue'])
 const store = initFlow(emit, props.id)
@@ -136,15 +134,6 @@ until(() => store.isReady)
       { flush: 'post', deep: true },
     )
   })
-
-const transitionName = computed(() => {
-  let name = ''
-  if (typeof store.loading === 'object' && store.loading.transition) {
-    if (typeof store.loading.transition === 'string') name = store.loading.transition
-    else name = store.loading.transition.name
-  }
-  return name
-})
 </script>
 <script lang="ts">
 export default {
@@ -153,105 +142,103 @@ export default {
 </script>
 <template>
   <div class="vue-flow">
-    <Transition :name="transitionName">
-      <Suspense timeout="0">
-        <template #default>
-          <Renderer :key="`renderer-${store.id}`" :elements="elements">
-            <ZoomPane
-              :key="`zoom-pane-${store.id}`"
-              :prevent-scrolling="store.preventScrolling"
-              :selection-key-code="store.selectionKeyCode"
-              :zoom-activation-key-code="store.zoomActivationKeyCode"
-              :default-zoom="store.defaultZoom"
-              :default-position="store.defaultPosition"
-              :zoom-on-scroll="store.zoomOnScroll"
-              :zoom-on-pinch="store.zoomOnPinch"
-              :zoom-on-double-click="store.zoomOnDoubleClick"
-              :pan-on-scroll="store.panOnScroll"
-              :pan-on-scroll-speed="store.panOnScrollSpeed"
-              :pan-on-scroll-mode="store.panOnScrollMode"
-              :pane-moveable="store.paneMoveable"
-            >
-              <template #default="zoomPaneProps">
-                <SelectionPane
-                  :key="`selection-pane-${store.id}`"
-                  :edges="store.getEdges"
-                  :selected-elements="store.selectedElements"
-                  :selection-active="store.selectionActive"
-                  :nodes-selection-active="store.nodesSelectionActive"
+    <Suspense timeout="0">
+      <template #default>
+        <Renderer :key="`renderer-${store.id}`" :elements="elements">
+          <ZoomPane
+            :key="`zoom-pane-${store.id}`"
+            :prevent-scrolling="store.preventScrolling"
+            :selection-key-code="store.selectionKeyCode"
+            :zoom-activation-key-code="store.zoomActivationKeyCode"
+            :default-zoom="store.defaultZoom"
+            :default-position="store.defaultPosition"
+            :zoom-on-scroll="store.zoomOnScroll"
+            :zoom-on-pinch="store.zoomOnPinch"
+            :zoom-on-double-click="store.zoomOnDoubleClick"
+            :pan-on-scroll="store.panOnScroll"
+            :pan-on-scroll-speed="store.panOnScrollSpeed"
+            :pan-on-scroll-mode="store.panOnScrollMode"
+            :pane-moveable="store.paneMoveable"
+          >
+            <template #default="zoomPaneProps">
+              <SelectionPane
+                :key="`selection-pane-${store.id}`"
+                :edges="store.getEdges"
+                :selected-elements="store.selectedElements"
+                :selection-active="store.selectionActive"
+                :nodes-selection-active="store.nodesSelectionActive"
+                :elements-selectable="store.elementsSelectable"
+                :delete-key-code="store.deleteKeyCode"
+                :multi-selection-key-code="store.multiSelectionKeyCode"
+                :selection-key-code="store.selectionKeyCode"
+              >
+                <NodeRenderer
+                  :key="`node-renderer-${store.id}`"
+                  :nodes="store.getNodes"
+                  :node-types="store.getNodeTypes"
+                  :snap-to-grid="store.snapToGrid"
+                  :snap-grid="store.snapGrid"
+                  :select-nodes-on-drag="store.selectNodesOnDrag"
+                  :transform="store.transform"
                   :elements-selectable="store.elementsSelectable"
-                  :delete-key-code="store.deleteKeyCode"
-                  :multi-selection-key-code="store.multiSelectionKeyCode"
-                  :selection-key-code="store.selectionKeyCode"
+                  :nodes-draggable="store.nodesDraggable"
+                  :nodes-connectable="store.nodesConnectable"
                 >
-                  <NodeRenderer
-                    :key="`node-renderer-${store.id}`"
-                    :nodes="store.getNodes"
-                    :node-types="store.getNodeTypes"
-                    :snap-to-grid="store.snapToGrid"
-                    :snap-grid="store.snapGrid"
-                    :select-nodes-on-drag="store.selectNodesOnDrag"
-                    :transform="store.transform"
-                    :elements-selectable="store.elementsSelectable"
-                    :nodes-draggable="store.nodesDraggable"
-                    :nodes-connectable="store.nodesConnectable"
+                  <template
+                    v-for="nodeName of Object.keys(store.getNodeTypes)"
+                    #[`node-${nodeName}`]="nodeProps"
+                    :key="`node-${nodeName}-${store.id}`"
                   >
-                    <template
-                      v-for="nodeName of Object.keys(store.getNodeTypes)"
-                      #[`node-${nodeName}`]="nodeProps"
-                      :key="`node-${nodeName}-${store.id}`"
-                    >
-                      <slot :name="`node-${nodeName}`" v-bind="nodeProps" />
-                    </template>
-                  </NodeRenderer>
-                  <EdgeRenderer
-                    :key="`edge-renderer-${store.id}`"
-                    :transform="store.transform"
-                    :dimensions="store.dimensions"
-                    :edges="store.getEdges"
-                    :edge-types="store.getEdgeTypes"
-                    :nodes="store.getNodes"
-                    :selected-elements="store.selectedElements"
-                    :elements-selectable="store.elementsSelectable"
-                    :connection-node-id="store.connectionNodeId"
-                    :connction-handle-id="store.connectionHandleId"
-                    :connection-handle-type="store.connectionHandleType"
-                    :connection-position="store.connectionPosition"
-                    :connection-mode="store.connectionMode"
-                    :nodes-connectable="store.nodesConnectable"
-                    :connection-line-type="store.connectionLineType"
-                    :connection-line-style="store.connectionLineStyle"
-                    :arrow-head-color="store.arrowHeadColor"
-                    :marker-end-id="store.markerEndId"
-                    :only-render-visible-elements="store.onlyRenderVisibleElements"
-                    :edges-updatable="store.edgesUpdatable"
+                    <slot :name="`node-${nodeName}`" v-bind="nodeProps" />
+                  </template>
+                </NodeRenderer>
+                <EdgeRenderer
+                  :key="`edge-renderer-${store.id}`"
+                  :transform="store.transform"
+                  :dimensions="store.dimensions"
+                  :edges="store.getEdges"
+                  :edge-types="store.getEdgeTypes"
+                  :nodes="store.getNodes"
+                  :selected-elements="store.selectedElements"
+                  :elements-selectable="store.elementsSelectable"
+                  :connection-node-id="store.connectionNodeId"
+                  :connction-handle-id="store.connectionHandleId"
+                  :connection-handle-type="store.connectionHandleType"
+                  :connection-position="store.connectionPosition"
+                  :connection-mode="store.connectionMode"
+                  :nodes-connectable="store.nodesConnectable"
+                  :connection-line-type="store.connectionLineType"
+                  :connection-line-style="store.connectionLineStyle"
+                  :arrow-head-color="store.arrowHeadColor"
+                  :marker-end-id="store.markerEndId"
+                  :only-render-visible-elements="store.onlyRenderVisibleElements"
+                  :edges-updatable="store.edgesUpdatable"
+                >
+                  <template
+                    v-for="edgeName of Object.keys(store.getEdgeTypes)"
+                    #[`edge-${edgeName}`]="edgeProps"
+                    :key="`edge-${edgeName}-${store.id}`"
                   >
-                    <template
-                      v-for="edgeName of Object.keys(store.getEdgeTypes)"
-                      #[`edge-${edgeName}`]="edgeProps"
-                      :key="`edge-${edgeName}-${store.id}`"
-                    >
-                      <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
-                    </template>
-                    <template #custom-connection-line="customConnectionLineProps">
-                      <slot name="custom-connection-line" v-bind="customConnectionLineProps" />
-                    </template>
-                  </EdgeRenderer>
-                </SelectionPane>
-                <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
-              </template>
-            </ZoomPane>
-          </Renderer>
-        </template>
-        <template v-if="store.loading" #fallback>
-          <slot :key="`loading-indicator-${store.id}`" name="loading-indicator">
-            <LoadingIndicator :key="`default-loading-indicator-${store.id}`" v-bind="store.loading">
-              <slot name="loading-label" />
-            </LoadingIndicator>
-          </slot>
-        </template>
-      </Suspense>
-    </Transition>
+                    <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
+                  </template>
+                  <template #custom-connection-line="customConnectionLineProps">
+                    <slot name="custom-connection-line" v-bind="customConnectionLineProps" />
+                  </template>
+                </EdgeRenderer>
+              </SelectionPane>
+              <slot name="zoom-pane" v-bind="zoomPaneProps"></slot>
+            </template>
+          </ZoomPane>
+        </Renderer>
+      </template>
+      <template #fallback>
+        <slot name="loading-indicator">
+          <LoadingIndicator :label="store.loading">
+            <slot name="loading-label" />
+          </LoadingIndicator>
+        </slot>
+      </template>
+    </Suspense>
     <slot v-bind="store"></slot>
   </div>
 </template>
diff --git a/src/types/flow.ts b/src/types/flow.ts
index a73bcc89..363f9ea8 100644
--- a/src/types/flow.ts
+++ b/src/types/flow.ts
@@ -88,20 +88,6 @@ export type FitViewFunc = (fitViewOptions?: FitViewParams) => void
 export type ProjectFunc = (position: XYPosition) => XYPosition
 export type ToObjectFunc<T = any> = () => FlowExportObject<T>
 
-export type Loading =
-  | {
-      label: string
-      transition?:
-        | string
-        | {
-            name: string
-            mode: string
-          }
-      style: CSSProperties
-      class: string
-    }
-  | boolean
-
 export type FlowInstance<T = any> = {
   zoomIn: () => void
   zoomOut: () => void
@@ -151,5 +137,5 @@ export interface FlowOptions {
   preventScrolling?: boolean
   edgeUpdaterRadius?: number
   storageKey?: string
-  loading?: Loading
+  loading?: string
 }
diff --git a/src/utils/store.ts b/src/utils/store.ts
index 8c358810..c4ff174a 100644
--- a/src/utils/store.ts
+++ b/src/utils/store.ts
@@ -93,7 +93,7 @@ export const initialState = (): FlowState => ({
   zoomActivationKeyCode: undefined,
 
   hooks: createHooks(),
-  loading: false,
+  loading: undefined,
 
   markerEndId: undefined,
   storageKey: undefined,