fix(ui: tree): disable hoveredNodeId if is dragged tree node

massCodeIO · Apr 6, 2022 · 6eab5e6 · 6eab5e6
1 parent e2e4ff3
commit 6eab5e6
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/src/renderer/components/sidebar/TheSidebar.vue b/src/renderer/components/sidebar/TheSidebar.vue
@@ -102,7 +102,7 @@ watch(
   () => folderStore.hoveredId,
   () => {
     if (treeRef.value) {
-      treeRef.value.hoveredNodeId = folderStore.hoveredId
+      treeRef.value.setHoveredNodeId(folderStore.hoveredId)
     }
   }
 )

diff --git a/src/renderer/components/ui/AppTree/AppTree.vue b/src/renderer/components/ui/AppTree/AppTree.vue
@@ -50,6 +50,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const hoveredNodeId = ref('')
+const isHoveredByIdDisabled = ref(false)
 
 const cloneNodes = () => {
   store.clonedNodes = clone(props.modelValue) as Node[]
@@ -58,12 +59,18 @@ const cloneNodes = () => {
 const updateValue = () => emit('update:modelValue', store.clonedNodes)
 const clickNode = (id: string) => emit('click:node', id)
 
+const setHoveredNodeId = (id: string) => {
+  if (isHoveredByIdDisabled.value) return
+  hoveredNodeId.value = id
+}
+
 provide('updateValue', updateValue)
 provide('clickNode', clickNode)
 provide('contextMenuHandler', props.contextMenuHandler)
+provide('isHoveredByIdDisabled', isHoveredByIdDisabled)
 
 defineExpose({
-  hoveredNodeId
+  setHoveredNodeId
 })
 
 watch(

diff --git a/src/renderer/components/ui/AppTree/AppTreeNode.vue b/src/renderer/components/ui/AppTree/AppTreeNode.vue
@@ -95,7 +95,7 @@
 
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core'
-import type { CSSProperties } from 'vue'
+import type { CSSProperties, Ref } from 'vue'
 import { computed, inject, ref } from 'vue'
 import {
   store,
@@ -126,6 +126,7 @@ const props = withDefaults(defineProps<Props>(), {
 const updateValue = inject('updateValue') as Function
 const clickNode = inject('clickNode') as Function
 const contextMenuHandler = inject('contextMenuHandler') as Function
+const isHoveredByIdDisabled = inject('isHoveredByIdDisabled') as Ref
 
 const hoveredId = ref()
 const overPosition = ref<Position>()
@@ -194,6 +195,7 @@ const onClickContextMenu = async () => {
 
 const onDragStart = (e: DragEvent) => {
   store.dragNode = props.node
+  isHoveredByIdDisabled.value = true
 
   const el = document.createElement('div')
   const style = {
@@ -220,6 +222,7 @@ const onDragEnd = () => {
   store.dragEnterNode = undefined
   overPosition.value = undefined
   isDragged.value = false
+  isHoveredByIdDisabled.value = false
 }
 
 const onDragEnter = () => {