Scale tutorial text with editor zoom.

microsoft · Oct 18, 2023 · 462f987 · 462f987
1 parent 9d77d60
commit 462f987
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 6 deletions.
diff --git a/pxteditor/editor.ts b/pxteditor/editor.ts
@@ -15,6 +15,7 @@ namespace pxt.editor {
         zoomOut(): void;
         resize(): void;
         setScale(scale: number): void;
+        onScaleChanged: (oldScale: number, newScale: number) => void;
     }
 
     export interface IFile {
@@ -102,6 +103,7 @@ namespace pxt.editor {
         extensionsVisible?: boolean;
         isMultiplayerGame?: boolean; // Arcade: Does the current project contain multiplayer blocks?
         onboarding?: pxt.tour.BubbleStep[];
+        tutorialFontSize?: number;
     }
 
     export interface EditorState {

diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
@@ -211,6 +211,7 @@ export class ProjectView
         this.exitTutorial = this.exitTutorial.bind(this);
         this.setEditorOffset = this.setEditorOffset.bind(this);
         this.resetTutorialTemplateCode = this.resetTutorialTemplateCode.bind(this);
+        this.onScaleChanged = this.onScaleChanged.bind(this);
         this.initSimulatorMessageHandlers();
 
         // add user hint IDs and callback to hint manager
@@ -1029,6 +1030,8 @@ export class ProjectView
         }
         this.allEditors = [this.pxtJsonEditor, this.gitjsonEditor, this.blocksEditor, this.serialEditor, this.assetEditor, this.textEditor]
         this.allEditors.forEach(e => e.changeCallback = changeHandler)
+        this.allEditors.forEach(e => e.onScaleChanged = this.onScaleChanged)
+
         this.editor = this.allEditors[this.allEditors.length - 1]
     }
 
@@ -1532,6 +1535,20 @@ export class ProjectView
         }
     }
 
+    zoomIncrement = 0.25; // TODO thsparks : move up.
+    initialFontSize = 1.125; // TODO thsparks : move up. Can this reference the css?
+
+    onScaleChanged(oldScale: number, newScale: number) {
+        if (this.isTutorial && oldScale !== newScale) {
+            const change = newScale > oldScale ? this.zoomIncrement : -this.zoomIncrement;
+            if (!this.state.tutorialFontSize) {
+                this.setState({ tutorialFontSize: this.initialFontSize + change });
+            } else {
+                this.setState({ tutorialFontSize:  this.state.tutorialFontSize + change });
+            }
+        }
+    }
+
     ///////////////////////////////////////////////////////////
     ////////////           Load header            /////////////
     ///////////////////////////////////////////////////////////
@@ -5110,6 +5127,7 @@ export class ProjectView
                     {flyoutOnly && <tutorial.WorkspaceHeader parent={this} />}
                 </div>}
                 <sidepanel.Sidepanel parent={this} inHome={inHome}
+                    fontSize={this.state.tutorialFontSize}
                     showKeymap={this.state.keymap && simOpts.keymap}
                     showSerialButtons={useSerialEditor}
                     showFileList={showFileList}

diff --git a/webapp/src/blocks.tsx b/webapp/src/blocks.tsx
@@ -31,6 +31,7 @@ export class Editor extends toolboxeditor.ToolboxEditor {
     compilationResult: pxt.blocks.BlockCompilationResult;
     isFirstBlocklyLoad = true;
     functionsDialog: CreateFunctionDialog = null;
+    onScaleChanged: (oldScale: number, newScale: number) => void;
 
     showCategories: boolean = true;
     breakpointsByBlock: pxt.Map<number>; // Map block id --> breakpoint ID
@@ -48,6 +49,10 @@ export class Editor extends toolboxeditor.ToolboxEditor {
 
     public nsMap: pxt.Map<toolbox.BlockDefinition[]>;
 
+    // Blockly fires a scale event when it loads, but the user hasn't actually changed the scale.
+    // We use this flag to ignore that initial event.
+    private initialScaleSet: boolean = false;
+
     constructor(parent: pxt.editor.IProjectView) {
         super(parent);
 
@@ -581,7 +586,6 @@ export class Editor extends toolboxeditor.ToolboxEditor {
                 Blockly.Events.UI,
                 Blockly.Events.SELECTED,
                 Blockly.Events.CLICK,
-                Blockly.Events.VIEWPORT_CHANGE,
                 Blockly.Events.BUBBLE_OPEN
             ];
 
@@ -636,6 +640,15 @@ export class Editor extends toolboxeditor.ToolboxEditor {
                     }
                 }
             }
+            else if (ev.type === Blockly.Events.VIEWPORT_CHANGE) {
+                const viewportChangeEvent = ev as Blockly.Events.ViewportChange;
+                if (this.initialScaleSet && viewportChangeEvent.oldScale !== viewportChangeEvent.scale) {
+                    if (this.onScaleChanged) {
+                        this.onScaleChanged(viewportChangeEvent.oldScale, viewportChangeEvent.scale);
+                    }
+                }
+                this.initialScaleSet = true;
+            }
 
             // reset tutorial hint animation on any blockly event
             if (this.parent.state.tutorialOptions != undefined) {

diff --git a/webapp/src/components/tutorial/TutorialContainer.tsx b/webapp/src/components/tutorial/TutorialContainer.tsx
@@ -21,6 +21,7 @@ interface TutorialContainerProps {
     hasTemplate?: boolean;
     preferredEditor?: string;
     hasBeenResized?: boolean;
+    fontSize?: number;
 
     tutorialOptions?: pxt.tutorial.TutorialOptions; // TODO (shakao) pass in only necessary subset
     tutorialSimSidebar?: boolean;
@@ -35,7 +36,7 @@ const MAX_HEIGHT = 194;
 
 export function TutorialContainer(props: TutorialContainerProps) {
     const { parent, tutorialId, name, steps, hideIteration, hasTemplate,
-        preferredEditor, tutorialOptions, onTutorialStepChange, onTutorialComplete,
+        preferredEditor, tutorialOptions, fontSize, onTutorialStepChange, onTutorialComplete,
         setParentHeight } = props;
     const [ currentStep, setCurrentStep ] = React.useState(props.currentStep || 0);
     const [ stepErrorAttemptCount, setStepErrorAttemptCount ] = React.useState(0);
@@ -250,7 +251,7 @@ export function TutorialContainer(props: TutorialContainerProps) {
 
     return <div className="tutorial-container">
         {!isHorizontal && stepCounter}
-        <div className={classList("tutorial-content", hasHint && "has-hint")} ref={contentRef} onScroll={updateScrollGradient}>
+        <div className={classList("tutorial-content", hasHint && "has-hint")} ref={contentRef} onScroll={updateScrollGradient} style={{fontSize: `${fontSize || 1.125}rem`}}>
             <div className={"tutorial-content-bkg"}>
                 {!isHorizontal && <div className="tutorial-step-label">
                     {name && <span className="tutorial-step-title">{name}</span>}

diff --git a/webapp/src/monaco.tsx b/webapp/src/monaco.tsx
@@ -340,6 +340,7 @@ export class Editor extends toolboxeditor.ToolboxEditor {
     extraLibs: pxt.Map<monaco.IDisposable>;
     nsMap: pxt.Map<toolbox.BlockDefinition[]>;
     giveFocusOnLoading: boolean = true;
+    onScaleChanged: (oldScale: number, newScale: number) => void;
 
     protected fieldEditors: FieldEditorManager;
     protected feWidget: ViewZoneEditorHost | ModalEditorHost;
@@ -968,9 +969,13 @@ export class Editor extends toolboxeditor.ToolboxEditor {
             this.editor.onDidLayoutChange((e: monaco.editor.EditorLayoutInfo) => {
                 // Update editor font size in settings after a ctrl+scroll zoom
                 let currentFont = this.getEditorFontSize();
-                if (this.parent.settings.editorFontSize != currentFont) {
+                let prevFont = this.parent.settings.editorFontSize;
+                if (prevFont != currentFont) {
                     this.parent.settings.editorFontSize = currentFont;
                     this.forceDiagnosticsUpdate();
+                    if(this.onScaleChanged) {
+                        this.onScaleChanged(prevFont, currentFont);
+                    }
                 }
                 // Update widgets
                 const toolbox = document.getElementById('monacoToolboxDiv');
@@ -1184,6 +1189,10 @@ export class Editor extends toolboxeditor.ToolboxEditor {
         this.parent.settings.editorFontSize = currentFont + 1;
         this.editor.updateOptions({ fontSize: this.parent.settings.editorFontSize });
         this.forceDiagnosticsUpdate();
+
+        if (this.onScaleChanged) {
+            this.onScaleChanged(currentFont, this.parent.settings.editorFontSize);
+        }
     }
 
     zoomOut() {
@@ -1193,6 +1202,10 @@ export class Editor extends toolboxeditor.ToolboxEditor {
         this.parent.settings.editorFontSize = currentFont - 1;
         this.editor.updateOptions({ fontSize: this.parent.settings.editorFontSize });
         this.forceDiagnosticsUpdate();
+
+        if (this.onScaleChanged) {
+            this.onScaleChanged(currentFont, this.parent.settings.editorFontSize);
+        }
     }
 
     private loadReference() {

diff --git a/webapp/src/sidepanel.tsx b/webapp/src/sidepanel.tsx
@@ -31,6 +31,7 @@ interface SidepanelProps extends pxt.editor.ISettingsProps {
     deviceSerialActive?: boolean;
     tutorialOptions?: pxt.tutorial.TutorialOptions;
     tutorialSimSidebar?: boolean;
+    fontSize?: number;
     onTutorialStepChange?: (step: number) => void;
     onTutorialComplete?: () => void;
     setEditorOffset?: () => void;
@@ -148,9 +149,12 @@ export class Sidepanel extends data.Component<SidepanelProps, SidepanelState> {
         const shouldResize = pxt.BrowserUtils.isTabletSize() || this.props.tutorialSimSidebar;
         const editorSidebarHeight = shouldResize ? `${this.state.height}px` : undefined;
 
+        // TODO thsparks : Is this one even necessary?
+        let editorSidebarStyle = this.props.tutorialSimSidebar ? undefined : {height: editorSidebarHeight, fontSize: `${this.props.fontSize}rem`}
+
         return <div id="simulator" className="simulator">
             {!hasSimulator && <div id="boardview" className="headless-sim" role="region" aria-label={lf("Simulator")} tabIndex={-1} />}
-            <div id="editorSidebar" className="editor-sidebar" style={!this.props.tutorialSimSidebar ? { height: editorSidebarHeight } : undefined}>
+            <div id="editorSidebar" className="editor-sidebar" style={editorSidebarStyle}>
                 <div className={simContainerClassName}>
                     <div className={`ui items simPanel ${showHostMultiplayerGameButton ? "multiplayer-preview" : ""}`} ref={this.handleSimPanelRef}>
                         <div id="boardview" className="ui vertical editorFloat" role="region" aria-label={lf("Simulator")} tabIndex={inHome ? -1 : 0} />
@@ -203,7 +207,8 @@ export class Sidepanel extends data.Component<SidepanelProps, SidepanelState> {
                             hasBeenResized={this.state.resized && shouldResize}
                             onTutorialStepChange={onTutorialStepChange}
                             onTutorialComplete={onTutorialComplete}
-                            setParentHeight={newSize => this.setComponentHeight(newSize, false)} />
+                            setParentHeight={newSize => this.setComponentHeight(newSize, false)}
+                            fontSize={this.props.fontSize} />
                     </VerticalResizeContainer>
                 </div>}
         </div>

diff --git a/webapp/src/srceditor.tsx b/webapp/src/srceditor.tsx
@@ -14,6 +14,7 @@ export class Editor implements pxt.editor.IEditor {
     isVisible = false;
     constructor(public parent: ProjectView) {
     }
+    onScaleChanged: (oldScale: number, newScale: number) => void;
     changeCallback = () => { };
     setVisible(v: boolean) {
         this.isVisible = v;