153 lines
6.2 KiB
JavaScript
153 lines
6.2 KiB
JavaScript
import Group from 'zrender/src/container/Group';
|
|
import Text from 'zrender/src/graphic/Text';
|
|
import Rect from 'zrender/src/graphic/shape/Rect';
|
|
// import Vue from 'vue';
|
|
import store from '@/store';
|
|
class EMouse extends Group {
|
|
constructor(device, code) {
|
|
super();
|
|
this.device = device;
|
|
this.code = code;
|
|
this.create();
|
|
}
|
|
create() {
|
|
if (this.device.name) {
|
|
const rect = this.device.name.getBoundingRect();
|
|
if (!this.device.isSwitchSection) {
|
|
this.sectionTextBorder = new Rect({
|
|
zlevel: this.device.zlevel,
|
|
z: this.device.z + 4,
|
|
shape: rect,
|
|
style: {
|
|
lineDash: [3, 3],
|
|
stroke: '#fff', // 白色
|
|
fill: this.device.model.sectionType == '02' ? this.device.style.Section.line.logicalColor : '#00FFFF' // 蓝色
|
|
}
|
|
});
|
|
this.add(this.sectionTextBorder);
|
|
this.sectionTextBorder.hide();
|
|
}
|
|
|
|
const fontSize = this.device.model.type == '02' ? this.device.style.Section.text.fontSize + 2 : this.device.style.Section.text.fontSize;
|
|
this.TextName = new Text({
|
|
zlevel: this.device.zlevel,
|
|
z: this.device.z + 4,
|
|
style: {
|
|
x: rect.x + (rect.width / 2),
|
|
y: rect.y + (rect.height / 2),
|
|
fontWeight: 'normal',
|
|
fontSize: fontSize,
|
|
fontFamily: this.device.style.fontFamily,
|
|
text: this.device.model.name,
|
|
textFill: '#000',
|
|
textAlign: this.device.style.Section.text.textAlign,
|
|
textPosition: this.device.style.Section.text.textPosition || 'inside',
|
|
textVerticalAlign: this.device.style.Section.text.textVerticalAlign || null
|
|
}
|
|
});
|
|
this.add(this.TextName);
|
|
this.TextName.hide();
|
|
|
|
this.sectionTextShadow = new Text({
|
|
zlevel: this.zlevel + 3,
|
|
z: 5,
|
|
position: [4, -2],
|
|
silent: true,
|
|
style: {
|
|
x: rect.x + (rect.width / 2),
|
|
y: rect.y + (rect.height / 2),
|
|
text: this.device.model.name,
|
|
textFill: this.device.style.Section.mouseOverStyle.textShadowColor, // 黄色
|
|
textAlign: 'middle',
|
|
textVerticalAlign: 'top',
|
|
textFont: 'bold ' + (fontSize + 1) + 'px ' + this.device.style.fontFamily
|
|
}
|
|
});
|
|
this.add(this.sectionTextShadow);
|
|
this.sectionTextShadow.hide();
|
|
}
|
|
if (this.device.section) {
|
|
const rect = this.device.section.getBoundingRect();
|
|
this.lineBorder = new Rect({
|
|
zlevel: this.device.zlevel,
|
|
z: this.device.z - 1,
|
|
shape: rect,
|
|
style: {
|
|
lineDash: [3, 3],
|
|
stroke: this.device.style.Section.mouseOverStyle.borderColor,
|
|
fill: this.device.style.transparentColor
|
|
}
|
|
});
|
|
|
|
this.add(this.lineBorder);
|
|
this.lineBorder.hide();
|
|
}
|
|
}
|
|
|
|
getInstanceByCode(code) {
|
|
return (store.getters['map/getDeviceByCode'](code) || {}).instance;
|
|
}
|
|
|
|
mouseover(e) {
|
|
if (this.device.model.isSwitchSection && this.device.model.relSwitchCode) {
|
|
const instance = this.getInstanceByCode(this.device.model.relSwitchCode);
|
|
if (instance && instance.mouseEvent && instance.mouseEvent.mouseover) {
|
|
instance.mouseEvent.mouseover(e);
|
|
}
|
|
} else {
|
|
this.TextName && this.TextName.show();
|
|
this.sectionTextBorder && this.sectionTextBorder.show();
|
|
this.lineBorder && this.lineBorder.show();
|
|
const instance = this.getInstanceByCode(this.device.model.trainWindowCode);
|
|
if (instance && instance.mouseEvent && instance.mouseEvent.mouseEnter) {
|
|
instance.mouseEvent.mouseEnter(e);
|
|
}
|
|
}
|
|
}
|
|
|
|
mouseout(e) {
|
|
if (!this.device.model.down) {
|
|
this.sectionTextShadow && this.sectionTextShadow.hide();
|
|
if (this.device.model.isSwitchSection && this.device.model.relSwitchCode) {
|
|
const instance = this.getInstanceByCode(this.device.model.relSwitchCode);
|
|
if (instance && instance.mouseEvent && instance.mouseEvent.mouseout) {
|
|
instance.mouseEvent.mouseout(e);
|
|
}
|
|
} else {
|
|
this.TextName && this.TextName.hide();
|
|
this.sectionTextBorder && this.sectionTextBorder.hide();
|
|
this.lineBorder && this.lineBorder.hide();
|
|
const instance = this.getInstanceByCode(this.device.model.trainWindowCode);
|
|
if (instance && instance.mouseEvent && instance.mouseEvent.mouseLeave) {
|
|
instance.mouseEvent.mouseLeave(e);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
mouseEnter(e) {
|
|
this.TextName && this.TextName.show();
|
|
this.sectionTextBorder && this.sectionTextBorder.show();
|
|
this.lineBorder && this.lineBorder.show();
|
|
if (this.device.model.isSwitchSection && this.device.model.relSwitchCode) {
|
|
const instance = this.getInstanceByCode(this.device.model.relSwitchCode);
|
|
if (instance && instance.mouseEvent && instance.mouseEvent.mouseEnter) {
|
|
instance.mouseEvent.mouseEnter(e);
|
|
}
|
|
}
|
|
}
|
|
|
|
mouseLeave(e) {
|
|
this.TextName && this.TextName.hide();
|
|
this.sectionTextBorder && this.sectionTextBorder.hide();
|
|
this.lineBorder && this.lineBorder.hide();
|
|
if (this.device.model.isSwitchSection && this.device.model.relSwitchCode) {
|
|
const instance = this.getInstanceByCode(this.device.model.relSwitchCode);
|
|
if (instance && instance.mouseEvent && instance.mouseEvent.mouseLeave) {
|
|
instance.mouseEvent.mouseLeave(e);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
export default EMouse;
|