From 7d9aaaaac5de58b4703a20623851f8623373ded5 Mon Sep 17 00:00:00 2001
From: Daniel Reis <danielreis3195@gmail.com>
Date: Wed, 3 Apr 2024 12:51:44 +0100
Subject: [PATCH] Delete selected objects from canvas

---
 src/components/Board/Board.tsx            | 11 +++++++++++
 src/components/Board/__docs__/Example.tsx |  3 +++
 2 files changed, 14 insertions(+)

diff --git a/src/components/Board/Board.tsx b/src/components/Board/Board.tsx
index 15ac67a..5214d5c 100644
--- a/src/components/Board/Board.tsx
+++ b/src/components/Board/Board.tsx
@@ -29,6 +29,7 @@ export type BoardProps = {
 export type BoardActions = {
   toggleDragging: (value?: boolean) => void;
   resetZoom: () => void;
+  deleteSelectedObjects: () => void;
 };
 
 type CanvasAnnotationState = {
@@ -69,6 +70,16 @@ const Board = React.forwardRef<BoardActions, BoardProps>(
         setCurrentZoom(100);
         onResetZoom?.();
       },
+      deleteSelectedObjects() {
+        editor?.deleteSelected();
+        const activeObjects = editor?.canvas.getActiveObjects();
+        if (activeObjects) {
+          activeObjects.forEach((activeObject) => {
+            editor?.canvas.remove(activeObject);
+          });
+          editor?.canvas.discardActiveObject();
+        }
+      },
     }));
     const { editor, onReady } = useFabricJSEditor();
 
diff --git a/src/components/Board/__docs__/Example.tsx b/src/components/Board/__docs__/Example.tsx
index 7a94a6c..deb5059 100644
--- a/src/components/Board/__docs__/Example.tsx
+++ b/src/components/Board/__docs__/Example.tsx
@@ -26,6 +26,9 @@ const Example: FC<BoardProps> = ({ primary = true, items, imageSrc }) => {
           Toggle Dragging [{toggleStatus ? "ON" : "OFF"}]
         </button>
         <button onClick={() => ref.current?.resetZoom()}>Reset Zoom</button>
+        <button onClick={() => ref.current?.deleteSelectedObjects()}>
+          Delete Selected
+        </button>
       </StyledDiv>
       <StyledDiv>
         <StyledP>Current zoom: {currentZoom}</StyledP>