diff --git a/web/chaos-game-3d.html b/web/chaos-game-3d.html index 13971a2..b591ef2 100644 --- a/web/chaos-game-3d.html +++ b/web/chaos-game-3d.html @@ -167,6 +167,9 @@

Examples:

+
+ +
diff --git a/web/chaos-game.html b/web/chaos-game.html index 885fb43..c773031 100644 --- a/web/chaos-game.html +++ b/web/chaos-game.html @@ -192,6 +192,9 @@

Examples:

+
+ +
diff --git a/web/static/chaos-game-3d.js b/web/static/chaos-game-3d.js index 86568f8..80ada8e 100644 --- a/web/static/chaos-game-3d.js +++ b/web/static/chaos-game-3d.js @@ -23,6 +23,7 @@ let draggedVertexIndex = -1; // Store user control values const slidersValuesCache = new Map(); +const sliderDefaults = new Map(); function getRandomVisiblePoint() { const x = (Math.random() - 0.5) * SPHERE_RADIUS; @@ -110,6 +111,8 @@ function createUserControl(label, min, max, defaultValue, clearPointsWhenChanged const slider = document.createElement('div'); container.appendChild(slider); + sliderDefaults.set(label, defaultValue); + noUiSlider.create(slider, { start: defaultValue, connect: true, @@ -119,11 +122,10 @@ function createUserControl(label, min, max, defaultValue, clearPointsWhenChanged // Check for value from Share link and update if exists if (window.sharedSliderValues && window.sharedSliderValues[label] !== undefined) { - defaultValue = window.sharedSliderValues[label]; - slider.noUiSlider.set(defaultValue); + slider.noUiSlider.set(window.sharedSliderValues[label]); } - slidersValuesCache.set(label, defaultValue); + slidersValuesCache.set(label, slider.noUiSlider.get()); valueDisplay.innerHTML = '' + defaultValue.toFixed(2) + ''; slider.noUiSlider.on('update', function(values) { @@ -146,6 +148,24 @@ function createUserControl(label, min, max, defaultValue, clearPointsWhenChanged return container; } +function resetAllSliders() { + for (const [label, defaultValue] of sliderDefaults.entries()) { + const sliderElements = document.querySelectorAll('.slider'); + for (const sliderContainer of sliderElements) { + const labelElem = sliderContainer.querySelector('label'); + if (labelElem && labelElem.textContent.startsWith(label + ':')) { + const divs = sliderContainer.querySelectorAll('div'); + for (const div of divs) { + if (div.noUiSlider) { + div.noUiSlider.set(defaultValue); + break; + } + } + break; + } + } + } +} function handleMathJSExpressionsError(error) { const errorDiv = document.getElementById('errorMessage'); @@ -773,6 +793,10 @@ document.getElementById('generateAddBtn').addEventListener('click', function() { generateAndDraw(false); }); +document.getElementById('resetSlidersBtn').addEventListener('click', function() { + resetAllSliders(); +}); + document.getElementById('stopBtn').addEventListener('click', function() { // Stop generation by incrementing the generation ID currentGenerationId++; diff --git a/web/static/chaos-game.css b/web/static/chaos-game.css index 672f7b4..67456cf 100644 --- a/web/static/chaos-game.css +++ b/web/static/chaos-game.css @@ -119,13 +119,35 @@ label[for="initializationMathJSCode"] { } #sliders { - width: 100%; - max-width: 1000px; /* Match canvas width */ + display: inline-block; + vertical-align: bottom; + max-width: calc(1000px - 100px); /* Leave space for reset button */ margin-top: 5px; padding: 5px; box-sizing: border-box; } +#reset-sliders-container { + display: inline-block; + margin-left: 10px; + vertical-align: bottom; +} + +#resetSlidersBtn { + background: #fff; + border: 1px solid #ccc; + border-radius: 4px; + padding: 6px 12px; + cursor: pointer; + font-size: 14px; + transition: all 0.2s; +} + +#resetSlidersBtn:hover { + background: #f5f5f5; + border-color: #4285F4; +} + .slider { margin: 10px 0; } diff --git a/web/static/chaos-game.js b/web/static/chaos-game.js index 3da373d..3e8c576 100644 --- a/web/static/chaos-game.js +++ b/web/static/chaos-game.js @@ -13,6 +13,7 @@ let draggedVertexIndex = -1; // Store user control values const slidersValuesCache = new Map(); +const sliderDefaults = new Map(); // Canvas setup with transformed context const canvas = document.getElementById('myCanvas'); @@ -47,6 +48,8 @@ function createUserControl(label, min, max, defaultValue, clearPointsWhenChanged const slider = document.createElement('div'); container.appendChild(slider); + sliderDefaults.set(label, defaultValue); + noUiSlider.create(slider, { start: defaultValue, connect: true, @@ -56,11 +59,10 @@ function createUserControl(label, min, max, defaultValue, clearPointsWhenChanged // Check for value from Share link and update if exists if (window.sharedSliderValues && window.sharedSliderValues[label] !== undefined) { - defaultValue = window.sharedSliderValues[label]; - slider.noUiSlider.set(defaultValue); + slider.noUiSlider.set(window.sharedSliderValues[label]); } - slidersValuesCache.set(label, defaultValue); + slidersValuesCache.set(label, slider.noUiSlider.get()); valueDisplay.innerHTML = '' + defaultValue.toFixed(2) + ''; @@ -86,6 +88,25 @@ function createUserControl(label, min, max, defaultValue, clearPointsWhenChanged return container; } +function resetAllSliders() { + for (const [label, defaultValue] of sliderDefaults.entries()) { + const sliderElements = document.querySelectorAll('.slider'); + for (const sliderContainer of sliderElements) { + const labelElem = sliderContainer.querySelector('label'); + if (labelElem && labelElem.textContent.startsWith(label + ':')) { + const divs = sliderContainer.querySelectorAll('div'); + for (const div of divs) { + if (div.noUiSlider) { + div.noUiSlider.set(defaultValue); + break; + } + } + break; + } + } + } +} + function getCircleCoord(theta) { const x = CIRCLE_RADIUS * Math.cos(theta); const y = CIRCLE_RADIUS * Math.sin(theta); @@ -743,6 +764,10 @@ document.getElementById('generateAddBtn').addEventListener('click', function() { generateAndDraw(false); }); +document.getElementById('resetSlidersBtn').addEventListener('click', function() { + resetAllSliders(); +}); + document.getElementById('stopBtn').addEventListener('click', function() { // Stop generation by incrementing the generation ID currentGenerationId++;