lazy loading and other optimizations

js/tree.js

@@ -6,8 +6,17 @@ const magConst = 150;
 const itemWidth = 120;
 const itemHeight = 90;
 
+let cache = '';
+
+function escapeHtml(unsafe) {
+    return (unsafe + '')
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
 function genElement(type, area, content, attribs) {
-    var elem = document.createElementNS("http://www.w3.org/2000/svg",type);
 
     var directAttribs = attribs.direct || {};
     var styleAttribs = attribs.style || {};
@@ -20,13 +29,15 @@ function genElement(type, area, content, attribs) {
 
     directAttribs.style = fullStyle;
 
+    var elem = '';
+
     Object.keys(directAttribs).forEach(function (attrib) {
-        elem.setAttribute(attrib, directAttribs[attrib]);
+        elem += `${escapeHtml(attrib)}="${escapeHtml(directAttribs[attrib])}" `;
     });
 
-    elem.textContent = content;
+    elem = `<${type} ${elem}>${content}</${type}>`
 
-    area.appendChild(elem);
+    cache += elem;
 
     return elem;
 }
@@ -37,13 +48,18 @@ function genEntry(posEntry, area, fetchData) {
     var x = posEntry.x * magConst;
     var y = posEntry.y * treeHeight;
 
+    var x2 = x * zoom + mpos[0];
+    var y2 = y * zoom + mpos[1];
+
+    if (y2 < -250 || y2 > area2.clientHeight+ 250) return;
+
     if (y > 0) {
         genElement('path', area, '', {
             'direct': {
                 'class': 'line',
                 'd': `M ${x + (itemWidth / 2)} ${y - treeHeight + itemHeight / 2} v ${itemHeight} z`
             }
-        });       
+        });
     }
 
     if (posEntry.offbranch >= 0) {
@@ -52,24 +68,21 @@ function genEntry(posEntry, area, fetchData) {
                 'class': 'line',
                 'd': `M ${x + (itemWidth / 2)} ${y + itemHeight / 2} h ${magConst * (posEntry.offbranch)} z`
             }
-        });    
+        });
     }
 
     let a = genElement('a', area, '', {
         'direct': {
             'href': `https://scratch.mit.edu/projects/${posEntry.id}`,
             'class': `${posEntry.visible ? '' : 'red'}`,
-        },
-        'style': {
-            'transform': `translate(${x}px, ${y}px)`
         }
-    });   
+    });
 
     genElement('image', a, '', {
         'direct': {
             'href': `https://uploads.scratch.mit.edu/get_image/project/${posEntry.id}_1920x1080.png`,
-            'x': '10',
-            'y': '-15',
+            'x': x - 10,
+            'y': y - 15,
             'width': '100'
         }
     });
@@ -85,25 +98,11 @@ function genEntry(posEntry, area, fetchData) {
 
         genElement('text', a, text[i], {
             'direct': {
-                'x': '75',
-                'y': 75 + 8 * i
+                'x': x + 75,
+                'y': y + 75 + 8 * i
             }
-        });   
+        });
     }
-
-    
-    /*
-    {#if Math.abs((mpos[0] + elem.x * zoom) - width/2) < width/2 * 1.2 && Math.abs((mpos[1] + elem.y  * zoom) - height/2) < height/2 * 1.2 }
-                        <image href='https://uploads.scratch.mit.edu/get_image/project/{elem.id}_1920x1080.png' x='10' y='-15' width='100' />
-                    {:else}
-                        <circle r="25" cx="60" cy="40"></circle>
-                    {/if}                   
-                    <text x='75' y='75'>{elem.name}</text>
-                    <text x='75' y='83'>{elem.y / treeHeight} proj. deep</text>
-                    <text x='75' y='91'>{(elem.date) ? (new Date(elem.date.$date) + '').split('GMT')[0] : 'Date not available'}</text>
-                    <text x='75' y='99'>{elem.user}</text>
-
-                    */
 }
 
 
@@ -118,22 +117,28 @@ async function genTree(id) {
 
     let keys = Object.keys(fetchData);
 
-    keys.forEach(id => {
-        if (id == fetchData.root_id || id == 'root_id') return;
+    let r = fetchData[fetchData.root_id];
 
-        let allChild = keys.map(x => fetchData[x].children).flat();
+    let i = 0;
+    for (let id of keys) {
+        if (id == fetchData.root_id || id == 'root_id') continue;
 
-        if (allChild.indexOf(id) == -1) {
-            fetchData[fetchData.root_id].children.push(id);
+        if (!fetchData[id].parent_id && keys.findIndex(x => fetchData[x].children && fetchData[x].children.indexOf(id) != -1) == -1) {
+            r.children.push(id);
         }
-
-    });
+        i++;
+        console.log(i)
+    };
 
     let pos = await main(fetchData);
 
-    pos.forEach(function (posEntry) {
-        genEntry(posEntry, area, fetchData);
-    })
+    setInterval(function () {
+        cache = '';
+        for (let posEntry of pos) {
+            genEntry(posEntry, area, fetchData);
+        }
+        area.innerHTML = cache;
+    }, 1000)
 
     return pos;
 }