fix: canvas height can shrink

deco-finter · Sep 24, 2021 · d620df6 · d620df6
1 parent dec9682
commit d620df6
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 13 deletions.
diff --git a/fableous-fe/src/components/canvas/Canvas.tsx b/fableous-fe/src/components/canvas/Canvas.tsx
@@ -22,7 +22,7 @@ import {
   scaleUpXY,
   translateXY,
 } from "./helpers";
-import { ASPECT_RATIO, SCALE, SELECT_PADDING } from "./constants";
+import { SCALE, SELECT_PADDING } from "./constants";
 import { Cursor } from "./CursorScreen";
 import { ImperativeCanvasRef, TextShape, TextShapeMap } from "./data";
 import { ControllerRole, ToolMode, WSMessageType } from "../../constant";
@@ -911,7 +911,9 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
         className="relative place-self-center"
         style={{
           width: offsetWidth,
-          height: offsetWidth * ASPECT_RATIO,
+          // -1 so height can shrink
+          height: offsetHeight - 1,
+          maxHeight: "100%",
         }}
       >
         <canvas
@@ -932,8 +934,9 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
               showKeyboard(true);
           }}
           style={{
-            width: offsetWidth,
-            height: offsetHeight,
+            position: "absolute",
+            width: "100%",
+            height: "100%",
             borderRadius: "24px",
             // allows onPointerMove to be fired continuously on touch,
             // else will be treated as pan gesture leading to short strokes

diff --git a/fableous-fe/src/components/canvas/CursorScreen.tsx b/fableous-fe/src/components/canvas/CursorScreen.tsx
@@ -4,7 +4,7 @@
 /* eslint-disable no-case-declarations */
 import { useEffect, useRef } from "react";
 import { scaleUpXY } from "./helpers";
-import { ASPECT_RATIO, SCALE } from "./constants";
+import { SCALE } from "./constants";
 import { ToolMode } from "../../constant";
 
 export interface Cursor {
@@ -110,18 +110,21 @@ const CursorScreen = (props: CursorScreenProps) => {
 
   return (
     <div
-      className="place-self-center"
+      className="relative place-self-center"
       style={{
         width: offsetWidth,
-        height: offsetWidth * ASPECT_RATIO,
+        // -1 so height can shrink
+        height: offsetHeight - 1,
+        maxHeight: "100%",
       }}
     >
       <canvas
         ref={canvasRef}
         style={{
+          position: "absolute",
           borderRadius: "24px",
-          width: offsetWidth,
-          height: offsetHeight,
+          width: "100%",
+          height: "100%",
           touchAction: "none",
           msTouchAction: "none",
           msTouchSelect: "none",

diff --git a/fableous-fe/src/containers/ControllerCanvasPage.tsx b/fableous-fe/src/containers/ControllerCanvasPage.tsx
@@ -491,7 +491,8 @@ export default function ControllerCanvasPage() {
       </div>
       <div
         className={`flex flex-col w-full ${
-          controllerState !== ControllerState.DrawingSession && "invisible"
+          controllerState !== ControllerState.DrawingSession &&
+          "invisible overflow-y-hidden"
         }`}
         style={{
           // 64px navbar height, 20px content top padding, 48px content bot padding
@@ -607,8 +608,9 @@ export default function ControllerCanvasPage() {
                   className="place-self-center bg-white"
                   style={{
                     width: canvasOffsetWidth,
-                    // if not decrement by 1, canvas will be larger than screen height
+                    // -1 so height can shrink
                     height: canvasOffsetHeight - 1,
+                    maxHeight: "100%",
                     borderRadius: "24px",
                   }}
                 />

diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx
@@ -698,7 +698,7 @@ export default function HubCanvasPage() {
       </div>
       <div
         className={`flex flex-col w-full ${
-          hubState !== HubState.DrawingSession && "invisible"
+          hubState !== HubState.DrawingSession && "invisible overflow-y-hidden"
         }`}
         style={{
           // 64px navbar height, 20px content top padding, 48px content bot padding
@@ -889,8 +889,9 @@ export default function HubCanvasPage() {
                   className="place-self-center bg-white"
                   style={{
                     width: canvasOffsetWidth,
-                    // if not decrement by 1, canvas will be larger than screen height
+                    // -1 so height can shrink
                     height: canvasOffsetHeight - 1,
+                    maxHeight: "100%",
                     borderRadius: "24px",
                   }}
                 />