reconstruction

Shopify · Jul 20, 2020 · 7e4a0ba · 7e4a0ba
1 parent 0aa8a93
commit 7e4a0ba
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 127 deletions.
diff --git a/TODO.md b/TODO.md
@@ -0,0 +1,4 @@
+- [ ] Fix bugs on mobile browsers.
+- [ ] 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/src/content/Plugins/SnapMirror/SnapMirror.html b/examples/src/content/Plugins/SnapMirror/SnapMirror.html
@@ -10,21 +10,10 @@
 
   <div style="height: 3rem"></div>
 
-  <article class="MLP BlockLayout BlockLayout--typePositioned">
-    <div class="Hollow-wrapper">
-      {{ Block.render('', {type: 'Hollow'}) }}
-      {{ Block.render('', {type: 'Hollow'}) }}
-      {{ Block.render('', {type: 'Hollow'}) }}
-      {{ Block.render('', {type: 'Hollow'}) }}
-      {{ Block.render('', {type: 'Hollow'}) }}
-      {{ Block.render('', {type: 'Hollow'}) }}
-    </div>
-    {{ Block.render('1', {index: 1, draggable: true}) }}
-    {{ Block.render('2', {index: 2, draggable: true}) }}
-    {{ Block.render('3', {index: 3, draggable: true}) }}
-    {{ Block.render('4', {index: 4, draggable: true}) }}
-    {{ Block.render('5', {index: 5, draggable: true}) }}
-    {{ Block.render('6', {index: 6, draggable: true}) }}
+  <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
@@ -8,20 +8,21 @@
 
 .SnapMirror {
   .Workspace {
+    $size: 50px;
+    $border-width: 0.3rem;
     &.BlockLayout--typePositioned {
       height: 32rem;
       border: 0.6rem solid #212529;
       overflow: auto;
 
       .Block {
-        width: 150px;
-        height: 150px;
+        width: calc(#{3 * $size} + #{$border-width});
+        height: calc(#{3 * $size} + #{$border-width});
         position: absolute;
       }
+
       &.draggable-container--over {
         .Workspace__grid {
-          $size: 50px;
-          $border-width: 0.3rem;
           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%
@@ -31,8 +32,6 @@
     }
 
     &__grid {
-      $size: 50px;
-      $border-width: 0.3rem;
       width: 1500px;
       height: 1000px;
       background: linear-gradient(180deg, #000 0, #000 $border-width, transparent 0, transparent $size) 0px 0px / 100%
@@ -41,46 +40,36 @@
     }
   }
 
-  .MLP {
+  .CircleRange {
     &.BlockLayout--typePositioned {
       height: 64rem;
       border: 0.6rem solid #212529;
       overflow: auto;
 
       .Block--isDraggable {
-        width: 50px;
-        height: 50px;
         position: absolute;
+        width: 20rem;
+        height: 20rem;
         z-index: 2;
       }
 
-      $colors: purple palegoldenrod silver pink orange aqua;
-      $i: 0;
-      @each $color in $colors {
-        $i: $i + 1;
-        .Block--isDraggable:nth-child(#{$i}) {
-          .BlockContent {
-            border-color: $color;
-          }
-        }
+      .Block--typeHollow {
+        position: absolute;
+        top: calc(50% - 10rem);
+        left: calc(50% - 10rem);
+        width: 20rem;
+        height: 20rem;
       }
 
-      .Hollow-wrapper {
-        position: relative;
-        height: 500px;
-        .Block--typeHollow {
-          width: 50px;
-          height: 50px;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-        }
-
-        @for $i from 0 to 6 {
-          .Block--typeHollow:nth-child(#{$i + 1}) {
-            transform: rotate($i * 60deg) translateX(200px) rotate($i * -60deg);
-          }
-        }
+      .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
@@ -1,23 +1,25 @@
 // eslint-disable-next-line import/no-unresolved
 import {Draggable, Plugins} from '@shopify/draggable';
 
-function initMLP() {
-  const container = document.querySelector('#SnapMirror .BlockLayout.MLP');
+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();
-    let range = Plugins.SnapMirror.inRectRange([15, 25, 25, 15]);
-    if (star.classList.contains('star1')) {
-      range = Plugins.SnapMirror.inRectRange([Infinity, Infinity, Infinity, Infinity]);
-    }
-    if (star.classList.contains('star2')) {
-      range = 20;
-    }
-    targets.push({x: rect.x + 20 - containerRect.x, y: rect.y + 20 - containerRect.y, range});
+    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, {eventOffset}) {
+        return (coord.x + eventOffset.x - target.x) ** 2 + (coord.y + eventOffset.y - target.y) ** 2 < range ** 2;
+      },
+    });
   });
 
+  console.log(targets);
   const draggable = new Draggable([container], {
     draggable: '.Block--isDraggable',
     mirror: {
@@ -37,8 +39,10 @@ function initMLP() {
   });
 
   draggable.on('mirror:destroy', (evt) => {
+    if (evt.mirror.style.position !== 'absolute') {
+      return;
+    }
     originalSource.style.transform = evt.mirror.style.transform;
-    console.log(evt);
   });
 
   return draggable;
@@ -70,16 +74,18 @@ function initWorkspace() {
   });
 
   draggable.on('mirror:destroy', (evt) => {
+    if (evt.mirror.style.position !== 'absolute') {
+      return;
+    }
     originalSource.style.transform = evt.mirror.style.transform;
-    console.log(evt);
   });
 
   return draggable;
 }
 
 export default function PluginsSnapMirror() {
   const workspaceDraggable = initWorkspace();
-  const MLPDraggable = initMLP();
+  const CircleDraggable = initCircle();
 
-  return [workspaceDraggable, MLPDraggable];
+  return [workspaceDraggable, CircleDraggable];
 }