Squircle form controls are working

tim-harding · Oct 6, 2024 · 2f29635 · 2f29635
1 parent 802249e
commit 2f29635
Show file tree

Hide file tree

Showing 4 changed files with 168 additions and 35 deletions.
diff --git a/demo/assets/css/style.scss b/demo/assets/css/style.scss
@@ -13,6 +13,68 @@
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-style: normal;
+
+  /*********************************** 
+   * Colors reference:               *
+   * https://www.radix-ui.com/colors *
+   ***********************************/
+
+  /***************
+   * Backgrounds *
+   ***************/
+  /* 11-12 text  */
+  --slate-1: #111113;
+  /* 11-12 text  */
+  --slate-2: #18191b;
+
+  /**************************
+   * Interactive components *
+   **************************/
+  /* 11 labels, 12 text */
+  --slate-3: #212225;
+  /* 11-12 labels */
+  --slate-4: #272a2d;
+  /* 12 labels */
+  --slate-5: #2e3135;
+
+  /**************************
+   * Borders and separators *
+   **************************/
+  /* 1-5 backgrounds */
+  --slate-6: #363a3f;
+  /* 1-5 backgrounds */
+  --slate-7: #43484e;
+  /* 1-5 backgrounds */
+  --slate-8: #5a6169;
+
+  /****************
+   * Solid colors *
+   ****************/
+  /* White text */
+  --slate-9: #696e77;
+  /* White text */
+  --slate-10: #777b84;
+
+  /*******************
+   * Accessible text *
+   *******************/
+  /* Background colors */
+  --slate-11: #b0b4ba;
+  /* Background colors */
+  --slate-12: #edeef0;
+
+  --violet-1: #14121f;
+  --violet-2: #1b1525;
+  --violet-3: #291f43;
+  --violet-4: #33255b;
+  --violet-5: #3c2e69;
+  --violet-6: #473876;
+  --violet-7: #56468b;
+  --violet-8: #6958ad;
+  --violet-9: #6e56cf;
+  --violet-10: #7d66d9;
+  --violet-11: #baa7ff;
+  --violet-12: #e2ddfe;
 }
 
 body {
@@ -34,16 +96,24 @@ th-squircle {
 }
 
 th-tester {
-  background-color: lightgray;
   display: grid;
   grid-template-rows: 1fr min-content;
   grid-template-areas: "drag-area" "controls";
+
+  & > form {
+    display: grid;
+    grid-template-columns: max-content 1fr max-content 1fr;
+    column-gap: 2rem;
+    row-gap: 1rem;
+    grid-auto-rows: max-content;
+    padding-top: 1rem;
+  }
 }
 
 th-drag-area {
   position: relative;
   grid-area: "drag-area";
-  background-color: gray;
+  border: 2px solid lightgray;
 
   & > th-squircle {
     position: absolute;
@@ -60,3 +130,10 @@ th-corner {
   border-radius: 50%;
   transform: translateX(-50%) translateY(-50%);
 }
+
+th-control {
+  display: grid;
+  grid-column-end: span 2;
+  grid-template-columns: subgrid;
+  align-items: center;
+}
diff --git a/demo/assets/js/squircle-canvas.js b/demo/assets/js/squircle-canvas.js
@@ -61,7 +61,7 @@ export default class SquircleCanvas extends HTMLElement {
         canvas.width = Math.round(this._width);
         canvas.height = Math.round(this._height);
         ctx.scale(devicePixelRatio, devicePixelRatio);
-        draw(ctx, this._width, this._height, this._radius);
+        this._draw();
       }
     });
     observer.observe(this);
@@ -103,28 +103,49 @@ export default class SquircleCanvas extends HTMLElement {
   }
 
   _scheduleRedraw() {
-    if (this._animationFrame < 0) return;
+    if (this._animationFrame >= 0) return;
 
     const context = this._context;
     if (context === null) return;
 
     this._animationFrame = requestAnimationFrame(() => {
       this._animationFrame = -1;
-      draw(context, this._width, this._height, this._radius);
+      this._draw();
     });
   }
-}
 
-/**
- * @param {CanvasRenderingContext2D} ctx
- * @param {number} width
- * @param {number} height
- * @param {number} radius
- */
-function draw(ctx, width, height, radius) {
-  ctx.reset();
-  ctx.fillStyle = "black";
-  const l = Math.min(width, height) / 2;
-  const r = Math.min(l, radius);
-  paint(ctx, 0, 0, width, height, r);
+  _draw() {
+    let {
+      _context: ctx,
+      _width: w,
+      _height: h,
+      _radius: r,
+      _fill: fill,
+      _borderWidth: bw,
+      _borderColor: bc,
+    } = this;
+    if (ctx === null) return;
+
+    const l = Math.min(w, h) / 2;
+    r = Math.min(l, r);
+
+    ctx.reset();
+
+    if (bc !== "transparent" && bw > 0) {
+      ctx.fillStyle = this._borderColor;
+      paint(ctx, 0, 0, w, h, r);
+    }
+
+    if (fill !== "transparent") {
+      ctx.fillStyle = fill;
+      paint(
+        ctx,
+        bw,
+        bw,
+        w - bw * 2,
+        h - bw * 2,
+        r - this._borderWidth / Math.SQRT2,
+      );
+    }
+  }
 }
diff --git a/demo/assets/js/tester.js b/demo/assets/js/tester.js
@@ -13,11 +13,23 @@ export class Tester extends HTMLElement {
 
   constructor() {
     super();
+    const listen = listenPassive.bind(this, this);
+    listen("th-control__change", this._handleControlChange);
   }
 
   connectedCallback() {
     this._squircle = this.querySelector("th-squircle");
   }
+
+  /**
+   * @param {ControlEvent} event
+   */
+  _handleControlChange(event) {
+    const squircle = this._squircle;
+    if (squircle === null) return;
+    const { aspect, value } = event.detail;
+    squircle.setAttribute(aspect, value);
+  }
 }
 
 const SIDE_OFFSET = 32;
@@ -37,7 +49,6 @@ export class DragArea extends HTMLElement {
     const listen = listenPassive.bind(this, this);
     listen("th-corner__update", this._handleCornerUpdate);
     listen("th-corner__register", this._handleCornerRegister);
-    listen("th-control__change", this._handleControlChange);
   }
 
   connectedCallback() {
@@ -125,13 +136,6 @@ export class DragArea extends HTMLElement {
     squircle.style.width = `${width}px`;
     squircle.style.height = `${height}px`;
   }
-
-  /**
-   * @param {ControlEvent} event
-   */
-  _handleControlChange(event) {
-    console.log(event);
-  }
 }
 
 export class Corner extends HTMLElement {
@@ -217,8 +221,10 @@ export class Control extends HTMLElement {
       return;
     }
 
-    const listen = listenPassive.bind(this, this);
-    listen("change", this._handleChange);
+    const listen = listenPassive.bind(this, input);
+    listen("input", this._handleChange);
+
+    this._emitChange(input);
   }
 
   /**
@@ -236,12 +242,19 @@ export class Control extends HTMLElement {
   }
 
   /**
-   * @param {InputEvent} inputEvent
+   * @param {InputEvent} event
+   */
+  _handleChange(event) {
+    const input = event.target;
+    if (!(input instanceof HTMLInputElement)) return;
+    this._emitChange(input);
+  }
+
+  /**
+   * @param {HTMLInputElement} input
    */
-  _handleChange(inputEvent) {
-    const target = inputEvent.target;
-    if (!(target instanceof HTMLInputElement)) return;
-    const value = target.value;
+  _emitChange(input) {
+    const value = input.value;
     const event = new CustomEvent("th-control__change", {
       detail: { value, aspect: this._aspect },
       bubbles: true,

diff --git a/demo/index.html b/demo/index.html
@@ -43,12 +43,34 @@
       <form>
         <th-control aspect="radius">
           <label for="tester-input-radius">Radius</label>
-          <input id="tester-input-radius" type="range" />
+          <input
+            id="tester-input-radius"
+            type="range"
+            min="0"
+            max="64"
+            value="16"
+          />
         </th-control>
 
         <th-control aspect="fill">
           <label for="tester-input-fill">Fill</label>
-          <input id="tester-input-fill" type="color" />
+          <input id="tester-input-fill" type="color" value="#0090FF" />
+        </th-control>
+
+        <th-control aspect="border-width">
+          <label for="tester-input-border-radius">Border width</label>
+          <input
+            id="tester-input-border-radius"
+            type="range"
+            min="0"
+            max="64"
+            value="4"
+          />
+        </th-control>
+
+        <th-control aspect="border-color">
+          <label for="tester-input-border-color">Border color</label>
+          <input id="tester-input-border-color" type="color" value="#205D9E" />
         </th-control>
       </form>
     </th-tester>