Skip to content

Commit 4934c86

Browse files
author
Anvita Prasad
committed
[Optimization] Optimize DOM in status.js to improve performance
1 parent 16edd6c commit 4934c86

1 file changed

Lines changed: 81 additions & 52 deletions

File tree

‎js/widgets/status.js‎

Lines changed: 81 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,19 @@ class StatusMatrix {
3535
this.isMaximized = false;
3636
this._cellScale = window.innerWidth / 1200;
3737
let iconSize = StatusMatrix.ICONSIZE * this._cellScale;
38+
39+
// Cache DOM elements and frequently used values
40+
this._cachedTurtleList = this.activity.turtles.turtleList;
41+
this._cachedFontSize = Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR) * 0.9 + "%";
42+
this._cachedButtonHeight = Math.floor(MATRIXBUTTONHEIGHT * this._cellScale) + "px";
43+
this._cachedRowHeight = Math.floor(MATRIXSOLFEHEIGHT * this._cellScale) + "px";
44+
45+
// Store row references for faster access during updates
46+
this._cellMap = [];
3847

3948
this.widgetWindow = window.widgetWindows.windowFor(this, "status", "status");
4049
this.widgetWindow.clear();
4150
this.widgetWindow.show();
42-
// For the button callbacks
43-
let cell;
4451

4552
// The status table
4653
this._statusTable = document.createElement("table");
@@ -56,19 +63,22 @@ class StatusMatrix {
5663
// The first row contains the mice icons.
5764
const header = this._statusTable.createTHead();
5865
const row = header.insertRow();
66+
let cell;
5967

6068
iconSize = Math.floor(this._cellScale * 24);
6169

6270
cell = row.insertCell();
6371
cell.style.backgroundColor = "#FFFFFF";
6472
cell.className = "headcol";
65-
cell.style.height = Math.floor(MATRIXBUTTONHEIGHT * this._cellScale) + "px";
66-
// cell.style.width = StatusMatrix.BUTTONSIZE * this._cellScale*2 + "px";
73+
cell.style.height = this._cachedButtonHeight;
6774
cell.style.width = "212.5px";
68-
6975
cell.innerHTML = " ";
76+
77+
// Create an array to store header cells for better reference
78+
const headerCells = [];
79+
7080
// One column per mouse/turtle
71-
for (const turtle of this.activity.turtles.turtleList) {
81+
for (const turtle of this._cachedTurtleList) {
7282
if (turtle.inTrash) {
7383
continue;
7484
}
@@ -96,33 +106,37 @@ class StatusMatrix {
96106
>  `;
97107
}
98108
cell.style.width = "212.5px";
99-
this.widgetWindow.onmaximize = () => {
100-
this.isMaximized = !this.isMaximized;
101-
cell.style.width = "100vw";
102-
cell.style.paddingLeft = "30px";
103-
cell.style.fontSize =
104-
Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR) * 0.9 + "%";
105-
if (!this.isMaximized) {
106-
cell.style.width = "212.5px";
107-
}
108-
};
109-
// cell.style.width = StatusMatrix.BUTTONSIZE * this._cellScale*2 + "px";
110-
cell.style.height = Math.floor(MATRIXSOLFEHEIGHT * this._cellScale) + "px";
109+
headerCells.push(cell);
110+
111+
cell.style.height = this._cachedRowHeight;
111112
cell.className = "headcol";
112113
}
113-
114-
// console.debug("active turtles: " + turtles.turtleList.length);
114+
115+
// Define onmaximize once instead of for each turtle
116+
this.widgetWindow.onmaximize = () => {
117+
this.isMaximized = !this.isMaximized;
118+
const newWidth = this.isMaximized ? "100vw" : "212.5px";
119+
120+
// Update all header cells at once
121+
headerCells.forEach(cell => {
122+
cell.style.width = newWidth;
123+
if (this.isMaximized) {
124+
cell.style.paddingLeft = "30px";
125+
cell.style.fontSize = this._cachedFontSize;
126+
}
127+
});
128+
};
115129

116130
// One row per field, one column per mouse (plus the labels)
117131
let label;
132+
let rowIndex = 1; // Track row index for cell mapping
133+
118134
for (const statusField of this.activity.logo.statusFields) {
119135
const row = header.insertRow();
136+
this._cellMap[rowIndex] = []; // Initialize row in cell map
120137

121-
cell = row.insertCell(); // i + 1);
122-
cell.style.fontSize =
123-
Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR) * 0.9 + "%";
124-
125-
// console.debug(statusField[1]);
138+
cell = row.insertCell();
139+
cell.style.fontSize = this._cachedFontSize;
126140

127141
switch (statusField[1]) {
128142
case "plus":
@@ -150,7 +164,6 @@ class StatusMatrix {
150164
label = this.activity.blocks.blockList[statusField[0]].protoblock
151165
.staticLabels[0];
152166
}
153-
// console.debug(label);
154167
break;
155168
case "outputtools":
156169
label = this.activity.blocks.blockList[statusField[0]].privateData;
@@ -162,41 +175,53 @@ class StatusMatrix {
162175
}
163176
let str = label;
164177
str = label.charAt(0).toUpperCase() + label.slice(1);
165-
// console.log(str);
166178
cell.innerHTML = `&nbsp;<b>${str}</b>`;
167-
cell.style.height = Math.floor(MATRIXBUTTONHEIGHT * this._cellScale) + "px";
179+
cell.style.height = this._cachedButtonHeight;
168180
cell.style.backgroundColor = platformColor.selectorBackground;
169181
cell.style.paddingLeft = "10px";
170-
this.activity.turtles.turtleList.forEach(() => {
182+
183+
let cellIndex = 1; // Track cell index within row for mapping
184+
this._cachedTurtleList.forEach(() => {
171185
cell = row.insertCell();
172186
cell.style.backgroundColor = platformColor.selectorBackground;
173-
cell.style.fontSize =
174-
Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR) * 0.9 + "%";
187+
cell.style.fontSize = this._cachedFontSize;
175188
cell.innerHTML = "";
176-
cell.style.height = Math.floor(MATRIXSOLFEHEIGHT * this._cellScale) + "px";
189+
cell.style.height = this._cachedRowHeight;
177190
cell.style.textAlign = "center";
191+
192+
// Store cell reference in the map for faster access during updates
193+
this._cellMap[rowIndex][cellIndex] = cell;
194+
cellIndex++;
178195
});
196+
197+
rowIndex++;
179198
}
180199

181200
if (_THIS_IS_MUSIC_BLOCKS_) {
182201
const row = header.insertRow();
202+
this._cellMap[rowIndex] = []; // Initialize row in cell map for notes
203+
183204
cell = row.insertCell();
184-
cell.style.fontSize =
185-
Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR) * 0.9 + "%";
205+
cell.style.fontSize = this._cachedFontSize;
186206
const str = _("note");
187207
const label = str.charAt(0).toUpperCase() + str.slice(1);
188208
cell.innerHTML = `&nbsp;<b>${label}</b>`;
189-
cell.style.height = Math.floor(MATRIXBUTTONHEIGHT * this._cellScale) + "px";
209+
cell.style.height = this._cachedButtonHeight;
190210
cell.style.backgroundColor = platformColor.selectorBackground;
191211
cell.style.paddingLeft = "10px";
192-
this.activity.turtles.turtleList.forEach(() => {
212+
213+
let cellIndex = 1;
214+
this._cachedTurtleList.forEach(() => {
193215
cell = row.insertCell();
194216
cell.style.backgroundColor = platformColor.selectorBackground;
195-
cell.style.fontSize =
196-
Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR) * 0.9 + "%";
217+
cell.style.fontSize = this._cachedFontSize;
197218
cell.innerHTML = "";
198-
cell.style.height = Math.floor(MATRIXSOLFEHEIGHT * this._cellScale) + "px";
219+
cell.style.height = this._cachedRowHeight;
199220
cell.style.textAlign = "center";
221+
222+
// Store cell reference in the map for note row
223+
this._cellMap[rowIndex][cellIndex] = cell;
224+
cellIndex++;
200225
});
201226
}
202227
this.widgetWindow.sendToCenter();
@@ -211,9 +236,10 @@ class StatusMatrix {
211236
this.activity.logo.updatingStatusMatrix = true;
212237

213238
let activeTurtles = 0;
214-
let cell;
215239
let t = 0;
216-
for (const turtle of this.activity.turtles.turtleList) {
240+
const blockList = this.activity.blocks.blockList;
241+
242+
for (const turtle of this._cachedTurtleList) {
217243
const tur = this.activity.turtles.ithTurtle(t);
218244

219245
if (turtle.inTrash) {
@@ -228,23 +254,24 @@ class StatusMatrix {
228254
let noteValue;
229255
let freq;
230256
let i = 0;
257+
231258
for (const statusField of this.activity.logo.statusFields) {
232259
saveStatus = this.activity.logo.inStatusMatrix;
233260
this.activity.logo.inStatusMatrix = false;
234261

235262
this.activity.logo.parseArg(this.activity.logo, t, statusField[0]);
236-
switch (this.activity.blocks.blockList[statusField[0]].name) {
263+
switch (blockList[statusField[0]].name) {
237264
case "x":
238265
case "y":
239266
case "heading":
240-
value = this.activity.blocks.blockList[statusField[0]].value.toFixed(0);
267+
value = blockList[statusField[0]].value.toFixed(0);
241268
break;
242269
case "mynotevalue":
243-
value = mixedNumber(this.activity.blocks.blockList[statusField[0]].value);
270+
value = mixedNumber(blockList[statusField[0]].value);
244271
break;
245272
case "elapsednotes2":
246273
blk = statusField[0];
247-
cblk = this.activity.blocks.blockList[blk].connections[1];
274+
cblk = blockList[blk].connections[1];
248275
noteValue = this.activity.logo.parseArg(
249276
this.activity.logo,
250277
t,
@@ -253,15 +280,15 @@ class StatusMatrix {
253280
null
254281
);
255282
value =
256-
mixedNumber(this.activity.blocks.blockList[statusField[0]].value) +
283+
mixedNumber(blockList[statusField[0]].value) +
257284
" × " +
258285
mixedNumber(noteValue);
259286
break;
260287
case "elapsednotes":
261-
value = mixedNumber(this.activity.blocks.blockList[statusField[0]].value);
288+
value = mixedNumber(blockList[statusField[0]].value);
262289
break;
263290
case "namedbox":
264-
name = this.activity.blocks.blockList[statusField[0]].privateData;
291+
name = blockList[statusField[0]].privateData;
265292
if (name in this.activity.logo.boxes) {
266293
value = this.activity.logo.boxes[name];
267294
} else {
@@ -295,16 +322,17 @@ class StatusMatrix {
295322
}
296323
break;
297324
case "heap":
298-
value = this.activity.blocks.blockList[statusField[0]].value;
325+
value = blockList[statusField[0]].value;
299326
break;
300327
default:
301-
value = this.activity.blocks.blockList[statusField[0]].value;
328+
value = blockList[statusField[0]].value;
302329
break;
303330
}
304331

305332
this.activity.logo.inStatusMatrix = saveStatus;
306333

307-
cell = this._statusTable.rows[i + 1].cells[activeTurtles + 1];
334+
// Use the cell map for faster access
335+
const cell = this._cellMap[i + 1][activeTurtles + 1];
308336
if (cell != null) {
309337
cell.innerHTML = value;
310338
}
@@ -333,7 +361,8 @@ class StatusMatrix {
333361
note += obj[1] + "/" + obj[0];
334362
}
335363

336-
cell = this._statusTable.rows[i + 1].cells[activeTurtles + 1];
364+
// Use the cell map for faster access to note row
365+
const cell = this._cellMap[i + 1][activeTurtles + 1];
337366
if (cell != null) {
338367
cell.innerHTML = note.replace(/#/g, "♯").replace(/b/g, "♭");
339368
}

0 commit comments

Comments
 (0)