WEBSITE - WIP - icon shapes - icon size slider limits

docs/assets/js/shape-editor.js

@@ -226,7 +226,12 @@
     // controls
     const cur = pts[Math.max(sel, 0)];
     $('se-corner-legend').textContent = sel >= 0 ? `Corner ${sel + 1}` : 'All corners';
-    $('se-size').value = cur.r; $('se-size-v').textContent = fmt(cur.r);
+    // The slider ends where the shape stops changing: two corners sharing an edge split it, so with every
+    // corner the same size each one saturates at half its shorter edge; a lone corner can take more.
+    const reach = (i) => Math.min(dist(pts[i], pts[(i + pts.length - 1) % pts.length]), dist(pts[i], pts[(i + 1) % pts.length]));
+    const maxSize = sel >= 0 ? reach(sel) : Math.max(...pts.map((_, i) => reach(i) / 2));
+    $('se-size').max = Math.max(0.1, Math.ceil(maxSize * 10) / 10); // set before value, which the browser clamps to it
+    $('se-size').value = cur.r; $('se-size-v').textContent = fmt(Math.min(cur.r, +$('se-size').max));
     $('se-smooth').value = Math.round(cur.s * 100); $('se-smooth-v').textContent = Math.round(cur.s * 100) + '%';
     $('se-apply-all').disabled = sel < 0;
     $('se-x').disabled = $('se-y').disabled = sel < 0;

docs/icon-shapes.html

@@ -101,7 +101,7 @@ noindex: true    # and out of search engines
     <fieldset id="se-corner-set">
       <legend id="se-corner-legend">All corners</legend>
       <label for="se-size">Size <span id="se-size-v"></span></label>
-      <input id="se-size" type="range" min="0" max="75" step="0.5">
+      <input id="se-size" type="range" min="0" max="50" step="0.1">
       <label for="se-smooth">Smoothing <span id="se-smooth-v"></span></label>
       <input id="se-smooth" type="range" min="0" max="100" step="1">
       <div class="se-scale"><span>Cut</span><span>Round</span><span>Squircle</span></div>