Merge pull request #48 from deco-finter/fix/fit-canvas-screen-mobile

[FAB-118] Fix canvas fit on mobile screen
deco-finter · Sep 25, 2021 · 32b4feb · 32b4feb
2 parents 55905b8 + a378d8c
commit 32b4feb
Show file tree

Hide file tree

Showing 8 changed files with 521 additions and 463 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";
@@ -41,8 +41,9 @@ interface CanvasProps {
   pageNum: number;
   isGallery?: boolean;
   isShown?: boolean;
+  offsetWidth: number;
+  offsetHeight: number;
   onDraw?: () => void;
-  offsetWidth?: number;
   setCursor?: React.Dispatch<Cursor | undefined>;
   textShapes: TextShapeMap;
   setTextShapes: React.Dispatch<React.SetStateAction<TextShapeMap>>;
@@ -60,7 +61,6 @@ const defaultProps = {
   isGallery: false,
   isShown: true,
   onDraw: () => {},
-  offsetWidth: 0,
   setCursor: undefined,
   toolColor: "#000000ff",
   toolMode: ToolMode.None,
@@ -86,8 +86,9 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
       pageNum,
       isGallery,
       isShown,
+      offsetWidth,
+      offsetHeight,
       onDraw = defaultProps.onDraw,
-      offsetWidth = defaultProps.offsetWidth,
       setCursor,
       setTextShapes,
       textShapes,
@@ -796,9 +797,8 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
 
     const adjustCanvasSize = useCallback(() => {
       const canvas = canvasRef.current;
-      const canvasOffsetWidth = canvas.offsetWidth;
-      canvas.width = canvasOffsetWidth * SCALE;
-      canvas.height = canvas.width * ASPECT_RATIO;
+      canvas.width = canvas.offsetWidth * SCALE;
+      canvas.height = canvas.offsetHeight * SCALE;
     }, [canvasRef]);
 
     // exposes callbacks to parent, to be used by toolbar
@@ -911,10 +911,12 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
 
     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
@@ -936,7 +938,8 @@ const Canvas = forwardRef<ImperativeCanvasRef, CanvasProps>(
           }}
           style={{
             position: "absolute",
-            width: offsetWidth,
+            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 {
@@ -18,11 +18,12 @@ interface CursorScreenProps {
   cursor: Cursor | undefined;
   name?: string;
   isShown?: boolean;
-  offsetWidth?: number;
+  offsetWidth: number;
+  offsetHeight: number;
 }
 
 const CursorScreen = (props: CursorScreenProps) => {
-  const { cursor, name, isShown, offsetWidth = 0 } = props;
+  const { cursor, name, isShown, offsetWidth, offsetHeight } = props;
   const canvasRef = useRef<HTMLCanvasElement>(document.createElement("canvas"));
   const cursorRef = useRef<Cursor>(cursor as Cursor);
   cursorRef.current = cursor as Cursor;
@@ -93,9 +94,8 @@ const CursorScreen = (props: CursorScreenProps) => {
   // set canvas size onmount and when canvas appears or becomes hidden
   useEffect(() => {
     const canvas = canvasRef.current;
-    const canvasOffsetWidth = canvas.offsetWidth;
-    canvas.width = canvasOffsetWidth * SCALE;
-    canvas.height = canvas.width * ASPECT_RATIO;
+    canvas.width = canvas.offsetWidth * SCALE;
+    canvas.height = canvas.offsetHeight * SCALE;
     const ctx = canvas.getContext("2d");
     if (ctx) {
       ctx.textBaseline = "middle";
@@ -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,
+          width: "100%",
+          height: "100%",
           touchAction: "none",
           msTouchAction: "none",
           msTouchSelect: "none",
@@ -139,7 +142,6 @@ const CursorScreen = (props: CursorScreenProps) => {
 CursorScreen.defaultProps = {
   name: "",
   isShown: true,
-  offsetWidth: 0,
 };
 
 export default CursorScreen;
diff --git a/fableous-fe/src/components/canvas/LayerToolbar.tsx b/fableous-fe/src/components/canvas/LayerToolbar.tsx
@@ -47,11 +47,9 @@ export default function LayerToolbar(props: {
   const classes = useStyles();
 
   return (
-    <div
-      className={`h-full flex flex-col justify-center items-center ${classes.hideScrollbar}`}
-    >
+    <div className="h-full flex flex-col justify-center items-center">
       <div
-        className="overflow-y-scroll overflow-x-hidden"
+        className={`overflow-y-scroll overflow-x-hidden  ${classes.hideScrollbar}`}
         style={{
           height: offsetHeight || "100%",
           maxHeight: "100%",

diff --git a/fableous-fe/src/components/canvas/helpers.ts b/fableous-fe/src/components/canvas/helpers.ts
@@ -1,13 +1,20 @@
 import { MutableRefObject } from "react";
 import { SCALE } from "./constants";
 
+export const getCurrentScaling = (
+  canvasRef: MutableRefObject<HTMLCanvasElement>
+): number => {
+  return canvasRef.current.width / canvasRef.current.offsetWidth;
+};
+
 export const translateXY = (
   canvasRef: MutableRefObject<HTMLCanvasElement>,
   x: number,
   y: number
 ) => {
   const bound = canvasRef.current.getBoundingClientRect();
-  return [(x - bound.x) * SCALE, (y - bound.y) * SCALE];
+  const currentScale = getCurrentScaling(canvasRef);
+  return [(x - bound.x) * currentScale, (y - bound.y) * currentScale];
 };
 
 // wrap with useCallback() because dependency chain leads to being used at useEffect()