diff --git a/src/iscs_new/config/defaultStyle.js b/src/iscs_new/config/defaultStyle.js index 28009f028..3f59e7e69 100644 --- a/src/iscs_new/config/defaultStyle.js +++ b/src/iscs_new/config/defaultStyle.js @@ -1,39 +1,39 @@ -export default class highlightStyle { - constructor() { +const defaultStyle = { /** 透明填充 颜色*/ - 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; diff --git a/src/iscs_new/constant/shapeEvent.js b/src/iscs_new/constant/shapeEvent.js new file mode 100644 index 000000000..5d4ccb72f --- /dev/null +++ b/src/iscs_new/constant/shapeEvent.js @@ -0,0 +1,6 @@ +export default { + ShowHightLight: 'showHightLight', + HideHightLight: 'hideHightLight', + ShowTips: 'showTips', + HideTips: 'hideTips' +} diff --git a/src/iscs_new/constant/shapeLayer.js b/src/iscs_new/constant/shapeLayer.js new file mode 100644 index 000000000..9e4456111 --- /dev/null +++ b/src/iscs_new/constant/shapeLayer.js @@ -0,0 +1,5 @@ +export default { + HightLight: `__hightLight__`, + SelectIng: `___selecting__`, + Tips: `__tips__`, +} diff --git a/src/iscs_new/controller.js b/src/iscs_new/controller.js index 72034b88e..788200e12 100644 --- a/src/iscs_new/controller.js +++ b/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; - this._zoomEnable = opts.zoomEnable || this._zoomEnable || false; - this._keyEnable = opts.keyEnable || this._keyEnable || false; - this._dragEnable = opts.draggle || this._dragEnable || false; - this._areaSelectEnable = opts.selecting || this._areaSelectEnable || false; - this._selectEnable = opts.selectable || this._selectEnable || false; - this._reflectEnable = opts.reflect || this._reflectEnable || false; - this._preventDefaultMouseMove = opts.preventDefaultMouseMove || this._preventDefaultMouseMove|| true; - this.disable(); + that._panEnable = opts.panEnable || that._panEnable || false; + that._zoomEnable = opts.zoomEnable || that._zoomEnable || false; + that._keyEnable = opts.keyEnable || that._keyEnable || false; + that._dragEnable = opts.draggle || that._dragEnable || false; + that._areaSelectEnable = opts.selecting || that._areaSelectEnable || false; + that._selectEnable = opts.selectable || that._selectEnable || false; + that._reflectEnable = opts.reflect || that._reflectEnable || false; + that._preventDefaultMouseMove = opts.preventDefaultMouseMove || that._preventDefaultMouseMove|| true; + that.disable(); - zr.on('mousedown', this.mousedown, this); - zr.on('mousemove', this.mousemove, this); - zr.on('mouseup', this.mouseup, this); - - zr.on('globalout', this.mouseup, this); - zr.on('mousewheel', this.mousewheel, this); + zr.on('mousedown', that.mousedown, that); + zr.on('mousemove', that.mousemove, that); + zr.on('mouseup', that.mouseup, that); + zr.on('globalout', that.mouseup, that); + zr.on('mousewheel', that.mousewheel, that); zr.dom.addEventListener('keyup', keyupHandle, false); zr.dom.addEventListener('keydown', keydownHandle, false); zr.dom.focus(); - this.on(this.events.Keyup, boardKeyupHandle, this.keyBoardHandle); - this.on(this.events.Keydown, boardKeydownHandle, this.keyBoardHandle); + that.on(that.events.__Keyup, boardKeyupHandle, that.keyBoardHandle); + that.on(that.events.__Keydown, boardKeydownHandle, that.keyBoardHandle); }; this.disable = function () { - zr.off('mousedown', this.mousedown); - zr.off('mousemove', this.mousemove); - zr.off('mouseup', this.mouseup); - - zr.off('globalout', this.mouseup); - zr.off('mousewheel', this.mousewheel); + zr.off('mousedown', that.mousedown); + zr.off('mousemove', that.mousemove); + zr.off('mouseup', that.mouseup); + zr.off('globalout', that.mouseup); + zr.off('mousewheel', that.mousewheel); zr.dom.removeEventListener('keyup', keyupHandle, false); zr.dom.removeEventListener('keydown', keydownHandle, false); - this.off(this.events.Keyup, boardKeyupHandle); - this.off(this.events.Keydown, boardKeydownHandle); + that.off(that.events.__Keyup, boardKeyupHandle); + that.off(that.events.__Keydown, boardKeydownHandle); }; this.dispose = function () { - zr.off('click', this.click); - zr.off('contextmenu', this.contextmenu); - this.off(this.events.__DragStart, dragStartHandle); - this.off(this.events.__Dragging, draggingHandle); - this.off(this.events.__DragEnd, dragEndHandle); - - this.off(this.events.__SelectStart, selectStartHandle); - this.off(this.events.__Selecting, selectingHandle); - this.off(this.events.__SelectEnd, selectEndHandle); - - this.off(this.events.__Selected, selectedHandle); - this.disable(); + zr.off('click', that.click); + zr.off('contextmenu', that.contextmenu); + that.off(that.events.__DragStart, dragStartHandle); + that.off(that.events.__Dragging, draggingHandle); + that.off(that.events.__DragEnd, dragEndHandle); + that.off(that.events.__SelectStart, selectStartHandle); + that.off(that.events.__Selecting, selectingHandle); + that.off(that.events.__SelectEnd, selectEndHandle); + that.off(that.events.__Selected, selectedHandle); + that.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; diff --git a/src/iscs_new/core/abstractShape.js b/src/iscs_new/core/abstractShape.js index 836bf20ea..de0c1afcb 100644 --- a/src/iscs_new/core/abstractShape.js +++ b/src/iscs_new/core/abstractShape.js @@ -27,6 +27,9 @@ class AbstractShape { // 设置状态 setState(state) {} + + // 销毁图形 + destroy() {} } export default AbstractShape; diff --git a/src/iscs_new/core/shape/Svg.js b/src/iscs_new/core/shape/Svg.js index 8a49a67d5..cd446dc15 100644 --- a/src/iscs_new/core/shape/Svg.js +++ b/src/iscs_new/core/shape/Svg.js @@ -1,9 +1,9 @@ -import zrender from 'zrender'; - -export default class Svg extends zrender.Path { +import Path from 'zrender/src/graphic/Path'; +import * as pathTool from 'zrender/src/tool/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' })); diff --git a/src/iscs_new/dragHandle.js b/src/iscs_new/dragHandle.js index f339fdb23..0cf5dcc28 100644 --- a/src/iscs_new/dragHandle.js +++ b/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; } diff --git a/src/iscs_new/draggable/Image.js b/src/iscs_new/draggable/Image.js index 81bcb0ad3..e917c3cce 100644 --- a/src/iscs_new/draggable/Image.js +++ b/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}; diff --git a/src/iscs_new/draggable/Line.js b/src/iscs_new/draggable/Line.js index f3fcfa59c..7bc2e06b5 100644 --- a/src/iscs_new/draggable/Line.js +++ b/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); diff --git a/src/iscs_new/factory/compose.js b/src/iscs_new/factory/compose.js index e672e915e..bb7cb0a1e 100644 --- a/src/iscs_new/factory/compose.js +++ b/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; diff --git a/src/iscs_new/factory/element.js b/src/iscs_new/factory/element.js index 7547d23ea..d915a7bb8 100644 --- a/src/iscs_new/factory/element.js +++ b/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({ - 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); + this.shapeFactory.trigger(shapeEvent.ShowHightLight, this.instance.getBoundingRect()); } // 取消高亮 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; diff --git a/src/iscs_new/factory/hightLightHandle.js b/src/iscs_new/factory/hightLightHandle.js new file mode 100644 index 000000000..e600de35d --- /dev/null +++ b/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); + } +} diff --git a/src/iscs_new/factory/index.js b/src/iscs_new/factory/index.js index b09fafb3a..c0cbefaa4 100644 --- a/src/iscs_new/factory/index.js +++ b/src/iscs_new/factory/index.js @@ -1,8 +1,12 @@ import * as zrUtil from 'zrender/src/core/util'; -import shapeType from '../constant/shapeType'; -import shapeRender from '../constant/shapeRender'; +import Eventful from 'zrender/src/mixin/Eventful'; +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; diff --git a/src/iscs_new/factory/tipsHandle.js b/src/iscs_new/factory/tipsHandle.js new file mode 100644 index 000000000..98ae28998 --- /dev/null +++ b/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', ''); + } +} diff --git a/src/iscs_new/map.js b/src/iscs_new/map.js index 4961de849..0d105ee73 100644 --- a/src/iscs_new/map.js +++ b/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 DefaultStyle from './config/defaultStyle'; // 样式集合 +import Controller from './controller'; +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', - __Zoom: '_zoom', - - __DragStart: '_dragStart', - __Dragging: '_dragging', - __DragEnd: '_dragEnd', - - __SelectStart: '_selectStart', - __Selecting: '_selecting', - __SelectEnd: '_selectEnd', - __Selected: '_selected', - - 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' + __Pan: '__pan__', + __Zoom: '__zoom__', + __DragStart: '__dragStart__', + __Dragging: '__dragging__', + __DragEnd: '__dragEnd__', + __SelectStart: '__selectStart__', + __Selecting: '__selecting__', + __SelectEnd: '__selectEnd__', + __Selected: '__selected__', + __Keyup: '__keyup__', + __Keydown: '__keydown__' }; // 默认状态 @@ -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.$eventEmitter.emit(this.events.StateUpdate, list); + this.$painter.update(this.$stateHandle.update(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.$painter.dispose(); - - if (this.$zr) { - this.$zr.dispose(); - } + this.$shapeFactory.destroy(); + this.$controller.destroy(); + this.$painter.destroy(); + this.$zr && 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: - this.$eventEmitter.emit.on(this.events.DataLoaded, cb, context); + case events.DataLoaded: + this.$eventEmitter.emit.on(events.DataLoaded, cb, context); break; - case this.events.StateLoaded: - this.$eventEmitter.emit.on(this.events.StateLoaded, cb, context); + case events.StateLoaded: + this.$eventEmitter.emit.on(events.StateLoaded, cb, context); break; - case this.events.ViewUpdate: - this.$eventEmitter.emit.on(this.events.ViewUpdate, cb, context); + case events.ViewUpdate: + this.$eventEmitter.emit.on(events.ViewUpdate, cb, context); break; - case this.events.StateUpdate: - this.$eventEmitter.emit.on(this.events.StateUpdate, cb, context); + case events.StateUpdate: + this.$eventEmitter.emit.on(events.StateUpdate, cb, context); break; - case this.events.OptionUpdate: - this.$eventEmitter.emit.on(this.events.OptionUpdate, cb, context); + case events.OptionUpdate: + this.$eventEmitter.emit.on(events.OptionUpdate, cb, context); break; - case this.events.Reflect: - this.$controller.on(this.events.Reflect, _.throttle(cb, 200), context); + case events.Reflect: + this.$controller.on(events.Reflect, _.throttle(cb, 200), context); break; - case this.events.Selected: - this.$controller.on(this.events.Selected, cb, context); + case events.Selected: + this.$controller.on(events.Selected, cb, context); break; - case this.events.ContextMenu: - this.$controller.on(this.events.ContextMenu, cb, context); + case events.ContextMenu: + this.$controller.on(events.ContextMenu, cb, context); break; - case this.events.DataZoom: - this.$controller.on(this.events.DataZoom, cb, context); + case events.DataZoom: + this.$controller.on(events.DataZoom, cb, context); break; - case this.events.Keydown: - this.$controller.on(this.events.Keydown, cb, context); + case events.Keydown: + this.$controller.on(events.Keydown, cb, context); break; - case this.events.Keypress: - this.$controller.on(this.events.Keypress, cb, context); + case events.Keypress: + this.$controller.on(events.Keypress, cb, context); break; - case this.events.Keyup: - this.$controller.on(this.events.Keyup, cb, context); + case events.Keyup: + 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: - this.$eventEmitter.emit.off(this.events.DataLoaded, cb, context); + case events.DataLoaded: + this.$eventEmitter.emit.off(events.DataLoaded, cb, context); break; - case this.events.StateLoaded: - this.$eventEmitter.emit.off(this.events.StateLoaded, cb, context); + case events.StateLoaded: + this.$eventEmitter.emit.off(events.StateLoaded, cb, context); break; - case this.events.ViewUpdate: - this.$eventEmitter.emit.off(this.events.ViewUpdate, cb, context); + case events.ViewUpdate: + this.$eventEmitter.emit.off(events.ViewUpdate, cb, context); break; - case this.events.StateUpdate: - this.$eventEmitter.emit.off(this.events.StateUpdate, cb, context); + case events.StateUpdate: + this.$eventEmitter.emit.off(events.StateUpdate, cb, context); break; - case this.events.OptionUpdate: - this.$eventEmitter.emit.off(this.events.OptionUpdate, cb, context); + case events.OptionUpdate: + this.$eventEmitter.emit.off(events.OptionUpdate, cb, context); break; - case this.events.Reflect: - this.$controller.off(this.events.Reflect, _.throttle(cb, 200)); + case events.Reflect: + this.$controller.off(events.Reflect, _.throttle(cb, 200)); break; - case this.events.Selected: - this.$controller.off(this.events.Selected, cb); + case events.Selected: + this.$controller.off(events.Selected, cb); break; - case this.events.ContextMenu: - this.$controller.off(this.events.ContextMenu, cb); + case events.ContextMenu: + this.$controller.off(events.ContextMenu, cb); break; - case this.events.DataZoom: - this.$controller.off(this.events.DataZoom, cb); + case events.DataZoom: + this.$controller.off(events.DataZoom, cb); break; - case this.events.Keydown: - this.$controller.off(this.events.Keydown, cb); + case events.Keydown: + this.$controller.off(events.Keydown, cb); break; - case this.events.Keypress: - this.$controller.off(this.events.Keypress, cb); + case events.Keypress: + this.$controller.off(events.Keypress, cb); break; - case this.events.Keyup: - this.$controller.off(this.events.Keyup, cb); + case events.Keyup: + this.$controller.off(events.Keyup, cb); break; } } diff --git a/src/iscs_new/maps.js b/src/iscs_new/maps.js index 606bb80a8..930f840a1 100644 --- a/src/iscs_new/maps.js +++ b/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; +export default JMaps; diff --git a/src/iscs_new/painter.js b/src/iscs_new/painter.js index e34bdacb6..09e2e03eb 100644 --- a/src/iscs_new/painter.js +++ b/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 TipsHandle from './tipsHandle'; +import shapeLayer from './constant/shapeLayer'; 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; diff --git a/src/iscs_new/selectHandle.js b/src/iscs_new/selectHandle.js index 0b7d02e91..d5e219ba0 100644 --- a/src/iscs_new/selectHandle.js +++ b/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; } diff --git a/src/iscs_new/selectingHandle.js b/src/iscs_new/selectingHandle.js index e70a1fead..5c3cdd06f 100644 --- a/src/iscs_new/selectingHandle.js +++ b/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) { diff --git a/src/iscs_new/stateHandle.js b/src/iscs_new/stateHandle.js index 519cd45d3..5610bbe6f 100644 --- a/src/iscs_new/stateHandle.js +++ b/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) { - - } - - __update2Self({instance, model}, state) { - - } - - __update2Measure({instance, model}, state) { - + updateDepState(shapeFactory, state) { } } diff --git a/src/iscs_new/tipsHandle.js b/src/iscs_new/tipsHandle.js deleted file mode 100644 index 41b8a2f41..000000000 --- a/src/iscs_new/tipsHandle.js +++ /dev/null @@ -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); - } -} diff --git a/src/iscs_new/transformHandle.js b/src/iscs_new/transformHandle.js index 1edccbdba..5b0d68f6f 100644 --- a/src/iscs_new/transformHandle.js +++ b/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; diff --git a/src/iscs_new/utils/events.js b/src/iscs_new/utils/events.js new file mode 100644 index 000000000..f0e3c7055 --- /dev/null +++ b/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', +} diff --git a/src/views/test/index.vue b/src/views/test/index.vue index e7aeb1eda..b1721132c 100644 --- a/src/views/test/index.vue +++ b/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; }