From cc6f67dcc0a871b988c4660dc5a9d98803980553 Mon Sep 17 00:00:00 2001 From: ival <160568032@qq.com> Date: Wed, 31 Mar 2021 21:52:13 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/iscs_new/controller.js | 12 ++++-- src/iscs_new/core/abstractShape.js | 31 ++++++++++++-- src/iscs_new/dragHandle.js | 18 +++----- src/iscs_new/factory/compose.js | 25 +++++++++--- src/iscs_new/factory/element.js | 27 ++++++++++-- src/iscs_new/factory/hightLightHandle.js | 4 +- src/iscs_new/factory/index.js | 16 +++++++- src/iscs_new/map.js | 52 +++++++++++++----------- src/iscs_new/painter.js | 1 + src/iscs_new/selectHandle.js | 4 +- src/iscs_new/selectingHandle.js | 12 ++++-- src/iscs_new/utils/eventEmitter.js | 34 ---------------- src/iscs_new/utils/events.js | 1 - src/views/test/index.vue | 1 + 14 files changed, 141 insertions(+), 97 deletions(-) delete mode 100644 src/iscs_new/utils/eventEmitter.js diff --git a/src/iscs_new/controller.js b/src/iscs_new/controller.js index 66fdedb23..394b1ea15 100644 --- a/src/iscs_new/controller.js +++ b/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; } diff --git a/src/iscs_new/core/abstractShape.js b/src/iscs_new/core/abstractShape.js index 77b0f4a5b..f0dae3296 100644 --- a/src/iscs_new/core/abstractShape.js +++ b/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() {} diff --git a/src/iscs_new/dragHandle.js b/src/iscs_new/dragHandle.js index 0cf5dcc28..915e99bfa 100644 --- a/src/iscs_new/dragHandle.js +++ b/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 => { - if (dragTarget) { - if (dragTarget.highLightInstance) { - this.$painter.removeFromLevel(shapeLayer.HightLight)(dragTarget.highLightInstance); - dragTarget.highLightInstance = null; - } - - dragTarget.inactive(); - - dragTarget.draft(e); - - dragTarget.active(); + // const size = this.$controller.storage.getClipboardSize(); + this.$controller.storage.values().forEach(target => { + if (target) { + target.inactive(); + target.draft(e); + target.active(target == this.$controller.getTarget()); } }); } diff --git a/src/iscs_new/factory/compose.js b/src/iscs_new/factory/compose.js index 8f97e054a..0b4ae117a 100644 --- a/src/iscs_new/factory/compose.js +++ b/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 && diff --git a/src/iscs_new/factory/element.js b/src/iscs_new/factory/element.js index 235016eeb..9419eba6a 100644 --- a/src/iscs_new/factory/element.js +++ b/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() { - this.shapeFactory.trigger(shapeEvent.ShowHightLight, this.instance.getBoundingRect()); + active(selected=true) { + 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 && diff --git a/src/iscs_new/factory/hightLightHandle.js b/src/iscs_new/factory/hightLightHandle.js index e600de35d..60c144a06 100644 --- a/src/iscs_new/factory/hightLightHandle.js +++ b/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' } } diff --git a/src/iscs_new/factory/index.js b/src/iscs_new/factory/index.js index 1aef635e9..c9e123dd5 100644 --- a/src/iscs_new/factory/index.js +++ b/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; } diff --git a/src/iscs_new/map.js b/src/iscs_new/map.js index ef38d9598..3433011e8 100644 --- a/src/iscs_new/map.js +++ b/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)); diff --git a/src/iscs_new/painter.js b/src/iscs_new/painter.js index ac067a625..20eff4d3e 100644 --- a/src/iscs_new/painter.js +++ b/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(); } } diff --git a/src/iscs_new/selectHandle.js b/src/iscs_new/selectHandle.js index a8b9f0fa0..8f5047a51 100644 --- a/src/iscs_new/selectHandle.js +++ b/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.active(target == this.$controller.getTarget()); } delSelected(target) { target.inactive(); - console.log('bug') this.$controller.storage.delete(target.model.code); } diff --git a/src/iscs_new/selectingHandle.js b/src/iscs_new/selectingHandle.js index b21a732c7..50b3d6e4d 100644 --- a/src/iscs_new/selectingHandle.js +++ b/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) { diff --git a/src/iscs_new/utils/eventEmitter.js b/src/iscs_new/utils/eventEmitter.js deleted file mode 100644 index 635293708..000000000 --- a/src/iscs_new/utils/eventEmitter.js +++ /dev/null @@ -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; diff --git a/src/iscs_new/utils/events.js b/src/iscs_new/utils/events.js index f0e3c7055..c33022e90 100644 --- a/src/iscs_new/utils/events.js +++ b/src/iscs_new/utils/events.js @@ -6,7 +6,6 @@ export default { Keydown: 'keydown', Keyup: 'keyup', Keypress: 'keypress', - DataLoaded: 'dataLoaded', ViewLoaded: 'viewLoaded', StateLoaded: 'stateLoaded', diff --git a/src/views/test/index.vue b/src/views/test/index.vue index a957f182f..f8dcae4b4 100644 --- a/src/views/test/index.vue +++ b/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