@deepnoid/canvas 0.1.2 → 0.1.3

package/dist/components/Canvas.js

@@ -0,0 +1,34 @@
+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 }) => {
+    const canvas = useRef(null);
+    useEffect(() => {
+        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 => {
+                        drawRect(context, coordinate);
+                    });
+                }
+            }
+        };
+        _redraw();
+        window.addEventListener('resize', _redraw);
+        return () => {
+            window.removeEventListener('resize', _redraw);
+        };
+    }, [moveX, moveY, zoomX, zoomY, zoom, dx, dy, dw, dh, coordinates]);
+    return (_jsx("canvas", { ref: canvas, style: {
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
+            backgroundColor: 'transparent',
+            transition: 'all 500ms'
+        } }));
+};
+export default Canvas;

package/dist/components/XrayViewer.js

@@ -0,0 +1,192 @@
+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 }) => {
+    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 [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 [_imageInfo, _setImageInfo] = useState();
+    const imageRef = useRef(new Image());
+    const prevImageInfo = useRef(undefined);
+    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 = (canvas_el, image) => {
+        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);
+    };
+    const initCanvas = () => {
+        if (image) {
+            const canvas_el = resolutionCanvas(viewer.current);
+            if (canvas_el)
+                init(canvas_el, imageRef.current);
+            setImageOnloadCount(prev => prev + 1);
+        }
+    };
+    useEffect(() => {
+        if (image) {
+            imageRef.current.src = image.imagePath;
+            const imageInfo = `${image.itemId}-${image.type}`;
+            imageRef.current.onload = () => {
+                if (prevImageInfo.current !== imageInfo || ['REALITY'].includes(image.type)) {
+                    prevImageInfo.current = imageInfo;
+                    const canvas_el = resolutionCanvas(viewer.current);
+                    if (canvas_el)
+                        init(canvas_el, imageRef.current);
+                }
+                setImageOnloadCount(prev => prev + 1);
+            };
+        }
+    }, [image]);
+    const [startMousePoint, setStartMousePoint] = useState();
+    useEffect(() => {
+        const _redraw = () => {
+            if (viewer.current) {
+                drawCanvas(moveX, moveY, zoomX, zoomY, zoom, dx, dy, resolutionCanvas(viewer.current), imageRef.current, true);
+            }
+        };
+        _redraw();
+    }, [moveX, moveY, zoomX, zoomY, zoom, dx, dy, dw, dh, imageOnloadCount]);
+    useEffect(() => {
+        if (image) {
+            imageRef.current.src = image.imagePath;
+            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]);
+    const handleWheel = (event) => {
+        if (!hasZoom)
+            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)
+            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) => {
+        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);
+            const x = mouse.x;
+            const y = mouse.y;
+            setStartMousePoint({
+                x: x,
+                y: 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,
+            backgroundColor: '#f5f5f5'
+        }, 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,
+                        transition: 'all 500ms'
+                    } }), _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 && (_jsx(hasZoom.ZoomButton, { onClick: initCanvas, children: `${Math.round((zoom / initZoom) * 100)}%` }))] }) }));
+};
+export default XrayViewer;

package/dist/constants/graphic.js

@@ -0,0 +1 @@
+export const DRAW_LINE_SIZE = 4;

package/dist/hooks/useResizeObserver.js

@@ -0,0 +1,124 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+const useResizeObserver = (opts) => {
+    const onResize = opts.onResize;
+    const onResizeRef = useRef(undefined);
+    onResizeRef.current = onResize;
+    const round = opts.round || Math.round;
+    const resizeObserverRef = useRef({});
+    const [size, setSize] = useState({
+        width: undefined,
+        height: undefined,
+    });
+    const previous = useRef({
+        width: undefined,
+        height: undefined,
+    });
+    const didUnmount = useRef(false);
+    useEffect(() => {
+        didUnmount.current = false;
+        return () => {
+            didUnmount.current = true;
+        };
+    }, []);
+    const refCallback = useResolvedElement(useCallback(element => {
+        if (!resizeObserverRef.current ||
+            resizeObserverRef.current.box !== opts.box ||
+            resizeObserverRef.current.round !== round) {
+            resizeObserverRef.current = {
+                box: opts.box,
+                round,
+                instance: new ResizeObserver(entries => {
+                    const entry = entries[0];
+                    const boxProp = opts.box === 'border-box'
+                        ? 'borderBoxSize'
+                        : opts.box === 'device-pixel-content-box'
+                            ? 'devicePixelContentBoxSize'
+                            : 'contentBoxSize';
+                    const reportedWidth = extractSize(entry, boxProp, 'inlineSize');
+                    const reportedHeight = extractSize(entry, boxProp, 'blockSize');
+                    const newWidth = reportedWidth ? round(reportedWidth) : undefined;
+                    const newHeight = reportedHeight ? round(reportedHeight) : undefined;
+                    if (previous.current.width !== newWidth || previous.current.height !== newHeight) {
+                        const newSize = { width: newWidth, height: newHeight };
+                        previous.current.width = newWidth;
+                        previous.current.height = newHeight;
+                        if (onResizeRef.current) {
+                            onResizeRef.current(newSize);
+                        }
+                        else {
+                            if (!didUnmount.current) {
+                                setSize(newSize);
+                            }
+                        }
+                    }
+                }),
+            };
+        }
+        resizeObserverRef.current.instance?.observe(element, { box: opts.box });
+        return () => {
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.instance?.unobserve(element);
+            }
+        };
+    }, [opts.box, round]), opts.ref);
+    return useMemo(() => ({
+        ref: refCallback,
+        width: size.width,
+        height: size.height,
+    }), [refCallback, size.width, size.height]);
+};
+export default useResizeObserver;
+function useResolvedElement(subscriber, refOrElement) {
+    const lastReportRef = useRef(null);
+    const refOrElementRef = useRef(null);
+    refOrElementRef.current = refOrElement;
+    const cbElementRef = useRef(null);
+    useEffect(() => {
+        evaluateSubscription();
+    });
+    const evaluateSubscription = useCallback(() => {
+        const cbElement = cbElementRef.current;
+        const refOrElement = refOrElementRef.current;
+        const element = cbElement
+            ? cbElement
+            : refOrElement
+                ? refOrElement instanceof Element
+                    ? refOrElement
+                    : refOrElement.current
+                : null;
+        if (lastReportRef.current &&
+            lastReportRef.current.element === element &&
+            lastReportRef.current.subscriber === subscriber) {
+            return;
+        }
+        if (lastReportRef.current && lastReportRef.current.cleanup) {
+            lastReportRef.current.cleanup();
+        }
+        lastReportRef.current = {
+            element,
+            subscriber,
+            cleanup: element ? subscriber(element) : undefined,
+        };
+    }, [subscriber]);
+    useEffect(() => {
+        return () => {
+            if (lastReportRef.current && lastReportRef.current.cleanup) {
+                lastReportRef.current.cleanup();
+                lastReportRef.current = null;
+            }
+        };
+    }, []);
+    return useCallback(element => {
+        cbElementRef.current = element;
+        evaluateSubscription();
+    }, [evaluateSubscription]);
+}
+function extractSize(entry, boxProp, sizeType) {
+    const box = Array.isArray(entry[boxProp])
+        ? entry[boxProp][0]
+        : undefined;
+    if (!box) {
+        return entry.contentRect[sizeType === 'inlineSize' ? 'width' : 'height'];
+    }
+    return box[sizeType];
+}

package/dist/index.js

@@ -0,0 +1 @@
+export { default as XrayViewer } from './components/XrayViewer';

package/dist/types/coordinate.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/graphic.js

@@ -0,0 +1,121 @@
+import { DRAW_LINE_SIZE } from '../constants/graphic';
+// [캔버스] 중앙포인트
+export const canvasCenterPoint = (canvas, image) => {
+    const centerX = canvas.width / 2 - image.width / 2;
+    const centerY = canvas.height / 2 - image.height / 2;
+    return { x: centerX, y: centerY };
+};
+// [캔버스] 그리기
+export const drawCanvas = (moveX, moveY, zoomX, zoomY, zoom, dx, dy, canvas_el, image, isClear) => {
+    if (canvas_el) {
+        const context = canvas_el.getContext('2d');
+        if (isClear)
+            context?.clearRect(0, 0, canvas_el.width, canvas_el.height);
+        const resolution_ratio_x = canvas_el.width / canvas_el.clientWidth;
+        const resolution_ratio_y = canvas_el.height / canvas_el.clientHeight;
+        context?.translate(dx * resolution_ratio_x, dy * resolution_ratio_y);
+        context?.translate(moveX * resolution_ratio_x, moveY * resolution_ratio_y);
+        context?.translate(zoomX, zoomY);
+        context?.scale(zoom, zoom);
+        context?.translate(-zoomX, -zoomY);
+        try {
+            if (image)
+                context?.drawImage(image, 0, 0, image.width, image.height);
+        }
+        catch (error) {
+            console.error('Failed to draw image', error);
+        }
+    }
+};
+export const drawRect = (context, coordinate) => {
+    setRectangleStyle(context, coordinate);
+    const { x, y, width, height } = coordinate;
+    context.lineWidth = DRAW_LINE_SIZE;
+    context.strokeRect(x, y, width, height);
+};
+export const setRectangleStyle = (context, coordinate) => {
+    if (coordinate.color === 'danger') {
+        context.strokeStyle = 'rgba(255, 70, 132, 1)';
+    }
+    if (coordinate.color === 'warning') {
+        context.strokeStyle = 'rgba(237, 164, 16, 1)';
+    }
+    if (coordinate.color === 'success') {
+        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 {
+        return undefined;
+    }
+};
+// [좌표 변형] 원점
+export const __origin = (mouse, origin) => {
+    const x = mouse.x - origin.x;
+    const y = mouse.y - origin.y;
+    return {
+        x,
+        y,
+    };
+};
+// [좌표 변형] 이동
+export const __move = (mouse, move) => {
+    const x = mouse.x - move.x;
+    const y = mouse.y - move.y;
+    return {
+        x,
+        y,
+    };
+};
+// [좌표 변형] 확대, 축소
+export const __zoom = (mouse, zoomPoint, zoom, canvas_el) => {
+    const resolution_ratio_x = canvas_el.width / canvas_el.clientWidth;
+    const resolution_ratio_y = canvas_el.height / canvas_el.clientHeight;
+    let x = mouse.x * (1 / zoom) * resolution_ratio_x;
+    let y = mouse.y * (1 / zoom) * resolution_ratio_y;
+    x = x + zoomPoint.x;
+    y = y + zoomPoint.y;
+    x = x - zoomPoint.x * (1 / zoom);
+    y = y - zoomPoint.y * (1 / zoom);
+    return {
+        x,
+        y,
+    };
+};
+// [좌표 변형] 회전
+export const __rotate = (mouse, rotate, center) => {
+    const rad = (rotate * Math.PI) / 180; // Convert degree to radian
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const x = cos * (mouse.x - center.x) - sin * (mouse.y - center.y) + center.x;
+    const y = sin * (mouse.x - center.x) + cos * (mouse.y - center.y) + center.y;
+    return { x, y };
+};
+/**
+ * [좌표 변형] 마우스 포인트 형태 변형
+ * 실행 순서 중요(graphic draw 순서와 동일)
+ *
+ * @param mousePoint: Point 현재 마우스 좌표
+ * @param movePoint: Point 이동 좌표
+ * @param zoomPoint: Point 확대 좌표
+ * @param originPoint: Point 원점 좌표
+ * @param zoom: number 확대 비율
+ * @param canvas_el: 캔버스 엘리먼트
+ * @param rotate: number 회전 각도 0~360
+ * @returns 캔버스 크기 해상도에 맞춰 변형된 마우스 좌표
+ */
+export const getMousePointTransform = (mousePoint, movePoint, zoomPoint, originPoint, zoom, canvas_el, rotate = 0) => {
+    let mouse = mousePoint;
+    mouse = __rotate(mouse, rotate, { x: canvas_el.width / 2, y: canvas_el.height / 2 });
+    mouse = __origin(mouse, originPoint);
+    mouse = __move(mouse, movePoint);
+    mouse = __zoom(mouse, zoomPoint, zoom, canvas_el);
+    return mouse;
+};

package/package.json

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