update(composable): Correct starting positions

* Apply starting positions to x y coordinates * Remove controlledRef, a watcher is enough * Check if val and oldVal are equal using deepequal func * Add console error if composable used without a valid element ref
bcakmakoglu · Aug 19, 2021 · 0fb3822 · 0fb3822
1 parent d8750d6
commit 0fb3822
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 58 deletions.
diff --git a/src/hooks/useDraggable.ts b/src/hooks/useDraggable.ts
@@ -1,5 +1,5 @@
-import { computed, isVue3, ref, Ref, watch } from 'vue-demi';
-import { controlledRef, createEventHook, get, MaybeRef, tryOnMounted, tryOnUnmounted, unrefElement } from '@vueuse/core';
+import { ref, Ref, watch } from 'vue-demi';
+import { createEventHook, get, MaybeRef, tryOnMounted, tryOnUnmounted, unrefElement } from '@vueuse/core';
 import log from '../utils/log';
 import {
   DraggableEventHandler,
@@ -11,13 +11,10 @@ import {
 } from '../utils/types';
 import { canDragX, canDragY, createDraggableData, getBoundPosition } from '../utils/positionFns';
 import { createCSSTransform, createSVGTransform } from '../utils/domFns';
+import { deepEqual } from '../utils/shims';
 import useDraggableCore from './useDraggableCore';
 
 const useDraggable = (target: MaybeRef<any>, options: Partial<DraggableOptions>): UseDraggable => {
-  if (!target) {
-    console.warn('You are trying to use <Draggable> without passing a valid target reference.');
-  }
-
   const initState = (initialState: Partial<DraggableState>): DraggableState =>
     Object.assign(
       {
@@ -55,24 +52,13 @@ const useDraggable = (target: MaybeRef<any>, options: Partial<DraggableOptions>)
       initialState
     );
 
-  const node = computed(() => unrefElement(target));
-  let state: Ref<DraggableState>;
-  if (isVue3) {
-    state = controlledRef<DraggableState>(initState(options), {
-      onBeforeChange(val) {
-        coreState.value = { ...coreState.value, ...val };
-      },
-      onChanged() {
-        onUpdated();
-      }
-    });
-  } else {
-    state = ref(initState(options)) as Ref<DraggableState>;
-    watch(state, (val) => {
-      coreState.value = { ...coreState.value, ...val };
-      onUpdated();
-    });
-  }
+  let node = ref();
+  const state = ref(initState(options)) as Ref<DraggableState>;
+  watch(state, (val, oldVal) => {
+    if (deepEqual(val, oldVal)) return;
+    coreState.value = { ...coreState.value, ...val };
+    onUpdated();
+  });
 
   const onDragStartHook = createEventHook<DraggableEvent>(),
     onDragHook = createEventHook<DraggableEvent>(),
@@ -277,12 +263,18 @@ const useDraggable = (target: MaybeRef<any>, options: Partial<DraggableOptions>)
   });
 
   tryOnMounted(() => {
-    const startX =
+    node = unrefElement(target);
+    if (!node) {
+      console.error('You are trying to use <Draggable> without passing a valid target reference.');
+      return;
+    }
+    const x =
       (get(state).position ? get(state).position?.x : get(state).defaultPosition.x) || parseInt(get(node).style.top, 10) || 0;
-    const startY =
+    const y =
       (get(state).position ? get(state).position?.x : get(state).defaultPosition.x) || parseInt(get(node).style.left, 10) || 0;
-    get(state).defaultPosition.x = startX;
-    get(state).defaultPosition.y = startY;
+    get(state).defaultPosition = { x, y };
+    get(state).x = x;
+    get(state).y = y;
     addClasses() && onUpdated();
   });
 

diff --git a/src/hooks/useDraggableCore.ts b/src/hooks/useDraggableCore.ts
@@ -1,5 +1,5 @@
-import { computed, isVue3, ref, Ref, watch, watchEffect } from 'vue-demi';
-import { get, createEventHook, MaybeRef, unrefElement, useEventListener, controlledRef } from '@vueuse/core';
+import { ref, Ref, watch } from 'vue-demi';
+import { get, createEventHook, MaybeRef, unrefElement, useEventListener, tryOnMounted } from '@vueuse/core';
 import {
   DraggableCoreOptions,
   DraggableCoreState,
@@ -18,6 +18,7 @@ import {
 import { createCoreData, getControlPosition, snapToGrid } from '../utils/positionFns';
 import log from '../utils/log';
 import { addEvent } from '../utils/domFns';
+import { deepEqual } from '../utils/shims';
 
 // Simple abstraction for dragging events names.
 const eventsFor = {
@@ -37,12 +38,6 @@ const eventsFor = {
 let dragEventFor = eventsFor.mouse;
 
 const useDraggableCore = (target: MaybeRef<any>, options: Partial<DraggableCoreOptions>): UseDraggableCore => {
-  if (!target) {
-    console.warn(
-      'You are trying to use <DraggableCore> without passing a valid node reference. This will cause errors down the line.'
-    );
-  }
-
   const initState = (initialState: Partial<DraggableCoreState>): DraggableCoreState =>
     Object.assign(
       {
@@ -63,27 +58,18 @@ const useDraggableCore = (target: MaybeRef<any>, options: Partial<DraggableCoreO
         start: () => {},
         move: () => {},
         stop: () => {},
-        mouseDown: () => {},
+        mouseDown: () => {}
       },
       initialState
     );
   let [posX, posY] = [0, 0];
 
-  const node = computed(() => unrefElement(target));
-  let state: Ref<DraggableCoreState>;
-
-  if (isVue3) {
-    state = controlledRef<DraggableCoreState>(initState(options), {
-      onChanged() {
-        init();
-      }
-    });
-  } else {
-    state = ref(initState(options)) as Ref<DraggableCoreState>;
-    watch(state, () => {
-      init();
-    });
-  }
+  let node = ref();
+  const state = ref(initState(options)) as Ref<DraggableCoreState>;
+  watch(state, (val, oldVal) => {
+    if (deepEqual(val, oldVal)) return;
+    init();
+  });
 
   const onDragStartHook = createEventHook<DraggableEvent>(),
     onDragHook = createEventHook<DraggableEvent>(),
@@ -266,12 +252,14 @@ const useDraggableCore = (target: MaybeRef<any>, options: Partial<DraggableCoreO
     }
   };
 
-  watchEffect(
-    () => {
-      init();
-    },
-    { flush: 'post' }
-  );
+  tryOnMounted(() => {
+    node = unrefElement(target);
+    if (!node) {
+      console.error('You are trying to use <DraggableCore> without passing a valid node reference. Canceling initialization.');
+      return;
+    }
+    init();
+  });
 
   return {
     state,