diff --git a/debug.log b/debug.log index 2f7945a..14caa1c 100644 --- a/debug.log +++ b/debug.log @@ -5,3 +5,4 @@ [1217/102235.409:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3) [1217/162245.895:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3) [1217/165122.912:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3) +[0104/090356.225:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3) diff --git a/proxy.config.json b/proxy.config.json index 234d118..1898eac 100644 --- a/proxy.config.json +++ b/proxy.config.json @@ -1,6 +1,6 @@ { "/api": { - "target": "http://121.37.20.190:8008", + "target": "http://39.106.78.171:8000", "secure": false, "changeOrigin": true } diff --git a/src/app/ui/collection-tools/collection-tools.component.ts b/src/app/ui/collection-tools/collection-tools.component.ts index 0904b44..f8f7534 100644 --- a/src/app/ui/collection-tools/collection-tools.component.ts +++ b/src/app/ui/collection-tools/collection-tools.component.ts @@ -1016,13 +1016,13 @@ export class CollectionToolsComponent implements OnInit { if (img.height > dadHeight && img.width > imgWidth) { let width = imgWidth/img.width let height = dadHeight/img.height - that.canvas.setBackgroundScale((width>height? height : width)-0.005) + // that.canvas.setBackgroundScale((width>height? height : width)-0.005) return } else if (img.height > dadHeight) { - that.canvas.setBackgroundScale((dadHeight/img.height)-0.005) + // that.canvas.setBackgroundScale((dadHeight/img.height)-0.005) return } else if (img.width > imgWidth) { - that.canvas.setBackgroundScale((imgWidth/img.width)-0.005) + // that.canvas.setBackgroundScale((imgWidth/img.width)-0.005) return } }; diff --git a/src/app/working-area/model/arrows.ts b/src/app/working-area/model/arrows.ts deleted file mode 100644 index a553771..0000000 --- a/src/app/working-area/model/arrows.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { WorkingAreaComponent } from '../working-area.component'; -import * as PIXI from 'pixi.js'; - -/** - * 绠ご - * 鍒涘缓涓涓彧鏈2涓偣缁勬垚鐨勭澶 - */ -export class Arrows extends PIXI.Container { - public line: PIXI.Graphics = new PIXI.Graphics(); - public ready = false; - constructor(public assetData: any, private workingArea: WorkingAreaComponent) { - super(); - this.workingArea.backgroundImage.addChild(this); - this.name = this.assetData.Id; - this.addChild(this.line); - this.refresh(); - this.interactive = true; - this.on('mousedown', event => { - if (!this.ready) { return; } - event.stopPropagation(); - this.workingArea.selection.selectOne(this); - }); - } - /** - * 鍒锋柊 - */ - public refresh() { - this.line.clear(); - this.line.lineStyle(5, 0xff0000, 1); - this.line.moveTo(this.assetData.pointA.x, this.assetData.pointA.y); - this.line.lineTo(this.assetData.pointB.x, this.assetData.pointB.y); - - const angle = Math.atan2((this.assetData.pointB.y - this.assetData.pointA.y), (this.assetData.pointB.x - this.assetData.pointA.x)) - * (180 / Math.PI) + 90; - - this.line.beginFill(0xff0000); - console.log(Math.PI / 180 / 1.6); - this.line.drawStar(this.assetData.pointB.x, this.assetData.pointB.y, 3, 10, 0, (Math.PI / 180 * angle)); - this.line.endFill(); - } -} diff --git a/src/app/working-area/model/axArrowConnector.ts b/src/app/working-area/model/axArrowConnector.ts index 8b72b39..68b2828 100644 --- a/src/app/working-area/model/axArrowConnector.ts +++ b/src/app/working-area/model/axArrowConnector.ts @@ -7,8 +7,6 @@ import { Sprite } from 'pixi.js'; * 杩炴帴绠ご */ export class AxArrowConnector extends AxShape { - - pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png') pointSprites: Array = new Array(); line: PIXI.Graphics; text: PIXI.Text; @@ -51,6 +49,7 @@ export class AxArrowConnector extends AxShape { this.drawPoints(); this.sortableChildren = true; this.text.zIndex = this.children.length; + this.text.visible = this.showName; } public drawPoints() { @@ -63,29 +62,30 @@ export class AxArrowConnector extends AxShape { }); this.pointSprites.forEach((value, index, array) => { value.interactive = true; - value.on('mousedown', event => { - event.stopPropagation(); - if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { - event.currentTarget.data = event.data; - event.currentTarget.alpha = 0.5; - event.currentTarget.dragging = true; - } - }) - .on('mouseup', event => { + value + .on('pointerdown', event => { + event.stopPropagation(); + if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { + event.currentTarget.data = event.data; + event.currentTarget.alpha = 0.5; + event.currentTarget.dragging = true; + } + }) + .on('pointerup', event => { if (event.currentTarget.dragging) { event.currentTarget.alpha = 1; event.currentTarget.dragging = false; event.currentTarget.data = null; } }) - .on('mouseupoutside', event => { + .on('pointerupoutside', event => { if (event.currentTarget.dragging) { event.currentTarget.alpha = 1; event.currentTarget.dragging = false; event.currentTarget.data = null; } }) - .on('mousemove', event => { + .on('pointermove', event => { if (event.currentTarget.dragging) { const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); event.currentTarget.x = newPosition.x; @@ -95,22 +95,30 @@ export class AxArrowConnector extends AxShape { this.assetData.MultiPoint[index].y = newPosition.y; this.workingArea.canvasData.isChange = true; this.refresh(); + this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); } }) .on('rightclick', event => { }); }) - this.setPointsVisible(false); + this.setPointVisiable(false); } /** * 璁剧疆鐐规樉绀虹姸鎬 * @param b true/false */ - public setPointsVisible(b:boolean) { + public setPointVisiable(b:boolean) { this.pointSprites.forEach(item => { item.visible = b; }) + } + // 璁剧疆缂╂斁 + public setItemScale(scale: number) { + this.text.scale.set(scale); + this.pointSprites.forEach(point => { + point.scale.set(scale); + }); } /** * 鍒锋柊褰㈢姸 @@ -121,8 +129,8 @@ export class AxArrowConnector extends AxShape { if (pts.length < 2) { return; } - this.text.position = pts[0]; - this.text.anchor.set(0.5, 1); + this.text.position = this.getLineCenter(pts[0], pts[1]); + this.text.anchor.set(0.5); this.text.text = this.assetData.Name + '\r\n' + this.assetData.PropertyInfos?.find(item => item.PropertyName === '鍚嶇О/缂栧彿')?.PropertyValue; diff --git a/src/app/working-area/model/axImageShape.ts b/src/app/working-area/model/axImageShape.ts index 67466be..f496619 100644 --- a/src/app/working-area/model/axImageShape.ts +++ b/src/app/working-area/model/axImageShape.ts @@ -13,6 +13,7 @@ import { AxArrowConnector } from './axArrowConnector'; * AxImageShape */ export class AxImageShape extends AxShape { + connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png'); style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 18, @@ -34,26 +35,19 @@ export class AxImageShape extends AxShape { + '\r\n' + this.assetData.PropertyInfos?.find(item => item.PropertyName === '鍚嶇О/缂栧彿')?.PropertyValue, this.style); - /** - * 閫変腑鍦嗙偣 - */ - image: PIXI.Sprite; selectionBox = new PIXI.Graphics(); - connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png'); - connectPoint: Sprite; - // 鍙Щ鍔ㄧ殑 - // 鍙変腑鐨 + connectPoint: Sprite; - // up: PIXI.Sprite; - // down: PIXI.Sprite; - // left: PIXI.Sprite; - // right: PIXI.Sprite; - // upLeft: PIXI.Sprite; - // upRight: PIXI.Sprite; - // downLeft: PIXI.Sprite; - // downRight: PIXI.Sprite; + up: PIXI.Sprite; + down: PIXI.Sprite; + left: PIXI.Sprite; + right: PIXI.Sprite; + upLeft: PIXI.Sprite; + upRight: PIXI.Sprite; + downLeft: PIXI.Sprite; + downRight: PIXI.Sprite; constructor(assetData: any, workingArea: WorkingAreaComponent) { super(assetData, workingArea); this.x = this.assetData.Point.x; @@ -68,85 +62,43 @@ export class AxImageShape extends AxShape { this.image.height = this.assetData.Height; this.image.alpha = 1; this.image.anchor.set(0.5); - // this.image.interactive = true; - // this.image.buttonMode = true; - // this.image - // .on('mousedown', event => { - // event.stopPropagation(); - // this.workingArea.selection.selectOne(this); - // // this.paintingPipeline(this.x, this.y); - // // 濡傛灉閾炬帴瀵硅薄涓嶄负绌,绂佹绉诲姩 - // if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { - // event.currentTarget.parent.data = event.data; - // event.currentTarget.parent.alpha = 0.5; - // event.currentTarget.parent.dragging = true; - // } - // }) - // .on('mouseup', event => { - // if (event.currentTarget.parent.dragging) { - // event.currentTarget.parent.alpha = 1; - // event.currentTarget.parent.dragging = false; - // event.currentTarget.parent.data = null; - // } - // }) - // .on('mouseupoutside', event => { - // if (event.currentTarget.parent.dragging) { - // event.currentTarget.parent.alpha = 1; - // event.currentTarget.parent.dragging = false; - // event.currentTarget.parent.data = null; - // } - // }) - // .on('mousemove', event => { - // if (event.currentTarget.parent.dragging) { - // // // 濡傛灉鎷栧姩杩囩▼涓彂鐜扮埗瀵硅薄涓嶆槸鑳屾櫙鍥 - // // if (this.parent !== this.workingArea.backgroundImage) { - // // this.setParent(this.workingArea.backgroundImage); - // // if (this.assetData.FixedSize) { - // // const scale = 1 / this.workingArea.backgroundImage.scale.x; - // // this.scale.set(scale); - // // } - // // } - // const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent); - // event.currentTarget.parent.x = newPosition.x; - // event.currentTarget.parent.y = newPosition.y; - // this.assetData.Point = new PIXI.Point(this.x, this.y); - // this.workingArea.canvasData.isChange = true; - // } - // }) - // .on('rightclick', event => { - - // }) - // .on('mouseover', event => { - // event.stopPropagation(); - // if (this.workingArea.previewImage !== null - // && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) { - // this.workingArea.previewImage.visible = false; - // } - // // if (this.assetData.CanConnect) { - // // this.setSelectionBox(true, this.image); - // // } - // }) - // .on('mouseout', event => { - // event.stopPropagation(); - // if (this.workingArea.previewImage !== null - // && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) { - // this.workingArea.previewImage.visible = true; - // } - // // if (this.assetData.CanConnect) { - // // this.setSelectionBox(false); - // // } - // }); this.text.x = this.image.x; this.text.y = this.image.y - this.image.height / 2; this.text.anchor.set(0.5, 1); - - if (this.assetData.GameMode === 2) { - this.text.visible = false; - } + this.text.visible = this.showName; this.addChild(this.text); this.addChild(this.image); this.addChild(this.selectionBox); + //// + // up-left + this.upLeft = new PIXI.Sprite(this.pointTexture); + this.upLeft.anchor.set(0.5); + this.addChild(this.upLeft); + this.upLeft.interactive = true; + this.upLeft.visible = false; + // up-right + this.upRight = new PIXI.Sprite(this.pointTexture); + this.upRight.anchor.set(0.5); + this.addChild(this.upRight); + this.upRight.interactive = true; + this.upRight.visible = false; + // down-left + this.downLeft = new PIXI.Sprite(this.pointTexture); + this.downLeft.anchor.set(0.5); + this.addChild(this.downLeft); + this.downLeft.interactive = true; + this.downLeft.visible = false; + // down-right + this.downRight = new PIXI.Sprite(this.pointTexture); + this.downRight.anchor.set(0.5); + this.addChild(this.downRight); + this.downRight.interactive = true; + this.downRight.visible = false; + //// + + + if (this.assetData.CanConnect) { // connectPoint this.connectPoint = new PIXI.Sprite(this.connectPointTexture); @@ -156,180 +108,19 @@ export class AxImageShape extends AxShape { this.addChild(this.connectPoint); this.connectPoint.interactive = true; this.connectPoint - .on('mousedown', event => { + .on('pointerdown', event => { event.stopPropagation(); this.paintingPipeline(this.x, this.y); }) - .on('mouseover', event => { + .on('pointerover', event => { this.setSelectionBox(true, this.connectPoint); }) - .on('mouseout', event => { + .on('pointerout', event => { this.setSelectionBox(false); - }); - // // up - // this.up = new PIXI.Sprite(this.selectedPointTexture); - // this.up.anchor.set(0.5); - // this.up.x = this.image.x; - // this.up.y = this.image.y - (this.image.height / 2); - // this.addChild(this.up); - // this.up.interactive = true; - // this.up - // .on('mousedown', event => { - // event.stopPropagation(); - // const pt = this.toGlobal(new PIXI.Point(this.up.x, this.up.y)); - // const pt2 = this.workingArea.backgroundImage.toLocal(pt); - // this.paintingPipeline(pt2.x, pt2.y); - // }) - // .on('mouseover', event => { - // this.setSelectionBox(true, this.up); - // }) - // .on('mouseout', event => { - // this.setSelectionBox(false); - // }); - // // down - // this.down = new PIXI.Sprite(this.selectedPointTexture); - // this.down.anchor.set(0.5); - // this.down.x = this.image.x; - // this.down.y = this.image.y + (this.image.height / 2); - // this.addChild(this.down); - // this.down.interactive = true; - // this.down - // .on('mousedown', event => { - // event.stopPropagation(); - // const pt = this.toGlobal(new PIXI.Point(this.down.x, this.down.y)); - // const pt2 = this.workingArea.backgroundImage.toLocal(pt); - // this.paintingPipeline(pt2.x, pt2.y); - // }) - // .on('mouseover', event => { - // this.setSelectionBox(true, this.down); - // }) - // .on('mouseout', event => { - // this.setSelectionBox(false); - // }); - // // left - // this.left = new PIXI.Sprite(this.selectedPointTexture); - // this.left.anchor.set(0.5); - // this.left.x = this.image.x - (this.image.width / 2); - // this.left.y = this.image.y; - // this.addChild(this.left); - // this.left.interactive = true; - // this.left - // .on('mousedown', event => { - // event.stopPropagation(); - // const pt = this.toGlobal(new PIXI.Point(this.left.x, this.left.y)); - // const pt2 = this.workingArea.backgroundImage.toLocal(pt); - // this.paintingPipeline(pt2.x, pt2.y); - // }) - // .on('mouseover', event => { - // this.setSelectionBox(true, this.left); - // }) - // .on('mouseout', event => { - // this.setSelectionBox(false); - // }); - // // right - // this.right = new PIXI.Sprite(this.selectedPointTexture); - // this.right.anchor.set(0.5); - // this.right.x = this.image.x + (this.image.width / 2); - // this.right.y = this.image.y; - // this.addChild(this.right); - // this.right.interactive = true; - // this.right - // .on('mousedown', event => { - // event.stopPropagation(); - // const pt = this.toGlobal(new PIXI.Point(this.right.x, this.right.y)); - // const pt2 = this.workingArea.backgroundImage.toLocal(pt); - // this.paintingPipeline(pt2.x, pt2.y); - // }) - // .on('mouseover', event => { - // this.setSelectionBox(true, this.right); - // }) - // .on('mouseout', event => { - // this.setSelectionBox(false); - // }); - // // up-left - // this.upLeft = new PIXI.Sprite(this.selectedPointTexture); - // this.upLeft.anchor.set(0.5); - // this.upLeft.x = this.image.x - (this.image.width / 2); - // this.upLeft.y = this.image.y - (this.image.height / 2); - // this.addChild(this.upLeft); - // this.upLeft.interactive = true; - // this.upLeft - // .on('mousedown', event => { - // event.stopPropagation(); - // const pt = this.toGlobal(new PIXI.Point(this.upLeft.x, this.upLeft.y)); - // const pt2 = this.workingArea.backgroundImage.toLocal(pt); - // this.paintingPipeline(pt2.x, pt2.y); - // }) - // .on('mouseover', event => { - // this.setSelectionBox(true, this.upLeft); - // }) - // .on('mouseout', event => { - // this.setSelectionBox(false); - // }); - // // up-right - // this.upRight = new PIXI.Sprite(this.selectedPointTexture); - // this.upRight.anchor.set(0.5); - // this.upRight.x = this.image.x + (this.image.width / 2); - // this.upRight.y = this.image.y - (this.image.height / 2); - // this.addChild(this.upRight); - // this.upRight.interactive = true; - // this.upRight - // .on('mousedown', event => { - // event.stopPropagation(); - // const pt = this.toGlobal(new PIXI.Point(this.upRight.x, this.upRight.y)); - // const pt2 = this.workingArea.backgroundImage.toLocal(pt); - // this.paintingPipeline(pt2.x, pt2.y); - // }) - // .on('mouseover', event => { - // this.setSelectionBox(true, this.upRight); - // }) - // .on('mouseout', event => { - // this.setSelectionBox(false); - // }); - - // // down-left - // this.downLeft = new PIXI.Sprite(this.selectedPointTexture); - // this.downLeft.anchor.set(0.5); - // this.downLeft.x = this.image.x - (this.image.width / 2); - // this.downLeft.y = this.image.y + (this.image.height / 2); - // this.addChild(this.downLeft); - // this.downLeft.interactive = true; - // this.downLeft - // .on('mousedown', event => { - // event.stopPropagation(); - // const pt = this.toGlobal(new PIXI.Point(this.downLeft.x, this.downLeft.y)); - // const pt2 = this.workingArea.backgroundImage.toLocal(pt); - // this.paintingPipeline(pt2.x, pt2.y); - // }) - // .on('mouseover', event => { - // this.setSelectionBox(true, this.downLeft); - // }) - // .on('mouseout', event => { - // this.setSelectionBox(false); - // }); - // // down-right - // this.downRight = new PIXI.Sprite(this.selectedPointTexture); - // this.downRight.anchor.set(0.5); - // this.downRight.x = this.image.x + (this.image.width / 2); - // this.downRight.y = this.image.y + (this.image.height / 2); - // this.addChild(this.downRight); - // this.downRight.interactive = true; - // this.downRight - // .on('mousedown', event => { - // event.stopPropagation(); - // const pt = this.toGlobal(new PIXI.Point(this.downRight.x, this.downRight.y)); - // const pt2 = this.workingArea.backgroundImage.toLocal(pt); - // this.paintingPipeline(pt2.x, pt2.y); - // }) - // .on('mouseover', event => { - // this.setSelectionBox(true, this.downRight); - // }) - // .on('mouseout', event => { - // this.setSelectionBox(false); - // }); - + }); this.showConnectionPoint(false); } + this.setItemScale(1 / this.workingArea.backgroundImage.scale.x); } // 璁剧疆閫夋嫨妗 public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) { @@ -337,14 +128,6 @@ export class AxImageShape extends AxShape { this.selectionBox.lineStyle(2, 0x00EB00, 1); this.selectionBox.position = sprite.position; this.selectionBox.drawRect(- sprite.width / 2, - sprite.height / 2, sprite.width, sprite.height); - // const p0 = new PIXI.Point(- sprite.width / 2, - sprite.height / 2); - // const pe = new PIXI.Point(sprite.width / 2, sprite.height / 2); - // const pw = new PIXI.Point(p0.x + sprite.width, p0.y); - // const ph = new PIXI.Point(p0.x, p0.y + sprite.height); - // this.drawDashedLine(this.selectionBox, p0, pw, 0x1234ff); - // this.drawDashedLine(this.selectionBox, p0, ph, 0x1234ff); - // this.drawDashedLine(this.selectionBox, pe, pw, 0x1234ff); - // this.drawDashedLine(this.selectionBox, pe, ph, 0x1234ff); } else { this.selectionBox.clear(); } @@ -358,14 +141,56 @@ export class AxImageShape extends AxShape { // 鏄剧ず杩炴帴鐐 public showConnectionPoint(b: boolean) { this.connectPoint.visible = b; - // this.up.visible = b; - // this.down.visible = b; - // this.left.visible = b; - // this.right.visible = b; - // this.upLeft.visible = b; - // this.downLeft.visible = b; - // this.upRight.visible = b; - // this.downRight.visible = b; + } + /** + * 璁剧疆鐐规樉绀虹姸鎬 + * @param value 鏄剧ず鐘舵 + */ + public setPointVisiable(value: boolean) { + let rect = this.getLocalBounds(); + this.upLeft.x = rect.left; + this.upLeft.y = rect.top; + this.upRight.x = rect.right; + this.upRight.y = rect.top; + this.downLeft.x = rect.left; + this.downLeft.y = rect.bottom; + this.downRight.x = rect.right; + this.downRight.y = rect.bottom; + this.upLeft.visible = value; + this.upRight.visible = value; + this.downLeft.visible = value; + this.downRight.visible = value; + } + /** + * + * @param scale 缁樺埗杈规 + */ + public drawBorder(scale: number) { + let visible = this.upLeft.visible; + this.setPointVisiable(false); + + super.drawBorder(scale); + let rect = this.getLocalBounds(); + this.upLeft.x = rect.left; + this.upLeft.y = rect.top; + this.upRight.x = rect.right; + this.upRight.y = rect.top; + this.downLeft.x = rect.left; + this.downLeft.y = rect.bottom; + this.downRight.x = rect.right; + this.downRight.y = rect.bottom; + this.setPointVisiable(visible); + } + public setItemScale(scale: number) { + if (this.assetData.FixedSize) { + this.scale.set(scale); + } else { + this.text.scale.set(scale); + this.upLeft.scale.set(scale); + this.upRight.scale.set(scale); + this.downLeft.scale.set(scale); + this.downRight.scale.set(scale); + } } paintingPipeline(x: number, y: number) { if (this.assetData.CanConnect) { @@ -407,6 +232,7 @@ export class AxImageShape extends AxShape { IsFromBuilding : this.workingArea.canvasData.selectTemplateData.isFromBuilding, GameMode: this.workingArea.canvasData.gameMode, LinkedObjects: new Array(this.assetData.Id), + Tag: this.workingArea.canvasData.selectTemplateData.tag }; this.workingArea.paintingShape = new AxArrowConnector(tempData, this.workingArea,false,true); this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id); diff --git a/src/app/working-area/model/axLegend.ts b/src/app/working-area/model/axLegend.ts new file mode 100644 index 0000000..af86e70 --- /dev/null +++ b/src/app/working-area/model/axLegend.ts @@ -0,0 +1,116 @@ +import { Constructor } from '@angular/material/core/common-behaviors/constructor'; +import { Sprite, Texture,Text, Graphics, Point } from 'pixi.js'; +import { WorkingAreaComponent } from '../working-area.component'; +import { AxShape } from './axShape'; + +/** + * 瀹変俊鍥句緥褰㈢姸 + */ +export class AxLegend extends AxShape { + // 鏁版嵁 + public shapeMap: Map = new Map(); + pen: Graphics = new Graphics(); + /** + * + */ + constructor(assetData: any, workingArea: WorkingAreaComponent,shapeMap:Map) { + super(assetData, workingArea); + this.name = this.assetData.Id; + this.shapeMap = shapeMap; + this.refresh(); + } + // 娣诲姞鏁版嵁 + public addItem(item:Legend) { + if (this.shapeMap.has(item.Name)) { + this.shapeMap.get(item.Name).Count++; + } else { + this.shapeMap.set(item.Name, item); + } + this.refresh(); + } + // 鍒犻櫎鏁版嵁 + public deleteItem(item: Legend) { + if (this.shapeMap.has(item.Name)) { + this.shapeMap.get(item.Name).Count--; + if (this.shapeMap.get(item.Name).Count === 0) { + this.shapeMap.delete(item.Name); + } + } + this.refresh(); + } + // 鍒锋柊 + refresh() { + this.removeChildren(); + let index = 1; + let offset = 50; + let number = 2; + let width = 450; + let height = 100; + for (let i = 0; i < number; i++){ + if (i >= this.shapeMap.size) break; + let x = width * i; + var textImage = new Text('鍥句緥',{ + fontSize: 36, + fill: ['#0000ff'], + }); + textImage.anchor.set(0.5) + textImage.x = x; + textImage.y = 0; + this.addChild(textImage); + + var textName = new Text("鍚嶇О"+' 銆愭暟閲忋',{ + fontSize: 36, + fill: ['#0000ff'], + }); + textName.anchor.set(0,0.5); + textName.x = x + 32 + offset; + textName.y = 0; + this.addChild(textName); + } + for (let item of this.shapeMap.values()) { + let x = index % number === 0 ? (number -1) * width : (index % number - 1) * width; + let y = Math.ceil(index / number) * height; + let image: Sprite = Sprite.from(item.ImageUrl); + image.width = 64; + image.height = 64; + image.anchor.set(0.5); + image.x = x; + image.y = y; + this.addChild(image); + + var textName = new Text(item.Name+' 銆'+item.Count.toString()+'銆'); + textName.anchor.set(0,0.5); + textName.x = x + image.width/2 + offset; + textName.y = y; + this.addChild(textName); + index++; + } + if (this.shapeMap.size > 0) { + let rect = this.getLocalBounds(); + this.pen.clear(); + this.pen.beginFill(0xffffff,0.01); + this.pen.lineStyle(5, 0x000000); + this.pen.moveTo(rect.left-offset, rect.top-offset); + this.pen.lineTo(rect.right+offset, rect.top-offset); + this.pen.lineTo(rect.right+offset, rect.bottom+offset); + this.pen.lineTo(rect.left - offset, rect.bottom + offset); + this.pen.closePath(); + this.pen.endFill(); + } + this.addChild(this.pen); + } +} + +export class Legend{ + public Name: string; + public ImageUrl: string; + public Count: number; + /** + * + */ + constructor(name:string,imageUrl:string,count:number) { + this.Name = name; + this.ImageUrl = imageUrl; + this.Count = count; + } +} diff --git a/src/app/working-area/model/axPreviewImageShape.ts b/src/app/working-area/model/axPreviewImageShape.ts index 623b2d7..8d0cd5d 100644 --- a/src/app/working-area/model/axPreviewImageShape.ts +++ b/src/app/working-area/model/axPreviewImageShape.ts @@ -24,4 +24,13 @@ export class AxPreviewImageShape extends AxShape { setImageUrl(url: string) { this.image.texture = Texture.from(url); } + public setItemScale(scale: number) { + this.scale.set(scale); + } + /** + * + * @param rect 鐢昏竟妗 + */ + public drawBorder(scale: number) { + } } diff --git a/src/app/working-area/model/axShape.ts b/src/app/working-area/model/axShape.ts index 9ff01a6..7e784b3 100644 --- a/src/app/working-area/model/axShape.ts +++ b/src/app/working-area/model/axShape.ts @@ -8,21 +8,31 @@ import { WorkingAreaComponent } from '../working-area.component'; */ export class AxShape extends Container { assetData: any; + pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png') workingArea: WorkingAreaComponent; // 鍙互琚Щ鍔ㄧ殑 moveable = true; // 鍙互琚変腑鐨 selectable = true; - + // 鍏佽缂栬緫 + allowEdit = true; + // 鏄惁鏄剧ず鍚嶇О + showName = true; + // 杈规 + border: PIXI.Graphics = new PIXI.Graphics(); + constructor(assetData: any, workingArea: WorkingAreaComponent) { super(); + this.border.visible = false; + this.addChild(this.border); this.assetData = assetData; this.workingArea = workingArea; this.workingArea.backgroundImage.addChild(this); + this.zIndex = 200; this.interactive = true; this.buttonMode = true; - this.on('mousedown', event => { - console.log(this.assetData); + this + .on('pointerdown', event => { event.stopPropagation(); if (this.selectable) { this.workingArea.selection.selectOne(this); @@ -37,23 +47,34 @@ export class AxShape extends Container { event.currentTarget.dragPoint.y -= event.currentTarget.y; } }) - .on('mouseup', event => { + .on('pointerup', event => { if (event.currentTarget.dragging) { event.currentTarget.alpha = 1; event.currentTarget.dragging = false; event.currentTarget.data = null; } }) - .on('mouseupoutside', event => { + .on('pointerupoutside', event => { if (event.currentTarget.dragging) { event.currentTarget.alpha = 1; event.currentTarget.dragging = false; event.currentTarget.data = null; } }) - .on('mousemove', event => { + .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); @@ -61,12 +82,12 @@ export class AxShape extends Container { } }) .on('rightclick', event => { - + this.border.visible = false; }) - .on('mouseover', event => { + .on('pointerover', event => { event.stopPropagation(); }) - .on('mouseout', event => { + .on('pointerout', event => { event.stopPropagation(); }); } @@ -77,4 +98,124 @@ export class AxShape extends Container { refresh(): void{ } + public setItemScale(scale: number) { + + } + /** + * 鏄剧ず杈规 + */ + public showBorder() { + if (this.assetData.FixedSize) { + this.drawBorder(1); + } + else { + this.drawBorder(1/this.workingArea.backgroundImage.scale.x); + } + this.border.visible = true; + } + /** + * 闅愯棌杈规 + */ + public hideBorder() { + this.border.clear(); + this.border.visible = false; + } + /** + * 璁剧疆鐐规樉绀虹姸鎬 + * @param value 鏄剧ず鐘舵 + */ + public setPointVisiable(value: boolean) { + + } + /** + * + * @param rect 鐢昏竟妗 + */ + public drawBorder(scale: number) { + scale = this.assetData.FixedSize ? 1 : scale; + this.border.clear(); + const rect = this.getLocalBounds(); + const p1 = new PIXI.Point(rect.left, rect.top); + const p2 = new PIXI.Point(rect.right, rect.top); + const p3 = new PIXI.Point(rect.right, rect.bottom); + const p4 = new PIXI.Point(rect.left, rect.bottom); + + 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); + + this.border.lineStyle(0, 0x0000ff); + this.border.beginFill(0x00ff00,0.1); + this.border.moveTo(p1.x, p1.y); + this.border.lineTo(p2.x, p2.y); + this.border.lineTo(p3.x, p4.y); + this.border.lineTo(p4.x, p4.y); + this.border.closePath(); + this.border.endFill(); + } + // 鐢昏櫄绾 + drawDash(target, x1, y1, x2, y2,dashLength = 5, spaceLength = 1) { + let x = x2 - x1; + let 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; + + target.moveTo(x1, y1); + + while (hyp > 0) { + x1 += dashX; + y1 += dashY; + hyp -= dashLength; + if (hyp < 0) { + x1 = x2; + y1 = y2; + } + target.lineTo(x1, y1); + x1 += spaceX; + y1 += spaceY; + target.moveTo(x1, y1); + hyp -= spaceLength; + } + target.moveTo(x2, y2); + } + // 璁＄畻澶氳竟褰㈤噸蹇 + public calculatePolygonGravityCenter(points: PIXI.Point[]) { + let area = 0.0; // 澶氳竟褰㈤潰绉 + let gravityLat = 0.0; // 閲嶅績鐐 latitude + let gravityLng = 0.0; // 閲嶅績鐐 longitude + points.forEach((item, index) => { + // 1 + const lat = item.x; + const lng = item.y; + const nextLat = points[(index + 1) % points.length].x; + const nextLng = points[(index + 1) % points.length].y; + // 2 + const tempArea = (nextLat * lng - nextLng * lat) / 2.0; + // 3 + area += tempArea; + // 4 + gravityLat += tempArea * (lat + nextLat) / 3; + gravityLng += tempArea * (lng + nextLng) / 3; + }); + // 5 + gravityLat = gravityLat / area; + gravityLng = gravityLng / area; + + 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) + } } diff --git a/src/app/working-area/model/gameMode.ts b/src/app/working-area/model/gameMode.ts index feabdbb..d656a7f 100644 --- a/src/app/working-area/model/gameMode.ts +++ b/src/app/working-area/model/gameMode.ts @@ -3,5 +3,6 @@ */ export enum GameMode { BasicInformation, - Assignment + Assignment, + Examinee } \ No newline at end of file diff --git a/src/app/working-area/model/legend.ts b/src/app/working-area/model/legend.ts deleted file mode 100644 index e7592db..0000000 --- a/src/app/working-area/model/legend.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { Graphics, Sprite, Text } from "pixi.js"; -import { WorkingAreaComponent } from "../working-area.component"; -import { AxArrowConnector } from "./axArrowConnector"; -import { AxImageShape } from "./axImageShape"; -import { AxShape } from "./axShape"; -import { MultipointIcon } from "./multipointIcon"; -import { PolygonIcon } from "./polygonIcon"; - - -export class Legend extends AxShape{ - background: Graphics = null; - data:Map = new Map() - /** - * - */ - constructor(workingArea: WorkingAreaComponent) { - super(null, workingArea); - this.draw(); - } - - getData() { - this.workingArea.backgroundImage.children.forEach(item => { - if (item instanceof AxImageShape|| item instanceof AxArrowConnector || item instanceof PolygonIcon || item instanceof MultipointIcon) { - if (!this.data.has(item.assetData.Name)) { - this.data[item.assetData.Name] = item.assetData.ImageUrl; - } - } - }) - } - - draw() { - this.getData(); - this.background = new Graphics(); - this.background.lineStyle(1, 0xff0000); - this.background.beginFill(0xffffff); - this.background.drawRect(0, 0, 200, 300); - this.background.endFill(); - this.background.x = -(this.parent.width/2/ this.parent.scale.x); - this.background.y = -(this.parent.height/2/ this.parent.scale.x); - this.addChild(this.background); - var showName: Text = new Text('鍥句緥'); - showName.x = 0; - showName.y = 0; - this.background.addChild(showName); - var showDescrption: Text = new Text('璇存槑') - showDescrption.x = 100; - showDescrption.y = 0; - this.background.addChild(showDescrption); - let index = 1; - this.data.forEach((value, key) => { - var image: Sprite = Sprite.from(value); - image.width = 32; - image.height = 32; - image.x = 0; - image.y = index * 32; - this.background.addChild(image); - var description = new Text(key); - description.x = 100; - description.y = index * 32; - this.background.addChild(description); - index++; - }) - } - redraw() { - this.background.destroy(); - this.draw(); - } -} \ No newline at end of file diff --git a/src/app/working-area/model/multipointIcon.ts b/src/app/working-area/model/multipointIcon.ts index e60b148..2416956 100644 --- a/src/app/working-area/model/multipointIcon.ts +++ b/src/app/working-area/model/multipointIcon.ts @@ -8,7 +8,7 @@ import { AxShape } from './axShape'; */ export class MultipointIcon extends AxShape { public pointsData: PIXI.Point[]; - public pointsGraphics: PIXI.Graphics[] = []; + public pointsGraphics: PIXI.Sprite[] = []; public iconsTilingSprite: PIXI.TilingSprite[] = []; style = new PIXI.TextStyle({ fontFamily: 'Arial', @@ -42,6 +42,11 @@ export class MultipointIcon extends AxShape { this.x = this.assetData.Point.x; this.y = this.assetData.Point.y; this.workingArea.backgroundImage.addChild(this); + + this.text.anchor.set(0.5,0.5); + // this.text.position = this.getLineCenter(this.pointsData[0], this.pointsData[1]); + this.text.visible = this.showName; + this.addChild(this.text); // 鐢荤嚎鍥炬爣 for (let i = 0, count = this.pointsData.length - 1; i < count; i++) { const pointA = this.pointsData[i]; @@ -60,22 +65,16 @@ export class MultipointIcon extends AxShape { // icon.height = this.assetData.Thickness === 0 ? 32 : this.assetData.Thickness; this.iconsTilingSprite.push(icon); this.addChild(icon); - if (i === 0) { - this.text.anchor.set(0.5); - this.text.position = icon.position; - this.text.y -= this.assetData.Height; - this.addChild(this.text); - } + this.text.position = this.getLineCenter(this.pointsData[0], this.pointsData[1]); } + this.sortableChildren = true; + this.text.zIndex = this.pointsData.length; // 鐢荤偣 this.pointsData.forEach((item, index, array) => { - const iconPoint = new PIXI.Graphics(); - iconPoint.lineStyle(1, 0xFFBD01, 1); - iconPoint.beginFill(0xFFFFFF, 1); - iconPoint.drawCircle(0, 0, 15); + const iconPoint = PIXI.Sprite.from(this.pointTexture); + iconPoint.anchor.set(0.5); iconPoint.x = item.x; iconPoint.y = item.y; - iconPoint.endFill(); iconPoint.visible = false; this.pointsGraphics.push(iconPoint); this.addChild(iconPoint); @@ -83,7 +82,7 @@ export class MultipointIcon extends AxShape { // 娣诲姞鍦嗙偣浜嬩欢 this.pointsGraphics.forEach((item, index, array) => { item.interactive = true; - item.on('mousedown', event => { + item.on('pointerdown', event => { event.stopPropagation(); if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { event.currentTarget.data = event.data; @@ -91,21 +90,21 @@ export class MultipointIcon extends AxShape { event.currentTarget.dragging = true; } }) - .on('mouseup', event => { + .on('pointerup', event => { if (event.currentTarget.dragging) { event.currentTarget.alpha = 1; event.currentTarget.dragging = false; event.currentTarget.data = null; } }) - .on('mouseupoutside', event => { + .on('pointerupoutside', event => { if (event.currentTarget.dragging) { event.currentTarget.alpha = 1; event.currentTarget.dragging = false; event.currentTarget.data = null; } }) - .on('mousemove', event => { + .on('pointermove', event => { if (event.currentTarget.dragging) { const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); event.currentTarget.x = newPosition.x; @@ -128,9 +127,6 @@ export class MultipointIcon extends AxShape { const distance = Math.sqrt(a * a + b * b); this.iconsTilingSprite[index].angle = angle; this.iconsTilingSprite[index].width = distance; - - this.text.position = this.iconsTilingSprite[index].position; - this.text.y -= this.assetData.Height; } else if (index < array.length - 1) {// 涓嶆槸绗竴涓偣锛屼篃涓嶆槸鏈鍚庝竴涓偣 this.iconsTilingSprite[index].x = newPosition.x; this.iconsTilingSprite[index].y = newPosition.y; @@ -163,61 +159,13 @@ export class MultipointIcon extends AxShape { this.iconsTilingSprite[index - 1].angle = angleC; this.iconsTilingSprite[index - 1].width = distanceC; } + this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); + this.text.position = this.getLineCenter(this.pointsData[0], this.pointsData[1]); } }) .on('rightclick', event => { }); }); - // // 缂╂斁 - // this.workingArea.on('backgroundScale', data => { - // const scale = 1 / data; - // this.text.scale.set(scale); - // }); - // 娣诲姞閫変腑浜嬩欢 - // this.iconsTilingSprite.forEach((item, index, array) => { - // item.interactive = true; - // item.buttonMode = true; - // item.on('mousedown', event => { - // event.stopPropagation(); - // this.workingArea.selection.selectOne(this); - // if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { - // event.currentTarget.parent.data = event.data; - // event.currentTarget.parent.alpha = 0.5; - // event.currentTarget.parent.dragging = true; - - // event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent); - // event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x; - // event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y; - // } - // }) - // .on('mouseup', event => { - // if (event.currentTarget.parent.dragging) { - // event.currentTarget.parent.alpha = 1; - // event.currentTarget.parent.dragging = false; - // event.currentTarget.parent.data = null; - // } - // }) - // .on('mouseupoutside', event => { - // if (event.currentTarget.parent.dragging) { - // event.currentTarget.parent.alpha = 1; - // event.currentTarget.parent.dragging = false; - // event.currentTarget.parent.data = null; - // } - // }) - // .on('mousemove', event => { - // if (event.currentTarget.parent.dragging) { - // const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent); - // event.currentTarget.parent.x = newPosition.x - event.currentTarget.parent.dragPoint.x; - // event.currentTarget.parent.y = newPosition.y - event.currentTarget.parent.dragPoint.y; - - // this.assetData.Point = new PIXI.Point(this.x, this.y); - // this.workingArea.canvasData.isChange = true; - // } - // }) - // .on('rightclick', event => { - - // }); - // }); } /** * 璁剧疆鐐规樉绀虹姸鎬 @@ -234,6 +182,13 @@ export class MultipointIcon extends AxShape { this.text.visible = value; } } + // 璁剧疆缂╂斁 + public setItemScale(scale: number) { + this.text.scale.set(scale); + this.pointsGraphics.forEach((item, index, array) => { + item.scale.set(scale); + }); + } // 鍒锋柊鏁版嵁 public refresh() { // console.log(this.assetData); diff --git a/src/app/working-area/model/polygonIcon.ts b/src/app/working-area/model/polygonIcon.ts index 20a4a5d..1bf4f42 100644 --- a/src/app/working-area/model/polygonIcon.ts +++ b/src/app/working-area/model/polygonIcon.ts @@ -9,9 +9,9 @@ import { AxShape } from './axShape'; */ export class PolygonIcon extends AxShape { public pointsData: PIXI.Point[]; - public pointsGraphics: PIXI.Graphics[] = []; + public pointsGraphics: PIXI.Sprite[] = []; public polygonGraphics: PIXI.Graphics = new PIXI.Graphics(); - public polygonLineGraphics: PIXI.Graphics = new PIXI.Graphics(); + // public polygonLineGraphics: PIXI.Graphics = new PIXI.Graphics(); style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 18, @@ -46,13 +46,14 @@ export class PolygonIcon extends AxShape { this.sortableChildren = true; // 鐢荤偣 this.pointsData.forEach((item, index, array) => { - const iconPoint = new PIXI.Graphics(); - iconPoint.lineStyle(1, 0xFFBD01, 1); - iconPoint.beginFill(0xFFFFFF, 1); - iconPoint.drawCircle(0, 0, 15); + const iconPoint = PIXI.Sprite.from(this.pointTexture); + // iconPoint.lineStyle(1, 0xFFBD01, 1); + // iconPoint.beginFill(0xFFFFFF, 1); + // iconPoint.drawCircle(0, 0, 15); + iconPoint.anchor.set(0.5); iconPoint.x = item.x; iconPoint.y = item.y; - iconPoint.endFill(); + // iconPoint.endFill(); iconPoint.visible = false; this.pointsGraphics.push(iconPoint); this.addChild(iconPoint); @@ -66,13 +67,14 @@ export class PolygonIcon extends AxShape { this.polygonGraphics.endFill(); this.addChild(this.polygonGraphics); // 鐢诲杈瑰舰 - this.polygonLineGraphics.lineStyle(5, 0xFFBD01, 1); - this.polygonLineGraphics.drawPolygon(this.getPoints()); - this.polygonLineGraphics.closePath(); - this.addChild(this.polygonLineGraphics); + // this.polygonLineGraphics.lineStyle(5, 0xFFBD01, 1); + // this.polygonLineGraphics.drawPolygon(this.getPoints()); + // this.polygonLineGraphics.closePath(); + // this.addChild(this.polygonLineGraphics); this.text.anchor.set(0.5); this.text.position = this.calculatePolygonGravityCenter(this.pointsData); + this.text.visible = this.showName; // console.log(this.calculatePolygonGravityCenter(this.pointsData)); this.polygonGraphics.addChild(this.text); // 娣诲姞鍦嗙偣浜嬩欢 @@ -80,7 +82,7 @@ export class PolygonIcon extends AxShape { item.interactive = true; item.buttonMode = true; item.zIndex = 1; - item.on('mousedown', event => { + item.on('pointerdown', event => { event.stopPropagation(); if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { event.currentTarget.data = event.data; @@ -88,21 +90,21 @@ export class PolygonIcon extends AxShape { event.currentTarget.dragging = true; } }) - .on('mouseup', event => { + .on('pointerup', event => { if (event.currentTarget.dragging) { event.currentTarget.alpha = 1; event.currentTarget.dragging = false; event.currentTarget.data = null; } }) - .on('mouseupoutside', event => { + .on('pointerupoutside', event => { if (event.currentTarget.dragging) { event.currentTarget.alpha = 1; event.currentTarget.dragging = false; event.currentTarget.data = null; } }) - .on('mousemove', event => { + .on('pointermove', event => { if (event.currentTarget.dragging) { const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); event.currentTarget.x = newPosition.x; @@ -116,13 +118,14 @@ export class PolygonIcon extends AxShape { this.polygonGraphics.beginFill(color, angle); this.polygonGraphics.drawPolygon(this.getPoints()); this.polygonGraphics.endFill(); - // 鐢诲杈瑰舰 - this.polygonLineGraphics.clear(); - this.polygonLineGraphics.lineStyle(5, 0xFFBD01, 1); - this.polygonLineGraphics.drawPolygon(this.getPoints()); - this.polygonLineGraphics.closePath(); + // // 鐢诲杈瑰舰 + // this.polygonLineGraphics.clear(); + // this.polygonLineGraphics.lineStyle(5, 0xFFBD01, 1); + // this.polygonLineGraphics.drawPolygon(this.getPoints()); + // this.polygonLineGraphics.closePath(); this.text.position = this.calculatePolygonGravityCenter(this.pointsData); + this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); } }) .on('rightclick', event => { @@ -133,7 +136,7 @@ export class PolygonIcon extends AxShape { this.workingArea.previewImage.visible = false; } }) - .on('mouseout', event => { + .on('pointerout', event => { event.stopPropagation(); if (this.workingArea.previewImage !== null && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) { @@ -141,64 +144,6 @@ export class PolygonIcon extends AxShape { } }); }); - // // 娣诲姞閫変腑浜嬩欢 - // this.polygonGraphics.interactive = true; - // this.polygonGraphics.buttonMode = true; - // this.polygonGraphics - // .on('mousedown', event => { - // event.stopPropagation(); - // this.workingArea.selection.selectOne(this); - // if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { - // event.currentTarget.parent.data = event.data; - // event.currentTarget.parent.alpha = 0.5; - // event.currentTarget.parent.dragging = true; - - // event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent); - // event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x; - // event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y; - // } - // }) - // .on('mouseup', event => { - // if (event.currentTarget.parent.dragging) { - // event.currentTarget.parent.alpha = 1; - // event.currentTarget.parent.dragging = false; - // event.currentTarget.parent.data = null; - // } - // }) - // .on('mouseupoutside', event => { - // if (event.currentTarget.parent.dragging) { - // event.currentTarget.parent.alpha = 1; - // event.currentTarget.parent.dragging = false; - // event.currentTarget.parent.data = null; - // } - // }) - // .on('mousemove', event => { - // if (event.currentTarget.parent.dragging) { - // const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent); - // event.currentTarget.parent.x = newPosition.x - event.currentTarget.parent.dragPoint.x; - // event.currentTarget.parent.y = newPosition.y - event.currentTarget.parent.dragPoint.y; - - // this.assetData.Point = new PIXI.Point(this.x, this.y); - // this.workingArea.canvasData.isChange = true; - // } - // }) - // .on('rightclick', event => { - // // this.workingArea.selection.deselectAll(); - // }) - // .on('mouseover', event => { - // event.stopPropagation(); - // if (this.workingArea.previewImage !== null - // && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) { - // this.workingArea.previewImage.visible = false; - // } - // }) - // .on('mouseout', event => { - // event.stopPropagation(); - // if (this.workingArea.previewImage !== null - // && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) { - // this.workingArea.previewImage.visible = true; - // } - // }); } /** * 璁剧疆鐐规樉绀虹姸鎬 @@ -209,31 +154,14 @@ export class PolygonIcon extends AxShape { item.visible = value; }); } - - public calculatePolygonGravityCenter(points: PIXI.Point[]) { - let area = 0.0; // 澶氳竟褰㈤潰绉 - let gravityLat = 0.0; // 閲嶅績鐐 latitude - let gravityLng = 0.0; // 閲嶅績鐐 longitude - points.forEach((item, index) => { - // 1 - const lat = item.x; - const lng = item.y; - const nextLat = points[(index + 1) % points.length].x; - const nextLng = points[(index + 1) % points.length].y; - // 2 - const tempArea = (nextLat * lng - nextLng * lat) / 2.0; - // 3 - area += tempArea; - // 4 - gravityLat += tempArea * (lat + nextLat) / 3; - gravityLng += tempArea * (lng + nextLng) / 3; + // 璁剧疆缂╂斁 + public setItemScale(scale: number) { + this.text.scale.set(scale); + this.pointsGraphics.forEach(point => { + point.scale.set(scale); }); - // 5 - gravityLat = gravityLat / area; - gravityLng = gravityLng / area; - - return new PIXI.Point(gravityLat, gravityLng); } + /** * 鑾峰彇鐐归泦鍚 */ diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 0718adf..907ce3e 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input } from ' import * as PIXI from 'pixi.js'; import { EventEmitter } from 'events'; import { EventManager } from '@angular/platform-browser'; -import { OutlineFilter } from 'pixi-filters'; +// import { OutlineFilter } from 'pixi-filters'; import { AssetData, CanvasShareDataService, DisposalNodeData, FloorNodeData } from '../canvas-share-data.service'; import * as ObjectID from 'bson-objectid'; import { Charm } from './charm'; @@ -15,7 +15,8 @@ import { AxShape } from './model/axShape'; import { PropertyInfo } from './model/PropertyInfo'; import { AxPreviewImageShape } from './model/axPreviewImageShape'; import { AxArrowConnector } from './model/axArrowConnector'; -import { Legend } from './model/legend'; +import { AxLegend, Legend } from './model/axLegend'; +import { NullTemplateVisitor } from '@angular/compiler'; @Component({ @@ -97,7 +98,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 缁胯壊鎻忚竟 */ - public outlineFilterGreen = new OutlineFilter(2, 0x00ff00); + // public outlineFilterGreen = new OutlineFilter(2, 0x00ff00); /** * 鎷疯礉绱犳潗鏁版嵁 */ @@ -135,10 +136,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV public carData: Map = new Map(); // 褰撳墠閫夋嫨鐨勮溅杈唅d public selectCar: any = null; + // 鏈蒋浠剁増鏈彿鐢卞洓閮ㄥ垎缁勬垚锛<涓荤増鏈彿><娆＄増鏈彿><淇鐗堟湰鍙><鏃ユ湡鍔犲笇鑵婂瓧姣嶇増鏈彿> 渚嬪锛1.0.0.20210105_beta + // Alpha鐗: 姝ょ増鏈〃绀鸿杞欢鍦ㄦ闃舵涓昏鏄互瀹炵幇杞欢鍔熻兘涓轰富锛岄氬父鍙湪杞欢寮鍙戣呭唴閮ㄤ氦娴侊紝涓鑸岃█锛岃鐗堟湰杞欢鐨凚ug杈冨锛岄渶瑕佺户缁慨鏀广 + // Beta鐗: 璇ョ増鏈浉瀵逛簬伪鐗堝凡鏈変簡寰堝ぇ鐨勬敼杩涳紝娑堥櫎浜嗕弗閲嶇殑閿欒锛屼絾杩樻槸瀛樺湪鐫涓浜涚己闄凤紝闇瑕佺粡杩囧娆℃祴璇曟潵杩涗竴姝ユ秷闄わ紝姝ょ増鏈富瑕佺殑淇敼瀵瑰儚鏄蒋浠剁殑UI銆 + // RC鐗: 璇ョ増鏈凡缁忕浉褰撴垚鐔熶簡锛屽熀鏈笂涓嶅瓨鍦ㄥ鑷撮敊璇殑BUG锛屼笌鍗冲皢鍙戣鐨勬寮忕増鐩稿樊鏃犲嚑銆 + // Release鐗: 璇ョ増鏈剰鍛斥滄渶缁堢増鏈濓紝鍦ㄥ墠闈㈢増鏈殑涓绯诲垪娴嬭瘯鐗堜箣鍚庯紝缁堝綊浼氭湁涓涓寮忕増鏈紝鏄渶缁堜氦浠樼敤鎴蜂娇鐢ㄧ殑涓涓増鏈傝鐗堟湰鏈夋椂涔熺О涓烘爣鍑嗙増銆備竴鑸儏鍐典笅锛孯elease涓嶄細浠ュ崟璇嶅舰寮忓嚭鐜板湪杞欢灏侀潰涓婏紝鍙栬屼唬涔嬬殑鏄鍙仿 + public VERSION = '1.0.0.20210107_beta'; /** * 鏁版嵁鍒濆鍖 */ ngOnInit(): void { + PIXI.utils.skipHello() + this.sayHello(); this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => { if (event.keyCode === 17) { this.selection.isMultiselection = true; @@ -152,40 +161,51 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } // 鎸塂el閿垹闄ら変腑鐨勫浘鏍 if (event.keyCode === 46) { - this.selection.objects.forEach(item => { - if (this.allowEdit - && this.canvasData.gameMode === item.assetData.GameMode) { - switch (this.canvasData.gameMode) { - case 0: - // 鍒犻櫎妤煎眰鏁版嵁 - delete this.canvasData.originaleveryStoreyData.data[item.assetData.Id]; - // 鍒犻櫎寤虹瓚鏁版嵁 - delete this.canvasData.originalcompanyBuildingData.data[item.assetData.Id]; - // 鍙栨秷娓叉煋 - this.backgroundImage.removeChild(this.backgroundImage.getChildByName(item.assetData.Id)); - // 鏁版嵁鏇存敼 - this.canvasData.isChange = true; - break; - case 1: - delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[item.assetData.Id]; - delete this.canvasData.selectPanelPoint.Data.Increment[item.assetData.Id]; - delete this.canvasData.selectPanelPoint.Data.Stock[item.assetData.Id]; - this.backgroundImage.removeChild(this.backgroundImage.getChildByName(item.assetData.Id)); - this.canvasData.isChange = true; - break; - } - } - }); - this.selection.deselectAll(); - this.emit('deleteIcon'); + this.deleteSelectedShape(); } }); } + /** + * 鍒犻櫎閫変腑鐨勫浘鏍 + */ + 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); + } + } + /** + * 鎵撴嫑鍛 + */ + sayHello() { + var _a; + if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { + var args = [ + "\n %c 鐗堟湰鍙 - " + this.VERSION + "\n", + 'color: #ff66a5; background: #000000; padding:5px 0;', + ]; + (_a = window.console).log.apply(_a, args); + } + else if (window.console) { + window.console.log("\n %c 鐗堟湰鍙 - " + this.VERSION + "\n"); + } +} /** * 椤甸潰鍒濆鍖 */ ngAfterViewInit(): void { - this.createCanvas(); + setTimeout(() => { + this.createCanvas(); + }); window.onresize = () => { this.resetCanvas(); }; @@ -203,7 +223,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV if (this.backgroundImage.scale.x >= 32) { this.backgroundImage.scale.x = 32; this.backgroundImage.scale.y = 32; - this.emit('backgroundScale', this.backgroundImage.scale.x); + this.resizeItem(1/this.backgroundImage.scale.x) return; } this.backgroundImage.pivot.set(pivot.x, pivot.y); @@ -217,7 +237,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV if (this.backgroundImage.scale.x <= 0.1) { this.backgroundImage.scale.x = 0.1; this.backgroundImage.scale.y = 0.1; - this.emit('backgroundScale', this.backgroundImage.scale.x); + this.resizeItem(1/this.backgroundImage.scale.x) return; } this.backgroundImage.pivot.set(pivot.x, pivot.y); @@ -228,7 +248,16 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.backgroundImage.position.x += delX; this.backgroundImage.position.y += delY; } - this.emit('backgroundScale', this.backgroundImage.scale.x); + this.resizeItem(1/this.backgroundImage.scale.x) + } + // 閲嶇疆鍥惧舰缂╂斁 + public resizeItem(size:number) { + this.backgroundImage.children.forEach(item => { + if (item instanceof AxShape) { + item.setItemScale(size); + item.drawBorder(size); + } + }); } /** * @@ -268,19 +297,21 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV backgroundColor: 0xE9FAFF }); this.content.nativeElement.appendChild(this.app.view); + this.app.view.style.border = '1px dashed blue'; this.animator = new Charm(PIXI); - + this.createBackgroundImage(); this.app.ticker.add((delta) => { this.animator.update(); this.mousePosition = this.app.renderer.plugins.interaction.mouse.global; // 棰勮鍥剧墖 - if (this.previewImage !== null) { + if (this.previewImage !== undefined && this.previewImage !== null) { this.previewImage.position = this.backgroundImage.toLocal(this.mousePosition); } - if (this.backgroundImage !== null) { + if (this.circleShadow !== undefined && this.circleShadow !== null) { this.circleShadow.position = this.backgroundImage.toLocal(this.mousePosition); this.refreshPreviewLineSegment(this.currentClickPoint.position, this.circleShadow.position); + this.refreshPreviewPoint(); } /** * 鏄剧ず妗嗛 @@ -308,101 +339,87 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 閫変腑浜嬩欢 */ - this.on('select', obj => { - if (this.allowEdit) { - if (obj instanceof AxArrowConnector) { - obj.setPointsVisible(true); - } - else if (obj instanceof MultipointIcon) { - if (obj.assetData.GameMode === this.canvasData.gameMode) { - obj.setPointVisiable(true); - } else { - obj.filters = [this.outlineFilterGreen]; - } - } else if (obj instanceof PolygonIcon) { - if (obj.assetData.GameMode === this.canvasData.gameMode) { - obj.setPointVisiable(true); - } else { - obj.filters = [this.outlineFilterGreen]; - } - } else { - obj.filters = [this.outlineFilterGreen]; - } - } else { - obj.filters = [this.outlineFilterGreen]; - } + this.on('select', (axShape:AxShape)=> { + axShape.showBorder(); + axShape.setPointVisiable(this.allowEdit); }); /** * 鍙栨秷閫変腑浜嬩欢 */ - this.on('deselect', obj => { - if (this.allowEdit) { - if (obj instanceof AxArrowConnector) { - obj.setPointsVisible(false); - } - else if (obj instanceof MultipointIcon) { - obj.setPointVisiable(false); - } else if (obj instanceof PolygonIcon) { - obj.filters = []; - obj.setPointVisiable(false); - } else { - obj.filters = []; - } - } else { - obj.filters = []; - } - }); - /** - * 鏍规嵁鑳屾櫙缂╂斁浜嬩欢 - */ - this.on('backgroundScale', scale => { - this.backgroundImage?.children.forEach(item => { - if (item instanceof AxImageShape) { - if (item.assetData.FixedSize) { - const data = 1 / scale; - item.scale.set(data); - } else { - const data = 1 / scale; - item.text.scale.set(data); - } - } else if (item instanceof MultipointIcon) { - const data = 1 / scale; - item.text.scale.set(data); - } else if (item instanceof PolygonIcon) { - const data = 1 / scale; - item.text.scale.set(data); - item.pointsGraphics.forEach(point => { - point.scale.set(data); - }); - } else if (item instanceof AxPreviewImageShape) { - const data = 1 / scale; - item.scale.set(data); - }else if (item instanceof AxArrowConnector) { - const data = 1 / scale; - item.text.scale.set(data); - item.pointSprites.forEach(point => { - point.scale.set(data); - }); - } - }); - + this.on('deselect', (axShape:AxShape)=> { + axShape.hideBorder(); + axShape.setPointVisiable(false); }); /** - * 鍒涘缓鍥炬爣浜嬩欢 + * 鍒涘缓鍥炬爣浜嬩欢锛堟暟鎹鐞嗭級 */ - this.on('createIcon', obj => { - if (obj.assetData.GameMode === GameMode.BasicInformation) { + this.on('createIcon', (axShape:AxShape)=> { + if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 鍩烘湰淇℃伅 // 娣诲姞妤煎眰鏁版嵁 - this.canvasData.originaleveryStoreyData.data[obj.assetData.Id] = obj.assetData; + this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id] = axShape.assetData; // 娣诲姞寤虹瓚鏁版嵁 - this.canvasData.originalcompanyBuildingData.data[obj.assetData.Id] = obj.assetData; - } else { + this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id] = axShape.assetData; + } else if (axShape.assetData.GameMode === GameMode.Assignment) { // 澶勭疆棰勬 if (this.canvasData.selectPanelPoint.Data === undefined - || this.canvasData.selectPanelPoint.Data === null) { + || this.canvasData.selectPanelPoint.Data === null) { this.canvasData.selectPanelPoint.Data = new FloorNodeData(); } - this.canvasData.selectPanelPoint.Data.Stock[obj.assetData.Id] = obj.assetData; + this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id] = axShape.assetData; + } + // else if (obj.assetData.GameMode === GameMode.Examinee) { // 鑰冪敓鑰冭瘯 + // if (obj.assetData.Tag === 1) { + // this.canvasData.examOriginaleveryStoreyData.data[obj.assetData.Id] = obj.assetData; + // } else { + // if (this.canvasData.selectPanelPoint.Data === undefined + // || this.canvasData.selectPanelPoint.Data === null) { + // this.canvasData.selectPanelPoint.Data = new FloorNodeData(); + // } + // this.canvasData.selectPanelPoint.Data.Stock[obj.assetData.Id] = obj.assetData; + // } + // } + var temp = this.backgroundImage.getChildByName("鍥句緥") as AxLegend; + if ( temp !== undefined + && temp !== null) { + var itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1); + temp.addItem(itemLegend); + } + this.canvasData.isChange = true; + }); + /** + * 鍒犻櫎鍥炬爣浜嬩欢(鏁版嵁澶勭悊) + */ + this.on('deleteIcon', (axShape:AxShape)=>{ + // 鍒犻櫎鍥句緥瀵硅薄 + var temp = this.backgroundImage.getChildByName("鍥句緥") as AxLegend; + if ( temp !== undefined + && temp !== null) { + var 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 (assetData.GameMode === GameMode.Examinee) { // 鑰冪敓鑰冭瘯 + // if (assetData.Tag === 1) { + // // 鍒犻櫎妤煎眰鏁版嵁 + // delete this.canvasData.examOriginaleveryStoreyData.data[assetData.Id]; + // } else { + // delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[assetData.Id]; + // delete this.canvasData.selectPanelPoint.Data.Increment[assetData.Id]; + // delete this.canvasData.selectPanelPoint.Data.Stock[assetData.Id]; + // } + + // } + this.backgroundImage.removeChild(axShape); this.canvasData.isChange = true; }); } @@ -474,29 +491,22 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.selection.select(obj); }); } - /** - * 鍒锋柊宸ヤ綔鍖 - */ - public async refresh() { - this.setPaintMode(PaintMode.endPaint); - this.resetCanvas(); - this.destroyBackgroundImage(); - if (!this.canvasData.selectStorey.imageUrl) { - return; - } - - await this.createBackgroundImage(this.canvasData.selectStorey.imageUrl); - this.createFloorShape(); - if (this.canvasData.gameMode === GameMode.Assignment) { - this.createWorkNode(); - } - this.emit('backgroundScale', this.backgroundImage.scale.x); - } + // /** + // * 鍒涘缓鑳屾櫙鍥 + // */ + // public createBackground(imageUrl:string,imageAngle:number) { + // if (this.backgroundImage !== null) { + // this.backgroundImage.destroy(); + // this.backgroundImage = null; + // } + // this.createBackgroundImage() + // this.refreshBackgroundImage(imageUrl,imageAngle); + // } /** * 鍒涘缓妤煎眰鍥惧舰 */ - private createFloorShape() { - const floorData = this.canvasData.originaleveryStoreyData.data; + public createFloorShape(floorData: any) { + if (floorData === undefined || floorData === null) return; Object.keys(floorData).forEach((key) => { switch (floorData[key].InteractiveMode) { case 0: @@ -511,22 +521,24 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV break; case 3: if (floorData[key].Name === '姘村甫') { - const distance = new AxArrowConnector(floorData[key], this,false,true); + const distance = new AxArrowConnector(floorData[key], this, false, true); } else if(floorData[key].Name === '璺濈'){ - const distance = new AxArrowConnector(floorData[key], this,true,true); + const distance = new AxArrowConnector(floorData[key], this, true, true); }else if(floorData[key].Name === '鏅氬' || floorData[key].Name === '鎵块噸澧'){ - const wall = new AxArrowConnector(floorData[key], this,false,false); + const wall = new AxArrowConnector(floorData[key], this, false, false); } break; } }); + // this.emit('backgroundScale', this.backgroundImage.scale.x); } - - private createWorkNode() { - // 鍔犺浇澶勭疆鑺傜偣鏁版嵁 - const nodeData = this.canvasData.selectPanelPoint.Data; + /** + * 鍒涘缓鑺傜偣鍥惧舰 + */ + public createNodeShape(nodeData: any) { if (nodeData !== undefined && nodeData !== null) { Object.keys(nodeData).forEach((key) => { + if (nodeData[key] === undefined || nodeData[key] === null) { return;} Object.keys(nodeData[key]).forEach((tempKey) => { switch (nodeData[key][tempKey].InteractiveMode) { case 0: @@ -546,55 +558,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV }); }); } + // this.emit('backgroundScale', this.backgroundImage.scale.x); } - /** - * - * @param id 鍥炬爣ID - * @param b 鏄剧ず/闅愯棌 - */ - public setIconVisible(ids: string[], b: boolean) { - ids.forEach(item => { - this.backgroundImage.getChildByName(item).visible = b; - }); - } - // /** - // * 鐗堟湰妫鏌 - // */ - // public versionChecking(): void { - // const floorData = this.canvasData.originaleveryStoreyData; - // const buildingData = this.canvasData.originalcompanyBuildingData; - // const nodeData = this.canvasData.selectPanelPoint; - // if (floorData.version && floorData.version === '1.0') { - // floorData.version = '2.0'; - // Object.keys(floorData.data).forEach(item => { - // floorData.data[item].Point.y *= -1; - // floorData.data[item].MultiPoint?.forEach(element => { - // element.y *= -1; - // }); - // }); - // } - // if (buildingData.version && buildingData.version === '1.0') { - // buildingData.version = '2.0'; - // Object.keys(buildingData.data).forEach(item => { - // buildingData.data[item].Point.y *= -1; - // buildingData.data[item].MultiPoint?.forEach(element => { - // element.y *= -1; - // }); - // }); - // } - // if (nodeData.Version && nodeData.Version === '1.0') { - // nodeData.Version = '2.0'; - // console.log(this.canvasData.selectPanelPoint.Version); - // Object.keys(nodeData.Data).forEach((key) => { - // Object.keys(nodeData.Data[key]).forEach((tempKey) => { - // nodeData.Data[key][tempKey].Point.y *= -1; - // nodeData.Data[key][tempKey].MultiPoint?.forEach(element => { - // element.y *= -1; - // }); - // }); - // }); - // } - // } /** * 鍒涘缓纭缁樺埗缁撴潫鎸夐挳 */ @@ -606,7 +571,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.enterPaintEndButton.interactive = true; this.enterPaintEndButton.buttonMode = true; this.enterPaintEndButton - .on('mousedown', event => { + .on('pointerdown', event => { event.stopPropagation(); this.enterPaint(); }); @@ -617,33 +582,31 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 鍒涘缓鑳屾櫙鍥 */ - private async createBackgroundImage(imageUrl: string): Promise { - const image = await PIXI.Texture.fromURL(imageUrl); - this.backgroundImage = new PIXI.Sprite(image); + public createBackgroundImage(){ + this.backgroundImage = PIXI.Sprite.from('assets/images/noImg.png') this.backgroundImage.anchor.set(0.5); - this.backgroundImage.x = this.app.view.width / 2; - this.backgroundImage.y = this.app.view.height / 2; + // this.backgroundImage.x = this.app.view.width / 2; + // this.backgroundImage.y = this.app.view.height / 2; this.backgroundImage.interactive = true; this.backgroundImage.name = 'background'; - this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle; - // const left = this.init.element.nativeElement.querySelector('.functionalDomainLeft').clientWidth; - // const right = this.init.element.nativeElement.querySelector('.functionalDomainRight').clientWidth; - const imageWidth = this.backgroundImage.texture.width; - const imageHeight = this.backgroundImage.texture.height; - const appWidth = this.app.view.width - 470; - const appHeight = this.app.view.height; + // this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle; + // const imageWidth = 665; + // const imageHeight = 530; + // const appWidth = this.app.view.width - 470; + // const appHeight = this.app.view.height; - const wScale = appWidth / imageWidth; - const hScale = appHeight / imageHeight; + // const wScale = appWidth / imageWidth; + // const hScale = appHeight / imageHeight; - const scale = wScale < hScale - ? wScale - : hScale; - this.backgroundImage.scale.set(scale); + // const scale = wScale < hScale + // ? wScale + // : hScale; + // this.backgroundImage.scale.set(scale); this.backgroundImage.sortableChildren = true; this.backgroundImage - .on('mousedown', event => { + .on('pointerdown', event => { if (!event.currentTarget.dragging && this.selection.isMultiselection === false) { + this.selection.deselectAll(); event.currentTarget.data = event.data; event.currentTarget.dragging = true; event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); @@ -651,7 +614,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV event.currentTarget.dragPoint.y -= event.currentTarget.y; switch (this.paintMode) { case PaintMode.endPaint: - console.log(this.backgroundImage.toLocal(this.mousePosition)); break; case PaintMode.singlePointIcon: const json = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos)); @@ -685,11 +647,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV DrawMode : this.canvasData.selectTemplateData.drawMode, Thickness : this.canvasData.selectTemplateData.thickness, IsFromBuilding : this.canvasData.selectTemplateData.isFromBuilding, - GameMode : this.canvasData.gameMode + GameMode: this.canvasData.gameMode, + Tag: this.canvasData.selectTemplateData.tag }; const singleIcon = new AxImageShape(assetData, this); this.emit('createIcon', singleIcon); - this.emit('backgroundScale', this.backgroundImage.scale.x); + // this.emit('backgroundScale', this.backgroundImage.scale.x); break; case PaintMode.lineIcon: this.previewLineSegment.visible = true; @@ -732,7 +695,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV DrawMode: this.canvasData.selectTemplateData.drawMode, Thickness: this.canvasData.selectTemplateData.thickness, IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding, - GameMode: this.canvasData.gameMode + GameMode: this.canvasData.gameMode, + Tag: this.canvasData.selectTemplateData.tag }; // const assetData1 = { // ImageUrl: this.canvasData.selectTemplateData.imageUrl, @@ -745,7 +709,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.paintingIcon = new MultipointIcon(assetData1, this); // this.paintingIcon = new MultipointIcon(this.previewSinglePointIcon.texture, new PIXI.Point(0, 0), this.paintPoints, this, // this.canvasData.selectTemplateData.name); - this.emit('backgroundScale', this.backgroundImage.scale.x); + // this.emit('backgroundScale', this.backgroundImage.scale.x); break; case PaintMode.polygonIcon: this.previewLineSegment.visible = true; @@ -817,7 +781,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV DrawMode: this.canvasData.selectTemplateData.drawMode, Thickness: this.canvasData.selectTemplateData.thickness, IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding, - GameMode: this.canvasData.gameMode + GameMode: this.canvasData.gameMode, + Tag: this.canvasData.selectTemplateData.tag }; if (this.canvasData.selectTemplateData.name === '璺濈') { this.paintingShape = new AxArrowConnector(assetData2, this,true,true); @@ -829,7 +794,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.paintingShape.redraw(); } } - this.emit('backgroundScale', this.backgroundImage.scale.x); + // this.emit('backgroundScale', this.backgroundImage.scale.x); break; } } else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) { @@ -839,7 +804,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); } }) - .on('mouseup', event => { + .on('pointerup', event => { if (event.currentTarget.dragging) { event.currentTarget.dragging = false; event.currentTarget.data = null; @@ -862,13 +827,13 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.rectToolGraphics.visible = false; } }) - .on('mouseupoutside', event => { + .on('pointerupoutside', event => { if (event.currentTarget.dragging) { event.currentTarget.dragging = false; event.currentTarget.data = null; } }) - .on('mousemove', event => { + .on('pointermove', event => { if (event.currentTarget.dragging && this.selection.isMultiselection === false) { const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x; @@ -921,37 +886,123 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 鍒锋柊鑳屾櫙鍥 */ - public refreshBackgroundImage(): void { - if (!this.canvasData.selectStorey.imageUrl) { + public async refreshBackgroundImage(imageUrl:string = this.canvasData.selectStorey.imageUrl,imageAngle:number = this.canvasData.selectStorey.imageAngle): Promise { + if (!imageUrl) { this.backgroundImage.visible = false; } else { - // this.backgroundImage.texture = PIXI.Texture.from(this.canvasData.selectStorey.imageUrl); - // this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle; - // this.backgroundImage.visible = true; - this.refresh(); + this.backgroundImage.visible = false; + this.backgroundImage.scale.set(1); + this.backgroundImage.pivot.set(0); + this.backgroundImage.x = this.app.view.width / 2; + this.backgroundImage.y = this.app.view.height / 2; + this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl); + this.backgroundImage.angle = imageAngle; + // 绛夊緟鍥剧墖鍔犺浇瀹屾垚 + let imageWidth = this.backgroundImage.texture.width; + let imageHeight = this.backgroundImage.texture.height; + let appWidth = this.app.view.width - 470; + let appHeight = this.app.view.height; + let wScale = appWidth / imageWidth; + let hScale = appHeight / imageHeight; + let scale = wScale < hScale ? wScale : hScale; + // 璁剧疆鍥剧墖缂╂斁 + this.backgroundImage.scale.set(scale); } } /** - * 娓呯┖鐢诲竷 + * 鍒锋柊 + * @param imageUrl + * @param imageAngle */ - public destroyBackgroundImage(): void { - this.app.stage.removeChild(this.backgroundImage); + public async refresh(imageUrl: string = this.canvasData.selectStorey.imageUrl, imageAngle: number = this.canvasData.selectStorey.imageAngle): Promise { + this.backgroundImage.visible = false; + this.backgroundImage.scale.set(1); + this.backgroundImage.pivot.set(0); + this.backgroundImage.x = this.app.view.width / 2; + this.backgroundImage.y = this.app.view.height / 2; + this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl); + this.backgroundImage.angle = imageAngle; + // 绛夊緟鍥剧墖鍔犺浇瀹屾垚 + let imageWidth = this.backgroundImage.texture.width; + let imageHeight = this.backgroundImage.texture.height; + let appWidth = this.app.view.width - 470; + let appHeight = this.app.view.height; + let wScale = appWidth / imageWidth; + let hScale = appHeight / imageHeight; + let scale = wScale < hScale ? wScale : hScale; + // 璁剧疆鍥剧墖缂╂斁 + this.backgroundImage.scale.set(scale); + // 娓呯┖鎵鏈夊浘褰 + this.selection.deselectAll(); + let itemList = []; + this.backgroundImage.children.forEach(item => { + if (item instanceof AxShape && item instanceof AxPreviewImageShape===false) { + itemList.push(item.name); + } + }); + + itemList.forEach(item => { + this.backgroundImage.getChildByName(item).destroy(); + // let child = this.backgroundImage.getChildByName(item); + // this.backgroundImage.removeChild(child); + }) + //鍔犺浇褰撳墠鏁版嵁 + this.createFloorShape(this.canvasData.originaleveryStoreyData.data); + // 鍒涘缓澶勭疆棰勬鍥惧舰 + this.createNodeShape(this.canvasData.selectPanelPoint.Data); + this.createAxLegend(); + this.backgroundImage.visible = true; } /** - * 璁剧疆鑳屾櫙鍥剧缉鏀 - * @param scale 缂╂斁绯绘暟 + * 鍒涘缓瀹変俊鍥句緥 */ - public setBackgroundScale(scale: number): void { - this.backgroundImage?.scale.set(scale); - this.emit('backgroundScale', this.backgroundImage?.scale.x); + public createAxLegend() { + const tempAssetData = { + Id: "鍥句緥",//ObjectID.default.generate() + Color: "#066EED80", + PropertyInfos:[] + }; + let shapeMap: Map = new Map(); + + for (let item in this.canvasData.originaleveryStoreyData.data) { + if (shapeMap.has(this.canvasData.originaleveryStoreyData.data[item].Name)) { + shapeMap.get(this.canvasData.originaleveryStoreyData.data[item].Name).Count++; + } else { + shapeMap.set(this.canvasData.originaleveryStoreyData.data[item].Name, new Legend( + this.canvasData.originaleveryStoreyData.data[item].Name, + this.canvasData.originaleveryStoreyData.data[item].ImageUrl, + 1 + )); + } + } + var axLegend = new AxLegend(tempAssetData, this, shapeMap); + var rect = this.backgroundImage.getLocalBounds(); + var itemRect = axLegend.getLocalBounds(); + axLegend.x = rect.right - itemRect.right; + axLegend.y = rect.bottom - itemRect.bottom; } + // /** + // * 娓呯┖鐢诲竷 + // */ + // public destroyBackgroundImage(): void { + // this.app.stage.removeChild(this.backgroundImage); + // this.backgroundImage = null; + // } /** - * 璁剧疆鑳屾櫙鍥捐搴 - * @param imageAngle 瑙掑害鍊 - */ - public setBackgroundAngle(imageAngle: number) { - this.backgroundImage.angle = imageAngle; - } + // // * 璁剧疆鑳屾櫙鍥剧缉鏀 + // // * @param scale 缂╂斁绯绘暟 + // // */ + // public setBackgroundScale(scale: number): void { + // this.backgroundImage?.scale.set(scale); + // this.emit('backgroundScale', this.backgroundImage?.scale.x); + // } + // /** + // * 璁剧疆鑳屾櫙鍥捐搴 + // * @param imageAngle 瑙掑害鍊 + // */ + // public setBackgroundAngle(imageAngle: number) { + // this.backgroundImage.angle = imageAngle; + // } /** * 鍒涘缓棰勮鍗曠偣鍥炬爣 */ @@ -986,7 +1037,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV */ private refreshPreviewLineSegment(pointA: PIXI.Point, pointB: PIXI.Point) { this.previewLineSegment.clear(); - this.previewLineSegment.lineStyle(5, 0x00ff00, 1); + this.previewLineSegment.lineStyle(1/this.backgroundImage.scale.x, 0x00ff00, 1); this.previewLineSegment.moveTo(pointA.x, pointA.y); this.previewLineSegment.lineTo(pointB.x, pointB.y ); } @@ -995,12 +1046,21 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * @param x 鍗婂緞 */ private createCircleShadow(): void { - this.circleShadow.beginFill(0xFFCC5A); - this.circleShadow.drawCircle(0, 0, 10); - this.circleShadow.endFill(); + // this.circleShadow.beginFill(0xFFCC5A); + // this.circleShadow.drawCircle(0, 0, 10); + // this.circleShadow.endFill(); this.circleShadow.visible = false; this.backgroundImage.addChild(this.circleShadow); } + /** + * 鍒锋柊棰勮鐐 + */ + private refreshPreviewPoint() { + this.circleShadow.clear(); + this.circleShadow.beginFill(0x00ff00); + this.circleShadow.drawCircle(0, 0, 5/this.backgroundImage.scale.x); + this.circleShadow.endFill(); + } showConnectionPoint(b: boolean) { this.backgroundImage?.children.forEach(item => { if (item instanceof AxImageShape) { @@ -1014,6 +1074,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 寮濮嬬粯鍒 */ public beginPaint() { + console.log(this.canvasData.selectTemplateData); this.selection.deselectAll(); this.setPaintMode(PaintMode.endPaint); this.setPaintMode(this.canvasData.selectTemplateData.interactiveMode); @@ -1170,7 +1231,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV break; } this.paintPoints.splice(0, this.paintPoints.length); - this.emit('backgroundScale', this.backgroundImage.scale.x); + // this.emit('backgroundScale', this.backgroundImage.scale.x); } /** * 澶嶅埗 @@ -1219,9 +1280,111 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } this.selection.select(this.backgroundImage.getChildByName(newData.Id)); }); - this.emit('backgroundScale', this.backgroundImage.scale.x); + // this.emit('backgroundScale', this.backgroundImage.scale.x); } + ////////////////////////////////////////////////////////////////////////閫氱敤///////////////////////////////////////////////////////////////////////////// + /** + * + * @param id 鍥炬爣ID + * @param b 鏄剧ず/闅愯棌 + */ + public setIconVisible(ids: string[], b: boolean) { + ids.forEach(item => { + this.backgroundImage.getChildByName(item).visible = b; + }); + } + ////////////////////////////////////////////////////////////////////////閲囬泦骞冲彴鍔犺浇閫昏緫/////////////////////////////////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////缂栧埗骞冲彴鍔犺浇閫昏緫/////////////////////////////////////////////////////////////////////// + + ////////////////////////////////////////////////////////////////////////鑰冭瘯绯荤粺鍔犺浇閫昏緫/////////////////////////////////////////////////////////////////////// + /** + * 鑰冪敓鐐瑰嚮妤煎眰 + */ + public async onExamineeClickFloor() { + // this.backgroundImage.visible = false; + // this.backgroundImage.scale.set(1); + // this.backgroundImage.pivot.set(0); + // this.backgroundImage.x = this.app.view.width / 2; + // this.backgroundImage.y = this.app.view.height / 2; + // this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl); + // this.backgroundImage.angle = imageAngle; + // // 绛夊緟鍥剧墖鍔犺浇瀹屾垚 + // let imageWidth = this.backgroundImage.texture.width; + // let imageHeight = this.backgroundImage.texture.height; + // let appWidth = this.app.view.width - 470; + // let appHeight = this.app.view.height; + // let wScale = appWidth / imageWidth; + // let hScale = appHeight / imageHeight; + // let scale = wScale < hScale ? wScale : hScale; + // // 璁剧疆鍥剧墖缂╂斁 + // this.backgroundImage.scale.set(scale); + // // 娓呯┖鎵鏈夊浘褰 + // this.selection.deselectAll(); + // let itemList = []; + // this.backgroundImage.children.forEach(item => { + // if (item instanceof AxShape && item instanceof AxPreviewImageShape===false) { + // itemList.push(item.name); + // } + // }); + + // itemList.forEach(item => { + // this.backgroundImage.getChildByName(item).destroy(); + // }) + // // 鍒涘缓妤煎眰鍥惧舰 + // this.createFloorShape(this.canvasData.examOriginaleveryStoreyData.data); + // // 鍒涘缓妤煎眰鍥惧舰 + // this.createFloorShape(this.canvasData.originaleveryStoreyData.data); + // // 鍒涘缓澶勭疆棰勬鍥惧舰 + // this.createNodeShape(this.canvasData.selectPanelPoint.Data); + // // 闅愯棌鍥炬爣 + // this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false); + // this.backgroundImage.visible = true; + } + + /** + * 鑰冨畼鐐瑰嚮妤煎眰 + */ + public async onExaminerClickFloor() { + // this.backgroundImage.visible = false; + // this.backgroundImage.scale.set(1); + // this.backgroundImage.pivot.set(0); + // this.backgroundImage.x = this.app.view.width / 2; + // this.backgroundImage.y = this.app.view.height / 2; + // this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl); + // this.backgroundImage.angle = imageAngle; + // // 绛夊緟鍥剧墖鍔犺浇瀹屾垚 + // let imageWidth = this.backgroundImage.texture.width; + // let imageHeight = this.backgroundImage.texture.height; + // let appWidth = this.app.view.width - 470; + // let appHeight = this.app.view.height; + // let wScale = appWidth / imageWidth; + // let hScale = appHeight / imageHeight; + // let scale = wScale < hScale ? wScale : hScale; + // // 璁剧疆鍥剧墖缂╂斁 + // this.backgroundImage.scale.set(scale); + // // 娓呯┖鎵鏈夊浘褰 + // this.selection.deselectAll(); + // let itemList = []; + // this.backgroundImage.children.forEach(item => { + // if (item instanceof AxShape && item instanceof AxPreviewImageShape===false) { + // itemList.push(item.name); + // } + // }); + + // itemList.forEach(item => { + // this.backgroundImage.getChildByName(item).destroy(); + // }) + // // 鍒涘缓妤煎眰鍥惧舰 + // this.createFloorShape(this.canvasData.examOriginaleveryStoreyData.data); + // // 鍒涘缓妤煎眰鍥惧舰 + // this.createFloorShape(this.canvasData.originaleveryStoreyData.data); + // // 鍒涘缓澶勭疆棰勬鍥惧舰 + // this.createNodeShape(this.canvasData.selectPanelPoint.Data); + // // 闅愯棌鍥炬爣 + // this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false); + // this.backgroundImage.visible = true; + } } /**