Drag corners anywhere, still works

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

Hide file tree

Showing 4 changed files with 20 additions and 13 deletions.
diff --git a/demo/assets/css/style.scss b/demo/assets/css/style.scss
@@ -29,6 +29,7 @@ body {
 }
 
 th-squircle {
+  display: grid;
   contain: strict;
 }
 

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);
+        draw(ctx, this._width, this._height, this._radius);
       }
     });
     observer.observe(this);
@@ -110,7 +110,7 @@ export default class SquircleCanvas extends HTMLElement {
 
     this._animationFrame = requestAnimationFrame(() => {
       this._animationFrame = -1;
-      draw(context, this._width, this._height);
+      draw(context, this._width, this._height, this._radius);
     });
   }
 }
@@ -119,9 +119,12 @@ export default class SquircleCanvas extends HTMLElement {
  * @param {CanvasRenderingContext2D} ctx
  * @param {number} width
  * @param {number} height
+ * @param {number} radius
  */
-function draw(ctx, width, height) {
+function draw(ctx, width, height, radius) {
   ctx.reset();
   ctx.fillStyle = "black";
-  paint(ctx, 0, 0, width, height, 10);
+  const l = Math.min(width, height) / 2;
+  const r = Math.min(l, radius);
+  paint(ctx, 0, 0, width, height, r);
 }
diff --git a/demo/assets/js/tester.js b/demo/assets/js/tester.js
@@ -110,17 +110,20 @@ export class DragArea extends HTMLElement {
   }
 
   _updateSquircleCorners() {
-    const x = this._l;
-    const y = this._t;
-    const w = this._r - x;
-    const h = this._b - y;
+    const { _l: l, _r: r, _t: t, _b: b } = this;
+    const xMin = Math.min(l, r);
+    const xMax = Math.max(l, r);
+    const yMin = Math.min(t, b);
+    const yMax = Math.max(t, b);
+    const width = xMax - xMin;
+    const height = yMax - yMin;
 
     const squircle = this._squircle;
     if (squircle === null) return;
-    squircle.style.left = `${x}px`;
-    squircle.style.top = `${y}px`;
-    squircle.style.width = `${w}px`;
-    squircle.style.height = `${h}px`;
+    squircle.style.left = `${xMin}px`;
+    squircle.style.top = `${yMin}px`;
+    squircle.style.width = `${width}px`;
+    squircle.style.height = `${height}px`;
   }
 
   /**

diff --git a/demo/index.html b/demo/index.html
@@ -35,9 +35,9 @@
   <body class="poppins-regular">
     <th-tester>
       <th-drag-area>
+        <th-squircle radius="16"></th-squircle>
         <th-corner side="top-left"></th-corner>
         <th-corner side="bottom-right"></th-corner>
-        <th-squircle></th-squircle>
       </th-drag-area>
 
       <form>
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,6 +29,7 @@ body { @@
     }
     th-squircle {
+      display: grid;
       contain: strict;
     }
@@ Expand Down @@