.

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

@@ -194,6 +194,29 @@ class GraphicsAPI extends BaseAPI {
     }
   }
 
+  /**
+   * Update a slider with new min/max/step parameters, and value.
+   *
+   * @param {*} propname
+   * @param {*} min
+   * @param {*} max
+   * @param {*} step
+   * @param {*} value
+   */
+  updateSlider(propname, min, max, step, value) {
+    let slider = this._sliders[propname];
+
+    if (!slider) {
+      throw new Error(`this.${propname} has no associated slider.`);
+    }
+
+    slider.setAttribute(`min`, min);
+    slider.setAttribute(`max`, max);
+    slider.setAttribute(`step`, step);
+    slider.setAttribute(`value`, value);
+    slider.updateProperty(value);
+  }
+
   /**
    * Set up a slider to control a named, numerical property in the sketch.
    *
@@ -207,6 +230,8 @@ class GraphicsAPI extends BaseAPI {
       throw new Error(`this.${propname} already exists: cannot bind slider.`);
     }
 
+    this._sliders = this._sliders || {};
+
     let propLabel = propname.replace(`!`, ``);
     propname = propLabel === propname ? propname : false;
 
@@ -225,6 +250,7 @@ class GraphicsAPI extends BaseAPI {
       wrapper.append(label);
       slider.parentNode.replaceChild(wrapper, slider);
       slider.setAttribute(`class`, `slider`);
+      this._sliders[propname] = slider;
       wrapper.append(slider);
       let valueField = create(`label`);
       valueField.classList.add(`slider-value`);
@@ -239,7 +265,7 @@ class GraphicsAPI extends BaseAPI {
       return undefined;
     }
 
-    const updateProperty = (evt) => {
+    slider.updateProperty = (evt) => {
       let value = parseFloat(slider.value);
       ui.update(value);
       try {
@@ -258,8 +284,8 @@ class GraphicsAPI extends BaseAPI {
     };
 
     slider.value = initial;
-    updateProperty({ target: { value: initial } });
-    slider.listen(`input`, updateProperty);
+    slider.updateProperty({ target: { value: initial } });
+    slider.listen(`input`, (evt) => slider.updateProperty(evt));
 
     return slider;
   }

docs/js/custom-element/api/types/bezier.js

@@ -77,7 +77,6 @@ class Bezier extends Original {
   drawCurve(color = `#333`) {
     const ctx = this.ctx;
     ctx.cacheStyle();
-    ctx.lineWidth = 1;
     ctx.strokeStyle = color;
     ctx.beginPath();
     const lut = this.getLUT().slice();

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

@@ -6,7 +6,14 @@ import performCodeSurgery from "./lib/perform-code-surgery.js";
 const MODULE_URL = import.meta.url;
 const MODULE_PATH = MODULE_URL.slice(0, MODULE_URL.lastIndexOf(`/`));
 
-// Really wish this was baked into the DOM API...
+// Until global `await` gets added to JS, we need to declare this "constant"
+// using the `let` keyword instead, and then boostrap its value during the
+// `loadSource` call (using the standard if(undefined){assignvalue} pattern).
+let IMPORT_GLOBALS_FROM_GRAPHICS_API = undefined;
+
+// Really wish this was baked into the DOM API. Having to use an
+// IntersectionObserver with bounding box fallback is super dumb
+// from an authoring perspective.
 function isInViewport(e) {
   if (typeof window === `undefined`) return true;
   if (typeof document === `undefined`) return true;
@@ -110,6 +117,15 @@ class GraphicsElement extends CustomElement {
   async loadSource() {
     debugLog(`loading ${this.getAttribute(`src`)}`);
 
+    if (!IMPORT_GLOBALS_FROM_GRAPHICS_API) {
+      const importStatement = (
+        await fetch(`${MODULE_PATH}/api/graphics-api.js`).then((r) => r.text())
+      )
+        .match(/(export { [^}]+ })/)[0]
+        .replace(`export`, `import`);
+      IMPORT_GLOBALS_FROM_GRAPHICS_API = `${importStatement} from "${MODULE_PATH}/api/graphics-api.js"`;
+    }
+
     let src = false;
     let codeElement = this.querySelector(`program-code`);
 
@@ -207,7 +223,7 @@ class GraphicsElement extends CustomElement {
        * Program source: ${src}
        * Data attributes: ${JSON.stringify(this.dataset)}
        */
-      import { GraphicsAPI, Bezier, BSpline, Vector, Matrix, Shape } from "${MODULE_PATH}/api/graphics-api.js";
+      ${IMPORT_GLOBALS_FROM_GRAPHICS_API};
 
       ${globalCode}