diff --git a/src/app/canvas-share-data.service.ts b/src/app/canvas-share-data.service.ts index fe62f82..aa7fc19 100644 --- a/src/app/canvas-share-data.service.ts +++ b/src/app/canvas-share-data.service.ts @@ -8,10 +8,11 @@ import { GameMode } from './working-area/model/gameMode'; export class CanvasShareDataService { constructor() { } private _sendMessage: ReplaySubject = new ReplaySubject(1); + GameMode: any; isChange = false; // 数据 是否改动 - selectTemplateData: any; // 选择当前 素材库模板数据 + selectTemplateData: any; // 选择当前 模板数据 // 总平面图/建筑 楼层 selectStorey: any = {area: '', details: ''}; // 选择当前 楼层 数据 @@ -28,7 +29,7 @@ export class CanvasShareDataService { /** * 游戏模式 */ - gameMode: GameMode = GameMode.Assignment; + gameMode: GameMode = GameMode.BasicInformation; facilityAssetsName = new Map([ [ '消防水池', '消防水池'], @@ -81,6 +82,23 @@ export class CanvasShareDataService { return returnData; } } + /** + * 更新建筑数据 + */ + public updateBuildingData() { + Object.keys(this.originaleveryStoreyData.data).forEach((key) => { + this.originalcompanyBuildingData.data[key] = this.originaleveryStoreyData.data[key]; + }); + } + /** + * 删除建筑数据中当前楼层的数据 + */ + public deleteBuildingDataByCurrentFloorData():void { + Object.keys(this.originaleveryStoreyData.data).forEach((key) => { + // 删除建筑数据 + delete this.originalcompanyBuildingData.data[key]; + }); + } /** * 获取单位毗邻信息 */ @@ -665,7 +683,7 @@ export class AssetData { /// /// 是否来自建筑 /// - public IsFromBuilding: boolean; + public IsFromBuilding: boolean; /// /// 渲染方式。 /// diff --git a/src/app/working-area/model/wallSpace.ts b/src/app/working-area/model/axArrowConnector.ts similarity index 83% rename from src/app/working-area/model/wallSpace.ts rename to src/app/working-area/model/axArrowConnector.ts index 8cb8f1a..f6e1c17 100644 --- a/src/app/working-area/model/wallSpace.ts +++ b/src/app/working-area/model/axArrowConnector.ts @@ -1,10 +1,11 @@ import { WorkingAreaComponent } from '../working-area.component'; import * as PIXI from 'pixi.js'; +import { AxShape } from './axShape'; /** * 墙面 */ -export class WallSpace extends PIXI.Container { +export class AxArrowConnector extends AxShape { line: PIXI.Graphics; text: PIXI.Text; @@ -26,8 +27,9 @@ export class WallSpace extends PIXI.Container { }); pts: PIXI.Point[]; - constructor(public assetData: any, private workingArea: WorkingAreaComponent) { - super(); + constructor(assetData: any, workingArea: WorkingAreaComponent) { + super(assetData, workingArea); + this.name = assetData.Id; this.text = new PIXI.Text(this.assetData.Name + '\r\n' + this.assetData.PropertyInfos?.find((item: { PropertyName: string; }) => @@ -44,22 +46,26 @@ export class WallSpace extends PIXI.Container { * 刷新形状 */ public refresh(c: PIXI.Graphics, pts: PIXI.Point[]): void { + if (pts.length < 2) { + return; + } + this.text.position = pts[0]; const strokeWidth = 1; const startWidth = 30 + strokeWidth; const endWidth = 30 + strokeWidth; - const edgeWidth = 10; + const edgeWidth = this.assetData.Thickness === 0?10:this.assetData.Thickness; // 宽度 const openEnded = false; - const markerStart = false; - const markerEnd = true; + const markerStart = false;// 起始箭头 + const markerEnd = false;// 结束箭头 const spacing = (openEnded) ? 0 : 0 + strokeWidth / 2; const startSize = 30 + strokeWidth; const endSize = 30 + strokeWidth; const isRounded = true; + const lineColor = 0x000000; + const fillColor: number = this.assetData.Color.substring(0, 7).replace('#', '0x');; - // Base vector (between first points) const pe = pts[pts.length - 1]; - // Finds first non-overlapping point let i0 = 1; while (i0 < pts.length - 1 && pts[i0].x === pts[0].x && pts[i0].y === pts[0].y) { @@ -73,8 +79,6 @@ export class WallSpace extends PIXI.Container { if (dist === 0) { return; } - - // Computes the norm and the inverse norm let nx = dx / dist; let nx1 = nx; let nx2 = nx; @@ -84,7 +88,6 @@ export class WallSpace extends PIXI.Container { let orthx = edgeWidth * ny; let orthy = -edgeWidth * nx; - // Stores the inbound function calls in reverse order in fns const fns = []; // if (isRounded) { @@ -96,9 +99,9 @@ export class WallSpace extends PIXI.Container { // c.lineTextureStyle({ miterLimit: 1.42 }); // } // c.lineStyle(1, 0x000000, 1); - c.lineTextureStyle({ width: 1, color: 0x00000, join: PIXI.LINE_JOIN.ROUND }); - // c.begin(); - c.beginFill(0xffffff); + c.clear(); + c.lineTextureStyle({ width: 1, color: lineColor, join: PIXI.LINE_JOIN.ROUND }); + c.beginFill(fillColor); const startNx = nx; const startNy = ny; @@ -125,7 +128,6 @@ export class WallSpace extends PIXI.Container { let dist1 = 0; for (let i = 0; i < pts.length - 2; i++) { - // Work out in which direction the line is bending const pos = this.relativeCcw(pts[i].x, pts[i].y, pts[i + 1].x, pts[i + 1].y, pts[i + 2].x, pts[i + 2].y); dx1 = pts[i + 2].x - pts[i + 1].x; @@ -140,7 +142,6 @@ export class WallSpace extends PIXI.Container { const tmp1 = nx * nx1 + ny * ny1; const tmp = Math.max(Math.sqrt((tmp1 + 1) / 2), 0.04); - // Work out the normal orthogonal to the line through the control point and the edge sides intersection nx2 = (nx + nx1); ny2 = (ny + ny1); @@ -150,7 +151,6 @@ export class WallSpace extends PIXI.Container { nx2 = nx2 / dist2; ny2 = ny2 / dist2; - // Higher strokewidths require a larger minimum bend, 0.35 covers all but the most extreme cases const strokeWidthFactor = Math.max(tmp, Math.min(1 / 200 + 0.04, 0.35)); const angleFactor = (pos !== 0 && isRounded) ? Math.max(0.1, strokeWidthFactor) : Math.max(tmp, 0.06); @@ -160,8 +160,6 @@ export class WallSpace extends PIXI.Container { const inY = pts[i + 1].y + nx2 * edgeWidth / 2 / angleFactor; if (pos === 0 || !isRounded) { - // If the two segments are aligned, or if we're not drawing curved sections between segments - // just draw straight to the intersection point c.lineTo(outX, outY); ((x, y) => { @@ -250,10 +248,8 @@ export class WallSpace extends PIXI.Container { // c.fillAndStroke(); // } - // Workaround for shadow on top of base arrow // c.setShadow(false); - // Need to redraw the markers without the low miter limit // c.setMiterLimit(4); // if (isRounded) @@ -263,8 +259,6 @@ export class WallSpace extends PIXI.Container { // if (pts.length > 2) // { - // // Only to repaint markers if no waypoints - // // Need to redraw the markers without the low miter limit // c.setMiterLimit(4); // if (markerStart && !openEnded) // { @@ -283,11 +277,6 @@ export class WallSpace extends PIXI.Container { // } // } } - /** - * Function: paintMarker - * - * Paints the marker. - */ paintMarker(c: PIXI.Graphics, ptX: number, ptY: number, nx: number, ny: number, size: number, arrowWidth: number, edgeWidth: number, spacing: number, initialMove: boolean) { const widthArrowRatio = edgeWidth / arrowWidth; @@ -307,21 +296,6 @@ export class WallSpace extends PIXI.Container { c.lineTo(ptX + orthx / widthArrowRatio + spaceX, ptY + orthy / widthArrowRatio + spaceY); c.lineTo(ptX + orthx + spaceX, ptY + orthy + spaceY); } - /** - * Function: relativeCcw - * - * Returns 1 if the given point on the right side of the segment, 0 if its - * on the segment, and -1 if the point is on the left side of the segment. - * - * Parameters: - * - * x1 - X-coordinate of the startpoint of the segment. - * y1 - Y-coordinate of the startpoint of the segment. - * x2 - X-coordinate of the endpoint of the segment. - * y2 - Y-coordinate of the endpoint of the segment. - * px - X-coordinate of the point. - * py - Y-coordinate of the point. - */ relativeCcw(x1: number, y1: number, x2: number, y2: number, px: number, py: number) { x2 -= x1; y2 -= y1; @@ -344,4 +318,8 @@ export class WallSpace extends PIXI.Container { } return (ccw < 0.0) ? -1 : ((ccw > 0.0) ? 1 : 0); } + + redraw(): void{ + this.refresh(this.line, this.assetData.MultiPoint); + } } diff --git a/src/app/working-area/model/axImageShape.ts b/src/app/working-area/model/axImageShape.ts index 99fca6c..e76728e 100644 --- a/src/app/working-area/model/axImageShape.ts +++ b/src/app/working-area/model/axImageShape.ts @@ -1,24 +1,443 @@ +import { WorkingAreaComponent } from '../working-area.component'; +import * as ObjectID from 'bson-objectid'; +import { GameMode } from './gameMode'; +import { Pipeline } from './pipeline'; +import { PaintMode } from './paintModel'; import * as PIXI from 'pixi.js'; - +import { PropertyInfo } from './PropertyInfo'; +import { AxShape } from './axShape'; +import { Sprite } from 'pixi.js'; /** - * 安信形状 + * 安信图片形状 + * AxImageShape */ -export class AxImageShape extends PIXI.Container { +export class AxImageShape extends AxShape { + style = new PIXI.TextStyle({ + fontFamily: 'Arial', + fontSize: 18, + fontStyle: 'normal', + fontWeight: 'bold', + fill: ['#000000'], + stroke: '#ffffff', + strokeThickness: 3, + dropShadow: true, + dropShadowColor: '#000000', + dropShadowBlur: 3, + dropShadowAngle: Math.PI / 6, + dropShadowDistance: 1, + wordWrap: false, + wordWrapWidth: 100, + }); + + text = new PIXI.Text(this.assetData.Name + + '\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; + // 可移动的 - constructor() { - super(); + // 可选中的 - } + // 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; + this.y = this.assetData.Point.y; + this.name = this.assetData.Id; + this.image = PIXI.Sprite.from(this.assetData.ImageUrl); + this.image.angle = this.assetData.Angle; + this.image.x = 0; + this.image.y = 0; + this.image.width = this.assetData.Width; + 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 => { - paintVertexShape(rect: PIXI.Rectangle) { + // }) + // .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); - } - paintBackground(rect: PIXI.Rectangle) { } + if (this.assetData.GameMode === 2) { + this.text.visible = false; + } + this.addChild(this.text); + this.addChild(this.image); + this.addChild(this.selectionBox); + + if (this.assetData.CanConnect) { + // connectPoint + this.connectPoint = new PIXI.Sprite(this.connectPointTexture); + this.connectPoint.anchor.set(0.5); + this.connectPoint.x = this.image.x; + this.connectPoint.y = this.image.y; + this.addChild(this.connectPoint); + this.connectPoint.interactive = true; + this.connectPoint + .on('mousedown', event => { + event.stopPropagation(); + this.paintingPipeline(this.x, this.y); + }) + .on('mouseover', event => { + this.setSelectionBox(true, this.connectPoint); + }) + .on('mouseout', 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); + // }); - paintForeground(rect: PIXI.Rectangle) { } + // // 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); + // }); - paintEdgeShape(pts: Array) { } + this.showConnectionPoint(false); + } + } + // 设置选择框 + public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) { + if (b) { + 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(); + } + } + // 设置名称 + public setNameVisible(value: boolean, mode: GameMode) { + if (this.assetData.GameMode === mode) { + this.text.visible = value; + } + } + // 显示连接点 + 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; + } + paintingPipeline(x: number, y: number) { + if (this.assetData.CanConnect) { + if (this.workingArea.getPaintMode() === PaintMode.Pipeline) { + if (this.workingArea.paintingPipeline === null) { + this.workingArea.previewLineSegment.visible = true; + this.workingArea.currentClickPoint.position = + new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); + this.workingArea.paintPoints.push(new PIXI.Point(x, y)); + const json = JSON.parse(JSON.stringify(this.workingArea.canvasData.selectTemplateData.propertyInfos)); + const list = []; + json.forEach(element => { + const property = new PropertyInfo(element); + list.push(property); + }); + const tempData = { + TemplateId: this.workingArea.canvasData.selectTemplateData.id, + CanConnect: this.workingArea.canvasData.selectTemplateData.canConnect, + Pipelines: new Array(), + FloorId: this.workingArea.canvasData.selectStorey.id, + Angle: this.workingArea.canvasData.selectTemplateData.angle, + Color: this.workingArea.canvasData.selectTemplateData.color, + Enabled: this.workingArea.canvasData.selectTemplateData.enabled, + FillMode: this.workingArea.canvasData.selectTemplateData.fillMode, + FireElementId: this.workingArea.canvasData.selectTemplateData.fireElementId, + FixedSize: this.workingArea.canvasData.selectTemplateData.fixedSize, + Height : 32, + Width : 32, + Id: ObjectID.default.generate(), + ImageUrl: this.workingArea.canvasData.selectTemplateData.imageUrl, + InteractiveMode: this.workingArea.canvasData.selectTemplateData.interactiveMode, + MultiPoint : JSON.parse(JSON.stringify(this.workingArea.paintPoints)), + Point: new PIXI.Point(0, 0), + Name : this.workingArea.canvasData.selectTemplateData.name, + PropertyInfos: list, + Border : this.workingArea.canvasData.selectTemplateData.border, + DrawMode : this.workingArea.canvasData.selectTemplateData.drawMode, + Thickness : this.workingArea.canvasData.selectTemplateData.thickness, + IsFromBuilding : this.workingArea.canvasData.selectTemplateData.isFromBuilding, + GameMode: this.workingArea.canvasData.gameMode, + LinkedObjects: new Array(this.assetData.Id), + }; + this.workingArea.paintingPipeline = new Pipeline(tempData, this.workingArea); + this.assetData.Pipelines.push(this.workingArea.paintingPipeline.assetData.Id); + this.workingArea.emit('createIcon', this.workingArea.paintingPipeline); + } else { + this.workingArea.previewLineSegment.visible = false; + this.workingArea.currentClickPoint.position = + new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); + this.workingArea.paintPoints.push(new PIXI.Point(x, y)); + this.workingArea.paintingPipeline.assetData.MultiPoint = + JSON.parse(JSON.stringify(this.workingArea.paintPoints)); + this.workingArea.paintingPipeline.assetData.LinkedObjects.push(this.assetData.Id); + this.assetData.Pipelines.push(this.workingArea.paintingPipeline.assetData.Id); + this.workingArea.paintingPipeline.refresh(); + this.workingArea.initPipelineData(); + } + } + } + } + // 刷新 + public refresh() { + if (this.assetData.CanConnect) { + + } + this.image.width = this.assetData.Width; + this.image.height = this.assetData.Height; + this.image.angle = this.assetData.Angle; + this.text.text = this.assetData.Name + + '\r\n' + + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; + this.text.x = this.image.x; + this.text.y = this.image.y - this.image.height / 2; + } } diff --git a/src/app/working-area/model/axPreviewImageShape.ts b/src/app/working-area/model/axPreviewImageShape.ts new file mode 100644 index 0000000..623b2d7 --- /dev/null +++ b/src/app/working-area/model/axPreviewImageShape.ts @@ -0,0 +1,27 @@ +import { Sprite, Texture } from 'pixi.js'; +import { WorkingAreaComponent } from '../working-area.component'; +import { AxShape } from './axShape'; + +export class AxPreviewImageShape extends AxShape { + image: Sprite = null; + /** + * + */ + constructor(workingArea: WorkingAreaComponent) { + super(null, workingArea); + this.image = new Sprite(); + this.image.width = 32; + this.image.height = 32; + this.image.anchor.set(0.5); + this.interactive = false; + this.scale.set(1 / this.workingArea.backgroundImage.scale.x); + this.addChild(this.image); + } + /** + * 重新设置图片地址 + * @param url 图片路径 + */ + setImageUrl(url: string) { + this.image.texture = Texture.from(url); + } +} diff --git a/src/app/working-area/model/axShape.ts b/src/app/working-area/model/axShape.ts index f285c24..bd82842 100644 --- a/src/app/working-area/model/axShape.ts +++ b/src/app/working-area/model/axShape.ts @@ -1,56 +1,76 @@ +import { Constructor } from '@angular/material/core/common-behaviors/constructor'; import * as PIXI from 'pixi.js'; -// import { Point, Rectangle, Graphics } from 'pixi.js'; +import { Point, Rectangle, Graphics, Container } from 'pixi.js'; +import { WorkingAreaComponent } from '../working-area.component'; /** * 安信形状 */ -export class AxShape extends PIXI.Container { +export class AxShape extends Container { + assetData: any; + workingArea: WorkingAreaComponent; + // 可以被移动的 + moveable = true; + // 可以被选中的 + selectable = true; - points: Array = []; - title: string; - titleVisible: boolean; - g: PIXI.Graphics = new PIXI.Graphics(); - - constructor() { + constructor(assetData: any, workingArea: WorkingAreaComponent) { super(); - this.addChild(this.g); - // this.drawDashedLine(this.g, new Point(0, 0), new Point(0, 200), 0xff0000); - } - // /** - // * 绘制虚线 - // * @param g - // * @param p0 - // * @param pe - // * @param color - // * @param width - // * @param dashLen - // */ - // drawDashedLine(g: Graphics, p0: Point, pe: Point, color: number, width: number = 1, dashLen: number = 5) { - // g.lineStyle(width, color); - // const len = Math.sqrt(Math.pow(pe.x - p0.x, 2) + Math.pow(pe.y - p0.y, 2)); - // // tslint:disable-next-line: no-bitwise - // const num = ~~(len / dashLen); - // for (let i = 0; i < num; i++) { - // const x = p0.x + (pe.x - p0.x) / num * i; - // const y = p0.y + (pe.y - p0.y) / num * i; - // // tslint:disable-next-line: no-bitwise - // i & 1 ? g.lineTo(x, y) : g.moveTo(x, y); - // } - // } + this.assetData = assetData; + this.workingArea = workingArea; + this.workingArea.backgroundImage.addChild(this); + this.interactive = true; + this.buttonMode = true; + this.on('mousedown', event => { + console.log(this.assetData); + event.stopPropagation(); + if (this.selectable) { + this.workingArea.selection.selectOne(this); + } + if (this.moveable) { + event.currentTarget.data = event.data; + event.currentTarget.alpha = 0.5; + event.currentTarget.dragging = true; - paintVertexShape(rect: PIXI.Rectangle) { - // this.paintBackground(c, x, y, w, h); + event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); + event.currentTarget.dragPoint.x -= event.currentTarget.x; + event.currentTarget.dragPoint.y -= event.currentTarget.y; + } + }) + .on('mouseup', event => { + if (event.currentTarget.dragging) { + event.currentTarget.alpha = 1; + event.currentTarget.dragging = false; + event.currentTarget.data = null; + } + }) + .on('mouseupoutside', event => { + if (event.currentTarget.dragging) { + event.currentTarget.alpha = 1; + event.currentTarget.dragging = false; + event.currentTarget.data = null; + } + }) + .on('mousemove', event => { + if (event.currentTarget.dragging) { + 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; + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.workingArea.canvasData.isChange = true; + } + }) + .on('rightclick', event => { - // if (!this.outline || this.style == null || mxUtils.getValue( - // this.style, mxConstants.STYLE_BACKGROUND_OUTLINE, 0) == 0) - // { - // c.setShadow(false); - // this.paintForeground(c, x, y, w, h); - // } + }) + .on('mouseover', event => { + event.stopPropagation(); + }) + .on('mouseout', event => { + event.stopPropagation(); + }); + } + redraw(): void { + } - paintBackground(rect: PIXI.Rectangle) { } - - paintForeground(rect: PIXI.Rectangle) { } - - paintEdgeShape(pts: Array) { } } diff --git a/src/app/working-area/model/multipointIcon.ts b/src/app/working-area/model/multipointIcon.ts index d5467a7..df2da6f 100644 --- a/src/app/working-area/model/multipointIcon.ts +++ b/src/app/working-area/model/multipointIcon.ts @@ -165,9 +165,6 @@ export class MultipointIcon extends PIXI.Container { } }) .on('rightclick', event => { - }) - .on('mouseover', event => { - }); }); // // 缩放 @@ -178,6 +175,7 @@ export class MultipointIcon extends PIXI.Container { // 添加选中事件 this.iconsTilingSprite.forEach((item, index, array) => { item.interactive = true; + item.buttonMode = true; item.on('mousedown', event => { event.stopPropagation(); this.workingArea.selection.selectOne(this); @@ -245,4 +243,4 @@ export class MultipointIcon extends PIXI.Container { + '\r\n' + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue; } -} \ No newline at end of file +} diff --git a/src/app/working-area/model/paintModel.ts b/src/app/working-area/model/paintModel.ts index dc0b031..39a06ce 100644 --- a/src/app/working-area/model/paintModel.ts +++ b/src/app/working-area/model/paintModel.ts @@ -18,6 +18,10 @@ export enum PaintMode { * 水带多边形 */ Pipeline, + /** + * 结束绘制 + */ + endPaint, /** * 暂无 */ @@ -26,8 +30,4 @@ export enum PaintMode { * 暂无 */ Car, - /** - * 结束绘制 - */ - endPaint, } diff --git a/src/app/working-area/model/pipeline.ts b/src/app/working-area/model/pipeline.ts index 904732a..74045ad 100644 --- a/src/app/working-area/model/pipeline.ts +++ b/src/app/working-area/model/pipeline.ts @@ -1,14 +1,16 @@ import { WorkingAreaComponent } from '../working-area.component'; import * as PIXI from 'pixi.js'; +import { AxShape } from './axShape'; /** * 管线 */ -export class Pipeline extends PIXI.Container { +export class Pipeline extends AxShape { public line: PIXI.Graphics = new PIXI.Graphics(); - constructor(public assetData: any, private workingArea: WorkingAreaComponent) { - super(); + constructor(assetData: any, workingArea: WorkingAreaComponent) { + super(assetData, workingArea); this.name = this.assetData.Id; + this.moveable = false; this.x = this.assetData.Point.x; this.y = this.assetData.Point.y; this.workingArea.backgroundImage.addChild(this); @@ -269,9 +271,17 @@ export class Pipeline extends PIXI.Container { // } } /** - * Function: paintMarker - * - * Paints the marker. + * 画箭头 + * @param c + * @param ptX + * @param ptY + * @param nx + * @param ny + * @param size + * @param arrowWidth + * @param edgeWidth + * @param spacing + * @param initialMove */ paintMarker(c: PIXI.Graphics, ptX: number, ptY: number, nx: number, ny: number, size: number, arrowWidth: number, edgeWidth: number, spacing: number, initialMove: boolean) { @@ -292,21 +302,7 @@ export class Pipeline extends PIXI.Container { c.lineTo(ptX + orthx / widthArrowRatio + spaceX, ptY + orthy / widthArrowRatio + spaceY); c.lineTo(ptX + orthx + spaceX, ptY + orthy + spaceY); } - /** - * Function: relativeCcw - * - * Returns 1 if the given point on the right side of the segment, 0 if its - * on the segment, and -1 if the point is on the left side of the segment. - * - * Parameters: - * - * x1 - X-coordinate of the startpoint of the segment. - * y1 - Y-coordinate of the startpoint of the segment. - * x2 - X-coordinate of the endpoint of the segment. - * y2 - Y-coordinate of the endpoint of the segment. - * px - X-coordinate of the point. - * py - Y-coordinate of the point. - */ + relativeCcw(x1: number, y1: number, x2: number, y2: number, px: number, py: number) { x2 -= x1; y2 -= y1; diff --git a/src/app/working-area/model/polygonIcon.ts b/src/app/working-area/model/polygonIcon.ts index 3c604df..a7d0eb9 100644 --- a/src/app/working-area/model/polygonIcon.ts +++ b/src/app/working-area/model/polygonIcon.ts @@ -1,6 +1,7 @@ import { WorkingAreaComponent } from '../working-area.component'; import { GameMode } from './gameMode'; import * as PIXI from 'pixi.js'; +import { PaintMode } from './paintModel'; /** * 多边形 @@ -76,6 +77,7 @@ export class PolygonIcon extends PIXI.Container { // 添加圆点事件 this.pointsGraphics.forEach((item, index, array) => { item.interactive = true; + item.buttonMode = true; item.zIndex = 1; item.on('mousedown', event => { event.stopPropagation(); @@ -123,10 +125,24 @@ export class PolygonIcon extends PIXI.Container { } }) .on('rightclick', event => { - }); + }) .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; + } + }); }); // 添加选中事件 this.polygonGraphics.interactive = true; + this.polygonGraphics.buttonMode = true; this.polygonGraphics .on('mousedown', event => { event.stopPropagation(); @@ -167,12 +183,21 @@ export class PolygonIcon extends PIXI.Container { }) .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; + } }); - // // 缩放 - // this.workingArea.on('backgroundScale', data => { - // const scale = 1 / data; - // this.text.scale.set(scale); - // }); } /** * 设置点显示状态 @@ -241,4 +266,4 @@ export class PolygonIcon extends PIXI.Container { this.polygonGraphics.drawPolygon(this.getPoints()); this.polygonGraphics.endFill(); } -} \ No newline at end of file +} diff --git a/src/app/working-area/model/putCarArea.ts b/src/app/working-area/model/putCarArea.ts index 7544d04..25480b2 100644 --- a/src/app/working-area/model/putCarArea.ts +++ b/src/app/working-area/model/putCarArea.ts @@ -1,59 +1,59 @@ -import { OldFilmFilter } from 'pixi-filters'; -import { WorkingAreaComponent } from '../working-area.component'; -import { PaintMode } from './paintModel'; -import { SinglePointIcon } from './singlePointIcon'; -import * as PIXI from 'pixi.js'; +// import { OldFilmFilter } from 'pixi-filters'; +// import { WorkingAreaComponent } from '../working-area.component'; +// import { PaintMode } from './paintModel'; +// import { SinglePointIcon } from './axImageShape'; +// import * as PIXI from 'pixi.js'; -/** - * 汽车放置区域 - */ -export class PutCarArea extends PIXI.Container { - public polygonGraphics: PIXI.Graphics = new PIXI.Graphics(); - constructor(public assetData: any, private workingArea: WorkingAreaComponent) { - super(); - this.name = this.assetData.Id; - this.x = this.assetData.Point.x; - this.y = this.assetData.Point.y; - this.workingArea.backgroundImage.addChild(this); - this.sortableChildren = true; +// /** +// * 汽车放置区域 +// */ +// export class PutCarArea extends PIXI.Container { +// public polygonGraphics: PIXI.Graphics = new PIXI.Graphics(); +// constructor(public assetData: any, private workingArea: WorkingAreaComponent) { +// super(); +// this.name = this.assetData.Id; +// this.x = this.assetData.Point.x; +// this.y = this.assetData.Point.y; +// this.workingArea.backgroundImage.addChild(this); +// this.sortableChildren = true; - // 填充多边形 +// // 填充多边形 - const color: number = this.assetData.Color.substring(0, 7).replace('#', '0x'); - const angle: number = parseInt(this.assetData.Color.substring(7), 16) / 255; - this.polygonGraphics.beginFill(color, angle); - this.polygonGraphics.drawPolygon(this.assetData.MultiPoint); - this.polygonGraphics.endFill(); - this.addChild(this.polygonGraphics); - // 添加选中事件 - this.polygonGraphics.interactive = true; - this.polygonGraphics - .on('pointerdown', (event) => { - if (this.workingArea.getPaintMode() === PaintMode.Car) { - this.workingArea.selectCar.Point = - new PIXI.Point(this.workingArea.previewSinglePointIcon.x, this.workingArea.previewSinglePointIcon.y); - this.workingArea.selectCar.Angle = this.assetData.Direction; - const car = new SinglePointIcon(this.workingArea.selectCar, this.workingArea); - this.workingArea.setPaintMode(PaintMode.endPaint); - } - }) - .on('pointerup', (event) => { +// const color: number = this.assetData.Color.substring(0, 7).replace('#', '0x'); +// const angle: number = parseInt(this.assetData.Color.substring(7), 16) / 255; +// this.polygonGraphics.beginFill(color, angle); +// this.polygonGraphics.drawPolygon(this.assetData.MultiPoint); +// this.polygonGraphics.endFill(); +// this.addChild(this.polygonGraphics); +// // 添加选中事件 +// this.polygonGraphics.interactive = true; +// this.polygonGraphics +// .on('pointerdown', (event) => { +// if (this.workingArea.getPaintMode() === PaintMode.Car) { +// this.workingArea.selectCar.Point = +// new PIXI.Point(this.workingArea.previewSinglePointIcon.x, this.workingArea.previewSinglePointIcon.y); +// this.workingArea.selectCar.Angle = this.assetData.Direction; +// const car = new SinglePointIcon(this.workingArea.selectCar, this.workingArea); +// this.workingArea.setPaintMode(PaintMode.endPaint); +// } +// }) +// .on('pointerup', (event) => { - }) - .on('pointerupoutside', (event) => { +// }) +// .on('pointerupoutside', (event) => { - }) - .on('pointerover', (event) => { - this.workingArea.previewSinglePointIcon.filters = null; - this.workingArea.previewSinglePointIcon.zIndex = this.zIndex + 1; - // 设置车辆方向 - this.workingArea.previewSinglePointIcon.angle = this.assetData.Direction; - console.log(this.assetData.Name); - }) - .on('pointerout', (event) => { - this.workingArea.previewSinglePointIcon.filters = [ - new OldFilmFilter() - ]; - }); - } -} \ No newline at end of file +// }) +// .on('pointerover', (event) => { +// this.workingArea.previewSinglePointIcon.filters = null; +// this.workingArea.previewSinglePointIcon.zIndex = this.zIndex + 1; +// // 设置车辆方向 +// this.workingArea.previewSinglePointIcon.angle = this.assetData.Direction; +// console.log(this.assetData.Name); +// }) +// .on('pointerout', (event) => { +// this.workingArea.previewSinglePointIcon.filters = [ +// new OldFilmFilter() +// ]; +// }); +// } +// } diff --git a/src/app/working-area/model/singlePointIcon.ts b/src/app/working-area/model/singlePointIcon.ts deleted file mode 100644 index 935f5e5..0000000 --- a/src/app/working-area/model/singlePointIcon.ts +++ /dev/null @@ -1,373 +0,0 @@ -import { WorkingAreaComponent } from '../working-area.component'; -import * as ObjectID from 'bson-objectid'; -import { GameMode } from './gameMode'; -import { Pipeline } from './pipeline'; -import { PaintMode } from './paintModel'; -import * as PIXI from 'pixi.js'; -import { PropertyInfo } from './PropertyInfo'; -import { AxShape } from './axShape'; - -/** - * 单点图标 - */ -export class SinglePointIcon extends AxShape { - style = new PIXI.TextStyle({ - fontFamily: 'Arial', - fontSize: 18, - fontStyle: 'normal', - fontWeight: 'bold', - fill: ['#000000'], - stroke: '#ffffff', - strokeThickness: 3, - dropShadow: true, - dropShadowColor: '#000000', - dropShadowBlur: 3, - dropShadowAngle: Math.PI / 6, - dropShadowDistance: 1, - wordWrap: false, - wordWrapWidth: 100, - }); - - text = new PIXI.Text(this.assetData.Name - + '\r\n' - + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style); - - /** - * 选中圆点 - */ - selectedPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png'); - image = PIXI.Sprite.from(this.assetData.ImageUrl); - selectionBox = new PIXI.Graphics(); - 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(public assetData: any, private workingArea: WorkingAreaComponent) { - super(); - this.workingArea.backgroundImage.addChild(this); - this.x = this.assetData.Point.x; - this.y = this.assetData.Point.y; - this.name = this.assetData.Id; - - this.image.angle = this.assetData.Angle; - - this.image.x = 0; - this.image.y = 0; - this.image.width = this.assetData.Width; - this.image.height = this.assetData.Height; - // console.log(this.getBounds()); - this.image.alpha = 1; - this.image.anchor.set(0.5); - this.image.interactive = 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 => { - // if (this.assetData.CanConnect) { - // this.setSelectionBox(true, this.image); - // } - }) - .on('mouseout', event => { - // 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.addChild(this.text); - this.addChild(this.image); - this.addChild(this.selectionBox); - - if (this.assetData.CanConnect) { - // 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('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('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('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('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('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('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('mouseover', event => { - this.setSelectionBox(true, this.downRight); - }) - .on('mouseout', event => { - this.setSelectionBox(false); - }); - - this.showConnectionPoint(false); - } - } - // 设置选择框 - public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) { - if (b) { - 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(); - } - } - // 设置名称 - public setNameVisible(value: boolean, mode: GameMode) { - if (this.assetData.GameMode === mode) { - this.text.visible = value; - } - } - // 显示连接点 - public showConnectionPoint(b: boolean) { - 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; - } - paintingPipeline(x: number, y: number) { - if (this.assetData.CanConnect) { - if (this.workingArea.getPaintMode() === PaintMode.Pipeline) { - if (this.workingArea.paintingPipeline === null) { - this.workingArea.previewLineSegment.visible = true; - this.workingArea.currentClickPoint.position = - new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); - this.workingArea.paintPoints.push(new PIXI.Point(x, y)); - // const tempData = { - // Id: ObjectID.default.generate(), - // MultiPoint: JSON.parse(JSON.stringify(this.workingArea.paintPoints)), - // Point: new PIXI.Point(0, 0), - // Name: '管线', - // LinkedObjects: new Array(), - // }; - const json = JSON.parse(JSON.stringify(this.workingArea.canvasData.selectTemplateData.propertyInfos)); - const list = []; - json.forEach(element => { - const property = new PropertyInfo(element); - list.push(property); - }); - const tempData = { - TemplateId: this.workingArea.canvasData.selectTemplateData.id, - CanConnect: this.workingArea.canvasData.selectTemplateData.canConnect, - Pipelines: new Array(), - FloorId: this.workingArea.canvasData.selectStorey.id, - Angle: this.workingArea.canvasData.selectTemplateData.angle, - Color: this.workingArea.canvasData.selectTemplateData.color, - Enabled: this.workingArea.canvasData.selectTemplateData.enabled, - FillMode: this.workingArea.canvasData.selectTemplateData.fillMode, - FireElementId: this.workingArea.canvasData.selectTemplateData.fireElementId, - FixedSize: this.workingArea.canvasData.selectTemplateData.fixedSize, - Height : 32, - Width : 32, - Id: ObjectID.default.generate(), - ImageUrl: this.workingArea.canvasData.selectTemplateData.imageUrl, - InteractiveMode: this.workingArea.canvasData.selectTemplateData.interactiveMode, - MultiPoint : JSON.parse(JSON.stringify(this.workingArea.paintPoints)), - Point: new PIXI.Point(0, 0), - Name : this.workingArea.canvasData.selectTemplateData.name, - PropertyInfos: list, - Border : this.workingArea.canvasData.selectTemplateData.border, - DrawMode : this.workingArea.canvasData.selectTemplateData.drawMode, - Thickness : this.workingArea.canvasData.selectTemplateData.thickness, - IsFromBuilding : this.workingArea.canvasData.selectTemplateData.isFromBuilding, - GameMode: this.workingArea.canvasData.gameMode, - LinkedObjects: new Array(), - }; - this.workingArea.paintingPipeline = new Pipeline(tempData, this.workingArea); - // this.workingArea.paintingPipeline.assetData.LinkedObjects.push(this); - // this.assetData.Pipelines.push(this.workingArea.paintingPipeline.Id); - this.workingArea.emit('createIcon', this.workingArea.paintingPipeline); - } else { - this.workingArea.previewLineSegment.visible = false; - this.workingArea.currentClickPoint.position = - new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); - this.workingArea.paintPoints.push(new PIXI.Point(x, y)); - this.workingArea.paintingPipeline.assetData.MultiPoint = - JSON.parse(JSON.stringify(this.workingArea.paintPoints)); - // this.workingArea.paintingPipeline.assetData.LinkedObjects.push(this); - // this.assetData.Pipelines.push(this.workingArea.paintingPipeline); - this.workingArea.paintingPipeline.refresh(); - this.workingArea.initPipelineData(); - } - } - } - } - // 刷新 - public refresh() { - if (this.assetData.CanConnect) { - - } - this.image.width = this.assetData.Width; - this.image.height = this.assetData.Height; - this.image.angle = this.assetData.Angle; - this.text.text = this.assetData.Name - + '\r\n' - + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; - this.text.x = this.image.x; - this.text.y = this.image.y - this.image.height / 2; - } -} diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index afda7c6..6fcb652 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -2,21 +2,20 @@ 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, OldFilmFilter } 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'; -import { SinglePointIcon } from './model/singlePointIcon'; +import { AxImageShape } from './model/axImageShape'; import { GameMode } from './model/gameMode'; import { MultipointIcon } from './model/multipointIcon'; import { PolygonIcon } from './model/polygonIcon'; -import { PutCarArea } from './model/putCarArea'; -import { Arrows } from './model/arrows'; import { Pipeline } from './model/pipeline'; import { PaintMode } from './model/paintModel'; -import { WallSpace } from './model/wallSpace'; import { AxShape } from './model/axShape'; import { PropertyInfo } from './model/PropertyInfo'; +import { AxPreviewImageShape } from './model/axPreviewImageShape'; +import { AxArrowConnector } from './model/axArrowConnector'; @Component({ @@ -50,11 +49,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 背景图 */ - public backgroundImage: PIXI.Sprite; + public backgroundImage: PIXI.Sprite = null; /** - * 预览单点图标 + * 绘制图片形状时预览状态的图片 */ - public previewSinglePointIcon = new PIXI.Sprite(); + public previewImage: AxPreviewImageShape = null; /** * 预览线段 */ @@ -70,7 +69,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 绘画模式 */ - private paintMode: PaintMode; + private paintMode: PaintMode = PaintMode.endPaint; /** * 选择器 */ @@ -82,20 +81,19 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 绘制点集合 */ - public paintPoints: PIXI.Point[]; + public paintPoints: PIXI.Point[] = []; /** * 绘制中的管线 */ - public paintingPipeline: Pipeline; - /** - * 绘制中的箭头 - */ - public paintingArrows: Arrows = null; + public paintingPipeline: Pipeline = null; /** * 绘制中的多点图标 */ public paintingIcon: MultipointIcon; - public paintingWall: AxShape; + /** + * 绘制中的图形 + */ + public paintingShape: AxShape = null; /** * 绘制中的连线 */ @@ -159,52 +157,33 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // 按Del键删除选中的图标 if (event.keyCode === 46) { this.selection.objects.forEach(item => { - delete this.canvasData.originaleveryStoreyData.data[item.assetData.Id]; - this.backgroundImage.removeChild(this.backgroundImage.getChildByName(item.assetData.Id)); - this.canvasData.isChange = true; + 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.eventManager.addGlobalEventListener('window', 'keypress', (event: any) => { - // console.log(event.keyCode); - if (event.keyCode === 32) { - switch (this.paintMode) { - case 0: - console.log(`当前的绘制模式是：单点图标`); - break; - case 1: - console.log(`当前的绘制模式是：线段图标`); - break; - case 2: - console.log(`当前的绘制模式是：自定义多边形`); - break; - case 3: - console.log(`当前的绘制模式是：水带多边形`); - break; - case 4: - console.log(`当前的绘制模式是：暂无`); - break; - case 5: - console.log(`当前的绘制模式是：暂无`); - break; - case 6: - console.log(`当前的绘制模式是：结束绘制`); - break; - default: - break; - } - console.log('当前楼层的数据：'); - console.log(this.canvasData.originaleveryStoreyData.data); - - console.log('绘制中的管线：'); - console.log(this.paintingPipeline); - - console.log('处置预案数据：'); - console.log(this.canvasData.selectPanelPoint.Data); - } - }); } /** * 页面初始化 @@ -298,11 +277,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.app.ticker.add((delta) => { this.animator.update(); this.mousePosition = this.app.renderer.plugins.interaction.mouse.global; - if (this.backgroundImage !== undefined) { - this.previewSinglePointIcon.position = this.backgroundImage.toLocal(this.mousePosition); + // 预览图片 + if (this.previewImage !== null) { + this.previewImage.position = this.backgroundImage.toLocal(this.mousePosition); + } + + if (this.backgroundImage !== null) { this.circleShadow.position = this.backgroundImage.toLocal(this.mousePosition); this.refreshPreviewLineSegment(this.currentClickPoint.position, this.circleShadow.position); } + /** + * 显示框选 + */ if (this.rectToolGraphics.visible === true) { const init = this.initialScreenMousePos; @@ -311,20 +297,22 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.rectToolGraphics.clear(); this.rectToolGraphics.lineStyle(2, 0x00ff00, 1); this.rectToolGraphics.beginFill(0xccccf2, 0.25); - this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y); + if (final.x > init.x && final.y > init.y) { + this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y); + } else if (final.x > init.x && final.y < init.y) { + this.rectToolGraphics.drawRect(init.x, final.y, final.x - init.x, init.y - final.y); + } else if (final.x < init.x && final.y > init.y) { + this.rectToolGraphics.drawRect(final.x, init.y, init.x - final.x, final.y - init.y); + } else if (final.x < init.x && final.y < init.y) { + this.rectToolGraphics.drawRect(final.x, final.y, init.x - final.x, init.y - final.y); + } this.rectToolGraphics.endFill(); - this.rectToolGraphics.closePath(); - } - if (this.paintingArrows !== null) { - this.paintingArrows.assetData.pointB = new PIXI.Point(this.circleShadow.position.x, this.circleShadow.position.y); - this.paintingArrows.refresh(); } }); /** * 选中事件 */ this.on('select', obj => { - // this.moveIconToScreenCenter(obj); if (this.allowEdit) { if (obj instanceof MultipointIcon) { if (obj.assetData.GameMode === this.canvasData.gameMode) { @@ -353,6 +341,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV if (obj instanceof MultipointIcon) { obj.setPointVisiable(false); } else if (obj instanceof PolygonIcon) { + obj.filters = []; obj.setPointVisiable(false); } else { obj.filters = []; @@ -361,10 +350,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV obj.filters = []; } }); + /** + * 根据背景缩放事件 + */ this.on('backgroundScale', scale => { - this.previewSinglePointIcon.scale.set((0.5 / scale)); - this.backgroundImage.children.forEach(item => { - if (item instanceof SinglePointIcon) { + this.backgroundImage?.children.forEach(item => { + if (item instanceof AxImageShape) { if (item.assetData.FixedSize) { const data = 1 / scale; item.scale.set(data); @@ -378,19 +369,26 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } 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); } }); }); + /** + * 创建图标事件 + */ this.on('createIcon', obj => { if (obj.assetData.GameMode === GameMode.BasicInformation) { - // if (obj.assetData.IsFromBuilding) { - // this.canvasData.originalcompanyBuildingData.data[obj.assetData.Id] = obj.assetData; - // } else { - this.canvasData.originaleveryStoreyData.data[obj.assetData.Id] = obj.assetData; - // } + // 添加楼层数据 + this.canvasData.originaleveryStoreyData.data[obj.assetData.Id] = obj.assetData; + // 添加建筑数据 + this.canvasData.originalcompanyBuildingData.data[obj.assetData.Id] = obj.assetData; } else { - // console.log(); if (this.canvasData.selectPanelPoint.Data === undefined || this.canvasData.selectPanelPoint.Data === null) { this.canvasData.selectPanelPoint.Data = new FloorNodeData(); @@ -399,6 +397,15 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } this.canvasData.isChange = true; }); + + // todo 创建一个无限大的grid + const cell = new PIXI.Graphics(); + cell.lineStyle(1, 0xff0000); + cell.beginFill(0x0000ff); + cell.drawRect(0, 0, 500, 500); + + cell.endFill(); + this.app.stage.addChild(cell); } /** * 重置画布 @@ -413,7 +420,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV */ public setNameVisible(value: boolean, mode: GameMode): void { this.backgroundImage?.children.forEach(item => { - if (item instanceof SinglePointIcon) { + if (item instanceof AxImageShape) { item.setNameVisible(value, mode); } else if (item instanceof MultipointIcon) { item.setNameVisible(value, mode); @@ -428,12 +435,15 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV */ public refreshIcon(id: string): void { const icon = this.backgroundImage.children.find(item => item.name === id); - if (icon instanceof SinglePointIcon) { + console.log(icon); + if (icon instanceof AxImageShape) { icon.refresh(); } else if (icon instanceof MultipointIcon) { icon.refresh(); } else if (icon instanceof PolygonIcon) { icon.refresh(); + } else if (icon instanceof AxArrowConnector) { + icon.redraw(); } } /** @@ -442,8 +452,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV */ public setIconScale(value: number): void { this.backgroundImage.children.forEach(item => { - if (item instanceof SinglePointIcon) { - item.scale.set(value); + if (item instanceof AxImageShape) { + console.log(item.image.scale); + item.image.scale.set(value); } else if (item instanceof MultipointIcon) { } else if (item instanceof PolygonIcon) { @@ -471,46 +482,46 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.setPaintMode(PaintMode.endPaint); this.resetCanvas(); this.destroyBackgroundImage(); - await this.createBackgroundImage(this.canvasData.selectStorey.imageUrl); - - // this.refreshBackgroundImage(); - // this.versionChecking(); - + 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); + } + /** + * 创建楼层图形 + */ + private createFloorShape() { const floorData = this.canvasData.originaleveryStoreyData.data; - // const buildingData = this.canvasData.originalcompanyBuildingData.data; - // const floor = this.canvasData.selectStorey; - // // key=>属性名 data[key]=>属性值 Object.keys(floorData).forEach((key) => { - // console.log(floorData[key]); switch (floorData[key].InteractiveMode) { case 0: - const singleIcon = new SinglePointIcon(floorData[key], this); + const singleIcon = new AxImageShape(floorData[key], this); + singleIcon.moveable = this.allowEdit && this.canvasData.gameMode === singleIcon.assetData.GameMode; break; - case 1: + case 1: const icon = new MultipointIcon(floorData[key], this); break; - case 2: + case 2: const polygonIcon = new PolygonIcon(floorData[key], this); break; + case 3: + if (floorData[key].Name === '水带') { + const pipeline = new Pipeline(floorData[key], this); + } else { + const wall = new AxArrowConnector(floorData[key], this); + } + break; } }); - // Object.keys(buildingData).forEach((key) => { - // if (buildingData[key].FloorId === floor.id) { - // switch (buildingData[key].InteractiveMode) { - // case 0: - // const singleIcon = new SinglePointIcon(buildingData[key], this); - // break; - // case 1: - // const icon = new MultipointIcon(buildingData[key], this); - // break; - // case 2: - // const polygonIcon = new PolygonIcon(buildingData[key], this); - // break; - // } - // } - // }); + } + private createWorkNode() { // 加载处置节点数据 const nodeData = this.canvasData.selectPanelPoint.Data; if (nodeData !== undefined && nodeData !== null) { @@ -518,23 +529,22 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV Object.keys(nodeData[key]).forEach((tempKey) => { switch (nodeData[key][tempKey].InteractiveMode) { case 0: - const singleIcon = new SinglePointIcon(nodeData[key][tempKey], this); + const singleIcon = new AxImageShape(nodeData[key][tempKey], this); + singleIcon.moveable = this.allowEdit && this.canvasData.gameMode === singleIcon.assetData.GameMode; break; case 1: - if (nodeData[key][tempKey].Name === '水带') { - const pipeline = new Pipeline(nodeData[key][tempKey], this); - } else { const icon = new MultipointIcon(nodeData[key][tempKey], this); - } - break; - case 2: + break; + case 2: const polygonIcon = new PolygonIcon(nodeData[key][tempKey], this); break; + case 3: + const pipeline = new Pipeline(nodeData[key][tempKey], this); + break; } }); }); } - this.emit('backgroundScale', this.backgroundImage.scale.x); } /** * @@ -614,7 +624,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV 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; @@ -667,7 +677,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV ImageUrl: this.canvasData.selectTemplateData.imageUrl, InteractiveMode: this.canvasData.selectTemplateData.interactiveMode, MultiPoint : null, - Point: new PIXI.Point(this.previewSinglePointIcon.x, this.previewSinglePointIcon.y), + Point: new PIXI.Point(this.previewImage.x, this.previewImage.y), Name : this.canvasData.selectTemplateData.name, PropertyInfos: list, Border : this.canvasData.selectTemplateData.border, @@ -676,7 +686,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV IsFromBuilding : this.canvasData.selectTemplateData.isFromBuilding, GameMode : this.canvasData.gameMode }; - const singleIcon = new SinglePointIcon(assetData, this); + const singleIcon = new AxImageShape(assetData, this); this.emit('createIcon', singleIcon); this.emit('backgroundScale', this.backgroundImage.scale.x); break; @@ -761,78 +771,60 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // this.paintingIcon = new PolygonIcon(this.paintPoints, this); break; case PaintMode.Pipeline: - - if (this.paintingPipeline !== null) { + if (this.canvasData.selectTemplateData.name === '水带') { + if (this.paintingPipeline !== null) { + this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); + this.paintingPipeline.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints)); + this.paintingPipeline.refresh(); + } + } else { + this.previewLineSegment.visible = true; this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); - this.paintingPipeline.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints)); - this.paintingPipeline.refresh(); - } - // this.emit('backgroundScale', this.backgroundImage.scale.x); - break; - case PaintMode.Arrows: - if (this.paintingArrows === null) { - const data = { - Id: ObjectID.default.generate(), - name: 'string', - point: new PIXI.Point(this.circleShadow.x, this.circleShadow.y), - pointA: new PIXI.Point(this.circleShadow.x, this.circleShadow.y), - pointB: new PIXI.Point(this.circleShadow.x, this.circleShadow.y), - source: 'assets/images/进攻方向.png', - }; - this.paintingArrows = new Arrows(data, this); - } else { - this.paintingArrows.ready = true; - this.paintingArrows = null; - this.paintMode = PaintMode.endPaint; - } - break; - case PaintMode.Car: - // this.previewLineSegment.visible = true; - // this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); - // this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); - - // if (this.paintPoints.length >= 2) { - // this.enterPaintEndButton.position = this.circleShadow.position; - // this.enterPaintEndButton.visible = true; - // } - - // if (this.paintingWall !== null) { - // this.backgroundImage.removeChild(this.paintingWall); - // } - // const jsonObject1 = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos)); - // const propertyList1 = []; - // jsonObject1.forEach(element => { - // const property = new PropertyInfo(element); - // propertyList1.push(property); - // }); - // const assetData11 = { - // TemplateId: this.canvasData.selectTemplateData.id, - // FloorId: this.canvasData.selectStorey.id, - // Angle: this.canvasData.selectTemplateData.angle, - // Color: this.canvasData.selectTemplateData.color, - // Enabled: this.canvasData.selectTemplateData.enabled, - // FillMode: this.canvasData.selectTemplateData.fillMode, - // FireElementId: this.canvasData.selectTemplateData.fireElementId, - // FixedSize: this.canvasData.selectTemplateData.fixedSize, - // Height: 32, - // Width: 32, - // Id: ObjectID.default.generate(), - // ImageUrl: this.canvasData.selectTemplateData.imageUrl, - // InteractiveMode: this.canvasData.selectTemplateData.interactiveMode, - // MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)), - // Point: new PIXI.Point(0, 0), - // Name: this.canvasData.selectTemplateData.name, - // PropertyInfos: propertyList1, - // Border: this.canvasData.selectTemplateData.border, - // DrawMode: this.canvasData.selectTemplateData.drawMode, - // Thickness: this.canvasData.selectTemplateData.thickness, - // IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding, - // GameMode: this.canvasData.gameMode - // }; - // this.paintingWall = new WallSpace(assetData11, this); - // this.emit('backgroundScale', this.backgroundImage.scale.x); + if (this.paintPoints.length >= 2) { + this.enterPaintEndButton.position = this.circleShadow.position; + this.enterPaintEndButton.visible = true; + } + if (this.paintingShape === null) { + const jsonObject = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos)); + const propertyList = []; + jsonObject.forEach(element => { + const property = new PropertyInfo(element); + propertyList.push(property); + }); + const assetData2 = { + TemplateId: this.canvasData.selectTemplateData.id, + FloorId: this.canvasData.selectStorey.id, + Angle: this.canvasData.selectTemplateData.angle, + Color: this.canvasData.selectTemplateData.color, + Enabled: this.canvasData.selectTemplateData.enabled, + FillMode: this.canvasData.selectTemplateData.fillMode, + FireElementId: this.canvasData.selectTemplateData.fireElementId, + FixedSize: this.canvasData.selectTemplateData.fixedSize, + Height: 32, + Width: 32, + Id: ObjectID.default.generate(), + ImageUrl: this.canvasData.selectTemplateData.imageUrl, + InteractiveMode: this.canvasData.selectTemplateData.interactiveMode, + MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)), + Point: new PIXI.Point(0, 0), + Name: this.canvasData.selectTemplateData.name, + PropertyInfos: propertyList, + Border: this.canvasData.selectTemplateData.border, + DrawMode: this.canvasData.selectTemplateData.drawMode, + Thickness: this.canvasData.selectTemplateData.thickness, + IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding, + GameMode: this.canvasData.gameMode + }; + this.paintingShape = new AxArrowConnector(assetData2, this); + } else { + this.paintingShape.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints)); + this.paintingShape.redraw(); + } + } + this.emit('backgroundScale', this.backgroundImage.scale.x); break; } } else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) { @@ -849,11 +841,15 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } if (this.rectToolGraphics.visible === true) { this.backgroundImage.children.forEach(item => { - if (item instanceof SinglePointIcon + if ( item instanceof AxImageShape || item instanceof MultipointIcon - || item instanceof PolygonIcon) { - if (this.rectToolGraphics.getLocalBounds().contains(item.x, item.y)) { - this.selection.select(item); + || item instanceof PolygonIcon + || item instanceof AxArrowConnector) { + // 判断2个矩形是否相交 + const rect1 = this.rectToolGraphics.getBounds(); + const rect2 = item.getBounds(); + if (this.isOverlap(rect1, rect2)) { + this.selection.select(item); } } }); @@ -884,19 +880,38 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.setPaintMode(PaintMode.endPaint); }) .on('pointerover', (event) => { - this.previewSinglePointIcon.filters = null; + if (this.previewImage !== null + && this.paintMode === PaintMode.singlePointIcon) { + this.previewImage.visible = true; + } }) .on('pointerout', (event) => { - this.previewSinglePointIcon.filters = null; + if (this.previewImage !== null + && this.paintMode === PaintMode.singlePointIcon) { + this.previewImage.visible = false; + } }); this.app.stage.addChild(this.backgroundImage); - this.createPreviewSinglePointIcon(); + this.createPreviewImage(); this.createPreviewLineSegment(); this.createCircleShadow(); this.createEnterPaintEndButton(); this.backgroundImage.addChild(this.paintingLine); } + public isOverlap(rect1, rect2):boolean { + const l1 = { x: rect1.x, y: rect1.y } + const r1 = { x: rect1.x + rect1.width, y: rect1.y + rect1.height } + const l2 = { x: rect2.x, y: rect2.y } + const r2 = { x: rect2.x + rect2.width, y: rect2.y + rect2.height } + if ( + l1.x > r2.x || + l2.x > r1.x || + l1.y > r2.y || + l2.y > r1.y + ) return false + return true + } /** * 刷新背景图 @@ -905,9 +920,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV if (!this.canvasData.selectStorey.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.backgroundImage.texture = PIXI.Texture.from(this.canvasData.selectStorey.imageUrl); + // this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle; + // this.backgroundImage.visible = true; + this.refresh(); } } /** @@ -921,8 +937,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * @param scale 缩放系数 */ public setBackgroundScale(scale: number): void { - this.backgroundImage.scale.set(scale); - this.emit('backgroundScale', this.backgroundImage.scale.x); + this.backgroundImage?.scale.set(scale); + this.emit('backgroundScale', this.backgroundImage?.scale.x); } /** * 设置背景图角度 @@ -934,22 +950,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 创建预览单点图标 */ - private createPreviewSinglePointIcon(): void { - this.previewSinglePointIcon = PIXI.Sprite.from('assets/images/noImg.png'); - this.previewSinglePointIcon.width = 32; - this.previewSinglePointIcon.height = 32; - this.previewSinglePointIcon.alpha = 1; - this.previewSinglePointIcon.anchor.set(0.5); - this.previewSinglePointIcon.visible = false; - this.backgroundImage.addChild(this.previewSinglePointIcon); - } - /** - * 改变预览单点图标 - * @param uri 图片地址 - */ - private changePreviewSinglePointIcon(uri: string): void { - this.previewSinglePointIcon.texture = PIXI.Texture.from(uri); - this.previewSinglePointIcon.visible = true; + private createPreviewImage(): void { + // if (this.previewSinglePointIcon === null) { + // this.previewSinglePointIcon = PIXI.Sprite.from(this.canvasData.selectTemplateData.imageUrl); + // this.previewSinglePointIcon.width = this.canvasData.selectTemplateData.width; + // this.previewSinglePointIcon.height = this.canvasData.selectTemplateData.height; + // this.previewSinglePointIcon.anchor.set(0.5); + // this.previewSinglePointIcon.interactive = false; + // this.backgroundImage.addChild(this.previewSinglePointIcon); + // this.previewSinglePointIcon.scale.set(1 / this.backgroundImage.scale.x); + // } + this.previewImage = new AxPreviewImageShape(this); + this.previewImage.visible = false; } /** * 创建预览线段 @@ -969,7 +981,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV */ private refreshPreviewLineSegment(pointA: PIXI.Point, pointB: PIXI.Point) { this.previewLineSegment.clear(); - this.previewLineSegment.lineStyle(1, 0xffd900, 1); + this.previewLineSegment.lineStyle(5, 0x00ff00, 1); this.previewLineSegment.moveTo(pointA.x, pointA.y); this.previewLineSegment.lineTo(pointB.x, pointB.y ); } @@ -986,7 +998,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } showConnectionPoint(b: boolean) { this.backgroundImage?.children.forEach(item => { - if (item instanceof SinglePointIcon) { + if (item instanceof AxImageShape) { if (item.assetData.CanConnect) { item.showConnectionPoint(b); } @@ -997,27 +1009,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 开始绘制 */ public beginPaint() { - if (this.canvasData.selectTemplateData.name === '水带') { - this.showConnectionPoint(true); - this.setPaintMode(PaintMode.Pipeline); - return; - } - switch (this.canvasData.selectTemplateData.interactiveMode) { - case 0: - this.setPaintMode(PaintMode.singlePointIcon); - break; - case 1: - this.setPaintMode(PaintMode.lineIcon); - break; - case 2: - this.setPaintMode(PaintMode.polygonIcon); - break; - case 3: - if (this.canvasData.selectTemplateData.name) { - this.setPaintMode(PaintMode.Pipeline); - } - break; - } + this.selection.deselectAll(); + this.setPaintMode(PaintMode.endPaint); + this.setPaintMode(this.canvasData.selectTemplateData.interactiveMode); } /** * 初始化管线数据 @@ -1034,18 +1028,14 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * @param mode 状态 */ public setPaintMode(mode: PaintMode) { - if (this.paintMode === mode) { return; } - this.paintMode = mode; - if (this.paintMode !== PaintMode.Pipeline) { - this.showConnectionPoint(false); + if (this.paintMode === mode) { + return; } + this.paintMode = mode; switch (this.paintMode) { - case PaintMode.Pipeline: - - break; case PaintMode.singlePointIcon: - this.previewSinglePointIcon.visible = false; - this.changePreviewSinglePointIcon(this.canvasData.selectTemplateData.imageUrl); + this.previewImage.visible = true; + this.previewImage.setImageUrl(this.canvasData.selectTemplateData.imageUrl); break; case PaintMode.lineIcon: this.circleShadow.visible = false; @@ -1054,7 +1044,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV if (this.paintingIcon !== null) { this.backgroundImage.removeChild(this.paintingIcon); } - this.previewSinglePointIcon.texture = PIXI.Texture.from(this.canvasData.selectTemplateData.imageUrl); + this.previewImage.setImageUrl(this.canvasData.selectTemplateData.imageUrl); this.circleShadow.visible = true; break; case PaintMode.polygonIcon: @@ -1065,7 +1055,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.paintingLine.clear(); this.circleShadow.visible = true; break; + case PaintMode.Pipeline: + if (this.canvasData.selectTemplateData.name==='水带') { + this.showConnectionPoint(true); + } else { + + } + break; case PaintMode.endPaint: + this.showConnectionPoint(false); + if (this.previewImage !== null) { + this.previewImage.visible = false; + } // 重置组件状态 if ( this.paintingIcon !== undefined && this.paintingIcon !== null) { @@ -1076,6 +1077,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV && this.paintingPipeline !== null) { this.backgroundImage.removeChild(this.paintingPipeline); } + if (this.paintingShape !== null) { + this.backgroundImage.removeChild(this.paintingShape); + this.paintingShape = null; + } + this.enterPaintEndButton.visible = false; this.paintingLine.clear(); this.resetData(); break; @@ -1093,10 +1099,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 重置 */ public resetData() { - this.previewSinglePointIcon.filters = null; - this.previewSinglePointIcon.visible = false; - this.previewSinglePointIcon.angle = 0; - this.initPipelineData(); // this.circleShadow.visible = false; @@ -1108,7 +1110,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV private enterPaint(): void { this.previewLineSegment.visible = false; this.enterPaintEndButton.visible = false; + console.log(this.paintMode); switch (this.paintMode) { + case PaintMode.singlePointIcon: + break; case PaintMode.lineIcon: if (this.paintPoints.length >= 2) { this.emit('createIcon', this.paintingIcon); @@ -1152,6 +1157,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.emit('createIcon', polygonIcon); } break; + case PaintMode.Pipeline: + if (this.canvasData.selectTemplateData.name !== '水带') { + this.emit('createIcon', this.paintingShape); + this.paintingShape = null; + } + break; } this.paintPoints.splice(0, this.paintPoints.length); this.emit('backgroundScale', this.backgroundImage.scale.x); @@ -1185,7 +1196,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // } switch (item.InteractiveMode) { case PaintMode.singlePointIcon: - const singleIcon = new SinglePointIcon(newData, this); + const singleIcon = new AxImageShape(newData, this); break; case PaintMode.lineIcon: const lineIcon = new MultipointIcon(newData, this); @@ -1193,9 +1204,15 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV case PaintMode.polygonIcon: const polygonIcon = new PolygonIcon(newData, this); break; + case PaintMode.Pipeline: + if (item.Name !== '水带') { + const wall = new AxArrowConnector(newData, this); + } + break; } this.selection.select(this.backgroundImage.getChildByName(newData.Id)); }); + this.emit('backgroundScale', this.backgroundImage.scale.x); } }