diff options
-rw-r--r-- | fractiform.js | 44 | ||||
-rw-r--r-- | index.html | 21 | ||||
-rw-r--r-- | move.svg | 3 |
3 files changed, 58 insertions, 10 deletions
diff --git a/fractiform.js b/fractiform.js index 98157fb..1d8e068 100644 --- a/fractiform.js +++ b/fractiform.js @@ -4,7 +4,6 @@ TODO: - widgets: - slider -- rearrange widgets */ let gl; @@ -1031,6 +1030,13 @@ function update_input_element(input_element) { } } +let dragging_widget = null; +window.addEventListener('mouseup', () => { + dragging_widget = null; + const element = document.querySelector('.widget.dragging'); + if (element) element.classList.remove('dragging'); +}); + function add_widget(func) { let info = widget_info.get(func); console.assert(info !== undefined, 'bad widget ID: ' + func); @@ -1038,15 +1044,30 @@ function add_widget(func) { root.dataset.func = func; root.dataset.id = widget_id++; root.classList.add('widget'); + root.addEventListener('mouseover', (e) => { + switch (root.compareDocumentPosition(dragging_widget)) { + case Node.DOCUMENT_POSITION_DISCONNECTED: + case Node.DOCUMENT_POSITION_CONTAINS: + case Node.DOCUMENT_POSITION_CONTAINED_BY: + console.error('unexpected compareDocumentPosition return value'); + break; + case Node.DOCUMENT_POSITION_PRECEDING: + // dragging up + dragging_widget.before(root); + break + case Node.DOCUMENT_POSITION_FOLLOWING: + // dragging down + dragging_widget.after(root); + break; + } + }); { // 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.ariaLabel = 'delete'; delete_button.classList.add('widget-delete'); + delete_button.classList.add('widget-button'); delete_button.addEventListener('click', () => { root.remove(); update_shader(); @@ -1054,6 +1075,19 @@ function add_widget(func) { root.appendChild(delete_button); } + { + // move button + let move_button = document.createElement('button'); + move_button.ariaLabel = 'move'; + move_button.classList.add('widget-move'); + move_button.classList.add('widget-button'); + move_button.addEventListener('mousedown', () => { + dragging_widget = root; + root.classList.add('dragging'); + }); + root.appendChild(move_button); + } + { // title let title = document.createElement('div'); title.classList.add('widget-title'); @@ -139,17 +139,28 @@ .widget[data-display="1"] { background: #ff04; } + .widget.dragging { + background: #aaf6; + } .widget-title { font-weight: bold; } - .widget-delete { + .widget-button { + width: 1.5em; + height: 1.5em; border: 0; + margin-top: 0.2em; + vertical-align: top; + background-size: contain; } - .widget-delete img { - width: 1.5em; - vertical-align: bottom; + .widget-move { + background-image: url(move.svg); } - .widget-delete:hover, .widget-delete:active { + .widget-delete { + background-image: url(x.svg); + } + + .widget-button:hover, .widget-button:active { background-color: transparent; outline: 0; filter: saturate(500%); diff --git a/move.svg b/move.svg new file mode 100644 index 0000000..69f4ff5 --- /dev/null +++ b/move.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"> +<path d="M6 6 L26 6 M6 16 L26 16 M6 26 L26 26" stroke="#88f" stroke-width="4" stroke-linecap="round"/> +</svg> |