Match text scale to zoom percent from the editor

microsoft · Oct 18, 2023 · 30b0a2c · 30b0a2c
1 parent c7f0bdc
commit 30b0a2c
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -87,6 +87,7 @@ export class Editor implements pxt.editor.IEditor {
 
     zoomIn() { }
     zoomOut() { }
+    getMaxScale() { return 1; }
     setScale(scale: number) { }
 
     closeFlyout() { }