nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-22 22:30:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix floorplan

Browse Source
This commit is contained in:
dank074 2023-07-20 00:43:10 -05:00
parent cf73afd43d
commit c8e34acfa1
2 changed files with 70 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/floorplan-editor/common/FloorplanEditor.ts
View File

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

48
src/components/floorplan-editor/views/FloorplanCanvasView.tsx
View File

@ -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<ColumnProps> = props =>
{
@ -86,6 +86,23 @@ export const FloorplanCanvasView: FC<ColumnProps> = 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<ColumnProps> = 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 (