@editframe/elements 0.20.4-beta.0 → 0.23.6-beta.0

package/src/gui/EFDial.browsertest.ts

@@ -0,0 +1,84 @@
+import { html, render } from "lit";
+import { afterEach, describe, expect, test } from "vitest";
+import type { EFDial } from "./EFDial";
+import "./EFDial";
+
+describe("EFDial", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  test("should render with default value", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    render(html`<ef-dial></ef-dial>`, container);
+    const el = container.querySelector<EFDial>("ef-dial")!;
+    await el.updateComplete;
+
+    const centerText = el.shadowRoot!.querySelector(
+      ".center-text",
+    ) as HTMLDivElement;
+    expect(centerText.textContent).to.equal("0°");
+  });
+
+  test("should render with provided value", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    render(html`<ef-dial .value=${45}></ef-dial>`, container);
+    const el = container.querySelector<EFDial>("ef-dial")!;
+    await el.updateComplete;
+
+    const centerText = el.shadowRoot!.querySelector(
+      ".center-text",
+    ) as HTMLDivElement;
+    expect(centerText.textContent).to.equal("45°");
+  });
+
+  test("should update value on drag and emit 'change' event", async () => {
+    const container = document.createElement("div");
+    container.style.width = "200px";
+    container.style.height = "200px";
+    document.body.appendChild(container);
+    render(html`<ef-dial></ef-dial>`, container);
+    const el = container.querySelector<EFDial>("ef-dial")!;
+    await el.updateComplete;
+
+    let changedValue: number | undefined;
+    el.addEventListener("change", (e) => {
+      changedValue = (e as CustomEvent).detail.value;
+    });
+
+    const dial = el.shadowRoot!.querySelector(
+      ".dial-container",
+    ) as HTMLDivElement;
+    const pointerId = 1;
+    const downEvent = new PointerEvent("pointerdown", {
+      clientX: 100,
+      clientY: 20,
+      bubbles: true,
+      composed: true,
+      pointerId,
+    });
+    dial.dispatchEvent(downEvent);
+
+    const moveEvent = new PointerEvent("pointermove", {
+      clientX: 180,
+      clientY: 100,
+      bubbles: true,
+      composed: true,
+      pointerId,
+    });
+    dial.dispatchEvent(moveEvent);
+    await el.updateComplete;
+
+    expect(el.value).to.be.closeTo(90, 0.1); // Expect a value around 90 degrees
+    expect(changedValue).to.be.closeTo(el.value, 0.1);
+
+    // Test normalization to 0-360
+    el.value = -10; // Set a negative value
+    expect(el.value).to.be.closeTo(350, 0.1); // Should normalize to 350
+
+    el.value = 370; // Set a value > 360
+    expect(el.value).to.be.closeTo(10, 0.1); // Should normalize to 10
+  });
+});

package/src/gui/EFDial.ts

@@ -0,0 +1,172 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+export interface DialChangeDetail {
+  value: number;
+}
+
+@customElement("ef-dial")
+export class EFDial extends LitElement {
+  @property({ type: Number })
+  set value(newValue: number) {
+    // Normalize to 0-360 range
+    newValue = newValue % 360;
+    if (newValue < 0) {
+      newValue += 360;
+    }
+    // Limit to 6 significant digits
+    newValue = Number.parseFloat(newValue.toPrecision(6));
+
+    const oldValue = this._value;
+    this._value = newValue;
+    this.requestUpdate("value", oldValue);
+  }
+
+  get value() {
+    return this._value;
+  }
+
+  private _value = 0;
+
+  @state()
+  private isDragging = false;
+
+  private dragStartAngle = 0;
+  private dragStartValue = 0;
+
+  static styles = css`
+    :host {
+        display: inline-block;
+        width: 200px; /* Default size, can be overridden by CSS */
+        height: 200px; /* Default size, can be overridden by CSS */
+    }
+    .dial-container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background-color: #f3f4f6;
+      border: 2px solid #d1d5db;
+    }
+    .handle {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        border: 2px solid #3b82f6;
+        background-color: white;
+        cursor: grab;
+    }
+    .handle.dragging {
+        background-color: #3b82f6;
+        cursor: grabbing;
+    }
+    .center-text {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: white;
+        border: 1px solid #d1d5db;
+        padding: 2px 4px;
+        border-radius: 4px;
+        font-family: monospace;
+        font-size: 12px;
+    }
+  `;
+
+  private getAngleFromPoint(clientX: number, clientY: number, rect: DOMRect) {
+    const center = this.clientWidth / 2;
+    const x = clientX - rect.left - center;
+    const y = clientY - rect.top - center;
+    return Math.atan2(y, x);
+  }
+
+  private handlePointerDown(e: PointerEvent) {
+    e.preventDefault();
+    this.isDragging = true;
+    const rect = this.getBoundingClientRect();
+    this.dragStartAngle = this.getAngleFromPoint(e.clientX, e.clientY, rect);
+    this.dragStartValue = this.value;
+    this.setPointerCapture(e.pointerId);
+    this.addEventListener("pointermove", this.handlePointerMove);
+    this.addEventListener("pointerup", this.handlePointerUp);
+  }
+
+  private handlePointerMove(e: PointerEvent) {
+    if (!this.isDragging) return;
+
+    const rect = this.getBoundingClientRect();
+    const currentAngle = this.getAngleFromPoint(e.clientX, e.clientY, rect);
+    const angleDelta = currentAngle - this.dragStartAngle;
+
+    let newValue = this.dragStartValue + (angleDelta * 180) / Math.PI;
+
+    if (e.shiftKey) {
+      newValue = Math.round(newValue / 15) * 15;
+    }
+
+    // Normalize to 0-360 range
+    newValue = newValue % 360;
+    if (newValue < 0) {
+      newValue += 360;
+    }
+
+    // Limit to 6 significant digits
+    newValue = Number.parseFloat(newValue.toPrecision(6));
+
+    this.value = newValue;
+    this.dispatchEvent(
+      new CustomEvent<DialChangeDetail>("change", {
+        detail: { value: this.value },
+      }),
+    );
+  }
+
+  private handlePointerUp(e: PointerEvent) {
+    this.isDragging = false;
+    this.releasePointerCapture(e.pointerId);
+    this.removeEventListener("pointermove", this.handlePointerMove);
+    this.removeEventListener("pointerup", this.handlePointerUp);
+  }
+
+  render() {
+    const center = this.clientWidth / 2;
+    const radius = center - 20;
+    const handleAngle = (this.value * Math.PI) / 180;
+    const handleX = center + Math.cos(handleAngle) * radius;
+    const handleY = center + Math.sin(handleAngle) * radius;
+
+    const handleStyles = {
+      left: `${handleX - 8}px`,
+      top: `${handleY - 8}px`,
+    };
+
+    return html`
+      <div class="dial-container" @pointerdown=${this.handlePointerDown}>
+        <svg class="absolute inset-0 w-full h-full">
+          <circle
+            cx=${center}
+            cy=${center}
+            r=${radius}
+            fill="none"
+            stroke="#94a3b8"
+            stroke-width="2"
+            stroke-dasharray="4 4"
+          />
+          ${[0, 90, 180, 270].map((deg) => {
+            const angle = (deg * Math.PI) / 180;
+            const x1 = center + Math.cos(angle) * (radius - 8);
+            const y1 = center + Math.sin(angle) * (radius - 8);
+            const x2 = center + Math.cos(angle) * (radius + 8);
+            const y2 = center + Math.sin(angle) * (radius + 8);
+            return html`<line x1=${x1} y1=${y1} x2=${x2} y2=${y2} stroke="#64748b" stroke-width="2" />`;
+          })}
+        </svg>
+        <div class="handle ${this.isDragging ? "dragging" : ""}" style=${styleMap(handleStyles)}></div>
+        <div class="center-text">${this.value.toFixed(0)}°</div>
+      </div>
+    `;
+  }
+}