From 7dee5309dcb0daedb59c738ab1588db3ce5aae4a Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 19 Aug 2019 02:06:37 +0900 Subject: [PATCH] Refactoring --- src/client/app/common/scripts/room/room.ts | 26 ++++++++++++---------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/client/app/common/scripts/room/room.ts b/src/client/app/common/scripts/room/room.ts index 5506e5e65..b277da92a 100644 --- a/src/client/app/common/scripts/room/room.ts +++ b/src/client/app/common/scripts/room/room.ts @@ -38,7 +38,10 @@ export class Room { private onChangeSelect: Function; private isTransformMode = false; private renderFrameRequestId: number; - public canvas: HTMLCanvasElement; + + private get canvas(): HTMLCanvasElement { + return this.renderer.domElement; + } private get furnitures(): Furniture[] { return this.roomInfo.furnitures; @@ -104,8 +107,7 @@ export class Room { this.graphicsQuality === 'low' ? THREE.BasicShadowMap : THREE.BasicShadowMap; // cheep - this.canvas = this.renderer.domElement; - container.appendChild(this.renderer.domElement); + container.appendChild(this.canvas); //#endregion //#region Init a camera @@ -167,7 +169,7 @@ export class Room { //#endregion //#region Init a controller - this.controls = new OrbitControls(this.camera, this.renderer.domElement); + this.controls = new OrbitControls(this.camera, this.canvas); this.controls.target.set(0, 1, 0); this.controls.enableZoom = true; @@ -266,14 +268,14 @@ export class Room { //#region Interaction if (isMyRoom) { - this.furnitureControl = new TransformControls(this.camera, this.renderer.domElement); + this.furnitureControl = new TransformControls(this.camera, this.canvas); this.scene.add(this.furnitureControl); // Hover highlight - this.renderer.domElement.onmousemove = this.onmousemove; + this.canvas.onmousemove = this.onmousemove; // Click - this.renderer.domElement.onmousedown = this.onmousedown; + this.canvas.onmousedown = this.onmousedown; } //#endregion @@ -496,8 +498,8 @@ export class Room { if (this.isTransformMode) return; const rect = (ev.target as HTMLElement).getBoundingClientRect(); - const x = (((ev.clientX * window.devicePixelRatio) - rect.left) / this.renderer.domElement.width) * 2 - 1; - const y = -(((ev.clientY * window.devicePixelRatio) - rect.top) / this.renderer.domElement.height) * 2 + 1; + const x = (((ev.clientX * window.devicePixelRatio) - rect.left) / this.canvas.width) * 2 - 1; + const y = -(((ev.clientY * window.devicePixelRatio) - rect.top) / this.canvas.height) * 2 + 1; const pos = new THREE.Vector2(x, y); this.camera.updateMatrixWorld(); @@ -531,11 +533,11 @@ export class Room { @autobind private onmousedown(ev: MouseEvent) { if (this.isTransformMode) return; - if (ev.target !== this.renderer.domElement || ev.button !== 0) return; + if (ev.target !== this.canvas || ev.button !== 0) return; const rect = (ev.target as HTMLElement).getBoundingClientRect(); - const x = (((ev.clientX * window.devicePixelRatio) - rect.left) / this.renderer.domElement.width) * 2 - 1; - const y = -(((ev.clientY * window.devicePixelRatio) - rect.top) / this.renderer.domElement.height) * 2 + 1; + const x = (((ev.clientX * window.devicePixelRatio) - rect.left) / this.canvas.width) * 2 - 1; + const y = -(((ev.clientY * window.devicePixelRatio) - rect.top) / this.canvas.height) * 2 + 1; const pos = new THREE.Vector2(x, y); this.camera.updateMatrixWorld();