Enable dragging by default when nothing is selected

README.md

@@ -120,7 +120,6 @@ All of the following properties can be defined on the `Board` component:
 | `initialStatus`    | `{ draggingEnabled?: boolean; currentZoom?: number; scaleRatio?: number; }` | Initial status settings for dragging, zoom level, and scale ratio.                                | {}            |
 | `onResetZoom`      | `() => void`                                    | Callback function to handle zoom reset action.                                                    |               |
 | `onZoomChange`     | `(currentZoom: number) => void`                 | Callback function triggered when the zoom level changes.                                          |               |
-| `onToggleDragging` | `(currentStatus: boolean) => void`              | Callback function triggered when dragging is toggled.                                             |               |
 | `onLoadedImage`    | `({ width, height }: { width: number; height: number; }) => void` | Callback function triggered when the image has been successfully loaded, providing its dimensions. |               |
 
 *(Properties marked with \* are required)*

src/components/Board/Board.tsx

@@ -18,7 +18,6 @@ export type BoardProps = {
   };
   onResetZoom?: () => void;
   onZoomChange?: (currentZoom: number) => void;
-  onToggleDragging?: (currentStatus: boolean) => void;
   onLoadedImage?: ({
     width,
     height,
@@ -29,7 +28,6 @@ export type BoardProps = {
 };
 
 export type BoardActions = {
-  toggleDragging: (value?: boolean) => void;
   resetZoom: () => void;
   deleteSelectedObjects: () => void;
   downloadImage: () => void;
@@ -39,24 +37,11 @@ export type BoardActions = {
 
 const Board = React.forwardRef<BoardActions, BoardProps>(
   (
-    {
-      image,
-      initialStatus,
-      items,
-      onToggleDragging,
-      onResetZoom,
-      onZoomChange,
-      onLoadedImage,
-    },
+    { image, initialStatus, items, onResetZoom, onZoomChange, onLoadedImage },
     ref,
   ) => {
     // Set board actions
     React.useImperativeHandle(ref, () => ({
-      toggleDragging() {
-        const newStatus = !draggingEnabled;
-        setDraggingEnabled(newStatus);
-        onToggleDragging?.(newStatus);
-      },
       resetZoom() {
         editor?.canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
         setCurrentZoom(100);
@@ -129,10 +114,6 @@ const Board = React.forwardRef<BoardActions, BoardProps>(
       height: 0,
     });
 
-    const [draggingEnabled, setDraggingEnabled] = useState(
-      initialStatus?.draggingEnabled || false,
-    );
-
     const [drawingObject, setDrawingObject] = useState<
       NonNullable<fabricTypes.CanvasAnnotationState["drawingObject"]>
     >({ isDrawing: false, type: "polygon", points: [] });
@@ -165,7 +146,7 @@ const Board = React.forwardRef<BoardActions, BoardProps>(
       editor.canvas.setHeight(parentCanvasElement.clientHeight);
 
       // Change the cursor
-      editor.canvas.defaultCursor = draggingEnabled ? "pointer" : "default";
+      // editor.canvas.defaultCursor = draggingEnabled ? "pointer" : "default";
 
       // Disable uniform scaling
       editor.canvas.uniformScaling = false;
@@ -199,7 +180,6 @@ const Board = React.forwardRef<BoardActions, BoardProps>(
       editor.canvas.on(
         "mouse:wheel",
         function (this: fabricTypes.CanvasAnnotationState, opt) {
-          // if (this.drawingObject?.isDrawing) return;
           const delta = opt.e.deltaY;
           let zoom = editor.canvas.getZoom();
           zoom *= 0.999 ** delta;
@@ -215,12 +195,12 @@ const Board = React.forwardRef<BoardActions, BoardProps>(
         },
       );
 
-      // On Mouse right click (down)
+      // On Mouse left click (down)
       editor.canvas.on(
         "mouse:down",
         function (this: fabricTypes.CanvasAnnotationState, opt) {
           const evt = opt.e;
-          this.isDragging = draggingEnabled;
+          this.isDragging = opt.target === null; // Enable dragging when the cursor is on canvas (no object selected)
           this.selection = false;
           this.lastPosX = evt.clientX;
           this.lastPosY = evt.clientY;
@@ -296,13 +276,13 @@ const Board = React.forwardRef<BoardActions, BoardProps>(
         },
       );
 
-      // On Mouse right click (up)
+      // On Mouse left click (up)
       editor.canvas.on(
         "mouse:up",
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         function (this: fabricTypes.CanvasAnnotationState, _opt) {
           if (this.isDragging) {
-            // Rese the  viewport
+            // Reset the viewport
             editor.canvas.zoomToPoint(
               { x: _opt.e.offsetX, y: _opt.e.offsetY },
               editor.canvas.getZoom(),
@@ -424,14 +404,7 @@ const Board = React.forwardRef<BoardActions, BoardProps>(
       return () => {
         editor.canvas.off();
       };
-    }, [
-      draggingEnabled,
-      editor,
-      image,
-      onLoadedImage,
-      onZoomChange,
-      drawingObject,
-    ]);
+    }, [editor, image, onLoadedImage, onZoomChange, drawingObject]);
 
     // Update zoom parent value
     useEffect(() => {

src/components/Board/__docs__/Board.mdx

@@ -50,7 +50,5 @@ export default Example;
 
 `currentZoom`: Number representing the current zoom level.
 
-- **onToggleDragging**: `(currentStatus: boolean) => void` -  Optional callback function called when dragging status changes.
-
 - **currentStatus**: Boolean indicating the current dragging status.
 - **onLoadedImage**: `({ width, height }: { width: number, height: number }) => void` -  Optional callback function called when the image is loaded (width: Width of the loaded image, height: Height of the loaded image).

src/components/Board/__docs__/Example.tsx

@@ -4,17 +4,13 @@ import Board, { BoardActions, BoardProps } from "../Board";
 const Example: FC<BoardProps> = ({ items, image }) => {
   const ref = React.createRef<BoardActions>();
 
-  const [toggleStatus, setToggleStatus] = useState(false);
   const [isDrawingPolygon, setIsDrawingPolygon] = useState(false);
   const [isDrawingRectangle, setIsDrawingRectangle] = useState(false);
   const [currentZoom, setCurrentZoom] = useState<number | undefined>();
 
   return (
     <>
       <div style={{ display: "flex", gap: "10px" }}>
-        <button onClick={() => ref.current?.toggleDragging()}>
-          Toggle Dragging [{toggleStatus ? "ON" : "OFF"}]
-        </button>
         <button onClick={() => ref.current?.resetZoom()}>Reset Zoom</button>
         <button onClick={() => ref.current?.deleteSelectedObjects()}>
           Delete Selected
@@ -69,7 +65,6 @@ const Example: FC<BoardProps> = ({ items, image }) => {
           ref={ref}
           image={image}
           items={items}
-          onToggleDragging={(s) => setToggleStatus(s)}
           onZoomChange={(v) => setCurrentZoom(v)}
         />
       </div>