修改代码逻辑

src/iscs_new/core/abstractShape.js

@@ -1,11 +1,12 @@
 import * as graphic from '../core/graphic';
+import Group from 'zrender/src/container/Group';
 import shapeRender from  '../constant/shapeRender';
 
 function shapeStyleBuilder(model) {
 	return {
 		subType: '__hover__',
 		...shapeRender,
-		...model,
+		code: model.code,
 		z: 9998,
 		cursor: 'pointer',
 		shape: {
@@ -23,12 +24,13 @@ function shapeStyleBuilder(model) {
 }
 
 // 图形抽象层
-class AbstractShape {
+class AbstractShape extends Group {
 	constructor({model, shapeType, shapeFactory}) {
+		super({...shapeRender, code: model.code, type: model.type});
 		this.model = model;
 		this.shapeType = shapeType;
 		this.shapeFactory = shapeFactory;
-		this.hightLightInstance = new graphic.Rect(shapeStyleBuilder(this.model));
+		this.instanceHightLight = new graphic.Rect(shapeStyleBuilder(this.model));
 	}
 
 	// 拖动
@@ -53,15 +55,9 @@ class AbstractShape {
 	// 解除绑定
 	uncouple() {}
 
-	// 获取包围框
-	getBoundingRect() {}
-
 	// 获取依赖图形
 	getDepShapes() {}
 
-	// 修改属性
-	attr() {}
-
 	// 设置状态
 	setState(state) {}
 }

src/iscs_new/draggable/Image.js

@@ -97,7 +97,7 @@ export default class ImageDraggable extends Group {
 			this.handle.e.target &&
 			this.offset) {
 			if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) {
-				const type = this.handle.e.target.model.type;
+				const type = this.handle.e.target.type;
 				const dx = Math.round(e.offsetX-this.offset.x);
 				const dy = Math.round(e.offsetY-this.offset.y);
 
@@ -113,7 +113,7 @@ export default class ImageDraggable extends Group {
 		if (this.target &&
 			this.handle.e.target &&
 			this.offset) {
-			const type = this.handle.e.target.model.type;
+			const type = this.handle.e.target.type;
 			const dx = Math.round(e.offsetX-this.offset.x);
 			const dy = Math.round(e.offsetY-this.offset.y);
 			this.setShape(...this.handle.normalizedDiff(dx, dy));

src/iscs_new/factory/compose.js

@@ -14,15 +14,14 @@ class Compose extends AbstractShape {
 	create() {
 		this.instance = new Group({
 			...shapeRender,
-			...this.option,
 			...this.model
 		});
 
 		this.model.elementCodes.forEach(code => {
 			const el = this.shapeFactory.getShapeByCode(code);
-			if (el.instance) {
+			if (el) {
-				this.shapeFactory.removeFromLayer(el.model.type, el.instance);
+				this.shapeFactory.removeFromLayer(el.type, el);
-				this.instance.add(el.instance);
+				this.instance.add(el);
 			}
 		})
 		this.instance.scale = this.model.scale;
@@ -30,6 +29,7 @@ class Compose extends AbstractShape {
 		this.instance.position = this.model.position;
 		this.instance.origin = utils.createOrigin(this.instance);
 		this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
+		this.add(this.instance);
 	}
 
 	// 拖动
@@ -67,8 +67,8 @@ class Compose extends AbstractShape {
 			const el = this.shapeFactory.getShapeByCode(code);
 			if (el &&
 				el.model) {
-				this.shapeFactory.removeFromLayer(el.model.type, el.instance);
+				this.shapeFactory.removeFromLayer(el.type, el);
-				this.instance.add(el.instance);
+				this.instance.add(el);
 				el.model.composeCode = this.model.code;
 				el.attr(el.model);
 			}
@@ -84,8 +84,8 @@ class Compose extends AbstractShape {
 			if (el &&
 				el.model &&
 				el.model.composeCode) {
-				this.instance.remove(el.instance);
+				this.instance.remove(el);
-				this.shapeFactory.addToLayer(el.model.type, el.instance);
+				this.shapeFactory.addToLayer(el.type, el);
 				el.model.composeCode = '';
 				el.attr(el.model);
 			}
@@ -102,11 +102,6 @@ class Compose extends AbstractShape {
 	getDepShapes() {
 		return this.model.elementCodes.reduce((shapes, code) => shapes.concat(this.shapeFactory.getShapeByCode(code).getDepShapes()), [this]);
 	}
-
-	// 获取包围框
-	getBoundingRect() {
-		return utils.createBoundingRect(this.instance);
-	}
 }
 
 export default Compose;

src/iscs_new/factory/element.js

@@ -32,7 +32,6 @@ class Element extends AbstractShape {
 
 			this.instance = new elementBuilder({
 				...shapeRender,
-				...this.option,
 				...this.model,
 				onmouseover,
 				onmousemove,
@@ -44,6 +43,7 @@ class Element extends AbstractShape {
 			this.instance.position = this.model.position;
 			this.instance.origin = utils.createOrigin(this.instance);
 			this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
+			this.add(this.instance);
 		}
 	}
 
@@ -85,6 +85,8 @@ class Element extends AbstractShape {
 			const index = compose.model.elementCodes.findIndex(this.model.code);
 			if (index < 0) {
 				compose.model.elementCodes.push(this.model.code);
+				this.shapeFactory.removeFormLayer(el.type, this);
+				compose.add(this);
 			}
 		}
 	}
@@ -100,6 +102,8 @@ class Element extends AbstractShape {
 			const index = compose.model.elementCodes.findIndex(this.model.code);
 			if (index >= 0) {
 				compose.model.elementCodes.splice(index, 1);
+				compose.remove(this);
+				this.shapeFactory.addToLayer(el.type, this);
 			}
 		}
 	}
@@ -113,12 +117,6 @@ class Element extends AbstractShape {
 	getDepShapes() {
 		return [this];
 	}
-
-
-	// 获取包围框
-	getBoundingRect() {
-		return utils.createBoundingRect(this.instance);
-	}
 }
 
 export default Element;

src/iscs_new/factory/index.js

@@ -130,17 +130,18 @@ class ShapeFactory extends Eventful {
 	}
 
 	storageShape(shape) {
-		if (shape && shape.model) {
+		console.log(shape);
-			this.mapShape[shape.model.code] = shape;
+		if (shape && shape.code) {
+			this.mapShape[shape.code] = shape;
 		}
 		return shape;
 	}
 
 	removeShape(shape) {
-		if (shape && shape.model) {
+		if (shape && shape.code) {
 			this.hideHightLight(shape);
 			shape.uncouple(shape);
-			delete this.mapShape[shape.model.code];
+			delete this.mapShape[shape.code];
 		}
 		return shape;
 	}
@@ -155,9 +156,9 @@ class ShapeFactory extends Eventful {
 
 	showHightLight(shape) {
 		const target = this.$controller.getTarget();
-		if (shape.hightLightInstance) {
+		if (shape.instanceHightLight) {
-			shape.hightLightInstance.setShape(shape.instance.getBoundingRect());
+			shape.instanceHightLight.setShape(shape.getBoundingRect())
-			this.$painter.addToLayer(shapeLayer.HightLight)(shape.hightLightInstance);
+			this.$painter.addToLayer(shapeLayer.HightLight)(shape.instanceHightLight);
 		}
 
 		if (target == shape) {
@@ -171,8 +172,8 @@ class ShapeFactory extends Eventful {
 
 	hideHightLight(shape) {
 		const target = this.$controller.getTarget();
-		if (shape.hightLightInstance) {
+		if (shape.instanceHightLight) {
-			this.$painter.removeFromLayer(shapeLayer.HightLight)(shape.hightLightInstance);
+			this.$painter.removeFromLayer(shapeLayer.HightLight)(shape.instanceHightLight);
 		}
 
 		if (target != shape) {

src/iscs_new/map.js

@@ -147,10 +147,9 @@ class JMap {
 
 	render(list=[]) {
 		list.forEach(({model, action}) => {
-			const updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action): model;
+			let updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action): model;
-			const shape = this.$shapeFactory.getShapeByCode(updateModel.code);
+			let curShape = this.$shapeFactory.getShapeByCode(updateModel.code);
-			const deps = shape.getDepShapes();
+			let deps = null;
-
 			let oldShape = null
 			let newShape = null;
 
@@ -163,21 +162,26 @@ class JMap {
 						this.$painter.add(newShape);
 						break;
 					case orders.DELETE:
-						oldShape = this.$shapeFactory.removeShape(shape);
+						deps = curShape.getDepShapes();
-						deps.forEach(shape => {
+						deps.forEach(el => {
-							this.$shapeFactory.updateSource(shape.model, {...action, shapeType: shape.option.shapeType});
+							updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(el, {...action, shapeType: el.shapeType}): el;
-							this.$painter.remove(shape);
+							if (updateModel) {
+								curShape = this.$shapeFactory.getShapeByCode(updateModel.code);
+								oldShape = this.$shapeFactory.removeShape(curShape);
+								this.$painter.remove(oldShape);
+							}
 						});
 						break;
 					case orders.UPDATE:
-						oldShape = this.$shapeFactory.removeShape(shape);
+						updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action): model;
+						oldShape = this.$shapeFactory.removeShape(curShape);
 						newShape = this.$shapeFactory.createShape(updateModel, action.shapeType);
 						this.$painter.remove(oldShape);
 						this.$shapeFactory.storageShape(newShape)
 						this.$painter.add(newShape);
 						break;
 					case orders.UNBINDING:
-						oldShape = this.$shapeFactory.removeShape(shape);
+						oldShape = this.$shapeFactory.removeShape(curShape);
 						this.$painter.remove(oldShape);
 						break;
 				}

src/iscs_new/painter.js

@@ -37,7 +37,6 @@ class Painter extends Group {
 		Object.keys(graphic).forEach(key => {
 			this.mapShapeLayer[key] = new Group({
 				name: `__${key}__`
-				// matrix.identity(matrix.create())
 			});
 		})
 
@@ -48,19 +47,19 @@ class Painter extends Group {
 	}
 
 	add(shape) {
-		if (shape && shape.instance) {
+		if (shape) {
-			this.addToLayer(shape.model.type)(shape.instance);
+			this.addToLayer(shape.type)(shape);
 		}
 	}
 
 	remove(shape) {
-		if (shape && shape.instance) {
+		if (shape) {
-			this.removeFromLayer(shape.model.type)(shape.instance);
+			this.removeFromLayer(shape.type)(shape);
 		}
 	}
 
 	update(shape) {
-		if (shape && shape.instance) {
+		if (shape) {
 			//
 		}
 	}

src/iscs_new/selectHandle.js

@@ -17,7 +17,7 @@ export default class SelectHandle {
 		if (e.target) {
 			this.e = {...e};
 			if (['Control'].includes(this.$controller.getKeyStr())) {
-				if (this.$controller.isSelected(e.target.model.code)) {
+				if (this.$controller.isSelected(e.target.code)) {
 					this.$controller.setTarget(null);
 					this.delSelected(e.target);
 				} else {
@@ -31,13 +31,13 @@ export default class SelectHandle {
 	}
 
 	addSelected(target) {
-		this.$controller.storage.set(target.model.code, target);
+		this.$controller.storage.set(target.code, target);
 		target.shapeFactory.showHightLight(target);
 	}
 
 	delSelected(target) {
 		target.shapeFactory.hideHightLight(target);;
-		this.$controller.storage.delete(target.model.code);
+		this.$controller.storage.delete(target.code);
 	}
 
 	clear() {
@@ -48,7 +48,7 @@ export default class SelectHandle {
 
 	createSelected(target) {
 		if (this.$map.draggle) {
-			switch (target.model.type) {
+			switch (target.type) {
 			case graphic.Line:
 				return new LineDraggable(this);
 			case graphic.Image:

src/iscs_new/selectingHandle.js

@@ -68,7 +68,7 @@ export default class SelectingHandle {
 	}
 
 	setSelected(target) {
-		this.$controller.storage.set(target.model.code, target);
+		this.$controller.storage.set(target.code, target);
 		target.shapeFactory.showHightLight(target);
 	}
 

src/iscs_new/transformHandle.js

@@ -15,7 +15,6 @@ export default class TransformHandle {
 
 	// 检查显隐
 	checkVisible(view) {
-		console.log(utils.createBoundingRectCheckVisible(view, this.transform).intersect(this.rect));
 		return utils.createBoundingRectCheckVisible(view, this.transform).intersect(this.rect);
 	}
 
@@ -40,7 +39,7 @@ export default class TransformHandle {
 
 	// 更新偏移量
 	updateTransform(opt) {
-		this.transform = utils.createTransform({scale: [opt.scaleRate, opt.scaleRate], position: [-opt.offsetX, -opt.offsetY], rotation: 0});
+		this.transform = utils.createTransform({scale: [opt.scaleRate, opt.scaleRate], position: [-opt.offsetX/opt.scaleRate, -opt.offsetY/opt.scaleRate], rotation: 0});
 		this.transformAll();
 	}
 

src/iscs_new/utils/utils.js

@@ -66,28 +66,19 @@ export function createBoundingRect(view) {
 	rect.y = rect.y * scaleY + offsetY;
 	rect.width = rect.width * scaleX;
 	rect.height = rect.height * scaleY;
-
-	// let x1, y1, x2, y2;
-	// [x1, y1] = view.transformCoordToLocal(rect.x, rect.y);
-	// [x2, y2] = view.transformCoordToLocal(rect.x + rect.width, rect.y + rect.height);
-	// return new BoundingRect(x1, y1, x2-x1, y2-y1);
-
 	return rect;
 }
 
 // 计算变化计算包围框
 export function createBoundingRectCheckVisible(view, transform) {
 	const rect = view.getBoundingRect();
-	const position = view.position;
-	const dx = position[0];
-	const dy = position[1];
 	const scaleX = transform[0];
 	const scaleY = transform[3];
 	const offsetX = transform[4];
 	const offsetY = transform[5];
 
-	rect.x = (rect.x + dx) * scaleX + offsetX;
+	rect.x = rect.x * scaleX + offsetX;
-	rect.y = (rect.y + dy) * scaleY + offsetY;
+	rect.y = rect.y * scaleY + offsetY;
 	rect.width = rect.width * scaleX;
 	rect.height = rect.height * scaleY;
 	return rect;

src/views/test/index.vue

@@ -151,7 +151,7 @@ export default {
 						name: 'b',
 						type: 'Circle',
 						scale: [1, 1],
-						position: [100, 0],
+						position: [0, 0],
 						rotation: 0,
 						shape: {
 							cx: 100,
@@ -245,8 +245,8 @@ export default {
 						name: 'a',
 						type: 'Rect',
 						scale: [1, 1],
-						position: [0, 0],
+						position: [100, 0],
-						rotation: Math.PI/4,
+						rotation: Math.PI/2,
 						shape: {
 							x: 100,
 							y: 100,
@@ -268,23 +268,26 @@ export default {
 						scale: [0.5, 0.5],
 						position: [100, 100],
 						rotation: Math.PI/2,
-						// composeCode: '1000',
+						composeCode: '1000',
 					},
 					{
 						code: '101',
 						type: 'Device',
 						elementCodes: ['3', '4'],
-						scale: [0.5, 0.5],
+						scale: [1, 1],
 						position: [200, 0],
 						rotation: 0,
-						// composeCode: '1000'
+						composeCode: '1000'
 					},
-					// {
+					{
-					// 	code: '1000',
+						code: '1000',
-					// 	type: 'Combine',
+						type: 'Device',
-					// 	elementCodes: ['100', '101'],
+						scale: [1, 1],
-					// 	composeCode: ''
+						position: [0, 0],
-					// }
+						rotation: 0,
+						elementCodes: ['100', '101'],
+						composeCode: ''
+					}
 				]
 			}, {
 				panEnable: true,