shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

1.4.0

zhuzhou
徐振升 4 years ago
parent
9d2539ec47
commit
8282624de9
7 changed files with 194 additions and 89 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/app/canvas-share-data.service.ts
  2. 197
      src/app/working-area/model/axImageShape.ts
  3. 34
      src/app/working-area/model/axMessageSystem.ts
  4. 9
      src/app/working-area/model/configuration.ts
  5. 2
      src/app/working-area/model/events.ts
  6. 16
      src/app/working-area/model/grid2D.ts
  7. 21
      src/app/working-area/working-area.component.ts

2
src/app/canvas-share-data.service.ts
Unescape View File

@ -57,6 +57,8 @@ export class CanvasShareDataService {
['水泵接合器（地上）', '水泵接合器'], ['水泵接合器（地上）', '水泵接合器'],
['水泵接合器（地下）', '水泵接合器'], ['水泵接合器（地下）', '水泵接合器'],
['水泵接合器（墙壁）', '水泵接合器'], ['水泵接合器（墙壁）', '水泵接合器'],
['水泵接合器（喷淋）', '水泵接合器'],
['水泵接合器（消防）', '水泵接合器'],
['消防水泵房', '消防水泵房'], ['消防水泵房', '消防水泵房'],
['箱式消火栓', '箱式消火栓'], ['箱式消火栓', '箱式消火栓'],
['固定水炮', '消防水炮'], ['固定水炮', '消防水炮'],

197
src/app/working-area/model/axImageShape.ts
Unescape View File

@ -7,6 +7,8 @@ import { PropertyInfo } from './PropertyInfo';
import { AxShape } from './axShape'; import { AxShape } from './axShape';
import { Sprite, Point, Rectangle } from 'pixi.js'; import { Sprite, Point, Rectangle } from 'pixi.js';
import { AxArrowConnector } from './axArrowConnector'; 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.image);
this.addChild(this.selectionBox); this.addChild(this.selectionBox);
//// // 是否拖动
var leftUpPos = new Point(0, 0); var pointerDrag = false;
var upLeftDrag = false;
var leftDownPos = new Point(0, 0);
var rightUpPos = new Point(0, 0);
var rightDownPos = new Point(0, 0);
// up-left // up-left
this.upLeft = new PIXI.Sprite(this.pointTexture); this.upLeft = new PIXI.Sprite(this.pointTexture);
this.upLeft.cursor = 'nwse-resize'; this.upLeft.cursor = 'nwse-resize';
@ -85,40 +83,36 @@ export class AxImageShape extends AxShape {
this.addChild(this.upLeft); this.addChild(this.upLeft);
this.upLeft.interactive = true; this.upLeft.interactive = true;
this.upLeft.on('pointerdown', event => { this.upLeft.on('pointerdown', event => {
pointerDrag = true;
upLeftDrag = true;
var imageRect = new Rectangle(this.image.x, this.image.y, this.image.width, this.image.height);
console.log('图片的边界大小', imageRect);
rightDownPos = new Point(imageRect.right, imageRect.bottom);
this.image.anchor.set(1); this.image.anchor.set(1);
this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2));
event.stopPropagation(); event.stopPropagation();
}); });
this.upLeft.on('pointermove', event => { this.upLeft.on('pointermove', event => {
// 移动时调整形状大小，然后重绘边框 // 移动时调整形状大小，然后重绘边框
// 检查右下角距离鼠标的位置， // 检查右下角距离鼠标的位置，
if (upLeftDrag) { if (pointerDrag) {
leftUpPos = event.data.getLocalPosition(this.upLeft.parent); var pos = this.toLocal(event.data.global);
console.log('鼠标点击位置的坐标', leftUpPos); var dX = Math.abs(pos.x - this.image.x);
var dY = Math.abs(pos.y - this.image.y);
this.assetData.Width = Math.abs(leftUpPos.x); var result = dX > dY ? dX : dY;
this.assetData.Height = Math.abs(leftUpPos.x); this.assetData.Width = Math.abs(result);
this.assetData.Height = Math.abs(result);
this.refresh(); this.refresh();
AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData);
} }
}); });
this.upLeft.on('pointerup', event => { this.upLeft.on('pointerup', event => {
if (upLeftDrag) { if (pointerDrag) {
upLeftDrag = false; pointerDrag = false;
this.image.anchor.set(0.5); 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.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2));
} }
}); });
this.upLeft.on('pointerupoutside', event => { this.upLeft.on('pointerupoutside', event => {
if (upLeftDrag) { if (pointerDrag) {
upLeftDrag = false; pointerDrag = false;
this.image.anchor.set(0.5); 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.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.upRight.anchor.set(0.5);
this.addChild(this.upRight); this.addChild(this.upRight);
this.upRight.interactive = true; 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; this.upRight.visible = false;
// down-left // down-left
this.downLeft = new PIXI.Sprite(this.pointTexture); this.downLeft = new PIXI.Sprite(this.pointTexture);
@ -137,6 +166,41 @@ export class AxImageShape extends AxShape {
this.downLeft.anchor.set(0.5); this.downLeft.anchor.set(0.5);
this.addChild(this.downLeft); this.addChild(this.downLeft);
this.downLeft.interactive = true; 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; this.downLeft.visible = false;
// down-right // down-right
this.downRight = new PIXI.Sprite(this.pointTexture); this.downRight = new PIXI.Sprite(this.pointTexture);
@ -144,32 +208,43 @@ export class AxImageShape extends AxShape {
this.downRight.anchor.set(0.5); this.downRight.anchor.set(0.5);
this.addChild(this.downRight); this.addChild(this.downRight);
this.downRight.interactive = true; 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; 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); this.setItemScale(1 / this.workingArea.backgroundImage.scale.x);
} }
// // 设置选择框 // // 设置选择框
@ -250,8 +325,32 @@ export class AxImageShape extends AxShape {
this.text.text = this.assetData.Name this.text.text = this.assetData.Name
+ '\r\n' + '\r\n'
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; + 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.angle = -this.workingArea.backgroundImage.angle;
this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); this.drawBorder(1 / this.workingArea.backgroundImage.scale.x);
} }

34
src/app/working-area/model/axMessageSystem.ts
Unescape View File

@ -11,8 +11,8 @@ export class AxMessageSystem {
* @param callback 回调函数 * @param callback 回调函数
* @param context 上下文 * @param context 上下文
*/ */
public static addListener(name: string, callback: () => void, context: any) { public static addListener(name: string, callback: Function, context: any) {
const observers: Observer[] = AxMessageSystem.listeners[name]; let observers: Observer[] = AxMessageSystem.listeners[name];
if (!observers) { if (!observers) {
AxMessageSystem.listeners[name] = []; AxMessageSystem.listeners[name] = [];
} }
@ -25,18 +25,18 @@ export class AxMessageSystem {
* @param callback 回调函数 * @param callback 回调函数
* @param context 上下文 * @param context 上下文
*/ */
public static removeListener(name: string, callback: () => void, context: any) { public static removeListener(name: string, callback: Function, context: any) {
const observers: Observer[] = AxMessageSystem.listeners[name]; let observers: Observer[] = AxMessageSystem.listeners[name];
if (!observers) { return; } if (!observers) return;
const length = observers.length; let length = observers.length;
for (let i = 0; i < length; i++) { for (let i = 0; i < length; i++) {
const observer = observers[i]; let observer = observers[i];
if (observer.compar(context)) { if (observer.compar(context)) {
observers.splice(i, 1); observers.splice(i, 1);
break; break;
} }
} }
if (observers.length === 0) { if (observers.length == 0) {
delete AxMessageSystem.listeners[name]; delete AxMessageSystem.listeners[name];
} }
} }
@ -46,11 +46,11 @@ export class AxMessageSystem {
* @param name 事件名称 * @param name 事件名称
*/ */
public static send(name: string, ...args: any[]) { public static send(name: string, ...args: any[]) {
const observers: Observer[] = AxMessageSystem.listeners[name]; let observers: Observer[] = AxMessageSystem.listeners[name];
if (!observers) { return; } if (!observers) return;
const length = observers.length; let length = observers.length;
for (let i = 0; i < length; i++) { for (let i = 0; i < length; i++) {
const observer = observers[i]; let observer = observers[i];
observer.notify(name, ...args); observer.notify(name, ...args);
} }
} }
@ -61,12 +61,12 @@ export class AxMessageSystem {
*/ */
class Observer { class Observer {
/** 回调函数 */ /** 回调函数 */
private callback: () => void; private callback: Function = null;
/** 上下文 */ /** 上下文 */
private context: any = null; private context: any = null;
constructor(callback: () => void, context: any) { constructor(callback: Function, context: any) {
const self = this; let self = this;
self.callback = callback; self.callback = callback;
self.context = context; self.context = context;
} }
@ -76,7 +76,7 @@ class Observer {
* @param args 不定参数 * @param args 不定参数
*/ */
notify(...args: any[]): void { notify(...args: any[]): void {
const self = this; let self = this;
self.callback.call(self.context, ...args); self.callback.call(self.context, ...args);
} }
@ -85,6 +85,6 @@ class Observer {
* @param context 上下文 * @param context 上下文
*/ */
compar(context: any): boolean { compar(context: any): boolean {
return context === this.context; return context == this.context;
} }
} }

9
src/app/working-area/model/configuration.ts
Unescape View File

@ -45,7 +45,7 @@ export const VIEW_RIGHT = 'rightview';
export const VIEW_LEFT = 'leftview'; export const VIEW_LEFT = 'leftview';
export const VIEW_ISOMETRY = 'isometryview'; export const VIEW_ISOMETRY = 'isometryview';
export enum WallTypes{ export enum WallTypes {
STRAIGHT, STRAIGHT,
CURVED CURVED
} }
@ -77,7 +77,8 @@ export var config = {
directionalDrag: true, directionalDrag: true,
boundsX: 500, boundsX: 500,
boundsY: 500, boundsY: 500,
viewBounds: 20000 }; viewBounds: 60000
};
export var wallInformation = { exterior: false, interior: false, midline: true, labels: true, exteriorlabel: 'e:', interiorlabel: 'i:', midlinelabel: 'm:' }; 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() { static getInstance() {
if (this.instance === undefined if (this.instance === undefined
|| this.instance === null) { || this.instance === null) {
this.instance = new Configuration(); this.instance = new Configuration();
} }
return this.instance; return this.instance;
@ -115,7 +116,7 @@ export class Configuration extends EventDispatcher {
// this.data[key] = value; // this.data[key] = value;
config[key] = value; config[key] = value;
// if(key !== viewBounds){ // 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 });
// } // }
} }

2
src/app/working-area/model/events.ts
Unescape View File

@ -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_PARAMETRIC_GEOMETRY_UPATED = 'PARAMETRIC_GEOMETRY_UPATED_EVENT';
export const EVENT_SELECTION_CHANGED = 'selectionChanged'; export const EVENT_SELECTION_CHANGED = 'selectionChanged';
export const EVENT_IMAGE_RESIZE = 'imageResize';

16
src/app/working-area/model/grid2D.ts
Unescape View File

@ -33,8 +33,8 @@ export class Grid2D extends Graphics {
let spacing = Dimensioning.cmToPixel(spacingCMS); let spacing = Dimensioning.cmToPixel(spacingCMS);
let totalLines = gridSize / spacing; let totalLines = gridSize / spacing;
let halfSize = gridSize * 0.5; let halfSize = gridSize * 0.5;
let linewidth = Math.max(1.0 / 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 highlightLineWidth = Math.max(1 / this.gridScale, 1.0) * 1 / this.canvas.scale.x;// 增加缩放系数
let normalColor = 0xE0E0E0; let normalColor = 0xE0E0E0;
let highlightColor = 0xD0D0D0; let highlightColor = 0xD0D0D0;
const cellSize = 5; const cellSize = 5;
@ -52,10 +52,10 @@ export class Grid2D extends Graphics {
this.endFill(); this.endFill();
this.beginFill(0xFF0000, 1.0); 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.drawCircle(0, 0, 5);
this.endFill(); this.endFill();
} }
@ -80,8 +80,8 @@ export class Grid2D extends Graphics {
let spacing = Dimensioning.cmToPixel(spacingCMS); let spacing = Dimensioning.cmToPixel(spacingCMS);
let halfSize = gridSize * 0.5; let halfSize = gridSize * 0.5;
return { return {
x: Math.floor((x - -halfSize) / spacing), x: Math.floor((x - -halfSize) / spacing),
y: Math.floor((y - -halfSize) / spacing), y: Math.floor((y - -halfSize) / spacing),
}; };
} }
} }

21
src/app/working-area/working-area.component.ts
Unescape View File

@ -21,7 +21,9 @@ import { AxSelection } from './model/axSelection';
import { AxMessageSystem } from './model/axMessageSystem'; import { AxMessageSystem } from './model/axMessageSystem';
import { Grid2D } from './model/grid2D'; import { Grid2D } from './model/grid2D';
import { Viewport } from 'pixi-viewport'; 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({ @Component({
@ -164,8 +166,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* 重大调整-主版本号增加 * 重大调整-主版本号增加
* 日期变更-日期版本号增加 * 日期变更-日期版本号增加
*/ */
// todo shift绘制垂直线段 public VERSION = '1.4.0.20210302_rc';
public VERSION = '1.3.0.20210220_beta';
/** /**
* 数据初始化 * 数据初始化
*/ */
@ -208,7 +209,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.camera2D.destroy(); this.camera2D.destroy();
this.app.destroy(); this.app.destroy();
} }
public setMulitSelect(b: boolean) { public setMulitSelect(b: boolean) {
if (b) { if (b) {
this.isCtrlKeyClicked = true; this.isCtrlKeyClicked = true;
@ -366,11 +366,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* 创建2D相机 * 创建2D相机
*/ */
private createViewport(): void { private createViewport(): void {
var gridSize = Dimensioning.cmToPixel(Configuration.getNumericValue(viewBounds) * 1);
this.camera2D = new Viewport({ this.camera2D = new Viewport({
screenWidth: this.app.view.width, screenWidth: this.app.view.width,
screenHeight: this.app.view.height, screenHeight: this.app.view.height,
worldWidth: 20000, worldWidth: gridSize,
worldHeight: 20000, worldHeight: gridSize,
interaction: this.app.renderer.plugins.interaction, interaction: this.app.renderer.plugins.interaction,
}); });
this.camera2D.pivot.set(0.5); this.camera2D.pivot.set(0.5);
@ -379,10 +380,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.camera2D this.camera2D
.clamp({ .clamp({
left: -10000, left: -gridSize / 2,
right: 10000, right: gridSize / 2,
top: -10000, top: -gridSize / 2,
bottom: 10000, bottom: gridSize / 2,
}) })
.drag() .drag()
.pinch() .pinch()

Write Preview
Loading…
Cancel
Save