@rocon/balcan 0.1.1 → 1.0.0

package/dist/core/math.balcan.js

@@ -1,5 +1,9 @@
+import { range } from 'lodash';
+import Matrix from './ts-matrix/Matrix';
+/** 일반 수학과 기하학 관련 계산 함수들을 모아둔 네임스페이스 */
 export var math;
 (function (math) {
+    /** 주어진 숫자들의 평균을 구한다 */
     function average(...values) {
         if (values.length === 0)
             return 0;
@@ -74,12 +78,45 @@ export var math;
             return r;
     }
     math.vectorAdd = vectorAdd;
+    /** 벡터 뺄셈 */
+    function vectorSubtract(v1, v2) {
+        const r = { x: v1.x - v2.x, y: v1.y - v2.y };
+        if ('theta' in v1 && 'theta' in v2)
+            return { ...r, theta: v1.theta - v2.theta };
+        else
+            return r;
+    }
+    math.vectorSubtract = vectorSubtract;
+    /** 벡터 곱셈 */
+    function vectorMultiply(v1, scalar) {
+        const r = {
+            ...v1,
+            x: v1.x * scalar,
+            y: v1.y * scalar,
+        };
+        return r;
+    }
+    math.vectorMultiply = vectorMultiply;
+    /** 벡터 나눗셈 */
+    function vectorDivide(v1, scalar) {
+        if (scalar === 0) {
+            console.error('vectorDivide: divide by zero');
+            return v1;
+        }
+        const r = {
+            ...v1,
+            x: v1.x / scalar,
+            y: v1.y / scalar,
+        };
+        return r;
+    }
+    math.vectorDivide = vectorDivide;
     /** 벡터 내적 */
     function vectorDot(v1, v2) {
         return v1.x * v2.x + v1.y * v2.y;
     }
     math.vectorDot = vectorDot;
-    /** position like 자료형을 vector2d 로 변환함 */
+    /** 좌표형 자료형 (Position, Pose) 를 vector2d 로 변환함 */
     function vector2d(point) {
         if ('stagex' in point)
             return { x: point.stagex, y: point.stagey };
@@ -87,4 +124,181 @@ export var math;
             return { x: point.x, y: point.y };
     }
     math.vector2d = vector2d;
+    /** 벡터들 에 회전 행렬 적용 */
+    function rotateVectors(params) {
+        const { x: centerX = 0, y: centerY = 0 } = params?.centerPosition ?? {
+            x: 0,
+            y: 0,
+        };
+        const rad = params?.angleUnit === 'degree'
+            ? math.radian(params.rotateAngle, { invertY: params?.invertY })
+            : params.rotateAngle;
+        const rotationMatrix = new Matrix(2, 2, [
+            [Math.cos(rad), -Math.sin(rad)],
+            [Math.sin(rad), Math.cos(rad)],
+        ]);
+        // 회전중심점과 회전할 점의 거리를 벡터로 표현
+        const vectorMatrix = new Matrix(2, params.points.length, [
+            params.points.map((p) => p.x - centerX),
+            params.points.map((p) => p.y - centerY),
+        ]);
+        const rotatedMatrix = rotationMatrix.multiply(vectorMatrix);
+        const results = range(rotatedMatrix.columns).map((m) => {
+            return {
+                x: rotatedMatrix.values[0][m] + centerX,
+                y: rotatedMatrix.values[1][m] + centerY,
+            };
+        });
+        return results;
+    }
+    math.rotateVectors = rotateVectors;
+    /**
+     * 어떤 점 P와 어떤 선분 S가 있다고 할 때
+     * 선분 S 위에 존재할 수 있는 무수한 점들 중 - P에서 가장 가까운 점 X를 찾는다
+     * @param point 점 위치벡터 P
+     * @param segmentPosition 선분 S의 정의 (양 끝점의 좌표)
+     * @returns X점의 좌표 벡터
+     */
+    function nearestPointOnSegment(point, segmentPosition) {
+        /** 선분 출발점 */
+        const segmentStartPoint = segmentPosition[0];
+        const segmentEndPoint = segmentPosition[1];
+        /** 선분의 방향벡터 */
+        const SegmentVector = {
+            x: segmentEndPoint.x - segmentStartPoint.x,
+            y: segmentEndPoint.y - segmentStartPoint.y,
+        };
+        /** 점에서 선분 출발점으로의 벡터 */
+        const AP = {
+            x: point.x - segmentStartPoint.x,
+            y: point.y - segmentStartPoint.y,
+        };
+        /** 점에서 선분 종점으로의 벡터 */
+        const BP = {
+            x: point.x - segmentEndPoint.x,
+            y: point.y - segmentEndPoint.y,
+        };
+        /** 선분 방향벡터와 점에서 선분 출발점으로의 벡터의 내적 */
+        const dot_AB_AP = SegmentVector.x * AP.x + SegmentVector.y * AP.y;
+        /** 선분 방향벡터와 점에서 선분 종점으로의 벡터의 내적 */
+        const dot_BA_AP = -SegmentVector.x * BP.x - SegmentVector.y * BP.y;
+        // dot_AB_AP + dot_BA_AP = |B - A|² 이므로, 0이면 선분의 길이가 0 (점으로 퇴화)
+        // 부동소수점 연산 오차를 고려하여 매우 작은 값(epsilon) 이하인 경우도 처리
+        const epsilon = 1e-10;
+        const denominator = dot_AB_AP + dot_BA_AP;
+        if (Math.abs(denominator) < epsilon) {
+            // 선분이 너무 짧아 점으로 퇴화된 경우, 시작점을 정답으로 반환
+            // 그렇지 않을 경우 const t 를 계산할떄 divide by zero 에러가 발생할 수 있음
+            return segmentStartPoint;
+        }
+        if (dot_AB_AP <= 0)
+            return segmentStartPoint;
+        else if (dot_BA_AP <= 0)
+            return segmentPosition[1];
+        else {
+            const t = dot_AB_AP / denominator;
+            return {
+                x: segmentStartPoint.x + SegmentVector.x * t,
+                y: segmentStartPoint.y + SegmentVector.y * t,
+            };
+        }
+    }
+    math.nearestPointOnSegment = nearestPointOnSegment;
+    /**
+     * 주어진 점이 주어진 다각형 내부에 있는지 확인
+     * @param point 점의 좌표
+     * @param polygon 다각형의 정의 (점들의 좌표)
+     * @returns 점이 다각형 내부에 있는지 여부
+     */
+    function isPointInPolygon(point, polygon) {
+        let crosses = 0;
+        for (const _i in polygon) {
+            const i = Number(_i);
+            const j = (i + 1) % polygon.length;
+            const p1 = polygon[i];
+            const p2 = polygon[j];
+            // NOTE: p1.y 와 p2.y 가 같은 값이면 if 조건은 만족할 수가 없다
+            // 따라서 if 내에서 p2.y - p1.y 가 0이 되는 경우는 없으므로 divide by zero 에러는 발생할 수 없다
+            if (p1.y > point.y !== p2.y > point.y) {
+                const atx = ((p2.x - p1.x) * (point.y - p1.y)) / (p2.y - p1.y) + p1.x;
+                if (point.x < atx)
+                    crosses += 1;
+            }
+        }
+        return crosses % 2 === 1;
+    }
+    math.isPointInPolygon = isPointInPolygon;
+    /**
+     * originPoint 와 endPoint 를 잇는 선분을 가정하고
+     * extendLength 만큼 양쪽으로 늘이거나 줄인 선분을 반환
+     * (extendLength는 음수일 수도 있음)
+     */
+    function extendSegment(params) {
+        const { originPoint, endPoint, extendLengthFromOrigin, extendLengthFromEnd, } = params;
+        const dx = endPoint.x - originPoint.x;
+        const dy = endPoint.y - originPoint.y;
+        const length = Math.sqrt(dx * dx + dy * dy);
+        // 길이가 0인 경우 그대로 반환
+        if (length === 0) {
+            return { origin: { ...originPoint }, end: { ...endPoint } };
+        }
+        // 단위벡터 (방향 유지, 음수 extendLength면 짧아짐)
+        const ux = dx / length;
+        const uy = dy / length;
+        // 확장된 점 계산 (extendLength가 음수라면 줄어듦)
+        const newOrigin = {
+            x: originPoint.x - ux * extendLengthFromOrigin,
+            y: originPoint.y - uy * extendLengthFromOrigin,
+        };
+        const newEnd = {
+            x: endPoint.x + ux * extendLengthFromEnd,
+            y: endPoint.y + uy * extendLengthFromEnd,
+        };
+        return { origin: newOrigin, end: newEnd };
+    }
+    math.extendSegment = extendSegment;
+    /**
+     * 실좌표계 상 위치 (Pose) 를 화면좌표계로 변환
+     * @param pose 실좌표계 상의 위치
+     * @param origin 원점을 삼으려는 화면좌표계 상 좌표
+     * @param pixelPerMeter 1미터당 픽셀 수
+     */
+    function transformPose(pose, origin, pixelPerMeter) {
+        if (pixelPerMeter === 0) {
+            console.error('transformPosition: pixelPerMeter must be greater than 0');
+            return {
+                stagex: 0,
+                stagey: 0,
+                degree: 0,
+            };
+        }
+        return {
+            stagex: origin.x + pose.x * pixelPerMeter,
+            stagey: origin.y - pose.y * pixelPerMeter,
+            degree: math.degree(pose.theta, { invertY: false }),
+        };
+    }
+    math.transformPose = transformPose;
+    /**
+     * 화면좌표계상 위치를 실좌표계로 변환
+     * @param position
+     * @param realOrigin 원점을 삼으려는 화면좌표계 상 좌표
+     * @param pixelPerMeter 1미터당 픽셀 수
+     */
+    function transformPosition(position, realOrigin, pixelPerMeter) {
+        if (pixelPerMeter === 0) {
+            console.error('transformPosition: pixelPerMeter must be greater than 0');
+            return {
+                x: 0,
+                y: 0,
+                theta: 0,
+            };
+        }
+        return {
+            x: (position.stagex - realOrigin.x) / pixelPerMeter,
+            y: ((position.stagey - realOrigin.y) / pixelPerMeter) * -1,
+            theta: math.radian(position.degree, { invertY: false }),
+        };
+    }
+    math.transformPosition = transformPosition;
 })(math || (math = {}));

package/dist/core/types.balcan.d.ts

@@ -1,7 +1,9 @@
+import type Konva from 'konva';
 import type { Director as DirectorClass } from './core.balcan';
 export type Director = DirectorClass;
+export type BalcanStage = Omit<Konva.Stage, 'scale' | 'scaleX' | 'scaleY'>;
 /**
- * Staff Layer, Canvas 에서 작동하는 특정한 목적을 지닌 최소 로직 집합이다.
+ * Staff, Canvas 에서 작동하는 특정한 목적을 지닌 최소 로직 집합이다.
  * 단, 비지니스 로직을 포함하지 않는 포괄적인 기능을 수행해야 한다.
  *
  * @template TYPE 종류를 나타내는 문자열, type 의 값을 리터럴 형식으로 고정하기 위해 쓰임
@@ -27,13 +29,16 @@ export type Staff<TYPE extends string = any, TData = any, TReturnExtend extends
     addPlugin?: (plugin: Plugin) => void;
     /** 플러그인 제거 */
     removePlugin?: (pluginKey: string) => void;
+    /** staff 가 파괴될때 수행할 로직을 정의할 수 있음 */
     onDestroy?: () => void;
-    onBeforeRender?: () => void;
-    onRender?: () => void;
 } & TReturnExtend;
 /**
- * Actor Layer, 유닛을 조합하여 특정한 목적을 수행하는 로직 집합이다.
+ * Actor, 유닛을 조합하여 특정한 목적을 수행하는 로직 집합이다.
  * 비지니스 로직을 포함 할 수 있다.
+ *
+ * @template TYPE 종류를 나타내는 문자열, type 의 값을 리터럴 형식으로 고정하기 위해 쓰임
+ * @template TData 자체적으로 가지는 추가 데이터 타입, `data` 프로퍼티의 자료형으로 쓰임
+ * @template TReturnExtend 현재 타입을 TReturnExtend 만큼 확장할 수 있음
  */
 export type Actor<TYPE extends string = any, TData = any, TReturnExtend extends {
     [key: string]: unknown;
@@ -52,13 +57,14 @@ export type Actor<TYPE extends string = any, TData = any, TReturnExtend extends
     addPlugin?: (plugin: Plugin) => void;
     removePlugin?: (pluginKey: string) => void;
     onDestroy?: () => void;
-    onBeforeRender?: () => void;
-    onRender?: () => void;
-    onUpdate?: () => void;
 } & TReturnExtend;
 /**
- * Scene Layer
+ * Scene
  * 각 화면의 요구사항이 구현된 로직 집합체
+ *
+ * @template TYPE 종류를 나타내는 문자열, type 의 값을 리터럴 형식으로 고정하기 위해 쓰임
+ * @template TData 자체적으로 가지는 추가 데이터 타입, `data` 프로퍼티의 자료형으로 쓰임
+ * @template TReturnExtend 현재 타입을 TReturnExtend 만큼 확장할 수 있음
  */
 export type Scene<TYPE extends string = any, TData = any, TReturnExtend extends {
     [key: string]: unknown;
@@ -71,19 +77,20 @@ export type Scene<TYPE extends string = any, TData = any, TReturnExtend extends
     data: TData;
     /** 앱이 소속되는 스테이지 객체 */
     director: Director;
+    onDestroy: () => void;
 } & TReturnExtend;
 /**
  * 플러그인 정의, 실제 사용할 때는 확장해서 사용 권장
- * @template T 플러그인이 자체적으로 가지는 추가 데이터 타입
+ *
+ * @template TYPE 종류를 나타내는 문자열, type 의 값을 리터럴 형식으로 고정하기 위해 쓰임
+ * @template TData 자체적으로 가지는 추가 데이터 타입, `data` 프로퍼티의 자료형으로 쓰임
  */
 export interface Plugin<TYPE extends string = any, TData = any> {
     type: TYPE;
     /** 스테이지 위에 추가되는 plugin 은 다른 plugin 과 배타적인 유일값을 가져야 함 */
     uniqueId: string;
     data: TData;
-    onBeforeRender?: () => void;
-    onRender?: () => void;
-    onUpdate?: (newData: TData) => void;
+    onUpdate: (newData: TData) => void;
 }
 export type onTransformCallback = {
     x: number;

package/dist/core/util.balcan.d.ts

@@ -1,23 +1,28 @@
+import type { BalcanTypes } from '..';
 import type Konva from 'konva';
+import type { KonvaEventObject } from 'konva/lib/Node';
+import type { BalcanStage } from './types.balcan';
 export declare namespace util {
     /**
      * Konva Shape 나 Group에 마우스가 올라갔을 때 커서 모양을 바꿔주는 이벤트를 등록한다
      * @param shapes 등록할 Konva Shape 들
      */
     function enableMouseHoverEvent(params: {
-        shapes: (Konva.Shape | Konva.Group)[];
+        shapes: Konva.Node[];
         cursorStyle?: string;
-        additionalHoverEvent?: (shape: Konva.Shape | Konva.Group) => void;
-        additionalLeaveEvent?: (shape: Konva.Shape | Konva.Group) => void;
+        additionalHoverEvent?: (shape: Konva.Node) => void;
+        additionalLeaveEvent?: (shape: Konva.Node) => void;
     }): void;
-    function changeMouseCursor(stage: Konva.Stage, cursorStyle: string): void;
     /** Konva Shape 나 Group에 걸려있는 모든 이벤트를 제거한다 */
-    function disableAllEvents(...shapes: (Konva.Shape | Konva.Group)[]): void;
-    function uuid(): string;
-    function pickShape(stage: Konva.Stage): import("konva/lib/Shape").Shape<import("konva/lib/Shape").ShapeConfig> | null;
+    function disableAllEvents(...shapes: Konva.Node[]): void;
+    /** 마우스 위치에 있는 첫 번째 shape 를 가져온다 */
+    function pickShape(stage: BalcanStage): import("konva/lib/Shape").Shape<import("konva/lib/Shape").ShapeConfig> | null;
     /** 마우스 위치에 있는 모든 shape 목록을 가져온다 */
-    function pickShapes(stage: Konva.Stage): import("konva/lib/Shape").Shape<import("konva/lib/Shape").ShapeConfig>[];
+    function pickShapes(stage: BalcanStage): import("konva/lib/Shape").Shape<import("konva/lib/Shape").ShapeConfig>[];
     /** 현재 마우스포인터의 pose + position 계산 */
-    function getPointerPosePosition(stage: Konva.Stage, originPoint: BalcanGeo.Vector2 | BalcanGeo.Pose, pixelPerMeter: number): BalcanGeo.PosePosition;
+    function getPointerPosePosition(director: BalcanTypes.Director, originPoint: BalcanGeo.Vector2 | BalcanGeo.Pose, pixelPerMeter: number): BalcanGeo.PosePosition;
+    /** 랜덤 16진수 색상 코드를 생성한다 */
     function randomHexColorCode(): string;
+    function doubleClickEvent(shape: Konva.Node, onDoubleClicked: (e: KonvaEventObject<MouseEvent, Konva.Node>) => void): void;
+    function stageDoubleClickEvent(stage: Konva.Stage, onDoubleClicked: (e: KonvaEventObject<MouseEvent, Konva.Stage>) => void): void;
 }

package/dist/core/util.balcan.js

@@ -1,4 +1,4 @@
-import { geo } from './geo.balcan';
+import { math } from './math.balcan';
 export var util;
 (function (util) {
     /**
@@ -18,19 +18,12 @@ export var util;
         });
     }
     util.enableMouseHoverEvent = enableMouseHoverEvent;
-    function changeMouseCursor(stage, cursorStyle) {
-        stage.container().style.cursor = cursorStyle;
-    }
-    util.changeMouseCursor = changeMouseCursor;
     /** Konva Shape 나 Group에 걸려있는 모든 이벤트를 제거한다 */
     function disableAllEvents(...shapes) {
         shapes.forEach((shape) => shape.off('mouseover mouseleave mouseout dragmove transform click dblclick mouseup mousedown'));
     }
     util.disableAllEvents = disableAllEvents;
-    function uuid() {
-        return Math.random().toString(16).slice(2);
-    }
-    util.uuid = uuid;
+    /** 마우스 위치에 있는 첫 번째 shape 를 가져온다 */
     function pickShape(stage) {
         const picked = stage.getIntersection(stage.getPointerPosition() ?? {
             x: 0,
@@ -49,23 +42,51 @@ export var util;
     }
     util.pickShapes = pickShapes;
     /** 현재 마우스포인터의 pose + position 계산 */
-    function getPointerPosePosition(stage, originPoint, pixelPerMeter) {
-        const pointer = stage.getRelativePointerPosition();
+    function getPointerPosePosition(director, originPoint, pixelPerMeter) {
+        if (!director.isPointerOverStage)
+            return {
+                pose: { x: 0, y: 0, theta: 0 },
+                position: { stagex: 0, stagey: 0, degree: 0 },
+            };
+        const pointer = director.stage.getRelativePointerPosition();
         const position = {
             stagex: pointer?.x ?? 0,
             stagey: pointer?.y ?? 0,
             degree: 0,
         };
-        const pose = geo.transformPosition(position, originPoint, pixelPerMeter);
+        const pose = math.transformPosition(position, originPoint, pixelPerMeter);
         return {
             pose,
             position,
         };
     }
     util.getPointerPosePosition = getPointerPosePosition;
+    /** 랜덤 16진수 색상 코드를 생성한다 */
     function randomHexColorCode() {
         return ('#' +
             ('00000' + Math.floor(Math.random() * Math.pow(16, 6)).toString(16)).slice(-6));
     }
     util.randomHexColorCode = randomHexColorCode;
+    function doubleClickEvent(shape, onDoubleClicked) {
+        shape.on('dblclick', innerMainFunc);
+        function innerMainFunc(e) {
+            if (e.evt.button !== 0)
+                return;
+            onDoubleClicked(e);
+            shape.off('dblclick');
+            setTimeout(() => doubleClickEvent(shape, onDoubleClicked), 400);
+        }
+    }
+    util.doubleClickEvent = doubleClickEvent;
+    function stageDoubleClickEvent(stage, onDoubleClicked) {
+        stage.on('dblclick', innerMainFunc);
+        function innerMainFunc(e) {
+            if (e.evt.button !== 0)
+                return;
+            onDoubleClicked(e);
+            stage.off('dblclick');
+            setTimeout(() => stageDoubleClickEvent(stage, onDoubleClicked), 400);
+        }
+    }
+    util.stageDoubleClickEvent = stageDoubleClickEvent;
 })(util || (util = {}));

package/dist/index.d.ts

@@ -1,13 +1,5 @@
 /// <reference path="./types/index.d.ts" />
 import * as balcan from './mixin/mixin';
 import type * as BalcanTypes from './mixin/mixin.type';
-export declare const Balcan: {
-    core: typeof balcan.core;
-    staffs: typeof balcan.staffs;
-    geo: typeof balcan.geo;
-    math: typeof balcan.math;
-    util: typeof balcan.util;
-    viewport: typeof balcan.viewport;
-    bitmap: typeof balcan.bitmap;
-};
+export declare const Balcan: typeof balcan;
 export type { BalcanTypes };

package/dist/index.js

@@ -1,3 +1,3 @@
 /// <reference path="./types/index.d.ts" />
 import * as balcan from './mixin/mixin';
-export const Balcan = { ...balcan };
+export const Balcan = balcan;

package/dist/mixin/mixin.d.ts

@@ -1,7 +1,5 @@
 export * as core from '../core/core.balcan';
 export * as staffs from '../staffs';
-export * from '../core/geo.balcan';
 export * from '../core/math.balcan';
 export * from '../core/util.balcan';
-export * from '../core/viewport.balcan';
 export * from '../core/bitmap.balcan';

package/dist/mixin/mixin.js

@@ -1,7 +1,5 @@
 export * as core from '../core/core.balcan';
 export * as staffs from '../staffs';
-export * from '../core/geo.balcan';
 export * from '../core/math.balcan';
 export * from '../core/util.balcan';
-export * from '../core/viewport.balcan';
 export * from '../core/bitmap.balcan';

package/dist/staffs/index.d.ts

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

package/dist/staffs/index.js

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

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

@@ -0,0 +1,14 @@
+import type { Staff, Director } from '../core/types.balcan';
+export type BalcanResizeObserverStaff = Staff<'resizeobserver'>;
+/**
+ * Canvas 의 크기가 변경되었을 때 자동으로 konva stage 의 크기를 변경해줍니다.
+ * 이 함수를 한번 부르기만 하면 로직이 적용 됩니다.
+ */
+export declare function useResizeObserverStaff(opt: {
+    /** 임의로 고유 id 를 넣을 수 있음 */
+    uuid?: string;
+    /** 이 staff 를 소속시킬 Balcan Director */
+    director: Director;
+    /** 리사이즈 감지되었을 때 추가로 실행하고 싶은 함수 */
+    onResizeFunction?: () => void;
+}): BalcanResizeObserverStaff;

package/dist/staffs/resizeObserver.staff.js

@@ -0,0 +1,28 @@
+/**
+ * Canvas 의 크기가 변경되었을 때 자동으로 konva stage 의 크기를 변경해줍니다.
+ * 이 함수를 한번 부르기만 하면 로직이 적용 됩니다.
+ */
+export function useResizeObserverStaff(opt) {
+    const container = document.querySelector(opt.director.name);
+    const observer = new ResizeObserver(resizeHandler);
+    observer.observe(container);
+    function resizeHandler() {
+        opt.director.stage.width(container.clientWidth);
+        opt.director.stage.height(container.clientHeight);
+        opt.onResizeFunction?.();
+    }
+    opt.onResizeFunction?.();
+    const me = {
+        type: 'resizeobserver',
+        director: opt.director,
+        entityId: opt.uuid ?? '',
+        uniqueId: 'resizeobserver' + (opt.uuid ? `-${opt.uuid}` : ''),
+        plugins: [],
+        data: {},
+        onDestroy() {
+            observer.disconnect();
+        },
+    };
+    opt.director.addStaff(me);
+    return me;
+}

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

@@ -2,9 +2,13 @@ import type { Director } from '../core/types.balcan';
 export type BalcanZoomStaff = ReturnType<typeof useWheelZoomStaff>;
 /** 마우스 휠로 줌 인/아웃을 조작할 수 있는 Staff */
 export declare function useWheelZoomStaff(opt: {
+    /** 임의로 고유 id 를 넣을 수 있음 */
     uuid: string;
+    /** 이 staff 를 소속시킬 Balcan Director */
     director: Director;
+    /** 최소 줌 인 값, 기본값은 0.2 */
     minScale?: number;
+    /** 최대 줌 인 값, 기본값은 3 */
     maxScale?: number;
 }): {
     type: "zoom";
@@ -16,6 +20,4 @@ export declare function useWheelZoomStaff(opt: {
     addPlugin?: (plugin: import("../core/types.balcan").Plugin) => void;
     removePlugin?: (pluginKey: string) => void;
     onDestroy?: () => void;
-    onBeforeRender?: () => void;
-    onRender?: () => void;
 };

package/dist/staffs/wheelZoom.staff.js

@@ -9,17 +9,17 @@ export function useWheelZoomStaff(opt) {
         plugins: [],
         data: {},
         onDestroy() {
-            director.stage.off('wheel');
+            director.stage.off('wheel', handleWheel);
         },
     };
-    director.stage.on('wheel', (e) => {
+    director.stage.on('wheel', handleWheel);
+    function handleWheel(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));

package/dist/types/geometry.d.ts

@@ -49,9 +49,6 @@ declare namespace BalcanGeo {
   /** 실좌표계의 사격형 넓이와 중심점 위치를 표현 */
   type PoseArea = Pose & AreaMeter;
 
-  /** 사각형의 넓이와 회전값만을 표현 (위치는 없음) */
-  type PoseDegreeArea = PoseDegree & AreaMeter;
-
   /** 픽셀 단위계의 사격형 넓이 */
   type AreaPixel = {
     widthPx: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocon/balcan",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "",
   "scripts": {
     "dev": "tsc -p tsconfig.json --watch --noEmit",
@@ -9,9 +9,6 @@
   },
   "author": "",
   "license": "ISC",
-  "dependencies": {
-    "lodash": "^4.17.21"
-  },
   "devDependencies": {
     "@eslint/js": "^9.26.0",
     "@types/lodash": "^4.17.16",
@@ -25,10 +22,11 @@
     "globals": "^16.1.0",
     "prettier": "^3.3.3",
     "typescript": "~5.8.3",
-    "typescript-eslint": "^8.32.1"
+    "typescript-eslint": "^8.32.1",
+    "lodash": "^4.17.21"
   },
   "peerDependencies": {
-    "konva": "^9.3.22"
+    "konva": "^10.2.5"
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",