Zoom control bar

index.html

@@ -1339,6 +1339,45 @@ <h2 id="modal-title" data-i18n="about_heading">
               Drag and drop code blocks to create your program. Use arrow keys
               and Enter to navigate and interact with blocks.
             </div>
+            <div
+              id="blocklyZoomControls"
+              role="toolbar"
+              aria-label="Workspace controls"
+            >
+              <button class="bigbutton" id="undoBtn" aria-label="Undo" title="Undo" data-i18n="toolbar_undo" data-i18n-attrs="title,aria-label">
+                <div class="icon" aria-hidden="true">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                    <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+                    <path fill="currentColor" d="M48.5 224H40c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.8 87.8 87.8 230.2 0 318s-230.2 87.8-318 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H48.5z"/>
+                  </svg>
+                </div>
+              </button>
+              <button class="bigbutton" id="redoBtn" aria-label="Redo" title="Redo" data-i18n="toolbar_redo" data-i18n-attrs="title,aria-label">
+                <div class="icon" aria-hidden="true">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                    <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+                    <path fill="currentColor" d="M463.5 224H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.8 87.8-87.8 230.2 0 318s230.2 87.8 318 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5z"/>
+                  </svg>
+                </div>
+              </button>
+              <div class="toolbar-divider" aria-hidden="true"></div>
+              <button class="bigbutton" id="zoomOutBtn" aria-label="Zoom out" title="Zoom out" data-i18n="toolbar_zoom_out" data-i18n-attrs="title,aria-label">
+                <div class="icon" aria-hidden="true">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                    <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+                    <path fill="currentColor" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM136 184c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z"/>
+                  </svg>
+                </div>
+              </button>
+              <button class="bigbutton" id="zoomInBtn" aria-label="Zoom in" title="Zoom in" data-i18n="toolbar_zoom_in" data-i18n-attrs="title,aria-label">
+                <div class="icon" aria-hidden="true">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                    <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+                    <path fill="currentColor" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM184 296c0 13.3 10.7 24 24 24s24-10.7 24-24l0-64 64 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-64 0 0-64c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 64-64 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l64 0 0 64z"/>
+                  </svg>
+                </div>
+              </button>
+            </div>
           </section>
         </div>
       </main>

locale/de.js

@@ -1209,6 +1209,11 @@ export default {
   RightLeg_option: "Rechtes Schienbein",
   RightFoot_option: "Rechter Fuß",
 
+  // Workspace toolbar
+  toolbar_undo_ui: "Rückgängig",
+  toolbar_redo_ui: "Wiederholen",
+  toolbar_zoom_out_ui: "Verkleinern",
+  toolbar_zoom_in_ui: "Vergrößern",
   // Keyboard shortcuts panel — title and close button
   shortcut_panel_title: "Tastaturkürzel",
   shortcut_panel_close: "Tastaturkürzel schließen",

locale/en.js

@@ -1259,6 +1259,11 @@ export default {
   update_available_ui: "A new version of Flock is available.",
   reload_button_ui: "Reload",
 
+  // Workspace toolbar
+  toolbar_undo_ui: "Undo",
+  toolbar_redo_ui: "Redo",
+  toolbar_zoom_out_ui: "Zoom out",
+  toolbar_zoom_in_ui: "Zoom in",
   // Keyboard shortcuts panel — title and close button
   shortcut_panel_title: "Keyboard shortcuts",
   shortcut_panel_close: "Close keyboard shortcuts",

locale/es.js

@@ -1222,6 +1222,11 @@ export default {
   RightLeg_option: "Espinilla derecha", // human
   RightFoot_option: "Pie derecho", // human
 
+  // Workspace toolbar
+  toolbar_undo_ui: "Deshacer",
+  toolbar_redo_ui: "Rehacer",
+  toolbar_zoom_out_ui: "Alejar",
+  toolbar_zoom_in_ui: "Acercar",
   // Keyboard shortcuts panel — title and close button
   shortcut_panel_title: "Atajos de teclado",
   shortcut_panel_close: "Cerrar atajos de teclado",

locale/fr.js

@@ -1220,6 +1220,11 @@ export default {
   RightLeg_option: "Tibia droit",
   RightFoot_option: "Pied droit",
 
+  // Workspace toolbar
+  toolbar_undo_ui: "Annuler",
+  toolbar_redo_ui: "Rétablir",
+  toolbar_zoom_out_ui: "Dézoomer",
+  toolbar_zoom_in_ui: "Zoomer",
   // Keyboard shortcuts panel — title and close button
   shortcut_panel_title: "Raccourcis clavier",
   shortcut_panel_close: "Fermer les raccourcis clavier",

locale/it.js

@@ -1211,6 +1211,11 @@ export default {
   RightLeg_option: "Stinco destro",
   RightFoot_option: "Piede destro",
 
+  // Workspace toolbar
+  toolbar_undo_ui: "Annulla",
+  toolbar_redo_ui: "Ripeti",
+  toolbar_zoom_out_ui: "Riduci zoom",
+  toolbar_zoom_in_ui: "Aumenta zoom",
   // Keyboard shortcuts panel — title and close button
   shortcut_panel_title: "Scorciatoie da tastiera",
   shortcut_panel_close: "Chiudi le scorciatoie da tastiera",

locale/pl.js

@@ -1216,6 +1216,11 @@ export default {
   RightLeg_option: "Prawe podudzie",
   RightFoot_option: "Prawa stopa",
 
+  // Workspace toolbar
+  toolbar_undo_ui: "Cofnij",
+  toolbar_redo_ui: "Ponów",
+  toolbar_zoom_out_ui: "Oddal",
+  toolbar_zoom_in_ui: "Przybliż",
   // Keyboard shortcuts panel — title and close button
   shortcut_panel_title: "Skróty klawiaturowe",
   shortcut_panel_close: "Zamknij skróty klawiaturowe",

locale/pt.js

@@ -1208,6 +1208,11 @@ export default {
   RightLeg_option: "Canela direita",
   RightFoot_option: "Pé direito",
 
+  // Workspace toolbar
+  toolbar_undo_ui: "Desfazer",
+  toolbar_redo_ui: "Refazer",
+  toolbar_zoom_out_ui: "Reduzir zoom",
+  toolbar_zoom_in_ui: "Aumentar zoom",
   // Keyboard shortcuts panel — title and close button
   shortcut_panel_title: "Atalhos de teclado",
   shortcut_panel_close: "Fechar atalhos de teclado",

locale/sv.js

@@ -1198,6 +1198,11 @@ export default {
   RightLeg_option: "Höger smalben",
   RightFoot_option: "Höger fot",
 
+  // Workspace toolbar
+  toolbar_undo_ui: "Ångra",
+  toolbar_redo_ui: "Gör om",
+  toolbar_zoom_out_ui: "Zooma ut",
+  toolbar_zoom_in_ui: "Zooma in",
   // Keyboard shortcuts panel — title and close button
   shortcut_panel_title: "Tangentbordsgenvägar",
   shortcut_panel_close: "Stäng tangentbordsgenvägar",

main/accessibility.js

@@ -16,6 +16,12 @@ const AreaManager = {
     { selector: "#resizer", label: "5", pad: -3, name: "Resizer" },
     { selector: ".blocklyToolbox", label: "6", name: "Toolbox" },
     { selector: "svg.blocklySvg", label: "7", name: "Code editor" },
+    {
+      selector: "#blocklyZoomControls",
+      label: "8",
+      name: "Workspace controls",
+      extend: { top: -8 },
+    },
   ],
 
   init() {
@@ -133,11 +139,16 @@ const AreaManager = {
 
         const highlight = document.createElement("div");
         const pad = area.pad ?? 1;
+        const ext = area.extend ?? {};
+        const eTop = ext.top ?? 0;
+        const eBottom = ext.bottom ?? 0;
+        const eLeft = ext.left ?? 0;
+        const eRight = ext.right ?? 0;
         highlight.className = "area-outline";
-        highlight.style.top = `${rect.top - pad}px`;
-        highlight.style.left = `${rect.left - pad}px`;
-        highlight.style.width = `${rect.width + pad * 2}px`;
-        highlight.style.height = `${rect.height + pad * 2}px`;
+        highlight.style.top = `${rect.top - pad - eTop}px`;
+        highlight.style.left = `${rect.left - pad - eLeft}px`;
+        highlight.style.width = `${rect.width + pad * 2 + eLeft + eRight}px`;
+        highlight.style.height = `${rect.height + pad * 2 + eTop + eBottom}px`;
         container.appendChild(highlight);
       }
     });

main/input.js

@@ -130,6 +130,11 @@ export function setupInput() {
         pushUnique(workspaceGroup);
       }
 
+      // 6b) Workspace toolbar
+      ["#undoBtn", "#redoBtn", "#zoomOutBtn", "#zoomInBtn"].forEach((sel) =>
+        pushUnique(document.querySelector(sel)),
+      );
+
       // 7) Main UI controls (in natural order)
       [
         "#menuBtn",

main/main.js

@@ -587,6 +587,20 @@ function initializeApp() {
   stopCodeButton.addEventListener("click", stopCode);
   exportCodeButton.addEventListener("click", () => exportCode(workspace));
 
+  // Add toolbar buttons
+  const zoomInBtn = document.getElementById("zoomInBtn");
+  const zoomOutBtn = document.getElementById("zoomOutBtn");
+  const undoBtn = document.getElementById("undoBtn");
+  const redoBtn = document.getElementById("redoBtn");
+  if (zoomInBtn)
+    zoomInBtn.addEventListener("click", () => workspace.zoomCenter(1));
+  if (zoomOutBtn)
+    zoomOutBtn.addEventListener("click", () => workspace.zoomCenter(-1));
+  if (undoBtn)
+    undoBtn.addEventListener("click", () => workspace.undo(false));
+  if (redoBtn)
+    redoBtn.addEventListener("click", () => workspace.undo(true));
+
   // Make open button work with keyboard
   if (openButton) {
     openButton.addEventListener("click", () => {

style.css

@@ -474,6 +474,34 @@ button {
   position: relative;
   background-color: #f3f3f3;
 }
+
+#codePanel {
+  position: relative;
+}
+
+#blocklyZoomControls {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 50px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  padding: 0 8px;
+  background-color: var(--color-bg);
+  box-shadow: 0px 0px 10px var(--color-shadow);
+  z-index: 10;
+}
+
+#blocklyZoomControls .toolbar-divider {
+  width: 1px;
+  height: 24px;
+  background-color: var(--color-border);
+  margin: 0 4px;
+}
 [data-theme="dark"] #canvasArea {
   background-color: #2c2c2c !important;
 }
@@ -815,6 +843,14 @@ button {
     justify-content: center;
     touch-action: manipulation;
   }
+
+  #blocklyZoomControls {
+    bottom: calc(9px + max(8px, env(safe-area-inset-bottom, 0px)));
+  }
+
+  #blocklyDiv {
+    height: calc(100% - 59px - max(8px, env(safe-area-inset-bottom, 0px))) !important;
+  }
 }
 
 @media only screen and (orientation: landscape) and (max-width: 768px) {
@@ -868,7 +904,7 @@ button {
 
   #blocklyDiv {
     width: 100% !important;
-    height: 100% !important;
+    height: calc(100% - 50px) !important;
     position: relative;
   }