129 lines
3.8 KiB
JavaScript
129 lines
3.8 KiB
JavaScript
import Group from 'zrender/src/container/Group';
|
|
import Rect from 'zrender/src/graphic/shape/Rect';
|
|
import store from '@/store';
|
|
class EMouse extends Group {
|
|
constructor(device) {
|
|
super();
|
|
this.device = device;
|
|
this.create();
|
|
this.craeteSwitchBorder();
|
|
}
|
|
create() {
|
|
if (this.device.name) {
|
|
// 创建锁闭框
|
|
const rect = this.device.name.getNameText().getBoundingRect();
|
|
let textWidth = rect.width * 0.8;
|
|
if (this.device.triangle.drictx !== 1) {
|
|
// rect.x += rect.width;
|
|
textWidth = -textWidth;
|
|
}
|
|
|
|
this.textRect = new Rect({
|
|
zlevel: this.device.zlevel,
|
|
z: this.device.z,
|
|
silent: true,
|
|
shape: {
|
|
x: rect.x,
|
|
y: rect.y,
|
|
width: textWidth,
|
|
height: rect.height
|
|
},
|
|
style: {
|
|
lineWidth: 1,
|
|
lineDash: [3, 3],
|
|
stroke: this.device.style.Switch.mouseOverStyle.borderColor,
|
|
fill: this.device.style.Switch.mouseOverStyle.borderBackgroundColor
|
|
}
|
|
});
|
|
this.add(this.textRect);
|
|
this.textRect.hide();
|
|
}
|
|
}
|
|
|
|
// 创建道岔边框
|
|
craeteSwitchBorder() {
|
|
const sectionA = this.getInstanceByCode(this.device.model.sectionACode);
|
|
const sectionB = this.getInstanceByCode(this.device.model.sectionBCode);
|
|
const sectionC = this.getInstanceByCode(this.device.model.sectionCCode);
|
|
const rect = this.device.getBoundingRect();
|
|
|
|
sectionA && rect.union(sectionA.getBoundingRect());
|
|
sectionB && rect.union(sectionB.getBoundingRect());
|
|
sectionC && rect.union(sectionC.getBoundingRect());
|
|
|
|
this.switchBorder = new Rect({
|
|
zlevel: this.device.model.zlevel,
|
|
z: this.device.z,
|
|
silent: true,
|
|
shape: Object.assign({ r: 4 }, rect),
|
|
style: {
|
|
lineDash: [3, 3],
|
|
stroke: this.device.style.Switch.mouseOverStyle.borderColor,
|
|
fill: this.device.style.transparentColor
|
|
}
|
|
});
|
|
|
|
this.add(this.switchBorder);
|
|
this.switchBorder.hide();
|
|
}
|
|
|
|
getInstanceByCode(code) {
|
|
return (store.getters['map/getDeviceByCode'](code) || {}).instance;
|
|
}
|
|
|
|
mouseout(e) {
|
|
if (!this.device.model.down) {
|
|
this.switchBorder && this.switchBorder.hide();
|
|
this.device.setTextStyle({
|
|
textFill: this.device.style.backgroundColor
|
|
});
|
|
this.textRect && this.textRect.hide();
|
|
this.device.setState(this.device.model);
|
|
|
|
const section = store.getters['map/getDeviceByCode'](this.device.model.sectionACode) || {};
|
|
const parentSection = store.getters['map/getDeviceByCode'](section.parentCode) || {};
|
|
const instance = this.getInstanceByCode(parentSection.trainWindowCode);
|
|
if (instance && instance.mouseEvent && instance.mouseEvent.mouseLeave) {
|
|
instance.mouseEvent.mouseLeave(e);
|
|
}
|
|
}
|
|
}
|
|
|
|
mouseover(e) {
|
|
this.switchBorder && this.switchBorder.show();
|
|
this.device.setLossAction(false);
|
|
this.device.setSwitchCoreColor(this.device.style.Switch.mouseOverStyle.borderBackgroundColor);
|
|
this.device.setTextStyle({
|
|
textFill: '#000'
|
|
});
|
|
this.textRect && this.textRect.show();
|
|
|
|
const section = store.getters['map/getDeviceByCode'](this.device.model.sectionACode) || {};
|
|
const parentSection = store.getters['map/getDeviceByCode'](section.parentCode) || {};
|
|
const instance = this.getInstanceByCode(parentSection.trainWindowCode);
|
|
if (instance && instance.mouseEvent && instance.mouseEvent.mouseEnter) {
|
|
instance.mouseEvent.mouseEnter(e);
|
|
}
|
|
}
|
|
|
|
mouseEnter(e) {
|
|
this.switchBorder && this.switchBorder.show();
|
|
this.device.setLossAction(false);
|
|
this.device.setSwitchCoreColor(this.device.style.Switch.mouseOverStyle.borderBackgroundColor);
|
|
this.device.setTextStyle({
|
|
textFill: '#000'
|
|
});
|
|
this.textRect && this.textRect.show();
|
|
}
|
|
|
|
mouseLeave(e) {
|
|
this.switchBorder && this.switchBorder.hide();
|
|
this.device.setTextStyle({
|
|
textFill: this.device.style.backgroundColor
|
|
});
|
|
this.textRect && this.textRect.hide();
|
|
this.device.setState(this.device.model);
|
|
}
|
|
}
|
|
export default EMouse;
|