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

/*
*	道岔
*/
import Line from 'zrender/src/graphic/shape/Line';
import Group from 'zrender/src/container/Group';
import JTriangle from '../../utils/JTriangle';
import ESwName from './ESwName.js';
import ESwCore from './ESwCore.js';
import ESwLocal from './ESwLocal.js';
import ESwLnversion from './ESwLnversion';
import ELockRect from './ELockRect';
import EMouse from './EMouse';
import EHighlight from '../element/EHighlight';
import ERhomboid from './ERhomboid';

export default class Switch extends Group {
    constructor(model, style) {
        super();
        this._code = model.code;
        this._type = model._type;
        this.model = model;
        this.style = style;
        this.zlevel = model.zlevel;
        this.z = 6;
        this.triangle = new JTriangle(model.intersection, model.skew);
        this.create();
        this.createLockRect(); // 创建单锁矩形框显示
        this.createMouseEvent();
        this.setState(model);
        this.checkIsDrawMap();
    }

    createMouseEvent() {
        // 鼠标事件
        if (this.style.Switch.mouseOverStyle) {
            this.mouseEvent = new EMouse(this);
            this.add(this.mouseEvent);
            this.on('mouseout', (e) => { this.mouseEvent.mouseout(e); });
            this.on('mouseover', (e) => { this.mouseEvent.mouseover(e); });
        }
    }

    create() {
        const model = this.model;
        const style = this.style;

        let halfWidth = style.Section.line.width / 2;
        const switchWidth = style.Section.line.width + style.Section.line.beyondWidth * 2 + 0.8;
        const swPadding = style.Switch.core.length;
        const directx = this.triangle.drictx;
        const directy = this.triangle.dricty;
        const direct = -this.triangle.drictx * this.triangle.dricty;
        const coverLength = switchWidth * 1.5;

        this.swCore = new ESwCore({ // 道岔两个斜线 盖住所有
            zlevel: this.zlevel,
            z: this.z,
            style: style,
            intersectionX: model.intersection.x,
            intersectionY: model.intersection.y,
            coverLength: coverLength,
            lineWidth: switchWidth,
            triangle: this.triangle
        });

        halfWidth += 0.3;
        const point1 = [model.intersection.x - directx * halfWidth, model.intersection.y + directy * halfWidth];
        const point2 = [point1[0] + directx * switchWidth / this.triangle.getSinRate(), point1[1]];
        const point3 = [point2[0] + directx * this.triangle.getCotRate() * swPadding, point2[1] + directy * swPadding];
        const point4 = [point3[0] + direct * this.triangle.getSin(switchWidth), point3[1] - direct * this.triangle.getCos(switchWidth)];
        this.locShelter = new ESwLocal({ // 定位
            zlevel: this.zlevel,
            z: this.z,
            style: style,
            shelterPoints: [point1, point2, point3, point4],
            cursor: 'pointer',
            triangle: this.triangle,
            onmouseover: () => { this.name.getArrowText().show(); },
            onmouseout: () => { this.name.getArrowText().hide(); }
        });

        const slen = switchWidth / this.triangle.getSinRate();
        const rpoint1 = [model.intersection.x + directx * halfWidth, model.intersection.y - directy * halfWidth];
        const rpoint2 = [rpoint1[0] + directx * (swPadding + switchWidth * this.triangle.getCotRate()), rpoint1[1]];
        const rpoint3 = [rpoint2[0], rpoint2[1] + directy * switchWidth];
        const rpoint4 = [rpoint1[0] + this.triangle.getCos(slen), rpoint1[1] + this.triangle.getSin(slen)];

        const switchWidth1 = style.Section.line.width / 2 + 0.1;
        const width1 = switchWidth1 * this.triangle.getSinRate();
        const height1 = switchWidth1 * this.triangle.getCosRate();
        const width2 = (height1 + switchWidth1) / this.triangle.getTanRate();
        const width3 = (style.Section.line.width / this.triangle.getSinRate()) - width2 - width1;
        const spoint1 = [model.intersection.x + directx * width3, model.intersection.y - directy * switchWidth1];
        // const spoint2 = [spoint1[0] - directx * (width2 + width1) - directx * width3, spoint1[1]];
        // const spoint3 = [model.intersection.x - directx * width3, model.intersection.y + directy * switchWidth1];
        const spoint2 = [model.intersection.x - directx * 13, spoint1[1]];
        const spoint3 = [model.intersection.x - directx * 13, model.intersection.y + directy * switchWidth1];
        const spoint4 = [spoint1[0] + directx * (width2 + width1) - directx * width3, spoint3[1]];

        this.relocShelter = new ESwLnversion({ // 反位覆盖形状
            zlevel: this.zlevel,
            z: this.z,
            style: style,
            shelterPoints: [rpoint1, rpoint2, rpoint3, rpoint4],
            sectionPoints: [spoint1, spoint2, spoint3, spoint4],
            cursor: 'pointer',
            halfWidth: halfWidth,
            triangle: this.triangle,
            onmouseover: () => { this.name.getArrowText().show(); },
            onmouseout: () => { this.name.getArrowText().hide(); }
        });

        this.rhomboid = new ERhomboid({ // 平行四边形覆盖范围
            zlevel: this.zlevel,
            z: this.z,
            style: style,
            sectionPoints: [spoint1, spoint2, spoint3, spoint4],
            cursor: 'pointer',
            halfWidth: halfWidth,
            triangle: this.triangle,
            onmouseover: () => { this.name.getArrowText().show(); },
            onmouseout: () => { this.name.getArrowText().hide(); }
        });


        this.releaseBackground = new Line({ // 区段上遮盖段
            zlevel: this.zlevel,
            z: this.z,
            shape: {
                x1: model.intersection.x - (coverLength * this.triangle.getCotRate()),
                y1: model.intersection.y,
                x2: model.intersection.x + (coverLength * this.triangle.getCotRate()),
                y2: model.intersection.y
            },
            style: {
                lineWidth: style.Section.line.width + style.Section.line.beyondWidth + 1,
                stroke: style.backgroundColor
            }
        });

        const arrowTextX = model.intersection.x + 10;
        const arrowTextY = model.intersection.y + 15;
        const nameTextX = model.namePosition.x + model.intersection.x + directx * (style.Section.line.width * 3 + style.Switch.text.offset.x) * this.triangle.getCotRate();
        const nameTextY = model.namePosition.y + model.intersection.y + style.Switch.text.offset.y * (style.Switch.text.position || directy);

        this.name = new ESwName({ // 道岔名称
            zlevel: this.zlevel,
            z: this.z,
            style: style,
            arrowTextX: arrowTextX,
            arrowTextY: arrowTextY,
            nameTextX: nameTextX,
            nameTextY: nameTextY,
            sectionName: model.sectionName,
            name: model.name,
            nameShow: style.Switch.text.show,
            triangle: this.triangle
        });

        this.add(this.swCore); // 岔芯link
        this.add(this.locShelter);
        this.add(this.relocShelter);
        this.add(this.rhomboid);
        this.add(this.releaseBackground);
        this.add(this.name);
    }

    createLockRect() {
        const offsetX = this.model.locateType == '01' ? 3 : 0;
        this.lockRect = new ELockRect({ // 锁定矩形
            zlevel: this.zlevel,
            z: this.z + 6,
            x: this.model.intersection.x - this.style.Switch.monolock.rectWidth / 2 + offsetX,
            y: this.model.intersection.y - this.style.Switch.monolock.rectWidth / 2,
            width: this.style.Switch.monolock.rectWidth,
            lineWidth: 1.8,
            stroke: this.style.Switch.monolock.rectBorderColor,
            fill: this.style.transparentColor
        });
        this.add(this.lockRect);
        this.lockRect.hide();
    }

    /** 名称动画*/
    nameTextAnimation() {
        this.name.getNameText().animateStyle(true)
            .when(0, { textFill: this.style.backgroundColor })
            .when(1000, { textFill: this.style.Switch.text.lossColor })
            .when(2000, { textFill: this.style.backgroundColor })
            .start();

        this.name.getTextRect().animateStyle(true)
            .when(0, { textFill: this.style.backgroundColor })
            .when(1000, { textFill: this.style.Switch.text.borderColor })
            .when(2000, { textFill: this.style.backgroundColor })
            .start();
    }

    /** 设置岔芯是否隐藏*/
    setSwitchCoreInvisible(invisible) {
        if (invisible) {
            this.swCore.hide();
        } else {
            this.swCore.show();
        }
    }

    /** 设置岔芯颜色*/
    setSwitchCoreColor(color) {
        this.swCore && this.swCore.setColor(color);
    }

    /** 设置道岔文字颜色*/
    setTextColor(color) {
        this.name.getNameText().setStyle({ textFill: color });
    }

    /** 设置道岔背景颜色*/
    setTextStyle(style) {
        this.name.getNameText().setStyle(style);
    }

    /** 设置道岔文字边框颜色  (道岔封锁) */
    setHasTextBorder(width) {
        this.name.getTextRect().setStyle({ lineWidth: width });
    }

    /** 恢复状态*/
    recover() {
        this.lockRect.hide(); // 矩形包围框
        this.setSwitchCoreColor(this.style.backgroundColor);
        this.name.getNameText().stopAnimation(false);
        this.swCore.stopAnimation(false);
        // this.relocShelter.hide();
        // this.rhomboid.hide();
        this.rhomboid.stopAnimation(false);
        this.releaseBackground.hide();
        this.setHasTextBorder(0);
    }

    /** 定位*/
    setLocationAction() {
        this.recover();
        this.setSwitchCoreInvisible(true);
        if (this.style.Switch.core.splice) {
            this.locShelter.hide();
        } else {
            this.locShelter.show();
        }
        this.relocShelter.hide();
        this.rhomboid.hide();
        this.setTextColor(this.style.Switch.text.locateColor);
    }

    /** 反位*/
    setInversionAction() {
        this.recover();
        this.setSwitchCoreInvisible(true);
        this.setTextColor(this.style.Switch.text.inversionColor);
        if (this.style.Switch.core.splice) {
            this.relocShelter.hide();
        } else {
            this.relocShelter.show(); // 反位
        }
        this.locShelter.hide(); // 定位
        this.rhomboid.show();
        this.setSectionState(this.relocShelter.getSection(), 'fill', this.model);
        this.setSectionState(this.rhomboid.getSection(), 'fill', this.model);
    }

    /** 失去*/
    setLossAction(nameFlicker) {
        this.recover();
        this.locShelter.hide();
        this.relocShelter.hide();
        this.rhomboid.hide();
        this.setSwitchCoreInvisible(false);
        this.setTextColor(this.style.Switch.text.lossColor);
        nameFlicker && this.nameTextAnimation();
    }

    /** 挤叉*/
    setForkAction() {
        this.setLossAction(true);
        this.swCore.animateStyle(item => {
            item.animateStyle(true)
                .when(0, { stroke: this.style.backgroundColor })
                .when(1000, { stroke: 'red' })
                .when(2000, { stroke: this.style.backgroundColor })
                .start();
        });
    }

    /** 空闲*/
    spare() {
    }

    /** 单锁*/
    setMonolock() {
        if (this.style.Switch.monolock.rectShow) { // 判断单锁矩形是否显示
            this.lockRect.show();
        }
        switch (this.model.locateType) {
            case '01': // 定位
                this.setTextColor(this.style.Switch.monolock.locationColor); // 设置道岔名称颜色
                break;
            case '02': // 反位
                this.setTextColor(this.style.Switch.monolock.inversionColor); // 设置道岔名称颜色
                break;
        }
    }

    /** 封锁 */
    block() {
        if (this.style.Switch.block.nameBorderShow) {
            this.setHasTextBorder(1);
        } else if (this.style.Switch.block.contentRectShow) {
            this.lockRect.show();
            this.lockRect.setStyle({ stroke: this.style.Switch.block.contentRectColor });
        }
    }

    /** 延时释放*/
    timeRelease() {
        this.setSwitchCoreInvisible(true);
        this.releaseBackground.show();
    }

    /** 设置道岔切除*/
    setSwitchCutOff() {
        this.setSwitchCoreInvisible(true);
        switch (this.model.locateType) {
            case '01':
                this.releaseBackground.hide();
                break;
            case '02':
                this.relocShelter.getSection().animateStyle(true)
                    .when(1000, { fill: this.style.backgroundColor })
                    .start();
                this.rhomboid.getSection().animateStyle(true)
                    .when(1000, { fill: this.style.backgroundColor })
                    .start();
                break;
        }
    }

    sectionCutOff(section) {
        const lineWidth = this.style.Section.line.width + (this.model.sectionAstatus != '01' ? this.style.Section.line.beyondWidth : 0);
        if (section) {
            section.animateStyle(true, [
                { time: 0, styles: { lineWidth: lineWidth } },
                { time: 1000, styles: { stroke: this.style.backgroundColor } },
                { time: 2000, styles: { lineWidth: lineWidth } }
            ]);
        }
    }

    setSectionState(section, style, state) {
        if (section && !section.animators.length) {
            switch (state.sectionAstatus) {
                case '00': break;
                case '01': 	/** 空闲*/
                    section.setStyle(style, this.style.Section.line.spareColor);
                    break;
                case '02': 	/** 通信车占用*/
                    section.setStyle(style, this.style.Section.line.communicationOccupiedColor);
                    break;
                case '03': 	/** 非通信车占用*/
                    section.setStyle(style, this.style.Section.line.unCommunicationOccupiedColor);
                    break;
                case '04': 	/** 进路锁闭*/
                    section.setStyle(style, this.style.Section.line.routeLockColor);
                    break;
                case '05': 	/** 故障锁闭*/
                    section.setStyle(style, this.style.Section.line.faultLockColor);
                    break;
                case '06': 	/** 封锁*/
                    section.setStyle(style, this.style.Section.line.blockColor);
                    break;
                case '07': 	/** ATC切除*/
                    section.setStyle(style, this.style.Section.line.atcExcisionColor);
                    break;
                case '08': 	/** ATS切除*/
                    section.setStyle(style, this.style.Section.line.atsExcisionColor);
                    section.animateStyle(true)
                        .when(1000, { fill: this.style.backgroundColor })
                        .when(2000, { fill: this.style.Section.line.atsExcisionColor })
                        .start();
                    break;
                case '09':	/** 进路延续保护 */
                    section.setStyle(style, this.style.Section.line.protectiveLockColor);
                    break;
            }

            if (state.cutOff) {
                this.sectionCutOff(section);
            }
        }

    }

    setLocateType(model) {
        switch (model.locateType) {
            case '01':
                this.setLocationAction(); 	/** 定位*/
                break;
            case '02':
                this.setInversionAction(); 	/** 反位*/
                break;
            case '03':
                this.setLossAction(true); 	/** 失去*/
                break;
            case '04':
                this.setForkAction(); 		/** 挤岔*/
                break;
            default:
                this.setLocationAction();
        }
    }

    setState(model) {
        // this.setLocateType(model);
        if (model.normalPosition) {
            this.setLocationAction(); 	/** 定位*/
        } else if (model.reversePosition) {
            this.setInversionAction(); 	/** 反位*/
        }
        /** 道岔单锁 */
        if (model.singleLock) {
            this.setMonolock();
        }
        /** 道岔锁闭 */
        if (model.blockade) {
            this.block();
        }
        // switch (model.status) {
        // case '01':
        //     this.spare(); 				/** 空闲*/
        //     break;
        // case '10':
        //     this.setMonolock(); 		/** 单锁*/
        //     break;
        // case '13':
        //     this.timeRelease(); 		/** 延时释放*/
        //     break;
        // case '14':
        //     this.block(); 				/** 封锁*/
        //     break;
        // }

        // /** 区段切除*/
        // if (model.cutOff) {
        //     this.setSwitchCutOff();
        // }
    }

    getBoundingRect() {
        return this.name.getBoundingRect();
    }

    getShapeTipPoint() {
        const text = this.name.getNameText();
        if (text) {
            const rect = text.getBoundingRect();
            return {
                x: rect.x + rect.width / 2,
                y: rect.y
            };
        }
        return null;
    }

    drawSelected(selected) {
        this.highlight && this.highlight.drawSelected(selected);
    }

    checkIsDrawMap() {
        const path = window.location.href;
        if (path.includes('/map/draw')) {
            this.highlight = new EHighlight(this);
            this.add(this.highlight);
            this.on('mouseout', () => { this.highlight.mouseout(); });
            this.on('mouseover', () => { this.highlight.mouseover(); });
        }
    }
}