diff options
| -rw-r--r-- | fractiform.js | 16 | ||||
| -rw-r--r-- | index.html | 19 | ||||
| -rw-r--r-- | x.svg | 1 |
3 files changed, 35 insertions, 1 deletions
diff --git a/fractiform.js b/fractiform.js index cb31f1d..7daa6dc 100644 --- a/fractiform.js +++ b/fractiform.js @@ -92,7 +92,7 @@ const widget_info = { }, 'mul': { name: 'Multiply', - inputs: [{name: 'a', name: 'b'}], + inputs: [{name: 'a'}, {name: 'b'}], controls: [], outputs: [{name: 'out'}], func: function(state, inputs) { @@ -387,6 +387,20 @@ function add_widget(func) { root.appendChild(title); } + if (func !== 'output') { + // delete button + let delete_button = document.createElement('button'); + let delete_img = document.createElement('img'); + delete_img.src = 'x.svg'; + delete_img.alt = 'delete'; + delete_button.appendChild(delete_img); + delete_button.classList.add('widget-delete'); + delete_button.addEventListener('click', function (e) { + root.remove(); + }); + root.appendChild(delete_button); + } + // inputs for (let input of info.inputs) { let container = document.createElement('div'); @@ -127,11 +127,30 @@ .widget-name { width: 10em; } + .widget-delete { + position: absolute; + right: 0.2em; + top: 0.2em; + border: 0; + } + .widget-delete img { + width: 1.5em; + } + .widget-delete:hover, .widget-delete:active { + background-color: transparent; + outline: 0; + filter: brightness(50%); + } .widget-choice { width: 100%; border-bottom: 0; margin: 0; } + .widget-choice:focus { + outline: 0; + border: 2px solid green; + z-index: 10; + } #widget-choices { margin: 0.2em; border-bottom: 2px solid white; @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M6 6 L26 26 M26 6 L6 26" stroke="#fff" stroke-width="4" stroke-linecap="round"/></svg> |
