chore: custom snap modifier

packages/ui/src/components/editor/plugins/settings/components/input-size.tsx

@@ -0,0 +1,33 @@
+import { CSSProperties } from "react";
+
+interface InputSizeProps {
+  value:
+    | string
+    | number
+    | undefined
+    | CSSProperties["height"]
+    | CSSProperties["width"];
+  onChange: (value: string | number | undefined) => void;
+}
+
+const InputSize = ({ value, onChange }: InputSizeProps) => {
+  return (
+    <input
+      type="text"
+      value={value ? parseInt(value.toString().replace(/[^0-9]/g, "")) : ""}
+      className="nwcb-flex-1 nwcb-rounded nwcb-border nwcb-px-2 nwcb-py-1"
+      onChange={(e) => {
+        const value = e.target.value;
+        if (!value) {
+          onChange?.(undefined);
+          return;
+        }
+        const unit =
+          typeof value === "string" && value.includes("%") ? "%" : "px";
+        onChange?.(`${value}${unit}`);
+      }}
+    />
+  );
+};
+
+export default InputSize;

packages/ui/src/components/editor/section-editor/SectionEditor.tsx

@@ -4,6 +4,7 @@ import {
   DragEndEvent,
   DragOverlay,
   DragStartEvent,
+  Modifier,
   PointerSensor,
   rectIntersection,
   UniqueIdentifier,
@@ -16,13 +17,7 @@ import {
   // SortableContext,
   useSortable,
 } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import {
-  Block,
-  Page,
-  Section,
-  SectionEditor as SectionEditorContext,
-} from "../../../types";
+import { CSS, getEventCoordinates } from "@dnd-kit/utilities";
 import React, {
   forwardRef,
   Fragment,
@@ -33,6 +28,12 @@ import React, {
 } from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { convertJSONToCSS } from "../../../lib";
+import {
+  Block,
+  Page,
+  Section,
+  SectionEditor as SectionEditorContext,
+} from "../../../types";
 
 // import { snapCenterToCursor } from "@dnd-kit/modifiers";
 
@@ -59,13 +60,14 @@ const SectionEditor = forwardRef<SectionEditorContext, SectionEditorProps>(
       // active,
       setNodeRef,
       transition,
+      transform,
     } = useSortable({
       id: section.id,
     });
 
     const style = {
       transition,
-      // transform: CSS.Translate.toString(transform),
+      transform: CSS.Translate.toString(transform),
       opacity: isDragging ? 0.4 : 1,
     };
 
@@ -149,6 +151,32 @@ const SectionEditor = forwardRef<SectionEditorContext, SectionEditorProps>(
       return rectIntersection(updated);
     };
     const sectionRef = useRef<HTMLDivElement | null>(null);
+
+    const customSnapModifier: Modifier = ({
+      activatorEvent,
+      draggingNodeRect,
+      transform,
+    }) => {
+      if (draggingNodeRect && activatorEvent) {
+        const activatorCoordinates = getEventCoordinates(activatorEvent);
+
+        if (!activatorCoordinates) {
+          return transform;
+        }
+
+        const initialOffsetX = activatorCoordinates.x - draggingNodeRect.left;
+        const initialOffsetY = activatorCoordinates.y - draggingNodeRect.top;
+
+        return {
+          ...transform,
+          x: transform.x + initialOffsetX,
+          y: transform.y + initialOffsetY,
+        };
+      }
+
+      return transform;
+    };
+
     return (
       <div
         ref={(ref) => {
@@ -179,6 +207,15 @@ const SectionEditor = forwardRef<SectionEditorContext, SectionEditorProps>(
           collisionDetection={fixCursorSnapOffset}
           onDragStart={onDragStart}
           onDragEnd={onDragEnd}
+          // measuring={{
+          //   draggable: {
+          //     measure: (node) => {
+          //       console.log("the measured node: ", node);
+          //       console.log("children: ", node.children);
+          //       return node.getBoundingClientRect();
+          //     },
+          //   },
+          // }}
         >
           {blocks?.map((block, i) => {
             const css = `
@@ -240,12 +277,18 @@ const SectionEditor = forwardRef<SectionEditorContext, SectionEditorProps>(
             );
           })}
 
-          <DragOverlay>
+          <DragOverlay
+            modifiers={[customSnapModifier]}
+            // dropAnimation={{
+            //   duration: 1000,
+            //   easing: "cubic-bezier(0.18, 0.67, 0.6, 1.22)",
+            // }}
+          >
             {activeId ? (
               <div
                 id={`${activeId}`}
                 style={{ opacity: 0.4 }}
-                className="nwcb-ring-2 nwcb-ring-blue-400"
+                className="nwcb-ring-2 nwcb-ring-blue-400 nwcb-flex nwcb-items-center nwcb-justify-center"
               >
                 <BlockEditor
                   section={section}