From cdc04b7cfb2f2976f9e6881a8e2a03299cb76f98 Mon Sep 17 00:00:00 2001 From: pommicket Date: Mon, 24 Jul 2023 00:16:41 -0400 Subject: better error display --- fractiform.js | 25 +++++++++++------- index.html | 82 +++++++++++++++++++++++++++++------------------------------ 2 files changed, 57 insertions(+), 50 deletions(-) diff --git a/fractiform.js b/fractiform.js index 06f53a1..65bdd2c 100644 --- a/fractiform.js +++ b/fractiform.js @@ -37,6 +37,7 @@ let widget_search; let widgets_container; let display_output; let code_input; +let error_element; let display_output_span = null; let auto_update = true; @@ -758,7 +759,7 @@ function type_vec(base_type, component_count) { } function get_widget_by_name(name) { - for (let w of document.getElementsByClassName('widget')) { + for (const w of document.getElementsByClassName('widget')) { if (get_widget_name(w) === name) { return w; } @@ -775,7 +776,7 @@ function get_widget_name(widget_div) { function get_widget_names() { let s = new Set(); - for (let w of document.getElementsByClassName('widget-name')) { + for (const w of document.getElementsByClassName('widget-name')) { s.add(w.value); } return s; @@ -784,7 +785,7 @@ function get_widget_names() { function set_display_output_and_update_shader(to) { display_output = to; - for (let widget of document.getElementsByClassName('widget')) { + for (const widget of document.getElementsByClassName('widget')) { widget.dataset.display = to === get_widget_name(widget) ? '1' : '0'; } update_shader(); @@ -1161,15 +1162,15 @@ ${this.code.join('')} } function parse_widgets() { - let widgets = new Map(); - for (let widget_div of document.getElementsByClassName('widget')) { + const widgets = new Map(); + for (const widget_div of document.getElementsByClassName('widget')) { let name = get_widget_name(widget_div); let func = widget_div.dataset.func; if (!name) { return {error: `widget has no name. please give it one.`}; } - let inputs = new Map(); - let controls = new Map(); + const inputs = new Map(); + const controls = new Map(); for (const input of widget_div.getElementsByClassName('in')) { let id = input.dataset.id; inputs.set(id, input.getElementsByClassName('entry')[0].innerText); @@ -1420,6 +1421,8 @@ function startup() { widget_search = document.getElementById('widget-search'); widgets_container = document.getElementById('widgets-container'); code_input = document.getElementById('code'); + error_element = document.getElementById('error'); + ui_div.style.flexBasis = ui_div.offsetWidth + "px"; // convert to px // drag to resize ui @@ -1674,8 +1677,12 @@ function compile_shader(name, type, source) { return shader; } +function clear_error() { + error_element.style.display = 'none'; +} + function show_error(error) { console.log('error:', error); - document.getElementById('error-message').innerText = error; - document.getElementById('error-dialog').showModal(); + error_element.style.display = 'block'; + error_element.innerText = error; } diff --git a/index.html b/index.html index 8d28c3b..f373486 100644 --- a/index.html +++ b/index.html @@ -21,10 +21,24 @@ #page { display: flex; + flex-direction: column; width: 100vw; height: 100vh; } + #main { + display: flex; + flex-grow: 1; + overflow: hidden; + } + + #error { + color: red; + border-top: 2px solid red; + padding: 0.2em; + display: none; + } + #canvas-container { position: relative; width: 100%; @@ -41,17 +55,6 @@ border: 2px solid var(--ui-border); } - .error { - color: red; - } - - #error-dialog { - border: 2px solid red; - background-color: black; - } - dialog button { - font-family: monospace; - } button { border: 2px solid var(--ui-border); background-color: black; @@ -178,39 +181,36 @@ +

- -

- - Add - -

+ + Add + +

+ +

error

- -

- - - -- cgit v1.2.3