|
|
@ -4,6 +4,8 @@ import { EventEmitter } from 'events'; |
|
|
|
import { EventManager } from '@angular/platform-browser'; |
|
|
|
import { EventManager } from '@angular/platform-browser'; |
|
|
|
import { OutlineFilter } from 'pixi-filters'; |
|
|
|
import { OutlineFilter } from 'pixi-filters'; |
|
|
|
import { CanvasShareDataService } from '../canvas-share-data.service'; |
|
|
|
import { CanvasShareDataService } from '../canvas-share-data.service'; |
|
|
|
|
|
|
|
import * as ObjectID from 'bson-objectid'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@Component({ |
|
|
|
@Component({ |
|
|
|
selector: 'app-working-area', |
|
|
|
selector: 'app-working-area', |
|
|
@ -19,11 +21,17 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV |
|
|
|
|
|
|
|
|
|
|
|
@ViewChild('content') |
|
|
|
@ViewChild('content') |
|
|
|
content: ElementRef; |
|
|
|
content: ElementRef; |
|
|
|
// 画布程序
|
|
|
|
/** |
|
|
|
|
|
|
|
* pixijs 程序 |
|
|
|
|
|
|
|
*/ |
|
|
|
public app: PIXI.Application; |
|
|
|
public app: PIXI.Application; |
|
|
|
// 加载器
|
|
|
|
/** |
|
|
|
|
|
|
|
* 资源加载器 |
|
|
|
|
|
|
|
*/ |
|
|
|
public loader = PIXI.Loader.shared; |
|
|
|
public loader = PIXI.Loader.shared; |
|
|
|
// 根目录
|
|
|
|
/** |
|
|
|
|
|
|
|
* 背景图 |
|
|
|
|
|
|
|
*/ |
|
|
|
public backgroundImage: PIXI.Sprite; |
|
|
|
public backgroundImage: PIXI.Sprite; |
|
|
|
/** |
|
|
|
/** |
|
|
|
* 预览单点图标 |
|
|
|
* 预览单点图标 |
|
|
@ -33,27 +41,46 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV |
|
|
|
* 预览线段 |
|
|
|
* 预览线段 |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
public previewLineSegment = new PIXI.Graphics(); |
|
|
|
public previewLineSegment = new PIXI.Graphics(); |
|
|
|
// 圆形影子
|
|
|
|
/** |
|
|
|
|
|
|
|
* 预览原点 |
|
|
|
|
|
|
|
*/ |
|
|
|
public circleShadow = new PIXI.Graphics(); |
|
|
|
public circleShadow = new PIXI.Graphics(); |
|
|
|
// 鼠标位置
|
|
|
|
/** |
|
|
|
|
|
|
|
* 鼠标位置 |
|
|
|
|
|
|
|
*/ |
|
|
|
public mousePosition: PIXI.Point = new PIXI.Point(0, 0); |
|
|
|
public mousePosition: PIXI.Point = new PIXI.Point(0, 0); |
|
|
|
/// 绘画模式
|
|
|
|
/** |
|
|
|
|
|
|
|
* 绘画模式 |
|
|
|
|
|
|
|
*/ |
|
|
|
public paintMode: PaintMode; |
|
|
|
public paintMode: PaintMode; |
|
|
|
// 选择器
|
|
|
|
/** |
|
|
|
|
|
|
|
* 选择器 |
|
|
|
|
|
|
|
*/ |
|
|
|
public selection: Selection = new Selection(this); |
|
|
|
public selection: Selection = new Selection(this); |
|
|
|
// 当前鼠标点击的点
|
|
|
|
/** |
|
|
|
|
|
|
|
* 当前鼠标的点 |
|
|
|
|
|
|
|
*/ |
|
|
|
public currentClickPoint: PIXI.Graphics = new PIXI.Graphics(); |
|
|
|
public currentClickPoint: PIXI.Graphics = new PIXI.Graphics(); |
|
|
|
// 绘制点集合
|
|
|
|
/** |
|
|
|
|
|
|
|
* 绘制点集合 |
|
|
|
|
|
|
|
*/ |
|
|
|
public paintPoints: PIXI.Point[] = []; |
|
|
|
public paintPoints: PIXI.Point[] = []; |
|
|
|
// 绘制中图标
|
|
|
|
/** |
|
|
|
|
|
|
|
* 绘制中的多点图标 |
|
|
|
|
|
|
|
*/ |
|
|
|
public paintingIcon: MultipointIcon; |
|
|
|
public paintingIcon: MultipointIcon; |
|
|
|
// 绘制中的连线
|
|
|
|
/** |
|
|
|
|
|
|
|
* 绘制中的连线 |
|
|
|
|
|
|
|
*/ |
|
|
|
public paintingLine: PIXI.Graphics = new PIXI.Graphics(); |
|
|
|
public paintingLine: PIXI.Graphics = new PIXI.Graphics(); |
|
|
|
// // 确认绘制完成按钮
|
|
|
|
/** |
|
|
|
// public enterPaintEndButton: PIXI.Sprite = PIXI.Sprite.from('assets/images/caiji.jpg');
|
|
|
|
* 绿色描边 |
|
|
|
|
|
|
|
*/ |
|
|
|
public outlineFilterGreen = new OutlineFilter(2, 0x00ff00); |
|
|
|
public outlineFilterGreen = new OutlineFilter(2, 0x00ff00); |
|
|
|
// 拷贝数据
|
|
|
|
/** |
|
|
|
copyData: any[] = []; |
|
|
|
* 拷贝素材数据 |
|
|
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
public copyData: any[] = []; |
|
|
|
// 根据ID 找到图标
|
|
|
|
// 根据ID 找到图标
|
|
|
|
|
|
|
|
|
|
|
|
// 根据ID 找到数据
|
|
|
|
// 根据ID 找到数据
|
|
|
@ -91,7 +118,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV |
|
|
|
// 测试代码
|
|
|
|
// 测试代码
|
|
|
|
this.eventManager.addGlobalEventListener('window', 'keypress', (event: any) => { |
|
|
|
this.eventManager.addGlobalEventListener('window', 'keypress', (event: any) => { |
|
|
|
if (event.keyCode === 97) { |
|
|
|
if (event.keyCode === 97) { |
|
|
|
console.log(Guid.uuid2(24, 16)); |
|
|
|
console.log(ObjectID.default.generate()); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
@ -381,7 +408,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV |
|
|
|
FixedSize: this.canvasData.selectTemplateData.fixedSize, |
|
|
|
FixedSize: this.canvasData.selectTemplateData.fixedSize, |
|
|
|
Height : 32, |
|
|
|
Height : 32, |
|
|
|
Width : 32, |
|
|
|
Width : 32, |
|
|
|
Id: Guid.uuid2(24, 16), |
|
|
|
Id: ObjectID.default.generate(), |
|
|
|
ImageUrl: this.canvasData.selectTemplateData.imageUrl, |
|
|
|
ImageUrl: this.canvasData.selectTemplateData.imageUrl, |
|
|
|
InteractiveMode: this.canvasData.selectTemplateData.interactiveMode, |
|
|
|
InteractiveMode: this.canvasData.selectTemplateData.interactiveMode, |
|
|
|
MultiPoint : null, |
|
|
|
MultiPoint : null, |
|
|
@ -432,7 +459,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV |
|
|
|
FixedSize: this.canvasData.selectTemplateData.fixedSize, |
|
|
|
FixedSize: this.canvasData.selectTemplateData.fixedSize, |
|
|
|
Height: 32, |
|
|
|
Height: 32, |
|
|
|
Width: 32, |
|
|
|
Width: 32, |
|
|
|
Id: Guid.uuid2(24, 16), |
|
|
|
Id: ObjectID.default.generate(), |
|
|
|
ImageUrl: this.canvasData.selectTemplateData.imageUrl, |
|
|
|
ImageUrl: this.canvasData.selectTemplateData.imageUrl, |
|
|
|
InteractiveMode: this.canvasData.selectTemplateData.interactiveMode, |
|
|
|
InteractiveMode: this.canvasData.selectTemplateData.interactiveMode, |
|
|
|
MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)), |
|
|
|
MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)), |
|
|
@ -701,7 +728,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV |
|
|
|
FixedSize: this.canvasData.selectTemplateData.fixedSize, |
|
|
|
FixedSize: this.canvasData.selectTemplateData.fixedSize, |
|
|
|
Height: 32, |
|
|
|
Height: 32, |
|
|
|
Width: 32, |
|
|
|
Width: 32, |
|
|
|
Id: Guid.uuid2(24, 16), |
|
|
|
Id: ObjectID.default.generate(), |
|
|
|
ImageUrl: this.canvasData.selectTemplateData.imageUrl, |
|
|
|
ImageUrl: this.canvasData.selectTemplateData.imageUrl, |
|
|
|
InteractiveMode: this.canvasData.selectTemplateData.interactiveMode, |
|
|
|
InteractiveMode: this.canvasData.selectTemplateData.interactiveMode, |
|
|
|
MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)), |
|
|
|
MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)), |
|
|
@ -743,7 +770,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV |
|
|
|
this.copyData.forEach(item => { |
|
|
|
this.copyData.forEach(item => { |
|
|
|
item.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5); |
|
|
|
item.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5); |
|
|
|
const newData = JSON.parse(JSON.stringify(item)); |
|
|
|
const newData = JSON.parse(JSON.stringify(item)); |
|
|
|
newData.Id = Guid.uuid2(24, 16), |
|
|
|
newData.Id = ObjectID.default.generate(), |
|
|
|
newData.CompanyId = companyId; |
|
|
|
newData.CompanyId = companyId; |
|
|
|
newData.BuildingId = buildingId; |
|
|
|
newData.BuildingId = buildingId; |
|
|
|
newData.FloorId = floorId; |
|
|
|
newData.FloorId = floorId; |
|
|
@ -1327,46 +1354,6 @@ export class Selection { |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
|
|
|
|
* guid |
|
|
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
export class Guid { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
static uuid2(len, radix) { |
|
|
|
|
|
|
|
const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split(''); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// tslint:disable-next-line: one-variable-per-declaration
|
|
|
|
|
|
|
|
let uuid = [], i; |
|
|
|
|
|
|
|
radix = radix || chars.length; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (len) { |
|
|
|
|
|
|
|
// Compact form
|
|
|
|
|
|
|
|
// tslint:disable-next-line: no-bitwise
|
|
|
|
|
|
|
|
for (i = 0; i < len; i++) { uuid[i] = chars[0 | Math.random() * radix]; } |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
// rfc4122, version 4 form
|
|
|
|
|
|
|
|
let r; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// rfc4122 requires these characters
|
|
|
|
|
|
|
|
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'; |
|
|
|
|
|
|
|
uuid[14] = '4'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Fill in random data. At i==19 set the high bits of clock sequence as
|
|
|
|
|
|
|
|
// per rfc4122, sec. 4.1.5
|
|
|
|
|
|
|
|
for (i = 0; i < 36; i++) { |
|
|
|
|
|
|
|
if (!uuid[i]) { |
|
|
|
|
|
|
|
// tslint:disable-next-line: no-bitwise
|
|
|
|
|
|
|
|
r = 0 | Math.random() * 16; |
|
|
|
|
|
|
|
// tslint:disable-next-line: no-bitwise
|
|
|
|
|
|
|
|
uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r]; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return uuid.join(''); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
/** |
|
|
|
* 游戏状态 |
|
|
|
* 游戏状态 |
|
|
|
*/ |
|
|
|
*/ |
|
|
|