diff options
| -rw-r--r-- | fractiform.js | 58 | ||||
| -rw-r--r-- | 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() { @@ -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; + } </style> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1" name="viewport"> @@ -169,9 +172,15 @@ void main() { <input type="text" value="1.0" name="blue-input" id="blue-input"> <label for="blue-input">B</label> --> - <input type="color" value="#ffffff" name="color-input" id="color-input" aria-label="Color"> + <input type="color" value="#ff00aa" name="color-input" id="color-input" aria-label="Color"> <input type="text" value="0.1" name="color-mix-input" id="color-mix-input"> <label for="color-mix-input">opacity</label> + <button class="tool-button" data-tool="3" title="select tool (1)"> + <img alt="select" class="icon" src="data:image/png;base64,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"> + </button> + <button class="tool-button" data-tool="1" title="triangle tool (2)"> + <img alt="triangle" class="icon" src="data:image/png;base64,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"> + </button> </div> <dialog id="error-dialog"> |