table sliders + FF scroll fix

docs/chapters/control/lerp.js

@@ -56,19 +56,16 @@ draw() {
 }
 
 drawHighlight() {
-    let c = screenToWorld({
+    const t = this.position;
-        x: map(this.position, -0.1, 1.1, 0, this.width),
-        y: this.height/2
-    });
 
-    if (c.x < 0) return;
+    if (t===0) return;
-    if (c.x > this.width) return;
+    if (t===1) return;
 
     noStroke();
     setFill(`rgba(255,0,0,0.3)`);
-    rect(c.x - 2, 0, 5, this.height);
+    rect(t*this.width - 2, 0, 5, this.height);
 
-    const p = this.f.map(f => f(c.x / this.width));
+    const p = this.f.map(f => f(t));
 
     setFill(`black`);
     p.forEach(p => {

docs/chapters/splitting/splitting.js

@@ -1,6 +1,7 @@
 let curve;
 
 setup() {
+    setPanelCount(3);
     curve = Bezier.defaultCubic(this);
     setMovable(curve.points);
     setSlider(`.slide-control`, `position`, 0.5);
@@ -16,16 +17,15 @@ draw() {
 
     this.drawBasics(p);
 
-    translate(this.width/3, 0);
+    nextPanel();
     setStroke(`black`);
     line(0, 0, 0, this.height);
-
     this.drawSegment(c1, p, `first`);
 
-    translate(this.width/3, 0);
+    nextPanel();
+
     setStroke(`black`);
     line(0, 0, 0, this.height);
-
     this.drawSegment(c2, p, `second`);
 }
 
@@ -47,9 +47,9 @@ drawSegment(c, p, halfLabel) {
     setStroke(`lightblue`);
     curve.drawCurve(`lightblue`);
     curve.drawSkeleton(`lightblue`);
-    curve.drawStruts(this.struts);
     c.drawCurve();
     c.drawSkeleton(`black`);
+    c.points.forEach(p => circle(p.x, p.y, 3));
     noFill();
     setStroke(`red`);
     circle(p.x, p.y, 3);

docs/index.html

@@ -682,7 +682,7 @@ function Bezier(3,t):
 						<graphics-element title="Quadratic interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3">
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\control\42328a6806cce466a84762d24a0bf7f2.png" />
+								<img width="275px" height="275px" src="images\chapters\control\2a0635829051977b265b64ef204f718e.png" />
 								<label>Quadratic interpolations</label>
 							</fallback-image>
 							<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -691,7 +691,7 @@ function Bezier(3,t):
 						<graphics-element title="Cubic interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4">
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\control\d77c40cdea1037003e9d8aafea57f9a2.png" />
+								<img width="275px" height="275px" src="images\chapters\control\fca18b2602929f80e68d8964832f0f44.png" />
 								<label>Cubic interpolations</label>
 							</fallback-image>
 							<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -700,7 +700,7 @@ function Bezier(3,t):
 						<graphics-element title="15th degree interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15">
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\control\50ae7279f2827b557f76379c80d00a83.png" />
+								<img width="275px" height="275px" src="images\chapters\control\989f4ca49d7099802cc0345dbeddca8c.png" />
 								<label>15th degree interpolations</label>
 							</fallback-image>
 							<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -1146,7 +1146,7 @@ function RationalBezier(3,t,w[],r[]):
 					<graphics-element title="Splitting a curve" width="825" height="275" src="./chapters/splitting/splitting.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="825px" height="275px" src="images\chapters\splitting\bef2f09698c0d3d2b7c4c031be17ff69.png" />
+							<img width="825px" height="275px" src="images\chapters\splitting\891133c5f0e140b8c7e179af04e497e0.png" />
 							<label></label>
 						</fallback-image>
 						<input type="range" min="0" max="1" step="0.01" value="0.5" class="slide-control" />
@@ -5995,5 +5995,7 @@ for(let L = 1; L &lt;= order; L++) {
 			This article is © 2011-2020 to me, Mike "Pomax" Kamermans, but the text, code, and images are
 			<a href="https://github.com/Pomax/bezierinfo/blob/master/LICENSE.md">almost no rights reserved</a>. Go do something cool with it!
 		</footer>
+
+		<script src="./js/site/fix-scroll.js"></script>
 	</body>
 </html>

docs/ja-JP/index.html

@@ -602,7 +602,7 @@ function Bezier(3,t):
 						<graphics-element title="2次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3">
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\control\42328a6806cce466a84762d24a0bf7f2.png" />
+								<img width="275px" height="275px" src="images\chapters\control\2a0635829051977b265b64ef204f718e.png" />
 								<label>2次の補間</label>
 							</fallback-image>
 							<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -611,7 +611,7 @@ function Bezier(3,t):
 						<graphics-element title="3次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4">
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\control\d77c40cdea1037003e9d8aafea57f9a2.png" />
+								<img width="275px" height="275px" src="images\chapters\control\fca18b2602929f80e68d8964832f0f44.png" />
 								<label>3次の補間</label>
 							</fallback-image>
 							<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -620,7 +620,7 @@ function Bezier(3,t):
 						<graphics-element title="15次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15">
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\control\50ae7279f2827b557f76379c80d00a83.png" />
+								<img width="275px" height="275px" src="images\chapters\control\989f4ca49d7099802cc0345dbeddca8c.png" />
 								<label>15次の補間</label>
 							</fallback-image>
 							<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -998,7 +998,7 @@ function RationalBezier(3,t,w[],r[]):
 					<graphics-element title="曲線の分割" width="825" height="275" src="./chapters/splitting/splitting.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="825px" height="275px" src="images\chapters\splitting\bef2f09698c0d3d2b7c4c031be17ff69.png" />
+							<img width="825px" height="275px" src="images\chapters\splitting\891133c5f0e140b8c7e179af04e497e0.png" />
 							<label></label>
 						</fallback-image>
 						<input type="range" min="0" max="1" step="0.01" value="0.5" class="slide-control" />
@@ -5830,5 +5830,7 @@ for(let L = 1; L &lt;= order; L++) {
 			This article is © 2011-2020 to me, Mike "Pomax" Kamermans, but the text, code, and images are
 			<a href="https://github.com/Pomax/bezierinfo/blob/master/LICENSE.md">almost no rights reserved</a>. Go do something cool with it!
 		</footer>
+
+		<script src="./js/site/fix-scroll.js"></script>
 	</body>
 </html>

docs/js/custom-element/api/graphics-api.js

@@ -242,25 +242,46 @@ class GraphicsAPI extends BaseAPI {
 
     let slider = typeof qs === `string` ? this.find(qs) : qs;
 
-    // relocate this slider
+    // create a slider row in the table of sliders
     let ui = (() => {
       if (!this.element) {
         return { update: (v) => {} };
       }
-      let wrapper = create(`div`);
+
-      wrapper.classList.add(`slider-wrapper`);
+      let table = find(`table.slider-wrapper`);
+
+      if (!table) {
+        table = slider.parentNode.querySelector(`table.slider-wrapper`);
+        if (!table) {
+          table = create(`table`);
+          table.classList.add(`slider-wrapper`);
+          slider.parentNode.replaceChild(table, slider);
+        }
+      }
+
+      let tr = create(`tr`);
+
+      let td = create(`td`);
       let label = create(`label`);
       label.classList.add(`slider-label`);
       label.innerHTML = propLabel;
-      wrapper.append(label);
+      td.append(label);
-      slider.parentNode.replaceChild(wrapper, slider);
+      tr.append(td);
+
+      td = create(`td`);
       slider.classList.add(`slider`);
       this._sliders[propname] = slider;
-      wrapper.append(slider);
+      td.append(slider);
+      tr.append(td);
+
+      td = create(`td`);
       let valueField = create(`label`);
       valueField.classList.add(`slider-value`);
       valueField.textContent;
-      wrapper.append(valueField);
+      td.append(valueField);
+      tr.append(td);
+
+      table.append(tr);
       return { update: (v) => (valueField.textContent = v) };
     })();
 
@@ -270,9 +291,14 @@ class GraphicsAPI extends BaseAPI {
       return undefined;
     }
 
+    let step = slider.getAttribute(`step`) || "1";
+    let res = !step.includes(`.`)
+      ? 0
+      : step.substring(step.indexOf(`.`) + 1).length;
+
     slider.updateProperty = (evt) => {
       let value = parseFloat(slider.value);
-      ui.update(value);
+      ui.update(value.toFixed(res));
       try {
         let checked = transform ? transform(value) ?? value : value;
         if (propname) this[propname] = checked;
@@ -281,7 +307,7 @@ class GraphicsAPI extends BaseAPI {
           evt.preventDefault();
           evt.stopPropagation();
         }
-        ui.update(e.value);
+        ui.update(e.value.toFixed(res));
         slider.value = e.value;
         slider.setAttribute(`value`, e.value);
       }

docs/js/site/fix-scroll.js

@@ -0,0 +1,8 @@
+// Firefox seems to mess up on slider input immediately after navigating.
+// Even weirder, forcing a scroll once the page is done loading fixes it...
+if (navigator.userAgent.includes(`Firefox/`)) {
+  window.onload = function () {
+    window.scrollBy(0, 1);
+    setTimeout(() => window.scrollBy(0, -1), 1);
+  };
+}

docs/placeholder-style.css

@@ -230,46 +230,42 @@ li code, p code {
   vertical-align: 1px
 }
 
-.slider-wrapper {
+table.slider-wrapper {
-  display: flex;
+  font-size: 75%;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  font-size: 90%;
   background: white;
-  margin: -0.5em;
-  margin-left: -0.25em;
-  margin-right: -0.25em;
   border: 1px solid black;
-  border-width: 0 1px;
+  border-collapse: collapse;
+  margin-top: 0.5em;
 }
 
-graphics-element .slider-wrapper:first-of-type {
+.slider-wrapper tr td {
-  clear: both;
+  width: 100%;
-  border-top: 1px solid black;
-  margin-top: 0.1em;
-  padding-top: 0.4em;
 }
 
-graphics-element .slider-wrapper:last-of-type {
+.slider-wrapper tr td:first-child {
-  border-bottom: 1px solid black;
+  width: 3em;
-  margin-bottom: -0.25em;
+  white-space: nowrap;
+}
+
+.slider-wrapper tr td:last-child {
+  width: 3em;
+  white-space: nowrap;
+  padding-left: 1em;
 }
 
 .slider-wrapper .slider-label {
-  flex: 0 0 auto;
   font-family: Arial;
   padding: 0 0.5em;
 }
 
 .slider-wrapper .slider-value {
-  flex: 0 0 auto;
+  padding: 0 0.25em;
-  min-width: 3em;
-  padding-right: 0.25em;
   text-align-last: center;
 }
 
 .slider-wrapper .slider {
-  flex: 1 1 auto;
+  width: 100%;
+  vertical-align: text-top;
 }
 
 .grid {

docs/zh-CN/index.html

@@ -572,7 +572,7 @@ function Bezier(3,t):
 						<graphics-element title="二次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3">
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\control\42328a6806cce466a84762d24a0bf7f2.png" />
+								<img width="275px" height="275px" src="images\chapters\control\2a0635829051977b265b64ef204f718e.png" />
 								<label>二次插值</label>
 							</fallback-image>
 							<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -581,7 +581,7 @@ function Bezier(3,t):
 						<graphics-element title="三次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4">
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\control\d77c40cdea1037003e9d8aafea57f9a2.png" />
+								<img width="275px" height="275px" src="images\chapters\control\fca18b2602929f80e68d8964832f0f44.png" />
 								<label>三次插值</label>
 							</fallback-image>
 							<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -590,7 +590,7 @@ function Bezier(3,t):
 						<graphics-element title="15次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15">
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\control\50ae7279f2827b557f76379c80d00a83.png" />
+								<img width="275px" height="275px" src="images\chapters\control\989f4ca49d7099802cc0345dbeddca8c.png" />
 								<label>15次插值</label>
 							</fallback-image>
 							<input type="range" min="0" max="1" step="0.01" value="0" class="slide-control" />
@@ -954,7 +954,7 @@ function RationalBezier(3,t,w[],r[]):
 					<graphics-element title="分割一条曲线" width="825" height="275" src="./chapters/splitting/splitting.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="825px" height="275px" src="images\chapters\splitting\bef2f09698c0d3d2b7c4c031be17ff69.png" />
+							<img width="825px" height="275px" src="images\chapters\splitting\891133c5f0e140b8c7e179af04e497e0.png" />
 							<label></label>
 						</fallback-image>
 						<input type="range" min="0" max="1" step="0.01" value="0.5" class="slide-control" />
@@ -5802,5 +5802,7 @@ for(let L = 1; L &lt;= order; L++) {
 			This article is © 2011-2020 to me, Mike "Pomax" Kamermans, but the text, code, and images are
 			<a href="https://github.com/Pomax/bezierinfo/blob/master/LICENSE.md">almost no rights reserved</a>. Go do something cool with it!
 		</footer>
+
+		<script src="./js/site/fix-scroll.js"></script>
 	</body>
 </html>

src/index.template.html

@@ -125,5 +125,7 @@
       <a href="https://github.com/Pomax/bezierinfo/blob/master/LICENSE.md">almost no rights reserved</a>.
       Go do something cool with it!
     </footer>
+
+    <script src="./js/site/fix-scroll.js"></script>
   </body>
 </html>