import { html , TemplateResult } from '@spectrum-web-components/base' ; import '@spectrum-web-components/color-slider/sp-color-slider.js' ; import { ColorSlider } from '@spectrum-web-components/color-slider/src/ColorSlider' ; import '../sp-color-area.js' ; import { ColorArea } from '../src/ColorArea.js' ; export default { title : 'Color/Area' , component : 'sp-color-area' , argTypes : { onInput : { action : 'input' } , onChange : { action : 'change' } , color : { name : 'color' , type : { name : 'ColorValue' , required : 'true' } , description : 'The color displayed by the ColorArea.' , table : { type : { summary : 'ColorValue' } , defaultValue : { summary : '' } , } , control : 'text' , } , } , } ; type StoryArgs = { onInput : ( val : string ) => void ; onChange : ( val : string ) => void ; } ; export const Default = ( { onChange , onInput } ) : TemplateResult => { return html `
        <sp-color-area
            @input=${ ( { target } ) => { const next = target . nextElementSibling as HTMLElement ; next . textContent = target . color as string ; next . style . color = target . color as string ; onInput ( target . value as string ) ; } }
            @change=${ ( { target } ) => { onChange ( target . value as string ) ; } }
        ></sp-color-area>
        <div style="color: #ff0000" aria-live="off">#ff0000</div>
    ` ; } ; export const joint = ( ) : TemplateResult => { return html `
        <div>
            <sp-color-area
                color="hsv (120 0% 100%)"
                @input=${ ( { target } ) => { const next = target . nextElementSibling as ColorSlider ; const display = next . nextElementSibling as HTMLElement ; display . textContent = target . color as string ; display . style . color = target . color as string ; next . color = target . color ; } }
            ></sp-color-area>
            <sp-color-slider
                color="hsv(120 0% 1)"
                @input=${ ( { target : { color , previousElementSibling , nextElementSibling , } , } ) : void => { previousElementSibling . color = color ; nextElementSibling . textContent = color as string ; nextElementSibling . style . color = color as string ; } }
            ></sp-color-slider>
            <div style="color: hsv(120, 0, 1)">hsv(120, 0, 1)</div>
        </div>
    ` ; } ; export const disabled = ( ) : TemplateResult => { return html `
        <sp-color-area disabled></sp-color-area>
    ` ; } ; export const sized = ( ) : TemplateResult => { return html `
        <sp-color-area style="width: 72px; height: 72px"></sp-color-area>
    ` ; } ; export const canvas = ( ) : TemplateResult => { return html `
        <sp-color-area>
            <canvas slot="gradient"></canvas>
        </sp-color-area>
    ` ; } ; class CanvasWriter extends HTMLElement { writeToCanvas ( ) { const { previousElementSibling } = this ; if ( previousElementSibling ) { const canvas = previousElementSibling . querySelector ( 'canvas[slot="gradient"]' ) as HTMLCanvasElement ; if ( canvas ) { canvas . width = canvas . offsetWidth ; canvas . height = canvas . offsetHeight ; const context = canvas . getContext ( '2d' ) ; if ( context ) { context . rect ( 0 , 0 , canvas . width , canvas . height ) ; const gradB = context . createLinearGradient ( 0 , 0 , 0 , canvas . height ) ; gradB . addColorStop ( 0 , 'white' ) ; gradB . addColorStop ( 1 , 'black' ) ; const gradC = context . createLinearGradient ( 0 , 0 , canvas . width , 0 ) ; gradC . addColorStop ( 0 , 'hsla(0,100%,50%,0)' ) ; gradC . addColorStop ( 1 , 'hsla(0,100%,50%,1)' ) ; context . fillStyle = gradB ; context . fillRect ( 0 , 0 , canvas . width , canvas . height ) ; context . fillStyle = gradC ; context . globalCompositeOperation = 'multiply' ; context . fillRect ( 0 , 0 , canvas . width , canvas . height ) ; context . globalCompositeOperation = 'source-over' ; } } } } constructor ( ) { super ( ) ; this . writeStatePromise = new Promise ( ( res ) => { requestAnimationFrame ( ( ) => { this . writeToCanvas ( ) ; res ( true ) ; } ) ; } ) ; } private writeStatePromise : Promise < boolean > = Promise . resolve ( false ) ; get updateComplete ( ) : Promise < boolean > { return this . writeStatePromise ; } } customElements . define ( 'area-canvas-writer' , CanvasWriter ) ; canvas . decorators = [ ( story ) : TemplateResult => { return html `
            ${ story ( ) }
            <area-canvas-writer></area-canvas-writer>
        ` ; } , ] ;