#568 setCanvasSize from settings modal

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

@@ -9,6 +9,11 @@ import {
 import Konva from 'konva';
 import { Node, NodeConfig } from 'konva/lib/Node';
 
+export interface CanvasSize {
+  width: number;
+  height: number;
+}
+
 export type ZIndexAction = 'top' | 'bottom' | 'up' | 'down';
 
 export interface Page {
@@ -110,4 +115,6 @@ export interface CanvasContextModel {
   setIsThumbnailContextMenuVisible: React.Dispatch<
     React.SetStateAction<boolean>
   >;
+  canvasSize: CanvasSize;
+  setCanvasSize: (canvasDimensions: CanvasSize) => void;
 }

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

@@ -5,7 +5,11 @@ import { useSelection } from './use-selection.hook';
 import { createShape } from '@/pods/canvas/model';
 import { useHistoryManager } from '@/common/undo-redo';
 import { useStateWithInterceptor } from './canvas.hook';
-import { createDefaultDocumentModel, DocumentModel } from './canvas.model';
+import {
+  CanvasSize,
+  createDefaultDocumentModel,
+  DocumentModel,
+} from './canvas.model';
 import { v4 as uuidv4 } from 'uuid';
 import Konva from 'konva';
 import { isPageIndexValid, removeShapesFromList } from './canvas.business';
@@ -25,6 +29,10 @@ export const CanvasProvider: React.FC<Props> = props => {
   const [fileName, setFileName] = React.useState<string>('');
   const [isThumbnailContextMenuVisible, setIsThumbnailContextMenuVisible] =
     React.useState(false);
+  const [canvasSize, setCanvasSize] = React.useState<CanvasSize>({
+    width: 3000,
+    height: 3000,
+  });
 
   const {
     addSnapshot,
@@ -331,6 +339,8 @@ export const CanvasProvider: React.FC<Props> = props => {
         activePageIndex: document.activePageIndex,
         isThumbnailContextMenuVisible,
         setIsThumbnailContextMenuVisible,
+        canvasSize: canvasSize,
+        setCanvasSize: setCanvasSize,
       }}
     >
       {children}

src/pods/canvas/canvas.pod.tsx

@@ -21,8 +21,6 @@ export const CanvasPod = () => {
   const [isTransfomerBeingDragged, setIsTransfomerBeingDragged] =
     useState(false);
 
-  const canvasSize = React.useMemo(() => ({ width: 3000, height: 3000 }), []);
-
   const {
     shapes,
     scale,
@@ -31,6 +29,7 @@ export const CanvasPod = () => {
     updateShapeSizeAndPosition,
     updateShapePosition,
     stageRef,
+    canvasSize,
   } = useCanvasContext();
 
   const {
@@ -153,7 +152,6 @@ export const CanvasPod = () => {
       style={{ opacity: isDraggedOver ? 0.5 : 1 }}
     >
       <ContextMenu dropRef={dropRef} />
-      {/*TODO: move size to canvas provider?*/}
       {/*         onMouseDown={handleClearSelection}*/}
       <Stage
         width={canvasSize.width}

src/pods/settings/components/canvas-size-settings.component.tsx

@@ -1,22 +1,45 @@
+import { CanvasSize } from '@/core/providers/canvas/canvas.model';
 import classes from './canvas-size-settings.component.module.css';
 
-export const CanvasSizeSettings = () => {
+interface CanvasSizeSettingsProps {
+  canvasSize: CanvasSize;
+  setNewCanvasSize: React.Dispatch<React.SetStateAction<CanvasSize>>;
+  newCanvasSize: CanvasSize;
+}
+
+export const CanvasSizeSettings: React.FC<CanvasSizeSettingsProps> = props => {
+  const { canvasSize, setNewCanvasSize, newCanvasSize } = props;
+
   return (
     <div className={classes.container}>
       <p className={classes.title}>Canvas Dimensions</p>
       <div className={classes.canvasSizeSettings}>
-        <p> Width:</p>
+        <p> Width (px):</p>
         <input
           type="text"
-          placeholder="Search icons..."
+          value={String(newCanvasSize.width)}
+          onChange={e =>
+            setNewCanvasSize({
+              ...newCanvasSize,
+              width: Number(e.target.value),
+            })
+          }
+          placeholder={String(canvasSize.width)}
           className={classes.searchInput}
         />
       </div>
       <div className={classes.canvasSizeSettings}>
-        <p>Height:</p>
+        <p>Height (px):</p>
         <input
           type="text"
-          placeholder="Search icons..."
+          value={String(newCanvasSize.height)}
+          onChange={e =>
+            setNewCanvasSize({
+              ...newCanvasSize,
+              height: Number(e.target.value),
+            })
+          }
+          placeholder={String(canvasSize.height)}
           className={classes.searchInput}
         />
       </div>

src/pods/settings/settings.pod.module.css

@@ -17,3 +17,17 @@
   font-weight: var(--fw-extrabold);
   line-height: 1.3;
 }
+
+.button {
+  color: white;
+  margin-top: var(--space-lg);
+  background-color: var(--primary-500);
+  padding: var(--space-s) var(--space-md);
+  border-radius: var(--border-radius-m);
+  font-size: var(--fs-md);
+  cursor: pointer;
+}
+
+.button:hover {
+  background-color: var(--primary-600);
+}

src/pods/settings/settings.pod.tsx

@@ -1,11 +1,39 @@
+import { useCanvasContext } from '@/core/providers';
 import { CanvasSizeSettings } from './components';
 import classes from './settings.pod.module.css';
+import { useEffect, useState } from 'react';
+import { CanvasSize } from '@/core/providers/canvas/canvas.model';
+import { useModalDialogContext } from '@/core/providers/model-dialog-providers/model-dialog.provider';
 
 export const SettingsPod = () => {
+  const { canvasSize, setCanvasSize, setIsInlineEditing } = useCanvasContext();
+  const [newCanvasSize, setNewCanvasSize] = useState<CanvasSize>(canvasSize);
+  const { closeModal } = useModalDialogContext();
+
+  const handleSelection = () => {
+    setCanvasSize(newCanvasSize);
+    closeModal();
+  };
+
+  useEffect(() => {
+    setIsInlineEditing(true);
+
+    return () => {
+      setIsInlineEditing(false);
+    };
+  }, []);
+
   return (
     <div className={classes.container}>
       <p className={classes.title}>Settings</p>
-      <CanvasSizeSettings />
+      <CanvasSizeSettings
+        canvasSize={canvasSize}
+        setNewCanvasSize={setNewCanvasSize}
+        newCanvasSize={newCanvasSize}
+      />
+      <button className={classes.button} onClick={handleSelection}>
+        Confirm Settings
+      </button>
     </div>
   );
 };