From c48a0a9e2afef119193272cadd03613f0fab8470 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 21 Nov 2021 18:19:06 +0100
Subject: [PATCH] fix: add missing click and doubleclick events to nodes/edges

* ssr bug

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/components/Edges/EdgeWrapper.vue |  7 ++++++-
 src/components/Nodes/NodeWrapper.vue | 28 ++++++++++++++++++++--------
 src/container/ZoomPane/ZoomPane.vue  |  2 +-
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/components/Edges/EdgeWrapper.vue b/src/components/Edges/EdgeWrapper.vue
index 713f9cb1..597e6744 100644
--- a/src/components/Edges/EdgeWrapper.vue
+++ b/src/components/Edges/EdgeWrapper.vue
@@ -31,10 +31,14 @@ const onEdgeClick = (event: MouseEvent) => {
     store.unsetNodesSelection()
     store.addSelectedElements([props.edge])
   }
-
+  store.hooks.elementClick.trigger({ event, element: props.edge })
   store.hooks.edgeClick.trigger({ event, edge: props.edge })
 }
 
+const onDoubleClick = (event: MouseEvent) => {
+  store.hooks.edgeDoubleClick.trigger({ event, edge: props.edge })
+}
+
 const onEdgeContextMenu = (event: MouseEvent) =>
   store.hooks.edgeContextMenu.trigger({
     event,
@@ -150,6 +154,7 @@ export default {
       props.edge.class,
     ]"
     @click="onEdgeClick"
+    @dblClick="onDoubleClick"
     @contextmenu="onEdgeContextMenu"
     @mouseenter="onEdgeMouseEnter"
     @mousemove="onEdgeMouseMove"
diff --git a/src/components/Nodes/NodeWrapper.vue b/src/components/Nodes/NodeWrapper.vue
index 64bf3166..000f549b 100644
--- a/src/components/Nodes/NodeWrapper.vue
+++ b/src/components/Nodes/NodeWrapper.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
 import { useStore } from '../../composables'
-import { GraphNode, SnapGrid } from '../../types'
+import { FlowEvents, GraphNode, SnapGrid } from '../../types'
 import { NodeId } from '../../context'
 
 interface NodeWrapperProps {
@@ -10,6 +10,15 @@ interface NodeWrapperProps {
   snapGrid?: SnapGrid
 }
 
+interface NodeEvents {
+  (event: 'mouseEnter', data: FlowEvents['nodeMouseEnter']): void
+  (event: 'mouseMove', data: FlowEvents['nodeMouseMove']): void
+  (event: 'mouseLeave', data: FlowEvents['nodeMouseLeave']): void
+  (event: 'contextMenu', data: FlowEvents['nodeContextMenu']): void
+  (event: 'click', data: FlowEvents['nodeClick']): void
+  (event: 'click', data: FlowEvents['nodeClick']): void
+}
+
 const props = withDefaults(defineProps<NodeWrapperProps>(), {
   selected: false,
   selectNodesOnDrag: true,
@@ -41,26 +50,28 @@ const scale = computed(() => store.transform[2])
 const selected = computed(() => selectable.value && store.selectedElements?.some(({ id }) => id === props.node.id))
 
 const onMouseEnterHandler = () =>
-  props.node.__vf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: props.node }))
+  props.node.__vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: props.node }))
 
 const onMouseMoveHandler = () =>
-  props.node.__vf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseMove.trigger({ event, node: props.node }))
+  props.node.__vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseMove.trigger({ event, node: props.node }))
 
 const onMouseLeaveHandler = () =>
-  props.node.__vf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseLeave.trigger({ event, node: props.node }))
+  props.node.__vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseLeave.trigger({ event, node: props.node }))
 
 const onContextMenuHandler = () => (event: MouseEvent) => store.hooks.nodeContextMenu.trigger({ event, node: props.node })
 
+const onDoubleClick = () => (event: MouseEvent) => store.hooks.nodeDoubleClick.trigger({ event, node: props.node })
+
 const onSelectNodeHandler = (event: MouseEvent) => {
+  const n = props.node
   if (!draggable.value) {
-    const n = props.node
     if (selectable.value) {
       store.unsetNodesSelection()
-
       if (!selected.value) store.addSelectedElements([n])
     }
-    store.hooks.nodeClick.trigger({ event, node: n })
   }
+  store.hooks.elementClick.trigger({ event, element: n })
+  store.hooks.nodeClick.trigger({ event, node: n })
 }
 
 const onDragStart: DraggableEventListener = ({ event }) => {
@@ -97,7 +108,7 @@ const onDragStop: DraggableEventListener = ({ event }) => {
   const n = props.node
   // onDragStop also gets called when user just clicks on a node.
   // Because of that we set dragging to true inside the onDrag handler and handle the click here
-  if (!props.node.__vf?.isDragging) {
+  if (!props.node.__vf.isDragging) {
     if (selectable.value && !props.selectNodesOnDrag && !selected.value) {
       store.addSelectedElements([n])
     }
@@ -181,6 +192,7 @@ export default {
       @mouseleave="onMouseLeaveHandler"
       @contextmenu="onContextMenuHandler"
       @click="onSelectNodeHandler"
+      @dblclick="onDoubleClick"
     >
       <slot
         v-bind="{
diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue
index ed4da748..aa1e8a5c 100644
--- a/src/container/ZoomPane/ZoomPane.vue
+++ b/src/container/ZoomPane/ZoomPane.vue
@@ -182,7 +182,7 @@ store.dimensions = {
 }
 
 // skip waiting for ssr
-if (import.meta.env.SSR || typeof window === 'undefined') await until(() => store.isReady)
+if (typeof window !== 'undefined') await until(() => store.isReady).toMatch((y) => y)
 
 watch(
   [width, height],