Preserve drag clone styles exactly (#25)

Author: smoores-dev

.yarn/versions/79b8c4fd.yml

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

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

@@ -12,11 +12,7 @@ img {
 
 [data-node-type] {
   border-radius: 0.25rem;
-}
-
-[data-node-type][data-shuffle-clone] {
   background-color: #f3efea;
-  color: #351900;
 }
 
 .shuffle-block {
@@ -38,7 +34,8 @@ img {
   border-radius: 0.25rem;
   justify-content: space-around;
   padding: 1rem;
-  margin: 2rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
 }
 
 .card {
@@ -48,10 +45,10 @@ img {
   border-radius: 0.25rem;
 }
 
-.card.shuffle-hover-block {
-  border: 1px solid lightblue;
+.card p {
+  background-color: white;
 }
 
-.card[data-shuffle-clone] {
-  background-color: white;
+.card.shuffle-hover-block {
+  border: 1px solid lightblue;
 }

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

@@ -18,6 +18,8 @@ import {
   shuffle,
   addShuffleNodes,
   DragHandles,
+  DragHandle,
+  type DragHandleProps,
   ShuffleSkeleton,
   ResizeHandles,
 } from "@pitter-patter/shuffle";
@@ -156,12 +158,19 @@ export function ShuffleDemo() {
       <ShuffleSkeleton>
         <ProseMirrorDoc />
         <ResizeHandles />
-        <DragHandles />
+        <DragHandles handleComponent={CustomHandle} />
       </ShuffleSkeleton>
     </ProseMirror>
   );
 }
 
+function CustomHandle(props: DragHandleProps) {
+  if (["image", "card", "card_deck"].includes(props.node.type.name)) {
+    return null;
+  }
+  return <DragHandle {...props} />;
+}
+
 function CardDeck({ nodeProps: _, ref, children, ...props }: NodeViewComponentProps) {
   return (
     <div

packages/shuffle/src/components/DragHandles.tsx

@@ -14,12 +14,14 @@ import {
 
 import { shufflePluginKey, startDragOnPointerDown, ViewDesc } from "../plugin.js";
 
+export interface DragHandleProps {
+  style: { top: number; left: number };
+  onPointerDown: EventHandler<SyntheticPointerEvent>;
+  node: Node;
+}
+
 interface Props {
-  handleComponent?: ComponentType<{
-    style: { top: number; left: number };
-    onPointerDown: EventHandler<SyntheticPointerEvent>;
-    node: Node;
-  }>;
+  handleComponent?: ComponentType<DragHandleProps>;
 }
 
 export function DragHandles({ handleComponent }: Props) {
@@ -32,18 +34,18 @@ export function DragHandles({ handleComponent }: Props) {
   return (
     <>
       {hoverPositions.map(({ from }) => (
-        <DragHandle key={from} pos={from} handleComponent={handleComponent} />
+        <DragHandleRenderer key={from} pos={from} handleComponent={handleComponent} />
       ))}
     </>
   );
 }
 
-interface DragHandleProps {
+interface DragHandleRendererProps {
   pos: number;
   handleComponent?: Props["handleComponent"];
 }
 
-export function DragHandle({ pos, handleComponent: Handle }: DragHandleProps) {
+export function DragHandleRenderer({ pos, handleComponent: Handle }: DragHandleRendererProps) {
   const [left, setLeft] = useState(0);
   const [top, setTop] = useState(0);
 
@@ -84,13 +86,17 @@ export function DragHandle({ pos, handleComponent: Handle }: DragHandleProps) {
     return <Handle style={{ top, left }} node={node} onPointerDown={handlePointerDown} />;
   }
 
+  return <DragHandle style={{ top, left }} onPointerDown={handlePointerDown} node={node} />;
+}
+
+export function DragHandle({ style, node, onPointerDown }: DragHandleProps) {
   return (
     <button
       type="button"
       className="shuffle-drag-handle"
-      style={{ top, left }}
+      style={style}
       draggable="false"
-      onPointerDown={handlePointerDown}
+      onPointerDown={onPointerDown}
     >
       {node.type.name}
     </button>

packages/shuffle/src/index.ts

@@ -15,4 +15,4 @@ export {
 } from "./plugin.js";
 export { ShuffleSkeleton } from "./components/Skeleton.js";
 export { ResizeHandles, useResizeHandlePointerDown } from "./components/ResizeHandles.js";
-export { DragHandles } from "./components/DragHandles.js";
+export { type DragHandleProps, DragHandles, DragHandle } from "./components/DragHandles.js";

packages/shuffle/src/plugin.ts

@@ -306,14 +306,22 @@ export function startDragOnPointerDown(
 
   const domRect = dom.getBoundingClientRect();
 
-  const transform = new DOMMatrixReadOnly(getComputedStyle(dom).transform);
+  const domStyle = getComputedStyle(dom);
+  const transform = new DOMMatrixReadOnly(domStyle.transform);
   const originX = transform.m41;
   const originY = transform.m42;
 
   const startX = clientX;
   const startY = clientY;
 
-  const translateCalc = new TranslateCalculator(originX, originY, startX, startY, domRect);
+  const translateCalc = new TranslateCalculator(
+    originX,
+    originY,
+    startX,
+    startY,
+    domRect,
+    parseInt(domStyle.marginTop, 10),
+  );
 
   let clone: HTMLElement | null = null;
   let initialStyles: InitialStyles | null = null;
@@ -455,11 +463,31 @@ function startDrag(dom: HTMLElement, translateCalc: TranslateCalculator) {
   const bodyRect = document.body.getBoundingClientRect();
 
   const clone = dom.cloneNode(true) as HTMLElement;
+
+  let cloneQueue: Element[] = [clone];
+  let domQueue: Element[] = [dom];
+
+  while (cloneQueue.length && domQueue.length) {
+    const domElement = domQueue.pop();
+    const cloneElement = cloneQueue.pop();
+
+    if (!(domElement instanceof HTMLElement && cloneElement instanceof HTMLElement)) {
+      continue;
+    }
+
+    const domStyles = getComputedStyle(domElement);
+    for (let i = 0; i < domStyles.length; i++) {
+      const property = domStyles.item(i);
+      cloneElement.style.setProperty(property, domStyles.getPropertyValue(property));
+    }
+
+    cloneQueue.push(...cloneElement.children);
+    domQueue.push(...domElement.children);
+  }
+
   clone.style.position = "absolute";
   clone.style.top = `${domRect.top - bodyRect.top}px`;
   clone.style.left = `${domRect.left - bodyRect.left}px`;
-  clone.style.width = `${domRect.width}px`;
-  clone.style.height = `${domRect.height}px`;
   document.body.appendChild(clone);
 
   dom.dataset["shuffleActive"] = "true";

packages/shuffle/src/translation.ts

@@ -5,14 +5,15 @@ export class TranslateCalculator {
     public startX: number,
     public startY: number,
     private rect: DOMRect,
+    private marginTop: number,
   ) {}
 
   slide(x: number, y: number) {
     const dx = x - this.startX;
-    const dy = y - this.startY;
+    const dy = y - this.startY - this.marginTop;
     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`,
+      transformOrigin: `${this.startX - this.rect.x}px ${this.startY - this.rect.y - this.marginTop}px`,
     };
   }
 
@@ -21,7 +22,7 @@ export class TranslateCalculator {
     const offsetY = this.rect.y - this.startY;
 
     const dx = x - this.startX - offsetX;
-    const dy = y - this.startY - offsetY;
+    const dy = y - this.startY - offsetY - this.marginTop;
 
     return {
       transform: `rotateX(0) scale(1) translate(${this.originX + dx}px, ${this.originY + dy}px)`,

packages/shuffle/style/shuffle.css

@@ -32,17 +32,6 @@
   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%;
 }