From 0cf0232a99861b513387dc6a8327d3108bf56cca Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Fri, 16 May 2025 14:14:37 +0100 Subject: [PATCH 1/8] Updated the rotation for readback widget --- src/ui/widgets/Readback/readback.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/ui/widgets/Readback/readback.tsx b/src/ui/widgets/Readback/readback.tsx index 96dcfeb0..df755650 100644 --- a/src/ui/widgets/Readback/readback.tsx +++ b/src/ui/widgets/Readback/readback.tsx @@ -192,10 +192,19 @@ export const ReadbackComponent = ( const inputHeight = rotationStep === 0 || rotationStep === 2 ? height : width; const offset = width / 2 - height / 2; - const transform = - rotationStep === 1 || rotationStep === 3 - ? `rotate(${rotationStep * -90}deg) translateY(${offset}px) translateX(${offset}px)` - : `rotate(${rotationStep * -90}deg)`; + const transform = (function () { + switch (rotationStep) { + case 0: // 0 degrees + case 2: // 180 degrees + return `rotate(${rotationStep * -90}deg)`; + case 1: // 90 degrees + return `rotate(${rotationStep * -90}deg) translateY(${offset}px) translateX(${offset}px)`; + case 3: // -90 degrees + return `rotate(${rotationStep * -90}deg) translateY(${-offset}px) translateX(${-offset}px)`; + default: // Unreachable + return ""; + } + })(); // Calculate max number of rows based on the height of the widget and the height of the font // an extra row is then subtracted to make it fit nicer From e28dd44f893cc2f774ef6b0ca7443cd380d00b8e Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Fri, 16 May 2025 14:15:53 +0100 Subject: [PATCH 2/8] Updated rotation for actionbutton --- src/ui/widgets/ActionButton/actionButton.tsx | 93 +++++++++++++------- 1 file changed, 61 insertions(+), 32 deletions(-) diff --git a/src/ui/widgets/ActionButton/actionButton.tsx b/src/ui/widgets/ActionButton/actionButton.tsx index dbf05ce6..c5496ef4 100644 --- a/src/ui/widgets/ActionButton/actionButton.tsx +++ b/src/ui/widgets/ActionButton/actionButton.tsx @@ -23,29 +23,47 @@ import { ExitFileContext, FileContext } from "../../../misc/fileContext"; import { styled, Button as MuiButton } from "@mui/material"; import { diamondTheme } from "../../../diamondTheme"; +import { WIDGET_DEFAULT_SIZES } from "../EmbeddedDisplay/bobParser"; export interface ActionButtonProps { - text: string; + // text: string; enabled?: boolean; onClick: (event: React.MouseEvent) => void; - image?: string; - backgroundColor?: Color; - foregroundColor?: Color; - border?: Border; - font?: Font; - actions?: WidgetActions; - visible?: boolean; - rotationStep?: number; - transparent?: boolean; + // image?: string; + // backgroundColor?: Color; + // foregroundColor?: Color; + // border?: Border; + // font?: Font; + // actions?: WidgetActions; + // visible?: boolean; + // rotationStep?: number; + // transparent?: boolean; + // width?: number; + // height?: number; } +const ActionButtonPropType = { + text: StringPropOpt, + actions: ActionsPropType, + image: StringPropOpt, + backgroundColor: ColorPropOpt, + foregroundColor: ColorPropOpt, + font: FontPropOpt, + border: BorderPropOpt, + visible: BoolPropOpt, + enabled: BoolPropOpt, + onClick: FuncPropOpt, + transparent: BoolPropOpt, + rotationStep: FloatPropOpt, + height: FloatPropOpt, + width: FloatPropOpt +}; + const Button = styled(MuiButton)({ "&.MuiButton-root": { display: "block", alignItems: "center", justifyContent: "center", - height: "100%", - width: "100%", minWidth: 0, minHeight: 0, padding: 0, @@ -61,13 +79,15 @@ const Button = styled(MuiButton)({ }); export const ActionButtonComponent = ( - props: ActionButtonProps + props: InferWidgetProps & ActionButtonProps ): JSX.Element => { const { enabled = true, foregroundColor = diamondTheme.palette.primary.contrastText, rotationStep = 0, - transparent = false + transparent = false, + height = WIDGET_DEFAULT_SIZES["action_button"][1], + width = WIDGET_DEFAULT_SIZES["action_button"][0] } = props; const backgroundColor = transparent @@ -76,16 +96,39 @@ export const ActionButtonComponent = ( const font = props.font?.css() ?? diamondTheme.typography; const border = props.border?.css() ?? null; + const inputWidth = rotationStep === 0 || rotationStep === 2 ? width : height; + const inputHeight = rotationStep === 0 || rotationStep === 2 ? height : width; + + const offset = width / 2 - height / 2; + const transform = (function () { + switch (rotationStep) { + case 0: // 0 degrees + case 2: // 180 degrees + return `rotate(${rotationStep * -90}deg)`; + case 1: // 90 degrees + return `rotate(${rotationStep * -90}deg) translateY(${offset}px) translateX(${offset}px)`; + case 3: // -90 degrees + return `rotate(${rotationStep * -90}deg) translateY(${-offset}px) translateX(${-offset}px)`; + default: // Unreachable + return ""; + } + })(); + return (