diff --git a/src/iscs_new/constant/shapeLayer.js b/src/iscs_new/constant/shapeLayer.js index 9e4456111..3b5154d40 100644 --- a/src/iscs_new/constant/shapeLayer.js +++ b/src/iscs_new/constant/shapeLayer.js @@ -1,5 +1,5 @@ export default { HightLight: `__hightLight__`, - SelectIng: `___selecting__`, + Selecting: `___selecting__`, Tips: `__tips__`, } diff --git a/src/iscs_new/controller.js b/src/iscs_new/controller.js index 61ddb05f8..3dfaee732 100644 --- a/src/iscs_new/controller.js +++ b/src/iscs_new/controller.js @@ -10,13 +10,13 @@ import events from './utils/events'; class MouseEvent { constructor(controller, e) { const shapeFactory = controller.$map.getShapeFactory(); - const view = e.target; + const shape = e.target; this.clientX = e.event.clientX; this.clientY = e.event.clientY; - if (view && !['__selecting__', '__drag__'].includes(view.subType)) { - if (view.code) { - let composeCode = view.composeCode; + if (shape && !['__selecting__', '__drag__'].includes(shape.subType)) { + if (shape.code) { + let composeCode = shape.composeCode; let compose = null; while(composeCode) { @@ -24,15 +24,15 @@ class MouseEvent { composeCode = compose.model.composeCode; } - this.code = compose? compose.model.code: view.code; + this.code = compose? compose.model.code: shape.code; } - if (view.subType) { - this.subType = view.subType; + if (shape.subType) { + this.subType = shape.subType; } - if (view.val) { - this.val = view.val; + if (shape.val) { + this.val = shape.val; } } } @@ -184,19 +184,19 @@ export default class Controller extends Eventful { zr.dom.focus(); this._isNotLeftMouse = eventTool.isMiddleOrRightButtonOnMouseUpDown(e); this.trigger(events.Selected, this._target); + this.selectingHandle.clear(); if (this._isNotLeftMouse) { this.setCursorStyle('grab'); } else { - this.selectingHandle.clear(e); if (this.isSpecialSubType(event)) { return; } - if (this._areaSelectEnable) { - this.trigger(this.events.__SelectStart, { x: e.offsetX, y: e.offsetY}); - } - if (this._dragEnable) { this.trigger(this.events.__DragStart, { x: e.offsetX, y: e.offsetY, code: event.code }); } + + if (this._areaSelectEnable) { + this.trigger(this.events.__SelectStart, { x: e.offsetX, y: e.offsetY}); + } } } @@ -212,7 +212,7 @@ export default class Controller extends Eventful { if (this._isNotLeftMouse) { if (this._panEnable) { - if (dx**2+dy**2 > 8) { + if (dx**2 + dy**2 > 8) { this._pan = true; } this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y }); @@ -220,6 +220,7 @@ export default class Controller extends Eventful { } } else { if (this._dragEnable && this.dragHandle.isDragging()) { + this.selectingHandle.clear(); if (this.limitDrag({dx, dy})) { this.trigger(this.events.__Dragging, { dx, dy }); if (this._reflectEnable) { @@ -241,17 +242,16 @@ export default class Controller extends Eventful { this._isNotLeftMouse = false; this.setCursorStyle('auto'); } else { - if (this._dragEnable && this.dragHandle.isDragging()) { - this.trigger(this.events.__DragEnd, {x: e.offsetX, y: e.offsetY}); - } - - if (this._areaSelectEnable && this.selectingHandle.isSelecting()) { - this.trigger(this.events.__SelectEnd, { x: e.offsetX, y: e.offsetY }); - } - if (this._selectEnable && target) { this.trigger(this.events.__Selected, { target }); } + + if (this._dragEnable && this.dragHandle.isDragging()) { + this.selectingHandle.clear(); + this.trigger(this.events.__DragEnd, {x: e.offsetX, y: e.offsetY}); + } else if (this._areaSelectEnable && this.selectingHandle.isSelecting()) { + this.trigger(this.events.__SelectEnd, { x: e.offsetX, y: e.offsetY }); + } } this._target = null; } diff --git a/src/iscs_new/factory/compose.js b/src/iscs_new/factory/compose.js index e4d1dfef7..eaf3f71dc 100644 --- a/src/iscs_new/factory/compose.js +++ b/src/iscs_new/factory/compose.js @@ -20,7 +20,7 @@ class Compose extends AbstractShape { this.model.elementCodes.forEach(code => { const el = this.shapeFactory.getShapeByCode(code); if (el) { - this.shapeFactory.removeFromLayer(el.type, el); + this.shapeFactory.removeFromLayer(el.type)(el); this.instance.add(el); } }) @@ -67,7 +67,7 @@ class Compose extends AbstractShape { const el = this.shapeFactory.getShapeByCode(code); if (el && el.model) { - this.shapeFactory.removeFromLayer(el.type, el); + this.shapeFactory.removeFromLayer(el.type)(el); this.instance.add(el); el.model.composeCode = this.model.code; el.attr(el.model); @@ -85,7 +85,7 @@ class Compose extends AbstractShape { el.model && el.model.composeCode) { this.instance.remove(el); - this.shapeFactory.addToLayer(el.type, el); + this.shapeFactory.addToLayer(el.type)(el); el.model.composeCode = ''; el.attr(el.model); } diff --git a/src/iscs_new/factory/element.js b/src/iscs_new/factory/element.js index 9bae29a6c..982942e59 100644 --- a/src/iscs_new/factory/element.js +++ b/src/iscs_new/factory/element.js @@ -103,7 +103,7 @@ class Element extends AbstractShape { if (index >= 0) { compose.model.elementCodes.splice(index, 1); compose.remove(this); - this.shapeFactory.addToLayer(el.type, this); + this.shapeFactory.addToLayer(el.type)(this); } } } diff --git a/src/iscs_new/factory/index.js b/src/iscs_new/factory/index.js index 182c702c7..b03708db1 100644 --- a/src/iscs_new/factory/index.js +++ b/src/iscs_new/factory/index.js @@ -130,7 +130,6 @@ class ShapeFactory extends Eventful { } storageShape(shape) { - console.log(shape); if (shape && shape.code) { this.mapShape[shape.code] = shape; } @@ -194,12 +193,12 @@ class ShapeFactory extends Eventful { this.$painter.removeFromLayer(shapeLayer.HightLight)(this.border); } - addToLayer(level, view) { - return this.$painter.addToLayer(level)(view); + addToLayer(level) { + return shape => this.$painter.addToLayer(level)(shape); } - removeFromLayer(level, view) { - return this.$painter.removeFromLayer(level)(view); + removeFromLayer(level) { + return shape => this.$painter.removeFromLayer(level)(shape); } isDrawing() { diff --git a/src/iscs_new/painter.js b/src/iscs_new/painter.js index b9c72b565..e414e40fc 100644 --- a/src/iscs_new/painter.js +++ b/src/iscs_new/painter.js @@ -25,7 +25,7 @@ class Painter extends Group { this.$zr.add(this); // 创建select图层 - this.mapShapeLayer[shapeLayer.SelectIng] = new Group({ name: shapeLayer.SelectIng }); + this.mapShapeLayer[shapeLayer.Selecting] = new Group({ name: shapeLayer.Selecting }); // 创建hover图层 this.mapShapeLayer[shapeLayer.HightLight] = new Group({ name: shapeLayer.HightLight }); @@ -74,16 +74,16 @@ class Painter extends Group { addToLayer(name) { name = Object.keys(graphic).includes(name)? name: `Group`; - return (view) => { - this.mapShapeLayer[name].add(view); - this.$transformHandle.visibleView(view); + return (shape) => { + this.mapShapeLayer[name].add(shape); + this.$transformHandle.visibleView(shape); } } removeFromLayer(name) { name = Object.keys(graphic).includes(name)? name: `Group`; - return (view) => { - this.mapShapeLayer[name].remove(view); + return (shape) => { + this.mapShapeLayer[name].remove(shape); } } diff --git a/src/iscs_new/selectHandle.js b/src/iscs_new/selectHandle.js index b86d80f20..bc7cf919b 100644 --- a/src/iscs_new/selectHandle.js +++ b/src/iscs_new/selectHandle.js @@ -16,15 +16,17 @@ export default class SelectHandle { onSelected(e) { if (e.target) { this.e = {...e}; - if (['Control'].includes(this.$controller.getKeyStr())) { + if ([`Control`].includes(this.$controller.getKeyStr())) { if (this.$controller.isSelected(e.target.code)) { this.$controller.setTarget(null); this.delSelected(e.target); } else { this.addSelected(e.target); } + } else if (!this.$controller.storage.has(e.target.code)){ + this.clear(); + this.addSelected(e.target); } else { - this.clear(); this.addSelected(e.target); } } diff --git a/src/iscs_new/selectingHandle.js b/src/iscs_new/selectingHandle.js index c30254ad7..3ba5eab1f 100644 --- a/src/iscs_new/selectingHandle.js +++ b/src/iscs_new/selectingHandle.js @@ -40,7 +40,7 @@ export default class SelectingHandle { onSelectStart(e) { this.selecting.setShape({ x: e.x, y: e.y, width: 0, height: 0 }); - this.$painter.addToLayer(shapeLayer.SelectIng)(this.selecting); + this.$painter.addToLayer(shapeLayer.Selecting)(this.selecting); this.begPoint = { x: e.x, y: e.y }; this.endPoint = null; } @@ -48,13 +48,13 @@ export default class SelectingHandle { onSelecting(e) { this.endPoint = { x: e.x, y: e.y }; this.selecting.setShape(this.normalizedArea(this.begPoint, this.endPoint)); - this.$painter.addToLayer(shapeLayer.SelectIng)(this.selecting); + this.$painter.addToLayer(shapeLayer.Selecting)(this.selecting); } onSelectEnd(e) { this.endPoint = { x: e.x, y: e.y }; this.selecting.setShape(this.normalizedArea(this.begPoint, this.endPoint)); - this.$painter.addToLayer(shapeLayer.SelectIng)(this.selecting); + this.$painter.addToLayer(shapeLayer.Selecting)(this.selecting); const selectingRect = this.selecting.getBoundingRect(); Object.values(this.$map.getMapShape()).forEach(el => { @@ -64,7 +64,6 @@ export default class SelectingHandle { }); this.clear(); - this.begPoint = this.endPoint = null; } setSelected(target) { @@ -73,7 +72,9 @@ export default class SelectingHandle { } clear() { - this.$painter.removeFromLayer(shapeLayer.SelectIng)(this.selecting); + this.$painter.removeFromLayer(shapeLayer.Selecting)(this.selecting); + this.selecting.setShape({ x: 0, y: 0, width: 0, height: 0 }); + this.begPoint = this.endPoint = null; } checkSelectingRectContainShape(rect, shape) { diff --git a/src/iscs_new/stateHandle.js b/src/iscs_new/stateHandle.js index e111a9b3c..d4efff54f 100644 --- a/src/iscs_new/stateHandle.js +++ b/src/iscs_new/stateHandle.js @@ -5,21 +5,26 @@ export default class StateHandle { } parse(shapeFactory, state) { + console.log(shapeFactory, state); return state; } update(shapeFactory, states=[]) { - return [ - ...this.updateState(states.map(state => this.parse(shapeFactory, state))), - ...this.updateState(states.map(state => this.parse(shapeFactory, state))) - ]; + return states.reduce((list,state) => { + return [ + ...list, + this.parse(shapeFactory, state), // 测试只有自身 + // this.updateState(this.parse(shapeFactory, state)), // 处理自身 + // this.updateState(this.parse(shapeFactory, state)) // 处理依赖 + ]; + }, []); } - updateState(states=[]) { - return [] + updateState(state={}) { + return {} } - updateDepState(states=[]) { - return [] + updateDepState(state={}) { + return {} } } diff --git a/src/iscs_new/transformHandle.js b/src/iscs_new/transformHandle.js index 1d6b37fe1..5dc8ab3c8 100644 --- a/src/iscs_new/transformHandle.js +++ b/src/iscs_new/transformHandle.js @@ -14,22 +14,22 @@ export default class TransformHandle { } // 检查显隐 - checkVisible(view) { - return utils.createBoundingRectCheckVisible(view, this.transform).intersect(this.rect); + checkVisible(shape) { + return utils.createBoundingRectCheckVisible(shape, this.transform).intersect(this.rect); } // 重新计算显隐 - visibleView(view) { + visibleView(shape) { let visible = false; - if (this.checkVisible(view)) { - view.show(); + if (this.checkVisible(shape)) { + shape.show(); visible = true; } else { - view.hide(); + shape.hide(); visible = false; } - view.dirty(); + shape.dirty(); } // 缩放/平移图层 @@ -52,8 +52,8 @@ export default class TransformHandle { // 遍历view执行回调 traverse(cb, context) { this.traverseLayer(layer => { - layer.eachChild(view => { - cb.call(context, view); + layer.eachChild(shape => { + cb.call(context, shape); }) }, context) } diff --git a/src/iscs_new/utils/utils.js b/src/iscs_new/utils/utils.js index 6dc7b040e..d6453e533 100644 --- a/src/iscs_new/utils/utils.js +++ b/src/iscs_new/utils/utils.js @@ -55,12 +55,12 @@ export function createTransform({scale=[1,1], position=[0,0], rotation=0}) { } // 计算自身缩放和偏移后的包围框 -export function createBoundingRect(view) { - const rect = view.getBoundingRect().clone(); - const scaleX = view.scale[0]; - const scaleY = view.scale[1]; - const offsetX = view.position[0]; - const offsetY = view.position[1]; +export function createBoundingRect(shape) { + const rect = shape.getBoundingRect().clone(); + const scaleX = shape.scale[0]; + const scaleY = shape.scale[1]; + const offsetX = shape.position[0]; + const offsetY = shape.position[1]; rect.x = rect.x * scaleX + offsetX; rect.y = rect.y * scaleY + offsetY; @@ -70,8 +70,8 @@ export function createBoundingRect(view) { } // 计算变化计算包围框 -export function createBoundingRectCheckVisible(view, transform) { - const rect = view.getBoundingRect(); +export function createBoundingRectCheckVisible(shape, transform) { + const rect = shape.getBoundingRect(); const scaleX = transform[0]; const scaleY = transform[3]; const offsetX = transform[4]; @@ -85,8 +85,8 @@ export function createBoundingRectCheckVisible(view, transform) { } // 计算图形的旋转中心 -export function createOrigin(view) { - const rect = view.getBoundingRect(); +export function createOrigin(shape) { + const rect = shape.getBoundingRect(); return [rect.x + rect.width/2, rect.y + rect.height/2]; }