Skip to content

Commit 61f4e2f

Browse files
brauliodiezbrauliodiez
authored
Merge pull request #652 from Lemoncode/dev
color picker custom colors and modal title
2 parents 54bf203 + 66ffc89 commit 61f4e2f

File tree

13 files changed

+159
-11
lines changed

13 files changed

+159
-11
lines changed

‎README.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,12 @@ Team members participating in this project
135135
<a href="https://github.com/josemitoribio">
136136
<kbd><img src="https://github.com/josemitoribio.png" alt="Josemi Toribio" width="50" height="50" style="border-radius: 50%;"></kbd>
137137
</a>
138-
138+
<a href="https://github.com/sergioelmoreno">
139+
<kbd><img src="https://github.com/sergioelmoreno.png" alt="Sergio (El Moreno) del campo" width="50" height="50" style="border-radius: 50%;"></kbd>
140+
</a>
141+
<a href="https://github.com/rojasadrian012">
142+
<kbd><img src="https://github.com/rojasadrian012.png" alt="Adrian Rojas" width="50" height="50" style="border-radius: 50%;"></kbd>
143+
</a>
139144
<a href="https://github.com/IonutGabi">
140145
<kbd><img src="https://github.com/IonutGabi.png" alt="Gabi Birsan" width="50" height="50" style="border-radius: 50%;"></kbd>
141146
</a>

‎public/assets/adrian-portillo.jpeg‎

123 KB
Loading

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
44
import { ShapeProps } from '../shape.model';
55
import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
66
import { useGroupShapeProps } from '../mock-components.utils';
7+
import { BASIC_SHAPE } from '../front-components/shape.const';
78

89
const modalDialogShapeSizeRestrictions: ShapeSizeRestrictions = {
910
minWidth: 250,
@@ -21,14 +22,14 @@ const shapeType: ShapeType = 'modalDialog';
2122

2223
export const ModalDialogContainer = forwardRef<any, ShapeProps>(
2324
(props, ref) => {
24-
const { x, y, width, height, id, onSelected, ...shapeProps } = props;
25+
const { x, y, width, height, id, onSelected, text, ...shapeProps } = props;
2526
const restrictedSize = fitSizeToShapeSizeRestrictions(
2627
modalDialogShapeSizeRestrictions,
2728
width,
2829
height
2930
);
3031
const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
31-
32+
const margin = 10;
3233
const titleBarHeight = 50;
3334

3435
const commonGroupProps = useGroupShapeProps(
@@ -61,6 +62,17 @@ export const ModalDialogContainer = forwardRef<any, ShapeProps>(
6162
strokeWidth={2}
6263
fill="lightgray"
6364
/>
65+
<Text
66+
x={margin * 3}
67+
y={margin * 2}
68+
text={text}
69+
fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
70+
fontSize={12}
71+
fill="black"
72+
ellipsis={true}
73+
wrap="none"
74+
width={restrictedWidth - margin * 6 - 40}
75+
/>
6476

6577
{/* (X) */}
6678
<Group x={restrictedWidth - 40} y={10}>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,5 @@ export interface Page {
99
export interface QuickMockFileContract {
1010
version: string;
1111
pages: Page[];
12+
customColors: (string | null)[];
1213
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { FONT_SIZE_VALUES } from '@/common/components/mock-components/front-comp
22
import { ShapeModel } from '../model';
33
import { DocumentModel } from '../providers/canvas/canvas.model';
44
import { QuickMockFileContract } from './local-disk.model';
5+
import { APP_CONSTANTS } from '../providers/canvas/canvas.model';
56

67
export const mapFromShapesArrayToQuickMockFileDocument = (
78
fullDocument: DocumentModel
@@ -10,6 +11,7 @@ export const mapFromShapesArrayToQuickMockFileDocument = (
1011
return {
1112
version: '0.2',
1213
pages: fullDocument.pages,
14+
customColors: fullDocument.customColors,
1315
};
1416
};
1517

@@ -19,6 +21,9 @@ export const mapFromQuickMockFileDocumentToApplicationDocument = (
1921
return {
2022
activePageIndex: 0,
2123
pages: fileDocument.pages,
24+
customColors:
25+
fileDocument.customColors ||
26+
new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
2227
};
2328
};
2429

@@ -121,5 +126,8 @@ export const mapFromQuickMockFileDocumentToApplicationDocumentV0_1 = (
121126
shapes: combinedShapes,
122127
},
123128
],
129+
customColors:
130+
fileDocument.customColors ||
131+
new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
124132
};
125133
};

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
import { ShapeModel } from '../model';
77
import { QuickMockFileContract } from './local-disk.model';
88
import { DocumentModel } from '../providers/canvas/canvas.model';
9+
import { APP_CONSTANTS } from '../providers/canvas/canvas.model';
910

1011
describe('shapes to document mapper', () => {
1112
describe('mapFromShapesArrayToQuickMockFileDocument', () => {
@@ -33,6 +34,7 @@ describe('shapes to document mapper', () => {
3334
shapes: shapes,
3435
},
3536
],
37+
customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
3638
};
3739

3840
const expectedResult: QuickMockFileContract = {
@@ -44,6 +46,7 @@ describe('shapes to document mapper', () => {
4446
shapes: shapes,
4547
},
4648
],
49+
customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
4750
};
4851
// Act
4952
const result = mapFromShapesArrayToQuickMockFileDocument(document);
@@ -86,6 +89,7 @@ describe('shapes to document mapper', () => {
8689
shapes: shapes,
8790
},
8891
],
92+
customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
8993
};
9094

9195
const expectedResult: QuickMockFileContract = {
@@ -97,6 +101,7 @@ describe('shapes to document mapper', () => {
97101
shapes: shapes,
98102
},
99103
],
104+
customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
100105
};
101106

102107
// Act
@@ -119,6 +124,7 @@ describe('shapes to document mapper', () => {
119124
shapes: [],
120125
},
121126
],
127+
customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
122128
};
123129

124130
const expectedResult: DocumentModel = {
@@ -130,6 +136,7 @@ describe('shapes to document mapper', () => {
130136
shapes: [],
131137
},
132138
],
139+
customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
133140
};
134141
//act
135142
const result =
@@ -149,6 +156,7 @@ describe('shapes to document mapper', () => {
149156
shapes: [],
150157
},
151158
],
159+
customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
152160
};
153161

154162
const expectedResult: DocumentModel = {
@@ -160,6 +168,7 @@ describe('shapes to document mapper', () => {
160168
shapes: [],
161169
},
162170
],
171+
customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
163172
};
164173

165174
//act
@@ -191,6 +200,7 @@ describe('shapes to document mapper', () => {
191200
],
192201
},
193202
],
203+
customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
194204
};
195205

196206
const expectedResult: DocumentModel = {
@@ -213,6 +223,7 @@ describe('shapes to document mapper', () => {
213223
],
214224
},
215225
],
226+
customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
216227
};
217228

218229
//act
@@ -264,6 +275,7 @@ describe('shapes to document mapper', () => {
264275
shapes: shapesPageB,
265276
},
266277
],
278+
customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
267279
};
268280

269281
const expectedResult: DocumentModel = {
@@ -280,6 +292,7 @@ describe('shapes to document mapper', () => {
280292
shapes: shapesPageB,
281293
},
282294
],
295+
customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
283296
};
284297

285298
//act
@@ -331,6 +344,7 @@ describe('shapes to document mapper', () => {
331344
shapes: shapesPageB,
332345
},
333346
],
347+
customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
334348
};
335349

336350
const expectedResult: DocumentModel = {
@@ -342,6 +356,7 @@ describe('shapes to document mapper', () => {
342356
shapes: shapespageA.concat(shapesPageB),
343357
},
344358
],
359+
customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
345360
};
346361

347362
//act

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export interface Page {
2525
export interface DocumentModel {
2626
pages: Page[];
2727
activePageIndex: number;
28+
customColors: (string | null)[];
2829
}
2930

3031
export const createDefaultDocumentModel = (): DocumentModel => ({
@@ -36,6 +37,7 @@ export const createDefaultDocumentModel = (): DocumentModel => ({
3637
shapes: [],
3738
},
3839
],
40+
customColors: new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null),
3941
});
4042

4143
export interface SelectionInfo {
@@ -118,4 +120,10 @@ export interface CanvasContextModel {
118120
howManyLoadedDocuments: number;
119121
canvasSize: CanvasSize;
120122
setCanvasSize: (canvasDimensions: CanvasSize) => void;
123+
customColors: (string | null)[];
124+
updateColorSlot: (color: string, index: number) => void;
121125
}
126+
127+
export const APP_CONSTANTS = {
128+
COLOR_SLOTS: 16,
129+
} as const;

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

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import Konva from 'konva';
1515
import { isPageIndexValid, removeShapesFromList } from './canvas.business';
1616
import { useClipboard } from './use-clipboard.hook';
1717
import { produce } from 'immer';
18-
18+
import { APP_CONSTANTS } from './canvas.model';
1919
interface Props {
2020
children: React.ReactNode;
2121
}
@@ -301,6 +301,19 @@ export const CanvasProvider: React.FC<Props> = props => {
301301
const loadDocument = (document: DocumentModel) => {
302302
setDocument(document);
303303
setHowManyLoadedDocuments(numberOfDocuments => numberOfDocuments + 1);
304+
setCustomColors(document.customColors);
305+
};
306+
307+
const [customColors, setCustomColors] = React.useState<(string | null)[]>(
308+
new Array(APP_CONSTANTS.COLOR_SLOTS).fill(null)
309+
);
310+
311+
const updateColorSlot = (color: string, index: number) => {
312+
setCustomColors(prev => {
313+
const newColors = [...prev];
314+
newColors[index] = color;
315+
return newColors;
316+
});
304317
};
305318

306319
return (
@@ -329,7 +342,10 @@ export const CanvasProvider: React.FC<Props> = props => {
329342
setIsInlineEditing,
330343
fileName,
331344
setFileName,
332-
fullDocument: document,
345+
fullDocument: {
346+
...document,
347+
customColors,
348+
},
333349
addNewPage,
334350
duplicatePage,
335351
getActivePage,
@@ -344,6 +360,8 @@ export const CanvasProvider: React.FC<Props> = props => {
344360
howManyLoadedDocuments,
345361
canvasSize: canvasSize,
346362
setCanvasSize: setCanvasSize,
363+
customColors,
364+
updateColorSlot,
347365
}}
348366
>
349367
{children}

‎src/pods/about/members.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -123,14 +123,22 @@ export const memberList: Member[] = [
123123

124124
{
125125
id: '16',
126+
name: 'Adrian',
127+
surname: 'Portillo',
128+
urlLinkedin: 'https://www.linkedin.com/in/adrian-portillo-52a963245/',
129+
image: './assets/adrian-portillo.jpeg',
130+
},
131+
132+
{
133+
id: '17',
126134
name: 'Gabriel',
127135
surname: 'Ionut',
128136
urlLinkedin: 'https://www.linkedin.com/in/gabriel-ionut-birsan-b14816307/',
129137
image: './assets/gabriel-ionut.jpeg',
130138
},
131139

132140
{
133-
id: '17',
141+
id: '18',
134142
name: 'Antonio',
135143
surname: 'Contreras',
136144
urlLinkedin:
@@ -139,7 +147,7 @@ export const memberList: Member[] = [
139147
},
140148

141149
{
142-
id: '18',
150+
id: '19',
143151
name: 'Braulio',
144152
surname: 'Diez',
145153
urlLinkedin: 'https://www.linkedin.com/in/brauliodiez/',

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ const inlineEditableShapes = new Set<ShapeType>([
3535
'timepickerinput',
3636
'datepickerinput',
3737
'browser',
38+
'modalDialog',
3839
]);
3940

4041
// Check if a shape type allows inline editing
@@ -74,6 +75,7 @@ const shapeTypesWithDefaultText = new Set<ShapeType>([
7475
'timepickerinput',
7576
'datepickerinput',
7677
'browser',
78+
'modalDialog',
7779
]);
7880

7981
// Map of ShapeTypes to their default text values
@@ -110,6 +112,7 @@ const defaultTextValueMap: Partial<Record<ShapeType, string>> = {
110112
timepickerinput: 'hh:mm',
111113
datepickerinput: new Date().toLocaleDateString(),
112114
browser: 'https://example.com',
115+
modalDialog: 'Title here...',
113116
};
114117

115118
export const generateDefaultTextValue = (

0 commit comments

Comments
 (0)