Merge branch 'dev' into Bug/#502-Loading-0.1-Documents

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

@@ -99,6 +99,7 @@ export interface CanvasContextModel {
   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

@@ -68,7 +68,7 @@ export const CanvasProvider: React.FC<Props> = props => {
       produce(lastDocument, draft => {
         const newPage = {
           id: uuidv4(),
-          name: `Page ${draft.pages.length + 1}`,
+          name: `${document.pages[pageIndex].name} - copy`,
           shapes: newShapes,
         };
         draft.pages.push(newPage);
@@ -108,6 +108,14 @@ export const CanvasProvider: React.FC<Props> = props => {
     );
   };
 
+  const editPageTitle = (pageIndex: number, newName: string) => {
+    setDocument(lastDocument =>
+      produce(lastDocument, draft => {
+        draft.pages[pageIndex].name = newName;
+      })
+    );
+  };
+
   const pasteShapes = (shapes: ShapeModel[]) => {
     const newShapes: ShapeModel[] = shapes.map(shape => {
       shape.id = uuidv4();
@@ -290,6 +298,7 @@ export const CanvasProvider: React.FC<Props> = props => {
         duplicatePage,
         setActivePage,
         deletePage,
+        editPageTitle,
         isThumbnailContextMenuVisible,
         setIsThumbnailContextMenuVisible,
       }}

src/pods/thumb-pages/components/context-menu/context-menu.component.module.css

@@ -7,7 +7,7 @@
   transform: translate(-50%, -50%);
   border: 1px solid var(--primary-500);
   background-color: var(--primary-100);
-  opacity: 0.9;
+  opacity: 0.98;
 }
 
 .container {

src/pods/thumb-pages/components/context-menu/context-menu.component.tsx

@@ -1,18 +1,24 @@
 import React from 'react';
 import { useCanvasContext } from '@/core/providers';
 import classes from './context-menu.component.module.css';
-import { CopyIcon, DeleteIcon } from '@/common/components/icons';
+import { CopyIcon, DeleteIcon, PencilIcon } from '@/common/components/icons';
 
 interface ThumbPageContextMenuProps {
   contextMenuRef: React.RefObject<HTMLDivElement>;
   setShowContextMenu: (show: boolean) => void;
   pageIndex: number;
+  setPageTitleBeingEdited: (index: number) => void;
 }
 
 export const ThumbPageContextMenu: React.FunctionComponent<
   ThumbPageContextMenuProps
 > = props => {
-  const { contextMenuRef, setShowContextMenu, pageIndex } = props;
+  const {
+    contextMenuRef,
+    setShowContextMenu,
+    pageIndex,
+    setPageTitleBeingEdited,
+  } = props;
   const {
     setIsThumbnailContextMenuVisible,
     fullDocument,
@@ -37,9 +43,12 @@ export const ThumbPageContextMenu: React.FunctionComponent<
         break;
       case ContextButtonType.Rename:
         console.log('Rename');
+        setPageTitleBeingEdited(pageIndex);
         break;
       case ContextButtonType.Delete:
-        deletePage(pageIndex);
+        if (fullDocument.pages.length !== 1) {
+          deletePage(pageIndex);
+        }
         break;
     }
     setShowContextMenu(false);
@@ -57,6 +66,15 @@ export const ThumbPageContextMenu: React.FunctionComponent<
         <p>Duplicate</p>
         <CopyIcon />
       </div>
+      <div
+        onClick={event =>
+          handleClickOnContextButton(event, ContextButtonType.Rename)
+        }
+        className={classes.container}
+      >
+        <p>Rename</p>
+        <PencilIcon />
+      </div>
       <div
         onClick={event =>
           handleClickOnContextButton(event, ContextButtonType.Delete)

src/pods/thumb-pages/components/context-menu/index.ts

@@ -0,0 +1 @@
+export * from './context-menu.component';

src/pods/thumb-pages/components/index.ts

@@ -1 +1,2 @@
 export * from './thumb-page';
+export * from './page-title-inline-edit.component';

src/pods/thumb-pages/components/page-title-inline-edit.component.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react';
+import { useCanvasContext } from '@/core/providers';
+
+interface PageTitleInlineEditProps {
+  pageIndex: number;
+  setPageTitleBeingEdited: (index: number | null) => void;
+}
+
+export const PageTitleInlineEdit: React.FC<PageTitleInlineEditProps> = ({
+  pageIndex,
+  setPageTitleBeingEdited,
+}) => {
+  const { fullDocument, editPageTitle, setIsInlineEditing } =
+    useCanvasContext();
+  const [inputValue, setInputValue] = useState(
+    fullDocument.pages[pageIndex].name
+  );
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const updatePageTitle = () => {
+    editPageTitle(pageIndex, inputValue);
+    setPageTitleBeingEdited(null);
+    setIsInlineEditing(false);
+  };
+
+  const handleAction = (
+    event: React.FormEvent<HTMLFormElement> | React.FocusEvent<HTMLInputElement>
+  ) => {
+    if (event.type === 'submit') {
+      event.preventDefault();
+    }
+    updatePageTitle();
+  };
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+      setIsInlineEditing(true);
+    }
+  }, []);
+
+  return (
+    <form onSubmit={handleAction}>
+      <input
+        ref={inputRef}
+        type="text"
+        value={inputValue}
+        onChange={e => setInputValue(e.target.value)}
+        onBlur={handleAction}
+      />
+    </form>
+  );
+};

src/pods/thumb-pages/components/thumb-page.tsx

@@ -5,16 +5,17 @@ import { calculateCanvasBounds } from '@/pods/toolbar/components/export-button/e
 import { KonvaEventObject } from 'konva/lib/Node';
 import { createRef, useRef } from 'react';
 import { Layer, Stage } from 'react-konva';
-import { ThumbPageContextMenu } from './context-menu/context-menu.component';
+import { ThumbPageContextMenu } from './context-menu';
 import { useContextMenu } from '../use-context-menu-thumb.hook';
 
 interface Props {
   pageIndex: number;
   onSetActivePage: (pageId: string) => void;
+  setPageTitleBeingEdited: (index: number) => void;
 }
 
 export const ThumbPage: React.FunctionComponent<Props> = props => {
-  const { pageIndex, onSetActivePage } = props;
+  const { pageIndex, onSetActivePage, setPageTitleBeingEdited } = props;
   const { fullDocument } = useCanvasContext();
   const page = fullDocument.pages[pageIndex];
   const shapes = page.shapes;
@@ -69,6 +70,7 @@ export const ThumbPage: React.FunctionComponent<Props> = props => {
             contextMenuRef={contextMenuRef}
             setShowContextMenu={setShowContextMenu}
             pageIndex={pageIndex}
+            setPageTitleBeingEdited={setPageTitleBeingEdited}
           />
         )}
       </div>

src/pods/thumb-pages/thumb-pages.pod.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import classes from './thumb-pages.module.css';
 import { useCanvasContext } from '@/core/providers';
-import { ThumbPage } from './components';
+import { PageTitleInlineEdit, ThumbPage } from './components';
 
 export const ThumbPagesPod: React.FC = () => {
   const { fullDocument, addNewPage, setActivePage } = useCanvasContext();
+  const [pageTitleBeingEdited, setPageTitleBeingEdited] = React.useState<
+    number | null
+  >(null);
 
   const handleAddNewPage = () => {
     addNewPage();
@@ -18,8 +21,21 @@ export const ThumbPagesPod: React.FC = () => {
     <div className={classes.container}>
       {fullDocument.pages.map((page, index) => (
         <React.Fragment key={page.id}>
-          <ThumbPage pageIndex={index} onSetActivePage={handleSetActivePage} />
-          <div>{page.name}</div>
+          <ThumbPage
+            pageIndex={index}
+            onSetActivePage={handleSetActivePage}
+            setPageTitleBeingEdited={setPageTitleBeingEdited}
+          />
+          {pageTitleBeingEdited === index ? (
+            <PageTitleInlineEdit
+              pageIndex={index}
+              setPageTitleBeingEdited={setPageTitleBeingEdited}
+            />
+          ) : (
+            <div onDoubleClick={() => setPageTitleBeingEdited(index)}>
+              {page.name}
+            </div>
+          )}
         </React.Fragment>
       ))}
       <button onClick={handleAddNewPage}>Add new page</button>