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 07bed7656..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); @@ -105,7 +104,6 @@ class ShapeFactory extends Eventful { list.forEach(el => { this.mapTemplate[el.type] = templateParser.parse(el); }) - console.log(this.mapTemplate); } parse(source={}, take=None) { @@ -189,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) { @@ -237,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/utils/indexedDb.js b/src/utils/indexedDb.js index 2a882c8a3..3cffc3021 100644 --- a/src/utils/indexedDb.js +++ b/src/utils/indexedDb.js @@ -18,6 +18,7 @@ export function openIndexedDB() { Vue.prototype.$db = event.target.result; Vue.prototype.$db.createObjectStore('mapData', { keyPath: 'id' }); Vue.prototype.$db.createObjectStore('runPlan', { keyPath: 'templateId' }); + Vue.prototype.$db.createObjectStore('composeList', { keyPath: 'id' }); }; } // 新增数据 diff --git a/src/views/iscs_new/iscsDraw/index.vue b/src/views/iscs_new/iscsDraw/index.vue index 263a350d4..77c46f4b4 100644 --- a/src/views/iscs_new/iscsDraw/index.vue +++ b/src/views/iscs_new/iscsDraw/index.vue @@ -37,7 +37,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 IndexedDb from '../utils/indexedDb.js'; +import idb from '../utils/indexedDb.js'; import shapeType from '@/iscs_new/constant/shapeType.js'; export default { @@ -71,14 +71,9 @@ export default { } }, mounted() { - this.db = new IndexedDb(['composeList']); - console.log(this.db, 11111111111); this.composeName = this.$route.query.composeName; this.elementList = new BuilderFactory().getFormList(); this.enabledTab = this.elementList[0].code; - }, - beforeDestroy() { - }, methods: { onIscsChange(mode, system, part) { @@ -91,14 +86,19 @@ export default { const type = this.$route.query.type || '<模型类型>'; const source = this.$iscs.getSource(); if (id && source) { - const shapeList = source.elementList.map(el => { + const elementList = source.elementList.map(el => { return this.$iscs.getShapeByCode(el.code); }); - const rect = shapeList.reduce( + const shapeList = elementList.map(el => el.model); + const rect = elementList.reduce( (temp, el) => el && temp ? temp.union(el.getBoundingRect().clone()) : el.getBoundingRect(), null); - const position = [(rect.x + rect.width) / 2, (rect.y + rect.height) / 2]; + const position = rect ? [(rect.x + rect.width) / 2, (rect.y + rect.height) / 2] : [0, 0]; const model = { id, name, type, shapeList, position }; - console.log(model); + idb.delete('composeList', model.id); + idb.write('composeList', model); + idb.list('composeList').then(list => { + console.log(list); + }); } }, onSelectTab() { diff --git a/src/views/iscs_new/iscsDraw/iscsCanvas.vue b/src/views/iscs_new/iscsDraw/iscsCanvas.vue index b8c3a600d..c93860ef4 100644 --- a/src/views/iscs_new/iscsDraw/iscsCanvas.vue +++ b/src/views/iscs_new/iscsDraw/iscsCanvas.vue @@ -7,6 +7,7 @@