From 554a1e9d89519370715fe83c35aa7bdbe82d96e6 Mon Sep 17 00:00:00 2001 From: Fran Lopez Date: Wed, 7 Aug 2024 13:19:38 +0200 Subject: [PATCH 1/2] change title --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index e4b78eae..e092f73f 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite + React + TS + QuickMock
From 03ba39f4d7c313e088e5100b1741f1f9c66c297a Mon Sep 17 00:00:00 2001 From: Fran Lopez Date: Wed, 7 Aug 2024 13:25:06 +0200 Subject: [PATCH 2/2] bug new and delete button --- src/core/providers/canvas/canvas.model.ts | 1 + src/core/providers/canvas/canvas.provider.tsx | 11 ++++++++--- src/core/providers/canvas/use-selection.hook.ts | 8 ++++++++ src/pods/toolbar/components/new-button/new-button.tsx | 3 ++- 4 files changed, 19 insertions(+), 4 deletions(-) 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 | Konva.KonvaEventObject ) => void; + clearSelection: () => void; selectedShapeRef: React.MutableRefObject | 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 => { 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 (