@deepnoid/canvas 0.1.35 → 0.1.37

package/README.md

@@ -1,3 +1,6 @@
 # deepnoid-canvas
 
-이 프로젝트는 본부 내 프로젝트에서 사용되는 공통 CANVAS 라이브러리입니다!!!
+이 프로젝트는 본부 내 프로젝트에서 사용되는 공통 CANVAS 라이브러리입니다!!!
+
+AnnotationViewer → 전체 이미지 + UI 컨트롤 포함
+AnnotationLayer → 실제 좌표/도형을 그리는 캔버스

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

@@ -0,0 +1,16 @@
+import { Coordinate } from '../../types/coordinate';
+type Props = {
+    moveX: number;
+    moveY: number;
+    zoomX: number;
+    zoomY: number;
+    zoom: number;
+    dx: number;
+    dy: number;
+    dw: number;
+    dh: number;
+    coordinates?: Coordinate[];
+    editable?: boolean;
+};
+declare const AnnotationLayer: ({ moveX, moveY, zoom, zoomX, zoomY, dx, dy, dw, dh, coordinates }: Props) => import("react/jsx-runtime").JSX.Element;
+export default AnnotationLayer;

package/dist/components/{Canvas.js → AnnotationLayer/index.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { drawCanvas, drawRect, resolutionCanvas } from '../utils/graphic';
-const Canvas = ({ moveX, moveY, zoom, zoomX, zoomY, dx, dy, dw, dh, coordinates }) => {
+import { drawCanvas, drawRect, resolutionCanvas } from '../../utils/graphic';
+const AnnotationLayer = ({ moveX, moveY, zoom, zoomX, zoomY, dx, dy, dw, dh, coordinates }) => {
     const canvas = useRef(null);
     useEffect(() => {
         const redraw = () => {
@@ -32,4 +32,4 @@ const Canvas = ({ moveX, moveY, zoom, zoomX, zoomY, dx, dy, dw, dh, coordinates
             willChange: 'transform',
         } }));
 };
-export default Canvas;
+export default AnnotationLayer;

package/dist/{hooks/usePanZoom.d.ts → components/AnnotationViewer/_hooks/useImagePanZoom.d.ts}

@@ -11,19 +11,16 @@ type CanvasState = {
     zoom: number;
     initZoom: number;
 };
-type UsePanZoomProps = {
+type Props = {
     canvasRef: RefObject<HTMLCanvasElement | null>;
     imageRef: RefObject<HTMLImageElement>;
     panZoomable?: boolean;
 };
-export declare function usePanZoom({ canvasRef, imageRef, panZoomable }: UsePanZoomProps): {
+export declare function useImagePanZoom({ canvasRef, imageRef, panZoomable }: Props): {
     canvasState: CanvasState;
-    imageOnloadCount: number;
-    setImageOnloadCount: import("react").Dispatch<import("react").SetStateAction<number>>;
-    init: (canvas: HTMLCanvasElement, image: HTMLImageElement) => void;
-    initCanvas: () => void;
-    clearCanvas: () => void;
+    initZoomAndPosition: (canvas: HTMLCanvasElement, image: HTMLImageElement) => void;
     preserveZoomAndPosition: (canvas: HTMLCanvasElement, image: HTMLImageElement, zoomRatio: number) => void;
+    initCanvas: () => void;
     handleWheel: (event: WheelEvent) => void;
     handleMouseDown: (event: MouseEvent) => void;
     handleMouseMove: (event: MouseEvent) => void;

package/dist/{hooks/usePanZoom.js → components/AnnotationViewer/_hooks/useImagePanZoom.js}

@@ -1,8 +1,7 @@
 'use client';
-import { useState } from 'react';
-import { resolutionCanvas, getMousePointTransform, canvasCenterPoint, calculatorZoomPoint, calculateInitZoom, } from '../utils/graphic';
-import { MouseStatus } from '../enum/common';
-export function usePanZoom({ canvasRef, imageRef, panZoomable = false }) {
+import { useState, useRef } from 'react';
+import { getMousePointTransform, canvasCenterPoint, calculatorZoomPoint, calculateInitZoom, calculateZoom, } from '../../../utils/graphic';
+export function useImagePanZoom({ canvasRef, imageRef, panZoomable = false }) {
     const ZOOM_UNIT = 0.9;
     const MAX_ZOOM = 4;
     const MIN_ZOOM = 0.5;
@@ -18,16 +17,15 @@ export function usePanZoom({ canvasRef, imageRef, panZoomable = false }) {
         zoom: 0,
         initZoom: 0,
     });
-    const [status, setStatus] = useState('');
-    const [imageOnloadCount, setImageOnloadCount] = useState(0);
     const [startMousePoint, setStartMousePoint] = useState();
-    const init = (canvas, image) => {
-        const point = canvasCenterPoint(canvas, image);
-        const zoomPoint = calculatorZoomPoint(canvas, 0, 0, point.x, point.y);
+    const isDraggingRef = useRef(false);
+    const initZoomAndPosition = (canvas, image) => {
+        const center = canvasCenterPoint(canvas, image);
+        const zoomPoint = calculatorZoomPoint(canvas, 0, 0, center.x, center.y);
         const initZoomValue = calculateInitZoom(canvas, image);
         setCanvasState({
-            dx: point.x,
-            dy: point.y,
+            dx: center.x,
+            dy: center.y,
             dw: image.width,
             dh: image.height,
             moveX: 0,
@@ -40,12 +38,12 @@ export function usePanZoom({ canvasRef, imageRef, panZoomable = false }) {
     };
     const preserveZoomAndPosition = (canvas, image, zoomRatio) => {
         const prevZoomRatio = zoomRatio || 1;
-        const point = canvasCenterPoint(canvas, image);
+        const center = canvasCenterPoint(canvas, image);
         const newInitZoom = calculateInitZoom(canvas, image);
-        const zoomPoint = calculatorZoomPoint(canvas, canvasState.moveX, canvasState.moveY, point.x, point.y);
+        const zoomPoint = calculatorZoomPoint(canvas, canvasState.moveX, canvasState.moveY, center.x, center.y);
         setCanvasState({
-            dx: point.x,
-            dy: point.y,
+            dx: center.x,
+            dy: center.y,
             dw: image.width,
             dh: image.height,
             moveX: canvasState.moveX,
@@ -59,39 +57,22 @@ export function usePanZoom({ canvasRef, imageRef, panZoomable = false }) {
     const initCanvas = () => {
         if (!canvasRef.current)
             return;
-        const canvas = resolutionCanvas(canvasRef.current);
-        if (!canvas)
-            return;
-        init(canvas, imageRef.current);
-        setImageOnloadCount((prev) => prev + 1);
-    };
-    const clearCanvas = () => {
-        if (!canvasRef.current)
-            return;
-        const canvas = resolutionCanvas(canvasRef.current);
-        if (!canvas)
-            return;
-        const ctx = canvas.getContext('2d');
-        ctx?.clearRect(0, 0, canvas.width, canvas.height);
+        initZoomAndPosition(canvasRef.current, imageRef.current);
     };
     const handleWheel = (event) => {
         if (!panZoomable || !canvasRef.current || canvasState.initZoom <= 0)
             return;
-        let calcZoom = event.deltaY < 0 ? canvasState.zoom * (1 / ZOOM_UNIT) : canvasState.zoom * ZOOM_UNIT;
-        if (canvasState.initZoom * MAX_ZOOM < canvasState.zoom * ZOOM_UNIT)
-            calcZoom = calcZoom * ZOOM_UNIT;
-        if (canvasState.initZoom * MIN_ZOOM > canvasState.zoom * ZOOM_UNIT)
-            calcZoom = calcZoom * (1 / ZOOM_UNIT);
+        const newZoom = calculateZoom(canvasState.zoom, event.deltaY, canvasState.initZoom * MIN_ZOOM, canvasState.initZoom * MAX_ZOOM, ZOOM_UNIT);
         const zoomPoint = calculatorZoomPoint(canvasRef.current, canvasState.moveX, canvasState.moveY, canvasState.dx, canvasState.dy);
         setCanvasState({
             ...canvasState,
             zoomX: zoomPoint.x,
             zoomY: zoomPoint.y,
-            zoom: calcZoom,
+            zoom: newZoom,
         });
     };
     const handleMouseMove = (event) => {
-        if (!panZoomable || !canvasRef.current || status !== MouseStatus.MOVE)
+        if (!panZoomable || !canvasRef.current || !isDraggingRef.current)
             return;
         const canvas = canvasRef.current;
         const rect = canvas.getBoundingClientRect();
@@ -117,7 +98,7 @@ export function usePanZoom({ canvasRef, imageRef, panZoomable = false }) {
     const handleMouseDown = (event) => {
         if (!panZoomable || !canvasRef.current)
             return;
-        setStatus(MouseStatus.MOVE);
+        isDraggingRef.current = true;
         const canvas = canvasRef.current;
         const rect = canvas.getBoundingClientRect();
         const mouseX = event.clientX - rect.left;
@@ -129,23 +110,20 @@ export function usePanZoom({ canvasRef, imageRef, panZoomable = false }) {
     const handleMouseUp = (event) => {
         if (!panZoomable || !canvasRef.current)
             return;
-        setStatus(MouseStatus.STOP);
+        isDraggingRef.current = false;
         event.preventDefault();
     };
     const handleMouseLeave = (event) => {
         if (!panZoomable || !canvasRef.current)
             return;
-        setStatus(MouseStatus.STOP);
+        isDraggingRef.current = false;
         event.preventDefault();
     };
     return {
         canvasState,
-        imageOnloadCount,
-        setImageOnloadCount,
-        init,
-        initCanvas,
-        clearCanvas,
+        initZoomAndPosition,
         preserveZoomAndPosition,
+        initCanvas,
         handleWheel,
         handleMouseDown,
         handleMouseMove,

package/dist/components/{AnnotatedCanvas.d.ts → AnnotationViewer/index.d.ts}

@@ -1,5 +1,5 @@
 import { ComponentType, ReactNode } from 'react';
-import { Coordinate } from '../types/coordinate';
+import { Coordinate } from '../../types/coordinate';
 export type ZoomButtonType = {
     onClick: () => void;
     children: ReactNode;
@@ -18,5 +18,5 @@ type Props = {
     onImageLoadSuccess?: () => void;
     onImageLoadError?: (error: Error) => void;
 };
-declare const AnnotatedCanvas: ({ image, coordinates, panZoomable, ZoomButton, resetOnImageChange, editable, timeout, onImageLoadSuccess, onImageLoadError, }: Props) => import("react/jsx-runtime").JSX.Element;
-export default AnnotatedCanvas;
+declare const AnnotationViewer: ({ image, coordinates, panZoomable, ZoomButton, resetOnImageChange, editable, timeout, onImageLoadSuccess, onImageLoadError, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default AnnotationViewer;

package/dist/components/{AnnotatedCanvas.js → AnnotationViewer/index.js}

@@ -1,25 +1,24 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import Canvas from './Canvas';
-import { usePanZoom } from '../hooks/usePanZoom';
-import useResizeObserver from '../hooks/useResizeObserver';
-import { drawCanvas, resolutionCanvas } from '../utils/graphic';
-import { useDebounce } from '../hooks/useDebounce';
-const AnnotatedCanvas = ({ image, coordinates, panZoomable = false, ZoomButton, resetOnImageChange = true, editable = false, timeout = 10000, onImageLoadSuccess, onImageLoadError, }) => {
+import AnnotationLayer from '../AnnotationLayer';
+import { useImagePanZoom } from './_hooks/useImagePanZoom';
+import useResizeObserver from '../../hooks/useResizeObserver';
+import { clearCanvasRect, drawCanvas, resolutionCanvas } from '../../utils/graphic';
+import { useDebounce } from '../../hooks/useDebounce';
+const AnnotationViewer = ({ image, coordinates, panZoomable = false, ZoomButton, resetOnImageChange = true, editable = false, timeout = 10000, onImageLoadSuccess, onImageLoadError, }) => {
     const canvasRef = useRef(null);
     const imageRef = useRef(new Image());
+    const [displayCoordinates, setDisplayCoordinates] = useState();
     const debouncedHandleResize = useDebounce((size) => {
         if (image && size.width && size.height && canvasRef.current && imageRef.current.src) {
-            console.log('> Debounced resize - canvasRef.current:', canvasRef.current);
             const canvas = resolutionCanvas(canvasRef.current);
             if (canvas)
-                init(canvas, imageRef.current);
+                initZoomAndPosition(canvas, imageRef.current);
         }
     }, 150);
     useResizeObserver({ ref: canvasRef, onResize: debouncedHandleResize });
-    const [displayCoordinates, setDisplayCoordinates] = useState();
-    const { canvasState, init, initCanvas, clearCanvas, preserveZoomAndPosition, handleWheel, handleMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave, imageOnloadCount, setImageOnloadCount, } = usePanZoom({ canvasRef, imageRef, panZoomable });
+    const { canvasState, initZoomAndPosition, initCanvas, preserveZoomAndPosition, handleWheel, handleMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave, } = useImagePanZoom({ canvasRef, imageRef, panZoomable });
     useEffect(() => {
         const createEmptyImage = () => {
             const img = new Image();
@@ -27,7 +26,7 @@ const AnnotatedCanvas = ({ image, coordinates, panZoomable = false, ZoomButton,
             return img;
         };
         const resetCanvas = (errorMsg) => {
-            clearCanvas();
+            clearCanvasRect(canvasRef.current);
             setDisplayCoordinates([]);
             imageRef.current = createEmptyImage();
             if (errorMsg)
@@ -42,15 +41,12 @@ const AnnotatedCanvas = ({ image, coordinates, panZoomable = false, ZoomButton,
                 return;
             onImageLoadSuccess?.();
             if (resetOnImageChange) {
-                const canvas = resolutionCanvas(canvasRef.current);
-                if (canvas)
-                    init(canvas, tempImage);
+                setTimeout(() => initCanvas(), 0);
             }
             else {
                 preserveZoomAndPosition(canvasRef.current, tempImage, canvasState.zoom / (canvasState.initZoom || 1));
             }
             imageRef.current = tempImage;
-            setImageOnloadCount((c) => c + 1);
             setDisplayCoordinates(coordinates);
         };
         tempImage.onerror = () => !cancelled && resetCanvas(`Failed to load image: ${image}`);
@@ -68,7 +64,7 @@ const AnnotatedCanvas = ({ image, coordinates, panZoomable = false, ZoomButton,
         const canvas = resolutionCanvas(canvasRef.current);
         if (canvas)
             redraw(canvas);
-    }, [canvasState, imageOnloadCount]);
+    }, [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, style: {
                 flex: 1,
                 position: 'relative',
@@ -79,6 +75,6 @@ const AnnotatedCanvas = ({ image, coordinates, panZoomable = false, ZoomButton,
                         height: '100%',
                         left: 0,
                         top: 0,
-                    } }), _jsx(Canvas, { ...canvasState, coordinates: displayCoordinates, editable: editable }), ZoomButton && canvasState.initZoom > 0 && (_jsx(ZoomButton, { onClick: initCanvas, children: `${Math.round((canvasState.zoom / canvasState.initZoom) * 100)}%` }))] }) }));
+                    } }), _jsx(AnnotationLayer, { ...canvasState, coordinates: displayCoordinates, editable: editable }), ZoomButton && canvasState.initZoom > 0 && (_jsx(ZoomButton, { onClick: initCanvas, children: `${Math.round((canvasState.zoom / canvasState.initZoom) * 100)}%` }))] }) }));
 };
-export default AnnotatedCanvas;
+export default AnnotationViewer;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import AnnotatedCanvas from './components/AnnotatedCanvas';
-export { AnnotatedCanvas };
-export type { ZoomButtonType } from './components/AnnotatedCanvas';
+import AnnotationViewer from './components/AnnotationViewer';
+export { AnnotationViewer };
+export type { ZoomButtonType } from './components/AnnotationViewer';
 export type { Rectangle, Coordinate } from './types/coordinate';

package/dist/index.js

@@ -1,2 +1,2 @@
-import AnnotatedCanvas from './components/AnnotatedCanvas';
-export { AnnotatedCanvas };
+import AnnotationViewer from './components/AnnotationViewer';
+export { AnnotationViewer };

package/dist/utils/graphic.d.ts

@@ -34,4 +34,15 @@ export declare const __rotate: (mouse: Point, rotate: number, center: Point) =>
  * @returns 캔버스 크기 해상도에 맞춰 변형된 마우스 좌표
  */
 export declare const getMousePointTransform: (mousePoint: Point, movePoint: Point, zoomPoint: Point, originPoint: Point, zoom: number, canvas_el: HTMLCanvasElement, rotate?: number) => Point;
+export declare const clearCanvasRect: (canvas: HTMLCanvasElement | null | undefined) => void;
+/**
+ * 마우스 휠 기반 확대/축소 계산
+ * @param currentZoom 현재 zoom 값
+ * @param deltaY wheelEvent.deltaY
+ * @param minZoom 최소 zoom
+ * @param maxZoom 최대 zoom
+ * @param zoomUnit 확대/축소 단위
+ * @returns 계산된 zoom 값
+ */
+export declare const calculateZoom: (currentZoom: number, deltaY: number, minZoom: number, maxZoom: number, zoomUnit: number) => number;
 export {};

package/dist/utils/graphic.js

@@ -60,17 +60,13 @@ export const setRectangleStyle = (context, coordinate) => {
         context.strokeStyle = 'rgba(36, 162, 91, 1)';
     }
 };
-// [캔버스] 해상도
 export const resolutionCanvas = (canvas, width, height) => {
-    if (canvas) {
-        const canvas_el = canvas;
-        canvas_el.width = width ? width : canvas_el.clientWidth;
-        canvas_el.height = height ? height : canvas_el.clientHeight;
-        return canvas_el;
-    }
-    else {
+    if (!canvas)
         return undefined;
-    }
+    const newCanvas = canvas;
+    newCanvas.width = width || newCanvas.clientWidth;
+    newCanvas.height = height || newCanvas.clientHeight;
+    return newCanvas;
 };
 // [좌표 변형] 원점
 export const __origin = (mouse, origin) => {
@@ -135,3 +131,28 @@ export const getMousePointTransform = (mousePoint, movePoint, zoomPoint, originP
     mouse = __zoom(mouse, zoomPoint, zoom, canvas_el);
     return mouse;
 };
+export const clearCanvasRect = (canvas) => {
+    if (!canvas)
+        return;
+    const ctx = canvas.getContext('2d');
+    const resolvedCanvas = resolutionCanvas(canvas);
+    if (resolvedCanvas)
+        ctx?.clearRect(0, 0, resolvedCanvas.width, resolvedCanvas.height);
+};
+/**
+ * 마우스 휠 기반 확대/축소 계산
+ * @param currentZoom 현재 zoom 값
+ * @param deltaY wheelEvent.deltaY
+ * @param minZoom 최소 zoom
+ * @param maxZoom 최대 zoom
+ * @param zoomUnit 확대/축소 단위
+ * @returns 계산된 zoom 값
+ */
+export const calculateZoom = (currentZoom, deltaY, minZoom, maxZoom, zoomUnit) => {
+    let newZoom = deltaY < 0 ? currentZoom * (1 / zoomUnit) : currentZoom * zoomUnit;
+    if (newZoom > maxZoom)
+        newZoom = maxZoom;
+    if (newZoom < minZoom)
+        newZoom = minZoom;
+    return newZoom;
+};

package/package.json

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

package/dist/components/Canvas.d.ts

@@ -1,16 +0,0 @@
-import { Coordinate } from '../types/coordinate';
-type Props = {
-    moveX: number;
-    moveY: number;
-    zoomX: number;
-    zoomY: number;
-    zoom: number;
-    dx: number;
-    dy: number;
-    dw: number;
-    dh: number;
-    coordinates?: Coordinate[];
-    editable?: boolean;
-};
-declare const Canvas: ({ moveX, moveY, zoom, zoomX, zoomY, dx, dy, dw, dh, coordinates }: Props) => import("react/jsx-runtime").JSX.Element;
-export default Canvas;

package/dist/enum/common.d.ts

@@ -1,4 +0,0 @@
-export declare enum MouseStatus {
-    MOVE = "MOVE",
-    STOP = "STOP"
-}

package/dist/enum/common.js

@@ -1,5 +0,0 @@
-export var MouseStatus;
-(function (MouseStatus) {
-    MouseStatus["MOVE"] = "MOVE";
-    MouseStatus["STOP"] = "STOP";
-})(MouseStatus || (MouseStatus = {}));