diff --git a/src/iscs_new/core/abstractShape.js b/src/iscs_new/core/abstractShape.js index e00ee813d..73880c413 100644 --- a/src/iscs_new/core/abstractShape.js +++ b/src/iscs_new/core/abstractShape.js @@ -32,7 +32,7 @@ class AbstractShape { } // 拖动 - draft({dx, dy}) { + drift({dx, dy}) { } // 设置高亮 diff --git a/src/iscs_new/dragHandle.js b/src/iscs_new/dragHandle.js index 081ccde3c..ef9575c2c 100644 --- a/src/iscs_new/dragHandle.js +++ b/src/iscs_new/dragHandle.js @@ -30,7 +30,7 @@ export default class DragHandle { this.$controller.storage.values().forEach(target => { if (target) { target.shapeFactory.hideHightLight(target);; - target.draft(e); + target.drift(e); target.shapeFactory.showHightLight(target); } }); diff --git a/src/iscs_new/draggable/Image.js b/src/iscs_new/draggable/Image.js index 840e4cfd8..ebb3582e1 100644 --- a/src/iscs_new/draggable/Image.js +++ b/src/iscs_new/draggable/Image.js @@ -2,6 +2,7 @@ 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({shape}) { @@ -18,7 +19,7 @@ function shapeStyleBuilder({shape}) { } } } -export default class ImageDraggable extends graphic.Group { +export default class ImageDraggable extends Group { constructor(handle, draggle=false) { super(); this.draggle = draggle; diff --git a/src/iscs_new/factory/compose.js b/src/iscs_new/factory/compose.js index 962a072a5..76609dcee 100644 --- a/src/iscs_new/factory/compose.js +++ b/src/iscs_new/factory/compose.js @@ -1,23 +1,43 @@ -import AbstractShape from '../core/abstractShape'; -import shapeEvent from '../constant/shapeEvent'; import * as utils from '../utils/utils'; +import * as graphic from '../core/graphic'; +import Group from 'zrender/src/container/Group'; +import AbstractShape from '../core/abstractShape'; +import shapeRender from '../constant/shapeRender'; +import shapeEvent from '../constant/shapeEvent'; class Compose extends AbstractShape { constructor(args) { super(args); + this.create(); this.hightLightInstance.setShape(this.getBoundingRect()); } create() { - // this.instance = new Group({}); + this.instance = new Group({ + ...shapeRender, + ...this.option, + ...this.model, + shapeInstance: this, + }); + + // this.instance.transform = utils.createTransform({scale: this.model.scale, position: this.model.position, rotation: this.model.rotation}); + this.model.elementCodes.forEach(code => { + const el = this.shapeFactory.getShapeByCode(code); + if (el.instance) { + this.shapeFactory.removeFromLevel(el.model.type, el.instance); + this.instance.add(el.instance); + } + }) + + this.instance.dirty(); } // 拖动 - draft({dx, dy}) { + drift({dx, dy}) { this.model.elementCodes.forEach(code => { const el = this.shapeFactory.getShapeByCode(code); if (el) { - el.draft({dx, dy}); + el.drift({dx, dy}); } }) } @@ -50,11 +70,11 @@ class Compose extends AbstractShape { if (el && el.model) { el.model.composeCode = this.model.code; - el.attr(el.model) + this.shapeFactory.removeFromLevel(el.model.type, el.instance); + this.instance.add(el.instance); + el.attr(el.model); } }) - - } // 解除绑定 @@ -67,6 +87,8 @@ class Compose extends AbstractShape { el.model && el.model.composeCode) { el.model.composeCode = ''; + this.remove(el.instance); + this.shapeFactory.addToLevel(el.model.type, el.instance); el.attr(el.model); } }) diff --git a/src/iscs_new/factory/element.js b/src/iscs_new/factory/element.js index 55cd76c04..a4eebe0b8 100644 --- a/src/iscs_new/factory/element.js +++ b/src/iscs_new/factory/element.js @@ -2,6 +2,7 @@ import AbstractShape from '../core/abstractShape'; import shapeEvent from '../constant/shapeEvent'; import * as graphic from '../core/graphic'; import * as utils from '../utils/utils'; +import shapeRender from '../constant/shapeRender'; import shapeLayer from '../constant/shapeLayer'; class Element extends AbstractShape { @@ -29,6 +30,7 @@ class Element extends AbstractShape { } this.instance = new elementBuilder({ + ...shapeRender, ...this.option, ...this.model, shapeInstance: this, @@ -40,7 +42,7 @@ class Element extends AbstractShape { } // 拖动 - draft({dx, dy}) { + drift({dx, dy}) { // const scale = this.instance._scale||[1,1]; // const position = this.instance._position||[0,0]; diff --git a/src/iscs_new/factory/index.js b/src/iscs_new/factory/index.js index 6b7e94779..7ff2ecd0b 100644 --- a/src/iscs_new/factory/index.js +++ b/src/iscs_new/factory/index.js @@ -66,6 +66,7 @@ class ShapeFactory extends Eventful { this.$map = map; this.$painter = map.getPainter(); this.$controller = map.getController(); + this.$zr = map.getZr(); this.border = new graphic.Rect(shapeStyleBuilder()); @@ -107,11 +108,11 @@ class ShapeFactory extends Eventful { try { this.source = source; zrUtil.each(source.elementList ||[], model => { - walk(this.storageShape(this.createShape(model, {...shapeRender, shapeType: shapeType.Element}))); + walk(this.storageShape(this.createShape(model, {shapeType: shapeType.Element}))); }, this); zrUtil.each(source.composeList ||[], model => { - this.storageShape(this.createShape(model, {...shapeRender, shapeType: shapeType.Compose})); + walk(this.storageShape(this.createShape(model, {shapeType: shapeType.Compose}))); }, this); } catch (error) { console.error('[ERROR] ', error); @@ -152,46 +153,54 @@ class ShapeFactory extends Eventful { return null; } - showHightLight(instance) { + showHightLight(shape) { const target = this.$controller.getTarget(); - if (instance.hightLightInstance) { - instance.hightLightInstance.setShape(instance.getBoundingRect()); - this.$painter.addToLevel(shapeLayer.HightLight)(instance.hightLightInstance); + if (shape.hightLightInstance) { + shape.hightLightInstance.setShape(shape.getBoundingRect()); + this.$painter.addToLevel(shapeLayer.HightLight)(shape.hightLightInstance); } - if (target == instance) { - this.showBorder(instance); + if (target == shape) { + this.showBorder(shape); } - instance.attr({ z: shapeRender.z + 9 }) + shape.attr({ z: shapeRender.z + 9 }) - instance.active(); + shape.active(); } - hideHightLight(instance) { + hideHightLight(shape) { const target = this.$controller.getTarget(); - if (instance.hightLightInstance) { - this.$painter.removeFromLevel(shapeLayer.HightLight)(instance.hightLightInstance); + if (shape.hightLightInstance) { + this.$painter.removeFromLevel(shapeLayer.HightLight)(shape.hightLightInstance); } - if (target != instance) { - this.hideBorder(instance); + if (target != shape) { + this.hideBorder(shape); } - instance.attr({ z: shapeRender.z }) + shape.attr({ z: shapeRender.z }) - instance.inactive(); + shape.inactive(); } - showBorder(instance) { - this.border.setShape(instance.getBoundingRect()); + showBorder(shape) { + this.border.setShape(shape.getBoundingRect()); this.$painter.addToLevel(shapeLayer.HightLight)(this.border); } - hideBorder(instance) { + hideBorder(shape) { this.$painter.removeFromLevel(shapeLayer.HightLight)(this.border); } + addToLevel(level, view) { + return this.$painter.addToLevel(level)(view); + } + + removeFromLevel(level, view) { + return this.$painter.removeFromLevel(level)(view); + } + isDrawing() { this.$map.isDrawing(); } diff --git a/src/iscs_new/map.js b/src/iscs_new/map.js index a838c84b6..d720d5492 100644 --- a/src/iscs_new/map.js +++ b/src/iscs_new/map.js @@ -157,7 +157,7 @@ class JMap { switch(action.order) { case orders.BINDING: case orders.ADD: - newShape = this.$shapeFactory.createShape(updateModel, {...shapeRender, ...action}); + newShape = this.$shapeFactory.createShape(updateModel, action); this.$shapeFactory.storageShape(newShape) this.$painter.add(newShape); break; @@ -170,7 +170,7 @@ class JMap { break; case orders.UPDATE: oldShape = this.$shapeFactory.removeShape(shape); - newShape = this.$shapeFactory.createShape(updateModel, {...shapeRender, ...action}); + newShape = this.$shapeFactory.createShape(updateModel, action); this.$painter.remove(oldShape); this.$shapeFactory.storageShape(newShape) this.$painter.add(newShape); diff --git a/src/iscs_new/painter.js b/src/iscs_new/painter.js index fdaaac9ca..8de2b8a58 100644 --- a/src/iscs_new/painter.js +++ b/src/iscs_new/painter.js @@ -71,6 +71,7 @@ class Painter extends Group { } addToLevel(name) { + name = Object.keys(graphic).includes(name)? name: `Group`; return (view) => { this.mapShapeLevel[name].add(view); this.$transformHandle.transformView(view); @@ -79,6 +80,7 @@ class Painter extends Group { } removeFromLevel(name) { + name = Object.keys(graphic).includes(name)? name: `Group`; return (view) => { this.mapShapeLevel[name].remove(view); } diff --git a/src/iscs_new/transformHandle.js b/src/iscs_new/transformHandle.js index 25ca228b0..62611b070 100644 --- a/src/iscs_new/transformHandle.js +++ b/src/iscs_new/transformHandle.js @@ -1,5 +1,5 @@ import * as utils from './utils/utils'; -import * as matrix from 'zrender/src/core/matrix'; + export default class TransformHandle { constructor(painter) { this.$painter = painter; @@ -33,11 +33,7 @@ export default class TransformHandle { // 视图进行缩放/平移 transformView(view) { if (view) { - view.transform = matrix.mul( - matrix.create(), - matrix.copy(matrix.create(), this.transform), - utils.createTransform({scale: view.scale, position: view.position, rotation: view.rotation}), - ); + view.transform = this.transform; view.decomposeTransform(); this.visibleView(view); } diff --git a/src/views/test/index.vue b/src/views/test/index.vue index 55d44324c..5c7b36884 100644 --- a/src/views/test/index.vue +++ b/src/views/test/index.vue @@ -131,8 +131,6 @@ export default { code: '1', name: 'a', type: 'Rect', - // scale: [0.5, 0.5], - // _position: [100, 0], shape: { x: 100, y: 100, @@ -149,8 +147,6 @@ export default { code: '2', name: 'b', type: 'Circle', - // scale: [0.5, 0.5], - // position: [100, 0], shape: { cx: 100, cy: 100, @@ -197,7 +193,6 @@ export default { code: '5', name: 'c', type: 'Droplet', - // scale: [0.5, 0.5], shape: { cx: 300, cy: 200, @@ -232,20 +227,21 @@ export default { code: '100', type: 'Device', elementCodes: ['1', '2'], - composeCode: '1000', + // scale: [0.5, 0.5] + // composeCode: '1000', }, { code: '101', type: 'Device', elementCodes: ['3', '4'], - composeCode: '1000' + // composeCode: '1000' }, - { - code: '1000', - type: 'Combine', - elementCodes: ['100', '101'], - composeCode: '' - } + // { + // code: '1000', + // type: 'Combine', + // elementCodes: ['100', '101'], + // composeCode: '' + // } ] }, { panEnable: true,