From 0ba876384a57bb49bb49beec887c788e7fa1a7b0 Mon Sep 17 00:00:00 2001 From: sparks-alec Date: Sat, 15 Jan 2022 00:25:27 -0500 Subject: [PATCH] make device rendering faster! --- src/view.js | 54 ++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 37 insertions(+), 17 deletions(-) diff --git a/src/view.js b/src/view.js index 77b8662..4a88b65 100644 --- a/src/view.js +++ b/src/view.js @@ -6,12 +6,13 @@ const PLUGINS = require('./plugins.js'); const pinnedDevices = []; module.exports.pinnedDevices = pinnedDevices; let activeDevice = false; +let drawCount = 0; module.exports.init = function () { populatePluginLists(); }; -drawDeviceInterface = function (id) { +drawDeviceFrame = function (id) { // console.log("DRAW") const $deviceDrawArea = document.getElementById(`device-${id}-draw-area`); @@ -45,6 +46,23 @@ drawDeviceInterface = function (id) { str += ""; str += ''; + str += generateBodyHTML(d); + + str += ''; + + $deviceDrawArea.setAttribute('class', `${d.type} draw-area`); + $deviceDrawArea.contentWindow.document.open(); + $deviceDrawArea.contentWindow.document.write(str); + + if (d.pinIndex) { + $devicePinned.style.display = 'block'; + } else { + $devicePinned.style.display = 'none'; + } +}; + +generateBodyHTML = function(d){ + let str = ""; if (d.status == 'ok') { try { str += PLUGINS.all[d.type].template({ @@ -65,25 +83,27 @@ drawDeviceInterface = function (id) { str += '

IP ' + d.addresses[0] + '

'; str += '

Port ' + d.port + '

'; } - - str += ''; - - $deviceDrawArea.setAttribute('class', `${d.type} draw-area`); - $deviceDrawArea.contentWindow.document.open(); - $deviceDrawArea.contentWindow.document.write(str); - - if (d.pinIndex) { - $devicePinned.style.display = 'block'; - } else { - $devicePinned.style.display = 'none'; - } -}; + return str; +} module.exports.draw = function (device) { - if (device == undefined) { + if (device == undefined || device.status=="new") { return true; } - drawDeviceInterface(device.id); + + if(drawCount==0){ + drawDeviceFrame(device.id); + }else{ + let $deviceDrawArea = document.getElementById(`device-${device.id}-draw-area`).contentDocument.body; + $deviceDrawArea.innerHTML = generateBodyHTML(DEVICE.all[device.id]); + + let $scrollTo = $deviceDrawArea.getElementsByClassName("scroll-position"); + if($scrollTo.length==1){ + document.getElementById(`device-${device.id}-draw-area`).contentWindow.scroll({top: $scrollTo[0].offsetTop-200, behavior: 'smooth'}); + } + } + drawCount++; + }; module.exports.addDeviceToList = function (device) { @@ -164,7 +184,7 @@ switchDevice = function (id) { } switchClass(document.getElementById(id), 'active-device'); - drawDeviceInterface(id); + drawDeviceFrame(id); switchClass(document.getElementById(`device-${id}`), 'active-device-outline'); document.getElementById('device-settings-table').style.display = 'block';