import*as Common from"../../../../core/common/common.js";import*as ComponentHelpers from"../../../components/helpers/helpers.js";import*as LitHtml from"../../../lit-html/lit-html.js";import cssAngleEditorStyles from"./cssAngleEditor.css.js";import{get2DTranslationsForAngle,getAngleFromRadians,getNewAngleFromEvent,getRadiansFromAngle}from"./CSSAngleUtils.js";const{render:render,html:html}=LitHtml,styleMap=LitHtml.Directives.styleMap,CLOCK_DIAL_LENGTH=6;export class CSSAngleEditor extends HTMLElement{static litTagName=LitHtml.literal`devtools-css-angle-editor`;shadow=this.attachShadow({mode:"open"});angle={value:0,unit:"rad"};onAngleUpdate;background="";clockRadius=38.5;dialTemplates;mousemoveThrottler=new Common.Throttler.Throttler(16.67);mousemoveListener=this.onMousemove.bind(this);connectedCallback(){this.shadow.adoptedStyleSheets=[cssAngleEditorStyles],ComponentHelpers.SetCSSProperty.set(this,"--clock-dial-length","6px")}set data(e){this.angle=e.angle,this.onAngleUpdate=e.onAngleUpdate,this.background=e.background,this.render()}updateAngleFromMousePosition(e,t,s){const o=this.shadow.querySelector(".clock");if(!o||!this.onAngleUpdate)return;const{top:n,right:a,bottom:l,left:i}=o.getBoundingClientRect();this.clockRadius=(a-i)/2;const r=(i+a)/2,d=(l+n)/2,m=-Math.atan2(e-r,t-d)+Math.PI;if(s){const e=getRadiansFromAngle({value:15,unit:"deg"}),t=Math.round(m/e)*e;this.onAngleUpdate(getAngleFromRadians(t,this.angle.unit))}else this.onAngleUpdate(getAngleFromRadians(m,this.angle.unit))}onEditorMousedown(e){e.stopPropagation(),this.updateAngleFromMousePosition(e.pageX,e.pageY,e.shiftKey);const t=e.target instanceof Node&&e.target.ownerDocument,s=this.shadow.querySelector(".editor");t&&s&&(t.addEventListener("mousemove",this.mousemoveListener,{capture:!0}),s.classList.add("interacting"),t.addEventListener("mouseup",(()=>{t.removeEventListener("mousemove",this.mousemoveListener,{capture:!0}),s.classList.remove("interacting")}),{once:!0}))}onMousemove(e){1===e.buttons&&(e.preventDefault(),this.mousemoveThrottler.schedule((()=>(this.updateAngleFromMousePosition(e.pageX,e.pageY,e.shiftKey),Promise.resolve()))))}onEditorWheel(e){if(!this.onAngleUpdate)return;const t=getNewAngleFromEvent(this.angle,e);t&&this.onAngleUpdate(t),e.preventDefault()}render(){const e={background:this.background},{translateX:t,translateY:s}=get2DTranslationsForAngle(this.angle,this.clockRadius/2),o={transform:`translate(${t}px, ${s}px) rotate(${this.angle.value}${this.angle.unit})`};render(html`
      <div class="editor">
        <span class="pointer"></span>
        <div
          class="clock"
          style=${styleMap(e)}
          @mousedown=${this.onEditorMousedown}
          @wheel=${this.onEditorWheel}>
          ${this.renderDials()}
          <div class="hand" style=${styleMap(o)}></div>
          <span class="center"></span>
        </div>
      </div>
    `,this.shadow,{host:this})}renderDials(){return this.dialTemplates||(this.dialTemplates=[0,45,90,135,180,225,270,315].map((e=>{const t=this.clockRadius-6-3,{translateX:s,translateY:o}=get2DTranslationsForAngle({value:e,unit:"deg"},t);return html`<span class="dial" style=${styleMap({transform:`translate(${s}px, ${o}px) rotate(${e}deg)`})}></span>`}))),this.dialTemplates}}ComponentHelpers.CustomElements.defineComponent("devtools-css-angle-editor",CSSAngleEditor);