{"mappings":"AACA,cAAc,sBAAiC;AAG/C,SAAS,mBAAmB;;;;;;;AAU5B,cAYM,gBAAgB,YAAY;;;;CAIhC,IAAI,iBAAiB;CAIrB,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;;;;CAKR,AACA;;;;CAKA,AACA;CAEA,UAAU,UAAU,eAAe;CAYnC,UAAU;CAIV,UAAU,iBAAiB,GAAG;CAa9B,QAAQ;CACR,QAAQ;CACR,QAAQ;CAER,UAAU;CAOV,UAAU,YAAY,GAAG;CAyBzB;;AAeF,eAAe;AACf,SAAS","names":[],"sources":["../../../../src/web-components/dragbox/component.ts"],"sourcesContent":["import { type EventListenerFunc, attr, godown, htmlSlot, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n\nimport { GlobalStyle } from \"../../internal/global-style.js\";\n\nconst protoName = \"dragbox\";\n\n/**\n * {@linkcode Dragbox} moves with the mouse and does not exceed the boundary of offsetParent.\n *\n * @slot - Dragbox content.\n * @category layout\n */\n@godown(protoName)\n@styles(css`\n  :host {\n    position: absolute;\n    display: block;\n  }\n\n  :host(:active) {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n`)\nclass Dragbox extends GlobalStyle {\n  /**\n   * Offset parent or document.body.\n   */\n  get _offsetParent(): Element {\n    return this.offsetParent ?? document.body;\n  }\n\n  private __drag = false;\n  private __t: number;\n  private __l: number;\n  private __x: number;\n  private __y: number;\n\n  /**\n   * Position x.\n   */\n  @property()\n  x: string;\n\n  /**\n   * Position y.\n   */\n  @property()\n  y: string;\n\n  protected render(): TemplateResult<1> {\n    return html`\n      <div\n        part=\"root\"\n        ${attr(this.observedRecord)}\n        @mousedown=\"${this._handleDragStart}\"\n      >\n        ${htmlSlot()}\n      </div>\n    `;\n  }\n\n  protected firstUpdated(): void {\n    this.reset();\n  }\n\n  protected _handleDragStart(e: MouseEvent): void {\n    this.__x = e.x;\n    this.__y = e.y;\n    const parentRect = this._offsetParent.getBoundingClientRect();\n    const rect = this.getBoundingClientRect();\n    this.__t = rect.top - parentRect.top;\n    this.__l = rect.left - parentRect.left;\n    this.__drag = true;\n    this.__handleMouseMove = this.events.add(document, \"mousemove\", this._handleDrag.bind(this));\n    this.__handleMouseLeave = this.events.add(document, \"mouseleave\", this._handleDragEnd.bind(this));\n    this.__handleMouseUp = this.events.add(document, \"mouseup\", this._handleDragEnd.bind(this));\n  }\n\n  private __handleMouseMove: EventListenerFunc;\n  private __handleMouseLeave: EventListenerFunc;\n  private __handleMouseUp: EventListenerFunc;\n\n  protected _handleDragEnd(): void {\n    this.__drag = false;\n    this.events.remove(document, \"mousemove\", this.__handleMouseMove);\n    this.events.remove(document, \"mouseleave\", this.__handleMouseLeave);\n    this.events.remove(document, \"mouseup\", this.__handleMouseUp);\n  }\n\n  protected _handleDrag(e: MouseEvent): void {\n    if (!this.__drag) {\n      return;\n    }\n    const { __x, __y, __l, __t, style } = this;\n    const { height: parentHeight, width: parentWidth } = this._offsetParent.getBoundingClientRect();\n    const { width, height } = this.getBoundingClientRect();\n    const l = e.x - (__x - __l);\n    const t = e.y - (__y - __t);\n    if (l < 0) {\n      style.left = \"0\";\n    } else if (l < parentWidth - width) {\n      style.left = `${l}px`;\n    } else {\n      style.left = `${parentWidth - width}px`;\n    }\n    if (t < 0) {\n      style.top = \"0\";\n    } else if (t < parentHeight - height) {\n      style.top = `${t}px`;\n    } else {\n      style.top = `${parentHeight - height}px`;\n    }\n  }\n\n  reset(): void {\n    const { x, y, style, offsetWidth, offsetHeight, offsetLeft, offsetTop } = this;\n    const { height: parentHeight, width: parentWidth } = this._offsetParent.getBoundingClientRect();\n\n    style.left = x || \"0\";\n    style.top = y || \"0\";\n    if (offsetLeft > parentWidth - offsetWidth) {\n      style.left = `${parentWidth - offsetWidth}px`;\n    }\n    if (offsetTop > parentHeight - offsetHeight) {\n      style.top = `${parentHeight - offsetHeight}px`;\n    }\n  }\n}\n\nexport default Dragbox;\nexport { Dragbox };\n"],"version":3,"file":"component.d.ts"}