feat/undo

f-lab-edu · Jan 24, 2025 · 3ab57f4 · 3ab57f4
1 parent da49b7a
commit 3ab57f4
Show file tree

Hide file tree

Showing 21 changed files with 437 additions and 258 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,30 +1,18 @@
 import Canvas from "./components/canvas/Canvas";
-import useCanvas from "./components/canvas/Canvas.hooks";
+import Header from "./components/header/Header";
 import Palette from "./components/palette/Palette";
 
 function App() {
-  const {
-    pageList,
-    addPage,
-    copyPageById,
-    removePageById,
-    getPageLength,
-    updateTextBox,
-    addTextBox,
-  } = useCanvas();
-
   return (
-    <div className="w-full h-[100vh] bg-gray-200 bg-opacity-100 flex flex-row">
-      <Palette addTextBox={addTextBox} />
-      <Canvas
-        updateTextBox={updateTextBox}
-        pageList={pageList}
-        addPage={addPage}
-        copyPageById={copyPageById}
-        removePageById={removePageById}
-        getPageLength={getPageLength}
-      />
-    </div>
+    <>
+      <div className="w-full min-h-[100vh] overflow-hidden bg-gray-200 ">
+        <Header />
+        <div className="bg-gray-200 w-full h-[91vh] overflow-hidden flex flex-row">
+          <Palette />
+          <Canvas />
+        </div>
+      </div>
+    </>
   );
 }
 

diff --git a/src/components/canvas/Canvas.hooks.tsx b/src/components/canvas/Canvas.hooks.tsx
diff --git a/src/components/canvas/Canvas.tsx b/src/components/canvas/Canvas.tsx
@@ -1,36 +1,14 @@
-import { PageType } from "../../type/page";
-import { TextBoxType } from "../../type/textBox";
+import { useCanvasStore } from "../../store/canvas.store";
+import { PageType } from "../../type/page.type";
 import Page from "./Page";
 
-interface CanvasProps {
-  pageList: PageType[];
-  addPage: (page: PageType | null) => void;
-  copyPageById: (pastePageId: number) => void;
-  removePageById: (removePageId: number) => void;
-  getPageLength: () => number;
-  updateTextBox: (pageId: number, textBox: TextBoxType) => void;
-}
+function Canvas() {
+  const pageList = useCanvasStore((state) => state.pageList);
 
-function Canvas({
-  pageList,
-  addPage,
-  copyPageById,
-  removePageById,
-  getPageLength,
-  updateTextBox,
-}: CanvasProps) {
   return (
-    <section className="w-full h-full flex flex-col justify-start gap-y-10 overflow-y-auto py-12">
-      {pageList.map((page: PageType, index: number) => (
-        <Page
-          key={index}
-          page={page}
-          addPage={addPage}
-          copyPageById={copyPageById}
-          removePageById={removePageById}
-          getPageLength={getPageLength}
-          updateTextBox={updateTextBox}
-        />
+    <section className="w-full h-full overflow-y-auto flex flex-col justify-start gap-y-10 py-5">
+      {pageList.map((page: PageType) => (
+        <Page key={page.id} page={page} />
       ))}
     </section>
   );

diff --git a/src/components/canvas/DrawArea.tsx b/src/components/canvas/DrawArea.tsx
@@ -1,21 +1,15 @@
-import { PageType } from "../../type/page";
-import { TextBoxType } from "../../type/textBox";
-import TextBox from "../palette/palettes/TextBox/TextBox";
+import { PageType } from "../../type/page.type";
+import TextBox from "../palette/buttons/TextBox/TextBox";
 
 interface DrawAreaProps {
   page: PageType;
-  updateTextBox: (pageId: number, textBox: TextBoxType) => void;
 }
 
-function DrawArea({ page, updateTextBox }: DrawAreaProps) {
+function DrawArea({ page }: DrawAreaProps) {
   return (
     <div className="w-[80%] aspect-video bg-white">
       {page.textBoxs.map((textBox) => (
-        <TextBox
-          pageId={page.id}
-          textBox={textBox}
-          updateTextBox={updateTextBox}
-        />
+        <TextBox key={textBox.id} pageId={page.id} textBox={textBox} />
       ))}
     </div>
   );

diff --git a/src/components/canvas/Page.tsx b/src/components/canvas/Page.tsx
@@ -1,35 +1,16 @@
-import { PageType } from "../../type/page";
-import { TextBoxType } from "../../type/textBox";
+import { PageType } from "../../type/page.type";
 import DrawArea from "./DrawArea";
 import PageHeader from "./PageHeader";
 
 interface PageProps {
   page: PageType;
-  addPage: (page: PageType | null) => void;
-  copyPageById: (pastePageId: number) => void;
-  removePageById: (removePageId: number) => void;
-  getPageLength: () => number;
-  updateTextBox: (pageId: number, textBox: TextBoxType) => void;
 }
 
-function Page({
-  page,
-  addPage,
-  copyPageById,
-  removePageById,
-  getPageLength,
-  updateTextBox,
-}: PageProps) {
+function Page({ page }: PageProps) {
   return (
     <article className="w-full flex flex-col justify-center items-center gap-y-2">
-      <PageHeader
-        page={page}
-        addPage={addPage}
-        copyPageById={copyPageById}
-        removePageById={removePageById}
-        getPageLength={getPageLength}
-      />
-      <DrawArea page={page} updateTextBox={updateTextBox} />
+      <PageHeader page={page} />
+      <DrawArea page={page} />
     </article>
   );
 }

diff --git a/src/components/canvas/PageHeader.tsx b/src/components/canvas/PageHeader.tsx
@@ -1,24 +1,49 @@
 import Button from "../../cva/Button/Button";
-import { PageType } from "../../type/page";
+import { useCanvasStore } from "../../store/canvas.store";
+import { useHistoryStore } from "../../store/history.store";
+import { HistoryType } from "../../type/history.type";
+import { PageType } from "../../type/page.type";
 
 interface PageHeaderProps {
   page: PageType;
-  addPage: (page: PageType | null) => void;
-  copyPageById: (pastePageId: number) => void;
-  removePageById: (removePageId: number) => void;
-  getPageLength: () => number;
 }
 
-function PageHeader({
-  page,
-  addPage,
-  copyPageById,
-  removePageById,
-  getPageLength,
-}: PageHeaderProps) {
-  const handleClickAddPage = () => addPage(null);
-  const handleClickPastePage = () => copyPageById(page.id);
-  const handleClickRemovePage = () => removePageById(page.id);
+function PageHeader({ page }: PageHeaderProps) {
+  const pageList = useCanvasStore((state) => state.pageList);
+  const addPage = useCanvasStore((state) => state.addPage);
+  const copyPageById = useCanvasStore((state) => state.copyPageById);
+  const removePage = useCanvasStore((state) => state.removePage);
+  const addHistory = useHistoryStore((state) => state.addHistory);
+
+  const handleClickAddPage = () => {
+    const newPage = addPage(null);
+    if (!newPage) return;
+    addHistoryAtStore(1, newPage);
+  };
+  const handleClickPastePage = () => {
+    const newPage = copyPageById(page.id);
+    if (!newPage) return;
+    addHistoryAtStore(1, newPage);
+  };
+  const handleClickRemovePage = () => {
+    removePage(page);
+
+    addHistoryAtStore(3, page);
+  };
+  const addHistoryAtStore = (undoType: 1 | 2 | 3, childPage: PageType) => {
+    const pageHistory: HistoryType = {
+      id: page.id,
+      child: null,
+      content: childPage,
+    };
+    const history: HistoryType = {
+      id: undoType,
+      content: null,
+      child: pageHistory,
+    };
+
+    addHistory(history);
+  };
 
   return (
     <div className="w-[80%] flex flex-row justify-between">
@@ -27,7 +52,7 @@ function PageHeader({
         <span className="text-sm text-gray-500"> - Add page title</span>
       </h3>
       <section className="flex flex-row gap-x-2">
-        {getPageLength() !== 1 && (
+        {pageList.length !== 1 && (
           <Button
             className="flex flex-col items-center justify-center gap-1"
             imgSrc="/src/assets/remove-page.icon.svg"