From 371a3668f125c5ea398623dcb057e52365419579 Mon Sep 17 00:00:00 2001 From: Nicolaus Gozali Date: Wed, 22 Sep 2021 15:46:59 +1000 Subject: [PATCH 1/9] fix: contain canvas on small screen if chip row is 1 row --- fableous-fe/src/containers/ControllerCanvasPage.tsx | 8 ++++++-- fableous-fe/src/containers/HubCanvasPage.tsx | 6 +++++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/fableous-fe/src/containers/ControllerCanvasPage.tsx b/fableous-fe/src/containers/ControllerCanvasPage.tsx index a45fc411..20df6ae4 100644 --- a/fableous-fe/src/containers/ControllerCanvasPage.tsx +++ b/fableous-fe/src/containers/ControllerCanvasPage.tsx @@ -365,9 +365,13 @@ export default function ControllerCanvasPage() {
@@ -386,7 +390,7 @@ export default function ControllerCanvasPage() { /> - + )}
From 91cd4c303d7f68530ac93a9fa7b1859bc3e034a1 Mon Sep 17 00:00:00 2001 From: Nicolaus Gozali Date: Wed, 22 Sep 2021 22:53:19 +1000 Subject: [PATCH 2/9] fix: contain canvas on small screen regardless row count in chip row --- fableous-fe/src/components/canvas/Canvas.tsx | 3 +- .../src/components/canvas/CursorScreen.tsx | 3 +- .../src/containers/ControllerCanvasPage.tsx | 246 +++++++++--------- fableous-fe/src/containers/HubCanvasPage.tsx | 243 ++++++++--------- fableous-fe/src/hooks/useContainRatio.ts | 3 +- 5 files changed, 258 insertions(+), 240 deletions(-) diff --git a/fableous-fe/src/components/canvas/Canvas.tsx b/fableous-fe/src/components/canvas/Canvas.tsx index 54f2bbb5..4e9d2150 100644 --- a/fableous-fe/src/components/canvas/Canvas.tsx +++ b/fableous-fe/src/components/canvas/Canvas.tsx @@ -899,7 +899,7 @@ const Canvas = forwardRef( return (
( showKeyboard(true); }} style={{ - position: "absolute", borderWidth: 4, width: offsetWidth, borderRadius: "30px", diff --git a/fableous-fe/src/components/canvas/CursorScreen.tsx b/fableous-fe/src/components/canvas/CursorScreen.tsx index 0a570d30..a7c0b91c 100644 --- a/fableous-fe/src/components/canvas/CursorScreen.tsx +++ b/fableous-fe/src/components/canvas/CursorScreen.tsx @@ -110,7 +110,7 @@ const CursorScreen = (props: CursorScreenProps) => { return (
{ - - - { +
+ + { - [ControllerState.JoinForm]: "join", - [ControllerState.WaitingRoom]: "", - [ControllerState.DrawingSession]: "", - [ControllerState.StoryFinished]: "finished", - }[controllerState] - } - - {controllerState === ControllerState.JoinForm && ( - + {controllerState === ControllerState.JoinForm && ( + + {(formik) => ( +
+
+ +
+
+ ) => { + const evUpperCase = { ...ev }; + evUpperCase.target.value = + ev.target.value?.toUpperCase(); + formik.handleChange(evUpperCase); + }, + }} + /> +
+ + + } + label="Story" + /> + } + label="Character" + /> + } + label="Background" + /> + + +
+ )} + + )} +
- {(formik) => ( -
+ {controllerState === ControllerState.WaitingRoom && ( + + waiting for hub to start.. + + )} + {controllerState === ControllerState.StoryFinished && ( + <>
- { + setControllerState(ControllerState.JoinForm); + setAchievements(EmptyAchievement); }} - /> + > + Join another session +
- ) => { - const evUpperCase = { ...ev }; - evUpperCase.target.value = - ev.target.value?.toUpperCase(); - formik.handleChange(evUpperCase); - }, - }} - /> +
- - - } - label="Story" - /> - } - label="Character" - /> - } - label="Background" - /> - - -
+ )} - - )} -
- {controllerState === ControllerState.WaitingRoom && ( - - waiting for hub to start.. - - )} - {controllerState === ControllerState.StoryFinished && ( - <> -
- -
-
- -
- - )} -
- +
+ +
@@ -463,10 +472,11 @@ export default function ControllerCanvasPage() { }} >
diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index f210fd55..df38007d 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -315,131 +315,140 @@ export default function HubCanvasPage() { }, [achievements, broadcastAchievement]); return ( - - {hubState !== HubState.DrawingSession && ( - <> + +
+ {hubState !== HubState.DrawingSession && ( + <> + + + + + + { + { + [HubState.SessionForm]: "story", + [HubState.WaitingRoom]: "lobby", + [HubState.DrawingSession]: "", + }[hubState] + } + + + + )} + {hubState === HubState.SessionForm && ( + + {(formik) => ( +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ )} + + )} + {hubState === HubState.WaitingRoom && ( + + token: {classroomToken || "-"} + + + Joined Students ({Object.keys(joinedControllers).length}/3) + +
    + {Object.entries(joinedControllers).map(([role, name]) => ( +
  • + {role} - {name} +
    • + ))} +
- - - { - { - [HubState.SessionForm]: "story", - [HubState.WaitingRoom]: "lobby", - [HubState.DrawingSession]: "", - }[hubState] - } - - - - )} - {hubState === HubState.SessionForm && ( - - {(formik) => ( -
-
- -
-
- -
-
- -
-
- -
-
- )} - - )} - {hubState === HubState.WaitingRoom && ( - - - token: {classroomToken || "-"} - - - Joined Students ({Object.keys(joinedControllers).length}/3) - -
    - {Object.entries(joinedControllers).map(([role, name]) => ( -
  • - {role} - {name} -
    • - ))} -
- - - )} + )} +
@@ -603,11 +612,11 @@ export default function HubCanvasPage() { }} >
diff --git a/fableous-fe/src/hooks/useContainRatio.ts b/fableous-fe/src/hooks/useContainRatio.ts index 1c1735d1..da8389dd 100644 --- a/fableous-fe/src/hooks/useContainRatio.ts +++ b/fableous-fe/src/hooks/useContainRatio.ts @@ -19,6 +19,7 @@ export default function useContainRatio(config: { const isPotrait = (width || 0) / (height || 1) > ratio; const containedWidth = isPotrait ? (height || 0) * ratio : width || 0; + const containedHeight = containedWidth / ratio; - return [containedWidth, containedWidth / ratio]; + return [containedWidth, containedHeight]; } From c3a7bd118f8bf0e195b582abb1c6353bb7f78b7e Mon Sep 17 00:00:00 2001 From: Nicolaus Gozali Date: Wed, 22 Sep 2021 22:59:54 +1000 Subject: [PATCH 3/9] feat: chip row on small screen have smaller y-gap --- fableous-fe/src/components/ChipRow.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/fableous-fe/src/components/ChipRow.tsx b/fableous-fe/src/components/ChipRow.tsx index d35effab..eb84d771 100644 --- a/fableous-fe/src/components/ChipRow.tsx +++ b/fableous-fe/src/components/ChipRow.tsx @@ -12,8 +12,8 @@ export default function ChipRow(props: ChipRowProps) { const { left, middle, right } = props; return ( -
-
+
+
-
+
{right.map((item) => React.isValidElement(item) ? ( item From 664f2fa8c8da2bda74c83f231ddcd3d74af7fa62 Mon Sep 17 00:00:00 2001 From: Nicolaus Gozali Date: Thu, 23 Sep 2021 18:21:37 +1000 Subject: [PATCH 4/9] fix: make scale in translation func dynamic --- fableous-fe/src/components/canvas/helpers.ts | 9 ++++++++- fableous-fe/src/containers/HubCanvasPage.tsx | 3 +++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/fableous-fe/src/components/canvas/helpers.ts b/fableous-fe/src/components/canvas/helpers.ts index 23132032..d22b67e6 100644 --- 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 +): number => { + return canvasRef.current.width / canvasRef.current.offsetWidth; +}; + export const translateXY = ( canvasRef: MutableRefObject, 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() diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index df38007d..e61d3f26 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -559,6 +559,7 @@ export default function HubCanvasPage() { role={ControllerRole.Hub} layer={ControllerRole.Story} pageNum={currentPageIdx} + isShown={hubState === HubState.DrawingSession} offsetWidth={canvasOffsetWidth} setCursor={setStoryCursor} setTextShapes={setStoryTextShapes} @@ -577,6 +578,7 @@ export default function HubCanvasPage() { role={ControllerRole.Hub} layer={ControllerRole.Character} pageNum={currentPageIdx} + isShown={hubState === HubState.DrawingSession} offsetWidth={canvasOffsetWidth} setCursor={setCharacterCursor} setTextShapes={setCharacterTextShapes} @@ -595,6 +597,7 @@ export default function HubCanvasPage() { role={ControllerRole.Hub} layer={ControllerRole.Background} pageNum={currentPageIdx} + isShown={hubState === HubState.DrawingSession} offsetWidth={canvasOffsetWidth} setCursor={setBackgroundCursor} setTextShapes={setBackgroundTextShapes} From a9120036929143834615c3b66e83a6556a19b148 Mon Sep 17 00:00:00 2001 From: Nicolaus Gozali Date: Fri, 24 Sep 2021 20:45:00 +1000 Subject: [PATCH 5/9] fix: screen height change adjust canvas dimension --- fableous-fe/src/components/canvas/Canvas.tsx | 13 +++++++------ fableous-fe/src/components/canvas/CursorScreen.tsx | 12 ++++++------ fableous-fe/src/containers/ControllerCanvasPage.tsx | 2 ++ fableous-fe/src/containers/HubCanvasPage.tsx | 6 ++++++ fableous-fe/src/containers/StoryDetailPage.tsx | 2 ++ 5 files changed, 23 insertions(+), 12 deletions(-) diff --git a/fableous-fe/src/components/canvas/Canvas.tsx b/fableous-fe/src/components/canvas/Canvas.tsx index 4e9d2150..c39d2937 100644 --- a/fableous-fe/src/components/canvas/Canvas.tsx +++ b/fableous-fe/src/components/canvas/Canvas.tsx @@ -41,7 +41,8 @@ interface CanvasProps { pageNum: number; isGallery?: boolean; isShown?: boolean; - offsetWidth?: number; + offsetWidth: number; + offsetHeight: number; setCursor?: React.Dispatch; textShapes: TextShapeMap; setTextShapes: React.Dispatch>; @@ -58,7 +59,6 @@ interface CanvasProps { const defaultProps = { isGallery: false, isShown: true, - offsetWidth: 0, setCursor: undefined, toolColor: "#000000ff", toolMode: ToolMode.None, @@ -83,7 +83,8 @@ const Canvas = forwardRef( pageNum, isGallery, isShown, - offsetWidth = defaultProps.offsetWidth, + offsetWidth, + offsetHeight, setCursor, setTextShapes, textShapes, @@ -786,9 +787,8 @@ const Canvas = forwardRef( 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 @@ -925,6 +925,7 @@ const Canvas = forwardRef( style={{ borderWidth: 4, width: offsetWidth, + height: offsetHeight, borderRadius: "30px", // 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 index a7c0b91c..5d6a1e7a 100644 --- a/fableous-fe/src/components/canvas/CursorScreen.tsx +++ b/fableous-fe/src/components/canvas/CursorScreen.tsx @@ -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(document.createElement("canvas")); const cursorRef = useRef(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"; @@ -123,6 +123,7 @@ const CursorScreen = (props: CursorScreenProps) => { borderColor: "blue", borderRadius: "30px", width: offsetWidth, + height: offsetHeight, touchAction: "none", msTouchAction: "none", msTouchSelect: "none", @@ -140,7 +141,6 @@ const CursorScreen = (props: CursorScreenProps) => { CursorScreen.defaultProps = { name: "", isShown: true, - offsetWidth: 0, }; export default CursorScreen; diff --git a/fableous-fe/src/containers/ControllerCanvasPage.tsx b/fableous-fe/src/containers/ControllerCanvasPage.tsx index bffc0d79..17156ac4 100644 --- a/fableous-fe/src/containers/ControllerCanvasPage.tsx +++ b/fableous-fe/src/containers/ControllerCanvasPage.tsx @@ -434,6 +434,7 @@ export default function ControllerCanvasPage() { cursor={cursor} isShown={controllerState === ControllerState.DrawingSession} offsetWidth={canvasOffsetWidth} + offsetHeight={canvasOffsetHeight} />
Date: Fri, 24 Sep 2021 21:04:59 +1000 Subject: [PATCH 6/9] fix: hide scrollbar on layer toolbar --- fableous-fe/src/components/canvas/LayerToolbar.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/fableous-fe/src/components/canvas/LayerToolbar.tsx b/fableous-fe/src/components/canvas/LayerToolbar.tsx index aa4437a3..fda8d111 100644 --- 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 ( -
+
Date: Fri, 24 Sep 2021 21:16:21 +1000 Subject: [PATCH 7/9] fix: height of drawing session container so not scrollable --- .../src/containers/ControllerCanvasPage.tsx | 298 +++++++++--------- fableous-fe/src/containers/HubCanvasPage.tsx | 4 +- 2 files changed, 151 insertions(+), 151 deletions(-) diff --git a/fableous-fe/src/containers/ControllerCanvasPage.tsx b/fableous-fe/src/containers/ControllerCanvasPage.tsx index bf5f16e7..b25b106b 100644 --- a/fableous-fe/src/containers/ControllerCanvasPage.tsx +++ b/fableous-fe/src/containers/ControllerCanvasPage.tsx @@ -488,166 +488,166 @@ export default function ControllerCanvasPage() { )} -
- - - , -
- {(storyDetails?.description.split(",") || []).map((tag) => ( - - ))} -
, - - {ROLE_ICON[role].icon} - - } - label={ROLE_ICON[role].text} - style={{ color: colors.orange.main }} - />, - ]} - /> - +
+
+ + + , +
+ {(storyDetails?.description.split(",") || []).map((tag) => ( + + ))} +
, + + {ROLE_ICON[role].icon} + + } + label={ROLE_ICON[role].text} + style={{ color: colors.orange.main }} + />, + ]} + /> - - - - - + + + + + + +
+ +
+
+ setIsDone(false)} + setCursor={setCursor} + textShapes={textShapes} + setTextShapes={setTextShapes} + audioPaths={audioPaths} + setAudioPaths={setAudioPaths} + toolColor={toolColor} + toolMode={toolMode} + setToolMode={setToolMode} + toolWidth={toolWidth} + offsetWidth={canvasOffsetWidth} + offsetHeight={canvasOffsetHeight} + /> +
+
- -
-
- setIsDone(false)} - setCursor={setCursor} - textShapes={textShapes} - setTextShapes={setTextShapes} - audioPaths={audioPaths} - setAudioPaths={setAudioPaths} - toolColor={toolColor} - toolMode={toolMode} - setToolMode={setToolMode} - toolWidth={toolWidth} - offsetWidth={canvasOffsetWidth} - offsetHeight={canvasOffsetHeight} - /> -
-
-
-
+ />
- +
- - - , - { - icon: pan_tool, - label: "Help", - onClick: handleHelp, - disabled: helpCooldown, - } as ChipProps, - { - icon: ( - - check_circle - - ), - label: "Done", - onClick: handleDone, - } as ChipProps, - ]} - /> - + + + + , + { + icon: pan_tool, + label: "Help", + onClick: handleHelp, + disabled: helpCooldown, + } as ChipProps, + { + icon: ( + + check_circle + + ), + label: "Done", + onClick: handleDone, + } as ChipProps, + ]} + /> -
+
); diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index f48c6b8e..a39e8eb3 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -701,8 +701,8 @@ export default function HubCanvasPage() { hubState !== HubState.DrawingSession && "invisible" }`} style={{ - // 64px navbar height and 20px content top padding - height: "calc(100vh - 84px)", + // 64px navbar height, 20px content top padding, 48px content bot padding + height: "calc(100vh - 132px)", gridRowStart: 1, gridColumnStart: 1, }} From dec96822cfe366beb780d9dec80c5339e7e35d36 Mon Sep 17 00:00:00 2001 From: Nicolaus Gozali Date: Fri, 24 Sep 2021 21:34:41 +1000 Subject: [PATCH 8/9] fix: center canvas on chrome mobile android --- fableous-fe/src/components/canvas/Canvas.tsx | 2 +- fableous-fe/src/components/canvas/CursorScreen.tsx | 2 +- fableous-fe/src/containers/ControllerCanvasPage.tsx | 2 +- fableous-fe/src/containers/HubCanvasPage.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/fableous-fe/src/components/canvas/Canvas.tsx b/fableous-fe/src/components/canvas/Canvas.tsx index af09a997..7ad8b570 100644 --- a/fableous-fe/src/components/canvas/Canvas.tsx +++ b/fableous-fe/src/components/canvas/Canvas.tsx @@ -908,7 +908,7 @@ const Canvas = forwardRef( return (
{ return (
Date: Fri, 24 Sep 2021 22:36:51 +1000 Subject: [PATCH 9/9] fix: canvas height can shrink --- fableous-fe/src/components/canvas/Canvas.tsx | 11 +++++++---- fableous-fe/src/components/canvas/CursorScreen.tsx | 13 ++++++++----- fableous-fe/src/containers/ControllerCanvasPage.tsx | 6 ++++-- fableous-fe/src/containers/HubCanvasPage.tsx | 5 +++-- 4 files changed, 22 insertions(+), 13 deletions(-) diff --git a/fableous-fe/src/components/canvas/Canvas.tsx b/fableous-fe/src/components/canvas/Canvas.tsx index 7ad8b570..c1595df5 100644 --- 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( className="relative place-self-center" style={{ width: offsetWidth, - height: offsetWidth * ASPECT_RATIO, + // -1 so height can shrink + height: offsetHeight - 1, + maxHeight: "100%", }} > ( 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 index 1988e8cd..d5c3dc9d 100644 --- 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 (
diff --git a/fableous-fe/src/containers/HubCanvasPage.tsx b/fableous-fe/src/containers/HubCanvasPage.tsx index 36c8e54a..7efa3da6 100644 --- a/fableous-fe/src/containers/HubCanvasPage.tsx +++ b/fableous-fe/src/containers/HubCanvasPage.tsx @@ -698,7 +698,7 @@ export default function HubCanvasPage() {