Optimizing DOM handling in block.js (#4985)

* Optimize DOM handling in block.js

Cached selectors: Stopped repetitive DOM lookups by storing references.

Input reuse: Prevented layout thrashing by reusing existing elements.

GPU acceleration: Swapped label positioning to CSS transforms for smoother rendering.

* Linting Updates

Author: zealot-zew

js/block.js

@@ -227,6 +227,21 @@ const _blockMakeBitmap = (data, callback, args) => {
     img.src = "data:image/svg+xml;base64," + window.btoa(base64Encode(data));
 };
 
+// Optimization: Cache static DOM elements to avoid repetitive querySelector/getElementById calls
+const _domCache = {
+    wheelDiv: null,
+    contextWheelDiv: null,
+    helpfulWheelDiv: null,
+    labelDiv: null
+};
+
+const _getStatic = id => {
+    if (!_domCache[id]) {
+        _domCache[id] = docById(id);
+    }
+    return _domCache[id];
+};
+
 /**
  * Define block instance objects and any methods that are intra-block.
  * Represents a block instance with associated methods.
@@ -2785,7 +2800,7 @@ class Block {
         this._calculateBlockHitArea();
 
         this.container.on("mouseover", () => {
-            docById("contextWheelDiv").style.display = "none";
+            _getStatic("contextWheelDiv").style.display = "none";
 
             if (!that.activity.logo.runningLilypond) {
                 document.body.style.cursor = "pointer";
@@ -2807,14 +2822,17 @@ class Block {
          * @param {Event} event - The click event.
          */
         this.container.on("click", event => {
-            if (docById("helpfulWheelDiv") && docById("helpfulWheelDiv").style.display !== "none") {
-                docById("helpfulWheelDiv").style.display = "none";
+            if (
+                _getStatic("helpfulWheelDiv") &&
+                _getStatic("helpfulWheelDiv").style.display !== "none"
+            ) {
+                _getStatic("helpfulWheelDiv").style.display = "none";
             }
             // We might be able to check which button was clicked.
             if ("nativeEvent" in event) {
                 if ("button" in event.nativeEvent && event.nativeEvent.button == 2) {
                     that.blocks.stageClick = true;
-                    docById("wheelDiv").style.display = "none";
+                    _getStatic("wheelDiv").style.display = "none";
                     that.blocks.activeBlock = thisBlock;
                     piemenuBlockContext(that);
                     return;
@@ -3427,7 +3445,7 @@ class Block {
             labelValue = this.value;
         }
 
-        const labelElem = docById("labelDiv");
+        const labelElem = _getStatic("labelDiv");
 
         const safetext = text => {
             // Best to avoid using these special characters in text strings
@@ -3447,12 +3465,29 @@ class Block {
         };
 
         if (this.name === "text") {
-            labelElem.innerHTML =
-                '<input id="textLabel" style="position: absolute; -webkit-user-select: text;-moz-user-select: text;-ms-user-select: text;" class="text" type="text" value="' +
-                safetext(labelValue) +
-                '" />';
+            // Reuse existing input element or create a new one
+            if (!_domCache.textLabelInput) {
+                const el = document.createElement("input");
+                el.id = "textLabel";
+                el.style.position = "absolute";
+                el.style.webkitUserSelect = "text";
+                el.style.mozUserSelect = "text";
+                el.style.msUserSelect = "text";
+                el.className = "text";
+                el.type = "text";
+                _domCache.textLabelInput = el;
+            }
+
+            // Ensure it is the child of labelElem
+            if (_domCache.textLabelInput.parentNode !== labelElem) {
+                labelElem.innerHTML = "";
+                labelElem.appendChild(_domCache.textLabelInput);
+            }
+
+            this.label = _domCache.textLabelInput;
+            this.label.value = safetext(labelValue);
+            this.label.style.display = "";
             labelElem.classList.add("hasKeyboard");
-            this.label = docById("textLabel");
 
             // set the position of cursor to the end (for text value)
             const valueLength = this.label.value.length;
@@ -3993,12 +4028,29 @@ class Block {
                         break;
                 }
             } else {
-                labelElem.innerHTML =
-                    '<input id="numberLabel" style="position: absolute; -webkit-user-select: text;-moz-user-select: text;-ms-user-select: text;" class="number" type="number" value="' +
-                    labelValue +
-                    '" />';
+                // Reuse existing input element or create a new one
+                if (!_domCache.numberLabelInput) {
+                    const el = document.createElement("input");
+                    el.id = "numberLabel";
+                    el.style.position = "absolute";
+                    el.style.webkitUserSelect = "text";
+                    el.style.mozUserSelect = "text";
+                    el.style.msUserSelect = "text";
+                    el.className = "number";
+                    el.type = "number";
+                    el.step = "any";
+                    _domCache.numberLabelInput = el;
+                }
+
+                // Ensure it is the child of labelElem
+                if (_domCache.numberLabelInput.parentNode !== labelElem) {
+                    labelElem.innerHTML = "";
+                    labelElem.appendChild(_domCache.numberLabelInput);
+                }
+
+                this.label = _domCache.numberLabelInput;
+                this.label.value = safetext(labelValue);
                 labelElem.classList.add("hasKeyboard");
-                this.label = docById("numberLabel");
 
                 // set the position of cursor to the end (for number value)
                 const valueLength = this.label.value.length;
@@ -4075,16 +4127,18 @@ class Block {
                 that._labelChanged(false, true);
             });
 
-            this.label.style.left =
-                Math.round(
-                    (x + this.activity.blocksContainer.x) * this.activity.getStageScale() +
-                        canvasLeft
-                ) + "px";
-            this.label.style.top =
-                Math.round(
-                    (y + this.activity.blocksContainer.y) * this.activity.getStageScale() +
-                        canvasTop
-                ) + "px";
+            // Use GPU acceleration (transform) instead of left/top to avoid layout thrashing
+            const left = Math.round(
+                (x + this.activity.blocksContainer.x) * this.activity.getStageScale() + canvasLeft
+            );
+            const top = Math.round(
+                (y + this.activity.blocksContainer.y) * this.activity.getStageScale() + canvasTop
+            );
+
+            this.label.style.transform = `translate3d(${left}px, ${top}px, 0)`;
+            this.label.style.left = "0px";
+            this.label.style.top = "0px";
+
             this.label.style.width =
                 Math.round((selectorWidth * this.blocks.blockScale * this.protoblock.scale) / 2) +
                 "px";