From b90cca77a9d51b8f00ff6aac16499dff3c542c16 Mon Sep 17 00:00:00 2001 From: j433866 Date: Thu, 4 Apr 2019 10:15:13 +0100 Subject: [PATCH] Fix more tab weirdness. Move tab buttons onto tab bar. Calculate size of maxTabs automatically on page load. Display total execution time when a bake finishes. --- src/web/App.mjs | 3 ++ src/web/InputWaiter.mjs | 103 ++++++++++++++------------------------- src/web/OutputWaiter.mjs | 97 +++++++++++++----------------------- src/web/WorkerWaiter.mjs | 16 ++++++ 4 files changed, 88 insertions(+), 131 deletions(-) diff --git a/src/web/App.mjs b/src/web/App.mjs index a8e5d078..52a96769 100755 --- a/src/web/App.mjs +++ b/src/web/App.mjs @@ -96,6 +96,9 @@ class App { window.removeEventListener("error", window.loadingErrorHandler); document.dispatchEvent(this.manager.apploaded); + + this.manager.input.calcMaxTabs(); + this.manager.output.calcMaxTabs(); } diff --git a/src/web/InputWaiter.mjs b/src/web/InputWaiter.mjs index f8028bc4..651c5653 100644 --- a/src/web/InputWaiter.mjs +++ b/src/web/InputWaiter.mjs @@ -51,6 +51,14 @@ class InputWaiter { this.maxTabs = 4; // Calculate this } + /** + * Calculates the maximum number of tabs to display + */ + calcMaxTabs() { + const numTabs = Math.floor((document.getElementById("IO").offsetWidth - 75) / 120); + this.maxTabs = numTabs; + } + /** * Terminates any existing loader workers and sets up a new worker */ @@ -779,11 +787,6 @@ class InputWaiter { if (numTabs > 0) { tabsWrapper.parentElement.style.display = "block"; - const tabButtons = document.getElementsByClassName("input-tab-buttons"); - for (let i = 0; i < tabButtons.length; i++) { - tabButtons.item(i).style.display = "inline-block"; - } - document.getElementById("input-wrapper").style.height = "calc(100% - var(--tab-height) - var(--title-height))"; document.getElementById("input-highlighter").style.height = "calc(100% - var(--tab-height) - var(--title-height))"; document.getElementById("input-file").style.height = "calc(100% - var(--tab-height) - var(--title-height))"; @@ -851,22 +854,12 @@ class InputWaiter { if (newInputs.length > 1) { tabsList.parentElement.style.display = "block"; - const tabButtons = document.getElementsByClassName("input-tab-buttons"); - for (let i = 0; i < tabButtons.length; i++) { - tabButtons.item(i).style.display = "inline-block"; - } - document.getElementById("input-wrapper").style.height = "calc(100% - var(--tab-height) - var(--title-height))"; document.getElementById("input-highlighter").style.height = "calc(100% - var(--tab-height) - var(--title-height))"; document.getElementById("input-file").style.height = "calc(100% - var(--tab-height) - var(--title-height))"; } else { tabsList.parentElement.style.display = "none"; - const tabButtons = document.getElementsByClassName("input-tab-buttons"); - for (let i = 0; i < tabButtons.length; i++) { - tabButtons.item(i).style.display = "none"; - } - document.getElementById("input-wrapper").style.height = "calc(100% - var(--title-height))"; document.getElementById("input-highlighter").style.height = "calc(100% - var(--title-height))"; document.getElementById("input-file").style.height = "calc(100% - var(--title-height))"; @@ -898,65 +891,40 @@ class InputWaiter { /** * Generates a list of the nearby inputNums - * - * @param {number} inputNum - * @param {string} direction + * @param inputNum + * @param direction */ getNearbyNums(inputNum, direction) { - const inputs = []; - if (direction === "left") { - let reachedEnd = false; - for (let i = 0; i < this.maxTabs; i++) { - let newNum; - if (i === 0) { - newNum = inputNum; - } else { - newNum = this.getNextInputNum(inputs[i-1]); - } - if (newNum === inputs[i-1]) { - reachedEnd = true; - inputs.sort(function(a, b) { - return b - a; - }); - break; - } - if (reachedEnd) { - newNum = this.getPreviousInputNum(inputs[i-1]); - } - if (newNum >= 0) { - inputs.push(newNum); + const nums = []; + for (let i = 0; i < this.maxTabs; i++) { + let newNum; + if (i === 0) { + newNum = inputNum; + } else { + switch (direction) { + case "left": + newNum = this.getNextInputNum(nums[i - 1]); + if (newNum === nums[i - 1]) { + direction = "right"; + newNum = this.getPreviousInputNum(nums[i - 1]); + } + break; + case "right": + newNum = this.getPreviousInputNum(nums[i - 1]); + if (newNum === nums[i - 1]) { + direction = "left"; + newNum = this.getNextInputNum(nums[i - 1]); + } } } - } else { - let reachedEnd = false; - for (let i = 0; i < this.maxTabs; i++) { - let newNum; - if (i === 0) { - newNum = inputNum; - } else { - if (!reachedEnd) { - newNum = this.getPreviousInputNum(inputs[i-1]); - } - if (newNum === inputs[i-1]) { - reachedEnd = true; - inputs.sort(function(a, b) { - return b - a; - }); - break; - } - if (reachedEnd) { - newNum = this.getNextInputNum(inputs[i-1]); - } - } - if (newNum >= 0) { - inputs.push(newNum); - } + if (!nums.includes(newNum) && (newNum > 0)) { + nums.push(newNum); } } - inputs.sort(function(a, b) { + nums.sort(function(a, b) { return a - b; }); - return inputs; + return nums; } /** @@ -1162,7 +1130,8 @@ class InputWaiter { clearAllIoClick() { this.manager.worker.cancelBake(); for (let i = this.inputs.length - 1; i >= 0; i--) { - this.removeTab(this.inputs[i].inputNum); + this.manager.output.removeOutput(this.inputs[i].inputNum); + this.removeInput(this.inputs[i].inputNum); } this.refreshTabs(); } diff --git a/src/web/OutputWaiter.mjs b/src/web/OutputWaiter.mjs index ca0ebd4b..d18b11a5 100755 --- a/src/web/OutputWaiter.mjs +++ b/src/web/OutputWaiter.mjs @@ -27,9 +27,18 @@ class OutputWaiter { this.manager = manager; this.outputs = []; + this.maxTabs = 4; // Calculate this } + /** + * Calculates the maximum number of tabs to display + */ + calcMaxTabs() { + const numTabs = Math.floor((document.getElementById("IO").offsetWidth - 75) / 120); + this.maxTabs = numTabs; + } + /** * Gets the output for the specified input number * @@ -40,7 +49,6 @@ class OutputWaiter { const index = this.getOutputIndex(inputNum); if (index === -1) return -1; - log.error(this.outputs[index]); if (typeof this.outputs[index].data.dish.value === "string") { return this.outputs[index].data.dish.value; } else { @@ -112,6 +120,7 @@ class OutputWaiter { let index = this.getOutputIndex(inputNum); if (index === -1) { index = this.addOutput(inputNum); + this.addTab(inputNum, true); } this.outputs[index].data = data; @@ -439,11 +448,6 @@ class OutputWaiter { if (numTabs > 0) { tabsWrapper.parentElement.style.display = "block"; - const tabButtons = document.getElementsByClassName("output-tab-buttons"); - for (let i = 0; i < tabButtons.length; i++) { - tabButtons.item(i).style.display = "inline-block"; - } - document.getElementById("output-wrapper").style.height = "calc(100% - var(--tab-height) - var(--title-height))"; document.getElementById("output-highlighter").style.height = "calc(100% - var(--tab-height) - var(--title-height))"; document.getElementById("output-file").style.height = "calc(100% - var(--tab-height) - var(--title-height))"; @@ -547,59 +551,34 @@ class OutputWaiter { /** * Generates a list of the nearby inputNums - * - * @param {number} inputNum - * @param {string} direction + * @param inputNum + * @param direction */ getNearbyNums(inputNum, direction) { const nums = []; - if (direction === "left") { - let reachedEnd = false; - for (let i = 0; i < this.maxTabs; i++) { - let newNum; - if (i === 0) { - newNum = inputNum; - } else { - newNum = this.getNextInputNum(nums[i-1]); - } - if (newNum === nums[i-1]) { - reachedEnd = true; - nums.sort(function(a, b) { - return b - a; - }); - break; - } - if (reachedEnd) { - newNum = this.getPreviousInputNum(nums[i-1]); - } - if (newNum >= 0) { - nums.push(newNum); + for (let i = 0; i < this.maxTabs; i++) { + let newNum; + if (i === 0) { + newNum = inputNum; + } else { + switch (direction) { + case "left": + newNum = this.getNextInputNum(nums[i - 1]); + if (newNum === nums[i - 1]) { + direction = "right"; + newNum = this.getPreviousInputNum(nums[i - 1]); + } + break; + case "right": + newNum = this.getPreviousInputNum(nums[i - 1]); + if (newNum === nums[i - 1]) { + direction = "left"; + newNum = this.getNextInputNum(nums[i - 1]); + } } } - } else { - let reachedEnd = false; - for (let i = 0; i < this.maxTabs; i++) { - let newNum; - if (i === 0) { - newNum = inputNum; - } else { - if (!reachedEnd) { - newNum = this.getPreviousInputNum(nums[i-1]); - } - if (newNum === nums[i-1]) { - reachedEnd = true; - nums.sort(function(a, b) { - return b - a; - }); - break; - } - if (reachedEnd) { - newNum = this.getNextInputNum(nums[i-1]); - } - } - if (newNum >= 0) { - nums.push(newNum); - } + if (!nums.includes(newNum) && (newNum > 0)) { + nums.push(newNum); } } nums.sort(function(a, b) { @@ -722,11 +701,6 @@ class OutputWaiter { if (newInputs.length > 1) { tabsList.parentElement.style.display = "block"; - const tabButtons = document.getElementsByClassName("output-tab-buttons"); - for (let i = 0; i < tabButtons.length; i++) { - tabButtons.item(i).style.display = "inline-block"; - } - document.getElementById("output-wrapper").style.height = "calc(100% - var(--tab-height) - var(--title-height))"; document.getElementById("output-highlighter").style.height = "calc(100% - var(--tab-height) - var(--title-height))"; document.getElementById("output-file").style.height = "calc(100% - var(--tab-height) - var(--title-height))"; @@ -735,11 +709,6 @@ class OutputWaiter { } else { tabsList.parentElement.style.display = "none"; - const tabButtons = document.getElementsByClassName("output-tab-buttons"); - for (let i = 0; i < tabButtons.length; i++) { - tabButtons.item(i).style.display = "none"; - } - document.getElementById("output-wrapper").style.height = "calc(100% - var(--title-height))"; document.getElementById("output-highlighter").style.height = "calc(100% - var(--title-height))"; document.getElementById("output-file").style.height = "calc(100% - var(--title-height))"; diff --git a/src/web/WorkerWaiter.mjs b/src/web/WorkerWaiter.mjs index f3a288a9..2c808428 100644 --- a/src/web/WorkerWaiter.mjs +++ b/src/web/WorkerWaiter.mjs @@ -275,7 +275,22 @@ class WorkerWaiter { */ bakingComplete() { this.setBakingStatus(false); + let duration = new Date().getTime() - this.bakeStartTime; + duration = duration.toString() + "ms"; + const progress = this.getBakeProgress(); + let width = progress.total.toString().length; + if (duration.length > width) { + width = duration.length; + } + width = width < 2 ? 2 : width; + + const totalStr = progress.total.toString().padStart(width, " ").replace(/ /g, " "); + const durationStr = duration.padStart(width, " ").replace(/ /g, " "); + + const msg = `Total: ${totalStr}
Time: ${durationStr}`; + + document.getElementById("bake-info").innerHTML = msg; // look into changing this to something better // for (let i = 0; i < this.outputs.length; i++) { // if (this.outputs[i].data.error) { @@ -308,6 +323,7 @@ class WorkerWaiter { */ bake(input, recipeConfig, options, progress, step) { this.setBakingStatus(true); + this.bakeStartTime = new Date().getTime(); if (typeof input === "string") { input = [{