- ![]()
+ ![]()
+ ![]()
' +
@@ -179,13 +159,9 @@ export class BasicinfoComponent implements OnInit {
this.map.setCity('上海市');
}
}
-
-
markerPosition2
//点击位置按钮
setPosition(){
-
-
this.isGisTopBox = false
this.isGisTopBoxTwo = true
if(this.isMapLabel){//如果已经标注单位坐标
@@ -304,12 +280,14 @@ export class BasicinfoComponent implements OnInit {
}
//获得所有单位类型
+ allunittype: any //所有单位类型
getallunittype() {
this.http.get("/api/BuildingTypes/Simple").subscribe(data => {
this.allunittype = data
})
}
//获得所有组织机构
+ allorganizing:any = [] //所有组织机构
getorganization() {
this.http.get('/api/Organizations').subscribe(
(data: any) => {
@@ -323,15 +301,12 @@ export class BasicinfoComponent implements OnInit {
}else{//未标注
_this.isMapLabel = false
}
-
this.labelGis()
-
})
}
)
}
//获得当前单位的基本信息
- CompanyId
async getunitinfo(){
let result = await new Promise((resolve, reject) => {
this.http.get(`/api/Companies/${this.unitId}`).subscribe((data:any)=>{
@@ -367,8 +342,7 @@ export class BasicinfoComponent implements OnInit {
})
this.selectedorganization = str.substr(1)
}
- }
-
+ }
this.unitinfo = data
resolve(this.unitinfo)
this.selectedorganizationid = data.organizationId
@@ -383,6 +357,7 @@ export class BasicinfoComponent implements OnInit {
})
}
+
//石油化工 装置信息 勾选框
checkboxchange(item,e){
if(item.buildingBasicGroups){
@@ -395,13 +370,13 @@ export class BasicinfoComponent implements OnInit {
}
unitallbuilding:any = []//用于存储当前单位所有的建筑
- buildinginfoId:any = []//用于存储当前单位所有具体建筑的id
- presentbuildinfoId:any // 用于存储当前单位第一个建筑的id
+
+
bigfor:any//循环（储罐信息+罐区信息）大组
npdata:any = []
newnpdata:any //用于存储石油化工 储罐信息/罐区情况的 datasource
- basicCategoryId:any //当前单位所有建筑中位于第一个的建筑id
+
deviceinfodata:any=[];//用于存储石油化工装置信息的数组
zhuangzhiinfodatasource:any = [] //用于存储石油化工装置信息表格的数据来源
newzhuangzhiinfodatasource:any= []//存储石油化工装置信息表格的 datasource形式
@@ -575,7 +550,11 @@ export class BasicinfoComponent implements OnInit {
item.buildingCustomData.customProperties.pop()
}
//得到建筑信息数据并进行处理
- allBuildings:any
+ allBuildings:any //当前单位所有的建筑
+ houses: any = [] //存储当前单位的建筑信息
+ basicCategoryId:any //当前单位所有建筑中位于第一个的建筑类型id
+ presentbuildinfoId:any //用于存储当前单位第一个建筑的具体id
+ buildinginfoId:any = []//用于存储当前单位所有具体建筑的id
getunitallbuilding(){
this.houses = []
this.unitId = this.route.snapshot.queryParams.id
@@ -584,9 +563,9 @@ export class BasicinfoComponent implements OnInit {
companyId:this.unitId
}
}).subscribe(async (data:any)=>{ // 获得当前单位所有的建筑
+ console.log('所有建筑',data)
this.allBuildings = data
- // console.log(data)
- if(data.length != 0){
+ if(data.length != 0){//如果存在建筑
this.basicCategoryId = data[0].buildingTypes[0].id
this.presentbuildinfoId = data[0].id // 用于存储当前单位第一个建筑的id
for (let i = 0, length = data.length; i < length; i++) {//循环所有建筑
@@ -601,17 +580,19 @@ export class BasicinfoComponent implements OnInit {
buildingType:n.buildingTypes[0].id
}
}).subscribe((data)=>{
- //获得当前建筑自定义信息并且添加到item自定义属性上
+ //获得当前建筑自定义信息并且添加到建筑属性对象中
let _data = data
+ console.log('当前建筑信息'+index,data)
this.http.get("/api/BuildingCustomData",{params:{
buildingId:n.id
}}).subscribe((data:any)=>{
+ console.log('当前建筑自定义信息'+index,data)
_data[0].buildingCustomData = data
if(data && data.customProperties.length != 0){
_data[0].isCustomData = true
}else{
_data[0].isCustomData = false
- _data[0].buildingCustomData ={
+ _data[0].buildingCustomData = {
id: "",
customProperties: [
{
@@ -623,7 +604,7 @@ export class BasicinfoComponent implements OnInit {
}
}
})
- //为每个建筑添加自定义属性
+ //为每个建筑添加建筑名称等自定义属性 用于显示使用
data[0].buildingtypeId = n.buildingTypes[0].id
data[0].name = n.name
data[0].username = n.name
@@ -714,7 +695,6 @@ export class BasicinfoComponent implements OnInit {
this.houses.push(result) // 并且把他添加到 tab 总体数组中
}
}
- // console.log(666,this.houses)
})
}
@@ -1052,7 +1032,8 @@ export class BasicinfoComponent implements OnInit {
hasChild = (_: number, node: any) => node.expandable;
- imgsrc = "../../../assets/images/upload.jpg" //没有上传图片时显示的图片，当上传后就会被替换，即保存时需要传的图片地址参数
+ imgsrc = "" //没有上传图片时显示的图片，当上传后就会被替换，即保存时需要传的图片地址参数
+ noImgSrc = '../../../assets/images/upload.jpg'
// imgsrc = ""
imgUrl = ""//返回来的图片地址后缀
file: any; //上传的文件
@@ -1102,7 +1083,6 @@ export class BasicinfoComponent implements OnInit {
let shardSize = 5 * 1024 * 1024 //5MB一个分片
if (file && fileSize <= shardSize) { //上传文件<=5MB时
- // this.upload()
let formData = new FormData()
formData.append("file",file)
this.http.post(`/api/Objects/PlanPlatform/${sessionStorage.getItem('companyId')}`,formData).subscribe((data:any)=>{
@@ -1124,38 +1104,6 @@ export class BasicinfoComponent implements OnInit {
})
}
}
-
-
-
-
- //小于5MB不需要分块上传
- upload(){
- this.uploader.queue[0].upload();//开始上传
- this.uploader.queue[0].onSuccess = (response, status, headers) => {
- // 上传文件成功
- if (status == 201) {
- // 上传文件后获取服务器返回的数据
- const config = new MatSnackBarConfig();
- config.verticalPosition = 'top';
- config.duration = 3000
- this.snackBar.open('上传成功','确定',config);
- this.isspinner = false
- let tempRes = JSON.parse(response);
- this.imgUrl = tempRes.objectName
- this.imgsrc = `/api/Objects/PlanPlatform/${this.imgUrl}?x-oss-process=image/resize,m_fill,h_170,w_299`
- }else {
- // 上传文件后获取服务器返回的数据错误
- }
- };
- this.uploader.queue[0].onError = (response, status, headers) => {
- if (status == 401) {
- const config = new MatSnackBarConfig();
- config.verticalPosition = 'top';
- config.duration = 3000
- this.snackBar.open('上传失败','确定',config);
- }
- };
- }
//开始分块上传
async subsectionUploading () {
@@ -1194,7 +1142,6 @@ export class BasicinfoComponent implements OnInit {
this.imgsrc = `/api/Objects/PlanPlatform/${this.objectName}?x-oss-process=image/resize,m_fill,h_170,w_299`
this.isspinner = false
this.PartNumberETag = []
- this.uploader.clearQueue(); //清空input控件文件
})
}
//删除具体建筑
diff --git a/src/app/key-unit/key-unit-management/key-unit-management.component.ts b/src/app/key-unit/key-unit-management/key-unit-management.component.ts
index 90b7e9a..75909dc 100644
--- a/src/app/key-unit/key-unit-management/key-unit-management.component.ts
+++ b/src/app/key-unit/key-unit-management/key-unit-management.component.ts
@@ -636,7 +636,7 @@ export class KeyUnitManagementComponent implements OnInit {
sessionStorage.setItem("companyName",data.name)
sessionStorage.setItem("editable","1")
sessionStorage.setItem("companyId",data.id)
- window.open(`/keyUnit/editplaninfo?id=${data.id}`);
+ window.open(`/keyUnit/editplaninfo?id=${data.id}&usci=${data.usci}`);
}
}
);
diff --git a/src/app/tabbar/tabbar.component.ts b/src/app/tabbar/tabbar.component.ts
index d96b5a0..436254b 100644
--- a/src/app/tabbar/tabbar.component.ts
+++ b/src/app/tabbar/tabbar.component.ts
@@ -61,14 +61,21 @@ export class TabbarComponent implements OnInit {
// this.companyIntegrityScore = obj
this.getIntegrityScore()
this.tabbarService.getMessage().subscribe((message: any)=>{
- console.log(789,message);//send a message
this.getIntegrityScore()
});
}
this.getUserInfo()
}
-
+ //根据usci获取当前单位的分数信息
+ getIntegrityScore(){
+ let params:any = {
+ USCI : this.route.snapshot.queryParams.usci
+ }
+ this.http.get('/api/Companies',{params:params}).subscribe((data:any) => {
+ this.companyIntegrityScore = data.items[0].companyIntegrityScore
+ })
+ }
isSpinner:boolean = false//下载帮助文档进度
//下载帮助文档
downloadHelpFile () {
@@ -151,15 +158,7 @@ export class TabbarComponent implements OnInit {
} //for循环
}
- //根据usci获取当前单位的分数信息
- getIntegrityScore(){
- let params:any = {
- USCI : this.route.snapshot.queryParams.usci
- }
- this.http.get('/api/Companies',{params:params}).subscribe((data:any) => {
- this.companyIntegrityScore = data.items[0].companyIntegrityScore
- })
- }
+
ngOnDestroy(){
this.routerEventsListener.unsubscribe()
diff --git a/src/app/working-area/model/axShape.ts b/src/app/working-area/model/axShape.ts
index 06176d7..9409a21 100644
--- a/src/app/working-area/model/axShape.ts
+++ b/src/app/working-area/model/axShape.ts
@@ -55,8 +55,8 @@ export class AxShape extends Graphics {
this.workingArea.selection.all().forEach(item => {
const x = event.data.global.x - this.mousePosition.x;
const y = event.data.global.y - this.mousePosition.y;
- item.x += x * (1 / this.workingArea.backgroundImage.scale.x);
- item.y += y * (1 / this.workingArea.backgroundImage.scale.y);
+ item.x += x * (1 / this.workingArea.camera2D.scale.x);
+ item.y += y * (1 / this.workingArea.camera2D.scale.y);
item.assetData.Point = new PIXI.Point(item.x, item.y);
this.workingArea.canvasData.isChange = true;
});
diff --git a/src/app/working-area/model/configuration.ts b/src/app/working-area/model/configuration.ts
new file mode 100644
index 0000000..bf0507a
--- /dev/null
+++ b/src/app/working-area/model/configuration.ts
@@ -0,0 +1,164 @@
+import { EventDispatcher } from 'three';
+import { EVENT_CHANGED } from './events';
+
+
+// GENERAL:
+/** The dimensioning unit for 2D floorplan measurements. */
+export var configDimUnit = 'dimUnit';
+// WALL:
+/** The initial wall height in cm. */
+export const configWallHeight = 'wallHeight';
+/** The initial wall thickness in cm. */
+export const configWallThickness = 'wallThickness';
+
+export const configSystemUI = 'systemUI';
+
+export const scale = 'scale';
+
+export const gridSpacing = 'gridSpacing';
+export const snapToGrid = 'snapToGrid';
+export const directionalDrag = 'directionalDrag';
+export const dragOnlyX = 'dragOnlyX';
+export const dragOnlyY = 'dragOnlyY';
+export const snapTolerance = 'snapTolerance'; //In CMS
+export const boundsX = 'boundsX'; //In CMS
+export const boundsY = 'boundsY'; //In CMS
+export const viewBounds = 'viewBounds';//In CMS
+
+export const dimInch = 'inch';
+
+/** Dimensioning in Inch. */
+export const dimFeetAndInch = 'feetAndInch';
+
+/** Dimensioning in Meter. */
+export const dimMeter = 'm';
+
+/** Dimensioning in Centi Meter. */
+export const dimCentiMeter = 'cm';
+
+/** Dimensioning in Milli Meter. */
+export const dimMilliMeter = 'mm';
+
+export const VIEW_TOP = 'topview';
+export const VIEW_FRONT = 'frontview';
+export const VIEW_RIGHT = 'rightview';
+export const VIEW_LEFT = 'leftview';
+export const VIEW_ISOMETRY = 'isometryview';
+
+export enum WallTypes{
+ STRAIGHT,
+ CURVED
+}
+
+export const TEXTURE_DEFAULT_REPEAT = 300;
+export const defaultWallTexture =
+{
+ color: '#FFFFFF', repeat: TEXTURE_DEFAULT_REPEAT, normalmap: 'textures/Wall/Brick_Wall_017_SD/Brick_Wall_017_normal.jpg', roughnessmap: 'textures/Wall/Brick_Wall_017_SD/Brick_Wall_017_roughness.jpg', colormap: 'textures/Wall/Brick_Wall_017_SD/Brick_Wall_017_basecolor.jpg', ambientmap: 'textures/Wall/Brick_Wall_017_SD/Brick_Wall_017_ambientOcclusion.jpg', bumpmap: 'textures/Wall/Brick_Wall_017_SD/Brick_Wall_017_height.png'
+};
+export const defaultFloorTexture =
+{
+ color: '#FFFFFF', emissive: '#181818', repeat: TEXTURE_DEFAULT_REPEAT, ambientmap: 'textures/Floor/Marble_Tiles_001/Marble_Tiles_001_ambientOcclusion.jpg', colormap: 'textures/Floor/Marble_Tiles_001/Marble_Tiles_001_basecolor.jpg', roughnessmap: 'textures/Floor/Marble_Tiles_001/Marble_Tiles_001_roughness.jpg', normalmap: 'textures/Floor/Marble_Tiles_001/Marble_Tiles_001_normal.jpg'
+};
+
+export const TEXTURE_PROPERTY_COLOR = 'color';
+export const TEXTURE_NO_PREVIEW = 'textures/NoPreview.jpg';
+
+export var config = {
+ dimUnit: dimCentiMeter,
+ wallHeight: 250,
+ wallThickness: 20,
+ systemUI: false,
+ scale: 1,
+ snapToGrid: true,
+ dragOnlyX: false,
+ dragOnlyY: false,
+ snapTolerance: 50,
+ gridSpacing: 20, // 50,
+ directionalDrag: true,
+ boundsX: 500,
+ boundsY: 500,
+ viewBounds: 20000 };
+
+export var wallInformation = { exterior: false, interior: false, midline: true, labels: true, exteriorlabel: 'e:', interiorlabel: 'i:', midlinelabel: 'm:' };
+
+
+/**
+ * The tolerance in cms between corners, otherwise below this tolerance they will snap together as one corner*/
+export const cornerTolerance = 20;
+
+/** Global configuration to customize the whole system.
+ * This is a singleton instance;
+ */
+export class Configuration extends EventDispatcher {
+ private static instance = new Configuration();
+ constructor() {
+ /** Configuration data loaded from/stored to extern. */
+ // this.data = {dimUnit: dimCentiMeter, wallHeight: 250, wallThickness: 10};
+ super();
+ }
+
+ static getInstance() {
+ if (this.instance === undefined
+ || this.instance === null) {
+ this.instance = new Configuration();
+ }
+ return this.instance;
+ }
+
+ static getData() {
+ // return {dimUnit: dimCentiMeter,wallHeight: 250, wallThickness: 10};
+ return config;
+ }
+
+ /** Set a configuration parameter. */
+ static setValue(key, value) {
+ // this.data[key] = value;
+ config[key] = value;
+ // if(key !== viewBounds){
+ Configuration.getInstance().dispatchEvent({ type: EVENT_CHANGED, item: Configuration.getInstance(), 'key': key, 'value': value });
+ // }
+ }
+
+ /** Get a string configuration parameter. */
+ static getStringValue(key) {
+ switch (key) {
+ case configDimUnit:
+ // return String(this.data[key]);
+ return String(Configuration.getData()[key]);
+ default:
+ throw new Error('Invalid string configuration parameter: ' + key);
+ }
+ }
+
+ /** Get a numeric configuration parameter. */
+ static getNumericValue(key) {
+ switch (key) {
+ case configSystemUI:
+ case configWallHeight:
+ case configWallThickness:
+ case scale:
+ case snapTolerance:
+ case gridSpacing:
+ case boundsX:
+ case boundsY:
+ case viewBounds:
+ // return Number(this.data[key]);
+ return Number(Configuration.getData()[key]);
+ default:
+ throw new Error('Invalid numeric configuration parameter: ' + key);
+ }
+ }
+
+ /** Get a numeric configuration parameter. */
+ static getBooleanValue(key) {
+ switch (key) {
+ case snapToGrid:
+ case directionalDrag:
+ case dragOnlyX:
+ case dragOnlyY:
+ return Boolean(Configuration.getData()[key]);
+ default:
+ throw new Error('Invalid Boolean configuration parameter: ' + key);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/working-area/model/dimensioning.ts b/src/app/working-area/model/dimensioning.ts
new file mode 100644
index 0000000..f7a3fc4
--- /dev/null
+++ b/src/app/working-area/model/dimensioning.ts
@@ -0,0 +1,145 @@
+import { Vector2, Vector3 } from 'three';
+import { Configuration, configDimUnit,dimInch, dimFeetAndInch, dimMeter, dimCentiMeter, dimMilliMeter } from './configuration';
+
+export const decimals = 1000;
+
+export const cmPerFoot = 30.48;
+export const pixelsPerFoot = 5.0;
+
+export const pixelsPerCm = 1; // 0.5;
+export const cmPerPixel = (1.0 / pixelsPerCm);
+
+
+export const dimensioningOptions = [dimInch, dimFeetAndInch, dimMeter, dimCentiMeter, dimMilliMeter];
+
+
+/** Dimensioning functions. */
+export class Dimensioning {
+ static cmToPixelVector2D(cmV2d) {
+ let pixelV2d = new Vector2(Dimensioning.cmToPixel(cmV2d.x), Dimensioning.cmToPixel(cmV2d.y));
+ return pixelV2d;
+ }
+
+ static cmToPixelVector3D(cmV3d) {
+ let pixelV2d = new Vector3(Dimensioning.cmToPixel(cmV3d.x), Dimensioning.cmToPixel(cmV3d.y), Dimensioning.cmToPixel(cmV3d.z));
+ return pixelV2d;
+ }
+
+ static pixelToCmVector2D(pixelV2d) {
+ let cmV2d = new Vector2(Dimensioning.cmToPixel(pixelV2d.x), Dimensioning.cmToPixel(pixelV2d.y));
+ return cmV2d;
+ }
+
+ static pixelToCmVector3D(pixel3d) {
+ let cmV2d = new Vector3(Dimensioning.cmToPixel(pixel3d.x), Dimensioning.cmToPixel(pixel3d.y), Dimensioning.cmToPixel(pixel3d.z));
+ return cmV2d;
+ }
+
+ static cmToPixel(cm, apply_scale = true) {
+ if (apply_scale) {
+ return cm * pixelsPerCm * Configuration.getNumericValue('scale');
+ }
+ return cm * pixelsPerCm;
+ }
+
+ static pixelToCm(pixel, apply_scale = true) {
+ if (apply_scale) {
+ return pixel * cmPerPixel * (1.0 / Configuration.getNumericValue('scale'));
+ }
+ return pixel * cmPerPixel;
+ }
+
+ static roundOff(value, decimals) {
+ return Math.round(decimals * value) / decimals;
+ }
+ /** Converts cm to dimensioning number.
+ * @param cm Centi meter value to be converted.
+ * @returns Number representation.
+ */
+ static cmFromMeasureRaw(measure) {
+ switch (Configuration.getStringValue(configDimUnit)) {
+ case dimFeetAndInch:
+ return Math.round(decimals * (measure * 30.480016459203095991)) / decimals;
+ case dimInch:
+ return Math.round(decimals * (measure * 2.5400013716002578512)) / decimals;
+ case dimMilliMeter:
+ return Math.round(decimals * (measure * 0.10000005400001014955)) / decimals;
+ case dimCentiMeter:
+ return measure;
+ case dimMeter:
+ default:
+ return Math.round(decimals * 100 * measure) / decimals;
+ }
+ }
+
+ /** Converts cm to dimensioning string.
+ * @param cm Centi meter value to be converted.
+ * @returns String representation.
+ */
+ static cmFromMeasure(measure) {
+ switch (Configuration.getStringValue(configDimUnit)) {
+ case dimFeetAndInch:
+ return Math.round(decimals * (measure * 30.480016459203095991)) / decimals + 'cm';
+ case dimInch:
+ return Math.round(decimals * (measure * 2.5400013716002578512)) / decimals + 'cm';
+ case dimMilliMeter:
+ return Math.round(decimals * (measure * 0.10000005400001014955)) / decimals + 'cm';
+ case dimCentiMeter:
+ return measure;
+ case dimMeter:
+ default:
+ return Math.round(decimals * 100 * measure) / decimals + 'cm';
+ }
+ }
+
+ /** Converts cm to dimensioning string.
+ * @param cm Centi meter value to be converted.
+ * @returns String representation.
+ */
+ static cmToMeasureRaw(cm, power = 1) {
+ switch (Configuration.getStringValue(configDimUnit)) {
+ case dimFeetAndInch: // dimFeetAndInch returns only the feet
+ var allInFeet = (cm * Math.pow(0.032808416666669996953, power));
+ return allInFeet;
+ case dimInch:
+ var inches = Math.round(decimals * (cm * Math.pow(0.393700, power))) / decimals;
+ return inches;
+ case dimMilliMeter:
+ var mm = Math.round(decimals * (cm * Math.pow(10, power))) / decimals;
+ return mm;
+ case dimCentiMeter:
+ return Math.round(decimals * cm) / decimals;
+ case dimMeter:
+ default:
+ var m = Math.round(decimals * (cm * Math.pow(0.01, power))) / decimals;
+ return m;
+ }
+ }
+
+ /** Converts cm to dimensioning string.
+ * @param cm Centi meter value to be converted.
+ * @returns String representation.
+ */
+ static cmToMeasure(cm, power = 1) {
+ switch (Configuration.getStringValue(configDimUnit)) {
+ case dimFeetAndInch:
+ var allInFeet = (cm * Math.pow(0.032808416666669996953, power));
+ var floorFeet = Math.floor(allInFeet);
+ var remainingFeet = allInFeet - floorFeet;
+ var remainingInches = Math.round(remainingFeet * 12);
+ return floorFeet + '\'' + remainingInches + '';
+ case dimInch:
+ var inches = Math.round(decimals * (cm * Math.pow(0.393700, power))) / decimals;
+ return inches + '\'';
+ case dimMilliMeter:
+ var mm = Math.round(decimals * (cm * Math.pow(10, power))) / decimals;
+ return '' + mm + 'mm';
+ case dimCentiMeter:
+ return '' + Math.round(decimals * cm) / decimals + 'cm';
+ case dimMeter:
+ default:
+ var m = Math.round(decimals * (cm * Math.pow(0.01, power))) / decimals;
+ return '' + m + 'm';
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/working-area/model/events.ts b/src/app/working-area/model/events.ts
new file mode 100644
index 0000000..2cd6cf5
--- /dev/null
+++ b/src/app/working-area/model/events.ts
@@ -0,0 +1,67 @@
+export const EVENT_ACTION = 'ACTION_EVENT';
+export const EVENT_DELETED = 'DELETED_EVENT';
+export const EVENT_MOVED = 'MOVED_EVENT';
+export const EVENT_REDRAW = 'REDRAW_EVENT';
+export const EVENT_NEW = 'NEW_EVENT';
+export const EVENT_LOADED = 'LOADED_EVENT';
+export const EVENT_LOADING = 'LOADING_EVENT';
+export const EVENT_UPDATED = 'UPDATED_EVENT';
+export const EVENT_SAVED = 'SAVED_EVENT';
+export const EVENT_CHANGED = 'CHANGED_EVENT';
+export const EVENT_GLTF_READY = 'GLTF_READY_EVENT';
+
+export const EVENT_EXTERNAL_FLOORPLAN_LOADED = 'EXTERNAL_FLOORPLAN_LOADED_EVENT';
+
+export const EVENT_NEW_PARAMETRIC_ITEM = 'NEW_PARAMETRIC_ITEM_EVENT';
+export const EVENT_NEW_ITEM = 'NEW_ITEM_EVENT';
+export const EVENT_ITEM_LOADING = 'ITEM_LOADING_EVENT';
+export const EVENT_ITEM_LOADED = 'ITEM_LOADED_EVENT';
+export const EVENT_ITEM_REMOVED = 'ITEM_REMOVED_EVENT';
+
+export const EVENT_ITEM_SELECTED = 'ITEM_SELECTED_EVENT';
+export const EVENT_ITEM_MOVE = 'ITEM_MOVED_EVENT';
+export const EVENT_ITEM_MOVE_FINISH = 'ITEM_MOVED_FINISH_EVENT';
+export const EVENT_ITEM_HOVERON = 'ITEM_HOVERON_EVENT';
+export const EVENT_ITEM_HOVEROFF = 'ITEM_HOVEROFF_EVENT';
+export const EVENT_NO_ITEM_SELECTED = 'ITEM_NO_SELECTED_EVENT';
+
+export const EVENT_MODE_RESET = 'MODE_RESET_EVENT';
+export const EVENT_CAMERA_MOVED = 'CAMERA_MOVED_EVENT';
+export const EVENT_CAMERA_ACTIVE_STATUS = 'CAMERA_ACTIVE_STATUS_EVENT';
+export const EVENT_CAMERA_VIEW_CHANGE = 'CAMERA_VIEW_CHANGE_EVENT';
+export const EVENT_FPS_EXIT = 'CAMERA_FPS_EXIT_EVENT';
+
+export const EVENT_WALL_CLICKED = 'WALL_CLICKED_EVENT';
+export const EVENT_ROOM_CLICKED = 'ROOM_CLICKED_EVENT';
+export const EVENT_FLOOR_CLICKED = 'FLOOR_CLICKED_EVENT';
+export const EVENT_NOTHING_CLICKED = 'NOTHING_CLICKED_EVENT';
+
+export const EVENT_ROOM_NAME_CHANGED = 'CHANGED_ROOM_NAME_EVENT';
+export const EVENT_NEW_ROOMS_ADDED = 'ADDED_NEW_ROOMS_EVENT';
+
+export const EVENT_CORNER_ATTRIBUTES_CHANGED = 'CORNER_ATTRIBUTES_CHANGED_EVENT';
+export const EVENT_WALL_ATTRIBUTES_CHANGED = 'WALL_ATTRIBUTES_CHANGED_EVENT';
+export const EVENT_ROOM_ATTRIBUTES_CHANGED = 'ROOM_ATTRIBUTES_CHANGED_EVENT';
+
+export const EVENT_CORNER_2D_CLICKED = 'CORNER_CLICKED_2D_EVENT';
+export const EVENT_WALL_2D_CLICKED = 'WALL_CLICKED_2D_EVENT';
+export const EVENT_ROOM_2D_CLICKED = 'ROOM_CLICKED_2D_EVENT';
+export const EVENT_2D_UNSELECTED = 'UNSELECTED_2D_EVENT';
+export const EVENT_2D_SELECTED = 'SELECTED_2D_EVENT';
+export const EVENT_NOTHING_2D_SELECTED = 'NOTHING_2D_SELECTED_EVENT';
+
+export const EVENT_CORNER_2D_DOUBLE_CLICKED = 'CORNER_DOUBLE_CLICKED_2D_EVENT';
+export const EVENT_WALL_2D_DOUBLE_CLICKED = 'WALL_DOUBLE_CLICKED_2D_EVENT';
+export const EVENT_ROOM_2D_DOUBLE_CLICKED = 'ROOM_DOUBLE_CLICKED_2D_EVENT';
+
+export const EVENT_CORNER_2D_HOVER = 'CORNER_HOVER_2D_EVENT';
+export const EVENT_WALL_2D_HOVER = 'WALL_HOVER_2D_EVENT';
+export const EVENT_ROOM_2D_HOVER = 'ROOM_HOVER_2D_EVENT';
+
+export const EVENT_KEY_PRESSED = 'KEY_PRESSED_EVENT';
+export const EVENT_KEY_RELEASED = 'KEY_RELEASED_EVENT';
+
+export const EVENT_UPDATE_TEXTURES = 'UPDATE_TEXTURES_EVENT';
+export const EVENT_MODIFY_TEXTURE_ATTRIBUTE = 'MODIFY_TEXTURE_ATTRIBUTE_EVENT';
+
+export const EVENT_PARAMETRIC_GEOMETRY_UPATED = 'PARAMETRIC_GEOMETRY_UPATED_EVENT';
diff --git a/src/app/working-area/model/grid2D.ts b/src/app/working-area/model/grid2D.ts
new file mode 100644
index 0000000..9683a49
--- /dev/null
+++ b/src/app/working-area/model/grid2D.ts
@@ -0,0 +1,87 @@
+import { Configuration, gridSpacing, viewBounds } from './configuration';
+import { EVENT_CHANGED } from './events';
+import { Graphics } from 'pixi.js';
+import { Vector2 } from 'three';
+import { Dimensioning } from './dimensioning';
+
+const GRID_SIZE = 10000;
+
+export class Grid2D extends Graphics {
+
+ canvas;
+ options;
+ size;
+ gridScale;
+ constructor(canvas, options) {
+ super();
+ // this.drawRect(0, 0, GRID_SIZE, GRID_SIZE);
+ this.canvas = canvas;
+ this.options = options;
+ this.size = new Vector2(GRID_SIZE, GRID_SIZE);
+ this.gridScale = 1.0;
+ this.width = this.size.x;
+ this.height = this.size.y;
+ this.drawRect(0, 0, GRID_SIZE, GRID_SIZE);
+ this.pivot.x = this.pivot.y = 0.5;
+ Configuration.getInstance().addEventListener(EVENT_CHANGED, (evt) => this.updateGrid());
+ this.updateGrid();
+ }
+
+ updateGrid() {
+ let gridSize = Dimensioning.cmToPixel(Configuration.getNumericValue(viewBounds) * 1);
+ let spacingCMS = Configuration.getNumericValue(gridSpacing);
+ let spacing = Dimensioning.cmToPixel(spacingCMS);
+ let totalLines = gridSize / spacing;
+ let halfSize = gridSize * 0.5;
+ let linewidth = Math.max(1.0 / this.gridScale, 1.0) * 1/this.canvas.scale.x;// 增加缩放系数
+ let highlightLineWidth = Math.max(1 / this.gridScale, 1.0) * 1/this.canvas.scale.x;// 增加缩放系数
+ let normalColor = 0xE0E0E0;
+ let highlightColor = 0xD0D0D0;
+ const cellSize = 5;
+ this.clear();
+ for (let i = 0; i <= totalLines; i++) {
+ let co = (i * spacing) - halfSize;
+ if (i % cellSize === 0) {
+ this.lineStyle(highlightLineWidth, highlightColor).moveTo(-halfSize, co).lineTo(halfSize, co);
+ this.lineStyle(highlightLineWidth, highlightColor).moveTo(co, -halfSize).lineTo(co, halfSize);
+ } else {
+ this.lineStyle(linewidth, normalColor).moveTo(-halfSize, co).lineTo(halfSize, co);
+ this.lineStyle(linewidth, normalColor).moveTo(co, -halfSize).lineTo(co, halfSize);
+ }
+ }
+ this.endFill();
+
+ this.beginFill(0xFF0000, 1.0);
+ this.drawCircle(-halfSize, -halfSize,5);
+ this.drawCircle(halfSize, -halfSize,5);
+ this.drawCircle(halfSize, halfSize,5);
+ this.drawCircle(-halfSize, halfSize,5);
+ this.drawCircle(0, 0, 5);
+ this.endFill();
+ }
+
+ getGridScale() {
+ return this.gridScale;
+ }
+
+ setGridScale(value) {
+ this.gridScale = value;
+ this.updateGrid();
+ }
+
+ configurationUpdate(evt) {
+ if (evt.key === gridSpacing) {
+ this.updateGrid();
+ }
+ }
+ getCellCoordinates(x, y) {
+ let gridSize = Dimensioning.cmToPixel(Configuration.getNumericValue(viewBounds) * 1);
+ let spacingCMS = Configuration.getNumericValue(gridSpacing);
+ let spacing = Dimensioning.cmToPixel(spacingCMS);
+ let halfSize = gridSize * 0.5;
+ return {
+ x: Math.floor((x - -halfSize) / spacing),
+ y: Math.floor((y - -halfSize) / spacing),
+ };
+ }
+}
diff --git a/src/app/working-area/working-area.component.html b/src/app/working-area/working-area.component.html
index ee66290..736e057 100644
--- a/src/app/working-area/working-area.component.html
+++ b/src/app/working-area/working-area.component.html
@@ -1,2 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts
index 263c66b..127abb7 100644
--- a/src/app/working-area/working-area.component.ts
+++ b/src/app/working-area/working-area.component.ts
@@ -19,6 +19,8 @@ import { AxLegend, Legend } from './model/axLegend';
import { AxGrid } from './model/axGrid';
import { AxSelection } from './model/axSelection';
import { AxMessageSystem } from './model/axMessageSystem';
+import { Grid2D } from './model/grid2D';
+import { Viewport } from 'pixi-viewport';
@Component({
@@ -44,7 +46,15 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
/**
* pixijs 程序
*/
- public app: PIXI.Application;
+ public app: PIXI.Application = null;
+ /**
+ * 相机
+ */
+ public camera2D: Viewport = null;
+ /**
+ * 网格
+ */
+ public grid2D: Grid2D = null;
/**
* 资源加载器
*/
@@ -137,13 +147,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
public animation;
public animationIcon;
public animationTime;
- /**
- * 网格
- */
- public grid: AxGrid = null;
// 是否按下Ctrl键
isCtrlKeyClicked = false;
- isMove = false;
/**
* 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta
* Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。
@@ -151,7 +156,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。
* Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。
*/
- public VERSION = '1.0.13.20210126_beta';
+ public VERSION = '1.0.14.20210202_beta';
/**
* 数据初始化
*/
@@ -181,10 +186,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
public setMulitSelect(b: boolean) {
if (b) {
this.isCtrlKeyClicked = true;
+ this.camera2D.plugins.pause('drag');
} else {
this.isCtrlKeyClicked = false;
- this.rectToolGraphics.visible = false;
- this.rectToolGraphics.clear();
+ this.camera2D.drag();
}
}
/**
@@ -258,44 +263,44 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
}
/**
*
- * @param event 鼠标滑动事件
- */
- public mouseWheelHandel(event) {
- const delX = this.mousePosition.x - this.backgroundImage.position.x;
- const delY = this.mousePosition.y - this.backgroundImage.position.y;
- const pivot = this.backgroundImage.toLocal(this.mousePosition);
- const delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
- if (delta > 0) {
- if (this.backgroundImage.scale.x >= 32) {
- this.backgroundImage.scale.x = 32;
- this.backgroundImage.scale.y = 32;
- this.resizeItem(1 / this.backgroundImage.scale.x);
- return;
- }
- this.backgroundImage.pivot.set(pivot.x, pivot.y);
+ * @param event 鼠标滑动事件,改用ViewPort控制
+ */
+ // public mouseWheelHandel(event) {
+ // const delX = this.mousePosition.x - this.backgroundImage.position.x;
+ // const delY = this.mousePosition.y - this.backgroundImage.position.y;
+ // const pivot = this.backgroundImage.toLocal(this.mousePosition);
+ // const delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
+ // if (delta > 0) {
+ // if (this.backgroundImage.scale.x >= 32) {
+ // this.backgroundImage.scale.x = 32;
+ // this.backgroundImage.scale.y = 32;
+ // this.resizeItem(1 / this.backgroundImage.scale.x);
+ // return;
+ // }
+ // this.backgroundImage.pivot.set(pivot.x, pivot.y);
- this.backgroundImage.scale.x += this.backgroundImage.scale.x * 0.1;
- this.backgroundImage.scale.y += this.backgroundImage.scale.y * 0.1;
+ // this.backgroundImage.scale.x += this.backgroundImage.scale.x * 0.1;
+ // this.backgroundImage.scale.y += this.backgroundImage.scale.y * 0.1;
- this.backgroundImage.position.x += delX;
- this.backgroundImage.position.y += delY;
- } else if (delta < 0) {
- if (this.backgroundImage.scale.x <= 0.1) {
- this.backgroundImage.scale.x = 0.1;
- this.backgroundImage.scale.y = 0.1;
- this.resizeItem(1 / this.backgroundImage.scale.x);
- return;
- }
- this.backgroundImage.pivot.set(pivot.x, pivot.y);
+ // this.backgroundImage.position.x += delX;
+ // this.backgroundImage.position.y += delY;
+ // } else if (delta < 0) {
+ // if (this.backgroundImage.scale.x <= 0.1) {
+ // this.backgroundImage.scale.x = 0.1;
+ // this.backgroundImage.scale.y = 0.1;
+ // this.resizeItem(1 / this.backgroundImage.scale.x);
+ // return;
+ // }
+ // this.backgroundImage.pivot.set(pivot.x, pivot.y);
- this.backgroundImage.scale.x -= this.backgroundImage.scale.x * 0.1;
- this.backgroundImage.scale.y -= this.backgroundImage.scale.y * 0.1;
+ // this.backgroundImage.scale.x -= this.backgroundImage.scale.x * 0.1;
+ // this.backgroundImage.scale.y -= this.backgroundImage.scale.y * 0.1;
- this.backgroundImage.position.x += delX;
- this.backgroundImage.position.y += delY;
- }
- this.resizeItem(1 / this.backgroundImage.scale.x);
- }
+ // this.backgroundImage.position.x += delX;
+ // this.backgroundImage.position.y += delY;
+ // }
+ // this.resizeItem(1 / this.backgroundImage.scale.x);
+ // }
// 重置图形缩放
public resizeItem(size: number) {
this.backgroundImage.children.forEach(item => {
@@ -307,27 +312,149 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
}
/**
*
- * @param icon 移动到选中车辆到屏幕中心点
- */
- public moveIconToScreenCenter(icon) {
- if (icon.parent === this.backgroundImage && (
- icon.assetData.Type === 1 ||
- icon.assetData.Type === 2 ||
- icon.assetData.Type === 3 ||
- icon.assetData.Type === 4
- )) {
- this.backgroundImage.pivot.set(icon.x, icon.y);
- this.backgroundImage.position.set(771, 404);
- clearTimeout(this.animationTime);
- this.animation?.pause();
- this.animationIcon?.scale.set(1);
- this.animation = this.animator.breathe(icon, 10, 10, 30, true, 0);
- this.animationIcon = icon;
- this.animationTime = setTimeout(() => {
- this.animation?.pause();
- this.animationIcon?.scale.set(1);
- }, 5000);
- }
+ * @param icon 移动到选中车辆到屏幕中心点，改用Viewport控制
+ */
+ // public moveIconToScreenCenter(icon) {
+ // if (icon.parent === this.backgroundImage && (
+ // icon.assetData.Type === 1 ||
+ // icon.assetData.Type === 2 ||
+ // icon.assetData.Type === 3 ||
+ // icon.assetData.Type === 4
+ // )) {
+ // this.backgroundImage.pivot.set(icon.x, icon.y);
+ // this.backgroundImage.position.set(771, 404);
+ // clearTimeout(this.animationTime);
+ // this.animation?.pause();
+ // this.animationIcon?.scale.set(1);
+ // this.animation = this.animator.breathe(icon, 10, 10, 30, true, 0);
+ // this.animationIcon = icon;
+ // this.animationTime = setTimeout(() => {
+ // this.animation?.pause();
+ // this.animationIcon?.scale.set(1);
+ // }, 5000);
+ // }
+ // }
+
+
+ /**
+ * 创建2D相机
+ */
+ private createViewport(): void {
+ this.camera2D = new Viewport({
+ screenWidth: this.app.view.width,
+ screenHeight: this.app.view.height,
+ worldWidth: 20000,
+ worldHeight: 20000,
+ interaction: this.app.renderer.plugins.interaction,
+ });
+
+ this.app.stage.addChild(this.camera2D);
+
+ this.camera2D
+ .clamp({
+ left: -10000,
+ right: 10000,
+ top: -10000,
+ bottom: 10000,
+ })
+ .drag()
+ .pinch()
+ .wheel()
+ .clampZoom({
+ minScale: 0.12,
+ maxScale: 16,
+ })
+ .decelerate();
+
+ this.camera2D.on('wheel', event => {
+ this.updateCamera2D();
+ });
+
+ this.camera2D.on('pointerdown', event => {
+ if (this.isCtrlKeyClicked === true) {
+ this.rectToolGraphics.visible = true;
+ this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
+ this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
+ }
+ });
+ this.camera2D.on('pointerup', event => {
+ if (this.isCtrlKeyClicked === true) {
+ this.rectToolGraphics.visible = false;
+ const shapes: AxShape[] = [];
+ this.backgroundImage.children.forEach(item => {
+ if ( item instanceof AxShape
+ && item instanceof AxPreviewImageShape === false) {
+ // 判断2个矩形是否相交
+ const rect1 = this.rectToolGraphics.getBounds();
+ const rect2 = item.getBounds();
+ if (this.isOverlap(rect1, rect2)) {
+ shapes.push(item);
+ }
+ }
+ });
+ this.rectToolGraphics.clear();
+ this.selectAll(shapes);
+ }
+ });
+ this.camera2D.on('pointerupoutside', event => {
+ if (this.isCtrlKeyClicked === true) {
+ this.rectToolGraphics.visible = false;
+ const shapes: AxShape[] = [];
+ this.backgroundImage.children.forEach(item => {
+ if ( item instanceof AxShape
+ && item instanceof AxPreviewImageShape === false) {
+ // 判断2个矩形是否相交
+ const rect1 = this.rectToolGraphics.getBounds();
+ const rect2 = item.getBounds();
+ if (this.isOverlap(rect1, rect2)) {
+ shapes.push(item);
+ }
+ }
+ });
+ this.rectToolGraphics.clear();
+ this.selectAll(shapes);
+ }
+ });
+ this.camera2D.on('pointermove', event => {
+ if (this.isCtrlKeyClicked === true
+ && this.rectToolGraphics.visible === true) {
+ this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
+
+ const init = this.initialScreenMousePos;
+ const final = this.finalScreenMousePos;
+
+ this.rectToolGraphics.clear();
+ this.rectToolGraphics.lineStyle(2, 0x00ff00, 1);
+ this.rectToolGraphics.beginFill(0xccccf2, 0.25);
+ if (final.x > init.x && final.y > init.y) {
+ this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y);
+ } else if (final.x > init.x && final.y < init.y) {
+ this.rectToolGraphics.drawRect(init.x, final.y, final.x - init.x, init.y - final.y);
+ } else if (final.x < init.x && final.y > init.y) {
+ this.rectToolGraphics.drawRect(final.x, init.y, init.x - final.x, final.y - init.y);
+ } else if (final.x < init.x && final.y < init.y) {
+ this.rectToolGraphics.drawRect(final.x, final.y, init.x - final.x, init.y - final.y);
+ }
+ this.rectToolGraphics.endFill();
+ }
+ });
+
+ }
+ /**
+ * 更新2D相机
+ */
+ private updateCamera2D() {
+ this.grid2D.updateGrid();
+ this.resizeItem(1 / this.camera2D.scale.x);
+ }
+
+ /**
+ * 创建2D网格
+ */
+ private createGrid2D(): void {
+ this.grid2D = new Grid2D(this.camera2D, null);
+
+ this.camera2D.addChild(this.grid2D);
}
/**
* 创建画布
@@ -344,20 +471,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.content.nativeElement.appendChild(this.app.view);
this.app.view.style.border = '1px dashed blue';
this.animator = new Charm(PIXI);
- // 创建网格
- this.grid = new AxGrid(this.app.view.width, null, { color: 0xffffff }, true, true);
- // this.grid.x = (this.app.view.width / 2) - (this.grid.gridWidth / 2);
- // this.grid.y = (this.app.view.height / 2) - (this.grid.gridWidth / 2);
- // this.grid.pivot.set(0.5);
- this.grid.x = this.app.stage.x;
- this.grid.y = this.app.stage.y;
- this.app.stage.addChild(this.grid);
- this.grid.drawGrid();
- this.grid.onMousemove = (evt, gridCoord) => {
-
- };
+ this.createViewport();
+ this.createGrid2D();
this.createBackgroundImage();
+
this.app.ticker.add((delta) => {
this.animator.update();
this.mousePosition = this.app.renderer.plugins.interaction.mouse.global;
@@ -371,28 +489,28 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.refreshPreviewLineSegment(this.currentClickPoint.position, this.circleShadow.position);
this.refreshPreviewPoint();
}
- /**
- * 显示框选
- */
- if (this.rectToolGraphics.visible === true) {
+ // /**
+ // * 显示框选
+ // */
+ // if (this.rectToolGraphics.visible === true) {
- const init = this.initialScreenMousePos;
- const final = this.finalScreenMousePos;
+ // const init = this.initialScreenMousePos;
+ // const final = this.finalScreenMousePos;
- this.rectToolGraphics.clear();
- this.rectToolGraphics.lineStyle(2, 0x00ff00, 1);
- this.rectToolGraphics.beginFill(0xccccf2, 0.25);
- if (final.x > init.x && final.y > init.y) {
- this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y);
- } else if (final.x > init.x && final.y < init.y) {
- this.rectToolGraphics.drawRect(init.x, final.y, final.x - init.x, init.y - final.y);
- } else if (final.x < init.x && final.y > init.y) {
- this.rectToolGraphics.drawRect(final.x, init.y, init.x - final.x, final.y - init.y);
- } else if (final.x < init.x && final.y < init.y) {
- this.rectToolGraphics.drawRect(final.x, final.y, init.x - final.x, init.y - final.y);
- }
- this.rectToolGraphics.endFill();
- }
+ // this.rectToolGraphics.clear();
+ // this.rectToolGraphics.lineStyle(2, 0x00ff00, 1);
+ // this.rectToolGraphics.beginFill(0xccccf2, 0.25);
+ // if (final.x > init.x && final.y > init.y) {
+ // this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y);
+ // } else if (final.x > init.x && final.y < init.y) {
+ // this.rectToolGraphics.drawRect(init.x, final.y, final.x - init.x, init.y - final.y);
+ // } else if (final.x < init.x && final.y > init.y) {
+ // this.rectToolGraphics.drawRect(final.x, init.y, init.x - final.x, final.y - init.y);
+ // } else if (final.x < init.x && final.y < init.y) {
+ // this.rectToolGraphics.drawRect(final.x, final.y, init.x - final.x, init.y - final.y);
+ // }
+ // this.rectToolGraphics.endFill();
+ // }
});
/**
* 创建图标事件（数据处理）
@@ -432,7 +550,27 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.emit('canvasDataChanged');
this.canvasData.isChange = true;
});
+ // ///
+ // this.app.renderer.plugins.interaction.on('pointerdown', (event) => {
+ // if (event.data.button !== 2) { return };
+ // this.dragFlag = true;
+ // this.startPoint = { x: event.data.global.x, y: event.data.global.y };
+ // });
+ // this.app.renderer.plugins.interaction.on('pointermove', (event) => {
+ // if (this.dragFlag) {
+ // const dx = event.data.global.x - this.startPoint.x;
+ // const dy = event.data.global.y - this.startPoint.y;
+ // this.app.stage.position.x += dx;
+ // this.app.stage.position.y += dy;
+ // this.startPoint = { x: event.data.global.x, y: event.data.global.y };
+ // }
+ // });
+ // this.app.renderer.plugins.interaction.on('pointerup', (event) => {
+ // this.dragFlag = false;
+ // });
}
+ // dragFlag;
+ // startPoint;
/**
* 重置画布
*/
@@ -602,13 +740,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.backgroundImage
.on('pointerdown', event => {
if (event.data.button !== 0) { return; }
- console.log(this.backgroundImage.toLocal(this.mousePosition));
- if (!this.isMove && this.isCtrlKeyClicked === false) {
- event.currentTarget.data = event.data;
- this.isMove = true;
- event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
- event.currentTarget.dragPoint.x -= event.currentTarget.x;
- event.currentTarget.dragPoint.y -= event.currentTarget.y;
+ // console.log(this.backgroundImage.toLocal(this.mousePosition));
+ if (this.isCtrlKeyClicked === false) {
switch (this.paintMode) {
case PaintMode.endPaint:
break;
@@ -799,51 +932,49 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
// this.emit('backgroundScale', this.backgroundImage.scale.x);
break;
}
- } else if (!this.isMove && this.isCtrlKeyClicked === true) {
- this.rectToolGraphics.visible = true;
- this.isMove = true;
- this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
- this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
}
+ // else if (this.isCtrlKeyClicked === true) {
+ // this.rectToolGraphics.visible = true;
+ // this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
+ // this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
+ // }
})
.on('pointerup', event => {
- this.isMove = false;
- event.currentTarget.data = null;
+ // event.currentTarget.data = null;
- if (this.rectToolGraphics.visible === true) {
- const shapes: AxShape[] = [];
- this.backgroundImage.children.forEach(item => {
- if ( item instanceof AxShape
- && item instanceof AxPreviewImageShape === false) {
- // 判断2个矩形是否相交
- const rect1 = this.rectToolGraphics.getBounds();
- const rect2 = item.getBounds();
- if (this.isOverlap(rect1, rect2)) {
- shapes.push(item);
- }
- }
- });
- this.rectToolGraphics.clear();
- this.rectToolGraphics.visible = false;
- this.selectAll(shapes);
- }
+ // if (this.rectToolGraphics.visible === true) {
+ // const shapes: AxShape[] = [];
+ // this.backgroundImage.children.forEach(item => {
+ // if ( item instanceof AxShape
+ // && item instanceof AxPreviewImageShape === false) {
+ // // 判断2个矩形是否相交
+ // const rect1 = this.rectToolGraphics.getBounds();
+ // const rect2 = item.getBounds();
+ // if (this.isOverlap(rect1, rect2)) {
+ // shapes.push(item);
+ // }
+ // }
+ // });
+ // this.rectToolGraphics.clear();
+ // this.rectToolGraphics.visible = false;
+ // this.selectAll(shapes);
+ // }
})
.on('pointerupoutside', event => {
- if (this.isMove) {
- this.isMove = false;
- event.currentTarget.data = null;
- }
+ // if (this.isMove) {
+ // event.currentTarget.data = null;
+ // }
})
.on('pointermove', event => {
- if (this.isMove && this.isCtrlKeyClicked === false) {
- const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
- event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x;
- event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y;
- } else if (this.isMove && this.isCtrlKeyClicked === true) {
- if (this.rectToolGraphics.visible === true) {
- this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
- }
- }
+ // if (this.isCtrlKeyClicked === false) {
+ // // const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
+ // // event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x;
+ // // event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y;
+ // } else if (this.isCtrlKeyClicked === true) {
+ // if (this.rectToolGraphics.visible === true) {
+ // this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
+ // }
+ // }
})
.on('rightclick', event => {
event.stopPropagation();
@@ -862,7 +993,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.previewImage.visible = false;
}
});
- this.app.stage.addChild(this.backgroundImage);
+ this.camera2D.addChild(this.backgroundImage);
this.createPreviewImage();
this.createPreviewLineSegment();
this.createCircleShadow();
@@ -887,19 +1018,22 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
/**
* 刷新背景图
*/
- public async refreshBackgroundImage(imageUrl: string, imageAngle: number): Promise