模板处理

src/iscs_new/constant/shapeRender.js

@@ -1,3 +1,4 @@
 export default {
-	zlevel: 1
+	zlevel: 1,
+	z: 9,
 }

src/iscs_new/controller.js

@@ -185,10 +185,8 @@ export default class Controller extends Eventful {
 			this.selectingHandle.clear(e);
 			if (this.isSpecialSubType(event)) { return; }
 			if (this._dragEnable && this._locking) {
-				this.setCursorStyle('move');
 				this.trigger(this.events.__DragStart, { x: e.offsetX, y: e.offsetY, code: event.code });
 			} else if (this._areaSelectEnable) {
-				this.setCursorStyle('crosshair');
 				this.trigger(this.events.__SelectStart, { x: e.offsetX, y: e.offsetY});
 			}
 		}
@@ -206,15 +204,14 @@ export default class Controller extends Eventful {
 
 		if (this._isNotLeftMouse) {
 			if (this._panEnable) {
-				this.setCursorStyle('grabbing');
 				if (dx**2+dy**2 > 8) {
 					this._pan = true;
 				}
 				this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
+				this.setCursorStyle('grabbing');
 			}
 		} else {
 			if (this._dragEnable && this.dragHandle.isDragging()) {
-				this.setCursorStyle('move');
 				if (this.limitDrag({dx, dy})) {
 					this.trigger(this.events.__Dragging, { dx, dy });
 					if (this._reflectEnable) {
@@ -225,7 +222,6 @@ export default class Controller extends Eventful {
 					this._y = oldY;
 				}
 			} else if (this._areaSelectEnable && this.selectingHandle.isSelecting()) {
-				this.setCursorStyle('crosshair');
 				this.trigger(this.events.__Selecting, { x: e.offsetX, y: e.offsetY });
 			}
 		}
@@ -235,6 +231,7 @@ export default class Controller extends Eventful {
 		const target = this._target;
 		if (this._isNotLeftMouse) {
 			this._isNotLeftMouse = false;
+			this.setCursorStyle('auto');
 		} else {
 			if (this._dragEnable && this.dragHandle.isDragging()) {
 				this.trigger(this.events.__DragEnd, {x: e.offsetX, y: e.offsetY});
@@ -245,11 +242,7 @@ export default class Controller extends Eventful {
 			if (this._selectEnable && target) {
 				this.trigger(this.events.__Selected, { target });
 			}
-
-			this.setCursorStyle('auto');
 		}
-
-		// this.setLocking(false);  设置false时，拖动完成后，需要重新激活
 		this._target = null;
 	}
 
@@ -281,6 +274,8 @@ export default class Controller extends Eventful {
 
 	click(e) {
 		const event = new MouseEvent(e);
+		this.trigger(events.Selected, event);
+
 		if (event.code) {
 			this.setLocking(true)
 		} else {
@@ -288,8 +283,6 @@ export default class Controller extends Eventful {
 			this.selectingHandle.clear();
 			this.clear();
 		}
-
-		this.trigger(events.Selected, event);
 	}
 
 	contextmenu(e) {

src/iscs_new/core/abstractShape.js

@@ -7,6 +7,7 @@ function shapeStyleBuilder() {
 		...shapeRender,
 		z: 9998,
 		silent: true,
+		cursor: 'pointer',
 		shape: {
 			x: 0,
 			y: 0,
@@ -15,7 +16,7 @@ function shapeStyleBuilder() {
 		},
 		style: {
 			lineWidth: 1,
-			stroke: '#fff',
+			stroke: 'rgba(255,255,255,0.5)',
 			fill: 'rgba(200,200,200,0.3)'
 		}
 	}
@@ -46,9 +47,6 @@ class AbstractShape {
 	// 设置取消焦点
 	blur() {}
 
-	// 设置状态
-	setState(state) {}
-
 	// 绑定数据
 	combine() {}
 
@@ -60,6 +58,12 @@ class AbstractShape {
 
 	// 获取依赖图形
 	getDepShapes() {}
+
+	// 修改属性
+	attr() {}
+
+	// 设置状态
+	setState(state) {}
 }
 
 export default AbstractShape;

src/iscs_new/factory/compose.js

@@ -38,6 +38,8 @@ class Compose extends AbstractShape {
 
 	// 绑定数据
 	combine() {
+		this.inactive();
+		this.shapeFactory.hideHightLight(this);
 		this.model.elementCodes.forEach(code => {
 			const element = this.shapeFactory.getShapeByCode(code);
 			if (element &&
@@ -51,17 +53,29 @@ class Compose extends AbstractShape {
 	// 解除绑定
 	uncouple() {
 		this.inactive();
+		this.shapeFactory.hideHightLight(this);
 		this.model.elementCodes.forEach(code => {
 			const element = this.shapeFactory.getShapeByCode(code);
 			if (element &&
 				element.model) {
 				element.model.composeCode = '';
-				element.instance.attr(element.model)
+				element.instance.attr(element.model);
 			}
 		})
 		this.model.elementCodes = [];
 	}
 
+	// 修改属性
+	attr(attrs) {
+		this.model.elementCodes.forEach(code => {
+			const element = this.shapeFactory.getShapeByCode(code);
+			if (element &&
+				element.instance) {
+				element.instance.attr(attrs);
+			}
+		})
+	}
+
 	// 获取依赖图形
 	getDepShapes() {
 		return this.model.elementCodes.map(code => this.shapeFactory.getShapeByCode(code)).filter(el => el)

src/iscs_new/factory/element.js

@@ -99,6 +99,8 @@ class Element extends AbstractShape {
 
 	// 绑定数据
 	combine() {
+		this.inactive();
+		this.shapeFactory.hideHightLight(this);
 		const compose = this.shapeFactory.getShapeByCode(this.model.composeCode);
 		if (compose &&
 			compose.model &&
@@ -113,6 +115,7 @@ class Element extends AbstractShape {
 	// 解除绑定
 	uncouple() {
 		this.inactive();
+		this.shapeFactory.hideHightLight(this);
 		const compose = this.shapeFactory.getShapeByCode(this.model.composeCode);
 		if (compose &&
 			compose.model &&
@@ -124,6 +127,11 @@ class Element extends AbstractShape {
 		}
 	}
 
+	// 修改属性
+	attr(attrs) {
+		this.instance.attr(attrs);
+	}
+
 	// 获取依赖图形
 	getDepShapes() {
 		return []

src/iscs_new/factory/index.js

@@ -133,8 +133,8 @@ class ShapeFactory extends Eventful {
 
 	removeShape(shape) {
 		if (shape && shape.model) {
-			this.trigger(shapeEvent.HideHightLight);
-			shape.uncouple();
+			this.hideHightLight(shape);
+			shape.uncouple(shape);
 			delete this.mapShape[shape.model.code];
 		}
 		return shape;
@@ -154,9 +154,14 @@ class ShapeFactory extends Eventful {
 			instance.hightLightInstance.setShape(instance.getBoundingRect());
 			this.$painter.addToLevel(shapeLayer.HightLight)(instance.hightLightInstance);
 		}
+
 		if (target == instance) {
 			this.showBorder(instance);
 		}
+
+		instance.attr({ z: shapeRender.z + 9 })
+
+		instance.active();
 	}
 
 	hideHightLight(instance) {
@@ -164,9 +169,14 @@ class ShapeFactory extends Eventful {
 		if (instance.hightLightInstance) {
 			this.$painter.removeFromLevel(shapeLayer.HightLight)(instance.hightLightInstance);
 		}
+
 		if (target != instance) {
 			this.hideBorder(instance);
 		}
+
+		instance.attr({ z: shapeRender.z })
+
+		instance.inactive();
 	}
 
 	showBorder(instance) {

src/iscs_new/map.js

@@ -151,19 +151,22 @@ class JMap {
 
 	render(list=[]) {
 		list.forEach(({model, action}) => {
-			const updateModel = this.$shapeFactory.updateSource(model, action);
+			const updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action): model;
 			const shape = this.$shapeFactory.getShapeByCode(updateModel.code);
 			const deps = shape.getDepShapes();
-			const oldShape = this.$shapeFactory.removeShape(shape);
-			const newShape = this.$shapeFactory.createShape(updateModel, {...shapeRender, ...action});
+			let oldShape = null
+			let newShape = null;
 
 			if (updateModel) {
 				switch(action.order) {
+					case orders.BINDING:
 					case orders.ADD:
+						newShape = this.$shapeFactory.createShape(updateModel, {...shapeRender, ...action});
 						this.$shapeFactory.storageShape(newShape)
 						this.$painter.add(newShape);
 						break;
 					case orders.DELETE:
+						oldShape = this.$shapeFactory.removeShape(shape);
 						this.$painter.remove(oldShape);
 						deps.forEach(shape => {
 							this.$shapeFactory.updateSource(shape.model, {...action, shapeType: shapeType.Element});
@@ -171,16 +174,16 @@ class JMap {
 						});
 						break;
 					case orders.UPDATE:
+						oldShape = this.$shapeFactory.removeShape(shape);
+						newShape = this.$shapeFactory.createShape(updateModel, {...shapeRender, ...action});
 						this.$painter.remove(oldShape);
 						this.$shapeFactory.storageShape(newShape)
 						this.$painter.add(newShape);
 						break;
 					case orders.UNBINDING:
+						oldShape = this.$shapeFactory.removeShape(shape);
 						this.$painter.remove(oldShape);
 						break;
-					case orders.BINDING:
-						// 暂不支持
-						break;
 				}
 			}
 		});

src/iscs_new/utils/storage.js

@@ -41,6 +41,10 @@ export default class Storage {
 		return this.has(code);
 	}
 
+	forEach() {
+		return this.map.forEach;
+	}
+
 	setClipboard(lst) {
 		this.clipboard = Array.from(lst);
 	}
@@ -56,8 +60,4 @@ export default class Storage {
 	getClipboardSize() {
 		return this.clipboard.length;
 	}
-
-	forEach() {
-		return this.map.forEach;
-	}
 }

src/views/test/index.vue

@@ -8,7 +8,7 @@
 			<el-button @click="doSource"> 源数据 </el-button>
 		</el-row>
 	</div>
-    <div :id="iscsId" v-loading="loading" :style="{ width: canvasWidth +'px', height: canvasHeight +'px',background:'#425a74' }" class="iscs-canvas" />
+    <div :id="iscsId" v-loading="loading" :style="{ width: width +'px', height: height +'px',background:'#425a74' }" class="iscs-canvas" />
   </div>
 </template>
 
@@ -42,10 +42,6 @@ export default {
         };
     },
     computed: {
-        ...mapGetters([
-            'canvasWidth',
-            'canvasHeight'
-        ]),
         ...mapGetters('iscs', [
             'iscs'
         ]),
@@ -53,10 +49,10 @@ export default {
             return ['iscs', (Math.random().toFixed(5)) * 100000].join('_');
         },
         width() {
-            return document.documentElement.clientWidth - 60;
+            return document.documentElement.clientWidth;
         },
         height() {
-            return document.documentElement.clientHeight - 120;
+            return document.documentElement.clientHeight - 200;
         }
     },
     watch: {
@@ -98,10 +94,42 @@ export default {
 
 			Vue.prototype.$iscs = this.$iscs;
 
-			this.$iscs.setMap([], {
+			this.$iscs.setMap([
+				{
+					type: 'Device',
+					name: 'test',
+					isActive: false,
+					isFoucs: false,
+					shapeList: [
+						{ 	name: 'a',
+							type: 'Rect',
+							shape: {},
+							style: {},
+							stateList: [
+								{ status: 'a1', style:{}, shape: {} },
+								{ status: 'a2', style:{}, shape: {} }
+							]
+						},
+						{ 	name: 'b',
+							type: 'Circle',
+							shape: {},
+							style: {},
+							stateList: [
+								{ status: 'b1', style:{}, shape: {} },
+								{ status: 'b2', style:{}, shape: {} }
+							]
+						},
+					],
+					stateList: [
+						{ status: 't1', shapeList: [[{name: 'a', status: 'a1'}, {name: 'b', status: 'b1'}], [{name: 'a', status: 'a2'}, {name: 'b', status: 'a2'}]], weight: 2, needDefault: false, loop: true },
+						{ status: 't2', shapeList: [[{name: 'a', status: 'a1'}, {name: 'b', status: 'b1'}], [{name: 'a', status: 'a2'}, {name: 'b', status: 'a2'}]], weight: 2, needDefault: false, lopp: false }
+					]
+				}
+			], {
 				elementList: [
 					{
 						code: '1',
+						name: 'a',
 						type: 'Rect',
 						shape: {
 							x: 100,
@@ -117,6 +145,7 @@ export default {
 					},
 					{
 						code: '2',
+						name: 'b',
 						type: 'Circle',
 						shape: {
 							cx: 100,
@@ -131,6 +160,38 @@ export default {
 					},
 					{
 						code: '3',
+						name: 'a',
+						type: 'Rect',
+						shape: {
+							x: 200,
+							y: 100,
+							width: 30,
+							height: 30
+						},
+						style: {
+							fill: 'red',
+							stroke: 'black'
+						},
+						composeCode: '100'
+					},
+					{
+						code: '4',
+						name: 'b',
+						type: 'Circle',
+						shape: {
+							cx: 200,
+							cy: 100,
+							r: 10,
+						},
+						style: {
+							fill: 'red',
+							stroke: 'black'
+						},
+						composeCode: '100'
+					},
+					{
+						code: '5',
+						name: 'c',
 						type: 'Droplet',
 						shape: {
 							cx: 300,
@@ -145,7 +206,8 @@ export default {
 						composeCode: ''
 					},
 					{
-						code: '4',
+						code: '6',
+						name: 'd',
 						type: 'Droplet',
 						shape: {
 							cx: 400,
@@ -165,6 +227,11 @@ export default {
 						code: '100',
 						type: 'Device',
 						elementCodes: ['1', '2']
+					},
+					{
+						code: '101',
+						type: 'Device',
+						elementCodes: ['3', '4']
 					}
 				]
 			}, {