import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
import { getCornerPoint, getOppositeCorner } from "./transformUtils.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/EFResizableBox.ts
const DEFAULT_MIN_SIZE = 10;
let EFResizableBox = class EFResizableBox$1 extends LitElement {
	constructor(..._args) {
		super(..._args);
		this.bounds = {
			x: 0,
			y: 0,
			width: 100,
			height: 100
		};
		this.containerWidth = 0;
		this.containerHeight = 0;
		this.minSize = DEFAULT_MIN_SIZE;
		this.isDragging = false;
		this.isResizing = null;
		this.dragStart = null;
		this.dragStartPosition = {
			x: 0,
			y: 0
		};
		this.resizeStartCorner = null;
		this.resizeStartSize = null;
		this.resizeStartPosition = null;
		this.handlePointerDown = (e, mode, handle) => {
			e.preventDefault();
			e.stopPropagation();
			this.isDragging = true;
			this.isResizing = mode === "resize" ? handle || null : null;
			this.dragStart = {
				x: e.clientX,
				y: e.clientY
			};
			this.dragStartPosition = {
				x: this.bounds.x,
				y: this.bounds.y
			};
			if (mode === "resize" && handle) {
				const oppositeCorner = getOppositeCorner(handle);
				this.resizeStartCorner = getCornerPoint(this.bounds.x, this.bounds.y, this.bounds.width, this.bounds.height, 0, oppositeCorner.x, oppositeCorner.y);
				this.resizeStartSize = {
					width: this.bounds.width,
					height: this.bounds.height
				};
				this.resizeStartPosition = {
					x: this.bounds.x,
					y: this.bounds.y
				};
			}
			document.addEventListener("pointermove", this.handlePointerMove, { passive: false });
			document.addEventListener("pointerup", this.handlePointerUp, { passive: false });
		};
		this.handlePointerMove = (e) => {
			if (!this.isDragging || !this.dragStart) return;
			e.preventDefault();
			const deltaX = e.clientX - this.dragStart.x;
			const deltaY = e.clientY - this.dragStart.y;
			if (this.isResizing && this.resizeStartCorner && this.resizeStartSize && this.resizeStartPosition) {
				const oppositeCorner = getOppositeCorner(this.isResizing);
				const rotationRadians = 0;
				let newWidth = this.resizeStartSize.width;
				let newHeight = this.resizeStartSize.height;
				if (this.isResizing.includes("e")) newWidth = this.resizeStartSize.width + deltaX;
				else if (this.isResizing.includes("w")) newWidth = this.resizeStartSize.width - deltaX;
				if (this.isResizing.includes("s")) newHeight = this.resizeStartSize.height + deltaY;
				else if (this.isResizing.includes("n")) newHeight = this.resizeStartSize.height - deltaY;
				newWidth = Math.max(this.minSize, Math.min(this.containerWidth - this.bounds.x, newWidth));
				newHeight = Math.max(this.minSize, Math.min(this.containerHeight - this.bounds.y, newHeight));
				const newOppositeCorner = getCornerPoint(this.resizeStartPosition.x, this.resizeStartPosition.y, newWidth, newHeight, rotationRadians, oppositeCorner.x, oppositeCorner.y);
				const offsetX = this.resizeStartCorner.x - newOppositeCorner.x;
				const offsetY = this.resizeStartCorner.y - newOppositeCorner.y;
				this.bounds = {
					x: Math.max(0, Math.min(this.containerWidth - newWidth, this.resizeStartPosition.x + offsetX)),
					y: Math.max(0, Math.min(this.containerHeight - newHeight, this.resizeStartPosition.y + offsetY)),
					width: newWidth,
					height: newHeight
				};
			} else {
				const constrainedX = Math.max(0, Math.min(this.containerWidth - this.bounds.width, this.dragStartPosition.x + deltaX));
				const constrainedY = Math.max(0, Math.min(this.containerHeight - this.bounds.height, this.dragStartPosition.y + deltaY));
				this.bounds = {
					...this.bounds,
					x: constrainedX,
					y: constrainedY
				};
			}
			this.dispatchBoundsChange();
		};
		this.handlePointerUp = (e) => {
			e.preventDefault();
			this.cleanup();
		};
	}
	static {
		this.styles = css`
    .box {
      position: absolute;
      border: 2px solid var(--ef-resizable-box-border-color, var(--ef-color-primary));
      background-color: var(--ef-resizable-box-bg-color, color-mix(in srgb, var(--ef-color-primary) 20%, transparent));
      cursor: grab;
    }
    .box.dragging {
      border-color: var(--ef-resizable-box-dragging-border-color, var(--ef-color-primary));
      background-color: var(--ef-resizable-box-dragging-bg-color, color-mix(in srgb, var(--ef-color-primary) 30%, transparent));
    }
    .handle {
      position: absolute;
      background-color: var(--ef-resizable-box-handle-color, var(--ef-color-primary));
      touch-action: none;
    }
    .handle.nw { top: -4px; left: -4px; width: 8px; height: 8px; cursor: nwse-resize; }
    .handle.ne { top: -4px; right: -4px; width: 8px; height: 8px; cursor: nesw-resize; }
    .handle.sw { bottom: -4px; left: -4px; width: 8px; height: 8px; cursor: nesw-resize; }
    .handle.se { bottom: -4px; right: -4px; width: 8px; height: 8px; cursor: nwse-resize; }
    .handle.n { top: -4px; left: 4px; right: 4px; height: 8px; cursor: ns-resize; }
    .handle.e { top: 4px; bottom: 4px; right: -4px; width: 8px; cursor: ew-resize; }
    .handle.s { bottom: -4px; left: 4px; right: 4px; height: 8px; cursor: ns-resize; }
    .handle.w { top: 4px; bottom: 4px; left: -4px; width: 8px; cursor: ew-resize; }
  `;
	}
	connectedCallback() {
		super.connectedCallback();
		if (this.offsetParent) {
			this.containerWidth = this.offsetParent.clientWidth;
			this.containerHeight = this.offsetParent.clientHeight;
		}
		this.resizeObserver = new ResizeObserver(() => {
			if (this.offsetParent) {
				this.containerWidth = this.offsetParent.clientWidth;
				this.containerHeight = this.offsetParent.clientHeight;
			}
		});
		if (this.offsetParent) this.resizeObserver.observe(this.offsetParent);
	}
	disconnectedCallback() {
		super.disconnectedCallback();
		this.resizeObserver?.disconnect();
		this.cleanup();
	}
	cleanup() {
		this.isDragging = false;
		this.isResizing = null;
		this.dragStart = null;
		this.dragStartPosition = {
			x: 0,
			y: 0
		};
		this.resizeStartCorner = null;
		this.resizeStartSize = null;
		this.resizeStartPosition = null;
		document.removeEventListener("pointermove", this.handlePointerMove);
		document.removeEventListener("pointerup", this.handlePointerUp);
	}
	dispatchBoundsChange() {
		this.dispatchEvent(new CustomEvent("bounds-change", {
			detail: { bounds: this.bounds },
			bubbles: true,
			composed: true
		}));
	}
	render() {
		const boxStyles = {
			left: `${this.bounds.x}px`,
			top: `${this.bounds.y}px`,
			width: `${this.bounds.width}px`,
			height: `${this.bounds.height}px`
		};
		return html`
      <div
        class="box ${this.isDragging ? "dragging" : ""}"
        style=${styleMap(boxStyles)}
        @pointerdown=${(e) => this.handlePointerDown(e, "move")}
      >
        ${[
			"nw",
			"n",
			"ne",
			"e",
			"se",
			"s",
			"sw",
			"w"
		].map((handle) => html`
            <div
              class="handle ${handle}"
              @pointerdown=${(e) => {
			e.stopPropagation();
			this.handlePointerDown(e, "resize", handle);
		}}
            ></div>
          `)}
        <slot></slot>
      </div>
    `;
	}
};
__decorate([property({ type: Object })], EFResizableBox.prototype, "bounds", void 0);
__decorate([state()], EFResizableBox.prototype, "containerWidth", void 0);
__decorate([state()], EFResizableBox.prototype, "containerHeight", void 0);
__decorate([property({ type: Number })], EFResizableBox.prototype, "minSize", void 0);
__decorate([state()], EFResizableBox.prototype, "isDragging", void 0);
__decorate([state()], EFResizableBox.prototype, "isResizing", void 0);
EFResizableBox = __decorate([customElement("ef-resizable-box")], EFResizableBox);

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