@rocon/balcan 0.1.1 → 1.0.0

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

@@ -1,3 +1,4 @@
+/** 비트맵 처리 관련 함수 */
 export declare namespace bitmap {
     /** data URL 이미지를 상하 반전한 새 data URL 반환 */
     function flipVertical(dataUrl: string): Promise<string>;

package/dist/core/bitmap.balcan.js

@@ -1,3 +1,4 @@
+/** 비트맵 처리 관련 함수 */
 export var bitmap;
 (function (bitmap) {
     /** data URL 이미지를 상하 반전한 새 data URL 반환 */

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

@@ -1,40 +1,78 @@
-import type Konva from 'konva';
 import type { KonvaEventObject } from 'konva/lib/Node';
+import Konva from 'konva';
 import { Subject } from 'rxjs';
-import type { Scene, Actor, Staff } from './types.balcan';
-export declare function useBalcan(): {
-    createDirector: (name: string, stage: Konva.Stage) => Director | undefined;
-    directors: Readonly<{
-        [k: string]: Director;
-    }>;
-};
+import type { Actor, BalcanStage, Scene, Staff } from './types.balcan';
+/**
+ * 새 Director 를 생성
+ * @param divQuerySelector Konva.Stage 가 생성될 div 의 querySelector
+ */
+export declare function createDirector(divQuerySelector: string): Director | undefined;
+export declare function getDirector(divQuerySelector: string): Director | undefined;
+/**
+ * 기존 Director 를 회수합니다
+ * @param divQuerySelector Director 가 생성된 div 의 querySelector
+ */
+export declare function destroyDirector(divQuerySelector: string): void;
+/**
+ * 디렉터는 하나의 Konva.Stage 와 그 위에 올라올 수 있는 Balcan 요소들을 Containing 합니다.
+ * Konva.Stage 는 보통 하나의 div 에 매칭되기 때문에 Director 역시 하나의 Div와 매칭된다고 봐도 좋습니다.
+ */
 export declare class Director {
     readonly name: string;
-    readonly stage: Konva.Stage;
-    scenes: {
+    readonly _stage: Konva.Stage;
+    private _isPointerOverStage;
+    readonly scenes: {
         [k: string]: Scene;
     };
-    actors: {
+    readonly actors: {
         [k: string]: Actor;
     };
-    staffs: {
+    readonly staffs: {
         [k: string]: Staff;
     };
     constructor(name: string, stage: Konva.Stage);
-    private _doubleClickEvent;
+    /** 내부의 모든 자원을 회수합니다 */
+    dispose(): void;
+    private _clickHandler;
+    /**
+     * 이 클래스의 set scale 을 사용하여 스케일 변경시 발생하는 이벤트
+     */
     onScaleChanged$: Subject<{
         scale: number;
     }>;
-    onMouseDoubleClicked$: Subject<KonvaEventObject<MouseEvent, import("konva/lib/Stage").Stage>>;
+    /**
+     * stage 에서 더블 클릭 이벤트
+     */
+    onMouseDoubleClicked$: Subject<KonvaEventObject<MouseEvent, BalcanStage>>;
+    /**
+     * stage 에서 키보드 down 이벤트
+     */
     onKeyDown$: Subject<KeyboardEvent>;
+    /** addEventListener 로 등록 시 일반 메서드는 this 가 컨테이너로 바뀌므로 화살표로 바인딩 */
+    private _keydownHandler;
+    private _mouseenterHandler;
+    private _mouseleaveHandler;
+    /**
+     * director 에 scene 을 추가하는 메서드
+     */
     addScene(scene: Scene): {
         type: any;
         uniqueId: string;
         data: any;
         director: import("./types.balcan").Director;
+        onDestroy: () => void;
     };
+    /**
+     * stage 에서 scene 을 제거합니다. scene 에서 정의한 onDestory 를 호출해서 클리어를 유도 합니다
+     */
     removeScene(uniqueId: string): void;
+    /**
+     * stage 에서 모든 scene 을 제거합니다.
+     */
     removeAllScenes(): void;
+    /**
+     * stage 에 actor 을 추가합니다.
+     */
     addActor(actor: Actor): {
         type: any;
         entityId: string;
@@ -45,13 +83,22 @@ export declare class Director {
         addPlugin?: (plugin: import("./types.balcan").Plugin) => void;
         removePlugin?: (pluginKey: string) => void;
         onDestroy?: () => void;
-        onBeforeRender?: () => void;
-        onRender?: () => void;
-        onUpdate?: () => void;
     };
+    /**
+     * actor 의 id 를 변경할 수 있습니다
+     */
     changeActorId(oldId: string, newId: string): void;
+    /**
+     * stage 에서 actor 을 제거합니다. actor 에서 정의한 onDestory 를 호출해서 클리어를 유도 합니다
+     */
     removeActor(uniqueId: string): void;
+    /**
+     * stage 에서 모든 actor 을 제거합니다.
+     */
     removeAllActors(): void;
+    /**
+     * stage 에 staff 을 추가합니다.
+     */
     addStaff(staff: Staff): {
         type: any;
         entityId: string;
@@ -62,12 +109,66 @@ export declare class Director {
         addPlugin?: (plugin: import("./types.balcan").Plugin) => void;
         removePlugin?: (pluginKey: string) => void;
         onDestroy?: () => void;
-        onBeforeRender?: () => void;
-        onRender?: () => void;
     };
+    /**
+     * stage 에서 모든 staff 을 제거합니다.
+     */
     removeAllStaffs(): void;
+    /**
+     * stage 에서 staff 을 제거합니다. staff 에서 정의한 onDestory 를 호출해서 클리어를 유도 합니다
+     */
     removeStaff(uniqueId: string): void;
+    get stage(): BalcanStage;
+    /** 마우스 포인터가 stage(div) 위에 있는지 여부 */
+    get isPointerOverStage(): boolean;
+    /**
+     * stage 의 현재 scale 을 반환합니다
+     */
     get scale(): number;
+    /**
+     * stage 의 scale 을 변경합니다
+     */
     set scale(scale: number);
-    render(): void;
+    /** 마우스 커서 모양을 변경한다 */
+    changeMouseCursor(cursorStyle: string): void;
+    /** 현재 마우스 위치에 있는 첫 번째 shape 를 가져온다 */
+    pickShape(): import("konva/lib/Shape").Shape<import("konva/lib/Shape").ShapeConfig> | null;
+    /** 현재 마우스 위치에 있는 모든 shape 목록을 가져온다 */
+    pickShapes(): import("konva/lib/Shape").Shape<import("konva/lib/Shape").ShapeConfig>[];
+    /** 현재 마우스포인터의 pose + position 계산 */
+    getPointerPosePosition(originPoint: BalcanGeo.Vector2 | BalcanGeo.Pose, pixelPerMeter: number): BalcanGeo.PosePosition;
+    /** 여러 포지션을 변환하는 도구모음 클로져 */
+    positionConverter(): {
+        /** viewport 의 중심점은 월드좌표의 어디에 해당하는지 계산함 */
+        viewportCenterToWorld(): {
+            x: number;
+            y: number;
+        };
+        /** viewport 좌표를 월드좌표로 변환함 */
+        viewportToWorld(vector: BalcanGeo.Vector2): {
+            x: number;
+            y: number;
+        };
+        /** 월드좌표를 viewport 좌표로 변환함 */
+        worldToViewport(vector: BalcanGeo.Vector2): BalcanGeo.Vector2;
+    };
+    /**
+     * 어떠한 위치를 지정하여 viewport 의 중앙으로 가져다 놓는다
+     * (= 카메라 초점을 어떠한 위치로 이동한다)
+     */
+    moveCamera(params: MoveCameraParams): void;
 }
+type MoveCameraParams = {
+    /** 지정한 shape 로 카메라를 이동함 */
+    type: 'shape';
+    shape: Konva.Shape | Konva.Group;
+} | {
+    /** 지정한 viewport 좌표로 카메라를 이동함 */
+    type: 'viewportPosition';
+    vector: BalcanGeo.Vector2;
+} | {
+    /** 지정한 월드 좌표로 카메라를 이동함 */
+    type: 'worldPosition';
+    vector: BalcanGeo.Vector2;
+};
+export {};

package/dist/core/core.balcan.js

@@ -1,61 +1,123 @@
+import Konva from 'konva';
 import { Subject } from 'rxjs';
-function balcanStore() {
-    const _directors = {};
-    function addDirector(director) {
-        _directors[director.name] = director;
-    }
-    return {
-        directors: _directors,
-        addDirector,
-    };
+import { math } from './math.balcan';
+import { util } from './util.balcan';
+const directors = {};
+/**
+ * 새 Director 를 생성
+ * @param divQuerySelector Konva.Stage 가 생성될 div 의 querySelector
+ */
+export function createDirector(divQuerySelector) {
+    if (divQuerySelector in directors) {
+        console.error('Director with the same name already exists.');
+        return directors[divQuerySelector];
+    }
+    const div = document.querySelector(divQuerySelector);
+    if (!div) {
+        console.error('Div element not found.');
+        return undefined;
+    }
+    const stage = new Konva.Stage({
+        container: div,
+        width: div.clientWidth,
+        height: div.clientHeight,
+        draggable: true,
+    });
+    const director = new Director(divQuerySelector, stage);
+    directors[divQuerySelector] = director;
+    return director;
 }
-const $store = balcanStore();
-export function useBalcan() {
-    return {
-        createDirector,
-        directors: $store.directors,
-    };
-    function createDirector(name, stage) {
-        if (!stage) {
-            console.error('Konva Stage is required to create a new stage.');
-            return undefined;
-        }
-        const director = new Director(name, stage);
-        $store.addDirector(director);
-        return director;
+export function getDirector(divQuerySelector) {
+    if (!(divQuerySelector in directors)) {
+        console.error(`Director with the name ${divQuerySelector} not found.`);
+        return undefined;
     }
+    return directors[divQuerySelector];
+}
+/**
+ * 기존 Director 를 회수합니다
+ * @param divQuerySelector Director 가 생성된 div 의 querySelector
+ */
+export function destroyDirector(divQuerySelector) {
+    const director = directors[divQuerySelector];
+    director?.dispose();
+    delete directors[divQuerySelector];
 }
+/**
+ * 디렉터는 하나의 Konva.Stage 와 그 위에 올라올 수 있는 Balcan 요소들을 Containing 합니다.
+ * Konva.Stage 는 보통 하나의 div 에 매칭되기 때문에 Director 역시 하나의 Div와 매칭된다고 봐도 좋습니다.
+ */
 export class Director {
     name;
-    stage;
+    _stage;
+    _isPointerOverStage = false;
     scenes;
     actors;
     staffs;
     constructor(name, stage) {
         this.name = name;
-        this.stage = stage;
+        this._stage = stage;
         this.staffs = {};
         this.scenes = {};
         this.actors = {};
-        this._doubleClickEvent();
-        stage.container().addEventListener('keydown', (e) => {
-            this.onKeyDown$.next(e);
-        });
-        stage.on('click', () => {
-            stage.container().tabIndex = 1;
-            stage.container().focus();
-        });
-    }
-    _doubleClickEvent() {
-        this.stage.on('dblclick', (e) => {
+        util.stageDoubleClickEvent(stage, (e) => {
             this.onMouseDoubleClicked$.next(e);
-            this.stage.off('dblclick');
-            setTimeout(() => this._doubleClickEvent(), 400);
         });
+        stage.container().addEventListener('keydown', this._keydownHandler);
+        stage.container().addEventListener('mouseenter', this._mouseenterHandler);
+        stage.container().addEventListener('mouseleave', this._mouseleaveHandler);
+        stage.on('click', this._clickHandler);
+    }
+    /** 내부의 모든 자원을 회수합니다 */
+    dispose() {
+        this.removeAllScenes();
+        this.removeAllActors();
+        this.removeAllStaffs();
+        this._stage
+            .container()
+            .removeEventListener('keydown', this._keydownHandler);
+        this._stage
+            .container()
+            .removeEventListener('mouseenter', this._mouseenterHandler);
+        this._stage
+            .container()
+            .removeEventListener('mouseleave', this._mouseleaveHandler);
+        this._stage.off('click', this._clickHandler);
+        this._stage.off('dblclick');
+        this._stage.destroyChildren();
+        this._stage.destroy();
+        delete directors[this.name];
     }
+    _clickHandler(e) {
+        e.currentTarget.container().tabIndex = 1;
+        e.currentTarget.container().focus();
+    }
+    /**
+     * 이 클래스의 set scale 을 사용하여 스케일 변경시 발생하는 이벤트
+     */
     onScaleChanged$ = new Subject();
+    /**
+     * stage 에서 더블 클릭 이벤트
+     */
     onMouseDoubleClicked$ = new Subject();
+    /**
+     * stage 에서 키보드 down 이벤트
+     */
     onKeyDown$ = new Subject();
+    /** addEventListener 로 등록 시 일반 메서드는 this 가 컨테이너로 바뀌므로 화살표로 바인딩 */
+    _keydownHandler = (e) => {
+        if (this.onKeyDown$)
+            this.onKeyDown$.next(e);
+    };
+    _mouseenterHandler = () => {
+        this._isPointerOverStage = true;
+    };
+    _mouseleaveHandler = () => {
+        this._isPointerOverStage = false;
+    };
+    /**
+     * director 에 scene 을 추가하는 메서드
+     */
     addScene(scene) {
         if (this.scenes[scene.uniqueId]) {
             console.error('Scene with the same uniqueId already exists.');
@@ -64,19 +126,31 @@ export class Director {
         this.scenes[scene.uniqueId] = scene;
         return scene;
     }
+    /**
+     * stage 에서 scene 을 제거합니다. scene 에서 정의한 onDestory 를 호출해서 클리어를 유도 합니다
+     */
     removeScene(uniqueId) {
-        // this.scenes[uniqueId]?.onDestroy?.();
+        this.scenes[uniqueId]?.onDestroy();
         delete this.scenes[uniqueId];
     }
+    /**
+     * stage 에서 모든 scene 을 제거합니다.
+     */
     removeAllScenes() {
         Object.keys(this.scenes).forEach((k) => {
             this.removeScene(k);
         });
     }
+    /**
+     * stage 에 actor 을 추가합니다.
+     */
     addActor(actor) {
         this.actors[actor.uniqueId] = actor;
         return actor;
     }
+    /**
+     * actor 의 id 를 변경할 수 있습니다
+     */
     changeActorId(oldId, newId) {
         const actor = this.actors[oldId];
         if (!actor)
@@ -85,52 +159,159 @@ export class Director {
         this.actors[newId] = actor;
         delete this.actors[oldId];
     }
+    /**
+     * stage 에서 actor 을 제거합니다. actor 에서 정의한 onDestory 를 호출해서 클리어를 유도 합니다
+     */
     removeActor(uniqueId) {
         this.actors[uniqueId]?.onDestroy?.();
         delete this.actors[uniqueId];
     }
+    /**
+     * stage 에서 모든 actor 을 제거합니다.
+     */
     removeAllActors() {
         Object.keys(this.actors).forEach((k) => {
             this.removeActor(k);
         });
     }
+    /**
+     * stage 에 staff 을 추가합니다.
+     */
     addStaff(staff) {
         this.staffs[staff.uniqueId] = staff;
         return staff;
     }
+    /**
+     * stage 에서 모든 staff 을 제거합니다.
+     */
     removeAllStaffs() {
         Object.keys(this.staffs).forEach((k) => {
             this.removeStaff(k);
         });
     }
+    /**
+     * stage 에서 staff 을 제거합니다. staff 에서 정의한 onDestory 를 호출해서 클리어를 유도 합니다
+     */
     removeStaff(uniqueId) {
         this.staffs[uniqueId]?.onDestroy?.();
         delete this.staffs[uniqueId];
     }
+    get stage() {
+        return this._stage;
+    }
+    /** 마우스 포인터가 stage(div) 위에 있는지 여부 */
+    get isPointerOverStage() {
+        return this._isPointerOverStage;
+    }
+    /**
+     * stage 의 현재 scale 을 반환합니다
+     */
     get scale() {
-        return this.stage.scale().x;
+        return this._stage.scale().x;
     }
+    /**
+     * stage 의 scale 을 변경합니다
+     */
     set scale(scale) {
-        this.stage.scale({
+        this._stage.scale({
             x: scale,
             y: scale,
         });
         this.onScaleChanged$.next({ scale });
     }
-    render() {
-        for (const uniqueId in this.staffs) {
-            const staff = this.staffs[uniqueId];
-            staff.onBeforeRender?.();
-            staff.plugins.forEach((x) => x.onBeforeRender?.());
-            staff.onRender?.();
-            staff.plugins.forEach((x) => x.onRender?.());
+    /** 마우스 커서 모양을 변경한다 */
+    changeMouseCursor(cursorStyle) {
+        this.stage.container().style.cursor = cursorStyle;
+    }
+    /** 현재 마우스 위치에 있는 첫 번째 shape 를 가져온다 */
+    pickShape() {
+        return this.stage.getIntersection(this.stage.getPointerPosition() ?? {
+            x: 0,
+            y: 0,
+        });
+    }
+    /** 현재 마우스 위치에 있는 모든 shape 목록을 가져온다 */
+    pickShapes() {
+        return this.stage.getAllIntersections(this.stage.getPointerPosition() ?? {
+            x: 0,
+            y: 0,
+        });
+    }
+    /** 현재 마우스포인터의 pose + position 계산 */
+    getPointerPosePosition(originPoint, pixelPerMeter) {
+        if (!this.isPointerOverStage) {
+            return {
+                pose: {
+                    x: 0,
+                    y: 0,
+                    theta: 0,
+                },
+                position: {
+                    stagex: 0,
+                    stagey: 0,
+                    degree: 0,
+                },
+            };
+        }
+        const pointer = this.stage.getRelativePointerPosition();
+        const position = {
+            stagex: pointer?.x ?? 0,
+            stagey: pointer?.y ?? 0,
+            degree: 0,
+        };
+        const pose = math.transformPosition(position, originPoint, pixelPerMeter);
+        return {
+            pose,
+            position,
+        };
+    }
+    /** 여러 포지션을 변환하는 도구모음 클로져 */
+    positionConverter() {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const director = this;
+        return {
+            /** viewport 의 중심점은 월드좌표의 어디에 해당하는지 계산함 */
+            viewportCenterToWorld() {
+                return this.viewportToWorld({
+                    x: director.stage.width() / 2,
+                    y: director.stage.height() / 2,
+                });
+            },
+            /** viewport 좌표를 월드좌표로 변환함 */
+            viewportToWorld(vector) {
+                const offset = math.vectorSubtract(vector, director.stage.getAbsolutePosition());
+                return math.vectorDivide(offset, director.scale);
+            },
+            /** 월드좌표를 viewport 좌표로 변환함 */
+            worldToViewport(vector) {
+                const scaledOffset = math.vectorMultiply(vector, director.scale);
+                return math.vectorAdd(director.stage.getAbsolutePosition(), scaledOffset);
+            },
+        };
+    }
+    /**
+     * 어떠한 위치를 지정하여 viewport 의 중앙으로 가져다 놓는다
+     * (= 카메라 초점을 어떠한 위치로 이동한다)
+     */
+    moveCamera(params) {
+        if (params.type === 'viewportPosition') {
+            const moveVector = math.vectorSubtract({
+                x: this.stage.width() / 2,
+                y: this.stage.height() / 2,
+            }, params.vector);
+            this.stage.absolutePosition(math.vectorAdd(this.stage.getAbsolutePosition(), moveVector));
+        }
+        if (params.type === 'worldPosition') {
+            const centerWorldPosition = this.positionConverter().viewportCenterToWorld();
+            const moveVector = math.vectorSubtract(centerWorldPosition, params.vector);
+            const scaledMoveVector = math.vectorMultiply(moveVector, this.scale);
+            this.stage.absolutePosition(math.vectorAdd(this.stage.getAbsolutePosition(), scaledMoveVector));
         }
-        for (const uniqueId in this.actors) {
-            const actor = this.actors[uniqueId];
-            actor.onBeforeRender?.();
-            actor.plugins.forEach((x) => x.onBeforeRender?.());
-            actor.onRender?.();
-            actor.plugins.forEach((x) => x.onRender?.());
+        else if (params.type === 'shape') {
+            this.moveCamera({
+                type: 'viewportPosition',
+                vector: params.shape.getAbsolutePosition(),
+            });
         }
     }
 }

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

@@ -1,4 +1,6 @@
+/** 일반 수학과 기하학 관련 계산 함수들을 모아둔 네임스페이스 */
 export declare namespace math {
+    /** 주어진 숫자들의 평균을 구한다 */
     function average(...values: number[]): number;
     function radian(deg: number, opt?: {
         invertY?: boolean;
@@ -28,8 +30,73 @@ export declare namespace math {
     }): number;
     /** 벡터 덧셈 */
     function vectorAdd<T extends BalcanGeo.Vector2 | BalcanGeo.Pose>(v1: T, v2: T): T;
+    /** 벡터 뺄셈 */
+    function vectorSubtract<T extends BalcanGeo.Vector2 | BalcanGeo.Pose>(v1: T, v2: T): T;
+    /** 벡터 곱셈 */
+    function vectorMultiply<T extends BalcanGeo.Vector2 | BalcanGeo.Pose>(v1: T, scalar: number): T;
+    /** 벡터 나눗셈 */
+    function vectorDivide<T extends BalcanGeo.Vector2 | BalcanGeo.Pose>(v1: T, scalar: number): T;
     /** 벡터 내적 */
     function vectorDot<T extends BalcanGeo.Vector2 | BalcanGeo.Pose>(v1: T, v2: T): number;
-    /** position like 자료형을 vector2d 로 변환함 */
+    /** 좌표형 자료형 (Position, Pose) 를 vector2d 로 변환함 */
     function vector2d<T extends BalcanGeo.Vector2 | BalcanGeo.Position | BalcanGeo.Pose>(point: T): BalcanGeo.Vector2;
+    /** 벡터들 에 회전 행렬 적용 */
+    function rotateVectors(params: {
+        /** 회전할 점들 */
+        points: BalcanGeo.Vector2[];
+        /** 회전 각도 */
+        rotateAngle: number;
+        /** 회전 각도 단위 */
+        angleUnit?: 'degree' | 'radian';
+        /** 중심점 */
+        centerPosition?: BalcanGeo.Vector2;
+        /** Y방향 반전? true 를 할경우 회전방향이 시계방향이 되는 효과가 있음. */
+        invertY?: boolean;
+    }): {
+        x: number;
+        y: number;
+    }[];
+    /**
+     * 어떤 점 P와 어떤 선분 S가 있다고 할 때
+     * 선분 S 위에 존재할 수 있는 무수한 점들 중 - P에서 가장 가까운 점 X를 찾는다
+     * @param point 점 위치벡터 P
+     * @param segmentPosition 선분 S의 정의 (양 끝점의 좌표)
+     * @returns X점의 좌표 벡터
+     */
+    function nearestPointOnSegment(point: BalcanGeo.Vector2, segmentPosition: [BalcanGeo.Vector2, BalcanGeo.Vector2] | [BalcanGeo.Pose, BalcanGeo.Pose]): BalcanGeo.Vector2;
+    /**
+     * 주어진 점이 주어진 다각형 내부에 있는지 확인
+     * @param point 점의 좌표
+     * @param polygon 다각형의 정의 (점들의 좌표)
+     * @returns 점이 다각형 내부에 있는지 여부
+     */
+    function isPointInPolygon(point: BalcanGeo.Vector2, polygon: BalcanGeo.Vector2[]): boolean;
+    /**
+     * originPoint 와 endPoint 를 잇는 선분을 가정하고
+     * extendLength 만큼 양쪽으로 늘이거나 줄인 선분을 반환
+     * (extendLength는 음수일 수도 있음)
+     */
+    function extendSegment(params: {
+        originPoint: BalcanGeo.Vector2;
+        endPoint: BalcanGeo.Vector2;
+        extendLengthFromOrigin: number;
+        extendLengthFromEnd: number;
+    }): {
+        origin: BalcanGeo.Vector2;
+        end: BalcanGeo.Vector2;
+    };
+    /**
+     * 실좌표계 상 위치 (Pose) 를 화면좌표계로 변환
+     * @param pose 실좌표계 상의 위치
+     * @param origin 원점을 삼으려는 화면좌표계 상 좌표
+     * @param pixelPerMeter 1미터당 픽셀 수
+     */
+    function transformPose(pose: BalcanGeo.Pose, origin: BalcanGeo.Vector2, pixelPerMeter: number): BalcanGeo.Position;
+    /**
+     * 화면좌표계상 위치를 실좌표계로 변환
+     * @param position
+     * @param realOrigin 원점을 삼으려는 화면좌표계 상 좌표
+     * @param pixelPerMeter 1미터당 픽셀 수
+     */
+    function transformPosition(position: BalcanGeo.Position, realOrigin: BalcanGeo.Vector2, pixelPerMeter: number): BalcanGeo.Pose;
 }