提交代码

src/iscs_new/core/abstractShape.js

@@ -32,7 +32,7 @@ class AbstractShape {
 	}
 
 	// 拖动
-	draft({dx, dy}) {
+	drift({dx, dy}) {
 	}
 
 	// 设置高亮

src/iscs_new/dragHandle.js

@@ -30,7 +30,7 @@ export default class DragHandle {
 			this.$controller.storage.values().forEach(target => {
 				if (target) {
 					target.shapeFactory.hideHightLight(target);;
-					target.draft(e);
+					target.drift(e);
 					target.shapeFactory.showHightLight(target);
 				}
 			});

src/iscs_new/draggable/Image.js

@@ -2,6 +2,7 @@
 import _ from 'lodash';
 import * as graphic from '../core/graphic';
 import * as eventTool from 'zrender/src/core/event';
+import Group from 'zrender/src/container/Group';
 import shapeRender from  '../constant/shapeRender';
 
 function shapeStyleBuilder({shape}) {
@@ -18,7 +19,7 @@ function shapeStyleBuilder({shape}) {
 		}
 	}
 }
-export default class ImageDraggable extends graphic.Group {
+export default class ImageDraggable extends Group {
 	constructor(handle, draggle=false) {
 		super();
 		this.draggle = draggle;

src/iscs_new/factory/compose.js

@@ -1,23 +1,43 @@
-import AbstractShape from '../core/abstractShape';
-import shapeEvent from '../constant/shapeEvent';
 import * as utils from '../utils/utils';
+import * as graphic from '../core/graphic';
+import Group from 'zrender/src/container/Group';
+import AbstractShape from '../core/abstractShape';
+import shapeRender from '../constant/shapeRender';
+import shapeEvent from '../constant/shapeEvent';
 
 class Compose extends AbstractShape {
 	constructor(args) {
 		super(args);
+		this.create();
 		this.hightLightInstance.setShape(this.getBoundingRect());
 	}
 
 	create() {
-		// this.instance = new Group({});
+		this.instance = new Group({
+			...shapeRender,
+			...this.option,
+			...this.model,
+			shapeInstance: this,
+		});
+
+		// this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation});
+		this.model.elementCodes.forEach(code => {
+			const el = this.shapeFactory.getShapeByCode(code);
+			if (el.instance) {
+				this.shapeFactory.removeFromLevel(el.model.type, el.instance);
+				this.instance.add(el.instance);
+			}
+		})
+
+		this.instance.dirty();
 	}
 
 	// 拖动
-	draft({dx, dy}) {
+	drift({dx, dy}) {
 		this.model.elementCodes.forEach(code => {
 			const el = this.shapeFactory.getShapeByCode(code);
 			if (el) {
-				el.draft({dx, dy});
+				el.drift({dx, dy});
 			}
 		})
 	}
@@ -50,11 +70,11 @@ class Compose extends AbstractShape {
 			if (el &&
 				el.model) {
 				el.model.composeCode = this.model.code;
-				el.attr(el.model)
+				this.shapeFactory.removeFromLevel(el.model.type, el.instance);
+				this.instance.add(el.instance);
+				el.attr(el.model);
 			}
 		})
-
-
 	}
 
 	// 解除绑定
@@ -67,6 +87,8 @@ class Compose extends AbstractShape {
 				el.model &&
 				el.model.composeCode) {
 				el.model.composeCode = '';
+				this.remove(el.instance);
+				this.shapeFactory.addToLevel(el.model.type, el.instance);
 				el.attr(el.model);
 			}
 		})

src/iscs_new/factory/element.js

@@ -2,6 +2,7 @@ import AbstractShape from '../core/abstractShape';
 import shapeEvent from '../constant/shapeEvent';
 import * as graphic from '../core/graphic';
 import * as utils from '../utils/utils';
+import shapeRender from '../constant/shapeRender';
 import shapeLayer from '../constant/shapeLayer';
 
 class Element extends AbstractShape {
@@ -29,6 +30,7 @@ class Element extends AbstractShape {
 			}
 
 			this.instance = new elementBuilder({
+				...shapeRender,
 				...this.option,
 				...this.model,
 				shapeInstance: this,
@@ -40,7 +42,7 @@ class Element extends AbstractShape {
 	}
 
 	// 拖动
-	draft({dx, dy}) {
+	drift({dx, dy}) {
 		// const scale = this.instance._scale||[1,1];
 		// const position = this.instance._position||[0,0];
 

src/iscs_new/factory/index.js

@@ -66,6 +66,7 @@ class ShapeFactory extends Eventful {
 		this.$map = map;
 		this.$painter = map.getPainter();
 		this.$controller = map.getController();
+		this.$zr = map.getZr();
 
 		this.border = new graphic.Rect(shapeStyleBuilder());
 
@@ -107,11 +108,11 @@ class ShapeFactory extends Eventful {
 		try {
 			this.source = source;
 			zrUtil.each(source.elementList ||[], model => {
-				walk(this.storageShape(this.createShape(model, {...shapeRender, shapeType: shapeType.Element})));
+				walk(this.storageShape(this.createShape(model, {shapeType: shapeType.Element})));
 			}, this);
 
 			zrUtil.each(source.composeList ||[], model => {
-				this.storageShape(this.createShape(model, {...shapeRender, shapeType: shapeType.Compose}));
+				walk(this.storageShape(this.createShape(model, {shapeType: shapeType.Compose})));
 			}, this);
 		} catch (error) {
 			console.error('[ERROR] ', error);
@@ -152,46 +153,54 @@ class ShapeFactory extends Eventful {
 		return null;
 	}
 
-	showHightLight(instance) {
+	showHightLight(shape) {
 		const target = this.$controller.getTarget();
-		if (instance.hightLightInstance) {
-			instance.hightLightInstance.setShape(instance.getBoundingRect());
-			this.$painter.addToLevel(shapeLayer.HightLight)(instance.hightLightInstance);
+		if (shape.hightLightInstance) {
+			shape.hightLightInstance.setShape(shape.getBoundingRect());
+			this.$painter.addToLevel(shapeLayer.HightLight)(shape.hightLightInstance);
 		}
 
-		if (target == instance) {
-			this.showBorder(instance);
+		if (target == shape) {
+			this.showBorder(shape);
 		}
 
-		instance.attr({ z: shapeRender.z + 9 })
+		shape.attr({ z: shapeRender.z + 9 })
 
-		instance.active();
+		shape.active();
 	}
 
-	hideHightLight(instance) {
+	hideHightLight(shape) {
 		const target = this.$controller.getTarget();
-		if (instance.hightLightInstance) {
-			this.$painter.removeFromLevel(shapeLayer.HightLight)(instance.hightLightInstance);
+		if (shape.hightLightInstance) {
+			this.$painter.removeFromLevel(shapeLayer.HightLight)(shape.hightLightInstance);
 		}
 
-		if (target != instance) {
-			this.hideBorder(instance);
+		if (target != shape) {
+			this.hideBorder(shape);
 		}
 
-		instance.attr({ z: shapeRender.z })
+		shape.attr({ z: shapeRender.z })
 
-		instance.inactive();
+		shape.inactive();
 	}
 
-	showBorder(instance) {
-		this.border.setShape(instance.getBoundingRect());
+	showBorder(shape) {
+		this.border.setShape(shape.getBoundingRect());
 		this.$painter.addToLevel(shapeLayer.HightLight)(this.border);
 	}
 
-	hideBorder(instance) {
+	hideBorder(shape) {
 		this.$painter.removeFromLevel(shapeLayer.HightLight)(this.border);
 	}
 
+	addToLevel(level, view) {
+		return this.$painter.addToLevel(level)(view);
+	}
+
+	removeFromLevel(level, view) {
+		return this.$painter.removeFromLevel(level)(view);
+	}
+
 	isDrawing() {
 		this.$map.isDrawing();
 	}

src/iscs_new/map.js

@@ -157,7 +157,7 @@ class JMap {
 				switch(action.order) {
 					case orders.BINDING:
 					case orders.ADD:
-						newShape = this.$shapeFactory.createShape(updateModel, {...shapeRender, ...action});
+						newShape = this.$shapeFactory.createShape(updateModel, action);
 						this.$shapeFactory.storageShape(newShape)
 						this.$painter.add(newShape);
 						break;
@@ -170,7 +170,7 @@ class JMap {
 						break;
 					case orders.UPDATE:
 						oldShape = this.$shapeFactory.removeShape(shape);
-						newShape = this.$shapeFactory.createShape(updateModel, {...shapeRender, ...action});
+						newShape = this.$shapeFactory.createShape(updateModel, action);
 						this.$painter.remove(oldShape);
 						this.$shapeFactory.storageShape(newShape)
 						this.$painter.add(newShape);

src/iscs_new/painter.js

@@ -71,6 +71,7 @@ class Painter extends Group {
 	}
 
 	addToLevel(name) {
+		name = Object.keys(graphic).includes(name)? name: `Group`;
 		return (view) => {
 			this.mapShapeLevel[name].add(view);
 			this.$transformHandle.transformView(view);
@@ -79,6 +80,7 @@ class Painter extends Group {
 	}
 
 	removeFromLevel(name) {
+		name = Object.keys(graphic).includes(name)? name: `Group`;
 		return (view) => {
 			this.mapShapeLevel[name].remove(view);
 		}

src/iscs_new/transformHandle.js

@@ -1,5 +1,5 @@
 import * as utils from './utils/utils';
-import * as matrix from 'zrender/src/core/matrix';
+
 export default class TransformHandle {
 	constructor(painter) {
 		this.$painter = painter;
@@ -33,11 +33,7 @@ export default class TransformHandle {
 	// 视图进行缩放/平移
 	transformView(view) {
 		if (view) {
-			view.transform = matrix.mul(
-				matrix.create(),
-				matrix.copy(matrix.create(), this.transform),
-				utils.createTransform({scale: view.scale, position: view.position, rotation: view.rotation}),
-			);
+			view.transform = this.transform;
 			view.decomposeTransform();
 			this.visibleView(view);
 		}

src/views/test/index.vue

@@ -131,8 +131,6 @@ export default {
 						code: '1',
 						name: 'a',
 						type: 'Rect',
-						// scale: [0.5, 0.5],
-						// _position: [100, 0],
 						shape: {
 							x: 100,
 							y: 100,
@@ -149,8 +147,6 @@ export default {
 						code: '2',
 						name: 'b',
 						type: 'Circle',
-						// scale: [0.5, 0.5],
-						// position: [100, 0],
 						shape: {
 							cx: 100,
 							cy: 100,
@@ -197,7 +193,6 @@ export default {
 						code: '5',
 						name: 'c',
 						type: 'Droplet',
-						// scale: [0.5, 0.5],
 						shape: {
 							cx: 300,
 							cy: 200,
@@ -232,20 +227,21 @@ export default {
 						code: '100',
 						type: 'Device',
 						elementCodes: ['1', '2'],
-						composeCode: '1000',
+						// scale: [0.5, 0.5]
+						// composeCode: '1000',
 					},
 					{
 						code: '101',
 						type: 'Device',
 						elementCodes: ['3', '4'],
-						composeCode: '1000'
+						// composeCode: '1000'
 					},
-					{
-						code: '1000',
-						type: 'Combine',
-						elementCodes: ['100', '101'],
-						composeCode: ''
-					}
+					// {
+					// 	code: '1000',
+					// 	type: 'Combine',
+					// 	elementCodes: ['100', '101'],
+					// 	composeCode: ''
+					// }
 				]
 			}, {
 				panEnable: true,