save

examples/src/content/Plugins/SnapMirror/SnapMirror.scss

@@ -49,7 +49,6 @@
         background: #fff;
         content: "";
       }
-
     }
     .star1 {
       left: 15%;
@@ -59,6 +58,7 @@
     .star2 {
       left: 25%;
       top: 60%;
+      border-radius: 50%;
     }
     .star3 {
       left: 35%;

examples/src/content/Plugins/SnapMirror/index.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-unresolved
-import {Draggable} from '@shopify/draggable';
+import {Draggable, Plugins} from '@shopify/draggable';
 
 function getNearestPoint(point) {
   const width = 50;
@@ -14,89 +14,38 @@ function getNearestPoint(point) {
   };
 }
 
-function getNearestPointForSky(point, points) {
-  let result = point;
-  let distance = Infinity;
-
-  points.forEach((poi) => {
-    if (
-      !(
-        point.x < poi.x + poi.range[1] &&
-        point.x > poi.x - poi.range[3] &&
-        point.y > poi.y - poi.range[0] &&
-        point.y < poi.y + poi.range[2]
-      )
-    ) {
-      return;
+function initSky() {
+  const container = document.querySelector('.sky');
+  const containerRect = container.getBoundingClientRect();
+
+  const targets = [];
+  [...document.querySelectorAll('.star')].forEach((star) => {
+    const rect = star.getBoundingClientRect();
+    let range = {rect: [15, 25, 25, 15]};
+    if (star.classList.contains('star1')) {
+      range = {rect: [Infinity, Infinity, Infinity, Infinity]};
     }
-    const tempDistance = (point.x - poi.x) ** 2 + (point.y - poi.y) ** 2;
-    if (tempDistance < distance) {
-      result = poi;
-      distance = tempDistance;
+    if (star.classList.contains('star2')) {
+      range = {circle: 20};
     }
+    targets.push({x: rect.x + 20 - containerRect.x, y: rect.y + 20 - containerRect.y, range});
   });
 
-  // console.log(points);
-  return result;
-}
-
-function initSky() {
-  const container = document.querySelector('.sky');
-
-  const points = [];
-  let pointerStart = {x: 0, y: 0};
-  let mirrorStart = {x: 0, y: 0};
-  // const offset = {x: 0, y: 0};
-
   const draggable = new Draggable([container], {
     draggable: '.sky__item',
     mirror: {
       constrainDimensions: true,
     },
+    plugins: [Plugins.SnapMirror],
+    SnapMirror: {
+      targets,
+      relativePoints: [{x: 0.5, y: 0.5}],
+    },
   });
 
-  draggable.on('mirror:created', (evt) => {
-    const boundingClientRect = evt.source.getBoundingClientRect();
-
-    mirrorStart = {
-      x: boundingClientRect.x,
-      y: boundingClientRect.y,
-    };
-    pointerStart = {
-      x: evt.sensorEvent.clientX,
-      y: evt.sensorEvent.clientY,
-    };
-
-    [...document.querySelectorAll('.star')].forEach((star) => {
-      const rect = star.getBoundingClientRect();
-      let range = [15, 25, 25, 15];
-      if (star.classList.contains('star1')) {
-        range = [Infinity, Infinity, Infinity, Infinity];
-      }
-      points.push({x: rect.x + 15 - mirrorStart.x, y: rect.y + 15 - mirrorStart.y, range});
-    });
-  });
-
-  draggable.on('mirror:move', (evt) => {
-    evt.cancel();
+  draggable.on('mirror:created', () => {});
 
-    requestAnimationFrame(() => {
-      const {clientX, clientY} = evt.sensorEvent;
-      const nearestPoint = getNearestPointForSky(
-        {
-          x: clientX - pointerStart.x,
-          y: clientY - pointerStart.y,
-        },
-        points,
-      );
-      const translate = {
-        x: mirrorStart.x + nearestPoint.x,
-        y: mirrorStart.y + nearestPoint.y,
-      };
-
-      evt.mirror.style.transform = `translate3d(${translate.x}px, ${translate.y}px, 0px)`;
-    });
-  });
+  draggable.on('mirror:move', () => {});
 }
 
 export default function PluginsSnapMirror() {

scripts/build/bundles.js

@@ -75,6 +75,13 @@ const bundles = [
     source: 'Plugins/SortAnimation/index',
     path: 'plugins/',
   },
+
+  {
+    name: 'SnapMirror',
+    filename: 'snap-mirror',
+    source: 'Plugins/SnapMirror/index',
+    path: 'plugins/',
+  },
 ];
 
 module.exports = {bundles};

src/Plugins/SnapMirror/SnapMirror.js

@@ -83,21 +83,151 @@ export default class SnapMirror extends AbstractPlugin {
    * @param {MirrorCreatedEvent} mirrorEvent
    * @private
    */
-  [onMirrorCreated]() {}
+  [onMirrorCreated]({sourceContainer, source, sensorEvent}) {
+    const rect = source.getBoundingClientRect();
+    this.offset = this.getOffset(sourceContainer);
+    // can't get dimensions of mirror in mirror created
+    // so use source dimensions
+    this.relativePoints = this.getRelativePoints(rect);
+    this.targets = this.getTargets();
+    this.eventStartPoint = {
+      x: sensorEvent.clientX,
+      y: sensorEvent.clientY,
+    };
+    this.startPoint = {
+      x: rect.x - this.offset.x,
+      y: rect.y - this.offset.y,
+    };
+  }
 
   /**
    * Mirror destroy handler
    * @param {MirrorDestroyEvent} mirrorEvent
    * @private
    */
-  [onMirrorDestroy]() {}
+  [onMirrorDestroy]() {
+    this.offset = null;
+    this.relativePoints = null;
+    this.targets = null;
+    this.eventStartPoint = null;
+    this.startPoint = null;
+  }
 
   /**
    * Drag over handler
    * @param {DragOverEvent | DragOverContainer} dragEvent
    * @private
    */
-  [onMirrorMove]() {}
+  [onMirrorMove](evt) {
+    evt.cancel();
+    const {clientX, clientY} = evt.sensorEvent;
+
+    requestAnimationFrame(() => {
+      const nearest = this.getNearest({
+        x: clientX - this.eventStartPoint.x,
+        y: clientY - this.eventStartPoint.y,
+      });
+      const translate = {
+        x: this.offset.x + nearest.x,
+        y: this.offset.y + nearest.y,
+      };
+      evt.mirror.style.transform = `translate3d(${translate.x}px, ${translate.y}px, 0px)`;
+    });
+  }
+
+  getNearest(diff) {
+    let result = {x: 0, y: 0};
+    let distance = Infinity;
+
+    this.targets.forEach((target) => {
+      this.relativePoints.forEach((relativePoint) => {
+        const point = {
+          x: this.startPoint.x + relativePoint.x,
+          y: this.startPoint.y + relativePoint.y,
+        };
+
+        const tempPoint = {
+          x: point.x + diff.x,
+          y: point.y + diff.y,
+        };
+        if (!target.inRange(tempPoint)) {
+          return;
+        }
+        // TODO1: performance optimization
+        const tempDistance = (tempPoint.x - target.x) ** 2 + (tempPoint.y - target.y) ** 2;
+        if (tempDistance < distance) {
+          result = {
+            x: target.x - relativePoint.x,
+            y: target.y - relativePoint.y,
+          };
+          distance = tempDistance;
+        }
+      });
+    });
+
+    return result;
+  }
+
+  getTargets() {
+    const {options} = this;
+    return this.options.targets.map((target) => {
+      if (typeof target === 'function') {
+        return target;
+      }
+      return {
+        ...target,
+        inRange(coord) {
+          const range = this.range || options.range;
+          if (typeof range === 'function') {
+            return range();
+          }
+
+          if (range.rect) {
+            return (
+              coord.x < this.x + range.rect[1] &&
+              coord.x > this.x - range.rect[3] &&
+              coord.y > this.y - range.rect[0] &&
+              coord.y < this.y + range.rect[2]
+            );
+          }
+
+          if (range.circle) {
+            // TODO1: performance optimization
+            return (coord.x - this.x) ** 2 + (coord.y - this.y) ** 2 <= range.circle ** 2;
+          }
+
+          return false;
+        },
+      };
+    });
+  }
+
+  getRelativePoints(rect) {
+    const relativePoints = [];
+    this.options.relativePoints.forEach((point) => {
+      relativePoints.push({x: rect.width * point.x, y: rect.height * point.y});
+    });
+    return relativePoints;
+  }
+
+  getOffset(container) {
+    if (this.options.offset === 'container') {
+      const rect = container.getBoundingClientRect();
+      return {
+        x: rect.x,
+        y: rect.y,
+      };
+    }
+
+    if (this.options.offset.x && this.options.offset.y) {
+      return {
+        x: this.options.offset.x,
+        y: this.options.offset.y,
+      };
+    }
+
+    return {x: 0, y: 0};
+  }
 }
 
 SnapMirror.grid = function(options) {};

src/Plugins/index.js

@@ -3,3 +3,4 @@ export {default as ResizeMirror, defaultOptions as defaultResizeMirrorOptions} f
 export {default as Snappable} from './Snappable';
 export {default as SwapAnimation, defaultOptions as defaultSwapAnimationOptions} from './SwapAnimation';
 export {default as SortAnimation, defaultOptions as defaultSortAnimationOptions} from './SortAnimation';
+export {default as SnapMirror, defaultOptions as defaultSnapMirrorOptions} from './SnapMirror';