Shopify · zjffun · Jul 24, 2020 · Jun 20, 2020 · Jun 23, 2020 · Jun 26, 2020
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/TODO.md b/TODO.md
@@ -0,0 +1,6 @@
+- [ ] Fix bugs on mobile browsers.
+  - [ ] Issue: TouchSensor: Why set pageX/Y to clientX/Y
+  - [x] Add pageX/Y to SensorEvent
+- [ ] event offset: Which coordiante given in API? Which coordiante use in code? \
+       coordiantes: page, client, container, mirror
+- [ ] `SnapMirror.line` edge case
diff --git a/examples/.prettierrc b/examples/.prettierrc
@@ -1,4 +1,7 @@
 {
+  "trailingComma": "all",
   "printWidth": 120,
-  "singleQuote": true
+  "singleQuote": true,
+  "bracketSpacing": false,
+  "arrowParens": "always"
 }
diff --git a/examples/src/content/Plugins/SnapMirror/SnapMirror.html b/examples/src/content/Plugins/SnapMirror/SnapMirror.html
@@ -0,0 +1,19 @@
+{% import 'components/Block/Block.html' as Block %}
+
+{% macro render(id) %}
+<section id="{{ id }}" class="{{ id }}">
+  <article class="Workspace BlockLayout BlockLayout--typePositioned">
+    <div class="Workspace__grid">
+      {{ Block.render('drag', {index: 1, draggable: true}) }}
+    </div>
+  </article>
+
+  <div style="height: 3rem"></div>
+
+  <article class="CircleRange BlockLayout BlockLayout--typePositioned">
+    {{ Block.render('drag', {index: 1, draggable: true}) }}
+    {{ Block.render('drop', {type: 'Hollow'}) }}
+    <div class="circle"></div>
+  </article>
+</section>
+{% endmacro %}
diff --git a/examples/src/content/Plugins/SnapMirror/SnapMirror.scss b/examples/src/content/Plugins/SnapMirror/SnapMirror.scss
@@ -0,0 +1,76 @@
+////
+/// Content
+/// SnapMirror
+////
+
+@import 'utils/shared/functions';
+@import 'utils/shared/layout';
+
+.SnapMirror {
+  .Workspace {
+    $size: 50px;
+    $border-width: 0.3rem;
+    &.BlockLayout--typePositioned {
+      height: 32rem;
+      border: 0.6rem solid #212529;
+      overflow: auto;
+
+      .Block {
+        width: calc(#{3 * $size} + #{$border-width});
+        height: calc(#{3 * $size} + #{$border-width});
+        position: absolute;
+      }
+
+      &.draggable-container--over {
+        .Workspace__grid {
+          background: linear-gradient(180deg, #00f 0, #00f $border-width, transparent 0, transparent $size) 0px 0px /
+              100% $size repeat-y,
+            linear-gradient(90deg, #00f 0, #00f $border-width, transparent 0, transparent $size) 0px 0px / #{$size} 100%
+              repeat-x;
+        }
+      }
+    }
+
+    &__grid {
+      width: 1500px;
+      height: 1000px;
+      background: linear-gradient(180deg, #000 0, #000 $border-width, transparent 0, transparent $size) 0px 0px / 100%
+          $size repeat-y,
+        linear-gradient(90deg, #000 0, #000 $border-width, transparent 0, transparent $size) 0px 0px / #{$size} 100% repeat-x;
+    }
+  }
+
+  .CircleRange {
+    &.BlockLayout--typePositioned {
+      height: 64rem;
+      border: 0.6rem solid #212529;
+      overflow: auto;
+
+      .Block--isDraggable {
+        position: absolute;
+        width: 20rem;
+        height: 20rem;
+        z-index: 2;
+      }
+
+      .Block--typeHollow {
+        position: absolute;
+        top: calc(50% - 10rem);
+        left: calc(50% - 10rem);
+        width: 20rem;
+        height: 20rem;
+      }
+
+      .circle {
+        position: absolute;
+        top: calc(50% - 25rem);
+        left: calc(50% - 25rem);
+        width: 50rem;
+        height: 50rem;
+        border: 3px solid #000;
+        border-radius: 50%;
+        content: '';
+      }
+    }
+  }
+}
diff --git a/examples/src/content/Plugins/SnapMirror/index.js b/examples/src/content/Plugins/SnapMirror/index.js
@@ -0,0 +1,95 @@
+// eslint-disable-next-line import/no-unresolved
+import {Draggable, Plugins} from '@shopify/draggable';
+
+function initCircle() {
+  const container = document.querySelector('#SnapMirror .BlockLayout.CircleRange');
+  const containerRect = container.getBoundingClientRect();
+  const circleRect = document.querySelector('.circle').getBoundingClientRect();
+
+  const targets = [];
+  [...document.querySelectorAll('.Block--typeHollow')].forEach((star) => {
+    const rect = star.getBoundingClientRect();
+    const range = circleRect.width / 2;
+    targets.push({
+      x: rect.x - containerRect.x + rect.width / 2,
+      y: rect.y - containerRect.y + rect.width / 2,
+      range(coord, target, relativePoint, {pointInMirrorCoordinate}) {
+        return (
+          (coord.x + pointInMirrorCoordinate.x - target.x) ** 2 +
+            (coord.y + pointInMirrorCoordinate.y - target.y) ** 2 <
+          range ** 2
+        );
+      },
+    });
+  });
+
+  console.log(targets);
+  const draggable = new Draggable([container], {
+    draggable: '.Block--isDraggable',
+    mirror: {
+      constrainDimensions: true,
+    },
+    plugins: [Plugins.SnapMirror],
+    SnapMirror: {
+      targets,
+      relativePoints: [{x: 0.5, y: 0.5}],
+    },
+  });
+
+  let originalSource;
+
+  draggable.on('mirror:create', (evt) => {
+    originalSource = evt.originalSource;
+  });
+
+  draggable.on('mirror:destroy', (evt) => {
+    if (evt.mirror.style.position !== 'absolute') {
+      return;
+    }
+    originalSource.style.transform = evt.mirror.style.transform;
+  });
+
+  return draggable;
+}
+
+function initWorkspace() {
+  const container = document.querySelector('#SnapMirror .BlockLayout.Workspace');
+
+  const draggable = new Draggable([container], {
+    draggable: '.Block--isDraggable',
+    mirror: {
+      constrainDimensions: true,
+    },
+    plugins: [Plugins.SnapMirror],
+    SnapMirror: {
+      targets: [
+        Plugins.SnapMirror.grid({
+          x: 50,
+          y: 50,
+        }),
+      ],
+    },
+  });
+
+  let originalSource;
+
+  draggable.on('mirror:create', (evt) => {
+    originalSource = evt.originalSource;
+  });
+
+  draggable.on('mirror:destroy', (evt) => {
+    if (evt.mirror.style.position !== 'absolute') {
+      return;
+    }
+    originalSource.style.transform = evt.mirror.style.transform;
+  });
+
+  return draggable;
+}
+
+export default function PluginsSnapMirror() {
+  const workspaceDraggable = initWorkspace();
+  const CircleDraggable = initCircle();
+
+  return [workspaceDraggable, CircleDraggable];
+}
diff --git a/examples/src/content/index.js b/examples/src/content/index.js
@@ -17,6 +17,7 @@ import PluginsCollidable from './Plugins/Collidable';
 import PluginsSnappable from './Plugins/Snappable';
 import PluginsSwapAnimation from './Plugins/SwapAnimation';
 import PluginsSortAnimation from './Plugins/SortAnimation';
+import PluginsSnapMirror from './Plugins/SnapMirror';
 
 const Content = {
   Home,
@@ -32,6 +33,7 @@ const Content = {
   PluginsSnappable,
   PluginsSwapAnimation,
   PluginsSortAnimation,
+  PluginsSnapMirror,
 };
 
 export default Content;
diff --git a/examples/src/styles/examples-app.scss b/examples/src/styles/examples-app.scss
@@ -59,3 +59,4 @@
 @import 'content/Plugins/Snappable/Snappable';
 @import 'content/Plugins/SwapAnimation/SwapAnimation';
 @import 'content/Plugins/SortAnimation/SortAnimation';
+@import 'content/Plugins/SnapMirror/SnapMirror';
diff --git a/examples/src/views/data-pages.json b/examples/src/views/data-pages.json
@@ -32,7 +32,8 @@
         "Collidable",
         "Snappable",
         "~Swap Animation",
-        "Sort Animation"
+        "Sort Animation",
+        "Snap Mirror"
       ]
     }
   ]

diff --git a/examples/src/views/snap-mirror.html b/examples/src/views/snap-mirror.html
@@ -0,0 +1,29 @@
+{% extends 'templates/document.html' %}
+
+{% import 'components/Document/Head.html' as Head %}
+{% import 'components/Sidebar/Sidebar.html' as Sidebar %}
+{% import 'components/PageHeader/PageHeader.html' as PageHeader %}
+
+{% import 'content/Plugins/SnapMirror/SnapMirror.html' as SnapMirror %}
+
+{% set ViewAttr = {
+  id: 'SnapMirror',
+  parent: 'Plugins',
+  child: 'Snap Mirror',
+  subheading: 'Enable snap mirror to target points by including the SnapMirror plugin. Drag an item into the range of a target point will snap to the point.'
+} %}
+
+{% block PageId %}{{ ViewAttr.id }}{% endblock %}
+
+{% block head %}
+{{ Head.render(ViewAttr) }}
+{% endblock %}
+
+{% block sidebar %}
+{{ Sidebar.render(ViewAttr, DataPages) }}
+{% endblock %}
+
+{% block main %}
+{{ PageHeader.render(ViewAttr) }}
+{{ SnapMirror.render(ViewAttr.id) }}
+{% endblock %}
diff --git a/scripts/build/bundles.js b/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};
diff --git a/scripts/test/helpers/constants.js b/scripts/test/helpers/constants.js
@@ -1,6 +1,8 @@
 export const defaultTouchEventOptions = {
   touches: [
     {
+      clientX: 0,
+      clientY: 0,
       pageX: 0,
       pageY: 0,
     },