From ea5bea4a804a5f810ef5498f1dc0778cd766e3ee Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Sun, 5 Dec 2021 00:27:15 -0600
Subject: [PATCH] fix floorplan touch interactions

---
 .../floorplan-editor/FloorplanEditorView.scss |  8 ++--
 .../common/FloorplanEditor.ts                 |  4 +-
 .../views/FloorplanCanvasView.tsx             | 38 ++++++++++++++++++-
 3 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/src/views/floorplan-editor/FloorplanEditorView.scss b/src/views/floorplan-editor/FloorplanEditorView.scss
index 7bc41e59..dcacff14 100644
--- a/src/views/floorplan-editor/FloorplanEditorView.scss
+++ b/src/views/floorplan-editor/FloorplanEditorView.scss
@@ -9,9 +9,11 @@
         overflow: scroll;
     }
 
-    .color {
-        height: 50px;
-        width: 10px;
+    .arrow-button {
+
+        @include media-breakpoint-up(md) {
+            display:none;
+        }
     }
 }
 
diff --git a/src/views/floorplan-editor/common/FloorplanEditor.ts b/src/views/floorplan-editor/common/FloorplanEditor.ts
index 71fcbed9..7d1aad13 100644
--- a/src/views/floorplan-editor/common/FloorplanEditor.ts
+++ b/src/views/floorplan-editor/common/FloorplanEditor.ts
@@ -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;
diff --git a/src/views/floorplan-editor/views/FloorplanCanvasView.tsx b/src/views/floorplan-editor/views/FloorplanCanvasView.tsx
index f68a9248..a52fae94 100644
--- a/src/views/floorplan-editor/views/FloorplanCanvasView.tsx
+++ b/src/views/floorplan-editor/views/FloorplanCanvasView.tsx
@@ -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>
+        </>
     );
 }