fix: current reactive dragging state for custom

fix #2

docs/demos/drag-from-outside.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount } from 'vue'
+// you can import from 'lodash-es' or implement it by yourself
+import { throttle } from '@vexip-ui/utils'
 
 const layout = ref([
   { x: 0, y: 0, w: 2, h: 2, i: '0' },
@@ -35,7 +37,7 @@ function syncMousePosition(event: MouseEvent) {
 const dropId = 'drop'
 const dragItem = { x: -1, y: -1, w: 2, h: 2, i: '' }
 
-function drag() {
+const drag = throttle(() => {
   const parentRect = wrapper.value?.getBoundingClientRect()
 
   if (!parentRect) return
@@ -67,7 +69,10 @@ function drag() {
       item.wrapper.style.display = 'none'
     } catch (e) {}
 
-    item.state.dragging = { top: mouseAt.y - parentRect.top, left: mouseAt.x - parentRect.left }
+    Object.assign(item.state, {
+      top: mouseAt.y - parentRect.top,
+      left: mouseAt.x - parentRect.left
+    })
     const newPos = item.calcXY(mouseAt.y - parentRect.top, mouseAt.x - parentRect.left)
 
     if (mouseInGrid) {
@@ -80,7 +85,7 @@ function drag() {
       layout.value = layout.value.filter(item => item.i !== dropId)
     }
   }
-}
+})
 
 function dragEnd() {
   const parentRect = wrapper.value?.getBoundingClientRect()
@@ -97,6 +102,8 @@ function dragEnd() {
     alert(`Dropped element props:\n${JSON.stringify(dragItem, ['x', 'y', 'w', 'h'], 2)}`)
     gridLayout.value.dragEvent('dragend', dropId, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
     layout.value = layout.value.filter(item => item.i !== dropId)
+  } else {
+    return
   }
 
   layout.value.push({

src/components/grid-item.vue

@@ -131,7 +131,15 @@ const state = reactive({
   useStyleCursor: true,
 
   isDragging: false,
+  dragging: {
+    top: -1,
+    left: -1
+  },
   isResizing: false,
+  resizing: {
+    width: -1,
+    height: -1
+  },
   style: {} as Record<string, string>,
   rtl: false
 })
@@ -154,15 +162,6 @@ let innerY = props.y
 let innerW = props.w
 let innerH = props.h
 
-let dragging = {
-  top: -1,
-  left: -1
-}
-let resizing = {
-  width: -1,
-  height: -1
-}
-
 const wrapper = ref<HTMLElement>()
 
 const instance = reactive({
@@ -404,17 +403,17 @@ function createStyle() {
   const pos = calcPosition(innerX, innerY, innerW, innerH)
 
   if (state.isDragging) {
-    pos.top = dragging.top
+    pos.top = state.dragging.top
     // Add rtl support
     if (renderRtl.value) {
-      pos.right = dragging.left
+      pos.right = state.dragging.left
     } else {
-      pos.left = dragging.left
+      pos.left = state.dragging.left
     }
   }
   if (state.isResizing) {
-    pos.width = resizing.width
-    pos.height = resizing.height
+    pos.width = state.resizing.width
+    pos.height = state.resizing.height
   }
 
   let style
@@ -458,7 +457,12 @@ function handleResize(event: MouseEvent) {
   if (props.static) return
 
   const type = event.type
-  if ((type === 'resizestart' && state.isResizing) || (type !== 'resizestart' && !state.isResizing)) { return }
+  if (
+    (type === 'resizestart' && state.isResizing) ||
+    (type !== 'resizestart' && !state.isResizing)
+  ) {
+    return
+  }
 
   const position = getControlPosition(event)
   // Get the current drag point from the event. This is used as the offset.
@@ -475,27 +479,27 @@ function handleResize(event: MouseEvent) {
       pos = calcPosition(innerX, innerY, innerW, innerH)
       newSize.width = pos.width
       newSize.height = pos.height
-      resizing = newSize
+      state.resizing = newSize
       state.isResizing = true
       break
     }
     case 'resizemove': {
       const coreEvent = createCoreData(lastW, lastH, x, y)
       if (renderRtl.value) {
-        newSize.width = resizing.width - coreEvent.deltaX / state.transformScale
+        newSize.width = state.resizing.width - coreEvent.deltaX / state.transformScale
       } else {
-        newSize.width = resizing.width + coreEvent.deltaX / state.transformScale
+        newSize.width = state.resizing.width + coreEvent.deltaX / state.transformScale
       }
-      newSize.height = resizing.height + coreEvent.deltaY / state.transformScale
-      resizing = newSize
+      newSize.height = state.resizing.height + coreEvent.deltaY / state.transformScale
+      state.resizing = newSize
       break
     }
     case 'resizeend': {
       pos = calcPosition(innerX, innerY, innerW, innerH)
       newSize.width = pos.width
       newSize.height = pos.height
 
-      resizing = { width: -1, height: -1 }
+      state.resizing = { width: -1, height: -1 }
       state.isResizing = false
       break
     }
@@ -539,7 +543,9 @@ function handleDrag(event: MouseEvent) {
   if (props.static || state.isResizing) return
 
   const type = event.type
-  if ((type === 'dragstart' && state.isDragging) || (type !== 'dragstart' && !state.isDragging)) { return }
+  if ((type === 'dragstart' && state.isDragging) || (type !== 'dragstart' && !state.isDragging)) {
+    return
+  }
 
   const position = getControlPosition(event)
 
@@ -573,19 +579,19 @@ function handleDrag(event: MouseEvent) {
         newPosition.left = cLeft - pLeft
       }
       newPosition.top = cTop - pTop
-      dragging = newPosition
+      state.dragging = newPosition
       state.isDragging = true
       break
     }
     case 'dragmove': {
       const coreEvent = createCoreData(lastX, lastY, x, y)
       // Add rtl support
       if (renderRtl.value) {
-        newPosition.left = dragging.left - coreEvent.deltaX / state.transformScale
+        newPosition.left = state.dragging.left - coreEvent.deltaX / state.transformScale
       } else {
-        newPosition.left = dragging.left + coreEvent.deltaX / state.transformScale
+        newPosition.left = state.dragging.left + coreEvent.deltaX / state.transformScale
       }
-      newPosition.top = dragging.top + coreEvent.deltaY / state.transformScale
+      newPosition.top = state.dragging.top + coreEvent.deltaY / state.transformScale
       if (state.bounded) {
         const bottomBoundary =
           target.offsetParent.clientHeight -
@@ -597,7 +603,7 @@ function handleDrag(event: MouseEvent) {
         newPosition.left = clamp(newPosition.left, 0, rightBoundary)
       }
 
-      dragging = newPosition
+      state.dragging = newPosition
       break
     }
     case 'dragend': {
@@ -618,7 +624,7 @@ function handleDrag(event: MouseEvent) {
         newPosition.left = cLeft - pLeft
       }
       newPosition.top = cTop - pTop
-      dragging = { top: -1, left: -1 }
+      state.dragging = { top: -1, left: -1 }
       state.isDragging = false
       break
     }
@@ -703,9 +709,7 @@ function calcXY(top: number, left: number) {
 }
 
 function calcColWidth() {
-  const colWidth = (state.containerWidth - state.margin[0] * (state.cols + 1)) / state.cols
-  // console.log("### COLS=" + this.cols + " COL WIDTH=" + colWidth + " MARGIN " + this.margin[0]);
-  return colWidth
+  return (state.containerWidth - state.margin[0] * (state.cols + 1)) / state.cols
 }
 
 function calcGridItemWHPx(gridUnits: number, colOrRowSize: number, marginPx: number) {

src/components/grid-layout.vue

@@ -315,7 +315,7 @@ provide(
 )
 provide(EMITTER_KEY, emitter)
 
-defineExpose({ state, getItem, dragEvent })
+defineExpose({ state, getItem, resizeEvent, dragEvent })
 
 function increaseItem(item: any) {
   itemInstances.set(item.i, item)
@@ -387,7 +387,6 @@ function dragEvent(
   h: number,
   w: number
 ) {
-  console.log(eventName)
   let l = getLayoutItem(currentLayout.value, id)!
 
   // GetLayoutItem sometimes returns null object

src/helpers/common.ts

@@ -233,7 +233,6 @@ export function moveElement(
   // Move each item that collides away from this element.
   for (let i = 0, len = collisions.length; i < len; i++) {
     const collision = collisions[i]
-    // console.log('resolving collision between', l.i, 'at', l.y, 'and', collision.i, 'at', collision.y);
 
     // Short circuit so we can't infinite loop
     if (collision.moved) continue