some polish

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

@@ -152,6 +152,11 @@ class GraphicsAPI extends BaseAPI {
     this.currentPoint = false;
   }
 
+  setup() {
+    super.setup();
+    this.setGrid(20, `#F0F0F0`);
+  }
+
   resetMovable(...allpoints) {
     this.movable.splice(0, this.movable.length);
     if (allpoints) this.setMovable(...allpoints);
@@ -334,6 +339,7 @@ class GraphicsAPI extends BaseAPI {
     y = y ? y : x; // NOTE: this turns y=0 into y=x, which is fine. Scaling by 0 is really silly =)
     this.ctx.scale(x, y);
   }
+
   /**
    * transforms: screen to world
    */
@@ -564,6 +570,22 @@ class GraphicsAPI extends BaseAPI {
     this.ctx.restoreStyle();
   }
 
+  /**
+   * set the default grid size and color
+   * @param {*} size
+   * @param {*} color
+   */
+  setGrid(size, color) {
+    this._gridParams = { size, color };
+  }
+
+  /**
+   * disable drawing a grid when clearing.
+   */
+  noGrid() {
+    this._gridParams = false;
+  }
+
   /**
    * Reset the canvas bitmap to a uniform color.
    */
@@ -574,6 +596,12 @@ class GraphicsAPI extends BaseAPI {
     this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
     this.ctx.restoreStyle();
     if (!preserveTransforms) this.resetTransform();
+    if (this._gridParams) {
+      this.setStroke(this._gridParams.color);
+      this.translate(0.5, 0.5);
+      this.drawGrid(this._gridParams.size);
+      this.translate(-0.5, -0.5);
+    }
   }
 
   /**

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

@@ -134,6 +134,7 @@ class GraphicsElement extends CustomElement {
     if (codeElement) {
       src = codeElement.getAttribute("src");
       if (src) {
+        this.src = src;
         code = await fetch(src).then((response) => response.text());
       } else {
         code = codeElement.textContent;
@@ -141,6 +142,7 @@ class GraphicsElement extends CustomElement {
     } else {
       src = this.getAttribute("src");
       if (src) {
+        this.src = src;
         code = await fetch(src).then((response) => response.text());
       } else {
         code = this.textContent;
@@ -173,7 +175,6 @@ class GraphicsElement extends CustomElement {
    * Transform the graphics source code into global and class code.
    */
   processSource(src, code, rerender = false) {
-    this.rawCode = code;
     if (this.script) {
       if (this.script.parentNode) {
         this.script.parentNode.removeChild(this.script);
@@ -310,9 +311,7 @@ class GraphicsElement extends CustomElement {
     const a = document.createElement("a");
     a.classList.add("view-source");
     a.textContent = `view source`;
-    a.href = new URL(
-      `data:text/plain;charset=utf-8,${encodeURIComponent(this.rawCode)}`
-    );
+    a.href = this.src;
     a.target = `_blank`;
     if (this.label) slotParent.insertBefore(a, this.canvas);
   }

docs/js/site/disqus.js

@@ -0,0 +1,32 @@
+const comments = document.getElementById(`disqus_thread`);
+
+document.addEventListener("scroll", scrollHandler, { passive: true });
+
+function scrollHandler() {
+  var bbox = comments.getBoundingClientRect();
+  var top = bbox.top;
+  var limit = window.innerHeight;
+  if (top < limit) {
+    loadDisqus();
+  }
+}
+
+let loadDisqus = () => {
+  console.log(`loading Disqus comments`);
+
+  globalThis.disqus_config = function () {
+    this.page.url = "https://pomax.github.io/bezierinfo";
+    this.page.identifier = "bezierinfo";
+  };
+
+  const script = document.createElement("script");
+  script.src = "https://bezierinfo.disqus.com/embed.js";
+  script.async = true;
+  script.setAttribute("data-timestamp", Date.now());
+  document.head.appendChild(script);
+
+  loadDisqus = () => {};
+  document.removeEventListener("scroll", scrollHandler);
+};
+
+scrollHandler();