var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { sleep } from '@blockeditor/global/utils';
import { WithDisposable } from '@blockeditor/lit';
import { css, html, LitElement, } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { Bound, CanvasElementType, } from '../../../../../surface-block/index.js';
import { ShapeToolController } from '../../../controllers/tools/shape-tool.js';
let EdgelessShapeToolElement = class EdgelessShapeToolElement extends WithDisposable(LitElement) {
    constructor() {
        super(...arguments);
        this._transformMap = {
            z1: { x: 0, y: 5, scale: 1.1, origin: '50% 100%' },
            z2: { x: -15, y: 0, scale: 0.75, origin: '20% 20%' },
            z3: { x: 15, y: 0, scale: 0.75, origin: '80% 20%' },
            hidden: { x: 0, y: 120, scale: 0, origin: '50% 50%' },
        };
        this._startCoord = { x: -1, y: -1 };
        this._dragging = false;
        this._isOutside = false;
        this._onDragStart = (coord) => {
            this._startCoord = { x: coord.x, y: coord.y };
            if (this.order !== 1) {
                return;
            }
            this._dragging = true;
            this._shapeElement.classList.add('dragging');
        };
        this._onDragMove = (coord) => {
            if (!this._dragging) {
                return;
            }
            const controller = this.edgeless.tools.currentController;
            if (controller instanceof ShapeToolController) {
                controller.clearOverlay();
            }
            const { x, y } = coord;
            this._shapeElement.style.setProperty('--offset-x', `${x - this._startCoord.x}px`);
            this._shapeElement.style.setProperty('--offset-y', `${y - this._startCoord.y}px`);
            const containerRect = this.getContainerRect();
            const isOut = y < containerRect.top ||
                x < containerRect.left ||
                x > containerRect.right;
            if (isOut !== this._isOutside) {
                this._backupShapeElement.style.setProperty('--y', isOut ? '5px' : '100px');
                this._backupShapeElement.style.setProperty('--scale', isOut ? '1' : '0.9');
            }
            this._isOutside = isOut;
        };
        this._onDragEnd = async (coord) => {
            if (this._startCoord.x === coord.x && this._startCoord.y === coord.y) {
                this.handleClick();
                this._dragging = false;
                return;
            }
            if (!this._dragging) {
                return;
            }
            this._dragging = false;
            this.edgeless.tools.setEdgelessTool({ type: 'default' });
            if (this._isOutside) {
                const rect = this._shapeElement.getBoundingClientRect();
                this._backupShapeElement.style.setProperty('transition', 'none');
                this._backupShapeElement.style.setProperty('--y', '100px');
                this._shapeElement.style.setProperty('--offset-x', `${0}px`);
                this._shapeElement.style.setProperty('--offset-y', `${0}px`);
                await sleep(0);
                this._shapeElement.classList.remove('dragging');
                this._backupShapeElement.style.removeProperty('transition');
                const padding = {
                    x: (coord.x - rect.left) / rect.width,
                    y: (coord.y - rect.top) / rect.height,
                };
                this._addShape(coord, padding);
            }
            else {
                this._shapeElement.classList.remove('dragging');
                this._shapeElement.style.setProperty('--offset-x', `${0}px`);
                this._shapeElement.style.setProperty('--offset-y', `${0}px`);
                this._backupShapeElement.style.setProperty('--y', '100px');
            }
        };
        this._onMouseMove = (event) => {
            if (!this._dragging) {
                return;
            }
            this._onDragMove({ x: event.clientX, y: event.clientY });
        };
        this._touchMove = (event) => {
            if (!this._dragging) {
                return;
            }
            this._onDragMove({
                x: event.touches[0].clientX,
                y: event.touches[0].clientY,
            });
        };
        this._onMouseUp = (event) => {
            this._onDragEnd({ x: event.clientX, y: event.clientY }).catch(console.error);
        };
        this._onTouchEnd = (event) => {
            this._onDragEnd({
                x: event.touches[0].clientX,
                y: event.touches[0].clientY,
            }).catch(console.error);
        };
        this._addShape = (coord, padding) => {
            const width = 100;
            const height = 100;
            const { x: edgelessX, y: edgelessY } = this.edgeless.getBoundingClientRect();
            const zoom = this.edgeless.surface.viewport.zoom;
            const [modelX, modelY] = this.edgeless.surface.viewport.toModelCoord(coord.x - edgelessX - width * padding.x * zoom, coord.y - edgelessY - height * padding.y * zoom);
            const xywh = new Bound(modelX, modelY, width, height).serialize();
            this.edgeless.surface.addElement(CanvasElementType.SHAPE, {
                shapeType: this.shape.name === 'roundedRect' ? 'rect' : this.shape.name,
                xywh: xywh,
                radius: this.radius,
            });
        };
    }
    connectedCallback() {
        super.connectedCallback();
        this._disposables.addFromEvent(this.edgeless.host, 'mousemove', this._onMouseMove);
        this._disposables.addFromEvent(this.edgeless.host, 'touchmove', this._touchMove);
        this._disposables.addFromEvent(this.edgeless.host, 'mouseup', this._onMouseUp);
        this._disposables.addFromEvent(this.edgeless.host, 'touchend', this._onTouchEnd);
    }
    updated(changedProperties) {
        if (!changedProperties.has('shape') && !changedProperties.has('order')) {
            return;
        }
        const transform = this._transformMap[this.order <= 3 ? `z${this.order}` : 'hidden'];
        this._shapeElement.style.setProperty('--x', `${transform.x}px`);
        this._shapeElement.style.setProperty('--y', `${transform.y}px`);
        this._shapeElement.style.setProperty('--scale', String(transform.scale || 1));
        this._shapeElement.style.zIndex = String(999 - this.order);
        this._shapeElement.style.transformOrigin = transform.origin;
        if (this._backupShapeElement) {
            this._backupShapeElement.style.setProperty('--y', '100px');
            this._backupShapeElement.style.setProperty('--scale', '0.9');
            this._backupShapeElement.style.zIndex = '999';
        }
        this.edgeless.slots.edgelessToolUpdated.on(newTool => {
            if (newTool.type !== 'shape') {
                return;
            }
        });
    }
    render() {
        return html `
      <div
        id="shape-tool-element"
        class="shape"
        @mousedown=${(event) => this._onDragStart({ x: event.clientX, y: event.clientY })}
        @touchstart=${(event) => {
            event.preventDefault();
            this._onDragStart({
                x: event.touches[0].clientX,
                y: event.touches[0].clientY,
            });
        }}
      >
        ${this.shape.svg}
      </div>
      ${this.order === 1
            ? html `<div id="backup-shape-element" class="shape">
            ${this.shape.svg}
          </div>`
            : null}
    `;
    }
};
EdgelessShapeToolElement.styles = css `
    .shape {
      --x: 0px;
      --y: 0px;
      --offset-x: 0px;
      --offset-y: 0px;
      --scale: 1;
      transform: translateX(calc(var(--offset-x) + var(--x)))
        translateY(calc(var(--y) + var(--offset-y))) scale(var(--scale));
      height: 60px;
      width: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 12px;
      left: 16px;
      transition: all 0.5s cubic-bezier(0, -0.01, 0.01, 1.01);
    }
    .shape.dragging {
      transition: none;
    }
    .shape svg {
      height: 100%;
      filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.15));
    }
  `;
__decorate([
    property({ attribute: false })
], EdgelessShapeToolElement.prototype, "shape", void 0);
__decorate([
    property({ attribute: false })
], EdgelessShapeToolElement.prototype, "order", void 0);
__decorate([
    property({ attribute: false })
], EdgelessShapeToolElement.prototype, "getContainerRect", void 0);
__decorate([
    property({ attribute: false })
], EdgelessShapeToolElement.prototype, "handleClick", void 0);
__decorate([
    property({ attribute: false })
], EdgelessShapeToolElement.prototype, "edgeless", void 0);
__decorate([
    query('#shape-tool-element')
], EdgelessShapeToolElement.prototype, "_shapeElement", void 0);
__decorate([
    query('#backup-shape-element')
], EdgelessShapeToolElement.prototype, "_backupShapeElement", void 0);
__decorate([
    property({ attribute: false })
], EdgelessShapeToolElement.prototype, "shapeType", void 0);
__decorate([
    property({ attribute: false })
], EdgelessShapeToolElement.prototype, "fillColor", void 0);
__decorate([
    property({ attribute: false })
], EdgelessShapeToolElement.prototype, "shapeStyle", void 0);
__decorate([
    property({ attribute: false })
], EdgelessShapeToolElement.prototype, "strokeColor", void 0);
__decorate([
    property({ attribute: false })
], EdgelessShapeToolElement.prototype, "radius", void 0);
__decorate([
    state()
], EdgelessShapeToolElement.prototype, "_startCoord", void 0);
__decorate([
    state()
], EdgelessShapeToolElement.prototype, "_dragging", void 0);
__decorate([
    state()
], EdgelessShapeToolElement.prototype, "_isOutside", void 0);
EdgelessShapeToolElement = __decorate([
    customElement('edgeless-shape-tool-element')
], EdgelessShapeToolElement);
export { EdgelessShapeToolElement };
//# sourceMappingURL=shape-tool-element.js.map