17 changed files with 1345 additions and 627 deletions
@ -1,11 +0,0 @@
|
||||
import { AxRectangleShape } from "./axRectangleShape"; |
||||
|
||||
export class AxImageShapeTest extends AxRectangleShape{ |
||||
/** |
||||
*
|
||||
*/ |
||||
constructor(x:number,y:number,width:number,height:number) { |
||||
super(x,y,width,height); |
||||
|
||||
} |
||||
} |
||||
@ -0,0 +1,90 @@
|
||||
/** |
||||
* 事件系统 |
||||
*/ |
||||
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]; |
||||
if (!observers) { |
||||
AxMessageSystem.listeners[name] = []; |
||||
} |
||||
AxMessageSystem.listeners[name].push(new Observer(callback, context)); |
||||
} |
||||
|
||||
/** |
||||
* 移除事件 |
||||
* @param name 事件名称 |
||||
* @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; |
||||
for (let i = 0; i < length; i++) { |
||||
const observer = observers[i]; |
||||
if (observer.compar(context)) { |
||||
observers.splice(i, 1); |
||||
break; |
||||
} |
||||
} |
||||
if (observers.length === 0) { |
||||
delete AxMessageSystem.listeners[name]; |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* 发送事件 |
||||
* @param name 事件名称 |
||||
*/ |
||||
public static send(name: string, ...args: any[]) { |
||||
const observers: Observer[] = AxMessageSystem.listeners[name]; |
||||
if (!observers) { return; } |
||||
const length = observers.length; |
||||
for (let i = 0; i < length; i++) { |
||||
const observer = observers[i]; |
||||
observer.notify(name, ...args); |
||||
} |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* 观察者 |
||||
*/ |
||||
class Observer { |
||||
/** 回调函数 */ |
||||
private callback: () => void; |
||||
/** 上下文 */ |
||||
private context: any = null; |
||||
|
||||
constructor(callback: () => void, context: any) { |
||||
const self = this; |
||||
self.callback = callback; |
||||
self.context = context; |
||||
} |
||||
|
||||
/** |
||||
* 发送通知 |
||||
* @param args 不定参数 |
||||
*/ |
||||
notify(...args: any[]): void { |
||||
const self = this; |
||||
self.callback.call(self.context, ...args); |
||||
} |
||||
|
||||
/** |
||||
* 上下文比较 |
||||
* @param context 上下文 |
||||
*/ |
||||
compar(context: any): boolean { |
||||
return context === this.context; |
||||
} |
||||
} |
||||
@ -1,21 +1,21 @@
|
||||
import { Sprite } from "pixi.js"; |
||||
import { Graphics } from "pixi.js"; |
||||
import { WorkingAreaComponent } from "../working-area.component"; |
||||
import { AxShape } from "./axShape"; |
||||
import { Sprite } from 'pixi.js'; |
||||
import { Graphics } from 'pixi.js'; |
||||
import { WorkingAreaComponent } from '../working-area.component'; |
||||
import { AxShape } from './axShape'; |
||||
|
||||
export class AxRectangleShape extends AxShape{ |
||||
export class AxRectangleShape extends AxShape { |
||||
/** |
||||
* |
||||
*/ |
||||
constructor(x:number,y:number,width:number,height:number,assetData: any, workingArea: WorkingAreaComponent) { |
||||
super(assetData,workingArea); |
||||
this.beginFill(0x0000ff,1); |
||||
this.lineStyle(1, 0xff0000,1); |
||||
constructor(x: number, y: number, width: number, height: number, assetData: any, workingArea: WorkingAreaComponent) { |
||||
super(assetData, workingArea); |
||||
this.beginFill(0x0000ff, 1); |
||||
this.lineStyle(1, 0xff0000, 1); |
||||
this.drawRect(x, y, width, height); |
||||
this.endFill(); |
||||
|
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
@ -0,0 +1,65 @@
|
||||
import { allowedNodeEnvironmentFlags } from "process"; |
||||
|
||||
/** |
||||
* 选择器 |
||||
*/ |
||||
export class AxSelection { |
||||
constructor() { |
||||
} |
||||
private objects: Set<any> = new Set<any>(); |
||||
// 获得第一个对象
|
||||
public first(): any { |
||||
if (this.objects.size > 0) { |
||||
return [...this.objects][0]; |
||||
} else { |
||||
return null; |
||||
} |
||||
} |
||||
// 是否已经选择了对象
|
||||
public has(obj: any): boolean { |
||||
return this.objects.has(obj); |
||||
} |
||||
// 是否所有选择对象都允许编辑
|
||||
public allowEdit(): boolean { |
||||
let allowEdit = true; |
||||
for (const item of this.objects) { |
||||
if (!item.allowEdit) { |
||||
allowEdit = false; |
||||
break; |
||||
} |
||||
} |
||||
return allowEdit; |
||||
} |
||||
// 获得所有对象
|
||||
public all() { |
||||
return [...this.objects]; |
||||
} |
||||
// 获取集合长度
|
||||
public size(): number { |
||||
return this.objects.size; |
||||
} |
||||
// 添加对象
|
||||
public add(obj: any) { |
||||
this.objects.add(obj); |
||||
} |
||||
// 添加集合
|
||||
public addArray(array: any[]) { |
||||
array.forEach(item => { |
||||
this.objects.add(item); |
||||
}); |
||||
} |
||||
// 移除对象
|
||||
public delete(obj: any) { |
||||
this.objects.delete(obj); |
||||
} |
||||
// 移除集合
|
||||
public deleteArray(array: any[]) { |
||||
array.forEach(item => { |
||||
this.objects.delete(item); |
||||
}); |
||||
} |
||||
// 清空所有对象
|
||||
public clear() { |
||||
this.objects.clear(); |
||||
} |
||||
} |
||||
@ -0,0 +1,164 @@
|
||||
import { EventDispatcher } from 'three'; |
||||
import { EVENT_CHANGED } from './events'; |
||||
|
||||
|
||||
// GENERAL:
|
||||
/** The dimensioning unit for 2D floorplan measurements. */ |
||||
export var configDimUnit = 'dimUnit'; |
||||
// WALL:
|
||||
/** The initial wall height in cm. */ |
||||
export const configWallHeight = 'wallHeight'; |
||||
/** The initial wall thickness in cm. */ |
||||
export const configWallThickness = 'wallThickness'; |
||||
|
||||
export const configSystemUI = 'systemUI'; |
||||
|
||||
export const scale = 'scale'; |
||||
|
||||
export const gridSpacing = 'gridSpacing'; |
||||
export const snapToGrid = 'snapToGrid'; |
||||
export const directionalDrag = 'directionalDrag'; |
||||
export const dragOnlyX = 'dragOnlyX'; |
||||
export const dragOnlyY = 'dragOnlyY'; |
||||
export const snapTolerance = 'snapTolerance'; //In CMS
|
||||
export const boundsX = 'boundsX'; //In CMS
|
||||
export const boundsY = 'boundsY'; //In CMS
|
||||
export const viewBounds = 'viewBounds';//In CMS
|
||||
|
||||
export const dimInch = 'inch'; |
||||
|
||||
/** Dimensioning in Inch. */ |
||||
export const dimFeetAndInch = 'feetAndInch'; |
||||
|
||||
/** Dimensioning in Meter. */ |
||||
export const dimMeter = 'm'; |
||||
|
||||
/** Dimensioning in Centi Meter. */ |
||||
export const dimCentiMeter = 'cm'; |
||||
|
||||
/** Dimensioning in Milli Meter. */ |
||||
export const dimMilliMeter = 'mm'; |
||||
|
||||
export const VIEW_TOP = 'topview'; |
||||
export const VIEW_FRONT = 'frontview'; |
||||
export const VIEW_RIGHT = 'rightview'; |
||||
export const VIEW_LEFT = 'leftview'; |
||||
export const VIEW_ISOMETRY = 'isometryview'; |
||||
|
||||
export enum WallTypes{ |
||||
STRAIGHT, |
||||
CURVED |
||||
} |
||||
|
||||
export const TEXTURE_DEFAULT_REPEAT = 300; |
||||
export const defaultWallTexture = |
||||
{ |
||||
color: '#FFFFFF', repeat: TEXTURE_DEFAULT_REPEAT, normalmap: 'textures/Wall/Brick_Wall_017_SD/Brick_Wall_017_normal.jpg', roughnessmap: 'textures/Wall/Brick_Wall_017_SD/Brick_Wall_017_roughness.jpg', colormap: 'textures/Wall/Brick_Wall_017_SD/Brick_Wall_017_basecolor.jpg', ambientmap: 'textures/Wall/Brick_Wall_017_SD/Brick_Wall_017_ambientOcclusion.jpg', bumpmap: 'textures/Wall/Brick_Wall_017_SD/Brick_Wall_017_height.png' |
||||
}; |
||||
export const defaultFloorTexture = |
||||
{ |
||||
color: '#FFFFFF', emissive: '#181818', repeat: TEXTURE_DEFAULT_REPEAT, ambientmap: 'textures/Floor/Marble_Tiles_001/Marble_Tiles_001_ambientOcclusion.jpg', colormap: 'textures/Floor/Marble_Tiles_001/Marble_Tiles_001_basecolor.jpg', roughnessmap: 'textures/Floor/Marble_Tiles_001/Marble_Tiles_001_roughness.jpg', normalmap: 'textures/Floor/Marble_Tiles_001/Marble_Tiles_001_normal.jpg' |
||||
}; |
||||
|
||||
export const TEXTURE_PROPERTY_COLOR = 'color'; |
||||
export const TEXTURE_NO_PREVIEW = 'textures/NoPreview.jpg'; |
||||
|
||||
export var config = { |
||||
dimUnit: dimCentiMeter, |
||||
wallHeight: 250, |
||||
wallThickness: 20, |
||||
systemUI: false, |
||||
scale: 1, |
||||
snapToGrid: true, |
||||
dragOnlyX: false, |
||||
dragOnlyY: false, |
||||
snapTolerance: 50, |
||||
gridSpacing: 20, // 50,
|
||||
directionalDrag: true, |
||||
boundsX: 500, |
||||
boundsY: 500, |
||||
viewBounds: 20000 }; |
||||
|
||||
export var wallInformation = { exterior: false, interior: false, midline: true, labels: true, exteriorlabel: 'e:', interiorlabel: 'i:', midlinelabel: 'm:' }; |
||||
|
||||
|
||||
/** |
||||
* The tolerance in cms between corners, otherwise below this tolerance they will snap together as one corner*/ |
||||
export const cornerTolerance = 20; |
||||
|
||||
/** Global configuration to customize the whole system. |
||||
* This is a singleton instance; |
||||
*/ |
||||
export class Configuration extends EventDispatcher { |
||||
private static instance = new Configuration(); |
||||
constructor() { |
||||
/** Configuration data loaded from/stored to extern. */ |
||||
// this.data = {dimUnit: dimCentiMeter, wallHeight: 250, wallThickness: 10};
|
||||
super(); |
||||
} |
||||
|
||||
static getInstance() { |
||||
if (this.instance === undefined |
||||
|| this.instance === null) { |
||||
this.instance = new Configuration(); |
||||
} |
||||
return this.instance; |
||||
} |
||||
|
||||
static getData() { |
||||
// return {dimUnit: dimCentiMeter,wallHeight: 250, wallThickness: 10};
|
||||
return config; |
||||
} |
||||
|
||||
/** Set a configuration parameter. */ |
||||
static setValue(key, value) { |
||||
// this.data[key] = value;
|
||||
config[key] = value; |
||||
// if(key !== viewBounds){
|
||||
Configuration.getInstance().dispatchEvent({ type: EVENT_CHANGED, item: Configuration.getInstance(), 'key': key, 'value': value }); |
||||
// }
|
||||
} |
||||
|
||||
/** Get a string configuration parameter. */ |
||||
static getStringValue(key) { |
||||
switch (key) { |
||||
case configDimUnit: |
||||
// return String(this.data[key]);
|
||||
return String(Configuration.getData()[key]); |
||||
default: |
||||
throw new Error('Invalid string configuration parameter: ' + key); |
||||
} |
||||
} |
||||
|
||||
/** Get a numeric configuration parameter. */ |
||||
static getNumericValue(key) { |
||||
switch (key) { |
||||
case configSystemUI: |
||||
case configWallHeight: |
||||
case configWallThickness: |
||||
case scale: |
||||
case snapTolerance: |
||||
case gridSpacing: |
||||
case boundsX: |
||||
case boundsY: |
||||
case viewBounds: |
||||
// return Number(this.data[key]);
|
||||
return Number(Configuration.getData()[key]); |
||||
default: |
||||
throw new Error('Invalid numeric configuration parameter: ' + key); |
||||
} |
||||
} |
||||
|
||||
/** Get a numeric configuration parameter. */ |
||||
static getBooleanValue(key) { |
||||
switch (key) { |
||||
case snapToGrid: |
||||
case directionalDrag: |
||||
case dragOnlyX: |
||||
case dragOnlyY: |
||||
return Boolean(Configuration.getData()[key]); |
||||
default: |
||||
throw new Error('Invalid Boolean configuration parameter: ' + key); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,145 @@
|
||||
import { Vector2, Vector3 } from 'three'; |
||||
import { Configuration, configDimUnit,dimInch, dimFeetAndInch, dimMeter, dimCentiMeter, dimMilliMeter } from './configuration'; |
||||
|
||||
export const decimals = 1000; |
||||
|
||||
export const cmPerFoot = 30.48; |
||||
export const pixelsPerFoot = 5.0; |
||||
|
||||
export const pixelsPerCm = 1; // 0.5;
|
||||
export const cmPerPixel = (1.0 / pixelsPerCm); |
||||
|
||||
|
||||
export const dimensioningOptions = [dimInch, dimFeetAndInch, dimMeter, dimCentiMeter, dimMilliMeter]; |
||||
|
||||
|
||||
/** Dimensioning functions. */ |
||||
export class Dimensioning { |
||||
static cmToPixelVector2D(cmV2d) { |
||||
let pixelV2d = new Vector2(Dimensioning.cmToPixel(cmV2d.x), Dimensioning.cmToPixel(cmV2d.y)); |
||||
return pixelV2d; |
||||
} |
||||
|
||||
static cmToPixelVector3D(cmV3d) { |
||||
let pixelV2d = new Vector3(Dimensioning.cmToPixel(cmV3d.x), Dimensioning.cmToPixel(cmV3d.y), Dimensioning.cmToPixel(cmV3d.z)); |
||||
return pixelV2d; |
||||
} |
||||
|
||||
static pixelToCmVector2D(pixelV2d) { |
||||
let cmV2d = new Vector2(Dimensioning.cmToPixel(pixelV2d.x), Dimensioning.cmToPixel(pixelV2d.y)); |
||||
return cmV2d; |
||||
} |
||||
|
||||
static pixelToCmVector3D(pixel3d) { |
||||
let cmV2d = new Vector3(Dimensioning.cmToPixel(pixel3d.x), Dimensioning.cmToPixel(pixel3d.y), Dimensioning.cmToPixel(pixel3d.z)); |
||||
return cmV2d; |
||||
} |
||||
|
||||
static cmToPixel(cm, apply_scale = true) { |
||||
if (apply_scale) { |
||||
return cm * pixelsPerCm * Configuration.getNumericValue('scale'); |
||||
} |
||||
return cm * pixelsPerCm; |
||||
} |
||||
|
||||
static pixelToCm(pixel, apply_scale = true) { |
||||
if (apply_scale) { |
||||
return pixel * cmPerPixel * (1.0 / Configuration.getNumericValue('scale')); |
||||
} |
||||
return pixel * cmPerPixel; |
||||
} |
||||
|
||||
static roundOff(value, decimals) { |
||||
return Math.round(decimals * value) / decimals; |
||||
} |
||||
/** Converts cm to dimensioning number. |
||||
* @param cm Centi meter value to be converted. |
||||
* @returns Number representation. |
||||
*/ |
||||
static cmFromMeasureRaw(measure) { |
||||
switch (Configuration.getStringValue(configDimUnit)) { |
||||
case dimFeetAndInch: |
||||
return Math.round(decimals * (measure * 30.480016459203095991)) / decimals; |
||||
case dimInch: |
||||
return Math.round(decimals * (measure * 2.5400013716002578512)) / decimals; |
||||
case dimMilliMeter: |
||||
return Math.round(decimals * (measure * 0.10000005400001014955)) / decimals; |
||||
case dimCentiMeter: |
||||
return measure; |
||||
case dimMeter: |
||||
default: |
||||
return Math.round(decimals * 100 * measure) / decimals; |
||||
} |
||||
} |
||||
|
||||
/** Converts cm to dimensioning string. |
||||
* @param cm Centi meter value to be converted. |
||||
* @returns String representation. |
||||
*/ |
||||
static cmFromMeasure(measure) { |
||||
switch (Configuration.getStringValue(configDimUnit)) { |
||||
case dimFeetAndInch: |
||||
return Math.round(decimals * (measure * 30.480016459203095991)) / decimals + 'cm'; |
||||
case dimInch: |
||||
return Math.round(decimals * (measure * 2.5400013716002578512)) / decimals + 'cm'; |
||||
case dimMilliMeter: |
||||
return Math.round(decimals * (measure * 0.10000005400001014955)) / decimals + 'cm'; |
||||
case dimCentiMeter: |
||||
return measure; |
||||
case dimMeter: |
||||
default: |
||||
return Math.round(decimals * 100 * measure) / decimals + 'cm'; |
||||
} |
||||
} |
||||
|
||||
/** Converts cm to dimensioning string. |
||||
* @param cm Centi meter value to be converted. |
||||
* @returns String representation. |
||||
*/ |
||||
static cmToMeasureRaw(cm, power = 1) { |
||||
switch (Configuration.getStringValue(configDimUnit)) { |
||||
case dimFeetAndInch: // dimFeetAndInch returns only the feet
|
||||
var allInFeet = (cm * Math.pow(0.032808416666669996953, power)); |
||||
return allInFeet; |
||||
case dimInch: |
||||
var inches = Math.round(decimals * (cm * Math.pow(0.393700, power))) / decimals; |
||||
return inches; |
||||
case dimMilliMeter: |
||||
var mm = Math.round(decimals * (cm * Math.pow(10, power))) / decimals; |
||||
return mm; |
||||
case dimCentiMeter: |
||||
return Math.round(decimals * cm) / decimals; |
||||
case dimMeter: |
||||
default: |
||||
var m = Math.round(decimals * (cm * Math.pow(0.01, power))) / decimals; |
||||
return m; |
||||
} |
||||
} |
||||
|
||||
/** Converts cm to dimensioning string. |
||||
* @param cm Centi meter value to be converted. |
||||
* @returns String representation. |
||||
*/ |
||||
static cmToMeasure(cm, power = 1) { |
||||
switch (Configuration.getStringValue(configDimUnit)) { |
||||
case dimFeetAndInch: |
||||
var allInFeet = (cm * Math.pow(0.032808416666669996953, power)); |
||||
var floorFeet = Math.floor(allInFeet); |
||||
var remainingFeet = allInFeet - floorFeet; |
||||
var remainingInches = Math.round(remainingFeet * 12); |
||||
return floorFeet + '\'' + remainingInches + ''; |
||||
case dimInch: |
||||
var inches = Math.round(decimals * (cm * Math.pow(0.393700, power))) / decimals; |
||||
return inches + '\''; |
||||
case dimMilliMeter: |
||||
var mm = Math.round(decimals * (cm * Math.pow(10, power))) / decimals; |
||||
return '' + mm + 'mm'; |
||||
case dimCentiMeter: |
||||
return '' + Math.round(decimals * cm) / decimals + 'cm'; |
||||
case dimMeter: |
||||
default: |
||||
var m = Math.round(decimals * (cm * Math.pow(0.01, power))) / decimals; |
||||
return '' + m + 'm'; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,67 @@
|
||||
export const EVENT_ACTION = 'ACTION_EVENT'; |
||||
export const EVENT_DELETED = 'DELETED_EVENT'; |
||||
export const EVENT_MOVED = 'MOVED_EVENT'; |
||||
export const EVENT_REDRAW = 'REDRAW_EVENT'; |
||||
export const EVENT_NEW = 'NEW_EVENT'; |
||||
export const EVENT_LOADED = 'LOADED_EVENT'; |
||||
export const EVENT_LOADING = 'LOADING_EVENT'; |
||||
export const EVENT_UPDATED = 'UPDATED_EVENT'; |
||||
export const EVENT_SAVED = 'SAVED_EVENT'; |
||||
export const EVENT_CHANGED = 'CHANGED_EVENT'; |
||||
export const EVENT_GLTF_READY = 'GLTF_READY_EVENT'; |
||||
|
||||
export const EVENT_EXTERNAL_FLOORPLAN_LOADED = 'EXTERNAL_FLOORPLAN_LOADED_EVENT'; |
||||
|
||||
export const EVENT_NEW_PARAMETRIC_ITEM = 'NEW_PARAMETRIC_ITEM_EVENT'; |
||||
export const EVENT_NEW_ITEM = 'NEW_ITEM_EVENT'; |
||||
export const EVENT_ITEM_LOADING = 'ITEM_LOADING_EVENT'; |
||||
export const EVENT_ITEM_LOADED = 'ITEM_LOADED_EVENT'; |
||||
export const EVENT_ITEM_REMOVED = 'ITEM_REMOVED_EVENT'; |
||||
|
||||
export const EVENT_ITEM_SELECTED = 'ITEM_SELECTED_EVENT'; |
||||
export const EVENT_ITEM_MOVE = 'ITEM_MOVED_EVENT'; |
||||
export const EVENT_ITEM_MOVE_FINISH = 'ITEM_MOVED_FINISH_EVENT'; |
||||
export const EVENT_ITEM_HOVERON = 'ITEM_HOVERON_EVENT'; |
||||
export const EVENT_ITEM_HOVEROFF = 'ITEM_HOVEROFF_EVENT'; |
||||
export const EVENT_NO_ITEM_SELECTED = 'ITEM_NO_SELECTED_EVENT'; |
||||
|
||||
export const EVENT_MODE_RESET = 'MODE_RESET_EVENT'; |
||||
export const EVENT_CAMERA_MOVED = 'CAMERA_MOVED_EVENT'; |
||||
export const EVENT_CAMERA_ACTIVE_STATUS = 'CAMERA_ACTIVE_STATUS_EVENT'; |
||||
export const EVENT_CAMERA_VIEW_CHANGE = 'CAMERA_VIEW_CHANGE_EVENT'; |
||||
export const EVENT_FPS_EXIT = 'CAMERA_FPS_EXIT_EVENT'; |
||||
|
||||
export const EVENT_WALL_CLICKED = 'WALL_CLICKED_EVENT'; |
||||
export const EVENT_ROOM_CLICKED = 'ROOM_CLICKED_EVENT'; |
||||
export const EVENT_FLOOR_CLICKED = 'FLOOR_CLICKED_EVENT'; |
||||
export const EVENT_NOTHING_CLICKED = 'NOTHING_CLICKED_EVENT'; |
||||
|
||||
export const EVENT_ROOM_NAME_CHANGED = 'CHANGED_ROOM_NAME_EVENT'; |
||||
export const EVENT_NEW_ROOMS_ADDED = 'ADDED_NEW_ROOMS_EVENT'; |
||||
|
||||
export const EVENT_CORNER_ATTRIBUTES_CHANGED = 'CORNER_ATTRIBUTES_CHANGED_EVENT'; |
||||
export const EVENT_WALL_ATTRIBUTES_CHANGED = 'WALL_ATTRIBUTES_CHANGED_EVENT'; |
||||
export const EVENT_ROOM_ATTRIBUTES_CHANGED = 'ROOM_ATTRIBUTES_CHANGED_EVENT'; |
||||
|
||||
export const EVENT_CORNER_2D_CLICKED = 'CORNER_CLICKED_2D_EVENT'; |
||||
export const EVENT_WALL_2D_CLICKED = 'WALL_CLICKED_2D_EVENT'; |
||||
export const EVENT_ROOM_2D_CLICKED = 'ROOM_CLICKED_2D_EVENT'; |
||||
export const EVENT_2D_UNSELECTED = 'UNSELECTED_2D_EVENT'; |
||||
export const EVENT_2D_SELECTED = 'SELECTED_2D_EVENT'; |
||||
export const EVENT_NOTHING_2D_SELECTED = 'NOTHING_2D_SELECTED_EVENT'; |
||||
|
||||
export const EVENT_CORNER_2D_DOUBLE_CLICKED = 'CORNER_DOUBLE_CLICKED_2D_EVENT'; |
||||
export const EVENT_WALL_2D_DOUBLE_CLICKED = 'WALL_DOUBLE_CLICKED_2D_EVENT'; |
||||
export const EVENT_ROOM_2D_DOUBLE_CLICKED = 'ROOM_DOUBLE_CLICKED_2D_EVENT'; |
||||
|
||||
export const EVENT_CORNER_2D_HOVER = 'CORNER_HOVER_2D_EVENT'; |
||||
export const EVENT_WALL_2D_HOVER = 'WALL_HOVER_2D_EVENT'; |
||||
export const EVENT_ROOM_2D_HOVER = 'ROOM_HOVER_2D_EVENT'; |
||||
|
||||
export const EVENT_KEY_PRESSED = 'KEY_PRESSED_EVENT'; |
||||
export const EVENT_KEY_RELEASED = 'KEY_RELEASED_EVENT'; |
||||
|
||||
export const EVENT_UPDATE_TEXTURES = 'UPDATE_TEXTURES_EVENT'; |
||||
export const EVENT_MODIFY_TEXTURE_ATTRIBUTE = 'MODIFY_TEXTURE_ATTRIBUTE_EVENT'; |
||||
|
||||
export const EVENT_PARAMETRIC_GEOMETRY_UPATED = 'PARAMETRIC_GEOMETRY_UPATED_EVENT'; |
||||
@ -0,0 +1,87 @@
|
||||
import { Configuration, gridSpacing, viewBounds } from './configuration'; |
||||
import { EVENT_CHANGED } from './events'; |
||||
import { Graphics } from 'pixi.js'; |
||||
import { Vector2 } from 'three'; |
||||
import { Dimensioning } from './dimensioning'; |
||||
|
||||
const GRID_SIZE = 10000; |
||||
|
||||
export class Grid2D extends Graphics { |
||||
|
||||
canvas; |
||||
options; |
||||
size; |
||||
gridScale; |
||||
constructor(canvas, options) { |
||||
super(); |
||||
// this.drawRect(0, 0, GRID_SIZE, GRID_SIZE);
|
||||
this.canvas = canvas; |
||||
this.options = options; |
||||
this.size = new Vector2(GRID_SIZE, GRID_SIZE); |
||||
this.gridScale = 1.0; |
||||
this.width = this.size.x; |
||||
this.height = this.size.y; |
||||
this.drawRect(0, 0, GRID_SIZE, GRID_SIZE); |
||||
this.pivot.x = this.pivot.y = 0.5; |
||||
Configuration.getInstance().addEventListener(EVENT_CHANGED, (evt) => this.updateGrid()); |
||||
this.updateGrid(); |
||||
} |
||||
|
||||
updateGrid() { |
||||
let gridSize = Dimensioning.cmToPixel(Configuration.getNumericValue(viewBounds) * 1); |
||||
let spacingCMS = Configuration.getNumericValue(gridSpacing); |
||||
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 normalColor = 0xE0E0E0; |
||||
let highlightColor = 0xD0D0D0; |
||||
const cellSize = 5; |
||||
this.clear(); |
||||
for (let i = 0; i <= totalLines; i++) { |
||||
let co = (i * spacing) - halfSize; |
||||
if (i % cellSize === 0) { |
||||
this.lineStyle(highlightLineWidth, highlightColor).moveTo(-halfSize, co).lineTo(halfSize, co); |
||||
this.lineStyle(highlightLineWidth, highlightColor).moveTo(co, -halfSize).lineTo(co, halfSize); |
||||
} else { |
||||
this.lineStyle(linewidth, normalColor).moveTo(-halfSize, co).lineTo(halfSize, co); |
||||
this.lineStyle(linewidth, normalColor).moveTo(co, -halfSize).lineTo(co, halfSize); |
||||
} |
||||
} |
||||
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(0, 0, 5); |
||||
this.endFill(); |
||||
} |
||||
|
||||
getGridScale() { |
||||
return this.gridScale; |
||||
} |
||||
|
||||
setGridScale(value) { |
||||
this.gridScale = value; |
||||
this.updateGrid(); |
||||
} |
||||
|
||||
configurationUpdate(evt) { |
||||
if (evt.key === gridSpacing) { |
||||
this.updateGrid(); |
||||
} |
||||
} |
||||
getCellCoordinates(x, y) { |
||||
let gridSize = Dimensioning.cmToPixel(Configuration.getNumericValue(viewBounds) * 1); |
||||
let spacingCMS = Configuration.getNumericValue(gridSpacing); |
||||
let spacing = Dimensioning.cmToPixel(spacingCMS); |
||||
let halfSize = gridSize * 0.5; |
||||
return { |
||||
x: Math.floor((x - -halfSize) / spacing), |
||||
y: Math.floor((y - -halfSize) / spacing), |
||||
}; |
||||
} |
||||
} |
||||
@ -1,37 +0,0 @@
|
||||
class MyEvent<T> extends CustomEvent<T> {
|
||||
public static readonly CMD: string = "EVENT_NAME"; |
||||
public constructor($type: string , $data: T ) {
|
||||
super( $type , { detail: $data, bubbles: true, cancelable: true, composed: true }); |
||||
} |
||||
} |
||||
|
||||
class MyDispatch extends EventTarget {
|
||||
private static _instance: MyDispatch; |
||||
public static get Instance(): MyDispatch {
|
||||
if (!MyDispatch._instance) MyDispatch._instance = new MyDispatch(); |
||||
return MyDispatch._instance; |
||||
} |
||||
public send<T>($data: T, $type: string = MyEvent.CMD): void {
|
||||
const $event: CustomEvent = new MyEvent<T>($type, $data); |
||||
this.dispatchEvent($event); |
||||
} |
||||
} |
||||
|
||||
class Test {
|
||||
|
||||
public constructor() {
|
||||
MyDispatch.Instance.addEventListener(MyEvent.CMD, this.onEvent as EventListener); |
||||
} |
||||
private onEvent($e: MyEvent<ITest>): void {
|
||||
console.log(`target ${$e.target}`); |
||||
console.log(`name: ${$e.detail._name} , occupation: ${$e.detail._occupation}`); |
||||
} |
||||
} |
||||
|
||||
interface ITest {
|
||||
_name: string; |
||||
_occupation: string; |
||||
} |
||||
|
||||
let $test: Test = new Test(); |
||||
MyDispatch.Instance.send<ITest>({ _name: `Aonaufly`, _occupation: `it` }); |
||||
@ -1,2 +1 @@
|
||||
<div #content style="width:100%;height:100%;" (mousewheel)='this.mouseWheelHandel($event)' |
||||
(DOMMouseScroll)='this.mouseWheelHandel($event)'></div> |
||||
<div #content style="width:100%;height:100%;"></div> |
||||
Loading…
Reference in new issue