38 changed files with 9722 additions and 29 deletions
@ -0,0 +1,732 @@ |
|||||||
|
import { Injectable } from '@angular/core'; |
||||||
|
import {ReplaySubject} from 'rxjs'; |
||||||
|
import { Observable } from 'rxjs'; |
||||||
|
import { GameMode } from './working-area/model/gameMode'; |
||||||
|
@Injectable({ |
||||||
|
providedIn: 'root' |
||||||
|
}) |
||||||
|
export class CanvasShareDataService { |
||||||
|
constructor() { } |
||||||
|
private _sendMessage: ReplaySubject<any> = new ReplaySubject<any>(1); |
||||||
|
GameMode: any; |
||||||
|
|
||||||
|
isChange = false; // 数据 是否改动
|
||||||
|
|
||||||
|
selectTemplateData: any; // 选择当前 模板数据
|
||||||
|
|
||||||
|
// 总平面图/建筑 楼层
|
||||||
|
selectStorey: any = {area: '', details: ''}; // 选择当前 楼层 数据
|
||||||
|
originalcompanyBuildingData: any; // 单位/建筑 数据
|
||||||
|
originaleveryStoreyData: any; // 总平面图/楼层/区域 楼层数据
|
||||||
|
// 总平面图/建筑 楼层
|
||||||
|
|
||||||
|
// 处置 节点
|
||||||
|
allDisposalNode: any = []; // 所有 处置节点
|
||||||
|
allNodeMarkers: any; // 灾情 标签信息
|
||||||
|
selectPanelPoint: DisposalNodeData = new DisposalNodeData(); |
||||||
|
selectPanelPointBaseData: any = {description: '', notes: '', weather: '', airTemperature: '', windDirection: '', windScale: ''}; // 当前 数据节点 所对应的 天气,详情 数据节点
|
||||||
|
// 处置 节点
|
||||||
|
/** |
||||||
|
* 游戏模式 |
||||||
|
*/ |
||||||
|
gameMode: GameMode = GameMode.BasicInformation; |
||||||
|
|
||||||
|
facilityAssetsName = new Map<string, string>([ |
||||||
|
[ '消防水池', '消防水池'], |
||||||
|
[ '疏散楼梯', '疏散楼梯'], |
||||||
|
[ '消防电梯', '消防电梯'], |
||||||
|
[ '避难区域', '避难区域'], |
||||||
|
[ '安全出口', '安全出口'], |
||||||
|
[ '地上消火栓', '室外消火栓' ], |
||||||
|
[ '地下消火栓', '室外消火栓' ], |
||||||
|
[ '室内消火栓', '室内消火栓' ], |
||||||
|
[ '供水管网', '供水管网'], |
||||||
|
[ '湿式自动喷淋系统', '湿式自动喷淋系统'], |
||||||
|
[ '水幕系统', '水幕系统' ], |
||||||
|
[ '消防泵房', '消防泵房'], |
||||||
|
[ '水泵接合器（地上）', '水泵接合器'], |
||||||
|
[ '水泵接合器（地下）', '水泵接合器'], |
||||||
|
[ '水泵接合器（墙壁）', '水泵接合器'], |
||||||
|
[ '消防水泵房', '消防水泵房'], |
||||||
|
[ '箱式消火栓', '箱式消火栓'], |
||||||
|
[ '固定水炮', '消防水炮' ], |
||||||
|
[ '消防水罐', '储水罐'], |
||||||
|
[ '消防水罐2', '储水罐'], |
||||||
|
[ '卧式水罐', '储水罐'], |
||||||
|
[ '消防泵', '水泵' ], |
||||||
|
[ '泡沫泵', '水泵' ], |
||||||
|
[ '泡沫泵房', '泡沫站'], |
||||||
|
[ '泡沫栓', '泡沫栓' ], |
||||||
|
[ '泡沫枪', '泡沫枪'], |
||||||
|
[ '泡沫发生器', '泡沫发生器' ], |
||||||
|
[ '消防管网', '消防管网'], |
||||||
|
[ 'DCS控制室', 'DCS控制室'] |
||||||
|
]); |
||||||
|
|
||||||
|
/** * 向其他组件发送信息 * |
||||||
|
* @param message 需要发送的信息 * @returns {Observavle<any>} */ |
||||||
|
public sendMessage(message: any) { |
||||||
|
this._sendMessage.next(message); |
||||||
|
} |
||||||
|
public getMessage(): Observable <any> { |
||||||
|
return this._sendMessage.asObservable(); |
||||||
|
} |
||||||
|
|
||||||
|
// 处置节点 筛选出 匹配数据 匹配不到 return undefined
|
||||||
|
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; |
||||||
|
} else { // 匹配 id
|
||||||
|
const returnData = this.allDisposalNode.find(item => item.id === parentId); |
||||||
|
return returnData; |
||||||
|
} |
||||||
|
} |
||||||
|
/** |
||||||
|
* 获取单位毗邻信息 |
||||||
|
*/ |
||||||
|
public getCompanyAdjoinInfo(): CompanyAdjoinInfo[] { |
||||||
|
const list: CompanyAdjoinInfo[] = []; |
||||||
|
Object.keys(this.originalcompanyBuildingData.data).forEach((key) => { |
||||||
|
const item = this.originalcompanyBuildingData.data[key]; |
||||||
|
if (item.Name === '毗邻') { |
||||||
|
const adjoin = new CompanyAdjoinInfo(); |
||||||
|
adjoin.AssetId = item.Id; |
||||||
|
adjoin.Id = ''; |
||||||
|
adjoin.ImageUrls = []; |
||||||
|
adjoin.CompanyId = sessionStorage.getItem('companyId'); |
||||||
|
item.PropertyInfos.forEach(element => { |
||||||
|
if (element.PropertyName === '方向') { |
||||||
|
adjoin.Direction = Number(element.PropertyValue); |
||||||
|
} else if (element.PropertyName === '名称/编号') { |
||||||
|
adjoin.Name = element.PropertyValue; |
||||||
|
} else if (element.PropertyType === PropertyType.Image) { |
||||||
|
adjoin.ImageUrls.push(element.PropertyValue); |
||||||
|
} |
||||||
|
}); |
||||||
|
list.push(adjoin); |
||||||
|
} |
||||||
|
}); |
||||||
|
return list; |
||||||
|
} |
||||||
|
/** |
||||||
|
* 获取建筑毗邻信息 |
||||||
|
*/ |
||||||
|
public getBuildingAdjoinInfo(): BuildingAdjoinInfo[] { |
||||||
|
const list: BuildingAdjoinInfo[] = []; |
||||||
|
Object.keys(this.originalcompanyBuildingData.data).forEach((key) => { |
||||||
|
const item = this.originalcompanyBuildingData.data[key]; |
||||||
|
if (item.Name === '毗邻') { |
||||||
|
const adjoin = new BuildingAdjoinInfo(); |
||||||
|
adjoin.AssetId = item.Id; |
||||||
|
adjoin.Id = ''; |
||||||
|
adjoin.BuildingId = this.selectStorey.buildingId; |
||||||
|
adjoin.ImageUrls = []; |
||||||
|
item.PropertyInfos.forEach(element => { |
||||||
|
if (element.PropertyName === '方向') { |
||||||
|
adjoin.Direction = Number(element.PropertyValue); |
||||||
|
} else if (element.PropertyName === '名称/编号') { |
||||||
|
adjoin.Name = element.PropertyValue; |
||||||
|
} else if (element.PropertyType === PropertyType.Image) { |
||||||
|
adjoin.ImageUrls.push(element.PropertyValue); |
||||||
|
} |
||||||
|
}); |
||||||
|
list.push(adjoin); |
||||||
|
} |
||||||
|
}); |
||||||
|
return list; |
||||||
|
} |
||||||
|
/** |
||||||
|
* 获取单位重点部位 |
||||||
|
*/ |
||||||
|
public getCompanyImportantLocations(): CompanyImportantLocationInfo[] { |
||||||
|
const list: CompanyImportantLocationInfo[] = []; |
||||||
|
Object.keys(this.originalcompanyBuildingData.data).forEach((key) => { |
||||||
|
const item = this.originalcompanyBuildingData.data[key]; |
||||||
|
if (item.Name === '重点部位') { |
||||||
|
const important = new CompanyImportantLocationInfo(); |
||||||
|
important.AssetId = item.Id; |
||||||
|
important.Id = ''; |
||||||
|
important.ImageUrls = []; |
||||||
|
important.CompanyId = sessionStorage.getItem('companyId'); |
||||||
|
item.PropertyInfos.forEach(element => { |
||||||
|
if (element.PropertyName === '名称/编号') { |
||||||
|
important.Name = element.PropertyValue; |
||||||
|
} else if (element.PropertyType === PropertyType.Image) { |
||||||
|
important.ImageUrls.push(element.PropertyValue); |
||||||
|
} else if (element.PropertyName === '主要危险性') { |
||||||
|
important.Hazards = element.PropertyValue; |
||||||
|
} else if (element.PropertyName === '使用性质') { |
||||||
|
important.Nature = element.PropertyValue; |
||||||
|
} else if (element.PropertyName === '所在位置') { |
||||||
|
important.Position = element.PropertyValue; |
||||||
|
} else if (element.PropertyName === '建筑结构') { |
||||||
|
important.Structure = element.PropertyValue; |
||||||
|
} |
||||||
|
}); |
||||||
|
list.push(important); |
||||||
|
} |
||||||
|
}); |
||||||
|
return list; |
||||||
|
} |
||||||
|
/** |
||||||
|
* 获取建筑重点部位 |
||||||
|
*/ |
||||||
|
public getBuildingImportantLocations(): BuildingImportantLocationInfo[] { |
||||||
|
const list: BuildingImportantLocationInfo[] = []; |
||||||
|
Object.keys(this.originalcompanyBuildingData.data).forEach((key) => { |
||||||
|
const item = this.originalcompanyBuildingData.data[key]; |
||||||
|
if (item.Name === '重点部位') { |
||||||
|
const important = new BuildingImportantLocationInfo(); |
||||||
|
important.AssetId = item.Id; |
||||||
|
important.Id = ''; |
||||||
|
important.ImageUrls = []; |
||||||
|
important.BuildingId = this.selectStorey.buildingId; |
||||||
|
item.PropertyInfos.forEach(element => { |
||||||
|
if (element.PropertyName === '名称/编号') { |
||||||
|
important.Name = element.PropertyValue; |
||||||
|
} else if (element.PropertyType === PropertyType.Image) { |
||||||
|
important.ImageUrls.push(element.PropertyValue); |
||||||
|
} else if (element.PropertyName === '主要危险性') { |
||||||
|
important.Hazards = element.PropertyValue; |
||||||
|
} else if (element.PropertyName === '使用性质') { |
||||||
|
important.Nature = element.PropertyValue; |
||||||
|
} else if (element.PropertyName === '所在位置') { |
||||||
|
important.Position = element.PropertyValue; |
||||||
|
} else if (element.PropertyName === '建筑结构') { |
||||||
|
important.Structure = element.PropertyValue; |
||||||
|
} |
||||||
|
}); |
||||||
|
list.push(important); |
||||||
|
} |
||||||
|
}); |
||||||
|
return list; |
||||||
|
} |
||||||
|
/** |
||||||
|
* 获取单位消防设施 |
||||||
|
*/ |
||||||
|
public getAllCompanyFacilityAssetInfo(): CompanyFacilityAssetInfo[] { |
||||||
|
const list: CompanyFacilityAssetInfo[] = []; |
||||||
|
Object.keys(this.originalcompanyBuildingData.data).forEach((key) => { |
||||||
|
const item = this.originalcompanyBuildingData.data[key]; |
||||||
|
if (this.facilityAssetsName.has(item.Name)) { |
||||||
|
const facility = new CompanyFacilityAssetInfo(); |
||||||
|
facility.CompanyId = sessionStorage.getItem('companyId'); |
||||||
|
facility.AssetId = item.Id; |
||||||
|
facility.Id = ''; |
||||||
|
facility.Name = this.facilityAssetsName.get(item.Name); |
||||||
|
facility.AssetName = item.Name; |
||||||
|
facility.PropertyInfos = item.PropertyInfos; |
||||||
|
facility.SitePlanId = item.FloorId; |
||||||
|
list.push(facility); |
||||||
|
} |
||||||
|
}); |
||||||
|
return list; |
||||||
|
} |
||||||
|
/** |
||||||
|
* 获取建筑消防设施 |
||||||
|
*/ |
||||||
|
public getAllBuildingFacilityAssetInfo(): BuildingFacilityAssetInfo[] { |
||||||
|
const list: BuildingFacilityAssetInfo[] = []; |
||||||
|
Object.keys(this.originalcompanyBuildingData.data).forEach((key) => { |
||||||
|
const item = this.originalcompanyBuildingData.data[key]; |
||||||
|
if (this.facilityAssetsName.has(item.Name)) { |
||||||
|
const facility = new BuildingFacilityAssetInfo(); |
||||||
|
facility.BuildingId = this.selectStorey.buildingId; |
||||||
|
facility.AssetId = item.Id; |
||||||
|
facility.Id = ''; |
||||||
|
facility.Name = this.facilityAssetsName.get(item.Name); |
||||||
|
facility.AssetName = item.Name; |
||||||
|
facility.PropertyInfos = item.PropertyInfos; |
||||||
|
facility.BuildingAreaId = item.FloorId; |
||||||
|
list.push(facility); |
||||||
|
} |
||||||
|
}); |
||||||
|
return list; |
||||||
|
} |
||||||
|
/** |
||||||
|
* 反序列化对象 |
||||||
|
* @param json 字符串 |
||||||
|
*/ |
||||||
|
public deserialize<T>(json: any): T { |
||||||
|
const obj: T = JSON.parse( |
||||||
|
json, |
||||||
|
(_, val) => { |
||||||
|
if (val === null) { return null; } |
||||||
|
if (Array.isArray(val) || typeof val !== 'object') { |
||||||
|
return val; |
||||||
|
} |
||||||
|
return Object.entries(val).reduce((a, [key, val]) => { |
||||||
|
const count = key.length; |
||||||
|
if (count > 1) { |
||||||
|
a[key[0].toUpperCase() + key.substring(1, count)] = val; |
||||||
|
} else { |
||||||
|
a[key] = val; |
||||||
|
} |
||||||
|
return a; |
||||||
|
}, {}); |
||||||
|
} |
||||||
|
); |
||||||
|
return obj; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 单位毗邻 |
||||||
|
*/ |
||||||
|
export class CompanyAdjoinInfo { |
||||||
|
public CompanyId: string; |
||||||
|
public Id: string; |
||||||
|
public Name: string; |
||||||
|
public Direction: number; |
||||||
|
public ImageUrls: string[] = []; |
||||||
|
public AssetId: string; |
||||||
|
} |
||||||
|
/** |
||||||
|
* 建筑毗邻 |
||||||
|
*/ |
||||||
|
export class BuildingAdjoinInfo { |
||||||
|
public BuildingId: string; |
||||||
|
public Id: string; |
||||||
|
public Name: string; |
||||||
|
public Direction: number; |
||||||
|
public ImageUrls: string[]; |
||||||
|
public AssetId: string; |
||||||
|
} |
||||||
|
/** |
||||||
|
* 建筑重点部位 |
||||||
|
*/ |
||||||
|
export class BuildingImportantLocationInfo { |
||||||
|
public BuildingId: string; |
||||||
|
public Id: string; |
||||||
|
public Name: string; |
||||||
|
public Position: string; |
||||||
|
public Structure: string; |
||||||
|
public Nature: string; |
||||||
|
public Hazards: string; |
||||||
|
public ImageUrls: string[]; |
||||||
|
public AssetId: string; |
||||||
|
} |
||||||
|
/** |
||||||
|
* 单位重点部位 |
||||||
|
*/ |
||||||
|
export class CompanyImportantLocationInfo { |
||||||
|
public CompanyId: string; |
||||||
|
public Id: string; |
||||||
|
public Name: string; |
||||||
|
public Position: string; |
||||||
|
public Structure: string; |
||||||
|
public Nature: string; |
||||||
|
public Hazards: string; |
||||||
|
public ImageUrls: string[]; |
||||||
|
public AssetId: string; |
||||||
|
} |
||||||
|
/** |
||||||
|
* 单位消防素材信息 |
||||||
|
*/ |
||||||
|
export class CompanyFacilityAssetInfo { |
||||||
|
public Id: string; |
||||||
|
public Name: string; |
||||||
|
public AssetName: string; |
||||||
|
public PropertyInfos: string; |
||||||
|
public AssetId: string; |
||||||
|
public CompanyId: string; |
||||||
|
public SitePlanId: string; |
||||||
|
} |
||||||
|
/** |
||||||
|
* 建筑消防素材信息 |
||||||
|
*/ |
||||||
|
export class BuildingFacilityAssetInfo { |
||||||
|
public Id: string; |
||||||
|
public Name: string; |
||||||
|
public AssetName: string; |
||||||
|
public PropertyInfos: string; |
||||||
|
public AssetId: string; |
||||||
|
public BuildingId: string; |
||||||
|
public BuildingAreaId: string; |
||||||
|
} |
||||||
|
/** |
||||||
|
* 属性 |
||||||
|
*/ |
||||||
|
export class PropertyInfo { |
||||||
|
// 标记位
|
||||||
|
public Tag: string; |
||||||
|
// 属性书序
|
||||||
|
public Order: number; |
||||||
|
// 是否启用
|
||||||
|
public Enabled: boolean; |
||||||
|
// 是否可见
|
||||||
|
public Visible: boolean; |
||||||
|
// 必填
|
||||||
|
public Required: boolean; |
||||||
|
// 验证规则名称
|
||||||
|
public RuleName: string; |
||||||
|
// 验证规则值
|
||||||
|
public RuleValue: string; |
||||||
|
// 物理单位
|
||||||
|
public PhysicalUnit: string; |
||||||
|
// 属性名称
|
||||||
|
public PropertyName: string; |
||||||
|
// 属性类型
|
||||||
|
public PropertyType: PropertyType; |
||||||
|
// 属性值
|
||||||
|
public PropertyValue: string; |
||||||
|
} |
||||||
|
/** |
||||||
|
* 属性类型。 |
||||||
|
*/ |
||||||
|
export enum PropertyType { |
||||||
|
// 单行文本。
|
||||||
|
SingleText, |
||||||
|
// 多行文本。
|
||||||
|
MultipleText, |
||||||
|
// 数值。
|
||||||
|
Numeric, |
||||||
|
// 图片。
|
||||||
|
Image, |
||||||
|
// 图片数值，专用于描述图片数量。
|
||||||
|
ImageNumeric, |
||||||
|
// 方向
|
||||||
|
Direction, |
||||||
|
// 布尔类型。
|
||||||
|
Boolean, |
||||||
|
// 供给区域
|
||||||
|
SupplyArea, |
||||||
|
// 供给类型
|
||||||
|
SupplyType |
||||||
|
} |
||||||
|
/** |
||||||
|
* 处置节点 |
||||||
|
*/ |
||||||
|
export class DisposalNode { |
||||||
|
/** |
||||||
|
* 编号 |
||||||
|
*/ |
||||||
|
public Id: string; |
||||||
|
/** |
||||||
|
* 名称 |
||||||
|
*/ |
||||||
|
public Name: string; |
||||||
|
/** |
||||||
|
* 等级 |
||||||
|
*/ |
||||||
|
public Level: number; |
||||||
|
/** |
||||||
|
* 排序 |
||||||
|
*/ |
||||||
|
public Order: number; |
||||||
|
/** |
||||||
|
* 详情 |
||||||
|
*/ |
||||||
|
public Description: string; |
||||||
|
/** |
||||||
|
* 注意事项 |
||||||
|
*/ |
||||||
|
public Notes: string; |
||||||
|
/** |
||||||
|
* 天气 |
||||||
|
*/ |
||||||
|
public Weather: string; |
||||||
|
/** |
||||||
|
* 气温 |
||||||
|
*/ |
||||||
|
public AirTemperature?: number; |
||||||
|
/** |
||||||
|
* 风向 |
||||||
|
*/ |
||||||
|
public WindDirection: Direction; |
||||||
|
/** |
||||||
|
* 风力等级 |
||||||
|
*/ |
||||||
|
public WindScale: WindScale; |
||||||
|
/** |
||||||
|
* 图片名称 |
||||||
|
*/ |
||||||
|
public ImageNames: string[]; |
||||||
|
/** |
||||||
|
* 图片地址 |
||||||
|
*/ |
||||||
|
public ImageUrls: string[]; |
||||||
|
/** |
||||||
|
* 父节点编号 |
||||||
|
*/ |
||||||
|
public ParentId: string; |
||||||
|
/** |
||||||
|
* 灾情编号 |
||||||
|
*/ |
||||||
|
public DisasterId: string; |
||||||
|
/** |
||||||
|
* 预案组件编号 |
||||||
|
*/ |
||||||
|
public PlanComponentId: string; |
||||||
|
/** |
||||||
|
* 单位编号 |
||||||
|
*/ |
||||||
|
public CompanyId: string; |
||||||
|
/** |
||||||
|
* 总平面图编号 |
||||||
|
*/ |
||||||
|
public SitePlanId: string; |
||||||
|
/** |
||||||
|
* 建筑编号 |
||||||
|
*/ |
||||||
|
public BuildingId: string; |
||||||
|
/** |
||||||
|
* 建筑区域编号 |
||||||
|
*/ |
||||||
|
public BuildingAreaId: string; |
||||||
|
} |
||||||
|
/** |
||||||
|
* 方向。 |
||||||
|
*/ |
||||||
|
export enum Direction { |
||||||
|
/** |
||||||
|
* 东 |
||||||
|
*/ |
||||||
|
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 |
||||||
|
} |
||||||
|
/** |
||||||
|
* 处置节点数据 |
||||||
|
*/ |
||||||
|
export class DisposalNodeData { |
||||||
|
/** |
||||||
|
* 编号 |
||||||
|
*/ |
||||||
|
public Id: string; |
||||||
|
/** |
||||||
|
* 数据 |
||||||
|
*/ |
||||||
|
public Data: any; |
||||||
|
/** |
||||||
|
* 版本号 |
||||||
|
*/ |
||||||
|
public Version: string; |
||||||
|
/** |
||||||
|
* 处置节点编号 |
||||||
|
*/ |
||||||
|
public DisposalNodeId: string; |
||||||
|
/** |
||||||
|
* 预案组件编号 |
||||||
|
*/ |
||||||
|
public PlanComponentId: string; |
||||||
|
} |
||||||
|
/** |
||||||
|
* 楼层节点数据 |
||||||
|
*/ |
||||||
|
export class FloorNodeData { |
||||||
|
/** |
||||||
|
* 存量 |
||||||
|
*/ |
||||||
|
public Stock: Map<string, AssetData> = new Map<string, AssetData>(); |
||||||
|
/** |
||||||
|
* 增量 |
||||||
|
*/ |
||||||
|
public Increment: Map<string, AssetData> = new Map<string, AssetData>(); |
||||||
|
/** |
||||||
|
* 用户定义的增量。 |
||||||
|
*/ |
||||||
|
public DefinedIncrement: Map<string, AssetData> = new Map<string, AssetData>(); |
||||||
|
} |
||||||
|
/** |
||||||
|
* 素材数据 |
||||||
|
*/ |
||||||
|
export class AssetData { |
||||||
|
/// <summary>
|
||||||
|
/// 模板编号
|
||||||
|
/// </summary>
|
||||||
|
public TemplateId: string; |
||||||
|
/// <summary>
|
||||||
|
/// 编号
|
||||||
|
/// </summary>
|
||||||
|
public Id: string; |
||||||
|
/// <summary>
|
||||||
|
/// 名称
|
||||||
|
/// </summary>
|
||||||
|
public Name: string; |
||||||
|
/// <summary>
|
||||||
|
/// 角度
|
||||||
|
/// </summary>
|
||||||
|
public Angle: number; |
||||||
|
/// <summary>
|
||||||
|
/// 颜色
|
||||||
|
/// </summary>
|
||||||
|
public Color: string; |
||||||
|
/// <summary>
|
||||||
|
/// 坐标
|
||||||
|
/// </summary>
|
||||||
|
public Point: PIXI.Point; |
||||||
|
/// <summary>
|
||||||
|
/// 宽度
|
||||||
|
/// </summary>
|
||||||
|
public Width: number; |
||||||
|
/// <summary>
|
||||||
|
/// 高度
|
||||||
|
/// </summary>
|
||||||
|
public Height: number; |
||||||
|
/// <summary>
|
||||||
|
/// 是否启用
|
||||||
|
/// </summary>
|
||||||
|
public Enabled: boolean; |
||||||
|
/// <summary>
|
||||||
|
/// 填充方式
|
||||||
|
/// </summary>
|
||||||
|
public FillMode: FillMode; |
||||||
|
/// <summary>
|
||||||
|
/// 图片地址
|
||||||
|
/// </summary>
|
||||||
|
public ImageUrl: string; |
||||||
|
/// <summary>
|
||||||
|
/// 是否固定大小
|
||||||
|
/// </summary>
|
||||||
|
public FixedSize: boolean; |
||||||
|
/// <summary>
|
||||||
|
/// 点路径
|
||||||
|
/// </summary>
|
||||||
|
public MultiPoint: PIXI.Point[]; |
||||||
|
/// <summary>
|
||||||
|
/// 建筑ID
|
||||||
|
/// </summary>
|
||||||
|
public BuildingId: string; |
||||||
|
/// <summary>
|
||||||
|
/// 单位ID
|
||||||
|
/// </summary>
|
||||||
|
public CompanyId: string; |
||||||
|
/// <summary>
|
||||||
|
/// 楼层编号
|
||||||
|
/// </summary>
|
||||||
|
public FloorId: string; |
||||||
|
/// <summary>
|
||||||
|
/// 楼层名称
|
||||||
|
/// </summary>
|
||||||
|
public FloorName: string; |
||||||
|
/// <summary>
|
||||||
|
/// 消防要素编号
|
||||||
|
/// </summary>
|
||||||
|
public FireElementId: string; |
||||||
|
/// <summary>
|
||||||
|
/// 属性列表
|
||||||
|
/// </summary>
|
||||||
|
public PropertyInfos: PropertyInfo[]; |
||||||
|
/// <summary>
|
||||||
|
/// 交互方式
|
||||||
|
/// </summary>
|
||||||
|
public InteractiveMode: InteractiveMode; |
||||||
|
/// <summary>
|
||||||
|
/// 是否来自建筑
|
||||||
|
/// </summary>
|
||||||
|
public IsFromBuilding: boolean; |
||||||
|
/// <summary>
|
||||||
|
/// 渲染方式。
|
||||||
|
/// </summary>
|
||||||
|
public DrawMode: ImageType; |
||||||
|
/// <summary>
|
||||||
|
/// 9宫格边框数值。
|
||||||
|
/// </summary>
|
||||||
|
public Border: Border; |
||||||
|
/// <summary>
|
||||||
|
/// 厚度。
|
||||||
|
/// </summary>
|
||||||
|
public Thickness: number; |
||||||
|
/// <summary>
|
||||||
|
/// 素材类型
|
||||||
|
/// </summary>
|
||||||
|
public GameMode: GameMode; |
||||||
|
} |
||||||
|
/** |
||||||
|
* 填充模式 |
||||||
|
*/ |
||||||
|
export enum FillMode { |
||||||
|
Color, |
||||||
|
Image |
||||||
|
} |
||||||
|
/** |
||||||
|
* 交互方式 |
||||||
|
*/ |
||||||
|
export enum InteractiveMode { |
||||||
|
/** |
||||||
|
* 单点。 |
||||||
|
*/ |
||||||
|
Single, |
||||||
|
/** |
||||||
|
* 多点不闭合。 |
||||||
|
*/ |
||||||
|
Multiple, |
||||||
|
/** |
||||||
|
* 多点闭合。 |
||||||
|
*/ |
||||||
|
MultipleClosed |
||||||
|
} |
||||||
|
/** |
||||||
|
* 图片显示类型 |
||||||
|
*/ |
||||||
|
export enum ImageType { |
||||||
|
Simple = 0, |
||||||
|
Sliced = 1, |
||||||
|
Tiled = 2, |
||||||
|
Filled = 3 |
||||||
|
} |
||||||
|
/** |
||||||
|
* 边框 |
||||||
|
*/ |
||||||
|
export class Border { |
||||||
|
|
||||||
|
public x: number; |
||||||
|
|
||||||
|
public y: number; |
||||||
|
|
||||||
|
public z: number; |
||||||
|
|
||||||
|
public w: number; |
||||||
|
} |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
<div class="functionalDomainContent"> |
||||||
|
<div mat-dialog-title> |
||||||
|
<label *ngIf="!data.parentId">新建处置节点</label> |
||||||
|
<label *ngIf="data.parentId">新建节点</label> |
||||||
|
</div> |
||||||
|
|
||||||
|
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||||
|
|
||||||
|
<div class="keyMargin"> |
||||||
|
<mat-form-field> |
||||||
|
<input matInput name="name" required ngModel placeholder="名称"> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="submitBottom"> |
||||||
|
<button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid"> |
||||||
|
确定 |
||||||
|
</button> |
||||||
|
<button mat-raised-button mat-dialog-close>取消</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
</form> |
||||||
|
|
||||||
|
</div> |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
<div class="functionalDomainContent"> |
||||||
|
<div mat-dialog-title> |
||||||
|
<label *ngIf="!data.isBuilding">新建平面图</label> |
||||||
|
<label *ngIf="data.isBuilding">新建楼层/区域</label> |
||||||
|
</div> |
||||||
|
|
||||||
|
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||||
|
|
||||||
|
<div class="keyMargin"> |
||||||
|
<mat-form-field> |
||||||
|
<input matInput name="name" required ngModel placeholder="名称"> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="keyMargin" *ngIf="data.isBuilding"> |
||||||
|
<mat-checkbox name="isRefugeStorey" [(ngModel)]="checked">是否为避难层</mat-checkbox> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="keyMargin"> |
||||||
|
<mat-form-field> |
||||||
|
<input matInput name="area" type="number" required ngModel placeholder="面积 (平方米)"> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="keyMargin"> |
||||||
|
<textarea name="details" ngModel placeholder="详情"></textarea> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="submitBottom"> |
||||||
|
<button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid"> |
||||||
|
确定 |
||||||
|
</button> |
||||||
|
<button mat-raised-button mat-dialog-close>取消</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
</form> |
||||||
|
|
||||||
|
</div> |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { CollectionToolsComponent } from './collection-tools.component'; |
||||||
|
|
||||||
|
describe('CollectionToolsComponent', () => { |
||||||
|
let component: CollectionToolsComponent; |
||||||
|
let fixture: ComponentFixture<CollectionToolsComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ CollectionToolsComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(CollectionToolsComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,28 @@ |
|||||||
|
<div mat-dialog-title>新增建筑</div> |
||||||
|
<div> |
||||||
|
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||||
|
|
||||||
|
<div mat-dialog-content> |
||||||
|
<mat-form-field> |
||||||
|
<input type="text" matInput ngModel |
||||||
|
required name="propertyName" placeholder="建筑名称" autocomplete="off"> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
<div mat-dialog-content> |
||||||
|
<mat-form-field> |
||||||
|
<mat-select [(value)]="selected" required ngModel name="buildingId" placeholder="建筑类型"> |
||||||
|
<mat-option *ngFor="let item of allBuildingType" [value]="item.id"> |
||||||
|
{{item.name}} |
||||||
|
</mat-option> |
||||||
|
</mat-select> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
<div mat-dialog-actions> |
||||||
|
<button mat-raised-button color="primary" type="submit" |
||||||
|
[disabled]="!form.form.valid"> |
||||||
|
确定 |
||||||
|
</button> |
||||||
|
<button mat-raised-button mat-dialog-close>取消</button> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</div> |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
<div mat-dialog-title>编辑建筑</div> |
||||||
|
<div> |
||||||
|
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||||
|
<div mat-dialog-content> |
||||||
|
<mat-form-field> |
||||||
|
<input type="text" matInput [(ngModel)]="defaultName" required name="propertyName" placeholder="建筑名称" autocomplete="off"> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
<div mat-dialog-content> |
||||||
|
<mat-form-field> |
||||||
|
<mat-select required [(ngModel)]="defaultBuildingType" name="buildingId" placeholder="建筑类型"> |
||||||
|
<mat-option *ngFor="let item of allBuildingType" [value]="item.id"> |
||||||
|
{{item.name}} |
||||||
|
</mat-option> |
||||||
|
</mat-select> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
<div mat-dialog-actions> |
||||||
|
<button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid">确定</button> |
||||||
|
<button mat-raised-button mat-dialog-close>取消</button> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</div> |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
<div class="functionalDomainContent"> |
||||||
|
<div mat-dialog-title> |
||||||
|
<label>修改灾情节点名称</label> |
||||||
|
</div> |
||||||
|
|
||||||
|
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||||
|
|
||||||
|
<div class="keyMargin"> |
||||||
|
<mat-form-field> |
||||||
|
<input matInput name="name" required [(ngModel)]="nodeName" placeholder="名称"> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="submitBottom"> |
||||||
|
<button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid"> |
||||||
|
确定 |
||||||
|
</button> |
||||||
|
<button mat-raised-button mat-dialog-close>取消</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
</form> |
||||||
|
|
||||||
|
</div> |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
<div class="functionalDomainContent"> |
||||||
|
|
||||||
|
<div mat-dialog-title> |
||||||
|
<label *ngIf="!data.isBuilding">编辑平面图</label> |
||||||
|
<label *ngIf="data.isBuilding">编辑楼层/区域</label> |
||||||
|
</div> |
||||||
|
|
||||||
|
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||||
|
|
||||||
|
<div class="keyMargin"> |
||||||
|
<mat-form-field> |
||||||
|
<input matInput name="name" required [(ngModel)]="name" placeholder="名称"> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="keyMargin" *ngIf="data.isBuilding"> |
||||||
|
<mat-checkbox name="isRefugeStorey" [(ngModel)]="checked">是否为避难层</mat-checkbox> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="keyMargin"> |
||||||
|
<mat-form-field> |
||||||
|
<input matInput name="area" type="number" required [(ngModel)]="area" placeholder="面积 (平方米)"> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="keyMargin"> |
||||||
|
<textarea name="details" [(ngModel)]="details" placeholder="详情"></textarea> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="submitBottom"> |
||||||
|
<button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid"> |
||||||
|
确定 |
||||||
|
</button> |
||||||
|
<button mat-raised-button mat-dialog-close>取消</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
</form> |
||||||
|
|
||||||
|
</div> |
||||||
@ -0,0 +1,180 @@ |
|||||||
|
import { Component, OnInit, Inject } from '@angular/core'; |
||||||
|
import { HttpClient, HttpHeaders } from '@angular/common/http'; |
||||||
|
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||||
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-leftFunctionalDomain', |
||||||
|
templateUrl: './addPlaneFigure.html', |
||||||
|
styleUrls: ['./panel.scss'] |
||||||
|
}) |
||||||
|
export class leftFunctionalDomainComponent implements OnInit { |
||||||
|
|
||||||
|
constructor( |
||||||
|
private http:HttpClient, |
||||||
|
public dialog: MatDialog, |
||||||
|
public snackBar: MatSnackBar, |
||||||
|
public dialogRef: MatDialogRef<any>, |
||||||
|
@Inject(MAT_DIALOG_DATA) public data) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
params = {companyId: sessionStorage.getItem('companyId')} |
||||||
|
checked:boolean = false;//是否为避难层
|
||||||
|
|
||||||
|
//提交表单创建平面图
|
||||||
|
onSubmit (e) { |
||||||
|
if (!this.data.isBuilding) { //总平面图 创建平面图
|
||||||
|
let data = { |
||||||
|
companyId: sessionStorage.getItem('companyId'), |
||||||
|
name: e.name, |
||||||
|
order: this.data.order, |
||||||
|
area:e.area, |
||||||
|
details:e.details, |
||||||
|
enabled: true, |
||||||
|
modifiedTime: new Date(), |
||||||
|
} |
||||||
|
this.http.post('/api/SitePlans',data).subscribe(data=>{ |
||||||
|
this.dialogRef.close('总平面图'); |
||||||
|
}) |
||||||
|
} else { //建筑 创建楼层/区域
|
||||||
|
let data = { |
||||||
|
isRefugeStorey: e.isRefugeStorey, |
||||||
|
buildingId: this.data.Panel.id, |
||||||
|
name: e.name, |
||||||
|
order: this.data.order, |
||||||
|
area:e.area, |
||||||
|
details:e.details, |
||||||
|
enabled: true, |
||||||
|
modifiedTime: new Date(), |
||||||
|
} |
||||||
|
this.http.post('/api/BuildingAreas',data,{params:this.params}).subscribe(data=>{ |
||||||
|
this.dialogRef.close('建筑'); |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//编辑平面图 楼层/区域
|
||||||
|
@Component({ |
||||||
|
selector: 'app-editPlaneFigure', |
||||||
|
templateUrl: './editPlaneFigure.html', |
||||||
|
styleUrls: ['./panel.scss'] |
||||||
|
}) |
||||||
|
export class editPlaneFigureComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef<any>,@Inject(MAT_DIALOG_DATA) public data) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.name = this.data.buildingData.name || '' |
||||||
|
this.checked = this.data.buildingData.isRefugeStorey || false |
||||||
|
this.area = this.data.buildingData.area || 0 |
||||||
|
this.details = this.data.buildingData.details || '' |
||||||
|
} |
||||||
|
|
||||||
|
params = {companyId: sessionStorage.getItem('companyId')} |
||||||
|
name:any; //name
|
||||||
|
checked:boolean = false;//是否为避难层
|
||||||
|
area:number; //面积
|
||||||
|
details:string; //详情
|
||||||
|
|
||||||
|
//提交表单修改平面图
|
||||||
|
onSubmit (e) { |
||||||
|
if (!this.data.isBuilding) { //总平面图 修改平面图
|
||||||
|
let data = { |
||||||
|
companyId: sessionStorage.getItem('companyId'), |
||||||
|
id: this.data.buildingData.id, |
||||||
|
name: e.name, |
||||||
|
cadUrl: this.data.buildingData.cadUrl, |
||||||
|
imageUrl: this.data.buildingData.imageUrl, |
||||||
|
imageAngle: this.data.buildingData.imageAngle, |
||||||
|
order: this.data.buildingData.order, |
||||||
|
area:e.area, |
||||||
|
details:e.details, |
||||||
|
enabled: this.data.buildingData.enabled, |
||||||
|
modifiedTime: new Date(), |
||||||
|
} |
||||||
|
this.http.put(`/api/SitePlans/${this.data.buildingData.id}`,data).subscribe(data=>{ |
||||||
|
this.dialogRef.close('总平面图'); |
||||||
|
}) |
||||||
|
} else { //建筑 修改楼层/区域
|
||||||
|
let data = { |
||||||
|
isRefugeStorey: e.isRefugeStorey, |
||||||
|
buildingId: this.data.Panel.id, |
||||||
|
id: this.data.buildingData.id, |
||||||
|
name: e.name, |
||||||
|
cadUrl: this.data.buildingData.cadUrl, |
||||||
|
imageUrl: this.data.buildingData.imageUrl, |
||||||
|
imageAngle: this.data.buildingData.imageAngle, |
||||||
|
order: this.data.buildingData.order, |
||||||
|
area:e.area, |
||||||
|
details:e.details, |
||||||
|
enabled: this.data.buildingData.enabled, |
||||||
|
modifiedTime: new Date(), |
||||||
|
} |
||||||
|
this.http.put(`/api/BuildingAreas/${this.data.buildingData.id}`,data,{params:this.params}).subscribe(data=>{ |
||||||
|
this.dialogRef.close('建筑'); |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//创建 处置预案 节点
|
||||||
|
@Component({ |
||||||
|
selector: 'app-addDisposalNode', |
||||||
|
templateUrl: './addDisposalNode.html', |
||||||
|
styleUrls: ['./panel.scss'] |
||||||
|
}) |
||||||
|
export class addDisposalNodeComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef<any>,@Inject(MAT_DIALOG_DATA) public data) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
} |
||||||
|
|
||||||
|
//提交表单
|
||||||
|
onSubmit (e) { |
||||||
|
this.data.name = e.name |
||||||
|
this.http.post('/api/DisposalNodes',this.data).subscribe(data=>{ |
||||||
|
this.dialogRef.close('success'); |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//编辑 处置预案 节点
|
||||||
|
@Component({ |
||||||
|
selector: 'app-editDisposalNode', |
||||||
|
templateUrl: './editDisposalNode.html', |
||||||
|
styleUrls: ['./panel.scss'] |
||||||
|
}) |
||||||
|
export class editDisposalNodeComponent implements OnInit { |
||||||
|
|
||||||
|
constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public dialogRef: MatDialogRef<any>,@Inject(MAT_DIALOG_DATA) public data) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.nodeName = JSON.parse(JSON.stringify( this.data.name || '' ))
|
||||||
|
} |
||||||
|
nodeName:string; |
||||||
|
|
||||||
|
//提交表单
|
||||||
|
onSubmit (e) { |
||||||
|
this.data.name = e.name |
||||||
|
this.http.put(`/api/DisposalNodes/${this.data.id}`,this.data).subscribe(data=>{ |
||||||
|
this.dialogRef.close(e.name); |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,291 @@ |
|||||||
|
.matIcons { |
||||||
|
color: #8E909F; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//平面图 素材库 公共样式 头部 |
||||||
|
.planarGraphHeader{ |
||||||
|
height: 35px; |
||||||
|
min-height: 35px; |
||||||
|
cursor: pointer; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
padding: 0 24px; |
||||||
|
border-radius: 5px; |
||||||
|
font-family: Roboto, "Helvetica Neue", sans-serif; |
||||||
|
font-size: 15px; |
||||||
|
font-weight: 400; |
||||||
|
color: #000; |
||||||
|
background: linear-gradient(to top,#cdced1,#FFF); |
||||||
|
} |
||||||
|
//平面图头部字体图标样式 |
||||||
|
.hover { |
||||||
|
width: 18px; |
||||||
|
height: 18px; |
||||||
|
margin-left: 90px; |
||||||
|
border: 1px solid #999; |
||||||
|
border-radius: 3px; |
||||||
|
.mat-icon {font-size: 18px; color: #999;} |
||||||
|
} |
||||||
|
.hover:hover { |
||||||
|
background-color: #4DA5FA; |
||||||
|
.mat-icon {color: #fff;} |
||||||
|
} |
||||||
|
|
||||||
|
//平面图 |
||||||
|
.sitePlanContent { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: 35px; |
||||||
|
line-height: 35px; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 0 10px 0 25px; |
||||||
|
.mat-icon { |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//火源/力量 图标 |
||||||
|
.fireForce { |
||||||
|
display: block; |
||||||
|
float: right; |
||||||
|
margin: 8px 5px 0 0; |
||||||
|
width: 40px; |
||||||
|
height: 20px; |
||||||
|
line-height: 20px; |
||||||
|
text-align: center; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
img{ |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
//替换底图 inputfile |
||||||
|
.a-upload { |
||||||
|
display: block; |
||||||
|
float: right; |
||||||
|
margin: 8px 18px 0 0; |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
line-height: 20px; |
||||||
|
text-align: center; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
input { |
||||||
|
position: absolute; |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
.a-upload:hover { |
||||||
|
.mat-icon { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
//上传底图 inputfile |
||||||
|
#a-uploadImg { |
||||||
|
display: block; |
||||||
|
width: 300px; |
||||||
|
height: 170px; |
||||||
|
position: fixed; |
||||||
|
top: 40%; |
||||||
|
left: 48%; |
||||||
|
overflow: hidden; |
||||||
|
border-radius: 5px; |
||||||
|
border: 1px solid #999; |
||||||
|
z-index: 999; |
||||||
|
input { |
||||||
|
position: absolute; |
||||||
|
width: 300px; |
||||||
|
height: 170px; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
#a-uploadImg:hover { |
||||||
|
border: 5px solid skyblue; |
||||||
|
} |
||||||
|
|
||||||
|
//hover时显示右边操作栏 |
||||||
|
.sitePlanContent:hover { |
||||||
|
#rightOperate { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
|
//右边操作栏 |
||||||
|
#rightOperate{ |
||||||
|
width: 50px; |
||||||
|
height: 100px; |
||||||
|
position: absolute; |
||||||
|
top: -32px; |
||||||
|
right: -48px; |
||||||
|
z-index: 99999; |
||||||
|
border-radius: 0 100px 100px 0; |
||||||
|
background-color: #F0F4F7; |
||||||
|
// #F0F4F7 cdced1 |
||||||
|
display: none; |
||||||
|
.functionButton { |
||||||
|
height: 25%; |
||||||
|
line-height: 25px; |
||||||
|
} |
||||||
|
.bigFunctionIcon { |
||||||
|
font-size: 24px; |
||||||
|
} |
||||||
|
.functionIcon { |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
.functionIcon:hover { |
||||||
|
color: #4DA5FA; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//处置预案 素材库 公用div |
||||||
|
.publiclBankPlan { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
overflow: hidden; |
||||||
|
padding-bottom: 10px; |
||||||
|
// border-top: 1px dashed #999; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 基本信息/想定作业 切换 |
||||||
|
.scenarioAssignment { |
||||||
|
overflow-y: auto; |
||||||
|
} |
||||||
|
.selectEditMode { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.materialBankDIV{ |
||||||
|
flex: 1; |
||||||
|
overflow-x: hidden; |
||||||
|
overflow-y: auto; |
||||||
|
} |
||||||
|
// 基本信息/想定作业 切换 |
||||||
|
//处置预案 |
||||||
|
#terrNodePublic { |
||||||
|
height: 35px; |
||||||
|
line-height: 35px; |
||||||
|
display: flex; |
||||||
|
.textNode {flex: 1;} |
||||||
|
} |
||||||
|
//字体图标 |
||||||
|
.planIconDiv { |
||||||
|
display: inline-block; |
||||||
|
.mat-icon{ |
||||||
|
font-size: 20px; |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
color: #666; |
||||||
|
margin-right: 3px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.mat-expansion-panel-header { |
||||||
|
height: 40px !important; |
||||||
|
} |
||||||
|
//素材库溢出隐藏 |
||||||
|
#materialBank { |
||||||
|
margin: 1px 0; |
||||||
|
} |
||||||
|
//素材库图片flex |
||||||
|
#panelLibrary .text{ |
||||||
|
box-sizing: border-box; |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
.panelLibraryFlex { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: space-between; /* 水平居中 */ |
||||||
|
.imgBox { |
||||||
|
width: 70px; |
||||||
|
height: 100px; |
||||||
|
display: inline-block; |
||||||
|
text-align: center; |
||||||
|
border-radius: 3px; |
||||||
|
margin: 5px 0; |
||||||
|
img { |
||||||
|
width: 70px; |
||||||
|
height: auto; |
||||||
|
max-height: 70px; |
||||||
|
cursor:pointer; |
||||||
|
} |
||||||
|
p { |
||||||
|
font-size: 12px; |
||||||
|
cursor:pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//文本溢出 |
||||||
|
.overflowText { |
||||||
|
overflow: hidden; |
||||||
|
text-overflow:ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
// 楼层/区域 是避难层时 |
||||||
|
.isRefugeStorey { |
||||||
|
color: #fff; |
||||||
|
background-color: rgb(238, 186, 186); |
||||||
|
} |
||||||
|
//选中平面图时 |
||||||
|
.selectSitePlan { |
||||||
|
color: #fff; |
||||||
|
background-color: #6BC2FF; |
||||||
|
} |
||||||
|
//选中素材库图片时 |
||||||
|
.selectImg { |
||||||
|
color: #fff; |
||||||
|
background-color: #4DA5FA; |
||||||
|
} |
||||||
|
//选中 处置节点时 |
||||||
|
.selectanelPoint { |
||||||
|
background-color: #F4C235; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//左侧功能区弹出框样式 |
||||||
|
.keyMargin { |
||||||
|
width: 100%; |
||||||
|
margin: 5px 0; |
||||||
|
.mat-form-field { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
.submitBottom { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: space-between; /* 水平居中 */ |
||||||
|
} |
||||||
|
.functionalDomainContent { |
||||||
|
width: 300px; |
||||||
|
height: 100%; |
||||||
|
textarea { |
||||||
|
border-radius: 5px; |
||||||
|
border: 1px solid #999; |
||||||
|
width: 100%; |
||||||
|
height: 120px; |
||||||
|
resize:none; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,301 @@ |
|||||||
|
import { Component, OnInit, Inject } from '@angular/core'; |
||||||
|
import { HttpClient, HttpHeaders } from '@angular/common/http'; |
||||||
|
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||||
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||||
|
import {CanvasShareDataService,DisposalNodeData} from '../../canvas-share-data.service' //引入服务
|
||||||
|
// 保存想定作业第一个弹窗
|
||||||
|
@Component({ |
||||||
|
selector: 'dialog-overview-example-dialog', |
||||||
|
templateUrl: 'saveOne.html', |
||||||
|
styleUrls: ['./collection-tools.component.scss'] |
||||||
|
}) |
||||||
|
export class saveOneDialog { |
||||||
|
|
||||||
|
constructor( |
||||||
|
private http:HttpClient, |
||||||
|
public dialog: MatDialog, |
||||||
|
public snackBar: MatSnackBar, |
||||||
|
public dialogRef: MatDialogRef<saveOneDialog>, |
||||||
|
@Inject(MAT_DIALOG_DATA) public data) {} |
||||||
|
|
||||||
|
onNoClick(): void { |
||||||
|
this.dialogRef.close() |
||||||
|
} |
||||||
|
allDisposalNode = this.data.allDisposalNode |
||||||
|
|
||||||
|
saveType(type){ |
||||||
|
this.dialogRef.close() |
||||||
|
const dialogRef = this.dialog.open(saveTwoDialog, { |
||||||
|
data: {type: type, |
||||||
|
allDisposalNode: this.data.allDisposalNode, |
||||||
|
selectedBuildingData:this.data.selectedBuildingData, |
||||||
|
selectedSiteData:this.data.selectedSiteData, |
||||||
|
siteOrbuilding:this.data.siteOrbuilding, |
||||||
|
disasterId:this.data.disasterId} |
||||||
|
}); |
||||||
|
dialogRef.afterClosed().subscribe(result => { |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
// 保存想定作业第二个弹窗
|
||||||
|
@Component({ |
||||||
|
selector: 'dialog-overview-example-dialog', |
||||||
|
templateUrl: 'saveTwo.html', |
||||||
|
styleUrls: ['./collection-tools.component.scss'] |
||||||
|
}) |
||||||
|
export class saveTwoDialog { |
||||||
|
|
||||||
|
constructor( |
||||||
|
private http:HttpClient, |
||||||
|
public dialogRef: MatDialogRef<saveTwoDialog>, |
||||||
|
public canvasData: CanvasShareDataService, |
||||||
|
public snackBar: MatSnackBar, |
||||||
|
@Inject(MAT_DIALOG_DATA) public data) {} |
||||||
|
|
||||||
|
type = this.data.type |
||||||
|
allDisposalNode = this.data.allDisposalNode |
||||||
|
allPlanDisposalNode = [] |
||||||
|
allRootDisposalNode = [{name:"根节点",id:null}] |
||||||
|
allDisposalNodeChild = [] |
||||||
|
ngOnInit(): void { |
||||||
|
//所有非数据节点
|
||||||
|
this.allDisposalNode.forEach(item => { |
||||||
|
if(!item.sitePlanId && !item.buildingAreaId){ |
||||||
|
this.allPlanDisposalNode.push(item) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
//所有一级节点
|
||||||
|
this.allDisposalNode.forEach(item => { |
||||||
|
if(!item.parentId){ |
||||||
|
this.allRootDisposalNode.push(item) |
||||||
|
} |
||||||
|
}) |
||||||
|
this.allDisposalNodeChild = JSON.parse(JSON.stringify(this.allDisposalNode)) |
||||||
|
this.allDisposalNodeChild.forEach(item => { |
||||||
|
item.children = [] |
||||||
|
this.allDisposalNodeChild.forEach(i => { |
||||||
|
if(i.parentId == item.id){ |
||||||
|
item.children.push(i) |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
// console.log(this.nodeItem.id)
|
||||||
|
} |
||||||
|
onNoClick(): void { |
||||||
|
this.dialogRef.close(); |
||||||
|
} |
||||||
|
nodeItem |
||||||
|
itemChildNum = 0 //点击处置节点子数据节点的数量
|
||||||
|
clickNode(item){ |
||||||
|
console.log(item) |
||||||
|
this.nodeItem = item |
||||||
|
this.allDisposalNodeChild.forEach(item => { |
||||||
|
if(item.id == this.nodeItem.id){ |
||||||
|
this.itemChildNum = item.children.length |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
selectedBuildingData = this.data.selectedBuildingData |
||||||
|
selectedSiteData = this.data.selectedSiteData |
||||||
|
onSubmit(value,type){ |
||||||
|
// console.log(type)
|
||||||
|
let name = this.selectedBuildingData.name + '-' + this.selectedSiteData.name |
||||||
|
//如果保存到已有节点
|
||||||
|
var postdata = { |
||||||
|
id: "", |
||||||
|
name: name, |
||||||
|
level: 0, |
||||||
|
order: this.itemChildNum, |
||||||
|
description: "", |
||||||
|
notes: "", |
||||||
|
weather: null, |
||||||
|
airTemperature: null, |
||||||
|
windDirection: null, |
||||||
|
windScale: null, |
||||||
|
imageNames: null, |
||||||
|
imageUrls: null, |
||||||
|
parentId: this.nodeItem ? this.nodeItem.id : null, |
||||||
|
disasterId: this.data.disasterId, |
||||||
|
planComponentId: sessionStorage.getItem('planId') || '', |
||||||
|
companyId: this.data.siteOrbuilding == -1 ? sessionStorage.getItem('companyId') : null, |
||||||
|
sitePlanId: this.data.siteOrbuilding==-1 ? this.selectedSiteData.id : null, |
||||||
|
buildingId: this.selectedBuildingData.id || null, |
||||||
|
buildingAreaId: this.data.siteOrbuilding!=-1 ? this.selectedSiteData.id : null |
||||||
|
} |
||||||
|
if(type == 'old'){ |
||||||
|
let istrue = this.canvasData.findDisposalNode(this.nodeItem.id,name) |
||||||
|
let putdata = this.nodeItem |
||||||
|
putdata.weather = this.canvasData.selectPanelPointBaseData.weather |
||||||
|
putdata.airTemperature = Number(this.canvasData.selectPanelPointBaseData.airTemperature) |
||||||
|
putdata.windScale = Number(this.canvasData.selectPanelPointBaseData.windScale)
|
||||||
|
putdata.windDirection = Number(this.canvasData.selectPanelPointBaseData.windDirection)
|
||||||
|
putdata.description = this.canvasData.selectPanelPointBaseData.description |
||||||
|
putdata.notes = this.canvasData.selectPanelPointBaseData.notes |
||||||
|
|
||||||
|
|
||||||
|
if(istrue){//如果该处置节点下已有同名数据节点 则只修改 2个接口
|
||||||
|
new Promise((resolve,reject)=>{ |
||||||
|
this.http.put(`/api/DisposalNodes/${value.nodeId}`,putdata).subscribe(data => { |
||||||
|
resolve("更新处置节点成功,将天气 节点详情等信息保存到点击的节点") |
||||||
|
}) |
||||||
|
}).then((values)=>{ |
||||||
|
this.canvasData.sendMessage('send a message');//发布一条消息
|
||||||
|
// 保存平面图数据到当前节点
|
||||||
|
let postdata =JSON.parse(JSON.stringify(this.canvasData.selectPanelPoint))
|
||||||
|
postdata.Data = JSON.stringify(postdata.Data) |
||||||
|
this.http.post(`/api/DisposalNodeData`,postdata).subscribe(data => { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('保存成功','确定',config) |
||||||
|
},err=>{ |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('保存失败','确定',config) |
||||||
|
}) |
||||||
|
this.dialogRef.close(); |
||||||
|
this.canvasData.sendMessage('send a message');//发布一条消息
|
||||||
|
}) |
||||||
|
|
||||||
|
}else{//需要3个接口
|
||||||
|
new Promise((resolve,reject)=>{ |
||||||
|
this.http.put(`/api/DisposalNodes/${value.nodeId}`,putdata).subscribe(data => { |
||||||
|
resolve("更新处置节点成功,将天气 节点详情等信息保存到点击的节点") |
||||||
|
}) |
||||||
|
}).then((values)=>{ |
||||||
|
console.log(values) |
||||||
|
postdata.level = putdata.level + 1
|
||||||
|
new Promise((resolve,reject) => { |
||||||
|
this.http.post(`/api/DisposalNodes`,postdata).subscribe(data => { |
||||||
|
resolve(data) |
||||||
|
}) |
||||||
|
}).then((data:any)=>{ |
||||||
|
console.log(7788,data) |
||||||
|
let objData = { |
||||||
|
id: "", |
||||||
|
data: JSON.stringify(this.canvasData.selectPanelPoint.Data) || null, |
||||||
|
version: this.canvasData.selectPanelPoint.Version || "2.0", |
||||||
|
disposalNodeId: data.id, |
||||||
|
planComponentId: sessionStorage.getItem("planId"), |
||||||
|
} |
||||||
|
this.http.post(`/api/DisposalNodeData`,objData).subscribe(data => { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('保存成功','确定',config) |
||||||
|
},err=>{ |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('保存失败','确定',config) |
||||||
|
}) |
||||||
|
this.dialogRef.close(); |
||||||
|
this.canvasData.sendMessage('send a message');//发布一条消息
|
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
}else{//如果保存到新建节点
|
||||||
|
let dispositionNodeData //处置节点data
|
||||||
|
let order |
||||||
|
let oneLevelNum = [] |
||||||
|
//将order赋值为所有一级节点最后一个+1
|
||||||
|
this.allDisposalNode.forEach(item => { |
||||||
|
if(!item.parentId){ |
||||||
|
oneLevelNum.push(item) |
||||||
|
} |
||||||
|
}) |
||||||
|
if(oneLevelNum.length == 0){ |
||||||
|
order = 0 |
||||||
|
}else{ |
||||||
|
order = oneLevelNum[oneLevelNum.length - 1].order + 1 |
||||||
|
} |
||||||
|
|
||||||
|
if(this.nodeItem){//如果点击了下拉选择框
|
||||||
|
if(this.nodeItem.id != null){ |
||||||
|
this.allDisposalNodeChild.forEach(item => { |
||||||
|
if(item.id == this.nodeItem.id){ |
||||||
|
order = item.children.length |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
dispositionNodeData = { |
||||||
|
id: "", |
||||||
|
name: value.name, |
||||||
|
level: this.nodeItem && this.nodeItem.id != null ? this.nodeItem.level + 1 : 0, |
||||||
|
order: order, |
||||||
|
description: "", |
||||||
|
notes: "", |
||||||
|
weather: null, |
||||||
|
airTemperature: 0, |
||||||
|
windDirection: 0, |
||||||
|
windScale: 0, |
||||||
|
imageNames: null, |
||||||
|
imageUrls: null, |
||||||
|
parentId: this.nodeItem ? this.nodeItem.id : null, |
||||||
|
disasterId: this.data.disasterId, |
||||||
|
planComponentId: sessionStorage.getItem('planId') || '', |
||||||
|
companyId: null, |
||||||
|
sitePlanId: null, |
||||||
|
buildingId: null, |
||||||
|
buildingAreaId: null |
||||||
|
} |
||||||
|
|
||||||
|
dispositionNodeData.weather = this.canvasData.selectPanelPointBaseData.weather |
||||||
|
dispositionNodeData.airTemperature = Number(this.canvasData.selectPanelPointBaseData.airTemperature) |
||||||
|
dispositionNodeData.windScale = Number(this.canvasData.selectPanelPointBaseData.windScale)
|
||||||
|
dispositionNodeData.windDirection = Number(this.canvasData.selectPanelPointBaseData.windDirection)
|
||||||
|
dispositionNodeData.description = this.canvasData.selectPanelPointBaseData.description |
||||||
|
dispositionNodeData.notes = this.canvasData.selectPanelPointBaseData.notes |
||||||
|
//1.先创建一个处置节点 然后 .then 2.创建数据节点到刚创建的处置节点 3.然后拿着创建好的数据节点的id 将平面图data保存
|
||||||
|
new Promise((resolve,reject) => { |
||||||
|
this.http.post("/api/DisposalNodes",dispositionNodeData).subscribe((data:any) => { |
||||||
|
resolve(data.id) |
||||||
|
}) |
||||||
|
}).then((id) => { |
||||||
|
let dataNodeData
|
||||||
|
console.log("qnm",id) |
||||||
|
new Promise((resolve,reject) => { |
||||||
|
postdata.parentId = id |
||||||
|
postdata.level = dispositionNodeData.level + 1 |
||||||
|
this.http.post("/api/DisposalNodes",postdata).subscribe((data:any) => { |
||||||
|
resolve(data) |
||||||
|
}) |
||||||
|
}).then((data:any) => { |
||||||
|
// 保存平面图数据到当前节点
|
||||||
|
// console.log(6666,data)
|
||||||
|
// let postdata =JSON.parse(JSON.stringify(this.canvasData.selectPanelPoint))
|
||||||
|
// postdata.Data = JSON.stringify(postdata.Data)
|
||||||
|
let objData = { |
||||||
|
id: "", |
||||||
|
data: JSON.stringify(this.canvasData.selectPanelPoint.Data) || null, |
||||||
|
version: this.canvasData.selectPanelPoint.Version || "2.0", |
||||||
|
disposalNodeId: data.id, |
||||||
|
planComponentId: sessionStorage.getItem("planId"), |
||||||
|
} |
||||||
|
|
||||||
|
this.http.post(`/api/DisposalNodeData`,objData).subscribe(data => { |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('保存成功','确定',config) |
||||||
|
|
||||||
|
},err=>{ |
||||||
|
const config = new MatSnackBarConfig(); |
||||||
|
config.verticalPosition = 'top'; |
||||||
|
config.duration = 3000 |
||||||
|
this.snackBar.open('保存失败','确定',config) |
||||||
|
}) |
||||||
|
this.dialogRef.close(); |
||||||
|
this.canvasData.sendMessage("send a message") |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
<div mat-dialog-title>处置节点保存</div> |
||||||
|
<div style="display: flex;"> |
||||||
|
<button mat-stroked-button style="margin-right: 5px;" (click)="saveType('new')">新建节点并保存</button> |
||||||
|
<button mat-stroked-button (click)="saveType('old')">保存到已有节点</button> |
||||||
|
</div> |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
<div *ngIf="type == 'new'"> |
||||||
|
<div mat-dialog-title>新增节点</div> |
||||||
|
<div> |
||||||
|
<form (ngSubmit)="onSubmit(form.value,'new')" #form="ngForm" class="example-container"> |
||||||
|
|
||||||
|
<div mat-dialog-content> |
||||||
|
<mat-form-field> |
||||||
|
<input type="text" matInput ngModel |
||||||
|
required name="name" placeholder="节点名称" autocomplete="off"> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
<div mat-dialog-content> |
||||||
|
<mat-form-field> |
||||||
|
<mat-select [(value)]="allRootDisposalNode[0].name" required placeholder="父节点名称"> |
||||||
|
<mat-option *ngFor="let item of allRootDisposalNode" [value]="item.name" (click)="clickNode(item)"> |
||||||
|
{{item.name}} |
||||||
|
</mat-option> |
||||||
|
</mat-select> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
<div mat-dialog-actions> |
||||||
|
<button mat-raised-button color="primary" type="submit" |
||||||
|
[disabled]="!form.form.valid"> |
||||||
|
确定 |
||||||
|
</button> |
||||||
|
<button mat-raised-button mat-dialog-close>取消</button> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div *ngIf="type == 'old'"> |
||||||
|
<div mat-dialog-title>保存到已有节点</div> |
||||||
|
<div> |
||||||
|
<form (ngSubmit)="onSubmit(form.value,'old')" #form="ngForm" class="example-container"> |
||||||
|
<div mat-dialog-content> |
||||||
|
<mat-form-field> |
||||||
|
<mat-select required ngModel placeholder="父节点名称" name="nodeId"> |
||||||
|
<mat-option *ngFor="let item of allPlanDisposalNode" [value]="item.id" (click)="clickNode(item)"> |
||||||
|
{{item.name}} |
||||||
|
</mat-option> |
||||||
|
</mat-select> |
||||||
|
</mat-form-field> |
||||||
|
</div> |
||||||
|
<div mat-dialog-actions> |
||||||
|
<button mat-raised-button color="primary" type="submit" |
||||||
|
[disabled]="!form.form.valid"> |
||||||
|
确定 |
||||||
|
</button> |
||||||
|
<button mat-raised-button mat-dialog-close>取消</button> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
<div style="position: relative;width: 1400px;height: 800px;line-height: 800px;" class="swiper-container"> |
||||||
|
<div style="position: absolute;right: -2px;top: -392px;cursor: pointer;z-index: 999;width: 24px;height: 24px;" (click)="closeDialog()"> |
||||||
|
<span><mat-icon>clear</mat-icon></span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="swiper-wrapper"> |
||||||
|
<div class="swiper-slide" style="text-align: center;" *ngFor="let img of imagesArr"> |
||||||
|
<img id="bigimg" (mousewheel)="zoomimg($event)" style=" |
||||||
|
max-width: 96%; |
||||||
|
max-height: 100%; |
||||||
|
min-width: 1px; |
||||||
|
min-height: 1px; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
bottom: 0; |
||||||
|
right: 0; |
||||||
|
margin: auto;" [src]="img.PropertyValue" alt=""> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- 如果需要导航按钮 --> |
||||||
|
<div class="swiper-button-next"></div> |
||||||
|
<div class="swiper-button-prev"></div> |
||||||
|
</div> |
||||||
@ -0,0 +1,836 @@ |
|||||||
|
export class Charm { |
||||||
|
constructor(renderingEngine = PIXI) { |
||||||
|
|
||||||
|
if (renderingEngine === undefined) throw new Error("Please assign a rendering engine in the constructor before using charm.js"); |
||||||
|
|
||||||
|
//Find out which rendering engine is being used (the default is Pixi)
|
||||||
|
this.renderer = ""; |
||||||
|
|
||||||
|
//If the `renderingEngine` is Pixi, set up Pixi object aliases
|
||||||
|
if (renderingEngine.ParticleContainer && renderingEngine.Sprite) { |
||||||
|
this.renderer = "pixi"; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
//An array to store the global tweens
|
||||||
|
this.globalTweens = []; |
||||||
|
|
||||||
|
//An object that stores all the easing formulas
|
||||||
|
this.easingFormulas = { |
||||||
|
|
||||||
|
//Linear
|
||||||
|
linear(x) { |
||||||
|
return x; |
||||||
|
}, |
||||||
|
|
||||||
|
//Smoothstep
|
||||||
|
smoothstep(x) { |
||||||
|
return x * x * (3 - 2 * x); |
||||||
|
}, |
||||||
|
smoothstepSquared(x) { |
||||||
|
return Math.pow((x * x * (3 - 2 * x)), 2); |
||||||
|
}, |
||||||
|
smoothstepCubed(x) { |
||||||
|
return Math.pow((x * x * (3 - 2 * x)), 3); |
||||||
|
}, |
||||||
|
|
||||||
|
//Acceleration
|
||||||
|
acceleration(x) { |
||||||
|
return x * x; |
||||||
|
}, |
||||||
|
accelerationCubed(x) { |
||||||
|
return Math.pow(x * x, 3); |
||||||
|
}, |
||||||
|
|
||||||
|
//Deceleration
|
||||||
|
deceleration(x) { |
||||||
|
return 1 - Math.pow(1 - x, 2); |
||||||
|
}, |
||||||
|
decelerationCubed(x) { |
||||||
|
return 1 - Math.pow(1 - x, 3); |
||||||
|
}, |
||||||
|
|
||||||
|
//Sine
|
||||||
|
sine(x) { |
||||||
|
return Math.sin(x * Math.PI / 2); |
||||||
|
}, |
||||||
|
sineSquared(x) { |
||||||
|
return Math.pow(Math.sin(x * Math.PI / 2), 2); |
||||||
|
}, |
||||||
|
sineCubed(x) { |
||||||
|
return Math.pow(Math.sin(x * Math.PI / 2), 2); |
||||||
|
}, |
||||||
|
inverseSine(x) { |
||||||
|
return 1 - Math.sin((1 - x) * Math.PI / 2); |
||||||
|
}, |
||||||
|
inverseSineSquared(x) { |
||||||
|
return 1 - Math.pow(Math.sin((1 - x) * Math.PI / 2), 2); |
||||||
|
}, |
||||||
|
inverseSineCubed(x) { |
||||||
|
return 1 - Math.pow(Math.sin((1 - x) * Math.PI / 2), 3); |
||||||
|
}, |
||||||
|
|
||||||
|
//Spline
|
||||||
|
spline(t, p0, p1, p2, p3) { |
||||||
|
return 0.5 * ( |
||||||
|
(2 * p1) + |
||||||
|
(-p0 + p2) * t + |
||||||
|
(2 * p0 - 5 * p1 + 4 * p2 - p3) * t * t + |
||||||
|
(-p0 + 3 * p1 - 3 * p2 + p3) * t * t * t |
||||||
|
); |
||||||
|
}, |
||||||
|
|
||||||
|
//Bezier curve
|
||||||
|
cubicBezier(t, a, b, c, d) { |
||||||
|
let t2 = t * t; |
||||||
|
let t3 = t2 * t; |
||||||
|
return a + (-a * 3 + t * (3 * a - a * t)) * t + (3 * b + t * (-6 * b + b * 3 * t)) * t + (c * 3 - c * 3 * t) * t2 + d * t3; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//Add `scaleX` and `scaleY` properties to Pixi sprites
|
||||||
|
this._addScaleProperties = (sprite) => { |
||||||
|
if (this.renderer === "pixi") { |
||||||
|
if (!("scaleX" in sprite) && ("scale" in sprite) && ("x" in sprite.scale)) { |
||||||
|
Object.defineProperty( |
||||||
|
sprite, |
||||||
|
"scaleX", { |
||||||
|
get() { |
||||||
|
return sprite.scale.x |
||||||
|
}, |
||||||
|
set(value) { |
||||||
|
sprite.scale.x = value |
||||||
|
} |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
if (!("scaleY" in sprite) && ("scale" in sprite) && ("y" in sprite.scale)) { |
||||||
|
Object.defineProperty( |
||||||
|
sprite, |
||||||
|
"scaleY", { |
||||||
|
get() { |
||||||
|
return sprite.scale.y |
||||||
|
}, |
||||||
|
set(value) { |
||||||
|
sprite.scale.y = value |
||||||
|
} |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
//The low level `tweenProperty` function is used as the foundation
|
||||||
|
//for the the higher level tween methods.
|
||||||
|
tweenProperty( |
||||||
|
sprite, //Sprite object
|
||||||
|
property, //String property
|
||||||
|
startValue, //Tween start value
|
||||||
|
endValue, //Tween end value
|
||||||
|
totalFrames, //Duration in frames
|
||||||
|
type = "smoothstep", //The easing type
|
||||||
|
yoyo = false, //Yoyo?
|
||||||
|
delayBeforeRepeat = 0 //Delay in frames before repeating
|
||||||
|
) { |
||||||
|
|
||||||
|
//Create the tween object
|
||||||
|
let o = {}; |
||||||
|
|
||||||
|
//If the tween is a bounce type (a spline), set the
|
||||||
|
//start and end magnitude values
|
||||||
|
let typeArray = type.split(" "); |
||||||
|
if (typeArray[0] === "bounce") { |
||||||
|
o.startMagnitude = parseInt(typeArray[1]); |
||||||
|
o.endMagnitude = parseInt(typeArray[2]); |
||||||
|
} |
||||||
|
|
||||||
|
//Use `o.start` to make a new tween using the current
|
||||||
|
//end point values
|
||||||
|
o.start = (startValue, endValue) => { |
||||||
|
|
||||||
|
//Clone the start and end values so that any possible references to sprite
|
||||||
|
//properties are converted to ordinary numbers
|
||||||
|
o.startValue = JSON.parse(JSON.stringify(startValue)); |
||||||
|
o.endValue = JSON.parse(JSON.stringify(endValue)); |
||||||
|
o.playing = true; |
||||||
|
o.totalFrames = totalFrames; |
||||||
|
o.frameCounter = 0; |
||||||
|
|
||||||
|
//Add the tween to the global `tweens` array. The `tweens` array is
|
||||||
|
//updated on each frame
|
||||||
|
this.globalTweens.push(o); |
||||||
|
}; |
||||||
|
|
||||||
|
//Call `o.start` to start the tween
|
||||||
|
o.start(startValue, endValue); |
||||||
|
|
||||||
|
//The `update` method will be called on each frame by the game loop.
|
||||||
|
//This is what makes the tween move
|
||||||
|
o.update = () => { |
||||||
|
|
||||||
|
let time, curvedTime; |
||||||
|
|
||||||
|
if (o.playing) { |
||||||
|
|
||||||
|
//If the elapsed frames are less than the total frames,
|
||||||
|
//use the tweening formulas to move the sprite
|
||||||
|
if (o.frameCounter < o.totalFrames) { |
||||||
|
|
||||||
|
//Find the normalized value
|
||||||
|
let normalizedTime = o.frameCounter / o.totalFrames; |
||||||
|
|
||||||
|
//Select the correct easing function from the
|
||||||
|
//`ease` object’s library of easing functions
|
||||||
|
|
||||||
|
|
||||||
|
//If it's not a spline, use one of the ordinary easing functions
|
||||||
|
if (typeArray[0] !== "bounce") { |
||||||
|
curvedTime = this.easingFormulas[type](normalizedTime); |
||||||
|
} |
||||||
|
|
||||||
|
//If it's a spline, use the `spline` function and apply the
|
||||||
|
//2 additional `type` array values as the spline's start and
|
||||||
|
//end points
|
||||||
|
else { |
||||||
|
curvedTime = this.easingFormulas.spline(normalizedTime, o.startMagnitude, 0, 1, o.endMagnitude); |
||||||
|
} |
||||||
|
|
||||||
|
//Interpolate the sprite's property based on the curve
|
||||||
|
sprite[property] = (o.endValue * curvedTime) + (o.startValue * (1 - curvedTime)); |
||||||
|
|
||||||
|
o.frameCounter += 1; |
||||||
|
} |
||||||
|
|
||||||
|
//When the tween has finished playing, run the end tasks
|
||||||
|
else { |
||||||
|
sprite[property] = o.endValue; |
||||||
|
o.end(); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//The `end` method will be called when the tween is finished
|
||||||
|
o.end = () => { |
||||||
|
|
||||||
|
//Set `playing` to `false`
|
||||||
|
o.playing = false; |
||||||
|
|
||||||
|
//Call the tween's `onComplete` method, if it's been assigned
|
||||||
|
if (o.onComplete) o.onComplete(); |
||||||
|
|
||||||
|
//Remove the tween from the `tweens` array
|
||||||
|
this.globalTweens.splice(this.globalTweens.indexOf(o), 1); |
||||||
|
|
||||||
|
//If the tween's `yoyo` property is `true`, create a new tween
|
||||||
|
//using the same values, but use the current tween's `startValue`
|
||||||
|
//as the next tween's `endValue`
|
||||||
|
if (yoyo) { |
||||||
|
this.wait(delayBeforeRepeat).then(() => { |
||||||
|
o.start(o.endValue, o.startValue); |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//Pause and play methods
|
||||||
|
o.play = () => o.playing = true; |
||||||
|
o.pause = () => o.playing = false; |
||||||
|
|
||||||
|
//Return the tween object
|
||||||
|
return o; |
||||||
|
} |
||||||
|
|
||||||
|
//`makeTween` is a general low-level method for making complex tweens
|
||||||
|
//out of multiple `tweenProperty` functions. Its one argument,
|
||||||
|
//`tweensToAdd` is an array containing multiple `tweenProperty` calls
|
||||||
|
|
||||||
|
makeTween(tweensToAdd) { |
||||||
|
|
||||||
|
//Create an object to manage the tweens
|
||||||
|
let o = {}; |
||||||
|
|
||||||
|
//Create a `tweens` array to store the new tweens
|
||||||
|
o.tweens = []; |
||||||
|
|
||||||
|
//Make a new tween for each array
|
||||||
|
tweensToAdd.forEach(tweenPropertyArguments => { |
||||||
|
|
||||||
|
//Use the tween property arguments to make a new tween
|
||||||
|
let newTween = this.tweenProperty(...tweenPropertyArguments); |
||||||
|
|
||||||
|
//Push the new tween into this object's internal `tweens` array
|
||||||
|
o.tweens.push(newTween); |
||||||
|
}); |
||||||
|
|
||||||
|
//Add a counter to keep track of the
|
||||||
|
//number of tweens that have completed their actions
|
||||||
|
let completionCounter = 0; |
||||||
|
|
||||||
|
//`o.completed` will be called each time one of the tweens
|
||||||
|
//finishes
|
||||||
|
o.completed = () => { |
||||||
|
|
||||||
|
//Add 1 to the `completionCounter`
|
||||||
|
completionCounter += 1; |
||||||
|
|
||||||
|
//If all tweens have finished, call the user-defined `onComplete`
|
||||||
|
//method, if it's been assigned. Reset the `completionCounter`
|
||||||
|
if (completionCounter === o.tweens.length) { |
||||||
|
if (o.onComplete) o.onComplete(); |
||||||
|
completionCounter = 0; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//Add `onComplete` methods to all tweens
|
||||||
|
o.tweens.forEach(tween => { |
||||||
|
tween.onComplete = () => o.completed(); |
||||||
|
}); |
||||||
|
|
||||||
|
//Add pause and play methods to control all the tweens
|
||||||
|
o.pause = () => { |
||||||
|
o.tweens.forEach(tween => { |
||||||
|
tween.playing = false; |
||||||
|
}); |
||||||
|
}; |
||||||
|
o.play = () => { |
||||||
|
o.tweens.forEach(tween => { |
||||||
|
tween.playing = true; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//Return the tween object
|
||||||
|
return o; |
||||||
|
} |
||||||
|
|
||||||
|
/* High level tween methods */ |
||||||
|
|
||||||
|
//1. Simple tweens
|
||||||
|
|
||||||
|
//`fadeOut`
|
||||||
|
fadeOut(sprite, frames = 60) { |
||||||
|
return this.tweenProperty( |
||||||
|
sprite, "alpha", sprite.alpha, 0, frames, "sine" |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
//`fadeIn`
|
||||||
|
fadeIn(sprite, frames = 60) { |
||||||
|
return this.tweenProperty( |
||||||
|
sprite, "alpha", sprite.alpha, 1, frames, "sine" |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
//`pulse`
|
||||||
|
//Fades the sprite in and out at a steady rate.
|
||||||
|
//Set the `minAlpha` to something greater than 0 if you
|
||||||
|
//don't want the sprite to fade away completely
|
||||||
|
pulse(sprite, frames = 60, minAlpha = 0) { |
||||||
|
return this.tweenProperty( |
||||||
|
sprite, "alpha", sprite.alpha, minAlpha, frames, "smoothstep", true |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
//2. Complex tweens
|
||||||
|
|
||||||
|
slide( |
||||||
|
sprite, endX, endY, |
||||||
|
frames = 60, type = "smoothstep", yoyo = false, delayBeforeRepeat = 0 |
||||||
|
) { |
||||||
|
return this.makeTween([ |
||||||
|
|
||||||
|
//Create the x axis tween
|
||||||
|
[sprite, "x", sprite.x, endX, frames, type, yoyo, delayBeforeRepeat], |
||||||
|
|
||||||
|
//Create the y axis tween
|
||||||
|
[sprite, "y", sprite.y, endY, frames, type, yoyo, delayBeforeRepeat] |
||||||
|
|
||||||
|
]); |
||||||
|
} |
||||||
|
|
||||||
|
breathe( |
||||||
|
sprite, endScaleX = 0.8, endScaleY = 0.8, |
||||||
|
frames = 60, yoyo = true, delayBeforeRepeat = 0 |
||||||
|
) { |
||||||
|
|
||||||
|
//Add `scaleX` and `scaleY` properties to Pixi sprites
|
||||||
|
this._addScaleProperties(sprite); |
||||||
|
|
||||||
|
return this.makeTween([ |
||||||
|
|
||||||
|
//Create the scaleX tween
|
||||||
|
[ |
||||||
|
sprite, "scaleX", sprite.scaleX, endScaleX, |
||||||
|
frames, "smoothstepSquared", yoyo, delayBeforeRepeat |
||||||
|
], |
||||||
|
|
||||||
|
//Create the scaleY tween
|
||||||
|
[ |
||||||
|
sprite, "scaleY", sprite.scaleY, endScaleY, |
||||||
|
frames, "smoothstepSquared", yoyo, delayBeforeRepeat |
||||||
|
] |
||||||
|
]); |
||||||
|
} |
||||||
|
|
||||||
|
scale(sprite, endScaleX = 0.5, endScaleY = 0.5, frames = 60) { |
||||||
|
|
||||||
|
//Add `scaleX` and `scaleY` properties to Pixi sprites
|
||||||
|
this._addScaleProperties(sprite); |
||||||
|
|
||||||
|
return this.makeTween([ |
||||||
|
|
||||||
|
//Create the scaleX tween
|
||||||
|
[ |
||||||
|
sprite, "scaleX", sprite.scaleX, endScaleX, |
||||||
|
frames, "smoothstep", false |
||||||
|
], |
||||||
|
|
||||||
|
//Create the scaleY tween
|
||||||
|
[ |
||||||
|
sprite, "scaleY", sprite.scaleY, endScaleY, |
||||||
|
frames, "smoothstep", false |
||||||
|
] |
||||||
|
]); |
||||||
|
} |
||||||
|
|
||||||
|
strobe( |
||||||
|
sprite, scaleFactor = 1.3, startMagnitude = 10, endMagnitude = 20, |
||||||
|
frames = 10, yoyo = true, delayBeforeRepeat = 0 |
||||||
|
) { |
||||||
|
|
||||||
|
let bounce = "bounce " + startMagnitude + " " + endMagnitude; |
||||||
|
|
||||||
|
//Add `scaleX` and `scaleY` properties to Pixi sprites
|
||||||
|
this._addScaleProperties(sprite); |
||||||
|
|
||||||
|
return this.makeTween([ |
||||||
|
|
||||||
|
//Create the scaleX tween
|
||||||
|
[ |
||||||
|
sprite, "scaleX", sprite.scaleX, scaleFactor, frames, |
||||||
|
bounce, yoyo, delayBeforeRepeat |
||||||
|
], |
||||||
|
|
||||||
|
//Create the scaleY tween
|
||||||
|
[ |
||||||
|
sprite, "scaleY", sprite.scaleY, scaleFactor, frames, |
||||||
|
bounce, yoyo, delayBeforeRepeat |
||||||
|
] |
||||||
|
]); |
||||||
|
} |
||||||
|
|
||||||
|
wobble( |
||||||
|
sprite, |
||||||
|
scaleFactorX = 1.2, |
||||||
|
scaleFactorY = 1.2, |
||||||
|
frames = 10, |
||||||
|
xStartMagnitude = 10, |
||||||
|
xEndMagnitude = 10, |
||||||
|
yStartMagnitude = -10, |
||||||
|
yEndMagnitude = -10, |
||||||
|
friction = 0.98, |
||||||
|
yoyo = true, |
||||||
|
delayBeforeRepeat = 0 |
||||||
|
) { |
||||||
|
|
||||||
|
let bounceX = "bounce " + xStartMagnitude + " " + xEndMagnitude; |
||||||
|
let bounceY = "bounce " + yStartMagnitude + " " + yEndMagnitude; |
||||||
|
|
||||||
|
//Add `scaleX` and `scaleY` properties to Pixi sprites
|
||||||
|
this._addScaleProperties(sprite); |
||||||
|
|
||||||
|
let o = this.makeTween([ |
||||||
|
|
||||||
|
//Create the scaleX tween
|
||||||
|
[ |
||||||
|
sprite, "scaleX", sprite.scaleX, scaleFactorX, frames, |
||||||
|
bounceX, yoyo, delayBeforeRepeat |
||||||
|
], |
||||||
|
|
||||||
|
//Create the scaleY tween
|
||||||
|
[ |
||||||
|
sprite, "scaleY", sprite.scaleY, scaleFactorY, frames, |
||||||
|
bounceY, yoyo, delayBeforeRepeat |
||||||
|
] |
||||||
|
]); |
||||||
|
|
||||||
|
//Add some friction to the `endValue` at the end of each tween
|
||||||
|
o.tweens.forEach(tween => { |
||||||
|
tween.onComplete = () => { |
||||||
|
|
||||||
|
//Add friction if the `endValue` is greater than 1
|
||||||
|
if (tween.endValue > 1) { |
||||||
|
tween.endValue *= friction; |
||||||
|
|
||||||
|
//Set the `endValue` to 1 when the effect is finished and
|
||||||
|
//remove the tween from the global `tweens` array
|
||||||
|
if (tween.endValue <= 1) { |
||||||
|
tween.endValue = 1; |
||||||
|
this.removeTween(tween); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
return o; |
||||||
|
} |
||||||
|
|
||||||
|
//3. Motion path tweens
|
||||||
|
|
||||||
|
followCurve( |
||||||
|
sprite, |
||||||
|
pointsArray, |
||||||
|
totalFrames, |
||||||
|
type = "smoothstep", |
||||||
|
yoyo = false, |
||||||
|
delayBeforeRepeat = 0 |
||||||
|
) { |
||||||
|
|
||||||
|
//Create the tween object
|
||||||
|
let o = {}; |
||||||
|
|
||||||
|
//If the tween is a bounce type (a spline), set the
|
||||||
|
//start and end magnitude values
|
||||||
|
let typeArray = type.split(" "); |
||||||
|
if (typeArray[0] === "bounce") { |
||||||
|
o.startMagnitude = parseInt(typeArray[1]); |
||||||
|
o.endMagnitude = parseInt(typeArray[2]); |
||||||
|
} |
||||||
|
|
||||||
|
//Use `tween.start` to make a new tween using the current
|
||||||
|
//end point values
|
||||||
|
o.start = (pointsArray) => { |
||||||
|
o.playing = true; |
||||||
|
o.totalFrames = totalFrames; |
||||||
|
o.frameCounter = 0; |
||||||
|
|
||||||
|
//Clone the points array
|
||||||
|
o.pointsArray = JSON.parse(JSON.stringify(pointsArray)); |
||||||
|
|
||||||
|
//Add the tween to the `globalTweens` array. The `globalTweens` array is
|
||||||
|
//updated on each frame
|
||||||
|
this.globalTweens.push(o); |
||||||
|
}; |
||||||
|
|
||||||
|
//Call `tween.start` to start the first tween
|
||||||
|
o.start(pointsArray); |
||||||
|
|
||||||
|
//The `update` method will be called on each frame by the game loop.
|
||||||
|
//This is what makes the tween move
|
||||||
|
o.update = () => { |
||||||
|
|
||||||
|
let normalizedTime, curvedTime, |
||||||
|
p = o.pointsArray; |
||||||
|
|
||||||
|
if (o.playing) { |
||||||
|
|
||||||
|
//If the elapsed frames are less than the total frames,
|
||||||
|
//use the tweening formulas to move the sprite
|
||||||
|
if (o.frameCounter < o.totalFrames) { |
||||||
|
|
||||||
|
//Find the normalized value
|
||||||
|
normalizedTime = o.frameCounter / o.totalFrames; |
||||||
|
|
||||||
|
//Select the correct easing function
|
||||||
|
|
||||||
|
//If it's not a spline, use one of the ordinary tween
|
||||||
|
//functions
|
||||||
|
if (typeArray[0] !== "bounce") { |
||||||
|
curvedTime = this.easingFormulas[type](normalizedTime); |
||||||
|
} |
||||||
|
|
||||||
|
//If it's a spline, use the `spline` function and apply the
|
||||||
|
//2 additional `type` array values as the spline's start and
|
||||||
|
//end points
|
||||||
|
else { |
||||||
|
//curve = tweenFunction.spline(n, type[1], 0, 1, type[2]);
|
||||||
|
curvedTime = this.easingFormulas.spline(normalizedTime, o.startMagnitude, 0, 1, o.endMagnitude); |
||||||
|
} |
||||||
|
|
||||||
|
//Apply the Bezier curve to the sprite's position
|
||||||
|
sprite.x = this.easingFormulas.cubicBezier(curvedTime, p[0][0], p[1][0], p[2][0], p[3][0]); |
||||||
|
sprite.y = this.easingFormulas.cubicBezier(curvedTime, p[0][1], p[1][1], p[2][1], p[3][1]); |
||||||
|
|
||||||
|
//Add one to the `elapsedFrames`
|
||||||
|
o.frameCounter += 1; |
||||||
|
} |
||||||
|
|
||||||
|
//When the tween has finished playing, run the end tasks
|
||||||
|
else { |
||||||
|
//sprite[property] = o.endValue;
|
||||||
|
o.end(); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//The `end` method will be called when the tween is finished
|
||||||
|
o.end = () => { |
||||||
|
|
||||||
|
//Set `playing` to `false`
|
||||||
|
o.playing = false; |
||||||
|
|
||||||
|
//Call the tween's `onComplete` method, if it's been
|
||||||
|
//assigned
|
||||||
|
if (o.onComplete) o.onComplete(); |
||||||
|
|
||||||
|
//Remove the tween from the global `tweens` array
|
||||||
|
this.globalTweens.splice(this.globalTweens.indexOf(o), 1); |
||||||
|
|
||||||
|
//If the tween's `yoyo` property is `true`, reverse the array and
|
||||||
|
//use it to create a new tween
|
||||||
|
if (yoyo) { |
||||||
|
this.wait(delayBeforeRepeat).then(() => { |
||||||
|
o.pointsArray = o.pointsArray.reverse(); |
||||||
|
o.start(o.pointsArray); |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//Pause and play methods
|
||||||
|
o.pause = () => { |
||||||
|
o.playing = false; |
||||||
|
}; |
||||||
|
o.play = () => { |
||||||
|
o.playing = true; |
||||||
|
}; |
||||||
|
|
||||||
|
//Return the tween object
|
||||||
|
return o; |
||||||
|
} |
||||||
|
|
||||||
|
walkPath( |
||||||
|
sprite, //The sprite
|
||||||
|
originalPathArray, //A 2D array of waypoints
|
||||||
|
totalFrames = 300, //The duration, in frames
|
||||||
|
type = "smoothstep", //The easing type
|
||||||
|
loop = false, //Should the animation loop?
|
||||||
|
yoyo = false, //Shoud the direction reverse?
|
||||||
|
delayBetweenSections = 0 //Delay, in milliseconds, between sections
|
||||||
|
) { |
||||||
|
|
||||||
|
//Clone the path array so that any possible references to sprite
|
||||||
|
//properties are converted into ordinary numbers
|
||||||
|
let pathArray = JSON.parse(JSON.stringify(originalPathArray)); |
||||||
|
|
||||||
|
//Figure out the duration, in frames, of each path section by
|
||||||
|
//dividing the `totalFrames` by the length of the `pathArray`
|
||||||
|
let frames = totalFrames / pathArray.length; |
||||||
|
|
||||||
|
//Set the current point to 0, which will be the first waypoint
|
||||||
|
let currentPoint = 0; |
||||||
|
|
||||||
|
//The `makePath` function creates a single tween between two points and
|
||||||
|
//then schedules the next path to be made after it
|
||||||
|
let makePath = (currentPoint) => { |
||||||
|
|
||||||
|
//Use the `makeTween` function to tween the sprite's
|
||||||
|
//x and y position
|
||||||
|
let tween = this.makeTween([ |
||||||
|
|
||||||
|
//Create the x axis tween between the first x value in the
|
||||||
|
//current point and the x value in the following point
|
||||||
|
[ |
||||||
|
sprite, |
||||||
|
"x", |
||||||
|
pathArray[currentPoint][0], |
||||||
|
pathArray[currentPoint + 1][0], |
||||||
|
frames, |
||||||
|
type |
||||||
|
], |
||||||
|
|
||||||
|
//Create the y axis tween in the same way
|
||||||
|
[ |
||||||
|
sprite, |
||||||
|
"y", |
||||||
|
pathArray[currentPoint][1], |
||||||
|
pathArray[currentPoint + 1][1], |
||||||
|
frames, |
||||||
|
type |
||||||
|
] |
||||||
|
]); |
||||||
|
|
||||||
|
//When the tween is complete, advance the `currentPoint` by one.
|
||||||
|
//Add an optional delay between path segments, and then make the
|
||||||
|
//next connecting path
|
||||||
|
tween.onComplete = () => { |
||||||
|
|
||||||
|
//Advance to the next point
|
||||||
|
currentPoint += 1; |
||||||
|
|
||||||
|
//If the sprite hasn't reached the end of the
|
||||||
|
//path, tween the sprite to the next point
|
||||||
|
if (currentPoint < pathArray.length - 1) { |
||||||
|
this.wait(delayBetweenSections).then(() => { |
||||||
|
tween = makePath(currentPoint); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//If we've reached the end of the path, optionally
|
||||||
|
//loop and yoyo it
|
||||||
|
else { |
||||||
|
|
||||||
|
//Reverse the path if `loop` is `true`
|
||||||
|
if (loop) { |
||||||
|
|
||||||
|
//Reverse the array if `yoyo` is `true`
|
||||||
|
if (yoyo) pathArray.reverse(); |
||||||
|
|
||||||
|
//Optionally wait before restarting
|
||||||
|
this.wait(delayBetweenSections).then(() => { |
||||||
|
|
||||||
|
//Reset the `currentPoint` to 0 so that we can
|
||||||
|
//restart at the first point
|
||||||
|
currentPoint = 0; |
||||||
|
|
||||||
|
//Set the sprite to the first point
|
||||||
|
sprite.x = pathArray[0][0]; |
||||||
|
sprite.y = pathArray[0][1]; |
||||||
|
|
||||||
|
//Make the first new path
|
||||||
|
tween = makePath(currentPoint); |
||||||
|
|
||||||
|
//... and so it continues!
|
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//Return the path tween to the main function
|
||||||
|
return tween; |
||||||
|
}; |
||||||
|
|
||||||
|
//Make the first path using the internal `makePath` function (below)
|
||||||
|
let tween = makePath(currentPoint); |
||||||
|
|
||||||
|
//Pass the tween back to the main program
|
||||||
|
return tween; |
||||||
|
} |
||||||
|
|
||||||
|
walkCurve( |
||||||
|
sprite, //The sprite
|
||||||
|
pathArray, //2D array of Bezier curves
|
||||||
|
totalFrames = 300, //The duration, in frames
|
||||||
|
type = "smoothstep", //The easing type
|
||||||
|
loop = false, //Should the animation loop?
|
||||||
|
yoyo = false, //Should the direction reverse?
|
||||||
|
delayBeforeContinue = 0 //Delay, in milliseconds, between sections
|
||||||
|
) { |
||||||
|
|
||||||
|
//Divide the `totalFrames` into sections for each part of the path
|
||||||
|
let frames = totalFrames / pathArray.length; |
||||||
|
|
||||||
|
//Set the current curve to 0, which will be the first one
|
||||||
|
let currentCurve = 0; |
||||||
|
|
||||||
|
//The `makePath` function
|
||||||
|
let makePath = (currentCurve) => { |
||||||
|
|
||||||
|
//Use the custom `followCurve` function to make
|
||||||
|
//a sprite follow a curve
|
||||||
|
let tween = this.followCurve( |
||||||
|
sprite, |
||||||
|
pathArray[currentCurve], |
||||||
|
frames, |
||||||
|
type |
||||||
|
); |
||||||
|
|
||||||
|
//When the tween is complete, advance the `currentCurve` by one.
|
||||||
|
//Add an optional delay between path segments, and then make the
|
||||||
|
//next path
|
||||||
|
tween.onComplete = () => { |
||||||
|
currentCurve += 1; |
||||||
|
if (currentCurve < pathArray.length) { |
||||||
|
this.wait(delayBeforeContinue).then(() => { |
||||||
|
tween = makePath(currentCurve); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//If we've reached the end of the path, optionally
|
||||||
|
//loop and reverse it
|
||||||
|
else { |
||||||
|
if (loop) { |
||||||
|
if (yoyo) { |
||||||
|
|
||||||
|
//Reverse order of the curves in the `pathArray`
|
||||||
|
pathArray.reverse(); |
||||||
|
|
||||||
|
//Reverse the order of the points in each curve
|
||||||
|
pathArray.forEach(curveArray => curveArray.reverse()); |
||||||
|
} |
||||||
|
|
||||||
|
//After an optional delay, reset the sprite to the
|
||||||
|
//beginning of the path and make the next new path
|
||||||
|
this.wait(delayBeforeContinue).then(() => { |
||||||
|
currentCurve = 0; |
||||||
|
sprite.x = pathArray[0][0]; |
||||||
|
sprite.y = pathArray[0][1]; |
||||||
|
tween = makePath(currentCurve); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//Return the path tween to the main function
|
||||||
|
return tween; |
||||||
|
}; |
||||||
|
|
||||||
|
//Make the first path
|
||||||
|
let tween = makePath(currentCurve); |
||||||
|
|
||||||
|
//Pass the tween back to the main program
|
||||||
|
return tween; |
||||||
|
} |
||||||
|
|
||||||
|
//4. Utilities
|
||||||
|
|
||||||
|
/* |
||||||
|
The `wait` method lets you set up a timed sequence of events |
||||||
|
|
||||||
|
wait(1000) |
||||||
|
.then(() => console.log("One")) |
||||||
|
.then(() => wait(1000)) |
||||||
|
.then(() => console.log("Two")) |
||||||
|
.then(() => wait(1000)) |
||||||
|
.then(() => console.log("Three")) |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
wait(duration = 0) { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
setTimeout(resolve, duration); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//A utility to remove tweens from the game
|
||||||
|
removeTween(tweenObject) { |
||||||
|
|
||||||
|
//Remove the tween if `tweenObject` doesn't have any nested
|
||||||
|
//tween objects
|
||||||
|
if (!tweenObject.tweens) { |
||||||
|
tweenObject.pause(); |
||||||
|
|
||||||
|
//array.splice(-1,1) will always remove last elemnt of array, so this
|
||||||
|
//extra check prevents that (Thank you, MCumic10! https://github.com/kittykatattack/charm/issues/5)
|
||||||
|
if (this.globalTweens.indexOf(tweenObject) != -1) { |
||||||
|
this.globalTweens.splice(this.globalTweens.indexOf(tweenObject), 1); |
||||||
|
} |
||||||
|
|
||||||
|
//Otherwise, remove the nested tween objects
|
||||||
|
} else { |
||||||
|
tweenObject.pause(); |
||||||
|
tweenObject.tweens.forEach(element => { |
||||||
|
this.globalTweens.splice(this.globalTweens.indexOf(element), 1); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
update() { |
||||||
|
|
||||||
|
//Update all the tween objects in the `globalTweens` array
|
||||||
|
if (this.globalTweens.length > 0) { |
||||||
|
for (let i = this.globalTweens.length - 1; i >= 0; i--) { |
||||||
|
let tween = this.globalTweens[i]; |
||||||
|
if (tween) tween.update(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,62 @@ |
|||||||
|
/** |
||||||
|
* 属性 |
||||||
|
*/ |
||||||
|
export class PropertyInfo { |
||||||
|
constructor(instanceData: any) { |
||||||
|
this.Tag = instanceData.tag; |
||||||
|
this.Order = instanceData.order; |
||||||
|
this.Enabled = instanceData.enabled; |
||||||
|
this.Visible = instanceData.visible; |
||||||
|
this.Required = instanceData.required; |
||||||
|
this.RuleName = instanceData.ruleName; |
||||||
|
this.RuleValue = instanceData.ruleValue; |
||||||
|
this.PhysicalUnit = instanceData.physicalUnit; |
||||||
|
this.PropertyName = instanceData.propertyName; |
||||||
|
this.PropertyType = instanceData.propertyType; |
||||||
|
this.PropertyValue = instanceData.propertyValue; |
||||||
|
} |
||||||
|
/** |
||||||
|
* 标记位,用于扩展 |
||||||
|
*/ |
||||||
|
public Tag: string; |
||||||
|
/** |
||||||
|
* 属性排序 |
||||||
|
*/ |
||||||
|
public Order: number; |
||||||
|
/** |
||||||
|
* 是否启用 |
||||||
|
*/ |
||||||
|
public Enabled: boolean; |
||||||
|
/** |
||||||
|
* 是否可见 |
||||||
|
*/ |
||||||
|
public Visible: boolean; |
||||||
|
/** |
||||||
|
* 必填 |
||||||
|
*/ |
||||||
|
public Required: boolean; |
||||||
|
/** |
||||||
|
* 验证规则名称 |
||||||
|
*/ |
||||||
|
public RuleName: string; |
||||||
|
/** |
||||||
|
* 验证规则值 |
||||||
|
*/ |
||||||
|
public RuleValue: string; |
||||||
|
/** |
||||||
|
* 物理单位 |
||||||
|
*/ |
||||||
|
public PhysicalUnit: string; |
||||||
|
/** |
||||||
|
* 属性名称 |
||||||
|
*/ |
||||||
|
public PropertyName: string; |
||||||
|
/** |
||||||
|
* 属性类型 |
||||||
|
*/ |
||||||
|
public PropertyType: number; |
||||||
|
/** |
||||||
|
* 属性值 |
||||||
|
*/ |
||||||
|
public PropertyValue: string; |
||||||
|
} |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
import { WorkingAreaComponent } from '../working-area.component'; |
||||||
|
import * as PIXI from 'pixi.js'; |
||||||
|
|
||||||
|
/** |
||||||
|
* 箭头 |
||||||
|
* 创建一个只有2个点组成的箭头 |
||||||
|
*/ |
||||||
|
export class Arrows extends PIXI.Container { |
||||||
|
public line: PIXI.Graphics = new PIXI.Graphics(); |
||||||
|
public ready = false; |
||||||
|
constructor(public assetData: any, private workingArea: WorkingAreaComponent) { |
||||||
|
super(); |
||||||
|
this.workingArea.backgroundImage.addChild(this); |
||||||
|
this.name = this.assetData.Id; |
||||||
|
this.addChild(this.line); |
||||||
|
this.refresh(); |
||||||
|
this.interactive = true; |
||||||
|
this.on('mousedown', event => { |
||||||
|
if (!this.ready) { return; } |
||||||
|
event.stopPropagation(); |
||||||
|
this.workingArea.selection.selectOne(this); |
||||||
|
}); |
||||||
|
} |
||||||
|
/** |
||||||
|
* 刷新 |
||||||
|
*/ |
||||||
|
public refresh() { |
||||||
|
this.line.clear(); |
||||||
|
this.line.lineStyle(5, 0xff0000, 1); |
||||||
|
this.line.moveTo(this.assetData.pointA.x, this.assetData.pointA.y); |
||||||
|
this.line.lineTo(this.assetData.pointB.x, this.assetData.pointB.y); |
||||||
|
|
||||||
|
const angle = Math.atan2((this.assetData.pointB.y - this.assetData.pointA.y), (this.assetData.pointB.x - this.assetData.pointA.x)) |
||||||
|
* (180 / Math.PI) + 90; |
||||||
|
|
||||||
|
this.line.beginFill(0xff0000); |
||||||
|
console.log(Math.PI / 180 / 1.6); |
||||||
|
this.line.drawStar(this.assetData.pointB.x, this.assetData.pointB.y, 3, 10, 0, (Math.PI / 180 * angle)); |
||||||
|
this.line.endFill(); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
import * as PIXI from 'pixi.js'; |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* 安信形状 |
||||||
|
*/ |
||||||
|
export class AxImageShape extends PIXI.Container { |
||||||
|
image: PIXI.Sprite; |
||||||
|
|
||||||
|
constructor() { |
||||||
|
super(); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
paintVertexShape(rect: PIXI.Rectangle) { |
||||||
|
|
||||||
|
} |
||||||
|
paintBackground(rect: PIXI.Rectangle) { } |
||||||
|
|
||||||
|
paintForeground(rect: PIXI.Rectangle) { } |
||||||
|
|
||||||
|
paintEdgeShape(pts: Array<PIXI.Point>) { } |
||||||
|
} |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
import * as PIXI from 'pixi.js'; |
||||||
|
// import { Point, Rectangle, Graphics } from 'pixi.js';
|
||||||
|
|
||||||
|
/** |
||||||
|
* 安信形状 |
||||||
|
*/ |
||||||
|
export class AxShape extends PIXI.Container { |
||||||
|
|
||||||
|
points: Array<PIXI.Point> = []; |
||||||
|
title: string; |
||||||
|
titleVisible: boolean; |
||||||
|
g: PIXI.Graphics = new PIXI.Graphics(); |
||||||
|
|
||||||
|
constructor() { |
||||||
|
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);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
paintVertexShape(rect: PIXI.Rectangle) { |
||||||
|
// this.paintBackground(c, x, y, w, h);
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
// }
|
||||||
|
} |
||||||
|
paintBackground(rect: PIXI.Rectangle) { } |
||||||
|
|
||||||
|
paintForeground(rect: PIXI.Rectangle) { } |
||||||
|
|
||||||
|
paintEdgeShape(pts: Array<PIXI.Point>) { } |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
/** |
||||||
|
* 游戏状态 |
||||||
|
*/ |
||||||
|
export enum GameMode { |
||||||
|
BasicInformation, |
||||||
|
Assignment |
||||||
|
} |
||||||
@ -0,0 +1,248 @@ |
|||||||
|
import { WorkingAreaComponent } from '../working-area.component'; |
||||||
|
import { GameMode } from './gameMode'; |
||||||
|
import * as PIXI from 'pixi.js'; |
||||||
|
|
||||||
|
/** |
||||||
|
* 多点连线 |
||||||
|
*/ |
||||||
|
export class MultipointIcon extends PIXI.Container { |
||||||
|
public pointsData: PIXI.Point[]; |
||||||
|
public pointsGraphics: PIXI.Graphics[] = []; |
||||||
|
public iconsTilingSprite: PIXI.TilingSprite[] = []; |
||||||
|
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, |
||||||
|
}); |
||||||
|
|
||||||
|
public text = new PIXI.Text(this.assetData.Name |
||||||
|
+ '\r\n' |
||||||
|
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style); |
||||||
|
/** |
||||||
|
* |
||||||
|
* @param texture 图片素材 |
||||||
|
* @param points 点集合 |
||||||
|
*/ |
||||||
|
constructor(public assetData: any, private workingArea: WorkingAreaComponent) { |
||||||
|
super(); |
||||||
|
this.name = this.assetData.Id; |
||||||
|
this.pointsData = this.assetData.MultiPoint; |
||||||
|
this.x = this.assetData.Point.x; |
||||||
|
this.y = this.assetData.Point.y; |
||||||
|
this.workingArea.backgroundImage.addChild(this); |
||||||
|
// 画线图标
|
||||||
|
for (let i = 0, count = this.pointsData.length - 1; i < count; i++) { |
||||||
|
const pointA = this.pointsData[i]; |
||||||
|
const pointB = this.pointsData[i + 1]; |
||||||
|
|
||||||
|
const angle = Math.atan2((pointB.y - pointA.y), (pointB.x - pointA.x)) * (180 / Math.PI); |
||||||
|
const a = pointB.x - pointA.x; |
||||||
|
const b = pointB.y - pointA.y; |
||||||
|
const distance = Math.sqrt(a * a + b * b); |
||||||
|
|
||||||
|
const icon = new PIXI.TilingSprite(PIXI.Texture.from(this.assetData.ImageUrl), distance, 64); |
||||||
|
icon.anchor.set(0, 0.5); |
||||||
|
icon.x = pointA.x; |
||||||
|
icon.y = pointA.y; |
||||||
|
icon.angle = angle; |
||||||
|
icon.height = this.assetData.Thickness === 0 ? 32 : this.assetData.Thickness; |
||||||
|
this.iconsTilingSprite.push(icon); |
||||||
|
this.addChild(icon); |
||||||
|
if (i === 0) { |
||||||
|
this.text.anchor.set(0.5); |
||||||
|
this.text.position = icon.position; |
||||||
|
this.text.y -= this.assetData.Height; |
||||||
|
this.addChild(this.text); |
||||||
|
} |
||||||
|
} |
||||||
|
// 画点
|
||||||
|
this.pointsData.forEach((item, index, array) => { |
||||||
|
const iconPoint = new PIXI.Graphics(); |
||||||
|
iconPoint.lineStyle(1, 0xFFBD01, 1); |
||||||
|
iconPoint.beginFill(0xFFFFFF, 1); |
||||||
|
iconPoint.drawCircle(0, 0, 15); |
||||||
|
iconPoint.x = item.x; |
||||||
|
iconPoint.y = item.y; |
||||||
|
iconPoint.endFill(); |
||||||
|
iconPoint.visible = false; |
||||||
|
this.pointsGraphics.push(iconPoint); |
||||||
|
this.addChild(iconPoint); |
||||||
|
}); |
||||||
|
// 添加圆点事件
|
||||||
|
this.pointsGraphics.forEach((item, index, array) => { |
||||||
|
item.interactive = true; |
||||||
|
item.on('mousedown', event => { |
||||||
|
event.stopPropagation(); |
||||||
|
if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { |
||||||
|
event.currentTarget.data = event.data; |
||||||
|
event.currentTarget.alpha = 0.5; |
||||||
|
event.currentTarget.dragging = true; |
||||||
|
} |
||||||
|
}) |
||||||
|
.on('mouseup', event => { |
||||||
|
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.y = newPosition.y; |
||||||
|
|
||||||
|
this.assetData.MultiPoint[index].x = newPosition.x; |
||||||
|
this.assetData.MultiPoint[index].y = newPosition.y; |
||||||
|
this.workingArea.canvasData.isChange = true; |
||||||
|
|
||||||
|
if (index === 0) {// 第一个点
|
||||||
|
this.iconsTilingSprite[index].x = newPosition.x; |
||||||
|
this.iconsTilingSprite[index].y = newPosition.y; |
||||||
|
|
||||||
|
const pointA = array[index]; |
||||||
|
const pointB = array[index + 1]; |
||||||
|
|
||||||
|
const angle = Math.atan2((pointB.y - pointA.y), (pointB.x - pointA.x)) * (180 / Math.PI); |
||||||
|
const a = pointB.x - pointA.x; |
||||||
|
const b = pointB.y - pointA.y; |
||||||
|
const distance = Math.sqrt(a * a + b * b); |
||||||
|
this.iconsTilingSprite[index].angle = angle; |
||||||
|
this.iconsTilingSprite[index].width = distance; |
||||||
|
|
||||||
|
this.text.position = this.iconsTilingSprite[index].position; |
||||||
|
this.text.y -= this.assetData.Height; |
||||||
|
} else if (index < array.length - 1) {// 不是第一个点，也不是最后一个点
|
||||||
|
this.iconsTilingSprite[index].x = newPosition.x; |
||||||
|
this.iconsTilingSprite[index].y = newPosition.y; |
||||||
|
|
||||||
|
const pointA = array[index]; // 当前点
|
||||||
|
const pointB = array[index + 1]; // 后一个点
|
||||||
|
const pointC = array[index - 1]; // 前一个点
|
||||||
|
|
||||||
|
const angle = Math.atan2((pointB.y - pointA.y), (pointB.x - pointA.x)) * (180 / Math.PI); |
||||||
|
const a = pointB.x - pointA.x; |
||||||
|
const b = pointB.y - pointA.y; |
||||||
|
const distance = Math.sqrt(a * a + b * b); |
||||||
|
this.iconsTilingSprite[index].angle = angle; |
||||||
|
this.iconsTilingSprite[index].width = distance; |
||||||
|
|
||||||
|
const angleC = Math.atan2((pointA.y - pointC.y), (pointA.x - pointC.x)) * (180 / Math.PI); |
||||||
|
const aC = pointA.x - pointC.x; |
||||||
|
const bC = pointA.y - pointC.y; |
||||||
|
const distanceC = Math.sqrt(aC * aC + bC * bC); |
||||||
|
this.iconsTilingSprite[index - 1].angle = angleC; |
||||||
|
this.iconsTilingSprite[index - 1].width = distanceC; |
||||||
|
} else if (index === array.length - 1) { // 最后一个点
|
||||||
|
const pointA = array[index]; // 当前点
|
||||||
|
const pointC = array[index - 1]; // 前一个点
|
||||||
|
|
||||||
|
const angleC = Math.atan2((pointA.y - pointC.y), (pointA.x - pointC.x)) * (180 / Math.PI); |
||||||
|
const aC = pointA.x - pointC.x; |
||||||
|
const bC = pointA.y - pointC.y; |
||||||
|
const distanceC = Math.sqrt(aC * aC + bC * bC); |
||||||
|
this.iconsTilingSprite[index - 1].angle = angleC; |
||||||
|
this.iconsTilingSprite[index - 1].width = distanceC; |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
.on('rightclick', event => { |
||||||
|
}) |
||||||
|
.on('mouseover', event => { |
||||||
|
|
||||||
|
}); |
||||||
|
}); |
||||||
|
// // 缩放
|
||||||
|
// this.workingArea.on('backgroundScale', data => {
|
||||||
|
// const scale = 1 / data;
|
||||||
|
// this.text.scale.set(scale);
|
||||||
|
// });
|
||||||
|
// 添加选中事件
|
||||||
|
this.iconsTilingSprite.forEach((item, index, array) => { |
||||||
|
item.interactive = true; |
||||||
|
item.on('mousedown', event => { |
||||||
|
event.stopPropagation(); |
||||||
|
this.workingArea.selection.selectOne(this); |
||||||
|
if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { |
||||||
|
event.currentTarget.parent.data = event.data; |
||||||
|
event.currentTarget.parent.alpha = 0.5; |
||||||
|
event.currentTarget.parent.dragging = true; |
||||||
|
|
||||||
|
event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent); |
||||||
|
event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x; |
||||||
|
event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y; |
||||||
|
} |
||||||
|
}) |
||||||
|
.on('mouseup', event => { |
||||||
|
if (event.currentTarget.parent.dragging) { |
||||||
|
event.currentTarget.parent.alpha = 1; |
||||||
|
event.currentTarget.parent.dragging = false; |
||||||
|
event.currentTarget.parent.data = null; |
||||||
|
} |
||||||
|
}) |
||||||
|
.on('mouseupoutside', event => { |
||||||
|
if (event.currentTarget.parent.dragging) { |
||||||
|
event.currentTarget.parent.alpha = 1; |
||||||
|
event.currentTarget.parent.dragging = false; |
||||||
|
event.currentTarget.parent.data = null; |
||||||
|
} |
||||||
|
}) |
||||||
|
.on('mousemove', event => { |
||||||
|
if (event.currentTarget.parent.dragging) { |
||||||
|
const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent); |
||||||
|
event.currentTarget.parent.x = newPosition.x - event.currentTarget.parent.dragPoint.x; |
||||||
|
event.currentTarget.parent.y = newPosition.y - event.currentTarget.parent.dragPoint.y; |
||||||
|
|
||||||
|
this.assetData.Point = new PIXI.Point(this.x, this.y); |
||||||
|
this.workingArea.canvasData.isChange = true; |
||||||
|
} |
||||||
|
}) |
||||||
|
.on('rightclick', event => { |
||||||
|
|
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
/** |
||||||
|
* 设置点显示状态 |
||||||
|
* @param value 显示状态 |
||||||
|
*/ |
||||||
|
public setPointVisiable(value: boolean) { |
||||||
|
this.pointsGraphics.forEach((item) => { |
||||||
|
item.visible = value; |
||||||
|
}); |
||||||
|
} |
||||||
|
// 设置名称
|
||||||
|
public setNameVisible(value: boolean, mode: GameMode) { |
||||||
|
if (this.assetData.GameMode === mode) { |
||||||
|
this.text.visible = value; |
||||||
|
} |
||||||
|
} |
||||||
|
// 刷新数据
|
||||||
|
public refresh() { |
||||||
|
console.log(this.assetData); |
||||||
|
this.iconsTilingSprite.forEach(element => { |
||||||
|
element.height = this.assetData.Thickness === 0 ? 32 : this.assetData.Thickness; |
||||||
|
}); |
||||||
|
this.text.text = this.assetData.Name |
||||||
|
+ '\r\n' |
||||||
|
+ this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
/** |
||||||
|
* 绘制模式 |
||||||
|
*/ |
||||||
|
export enum PaintMode { |
||||||
|
/** |
||||||
|
* 单点图标 |
||||||
|
*/ |
||||||
|
singlePointIcon, |
||||||
|
/** |
||||||
|
* 线段图标 |
||||||
|
*/ |
||||||
|
lineIcon, |
||||||
|
/** |
||||||
|
* 自定义多边形 |
||||||
|
*/ |
||||||
|
polygonIcon, |
||||||
|
/** |
||||||
|
* 水带多边形 |
||||||
|
*/ |
||||||
|
Pipeline, |
||||||
|
/** |
||||||
|
* 暂无 |
||||||
|
*/ |
||||||
|
Arrows, |
||||||
|
/** |
||||||
|
* 暂无 |
||||||
|
*/ |
||||||
|
Car, |
||||||
|
/** |
||||||
|
* 结束绘制 |
||||||
|
*/ |
||||||
|
endPaint, |
||||||
|
} |
||||||
@ -0,0 +1,332 @@ |
|||||||
|
import { WorkingAreaComponent } from '../working-area.component'; |
||||||
|
import * as PIXI from 'pixi.js'; |
||||||
|
|
||||||
|
/** |
||||||
|
* 管线 |
||||||
|
*/ |
||||||
|
export class Pipeline extends PIXI.Container { |
||||||
|
public line: 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.addChild(this.line); |
||||||
|
// 画线图标
|
||||||
|
this.refresh(); |
||||||
|
this.interactive = true; |
||||||
|
this.on('mousedown', event => { |
||||||
|
event.stopPropagation(); |
||||||
|
this.workingArea.selection.selectOne(this); |
||||||
|
}); |
||||||
|
} |
||||||
|
/** |
||||||
|
* 刷新 |
||||||
|
*/ |
||||||
|
public refresh() { |
||||||
|
|
||||||
|
const strokeWidth = 1; |
||||||
|
const startWidth = 30 + strokeWidth; |
||||||
|
const endWidth = 30 + strokeWidth; |
||||||
|
const edgeWidth = 10; |
||||||
|
const openEnded = false; |
||||||
|
const markerStart = false; |
||||||
|
const markerEnd = true; |
||||||
|
const spacing = (openEnded) ? 0 : 0 + strokeWidth / 2; |
||||||
|
const startSize = 30 + strokeWidth; |
||||||
|
const endSize = 30 + strokeWidth; |
||||||
|
const isRounded = true; |
||||||
|
const pts = this.assetData.MultiPoint; |
||||||
|
const c = this.line; |
||||||
|
if (pts.length < 2) { return; } |
||||||
|
// 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) { |
||||||
|
i0++; |
||||||
|
} |
||||||
|
|
||||||
|
const dx = pts[i0].x - pts[0].x; |
||||||
|
const dy = pts[i0].y - pts[0].y; |
||||||
|
const dist = Math.sqrt(dx * dx + dy * dy); |
||||||
|
|
||||||
|
if (dist === 0) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// Computes the norm and the inverse norm
|
||||||
|
let nx = dx / dist; |
||||||
|
let nx1 = nx; |
||||||
|
let nx2 = nx; |
||||||
|
let ny = dy / dist; |
||||||
|
let ny2 = ny; |
||||||
|
let ny1 = ny; |
||||||
|
let orthx = edgeWidth * ny; |
||||||
|
let orthy = -edgeWidth * nx; |
||||||
|
|
||||||
|
// Stores the inbound function calls in reverse order in fns
|
||||||
|
const fns = []; |
||||||
|
|
||||||
|
// if (isRounded) {
|
||||||
|
// // c.setLineJoin('round');
|
||||||
|
// c.lineTextureStyle({ join: PIXI.LINE_JOIN.ROUND });
|
||||||
|
// } else if (pts.length > 2) {
|
||||||
|
// // Only mitre if there are waypoints
|
||||||
|
// // c.setMiterLimit(1.42);
|
||||||
|
// c.lineTextureStyle({ miterLimit: 1.42 });
|
||||||
|
// }
|
||||||
|
// c.lineStyle(1, 0x000000, 1);
|
||||||
|
c.clear(); |
||||||
|
c.lineTextureStyle({ width: 1, color: 0x00000, join: PIXI.LINE_JOIN.ROUND }); |
||||||
|
// c.begin();
|
||||||
|
c.beginFill(0xffffff); |
||||||
|
const startNx = nx; |
||||||
|
const startNy = ny; |
||||||
|
|
||||||
|
if (markerStart && !openEnded) { |
||||||
|
this.paintMarker(c, pts[0].x, pts[0].y, nx, ny, startSize, startWidth, edgeWidth, spacing, true); |
||||||
|
} else { |
||||||
|
const outStartX = pts[0].x + orthx / 2 + spacing * nx; |
||||||
|
const outStartY = pts[0].y + orthy / 2 + spacing * ny; |
||||||
|
const inEndX = pts[0].x - orthx / 2 + spacing * nx; |
||||||
|
const inEndY = pts[0].y - orthy / 2 + spacing * ny; |
||||||
|
|
||||||
|
if (openEnded) { |
||||||
|
c.moveTo(outStartX, outStartY); |
||||||
|
fns.push( () => { |
||||||
|
c.lineTo(inEndX, inEndY); |
||||||
|
}); |
||||||
|
} else { |
||||||
|
c.moveTo(inEndX, inEndY); |
||||||
|
c.lineTo(outStartX, outStartY); |
||||||
|
} |
||||||
|
} |
||||||
|
let dx1 = 0; |
||||||
|
let dy1 = 0; |
||||||
|
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; |
||||||
|
dy1 = pts[i + 2].y - pts[i + 1].y; |
||||||
|
|
||||||
|
dist1 = Math.sqrt(dx1 * dx1 + dy1 * dy1); |
||||||
|
|
||||||
|
if (dist1 !== 0) { |
||||||
|
nx1 = dx1 / dist1; |
||||||
|
ny1 = dy1 / dist1; |
||||||
|
|
||||||
|
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); |
||||||
|
|
||||||
|
const dist2 = Math.sqrt(nx2 * nx2 + ny2 * ny2); |
||||||
|
|
||||||
|
if (dist2 !== 0) { |
||||||
|
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); |
||||||
|
|
||||||
|
const outX = pts[i + 1].x + ny2 * edgeWidth / 2 / angleFactor; |
||||||
|
const outY = pts[i + 1].y - nx2 * edgeWidth / 2 / angleFactor; |
||||||
|
const inX = pts[i + 1].x - ny2 * edgeWidth / 2 / angleFactor; |
||||||
|
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) => { |
||||||
|
fns.push(() => { |
||||||
|
c.lineTo(x, y); |
||||||
|
}); |
||||||
|
})(inX, inY); |
||||||
|
} else if (pos === -1) { |
||||||
|
const c1x = inX + ny * edgeWidth; |
||||||
|
const c1y = inY - nx * edgeWidth; |
||||||
|
const c2x = inX + ny1 * edgeWidth; |
||||||
|
const c2y = inY - nx1 * edgeWidth; |
||||||
|
c.lineTo(c1x, c1y); |
||||||
|
if (isRounded) { |
||||||
|
c.quadraticCurveTo(outX, outY, c2x, c2y); // 圆角
|
||||||
|
} else { |
||||||
|
c.lineTo(outX, outY); |
||||||
|
} |
||||||
|
((x, y) => { |
||||||
|
fns.push(() => { |
||||||
|
c.lineTo(x, y); |
||||||
|
}); |
||||||
|
})(inX, inY); |
||||||
|
} else { |
||||||
|
c.lineTo(outX, outY); |
||||||
|
|
||||||
|
((x, y) => { |
||||||
|
const c1x = outX - ny * edgeWidth; |
||||||
|
const c1y = outY + nx * edgeWidth; |
||||||
|
const c2x = outX - ny1 * edgeWidth; |
||||||
|
const c2y = outY + nx1 * edgeWidth; |
||||||
|
|
||||||
|
fns.push(() => { |
||||||
|
if (isRounded) { |
||||||
|
c.quadraticCurveTo(x, y, c1x, c1y); |
||||||
|
} else { |
||||||
|
c.lineTo(x, y); |
||||||
|
} |
||||||
|
}); |
||||||
|
fns.push(() => { |
||||||
|
c.lineTo(c2x, c2y); |
||||||
|
}); |
||||||
|
})(inX, inY); |
||||||
|
} |
||||||
|
|
||||||
|
nx = nx1; |
||||||
|
ny = ny1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
orthx = edgeWidth * ny1; |
||||||
|
orthy = - edgeWidth * nx1; |
||||||
|
|
||||||
|
if (markerEnd && !openEnded) { |
||||||
|
this.paintMarker(c, pe.x, pe.y, -nx, -ny, endSize, endWidth, edgeWidth, spacing, false); |
||||||
|
} else { |
||||||
|
c.lineTo(pe.x - spacing * nx1 + orthx / 2, pe.y - spacing * ny1 + orthy / 2); |
||||||
|
|
||||||
|
const inStartX = pe.x - spacing * nx1 - orthx / 2; |
||||||
|
const inStartY = pe.y - spacing * ny1 - orthy / 2; |
||||||
|
|
||||||
|
if (!openEnded) { |
||||||
|
c.lineTo(inStartX, inStartY); |
||||||
|
} else { |
||||||
|
c.moveTo(inStartX, inStartY); |
||||||
|
|
||||||
|
fns.splice(0, 0, () => { |
||||||
|
c.moveTo(inStartX, inStartY); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
for (let i = fns.length - 1; i >= 0; i--) { |
||||||
|
fns[i](); |
||||||
|
} |
||||||
|
c.closePath(); |
||||||
|
c.endFill(); |
||||||
|
// if (openEnded)
|
||||||
|
// {
|
||||||
|
// c.end();
|
||||||
|
// c.stroke();
|
||||||
|
// }
|
||||||
|
// else
|
||||||
|
// {
|
||||||
|
// c.close();
|
||||||
|
// 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)
|
||||||
|
// {
|
||||||
|
// c.setLineJoin('flat');
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (pts.length > 2) {
|
||||||
|
// // Only to repaint markers if no waypoints
|
||||||
|
// // Need to redraw the markers without the low miter limit
|
||||||
|
// // c.setMiterLimit(4);
|
||||||
|
// c.lineTextureStyle({ width: 1, color: 0x00000, miterLimit: 4 });
|
||||||
|
// if (markerStart && !openEnded) {
|
||||||
|
// // c.begin();
|
||||||
|
// this.paintMarker(c, pts[0].x, pts[0].y, startNx, startNy, startSize, startWidth, edgeWidth, spacing, true);
|
||||||
|
// // c.stroke();
|
||||||
|
// // c.end();
|
||||||
|
// // c.closePath();
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (markerEnd && !openEnded) {
|
||||||
|
// // c.begin();
|
||||||
|
// this.paintMarker(c, pe.x, pe.y, -nx, -ny, endSize, endWidth, edgeWidth, spacing, true);
|
||||||
|
// // c.stroke();
|
||||||
|
// // c.end();
|
||||||
|
// // c.closePath();
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
} |
||||||
|
/** |
||||||
|
* 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; |
||||||
|
const orthx = edgeWidth * ny / 2; |
||||||
|
const orthy = -edgeWidth * nx / 2; |
||||||
|
|
||||||
|
const spaceX = (spacing + size) * nx; |
||||||
|
const spaceY = (spacing + size) * ny; |
||||||
|
|
||||||
|
if (initialMove) { |
||||||
|
c.moveTo(ptX - orthx + spaceX, ptY - orthy + spaceY); |
||||||
|
} else { |
||||||
|
c.lineTo(ptX - orthx + spaceX, ptY - orthy + spaceY); |
||||||
|
} |
||||||
|
c.lineTo(ptX - orthx / widthArrowRatio + spaceX, ptY - orthy / widthArrowRatio + spaceY); |
||||||
|
c.lineTo(ptX + spacing * nx, ptY + spacing * ny); |
||||||
|
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; |
||||||
|
px -= x1; |
||||||
|
py -= y1; |
||||||
|
let ccw = px * y2 - py * x2; |
||||||
|
|
||||||
|
if (ccw === 0.0) { |
||||||
|
ccw = px * x2 + py * y2; |
||||||
|
|
||||||
|
if (ccw > 0.0) { |
||||||
|
px -= x2; |
||||||
|
py -= y2; |
||||||
|
ccw = px * x2 + py * y2; |
||||||
|
|
||||||
|
if (ccw < 0.0) { |
||||||
|
ccw = 0.0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
return (ccw < 0.0) ? -1 : ((ccw > 0.0) ? 1 : 0); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,244 @@ |
|||||||
|
import { WorkingAreaComponent } from '../working-area.component'; |
||||||
|
import { GameMode } from './gameMode'; |
||||||
|
import * as PIXI from 'pixi.js'; |
||||||
|
|
||||||
|
/** |
||||||
|
* 多边形 |
||||||
|
*/ |
||||||
|
export class PolygonIcon extends PIXI.Container { |
||||||
|
public pointsData: PIXI.Point[]; |
||||||
|
public pointsGraphics: PIXI.Graphics[] = []; |
||||||
|
public polygonGraphics: PIXI.Graphics = new PIXI.Graphics(); |
||||||
|
public polygonLineGraphics: PIXI.Graphics = new PIXI.Graphics(); |
||||||
|
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, |
||||||
|
}); |
||||||
|
|
||||||
|
public text = new PIXI.Text(this.assetData.Name |
||||||
|
+ '\r\n' |
||||||
|
+ this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style); |
||||||
|
/** |
||||||
|
* |
||||||
|
* @param points 点集合 |
||||||
|
*/ |
||||||
|
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.pointsData = this.assetData.MultiPoint; |
||||||
|
this.workingArea.backgroundImage.addChild(this); |
||||||
|
this.sortableChildren = true; |
||||||
|
// 画点
|
||||||
|
this.pointsData.forEach((item, index, array) => { |
||||||
|
const iconPoint = new PIXI.Graphics(); |
||||||
|
iconPoint.lineStyle(1, 0xFFBD01, 1); |
||||||
|
iconPoint.beginFill(0xFFFFFF, 1); |
||||||
|
iconPoint.drawCircle(0, 0, 15); |
||||||
|
iconPoint.x = item.x; |
||||||
|
iconPoint.y = item.y; |
||||||
|
iconPoint.endFill(); |
||||||
|
iconPoint.visible = false; |
||||||
|
this.pointsGraphics.push(iconPoint); |
||||||
|
this.addChild(iconPoint); |
||||||
|
}); |
||||||
|
// 填充多边形
|
||||||
|
|
||||||
|
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.getPoints()); |
||||||
|
this.polygonGraphics.endFill(); |
||||||
|
this.addChild(this.polygonGraphics); |
||||||
|
// 画多边形
|
||||||
|
this.polygonLineGraphics.lineStyle(5, 0xFFBD01, 1); |
||||||
|
this.polygonLineGraphics.drawPolygon(this.getPoints()); |
||||||
|
this.polygonLineGraphics.closePath(); |
||||||
|
this.addChild(this.polygonLineGraphics); |
||||||
|
|
||||||
|
this.text.anchor.set(0.5); |
||||||
|
this.text.position = this.calculatePolygonGravityCenter(this.pointsData); |
||||||
|
// console.log(this.calculatePolygonGravityCenter(this.pointsData));
|
||||||
|
this.polygonGraphics.addChild(this.text); |
||||||
|
// 添加圆点事件
|
||||||
|
this.pointsGraphics.forEach((item, index, array) => { |
||||||
|
item.interactive = true; |
||||||
|
item.zIndex = 1; |
||||||
|
item.on('mousedown', event => { |
||||||
|
event.stopPropagation(); |
||||||
|
if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { |
||||||
|
event.currentTarget.data = event.data; |
||||||
|
event.currentTarget.alpha = 0.5; |
||||||
|
event.currentTarget.dragging = true; |
||||||
|
} |
||||||
|
}) |
||||||
|
.on('mouseup', event => { |
||||||
|
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.y = newPosition.y; |
||||||
|
|
||||||
|
this.assetData.MultiPoint[index].x = newPosition.x; |
||||||
|
this.assetData.MultiPoint[index].y = newPosition.y; |
||||||
|
this.workingArea.canvasData.isChange = true; |
||||||
|
// 填充多边形
|
||||||
|
this.polygonGraphics.clear(); |
||||||
|
this.polygonGraphics.beginFill(color, angle); |
||||||
|
this.polygonGraphics.drawPolygon(this.getPoints()); |
||||||
|
this.polygonGraphics.endFill(); |
||||||
|
// 画多边形
|
||||||
|
this.polygonLineGraphics.clear(); |
||||||
|
this.polygonLineGraphics.lineStyle(5, 0xFFBD01, 1); |
||||||
|
this.polygonLineGraphics.drawPolygon(this.getPoints()); |
||||||
|
this.polygonLineGraphics.closePath(); |
||||||
|
|
||||||
|
this.text.position = this.calculatePolygonGravityCenter(this.pointsData); |
||||||
|
} |
||||||
|
}) |
||||||
|
.on('rightclick', event => { |
||||||
|
}); |
||||||
|
}); |
||||||
|
// 添加选中事件
|
||||||
|
this.polygonGraphics.interactive = true; |
||||||
|
this.polygonGraphics |
||||||
|
.on('mousedown', event => { |
||||||
|
event.stopPropagation(); |
||||||
|
this.workingArea.selection.selectOne(this); |
||||||
|
if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { |
||||||
|
event.currentTarget.parent.data = event.data; |
||||||
|
event.currentTarget.parent.alpha = 0.5; |
||||||
|
event.currentTarget.parent.dragging = true; |
||||||
|
|
||||||
|
event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent); |
||||||
|
event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x; |
||||||
|
event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y; |
||||||
|
} |
||||||
|
}) |
||||||
|
.on('mouseup', event => { |
||||||
|
if (event.currentTarget.parent.dragging) { |
||||||
|
event.currentTarget.parent.alpha = 1; |
||||||
|
event.currentTarget.parent.dragging = false; |
||||||
|
event.currentTarget.parent.data = null; |
||||||
|
} |
||||||
|
}) |
||||||
|
.on('mouseupoutside', event => { |
||||||
|
if (event.currentTarget.parent.dragging) { |
||||||
|
event.currentTarget.parent.alpha = 1; |
||||||
|
event.currentTarget.parent.dragging = false; |
||||||
|
event.currentTarget.parent.data = null; |
||||||
|
} |
||||||
|
}) |
||||||
|
.on('mousemove', event => { |
||||||
|
if (event.currentTarget.parent.dragging) { |
||||||
|
const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent); |
||||||
|
event.currentTarget.parent.x = newPosition.x - event.currentTarget.parent.dragPoint.x; |
||||||
|
event.currentTarget.parent.y = newPosition.y - event.currentTarget.parent.dragPoint.y; |
||||||
|
|
||||||
|
this.assetData.Point = new PIXI.Point(this.x, this.y); |
||||||
|
this.workingArea.canvasData.isChange = true; |
||||||
|
} |
||||||
|
}) |
||||||
|
.on('rightclick', event => { |
||||||
|
// this.workingArea.selection.deselectAll();
|
||||||
|
}); |
||||||
|
// // 缩放
|
||||||
|
// this.workingArea.on('backgroundScale', data => {
|
||||||
|
// const scale = 1 / data;
|
||||||
|
// this.text.scale.set(scale);
|
||||||
|
// });
|
||||||
|
} |
||||||
|
/** |
||||||
|
* 设置点显示状态 |
||||||
|
* @param value 显示状态 |
||||||
|
*/ |
||||||
|
public setPointVisiable(value: boolean) { |
||||||
|
this.pointsGraphics.forEach((item) => { |
||||||
|
item.visible = value; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
public calculatePolygonGravityCenter(points: PIXI.Point[]) { |
||||||
|
let area = 0.0; // 多边形面积
|
||||||
|
let gravityLat = 0.0; // 重心点 latitude
|
||||||
|
let gravityLng = 0.0; // 重心点 longitude
|
||||||
|
points.forEach((item, index) => { |
||||||
|
// 1
|
||||||
|
const lat = item.x; |
||||||
|
const lng = item.y; |
||||||
|
const nextLat = points[(index + 1) % points.length].x; |
||||||
|
const nextLng = points[(index + 1) % points.length].y; |
||||||
|
// 2
|
||||||
|
const tempArea = (nextLat * lng - nextLng * lat) / 2.0; |
||||||
|
// 3
|
||||||
|
area += tempArea; |
||||||
|
// 4
|
||||||
|
gravityLat += tempArea * (lat + nextLat) / 3; |
||||||
|
gravityLng += tempArea * (lng + nextLng) / 3; |
||||||
|
}); |
||||||
|
// 5
|
||||||
|
gravityLat = gravityLat / area; |
||||||
|
gravityLng = gravityLng / area; |
||||||
|
|
||||||
|
return new PIXI.Point(gravityLat, gravityLng); |
||||||
|
} |
||||||
|
/** |
||||||
|
* 获取点集合 |
||||||
|
*/ |
||||||
|
public getPoints(): PIXI.Point[] { |
||||||
|
const points: PIXI.Point[] = []; |
||||||
|
this.pointsGraphics.forEach(item => { |
||||||
|
points.push(item.position); |
||||||
|
}); |
||||||
|
return points; |
||||||
|
} |
||||||
|
/** |
||||||
|
* 设置名称显示 |
||||||
|
* @param value true/false 显示/隐藏 |
||||||
|
* @param mode BasicInformation = 0 基本信息 |
||||||
|
* Assignment想定作业 = 1 想定作业 |
||||||
|
*/ |
||||||
|
public setNameVisible(value: boolean, mode: GameMode) { |
||||||
|
if (this.assetData.GameMode === mode) { |
||||||
|
this.text.visible = value; |
||||||
|
} |
||||||
|
} |
||||||
|
public refresh() { |
||||||
|
this.text.text = this.assetData.Name |
||||||
|
+ '\r\n' |
||||||
|
+ this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue; |
||||||
|
// 填充多边形
|
||||||
|
const color: number = this.assetData.Color.substring(0, 7).replace('#', '0x'); |
||||||
|
const angle: number = parseInt(this.assetData.Color.substring(7), 16) / 255; |
||||||
|
this.polygonGraphics.clear(); |
||||||
|
this.polygonGraphics.beginFill(color, angle); |
||||||
|
this.polygonGraphics.drawPolygon(this.getPoints()); |
||||||
|
this.polygonGraphics.endFill(); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +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'; |
||||||
|
|
||||||
|
/** |
||||||
|
* 汽车放置区域 |
||||||
|
*/ |
||||||
|
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) => { |
||||||
|
|
||||||
|
}) |
||||||
|
.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() |
||||||
|
]; |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,373 @@ |
|||||||
|
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; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,347 @@ |
|||||||
|
import { WorkingAreaComponent } from '../working-area.component'; |
||||||
|
import * as PIXI from 'pixi.js'; |
||||||
|
|
||||||
|
/** |
||||||
|
* 墙面 |
||||||
|
*/ |
||||||
|
export class WallSpace extends PIXI.Container { |
||||||
|
|
||||||
|
line: PIXI.Graphics; |
||||||
|
text: PIXI.Text; |
||||||
|
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, |
||||||
|
}); |
||||||
|
pts: PIXI.Point[]; |
||||||
|
|
||||||
|
constructor(public assetData: any, private workingArea: WorkingAreaComponent) { |
||||||
|
super(); |
||||||
|
this.text = new PIXI.Text(this.assetData.Name |
||||||
|
+ '\r\n' |
||||||
|
+ this.assetData.PropertyInfos?.find((item: { PropertyName: string; }) => |
||||||
|
item.PropertyName === '名称/编号')?.PropertyValue, this.style); |
||||||
|
this.line = new PIXI.Graphics(); |
||||||
|
this.addChild(this.text); |
||||||
|
this.addChild(this.line); |
||||||
|
this.workingArea.backgroundImage.addChild(this); |
||||||
|
this.refresh(this.line, this.assetData.MultiPoint); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 刷新形状 |
||||||
|
*/ |
||||||
|
public refresh(c: PIXI.Graphics, pts: PIXI.Point[]): void { |
||||||
|
const strokeWidth = 1; |
||||||
|
const startWidth = 30 + strokeWidth; |
||||||
|
const endWidth = 30 + strokeWidth; |
||||||
|
const edgeWidth = 10; |
||||||
|
const openEnded = false; |
||||||
|
const markerStart = false; |
||||||
|
const markerEnd = true; |
||||||
|
const spacing = (openEnded) ? 0 : 0 + strokeWidth / 2; |
||||||
|
const startSize = 30 + strokeWidth; |
||||||
|
const endSize = 30 + strokeWidth; |
||||||
|
const isRounded = true; |
||||||
|
|
||||||
|
// 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) { |
||||||
|
i0++; |
||||||
|
} |
||||||
|
|
||||||
|
const dx = pts[i0].x - pts[0].x; |
||||||
|
const dy = pts[i0].y - pts[0].y; |
||||||
|
const dist = Math.sqrt(dx * dx + dy * dy); |
||||||
|
|
||||||
|
if (dist === 0) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// Computes the norm and the inverse norm
|
||||||
|
let nx = dx / dist; |
||||||
|
let nx1 = nx; |
||||||
|
let nx2 = nx; |
||||||
|
let ny = dy / dist; |
||||||
|
let ny2 = ny; |
||||||
|
let ny1 = ny; |
||||||
|
let orthx = edgeWidth * ny; |
||||||
|
let orthy = -edgeWidth * nx; |
||||||
|
|
||||||
|
// Stores the inbound function calls in reverse order in fns
|
||||||
|
const fns = []; |
||||||
|
|
||||||
|
// if (isRounded) {
|
||||||
|
// // c.setLineJoin('round');
|
||||||
|
// c.lineTextureStyle({ join: PIXI.LINE_JOIN.ROUND });
|
||||||
|
// } else if (pts.length > 2) {
|
||||||
|
// // Only mitre if there are waypoints
|
||||||
|
// // c.setMiterLimit(1.42);
|
||||||
|
// 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); |
||||||
|
const startNx = nx; |
||||||
|
const startNy = ny; |
||||||
|
|
||||||
|
if (markerStart && !openEnded) { |
||||||
|
this.paintMarker(c, pts[0].x, pts[0].y, nx, ny, startSize, startWidth, edgeWidth, spacing, true); |
||||||
|
} else { |
||||||
|
const outStartX = pts[0].x + orthx / 2 + spacing * nx; |
||||||
|
const outStartY = pts[0].y + orthy / 2 + spacing * ny; |
||||||
|
const inEndX = pts[0].x - orthx / 2 + spacing * nx; |
||||||
|
const inEndY = pts[0].y - orthy / 2 + spacing * ny; |
||||||
|
|
||||||
|
if (openEnded) { |
||||||
|
c.moveTo(outStartX, outStartY); |
||||||
|
fns.push( () => { |
||||||
|
c.lineTo(inEndX, inEndY); |
||||||
|
}); |
||||||
|
} else { |
||||||
|
c.moveTo(inEndX, inEndY); |
||||||
|
c.lineTo(outStartX, outStartY); |
||||||
|
} |
||||||
|
} |
||||||
|
let dx1 = 0; |
||||||
|
let dy1 = 0; |
||||||
|
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; |
||||||
|
dy1 = pts[i + 2].y - pts[i + 1].y; |
||||||
|
|
||||||
|
dist1 = Math.sqrt(dx1 * dx1 + dy1 * dy1); |
||||||
|
|
||||||
|
if (dist1 !== 0) { |
||||||
|
nx1 = dx1 / dist1; |
||||||
|
ny1 = dy1 / dist1; |
||||||
|
|
||||||
|
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); |
||||||
|
|
||||||
|
const dist2 = Math.sqrt(nx2 * nx2 + ny2 * ny2); |
||||||
|
|
||||||
|
if (dist2 !== 0) { |
||||||
|
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); |
||||||
|
|
||||||
|
const outX = pts[i + 1].x + ny2 * edgeWidth / 2 / angleFactor; |
||||||
|
const outY = pts[i + 1].y - nx2 * edgeWidth / 2 / angleFactor; |
||||||
|
const inX = pts[i + 1].x - ny2 * edgeWidth / 2 / angleFactor; |
||||||
|
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) => { |
||||||
|
fns.push(() => { |
||||||
|
c.lineTo(x, y); |
||||||
|
}); |
||||||
|
})(inX, inY); |
||||||
|
} else if (pos === -1) { |
||||||
|
const c1x = inX + ny * edgeWidth; |
||||||
|
const c1y = inY - nx * edgeWidth; |
||||||
|
const c2x = inX + ny1 * edgeWidth; |
||||||
|
const c2y = inY - nx1 * edgeWidth; |
||||||
|
c.lineTo(c1x, c1y); |
||||||
|
if (isRounded) { |
||||||
|
c.quadraticCurveTo(outX, outY, c2x, c2y); // 圆角
|
||||||
|
} else { |
||||||
|
c.lineTo(outX, outY); |
||||||
|
} |
||||||
|
((x, y) => { |
||||||
|
fns.push(() => { |
||||||
|
c.lineTo(x, y); |
||||||
|
}); |
||||||
|
})(inX, inY); |
||||||
|
} else { |
||||||
|
c.lineTo(outX, outY); |
||||||
|
|
||||||
|
((x, y) => { |
||||||
|
const c1x = outX - ny * edgeWidth; |
||||||
|
const c1y = outY + nx * edgeWidth; |
||||||
|
const c2x = outX - ny1 * edgeWidth; |
||||||
|
const c2y = outY + nx1 * edgeWidth; |
||||||
|
|
||||||
|
fns.push(() => { |
||||||
|
if (isRounded) { |
||||||
|
c.quadraticCurveTo(x, y, c1x, c1y); |
||||||
|
} else { |
||||||
|
c.lineTo(x, y); |
||||||
|
} |
||||||
|
}); |
||||||
|
fns.push(() => { |
||||||
|
c.lineTo(c2x, c2y); |
||||||
|
}); |
||||||
|
})(inX, inY); |
||||||
|
} |
||||||
|
|
||||||
|
nx = nx1; |
||||||
|
ny = ny1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
orthx = edgeWidth * ny1; |
||||||
|
orthy = - edgeWidth * nx1; |
||||||
|
|
||||||
|
if (markerEnd && !openEnded) { |
||||||
|
this.paintMarker(c, pe.x, pe.y, -nx, -ny, endSize, endWidth, edgeWidth, spacing, false); |
||||||
|
} else { |
||||||
|
c.lineTo(pe.x - spacing * nx1 + orthx / 2, pe.y - spacing * ny1 + orthy / 2); |
||||||
|
|
||||||
|
const inStartX = pe.x - spacing * nx1 - orthx / 2; |
||||||
|
const inStartY = pe.y - spacing * ny1 - orthy / 2; |
||||||
|
|
||||||
|
if (!openEnded) { |
||||||
|
c.lineTo(inStartX, inStartY); |
||||||
|
} else { |
||||||
|
c.moveTo(inStartX, inStartY); |
||||||
|
|
||||||
|
fns.splice(0, 0, () => { |
||||||
|
c.moveTo(inStartX, inStartY); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
for (let i = fns.length - 1; i >= 0; i--) { |
||||||
|
fns[i](); |
||||||
|
} |
||||||
|
c.closePath(); |
||||||
|
c.endFill(); |
||||||
|
// if (openEnded)
|
||||||
|
// {
|
||||||
|
// c.end();
|
||||||
|
// c.stroke();
|
||||||
|
// }
|
||||||
|
// else
|
||||||
|
// {
|
||||||
|
// c.close();
|
||||||
|
// 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)
|
||||||
|
// {
|
||||||
|
// c.setLineJoin('flat');
|
||||||
|
// }
|
||||||
|
|
||||||
|
// 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)
|
||||||
|
// {
|
||||||
|
// c.begin();
|
||||||
|
// this.paintMarker(c, pts[0].x, pts[0].y, startNx, startNy, startSize, startWidth, edgeWidth, spacing, true);
|
||||||
|
// c.stroke();
|
||||||
|
// c.end();
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (markerEnd && !openEnded)
|
||||||
|
// {
|
||||||
|
// c.begin();
|
||||||
|
// this.paintMarker(c, pe.x, pe.y, -nx, -ny, endSize, endWidth, edgeWidth, spacing, true);
|
||||||
|
// c.stroke();
|
||||||
|
// c.end();
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
} |
||||||
|
/** |
||||||
|
* 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; |
||||||
|
const orthx = edgeWidth * ny / 2; |
||||||
|
const orthy = -edgeWidth * nx / 2; |
||||||
|
|
||||||
|
const spaceX = (spacing + size) * nx; |
||||||
|
const spaceY = (spacing + size) * ny; |
||||||
|
|
||||||
|
if (initialMove) { |
||||||
|
c.moveTo(ptX - orthx + spaceX, ptY - orthy + spaceY); |
||||||
|
} else { |
||||||
|
c.lineTo(ptX - orthx + spaceX, ptY - orthy + spaceY); |
||||||
|
} |
||||||
|
c.lineTo(ptX - orthx / widthArrowRatio + spaceX, ptY - orthy / widthArrowRatio + spaceY); |
||||||
|
c.lineTo(ptX + spacing * nx, ptY + spacing * ny); |
||||||
|
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; |
||||||
|
px -= x1; |
||||||
|
py -= y1; |
||||||
|
let ccw = px * y2 - py * x2; |
||||||
|
|
||||||
|
if (ccw === 0.0) { |
||||||
|
ccw = px * x2 + py * y2; |
||||||
|
|
||||||
|
if (ccw > 0.0) { |
||||||
|
px -= x2; |
||||||
|
py -= y2; |
||||||
|
ccw = px * x2 + py * y2; |
||||||
|
|
||||||
|
if (ccw < 0.0) { |
||||||
|
ccw = 0.0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
return (ccw < 0.0) ? -1 : ((ccw > 0.0) ? 1 : 0); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
<div #content style="width:100%;height:100%;" (mousewheel)='this.mouseWheelHandel($event)' |
||||||
|
(DOMMouseScroll)='this.mouseWheelHandel($event)'></div> |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { WorkingAreaComponent } from './working-area.component'; |
||||||
|
|
||||||
|
describe('WorkingAreaComponent', () => { |
||||||
|
let component: WorkingAreaComponent; |
||||||
|
let fixture: ComponentFixture<WorkingAreaComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ WorkingAreaComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(WorkingAreaComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
||||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 40 KiB |
Loading…
Reference in new issue