diff --git a/index.html b/index.html index e4b78eae..e092f73f 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Vite + React + TS</title> + <title>QuickMock</title> </head> <body> <div id="root"></div> diff --git a/src/core/providers/canvas/canvas.model.ts b/src/core/providers/canvas/canvas.model.ts index 1c7af256..108b529c 100644 --- a/src/core/providers/canvas/canvas.model.ts +++ b/src/core/providers/canvas/canvas.model.ts @@ -13,6 +13,7 @@ export interface SelectionInfo { | Konva.KonvaEventObject<MouseEvent> | Konva.KonvaEventObject<TouchEvent> ) => void; + clearSelection: () => void; selectedShapeRef: React.MutableRefObject<Node<NodeConfig> | null>; selectedShapeId: string; selectedShapeType: ShapeType | null; diff --git a/src/core/providers/canvas/canvas.provider.tsx b/src/core/providers/canvas/canvas.provider.tsx index 3981e7d9..bca91694 100644 --- a/src/core/providers/canvas/canvas.provider.tsx +++ b/src/core/providers/canvas/canvas.provider.tsx @@ -18,9 +18,14 @@ export const CanvasProvider: React.FC<Props> = props => { const selectionInfo = useSelection(shapes, setShapes); const deleteSelectedShape = () => { - setShapes(prevShapes => - removeShapeFromList(selectionInfo.selectedShapeId, prevShapes) - ); + setShapes(prevShapes => { + const newShapes = removeShapeFromList( + selectionInfo.selectedShapeId, + prevShapes + ); + selectionInfo.clearSelection(); + return newShapes; + }); }; const clearCanvas = () => { diff --git a/src/core/providers/canvas/use-selection.hook.ts b/src/core/providers/canvas/use-selection.hook.ts index d0f61b62..186b2478 100644 --- a/src/core/providers/canvas/use-selection.hook.ts +++ b/src/core/providers/canvas/use-selection.hook.ts @@ -45,6 +45,13 @@ export const useSelection = ( } }; + const clearSelection = () => { + transformerRef.current?.nodes([]); + selectedShapeRef.current = null; + setSelectedShapeId(''); + setSelectedShapeType(null); + }; + const setZIndexOnSelected = (action: ZIndexAction) => { setShapes(prevShapes => performZIndexAction(selectedShapeId, action, prevShapes) @@ -64,6 +71,7 @@ export const useSelection = ( shapeRefs, handleSelected, handleClearSelection, + clearSelection, selectedShapeRef, selectedShapeId, selectedShapeType, diff --git a/src/pods/toolbar/components/new-button/new-button.tsx b/src/pods/toolbar/components/new-button/new-button.tsx index 87adb150..1d16611e 100644 --- a/src/pods/toolbar/components/new-button/new-button.tsx +++ b/src/pods/toolbar/components/new-button/new-button.tsx @@ -4,10 +4,11 @@ import classes from '@/pods/toolbar/toolbar.pod.module.css'; import { useCanvasContext } from '@/core/providers'; export const NewButton = () => { - const { clearCanvas } = useCanvasContext(); + const { clearCanvas, deleteSelectedShape } = useCanvasContext(); const handleClick = () => { clearCanvas(); + deleteSelectedShape(); }; return (