From 3e028ef401f5311ae039613fe0b81b26e3afa0e1 Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Thu, 20 Jul 2023 20:55:35 -0500
Subject: [PATCH 1/3] prevent scrolling canvas on mobile

---
 src/components/floorplan-editor/common/FloorplanEditor.ts     | 2 ++
 src/components/floorplan-editor/views/FloorplanCanvasView.tsx | 3 +--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/floorplan-editor/common/FloorplanEditor.ts b/src/components/floorplan-editor/common/FloorplanEditor.ts
index 7e92800b..f81c38f8 100644
--- a/src/components/floorplan-editor/common/FloorplanEditor.ts
+++ b/src/components/floorplan-editor/common/FloorplanEditor.ts
@@ -33,6 +33,8 @@ export class FloorplanEditor
         canvas.height = height;
         canvas.width = width;
 
+        canvas.style.touchAction = 'none';
+
         this._renderer = canvas.getContext('2d');
 
         this._image = new Image();
diff --git a/src/components/floorplan-editor/views/FloorplanCanvasView.tsx b/src/components/floorplan-editor/views/FloorplanCanvasView.tsx
index 8b9b8102..3a2a25f3 100644
--- a/src/components/floorplan-editor/views/FloorplanCanvasView.tsx
+++ b/src/components/floorplan-editor/views/FloorplanCanvasView.tsx
@@ -138,8 +138,7 @@ export const FloorplanCanvasView: FC<ColumnProps> = props =>
         const currentElement = elementRef.current;
 
         if(!currentElement) return;
-
-        
+                
         currentElement.appendChild(FloorplanEditor.instance.renderer.canvas);
 
         currentElement.addEventListener('pointerup', onPointerEvent);

From 634cf678d587600cb049644c51db3053e8b1497f Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Thu, 20 Jul 2023 21:10:22 -0500
Subject: [PATCH 2/3] set canvas background color

---
 src/components/floorplan-editor/common/FloorplanEditor.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/floorplan-editor/common/FloorplanEditor.ts b/src/components/floorplan-editor/common/FloorplanEditor.ts
index f81c38f8..23495bd9 100644
--- a/src/components/floorplan-editor/common/FloorplanEditor.ts
+++ b/src/components/floorplan-editor/common/FloorplanEditor.ts
@@ -334,7 +334,8 @@ export class FloorplanEditor
 
     public clearCanvas(): void
     {
-        this.renderer.clearRect(0, 0, this._renderer.canvas.width, this._renderer.canvas.height);
+        this.renderer.fillStyle = '0x000000';
+        this.renderer.fillRect(0, 0, this._renderer.canvas.width, this._renderer.canvas.height);
     }
 
     public get renderer(): CanvasRenderingContext2D

From 99d6d46fd1459160ec0b7069bcb111a7b8f760ef Mon Sep 17 00:00:00 2001
From: dank074 <torresefrain10@gmail.com>
Date: Thu, 20 Jul 2023 22:30:09 -0500
Subject: [PATCH 3/3] flooreditor canvas take full space on large screen

---
 .../floorplan-editor/views/FloorplanCanvasView.tsx        | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/floorplan-editor/views/FloorplanCanvasView.tsx b/src/components/floorplan-editor/views/FloorplanCanvasView.tsx
index 3a2a25f3..a3224e73 100644
--- a/src/components/floorplan-editor/views/FloorplanCanvasView.tsx
+++ b/src/components/floorplan-editor/views/FloorplanCanvasView.tsx
@@ -164,15 +164,17 @@ export const FloorplanCanvasView: FC<ColumnProps> = props =>
         }
     }, []);
 
+    const isSmallScreen = () => window.innerWidth < 768;
+
     return (
         <Column gap={ gap } { ...rest }>
             <Grid overflow="hidden" gap={ 1 }>
-                <Column center size={ 1 }>
+                <Column center size={ 1 } className="d-md-none">
                     <Button className="d-md-none" onClick={ event => onClickArrowButton('left') }>
                         <FaArrowLeft className="fa-icon" />
                     </Button>
                 </Column>
-                <Column overflow="hidden" size={ 10 } gap={ 1 }>
+                <Column overflow="hidden" size={ isSmallScreen() ? 10: 12 } gap={ 1 }>
                     <Flex justifyContent="center" className="d-md-none">
                         <Button shrink onClick={ event => onClickArrowButton('up') }>
                             <FaArrowUp className="fa-icon" />
@@ -185,7 +187,7 @@ export const FloorplanCanvasView: FC<ColumnProps> = props =>
                         </Button>
                     </Flex>
                 </Column>
-                <Column center size={ 1 }>
+                <Column center size={ 1 } className="d-md-none">
                     <Button className="d-md-none" onClick={ event => onClickArrowButton('right') }>
                         <FaArrowRight className="fa-icon" />
                     </Button>