@deepnoid/canvas 0.1.35 → 0.1.36

package/dist/components/AnnotatedCanvas.js

@@ -14,12 +14,12 @@ const AnnotatedCanvas = ({ image, coordinates, panZoomable = false, ZoomButton,
             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, clearCanvas, preserveZoomAndPosition, handleWheel, handleMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave, } = usePanZoom({ canvasRef, imageRef, panZoomable });
     useEffect(() => {
         const createEmptyImage = () => {
             const img = new Image();
@@ -42,15 +42,14 @@ const AnnotatedCanvas = ({ image, coordinates, panZoomable = false, ZoomButton,
                 return;
             onImageLoadSuccess?.();
             if (resetOnImageChange) {
-                const canvas = resolutionCanvas(canvasRef.current);
-                if (canvas)
-                    init(canvas, tempImage);
+                setTimeout(() => initCanvas(), 0);
+                // const canvas = resolutionCanvas(canvasRef.current);
+                // if (canvas) initZoomAndPosition(canvas, tempImage);
             }
             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 +67,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',

package/dist/hooks/usePanZoom.d.ts

@@ -18,12 +18,10 @@ type UsePanZoomProps = {
 };
 export declare function usePanZoom({ canvasRef, imageRef, panZoomable }: UsePanZoomProps): {
     canvasState: CanvasState;
-    imageOnloadCount: number;
-    setImageOnloadCount: import("react").Dispatch<import("react").SetStateAction<number>>;
-    init: (canvas: HTMLCanvasElement, image: HTMLImageElement) => void;
+    initZoomAndPosition: (canvas: HTMLCanvasElement, image: HTMLImageElement) => void;
+    preserveZoomAndPosition: (canvas: HTMLCanvasElement, image: HTMLImageElement, zoomRatio: number) => void;
     initCanvas: () => void;
     clearCanvas: () => void;
-    preserveZoomAndPosition: (canvas: HTMLCanvasElement, image: HTMLImageElement, zoomRatio: number) => void;
     handleWheel: (event: WheelEvent) => void;
     handleMouseDown: (event: MouseEvent) => void;
     handleMouseMove: (event: MouseEvent) => void;

package/dist/hooks/usePanZoom.js

@@ -1,6 +1,6 @@
 'use client';
 import { useState } from 'react';
-import { resolutionCanvas, getMousePointTransform, canvasCenterPoint, calculatorZoomPoint, calculateInitZoom, } from '../utils/graphic';
+import { getMousePointTransform, canvasCenterPoint, calculatorZoomPoint, calculateInitZoom, resolutionCanvas, } from '../utils/graphic';
 import { MouseStatus } from '../enum/common';
 export function usePanZoom({ canvasRef, imageRef, panZoomable = false }) {
     const ZOOM_UNIT = 0.9;
@@ -19,9 +19,8 @@ export function usePanZoom({ canvasRef, imageRef, panZoomable = false }) {
         initZoom: 0,
     });
     const [status, setStatus] = useState('');
-    const [imageOnloadCount, setImageOnloadCount] = useState(0);
     const [startMousePoint, setStartMousePoint] = useState();
-    const init = (canvas, image) => {
+    const initZoomAndPosition = (canvas, image) => {
         const point = canvasCenterPoint(canvas, image);
         const zoomPoint = calculatorZoomPoint(canvas, 0, 0, point.x, point.y);
         const initZoomValue = calculateInitZoom(canvas, image);
@@ -59,20 +58,15 @@ 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);
+        initZoomAndPosition(canvasRef.current, imageRef.current);
     };
     const clearCanvas = () => {
         if (!canvasRef.current)
             return;
+        const ctx = canvasRef.current.getContext('2d');
         const canvas = resolutionCanvas(canvasRef.current);
-        if (!canvas)
-            return;
-        const ctx = canvas.getContext('2d');
-        ctx?.clearRect(0, 0, canvas.width, canvas.height);
+        if (canvas)
+            ctx?.clearRect(0, 0, canvas.width, canvas.height);
     };
     const handleWheel = (event) => {
         if (!panZoomable || !canvasRef.current || canvasState.initZoom <= 0)
@@ -140,12 +134,10 @@ export function usePanZoom({ canvasRef, imageRef, panZoomable = false }) {
     };
     return {
         canvasState,
-        imageOnloadCount,
-        setImageOnloadCount,
-        init,
+        initZoomAndPosition,
+        preserveZoomAndPosition,
         initCanvas,
         clearCanvas,
-        preserveZoomAndPosition,
         handleWheel,
         handleMouseDown,
         handleMouseMove,

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) => {

package/package.json

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