优化代码

src/iscs_new/controller.js

@@ -137,10 +137,6 @@ export default class Controller extends Eventful {
 		};
 	}
 
-	getKeyStr() {
-		return this._shortcuts;
-	}
-
 	isSpecialSubType(e) {
 		return ['__drag__', '__selecting__'].includes(e.subType);
 	}
@@ -340,6 +336,14 @@ export default class Controller extends Eventful {
 		this._locking = false;
 	}
 
+	getKeyStr() {
+		return this._shortcuts;
+	}
+
+	getTarget() {
+		return this._target;
+	}
+
 	setLocking(lock=false) {
 		this._locking = lock;
 	}

src/iscs_new/core/abstractShape.js

@@ -1,4 +1,25 @@
-import shapeType from '../constant/shapeType';
+import * as graphic from '../core/graphic';
+import shapeRender from  '../constant/shapeRender';
+
+function shapeStyleBuilder() {
+	return {
+		subType: '__hover__',
+		...shapeRender,
+		z: 9998,
+		silent: true,
+		shape: {
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		},
+		style: {
+			lineWidth: 1,
+			stroke: '#fff',
+			fill: 'rgba(200,200,200,0.3)'
+		}
+	}
+}
 
 // 图形抽象层
 class AbstractShape {
@@ -6,6 +27,7 @@ class AbstractShape {
 		this.model = model;
 		this.option = option;
 		this.shapeFactory = shapeFactory;
+		this.hightLightInstance = new graphic.Rect(shapeStyleBuilder());
 	}
 
 	// 拖动
@@ -27,8 +49,11 @@ class AbstractShape {
 	// 设置状态
 	setState(state) {}
 
-	// 销毁图形
+	// 绑定数据
-	destroy() {}
+	binding() {}
+
+	// 接触绑定
+	unbundling() {}
 
 	// 获取包围框
 	getBoundingRect() {}

src/iscs_new/dragHandle.js

@@ -27,18 +27,12 @@ export default class DragHandle {
 		e.dy = dy / scaleRate;
 
 		if (this._dragging) {
-			this.$controller.storage.values().forEach(dragTarget => {
+			// const size = this.$controller.storage.getClipboardSize();
-				if (dragTarget) {
+			this.$controller.storage.values().forEach(target => {
-					if (dragTarget.highLightInstance) {
+				if (target) {
-						this.$painter.removeFromLevel(shapeLayer.HightLight)(dragTarget.highLightInstance);
+					target.inactive();
-						dragTarget.highLightInstance = null;
+					target.draft(e);
-					}
+					target.active(target == this.$controller.getTarget());
-
-					dragTarget.inactive();
-
-					dragTarget.draft(e);
-
-					dragTarget.active();
 				}
 			});
 		}

src/iscs_new/factory/compose.js

@@ -1,10 +1,10 @@
 import AbstractShape from '../core/abstractShape';
 import shapeEvent from '../constant/shapeEvent';
-import BoundingRect from 'zrender/src/core/BoundingRect';
 
 class Compose extends AbstractShape {
 	constructor(args) {
 		super(args);
+		this.hightLightInstance.setShape(this.getBoundingRect());
 	}
 
 	// 拖动
@@ -18,16 +18,19 @@ class Compose extends AbstractShape {
 	}
 
 	// 设置高亮
-	active() {
+	active(selected=true) {
 		const unionRect = this.getBoundingRect();
 		if (unionRect) {
-			this.shapeFactory.trigger(shapeEvent.ShowHightLight, unionRect);
+			selected && this.shapeFactory.trigger(shapeEvent.ShowHightLight, unionRect);
 		}
+		this.hightLightInstance.setShape(this.getBoundingRect());
+		this.shapeFactory.showHightLight(this.hightLightInstance);
 	}
 
 	// 取消高亮
 	inactive() {
 		this.shapeFactory.trigger(shapeEvent.HideHightLight);
+		this.shapeFactory.hideHightLight(this.hightLightInstance);
 	}
 
 	// 设置获取焦点
@@ -41,8 +44,20 @@ class Compose extends AbstractShape {
 	// 设置状态
 	setState(state) {}
 
-	// 销毁图形
+	// 绑定数据
-	destroy() {
+	binding() {
+		this.model.elementCodes.forEach(code => {
+			const element = this.shapeFactory.getShapeByCode(code);
+			if (element &&
+				element.model) {
+				element.model.composeCode = this.model.code;
+				element.instance.attr(element.model)
+			}
+		})
+	}
+
+	// 接触绑定
+	unbundling() {
 		this.model.elementCodes.forEach(code => {
 			const element = this.shapeFactory.getShapeByCode(code);
 			if (element &&

src/iscs_new/factory/element.js

@@ -1,10 +1,13 @@
 import AbstractShape from '../core/abstractShape';
 import shapeEvent from '../constant/shapeEvent';
 import * as graphic from '../core/graphic';
+import shapeLayer from '../constant/shapeLayer';
+
 class Element extends AbstractShape {
 	constructor(args) {
 		super(args);
 		this.create();
+		this.hightLightInstance.setShape(this.getBoundingRect());
 	}
 
 	create() {
@@ -76,13 +79,16 @@ class Element extends AbstractShape {
 	}
 
 	// 设置高亮
-	active() {
+	active(selected=true) {
-		this.shapeFactory.trigger(shapeEvent.ShowHightLight, this.instance.getBoundingRect());
+		selected && this.shapeFactory.trigger(shapeEvent.ShowHightLight, this.instance.getBoundingRect());
+		this.hightLightInstance.setShape(this.getBoundingRect());
+		this.shapeFactory.showHightLight(this.hightLightInstance);
 	}
 
 	// 取消高亮
 	inactive() {
 		this.shapeFactory.trigger(shapeEvent.HideHightLight);
+		this.shapeFactory.hideHightLight(this.hightLightInstance);
 	}
 
 	// 设置获取焦点
@@ -96,8 +102,21 @@ class Element extends AbstractShape {
 	// 设置状态
 	setState(state) {}
 
-	// 销毁图形
+	// 绑定数据
-	destroy() {
+	binding() {
+		const compose = this.shapeFactory.getShapeByCode(this.model.composeCode);
+		if (compose &&
+			compose.model &&
+			compose.model.elementCodes) {
+			const index = compose.model.elementCodes.findIndex(this.model.code);
+			if (index < 0) {
+				compose.model.elementCodes.push(this.model.code);
+			}
+		}
+	}
+
+	// 接触绑定
+	unbundling() {
 		const compose = this.shapeFactory.getShapeByCode(this.model.composeCode);
 		if (compose &&
 			compose.model &&

src/iscs_new/factory/hightLightHandle.js

@@ -14,9 +14,9 @@ function shapeStyleBuilder() {
 			height: 0
 		},
 		style: {
-			lineDash: [4, 8],
+			lineDash: [3, 6],
 			lineWidth: 1,
-			stroke: '#fff',
+			stroke: '#000',
 			fill: 'transparent'
 		}
 	}

src/iscs_new/factory/index.js

@@ -8,6 +8,7 @@ import shapeType from '../constant/shapeType';
 import shapeRender from '../constant/shapeRender';
 import shapeEvent from '../constant/shapeEvent';
 import orders from '../utils/orders';
+import shapeLayer from '../constant/shapeLayer';
 
 const None = e => null;
 const shapeBuilderMap = {
@@ -104,6 +105,7 @@ class ShapeFactory extends Eventful {
 		const shapeBuilder = shapeBuilderMap[option.shapeType];
 		if (shapeBuilder) {
 			shape = new shapeBuilder({model, option, shapeFactory: this});
+			shape.binding();
 		}
 		return shape;
 	}
@@ -111,7 +113,7 @@ class ShapeFactory extends Eventful {
 	removeShape(shape) {
 		if (shape && shape.model) {
 			this.trigger(shapeEvent.HideHightLight);
-			shape.destroy();
+			shape.unbundling();
 			delete this.mapShape[shape.model.code];
 		}
 		return shape;
@@ -125,6 +127,18 @@ class ShapeFactory extends Eventful {
 		return null;
 	}
 
+	showHightLight(instance) {
+		this.$painter.addToLevel(shapeLayer.HightLight)(instance);
+	}
+
+	hideHightLight(instance) {
+		this.$painter.removeFromLevel(shapeLayer.HightLight)(instance);
+	}
+
+	isDrawing() {
+		this.$map.isDrawing();
+	}
+
 	getSource() {
 		return this.source;
 	}

src/iscs_new/map.js

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import * as utils from './utils/utils';
 import zrender from 'zrender';
 import events from './utils/events';
-import EventEmitter from './utils/eventEmitter';
+import Eventful from 'zrender/src/mixin/Eventful';
 import Painter from './painter';
 import Option from './option';
 import Controller from './controller';
@@ -43,6 +43,7 @@ class JMap {
 		const height = opts.dom.clientHeight;
 		const optionHandler = this.setOption.bind(this);
 
+		this.draw = opts.draw;
 		this.$zr = zrender.init(opts.dom, { renderer, devicePixelRatio, width, height, ...utils.deepClone(opts.config||{})});
 		this.$zr.dom.setAttribute('tabIndex', -1);
 		this.$zr.dom.style.cursor = 'auto';
@@ -53,18 +54,17 @@ class JMap {
 		this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()});
 		this.$painter.updateTransform(this.$option);
 
-		this.$eventEmitter = new EventEmitter(this);
+		this.$controller = new Controller(this);
+		this.$controller.enable();
+		this.$controller.on(this.events.__Pan, optionHandler);
+		this.$controller.on(this.events.__Zoom, optionHandler);
+
+		this.$eventEmitter = new Eventful(this);
 
 		this.$shapeFactory = new ShapeFactory(this);
 
 		this.$stateHandle = new StateHandle(this);
 
-		this.$controller = new Controller(this);
-		this.$controller.enable();
-
-		this.$controller.on(this.events.__Pan, optionHandler);
-		this.$controller.on(this.events.__Zoom, optionHandler);
-
 		this.disable = function() {
 			this.off(this.events.Pan, optionHandler);
 			this.off(this.events.Zoom, optionHandler);
@@ -82,7 +82,7 @@ class JMap {
 		this.$shapeFactory.parseTemplates(templates)
 
 		// 数据加载完成 回调
-		this.$eventEmitter.emit(events.DataLoaded);
+		this.$eventEmitter.trigger(events.DataLoaded);
 
 		// 初次渲染视图
 		this.repaint(source);
@@ -91,14 +91,14 @@ class JMap {
 		this.setDefaultState();
 
 		// 视图加载完成 回调
-		this.$eventEmitter.emit(events.ViewLoaded);
+		this.$eventEmitter.trigger(events.ViewLoaded);
 
 		// 返回视图缩放偏移
 		this.$option.trigger(this.$option);
 	}
 
 	setDefaultState() {
-		this.$eventEmitter.emit(events.StateLoaded);
+		this.$eventEmitter.trigger(events.StateLoaded);
 	}
 
 	setOption(opts={}) {
@@ -110,7 +110,7 @@ class JMap {
 		this.$controller.disable();
 		this.$controller.enable();
 
-		this.$eventEmitter.emit(events.OptionUpdate);
+		this.$eventEmitter.trigger(events.OptionUpdate);
 	}
 
 	setDragging(e) {
@@ -185,12 +185,12 @@ class JMap {
 			}
 		});
 
-		this.$eventEmitter.emit(events.ViewUpdate, list);
+		this.$eventEmitter.trigger(events.ViewUpdate, list);
 	}
 
 	update(list=[]) {
 		this.$painter.update(this.$stateHandle.update(list));
-		this.$eventEmitter.emit(events.StateUpdate, list);
+		this.$eventEmitter.trigger(events.StateUpdate, list);
 	}
 
 	pullBack(payload={}) {
@@ -260,6 +260,10 @@ class JMap {
 		this.$painter.refresh();
 	}
 
+	isDrawing() {
+		return this.draw;
+	}
+
 	clear() {
 		this.$shapeFactory.clear();
 		this.$controller.clear();
@@ -281,19 +285,19 @@ class JMap {
 		if (idx >= 0) {
 			switch (name) {
 			case events.DataLoaded:
-				this.$eventEmitter.emit.on(events.DataLoaded, cb, context);
+				this.$eventEmitter.on(events.DataLoaded, cb, context);
 				break;
 			case events.StateLoaded:
-				this.$eventEmitter.emit.on(events.StateLoaded, cb, context);
+				this.$eventEmitter.on(events.StateLoaded, cb, context);
 				break;
 			case events.ViewUpdate:
-				this.$eventEmitter.emit.on(events.ViewUpdate, cb, context);
+				this.$eventEmitter.on(events.ViewUpdate, cb, context);
 				break;
 			case events.StateUpdate:
-				this.$eventEmitter.emit.on(events.StateUpdate, cb, context);
+				this.$eventEmitter.on(events.StateUpdate, cb, context);
 				break;
 			case events.OptionUpdate:
-				this.$eventEmitter.emit.on(events.OptionUpdate, cb, context);
+				this.$eventEmitter.on(events.OptionUpdate, cb, context);
 				break;
 			case events.Reflect:
 				this.$controller.on(events.Reflect, _.throttle(cb, 200), context);
@@ -325,19 +329,19 @@ class JMap {
 		if (idx >= 0) {
 			switch (name) {
 			case events.DataLoaded:
-				this.$eventEmitter.emit.off(events.DataLoaded, cb, context);
+				this.$eventEmitter.off(events.DataLoaded, cb, context);
 				break;
 			case events.StateLoaded:
-				this.$eventEmitter.emit.off(events.StateLoaded, cb, context);
+				this.$eventEmitter.off(events.StateLoaded, cb, context);
 				break;
 			case events.ViewUpdate:
-				this.$eventEmitter.emit.off(events.ViewUpdate, cb, context);
+				this.$eventEmitter.off(events.ViewUpdate, cb, context);
 				break;
 			case events.StateUpdate:
-				this.$eventEmitter.emit.off(events.StateUpdate, cb, context);
+				this.$eventEmitter.off(events.StateUpdate, cb, context);
 				break;
 			case events.OptionUpdate:
-				this.$eventEmitter.emit.off(events.OptionUpdate, cb, context);
+				this.$eventEmitter.off(events.OptionUpdate, cb, context);
 				break;
 			case events.Reflect:
 				this.$controller.off(events.Reflect, _.throttle(cb, 200));

src/iscs_new/painter.js

@@ -82,6 +82,7 @@ class Painter extends Group {
 		return (view) => {
 			this.$transformHandle.transformView(view);
 			this.mapShapeLevel[name].add(view);
+			this.dirty();
 		}
 	}
 

src/iscs_new/selectHandle.js

@@ -31,13 +31,11 @@ export default class SelectHandle {
 
 	addSelected(target) {
 		this.$controller.storage.set(target.model.code, target);
-		console.log(this.$controller.storage.values());
+		target.active(target == this.$controller.getTarget());
-		target.active();
 	}
 
 	delSelected(target) {
 		target.inactive();
-		console.log('bug')
 		this.$controller.storage.delete(target.model.code);
 	}
 

src/iscs_new/selectingHandle.js

@@ -1,7 +1,6 @@
 import * as graphic from './core/graphic.js';
 import shapeRender from  './constant/shapeRender';
 import shapeLayer from './constant/shapeLayer';
-import shapeType from './constant/shapeType.js';
 
 function shapeStyleBuilder() {
 	return {
@@ -21,6 +20,7 @@ function shapeStyleBuilder() {
 		}
 	}
 }
+
 export default class SelectingHandle {
 	constructor(map, controller) {
 		this.$map = map;
@@ -58,10 +58,10 @@ export default class SelectingHandle {
 		const selectingRect = this.selecting.getBoundingRect();
 		Object.values(this.$map.getMapShape()).forEach(el => {
 			if (el.model && this.checkSelectingRectContainShape(selectingRect, el)) {
-				console.log(1111111);
 				if (!el.model.composeCode) {
 					this.setSelected(el);
 					this.$controller.setLocking(true);
+					// el.inactive();
 				}
 			}
 		});
@@ -71,8 +71,8 @@ export default class SelectingHandle {
 	}
 
 	setSelected(target) {
-		target.active();
 		this.$controller.storage.set(target.model.code, target);
+		target.active(target == this.$controller.getTarget());
 	}
 
 	clear() {
@@ -81,7 +81,11 @@ export default class SelectingHandle {
 
 	checkSelectingRectContainShape(rect, shape) {
 		const shapeRect = shape.getBoundingRect();
-		return shapeRect? rect.intersect(shapeRect): false;
+		if (shapeRect) {
+			return rect.contain(shapeRect.x, shapeRect.y) &&
+				rect.contain(shapeRect.x+shapeRect.width, shapeRect.y+shapeRect.height);
+		}
+		return false;
 	}
 
 	normalizedArea(begin, end) {

src/iscs_new/utils/eventEmitter.js

@@ -1,34 +0,0 @@
-class EventEmitter {
-	constructor() {
-		this.list = {};
-	}
-
-	on(event, fn, context) {
-		(this.list[event]||(this.list[event] = [])).push({fn, context});
-		return this;
-	}
-
-	emit(event, ...args) {
-		let fns = this.list[event]||[];
-		if (fns.length === 0) {
-			return false;
-		}
-
-		fns.forEach(({fn, context}) => {
-			fn.apply(context, arguments);
-		});
-
-		return this;
-	}
-
-	off(event, fn) {
-		const fns = this.list[event]||[];
-		const index = fns.findIndex(el => el.fb == fn);
-		if (index >= 0) {
-			fns.splice(index, 1);
-		}
-		return this;
-	}
-}
-
-export default EventEmitter;

src/iscs_new/utils/events.js

@@ -6,7 +6,6 @@ export default {
 	Keydown: 'keydown',
 	Keyup: 'keyup',
 	Keypress: 'keypress',
-
 	DataLoaded: 'dataLoaded',
 	ViewLoaded: 'viewLoaded',
 	StateLoaded: 'stateLoaded',

src/views/test/index.vue

@@ -84,6 +84,7 @@ export default {
             this.$iscs = new Iscs({
                 dom: document.getElementById(this.iscsId),
                 config: {
+                    draw: true,
                     renderer: 'canvas',
                     width: this.width,
                     height: this.height