@deepnoid/canvas 0.1.1

package/README.md

@@ -0,0 +1,3 @@
+# deepnoid-canvas
+
+이 프로젝트는 본부 내 프로젝트에서 사용되는 공통 CANVAS 라이브러리입니다!!!

package/dist/components/Canvas.d.ts

@@ -0,0 +1,15 @@
+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[];
+};
+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/XrayViewer.d.ts

@@ -0,0 +1,22 @@
+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;
+        }>;
+    };
+};
+declare const XrayViewer: ({ image, hasZoom, coordinates }: Props) => import("react/jsx-runtime").JSX.Element;
+export default XrayViewer;

package/dist/constants/graphic.d.ts

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

package/dist/hooks/useResizeObserver.d.ts

@@ -0,0 +1,18 @@
+import { RefCallback, RefObject } from 'react';
+type ObservedSize = {
+    width: number | undefined;
+    height: number | undefined;
+};
+type ResizeHandler = (size: ObservedSize) => void;
+type HookResponse<T extends Element> = {
+    ref: RefCallback<T>;
+} & ObservedSize;
+type RoundingFunction = (n: number) => number;
+type ResizeObserverBoxOptions = 'border-box' | 'content-box' | 'device-pixel-content-box';
+declare const useResizeObserver: <T extends Element>(opts: {
+    ref?: RefObject<T | null> | T | null | undefined;
+    onResize?: ResizeHandler;
+    box?: ResizeObserverBoxOptions;
+    round?: RoundingFunction;
+}) => HookResponse<T>;
+export default useResizeObserver;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as XrayViewer } from './components/XrayViewer';
+export type { ZoomButtonType } from './components/XrayViewer';
+export type { Rectangle, Coordinate } from './types/coordinate';

package/dist/types/coordinate.d.ts

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,32 @@
+import { Coordinate } from '../types/coordinate';
+export declare const canvasCenterPoint: (canvas: HTMLCanvasElement, image: HTMLImageElement) => {
+    x: number;
+    y: 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 {};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@deepnoid/canvas",
+  "version": "0.1.1",
+  "type": "module",
+  "main": "./dist/deepnoid-canvas.cjs",
+  "module": "./dist/deepnoid-canvas.js",
+  "types": "./dist/index.d.ts",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/deepnoid-canvas.js",
+      "require": "./dist/deepnoid-canvas.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "npx tsc -p tsconfig.json",
+    "dev": "cd example && npm run dev",
+    "lint": "eslint . --ext js,jsx,ts,tsx --report-unused-disable-directives --max-warnings 0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^4.2.0",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "typescript": "^5.9.2",
+    "vite": "^5.0.0"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+}