rt-graphic-component/components/Platform/Platform.js

import { JlGraphic, calculateMirrorPoint, JlGraphicTemplate, getRectangleCenter, VectorText } from 'jl-graphic';
import { Container, Graphics, Color, Point, Rectangle } from 'pixi.js';
import { platformConstsMap, CategoryType } from './PlatformConfig.js';

class RectGraphic extends Container {
    static Type = 'RectPlatForm';
    rectGraphic;
    constructor() {
        super();
        this.rectGraphic = new Graphics();
        this.addChild(this.rectGraphic);
    }
    draw(state, platformConsts) {
        const rectGraphic = this.rectGraphic;
        rectGraphic.clear();
        let fillColor = platformConsts.grey;
        /* if(state instanceof IXiAnPlatformState){
          if (state.trainberth) {
            fillColor = platformConsts.yellow;
          }
          if (state.upSkipstop || state.downSkipstop) {
            fillColor = platformConsts.blue;
          }
        } */
        rectGraphic
            .clear()
            .lineStyle(platformConsts.lineWidth, new Color(fillColor))
            .beginFill(fillColor, 1)
            .drawRect(0, 0, platformConsts.width, platformConsts.height).endFill;
        rectGraphic.pivot = getRectangleCenter(new Rectangle(0, 0, platformConsts.width, platformConsts.height));
    }
    clear() {
        this.rectGraphic.clear();
    }
}
//子元素--门
class DoorGraphic extends Container {
    static Type = 'Door';
    doorGraphic;
    doorCloseGraphic;
    constructor() {
        super();
        this.doorGraphic = new Graphics();
        this.doorCloseGraphic = new Graphics();
        this.addChild(this.doorGraphic);
        this.addChild(this.doorCloseGraphic);
    }
    draw(stateData, ipRtuStusDown, platformConsts) {
        const doorConsts = platformConsts.doorGraphic;
        const doorGraphic = this.doorGraphic;
        const doorCloseGraphic = this.doorCloseGraphic;
        let lineColor = doorConsts.doorGreen;
        if (ipRtuStusDown) {
            lineColor = doorConsts.blueShowColor;
        }
        else if (stateData.psdCut) {
            lineColor = doorConsts.doorRed;
        }
        doorGraphic.clear()
            .lineStyle(platformConsts.lineWidth, new Color(lineColor))
            .moveTo(-platformConsts.width / 2 - platformConsts.lineWidth / 2, 0)
            .lineTo(-doorConsts.doorOpenSpacing, 0)
            .moveTo(doorConsts.doorOpenSpacing, 0)
            .lineTo(platformConsts.width / 2 + platformConsts.lineWidth / 2, 0);
        //屏蔽门闭合
        doorCloseGraphic.clear()
            .lineStyle(platformConsts.lineWidth, new Color(lineColor))
            .moveTo(-doorConsts.doorOpenSpacing, 0)
            .lineTo(doorConsts.doorOpenSpacing, 0);
    }
    clear() {
        this.doorGraphic.clear();
        this.doorCloseGraphic.clear();
    }
    changeState(stateData) {
        if (stateData.psdOpen) {
            this.doorCloseGraphic.visible = false;
        }
        else {
            this.doorCloseGraphic.visible = true;
        }
    }
}
//子元素--字符
class CodeGraph extends Container {
    static Type = 'Code';
    character = new VectorText(''); //扣车H
    runLevel = new VectorText(''); //运行等级
    runTime = new VectorText(''); //运行时间
    stopTime = new VectorText(''); //停站时间
    circle = new Graphics();
    constructor(platformConsts) {
        super();
        this.addChild(this.character);
        this.addChild(this.runLevel);
        this.addChild(this.circle);
        this.addChild(this.stopTime);
        this.addChild(this.runTime);
        const codeConsts = platformConsts.codeGraphic;
        this.character.setVectorFontSize(codeConsts.besideFontSize);
        this.runLevel.setVectorFontSize(codeConsts.besideFontSize);
        this.stopTime.setVectorFontSize(codeConsts.besideFontSize);
        this.runTime.setVectorFontSize(codeConsts.besideFontSize);
    }
    draw(platformConsts) {
        const codeConsts = platformConsts.codeGraphic;
        //扣车
        const character = this.character;
        character.text = 'H';
        character.anchor.set(0.5);
        character.position.set(-platformConsts.width / 2 -
            platformConsts.lineWidth / 2 -
            (codeConsts.besideSpacing * 2) / 3, (platformConsts.height * 3) / 4);
        character.style.fill = codeConsts.whiteNumbers;
        const circle = this.circle;
        circle.clear()
            .lineStyle(0.5, codeConsts.whiteCircle)
            .drawCircle(0, 0, codeConsts.circleRadius);
        circle.position.set(-platformConsts.width / 2 -
            platformConsts.lineWidth / 2 -
            (codeConsts.besideSpacing * 4) / 3, (platformConsts.height * 3) / 5);
        //区间运行等级状态
        const runLevel = this.runLevel;
        runLevel.anchor.set(0.5);
        runLevel.position.set(platformConsts.width / 2 +
            platformConsts.lineWidth / 2 +
            3 * codeConsts.besideSpacing, -codeConsts.besideSpacing);
        runLevel.style.fill = codeConsts.whiteNumbers;
        //区间运行时间
        const runTime = this.runTime;
        runTime.anchor.set(0.5);
        runTime.position.set(platformConsts.width / 2 +
            platformConsts.lineWidth / 2 +
            codeConsts.besideSpacing, -codeConsts.besideSpacing);
        runTime.style.fill = codeConsts.whiteNumbers;
        //停站时间
        const stopTime = this.stopTime;
        stopTime.anchor.set(0.5);
        stopTime.position.set(platformConsts.width / 2 +
            platformConsts.lineWidth / 2 +
            codeConsts.besideSpacing, codeConsts.besideSpacing);
        stopTime.style.fill = codeConsts.whiteNumbers;
        character.visible = false;
        circle.visible = false;
        runLevel.visible = false;
        stopTime.visible = false;
        runTime.visible = false;
    }
    clear() {
        this.character.destroy();
    }
    changeState(stateData, platformConsts) {
        const codeConsts = platformConsts.codeGraphic;
        if (stateData.upHold ||
            stateData.upOccHold ||
            stateData.downHold ||
            stateData.downOccHold) {
            this.character.text = 'H';
            this.character.visible = true;
            this.circle.visible = true;
            //上行扣车
            if (stateData.upHold) {
                this.character.style.fill = codeConsts.HCharYellow;
            }
            if (stateData.upOccHold) {
                this.character.style.fill = codeConsts.HCharWhite;
            }
            if (stateData.upHold && stateData.upOccHold) {
                this.character.style.fill = codeConsts.HCharRed;
            }
            //下行扣车
            if (stateData.downHold) {
                this.character.style.fill = codeConsts.HCharYellow;
            }
            if (stateData.downOccHold) {
                this.character.style.fill = codeConsts.HCharWhite;
            }
            if (stateData.downHold && stateData.downOccHold) {
                this.character.style.fill = codeConsts.HCharRed;
            }
        }
        //运行等级
        if (stateData.nextSectionRunLevel) {
            this.runLevel.visible = false;
            this.runLevel.text = stateData.nextSectionRunLevel;
        }
        //运行时间
        if (stateData.nextSectionRunTime) {
            this.runTime.visible = true;
            this.runTime.text = stateData.nextSectionRunTime;
        }
        //停站时间
        if (stateData.stopTime) {
            this.stopTime.visible = true;
            this.stopTime.text = stateData.stopTime;
        }
    }
}
//子元素--站台旁菱形图标
class LozengeGraphic extends Container {
    static Type = 'lozengeGraphic';
    lozengeGraphic;
    constructor() {
        super();
        this.lozengeGraphic = new Graphics();
        this.addChild(this.lozengeGraphic);
    }
    draw(platformConsts) {
        const LozengeConsts = platformConsts.lozengeGraphic;
        const lozengeGraphic = this.lozengeGraphic;
        lozengeGraphic.clear()
            .lineStyle(1, new Color(LozengeConsts.lozengeRed))
            .beginFill(LozengeConsts.lozengeRed, 1)
            .drawRect(0, 0, platformConsts.height / 4, platformConsts.height / 4)
            .endFill();
        const rect = new Rectangle(0, 0, platformConsts.height / 4, platformConsts.height / 4);
        lozengeGraphic.pivot = getRectangleCenter(rect);
        lozengeGraphic.rotation = Math.PI / 4;
        lozengeGraphic.visible = false;
    }
    clear() {
        this.lozengeGraphic.clear();
    }
    changeState(stateData) {
        if (stateData.emergstop) {
            this.lozengeGraphic.visible = true;
        }
        else {
            this.lozengeGraphic.visible = false;
        }
    }
}
class Platform extends JlGraphic {
    static Type = 'Platform';
    categoryType;
    rectGraphic = new RectGraphic();
    doorGraphic;
    lozengeGraphic;
    codeGraph;
    constructor(categoryType) {
        super(Platform.Type);
        this.categoryType = categoryType;
        this.addChild(this.rectGraphic);
        const platformConsts = platformConstsMap.get(this.categoryType);
        if (platformConsts.doorGraphic) {
            this.doorGraphic = new DoorGraphic();
            this.addChild(this.doorGraphic);
        }
        if (platformConsts.lozengeGraphic) {
            this.lozengeGraphic = new LozengeGraphic();
            this.addChild(this.lozengeGraphic);
        }
        if (platformConsts.codeGraphic) {
            this.codeGraph = new CodeGraph(platformConsts);
            this.addChild(this.codeGraph);
        }
    }
    get datas() {
        return this.getDatas();
    }
    get states() {
        if (this.categoryType == CategoryType.BeiJing) {
            return this.getStates();
        }
        else {
            return this.getStates();
        }
    }
    doRepaint() {
        this.doorGraphic?.clear();
        const platformConsts = platformConstsMap.get(this.categoryType);
        this.rectGraphic.draw(this.states, platformConsts);
        if (this.doorGraphic) {
            const states = this.states;
            /*  const station = this.getGraphicApp().queryStore.queryByCodeAndType<Station>(
               states.rtuId > 9 ? '' + states.rtuId : '0' + states.rtuId,
               Station.Type
             ); */
            this.doorGraphic.draw(states, false, platformConsts);
            const doorConsts = platformConsts.doorGraphic;
            this.doorGraphic.position.set(0, -platformConsts.height / 2 - doorConsts.doorPlatformSpacing);
            if (this.datas.direction == 'down') {
                this.doorGraphic.position.copyFrom(calculateMirrorPoint(new Point(0, 0), this.doorGraphic.position));
            }
        }
        if (this.codeGraph) {
            this.codeGraph.draw(platformConsts);
            this.codeGraph.position.set(0, 0);
            if (this.datas.direction == 'down') {
                const psChange = [
                    this.codeGraph?.children[0],
                    this.codeGraph?.children[1],
                    this.codeGraph?.children[3],
                    this.codeGraph?.children[4],
                ];
                psChange.forEach((g) => {
                    if (g) {
                        g.position.copyFrom(calculateMirrorPoint(new Point(0, 0), g.position));
                    }
                });
                const codeConsts = platformConsts.codeGraphic;
                this.codeGraph?.children[2].position.set(platformConsts.width / 2 +
                    platformConsts.lineWidth / 2 +
                    (codeConsts.besideSpacing * 4) / 3, (-platformConsts.height * 10) / 11);
            }
        }
        if (this.lozengeGraphic) {
            const LozengeConsts = platformConsts.lozengeGraphic;
            this.lozengeGraphic.draw(platformConsts);
            this.lozengeGraphic.position.set(0, -platformConsts.height / 2 -
                LozengeConsts.doorPlatformSpacing -
                platformConsts.height / 3);
            if (this.datas.direction == 'down') {
                this.lozengeGraphic.position.copyFrom(calculateMirrorPoint(new Point(0, 0), this.lozengeGraphic.position));
            }
        }
        this.changeState();
    }
    changeState() {
        const platformConsts = platformConstsMap.get(this.categoryType);
        const states = this.states;
        this.doorGraphic?.changeState(states);
        this.lozengeGraphic?.changeState(states);
        this.codeGraph?.changeState(states, platformConsts);
    }
}
class PlatformTemplate extends JlGraphicTemplate {
    categoryType;
    constructor(dataTemplate, stateTemplate, gategoryConsts) {
        super(Platform.Type, { dataTemplate, stateTemplate });
        this.categoryType = gategoryConsts;
    }
    new() {
        const g = new Platform(this.categoryType);
        g.loadData(this.datas);
        g.loadState(this.states);
        return g;
    }
}

export { DoorGraphic, Platform, PlatformTemplate };