From e07c3b32ae0f75c9c4fae9bc9f16ceb92e65830a Mon Sep 17 00:00:00 2001 From: pommicket Date: Fri, 16 Jun 2023 23:25:01 +0100 Subject: cool tool buttons --- fractiform.js | 58 ++++++++++++++++++++++++---------------------------------- index.html | 21 +++++++++++++++------ 2 files changed, 39 insertions(+), 40 deletions(-) diff --git a/fractiform.js b/fractiform.js index 5d4f886..7867c0d 100644 --- a/fractiform.js +++ b/fractiform.js @@ -36,7 +36,7 @@ const TOOL_TRIANGLE = 1; const TOOL_UV = 2; const TOOL_SELECT = 3; -let ui_tool = TOOL_TRIANGLE; +let ui_tool; const vertex_radius = 10; @@ -88,6 +88,11 @@ function ui_set_tool(tool) { } ui_escape_tool(); ui_tool = tool; + let tool_buttons = document.getElementsByClassName('tool-button'); + for (let i = 0; i < tool_buttons.length; i++) { + let button = tool_buttons[i]; + button.dataset.selected = parseInt(button.dataset.tool) === tool; + } } function on_key_press(e) { @@ -280,48 +285,33 @@ function startup() { vertex_buffer_main = gl.createBuffer(); - /* - sierpinski carpet - for (let y = 0; y < 3; ++y) { - for (let x = 0; x < 3; ++x) { - if (x == 1 && y == 1) continue; - let k = 2.0 / 3.0; - let x0 = x * 2.0 / 3.0 - 1.0; - let y0 = y * 2.0 / 3.0 - 1.0; - let x1 = x0 + k; - let y1 = y0 + k; - let color = {r: 1.0, g: 0.5, b: 1.0, a: 0.1}; - vertices_push_quad( - {pos: {x: x0, y: y0}, uv: {x: 0.0, y: 0.0}, color: color}, - {pos: {x: x1, y: y0}, uv: {x: 1.0, y: 0.0}, color: color}, - {pos: {x: x1, y: y1}, uv: {x: 1.0, y: 1.0}, color: color}, - {pos: {x: x0, y: y1}, uv: {x: 0.0, y: 1.0}, color: color}, - ); - - } - } - { - let k = 0.5 / 3.0; - let color = {r: 0.5, g: 0.5, b: 1.0, a: 1.0}; - vertices_push_quad( - {pos: {x: -k, y: -k}, uv: {x: 0.0, y: 0.0}, color: color}, - {pos: {x: k, y: -k}, uv: {x: 1.0, y: 0.0}, color: color}, - {pos: {x: k, y: k}, uv: {x: 1.0, y: 1.0}, color: color}, - {pos: {x: -k, y: k}, uv: {x: 0.0, y: 1.0}, color: color}, - ); - } - */ - - framebuffer_color_texture = gl.createTexture(); sampler_texture = gl.createTexture(); set_up_framebuffer(); + ui_set_tool(TOOL_TRIANGLE); + frame(0.0); window.addEventListener('keydown', on_key_press); window.addEventListener('mousemove', on_mouse_move); window.addEventListener('click', on_click); + { // set up tool buttons + let tool_buttons = document.getElementsByClassName('tool-button'); + for (let i = 0; i < tool_buttons.length; i++) { + let tool_button = tool_buttons[i]; + tool_button.addEventListener('click', function(e) { + let button = e.target; + while (button !== null && button.tagName !== 'BUTTON') { + button = button.parentElement; + } + console.assert(button !== null, 'what how did the event listener fire then'); + let n = parseInt(button.dataset.tool); + console.assert(!isNaN(n), 'bad data-tool value: ' + button.dataset.tool); + ui_set_tool(n); + }); + } + } } function ui_is_editing_shape() { diff --git a/index.html b/index.html index 3b80ccc..b4c4fd8 100644 --- a/index.html +++ b/index.html @@ -54,13 +54,13 @@ background-color: black; color: white; } - button:hover { + button:hover, input:hover, input:active { background-color: #fff3; } - button:active { + button:active, button[data-selected="true"] { background-color: #fff6; } - button:focus { + button:focus, input:focus { outline: 2px solid #0a0; } #ui { @@ -74,13 +74,13 @@ left: 0; vertical-align:middle; } - #ui input { + input, button { vertical-align: middle; display: inline-block; height: 2.0em; margin: 0.3em 0.1em 0.3em 0.3em; border: 2px solid var(--ui-border); - background-color: #333; + background-color: black; color: white; } #ui input[type=color] { @@ -94,6 +94,9 @@ #ui label { margin-right: 0.5em; } + img.icon { + height: 1.5em; + } @@ -169,9 +172,15 @@ void main() { --> - + + + -- cgit v1.2.3