From a17944650a614466f5b4c0f4ecd28f934e6dd6cd Mon Sep 17 00:00:00 2001
From: Erik Verheul <erik@verheulconsultants.nl>
Date: Fri, 18 Oct 2024 18:12:50 +0200
Subject: [PATCH] Annotate the product node to prevent it from instantly being
 dragged when switched to

---
 documentation.txt                                |  1 +
 src/components/views/sl-vue-tree/sl-vue-tree.js  | 15 +++++++--------
 src/components/views/sl-vue-tree/sl-vue-tree.vue |  6 +++---
 src/store/store.js                               |  5 ++++-
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/documentation.txt b/documentation.txt
index 6670f851..ed5429b7 100644
--- a/documentation.txt
+++ b/documentation.txt
@@ -82,6 +82,7 @@ data: {
 	lastCommentToHistory: doc.lastCommentToHistory,
 	lastChange: Date.now(), // calculated on load, updated on change of title, priority, productId, parentId, state, subtype(3x), spSize, tsSize, acceptance and description
 }
+tmpPreventDrag: false // a temporary state to prevent a selected product node to enter the dragging mode after selection
 // temporary and private use, not stored, not synced with other on-line users
 tmp: {
 	isHighlighted_1: boolean // light blue
diff --git a/src/components/views/sl-vue-tree/sl-vue-tree.js b/src/components/views/sl-vue-tree/sl-vue-tree.js
index 2b3b0c90..0d0fd722 100644
--- a/src/components/views/sl-vue-tree/sl-vue-tree.js
+++ b/src/components/views/sl-vue-tree/sl-vue-tree.js
@@ -32,6 +32,7 @@ function data() {
 			y: 0,
 		},
 		preventDrag: false,
+		preventProductDrag: false,
 		lastClickedNode: {},
 	}
 }
@@ -169,11 +170,7 @@ const methods = {
 	},
 
 	mouseMoveHandler(event) {
-		if (!this.isRoot) {
-			this.getRootComponent().mouseMoveHandler(event)
-			return
-		}
-		if (!this.isLeftMouseButtonDown || this.preventDrag || !this.lastClickedNode.isSelected) return
+		if (!this.isLeftMouseButtonDown || this.preventDrag || this.preventProductDrag || !this.lastClickedNode.isSelected) return
 		const initialDraggingState = this.isDragging
 		const isDraggingLocal = this.isDragging || this.lastMousePos.y !== event.clientY
 
@@ -213,6 +210,9 @@ const methods = {
 		// disallow selection of the root node
 		if (node.level === 1) return
 
+		// set preventProductDrag (true if clicked on a product node and the node is not expanded)
+		this.preventProductDrag = node.tmpPreventDrag && !node.isExpanded
+
 		if (!this.isDragging) {
 			// cursorPosition not available, so get it
 			const cPos = this.getCursorModelPositionFromCoords(event.clientX, event.clientY)
@@ -223,9 +223,9 @@ const methods = {
 		this.lastClickedNode = node
 	},
 
-	mouseUpLeftHandler(event) {
+	mouseUpLeftHandler(event, node) {
 		if (!this.isRoot) {
-			this.getRootComponent().mouseUpLeftHandler(event)
+			this.getRootComponent().mouseUpLeftHandler(event, node)
 			return
 		}
 
@@ -330,7 +330,6 @@ const methods = {
 		store.state.lastSelectCursorPosition = cursorPosition
 		const selNode = cursorPosition.nodeModel
 		if (selNode.isSelectable) {
-			this.preventDrag = false
 			const prevSelectedNode = store.state.selectedNodes.slice(-1)[0] || selNode
 			// ctrl-select or shift-select mode is allowed only if in professional mode and nodes have the same parent and are above PRODUCTLEVEL (epics, features and higher)
 			if (
diff --git a/src/components/views/sl-vue-tree/sl-vue-tree.vue b/src/components/views/sl-vue-tree/sl-vue-tree.vue
index a8d31356..78efc0eb 100644
--- a/src/components/views/sl-vue-tree/sl-vue-tree.vue
+++ b/src/components/views/sl-vue-tree/sl-vue-tree.vue
@@ -1,6 +1,6 @@
 <!-- This component is an improved and extended version of the Holiber sl-vue-tree. See https://github.com/holiber/sl-vue-tree -->
 <template>
-  <div class="sl-vue-tree" :class="{ 'sl-vue-tree-root': isRoot }">
+  <div class="sl-vue-tree" :class="{ 'sl-vue-tree-root': isRoot }" @mousemove="mouseMoveHandler">
     <!-- traverse the filtered nodes breadth first -->
     <div v-for="(node, nodeInd) in filteredNodes" :class="{
       'sl-vue-tree-selected': node.isSelected,
@@ -16,8 +16,8 @@
       }">
       </div>
 
-      <template class="sl-vue-tree-node-item" @mousedown.left="mouseDownLeftHandler($event, node)" @mouseup.left="mouseUpLeftHandler($event)"
-        @contextmenu="contextMenuHandler($event, node)" @mousemove="mouseMoveHandler($event)" :path="node.pathStr">
+      <template class="sl-vue-tree-node-item" @mousedown.left="mouseDownLeftHandler($event, node)" @mouseup.left="mouseUpLeftHandler($event, node)"
+        @contextmenu="contextMenuHandler($event, node)" :path="node.pathStr">
         <div :class="{
           'sl-vue-tree-cursor-inside':
             cursorPosition &&
diff --git a/src/store/store.js b/src/store/store.js
index f5889de9..f190f483 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -1328,8 +1328,11 @@ const store = createStore({
 			if (currentProductNode !== null && newCurrentProductNode !== null) {
 				// if the current product is not removed and the newly selected product exists
 				if (state.currentView !== 'coarseProduct') {
-					// collapse the current and expand the newly selected product branch
 					collapseNode(currentProductNode)
+					// select the product node to be expanded
+					state.helpersRef.selectNodeById(newProductId)
+					// prevent the product node to be set to the dragging state
+					newCurrentProductNode.tmpPreventDrag = true
 					expandNode(newCurrentProductNode)
 				}
 				// update current product id and title