117 lines
3.8 KiB
JavaScript
117 lines
3.8 KiB
JavaScript
import Group from 'zrender/src/container/Group';
|
|
import Arc from 'zrender/src/graphic/shape/Arc';
|
|
import Text from 'zrender/src/graphic/Text';
|
|
import { createBoundingRect } from '../../../utils/parser';
|
|
import Rect from 'zrender/src/graphic/shape/Rect';
|
|
|
|
/** lc zc limit 单灯元素*/
|
|
export default class EControl extends Group {
|
|
constructor(model) {
|
|
super();
|
|
this.model = model;
|
|
this.zlevel = model.zlevel;
|
|
this.z = model.z;
|
|
this.style = model.style;
|
|
this.textStyle = model.text;
|
|
this.arcStyle = model.arc;
|
|
this.create();
|
|
}
|
|
|
|
create() {
|
|
this.control = new Arc({
|
|
_subType: this.arcStyle.subType,
|
|
zlevel: this.zlevel,
|
|
z: this.z,
|
|
shape: this.arcStyle.shape,
|
|
style: {
|
|
lineWidth: this.arcStyle.lineWidth,
|
|
fill: this.arcStyle.fill,
|
|
stroke: this.arcStyle.stroke
|
|
},
|
|
onmouseover: this.arcStyle.mouseover,
|
|
onmouseout: this.arcStyle.mouseout
|
|
});
|
|
this.text = new Text({
|
|
_subType: 'Text',
|
|
zlevel: this.zlevel,
|
|
z: this.z,
|
|
position: this.textStyle.position,
|
|
style: {
|
|
x: this.textStyle.x,
|
|
y: this.textStyle.y,
|
|
fontWeight: this.textStyle.fontWeight,
|
|
fontSize: this.textStyle.fontSize,
|
|
fontFamily: this.textStyle.fontFamily,
|
|
text: this.textStyle.text,
|
|
textFill: this.textStyle.textFill,
|
|
textAlign: this.textStyle.textAlign,
|
|
textVerticalAlign: this.textStyle.textVerticalAlign
|
|
},
|
|
onmouseover: this.textStyle.mouseover,
|
|
onmouseout: this.textStyle.mouseout
|
|
});
|
|
const arcRect = this.getArcBoundingRect();
|
|
const textRect = this.getTextBoundingRect();
|
|
this.arcBorder = new Rect({
|
|
zlevel: this.zlevel,
|
|
z: this.z,
|
|
silent: true,
|
|
shape: {
|
|
x: arcRect.x - 2,
|
|
y: arcRect.y - 2,
|
|
width: arcRect.width + 4,
|
|
height: arcRect.height + 4
|
|
},
|
|
style: {
|
|
lineDash: this.arcStyle.lineDash || this.style.arcBorderStyle.lineDash,
|
|
stroke: this.style.arcBorderStyle.stroke,
|
|
fill: this.style.arcBorderStyle.fill
|
|
}
|
|
});
|
|
this.textBorder = new Rect({
|
|
zlevel: this.zlevel,
|
|
z: this.z - 1,
|
|
silent: true,
|
|
shape: textRect,
|
|
style: {
|
|
lineDash: this.style.textBorderStyle.lineDash,
|
|
stroke: this.style.textBorderStyle.stroke,
|
|
fill: this.style.textBorderStyle.fill
|
|
}
|
|
});
|
|
this.add(this.control);
|
|
this.add(this.text);
|
|
this.add(this.textBorder);
|
|
this.add(this.arcBorder);
|
|
this.textBorder.hide();
|
|
this.arcBorder.hide();
|
|
}
|
|
setTextBorder(flag) {
|
|
flag ? this.textBorder.show() : this.textBorder.hide();
|
|
}
|
|
setArcBorder(flag) {
|
|
flag ? this.arcBorder.show() : this.arcBorder.hide();
|
|
}
|
|
getTextBoundingRect() {
|
|
return createBoundingRect(this.text);
|
|
}
|
|
getArcBoundingRect() {
|
|
return createBoundingRect(this.control);
|
|
}
|
|
setControlColor(color) {
|
|
if (color) {
|
|
this.control.setStyle('fill', color);
|
|
}
|
|
}
|
|
setControlStroke(color, lineWidth) {
|
|
this.control.setStyle('lineWidth', lineWidth);
|
|
this.control.setStyle('stroke', color);
|
|
}
|
|
setTextColor(color) {
|
|
if (color) {
|
|
this.text.setStyle('textFill', color);
|
|
}
|
|
}
|
|
getControl() { return this.control; }
|
|
}
|