From 31573cc0d7c8be1d9cdfca283e622400d9daf914 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Mon, 31 Oct 2022 01:39:09 +0000
Subject: [PATCH] fix: margin and mobile scale
---
examples/web/react/app.css | 10 ++++++++++
examples/web/react/app.tsx | 2 +-
.../components/button-container/button-container.css | 5 +++++
examples/web/react/components/display/display.tsx | 10 ++++++++--
4 files changed, 24 insertions(+), 3 deletions(-)
diff --git a/examples/web/react/app.css b/examples/web/react/app.css
index 26a7e3d7..f666378e 100644
--- a/examples/web/react/app.css
+++ b/examples/web/react/app.css
@@ -3,3 +3,13 @@
font-family: VT323, Roboto, Open Sans, Arial, Helvetica, sans-serif;
margin: 0px 0px 0px 0px;
}
+
+.app .display-container {
+ margin-top: 78px;
+}
+
+@media only screen and (max-width: 1120px) {
+ .app .display-container {
+ margin-top: 0px;
+ }
+}
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index 45e7b722..409f6820 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -334,7 +334,7 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
</Footer>
<PanelSplit
left={
- <div style={{ marginTop: 78 }}>
+ <div className="display-container">
<Display
fullscreen={fullscreen}
onDrawHandler={onDrawHandler}
diff --git a/examples/web/react/components/button-container/button-container.css b/examples/web/react/components/button-container/button-container.css
index eb4dc7f3..6bf22e66 100644
--- a/examples/web/react/components/button-container/button-container.css
+++ b/examples/web/react/components/button-container/button-container.css
@@ -1,5 +1,10 @@
+.button-container {
+ margin-bottom: -12px;
+}
+
.button-container > * {
margin-right: 8px;
+ margin-bottom: 12px;
}
.button-container > *:last-child {
diff --git a/examples/web/react/components/display/display.tsx b/examples/web/react/components/display/display.tsx
index 818ed142..2ab8bdff 100644
--- a/examples/web/react/components/display/display.tsx
+++ b/examples/web/react/components/display/display.tsx
@@ -77,13 +77,16 @@ export const Display: FC<DisplayProps> = ({
});
useEffect(() => {
- if (canvasRef.current && !canvasContentsRef.current) {
+ if (canvasRef.current) {
canvasContentsRef.current = initCanvas(
options.logicWidth,
options.logicHeight,
canvasRef.current
);
}
+ }, [canvasRef, options.scale]);
+
+ useEffect(() => {
if (fullscreen) {
resizeRef.current();
document.getElementsByTagName("body")[0].style.overflow = "hidden";
@@ -96,7 +99,7 @@ export const Display: FC<DisplayProps> = ({
.style.removeProperty("overflow");
window.removeEventListener("resize", resizeRef.current);
}
- }, [canvasRef, fullscreen]);
+ }, [fullscreen]);
if (onDrawHandler) {
onDrawHandler((pixels, format) => {
@@ -161,6 +164,9 @@ const initCanvas = (
);
const videoBuffer = new DataView(imageData.data.buffer);
+ // initializes the visual canvas (where data is going to be written)
+ // with, resetting the transform vector to the identity and re-calculating
+ // the scale of the drawing properly
const canvasCtx = canvas.getContext("2d")!;
canvasCtx.setTransform(1, 0, 0, 1, 0, 0);
canvasCtx.scale(
--
GitLab