diff --git a/README.md b/README.md index b9d6e8a..45d645c 100644 --- a/README.md +++ b/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)* diff --git a/src/components/Board/Board.tsx b/src/components/Board/Board.tsx index f66d613..4365377 100644 --- a/src/components/Board/Board.tsx +++ b/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( ( - { - 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( height: 0, }); - const [draggingEnabled, setDraggingEnabled] = useState( - initialStatus?.draggingEnabled || false, - ); - const [drawingObject, setDrawingObject] = useState< NonNullable >({ isDrawing: false, type: "polygon", points: [] }); @@ -165,7 +146,7 @@ const Board = React.forwardRef( 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( 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( }, ); - // 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( }, ); - // 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( return () => { editor.canvas.off(); }; - }, [ - draggingEnabled, - editor, - image, - onLoadedImage, - onZoomChange, - drawingObject, - ]); + }, [editor, image, onLoadedImage, onZoomChange, drawingObject]); // Update zoom parent value useEffect(() => { diff --git a/src/components/Board/__docs__/Board.mdx b/src/components/Board/__docs__/Board.mdx index c47297b..bf84a87 100644 --- a/src/components/Board/__docs__/Board.mdx +++ b/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). diff --git a/src/components/Board/__docs__/Example.tsx b/src/components/Board/__docs__/Example.tsx index 2adbff6..744e85b 100644 --- a/src/components/Board/__docs__/Example.tsx +++ b/src/components/Board/__docs__/Example.tsx @@ -4,7 +4,6 @@ import Board, { BoardActions, BoardProps } from "../Board"; const Example: FC = ({ items, image }) => { const ref = React.createRef(); - const [toggleStatus, setToggleStatus] = useState(false); const [isDrawingPolygon, setIsDrawingPolygon] = useState(false); const [isDrawingRectangle, setIsDrawingRectangle] = useState(false); const [currentZoom, setCurrentZoom] = useState(); @@ -12,9 +11,6 @@ const Example: FC = ({ items, image }) => { return ( <>
-