rt-graphic-component/components/Separator/Separator.js
2023-12-25 16:37:59 +08:00

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 };