diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 06c4241..ac66ffe 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -149,7 +149,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV public animationTime; // 是否按下Ctrl键 isCtrlKeyClicked = false; - isMove = false; /** * 本软件版本号由四部分组成:<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如:1.0.0.20210105_beta * Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主,通常只在软件开发者内部交流,一般而言,该版本软件的Bug较多,需要继续修改。 @@ -157,7 +156,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * RC版: 该版本已经相当成熟了,基本上不存在导致错误的BUG,与即将发行的正式版相差无几。 * Release版: 该版本意味“最终版本”,在前面版本的一系列测试版之后,终归会有一个正式版本,是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下,Release不会以单词形式出现在软件封面上,取而代之的是符号®。 */ - public VERSION = '1.0.13.20210201_beta'; + public VERSION = '1.0.14.20210202_beta'; /** * 数据初始化 */ @@ -187,10 +186,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV public setMulitSelect(b: boolean) { if (b) { this.isCtrlKeyClicked = true; + this.camera2D.plugins.pause('drag'); } else { this.isCtrlKeyClicked = false; - this.rectToolGraphics.visible = false; - this.rectToolGraphics.clear(); + this.camera2D.drag(); } } /** @@ -352,8 +351,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.app.stage.addChild(this.camera2D); this.camera2D - .clamp( - { + .clamp({ left: -10000, right: 10000, top: -10000, @@ -362,17 +360,85 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV .drag() .pinch() .wheel() - .clampZoom( - { + .clampZoom({ minScale: 0.12, maxScale: 16, - } - ) + }) .decelerate(); this.camera2D.on('wheel', event => { this.updateCamera2D(); }); + + this.camera2D.on('pointerdown', event => { + if (this.isCtrlKeyClicked === true) { + this.rectToolGraphics.visible = true; + this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); + this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); + } + }); + this.camera2D.on('pointerup', event => { + if (this.isCtrlKeyClicked === true) { + this.rectToolGraphics.visible = false; + const shapes: AxShape[] = []; + this.backgroundImage.children.forEach(item => { + if ( item instanceof AxShape + && item instanceof AxPreviewImageShape === false) { + // 判断2个矩形是否相交 + const rect1 = this.rectToolGraphics.getBounds(); + const rect2 = item.getBounds(); + if (this.isOverlap(rect1, rect2)) { + shapes.push(item); + } + } + }); + this.rectToolGraphics.clear(); + this.selectAll(shapes); + } + }); + this.camera2D.on('pointerupoutside', event => { + if (this.isCtrlKeyClicked === true) { + this.rectToolGraphics.visible = false; + const shapes: AxShape[] = []; + this.backgroundImage.children.forEach(item => { + if ( item instanceof AxShape + && item instanceof AxPreviewImageShape === false) { + // 判断2个矩形是否相交 + const rect1 = this.rectToolGraphics.getBounds(); + const rect2 = item.getBounds(); + if (this.isOverlap(rect1, rect2)) { + shapes.push(item); + } + } + }); + this.rectToolGraphics.clear(); + this.selectAll(shapes); + } + }); + this.camera2D.on('pointermove', event => { + if (this.isCtrlKeyClicked === true + && this.rectToolGraphics.visible === true) { + this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); + + const init = this.initialScreenMousePos; + const final = this.finalScreenMousePos; + + this.rectToolGraphics.clear(); + this.rectToolGraphics.lineStyle(2, 0x00ff00, 1); + this.rectToolGraphics.beginFill(0xccccf2, 0.25); + if (final.x > init.x && final.y > init.y) { + this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y); + } else if (final.x > init.x && final.y < init.y) { + this.rectToolGraphics.drawRect(init.x, final.y, final.x - init.x, init.y - final.y); + } else if (final.x < init.x && final.y > init.y) { + this.rectToolGraphics.drawRect(final.x, init.y, init.x - final.x, final.y - init.y); + } else if (final.x < init.x && final.y < init.y) { + this.rectToolGraphics.drawRect(final.x, final.y, init.x - final.x, init.y - final.y); + } + this.rectToolGraphics.endFill(); + } + }); + } /** * 更新2D相机 @@ -423,28 +489,28 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.refreshPreviewLineSegment(this.currentClickPoint.position, this.circleShadow.position); this.refreshPreviewPoint(); } - /** - * 显示框选 - */ - if (this.rectToolGraphics.visible === true) { + // /** + // * 显示框选 + // */ + // if (this.rectToolGraphics.visible === true) { - const init = this.initialScreenMousePos; - const final = this.finalScreenMousePos; + // const init = this.initialScreenMousePos; + // const final = this.finalScreenMousePos; - this.rectToolGraphics.clear(); - this.rectToolGraphics.lineStyle(2, 0x00ff00, 1); - this.rectToolGraphics.beginFill(0xccccf2, 0.25); - if (final.x > init.x && final.y > init.y) { - this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y); - } else if (final.x > init.x && final.y < init.y) { - this.rectToolGraphics.drawRect(init.x, final.y, final.x - init.x, init.y - final.y); - } else if (final.x < init.x && final.y > init.y) { - this.rectToolGraphics.drawRect(final.x, init.y, init.x - final.x, final.y - init.y); - } else if (final.x < init.x && final.y < init.y) { - this.rectToolGraphics.drawRect(final.x, final.y, init.x - final.x, init.y - final.y); - } - this.rectToolGraphics.endFill(); - } + // this.rectToolGraphics.clear(); + // this.rectToolGraphics.lineStyle(2, 0x00ff00, 1); + // this.rectToolGraphics.beginFill(0xccccf2, 0.25); + // if (final.x > init.x && final.y > init.y) { + // this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y); + // } else if (final.x > init.x && final.y < init.y) { + // this.rectToolGraphics.drawRect(init.x, final.y, final.x - init.x, init.y - final.y); + // } else if (final.x < init.x && final.y > init.y) { + // this.rectToolGraphics.drawRect(final.x, init.y, init.x - final.x, final.y - init.y); + // } else if (final.x < init.x && final.y < init.y) { + // this.rectToolGraphics.drawRect(final.x, final.y, init.x - final.x, init.y - final.y); + // } + // this.rectToolGraphics.endFill(); + // } }); /** * 创建图标事件(数据处理) @@ -674,13 +740,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.backgroundImage .on('pointerdown', event => { if (event.data.button !== 0) { return; } - console.log(this.backgroundImage.toLocal(this.mousePosition)); - if (!this.isMove && this.isCtrlKeyClicked === false) { - event.currentTarget.data = event.data; - // this.isMove = true; - event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); - event.currentTarget.dragPoint.x -= event.currentTarget.x; - event.currentTarget.dragPoint.y -= event.currentTarget.y; + // console.log(this.backgroundImage.toLocal(this.mousePosition)); + if (this.isCtrlKeyClicked === false) { switch (this.paintMode) { case PaintMode.endPaint: break; @@ -871,51 +932,49 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // this.emit('backgroundScale', this.backgroundImage.scale.x); break; } - } else if (!this.isMove && this.isCtrlKeyClicked === true) { - this.rectToolGraphics.visible = true; - // this.isMove = true; - this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); - this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); } + // else if (this.isCtrlKeyClicked === true) { + // this.rectToolGraphics.visible = true; + // this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); + // this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); + // } }) .on('pointerup', event => { - this.isMove = false; - event.currentTarget.data = null; + // event.currentTarget.data = null; - if (this.rectToolGraphics.visible === true) { - const shapes: AxShape[] = []; - this.backgroundImage.children.forEach(item => { - if ( item instanceof AxShape - && item instanceof AxPreviewImageShape === false) { - // 判断2个矩形是否相交 - const rect1 = this.rectToolGraphics.getBounds(); - const rect2 = item.getBounds(); - if (this.isOverlap(rect1, rect2)) { - shapes.push(item); - } - } - }); - this.rectToolGraphics.clear(); - this.rectToolGraphics.visible = false; - this.selectAll(shapes); - } + // if (this.rectToolGraphics.visible === true) { + // const shapes: AxShape[] = []; + // this.backgroundImage.children.forEach(item => { + // if ( item instanceof AxShape + // && item instanceof AxPreviewImageShape === false) { + // // 判断2个矩形是否相交 + // const rect1 = this.rectToolGraphics.getBounds(); + // const rect2 = item.getBounds(); + // if (this.isOverlap(rect1, rect2)) { + // shapes.push(item); + // } + // } + // }); + // this.rectToolGraphics.clear(); + // this.rectToolGraphics.visible = false; + // this.selectAll(shapes); + // } }) .on('pointerupoutside', event => { - if (this.isMove) { - this.isMove = false; - event.currentTarget.data = null; - } + // if (this.isMove) { + // event.currentTarget.data = null; + // } }) .on('pointermove', event => { - if (this.isMove && this.isCtrlKeyClicked === false) { - const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); - event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x; - event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y; - } else if (this.isMove && this.isCtrlKeyClicked === true) { - if (this.rectToolGraphics.visible === true) { - this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); - } - } + // if (this.isCtrlKeyClicked === false) { + // // const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); + // // event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x; + // // event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y; + // } else if (this.isCtrlKeyClicked === true) { + // if (this.rectToolGraphics.visible === true) { + // this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); + // } + // } }) .on('rightclick', event => { event.stopPropagation();