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

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

@ -14,11 +14,11 @@ export default class AppendageBox extends Group {
} }
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,
@ -50,7 +50,7 @@ export default class AppendageBox extends Group {
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
}, },
@ -78,8 +78,8 @@ export default class AppendageBox extends Group {
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'
@ -90,10 +90,10 @@ export default class AppendageBox extends Group {
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'
@ -104,10 +104,10 @@ export default class AppendageBox extends Group {
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'
@ -123,7 +123,7 @@ export default class AppendageBox extends Group {
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;
} }
} }

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

@ -34,7 +34,7 @@ export default class button extends Group {
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]
}); });
@ -58,7 +58,7 @@ export default class button extends Group {
/** 缩放按钮 */ /** 缩放按钮 */
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();
} }
@ -73,13 +73,13 @@ export default class button extends Group {
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;
} }
} }
@ -112,7 +112,7 @@ export default class button extends Group {
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;
} }
} }

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

@ -26,7 +26,7 @@ export default class clock extends Group {
} }
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]
}); });
@ -38,7 +38,7 @@ export default class clock extends Group {
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({
@ -46,10 +46,10 @@ export default class clock extends Group {
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({
@ -57,10 +57,10 @@ export default class clock extends Group {
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({
@ -68,10 +68,10 @@ export default class clock extends Group {
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({
@ -79,10 +79,10 @@ export default class clock extends Group {
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({
@ -90,10 +90,10 @@ export default class clock extends Group {
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({
@ -101,10 +101,10 @@ export default class clock extends Group {
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({
@ -112,10 +112,10 @@ export default class clock extends Group {
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({
@ -123,10 +123,10 @@ export default class clock extends Group {
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);
@ -179,29 +179,29 @@ export default class clock extends Group {
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));
@ -235,17 +235,17 @@ export default class clock extends Group {
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));
@ -255,7 +255,7 @@ export default class clock extends Group {
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;
} }
} }

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

@ -1,6 +1,6 @@
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) {
@ -14,7 +14,7 @@ export default class ibpText extends Group {
} }
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]
}); });
@ -60,7 +60,7 @@ export default class ibpText extends Group {
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;
} }
} }

4
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/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) => {

60
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; } break;
case 'Ctrl_V': 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); this.copyModel.code && this.createDataModel(this.copyModel);
break; }
} 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);