PATCH: feat(bimdata-tree): add dragAndDrop prop to enable/disable dra…

…g and drop feature (#349)
bimdata · Apr 11, 2024 · 65a8aad · 65a8aad
1 parent 620fdd0
commit 65a8aad
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 7 deletions.
diff --git a/src/BIMDataComponents/BIMDataTree/BIMDataTree.vue b/src/BIMDataComponents/BIMDataTree/BIMDataTree.vue
@@ -7,7 +7,12 @@
     @mouseup.self="onMouseUp"
   >
     <div class="bimdata-tree__nodes" @mouseleave="onNodesMouseLeave">
-      <Node v-for="node of data" :key="node.id" :node="node">
+      <Node
+        v-for="node of data"
+        :key="node.id"
+        :node="node"
+        :drag-and-drop="dragAndDrop"
+      >
         <slot
           name="node"
           :node="node"
@@ -73,6 +78,10 @@ export default {
       type: Number,
       default: null,
     },
+    dragAndDrop: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ["drop", "click", "hover"],
   setup(props, { emit }) {
@@ -95,7 +104,10 @@ export default {
 
     const dropHelperDisplayed = computed(
       () =>
-        hover.value && state.dragPosition !== null && state.hoveredNode === null
+        props.dragAndDrop &&
+        hover.value &&
+        state.dragPosition !== null &&
+        state.hoveredNode === null
     );
 
     return {

diff --git a/src/BIMDataComponents/BIMDataTree/Node.vue b/src/BIMDataComponents/BIMDataTree/Node.vue
@@ -44,6 +44,7 @@
     v-if="node.children?.length > 0 && expanded"
     :node="node"
     :depth="depth + 1"
+    :drag-and-drop="dragAndDrop"
   />
 </template>
 
@@ -64,20 +65,25 @@ NodeChildren = {
       type: Number,
       default: 0,
     },
+    dragAndDrop: {
+      type: Boolean,
+      default: false,
+    },
   },
   render() {
-    const { node, depth, root } = this;
+    const { node, depth, dragAndDrop, root } = this;
 
     const state = root.state;
 
     return node.children.map(child =>
-      h(Node, { node: child, depth, key: child.id }, () =>
+      h(Node, { node: child, depth, dragAndDrop, key: child.id }, () =>
         root.$slots.node?.({
           node: child,
           depth,
           selected: child.id === state.selectedId,
           hovered: child.id === state.hoveredNode?.id,
           ancestorSelected: state.hasAncestorSelected(child),
+          dragAndDrop,
         })
       )
     );
@@ -99,6 +105,10 @@ Node = {
       type: Number,
       default: 0,
     },
+    dragAndDrop: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props) {
     const state = inject("state");
@@ -154,7 +164,11 @@ Node = {
     };
 
     const dropHelperPosition = computed(() => {
-      if (!state.dragPosition || state.hoveredNode?.id !== props.node.id)
+      if (
+        !props.dragAndDrop ||
+        !state.dragPosition ||
+        state.hoveredNode?.id !== props.node.id
+      )
         return null;
 
       return state.getNodeDropPosition(props.node, nodeRef.value);

diff --git a/src/BIMDataComponents/BIMDataTree/state.js b/src/BIMDataComponents/BIMDataTree/state.js
@@ -62,7 +62,7 @@ export default function useState(props, emit) {
     state.dragPosition = { x: clientX, y: clientY };
   };
   const onNodeMouseUp = (node, domElement, expanded) => {
-    if (!state.dragPosition) return;
+    if (!props.dragAndDrop || !state.dragPosition) return;
 
     if (state.hoveredNode?.id === pressedNode.value?.id) return;
 
@@ -131,7 +131,7 @@ export default function useState(props, emit) {
     emit("click", null);
   };
   const onTreeMouseUp = () => {
-    if (!state.dragPosition) return;
+    if (!props.dragAndDrop || !state.dragPosition) return;
 
     if (state.trees.indexOf(pressedNode.value) === state.trees.length - 1) {
       // to drop the last root node at the end of the list does not fire the drop event