@rocon/balcan 0.0.1

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

@@ -0,0 +1,4 @@
+export declare namespace bitmap {
+    /** data URL 이미지를 상하 반전한 새 data URL 반환 */
+    function flipVertical(dataUrl: string): Promise<string>;
+}

package/dist/core/bitmap.balcan.js

@@ -0,0 +1,22 @@
+export var bitmap;
+(function (bitmap) {
+    /** data URL 이미지를 상하 반전한 새 data URL 반환 */
+    function flipVertical(dataUrl) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                const canvas = document.createElement('canvas');
+                canvas.width = img.naturalWidth;
+                canvas.height = img.naturalHeight;
+                const ctx = canvas.getContext('2d');
+                ctx.translate(0, canvas.height);
+                ctx.scale(1, -1);
+                ctx.drawImage(img, 0, 0);
+                resolve(canvas.toDataURL('image/png'));
+            };
+            img.onerror = () => reject(new Error('Failed to load image for flip'));
+            img.src = dataUrl;
+        });
+    }
+    bitmap.flipVertical = flipVertical;
+})(bitmap || (bitmap = {}));

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

@@ -0,0 +1,73 @@
+import type Konva from 'konva';
+import type { KonvaEventObject } from 'konva/lib/Node';
+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;
+    }>;
+};
+export declare class Director {
+    readonly name: string;
+    readonly stage: Konva.Stage;
+    scenes: {
+        [k: string]: Scene;
+    };
+    actors: {
+        [k: string]: Actor;
+    };
+    staffs: {
+        [k: string]: Staff;
+    };
+    constructor(name: string, stage: Konva.Stage);
+    private _doubleClickEvent;
+    onScaleChanged$: Subject<{
+        scale: number;
+    }>;
+    onMouseDoubleClicked$: Subject<KonvaEventObject<MouseEvent, import("konva/lib/Stage").Stage>>;
+    onKeyDown$: Subject<KeyboardEvent>;
+    addScene(scene: Scene): {
+        type: any;
+        uniqueId: string;
+        data: any;
+        director: import("./types.balcan").Director;
+    };
+    removeScene(uniqueId: string): void;
+    removeAllScenes(): void;
+    addActor(actor: Actor): {
+        type: any;
+        entityId: string;
+        uniqueId: string;
+        data: any;
+        director?: import("./types.balcan").Director;
+        plugins: import("./types.balcan").Plugin[];
+        addPlugin?: (plugin: import("./types.balcan").Plugin) => void;
+        removePlugin?: (pluginKey: string) => void;
+        onDestroy?: () => void;
+        onBeforeRender?: () => void;
+        onRender?: () => void;
+        onUpdate?: () => void;
+    };
+    changeActorId(oldId: string, newId: string): void;
+    removeActor(uniqueId: string): void;
+    removeAllActors(): void;
+    addStaff(staff: Staff): {
+        type: any;
+        entityId: string;
+        uniqueId: string;
+        data: any;
+        director?: import("./types.balcan").Director;
+        plugins: import("./types.balcan").Plugin[];
+        addPlugin?: (plugin: import("./types.balcan").Plugin) => void;
+        removePlugin?: (pluginKey: string) => void;
+        onDestroy?: () => void;
+        onBeforeRender?: () => void;
+        onRender?: () => void;
+    };
+    removeAllStaffs(): void;
+    removeStaff(uniqueId: string): void;
+    get scale(): number;
+    set scale(scale: number);
+    render(): void;
+}

package/dist/core/core.balcan.js

@@ -0,0 +1,136 @@
+import { Subject } from 'rxjs';
+function balcanStore() {
+    const _directors = {};
+    function addDirector(director) {
+        _directors[director.name] = director;
+    }
+    return {
+        directors: _directors,
+        addDirector,
+    };
+}
+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 class Director {
+    name;
+    stage;
+    scenes;
+    actors;
+    staffs;
+    constructor(name, stage) {
+        this.name = name;
+        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) => {
+            this.onMouseDoubleClicked$.next(e);
+            this.stage.off('dblclick');
+            setTimeout(() => this._doubleClickEvent(), 400);
+        });
+    }
+    onScaleChanged$ = new Subject();
+    onMouseDoubleClicked$ = new Subject();
+    onKeyDown$ = new Subject();
+    addScene(scene) {
+        if (this.scenes[scene.uniqueId]) {
+            console.error('Scene with the same uniqueId already exists.');
+            return this.scenes[scene.uniqueId];
+        }
+        this.scenes[scene.uniqueId] = scene;
+        return scene;
+    }
+    removeScene(uniqueId) {
+        // this.scenes[uniqueId]?.onDestroy?.();
+        delete this.scenes[uniqueId];
+    }
+    removeAllScenes() {
+        Object.keys(this.scenes).forEach((k) => {
+            this.removeScene(k);
+        });
+    }
+    addActor(actor) {
+        this.actors[actor.uniqueId] = actor;
+        return actor;
+    }
+    changeActorId(oldId, newId) {
+        const actor = this.actors[oldId];
+        if (!actor)
+            return;
+        actor.uniqueId = newId;
+        this.actors[newId] = actor;
+        delete this.actors[oldId];
+    }
+    removeActor(uniqueId) {
+        this.actors[uniqueId]?.onDestroy?.();
+        delete this.actors[uniqueId];
+    }
+    removeAllActors() {
+        Object.keys(this.actors).forEach((k) => {
+            this.removeActor(k);
+        });
+    }
+    addStaff(staff) {
+        this.staffs[staff.uniqueId] = staff;
+        return staff;
+    }
+    removeAllStaffs() {
+        Object.keys(this.staffs).forEach((k) => {
+            this.removeStaff(k);
+        });
+    }
+    removeStaff(uniqueId) {
+        this.staffs[uniqueId]?.onDestroy?.();
+        delete this.staffs[uniqueId];
+    }
+    get scale() {
+        return this.stage.scale().x;
+    }
+    set scale(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?.());
+        }
+        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?.());
+        }
+    }
+}

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

@@ -0,0 +1,109 @@
+export declare namespace geo {
+    function addVector(v1: BalcanGeo.Vector2, v2: BalcanGeo.Vector2): {
+        x: number;
+        y: number;
+    };
+    function subtractVector(v1: BalcanGeo.Vector2, v2: BalcanGeo.Vector2): {
+        x: number;
+        y: number;
+    };
+    function multiplyVector(v: BalcanGeo.Vector2, factor: number): {
+        x: number;
+        y: number;
+    };
+    function divideVector(v: BalcanGeo.Vector2, factor: number): BalcanGeo.Vector2;
+    /** 벡터들 에 회전 행렬 적용 */
+    function rotateVectors(params: {
+        points: BalcanGeo.Vector2[];
+        rotateAngle: number;
+        angleUnit?: 'degree' | 'radian';
+        /** 중심점 */
+        centerPosition?: BalcanGeo.Vector2;
+        invertY?: boolean;
+    }): {
+        x: number;
+        y: number;
+    }[];
+    /**
+     * 어떤 점 P에서 어떤 선분 S에 수선을 내렸을 때, 그 수선의 발 X를 구함
+     * @param point 점 위치벡터 P
+     * @param segmentPosition 선분 S의 양 끝점 좌표
+     * @returns 수선의 발 X점의 좌표벡터
+     */
+    function nearestPointOnSegment(point: BalcanGeo.Vector2, segmentPosition: [
+        BalcanGeo.Vector2 | BalcanGeo.Pose,
+        BalcanGeo.Vector2 | BalcanGeo.Pose
+    ]): BalcanGeo.Vector2;
+    /**
+     * 주어진 점이 다각형 내부에 있는지 확인
+     */
+    function isPointInPolygon(point: BalcanGeo.Vector2, polygon: BalcanGeo.Vector2[]): boolean;
+    /**
+     * 선분을 주어진 길이만큼 양쪽을 깎는다.
+     */
+    function trimSegment(params: {
+        /** 선분점 1 */
+        point1: BalcanGeo.Vector2;
+        /** 선분점 2  */
+        point2: BalcanGeo.Vector2;
+        /** 선분점 1을 단축할 길이 양 */
+        shortenLength1?: number;
+        /** 선분점 2를 단축할 길이 양 */
+        shortenLength2?: number;
+    }): {
+        point1: {
+            x: number;
+            y: number;
+        };
+        point2: {
+            x: number;
+            y: number;
+        };
+    };
+    /**
+     * 실좌표계 상 위치를 화면좌표계로 변환
+     * @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;
+    /**
+     * 화면좌표계에서 viewport 관련 유용한 벡터들 계산
+     */
+    function calcViewportVectors(opt: {
+        /** 캔버스의 사이즈 */
+        viewportSize: BalcanGeo.Vector2;
+        /** 계산을 원하는 참조점의 위치 벡터 */
+        referenceVector: BalcanGeo.Vector2;
+        /** Canvas 확대 배율 */
+        cameraZoomScale: number;
+    }): {
+        /** 참조점이 viewport 중앙으로 가는 벡터 */
+        toViewportCenter: {
+            x: number;
+            y: number;
+        };
+    };
+    /**
+     * originPoint 와 endPoint 를 잇는 선분을 가정하고
+     * extendLength 만큼 양쪽으로 늘이거나 줄인 선분을 반환
+     * (extendLength는 음수일 수도 있음)
+     *
+     * @returns { origin: BalcanGeo.Vector2, end: BalcanGeo.Vector2 }
+     */
+    function extendSegment(params: {
+        originPoint: BalcanGeo.Vector2;
+        endPoint: BalcanGeo.Vector2;
+        extendLength: number;
+    }): {
+        origin: BalcanGeo.Vector2;
+        end: BalcanGeo.Vector2;
+    };
+}

package/dist/core/geo.balcan.js

@@ -0,0 +1,255 @@
+import { range } from 'lodash';
+import { math } from './math.balcan';
+import { Matrix } from './ts-matrix/ts-matrix';
+export var geo;
+(function (geo) {
+    function addVector(v1, v2) {
+        return {
+            x: v1.x + v2.x,
+            y: v1.y + v2.y,
+        };
+    }
+    geo.addVector = addVector;
+    function subtractVector(v1, v2) {
+        return {
+            x: v1.x - v2.x,
+            y: v1.y - v2.y,
+        };
+    }
+    geo.subtractVector = subtractVector;
+    function multiplyVector(v, factor) {
+        return {
+            x: v.x * factor,
+            y: v.y * factor,
+        };
+    }
+    geo.multiplyVector = multiplyVector;
+    function divideVector(v, factor) {
+        if (factor === 0) {
+            console.error('divideVector: divide by zero');
+            return v;
+        }
+        return {
+            x: v.x / factor,
+            y: v.y / factor,
+        };
+    }
+    geo.divideVector = divideVector;
+    /** 벡터들 에 회전 행렬 적용 */
+    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;
+    }
+    geo.rotateVectors = rotateVectors;
+    /**
+     * 어떤 점 P에서 어떤 선분 S에 수선을 내렸을 때, 그 수선의 발 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,
+            };
+        }
+    }
+    geo.nearestPointOnSegment = nearestPointOnSegment;
+    /**
+     * 주어진 점이 다각형 내부에 있는지 확인
+     */
+    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;
+    }
+    geo.isPointInPolygon = isPointInPolygon;
+    /**
+     * 선분을 주어진 길이만큼 양쪽을 깎는다.
+     */
+    function trimSegment(params) {
+        const { point1, point2, shortenLength1: offsetRadius1 = 0, shortenLength2: offsetRadius2 = 0, } = params;
+        const angle = math.vectorSlope({
+            point1,
+            point2,
+        });
+        const fromPoint = rotateVectors({
+            points: [
+                {
+                    x: point1.x + offsetRadius1,
+                    y: point1.y,
+                },
+            ],
+            rotateAngle: angle,
+            centerPosition: { x: point1.x, y: point1.y },
+        });
+        const destPoint = rotateVectors({
+            points: [
+                {
+                    x: point2.x - offsetRadius2,
+                    y: point2.y,
+                },
+            ],
+            rotateAngle: angle,
+            centerPosition: { x: point2.x, y: point2.y },
+        });
+        return { point1: fromPoint[0], point2: destPoint[0] };
+    }
+    geo.trimSegment = trimSegment;
+    /**
+     * 실좌표계 상 위치를 화면좌표계로 변환
+     * @param pose
+     * @param origin 원점을 삼으려는 화면좌표계 상 좌표
+     * @param pixelPerMeter 실좌표계의 1미터당 픽셀 수
+     */
+    function transformPose(pose, origin, pixelPerMeter) {
+        return {
+            stagex: origin.x + pose.x * pixelPerMeter,
+            stagey: origin.y - pose.y * pixelPerMeter,
+            degree: math.degree(pose.theta, { invertY: false }),
+        };
+    }
+    geo.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 }),
+        };
+    }
+    geo.transformPosition = transformPosition;
+    /**
+     * 화면좌표계에서 viewport 관련 유용한 벡터들 계산
+     */
+    function calcViewportVectors(opt) {
+        const { viewportSize, referenceVector, cameraZoomScale: scale = 1 } = opt;
+        /** 원점에서 viewport center 로 향하는 벡터 */
+        const OV = { x: viewportSize.x / 2, y: viewportSize.y / 2 };
+        /** 원점에서 참조점으로 향하는 벡터 */
+        const OR = { x: referenceVector.x * scale, y: referenceVector.y * scale };
+        return {
+            /** 참조점이 viewport 중앙으로 가는 벡터 */
+            toViewportCenter: {
+                x: OV.x - OR.x,
+                y: OV.y - OR.y,
+            },
+        };
+    }
+    geo.calcViewportVectors = calcViewportVectors;
+    /**
+     * originPoint 와 endPoint 를 잇는 선분을 가정하고
+     * extendLength 만큼 양쪽으로 늘이거나 줄인 선분을 반환
+     * (extendLength는 음수일 수도 있음)
+     *
+     * @returns { origin: BalcanGeo.Vector2, end: BalcanGeo.Vector2 }
+     */
+    function extendSegment(params) {
+        const { originPoint, endPoint, extendLength } = 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 * extendLength,
+            y: originPoint.y - uy * extendLength,
+        };
+        const newEnd = {
+            x: endPoint.x + ux * extendLength,
+            y: endPoint.y + uy * extendLength,
+        };
+        return { origin: newOrigin, end: newEnd };
+    }
+    geo.extendSegment = extendSegment;
+})(geo || (geo = {}));

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

@@ -0,0 +1,35 @@
+export declare namespace math {
+    function average(...values: number[]): number;
+    function radian(deg: number, opt?: {
+        invertY?: boolean;
+        toFixed?: number;
+    }): number;
+    function radian(deg: string, opt?: {
+        invertY?: boolean;
+        toFixed?: number;
+    }): number;
+    function degree(rad: number, opt?: {
+        invertY?: boolean;
+        toFixed?: number;
+    }): number;
+    function degree(rad: string, opt?: {
+        invertY?: boolean;
+        toFixed?: number;
+    }): number;
+    /** 주어진 각도를 -180 ~ 180 범위로 좁힌다 */
+    function normalizeAngle(degree: number): number;
+    /** 위치 간 거리를 구한다, 위치는 Vector와 Position 타입을 사용할 수 있다 */
+    function vectorDistance<T extends BalcanGeo.Vector2 | BalcanGeo.Position>(p1: T, p2: T): number;
+    /** 두 점을 잇는 직선의 기울기를 구한다 */
+    function vectorSlope<T extends BalcanGeo.Vector2 | BalcanGeo.Position>(params: {
+        point1: T;
+        point2: T;
+        outputUnit?: 'degree' | 'radian';
+    }): number;
+    /** 벡터 덧셈 */
+    function vectorAdd<T extends BalcanGeo.Vector2 | BalcanGeo.Pose>(v1: T, v2: T): T;
+    /** 벡터 내적 */
+    function vectorDot<T extends BalcanGeo.Vector2 | BalcanGeo.Pose>(v1: T, v2: T): number;
+    /** position like 자료형을 vector2d 로 변환함 */
+    function vector2d<T extends BalcanGeo.Vector2 | BalcanGeo.Position | BalcanGeo.Pose>(point: T): BalcanGeo.Vector2;
+}