diff --git a/src/app/canvas-share-data.service.ts b/src/app/canvas-share-data.service.ts index dbc257c..1d74555 100644 --- a/src/app/canvas-share-data.service.ts +++ b/src/app/canvas-share-data.service.ts @@ -57,6 +57,8 @@ export class CanvasShareDataService { ['水泵接合器（地上）', '水泵接合器'], ['水泵接合器（地下）', '水泵接合器'], ['水泵接合器（墙壁）', '水泵接合器'], + ['水泵接合器（喷淋）', '水泵接合器'], + ['水泵接合器（消防）', '水泵接合器'], ['消防水泵房', '消防水泵房'], ['箱式消火栓', '箱式消火栓'], ['固定水炮', '消防水炮'], diff --git a/src/app/working-area/model/axImageShape.ts b/src/app/working-area/model/axImageShape.ts index 5225df6..44a1729 100644 --- a/src/app/working-area/model/axImageShape.ts +++ b/src/app/working-area/model/axImageShape.ts @@ -7,6 +7,8 @@ import { PropertyInfo } from './PropertyInfo'; import { AxShape } from './axShape'; import { Sprite, Point, Rectangle } from 'pixi.js'; import { AxArrowConnector } from './axArrowConnector'; +import { AxMessageSystem } from './axMessageSystem'; +import { EVENT_IMAGE_RESIZE } from './events'; /** * 安信图片形状 @@ -72,12 +74,8 @@ export class AxImageShape extends AxShape { this.addChild(this.image); this.addChild(this.selectionBox); - //// - var leftUpPos = new Point(0, 0); - var upLeftDrag = false; - var leftDownPos = new Point(0, 0); - var rightUpPos = new Point(0, 0); - var rightDownPos = new Point(0, 0); + // 是否拖动 + var pointerDrag = false; // up-left this.upLeft = new PIXI.Sprite(this.pointTexture); this.upLeft.cursor = 'nwse-resize'; @@ -85,40 +83,36 @@ export class AxImageShape extends AxShape { this.addChild(this.upLeft); this.upLeft.interactive = true; this.upLeft.on('pointerdown', event => { - - upLeftDrag = true; - var imageRect = new Rectangle(this.image.x, this.image.y, this.image.width, this.image.height); - console.log('图片的边界大小', imageRect); - rightDownPos = new Point(imageRect.right, imageRect.bottom); - + pointerDrag = true; this.image.anchor.set(1); this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); event.stopPropagation(); }); this.upLeft.on('pointermove', event => { - // 移动时调整形状大小，然后重绘边框 // 检查右下角距离鼠标的位置， - if (upLeftDrag) { - leftUpPos = event.data.getLocalPosition(this.upLeft.parent); - console.log('鼠标点击位置的坐标', leftUpPos); - - this.assetData.Width = Math.abs(leftUpPos.x); - this.assetData.Height = Math.abs(leftUpPos.x); + if (pointerDrag) { + var pos = this.toLocal(event.data.global); + var dX = Math.abs(pos.x - this.image.x); + var dY = Math.abs(pos.y - this.image.y); + var result = dX > dY ? dX : dY; + this.assetData.Width = Math.abs(result); + this.assetData.Height = Math.abs(result); this.refresh(); + AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); } }); this.upLeft.on('pointerup', event => { - if (upLeftDrag) { - upLeftDrag = false; + if (pointerDrag) { + pointerDrag = false; this.image.anchor.set(0.5); this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); } }); this.upLeft.on('pointerupoutside', event => { - if (upLeftDrag) { - upLeftDrag = false; + if (pointerDrag) { + pointerDrag = false; this.image.anchor.set(0.5); this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); } @@ -130,6 +124,41 @@ export class AxImageShape extends AxShape { this.upRight.anchor.set(0.5); this.addChild(this.upRight); this.upRight.interactive = true; + this.upRight.on('pointerdown', event => { + pointerDrag = true; + this.image.anchor.set(0, 1); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + event.stopPropagation(); + }); + this.upRight.on('pointermove', event => { + // 移动时调整形状大小，然后重绘边框 + // 检查右下角距离鼠标的位置， + if (pointerDrag) { + var pos = this.toLocal(event.data.global); + var dX = Math.abs(pos.x - this.image.x); + var dY = Math.abs(pos.y - this.image.y); + var result = dX > dY ? dX : dY; + this.assetData.Width = Math.abs(result); + this.assetData.Height = Math.abs(result); + this.refresh(); + AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); + } + + }); + this.upRight.on('pointerup', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + } + }); + this.upRight.on('pointerupoutside', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + } + }); this.upRight.visible = false; // down-left this.downLeft = new PIXI.Sprite(this.pointTexture); @@ -137,6 +166,41 @@ export class AxImageShape extends AxShape { this.downLeft.anchor.set(0.5); this.addChild(this.downLeft); this.downLeft.interactive = true; + this.downLeft.on('pointerdown', event => { + pointerDrag = true; + this.image.anchor.set(1, 0); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + event.stopPropagation(); + }); + this.downLeft.on('pointermove', event => { + // 移动时调整形状大小，然后重绘边框 + // 检查右下角距离鼠标的位置， + if (pointerDrag) { + var pos = this.toLocal(event.data.global); + var dX = Math.abs(pos.x - this.image.x); + var dY = Math.abs(pos.y - this.image.y); + var result = dX > dY ? dX : dY; + this.assetData.Width = Math.abs(result); + this.assetData.Height = Math.abs(result); + this.refresh(); + AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); + } + + }); + this.downLeft.on('pointerup', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + } + }); + this.downLeft.on('pointerupoutside', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + } + }); this.downLeft.visible = false; // down-right this.downRight = new PIXI.Sprite(this.pointTexture); @@ -144,32 +208,43 @@ export class AxImageShape extends AxShape { this.downRight.anchor.set(0.5); this.addChild(this.downRight); this.downRight.interactive = true; + this.downRight.on('pointerdown', event => { + pointerDrag = true; + this.image.anchor.set(0, 0); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + event.stopPropagation(); + }); + this.downRight.on('pointermove', event => { + // 移动时调整形状大小，然后重绘边框 + // 检查右下角距离鼠标的位置， + if (pointerDrag) { + var pos = this.toLocal(event.data.global); + var dX = Math.abs(pos.x - this.image.x); + var dY = Math.abs(pos.y - this.image.y); + var result = dX > dY ? dX : dY; + this.assetData.Width = Math.abs(result); + this.assetData.Height = Math.abs(result); + this.refresh(); + AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); + } + + }); + this.downRight.on('pointerup', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + } + }); + this.downRight.on('pointerupoutside', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + } + }); this.downRight.visible = false; //// - - - - // if (this.assetData.CanConnect) { - // // connectPoint - // this.connectPoint = new PIXI.Sprite(this.connectPointTexture); - // this.connectPoint.anchor.set(0.5); - // this.connectPoint.x = this.image.x; - // this.connectPoint.y = this.image.y; - // this.addChild(this.connectPoint); - // this.connectPoint.interactive = true; - // this.connectPoint - // .on('pointerdown', event => { - // event.stopPropagation(); - // // this.paintingPipeline(this.x, this.y); - // }) - // .on('pointerover', event => { - // this.setSelectionBox(true, this.connectPoint); - // }) - // .on('pointerout', event => { - // this.setSelectionBox(false); - // }); - // // this.showConnectionPoint(false); - // } this.setItemScale(1 / this.workingArea.backgroundImage.scale.x); } // // 设置选择框 @@ -250,8 +325,32 @@ export class AxImageShape extends AxShape { this.text.text = this.assetData.Name + '\r\n' + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; - this.text.x = this.image.x; - this.text.y = this.image.y - this.image.height / 2; + + if (this.image.anchor.x == 0) { + if (this.image.anchor.y == 0) { + this.text.x = this.image.x + this.image.width / 2; + this.text.y = this.image.y; + } else if (this.image.anchor.y == 0.5) { + + } else if (this.image.anchor.y == 1) { + this.text.x = this.image.x + this.image.width / 2; + this.text.y = this.image.y - this.image.height; + } + + } else if (this.image.anchor.x == 0.5) { + this.text.x = this.image.x; + this.text.y = this.image.y - this.image.height / 2; + } else if (this.image.anchor.x == 1) { + if (this.image.anchor.y == 0) { + this.text.x = this.image.x - this.image.width / 2; + this.text.y = this.image.y; + } else if (this.image.anchor.y == 0.5) { + + } else if (this.image.anchor.y == 1) { + this.text.x = this.image.x - this.image.width / 2; + this.text.y = this.image.y - this.image.height; + } + } this.angle = -this.workingArea.backgroundImage.angle; this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); } diff --git a/src/app/working-area/model/axMessageSystem.ts b/src/app/working-area/model/axMessageSystem.ts index 1451f9c..fac6c6b 100644 --- a/src/app/working-area/model/axMessageSystem.ts +++ b/src/app/working-area/model/axMessageSystem.ts @@ -5,14 +5,14 @@ export class AxMessageSystem { /** 监听数组 */ private static listeners = {}; - /** + /** * 注册事件 * @param name 事件名称 * @param callback 回调函数 * @param context 上下文 */ - public static addListener(name: string, callback: () => void, context: any) { - const observers: Observer[] = AxMessageSystem.listeners[name]; + public static addListener(name: string, callback: Function, context: any) { + let observers: Observer[] = AxMessageSystem.listeners[name]; if (!observers) { AxMessageSystem.listeners[name] = []; } @@ -25,18 +25,18 @@ export class AxMessageSystem { * @param callback 回调函数 * @param context 上下文 */ - public static removeListener(name: string, callback: () => void, context: any) { - const observers: Observer[] = AxMessageSystem.listeners[name]; - if (!observers) { return; } - const length = observers.length; + public static removeListener(name: string, callback: Function, context: any) { + let observers: Observer[] = AxMessageSystem.listeners[name]; + if (!observers) return; + let length = observers.length; for (let i = 0; i < length; i++) { - const observer = observers[i]; + let observer = observers[i]; if (observer.compar(context)) { observers.splice(i, 1); break; } } - if (observers.length === 0) { + if (observers.length == 0) { delete AxMessageSystem.listeners[name]; } } @@ -46,11 +46,11 @@ export class AxMessageSystem { * @param name 事件名称 */ public static send(name: string, ...args: any[]) { - const observers: Observer[] = AxMessageSystem.listeners[name]; - if (!observers) { return; } - const length = observers.length; + let observers: Observer[] = AxMessageSystem.listeners[name]; + if (!observers) return; + let length = observers.length; for (let i = 0; i < length; i++) { - const observer = observers[i]; + let observer = observers[i]; observer.notify(name, ...args); } } @@ -61,12 +61,12 @@ export class AxMessageSystem { */ class Observer { /** 回调函数 */ - private callback: () => void; + private callback: Function = null; /** 上下文 */ private context: any = null; - constructor(callback: () => void, context: any) { - const self = this; + constructor(callback: Function, context: any) { + let self = this; self.callback = callback; self.context = context; } @@ -76,7 +76,7 @@ class Observer { * @param args 不定参数 */ notify(...args: any[]): void { - const self = this; + let self = this; self.callback.call(self.context, ...args); } @@ -85,6 +85,6 @@ class Observer { * @param context 上下文 */ compar(context: any): boolean { - return context === this.context; + return context == this.context; } } diff --git a/src/app/working-area/model/configuration.ts b/src/app/working-area/model/configuration.ts index bf0507a..f26898b 100644 --- a/src/app/working-area/model/configuration.ts +++ b/src/app/working-area/model/configuration.ts @@ -45,7 +45,7 @@ export const VIEW_RIGHT = 'rightview'; export const VIEW_LEFT = 'leftview'; export const VIEW_ISOMETRY = 'isometryview'; -export enum WallTypes{ +export enum WallTypes { STRAIGHT, CURVED } @@ -77,7 +77,8 @@ export var config = { directionalDrag: true, boundsX: 500, boundsY: 500, - viewBounds: 20000 }; + viewBounds: 60000 +}; export var wallInformation = { exterior: false, interior: false, midline: true, labels: true, exteriorlabel: 'e:', interiorlabel: 'i:', midlinelabel: 'm:' }; @@ -99,7 +100,7 @@ export class Configuration extends EventDispatcher { static getInstance() { if (this.instance === undefined - || this.instance === null) { + || this.instance === null) { this.instance = new Configuration(); } return this.instance; @@ -115,7 +116,7 @@ export class Configuration extends EventDispatcher { // this.data[key] = value; config[key] = value; // if(key !== viewBounds){ - Configuration.getInstance().dispatchEvent({ type: EVENT_CHANGED, item: Configuration.getInstance(), 'key': key, 'value': value }); + Configuration.getInstance().dispatchEvent({ type: EVENT_CHANGED, item: Configuration.getInstance(), 'key': key, 'value': value }); // } } diff --git a/src/app/working-area/model/events.ts b/src/app/working-area/model/events.ts index d7da978..d06de6a 100644 --- a/src/app/working-area/model/events.ts +++ b/src/app/working-area/model/events.ts @@ -67,3 +67,5 @@ export const EVENT_MODIFY_TEXTURE_ATTRIBUTE = 'MODIFY_TEXTURE_ATTRIBUTE_EVENT'; export const EVENT_PARAMETRIC_GEOMETRY_UPATED = 'PARAMETRIC_GEOMETRY_UPATED_EVENT'; export const EVENT_SELECTION_CHANGED = 'selectionChanged'; + +export const EVENT_IMAGE_RESIZE = 'imageResize'; diff --git a/src/app/working-area/model/grid2D.ts b/src/app/working-area/model/grid2D.ts index 9683a49..7a5c17c 100644 --- a/src/app/working-area/model/grid2D.ts +++ b/src/app/working-area/model/grid2D.ts @@ -33,8 +33,8 @@ export class Grid2D extends Graphics { let spacing = Dimensioning.cmToPixel(spacingCMS); let totalLines = gridSize / spacing; let halfSize = gridSize * 0.5; - let linewidth = Math.max(1.0 / this.gridScale, 1.0) * 1/this.canvas.scale.x;// 增加缩放系数 - let highlightLineWidth = Math.max(1 / this.gridScale, 1.0) * 1/this.canvas.scale.x;// 增加缩放系数 + let linewidth = Math.max(1.0 / this.gridScale, 1.0) * 1 / this.canvas.scale.x;// 增加缩放系数 + let highlightLineWidth = Math.max(1 / this.gridScale, 1.0) * 1 / this.canvas.scale.x;// 增加缩放系数 let normalColor = 0xE0E0E0; let highlightColor = 0xD0D0D0; const cellSize = 5; @@ -52,10 +52,10 @@ export class Grid2D extends Graphics { this.endFill(); this.beginFill(0xFF0000, 1.0); - this.drawCircle(-halfSize, -halfSize,5); - this.drawCircle(halfSize, -halfSize,5); - this.drawCircle(halfSize, halfSize,5); - this.drawCircle(-halfSize, halfSize,5); + this.drawCircle(-halfSize, -halfSize, 5); + this.drawCircle(halfSize, -halfSize, 5); + this.drawCircle(halfSize, halfSize, 5); + this.drawCircle(-halfSize, halfSize, 5); this.drawCircle(0, 0, 5); this.endFill(); } @@ -80,8 +80,8 @@ export class Grid2D extends Graphics { let spacing = Dimensioning.cmToPixel(spacingCMS); let halfSize = gridSize * 0.5; return { - x: Math.floor((x - -halfSize) / spacing), - y: Math.floor((y - -halfSize) / spacing), + x: Math.floor((x - -halfSize) / spacing), + y: Math.floor((y - -halfSize) / spacing), }; } } diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 12e5771..f3b4165 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -21,7 +21,9 @@ import { AxSelection } from './model/axSelection'; import { AxMessageSystem } from './model/axMessageSystem'; import { Grid2D } from './model/grid2D'; import { Viewport } from 'pixi-viewport'; -import { EVENT_SELECTION_CHANGED } from './model/events'; +import { EVENT_IMAGE_RESIZE, EVENT_SELECTION_CHANGED } from './model/events'; +import { Dimensioning } from './model/dimensioning'; +import { Configuration, viewBounds } from './model/configuration'; @Component({ @@ -164,8 +166,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 重大调整-主版本号增加 * 日期变更-日期版本号增加 */ - // todo shift绘制垂直线段 - public VERSION = '1.3.0.20210220_beta'; + public VERSION = '1.4.0.20210302_rc'; /** * 数据初始化 */ @@ -208,7 +209,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.camera2D.destroy(); this.app.destroy(); } - public setMulitSelect(b: boolean) { if (b) { this.isCtrlKeyClicked = true; @@ -366,11 +366,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 创建2D相机 */ private createViewport(): void { + var gridSize = Dimensioning.cmToPixel(Configuration.getNumericValue(viewBounds) * 1); this.camera2D = new Viewport({ screenWidth: this.app.view.width, screenHeight: this.app.view.height, - worldWidth: 20000, - worldHeight: 20000, + worldWidth: gridSize, + worldHeight: gridSize, interaction: this.app.renderer.plugins.interaction, }); this.camera2D.pivot.set(0.5); @@ -379,10 +380,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.camera2D .clamp({ - left: -10000, - right: 10000, - top: -10000, - bottom: 10000, + left: -gridSize / 2, + right: gridSize / 2, + top: -gridSize / 2, + bottom: gridSize / 2, }) .drag() .pinch()