no grid on lerp

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

@@ -12,6 +12,7 @@ const MOUSE_PRECISION_ZONE = 5;
 const TOUCH_PRECISION_ZONE = 30;
 
 let CURRENT_HUE = 0;
+let CURRENT_CURSOR = `pointer`;
 
 /**
  * Our Graphics API, which is the "public" side of the API.
@@ -276,11 +277,34 @@ class GraphicsAPI extends BaseAPI {
     }
   }
 
+  /**
+   * Set a (CSS) margin around the canvas
+   */
+  setMargin(width = 0) {
+    this.canvas.style.marginTop = `${width}px`;
+    this.canvas.style.marginBottom = `${width}px`;
+  }
+
+  /**
+   * Hide the cursor in a way that we can restore later.
+   */
+  hideCursor() {
+    this.canvas.style.cursor = `none`;
+  }
+
+  /**
+   * Rebind the cursor to what it should be.
+   */
+  showCursor() {
+    this.canvas.style.cursor = CURRENT_CURSOR;
+  }
+
   /**
    * Set the cursor type while the cursor is over the canvas
    */
   setCursor(type) {
-    this.canvas.style.cursor = type;
+    CURRENT_CURSOR = type;
+    this.showCursor();
   }
 
   /**

docs/js/custom-element/api/impart-slider-logic.js

@@ -14,7 +14,7 @@ export default function impartSliderLogic(GraphicsAPI) {
       slider.setAttribute(`value`, value);
       slider.setAttribute(`class`, classes);
       this.element.append(slider);
-      this.setSlider(slider, propname, value, transform);
+      return this.setSlider(slider, propname, value, transform);
     }
   };
 

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

@@ -78,7 +78,7 @@ class GraphicsElement extends CustomElement {
       :host([hidden]) { display: none; }
       :host { max-width: calc(2em + ${this.getAttribute(`width`)}px); }
       :host style { display: none; }
-      :host .top-title { display: flex; flex-direction: row; justify-content: space-between; }
+      :host .top-title { display: flex; flex-direction: row-reverse; justify-content: space-between; }
       :host canvas { position: relative; z-index: 1; display: block; margin: auto; border-radius: 0; box-sizing: content-box!important; border: 1px solid lightgrey; }
       :host canvas:focus { border: 1px solid red; }
       :host a.view-source { font-size: 60%; text-decoration: none; }
@@ -204,6 +204,8 @@ class GraphicsElement extends CustomElement {
       return `${main} "${modulebase}${group}"`;
     });
 
+    this.linkableCode = code;
+
     // Then, step 2: split up the code into "global" vs. "class" code.
     const split = splitCodeSections(code);
     const globalCode = split.quasiGlobal;
@@ -328,19 +330,21 @@ class GraphicsElement extends CustomElement {
     const toptitle = document.createElement(`div`);
     toptitle.classList.add(`top-title`);
 
-    const a = document.createElement(`a`);
-    a.classList.add(`view-source`);
-    a.textContent = this.getAttribute(`viewSource`) || `view source`;
-    a.href = this.src;
-    a.target = `_blank`;
-    toptitle.append(a);
-
     const r = document.createElement(`button`);
     r.classList.add(`reset`);
     r.textContent = this.getAttribute(`reset`) || `reset`;
     r.addEventListener(`click`, () => this.reset());
     toptitle.append(r);
 
+    if (this.src) {
+      const a = document.createElement(`a`);
+      a.classList.add(`view-source`);
+      a.textContent = this.getAttribute(`viewSource`) || `view source`;
+      a.href = this.src;
+      a.target = `_blank`;
+      toptitle.append(a);
+    }
+
     if (this.label) slotParent.insertBefore(toptitle, this.canvas);
   }
 }