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 1/3] =?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 @@ From f78fa048422ed30fa033935b59c6f9559ccd9c8b Mon Sep 17 00:00:00 2001 From: ival <610568032@qq.com> Date: Fri, 9 Apr 2021 14:37:43 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/iscs_new/core/abstractShape.js | 6 +++++- src/iscs_new/factory/element.js | 2 ++ src/iscs_new/factory/index.js | 2 +- src/views/iscs_new/iscsDraw/index.vue | 8 ++++---- src/views/iscs_new/iscsDraw/iscsCanvas.vue | 3 ++- src/views/test/index.vue | 2 +- 6 files changed, 15 insertions(+), 8 deletions(-) diff --git a/src/iscs_new/core/abstractShape.js b/src/iscs_new/core/abstractShape.js index 8721b09e0..113b7b69e 100644 --- a/src/iscs_new/core/abstractShape.js +++ b/src/iscs_new/core/abstractShape.js @@ -42,12 +42,16 @@ class AbstractShape extends Group { drift({dx, dy}) { this.model.base.position[0] = this.model.base.position[0] + dx; this.model.base.position[1] = this.model.base.position[1] + dy; + this.instance.scale = this.model.base.scale; + this.instance.position = this.model.base.position; + this.instance.rotation = this.model.base.rotation*Math.PI/180; this.instance.origin = utils.createOrigin(this.instance); + console.log(this.model.base.position, this.model.base.rotation); this.instance.transform = utils.createTransform({scale: this.model.base.scale, position: this.model.base.position, rotation: this.model.base.rotation*Math.PI/180}); this.setInvisible(this.model.base.hide) } - // 修改属性 + // 修改状态 attr(attrs) { if (this.instance) { this.instance.attr(attrs); diff --git a/src/iscs_new/factory/element.js b/src/iscs_new/factory/element.js index f82c95eeb..bc10b0bd0 100644 --- a/src/iscs_new/factory/element.js +++ b/src/iscs_new/factory/element.js @@ -82,6 +82,7 @@ class Element extends AbstractShape { compose.model.elementCodes.push(this.type); this.shapeFactory.removeFormLayer(el.type, this); compose.instance.add(this); + compose.attr(compose.model); } } } @@ -99,6 +100,7 @@ class Element extends AbstractShape { if (index >= 0) { compose.model.elementCodes.splice(index, 1); compose.instance.remove(this); + compose.attr(compose.model); this.shapeFactory.addToLayer(el.type)(this); } } diff --git a/src/iscs_new/factory/index.js b/src/iscs_new/factory/index.js index 22a3201b0..6e865a63e 100644 --- a/src/iscs_new/factory/index.js +++ b/src/iscs_new/factory/index.js @@ -246,7 +246,7 @@ function update2List(source, model, action, name='') { switch(action.order) { case orders.Binding: case orders.Add: - list.push(model); + i < 0 && list.push(model); break; case orders.Unbinding: case orders.Delete: diff --git a/src/views/iscs_new/iscsDraw/index.vue b/src/views/iscs_new/iscsDraw/index.vue index a4087caa6..67d7b75ee 100644 --- a/src/views/iscs_new/iscsDraw/index.vue +++ b/src/views/iscs_new/iscsDraw/index.vue @@ -105,7 +105,7 @@ export default { }, onSelected(em) { if (em.model) { - this.selected = JSON.parse(JSON.stringify(em.model)); + this.selected = utils.deepClone(em.model); const elem = this.elementList.find(el => el.code == this.selected.type); if (elem) { elem.model = this.selected; @@ -119,7 +119,7 @@ export default { this.$refs['dataform'+this.enabledTab][0].$refs['form'].validate((valid) => { if (valid) { const formModel = this.$refs['dataform' + this.enabledTab][0].formModel; - const newModel = JSON.parse(JSON.stringify(formModel)); + const newModel = utils.deepClone(formModel); newModel.code = utils.getUID(this.enabledTab); newModel.type = this.enabledTab; newModel.name = '<名称>'; @@ -132,7 +132,7 @@ export default { onModify() { this.$refs['dataform' + this.enabledTab][0].$refs['form'].validate((valid) => { if (valid) { - const model = this.$refs['dataform' + this.enabledTab][0].formModel; + const model = utils.deepClone(this.$refs['dataform' + this.enabledTab][0].formModel); model.code = this.selected.code; model.type = this.selected.type; model.name = this.selected.name; @@ -144,7 +144,7 @@ export default { onDelete() { this.$refs['dataform' + this.enabledTab][0].$refs['form'].validate((valid) => { if (valid) { - const model = this.$refs['dataform' + this.enabledTab][0].formModel; + const model = utils.deepClone(this.$refs['dataform' + this.enabledTab][0].formModel); model.code = this.selected.code; model.type = this.selected.type; model.name = this.selected.name; diff --git a/src/views/iscs_new/iscsDraw/iscsCanvas.vue b/src/views/iscs_new/iscsDraw/iscsCanvas.vue index 55e3de03b..34bd551e9 100644 --- a/src/views/iscs_new/iscsDraw/iscsCanvas.vue +++ b/src/views/iscs_new/iscsDraw/iscsCanvas.vue @@ -81,7 +81,7 @@ export default { offsetY: 0 }, plugins: [ - ShapeBuilder, + // ShapeBuilder, // ShapeProperty ] }); @@ -135,6 +135,7 @@ export default { }, // 点击选择事件 onClick(em={}) { + console.log(em); this.$emit('selected', em); }, onReflect(em={}) { diff --git a/src/views/test/index.vue b/src/views/test/index.vue index 09f3492e6..f1e225046 100644 --- a/src/views/test/index.vue +++ b/src/views/test/index.vue @@ -93,7 +93,7 @@ export default { }, plugins: [ ShapeBuilder, - ShapeProperty + // ShapeProperty ] }); From 5c19aab68c5e87ef829cc37fbd2d1c7235fba61f Mon Sep 17 00:00:00 2001 From: ival <610568032@qq.com> Date: Fri, 9 Apr 2021 16:50:26 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E4=BF=AE=E6=94=B9=20=E5=88=9B=E5=BB=BAiscs?= =?UTF-8?q?=E5=88=9B=E5=BB=BA=E5=85=83=E7=B4=A0=E7=9A=84=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/iscs_new/core/form/builderFactory.js | 38 ---- src/iscs_new/core/form/elementConst.js | 29 +-- src/iscs_new/core/form/formBuilder.js | 67 +++--- src/iscs_new/map.js | 12 +- src/iscs_new/plugins/shapeBuilder/entry.vue | 36 +++- src/iscs_new/plugins/shapeBuilder/index.js | 20 +- .../plugins/shapeContextMenu/entry.vue | 121 +++++++++++ .../plugins/shapeContextMenu/index.js | 79 +++++++ .../plugins/shapeContextMenu/menu-item.vue | 202 ++++++++++++++++++ src/iscs_new/plugins/shapeProperty/entry.vue | 15 +- src/iscs_new/plugins/shapeProperty/index.js | 16 +- src/iscs_new/selectingHandle.js | 6 +- src/iscs_new/utils/events.js | 2 +- src/views/iscs_new/components/dataForm.vue | 28 +-- src/views/iscs_new/iscsDesign/index.vue | 4 +- src/views/iscs_new/iscsDraw/index.vue | 12 +- src/views/iscs_new/iscsDraw/iscsCanvas.vue | 6 +- src/views/test/index.vue | 4 +- 18 files changed, 536 insertions(+), 161 deletions(-) delete mode 100644 src/iscs_new/core/form/builderFactory.js create mode 100644 src/iscs_new/plugins/shapeContextMenu/entry.vue create mode 100644 src/iscs_new/plugins/shapeContextMenu/index.js create mode 100644 src/iscs_new/plugins/shapeContextMenu/menu-item.vue diff --git a/src/iscs_new/core/form/builderFactory.js b/src/iscs_new/core/form/builderFactory.js deleted file mode 100644 index 37dd19cad..000000000 --- a/src/iscs_new/core/form/builderFactory.js +++ /dev/null @@ -1,38 +0,0 @@ -import {elementConst} from './elementConst'; -import form2Base from './form2Base'; -class BuilderFactory { - constructor() { - this.formList = []; - } - getFormList() { - const elementList = Object.values(elementConst); - elementList.forEach(element=>{ - const temp = {}; - temp.code = element.code; - temp.name = element.name; - temp.formGroup = []; - temp.model = {}; - temp.model['name'] = '<名称>'; - // 添加通用配置 - temp.model['base'] = {}; - form2Base.forEach(each=>{ - temp.model['base'][each.prop] = each.value; - }); - temp.formGroup.push({name:'通用配置', code:'base', styleList:form2Base}); - - const list = [{name:'绘图配置', type:'shape'}, {name:'样式配置', type:'style'}]; - list.forEach(eachType=>{ - temp.model[eachType.type] = {}; - const eachList = element.formList[eachType.type]; - eachList.forEach(each=>{ - temp.model[eachType.type][each.prop] = each.value; - }); - temp.formGroup.push({name:eachType.name, code:eachType.type, styleList:eachList}); - }); - this.formList.push(temp); - }); - return this.formList; - } -} - -export default BuilderFactory; diff --git a/src/iscs_new/core/form/elementConst.js b/src/iscs_new/core/form/elementConst.js index a90884cf8..19c5e1c58 100644 --- a/src/iscs_new/core/form/elementConst.js +++ b/src/iscs_new/core/form/elementConst.js @@ -5,9 +5,9 @@ import form2TextStyle from './form2TextStyle'; import types from './types'; const graphicType = Object.fromEntries(Object.keys(graphic).map(type => [type, type])); -export const elementConst = { +const elementConst = { [graphicType.Line]: { - code: graphicType.Line, + type: graphicType.Line, name:'线段', formList: { style: [ @@ -66,7 +66,7 @@ export const elementConst = { } }, [graphicType.Text]: { - code: graphicType.Text, + type: graphicType.Text, name:'文字', formList: { style: [ @@ -77,7 +77,7 @@ export const elementConst = { } }, [graphicType.Rect]: { - code: graphicType.Rect, + type: graphicType.Rect, name:'矩形', formList: { style: [ @@ -158,7 +158,7 @@ export const elementConst = { } }, [graphicType.Circle]: { - code: graphicType.Circle, + type: graphicType.Circle, name:'圆形', formList:{ style: [ @@ -214,7 +214,7 @@ export const elementConst = { } }, [graphicType.Polygon]: { - code: graphicType.Polygon, + type: graphicType.Polygon, name:'多边形', formList: { style: [ @@ -260,7 +260,7 @@ export const elementConst = { } }, [graphicType.Arrow]: { - code: graphicType.Arrow, + type: graphicType.Arrow, name:'箭头', formList: { style: [ @@ -272,7 +272,7 @@ export const elementConst = { } }, [graphicType.Polyline]: { - code: graphicType.Polyline, + type: graphicType.Polyline, name:'多边形折线段', formList: { style: [ @@ -308,7 +308,7 @@ export const elementConst = { } }, [graphicType.Isogon]: { - code: graphicType.Isogon, + type: graphicType.Isogon, name:'正多边形', formList: { style: [ @@ -377,7 +377,7 @@ export const elementConst = { } }, [graphicType.Ellipse]: { - code: graphicType.Ellipse, + type: graphicType.Ellipse, name:'椭圆', formList: { style: [ @@ -446,7 +446,7 @@ export const elementConst = { } }, [graphicType.Arc]: { - code: graphicType.Arc, + type: graphicType.Arc, name:'圆弧', formList: { style: [ @@ -531,7 +531,7 @@ export const elementConst = { } }, [graphicType.Sector]: { - code: graphicType.Sector, + type: graphicType.Sector, name:'扇形', formList: { style: [ @@ -638,7 +638,7 @@ export const elementConst = { } }, [graphicType.Heart]: { - code: graphicType.Heart, + type: graphicType.Heart, name:'心形', formList: { style: [ @@ -707,7 +707,7 @@ export const elementConst = { } }, [graphicType.Droplet]: { - code: graphicType.Droplet, + type: graphicType.Droplet, name:'水滴', formList: { style: [ @@ -775,3 +775,4 @@ export const elementConst = { } } }; +export default elementConst diff --git a/src/iscs_new/core/form/formBuilder.js b/src/iscs_new/core/form/formBuilder.js index 7b9da0b1c..8027f570e 100644 --- a/src/iscs_new/core/form/formBuilder.js +++ b/src/iscs_new/core/form/formBuilder.js @@ -1,37 +1,40 @@ -class FormBuilder { - constructor(formStyle = {}) { - this.formStyle = { - style: {}, - ...JSON.parse(JSON.stringify(formStyle)), - } - } +import elementConst from './elementConst'; +import form2Base from './form2Base'; - setBase(base = {}) { - Object.assign(this.formStyle, - Object.fromEntries( - Object.entries(base).filter(el => !['style'].includes(el[0])) - ) - ); - return this; - } +const formBuilder = { + buildForm(el) { + const form = {}; + form.type = el.type; + form.name = el.name; + form.formGroup = []; + form.model = {}; - setStyle(style = {}) { - Object.assign(this.formStyle.style, - Object.fromEntries( - Object.entries(style).filter(el => !['truncate'].includes(el[0])) - ) - ); - return this; - } + // 添加通用配置 + form.model['base'] = {}; + form2Base.forEach(each=>{ + form.model['base'][each.prop] = each.value; + }); + form.formGroup.push({name:'通用配置', type:'base', styleList:form2Base}); - setTruncate(truncate = {}) { - this.formStyle.style.truncate = { ...truncate } - return this; - } - - build() { - return this.formStyle; - } + const list = [{name:'绘图配置', type:'shape'}, {name:'样式配置', type:'style'}]; + list.forEach(eachType=>{ + form.model[eachType.type] = {}; + const eachList = el.formList[eachType.type]; + eachList.forEach(each=>{ + form.model[eachType.type][each.prop] = each.value; + }); + form.formGroup.push({name:eachType.name, type: eachType.type, styleList:eachList}); + }); + return form; + }, + buildFormList() { + const formList = []; + const elementList = Object.values(elementConst); + elementList.forEach(el=>{ + formList.push(this.buildForm(el)); + }); + return formList; + } } -export default FormBuilder; +export default formBuilder; diff --git a/src/iscs_new/map.js b/src/iscs_new/map.js index b246e57d9..ae55759aa 100644 --- a/src/iscs_new/map.js +++ b/src/iscs_new/map.js @@ -341,9 +341,9 @@ class JMap { case events.Keyup: this.$controller.on(events.Keyup, cb, context); break; - case events.BuildShape: - this.$controller.on(events.BuildShape, cb, context); - break; + // case events.BuildShape: + // this.$controller.on(events.BuildShape, cb, context); + // break; } } } @@ -392,9 +392,9 @@ class JMap { case events.Keyup: this.$controller.off(events.Keyup, cb); break; - case events.BuildShape: - this.$controller.off(events.BuildShape, cb); - break; + // case events.BuildShape: + // this.$controller.off(events.BuildShape, cb); + // break; } } } diff --git a/src/iscs_new/plugins/shapeBuilder/entry.vue b/src/iscs_new/plugins/shapeBuilder/entry.vue index 5f3d1e19e..f7ce0c83b 100644 --- a/src/iscs_new/plugins/shapeBuilder/entry.vue +++ b/src/iscs_new/plugins/shapeBuilder/entry.vue @@ -1,35 +1,51 @@ + diff --git a/src/iscs_new/plugins/shapeContextMenu/index.js b/src/iscs_new/plugins/shapeContextMenu/index.js new file mode 100644 index 000000000..f544a5dc6 --- /dev/null +++ b/src/iscs_new/plugins/shapeContextMenu/index.js @@ -0,0 +1,79 @@ +import Vue from 'vue'; +import events from '@/iscs_new/utils/events'; +import entry from './entry.vue'; + +const elPage = Vue.extend(entry); + +const toggling = (page, e) => { + if (e&&e.code) { + Vue.nextTick(() => { + page.doShow({x: e.clientX, y: e.clientY}); + }); + } else { + page.doClose(); + } +}; + + +const handle = { + onClick(e) { + if (this.page) { + this.page.selected = e; + toggling(this.page, {}); + } + }, + onContextMenu(e) { + if (this.page) { + toggling(this.page, 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); + } + } + + removeEventListener() { + if (this.map) { + this.map.off(events.Click, handle.onClick, this); + this.map.off(events.ContextMenu, handle.onContextMenu, 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/plugins/shapeContextMenu/menu-item.vue b/src/iscs_new/plugins/shapeContextMenu/menu-item.vue new file mode 100644 index 000000000..ec2687e95 --- /dev/null +++ b/src/iscs_new/plugins/shapeContextMenu/menu-item.vue @@ -0,0 +1,202 @@ + + + + + diff --git a/src/iscs_new/plugins/shapeProperty/entry.vue b/src/iscs_new/plugins/shapeProperty/entry.vue index c9eea5e49..dd8b046b5 100644 --- a/src/iscs_new/plugins/shapeProperty/entry.vue +++ b/src/iscs_new/plugins/shapeProperty/entry.vue @@ -1,21 +1,22 @@ diff --git a/src/iscs_new/plugins/shapeProperty/index.js b/src/iscs_new/plugins/shapeProperty/index.js index 29ba3ace5..6cfd56574 100644 --- a/src/iscs_new/plugins/shapeProperty/index.js +++ b/src/iscs_new/plugins/shapeProperty/index.js @@ -4,8 +4,8 @@ import entry from './entry.vue'; const elPage = Vue.extend(entry); -const toggling = (page, show) => { - if (show) { +const toggling = (page, e) => { + if (!!e) { Vue.nextTick(() => { page.visible = true; }); @@ -17,15 +17,13 @@ const toggling = (page, show) => { const handle = { onClick(e) { - console.log(this) - toggling(this.page, !!e); - // console.log('onClick', this, e) + toggling(this.page, e); }, onContextMenu(e) { - // console.log('onContextMenu', this, e) }, - onBuildShape(e) { - // console.log('onBuildShape', this, e) + onModify(e) { + }, + onDelete(e) { } } @@ -53,7 +51,6 @@ class ShapeBuilder { 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); } } @@ -61,7 +58,6 @@ class ShapeBuilder { 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); } } } diff --git a/src/iscs_new/selectingHandle.js b/src/iscs_new/selectingHandle.js index 34f9910e0..92119c7cd 100644 --- a/src/iscs_new/selectingHandle.js +++ b/src/iscs_new/selectingHandle.js @@ -260,9 +260,9 @@ export default class SelectingHandle { } }); - if (['Alt'].includes(keyStr)) { - this.$controller.trigger(events.BuildShape, {...selectingRect, option: this.$map.getOption()}); - } + // if (['Alt'].includes(keyStr)) { + // this.$controller.trigger(events.BuildShape, {...selectingRect, option: this.$map.getOption()}); + // } this.clear(); } diff --git a/src/iscs_new/utils/events.js b/src/iscs_new/utils/events.js index d0795bd07..8561a5d53 100644 --- a/src/iscs_new/utils/events.js +++ b/src/iscs_new/utils/events.js @@ -12,5 +12,5 @@ export default { ViewUpdate: 'viewUpdate', StateUpdate: 'stateUpdate', OptionUpdate: 'optionUpdate', - BuildShape: 'buildShape' + // BuildShape: 'buildShape' } diff --git a/src/views/iscs_new/components/dataForm.vue b/src/views/iscs_new/components/dataForm.vue index a105268ff..e09147c94 100644 --- a/src/views/iscs_new/components/dataForm.vue +++ b/src/views/iscs_new/components/dataForm.vue @@ -16,8 +16,8 @@ {{ styleGroup.name }}