增加 新iscs_new 功能

src/iscs_new/config/defaultStyle.js

@@ -1,39 +1,39 @@
-export default class highlightStyle {
+const defaultStyle = {
-	constructor() {
 		/** 透明填充 颜色*/
-		this.transparentColor = 'transparent';
+		transparentColor : 'transparent',
 
 		/** 默认背景 颜色*/
-		this.backgroundColor = '#000000';
+		backgroundColor : '#000000',
 
 		/** 默认字体 族类*/
-		this.fontFamily = '黑体,Times New Roman';
+		fontFamily : '黑体,Times New Roman',
 
 		/** 默认字体 大小*/
-		this.fontSize = 12;
+		fontSize : 12,
 
 		/** 文字高亮颜色*/
-		this.textHover2Color = '#6000ff';
+		textHover2Color : '#6000ff',
 
 		/** 线条高亮颜色*/
-		this.lineHover2Color = '#ffff00';
+		lineHover2Color : '#ffff00',
 
 		/** Svg高亮颜色*/
-		this.svgHover2Color = '#62ff00';
+		svgHover2Color : '#62ff00',
 
 		/** 图片高亮遮罩*/
-		this.maskHover2Image = '';
+		maskHover2Image : '',
 
 		/** 选中透明度*/
-		this.maskOpacity = 0.8;
+		maskOpacity : 0.8,
 
 		/** 提亮度*/
-		this.liftLevel = 0.5;
+		liftLevel : 0.5,
 
 		/** 边框宽度*/
-		this.borderWidth = 2;
+		borderWidth : 1,
 
 		/** 边框颜色*/
-		this.borderColor = '#fff';
+		borderColor : '#000'
-	}
 }
+
+export default defaultStyle;

src/iscs_new/constant/shapeEvent.js

@@ -0,0 +1,6 @@
+export default {
+	ShowHightLight: 'showHightLight',
+	HideHightLight: 'hideHightLight',
+	ShowTips: 'showTips',
+	HideTips: 'hideTips'
+}

src/iscs_new/constant/shapeLayer.js

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

src/iscs_new/controller.js

@@ -1,11 +1,11 @@
 import * as eventTool from 'zrender/src/core/event';
-import * as utils from './utils/utils.js';
+import Storage from './utils/storage';
-import Storage from './utils/Storage';
 import Eventful from 'zrender/src/mixin/Eventful';
 import DragHandle from './dragHandle';
 import SelectingHandle from './selectingHandle';
 import SelectHandle from './selectHandle';
 import KeyBoardHandle from './keyboardHandle';
+import events from './utils/events';
 
 class MouseEvent {
 	constructor(e) {
@@ -14,7 +14,7 @@ class MouseEvent {
 		this.clientX = e.event.clientX;
 		this.clientY = e.event.clientY;
 
-		if (view && !['__selecting', '__drag'].includes(view.subType)) {
+		if (view && !['__selecting__', '__drag__'].includes(view.subType)) {
 			if (view.code) {
 				this.code = view.code;
 				if (view.composeCode) {
@@ -33,7 +33,7 @@ class MouseEvent {
 	}
 }
 
-class Controller extends Eventful {
+export default class Controller extends Eventful {
 	constructor(map) {
 		super();
 		this.$map = map;
@@ -58,6 +58,7 @@ class Controller extends Eventful {
 	}
 
 	initHandler(map) {
+		const that = this;
 		const zr = map.getZr();
 		const keyupHandle = this.keyup.bind(this);
 		const keydownHandle = this.keydown.bind(this);
@@ -65,83 +66,75 @@ class Controller extends Eventful {
 		const dragStartHandle = this.dragHandle.onDragStart;
 		const draggingHandle = this.dragHandle.onDragging;
 		const dragEndHandle = this.dragHandle.onDragEnd;
-
 		const selectStartHandle = this.selectingHandle.onSelectStart;
 		const selectingHandle = this.selectingHandle.onSelecting;
 		const selectEndHandle = this.selectingHandle.onSelectEnd;
 		const selectedHandle = this.selectHandle.onSelected;
-
 		const boardKeyupHandle = this.keyBoardHandle.onKeyup;
 		const boardKeydownHandle = this.keyBoardHandle.onKeydown;
 
 		this.on(this.events.__DragStart, dragStartHandle, this.dragHandle); // 单个元素拖拽
 		this.on(this.events.__Dragging, draggingHandle, this.dragHandle);
 		this.on(this.events.__DragEnd, dragEndHandle, this.dragHandle);
-
 		this.on(this.events.__SelectStart, selectStartHandle, this.selectingHandle);
 		this.on(this.events.__Selecting, selectingHandle, this.selectingHandle);
 		this.on(this.events.__SelectEnd, selectEndHandle, this.selectingHandle);
-
 		this.on(this.events.__Selected, selectedHandle, this.selectHandle);
 
+		zr.on('click', this.click, this);
+		zr.on('contextmenu', this.contextmenu, this);
+
 		this.enable = function (opts={}) {
-			this._panEnable = opts.panEnable || this._panEnable || false;
+			that._panEnable = opts.panEnable || that._panEnable || false;
-			this._zoomEnable = opts.zoomEnable || this._zoomEnable || false;
+			that._zoomEnable = opts.zoomEnable || that._zoomEnable || false;
-			this._keyEnable = opts.keyEnable || this._keyEnable || false;
+			that._keyEnable = opts.keyEnable || that._keyEnable || false;
-			this._dragEnable = opts.draggle || this._dragEnable || false;
+			that._dragEnable = opts.draggle || that._dragEnable || false;
-			this._areaSelectEnable = opts.selecting || this._areaSelectEnable || false;
+			that._areaSelectEnable = opts.selecting || that._areaSelectEnable || false;
-			this._selectEnable = opts.selectable || this._selectEnable || false;
+			that._selectEnable = opts.selectable || that._selectEnable || false;
-			this._reflectEnable = opts.reflect || this._reflectEnable || false;
+			that._reflectEnable = opts.reflect || that._reflectEnable || false;
-			this._preventDefaultMouseMove = opts.preventDefaultMouseMove || this._preventDefaultMouseMove|| true;
+			that._preventDefaultMouseMove = opts.preventDefaultMouseMove || that._preventDefaultMouseMove|| true;
-			this.disable();
+			that.disable();
 
-			zr.on('mousedown', this.mousedown, this);
+			zr.on('mousedown', that.mousedown, that);
-			zr.on('mousemove', this.mousemove, this);
+			zr.on('mousemove', that.mousemove, that);
-			zr.on('mouseup', this.mouseup, this);
+			zr.on('mouseup', that.mouseup, that);
-
+			zr.on('globalout', that.mouseup, that);
-			zr.on('globalout', this.mouseup, this);
+			zr.on('mousewheel', that.mousewheel, that);
-			zr.on('mousewheel', this.mousewheel, this);
 
 			zr.dom.addEventListener('keyup', keyupHandle, false);
 			zr.dom.addEventListener('keydown', keydownHandle, false);
 			zr.dom.focus();
 
-			this.on(this.events.Keyup, boardKeyupHandle, this.keyBoardHandle);
+			that.on(that.events.__Keyup, boardKeyupHandle, that.keyBoardHandle);
-			this.on(this.events.Keydown, boardKeydownHandle, this.keyBoardHandle);
+			that.on(that.events.__Keydown, boardKeydownHandle, that.keyBoardHandle);
 		};
 
 		this.disable = function () {
-			zr.off('mousedown', this.mousedown);
+			zr.off('mousedown', that.mousedown);
-			zr.off('mousemove', this.mousemove);
+			zr.off('mousemove', that.mousemove);
-			zr.off('mouseup', this.mouseup);
+			zr.off('mouseup', that.mouseup);
-
+			zr.off('globalout', that.mouseup);
-			zr.off('globalout', this.mouseup);
+			zr.off('mousewheel', that.mousewheel);
-			zr.off('mousewheel', this.mousewheel);
 
 			zr.dom.removeEventListener('keyup', keyupHandle, false);
 			zr.dom.removeEventListener('keydown', keydownHandle, false);
 
-			this.off(this.events.Keyup, boardKeyupHandle);
+			that.off(that.events.__Keyup, boardKeyupHandle);
-			this.off(this.events.Keydown, boardKeydownHandle);
+			that.off(that.events.__Keydown, boardKeydownHandle);
 		};
 
 		this.dispose = function () {
-			zr.off('click', this.click);
+			zr.off('click', that.click);
-			zr.off('contextmenu', this.contextmenu);
+			zr.off('contextmenu', that.contextmenu);
-			this.off(this.events.__DragStart, dragStartHandle);
+			that.off(that.events.__DragStart, dragStartHandle);
-			this.off(this.events.__Dragging, draggingHandle);
+			that.off(that.events.__Dragging, draggingHandle);
-			this.off(this.events.__DragEnd, dragEndHandle);
+			that.off(that.events.__DragEnd, dragEndHandle);
-
+			that.off(that.events.__SelectStart, selectStartHandle);
-			this.off(this.events.__SelectStart, selectStartHandle);
+			that.off(that.events.__Selecting, selectingHandle);
-			this.off(this.events.__Selecting, selectingHandle);
+			that.off(that.events.__SelectEnd, selectEndHandle);
-			this.off(this.events.__SelectEnd, selectEndHandle);
+			that.off(that.events.__Selected, selectedHandle);
-
+			that.disable();
-			this.off(this.events.__Selected, selectedHandle);
-			this.disable();
 		};
-
-		zr.on('click', this.click, this);
-		zr.on('contextmenu', this.contextmenu, this);
 	}
 
 	getKeyStr() {
@@ -149,7 +142,7 @@ class Controller extends Eventful {
 	}
 
 	isSpecialSubType(e) {
-		return ['__drag', '__selecting'].includes(e.subType);
+		return ['__drag__', '__selecting__'].includes(e.subType);
 	}
 
 	isSelected(code) {
@@ -229,7 +222,7 @@ class Controller extends Eventful {
 				if (this.limitDrag({dx, dy})) {
 					this.trigger(this.events.__Dragging, { dx, dy });
 					if (this._reflectEnable) {
-						this.trigger(this.events.Reflect, {dx, dy});
+						this.trigger(events.Reflect, {dx, dy});
 					}
 				} else {
 					this._x = oldX;
@@ -300,7 +293,7 @@ class Controller extends Eventful {
 			this.clear();
 		}
 
-		this.trigger(this.events.Selected, event);
+		this.trigger(events.Selected, event);
 	}
 
 	contextmenu(e) {
@@ -308,7 +301,7 @@ class Controller extends Eventful {
 
 		const event = new MouseEvent(e);
 		if (!this._pan) {
-			this.trigger(this.events.ContextMenu, event);
+			this.trigger(events.ContextMenu, event);
 		}
 
 		this._pan = false;
@@ -316,6 +309,7 @@ class Controller extends Eventful {
 
 	keydown(e) {
 		let shortcuts = e.key;
+
 		if (e.altKey && e.key != 'Alt') {
 			shortcuts = `Alt_${shortcuts}`;
 		}
@@ -327,11 +321,15 @@ class Controller extends Eventful {
 		if (e.ctrlKey && e.key != 'Control') {
 			shortcuts = `Control_${shortcuts}`;
 		}
+
 		this._shortcuts = shortcuts;
-		this.trigger(this.events.Keydown, {key: shortcuts});
+		this.trigger(this.events.__Keydown, {key: shortcuts});
+		this.trigger(events.Keydown, {key: shortcuts});
 	}
 
 	keyup(e) {
+		this.trigger(this.events.__Keyup, {key: this._shortcuts});
+		this.trigger(events.Keyup, {key: this._shortcuts})
 		this._shortcuts = '';
 	}
 
@@ -341,6 +339,9 @@ class Controller extends Eventful {
 		this._pan = false;
 		this._locking = false;
 	}
+
+	destroy () {
+		this.dispose();
+	}
 }
 
-export default Controller;

src/iscs_new/core/abstractShape.js

@@ -27,6 +27,9 @@ class AbstractShape {
 
 	// 设置状态
 	setState(state) {}
+
+	// 销毁图形
+	destroy() {}
 }
 
 export default AbstractShape;

src/iscs_new/core/shape/Svg.js

@@ -1,9 +1,9 @@
 
-import zrender from 'zrender';
+import Path from 'zrender/src/graphic/Path';
-
+import * as pathTool from 'zrender/src/tool/path';
-export default class Svg extends zrender.Path {
+export default class Svg extends Path {
 	constructor(opts) {
-		super(zrender.path.createFromString(opts.shape.path, {
+		super(pathTool.createFromString(opts.shape.path, {
 			...opts,
 			type: 'Svg'
 		}));

src/iscs_new/dragHandle.js

@@ -1,3 +1,4 @@
+import shapeLayer from './constant/shapeLayer';
 export default class DragHandle {
 	constructor(map, controller) {
 		this.$zr = map.getZr();
@@ -29,7 +30,7 @@ export default class DragHandle {
 			this.$controller.storage.values().forEach(dragTarget => {
 				if (dragTarget) {
 					if (dragTarget.highLightInstance) {
-						this.$painter.removeFromLevel('hightLight')(dragTarget.highLightInstance);
+						this.$painter.removeFromLevel(shapeLayer.HightLight)(dragTarget.highLightInstance);
 						dragTarget.highLightInstance = null;
 					}
 

src/iscs_new/draggable/Image.js

@@ -7,7 +7,7 @@ import shapeRender from  '../constant/shapeRender';
 function shapeStyleBuilder({shape}) {
 	return {
 		...shapeRender,
-		subType: '__drag',
+		subType: '__drag__',
 		z: 9998,
 		draggable: false,
 		cursor: 'crosshair',
@@ -81,7 +81,7 @@ export default class ImageDraggable extends graphic.Group {
 	}
 
 	mousedown(e) {
-		if (e.target && ['__selecting', '__drag'].includes(e.target.subType)) {
+		if (e.target && ['__selecting__', '__drag__'].includes(e.target.subType)) {
 			if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) {
 				this.target = e.target;
 				this.offset = {x: e.offsetX, y: e.offsetY};

src/iscs_new/draggable/Line.js

@@ -6,7 +6,7 @@ import shapeRender from  '../constant/shapeRender';
 function lineStyleBuilder() {
 	return {
 		...shapeRender,
-		subType: '__drag',
+		subType: '__drag__',
 		z: 9998,
 		shape: {x1: 0, y1: 0, x2: 0, y2: 0 },
 		style: {
@@ -20,7 +20,7 @@ function lineStyleBuilder() {
 function circleStyleBuilder({shape}) {
 	return {
 		...shapeRender,
-		subType: '__drag',
+		subType: '__drag__',
 		z: 9999,
 		draggable: false,
 		cursor: 'crosshair',
@@ -80,7 +80,7 @@ export default class LineDraggable extends graphic.Group {
 
 	mousedown(e) {
 		this.offset = {x: e.offsetX, y: e.offsetY};
-		if (e.target && ['__drag'].includes(e.target.subType)) {
+		if (e.target && ['__drag__'].includes(e.target.subType)) {
 			this.target = e.target;
 			if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) {
 				this.setDraggable(true);

src/iscs_new/factory/compose.js

@@ -1,5 +1,6 @@
 import AbstractShape from '../core/abstractShape';
-import Group from 'zrender/src/container/Group';
+import shapeEvent from '../constant/shapeEvent';
+import BoundingRect from 'zrender/src/core/BoundingRect';
 
 class Compose extends AbstractShape {
 	constructor(args) {
@@ -17,19 +18,39 @@ class Compose extends AbstractShape {
 	}
 
 	// 设置高亮
-	active() {}
+	active() {
+		let unionRect = null;
+		this.model.elementCodes.forEach(code => {
+			const element = this.shapeFactory.getShapeByCode(code)
+			if (element && element.instance && !element.instance.invisible) {
+				const rect = element.instance.getBoundingRect().clone();
+				unionRect ? unionRect.union(rect): (unionRect = rect);
+			}
+		})
+
+		if (unionRect) {
+			this.shapeFactory.trigger(shapeEvent.ShowHightLight, unionRect);
+		}
+	}
 
 	// 取消高亮
-	inactive() {}
+	inactive() {
+		this.shapeFactory.trigger(shapeEvent.HideHightLight, new BoundingRect(0,0,0,0));
+	}
 
 	// 设置获取焦点
-	focus() {}
+	focus() {
+	}
 
 	// 设置取消焦点
-	blur() {}
+	blur() {
+	}
 
 	// 设置状态
 	setState(state) {}
+
+	// 销毁图形
+	destroy() {}
 }
 
 export default Compose;

src/iscs_new/factory/element.js

@@ -1,4 +1,5 @@
 import AbstractShape from '../core/abstractShape';
+import shapeEvent from '../constant/shapeEvent';
 import * as graphic from '../core/graphic';
 class Element extends AbstractShape {
 	constructor(args) {
@@ -7,9 +8,30 @@ class Element extends AbstractShape {
 	}
 
 	create() {
+		const that = this;
 		const elementBuilder = graphic[this.model.type];
 		if (elementBuilder) {
-			this.instance = new elementBuilder({...this.model, ...this.option, shapeInstance: this});
+			// mouse进入事件
+			function onmouseover(e) {
+				that.shapeFactory.trigger(shapeEvent.ShowTips, {...that.instance.getBoundingRect(), text: 'text for test'});
+			}
+			// mouse移动事件
+			function onmousemove(e) {
+				onmouseover(e);
+			}
+			// mouse离开事件
+			function onmouseout(e) {
+				that.shapeFactory.trigger(shapeEvent.HideTips, that.instance.getBoundingRect());
+			}
+
+			this.instance = new elementBuilder({
+				...this.model,
+				...this.option,
+				shapeInstance: this,
+				onmouseover,
+				onmousemove,
+				onmouseout
+			});
 		}
 	}
 
@@ -55,31 +77,27 @@ class Element extends AbstractShape {
 
 	// 设置高亮
 	active() {
-		this.hightLight = new graphic.Rect({
+		this.shapeFactory.trigger(shapeEvent.ShowHightLight, this.instance.getBoundingRect());
-			shape: this.instance.getBoundingRect(),
-			style: {
-				lineDash: [2, 6],
-				lineWidth: this.defaultStyle.borderWidth,
-				stroke: this.defaultStyle.borderColor,
-				fill: this.defaultStyle.transparentColor
-			}
-		});
-		this.shapeFactory.$painter.addToLevel('hightLight')(this.hightLight);
 	}
 
 	// 取消高亮
 	inactive() {
-		this.shapeFactory.$painter.removeFromLevel('hightLight')(this.hightLight);
+		this.shapeFactory.trigger(shapeEvent.HideHightLight, this.instance.getBoundingRect());
 	}
 
 	// 设置获取焦点
-	focus() {}
+	focus() {
+	}
 
 	// 设置取消焦点
-	blur() {}
+	blur() {
+	}
 
 	// 设置状态
 	setState(state) {}
+
+	// 销毁图形
+	destroy() {}
 }
 
 export default Element;

src/iscs_new/factory/hightLightHandle.js

@@ -0,0 +1,42 @@
+import * as graphic from '../core/graphic';
+import shapeLayer from '../constant/shapeLayer';
+import shapeRender from  '../constant/shapeRender';
+
+function shapeStyleBuilder() {
+	return {
+		...shapeRender,
+		z: 9999,
+		silent: true,
+		shape: {
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		},
+		style: {
+			lineDash: [4, 8],
+			lineWidth: 1,
+			stroke: '#fff',
+			fill: 'transparent'
+		}
+	}
+}
+
+export default class HightLightHandle {
+	constructor(map) {
+		this.$map = map;
+		this.border = new graphic.Rect(shapeStyleBuilder());
+	}
+
+	onShow(e) {
+		const { x, y, width, height } = e;
+		const painter = this.$map.getPainter();
+		this.border.setShape({ x, y, width, height });
+		painter.addToLevel(shapeLayer.HightLight)(this.border);
+	}
+
+	onHide(e) {
+		const painter = this.$map.getPainter();
+		painter.removeFromLevel(shapeLayer.HightLight)(this.border);
+	}
+}

src/iscs_new/factory/index.js

@@ -1,8 +1,12 @@
 import * as zrUtil from 'zrender/src/core/util';
-import shapeType from '../constant/shapeType';
+import Eventful from 'zrender/src/mixin/Eventful';
-import shapeRender from '../constant/shapeRender';
+import TipsHandle from './tipsHandle';
+import HightLightHandle from './hightLightHandle';
 import Compose from './compose';
 import Element from './element';
+import shapeType from '../constant/shapeType';
+import shapeRender from '../constant/shapeRender';
+import shapeEvent from '../constant/shapeEvent';
 
 const None = e => null;
 const shapeBuilderMap = {
@@ -10,18 +14,46 @@ const shapeBuilderMap = {
 	[shapeType.Compose]: Compose
 }
 
-class ShapeFactory {
+class ShapeFactory extends Eventful {
 	constructor(map) {
+		super();
 		this.$map = map;
 		this.$painter = map.getPainter();
+
+		this.hightLightHandle = new HightLightHandle(map);
+
+		this.tipsHandle = new TipsHandle(map);
+
 		this.clear();
+
+		this.initEventHandle();
 	}
 
-	parserTemplates(list=[]) {
+	initEventHandle() {
+		const that = this;
+		const showHightLightHandle = this.hightLightHandle.onShow;
+		const hideHightLightHandle = this.hightLightHandle.onHide;
+		const showTipsHandle = this.tipsHandle.onShow;
+		const hideTipsHandle = this.tipsHandle.onHide;
+
+		this.on(shapeEvent.ShowHightLight, showHightLightHandle, this.hightLightHandle);
+		this.on(shapeEvent.HideHightLight, hideHightLightHandle, this.hightLightHandle);
+		this.on(shapeEvent.ShowTips, showTipsHandle, this.tipsHandle);
+		this.on(shapeEvent.HideTips, hideTipsHandle, this.tipsHandle);
+
+		this.dispose = function() {
+			that.off(shapeEvent.ShowHightLight, showHightLightHandle);
+			that.off(shapeEvent.HideHightLight, hideHightLightHandle);
+			that.off(shapeEvent.ShowTips, showTipsHandle);
+			that.off(shapeEvent.HideTips, hideTipsHandle);
+		}
+	}
+
+	parseTemplates(list=[]) {
 		return this;
 	}
 
-	parser(source={}, defaultStyle={}, walk=None) {
+	parse(source={}, defaultStyle={}, walk=None) {
 		try {
 			this.source = source;
 			zrUtil.each(source.elementList ||[], el => {
@@ -109,6 +141,11 @@ class ShapeFactory {
 		this.mapTemplate = {};
 		this.mapShape = {};
 	}
+
+	destroy() {
+		this.clear();
+		this.dispose();
+	}
 }
 
 export default ShapeFactory;

src/iscs_new/factory/tipsHandle.js

@@ -0,0 +1,53 @@
+import * as graphic from '../core/graphic';
+import shapeLayer from '../constant/shapeLayer';
+import shapeRender from  '../constant/shapeRender';
+
+function shapeStyleBuilder() {
+	return {
+		...shapeRender,
+		z: 10000,
+		silent: true,
+		style: {
+			x: 0,
+			y: 0,
+			fontSize: 16,
+			fontWeight: 'normal',
+			textBackgroundColor: '#feffc8',
+			text: '',
+			textFill: '#000',
+			textPadding: [7, 14],
+			textAlign: 'left',
+			textVerticalAlign: 'bottom',
+			textBorderColor: '#666666',
+			textBorderWidth: 0,
+			textBorderRadius: 4,
+			textLineHeight: 22,
+			textBoxShadowColor: 'rgba(0,0,0,.3)',
+			textBoxShadowOffsetX: 0,
+			textBoxShadowOffsetY: 1,
+			textBoxShadowBlur: 3,
+			opacity: 0.8
+		}
+	}
+}
+export default class TipsHandle {
+	constructor(map) {
+		this.$map = map;
+		this.message = new graphic.Text(shapeStyleBuilder());
+	}
+
+	onShow(e) {
+		const {x, y, text} = e;
+		const painter = this.$map.getPainter();
+
+		this.message.setStyle({ x, y, text });
+		painter.addToLevel(shapeLayer.Tips)(this.message);
+	}
+
+	onHide(e) {
+		const painter = this.$map.getPainter();
+
+		painter.removeFromLevel(shapeLayer.Tips)(this.message);
+		this.message.setStyle('text', '');
+	}
+}

src/iscs_new/map.js

@@ -1,45 +1,34 @@
 import _ from 'lodash';
 import * as utils from './utils/utils';
-import EventEmitter from './utils/eventEmitter';
 import zrender from 'zrender';
+import events from './utils/events';
+import EventEmitter from './utils/eventEmitter';
 import Painter from './painter';
 import Option from './option';
-import Controller from './controller'; // 事件集合
+import Controller from './controller';
-import DefaultStyle from './config/defaultStyle'; // 样式集合
+import StateHandle  from './stateHandle';
 import ShapeFactory from './factory';
+import defaultStyle from './config/defaultStyle';
 
 const renderer = 'canvas';
 const devicePixelRatio = 1;
+
+
 class JMap {
 	constructor(opts) {
-		// 鼠标事件
+		// 内部鼠标事件
 		this.events = {
-			__Pan: '_pan',
+			__Pan: '__pan__',
-			__Zoom: '_zoom',
+			__Zoom: '__zoom__',
-
+			__DragStart: '__dragStart__',
-			__DragStart: '_dragStart',
+			__Dragging: '__dragging__',
-			__Dragging: '_dragging',
+			__DragEnd: '__dragEnd__',
-			__DragEnd: '_dragEnd',
+			__SelectStart: '__selectStart__',
-
+			__Selecting: '__selecting__',
-			__SelectStart: '_selectStart',
+			__SelectEnd: '__selectEnd__',
-			__Selecting: '_selecting',
+			__Selected: '__selected__',
-			__SelectEnd: '_selectEnd',
+			__Keyup: '__keyup__',
-			__Selected: '_selected',
+			__Keydown: '__keydown__'
-
-			Reflect: 'reflect',
-			Selected: 'selected',
-			ContextMenu: 'contextmenu',
-			DataZoom: 'dataZoom',
-			Keydown: 'keydown',
-			Keyup: 'keyup',
-			Keypress: 'keypress',
-
-			DataLoaded: 'dataLoaded',
-			ViewLoaded: 'viewLoaded',
-			StateLoaded: 'stateLoaded',
-			ViewUpdate: 'viewUpdate',
-			StateUpdate: 'stateUpdate',
-			OptionUpdate: 'optionUpdate'
 		};
 
 		// 默认状态
@@ -62,7 +51,7 @@ class JMap {
 		this.$zr.dom.setAttribute('tabIndex', -1);
 		this.$zr.dom.style.cursor = 'auto';
 
-		this.$option = new Option({ scaleRate: 1, offsetX: 0, offsetY: 0, ...utils.deepClone(opts.option||{})}, (dataZoom) => { this.$controller.trigger(this.events.DataZoom, dataZoom); }); // 缩放
+		this.$option = new Option({ scaleRate: 1, offsetX: 0, offsetY: 0, ...utils.deepClone(opts.option||{})}, (dataZoom) => { this.$controller.trigger(events.DataZoom, dataZoom); }); // 缩放
 
 		this.$painter = new Painter(this);
 		this.$painter.updateZrSize({width: this.$zr.getWidth(), height: this.$zr.getHeight()});
@@ -72,6 +61,8 @@ class JMap {
 
 		this.$shapeFactory = new ShapeFactory(this);
 
+		this.$stateHandle = new StateHandle(this);
+
 		this.$controller = new Controller(this);
 		this.$controller.enable();
 
@@ -89,7 +80,7 @@ class JMap {
 	}
 
 	loadDefaultStyle(style) {
-		return DefaultStyle;
+		return defaultStyle;
 	}
 
 	setMap(templates=[], source={}, eventOpts={}) {
@@ -100,10 +91,10 @@ class JMap {
 		this.$painter.updateTransform(this.$option);
 
 		// 解析模板
-		this.$shapeFactory.parserTemplates(templates)
+		this.$shapeFactory.parseTemplates(templates)
 
 		// 数据加载完成 回调
-		this.$eventEmitter.emit(this.events.DataLoaded);
+		this.$eventEmitter.emit(events.DataLoaded);
 
 		// 初次渲染视图
 		this.repaint(source);
@@ -112,14 +103,14 @@ class JMap {
 		this.setDefaultState();
 
 		// 视图加载完成 回调
-		this.$eventEmitter.emit(this.events.ViewLoaded);
+		this.$eventEmitter.emit(events.ViewLoaded);
 
 		// 返回视图缩放偏移
 		this.$option.trigger(this.$option);
 	}
 
 	setDefaultState() {
-		this.$eventEmitter.emit(this.events.StateLoaded);
+		this.$eventEmitter.emit(events.StateLoaded);
 	}
 
 	setOption(opts={}) {
@@ -131,7 +122,7 @@ class JMap {
 		this.$controller.disable();
 		this.$controller.enable();
 
-		this.$eventEmitter.emit(this.events.OptionUpdate);
+		this.$eventEmitter.emit(events.OptionUpdate);
 	}
 
 	setDragging(e) {
@@ -163,7 +154,7 @@ class JMap {
 	repaint(source={}) {
 		this.$shapeFactory.clear();
 		this.$painter.clear();
-		this.$shapeFactory.parser(source, this.defaultStyle, shape => {
+		this.$shapeFactory.parse(source, this.defaultStyle, shape => {
 			if (shape) {
 				this.$painter.add(shape);
 			}
@@ -187,12 +178,12 @@ class JMap {
 			}
 		});
 
-		this.$eventEmitter.emit(this.events.ViewUpdate, list);
+		this.$eventEmitter.emit(events.ViewUpdate, list);
 	}
 
 	update(list=[]) {
-		list.forEach(el => { this.$painter.update(el); });
+		this.$painter.update(this.$stateHandle.update(list));
-		this.$eventEmitter.emit(this.events.StateUpdate, list);
+		this.$eventEmitter.emit(events.StateUpdate, list);
 	}
 
 	pullBack(payload={}) {
@@ -273,100 +264,98 @@ class JMap {
 		this.$zr.refresh()
 	}
 
-	dispose() {
+	destroy() {
 		this.disable();
 		this.clear();
-		this.$controller.dispose();
+		this.$shapeFactory.destroy();
-		this.$painter.dispose();
+		this.$controller.destroy();
-
+		this.$painter.destroy();
-		if (this.$zr) {
+		this.$zr && this.$zr.dispose();
-			this.$zr.dispose();
-		}
 	}
 
 	on(name, cb, context) {
-		const idx = Object.values(this.events).indexOf(name);
+		const idx = Object.values(events).indexOf(name);
 		if (idx >= 0) {
 			switch (name) {
-			case this.events.DataLoaded:
+			case events.DataLoaded:
-				this.$eventEmitter.emit.on(this.events.DataLoaded, cb, context);
+				this.$eventEmitter.emit.on(events.DataLoaded, cb, context);
 				break;
-			case this.events.StateLoaded:
+			case events.StateLoaded:
-				this.$eventEmitter.emit.on(this.events.StateLoaded, cb, context);
+				this.$eventEmitter.emit.on(events.StateLoaded, cb, context);
 				break;
-			case this.events.ViewUpdate:
+			case events.ViewUpdate:
-				this.$eventEmitter.emit.on(this.events.ViewUpdate, cb, context);
+				this.$eventEmitter.emit.on(events.ViewUpdate, cb, context);
 				break;
-			case this.events.StateUpdate:
+			case events.StateUpdate:
-				this.$eventEmitter.emit.on(this.events.StateUpdate, cb, context);
+				this.$eventEmitter.emit.on(events.StateUpdate, cb, context);
 				break;
-			case this.events.OptionUpdate:
+			case events.OptionUpdate:
-				this.$eventEmitter.emit.on(this.events.OptionUpdate, cb, context);
+				this.$eventEmitter.emit.on(events.OptionUpdate, cb, context);
 				break;
-			case this.events.Reflect:
+			case events.Reflect:
-				this.$controller.on(this.events.Reflect, _.throttle(cb, 200), context);
+				this.$controller.on(events.Reflect, _.throttle(cb, 200), context);
 				break;
-			case this.events.Selected:
+			case events.Selected:
-				this.$controller.on(this.events.Selected, cb, context);
+				this.$controller.on(events.Selected, cb, context);
 				break;
-			case this.events.ContextMenu:
+			case events.ContextMenu:
-				this.$controller.on(this.events.ContextMenu, cb, context);
+				this.$controller.on(events.ContextMenu, cb, context);
 				break;
-			case this.events.DataZoom:
+			case events.DataZoom:
-				this.$controller.on(this.events.DataZoom, cb, context);
+				this.$controller.on(events.DataZoom, cb, context);
 				break;
-			case this.events.Keydown:
+			case events.Keydown:
-				this.$controller.on(this.events.Keydown, cb, context);
+				this.$controller.on(events.Keydown, cb, context);
 				break;
-			case this.events.Keypress:
+			case events.Keypress:
-				this.$controller.on(this.events.Keypress, cb, context);
+				this.$controller.on(events.Keypress, cb, context);
 				break;
-			case this.events.Keyup:
+			case events.Keyup:
-				this.$controller.on(this.events.Keyup, cb, context);
+				this.$controller.on(events.Keyup, cb, context);
 				break;
 			}
 		}
 	}
 
 	off(name, cb) {
-		const idx = Object.values(this.events).indexOf(name);
+		const idx = Object.values(events).indexOf(name);
 		if (idx >= 0) {
 			switch (name) {
-			case this.events.DataLoaded:
+			case events.DataLoaded:
-				this.$eventEmitter.emit.off(this.events.DataLoaded, cb, context);
+				this.$eventEmitter.emit.off(events.DataLoaded, cb, context);
 				break;
-			case this.events.StateLoaded:
+			case events.StateLoaded:
-				this.$eventEmitter.emit.off(this.events.StateLoaded, cb, context);
+				this.$eventEmitter.emit.off(events.StateLoaded, cb, context);
 				break;
-			case this.events.ViewUpdate:
+			case events.ViewUpdate:
-				this.$eventEmitter.emit.off(this.events.ViewUpdate, cb, context);
+				this.$eventEmitter.emit.off(events.ViewUpdate, cb, context);
 				break;
-			case this.events.StateUpdate:
+			case events.StateUpdate:
-				this.$eventEmitter.emit.off(this.events.StateUpdate, cb, context);
+				this.$eventEmitter.emit.off(events.StateUpdate, cb, context);
 				break;
-			case this.events.OptionUpdate:
+			case events.OptionUpdate:
-				this.$eventEmitter.emit.off(this.events.OptionUpdate, cb, context);
+				this.$eventEmitter.emit.off(events.OptionUpdate, cb, context);
 				break;
-			case this.events.Reflect:
+			case events.Reflect:
-				this.$controller.off(this.events.Reflect, _.throttle(cb, 200));
+				this.$controller.off(events.Reflect, _.throttle(cb, 200));
 				break;
-			case this.events.Selected:
+			case events.Selected:
-				this.$controller.off(this.events.Selected, cb);
+				this.$controller.off(events.Selected, cb);
 				break;
-			case this.events.ContextMenu:
+			case events.ContextMenu:
-				this.$controller.off(this.events.ContextMenu, cb);
+				this.$controller.off(events.ContextMenu, cb);
 				break;
-			case this.events.DataZoom:
+			case events.DataZoom:
-				this.$controller.off(this.events.DataZoom, cb);
+				this.$controller.off(events.DataZoom, cb);
 				break;
-			case this.events.Keydown:
+			case events.Keydown:
-				this.$controller.off(this.events.Keydown, cb);
+				this.$controller.off(events.Keydown, cb);
 				break;
-			case this.events.Keypress:
+			case events.Keypress:
-				this.$controller.off(this.events.Keypress, cb);
+				this.$controller.off(events.Keypress, cb);
 				break;
-			case this.events.Keyup:
+			case events.Keyup:
-				this.$controller.off(this.events.Keyup, cb);
+				this.$controller.off(events.Keyup, cb);
 				break;
 			}
 		}

src/iscs_new/maps.js

@@ -3,7 +3,6 @@ import * as Dom from './utils/dom';
 import JMap from './map';
 
 const DOM_ATTRIBUTE_KEY = '_maps_instance_';
-
 class JMaps {
 	constructor() {
 		this._version = '1.0.0';
@@ -70,9 +69,16 @@ class JMaps {
 		}
 
 		if (map) {
-			map.dispose();
+			map.destroy();
 		}
 	}
+
+	destroy() {
+		Object.values(this.instances).forEach(map => {
+			this.dispose(map);
+		})
+		this.instances = []
+	}
 }
 
 export default  JMaps;

src/iscs_new/painter.js

@@ -2,25 +2,18 @@ import * as zrUtil from 'zrender/src/core/util';
 import * as vector from 'zrender/src/core/vector';
 import Group from 'zrender/src/container/Group';
 import TransformHandle from './transformHandle';
-import StateHandle from './stateHandle';
+import shapeLayer from './constant/shapeLayer';
-import TipsHandle from './tipsHandle';
 import * as graphic from './core/graphic';
 
 class Painter extends Group {
 	constructor(map) {
-		super({name: `__parent__`});
+		super({name: `__Container__` });
 
 		// 初始图层
 		this.initLevels(map);
 
 		// 视图控制器
 		this.$transformHandle = new TransformHandle(this);
-
-		// 状态处理器
-		this.$stateHandle = new StateHandle(map);
-
-		// 提示处理器
-		this.$tipsHandle = new TipsHandle(map);
 	}
 
 	initLevels(map) {
@@ -34,13 +27,13 @@ class Painter extends Group {
 		this.$zr.add(this);
 
 		// 创建select图层
-		this.mapShapeLevel.selecting = new Group({ name: `___selecting__` });
+		this.mapShapeLevel[shapeLayer.SelectIng] = new Group({ name: shapeLayer.SelectIng });
 
 		// 创建hover图层
-		this.mapShapeLevel.hightLight = new Group({ name: `___hover__` });
+		this.mapShapeLevel[shapeLayer.HightLight] = new Group({ name: shapeLayer.HightLight });
 
 		// 创建tips图层
-		this.mapShapeLevel.tips = new Group({name: `__tips__`});
+		this.mapShapeLevel[shapeLayer.Tips] = new Group({name: shapeLayer.Tips });
 
 		// 创建元素图层
 		Object.keys(graphic).forEach(key => {
@@ -73,7 +66,7 @@ class Painter extends Group {
 
 	update(shape) {
 		try {
-			this.$stateHandle.update(shape);
+			//
 		} catch (err) {
 			console.error(err);
 		}
@@ -100,12 +93,6 @@ class Painter extends Group {
 		}
 	}
 
-	dispose() {
-		this.clear();
-		this.mapShapeLevel = {};
-		this.$tipsHandle.dispose();
-	}
-
 	getLevelByName(name) {
 		return this.mapShapeLevel[name];
 	}
@@ -115,6 +102,11 @@ class Painter extends Group {
 			el.removeAll();
 		})
 	}
+
+	destroy() {
+		this.clear();
+		this.mapShapeLevel = {};
+	}
 }
 
 export default Painter;

src/iscs_new/selectHandle.js

@@ -1,3 +1,4 @@
+import shapeLayer from './constant/shapeLayer';
 import LineDraggable from './draggable/Line';
 import ImageDraggable from './draggable/Image';
 import * as graphic from './core/graphic';
@@ -21,6 +22,8 @@ export default class SelectHandle {
 				} else {
 					this.addSelected(e.target);
 				}
+			} else if (this.$controller.selectingHandle.isSelecting()) {
+				this.addSelected(e.target);
 			} else {
 				this.clear();
 				this.addSelected(e.target);
@@ -31,19 +34,19 @@ export default class SelectHandle {
 	addSelected(target) {
 		this.$controller.storage.set(target.model.code, target);
 
-		target.active(this.$zr);
+		target.active();
 
 		if (!target.highLightInstance) {
 			target.highLightInstance = this.createSelected(target);
-			this.$painter.addToLevel('hightLight')(target.highLightInstance);
+			this.$painter.addToLevel(shapeLayer.HightLight)(target.highLightInstance);
 		}
 	}
 
 	delSelected(target) {
-		target.inactive(this.$zr);
+		target.inactive();
 
 		if (target.highLightInstance) {
-			this.$painter.removeFromLevel('hightLight')(target.highLightInstance);
+			this.$painter.removeFromLevel(shapeLayer.HightLight)(target.highLightInstance);
 			target.highLightInstance = null;
 		}
 

src/iscs_new/selectingHandle.js

@@ -1,9 +1,10 @@
 import * as graphic from './core/graphic.js';
 import shapeRender from  './constant/shapeRender';
+import shapeLayer from './constant/shapeLayer';
 
 function shapeStyleBuilder() {
 	return {
-		subType: '__selecting',
+		subType: '__selecting__',
 		...shapeRender,
 		z: 9999,
 		shape: {
@@ -37,7 +38,7 @@ export default class SelectingHandle {
 
 	onSelectStart(e) {
 		this.selecting.setShape({ x: e.x, y: e.y, width: 0, height: 0 });
-		this.$painter.addToLevel('selecting')(this.selecting);
+		this.$painter.addToLevel(shapeLayer.SelectIng)(this.selecting);
 		this.begPoint = { x: e.x, y: e.y };
 		this.endPoint = null;
 	}
@@ -45,13 +46,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.addToLevel('selecting')(this.selecting);
+		this.$painter.addToLevel(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.addToLevel('selecting')(this.selecting);
+		this.$painter.addToLevel(shapeLayer.SelectIng)(this.selecting);
 
 		const selectingRect = this.selecting.getBoundingRect();
 		Object.values(this.$map.getMapShape()).forEach(el => {
@@ -69,12 +70,12 @@ export default class SelectingHandle {
 	}
 
 	setSelected(target) {
-		target.active(this.$zr);
+		target.active();
 		this.$controller.storage.set(target.model.code, target);
 	}
 
 	clear() {
-		this.$painter.removeFromLevel('selecting')(this.selecting);
+		this.$painter.removeFromLevel(shapeLayer.SelectIng)(this.selecting);
 	}
 
 	normalizedArea(begin, end) {

src/iscs_new/stateHandle.js

@@ -1,26 +1,16 @@
-// 状态处理器
+
 export default class StateHandle {
 	constructor(map) {
 		this.$map = map;
 	}
 
-	update(state) {
+	update(shapeFactory, state) {
-
+		return [];
 	}
 
-	updateState({mapShape}, state) {
+	updateState(shapeFactory, state) {
-
 	}
 
-	updateDepState({mapShape}, state) {
+	updateDepState(shapeFactory, state) {
-
-	}
-
-	__update2Self({instance, model}, state) {
-
-	}
-
-	__update2Measure({instance, model}, state) {
-
 	}
 }

src/iscs_new/tipsHandle.js

@@ -1,76 +0,0 @@
-import * as graphic from './core/graphic';
-import Eventful from 'zrender/src/mixin/Eventful';
-import shapeRender from  './constant/shapeRender';
-
-function shapeStyleBuilder() {
-	return {
-		...shapeRender,
-		z: 10000,
-		silent: true,
-		style: {
-			x: 0,
-			y: 0,
-			fontSize: 16,
-			fontWeight: 'normal',
-			textBackgroundColor: '#feffc8',
-			text: 'aaa',
-			textFill: '#000',
-			textPadding: [7, 14],
-			textAlign: 'left',
-			textVerticalAlign: 'bottom',
-			textBorderColor: '#666666',
-			textBorderWidth: 0,
-			textBorderRadius: 4,
-			textLineHeight: 22,
-			textBoxShadowColor: 'rgba(0,0,0,.3)',
-			textBoxShadowOffsetX: 0,
-			textBoxShadowOffsetY: 1,
-			textBoxShadowBlur: 3,
-			opacity: 0.8
-		}
-	}
-}
-export default class TipsHandle extends Eventful {
-	constructor(map) {
-		super();
-		this.map = map;
-		this.message = new graphic.Text(shapeStyleBuilder());
-		this.on('show', this.onShow, this);
-		this.on('hide', this.onHide, this);
-	}
-
-	onShow(e) {
-		const {x, y, text} = e;
-		const painter = this.map.getPainter();
-		const options = this.map.getOption();
-		const tipsLevel = painter.getTipsLevel();
-		const scaleRate = options.scaleRate || 1;
-		const offsetX = options.offsetX || 0;
-		const offsetY = options.offsetY || 0;
-
-		const newX = parseInt((x + offsetX) / scaleRate);
-		const newY = parseInt((y + offsetY) / scaleRate);
-
-		this.message.setStyle({x: newX, y: newY, text});
-
-		if (tipsLevel) {
-			tipsLevel.add(this.message);
-			painter.$transformHandle.transformView(this.message);
-		}
-	}
-
-	onHide(e) {
-		const painter = this.map.getPainter();
-		const tipsLevel = painter.getTipsLevel();
-
-		if (tipsLevel) {
-			tipsLevel.remove(this.message);
-		}
-		this.message.setStyle('text', '');
-	}
-
-	dispose() {
-		this.off('show', this.onShow);
-		this.off('hide', this.onHide);
-	}
-}

src/iscs_new/transformHandle.js

@@ -1,6 +1,6 @@
 import * as utils from './utils/utils';
 
-class TransformHandle {
+export default class TransformHandle {
 	constructor(painter) {
 		this.$painter = painter;
 
@@ -71,4 +71,3 @@ class TransformHandle {
 	}
 }
 
-export default TransformHandle;

src/iscs_new/utils/events.js

@@ -0,0 +1,16 @@
+export default {
+	Reflect: 'reflect',
+	Selected: 'selected',
+	ContextMenu: 'contextmenu',
+	DataZoom: 'dataZoom',
+	Keydown: 'keydown',
+	Keyup: 'keyup',
+	Keypress: 'keypress',
+
+	DataLoaded: 'dataLoaded',
+	ViewLoaded: 'viewLoaded',
+	StateLoaded: 'stateLoaded',
+	ViewUpdate: 'viewUpdate',
+	StateUpdate: 'stateUpdate',
+	OptionUpdate: 'optionUpdate',
+}

src/views/test/index.vue

@@ -198,7 +198,7 @@ export default {
         },
         destroy() {
             if (this.$iscs) {
-                this.$iscs.dispose();
+                this.$iscs.destroy();
                 this.$iscs = null;
                 Vue.prototype.$iscs = null;
             }