Merge pull request #674 from Lemoncode/dev

restore mobile temp restriction and fix on modal annoying leave dialog
Lemoncode · Jan 28, 2025 · 0be3e75 · 0be3e75
2 parents 7d2bc7e + 50cc694
commit 0be3e75
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 25 deletions.
diff --git a/editor.html b/editor.html
@@ -37,10 +37,5 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
-    <script>
-      window.onbeforeunload = function () {
-        return 'You are about to leave this page. All progress in QuickMock will be lost. Are you sure you want to proceed?';
-      };
-    </script>
   </body>
 </html>
diff --git a/index.html b/index.html
@@ -357,7 +357,8 @@ <h1>
             </p>
           </div>
         </div>
-        <a href="editor.html" class="link">Launch QuickMock</a>
+        <a href="editor.html" class="link hide-mobile">START DESIGN</a>
+        <p class="mobile-text mobile-only">Now, only available on desktop.</p>
       </div>
     </main>
   </body>

diff --git a/src/core/providers/canvas/canvas.model.ts b/src/core/providers/canvas/canvas.model.ts
@@ -124,6 +124,7 @@ export interface CanvasContextModel {
   updateColorSlot: (color: string, index: number) => void;
   dropRef: React.MutableRefObject<HTMLDivElement | null>;
   setDropRef: (dropRef: React.MutableRefObject<HTMLDivElement | null>) => void;
+  setIsDirty: (dirty: boolean) => void;
   loadSampleDocument: boolean;
   setLoadSampleDocument: React.Dispatch<React.SetStateAction<boolean>>;
 }

diff --git a/src/core/providers/canvas/canvas.provider.tsx b/src/core/providers/canvas/canvas.provider.tsx
@@ -51,10 +51,34 @@ export const CanvasProvider: React.FC<Props> = props => {
       addSnapshot
     );
 
-  const selectionInfo = useSelection(document, setDocument);
+  const [isDirty, setIsDirty] = React.useState(false);
+
+  const setDocumentAndMarkDirtyState = (
+    updater: DocumentModel | ((prev: DocumentModel) => DocumentModel),
+    isDirty = true
+  ) => {
+    setDocument(updater);
+    setIsDirty(isDirty);
+  };
+
+  const selectionInfo = useSelection(
+    document,
+    setDocument,
+    setDocumentAndMarkDirtyState
+  );
+
+  React.useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (isDirty) {
+        e.preventDefault();
+      }
+    };
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+  }, [isDirty]);
 
   const addNewPage = () => {
-    setDocument(lastDocument =>
+    setDocumentAndMarkDirtyState(lastDocument =>
       produce(lastDocument, draft => {
         const newActiveIndex = draft.pages.length;
         draft.pages.push({
@@ -76,7 +100,7 @@ export const CanvasProvider: React.FC<Props> = props => {
       }
     );
 
-    setDocument(lastDocument =>
+    setDocumentAndMarkDirtyState(lastDocument =>
       produce(lastDocument, draft => {
         const newPage = {
           id: uuidv4(),
@@ -96,7 +120,7 @@ export const CanvasProvider: React.FC<Props> = props => {
         ? 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 =>
+    setDocumentAndMarkDirtyState(lastDocument =>
       produce(lastDocument, draft => {
         draft.pages = draft.pages.filter(
           currentPage => document.pages[pageIndex].id !== currentPage.id
@@ -119,7 +143,7 @@ export const CanvasProvider: React.FC<Props> = props => {
     selectionInfo.clearSelection();
     selectionInfo.shapeRefs.current = {};
 
-    setDocument(lastDocument =>
+    setDocumentAndMarkDirtyState(lastDocument =>
       produce(lastDocument, draft => {
         const pageIndex = draft.pages.findIndex(page => page.id === pageId);
         if (pageIndex !== -1) {
@@ -130,15 +154,15 @@ export const CanvasProvider: React.FC<Props> = props => {
   };
 
   const editPageTitle = (pageIndex: number, newName: string) => {
-    setDocument(lastDocument =>
+    setDocumentAndMarkDirtyState(lastDocument =>
       produce(lastDocument, draft => {
         draft.pages[pageIndex].name = newName;
       })
     );
   };
 
   const swapPages = (id1: string, id2: string) => {
-    setDocument(lastDocument =>
+    setDocumentAndMarkDirtyState(lastDocument =>
       produce(lastDocument, draft => {
         const index1 = draft.pages.findIndex(page => page.id === id1);
         const index2 = draft.pages.findIndex(page => page.id === id2);
@@ -159,7 +183,7 @@ export const CanvasProvider: React.FC<Props> = props => {
     });
 
     if (isPageIndexValid(document)) {
-      setDocument(lastDocument =>
+      setDocumentAndMarkDirtyState(lastDocument =>
         produce(lastDocument, draft => {
           draft.pages[lastDocument.activePageIndex].shapes.push(...newShapes);
         })
@@ -198,13 +222,13 @@ export const CanvasProvider: React.FC<Props> = props => {
     );
 
   const createNewFullDocument = () => {
-    setDocument(createDefaultDocumentModel());
+    setDocumentAndMarkDirtyState(createDefaultDocumentModel(), false);
     setFileName('');
   };
 
   const deleteSelectedShapes = () => {
     if (isPageIndexValid(document)) {
-      setDocument(lastDocument =>
+      setDocumentAndMarkDirtyState(lastDocument =>
         produce(lastDocument, draft => {
           draft.pages[lastDocument.activePageIndex].shapes =
             removeShapesFromList(
@@ -230,7 +254,7 @@ export const CanvasProvider: React.FC<Props> = props => {
 
     const newShape = createShape({ x, y }, type, otherProps);
 
-    setDocument(lastDocument =>
+    setDocumentAndMarkDirtyState(lastDocument =>
       produce(lastDocument, draft => {
         draft.pages[lastDocument.activePageIndex].shapes.push(newShape);
       })
@@ -260,7 +284,7 @@ export const CanvasProvider: React.FC<Props> = props => {
         });
       });
     } else {
-      setDocument(fullDocument => {
+      setDocumentAndMarkDirtyState(fullDocument => {
         return produce(fullDocument, draft => {
           draft.pages[document.activePageIndex].shapes = draft.pages[
             document.activePageIndex
@@ -274,7 +298,7 @@ export const CanvasProvider: React.FC<Props> = props => {
 
   const updateShapePosition = (id: string, { x, y }: Coord) => {
     if (isPageIndexValid(document)) {
-      setDocument(fullDocument => {
+      setDocumentAndMarkDirtyState(fullDocument => {
         return produce(fullDocument, draft => {
           draft.pages[document.activePageIndex].shapes = draft.pages[
             document.activePageIndex
@@ -307,6 +331,7 @@ export const CanvasProvider: React.FC<Props> = props => {
   };
 
   const loadDocument = (document: DocumentModel) => {
+    setDocumentAndMarkDirtyState(document, false);
     loadSampleDocument && setLoadSampleDocument(false);
     setDocument(document);
     setHowManyLoadedDocuments(numberOfDocuments => numberOfDocuments + 1);
@@ -373,6 +398,7 @@ export const CanvasProvider: React.FC<Props> = props => {
         updateColorSlot,
         dropRef,
         setDropRef,
+        setIsDirty,
         loadSampleDocument,
         setLoadSampleDocument,
       }}

diff --git a/src/core/providers/canvas/use-selection.hook.ts b/src/core/providers/canvas/use-selection.hook.ts
@@ -8,7 +8,11 @@ import { produce } from 'immer';
 
 export const useSelection = (
   document: DocumentModel,
-  setDocument: React.Dispatch<React.SetStateAction<DocumentModel>>
+  setDocument: React.Dispatch<React.SetStateAction<DocumentModel>>,
+  setDocumentAndMarkDirtyState: (
+    updater: DocumentModel | ((prev: DocumentModel) => DocumentModel),
+    isDirty?: boolean
+  ) => void
 ): SelectionInfo => {
   const transformerRef = useRef<Konva.Transformer>(null);
   const shapeRefs = useRef<ShapeRefs>({});
@@ -165,7 +169,7 @@ export const useSelection = (
     }
 
     const selectedShapeId = selectedShapesIds[0];
-    setDocument(prevDocument =>
+    setDocumentAndMarkDirtyState(prevDocument =>
       produce(prevDocument, draft => {
         draft.pages[prevDocument.activePageIndex].shapes = draft.pages[
           prevDocument.activePageIndex
@@ -181,7 +185,7 @@ export const useSelection = (
     key: K,
     value: OtherProps[K]
   ) => {
-    setDocument(prevDocument =>
+    setDocumentAndMarkDirtyState(prevDocument =>
       produce(prevDocument, draft => {
         draft.pages[prevDocument.activePageIndex].shapes = draft.pages[
           prevDocument.activePageIndex
@@ -198,7 +202,7 @@ export const useSelection = (
     key: K,
     value: OtherProps[K]
   ) => {
-    setDocument(prevDocument =>
+    setDocumentAndMarkDirtyState(prevDocument =>
       produce(prevDocument, draft => {
         draft.pages[prevDocument.activePageIndex].shapes = draft.pages[
           prevDocument.activePageIndex
@@ -225,7 +229,6 @@ export const useSelection = (
     if (selectedShapesIds.length === 1) {
       const selectedShapeId = selectedShapesIds[0];
       updateOtherPropsOnSelectedSingleShape(selectedShapeId, key, value);
-
       return;
     }
 

diff --git a/src/pods/toolbar/components/save-button/save-button.tsx b/src/pods/toolbar/components/save-button/save-button.tsx
@@ -2,13 +2,20 @@ import { SaveIcon } from '@/common/components/icons/save-icon.component';
 import classes from '@/pods/toolbar/toolbar.pod.module.css';
 import { ToolbarButton } from '../toolbar-button';
 import { useLocalDisk } from '@/core/local-disk';
+import { useCanvasContext } from '@/core/providers';
 
 export const SaveButton: React.FC = () => {
   const { handleSave } = useLocalDisk();
+  const { setIsDirty } = useCanvasContext();
+
+  const handleSaveLocal = () => {
+    handleSave();
+    setIsDirty(false);
+  };
 
   return (
     <ToolbarButton
-      onClick={handleSave}
+      onClick={handleSaveLocal}
       className={classes.button}
       icon={<SaveIcon />}
       label="Save"
-Original file line number
+Diff line change
@@ Expand Up / @@ -357,7 +357,8 @@ <h1> @@
                 </p>
               </div>
             </div>
-            <a href="editor.html" class="link">Launch QuickMock</a>
+            <a href="editor.html" class="link hide-mobile">START DESIGN</a>
+            <p class="mobile-text mobile-only">Now, only available on desktop.</p>
           </div>
         </main>
       </body>
@@ Expand Down @@