Set the transform origin correctly when scaling the drag clone

Author: smoores-dev

.yarn/versions/07f13bad.yml

@@ -0,0 +1,2 @@
+releases:
+  "@pitter-patter/shuffle": patch

packages/docs/src/components/demos/shuffle.css

@@ -10,9 +10,13 @@ img {
   border-radius: 1rem;
 }
 
+[data-node-type] {
+  border-radius: 0.25rem;
+}
+
 [data-node-type][data-shuffle-clone] {
-  border-radius: 1rem;
-  background-color: white;
+  background-color: #f3efea;
+  color: #351900;
 }
 
 .shuffle-block {

packages/shuffle/src/plugin.ts

@@ -315,14 +315,7 @@ export function startDragOnPointerDown(
   const startX = clientX;
   const startY = clientY;
 
-  const translateCalc = new TranslateCalculator(
-    originX,
-    originY,
-    startX,
-    startY,
-    domRect,
-    LIFT_AMOUNT,
-  );
+  const translateCalc = new TranslateCalculator(originX, originY, startX, startY, domRect);
 
   let clone: HTMLElement | null = null;
   let initialStyles: InitialStyles | null = null;
@@ -356,7 +349,10 @@ export function startDragOnPointerDown(
     }
     if (!(dom instanceof HTMLElement)) return;
 
-    clone.style.transform = translateCalc.slide(e.clientX, e.clientY);
+    const { transform, transformOrigin } = translateCalc.slide(e.clientX, e.clientY);
+
+    clone.style.transform = transform;
+    clone.style.transformOrigin = transformOrigin;
 
     const before = shufflePluginKey.getState(view.state)?.activeNodePos;
 
@@ -424,7 +420,10 @@ export function startDragOnPointerDown(
 
     const domRect = dom.getBoundingClientRect();
 
-    clone.style.transform = translateCalc.place(domRect.left, domRect.top);
+    const { transform, transformOrigin } = translateCalc.place(domRect.left, domRect.top);
+
+    clone.style.transform = transform;
+    clone.style.transformOrigin = transformOrigin;
 
     setTimeout(() => {
       clone!.style.transition = "none";
@@ -448,7 +447,6 @@ export function startDragOnPointerDown(
 }
 
 export type ViewDesc = NodeViewDesc & WidgetViewDesc;
-const LIFT_AMOUNT = 24;
 
 interface InitialStyles {
   boxShadow: string;
@@ -471,7 +469,13 @@ function startDrag(dom: HTMLElement, translateCalc: TranslateCalculator) {
   const initialBoxShadow = dom.style.boxShadow;
 
   clone.style.transition = "transform 0.1s ease";
-  clone.style.transform = translateCalc.slide(translateCalc.startX, translateCalc.startY);
+  const { transform, transformOrigin } = translateCalc.slide(
+    translateCalc.startX,
+    translateCalc.startY,
+  );
+
+  clone.style.transform = transform;
+  clone.style.transformOrigin = transformOrigin;
   clone.style.boxShadow = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
   clone.style.zIndex = "100";
 

packages/shuffle/src/translation.ts

@@ -5,13 +5,15 @@ export class TranslateCalculator {
     public startX: number,
     public startY: number,
     private rect: DOMRect,
-    private liftAmount: number,
   ) {}
 
   slide(x: number, y: number) {
     const dx = x - this.startX;
     const dy = y - this.startY;
-    return `rotateX(0) scale(1.05) translate(${this.originX + dx}px, ${this.originY + dy - this.liftAmount}px)`;
+    return {
+      transform: `rotateX(0) scale(1.05) translate(${this.originX + dx}px, ${this.originY + dy}px)`,
+      transformOrigin: `${this.startX - this.rect.x}px ${this.startY - this.rect.y}px`,
+    };
   }
 
   place(x: number, y: number) {
@@ -21,6 +23,9 @@ export class TranslateCalculator {
     const dx = x - this.startX - offsetX;
     const dy = y - this.startY - offsetY;
 
-    return `rotateX(0) scale(1) translate(${this.originX + dx}px, ${this.originY + dy}px)`;
+    return {
+      transform: `rotateX(0) scale(1) translate(${this.originX + dx}px, ${this.originY + dy}px)`,
+      transformOrigin: "initial",
+    };
   }
 }

packages/shuffle/style/shuffle.css

@@ -32,6 +32,17 @@
   grid-row-start: 1 !important;
 }
 
+/* The drag clone gets a little messed up since
+   its grid-template-columns is set to subgrid, but
+   it's absolutely positioned. So we manually duplicate
+   the grid template columns. This isn't perfect, but
+   it looks much less broken. */
+[data-shuffle-clone].row {
+  grid-template-columns:
+    minmax(0, 1fr) repeat(12, minmax(0, var(--shuffle-column-width, 3rem)))
+    minmax(0, 1fr);
+}
+
 .shuffle-block {
   width: 100%;
 }