添加ibp局部选中拖拽
This commit is contained in:
fan
parent
4e1ee242a5
commit
d3e1086596
@ -107,4 +107,10 @@ deviceRender[deviceType.Alarm] = {
|
||||
z: 4
|
||||
};
|
||||
|
||||
deviceRender[deviceType.CheckBox] = {
|
||||
_type: deviceType.CheckBox,
|
||||
zlevel: 10,
|
||||
z: 0
|
||||
};
|
||||
|
||||
export default deviceRender;
|
||||
|
||||
@ -12,7 +12,8 @@ const deviceType = {
|
||||
Key: 'Key',
|
||||
TeleTerminal: 'TeleTerminal',
|
||||
Clock: 'Clock',
|
||||
RotateTip: 'RotateTip'
|
||||
RotateTip: 'RotateTip',
|
||||
CheckBox: 'CheckBox'
|
||||
};
|
||||
|
||||
export default deviceType;
|
||||
|
||||
@ -303,5 +303,25 @@ class IbpPan {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
renderCheckBox(model) {
|
||||
const type = model._type;
|
||||
const code = model.code;
|
||||
const oDevice = this.ibpDevice[code] || deviceFactory(type, model);
|
||||
const nDevice = deviceFactory(type, Object.assign(oDevice.model || {}, model));
|
||||
delete this.ibpDevice[code];
|
||||
this.$painter.delete(oDevice);
|
||||
if (!model._dispose) {
|
||||
this.ibpDevice[code] = nDevice;
|
||||
this.$painter.add(nDevice);
|
||||
}
|
||||
}
|
||||
deleteCheckBox(code) {
|
||||
const oDevice = this.ibpDevice[code];
|
||||
if (oDevice) {
|
||||
delete this.ibpDevice[code];
|
||||
this.$painter.delete(oDevice);
|
||||
}
|
||||
}
|
||||
}
|
||||
export default IbpPan;
|
||||
|
||||
@ -27,9 +27,14 @@ class MouseController extends Eventful {
|
||||
super();
|
||||
this.$ibp = ibp;
|
||||
this.$zr = ibp.getZr();
|
||||
this.isAllowDragging=ibp.isAllowDragging||false;
|
||||
this.isAllowDragging = ibp.isAllowDragging || false; // 是否在绘图中，仅绘图状态下可拖拽
|
||||
this.events = ibp.getEvents();
|
||||
this._dragging = false;
|
||||
this._dragging = false; // 是否在拖拽状态
|
||||
this.deviceList = [];
|
||||
this.rightClickPoint = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}; // 右键点击坐标
|
||||
this.initHandler(this.$zr);
|
||||
}
|
||||
|
||||
@ -75,35 +80,29 @@ class MouseController extends Eventful {
|
||||
}
|
||||
|
||||
setAllowDragging(data) {
|
||||
this.isAllowDragging=data;
|
||||
this.isAllowDragging = data;
|
||||
}
|
||||
|
||||
mousedown(e) {
|
||||
if (eventTool.notLeftMouse(e)) {
|
||||
return;
|
||||
}
|
||||
e.event.preventDefault();
|
||||
e.event.stopPropagation();
|
||||
const em = new EventModel(e);
|
||||
this.eventTarget = em.eventTarget;
|
||||
if (this.eventTarget && this.eventTarget._type === deviceType.Background) {
|
||||
this.eventTarget.setCursor('pointer');
|
||||
}
|
||||
this._offsetX=e.offsetX;
|
||||
this._offsetY=e.offsetY;
|
||||
this._offsetX = e.offsetX;
|
||||
this._offsetY = e.offsetY;
|
||||
this._x = e.offsetX;
|
||||
this._y = e.offsetY;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
mousemove(e) {
|
||||
if (eventTool.notLeftMouse(e) ||
|
||||
!this._moveOnMouseMove ||
|
||||
!this._dragging || !this.isAllowDragging
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const oldX = this._x;
|
||||
const oldY = this._y;
|
||||
|
||||
@ -112,32 +111,38 @@ class MouseController extends Eventful {
|
||||
|
||||
this._x = e.offsetX;
|
||||
this._y = e.offsetY;
|
||||
if (this._dragging) {
|
||||
if ((this.eventTarget && this.eventTarget._type === deviceType.Background) || !this.isAllowDragging) {
|
||||
this._preventDefaultMouseMove && eventTool.stop(e.event);
|
||||
this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
|
||||
return true;
|
||||
} else if (this.isAllowDragging && this.eventTarget) {
|
||||
this.eventTarget.grouper.drift(dx, dy, e);
|
||||
if (e.which === 3) {
|
||||
this.handleMouseMoveRight({x: e.offsetX, y: e.offsetY});
|
||||
} else if (e.which === 1) {
|
||||
this.handleMouseMoveLeft(e, dx, dy, oldX, oldY);
|
||||
}
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
mouseup(e) {
|
||||
if (!eventTool.notLeftMouse(e)&&this.isAllowDragging && this.eventTarget) {
|
||||
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.$ibp.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();
|
||||
}
|
||||
// debugger;
|
||||
if (this.eventTarget && this.eventTarget._type === deviceType.Background) {
|
||||
// console.log('111-------');
|
||||
if (this.eventTarget._type === deviceType.Background) {
|
||||
this.eventTarget.setCursor('default');
|
||||
}
|
||||
this.eventTarget = '';
|
||||
this._dragging = false;
|
||||
this.deviceList = [];
|
||||
}
|
||||
|
||||
contextmenu(e) {
|
||||
@ -191,6 +196,92 @@ class MouseController extends Eventful {
|
||||
|
||||
return newEm;
|
||||
}
|
||||
/** 处理鼠标右键按下事件 */
|
||||
handleMouseDownRight(e) {
|
||||
this.rightClickPoint.x = e.offsetX;
|
||||
this.rightClickPoint.y = e.offsetY;
|
||||
}
|
||||
/** 处理鼠标左键按下事件 */
|
||||
handleMouseDownLeft(e) {
|
||||
if (this.eventTarget && this.eventTarget._type === deviceType.Background) {
|
||||
this.eventTarget.setCursor('pointer');
|
||||
this.$ibp.deleteCheckBox('check_box');
|
||||
} else if (this.eventTarget && this.eventTarget._type === deviceType.CheckBox) {
|
||||
this.handleBoundingRect(this.eventTarget);
|
||||
} else {
|
||||
this.$ibp.deleteCheckBox('check_box');
|
||||
}
|
||||
}
|
||||
/** 处理滚轮按下事件 */
|
||||
handleMouseDownWheel(e) {
|
||||
this.deviceList = [];
|
||||
Object.values(this.$ibp.ibpDevice).forEach(item => {
|
||||
if (item.instance._type !== deviceType.Background) {
|
||||
this.deviceList.push(item.instance);
|
||||
}
|
||||
});
|
||||
}
|
||||
/** 处理右键拖动事件--- 改变选中区域大小 */
|
||||
handleMouseMoveRight(point2) {
|
||||
const point1 = this.rightClickPoint;
|
||||
const x = Math.min(point1.x, point2.x) + this.$ibp.$options.offsetX;
|
||||
const y = Math.min(point1.y, point2.y) + this.$ibp.$options.offsetY;
|
||||
const width = Math.abs(point1.x - point2.x);
|
||||
const height = Math.abs(point1.y - point2.y);
|
||||
this.$ibp.renderCheckBox({code: 'check_box', _type: 'CheckBox', point: {x: x, y: y}, width: width, height: height });
|
||||
}
|
||||
/** 处理左键拖动事件--- 图形移动 */
|
||||
handleMouseMoveLeft(e, dx, dy, oldX, oldY) {
|
||||
if (!this._moveOnMouseMove || !this._dragging || !this.isAllowDragging) {
|
||||
return;
|
||||
}
|
||||
if (this.deviceList.length) {
|
||||
this.deviceList.forEach(item => {
|
||||
item.grouper.drift(dx, dy, e);
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this._dragging) {
|
||||
if ((this.eventTarget && this.eventTarget._type === deviceType.Background) || !this.isAllowDragging) {
|
||||
this._preventDefaultMouseMove && eventTool.stop(e.event);
|
||||
this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
|
||||
return true;
|
||||
} else if (this.isAllowDragging && this.eventTarget) {
|
||||
this.eventTarget.grouper.drift(dx, dy, e);
|
||||
}
|
||||
}
|
||||
}
|
||||
/** 通过包围盒筛选选中区域的元素 */
|
||||
handleBoundingRect(eventTarget) {
|
||||
this.deviceList = [];
|
||||
let boundingRect = eventTarget.grouper.getBoundingRect();
|
||||
boundingRect = this.createFakeBoundingRect(eventTarget, boundingRect);
|
||||
const deviceList = Object.values(this.$ibp.ibpDevice);
|
||||
const includeDeviceList = [];
|
||||
deviceList.forEach( item =>{
|
||||
if (item.instance._type !== deviceType.Background) {
|
||||
let deviceBoundingRect = item.instance.grouper.getBoundingRect();
|
||||
deviceBoundingRect = this.createFakeBoundingRect(item.instance, deviceBoundingRect);
|
||||
if (this.whetherInclude(boundingRect, deviceBoundingRect )) {
|
||||
includeDeviceList.push(item.instance);
|
||||
}
|
||||
}
|
||||
});
|
||||
this.deviceList = includeDeviceList;
|
||||
}
|
||||
/** 创建假包围盒对象 */
|
||||
createFakeBoundingRect(instance, boundingRect) {
|
||||
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
|
||||
};
|
||||
}
|
||||
/** 判断元素包围盒是否在选中区域 */
|
||||
whetherInclude(boundingRect1, boundingRect2) {
|
||||
return boundingRect1.x1 <= boundingRect2.x1 && boundingRect1.y1 <= boundingRect2.y1 && boundingRect1.x2 >= boundingRect2.x2 && boundingRect1.y2 >= boundingRect2.y2;
|
||||
}
|
||||
}
|
||||
|
||||
export default MouseController;
|
||||
|
||||
46
src/ibp/shape/checkBox.js
Normal file
46
src/ibp/shape/checkBox.js
Normal file
@ -0,0 +1,46 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Rect from 'zrender/src/graphic/shape/Rect';
|
||||
|
||||
export default class checkBox 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: model.code,
|
||||
position: [model.point.x, model.point.y]
|
||||
});
|
||||
this.box = new Rect({
|
||||
zlevel: model.zlevel,
|
||||
z: model.z,
|
||||
draggable: false,
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: this.model.width,
|
||||
height: this.model.height
|
||||
},
|
||||
style: {
|
||||
fill: 'rgb(135,206,250,0.2)'
|
||||
}
|
||||
});
|
||||
this.grouper.add(this.box);
|
||||
this.add(this.grouper);
|
||||
}
|
||||
setModel(dx, dy) {
|
||||
this.model.point.x += dx;
|
||||
this.model.point.y += dy;
|
||||
}
|
||||
setSize(width, height) {
|
||||
this.model.width = width;
|
||||
this.model.height = height;
|
||||
}
|
||||
}
|
||||
@ -13,6 +13,7 @@ import Key from './key';
|
||||
import TeleTerminal from './teleTerminal';
|
||||
import Clock from './clock';
|
||||
import RotateTip from './rotateTip';
|
||||
import CheckBox from './checkBox';
|
||||
|
||||
const ibpShape = {};
|
||||
ibpShape[deviceType.Arrow] = Arrow;
|
||||
@ -29,6 +30,7 @@ ibpShape[deviceType.Key] = Key;
|
||||
ibpShape[deviceType.TeleTerminal] = TeleTerminal;
|
||||
ibpShape[deviceType.Clock] = Clock;
|
||||
ibpShape[deviceType.RotateTip] = RotateTip;
|
||||
ibpShape[deviceType.CheckBox] = CheckBox;
|
||||
|
||||
function shapefactory(device, ibp) {
|
||||
const type = device.model._type;
|
||||
|
||||
@ -8,12 +8,13 @@ export default class ibpLine extends Group {
|
||||
this._type = device.model._type;
|
||||
this._code = device.model.code;
|
||||
this.zlevel = device.model.zlevel;
|
||||
this.model.point = this.model.point1;
|
||||
this.z = device.model.z;
|
||||
this.create();
|
||||
}
|
||||
create() {
|
||||
const model = this.model;
|
||||
this.grouper=new Group({
|
||||
this.grouper = new Group({
|
||||
id: model.code,
|
||||
position: [model.point1.x, model.point1.y]
|
||||
});
|
||||
@ -24,8 +25,8 @@ export default class ibpLine extends Group {
|
||||
shape: {
|
||||
x1: 0,
|
||||
y1: 0,
|
||||
x2: model.point2.x-model.point1.x,
|
||||
y2: model.point2.y-model.point1.y
|
||||
x2: model.point2.x - model.point1.x,
|
||||
y2: model.point2.y - model.point1.y
|
||||
},
|
||||
style: {
|
||||
lineWidth: this.model.lineWidth,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user