shaojiahao
/
AX.Angular9DataCollection
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

1.4.0

develop
徐振升 4 years ago
parent
96dd08ff66
commit
c117574835
8 changed files with 368 additions and 176 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. 268
      src/app/working-area/model/axImageShape.ts
  3. 36
      src/app/working-area/model/axMessageSystem.ts
  4. 66
      src/app/working-area/model/axShape.ts
  5. 9
      src/app/working-area/model/configuration.ts
  6. 2
      src/app/working-area/model/events.ts
  7. 16
      src/app/working-area/model/grid2D.ts
  8. 145
      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 {
['水泵接合器（地上）', '水泵接合器'], ['水泵接合器（地上）', '水泵接合器'],
['水泵接合器（地下）', '水泵接合器'], ['水泵接合器（地下）', '水泵接合器'],
['水泵接合器（墙壁）', '水泵接合器'], ['水泵接合器（墙壁）', '水泵接合器'],
['水泵接合器（喷淋）', '水泵接合器'],
['水泵接合器（消防）', '水泵接合器'],
['消防水泵房', '消防水泵房'], ['消防水泵房', '消防水泵房'],
['箱式消火栓', '箱式消火栓'], ['箱式消火栓', '箱式消火栓'],
['固定水炮', '消防水炮'], ['固定水炮', '消防水炮'],

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

@ -5,8 +5,10 @@ import { PaintMode } from './paintModel';
import * as PIXI from 'pixi.js'; import * as PIXI from 'pixi.js';
import { PropertyInfo } from './PropertyInfo'; import { PropertyInfo } from './PropertyInfo';
import { AxShape } from './axShape'; import { AxShape } from './axShape';
import { Sprite } 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';
/** /**
* 安信图片形状 * 安信图片形状
@ -31,6 +33,7 @@ export class AxImageShape extends AxShape {
wordWrapWidth: 100, wordWrapWidth: 100,
}); });
text = new PIXI.Text(this.assetData.Name text = new PIXI.Text(this.assetData.Name
+ '\r\n' + '\r\n'
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style); + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
@ -71,56 +74,177 @@ export class AxImageShape extends AxShape {
this.addChild(this.image); this.addChild(this.image);
this.addChild(this.selectionBox); this.addChild(this.selectionBox);
//// // 是否拖动
var pointerDrag = false;
// 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.anchor.set(0.5); this.upLeft.anchor.set(0.5);
this.addChild(this.upLeft); this.addChild(this.upLeft);
this.upLeft.interactive = true; this.upLeft.interactive = true;
this.upLeft.on('pointerdown', event => {
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 (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 (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 (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.visible = false; this.upLeft.visible = false;
// up-right // up-right
this.upRight = new PIXI.Sprite(this.pointTexture); this.upRight = new PIXI.Sprite(this.pointTexture);
this.upRight.cursor = 'nesw-resize';
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);
this.downLeft.cursor = 'nesw-resize';
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);
this.downRight.cursor = 'nwse-resize';
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);
} }
// // 设置选择框 // // 设置选择框
@ -193,79 +317,41 @@ export class AxImageShape extends AxShape {
this.downRight.scale.set(scale); this.downRight.scale.set(scale);
} }
} }
// paintingPipeline(x: number, y: number) {
// if (this.assetData.CanConnect) {
// if (this.workingArea.getPaintMode() === PaintMode.Pipeline) {
// if (this.workingArea.paintingShape === null) {
// this.workingArea.previewLineSegment.visible = true;
// this.workingArea.currentClickPoint.position =
// new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y);
// this.workingArea.paintPoints.push(new PIXI.Point(x, y));
// const json = JSON.parse(JSON.stringify(this.workingArea.canvasData.selectTemplateData.propertyInfos));
// const list = [];
// json.forEach(element => {
// const property = new PropertyInfo(element);
// list.push(property);
// });
// const tempData = {
// TemplateId: this.workingArea.canvasData.selectTemplateData.id,
// CanConnect: this.workingArea.canvasData.selectTemplateData.canConnect,
// Pipelines: new Array(),
// FloorId: this.workingArea.canvasData.selectStorey.id,
// Angle: this.workingArea.canvasData.selectTemplateData.angle,
// Color: this.workingArea.canvasData.selectTemplateData.color,
// Enabled: this.workingArea.canvasData.selectTemplateData.enabled,
// FillMode: this.workingArea.canvasData.selectTemplateData.fillMode,
// FireElementId: this.workingArea.canvasData.selectTemplateData.fireElementId,
// FixedSize: this.workingArea.canvasData.selectTemplateData.fixedSize,
// Height : 32,
// Width : 32,
// Id: ObjectID.default.generate(),
// ImageUrl: this.workingArea.canvasData.selectTemplateData.imageUrl,
// InteractiveMode: this.workingArea.canvasData.selectTemplateData.interactiveMode,
// MultiPoint : JSON.parse(JSON.stringify(this.workingArea.paintPoints)),
// Point: new PIXI.Point(0, 0),
// Name : this.workingArea.canvasData.selectTemplateData.name,
// PropertyInfos: list,
// Border : this.workingArea.canvasData.selectTemplateData.border,
// DrawMode : this.workingArea.canvasData.selectTemplateData.drawMode,
// Thickness : this.workingArea.canvasData.selectTemplateData.thickness,
// IsFromBuilding : this.workingArea.canvasData.selectTemplateData.isFromBuilding,
// GameMode: this.workingArea.canvasData.gameMode,
// LinkedObjects: new Array(this.assetData.Id),
// Tag: this.workingArea.canvasData.selectTemplateData.tag
// };
// this.workingArea.paintingShape = new AxArrowConnector(tempData, this.workingArea, false, true);
// this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id);
// this.workingArea.emit('createIcon', this.workingArea.paintingShape);
// } else {
// this.workingArea.previewLineSegment.visible = false;
// this.workingArea.currentClickPoint.position =
// new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y);
// this.workingArea.paintPoints.push(new PIXI.Point(x, y));
// this.workingArea.paintingShape.assetData.MultiPoint =
// JSON.parse(JSON.stringify(this.workingArea.paintPoints));
// this.workingArea.paintingShape.assetData.LinkedObjects.push(this.assetData.Id);
// this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id);
// this.workingArea.paintingShape.redraw();
// this.workingArea.initPipelineData();
// }
// }
// }
// }
// 刷新 // 刷新
public refresh() { public refresh() {
if (this.assetData.CanConnect) {
}
this.image.width = this.assetData.Width; this.image.width = this.assetData.Width;
this.image.height = this.assetData.Height; this.image.height = this.assetData.Height;
this.image.angle = this.assetData.Angle; this.image.angle = this.assetData.Angle;
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);
} }
} }

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

@ -5,14 +5,14 @@ export class AxMessageSystem {
/** 监听数组 */ /** 监听数组 */
private static listeners = {}; private static listeners = {};
/** /**
* 注册事件 * 注册事件
* @param name 事件名称 * @param name 事件名称
* @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;
} }
} }

66
src/app/working-area/model/axShape.ts
Unescape View File

@ -32,7 +32,7 @@ export class AxShape extends Graphics {
this.workingArea.backgroundImage.addChild(this); this.workingArea.backgroundImage.addChild(this);
this.zIndex = 200; this.zIndex = 200;
this.interactive = true; this.interactive = true;
this.buttonMode = true; // this.buttonMode = true;
this this
.on('pointerdown', event => { .on('pointerdown', event => {
event.stopPropagation(); event.stopPropagation();
@ -88,10 +88,10 @@ export class AxShape extends Graphics {
public hideBorder() { public hideBorder() {
this.border.visible = false; this.border.visible = false;
} }
/** /**
* 设置点显示状态 * 设置点显示状态
* @param value 显示状态 * @param value 显示状态
*/ */
public setPointVisiable(value: boolean) { public setPointVisiable(value: boolean) {
} }
@ -112,7 +112,7 @@ export class AxShape extends Graphics {
const spaceLength = scale * 1; const spaceLength = scale * 1;
const lineLenght = rect.width + 0.5 + 0.5; const lineLenght = rect.width + 0.5 + 0.5;
const dashLength = scale * ( lineLenght + spaceLength - Math.floor((rect.width + rect.height) / 2 / 4.1)) / Math.floor((rect.width + rect.height) / 2 / 4.1); const dashLength = scale * (lineLenght + spaceLength - Math.floor((rect.width + rect.height) / 2 / 4.1)) / Math.floor((rect.width + rect.height) / 2 / 4.1);
this.drawDash(this.border, p1.x - 0.5 * scale, p1.y, p2.x + 0.5 * scale, p2.y, dashLength, spaceLength); this.drawDash(this.border, p1.x - 0.5 * scale, p1.y, p2.x + 0.5 * scale, p2.y, dashLength, spaceLength);
this.drawDash(this.border, p2.x, p2.y - 0.5 * scale, p3.x, p3.y + 0.5 * scale, dashLength, spaceLength); this.drawDash(this.border, p2.x, p2.y - 0.5 * scale, p3.x, p3.y + 0.5 * scale, dashLength, spaceLength);
this.drawDash(this.border, p3.x + 0.5 * scale, p3.y, p4.x - 0.5 * scale, p4.y, dashLength, spaceLength); this.drawDash(this.border, p3.x + 0.5 * scale, p3.y, p4.x - 0.5 * scale, p4.y, dashLength, spaceLength);
@ -126,36 +126,36 @@ export class AxShape extends Graphics {
this.border.lineTo(p4.x, p4.y); this.border.lineTo(p4.x, p4.y);
this.border.closePath(); this.border.closePath();
// this.border.endFill(); // this.border.endFill();
} }
// 画虚线 // 画虚线
drawDash(target, x1, y1, x2, y2, dashLength = 5, spaceLength = 1) { drawDash(target, x1, y1, x2, y2, dashLength = 5, spaceLength = 1) {
const x = x2 - x1; const x = x2 - x1;
const y = y2 - y1; const y = y2 - y1;
let hyp = Math.sqrt((x) * (x) + (y) * (y)); let hyp = Math.sqrt((x) * (x) + (y) * (y));
const units = hyp / (dashLength + spaceLength); const units = hyp / (dashLength + spaceLength);
const dashSpaceRatio = dashLength / (dashLength + spaceLength); const dashSpaceRatio = dashLength / (dashLength + spaceLength);
const dashX = (x / units) * dashSpaceRatio; const dashX = (x / units) * dashSpaceRatio;
const spaceX = (x / units) - dashX; const spaceX = (x / units) - dashX;
const dashY = (y / units) * dashSpaceRatio; const dashY = (y / units) * dashSpaceRatio;
const spaceY = (y / units) - dashY; const spaceY = (y / units) - dashY;
target.moveTo(x1, y1); target.moveTo(x1, y1);
while (hyp > 0) { while (hyp > 0) {
x1 += dashX; x1 += dashX;
y1 += dashY; y1 += dashY;
hyp -= dashLength; hyp -= dashLength;
if (hyp < 0) { if (hyp < 0) {
x1 = x2; x1 = x2;
y1 = y2; y1 = y2;
}
target.lineTo(x1, y1);
x1 += spaceX;
y1 += spaceY;
target.moveTo(x1, y1);
hyp -= spaceLength;
} }
target.lineTo(x1, y1); target.moveTo(x2, y2);
x1 += spaceX;
y1 += spaceY;
target.moveTo(x1, y1);
hyp -= spaceLength;
}
target.moveTo(x2, y2);
} }
// 计算多边形重心 // 计算多边形重心
public calculatePolygonGravityCenter(points: PIXI.Point[]) { public calculatePolygonGravityCenter(points: PIXI.Point[]) {

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),
}; };
} }
} }

145
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({
@ -90,7 +92,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
*/ */
public selection: AxSelection = new AxSelection(); public selection: AxSelection = new AxSelection();
/** /**
* 当前鼠标的点 * 当前鼠标点击的点
*/ */
public currentClickPoint: PIXI.Graphics = new PIXI.Graphics(); public currentClickPoint: PIXI.Graphics = new PIXI.Graphics();
/** /**
@ -151,6 +153,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
public animationTime; public animationTime;
// 是否按下Ctrl键 // 是否按下Ctrl键
isCtrlKeyClicked = false; isCtrlKeyClicked = false;
// 是否开启多点连线垂直绘制
isDrawVerticalLine = false;
/** /**
* 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta * 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta
* Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。 * Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。
@ -162,7 +166,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* 重大调整-主版本号增加 * 重大调整-主版本号增加
* 日期变更-日期版本号增加 * 日期变更-日期版本号增加
*/ */
public VERSION = '1.2.2.20210220_beta'; public VERSION = '1.4.0.20210302_rc';
/** /**
* 数据初始化 * 数据初始化
*/ */
@ -171,12 +175,31 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
PIXI.utils.skipHello(); PIXI.utils.skipHello();
this.sayHello(); this.sayHello();
this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => { this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => {
// if (event.keyCode === 16) {
// this.isDrawVerticalLine = true;
// }
switch (event.keyCode) {
case 16:
this.isDrawVerticalLine = true;
break;
default:
break;
}
}); });
this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => { this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => {
// 按Del键删除选中的图标 // // 按Del键删除选中的图标
if (event.keyCode === 46) { // if (event.keyCode === 46) {
this.deleteSelectedShape(); // this.deleteSelectedShape();
// }
switch (event.keyCode) {
case 16: // shift
this.isDrawVerticalLine = false;
break;
case 46: // delete
this.deleteSelectedShape();
break;
default:
break;
} }
}); });
} }
@ -186,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;
@ -344,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);
@ -357,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()
@ -774,8 +797,27 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
break; break;
case PaintMode.lineIcon: case PaintMode.lineIcon:
this.previewLineSegment.visible = true; this.previewLineSegment.visible = true;
this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); var point = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
if (this.isDrawVerticalLine && this.paintPoints.length !== 0) {
// 起点距离终点水平距离
const dh = Math.abs(point.x - this.currentClickPoint.x);
// 起点距离终点垂直距离
const dv = Math.abs(point.y - this.currentClickPoint.y);
if (dh >= dv) {
// 绘制水平线
point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y);
} else {
// 绘制垂直线
point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y);
}
this.currentClickPoint.position = new PIXI.Point(point.x, point.y);
} else {
this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
}
// 添加数据
this.paintPoints.push(point);
if (this.paintPoints.length >= 2) { if (this.paintPoints.length >= 2) {
this.enterPaintEndButton.position = this.circleShadow.position; this.enterPaintEndButton.position = this.circleShadow.position;
@ -832,8 +874,28 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
break; break;
case PaintMode.polygonIcon: case PaintMode.polygonIcon:
this.previewLineSegment.visible = true; this.previewLineSegment.visible = true;
this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); // this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); // this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
var point = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
if (this.isDrawVerticalLine && this.paintPoints.length !== 0) {
// 起点距离终点水平距离
const dh = Math.abs(point.x - this.currentClickPoint.x);
// 起点距离终点垂直距离
const dv = Math.abs(point.y - this.currentClickPoint.y);
if (dh >= dv) {
// 绘制水平线
point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y);
} else {
// 绘制垂直线
point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y);
}
this.currentClickPoint.position = new PIXI.Point(point.x, point.y);
} else {
this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
}
// 添加数据
this.paintPoints.push(point);
if (this.paintPoints.length === 1) { if (this.paintPoints.length === 1) {
this.enterPaintEndButton.position = this.circleShadow.position; this.enterPaintEndButton.position = this.circleShadow.position;
} else if (this.paintPoints.length >= 3) { } else if (this.paintPoints.length >= 3) {
@ -868,8 +930,28 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.enterPaintEndButton.position = this.circleShadow.position; this.enterPaintEndButton.position = this.circleShadow.position;
this.enterPaintEndButton.visible = true; this.enterPaintEndButton.visible = true;
this.enterPaintEndButton.zIndex = this.backgroundImage.children.length; this.enterPaintEndButton.zIndex = this.backgroundImage.children.length;
this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); // this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); // this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
var point = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
if (this.isDrawVerticalLine && this.paintPoints.length !== 0) {
// 起点距离终点水平距离
const dh = Math.abs(point.x - this.currentClickPoint.x);
// 起点距离终点垂直距离
const dv = Math.abs(point.y - this.currentClickPoint.y);
if (dh >= dv) {
// 绘制水平线
point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y);
} else {
// 绘制垂直线
point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y);
}
this.currentClickPoint.position = new PIXI.Point(point.x, point.y);
} else {
this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
}
// 添加数据
this.paintPoints.push(point);
if (this.paintPoints.length < 2) { if (this.paintPoints.length < 2) {
return; return;
} }
@ -1207,10 +1289,29 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* @param pointB 点B * @param pointB 点B
*/ */
private refreshPreviewLineSegment(pointA: PIXI.Point, pointB: PIXI.Point) { private refreshPreviewLineSegment(pointA: PIXI.Point, pointB: PIXI.Point) {
const ps: PIXI.Point = pointA;
let pe: PIXI.Point = pointB;
if (this.isDrawVerticalLine) {
// 起点距离终点水平距离
const dh = Math.abs(pointB.x - pointA.x);
// 起点距离终点垂直距离
const dv = Math.abs(pointB.y - pointA.y);
if (dh >= dv) {
// 绘制水平线
pe = new PIXI.Point(pointB.x, pointA.y);
} else {
// 绘制垂直线
pe = new PIXI.Point(pointA.x, pointB.y);
}
}
this.previewLineSegment.clear(); this.previewLineSegment.clear();
this.previewLineSegment.lineStyle(1 / this.backgroundImage.scale.x, 0x00ff00, 1); this.previewLineSegment.lineStyle(1 / this.backgroundImage.scale.x, 0x00ff00, 1);
this.previewLineSegment.moveTo(pointA.x, pointA.y); // this.previewLineSegment.moveTo(pointA.y, pointA.y);
this.previewLineSegment.lineTo(pointB.x, pointB.y); // this.previewLineSegment.lineTo(pointB.x, pointB.y);
this.previewLineSegment.moveTo(ps.x, ps.y);
this.previewLineSegment.lineTo(pe.x, pe.y);
} }
/** /**
* 创建半径图标影子 * 创建半径图标影子

Write Preview
Loading…
Cancel
Save