From 86e7c12e272fbb990d46a2de83fd460200d3d67d Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Sat, 31 Aug 2024 20:38:34 -0400
Subject: [PATCH] Add draggable/droppable flags

---
 .../common/TreeExplorerTreeNode.vue           | 61 ++++++++++---------
 src/types/treeExplorerTypes.ts                |  4 ++
 2 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/src/components/common/TreeExplorerTreeNode.vue b/src/components/common/TreeExplorerTreeNode.vue
index f958d0b8e..6909b23ad 100644
--- a/src/components/common/TreeExplorerTreeNode.vue
+++ b/src/components/common/TreeExplorerTreeNode.vue
@@ -78,36 +78,41 @@ onMounted(() => {
   treeNodeElement.value = container.value?.closest(
     '.p-tree-node-content'
   ) as HTMLElement
-  dropTargetCleanup = dropTargetForElements({
-    element: treeNodeElement.value,
-    onDrop: (event) => {
-      const dndData = event.source.data as TreeExplorerDragAndDropData
-      if (dndData.type === 'tree-explorer-node') {
+  if (props.node.droppable) {
+    dropTargetCleanup = dropTargetForElements({
+      element: treeNodeElement.value,
+      onDrop: (event) => {
+        const dndData = event.source.data as TreeExplorerDragAndDropData
+        if (dndData.type === 'tree-explorer-node') {
+          canDrop.value = false
+          emit('itemDropped', props.node, dndData.data)
+        }
+      },
+      onDragEnter: (event) => {
+        const dndData = event.source.data as TreeExplorerDragAndDropData
+        if (dndData.type === 'tree-explorer-node') {
+          canDrop.value = true
+        }
+      },
+      onDragLeave: () => {
         canDrop.value = false
-        emit('itemDropped', props.node, dndData.data)
       }
-    },
-    onDragEnter: (event) => {
-      const dndData = event.source.data as TreeExplorerDragAndDropData
-      if (dndData.type === 'tree-explorer-node') {
-        canDrop.value = true
-      }
-    },
-    onDragLeave: () => {
-      canDrop.value = false
-    }
-  })
-  draggableCleanup = draggable({
-    element: treeNodeElement.value,
-    getInitialData() {
-      return {
-        type: 'tree-explorer-node',
-        data: props.node
-      }
-    },
-    onDragStart: () => emit('dragStart', props.node),
-    onDrop: () => emit('dragEnd', props.node)
-  })
+    })
+  }
+
+  if (props.node.draggable) {
+    draggableCleanup = draggable({
+      element: treeNodeElement.value,
+      getInitialData() {
+        return {
+          type: 'tree-explorer-node',
+          data: props.node
+        }
+      },
+      onDragStart: () => emit('dragStart', props.node),
+      onDrop: () => emit('dragEnd', props.node)
+    })
+  }
 })
 onUnmounted(() => {
   dropTargetCleanup()
diff --git a/src/types/treeExplorerTypes.ts b/src/types/treeExplorerTypes.ts
index d164deb27..54d404fc8 100644
--- a/src/types/treeExplorerTypes.ts
+++ b/src/types/treeExplorerTypes.ts
@@ -15,6 +15,10 @@ export interface TreeExplorerNode<T = any> {
     node: TreeExplorerNode<T>,
     child: TreeExplorerNode<T>
   ) => void
+  // Whether the node is draggable
+  draggable?: boolean
+  // Whether the node is droppable
+  droppable?: boolean
 }
 
 export interface RenderedTreeExplorerNode<T = any> extends TreeExplorerNode<T> {