color picker custom colors and modal title

README.md

@@ -135,7 +135,12 @@ Team members participating in this project
   <a href="https://github.com/josemitoribio">
     <kbd><img src="https://github.com/josemitoribio.png" alt="Josemi Toribio" width="50" height="50" style="border-radius: 50%;"></kbd>
   </a>
-
+  <a href="https://github.com/sergioelmoreno">
+    <kbd><img src="https://github.com/sergioelmoreno.png" alt="Sergio (El Moreno) del campo" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>  
+  <a href="https://github.com/rojasadrian012">
+    <kbd><img src="https://github.com/rojasadrian012.png" alt="Adrian Rojas" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>  
   <a href="https://github.com/IonutGabi">
     <kbd><img src="https://github.com/IonutGabi.png" alt="Gabi Birsan" width="50" height="50" style="border-radius: 50%;"></kbd>
   </a>  

src/common/components/mock-components/front-containers/modal-dialog-shape.tsx

@@ -4,6 +4,7 @@ import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
 import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { useGroupShapeProps } from '../mock-components.utils';
+import { BASIC_SHAPE } from '../front-components/shape.const';
 
 const modalDialogShapeSizeRestrictions: ShapeSizeRestrictions = {
   minWidth: 250,
@@ -21,14 +22,14 @@ const shapeType: ShapeType = 'modalDialog';
 
 export const ModalDialogContainer = forwardRef<any, ShapeProps>(
   (props, ref) => {
-    const { x, y, width, height, id, onSelected, ...shapeProps } = props;
+    const { x, y, width, height, id, onSelected, text, ...shapeProps } = props;
     const restrictedSize = fitSizeToShapeSizeRestrictions(
       modalDialogShapeSizeRestrictions,
       width,
       height
     );
     const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
-
+    const margin = 10;
     const titleBarHeight = 50;
 
     const commonGroupProps = useGroupShapeProps(
@@ -61,6 +62,17 @@ export const ModalDialogContainer = forwardRef<any, ShapeProps>(
           strokeWidth={2}
           fill="lightgray"
         />
+        <Text
+          x={margin * 3}
+          y={margin * 2}
+          text={text}
+          fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
+          fontSize={12}
+          fill="black"
+          ellipsis={true}
+          wrap="none"
+          width={restrictedWidth - margin * 6 - 40}
+        />
 
         {/* (X) */}
         <Group x={restrictedWidth - 40} y={10}>

src/core/local-disk/local-disk.model.ts

@@ -9,4 +9,5 @@ export interface Page {
 export interface QuickMockFileContract {
   version: string;
   pages: Page[];
+  customColors: (string | null)[];
 }

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

@@ -2,6 +2,7 @@ import { FONT_SIZE_VALUES } from '@/common/components/mock-components/front-comp
 import { ShapeModel } from '../model';
 import { DocumentModel } from '../providers/canvas/canvas.model';
 import { QuickMockFileContract } from './local-disk.model';
+import { APP_CONSTANTS } from '../providers/canvas/canvas.model';
 
 export const mapFromShapesArrayToQuickMockFileDocument = (
   fullDocument: DocumentModel
@@ -10,6 +11,7 @@ export const mapFromShapesArrayToQuickMockFileDocument = (
   return {
     version: '0.2',
     pages: fullDocument.pages,
+    customColors: fullDocument.customColors,
   };
 };
 
@@ -19,6 +21,9 @@ export const mapFromQuickMockFileDocumentToApplicationDocument = (
   return {
     activePageIndex: 0,
     pages: fileDocument.pages,
+    customColors:
+      fileDocument.customColors ||
+      new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
   };
 };
 
@@ -121,5 +126,8 @@ export const mapFromQuickMockFileDocumentToApplicationDocumentV0_1 = (
         shapes: combinedShapes,
       },
     ],
+    customColors:
+      fileDocument.customColors ||
+      new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
   };
 };

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

@@ -6,6 +6,7 @@ import {
 import { ShapeModel } from '../model';
 import { QuickMockFileContract } from './local-disk.model';
 import { DocumentModel } from '../providers/canvas/canvas.model';
+import { APP_CONSTANTS } from '../providers/canvas/canvas.model';
 
 describe('shapes to document mapper', () => {
   describe('mapFromShapesArrayToQuickMockFileDocument', () => {
@@ -33,6 +34,7 @@ describe('shapes to document mapper', () => {
             shapes: shapes,
           },
         ],
+        customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
       };
 
       const expectedResult: QuickMockFileContract = {
@@ -44,6 +46,7 @@ describe('shapes to document mapper', () => {
             shapes: shapes,
           },
         ],
+        customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
       };
       // Act
       const result = mapFromShapesArrayToQuickMockFileDocument(document);
@@ -86,6 +89,7 @@ describe('shapes to document mapper', () => {
             shapes: shapes,
           },
         ],
+        customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
       };
 
       const expectedResult: QuickMockFileContract = {
@@ -97,6 +101,7 @@ describe('shapes to document mapper', () => {
             shapes: shapes,
           },
         ],
+        customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
       };
 
       // Act
@@ -119,6 +124,7 @@ describe('shapes to document mapper', () => {
             shapes: [],
           },
         ],
+        customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
       };
 
       const expectedResult: DocumentModel = {
@@ -130,6 +136,7 @@ describe('shapes to document mapper', () => {
             shapes: [],
           },
         ],
+        customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
       };
       //act
       const result =
@@ -149,6 +156,7 @@ describe('shapes to document mapper', () => {
             shapes: [],
           },
         ],
+        customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
       };
 
       const expectedResult: DocumentModel = {
@@ -160,6 +168,7 @@ describe('shapes to document mapper', () => {
             shapes: [],
           },
         ],
+        customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
       };
 
       //act
@@ -191,6 +200,7 @@ describe('shapes to document mapper', () => {
             ],
           },
         ],
+        customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
       };
 
       const expectedResult: DocumentModel = {
@@ -213,6 +223,7 @@ describe('shapes to document mapper', () => {
             ],
           },
         ],
+        customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
       };
 
       //act
@@ -264,6 +275,7 @@ describe('shapes to document mapper', () => {
             shapes: shapesPageB,
           },
         ],
+        customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
       };
 
       const expectedResult: DocumentModel = {
@@ -280,6 +292,7 @@ describe('shapes to document mapper', () => {
             shapes: shapesPageB,
           },
         ],
+        customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
       };
 
       //act
@@ -331,6 +344,7 @@ describe('shapes to document mapper', () => {
             shapes: shapesPageB,
           },
         ],
+        customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
       };
 
       const expectedResult: DocumentModel = {
@@ -342,6 +356,7 @@ describe('shapes to document mapper', () => {
             shapes: shapespageA.concat(shapesPageB),
           },
         ],
+        customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
       };
 
       //act

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

@@ -25,6 +25,7 @@ export interface Page {
 export interface DocumentModel {
   pages: Page[];
   activePageIndex: number;
+  customColors: (string | null)[];
 }
 
 export const createDefaultDocumentModel = (): DocumentModel => ({
@@ -36,6 +37,7 @@ export const createDefaultDocumentModel = (): DocumentModel => ({
       shapes: [],
     },
   ],
+  customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
 });
 
 export interface SelectionInfo {
@@ -118,4 +120,10 @@ export interface CanvasContextModel {
   howManyLoadedDocuments: number;
   canvasSize: CanvasSize;
   setCanvasSize: (canvasDimensions: CanvasSize) => void;
+  customColors: (string | null)[];
+  updateColorSlot: (color: string, index: number) => void;
 }
+
+export const APP_CONSTANTS = {
+  COLOR_SLOTS: 16,
+} as const;

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

@@ -15,7 +15,7 @@ import Konva from 'konva';
 import { isPageIndexValid, removeShapesFromList } from './canvas.business';
 import { useClipboard } from './use-clipboard.hook';
 import { produce } from 'immer';
-
+import { APP_CONSTANTS } from './canvas.model';
 interface Props {
   children: React.ReactNode;
 }
@@ -301,6 +301,19 @@ export const CanvasProvider: React.FC<Props> = props => {
   const loadDocument = (document: DocumentModel) => {
     setDocument(document);
     setHowManyLoadedDocuments(numberOfDocuments => numberOfDocuments + 1);
+    setCustomColors(document.customColors);
+  };
+
+  const [customColors, setCustomColors] = React.useState<(string | null)[]>(
+    new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null)
+  );
+
+  const updateColorSlot = (color: string, index: number) => {
+    setCustomColors(prev => {
+      const newColors = [...prev];
+      newColors[index] = color;
+      return newColors;
+    });
   };
 
   return (
@@ -329,7 +342,10 @@ export const CanvasProvider: React.FC<Props> = props => {
         setIsInlineEditing,
         fileName,
         setFileName,
-        fullDocument: document,
+        fullDocument: {
+          ...document,
+          customColors,
+        },
         addNewPage,
         duplicatePage,
         getActivePage,
@@ -344,6 +360,8 @@ export const CanvasProvider: React.FC<Props> = props => {
         howManyLoadedDocuments,
         canvasSize: canvasSize,
         setCanvasSize: setCanvasSize,
+        customColors,
+        updateColorSlot,
       }}
     >
       {children}

src/pods/about/members.ts

@@ -123,14 +123,22 @@ export const memberList: Member[] = [
 
   {
     id: '16',
+    name: 'Adrian',
+    surname: 'Portillo',
+    urlLinkedin: 'https://www.linkedin.com/in/adrian-portillo-52a963245/',
+    image: './assets/adrian-portillo.jpeg',
+  },
+
+  {
+    id: '17',
     name: 'Gabriel',
     surname: 'Ionut',
     urlLinkedin: 'https://www.linkedin.com/in/gabriel-ionut-birsan-b14816307/',
     image: './assets/gabriel-ionut.jpeg',
   },
 
   {
-    id: '17',
+    id: '18',
     name: 'Antonio',
     surname: 'Contreras',
     urlLinkedin:
@@ -139,7 +147,7 @@ export const memberList: Member[] = [
   },
 
   {
-    id: '18',
+    id: '19',
     name: 'Braulio',
     surname: 'Diez',
     urlLinkedin: 'https://www.linkedin.com/in/brauliodiez/',

src/pods/canvas/model/inline-editable.model.ts

@@ -35,6 +35,7 @@ const inlineEditableShapes = new Set<ShapeType>([
   'timepickerinput',
   'datepickerinput',
   'browser',
+  'modalDialog',
 ]);
 
 // Check if a shape type allows inline editing
@@ -74,6 +75,7 @@ const shapeTypesWithDefaultText = new Set<ShapeType>([
   'timepickerinput',
   'datepickerinput',
   'browser',
+  'modalDialog',
 ]);
 
 // Map of ShapeTypes to their default text values
@@ -110,6 +112,7 @@ const defaultTextValueMap: Partial<Record<ShapeType, string>> = {
   timepickerinput: 'hh:mm',
   datepickerinput: new Date().toLocaleDateString(),
   browser: 'https://example.com',
+  modalDialog: 'Title here...',
 };
 
 export const generateDefaultTextValue = (

src/pods/canvas/shape-renderer/simple-container/modal-dialog-container.renderer.tsx

@@ -24,6 +24,8 @@ export const renderModalDialogContainer = (
       onDragEnd={handleDragEnd(shape.id)}
       onTransform={handleTransform}
       onTransformEnd={handleTransform}
+      isEditable={shape.allowsInlineEdition}
+      text={shape.text}
     />
   );
 };