diff --git a/src/app/canvas-share-data.service.ts b/src/app/canvas-share-data.service.ts index 2c62212..dbc257c 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,36 @@ export class CanvasShareDataService { gameMode: GameMode = GameMode.BasicInformation; facilityAssetsName = new Map([ - [ '消防水池', '消防水池'], - [ '疏散楼梯', '疏散楼梯'], - [ '消防电梯', '消防电梯'], - [ '避难区域', '避难区域'], - [ '安全出口', '安全出口'], - [ '地上消火栓', '室外消火栓' ], - [ '地下消火栓', '室外消火栓' ], - [ '室内消火栓', '室内消火栓' ], - [ '供水管网', '供水管网'], - [ '湿式自动喷淋系统', '湿式自动喷淋系统'], - [ '水幕系统', '水幕系统' ], - [ '消防泵房', '消防泵房'], - [ '水泵接合器（地上）', '水泵接合器'], - [ '水泵接合器（地下）', '水泵接合器'], - [ '水泵接合器（墙壁）', '水泵接合器'], - [ '消防水泵房', '消防水泵房'], - [ '箱式消火栓', '箱式消火栓'], - [ '固定水炮', '消防水炮' ], - [ '消防水罐', '储水罐'], - [ '消防水罐2', '储水罐'], - [ '卧式水罐', '储水罐'], - [ '消防泵', '水泵' ], - [ '泡沫泵', '水泵' ], - [ '泡沫泵房', '泡沫站'], - [ '泡沫栓', '泡沫栓' ], - [ '泡沫枪', '泡沫枪'], - [ '泡沫发生器', '泡沫发生器' ], - [ '消防管网', '消防管网'], - [ '泡沫管网', '消防管网'], - [ 'DCS控制室', 'DCS控制室'] + ['消防水池', '消防水池'], + ['疏散楼梯', '疏散楼梯'], + ['消防电梯', '消防电梯'], + ['避难区域', '避难区域'], + ['安全出口', '安全出口'], + ['地上消火栓', '室外消火栓'], + ['地下消火栓', '室外消火栓'], + ['室内消火栓', '室内消火栓'], + ['供水管网', '供水管网'], + ['湿式自动喷淋系统', '湿式自动喷淋系统'], + ['水幕系统', '水幕系统'], + ['消防泵房', '消防泵房'], + ['水泵接合器（地上）', '水泵接合器'], + ['水泵接合器（地下）', '水泵接合器'], + ['水泵接合器（墙壁）', '水泵接合器'], + ['消防水泵房', '消防水泵房'], + ['箱式消火栓', '箱式消火栓'], + ['固定水炮', '消防水炮'], + ['消防水罐', '储水罐'], + ['消防水罐2', '储水罐'], + ['卧式水罐', '储水罐'], + ['消防泵', '水泵'], + ['泡沫泵', '水泵'], + ['泡沫泵房', '泡沫站'], + ['泡沫栓', '泡沫栓'], + ['泡沫枪', '泡沫枪'], + ['泡沫发生器', '泡沫发生器'], + ['消防管网', '消防管网'], + ['泡沫管网', '消防管网'], + ['DCS控制室', 'DCS控制室'] ]); /** * 向其他组件发送信息 * @@ -79,15 +79,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 +95,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 +127,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 +154,7 @@ export class CanvasShareDataService { /** * 删除建筑数据中当前楼层的数据 */ - public deleteBuildingDataByCurrentFloorData():void { + public deleteBuildingDataByCurrentFloorData(): void { Object.keys(this.originaleveryStoreyData.data).forEach((key) => { // 删除建筑数据 delete this.originalcompanyBuildingData.data[key]; @@ -294,7 +294,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 +330,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 +394,7 @@ export class CompanyAdjoinInfo { * 建筑毗邻 */ export class BuildingAdjoinInfo { - public BuildingId: string; + public BuildingId: string; public Id: string; public Name: string; public Direction: number; @@ -406,7 +436,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 +448,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 +588,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 +665,9 @@ export class DisposalNodeData { * 图片地址 */ public BackgroundImageUrl: string; - /** - * 图片地址 - */ + /** + * 图片地址 + */ public BackgroundImageAngle: number; /** * 处置节点编号 @@ -669,105 +699,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 +838,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/key-unit/basicinfo/basicinfo.component.ts b/src/app/key-unit/basicinfo/basicinfo.component.ts index 1cb5e90..f390739 100644 --- a/src/app/key-unit/basicinfo/basicinfo.component.ts +++ b/src/app/key-unit/basicinfo/basicinfo.component.ts @@ -2152,7 +2152,7 @@ export class BasicinfoComponent implements OnInit { this.snackBar.open('请检查输入数据是否有误','确定',config); }) } - if(item.buildtype == "地铁类"){ + if(item.buildtype.indexOf('地铁') != -1){ let newObj = _.cloneDeep(item) delete newObj.username delete newObj.name diff --git a/src/app/ui/collection-tools-building/collection-tools.component.html b/src/app/ui/collection-tools-building/collection-tools.component.html index 2a4a2b1..d253c0f 100644 --- a/src/app/ui/collection-tools-building/collection-tools.component.html +++ b/src/app/ui/collection-tools-building/collection-tools.component.html @@ -12,14 +12,21 @@ 基本信息名称 visibility + + + 多选 + + + 显示图例 + - + 适应缩放 diff --git a/src/app/ui/collection-tools-building/collection-tools.component.ts b/src/app/ui/collection-tools-building/collection-tools.component.ts index 071ddff..aeddad8 100644 --- a/src/app/ui/collection-tools-building/collection-tools.component.ts +++ b/src/app/ui/collection-tools-building/collection-tools.component.ts @@ -831,6 +831,11 @@ export class CollectionToolsBuildingComponent implements OnInit { this.renovateTreeData(false) } + isMultiSelect:boolean = false; // 多选/单选 切换 + changeMultiSelect (e) { this.canvas.setMulitSelect(this.isMultiSelect) } + isShowLegend:boolean = true; //图例是否显示 + changeLegend (e) { this.canvasData.selectPanelPoint.BackgroundImageUrl? null : this.canvas.setLegendVisible(this.isShowLegend) } + basicInfo:boolean = true //基本信息名称显隐 wantToWork:boolean = true //想定作业名称显隐 //点击基本信息名称 @@ -1478,6 +1483,7 @@ export class CollectionToolsBuildingComponent implements OnInit { isRefresh? await this.canvas.refresh() : null this.canvas.setNameVisible(this.basicInfo,0) this.canvas.setNameVisible(this.wantToWork,1) + this.canvas.setLegendVisible(this.isShowLegend) //图例显隐 isRefresh? this.canvasData.isChange = false : null //服务中 数据是否改动 改为false isRefresh? this.isShowProperty = true : null isRefresh? this.isShowAttribute = true : null @@ -1507,7 +1513,6 @@ export class CollectionToolsBuildingComponent implements OnInit { //陈鹏飞↓↓↓ //陈鹏飞↓↓↓ params = {companyId: sessionStorage.getItem('companyId')} - // params = {companyId: this.route.snapshot.queryParams.id} allFireElements:any = []; //当前 单位/建筑 下的消防要素 isShowAttribute:boolean = true; //属性栏 是否显示 默认数据 diff --git a/src/app/ui/collection-tools-plan/collection-tools.component.html b/src/app/ui/collection-tools-plan/collection-tools.component.html index c2c2e9f..0fdc889 100644 --- a/src/app/ui/collection-tools-plan/collection-tools.component.html +++ b/src/app/ui/collection-tools-plan/collection-tools.component.html @@ -8,18 +8,20 @@ list - + + 多选 + + + 显示图例 + - + 适应缩放 diff --git a/src/app/ui/collection-tools-plan/collection-tools.component.ts b/src/app/ui/collection-tools-plan/collection-tools.component.ts index 1baff01..528ba81 100644 --- a/src/app/ui/collection-tools-plan/collection-tools.component.ts +++ b/src/app/ui/collection-tools-plan/collection-tools.component.ts @@ -834,6 +834,11 @@ export class CollectionToolsPlanComponent implements OnInit { // this.renovateTreeData(false) } + isMultiSelect:boolean = false; // 多选/单选 切换 + changeMultiSelect (e) { this.canvas.setMulitSelect(this.isMultiSelect) } + isShowLegend:boolean = true; //图例是否显示 + changeLegend (e) { this.canvasData.selectPanelPoint.BackgroundImageUrl? null : this.canvas.setLegendVisible(this.isShowLegend) } + basicInfo:boolean = true //基本信息名称显隐 wantToWork:boolean = true //想定作业名称显隐 //点击基本信息名称 @@ -1489,6 +1494,7 @@ export class CollectionToolsPlanComponent implements OnInit { isRefresh? await this.canvas.refresh() : null this.canvas.setNameVisible(this.basicInfo,0) this.canvas.setNameVisible(this.wantToWork,1) + this.canvas.setLegendVisible(this.isShowLegend) //图例显隐 isRefresh? this.canvasData.isChange = false : null //服务中 数据是否改动 改为false isRefresh? this.isShowProperty = true : null isRefresh? this.isShowAttribute = true : null @@ -1517,7 +1523,6 @@ export class CollectionToolsPlanComponent implements OnInit { //陈鹏飞↓↓↓ //陈鹏飞↓↓↓ params = {companyId: sessionStorage.getItem('companyId')} - // params = {companyId: this.route.snapshot.queryParams.id} allFireElements:any = []; //当前 单位/建筑 下的消防要素 isShowAttribute:boolean = true; //属性栏 是否显示 默认数据 diff --git a/src/app/ui/collection-tools/collection-tools.component.html b/src/app/ui/collection-tools/collection-tools.component.html index 27b1d13..921ba69 100644 --- a/src/app/ui/collection-tools/collection-tools.component.html +++ b/src/app/ui/collection-tools/collection-tools.component.html @@ -7,6 +7,7 @@ + 基本信息名称visibility @@ -20,10 +21,10 @@ 显示图例 + - diff --git a/src/app/working-area/model/axImageShape.ts b/src/app/working-area/model/axImageShape.ts index 2a91bd1..5225df6 100644 --- a/src/app/working-area/model/axImageShape.ts +++ b/src/app/working-area/model/axImageShape.ts @@ -5,7 +5,7 @@ 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'; /** @@ -31,6 +31,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); @@ -72,26 +73,74 @@ export class AxImageShape extends AxShape { this.addChild(this.selectionBox); //// + var leftUpPos = new Point(0, 0); + var upLeftDrag = false; + var leftDownPos = new Point(0, 0); + var rightUpPos = new Point(0, 0); + var rightDownPos = new Point(0, 0); // 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 => { + + upLeftDrag = true; + var imageRect = new Rectangle(this.image.x, this.image.y, this.image.width, this.image.height); + console.log('图片的边界大小', imageRect); + rightDownPos = new Point(imageRect.right, imageRect.bottom); + + 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 (upLeftDrag) { + leftUpPos = event.data.getLocalPosition(this.upLeft.parent); + console.log('鼠标点击位置的坐标', leftUpPos); + + this.assetData.Width = Math.abs(leftUpPos.x); + this.assetData.Height = Math.abs(leftUpPos.x); + this.refresh(); + } + + }); + this.upLeft.on('pointerup', event => { + if (upLeftDrag) { + upLeftDrag = 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 (upLeftDrag) { + upLeftDrag = 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.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.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; @@ -193,71 +242,8 @@ 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; @@ -267,5 +253,6 @@ export class AxImageShape extends AxShape { this.text.x = this.image.x; this.text.y = this.image.y - this.image.height / 2; this.angle = -this.workingArea.backgroundImage.angle; + this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); } } 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/working-area.component.ts b/src/app/working-area/working-area.component.ts index fae03ae..12e5771 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -90,7 +90,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV */ public selection: AxSelection = new AxSelection(); /** - * 当前鼠标的点 + * 当前鼠标点击的点 */ public currentClickPoint: PIXI.Graphics = new PIXI.Graphics(); /** @@ -151,6 +151,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV public animationTime; // 是否按下Ctrl键 isCtrlKeyClicked = false; + // 是否开启多点连线垂直绘制 + isDrawVerticalLine = false; /** * 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta * Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。 @@ -162,7 +164,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 重大调整-主版本号增加 * 日期变更-日期版本号增加 */ - public VERSION = '1.2.2.20210220_beta'; + // todo shift绘制垂直线段 + public VERSION = '1.3.0.20210220_beta'; /** * 数据初始化 */ @@ -171,12 +174,31 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV PIXI.utils.skipHello(); this.sayHello(); this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => { - + // if (event.keyCode === 16) { + // this.isDrawVerticalLine = true; + // } + switch (event.keyCode) { + case 16: + this.isDrawVerticalLine = true; + break; + default: + break; + } }); this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => { - // 按Del键删除选中的图标 - if (event.keyCode === 46) { - this.deleteSelectedShape(); + // // 按Del键删除选中的图标 + // if (event.keyCode === 46) { + // this.deleteSelectedShape(); + // } + switch (event.keyCode) { + case 16: // shift + this.isDrawVerticalLine = false; + break; + case 46: // delete + this.deleteSelectedShape(); + break; + default: + break; } }); } @@ -774,8 +796,27 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV break; case PaintMode.lineIcon: 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)); + + var point = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + if (this.isDrawVerticalLine && this.paintPoints.length !== 0) { + // 起点距离终点水平距离 + const dh = Math.abs(point.x - this.currentClickPoint.x); + // 起点距离终点垂直距离 + const dv = Math.abs(point.y - this.currentClickPoint.y); + if (dh >= dv) { + // 绘制水平线 + point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y); + + } else { + // 绘制垂直线 + point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y); + } + this.currentClickPoint.position = new PIXI.Point(point.x, point.y); + } else { + this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + } + // 添加数据 + this.paintPoints.push(point); if (this.paintPoints.length >= 2) { this.enterPaintEndButton.position = this.circleShadow.position; @@ -832,8 +873,28 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV break; case PaintMode.polygonIcon: 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.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + // this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); + var point = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + if (this.isDrawVerticalLine && this.paintPoints.length !== 0) { + // 起点距离终点水平距离 + const dh = Math.abs(point.x - this.currentClickPoint.x); + // 起点距离终点垂直距离 + const dv = Math.abs(point.y - this.currentClickPoint.y); + if (dh >= dv) { + // 绘制水平线 + point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y); + + } else { + // 绘制垂直线 + point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y); + } + this.currentClickPoint.position = new PIXI.Point(point.x, point.y); + } else { + this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + } + // 添加数据 + this.paintPoints.push(point); if (this.paintPoints.length === 1) { this.enterPaintEndButton.position = this.circleShadow.position; } else if (this.paintPoints.length >= 3) { @@ -868,8 +929,28 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.enterPaintEndButton.position = this.circleShadow.position; this.enterPaintEndButton.visible = true; this.enterPaintEndButton.zIndex = this.backgroundImage.children.length; - 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.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + // this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); + var point = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + if (this.isDrawVerticalLine && this.paintPoints.length !== 0) { + // 起点距离终点水平距离 + const dh = Math.abs(point.x - this.currentClickPoint.x); + // 起点距离终点垂直距离 + const dv = Math.abs(point.y - this.currentClickPoint.y); + if (dh >= dv) { + // 绘制水平线 + point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y); + + } else { + // 绘制垂直线 + point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y); + } + this.currentClickPoint.position = new PIXI.Point(point.x, point.y); + } else { + this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + } + // 添加数据 + this.paintPoints.push(point); if (this.paintPoints.length < 2) { return; } @@ -1207,10 +1288,29 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * @param pointB 点B */ private refreshPreviewLineSegment(pointA: PIXI.Point, pointB: PIXI.Point) { + const ps: PIXI.Point = pointA; + let pe: PIXI.Point = pointB; + if (this.isDrawVerticalLine) { + // 起点距离终点水平距离 + const dh = Math.abs(pointB.x - pointA.x); + // 起点距离终点垂直距离 + const dv = Math.abs(pointB.y - pointA.y); + if (dh >= dv) { + // 绘制水平线 + pe = new PIXI.Point(pointB.x, pointA.y); + + } else { + // 绘制垂直线 + pe = new PIXI.Point(pointA.x, pointB.y); + } + } + this.previewLineSegment.clear(); this.previewLineSegment.lineStyle(1 / this.backgroundImage.scale.x, 0x00ff00, 1); - this.previewLineSegment.moveTo(pointA.x, pointA.y); - this.previewLineSegment.lineTo(pointB.x, pointB.y); + // this.previewLineSegment.moveTo(pointA.y, pointA.y); + // this.previewLineSegment.lineTo(pointB.x, pointB.y); + this.previewLineSegment.moveTo(ps.x, ps.y); + this.previewLineSegment.lineTo(pe.x, pe.y); } /** * 创建半径图标影子 diff --git a/src/assets/images/enterPaintButton.png b/src/assets/images/enterPaintButton.png index e6b99b7..e5abb92 100644 Binary files a/src/assets/images/enterPaintButton.png and b/src/assets/images/enterPaintButton.png differ diff --git a/src/assets/images/箭头.png b/src/assets/images/箭头.png new file mode 100644 index 0000000..78c5a09 Binary files /dev/null and b/src/assets/images/箭头.png differ diff --git a/src/assets/images/箭头2.png b/src/assets/images/箭头2.png new file mode 100644 index 0000000..8861090 Binary files /dev/null and b/src/assets/images/箭头2.png differ diff --git a/src/assets/images/箭头3.png b/src/assets/images/箭头3.png new file mode 100644 index 0000000..a838f47 Binary files /dev/null and b/src/assets/images/箭头3.png differ