rt-sim-training-client/src/jmapNew/shape/Section/EMouse.js

import Group from 'zrender/src/container/Group';
import Text from 'zrender/src/graphic/Text';
import Rect from 'zrender/src/graphic/shape/Rect';
// import Vue from 'vue';
import store from '@/store';
class EMouse extends Group {
    constructor(device, code) {
        super();
        this.device = device;
        this.code = code;
        this.create();
    }
    create() {
        if (this.device.name) {
            const rect = this.device.name.getBoundingRect();
            if (!this.device.isSwitchSection) {
                this.sectionTextBorder = new Rect({
                    zlevel: this.device.zlevel,
                    z: this.device.z + 4,
                    shape: rect,
                    style: {
                        lineDash: [3, 3],
                        stroke: '#fff', // 白色
                        fill: this.device.model.sectionType == '02' ? this.device.style.Section.line.logicalColor : '#00FFFF' // 蓝色
                    }
                });
                this.add(this.sectionTextBorder);
                this.sectionTextBorder.hide();
            }

            const fontSize = this.device.model.type == '02' ? this.device.style.Section.text.fontSize + 2 : this.device.style.Section.text.fontSize;
            this.TextName = new Text({
                zlevel: this.device.zlevel,
                z: this.device.z + 4,
                style: {
                    x: rect.x + (rect.width / 2),
                    y: rect.y + (rect.height / 2),
                    fontWeight: 'normal',
                    fontSize: fontSize,
                    fontFamily: this.device.style.fontFamily,
                    text: this.device.model.name,
                    textFill: '#000',
                    textAlign: this.device.style.Section.text.textAlign,
                    textPosition: this.device.style.Section.text.textPosition || 'inside',
                    textVerticalAlign: this.device.style.Section.text.textVerticalAlign || null
                }
            });
            this.add(this.TextName);
            this.TextName.hide();

            this.sectionTextShadow = new Text({
                zlevel: this.zlevel + 3,
                z: 5,
                position: [4, -2],
                silent: true,
                style: {
                    x: rect.x + (rect.width / 2),
                    y: rect.y + (rect.height / 2),
                    text: this.device.model.name,
                    textFill: this.device.style.Section.mouseOverStyle.textShadowColor, // 黄色
                    textAlign: 'middle',
                    textVerticalAlign: 'top',
                    textFont: 'bold ' + (fontSize + 1) + 'px ' + this.device.style.fontFamily
                }
            });
            this.add(this.sectionTextShadow);
            this.sectionTextShadow.hide();
        }
        if (this.device.section) {
            const rect = this.device.section.getBoundingRect();
            this.lineBorder = new Rect({
                zlevel: this.device.zlevel,
                z: this.device.z - 1,
                shape: rect,
                style: {
                    lineDash: [3, 3],
                    stroke: this.device.style.Section.mouseOverStyle.borderColor,
                    fill: this.device.style.transparentColor
                }
            });

            this.add(this.lineBorder);
            this.lineBorder.hide();
        }
    }

    getInstanceByCode(code) {
        return (store.getters['map/getDeviceByCode'](code) || {}).instance;
    }

    mouseover(e) {
        if (this.device.model.isSwitchSection && this.device.model.relSwitchCode) {
            const instance = this.getInstanceByCode(this.device.model.relSwitchCode);
            if (instance && instance.mouseEvent && instance.mouseEvent.mouseover) {
                instance.mouseEvent.mouseover(e);
            }
        } else {
            this.TextName && this.TextName.show();
            this.sectionTextBorder && this.sectionTextBorder.show();
            this.lineBorder && this.lineBorder.show();
            const instance = this.getInstanceByCode(this.device.model.trainWindowCode);
            if (instance && instance.mouseEvent && instance.mouseEvent.mouseEnter) {
                instance.mouseEvent.mouseEnter(e);
            }
        }
    }

    mouseout(e) {
        if (!this.device.model.down) {
            this.sectionTextShadow && this.sectionTextShadow.hide();
            if (this.device.model.isSwitchSection && this.device.model.relSwitchCode) {
                const instance = this.getInstanceByCode(this.device.model.relSwitchCode);
                if (instance && instance.mouseEvent && instance.mouseEvent.mouseout) {
                    instance.mouseEvent.mouseout(e);
                }
            } else {
                this.TextName && this.TextName.hide();
                this.sectionTextBorder && this.sectionTextBorder.hide();
                this.lineBorder && this.lineBorder.hide();
                const instance = this.getInstanceByCode(this.device.model.trainWindowCode);
                if (instance && instance.mouseEvent && instance.mouseEvent.mouseLeave) {
                    instance.mouseEvent.mouseLeave(e);
                }
            }
        }
    }

    mouseEnter(e) {
        this.TextName && this.TextName.show();
        this.sectionTextBorder && this.sectionTextBorder.show();
        this.lineBorder && this.lineBorder.show();
        if (this.device.model.isSwitchSection && this.device.model.relSwitchCode) {
            const instance = this.getInstanceByCode(this.device.model.relSwitchCode);
            if (instance && instance.mouseEvent && instance.mouseEvent.mouseEnter) {
                instance.mouseEvent.mouseEnter(e);
            }
        }
    }

    mouseLeave(e) {
        this.TextName && this.TextName.hide();
        this.sectionTextBorder && this.sectionTextBorder.hide();
        this.lineBorder && this.lineBorder.hide();
        if (this.device.model.isSwitchSection && this.device.model.relSwitchCode) {
            const instance = this.getInstanceByCode(this.device.model.relSwitchCode);
            if (instance && instance.mouseEvent && instance.mouseEvent.mouseLeave) {
                instance.mouseEvent.mouseLeave(e);
            }
        }
    }
}
export default EMouse;