86 lines
2.8 KiB
JavaScript
86 lines
2.8 KiB
JavaScript
|
import { Graphics, Color } from 'pixi.js';
|
||
|
|
import { JlGraphic, JlGraphicTemplate } from 'jl-graphic';
|
||
|
|
import { SeparatorConstsMap, separatorTypeEnum } from './SeparatorConfig.js';
|
||
|
|
|
||
|
|
let SeparatorConsts = {
|
||
|
|
height: 12,
|
||
|
|
lineWidth: 2,
|
||
|
|
lineColor: '0xFFFFFF',
|
||
|
|
circleColor: '0xEF0200',
|
||
|
|
radius: 5,
|
||
|
|
};
|
||
|
|
class Separator extends JlGraphic {
|
||
|
|
static Type = 'Separator';
|
||
|
|
rectGraphic = new Graphics();
|
||
|
|
circleGraphic = new Graphics();
|
||
|
|
categoryType;
|
||
|
|
constructor(categoryType) {
|
||
|
|
super(Separator.Type);
|
||
|
|
this.addChild(this.rectGraphic);
|
||
|
|
this.addChild(this.circleGraphic);
|
||
|
|
this.categoryType = categoryType;
|
||
|
|
this.getConstDatas();
|
||
|
|
}
|
||
|
|
get datas() {
|
||
|
|
return this.getDatas();
|
||
|
|
}
|
||
|
|
getConstDatas() {
|
||
|
|
const constData = SeparatorConstsMap.get(this.categoryType);
|
||
|
|
if (constData) {
|
||
|
|
SeparatorConsts = constData;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
clear() {
|
||
|
|
this.rectGraphic.clear();
|
||
|
|
this.circleGraphic.clear();
|
||
|
|
}
|
||
|
|
doRepaint() {
|
||
|
|
this.clear();
|
||
|
|
const rectGraphic = this.rectGraphic;
|
||
|
|
if (!this.datas.separatorType) {
|
||
|
|
this.datas.separatorType = separatorTypeEnum.endA;
|
||
|
|
}
|
||
|
|
const typeArr = ['section', 'turnout'];
|
||
|
|
if (typeArr.includes(this.datas.separatorType)) {
|
||
|
|
rectGraphic.lineStyle(SeparatorConsts.lineWidth, new Color(SeparatorConsts.lineColor));
|
||
|
|
rectGraphic.moveTo(0, -SeparatorConsts.height / 2);
|
||
|
|
rectGraphic.lineTo(0, SeparatorConsts.height / 2);
|
||
|
|
if (this.datas.separatorType == 'turnout') {
|
||
|
|
this.circleGraphic.lineStyle(1, SeparatorConsts.circleColor);
|
||
|
|
this.circleGraphic.drawCircle(0, 0, SeparatorConsts.radius);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const endTypeArr = ['endA', 'endB'];
|
||
|
|
if (endTypeArr.includes(this.datas.separatorType)) {
|
||
|
|
let d = SeparatorConsts.radius;
|
||
|
|
if (this.datas.separatorType == 'endB') {
|
||
|
|
d = -d;
|
||
|
|
}
|
||
|
|
rectGraphic.lineStyle(SeparatorConsts.lineWidth, new Color(SeparatorConsts.lineColor));
|
||
|
|
rectGraphic.moveTo(0, 0);
|
||
|
|
rectGraphic.lineTo(-d, 0);
|
||
|
|
rectGraphic.lineTo(-d, -d);
|
||
|
|
rectGraphic.lineTo(-d * 3, -d);
|
||
|
|
rectGraphic.moveTo(-d, 0);
|
||
|
|
rectGraphic.lineTo(-d, d);
|
||
|
|
rectGraphic.lineTo(-d * 3, d);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
class SeparatorTemplate extends JlGraphicTemplate {
|
||
|
|
categoryType;
|
||
|
|
constructor(dataTemplate, gategoryConsts) {
|
||
|
|
super(Separator.Type, {
|
||
|
|
dataTemplate,
|
||
|
|
});
|
||
|
|
this.categoryType = gategoryConsts;
|
||
|
|
}
|
||
|
|
new() {
|
||
|
|
const separator = new Separator(this.categoryType);
|
||
|
|
separator.loadData(this.datas);
|
||
|
|
return separator;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export { Separator, SeparatorTemplate };
|