Add inflate support

Author: smoores-dev

.yarn/versions/3ea6144b.yml

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

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

@@ -52,3 +52,17 @@ img {
 .card.shuffle-hover-block {
   border: 1px solid lightblue;
 }
+
+.inflatable-menu {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  justify-content: start;
+}
+
+.card-deck-inflatable {
+  background-color: #f3efea;
+  color: #351900;
+  padding: 1rem;
+  border-radius: 0.25rem;
+}

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

@@ -154,13 +154,20 @@ const editorState = EditorState.create({
 
 export function ShuffleDemo() {
   return (
-    <ProseMirror defaultState={editorState} nodeViewComponents={nodeViewComponents}>
-      <ShuffleSkeleton>
-        <ProseMirrorDoc />
-        <ResizeHandles />
-        <DragHandles handleComponent={CustomHandle} />
-      </ShuffleSkeleton>
-    </ProseMirror>
+    <div>
+      <div className="inflatable-menu">
+        <div data-shuffle-inflatable="card_deck" className="card-deck-inflatable">
+          Card deck
+        </div>
+      </div>
+      <ProseMirror defaultState={editorState} nodeViewComponents={nodeViewComponents}>
+        <ShuffleSkeleton>
+          <ProseMirrorDoc />
+          <ResizeHandles />
+          <DragHandles handleComponent={CustomHandle} />
+        </ShuffleSkeleton>
+      </ProseMirror>
+    </div>
   );
 }
 

packages/shuffle/src/plugin.ts

@@ -9,6 +9,7 @@ import { randomRef } from "@pitter-patter/refs";
 
 import { isShuffleRow, supportsDrag, supportsResize } from "./schema";
 import { autogroup } from "./transform/autogroup";
+import { inflate } from "./transform/inflate.js";
 import { reorder } from "./transform/reorder";
 import { reposition } from "./transform/reposition";
 import { TranslateCalculator } from "./translation.js";
@@ -277,6 +278,28 @@ export function shuffle({ hoverDecorations }: ShufflePluginOptions = {}) {
         },
       },
     },
+    view(view) {
+      function handleInflatePointerDown(event: PointerEvent) {
+        if (!view.editable) return;
+        if (!(event.target instanceof HTMLElement)) return;
+
+        if (view.dom.contains(event.target)) return;
+
+        const draggable = event.target.closest("[data-shuffle-inflatable]");
+
+        if (!(draggable instanceof HTMLElement)) return;
+
+        startDragOnPointerDown(view, null, draggable, event.clientX, event.clientY);
+      }
+
+      view.root.addEventListener("pointerdown", handleInflatePointerDown as EventListener);
+
+      return {
+        destroy() {
+          view.root.removeEventListener("pointerdown", handleInflatePointerDown as EventListener);
+        },
+      };
+    },
   });
 }
 
@@ -293,7 +316,7 @@ interface NodeViewDesc {
 
 export function startDragOnPointerDown(
   view: EditorView,
-  pos: number,
+  pos: number | null,
   dom: HTMLElement & { pmViewDesc?: ViewDesc },
   clientX: number,
   clientY: number,
@@ -329,16 +352,19 @@ export function startDragOnPointerDown(
   let layout: AutoLayout | null = null;
   let currentAnimation: Timeline | null = null;
   let skeletonOn = false;
+
   const onMove = throttle(function onMove(e: PointerEvent) {
     if (!skeletonOn || !clone || !initialStyles || !layout) {
       const startResult = startDrag(dom!, translateCalc);
 
-      view.dispatch(
-        view.state.tr.setMeta(shufflePluginKey, {
-          type: "map",
-          payload: { newPos: pos },
-        }),
-      );
+      if (pos !== null) {
+        view.dispatch(
+          view.state.tr.setMeta(shufflePluginKey, {
+            type: "map",
+            payload: { newPos: pos },
+          } satisfies ShufflePluginMeta),
+        );
+      }
 
       clone = startResult.clone;
       clone.dataset["shuffleClone"] = "true";
@@ -362,14 +388,13 @@ export function startDragOnPointerDown(
 
     const before = shufflePluginKey.getState(view.state)?.activeNodePos;
 
-    if (before === undefined) return;
-
     if (currentAnimation?.began && !currentAnimation.completed) return;
 
-    const tr =
-      autogroup(view, before, e.clientX, e.clientY) ??
-      reorder(view, before, e.clientX, e.clientY) ??
-      reposition(view, before, clone!.getBoundingClientRect());
+    const tr = before
+      ? (autogroup(view, before, e.clientX, e.clientY) ??
+        reorder(view, before, e.clientX, e.clientY) ??
+        reposition(view, before, clone.getBoundingClientRect()))
+      : inflate(view, clone, e.clientX, e.clientY);
 
     if (!tr) return;
 
@@ -389,6 +414,26 @@ export function startDragOnPointerDown(
     dom.dataset["shuffleActive"] = "true";
   });
 
+  function endDrag(domRect?: DOMRect) {
+    if (!clone || !initialStyles) return;
+
+    clone.style.transition = "transform 0.2s ease";
+    clone.style.boxShadow = initialStyles.boxShadow;
+
+    const { transform, transformOrigin } = domRect
+      ? translateCalc.place(domRect.left, domRect.top)
+      : translateCalc.reset();
+
+    clone.style.transform = transform;
+    clone.style.transformOrigin = transformOrigin;
+
+    setTimeout(() => {
+      clone!.style.transition = "none";
+      delete dom.dataset["shuffleActive"];
+      clone!.remove();
+    }, 250);
+  }
+
   function onUp() {
     document.removeEventListener("mousedown", preventSelection);
     document.removeEventListener("mousedown", preventSelection);
@@ -410,34 +455,20 @@ export function startDragOnPointerDown(
 
     const before = shufflePluginKey.getState(view.state)?.activeNodePos;
 
-    if (before === undefined) return;
+    if (before === undefined) return endDrag();
 
     const dom = view.nodeDOM(before);
-    if (!(dom instanceof HTMLElement)) return;
+    if (!(dom instanceof HTMLElement)) return endDrag();
 
     view.dispatch(
       view.state.tr.setMeta(shufflePluginKey, {
         type: "end",
       } satisfies ShufflePluginMeta),
     );
 
-    clone.style.transition = "transform 0.2s ease";
-    clone.style.boxShadow = initialStyles.boxShadow;
-
     const domRect = dom.getBoundingClientRect();
 
-    const { transform, transformOrigin } = translateCalc.place(domRect.left, domRect.top);
-
-    clone.style.transform = transform;
-    clone.style.transformOrigin = transformOrigin;
-
-    setTimeout(() => {
-      clone!.style.transition = "none";
-      delete dom.dataset["shuffleActive"];
-      clone!.remove();
-    }, 250);
-
-    return;
+    return endDrag(domRect);
   }
 
   const preventSelection = (e: MouseEvent) => {

packages/shuffle/src/transform/inflate.ts

@@ -0,0 +1,51 @@
+import { EditorView } from "prosemirror-view";
+
+import { shufflePluginKey } from "../plugin.js";
+
+import { findGap } from "./reorder.js";
+
+export function inflate(view: EditorView, clone: HTMLElement, clientX: number, clientY: number) {
+  const editorRect = view.dom.getBoundingClientRect();
+
+  if (
+    clientX < editorRect.left ||
+    clientX > editorRect.right ||
+    clientY < editorRect.top ||
+    clientY > editorRect.bottom
+  ) {
+    return null;
+  }
+
+  const nodeTypeName = clone.dataset["shuffleInflatable"];
+
+  if (!nodeTypeName) return null;
+
+  const nodeType = view.state.schema.nodes[nodeTypeName];
+
+  if (!nodeType) return null;
+
+  const posResult = view.posAtCoords({ left: clientX, top: clientY });
+  if (!posResult) return null;
+
+  const { pos } = posResult;
+
+  const gap = findGap(view.state.doc, pos, nodeType);
+  if (gap === null) return null;
+
+  const node = nodeType.createAndFill();
+
+  if (!node) return null;
+
+  const tr = view.state.tr;
+
+  tr.insert(gap, node);
+
+  tr.setMeta(shufflePluginKey, {
+    type: "map",
+    payload: { newPos: gap },
+  });
+
+  tr.setMeta("composition", shufflePluginKey.getState(view.state)?.comp);
+
+  return tr;
+}

packages/shuffle/src/transform/reorder.ts

@@ -58,7 +58,7 @@ export function reorder(
   return tr;
 }
 
-function findGap(doc: Node, pos: number, nodeType: NodeType) {
+export function findGap(doc: Node, pos: number, nodeType: NodeType) {
   const $pos = doc.resolve(pos);
 
   let d = $pos.depth;

packages/shuffle/src/translation.ts

@@ -29,4 +29,11 @@ export class TranslateCalculator {
       transformOrigin: "initial",
     };
   }
+
+  reset() {
+    return {
+      transform: `rotateX(0) scale(1) translate(${this.originX}px, ${this.originY}px)`,
+      transformOrigin: "initial",
+    };
+  }
 }