add line target

Shopify · Jul 15, 2020 · abdf275 · abdf275
1 parent b5e8129
commit abdf275
Show file tree

Hide file tree

Showing 4 changed files with 180 additions and 4 deletions.
diff --git a/DELETE-THIS-DEFORE-MERGE-snap-mirror-line-test.html b/DELETE-THIS-DEFORE-MERGE-snap-mirror-line-test.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    .container {
+      position: relative;
+      width: 600px;
+      height: 600px;
+      background: gray;
+    }
+
+    .item {
+      position: absolute;
+      width: 50px;
+      height: 50px;
+      background: aquamarine;
+      z-index: 1;
+    }
+
+    #canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 600px;
+      height: 600px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container">
+    <canvas id="canvas" width="600" height="600"></canvas>
+    <div class="item"></div>
+  </div>
+</body>
+<script src="./examples/packages/@shopify/draggable/index.js"></script>
+<script>
+  const { Draggable: DraggableClass, Plugins } = window.Draggable
+
+  const draggable = new DraggableClass(document.querySelectorAll(".container"), {
+    draggable: '.item',
+    mirror: {
+      constrainDimensions: true,
+    },
+    plugins: [Plugins.SnapMirror],
+    SnapMirror: {
+      targets: [
+        Plugins.SnapMirror.line({ x: 100, range: 50 }),
+        Plugins.SnapMirror.line({ y: 100, range: 50 }),
+        Plugins.SnapMirror.line({ x: 300, y: 500, range: 50 })],
+    },
+  });
+
+
+  const ctx = document.getElementById("canvas").getContext('2d');
+  console.log(ctx);
+
+  ctx.moveTo(100, 0)
+  ctx.lineTo(100, 500)
+  ctx.lineTo(101, 500)
+  ctx.fill();
+
+  ctx.moveTo(0, 100)
+  ctx.lineTo(500, 100)
+  ctx.lineTo(500, 101)
+  ctx.fill();
+
+  ctx.moveTo(300, 0)
+  ctx.lineTo(0, 500)
+  ctx.lineTo(0, 501)
+  ctx.lineTo(301, 0)
+  ctx.fill();
+</script>
+
+</html>
diff --git a/src/Plugins/SnapMirror/SnapMirror.js b/src/Plugins/SnapMirror/SnapMirror.js
@@ -150,7 +150,7 @@ export default class SnapMirror extends AbstractPlugin {
       };
       const nearest = this[getNearestSnapCoordinate](point);
 
-      this.mirror.style.transform = `translate3d(${nearest.x}px, ${nearest.y}px, 0)`;
+      this.mirror.style.transform = `translate3d(${Math.round(nearest.x)}px, ${Math.round(nearest.y)}px, 0)`;
     });
   }
 

diff --git a/src/Plugins/SnapMirror/targets.js b/src/Plugins/SnapMirror/targets.js
@@ -28,10 +28,28 @@ export function line(options) {
       return result;
     }
 
-    // TOD0: P1(0, a) P2(b, 0) P3(c, d) -> P(x, y)
-    result.x = x;
-    result.y = y;
+    const intersection = verticalIntersection(options, {x, y});
+
+    result.x = intersection.x;
+    result.y = intersection.y;
 
     return result;
   };
 }
+
+/**
+ * Get the coordinates of the foot of perpendicular of the given point on the given line
+ * @param {*} intercepts x-intercept and y-intercept of the line
+ * @param {*} point the given point
+ *
+ * line: y = b - (b / a) * x
+ * perpendicular on the point: (y - d) / (x - c) = a / b
+ */
+function verticalIntersection({x: a, y: b}, {x: c, y: d}) {
+  const x = (a * a * c + a * b * b - a * d * b) / (a * a + b * b);
+  const y = b - (b / a) * x;
+  return {
+    x,
+    y,
+  };
+}
diff --git a/src/Plugins/SnapMirror/tests/SnapMirror.test.js b/src/Plugins/SnapMirror/tests/SnapMirror.test.js
@@ -138,6 +138,85 @@ describe('SnapMirror', () => {
     releaseMouse(item1);
   });
 
+  it('SnapMirror.line() with x option', async () => {
+    draggable = new Draggable(containers, {
+      draggable: 'li',
+      plugins: [SnapMirror],
+      SnapMirror: {
+        targets: [SnapMirror.line({x: 50})],
+      },
+    });
+
+    clickMouse(item1, {pageX: 10, pageY: 10});
+    waitForDragDelay();
+    waitForRequestAnimationFrame();
+    await waitForPromisesToResolve();
+    const mirror = document.querySelector('.draggable-mirror');
+
+    moveMouse(item1, {pageX: 20, pageY: 10});
+    await waitForPromisesToResolve();
+    waitForRequestAnimationFrame();
+    expect(mirror.style.transform).toBe('translate3d(50px, 10px, 0)');
+
+    moveMouse(item1, {pageX: 440, pageY: 550});
+    await waitForPromisesToResolve();
+    waitForRequestAnimationFrame();
+    expect(mirror.style.transform).toBe('translate3d(50px, 550px, 0)');
+
+    releaseMouse(item1);
+  });
+
+  it('SnapMirror.line() with y option', async () => {
+    draggable = new Draggable(containers, {
+      draggable: 'li',
+      plugins: [SnapMirror],
+      SnapMirror: {
+        targets: [SnapMirror.line({y: 50})],
+      },
+    });
+
+    clickMouse(item1, {pageX: 10, pageY: 10});
+    waitForDragDelay();
+    waitForRequestAnimationFrame();
+    await waitForPromisesToResolve();
+    const mirror = document.querySelector('.draggable-mirror');
+
+    moveMouse(item1, {pageX: 20, pageY: 10});
+    await waitForPromisesToResolve();
+    waitForRequestAnimationFrame();
+    expect(mirror.style.transform).toBe('translate3d(20px, 50px, 0)');
+
+    moveMouse(item1, {pageX: 440, pageY: 550});
+    await waitForPromisesToResolve();
+    waitForRequestAnimationFrame();
+    expect(mirror.style.transform).toBe('translate3d(440px, 50px, 0)');
+
+    releaseMouse(item1);
+  });
+
+  it('SnapMirror.line() with x and y options', async () => {
+    draggable = new Draggable(containers, {
+      draggable: 'li',
+      plugins: [SnapMirror],
+      SnapMirror: {
+        targets: [SnapMirror.line({x: 30, y: 50})],
+      },
+    });
+
+    clickMouse(item1, {pageX: 10, pageY: 10});
+    waitForDragDelay();
+    waitForRequestAnimationFrame();
+    await waitForPromisesToResolve();
+    const mirror = document.querySelector('.draggable-mirror');
+
+    moveMouse(item1, {pageX: 20, pageY: 10});
+    await waitForPromisesToResolve();
+    waitForRequestAnimationFrame();
+    expect(mirror.style.transform).toBe('translate3d(23px, 12px, 0)');
+
+    releaseMouse(item1);
+  });
+
   it('SnapMirror.inRectRange()', async () => {
     draggable = new Draggable(containers, {
       draggable: 'li',
-Original file line number
+Diff line change
@@ Expand Up / @@ -150,7 +150,7 @@ export default class SnapMirror extends AbstractPlugin { @@
           };
           const nearest = this[getNearestSnapCoordinate](point);
-          this.mirror.style.transform = `translate3d(${nearest.x}px, ${nearest.y}px, 0)`;
+          this.mirror.style.transform = `translate3d(${Math.round(nearest.x)}px, ${Math.round(nearest.y)}px, 0)`;
         });
       }
@@ Expand Down @@