@robotical/martyblocksjr 4.2.13 → 4.2.14

package/editions/free/src/css/editor.css

@@ -2082,12 +2082,30 @@ p.textsprite {
     -webkit-text-size-adjust: auto;
 }
 
-.zoom-button {
+.zoom-controls {
     position: absolute;
     bottom: 10px;
     right: 10px;
+    display: flex;
+    z-index: 1000;
+}
+
+.zoom-button {
     width: 50px;
     height: 50px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
     cursor: pointer;
-    z-index: 1000;
+}
+
+.zoom-button + .zoom-button {
+    margin-left: 8px;
+}
+
+.zoom-button svg {
+    display: block;
+    width: 100%;
+    height: 100%;
 }

package/editions/free/src/localizations/bg.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/ca.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/cs.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/cy.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/da.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/de.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/el.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/en.json

@@ -1304,5 +1304,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/es.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/fi.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/fr.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/it.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/ja.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/ko.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/nl.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/no.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/pl.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/pt-br.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/pt.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/sv.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/th.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/tr.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/uk.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/zh-cn.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/editions/free/src/localizations/zh-tw.json

@@ -1211,5 +1211,5 @@
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES": "{N, number} | Device Block Categories",
   "INTERFACE_GUIDE_DEVICE_BLOCK_CATEGORIES_DESCRIPTION": "Choose Cog blocks. Optional device categories, such as micro:bit, appear here when their extension is enabled.",
   "INTERFACE_GUIDE_ZOOM": "{N, number} | Script Zoom",
-  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Press and hold to zoom out for an overview of the programming area; release to return to normal size."
+  "INTERFACE_GUIDE_ZOOM_DESCRIPTION": "Use the minus and plus buttons to zoom the programming area out or in by 20% per click."
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robotical/martyblocksjr",
-  "version": "4.2.13",
+  "version": "4.2.14",
   "description": "ScratchJr",
   "repository": {
     "type": "git",

package/tests/Zoom.test.js

@@ -0,0 +1,59 @@
+import {describe, expect, it} from 'vitest';
+import Zoom from '../src/editor/ui/Zoom';
+
+describe('script editor zoom', () => {
+    it('zooms out and in persistently in 20% steps', () => {
+        const scriptsContainer = {style: {}};
+        const zoom = new Zoom(scriptsContainer);
+
+        zoom.zoomOut();
+        expect(zoom.zoomLevel).toBe(0.8);
+        expect(scriptsContainer.style.transform).toBe('scale(0.8)');
+
+        zoom.zoomOut();
+        expect(zoom.zoomLevel).toBe(0.6);
+        expect(scriptsContainer.style.transform).toBe('scale(0.6)');
+
+        zoom.zoomIn();
+        expect(zoom.zoomLevel).toBe(0.8);
+        expect(scriptsContainer.style.transform).toBe('scale(0.8)');
+    });
+
+    it('keeps zoom within the supported range', () => {
+        const scriptsContainer = {style: {}};
+        const zoom = new Zoom(scriptsContainer);
+
+        for (let i = 0; i < 20; i++) {
+            zoom.zoomOut();
+        }
+        expect(zoom.zoomLevel).toBe(0.2);
+        expect(scriptsContainer.style.transform).toBe('scale(0.2)');
+
+        for (let i = 0; i < 20; i++) {
+            zoom.zoomIn();
+        }
+        expect(zoom.zoomLevel).toBe(2);
+        expect(scriptsContainer.style.transform).toBe('scale(2)');
+    });
+
+    it('maps screen coordinates back into the zoomed scripts canvas', () => {
+        const scriptsContainer = {
+            style: {},
+            offsetWidth: 500,
+            offsetHeight: 300,
+            getBoundingClientRect: () => ({
+                left: 100,
+                top: 50,
+                width: 400,
+                height: 240
+            })
+        };
+        const zoom = new Zoom(scriptsContainer);
+
+        expect(zoom.getLocalPoint(scriptsContainer, 260, 170)).toEqual({
+            x: 200,
+            y: 150
+        });
+        expect(zoom.getRenderedScale()).toBe(0.8);
+    });
+});