Use setters for corner position

tim-harding · Oct 7, 2024 · fa7fbba · fa7fbba
1 parent 66c2ec0
commit fa7fbba
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 29 deletions.
diff --git a/demo/assets/js/control.js b/demo/assets/js/control.js
@@ -1,7 +1,7 @@
 import { listenPassive } from "./shared.js";
 
 export class Control extends HTMLElement {
-  _aspect = "";
+  #aspect = "";
 
   static get observedAttributes() {
     return ["aspect"];
@@ -32,7 +32,7 @@ export class Control extends HTMLElement {
   attributeChangedCallback(name, _, newValue) {
     switch (name) {
       case "aspect": {
-        this._aspect = newValue;
+        this.#aspect = newValue;
         break;
       }
     }
@@ -55,7 +55,7 @@ export class Control extends HTMLElement {
     const event = new CustomEvent("th-control__change", {
       detail: {
         value: input.type === "range" ? `${value}px` : value,
-        aspect: this._aspect,
+        aspect: this.#aspect,
       },
       bubbles: true,
     });

diff --git a/demo/assets/js/corner.js b/demo/assets/js/corner.js
@@ -2,11 +2,29 @@ import { listenPassive } from "./shared.js";
 import { loaded } from "./loading.js";
 
 export class Corner extends HTMLElement {
-  _isPressed = false;
-  _side = "";
+  #isPressed = false;
+  #side = "";
+
+  get side() {
+    return this.#side;
+  }
+
+  /**
+   * @param {string} value
+   */
+  set x(value) {
+    this.style.left = value;
+  }
+
+  /**
+   * @param {string} value
+   */
+  set y(value) {
+    this.style.top = value;
+  }
 
   static get observedAttributes() {
-    return ["side", "x", "y"];
+    return ["side"];
   }
 
   constructor() {
@@ -26,7 +44,7 @@ export class Corner extends HTMLElement {
   attributeChangedCallback(name, _, newValue) {
     switch (name) {
       case "side": {
-        this._side = newValue;
+        this.#side = newValue;
         loaded.then(() => {
           const event = new CustomEvent("th-corner__register", {
             bubbles: true,
@@ -35,35 +53,25 @@ export class Corner extends HTMLElement {
         });
         break;
       }
-
-      case "x": {
-        this.style.left = newValue;
-        break;
-      }
-
-      case "y": {
-        this.style.top = newValue;
-        break;
-      }
     }
   }
 
   _handleMouseDown() {
-    this._isPressed = true;
+    this.#isPressed = true;
   }
 
   _handleMouseUp() {
-    this._isPressed = false;
+    this.#isPressed = false;
   }
 
   /**
    * @param {MouseEvent} mouseEvent
    */
   _handleMouseMove(mouseEvent) {
-    if (!this._isPressed) return;
+    if (!this.#isPressed) return;
     const { clientX: x, clientY: y } = mouseEvent;
     const event = new CustomEvent("th-corner__update", {
-      detail: { x, y, side: this._side },
+      detail: { x, y, side: this.#side },
       bubbles: true,
     });
     this.dispatchEvent(event);

diff --git a/demo/assets/js/drag-area.js b/demo/assets/js/drag-area.js
@@ -36,21 +36,21 @@ export class DragArea extends HTMLElement {
     const corner = event.target;
     if (!(corner instanceof Corner)) return;
 
-    switch (corner._side) {
+    switch (corner.side) {
       case "top-left": {
-        corner.setAttribute("x", `${this._l}px`);
-        corner.setAttribute("y", `${this._t}px`);
+        corner.x = `${this._l}px`;
+        corner.y = `${this._t}px`;
         break;
       }
 
       case "bottom-right": {
-        corner.setAttribute("x", `${this._r}px`);
-        corner.setAttribute("y", `${this._b}px`);
+        corner.x = `${this._r}px`;
+        corner.y = `${this._b}px`;
         break;
       }
 
       default: {
-        console.warn(`Unexpected corner side: ${corner._side}`);
+        console.warn(`Unexpected corner side: ${corner.side}`);
         break;
       }
     }
@@ -69,8 +69,8 @@ export class DragArea extends HTMLElement {
     const x = Math.max(0, Math.min(width, xViewport - xSelf));
     const y = Math.max(0, Math.min(height, yViewport - ySelf));
 
-    corner.setAttribute("x", `${x}px`);
-    corner.setAttribute("y", `${y}px`);
+    corner.x = `${x}px`;
+    corner.y = `${y}px`;
 
     switch (side) {
       case "top-left": {