@deepnoid/canvas 0.1.11 → 0.1.13

package/dist/components/AnnotatedCanvas.d.ts

@@ -0,0 +1,21 @@
+import { ComponentType, ReactNode } from 'react';
+import { Coordinate } from '../types/coordinate';
+export type ZoomButtonType = {
+    onClick: () => void;
+    children: ReactNode;
+};
+type Props = {
+    image: string;
+    coordinates: Coordinate[];
+    panZoomable?: boolean;
+    ZoomButton?: ComponentType<{
+        onClick: () => void;
+        children: ReactNode;
+    }>;
+    resetOnImageChange?: boolean;
+    editable?: boolean;
+    onImageLoadError?: (error: Error) => void;
+    onImageLoadSuccess?: () => void;
+};
+declare const AnnotatedCanvas: ({ image, coordinates, panZoomable, ZoomButton, resetOnImageChange, editable, onImageLoadError, onImageLoadSuccess, }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export default AnnotatedCanvas;

package/dist/components/AnnotatedCanvas.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import Canvas from './Canvas';
+import { useImageLoader } from '../hooks/useImageLoader';
+import { usePanZoom } from '../hooks/usePanZoom';
+const AnnotatedCanvas = ({ image, coordinates, panZoomable = false, ZoomButton, resetOnImageChange = true, editable = false, onImageLoadError, onImageLoadSuccess, }) => {
+    const canvasRef = useRef(null);
+    const { image: loadedImage, isLoading } = useImageLoader(image, 10000, onImageLoadSuccess, onImageLoadError);
+    const { moveX, moveY, zoom, zoomX, zoomY, dx, dy, dw, dh, handleWheel, handleMouseDown, handleMouseMove, handleMouseUp, handleMouseLeave, resetView, } = usePanZoom({
+        canvasRef,
+        image: loadedImage,
+        panZoomable,
+        resetOnImageChange,
+    });
+    if (!loadedImage)
+        return null;
+    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',
+                cursor: panZoomable ? 'grab' : 'default',
+            }, children: [_jsx("canvas", { ref: canvasRef, style: { position: 'absolute', width: '100%', height: '100%', left: 0, top: 0 } }), !isLoading && (_jsx(Canvas, { moveX: moveX, moveY: moveY, zoomX: zoomX, zoomY: zoomY, zoom: zoom, dx: dx, dy: dy, dw: dw, dh: dh, coordinates: coordinates, editable: editable })), ZoomButton && !isLoading && _jsx(ZoomButton, { onClick: resetView, children: `${Math.round(zoom * 100)}%` })] }) }));
+};
+export default AnnotatedCanvas;

package/dist/components/Canvas.d.ts

@@ -10,6 +10,7 @@ type Props = {
     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/components/Canvas.js

@@ -4,23 +4,23 @@ import { drawCanvas, drawRect, resolutionCanvas } from '../utils/graphic';
 const Canvas = ({ moveX, moveY, zoom, zoomX, zoomY, dx, dy, dw, dh, coordinates }) => {
     const canvas = useRef(null);
     useEffect(() => {
-        const _redraw = () => {
+        const redraw = () => {
             const canvas_el = resolutionCanvas(canvas.current);
             if (canvas_el) {
                 drawCanvas(moveX, moveY, zoomX, zoomY, zoom, dx, dy, canvas_el, undefined, true);
                 const context = canvas_el.getContext('2d');
                 if (context && coordinates) {
                     const deep_copy = JSON.parse(JSON.stringify(coordinates));
-                    deep_copy.forEach(coordinate => {
+                    deep_copy.forEach((coordinate) => {
                         drawRect(context, coordinate);
                     });
                 }
             }
         };
-        _redraw();
-        window.addEventListener('resize', _redraw);
+        redraw();
+        window.addEventListener('resize', redraw);
         return () => {
-            window.removeEventListener('resize', _redraw);
+            window.removeEventListener('resize', redraw);
         };
     }, [moveX, moveY, zoomX, zoomY, zoom, dx, dy, dw, dh, coordinates]);
     return (_jsx("canvas", { ref: canvas, style: {
@@ -28,7 +28,8 @@ const Canvas = ({ moveX, moveY, zoom, zoomX, zoomY, dx, dy, dw, dh, coordinates
             height: '100%',
             width: '100%',
             backgroundColor: 'transparent',
-            transition: 'all 500ms'
+            transition: 'all 500ms',
+            willChange: 'transform',
         } }));
 };
 export default Canvas;

package/dist/enum/common.d.ts

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

package/dist/enum/common.js

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

package/dist/hooks/useImageLoader.d.ts

@@ -0,0 +1,6 @@
+export declare const useImageLoader: (src: string, timeout?: number, onLoadSuccess?: () => void, onLoadError?: (error: Error) => void) => {
+    image: HTMLImageElement | null;
+    isLoading: boolean;
+    error: string | null;
+    imageRef: import("react").RefObject<HTMLImageElement>;
+};

package/dist/hooks/useImageLoader.js

@@ -0,0 +1,48 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+export const useImageLoader = (src, timeout = 10000, onLoadSuccess, onLoadError) => {
+    const [image, setImage] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const imageRef = useRef(new Image());
+    useEffect(() => {
+        if (!src)
+            return;
+        setIsLoading(true);
+        setError(null);
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        const timer = setTimeout(() => {
+            const e = new Error(`Image load timeout: ${src}`);
+            setError(e.message);
+            onLoadError?.(e);
+            setIsLoading(false);
+        }, timeout);
+        img.onload = () => {
+            clearTimeout(timer);
+            if (img.naturalWidth === 0 || img.naturalHeight === 0) {
+                const e = new Error(`Invalid image dimensions: ${src}`);
+                setError(e.message);
+                onLoadError?.(e);
+                setIsLoading(false);
+                return;
+            }
+            imageRef.current = img;
+            setImage(img);
+            onLoadSuccess?.();
+            setIsLoading(false);
+        };
+        img.onerror = () => {
+            clearTimeout(timer);
+            const e = new Error(`Failed to load image: ${src}`);
+            setError(e.message);
+            onLoadError?.(e);
+            setIsLoading(false);
+        };
+        setTimeout(() => {
+            img.src = src;
+        }, 0);
+        return () => clearTimeout(timer);
+    }, [src, timeout, onLoadError, onLoadSuccess]);
+    return { image, isLoading, error, imageRef };
+};

package/dist/hooks/usePanZoom.d.ts

@@ -0,0 +1,25 @@
+import { RefObject, WheelEvent, MouseEvent } from 'react';
+type UsePanZoomProps = {
+    canvasRef: RefObject<HTMLCanvasElement | null>;
+    image: HTMLImageElement | null;
+    panZoomable?: boolean;
+    resetOnImageChange?: boolean;
+};
+export declare const usePanZoom: ({ canvasRef, image, panZoomable, resetOnImageChange }: UsePanZoomProps) => {
+    moveX: number;
+    moveY: number;
+    zoom: number;
+    zoomX: number;
+    zoomY: number;
+    dx: number;
+    dy: number;
+    dw: number;
+    dh: number;
+    handleWheel: (e: WheelEvent) => void;
+    handleMouseDown: (e: MouseEvent) => void;
+    handleMouseMove: (e: MouseEvent) => void;
+    handleMouseUp: () => void;
+    handleMouseLeave: () => void;
+    resetView: () => void;
+};
+export {};

package/dist/hooks/usePanZoom.js

@@ -0,0 +1,115 @@
+'use client';
+import { useCallback, useEffect, useState } from 'react';
+import { canvasCenterPoint, drawCanvas, getMousePointTransform, resolutionCanvas } from '../utils/graphic';
+import { MouseStatus } from '../enum/common';
+export const usePanZoom = ({ canvasRef, image, panZoomable = false, resetOnImageChange = true }) => {
+    const [moveX, setMoveX] = useState(0);
+    const [moveY, setMoveY] = useState(0);
+    const [zoom, setZoom] = useState(1);
+    const [zoomX, setZoomX] = useState(0);
+    const [zoomY, setZoomY] = useState(0);
+    const [dx, setDx] = useState(0);
+    const [dy, setDy] = useState(0);
+    const [dw, setDw] = useState(0);
+    const [dh, setDh] = useState(0);
+    const [status, setStatus] = useState();
+    const [startMousePoint, setStartMousePoint] = useState();
+    const ZOOM_UNIT = 0.9;
+    const MAX_ZOOM = 4;
+    const MIN_ZOOM = 0.5;
+    const initCanvas = useCallback(() => {
+        if (!canvasRef.current || !image)
+            return;
+        const canvasEl = resolutionCanvas(canvasRef.current);
+        const center = canvasCenterPoint(canvasEl, image);
+        setDx(center.x);
+        setDy(center.y);
+        setDw(image.width);
+        setDh(image.height);
+        setMoveX(0);
+        setMoveY(0);
+        setZoom(1);
+        setZoomX(0);
+        setZoomY(0);
+    }, [canvasRef, image]);
+    useEffect(() => {
+        if (resetOnImageChange) {
+            initCanvas();
+        }
+    }, [image, initCanvas, resetOnImageChange]);
+    const handleWheel = useCallback((e) => {
+        if (!panZoomable || !canvasRef.current || !image)
+            return;
+        let nextZoom = e.deltaY < 0 ? zoom / ZOOM_UNIT : zoom * ZOOM_UNIT;
+        nextZoom = Math.min(Math.max(nextZoom, MIN_ZOOM), MAX_ZOOM);
+        const canvasEl = resolutionCanvas(canvasRef.current);
+        const zoomPoint = {
+            x: -dx - moveX + canvasEl.width / 2,
+            y: -dy - moveY + canvasEl.height / 2,
+        };
+        setZoomX(zoomPoint.x);
+        setZoomY(zoomPoint.y);
+        setZoom(nextZoom);
+    }, [canvasRef, panZoomable, zoom, dx, dy, moveX, moveY, image]);
+    const handleMouseDown = useCallback((e) => {
+        if (!panZoomable || !canvasRef.current)
+            return;
+        setStatus(MouseStatus.MOVE);
+        const rect = canvasRef.current.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        const mouseY = e.clientY - rect.top;
+        const transformed = getMousePointTransform({ x: mouseX, y: mouseY }, { x: moveX, y: moveY }, { x: zoomX, y: zoomY }, { x: dx, y: dy }, zoom, canvasRef.current);
+        setStartMousePoint({ x: transformed.x, y: transformed.y });
+        e.preventDefault();
+    }, [canvasRef, panZoomable, moveX, moveY, zoomX, zoomY, dx, dy, zoom]);
+    const handleMouseMove = useCallback((e) => {
+        if (!panZoomable || status !== MouseStatus.MOVE || !canvasRef.current)
+            return;
+        const rect = canvasRef.current.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        const mouseY = e.clientY - rect.top;
+        const transformed = getMousePointTransform({ x: mouseX, y: mouseY }, { x: moveX, y: moveY }, { x: zoomX, y: zoomY }, { x: dx, y: dy }, zoom, canvasRef.current);
+        if (startMousePoint) {
+            const deltaX = transformed.x - startMousePoint.x;
+            const deltaY = transformed.y - startMousePoint.y;
+            setMoveX((prev) => prev + deltaX);
+            setMoveY((prev) => prev + deltaY);
+        }
+        e.preventDefault();
+    }, [canvasRef, panZoomable, status, moveX, moveY, zoomX, zoomY, dx, dy, zoom, startMousePoint]);
+    const handleMouseUp = useCallback(() => {
+        if (!panZoomable)
+            return;
+        setStatus(MouseStatus.STOP);
+    }, [panZoomable]);
+    const handleMouseLeave = useCallback(() => {
+        if (!panZoomable)
+            return;
+        setStatus(MouseStatus.STOP);
+    }, [panZoomable]);
+    useEffect(() => {
+        if (!canvasRef.current || !image)
+            return;
+        drawCanvas(moveX, moveY, zoomX, zoomY, zoom, dx, dy, resolutionCanvas(canvasRef.current), image, true);
+    }, [canvasRef, image, moveX, moveY, zoomX, zoomY, zoom, dx, dy]);
+    const resetView = useCallback(() => {
+        initCanvas();
+    }, [initCanvas]);
+    return {
+        moveX,
+        moveY,
+        zoom,
+        zoomX,
+        zoomY,
+        dx,
+        dy,
+        dw,
+        dh,
+        handleWheel,
+        handleMouseDown,
+        handleMouseMove,
+        handleMouseUp,
+        handleMouseLeave,
+        resetView,
+    };
+};

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

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

package/dist/components/XrayViewer.d.ts

@@ -1,24 +0,0 @@
-import { ComponentType, ReactNode } from 'react';
-import { Coordinate } from '../types/coordinate';
-export type ZoomButtonType = {
-    onClick: () => void;
-    children: ReactNode;
-};
-type Props = {
-    image?: {
-        type: 'TOP' | 'SIDE' | 'REALITY';
-        imagePath: string;
-        itemId: number;
-    } | null;
-    coordinates?: Coordinate[];
-    hasZoom?: {
-        ZoomButton: ComponentType<{
-            onClick: () => void;
-            children: ReactNode;
-        }>;
-    };
-    onImageLoadError?: (error: Error) => void;
-    onImageLoadSuccess?: () => void;
-};
-declare const XrayViewer: ({ image, hasZoom, coordinates, onImageLoadError, onImageLoadSuccess }: Props) => import("react/jsx-runtime").JSX.Element;
-export default XrayViewer;

package/dist/components/XrayViewer.js

@@ -1,282 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
-import useResizeObserver from '../hooks/useResizeObserver';
-import { canvasCenterPoint, drawCanvas, getMousePointTransform, resolutionCanvas } from '../utils/graphic';
-import Canvas from './Canvas';
-const XrayViewer = ({ image, hasZoom, coordinates, onImageLoadError, onImageLoadSuccess }) => {
-    const wrapper = useRef(null);
-    const viewer = useRef(null);
-    const { width, height } = useResizeObserver({ ref: viewer });
-    const ZOOM_UNIT = 0.9;
-    const MAX_ZOOM = 4;
-    const MIN_ZOOM = 0.5;
-    const IMAGE_LOAD_TIMEOUT = 10000;
-    const [initZoom, setInitZoom] = useState(0);
-    const [zoom, setZoom] = useState(0);
-    const [zoomX, setZoomX] = useState(0);
-    const [zoomY, setZoomY] = useState(0);
-    const [dx, setDx] = useState(0);
-    const [dy, setDy] = useState(0);
-    const [dw, setDw] = useState(0);
-    const [dh, setDh] = useState(0);
-    const [moveX, setMoveX] = useState(0);
-    const [moveY, setMoveY] = useState(0);
-    const [status, setStatus] = useState('');
-    const [imageOnloadCount, setImageOnloadCount] = useState(0);
-    const [isImageLoading, setIsImageLoading] = useState(false);
-    const [imageError, setImageError] = useState(null);
-    const imageRef = useRef(new Image());
-    const prevImageInfo = useRef(undefined);
-    const loadTimeoutRef = useRef(0);
-    const [startMousePoint, setStartMousePoint] = useState();
-    const loadImage = useCallback((src) => {
-        return new Promise((resolve, reject) => {
-            const img = new Image();
-            img.crossOrigin = 'anonymous';
-            const timeout = setTimeout(() => {
-                reject(new Error(`Image load timeout: ${src}`));
-            }, IMAGE_LOAD_TIMEOUT);
-            img.onload = () => {
-                clearTimeout(timeout);
-                if (img.naturalWidth === 0 || img.naturalHeight === 0) {
-                    reject(new Error(`Invalid image dimensions: ${src}`));
-                    return;
-                }
-                resolve(img);
-            };
-            img.onerror = () => {
-                clearTimeout(timeout);
-                reject(new Error(`Failed to load image: ${src}`));
-            };
-            setTimeout(() => {
-                img.src = src;
-            }, 0);
-        });
-    }, []);
-    const calculatorZoomPoint = useCallback((canvas_el, movementX, movementY, dx, dy) => {
-        let x = 0;
-        let y = 0;
-        if (viewer.current) {
-            x = -dx - movementX + canvas_el.width / 2;
-            y = -dy - movementY + canvas_el.height / 2;
-        }
-        return { x, y };
-    }, []);
-    const calculateInitZoom = useCallback((image, canvas_el) => {
-        if (canvas_el.clientWidth < canvas_el.clientHeight) {
-            return canvas_el.clientWidth / canvas_el.clientHeight < image.width / image.height
-                ? canvas_el.clientWidth / image.width
-                : canvas_el.clientHeight / image.height;
-        }
-        else {
-            return canvas_el.clientWidth / canvas_el.clientHeight > image.width / image.height
-                ? canvas_el.clientHeight / image.height
-                : canvas_el.clientWidth / image.width;
-        }
-    }, []);
-    const init = useCallback((canvas_el, image) => {
-        try {
-            const point = canvasCenterPoint(canvas_el, image);
-            setDx(point.x);
-            setDy(point.y);
-            setDw(image.width);
-            setDh(image.height);
-            setMoveX(0);
-            setMoveY(0);
-            const init_zoom = calculateInitZoom(image, canvas_el);
-            setZoom(init_zoom);
-            setInitZoom(init_zoom);
-            const zoomPoint = calculatorZoomPoint(canvas_el, 0, 0, point.x, point.y);
-            setZoomX(zoomPoint.x);
-            setZoomY(zoomPoint.y);
-            setImageError(null);
-        }
-        catch (error) {
-            const errorMessage = error instanceof Error ? error.message : 'Canvas initialization failed';
-            setImageError(errorMessage);
-            onImageLoadError?.(new Error(errorMessage));
-        }
-    }, [calculateInitZoom, calculatorZoomPoint, onImageLoadError]);
-    const initCanvas = useCallback(async () => {
-        if (!image)
-            return;
-        try {
-            setIsImageLoading(true);
-            setImageError(null);
-            if (loadTimeoutRef.current) {
-                clearTimeout(loadTimeoutRef.current);
-            }
-            const loadedImage = await loadImage(image.imagePath);
-            imageRef.current = loadedImage;
-            const canvas_el = resolutionCanvas(viewer.current);
-            if (canvas_el) {
-                init(canvas_el, loadedImage);
-                setImageOnloadCount((prev) => prev + 1);
-                onImageLoadSuccess?.();
-            }
-        }
-        catch (error) {
-            const errorMessage = error instanceof Error ? error.message : 'Unknown image load error';
-            setImageError(errorMessage);
-            onImageLoadError?.(new Error(errorMessage));
-            console.error('Image load failed:', error);
-        }
-        finally {
-            setIsImageLoading(false);
-        }
-    }, [image, loadImage, init, onImageLoadError, onImageLoadSuccess]);
-    useEffect(() => {
-        if (!image)
-            return;
-        const imageInfo = `${image.itemId}-${image.type}`;
-        const loadImageAsync = async () => {
-            try {
-                setIsImageLoading(true);
-                setImageError(null);
-                const loadedImage = await loadImage(image.imagePath);
-                imageRef.current = loadedImage;
-                if (prevImageInfo.current !== imageInfo || image.type === 'REALITY') {
-                    prevImageInfo.current = imageInfo;
-                    const canvas_el = resolutionCanvas(viewer.current);
-                    if (canvas_el) {
-                        init(canvas_el, loadedImage);
-                    }
-                }
-                setImageOnloadCount((prev) => prev + 1);
-                onImageLoadSuccess?.();
-            }
-            catch (error) {
-                const errorMessage = error instanceof Error ? error.message : 'Image load failed';
-                setImageError(errorMessage);
-                imageRef.current = new Image();
-                prevImageInfo.current = undefined;
-                setZoom(0);
-                setInitZoom(0);
-                setMoveX(0);
-                setMoveY(0);
-                setDx(0);
-                setDy(0);
-                setDw(0);
-                setDh(0);
-                if (viewer.current) {
-                    const canvas = viewer.current;
-                    const ctx = canvas.getContext('2d');
-                    if (ctx) {
-                        canvas.width = canvas.offsetWidth;
-                        canvas.height = canvas.offsetHeight;
-                        ctx.clearRect(0, 0, canvas.width, canvas.height);
-                    }
-                }
-                setImageOnloadCount((prev) => prev + 1);
-                onImageLoadError?.(new Error(errorMessage));
-                console.error('Image load failed:', error);
-            }
-            finally {
-                setIsImageLoading(false);
-            }
-        };
-        loadImageAsync();
-        return () => {
-            if (loadTimeoutRef.current) {
-                clearTimeout(loadTimeoutRef.current);
-            }
-        };
-    }, [image, loadImage, init, onImageLoadError, onImageLoadSuccess]);
-    useEffect(() => {
-        const _redraw = () => {
-            if (viewer.current && imageRef.current && !isImageLoading && !imageError) {
-                try {
-                    drawCanvas(moveX, moveY, zoomX, zoomY, zoom, dx, dy, resolutionCanvas(viewer.current), imageRef.current, true);
-                }
-                catch {
-                    setImageError('Canvas drawing failed');
-                }
-            }
-        };
-        _redraw();
-    }, [moveX, moveY, zoomX, zoomY, zoom, dx, dy, dw, dh, imageOnloadCount, isImageLoading, imageError]);
-    useEffect(() => {
-        if (image && imageRef.current && !isImageLoading) {
-            const imageInfo = `${image.itemId}-${image.type}`;
-            if (prevImageInfo.current === imageInfo) {
-                const canvas_el = resolutionCanvas(viewer.current);
-                if (canvas_el) {
-                    init(canvas_el, imageRef.current);
-                    setImageOnloadCount((prev) => prev + 1);
-                }
-            }
-        }
-    }, [width, height, image, init, isImageLoading]);
-    const handleWheel = (event) => {
-        if (!hasZoom || isImageLoading || imageError)
-            return;
-        if (viewer.current) {
-            let calc_zoom = event.deltaY < 0 ? (zoom || 1) * (1 / ZOOM_UNIT) : (zoom || 1) * ZOOM_UNIT;
-            if (initZoom * MAX_ZOOM < zoom * ZOOM_UNIT)
-                calc_zoom = calc_zoom * ZOOM_UNIT;
-            if (initZoom * MIN_ZOOM > zoom * ZOOM_UNIT)
-                calc_zoom = calc_zoom * (1 / ZOOM_UNIT);
-            const canvas_el = viewer.current;
-            const zoomPoint = calculatorZoomPoint(canvas_el, moveX, moveY, dx, dy);
-            setZoomX(zoomPoint.x);
-            setZoomY(zoomPoint.y);
-            setZoom(calc_zoom);
-        }
-    };
-    const handleMouseMove = (event) => {
-        if (!hasZoom || isImageLoading || imageError)
-            return;
-        if (status === 'MOVE') {
-            if (viewer.current) {
-                const canvas_el = viewer.current;
-                const rect = canvas_el.getBoundingClientRect();
-                const mouseX = event.clientX - rect.left;
-                const mouseY = event.clientY - rect.top;
-                const mouse = getMousePointTransform({ x: mouseX, y: mouseY }, { x: moveX, y: moveY }, { x: zoomX, y: zoomY }, { x: dx, y: dy }, zoom || 1, canvas_el);
-                let x = mouse.x;
-                let y = mouse.y;
-                if (startMousePoint) {
-                    x = x - startMousePoint.x;
-                    y = y - startMousePoint.y;
-                }
-                setMoveX(moveX + x);
-                setMoveY(moveY + y);
-                const zoomPoint = calculatorZoomPoint(canvas_el, moveX + x, moveY + y, dx, dy);
-                setZoomX(zoomPoint.x);
-                setZoomY(zoomPoint.y);
-            }
-        }
-        event.preventDefault();
-    };
-    const handleMouseDown = (event) => {
-        if (isImageLoading || imageError)
-            return;
-        setStatus('MOVE');
-        if (viewer.current) {
-            const canvas_el = viewer.current;
-            const rect = canvas_el.getBoundingClientRect();
-            const mouseX = event.clientX - rect.left;
-            const mouseY = event.clientY - rect.top;
-            const mouse = getMousePointTransform({ x: mouseX, y: mouseY }, { x: moveX, y: moveY }, { x: zoomX, y: zoomY }, { x: dx, y: dy }, zoom || 1, canvas_el);
-            setStartMousePoint({ x: mouse.x, y: mouse.y });
-        }
-        event.preventDefault();
-    };
-    const handleMouseUp = (event) => {
-        setStatus('STOP');
-        event.preventDefault();
-    };
-    const handleMouseLeave = (event) => {
-        setStatus('STOP');
-        event.preventDefault();
-    };
-    return (_jsx("div", { style: { width: '100%', height: '100%', display: 'flex', flex: 1 }, children: _jsxs("div", { ref: wrapper, onWheel: handleWheel, onMouseMove: handleMouseMove, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave, style: { flex: 1, position: 'relative' }, children: [_jsx("canvas", { ref: viewer, style: {
-                        position: 'absolute',
-                        width: '100%',
-                        height: '100%',
-                        left: 0,
-                        top: 0,
-                    } }), !isImageLoading && !imageError && (_jsx(Canvas, { moveX: moveX, moveY: moveY, zoomX: zoomX, zoomY: zoomY, zoom: zoom, dx: dx, dy: dy, dw: dw, dh: dh, coordinates: coordinates })), hasZoom && initZoom !== 0 && !isImageLoading && !imageError && (_jsx(hasZoom.ZoomButton, { onClick: initCanvas, children: `${Math.round((zoom / initZoom) * 100)}%` }))] }) }));
-};
-export default XrayViewer;