import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
import { LitElement, css, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { styleMap } from "lit/directives/style-map.js";

//#region src/gui/EFDial.ts
let EFDial = class EFDial$1 extends LitElement {
	constructor(..._args) {
		super(..._args);
		this._value = 0;
		this.isDragging = false;
		this.dragStartAngle = 0;
		this.dragStartValue = 0;
	}
	set value(newValue) {
		newValue = newValue % 360;
		if (newValue < 0) newValue += 360;
		newValue = Number.parseFloat(newValue.toPrecision(6));
		const oldValue = this._value;
		this._value = newValue;
		this.requestUpdate("value", oldValue);
	}
	get value() {
		return this._value;
	}
	static {
		this.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-stroke: var(--ef-color-border);
        --dial-tick: var(--ef-color-border-subtle);
    }
    .dial-container {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: var(--ef-color-bg-panel);
      border: 2px solid var(--ef-color-border);
    }
    .handle {
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid var(--ef-color-primary);
        background-color: var(--ef-color-bg-elevated);
        cursor: grab;
    }
    .handle.dragging {
        background-color: var(--ef-color-primary);
        cursor: grabbing;
    }
    .center-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--ef-color-bg-elevated);
        border: 1px solid var(--ef-color-border);
        padding: 2px 4px;
        border-radius: 4px;
        font-family: monospace;
        font-size: 12px;
        color: var(--ef-color-text);
    }
  `;
	}
	getAngleFromPoint(clientX, clientY, rect) {
		const center = this.clientWidth / 2;
		const x = clientX - rect.left - center;
		const y = clientY - rect.top - center;
		return Math.atan2(y, x);
	}
	handlePointerDown(e) {
		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, { passive: false });
		this.addEventListener("pointerup", this.handlePointerUp, { passive: false });
	}
	handlePointerMove(e) {
		if (!this.isDragging) return;
		e.preventDefault();
		const rect = this.getBoundingClientRect();
		const angleDelta = this.getAngleFromPoint(e.clientX, e.clientY, rect) - this.dragStartAngle;
		let newValue = this.dragStartValue + angleDelta * 180 / Math.PI;
		if (e.shiftKey) newValue = Math.round(newValue / 15) * 15;
		newValue = newValue % 360;
		if (newValue < 0) newValue += 360;
		newValue = Number.parseFloat(newValue.toPrecision(6));
		this.value = newValue;
		this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value } }));
	}
	handlePointerUp(e) {
		e.preventDefault();
		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="var(--dial-stroke)"
            stroke-width="2"
            stroke-dasharray="4 4"
          />
          ${[
			0,
			90,
			180,
			270
		].map((deg) => {
			const angle = deg * Math.PI / 180;
			return html`<line x1=${center + Math.cos(angle) * (radius - 8)} y1=${center + Math.sin(angle) * (radius - 8)} x2=${center + Math.cos(angle) * (radius + 8)} y2=${center + Math.sin(angle) * (radius + 8)} stroke="var(--dial-tick)" stroke-width="2" />`;
		})}
        </svg>
        <div class="handle ${this.isDragging ? "dragging" : ""}" style=${styleMap(handleStyles)}></div>
        <div class="center-text">${this.value.toFixed(0)}°</div>
      </div>
    `;
	}
};
__decorate([property({ type: Number })], EFDial.prototype, "value", null);
__decorate([state()], EFDial.prototype, "isDragging", void 0);
EFDial = __decorate([customElement("ef-dial")], EFDial);

//#endregion
export { EFDial };
//# sourceMappingURL=EFDial.js.map