diff --git a/.gitignore b/.gitignore index 86d943a..a80a6b3 100644 --- a/.gitignore +++ b/.gitignore @@ -44,3 +44,4 @@ testem.log # System Files .DS_Store Thumbs.db +debug.log diff --git a/debug.log b/debug.log deleted file mode 100644 index c4638ef..0000000 --- a/debug.log +++ /dev/null @@ -1,3 +0,0 @@ -[1229/141605.754:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3) -[0104/100053.968:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3) -[0122/085819.900:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3) diff --git a/src/app/working-area/model/axImageShapeTest.ts b/src/app/working-area/model/axImageShapeTest.ts deleted file mode 100644 index 81c141c..0000000 --- a/src/app/working-area/model/axImageShapeTest.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { AxRectangleShape } from "./axRectangleShape"; - -export class AxImageShapeTest extends AxRectangleShape{ - /** - * - */ - constructor(x:number,y:number,width:number,height:number) { - super(x,y,width,height); - - } -} \ No newline at end of file diff --git a/src/app/working-area/model/axLegend.ts b/src/app/working-area/model/axLegend.ts index a886fd3..f2158ac 100644 --- a/src/app/working-area/model/axLegend.ts +++ b/src/app/working-area/model/axLegend.ts @@ -429,7 +429,6 @@ export class AxLegend extends AxShape { */ public drawBorder(scale: number) { const visible = this.upLeft.visible; - console.log(visible); this.setPointVisiable(false); super.drawBorder(scale); diff --git a/src/app/working-area/model/axMessageSystem.ts b/src/app/working-area/model/axMessageSystem.ts new file mode 100644 index 0000000..1451f9c --- /dev/null +++ b/src/app/working-area/model/axMessageSystem.ts @@ -0,0 +1,90 @@ +/** + * 浜嬩欢绯荤粺 + */ +export class AxMessageSystem { + /** 鐩戝惉鏁扮粍 */ + private static listeners = {}; + + /** + * 娉ㄥ唽浜嬩欢 + * @param name 浜嬩欢鍚嶇О + * @param callback 鍥炶皟鍑芥暟 + * @param context 涓婁笅鏂 + */ + public static addListener(name: string, callback: () => void, context: any) { + const observers: Observer[] = AxMessageSystem.listeners[name]; + if (!observers) { + AxMessageSystem.listeners[name] = []; + } + AxMessageSystem.listeners[name].push(new Observer(callback, context)); + } + + /** + * 绉婚櫎浜嬩欢 + * @param name 浜嬩欢鍚嶇О + * @param callback 鍥炶皟鍑芥暟 + * @param context 涓婁笅鏂 + */ + public static removeListener(name: string, callback: () => void, context: any) { + const observers: Observer[] = AxMessageSystem.listeners[name]; + if (!observers) { return; } + const length = observers.length; + for (let i = 0; i < length; i++) { + const observer = observers[i]; + if (observer.compar(context)) { + observers.splice(i, 1); + break; + } + } + if (observers.length === 0) { + delete AxMessageSystem.listeners[name]; + } + } + + /** + * 鍙戦佷簨浠 + * @param name 浜嬩欢鍚嶇О + */ + public static send(name: string, ...args: any[]) { + const observers: Observer[] = AxMessageSystem.listeners[name]; + if (!observers) { return; } + const length = observers.length; + for (let i = 0; i < length; i++) { + const observer = observers[i]; + observer.notify(name, ...args); + } + } +} + +/** + * 瑙傚療鑰 + */ +class Observer { + /** 鍥炶皟鍑芥暟 */ + private callback: () => void; + /** 涓婁笅鏂 */ + private context: any = null; + + constructor(callback: () => void, context: any) { + const self = this; + self.callback = callback; + self.context = context; + } + + /** + * 鍙戦侀氱煡 + * @param args 涓嶅畾鍙傛暟 + */ + notify(...args: any[]): void { + const self = this; + self.callback.call(self.context, ...args); + } + + /** + * 涓婁笅鏂囨瘮杈 + * @param context 涓婁笅鏂 + */ + compar(context: any): boolean { + return context === this.context; + } +} diff --git a/src/app/working-area/model/axRectangleShape.ts b/src/app/working-area/model/axRectangleShape.ts index 297ffdb..cf61f6c 100644 --- a/src/app/working-area/model/axRectangleShape.ts +++ b/src/app/working-area/model/axRectangleShape.ts @@ -1,21 +1,21 @@ -import { Sprite } from "pixi.js"; -import { Graphics } from "pixi.js"; -import { WorkingAreaComponent } from "../working-area.component"; -import { AxShape } from "./axShape"; +import { Sprite } from 'pixi.js'; +import { Graphics } from 'pixi.js'; +import { WorkingAreaComponent } from '../working-area.component'; +import { AxShape } from './axShape'; -export class AxRectangleShape extends AxShape{ +export class AxRectangleShape extends AxShape { /** * */ - constructor(x:number,y:number,width:number,height:number,assetData: any, workingArea: WorkingAreaComponent) { - super(assetData,workingArea); - this.beginFill(0x0000ff,1); - this.lineStyle(1, 0xff0000,1); + constructor(x: number, y: number, width: number, height: number, assetData: any, workingArea: WorkingAreaComponent) { + super(assetData, workingArea); + this.beginFill(0x0000ff, 1); + this.lineStyle(1, 0xff0000, 1); this.drawRect(x, y, width, height); this.endFill(); - - + + } - + } diff --git a/src/app/working-area/model/axSelection.ts b/src/app/working-area/model/axSelection.ts new file mode 100644 index 0000000..ce7a6e0 --- /dev/null +++ b/src/app/working-area/model/axSelection.ts @@ -0,0 +1,52 @@ +/** + * 閫夋嫨鍣 + */ +export class AxSelection { + constructor() { + } + private objects: Set = new Set(); + // 鑾峰緱绗竴涓璞 + public first(): any { + if (this.objects.size > 0) { + return this.objects[0]; + } else { + return null; + } + } + // 鏄惁宸茬粡閫夋嫨浜嗗璞 + public has(obj: any): boolean { + return this.objects.has(obj); + } + // 鑾峰緱鎵鏈夊璞 + public all() { + return this.objects; + } + // 鑾峰彇闆嗗悎闀垮害 + public size(): number { + return this.objects.size; + } + // 娣诲姞瀵硅薄 + public add(obj: any) { + this.objects.add(obj); + } + // 娣诲姞闆嗗悎 + public addArray(array: any[]) { + array.forEach(item => { + this.objects.add(item); + }); + } + // 绉婚櫎瀵硅薄 + public delete(obj: any) { + this.objects.delete(obj); + } + // 绉婚櫎闆嗗悎 + public deleteArray(array: any[]) { + array.forEach(item => { + this.objects.delete(item); + }); + } + // 娓呯┖鎵鏈夊璞 + public clear() { + this.objects.clear(); + } +} diff --git a/src/app/working-area/model/axShape.ts b/src/app/working-area/model/axShape.ts index 27c1773..3a5dae7 100644 --- a/src/app/working-area/model/axShape.ts +++ b/src/app/working-area/model/axShape.ts @@ -8,7 +8,7 @@ import { WorkingAreaComponent } from '../working-area.component'; */ export class AxShape extends Graphics { assetData: any; - pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png') + pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png'); workingArea: WorkingAreaComponent; // 鍙互琚Щ鍔ㄧ殑 moveable = true; @@ -20,7 +20,11 @@ export class AxShape extends Graphics { showName = true; // 杈规 border: PIXI.Graphics = new PIXI.Graphics(); - + // 榧犳爣浣嶇疆 + mousePosition: PIXI.Point; + // 榧犳爣鎷栧姩 + mouseDragging: boolean; + constructor(assetData: any, workingArea: WorkingAreaComponent) { super(); this.border.visible = false; @@ -35,50 +39,30 @@ export class AxShape extends Graphics { .on('pointerdown', event => { event.stopPropagation(); if (this.selectable) { - this.workingArea.selection.selectOne(this); + this.workingArea.select(this); } if (this.moveable) { - event.currentTarget.data = event.data; - event.currentTarget.alpha = 0.5; - event.currentTarget.dragging = true; - - event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); - event.currentTarget.dragPoint.x -= event.currentTarget.x; - event.currentTarget.dragPoint.y -= event.currentTarget.y; + this.mouseDragging = true; + this.mousePosition = new PIXI.Point(event.data.global.x, event.data.global.y); } }) .on('pointerup', event => { - if (event.currentTarget.dragging) { - event.currentTarget.alpha = 1; - event.currentTarget.dragging = false; - event.currentTarget.data = null; - } + this.mouseDragging = false; }) .on('pointerupoutside', event => { - if (event.currentTarget.dragging) { - event.currentTarget.alpha = 1; - event.currentTarget.dragging = false; - event.currentTarget.data = null; - } + this.mouseDragging = false; }) .on('pointermove', event => { - if (event.currentTarget.dragging) { - const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); - - // const offsetX = newPosition.x - event.currentTarget.dragPoint.x; - // const offsetY = newPosition.y - event.currentTarget.dragPoint.y; - // const offset = this.workingArea.backgroundImage.toLocal(new Point(offsetX, offsetY)); - // event.currentTarget.position += offset; - // // this.workingArea.selection.objects.forEach(shpae => { - // // shpae.x = newPosition.x - event.currentTarget.dragPoint.x; - // // shpae.y = newPosition.y - event.currentTarget.dragPoint.y; - // // shpae.assetData.Point = new PIXI.Point(this.x, this.y); - // // this.workingArea.canvasData.isChange = true; - // // }) - event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x; - event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y; - this.assetData.Point = new PIXI.Point(this.x, this.y); - this.workingArea.canvasData.isChange = true; + if (this.mouseDragging) { + this.workingArea.selection.all().forEach(item => { + const x = event.data.global.x - this.mousePosition.x; + const y = event.data.global.y - this.mousePosition.y; + item.x += x * (1 / this.workingArea.backgroundImage.scale.x); + item.y += y * (1 / this.workingArea.backgroundImage.scale.y); + item.assetData.Point = new PIXI.Point(item.x, item.y); + this.workingArea.canvasData.isChange = true; + }); + this.mousePosition = new PIXI.Point(event.data.global.x, event.data.global.y); } }) .on('rightclick', event => { @@ -86,14 +70,14 @@ export class AxShape extends Graphics { }); } redraw(): void { - + } - refresh(): void{ - + refresh(): void { + } public setItemScale(scale: number) { - + } public showBorder() { @@ -110,10 +94,10 @@ export class AxShape extends Graphics { * @param value 鏄剧ず鐘舵 */ public setPointVisiable(value: boolean) { - + } /** - * + * * @param rect 鐢昏竟妗 */ public drawBorder(scale: number) { @@ -127,14 +111,14 @@ export class AxShape extends Graphics { this.border.lineStyle(scale * 1, 0x00a8ff); - var spaceLength = scale * 1; - var lineLenght = rect.width + 0.5 + 0.5; - var dashLength = scale*( lineLenght +spaceLength - Math.floor((rect.width + rect.height)/2 / 4.1))/Math.floor((rect.width + rect.height)/2 / 4.1); - this.drawDash(this.border, p1.x -0.5*scale, p1.y, p2.x + 0.5*scale, p2.y,dashLength,spaceLength); - this.drawDash(this.border, p2.x, p2.y -0.5*scale, p3.x, p3.y + 0.5*scale, dashLength, spaceLength); - this.drawDash(this.border, p3.x+0.5*scale, p3.y, p4.x - 0.5*scale, p4.y, dashLength, spaceLength); - this.drawDash(this.border, p4.x, p4.y + 0.5*scale, p1.x, p1.y - 0.5*scale, dashLength, spaceLength); - + const spaceLength = scale * 1; + const lineLenght = rect.width + 0.5 + 0.5; + const dashLength = scale * ( lineLenght + spaceLength - Math.floor((rect.width + rect.height) / 2 / 4.1)) / Math.floor((rect.width + rect.height) / 2 / 4.1); + this.drawDash(this.border, p1.x - 0.5 * scale, p1.y, p2.x + 0.5 * scale, p2.y, dashLength, spaceLength); + this.drawDash(this.border, p2.x, p2.y - 0.5 * scale, p3.x, p3.y + 0.5 * scale, dashLength, spaceLength); + this.drawDash(this.border, p3.x + 0.5 * scale, p3.y, p4.x - 0.5 * scale, p4.y, dashLength, spaceLength); + this.drawDash(this.border, p4.x, p4.y + 0.5 * scale, p1.x, p1.y - 0.5 * scale, dashLength, spaceLength); + this.border.lineStyle(0, 0x0000ff); // this.border.beginFill(0x00ff00,0.1); this.border.moveTo(p1.x, p1.y); @@ -145,19 +129,19 @@ export class AxShape extends Graphics { // this.border.endFill(); } // 鐢昏櫄绾 - drawDash(target, x1, y1, x2, y2,dashLength = 5, spaceLength = 1) { - let x = x2 - x1; - let y = y2 - y1; + drawDash(target, x1, y1, x2, y2, dashLength = 5, spaceLength = 1) { + const x = x2 - x1; + const y = y2 - y1; let hyp = Math.sqrt((x) * (x) + (y) * (y)); - let units = hyp / (dashLength + spaceLength); - let dashSpaceRatio = dashLength / (dashLength + spaceLength); - let dashX = (x / units) * dashSpaceRatio; - let spaceX = (x / units) - dashX; - let dashY = (y / units) * dashSpaceRatio; - let spaceY = (y / units) - dashY; + const units = hyp / (dashLength + spaceLength); + const dashSpaceRatio = dashLength / (dashLength + spaceLength); + const dashX = (x / units) * dashSpaceRatio; + const spaceX = (x / units) - dashX; + const dashY = (y / units) * dashSpaceRatio; + const spaceY = (y / units) - dashY; target.moveTo(x1, y1); - + while (hyp > 0) { x1 += dashX; y1 += dashY; @@ -200,7 +184,7 @@ export class AxShape extends Graphics { return new PIXI.Point(gravityLat, gravityLng); } // 璁＄畻绾挎涓偣鍧愭爣 - public getLineCenter(point1:PIXI.Point,point2:PIXI.Point) { - return new PIXI.Point((point1.x+point2.x)/2,(point1.y+point2.y)/2) + public getLineCenter(point1: PIXI.Point, point2: PIXI.Point) { + return new PIXI.Point((point1.x + point2.x) / 2, (point1.y + point2.y) / 2); } } diff --git a/src/app/working-area/model/messageSystem.ts b/src/app/working-area/model/messageSystem.ts deleted file mode 100644 index 322eef4..0000000 --- a/src/app/working-area/model/messageSystem.ts +++ /dev/null @@ -1,37 +0,0 @@ -class MyEvent extends CustomEvent { - public static readonly CMD: string = "EVENT_NAME"; - public constructor($type: string , $data: T ) { - super( $type , { detail: $data, bubbles: true, cancelable: true, composed: true }); - } -} - -class MyDispatch extends EventTarget { - private static _instance: MyDispatch; - public static get Instance(): MyDispatch { - if (!MyDispatch._instance) MyDispatch._instance = new MyDispatch(); - return MyDispatch._instance; - } - public send($data: T, $type: string = MyEvent.CMD): void { - const $event: CustomEvent = new MyEvent($type, $data); - this.dispatchEvent($event); - } -} - -class Test { - - public constructor() { - MyDispatch.Instance.addEventListener(MyEvent.CMD, this.onEvent as EventListener); - } - private onEvent($e: MyEvent): void { - console.log(`target ${$e.target}`); - console.log(`name: ${$e.detail._name} , occupation: ${$e.detail._occupation}`); - } -} - -interface ITest { - _name: string; - _occupation: string; -} - -let $test: Test = new Test(); -MyDispatch.Instance.send({ _name: `Aonaufly`, _occupation: `it` }); diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 2b9c93f..851b75d 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -16,9 +16,9 @@ import { PropertyInfo } from './model/PropertyInfo'; import { AxPreviewImageShape } from './model/axPreviewImageShape'; import { AxArrowConnector } from './model/axArrowConnector'; import { AxLegend, Legend } from './model/axLegend'; -import { NullTemplateVisitor } from '@angular/compiler'; -import { AxRectangleShape } from './model/axRectangleShape'; import { AxGrid } from './model/axGrid'; +import { AxSelection } from './model/axSelection'; +import { AxMessageSystem } from './model/axMessageSystem'; @Component({ @@ -76,7 +76,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 閫夋嫨鍣 */ - public selection: Selection = new Selection(this); + public readonly selection: AxSelection = new AxSelection(); /** * 褰撳墠榧犳爣鐨勭偣 */ @@ -141,6 +141,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 缃戞牸 */ public grid: AxGrid = null; + // 鏄惁鎸変笅Ctrl閿 + isCtrlKeyClicked = false; + isMove = false; /** * 鏈蒋浠剁増鏈彿鐢卞洓閮ㄥ垎缁勬垚锛<涓荤増鏈彿><娆＄増鏈彿><淇鐗堟湰鍙><鏃ユ湡鍔犲笇鑵婂瓧姣嶇増鏈彿> 渚嬪锛1.0.0.20210105_beta * Alpha鐗: 姝ょ増鏈〃绀鸿杞欢鍦ㄦ闃舵涓昏鏄互瀹炵幇杞欢鍔熻兘涓轰富锛岄氬父鍙湪杞欢寮鍙戣呭唴閮ㄤ氦娴侊紝涓鑸岃█锛岃鐗堟湰杞欢鐨凚ug杈冨锛岄渶瑕佺户缁慨鏀广 @@ -148,7 +151,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * RC鐗: 璇ョ増鏈凡缁忕浉褰撴垚鐔熶簡锛屽熀鏈笂涓嶅瓨鍦ㄥ鑷撮敊璇殑BUG锛屼笌鍗冲皢鍙戣鐨勬寮忕増鐩稿樊鏃犲嚑銆 * Release鐗: 璇ョ増鏈剰鍛斥滄渶缁堢増鏈濓紝鍦ㄥ墠闈㈢増鏈殑涓绯诲垪娴嬭瘯鐗堜箣鍚庯紝缁堝綊浼氭湁涓涓寮忕増鏈紝鏄渶缁堜氦浠樼敤鎴蜂娇鐢ㄧ殑涓涓増鏈傝鐗堟湰鏈夋椂涔熺О涓烘爣鍑嗙増銆備竴鑸儏鍐典笅锛孯elease涓嶄細浠ュ崟璇嶅舰寮忓嚭鐜板湪杞欢灏侀潰涓婏紝鍙栬屼唬涔嬬殑鏄鍙仿 */ - public VERSION = '1.0.11.20210122_beta'; + public VERSION = '1.0.12.20210125_beta'; /** * 鏁版嵁鍒濆鍖 */ @@ -157,12 +160,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.sayHello(); this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => { if (event.keyCode === 17) { - this.selection.isMultiselection = true; + this.isCtrlKeyClicked = true; } }); this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => { if (event.keyCode === 17) { - this.selection.isMultiselection = false; + this.isCtrlKeyClicked = false; this.rectToolGraphics.visible = false; this.rectToolGraphics.clear(); } @@ -176,18 +179,43 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 鍒犻櫎閫変腑鐨勫浘鏍 */ public deleteSelectedShape() { - this.selection.objects.forEach(item => { - this.deleteShape(item); - }); - this.selection.deselectAll(); - } - /** - * - * @param obj 鍒犻櫎涓涓舰鐘 - */ - public deleteShape(shape) { - if (this.allowEdit && this.canvasData.gameMode === shape.assetData.GameMode) { - this.emit('deleteIcon', shape); + if (this.selection.all().size > 0) { + this.selection.all().forEach(axShape => { + if (this.allowEdit && this.canvasData.gameMode === axShape.assetData.GameMode) { + // 鍒犻櫎鍥句緥瀵硅薄 + const temp = this.backgroundImage.getChildByName('鍥句緥') as AxLegend; + if ( temp !== undefined + && temp !== null + && axShape.assetData.Name !== '鍥句緥') { + const itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1); + temp.deleteItem(itemLegend); + } + if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 鍩烘湰淇℃伅 + // 鍒犻櫎妤煎眰鏁版嵁 + delete this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id]; + // 鍒犻櫎寤虹瓚鏁版嵁 + delete this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id]; + } else if (axShape.assetData.GameMode === GameMode.Assignment) { // 澶勭疆棰勬 + delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id]; + delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id]; + delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id]; + } else if (axShape.assetData.GameMode === GameMode.Examinee) { // 鑰冪敓鑰冭瘯 + if (axShape.assetData.Tag === 1) { + // 鍒犻櫎妤煎眰鏁版嵁 + delete this.canvasData.examOriginaleveryStoreyData.data[axShape.assetData.Id]; + } else { + delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id]; + delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id]; + delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id]; + } + } + this.backgroundImage.removeChild(axShape); + } + }); + this.selection.clear(); + this.emit('canvasDataChanged'); + this.canvasData.isChange = true; + AxMessageSystem.send(CanvasAction.selectionChanged); } } /** @@ -315,7 +343,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.app.stage.addChild(this.grid); this.grid.drawGrid(); this.grid.onMousemove = (evt, gridCoord) => { - // console.log(gridCoord); + }; this.createBackgroundImage(); @@ -355,28 +383,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.rectToolGraphics.endFill(); } }); - /** - * 閫変腑浜嬩欢 - */ - this.on('select', (axShape: AxShape) => { - // if (axShape instanceof AxRectangleShape) { - // let upLeft: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture); - // let upRight: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture); - // let downLeft: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture); - // let downRight: PIXI.Sprite = new PIXI.Sprite(this.editorPointTexture); - // } else { - axShape.showBorder(); - axShape.drawBorder(1 / this.backgroundImage.scale.x); - axShape.setPointVisiable(this.allowEdit); - // } - }); - /** - * 鍙栨秷閫変腑浜嬩欢 - */ - this.on('deselect', (axShape: AxShape) => { - axShape.hideBorder(); - axShape.setPointVisiable(false); - }); /** * 鍒涘缓鍥炬爣浜嬩欢锛堟暟鎹鐞嗭級 */ @@ -415,44 +421,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.emit('canvasDataChanged'); this.canvasData.isChange = true; }); - /** - * 鍒犻櫎鍥炬爣浜嬩欢(鏁版嵁澶勭悊) - */ - this.on('deleteIcon', (axShape: AxShape) => { - // 鍒犻櫎鍥句緥瀵硅薄 - const temp = this.backgroundImage.getChildByName('鍥句緥') as AxLegend; - if ( temp !== undefined - && temp !== null - && axShape.assetData.Name !== '鍥句緥') { - const itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1); - temp.deleteItem(itemLegend); - } - - - if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 鍩烘湰淇℃伅 - // 鍒犻櫎妤煎眰鏁版嵁 - delete this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id]; - // 鍒犻櫎寤虹瓚鏁版嵁 - delete this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id]; - } else if (axShape.assetData.GameMode === GameMode.Assignment) { // 澶勭疆棰勬 - delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id]; - delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id]; - delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id]; - } else if (axShape.assetData.GameMode === GameMode.Examinee) { // 鑰冪敓鑰冭瘯 - if (axShape.assetData.Tag === 1) { - // 鍒犻櫎妤煎眰鏁版嵁 - delete this.canvasData.examOriginaleveryStoreyData.data[axShape.assetData.Id]; - } else { - delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id]; - delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id]; - delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id]; - } - - } - this.backgroundImage.removeChild(axShape); - this.emit('canvasDataChanged'); - this.canvasData.isChange = true; - }); } /** * 閲嶇疆鐢诲竷 @@ -513,19 +481,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } }); } - /** - * 璁剧疆楂樹寒 - */ - public setHighlight(ids: string[]): void { - this.selection.deselectAll(); - ids.forEach(item => { - let obj = this.backgroundImage.getChildByName(item); - if (obj === null) { - obj = this.app.stage.getChildByName(item); - } - this.selection.select(obj); - }); - } /** * 鍒涘缓妤煎眰鍥惧舰 */ @@ -631,10 +586,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV .on('pointerdown', event => { if (event.data.button !== 0) { return; } console.log(this.backgroundImage.toLocal(this.mousePosition)); - if (!event.currentTarget.dragging && this.selection.isMultiselection === false) { - this.selection.deselectAll(); + if (!this.isMove && this.isCtrlKeyClicked === false) { event.currentTarget.data = event.data; - event.currentTarget.dragging = true; + 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; @@ -828,48 +782,47 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // this.emit('backgroundScale', this.backgroundImage.scale.x); break; } - } else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) { + } else if (!this.isMove && this.isCtrlKeyClicked === true) { this.rectToolGraphics.visible = true; - event.currentTarget.dragging = true; + this.isMove = true; this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); } }) .on('pointerup', event => { - if (event.currentTarget.dragging) { - event.currentTarget.dragging = false; - event.currentTarget.data = null; - } + this.isMove = false; + event.currentTarget.data = null; + if (this.rectToolGraphics.visible === true) { + const shapes: AxShape[] = []; this.backgroundImage.children.forEach(item => { - if ( item instanceof AxImageShape - || item instanceof MultipointIcon - || item instanceof PolygonIcon - || item instanceof AxArrowConnector) { + if ( item instanceof AxShape + && item instanceof AxPreviewImageShape === false) { // 鍒ゆ柇2涓煩褰㈡槸鍚︾浉浜 const rect1 = this.rectToolGraphics.getBounds(); const rect2 = item.getBounds(); if (this.isOverlap(rect1, rect2)) { - this.selection.select(item); + shapes.push(item); } } }); this.rectToolGraphics.clear(); this.rectToolGraphics.visible = false; + this.selectAll(shapes); } }) .on('pointerupoutside', event => { - if (event.currentTarget.dragging) { - event.currentTarget.dragging = false; + if (this.isMove) { + this.isMove = false; event.currentTarget.data = null; } }) .on('pointermove', event => { - if (event.currentTarget.dragging && this.selection.isMultiselection === false) { + 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 (event.currentTarget.dragging && this.selection.isMultiselection === true) { + } else if (this.isMove && this.isCtrlKeyClicked === true) { if (this.rectToolGraphics.visible === true) { this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); } @@ -877,7 +830,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV }) .on('rightclick', event => { event.stopPropagation(); - this.selection.deselectAll(); + this.deselectAll(); this.setPaintMode(PaintMode.endPaint); }) .on('pointerover', (event) => { @@ -951,11 +904,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * @param imageUrl * @param imageAngle */ - public async refresh(imageUrl: string = this.canvasData.selectStorey.imageUrl, imageAngle: number = this.canvasData.selectStorey.imageAngle): Promise { + public async refresh(imageUrl: string = this.canvasData.selectStorey.imageUrl, + imageAngle: number = this.canvasData.selectStorey.imageAngle): Promise { await this.refreshBackgroundImage(); - // 娓呯┖鎵鏈夊浘褰 - this.selection.deselectAll(); + this.deselectAll(); const itemList = []; this.backgroundImage.children.forEach(item => { if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { @@ -978,10 +931,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 鍔犺浇鏃犲叧鑱斾俊鎭缃妗 * @data 澶勭疆棰勬鏁版嵁 */ - public async loadNoRelevantInformationDisposalPlan(data:DisposalNodeData): Promise { - await this.refreshBackgroundImage(data.BackgroundImageUrl,data.BackgroundImageAngle); + public async loadNoRelevantInformationDisposalPlan(data: DisposalNodeData): Promise { + await this.refreshBackgroundImage(data.BackgroundImageUrl, data.BackgroundImageAngle); // 娓呯┖鎵鏈夊浘褰 - this.selection.deselectAll(); + this.deselectAll(); const itemList = []; this.backgroundImage.children.forEach(item => { if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { @@ -1142,7 +1095,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV */ public beginPaint() { console.log(this.canvasData.selectTemplateData); - this.selection.deselectAll(); + this.deselectAll(); this.setPaintMode(PaintMode.endPaint); this.setPaintMode(this.canvasData.selectTemplateData.interactiveMode); } @@ -1291,49 +1244,53 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 澶嶅埗 */ public copy(): void { - this.copyData = []; - this.selection.objects.forEach(item => { - const newData = JSON.parse(JSON.stringify(item.assetData)); - this.copyData.push(newData); - }); + this.copyData = []; + this.selection.all().forEach(item => { + const newData = JSON.parse(JSON.stringify(item.assetData)); + this.copyData.push(newData); + }); } /** * 绮樿创 */ public paste(companyId: string, buildingId: string, floorId: string): void { - this.copyData.forEach(item => { - item.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5); - const newData = JSON.parse(JSON.stringify(item)); - newData.Id = ObjectID.default.generate(), - newData.CompanyId = companyId; - newData.BuildingId = buildingId; - newData.FloorId = floorId; - newData.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5); - switch (item.InteractiveMode) { - case PaintMode.singlePointIcon: - const singleIcon = new AxImageShape(newData, this); - this.emit('createIcon', singleIcon); - break; - case PaintMode.lineIcon: - const lineIcon = new MultipointIcon(newData, this); - this.emit('createIcon', lineIcon); - break; - case PaintMode.polygonIcon: - const polygonIcon = new PolygonIcon(newData, this); - this.emit('createIcon', polygonIcon); - break; - case PaintMode.Pipeline: - if (item.Name === '璺濈') { - const wall = new AxArrowConnector(newData, this, true, true); - this.emit('createIcon', wall); - } else if (item.Name === '鏅氬' || item.Name === '鎵块噸澧') { - const wall = new AxArrowConnector(newData, this, false, false); - this.emit('createIcon', wall); - } - break; - } - this.selection.select(this.backgroundImage.getChildByName(newData.Id)); - }); + const ids: string[] = []; + if (this.copyData.length > 0) { + this.copyData.forEach(item => { + item.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5); + const newData = JSON.parse(JSON.stringify(item)); + newData.Id = ObjectID.default.generate(), + newData.CompanyId = companyId; + newData.BuildingId = buildingId; + newData.FloorId = floorId; + newData.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5); + switch (item.InteractiveMode) { + case PaintMode.singlePointIcon: + const singleIcon = new AxImageShape(newData, this); + this.emit('createIcon', singleIcon); + break; + case PaintMode.lineIcon: + const lineIcon = new MultipointIcon(newData, this); + this.emit('createIcon', lineIcon); + break; + case PaintMode.polygonIcon: + const polygonIcon = new PolygonIcon(newData, this); + this.emit('createIcon', polygonIcon); + break; + case PaintMode.Pipeline: + if (item.Name === '璺濈') { + const wall = new AxArrowConnector(newData, this, true, true); + this.emit('createIcon', wall); + } else if (item.Name === '鏅氬' || item.Name === '鎵块噸澧') { + const wall = new AxArrowConnector(newData, this, false, false); + this.emit('createIcon', wall); + } + break; + } + ids.push(newData.Id); + }); + this.setHighlight(ids); + } } //////////////////////////////////////////////////////////////////////// 閫氱敤///////////////////////////////////////////////////////////////////////////// /** @@ -1357,7 +1314,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV public async onExamineeClickFloor() { await this.refreshBackgroundImage(); // 娓呯┖鎵鏈夊浘褰 - this.selection.deselectAll(); + this.deselectAll(); const itemList = []; this.backgroundImage.children.forEach(item => { if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { @@ -1384,7 +1341,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV public async onExaminerClickFloor() { await this.refreshBackgroundImage(); // 娓呯┖鎵鏈夊浘褰 - this.selection.deselectAll(); + this.deselectAll(); const itemList = []; this.backgroundImage.children.forEach(item => { if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { @@ -1410,7 +1367,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV public async onExaminerClickFloor_CreateTestpaper() { await this.refreshBackgroundImage(); // 娓呯┖鎵鏈夊浘褰 - this.selection.deselectAll(); + this.deselectAll(); const itemList = []; this.backgroundImage.children.forEach(item => { if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { @@ -1428,94 +1385,113 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // 闅愯棌鍥炬爣 this.setNameVisible(false, 0); } -} - -/** - * 閫夋嫨鍣 - */ -export class Selection { - constructor(private workingArea: WorkingAreaComponent) {} - public objects: any[] = []; - public isMultiselection = false; + //////////////////////////////////////////////////////////////////// 閫夋嫨閫昏緫 /** - * 杩斿洖閫夋嫨鍣ㄤ腑鏄惁鍖呭惈瀵硅薄 - * @param obj 瀵硅薄 + * 娓呯┖閫夋嫨锛岄夋嫨鍗曚釜褰㈢姸 + * @param shape 褰㈢姸 */ - public contains(obj: any): boolean { - return this.objects.includes(obj); + public selectSingle(shape: AxShape) { + if (this.selection.first() !== null) { + this.selection.all().forEach(item => { + this.clearSelectEffect(item); + }); + this.selection.clear(); + } + this.selection.add(shape); + this.setSelectEffect(shape); + AxMessageSystem.send(CanvasAction.selectionChanged); } /** - * 閫夊畾瀵硅薄 - * @param obj 瀵硅薄 + * 閫夋嫨 + * @param shape 褰㈢姸 */ - public select(obj: any) { - if (!this.contains(obj)) { - this.workingArea.emit('select', obj); - this.objects.push(obj); + public select(shape: AxShape) { + if (this.selection.first() !== null + && !this.isCtrlKeyClicked + && !this.selection.has(shape)) { + this.selection.all().forEach(item => { + this.clearSelectEffect(item); + }); + this.selection.clear(); } + this.selection.add(shape); + this.setSelectEffect(shape); + AxMessageSystem.send(CanvasAction.selectionChanged); } /** - * 鍙栨秷閫夊畾瀵硅薄 - * @param obj 瀵硅薄 + * 閫夋嫨闆嗗悎涓殑褰㈢姸 + * @param shape 褰㈢姸闆嗗悎 */ - public deselect(obj: any) { - if (this.contains(obj)) { - this.workingArea.emit('deselect', obj); - const idx = this.objects.findIndex(x => x === obj); - this.objects.splice(idx, 1); - } + public selectAll(shape: AxShape[]) { + this.selection.addArray(shape); + this.selection.all().forEach(item => { + this.setSelectEffect(item); + }); + AxMessageSystem.send(CanvasAction.selectionChanged); } /** - * 閫夊畾鎴栧彇娑堥夊畾瀵硅薄 - * @param obj 瀵硅薄 + * 鍏堟竻绌哄啀閫夋嫨鍏ㄩ儴 + * @param shape 褰㈢姸闆嗗悎 */ - public selectOrDeselect(obj: any) { - if (this.contains(obj)) { - this.deselect(obj); - } else { - this.select(obj); + public selectAllWithClear(shape: AxShape[]) { + if (this.selection.first() !== null) { + this.selection.all().forEach(item => { + this.clearSelectEffect(item); + }); + this.selection.clear(); } + this.selection.addArray(shape); + this.selection.all().forEach(item => { + this.setSelectEffect(item); + }); + AxMessageSystem.send(CanvasAction.selectionChanged); } /** - * 鍙栨秷閫夊畾鎵鏈夊凡閫夊畾瀵硅薄 + * 閫夋嫨闆嗗悎涓墍鏈塱d鐨勫舰鐘 + * @param ids 褰㈢姸id闆嗗悎 */ - public deselectAll() { - this.objects.forEach(item => { - this.workingArea.emit('deselect', item); + public setHighlight(ids: string[]): void { + const shapes: AxShape[] = []; + // 閲嶆柊閫夋嫨 + ids.forEach(item => { + const obj = this.backgroundImage.getChildByName(item); + shapes.push(obj as AxShape); }); - this.objects.splice(0, this.objects.length); + this.selectAllWithClear(shapes); } /** - * 鍙栨秷閫夊畾鎵鏈夊璞″悗閫夊畾涓涓璞 - * @param obj 瀵硅薄 + * 鍙栨秷鎵鏈夐夋嫨 */ - public selectOne(obj: any) { - if (this.isMultiselection) { - this.selectOrDeselect(obj); - } else { - this.deselectAll(); - this.select(obj); + public deselectAll() { + if (this.selection.first() !== null) { + this.selection.all().forEach(item => { + this.clearSelectEffect(item); + }); + this.selection.clear(); + AxMessageSystem.send(CanvasAction.selectionChanged); } } /** - * 閫夊畾瀵硅薄闆嗗悎涓墍鏈夊璞 - * @param objects 瀵硅薄闆嗗悎 + * 璁剧疆閫変腑鏁堟灉 + * @param shape 褰㈢姸 */ - public selectAll(objects: any[]) { - this.objects.forEach(item => { - this.select(item); - }); + public setSelectEffect(shape: AxShape) { + shape.hideBorder(); + shape.setPointVisiable(false); + shape.showBorder(); + shape.drawBorder(1 / this.backgroundImage.scale.x); + shape.setPointVisiable(this.allowEdit); + } + /** + * 璁剧疆褰㈢姸閫変腑鏁堟灉 + * @param shape 褰㈢姸 + */ + public clearSelectEffect(shape: AxShape) { + shape.hideBorder(); + shape.setPointVisiable(false); } } - - -/** - * 杞﹁締绫诲瀷 - */ -export enum Type { - 姘存簮 = 0, - 涓鹃珮鍠峰皠娑堥槻杞 = 1, - 娉℃搏娑堥槻杞 = 2, - 姘寸綈娑堥槻杞 = 3, - 鍘嬬缉绌烘皵娉℃搏娑堥槻杞 = 4 +enum CanvasAction { + selectionChanged = 'selectionChanged', + copyDataChanged = 'copyDataChanged' }