import { __decorate, __metadata } from "tslib";
import { css, LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
function getPoint(e) {
    var _a;
    if (e.button == 0) {
        return {
            x: e.clientX,
            y: e.clientY
        };
    }
    else if (((_a = e.touches) === null || _a === void 0 ? void 0 : _a.length) == 1) {
        const touch = e.touches[0];
        return {
            x: touch.clientX,
            y: touch.clientY
        };
    }
    else {
        return;
    }
}
let ZoomableImage = class ZoomableImage extends LitElement {
    constructor() {
        super(...arguments);
        this.zoom = 1;
        this.left = 0;
        this.top = 0;
        this.dragEndHandler = this.onDragEnd.bind(this);
        this.dragMoveHandler = this.onDragMove.bind(this);
        this.dragStartHandler = this.onDragStart.bind(this);
        this.wheelEventHandler = this.onWheelEvent.bind(this);
        this.resetHandler = this.onReset.bind(this);
    }
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener('mousewheel', this.wheelEventHandler, false);
        this.addEventListener('mousedown', this.dragStartHandler);
        this.addEventListener('touchstart', this.dragStartHandler);
        this.addEventListener('dblclick', this.resetHandler);
        document.addEventListener('mouseup', this.dragEndHandler);
        document.addEventListener('touchend', this.dragEndHandler);
        document.addEventListener('touchcancel', this.dragEndHandler);
        document.addEventListener('mousemove', this.dragMoveHandler);
        document.addEventListener('touchmove', this.dragMoveHandler);
    }
    disconnectedCallback() {
        this.removeEventListener('mousewheel', this.wheelEventHandler, false);
        this.removeEventListener('mousedown', this.dragStartHandler);
        this.removeEventListener('touchstart', this.dragStartHandler);
        this.removeEventListener('dblclick', this.resetHandler);
        document.removeEventListener('mouseup', this.dragEndHandler);
        document.removeEventListener('touchend', this.dragEndHandler);
        document.removeEventListener('touchcancel', this.dragEndHandler);
        document.removeEventListener('mousemove', this.dragMoveHandler);
        document.removeEventListener('touchmove', this.dragMoveHandler);
        super.disconnectedCallback();
    }
    updated(changes) {
        const style = this.style;
        if (changes.has('src') && this.src) {
            style.setProperty('--background-image', `url('${this.src}')`);
        }
        style.setProperty('--image-transform', `translate(${this.left}%, ${this.top}%) scale(${this.zoom}, ${this.zoom})`);
    }
    onWheelEvent(e) {
        e.preventDefault();
        var delta = Math.max(-1, Math.min(1, e.deltaY || -e.detail));
        this.zoom *= 1 - delta / 20;
    }
    onDragStart(e) {
        const point = getPoint(e);
        if (point) {
            this.dragStart = point;
            e.stopPropagation();
            return false;
        }
    }
    onDragMove(e) {
        if (!this.dragStart) {
            return false;
        }
        const point = getPoint(e);
        if (!point) {
            return false;
        }
        e.stopPropagation();
        e.preventDefault();
        const dragStart = point;
        var { x, y } = point;
        x -= this.dragStart.x;
        y -= this.dragStart.y;
        this.dragStart = dragStart;
        const { offsetHeight, offsetWidth } = this;
        this.top += (y / offsetHeight) * 100;
        this.left += (x / offsetWidth) * 100;
        return false;
    }
    onDragEnd(e) {
        if (this.dragStart) {
            e.stopPropagation();
            e.preventDefault();
            delete this.dragStart;
        }
    }
    onReset(e) {
        this.zoom = 1;
        this.left = 0;
        this.top = 0;
    }
};
ZoomableImage.styles = css `
    :host {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    :host::before {
      content: '';
      display: block;

      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;

      background-image: var(
        --background-image,
        linear-gradient(var(--primary-color, lightgray), var(--primary-color, lightgray))
      );
      transform: var(--image-transform, '');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  `;
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], ZoomableImage.prototype, "src", void 0);
__decorate([
    state(),
    __metadata("design:type", Number)
], ZoomableImage.prototype, "zoom", void 0);
__decorate([
    state(),
    __metadata("design:type", Number)
], ZoomableImage.prototype, "left", void 0);
__decorate([
    state(),
    __metadata("design:type", Number)
], ZoomableImage.prototype, "top", void 0);
ZoomableImage = __decorate([
    customElement('zoomable-image')
], ZoomableImage);
export { ZoomableImage };
//# sourceMappingURL=ox-zoomable-image.js.map