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';
export default class AppendageBox extends Group {
constructor(device) {
super();
this.model = device.model;
this._type = device.model._type;
this._code = device.model.code;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.create();
}
constructor(device) {
super();
this.model = device.model;
this._type = device.model._type;
this._code = device.model.code;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.create();
}
create() {
this.grouper=new Group({
id: this.model.code,
position: [this.model.point.x, this.model.point.y]
});
const spaceHeight = (this.model.height-this.model.borderWidth*3)/2;
this.rect1 = new Rect({
zlevel: this.zlevel,
z: this.z,
shape: {
x: 0,
y: 0,
width: this.model.width - this.model.borderWidth,
height: this.model.borderWidth
},
style: {
fill: '#34383A'
}
});
this.rect2 = new Rect({
zlevel: this.zlevel,
z: this.z,
shape: {
x: 0,
y: this.model.borderWidth + spaceHeight,
width: this.model.width - this.model.borderWidth,
height: this.model.borderWidth
},
style: {
fill: '#34383A'
}
});
this.rect3 = new Rect({
zlevel: this.zlevel,
z: this.z,
shape: {
x: 0,
y: 2*this.model.borderWidth + 2*spaceHeight,
width: this.model.width - this.model.borderWidth,
height: this.model.borderWidth
},
style: {
fill: '#34383A'
}
});
this.rect4 = new Rect({
zlevel: this.zlevel,
z: this.z,
shape: {
x: 0,
y: 0,
width: this.model.borderWidth,
height: this.model.height
},
style: {
fill: '#34383A'
}
});
this.sector1 = new Sector({
zlevel: this.zlevel,
z: this.z,
shape: {
cx: this.model.width - this.model.borderWidth,
cy: this.model.borderWidth,
r: this.model.borderWidth,
startAngle: 1.5*Math.PI,
endAngle: 2*Math.PI
},
style: {
fill: '#34383A'
}
});
this.sector2 = new Sector({
zlevel: this.zlevel,
z: this.z,
shape: {
cx: this.model.width - this.model.borderWidth,
cy: 2*this.model.borderWidth + spaceHeight,
r: this.model.borderWidth,
startAngle: 1.5*Math.PI,
endAngle: 2*Math.PI
},
style: {
fill: '#34383A'
}
});
this.sector3 = new Sector({
zlevel: this.zlevel,
z: this.z,
shape: {
cx: this.model.width - this.model.borderWidth,
cy: 3*this.model.borderWidth + 2*spaceHeight,
r: this.model.borderWidth,
startAngle: 1.5*Math.PI,
endAngle: 2*Math.PI
},
style: {
fill: '#34383A'
}
});
this.grouper.add(this.rect1);
this.grouper.add(this.rect2);
this.grouper.add(this.rect3);
this.grouper.add(this.rect4);
this.grouper.add(this.sector1);
this.grouper.add(this.sector2);
this.grouper.add(this.sector3);
this.add(this.grouper);
}
setModel(dx, dy) {
this.model.point.x+=dx;
this.model.point.y+=dy;
}
create() {
this.grouper = new Group({
id: this.model.code,
position: [this.model.point.x, this.model.point.y]
});
const spaceHeight = (this.model.height - this.model.borderWidth * 3) / 2;
this.rect1 = new Rect({
zlevel: this.zlevel,
z: this.z,
shape: {
x: 0,
y: 0,
width: this.model.width - this.model.borderWidth,
height: this.model.borderWidth
},
style: {
fill: '#34383A'
}
});
this.rect2 = new Rect({
zlevel: this.zlevel,
z: this.z,
shape: {
x: 0,
y: this.model.borderWidth + spaceHeight,
width: this.model.width - this.model.borderWidth,
height: this.model.borderWidth
},
style: {
fill: '#34383A'
}
});
this.rect3 = new Rect({
zlevel: this.zlevel,
z: this.z,
shape: {
x: 0,
y: 2 * this.model.borderWidth + 2 * spaceHeight,
width: this.model.width - this.model.borderWidth,
height: this.model.borderWidth
},
style: {
fill: '#34383A'
}
});
this.rect4 = new Rect({
zlevel: this.zlevel,
z: this.z,
shape: {
x: 0,
y: 0,
width: this.model.borderWidth,
height: this.model.height
},
style: {
fill: '#34383A'
}
});
this.sector1 = new Sector({
zlevel: this.zlevel,
z: this.z,
shape: {
cx: this.model.width - this.model.borderWidth,
cy: this.model.borderWidth,
r: this.model.borderWidth,
startAngle: 1.5 * Math.PI,
endAngle: 2 * Math.PI
},
style: {
fill: '#34383A'
}
});
this.sector2 = new Sector({
zlevel: this.zlevel,
z: this.z,
shape: {
cx: this.model.width - this.model.borderWidth,
cy: 2 * this.model.borderWidth + spaceHeight,
r: this.model.borderWidth,
startAngle: 1.5 * Math.PI,
endAngle: 2 * Math.PI
},
style: {
fill: '#34383A'
}
});
this.sector3 = new Sector({
zlevel: this.zlevel,
z: this.z,
shape: {
cx: this.model.width - this.model.borderWidth,
cy: 3 * this.model.borderWidth + 2 * spaceHeight,
r: this.model.borderWidth,
startAngle: 1.5 * Math.PI,
endAngle: 2 * Math.PI
},
style: {
fill: '#34383A'
}
});
this.grouper.add(this.rect1);
this.grouper.add(this.rect2);
this.grouper.add(this.rect3);
this.grouper.add(this.rect4);
this.grouper.add(this.sector1);
this.grouper.add(this.sector2);
this.grouper.add(this.sector3);
this.add(this.grouper);
}
setModel(dx, dy) {
this.model.point.x += dx;
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 {
static colors = new Map([
['red_on', [redButtonPicOn]],
['red_off', [redButtonPic]],
['green_on', [greenButtonPicOn]],
['green_off', [greenButtonPic]],
['blue_on', [blueButtonPicOn]],
['blue_off', [blueButtonPic]],
['yellow_on', [yellowButtonPicOn]],
['yellow_off', [yellowButtonPic]],
['gray_on', [grayButtonPicOn]],
['gray_off', [grayButtonPic]]
['red_on', [redButtonPicOn]],
['red_off', [redButtonPic]],
['green_on', [greenButtonPicOn]],
['green_off', [greenButtonPic]],
['blue_on', [blueButtonPicOn]],
['blue_off', [blueButtonPic]],
['yellow_on', [yellowButtonPicOn]],
['yellow_off', [yellowButtonPic]],
['gray_on', [grayButtonPicOn]],
['gray_off', [grayButtonPic]]
]);
constructor(device) {
super();
this._type = device.model._type;
this._code = device.model.code;
this.model = device.model;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.create();
super();
this._type = device.model._type;
this._code = device.model.code;
this.model = device.model;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.create();
}
create() {
this.grouper=new Group({
id: this.model.code,
position: [this.model.point.x, this.model.point.y]
});
this.imageBg = new Image({
zlevel: this.zlevel,
z: this.z,
draggable: false,
style: {
image: this.getImagePic(),
x: 0,
y: 0,
width: 70,
height: 80
}
});
this.grouper.add(this.imageBg);
this.add(this.grouper);
this.transformScale();
this.grouper = new Group({
id: this.model.code,
position: [this.model.point.x, this.model.point.y]
});
this.imageBg = new Image({
zlevel: this.zlevel,
z: this.z,
draggable: false,
style: {
image: this.getImagePic(),
x: 0,
y: 0,
width: 70,
height: 80
}
});
this.grouper.add(this.imageBg);
this.add(this.grouper);
this.transformScale();
}
/** 缩放按钮 */
transformScale() {
this.imageBg.origin = [0, 0];
this.imageBg.scale =[this.model.width/70, this.model.width/70];
this.imageBg.dirty();
this.imageBg.origin = [0, 0];
this.imageBg.scale = [this.model.width / 70, this.model.width / 70];
this.imageBg.dirty();
}
getImagePic() {
const color = button.colors.get(`${this.model.color}_${this.model.status}`);
return color[0];
const color = button.colors.get(`${this.model.color}_${this.model.status}`);
return color[0];
}
// 设置按钮状态
setState(model) {
switch (model.status) {
case 'on': {
// 开放
this.open();
this.model.status='on';
break;
}
case 'off': {
// 关闭
this.close();
this.model.status='off';
break;
}
}
switch (model.status) {
case 'on': {
// 开放
this.open();
this.model.status = 'on';
break;
}
case 'off': {
// 关闭
this.close();
this.model.status = 'off';
break;
}
}
}
onclick() {
// if (!this.model.draggable) {
// switch (this.model.status) {
// case 'off': {
// this.open();
// this.model.status='on';
// break;
// }
// case 'on': {
// this.close();
// this.model.status='off';
// break;
// }
// }
// }
// if (!this.model.draggable) {
// switch (this.model.status) {
// case 'off': {
// this.open();
// this.model.status='on';
// break;
// }
// case 'on': {
// this.close();
// this.model.status='off';
// break;
// }
// }
// }
}
// 关闭
close() {
const color = button.colors.get(`${this.model.color}_off`);
this.imageBg.setStyle({image: color[0]});
const color = button.colors.get(`${this.model.color}_off`);
this.imageBg.setStyle({image: color[0]});
}
// 开放
open() {
const color = button.colors.get(`${this.model.color}_on`);
this.imageBg.setStyle({image: color[0]});
const color = button.colors.get(`${this.model.color}_on`);
this.imageBg.setStyle({image: color[0]});
}
setModel(dx, dy) {
this.model.point.x+=dx;
this.model.point.y+=dy;
this.model.point.x += dx;
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';
export default class clock extends Group {
constructor(device) {
super();
this._type = device.model._type;
this._code = device.model.code;
this.model = device.model;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.initTime = 0;
this.create();
constructor(device) {
super();
this._type = device.model._type;
this._code = device.model.code;
this.model = device.model;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.initTime = 0;
this.create();
}
create() {
this.grouper=new Group({
id: this.model.code,
position: [this.model.point.x, this.model.point.y]
});
this.clockBg = new Image({
zlevel: this.zlevel,
z: this.z,
style: {
image: clockBg,
x: 0,
y: 0,
width: this.model.width,
height: this.model.width/493*156
}
});
this.num1 = new Image({
zlevel: this.zlevel,
z: this.z,
style: {
image: this.getImagePic('0'),
x: this.model.width*0.098,
y: this.model.width*0.062,
width: this.model.width*0.095,
height: this.model.width*0.095/37*74
}
});
this.num2 = new Image({
zlevel: this.zlevel,
z: this.z,
style: {
image: this.getImagePic('0'),
x: this.model.width*0.22,
y: this.model.width*0.062,
width: this.model.width*0.095,
height: this.model.width*0.095/37*74
}
});
this.num3 = new Image({
zlevel: this.zlevel,
z: this.z,
style: {
image: this.getImagePic('0'),
x: this.model.width*0.395,
y: this.model.width*0.062,
width: this.model.width*0.095,
height: this.model.width*0.095/37*74
}
});
this.num4 = new Image({
zlevel: this.zlevel,
z: this.z,
style: {
image: this.getImagePic('0'),
x: this.model.width*0.52,
y: this.model.width*0.062,
width: this.model.width*0.095,
height: this.model.width*0.095/37*74
}
});
this.num5 = new Image({
zlevel: this.zlevel,
z: this.z,
style: {
image: this.getImagePic('0'),
x: this.model.width*0.69,
y: this.model.width*0.062,
width: this.model.width*0.095,
height: this.model.width*0.095/37*74
}
});
this.num6 = new Image({
zlevel: this.zlevel,
z: this.z,
style: {
image: this.getImagePic('0'),
x: this.model.width*0.816,
y: this.model.width*0.062,
width: this.model.width*0.095,
height: this.model.width*0.095/37*74
}
});
this.clockColon1 = new Image({
zlevel: this.zlevel,
z: this.z,
style: {
image: clockColon,
x: +this.model.width*0.183,
y: -this.model.width*0.017,
width: this.model.width*0.34,
height: this.model.width/1*0.34
}
});
this.clockColon2 = new Image({
zlevel: this.zlevel,
z: this.z,
style: {
image: clockColon,
x: +this.model.width*0.48,
y: -this.model.width*0.017,
width: this.model.width*0.34,
height: this.model.width/1*0.34
}
});
this.grouper.add(this.clockBg);
this.grouper.add(this.num1);
this.grouper.add(this.num2);
this.grouper.add(this.num3);
this.grouper.add(this.num4);
this.grouper.add(this.num5);
this.grouper.add(this.num6);
this.grouper.add(this.clockColon1);
this.grouper.add(this.clockColon2);
this.add(this.grouper);
}
getImagePic(context) {
let pic = clock0;
switch (context) {
case '0':
pic = clock0;
break;
case '1':
pic = clock1;
break;
case '2':
pic = clock2;
break;
case '3':
pic = clock3;
break;
case '4':
pic = clock4;
break;
case '5':
pic = clock5;
break;
case '6':
pic = clock6;
break;
case '7':
pic = clock7;
break;
case '8':
pic = clock8;
break;
case '9':
pic = clock9;
break;
}
return pic;
}
setClockStart(started) {
const _this = this;
if (started) {
this.timer&&clearInterval(this.timer);
this.timer = setInterval(() => {
_this.handleClock(_this);
}, 1000);
} else {
this.timer&&clearInterval(this.timer);
}
}
handleClock(_this) {
_this.initTime += 1000;
const newDate = new Date();
newDate.setTime(_this.initTime);
let seconds = newDate.getSeconds() +'';
let minutes = newDate.getMinutes() + '';
let hours = newDate.getHours() + '';
if (seconds.length<2) {
seconds = '0' + seconds;
}
if (minutes.length<2) {
minutes = '0' + minutes;
}
if (hours.length<2) {
hours = '0'+ hours;
}
_this.setNumPic(6, seconds.charAt(1));
_this.setNumPic(5, seconds.charAt(0));
_this.setNumPic(4, minutes.charAt(1));
_this.setNumPic(3, minutes.charAt(0));
_this.setNumPic(2, hours.charAt(1));
_this.setNumPic(1, hours.charAt(0));
}
setNumPic(num, context) {
switch (num) {
case 1:
this.num1.setStyle('image', this.getImagePic(context));
break;
case 2:
this.num2.setStyle('image', this.getImagePic(context));
break;
case 3:
this.num3.setStyle('image', this.getImagePic(context));
break;
case 4:
this.num4.setStyle('image', this.getImagePic(context));
break;
case 5:
this.num5.setStyle('image', this.getImagePic(context));
break;
case 6:
this.num6.setStyle('image', this.getImagePic(context));
}
}
setClockTime(initTime) {
this.initTime = initTime;
const newDate = new Date();
newDate.setTime(initTime);
let seconds = newDate.getSeconds() +'';
let minutes = newDate.getMinutes() + '';
let hours = newDate.getHours() + '';
if (seconds.length<2) {
seconds = '0' + seconds;
}
if (minutes.length<2) {
minutes = '0' + minutes;
}
if (hours.length<2) {
hours = '0'+ hours;
}
this.setNumPic(6, seconds.charAt(1));
this.setNumPic(5, seconds.charAt(0));
this.setNumPic(4, minutes.charAt(1));
this.setNumPic(3, minutes.charAt(0));
this.setNumPic(2, hours.charAt(1));
this.setNumPic(1, hours.charAt(0));
}
setModel(dx, dy) {
this.model.point.x+=dx;
this.model.point.y+=dy;
}
}
create() {
this.grouper = new Group({
id: this.model.code,
position: [this.model.point.x, this.model.point.y]
});
this.clockBg = new Image({
zlevel: this.zlevel,
z: this.z,
style: {
image: clockBg,
x: 0,
y: 0,
width: this.model.width,
height: this.model.width / 493 * 156
}
});
this.num1 = new Image({
zlevel: this.zlevel,
z: this.z,
style: {
image: this.getImagePic('0'),
x: this.model.width * 0.098,
y: this.model.width * 0.062,
width: this.model.width * 0.095,
height: this.model.width * 0.095 / 37 * 74
}
});
this.num2 = new Image({
zlevel: this.zlevel,
z: this.z,
style: {
image: this.getImagePic('0'),
x: this.model.width * 0.22,
y: this.model.width * 0.062,
width: this.model.width * 0.095,
height: this.model.width * 0.095 / 37 * 74
}
});
this.num3 = new Image({
zlevel: this.zlevel,
z: this.z,
style: {
image: this.getImagePic('0'),
x: this.model.width * 0.395,
y: this.model.width * 0.062,
width: this.model.width * 0.095,
height: this.model.width * 0.095 / 37 * 74
}
});
this.num4 = new Image({
zlevel: this.zlevel,
z: this.z,
style: {
image: this.getImagePic('0'),
x: this.model.width * 0.52,
y: this.model.width * 0.062,
width: this.model.width * 0.095,
height: this.model.width * 0.095 / 37 * 74
}
});
this.num5 = new Image({
zlevel: this.zlevel,
z: this.z,
style: {
image: this.getImagePic('0'),
x: this.model.width * 0.69,
y: this.model.width * 0.062,
width: this.model.width * 0.095,
height: this.model.width * 0.095 / 37 * 74
}
});
this.num6 = new Image({
zlevel: this.zlevel,
z: this.z,
style: {
image: this.getImagePic('0'),
x: this.model.width * 0.816,
y: this.model.width * 0.062,
width: this.model.width * 0.095,
height: this.model.width * 0.095 / 37 * 74
}
});
this.clockColon1 = new Image({
zlevel: this.zlevel,
z: this.z,
style: {
image: clockColon,
x: +this.model.width * 0.183,
y: -this.model.width * 0.017,
width: this.model.width * 0.34,
height: this.model.width / 1 * 0.34
}
});
this.clockColon2 = new Image({
zlevel: this.zlevel,
z: this.z,
style: {
image: clockColon,
x: +this.model.width * 0.48,
y: -this.model.width * 0.017,
width: this.model.width * 0.34,
height: this.model.width / 1 * 0.34
}
});
this.grouper.add(this.clockBg);
this.grouper.add(this.num1);
this.grouper.add(this.num2);
this.grouper.add(this.num3);
this.grouper.add(this.num4);
this.grouper.add(this.num5);
this.grouper.add(this.num6);
this.grouper.add(this.clockColon1);
this.grouper.add(this.clockColon2);
this.add(this.grouper);
}
getImagePic(context) {
let pic = clock0;
switch (context) {
case '0':
pic = clock0;
break;
case '1':
pic = clock1;
break;
case '2':
pic = clock2;
break;
case '3':
pic = clock3;
break;
case '4':
pic = clock4;
break;
case '5':
pic = clock5;
break;
case '6':
pic = clock6;
break;
case '7':
pic = clock7;
break;
case '8':
pic = clock8;
break;
case '9':
pic = clock9;
break;
}
return pic;
}
setClockStart(started) {
const _this = this;
if (started) {
this.timer && clearInterval(this.timer);
this.timer = setInterval(() => {
_this.handleClock(_this);
}, 1000);
} else {
this.timer && clearInterval(this.timer);
}
}
handleClock(_this) {
_this.initTime += 1000;
const newDate = new Date();
newDate.setTime(_this.initTime);
let seconds = newDate.getSeconds() + '';
let minutes = newDate.getMinutes() + '';
let hours = newDate.getHours() + '';
if (seconds.length < 2) {
seconds = '0' + seconds;
}
if (minutes.length < 2) {
minutes = '0' + minutes;
}
if (hours.length < 2) {
hours = '0' + hours;
}
_this.setNumPic(6, seconds.charAt(1));
_this.setNumPic(5, seconds.charAt(0));
_this.setNumPic(4, minutes.charAt(1));
_this.setNumPic(3, minutes.charAt(0));
_this.setNumPic(2, hours.charAt(1));
_this.setNumPic(1, hours.charAt(0));
}
setNumPic(num, context) {
switch (num) {
case 1:
this.num1.setStyle('image', this.getImagePic(context));
break;
case 2:
this.num2.setStyle('image', this.getImagePic(context));
break;
case 3:
this.num3.setStyle('image', this.getImagePic(context));
break;
case 4:
this.num4.setStyle('image', this.getImagePic(context));
break;
case 5:
this.num5.setStyle('image', this.getImagePic(context));
break;
case 6:
this.num6.setStyle('image', this.getImagePic(context));
}
}
setClockTime(initTime) {
this.initTime = initTime;
const newDate = new Date();
newDate.setTime(initTime);
let seconds = newDate.getSeconds() + '';
let minutes = newDate.getMinutes() + '';
let hours = newDate.getHours() + '';
if (seconds.length < 2) {
seconds = '0' + seconds;
}
if (minutes.length < 2) {
minutes = '0' + minutes;
}
if (hours.length < 2) {
hours = '0' + hours;
}
this.setNumPic(6, seconds.charAt(1));
this.setNumPic(5, seconds.charAt(0));
this.setNumPic(4, minutes.charAt(1));
this.setNumPic(3, minutes.charAt(0));
this.setNumPic(2, hours.charAt(1));
this.setNumPic(1, hours.charAt(0));
}
setModel(dx, dy) {
this.model.point.x += dx;
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 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 {
constructor(device) {
super();
this.model = device.model;
this._type = device.model._type;
this._code = device.model.code;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.create();
}
create() {
const model = this.model;
this.grouper=new Group({
id: this.model.code,
position: [this.model.point.x, this.model.point.y]
});
this.textName = new Text({
zlevel: model.zlevel,
z: model.z,
silent: model.silent || false,
draggable: false,
style: {
x: 0,
y: 0,
fontWeight: model.fontWeight,
fontSize: model.fontSize,
fontFamily: model.fontFamily,
text: model.context,
textStrokeWidth: model.textStrokeWidth,
textFill: model.textFill,
textAlign: model.textAlign,
textPosition: model.textPosition || 'inside',
textVerticalAlign: model.textVerticalAlign || null,
textLineHeight: model.fontSize
}
});
// if ( model.hasRect) {
// this.grouper.add(this.tip);
// this.tip = new Rect({
// zlevel: model.zlevel,
// z: model.z-1,
// draggable: false,
// shape: {
// x: model.textRect.x- model.point.x,
// y: model.textRect.x - model.point.y,
// width: model.textRect.width,
// height: model.textRect.height
// },
// style: {
// fill: model.textBackgroundColor
// }
// });
// }
this.grouper.add(this.textName);
constructor(device) {
super();
this.model = device.model;
this._type = device.model._type;
this._code = device.model.code;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.create();
}
create() {
const model = this.model;
this.grouper = new Group({
id: this.model.code,
position: [this.model.point.x, this.model.point.y]
});
this.textName = new Text({
zlevel: model.zlevel,
z: model.z,
silent: model.silent || false,
draggable: false,
style: {
x: 0,
y: 0,
fontWeight: model.fontWeight,
fontSize: model.fontSize,
fontFamily: model.fontFamily,
text: model.context,
textStrokeWidth: model.textStrokeWidth,
textFill: model.textFill,
textAlign: model.textAlign,
textPosition: model.textPosition || 'inside',
textVerticalAlign: model.textVerticalAlign || null,
textLineHeight: model.fontSize
}
});
// if ( model.hasRect) {
// this.grouper.add(this.tip);
// this.tip = new Rect({
// zlevel: model.zlevel,
// z: model.z-1,
// draggable: false,
// shape: {
// x: model.textRect.x- model.point.x,
// y: model.textRect.x - model.point.y,
// width: model.textRect.width,
// height: model.textRect.height
// },
// style: {
// fill: model.textBackgroundColor
// }
// });
// }
this.grouper.add(this.textName);
this.add(this.grouper);
}
setModel(dx, dy) {
this.model.point.x+=dx;
this.model.point.y+=dy;
}
this.add(this.grouper);
}
setModel(dx, dy) {
this.model.point.x += dx;
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];
}
copySelect(list) {
this.copyList = list.map(item => {
if (item._type != 'CheckBox') {
return item.model;
}
});
}
getCopyList() {
return this.copyList;
}
resize(opt) {
this.$iscsZr.resize(opt);
this.$painter.updateZrSize(opt);

5
src/iscs/keyboardController.js
View File

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

118
src/iscs/mouseController.js
View File

@ -97,8 +97,6 @@ class MouseController extends Eventful {
this.handleMouseDownRight(e);
} else if (e.which === 1) {
this.handleMouseDownLeft(e);
} else if (e.which === 2) {
this.handleMouseDownWheel(e);
}
}
@ -119,27 +117,11 @@ class MouseController extends Eventful {
}
mouseup(e) {
if (eventTool.notLeftMouse(e) || !this.eventTarget ) {
return;
if (e.which === 3) {
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) {
@ -195,24 +177,31 @@ class MouseController extends Eventful {
}
/** 处理鼠标右键按下事件 */
handleMouseDownRight(e) {
this.deviceList = [];
this.eventTarget = '';
this.$iscs.deleteCheckBox('check_box'); // 清空上次操作
this.$iscs.copySelect(this.deviceList);
this.rightClickPoint.x = e.offsetX;
this.rightClickPoint.y = e.offsetY;
}
/** 处理鼠标左键按下事件 */
handleMouseDownLeft(e) {
if (this.eventTarget && this.eventTarget._type === deviceType.CheckBox) {
this.handleBoundingRect(this.eventTarget);
if (this.$iscs.iscsDevice['check_box']) { // 判断点击点是否在 checkBox 范围
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 {
this.$iscs.deleteCheckBox('check_box');
}
}
/** 处理滚轮按下事件 */
handleMouseDownWheel(e) {
this.deviceList = [];
Object.values(this.$iscs.iscsDevice).forEach(item => {
this.deviceList.push(item.instance);
});
}
/** 处理右键拖动事件--- 改变选中区域大小 */
handleMouseMoveRight(point2) {
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 });
}
}
// 右键抬起事件
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) {
this.deviceList = [];
let boundingRect = eventTarget.grouper.getBoundingRect();
let boundingRect = eventTarget.grouper.getBoundingRect().clone();
boundingRect = this.createFakeBoundingRect(eventTarget, boundingRect);
const deviceList = Object.values(this.$iscs.iscsDevice);
const includeDeviceList = [];
deviceList.forEach( item =>{
let deviceBoundingRect = item.instance.grouper.getBoundingRect();
deviceList.forEach(item =>{
let deviceBoundingRect = item.instance.grouper.getBoundingRect().clone();
deviceBoundingRect = this.createFakeBoundingRect(item.instance, deviceBoundingRect);
if (this.whetherInclude(boundingRect, deviceBoundingRect )) {
includeDeviceList.push(item.instance);
if (this.whetherInclude(boundingRect, deviceBoundingRect)) {
this.deviceList.push(item.instance);
}
});
this.deviceList = includeDeviceList;
this.$iscs.copySelect(this.deviceList);
}
/** 创建假包围盒对象 */
createFakeBoundingRect(instance, boundingRect) {
const x1 = instance.model.point.x;
const y1 = instance.model.point.y;
return {
x1: instance.model.point.x + boundingRect.x,
y1: instance.model.point.y + boundingRect.y,
x2: instance.model.point.x + boundingRect.width,
y2: instance.model.point.y + boundingRect.height
// x: x1 + boundingRect.x,
// y: y1 + boundingRect.y,
// width: boundingRect.width,
// height: boundingRect.height
x1: x1 + boundingRect.x,
y1: y1 + boundingRect.y,
x2: x1 + boundingRect.width,
y2: y1 + boundingRect.height
};
}
/** 判断元素包围盒是否在选中区域 */
whetherInclude(boundingRect1, boundingRect2) {
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;

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

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

@ -1,5 +1,5 @@
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 Line from 'zrender/src/graphic/shape/Line';
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.add(this.grouper);
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.add(this.path);

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

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

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

@ -45,6 +45,7 @@ export default {
},
selected: null, // 选择复制元素
copyModel: {}, // 复制元素内容
copyList: [],
showBackButton: true,
initTime: '',
started: false,
@ -139,21 +140,41 @@ export default {
if (this.selected && this.selected.code) {
switch (hook) {
case 'Ctrl_C': {
if (this.selected._type != "CheckBox") {
this.copyModel = deepAssign({}, this.selected);
this.copyModel.point = {
x: this.selected.point.x + 10,
y: this.selected.point.y + 10
};
const list = this.getSelectList();
if (list.length) {
this.copyList = [];
const mapIscs = {};
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()
this.copyModel.code = getUID(this.selected._type, this.iscs[type1 + 'List'] || []);
} 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;
case 'Ctrl_V':
this.copyModel.code && this.createDataModel(this.copyModel);
break;
// case 'Delete': this.$store.dispatch('map/setDeleteCount');
// break;
// 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) {
const newModel = deviceFactory(model._type, model);
this.$store.dispatch('iscs/updateIscsDevices', newModel.model);