diff --git a/src/iscs_new/constant/shapeRender.js b/src/iscs_new/constant/shapeRender.js index 69224ba39..9e80d1feb 100644 --- a/src/iscs_new/constant/shapeRender.js +++ b/src/iscs_new/constant/shapeRender.js @@ -1,3 +1,4 @@ export default { - zlevel: 1 -} \ No newline at end of file + zlevel: 1, + z: 9, +} diff --git a/src/iscs_new/controller.js b/src/iscs_new/controller.js index 394b1ea15..27d037484 100644 --- a/src/iscs_new/controller.js +++ b/src/iscs_new/controller.js @@ -185,10 +185,8 @@ export default class Controller extends Eventful { this.selectingHandle.clear(e); if (this.isSpecialSubType(event)) { return; } if (this._dragEnable && this._locking) { - this.setCursorStyle('move'); this.trigger(this.events.__DragStart, { x: e.offsetX, y: e.offsetY, code: event.code }); } else if (this._areaSelectEnable) { - this.setCursorStyle('crosshair'); this.trigger(this.events.__SelectStart, { x: e.offsetX, y: e.offsetY}); } } @@ -206,15 +204,14 @@ export default class Controller extends Eventful { if (this._isNotLeftMouse) { if (this._panEnable) { - this.setCursorStyle('grabbing'); if (dx**2+dy**2 > 8) { this._pan = true; } this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y }); + this.setCursorStyle('grabbing'); } } else { if (this._dragEnable && this.dragHandle.isDragging()) { - this.setCursorStyle('move'); if (this.limitDrag({dx, dy})) { this.trigger(this.events.__Dragging, { dx, dy }); if (this._reflectEnable) { @@ -225,7 +222,6 @@ export default class Controller extends Eventful { this._y = oldY; } } else if (this._areaSelectEnable && this.selectingHandle.isSelecting()) { - this.setCursorStyle('crosshair'); this.trigger(this.events.__Selecting, { x: e.offsetX, y: e.offsetY }); } } @@ -235,6 +231,7 @@ export default class Controller extends Eventful { const target = this._target; if (this._isNotLeftMouse) { this._isNotLeftMouse = false; + this.setCursorStyle('auto'); } else { if (this._dragEnable && this.dragHandle.isDragging()) { this.trigger(this.events.__DragEnd, {x: e.offsetX, y: e.offsetY}); @@ -245,11 +242,7 @@ export default class Controller extends Eventful { if (this._selectEnable && target) { this.trigger(this.events.__Selected, { target }); } - - this.setCursorStyle('auto'); } - - // this.setLocking(false); 设置false时，拖动完成后，需要重新激活 this._target = null; } @@ -281,6 +274,8 @@ export default class Controller extends Eventful { click(e) { const event = new MouseEvent(e); + this.trigger(events.Selected, event); + if (event.code) { this.setLocking(true) } else { @@ -288,8 +283,6 @@ export default class Controller extends Eventful { this.selectingHandle.clear(); this.clear(); } - - this.trigger(events.Selected, event); } contextmenu(e) { diff --git a/src/iscs_new/core/abstractShape.js b/src/iscs_new/core/abstractShape.js index 64432da73..46bb79742 100644 --- a/src/iscs_new/core/abstractShape.js +++ b/src/iscs_new/core/abstractShape.js @@ -7,6 +7,7 @@ function shapeStyleBuilder() { ...shapeRender, z: 9998, silent: true, + cursor: 'pointer', shape: { x: 0, y: 0, @@ -15,7 +16,7 @@ function shapeStyleBuilder() { }, style: { lineWidth: 1, - stroke: '#fff', + stroke: 'rgba(255,255,255,0.5)', fill: 'rgba(200,200,200,0.3)' } } @@ -46,9 +47,6 @@ class AbstractShape { // 设置取消焦点 blur() {} - // 设置状态 - setState(state) {} - // 绑定数据 combine() {} @@ -60,6 +58,12 @@ class AbstractShape { // 获取依赖图形 getDepShapes() {} + + // 修改属性 + attr() {} + + // 设置状态 + setState(state) {} } export default AbstractShape; diff --git a/src/iscs_new/factory/compose.js b/src/iscs_new/factory/compose.js index 254be697b..90bfd6fed 100644 --- a/src/iscs_new/factory/compose.js +++ b/src/iscs_new/factory/compose.js @@ -38,6 +38,8 @@ class Compose extends AbstractShape { // 绑定数据 combine() { + this.inactive(); + this.shapeFactory.hideHightLight(this); this.model.elementCodes.forEach(code => { const element = this.shapeFactory.getShapeByCode(code); if (element && @@ -51,17 +53,29 @@ class Compose extends AbstractShape { // 解除绑定 uncouple() { this.inactive(); + this.shapeFactory.hideHightLight(this); this.model.elementCodes.forEach(code => { const element = this.shapeFactory.getShapeByCode(code); if (element && element.model) { element.model.composeCode = ''; - element.instance.attr(element.model) + element.instance.attr(element.model); } }) this.model.elementCodes = []; } + // 修改属性 + attr(attrs) { + this.model.elementCodes.forEach(code => { + const element = this.shapeFactory.getShapeByCode(code); + if (element && + element.instance) { + element.instance.attr(attrs); + } + }) + } + // 获取依赖图形 getDepShapes() { return this.model.elementCodes.map(code => this.shapeFactory.getShapeByCode(code)).filter(el => el) diff --git a/src/iscs_new/factory/element.js b/src/iscs_new/factory/element.js index 3f1393029..0978a6eac 100644 --- a/src/iscs_new/factory/element.js +++ b/src/iscs_new/factory/element.js @@ -99,6 +99,8 @@ class Element extends AbstractShape { // 绑定数据 combine() { + this.inactive(); + this.shapeFactory.hideHightLight(this); const compose = this.shapeFactory.getShapeByCode(this.model.composeCode); if (compose && compose.model && @@ -113,6 +115,7 @@ class Element extends AbstractShape { // 解除绑定 uncouple() { this.inactive(); + this.shapeFactory.hideHightLight(this); const compose = this.shapeFactory.getShapeByCode(this.model.composeCode); if (compose && compose.model && @@ -124,6 +127,11 @@ class Element extends AbstractShape { } } + // 修改属性 + attr(attrs) { + this.instance.attr(attrs); + } + // 获取依赖图形 getDepShapes() { return [] diff --git a/src/iscs_new/factory/index.js b/src/iscs_new/factory/index.js index 60be0b252..1f8498b8a 100644 --- a/src/iscs_new/factory/index.js +++ b/src/iscs_new/factory/index.js @@ -133,8 +133,8 @@ class ShapeFactory extends Eventful { removeShape(shape) { if (shape && shape.model) { - this.trigger(shapeEvent.HideHightLight); - shape.uncouple(); + this.hideHightLight(shape); + shape.uncouple(shape); delete this.mapShape[shape.model.code]; } return shape; @@ -154,9 +154,14 @@ class ShapeFactory extends Eventful { instance.hightLightInstance.setShape(instance.getBoundingRect()); this.$painter.addToLevel(shapeLayer.HightLight)(instance.hightLightInstance); } + if (target == instance) { this.showBorder(instance); } + + instance.attr({ z: shapeRender.z + 9 }) + + instance.active(); } hideHightLight(instance) { @@ -164,9 +169,14 @@ class ShapeFactory extends Eventful { if (instance.hightLightInstance) { this.$painter.removeFromLevel(shapeLayer.HightLight)(instance.hightLightInstance); } + if (target != instance) { this.hideBorder(instance); } + + instance.attr({ z: shapeRender.z }) + + instance.inactive(); } showBorder(instance) { diff --git a/src/iscs_new/map.js b/src/iscs_new/map.js index 3433011e8..41abba72c 100644 --- a/src/iscs_new/map.js +++ b/src/iscs_new/map.js @@ -151,19 +151,22 @@ class JMap { render(list=[]) { list.forEach(({model, action}) => { - const updateModel = this.$shapeFactory.updateSource(model, action); + const updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action): model; const shape = this.$shapeFactory.getShapeByCode(updateModel.code); const deps = shape.getDepShapes(); - const oldShape = this.$shapeFactory.removeShape(shape); - const newShape = this.$shapeFactory.createShape(updateModel, {...shapeRender, ...action}); + let oldShape = null + let newShape = null; if (updateModel) { switch(action.order) { + case orders.BINDING: case orders.ADD: + newShape = this.$shapeFactory.createShape(updateModel, {...shapeRender, ...action}); this.$shapeFactory.storageShape(newShape) this.$painter.add(newShape); break; case orders.DELETE: + oldShape = this.$shapeFactory.removeShape(shape); this.$painter.remove(oldShape); deps.forEach(shape => { this.$shapeFactory.updateSource(shape.model, {...action, shapeType: shapeType.Element}); @@ -171,16 +174,16 @@ class JMap { }); break; case orders.UPDATE: + oldShape = this.$shapeFactory.removeShape(shape); + newShape = this.$shapeFactory.createShape(updateModel, {...shapeRender, ...action}); this.$painter.remove(oldShape); this.$shapeFactory.storageShape(newShape) this.$painter.add(newShape); break; case orders.UNBINDING: + oldShape = this.$shapeFactory.removeShape(shape); this.$painter.remove(oldShape); break; - case orders.BINDING: - // 暂不支持 - break; } } }); diff --git a/src/iscs_new/utils/storage.js b/src/iscs_new/utils/storage.js index d599a3d68..2dc377a6b 100644 --- a/src/iscs_new/utils/storage.js +++ b/src/iscs_new/utils/storage.js @@ -41,6 +41,10 @@ export default class Storage { return this.has(code); } + forEach() { + return this.map.forEach; + } + setClipboard(lst) { this.clipboard = Array.from(lst); } @@ -56,8 +60,4 @@ export default class Storage { getClipboardSize() { return this.clipboard.length; } - - forEach() { - return this.map.forEach; - } } diff --git a/src/views/test/index.vue b/src/views/test/index.vue index f8dcae4b4..462a1d478 100644 --- a/src/views/test/index.vue +++ b/src/views/test/index.vue @@ -8,7 +8,7 @@ 源数据 -
+
@@ -42,10 +42,6 @@ export default { }; }, computed: { - ...mapGetters([ - 'canvasWidth', - 'canvasHeight' - ]), ...mapGetters('iscs', [ 'iscs' ]), @@ -53,10 +49,10 @@ export default { return ['iscs', (Math.random().toFixed(5)) * 100000].join('_'); }, width() { - return document.documentElement.clientWidth - 60; + return document.documentElement.clientWidth; }, height() { - return document.documentElement.clientHeight - 120; + return document.documentElement.clientHeight - 200; } }, watch: { @@ -98,10 +94,42 @@ export default { Vue.prototype.$iscs = this.$iscs; - this.$iscs.setMap([], { + this.$iscs.setMap([ + { + type: 'Device', + name: 'test', + isActive: false, + isFoucs: false, + shapeList: [ + { name: 'a', + type: 'Rect', + shape: {}, + style: {}, + stateList: [ + { status: 'a1', style:{}, shape: {} }, + { status: 'a2', style:{}, shape: {} } + ] + }, + { name: 'b', + type: 'Circle', + shape: {}, + style: {}, + stateList: [ + { status: 'b1', style:{}, shape: {} }, + { status: 'b2', style:{}, shape: {} } + ] + }, + ], + stateList: [ + { status: 't1', shapeList: [[{name: 'a', status: 'a1'}, {name: 'b', status: 'b1'}], [{name: 'a', status: 'a2'}, {name: 'b', status: 'a2'}]], weight: 2, needDefault: false, loop: true }, + { status: 't2', shapeList: [[{name: 'a', status: 'a1'}, {name: 'b', status: 'b1'}], [{name: 'a', status: 'a2'}, {name: 'b', status: 'a2'}]], weight: 2, needDefault: false, lopp: false } + ] + } + ], { elementList: [ { code: '1', + name: 'a', type: 'Rect', shape: { x: 100, @@ -117,6 +145,7 @@ export default { }, { code: '2', + name: 'b', type: 'Circle', shape: { cx: 100, @@ -131,6 +160,38 @@ export default { }, { code: '3', + name: 'a', + type: 'Rect', + shape: { + x: 200, + y: 100, + width: 30, + height: 30 + }, + style: { + fill: 'red', + stroke: 'black' + }, + composeCode: '100' + }, + { + code: '4', + name: 'b', + type: 'Circle', + shape: { + cx: 200, + cy: 100, + r: 10, + }, + style: { + fill: 'red', + stroke: 'black' + }, + composeCode: '100' + }, + { + code: '5', + name: 'c', type: 'Droplet', shape: { cx: 300, @@ -145,7 +206,8 @@ export default { composeCode: '' }, { - code: '4', + code: '6', + name: 'd', type: 'Droplet', shape: { cx: 400, @@ -165,6 +227,11 @@ export default { code: '100', type: 'Device', elementCodes: ['1', '2'] + }, + { + code: '101', + type: 'Device', + elementCodes: ['3', '4'] } ] }, {