graphic-pixi/lib/index.js

import * as graphicsExtras from '@pixi/graphics-extras';
export { graphicsExtras as GraphicsExtras };
import { Graphics, Container, Text, Point, Matrix, Color, Polygon, DisplayObject, Rectangle, Application, BitmapFont, BitmapText } from 'pixi.js';
import EventEmitter from 'eventemitter3';
import { Viewport } from 'pixi-viewport';
import { Client } from '@stomp/stompjs';
import mqtt from 'mqtt';

/**
 * ID生成器
 */
class IdGenerator {
    serial = 0;
    type;
    constructor(type) {
        this.type = type;
    }
    next() {
        ++this.serial;
        // console.log(this.getType() + this.serial)
        return this.serial;
    }
    getType() {
        return this.type;
    }
    initSerial(serial) {
        this.serial = serial;
    }
}
const GraphicIdGenerator = new IdGenerator('');

/**
 * 图形动画管理
 */
class AnimationManager {
    app;
    _pause;
    /**
     * key - graphic.id
     */
    graphicAnimationMap;
    constructor(app) {
        this.app = app;
        this._pause = false;
        this.graphicAnimationMap = new Map();
        // 动画控制
        app.pixi.ticker.add(this.run, this);
    }
    run(dt) {
        if (this._pause) {
            // 暂停
            return;
        }
        this.graphicAnimationMap.forEach((map) => {
            map.forEach((animation) => {
                if (animation.running) {
                    animation.run(dt);
                }
            });
        });
    }
    pause() {
        this._pause = true;
    }
    resume() {
        this._pause = false;
    }
    destroy() {
        this.app.pixi.ticker.remove(this.run, this);
    }
    /**
     * 图形对象的所有动画map
     * @param graphic
     * @returns
     */
    animationMap(graphic) {
        let map = this.graphicAnimationMap.get(graphic.id);
        if (!map) {
            map = new Map();
            this.graphicAnimationMap.set(graphic.id, map);
        }
        return map;
    }
    /**
     * 注册图形动画
     * @param graphic
     * @param animation
     */
    registerAnimation(graphic, animation) {
        this.animationMap(graphic).set(animation.name, animation);
    }
    /**
     * 删除图形动画
     * @param graphic
     * @param name
     */
    unregisterAnimation(graphic, name) {
        this.animationMap(graphic).delete(name);
    }
    /**
     * 删除所有图形动画
     * @param graphic
     */
    unregisterGraphicAnimations(graphic) {
        this.animationMap(graphic).clear();
    }
    /**
     * 获取图形指定名称动画
     * @param graphic
     * @param name
     * @returns
     */
    animation(graphic, name) {
        return this.animationMap(graphic).get(name);
    }
}

var InteractionPluginType;
(function (InteractionPluginType) {
    InteractionPluginType["App"] = "app";
    InteractionPluginType["Graphic"] = "graphic";
    InteractionPluginType["Other"] = "other";
})(InteractionPluginType || (InteractionPluginType = {}));
class InteractionPluginBase {
    _type;
    name; // 唯一标识
    app;
    _pause;
    constructor(app, name, type) {
        this._type = type;
        this.app = app;
        this.name = name;
        this._pause = true;
        app.registerInteractionPlugin(this);
    }
    /**
     * 恢复
     */
    resume() {
        this.bind();
        this._pause = false;
        this.app.emit('interaction-plugin-resume', this);
    }
    /**
     * 停止
     */
    pause() {
        this.unbind();
        this._pause = true;
        this.app.emit('interaction-plugin-pause', this);
    }
    /**
     * 是否生效
     */
    isActive() {
        return !this._pause;
    }
    isGraphicPlugin() {
        return this._type === InteractionPluginType.Graphic;
    }
    isAppPlugin() {
        return this._type === InteractionPluginType.App;
    }
    isOtherPlugin() {
        return this._type === InteractionPluginType.Other;
    }
}
class OtherInteractionPlugin extends InteractionPluginBase {
    constructor(app, name) {
        super(app, name, InteractionPluginType.Other);
    }
}
class AppDragEvent {
    app;
    type;
    target;
    original;
    start; // 画布坐标
    constructor(app, type, target, original, start) {
        this.app = app;
        this.type = type;
        this.target = target;
        this.original = original;
        this.start = start;
    }
    get isMouse() {
        return this.original.pointerType === 'mouse';
    }
    get isLeftButton() {
        return (this.isMouse &&
            ((this.original.button === -1 && this.original.buttons === 1) ||
                (this.original.button === 0 && this.original.buttons === 0)));
    }
    get isRightButton() {
        return (this.isMouse &&
            ((this.original.button === -1 && this.original.buttons === 2) ||
                (this.original.button === 2 && this.original.buttons === 0)));
    }
    get isMiddleButton() {
        return (this.isMouse &&
            ((this.original.button === -1 && this.original.buttons === 4) ||
                (this.original.button === 1 && this.original.buttons === 0)));
    }
    get isTouch() {
        return this.original.pointerType === 'touch';
    }
    /**
     * 终点坐标(画布坐标)
     */
    get end() {
        return this.app.toCanvasCoordinates(this.original.global);
    }
    get dx() {
        const move = this.original.movement;
        return move.x / this.app.viewport.scaled;
    }
    get dy() {
        const move = this.original.movement;
        return move.y / this.app.viewport.scaled;
    }
    get dsx() {
        return this.end.x - this.start.x;
    }
    get dsy() {
        return this.end.y - this.start.y;
    }
    /**
     * 转换为目标对象的位移距离
     */
    toTargetShiftLen(target) {
        const sl = target.canvasToLocalPoint(this.start);
        const el = target.canvasToLocalPoint(this.end);
        return { dx: el.x - sl.x, dy: el.y - sl.y };
    }
}
/**
 * 拖拽操作插件
 */
class DragPlugin extends OtherInteractionPlugin {
    static Name = '__drag_operation_plugin';
    threshold = 3;
    target = null;
    start = null;
    startClientPoint = null;
    drag = false;
    constructor(app) {
        super(app, DragPlugin.Name);
        app.on('options-update', (options) => {
            if (options.threshold !== undefined) {
                this.threshold = options.threshold;
            }
        });
    }
    static new(app) {
        return new DragPlugin(app);
    }
    bind() {
        const canvas = this.app.canvas;
        canvas.on('pointerdown', this.onPointerDown, this);
    }
    unbind() {
        const canvas = this.app.canvas;
        canvas.off('pointerdown', this.onPointerDown, this);
        canvas.off('pointerup', this.onPointerUp, this);
        canvas.off('pointerupoutside', this.onPointerUp, this);
    }
    onPointerDown(e) {
        this.target = e.target;
        this.start = this.app.toCanvasCoordinates(e.global);
        this.startClientPoint = e.global.clone();
        const canvas = this.app.canvas;
        canvas.on('pointermove', this.onPointerMove, this);
        canvas.on('pointerup', this.onPointerUp, this);
        canvas.on('pointerupoutside', this.onPointerUp, this);
    }
    onPointerMove(e) {
        if (this.start && this.startClientPoint) {
            const current = e.global;
            const sgp = this.startClientPoint;
            const dragStart = Math.abs(current.x - sgp.x) > this.threshold ||
                Math.abs(current.y - sgp.y) > this.threshold;
            if (this.target && this.start && !this.drag && dragStart) {
                this.app.emit('drag_op_start', new AppDragEvent(this.app, 'start', this.target, e, this.start));
                this.drag = true;
            }
            // drag移动处理
            if (this.target && this.drag && this.start) {
                this.app.emit('drag_op_move', new AppDragEvent(this.app, 'move', this.target, e, this.start));
            }
        }
    }
    onPointerUp(e) {
        if (this.target && this.drag && this.start) {
            this.app.emit('drag_op_end', new AppDragEvent(this.app, 'end', this.target, e, this.start));
        }
        else if (this.target && this.start && !this.drag) {
            // this.target.emit('click', this.target);
            const ade = new AppDragEvent(this.app, 'end', this.target, e, this.start);
            const graphic = this.target.getGraphic();
            if (ade.isRightButton) {
                this.target.emit('_rightclick', e);
                if (graphic != null) {
                    graphic.emit('_rightclick', e);
                }
            }
            else if (ade.isLeftButton) {
                this.target.emit('_leftclick', e);
                if (graphic != null) {
                    graphic.emit('_leftclick', e);
                }
            }
        }
        const canvas = this.app.canvas;
        canvas.off('mousemove', this.onPointerMove, this);
        canvas.off('mouseup', this.onPointerUp, this);
        canvas.off('mouseupoutside', this.onPointerUp, this);
        this.clearCache();
    }
    /**
     * 清理缓存
     */
    clearCache() {
        this.drag = false;
        this.start = null;
        this.startClientPoint = null;
        this.target = null;
    }
}
/**
 * 视口移动插件
 */
class ViewportMovePlugin extends OtherInteractionPlugin {
    static Name = '__viewport_move_plugin';
    static MoveInterval = 20; // 移动间隔，单位ms
    static TriggerRange = 100; // 边界触发范围,单位px
    static DefaultMoveSpeed = 200 / ViewportMovePlugin.MoveInterval; // 默认移动速度
    moveHandler = null;
    moveSpeedx = 0;
    moveSpeedy = 0;
    constructor(app) {
        super(app, ViewportMovePlugin.Name);
    }
    static new(app) {
        return new ViewportMovePlugin(app);
    }
    pause() {
        super.pause();
        this.stopMove();
    }
    bind() {
        this.app.canvas.on('pointermove', this.viewportMove, this);
    }
    unbind() {
        this.app.canvas.off('pointermove', this.viewportMove, this);
    }
    startMove(moveSpeedx, moveSpeedy) {
        this.moveSpeedx = moveSpeedx;
        this.moveSpeedy = moveSpeedy;
        if (this.moveHandler == null) {
            const viewport = this.app.viewport;
            this.moveHandler = setInterval(() => {
                viewport.moveCorner(viewport.corner.x + this.moveSpeedx, viewport.corner.y + this.moveSpeedy);
            }, ViewportMovePlugin.MoveInterval);
        }
    }
    stopMove() {
        if (this.moveHandler != null) {
            clearInterval(this.moveHandler);
            this.moveHandler = null;
            this.app.canvas.cursor = 'auto';
        }
    }
    calculateBoundaryMoveSpeed(sp) {
        let moveSpeedx = 0;
        let moveSpeedy = 0;
        const range = ViewportMovePlugin.TriggerRange;
        const viewport = this.app.viewport;
        if (sp.x < range) {
            moveSpeedx = this.calculateMoveSpeed(sp.x - range);
        }
        else if (sp.x > viewport.screenWidth - range) {
            moveSpeedx = this.calculateMoveSpeed(sp.x + range - viewport.screenWidth);
        }
        else {
            moveSpeedx = 0;
        }
        if (sp.y < range) {
            moveSpeedy = this.calculateMoveSpeed(sp.y - range);
        }
        else if (sp.y > viewport.screenHeight - range) {
            moveSpeedy = this.calculateMoveSpeed(sp.y + range - viewport.screenHeight);
        }
        else {
            moveSpeedy = 0;
        }
        return { moveSpeedx, moveSpeedy };
    }
    calculateMoveSpeed(dd) {
        return ((dd / ViewportMovePlugin.TriggerRange) *
            ViewportMovePlugin.DefaultMoveSpeed);
    }
    viewportMove(e) {
        const sp = e.global;
        const { moveSpeedx, moveSpeedy } = this.calculateBoundaryMoveSpeed(sp);
        if (moveSpeedx == 0 && moveSpeedy == 0) {
            this.app.canvas.cursor = 'auto';
            this.stopMove();
        }
        else {
            this.app.canvas.cursor = 'grab';
            this.startMove(moveSpeedx, moveSpeedy);
        }
    }
}
/**
 * 应用交互插件，同时只能生效一个
 */
class AppInteractionPlugin extends InteractionPluginBase {
    constructor(name, app) {
        super(app, name, InteractionPluginType.App);
    }
    /**
     * 恢复，app交互插件同时只能生效一个
     */
    resume() {
        this.app.pauseAppInteractionPlugins();
        super.resume();
    }
}
/**
 * 图形交互插件,可同时生效
 */
class GraphicInteractionPlugin {
    _type = InteractionPluginType.Graphic;
    app;
    name; // 唯一标识
    _pause;
    constructor(name, app) {
        this.app = app;
        this.name = name;
        this._pause = true;
        app.registerInteractionPlugin(this);
        this.resume();
        // 新增的图形对象绑定
        this.app.on('graphicstored', (g) => {
            if (this.isActive()) {
                this.binds(this.filter(g));
            }
        });
        this.app.on('graphicdeleted', (g) => {
            if (this.isActive()) {
                this.unbinds(this.filter(g));
            }
        });
    }
    isActive() {
        return !this._pause;
    }
    isAppPlugin() {
        return false;
    }
    isOtherPlugin() {
        return false;
    }
    isGraphicPlugin() {
        return true;
    }
    resume() {
        const list = this.filter(...this.app.queryStore.getAllGraphics());
        this.binds(list);
        this._pause = false;
        this.app.emit('interaction-plugin-resume', this);
    }
    pause() {
        const list = this.filter(...this.app.queryStore.getAllGraphics());
        this.unbinds(list);
        this._pause = true;
        this.app.emit('interaction-plugin-pause', this);
    }
    binds(list) {
        if (list) {
            list.forEach((g) => this.bind(g));
        }
    }
    unbinds(list) {
        if (list) {
            list.forEach((g) => this.unbind(g));
        }
    }
}

class CompleteMouseToolOptions {
    boxSelect;
    viewportDrag;
    viewportDragLeft;
    wheelZoom;
    selectFilter;
    constructor() {
        this.boxSelect = true;
        this.viewportDrag = true;
        this.wheelZoom = true;
        this.viewportDragLeft = false;
    }
    update(options) {
        if (options.boxSelect != undefined) {
            this.boxSelect = options.boxSelect;
        }
        if (options.viewportDrag != undefined) {
            this.viewportDrag = options.viewportDrag;
        }
        if (options.viewportDragLeft != undefined) {
            this.viewportDragLeft = options.viewportDragLeft;
        }
        if (options.wheelZoom != undefined) {
            this.wheelZoom = options.wheelZoom;
        }
        this.selectFilter = options.selectFilter;
    }
}
/**
 * 通用交互工具
 */
class CommonMouseTool extends AppInteractionPlugin {
    static Name = 'mouse-tool';
    static SelectBox = '__select_box';
    options;
    box;
    leftDownTarget = null;
    drag = false;
    graphicSelect = false;
    rightTarget = null;
    constructor(scene) {
        super(CommonMouseTool.Name, scene);
        this.options = new CompleteMouseToolOptions();
        this.box = new Graphics();
        this.box.name = CommonMouseTool.SelectBox;
        this.box.visible = false;
        this.app.canvas.addAssistantAppends(this.box);
        scene.on('options-update', (options) => {
            if (options.mouseToolOptions) {
                this.options.update(options.mouseToolOptions);
                if (this.isActive()) {
                    this.pause();
                    this.resume();
                }
            }
        });
    }
    static new(app) {
        return new CommonMouseTool(app);
    }
    bind() {
        const canvas = this.app.canvas;
        canvas.on('mousedown', this.onMouseDown, this);
        canvas.on('mouseup', this.onMouseUp, this);
        this.app.on('drag_op_start', this.onDragStart, this);
        this.app.on('drag_op_move', this.onDragMove, this);
        this.app.on('drag_op_end', this.onDragEnd, this);
        if (this.options.viewportDrag) {
            if (this.options.viewportDragLeft) {
                this.app.viewport.drag({
                    mouseButtons: 'left',
                });
                canvas.on('mousedown', this.setLeftCursor, this);
                canvas.on('mouseup', this.resumeLeftCursor, this);
                canvas.on('mouseupoutside', this.resumeLeftCursor, this);
            }
            else {
                this.app.viewport.drag({
                    mouseButtons: 'right',
                });
                canvas.on('rightdown', this.setCursor, this);
                canvas.on('rightup', this.resumeCursor, this);
                canvas.on('rightupoutside', this.resumeCursor, this);
            }
        }
        if (this.options.wheelZoom) {
            this.app.viewport.wheel({
                percent: 0.01,
            });
        }
    }
    unbind() {
        const canvas = this.app.canvas;
        // 确保所有事件取消监听
        canvas.off('mousedown', this.onMouseDown, this);
        canvas.off('mouseup', this.onMouseUp, this);
        this.app.off('drag_op_start', this.onDragStart, this);
        this.app.off('drag_op_move', this.onDragMove, this);
        this.app.off('drag_op_end', this.onDragEnd, this);
        this.app.viewport.plugins.remove('drag');
        canvas.off('mousedown', this.setLeftCursor, this);
        canvas.off('mouseup', this.resumeLeftCursor, this);
        canvas.off('mouseupoutside', this.resumeLeftCursor, this);
        canvas.off('rightdown', this.setCursor, this);
        canvas.off('rightup', this.resumeCursor, this);
        canvas.off('rightupoutside', this.resumeCursor, this);
        this.app.viewport.plugins.remove('wheel');
        this.clearCache();
    }
    onDragStart(event) {
        if (this.boxSelect && event.target.isCanvas() && event.isLeftButton) {
            this.box.visible = true;
            this.app.interactionPlugin(ViewportMovePlugin.Name).resume();
        }
        this.drag = true;
    }
    onDragMove(event) {
        if (this.boxSelect && event.target.isCanvas()) {
            this.boxSelectDraw(event.start, event.end);
        }
    }
    onDragEnd(event) {
        if (this.boxSelect && event.target.isCanvas() && event.isLeftButton) {
            this.boxSelectDraw(event.start, event.end);
            this.boxSelectGraphicCheck();
            this.app.interactionPlugin(ViewportMovePlugin.Name).pause();
            this.box.clear();
            this.box.visible = false;
        }
    }
    setLeftCursor(e) {
        const target = e.target;
        this.leftDownTarget = target;
        if (target.isCanvas() && this.app.pixi.view.style) {
            this.app.pixi.view.style.cursor = 'grab';
        }
    }
    resumeLeftCursor() {
        if (this.leftDownTarget &&
            this.leftDownTarget.isCanvas() &&
            this.app.pixi.view.style) {
            this.app.pixi.view.style.cursor = 'inherit';
        }
        this.leftDownTarget = null;
    }
    setCursor(e) {
        const target = e.target;
        this.rightTarget = target;
        if (target.isCanvas() && this.app.pixi.view.style) {
            this.app.pixi.view.style.cursor = 'grab';
        }
    }
    resumeCursor() {
        if (this.rightTarget &&
            this.rightTarget.isCanvas() &&
            this.app.pixi.view.style) {
            this.app.pixi.view.style.cursor = 'inherit';
        }
        this.rightTarget = null;
    }
    onMouseDown(e) {
        this.leftDownTarget = e.target;
        this.graphicSelect = false;
        // 图形
        const graphic = this.leftDownTarget.getGraphic();
        if (graphic) {
            const app = this.app;
            // 图形选中
            if (!e.ctrlKey && !graphic.selected && graphic.selectable) {
                app.updateSelected(graphic);
                graphic.childEdit = false;
                this.graphicSelect = true;
            }
            else if (!e.ctrlKey && graphic.selected && graphic.childEdit) {
                if (this.leftDownTarget.isGraphicChild() &&
                    this.leftDownTarget.selectable) {
                    graphic.setChildSelected(this.leftDownTarget);
                }
                else {
                    graphic.exitChildEdit();
                }
            }
        }
    }
    /**
     * 选中处理
     * @param e
     */
    onMouseUp(e) {
        const app = this.app;
        if (!this.drag) {
            const target = e.target;
            const graphic = e.target.getGraphic();
            if (graphic &&
                graphic.selected &&
                !this.graphicSelect &&
                app.selectedGraphics.length == 1 &&
                target === this.leftDownTarget &&
                target.isGraphicChild() &&
                target.selectable) {
                graphic.childEdit = true;
            }
            if (e.ctrlKey) {
                // 多选
                if (graphic) {
                    if (graphic.childEdit && target === this.leftDownTarget) {
                        graphic.invertChildSelected(target);
                    }
                    else {
                        graphic.invertSelected();
                    }
                }
            }
            else {
                // 非多选
                if (e.target.isCanvas()) {
                    this.app.updateSelected();
                }
                else {
                    if (graphic &&
                        graphic.childEdit &&
                        app.selectedGraphics.length === 1 &&
                        target === this.leftDownTarget) {
                        graphic.setChildSelected(target);
                    }
                }
            }
            // 多个图形选中，退出子元素编辑模式
            const selecteds = this.app.selectedGraphics;
            if (selecteds.length > 1) {
                selecteds.forEach((g) => g.exitChildEdit());
            }
        }
        this.clearCache();
    }
    /**
     * 清理缓存
     */
    clearCache() {
        this.drag = false;
        this.leftDownTarget = null;
    }
    get boxSelect() {
        return this.options.boxSelect;
    }
    get selectFilter() {
        return this.options.selectFilter;
    }
    /**
     * 框选图形绘制并检查
     */
    boxSelectDraw(start, end) {
        if (!this.drag)
            return;
        // 绘制框选矩形框
        this.box.clear();
        this.box.lineStyle({
            width: 2,
            color: this.app.appOptions.assistantElementColor ||
                AppConsts.assistantElementColor,
        });
        const dsx = end.x - start.x;
        const dsy = end.y - start.y;
        let { x, y } = start;
        if (dsx < 0) {
            x += dsx;
        }
        if (dsy < 0) {
            y += dsy;
        }
        const width = Math.abs(dsx);
        const height = Math.abs(dsy);
        this.box.drawRect(x, y, width, height);
    }
    /**
     * 框选图形判断
     * @returns
     */
    boxSelectGraphicCheck() {
        if (!this.drag)
            return;
        // 遍历筛选
        const boxRect = this.box.getLocalBounds();
        const app = this.app;
        const selects = [];
        app.queryStore.getAllGraphics().forEach((g) => {
            if ((this.selectFilter == undefined && g.visible) ||
                (!!this.selectFilter && this.selectFilter(g))) {
                // 选择过滤器
                if (g.boxIntersectCheck(boxRect)) {
                    selects.push(g);
                }
            }
        });
        app.updateSelected(...selects);
    }
}

let target;
class GlobalKeyboardHelper {
    appKeyboardPluginMap = [];
    constructor() {
        window.onkeydown = (e) => {
            this.appKeyboardPluginMap.forEach((plugin) => {
                const listenerMap = plugin.getKeyListener(e);
                listenerMap?.forEach((listener) => {
                    if (listener.global) {
                        listener.press(e, plugin.app);
                    }
                });
            });
            if (e.ctrlKey) {
                if (e.code == 'KeyS') {
                    // 屏蔽全局Ctrl+S保存操作
                    return false;
                }
            }
            if (target && target.nodeName == 'CANVAS') {
                // 事件的目标是画布时，屏蔽总的键盘操作操作
                if (e.ctrlKey) {
                    if (e.code == 'KeyA' || e.code == 'KeyS') {
                        // 屏蔽Canvas上的Ctrl+A、Ctrl+S操作
                        return false;
                    }
                }
            }
            return true;
        };
        window.onkeyup = (e) => {
            this.appKeyboardPluginMap.forEach((plugin) => {
                const listenerMap = plugin.getKeyListener(e);
                listenerMap?.forEach((listener) => {
                    if (listener.global) {
                        listener.release(e, plugin.app);
                    }
                });
            });
        };
    }
    registerGAKPlugin(plugin) {
        if (!this.appKeyboardPluginMap.find((pg) => pg == plugin)) {
            this.appKeyboardPluginMap.push(plugin);
        }
    }
    removeGAKPlugin(plugin) {
        const index = this.appKeyboardPluginMap.findIndex((pg) => pg == plugin);
        if (index >= 0) {
            this.appKeyboardPluginMap.splice(index, 1);
        }
    }
}
const GlobalKeyboardPlugin = new GlobalKeyboardHelper();
class JlGraphicAppKeyboardPlugin {
    app;
    /**
     * 结构为Map<key.code|key.key|key.keyCode, Map<KeyListener.identifier, KeyListener>>
     */
    keyListenerMap = new Map(); // 键值监听map
    keyListenerStackMap = new Map(); // 键值监听栈(多次注册相同的监听会把之前注册的监听器入栈，移除最新的监听会从栈中弹出一个作为指定事件监听处理器)
    constructor(app) {
        this.app = app;
        GlobalKeyboardPlugin.registerGAKPlugin(this);
        const onMouseUpdateTarget = (e) => {
            const node = e.target;
            target = node;
        };
        const keydownHandle = (e) => {
            // console.debug(e.key, e.code, e.keyCode);
            if (target && target == this.app.dom?.getElementsByTagName('canvas')[0]) {
                const listenerMap = this.getKeyListener(e);
                listenerMap?.forEach((listener) => {
                    if (!listener.global) {
                        listener.press(e, this.app);
                    }
                });
            }
        };
        const keyupHandle = (e) => {
            if (target && target == this.app.dom?.getElementsByTagName('canvas')[0]) {
                const listenerMap = this.getKeyListener(e);
                listenerMap?.forEach((listener) => {
                    if (!listener.global) {
                        listener.release(e, this.app);
                    }
                });
            }
        };
        document.addEventListener('mousedown', onMouseUpdateTarget, false);
        document.addEventListener('keydown', keydownHandle, false);
        document.addEventListener('keyup', keyupHandle, false);
        this.app.on('destroy', () => {
            document.removeEventListener('mousedown', onMouseUpdateTarget, false);
            document.removeEventListener('keydown', keydownHandle, false);
            document.removeEventListener('keyup', keyupHandle, false);
            GlobalKeyboardPlugin.removeGAKPlugin(this);
        });
    }
    getOrInit(key) {
        let map = this.keyListenerMap.get(key);
        if (map === undefined) {
            map = new Map();
            this.keyListenerMap.set(key, map);
        }
        return map;
    }
    getOrInitStack(key) {
        let stack = this.keyListenerStackMap.get(key);
        if (stack === undefined) {
            stack = [];
            this.keyListenerStackMap.set(key, stack);
        }
        return stack;
    }
    /**
     * 注册按键监听，若有旧的，旧的入栈
     * @param keyListener
     */
    addKeyListener(keyListener) {
        const map = this.getOrInit(keyListener.value);
        // 查询是否有旧的监听，若有入栈
        const old = map.get(keyListener.identifier);
        if (old) {
            const stack = this.getOrInitStack(keyListener.identifier);
            stack.push(old);
        }
        map.set(keyListener.identifier, keyListener);
    }
    /**
     * 移除按键监听，若是当前注册的监听，尝试从栈中取出作为按键监听器，若是旧的，则同时移除栈中的监听
     * @param keyListener
     */
    removeKeyListener(keyListener) {
        keyListener.onRemove();
        const map = this.getOrInit(keyListener.value);
        const old = map.get(keyListener.identifier);
        map.delete(keyListener.identifier);
        const stack = this.getOrInitStack(keyListener.identifier);
        if (old && old === keyListener) {
            // 是旧的监听
            const listener = stack.pop();
            if (listener) {
                map.set(keyListener.identifier, listener);
            }
        }
        else {
            // 移除栈中的
            const index = stack.findIndex((ls) => ls === keyListener);
            if (index >= 0) {
                stack.splice(index, 1);
            }
        }
    }
    getKeyListenerBy(key) {
        return this.keyListenerMap.get(key);
    }
    getKeyListener(e) {
        return (this.getKeyListenerBy(e.key) ||
            this.getKeyListenerBy(e.code) ||
            this.getKeyListenerBy(e.keyCode));
    }
    isKeyListened(key) {
        return this.getOrInit(key).size > 0;
    }
    /**
     * 获取所有注册监听的键值（组合键）
     */
    getAllListenedKeys() {
        const keys = [];
        this.keyListenerMap.forEach((v) => v.forEach((_listener, ck) => keys.push(ck)));
        return keys;
    }
}
var CombinationKey;
(function (CombinationKey) {
    CombinationKey["Ctrl"] = "Ctrl";
    CombinationKey["Alt"] = "Alt";
    CombinationKey["Shift"] = "Shift";
})(CombinationKey || (CombinationKey = {}));
const DefaultKeyListenerOptions = {
    value: '',
    combinations: [],
    global: false,
    onPress: undefined,
    pressTriggerAsOriginalEvent: false,
    onRelease: undefined,
};
class KeyListener {
    // value 支持keyCode，key，code三种值
    options;
    isPress = false;
    constructor(options) {
        this.options = Object.assign({}, DefaultKeyListenerOptions, options);
    }
    static create(options) {
        return new KeyListener(options);
    }
    get value() {
        return this.options.value;
    }
    get combinations() {
        return this.options.combinations;
    }
    get identifier() {
        return this.options.combinations.join('+') + '+' + this.options.value;
    }
    get global() {
        return this.options.global;
    }
    get onPress() {
        return this.options.onPress;
    }
    set onPress(v) {
        this.options.onPress = v;
    }
    get onRelease() {
        return this.options.onRelease;
    }
    set onRelease(v) {
        this.options.onRelease = v;
    }
    get pressTriggerEveryTime() {
        return this.options.pressTriggerAsOriginalEvent;
    }
    set pressTriggerEveryTime(v) {
        this.options.pressTriggerAsOriginalEvent = v;
    }
    press(e, app) {
        if (!this.checkCombinations(e)) {
            console.debug('组合键不匹配, 不执行press', e, this);
            return;
        }
        if (this.pressTriggerEveryTime || !this.isPress) {
            this.isPress = true;
            if (this.onPress) {
                this.onPress(e, app);
            }
        }
    }
    /**
     * 检查组合键是否匹配
     */
    checkCombinations(e) {
        const cbs = this.combinations;
        if (cbs.length > 0) {
            if (((e.altKey && cbs.includes(CombinationKey.Alt)) ||
                (!e.altKey && !cbs.includes(CombinationKey.Alt))) &&
                ((e.ctrlKey && cbs.includes(CombinationKey.Ctrl)) ||
                    (!e.ctrlKey && !cbs.includes(CombinationKey.Ctrl))) &&
                ((e.shiftKey && cbs.includes(CombinationKey.Shift)) ||
                    (!e.shiftKey && !cbs.includes(CombinationKey.Shift)))) {
                return true;
            }
        }
        else {
            return !e.altKey && !e.ctrlKey && !e.shiftKey;
        }
        return false;
    }
    release(e, app) {
        if (this.isPress) {
            this.isPress = false;
            if (this.onRelease) {
                this.onRelease(e, app);
            }
        }
    }
    onRemove() {
        // 重置按下状态
        this.isPress = false;
    }
}

/**
 * 图形复制插件
 */
class GraphicCopyPlugin {
    container;
    scene;
    keyListeners;
    graphicControlers;
    copys;
    start;
    running = false;
    moveLimit;
    constructor(scene) {
        this.scene = scene;
        this.container = new Container();
        this.graphicControlers = [];
        this.copys = [];
        this.keyListeners = [];
        this.keyListeners.push(new KeyListener({
            // ESC 用于取消复制操作
            value: 'Escape',
            global: true,
            // combinations: [CombinationKey.Ctrl],
            onPress: () => {
                this.cancle();
            },
        }), new KeyListener({
            // X 限制只能在x轴移动
            value: 'KeyX',
            global: true,
            // combinations: [CombinationKey.Ctrl],
            onPress: () => {
                this.updateMoveLimit('x');
            },
        }), new KeyListener({
            // Y 限制只能在y轴移动
            value: 'KeyY',
            global: true,
            // combinations: [CombinationKey.Ctrl],
            onPress: () => {
                this.updateMoveLimit('y');
            },
        }));
    }
    updateMoveLimit(limit) {
        if (this.moveLimit === limit) {
            this.moveLimit = undefined;
        }
        else {
            this.moveLimit = limit;
        }
    }
    init() {
        if (this.running)
            return;
        if (this.scene.selectedGraphics.length === 0) {
            throw new Error('没有选中图形，复制取消');
        }
        this.running = true;
        this.copys = [];
        this.container.alpha = 0.5;
        this.scene.canvas.addChild(this.container);
        const app = this.scene;
        this.scene.selectedGraphics.forEach((g) => {
            const template = app.getGraphicTemplatesByType(g.type);
            const clone = template.clone(g);
            this.copys.push(clone);
            this.container.position.set(0, 0);
            this.container.addChild(clone);
            clone.repaint();
        });
        this.graphicControlers.forEach((graphicControler) => {
            if (graphicControler.check()) {
                this.keyListeners.push(...graphicControler.controlerList);
            }
        });
        this.scene.canvas.on('mousemove', this.onPointerMove, this);
        this.scene.canvas.on('mouseup', this.onFinish, this);
        this.scene.canvas.on('rightup', this.cancle, this);
        this.keyListeners.forEach((kl) => {
            this.scene.app.addKeyboardListener(kl);
        });
    }
    addGraphicControlers(graphicControlers) {
        this.graphicControlers.push(...graphicControlers);
    }
    clear() {
        this.running = false;
        this.start = undefined;
        this.moveLimit = undefined;
        this.copys = [];
        this.container.removeChildren();
        this.scene.canvas.removeChild(this.container);
        this.scene.canvas.off('mousemove', this.onPointerMove, this);
        this.scene.canvas.off('mouseup', this.onFinish, this);
        this.scene.canvas.off('rightup', this.cancle, this);
        this.keyListeners.forEach((kl) => {
            this.scene.app.removeKeyboardListener(kl);
        });
        this.keyListeners = this.keyListeners.splice(0, 3);
    }
    onPointerMove(e) {
        const cp = this.scene.toCanvasCoordinates(e.global);
        if (!this.start) {
            this.start = cp;
        }
        else {
            if (this.moveLimit === 'x') {
                const dx = cp.x - this.start.x;
                this.container.position.x = dx;
                this.container.position.y = 0;
            }
            else if (this.moveLimit === 'y') {
                const dy = cp.y - this.start.y;
                this.container.position.x = 0;
                this.container.position.y = dy;
            }
            else {
                const dx = cp.x - this.start.x;
                const dy = cp.y - this.start.y;
                this.container.position.x = dx;
                this.container.position.y = dy;
            }
        }
        for (let i = 0; i < this.graphicControlers.length; i++) {
            if (this.graphicControlers[i].moveLimitOption?.moveLimitName ==
                this.moveLimit) {
                this.graphicControlers[i].moveLimitOption?.moveLimit(e);
            }
            break;
        }
    }
    onFinish() {
        console.log('复制确认');
        // 将图形添加到app
        this.copys.forEach((g) => {
            g.position.x += this.container.position.x;
            g.position.y += this.container.position.y;
        });
        this.saveCopyGraphic();
        this.clear();
    }
    saveCopyGraphic() {
        this.scene.app.addGraphicAndRecord(...this.copys);
        this.scene.detectRelations();
        this.scene.updateSelected(...this.copys);
    }
    cancle() {
        console.log('复制操作取消');
        this.scene.canvas.removeChild(this.container);
        this.clear();
    }
}

class VectorGraphicUtil {
    static handle(obj) {
        const vg = obj;
        const onScaleChange = function (obj) {
            if (vg.isParent(obj)) {
                vg.updateOnScaled();
            }
        };
        const registerScaleChange = function registerScaleChange(obj) {
            if (!obj.scaledListenerOn) {
                obj.scaledListenerOn = true;
                obj.getCanvas().scene.on('viewport-scaled', onScaleChange);
            }
        };
        const unregisterScaleChange = function unregisterScaleChange(obj) {
            obj.scaledListenerOn = false;
            obj.getCanvas().scene.off('viewport-scaled', onScaleChange);
        };
        obj.onAddToCanvas = function onAddToCanvas() {
            obj.updateOnScaled();
            registerScaleChange(obj);
        };
        obj.onRemoveFromCanvas = function onRemoveFromCanvas() {
            // console.debug('矢量图像onRemoveFromCanvas');
            unregisterScaleChange(obj);
        };
        obj.on('added', (container) => {
            setTimeout(() => {
                if (container.isInCanvas()) {
                    obj.onAddToCanvas(container.getCanvas());
                }
            }, 0);
        });
    }
}

/**
 * 矢量文字.实现原理：在缩放发生变化时，更新fontSize
 */
class VectorText extends Text {
    vectorFontSize = 8;
    scaled = 1;
    scaledListenerOn = false;
    constructor(text, style, canvas) {
        super(text, style, canvas);
        VectorGraphicUtil.handle(this);
    }
    updateOnScaled() {
        const scaled = this.getAllParentScaled();
        const scale = Math.max(scaled.x, scaled.y);
        this.style.fontSize = this.vectorFontSize * scale;
        this.scale.set(1 / scale, 1 / scale);
    }
    /**
     * 设置矢量文字的字体大小
     */
    setVectorFontSize(fontSize) {
        if (this.vectorFontSize !== fontSize) {
            this.vectorFontSize = fontSize;
            this.updateOnScaled();
        }
    }
}

/**
 * 拖拽点参数
 */
const DraggablePointParam = {
    lineWidth: 1,
    lineColor: 0x000000,
    fillColor: 0xffffff,
    radius: 5, // 半径
};
const DraggablePointGraphic = new Graphics();
DraggablePointGraphic.lineStyle(DraggablePointParam.lineWidth, DraggablePointParam.lineColor);
DraggablePointGraphic.beginFill(DraggablePointParam.fillColor);
DraggablePointGraphic.drawCircle(0, 0, DraggablePointParam.radius);
DraggablePointGraphic.endFill();
/**
 * 拖拽点，用于更新图形属性
 */
class DraggablePoint extends Graphics {
    scaledListenerOn = false;
    /**
     *
     * @param point 画布坐标点
     */
    constructor(point) {
        super(DraggablePointGraphic.geometry);
        this.position.copyFrom(point);
        this.eventMode = 'static';
        this.draggable = true;
        this.cursor = 'crosshair';
        VectorGraphicUtil.handle(this);
    }
    updateOnScaled() {
        const scaled = this.getAllParentScaled();
        const scale = Math.max(scaled.x, scaled.y);
        this.scale.set(1 / scale, 1 / scale);
    }
}

/**
 * 浮点数相等判断误差值
 */
const epsilon = 0.00001;
/**
 * 判断浮点数是不是0
 * @param v
 * @returns
 */
function isZero(v) {
    if (Math.abs(v) < epsilon) {
        return true;
    }
    return false;
}
/**
 * 两浮点数是否相等
 * @param f1
 * @param f2
 * @returns
 */
function floatEquals(f1, f2) {
    return isZero(f1 - f2);
}

/* eslint-disable @typescript-eslint/no-this-alias */
class Vector2 {
    constructor(values) {
        if (values !== undefined) {
            this.xy = values;
        }
    }
    static from(p) {
        return new Vector2([p.x, p.y]);
    }
    values = new Float32Array(2);
    static zero = new Vector2([0, 0]);
    static one = new Vector2([1, 1]);
    get x() {
        return this.values[0];
    }
    set x(value) {
        this.values[0] = value;
    }
    get y() {
        return this.values[1];
    }
    set y(value) {
        this.values[1] = value;
    }
    get xy() {
        return [this.values[0], this.values[1]];
    }
    set xy(values) {
        this.values[0] = values[0];
        this.values[1] = values[1];
    }
    at(index) {
        return this.values[index];
    }
    reset() {
        this.x = 0;
        this.y = 0;
    }
    copy(dest) {
        if (!dest) {
            dest = new Vector2();
        }
        dest.x = this.x;
        dest.y = this.y;
        return dest;
    }
    negate(dest) {
        if (!dest) {
            dest = this;
        }
        dest.x = -this.x;
        dest.y = -this.y;
        return dest;
    }
    equals(vector, threshold = epsilon) {
        if (Math.abs(this.x - vector.x) > threshold) {
            return false;
        }
        if (Math.abs(this.y - vector.y) > threshold) {
            return false;
        }
        return true;
    }
    length() {
        return Math.sqrt(this.squaredLength());
    }
    squaredLength() {
        const x = this.x;
        const y = this.y;
        return x * x + y * y;
    }
    add(vector) {
        this.x += vector.x;
        this.y += vector.y;
        return this;
    }
    subtract(vector) {
        this.x -= vector.x;
        this.y -= vector.y;
        return this;
    }
    multiply(vector) {
        this.x *= vector.x;
        this.y *= vector.y;
        return this;
    }
    divide(vector) {
        this.x /= vector.x;
        this.y /= vector.y;
        return this;
    }
    scale(value, dest) {
        if (!dest) {
            dest = this;
        }
        dest.x *= value;
        dest.y *= value;
        return dest;
    }
    normalize(dest) {
        if (!dest) {
            dest = this;
        }
        let length = this.length();
        if (length === 1) {
            return this;
        }
        if (length === 0) {
            dest.x = 0;
            dest.y = 0;
            return dest;
        }
        length = 1.0 / length;
        dest.x *= length;
        dest.y *= length;
        return dest;
    }
    // multiplyMat2(matrix: mat2, dest?: Vector2): Vector2 {
    //   if (!dest) {
    //     dest = this;
    //   }
    //   return matrix.multiplyVec2(this, dest);
    // }
    // multiplyMat3(matrix: mat3, dest?: Vector2): Vector2 {
    //   if (!dest) {
    //     dest = this;
    //   }
    //   return matrix.multiplyVec2(this, dest);
    // }
    // static cross(vector: Vector2, vector2: Vector2, dest?: vec3): vec3 {
    //   if (!dest) {
    //     dest = new vec3();
    //   }
    //   const x = vector.x;
    //   const y = vector.y;
    //   const x2 = vector2.x;
    //   const y2 = vector2.y;
    //   const z = x * y2 - y * x2;
    //   dest.x = 0;
    //   dest.y = 0;
    //   dest.z = z;
    //   return dest;
    // }
    /**
     * 向量点乘
     * @param vector
     * @param vector2
     * @returns
     */
    static dot(vector, vector2) {
        return vector.x * vector2.x + vector.y * vector2.y;
    }
    /**
     * 向量长度
     * @param vector
     * @param vector2
     * @returns
     */
    static distance(vector, vector2) {
        return Math.sqrt(this.squaredDistance(vector, vector2));
    }
    /**
     * 向量长度平方
     * @param vector
     * @param vector2
     * @returns
     */
    static squaredDistance(vector, vector2) {
        const x = vector2.x - vector.x;
        const y = vector2.y - vector.y;
        return x * x + y * y;
    }
    /**
     * v2->v1的方向的单位向量
     * @param v1
     * @param v2
     * @param dest
     * @returns
     */
    static direction(v1, v2, dest) {
        if (!dest) {
            dest = new Vector2();
        }
        const x = v1.x - v2.x;
        const y = v1.y - v2.y;
        let length = Math.sqrt(x * x + y * y);
        if (length === 0) {
            dest.x = 0;
            dest.y = 0;
            return dest;
        }
        length = 1 / length;
        dest.x = x * length;
        dest.y = y * length;
        return dest;
    }
    static mix(vector, vector2, time, dest) {
        if (!dest) {
            dest = new Vector2();
        }
        const x = vector.x;
        const y = vector.y;
        const x2 = vector2.x;
        const y2 = vector2.y;
        dest.x = x + time * (x2 - x);
        dest.y = y + time * (y2 - y);
        return dest;
    }
    /**
     * 向量加法
     * @param vector
     * @param vector2
     * @param dest
     * @returns
     */
    static sum(vector, vector2, dest) {
        if (!dest) {
            dest = new Vector2();
        }
        dest.x = vector.x + vector2.x;
        dest.y = vector.y + vector2.y;
        return dest;
    }
    /**
     * 向量减法
     * @param vector
     * @param vector2
     * @param dest
     * @returns
     */
    static difference(vector, vector2, dest) {
        if (!dest) {
            dest = new Vector2();
        }
        dest.x = vector.x - vector2.x;
        dest.y = vector.y - vector2.y;
        return dest;
    }
    /**
     * 向量乘法
     * @param vector
     * @param vector2
     * @param dest
     * @returns
     */
    static product(vector, vector2, dest) {
        if (!dest) {
            dest = new Vector2();
        }
        dest.x = vector.x * vector2.x;
        dest.y = vector.y * vector2.y;
        return dest;
    }
    /**
     * 向量除法
     * @param vector
     * @param vector2
     * @param dest
     * @returns
     */
    static quotient(vector, vector2, dest) {
        if (!dest) {
            dest = new Vector2();
        }
        dest.x = vector.x / vector2.x;
        dest.y = vector.y / vector2.y;
        return dest;
    }
}

/**
 * 递归父节点执行逻辑
 * @param obj
 * @param handler
 */
function recursiveParents(obj, handler) {
    if (obj.parent) {
        handler(obj.parent);
        recursiveParents(obj.parent, handler);
    }
}
/**
 * 递归父节点查询父节点对象
 * @param obj
 * @param finder
 * @returns
 */
function recursiveFindParent(obj, finder) {
    if (obj.parent) {
        if (finder(obj.parent)) {
            return obj.parent;
        }
        else {
            return recursiveFindParent(obj.parent, finder);
        }
    }
    return null;
}
/**
 * 递归子节点执行逻辑
 * @param container
 * @param handler
 */
function recursiveChildren(container, handler) {
    container.children.forEach((child) => {
        handler(child);
        if (child.children) {
            recursiveChildren(child, handler);
        }
    });
}
/**
 * 递归子节点查询子节点对象
 */
function recursiveFindChild(container, finder) {
    let result = null;
    for (let i = 0; i < container.children.length; i++) {
        const child = container.children[i];
        if (finder(child)) {
            return child;
        }
        else if (child.children) {
            result = recursiveFindChild(child, finder);
        }
    }
    return result;
}
/**
 * 判断贝塞尔曲线数据是否正确
 * @param points
 */
function assertBezierPoints(points) {
    if (points.length < 4 || points.length % 3 !== 1) {
        throw new Error(`bezierCurve 数据错误: ${points}`);
    }
}
/**
 * 转换为贝塞尔曲线参数
 * @param points
 * @returns
 */
function convertToBezierParams(points) {
    assertBezierPoints(points);
    const bps = [];
    for (let i = 0; i < points.length - 3; i += 3) {
        const p1 = new Point(points[i].x, points[i].y);
        const p2 = new Point(points[i + 3].x, points[i + 3].y);
        const cp1 = new Point(points[i + 1].x, points[i + 1].y);
        const cp2 = new Point(points[i + 2].x, points[i + 2].y);
        bps.push({
            p1,
            p2,
            cp1,
            cp2,
        });
    }
    return bps;
}
/**
 * 根据分段数计算贝塞尔曲线所有点坐标
 * @param basePoints
 * @param segmentsCount
 * @returns
 */
function calculateBezierPoints(basePoints, segmentsCount) {
    const bps = convertToBezierParams(basePoints);
    const points = [];
    bps.forEach((bp) => {
        points.push(...calculateOneBezierPoints(bp.p1, bp.p2, bp.cp1, bp.cp2, segmentsCount));
    });
    return points;
}
/**
 * 根据分段数计算贝塞尔曲线所有点坐标
 * @param basePoints
 * @param segmentsCount
 * @returns
 */
function calculateOneBezierPoints(p1, p2, cp1, cp2, segmentsCount) {
    const points = [];
    const fromX = p1.x;
    const fromY = p1.y;
    const n = segmentsCount;
    let dt = 0;
    let dt2 = 0;
    let dt3 = 0;
    let t2 = 0;
    let t3 = 0;
    const cpX = cp1.x;
    const cpY = cp1.y;
    const cpX2 = cp2.x;
    const cpY2 = cp2.y;
    const toX = p2.x;
    const toY = p2.y;
    points.push(new Point(p1.x, p1.y));
    for (let i = 1, j = 0; i <= n; ++i) {
        j = i / n;
        dt = 1 - j;
        dt2 = dt * dt;
        dt3 = dt2 * dt;
        t2 = j * j;
        t3 = t2 * j;
        const px = dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX;
        const py = dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY;
        points.push(new Point(px, py));
    }
    return points;
}
/**
 * 计算矩形中点
 */
function getRectangleCenter(rectangle) {
    return new Point(rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2);
}
/**
 * 计算两个矩形中心对齐的坐标, PS: 计算的是较大包围框的中心
 * @param rect1
 * @param rect2
 * @returns
 */
function getCenterOfTwoRectangle(rect1, rect2) {
    const x = Math.abs(rect1.width - rect2.width) / 2;
    const y = Math.abs(rect1.height - rect2.height) / 2;
    return new Point(x, y);
}
/**
 * 序列化图形变换
 * @param obj
 * @returns
 */
function serializeTransform(obj) {
    const position = obj.position;
    const scale = obj.scale;
    const angle = obj.angle;
    const skew = obj.skew;
    return [position.x, position.y, scale.x, scale.y, angle, skew.x, skew.y];
}
/**
 * 反序列化变换数据到图形对象
 * @param obj
 * @param transform
 */
function deserializeTransformInto(obj, transform) {
    if (transform.length === 7) {
        obj.position.set(transform[0], transform[1]);
        obj.scale.set(transform[2], transform[3]);
        obj.angle = transform[4];
        obj.skew.set(transform[5], transform[6]);
    }
    else if (transform.length > 0) {
        console.warn('错误的变换数据', transform);
    }
}
/**
 * 将直线转换为多边形
 * @param p1
 * @param p2
 * @param thick
 * @returns
 */
function convertLineToPolygonPoints(p1, p2, thick) {
    const angle = Math.atan2(p2.y - p1.y, p2.x - p1.x) - Math.PI / 2;
    const half = thick / 2;
    const cos = Math.cos(angle) * half;
    const sin = Math.sin(angle) * half;
    return [
        new Point(p1.x - cos, p1.y - sin),
        new Point(p2.x - cos, p2.y - sin),
        new Point(p2.x + cos, p2.y + sin),
        new Point(p1.x + cos, p1.y + sin),
    ];
}
/**
 * 转换矩形为多边形点坐标
 * @param rect 矩形
 * @returns
 */
function convertRectangleToPolygonPoints(rect) {
    return [
        new Point(rect.x, rect.y),
        new Point(rect.x + rect.width, rect.y),
        new Point(rect.x + rect.width, rect.y + rect.height),
        new Point(rect.x, rect.y + rect.height),
    ];
}
/**
 * 计算线段中点坐标
 * @param p1
 * @param p2
 * @returns
 */
function calculateLineMidpoint(p1, p2) {
    const x = (p1.x + p2.x) / 2;
    const y = (p1.y + p2.y) / 2;
    return new Point(x, y);
}
/**
 * 计算线段细分坐标--线段分成几份
 * @param p1
 * @param p2
 * @param knife
 * @returns
 */
function calculateLineSegmentingPoint(p1, p2, knife) {
    const segmentingPoints = [];
    const x = p1.x < p2.x ? p1.x : p2.x;
    const y = p1.y < p2.y ? p1.y : p2.y;
    const w = Math.abs(p1.x - p2.x);
    const h = Math.abs(p1.y - p2.y);
    for (let i = 0; i < knife - 1; i++) {
        const pointX = x + (w * (i + 1)) / knife;
        const pointy = y + (h * (i + 1)) / knife;
        segmentingPoints.push(new Point(pointX, pointy));
    }
    return segmentingPoints;
}
/**
 * 计算点到直线距离
 * @param p1
 * @param p2
 * @param p
 */
function calculateDistanceFromPointToLine(p1, p2, p) {
    // 求直线的一般方程参数ABC，直线的一般式方程AX+BY+C=0
    const A = p1.y - p2.y;
    const B = p2.x - p1.x;
    const C = p1.x * p2.y - p1.y * p2.x;
    // 计算点到直线垂直距离: d = |Ax+By+C|/sqrt(A*A+B*B),其中x,y为点坐标
    const dl = Math.abs(A * p.x + B * p.y + C) / Math.sqrt(A * A + B * B);
    return dl;
}
/**
 * 计算点到直线的垂足坐标
 * @param p
 * @param p1
 * @param p2
 */
function calculateFootPointFromPointToLine(p1, p2, p) {
    if (p1.x == p2.x && p1.y == p2.y) {
        throw new Error(`直线两坐标点相等:${p1}`);
    }
    const k = -(((p1.x - p.x) * (p2.x - p1.x) + (p1.y - p.y) * (p2.y - p1.y)) /
        (Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2)));
    if (isZero(k)) {
        return new Point(p.x, p.y);
    }
    const xf = k * (p2.x - p1.x) + p1.x;
    const yf = k * (p2.y - p1.y) + p1.y;
    return new Point(xf, yf);
}
/**
 * 计算直线与圆的交点
 * 1用直线到圆心的距离和半径相比，判断是否和圆有交点；
 * 2求出圆心在直线上面的垂点；
 * 3算出直线的单位向量e；
 * 4求出一侧交点(Intersection)到projectPoint的长度(sideLength)；
 * 5求出sideLength和这侧端点到projectPoint距离的比例(ratio)；
 * 6projectPoint +/- ratio * e = 两侧交点；
 * @param p0 圆心坐标
 * @param radius 圆半径
 * @param p1 直线坐标1
 * @param p2 直线坐标2
 * @returns 交点坐标，可能2/1/0个
 */
function calculateIntersectionPointOfCircleAndLine(p0, radius, p1, p2) {
    const distance = calculateDistanceFromPointToLine(p1, p2, p0);
    if (distance <= radius) {
        // 有交点
        // 计算垂点
        const pr = calculateFootPointFromPointToLine(p1, p2, p0);
        if (floatEquals(distance, radius)) {
            // 切线
            return [pr];
        }
        const vpr = new Vector2([pr.x, pr.y]);
        const vc = new Vector2([p0.x, p0.y]);
        // 计算直线单位向量
        const v1 = new Vector2([p1.x, p1.y]);
        const v2 = new Vector2([p2.x, p2.y]);
        const ve = Vector2.direction(v2, v1);
        const base = Math.sqrt(Math.abs(radius * radius - Vector2.difference(vpr, vc).squaredLength()));
        const vl = ve.scale(base);
        const ip1 = Vector2.sum(vpr, vl);
        const ip2 = Vector2.difference(vpr, vl);
        return [new Point(ip1.x, ip1.y), new Point(ip2.x, ip2.y)];
    }
    else {
        // 无交点
        return [];
    }
}
/**
 * 计算圆心与圆心外一点与圆的交点（取圆心到点的向量与圆的交点）
 * @param p0 圆心坐标
 * @param radius 圆半径
 * @param p 点坐标
 * @returns
 */
function calculateIntersectionPointOfCircleAndPoint(p0, radius, p) {
    const points = calculateIntersectionPointOfCircleAndLine(p0, radius, p0, p);
    const vc = new Vector2([p0.x, p0.y]);
    const vp = new Vector2([p.x, p.y]);
    const vecp = Vector2.direction(vp, vc);
    for (let i = 0; i < points.length; i++) {
        const ip = points[i];
        const ve = Vector2.direction(new Vector2([ip.x, ip.y]), vc);
        if (ve.equals(vecp)) {
            return ip;
        }
    }
    throw new Error('计算圆心与圆心外一点与圆的交点逻辑错误');
}
/**
 * 计算点基于点的镜像点坐标
 * @param bp 基准点
 * @param p 待镜像的点坐标
 * @param distance 镜像点到基准点的距离，默认为p到基准点的距离,即对称
 * @returns
 */
function calculateMirrorPoint(bp, p, distance) {
    const vbp = Vector2.from(bp);
    const vp = Vector2.from(p);
    const direction = Vector2.direction(vbp, vp);
    if (distance == undefined) {
        distance = Vector2.distance(vbp, vp);
    }
    const vmp = Vector2.sum(vbp, direction.scale(distance));
    return new Point(vmp.x, vmp.y);
}
/**
 * 计算基于给定轴的给定点的镜像点坐标
 * @param pa 给定轴线的坐标
 * @param pb 给定轴线的坐标
 * @param p 待镜像点坐标
 * @param distance
 * @returns
 */
function calculateMirrorPointBasedOnAxis(pa, pb, p, distance) {
    const fp = calculateFootPointFromPointToLine(pa, pb, p);
    if (fp.equals(p)) {
        return fp;
    }
    else {
        return calculateMirrorPoint(fp, p, distance);
    }
}
/**
 * 计算直线与水平夹角,角度按顺时针，从0开始
 * @param p1
 * @param p2
 * @returns 角度，范围[0, 360)
 */
function angleToAxisx(p1, p2) {
    if (p1.x == p2.x && p1.y == p2.y) {
        throw new Error('一个点无法计算角度');
    }
    const dx = Math.abs(p1.x - p2.x);
    const dy = Math.abs(p1.y - p2.y);
    if (p2.x == p1.x) {
        if (p2.y > p1.y) {
            return 90;
        }
        else {
            return 270;
        }
    }
    if (p2.y == p1.y) {
        if (p2.x > p1.x) {
            return 0;
        }
        else {
            return 180;
        }
    }
    const angle = (Math.atan2(dy, dx) * 180) / Math.PI;
    if (p2.x > p1.x) {
        if (p2.y > p1.y) {
            return angle;
        }
        else if (p2.y < p1.y) {
            return 360 - angle;
        }
    }
    else if (p2.x < p1.x) {
        if (p2.y > p1.y) {
            return 180 - angle;
        }
        else {
            return 180 + angle;
        }
    }
    return angle;
}
/**
 * 计算两线夹角,pc与pa,pb的夹角，顺时针为正，逆时针为负
 * @param pa 交点
 * @param pb 锚定
 * @param pc
 * @returns 夹角, [-180, 180]
 */
function angleOfIncludedAngle(pa, pb, pc) {
    const abAngle = angleToAxisx(pa, pb);
    const acAngle = angleToAxisx(pa, pc);
    let angle = acAngle - abAngle;
    if (angle < -180) {
        angle = 360 + angle;
    }
    else if (angle > 180) {
        angle = -(360 - angle);
    }
    return angle;
}
/**
 * 计算两点连线的法向量
 * @param point1
 * @param point2
 * @returns 单位法向量
 */
function getNormalVector(point1, point2) {
    const x1 = point1.x, y1 = point1.y;
    const x2 = point2.x, y2 = point2.y;
    const length = Math.sqrt((y2 - y1) ** 2 + (x2 - x1) ** 2);
    return [(y2 - y1) / length, (x1 - x2) / length];
}
/**
 * 点延向量方向移动
 * @param point
 * @param normal  单位向量
 * @param length 平移长度
 * @returns 移动后的点
 */
function movePointAlongNormal(point, normal, length) {
    const newPoint = new Point(point.x + length * normal[0], point.y + length * normal[1]);
    return newPoint;
}
/**
 * 计算两组点各自组成直线的相交点(若两线平行 返回第一组坐标第一个点)
 * @param line1 两点坐标列表
 * @param line2 两点坐标列表
 * @returns 相交点
 */
function getIntersectionPoint(line1, line2) {
    const a1 = line1[0], b1 = line1[1];
    const a2 = line1[2], b2 = line1[3];
    const a3 = line2[0], b3 = line2[1];
    const a4 = line2[2], b4 = line2[3];
    const denominator = (a3 - a4) * (b1 - b2) - (a1 - a2) * (b3 - b4);
    if (denominator === 0) {
        return new Point(a1, b1);
    }
    const x = ((a3 - a4) * (a2 * b1 - a1 * b2) - (a1 - a2) * (a4 * b3 - a3 * b4)) /
        denominator;
    const y = ((b3 - b4) * (b2 * a1 - b1 * a2) - (b1 - b2) * (b4 * a3 - b3 * a4)) /
        -denominator;
    return new Point(x, y);
}
/**
 * 是否平行线
 * @param p1
 * @param p2
 * @param pa
 * @param pb
 * @returns
 */
function isParallelLines(p1, p2, pa, pb) {
    const vle1 = Vector2.direction(Vector2.from(p1), Vector2.from(p2));
    const vle2 = Vector2.direction(Vector2.from(pa), Vector2.from(pb));
    if (vle2.equals(vle1)) {
        return true;
    }
    return vle1.equals(Vector2.direction(Vector2.from(pb), Vector2.from(pa)));
}
/**
 * 点是否在线段上
 * @param p1
 * @param p2
 * @param p
 * @returns
 */
function isPointOnLine(p1, p2, p) {
    const vp1 = Vector2.from(p1);
    const vp2 = Vector2.from(p2);
    const vp = Vector2.from(p);
    if (vp1.equals(vp) || vp2.equals(vp)) {
        return true;
    }
    const vle = Vector2.direction(vp1, Vector2.from(p2));
    const vpe = Vector2.direction(vp1, vp);
    if (vle.equals(vpe)) {
        return (Vector2.difference(vp1, vp2).squaredLength() >=
            Vector2.difference(vp1, vp).squaredLength());
    }
    return false;
}
/**
 * 两条线段是否存在包含关系
 * @param line1
 * @param line2
 * @returns
 */
function isLineContainOther(line1, line2) {
    return ((isPointOnLine(line1.p1, line1.p2, line2.p1) &&
        isPointOnLine(line1.p1, line1.p2, line2.p2)) ||
        (isPointOnLine(line2.p1, line2.p2, line1.p1) &&
            isPointOnLine(line2.p1, line2.p2, line1.p2)));
}
/** 均分线段, 返回各线段端点 */
function splitLineEvenly(p1, p2, count) {
    const [stepX, stepY] = [(p2.x - p1.x) / count, (p2.y - p1.y) / count];
    return Array(count)
        .fill(1)
        .map((_, i) => {
        return [
            { x: p1.x + stepX * i, y: p1.y + stepY * i },
            { x: p1.x + stepX * (i + 1), y: p1.y + stepY * (i + 1) },
        ];
    });
}
function splitPolyline(points, count) {
    if (points.length !== 2) {
        let totalLen = 0;
        const lengths = [];
        for (let i = 1; i < points.length; i++) {
            const { x: x1, y: y1 } = points[i - 1], { x: x2, y: y2 } = points[i];
            const len = new Vector2([x2 - x1, y2 - y1]).length();
            totalLen += len;
            lengths.push(len);
        }
        const counts = lengths.map((length) => Math.round((count * length) / totalLen));
        if (counts.reduce((p, c) => p + c, 0) !== count) {
            const intersection = counts.reduce((p, c) => p + c, 0) - count;
            let maxCountIndex = 0, maxCount = 0;
            counts.forEach((c, i) => {
                if (c > maxCount) {
                    maxCount = c;
                    maxCountIndex = i;
                }
            });
            counts[maxCountIndex] + intersection;
        }
        return counts
            .map((count, i) => {
            return splitLineEvenly(points[i], points[i + 1], count);
        })
            .flat();
    }
    else {
        return splitLineEvenly(points[0], points[points.length - 1], count);
    }
}
function getParallelOfPolyline(points, offset, side) {
    const { PI, cos, acos } = Math;
    const angleBase = side === 'L' ? -PI / 2 : PI / 2;
    return points.map((p, i) => {
        let baseUnitVec; //上一段的基准单位向量
        let angle; //偏转角度
        let len; //结合偏转角度的实际偏移量
        if (!points[i - 1] || !points[i + 1]) {
            angle = angleBase;
            len = offset;
            baseUnitVec = points[i - 1]
                ? new Vector2([
                    p.x - points[i - 1].x,
                    p.y - points[i - 1].y,
                ]).normalize()
                : new Vector2([
                    points[i + 1].x - p.x,
                    points[i + 1].y - p.y,
                ]).normalize();
        }
        else {
            const vp = new Vector2([p.x - points[i - 1].x, p.y - points[i - 1].y]);
            const vn = new Vector2([points[i + 1].x - p.x, points[i + 1].y - p.y]);
            const cosTheta = Vector2.dot(vn, vp) / (vp.length() * vn.length());
            const direction = vp.x * vn.y - vp.y * vn.x > 0; //det(vp|vn)>0?
            const theta = direction ? acos(cosTheta) : -acos(cosTheta);
            angle = angleBase + theta / 2;
            len = offset / cos(theta / 2);
            baseUnitVec = Vector2.from(vp).normalize();
        }
        return new Matrix()
            .scale(len, len)
            .rotate(angle)
            .translate(p.x, p.y)
            .apply(baseUnitVec);
    });
}

// /**
//  * 点线碰撞检测
//  * @param pa 线段a端坐标
//  * @param pb 线段b端坐标
//  * @param p 点坐标
//  * @param tolerance 容忍度，越大检测范围越大
//  * @returns
//  */
// export function linePoint(pa: Point, pb: Point, p: Point, tolerance: number): boolean {
//     return (Math.abs(distanceSquared(pa.x, pa.y, pb.x, pb.y) - (distanceSquared(pa.x, pa.y, p.x, p.y) + distanceSquared(pb.x, pb.y, p.x, p.y))) <= tolerance)
// }
/**
 * 根据点到直线的垂直距离计算碰撞
 * @param pa 线段a端坐标
 * @param pb 线段b端坐标
 * @param p 点坐标
 * @param lineWidth 线宽
 * @param exact 是否精确（使用给定线宽，否则线宽会设置为8）
 * @returns
 */
function linePoint(pa, pb, p, lineWidth, exact = false) {
    if (!exact && lineWidth < 6) {
        lineWidth = 6;
    }
    // 求直线的一般方程参数ABC，直线的一般式方程AX+BY+C=0
    const A = pa.y - pb.y;
    const B = pb.x - pa.x;
    const C = pa.x * pb.y - pa.y * pb.x;
    // 计算点到直线垂直距离: d = |Ax+By+C|/sqrt(A*A+B*B),其中x,y为点坐标
    const dl = Math.abs(A * p.x + B * p.y + C) / Math.sqrt(A * A + B * B);
    const intersect = dl <= lineWidth / 2;
    if (intersect) {
        // 距离在线宽范围内,再判断点是否超过线段两端点范围外(两端点外会有一点误差，两端点线宽一半半径的圆范围内)
        const da = distance(pa.x, pa.y, p.x, p.y);
        const db = distance(pb.x, pb.y, p.x, p.y);
        const dab = distance(pa.x, pa.y, pb.x, pb.y);
        return da <= dl + dab && db <= dl + dab;
    }
    return false;
}
/**
 * 折线与点碰撞
 * @param points 折线端点列表
 * @param p 点座标
 * @param lineWidth 线宽
 */
function polylinePoint(points, p, lineWidth) {
    const len = points.length;
    for (let i = 0; i < len - 1; i++) {
        if (linePoint(points[i], points[i + 1], p, lineWidth)) {
            return true;
        }
    }
    return false;
}
/**
 * 线线碰撞检测
 * @param pa 线段1a端坐标
 * @param pb 线段1b端坐标
 * @param p1 线段2a端坐标
 * @param p2 线段2b端坐标
 * @returns
 */
function lineLine(pa, pb, p1, p2) {
    const x1 = pa.x;
    const y1 = pa.y;
    const x2 = pb.x;
    const y2 = pb.y;
    const x3 = p1.x;
    const y3 = p1.y;
    const x4 = p2.x;
    const y4 = p2.y;
    const s1_x = x2 - x1;
    const s1_y = y2 - y1;
    const s2_x = x4 - x3;
    const s2_y = y4 - y3;
    const s = (-s1_y * (x1 - x3) + s1_x * (y1 - y3)) / (-s2_x * s1_y + s1_x * s2_y);
    const t = (s2_x * (y1 - y3) - s2_y * (x1 - x3)) / (-s2_x * s1_y + s1_x * s2_y);
    return s >= 0 && s <= 1 && t >= 0 && t <= 1;
}
/**
 * 点和矩形碰撞检测
 * @param p 点作弊
 * @param rect 矩形
 * @returns
 */
function pointBox(p, rect) {
    const { x, y, width, height } = rect;
    const x2 = p.x;
    const y2 = p.y;
    return x2 >= x && x2 <= x + width && y2 >= y && y2 <= y + height;
}
/**
 * 线和矩形碰撞检测
 * @param pa 线段a端坐标
 * @param pb 线段b端坐标
 * @param rect 矩形
 * @returns
 */
function lineBox(pa, pb, rect) {
    if (pointBox(pa, rect) || pointBox(pb, rect)) {
        return true;
    }
    const { x, y, width, height } = rect;
    const rp1 = new Point(x, y);
    const rp2 = new Point(x + width, y);
    const rp3 = new Point(x + width, y + height);
    const rp4 = new Point(x, y + height);
    return (lineLine(pa, pb, rp1, rp2) ||
        lineLine(pa, pb, rp2, rp3) ||
        lineLine(pa, pb, rp3, rp4) ||
        lineLine(pa, pb, rp1, rp4));
}
/**
 * 多线段和矩形碰撞检测
 * @param points
 * @param rect
 * @returns false / 碰撞的线段序号
 */
function polylineBox(points, rect) {
    if (points.length < 2) {
        return false;
    }
    for (let i = 0; i < points.length - 1; i++) {
        const p1 = points[i];
        const p2 = points[i + 1];
        if (lineBox(p1, p2, rect)) {
            return true;
        }
    }
    return false;
}
/**
 * 两点碰撞检测
 * @param p1
 * @param p2
 * @param tolerance
 * @returns
 */
function pointPoint2(p1, p2, tolerance) {
    return pointPoint(p1.x, p1.y, p2.x, p2.y, tolerance);
}
/**
 * 两点碰撞检测
 * @param x1
 * @param y1
 * @param x2
 * @param y2
 * @param tolerance 容忍度/两点半径和
 * @returns
 */
function pointPoint(x1, y1, x2, y2, tolerance) {
    return distance(x1, y1, x2, y2) <= tolerance;
}
/**
 * 两点距离
 * @param x1
 * @param y1
 * @param x2
 * @param y2
 * @returns
 */
function distance(x1, y1, x2, y2) {
    return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
}
/**
 * 两点距离
 * @param p1
 * @param p2
 * @returns
 */
function distance2(p1, p2) {
    return distance(p1.x, p1.y, p2.x, p2.y);
}
/**
 * 圆和点的碰撞检测
 * @param x1 圆心x
 * @param y1 圆心y
 * @param r1 圆半径
 * @param x2 点x
 * @param y2 点y
 * @returns
 */
function circlePoint(x1, y1, r1, x2, y2) {
    const x = x2 - x1;
    const y = y2 - y1;
    return x * x + y * y <= r1 * r1;
}
/**
 * 圆和点的碰撞检测--不包括圆内部
 */
function circlePoint2(x1, y1, r1, x2, y2, tolerance) {
    const x = x2 - x1;
    const y = y2 - y1;
    return (x * x + y * y <= (r1 + tolerance) * (r1 + tolerance) &&
        x * x + y * y >= (r1 - tolerance) * (r1 - tolerance));
}
/**
 * 点和多边形碰撞检测
 */
function pointPolygon(p, points, lineWidth) {
    const { x, y } = p;
    const length = points.length;
    let c = false;
    let i, j;
    for (i = 0, j = length - 1; i < length; i++) {
        if (points[i].y > y !== points[j].y > y &&
            x <
                ((points[j].x - points[i].x) * (y - points[i].y)) /
                    (points[j].y - points[i].y) +
                    points[i].x) {
            c = !c;
        }
        j = i;
    }
    if (c) {
        return true;
    }
    for (i = 0; i < length - 1; i++) {
        let p1, p2;
        if (i === length - 1) {
            p1 = points[i];
            p2 = points[0];
        }
        else {
            p1 = points[i];
            p2 = points[i + 1];
        }
        if (linePoint(p1, p2, p, lineWidth)) {
            return true;
        }
    }
    return false;
}
/**
 * 线和多边形碰撞检测
 * @param p1
 * @param p2
 * @param points
 * @param tolerance 多边形包围线宽
 * @returns
 */
function linePolygon(p1, p2, points, lineWidth, polygonWidth) {
    if (pointPolygon(p1, points, polygonWidth)) {
        return true;
    }
    const length = points.length;
    for (let i = 0; i < length; i++) {
        let pa, pb;
        if (i === length - 1) {
            pa = points[i];
            pb = points[0];
        }
        else {
            pa = points[i];
            pb = points[i + 1];
        }
        // TODO:此处后续需考虑有线宽的情况
        if (lineLine(pa, pb, p1, p2)) {
            return true;
        }
    }
    return false;
}
/**
 * 多边线与多边形碰撞检测
 * @param polylinePoints 多边线所有点坐标
 * @param polygonPoints 多边形所有点坐标
 * @param polylineWidth 多边线的线宽
 * @param polygonWidth 多边形线宽
 * @returns
 */
function polylinePolygon(polylinePoints, polygonPoints, polylineWidth, polygonWidth) {
    const length = polylinePoints.length;
    for (let i = 0; i < length - 1; i++) {
        const p1 = polylinePoints[i];
        const p2 = polylinePoints[i + 1];
        if (linePolygon(p1, p2, polygonPoints, polylineWidth, polygonWidth)) {
            return true;
        }
    }
    return false;
}

function debounce(fn, waitMs = 250) {
    let timeoutId;
    const debouncedFunction = function (context, ...args) {
        const invokeFunction = function () {
            timeoutId = undefined;
            fn.apply(context, args);
        };
        if (timeoutId !== undefined) {
            // console.debug('debounce clear timeout', fn);
            clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(invokeFunction, waitMs);
    };
    debouncedFunction.cancel = function () {
        if (timeoutId !== undefined) {
            clearTimeout(timeoutId);
        }
    };
    return debouncedFunction;
}

const UP = new Point(0, -1);
const DOWN = new Point(0, 1);
const LEFT = new Point(-1, 0);
const RIGHT = new Point(1, 0);
/**
 * 越界结果
 */
class OutOfBound {
    left;
    top;
    right;
    bottom;
    constructor(left, top, right, bottom) {
        this.left = left;
        this.top = top;
        this.right = right;
        this.bottom = bottom;
    }
    static check(rect, bound) {
        const left = rect.left < bound.left;
        const top = rect.top < bound.top;
        const right = rect.right > bound.right;
        const bottom = rect.bottom > bound.bottom;
        return new OutOfBound(left, top, right, bottom);
    }
    static none() {
        return new OutOfBound(false, false, false, false);
    }
    static leftOut() {
        return new OutOfBound(true, false, false, false);
    }
    static topOut() {
        return new OutOfBound(false, true, false, false);
    }
    static rightOut() {
        return new OutOfBound(false, false, true, false);
    }
    static bottomOut() {
        return new OutOfBound(false, false, false, true);
    }
    static leftTopOut() {
        return new OutOfBound(true, true, false, false);
    }
    static rightBottomOut() {
        return new OutOfBound(false, false, true, true);
    }
}

/* eslint-disable @typescript-eslint/no-unused-vars */
/**
 * 可吸附点图形参数
 */
const AbsorbablePointParam = {
    lineWidth: 1,
    lineColor: '#000000',
    fillColor: '#E77E0E',
    radius: 5, // 半径
};
const AbsorbablePointGraphic = new Graphics();
// AbsorbablePointGraphic.lineStyle(
//   AbsorbablePointParam.lineWidth,
//   AbsorbablePointParam.lineColor
// );
AbsorbablePointGraphic.beginFill(AbsorbablePointParam.fillColor);
AbsorbablePointGraphic.drawCircle(0, 0, AbsorbablePointParam.radius);
AbsorbablePointGraphic.endFill();
/**
 * 可吸附点
 */
class AbsorbablePoint extends Graphics {
    _point;
    absorbRange;
    scaledListenerOn = false;
    /**
     *
     * @param point 画布坐标
     * @param absorbRange
     */
    constructor(point, absorbRange = 10) {
        super(AbsorbablePointGraphic.geometry);
        this._point = new Point(point.x, point.y);
        this.absorbRange = absorbRange;
        this.position.copyFrom(this._point);
        this.interactive;
        VectorGraphicUtil.handle(this);
    }
    compareTo(other) {
        if (other instanceof AbsorbablePoint) {
            return this.absorbRange - other.absorbRange;
        }
        throw new Error('非可吸附点');
    }
    isOverlapping(other) {
        if (other instanceof AbsorbablePoint) {
            return (this._point.equals(other._point) &&
                this.absorbRange === other.absorbRange);
        }
        return false;
    }
    tryAbsorb(...objs) {
        for (let i = 0; i < objs.length; i++) {
            const obj = objs[i];
            const canvasPosition = obj.getPositionOnCanvas();
            if (distance(this._point.x, this._point.y, canvasPosition.x, canvasPosition.y) < this.absorbRange) {
                obj.updatePositionByCanvasPosition(this._point);
            }
        }
    }
    updateOnScaled() {
        const scaled = this.getAllParentScaled();
        const scale = Math.max(scaled.x, scaled.y);
        this.scale.set(1 / scale, 1 / scale);
    }
}
/**
 * 可吸附线
 */
class AbsorbableLine extends Graphics {
    p1;
    p2;
    absorbRange;
    _color = '#E77E0E';
    /**
     *
     * @param p1 画布坐标
     * @param p2 画布坐标
     * @param absorbRange
     */
    constructor(p1, p2, absorbRange = 20) {
        super();
        this.p1 = new Point(p1.x, p1.y);
        this.p2 = new Point(p2.x, p2.y);
        this.absorbRange = absorbRange;
        this.redraw();
    }
    isOverlapping(other) {
        if (other instanceof AbsorbableLine) {
            const contain = isLineContainOther({ p1: this.p1, p2: this.p2 }, { p1: other.p1, p2: other.p2 });
            return contain;
        }
        return false;
    }
    compareTo(other) {
        if (other instanceof AbsorbableLine) {
            return distance2(this.p1, this.p2) - distance2(other.p1, other.p2);
        }
        throw new Error('非可吸附线');
    }
    redraw() {
        this.clear();
        this.lineStyle(1, new Color(this._color));
        this.moveTo(this.p1.x, this.p1.y);
        this.lineTo(this.p2.x, this.p2.y);
    }
    tryAbsorb(...objs) {
        for (let i = 0; i < objs.length; i++) {
            const obj = objs[i];
            const canvasPosition = obj.getPositionOnCanvas();
            if (linePoint(this.p1, this.p2, canvasPosition, this.absorbRange, true)) {
                const fp = calculateFootPointFromPointToLine(this.p1, this.p2, canvasPosition);
                obj.updatePositionByCanvasPosition(fp);
            }
        }
    }
}
/**
 * 可吸附圆
 */
class AbsorbableCircle extends Graphics {
    absorbRange;
    p0;
    radius;
    _color = '#E77E0E';
    /**
     *
     * @param p 画布坐标
     * @param radius
     * @param absorbRange
     */
    constructor(p, radius, absorbRange = 10) {
        super();
        this.p0 = new Point(p.x, p.y);
        this.radius = radius;
        this.absorbRange = absorbRange;
        this.redraw();
    }
    isOverlapping(other) {
        if (other instanceof AbsorbableCircle) {
            return this.p0.equals(other.p0) && this.radius === other.radius;
        }
        return false;
    }
    compareTo(other) {
        if (other instanceof AbsorbableCircle) {
            return this.absorbRange - other.absorbRange;
        }
        throw new Error('非可吸附圆');
    }
    redraw() {
        this.clear();
        this.lineStyle(1, new Color(this._color));
        this.drawCircle(this.p0.x, this.p0.y, this.radius);
    }
    tryAbsorb(...objs) {
        for (let i = 0; i < objs.length; i++) {
            const obj = objs[i];
            const canvasPosition = obj.getPositionOnCanvas();
            const len = distance(this.p0.x, this.p0.y, canvasPosition.x, canvasPosition.y);
            if (len > this.radius - this.absorbRange &&
                len < this.radius + this.absorbRange) {
                // 吸附，计算直线与圆交点，更新对象坐标
                const p = calculateIntersectionPointOfCircleAndPoint(this.p0, this.radius, canvasPosition);
                obj.updatePositionByCanvasPosition(p);
            }
        }
    }
}

const DefaultDashedLineOptions = {
    length: 4,
    startSpace: 0,
    space: 4,
    lineWidth: 1,
    color: '#0000ff',
};
class DashedLine extends Container {
    p1;
    p2;
    _options;
    constructor(p1, p2, options) {
        super();
        const config = Object.assign({}, DefaultDashedLineOptions, options);
        this._options = config;
        this.p1 = new Point(p1.x, p1.y);
        this.p2 = new Point(p2.x, p2.y);
        this.redraw();
    }
    setOptions(options) {
        if (options.startSpace != undefined) {
            this._options.startSpace = options.startSpace;
        }
        if (options.length != undefined) {
            this._options.length = options.length;
        }
        if (options.space != undefined) {
            this._options.space = options.space;
        }
        if (options.lineWidth != undefined) {
            this._options.lineWidth = options.lineWidth;
        }
        if (options.color != undefined) {
            this._options.color = options.color;
        }
        this.redraw();
    }
    redraw() {
        this.removeChildren();
        const p1 = this.p1;
        const p2 = this.p2;
        const option = this._options;
        const total = Math.pow(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2), 0.5);
        let len = option.startSpace;
        while (len < total) {
            let dashedLen = option.length;
            if (len + option.length > total) {
                dashedLen = total - len;
            }
            const line = new Graphics();
            line.lineStyle(option.lineWidth, option.color);
            line.moveTo(len, 0);
            line.lineTo(len + dashedLen, 0);
            this.addChild(line);
            len = len + dashedLen + option.space;
        }
        this.pivot.set(0, option.lineWidth / 2);
        this.position.set(p1.x, p1.y);
        this.angle = angleToAxisx(p1, p2);
    }
}

class GraphicEditPlugin extends Container {
    graphic;
    constructor(g) {
        super();
        this.graphic = g;
        this.zIndex = 2;
        this.sortableChildren = true;
        this.graphic.on('transformstart', this.hideAll, this);
        this.graphic.on('transformend', this.showAll, this);
        this.graphic.on('repaint', this.updateEditedPointsPosition, this);
    }
    destroy(options) {
        this.graphic.off('transformstart', this.hideAll, this);
        this.graphic.off('transformend', this.showAll, this);
        this.graphic.off('repaint', this.updateEditedPointsPosition, this);
        super.destroy(options);
    }
    hideAll() {
        this.visible = false;
    }
    showAll() {
        this.updateEditedPointsPosition();
        this.visible = true;
    }
}
class LineEditPlugin extends GraphicEditPlugin {
    linePoints;
    editedPoints = [];
    constructor(g) {
        super(g);
        this.linePoints = g.linePoints;
        this.graphic.on('dataupdate', this.reset, this);
    }
    destroy(options) {
        this.graphic.off('dataupdate', this.reset, this);
        super.destroy(options);
    }
    reset() {
        this.linePoints = this.graphic.linePoints;
        this.removeChildren();
        this.editedPoints.splice(0, this.editedPoints.length);
        this.initEditPoints();
    }
}
function getWayLineIndex(points, p) {
    let start = 0;
    let end = 0;
    let minDistance = 0;
    for (let i = 1; i < points.length; i++) {
        const sp = points[i - 1];
        const ep = points[i];
        let distance = calculateDistanceFromPointToLine(sp, ep, p);
        distance = Math.round(distance * 100) / 100;
        if (i == 1) {
            minDistance = distance;
        }
        if (distance == minDistance) {
            const minX = Math.min(sp.x, ep.x);
            const maxX = Math.max(sp.x, ep.x);
            const minY = Math.min(sp.y, ep.y);
            const maxY = Math.max(sp.y, ep.y);
            const point = calculateFootPointFromPointToLine(sp, ep, p);
            if (point.x >= minX &&
                point.x <= maxX &&
                point.y >= minY &&
                point.y <= maxY) {
                start = i - 1;
            }
        }
        if (distance < minDistance) {
            minDistance = distance;
            start = i - 1;
        }
    }
    end = start + 1;
    return { start, end };
}
function getWaypointRangeIndex(points, curve, p, lineWidth) {
    let start = 0;
    let end = 0;
    if (!curve) {
        // 直线
        for (let i = 1; i < points.length; i++) {
            const sp = points[i - 1];
            const ep = points[i];
            const fp = calculateFootPointFromPointToLine(sp, ep, p);
            if (linePoint(sp, ep, fp, 1, true)) {
                start = i - 1;
                end = i;
                break;
            }
        }
    }
    else {
        // 贝塞尔曲线
        const bps = convertToBezierParams(points);
        for (let i = 0; i < bps.length; i++) {
            const bp = bps[i];
            if (pointPolygon(p, [bp.p1, bp.cp1, bp.cp2, bp.p2], lineWidth)) {
                start = i * 3;
                end = start + 3;
            }
        }
        // assertBezierPoints(points);
        // for (let i = 0; i < points.length - 3; i += 3) {
        //   const p1 = points[i];
        //   const cp1 = points[i + 1];
        //   const cp2 = points[i + 2];
        //   const p2 = points[i + 3];
        //   if (pointPolygon(p, [p1, cp1, cp2, p2], lineWidth)) {
        //     start = i;
        //     end = i + 3;
        //   }
        // }
    }
    return { start, end };
}
/**
 * 折线编辑(兼容线段)
 */
class PolylineEditPlugin extends LineEditPlugin {
    static Name = 'line_points_edit';
    options;
    constructor(g, options) {
        super(g);
        this.options = Object.assign({}, options);
        this.name = PolylineEditPlugin.Name;
        this.initEditPoints();
    }
    initEditPoints() {
        const cps = this.graphic.localToCanvasPoints(...this.linePoints);
        for (let i = 0; i < cps.length; i++) {
            const p = cps[i];
            const dp = new DraggablePoint(p);
            dp.on('transforming', () => {
                const tlp = this.graphic.canvasToLocalPoint(dp.position);
                const cp = this.linePoints[i];
                cp.x = tlp.x;
                cp.y = tlp.y;
                this.graphic.repaint();
            });
            if (this.options.onEditPointCreate) {
                this.options.onEditPointCreate(this.graphic, dp, i);
            }
            this.editedPoints.push(dp);
        }
        this.addChild(...this.editedPoints);
    }
    updateEditedPointsPosition() {
        const cps = this.graphic.localToCanvasPoints(...this.linePoints);
        if (cps.length === this.editedPoints.length) {
            for (let i = 0; i < cps.length; i++) {
                const cp = cps[i];
                this.editedPoints[i].position.copyFrom(cp);
            }
        }
    }
}
function addWayPoint(graphic, curve, start, end, p) {
    if (!curve) {
        addLineWayPoint(graphic, start, end, p);
    }
    else {
        addBezierWayPoint(graphic, start, end, p);
    }
}
function addLineWayPoint(graphic, start, end, p) {
    const linePoints = graphic.linePoints;
    const points = linePoints.slice(0, start + 1);
    points.push(new Point(p.x, p.y));
    points.push(...linePoints.slice(end));
    graphic.linePoints = points;
}
function addPolygonSegmentingPoint(graphic, start, end, knife = 2) {
    const linePoints = graphic.linePoints;
    const points = linePoints.slice(0, start + 1);
    points.push(...calculateLineSegmentingPoint(linePoints[start], linePoints[end], knife));
    points.push(...linePoints.slice(end));
    graphic.linePoints = points;
}
function assertBezierWayPoint(i) {
    const c = i % 3;
    if (c !== 0) {
        throw new Error(`i=${i}的点不是路径点`);
    }
}
function addBezierWayPoint(graphic, start, end, p) {
    if (start === end) {
        console.error('添加贝塞尔曲线路径点开始结束点相等', start);
        throw new Error('开始结束点不能一致');
    }
    assertBezierWayPoint(start);
    assertBezierWayPoint(end);
    const linePoints = graphic.linePoints;
    const points = linePoints.slice(0, start + 2);
    const ap = new Point(p.x, p.y);
    points.push(ap.clone(), ap.clone(), ap.clone());
    points.push(...linePoints.slice(end - 1));
    graphic.linePoints = points;
}
function removeWayPoint(graphic, curve, i) {
    if (!curve) {
        removeLineWayPoint(graphic, i);
    }
    else {
        removeBezierWayPoint(graphic, i);
    }
}
function removeLineWayPoint(graphic, i) {
    const linePoints = graphic.linePoints;
    if (linePoints.length > 2) {
        const points = linePoints.slice(0, i);
        points.push(...linePoints.slice(i + 1));
        graphic.linePoints = points;
    }
}
function removeBezierWayPoint(graphic, i) {
    let points;
    const linePoints = graphic.linePoints;
    const c = i % 3;
    if (c !== 0) {
        throw new Error(`i=${i}的点${linePoints[i]}不是路径点`);
    }
    if (i === 0) {
        // 第一个点
        if (linePoints.length > 4) {
            points = linePoints.slice(3);
        }
        else {
            console.error('不能移除:剩余点数不足');
        }
    }
    else if (i === linePoints.length - 1) {
        // 最后一个点
        if (linePoints.length > 4) {
            points = linePoints.slice(0, linePoints.length - 3);
        }
        else {
            console.error('无法移除:剩余点数不足');
        }
    }
    else {
        // 中间点
        points = linePoints.slice(0, i - 1);
        points.push(...linePoints.slice(i + 2));
    }
    if (points) {
        graphic.linePoints = points;
    }
}
/**
 * 清除路径点(只留端点),适用于直线和贝塞尔曲线
 * @param graphic
 * @param curve
 */
function clearWayPoint(graphic, curve) {
    const linePoints = graphic.linePoints;
    if (!curve) {
        if (linePoints.length > 2) {
            const points = linePoints.slice(0, 1);
            points.push(...linePoints.slice(-1));
            graphic.linePoints = points;
        }
    }
    else {
        if (linePoints.length > 4) {
            const points = linePoints.slice(0, 2);
            points.push(...linePoints.slice(-2));
            graphic.linePoints = points;
        }
    }
}
/**
 * 贝塞尔曲线编辑
 */
class BezierCurveEditPlugin extends LineEditPlugin {
    static Name = 'bezier_curve_points_edit';
    options;
    // 曲线控制点辅助线
    auxiliaryLines = [];
    constructor(g, options) {
        super(g);
        this.options = Object.assign({}, { smooth: true }, options);
        this.name = BezierCurveEditPlugin.Name;
        this.initEditPoints();
    }
    reset() {
        this.auxiliaryLines.splice(0, this.auxiliaryLines.length);
        super.reset();
    }
    initEditPoints() {
        const cps = this.graphic.localToCanvasPoints(...this.linePoints);
        for (let i = 0; i < cps.length; i++) {
            const p = cps[i];
            const dp = new DraggablePoint(p);
            const startOrEnd = i == 0 || i == cps.length - 1;
            const c = i % 3;
            if (c === 1) {
                // 前一路径点的控制点
                dp.zIndex = 2;
                const fp = cps[i - 1];
                const line = new Graphics();
                this.drawAuxiliaryLine(line, fp, p);
                this.auxiliaryLines.push(line);
            }
            else if (c === 2) {
                // 后一路径点的控制点
                dp.zIndex = 3;
                const np = cps[i + 1];
                const line = new Graphics();
                this.drawAuxiliaryLine(line, p, np);
                this.auxiliaryLines.push(line);
            }
            dp.on('transforming', (e) => {
                const tlp = this.graphic.canvasToLocalPoint(dp.position);
                const cp = this.linePoints[i];
                cp.x = tlp.x;
                cp.y = tlp.y;
                if (this.options.smooth || this.options.symmetry) {
                    if (c === 0 && !startOrEnd) {
                        const shiftData = e.getData();
                        const fp = this.linePoints[i - 1];
                        const np = this.linePoints[i + 1];
                        fp.x = fp.x + shiftData.dx;
                        fp.y = fp.y + shiftData.dy;
                        np.x = np.x + shiftData.dx;
                        np.y = np.y + shiftData.dy;
                    }
                    else if (c === 1 && i !== 1) {
                        const bp = this.linePoints[i - 1];
                        const fp2 = this.linePoints[i - 2];
                        let mp;
                        if (this.options.symmetry) {
                            mp = calculateMirrorPoint(bp, cp);
                        }
                        else {
                            const distance = distance2(bp, fp2);
                            mp = calculateMirrorPoint(bp, cp, distance);
                        }
                        fp2.x = mp.x;
                        fp2.y = mp.y;
                    }
                    else if (c === 2 && i !== cps.length - 2) {
                        const bp = this.linePoints[i + 1];
                        const np2 = this.linePoints[i + 2];
                        let mp;
                        if (this.options.symmetry) {
                            mp = calculateMirrorPoint(bp, cp);
                        }
                        else {
                            const distance = distance2(bp, np2);
                            mp = calculateMirrorPoint(bp, cp, distance);
                        }
                        np2.x = mp.x;
                        np2.y = mp.y;
                    }
                }
                this.graphic.repaint();
            });
            if (this.options.onEditPointCreate) {
                this.options.onEditPointCreate(this.graphic, dp, i);
            }
            this.editedPoints.push(dp);
            if (this.auxiliaryLines.length > 0) {
                this.addChild(...this.auxiliaryLines);
            }
        }
        this.addChild(...this.editedPoints);
    }
    drawAuxiliaryLine(line, p1, p2) {
        line.clear();
        if (this.options.auxiliaryLineColor) {
            line.lineStyle(1, new Color(this.options.auxiliaryLineColor));
        }
        else {
            line.lineStyle(1, new Color('blue'));
        }
        line.moveTo(p1.x, p1.y);
        line.lineTo(p2.x, p2.y);
    }
    updateEditedPointsPosition() {
        const cps = this.graphic.localToCanvasPoints(...this.linePoints);
        if (cps.length === this.editedPoints.length) {
            for (let i = 0; i < cps.length; i++) {
                const cp = cps[i];
                this.editedPoints[i].position.copyFrom(cp);
                const c = i % 3;
                const d = Math.floor(i / 3);
                if (c === 1 || c === 2) {
                    const li = d * 2 + c - 1;
                    const line = this.auxiliaryLines[li];
                    if (c === 1) {
                        const fp = cps[i - 1];
                        this.drawAuxiliaryLine(line, fp, cp);
                    }
                    else {
                        const np = cps[i + 1];
                        this.drawAuxiliaryLine(line, cp, np);
                    }
                }
            }
        }
    }
}

/* eslint-disable @typescript-eslint/no-explicit-any */
class ShiftData {
    /**
     * 起始位置
     */
    startPosition;
    /**
     * 上一次终点位置
     */
    lastPosition;
    /**
     * 当前位置
     */
    currentPosition;
    constructor(startPosition, currentPosition, lastPosition) {
        this.startPosition = startPosition;
        this.lastPosition = lastPosition;
        this.currentPosition = currentPosition;
    }
    static new(startPosition, currentPosition, lastPosition) {
        return new ShiftData(startPosition, currentPosition, lastPosition);
    }
    get dx() {
        if (!this.lastPosition || !this.currentPosition) {
            throw new Error('错误的位移数据或阶段');
        }
        return this.currentPosition.x - this.lastPosition.x;
    }
    get dy() {
        if (!this.lastPosition || !this.currentPosition) {
            throw new Error('错误的位移数据或阶段');
        }
        return this.currentPosition.y - this.lastPosition.y;
    }
    get dsx() {
        if (!this.currentPosition) {
            throw new Error('错误的位移数据或阶段');
        }
        return this.currentPosition.x - this.startPosition.x;
    }
    get dsy() {
        if (!this.currentPosition) {
            throw new Error('错误的位移数据或阶段');
        }
        return this.currentPosition.y - this.startPosition.y;
    }
}
class ScaleData {
    start;
    current;
    last;
    constructor(start, current, last) {
        this.start = start;
        this.current = current;
        this.last = last;
    }
    static new(start, current, last) {
        return new ScaleData(start, current, last);
    }
}
/**
 * 图形平移事件
 */
class GraphicTransformEvent {
    /**
     * 图形对象
     */
    target;
    type;
    data;
    constructor(target, type, data) {
        this.target = target;
        this.type = type;
        this.data = data;
    }
    getData() {
        return this.data;
    }
    static shift(target, data) {
        return new GraphicTransformEvent(target, 'shift', data);
    }
    static scale(target) {
        return new GraphicTransformEvent(target, 'scale', null);
    }
    static rotate(target) {
        return new GraphicTransformEvent(target, 'rotate', null);
    }
    static skew(target) {
        return new GraphicTransformEvent(target, 'skew', null);
    }
    isShift() {
        return this.type === 'shift';
    }
    isRotate() {
        return this.type === 'rotate';
    }
    isScale() {
        return this.type === 'scale';
    }
    isSkew() {
        return this.type === 'skew';
    }
}
class GraphicTransformPlugin extends InteractionPluginBase {
    static Name = '__graphic_transform_plugin';
    /**
     * 可吸附位置列表
     */
    absorbablePositions;
    apContainer;
    static AbsorbablePosisiontsName = '__AbsorbablePosisionts';
    constructor(app) {
        super(app, GraphicTransformPlugin.Name, InteractionPluginType.Other);
        this.apContainer = new Container();
        this.apContainer.name = GraphicTransformPlugin.AbsorbablePosisiontsName;
        this.app.canvas.addAssistantAppend(this.apContainer);
        app.on('options-update', (options) => {
            if (options.absorbablePositions) {
                this.absorbablePositions = this.filterAbsorbablePositions(options.absorbablePositions);
            }
        });
    }
    /**
     * 过滤重复的吸附位置
     * @param positions
     * @returns
     */
    filterAbsorbablePositions(positions) {
        const aps = [];
        for (let i = 0; i < positions.length; i++) {
            const ap1 = positions[i];
            let ap = ap1;
            for (let j = positions.length - 1; j > i; j--) {
                const ap2 = positions[j];
                if (ap.isOverlapping(ap2) && ap.compareTo(ap2) <= 0) {
                    ap = null;
                    break;
                }
            }
            if (ap != null) {
                aps.push(ap);
            }
        }
        return aps;
    }
    static new(app) {
        return new GraphicTransformPlugin(app);
    }
    bind() {
        this.app.on('drag_op_start', this.onDragStart, this);
        this.app.on('drag_op_move', this.onDragMove, this);
        this.app.on('drag_op_end', this.onDragEnd, this);
        this.app.on('graphicselectedchange', this.onGraphicSelectedChange, this);
        this.app.on('graphicchildselectedchange', this.onGraphicSelectedChange, this);
    }
    unbind() {
        this.app.off('drag_op_start', this.onDragStart, this);
        this.app.off('drag_op_move', this.onDragMove, this);
        this.app.off('drag_op_end', this.onDragEnd, this);
        this.app.off('graphicselectedchange', this.onGraphicSelectedChange, this);
        this.app.off('graphicchildselectedchange', this.onGraphicSelectedChange, this);
    }
    getDraggedTargets(e) {
        const targets = [];
        if (e.target.isGraphicChild() && e.target.selected && e.target.draggable) {
            const graphic = e.target.getGraphic();
            // 图形子元素
            recursiveChildren(graphic, (child) => {
                if (child.selected && child.draggable) {
                    targets.push(child);
                }
            });
        }
        else if ((e.target.isGraphic() || e.target.isGraphicChild()) &&
            e.target.getGraphic()?.draggable) {
            // 图形对象
            targets.push(...this.app.selectedGraphics);
        }
        else if (e.target.draggable) {
            targets.push(e.target);
        }
        return targets;
    }
    onDragStart(e) {
        if (!e.target.isCanvas() && e.isLeftButton) {
            const targets = this.getDraggedTargets(e);
            if (targets.length > 0) {
                targets.forEach((target) => {
                    target.shiftStartPoint = target.position.clone();
                    target.emit('transformstart', GraphicTransformEvent.shift(target, ShiftData.new(target.shiftStartPoint)));
                });
                // 显示吸附图形
                if (this.absorbablePositions && this.absorbablePositions.length > 0) {
                    this.apContainer.removeChildren();
                    this.apContainer.addChild(...this.absorbablePositions);
                }
            }
        }
    }
    onDragMove(e) {
        if (!e.target.isCanvas() && e.isLeftButton) {
            const targets = this.getDraggedTargets(e);
            if (targets.length > 0) {
                // 处理位移
                targets.forEach((target) => {
                    if (target.shiftStartPoint) {
                        target.shiftLastPoint = target.position.clone();
                        const { dx, dy } = e.toTargetShiftLen(target.parent);
                        target.position.set(target.shiftStartPoint.x + dx, target.shiftStartPoint.y + dy);
                    }
                });
                // 处理吸附
                if (this.absorbablePositions) {
                    for (let i = 0; i < this.absorbablePositions.length; i++) {
                        const ap = this.absorbablePositions[i];
                        ap.tryAbsorb(...targets);
                    }
                }
                // const start = new Date().getTime();
                // 事件发布
                targets.forEach((target) => {
                    if (target.shiftStartPoint && target.shiftLastPoint) {
                        target.emit('transforming', GraphicTransformEvent.shift(target, ShiftData.new(target.shiftStartPoint, target.position.clone(), target.shiftLastPoint)));
                    }
                });
            }
        }
    }
    onDragEnd(e) {
        if (!e.target.isCanvas() && e.isLeftButton) {
            const targets = this.getDraggedTargets(e);
            targets.forEach((target) => {
                if (target.shiftStartPoint) {
                    target.emit('transformend', GraphicTransformEvent.shift(target, ShiftData.new(target.shiftStartPoint, target.position.clone())));
                }
                target.shiftStartPoint = null;
            });
        }
        this.clearCache();
    }
    /**
     * 清理缓存
     */
    clearCache() {
        // 移除吸附图形
        this.absorbablePositions = [];
        this.apContainer.removeChildren();
    }
    onGraphicSelectedChange(g, selected) {
        let br = g.getAssistantAppend(BoundsGraphic.Name);
        if (!br) {
            // 绘制辅助包围框
            br = new BoundsGraphic(g);
        }
        if (selected) {
            if (br) {
                br.redraw();
                br.visible = true;
            }
        }
        else {
            if (br) {
                br.visible = false;
            }
        }
        if (g.scalable || g.rotatable) {
            // 缩放点
            let sp = g.getAssistantAppend(TransformPoints.Name);
            if (!sp) {
                sp = new TransformPoints(g);
            }
            if (selected) {
                sp.update();
                sp.visible = true;
            }
            else {
                sp.visible = false;
            }
        }
    }
}
/**
 * 缩放、旋转辅助
 */
class TransformPoints extends Container {
    static Name = 'transformPoints';
    static MinLength = 40;
    static LeftTopName = 'lt-scale-point';
    static TopName = 't-scale-point';
    static RightTopName = 'rt-scale-point';
    static RightName = 'r-scale-point';
    static RightBottomName = 'rb-scale-point';
    static BottomName = 'b-scale-point';
    static LeftBottomName = 'lb-scale-point';
    static LeftName = 'l-scale-point';
    static RotateName = 'rotate-point';
    obj;
    ltScalePoint;
    ltLocal = new Point();
    tScalePoint;
    tLocal = new Point();
    tCanvas = new Point();
    rtScalePoint;
    rtLocal = new Point();
    rScalePoint;
    rLocal = new Point();
    rbScalePoint;
    rbLocal = new Point();
    bScalePoint;
    bLocal = new Point();
    lbScalePoint;
    lbLocal = new Point();
    lScalePoint;
    lLocal = new Point();
    originScale = new Point();
    scalePivot = new Point();
    /**
     * 旋转拖拽点
     */
    rotatePoint;
    /**
     * 旋转中心坐标
     */
    rotatePivot;
    /**
     * 起始旋转坐标
     */
    rotateLastPoint;
    /**
     * 起始图形角度
     */
    startAngle = 0;
    /**
     * 当前角度信息文本辅助
     */
    angleAssistantText;
    /**
     * 旋转角度步长
     */
    angleStep = 1;
    /**
     * 修改旋转步长键盘监听
     */
    rotateAngleStepKeyListeners = [];
    constructor(obj) {
        super();
        this.obj = obj;
        this.name = TransformPoints.Name;
        this.angleAssistantText = new VectorText('', {
            fill: AppConsts.assistantElementColor,
        });
        this.angleAssistantText.setVectorFontSize(16);
        this.angleAssistantText.anchor.set(0.5);
        // 创建缩放拖拽点
        this.ltScalePoint = new DraggablePoint(new Point());
        this.ltScalePoint.name = TransformPoints.LeftTopName;
        this.addChild(this.ltScalePoint);
        this.tScalePoint = new DraggablePoint(new Point());
        this.tScalePoint.name = TransformPoints.TopName;
        this.addChild(this.tScalePoint);
        this.rtScalePoint = new DraggablePoint(new Point());
        this.rtScalePoint.name = TransformPoints.RightTopName;
        this.addChild(this.rtScalePoint);
        this.rScalePoint = new DraggablePoint(new Point());
        this.rScalePoint.name = TransformPoints.RightName;
        this.addChild(this.rScalePoint);
        this.rbScalePoint = new DraggablePoint(new Point());
        this.rbScalePoint.name = TransformPoints.RightBottomName;
        this.addChild(this.rbScalePoint);
        this.bScalePoint = new DraggablePoint(new Point());
        this.bScalePoint.name = TransformPoints.BottomName;
        this.addChild(this.bScalePoint);
        this.lbScalePoint = new DraggablePoint(new Point());
        this.lbScalePoint.name = TransformPoints.LeftBottomName;
        this.addChild(this.lbScalePoint);
        this.lScalePoint = new DraggablePoint(new Point());
        this.lScalePoint.name = TransformPoints.LeftName;
        this.addChild(this.lScalePoint);
        this.obj.on('transformstart', this.onObjTransformStart, this);
        this.obj.on('transformend', this.onObjTransformEnd, this);
        if (this.obj.children && this.obj.children.length > 0) {
            recursiveChildren(this.obj, (child) => {
                child.on('transformstart', this.onObjTransformStart, this);
                child.on('transformend', this.onObjTransformEnd, this);
            });
        }
        const pg = this.obj.getGraphic();
        if (pg != null) {
            pg.on('transformstart', this.onObjTransformStart, this);
            pg.on('transformend', this.onObjTransformEnd, this);
        }
        this.obj.on('repaint', this.onGraphicRepaint, this);
        this.children.forEach((dp) => {
            dp.on('transformstart', this.onScaleDragStart, this);
            dp.on('transforming', this.onScaleDragMove, this);
            dp.on('transformend', this.onScaleDragEnd, this);
        });
        // 创建旋转拖拽点
        this.rotatePoint = new DraggablePoint(new Point());
        this.addChild(this.rotatePoint);
        this.rotatePoint.on('transformstart', this.onRotateStart, this);
        this.rotatePoint.on('transforming', this.onRotateMove, this);
        this.rotatePoint.on('transformend', this.onRotateEnd, this);
        this.rotatePivot = new Point();
        this.rotateLastPoint = new Point();
        // 初始化旋转角度修改键盘监听器
        for (let i = 1; i < 10; i++) {
            this.rotateAngleStepKeyListeners.push(KeyListener.create({
                value: '' + i,
                onPress: () => {
                    this.angleStep = i;
                },
            }));
        }
        this.obj.addAssistantAppend(this);
    }
    onObjTransformStart() {
        this.visible = false;
    }
    onObjTransformEnd() {
        this.update();
        this.visible = true;
    }
    onGraphicRepaint() {
        if (this.visible) {
            this.update();
        }
    }
    /**
     * 旋转开始
     * @param de
     */
    onRotateStart(de) {
        this.hideAll();
        const assistantPoint = this.obj.localToCanvasPoint(this.obj.pivot);
        this.rotatePivot.copyFrom(assistantPoint);
        this.rotateLastPoint.copyFrom(de.target.position);
        this.startAngle = this.obj.angle;
        const app = this.obj.getGraphicApp();
        this.rotateAngleStepKeyListeners.forEach((listener) => app.addKeyboardListener(listener));
        this.obj.emit('transformstart', GraphicTransformEvent.rotate(this.obj));
        // app.emit('transformstart', app.selectedGraphics);
        this.obj.getCanvas().addAssistantAppends(this.angleAssistantText);
        this.updateAngleAssistantText(de);
    }
    updateAngleAssistantText(de) {
        this.angleAssistantText.text = this.obj.angle + '°';
        let cursorPoint = de.data?.startPosition;
        if (de.data?.currentPosition) {
            cursorPoint = de.data?.currentPosition;
        }
        if (cursorPoint) {
            this.angleAssistantText.position.x = cursorPoint.x;
            this.angleAssistantText.position.y = cursorPoint.y - 10;
        }
    }
    /**
     * 旋转移动
     * @param de
     */
    onRotateMove(de) {
        // 旋转角度计算逻辑：取锚点y负方向一点作为旋转点，求旋转点和锚点所形成的直线与x轴角度，此角度+90°即为最终旋转角度，再将旋转角度限制到(-180,180]之间
        let angle = angleToAxisx(this.rotatePivot, de.target.position);
        angle = Math.floor(angle / this.angleStep) * this.angleStep;
        const parentAngle = this.obj.parent.worldAngle;
        angle = (angle + 90 - parentAngle) % 360;
        if (angle > 180) {
            angle = angle - 360;
        }
        this.obj.angle = angle;
        this.updateAngleAssistantText(de);
        // this.obj.emit('rotatemove', this.obj);
    }
    /**
     * 旋转结束
     * @param de
     */
    onRotateEnd() {
        this.showAll();
        this.obj.getCanvas().removeAssistantAppends(this.angleAssistantText);
        this.rotateAngleStepKeyListeners.forEach((listener) => this.obj.getGraphicApp().removeKeyboardListener(listener));
        this.obj.emit('transformend', GraphicTransformEvent.rotate(this.obj));
    }
    /**
     * 缩放开始
     */
    onScaleDragStart() {
        this.hideAll();
        const points = convertRectangleToPolygonPoints(this.obj.getLocalBounds());
        const p0 = points[0];
        const p1 = points[1];
        const p2 = points[2];
        const p3 = points[3];
        this.scalePivot = this.obj.pivot.clone();
        this.ltLocal.copyFrom(p0);
        this.tCanvas.copyFrom(this.obj.localToCanvasPoint(calculateLineMidpoint(p0, p1)));
        this.tLocal.copyFrom(calculateLineMidpoint(p0, p1));
        this.rtLocal.copyFrom(p1);
        this.rLocal.copyFrom(calculateLineMidpoint(p1, p2));
        this.rbLocal.copyFrom(p2);
        this.bLocal.copyFrom(calculateLineMidpoint(p2, p3));
        this.lbLocal.copyFrom(p3);
        this.lLocal.copyFrom(calculateLineMidpoint(p0, p3));
        this.originScale = this.obj.scale.clone();
        this.obj.emit('transformstart', GraphicTransformEvent.scale(this.obj));
    }
    onScaleDragMove(e) {
        // 缩放计算逻辑：共8个方向缩放点，根据所拖拽的方向:
        // 1,计算缩放为1时的此点在拖拽开始时的位置到锚点x、y距离，
        // 2,计算拖拽点的当前位置到锚点的x、y方向距离，
        // PS:以上两个计算都是在local（也就是图形对象本地）坐标系，
        // 用当前距离除以原始距离即为缩放比例
        const defaultScale = new Point(1, 1);
        let originWidth = 0;
        let originHeight = 0;
        let width = 0;
        let height = 0;
        this.obj.scale.copyFrom(defaultScale);
        const point = this.obj.toLocal(e.target.parent.localToScreenPoint(e.target.position));
        if (e.target === this.ltScalePoint) {
            // 左上角
            originWidth = Math.abs(this.ltLocal.x - this.scalePivot.x);
            originHeight = Math.abs(this.ltLocal.y - this.scalePivot.y);
            width = Math.abs(point.x - this.scalePivot.x);
            height = Math.abs(point.y - this.scalePivot.y);
        }
        else if (e.target == this.tScalePoint) {
            // 上
            originHeight = Math.abs(this.tLocal.y - this.scalePivot.y);
            height = Math.abs(point.y - this.scalePivot.y);
        }
        else if (e.target == this.rtScalePoint) {
            // 右上
            originWidth = Math.abs(this.rtLocal.x - this.scalePivot.x);
            originHeight = Math.abs(this.rtLocal.y - this.scalePivot.y);
            width = Math.abs(point.x - this.scalePivot.x);
            height = Math.abs(point.y - this.scalePivot.y);
        }
        else if (e.target == this.rScalePoint) {
            // 右
            originWidth = Math.abs(this.rLocal.x - this.scalePivot.x);
            width = Math.abs(point.x - this.scalePivot.x);
        }
        else if (e.target == this.rbScalePoint) {
            // 右下
            originWidth = Math.abs(this.rbLocal.x - this.scalePivot.x);
            originHeight = Math.abs(this.rbLocal.y - this.scalePivot.y);
            width = Math.abs(point.x - this.scalePivot.x);
            height = Math.abs(point.y - this.scalePivot.y);
        }
        else if (e.target == this.bScalePoint) {
            // 下
            originHeight = Math.abs(this.bLocal.y - this.scalePivot.y);
            height = Math.abs(point.y - this.scalePivot.y);
        }
        else if (e.target == this.lbScalePoint) {
            // 左下
            originWidth = Math.abs(this.lbLocal.x - this.scalePivot.x);
            originHeight = Math.abs(this.lbLocal.y - this.scalePivot.y);
            width = Math.abs(point.x - this.scalePivot.x);
            height = Math.abs(point.y - this.scalePivot.y);
        }
        else {
            // 左
            originWidth = Math.abs(this.lLocal.x - this.scalePivot.x);
            width = Math.abs(point.x - this.scalePivot.x);
        }
        // 计算缩放比例，并根据是否保持纵横比两种情况进行缩放处理
        const sx = originWidth == 0 ? this.originScale.x : width / originWidth;
        const sy = originHeight == 0 ? this.originScale.y : height / originHeight;
        if (this.obj.keepAspectRatio) {
            let max = Math.max(sx, sy);
            if (originWidth == 0) {
                max = sy;
            }
            else if (originHeight == 0) {
                max = sx;
            }
            this.obj.scale.set(max, max);
        }
        else {
            this.obj.scale.x = sx;
            this.obj.scale.y = sy;
        }
    }
    onScaleDragEnd() {
        this.showAll();
        this.obj.emit('transformend', GraphicTransformEvent.scale(this.obj));
    }
    hideOthers(dg) {
        this.children.forEach((child) => {
            if (child.name !== dg.name) {
                child.visible = false;
            }
        });
    }
    hideAll() {
        this.children.forEach((child) => (child.visible = false));
    }
    showAll() {
        this.update();
        this.children.forEach((child) => (child.visible = true));
    }
    getObjBounds() {
        const points = this.obj.localBoundsToCanvasPoints();
        const p0 = points[0];
        const p1 = points[1];
        const p3 = points[3];
        const width = distance(p0.x, p0.y, p1.x, p1.y);
        const height = distance(p0.x, p0.y, p3.x, p3.y);
        return { width, height };
    }
    /**
     * 更新位置和cursor
     * @returns
     */
    update() {
        if (this.obj.scalable) {
            this.updateScalePoints();
        }
        if (this.obj.rotatable) {
            this.updateRotatePoint();
        }
    }
    updateRotatePoint() {
        const rect = this.obj.getLocalBounds();
        const lp = this.obj.pivot.clone();
        const dy = 10 / this.obj.scale.y;
        lp.y = rect.y - dy;
        const p = this.obj.localToCanvasPoint(lp);
        this.rotatePoint.position.copyFrom(p);
    }
    updateScalePoints() {
        const points = this.obj.localBoundsToCanvasPoints();
        this.ltScalePoint.position.copyFrom(points[0]);
        this.tScalePoint.position.copyFrom(calculateLineMidpoint(points[0], points[1]));
        this.rtScalePoint.position.copyFrom(points[1]);
        this.rScalePoint.position.copyFrom(calculateLineMidpoint(points[1], points[2]));
        this.rbScalePoint.position.copyFrom(points[2]);
        this.bScalePoint.position.copyFrom(calculateLineMidpoint(points[2], points[3]));
        this.lbScalePoint.position.copyFrom(points[3]);
        this.lScalePoint.position.copyFrom(calculateLineMidpoint(points[3], points[0]));
        const angle = this.obj.worldAngle;
        const angle360 = (360 + angle) % 360;
        if ((angle >= -22.5 && angle <= 22.5) ||
            (angle360 >= 180 - 22.5 && angle360 <= 180 + 22.5)) {
            this.ltScalePoint.cursor = 'nw-resize';
            this.tScalePoint.cursor = 'n-resize';
            this.rtScalePoint.cursor = 'ne-resize';
            this.rScalePoint.cursor = 'e-resize';
            this.rbScalePoint.cursor = 'se-resize';
            this.bScalePoint.cursor = 's-resize';
            this.lbScalePoint.cursor = 'sw-resize';
            this.lScalePoint.cursor = 'w-resize';
        }
        else if ((angle >= 22.5 && angle <= 67.5) ||
            (angle360 >= 180 + 22.5 && angle360 <= 180 + 67.5)) {
            this.ltScalePoint.cursor = 'n-resize';
            this.tScalePoint.cursor = 'ne-resize';
            this.rtScalePoint.cursor = 'e-resize';
            this.rScalePoint.cursor = 'se-resize';
            this.rbScalePoint.cursor = 's-resize';
            this.bScalePoint.cursor = 'sw-resize';
            this.lbScalePoint.cursor = 'w-resize';
            this.lScalePoint.cursor = 'nw-resize';
        }
        else if ((angle >= 67.5 && angle < 112.5) ||
            (angle360 >= 180 + 67.5 && angle360 <= 180 + 112.5)) {
            this.ltScalePoint.cursor = 'ne-resize';
            this.tScalePoint.cursor = 'e-resize';
            this.rtScalePoint.cursor = 'se-resize';
            this.rScalePoint.cursor = 's-resize';
            this.rbScalePoint.cursor = 'sw-resize';
            this.bScalePoint.cursor = 'w-resize';
            this.lbScalePoint.cursor = 'nw-resize';
            this.lScalePoint.cursor = 'n-resize';
        }
        else {
            this.ltScalePoint.cursor = 'e-resize';
            this.tScalePoint.cursor = 'se-resize';
            this.rtScalePoint.cursor = 's-resize';
            this.rScalePoint.cursor = 'sw-resize';
            this.rbScalePoint.cursor = 'w-resize';
            this.bScalePoint.cursor = 'nw-resize';
            this.lbScalePoint.cursor = 'n-resize';
            this.lScalePoint.cursor = 'ne-resize';
        }
    }
}
/**
 * 包围盒矩形图形，现使用外边框转画布多边形实现
 */
class BoundsGraphic extends Graphics {
    static Name = '_BoundsRect';
    static BoundsLineStyle = {
        width: 1,
        color: '#1976d2',
        alpha: 1,
    };
    obj;
    debouncedRedraw;
    constructor(graphic) {
        super();
        this.obj = graphic;
        this.name = BoundsGraphic.Name;
        this.visible = false;
        this.debouncedRedraw = debounce(this.doRedraw, 50);
        this.obj.on('transformstart', this.onObjTransformStart, this);
        this.obj.on('transformend', this.onObjTransformEnd, this);
        if (this.obj.children && this.obj.children.length > 0) {
            recursiveChildren(this.obj, (child) => {
                child.on('transformstart', this.onObjTransformStart, this);
                child.on('transformend', this.onObjTransformEnd, this);
            });
        }
        const pg = this.obj.getGraphic();
        if (pg != null) {
            pg.on('transformstart', this.onObjTransformStart, this);
            pg.on('transformend', this.onObjTransformEnd, this);
        }
        this.obj.on('repaint', this.onGraphicRepaint, this);
        graphic.addAssistantAppend(this);
    }
    onObjTransformStart() {
        this.visible = false;
    }
    onObjTransformEnd() {
        this.redraw();
        this.visible = true;
    }
    onGraphicRepaint() {
        if (this.visible) {
            this.redraw();
        }
    }
    destroy(options) {
        if (this.obj.isGraphic()) {
            this.obj.off('repaint', this.onGraphicRepaint, this);
        }
        super.destroy(options);
    }
    redraw() {
        this.debouncedRedraw(this);
    }
    doRedraw() {
        const visible = this.visible;
        this.visible = false; // 屏蔽包围框本身
        const bounds = new Polygon(this.obj.localBoundsToCanvasPoints());
        this.clear().lineStyle(BoundsGraphic.BoundsLineStyle).drawShape(bounds);
        this.visible = visible;
    }
}

/**
 * 操作
 */
class JlOperation {
    type; // 操作类型/名称
    app;
    obj; // 操作对象
    data; // 操作数据
    description = ''; // 操作描述
    constructor(app, type) {
        this.app = app;
        this.type = type;
    }
    undo1() {
        const updates = this.undo();
        if (updates) {
            this.app.updateSelected(...updates);
        }
    }
    redo1() {
        const updates = this.redo();
        if (updates) {
            this.app.updateSelected(...updates);
        }
    }
}
/**
 * 操作记录
 */
class OperationRecord {
    undoStack = [];
    redoStack = [];
    maxLen;
    constructor(maxLen = 100) {
        this.maxLen = maxLen;
    }
    get hasUndo() {
        return this.undoStack.length > 0;
    }
    get hasRedo() {
        return this.redoStack.length > 0;
    }
    setMaxLen(v) {
        this.maxLen = v;
        const len = this.undoStack.length;
        if (len > v) {
            const removeCount = len - v;
            this.undoStack.splice(0, removeCount);
        }
    }
    /**
     * 记录
     * @param op
     */
    record(op) {
        if (this.undoStack.length >= this.maxLen) {
            this.undoStack.shift();
        }
        this.undoStack.push(op);
        this.redoStack.splice(0, this.redoStack.length);
    }
    /**
     * 撤销
     */
    undo() {
        const op = this.undoStack.pop();
        if (op) {
            op.undo1();
            this.redoStack.push(op);
        }
    }
    /**
     * 重做
     */
    redo() {
        const op = this.redoStack.pop();
        if (op) {
            op.redo1();
            this.undoStack.push(op);
        }
    }
}

/**
 * 更新画布操作
 */
class UpdateCanvasOperation extends JlOperation {
    obj;
    old;
    data;
    description = '';
    constructor(app, obj, old, data) {
        super(app, 'update-canvas');
        this.app = app;
        this.obj = obj;
        this.old = old;
        this.data = data;
    }
    undo() {
        this.obj.update(this.old);
        return [];
    }
    redo() {
        this.obj.update(this.data);
        return [];
    }
}
/**
 * 创建图形操作
 */
class GraphicCreateOperation extends JlOperation {
    obj;
    description = '';
    constructor(app, obj) {
        super(app, 'graphic-create');
        this.app = app;
        this.obj = obj;
    }
    undo() {
        this.app.deleteGraphics(...this.obj);
    }
    redo() {
        this.app.addGraphics(...this.obj);
        return this.obj;
    }
}
/**
 * 删除图形操作
 */
class GraphicDeleteOperation extends JlOperation {
    obj;
    constructor(app, obj) {
        super(app, 'graphic-delete');
        this.app = app;
        this.obj = obj;
    }
    undo() {
        this.app.addGraphics(...this.obj);
        return this.obj;
    }
    redo() {
        this.app.deleteGraphics(...this.obj);
    }
}
class GraphicDataUpdateOperation extends JlOperation {
    obj;
    oldData;
    newData;
    constructor(app, obj, oldData, newData) {
        super(app, 'graphic-drag');
        this.obj = [...obj];
        this.oldData = oldData;
        this.newData = newData;
    }
    undo() {
        for (let i = 0; i < this.obj.length; i++) {
            const g = this.obj[i];
            // g.exitChildEdit();
            g.updateData(this.oldData[i]);
        }
        return this.obj;
    }
    redo() {
        for (let i = 0; i < this.obj.length; i++) {
            const g = this.obj[i];
            // g.exitChildEdit();
            g.updateData(this.newData[i]);
        }
        return this.obj;
    }
}

/**
 * 图形关系数据
 */
class GraphicRelationParam {
    g;
    param;
    constructor(g, param = null) {
        this.g = g;
        this.param = param;
    }
    isTheGraphic(g) {
        return this.g.id === g.id;
    }
    getGraphic() {
        return this.g;
    }
    getParam() {
        return this.param;
    }
    equals(other) {
        return this.isTheGraphic(other.g) && this.param === other.param;
    }
}
/**
 * 图形关系
 */
class GraphicRelation {
    rp1;
    rp2;
    constructor(rp1, rp2) {
        this.rp1 = rp1;
        this.rp2 = rp2;
    }
    contains(g) {
        return this.rp1.isTheGraphic(g) || this.rp2.isTheGraphic(g);
    }
    /**
     * 获取给定图形的关系参数
     * @param g
     * @returns
     */
    getRelationParam(g) {
        if (!this.contains(g)) {
            throw new Error(`图形关系${this.rp1.g.id}-${this.rp2.g.id}中不包含给定图形${g.id}`);
        }
        if (this.rp1.isTheGraphic(g)) {
            return this.rp1;
        }
        else {
            return this.rp2;
        }
    }
    /**
     * 获取关联的另一个图形的关系参数
     * @param g
     * @returns
     */
    getOtherRelationParam(g) {
        if (!this.contains(g)) {
            throw new Error(`图形关系${this.rp1.g.id}-${this.rp2.g.id}中不包含给定图形${g.id}`);
        }
        if (this.rp1.isTheGraphic(g)) {
            return this.rp2;
        }
        else {
            return this.rp1;
        }
    }
    /**
     * 获取关联的另一个图形对象
     * @param g
     * @returns graphic
     */
    getOtherGraphic(g) {
        return this.getOtherRelationParam(g).g;
    }
    equals(orp1, orp2) {
        if (this.rp1.isTheGraphic(orp1.g)) {
            return this.rp1.equals(orp1) && this.rp2.equals(orp2);
        }
        else if (this.rp1.isTheGraphic(orp2.g)) {
            return this.rp1.equals(orp2) && this.rp2.equals(orp1);
        }
        return false;
    }
    isEqualOther(other) {
        return this.equals(other.rp1, other.rp2);
    }
}
/**
 * 图形关系管理
 */
class RelationManage {
    relations = [];
    isContainsRelation(rp1, rp2) {
        const relation = this.relations.find((relation) => relation.equals(rp1, rp2));
        return !!relation;
    }
    addRelation(rp1, rp2) {
        if (!(rp1 instanceof GraphicRelationParam)) {
            rp1 = new GraphicRelationParam(rp1);
        }
        if (!(rp2 instanceof GraphicRelationParam)) {
            rp2 = new GraphicRelationParam(rp2);
        }
        if (!this.isContainsRelation(rp1, rp2)) {
            const relation = new GraphicRelation(rp1, rp2);
            this.relations.push(relation);
        }
    }
    /**
     * 获取图形的所有关系
     * @param g
     * @returns
     */
    getRelationsOfGraphic(g) {
        return this.relations.filter((rl) => rl.contains(g));
    }
    /**
     * 获取指定图形的指定关系图形类型的所有关系
     * @param g 指定图形
     * @param type 关联图形的类型
     * @returns
     */
    getRelationsOfGraphicAndOtherType(g, type) {
        return this.relations.filter((rl) => rl.contains(g) && rl.getOtherGraphic(g).type === type);
    }
    /**
     * 删除关系
     * @param relation
     */
    deleteRelation(relation) {
        const index = this.relations.findIndex((rl) => rl.isEqualOther(relation));
        if (index >= 0) {
            this.relations.splice(index, 1);
        }
    }
    /**
     * 删除指定图形的所有关系
     * @param g
     */
    deleteRelationOfGraphic(g) {
        const relations = this.getRelationsOfGraphic(g);
        relations.forEach((rl) => this.deleteRelation(rl));
    }
    /**
     * 删除指定图形的所有关系
     * @param g
     */
    deleteRelationOfGraphicAndOtherType(g, type) {
        const relations = this.getRelationsOfGraphicAndOtherType(g, type);
        relations.forEach((rl) => this.deleteRelation(rl));
    }
    /**
     * 清空
     */
    clear() {
        this.relations.splice(0, this.relations.length);
    }
}

/**
 * 图形存储
 */
class GraphicStore {
    store;
    relationManage;
    constructor() {
        this.store = new Map();
        this.relationManage = new RelationManage();
    }
    /**
     * 获取所有图形对象
     */
    getAllGraphics() {
        return [...this.store.values()];
    }
    queryById(id) {
        let nid = id;
        if (typeof id === 'string') {
            nid = parseInt(id);
        }
        const graphic = this.store.get(nid);
        if (!graphic)
            throw Error(`未找到id为 [${nid}] 的图形.`);
        return this.store.get(nid);
    }
    queryByIdAmbiguous(id) {
        const nid = id + '';
        const list = [];
        this.store.forEach((g) => {
            if ((g.id + '').search(nid) >= 0) {
                list.push(g);
            }
        });
        return list;
    }
    queryByType(type) {
        const list = [];
        this.store.forEach((g) => {
            if (g.type === type) {
                list.push(g);
            }
        });
        return list;
    }
    queryByCode(code) {
        const list = [];
        this.store.forEach((g) => {
            if (g.code === code) {
                list.push(g);
            }
        });
        return list;
    }
    queryByCodeAmbiguous(code) {
        const list = [];
        this.store.forEach((g) => {
            if (g.code.search(code) >= 0) {
                list.push(g);
            }
        });
        return list;
    }
    queryByIdOrCode(s) {
        const list = [];
        this.store.forEach((g) => {
            if (g.isIdOrCode(s)) {
                list.push(g);
            }
        });
        return list;
    }
    queryByIdOrCodeAndType(s, type) {
        const list = [];
        this.store.forEach((g) => {
            if (g.isIdOrCode(s) && g.type === type) {
                list.push(g);
            }
        });
        return list;
    }
    queryByCodeAndType(code, type) {
        for (const item of this.store.values()) {
            if (item.code === code && item.type === type) {
                return item;
            }
        }
    }
    queryByCodeAndTypeAmbiguous(code, type) {
        const list = [];
        this.store.forEach((g) => {
            if (g.type === type && g.code.search(code) >= 0) {
                list.push(g);
            }
        });
        return list;
    }
    /**
     * 存储图形对象
     * @param graphics 要存储的图形
     */
    storeGraphics(graphic) {
        if (!graphic.id || graphic.id === 0) {
            throw new Error(`存储图形对象异常: id为空, ${graphic}`);
        }
        if (this.store.has(graphic.id)) {
            // 已经存在
            const exist = this.store.get(graphic.id);
            console.error(`已经存在id=${graphic.id}的设备${exist}`);
            return false;
        }
        else {
            this.store.set(graphic.id, graphic);
            graphic.queryStore = this;
            graphic.relationManage = this.relationManage;
            return true;
        }
    }
    /**
     * 删除图形
     * @param graph 要删除的图形
     */
    deleteGraphics(graphic) {
        const id = graphic.id;
        const remove = this.store.get(id);
        if (remove) {
            this.store.delete(id);
            // 删除图形关系
            this.relationManage.deleteRelationOfGraphic(remove);
        }
        return remove;
    }
    /**
     * 清空
     */
    clear() {
        this.relationManage.clear();
        this.store.clear();
    }
}

//基础图形对象扩展
DisplayObject.prototype._selectable = false; //是否可选中
DisplayObject.prototype._selected = false;
DisplayObject.prototype._childEdit = false;
DisplayObject.prototype._transformSave = false;
DisplayObject.prototype._assistantAppendMap = null;
DisplayObject.prototype._draggable = false;
DisplayObject.prototype._shiftStartPoint = null;
DisplayObject.prototype._shiftLastPoint = null;
DisplayObject.prototype._scalable = false;
DisplayObject.prototype._keepAspectRatio = true;
DisplayObject.prototype._rotatable = false;
Object.defineProperties(DisplayObject.prototype, {
    assistantAppendMap: {
        get() {
            if (this._assistantAppendMap == null) {
                this._assistantAppendMap = new Map();
            }
            return this._assistantAppendMap;
        },
    },
    selectable: {
        get() {
            return this._selectable;
        },
        set(value) {
            this._selectable = value;
        },
    },
    selected: {
        get() {
            return this._selected;
        },
        set(v) {
            this._selected = v;
        },
    },
    childEdit: {
        get() {
            return this._childEdit;
        },
        set(v) {
            this._childEdit = v;
        },
    },
    transformSave: {
        get() {
            return this._transformSave;
        },
        set(v) {
            this._transformSave = v;
        },
    },
    draggable: {
        get() {
            return this._draggable;
        },
        set(v) {
            this._draggable = v;
        },
    },
    shiftStartPoint: {
        get() {
            return this._shiftStartPoint;
        },
        set(v) {
            this._shiftStartPoint = v;
        },
    },
    shiftLastPoint: {
        get() {
            return this._shiftLastPoint;
        },
        set(v) {
            this._shiftLastPoint = v;
        },
    },
    scalable: {
        get() {
            return this._scalable;
        },
        set(v) {
            this._scalable = v;
        },
    },
    keepAspectRatio: {
        get() {
            return this._keepAspectRatio;
        },
        set(v) {
            this._keepAspectRatio = v;
        },
    },
    rotatable: {
        get() {
            return this._rotatable;
        },
        set(v) {
            this._rotatable = v;
        },
    },
    worldAngle: {
        get() {
            let angle = this.angle;
            let parent = this.parent;
            while (parent != undefined && parent != null) {
                angle += parent.angle;
                parent = parent.parent;
            }
            angle = angle % 360;
            if (angle > 180) {
                angle = angle - 360;
            }
            return angle;
        },
    },
});
DisplayObject.prototype.getAllParentScaled =
    function getAllParentScaled() {
        const scaled = new Point(1, 1);
        recursiveParents(this, (parent) => {
            scaled.x *= parent.scale.x;
            scaled.y *= parent.scale.y;
        });
        return scaled;
    };
DisplayObject.prototype.getPositionOnCanvas =
    function getPositionOnCanvas() {
        if (this.parent.isCanvas()) {
            return this.position;
        }
        else {
            return this.parent.localToCanvasPoint(this.position);
        }
    };
DisplayObject.prototype.updatePositionByCanvasPosition =
    function updatePositionByCanvasPosition(p) {
        if (this.parent.isCanvas()) {
            this.position.copyFrom(p);
        }
        else {
            const localPosition = this.parent.canvasToLocalPoint(p);
            this.position.copyFrom(localPosition);
        }
    };
DisplayObject.prototype.saveTransform = function saveTransform() {
    return GraphicTransform.fromObject(this);
};
DisplayObject.prototype.loadTransform = function loadTransform(transfrom) {
    this.position.copyFrom(transfrom.position);
    this.scale.copyFrom(transfrom.scale);
    this.rotation = transfrom.rotation;
    this.skew.copyFrom(transfrom.skew);
};
DisplayObject.prototype.isChild = function isChild(obj) {
    return recursiveFindChild(this, (child) => child == obj) != null;
};
DisplayObject.prototype.isParent = function isParent(obj) {
    return recursiveFindParent(this, (parent) => parent == obj) != null;
};
DisplayObject.prototype.isAssistantAppend =
    function isAssistantAppend() {
        return (recursiveFindParent(this, (parent) => {
            return parent.name === AppConsts.AssistantAppendsName;
        }) != null);
    };
DisplayObject.prototype.addAssistantAppend = function addAssistantAppend(...appends) {
    appends.forEach((append) => {
        if (append.name == null || append.name.trim() == '') {
            throw new Error('辅助附加name不能为空');
        }
        this.assistantAppendMap.set(append.name, append);
        this.getCanvas().addAssistantAppends(append);
    });
};
DisplayObject.prototype.getAssistantAppend = function getAssistantAppend(name) {
    return this.assistantAppendMap.get(name);
};
DisplayObject.prototype.removeAssistantAppend = function removeAssistantAppend(...appends) {
    appends.forEach((append) => {
        if (append.name) {
            this.removeAssistantAppendByName(append.name);
        }
    });
};
DisplayObject.prototype.removeAssistantAppendByName =
    function removeAssistantAppendByName(...names) {
        names.forEach((name) => {
            const append = this.getAssistantAppend(name);
            if (append) {
                this.getCanvas().removeAssistantAppends(append);
                this.assistantAppendMap.delete(name);
                append.destroy();
            }
        });
    };
DisplayObject.prototype.removeAllAssistantAppend =
    function removeAllAssistantAppend() {
        if (this._assistantAppendMap != null) {
            this.assistantAppendMap.forEach((append) => {
                append.getCanvas().removeAssistantAppends(append);
            });
            this.assistantAppendMap.clear();
        }
    };
DisplayObject.prototype.isGraphic = function isGraphic() {
    return Object.hasOwn(this, '__JlGraphic');
};
DisplayObject.prototype.getGraphic = function getGraphic() {
    let graphic = this;
    while (graphic && !Object.hasOwn(graphic, '__JlGraphic')) {
        graphic = graphic.parent;
    }
    if (graphic) {
        return graphic;
    }
    return null;
};
DisplayObject.prototype.isGraphicChild = function isGraphicChild() {
    const g = this.getGraphic();
    return g != null && !this.isAssistantAppend() && g.isChild(this);
};
DisplayObject.prototype.onAddToCanvas = function onAddToCanvas(_canvas) { };
DisplayObject.prototype.onRemoveFromCanvas = function onRemoveFromCanvas(_canvas) { };
DisplayObject.prototype.isInCanvas = function isInCanvas() {
    let graphic = this;
    while (graphic && !Object.hasOwn(graphic, '__JlCanvas')) {
        graphic = graphic.parent;
    }
    if (graphic) {
        return true;
    }
    return false;
};
DisplayObject.prototype.getCanvas = function getCanvas() {
    let graphic = this;
    while (graphic && !Object.hasOwn(graphic, '__JlCanvas')) {
        graphic = graphic.parent;
    }
    if (graphic) {
        return graphic;
    }
    throw new Error(`图形${this.name}不在画布中`);
};
DisplayObject.prototype.isCanvas = function isCanvas() {
    return Object.hasOwn(this, '__JlCanvas');
};
DisplayObject.prototype.getViewport = function getViewport() {
    const canvas = this.getCanvas();
    return canvas.parent;
};
DisplayObject.prototype.getGraphicApp = function getGraphicApp() {
    const canvas = this.getCanvas();
    return canvas.scene.app;
};
DisplayObject.prototype.localToCanvasPoint = function localToCanvasPoint(p) {
    return this.getViewport().toWorld(this.toGlobal(p));
};
DisplayObject.prototype.localToCanvasPoints = function localToCanvasPoints(...points) {
    return points.map((p) => this.localToCanvasPoint(p));
};
DisplayObject.prototype.canvasToLocalPoint = function canvasToLocalPoint(p) {
    return this.toLocal(this.getViewport().toScreen(p));
};
DisplayObject.prototype.canvasToLocalPoints = function canvasToLocalPoints(...points) {
    return points.map((p) => this.canvasToLocalPoint(p));
};
DisplayObject.prototype.localToScreenPoint = function localToScreenPoint(p) {
    return this.toGlobal(p);
};
DisplayObject.prototype.localToScreenPoints = function localToScreenPoints(...points) {
    return points.map((p) => this.toGlobal(p));
};
DisplayObject.prototype.screenToLocalPoint = function screenToLocalPoint(p) {
    return this.toLocal(p);
};
DisplayObject.prototype.screenToLocalPoints = function screenToLocalPoints(...points) {
    return points.map((p) => this.toLocal(p));
};
DisplayObject.prototype.localBoundsToCanvasPoints =
    function localBoundsToCanvasPoints() {
        const rect = this.getLocalBounds();
        const pps = convertRectangleToPolygonPoints(rect);
        return this.localToCanvasPoints(...pps);
    };
// 扩展pixijs图形对象，添加自定义绘制贝塞尔曲线，可自定义分段数
Graphics.prototype.drawBezierCurve = function drawBezierCurve(p1, p2, cp1, cp2, segmentsCount) {
    const fromX = p1.x;
    const fromY = p1.y;
    const n = segmentsCount;
    let dt = 0;
    let dt2 = 0;
    let dt3 = 0;
    let t2 = 0;
    let t3 = 0;
    const cpX = cp1.x;
    const cpY = cp1.y;
    const cpX2 = cp2.x;
    const cpY2 = cp2.y;
    const toX = p2.x;
    const toY = p2.y;
    this.moveTo(p1.x, p1.y);
    for (let i = 1, j = 0; i <= n; ++i) {
        j = i / n;
        dt = 1 - j;
        dt2 = dt * dt;
        dt3 = dt2 * dt;
        t2 = j * j;
        t3 = t2 * j;
        const px = dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX;
        const py = dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY;
        this.lineTo(px, py);
    }
    return this;
};
/**
 * 图形变换数据
 */
class GraphicTransform {
    position;
    scale;
    rotation;
    skew;
    constructor(position, scale, rotation, skew) {
        this.position = position;
        this.scale = scale;
        this.rotation = rotation;
        this.skew = skew;
    }
    static default() {
        return new GraphicTransform(new Point(0, 0), new Point(1, 1), 0, new Point(0, 0));
    }
    static fromObject(obj) {
        return new GraphicTransform(obj.position.clone(), obj.scale.clone(), obj.rotation, obj.skew.clone());
    }
    static from(transform) {
        if (transform) {
            return new GraphicTransform(new Point(transform.position.x, transform.position.y), new Point(transform.scale.x, transform.scale.y), transform.rotation, new Point(transform.skew.x, transform.skew.y));
        }
        return GraphicTransform.default();
    }
}
/**
 * 图形子元素变换
 */
class ChildTransform {
    name;
    transform;
    constructor(name, transform) {
        this.name = name;
        this.transform = transform;
    }
    static fromChild(child) {
        if (child.name == null ||
            child.name == undefined ||
            child.name.trim() == '') {
            throw new Error(`图形type=${child.getGraphic()?.type}的子元素${child}name为空，但设置为需要保存变换数据`);
        }
        return new ChildTransform(child.name, GraphicTransform.fromObject(child));
    }
    static from(ct) {
        return new ChildTransform(ct.name, GraphicTransform.from(ct.transform));
    }
}
class GraphicAnimation {
    options;
    _running;
    /**
     * 倍速
     */
    _xSpeed;
    constructor(options) {
        this.options = options;
        this._running = false;
        this._xSpeed = 1;
    }
    static init(options) {
        return new GraphicAnimation(options);
    }
    pause() {
        this._running = false;
        return this;
    }
    resume() {
        this._running = true;
        return this;
    }
    get name() {
        return this.options.name;
    }
    get running() {
        return this._running;
    }
    get xSpeed() {
        return this._xSpeed;
    }
    set xSpeed(v) {
        this._xSpeed = v;
    }
    run(dt) {
        if (this.options.run) {
            this.options.run(dt * this.xSpeed);
        }
        return this;
    }
}
/**
 * 图形对象基类
 */
class JlGraphic extends Container {
    __JlGraphic = true;
    type; // 图形类型
    _id = 0; // 图形的唯一标识，不具有业务意义，唯一，不可重复,可用做图形数据关联。
    _code = ''; // 业务编号/名称，用于标识图形对象，具有业务意义
    _datas; // 图形数据
    _states; // 图形状态数据
    _relationManage; // 图形关系管理
    _queryStore; // 图形对象查询仓库
    constructor(type) {
        super();
        this.type = type;
        this.draggable = false;
        this.filters;
    }
    /**
     * 添加图形动画，只有在画布上才能添加
     * @param animation
     */
    addAnimation(animation) {
        const app = this.getGraphicApp();
        app.animationManager.registerAnimation(this, animation);
    }
    removeAnimation(name) {
        const app = this.getGraphicApp();
        app.animationManager.unregisterAnimation(this, name);
    }
    animation(name) {
        const app = this.getGraphicApp();
        return app.animationManager.animation(this, name);
    }
    removeAllAnimation() {
        const app = this.getGraphicApp();
        app.animationManager.unregisterGraphicAnimations(this);
    }
    /**
     * 更新选中状态
     * @param selected
     * @returns 是否更新
     */
    updateSelected(selected) {
        if (this.selected !== selected) {
            this.selected = selected;
            this.fireSelected();
            return true;
        }
        return false;
    }
    invertSelected() {
        this.selected = !this.selected;
        this.fireSelected();
    }
    fireSelected() {
        if (this.selected) {
            this.emit('selected', this);
        }
        else {
            this.exitChildEdit();
            this.removeAllChildSelected();
            this.emit('unselected', this);
        }
        const app = this.getGraphicApp();
        if (app) {
            app.emit('graphicselectedchange', this, this.selected);
        }
    }
    hasSelectedChilds() {
        return (recursiveFindChild(this, (child) => {
            if (child.selected) {
                return true;
            }
            return false;
        }) != null);
    }
    setChildSelected(child) {
        if (child.isGraphicChild() && child.selectable) {
            this.removeAllChildSelected();
            child.selected = true;
            this.fireChildSelected(child);
        }
        return false;
    }
    invertChildSelected(child) {
        if (child.isGraphicChild() && child.selectable) {
            child.selected = !child.selected;
            this.fireChildSelected(child);
        }
        return false;
    }
    removeAllChildSelected() {
        recursiveChildren(this, (child) => {
            if (child.selected) {
                child.selected = false;
                this.fireChildSelected(child);
            }
        });
    }
    fireChildSelected(child) {
        const selected = child.selected;
        if (selected) {
            this.emit('childselected', child);
        }
        else {
            this.emit('childunselected', child);
        }
        const app = this.getGraphicApp();
        if (app) {
            app.emit('graphicchildselectedchange', child, selected);
        }
    }
    exitChildEdit() {
        this.childEdit = false;
        this.removeAllChildSelected();
    }
    /**
     * 是否此对象id/code
     */
    isIdOrCode(s) {
        return this.id === s || this.code === s;
    }
    /**
     * 获取图形id，如果图形数据对象存在，则返回图形数据对象id
     */
    get id() {
        if (this._datas) {
            return this._datas.id;
        }
        return this._id;
    }
    /**
     * 设置图形id，如果图形数据存在，则同时设置图形数据id
     */
    set id(v) {
        this._id = v;
        if (this._datas) {
            this._datas.id = v;
        }
    }
    /**
     * 获取图形业务code，如果业务code在图形数据或图形状态中，则需要重写此方法
     */
    get code() {
        return this._code;
    }
    /**
     * 设置图形业务code，如果业务code在图形数据或图形状态中，则需要重写此方法
     */
    set code(v) {
        this._code = v;
    }
    getDatas() {
        if (this._datas) {
            return this._datas;
        }
        throw new Error(`id=${this.id},type=${this.type}的图形没有数据`);
    }
    getStates() {
        if (this._states) {
            return this._states;
        }
        throw new Error(`id=${this.id},type=${this.type}的的图形没有状态`);
    }
    get queryStore() {
        if (this._queryStore) {
            return this._queryStore;
        }
        throw new Error(`type=${this.type}的图形没有QueryStore`);
    }
    set queryStore(v) {
        this._queryStore = v;
    }
    get relationManage() {
        if (this._relationManage) {
            return this._relationManage;
        }
        throw new Error(`type=${this.type}的图形没有关系管理`);
    }
    set relationManage(v) {
        this._relationManage = v;
    }
    /**
     * 构建图形关系
     * @param g
     */
    buildRelation() { }
    /**
     * 从数据加载恢复图形关系
     */
    loadRelations() { }
    /**
     * 获取当前图形的所有图形关系
     * @returns
     */
    getAllRelations() {
        return this.relationManage.getRelationsOfGraphic(this);
    }
    /**
     * 获取当前图形的所有指定类型图形关系
     * @param type
     * @returns
     */
    queryRelationByType(type) {
        return this.relationManage.getRelationsOfGraphicAndOtherType(this, type);
    }
    /**
     * 删除当前图形关联的指定类型的关系
     * @param type
     */
    deleteRelationByType(type) {
        this.relationManage.deleteRelationOfGraphicAndOtherType(this, type);
    }
    /**
     * 构建并保存关系数据到datas中
     */
    saveRelations() { }
    /**
     * 保存数据，复制，非原始数据
     * @returns
     */
    saveData() {
        this.getDatas().graphicType = this.type;
        this.getDatas().transform = GraphicTransform.fromObject(this);
        this.getDatas().childTransforms = this.buildChildTransforms();
        this.saveRelations();
        return this.getDatas().clone();
    }
    /**
     * 构建子元素变换列表
     * @returns
     */
    buildChildTransforms() {
        const childTransforms = [];
        recursiveChildren(this, (child) => {
            if (child.transformSave) {
                childTransforms.push(ChildTransform.fromChild(child));
            }
        });
        return childTransforms;
    }
    /**
     * 加载数据
     * @param data
     */
    loadData(data) {
        if (data.graphicType !== this.type) {
            throw new Error(`不同的图形类型,请检查数据是否正常: data.graphicType="${data.graphicType}, type="${this.type}`);
        }
        this._datas = data;
        this.loadTransformFrom(data);
    }
    loadTransformFrom(data) {
        if (data.transform) {
            this.loadTransform(data.transform);
        }
        if (data.childTransforms) {
            data.childTransforms.forEach((ct) => {
                const child = this.getChildByName(ct.name, true);
                if (child) {
                    child.loadTransform(ct.transform);
                }
            });
        }
    }
    /**
     * 更新图形数据
     * @param data
     * @returns
     */
    updateData(data) {
        let update = false;
        if (!this.getDatas().eq(data)) {
            update = true;
            const old = this.getDatas().clone();
            this.getDatas().copyFrom(data);
            this.onDataChange(data, old);
            this.loadTransformFrom(data);
            this.emit('dataupdate', this.getDatas(), old);
            this.repaint();
        }
        return update;
    }
    /**
     * 图形数据更新
     */
    onDataChange(newVal, old) { }
    /**
     * 加载状态
     * @param state
     */
    loadState(state) {
        if (state.graphicType !== this.type) {
            throw new Error(`不同的图形类型,请检查数据是否正常: state.graphicType="${state.graphicType}, type="${this.type}`);
        }
        this._states = state;
    }
    /**
     * 更新状态
     * @param state
     * @returns
     */
    updateStates(state) {
        let stateChange = false;
        if (!this.getStates().eq(state)) {
            // 判断并更新状态，默认状态
            const old = this.getStates().clone();
            this.getStates().copyFrom(state);
            this.onStateChange(state, old);
            stateChange = true;
            this.emit('stateupdate', this.getStates(), old);
            // this.repaint();
        }
        return stateChange;
    }
    /**
     * 图形状态更新处理
     */
    onStateChange(newVal, old) { }
    repaint() {
        try {
            this.doRepaint();
            this.emit('repaint', this);
        }
        catch (e) {
            console.error(`设备id=${this.id},type=${this.type}重绘逻辑异常`, e);
        }
    }
    /**
     * 处理删除逻辑
     */
    onDelete() {
        this.removeAllAssistantAppend();
        this.removeAllListeners();
        recursiveChildren(this, (child) => child.removeAllAssistantAppend());
    }
    /**
     * 框选检测,默认取图形包围盒判定,若需要精细判定-子类重写此方法
     * @param box
     * @returns
     */
    boxIntersectCheck(box) {
        return box.intersects(this.getLocalBounds(), this.localTransform);
    }
}
/**
 * 图形对象模板
 */
class JlGraphicTemplate {
    type;
    options;
    constructor(type, options) {
        this.type = type;
        this.options = options;
    }
    get datas() {
        if (this.options.dataTemplate) {
            return this.options.dataTemplate.clone();
        }
        throw new Error(`type=${this.type}的图形模板没有数据模板`);
    }
    get states() {
        if (this.options.stateTemplate) {
            return this.options.stateTemplate.clone();
        }
        throw new Error(`type=${this.type}的图形模板没有状态模板`);
    }
    /**
     * 加载图形对象需要用到的资源
     */
    async loadAssets() { }
    /**
     * 克隆图形对象
     * @param graphic
     * @returns
     */
    clone(graphic) {
        const g = this.new();
        if (graphic._datas) {
            // 数据克隆
            const datas = graphic.saveData();
            g.loadData(datas);
        }
        if (graphic._states) {
            // 状态克隆
            const state = graphic.getStates().clone();
            g.loadState(state);
        }
        g.id = GraphicIdGenerator.next();
        return g;
    }
}

/* eslint-disable @typescript-eslint/no-explicit-any */
class MessageClient extends EventEmitter {
    options;
    subClients = []; // 订阅客户端
    constructor(options) {
        super();
        this.options = options;
    }
    unsubscribe(destination) {
        this.unsubscribe0(destination);
        const idx = this.subClients.findIndex((cli) => cli.destination === destination);
        if (idx >= 0) {
            this.subClients.splice(idx, 1);
        }
    }
    getOrNewSubClient(destination) {
        let cli = this.subClients.find((cli) => cli.destination === destination);
        if (!cli) {
            // 不存在，新建
            cli = new SubscriptionClient(this, destination, this.options.protocol);
            this.subClients.push(cli);
        }
        return cli;
    }
    addSubscription(destination, handler) {
        const cli = this.getOrNewSubClient(destination);
        cli.addHandler(handler);
    }
    removeSubscription(destination, handle) {
        this.getOrNewSubClient(destination).removeHandler(handle);
    }
}
class SubscriptionClient {
    mc;
    destination;
    protocol;
    handlers = [];
    subscripted = false;
    constructor(mc, destination, protocal) {
        this.mc = mc;
        this.destination = destination;
        this.protocol = protocal;
        this.mc.on('disconnected', this.onDisconnect, this);
        this.mc.on('connected', this.trySubscribe, this);
    }
    addHandler(handler) {
        if (this.handlers.filter((h) => h.App === handler.App).length == 0) {
            this.handlers.push(handler);
        }
        if (!this.subscripted) {
            this.trySubscribe();
        }
    }
    removeHandler(handler) {
        const idx = this.handlers.findIndex((h) => h.App === handler.App);
        if (idx >= 0) {
            this.handlers.splice(idx, 1);
        }
        if (this.handlers.length == 0) {
            console.log(`订阅${this.destination}没有消息监听处理,移除订阅`);
            this.unsubscribe();
        }
    }
    trySubscribe() {
        if (this.mc.connected) {
            this.subscripted = this.mc.subscribe(this.destination, (data) => {
                this.handleMessage(data);
            });
        }
    }
    unsubscribe() {
        this.mc.unsubscribe(this.destination);
    }
    handleMessage(data) {
        if (this.protocol === 'json') {
            console.debug('收到消息:', data);
        }
        this.handlers.forEach((handler) => {
            try {
                handler.handle(data);
            }
            catch (error) {
                console.error('图形应用状态消息处理异常', error);
            }
        });
    }
    onDisconnect() {
        this.subscripted = false;
    }
}

const ReconnectDelay = 3000;
const HeartbeatIncoming = 30000;
const HeartbeatOutgoing = 30000;
class StompMessagingClient extends MessageClient {
    cli;
    constructor(options) {
        super(options);
        this.options = options;
        this.cli = new Client({
            brokerURL: options.wsUrl,
            connectHeaders: {
                Authorization: options.token ? options.token : '',
            },
            reconnectDelay: ReconnectDelay,
            heartbeatIncoming: HeartbeatIncoming,
            heartbeatOutgoing: HeartbeatOutgoing,
        });
        this.cli.onConnect = () => {
            // this.subClients.forEach((cli) => {
            //   this.subscribe(cli.destination, cli.handleMessage);
            // });
            this.emit('connected', '');
        };
        this.cli.onStompError = (frame) => {
            const errMsg = frame.headers['message'];
            if (errMsg === '401') {
                console.warn('认证失败,断开WebSocket连接');
                this.cli.deactivate();
            }
            else {
                console.error('收到Stomp错误消息', frame);
            }
        };
        this.cli.onDisconnect = (frame) => {
            console.log('Stomp 断开连接', frame);
            this.emit('disconnected', frame);
        };
        // websocket错误处理
        this.cli.onWebSocketError = (err) => {
            console.error('websocket错误', err);
            this.emit('disconnected', '');
        };
        this.cli.activate();
    }
    get connected() {
        return this.cli.connected;
    }
    subscribe(destination, handle) {
        this.cli.subscribe(destination, (frame) => {
            if (this.options.protocol === 'json') {
                const data = JSON.parse(frame.body);
                handle(data);
            }
            else {
                handle(frame.binaryBody);
            }
        }, {
            id: destination,
        });
        return true;
    }
    unsubscribe0(destination) {
        this.cli.unsubscribe(destination);
    }
    close() {
        this.cli.deactivate();
    }
}

class MqttMsgClient extends MessageClient {
    cli;
    retryTimes = 0;
    subMsgHandler = new Map();
    constructor(options) {
        super(options);
        this.options = options;
        try {
            this.cli = mqtt.connect(options.wsUrl, {
                protocolVersion: 5,
                clean: true,
                resubscribe: false,
                keepalive: options.heartbeat, //ms,心跳
                connectTimeout: options.connectTimeout, // ms,连接超时
                reconnectPeriod: options.retryPeriod, // ms,重连间隔
                username: options.clientName || '',
                password: options.token,
            });
            this.cli.on('connect', (packet) => {
                console.log('MQTT 连接成功!');
                this.retryTimes = 0; // 连接成功，重置
                this.emit('connected', packet);
            });
            this.cli.on('disconnect', (packet) => {
                console.log('MQTT 连接断开!');
                this.emit('disconnected', packet);
            });
            this.cli.on('close', () => {
                console.log('MQTT 关闭!');
                this.emit('disconnected', 'close');
            });
            this.cli.on('reconnect', () => {
                this.retryTimes += 1;
                console.log(`MQTT第 ${this.retryTimes} 次尝试重连`);
                if (this.retryTimes > options.retryTimes) {
                    try {
                        this.cli.end();
                        console.error('MQTT 达到重连最大尝试次数，停止重试');
                    }
                    catch (error) {
                        console.error(error);
                    }
                }
            });
            this.cli.on('error', (error) => {
                console.log('MQTT 出现错误', error);
                console.warn(error);
                this.emit('error', error);
            });
            this.cli.on('message', (topic, message) => {
                const handle = this.subMsgHandler.get(topic);
                if (handle) {
                    if (this.options.protocol === 'json') {
                        const data = JSON.parse(message.toString());
                        handle(data);
                    }
                    else {
                        // 字节流
                        handle(message);
                    }
                }
            });
        }
        catch (err) {
            console.error('MQTT connect error', err);
            this.emit('error', err);
            throw err;
        }
    }
    subscribe(destination, handle) {
        console.debug('MQTT订阅执行', destination);
        this.cli.subscribe(destination, { qos: 0 }, (error, res) => {
            if (error) {
                console.warn('MQTT 订阅失败', error);
                return;
            }
            console.debug('MQTT 订阅成功', res);
            return false;
        });
        this.subMsgHandler.set(destination, handle);
        return true;
    }
    unsubscribe0(destination) {
        console.debug('MQTT取消订阅执行', destination);
        this.cli.unsubscribe(destination, (error, packet) => {
            if (error) {
                console.warn('MQTT 取消订阅失败', error);
            }
            else {
                console.debug('MQTT 取消订阅成功', packet);
                this.subMsgHandler.delete(destination);
            }
        });
    }
    get connected() {
        return this.cli.connected;
    }
    close() {
        try {
            console.debug('MQTT关闭执行');
            this.cli.end(true, () => {
                console.debug('MQTT 消息客户端关闭成功');
                this.subMsgHandler.clear();
            });
        }
        catch (error) {
            console.warn('MQTT 消息客户端关闭失败', error);
        }
    }
}

var ClientEngine;
(function (ClientEngine) {
    ClientEngine[ClientEngine["Stomp"] = 0] = "Stomp";
    // Centrifugo,
    ClientEngine[ClientEngine["MQTT"] = 1] = "MQTT";
})(ClientEngine || (ClientEngine = {}));
const DefaultStompOption = {
    engine: ClientEngine.Stomp,
    protocol: 'protobuf',
    wsUrl: '',
    token: '',
    connectTimeout: 30 * 1000,
    heartbeat: 60,
    retryPeriod: 2 * 1000,
    retryTimes: 100,
};
class WsMsgCli {
    static client;
    static options;
    static appMsgBroker = [];
    static new(options) {
        if (WsMsgCli.client) {
            // 已经创建
            return;
        }
        WsMsgCli.options = Object.assign({}, DefaultStompOption, options);
        switch (WsMsgCli.options.engine) {
            // case ClientEngine.Centrifugo: {
            //   WsMsgCli.client = new CentrifugeMessagingClient(WsMsgCli.options);
            //   break;
            // }
            case ClientEngine.MQTT: {
                WsMsgCli.client = new MqttMsgClient(WsMsgCli.options);
                break;
            }
            case ClientEngine.Stomp: {
                WsMsgCli.client = new StompMessagingClient(WsMsgCli.options);
                break;
            }
            default: {
                throw new Error('未知的消息客户端引擎类型', WsMsgCli.options.engine);
            }
        }
        const cli = WsMsgCli.client;
        cli.on('connected', () => {
            WsMsgCli.emitConnectStateChangeEvent(true);
        });
        cli.on('disconnected', () => {
            WsMsgCli.emitConnectStateChangeEvent(false);
        });
        cli.on('error', (err) => {
            console.warn('websocket 客户端错误消息发布', err);
            WsMsgCli.appMsgBroker.forEach((broker) => {
                broker.app.emit('websocket-error', err);
            });
        });
    }
    static isInitiated() {
        return !!WsMsgCli.client;
    }
    static emitConnectStateChangeEvent(connected) {
        WsMsgCli.appMsgBroker.forEach((broker) => {
            broker.app.emit('websocket-connect-state-change', connected);
        });
    }
    static isConnected() {
        return WsMsgCli.client && WsMsgCli.client.connected;
    }
    static registerSubscription(destination, handler) {
        WsMsgCli.client.addSubscription(destination, handler);
    }
    static unregisterSubscription(destination, handler) {
        WsMsgCli.client.removeSubscription(destination, handler);
    }
    static registerAppMsgBroker(broker) {
        WsMsgCli.appMsgBroker.push(broker);
    }
    static removeAppMsgBroker(broker) {
        const index = WsMsgCli.appMsgBroker.findIndex((mb) => mb == broker);
        if (index >= 0) {
            WsMsgCli.appMsgBroker.splice(index, 1);
        }
    }
    static hasAppMsgBroker() {
        return WsMsgCli.appMsgBroker.length > 0;
    }
    /**
     * 关闭websocket连接
     */
    static close() {
        if (WsMsgCli.client) {
            WsMsgCli.client.close();
        }
    }
}
class AppMessageHandler {
    app;
    sub;
    constructor(app, subOptions) {
        this.app = app;
        if (!subOptions.messageConverter && !subOptions.messageHandle) {
            throw new Error(`没有消息处理器或图形状态消息转换器: ${subOptions}`);
        }
        this.sub = subOptions;
    }
    get App() {
        return this.app;
    }
    handle(data) {
        const sub = this.sub;
        if (sub.messageConverter) {
            const graphicStates = sub.messageConverter(data);
            this.app.handleGraphicStates(graphicStates, sub.graphicQueryer, sub.createOnNotFound);
        }
        else if (sub.messageHandle) {
            sub.messageHandle(data);
        }
    }
}
/**
 * 图形APP的websocket消息代理
 */
class AppWsMsgBroker {
    app;
    subscriptions = new Map();
    constructor(app) {
        this.app = app;
        WsMsgCli.registerAppMsgBroker(this);
    }
    subscribe(sub) {
        const handler = new AppMessageHandler(this.app, sub);
        WsMsgCli.registerSubscription(sub.destination, handler);
        this.subscriptions.set(sub.destination, handler);
    }
    unsbuscribe(destination) {
        const oldSub = this.subscriptions.get(destination);
        if (oldSub) {
            WsMsgCli.unregisterSubscription(destination, oldSub);
        }
    }
    unsubscribeAll() {
        this.subscriptions.forEach((record, destination) => {
            this.unsbuscribe(destination);
        });
    }
    resubscribeAll() {
        this.subscriptions.forEach((handler, destination) => {
            WsMsgCli.registerSubscription(destination, handler);
        });
    }
    /**
     * 取消所有订阅，从通用Stomp客户端移除此消息代理
     */
    close() {
        WsMsgCli.removeAppMsgBroker(this);
        this.unsubscribeAll();
    }
}

/**
 * 默认的白色样式
 */
const DefaultWhiteStyleOptions = {
    titleStyle: {
        fontSize: 16,
        fontColor: '#000000',
        padding: [5, 15],
    },
    backgroundColor: '#ffffff',
    border: true,
    borderWidth: 1,
    borderColor: '#4C4C4C',
    /**
     * 默认圆角
     */
    borderRoundRadius: 5,
    itemStyle: {
        fontSize: 16,
        fontColor: '#000000',
        padding: [5, 25],
        hoverColor: '#1E78DB',
        disabledFontColor: '#9D9D9D',
    },
};
/**
 * 默认的白色菜单配置
 */
const DefaultWhiteMenuOptions = {
    name: '',
    style: DefaultWhiteStyleOptions,
    groups: [],
};

class ContextMenuPlugin {
    app;
    contextMenuMap = new Map();
    constructor(app) {
        this.app = app;
        const canvas = this.app.canvas;
        canvas.on('pointerdown', () => {
            this.contextMenuMap.forEach((menu) => {
                menu.close();
            });
        });
    }
    registerMenu(menu) {
        this.contextMenuMap.set(menu.menuName, menu);
        menu.plugin = this;
    }
    /**
     * 获取视口屏幕宽度
     */
    get screenWidth() {
        return this.app.viewport.screenWidth;
    }
    /**
     * 获取视口屏幕高度
     */
    get screenHeight() {
        return this.app.viewport.screenHeight;
    }
    /**
     * 打开菜单
     * @param menu
     * @param global
     */
    open(menu, global) {
        if (!menu.opened) {
            menu.opened = true;
            this.app.pixi.stage.addChild(menu);
        }
        // 处理超出显示范围
        const screenHeight = this.screenHeight;
        const bottomY = global.y + menu.height;
        let oob = this.oob(menu, global);
        const pos = global.clone();
        if (oob.right) {
            pos.x = global.x - menu.width;
        }
        if (oob.bottom) {
            const py = global.y - menu.height;
            if (py > 0) {
                pos.y = py;
            }
            else {
                pos.y = global.y - (bottomY - screenHeight);
            }
        }
        // 移动后是否左上超出
        oob = this.oob(menu, pos);
        if (oob.left) {
            pos.x = 0;
        }
        if (oob.top) {
            pos.y = 0;
        }
        menu.position.copyFrom(pos);
    }
    /**
     * 关闭菜单
     * @param menu
     */
    close(menu) {
        if (menu.opened) {
            menu.opened = false;
            this.app.pixi.stage.removeChild(menu);
        }
    }
    /**
     * 关闭所有菜单
     */
    closeAll() {
        this.contextMenuMap.forEach((cm) => {
            this.close(cm);
        });
    }
    /**
     * 越界检查
     * @param menu
     * @param global
     * @returns
     */
    oob(menu, global) {
        const screenWidth = this.screenWidth;
        const screenHeight = this.screenHeight;
        const bound = new Rectangle(0, 0, screenWidth, screenHeight);
        const menuRect = new Rectangle(global.x, global.y, menu.width, menu.height);
        return OutOfBound.check(menuRect, bound);
    }
}
/**
 * 上下文菜单,多级嵌套
 */
class ContextMenu extends Container {
    _plugin;
    parentMenuItem;
    openedSubMenu;
    menuOptions;
    opened = false;
    bg;
    title;
    groups;
    padding = 5;
    _active = false; // 激活状态
    timeoutCloseHandle;
    constructor(menuOptions, parentMenuItem) {
        super();
        this.menuOptions = Object.assign({}, DefaultWhiteMenuOptions, menuOptions);
        this.name = this.menuOptions.name;
        this.bg = new Graphics();
        this.addChild(this.bg);
        this.groups = [];
        this.init();
        this.parentMenuItem = parentMenuItem;
    }
    static init(options) {
        return new ContextMenu(options);
    }
    get style() {
        return this.menuOptions.style;
    }
    /**
     * 父级菜单
     */
    get parentMenu() {
        return this.parentMenuItem?.menu;
    }
    /**
     * 最顶级菜单
     */
    get rootMenu() {
        if (this.parentMenu) {
            return this.parentMenu.rootMenu;
        }
        return this;
    }
    /**
     * 是否存在激活的菜单项
     * @returns
     */
    hasActiveItem() {
        for (let i = 0; i < this.groups.length; i++) {
            const group = this.groups[i];
            if (group.hasActiveItem()) {
                return true;
            }
        }
        return false;
    }
    get active() {
        return (this._active ||
            this.hasActiveItem() ||
            (this.parentMenuItem != undefined && this.parentMenuItem._active));
    }
    set active(v) {
        this._active = v;
        this.onActiveChanged();
    }
    onActiveChanged() {
        if (this.parentMenuItem) {
            this.parentMenuItem.onActiveChanged();
            if (!this.active) {
                this.timeoutCloseHandle = setTimeout(() => {
                    this.close();
                }, 500);
            }
            else {
                if (this.timeoutCloseHandle) {
                    clearTimeout(this.timeoutCloseHandle);
                }
            }
        }
    }
    setOptions(menuOptions) {
        this.menuOptions = Object.assign({}, DefaultWhiteMenuOptions, menuOptions);
        this.init();
    }
    /**
     * 初始化
     */
    init() {
        // this.initTitle();
        this.groups = [];
        const options = this.menuOptions;
        options.groups.forEach((group) => {
            const menuGroup = new MenuGroup(this, group);
            this.groups.push(menuGroup);
        });
        const { borderHeight, maxItemWidth } = this.calculateBorderInfo();
        const splitLineWidth = 1;
        const bgWidth = maxItemWidth + this.padding * 2;
        const bgHeight = borderHeight +
            this.groups.length * this.padding * 2 +
            (this.groups.length - 1) * splitLineWidth;
        if (options.style.border) {
            this.bg.lineStyle(options.style.borderWidth, new Color(options.style.borderColor));
        }
        this.bg.beginFill(new Color(options.style.backgroundColor));
        if (options.style.borderRoundRadius > 0) {
            this.bg.drawRoundedRect(0, 0, bgWidth, bgHeight, options.style.borderRoundRadius);
        }
        else {
            this.bg.drawRect(0, 0, bgWidth, bgHeight);
        }
        this.bg.endFill();
        let groupHeight = 0;
        this.bg.lineStyle(splitLineWidth, new Color(options.style.borderColor));
        for (let i = 0; i < this.groups.length; i++) {
            const group = this.groups[i];
            group.updateItemBox(maxItemWidth);
            group.position.set(this.padding, groupHeight + this.padding);
            if (i === this.groups.length - 1) {
                // 最后一个
                break;
            }
            const splitLineY = groupHeight + group.height + this.padding * 2;
            this.bg.moveTo(0, splitLineY);
            this.bg.lineTo(bgWidth, splitLineY);
            groupHeight = splitLineY + splitLineWidth;
        }
        this.addChild(...this.groups);
        this.eventMode = 'static';
        this.on('pointerover', () => {
            this.active = true;
        });
        this.on('pointerout', () => {
            this.active = false;
        });
    }
    initGroups() {
        this.groups = [];
        const options = this.menuOptions;
        options.groups.forEach((group) => {
            const menuGroup = new MenuGroup(this, group);
            this.groups.push(menuGroup);
        });
        this.addChild(...this.groups);
    }
    initTitle() {
        if (this.menuOptions.title) {
            this.title = new Text(this.menuOptions.title, { align: 'left' });
        }
    }
    calculateBorderInfo() {
        let maxItemNameWidth = 0;
        let maxShortcutWidth = 0;
        let maxGutter = 0;
        let borderHeight = 0;
        this.groups.forEach((menuGroup) => {
            borderHeight += menuGroup.totalHeight;
            const maxInw = menuGroup.maxItemNameWidth;
            if (maxInw > maxItemNameWidth) {
                maxItemNameWidth = maxInw;
            }
            const maxSw = menuGroup.maxShortcutWidth;
            if (maxSw > maxShortcutWidth) {
                maxShortcutWidth = maxSw;
            }
            const gutter = menuGroup.totalGutter;
            if (gutter > maxGutter) {
                maxGutter = gutter;
            }
        });
        const maxItemWidth = maxItemNameWidth + maxShortcutWidth + maxGutter;
        return { borderHeight, maxItemWidth };
    }
    updateBg() {
        this.bg.clear();
        const options = this.menuOptions;
        const { borderHeight, maxItemWidth } = this.calculateBorderInfo();
        const splitLineWidth = 1;
        const bgWidth = maxItemWidth + this.padding * 2;
        const bgHeight = borderHeight +
            this.groups.length * this.padding * 2 +
            (this.groups.length - 1) * splitLineWidth;
        if (options.style.border) {
            this.bg.lineStyle(options.style.borderWidth, new Color(options.style.borderColor));
        }
        this.bg.beginFill(new Color(options.style.backgroundColor));
        if (options.style.borderRoundRadius > 0) {
            this.bg.drawRoundedRect(0, 0, bgWidth, bgHeight, options.style.borderRoundRadius);
        }
        else {
            this.bg.drawRect(0, 0, bgWidth, bgHeight);
        }
        this.bg.endFill();
        let groupHeight = 0;
        this.bg.lineStyle(splitLineWidth, new Color(options.style.borderColor));
        for (let i = 0; i < this.groups.length; i++) {
            const group = this.groups[i];
            group.updateItemBox(maxItemWidth);
            group.position.set(this.padding, groupHeight + this.padding);
            if (i === this.groups.length - 1) {
                // 最后一个
                break;
            }
            const splitLineY = groupHeight + group.height + this.padding * 2;
            this.bg.moveTo(0, splitLineY);
            this.bg.lineTo(bgWidth, splitLineY);
            groupHeight = splitLineY + splitLineWidth;
        }
    }
    update() {
        if (this.menuOptions.groups.length !== this.groups.length) {
            this.init();
        }
        else {
            this.groups.forEach((group) => group.update());
            this.updateBg();
        }
    }
    get menuName() {
        return this.menuOptions.name;
    }
    get plugin() {
        if (this.parentMenu) {
            return this.parentMenu.plugin;
        }
        if (this._plugin) {
            return this._plugin;
        }
        throw new Error(`上下文菜单name=${this.menuOptions.name}没有添加到插件中`);
    }
    set plugin(v) {
        this._plugin = v;
    }
    /**
     * 显示菜单
     */
    open(global) {
        if (this.parentMenu) {
            this.parentMenu.openSub(this, global);
        }
        else {
            this.update();
            this.plugin.open(this, global);
        }
    }
    /**
     * 关闭菜单
     */
    close() {
        if (this.openedSubMenu) {
            this.openedSubMenu.close();
            this.openedSubMenu = undefined;
        }
        this.plugin.close(this);
    }
    /**
     * 打开子菜单
     * @param subMenu
     * @param global
     */
    openSub(subMenu, global) {
        if (this.openedSubMenu) {
            this.openedSubMenu.close();
        }
        const pos = global.clone();
        const oob = this.plugin.oob(subMenu, global);
        if (oob.right) {
            pos.x = this.position.x - subMenu.width + this.padding;
        }
        if (oob.bottom) {
            pos.y = this.plugin.screenHeight - subMenu.height - this.padding;
        }
        this.plugin.open(subMenu, pos);
        this.openedSubMenu = subMenu;
    }
}
class MenuGroup extends Container {
    gutter = 3; // 名称、快捷键、箭头文本间隙
    config;
    menu;
    items = [];
    constructor(menu, config) {
        super();
        this.config = config;
        this.menu = menu;
        this.init();
    }
    init() {
        this.items = []; // 清空
        this.config.items.forEach((item) => {
            this.items.push(new ContextMenuItem(this.menu, item));
        });
        if (this.items.length === 0) {
            console.error('菜单group为空', this.config, this.menu);
            throw new Error(`{name=${this.menu.name}}的菜单的group为{name=${this.config.name}}的条目为空!`);
        }
        this.addChild(...this.items);
    }
    hasActiveItem() {
        for (let i = 0; i < this.items.length; i++) {
            const item = this.items[i];
            if (item.active) {
                return true;
            }
        }
        return false;
    }
    get maxItemNameWidth() {
        const maxNameWidth = this.items
            .map((item) => item.nameBounds.width)
            .sort((a, b) => a - b)
            .reverse()[0];
        return maxNameWidth;
    }
    get maxShortcutWidth() {
        const maxShortcutWidth = this.items
            .map((item) => item.shortcutKeyBounds.width)
            .sort((a, b) => a - b)
            .reverse()[0];
        return maxShortcutWidth;
    }
    get totalGutter() {
        return this.gutter + this.items[0].paddingLeft + this.items[0].paddingRight;
    }
    get totalHeight() {
        let total = 0;
        this.items.forEach((item) => (total += item.totalHeight));
        return total;
    }
    update() {
        if (this.items.length !== this.config.items.length) {
            this.init();
        }
        else {
            let i = 0;
            this.items.forEach((item) => {
                item.update();
                if (item.visible) {
                    item.position.y = i * item.totalHeight;
                    i++;
                }
            });
        }
    }
    updateItemBox(maxItemWidth) {
        this.items.forEach((item) => item.updateBox(maxItemWidth, item.totalHeight));
    }
}
/**
 * 菜单项
 */
class ContextMenuItem extends Container {
    menu;
    config;
    /**
     * 名称文本
     */
    nameText;
    /**
     * 快捷键文本
     */
    shortcutKeyText;
    gutter = 3; // 名称、快捷键、箭头文本间隙
    arrowText;
    box;
    subMenu;
    _active = false; // 激活状态
    constructor(menu, config) {
        super();
        this.menu = menu;
        this.config = config;
        this.box = new Graphics();
        this.addChild(this.box);
        this.nameText = new Text(this.config.name, {
            fontSize: this.fontSize,
            fill: this.fontColor,
        });
        this.addChild(this.nameText);
        this.initShortcutKeyText();
        this.initSubMenu();
    }
    registerEventHandler() {
        this.eventMode = 'static';
        this.cursor = 'pointer';
        this.on('pointerover', () => {
            this.active = true;
            if (this.config.disabled) {
                this.cursor = 'not-allowed';
            }
            else {
                this.cursor = 'pointer';
            }
            if (this.subMenu) {
                const p = this.toGlobal(new Point(this.width));
                this.subMenu.open(p);
            }
        });
        this.on('pointerout', () => {
            this.active = false;
        });
        this.on('pointertap', () => {
            if (this.config.disabled) {
                // 禁用，不处理
                return;
            }
            if (this.config.handler) {
                this.menu.plugin.app.emit('pre-menu-handle', this.config);
                this.config.handler();
                this.menu.plugin.app.emit('post-menu-handle', this.config);
            }
            if (!this.config.subMenu || this.config.subMenu.groups.length === 0) {
                this.active = false;
                this.menu.active = false;
                this.menu.rootMenu.close();
            }
        });
    }
    get active() {
        return this._active || (this.subMenu != undefined && this.subMenu.active);
    }
    set active(v) {
        this._active = v;
        if (this.subMenu) {
            this.subMenu.onActiveChanged();
        }
        this.onActiveChanged();
    }
    onActiveChanged() {
        if (this.active) {
            this.box.alpha = 1;
        }
        else {
            this.box.alpha = 0;
        }
    }
    get textWidth() {
        return this.nameBounds.width + this.shortcutKeyBounds.width + this.gutter;
    }
    get nameGraphic() {
        if (this.nameText) {
            return this.nameText;
        }
        throw new Error(`菜单项name=${this.config.name}没有初始化名称图形对象`);
    }
    get totalHeight() {
        if (this.config.visible === false) {
            return 0;
        }
        else {
            return this.paddingTop + this.paddingBottom + this.nameGraphic.height;
        }
    }
    get nameBounds() {
        return this.nameGraphic.getLocalBounds();
    }
    get shortcutKeyBounds() {
        if (this.shortcutKeyText) {
            return this.shortcutKeyText.getLocalBounds();
        }
        else {
            return new Rectangle(0, 0, 0, 0);
        }
    }
    get style() {
        return this.menu.style.itemStyle;
    }
    checkPadding(padding) {
        if (Array.isArray(padding)) {
            if (padding.length !== 2 && padding.length !== 4) {
                throw new Error('错误的padding数据');
            }
        }
    }
    toWholePadding(padding) {
        this.checkPadding(padding);
        if (Array.isArray(padding)) {
            if (padding.length == 2) {
                return [padding[0], padding[1], padding[0], padding[1]];
            }
            else {
                return padding;
            }
        }
        else {
            return [padding, padding, padding, padding];
        }
    }
    get paddingTop() {
        return this.toWholePadding(this.menu.style.itemStyle.padding)[0];
    }
    get paddingBottom() {
        return this.toWholePadding(this.menu.style.itemStyle.padding)[2];
    }
    get paddingLeft() {
        return this.toWholePadding(this.menu.style.itemStyle.padding)[3];
    }
    get paddingRight() {
        return this.toWholePadding(this.menu.style.itemStyle.padding)[1];
    }
    get hoverColor() {
        return this.style.hoverColor;
    }
    get fontSize() {
        return this.style.fontSize;
    }
    get fontColor() {
        if (this.config.disabled) {
            return this.style.disabledFontColor;
        }
        else if (this.config.fontColor) {
            return this.config.fontColor;
        }
        return this.style.fontColor;
    }
    initShortcutKeyText() {
        if (this.config.shortcutKeys && this.config.shortcutKeys.length > 0) {
            this.shortcutKeyText = new Text(this.config.shortcutKeys.join('+'), {
                fontSize: this.fontSize,
                fill: this.fontColor,
            });
            this.addChild(this.shortcutKeyText);
            return this.shortcutKeyText;
        }
        return undefined;
    }
    initSubMenu() {
        if (this.config.subMenu && this.config.subMenu.groups.length > 0) {
            this.arrowText = new Text('>', {
                fontSize: this.fontSize,
                fill: this.fontColor,
            });
            this.addChild(this.arrowText);
            this.subMenu = new ContextMenu(this.config.subMenu, this);
        }
    }
    updateBackground(width, height) {
        this.box.clear();
        const box = this.box;
        const style = this.menu.style;
        if (!style.itemStyle.hoverColor) {
            throw new Error('未设置菜单项的hoverColor');
        }
        let hoverColor = style.itemStyle.hoverColor;
        if (this.style && this.style.hoverColor) {
            hoverColor = this.style.hoverColor;
        }
        box.beginFill(new Color(hoverColor));
        if (style.borderRoundRadius > 0) {
            box.drawRoundedRect(0, 0, width, height, style.borderRoundRadius);
        }
        else {
            box.drawRect(0, 0, width, height);
        }
        box.endFill();
        box.alpha = 0;
    }
    updateBox(width, height) {
        this.removeAllListeners();
        this.updateBackground(width, height);
        this.nameText?.position.set(this.paddingLeft, this.paddingTop);
        if (this.shortcutKeyText) {
            const skTextWidth = this.shortcutKeyBounds.width;
            this.shortcutKeyText.position.set(width - skTextWidth - this.paddingRight, this.paddingTop);
        }
        if (this.arrowText) {
            this.arrowText.position.set(width - this.paddingRight - this.gutter, this.paddingTop);
        }
        // 事件监听
        this.hitArea = new Rectangle(0, 0, width, height);
        this.registerEventHandler();
    }
    update() {
        if (this.config.visible === false) {
            this.visible = false;
            return;
        }
        this.visible = true;
        this.nameText.text = this.config.name;
        this.nameText.style.fontSize = this.fontSize;
        this.nameText.style.fill = this.fontColor;
        if (this.shortcutKeyText) {
            if (this.config.shortcutKeys && this.config.shortcutKeys.length > 0) {
                this.shortcutKeyText.text = this.config.shortcutKeys.join('+');
                this.shortcutKeyText.style.fontSize = this.fontSize;
                this.shortcutKeyText.style.fill = this.fontColor;
            }
            else {
                this.shortcutKeyText.visible = false;
            }
        }
        else {
            this.initShortcutKeyText();
        }
        if (this.config.subMenu == undefined && this.subMenu) {
            this.subMenu = undefined;
        }
        else if (this.config.subMenu && this.subMenu == undefined) {
            this.initSubMenu();
        }
        if (this.subMenu) {
            this.subMenu.update();
        }
    }
}

const AppConsts = {
    viewportname: '__viewport',
    canvasname: '__jlcanvas',
    AssistantAppendsName: '__assistantAppends',
    // 辅助元素默认颜色
    assistantElementColor: '#1976d2',
};
class CanvasData {
    width;
    height;
    backgroundColor;
    viewportTransform;
    gridBackground;
    constructor(properties = {
        width: 1920,
        height: 1080,
        backgroundColor: '#ffffff',
        viewportTransform: GraphicTransform.default(),
        gridBackground: undefined,
    }) {
        this.width = properties.width;
        this.height = properties.height;
        this.backgroundColor = properties.backgroundColor;
        this.viewportTransform = properties.viewportTransform;
        this.gridBackground = properties.gridBackground;
    }
    copyFrom(properties) {
        let sizeChange = false;
        if (properties.width <= 0 || properties.height <= 0) {
            console.error('画布宽度/高度不能小于等于0');
        }
        else {
            const width = Math.floor(properties.width);
            const height = Math.floor(properties.height);
            if (this.width != width) {
                this.width = width;
                sizeChange = true;
            }
            if (this.height != height) {
                this.height = height;
                sizeChange = true;
            }
        }
        this.backgroundColor = properties.backgroundColor;
        this.viewportTransform = properties.viewportTransform;
        if (properties.gridBackground) {
            this.gridBackground = properties.gridBackground;
        }
        return sizeChange;
    }
    clone() {
        const cp = new CanvasData(this);
        return cp;
    }
}
class JlCanvas extends Container {
    __JlCanvas = true;
    type = 'Canvas';
    scene;
    _properties;
    bg = new Graphics(); // 背景
    gridBackgroundLine = new Container(); //网格背景
    nonInteractiveContainer; // 无交互对象容器
    assistantAppendContainer; // 辅助附加容器
    constructor(scene, properties = new CanvasData()) {
        super();
        this.scene = scene;
        this._properties = properties;
        this.eventMode = 'static';
        this.nonInteractiveContainer = new Container();
        this.nonInteractiveContainer.name = 'non-interactives';
        this.nonInteractiveContainer.eventMode = 'none';
        this.addChild(this.bg);
        this.addChild(this.gridBackgroundLine);
        this.addChild(this.nonInteractiveContainer);
        this.sortableChildren = true;
        this.assistantAppendContainer = new Container();
        this.assistantAppendContainer.eventMode = 'static';
        this.assistantAppendContainer.name = AppConsts.AssistantAppendsName;
        this.assistantAppendContainer.zIndex = 999;
        this.assistantAppendContainer.sortableChildren = true;
        this.addChild(this.assistantAppendContainer);
        this.repaint();
    }
    /**
     * 图形重绘（数据/状态变化时触发）
     */
    repaint() {
        this.doRepaint();
    }
    get width() {
        return this._properties.width;
    }
    get height() {
        return this._properties.height;
    }
    get backgroundColor() {
        return this._properties.backgroundColor;
    }
    get gridBackground() {
        return this._properties.gridBackground;
    }
    doRepaint() {
        this.bg.clear();
        this.bg
            .beginFill(new Color(this.backgroundColor))
            .drawRect(0, 0, this._properties.width, this._properties.height)
            .endFill();
        this.gridBackgroundLine.children.forEach((g) => {
            g.clear();
        });
        if (this.gridBackground &&
            this.gridBackground.hasGrid &&
            this.gridBackground.space > 0) {
            const horizontalAmount = this.height / this.gridBackground.space;
            for (let i = 1; i < horizontalAmount; i++) {
                const lineGraphic = new Graphics();
                const posY = i * this.gridBackground.space;
                lineGraphic
                    .clear()
                    .lineStyle(1, new Color(this.gridBackground.lineColor))
                    .moveTo(0, posY)
                    .lineTo(this.width, posY);
                this.gridBackgroundLine.addChild(lineGraphic);
            }
            const verticalAmount = this.width / this.gridBackground.space;
            for (let i = 1; i < verticalAmount; i++) {
                const lineGraphic = new Graphics();
                const posX = i * this.gridBackground.space;
                lineGraphic
                    .clear()
                    .lineStyle(1, new Color(this.gridBackground.lineColor))
                    .moveTo(posX, 0)
                    .lineTo(posX, this.height);
                this.gridBackgroundLine.addChild(lineGraphic);
            }
        }
    }
    get properties() {
        return this._properties;
    }
    saveData() {
        const vp = this.getViewport();
        this.properties.viewportTransform = vp.saveTransform();
        return this.properties.clone();
    }
    update(properties) {
        // 更新画布
        const old = this.properties.clone();
        this._properties.copyFrom(properties);
        this.repaint();
        const vp = this.getViewport();
        vp.loadTransform(properties.viewportTransform);
        this.emit('dataupdate', this.properties, old);
    }
    addChild(...children) {
        const rt = super.addChild(...children);
        children.forEach((g) => {
            g.onAddToCanvas(this);
            recursiveChildren(g, (child) => child.onAddToCanvas(this));
        });
        return rt;
    }
    removeChild(...children) {
        children.forEach((g) => {
            g.onRemoveFromCanvas(this);
            recursiveChildren(g, (child) => child.onRemoveFromCanvas(this));
        });
        return super.removeChild(...children);
    }
    /**
     * 添加无交互Child
     */
    addNonInteractiveChild(...obj) {
        this.nonInteractiveContainer.addChild(...obj);
        obj.forEach((g) => {
            g.onAddToCanvas(this);
            recursiveChildren(g, (child) => child.onAddToCanvas(this));
        });
    }
    removeGraphic(...obj) {
        obj.forEach((g) => {
            g.onRemoveFromCanvas(this);
            recursiveChildren(g, (child) => child.onRemoveFromCanvas(this));
        });
        this.removeChild(...obj);
        this.nonInteractiveContainer.removeChild(...obj);
    }
    /**
     * 移除无交互Child
     */
    removeNonInteractiveChild(...obj) {
        obj.forEach((g) => {
            g.onRemoveFromCanvas(this);
            recursiveChildren(g, (child) => child.onRemoveFromCanvas(this));
        });
        this.nonInteractiveContainer.removeChild(...obj);
    }
    addAssistantAppends(...appends) {
        this.assistantAppendContainer.addChild(...appends);
        appends.forEach((g) => {
            g.onAddToCanvas(this);
            recursiveChildren(g, (child) => child.onAddToCanvas(this));
        });
    }
    removeAssistantAppends(...appends) {
        appends.forEach((g) => {
            g.onRemoveFromCanvas(this);
            recursiveChildren(g, (child) => child.onAddToCanvas(this));
        });
        this.assistantAppendContainer.removeChild(...appends);
    }
    /**
     * 暂停所有可交互对象
     */
    pauseInteractiveChildren() {
        this.interactiveChildren = false;
    }
    /**
     * 恢复所有可交互对象
     */
    resumeInteractiveChildren() {
        this.interactiveChildren = true;
    }
}
class GraphicSceneBase extends EventEmitter {
    graphicStore;
    _options;
    pixi; // Pixi 渲染器
    viewport; // 视口
    canvas; // 画布
    _loaded = false; // 是否已经加载
    _dom; // 场景绑定到的dom节点
    _viewportResizer; // 自动根据dom大小变化调整视口尺寸
    graphicTemplateMap = new Map(); // 图形对象模板
    interactionPluginMap = new Map(); // 交互插件
    graphicCopyPlugin; // 图形复制操作插件
    animationManager; // 动画管理组件
    menuPlugin; // 菜单插件
    debounceEmitFunc;
    wsMsgBroker; // websocket消息代理
    constructor(options) {
        super();
        this.graphicStore = new GraphicStore();
        this._options = options;
        // 创建pixi渲染app
        this.pixi = new Application({
            antialias: true,
        });
        // 创建画布
        this.canvas = new JlCanvas(this);
        this.canvas.name = AppConsts.canvasname;
        // 创建相机
        this.viewport = new Viewport({
            screenWidth: window.innerWidth,
            screenHeight: window.innerHeight,
            worldWidth: this.canvas._properties.width,
            worldHeight: this.canvas._properties.height,
            passiveWheel: true,
            events: this.pixi.renderer.events,
            disableOnContextMenu: true,
        });
        // 设置视口操作方式
        this.viewport
            .wheel({
            percent: 1,
        })
            .pinch()
            .clampZoom({
            minScale: 0.1,
            maxScale: 8,
        })
            .clamp({
            direction: 'all',
        });
        this.viewport.name = AppConsts.viewportname;
        this.viewport.interactiveChildren = true;
        // 添加视口到渲染器舞台
        this.pixi.stage.addChild(this.viewport);
        // 将画布置于视口
        this.viewport.addChild(this.canvas);
        // 监听并通知缩放变化事件
        this.viewport.on('zoomed-end', () => {
            this.emit('viewport-scaled', this.viewport);
        });
        this.graphicCopyPlugin = new GraphicCopyPlugin(this);
        // 添加通用交互插件
        CommonMouseTool.new(this).resume();
        // drag插件
        DragPlugin.new(this).resume();
        // 视口移动插件
        ViewportMovePlugin.new(this);
        // 图形变换插件
        GraphicTransformPlugin.new(this).resume();
        // 动画管理
        this.animationManager = new AnimationManager(this);
        this.menuPlugin = new ContextMenuPlugin(this);
        this.wsMsgBroker = new AppWsMsgBroker(this);
        this.debounceEmitFunc = debounce(this.doEmitAppGraphicSelected, 50);
        this.on('graphicselectedchange', () => {
            this.debounceEmitFunc(this);
        });
        // 发布选项更新事件
        this.emit('options-update', this._options);
    }
    get appOptions() {
        return this._options;
    }
    get dom() {
        return this._dom;
    }
    get queryStore() {
        return this.graphicStore;
    }
    get selectedGraphics() {
        return this.queryStore.getAllGraphics().filter((g) => g.selected);
    }
    async load() {
        if (this._options.dataLoader) {
            const storage = await this._options.dataLoader();
            if (storage.canvasProperty) {
                this.canvas.update(storage.canvasProperty);
            }
            if (storage.datas) {
                await this.loadGraphic(storage.datas);
            }
        }
        this._loaded = true;
    }
    /**
     * 重新加载数据
     */
    async reload() {
        if (!this._loaded) {
            this.graphicStore.clear();
            await this.load();
        }
        else {
            console.debug('场景已经加载过数据,不重新加载', this);
        }
    }
    async forceReload() {
        console.debug('场景强制重新加载数据', this);
        this.graphicStore.clear();
        await this.load();
    }
    /**
     * 更新选项
     * @param options
     */
    setOptions(options) {
        if (this._options) {
            this._options = Object.assign(this._options, options);
        }
        else {
            this._options = options;
        }
        this.emit('options-update', options);
    }
    toCanvasCoordinates(p) {
        return this.viewport.toWorld(p);
    }
    /**
     * 注册菜单
     * @param menu
     */
    registerMenu(menu) {
        this.menuPlugin.registerMenu(menu);
    }
    /**
     * 注册图形对象模板
     * @param graphicTemplates
     */
    registerGraphicTemplates(...graphicTemplates) {
        graphicTemplates.forEach((graphicTemplate) => {
            this.graphicTemplateMap.set(graphicTemplate.type, graphicTemplate);
        });
    }
    getGraphicTemplatesByType(type) {
        const template = this.graphicTemplateMap.get(type);
        if (!template) {
            throw new Error(`不存在type=${type}的图形对象模板`);
        }
        return template;
    }
    updateViewport(domWidth, domHeight) {
        let screenWidth = this.viewport.screenWidth;
        let screenHeight = this.viewport.screenHeight;
        if (domWidth) {
            screenWidth = domWidth;
        }
        if (domHeight) {
            screenHeight = domHeight;
        }
        const worldWidth = this.canvas._properties.width;
        const worldHeight = this.canvas._properties.height;
        this.pixi.resize();
        this.viewport.resize(screenWidth, screenHeight, worldWidth, worldHeight);
        if (this.viewport.OOB().right) {
            this.viewport.right = this.viewport.right + 1;
        }
        else if (this.viewport.OOB().left) {
            this.viewport.left = this.viewport.left - 1;
        }
        else if (this.viewport.OOB().top) {
            this.viewport.top = this.viewport.top - 1;
        }
        else if (this.viewport.OOB().bottom) {
            this.viewport.bottom = this.viewport.bottom + 1;
        }
    }
    /**
     * 暂停
     */
    pause() {
        // 暂停动画
        this.animationManager.pause();
        // 取消消息订阅
        this.wsMsgBroker.unsubscribeAll();
        // 关闭所有上下文菜单
        this.menuPlugin.closeAll();
    }
    /**
     * 恢复
     */
    resume() {
        // 恢复动画
        this.animationManager.resume();
        // 重新订阅
        this.wsMsgBroker.resubscribeAll();
    }
    bindDom(dom) {
        this._dom = dom;
        this.pixi.resizeTo = dom;
        dom.appendChild(this.pixi.view);
        this._viewportResizer = setInterval(() => {
            this.updateViewport(dom.clientWidth, dom.clientHeight);
        }, 1000);
        // 恢复
        this.resume();
    }
    unbindDom() {
        if (this._dom) {
            clearInterval(this._viewportResizer);
            this._dom.removeChild(this.pixi.view);
            this._dom = undefined;
            // 暂停
            this.pause();
        }
    }
    /**
     * 加载图形,GraphicApp默认添加到无交互容器,DrawApp默认添加到交互容器,如需定制，提供选项配置
     * @param protos
     * @param options 添加到可交互/不可交互容器选项配置
     */
    async loadGraphic(protos) {
        for (const item of this.graphicTemplateMap) {
            await item[1].loadAssets();
        }
        // 加载数据到图形存储
        protos.forEach((proto) => {
            const template = this.getGraphicTemplatesByType(proto.graphicType);
            const g = template.new();
            g.loadData(proto);
            this.addGraphics(g);
        });
        // 加载数据关系
        this.queryStore.getAllGraphics().forEach((g) => g.loadRelations());
        // 更新id生成器
        const max = this.queryStore
            .getAllGraphics()
            .map((g) => g.id)
            .sort((a, b) => a - b)
            .pop() ?? 0;
        GraphicIdGenerator.initSerial(max);
        // 数据加载完成后
        this.emit('postdataloaded');
        // 加载完成通知
        this.emit('loadfinish');
    }
    /**
     * 添加图形前处理
     * @param graphic
     */
    beforeGraphicStore(graphic) {
        const interactiveGraphicTypeIncludes = this._options.interactiveGraphicTypeIncludes || [];
        const interactiveGraphicTypeExcludes = this._options.interactiveGraphicTypeExcludes || [];
        // 默认无交互
        graphic.eventMode = 'auto';
        if (interactiveGraphicTypeIncludes.findIndex((type) => type === graphic.type) >= 0) {
            graphic.eventMode = 'static';
        }
        else if (interactiveGraphicTypeExcludes.findIndex((type) => type === graphic.type) < 0) {
            graphic.eventMode = 'static';
        }
    }
    /**
     * 执行添加图形对象
     * @param graphic
     */
    doAddGraphics(graphic) {
        this.beforeGraphicStore(graphic);
        if (this.graphicStore.storeGraphics(graphic)) {
            // cullable,默认设置剪裁，如果图形包围框不在屏幕内，则不渲染，增加效率用
            if (!this._options || this._options.cullable !== false) {
                graphic.cullable = true;
            }
            if (graphic.eventMode == 'static' || graphic.eventMode == 'dynamic') {
                // 添加为可交互
                this.canvas.addChild(graphic);
            }
            else {
                // 添加到不可交互容器
                this.canvas.addNonInteractiveChild(graphic);
            }
            graphic.repaint();
            this.emit('graphicstored', graphic);
            graphic.on('childselected', (child) => {
                this.emit('graphicchildselectedchange', child, true);
            });
            graphic.on('childunselected', (child) => {
                this.emit('graphicchildselectedchange', child, false);
            });
        }
    }
    doDeleteGraphics(graphic) {
        // 从store中删除
        const g = this.graphicStore.deleteGraphics(graphic);
        if (g) {
            // 清除选中
            g.updateSelected(false);
            // 从画布移除
            this.canvas.removeGraphic(g);
            // 对象删除处理
            g.onDelete();
            this.emit('graphicdeleted', g);
        }
    }
    /**
     * 存储图形
     * @param graphics 图形对象
     */
    addGraphics(...graphics) {
        graphics.forEach((g) => this.doAddGraphics(g));
    }
    /**
     * 删除图形
     * @param graphics 图形对象
     */
    deleteGraphics(...graphics) {
        const dels = graphics.filter((g) => {
            if (this._options?.isSupportDeletion == undefined ||
                this._options.isSupportDeletion(g)) {
                this.doDeleteGraphics(g);
                return true;
            }
            console.debug(`type=${g.type},id=${g.id}的图形不支持删除`);
            return false;
        });
        return dels;
    }
    /**
     * 检测并构建关系
     */
    detectRelations() {
        this.queryStore.getAllGraphics().forEach((g) => g.buildRelation());
    }
    /**
     * 全选
     */
    selectAllGraphics(filter) {
        if (filter == undefined) {
            filter = (g) => g.visible;
        }
        this.updateSelected(...this.queryStore.getAllGraphics().filter(filter));
    }
    /**
     * 更新选中
     */
    updateSelected(...graphics) {
        this.selectedGraphics.forEach((graphic) => {
            if (graphics.findIndex((g) => g.id === graphic.id) >= 0) {
                return;
            }
            if (graphic.selected) {
                graphic.updateSelected(false);
            }
        });
        graphics.forEach((graphic) => {
            graphic.updateSelected(true);
        });
    }
    doEmitAppGraphicSelected() {
        // 场景发布图形选中
        this.emit('graphicselected', this.selectedGraphics);
        // this.app.emit('graphicselected', this.selectedGraphics);
    }
    /**
     * 更新画布
     * @param param
     */
    updateCanvas(param) {
        this.canvas.update(param);
    }
    /**
     * 使图形居中显示(所有图形的外包围盒)
     */
    makeGraphicCenterShow(...group) {
        if (group.length > 0) {
            const bounds0 = group[0].getBounds();
            let lx = bounds0.x;
            let ly = bounds0.y;
            let rx = bounds0.x + bounds0.width;
            let ry = bounds0.y + bounds0.height;
            if (group.length > 1) {
                for (let i = 1; i < group.length; i++) {
                    const g = group[i];
                    const bound = g.getBounds();
                    if (bound.x < lx) {
                        lx = bound.x;
                    }
                    if (bound.y < ly) {
                        ly = bound.y;
                    }
                    const brx = bound.x + bound.width;
                    if (brx > rx) {
                        rx = brx;
                    }
                    const bry = bound.y + bound.height;
                    if (bry > ry) {
                        ry = bry;
                    }
                }
            }
            const { x, y } = getRectangleCenter(new Rectangle(lx, ly, rx - lx, ry - ly));
            const p = this.viewport.toWorld(x, y);
            this.viewport.moveCenter(p.x, p.y);
        }
    }
    /**
     * 注册交互插件,会替换旧的
     */
    registerInteractionPlugin(...plugins) {
        plugins.forEach((plugin) => {
            const old = this.interactionPluginMap.get(plugin.name);
            if (old) {
                console.warn(`已经存在name=${plugin.name}的交互插件,忽略此插件注册!`);
                return;
            }
            this.interactionPluginMap.set(plugin.name, plugin);
        });
    }
    /**
     * 根据名称获取交互插件
     * @param name
     * @returns
     */
    interactionPlugin(name) {
        const plugin = this.interactionPluginMap.get(name);
        if (!plugin) {
            throw new Error(`未找到name=${name}的交互插件`);
        }
        return plugin;
    }
    /**
     * 停止应用交互插件
     */
    pauseAppInteractionPlugins() {
        this.interactionPluginMap.forEach((plugin) => {
            if (plugin.isActive() && plugin._type === InteractionPluginType.App) {
                this.doPauseInteractionPlugin(plugin);
            }
        });
    }
    doPauseInteractionPlugin(plugin) {
        if (plugin && plugin.isActive()) {
            plugin.pause();
            this.emit('interaction-plugin-pause', plugin);
        }
    }
    /**
     * 移除交互插件
     */
    removeInteractionPlugin(plugin) {
        this.interactionPluginMap.delete(plugin.name);
    }
    checkWsMsgCli() {
        if (!WsMsgCli.isInitiated()) {
            throw new Error('订阅消息需先启动消息代理, 执行app.enableWebsocket()');
        }
    }
    /**
     * 订阅websocket消息
     */
    subscribe(sub) {
        this.checkWsMsgCli();
        this.wsMsgBroker.subscribe(sub);
    }
    /**
     * 取消websocket订阅
     */
    unsubscribe(destination) {
        this.checkWsMsgCli();
        this.wsMsgBroker.unsbuscribe(destination);
    }
    /**
     * 处理图形状态
     * @param graphicStates
     */
    handleGraphicStates(graphicStates, queryer, createOnNotFound) {
        graphicStates.forEach((state) => {
            let g;
            if (queryer) {
                g = queryer(state, this.queryStore);
            }
            else {
                g = this.queryStore.queryByCodeAndType(state.code, state.graphicType);
            }
            try {
                if (!g) {
                    // 未找到图形对象
                    if (!state.remove &&
                        createOnNotFound &&
                        createOnNotFound.graphicTypes &&
                        createOnNotFound.graphicTypes.findIndex((v) => v === state.graphicType) >= 0) {
                        const template = this.getGraphicTemplatesByType(state.graphicType);
                        const g = template.new();
                        g.loadState(state);
                        this.addGraphics(g);
                    }
                }
                else {
                    // 找到
                    if (state.remove) {
                        this.deleteGraphics(g);
                        g.destroy({ children: true });
                    }
                    else if (g.updateStates(state)) {
                        g.repaint();
                    }
                }
            }
            catch (err) {
                console.error('图形状态处理异常', g, state, err);
                // throw err;
            }
        });
    }
    /**
     * 销毁
     */
    destroy() {
        console.debug('场景销毁', this);
        this.unbindDom();
        if (this.wsMsgBroker) {
            this.wsMsgBroker.close();
        }
        this.interactionPluginMap.forEach((plugin) => {
            plugin.pause();
        });
        this.animationManager.destroy();
        this.canvas.destroy(true);
        this.viewport.destroy();
        this.pixi.destroy(true, true);
    }
}
/**
 * 图形app基类
 */
class GraphicApp extends GraphicSceneBase {
    /**
     * 场景列表
     */
    scenes = new Map();
    opRecord; // 操作记录
    keyboardPlugin; // 键盘操作处理插件
    constructor(options) {
        super(options);
        this.opRecord = new OperationRecord();
        // 绑定键盘监听
        this.keyboardPlugin = new JlGraphicAppKeyboardPlugin(this);
    }
    get app() {
        return this;
    }
    setOptions(options) {
        if (options.maxOperationRecords && options.maxOperationRecords > 0) {
            this.opRecord.setMaxLen(options.maxOperationRecords);
        }
        super.setOptions(options);
    }
    addGraphicAndRecord(...graphics) {
        this.addGraphics(...graphics);
        this.opRecord.record(new GraphicCreateOperation(this, graphics));
    }
    deleteGraphicAndRecord(...graphics) {
        this.deleteGraphics(...graphics);
        this.opRecord.record(new GraphicDeleteOperation(this, graphics));
    }
    /**
     * 实例化一个场景
     * @param code 场景标识
     * @returns
     */
    initScene(code, options) {
        let scene = this.scenes.get(code);
        if (!scene) {
            scene = new JlScene(this, code, options);
            this.scenes.set(code, scene);
        }
        return scene;
    }
    /**
     * 获取场景
     * @param code
     * @returns
     */
    getScene(code) {
        const scene = this.scenes.get(code);
        if (!scene) {
            throw new Error(`不存在code=${code}的场景`);
        }
        return scene;
    }
    switchScene(code, dom) {
        const scene = this.getScene(code);
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        for (const [_code, pre] of this.scenes) {
            if (pre.dom === dom) {
                pre.unbindDom();
                break;
            }
        }
        scene.bindDom(dom);
    }
    removeScene(code) {
        const scene = this.scenes.get(code);
        if (scene) {
            this.scenes.delete(code);
            scene.destroy();
        }
    }
    /**
     * 启动websocket消息客户端
     */
    enableWsMassaging(options) {
        WsMsgCli.new(options);
        this.wsMsgBroker = new AppWsMsgBroker(this);
    }
    /**
     * 添加键盘监听器,如果是相同的按键，新注册的会覆盖旧的，当移除新的时，旧的自动生效
     * @param keyListeners
     */
    addKeyboardListener(...keyListeners) {
        keyListeners.forEach((keyListener) => this.keyboardPlugin.addKeyListener(keyListener));
    }
    /**
     * 移除键盘监听器
     * @param keyListeners
     */
    removeKeyboardListener(...keyListeners) {
        keyListeners.forEach((keyListener) => this.keyboardPlugin.removeKeyListener(keyListener));
    }
    /**
     * 销毁
     */
    destroy() {
        console.debug('图形应用销毁', this);
        this.emit('destroy', this);
        super.destroy();
        this.scenes.forEach((scene) => scene.destroy());
    }
}
/**
 * 场景
 */
class JlScene extends GraphicSceneBase {
    code;
    app;
    constructor(app, code, options) {
        super(options);
        this.code = code;
        this.app = app;
    }
}

/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-empty-function */
/**
 * 图形绘制助手
 */
class GraphicDrawAssistant extends AppInteractionPlugin {
    __GraphicDrawAssistant = true;
    app;
    type; // 图形对象类型
    description; // 描述
    icon; // 界面显示的图标
    container = new Container();
    graphicTemplate;
    escListener = new KeyListener({
        value: 'Escape',
        onRelease: () => {
            this.onEsc();
        },
    });
    onEsc() {
        this.createAndStore(true);
    }
    constructor(graphicApp, graphicTemplate, icon, description) {
        super(graphicTemplate.type, graphicApp);
        this.app = graphicApp;
        this.type = graphicTemplate.type;
        this.graphicTemplate = graphicTemplate;
        this.icon = icon;
        this.description = description;
        this.app.registerGraphicTemplates(this.graphicTemplate);
    }
    get canvas() {
        return this.app.canvas;
    }
    bind() {
        this.app.drawing = true;
        const canvas = this.canvas;
        canvas.addChild(this.container);
        canvas.on('mousedown', this.onLeftDown, this);
        canvas.on('mousemove', this.onMouseMove, this);
        canvas.on('mouseup', this.onLeftUp, this);
        canvas.on('rightdown', this.onRightDown, this);
        canvas.on('rightup', this.onRightUp, this);
        canvas.on('_rightclick', this.onRightClick, this);
        this.app.viewport.wheel({
            percent: 0.01,
        });
        this.app.addKeyboardListener(this.escListener);
        this.app.viewport.drag({
            mouseButtons: 'right',
        });
    }
    unbind() {
        this.clearCache();
        const canvas = this.canvas;
        if (this.container?.parent) {
            canvas.removeChild(this.container);
        }
        canvas.off('mousedown', this.onLeftDown, this);
        canvas.off('mousemove', this.onMouseMove, this);
        canvas.off('mouseup', this.onLeftUp, this);
        canvas.off('rightdown', this.onRightDown, this);
        canvas.off('rightup', this.onRightUp, this);
        this.app.viewport.plugins.remove('wheel');
        this.app.removeKeyboardListener(this.escListener);
        this.app.viewport.plugins.remove('drag');
        this.app.drawing = false;
    }
    onLeftDown(e) { }
    onMouseMove(e) {
        this.redraw(this.toCanvasCoordinates(e.global));
    }
    onLeftUp(e) { }
    onRightDown(e) { }
    onRightUp(e) { }
    onRightClick(e) {
        this.finish();
    }
    /**
     * 获取下一个id
     */
    nextId() {
        return GraphicIdGenerator.next();
    }
    clearCache() { }
    toCanvasCoordinates(p) {
        return this.app.toCanvasCoordinates(p);
    }
    /**
     * 保存创建的图形对象
     */
    storeGraphic(...graphics) {
        this.app.addGraphicAndRecord(...graphics);
    }
    /**
     * 创建并添加到图形App
     */
    createAndStore(finish) {
        const data = this.graphicTemplate.datas;
        data.id = this.nextId();
        data.graphicType = this.graphicTemplate.type;
        if (!this.prepareData(data)) {
            if (finish) {
                this.finish();
            }
            return null;
        }
        const template = this.graphicTemplate;
        const g = template.new();
        g.loadData(data);
        this.storeGraphic(g);
        if (finish) {
            this.finish(g);
        }
        return g;
    }
    /**
     * 绘制完成
     */
    finish(...graphics) {
        this.clearCache();
        this.app.interactionPlugin(CommonMouseTool.Name).resume();
        this.app.updateSelected(...graphics);
    }
}
/**
 * 绘制应用
 */
class JlDrawApp extends GraphicApp {
    font = BitmapFont.from('coordinates', {
        fontFamily: 'Roboto',
        fontSize: 16,
        fill: '#ff2700',
    }, { chars: ['画布坐标:() 屏幕坐标:() 缩放:.,', ['0', '9']] });
    coordinates = new BitmapText('画布坐标: (0, 0) 屏幕坐标:(0, 0)', {
        fontName: 'coordinates',
    });
    scaleText = new BitmapText('缩放: 1', {
        fontName: 'coordinates',
    });
    drawAssistants = [];
    _drawing = false;
    debouncedFormDataUpdator;
    get drawing() {
        return this._drawing;
    }
    set drawing(value) {
        this._drawing = value;
    }
    constructor(options) {
        super(options);
        this.appendDrawStatesDisplay();
        // 拖拽操作记录
        this.appOperationRecord();
        // 绑定通用键盘操作
        this.bindKeyboardOperation();
        this.formDataSyncListen();
        this.debouncedFormDataUpdator = debounce(this.doFormDataUpdate, 60);
    }
    setOptions(options) {
        super.setOptions(options);
    }
    registerInteractionPlugin(...plugins) {
        plugins.forEach((plugin) => {
            if (plugin instanceof GraphicDrawAssistant) {
                this.drawAssistants.push(plugin);
            }
            super.registerInteractionPlugin(plugin);
        });
    }
    getDrawAssistant(graphicType) {
        const sda = this.drawAssistants
            .filter((da) => da.type === graphicType)
            .pop();
        if (!sda) {
            throw new Error(`未找到图形绘制助手: ${graphicType}`);
        }
        return sda;
    }
    appOperationRecord() {
        let dragStartDatas = [];
        this.on('drag_op_start', (e) => {
            // 图形拖拽，记录初始数据
            if (!e.target.isCanvas()) {
                dragStartDatas = this.selectedGraphics.map((g) => g.saveData());
            }
        });
        // 图形拖拽操作监听
        this.on('drag_op_end', () => {
            // 图形拖拽，记录操作
            if (dragStartDatas.length > 0) {
                const newData = this.selectedGraphics.map((g) => g.saveData());
                this.opRecord.record(new GraphicDataUpdateOperation(this, this.selectedGraphics, dragStartDatas, newData));
                dragStartDatas = [];
            }
        });
        // 菜单操作
        let preMenuHandleDatas = [];
        this.on('pre-menu-handle', (menu) => {
            if (menu.name === '撤销' || menu.name === '重做') {
                return;
            }
            preMenuHandleDatas = this.selectedGraphics.map((g) => g.saveData());
        });
        this.on('post-menu-handle', () => {
            if (preMenuHandleDatas.length > 0) {
                const newData = this.selectedGraphics.map((g) => g.saveData());
                this.opRecord.record(new GraphicDataUpdateOperation(this, this.selectedGraphics, preMenuHandleDatas, newData));
                preMenuHandleDatas = [];
            }
        });
    }
    /**
     * 绘制状态信息显示
     */
    appendDrawStatesDisplay() {
        this.pixi.stage.addChild(this.coordinates);
        this.pixi.stage.addChild(this.scaleText);
        const bound = this.coordinates.getLocalBounds();
        this.scaleText.position.set(bound.width + 10, 0);
        this.canvas.on('mousemove', (e) => {
            if (e.target) {
                const { x, y } = this.toCanvasCoordinates(e.global);
                const cpTxt = `(${x}, ${y})`;
                const tp = e.global;
                const tpTxt = `(${tp.x}, ${tp.y})`;
                this.coordinates.text = `画布坐标:${cpTxt} 屏幕坐标:${tpTxt}`;
                const bound = this.coordinates.getLocalBounds();
                this.scaleText.position.set(bound.width + 10, 0);
            }
        });
        this.viewport.on('zoomed-end', () => {
            this.scaleText.text = `缩放: ${this.viewport.scaled}`;
        });
    }
    bindKeyboardOperation() {
        this.addKeyboardListener(
        // Ctrl + A
        new KeyListener({
            value: 'KeyA',
            combinations: [CombinationKey.Ctrl],
            onPress: (e, app) => {
                if (e.ctrlKey) {
                    app.selectAllGraphics();
                }
            },
        }));
        // 复制功能
        this.addKeyboardListener(new KeyListener({
            value: 'KeyD',
            combinations: [CombinationKey.Shift],
            onPress: (e, app) => {
                this.graphicCopyPlugin.init();
            },
        }));
        this.addKeyboardListener(new KeyListener({
            // Ctrl + Z
            value: 'KeyZ',
            global: true,
            combinations: [CombinationKey.Ctrl],
            onPress: (e, app) => {
                app.opRecord.undo();
            },
        }));
        this.addKeyboardListener(new KeyListener({
            // Ctrl + Shift + Z
            value: 'KeyZ',
            global: true,
            combinations: [CombinationKey.Ctrl, CombinationKey.Shift],
            onPress: (e, app) => {
                app.opRecord.redo();
            },
        }));
        this.addKeyboardListener(new KeyListener({
            value: 'Delete',
            onPress: (e, app) => {
                app.deleteGraphicAndRecord(...app.selectedGraphics);
            },
        }));
        this.addKeyboardListener(new KeyListener({
            value: 'ArrowUp',
            pressTriggerAsOriginalEvent: true,
            onPress: (e, app) => {
                updateGraphicPositionOnKeyboardEvent(app, UP);
            },
            onRelease: (e, app) => {
                recordGraphicMoveOperation(app);
            },
        }));
        this.addKeyboardListener(new KeyListener({
            value: 'ArrowDown',
            pressTriggerAsOriginalEvent: true,
            onPress: (e, app) => {
                updateGraphicPositionOnKeyboardEvent(app, DOWN);
            },
            onRelease: (e, app) => {
                recordGraphicMoveOperation(app);
            },
        }));
        this.addKeyboardListener(new KeyListener({
            value: 'ArrowLeft',
            pressTriggerAsOriginalEvent: true,
            onPress: (e, app) => {
                updateGraphicPositionOnKeyboardEvent(app, LEFT);
            },
            onRelease: (e, app) => {
                recordGraphicMoveOperation(app);
            },
        }));
        this.addKeyboardListener(new KeyListener({
            value: 'ArrowRight',
            pressTriggerAsOriginalEvent: true,
            onPress: (e, app) => {
                updateGraphicPositionOnKeyboardEvent(app, RIGHT);
            },
            onRelease: (e, app) => {
                recordGraphicMoveOperation(app);
            },
        }));
    }
    /**
     * 图形对象存储处理,默认添加图形交互
     * @param graphic
     */
    beforeGraphicStore(graphic) {
        graphic.eventMode = 'static';
        graphic.selectable = true;
        graphic.draggable = true;
        graphic.on('repaint', () => {
            this.handleFormDataUpdate(graphic);
        });
        graphic.on('transformend', () => {
            this.handleFormDataUpdate(graphic);
        });
    }
    formData = undefined;
    /**
     * 绑定form表单对象
     * @param form
     */
    bindFormData(form) {
        this.formData = form;
        if (this.formData && this.selectedGraphics.length == 1) {
            if (this.formData.graphicType == this.selectedGraphics[0].type) {
                this.formData.copyFrom(this.selectedGraphics[0].saveData());
            }
            else {
                this.formData = undefined;
            }
        }
    }
    /**
     * 移除form绑定
     * @param form
     */
    unbindFormData(form) {
        if (this.formData == form) {
            this.formData = undefined;
        }
    }
    formDataSyncListen() {
        this.on('graphicselected', () => {
            if (this.selectedGraphics.length == 1) {
                this.handleFormDataUpdate(this.selectedGraphics[0]);
            }
        });
    }
    /**
     * 处理表单数据更新（使用debounce限流）
     */
    handleFormDataUpdate(g) {
        this.debouncedFormDataUpdator(this, g);
    }
    doFormDataUpdate(g) {
        if (this.selectedGraphics.length > 1)
            return;
        if (this.formData && g.type === this.formData.graphicType) {
            this.formData.copyFrom(g.saveData());
        }
    }
    updateCanvasAndRecord(data) {
        const old = this.canvas.properties.clone();
        this.canvas.update(data);
        const newVal = this.canvas.properties.clone();
        this.opRecord.record(new UpdateCanvasOperation(this, this.canvas, old, newVal));
    }
    updateGraphicAndRecord(g, data) {
        const old = g.saveData();
        g.updateData(data);
        const newVal = g.saveData();
        this.opRecord.record(new GraphicDataUpdateOperation(this, [g], [old], [newVal]));
    }
}
let dragStartDatas = [];
function handleArrowKeyMoveGraphics(app, handler) {
    if (app.selectedGraphics.length === 1 &&
        app.selectedGraphics[0].hasSelectedChilds()) {
        recursiveChildren(app.selectedGraphics[0], (child) => {
            if (child.selected && child.draggable) {
                handler(child);
            }
        });
    }
    else {
        app.selectedGraphics.forEach((g) => {
            handler(g);
        });
    }
}
function updateGraphicPositionOnKeyboardEvent(app, dp) {
    let dragStart = false;
    if (dragStartDatas.length === 0) {
        dragStartDatas = app.selectedGraphics.map((g) => g.saveData());
        dragStart = true;
    }
    handleArrowKeyMoveGraphics(app, (g) => {
        if (dragStart) {
            g.shiftStartPoint = g.position.clone();
            g.emit('transformstart', GraphicTransformEvent.shift(g, ShiftData.new(g.shiftStartPoint)));
        }
        else {
            g.shiftLastPoint = g.position.clone();
        }
        g.position.x += dp.x;
        g.position.y += dp.y;
        if (!dragStart) {
            if (g.shiftStartPoint && g.shiftLastPoint) {
                g.emit('transforming', GraphicTransformEvent.shift(g, ShiftData.new(g.shiftStartPoint, g.position.clone(), g.shiftLastPoint)));
            }
        }
    });
}
function recordGraphicMoveOperation(app) {
    if (dragStartDatas.length > 0 &&
        dragStartDatas.length === app.selectedGraphics.length) {
        const newData = app.selectedGraphics.map((g) => g.saveData());
        app.opRecord.record(new GraphicDataUpdateOperation(app, app.selectedGraphics, dragStartDatas, newData));
        handleArrowKeyMoveGraphics(app, (g) => {
            if (g.shiftStartPoint) {
                g.emit('transformend', GraphicTransformEvent.shift(g, ShiftData.new(g.shiftStartPoint, g.position.clone())));
            }
        });
    }
    dragStartDatas = [];
}

/**
 * 实例化图形app
 * @param options
 * @returns
 */
function newGraphicApp(options) {
    return new GraphicApp(options);
}
/**
 * 实例化绘图app
 * @param options
 * @returns
 */
function newDrawApp(options) {
    return new JlDrawApp(options);
}

export { AbsorbableCircle, AbsorbableLine, AbsorbablePoint, AbsorbablePointParam, AnimationManager, AppConsts, AppDragEvent, AppInteractionPlugin, AppWsMsgBroker, BezierCurveEditPlugin, BoundsGraphic, ChildTransform, ClientEngine, CombinationKey, CommonMouseTool, ContextMenu, ContextMenuPlugin, DOWN, DashedLine, DefaultWhiteMenuOptions, DefaultWhiteStyleOptions, DragPlugin, DraggablePoint, DraggablePointParam, GlobalKeyboardHelper, GraphicAnimation, GraphicCopyPlugin, GraphicDataUpdateOperation, GraphicDrawAssistant, GraphicEditPlugin, GraphicIdGenerator, GraphicInteractionPlugin, GraphicRelation, GraphicRelationParam, GraphicStore, GraphicTransform, GraphicTransformEvent, GraphicTransformPlugin, IdGenerator, InteractionPluginBase, InteractionPluginType, JlGraphic, JlGraphicAppKeyboardPlugin, JlGraphicTemplate, JlOperation, KeyListener, LEFT, LineEditPlugin, MessageClient, MqttMsgClient, OperationRecord, OtherInteractionPlugin, OutOfBound, PolylineEditPlugin, RIGHT, RelationManage, ScaleData, ShiftData, StompMessagingClient, SubscriptionClient, TransformPoints, UP, Vector2, VectorGraphicUtil, VectorText, ViewportMovePlugin, WsMsgCli, addBezierWayPoint, addLineWayPoint, addPolygonSegmentingPoint, addWayPoint, angleOfIncludedAngle, angleToAxisx, assertBezierPoints, calculateBezierPoints, calculateDistanceFromPointToLine, calculateFootPointFromPointToLine, calculateIntersectionPointOfCircleAndLine, calculateIntersectionPointOfCircleAndPoint, calculateLineMidpoint, calculateLineSegmentingPoint, calculateMirrorPoint, calculateMirrorPointBasedOnAxis, calculateOneBezierPoints, circlePoint, circlePoint2, clearWayPoint, convertLineToPolygonPoints, convertRectangleToPolygonPoints, convertToBezierParams, debounce, deserializeTransformInto, distance, distance2, epsilon, floatEquals, getCenterOfTwoRectangle, getIntersectionPoint, getNormalVector, getParallelOfPolyline, getRectangleCenter, getWayLineIndex, getWaypointRangeIndex, isLineContainOther, isParallelLines, isPointOnLine, isZero, lineBox, lineLine, linePoint, linePolygon, movePointAlongNormal, newDrawApp, newGraphicApp, pointBox, pointPoint, pointPoint2, pointPolygon, polylineBox, polylinePoint, polylinePolygon, recursiveChildren, recursiveFindChild, recursiveFindParent, recursiveParents, removeBezierWayPoint, removeLineWayPoint, removeWayPoint, serializeTransform, splitLineEvenly, splitPolyline };