@rocon/balcan 0.0.1

package/dist/core/ts-matrix/Vector.js

@@ -0,0 +1,252 @@
+export default class Vector {
+    /** Values of the vector */
+    _values;
+    constructor(values) {
+        // Create matrix filled with 0 by default
+        this._values = new Array((values || [0]).length).fill(0);
+        if (values) {
+            this.values = values;
+        }
+    }
+    get rows() {
+        return this.values.length;
+    }
+    get values() {
+        return this._values;
+    }
+    /**
+     * Set values into the vector.
+     * If the parameters vector is to wide, the values are cropped to the current vector size.
+     * It the parameters vector is to small, remaining cells will be filled with 0.
+     * @param newValues Arrays of new values.
+     */
+    set values(newValues) {
+        const minSize = Math.min(this.values.length, newValues.length);
+        for (let i = 0; i < minSize; i++) {
+            this.values[i] = newValues[i];
+        }
+    }
+    /**
+     * Calculates the angle in radians between vector and the receiver.
+     * @param vector The operand vector
+     * @return An angle, between 0 and +π inclusive.
+     */
+    angleFrom(vector) {
+        if (this.rows !== vector.rows)
+            throw new Error('To calculate the angle, vectors must have the same dimension!');
+        const dot = this.dot(vector);
+        const cos = dot / (this.length() * vector.length());
+        return Math.acos(cos);
+    }
+    /**
+     * Calculates the distance between vector and the receiver.
+     * Equivalent to |receiver - vector|
+     * @param vector The operand vector
+     * @return The distance (absolute value) between the two vectors
+     */
+    distanceFrom(vector) {
+        if (this.rows !== vector.rows)
+            throw new Error('To calculate the distance, vectors must have the same dimension!');
+        return this.subtract(vector).length();
+    }
+    /**
+     * Get a matrix value, from its position
+     * @param row Matrix line, from 0 to `rows`
+     */
+    at(row) {
+        return this.values[row];
+    }
+    /**
+     * Get the position, from its matrix value
+     * @param value The value to search
+     * @return The position of the value, or -1 if not found
+     */
+    indexOf(value) {
+        return this.values.indexOf(value);
+    }
+    /**
+     * Sets all matrix values to 0
+     */
+    reset() {
+        this.values = this.values.fill(0);
+    }
+    /**
+     * Add an new row to the matrix, filled with 0
+     */
+    addAValue() {
+        this.values.push(0);
+        return new Vector(this.values);
+    }
+    /**
+     * Check if two matrix are equals, value by value
+     * @param mat The matrix against to check equality
+     */
+    equals(vec) {
+        return (this.rows === vec.rows &&
+            this.values.reduce((eql, val, i) => eql && vec.at(i) === val, true));
+    }
+    /**
+     * Negate all values of the vector (get the opposite sign)
+     * @return A new vector whose all values have the opposed sign
+     */
+    negate() {
+        return new Vector(this.values.map((val) => -val));
+    }
+    /** Get the length of the vector */
+    length() {
+        return Math.sqrt(this.squaredLength());
+    }
+    /** Get the squared length of the vector */
+    squaredLength() {
+        return this.dot(this);
+    }
+    /**
+     * Add all vector values with the same position value of the operand vector
+     * @param vector The operand vector
+     * @throws Error if the two vectors don't have the same dimension
+     * @return a new Vector with the result values
+     */
+    add(vector) {
+        if (this.rows !== vector.rows)
+            throw new Error("Vectors don't have the same dimension!");
+        return this.operateOnAllValues((val, i) => val + vector.at(i));
+    }
+    /**
+     * subtract all vector values with the same position value of the operand vector
+     * @param vector The operand vector
+     * @throws Error if the two vectors don't have the same dimension
+     * @return a new Vector with the result values
+     */
+    subtract(vector) {
+        if (this.rows !== vector.rows)
+            throw new Error("Vectors don't have the same dimension!");
+        return this.operateOnAllValues((val, i) => val - vector.at(i));
+    }
+    /**
+     * Multiply all vector values with the same position value of the operand vector
+     * @param vector The operand vector
+     * @throws Error if the two vectors don't have the same dimension
+     * @return a new Vector with the result values
+     */
+    multiply(vector) {
+        if (this.rows !== vector.rows)
+            throw new Error("Vectors don't have the same dimension!");
+        return this.operateOnAllValues((val, i) => val * vector.at(i));
+    }
+    /**
+     * Divide all vector values with the same position value of the operand vector
+     * Be aware of divisions by 0!
+     * @param vector The operand vector
+     * @throws Error if the two vectors don't have the same dimension
+     * @return a new Vector with the result values
+     */
+    divide(vector) {
+        if (this.rows !== vector.rows)
+            throw new Error("Vectors don't have the same dimension!");
+        return this.operateOnAllValues((val, i) => {
+            if (vector.at(i) === 0)
+                return val;
+            return val / vector.at(i);
+        });
+    }
+    /**
+     * Computes the product of this vector with a matrix (vector * matrix)
+     * The vector is treated as a row vector
+     * @param matrix The matrix to multiply with
+     * @throws Error if vector.rows != matrix.rows
+     * @return A new Vector, result of the multiplication
+     */
+    multiplyMatrix(matrix) {
+        if (this.rows !== matrix.rows)
+            throw new Error('Dimension error! The vector must have the same number of elements as the matrix rows!');
+        const resultValues = new Array(matrix.columns);
+        for (let j = 0; j < matrix.columns; j++) {
+            resultValues[j] = this.values.reduce((sum, element, index) => sum + element * matrix.at(index, j), 0);
+        }
+        return new Vector(resultValues);
+    }
+    /**
+     * Computes the maximum value of the vector
+     * @return The maximum value
+     * @throws Error if the vector is empty
+     */
+    max() {
+        if (this.rows === 0)
+            throw new Error('Cannot get the maximum value of an empty vector!');
+        return Math.max(...this.values);
+    }
+    /**
+     * Computes the minimum value of the vector
+     * @return The minimum value
+     * @throws Error if the vector is empty
+     */
+    min() {
+        if (this.rows === 0)
+            throw new Error('Cannot get the minimum value of an empty vector!');
+        return Math.min(...this.values);
+    }
+    /**
+     * Rounds all vector values to the nearest integer
+     * @return A new vector with the rounded values
+     * @throws Error if the vector is empty
+     */
+    round() {
+        if (this.rows === 0)
+            throw new Error('Cannot round an empty vector!');
+        return this.operateOnAllValues((x) => Math.round(x));
+    }
+    /**
+     * Multiply all vector values by the given number
+     * @param scale The number to multiply with the values
+     */
+    scale(scale) {
+        return this.operateOnAllValues((val) => val * scale);
+    }
+    /**
+     * Run a function on all vector values, as a map.
+     * @param operation The mapping method
+     * @return a new Vector with the operation done on all its values
+     */
+    operateOnAllValues(operation) {
+        return new Vector(this.values.map(operation));
+    }
+    /**
+     * Computes the normalized vector
+     * @return The normalized vector
+     */
+    normalize() {
+        const vectorLength = this.length();
+        return this.operateOnAllValues((val) => val / vectorLength);
+    }
+    /**
+     * Computes the dot product of vectors
+     * @param vector The operand vector
+     */
+    dot(vector) {
+        return this.values.reduce((res, val, i) => res + val * vector.at(i), 0);
+    }
+    /**
+     * Computes the cross product of vectors
+     * @param vector The operand vector
+     */
+    cross(vector) {
+        if (this.rows < 3 || vector.rows < 3)
+            throw new Error('Cross product is possible on 3D vectors only');
+        const crossValues = new Array(3);
+        crossValues[0] = this.at(1) * vector.at(2) - this.at(2) * vector.at(1);
+        crossValues[1] = this.at(2) * vector.at(0) - this.at(0) * vector.at(2);
+        crossValues[2] = this.at(0) * vector.at(1) - this.at(1) * vector.at(0);
+        return new Vector(crossValues);
+    }
+    mix(vector, time) {
+        return new Vector(this.values.map((val, i) => val + time * (vector.at(i) - val)));
+    }
+    static get360angle(Va, Vb) {
+        if (Va.rows !== 3 || Vb.rows !== 3)
+            throw new Error('Vectors must be in 3D!. You can add a 1 dimension if it is missing.');
+        return -Math.atan2(Vb.cross(Va).dot(new Vector([0, 0, 1]).normalize()), Va.dot(Vb));
+    }
+    toString() {
+        return `[${this.values.join(', ')}]`;
+    }
+}

package/dist/core/ts-matrix/constants.d.ts

@@ -0,0 +1 @@
+export declare const EPSILON = 0.00001;

package/dist/core/ts-matrix/constants.js

@@ -0,0 +1 @@
+export const EPSILON = 0.00001;

package/dist/core/ts-matrix/ts-matrix.d.ts

@@ -0,0 +1,3 @@
+export { default as Matrix } from './Matrix';
+export { default as Vector } from './Vector';
+export { default as Quat } from './Quat';

package/dist/core/ts-matrix/ts-matrix.js

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2020 Florent Catiau-Tristant
+ * Copyright (c) 2012, 2018 Matthias Ferch
+ *
+ * Project initiated by Matthias Ferch
+ * Original library: https://github.com/matthiasferch/tsm
+ *
+ * Forked and improved by Florent Catiau-Tristant
+ * Project homepage: https://github.com/kapcash/tsmatrix
+ *
+ * This software is provided 'as-is', without any express or implied
+ * warranty. In no event will the authors be held liable for any damages arising from the use of this software.
+ *
+ * Permission is granted to anyone to use this software for any purpose,
+ * including commercial applications, and to alter it and redistribute it
+ * freely, subject to the following restrictions:
+ *
+ *    1. The origin of this software must not be misrepresented; you must not
+ *    claim that you wrote the original software. If you use this software
+ *    in a product, an acknowledgment in the product documentation would be
+ *    appreciated but is not required.
+ *
+ *    2. Altered source versions must be plainly marked as such, and must not
+ *    be misrepresented as being the original software.
+ *
+ *    3. This notice may not be removed or altered from any source
+ *    distribution.
+ */
+export { default as Matrix } from './Matrix';
+export { default as Vector } from './Vector';
+export { default as Quat } from './Quat';

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

@@ -0,0 +1,93 @@
+import type { Director as DirectorClass } from './core.balcan';
+export type Director = DirectorClass;
+/**
+ * Staff Layer, Canvas 에서 작동하는 특정한 목적을 지닌 최소 로직 집합이다.
+ * 단, 비지니스 로직을 포함하지 않는 포괄적인 기능을 수행해야 한다.
+ *
+ * @template TYPE 종류를 나타내는 문자열, type 의 값을 리터럴 형식으로 고정하기 위해 쓰임
+ * @template TData 자체적으로 가지는 추가 데이터 타입, `data` 프로퍼티의 자료형으로 쓰임
+ * @template TReturnExtend 현재 타입을 TReturnExtend 만큼 확장할 수 있음
+ */
+export type Staff<TYPE extends string = any, TData = any, TReturnExtend extends {
+    [key: string]: unknown;
+} = {}> = {
+    /** 유닛의 종류 */
+    type: TYPE;
+    /** 서버측 자원의 uuid를 넣을 수 있음 */
+    entityId: string;
+    /** stage 에 추가되는 id값, stage 내에서 유일 해아 함 */
+    uniqueId: string;
+    /** 호출하는 측이 자유롭게 사용할 수 있는 데이터 */
+    data: TData;
+    /** 이 객체를 소유한 Director */
+    director?: Director;
+    /** 여기에 붙는 플러그인 */
+    plugins: Plugin[];
+    /** 하위에 플러그인을 추가 함 */
+    addPlugin?: (plugin: Plugin) => void;
+    /** 플러그인 제거 */
+    removePlugin?: (pluginKey: string) => void;
+    onDestroy?: () => void;
+    onBeforeRender?: () => void;
+    onRender?: () => void;
+} & TReturnExtend;
+/**
+ * Actor Layer, 유닛을 조합하여 특정한 목적을 수행하는 로직 집합이다.
+ * 비지니스 로직을 포함 할 수 있다.
+ */
+export type Actor<TYPE extends string = any, TData = any, TReturnExtend extends {
+    [key: string]: unknown;
+} = {}> = {
+    /** type literal string */
+    type: TYPE;
+    /** 서버측 자원의 uuid를 넣을 수 있음 */
+    entityId: string;
+    /** stage 에 추가되는 id값, stage 내에서 유일 해아 함 */
+    uniqueId: string;
+    /** 호출하는 측이 자유롭게 사용할 수 있는 데이터 */
+    data: TData;
+    /** 이 객체를 소유한 director, 필요한 경우에만 사용하면 됨 */
+    director?: Director;
+    plugins: Plugin[];
+    addPlugin?: (plugin: Plugin) => void;
+    removePlugin?: (pluginKey: string) => void;
+    onDestroy?: () => void;
+    onBeforeRender?: () => void;
+    onRender?: () => void;
+    onUpdate?: () => void;
+} & TReturnExtend;
+/**
+ * Scene Layer
+ * 각 화면의 요구사항이 구현된 로직 집합체
+ */
+export type Scene<TYPE extends string = any, TData = any, TReturnExtend extends {
+    [key: string]: unknown;
+} = {}> = {
+    /** type literal string */
+    type: TYPE;
+    /** stage 에 추가되는 키값, stage 내에서 유일 해아 함 */
+    uniqueId: string;
+    /** 앱에서 자유롭게 사용할 수 있는 데이터 */
+    data: TData;
+    /** 앱이 소속되는 스테이지 객체 */
+    director: Director;
+} & TReturnExtend;
+/**
+ * 플러그인 정의, 실제 사용할 때는 확장해서 사용 권장
+ * @template T 플러그인이 자체적으로 가지는 추가 데이터 타입
+ */
+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;
+}
+export type onTransformCallback = {
+    x: number;
+    y: number;
+    scale: number;
+    rotation: number;
+};

package/dist/core/types.balcan.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,23 @@
+import type Konva from 'konva';
+export declare namespace util {
+    /**
+     * Konva Shape 나 Group에 마우스가 올라갔을 때 커서 모양을 바꿔주는 이벤트를 등록한다
+     * @param shapes 등록할 Konva Shape 들
+     */
+    function enableMouseHoverEvent(params: {
+        shapes: (Konva.Shape | Konva.Group)[];
+        cursorStyle?: string;
+        additionalHoverEvent?: (shape: Konva.Shape | Konva.Group) => void;
+        additionalLeaveEvent?: (shape: Konva.Shape | Konva.Group) => 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;
+    /** 마우스 위치에 있는 모든 shape 목록을 가져온다 */
+    function pickShapes(stage: Konva.Stage): 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 randomHexColorCode(): string;
+}

package/dist/core/util.balcan.js

@@ -0,0 +1,71 @@
+import { geo } from './geo.balcan';
+export var util;
+(function (util) {
+    /**
+     * Konva Shape 나 Group에 마우스가 올라갔을 때 커서 모양을 바꿔주는 이벤트를 등록한다
+     * @param shapes 등록할 Konva Shape 들
+     */
+    function enableMouseHoverEvent(params) {
+        params.shapes.forEach((s) => {
+            s.on('mouseover', () => {
+                s.getStage().container().style.cursor = 'pointer';
+                params.additionalHoverEvent?.(s);
+            });
+            s.on('mouseleave', () => {
+                s.getStage().container().style.cursor = 'auto';
+                params.additionalLeaveEvent?.(s);
+            });
+        });
+    }
+    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;
+    function pickShape(stage) {
+        const picked = stage.getIntersection(stage.getPointerPosition() ?? {
+            x: 0,
+            y: 0,
+        });
+        return picked;
+    }
+    util.pickShape = pickShape;
+    /** 마우스 위치에 있는 모든 shape 목록을 가져온다 */
+    function pickShapes(stage) {
+        const picked = stage.getAllIntersections(stage.getPointerPosition() ?? {
+            x: 0,
+            y: 0,
+        });
+        return picked;
+    }
+    util.pickShapes = pickShapes;
+    /** 현재 마우스포인터의 pose + position 계산 */
+    function getPointerPosePosition(stage, originPoint, pixelPerMeter) {
+        const pointer = stage.getRelativePointerPosition();
+        const position = {
+            stagex: pointer?.x ?? 0,
+            stagey: pointer?.y ?? 0,
+            degree: 0,
+        };
+        const pose = geo.transformPosition(position, originPoint, pixelPerMeter);
+        return {
+            pose,
+            position,
+        };
+    }
+    util.getPointerPosePosition = getPointerPosePosition;
+    function randomHexColorCode() {
+        return ('#' +
+            ('00000' + Math.floor(Math.random() * Math.pow(16, 6)).toString(16)).slice(-6));
+    }
+    util.randomHexColorCode = randomHexColorCode;
+})(util || (util = {}));

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

@@ -0,0 +1,27 @@
+import type Konva from 'konva';
+import type { Director } from './types.balcan';
+export declare namespace viewport {
+    function getViewportCenterPosition(director: Director): {
+        asAbsolutePosition(): {
+            x: number;
+            y: number;
+        };
+        asRelativePosition(): BalcanGeo.Vector2;
+    };
+    function getRelativePosition(director: Director): {
+        /** absolute position 을 relative position 으로 변환 */
+        fromAbsolutePosition(vector: BalcanGeo.Vector2): BalcanGeo.Vector2;
+    };
+    function getAbsolutePosition(director: Director): {
+        fromRelativePosition(vector: BalcanGeo.Vector2): {
+            x: number;
+            y: number;
+        };
+    };
+    function bringToCenter(director: Director): {
+        /** 다음 absolute vector 를 화면의 중심으로 가져온다 */
+        fromAbsolutePosition(vector: BalcanGeo.Vector2): void;
+        fromRelativePosition(vector: BalcanGeo.Vector2): void;
+        fromShape(shape: Konva.Shape | Konva.Group): void;
+    };
+}

package/dist/core/viewport.balcan.js

@@ -0,0 +1,60 @@
+import { geo } from './geo.balcan';
+export var viewport;
+(function (viewport) {
+    function getViewportCenterPosition(director) {
+        const stage = director.stage;
+        return {
+            asAbsolutePosition() {
+                return {
+                    x: stage.width() / 2,
+                    y: stage.height() / 2,
+                };
+            },
+            asRelativePosition() {
+                return getRelativePosition(director).fromAbsolutePosition(this.asAbsolutePosition());
+            },
+        };
+    }
+    viewport.getViewportCenterPosition = getViewportCenterPosition;
+    function getRelativePosition(director) {
+        const stage = director.stage;
+        return {
+            /** absolute position 을 relative position 으로 변환 */
+            fromAbsolutePosition(vector) {
+                const offset = geo.subtractVector(vector, stage.getAbsolutePosition());
+                return geo.divideVector(offset, director.scale);
+            },
+        };
+    }
+    viewport.getRelativePosition = getRelativePosition;
+    function getAbsolutePosition(director) {
+        const stage = director.stage;
+        return {
+            fromRelativePosition(vector) {
+                const scaledOffset = geo.multiplyVector(vector, director.scale);
+                return geo.addVector(stage.getAbsolutePosition(), scaledOffset);
+            },
+        };
+    }
+    viewport.getAbsolutePosition = getAbsolutePosition;
+    function bringToCenter(director) {
+        const stage = director.stage;
+        return {
+            /** 다음 absolute vector 를 화면의 중심으로 가져온다 */
+            fromAbsolutePosition(vector) {
+                const moveVector = geo.subtractVector(getViewportCenterPosition(director).asAbsolutePosition(), vector);
+                stage.absolutePosition(geo.addVector(stage.getAbsolutePosition(), moveVector));
+            },
+            fromRelativePosition(vector) {
+                const centerRelativePosition = getViewportCenterPosition(director).asRelativePosition();
+                const moveVector = geo.subtractVector(centerRelativePosition, vector);
+                const scaledMoveVector = geo.multiplyVector(moveVector, director.scale);
+                stage.absolutePosition(geo.addVector(stage.getAbsolutePosition(), scaledMoveVector));
+            },
+            fromShape(shape) {
+                return this.fromAbsolutePosition(shape.getAbsolutePosition());
+            },
+        };
+    }
+    viewport.bringToCenter = bringToCenter;
+})(viewport || (viewport = {}));

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+/// <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 type { BalcanTypes };

package/dist/index.js

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

package/dist/mixin/mixin.d.ts

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

@@ -0,0 +1,7 @@
+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.type.d.ts

@@ -0,0 +1,2 @@
+export type * from '../core/types.balcan';
+export type * from '../staffs';

package/dist/mixin/mixin.type.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,27 @@
+import Konva from 'konva';
+import type { Staff, onTransformCallback, Director } from '../core/types.balcan';
+export type BalcanImageStaffReturn = {
+    translate: (x: number, y: number) => void;
+    rotate: (rad: number) => void;
+    scale(n: number): void;
+    changeImage: (newImage: CanvasImageSource) => void;
+};
+export type BalcanImageStaff = Staff<'image', {
+    entityId: string;
+    imageNode: Konva.Group;
+    sourceImage: CanvasImageSource;
+    renderImage: CanvasImageSource;
+    transformer?: Konva.Transformer;
+}, BalcanImageStaffReturn>;
+/** Image Node 유닛 */
+export declare function useImageStaff(params: {
+    entityId: string;
+    imageSrc: string;
+    onTransform?: (params: onTransformCallback) => void;
+}, opt: {
+    /** 체크시 드래그 가능하며 transformer 생성됨 */
+    editable?: boolean;
+    /** 회전 중심점 */
+    offset?: BalcanGeo.Vector2;
+    director: Director;
+}): BalcanImageStaff;