From 024a4349181b85670189994e968ac557d4fd1ed0 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 25 Mar 2022 17:31:01 +0100
Subject: [PATCH] update: move mounted hooks up

* remove mounted hook from selection pane
---
 src/container/SelectionPane/SelectionPane.vue | 46 +++++++++----------
 .../TransformationPane/TransformationPane.vue |  6 +--
 src/container/VueFlow/VueFlow.vue             |  3 +-
 src/container/ZoomPane/ZoomPane.vue           |  2 +-
 4 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/src/container/SelectionPane/SelectionPane.vue b/src/container/SelectionPane/SelectionPane.vue
index 055184d9..a82b1c10 100644
--- a/src/container/SelectionPane/SelectionPane.vue
+++ b/src/container/SelectionPane/SelectionPane.vue
@@ -17,35 +17,33 @@ const onContextMenu = (event: MouseEvent) => store.hooks.paneContextMenu.trigger
 
 const onWheel = (event: WheelEvent) => store.hooks.paneScroll.trigger(event)
 
-onMounted(() => {
-  useKeyPress(store.deleteKeyCode, (keyPressed) => {
-    const selectedNodes = store.getSelectedNodes
-    const selectedEdges = store.getSelectedEdges
-    if (keyPressed && (selectedNodes || selectedEdges)) {
-      const connectedEdges = (selectedNodes && getConnectedEdges(selectedNodes, store.edges)) ?? []
+useKeyPress(store.deleteKeyCode, (keyPressed) => {
+  const selectedNodes = store.getSelectedNodes
+  const selectedEdges = store.getSelectedEdges
+  if (keyPressed && (selectedNodes || selectedEdges)) {
+    const connectedEdges = (selectedNodes && getConnectedEdges(selectedNodes, store.edges)) ?? []
 
-      const nodeChanges: NodeChange[] = selectedNodes.map((n) => ({ id: n.id, type: 'remove' }))
-      const edgeChanges: EdgeChange[] = [...selectedEdges, ...connectedEdges].map((e) => ({
-        id: e.id,
-        type: 'remove',
-      }))
+    const nodeChanges: NodeChange[] = selectedNodes.map((n) => ({ id: n.id, type: 'remove' }))
+    const edgeChanges: EdgeChange[] = [...selectedEdges, ...connectedEdges].map((e) => ({
+      id: e.id,
+      type: 'remove',
+    }))
 
-      store.hooks.nodesChange.trigger(nodeChanges)
-      store.hooks.edgesChange.trigger(edgeChanges)
-      store.nodesSelectionActive = false
+    store.hooks.nodesChange.trigger(nodeChanges)
+    store.hooks.edgesChange.trigger(edgeChanges)
+    store.nodesSelectionActive = false
 
-      store.resetSelectedElements()
-    }
-  })
+    store.resetSelectedElements()
+  }
+})
 
-  useKeyPress(store.multiSelectionKeyCode, (keyPressed) => {
-    store.multiSelectionActive = keyPressed
-  })
+useKeyPress(store.multiSelectionKeyCode, (keyPressed) => {
+  store.multiSelectionActive = keyPressed
+})
 
-  useKeyPress(store.selectionKeyCode, (keyPressed) => {
-    store.selectionActive =
-      store.selectionActive === true && keyPressed ? true : keyPressed && (store.selectionActive || store.elementsSelectable)
-  })
+useKeyPress(store.selectionKeyCode, (keyPressed) => {
+  store.selectionActive =
+    store.selectionActive === true && keyPressed ? true : keyPressed && (store.selectionActive || store.elementsSelectable)
 })
 </script>
 <script lang="ts">
diff --git a/src/container/TransformationPane/TransformationPane.vue b/src/container/TransformationPane/TransformationPane.vue
index b2294a13..39216ff5 100644
--- a/src/container/TransformationPane/TransformationPane.vue
+++ b/src/container/TransformationPane/TransformationPane.vue
@@ -7,9 +7,7 @@ import { onLoadGetEdges, onLoadGetElements, onLoadGetNodes, onLoadProject, onLoa
 
 const { id, store } = useVueFlow()
 
-const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
-
-onMounted(async () => {
+onMounted(() => {
   const { zoomIn, zoomOut, zoomTo, setTransform, getTransform, fitView, fitBounds, setCenter } = useZoomPanHelper(store)
   const instance: FlowInstance = {
     fitView: (params = { padding: 0.1 }) => fitView(params),
@@ -31,6 +29,8 @@ onMounted(async () => {
   store.paneReady = true
   store.hooks.paneReady.trigger(instance)
 })
+
+const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
 </script>
 <template>
   <div :key="`transformation-pane-${id}`" class="vue-flow__transformation-pane vue-flow__container" :style="{ transform }">
diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue
index 8f2f1ef8..06e8094e 100644
--- a/src/container/VueFlow/VueFlow.vue
+++ b/src/container/VueFlow/VueFlow.vue
@@ -45,6 +45,7 @@ const {
 } = useVueFlow(props)
 useHooks(hooks.value, emit)
 const { modelValue, nodes, edges } = useVModels(props, emit)
+onMounted(() => useWatch({ modelValue, nodes, edges }, props, store))
 
 if (applyDefault.value) {
   onNodesChange(applyNodeChanges)
@@ -57,8 +58,6 @@ if (props.edges && !storedEdges.value.length) setEdges(props.edges)
 if (modelValue && modelValue.value) modelValue.value = [...store.nodes, ...store.edges]
 if (nodes && nodes.value) nodes.value = store.nodes
 if (edges && edges.value) edges.value = store.edges
-
-onMounted(() => useWatch({ modelValue, nodes, edges }, props, store))
 </script>
 <script lang="ts">
 export default {
diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue
index ac19326b..97ff8c88 100644
--- a/src/container/ZoomPane/ZoomPane.vue
+++ b/src/container/ZoomPane/ZoomPane.vue
@@ -30,7 +30,7 @@ const transform = ref({
 })
 const { width, height } = useElementBounding(zoomPaneEl)
 
-onMounted(async () => {
+onMounted(() => {
   const d3Zoom = zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(store.translateExtent)
   const d3Selection = select(zoomPaneEl.value).call(d3Zoom)
   const d3ZoomHandler = d3Selection.on('wheel.zoom')