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

fix floorplan touch interactions

Browse Source
This commit is contained in:
dank074 2021-12-05 00:27:15 -06:00
parent a33f06ad27
commit ea5bea4a80
3 changed files with 44 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/floorplan-editor/FloorplanEditorView.scss
View File

@ -9,9 +9,11 @@
overflow: scroll;
}
.color {
height: 50px;
width: 10px;
.arrow-button {
@include media-breakpoint-up(md) {
display:none;
}
}
}

4
src/views/floorplan-editor/common/FloorplanEditor.ts
View File

@ -87,10 +87,10 @@ export class FloorplanEditor extends PixiApplicationProxy
this._tilemapRenderer.on('pointerdown', (event: PixiInteractionEventProxy) =>
{
if(!(event.data.originalEvent instanceof PointerEvent)) return;
if(!(event.data.originalEvent instanceof PointerEvent) && !(event.data.originalEvent instanceof TouchEvent)) return;
const pointerEvent = event.data.originalEvent;
if(pointerEvent.button === 2) return;
if((pointerEvent instanceof MouseEvent) && pointerEvent.button === 2) return;
const location = event.data.global;

38
src/views/floorplan-editor/views/FloorplanCanvasView.tsx
View File

@ -1,6 +1,7 @@
import { GetOccupiedTilesMessageComposer, GetRoomEntryTileMessageComposer, NitroPoint, RoomEntryTileMessageEvent, RoomOccupiedTilesMessageEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { CreateMessageHook, SendMessageHook, UseMountEffect } from '../../../hooks';
import { NitroLayoutFlex } from '../../../layout';
import { FloorplanEditor } from '../common/FloorplanEditor';
import { useFloorplanEditorContext } from '../context/FloorplanEditorContext';
@ -68,6 +69,29 @@ export const FloorplanCanvasView: FC<{}> = props =>
CreateMessageHook(RoomEntryTileMessageEvent, onRoomEntryTileMessageEvent);
const onClickArrowButton = useCallback((scrollDirection: string) =>
{
const element = elementRef.current;
if(!element) return;
switch(scrollDirection)
{
case 'up':
element.scrollBy({ top: -10 });
break;
case 'down':
element.scrollBy({ top: 10 });
break;
case 'left':
element.scrollBy({ left: -10 });
break;
case 'right':
element.scrollBy({ left: 10 });
break;
}
}, []);
useEffect(() =>
{
if(entryTileReceived && occupiedTilesReceived)
@ -75,6 +99,18 @@ export const FloorplanCanvasView: FC<{}> = props =>
}, [entryTileReceived, occupiedTilesReceived])
return (
<div ref={elementRef} className="editor-area" />
<>
<NitroLayoutFlex className="align-items-center justify-content-center">
<div className="arrow-button"><button className="btn btn-primary" onClick={() => onClickArrowButton('up')}><i className="fas fa-arrow-up"/></button></div>
</NitroLayoutFlex>
<NitroLayoutFlex className="align-items-center justify-content-center">
<div className="arrow-button"><button className="btn btn-primary" onClick={() => onClickArrowButton('left')}><i className="fas fa-arrow-left"/></button></div>
<div ref={elementRef} className="editor-area" />
<div className="arrow-button"><button className="btn btn-primary" onClick={() => onClickArrowButton('right')}><i className="fas fa-arrow-right"/></button></div>
</NitroLayoutFlex>
<NitroLayoutFlex className="align-items-center justify-content-center">
<div className="arrow-button"><button className="btn btn-primary" onClick={() => onClickArrowButton('down')}><i className="fas fa-arrow-down"/></button></div>
</NitroLayoutFlex>
</>
);
}