inv-106 블럭 > 보조 레이어 > 동작 연동

src/components/editor/action.ts

@@ -16,6 +16,17 @@ type EditorActionMap = {
     containerId: string;
     elementDetails: EditorElement;
   };
+  MOVE_ELEMENT: {
+    elementId: string;
+    newParentId: string;
+    newIndex: number;
+  };
+  MOVE_ELEMENT_UP: {
+    elementId: string;
+  };
+  MOVE_ELEMENT_DOWN: {
+    elementId: string;
+  };
   UPDATE_ELEMENT: {
     elementDetails: EditorElement;
   };
@@ -89,6 +100,63 @@ const traverseElements = (
   }, []);
 };
 
+const findElementAndParent = (
+  elements: EditorElement[],
+  elementId: string,
+): [EditorElement | null, EditorElement | null, number] => {
+  for (const el of elements) {
+    if (el.id === elementId) {
+      return [el, null, -1];
+    }
+    if (Array.isArray(el.content)) {
+      const index = el.content.findIndex((child) => child.id === elementId);
+      if (index !== -1) {
+        return [el.content[index], el, index];
+      }
+      const [foundEl, foundParent, foundIndex] = findElementAndParent(
+        el.content,
+        elementId,
+      );
+      if (foundEl) {
+        return [foundEl, foundParent, foundIndex];
+      }
+    }
+  }
+  return [null, null, -1];
+};
+
+const removeElementFromParent = (
+  elements: EditorElement[],
+  elementId: string,
+): [EditorElement[], EditorElement | null] => {
+  let removedElement: EditorElement | null = null;
+  const newElements = elements.map((el) => {
+    if (Array.isArray(el.content)) {
+      const index = el.content.findIndex((child) => child.id === elementId);
+      if (index !== -1) {
+        removedElement = el.content[index];
+        return {
+          ...el,
+          content: [
+            ...el.content.slice(0, index),
+            ...el.content.slice(index + 1),
+          ],
+        };
+      }
+      const [newContent, removed] = removeElementFromParent(
+        el.content,
+        elementId,
+      );
+      if (removed) {
+        removedElement = removed;
+        return { ...el, content: newContent };
+      }
+    }
+    return el;
+  }) as EditorElement[];
+  return [newElements, removedElement];
+};
+
 /**
  * Action Handlers
  */
@@ -119,6 +187,79 @@ const actionHandlers: {
     });
   },
 
+  MOVE_ELEMENT: (editor, payload) => {
+    const { elementId, newParentId, newIndex } = payload;
+
+    const [elements, removedElement] = removeElementFromParent(
+      editor.state.elements,
+      elementId,
+    );
+    if (!removedElement) return editor;
+
+    const insertElement = (els: EditorElement[]): EditorElement[] => {
+      return els.map((el) => {
+        if (el.id === newParentId && Array.isArray(el.content)) {
+          const newContent = [...el.content];
+          newContent.splice(newIndex, 0, removedElement);
+          return { ...el, content: newContent };
+        }
+        if (Array.isArray(el.content)) {
+          return { ...el, content: insertElement(el.content) };
+        }
+        return el;
+      }) as EditorElement[];
+    };
+
+    const newElements = insertElement(elements);
+
+    return updateEditorHistory(editor, {
+      ...editor.state,
+      elements: newElements,
+    });
+  },
+
+  MOVE_ELEMENT_UP: (editor, payload) => {
+    const { elementId } = payload;
+    const [element, parent, currentIndex] = findElementAndParent(
+      editor.state.elements,
+      elementId,
+    );
+    if (
+      !element ||
+      !parent ||
+      !Array.isArray(parent.content) ||
+      currentIndex <= 0
+    )
+      return editor;
+
+    return actionHandlers.MOVE_ELEMENT(editor, {
+      elementId,
+      newParentId: parent.id,
+      newIndex: currentIndex - 1,
+    });
+  },
+
+  MOVE_ELEMENT_DOWN: (editor, payload) => {
+    const { elementId } = payload;
+    const [element, parent, currentIndex] = findElementAndParent(
+      editor.state.elements,
+      elementId,
+    );
+    if (
+      !element ||
+      !parent ||
+      !Array.isArray(parent.content) ||
+      currentIndex === parent.content.length - 1
+    )
+      return editor;
+
+    return actionHandlers.MOVE_ELEMENT(editor, {
+      elementId,
+      newParentId: parent.id,
+      newIndex: currentIndex + 1,
+    });
+  },
+
   UPDATE_ELEMENT: (editor, payload) => {
     const newElements = traverseElements(editor.state.elements, (element) => {
       if (element.id === payload.elementDetails.id) {
@@ -163,6 +304,7 @@ const actionHandlers: {
     return updateEditorHistory(editor, {
       ...editor.state,
       elements: newElements,
+      selectedElement: emptyElement,
     });
   },
 

src/components/editor/elements/container.tsx

@@ -16,7 +16,7 @@ type Props = { element: EditorElement };
 
 export default function Container({ element }: Props) {
   const { id, content, type } = element;
-  const { dispatch } = useEditor();
+  const { editor, dispatch } = useEditor();
   const isRoot = type === "__body";
 
   const handleDragStart = (e: React.DragEvent) => {
@@ -126,8 +126,11 @@ export default function Container({ element }: Props) {
     <ElementWrapper
       element={element}
       className={cn(
-        "group relative h-fit w-full max-w-full p-4 transition-all",
-        isRoot && "h-full overflow-visible",
+        "h-fit w-full max-w-full",
+        isRoot && "h-full overflow-y-auto",
+        !isRoot &&
+          !editor.state.isPreviewMode &&
+          "ring-1 ring-muted hover:ring-border",
       )}
       onDrop={handleDrop}
       onDragStart={handleDragStart}

src/components/editor/elements/element-helper.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  CopyPlusIcon,
+  GripVerticalIcon,
+  Trash2Icon,
+} from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { useEditor } from "~/components/editor/provider";
+import { isValidSelectEditorElement } from "~/components/editor/util";
+import { Badge } from "~/components/ui/badge";
+import { Button } from "~/components/ui/button";
+import { cn } from "~/lib/utils";
+
+export default function ElementHelper() {
+  const { editor, dispatch } = useEditor();
+  const element = editor.state.selectedElement;
+
+  const [layerStyle, setLayerStyle] = useState<React.CSSProperties>({});
+
+  const updateLayerStyle = useCallback((id: string) => {
+    const el = document.querySelector(`[data-element-id="${id}"]`);
+
+    if (!el) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      const { top, left, width, height } = el.getBoundingClientRect();
+      setLayerStyle({ top, left, width, height });
+    });
+
+    resizeObserver.observe(el, { box: "border-box" });
+    return () => {
+      resizeObserver.unobserve(el);
+    };
+  }, []);
+
+  useEffect(() => {
+    return updateLayerStyle(element.id);
+  }, [element.id, updateLayerStyle]);
+
+  const handleMoveUp = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    dispatch({
+      type: "MOVE_ELEMENT_UP",
+      payload: {
+        elementId: element.id,
+      },
+    });
+    updateLayerStyle(element.id);
+  };
+
+  const handleMoveDown = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    dispatch({
+      type: "MOVE_ELEMENT_DOWN",
+      payload: {
+        elementId: element.id,
+      },
+    });
+    updateLayerStyle(element.id);
+  };
+
+  const handleDeleteElement = () => {
+    dispatch({
+      type: "DELETE_ELEMENT",
+      payload: {
+        elementDetails: element,
+      },
+    });
+  };
+
+  return (
+    typeof window !== "undefined" &&
+    createPortal(
+      !editor.state.isPreviewMode && isValidSelectEditorElement(element) && (
+        <div
+          style={layerStyle}
+          className={cn(
+            "fixed z-50",
+            !editor.state.isPreviewMode && "ring-1 ring-primary",
+          )}
+        >
+          <Badge className="absolute -left-[1px] -top-[26px] z-10">
+            {element.name}
+          </Badge>
+          <div className="absolute -left-[28px] -top-[1px] z-10">
+            <div className="flex flex-col gap-0.5">
+              <IconButton>
+                <GripVerticalIcon className="h-4 w-4" />
+              </IconButton>
+              <IconButton onClick={handleMoveUp}>
+                <ArrowUpIcon className="h-4 w-4" />
+              </IconButton>
+              <IconButton onClick={handleMoveDown}>
+                <ArrowDownIcon className="h-4 w-4" />
+              </IconButton>
+            </div>
+          </div>
+          <div className="absolute -right-[28px] -top-[1px] z-10">
+            <div className="flex flex-col gap-0.5">
+              <IconButton onClick={handleDeleteElement}>
+                <Trash2Icon className="h-4 w-4" />
+              </IconButton>
+              <IconButton>
+                <CopyPlusIcon className="h-4 w-4" />
+              </IconButton>
+            </div>
+          </div>
+        </div>
+      ),
+      document.body,
+    )
+  );
+}
+
+function IconButton(props: React.ComponentProps<"button">) {
+  return <Button {...props} size="icon" className="h-6 w-6 p-0" />;
+}