From 30b0a2c75634eabae17200d5111c9a90c01b46b0 Mon Sep 17 00:00:00 2001
From: Thomas Sparks <thsparks@microsoft.com>
Date: Wed, 18 Oct 2023 15:38:42 -0700
Subject: [PATCH] Match text scale to zoom percent from the editor

---
 pxteditor/editor.ts      |  1 +
 webapp/src/app.tsx       | 13 ++++++-------
 webapp/src/blocks.tsx    |  5 +++++
 webapp/src/monaco.tsx    |  5 +++++
 webapp/src/srceditor.tsx |  1 +
 5 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/pxteditor/editor.ts b/pxteditor/editor.ts
index 32d2815a9e9..4f763766ab5 100644
--- a/pxteditor/editor.ts
+++ b/pxteditor/editor.ts
@@ -14,6 +14,7 @@ namespace pxt.editor {
         zoomIn(): void;
         zoomOut(): void;
         resize(): void;
+        getMaxScale(): number;
         setScale(scale: number): void;
         onScaleChanged: (oldScale: number, newScale: number) => void;
     }
diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
index 6b7646d6cfd..d14ae8dcf7a 100644
--- a/webapp/src/app.tsx
+++ b/webapp/src/app.tsx
@@ -153,8 +153,8 @@ export class ProjectView
     private pendingImport: pxt.Util.DeferredPromise<void>;
 
     private initialEditorScale: number;
-    private tutorialFontIncrement = 0.25;
     private tutorialInitialFontSize = 1.125; // rem
+    private tutorialMaxFontSize = 2; // rem
 
     private highContrastSubscriber: data.DataSubscriber = {
         subscriptions: [],
@@ -1550,12 +1550,11 @@ export class ProjectView
                 // Do not shrink the text beyond its initial size.
                 this.setState({tutorialFontSize: this.tutorialInitialFontSize});
             } else {
-                const change = newScale > oldScale ? this.tutorialFontIncrement : -this.tutorialFontIncrement;
-                if (!this.state.tutorialFontSize) {
-                    this.setState({ tutorialFontSize: this.tutorialInitialFontSize + change });
-                } else {
-                    this.setState({ tutorialFontSize:  this.state.tutorialFontSize + change });
-                }
+                // Increase font size to match the editor's % zoom.
+                const maxEditorScale = this.editor.getMaxScale();
+                const zoomAmt = (newScale - this.initialEditorScale) / (maxEditorScale - this.initialEditorScale);
+                const newTutorialFontSize = this.tutorialInitialFontSize + (this.tutorialMaxFontSize - this.tutorialInitialFontSize) * zoomAmt;
+                this.setState({ tutorialFontSize: newTutorialFontSize });
             }
         }
     }
diff --git a/webapp/src/blocks.tsx b/webapp/src/blocks.tsx
index 4571c03997e..2347f5d6ea8 100644
--- a/webapp/src/blocks.tsx
+++ b/webapp/src/blocks.tsx
@@ -766,6 +766,11 @@ export class Editor extends toolboxeditor.ToolboxEditor {
         this.editor.zoomCenter(-0.8);
     }
 
+    getMaxScale() {
+        if (!this.editor) return undefined;
+        return this.editor.options.zoomOptions.maxScale;
+    }
+
     setScale(scale: number) {
         if (!this.editor) return;
         if (scale != this.editor.scale) {
diff --git a/webapp/src/monaco.tsx b/webapp/src/monaco.tsx
index da8aa34b294..f1528f89468 100644
--- a/webapp/src/monaco.tsx
+++ b/webapp/src/monaco.tsx
@@ -1208,6 +1208,11 @@ export class Editor extends toolboxeditor.ToolboxEditor {
         }
     }
 
+    getMaxScale() {
+        if (!this.editor) return undefined;
+        return MAX_EDITOR_FONT_SIZE;
+    }
+
     private loadReference() {
         Util.assert(this.editor != undefined); // Guarded
 
diff --git a/webapp/src/srceditor.tsx b/webapp/src/srceditor.tsx
index da5ef7c41ba..4db7e9adb03 100644
--- a/webapp/src/srceditor.tsx
+++ b/webapp/src/srceditor.tsx
@@ -87,6 +87,7 @@ export class Editor implements pxt.editor.IEditor {
 
     zoomIn() { }
     zoomOut() { }
+    getMaxScale() { return 1; }
     setScale(scale: number) { }
 
     closeFlyout() { }