✨ Use useWindowSize in canvas components

Jerrylum · Jul 5, 2023 · 455034b · 455034b
1 parent 0d10708
commit 455034b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/src/app/FieldCanvasElement.tsx b/src/app/FieldCanvasElement.tsx
@@ -12,7 +12,7 @@ import { ControlElement } from "./ControlElement";
 import { AreaElement } from "./AreaElement";
 import { UnitConverter, UnitOfLength } from "../core/Unit";
 import { FieldCanvasConverter } from "../core/Canvas";
-import { clamp } from "../core/Util";
+import { clamp, useWindowSize } from "../core/Util";
 import { AddPath, AddSegment } from "../core/Command";
 import { useAppStores } from "../core/MainApp";
 import { RobotElement } from "./RobotElement";
@@ -73,8 +73,13 @@ const PathControls = observer((props: { path: Path; fcc: FieldCanvasConverter; i
 const FieldCanvasElement = observer((props: {}) => {
   const { app } = useAppStores();
 
+  const windowSize = useWindowSize((newSize: Vector, oldSize: Vector) => {
+    const ratio = (newSize.y + oldSize.y) / 2 / oldSize.y;
+    app.fieldOffset = app.fieldOffset.multiply(new Vector(ratio, ratio));
+  });
+
   const uc = new UnitConverter(UnitOfLength.Foot, app.gc.uol);
-  const canvasSizeInPx = window.innerHeight * (app.view.showSpeedCanvas ? 0.78 : 0.94);
+  const canvasSizeInPx = windowSize.y * (app.view.showSpeedCanvas ? 0.78 : 0.94);
   const canvasSizeInUOL = uc.fromAtoB(12);
 
   const paths = app.paths;

diff --git a/src/app/GraphCanvasElement.tsx b/src/app/GraphCanvasElement.tsx
@@ -5,7 +5,7 @@ import Konva from "konva";
 import { Circle, Layer, Line, Rect, Stage, Text } from "react-konva";
 import React from "react";
 import { PathConfig } from "../format/Config";
-import { clamp } from "../core/Util";
+import { clamp, useWindowSize } from "../core/Util";
 import { AddKeyframe, MoveKeyframe, RemoveKeyframe, UpdateProperties } from "../core/Command";
 import { useAppStores } from "../core/MainApp";
 import { KeyframeIndexing } from "../core/Calculation";
@@ -131,6 +131,8 @@ const KeyframeElement = observer((props: { ikf: KeyframeIndexing; gcc: GraphCanv
 const GraphCanvasElement = observer((props: {}) => {
   const { app, appPreferences: preferences } = useAppStores();
 
+  const windowSize = useWindowSize();
+
   const [xOffset, setXOffset] = React.useState(0);
 
   const path = app.interestedPath();
@@ -141,8 +143,8 @@ const GraphCanvasElement = observer((props: {}) => {
 
   if (path === undefined) return null;
 
-  const canvasWidth = window.innerHeight * 0.78;
-  const canvasHeight = window.innerHeight * 0.12;
+  const canvasWidth = windowSize.y * 0.78;
+  const canvasHeight = windowSize.y * 0.12;
   const gcc = new GraphCanvasConverter(canvasWidth, canvasHeight, xOffset, path);
 
   const fontSize = canvasHeight / 8;