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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/app/canvas-share-data.service.ts
  2. 193
      src/app/working-area/model/axImageShape.ts
  3. 34
      src/app/working-area/model/axMessageSystem.ts
  4. 3
      src/app/working-area/model/configuration.ts
  5. 2
      src/app/working-area/model/events.ts
  6. 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 {
['水泵接合器（地上）', '水泵接合器'],
['水泵接合器（地下）', '水泵接合器'],
['水泵接合器（墙壁）', '水泵接合器'],
['水泵接合器（喷淋）', '水泵接合器'],
['水泵接合器（消防）', '水泵接合器'],
['消防水泵房', '消防水泵房'],
['箱式消火栓', '箱式消火栓'],
['固定水炮', '消防水炮'],

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

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

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

@ -11,8 +11,8 @@ export class AxMessageSystem {
* @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;
}
}

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

@ -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:' };

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_SELECTION_CHANGED = 'selectionChanged';
export const EVENT_IMAGE_RESIZE = 'imageResize';

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 { 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()

Write Preview
Loading…
Cancel
Save