Merge branch 'dev' into feature/#473-Create-a-gray-semitransparent-Re…

…ctangle-Component

src/common/components/icons/index.ts

@@ -8,3 +8,5 @@ export * from './x-icon.component';
 export * from './quickmock-logo.component';
 export * from './copy-icon.component';
 export * from './paste-icon.component';
+export * from './delete-icon.component';
+export * from './pencil-icon.component';

src/common/components/icons/pencil-icon.component.tsx

@@ -0,0 +1,15 @@
+export const PencilIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path
+        fill="currentColor"
+        d="m225.9 74.78l-44.69-44.69a14 14 0 0 0-19.8 0L38.1 153.41a13.94 13.94 0 0 0-4.1 9.9V208a14 14 0 0 0 14 14h44.69a13.94 13.94 0 0 0 9.9-4.1L225.9 94.58a14 14 0 0 0 0-19.8M48.49 160L136 72.48L155.51 92L68 179.51ZM46 208v-33.52L81.51 210H48a2 2 0 0 1-2-2m50-.49L76.49 188L164 100.48L183.51 120ZM217.41 86.1L192 111.51L144.49 64l25.41-25.42a2 2 0 0 1 2.83 0l44.68 44.69a2 2 0 0 1 0 2.83"
+      />
+    </svg>
+  );
+};

src/core/local-disk/shapes-to-document.mapper.ts

@@ -1,3 +1,4 @@
+import { ShapeModel } from '../model';
 import { DocumentModel } from '../providers/canvas/canvas.model';
 import { QuickMockFileContract } from './local-disk.model';
 
@@ -6,7 +7,7 @@ export const mapFromShapesArrayToQuickMockFileDocument = (
 ): QuickMockFileContract => {
   // TODO: Serialize the activePageIndex?
   return {
-    version: '0.1',
+    version: '0.2',
     pages: fullDocument.pages,
   };
 };
@@ -19,3 +20,27 @@ export const mapFromQuickMockFileDocumentToApplicationDocument = (
     pages: fileDocument.pages,
   };
 };
+
+// Example function to handle version 0.1 parsing
+export const mapFromQuickMockFileDocumentToApplicationDocumentV0_1 = (
+  fileDocument: QuickMockFileContract
+): DocumentModel => {
+  // Combine all shapes into a single page
+  const combinedShapes: ShapeModel[] = fileDocument.pages.reduce<ShapeModel[]>(
+    (acc: ShapeModel[], page) => {
+      return acc.concat(page.shapes);
+    },
+    []
+  );
+
+  return {
+    activePageIndex: 0,
+    pages: [
+      {
+        id: '1',
+        name: 'default',
+        shapes: combinedShapes,
+      },
+    ],
+  };
+};

src/core/local-disk/shapes-to.document.mapper.spec.ts

@@ -1,6 +1,7 @@
 import {
   mapFromShapesArrayToQuickMockFileDocument,
   mapFromQuickMockFileDocumentToApplicationDocument,
+  mapFromQuickMockFileDocumentToApplicationDocumentV0_1,
 } from './shapes-to-document.mapper';
 import { ShapeModel } from '../model';
 import { QuickMockFileContract } from './local-disk.model';
@@ -35,7 +36,7 @@ describe('shapes to document mapper', () => {
       };
 
       const expectedResult: QuickMockFileContract = {
-        version: '0.1',
+        version: '0.2',
         pages: [
           {
             id: '1',
@@ -88,7 +89,7 @@ describe('shapes to document mapper', () => {
       };
 
       const expectedResult: QuickMockFileContract = {
-        version: '0.1',
+        version: '0.2',
         pages: [
           {
             id: '1',
@@ -110,7 +111,7 @@ describe('shapes to document mapper', () => {
     it('Should return a document model with a empty shapes array when we feed a empty pages array', () => {
       //arrange
       const fileDocument: QuickMockFileContract = {
-        version: '0.1',
+        version: '0.2',
         pages: [
           {
             id: '1',
@@ -140,7 +141,7 @@ describe('shapes to document mapper', () => {
     it('Should return a document model with a empty shapes array when we feed a file document with a one page but with empty shapes', () => {
       //arrange
       const fileDocument: QuickMockFileContract = {
-        version: '0.1',
+        version: '0.2',
         pages: [
           {
             id: '1',
@@ -287,5 +288,67 @@ describe('shapes to document mapper', () => {
       //assert
       expect(result).toEqual(expectedResult);
     });
+
+    it('Should return a document model with shapes in one page when we feed a file document from version 0.1', () => {
+      //arrange
+      const shapespageA: ShapeModel[] = [
+        {
+          id: '1',
+          type: 'rectangle',
+          x: 0,
+          y: 0,
+          width: 100,
+          height: 100,
+          allowsInlineEdition: false,
+          typeOfTransformer: ['rotate'],
+        },
+      ];
+
+      const shapesPageB: ShapeModel[] = [
+        {
+          id: '3',
+          type: 'browser',
+          x: 0,
+          y: 0,
+          width: 100,
+          height: 100,
+          allowsInlineEdition: true,
+          typeOfTransformer: [' rotate'],
+        },
+      ];
+
+      const fileDocument: QuickMockFileContract = {
+        version: '0.1',
+        pages: [
+          {
+            id: '1',
+            name: 'default',
+            shapes: shapespageA,
+          },
+          {
+            id: '2',
+            name: 'default',
+            shapes: shapesPageB,
+          },
+        ],
+      };
+
+      const expectedResult: DocumentModel = {
+        activePageIndex: 0,
+        pages: [
+          {
+            id: '1',
+            name: 'default',
+            shapes: shapespageA.concat(shapesPageB),
+          },
+        ],
+      };
+
+      //act
+      const result =
+        mapFromQuickMockFileDocumentToApplicationDocumentV0_1(fileDocument);
+      //assert
+      expect(result).toEqual(expectedResult);
+    });
   });
 });

src/core/local-disk/use-local-disk.hook.ts

@@ -3,6 +3,7 @@ import { useCanvasContext } from '../providers';
 import {
   mapFromShapesArrayToQuickMockFileDocument,
   mapFromQuickMockFileDocumentToApplicationDocument,
+  mapFromQuickMockFileDocumentToApplicationDocumentV0_1,
 } from './shapes-to-document.mapper';
 import { fileInput, OnFileSelectedCallback } from '@/common/file-input';
 import { QuickMockFileContract } from './local-disk.model';
@@ -57,9 +58,18 @@ export const useLocalDisk = () => {
     reader.onload = () => {
       const content = reader.result as string;
       const parseData: QuickMockFileContract = JSON.parse(content);
-      const appDocument =
-        mapFromQuickMockFileDocumentToApplicationDocument(parseData);
-      loadDocument(appDocument);
+
+      if (parseData.version === '0.1') {
+        // Handle version 0.1 parsing
+        const appDocument =
+          mapFromQuickMockFileDocumentToApplicationDocumentV0_1(parseData);
+        loadDocument(appDocument);
+      } else {
+        // Handle other versions
+        const appDocument =
+          mapFromQuickMockFileDocumentToApplicationDocument(parseData);
+        loadDocument(appDocument);
+      }
     };
     reader.readAsText(file);
   };

src/core/providers/canvas/canvas.model.ts

@@ -96,5 +96,12 @@ export interface CanvasContextModel {
   setFileName: (fileName: string) => void;
   fullDocument: DocumentModel;
   addNewPage: () => void;
+  duplicatePage: (pageIndex: number) => void;
   setActivePage: (pageId: string) => void;
+  deletePage: (pageIndex: number) => void;
+  editPageTitle: (pageIndex: number, newName: string) => void;
+  isThumbnailContextMenuVisible: boolean;
+  setIsThumbnailContextMenuVisible: React.Dispatch<
+    React.SetStateAction<boolean>
+  >;
 }

src/core/providers/canvas/canvas.provider.tsx

@@ -23,6 +23,8 @@ export const CanvasProvider: React.FC<Props> = props => {
   const stageRef = React.useRef<Konva.Stage>(null);
   const [isInlineEditing, setIsInlineEditing] = React.useState(false);
   const [fileName, setFileName] = React.useState<string>('');
+  const [isThumbnailContextMenuVisible, setIsThumbnailContextMenuVisible] =
+    React.useState(false);
 
   const {
     addSnapshot,
@@ -53,15 +55,63 @@ export const CanvasProvider: React.FC<Props> = props => {
     );
   };
 
+  const duplicatePage = (pageIndex: number) => {
+    const newShapes: ShapeModel[] = document.pages[pageIndex].shapes.map(
+      shape => {
+        const newShape: ShapeModel = { ...shape };
+        newShape.id = uuidv4();
+        return newShape;
+      }
+    );
+
+    setDocument(lastDocument =>
+      produce(lastDocument, draft => {
+        const newPage = {
+          id: uuidv4(),
+          name: `${document.pages[pageIndex].name} - copy`,
+          shapes: newShapes,
+        };
+        draft.pages.push(newPage);
+        setActivePage(newPage.id);
+      })
+    );
+  };
+
+  const deletePage = (pageIndex: number) => {
+    const newActivePageId =
+      pageIndex < document.pages.length - 1
+        ? document.pages[pageIndex + 1].id // If it's not the last page, select the next one
+        : document.pages[pageIndex - 1].id; // Otherwise, select the previous one
+
+    setDocument(lastDocument =>
+      produce(lastDocument, draft => {
+        draft.pages = draft.pages.filter(
+          currentPage => document.pages[pageIndex].id !== currentPage.id
+        );
+      })
+    );
+
+    setActivePage(newActivePageId);
+  };
+
   const setActivePage = (pageId: string) => {
     selectionInfo.clearSelection();
     selectionInfo.shapeRefs.current = {};
+
     setDocument(lastDocument =>
       produce(lastDocument, draft => {
-        draft.activePageIndex = draft.pages.findIndex(
-          page => page.id === pageId
-        );
-        console.log(draft.activePageIndex);
+        const pageIndex = draft.pages.findIndex(page => page.id === pageId);
+        if (pageIndex !== -1) {
+          draft.activePageIndex = pageIndex;
+        }
+      })
+    );
+  };
+
+  const editPageTitle = (pageIndex: number, newName: string) => {
+    setDocument(lastDocument =>
+      produce(lastDocument, draft => {
+        draft.pages[pageIndex].name = newName;
       })
     );
   };
@@ -245,7 +295,12 @@ export const CanvasProvider: React.FC<Props> = props => {
         setFileName,
         fullDocument: document,
         addNewPage,
+        duplicatePage,
         setActivePage,
+        deletePage,
+        editPageTitle,
+        isThumbnailContextMenuVisible,
+        setIsThumbnailContextMenuVisible,
       }}
     >
       {children}