diff --git a/src/core/providers/canvas/canvas.model.ts b/src/core/providers/canvas/canvas.model.ts index 45d6274e..6ec874d7 100644 --- a/src/core/providers/canvas/canvas.model.ts +++ b/src/core/providers/canvas/canvas.model.ts @@ -51,12 +51,14 @@ export interface SelectionInfo { selectedShapesIds: string[]; selectedShapeType: ShapeType | null; getSelectedShapeData: (index?: number) => ShapeModel | undefined; + getAllSelectedShapesData: () => ShapeModel[]; setZIndexOnSelected: (action: ZIndexAction) => void; updateTextOnSelected: (text: string) => void; // TODO: Update, A. KeyOf B. Move To useSelectionInfo updateOtherPropsOnSelected: ( key: K, - value: OtherProps[K] + value: OtherProps[K], + multipleSelection?: boolean ) => void; } diff --git a/src/core/providers/canvas/use-selection.hook.ts b/src/core/providers/canvas/use-selection.hook.ts index e5ca7ac9..1ae9c249 100644 --- a/src/core/providers/canvas/use-selection.hook.ts +++ b/src/core/providers/canvas/use-selection.hook.ts @@ -176,24 +176,11 @@ export const useSelection = ( ); }; - // TODO: Rather implement this using immmer - - const updateOtherPropsOnSelected = ( + const updateOtherPropsOnSelectedSingleShape = ( + selectedShapeId: string, key: K, value: OtherProps[K] ) => { - if (!isPageIndexValid(document)) return; - - // TODO: Right now applying this only to single selection - // in the future we could apply to all selected shapes - // BUT, we have to show only common shapes (pain in the neck) - // Only when selection is one - if (selectedShapesIds.length !== 1) { - return; - } - - const selectedShapeId = selectedShapesIds[0]; - setDocument(prevDocument => produce(prevDocument, draft => { draft.pages[prevDocument.activePageIndex].shapes = draft.pages[ @@ -207,22 +194,70 @@ export const useSelection = ( ); }; + const updateOtherPropsOnSelectedMutlipleShapes = ( + key: K, + value: OtherProps[K] + ) => { + setDocument(prevDocument => + produce(prevDocument, draft => { + draft.pages[prevDocument.activePageIndex].shapes = draft.pages[ + prevDocument.activePageIndex + ].shapes.map(shape => + selectedShapesIds.includes(shape.id) + ? { + ...shape, + otherProps: { ...shape.otherProps, [key]: value }, + } + : shape + ); + }) + ); + }; + + const updateOtherPropsOnSelected = ( + key: K, + value: OtherProps[K], + multipleSelection: boolean = false + ) => { + if (!isPageIndexValid(document) || selectedShapesIds.length === 0) return; + + // Single selection case + if (selectedShapesIds.length === 1) { + const selectedShapeId = selectedShapesIds[0]; + updateOtherPropsOnSelectedSingleShape(selectedShapeId, key, value); + + return; + } + + // Multiple selection case + if (multipleSelection) { + updateOtherPropsOnSelectedMutlipleShapes(key, value); + } + }; + // Added index, right now we got multiple selection // if not returning just 0 (first element) const getSelectedShapeData = (index: number = 0): ShapeModel | undefined => { - // TODO: we will only allow this when there is a single selection - // check if it can be applied to multiple data - // This is is used to lock temporarily the multiple selection properties - // (right side panel) edit, it only will work when there is a single selection - if (index === undefined && selectedShapesIds.length !== 1) { + // If there is one selected will return that item + // If there are multiple selected will return the first + // In case no selection will return undefined + if (index === undefined || selectedShapesIds.length === 0) { return; } const selectedShapeId = selectedShapesIds[index]; - return getActivePageShapes(document).find( + const activeShape = getActivePageShapes(document).find( shape => shape.id === selectedShapeId ); + + return activeShape; + }; + + const getAllSelectedShapesData = (): ShapeModel[] => { + return getActivePageShapes(document).filter(shape => + selectedShapesIds.includes(shape.id) + ); }; return { @@ -235,6 +270,7 @@ export const useSelection = ( selectedShapesIds, selectedShapeType, getSelectedShapeData, + getAllSelectedShapesData, setZIndexOnSelected, updateTextOnSelected, updateOtherPropsOnSelected, diff --git a/src/pods/properties/components/color-picker/color-picker.component.tsx b/src/pods/properties/components/color-picker/color-picker.component.tsx index 92af5d54..806e5aa9 100644 --- a/src/pods/properties/components/color-picker/color-picker.component.tsx +++ b/src/pods/properties/components/color-picker/color-picker.component.tsx @@ -42,7 +42,7 @@ export const ColorPicker: React.FC = props => {

{label}

); };