@mixd-id/web-scaffold 0.1.230406119 → 0.1.230406120

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406119",
+  "version": "0.1.230406120",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/TreeViewItem.vue

@@ -1,10 +1,9 @@
 <template>
-	<div @copy.stop.prevent="copy">
+	<div @copy.stop.prevent="copy"
+			 @mouseover.stop="hoverMouseOver"
+			 @mouseout.stop="hoverMouseOut">
 		<div ref="item" :class="itemClass"
-				 @mouseover="hoverMouseOver"
-				 @mouseout="hoverMouseOut"
-				 @mousedown="mouseDown"
-				 @mouseup="hoverMouseUp">
+				 @mousedown="mouseDown">
 			<button type="button" class="py-2" v-if="Array.isArray((item ?? {}).items) && item.items.length > 0"
 							@click="childCollapsed = !childCollapsed">
 				<svg v-if="!childCollapsed" width="16" height="16" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
@@ -48,6 +47,7 @@
 import {copyToClipboard} from "../utils/helpers.mjs";
 
 let dragged = null
+let guide1 = null
 
 export default{
 
@@ -120,74 +120,88 @@ export default{
 			cloned.style.top = (e.clientY - 10) + "px"
 			cloned.style.width = this.$el.clientWidth + "px"
 			cloned.style.pointerEvents = 'none'
+			cloned.style.opacity = '0.5'
 			document.body.appendChild(cloned)
 
 			dragged = {
 				item: this.item,
-				parent: this.parent
+				parent: this.parent,
+				startY: e.clientY
 			}
 
 			const mouseMove = (e) => {
 				const distanceX = e.clientX - startX
 				cloned.style.left = (rect.x + distanceX) + "px"
 				cloned.style.top = (e.clientY - 10) + "px"
+
+				dragged.clientY = e.clientY
 			}
 
 			const mouseUp = (e) => {
 				document.body.removeChild(cloned)
 				window.removeEventListener('mousemove', mouseMove)
 				window.removeEventListener('mouseup', mouseUp)
-			}
 
-			window.addEventListener('mousemove', mouseMove)
-			window.addEventListener('mouseup', mouseUp)
-		},
+				if(guide1.parentNode){
+					guide1.parentNode.removeChild(guide1)
+				}
 
-		hoverMouseUp(e){
+				if(dragged.parent && dragged.targetParent){
 
-			if(dragged && dragged.targetParent){
-				const targetIdx = dragged.targetParent.indexOf(dragged.target)
-				const startIdx = dragged.parent.indexOf(dragged.item)
+					let targetIdx = dragged.targetParent.indexOf(dragged.target)
+					const startIdx = dragged.parent.indexOf(dragged.item)
 
-				if(targetIdx >= -1 && (targetIdx !== startIdx || dragged.parent !== dragged.targetParent)){
+					/*if(e.clientY > dragged.startY){
+						targetIdx++
+					}*/
+					//console.log(e.clientY, dragged.startY, e.clientY > dragged.startY ? 'after' : 'before', targetIdx, startIdx)
 
-					if(dragged.parent === dragged.targetParent){
-						dragged.parent.splice(targetIdx, 0, dragged.parent.splice(startIdx, 1)[0])
-					}
-					else{
-						dragged.targetParent.splice(targetIdx, 0, dragged.parent.splice(startIdx, 1)[0])
-					}
+					if(targetIdx >= -1 && (targetIdx !== startIdx || dragged.parent !== dragged.targetParent)){
 
-					this.$emit('change')
+						if(dragged.parent === dragged.targetParent){
+							dragged.parent.splice(targetIdx, 0, dragged.parent.splice(startIdx, 1)[0])
+						}
+						else{
+							dragged.targetParent.splice(targetIdx, 0, dragged.parent.splice(startIdx, 1)[0])
+						}
+
+						this.$emit('change')
+					}
 				}
-			}
 
-			if(this.$refs.item){
-				this.$refs.item.classList.remove(this.$style.itemMouseOver)
+				dragged = null
 			}
-			window.removeEventListener('mouseup', this.hoverMouseUp)
-			dragged = null
+
+			window.addEventListener('mousemove', mouseMove)
+			window.addEventListener('mouseup', mouseUp)
 		},
 
 		hoverMouseOver(e){
+			if(!dragged) return
 
-			if(dragged && dragged.item !== this.item){
-				this.$refs.item.classList.add(this.$style.itemMouseOver)
-				dragged.target = this.item
-				dragged.targetParent = this.parent
-				window.addEventListener('mouseup', this.hoverMouseUp)
+			if(!guide1){
+				guide1 = this.createGuide()
 			}
 
+			dragged.target = this.item
+			dragged.targetParent = this.parent
+
+			guide1.addEventListener('mouseover', this.hoverMouseOver)
+
+			this.$el.insertBefore(guide1, e.clientY < dragged.startY ? this.$refs.item : null)
 		},
 
 		hoverMouseOut(e){
+			if(!dragged) return
 
-			if(dragged){
-				this.$refs.item.classList.remove(this.$style.itemMouseOver)
-				delete dragged.target
-				delete dragged.targetParent
-			}
+			delete dragged.target
+			delete dragged.targetParent
+		},
 
+		createGuide(){
+			const el = document.createElement('div')
+			el.classList.add(this.$style.guide)
+			return el
 		},
 
 	},
@@ -230,4 +244,8 @@ export default{
 	@apply !bg-primary;
 }
 
+.guide{
+	@apply h-[1px] bg-primary rounded-lg;
+}
+
 </style>