@rocon/balcan 0.0.1

package/dist/staffs/image.staff.js

@@ -0,0 +1,74 @@
+import Konva from 'konva';
+/** Image Node 유닛 */
+export function useImageStaff(params, opt) {
+    const sourceImage = new Image();
+    let renderImage = new Image();
+    let transformer;
+    sourceImage.src = params.imageSrc;
+    renderImage.src = params.imageSrc;
+    const offset = { x: opt.offset?.x ?? 0, y: opt.offset?.y ?? 0 };
+    const imageNode = new Konva.Image({
+        image: renderImage,
+    });
+    const shapeGroup = new Konva.Group({
+        draggable: opt.editable,
+        offsetX: offset.x,
+        offsetY: offset.y,
+    });
+    shapeGroup.add(imageNode);
+    const me = {
+        type: 'image',
+        entityId: params.entityId,
+        uniqueId: 'image-' + params.entityId,
+        plugins: [],
+        data: {
+            entityId: params.entityId,
+            imageNode: shapeGroup,
+            sourceImage,
+            renderImage,
+        },
+        addPlugin: (plugin) => me.plugins.push(plugin),
+        removePlugin: (pluginKey) => {
+            me.plugins = me.plugins.filter((p) => p.uniqueId !== pluginKey);
+        },
+        changeImage,
+        translate: (x, y) => {
+            shapeGroup.x(x);
+            shapeGroup.y(y);
+        },
+        rotate: (deg) => shapeGroup.rotation(deg),
+        scale: (n) => shapeGroup.scale({ x: n, y: n }),
+        onDestroy: () => {
+            shapeGroup.destroy();
+        },
+    };
+    if (opt.editable) {
+        const tr = makeTransformer();
+        me.data.transformer = tr;
+    }
+    opt.director.addStaff(me);
+    me.data.imageNode = shapeGroup;
+    return me;
+    ///////////////////////////////////////////////
+    /** 렌더링 되는 이미지를 교체할 수 있음 */
+    function changeImage(newImage) {
+        renderImage = newImage;
+        imageNode.image(renderImage);
+    }
+    function makeTransformer() {
+        transformer = new Konva.Transformer({
+            nodes: [shapeGroup],
+            keepRatio: true,
+            flipEnabled: false,
+            enabledAnchors: [],
+        });
+        transformer.on('transform', () => {
+            const scale = shapeGroup.scaleX();
+            const rotation = shapeGroup.rotation();
+            const x = shapeGroup.x();
+            const y = shapeGroup.y();
+            params.onTransform?.({ x, y, scale, rotation });
+        });
+        return transformer;
+    }
+}

package/dist/staffs/index.d.ts

@@ -0,0 +1,3 @@
+export * from './wheelZoom.staff';
+export * from './image.staff';
+export * from './windowResizeObserver.staff';

package/dist/staffs/index.js

@@ -0,0 +1,3 @@
+export * from './wheelZoom.staff';
+export * from './image.staff';
+export * from './windowResizeObserver.staff';

package/dist/staffs/wheelZoom.staff.d.ts

@@ -0,0 +1,21 @@
+import type { Director } from '../core/types.balcan';
+export type BalcanZoomStaff = ReturnType<typeof useWheelZoomStaff>;
+/** 마우스 휠로 줌 인/아웃을 조작할 수 있는 Staff */
+export declare function useWheelZoomStaff(opt: {
+    uuid: string;
+    director: Director;
+    minScale?: number;
+    maxScale?: number;
+}): {
+    type: "zoom";
+    entityId: string;
+    uniqueId: string;
+    data: any;
+    director?: Director;
+    plugins: import("../core/types.balcan").Plugin[];
+    addPlugin?: (plugin: import("../core/types.balcan").Plugin) => void;
+    removePlugin?: (pluginKey: string) => void;
+    onDestroy?: () => void;
+    onBeforeRender?: () => void;
+    onRender?: () => void;
+};

package/dist/staffs/wheelZoom.staff.js

@@ -0,0 +1,45 @@
+/** 마우스 휠로 줌 인/아웃을 조작할 수 있는 Staff */
+export function useWheelZoomStaff(opt) {
+    const { director, minScale = 0.2, maxScale = 3 } = opt ?? {};
+    const $staff = {
+        type: 'zoom',
+        uniqueId: opt.uuid,
+        director,
+        entityId: opt.uuid ?? '',
+        plugins: [],
+        data: {},
+        onDestroy() {
+            director.stage.off('wheel');
+        },
+    };
+    director.stage.on('wheel', (e) => {
+        e.evt.preventDefault();
+        const exponentedScale = Math.min(30, Math.E ** (director.scale / 2));
+        const delta = -e.evt.deltaY * 0.0002 * exponentedScale;
+        const addedScale = director.scale + delta;
+        _setScale(addedScale, true);
+    });
+    /** 현재 마우스 포인터 위치를 기준으로 줌 인/아웃을 설정합니다 */
+    function _setScale(newScale, withPointer = false) {
+        const stage = director.stage;
+        const sanitizedScale = Math.min(maxScale, Math.max(minScale, newScale));
+        if (withPointer) {
+            const pointer = withPointer
+                ? (stage.getPointerPosition() ?? { x: 0, y: 0 })
+                : { x: 0, y: 0 };
+            const mousePointTo = {
+                x: (pointer.x - stage.x()) / director.scale,
+                y: (pointer.y - stage.y()) / director.scale,
+            };
+            const newPosition = {
+                x: pointer.x - mousePointTo.x * sanitizedScale,
+                y: pointer.y - mousePointTo.y * sanitizedScale,
+            };
+            stage.position(newPosition);
+        }
+        const scale = sanitizedScale;
+        director.scale = scale;
+    }
+    director.addStaff($staff);
+    return $staff;
+}

package/dist/staffs/windowResizeObserver.staff.d.ts

@@ -0,0 +1,8 @@
+import type { Staff, Director } from '../core/types.balcan';
+export type BalcanResizeObserverStaff = Staff<'resizeobserver'>;
+/**  */
+export declare function useWindowResizeObserverStaff(opt: {
+    uuid?: string;
+    director: Director;
+    onResizeFunction?: () => void;
+}): BalcanResizeObserverStaff;

package/dist/staffs/windowResizeObserver.staff.js

@@ -0,0 +1,17 @@
+/**  */
+export function useWindowResizeObserverStaff(opt) {
+    window.addEventListener('resize', () => {
+        opt.onResizeFunction?.();
+    });
+    opt.onResizeFunction?.();
+    const me = {
+        type: 'resizeobserver',
+        director: opt.director,
+        entityId: opt.uuid ?? '',
+        uniqueId: 'resizeobserver' + (opt.uuid ? `-${opt.uuid}` : ''),
+        plugins: [],
+        data: {},
+    };
+    opt.director.addStaff(me);
+    return me;
+}

package/dist/types/geometry.d.ts

@@ -0,0 +1,68 @@
+declare namespace BalcanGeo {
+  type Vector2 = {
+    x: number;
+    y: number;
+  };
+
+  /**
+   * 서버에 저장되는 형태의 현실 좌표계 상의 위치정보
+   * 수학좌표게를 따르므로 y축은 위로 갈 수록 증가
+   * 거리는 미터 단위
+   **/
+  type Pose = {
+    x: number;
+    y: number;
+    theta: number;
+  };
+
+  /**
+   * 렌더링을 위한 화면 좌표계 상의 위치정보
+   * 화면좌표계를 따르므로 y축은 아래로 갈 수록 증가
+   * 거리는 픽셀 단위
+   **/
+  type Position = {
+    stagex: number;
+    stagey: number;
+    degree: number;
+  };
+
+  type PoseDegree = Pose & {
+    degree: number;
+  };
+
+  type PosePosition = {
+    position: Position;
+    pose: Pose;
+  };
+
+  /** pose + position + 회전을반영한position 을 실시간 반영할 수 있는 프록시 객체 */
+  type PoseProxy = PosePosition & {
+    positionRender: Position;
+  };
+
+  /** 실좌표계의 사격형 넓이 */
+  type AreaMeter = {
+    width: number;
+    height: number;
+  };
+
+  /** 실좌표계의 사격형 넓이와 중심점 위치를 표현 */
+  type PoseArea = Pose & AreaMeter;
+
+  /** 사각형의 넓이와 회전값만을 표현 (위치는 없음) */
+  type PoseDegreeArea = PoseDegree & AreaMeter;
+
+  /** 픽셀 단위계의 사격형 넓이 */
+  type AreaPixel = {
+    widthPx: number;
+    heightPx: number;
+    scaleX: number;
+    scaleY: number;
+  };
+
+  /** 실좌표계와 픽셀좌표계 간 사각형 넓이 단위를 자동으로 변환해 주는 프록시 객체 */
+  type AreaProxy = {
+    area: AreaMeter;
+    areaPixel: AreaPixel;
+  };
+}

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+/// <reference path="./geometry.d.ts" />

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@rocon/balcan",
+  "version": "0.0.1",
+  "description": "",
+  "scripts": {
+    "dev": "tsc -p tsconfig.json --watch --noEmit",
+    "build": "tsc -p tsconfig.build.json && node scripts/postbuild.mjs"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "lodash": "^4.17.21"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.26.0",
+    "@rocon/balcan": "file:./balcan",
+    "@rocon/balcan.monday": "file:./monday",
+    "@types/lodash": "^4.17.16",
+    "@types/node": "^20.5.9",
+    "@typescript-eslint/parser": "^8.30.1",
+    "eslint": "^9.26.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-import-resolver-typescript": "^4.3.2",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-prettier": "^5.4.0",
+    "globals": "^16.1.0",
+    "prettier": "^3.3.3",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.32.1"
+  },
+  "peerDependencies": {
+    "konva": "^9.3.22"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ]
+}