joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

调整iscs 鼠标事件流程

Browse Source
This commit is contained in:
zyy 2020-06-09 13:24:18 +08:00
parent c86bb0bff3
commit 8c52fcc8ef
14 changed files with 694 additions and 610 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

244
src/ibp/shape/appendageBox.js
View File

@ -3,127 +3,127 @@ import Sector from 'zrender/src/graphic/shape/Sector';
import Rect from 'zrender/src/graphic/shape/Rect'; import Rect from 'zrender/src/graphic/shape/Rect';
export default class AppendageBox extends Group { export default class AppendageBox extends Group {
constructor(device) { constructor(device) {
super(); super();
this.model = device.model; this.model = device.model;
this._type = device.model._type; this._type = device.model._type;
this._code = device.model.code; this._code = device.model.code;
this.zlevel = device.model.zlevel; this.zlevel = device.model.zlevel;
this.z = device.model.z; this.z = device.model.z;
this.create(); this.create();
} }
create() { create() {
this.grouper=new Group({ this.grouper = new Group({
id: this.model.code, id: this.model.code,
position: [this.model.point.x, this.model.point.y] position: [this.model.point.x, this.model.point.y]
}); });
const spaceHeight = (this.model.height-this.model.borderWidth*3)/2; const spaceHeight = (this.model.height - this.model.borderWidth * 3) / 2;
this.rect1 = new Rect({ this.rect1 = new Rect({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
shape: { shape: {
x: 0, x: 0,
y: 0, y: 0,
width: this.model.width - this.model.borderWidth, width: this.model.width - this.model.borderWidth,
height: this.model.borderWidth height: this.model.borderWidth
}, },
style: { style: {
fill: '#34383A' fill: '#34383A'
} }
}); });
this.rect2 = new Rect({ this.rect2 = new Rect({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
shape: { shape: {
x: 0, x: 0,
y: this.model.borderWidth + spaceHeight, y: this.model.borderWidth + spaceHeight,
width: this.model.width - this.model.borderWidth, width: this.model.width - this.model.borderWidth,
height: this.model.borderWidth height: this.model.borderWidth
}, },
style: { style: {
fill: '#34383A' fill: '#34383A'
} }
}); });
this.rect3 = new Rect({ this.rect3 = new Rect({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
shape: { shape: {
x: 0, x: 0,
y: 2*this.model.borderWidth + 2*spaceHeight, y: 2 * this.model.borderWidth + 2 * spaceHeight,
width: this.model.width - this.model.borderWidth, width: this.model.width - this.model.borderWidth,
height: this.model.borderWidth height: this.model.borderWidth
}, },
style: { style: {
fill: '#34383A' fill: '#34383A'
} }
}); });
this.rect4 = new Rect({ this.rect4 = new Rect({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
shape: { shape: {
x: 0, x: 0,
y: 0, y: 0,
width: this.model.borderWidth, width: this.model.borderWidth,
height: this.model.height height: this.model.height
}, },
style: { style: {
fill: '#34383A' fill: '#34383A'
} }
}); });
this.sector1 = new Sector({ this.sector1 = new Sector({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
shape: { shape: {
cx: this.model.width - this.model.borderWidth, cx: this.model.width - this.model.borderWidth,
cy: this.model.borderWidth, cy: this.model.borderWidth,
r: this.model.borderWidth, r: this.model.borderWidth,
startAngle: 1.5*Math.PI, startAngle: 1.5 * Math.PI,
endAngle: 2*Math.PI endAngle: 2 * Math.PI
}, },
style: { style: {
fill: '#34383A' fill: '#34383A'
} }
}); });
this.sector2 = new Sector({ this.sector2 = new Sector({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
shape: { shape: {
cx: this.model.width - this.model.borderWidth, cx: this.model.width - this.model.borderWidth,
cy: 2*this.model.borderWidth + spaceHeight, cy: 2 * this.model.borderWidth + spaceHeight,
r: this.model.borderWidth, r: this.model.borderWidth,
startAngle: 1.5*Math.PI, startAngle: 1.5 * Math.PI,
endAngle: 2*Math.PI endAngle: 2 * Math.PI
}, },
style: { style: {
fill: '#34383A' fill: '#34383A'
} }
}); });
this.sector3 = new Sector({ this.sector3 = new Sector({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
shape: { shape: {
cx: this.model.width - this.model.borderWidth, cx: this.model.width - this.model.borderWidth,
cy: 3*this.model.borderWidth + 2*spaceHeight, cy: 3 * this.model.borderWidth + 2 * spaceHeight,
r: this.model.borderWidth, r: this.model.borderWidth,
startAngle: 1.5*Math.PI, startAngle: 1.5 * Math.PI,
endAngle: 2*Math.PI endAngle: 2 * Math.PI
}, },
style: { style: {
fill: '#34383A' fill: '#34383A'
} }
}); });
this.grouper.add(this.rect1); this.grouper.add(this.rect1);
this.grouper.add(this.rect2); this.grouper.add(this.rect2);
this.grouper.add(this.rect3); this.grouper.add(this.rect3);
this.grouper.add(this.rect4); this.grouper.add(this.rect4);
this.grouper.add(this.sector1); this.grouper.add(this.sector1);
this.grouper.add(this.sector2); this.grouper.add(this.sector2);
this.grouper.add(this.sector3); this.grouper.add(this.sector3);
this.add(this.grouper); this.add(this.grouper);
} }
setModel(dx, dy) { setModel(dx, dy) {
this.model.point.x+=dx; this.model.point.x += dx;
this.model.point.y+=dy; this.model.point.y += dy;
} }
} }

150
src/ibp/shape/button.js
View File

@ -13,106 +13,106 @@ import grayButtonPicOn from '@/assets/ibp_images/gray_button_on.png';
export default class button extends Group { export default class button extends Group {
static colors = new Map([ static colors = new Map([
['red_on', [redButtonPicOn]], ['red_on', [redButtonPicOn]],
['red_off', [redButtonPic]], ['red_off', [redButtonPic]],
['green_on', [greenButtonPicOn]], ['green_on', [greenButtonPicOn]],
['green_off', [greenButtonPic]], ['green_off', [greenButtonPic]],
['blue_on', [blueButtonPicOn]], ['blue_on', [blueButtonPicOn]],
['blue_off', [blueButtonPic]], ['blue_off', [blueButtonPic]],
['yellow_on', [yellowButtonPicOn]], ['yellow_on', [yellowButtonPicOn]],
['yellow_off', [yellowButtonPic]], ['yellow_off', [yellowButtonPic]],
['gray_on', [grayButtonPicOn]], ['gray_on', [grayButtonPicOn]],
['gray_off', [grayButtonPic]] ['gray_off', [grayButtonPic]]
]); ]);
constructor(device) { constructor(device) {
super(); super();
this._type = device.model._type; this._type = device.model._type;
this._code = device.model.code; this._code = device.model.code;
this.model = device.model; this.model = device.model;
this.zlevel = device.model.zlevel; this.zlevel = device.model.zlevel;
this.z = device.model.z; this.z = device.model.z;
this.create(); this.create();
} }
create() { create() {
this.grouper=new Group({ this.grouper = new Group({
id: this.model.code, id: this.model.code,
position: [this.model.point.x, this.model.point.y] position: [this.model.point.x, this.model.point.y]
}); });
this.imageBg = new Image({ this.imageBg = new Image({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
draggable: false, draggable: false,
style: { style: {
image: this.getImagePic(), image: this.getImagePic(),
x: 0, x: 0,
y: 0, y: 0,
width: 70, width: 70,
height: 80 height: 80
} }
}); });
this.grouper.add(this.imageBg); this.grouper.add(this.imageBg);
this.add(this.grouper); this.add(this.grouper);
this.transformScale(); this.transformScale();
} }
/** 缩放按钮 */ /** 缩放按钮 */
transformScale() { transformScale() {
this.imageBg.origin = [0, 0]; this.imageBg.origin = [0, 0];
this.imageBg.scale =[this.model.width/70, this.model.width/70]; this.imageBg.scale = [this.model.width / 70, this.model.width / 70];
this.imageBg.dirty(); this.imageBg.dirty();
} }
getImagePic() { getImagePic() {
const color = button.colors.get(`${this.model.color}_${this.model.status}`); const color = button.colors.get(`${this.model.color}_${this.model.status}`);
return color[0]; return color[0];
} }
// 设置按钮状态 // 设置按钮状态
setState(model) { setState(model) {
switch (model.status) { switch (model.status) {
case 'on': { case 'on': {
// 开放 // 开放
this.open(); this.open();
this.model.status='on'; this.model.status = 'on';
break; break;
} }
case 'off': { case 'off': {
// 关闭 // 关闭
this.close(); this.close();
this.model.status='off'; this.model.status = 'off';
break; break;
} }
} }
} }
onclick() { onclick() {
// if (!this.model.draggable) { // if (!this.model.draggable) {
// switch (this.model.status) { // switch (this.model.status) {
// case 'off': { // case 'off': {
// this.open(); // this.open();
// this.model.status='on'; // this.model.status='on';
// break; // break;
// } // }
// case 'on': { // case 'on': {
// this.close(); // this.close();
// this.model.status='off'; // this.model.status='off';
// break; // break;
// } // }
// } // }
// } // }
} }
// 关闭 // 关闭
close() { close() {
const color = button.colors.get(`${this.model.color}_off`); const color = button.colors.get(`${this.model.color}_off`);
this.imageBg.setStyle({image: color[0]}); this.imageBg.setStyle({image: color[0]});
} }
// 开放 // 开放
open() { open() {
const color = button.colors.get(`${this.model.color}_on`); const color = button.colors.get(`${this.model.color}_on`);
this.imageBg.setStyle({image: color[0]}); this.imageBg.setStyle({image: color[0]});
} }
setModel(dx, dy) { setModel(dx, dy) {
this.model.point.x+=dx; this.model.point.x += dx;
this.model.point.y+=dy; this.model.point.y += dy;
} }
} }

486
src/ibp/shape/clock.js
View File

@ -14,248 +14,248 @@ import clockBg from '@/assets/ibp_images/clock/clock_bg.png';
import clockColon from '@/assets/ibp_images/clock/clock_colon.png'; import clockColon from '@/assets/ibp_images/clock/clock_colon.png';
export default class clock extends Group { export default class clock extends Group {
constructor(device) { constructor(device) {
super(); super();
this._type = device.model._type; this._type = device.model._type;
this._code = device.model.code; this._code = device.model.code;
this.model = device.model; this.model = device.model;
this.zlevel = device.model.zlevel; this.zlevel = device.model.zlevel;
this.z = device.model.z; this.z = device.model.z;
this.initTime = 0; this.initTime = 0;
this.create(); this.create();
} }
create() { create() {
this.grouper=new Group({ this.grouper = new Group({
id: this.model.code, id: this.model.code,
position: [this.model.point.x, this.model.point.y] position: [this.model.point.x, this.model.point.y]
}); });
this.clockBg = new Image({ this.clockBg = new Image({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
style: { style: {
image: clockBg, image: clockBg,
x: 0, x: 0,
y: 0, y: 0,
width: this.model.width, width: this.model.width,
height: this.model.width/493*156 height: this.model.width / 493 * 156
} }
}); });
this.num1 = new Image({ this.num1 = new Image({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
style: { style: {
image: this.getImagePic('0'), image: this.getImagePic('0'),
x: this.model.width*0.098, x: this.model.width * 0.098,
y: this.model.width*0.062, y: this.model.width * 0.062,
width: this.model.width*0.095, width: this.model.width * 0.095,
height: this.model.width*0.095/37*74 height: this.model.width * 0.095 / 37 * 74
} }
}); });
this.num2 = new Image({ this.num2 = new Image({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
style: { style: {
image: this.getImagePic('0'), image: this.getImagePic('0'),
x: this.model.width*0.22, x: this.model.width * 0.22,
y: this.model.width*0.062, y: this.model.width * 0.062,
width: this.model.width*0.095, width: this.model.width * 0.095,
height: this.model.width*0.095/37*74 height: this.model.width * 0.095 / 37 * 74
} }
}); });
this.num3 = new Image({ this.num3 = new Image({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
style: { style: {
image: this.getImagePic('0'), image: this.getImagePic('0'),
x: this.model.width*0.395, x: this.model.width * 0.395,
y: this.model.width*0.062, y: this.model.width * 0.062,
width: this.model.width*0.095, width: this.model.width * 0.095,
height: this.model.width*0.095/37*74 height: this.model.width * 0.095 / 37 * 74
} }
}); });
this.num4 = new Image({ this.num4 = new Image({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
style: { style: {
image: this.getImagePic('0'), image: this.getImagePic('0'),
x: this.model.width*0.52, x: this.model.width * 0.52,
y: this.model.width*0.062, y: this.model.width * 0.062,
width: this.model.width*0.095, width: this.model.width * 0.095,
height: this.model.width*0.095/37*74 height: this.model.width * 0.095 / 37 * 74
} }
}); });
this.num5 = new Image({ this.num5 = new Image({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
style: { style: {
image: this.getImagePic('0'), image: this.getImagePic('0'),
x: this.model.width*0.69, x: this.model.width * 0.69,
y: this.model.width*0.062, y: this.model.width * 0.062,
width: this.model.width*0.095, width: this.model.width * 0.095,
height: this.model.width*0.095/37*74 height: this.model.width * 0.095 / 37 * 74
} }
}); });
this.num6 = new Image({ this.num6 = new Image({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
style: { style: {
image: this.getImagePic('0'), image: this.getImagePic('0'),
x: this.model.width*0.816, x: this.model.width * 0.816,
y: this.model.width*0.062, y: this.model.width * 0.062,
width: this.model.width*0.095, width: this.model.width * 0.095,
height: this.model.width*0.095/37*74 height: this.model.width * 0.095 / 37 * 74
} }
}); });
this.clockColon1 = new Image({ this.clockColon1 = new Image({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
style: { style: {
image: clockColon, image: clockColon,
x: +this.model.width*0.183, x: +this.model.width * 0.183,
y: -this.model.width*0.017, y: -this.model.width * 0.017,
width: this.model.width*0.34, width: this.model.width * 0.34,
height: this.model.width/1*0.34 height: this.model.width / 1 * 0.34
} }
}); });
this.clockColon2 = new Image({ this.clockColon2 = new Image({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
style: { style: {
image: clockColon, image: clockColon,
x: +this.model.width*0.48, x: +this.model.width * 0.48,
y: -this.model.width*0.017, y: -this.model.width * 0.017,
width: this.model.width*0.34, width: this.model.width * 0.34,
height: this.model.width/1*0.34 height: this.model.width / 1 * 0.34
} }
}); });
this.grouper.add(this.clockBg); this.grouper.add(this.clockBg);
this.grouper.add(this.num1); this.grouper.add(this.num1);
this.grouper.add(this.num2); this.grouper.add(this.num2);
this.grouper.add(this.num3); this.grouper.add(this.num3);
this.grouper.add(this.num4); this.grouper.add(this.num4);
this.grouper.add(this.num5); this.grouper.add(this.num5);
this.grouper.add(this.num6); this.grouper.add(this.num6);
this.grouper.add(this.clockColon1); this.grouper.add(this.clockColon1);
this.grouper.add(this.clockColon2); this.grouper.add(this.clockColon2);
this.add(this.grouper); this.add(this.grouper);
} }
getImagePic(context) { getImagePic(context) {
let pic = clock0; let pic = clock0;
switch (context) { switch (context) {
case '0': case '0':
pic = clock0; pic = clock0;
break; break;
case '1': case '1':
pic = clock1; pic = clock1;
break; break;
case '2': case '2':
pic = clock2; pic = clock2;
break; break;
case '3': case '3':
pic = clock3; pic = clock3;
break; break;
case '4': case '4':
pic = clock4; pic = clock4;
break; break;
case '5': case '5':
pic = clock5; pic = clock5;
break; break;
case '6': case '6':
pic = clock6; pic = clock6;
break; break;
case '7': case '7':
pic = clock7; pic = clock7;
break; break;
case '8': case '8':
pic = clock8; pic = clock8;
break; break;
case '9': case '9':
pic = clock9; pic = clock9;
break; break;
} }
return pic; return pic;
} }
setClockStart(started) { setClockStart(started) {
const _this = this; const _this = this;
if (started) { if (started) {
this.timer&&clearInterval(this.timer); this.timer && clearInterval(this.timer);
this.timer = setInterval(() => { this.timer = setInterval(() => {
_this.handleClock(_this); _this.handleClock(_this);
}, 1000); }, 1000);
} else { } else {
this.timer&&clearInterval(this.timer); this.timer && clearInterval(this.timer);
} }
} }
handleClock(_this) { handleClock(_this) {
_this.initTime += 1000; _this.initTime += 1000;
const newDate = new Date(); const newDate = new Date();
newDate.setTime(_this.initTime); newDate.setTime(_this.initTime);
let seconds = newDate.getSeconds() +''; let seconds = newDate.getSeconds() + '';
let minutes = newDate.getMinutes() + ''; let minutes = newDate.getMinutes() + '';
let hours = newDate.getHours() + ''; let hours = newDate.getHours() + '';
if (seconds.length<2) { if (seconds.length < 2) {
seconds = '0' + seconds; seconds = '0' + seconds;
} }
if (minutes.length<2) { if (minutes.length < 2) {
minutes = '0' + minutes; minutes = '0' + minutes;
} }
if (hours.length<2) { if (hours.length < 2) {
hours = '0'+ hours; hours = '0' + hours;
} }
_this.setNumPic(6, seconds.charAt(1)); _this.setNumPic(6, seconds.charAt(1));
_this.setNumPic(5, seconds.charAt(0)); _this.setNumPic(5, seconds.charAt(0));
_this.setNumPic(4, minutes.charAt(1)); _this.setNumPic(4, minutes.charAt(1));
_this.setNumPic(3, minutes.charAt(0)); _this.setNumPic(3, minutes.charAt(0));
_this.setNumPic(2, hours.charAt(1)); _this.setNumPic(2, hours.charAt(1));
_this.setNumPic(1, hours.charAt(0)); _this.setNumPic(1, hours.charAt(0));
} }
setNumPic(num, context) { setNumPic(num, context) {
switch (num) { switch (num) {
case 1: case 1:
this.num1.setStyle('image', this.getImagePic(context)); this.num1.setStyle('image', this.getImagePic(context));
break; break;
case 2: case 2:
this.num2.setStyle('image', this.getImagePic(context)); this.num2.setStyle('image', this.getImagePic(context));
break; break;
case 3: case 3:
this.num3.setStyle('image', this.getImagePic(context)); this.num3.setStyle('image', this.getImagePic(context));
break; break;
case 4: case 4:
this.num4.setStyle('image', this.getImagePic(context)); this.num4.setStyle('image', this.getImagePic(context));
break; break;
case 5: case 5:
this.num5.setStyle('image', this.getImagePic(context)); this.num5.setStyle('image', this.getImagePic(context));
break; break;
case 6: case 6:
this.num6.setStyle('image', this.getImagePic(context)); this.num6.setStyle('image', this.getImagePic(context));
} }
} }
setClockTime(initTime) { setClockTime(initTime) {
this.initTime = initTime; this.initTime = initTime;
const newDate = new Date(); const newDate = new Date();
newDate.setTime(initTime); newDate.setTime(initTime);
let seconds = newDate.getSeconds() +''; let seconds = newDate.getSeconds() + '';
let minutes = newDate.getMinutes() + ''; let minutes = newDate.getMinutes() + '';
let hours = newDate.getHours() + ''; let hours = newDate.getHours() + '';
if (seconds.length<2) { if (seconds.length < 2) {
seconds = '0' + seconds; seconds = '0' + seconds;
} }
if (minutes.length<2) { if (minutes.length < 2) {
minutes = '0' + minutes; minutes = '0' + minutes;
} }
if (hours.length<2) { if (hours.length < 2) {
hours = '0'+ hours; hours = '0' + hours;
} }
this.setNumPic(6, seconds.charAt(1)); this.setNumPic(6, seconds.charAt(1));
this.setNumPic(5, seconds.charAt(0)); this.setNumPic(5, seconds.charAt(0));
this.setNumPic(4, minutes.charAt(1)); this.setNumPic(4, minutes.charAt(1));
this.setNumPic(3, minutes.charAt(0)); this.setNumPic(3, minutes.charAt(0));
this.setNumPic(2, hours.charAt(1)); this.setNumPic(2, hours.charAt(1));
this.setNumPic(1, hours.charAt(0)); this.setNumPic(1, hours.charAt(0));
} }
setModel(dx, dy) { setModel(dx, dy) {
this.model.point.x+=dx; this.model.point.x += dx;
this.model.point.y+=dy; this.model.point.y += dy;
} }
} }

120
src/ibp/shape/ibpText.js
View File

@ -1,66 +1,66 @@
import Group from 'zrender/src/container/Group'; import Group from 'zrender/src/container/Group';
import Text from 'zrender/src/graphic/Text'; import Text from 'zrender/src/graphic/Text';
import Rect from 'zrender/src/graphic/shape/Rect'; // import Rect from 'zrender/src/graphic/shape/Rect';
export default class ibpText extends Group { export default class ibpText extends Group {
constructor(device) { constructor(device) {
super(); super();
this.model = device.model; this.model = device.model;
this._type = device.model._type; this._type = device.model._type;
this._code = device.model.code; this._code = device.model.code;
this.zlevel = device.model.zlevel; this.zlevel = device.model.zlevel;
this.z = device.model.z; this.z = device.model.z;
this.create(); this.create();
} }
create() { create() {
const model = this.model; const model = this.model;
this.grouper=new Group({ this.grouper = new Group({
id: this.model.code, id: this.model.code,
position: [this.model.point.x, this.model.point.y] position: [this.model.point.x, this.model.point.y]
}); });
this.textName = new Text({ this.textName = new Text({
zlevel: model.zlevel, zlevel: model.zlevel,
z: model.z, z: model.z,
silent: model.silent || false, silent: model.silent || false,
draggable: false, draggable: false,
style: { style: {
x: 0, x: 0,
y: 0, y: 0,
fontWeight: model.fontWeight, fontWeight: model.fontWeight,
fontSize: model.fontSize, fontSize: model.fontSize,
fontFamily: model.fontFamily, fontFamily: model.fontFamily,
text: model.context, text: model.context,
textStrokeWidth: model.textStrokeWidth, textStrokeWidth: model.textStrokeWidth,
textFill: model.textFill, textFill: model.textFill,
textAlign: model.textAlign, textAlign: model.textAlign,
textPosition: model.textPosition || 'inside', textPosition: model.textPosition || 'inside',
textVerticalAlign: model.textVerticalAlign || null, textVerticalAlign: model.textVerticalAlign || null,
textLineHeight: model.fontSize textLineHeight: model.fontSize
} }
}); });
// if ( model.hasRect) { // if ( model.hasRect) {
// this.grouper.add(this.tip); // this.grouper.add(this.tip);
// this.tip = new Rect({ // this.tip = new Rect({
// zlevel: model.zlevel, // zlevel: model.zlevel,
// z: model.z-1, // z: model.z-1,
// draggable: false, // draggable: false,
// shape: { // shape: {
// x: model.textRect.x- model.point.x, // x: model.textRect.x- model.point.x,
// y: model.textRect.x - model.point.y, // y: model.textRect.x - model.point.y,
// width: model.textRect.width, // width: model.textRect.width,
// height: model.textRect.height // height: model.textRect.height
// }, // },
// style: { // style: {
// fill: model.textBackgroundColor // fill: model.textBackgroundColor
// } // }
// }); // });
// } // }
this.grouper.add(this.textName); this.grouper.add(this.textName);
this.add(this.grouper); this.add(this.grouper);
} }
setModel(dx, dy) { setModel(dx, dy) {
this.model.point.x+=dx; this.model.point.x += dx;
this.model.point.y+=dy; this.model.point.y += dy;
} }
} }

8
src/iscs/constant/iscsData.js
View File

File diff suppressed because one or more lines are too long

11
src/iscs/iscs.js
View File

@ -224,6 +224,17 @@ class Iscs {
return this.iscsDevice[code]; return this.iscsDevice[code];
} }
copySelect(list) {
this.copyList = list.map(item => {
if (item._type != 'CheckBox') {
return item.model;
}
});
}
getCopyList() {
return this.copyList;
}
resize(opt) { resize(opt) {
this.$iscsZr.resize(opt); this.$iscsZr.resize(opt);
this.$painter.updateZrSize(opt); this.$painter.updateZrSize(opt);

5
src/iscs/keyboardController.js
View File

@ -7,7 +7,6 @@ class KeyboardController extends Eventful {
this.$iscs = iscs; this.$iscs = iscs;
this.$zr = iscs.getZr(); this.$zr = iscs.getZr();
this.events = iscs.getEvents(); this.events = iscs.getEvents();
this.initData();
this.initHandler(this.$zr); this.initHandler(this.$zr);
} }
@ -32,10 +31,6 @@ class KeyboardController extends Eventful {
} }
} }
initData() {
}
keydown(e) { keydown(e) {
if (this._keyOnDownUp && !e.repeat) { if (this._keyOnDownUp && !e.repeat) {
const currentEvent = keyboardEvents[e.key.toUpperCase()]; const currentEvent = keyboardEvents[e.key.toUpperCase()];

118
src/iscs/mouseController.js
View File

@ -97,8 +97,6 @@ class MouseController extends Eventful {
this.handleMouseDownRight(e); this.handleMouseDownRight(e);
} else if (e.which === 1) { } else if (e.which === 1) {
this.handleMouseDownLeft(e); this.handleMouseDownLeft(e);
} else if (e.which === 2) {
this.handleMouseDownWheel(e);
} }
} }
@ -119,27 +117,11 @@ class MouseController extends Eventful {
} }
mouseup(e) { mouseup(e) {
if (eventTool.notLeftMouse(e) || !this.eventTarget ) { if (e.which === 3) {
return; this.handleMouseUpRight(e);
} else if (e.which === 1) {
this.handleMouseUpLeft(e);
} }
if (this.deviceList.length) {
this.deviceList.forEach(item => {
item.setModel(e.offsetX - this._offsetX, e.offsetY - this._offsetY);
});
this.deviceList = [];
this.$iscs.deleteCheckBox('check_box');
this.eventTarget = '';
this._dragging = false;
this.deviceList = [];
return;
}
if (this.isAllowDragging) {
this.eventTarget.setModel(e.offsetX - this._offsetX, e.offsetY - this._offsetY);
this.eventTarget.dirty();
}
this.eventTarget = '';
this._dragging = false;
this.deviceList = [];
} }
contextmenu(e) { contextmenu(e) {
@ -195,24 +177,31 @@ class MouseController extends Eventful {
} }
/** 处理鼠标右键按下事件 */ /** 处理鼠标右键按下事件 */
handleMouseDownRight(e) { handleMouseDownRight(e) {
this.deviceList = [];
this.eventTarget = '';
this.$iscs.deleteCheckBox('check_box'); // 清空上次操作
this.$iscs.copySelect(this.deviceList);
this.rightClickPoint.x = e.offsetX; this.rightClickPoint.x = e.offsetX;
this.rightClickPoint.y = e.offsetY; this.rightClickPoint.y = e.offsetY;
} }
/** 处理鼠标左键按下事件 */ /** 处理鼠标左键按下事件 */
handleMouseDownLeft(e) { handleMouseDownLeft(e) {
if (this.eventTarget && this.eventTarget._type === deviceType.CheckBox) { if (this.$iscs.iscsDevice['check_box']) { // 判断点击点是否在 checkBox 范围
this.handleBoundingRect(this.eventTarget); const boundingRect = this.$iscs.iscsDevice['check_box'].instance.getBoundingRect().clone();
const x1 = e.event.zrX + this.$iscs.$options.offsetX;
const y1 = e.event.zrY + this.$iscs.$options.offsetY;
if (!this.contain(boundingRect, x1, y1)) {
this._dragging = false;
this.deviceList = [];
this.eventTarget = '';
this.$iscs.deleteCheckBox('check_box'); // 清空上次操作
this.$iscs.copySelect(this.deviceList);
}
} else { } else {
this.$iscs.deleteCheckBox('check_box'); this.$iscs.deleteCheckBox('check_box');
} }
} }
/** 处理滚轮按下事件 */
handleMouseDownWheel(e) {
this.deviceList = [];
Object.values(this.$iscs.iscsDevice).forEach(item => {
this.deviceList.push(item.instance);
});
}
/** 处理右键拖动事件--- 改变选中区域大小 */ /** 处理右键拖动事件--- 改变选中区域大小 */
handleMouseMoveRight(point2) { handleMouseMoveRight(point2) {
const point1 = this.rightClickPoint; const point1 = this.rightClickPoint;
@ -244,35 +233,80 @@ class MouseController extends Eventful {
this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y }); this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
} }
} }
// 右键抬起事件
handleMouseUpRight() {
if (this.$iscs.iscsDevice['check_box']) {
this.handleBoundingRect(this.$iscs.iscsDevice['check_box'].instance);
}
}
// 左键抬起事件
handleMouseUpLeft(e) {
if (this.deviceList.length) {
this.deviceList.forEach(item => {
item.setModel(e.offsetX - this._offsetX, e.offsetY - this._offsetY);
});
return;
}
if (this.isAllowDragging && this.eventTarget) {
this.eventTarget.setModel(e.offsetX - this._offsetX, e.offsetY - this._offsetY);
this.eventTarget.dirty();
}
}
/** 通过包围盒筛选选中区域的元素 */ /** 通过包围盒筛选选中区域的元素 */
handleBoundingRect(eventTarget) { handleBoundingRect(eventTarget) {
this.deviceList = []; this.deviceList = [];
let boundingRect = eventTarget.grouper.getBoundingRect(); let boundingRect = eventTarget.grouper.getBoundingRect().clone();
boundingRect = this.createFakeBoundingRect(eventTarget, boundingRect); boundingRect = this.createFakeBoundingRect(eventTarget, boundingRect);
const deviceList = Object.values(this.$iscs.iscsDevice); const deviceList = Object.values(this.$iscs.iscsDevice);
const includeDeviceList = []; deviceList.forEach(item =>{
deviceList.forEach( item =>{ let deviceBoundingRect = item.instance.grouper.getBoundingRect().clone();
let deviceBoundingRect = item.instance.grouper.getBoundingRect();
deviceBoundingRect = this.createFakeBoundingRect(item.instance, deviceBoundingRect); deviceBoundingRect = this.createFakeBoundingRect(item.instance, deviceBoundingRect);
if (this.whetherInclude(boundingRect, deviceBoundingRect )) { if (this.whetherInclude(boundingRect, deviceBoundingRect)) {
includeDeviceList.push(item.instance); this.deviceList.push(item.instance);
} }
}); });
this.deviceList = includeDeviceList; this.$iscs.copySelect(this.deviceList);
} }
/** 创建假包围盒对象 */ /** 创建假包围盒对象 */
createFakeBoundingRect(instance, boundingRect) { createFakeBoundingRect(instance, boundingRect) {
const x1 = instance.model.point.x;
const y1 = instance.model.point.y;
return { return {
x1: instance.model.point.x + boundingRect.x, // x: x1 + boundingRect.x,
y1: instance.model.point.y + boundingRect.y, // y: y1 + boundingRect.y,
x2: instance.model.point.x + boundingRect.width, // width: boundingRect.width,
y2: instance.model.point.y + boundingRect.height // height: boundingRect.height
x1: x1 + boundingRect.x,
y1: y1 + boundingRect.y,
x2: x1 + boundingRect.width,
y2: y1 + boundingRect.height
}; };
} }
/** 判断元素包围盒是否在选中区域 */ /** 判断元素包围盒是否在选中区域 */
whetherInclude(boundingRect1, boundingRect2) { whetherInclude(boundingRect1, boundingRect2) {
return boundingRect1.x1 <= boundingRect2.x1 && boundingRect1.y1 <= boundingRect2.y1 && boundingRect1.x2 >= boundingRect2.x2 && boundingRect1.y2 >= boundingRect2.y2; return boundingRect1.x1 <= boundingRect2.x1 && boundingRect1.y1 <= boundingRect2.y1 && boundingRect1.x2 >= boundingRect2.x2 && boundingRect1.y2 >= boundingRect2.y2;
} }
// 判断元素包围盒是否在选中区域
intersect(a, b) {
var ax0 = a.x;
var ax1 = a.x + a.width;
var ay0 = a.y;
var ay1 = a.y + a.height;
var bx0 = b.x;
var bx1 = b.x + b.width;
var by0 = b.y;
var by1 = b.y + b.height;
return !(ax1 < bx0 || bx1 < ax0 || ay1 < by0 || by1 < ay0);
}
contain (rect, x, y) {
return x >= rect.x &&
x <= (rect.x + rect.width) &&
y >= rect.y &&
y <= (rect.y + rect.height);
}
} }
export default MouseController; export default MouseController;

93
src/iscs/mouseController copy.js → src/iscs/mouseController1.js
View File

@ -29,7 +29,7 @@ class MouseController extends Eventful {
this.$zr = iscs.getZr(); this.$zr = iscs.getZr();
this.isAllowDragging = iscs.isAllowDragging || false; // 是否在绘图中，仅绘图状态下可拖拽 this.isAllowDragging = iscs.isAllowDragging || false; // 是否在绘图中，仅绘图状态下可拖拽
this.events = iscs.getEvents(); this.events = iscs.getEvents();
// this._dragging = false; // 是否在拖拽状态 this._dragging = false; // 是否在拖拽状态
this.deviceList = []; this.deviceList = [];
this.rightClickPoint = { this.rightClickPoint = {
x: 0, x: 0,
@ -75,7 +75,7 @@ class MouseController extends Eventful {
this.disable(); this.disable();
}; };
// this.isDragging = function () { return this._dragging; }; this.isDragging = function () { return this._dragging; };
} }
} }
@ -92,14 +92,14 @@ class MouseController extends Eventful {
this._offsetY = e.offsetY; this._offsetY = e.offsetY;
this._x = e.offsetX; this._x = e.offsetX;
this._y = e.offsetY; this._y = e.offsetY;
// this._dragging = true; this._dragging = true;
console.log(e, e.which);
if (e.which === 3) { if (e.which === 3) {
this.handleMouseDownRight(e); this.handleMouseDownRight(e);
} else if (e.which === 1) { } else if (e.which === 1) {
this.handleMouseDownLeft(e); this.handleMouseDownLeft(e);
} else if (e.which === 2) {
this.handleMouseDownWheel(e);
} }
console.log(this.deviceList);
} }
mousemove(e) { mousemove(e) {
@ -119,28 +119,27 @@ class MouseController extends Eventful {
} }
mouseup(e) { mouseup(e) {
console.log(e);
if (eventTool.notLeftMouse(e) || !this.eventTarget ) { if (eventTool.notLeftMouse(e) || !this.eventTarget ) {
return; return;
} }
// if (this.deviceList.length) { if (this.deviceList.length) {
// this.deviceList.forEach(item => { this.deviceList.forEach(item => {
// item.setModel(e.offsetX - this._offsetX, e.offsetY - this._offsetY); item.setModel(e.offsetX - this._offsetX, e.offsetY - this._offsetY);
// }); });
// this.deviceList = []; this.deviceList = [];
// this.$iscs.deleteCheckBox('check_box'); this.$iscs.deleteCheckBox('check_box');
// this.eventTarget = ''; this.eventTarget = '';
// // this._dragging = false; this._dragging = false;
// this.deviceList = []; this.deviceList = [];
// return; return;
// } }
// if (this.isAllowDragging) { if (this.isAllowDragging) {
// this.eventTarget.setModel(e.offsetX - this._offsetX, e.offsetY - this._offsetY); this.eventTarget.setModel(e.offsetX - this._offsetX, e.offsetY - this._offsetY);
// this.eventTarget.dirty(); this.eventTarget.dirty();
// } }
// this.eventTarget = ''; this.eventTarget = '';
// // this._dragging = false; this._dragging = false;
// this.deviceList = []; this.deviceList = [];
} }
contextmenu(e) { contextmenu(e) {
@ -196,9 +195,6 @@ class MouseController extends Eventful {
} }
/** 处理鼠标右键按下事件 */ /** 处理鼠标右键按下事件 */
handleMouseDownRight(e) { handleMouseDownRight(e) {
this.deviceList = [];
this.$iscs.deleteCheckBox('check_box'); // 清空上次操作
this.rightClickPoint.x = e.offsetX; this.rightClickPoint.x = e.offsetX;
this.rightClickPoint.y = e.offsetY; this.rightClickPoint.y = e.offsetY;
} }
@ -210,6 +206,13 @@ class MouseController extends Eventful {
this.$iscs.deleteCheckBox('check_box'); this.$iscs.deleteCheckBox('check_box');
} }
} }
/** 处理滚轮按下事件 */
handleMouseDownWheel(e) {
this.deviceList = [];
Object.values(this.$iscs.iscsDevice).forEach(item => {
this.deviceList.push(item.instance);
});
}
/** 处理右键拖动事件--- 改变选中区域大小 */ /** 处理右键拖动事件--- 改变选中区域大小 */
handleMouseMoveRight(point2) { handleMouseMoveRight(point2) {
const point1 = this.rightClickPoint; const point1 = this.rightClickPoint;
@ -221,25 +224,25 @@ class MouseController extends Eventful {
} }
/** 处理左键拖动事件--- 图形移动 */ /** 处理左键拖动事件--- 图形移动 */
handleMouseMoveLeft(e, dx, dy, oldX, oldY) { handleMouseMoveLeft(e, dx, dy, oldX, oldY) {
// if (!this._moveOnMouseMove || !this._dragging || !this.isAllowDragging) { if (!this._moveOnMouseMove || !this._dragging || !this.isAllowDragging) {
// return; return;
// } }
// 选中区域图形移动 // 选中区域图形移动
// if (this.deviceList.length) { if (this.deviceList.length) {
// this.deviceList.forEach(item => { this.deviceList.forEach(item => {
// item.grouper.drift(dx, dy, e); item.grouper.drift(dx, dy, e);
// }); });
// } else if (this._dragging && this.eventTarget) { // 选中元素图形移动 } else if (this._dragging && this.eventTarget) { // 选中元素图形移动
// if (!this.isAllowDragging) { if (!this.isAllowDragging) {
// this._preventDefaultMouseMove && eventTool.stop(e.event); this._preventDefaultMouseMove && eventTool.stop(e.event);
// this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y }); this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
// } else if (this.isAllowDragging) { } else if (this.isAllowDragging) {
// this.eventTarget.grouper.drift(dx, dy, e); this.eventTarget.grouper.drift(dx, dy, e);
// } }
// } else if (this._dragging) { } else if (this._dragging) {
// this._preventDefaultMouseMove && eventTool.stop(e.event); this._preventDefaultMouseMove && eventTool.stop(e.event);
// this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y }); this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
// } }
} }
/** 通过包围盒筛选选中区域的元素 */ /** 通过包围盒筛选选中区域的元素 */
handleBoundingRect(eventTarget) { handleBoundingRect(eventTarget) {

2
src/iscs/shape/fasBrakeMachine.js
View File

@ -28,4 +28,4 @@ export default class FasBrakeMachine extends Group {
this.model.point.x += dx; this.model.point.x += dx;
this.model.point.y += dy; this.model.point.y += dy;
} }
} }

2
src/iscs/shape/psd/platformScreenDoor.js
View File

@ -1,5 +1,5 @@
import Group from 'zrender/src/container/Group'; import Group from 'zrender/src/container/Group';
import Text from 'zrender/src/graphic/Text'; // import Text from 'zrender/src/graphic/Text';
import Rect from 'zrender/src/graphic/shape/Rect'; import Rect from 'zrender/src/graphic/shape/Rect';
import Line from 'zrender/src/graphic/shape/Line'; import Line from 'zrender/src/graphic/shape/Line';
import PsdClose from './psdClose'; import PsdClose from './psdClose';

2
src/iscs/shape/stairControl.js
View File

@ -19,7 +19,7 @@ export default class StairControl extends Group {
this.path = createPathSvg(this.model); this.path = createPathSvg(this.model);
this.add(this.grouper); this.add(this.grouper);
if (this.model.isRight) { if (this.model.isRight) {
this.grouper.origin = [this.model.width / 2, this.model.width * 0.83 / 2 ]; this.grouper.origin = [this.model.width / 2, this.model.width * 0.83 / 2];
this.grouper.scale = [-1, 1]; this.grouper.scale = [-1, 1];
} }
this.grouper.add(this.path); this.grouper.add(this.path);

1
src/store/modules/iscs.js
View File

@ -165,7 +165,6 @@ const iscs = {
commit('iscsRender', models); commit('iscsRender', models);
resolve(models); resolve(models);
}); });
}, },
setUpdateDeviceData: ({ commit }, models) => { setUpdateDeviceData: ({ commit }, models) => {

62
src/views/iscsSystem/index.vue
View File

@ -45,6 +45,7 @@ export default {
}, },
selected: null, // 选择复制元素 selected: null, // 选择复制元素
copyModel: {}, // 复制元素内容 copyModel: {}, // 复制元素内容
copyList: [],
showBackButton: true, showBackButton: true,
initTime: '', initTime: '',
started: false, started: false,
@ -139,21 +140,41 @@ export default {
if (this.selected && this.selected.code) { if (this.selected && this.selected.code) {
switch (hook) { switch (hook) {
case 'Ctrl_C': { case 'Ctrl_C': {
if (this.selected._type != "CheckBox") { const list = this.getSelectList();
this.copyModel = deepAssign({}, this.selected); if (list.length) {
this.copyModel.point = { this.copyList = [];
x: this.selected.point.x + 10, const mapIscs = {};
y: this.selected.point.y + 10 list.forEach(item => {
}; if (item && item.code) {
const copyModel = this.copyModelInfo(item, 30);
const type1 = item._type.charAt(0).toLowerCase() + item._type.slice(1); // .toLowerCase()
if (!mapIscs[type1 + 'List']) {
mapIscs[type1 + 'List'] = this.iscs[type1 + 'List'] || [];
}
const list = mapIscs[type1 + 'List'] || [];
copyModel.code = getUID(item._type, list);
mapIscs[type1 + 'List'].push(copyModel);
this.copyList.push(copyModel);
}
});
} else if (this.selected._type != 'CheckBox') {
this.copyModel = this.copyModelInfo(this.selected, 10);
const type1 = this.selected._type.charAt(0).toLowerCase() + this.selected._type.slice(1); // .toLowerCase() const type1 = this.selected._type.charAt(0).toLowerCase() + this.selected._type.slice(1); // .toLowerCase()
this.copyModel.code = getUID(this.selected._type, this.iscs[type1 + 'List'] || []); this.copyModel.code = getUID(this.selected._type, this.iscs[type1 + 'List'] || []);
} else { } else {
this.copyModel = {} this.copyModel = {};
}
} break;
case 'Ctrl_V': {
const list = this.getSelectList();
if (list.length) {
this.copyList.forEach(item => {
item.code && this.createDataModel(item);
});
} else {
this.copyModel.code && this.createDataModel(this.copyModel);
} }
} break; } break;
case 'Ctrl_V':
this.copyModel.code && this.createDataModel(this.copyModel);
break;
// case 'Delete': this.$store.dispatch('map/setDeleteCount'); // case 'Delete': this.$store.dispatch('map/setDeleteCount');
// break; // break;
// case 'Update': // case 'Update':
@ -163,6 +184,27 @@ export default {
} }
} }
}, },
copyModelInfo(model, length) { // copy 模块信息
const copyModel = deepAssign({}, model);
if (copyModel._type == 'IscsLine') {
copyModel.point1 = {
x: model.point1.x + length,
y: model.point1.y + length
};
copyModel.point2 = {
x: model.point2.x + length,
y: model.point2.y + length
};
}
copyModel.point = {
x: model.point.x + length,
y: model.point.y + length
};
return copyModel;
},
getSelectList() {
return this.$iscs.getCopyList() || [];
},
createDataModel(model) { createDataModel(model) {
const newModel = deviceFactory(model._type, model); const newModel = deviceFactory(model._type, model);
this.$store.dispatch('iscs/updateIscsDevices', newModel.model); this.$store.dispatch('iscs/updateIscsDevices', newModel.model);