优化代码

src/iscs_new/constant/shapeLayer.js

@@ -1,5 +1,5 @@
 export default {
 	HightLight: `__hightLight__`,
-	SelectIng: `___selecting__`,
+	Selecting: `___selecting__`,
 	Tips: `__tips__`,
 }

src/iscs_new/controller.js

@@ -10,13 +10,13 @@ import events from './utils/events';
 class MouseEvent {
 	constructor(controller, e) {
 		const shapeFactory = controller.$map.getShapeFactory();
-		const view = e.target;
+		const shape = e.target;
 		this.clientX = e.event.clientX;
 		this.clientY = e.event.clientY;
 
-		if (view && !['__selecting__', '__drag__'].includes(view.subType)) {
-			if (view.code) {
-				let composeCode = view.composeCode;
+		if (shape && !['__selecting__', '__drag__'].includes(shape.subType)) {
+			if (shape.code) {
+				let composeCode = shape.composeCode;
 				let compose = null;
 
 				while(composeCode) {
@@ -24,15 +24,15 @@ class MouseEvent {
 					composeCode = compose.model.composeCode;
 				}
 
-				this.code = compose? compose.model.code: view.code;
+				this.code = compose? compose.model.code: shape.code;
 			}
 
-			if (view.subType) {
-				this.subType = view.subType;
+			if (shape.subType) {
+				this.subType = shape.subType;
 			}
 
-			if (view.val) {
-				this.val = view.val;
+			if (shape.val) {
+				this.val = shape.val;
 			}
 		}
 	}
@@ -184,19 +184,19 @@ export default class Controller extends Eventful {
 		zr.dom.focus();
 		this._isNotLeftMouse = eventTool.isMiddleOrRightButtonOnMouseUpDown(e);
 		this.trigger(events.Selected, this._target);
+		this.selectingHandle.clear();
 
 		if (this._isNotLeftMouse) {
 			this.setCursorStyle('grab');
 		} else {
-			this.selectingHandle.clear(e);
 			if (this.isSpecialSubType(event)) { return; }
-			if (this._areaSelectEnable) {
-				this.trigger(this.events.__SelectStart, { x: e.offsetX, y: e.offsetY});
-			}
-
 			if (this._dragEnable) {
 				this.trigger(this.events.__DragStart, { x: e.offsetX, y: e.offsetY, code: event.code });
 			}
+
+			if (this._areaSelectEnable) {
+				this.trigger(this.events.__SelectStart, { x: e.offsetX, y: e.offsetY});
+			}
 		}
 	}
 
@@ -212,7 +212,7 @@ export default class Controller extends Eventful {
 
 		if (this._isNotLeftMouse) {
 			if (this._panEnable) {
-				if (dx**2+dy**2 > 8) {
+				if (dx**2 + dy**2 > 8) {
 					this._pan = true;
 				}
 				this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
@@ -220,6 +220,7 @@ export default class Controller extends Eventful {
 			}
 		} else {
 			if (this._dragEnable && this.dragHandle.isDragging()) {
+				this.selectingHandle.clear();
 				if (this.limitDrag({dx, dy})) {
 					this.trigger(this.events.__Dragging, { dx, dy });
 					if (this._reflectEnable) {
@@ -241,17 +242,16 @@ export default class Controller extends Eventful {
 			this._isNotLeftMouse = false;
 			this.setCursorStyle('auto');
 		} else {
-			if (this._dragEnable && this.dragHandle.isDragging()) {
-				this.trigger(this.events.__DragEnd, {x: e.offsetX, y: e.offsetY});
-			}
-
-			if (this._areaSelectEnable && this.selectingHandle.isSelecting()) {
-				this.trigger(this.events.__SelectEnd, { x: e.offsetX, y: e.offsetY });
-			}
-
 			if (this._selectEnable && target) {
 				this.trigger(this.events.__Selected, { target });
 			}
+
+			if (this._dragEnable && this.dragHandle.isDragging()) {
+				this.selectingHandle.clear();
+				this.trigger(this.events.__DragEnd, {x: e.offsetX, y: e.offsetY});
+			} else if (this._areaSelectEnable && this.selectingHandle.isSelecting()) {
+				this.trigger(this.events.__SelectEnd, { x: e.offsetX, y: e.offsetY });
+			}
 		}
 		this._target = null;
 	}

src/iscs_new/factory/compose.js

@@ -20,7 +20,7 @@ class Compose extends AbstractShape {
 		this.model.elementCodes.forEach(code => {
 			const el = this.shapeFactory.getShapeByCode(code);
 			if (el) {
-				this.shapeFactory.removeFromLayer(el.type, el);
+				this.shapeFactory.removeFromLayer(el.type)(el);
 				this.instance.add(el);
 			}
 		})
@@ -67,7 +67,7 @@ class Compose extends AbstractShape {
 			const el = this.shapeFactory.getShapeByCode(code);
 			if (el &&
 				el.model) {
-				this.shapeFactory.removeFromLayer(el.type, el);
+				this.shapeFactory.removeFromLayer(el.type)(el);
 				this.instance.add(el);
 				el.model.composeCode = this.model.code;
 				el.attr(el.model);
@@ -85,7 +85,7 @@ class Compose extends AbstractShape {
 				el.model &&
 				el.model.composeCode) {
 				this.instance.remove(el);
-				this.shapeFactory.addToLayer(el.type, el);
+				this.shapeFactory.addToLayer(el.type)(el);
 				el.model.composeCode = '';
 				el.attr(el.model);
 			}

src/iscs_new/factory/element.js

@@ -103,7 +103,7 @@ class Element extends AbstractShape {
 			if (index >= 0) {
 				compose.model.elementCodes.splice(index, 1);
 				compose.remove(this);
-				this.shapeFactory.addToLayer(el.type, this);
+				this.shapeFactory.addToLayer(el.type)(this);
 			}
 		}
 	}

src/iscs_new/factory/index.js

@@ -130,7 +130,6 @@ class ShapeFactory extends Eventful {
 	}
 
 	storageShape(shape) {
-		console.log(shape);
 		if (shape && shape.code) {
 			this.mapShape[shape.code] = shape;
 		}
@@ -194,12 +193,12 @@ class ShapeFactory extends Eventful {
 		this.$painter.removeFromLayer(shapeLayer.HightLight)(this.border);
 	}
 
-	addToLayer(level, view) {
-		return this.$painter.addToLayer(level)(view);
+	addToLayer(level) {
+		return shape => this.$painter.addToLayer(level)(shape);
 	}
 
-	removeFromLayer(level, view) {
-		return this.$painter.removeFromLayer(level)(view);
+	removeFromLayer(level) {
+		return shape => this.$painter.removeFromLayer(level)(shape);
 	}
 
 	isDrawing() {

src/iscs_new/painter.js

@@ -25,7 +25,7 @@ class Painter extends Group {
 		this.$zr.add(this);
 
 		// 创建select图层
-		this.mapShapeLayer[shapeLayer.SelectIng] = new Group({ name: shapeLayer.SelectIng });
+		this.mapShapeLayer[shapeLayer.Selecting] = new Group({ name: shapeLayer.Selecting });
 
 		// 创建hover图层
 		this.mapShapeLayer[shapeLayer.HightLight] = new Group({ name: shapeLayer.HightLight });
@@ -74,16 +74,16 @@ class Painter extends Group {
 
 	addToLayer(name) {
 		name = Object.keys(graphic).includes(name)? name: `Group`;
-		return (view) => {
-			this.mapShapeLayer[name].add(view);
-			this.$transformHandle.visibleView(view);
+		return (shape) => {
+			this.mapShapeLayer[name].add(shape);
+			this.$transformHandle.visibleView(shape);
 		}
 	}
 
 	removeFromLayer(name) {
 		name = Object.keys(graphic).includes(name)? name: `Group`;
-		return (view) => {
-			this.mapShapeLayer[name].remove(view);
+		return (shape) => {
+			this.mapShapeLayer[name].remove(shape);
 		}
 	}
 

src/iscs_new/selectHandle.js

@@ -16,15 +16,17 @@ export default class SelectHandle {
 	onSelected(e) {
 		if (e.target) {
 			this.e = {...e};
-			if (['Control'].includes(this.$controller.getKeyStr())) {
+			if ([`Control`].includes(this.$controller.getKeyStr())) {
 				if (this.$controller.isSelected(e.target.code)) {
 					this.$controller.setTarget(null);
 					this.delSelected(e.target);
 				} else {
 					this.addSelected(e.target);
 				}
+			} else if (!this.$controller.storage.has(e.target.code)){
+ 				this.clear();
+				this.addSelected(e.target);
 			} else {
-				this.clear();
 				this.addSelected(e.target);
 			}
 		}

src/iscs_new/selectingHandle.js

@@ -40,7 +40,7 @@ export default class SelectingHandle {
 
 	onSelectStart(e) {
 		this.selecting.setShape({ x: e.x, y: e.y, width: 0, height: 0 });
-		this.$painter.addToLayer(shapeLayer.SelectIng)(this.selecting);
+		this.$painter.addToLayer(shapeLayer.Selecting)(this.selecting);
 		this.begPoint = { x: e.x, y: e.y };
 		this.endPoint = null;
 	}
@@ -48,13 +48,13 @@ export default class SelectingHandle {
 	onSelecting(e) {
 		this.endPoint = { x: e.x, y: e.y };
 		this.selecting.setShape(this.normalizedArea(this.begPoint, this.endPoint));
-		this.$painter.addToLayer(shapeLayer.SelectIng)(this.selecting);
+		this.$painter.addToLayer(shapeLayer.Selecting)(this.selecting);
 	}
 
 	onSelectEnd(e) {
 		this.endPoint = { x: e.x, y: e.y };
 		this.selecting.setShape(this.normalizedArea(this.begPoint, this.endPoint));
-		this.$painter.addToLayer(shapeLayer.SelectIng)(this.selecting);
+		this.$painter.addToLayer(shapeLayer.Selecting)(this.selecting);
 
 		const selectingRect = this.selecting.getBoundingRect();
 		Object.values(this.$map.getMapShape()).forEach(el => {
@@ -64,7 +64,6 @@ export default class SelectingHandle {
 		});
 
 		this.clear();
-		this.begPoint = this.endPoint = null;
 	}
 
 	setSelected(target) {
@@ -73,7 +72,9 @@ export default class SelectingHandle {
 	}
 
 	clear() {
-		this.$painter.removeFromLayer(shapeLayer.SelectIng)(this.selecting);
+		this.$painter.removeFromLayer(shapeLayer.Selecting)(this.selecting);
+		this.selecting.setShape({ x: 0, y: 0, width: 0, height: 0 });
+		this.begPoint = this.endPoint = null;
 	}
 
 	checkSelectingRectContainShape(rect, shape) {

src/iscs_new/stateHandle.js

@@ -5,21 +5,26 @@ export default class StateHandle {
 	}
 
 	parse(shapeFactory, state)  {
+		console.log(shapeFactory, state);
 		return state;
 	}
 
 	update(shapeFactory, states=[]) {
-		return [
-			...this.updateState(states.map(state => this.parse(shapeFactory, state))),
-			...this.updateState(states.map(state => this.parse(shapeFactory, state)))
-		];
+		return states.reduce((list,state) => {
+			return [
+				...list,
+				this.parse(shapeFactory, state), // 测试只有自身
+				// this.updateState(this.parse(shapeFactory, state)), // 处理自身
+				// this.updateState(this.parse(shapeFactory, state))  // 处理依赖
+			];
+		}, []);
 	}
 
-	updateState(states=[]) {
-		return []
+	updateState(state={}) {
+		return {}
 	}
 
-	updateDepState(states=[]) {
-		return []
+	updateDepState(state={}) {
+		return {}
 	}
 }

src/iscs_new/transformHandle.js

@@ -14,22 +14,22 @@ export default class TransformHandle {
 	}
 
 	// 检查显隐
-	checkVisible(view) {
-		return utils.createBoundingRectCheckVisible(view, this.transform).intersect(this.rect);
+	checkVisible(shape) {
+		return utils.createBoundingRectCheckVisible(shape, this.transform).intersect(this.rect);
 	}
 
 	// 重新计算显隐
-	visibleView(view) {
+	visibleView(shape) {
 		let visible = false;
-		if (this.checkVisible(view)) {
-			view.show();
+		if (this.checkVisible(shape)) {
+			shape.show();
 			visible = true;
 		} else {
-			view.hide();
+			shape.hide();
 			visible = false;
 		}
 
-		view.dirty();
+		shape.dirty();
 	}
 
 	// 缩放/平移图层
@@ -52,8 +52,8 @@ export default class TransformHandle {
 	// 遍历view执行回调
 	traverse(cb, context) {
 		this.traverseLayer(layer => {
-			layer.eachChild(view => {
-				cb.call(context, view);
+			layer.eachChild(shape => {
+				cb.call(context, shape);
 			})
 		}, context)
 	}

src/iscs_new/utils/utils.js

@@ -55,12 +55,12 @@ export function createTransform({scale=[1,1], position=[0,0], rotation=0}) {
 }
 
 // 计算自身缩放和偏移后的包围框
-export function createBoundingRect(view) {
-	const rect = view.getBoundingRect().clone();
-	const scaleX = view.scale[0];
-	const scaleY = view.scale[1];
-	const offsetX = view.position[0];
-	const offsetY = view.position[1];
+export function createBoundingRect(shape) {
+	const rect = shape.getBoundingRect().clone();
+	const scaleX = shape.scale[0];
+	const scaleY = shape.scale[1];
+	const offsetX = shape.position[0];
+	const offsetY = shape.position[1];
 
 	rect.x = rect.x * scaleX + offsetX;
 	rect.y = rect.y * scaleY + offsetY;
@@ -70,8 +70,8 @@ export function createBoundingRect(view) {
 }
 
 // 计算变化计算包围框
-export function createBoundingRectCheckVisible(view, transform) {
-	const rect = view.getBoundingRect();
+export function createBoundingRectCheckVisible(shape, transform) {
+	const rect = shape.getBoundingRect();
 	const scaleX = transform[0];
 	const scaleY = transform[3];
 	const offsetX = transform[4];
@@ -85,8 +85,8 @@ export function createBoundingRectCheckVisible(view, transform) {
 }
 
 // 计算图形的旋转中心
-export function createOrigin(view) {
-	const rect = view.getBoundingRect();
+export function createOrigin(shape) {
+	const rect = shape.getBoundingRect();
 	return [rect.x + rect.width/2, rect.y + rect.height/2];
 }