import*as Common from"../../../core/common/common.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as Coordinator from"../../../ui/components/render_coordinator/render_coordinator.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import srgbOverlayStyles from"./srgbOverlay.css.js";const coordinator=Coordinator.RenderCoordinator.RenderCoordinator.instance(),SRGB_LABEL_HEIGHT=10,SRGB_LABEL_BOTTOM=3,SRGB_TEXT_UPPER_POINT_FROM_BOTTOM=13,EPSILON=.001;function isColorInSrgbGamut(o){const t=[0,0,0,0];Common.Color.hsva2rgba([...o,1],t);const e=Common.ColorConverter.ColorConverter.displayP3ToXyzd50(t[0],t[1],t[2]);return Common.ColorConverter.ColorConverter.xyzd50ToSrgb(e[0],e[1],e[2]).every((o=>o+.001>=0&&o-.001<=1))}export class SrgbOverlay extends HTMLElement{static litTagName=LitHtml.literal`devtools-spectrum-srgb-overlay`;#o=this.attachShadow({mode:"open"});constructor(){super(),this.#o.adoptedStyleSheets=[srgbOverlayStyles]}#t({hue:o,width:t,height:e}){if(0===t||0===e)return null;const r=1/window.devicePixelRatio,n=[];let s=0;for(let i=0;i<e;i+=r){const l=1-i/e;for(;s<t;s+=r){if(!isColorInSrgbGamut([o,s/t,l])){n.push({x:s,y:i});break}}}if(0===n.length)return null;const i=n[n.length-1];return i.x<t&&n.push({y:i.y,x:t}),n}#e(o,t){let e=1/0,r=null;for(const n of o)Math.abs(t-n.y)<=e&&(e=Math.abs(t-n.y),r=n);return r}render({hue:o,width:t,height:e}){return coordinator.write("Srgb Overlay render",(()=>{const r=this.#t({hue:o,width:t,height:e});if(!r||0===r.length)return;const n=this.#e(r,e-13);n&&LitHtml.render(LitHtml.html`
          <span class="label" style="right: ${t-n.x}px">sRGB</span>
          <svg>
            <polyline points=${r.map((o=>`${o.x.toFixed(2)},${o.y.toFixed(2)}`)).join(" ")} class="gamut-line" />
          </svg>
        `,this.#o,{host:this})}))}}ComponentHelpers.CustomElements.defineComponent("devtools-spectrum-srgb-overlay",SrgbOverlay);