Skip to content

Commit 6cd4c47

Browse files
Ashutoshx7Ashutoshx7
committed
perf: remove duplicate Ticker and faster turtle init
1 parent 57b1738 commit 6cd4c47

File tree

2 files changed

+67
-63
lines changed

2 files changed

+67
-63
lines changed

‎index.html‎

Lines changed: 61 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,8 @@
101101
<div id="loading-image-container"
102102
style="position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #FFFFFF; z-index: 9999; contain: paint;">
103103
<div id="loading-media" style="width: 100%; padding: 0 20px; box-sizing: border-box;"></div>
104-
<div class="loading-text" id="loadingText" style="color:#333; margin-top: 2rem; min-height: 1.5em; font-size: 1.2rem;">
104+
<div class="loading-text" id="loadingText"
105+
style="color:#333; margin-top: 2rem; min-height: 1.5em; font-size: 1.2rem;">
105106
</div>
106107
<a href="https://www.sugarlabs.org/" target="_blank" id="link-to-sugarLabs"
107108
style="position: fixed; bottom: 20px; right: 20px;">
@@ -226,7 +227,8 @@
226227
<div id="helpElem" tabindex="-1"></div>
227228

228229
<div id="wheelDiv" class="wheelNav"
229-
style=" display: none; background-size: contain;background-image: url(./images/gray.svg)" tabindex="-1"></div>
230+
style=" display: none; background-size: contain;background-image: url(./images/gray.svg)"
231+
tabindex="-1"></div>
230232

231233
<div id="wheelDiv2" class="wheelNav"
232234
style="display: none; background-size: contain;background-image: url(./images/gray.svg);visibility: hidden"
@@ -282,7 +284,7 @@
282284
</dialog>
283285
<div class="materialize-iso" tabindex="-1">
284286
<nav id="toolbars" class="nav-wrapper">
285-
<div class="blue nav-wrapper" tabindex="-1">
287+
<div class="blue nav-wrapper" tabindex="-1">
286288
<div id="mb-logo" class="logo left tooltipped"
287289
style="display: flex; align-items: center; line-height: 0; height: 100%; padding-right: 0;"
288290
data-position="bottom">
@@ -298,80 +300,81 @@
298300
<a id="stop" class="left tooltipped"><i class="material-icons main">stop</i></a>
299301
</li>
300302
<li>
301-
<a id="record" class="left tooltipped" data-tooltip="Record"></a>
303+
<a id="record" class="left tooltipped" data-tooltip="Record"></a>
302304
</li>
303305
</ul>
304306

305307
<ul class="main right">
306308
<li>
307309
<a id="FullScreen" class="FullScreen tooltipped dropdown-trigger" data-position="bottom"
308-
onclick="setIcon()">
309-
<i class="material-icons" id="FullScrIcon">fullscreen</i>
310-
</a>
310+
onclick="setIcon()">
311+
<i class="material-icons" id="FullScrIcon">fullscreen</i>
312+
</a>
311313
</li>
312314
<li>
313315
<a id="newFile" class="tooltipped dropdown-trigger" data-position="bottom"
314-
data-activates="newdropdown">
315-
<i class="material-icons md-48">note_add</i>
316-
</a>
316+
data-activates="newdropdown">
317+
<i class="material-icons md-48">note_add</i>
318+
</a>
317319
</li>
318320
<li>
319-
<a id="load" class="tooltipped" data-position="bottom">
320-
<i class="material-icons md-48">folder</i>
321-
</a>
321+
<a id="load" class="tooltipped" data-position="bottom">
322+
<i class="material-icons md-48">folder</i>
323+
</a>
322324
</li>
323325
<li>
324-
<a id="saveButton" class="tooltipped dropdown-trigger" data-position="bottom"
325-
data-activates="saveddropdownbeg">
326-
<i id="save1" class="material-icons md-48">save_alt</i>
327-
</a>
326+
<a id="saveButton" class="tooltipped dropdown-trigger" data-position="bottom"
327+
data-activates="saveddropdownbeg">
328+
<i id="save1" class="material-icons md-48">save_alt</i>
329+
</a>
328330
</li>
329331
<li>
330-
<a id="saveButtonAdvanced" style="display: none;" class="tooltipped dropdown-trigger"
331-
data-position="bottom" data-activates="saveddropdown">
332-
<i id="save2" class="material-icons md-48">save_alt</i>
333-
</a>
332+
<a id="saveButtonAdvanced" style="display: none;" class="tooltipped dropdown-trigger"
333+
data-position="bottom" data-activates="saveddropdown">
334+
<i id="save2" class="material-icons md-48">save_alt</i>
335+
</a>
334336
</li>
335337
<li>
336-
<a id="planetIcon" class="tooltipped" data-position="bottom">
337-
<i class="material-icons md-48">public</i>
338-
</a>
338+
<a id="planetIcon" class="tooltipped" data-position="bottom">
339+
<i class="material-icons md-48">public</i>
340+
</a>
339341
</li>
340342
<li>
341-
<a style="display: none;" id="planetIconDisabled" class="tooltipped" data-position="bottom">
342-
<i style="color: #a5acba;" class="material-icons md-48">public</i>
343-
</a>
343+
<a style="display: none;" id="planetIconDisabled" class="tooltipped"
344+
data-position="bottom">
345+
<i style="color: #a5acba;" class="material-icons md-48">public</i>
346+
</a>
344347
</li>
345348
<li>
346-
<a id="toggleAuxBtn" class="tooltipped" data-position="bottom">
347-
<i id="menu" class="animated-icon material-icons md-48">menu</i>
348-
</a>
349+
<a id="toggleAuxBtn" class="tooltipped" data-position="bottom">
350+
<i id="menu" class="animated-icon material-icons md-48">menu</i>
351+
</a>
349352
</li>
350353
<li>
351-
<a id="helpIcon" class="tooltipped" data-position="bottom">
352-
<i class="material-icons md-48">help</i>
353-
</a>
354+
<a id="helpIcon" class="tooltipped" data-position="bottom">
355+
<i class="material-icons md-48">help</i>
356+
</a>
354357
</li>
355358
</ul>
356359
</div>
357360
<div class="nav-wrapper" id="aux-toolbar" style="display: none;" tabindex="-1">
358361
<div class="blue darken-1 nav-wrapper" tabindex="-1">
359362
<ul class="aux left">
360363
<li>
361-
<a id="runSlowlyIcon" class="tooltipped" data-position="bottom" data-delay="10">
362-
<i class="material-icons md-48">play_circle_outline</i>
363-
</a>
364+
<a id="runSlowlyIcon" class="tooltipped" data-position="bottom" data-delay="10">
365+
<i class="material-icons md-48">play_circle_outline</i>
366+
</a>
364367
</li>
365368
<li>
366-
<a id="runStepByStepIcon" class="tooltipped" data-position="bottom" data-delay="10">
367-
<i class="material-icons md-48">video_library</i>
368-
</a>
369+
<a id="runStepByStepIcon" class="tooltipped" data-position="bottom" data-delay="10">
370+
<i class="material-icons md-48">video_library</i>
371+
</a>
369372
</li>
370373
</ul>
371374
<ul class="aux right">
372375
<li>
373-
<a id="displayStatsIcon" class="tooltipped" data-position="bottom" data-delay="10"><i
374-
class="material-icons md-48">poll</i></a>
376+
<a id="displayStatsIcon" class="tooltipped" data-position="bottom"
377+
data-delay="10"><i class="material-icons md-48">poll</i></a>
375378
</li>
376379
<li>
377380
<a id="loadPluginIcon" class="tooltipped" data-position="bottom" data-delay="10"><i
@@ -416,7 +419,8 @@
416419
</li>
417420

418421
<li>
419-
<a id="restoreIcon" class="tooltipped" data-position="bottom" data-tooltip="Restore"><i
422+
<a id="restoreIcon" class="tooltipped" data-position="bottom"
423+
data-tooltip="Restore"><i
420424
class="material-icons md-48">restore_from_trash</i></a>
421425
<div id="trashList"></div>
422426
</li>
@@ -429,9 +433,9 @@
429433
class="material-icons md-48">star_border</i></a>
430434
</li>
431435
<li>
432-
<a id="languageSelectIcon" class="tooltipped dropdown-trigger" data-position="bottom"
433-
data-activates="languagedropdown" data-tooltip="Select Language"><i
434-
class="material-icons md-48">translate</i></a>
436+
<a id="languageSelectIcon" class="tooltipped dropdown-trigger"
437+
data-position="bottom" data-activates="languagedropdown"
438+
data-tooltip="Select Language"><i class="material-icons md-48">translate</i></a>
435439
</li>
436440
</ul>
437441
</div>
@@ -502,15 +506,15 @@
502506

503507
<!-- Initialize Scripts -->
504508
<script>
505-
let canvas, stage;
506-
function init() {
507-
canvas = document.getElementById("canvas");
508-
stage = new createjs.Stage(canvas);
509-
510-
createjs.Ticker.framerate = 60;
511-
createjs.Ticker.addEventListener("tick", stage);
512-
}
513-
document.addEventListener("DOMContentLoaded", init);
509+
let canvas, stage;
510+
function init() {
511+
canvas = document.getElementById("canvas");
512+
stage = new createjs.Stage(canvas);
513+
514+
createjs.Ticker.framerate = 60;
515+
// createjs.Ticker.addEventListener("tick", stage); // Managed by Activity class
516+
}
517+
document.addEventListener("DOMContentLoaded", init);
514518
</script>
515519

516520
<script>
@@ -572,8 +576,8 @@
572576
}
573577

574578
const container = document.getElementById("loading-media");
575-
const content = lang.startsWith("ja")
576-
? `<img src="loading-animation-ja.svg" loading="eager" fetchpriority="high" style="width: 70%; height: 90%; object-fit: contain;" alt="Loading animation">`
579+
const content = lang.startsWith("ja")
580+
? `<img src="loading-animation-ja.svg" loading="eager" fetchpriority="high" style="width: 70%; height: 90%; object-fit: contain;" alt="Loading animation">`
577581
: `<video loop autoplay muted playsinline fetchpriority="high" style="width: 90%; height: 100%; object-fit: contain;">
578582
<source src="loading-animation.webm" type="video/webm">
579583
<source src="loading-animation.mp4" type="video/mp4">
@@ -829,4 +833,4 @@
829833

830834
</body>
831835

832-
</html>
836+
</html>

‎js/turtles.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -536,7 +536,7 @@ Turtles.TurtlesModel = class {
536536
* @returns {void}
537537
*/
538538
addTurtleGraphicProps(turtle, blkInfoAvailable, infoDict) {
539-
setTimeout(() => {
539+
requestAnimationFrame(() => {
540540
if (blkInfoAvailable) {
541541
if ("heading" in infoDict) {
542542
turtle.painter.doSetHeading(infoDict["heading"]);
@@ -562,7 +562,7 @@ Turtles.TurtlesModel = class {
562562
turtle.rename(infoDict["name"]);
563563
}
564564
}
565-
}, 2000);
565+
});
566566
}
567567

568568
/**
@@ -875,10 +875,10 @@ Turtles.TurtlesView = class {
875875
container.setAttribute(
876876
"style",
877877
"position: absolute; right:" +
878-
(document.body.clientWidth - x) +
879-
"px; top: " +
880-
y +
881-
"px;"
878+
(document.body.clientWidth - x) +
879+
"px; top: " +
880+
y +
881+
"px;"
882882
);
883883
docById("buttoncontainerTOP").appendChild(container);
884884
return container;

0 commit comments

Comments
 (0)