azdnd - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

draggable/draggable.js

@@ -27,3 +27,3 @@ import { diffPosition, dndEvent, dndState, getDocHeight, getDocScrollLeft, getDocScrollTop, getDocWidth, getPositionState, isOutside, isTouchDevice, siblings } from '/node_modules/azdom/utils.js';
       // the distance in pixels the gap is kept between snapped elements, defaults to 3.
-      snapGap: 3,
+      snapGap: 1,
       create: function (event, ui, me) {
@@ -64,6 +64,10 @@ // console.log('create', ui);
     me.containerBoundaries = null;
-    me.mouseX = 0;
+    me.mouseX = 0; // current mouse position
     me.mouseY = 0;
-    me.mouseDX = 0;
+    me.mouseLX = 0; // last mouse position
+    me.mouseLY = 0;
+    me.mouseDX = 0; // mouse moved distance
     me.mouseDY = 0;
+    me.mouseEX = 0; // mouse moved distance adjustment, usually snap sets these values
+    me.mouseEY = 0;
     me.N = 0;
@@ -157,2 +161,4 @@ me.E = 0;
 
+    me.mouseLX = me.mouseX;
+    me.mouseLY = me.mouseY;
     me.mouseX = e.touches ? e.touches[0].pageX : e.pageX;
@@ -168,17 +174,22 @@ me.mouseY = e.touches ? e.touches[0].pageY : e.pageY;
     if (settings.snapDistance > 0) {
-      // snap(initDiff, direction, allowOverlapOnMovingDirection = false, gap = 0, sticky = false)
+      // snap(initDiff, direction, allowOverlapOnMovingDirection = false, gap = 0, snapWhileSliding = false)
       me.snap(me._initDiffParent, 'top', true) || me.snap(me._initDiffParent, 'bottom', true);
       me.snap(me._initDiffParent, 'left', true) || me.snap(me._initDiffParent, 'right', true);
 
-      me._initDiffSiblings.map(initDiffSibling => {
+      for (const initDiffSibling of me._initDiffSiblings) {
         if (me.snap(initDiffSibling, 'topR', false, settings.snapGap) || me.snap(initDiffSibling, 'bottomR', false, -settings.snapGap)) {
-          // snap on moving direction edge
+          // snapped and slide on moving direction and snap to edge of other direction
           me.snap(initDiffSibling, 'left', false, 0, true) || me.snap(initDiffSibling, 'right', false, 0, true);
+          break;
         } else if (me.snap(initDiffSibling, 'leftR', false, settings.snapGap) || me.snap(initDiffSibling, 'rightR', false, -settings.snapGap)) {
-          // snap on moving direction edge
+          // snapped and slide on moving direction and snap to edge of other direction
           me.snap(initDiffSibling, 'top', false, 0, true) || me.snap(initDiffSibling, 'bottom', false, 0, true);
+          break;
         }
-      });
+      }
     }
 
+    me.mouseDX += me.mouseEX;
+    me.mouseDY += me.mouseEY;
+
     if (!me.resisted && Math.abs(me.mouseDX) < settings.resist && Math.abs(me.mouseDY) < settings.resist) {
@@ -308,2 +319,4 @@ return;
     me.mouseY = me.mouseY0 = e.touches ? e.touches[0].pageY : e.pageY;
+    me.mouseEX = 0;
+    me.mouseEY = 0;
 
@@ -317,10 +330,8 @@ if (settings.create(e, node, me) === false) {
 
-      me._initDiffSiblings = siblings(node, '[azdom-draggable]')
-        .filter(o => {
-          const bcr = o.getBoundingClientRect();
-          return bcr.height > 0 && bcr.width > 0;
-        })
-        .map(o => {
-          return diffPosition(node, o);
-        });
+      me._initDiffSiblings = siblings(node, '[azdom-draggable]').filter(o => {
+        const bcr = o.getBoundingClientRect();
+        return bcr.height > 0 && bcr.width > 0;
+      }).map(o => {
+        return diffPosition(node, o);
+      });
     }
@@ -640,9 +651,11 @@
 
-  snap(initDiff, direction, allowOverlapOnMovingDirection = false, gap = 0, sticky = false) {
+  // allowOverlapOnMovingDirection true when snapping to parent
+  // snapWhileSliding true when sliding on snapped border and further snap to other direction's edges
+  snap(initDiff, direction, allowOverlapOnMovingDirection = false, gap = 0, snapWhileSliding = false) {
     const me = this;
     const settings = me.settings;
 
-    const DETACHED = 1;
-    const STICKY = 2;
-    const SNAPPED = 3;
+    const DETACHED = 0;
+    const SNAPPED = 1;
+    const DETACHING = 2;
 
@@ -661,23 +674,51 @@ let movingDirection, otherDirection;
 
-    const notOverlapOnMovingDirection = (allowOverlapOnMovingDirection || !me.overlap(initDiff, movingDirection));
-    const overlapOnOtherDirection = me.overlap(initDiff, otherDirection);
-
-    // sticky is used on a secondary snap on the movind direction
-    const doSnap = sticky || (overlapOnOtherDirection && notOverlapOnMovingDirection);
-
-    if (doSnap && Math.abs(initDiff[direction] + me[`mouseD${movingDirection}`]) < settings.snapDistance) {
-      if (me[`_snapped${movingDirection}`]) {
-        if (Math.abs(me[`mouse${movingDirection}`] - me[`_mouseSnapped${movingDirection}`]) > settings.snapDistance * 2) {
-          me[`_snapped${movingDirection}`] = false;
-          return DETACHED;
-        } else {
-          me[`mouseD${movingDirection}`] = -initDiff[direction] + gap;
-          return STICKY;
+    if (allowOverlapOnMovingDirection || snapWhileSliding || me.overlap(initDiff, otherDirection)) {
+      const currentDiff = initDiff[direction] + me[`mouseD${movingDirection}`] + me[`mouseE${movingDirection}`] - gap;
+      const mouseMoved = me[`mouse${movingDirection}`] - me[`mouseL${movingDirection}`];
+      const doSnap = ((mouseMoved > 0 && currentDiff >= 0 && currentDiff < settings.snapDistance) || (mouseMoved < 0 && currentDiff <= 0 && currentDiff > -settings.snapDistance));
+      // if (direction === 'rightR')
+      //   console.log(currentDiff, mouseMoved, doSnap, 'x', initDiff[`_snapState${direction}`], 'y');
+      if (doSnap || initDiff[`_snapState${direction}`] === SNAPPED) {
+        if (initDiff[`_snapState${direction}`] === SNAPPED) {
+          const held = me[`mouse${movingDirection}`] - initDiff[`_mouseSnappedAt${direction}`];
+          // if (direction === 'left' || direction === 'right')
+          //   console.log('held', direction, held);
+          if (Math.abs(held) >= settings.snapDistance) {
+            initDiff[`_snapState${direction}`] = DETACHING;
+            delete initDiff[`_mouseSnappedAt${direction}`];
+            me[`mouseE${movingDirection}`] -= held;
+            // if (direction === 'rightR')
+            //   console.log(direction, 'detaching', 'held:', held);
+            return DETACHING;
+          } else {
+            me[`mouseD${movingDirection}`] = -initDiff[direction] - me[`mouseE${movingDirection}`] + gap;
+            // if (snapWhileSliding)
+            //   console.log(direction, 'snapped');
+            return SNAPPED;
+          }
+        } else if (initDiff[`_snapState${direction}`] !== DETACHING) {
+          // if (snapWhileSliding)
+          //   console.log(direction, initDiff[`_snapState${direction}`]);
+          initDiff[`_snapState${direction}`] = SNAPPED;
+          me[`mouseD${movingDirection}`] = -initDiff[direction] - me[`mouseE${movingDirection}`] + gap;
+          initDiff[`_mouseSnappedAt${direction}`] = me[`mouse${movingDirection}`];
+          // if (snapWhileSliding)
+          //   console.log(direction, 'touched');
+          return SNAPPED;
         }
-      } else {
-        me[`mouseD${movingDirection}`] = -initDiff[direction] + gap;
-        me[`_snapped${movingDirection}`] = true;
-        me[`_mouseSnapped${movingDirection}`] = me[`mouse${movingDirection}`];
-        return SNAPPED;
+      } else if (initDiff[`_snapState${direction}`] !== DETACHED && mouseMoved !== 0) {
+        initDiff[`_snapState${direction}`] = DETACHED;
+        // if (direction === 'rightR')
+        //   console.log(direction, 'detached');
+        return DETACHED;
       }
+    } else if (initDiff[`_snapState${direction}`] !== DETACHED) {
+      // slide out without detaching
+      // console.log('slide out');
+      initDiff[`_snapState${direction}`] = DETACHED;
+      if (initDiff[`_mouseSnappedAt${direction}`]) {
+        const held = me[`mouse${movingDirection}`] - initDiff[`_mouseSnappedAt${direction}`];
+        me[`mouseE${movingDirection}`] -= held;
+        delete initDiff[`_mouseSnappedAt${direction}`];
+      }
     }
@@ -684,0 +725,0 @@ }

package.json

 {
   "name": "azdnd",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A drag and drop ui manager.",
@@ -16,3 +16,7 @@ "repository": {
     "azdom": "*"
+  },
+  "devDependencies": {
+    "jasmine": "^3.5.0",
+    "puppeteer": "^1.20.0"
   }
 }

New alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46781

23.21%

Number of package files

17

6.25%

Lines of code

877

23%

Worsened metrics

Dev dependency count

2

Infinity%

Number of low supply chain risk alerts

1

Infinity%

No dependency changes