@deepnoid/canvas 0.1.39 → 0.1.40

package/dist/components/AnnotationCanvas/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType, ReactNode } from 'react';
+import { ComponentType, Dispatch, ReactNode, SetStateAction } from 'react';
 import { AnnotationCanvasDrawing, AnnotationCanvasOptionsZoom, Coordinate } from '../../types';
 export type ZoomButtonType = {
     onClick: () => void;
@@ -7,6 +7,7 @@ export type ZoomButtonType = {
 export type AnnotationCanvasProps = {
     image: string;
     coordinates?: Coordinate[];
+    setCoordinates?: Dispatch<SetStateAction<Coordinate[] | undefined>>;
     options: {
         panZoomEnabled?: boolean;
         zoom?: AnnotationCanvasOptionsZoom;
@@ -21,5 +22,5 @@ export type AnnotationCanvasProps = {
     };
     editable?: boolean;
 };
-declare const AnnotationCanvas: ({ image, coordinates, options, drawing, events, editable, }: AnnotationCanvasProps) => import("react/jsx-runtime").JSX.Element;
+declare const AnnotationCanvas: ({ image, coordinates, setCoordinates, options, drawing, events, editable, }: AnnotationCanvasProps) => import("react/jsx-runtime").JSX.Element;
 export default AnnotationCanvas;

package/dist/components/AnnotationCanvas/index.js

@@ -8,7 +8,7 @@ import { useDebounce } from '../../hooks/useDebounce';
 import { DrawMode } from '../../enum/common';
 import { createHistory } from './_utils/createHistory';
 import { clearCanvasRect, drawCanvas, resolutionCanvas } from '../../utils/canvas';
-const AnnotationCanvas = ({ image, coordinates, options, drawing, events, editable = false, }) => {
+const AnnotationCanvas = ({ image, coordinates, setCoordinates, options, drawing, events, editable = false, }) => {
     const { panZoomEnabled, zoom, ZoomButton, resetOnImageChange, timeout = 10000 } = options;
     const { onImageLoadSuccess, onImageLoadError } = events;
     const canvasRef = useRef(null);
@@ -78,6 +78,6 @@ const AnnotationCanvas = ({ image, coordinates, options, drawing, events, editab
         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: setDisplayCoordinates, 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: 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/rectangleUtils.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { EditableCoordinate, Point, Rectangle, CanvasState } from '../../../../types';
+import { Coordinate, Point, Rectangle, CanvasState } from '../../../../types';
 import { CoordinateHistory } from '../../../AnnotationCanvas/_utils/createHistory';
 import { MouseAction } from '../../../../utils/mouseActions';
 import { RectangleAnchor } from '../../../../enum/common';
@@ -8,21 +8,21 @@ export declare const getRectangleCorners: ({ x, y, width, height }: Rectangle) =
     x: number;
     y: number;
 }[];
-export declare const selectRectangleAtPoint: (zoom: number, mousePoint: Point, coordinatesRef: RefObject<EditableCoordinate[]>, currentCoordinateRef: RefObject<EditableCoordinate | null>) => void;
-export declare const updateActiveRectangleAnchor: (zoom: number, mousePointRef: Point, currentCoordinateRef: RefObject<EditableCoordinate | null>, rectangleAnchorRef: RefObject<RectangleAnchor | null>) => void;
-export declare const createCoordinate: (coordinate: EditableCoordinate, setCoordinates: (dataSet: EditableCoordinate[]) => void, coordinatesRef: RefObject<EditableCoordinate[]>, historyRef: RefObject<CoordinateHistory>, currentCoordinateRef: RefObject<EditableCoordinate | null>) => void;
+export declare const selectRectangleAtPoint: (zoom: number, mousePoint: Point, coordinatesRef: RefObject<Coordinate[]>, currentCoordinateRef: RefObject<Coordinate | null>) => void;
+export declare const updateActiveRectangleAnchor: (zoom: number, mousePointRef: Point, currentCoordinateRef: RefObject<Coordinate | null>, rectangleAnchorRef: RefObject<RectangleAnchor | null>) => void;
+export declare const createCoordinate: (coordinate: Coordinate, setCoordinates: (dataSet: Coordinate[]) => void, coordinatesRef: RefObject<Coordinate[]>, historyRef: RefObject<CoordinateHistory>, currentCoordinateRef: RefObject<Coordinate | null>) => void;
 export declare const clampBoundingBoxToImage: (x: number, y: number, width: number, height: number, dw: number, dh: number) => Rectangle & {
     selected?: boolean;
 };
 export declare const getCanvasMousePoint: (event: globalThis.MouseEvent | React.MouseEvent, canvas: HTMLCanvasElement, canvasState: CanvasState) => Point;
 type BBoxParams = {
-    coordinatesRef: RefObject<EditableCoordinate[]>;
+    coordinatesRef: RefObject<Coordinate[]>;
     dw: number;
     dh: number;
     mousePoint: Point;
     prevMousePoint: Point;
     mouseAction: MouseAction | null;
-    currentCoordinate: EditableCoordinate | null;
+    currentCoordinate: Coordinate | null;
     rectangleAnchor: RectangleAnchor | null;
 };
 export declare const handleBBoxOperations: (params: BBoxParams) => void;

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

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { Point, Coordinate, EditableCoordinate, CanvasState, Label } from '../../../../types';
+import { Point, Coordinate, CanvasState, Label } from '../../../../types';
 import { CoordinateHistory } from '../../../AnnotationCanvas/_utils/createHistory';
 import { DrawMode, RectangleAnchor } from '../../../../enum/common';
 import { MouseAction } from '../../../../utils/mouseActions';
@@ -12,8 +12,8 @@ export type DrawEventsParams = {
     startMousePointRef: RefObject<Point | null>;
     prevMousePointRef: RefObject<Point | null>;
     currentCoordinateRef: RefObject<Coordinate | null>;
-    coordinatesRef: RefObject<EditableCoordinate[]>;
-    setCoordinates: (coordinates: EditableCoordinate[]) => void;
+    coordinatesRef: RefObject<Coordinate[]>;
+    setCoordinates: (coordinates: Coordinate[]) => void;
     rectangleAnchorRef: RefObject<RectangleAnchor | null>;
     historyRef: RefObject<CoordinateHistory>;
     maskImageRef: RefObject<HTMLImageElement | null>;

package/dist/components/AnnotationLayer/_hooks/useCanvasDraw.d.ts

@@ -1,13 +1,13 @@
 import { RefObject } from 'react';
-import { EditableCoordinate, Point } from '../../../types';
+import { Coordinate, Point } from '../../../types';
 type UseCanvasDrawParams = {
     drawLineSize: number;
     drawColor?: string;
 };
 export declare function useCanvasDraw({ drawLineSize, drawColor }: UseCanvasDrawParams): {
     drawCross: (context: CanvasRenderingContext2D, dw: number, dh: number, zoom: number, point: Point) => void;
-    drawActiveRect: (context: CanvasRenderingContext2D, coordinate: EditableCoordinate, zoom: number) => void;
+    drawActiveRect: (context: CanvasRenderingContext2D, coordinate: Coordinate, zoom: number) => void;
     drawRectFromPoints: (context: CanvasRenderingContext2D, startPoint: Point, endPoint: Point, zoom: number, color?: string | undefined) => void;
-    setCursorStyle: (canvas: HTMLCanvasElement, mousePointRef: RefObject<Point>, coordinate: EditableCoordinate, zoom: number) => void;
+    setCursorStyle: (canvas: HTMLCanvasElement, mousePointRef: RefObject<Point>, coordinate: Coordinate, zoom: number) => void;
 };
 export {};

package/dist/components/AnnotationLayer/_hooks/useMouse.d.ts

@@ -1,5 +1,5 @@
 import { MouseEvent, RefObject } from 'react';
-import { EditableCoordinate, Point } from '../../../types';
+import { Coordinate, Point } from '../../../types';
 import { MouseAction } from '../../../utils/mouseActions';
 import { CoordinateHistory } from '../../AnnotationCanvas/_utils/createHistory';
 import { DrawMode } from '../../../enum/common';
@@ -8,8 +8,8 @@ type UseMouseParams = {
     canvasRef: RefObject<HTMLCanvasElement | null>;
     mouseActionRef: RefObject<MouseAction | null>;
     setMousePoint: (point: Point) => void;
-    coordinatesRef?: RefObject<EditableCoordinate[]>;
-    setCoordinates?: (coordinates: EditableCoordinate[]) => void;
+    coordinatesRef?: RefObject<Coordinate[]>;
+    setCoordinates?: (coordinates: Coordinate[]) => void;
     historyRef: RefObject<CoordinateHistory>;
     selectedDrawMode?: DrawMode;
 };

package/dist/components/AnnotationLayer/index.d.ts

@@ -1,10 +1,10 @@
 import { Dispatch, RefObject, SetStateAction } from 'react';
-import { CanvasState, EditableCoordinate, AnnotationCanvasDrawing } from '../../types';
+import { CanvasState, Coordinate, AnnotationCanvasDrawing } from '../../types';
 import { CoordinateHistory } from '../AnnotationCanvas/_utils/createHistory';
 type Props = {
     canvasState: CanvasState;
-    coordinates: EditableCoordinate[] | undefined;
-    setCoordinates: Dispatch<SetStateAction<EditableCoordinate[] | undefined>>;
+    coordinates: Coordinate[] | undefined;
+    setCoordinates?: Dispatch<SetStateAction<Coordinate[] | undefined>>;
     historyRef: RefObject<CoordinateHistory>;
     drawing: AnnotationCanvasDrawing;
     editable: boolean;

package/dist/components/AnnotationLayer/index.js

@@ -27,8 +27,8 @@ const AnnotationLayer = ({ canvasState, coordinates = [], setCoordinates: propSe
     const [showSelectedOnly, setShowSelectedOnly] = useState(false);
     const setCoordinates = useCallback((coordinates) => {
         coordinatesRef.current = cloneDeep(coordinates) || [];
-        propSetCoordinates(coordinates);
-    }, [coordinates]);
+        propSetCoordinates && propSetCoordinates(coordinates);
+    }, [propSetCoordinates]);
     const setMousePoint = useCallback((point) => (mousePointRef.current = point), []);
     const { drawCross, drawActiveRect, drawRectFromPoints, setCursorStyle } = useCanvasDraw({ drawLineSize, drawColor });
     useDrawEvents({

package/dist/types/index.d.ts

@@ -31,15 +31,13 @@ export type Coordinate = {
     label?: Label;
     type?: DrawMode;
     color?: 'success' | 'warning' | 'danger';
-} & Rectangle;
-export type EditableCoordinate = Coordinate & {
     selected?: boolean;
-};
+} & Rectangle;
 export type ApplyAnnotationStyleVariant = 'drawRect' | 'drawText';
 export type ApplyAnnotationStyleParams = {
     variant: ApplyAnnotationStyleVariant;
     context: CanvasRenderingContext2D;
-    coordinate: EditableCoordinate;
+    coordinate: Coordinate;
     drawLineSize: number;
     zoom: number;
 };

package/package.json

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