From b5582126bac0e69598b478cee08264d2c26b7d51 Mon Sep 17 00:00:00 2001 From: ival <610568032@qq.com> Date: Fri, 9 Apr 2021 13:57:39 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96iscs=5Fnew=20=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/iscs_new/controller.js | 14 ++- src/iscs_new/dragHandle.js | 6 +- src/iscs_new/factory/compose.js | 30 +++-- src/iscs_new/factory/element.js | 6 +- src/iscs_new/factory/index.js | 21 ++-- src/iscs_new/map.js | 47 ++++--- src/iscs_new/plugins/shapeBuilder/entry.vue | 36 ++++++ src/iscs_new/plugins/shapeBuilder/index.js | 89 +++++++------- .../plugins/shapeBuilder/shapeTypeSelect.vue | 24 ---- src/iscs_new/plugins/shapeProperty/entry.vue | 31 +++++ src/iscs_new/plugins/shapeProperty/index.js | 81 ++++++++++++ src/iscs_new/selectHandle.js | 12 +- src/iscs_new/selectingHandle.js | 3 +- src/iscs_new/utils/events.js | 2 +- src/iscs_new/utils/orders.js | 10 +- src/views/iscs_new/iscsDraw/index.vue | 14 +-- src/views/iscs_new/iscsDraw/iscsCanvas.vue | 16 ++- src/views/test/index.vue | 116 ++++++++++-------- 18 files changed, 367 insertions(+), 191 deletions(-) create mode 100644 src/iscs_new/plugins/shapeBuilder/entry.vue delete mode 100644 src/iscs_new/plugins/shapeBuilder/shapeTypeSelect.vue create mode 100644 src/iscs_new/plugins/shapeProperty/entry.vue create mode 100644 src/iscs_new/plugins/shapeProperty/index.js diff --git a/src/iscs_new/controller.js b/src/iscs_new/controller.js index 71adfb7ca..4f11f482c 100644 --- a/src/iscs_new/controller.js +++ b/src/iscs_new/controller.js @@ -59,7 +59,7 @@ export default class Controller extends Eventful { this.selectingHandle = new SelectingHandle(map, this); this.selectHandle = new SelectHandle(map, this); this.keyBoardHandle = new KeyBoardHandle(map, this); - this.storage = new Storage(); + this._storage = new Storage(); } initHandler(map) { @@ -147,7 +147,7 @@ export default class Controller extends Eventful { } isSelected(code) { - return this.storage.has(code) + return this._storage.has(code) } setTarget(target) { @@ -177,7 +177,7 @@ export default class Controller extends Eventful { zr.dom.focus(); this._isNotLeftMouse = eventTool.isMiddleOrRightButtonOnMouseUpDown(e); - this.trigger(events.Selected, this._target); + this.trigger(events.Click, this._target); this.selectingHandle.clear(); if (this._isNotLeftMouse) { @@ -324,12 +324,16 @@ export default class Controller extends Eventful { } clear() { - this.storage.clear(); - this.storage.clearClipboard(); + this._storage.clear(); + this._storage.clearClipboard(); this._target = null; this._pan = false; } + getStorage() { + return this._storage; + } + getKeyStr() { return this._shortcuts; } diff --git a/src/iscs_new/dragHandle.js b/src/iscs_new/dragHandle.js index ef9575c2c..a39d0e3e4 100644 --- a/src/iscs_new/dragHandle.js +++ b/src/iscs_new/dragHandle.js @@ -13,7 +13,8 @@ export default class DragHandle { } onDragStart(e) { - if (e.code && this.$controller.storage.has(e.code)) { + const storage = this.$controller.getStorage(); + if (e.code && storage.has(e.code)) { this._dragging = true; } } @@ -22,12 +23,13 @@ export default class DragHandle { const dx = e.dx; const dy = e.dy; const scaleRate = this.$option.getScaleRate(); + const storage = this.$controller.getStorage(); e.dx = dx / scaleRate; e.dy = dy / scaleRate; if (this._dragging) { - this.$controller.storage.values().forEach(target => { + storage.values().forEach(target => { if (target) { target.shapeFactory.hideHightLight(target);; target.drift(e); diff --git a/src/iscs_new/factory/compose.js b/src/iscs_new/factory/compose.js index a122874df..bd53ae254 100644 --- a/src/iscs_new/factory/compose.js +++ b/src/iscs_new/factory/compose.js @@ -77,12 +77,14 @@ class Compose extends AbstractShape { this.shapeFactory.hideHightLight(this); this.model.elementCodes.forEach(code => { const el = this.shapeFactory.getShapeByCode(code); - if (el && - el.model) { - this.shapeFactory.removeFromLayer(el.type)(el); - this.instance.add(el); - el.model.composeCode = this.code; - el.attr(el.model); + if (el) { + this.shapeFactory.hideHightLight(el); + if (el.model) { + this.shapeFactory.removeFromLayer(el.type)(el); + this.instance.add(el); + el.model.composeCode = this.code; + el.attr(el.model); + } } }) } @@ -93,13 +95,15 @@ class Compose extends AbstractShape { this.shapeFactory.hideHightLight(this); this.model.elementCodes.forEach(code => { const el = this.shapeFactory.getShapeByCode(code); - if (el && - el.model && - el.model.composeCode) { - this.instance.remove(el); - this.shapeFactory.addToLayer(el.type)(el); - el.model.composeCode = ''; - el.attr(el.model); + if (el) { + this.shapeFactory.hideHightLight(el); + if (el.model && + el.model.composeCode) { + this.instance.remove(el); + this.shapeFactory.addToLayer(el.type)(el); + el.model.composeCode = ''; + el.attr(el.model); + } } }) this.model.elementCodes = []; diff --git a/src/iscs_new/factory/element.js b/src/iscs_new/factory/element.js index 3141ea2cb..f82c95eeb 100644 --- a/src/iscs_new/factory/element.js +++ b/src/iscs_new/factory/element.js @@ -76,11 +76,12 @@ class Element extends AbstractShape { if (compose && compose.model && compose.model.elementCodes) { + this.shapeFactory.hideHightLight(compose); const index = compose.model.elementCodes.findIndex(this.type); if (index < 0) { compose.model.elementCodes.push(this.type); this.shapeFactory.removeFormLayer(el.type, this); - compose.add(this); + compose.instance.add(this); } } } @@ -93,10 +94,11 @@ class Element extends AbstractShape { if (compose && compose.model && compose.model.elementCodes) { + this.shapeFactory.hideHightLight(compose); const index = compose.model.elementCodes.findIndex(this.type); if (index >= 0) { compose.model.elementCodes.splice(index, 1); - compose.remove(this); + compose.instance.remove(this); this.shapeFactory.addToLayer(el.type)(this); } } diff --git a/src/iscs_new/factory/index.js b/src/iscs_new/factory/index.js index 14faf28d9..22a3201b0 100644 --- a/src/iscs_new/factory/index.js +++ b/src/iscs_new/factory/index.js @@ -110,11 +110,11 @@ class ShapeFactory extends Eventful { try { this.source = source; zrUtil.each(source.elementList ||[], model => { - take(this.storageShape(this.createShape(model, shapeType.Element))); + take(this.addShape(this.createShape(model, shapeType.Element))); }, this); zrUtil.each(source.composeList ||[], model => { - take(this.storageShape(this.createShape(model, shapeType.Compose))); + take(this.addShape(this.createShape(model, shapeType.Compose))); }, this); } catch (error) { console.error('[ERROR] ', error); @@ -126,14 +126,15 @@ class ShapeFactory extends Eventful { const shapeBuilder = shapeBuilderMap[shapeType]; if (shapeBuilder) { shape = new shapeBuilder({model, shapeType, shapeFactory: this}); - shape.combine(); } return shape; } - storageShape(shape) { + addShape(shape) { if (shape && shape.code) { + this.hideHightLight(shape); this.mapShape[shape.code] = shape; + shape.combine(); } return shape; } @@ -141,7 +142,7 @@ class ShapeFactory extends Eventful { removeShape(shape) { if (shape && shape.code) { this.hideHightLight(shape); - shape.uncouple(shape); + shape.uncouple(); delete this.mapShape[shape.code]; } return shape; @@ -243,15 +244,15 @@ function update2List(source, model, action, name='') { let updateModel = model; const i = list.findIndex(elem => { return elem.code == model.code; }) switch(action.order) { - case orders.BINDING: - case orders.ADD: + case orders.Binding: + case orders.Add: list.push(model); break; - case orders.UNBINDING: - case orders.DELETE: + case orders.Unbinding: + case orders.Delete: i >= 0 && list.splice(i, 1); break; - case orders.UPDATE: + case orders.Update: updateModel = Object.assign(list[i]||{}, model) break; } diff --git a/src/iscs_new/map.js b/src/iscs_new/map.js index 6bac2816b..b246e57d9 100644 --- a/src/iscs_new/map.js +++ b/src/iscs_new/map.js @@ -9,10 +9,10 @@ import Controller from './controller'; import StateHandle from './stateHandle'; import ShapeFactory from './factory'; import orders from './utils/orders'; +import shapeType from './constant/shapeType'; const renderer = 'canvas'; const devicePixelRatio = 1; - class JMap { constructor(opts) { // 内部鼠标事件 @@ -75,9 +75,8 @@ class JMap { }; // 加载插件 - if (opts.plugins) { - opts.plugins.forEach(el => { this.use(el); }); - } + this.plugins = opts.plugins||[]; + this.plugins.forEach(el => { this.use(el); }); } setMap(templates=[], source={}, eventOpts={}) { @@ -151,7 +150,7 @@ class JMap { repaint(source={}) { this.$shapeFactory.parse(source, shape => { if (shape) { - this.$painter.add(shape); + this.$painter.add(shape) } }); return this; @@ -168,13 +167,13 @@ class JMap { if (updateModel) { this.$controller.clear() switch(action.order) { - case orders.BINDING: - case orders.ADD: + case orders.Binding: + case orders.Add: newShape = this.$shapeFactory.createShape(updateModel, action.shapeType); - this.$shapeFactory.storageShape(newShape) + this.$shapeFactory.addShape(newShape) this.$painter.add(newShape); break; - case orders.DELETE: + case orders.Delete: deps = curShape.getDepShapes(); deps.forEach(el => { updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(el, {...action, shapeType: el.shapeType}): el; @@ -186,20 +185,21 @@ class JMap { } }); break; - case orders.UPDATE: - updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action): model; + case orders.Update: oldShape = this.$shapeFactory.removeShape(curShape); newShape = this.$shapeFactory.createShape(updateModel, action.shapeType); this.$painter.removeFromLayer(oldShape.type, oldShape.instanceHightLight); this.$painter.removeFromLayer(oldShape.type, newShape.instanceHightLight); this.$painter.remove(oldShape); - this.$shapeFactory.storageShape(newShape) + this.$shapeFactory.addShape(newShape) this.$painter.add(newShape); break; - case orders.UNBINDING: + case orders.Unbinding: oldShape = this.$shapeFactory.removeShape(curShape); this.$painter.removeFromLayer(oldShape.type, oldShape.instanceHightLight); this.$painter.remove(oldShape); + this.$shapeFactory.addShape(oldShape); + this.$painter.add(oldShape); break; } } @@ -235,6 +235,10 @@ class JMap { return this.$controller; } + getStorage() { + return this.$controller.getStorage(); + } + getShapeFactory() { return this.$shapeFactory; } @@ -275,8 +279,9 @@ class JMap { this.$zr.refresh() } - use(install) { - install(this); + use(el) { + this.plugins.includes(el)||this.plugins.push(el) + el.install(this); } destroy() { @@ -286,6 +291,10 @@ class JMap { this.$controller.destroy(); this.$painter.destroy(); this.$zr && this.$zr.dispose(); + this.plugins.forEach(el => { + el.uninstall(this); + }) + this.plugins = []; } on(name, cb, context) { @@ -311,8 +320,8 @@ class JMap { this.$eventEmitter.on(events.OptionUpdate, cb, context); break; - case events.Selected: - this.$controller.on(events.Selected, cb, context); + case events.Click: + this.$controller.on(events.Click, cb, context); break; case events.ContextMenu: this.$controller.on(events.ContextMenu, cb, context); @@ -362,8 +371,8 @@ class JMap { this.$eventEmitter.off(events.OptionUpdate, cb, context); break; - case events.Selected: - this.$controller.off(events.Selected, cb); + case events.Click: + this.$controller.off(events.Click, cb); break; case events.ContextMenu: this.$controller.off(events.ContextMenu, cb); diff --git a/src/iscs_new/plugins/shapeBuilder/entry.vue b/src/iscs_new/plugins/shapeBuilder/entry.vue new file mode 100644 index 000000000..5f3d1e19e --- /dev/null +++ b/src/iscs_new/plugins/shapeBuilder/entry.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/src/iscs_new/plugins/shapeBuilder/index.js b/src/iscs_new/plugins/shapeBuilder/index.js index 4a56fcf40..2e67e4238 100644 --- a/src/iscs_new/plugins/shapeBuilder/index.js +++ b/src/iscs_new/plugins/shapeBuilder/index.js @@ -1,80 +1,81 @@ import Vue from 'vue'; -import shapeTypeSelect from './shapeTypeSelect.vue'; +import events from '@/iscs_new/utils/events'; +import entry from './entry.vue'; -const GrSelect = Vue.extend(shapeTypeSelect); -const toggleVisible = (el, show) => { +const VuePage = Vue.extend(entry); +const toggling = (page, show) => { if (show) { Vue.nextTick(() => { - el.instance.visible = true; + page.visible = true; }); } else { - el.instance.visible = false; + page.visible = false; } }; - -class Handle { - constructor() { - this._shapeType = ''; - } - - accept({shapeType}) { - console.log(111111111111111, 'accept') - this._shapeType = shapeType; - } - - onSelect(e) { - // console.log('onSelect', e) - } - +const handle = { + onClick(e) { + if (!e) { + this.page.type = ''; + } + console.log('onClick', this, e) + }, onContextMenu(e) { - // console.log('onContextMenu', e) - } - + console.log('onContextMenu', this, e) + }, onBuildShape(e) { - // console.log('onBuildShape', e) + console.log('onBuildShape', this, e) } } - class ShapeBuilder { - constructor(map, handle) { + constructor(map) { + this.zr = map.getZr(); this.map = map; - this.handle = handle; - this.initUI(map.getZr()); + this.page = this.initUI(); } - initUI(zr) { - const el = zr.dom; - const grSelect = new GrSelect({ + initUI() { + const el = this.zr.dom; + const page = new VuePage({ el: document.createElement('div'), data () {} }); - el.instance = grSelect; - el.dom = grSelect.$el; + el.page = page; + el.dom = page.$el; el.grSelectStyle = {}; el.appendChild(el.dom); - el.instance.$on('change', e => this.handle.accept(e)); - this.grSelect = grSelect; + return page; } addEventListener() { if (this.map) { - this.map.on(events.Select, this.handle.onSelect, this.handle); - this.map.on(events.ContextMenu, this.handle.onContextMenu, this.handle); - this.map.on(events.BuildShape, this.handle.onBuildShape, this.handle); + console.log(this.map) + this.map.on(events.Click, handle.onClick, this); + this.map.on(events.ContextMenu, handle.onContextMenu, this); + this.map.on(events.BuildShape, handle.onBuildShape, this); } } removeEventListener() { - if (this.zr) { - this.map.off(events.Select, this.handle.onSelect, this.handle); - this.map.off(events.ContextMenu, this.handle.onContextMenu, this.handle); - this.map.off(events.BuildShape, this.handle.onBuildShape, this.handle); + if (this.map) { + this.map.off(events.Click, handle.onClick, this); + this.map.off(events.ContextMenu, handle.onContextMenu, this); + this.map.off(events.BuildShape, handle.onBuildShape, this); } } } -export default function install(map) { - const shapeBuilder = new ShapeBuilder(map, new Handle()); +export default { + el: null, + install(map) { + this.el = new ShapeBuilder(map); + this.el.addEventListener(); + }, + uninstall(map) { + if (this.el) { + this.el.removeEventListener(); + this.el = null; + } + } } diff --git a/src/iscs_new/plugins/shapeBuilder/shapeTypeSelect.vue b/src/iscs_new/plugins/shapeBuilder/shapeTypeSelect.vue deleted file mode 100644 index b636452bf..000000000 --- a/src/iscs_new/plugins/shapeBuilder/shapeTypeSelect.vue +++ /dev/null @@ -1,24 +0,0 @@ - - - - - diff --git a/src/iscs_new/plugins/shapeProperty/entry.vue b/src/iscs_new/plugins/shapeProperty/entry.vue new file mode 100644 index 000000000..c9eea5e49 --- /dev/null +++ b/src/iscs_new/plugins/shapeProperty/entry.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/src/iscs_new/plugins/shapeProperty/index.js b/src/iscs_new/plugins/shapeProperty/index.js new file mode 100644 index 000000000..29ba3ace5 --- /dev/null +++ b/src/iscs_new/plugins/shapeProperty/index.js @@ -0,0 +1,81 @@ +import Vue from 'vue'; +import events from '@/iscs_new/utils/events'; +import entry from './entry.vue'; + +const elPage = Vue.extend(entry); + +const toggling = (page, show) => { + if (show) { + Vue.nextTick(() => { + page.visible = true; + }); + } else { + page.visible = false; + } +}; + + +const handle = { + onClick(e) { + console.log(this) + toggling(this.page, !!e); + // console.log('onClick', this, e) + }, + onContextMenu(e) { + // console.log('onContextMenu', this, e) + }, + onBuildShape(e) { + // console.log('onBuildShape', this, e) + } +} + +class ShapeBuilder { + constructor(map) { + this.zr = map.getZr(); + this.map = map; + this.page = this.initUI(); + } + + initUI() { + const el = this.zr.dom; + const page = new elPage({ + el: document.createElement('div'), + data () {} + }); + el.page = page; + el.dom = page.$el; + el.grSelectStyle = {}; + el.appendChild(el.dom); + return page; + } + + addEventListener() { + if (this.map) { + this.map.on(events.Click, handle.onClick, this); + this.map.on(events.ContextMenu, handle.onContextMenu, this); + this.map.on(events.BuildShape, handle.onBuildShape, this); + } + } + + removeEventListener() { + if (this.map) { + this.map.off(events.Click, handle.onClick, this); + this.map.off(events.ContextMenu, handle.onContextMenu, this); + this.map.off(events.BuildShape, handle.onBuildShape, this); + } + } +} + +export default { + el: null, + install(map) { + this.el = new ShapeBuilder(map); + this.el.addEventListener(); + }, + uninstall(map) { + if (this.el) { + this.el.removeEventListener(); + this.el = null; + } + } +} diff --git a/src/iscs_new/selectHandle.js b/src/iscs_new/selectHandle.js index 48d465b6f..d84096bab 100644 --- a/src/iscs_new/selectHandle.js +++ b/src/iscs_new/selectHandle.js @@ -13,6 +13,7 @@ export default class SelectHandle { onSelected(e) { if (e.target) { + const storage = this.$controller.getStorage(); this.e = {...e}; if ([`Control`].includes(this.$controller.getKeyStr())) { if (this.$controller.isSelected(e.target.code)) { @@ -21,7 +22,7 @@ export default class SelectHandle { } else { this.addSelected(e.target); } - } else if (!this.$controller.storage.has(e.target.code)){ + } else if (!storage.has(e.target.code)){ this.clear(); this.addSelected(e.target); } else { @@ -31,17 +32,20 @@ export default class SelectHandle { } addSelected(target) { - this.$controller.storage.set(target.code, target); + const storage = this.$controller.getStorage(); + storage.set(target.code, target); target.shapeFactory.showHightLight(target); } delSelected(target) { + const storage = this.$controller.getStorage(); target.shapeFactory.hideHightLight(target);; - this.$controller.storage.delete(target.code); + storage.delete(target.code); } clear() { - this.$controller.storage.values().forEach(target => { + const storage = this.$controller.getStorage(); + storage.values().forEach(target => { this.delSelected(target); }); } diff --git a/src/iscs_new/selectingHandle.js b/src/iscs_new/selectingHandle.js index ac8943156..34f9910e0 100644 --- a/src/iscs_new/selectingHandle.js +++ b/src/iscs_new/selectingHandle.js @@ -268,7 +268,8 @@ export default class SelectingHandle { } setSelected(target) { - this.$controller.storage.set(target.code, target); + const storage = this.$controller.getStorage(); + storage.set(target.code, target); target.shapeFactory.showHightLight(target); } diff --git a/src/iscs_new/utils/events.js b/src/iscs_new/utils/events.js index d0dff6dc6..d0795bd07 100644 --- a/src/iscs_new/utils/events.js +++ b/src/iscs_new/utils/events.js @@ -1,6 +1,6 @@ export default { Reflect: 'reflect', - Selected: 'selected', + Click: 'click', ContextMenu: 'contextmenu', DataZoom: 'dataZoom', Keydown: 'keydown', diff --git a/src/iscs_new/utils/orders.js b/src/iscs_new/utils/orders.js index e0dee4569..8897e4cbb 100644 --- a/src/iscs_new/utils/orders.js +++ b/src/iscs_new/utils/orders.js @@ -1,7 +1,7 @@ export default { - ADD: '&ADD', - DELETE: '&DEL', - UPDATE: '&UPT', - BINDING: '&BINDING', - UNBINDING: '&UNBINDING', + Add: '&Add', + Delete: '&DEL', + Update: '&UPT', + Binding: '&Binding', + Unbinding: '&Unbinding', } diff --git a/src/views/iscs_new/iscsDraw/index.vue b/src/views/iscs_new/iscsDraw/index.vue index 08544395a..a4087caa6 100644 --- a/src/views/iscs_new/iscsDraw/index.vue +++ b/src/views/iscs_new/iscsDraw/index.vue @@ -36,7 +36,7 @@ import BuilderFactory from '@/iscs_new/core/form/builderFactory'; import DataForm from '../components/dataForm'; import orders from '@/iscs_new/utils/orders'; import * as utils from '@/iscs_new/utils/utils'; -import idb from '../utils/indexedDb.js'; +import Idb from '../utils/indexedDb.js'; import shapeType from '@/iscs_new/constant/shapeType.js'; export default { @@ -93,9 +93,9 @@ export default { (temp,el) => el&&temp? temp.union(el.getBoundingRect().clone()): el.getBoundingRect(), null); const position = rect? [(rect.x + rect.width)/2, (rect.y + rect.height)/2]: [0,0]; const model = { id, name, type, shapeList, position }; - idb.delete('composeList', model.id); - idb.write('composeList', model); - idb.list('composeList').then(list => { + Idb.delete('composeList', model.id); + Idb.write('composeList', model); + Idb.list('composeList').then(list => { console.log(list) }) } @@ -124,7 +124,7 @@ export default { newModel.type = this.enabledTab; newModel.name = '<名称>'; newModel.stateList = []; - this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.ADD}}]); + this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.Add}}]); this.clear(this.enabledTab); } }); @@ -136,7 +136,7 @@ export default { model.code = this.selected.code; model.type = this.selected.type; model.name = this.selected.name; - this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.UPDATE}}]); + this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.Update}}]); this.clear(this.enabledTab); } }); @@ -148,7 +148,7 @@ export default { model.code = this.selected.code; model.type = this.selected.type; model.name = this.selected.name; - this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.DELETE}}]); + this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.Delete}}]); this.clear(this.enabledTab); } }); diff --git a/src/views/iscs_new/iscsDraw/iscsCanvas.vue b/src/views/iscs_new/iscsDraw/iscsCanvas.vue index c93860ef4..55e3de03b 100644 --- a/src/views/iscs_new/iscsDraw/iscsCanvas.vue +++ b/src/views/iscs_new/iscsDraw/iscsCanvas.vue @@ -7,7 +7,9 @@