diff --git a/src/core/providers/canvas/use-selection.hook.ts b/src/core/providers/canvas/use-selection.hook.ts index ee82aaf1..0f09635e 100644 --- a/src/core/providers/canvas/use-selection.hook.ts +++ b/src/core/providers/canvas/use-selection.hook.ts @@ -67,12 +67,24 @@ export const useSelection = ( ); setSelectedShapesIds(arrayIds); } else { - // Multiple selection, just push what is selected to the current selection - selectedShapesRefs.current = selectedShapesRefs.current.concat( - arrayIds.map(id => shapeRefs.current[id].current) - ); + // Multiple selection, add or remove from current selection + const auxSelectedShapesIds = [...selectedShapesIds]; + const auxSelectedShapesRefs = [...selectedShapesRefs.current]; + const selectedShapeId = arrayIds[0]; + + // If the shape is already selected, remove it + if (auxSelectedShapesIds.includes(selectedShapeId)) { + const index = auxSelectedShapesIds.indexOf(selectedShapeId); + auxSelectedShapesIds.splice(index, 1); + auxSelectedShapesRefs.splice(index, 1); + } else { + // Else add it to the selection + auxSelectedShapesIds.push(selectedShapeId); + auxSelectedShapesRefs.push(shapeRefs.current[selectedShapeId].current); + } - setSelectedShapesIds(formerShapeIds => [...formerShapeIds, ...arrayIds]); + selectedShapesRefs.current = auxSelectedShapesRefs; + setSelectedShapesIds(auxSelectedShapesIds); } transformerRef?.current?.nodes(selectedShapesRefs.current); diff --git a/src/pods/canvas/use-multiple-selection-shape.hook.tsx b/src/pods/canvas/use-multiple-selection-shape.hook.tsx index 13bf5cdd..e10e5a62 100644 --- a/src/pods/canvas/use-multiple-selection-shape.hook.tsx +++ b/src/pods/canvas/use-multiple-selection-shape.hook.tsx @@ -3,14 +3,10 @@ import { SelectionInfo } from '@/core/providers/canvas/canvas.model'; import Konva from 'konva'; import { useState } from 'react'; import { SelectionRect } from './canvas.model'; -import { - findFirstShapeInCoords, - getSelectedShapesFromSelectionRect, -} from './use-multiple-selection.business'; +import { getSelectedShapesFromSelectionRect } from './use-multiple-selection.business'; import { getTransformerBoxAndCoords } from './transformer.utils'; import { calculateScaledCoordsFromCanvasDivCoordinatesNoScroll } from './canvas.util'; import { Stage } from 'konva/lib/Stage'; -import { isUserDoingMultipleSelectionUsingCtrlOrCmdKey } from '@/common/utils/shapes'; // There's a bug here: if you make a multiple selectin and start dragging // inside the selection but on a blank area it won't drag the selection @@ -101,6 +97,7 @@ export const useMultipleSelectionShapeHook = ( return; } + /* const shape = findFirstShapeInCoords(shapes, mousePointerStageBasedCoord); // If you are not dragging, but you click on a shape you should select that shape @@ -115,6 +112,7 @@ export const useMultipleSelectionShapeHook = ( ); return; } + */ selectionInfo.handleClearSelection(e); if (e.target !== e.target.getStage()) {