@deepnoid/canvas 0.1.37 → 0.1.39

package/dist/constants/graphic.d.ts

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

package/dist/constants/graphic.js

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

package/dist/types/coordinate.d.ts

@@ -1,10 +0,0 @@
-export type Rectangle = {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-};
-export type Coordinate = {
-    name: string;
-    color: 'success' | 'warning' | 'danger';
-} & Rectangle;

package/dist/utils/graphic.d.ts

@@ -1,48 +0,0 @@
-import { Coordinate } from '../types/coordinate';
-export declare const canvasCenterPoint: (canvas: HTMLCanvasElement, image: HTMLImageElement) => {
-    x: number;
-    y: number;
-};
-export declare const calculatorZoomPoint: (canvas: HTMLCanvasElement, movementX: number, movementY: number, dx: number, dy: number) => {
-    x: number;
-    y: number;
-};
-export declare const calculateInitZoom: (canvas: HTMLCanvasElement, image: HTMLImageElement) => number;
-export declare const drawCanvas: (moveX: number, moveY: number, zoomX: number, zoomY: number, zoom: number, dx: number, dy: number, canvas_el?: HTMLCanvasElement, image?: HTMLImageElement, isClear?: boolean) => void;
-export declare const drawRect: (context: CanvasRenderingContext2D, coordinate: Coordinate) => void;
-export declare const setRectangleStyle: (context: CanvasRenderingContext2D, coordinate: Coordinate) => void;
-export declare const resolutionCanvas: (canvas: HTMLCanvasElement | null | undefined, width?: number, height?: number) => HTMLCanvasElement | undefined;
-type Point = {
-    x: number;
-    y: number;
-};
-export declare const __origin: (mouse: Point, origin: Point) => Point;
-export declare const __move: (mouse: Point, move: Point) => Point;
-export declare const __zoom: (mouse: Point, zoomPoint: Point, zoom: number, canvas_el: HTMLCanvasElement) => Point;
-export declare const __rotate: (mouse: Point, rotate: number, center: Point) => Point;
-/**
- * [좌표 변형] 마우스 포인트 형태 변형
- * 실행 순서 중요(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 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

@@ -1,158 +0,0 @@
-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 calculatorZoomPoint = (canvas, movementX, movementY, dx, dy) => {
-    let x = 0;
-    let y = 0;
-    if (canvas) {
-        x = -dx - movementX + canvas.width / 2;
-        y = -dy - movementY + canvas.height / 2;
-    }
-    return { x, y };
-};
-export const calculateInitZoom = (canvas, image) => {
-    if (!canvas || !image.naturalWidth)
-        return 1;
-    const canvasRatio = canvas.clientWidth / canvas.clientHeight;
-    const imageRatio = image.naturalWidth / image.naturalHeight;
-    return canvasRatio < imageRatio ? canvas.clientWidth / image.naturalWidth : canvas.clientHeight / image.naturalHeight;
-};
-// [캔버스] 그리기
-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)
-        return undefined;
-    const newCanvas = canvas;
-    newCanvas.width = width || newCanvas.clientWidth;
-    newCanvas.height = height || newCanvas.clientHeight;
-    return newCanvas;
-};
-// [좌표 변형] 원점
-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;
-};
-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;
-};