diff --git a/src/app/canvas-share-data.service.ts b/src/app/canvas-share-data.service.ts index 2c62212..1d74555 100644 --- a/src/app/canvas-share-data.service.ts +++ b/src/app/canvas-share-data.service.ts @@ -1,6 +1,6 @@ import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; -import {ReplaySubject} from 'rxjs'; +import { ReplaySubject } from 'rxjs'; import { Observable } from 'rxjs'; import { GameMode } from './working-area/model/gameMode'; @@ -8,7 +8,7 @@ import { GameMode } from './working-area/model/gameMode'; providedIn: 'root' }) export class CanvasShareDataService { - constructor(private http:HttpClient) { } + constructor(private http: HttpClient) { } private _sendMessage: ReplaySubject = new ReplaySubject(1); examDisposalNodesData; // 考生进入时获取当前试卷的处置节点 @@ -18,22 +18,22 @@ export class CanvasShareDataService { - isChange:boolean = false; // 数据 是否改动 + isChange: boolean = false; // 数据 是否改动 - selectTemplateData:any; // 选择当前 模板数据 + selectTemplateData: any; // 选择当前 模板数据 // 总平面图/建筑 楼层 - selectStorey: any = {area: '', details: ''}; // 选择当前 楼层 数据 + selectStorey: any = { area: '', details: '' }; // 选择当前 楼层 数据 originalcompanyBuildingData: any; // 单位/建筑 数据 originaleveryStoreyData: any; // 总平面图/楼层/区域 楼层数据 // 总平面图/建筑 楼层 // 处置 节点 allDisposalNode: any = []; // 所有 处置节点 - allNodeMarkers: any = { highlightMarkers:{}, markers:{} }; // 灾情 标签信息 + allNodeMarkers: any = { highlightMarkers: {}, markers: {} }; // 灾情 标签信息 selectPanelPoint: DisposalNodeData = new DisposalNodeData(); // 当前数据节点 - selectPanelPointBaseData: any = {description: '', notes: '', weather: '', airTemperature: '', windDirection: '', windScale: ''}; // 当前 数据节点 对应 父级节点 - customizeDisposalNode:any; // 新建 自定义数据节点 底图+名称 + selectPanelPointBaseData: any = { description: '', notes: '', weather: '', airTemperature: '', windDirection: '', windScale: '' }; // 当前 数据节点 对应 父级节点 + customizeDisposalNode: any; // 新建 自定义数据节点 底图+名称 // 处置 节点 /** @@ -42,36 +42,38 @@ export class CanvasShareDataService { gameMode: GameMode = GameMode.BasicInformation; facilityAssetsName = new Map([ - [ '消防水池', '消防水池'], - [ '疏散楼梯', '疏散楼梯'], - [ '消防电梯', '消防电梯'], - [ '避难区域', '避难区域'], - [ '安全出口', '安全出口'], - [ '地上消火栓', '室外消火栓' ], - [ '地下消火栓', '室外消火栓' ], - [ '室内消火栓', '室内消火栓' ], - [ '供水管网', '供水管网'], - [ '湿式自动喷淋系统', '湿式自动喷淋系统'], - [ '水幕系统', '水幕系统' ], - [ '消防泵房', '消防泵房'], - [ '水泵接合器（地上）', '水泵接合器'], - [ '水泵接合器（地下）', '水泵接合器'], - [ '水泵接合器（墙壁）', '水泵接合器'], - [ '消防水泵房', '消防水泵房'], - [ '箱式消火栓', '箱式消火栓'], - [ '固定水炮', '消防水炮' ], - [ '消防水罐', '储水罐'], - [ '消防水罐2', '储水罐'], - [ '卧式水罐', '储水罐'], - [ '消防泵', '水泵' ], - [ '泡沫泵', '水泵' ], - [ '泡沫泵房', '泡沫站'], - [ '泡沫栓', '泡沫栓' ], - [ '泡沫枪', '泡沫枪'], - [ '泡沫发生器', '泡沫发生器' ], - [ '消防管网', '消防管网'], - [ '泡沫管网', '消防管网'], - [ 'DCS控制室', 'DCS控制室'] + ['消防水池', '消防水池'], + ['疏散楼梯', '疏散楼梯'], + ['消防电梯', '消防电梯'], + ['避难区域', '避难区域'], + ['安全出口', '安全出口'], + ['地上消火栓', '室外消火栓'], + ['地下消火栓', '室外消火栓'], + ['室内消火栓', '室内消火栓'], + ['供水管网', '供水管网'], + ['湿式自动喷淋系统', '湿式自动喷淋系统'], + ['水幕系统', '水幕系统'], + ['消防泵房', '消防泵房'], + ['水泵接合器（地上）', '水泵接合器'], + ['水泵接合器（地下）', '水泵接合器'], + ['水泵接合器（墙壁）', '水泵接合器'], + ['水泵接合器（喷淋）', '水泵接合器'], + ['水泵接合器（消防）', '水泵接合器'], + ['消防水泵房', '消防水泵房'], + ['箱式消火栓', '箱式消火栓'], + ['固定水炮', '消防水炮'], + ['消防水罐', '储水罐'], + ['消防水罐2', '储水罐'], + ['卧式水罐', '储水罐'], + ['消防泵', '水泵'], + ['泡沫泵', '水泵'], + ['泡沫泵房', '泡沫站'], + ['泡沫栓', '泡沫栓'], + ['泡沫枪', '泡沫枪'], + ['泡沫发生器', '泡沫发生器'], + ['消防管网', '消防管网'], + ['泡沫管网', '消防管网'], + ['DCS控制室', 'DCS控制室'] ]); /** * 向其他组件发送信息 * @@ -79,15 +81,15 @@ export class CanvasShareDataService { public sendMessage(message: any) { this._sendMessage.next(message); } - public getMessage(): Observable { + public getMessage(): Observable { return this._sendMessage.asObservable(); } //分段上传 - sectionUpload (companyId:string,file) { - let data = {filename: file.name} - return new Promise ((resolve, reject)=>{ - this.http.post(`/api/NewMultipartUpload/PlanPlatform/${companyId}/DisposalNode`,{},{params:data}).subscribe(async (data:any)=>{ //初始化分段上传 + sectionUpload(companyId: string, file) { + let data = { filename: file.name } + return new Promise((resolve, reject) => { + this.http.post(`/api/NewMultipartUpload/PlanPlatform/${companyId}/DisposalNode`, {}, { params: data }).subscribe(async (data: any) => { //初始化分段上传 let objectName = data.objectName let uploadId = data.uploadId let PartNumberETag = []; //每次返回需要保存的信息 @@ -95,30 +97,30 @@ export class CanvasShareDataService { let fileSize = file.size || null //上传文件的总大小 let shardSize = 5 * 1024 * 1024 //5MB一个分片 let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段 - - for (let i = 0;i < allSlice;i++) { //循环分段上传 - let start = i * shardSize //切割文件开始位置 - let end = Math.min(fileSize, start + shardSize); //切割文件结束位置 - let formData = new FormData() - formData.append("file",file.slice(start, end)) - - //同步写法实现异步调用 - let result = await new Promise((resolve, reject) => { - // await 需要后面返回一个 promise 对象 - this.http.post(`/api/MultipartUpload/PlanPlatform/${objectName}?uploadId=${uploadId}&partNumber=${i+1}`,formData).subscribe((data:any)=>{ - let msg = { "partNumber":data.partNumber || null, "eTag": data.eTag || null } - resolve(msg) // 调用 promise 内置方法处理成功 - }) - }); - PartNumberETag.push(result) - - if (PartNumberETag.length === allSlice) { //分块上传完成 - let data = PartNumberETag - let paramsData = {uploadId:uploadId} - this.http.post(`/api/CompleteMultipartUpload/PlanPlatform/${objectName}`,data,{params:paramsData}).subscribe(data=>{ - resolve(objectName) - }) - } + + for (let i = 0; i < allSlice; i++) { //循环分段上传 + let start = i * shardSize //切割文件开始位置 + let end = Math.min(fileSize, start + shardSize); //切割文件结束位置 + let formData = new FormData() + formData.append("file", file.slice(start, end)) + + //同步写法实现异步调用 + let result = await new Promise((resolve, reject) => { + // await 需要后面返回一个 promise 对象 + this.http.post(`/api/MultipartUpload/PlanPlatform/${objectName}?uploadId=${uploadId}&partNumber=${i + 1}`, formData).subscribe((data: any) => { + let msg = { "partNumber": data.partNumber || null, "eTag": data.eTag || null } + resolve(msg) // 调用 promise 内置方法处理成功 + }) + }); + PartNumberETag.push(result) + + if (PartNumberETag.length === allSlice) { //分块上传完成 + let data = PartNumberETag + let paramsData = { uploadId: uploadId } + this.http.post(`/api/CompleteMultipartUpload/PlanPlatform/${objectName}`, data, { params: paramsData }).subscribe(data => { + resolve(objectName) + }) + } }//for循环 //分块 处理 @@ -127,7 +129,7 @@ export class CanvasShareDataService { } // 处置节点 筛选出 匹配数据 匹配不到 return undefined - findDisposalNode(parentId: string= null, name: string= null) { + findDisposalNode(parentId: string = null, name: string = null) { if (parentId && name) { // 匹配 父id, name const returnData = this.allDisposalNode.find(item => item.parentId === parentId && item.name === name); return returnData; @@ -154,7 +156,7 @@ export class CanvasShareDataService { /** * 删除建筑数据中当前楼层的数据 */ - public deleteBuildingDataByCurrentFloorData():void { + public deleteBuildingDataByCurrentFloorData(): void { Object.keys(this.originaleveryStoreyData.data).forEach((key) => { // 删除建筑数据 delete this.originalcompanyBuildingData.data[key]; @@ -294,7 +296,22 @@ export class CanvasShareDataService { facility.Id = ''; facility.Name = this.facilityAssetsName.get(item.Name); facility.AssetName = item.Name; - facility.PropertyInfos = item.PropertyInfos; + facility.PropertyInfos = []; + item.PropertyInfos.forEach(e => { + var p: PropertyInfo = new PropertyInfo(); + p.Enabled = e.Enabled; + p.Order = e.Order; + p.PhysicalUnit = e.PhysicalUnit; + p.PropertyName = e.PropertyName; + p.PropertyType = e.PropertyType; + p.PropertyValue = e.PropertyValue.toString(); + p.Required = e.Required; + p.RuleName = e.RuleName; + p.RuleValue = e.RuleValue; + p.Tag = e.Tag; + p.Visible = e.Visible; + facility.PropertyInfos.push(p); + }); facility.SitePlanId = item.FloorId; list.push(facility); } @@ -315,7 +332,22 @@ export class CanvasShareDataService { facility.Id = ''; facility.Name = this.facilityAssetsName.get(item.Name); facility.AssetName = item.Name; - facility.PropertyInfos = item.PropertyInfos; + facility.PropertyInfos = []; + item.PropertyInfos.forEach(e => { + var p: PropertyInfo = new PropertyInfo(); + p.Enabled = e.Enabled; + p.Order = e.Order; + p.PhysicalUnit = e.PhysicalUnit; + p.PropertyName = e.PropertyName; + p.PropertyType = e.PropertyType; + p.PropertyValue = e.PropertyValue.toString(); + p.Required = e.Required; + p.RuleName = e.RuleName; + p.RuleValue = e.RuleValue; + p.Tag = e.Tag; + p.Visible = e.Visible; + facility.PropertyInfos.push(p); + }); facility.BuildingAreaId = item.FloorId; list.push(facility); } @@ -364,7 +396,7 @@ export class CompanyAdjoinInfo { * 建筑毗邻 */ export class BuildingAdjoinInfo { - public BuildingId: string; + public BuildingId: string; public Id: string; public Name: string; public Direction: number; @@ -406,7 +438,7 @@ export class CompanyFacilityAssetInfo { public Id: string; public Name: string; public AssetName: string; - public PropertyInfos: string; + public PropertyInfos: PropertyInfo[]; public AssetId: string; public CompanyId: string; public SitePlanId: string; @@ -418,7 +450,7 @@ export class BuildingFacilityAssetInfo { public Id: string; public Name: string; public AssetName: string; - public PropertyInfos: string; + public PropertyInfos: PropertyInfo[]; public AssetId: string; public BuildingId: string; public BuildingAreaId: string; @@ -558,62 +590,62 @@ export class DisposalNode { * 方向。 */ export enum Direction { - /** - * 东 - */ - East, - /** - * 西 - */ - West, - /** - * 南 - */ - South, - /** - * 北 - */ - North, - /** - * 东南 - */ - Southeast, - /** - * 西南 - */ - Southwest, - /** - * 东北 - */ - Northeast, - /** - * 西北 - */ - Northwest + /** + * 东 + */ + East, + /** + * 西 + */ + West, + /** + * 南 + */ + South, + /** + * 北 + */ + North, + /** + * 东南 + */ + Southeast, + /** + * 西南 + */ + Southwest, + /** + * 东北 + */ + Northeast, + /** + * 西北 + */ + Northwest } /** * 风力等级 */ export enum WindScale { - WS0, - WS1, - WS2, - WS3, - WS4, - WS5, - WS6, - WS7, - WS8, - WS9, - WS10, - WS11, - WS12, - WS13, - WS14, - WS15, - WS16, - WS17, - WS18 + WS0, + WS1, + WS2, + WS3, + WS4, + WS5, + WS6, + WS7, + WS8, + WS9, + WS10, + WS11, + WS12, + WS13, + WS14, + WS15, + WS16, + WS17, + WS18 } /** * 处置节点数据 @@ -635,9 +667,9 @@ export class DisposalNodeData { * 图片地址 */ public BackgroundImageUrl: string; - /** - * 图片地址 - */ + /** + * 图片地址 + */ public BackgroundImageAngle: number; /** * 处置节点编号 @@ -669,105 +701,105 @@ export class FloorNodeData { * 素材数据 */ export class AssetData { - /// - /// 模板编号 - /// + /// + /// 模板编号 + /// public TemplateId: string; - /// - /// 编号 - /// + /// + /// 编号 + /// public Id: string; - /// - /// 名称 - /// + /// + /// 名称 + /// public Name: string; - /// - /// 角度 - /// + /// + /// 角度 + /// public Angle: number; - /// - /// 颜色 - /// + /// + /// 颜色 + /// public Color: string; - /// - /// 坐标 - /// + /// + /// 坐标 + /// public Point: PIXI.Point; - /// - /// 宽度 - /// + /// + /// 宽度 + /// public Width: number; - /// - /// 高度 - /// + /// + /// 高度 + /// public Height: number; - /// - /// 是否启用 - /// + /// + /// 是否启用 + /// public Enabled: boolean; - /// - /// 填充方式 - /// + /// + /// 填充方式 + /// public FillMode: FillMode; - /// - /// 图片地址 - /// + /// + /// 图片地址 + /// public ImageUrl: string; - /// - /// 是否固定大小 - /// - public FixedSize: boolean; - /// - /// 点路径 - /// + /// + /// 是否固定大小 + /// + public FixedSize: boolean; + /// + /// 点路径 + /// public MultiPoint: PIXI.Point[]; - /// - /// 建筑ID - /// + /// + /// 建筑ID + /// public BuildingId: string; - /// - /// 单位ID - /// + /// + /// 单位ID + /// public CompanyId: string; - /// - /// 楼层编号 - /// + /// + /// 楼层编号 + /// public FloorId: string; - /// - /// 楼层名称 - /// + /// + /// 楼层名称 + /// public FloorName: string; - /// - /// 消防要素编号 - /// + /// + /// 消防要素编号 + /// public FireElementId: string; - /// - /// 属性列表 - /// + /// + /// 属性列表 + /// public PropertyInfos: PropertyInfo[]; - /// - /// 交互方式 - /// + /// + /// 交互方式 + /// public InteractiveMode: InteractiveMode; - /// - /// 是否来自建筑 - /// + /// + /// 是否来自建筑 + /// public IsFromBuilding: boolean; - /// - /// 渲染方式。 - /// + /// + /// 渲染方式。 + /// public DrawMode: ImageType; - /// - /// 9宫格边框数值。 - /// + /// + /// 9宫格边框数值。 + /// public Border: Border; - /// - /// 厚度。 - /// + /// + /// 厚度。 + /// public Thickness: number; - /// - /// 素材类型 - /// + /// + /// 素材类型 + /// public GameMode: GameMode; } /** @@ -808,9 +840,9 @@ export enum ImageType { */ export class Border { - public x: number; + public x: number; - public y: number; + public y: number; public z: number; diff --git a/src/app/working-area/model/axImageShape.ts b/src/app/working-area/model/axImageShape.ts index 2a91bd1..44a1729 100644 --- a/src/app/working-area/model/axImageShape.ts +++ b/src/app/working-area/model/axImageShape.ts @@ -5,8 +5,10 @@ import { PaintMode } from './paintModel'; import * as PIXI from 'pixi.js'; import { PropertyInfo } from './PropertyInfo'; import { AxShape } from './axShape'; -import { Sprite } from 'pixi.js'; +import { Sprite, Point, Rectangle } from 'pixi.js'; import { AxArrowConnector } from './axArrowConnector'; +import { AxMessageSystem } from './axMessageSystem'; +import { EVENT_IMAGE_RESIZE } from './events'; /** * 安信图片形状 @@ -31,6 +33,7 @@ export class AxImageShape extends AxShape { wordWrapWidth: 100, }); + text = new PIXI.Text(this.assetData.Name + '\r\n' + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style); @@ -71,56 +74,177 @@ export class AxImageShape extends AxShape { this.addChild(this.image); this.addChild(this.selectionBox); - //// + // 是否拖动 + var pointerDrag = false; // up-left this.upLeft = new PIXI.Sprite(this.pointTexture); + this.upLeft.cursor = 'nwse-resize'; this.upLeft.anchor.set(0.5); this.addChild(this.upLeft); this.upLeft.interactive = true; + this.upLeft.on('pointerdown', event => { + pointerDrag = true; + this.image.anchor.set(1); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + event.stopPropagation(); + }); + this.upLeft.on('pointermove', event => { + // 移动时调整形状大小，然后重绘边框 + // 检查右下角距离鼠标的位置， + if (pointerDrag) { + var pos = this.toLocal(event.data.global); + var dX = Math.abs(pos.x - this.image.x); + var dY = Math.abs(pos.y - this.image.y); + var result = dX > dY ? dX : dY; + this.assetData.Width = Math.abs(result); + this.assetData.Height = Math.abs(result); + this.refresh(); + AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); + } + + }); + this.upLeft.on('pointerup', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + } + }); + this.upLeft.on('pointerupoutside', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + } + }); this.upLeft.visible = false; // up-right this.upRight = new PIXI.Sprite(this.pointTexture); + this.upRight.cursor = 'nesw-resize'; this.upRight.anchor.set(0.5); this.addChild(this.upRight); this.upRight.interactive = true; + this.upRight.on('pointerdown', event => { + pointerDrag = true; + this.image.anchor.set(0, 1); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + event.stopPropagation(); + }); + this.upRight.on('pointermove', event => { + // 移动时调整形状大小，然后重绘边框 + // 检查右下角距离鼠标的位置， + if (pointerDrag) { + var pos = this.toLocal(event.data.global); + var dX = Math.abs(pos.x - this.image.x); + var dY = Math.abs(pos.y - this.image.y); + var result = dX > dY ? dX : dY; + this.assetData.Width = Math.abs(result); + this.assetData.Height = Math.abs(result); + this.refresh(); + AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); + } + + }); + this.upRight.on('pointerup', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + } + }); + this.upRight.on('pointerupoutside', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + } + }); this.upRight.visible = false; // down-left this.downLeft = new PIXI.Sprite(this.pointTexture); + this.downLeft.cursor = 'nesw-resize'; this.downLeft.anchor.set(0.5); this.addChild(this.downLeft); this.downLeft.interactive = true; + this.downLeft.on('pointerdown', event => { + pointerDrag = true; + this.image.anchor.set(1, 0); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + event.stopPropagation(); + }); + this.downLeft.on('pointermove', event => { + // 移动时调整形状大小，然后重绘边框 + // 检查右下角距离鼠标的位置， + if (pointerDrag) { + var pos = this.toLocal(event.data.global); + var dX = Math.abs(pos.x - this.image.x); + var dY = Math.abs(pos.y - this.image.y); + var result = dX > dY ? dX : dY; + this.assetData.Width = Math.abs(result); + this.assetData.Height = Math.abs(result); + this.refresh(); + AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); + } + + }); + this.downLeft.on('pointerup', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + } + }); + this.downLeft.on('pointerupoutside', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + } + }); this.downLeft.visible = false; // down-right this.downRight = new PIXI.Sprite(this.pointTexture); + this.downRight.cursor = 'nwse-resize'; this.downRight.anchor.set(0.5); this.addChild(this.downRight); this.downRight.interactive = true; + this.downRight.on('pointerdown', event => { + pointerDrag = true; + this.image.anchor.set(0, 0); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + event.stopPropagation(); + }); + this.downRight.on('pointermove', event => { + // 移动时调整形状大小，然后重绘边框 + // 检查右下角距离鼠标的位置， + if (pointerDrag) { + var pos = this.toLocal(event.data.global); + var dX = Math.abs(pos.x - this.image.x); + var dY = Math.abs(pos.y - this.image.y); + var result = dX > dY ? dX : dY; + this.assetData.Width = Math.abs(result); + this.assetData.Height = Math.abs(result); + this.refresh(); + AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); + } + + }); + this.downRight.on('pointerup', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + } + }); + this.downRight.on('pointerupoutside', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + } + }); this.downRight.visible = false; //// - - - - // 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('pointerdown', event => { - // event.stopPropagation(); - // // this.paintingPipeline(this.x, this.y); - // }) - // .on('pointerover', event => { - // this.setSelectionBox(true, this.connectPoint); - // }) - // .on('pointerout', event => { - // this.setSelectionBox(false); - // }); - // // this.showConnectionPoint(false); - // } this.setItemScale(1 / this.workingArea.backgroundImage.scale.x); } // // 设置选择框 @@ -193,79 +317,41 @@ export class AxImageShape extends AxShape { this.downRight.scale.set(scale); } } - // paintingPipeline(x: number, y: number) { - // if (this.assetData.CanConnect) { - // if (this.workingArea.getPaintMode() === PaintMode.Pipeline) { - // if (this.workingArea.paintingShape === 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), - // 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); - // this.workingArea.emit('createIcon', this.workingArea.paintingShape); - // } 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.paintingShape.assetData.MultiPoint = - // JSON.parse(JSON.stringify(this.workingArea.paintPoints)); - // this.workingArea.paintingShape.assetData.LinkedObjects.push(this.assetData.Id); - // this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id); - // this.workingArea.paintingShape.redraw(); - // 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; + + if (this.image.anchor.x == 0) { + if (this.image.anchor.y == 0) { + this.text.x = this.image.x + this.image.width / 2; + this.text.y = this.image.y; + } else if (this.image.anchor.y == 0.5) { + + } else if (this.image.anchor.y == 1) { + this.text.x = this.image.x + this.image.width / 2; + this.text.y = this.image.y - this.image.height; + } + + } else if (this.image.anchor.x == 0.5) { + this.text.x = this.image.x; + this.text.y = this.image.y - this.image.height / 2; + } else if (this.image.anchor.x == 1) { + if (this.image.anchor.y == 0) { + this.text.x = this.image.x - this.image.width / 2; + this.text.y = this.image.y; + } else if (this.image.anchor.y == 0.5) { + + } else if (this.image.anchor.y == 1) { + this.text.x = this.image.x - this.image.width / 2; + this.text.y = this.image.y - this.image.height; + } + } this.angle = -this.workingArea.backgroundImage.angle; + this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); } } diff --git a/src/app/working-area/model/axMessageSystem.ts b/src/app/working-area/model/axMessageSystem.ts index 1451f9c..fac6c6b 100644 --- a/src/app/working-area/model/axMessageSystem.ts +++ b/src/app/working-area/model/axMessageSystem.ts @@ -5,14 +5,14 @@ export class AxMessageSystem { /** 监听数组 */ private static listeners = {}; - /** + /** * 注册事件 * @param name 事件名称 * @param callback 回调函数 * @param context 上下文 */ - public static addListener(name: string, callback: () => void, context: any) { - const observers: Observer[] = AxMessageSystem.listeners[name]; + public static addListener(name: string, callback: Function, context: any) { + let observers: Observer[] = AxMessageSystem.listeners[name]; if (!observers) { AxMessageSystem.listeners[name] = []; } @@ -25,18 +25,18 @@ export class AxMessageSystem { * @param callback 回调函数 * @param context 上下文 */ - public static removeListener(name: string, callback: () => void, context: any) { - const observers: Observer[] = AxMessageSystem.listeners[name]; - if (!observers) { return; } - const length = observers.length; + public static removeListener(name: string, callback: Function, context: any) { + let observers: Observer[] = AxMessageSystem.listeners[name]; + if (!observers) return; + let length = observers.length; for (let i = 0; i < length; i++) { - const observer = observers[i]; + let observer = observers[i]; if (observer.compar(context)) { observers.splice(i, 1); break; } } - if (observers.length === 0) { + if (observers.length == 0) { delete AxMessageSystem.listeners[name]; } } @@ -46,11 +46,11 @@ export class AxMessageSystem { * @param name 事件名称 */ public static send(name: string, ...args: any[]) { - const observers: Observer[] = AxMessageSystem.listeners[name]; - if (!observers) { return; } - const length = observers.length; + let observers: Observer[] = AxMessageSystem.listeners[name]; + if (!observers) return; + let length = observers.length; for (let i = 0; i < length; i++) { - const observer = observers[i]; + let observer = observers[i]; observer.notify(name, ...args); } } @@ -61,12 +61,12 @@ export class AxMessageSystem { */ class Observer { /** 回调函数 */ - private callback: () => void; + private callback: Function = null; /** 上下文 */ private context: any = null; - constructor(callback: () => void, context: any) { - const self = this; + constructor(callback: Function, context: any) { + let self = this; self.callback = callback; self.context = context; } @@ -76,7 +76,7 @@ class Observer { * @param args 不定参数 */ notify(...args: any[]): void { - const self = this; + let self = this; self.callback.call(self.context, ...args); } @@ -85,6 +85,6 @@ class Observer { * @param context 上下文 */ compar(context: any): boolean { - return context === this.context; + return context == this.context; } } diff --git a/src/app/working-area/model/axShape.ts b/src/app/working-area/model/axShape.ts index 5c6ce51..85ab02c 100644 --- a/src/app/working-area/model/axShape.ts +++ b/src/app/working-area/model/axShape.ts @@ -32,7 +32,7 @@ export class AxShape extends Graphics { this.workingArea.backgroundImage.addChild(this); this.zIndex = 200; this.interactive = true; - this.buttonMode = true; + // this.buttonMode = true; this .on('pointerdown', event => { event.stopPropagation(); @@ -88,10 +88,10 @@ export class AxShape extends Graphics { public hideBorder() { this.border.visible = false; } - /** - * 设置点显示状态 - * @param value 显示状态 - */ + /** + * 设置点显示状态 + * @param value 显示状态 + */ public setPointVisiable(value: boolean) { } @@ -112,7 +112,7 @@ export class AxShape extends Graphics { const spaceLength = scale * 1; const lineLenght = rect.width + 0.5 + 0.5; - const dashLength = scale * ( lineLenght + spaceLength - Math.floor((rect.width + rect.height) / 2 / 4.1)) / Math.floor((rect.width + rect.height) / 2 / 4.1); + const dashLength = scale * (lineLenght + spaceLength - Math.floor((rect.width + rect.height) / 2 / 4.1)) / Math.floor((rect.width + rect.height) / 2 / 4.1); this.drawDash(this.border, p1.x - 0.5 * scale, p1.y, p2.x + 0.5 * scale, p2.y, dashLength, spaceLength); this.drawDash(this.border, p2.x, p2.y - 0.5 * scale, p3.x, p3.y + 0.5 * scale, dashLength, spaceLength); this.drawDash(this.border, p3.x + 0.5 * scale, p3.y, p4.x - 0.5 * scale, p4.y, dashLength, spaceLength); @@ -126,36 +126,36 @@ export class AxShape extends Graphics { this.border.lineTo(p4.x, p4.y); this.border.closePath(); // this.border.endFill(); - } - // 画虚线 - drawDash(target, x1, y1, x2, y2, dashLength = 5, spaceLength = 1) { - const x = x2 - x1; - const y = y2 - y1; - let hyp = Math.sqrt((x) * (x) + (y) * (y)); - const units = hyp / (dashLength + spaceLength); - const dashSpaceRatio = dashLength / (dashLength + spaceLength); - const dashX = (x / units) * dashSpaceRatio; - const spaceX = (x / units) - dashX; - const dashY = (y / units) * dashSpaceRatio; - const spaceY = (y / units) - dashY; + } + // 画虚线 + drawDash(target, x1, y1, x2, y2, dashLength = 5, spaceLength = 1) { + const x = x2 - x1; + const y = y2 - y1; + let hyp = Math.sqrt((x) * (x) + (y) * (y)); + const units = hyp / (dashLength + spaceLength); + const dashSpaceRatio = dashLength / (dashLength + spaceLength); + const dashX = (x / units) * dashSpaceRatio; + const spaceX = (x / units) - dashX; + const dashY = (y / units) * dashSpaceRatio; + const spaceY = (y / units) - dashY; - target.moveTo(x1, y1); + target.moveTo(x1, y1); - while (hyp > 0) { - x1 += dashX; - y1 += dashY; - hyp -= dashLength; - if (hyp < 0) { - x1 = x2; - y1 = y2; + 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.lineTo(x1, y1); - x1 += spaceX; - y1 += spaceY; - target.moveTo(x1, y1); - hyp -= spaceLength; - } - target.moveTo(x2, y2); + target.moveTo(x2, y2); } // 计算多边形重心 public calculatePolygonGravityCenter(points: PIXI.Point[]) { diff --git a/src/app/working-area/model/configuration.ts b/src/app/working-area/model/configuration.ts index bf0507a..f26898b 100644 --- a/src/app/working-area/model/configuration.ts +++ b/src/app/working-area/model/configuration.ts @@ -45,7 +45,7 @@ export const VIEW_RIGHT = 'rightview'; export const VIEW_LEFT = 'leftview'; export const VIEW_ISOMETRY = 'isometryview'; -export enum WallTypes{ +export enum WallTypes { STRAIGHT, CURVED } @@ -77,7 +77,8 @@ export var config = { directionalDrag: true, boundsX: 500, boundsY: 500, - viewBounds: 20000 }; + viewBounds: 60000 +}; export var wallInformation = { exterior: false, interior: false, midline: true, labels: true, exteriorlabel: 'e:', interiorlabel: 'i:', midlinelabel: 'm:' }; @@ -99,7 +100,7 @@ export class Configuration extends EventDispatcher { static getInstance() { if (this.instance === undefined - || this.instance === null) { + || this.instance === null) { this.instance = new Configuration(); } return this.instance; @@ -115,7 +116,7 @@ export class Configuration extends EventDispatcher { // this.data[key] = value; config[key] = value; // if(key !== viewBounds){ - Configuration.getInstance().dispatchEvent({ type: EVENT_CHANGED, item: Configuration.getInstance(), 'key': key, 'value': value }); + Configuration.getInstance().dispatchEvent({ type: EVENT_CHANGED, item: Configuration.getInstance(), 'key': key, 'value': value }); // } } diff --git a/src/app/working-area/model/events.ts b/src/app/working-area/model/events.ts index d7da978..d06de6a 100644 --- a/src/app/working-area/model/events.ts +++ b/src/app/working-area/model/events.ts @@ -67,3 +67,5 @@ export const EVENT_MODIFY_TEXTURE_ATTRIBUTE = 'MODIFY_TEXTURE_ATTRIBUTE_EVENT'; export const EVENT_PARAMETRIC_GEOMETRY_UPATED = 'PARAMETRIC_GEOMETRY_UPATED_EVENT'; export const EVENT_SELECTION_CHANGED = 'selectionChanged'; + +export const EVENT_IMAGE_RESIZE = 'imageResize'; diff --git a/src/app/working-area/model/grid2D.ts b/src/app/working-area/model/grid2D.ts index 9683a49..7a5c17c 100644 --- a/src/app/working-area/model/grid2D.ts +++ b/src/app/working-area/model/grid2D.ts @@ -33,8 +33,8 @@ export class Grid2D extends Graphics { let spacing = Dimensioning.cmToPixel(spacingCMS); let totalLines = gridSize / spacing; let halfSize = gridSize * 0.5; - let linewidth = Math.max(1.0 / this.gridScale, 1.0) * 1/this.canvas.scale.x;// 增加缩放系数 - let highlightLineWidth = Math.max(1 / this.gridScale, 1.0) * 1/this.canvas.scale.x;// 增加缩放系数 + let linewidth = Math.max(1.0 / this.gridScale, 1.0) * 1 / this.canvas.scale.x;// 增加缩放系数 + let highlightLineWidth = Math.max(1 / this.gridScale, 1.0) * 1 / this.canvas.scale.x;// 增加缩放系数 let normalColor = 0xE0E0E0; let highlightColor = 0xD0D0D0; const cellSize = 5; @@ -52,10 +52,10 @@ export class Grid2D extends Graphics { this.endFill(); this.beginFill(0xFF0000, 1.0); - this.drawCircle(-halfSize, -halfSize,5); - this.drawCircle(halfSize, -halfSize,5); - this.drawCircle(halfSize, halfSize,5); - this.drawCircle(-halfSize, halfSize,5); + this.drawCircle(-halfSize, -halfSize, 5); + this.drawCircle(halfSize, -halfSize, 5); + this.drawCircle(halfSize, halfSize, 5); + this.drawCircle(-halfSize, halfSize, 5); this.drawCircle(0, 0, 5); this.endFill(); } @@ -80,8 +80,8 @@ export class Grid2D extends Graphics { let spacing = Dimensioning.cmToPixel(spacingCMS); let halfSize = gridSize * 0.5; return { - x: Math.floor((x - -halfSize) / spacing), - y: Math.floor((y - -halfSize) / spacing), + x: Math.floor((x - -halfSize) / spacing), + y: Math.floor((y - -halfSize) / spacing), }; } } diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 12e5771..f3b4165 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -21,7 +21,9 @@ import { AxSelection } from './model/axSelection'; import { AxMessageSystem } from './model/axMessageSystem'; import { Grid2D } from './model/grid2D'; import { Viewport } from 'pixi-viewport'; -import { EVENT_SELECTION_CHANGED } from './model/events'; +import { EVENT_IMAGE_RESIZE, EVENT_SELECTION_CHANGED } from './model/events'; +import { Dimensioning } from './model/dimensioning'; +import { Configuration, viewBounds } from './model/configuration'; @Component({ @@ -164,8 +166,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 重大调整-主版本号增加 * 日期变更-日期版本号增加 */ - // todo shift绘制垂直线段 - public VERSION = '1.3.0.20210220_beta'; + public VERSION = '1.4.0.20210302_rc'; /** * 数据初始化 */ @@ -208,7 +209,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.camera2D.destroy(); this.app.destroy(); } - public setMulitSelect(b: boolean) { if (b) { this.isCtrlKeyClicked = true; @@ -366,11 +366,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 创建2D相机 */ private createViewport(): void { + var gridSize = Dimensioning.cmToPixel(Configuration.getNumericValue(viewBounds) * 1); this.camera2D = new Viewport({ screenWidth: this.app.view.width, screenHeight: this.app.view.height, - worldWidth: 20000, - worldHeight: 20000, + worldWidth: gridSize, + worldHeight: gridSize, interaction: this.app.renderer.plugins.interaction, }); this.camera2D.pivot.set(0.5); @@ -379,10 +380,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.camera2D .clamp({ - left: -10000, - right: 10000, - top: -10000, - bottom: 10000, + left: -gridSize / 2, + right: gridSize / 2, + top: -gridSize / 2, + bottom: gridSize / 2, }) .drag() .pinch()