From 0f606ae4613ef3c7d1de6867bcd6d950e234fe6e Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Fri, 29 Jan 2021 16:11:14 +0800 Subject: [PATCH 1/9] =?UTF-8?q?[=E4=BF=AE=E6=94=B9]=E5=88=9B=E5=BB=BA?= =?UTF-8?q?=E5=8D=95=E4=BD=8D=E5=90=8E=E4=B8=8D=E6=98=BE=E7=A4=BA=E5=88=86?= =?UTF-8?q?=E6=95=B0bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../key-unit-management.component.ts | 2 +- src/app/tabbar/tabbar.component.ts | 21 +++++++++---------- 2 files changed, 11 insertions(+), 12 deletions(-) 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() From 088b9031ddfdd74410a9361b3d020a74efdfbf72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=8C=AF=E5=8D=87?= <359059686@qq.com> Date: Fri, 29 Jan 2021 17:14:38 +0800 Subject: [PATCH 2/9] Grid2D --- src/app/working-area/model/grid2D.ts | 86 ++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 src/app/working-area/model/grid2D.ts diff --git a/src/app/working-area/model/grid2D.ts b/src/app/working-area/model/grid2D.ts new file mode 100644 index 0000000..b74408d --- /dev/null +++ b/src/app/working-area/model/grid2D.ts @@ -0,0 +1,86 @@ +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); + let highlightLineWidth = Math.max(2.0 / this.gridScale, 1.0); + let normalColor = 0xE0E0E0; + let highlightColor = 0xD0D0D0; + this.clear(); + for (let i = 0; i <= totalLines; i++) { + let co = (i * spacing) - halfSize; + if (i % 5 === 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), + }; + } +} From 67ca9c9d2bf83483d9dcb74b63a7df23ff054d16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=8C=AF=E5=8D=87?= <359059686@qq.com> Date: Fri, 29 Jan 2021 17:43:44 +0800 Subject: [PATCH 3/9] =?UTF-8?q?=E5=85=B3=E8=81=94=E7=B1=BB=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/working-area/model/configuration.ts | 157 ++++++++++++++++++++ src/app/working-area/model/dimensioning.ts | 145 ++++++++++++++++++ src/app/working-area/model/events.ts | 67 +++++++++ 3 files changed, 369 insertions(+) create mode 100644 src/app/working-area/model/configuration.ts create mode 100644 src/app/working-area/model/dimensioning.ts create mode 100644 src/app/working-area/model/events.ts diff --git a/src/app/working-area/model/configuration.ts b/src/app/working-area/model/configuration.ts new file mode 100644 index 0000000..dc7b517 --- /dev/null +++ b/src/app/working-area/model/configuration.ts @@ -0,0 +1,157 @@ +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: 50, + directionalDrag: true, + boundsX: 500, boundsY: 500, + viewBounds: 5000 }; + +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..2ae8000 --- /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 = 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'; From 022114ed5fea33bbd6f91c79aef15f76cfe6d4d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=8C=AF=E5=8D=87?= <359059686@qq.com> Date: Mon, 1 Feb 2021 14:27:49 +0800 Subject: [PATCH 4/9] =?UTF-8?q?=E5=AE=8C=E5=96=84=E7=BD=91=E6=A0=BC?= =?UTF-8?q?=EF=BC=8C=E6=96=B0=E5=A2=9E2d=E7=9B=B8=E6=9C=BA=E6=9B=BF?= =?UTF-8?q?=E6=8D=A2=E7=BC=A9=E6=94=BE=E6=8E=A7=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 13 + package.json | 1 + src/app/working-area/model/axShape.ts | 4 +- src/app/working-area/model/configuration.ts | 23 +- src/app/working-area/model/dimensioning.ts | 2 +- src/app/working-area/model/grid2D.ts | 7 +- .../working-area/working-area.component.html | 3 +- .../working-area/working-area.component.ts | 252 ++++++++++++------ 8 files changed, 210 insertions(+), 95 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0eb480e..9c9cca4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12876,6 +12876,11 @@ "sha.js": "^2.4.8" } }, + "penner": { + "version": "0.1.3", + "resolved": "https://registry.npm.taobao.org/penner/download/penner-0.1.3.tgz", + "integrity": "sha1-C4tILU6bOa8vPXw3WSIpuKzClwU=" + }, "perfect-scrollbar": { "version": "1.5.0", "resolved": "https://registry.npm.taobao.org/perfect-scrollbar/download/perfect-scrollbar-1.5.0.tgz", @@ -12962,6 +12967,14 @@ "@pixi/filter-zoom-blur": "3.1.1" } }, + "pixi-viewport": { + "version": "4.18.1", + "resolved": "https://registry.npm.taobao.org/pixi-viewport/download/pixi-viewport-4.18.1.tgz", + "integrity": "sha1-EP1/72igFjwcKhxvI83KVvzbRvM=", + "requires": { + "penner": "^0.1.3" + } + }, "pixi.js": { "version": "5.3.3", "resolved": "https://registry.npm.taobao.org/pixi.js/download/pixi.js-5.3.3.tgz", diff --git a/package.json b/package.json index ed01b60..d15eb17 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "ngx-perfect-scrollbar": "^8.0.0", "photo-sphere-viewer": "^4.0.7", "pixi-filters": "^3.1.1", + "pixi-viewport": "^4.18.1", "pixi.js": "^5.3.2", "rxjs": "~6.5.4", "swiper": "^5.3.7", 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 index dc7b517..bf0507a 100644 --- a/src/app/working-area/model/configuration.ts +++ b/src/app/working-area/model/configuration.ts @@ -63,14 +63,21 @@ export const defaultFloorTexture = 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: 50, - directionalDrag: true, - boundsX: 500, boundsY: 500, - viewBounds: 5000 }; +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:' }; diff --git a/src/app/working-area/model/dimensioning.ts b/src/app/working-area/model/dimensioning.ts index 2ae8000..f7a3fc4 100644 --- a/src/app/working-area/model/dimensioning.ts +++ b/src/app/working-area/model/dimensioning.ts @@ -6,7 +6,7 @@ export const decimals = 1000; export const cmPerFoot = 30.48; export const pixelsPerFoot = 5.0; -export const pixelsPerCm = 0.5; +export const pixelsPerCm = 1; // 0.5; export const cmPerPixel = (1.0 / pixelsPerCm); diff --git a/src/app/working-area/model/grid2D.ts b/src/app/working-area/model/grid2D.ts index b74408d..9683a49 100644 --- a/src/app/working-area/model/grid2D.ts +++ b/src/app/working-area/model/grid2D.ts @@ -33,14 +33,15 @@ export class Grid2D extends Graphics { let spacing = Dimensioning.cmToPixel(spacingCMS); let totalLines = gridSize / spacing; let halfSize = gridSize * 0.5; - let linewidth = Math.max(1.0 / this.gridScale, 1.0); - let highlightLineWidth = Math.max(2.0 / this.gridScale, 1.0); + 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 % 5 === 0) { + 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 { 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..f806094 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,10 +147,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV public animation; public animationIcon; public animationTime; - /** - * 网格 - */ - public grid: AxGrid = null; // 是否按下Ctrl键 isCtrlKeyClicked = false; isMove = false; @@ -258,44 +264,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 +313,82 @@ 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(); + }); + } + /** + * 更新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 +405,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; @@ -432,7 +484,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; /** * 重置画布 */ @@ -605,7 +677,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV console.log(this.backgroundImage.toLocal(this.mousePosition)); if (!this.isMove && this.isCtrlKeyClicked === false) { event.currentTarget.data = event.data; - this.isMove = true; + // 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; @@ -801,7 +873,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } } else if (!this.isMove && this.isCtrlKeyClicked === true) { this.rectToolGraphics.visible = true; - this.isMove = true; + // this.isMove = true; this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); } @@ -862,7 +934,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(); @@ -893,13 +965,16 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } this.backgroundImage.scale.set(1); this.backgroundImage.pivot.set(0); - this.backgroundImage.x = this.app.view.width / 2; - this.backgroundImage.y = this.app.view.height / 2; + // this.backgroundImage.x = this.app.view.width / 2; + // this.backgroundImage.y = this.app.view.height / 2; if (imageUrl === undefined || imageUrl === null || imageUrl === '') { this.backgroundImage.texture = this.backgroundTexture; } else { this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl); + console.log(imageUrl); } + this.backgroundImage.x = this.backgroundImage.width/2; + this.backgroundImage.y = this.backgroundImage.height/2; this.backgroundImage.angle = imageAngle; // 等待图片加载完成 const imageWidth = this.backgroundImage.texture.width; @@ -908,9 +983,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV const appHeight = this.app.view.height; const wScale = appWidth / imageWidth; const hScale = appHeight / imageHeight; - const scale = wScale < hScale ? wScale : hScale; + let scale = wScale < hScale ? wScale : hScale; + + if (scale < 0.12) { + scale = 0.12; + } + if (scale > 16) { + scale = 16; + } + this.camera2D.scale.set(scale); + this.camera2D.x = 235; // 设置图片缩放 - this.backgroundImage.scale.set(scale); + // this.backgroundImage.scale.set(scale); // this.backgroundImage.visible = true; this.backgroundImage.children.forEach((item) => { if (item instanceof AxShape) { @@ -944,6 +1028,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // 创建处置预案图形 this.createNodeShape(this.canvasData.selectPanelPoint.Data); this.createAxLegend(); + + this.updateCamera2D(); } /** * 加载无关联信息处置预案 @@ -965,6 +1051,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV }); // 创建处置预案图形 this.createNodeShape(this.canvasData.selectPanelPoint.Data); + + this.updateCamera2D(); } /** * 创建安信图例 @@ -1351,6 +1439,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.createNodeShape(this.canvasData.selectPanelPoint.Data); // 隐藏图标 this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false); + + this.updateCamera2D(); } /** @@ -1378,6 +1468,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.createNodeShape(this.canvasData.selectPanelPoint.Data); // 隐藏图标 this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false); + + this.updateCamera2D(); } /** * 考官点击楼层-创建试卷 @@ -1402,6 +1494,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.createNodeShape(this.canvasData.selectPanelPoint.Data); // 隐藏图标 this.setNameVisible(false, 0); + + this.updateCamera2D(); } //////////////////////////////////////////////////////////////////// 选择逻辑 /** From 861a789033e701aa3d6965c36c81c43efa5c41f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=8C=AF=E5=8D=87?= <359059686@qq.com> Date: Mon, 1 Feb 2021 14:47:47 +0800 Subject: [PATCH 5/9] =?UTF-8?q?=E7=89=88=E6=9C=AC=E5=8F=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/working-area/working-area.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index f806094..514bbbe 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -157,7 +157,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * RC版: 该版本已经相当成熟了,基本上不存在导致错误的BUG,与即将发行的正式版相差无几。 * Release版: 该版本意味“最终版本”,在前面版本的一系列测试版之后,终归会有一个正式版本,是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下,Release不会以单词形式出现在软件封面上,取而代之的是符号®。 */ - public VERSION = '1.0.13.20210126_beta'; + public VERSION = '1.0.13.20210201_beta'; /** * 数据初始化 */ From dd8667c65a42faa048cebffa781d92f473c9de2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=8C=AF=E5=8D=87?= <359059686@qq.com> Date: Mon, 1 Feb 2021 14:50:01 +0800 Subject: [PATCH 6/9] =?UTF-8?q?=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/working-area/working-area.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 514bbbe..06c4241 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -993,6 +993,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } this.camera2D.scale.set(scale); this.camera2D.x = 235; + this.camera2D.y = 0; // 设置图片缩放 // this.backgroundImage.scale.set(scale); // this.backgroundImage.visible = true; From eb64b8e707f7ef67d5d68029059224f2138c19d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=8C=AF=E5=8D=87?= <359059686@qq.com> Date: Tue, 2 Feb 2021 10:11:15 +0800 Subject: [PATCH 7/9] =?UTF-8?q?[=E4=BC=98=E5=8C=96]=E6=A1=86=E9=80=89?= =?UTF-8?q?=E7=8E=B0=E5=9C=A8=E4=B8=8D=E5=86=8D=E5=B1=80=E9=99=90=E4=BA=8E?= =?UTF-8?q?=E8=83=8C=E6=99=AF=E5=9B=BE=EF=BC=8C=E8=80=8C=E6=98=AF=E6=95=B4?= =?UTF-8?q?=E4=B8=AA=E5=8F=AF=E8=A7=86=E5=8C=BA=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../working-area/working-area.component.ts | 207 +++++++++++------- 1 file changed, 133 insertions(+), 74 deletions(-) diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 06c4241..ac66ffe 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -149,7 +149,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV public animationTime; // 是否按下Ctrl键 isCtrlKeyClicked = false; - isMove = false; /** * 本软件版本号由四部分组成:<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如:1.0.0.20210105_beta * Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主,通常只在软件开发者内部交流,一般而言,该版本软件的Bug较多,需要继续修改。 @@ -157,7 +156,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * RC版: 该版本已经相当成熟了,基本上不存在导致错误的BUG,与即将发行的正式版相差无几。 * Release版: 该版本意味“最终版本”,在前面版本的一系列测试版之后,终归会有一个正式版本,是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下,Release不会以单词形式出现在软件封面上,取而代之的是符号®。 */ - public VERSION = '1.0.13.20210201_beta'; + public VERSION = '1.0.14.20210202_beta'; /** * 数据初始化 */ @@ -187,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(); } } /** @@ -352,8 +351,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.app.stage.addChild(this.camera2D); this.camera2D - .clamp( - { + .clamp({ left: -10000, right: 10000, top: -10000, @@ -362,17 +360,85 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV .drag() .pinch() .wheel() - .clampZoom( - { + .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相机 @@ -423,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(); + // } }); /** * 创建图标事件(数据处理) @@ -674,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; @@ -871,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(); From 6a585da7f351f445d79180ba4ad2faa65fd60c66 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Tue, 2 Feb 2021 10:31:53 +0800 Subject: [PATCH 8/9] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E5=88=A0=E9=99=A4?= =?UTF-8?q?=E5=A4=9A=E4=BD=99=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basicinfo/basicinfo.component.html | 3 +- .../key-unit/basicinfo/basicinfo.component.ts | 113 +++++------------- 2 files changed, 32 insertions(+), 84 deletions(-) diff --git a/src/app/key-unit/basicinfo/basicinfo.component.html b/src/app/key-unit/basicinfo/basicinfo.component.html index 57c48e2..13d7609 100644 --- a/src/app/key-unit/basicinfo/basicinfo.component.html +++ b/src/app/key-unit/basicinfo/basicinfo.component.html @@ -108,7 +108,8 @@