diff --git a/docs/chapters/control/lerp.js b/docs/chapters/control/lerp.js index ab20edc9..68ebc354 100644 --- a/docs/chapters/control/lerp.js +++ b/docs/chapters/control/lerp.js @@ -56,19 +56,16 @@ draw() { } drawHighlight() { - let c = screenToWorld({ - x: map(this.position, -0.1, 1.1, 0, this.width), - y: this.height/2 - }); + const t = this.position; - if (c.x < 0) return; - if (c.x > this.width) return; + if (t===0) 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 => { diff --git a/docs/chapters/splitting/splitting.js b/docs/chapters/splitting/splitting.js index eabcb931..8689c67e 100644 --- a/docs/chapters/splitting/splitting.js +++ b/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); diff --git a/docs/images/chapters/control/2a0635829051977b265b64ef204f718e.png b/docs/images/chapters/control/2a0635829051977b265b64ef204f718e.png new file mode 100644 index 00000000..be703f1c Binary files /dev/null and b/docs/images/chapters/control/2a0635829051977b265b64ef204f718e.png differ diff --git a/docs/images/chapters/control/42328a6806cce466a84762d24a0bf7f2.png b/docs/images/chapters/control/42328a6806cce466a84762d24a0bf7f2.png deleted file mode 100644 index 4659b5a2..00000000 Binary files a/docs/images/chapters/control/42328a6806cce466a84762d24a0bf7f2.png and /dev/null differ diff --git a/docs/images/chapters/control/50ae7279f2827b557f76379c80d00a83.png b/docs/images/chapters/control/50ae7279f2827b557f76379c80d00a83.png deleted file mode 100644 index 5cfe86ff..00000000 Binary files a/docs/images/chapters/control/50ae7279f2827b557f76379c80d00a83.png and /dev/null differ diff --git a/docs/images/chapters/control/989f4ca49d7099802cc0345dbeddca8c.png b/docs/images/chapters/control/989f4ca49d7099802cc0345dbeddca8c.png new file mode 100644 index 00000000..d1403643 Binary files /dev/null and b/docs/images/chapters/control/989f4ca49d7099802cc0345dbeddca8c.png differ diff --git a/docs/images/chapters/control/d77c40cdea1037003e9d8aafea57f9a2.png b/docs/images/chapters/control/d77c40cdea1037003e9d8aafea57f9a2.png deleted file mode 100644 index fc16b535..00000000 Binary files a/docs/images/chapters/control/d77c40cdea1037003e9d8aafea57f9a2.png and /dev/null differ diff --git a/docs/images/chapters/control/fca18b2602929f80e68d8964832f0f44.png b/docs/images/chapters/control/fca18b2602929f80e68d8964832f0f44.png new file mode 100644 index 00000000..a1940cfb Binary files /dev/null and b/docs/images/chapters/control/fca18b2602929f80e68d8964832f0f44.png differ diff --git a/docs/images/chapters/pointvectors3d/59b6ce3fcbf79da171d86e962597097e.png b/docs/images/chapters/pointvectors3d/59b6ce3fcbf79da171d86e962597097e.png index aa8cb533..95fcb150 100644 Binary files a/docs/images/chapters/pointvectors3d/59b6ce3fcbf79da171d86e962597097e.png and b/docs/images/chapters/pointvectors3d/59b6ce3fcbf79da171d86e962597097e.png differ diff --git a/docs/images/chapters/pointvectors3d/9983328e50c2156c124bb1ea4ad5c05b.png b/docs/images/chapters/pointvectors3d/9983328e50c2156c124bb1ea4ad5c05b.png index aa8cb533..95fcb150 100644 Binary files a/docs/images/chapters/pointvectors3d/9983328e50c2156c124bb1ea4ad5c05b.png and b/docs/images/chapters/pointvectors3d/9983328e50c2156c124bb1ea4ad5c05b.png differ diff --git a/docs/images/chapters/splitting/891133c5f0e140b8c7e179af04e497e0.png b/docs/images/chapters/splitting/891133c5f0e140b8c7e179af04e497e0.png new file mode 100644 index 00000000..e3f0c2ec Binary files /dev/null and b/docs/images/chapters/splitting/891133c5f0e140b8c7e179af04e497e0.png differ diff --git a/docs/images/chapters/splitting/bef2f09698c0d3d2b7c4c031be17ff69.png b/docs/images/chapters/splitting/bef2f09698c0d3d2b7c4c031be17ff69.png deleted file mode 100644 index 01d260ef..00000000 Binary files a/docs/images/chapters/splitting/bef2f09698c0d3d2b7c4c031be17ff69.png and /dev/null differ diff --git a/docs/index.html b/docs/index.html index bdc3d6a0..10a66c78 100644 --- a/docs/index.html +++ b/docs/index.html @@ -682,7 +682,7 @@ function Bezier(3,t): Scripts are disabled. Showing fallback image. - + @@ -691,7 +691,7 @@ function Bezier(3,t): Scripts are disabled. Showing fallback image. - + @@ -700,7 +700,7 @@ function Bezier(3,t): Scripts are disabled. Showing fallback image. - + @@ -1146,7 +1146,7 @@ function RationalBezier(3,t,w[],r[]): Scripts are disabled. Showing fallback image. - + @@ -5995,5 +5995,7 @@ for(let L = 1; L <= order; L++) { This article is © 2011-2020 to me, Mike "Pomax" Kamermans, but the text, code, and images are almost no rights reserved. Go do something cool with it! + + diff --git a/docs/ja-JP/index.html b/docs/ja-JP/index.html index 40399b7a..29c659b5 100644 --- a/docs/ja-JP/index.html +++ b/docs/ja-JP/index.html @@ -602,7 +602,7 @@ function Bezier(3,t): Scripts are disabled. Showing fallback image. - + @@ -611,7 +611,7 @@ function Bezier(3,t): Scripts are disabled. Showing fallback image. - + @@ -620,7 +620,7 @@ function Bezier(3,t): Scripts are disabled. Showing fallback image. - + @@ -998,7 +998,7 @@ function RationalBezier(3,t,w[],r[]): Scripts are disabled. Showing fallback image. - + @@ -5830,5 +5830,7 @@ for(let L = 1; L <= order; L++) { This article is © 2011-2020 to me, Mike "Pomax" Kamermans, but the text, code, and images are almost no rights reserved. Go do something cool with it! + + diff --git a/docs/js/custom-element/api/graphics-api.js b/docs/js/custom-element/api/graphics-api.js index 83337533..1ecc7f6e 100644 --- a/docs/js/custom-element/api/graphics-api.js +++ b/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); - slider.parentNode.replaceChild(wrapper, slider); + td.append(label); + 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); } diff --git a/docs/js/site/fix-scroll.js b/docs/js/site/fix-scroll.js new file mode 100644 index 00000000..94389a90 --- /dev/null +++ b/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); + }; +} diff --git a/docs/placeholder-style.css b/docs/placeholder-style.css index 380d61b0..9775009d 100644 --- a/docs/placeholder-style.css +++ b/docs/placeholder-style.css @@ -230,46 +230,42 @@ li code, p code { vertical-align: 1px } -.slider-wrapper { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - font-size: 90%; +table.slider-wrapper { + font-size: 75%; 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 { - clear: both; - border-top: 1px solid black; - margin-top: 0.1em; - padding-top: 0.4em; +.slider-wrapper tr td { + width: 100%; } -graphics-element .slider-wrapper:last-of-type { - border-bottom: 1px solid black; - margin-bottom: -0.25em; +.slider-wrapper tr td:first-child { + width: 3em; + 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; - min-width: 3em; - padding-right: 0.25em; + padding: 0 0.25em; text-align-last: center; } .slider-wrapper .slider { - flex: 1 1 auto; + width: 100%; + vertical-align: text-top; } .grid { diff --git a/docs/zh-CN/index.html b/docs/zh-CN/index.html index a38a9fc1..a5cbe8a4 100644 --- a/docs/zh-CN/index.html +++ b/docs/zh-CN/index.html @@ -572,7 +572,7 @@ function Bezier(3,t): Scripts are disabled. Showing fallback image. - + @@ -581,7 +581,7 @@ function Bezier(3,t): Scripts are disabled. Showing fallback image. - + @@ -590,7 +590,7 @@ function Bezier(3,t): Scripts are disabled. Showing fallback image. - + @@ -954,7 +954,7 @@ function RationalBezier(3,t,w[],r[]): Scripts are disabled. Showing fallback image. - + @@ -5802,5 +5802,7 @@ for(let L = 1; L <= order; L++) { This article is © 2011-2020 to me, Mike "Pomax" Kamermans, but the text, code, and images are almost no rights reserved. Go do something cool with it! + + diff --git a/src/index.template.html b/src/index.template.html index a857bdf1..a39af318 100644 --- a/src/index.template.html +++ b/src/index.template.html @@ -125,5 +125,7 @@ almost no rights reserved. Go do something cool with it! + +