diff --git a/docs/images/chapters/arclength/56533f47e73ad9fea08fa9bb3f597d49.png b/docs/images/chapters/arclength/56533f47e73ad9fea08fa9bb3f597d49.png index 49ff93c2..2029a315 100644 Binary files a/docs/images/chapters/arclength/56533f47e73ad9fea08fa9bb3f597d49.png and b/docs/images/chapters/arclength/56533f47e73ad9fea08fa9bb3f597d49.png differ diff --git a/docs/images/chapters/arclength/5ce02cbdbc47585c588f2656d5161a32.png b/docs/images/chapters/arclength/5ce02cbdbc47585c588f2656d5161a32.png index 585d0296..cdcfa2eb 100644 Binary files a/docs/images/chapters/arclength/5ce02cbdbc47585c588f2656d5161a32.png and b/docs/images/chapters/arclength/5ce02cbdbc47585c588f2656d5161a32.png differ diff --git a/docs/images/chapters/arclength/fe2663b205d14c157a5a02bfbbd55987.png b/docs/images/chapters/arclength/fe2663b205d14c157a5a02bfbbd55987.png index 6190a5af..99e40b6b 100644 Binary files a/docs/images/chapters/arclength/fe2663b205d14c157a5a02bfbbd55987.png and b/docs/images/chapters/arclength/fe2663b205d14c157a5a02bfbbd55987.png differ diff --git a/docs/images/chapters/control/8d158a13e9a86969b99c64057644cbc6.png b/docs/images/chapters/control/8d158a13e9a86969b99c64057644cbc6.png new file mode 100644 index 00000000..06300409 Binary files /dev/null and b/docs/images/chapters/control/8d158a13e9a86969b99c64057644cbc6.png differ diff --git a/docs/images/chapters/reordering/c4874e1205aabe624e5504abe154eae9.png b/docs/images/chapters/reordering/c4874e1205aabe624e5504abe154eae9.png index 0f8c0f03..635b34a0 100644 Binary files a/docs/images/chapters/reordering/c4874e1205aabe624e5504abe154eae9.png and b/docs/images/chapters/reordering/c4874e1205aabe624e5504abe154eae9.png differ diff --git a/docs/images/chapters/whatis/524dd296e96c0fe2281fb95146f8ea65.png b/docs/images/chapters/whatis/524dd296e96c0fe2281fb95146f8ea65.png index 76aaa493..1c8343ee 100644 Binary files a/docs/images/chapters/whatis/524dd296e96c0fe2281fb95146f8ea65.png and b/docs/images/chapters/whatis/524dd296e96c0fe2281fb95146f8ea65.png differ diff --git a/docs/images/news/2020-09-18.html/24b6ead799277b0d73687d2fc5532a84.svg b/docs/images/news/2020-09-18.html/24b6ead799277b0d73687d2fc5532a84.svg new file mode 100644 index 00000000..74ae8b44 --- /dev/null +++ b/docs/images/news/2020-09-18.html/24b6ead799277b0d73687d2fc5532a84.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/images/news/2020-09-18.html/b465a1526a406578c9806a9985e2dbd0.png b/docs/images/news/2020-09-18.html/b465a1526a406578c9806a9985e2dbd0.png new file mode 100644 index 00000000..3197c1fc Binary files /dev/null and b/docs/images/news/2020-09-18.html/b465a1526a406578c9806a9985e2dbd0.png differ diff --git a/docs/index.html b/docs/index.html index b4e4d1ff..73b5bb9c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -31,7 +31,7 @@ - + @@ -461,14 +461,14 @@ Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. - + @@ -509,7 +509,7 @@ Scripts are disabled. Showing fallback image. - + @@ -580,7 +580,7 @@ Scripts are disabled. Showing fallback image. - + @@ -748,7 +748,7 @@ function Bezier(3,t): Scripts are disabled. Showing fallback image. - + @@ -757,7 +757,7 @@ function Bezier(3,t): Scripts are disabled. Showing fallback image. - + @@ -766,7 +766,7 @@ function Bezier(3,t): Scripts are disabled. Showing fallback image. - + @@ -794,7 +794,7 @@ function Bezier(3,t): Scripts are disabled. Showing fallback image. - + @@ -878,7 +878,7 @@ function Bezier(3,t,w[]): Scripts are disabled. Showing fallback image. - + @@ -975,7 +975,7 @@ function RationalBezier(3,t,w[],r[]): > Scripts are disabled. Showing fallback image. - + @@ -988,7 +988,7 @@ function RationalBezier(3,t,w[],r[]): > Scripts are disabled. Showing fallback image. - + @@ -1092,7 +1092,7 @@ function RationalBezier(3,t,w[],r[]): > Scripts are disabled. Showing fallback image. - + @@ -1156,7 +1156,7 @@ function RationalBezier(3,t,w[],r[]): > Scripts are disabled. Showing fallback image. - + @@ -1165,7 +1165,7 @@ function RationalBezier(3,t,w[],r[]): Scripts are disabled. Showing fallback image. - + @@ -1212,7 +1212,7 @@ function RationalBezier(3,t,w[],r[]): Scripts are disabled. Showing fallback image. - + @@ -1648,7 +1648,7 @@ function drawCurve(points[], t): Scripts are disabled. Showing fallback image. - + @@ -1927,7 +1927,7 @@ function drawCurve(points[], t): > Scripts are disabled. Showing fallback image. - + @@ -1940,7 +1940,7 @@ function drawCurve(points[], t): > Scripts are disabled. Showing fallback image. - + @@ -2014,7 +2014,7 @@ function drawCurve(points[], t): Scripts are disabled. Showing fallback image. - + @@ -2126,7 +2126,7 @@ function drawCurve(points[], t): Scripts are disabled. Showing fallback image. - + @@ -2175,7 +2175,7 @@ function drawCurve(points[], t): > Scripts are disabled. Showing fallback image. - + @@ -2189,7 +2189,7 @@ function drawCurve(points[], t): > Scripts are disabled. Showing fallback image. - + @@ -2489,7 +2489,7 @@ function getCubicRoots(pa, pb, pc, pd) { > Scripts are disabled. Showing fallback image. - + @@ -2503,7 +2503,7 @@ function getCubicRoots(pa, pb, pc, pd) { > Scripts are disabled. Showing fallback image. - + @@ -2540,14 +2540,14 @@ function getCubicRoots(pa, pb, pc, pd) { > Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. - + @@ -2595,7 +2595,7 @@ function getCubicRoots(pa, pb, pc, pd) { Scripts are disabled. Showing fallback image. - + @@ -2603,7 +2603,7 @@ function getCubicRoots(pa, pb, pc, pd) { Scripts are disabled. Showing fallback image. - + @@ -2628,14 +2628,14 @@ function getCubicRoots(pa, pb, pc, pd) { > Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. - + @@ -2769,7 +2769,7 @@ function getCubicRoots(pa, pb, pc, pd) { Scripts are disabled. Showing fallback image. - + @@ -2803,7 +2803,7 @@ function getCubicRoots(pa, pb, pc, pd) { Scripts are disabled. Showing fallback image. - + @@ -2995,7 +2995,7 @@ function getCubicRoots(pa, pb, pc, pd) { Scripts are disabled. Showing fallback image. - + @@ -3026,7 +3026,7 @@ function getCubicRoots(pa, pb, pc, pd) { > Scripts are disabled. Showing fallback image. - + @@ -3073,7 +3073,7 @@ y = curve.get(t).y Scripts are disabled. Showing fallback image. - + @@ -3135,21 +3135,21 @@ y = curve.get(t).y > Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. - + @@ -3223,7 +3223,7 @@ y = curve.get(t).y Scripts are disabled. Showing fallback image. - + @@ -3252,7 +3252,7 @@ y = curve.get(t).y > Scripts are disabled. Showing fallback image. - + @@ -3267,7 +3267,7 @@ y = curve.get(t).y > Scripts are disabled. Showing fallback image. - + @@ -3382,7 +3382,7 @@ y = curve.get(t).y > Scripts are disabled. Showing fallback image. - + @@ -3406,7 +3406,7 @@ y = curve.get(t).y > Scripts are disabled. Showing fallback image. - + @@ -3438,7 +3438,7 @@ y = curve.get(t).y Scripts are disabled. Showing fallback image. - + @@ -3457,7 +3457,7 @@ y = curve.get(t).y Scripts are disabled. Showing fallback image. - + @@ -3507,7 +3507,7 @@ y = curve.get(t).y Scripts are disabled. Showing fallback image. - + @@ -3556,7 +3556,7 @@ lli = function(line1, line2): > Scripts are disabled. Showing fallback image. - + @@ -3569,7 +3569,7 @@ lli = function(line1, line2): > Scripts are disabled. Showing fallback image. - + @@ -3637,7 +3637,7 @@ lli = function(line1, line2): Scripts are disabled. Showing fallback image. - + @@ -3686,7 +3686,7 @@ lli = function(line1, line2): > Scripts are disabled. Showing fallback image. - + @@ -3701,7 +3701,7 @@ lli = function(line1, line2): > Scripts are disabled. Showing fallback image. - + @@ -3813,7 +3813,7 @@ lli = function(line1, line2): Scripts are disabled. Showing fallback image. - + @@ -3833,7 +3833,7 @@ lli = function(line1, line2): Scripts are disabled. Showing fallback image. - + @@ -3889,7 +3889,7 @@ lli = function(line1, line2): > Scripts are disabled. Showing fallback image. - + @@ -3904,7 +3904,7 @@ lli = function(line1, line2): Scripts are disabled. Showing fallback image. - + @@ -3975,7 +3975,7 @@ for (coordinate, index) in LUT: Scripts are disabled. Showing fallback image. - + @@ -4006,7 +4006,7 @@ for (coordinate, index) in LUT: > Scripts are disabled. Showing fallback image. - + @@ -4025,7 +4025,7 @@ for (coordinate, index) in LUT: Scripts are disabled. Showing fallback image. - + @@ -4049,7 +4049,7 @@ for (coordinate, index) in LUT: > Scripts are disabled. Showing fallback image. - + @@ -4389,7 +4389,7 @@ for (coordinate, index) in LUT: Scripts are disabled. Showing fallback image. - + @@ -4421,7 +4421,7 @@ for (coordinate, index) in LUT: Scripts are disabled. Showing fallback image. - + @@ -4795,7 +4795,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4809,7 +4809,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4841,7 +4841,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4855,7 +4855,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4884,7 +4884,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4898,7 +4898,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4922,7 +4922,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4936,7 +4936,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -5094,7 +5094,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -5109,7 +5109,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -5161,7 +5161,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -5176,7 +5176,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -5214,7 +5214,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5339,7 +5339,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5573,7 +5573,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5652,7 +5652,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5667,7 +5667,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5712,7 +5712,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5734,7 +5734,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5905,7 +5905,7 @@ for(let L = 1; L <= order; L++) { Scripts are disabled. Showing fallback image. - + @@ -5930,7 +5930,7 @@ for(let L = 1; L <= order; L++) { Scripts are disabled. Showing fallback image. - + @@ -5951,7 +5951,7 @@ for(let L = 1; L <= order; L++) { Scripts are disabled. Showing fallback image. - + @@ -5974,7 +5974,7 @@ for(let L = 1; L <= order; L++) { Scripts are disabled. Showing fallback image. - + diff --git a/docs/ja-JP/index.html b/docs/ja-JP/index.html index 6c0fc144..1df4c29d 100644 --- a/docs/ja-JP/index.html +++ b/docs/ja-JP/index.html @@ -33,7 +33,7 @@ - + @@ -435,14 +435,14 @@ Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. - + @@ -476,7 +476,7 @@ Scripts are disabled. Showing fallback image. - + @@ -527,7 +527,7 @@ Scripts are disabled. Showing fallback image. - + @@ -669,7 +669,7 @@ function Bezier(3,t): Scripts are disabled. Showing fallback image. - + @@ -678,7 +678,7 @@ function Bezier(3,t): Scripts are disabled. Showing fallback image. - + @@ -687,7 +687,7 @@ function Bezier(3,t): Scripts are disabled. Showing fallback image. - + @@ -786,7 +786,7 @@ function Bezier(3,t,w[]): Scripts are disabled. Showing fallback image. - + @@ -867,14 +867,14 @@ function RationalBezier(3,t,w[],r[]): Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. - + @@ -964,7 +964,7 @@ function RationalBezier(3,t,w[],r[]): Scripts are disabled. Showing fallback image. - + @@ -1014,7 +1014,7 @@ function RationalBezier(3,t,w[],r[]): Scripts are disabled. Showing fallback image. - + @@ -1023,7 +1023,7 @@ function RationalBezier(3,t,w[],r[]): Scripts are disabled. Showing fallback image. - + @@ -1065,7 +1065,7 @@ function RationalBezier(3,t,w[],r[]): Scripts are disabled. Showing fallback image. - + @@ -1484,7 +1484,7 @@ function drawCurve(points[], t): Scripts are disabled. Showing fallback image. - + @@ -1763,7 +1763,7 @@ function drawCurve(points[], t): > Scripts are disabled. Showing fallback image. - + @@ -1776,7 +1776,7 @@ function drawCurve(points[], t): > Scripts are disabled. Showing fallback image. - + @@ -1850,7 +1850,7 @@ function drawCurve(points[], t): Scripts are disabled. Showing fallback image. - + @@ -1962,7 +1962,7 @@ function drawCurve(points[], t): Scripts are disabled. Showing fallback image. - + @@ -2011,7 +2011,7 @@ function drawCurve(points[], t): > Scripts are disabled. Showing fallback image. - + @@ -2025,7 +2025,7 @@ function drawCurve(points[], t): > Scripts are disabled. Showing fallback image. - + @@ -2325,7 +2325,7 @@ function getCubicRoots(pa, pb, pc, pd) { > Scripts are disabled. Showing fallback image. - + @@ -2339,7 +2339,7 @@ function getCubicRoots(pa, pb, pc, pd) { > Scripts are disabled. Showing fallback image. - + @@ -2376,14 +2376,14 @@ function getCubicRoots(pa, pb, pc, pd) { > Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. - + @@ -2431,7 +2431,7 @@ function getCubicRoots(pa, pb, pc, pd) { Scripts are disabled. Showing fallback image. - + @@ -2439,7 +2439,7 @@ function getCubicRoots(pa, pb, pc, pd) { Scripts are disabled. Showing fallback image. - + @@ -2464,14 +2464,14 @@ function getCubicRoots(pa, pb, pc, pd) { > Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. - + @@ -2605,7 +2605,7 @@ function getCubicRoots(pa, pb, pc, pd) { Scripts are disabled. Showing fallback image. - + @@ -2639,7 +2639,7 @@ function getCubicRoots(pa, pb, pc, pd) { Scripts are disabled. Showing fallback image. - + @@ -2831,7 +2831,7 @@ function getCubicRoots(pa, pb, pc, pd) { Scripts are disabled. Showing fallback image. - + @@ -2862,7 +2862,7 @@ function getCubicRoots(pa, pb, pc, pd) { > Scripts are disabled. Showing fallback image. - + @@ -2909,7 +2909,7 @@ y = curve.get(t).y Scripts are disabled. Showing fallback image. - + @@ -2971,21 +2971,21 @@ y = curve.get(t).y > Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. - + @@ -3059,7 +3059,7 @@ y = curve.get(t).y Scripts are disabled. Showing fallback image. - + @@ -3088,7 +3088,7 @@ y = curve.get(t).y > Scripts are disabled. Showing fallback image. - + @@ -3103,7 +3103,7 @@ y = curve.get(t).y > Scripts are disabled. Showing fallback image. - + @@ -3218,7 +3218,7 @@ y = curve.get(t).y > Scripts are disabled. Showing fallback image. - + @@ -3242,7 +3242,7 @@ y = curve.get(t).y > Scripts are disabled. Showing fallback image. - + @@ -3274,7 +3274,7 @@ y = curve.get(t).y Scripts are disabled. Showing fallback image. - + @@ -3293,7 +3293,7 @@ y = curve.get(t).y Scripts are disabled. Showing fallback image. - + @@ -3343,7 +3343,7 @@ y = curve.get(t).y Scripts are disabled. Showing fallback image. - + @@ -3392,7 +3392,7 @@ lli = function(line1, line2): > Scripts are disabled. Showing fallback image. - + @@ -3405,7 +3405,7 @@ lli = function(line1, line2): > Scripts are disabled. Showing fallback image. - + @@ -3473,7 +3473,7 @@ lli = function(line1, line2): Scripts are disabled. Showing fallback image. - + @@ -3522,7 +3522,7 @@ lli = function(line1, line2): > Scripts are disabled. Showing fallback image. - + @@ -3537,7 +3537,7 @@ lli = function(line1, line2): > Scripts are disabled. Showing fallback image. - + @@ -3649,7 +3649,7 @@ lli = function(line1, line2): Scripts are disabled. Showing fallback image. - + @@ -3669,7 +3669,7 @@ lli = function(line1, line2): Scripts are disabled. Showing fallback image. - + @@ -3725,7 +3725,7 @@ lli = function(line1, line2): > Scripts are disabled. Showing fallback image. - + @@ -3740,7 +3740,7 @@ lli = function(line1, line2): Scripts are disabled. Showing fallback image. - + @@ -3811,7 +3811,7 @@ for (coordinate, index) in LUT: Scripts are disabled. Showing fallback image. - + @@ -3842,7 +3842,7 @@ for (coordinate, index) in LUT: > Scripts are disabled. Showing fallback image. - + @@ -3861,7 +3861,7 @@ for (coordinate, index) in LUT: Scripts are disabled. Showing fallback image. - + @@ -3885,7 +3885,7 @@ for (coordinate, index) in LUT: > Scripts are disabled. Showing fallback image. - + @@ -4225,7 +4225,7 @@ for (coordinate, index) in LUT: Scripts are disabled. Showing fallback image. - + @@ -4257,7 +4257,7 @@ for (coordinate, index) in LUT: Scripts are disabled. Showing fallback image. - + @@ -4631,7 +4631,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4645,7 +4645,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4677,7 +4677,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4691,7 +4691,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4720,7 +4720,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4734,7 +4734,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4758,7 +4758,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4772,7 +4772,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4930,7 +4930,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4945,7 +4945,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4997,7 +4997,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -5012,7 +5012,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -5050,7 +5050,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5175,7 +5175,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5409,7 +5409,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5488,7 +5488,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5503,7 +5503,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5548,7 +5548,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5570,7 +5570,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5741,7 +5741,7 @@ for(let L = 1; L <= order; L++) { Scripts are disabled. Showing fallback image. - + @@ -5766,7 +5766,7 @@ for(let L = 1; L <= order; L++) { Scripts are disabled. Showing fallback image. - + @@ -5787,7 +5787,7 @@ for(let L = 1; L <= order; L++) { Scripts are disabled. Showing fallback image. - + @@ -5810,7 +5810,7 @@ for(let L = 1; L <= order; L++) { Scripts are disabled. Showing fallback image. - + diff --git a/docs/js/custom-element/api/README.md b/docs/js/custom-element/api/README.md index 4d5f7d3c..5d95b1e4 100644 --- a/docs/js/custom-element/api/README.md +++ b/docs/js/custom-element/api/README.md @@ -231,6 +231,7 @@ The following is the list of API functions that can be used to draw... whatever - `this.width` the width of the graphic - `this.height` the height of the graphic +- `this.frame` the current frame (i.e. the number of times `draw()` has run) - `this.panelWidth` the width of a single panel in the graphic, only meaningful in conjunction with `setPanelWidth` (see below) - `this.parameters` the collection of externally passed parameters (via HTML: `data-...` attributes, via JS: a key/value object) - `this.cursor` represents the current mouse/touch cursor state diff --git a/docs/js/custom-element/api/base-api.js b/docs/js/custom-element/api/base-api.js index 40eca775..5f8a603f 100644 --- a/docs/js/custom-element/api/base-api.js +++ b/docs/js/custom-element/api/base-api.js @@ -77,6 +77,7 @@ class BaseAPI { this.addListeners(); this.setSize(width, height); this.currentPoint = false; + this.frame = 0; this.setup(); this.draw(); } @@ -175,7 +176,6 @@ class BaseAPI { this.stopEvent(evt); this.cursor.down = false; this.cursor.move = false; - this.getCursorCoords(evt); } /** @@ -244,6 +244,7 @@ class BaseAPI { * This is the draw (loop) function. */ draw() { + this.frame++; // console.log(`draw`); } diff --git a/docs/js/custom-element/api/graphics-api.js b/docs/js/custom-element/api/graphics-api.js index fd090df2..373d5146 100644 --- a/docs/js/custom-element/api/graphics-api.js +++ b/docs/js/custom-element/api/graphics-api.js @@ -107,11 +107,15 @@ class GraphicsAPI extends BaseAPI { for (let i = 0, e = this.movable.length, p; i < e; i++) { p = this.movable[i]; if (new Vector(p).dist(this.cursor) <= 5) { - this.setCursor(this.HAND); + if (this.canvas.style.cursor !== `none`) { + this.setCursor(this.HAND); + } return; // NOTE: this is a return, not a break! } } - this.setCursor(this.POINTER); + if (this.canvas.style.cursor !== `none`) { + this.setCursor(this.POINTER); + } } } diff --git a/docs/news/2020-09-18.html b/docs/news/2020-09-18.html index a592f73d..e760c3c7 100644 --- a/docs/news/2020-09-18.html +++ b/docs/news/2020-09-18.html @@ -27,7 +27,7 @@ - + @@ -142,13 +142,33 @@
  • Essentially reinventing (a limited form of) Processing.js
  • Writing a custom build system, because I'm exhausted with Webpack and hope to never use it again.
  • Using modern ES module code that runs in both the browser and Node.js.
    • -
  • Chapter content written as easy to read and write markdown format.
    • +
  • + Chapter content written as easy to read and write markdown format: view this blog post's source file. +
  • A custom <graphics-element> element that turns a src="blah.js" into an interactive canvas graphic...
  • ...with that same source code being read in and run by Node.js on a canvas to generate fallback images.
    • + +
    + + + Scripts are disabled. Showing fallback image. + + + +
    + +
    • Real LaTeX code, that gets compiled into optimized SVG using xelatex, pdfcrop, pdf2svg, and - svgo. + svgo:
      • +
    +
    + +
    + +
    • "Lazy loaded everything", so that you get what you need, only when or even just before you need it.
    • Localized content based on a simple filenaming scheme.
    • Nicely formatted HTML, CSS, and JS thanks to prettier.
      • diff --git a/docs/news/2020-09-18.md b/docs/news/2020-09-18.md index 1619027e..f67feb7f 100644 --- a/docs/news/2020-09-18.md +++ b/docs/news/2020-09-18.md @@ -13,10 +13,26 @@ To give a bit of a teaser, some of the things I'll be writing about: - Essentially reinventing (a limited form of) Processing.js - Writing a custom build system, because I'm exhausted with Webpack and hope to never use it again. - Using modern ES module code that runs in both the browser and Node.js. -- Chapter content written as easy to read and write markdown format. -- A custom `` element that turns a `src="blah.js"` into an interactive canvas graphic... +- Chapter content written as easy to read and write markdown format: view this blog post's source file. +- A custom `<graphics-element>` element that turns a `src="blah.js"` into an interactive canvas graphic... - ...with that same source code being read in and run by Node.js _on a canvas_ to generate fallback images. -- Real LaTeX code, that gets compiled into optimized SVG using `xelatex`, `pdfcrop`, `pdf2svg`, and `svgo`. + +
      + +
      + +- Real LaTeX code, that gets compiled into optimized SVG using `xelatex`, `pdfcrop`, `pdf2svg`, and `svgo`: + +
      +\[ +\begin{aligned} + B(t)_{cubic} &= \sum^{n=3}_{k=0}{\ P_{{}_k} \binom{n}{k}(1-t)^{n-k}t^k} \\ + \\ + &= P_{{}_0} (1-t)^3 + 3 P_{{}_1}(1-t)^2t + 3P_{{}_2}(1-t)t^2 + P_{{}_3} t^3 +\end{aligned} +\] +
      + - "Lazy loaded everything", so that you get what you need, only when or even just before you need it. - Localized content based on a simple filenaming scheme. - Nicely formatted HTML, CSS, and JS thanks to `prettier`. diff --git a/docs/news/example.js b/docs/news/example.js new file mode 100644 index 00000000..fe4a8f72 --- /dev/null +++ b/docs/news/example.js @@ -0,0 +1,33 @@ +let bg = `pink`; + +setup() { + setGrid(30, `red`); + setCursor(`none`); + setTextStroke(`white`, 4); + setFontSize(18); +} + +draw() { + clear(bg); + setColor(`#30F0D0`); + circle(this.cursor.x, this.cursor.y, 5); + setColor(`black`); + text(`Frame ${this.frame}`, this.width/2, this.height/2, CENTER); +} + +onMouseDown() { + bg = 'salmon'; + redraw(); +} + +onMouseMove() { + if(this.cursor.down) { + bg = 'orange'; + } + redraw(); +} + +onMouseUp() { + bg = 'pink'; + redraw(); +} diff --git a/docs/news/rss.xml b/docs/news/rss.xml index caf64291..a0d3cb4e 100644 --- a/docs/news/rss.xml +++ b/docs/news/rss.xml @@ -27,10 +27,27 @@ <li>Essentially reinventing (a limited form of) Processing.js</li> <li>Writing a custom build system, because I'm exhausted with Webpack and hope to never use it again.</li> <li>Using modern ES module code that runs in both the browser and Node.js.</li> -<li>Chapter content written as easy to read and write markdown format.</li> +<li>Chapter content written as easy to read and write markdown format: <a href="./news/2020-09-18.md">view this blog post's source file</a>.</li> <li>A custom <code>&lt;graphics-element&gt;</code> element that turns a <code>src="blah.js"</code> into an interactive canvas graphic...</li> <li>...with that same source code being read in and run by Node.js <em>on a canvas</em> to generate fallback images.</li> -<li>Real LaTeX code, that gets compiled into optimized SVG using <code>xelatex</code>, <code>pdfcrop</code>, <code>pdf2svg</code>, and <code>svgo</code>.</li> +</ul> +<blockquote> + <graphics-element title="An example graphic" width="275" height="275" src="./news/example.js" > + <fallback-image> + <span class="view-source">Scripts are disabled. Showing fallback image.</span> + <img width="275px" height="275px" src="./images/news/2020-09-18.html/b465a1526a406578c9806a9985e2dbd0.png" loading="lazy"> + <label>An example graphic</label> + </fallback-image></graphics-element> +</blockquote> + +<ul> +<li>Real LaTeX code, that gets compiled into optimized SVG using <code>xelatex</code>, <code>pdfcrop</code>, <code>pdf2svg</code>, and <code>svgo</code>:</li> +</ul> +<blockquote> +<img class="LaTeX SVG" src="./images/news/2020-09-18.html/24b6ead799277b0d73687d2fc5532a84.svg" width="401px" height="97px" loading="lazy"> +</blockquote> + +<ul> <li>"Lazy loaded everything", so that you get what you need, only when or even just before you need it.</li> <li>Localized content based on a simple filenaming scheme.</li> <li>Nicely formatted HTML, CSS, and JS thanks to <code>prettier</code>.</li> diff --git a/docs/zh-CN/index.html b/docs/zh-CN/index.html index f781937d..a82bb7ea 100644 --- a/docs/zh-CN/index.html +++ b/docs/zh-CN/index.html @@ -33,7 +33,7 @@ - + @@ -418,14 +418,14 @@ Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. - + @@ -456,7 +456,7 @@ Scripts are disabled. Showing fallback image. - + @@ -503,7 +503,7 @@ Scripts are disabled. Showing fallback image. - + @@ -639,7 +639,7 @@ function Bezier(3,t): Scripts are disabled. Showing fallback image. - + @@ -648,7 +648,7 @@ function Bezier(3,t): Scripts are disabled. Showing fallback image. - + @@ -657,7 +657,7 @@ function Bezier(3,t): Scripts are disabled. Showing fallback image. - + @@ -752,7 +752,7 @@ function Bezier(3,t,w[]): Scripts are disabled. Showing fallback image. - + @@ -829,14 +829,14 @@ function RationalBezier(3,t,w[],r[]): Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. - + @@ -919,7 +919,7 @@ function RationalBezier(3,t,w[],r[]): Scripts are disabled. Showing fallback image. - + @@ -968,7 +968,7 @@ function RationalBezier(3,t,w[],r[]): Scripts are disabled. Showing fallback image. - + @@ -977,7 +977,7 @@ function RationalBezier(3,t,w[],r[]): Scripts are disabled. Showing fallback image. - + @@ -1021,7 +1021,7 @@ function RationalBezier(3,t,w[],r[]): Scripts are disabled. Showing fallback image. - + @@ -1456,7 +1456,7 @@ function drawCurve(points[], t): Scripts are disabled. Showing fallback image. - + @@ -1735,7 +1735,7 @@ function drawCurve(points[], t): > Scripts are disabled. Showing fallback image. - + @@ -1748,7 +1748,7 @@ function drawCurve(points[], t): > Scripts are disabled. Showing fallback image. - + @@ -1822,7 +1822,7 @@ function drawCurve(points[], t): Scripts are disabled. Showing fallback image. - + @@ -1934,7 +1934,7 @@ function drawCurve(points[], t): Scripts are disabled. Showing fallback image. - + @@ -1983,7 +1983,7 @@ function drawCurve(points[], t): > Scripts are disabled. Showing fallback image. - + @@ -1997,7 +1997,7 @@ function drawCurve(points[], t): > Scripts are disabled. Showing fallback image. - + @@ -2297,7 +2297,7 @@ function getCubicRoots(pa, pb, pc, pd) { > Scripts are disabled. Showing fallback image. - + @@ -2311,7 +2311,7 @@ function getCubicRoots(pa, pb, pc, pd) { > Scripts are disabled. Showing fallback image. - + @@ -2348,14 +2348,14 @@ function getCubicRoots(pa, pb, pc, pd) { > Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. - + @@ -2403,7 +2403,7 @@ function getCubicRoots(pa, pb, pc, pd) { Scripts are disabled. Showing fallback image. - + @@ -2411,7 +2411,7 @@ function getCubicRoots(pa, pb, pc, pd) { Scripts are disabled. Showing fallback image. - + @@ -2436,14 +2436,14 @@ function getCubicRoots(pa, pb, pc, pd) { > Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. - + @@ -2577,7 +2577,7 @@ function getCubicRoots(pa, pb, pc, pd) { Scripts are disabled. Showing fallback image. - + @@ -2611,7 +2611,7 @@ function getCubicRoots(pa, pb, pc, pd) { Scripts are disabled. Showing fallback image. - + @@ -2803,7 +2803,7 @@ function getCubicRoots(pa, pb, pc, pd) { Scripts are disabled. Showing fallback image. - + @@ -2834,7 +2834,7 @@ function getCubicRoots(pa, pb, pc, pd) { > Scripts are disabled. Showing fallback image. - + @@ -2881,7 +2881,7 @@ y = curve.get(t).y Scripts are disabled. Showing fallback image. - + @@ -2943,21 +2943,21 @@ y = curve.get(t).y > Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. - + Scripts are disabled. Showing fallback image. - + @@ -3031,7 +3031,7 @@ y = curve.get(t).y Scripts are disabled. Showing fallback image. - + @@ -3060,7 +3060,7 @@ y = curve.get(t).y > Scripts are disabled. Showing fallback image. - + @@ -3075,7 +3075,7 @@ y = curve.get(t).y > Scripts are disabled. Showing fallback image. - + @@ -3190,7 +3190,7 @@ y = curve.get(t).y > Scripts are disabled. Showing fallback image. - + @@ -3214,7 +3214,7 @@ y = curve.get(t).y > Scripts are disabled. Showing fallback image. - + @@ -3246,7 +3246,7 @@ y = curve.get(t).y Scripts are disabled. Showing fallback image. - + @@ -3265,7 +3265,7 @@ y = curve.get(t).y Scripts are disabled. Showing fallback image. - + @@ -3315,7 +3315,7 @@ y = curve.get(t).y Scripts are disabled. Showing fallback image. - + @@ -3364,7 +3364,7 @@ lli = function(line1, line2): > Scripts are disabled. Showing fallback image. - + @@ -3377,7 +3377,7 @@ lli = function(line1, line2): > Scripts are disabled. Showing fallback image. - + @@ -3445,7 +3445,7 @@ lli = function(line1, line2): Scripts are disabled. Showing fallback image. - + @@ -3494,7 +3494,7 @@ lli = function(line1, line2): > Scripts are disabled. Showing fallback image. - + @@ -3509,7 +3509,7 @@ lli = function(line1, line2): > Scripts are disabled. Showing fallback image. - + @@ -3621,7 +3621,7 @@ lli = function(line1, line2): Scripts are disabled. Showing fallback image. - + @@ -3641,7 +3641,7 @@ lli = function(line1, line2): Scripts are disabled. Showing fallback image. - + @@ -3697,7 +3697,7 @@ lli = function(line1, line2): > Scripts are disabled. Showing fallback image. - + @@ -3712,7 +3712,7 @@ lli = function(line1, line2): Scripts are disabled. Showing fallback image. - + @@ -3783,7 +3783,7 @@ for (coordinate, index) in LUT: Scripts are disabled. Showing fallback image. - + @@ -3814,7 +3814,7 @@ for (coordinate, index) in LUT: > Scripts are disabled. Showing fallback image. - + @@ -3833,7 +3833,7 @@ for (coordinate, index) in LUT: Scripts are disabled. Showing fallback image. - + @@ -3857,7 +3857,7 @@ for (coordinate, index) in LUT: > Scripts are disabled. Showing fallback image. - + @@ -4197,7 +4197,7 @@ for (coordinate, index) in LUT: Scripts are disabled. Showing fallback image. - + @@ -4229,7 +4229,7 @@ for (coordinate, index) in LUT: Scripts are disabled. Showing fallback image. - + @@ -4603,7 +4603,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4617,7 +4617,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4649,7 +4649,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4663,7 +4663,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4692,7 +4692,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - +       @@ -4706,7 +4706,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4730,7 +4730,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4744,7 +4744,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4902,7 +4902,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4917,7 +4917,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4969,7 +4969,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -4984,7 +4984,7 @@ for p = 1 to points.length-3 (inclusive): > Scripts are disabled. Showing fallback image. - + @@ -5022,7 +5022,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5147,7 +5147,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5381,7 +5381,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5460,7 +5460,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5475,7 +5475,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5520,7 +5520,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5542,7 +5542,7 @@ for p = 1 to points.length-3 (inclusive): Scripts are disabled. Showing fallback image. - + @@ -5713,7 +5713,7 @@ for(let L = 1; L <= order; L++) { Scripts are disabled. Showing fallback image. - + @@ -5738,7 +5738,7 @@ for(let L = 1; L <= order; L++) { Scripts are disabled. Showing fallback image. - + @@ -5759,7 +5759,7 @@ for(let L = 1; L <= order; L++) { Scripts are disabled. Showing fallback image. - + @@ -5782,7 +5782,7 @@ for(let L = 1; L <= order; L++) { Scripts are disabled. Showing fallback image. - + diff --git a/src/build/create-news-pages.js b/src/build/create-news-pages.js index d2e223f1..bd0fcbd0 100644 --- a/src/build/create-news-pages.js +++ b/src/build/create-news-pages.js @@ -3,7 +3,8 @@ import fs from "fs-extra"; import path from "path"; import paths from "../project-paths.js"; import nunjucks from "nunjucks"; -import convert from "./markdown/convert.js"; +import LocaleStrings from "../locale-strings.js"; +import { convertMarkDown } from "./markdown/convert-markdown.js"; nunjucks.configure(paths.html, { autoescape: false }); @@ -15,8 +16,9 @@ const locale = `en-GB`; */ async function createNewsPages() { const start = Date.now(); + const localeStrings = new LocaleStrings(); const files = await getNewsFiles(); - const details = files.filter((f) => !f.includes(`draft`)).map((file) => generatePost(file)); + const details = await Promise.all(files.filter((f) => !f.includes(`draft`)).map((file) => generatePost(file, localeStrings))); console.log(`Processing News posts took ${(Date.now() - start) / 1000}s`); generateNewsIndex(details); generateRSSFeed(details); @@ -37,7 +39,7 @@ function getNewsFiles() { /** * ...docs go here... */ -function generatePost(file) { +async function generatePost(file, localeStrings) { // get the post, and the data its filename implies const filename = path.basename(file).replace(`.md`, `.html`); const postDate = filename.replace(`.html`, ``); @@ -45,7 +47,17 @@ function generatePost(file) { const dateString = new Date(postDate).toUTCString().substring(0, 16); // split off the post's title - let post = convert(data); + let post = await convertMarkDown( + { + imagepath: path.join(paths.images, `news`, filename), + modulepubdir: `./news/`, + file: file, + id: filename, + }, + localeStrings, + data + ); + const title = post.substring(post.indexOf(`

      `) + 4, post.indexOf(`

      `)); post = post.replace(`

      ${title}

      `, ``); diff --git a/src/build/latex/latex-to-svg.js b/src/build/latex/latex-to-svg.js index ee459350..a1255c6c 100644 --- a/src/build/latex/latex-to-svg.js +++ b/src/build/latex/latex-to-svg.js @@ -4,6 +4,7 @@ import paths from "../../project-paths.js"; import { createHash } from "crypto"; import { execSync } from "child_process"; import cleanUp from "./cleanup.js"; +import toPOSIX from "../../to-posix.js"; /** * This converts a latex block into a .svg file by running it through @@ -15,18 +16,18 @@ import cleanUp from "./cleanup.js"; * so that the document won't constantly reflow as it loads images * in. */ -export default async function latexToSVG(latex, chapter, localeStrings, block) { +export default async function latexToSVG(latex, pathdata, localeStrings, block) { + const { imagepath, id } = pathdata; latex = colorPreProcess(latex); const locale = localeStrings.getCurrentLocale(); const hash = createHash(`md5`).update(latex).digest(`hex`); const TeXfilename = path.join(paths.temp, `${hash}.tex`); - const chapterDir = path.join(paths.images, `chapters`, chapter); - fs.ensureDirSync(chapterDir); + fs.ensureDirSync(imagepath); - const SVGfilename = path.join(chapterDir, `${hash}.svg`); - const srcURL = `./images/chapters/${chapter}/${hash}.svg`; + const SVGfilename = path.join(imagepath, `${hash}.svg`); + const srcURL = `./${toPOSIX(path.relative(paths.public, SVGfilename))}`; if (!fs.existsSync(SVGfilename)) { // There is no SVG graphic for the LaTeX code yet, so we need to generate @@ -80,7 +81,7 @@ export default async function latexToSVG(latex, chapter, localeStrings, block) { // Finally: run the conversion try { - process.stdout.write(`- running xelatex for block [${chapter}:${locale}:${block}] (${hash}.tex): `); + process.stdout.write(`- running xelatex for block [${id}:${locale}:${block}] (${hash}.tex): `); runCmd(commands.xetex, hash); process.stdout.write(` - cropping PDF to document content: `); diff --git a/src/build/markdown/convert-markdown.js b/src/build/markdown/convert-markdown.js index a631ae49..a7873981 100644 --- a/src/build/markdown/convert-markdown.js +++ b/src/build/markdown/convert-markdown.js @@ -8,11 +8,11 @@ nunjucks.configure(".", { autoescape: false }); /** * ...docs go here... */ -async function convertMarkDown(chapter, localeStrings, markdown) { +async function convertMarkDown(pathdata, localeStrings, markdown) { try { - markdown = await preprocessGraphicsElement(chapter, localeStrings, markdown); + markdown = await preprocessGraphicsElement(pathdata, localeStrings, markdown); } catch (e) { - console.error(`Unrecoverable error in ${chapter}:${localeStrings.currentLocale}.`); + console.error(`Unrecoverable error in ${pathdata.file}.`); console.error(e); process.exit(1); } @@ -21,7 +21,11 @@ async function convertMarkDown(chapter, localeStrings, markdown) { // uniquely named templating variables, referencing keys in the `latex` array. const { data, latex } = extractLaTeX(markdown); - await Promise.all(Object.keys(latex).map(async (key, pos) => (latex[key] = await latexToSVG(latex[key], chapter, localeStrings, pos + 1)))); + await Promise.all( + Object.keys(latex).map(async (key, pos) => { + latex[key] = await latexToSVG(latex[key], pathdata, localeStrings, pos + 1); + }) + ); let converted = convert(data); return nunjucks.renderString(converted, latex); diff --git a/src/build/markdown/generate-fallback-image.js b/src/build/markdown/generate-fallback-image.js index 55ffd3ae..f59ea06a 100644 --- a/src/build/markdown/generate-fallback-image.js +++ b/src/build/markdown/generate-fallback-image.js @@ -4,6 +4,7 @@ import { createHash } from "crypto"; import { generateGraphicsModule } from "./generate-graphics-module.js"; import paths from "../../project-paths.js"; import getModulePath from "../../get-module-path.js"; +import toPosix from "../../to-posix.js"; const thisModuleDir = getModulePath(import.meta.url); @@ -17,7 +18,7 @@ const thisModuleDir = getModulePath(import.meta.url); * @param {Number} h The sketch height in pixels */ async function generateFallbackImage( - chapter, + pathdata, localeStrings, src, w, @@ -25,6 +26,7 @@ async function generateFallbackImage( dataset = {} // Abstracted from the markup ) { const locale = localeStrings.getCurrentLocale(); + const { imagepath } = pathdata; // Get the sketch code const sourcePath = path.join(paths.chapters, `..`, src); @@ -40,18 +42,18 @@ async function generateFallbackImage( // or not we should generate an image or whether we already did that previously. const hash = createHash(`md5`).update(code).update(JSON.stringify(dataset)).digest(`hex`); - if (locale !== localeStrings.getDefaultLocale()) return hash; + fs.ensureDirSync(imagepath); + const filePath = path.join(imagepath, `${hash}.png`); + const imgUrl = `./${toPosix(path.relative(paths.public, filePath))}`; - const destPath = path.dirname(path.join(paths.images, src)); - fs.ensureDirSync(destPath); + if (locale !== localeStrings.getDefaultLocale()) return imgUrl; - const filePath = path.join(destPath, `${hash}.png`); - if (fs.existsSync(filePath)) return hash; + if (fs.existsSync(filePath)) return imgUrl; // If we get here, we need to actually run the magic: convert // this to a valid JS module code and write this to a temporary // file so we can import it. - const nodeCode = generateGraphicsModule(chapter, code, w, h, dataset); + const nodeCode = generateGraphicsModule(pathdata, code, w, h, dataset); const codeFile = `./nodecode.${Date.now()}.${Math.random()}.js`; const modulePath = path.join(paths.temp, codeFile); fs.writeFileSync(modulePath, nodeCode, `utf8`); @@ -78,7 +80,7 @@ async function generateFallbackImage( console.error(e); } - return hash; + return imgUrl; } export default generateFallbackImage; diff --git a/src/build/markdown/generate-graphics-module.js b/src/build/markdown/generate-graphics-module.js index 22dab777..05317ab3 100644 --- a/src/build/markdown/generate-graphics-module.js +++ b/src/build/markdown/generate-graphics-module.js @@ -3,6 +3,7 @@ import path from "path"; import paths from "../../project-paths.js"; import splitCodeSections from "../../../docs/js/custom-element/lib/split-code-sections.js"; import performCodeSurgery from "../../../docs/js/custom-element/lib/perform-code-surgery.js"; +import toPosix from "../../to-posix.js"; // Get all the values we need to ensure our generated graphics code knows // where it lives, and where it can find all its dependencies @@ -18,8 +19,6 @@ const GRAPHICS_API_LOCATION = path const IMPORT_GLOBALS_FROM_GRAPHICS_API = `${API_IMPORTS} from "${GRAPHICS_API_LOCATION}"`; -const RELATIVE_IMPORT_LOCATION = path.relative(paths.temp, paths.chapters).split(path.sep).join(path.posix.sep); - /** * Node does not have a native canvas available, so we need to shim a number * of objects and functions to ensure it can generate a "first load" snapshot @@ -38,10 +37,13 @@ const canvasBuilder = function canvasBuilder(w, h) { /** * ...docs go here... */ -function generateGraphicsModule(chapter, code, width, height, dataset) { +function generateGraphicsModule(pathdata, code, width, height, dataset) { + const { file } = pathdata; + const relativeWriteDir = toPosix(path.relative(paths.temp, path.dirname(file))); + // step 1: fix the imports code = code.replace(/(import .+? from) "([^"]+)"/g, (_, main, group) => { - return `${main} "${RELATIVE_IMPORT_LOCATION}/${chapter}/${group}"`; + return `${main} "${relativeWriteDir}/${group}"`; }); // step 2: split up the code into "global" vs. "class" code diff --git a/src/build/markdown/preprocess-graphics-element.js b/src/build/markdown/preprocess-graphics-element.js index a70edbe6..75797245 100644 --- a/src/build/markdown/preprocess-graphics-element.js +++ b/src/build/markdown/preprocess-graphics-element.js @@ -18,7 +18,8 @@ function formDataSet(data) { /** * ...docs go here... */ -async function preprocessGraphicsElement(chapter, localeStrings, markdown) { +async function preprocessGraphicsElement(pathdata, localeStrings, markdown) { + const { modulepubdir, imagepath, file, id } = pathdata; const translate = localeStrings.translate; let pos = -1, @@ -57,18 +58,19 @@ async function preprocessGraphicsElement(chapter, localeStrings, markdown) { let src = terms[3]; - if (src.indexOf(`../`) === 0) src = `./chapters/${chapter}/${src}`; + if (src.indexOf(`../`) === 0) src = `${modulepubdir}${src}`; else { if (src[0] !== `.`) src = `./${src}`; - src = src.replace(`./`, `./chapters/${chapter}/`); + src = src.replace(`./`, `${modulepubdir}`); } // ====================================== // this is super fancy functionality: // ====================================== - let imageHash = await generateFallbackImage( - chapter, + // Note: this is a URL relative to the public dir, **not** a file system location. + let imgUrl = await generateFallbackImage( + pathdata, localeStrings, src, width, @@ -77,9 +79,6 @@ async function preprocessGraphicsElement(chapter, localeStrings, markdown) { formDataSet(remainder.trim()) ); - // Note: this is a URL, _not_ a file system location. - let imgUrl = path.join(path.dirname(src.replace(`./`, `./images/`)), `${imageHash}.png`); - const replacement = `width="${width}" height="${height}" src="${src}" ${remainder}> ${translate`disabledMessage`} diff --git a/src/build/process-locale.js b/src/build/process-locale.js index 898c5433..f67dfa5c 100644 --- a/src/build/process-locale.js +++ b/src/build/process-locale.js @@ -39,7 +39,16 @@ async function processLocale(locale, localeStrings, chapterFiles) { localeFiles.map(async (file) => { const chapter = file.match(/chapters\/([^/]+)\/content./)[1]; const markdown = fs.readFileSync(file).toString("utf8"); - chapters[chapter] = await convertMarkDown(chapter, localeStrings, markdown); + chapters[chapter] = await convertMarkDown( + { + imagepath: path.join(paths.images, `chapters`, chapter), + modulepubdir: `./chapters/${chapter}/`, + file: file, + id: chapter, + }, + localeStrings, + markdown + ); }) ); diff --git a/src/locale-strings.js b/src/locale-strings.js index f6724828..a39ce2e5 100644 --- a/src/locale-strings.js +++ b/src/locale-strings.js @@ -67,7 +67,7 @@ const localeStringData = { // ============================= class LocaleStrings { - constructor(locale) { + constructor(locale = `en-GB`) { this.currentLocale = locale; const strings = (this.strings = {}); diff --git a/src/to-posix.js b/src/to-posix.js new file mode 100644 index 00000000..06610c6f --- /dev/null +++ b/src/to-posix.js @@ -0,0 +1,5 @@ +import path from "path"; + +export default function toPOSIX(pathstring) { + return pathstring.split(path.sep).join(path.posix.sep); +}