From 1be38bdb76d07ff1504600b4cde12e1ea2b3f946 Mon Sep 17 00:00:00 2001 From: ival <610568032@qq.com> Date: Fri, 9 Apr 2021 09:39:57 +0800 Subject: [PATCH] =?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/controller.js | 4 +- src/iscs_new/draggable/Image.js | 132 --------------------- src/iscs_new/draggable/Line.js | 126 -------------------- src/iscs_new/factory/index.js | 111 ++++++++++------- src/iscs_new/selectingHandle.js | 35 ++---- src/views/iscs_new/iscsDraw/index.vue | 4 +- src/views/iscs_new/iscsDraw/iscsCanvas.vue | 2 +- src/views/iscs_new/utils/indexedDb.js | 15 +-- 8 files changed, 91 insertions(+), 338 deletions(-) delete mode 100644 src/iscs_new/draggable/Image.js delete mode 100644 src/iscs_new/draggable/Line.js diff --git a/src/iscs_new/controller.js b/src/iscs_new/controller.js index 35ea580e6..71adfb7ca 100644 --- a/src/iscs_new/controller.js +++ b/src/iscs_new/controller.js @@ -14,7 +14,7 @@ class MouseEvent { this.clientX = e.event.clientX; this.clientY = e.event.clientY; - if (shape && !['@selecting', '@border', '@drag'].includes(shape.subType)) { + if (shape && !['@ignore', '@selecting', '@border', '@drag'].includes(shape.subType)) { if (shape.code) { let composeCode = shape.composeCode; let compose = null; @@ -143,7 +143,7 @@ export default class Controller extends Eventful { } isSpecialSubType(e) { - return ['@drag', '@border', '@selecting'].includes(e.subType); + return ['@ignore', '@selecting', '@drag', '@border'].includes(e.subType); } isSelected(code) { diff --git a/src/iscs_new/draggable/Image.js b/src/iscs_new/draggable/Image.js deleted file mode 100644 index 209e23d49..000000000 --- a/src/iscs_new/draggable/Image.js +++ /dev/null @@ -1,132 +0,0 @@ - -import _ from 'lodash'; -import * as graphic from '../core/graphic'; -import * as eventTool from 'zrender/src/core/event'; -import Group from 'zrender/src/container/Group'; -import shapeRender from '../constant/shapeRender'; - -function shapeStyleBuilder({subType, shape}) { - return { - ...shapeRender, - subType, - z: 9998, - draggable: false, - cursor: 'crosshair', - shape, - style: { - fill: `rgba(200,200,200,0.5)` - } - } -} -export default class ImageDraggable extends Group { - constructor(handle, draggle=false) { - super(); - this.draggle = draggle; - this.handle = handle; - this.style = handle.$map.getDefaultStyleDict(); - this.invTransform = [1, 0, 0, 1, 0, 0]; - this.target = null; - this.shapes = []; - this.offset = null; - this.r = 2; - - if (this.draggle && - this.handle.e.target && - this.handle.e.target.instance) { - const bound = this.handle.e.target.instance.getBoundingRect(); - const r = (this.handle.e.target.model.width||this.r)+3; - this.shapes.push(this.createShape({ cx: bound.x, cy: bound.y, r})); - this.shapes.push(this.createShape({ cx: bound.x+bound.width, cy: bound.y, r})); - this.shapes.push(this.createShape({ cx: bound.x+bound.width, cy: bound.y+bound.height, r})); - this.shapes.push(this.createShape({ cx: bound.x, cy: bound.y+bound.height, r})); - this.shapes.forEach(shape => { this.add(shape); }); - } - } - - createShape(shape) { - return new graphic.Circle({ - ...shapeStyleBuilder({subType: '@drag', shape}), - onmousedown: this.mousedown.bind(this), - onmousemove: _.throttle(this.mousemove.bind(this), 100), - onmouseup: this.mouseup.bind(this) - }); - } - - updateShapeRect(dx, dy) { - const index = this.shapes.indexOf(this.target); - if (index >= 0) { - this.shapes[(3-index)%4].setShape({cx: this.shapes[(3-index)%4].shape.cx+dx}); - this.shapes[(5-index)%4].setShape({cy: this.shapes[(5-index)%4].shape.cy+dy}); - } - - return this.getBoundingRect().clone(); - } - - updateModel(target, bound) { - target.model.width = bound.width-this.r*2; - target.model.height = bound.height-this.r*2; - } - - setShape(dx, dy) { - const bound = this.updateShapeRect(dx, dy); - - if (this.handle.e.target && - this.handle.e.target.instance) { - this.handle.e.target.model.point = { x: bound.x+this.r, y: bound.y+this.r }; - - this.handle.e.target.instance.inactive(this.handle.$zr); - this.handle.e.target.instance.setShape(this.handle.e.target.model); - this.handle.e.target.instance.active(this.handle.$zr); - } - } - - mousedown(e) { - if (e.target && ['@selecting', '@border', '@drag'].includes(e.target.subType)) { - if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) { - this.target = e.target; - this.offset = {x: e.offsetX, y: e.offsetY}; - this.setDraggable(true); - } - } - } - - mousemove(e) { - eventTool.stop(e.event); - if (this.target && - this.handle.e.target && - this.offset) { - if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) { - const type = this.handle.e.target.type; - const dx = Math.round(e.offsetX-this.offset.x); - const dy = Math.round(e.offsetY-this.offset.y); - - this.setShape(...this.handle.normalizedDiff(dx, dy)); - this.handle.$controller.trigger(this.handle.$controller.events.Reflect, {dx, dy}); - - this.offset = {x: e.offsetX, y: e.offsetY}; - } - } - } - - mouseup(e) { - if (this.target && - this.handle.e.target && - this.offset) { - const type = this.handle.e.target.type; - const dx = Math.round(e.offsetX-this.offset.x); - const dy = Math.round(e.offsetY-this.offset.y); - this.setShape(...this.handle.normalizedDiff(dx, dy)); - this.handle.$controller.trigger(this.handle.$controller.events.Reflect, {dx, dy}); - - this.setDraggable(false); - this.offset = null; - this.target = null; - } - } - - setDraggable(draggable) { - this.shapes.forEach(shape => { - shape.attr('draggable', draggable); - }); - } -} diff --git a/src/iscs_new/draggable/Line.js b/src/iscs_new/draggable/Line.js deleted file mode 100644 index 09ef044ad..000000000 --- a/src/iscs_new/draggable/Line.js +++ /dev/null @@ -1,126 +0,0 @@ -import _ from 'lodash'; -import * as graphic from '../core/graphic'; -import * as eventTool from 'zrender/src/core/event'; -import shapeRender from '../constant/shapeRender'; - -function lineStyleBuilder({subType}) { - return { - ...shapeRender, - subType, - z: 9998, - shape: {x1: 0, y1: 0, x2: 0, y2: 0 }, - style: { - lineWidth: 2, - stroke: `rgba(200,200,200,0.8)` - } - } -} - -function circleStyleBuilder({subType, shape}) { - return { - ...shapeRender, - subType, - z: 9999, - draggable: false, - cursor: 'crosshair', - shape, - style: { - opacity: 0.5, - fill: `rgba(200,200,200,0.3)` - }, - } -} -export default class LineDraggable extends graphic.Group { - constructor(handle, draggle=true) { - super(); - this.draggle = draggle; - this.handle = handle; - this.style = handle.$map.getDefaultStyleDict(); - this.invTransform = [1, 0, 0, 1, 0, 0]; - this.target = null; - this.shapes = []; - this.line = null; - this.r = 2; - this.offset = null; - - if (this.draggle && this.handle.e.target && this.handle.e.target.model.points) { - this.handle.e.target.model.points.forEach((elem, index) => { - const r = (this.handle.e.target.model.width||this.r)+1; - this.shapes.push(this.createShape({ cx: elem.x, cy: elem.y, r })); - this.add(this.shapes[index]); - }); - - this.line = new graphic.Line(lineStyleBuilder({subType: '@drag'})); - this.add(this.line); - } - } - - createShape(shape) { - return new graphic.Circle({ - ...circleStyleBuilder({subType: '@drag', shape}), - onmousedown: this.mousedown.bind(this), - onmousemove: _.throttle(this.mousemove.bind(this), 100), - onmouseup: this.mouseup.bind(this) - }); - } - - setShape(e) { - const dx = Math.round(e.offsetX-this.offset.x); - const dy = Math.round(e.offsetY-this.offset.y); - - if (this.handle.e.target && this.handle.e.target.instance) { - this.offset = {x: e.offsetX, y: e.offsetY}; - this.handle.e.target.instance.inactive(this.handle.$zr); - this.handle.e.target.instance.setShape(this.handle.e.target.model); - this.handle.e.target.instance.active(this.handle.$zr); - this.handle.$controller.trigger(this.handle.$controller.events.Reflect, {dx, dy}); - } - } - - mousedown(e) { - this.offset = {x: e.offsetX, y: e.offsetY}; - if (e.target && ['@drag'].includes(e.target.subType)) { - this.target = e.target; - if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) { - this.setDraggable(true); - } - } - } - - mousemove(e) { - eventTool.stop(e.event); - if (this.target && this.handle.e.target) { - if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e) ) { - this.handle.e.target.model.points = this.shapes.map(elem => { - const position = elem.position || [0, 0]; - const x = elem.shape.cx + position[0]; - const y = elem.shape.cy + position[1]; - return {x, y}; - }); - - this.setShape(e); - } - } - } - - mouseup(e) { - if (this.target && this.handle.e.target) { - this.handle.e.target.model.points = this.shapes.map(elem => { - const position = elem.position || [0, 0]; - const x = elem.shape.cx + position[0]; - const y = elem.shape.cy + position[1]; - return {x, y}; - }); - this.setShape(e); - this.setDraggable(false); - this.line.setShape({x1: 0, y1: 0, x2: 0, y2: 0 }); - this.target = null; - } - } - - setDraggable(draggable) { - this.shapes.forEach(shape => { - shape.attr('draggable', draggable); - }); - } -} diff --git a/src/iscs_new/factory/index.js b/src/iscs_new/factory/index.js index e866d4ed3..14faf28d9 100644 --- a/src/iscs_new/factory/index.js +++ b/src/iscs_new/factory/index.js @@ -17,52 +17,51 @@ const shapeBuilderMap = { [shapeType.Element]: Element, [shapeType.Compose]: Compose } - -function shapeStyleBuilder({subType}) { - return { - ...shapeRender, - subType, - z: 9999, - silent: true, - shape: { - x: 0, - y: 0, - width: 0, - height: 0 - }, - style: { - lineDash: defaultStyle.borderDash, - lineWidth: defaultStyle.borderWidth, - stroke: defaultStyle.borderColor, - fill: defaultStyle.transparentColor +const shapeSensitizeStyle = { + border: { + borderStyle: { + lineDash: [4, 4], + lineWidth: 1, + stroke: '#000', + fill: 'transparent' } } } - -function update2List(source, model, action, name='') { - const list = source[name]; - - if (!list) { source[name] = []; } - - let updateModel = model; - const i = list.findIndex(elem => { return elem.code == model.code; }) - switch(action.order) { - case orders.BINDING: - case orders.ADD: - list.push(model); - break; - case orders.UNBINDING: - case orders.DELETE: - i >= 0 && list.splice(i, 1); - break; - case orders.UPDATE: - updateModel = Object.assign(list[i]||{}, model) - break; +class Perspective extends graphic.Group { + constructor(args) { + super(args); } - return updateModel; -} + _createBorder(rect) { + this._border = new graphic.Rect({ + ...shapeRender, + subType: '@border', + z: 9999, + silent: true, + shape: { + ...rect + }, + style: { + ...shapeSensitizeStyle.border.borderStyle + } + }) + this.add(this._border); + } + _createAngles() { + + } + + render(rect) { + this.removeAll(); + this._createBorder(rect); + this._createAngles(); + } + + setShape(rect) { + this.render(rect); + } +} class ShapeFactory extends Eventful { constructor(map) { super(); @@ -70,7 +69,7 @@ class ShapeFactory extends Eventful { this.$painter = map.getPainter(); this.$controller = map.getController(); - this.border = new graphic.Rect(shapeStyleBuilder({subType: '@border'})); + this.sensitize = new Perspective({subType: '@ignore'}); this.tipsHandle = new TipsHandle(map); @@ -188,12 +187,12 @@ class ShapeFactory extends Eventful { } showBorder(shape) { - this.border.setShape(shape.getBoundingRect()); - this.$painter.addToLayer(shapeLayer.HightLight)(this.border); + this.sensitize.setShape(shape.getBoundingRect()); + this.$painter.addToLayer(shapeLayer.HightLight)(this.sensitize); } hideBorder(shape) { - this.$painter.removeFromLayer(shapeLayer.HightLight)(this.border); + this.$painter.removeFromLayer(shapeLayer.HightLight)(this.sensitize); } addToLayer(level) { @@ -236,4 +235,28 @@ class ShapeFactory extends Eventful { } } +function update2List(source, model, action, name='') { + const list = source[name]; + + if (!list) { source[name] = []; } + + let updateModel = model; + const i = list.findIndex(elem => { return elem.code == model.code; }) + switch(action.order) { + case orders.BINDING: + case orders.ADD: + list.push(model); + break; + case orders.UNBINDING: + case orders.DELETE: + i >= 0 && list.splice(i, 1); + break; + case orders.UPDATE: + updateModel = Object.assign(list[i]||{}, model) + break; + } + + return updateModel; +} + export default ShapeFactory; diff --git a/src/iscs_new/selectingHandle.js b/src/iscs_new/selectingHandle.js index d2300f83b..ac8943156 100644 --- a/src/iscs_new/selectingHandle.js +++ b/src/iscs_new/selectingHandle.js @@ -35,10 +35,13 @@ const vernierStyle = { textVerticalAlign: 'center' } } + + } + class Vernier extends graphic.Group { - constructor({subType}) { - super({subType}); + constructor(args) { + super(args); this._scaleRate = 1; this._area = null; this._axisLineX = null; @@ -47,10 +50,13 @@ class Vernier extends graphic.Group { _createArea(rect) { this._area = new graphic.Rect({ + subType: '@ignore', ...shapeRender, z: 9999, silent: true, - shape: { ...rect }, + shape: { + ...rect + }, style: { ...vernierStyle.area.areaStyle } @@ -89,7 +95,7 @@ class Vernier extends graphic.Group { for(var i = 0; i in new Array(count+1).fill(0); i++) { const offset = step * i * directionX; const tick = i % vernierStyle.axisTick.length == 0 - const len = tick? vernierStyle.axisTick.distance*0.7: vernierStyle.axisTick.distance*0.5; + const len = tick? vernierStyle.axisTick.distance*0.7: vernierStyle.axisTick.distance*0.4; if (tick) { this.add(new graphic.Line({ ...shapeRender, @@ -162,7 +168,7 @@ class Vernier extends graphic.Group { for(var i = 0; i in new Array(count+1).fill(0); i++) { const offset = step * i * directionY; const tick = i % vernierStyle.axisTick.length == 0; - const len = tick? vernierStyle.axisTick.distance*0.7: vernierStyle.axisTick.distance*0.5; + const len = tick? vernierStyle.axisTick.distance*0.7: vernierStyle.axisTick.distance*0.4; if (tick) { this.add(new graphic.Line({ ...shapeRender, @@ -212,24 +218,6 @@ class Vernier extends graphic.Group { this.render(rect); } } - -// function shapeStyleBuilder({subType}) { -// return { -// subType, -// ...shapeRender, -// z: 9999, -// shape: { -// x: 0, -// y: 0, -// width: 0, -// height: 0 -// }, -// style: { -// fill: `rgba(200,200,200,0.3)` -// } -// } -// } - export default class SelectingHandle { constructor(map, controller) { this.$map = map; @@ -239,7 +227,6 @@ export default class SelectingHandle { this.begPoint = null; this.endPoint = null; - // this.selecting = new graphic.Rect(shapeStyleBuilder({subType: '@selecting'})); this.selecting = new Vernier({subType: '@selecting'}); } diff --git a/src/views/iscs_new/iscsDraw/index.vue b/src/views/iscs_new/iscsDraw/index.vue index 5c64d073d..08544395a 100644 --- a/src/views/iscs_new/iscsDraw/index.vue +++ b/src/views/iscs_new/iscsDraw/index.vue @@ -93,8 +93,8 @@ 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.remove('composeList', model.id); - idb.add('composeList', model); + idb.delete('composeList', model.id); + idb.write('composeList', model); idb.list('composeList').then(list => { console.log(list) }) diff --git a/src/views/iscs_new/iscsDraw/iscsCanvas.vue b/src/views/iscs_new/iscsDraw/iscsCanvas.vue index 077d92cd4..c93860ef4 100644 --- a/src/views/iscs_new/iscsDraw/iscsCanvas.vue +++ b/src/views/iscs_new/iscsDraw/iscsCanvas.vue @@ -91,7 +91,7 @@ export default { } if (this.$route.query.id) { setTimeout(_ => { - idb.query('composeList', this.$route.query.id).then(resp => { + idb.select('composeList', this.$route.query.id).then(resp => { this.$iscs.setMap([], { elementList: resp.shapeList||[], composeList: [] diff --git a/src/views/iscs_new/utils/indexedDb.js b/src/views/iscs_new/utils/indexedDb.js index 0c256df63..a285f3802 100644 --- a/src/views/iscs_new/utils/indexedDb.js +++ b/src/views/iscs_new/utils/indexedDb.js @@ -24,11 +24,12 @@ class IndexedDb { db = e.target.result; nameList.forEach(name => { db.createObjectStore(name, { keyPath: 'id' }); + console.log(name); }) }; } - add(tableName, data) { + write(tableName, data) { return new Promise((resolve, reject) => { if (db) { const request = db.transaction([tableName], 'readwrite').objectStore(tableName).add(data); @@ -47,7 +48,7 @@ class IndexedDb { }); } - remove(tableName, key) { + delete(tableName, key) { return new Promise((resolve, reject) => { if (db) { const request = db.transaction([tableName], 'readwrite').objectStore(tableName).delete(key); @@ -71,11 +72,11 @@ class IndexedDb { if (db) { const request = db.transaction([tableName], 'readwrite').objectStore(tableName).put(data); request.onsuccess = function(e) { - console.log('数据更新成功'); + console.log('数据修改成功'); resolve(request.result); }; request.onerror = function(e) { - console.log('数据更新失败'); + console.log('数据修改失败'); reject(e); }; } else { @@ -85,16 +86,16 @@ class IndexedDb { }); } - query(tableName, key) { + select(tableName, key) { return new Promise((resolve, reject) => { if (db) { const request = db.transaction([tableName]).objectStore(tableName).get(key); request.onsuccess = function(e) { - console.log('数据读取成功'); + console.log('数据查询成功'); resolve(request.result); }; request.onerror = function(e) { - console.log('数据读取失败'); + console.log('数据查询失败'); reject(e); }; } else {