rearrange widgets

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');
diff --git a/index.html b/index.html
index e3b344b..f86013e 100644
--- a/index.html
+++ b/index.html
@@ -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>