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

import Group from 'zrender/src/container/Group';
import Rect from 'zrender/src/graphic/shape/Rect';
import store from '@/store/index_APP_TARGET';
class EMouse extends Group {
    constructor(device) {
        super();
        this.device = device;
        this.create();
        this.craeteSwitchBorder();
    }
    create() {
        if (this.device.name) {
            // 创建锁闭框
            const rect = this.device.name.getNameText().getBoundingRect();
            let textWidth = rect.width * 0.8;
            if (this.device.triangle.drictx !== 1) {
                textWidth = -textWidth;
            }

            this.textRect = new Rect({
                zlevel: this.device.zlevel,
                z: this.device.z,
                silent: true,
                shape: {
                    x: rect.x,
                    y: rect.y,
                    width: textWidth,
                    height: rect.height
                },
                style: {
                    lineWidth: 1,
                    lineDash: [3, 3],
                    stroke: this.device.style.Switch.mouseOverStyle.borderColor,
                    fill: this.device.style.Switch.mouseOverStyle.borderBackgroundColor
                }
            });
            this.add(this.textRect);
            this.textRect.hide();
        }
    }

    // 创建道岔边框
    craeteSwitchBorder() {
        const sectionA = this.getInstanceByCode(this.device.model.sectionACode);
        const sectionB = this.getInstanceByCode(this.device.model.sectionBCode);
        const sectionC = this.getInstanceByCode(this.device.model.sectionCCode);
        const rect = this.device.getBoundingRect();

        sectionA && rect.union(sectionA.getBoundingRect());
        sectionB && rect.union(sectionB.getBoundingRect());
        sectionC && rect.union(sectionC.getBoundingRect());

        this.switchBorder = new Rect({
            zlevel: this.device.model.zlevel,
            z: this.device.z,
            silent: true,
            shape: Object.assign({ r: 4 }, rect),
            style: {
                lineDash: [3, 3],
                stroke: this.device.style.Switch.mouseOverStyle.borderColor,
                fill: this.device.style.transparentColor
            }
        });

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

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

    mouseout(e) {
        if (!this.device.model.down) {
            this.switchBorder && this.switchBorder.hide();
            this.device.setTextStyle({
                textFill: this.device.style.backgroundColor
            });
            this.textRect && this.textRect.hide();
            this.device.setState(this.device.model);

            const section = store.getters['map/getDeviceByCode'](this.device.model.sectionACode) || {};
            const parentSection = store.getters['map/getDeviceByCode'](section.parentCode) || {};
            const instance = this.getInstanceByCode(parentSection.trainWindowCode);
            if (instance && instance.mouseEvent && instance.mouseEvent.mouseLeave) {
                instance.mouseEvent.mouseLeave(e);
            }
        }
    }

    mouseover(e) {
        this.switchBorder && this.switchBorder.show();
        this.device.setTextStyle({
            textFill: '#000'
        });
        this.textRect && this.textRect.show();

        const section = store.getters['map/getDeviceByCode'](this.device.model.sectionACode) || {};
        const parentSection = store.getters['map/getDeviceByCode'](section.parentCode) || {};
        const instance = this.getInstanceByCode(parentSection.trainWindowCode);
        if (instance && instance.mouseEvent && instance.mouseEvent.mouseEnter) {
            instance.mouseEvent.mouseEnter(e);
        }
    }

    mouseEnter() {
        this.switchBorder && this.switchBorder.show();
        this.device.setTextStyle({ textFill: '#000' });
        this.textRect && this.textRect.show();
    }

    mouseLeave() {
        this.switchBorder && this.switchBorder.hide();
        this.device.setTextStyle({ textFill: this.device.style.backgroundColor });
        this.textRect && this.textRect.hide();
        this.device.setState(this.device.model);
    }
}
export default EMouse;