ibp盘按钮组件封装

src/ibp/shape/button.js

@@ -1,5 +1,11 @@
 import Group from 'zrender/src/container/Group';
 import Image from 'zrender/src/graphic/Image';
+// import Eventful from 'zrender/src/mixin/Eventful';
+
+import * as eventTool from 'zrender/src/core/event';
+
+import buttonPic from '@/assets/ibp_images/red_button.png';
+import buttonPicOn from '@/assets/ibp_images/red_button_on.png';
 
 export default class button extends Group {
 	constructor(model) {
@@ -8,13 +14,15 @@ export default class button extends Group {
 		this.zlevel = model.zlevel;
 		this.z = model.z;
 		this.create();
+		this.createMouseEvent();
 	}
 	create() {
+		const model = this.model;
 		this.imageBg = new Image({
 			zlevel: this.zlevel,
 			z: this.z,
 			style: {
-				image: this.model.image,
+				image: model.status === '01' ? buttonPic : buttonPicOn,
 				x: this.model.point.x,
 				y: this.model.point.y,
 				width: this.model.width,
@@ -23,4 +31,133 @@ export default class button extends Group {
 		});
 		this.add(this.imageBg);
 	}
+
+	// 设置按钮状态
+	setState(model) {
+		switch (model.status) {
+		case '01': this.close(); break; 				// 关闭
+		case '02': this.open(); break; 					// 开放
+		}
+	}
+
+	// 绑定按钮事件
+	createMouseEvent() {
+		this.model.isDraging=true;
+		if (this.model.isDraging) {
+			// 按钮拖拽事件监听
+			this.imageBg.on('mousedown', (e) => {
+				if (eventTool.notLeftMouse(e)) {
+					return;
+				}
+				eventTool.stop(e.event);
+				var x = e.offsetX;
+				var y = e.offsetY;
+				this._x = x;
+				this._y = y;
+				this._dragginger = true;
+			});
+			this.imageBg.on('mousemove', (e) => {
+				// !this._moveOnMouseMove ||
+				if (eventTool.notLeftMouse(e) || !this._dragginger) {
+					return;
+				}
+				// eventTool.stop(e.event);
+				const oldX = this._x;
+				const oldY = this._y;
+				const dx = e.offsetX - oldX;
+				const dy = e.offsetY - oldY;
+				this._x = e.offsetX;
+				this._y = e.offsetY;
+				debugger;
+				// this.imageBg.preventDefaultMouseMove && 
+				eventTool.stop(e.event);
+				// debugger;
+				this.imageBg.setStyle({x: oldX+dx, y: oldY+dy });
+			});
+
+			this.imageBg.on('mouseup', (e) => {
+				if (!eventTool.notLeftMouse(e)) {
+					this._dragginger = false;
+				}
+			});
+
+		} else {
+			// 按钮的点击监听
+			this.imageBg.on('click', (e) => {
+				switch (this.model.status) {
+				case '01': {
+					this.open();
+					this.model.status='02';
+					break;
+				}
+				case '02': {
+					this.close();
+					this.model.status='01';
+					break;
+				}
+				}
+			});
+		}
+	}
+
+// if (this.model.isDraging) {
+// 	// this.mouseEvent = new EMouse(this);
+// 	// this.add(this.mouseEvent);
+// 	this.imageBg.on('mousedown', (e) => { 
+// 		// debugger;
+// 		if (eventTool.notLeftMouse(e)) {
+// 			return;
+// 		}
+// 		var x = e.offsetX;
+// 		var y = e.offsetY;
+// 		this._x = x;
+// 		this._y = y;
+// 		this._dragging = true;
+// 	});
+// 	this.imageBg.on('mousemove', (e) => {
+// 		if (eventTool.notLeftMouse(e) || !this._moveOnMouseMove ||!this._dragging) {
+// 			return;
+// 		}
+// 		const oldX = this._x;
+// 		const oldY = this._y;
+// 		const dx = e.offsetX - oldX;
+// 		const dy = e.offsetY - oldY;
+// 		this._x = e.offsetX;
+// 		this._y = e.offsetY;
+// 		debugger;
+// 		this.imageBg.preventDefaultMouseMove && eventTool.stop(e.event);
+// 		debugger;
+// 		this.imageBg.setStyle({x: dx, y: dy});
+// 		// this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
+
+// 	});
+// 	this.on('mouseup', (e) => { });
+// }
+// else {
+// 	this.on('mousedown', (e) => { this.mouseEvent.mouseout(e); });
+// 	// this.on('mousemove', (e) => { this.mouseEvent.mouseover(e); });
+// 	this.on('mouseup', (e) => { this.mouseEvent.mouseover(e); });
+// }
+
+	// 关闭
+	close() {
+		this.imageBg.setStyle({image: buttonPic});
+	}
+	// 开放
+	open() {
+		this.imageBg.setStyle({image: buttonPicOn});
+	}
+
+	getShapeTipPoint() {
+		if (this.imageBg) {
+			var distance = 2;
+			var rect = this.imageBg.getBoundingRect();
+			return {
+				x: rect.x + rect.width / 2,
+				y: rect.y - distance
+			};
+		}
+		return null;
+	}
+
 }