import { __decorate } from "tslib";
import { Component, Vue, Prop } from 'vue-property-decorator';
import { Addon, Graph } from '@antv/x6';
import './panel-absolute-layout-content.less';
let PanelAbsoluteLayoutContent = class PanelAbsoluteLayoutContent extends Vue {
    /**
     * Vue实例创建完成
     *
     * @memberof PanelAbsoluteLayoutContent
     */
    async created() {
        this.ctrl = this.ctx.ctrl;
        this.loaded = this.loaded.bind(this);
        this.ctx.ctrl.evt.on('loaded', this.loaded);
    }
    async loaded() {
        await this.initNodeContainer();
        await this.loadChildrenNode();
    }
    /**
     * Vue生命周期，实例挂载完毕
     *
     * @memberof PanelAbsoluteLayoutContent
     */
    async mounted() {
        await this.initGraph();
        await this.elasticGraph();
        await this.initDnd();
        await this.ctrl.registerEvent();
    }
    /**
     * Vue生命周期，实例销毁前
     *
     * @memberof PanelAbsoluteLayoutContent
     */
    beforeDestroy() {
        document.removeEventListener('resize', this.resizeGraph);
    }
    /**
     * 初始化画布
     *
     * @memberof PanelAbsoluteLayoutContent
     */
    async initGraph() {
        this.el = this.$refs.panel_graph;
        const { ctrl } = this;
        const graphConfig = {};
        Object.assign(graphConfig, {
            container: this.el,
            background: {
                color: '#f0f0f0',
            },
            scroller: {
                enabled: true,
                pannable: true,
                background: {
                    color: '#f0f0f0',
                },
                autoResize: true,
                padding: 50,
            },
            translating: {
                restrict(view) {
                    const cell = view.cell;
                    if (cell.isNode()) {
                        const parent = cell.getParent();
                        if (parent) {
                            return parent.getBBox();
                        }
                    }
                    return null;
                },
            },
            interacting: {
                nodeMovable: function (cellView) {
                    const cell = cellView === null || cellView === void 0 ? void 0 : cellView.cell;
                    if (Object.is(cell === null || cell === void 0 ? void 0 : cell.id, ctrl.masterData.srfkey)) {
                        return false;
                    }
                    return true;
                },
            },
            mousewheel: {
                enabled: true,
                modifiers: ['ctrl', 'meta'],
            },
            resizing: {
                enabled(arg) {
                    if (Object.is(arg === null || arg === void 0 ? void 0 : arg.id, ctrl.masterData.srfkey)) {
                        return false;
                    }
                    return true;
                },
            },
            snapline: {
                enabled: true,
                resizing: true,
            },
        });
        const minimap = this.$refs.minimap;
        if (minimap) {
            Object.assign(graphConfig, {
                minimap: {
                    enabled: true,
                    container: minimap,
                },
            });
        }
        const graph = new Graph(graphConfig);
        graph.setScrollbarPosition(-50, -50);
        this.ctrl.graph = graph;
    }
    /**
     * 图表根据窗体大小变化重写绘制
     *
     * @memberof PanelAbsoluteLayoutContent
     */
    async elasticGraph() {
        this.resizeGraph = addEventListener('resize', () => {
            var _a;
            (_a = this.ctrl.graph) === null || _a === void 0 ? void 0 : _a.resize(document.body.offsetWidth - 600, document.body.offsetHeight - 38);
        });
    }
    /**
     * 初始化节点容器
     *
     * @memberof PanelAbsoluteLayoutContent
     */
    async initNodeContainer() {
        const data = this.ctrl.masterData;
        if (!data.panelwidth || !data.panelheight) {
            data.panelwidth = 1000;
            data.panelheight = 1000;
            const s = await this.ctrl.getService();
            s.UpdateTemp(this.ctx.context, data);
            this.ctrl.masterData = data;
        }
        const nodeContainer = this.ctrl.graph.createNode({
            id: data.srfkey,
            x: 0,
            y: 0,
            width: data.panelwidth,
            height: data.panelheight,
            zIndex: 1,
            attrs: {
                body: {
                    stroke: '#000',
                },
                item: data,
            },
        });
        this.ctrl.nodeContainer = nodeContainer;
        this.ctrl.graph.addNode(nodeContainer);
    }
    /**
     * 加载子节点
     *
     * @memberof PanelAbsoluteLayoutContent
     */
    async loadChildrenNode() {
        const items = await this.ctrl.itemCtrl.selectPanelItems();
        if (items && items.length > 0) {
            items.forEach((item) => {
                this.ctrl.addNode(null, item);
            });
        }
    }
    /**
     * 初始化拖拽控制器
     *
     * @memberof PanelAbsoluteLayoutContent
     */
    async initDnd() {
        const graph = this.ctrl.graph;
        if (graph) {
            const { Dnd } = Addon;
            const dnd = new Dnd({
                target: graph,
                scaled: false,
                animation: true,
                validateNode: async (droppingNode, options) => {
                    var _a;
                    const bbox = droppingNode.getBBox();
                    if (!this.ctrl.isNodeContainerInner(bbox.x, bbox.y, bbox.width, bbox.height)) {
                        return false;
                    }
                    this.ctrl.nodeContainer.addChild(droppingNode);
                    const item = (_a = droppingNode.getAttrs()) === null || _a === void 0 ? void 0 : _a.item;
                    if (item) {
                        Object.assign(item, this.ctrl.computePos(bbox));
                        const res = await this.ctrl.itemCtrl.s.GetDraftTemp(this.ctx.context, Object.assign(Object.assign({}, item), { pssysviewpanelid: this.ctx.context.pssysviewpanel }));
                        if (res.ok) {
                            droppingNode.id = res.data.srfkey;
                            const attrs = droppingNode.getAttrs();
                            droppingNode.setAttrs(Object.assign(attrs, { item: res.data }));
                            this.ctrl.itemCtrl.addPanelItem(res.data);
                            this.ctrl.itemCtrl.evt.emit('added');
                        }
                    }
                    return true;
                },
            });
            this.ctrl.dnd = dnd;
        }
    }
    /**
     * 注册按键
     *
     * @memberof PanelAbsoluteLayoutContent
     */
    registerKey() {
        window.addEventListener('keydown', this.onKeyDown);
    }
    /**
     * 销毁按键事件
     *
     * @memberof PanelAbsoluteLayoutContent
     */
    destroyKey() {
        window.removeEventListener('keydown', this.onKeyDown);
    }
    /**
     * 按键按下触发
     *
     * @param {KeyboardEvent} evt
     * @memberof PanelAbsoluteLayoutContent
     */
    async onKeyDown(evt) {
        const k = evt.keyCode || evt.keyCode;
        const { context } = this.ctx;
        const { itemCtrl } = this.ctrl;
        if (k === 8 && this.ctrl.select.data) {
            await itemCtrl.s.RemoveTemp(Object.assign(Object.assign({}, context), { [itemCtrl.entityName.toLocaleLowerCase()]: this.ctrl.select.data.srfkey }));
            this.ctrl.graph.removeCell(this.ctrl.select.data.srfkey);
            const s = await this.ctrl.getService();
            const res = await s.GetTemp(context);
            if (res.ok) {
                this.ctx.ctrl.select.set(res.data);
            }
        }
    }
    /**
     * 绘制函数
     *
     * @param {CreateElement} h
     * @memberof PanelAbsoluteLayoutContent
     */
    render(h) {
        return (<div class='panel-absolute-layout-content'>
                <div class='graph' ref='panel_graph' on-mouseenter={() => this.registerKey()} on-mouseleave={() => this.destroyKey()}></div>
                <div class='minimap' ref='minimap'></div>
            </div>);
    }
};
__decorate([
    Prop()
], PanelAbsoluteLayoutContent.prototype, "ctx", void 0);
PanelAbsoluteLayoutContent = __decorate([
    Component
], PanelAbsoluteLayoutContent);
export { PanelAbsoluteLayoutContent };