From c8e34acfa1c72d2d7c410c596fda79ac56d986d7 Mon Sep 17 00:00:00 2001 From: dank074 Date: Thu, 20 Jul 2023 00:43:10 -0500 Subject: [PATCH] fix floorplan --- .../common/FloorplanEditor.ts | 81 ++++++------------- .../views/FloorplanCanvasView.tsx | 48 ++++++++++- 2 files changed, 70 insertions(+), 59 deletions(-) diff --git a/src/components/floorplan-editor/common/FloorplanEditor.ts b/src/components/floorplan-editor/common/FloorplanEditor.ts index 2fef1b90..3e9c7a99 100644 --- a/src/components/floorplan-editor/common/FloorplanEditor.ts +++ b/src/components/floorplan-editor/common/FloorplanEditor.ts @@ -14,7 +14,7 @@ export class FloorplanEditor extends PixiApplicationProxy private _tilemap: Tile[][]; private _width: number; private _height: number; - private _isHolding: boolean; + private _isPointerDown: boolean; private _doorLocation: NitroPoint; private _lastUsedTile: NitroPoint; private _tilemapRenderer: NitroTilemap; @@ -42,7 +42,7 @@ export class FloorplanEditor extends PixiApplicationProxy this._doorLocation = new NitroPoint(0, 0); this._width = 0; this._height = 0; - this._isHolding = false; + this._isPointerDown = false; this._lastUsedTile = new NitroPoint(-1, -1); this._actionSettings = new ActionSettings(); } @@ -58,60 +58,36 @@ export class FloorplanEditor extends PixiApplicationProxy this._assetCollection = collection; this._tilemapRenderer = new NitroTilemap(collection.baseTexture); - this.registerEventListeners(); - this.stage.addChild(this._tilemapRenderer); this._isInitialized = true; } - private registerEventListeners(): void + public onPointerRelease(): void { - //this._tilemapRenderer.interactive = true; - - const tempPoint = new NitroPoint(); - // @ts-ignore - this._tilemapRenderer.containsPoint = (position) => - { - this._tilemapRenderer.worldTransform.applyInverse(position, tempPoint); - return this.tileHitDetection(tempPoint, false); - }; - - /* this._tilemapRenderer.on('pointerup', () => - { - this._isHolding = false; - }); - - this._tilemapRenderer.on('pointerout', () => - { - this._isHolding = false; - }); - - this._tilemapRenderer.on('pointerdown', (event: PixiInteractionEventProxy) => - { - if(!(event.data.originalEvent instanceof PointerEvent) && !(event.data.originalEvent instanceof TouchEvent)) return; - - const pointerEvent = event.data.originalEvent; - if((pointerEvent instanceof MouseEvent) && pointerEvent.button === 2) return; - - - const location = event.data.global; - this.tileHitDetection(location, true); - }); - - this._tilemapRenderer.on('click', (event: PixiInteractionEventProxy) => - { - if(!(event.data.originalEvent instanceof PointerEvent)) return; - - const pointerEvent = event.data.originalEvent; - if(pointerEvent.button === 2) return; - - const location = event.data.global; - this.tileHitDetection(location, true, true); - }); */ + this._isPointerDown = false; } - private tileHitDetection(tempPoint: NitroPoint, setHolding: boolean, isClick: boolean = false): boolean + public onPointerDown(event: PointerEvent): void + { + if(event.button === 2) return; + + const location = new NitroPoint(event.offsetX, event.offsetY); + + this._isPointerDown = true; + + this.tileHitDetection(location, true); + } + + public onPointerMove(event: PointerEvent): void + { + if(!this._isPointerDown) return; + + const location = new NitroPoint(event.offsetX, event.offsetY); + this.tileHitDetection(location, false); + } + + private tileHitDetection(tempPoint: NitroPoint, isClick: boolean = false): boolean { // @ts-ignore const buffer = this._tilemapRenderer.pointsBuf; @@ -119,11 +95,6 @@ export class FloorplanEditor extends PixiApplicationProxy const len = buffer.length; - if(setHolding) - { - this._isHolding = true; - } - for(let j = 0; j < len; j += bufSize) { const bufIndex = j + bufSize; @@ -147,7 +118,7 @@ export class FloorplanEditor extends PixiApplicationProxy const solution = (dx / (width * 0.5) + dy / (height * 0.5) <= 1);//todo: improve this if(solution) { - if(this._isHolding) + if(this._isPointerDown) { const [ realX, realY ] = getTileFromScreenPosition(tileStartX, tileStartY); @@ -376,7 +347,7 @@ export class FloorplanEditor extends PixiApplicationProxy this._doorLocation.set(-1, -1); this._width = 0; this._height = 0; - this._isHolding = false; + this._isPointerDown = false; this._lastUsedTile.set(-1, -1); this._actionSettings.clear(); this._tilemapRenderer.clear(); diff --git a/src/components/floorplan-editor/views/FloorplanCanvasView.tsx b/src/components/floorplan-editor/views/FloorplanCanvasView.tsx index 6db052e4..65f4f8c1 100644 --- a/src/components/floorplan-editor/views/FloorplanCanvasView.tsx +++ b/src/components/floorplan-editor/views/FloorplanCanvasView.tsx @@ -4,8 +4,8 @@ import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp } from 'react-icons/f import { SendMessageComposer } from '../../../api'; import { Base, Button, Column, ColumnProps, Flex, Grid } from '../../../common'; import { useMessageEvent } from '../../../hooks'; -import { FloorplanEditor } from '../common/FloorplanEditor'; import { useFloorplanEditorContext } from '../FloorplanEditorContext'; +import { FloorplanEditor } from '../common/FloorplanEditor'; export const FloorplanCanvasView: FC = props => { @@ -86,6 +86,23 @@ export const FloorplanCanvasView: FC = props => } } + const onPointerEvent = (event: PointerEvent) => + { + switch(event.type) + { + case 'pointerout': + case 'pointerup': + FloorplanEditor.instance.onPointerRelease(); + break; + case 'pointerdown': + FloorplanEditor.instance.onPointerDown(event); + break; + case 'pointermove': + FloorplanEditor.instance.onPointerMove(event); + break; + } + } + useEffect(() => { return () => @@ -116,11 +133,34 @@ export const FloorplanCanvasView: FC = props => SendMessageComposer(new GetRoomEntryTileMessageComposer()); SendMessageComposer(new GetOccupiedTilesMessageComposer()); - FloorplanEditor.instance.tilemapRenderer.interactive = true; + const currentElement = elementRef.current; - if(!elementRef.current) return; + if(!currentElement) return; - elementRef.current.appendChild(FloorplanEditor.instance.renderer.view); + // @ts-ignore + currentElement.appendChild(FloorplanEditor.instance.renderer.view); + + currentElement.addEventListener('pointerup', onPointerEvent); + + currentElement.addEventListener('pointerout', onPointerEvent); + + currentElement.addEventListener('pointerdown', onPointerEvent); + + currentElement.addEventListener('pointermove', onPointerEvent); + + return () => + { + if(currentElement) + { + currentElement.removeEventListener('pointerup', onPointerEvent); + + currentElement.removeEventListener('pointerout', onPointerEvent); + + currentElement.removeEventListener('pointerdown', onPointerEvent); + + currentElement.removeEventListener('pointermove', onPointerEvent); + } + } }, []); return (