@deepnoid/canvas 0.1.42 → 0.1.44

package/dist/components/AnnotationCanvas/index.js

@@ -86,6 +86,6 @@ const AnnotationCanvas = ({ image, coordinates, setCoordinates, options, drawing
         if (canvas)
             redraw(canvas);
     }, [canvasState]);
-    return (_jsx("div", { style: { width: '100%', height: '100%', display: 'flex', flex: 1 }, children: _jsxs("div", { onWheel: handleWheel, onMouseMove: handleMouseMove, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave, onContextMenu: (e) => e.preventDefault(), style: { flex: 1, position: 'relative', cursor: editable ? 'default' : 'grab' }, children: [_jsx("canvas", { ref: canvasRef, style: { position: 'absolute', width: '100%', height: '100%', left: 0, top: 0 } }), _jsx(AnnotationLayer, { canvasState: canvasState, coordinates: displayCoordinates, setCoordinates: setCoordinates, historyRef: historyRef, drawing: drawing, editable: editable }), ZoomButton && canvasState.initZoom > 0 && (_jsx(ZoomButton, { onClick: initCanvas, children: `${Math.round((canvasState.zoom / canvasState.initZoom) * 100)}%` }))] }) }));
+    return (_jsx("div", { style: { width: '100%', height: '100%', display: 'flex', flex: 1 }, children: _jsxs("div", { onWheel: handleWheel, onMouseMove: handleMouseMove, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave, onContextMenu: (e) => e.preventDefault(), style: { flex: 1, position: 'relative', cursor: !panZoomEnabled || editable ? 'default' : 'grab' }, children: [_jsx("canvas", { ref: canvasRef, style: { position: 'absolute', width: '100%', height: '100%', left: 0, top: 0 } }), _jsx(AnnotationLayer, { canvasState: canvasState, coordinates: displayCoordinates, setCoordinates: setCoordinates, historyRef: historyRef, drawing: drawing, editable: editable }), ZoomButton && canvasState.initZoom > 0 && (_jsx(ZoomButton, { onClick: initCanvas, children: `${Math.round((canvasState.zoom / canvasState.initZoom) * 100)}%` }))] }) }));
 };
 export default AnnotationCanvas;

package/dist/components/AnnotationLayer/_hooks/drawEvents/rectangle.d.ts

@@ -1,5 +1,5 @@
 import { DrawEventsParams } from './useDrawEvents';
 export declare const handleMouseDownRectangle: ({ canvasRef, canvasStateRef, mouseActionRef, mousePointRef, setMousePoint, startMousePointRef, currentCoordinateRef, coordinatesRef, rectangleAnchorRef, }: DrawEventsParams) => (event: globalThis.MouseEvent) => void;
 export declare const handleMouseMoveRectangle: ({ canvasRef, canvasStateRef, mouseActionRef, mousePointRef, setMousePoint, prevMousePointRef, currentCoordinateRef, coordinatesRef, rectangleAnchorRef, }: DrawEventsParams) => (event: globalThis.MouseEvent) => void;
-export declare const handleMouseUpRectangle: ({ canvasRef, canvasStateRef, mouseActionRef, mousePointRef, setMousePoint, startMousePointRef, prevMousePointRef, currentCoordinateRef, coordinatesRef, setCoordinates, rectangleAnchorRef, historyRef, drawLabel, }: DrawEventsParams) => (event: globalThis.MouseEvent) => void;
+export declare const handleMouseUpRectangle: ({ canvasRef, canvasStateRef, mouseActionRef, mousePointRef, setMousePoint, startMousePointRef, prevMousePointRef, currentCoordinateRef, coordinatesRef, setCoordinates, rectangleAnchorRef, historyRef, drawLabelRef, }: DrawEventsParams) => (event: globalThis.MouseEvent) => void;
 export declare const handleMouseLeaveRectangle: ({ canvasRef, canvasStateRef, setMousePoint, startMousePointRef, prevMousePointRef, mouseActionRef, rectangleAnchorRef, }: DrawEventsParams) => (event: globalThis.MouseEvent) => void;

package/dist/components/AnnotationLayer/_hooks/drawEvents/rectangle.js

@@ -36,7 +36,7 @@ export const handleMouseMoveRectangle = ({ canvasRef, canvasStateRef, mouseActio
     });
     event.preventDefault();
 };
-export const handleMouseUpRectangle = ({ canvasRef, canvasStateRef, mouseActionRef, mousePointRef, setMousePoint, startMousePointRef, prevMousePointRef, currentCoordinateRef, coordinatesRef, setCoordinates, rectangleAnchorRef, historyRef, drawLabel, }) => (event) => {
+export const handleMouseUpRectangle = ({ canvasRef, canvasStateRef, mouseActionRef, mousePointRef, setMousePoint, startMousePointRef, prevMousePointRef, currentCoordinateRef, coordinatesRef, setCoordinates, rectangleAnchorRef, historyRef, drawLabelRef, }) => (event) => {
     if (!canvasRef.current || !isMouseClickAction(event.button, MouseAction.LEFT))
         return;
     const mousePoint = getCanvasMousePoint(event, canvasRef.current, canvasStateRef.current);
@@ -48,7 +48,8 @@ export const handleMouseUpRectangle = ({ canvasRef, canvasStateRef, mouseActionR
         if (movedWidth > ACTIVE_POINT_SIZE || movedHeight > ACTIVE_POINT_SIZE) {
             const { x, y, width, height } = clampBoundingBoxToImage(Math.min(startMousePointRef.current.x, mousePoint.x), Math.min(startMousePointRef.current.y, mousePoint.y), movedWidth, movedHeight, dw, dh);
             if (!currentCoordinateRef.current) {
-                const newCoordinate = { label: drawLabel, type: DrawMode.RECTANGLE, x, y, width, height, selected: false };
+                const label = drawLabelRef.current;
+                const newCoordinate = { label, type: DrawMode.RECTANGLE, x, y, width, height, selected: false };
                 createCoordinate(newCoordinate, setCoordinates, coordinatesRef, historyRef, currentCoordinateRef);
             }
         }

package/dist/components/AnnotationLayer/_hooks/drawEvents/useDrawEvents.d.ts

@@ -17,7 +17,7 @@ export type DrawEventsParams = {
     rectangleAnchorRef: RefObject<RectangleAnchor | null>;
     historyRef: RefObject<CoordinateHistory>;
     maskImageRef: RefObject<HTMLImageElement | null>;
-    drawLabel?: Label;
+    drawLabelRef: RefObject<Label | undefined>;
 };
 export declare const useDrawEvents: (params: DrawEventsParams & {
     selectedDrawMode?: DrawMode;

package/dist/components/AnnotationLayer/_hooks/useCanvasDraw.js

@@ -21,7 +21,7 @@ export function useCanvasDraw({ drawLineSize, drawColor }) {
     };
     const drawActiveRect = (context, coordinate, zoom) => {
         const { x, y, width, height, selected } = coordinate;
-        if (!(selected && x && y && width && height))
+        if (!selected)
             return;
         context.lineWidth = drawLineSize / zoom;
         context.fillStyle = '#FFF';

package/dist/components/AnnotationLayer/index.js

@@ -23,7 +23,11 @@ const AnnotationLayer = ({ canvasState, coordinates = [], setCoordinates: propSe
     const startMousePointRef = useRef(null);
     const prevMousePointRef = useRef(null);
     const rectangleAnchorRef = useRef(null);
+    const drawLabelRef = useRef(drawLabel);
     const [showSelectedOnly, setShowSelectedOnly] = useState(false);
+    useEffect(() => {
+        drawLabelRef.current = drawLabel;
+    }, [drawLabel]);
     const setCoordinates = useCallback((coordinates) => {
         coordinatesRef.current = cloneDeep(coordinates) || [];
         propSetCoordinates && propSetCoordinates(coordinates);
@@ -44,7 +48,7 @@ const AnnotationLayer = ({ canvasState, coordinates = [], setCoordinates: propSe
         rectangleAnchorRef,
         historyRef,
         maskImageRef,
-        drawLabel,
+        drawLabelRef,
         selectedDrawMode,
         editable,
     });

package/dist/types/index.d.ts

@@ -26,6 +26,7 @@ export type Rectangle = {
 export type Label = {
     id: number;
     name: string;
+    type: string;
 };
 export type Coordinate = {
     label?: Label;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepnoid/canvas",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",