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 { DisposableGroup } from '@blockeditor/global/utils';
import { WithDisposable } from '@blockeditor/lit';
import { css, html, LitElement } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
let EdgelessConnectorHandle = class EdgelessConnectorHandle extends WithDisposable(LitElement) {
    constructor() {
        super(...arguments);
        this._lastZoom = 1;
    }
    firstUpdated() {
        const { edgeless } = this;
        const { viewport } = edgeless.surface;
        this._lastZoom = viewport.zoom;
        this.edgeless.slots.viewportUpdated.on(() => {
            if (viewport.zoom !== this._lastZoom) {
                this._lastZoom = viewport.zoom;
                this.requestUpdate();
            }
        });
        this._bindEvent();
    }
    _capPointerDown(e, connection) {
        const { edgeless, connector, _disposables } = this;
        const { surface } = edgeless;
        e.stopPropagation();
        _disposables.addFromEvent(document, 'pointermove', e => {
            const { clientX, clientY } = e;
            const viewportRect = edgeless.surface.viewport.boundingClientRect;
            const modelXY = edgeless.surface.viewport.toModelCoord(clientX - viewportRect.left, clientY - viewportRect.top);
            surface.connector.updateConnection(connector, modelXY, connection);
            this.requestUpdate();
        });
        _disposables.addFromEvent(document, 'pointerup', () => {
            surface.connector.clear();
            edgeless.page.captureSync();
            _disposables.dispose();
            this._disposables = new DisposableGroup();
            this._bindEvent();
        });
    }
    _bindEvent() {
        this._disposables.addFromEvent(this._startHandler, 'pointerdown', e => {
            this._capPointerDown(e, 'source');
        });
        this._disposables.addFromEvent(this._endHandler, 'pointerdown', e => {
            this._capPointerDown(e, 'target');
        });
    }
    render() {
        const { surface } = this.edgeless;
        // path is relative to the element's xywh
        const { path } = this.connector;
        const zoom = surface.viewport.zoom;
        const start = {
            position: 'absolute',
            left: `${path[0][0] * zoom}px`,
            top: `${path[0][1] * zoom}px`,
        };
        const end = {
            position: 'absolute',
            left: `${path[path.length - 1][0] * zoom}px`,
            top: `${path[path.length - 1][1] * zoom}px`,
        };
        return html `
      <div class="line-controller line-start" style=${styleMap(start)}></div>
      <div class="line-controller line-end" style=${styleMap(end)}></div>
    `;
    }
};
EdgelessConnectorHandle.styles = css `
    .line-controller {
      position: absolute;
      width: 9px;
      height: 9px;
      box-sizing: border-box;
      border-radius: 50%;
      border: 2px solid var(--affine-text-emphasis-color);
      background-color: var(--affine-background-primary-color);
      transform: translate(-50%, -50%);
      cursor: pointer;
      z-index: 10;
      pointer-events: all;
      /**
             * Fix: pointerEvent stops firing after a short time.
             * When a gesture is started, the browser intersects the touch-action values of the touched element and its ancestors,
             * up to the one that implements the gesture (in other words, the first containing scrolling element)
             * https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
             */
      touch-action: none;
    }
    .line-controller-hidden {
      display: none;
    }
  `;
__decorate([
    property({ attribute: false })
], EdgelessConnectorHandle.prototype, "connector", void 0);
__decorate([
    property({ attribute: false })
], EdgelessConnectorHandle.prototype, "edgeless", void 0);
__decorate([
    query('.line-start')
], EdgelessConnectorHandle.prototype, "_startHandler", void 0);
__decorate([
    query('.line-end')
], EdgelessConnectorHandle.prototype, "_endHandler", void 0);
EdgelessConnectorHandle = __decorate([
    customElement('edgeless-connector-handle')
], EdgelessConnectorHandle);
export { EdgelessConnectorHandle };
//# sourceMappingURL=connector-handle.js.map