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

import Group from 'zrender/src/container/Group';
import Line from 'zrender/src/graphic/shape/Line';
import Circle from 'zrender/src/graphic/shape/Circle';
import Isogon from 'zrender/src/graphic/shape/Isogon';
import JTriangle from '../../utils/JTriangle';

export default class EAxle extends Group {
    constructor(model) {
        super();
        this.model = model;
        this.zlevel = model.zlevel;
        this.z = model.z;
        this.create();
    }
    create() {
        const model = this.model.modelData;
        if (model.leftAxlePosition) {
            this.createAxleLeft();
        }
        if (model.rightAxlePosition) {
            this.createAxleRight();
        }
    }

    createAxleLeft() {
        const model = this.model.modelData;

        const traingle = new JTriangle(model.points[0], model.points[1]);
        const drictx = 1;
        const dricty = model.leftAxlePosition === 1 || model.leftAxlePosition === 2 ? 1 : -1;
        const isSpecial = model.leftAxlePosition === -2 || model.leftAxlePosition === 2;
        const difference = model.points[0].y - model.points[1].y;
        let point = {};
        point = {x:model.points[0].x, y: model.points[0].y};
        if (model.leftAxleOffset) {
            point.x = point.x + model.leftAxleOffset.x || 0;
            point.y = point.y + model.leftAxleOffset.y || 0;
        }
        this.createAxle({
            traingle: traingle,
            drictx: drictx,
            dricty: dricty,
            isSpecial: isSpecial,
            point: point,
            difference: difference
        });
    }

    createAxleRight() {
        const model = this.model.modelData;
        const length = model.points.length;
        const traingle = new JTriangle(model.points[length - 2], model.points[length - 1]);
        const drictx = -1;
        const dricty = model.rightAxlePosition === 1 || model.rightAxlePosition === 2 ? 1 : -1;
        const isSpecial = model.rightAxlePosition === -2 || model.rightAxlePosition === 2;
        const difference = model.points[length - 2].y - model.points[length - 1].y;

        let point = {};
        point = {x:model.points[length - 1].x, y: model.points[length - 1].y};
        if (model.rightAxleOffset) {
            point.x = point.x + model.rightAxleOffset.x || 0;
            point.y = point.y + model.rightAxleOffset.y || 0;
        }
        this.createAxle({
            traingle: traingle,
            drictx: drictx,
            dricty: dricty,
            isSpecial: isSpecial,
            point: point,
            difference: difference
        });
    }

    createAxle(modelData) {
        const style = this.model.style;

        const axleLength = 2 * style.Section.axle.radius;
        let positionx = modelData.point.x - modelData.dricty * (modelData.traingle.getSin(axleLength) * 1.2);
        let positiony = modelData.point.y + modelData.dricty * (modelData.traingle.getCos(axleLength) * 1.2);
        if (modelData.difference === 0) {
            positionx += modelData.drictx * 1;
        } else if (modelData.difference > 0) {
            positionx -= modelData.drictx * modelData.traingle.getSin(1);
            positiony -= modelData.drictx * modelData.traingle.getCos(1);
        } else {
            positionx += modelData.drictx * modelData.traingle.getSin(1);
            positiony += modelData.drictx * modelData.traingle.getCos(1);
        }
        const x1 = positionx;
        const y1 = positiony;
        const x2 = positionx + modelData.drictx * 9 / 2 * style.Section.axle.radius;
        const y2 = positiony;
        const arcX = positionx + modelData.drictx * 2 * style.Section.axle.radius;
        const arcY = positiony;
        const angle = -modelData.traingle.getRotation();

        this.add(new Line({
            zlevel: this.zlevel,
            z: this.z,
            origin: [positionx, positiony],
            rotation:angle,
            shape: {
                x1:x1,
                y1:y1,
                x2:x2,
                y2:y2
            },
            style: {
                lineWidth: style.Section.axle.lineWidth,
                fill: style.Section.axle.fill,
                stroke: style.Section.axle.stroke
            }
        }));
        // this.add(this.line);
        if (modelData.isSpecial) {
            const brokenLineX1 = positionx + modelData.drictx * style.Section.axle.radius;
            const brokenLineY1 = positiony - style.Section.axle.radius * 2 / 3;
            const brokenLineY2 = positiony + style.Section.axle.radius * 2 / 3;
            const brokenLineX2 = positionx + modelData.drictx * style.Section.axle.radius * 4;
            const brokenLineY3 = positiony - style.Section.axle.radius * 2 / 3;
            const brokenLineY4 = positiony + style.Section.axle.radius * 2 / 3;
            const brokenLineX3 = positionx + modelData.drictx * style.Section.axle.radius * 4 / 3;
            const brokenLineX4 = positionx + modelData.drictx * style.Section.axle.radius * 11 / 3;
            const brokenLineY5 = positiony - style.Section.axle.radius;
            const brokenLineY6 = positiony + style.Section.axle.radius;
            this.add(new Isogon({
                zlevel: this.zlevel,
                z: this.z,
                origin: [positionx, positiony],
                rotation:angle,
                shape: {
                    x: arcX,
                    y: arcY,
                    r: style.Section.axle.radius,
                    n: 8
                },
                style: {
                    fill: style.Section.axle.fill
                }
            }));
            this.add(new Isogon({
                zlevel: this.zlevel,
                z: this.z + 1,
                origin: [positionx, positiony],
                rotation:angle,
                shape: {
                    x: arcX,
                    y: arcY,
                    r: style.Section.axle.radius / 2,
                    n: 4
                },
                style: {
                    fill: '#000'
                }
            }));
            this.add(new Line({
                zlevel: this.zlevel,
                z: this.z,
                origin: [positionx, positiony],
                rotation:angle,
                shape: {
                    x1: brokenLineX1,
                    y1: brokenLineY1,
                    x2: brokenLineX1,
                    y2: brokenLineY2
                },
                style: {
                    lineWidth: 1,
                    fill: style.Section.axle.fill,
                    stroke: style.Section.axle.stroke
                }
            }));
            this.add(new Line({
                zlevel: this.zlevel,
                z: this.z,
                origin: [positionx, positiony],
                rotation:angle,
                shape: {
                    x1: brokenLineX2,
                    y1: brokenLineY3,
                    x2: brokenLineX2,
                    y2: brokenLineY4
                },
                style: {
                    lineWidth: 1,
                    fill: style.Section.axle.fill,
                    stroke: style.Section.axle.stroke
                }
            }));
            this.add(new Line({
                zlevel: this.zlevel,
                z: this.z,
                origin: [positionx, positiony],
                rotation:angle,
                shape: {
                    x1: brokenLineX1,
                    y1: brokenLineY1,
                    x2: brokenLineX3,
                    y2: brokenLineY5
                },
                style: {
                    lineWidth: 1,
                    fill: style.Section.axle.fill,
                    stroke: style.Section.axle.stroke
                }
            }));
            this.add(new Line({
                zlevel: this.zlevel,
                z: this.z,
                origin: [positionx, positiony],
                rotation:angle,
                shape: {
                    x1: brokenLineX1,
                    y1: brokenLineY2,
                    x2: brokenLineX3,
                    y2: brokenLineY6
                },
                style: {
                    lineWidth: 1,
                    fill: style.Section.axle.fill,
                    stroke: style.Section.axle.stroke
                }
            }));
            this.add(new Line({
                zlevel: this.zlevel,
                z: this.z,
                origin: [positionx, positiony],
                rotation:angle,
                shape: {
                    x1: brokenLineX2,
                    y1: brokenLineY1,
                    x2: brokenLineX4,
                    y2: brokenLineY5
                },
                style: {
                    lineWidth: 1,
                    fill: style.Section.axle.fill,
                    stroke: style.Section.axle.stroke
                }
            }));
            this.add(new Line({
                zlevel: this.zlevel,
                z: this.z,
                origin: [positionx, positiony],
                rotation:angle,
                shape: {
                    x1: brokenLineX2,
                    y1: brokenLineY2,
                    x2: brokenLineX4,
                    y2: brokenLineY6
                },
                style: {
                    lineWidth: 1,
                    fill: style.Section.axle.fill,
                    stroke: style.Section.axle.stroke
                }
            }));
            // this.add(this.isogonInside);
            // this.add(this.isogonOutside);
            // this.add(this.line1);
            // this.add(this.line2);
            // this.add(this.line3);
            // this.add(this.line4);
            // this.add(this.line5);
            // this.add(this.line6);
        } else {
            this.add(new Circle({
                zlevel: this.zlevel,
                z: this.z,
                origin: [positionx, positiony],
                rotation:angle,
                shape: {
                    cx: arcX,
                    cy: arcY,
                    r: style.Section.axle.radius
                },
                style: {
                    fill: style.Section.axle.fill
                }
            }));
            // this.add(this.circle);
        }
    }

    setStyle(styles) {
        // if (this.isSpecial) {
        // this.eachChild((child) => {
        //     if (child.setStyle) {
        //         child.setStyle(styles);
        //     }
        // });
        // this.isogonOutside && this.isogonOutside.setStyle(styles);
        // this.isogonInside && this.isogonInside.setStyle(styles);
        // this.line1 && this.line1.setStyle(styles);
        // this.line2 && this.line2.setStyle(styles);
        // this.line3 && this.line3.setStyle(styles);
        // this.line4 && this.line4.setStyle(styles);
        // this.line5 && this.line5.setStyle(styles);
        // this.line6 && this.line6.setStyle(styles);
        // } else {
        // this.circle && this.circle.setStyle(styles);
        // }
        // this.line && this.line.setStyle(styles);
        this.eachChild((child) => {
            if (child && child.setStyle) {
                child.setStyle(styles);
            }
        });
    }

    recover() {

    }

    setState() {

    }
}