npm - @johnfmorton/some-shade - Versions diffs - 1.1.0 → 1.1.2 - Mend

@johnfmorton/some-shade 1.1.0 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -44,7 +44,6 @@ export declare class SomeShadeImage extends LitElement {
     coolColor: string;
     blendMode: number;
     referenceWidth: number;
-    loadingBlur: number;
     private _webglAvailable;
     private _snapshotUrl;
     private _snapshotLoaded;

package/dist/some-shade.cjs.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("lit"),s=require("lit/decorators.js");function U(e){return e.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,preserveDrawingBuffer:!0})}function S(e,o,a){const t=e.createShader(o);if(!t)throw new Error("Failed to create shader");if(e.shaderSource(t,a),e.compileShader(t),!e.getShaderParameter(t,e.COMPILE_STATUS)){const u=e.getShaderInfoLog(t);throw e.deleteShader(t),new Error(`Shader compile error: ${u}`)}return t}function K(e,o,a){const t=S(e,e.VERTEX_SHADER,o),u=S(e,e.FRAGMENT_SHADER,a),n=e.createProgram();if(!n)throw new Error("Failed to create program");if(e.attachShader(n,t),e.attachShader(n,u),e.linkProgram(n),!e.getProgramParameter(n,e.LINK_STATUS)){const d=e.getProgramInfoLog(n);throw e.deleteProgram(n),new Error(`Program link error: ${d}`)}e.deleteShader(t),e.deleteShader(u);const r=new Map,g=e.getProgramParameter(n,e.ACTIVE_ATTRIBUTES);for(let d=0;d<g;d++){const f=e.getActiveAttrib(n,d);f&&r.set(f.name,e.getAttribLocation(n,f.name))}const c=new Map,m=e.getProgramParameter(n,e.ACTIVE_UNIFORMS);for(let d=0;d<m;d++){const f=e.getActiveUniform(n,d);if(f){const h=e.getUniformLocation(n,f.name);h&&c.set(f.name,h)}}return{program:n,attribLocations:r,uniformLocations:c}}function k(e,o,a){for(const[t,u]of Object.entries(a)){const n=o.uniformLocations.get(t);if(n){if(typeof u=="number")e.uniform1f(n,u);else if(Array.isArray(u))switch(u.length){case 2:e.uniform2fv(n,u);break;case 3:e.uniform3fv(n,u);break;case 4:e.uniform4fv(n,u);break}}}}function D(e,o){const a=e.createTexture();if(!a)throw new Error("Failed to create texture");return e.bindTexture(e.TEXTURE_2D,a),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,o),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),{texture:a,width:o.naturalWidth,height:o.naturalHeight}}function L(e,o){const a=new Float32Array([-1,-1,0,1,1,-1,1,1,-1,1,0,0,1,1,1,0]),t=e.createBuffer();if(!t)throw new Error("Failed to create buffer");e.bindBuffer(e.ARRAY_BUFFER,t),e.bufferData(e.ARRAY_BUFFER,a,e.STATIC_DRAW);const u=4*Float32Array.BYTES_PER_ELEMENT,n=o.attribLocations.get("a_position");n!==void 0&&n!==-1&&(e.enableVertexAttribArray(n),e.vertexAttribPointer(n,2,e.FLOAT,!1,u,0));const r=o.attribLocations.get("a_texCoord");return r!==void 0&&r!==-1&&(e.enableVertexAttribArray(r),e.vertexAttribPointer(r,2,e.FLOAT,!1,u,2*Float32Array.BYTES_PER_ELEMENT)),t}function M(e){e.drawArrays(e.TRIANGLE_STRIP,0,4)}const z=`precision mediump float;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("lit"),l=require("lit/decorators.js");function U(e){return e.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,preserveDrawingBuffer:!0})}function E(e,o,a){const t=e.createShader(o);if(!t)throw new Error("Failed to create shader");if(e.shaderSource(t,a),e.compileShader(t),!e.getShaderParameter(t,e.COMPILE_STATUS)){const s=e.getShaderInfoLog(t);throw e.deleteShader(t),new Error(`Shader compile error: ${s}`)}return t}function K(e,o,a){const t=E(e,e.VERTEX_SHADER,o),s=E(e,e.FRAGMENT_SHADER,a),n=e.createProgram();if(!n)throw new Error("Failed to create program");if(e.attachShader(n,t),e.attachShader(n,s),e.linkProgram(n),!e.getProgramParameter(n,e.LINK_STATUS)){const d=e.getProgramInfoLog(n);throw e.deleteProgram(n),new Error(`Program link error: ${d}`)}e.deleteShader(t),e.deleteShader(s);const r=new Map,g=e.getProgramParameter(n,e.ACTIVE_ATTRIBUTES);for(let d=0;d<g;d++){const f=e.getActiveAttrib(n,d);f&&r.set(f.name,e.getAttribLocation(n,f.name))}const c=new Map,h=e.getProgramParameter(n,e.ACTIVE_UNIFORMS);for(let d=0;d<h;d++){const f=e.getActiveUniform(n,d);if(f){const m=e.getUniformLocation(n,f.name);m&&c.set(f.name,m)}}return{program:n,attribLocations:r,uniformLocations:c}}function k(e,o,a){for(const[t,s]of Object.entries(a)){const n=o.uniformLocations.get(t);if(n){if(typeof s=="number")e.uniform1f(n,s);else if(Array.isArray(s))switch(s.length){case 2:e.uniform2fv(n,s);break;case 3:e.uniform3fv(n,s);break;case 4:e.uniform4fv(n,s);break}}}}function D(e,o){const a=e.createTexture();if(!a)throw new Error("Failed to create texture");return e.bindTexture(e.TEXTURE_2D,a),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,o),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),{texture:a,width:o.naturalWidth,height:o.naturalHeight}}function L(e,o){const a=new Float32Array([-1,-1,0,1,1,-1,1,1,-1,1,0,0,1,1,1,0]),t=e.createBuffer();if(!t)throw new Error("Failed to create buffer");e.bindBuffer(e.ARRAY_BUFFER,t),e.bufferData(e.ARRAY_BUFFER,a,e.STATIC_DRAW);const s=4*Float32Array.BYTES_PER_ELEMENT,n=o.attribLocations.get("a_position");n!==void 0&&n!==-1&&(e.enableVertexAttribArray(n),e.vertexAttribPointer(n,2,e.FLOAT,!1,s,0));const r=o.attribLocations.get("a_texCoord");return r!==void 0&&r!==-1&&(e.enableVertexAttribArray(r),e.vertexAttribPointer(r,2,e.FLOAT,!1,s,2*Float32Array.BYTES_PER_ELEMENT)),t}function M(e){e.drawArrays(e.TRIANGLE_STRIP,0,4)}const z=`precision mediump float;
 varying vec2 v_texCoord;
@@ -92,7 +92,7 @@ void main() {
   gl_Position = vec4(a_position, 0.0, 1.0);
   v_texCoord = a_texCoord;
 }
-`,P={name:"halftone-cmyk",fragmentShader:z,vertexShader:y,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_angleC",type:"float",default:15,attribute:"angle-c"},{name:"u_angleM",type:"float",default:75,attribute:"angle-m"},{name:"u_angleY",type:"float",default:0,attribute:"angle-y"},{name:"u_angleK",type:"float",default:45,attribute:"angle-k"},{name:"u_showC",type:"float",default:1,attribute:"show-c"},{name:"u_showM",type:"float",default:1,attribute:"show-m"},{name:"u_showY",type:"float",default:1,attribute:"show-y"},{name:"u_showK",type:"float",default:1,attribute:"show-k"},{name:"u_intensityK",type:"float",default:1,attribute:"intensity-k"}]},I=`precision mediump float;
+`,P={name:"halftone-cmyk",fragmentShader:z,vertexShader:y,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_angleC",type:"float",default:15,attribute:"angle-c"},{name:"u_angleM",type:"float",default:75,attribute:"angle-m"},{name:"u_angleY",type:"float",default:0,attribute:"angle-y"},{name:"u_angleK",type:"float",default:45,attribute:"angle-k"},{name:"u_showC",type:"float",default:1,attribute:"show-c"},{name:"u_showM",type:"float",default:1,attribute:"show-m"},{name:"u_showY",type:"float",default:1,attribute:"show-y"},{name:"u_showK",type:"float",default:1,attribute:"show-k"},{name:"u_intensityK",type:"float",default:1,attribute:"intensity-k"}]},V=`precision mediump float;
 varying vec2 v_texCoord;
@@ -134,7 +134,7 @@ void main() {
   gl_FragColor = vec4(result, color.a);
 }
-`,V={name:"halftone-duotone",fragmentShader:I,vertexShader:y,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_duotoneColor",type:"vec3",default:[0,.6,.8],attribute:"duotone-color"},{name:"u_angle",type:"float",default:0,attribute:"angle"}]},N=`precision mediump float;
+`,I={name:"halftone-duotone",fragmentShader:V,vertexShader:y,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_duotoneColor",type:"vec3",default:[0,.6,.8],attribute:"duotone-color"},{name:"u_angle",type:"float",default:0,attribute:"angle"}]},O=`precision mediump float;
 varying vec2 v_texCoord;
@@ -190,7 +190,7 @@ void main() {
   gl_FragColor = vec4(result, 1.0);
 }
-`,O={name:"dot-grid",fragmentShader:N,vertexShader:y,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_dotOffset",type:"vec2",default:[.5,.5],attribute:"dot-offset"},{name:"u_bgColor",type:"vec3",default:[1,1,1],attribute:"bg-color"},{name:"u_angle",type:"float",default:0,attribute:"angle"}]},F=`precision mediump float;
+`,N={name:"dot-grid",fragmentShader:O,vertexShader:y,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_dotOffset",type:"vec2",default:[.5,.5],attribute:"dot-offset"},{name:"u_bgColor",type:"vec3",default:[1,1,1],attribute:"bg-color"},{name:"u_angle",type:"float",default:0,attribute:"angle"}]},F=`precision mediump float;
 varying vec2 v_texCoord;
@@ -273,14 +273,14 @@ void main() {
   gl_FragColor = vec4(clamp(result, 0.0, 1.0), color.a);
 }
-`,W={name:"technicolor-2strip",fragmentShader:F,vertexShader:y,uniforms:[{name:"u_dotRadius",type:"float",default:7,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:10,attribute:"grid-size"},{name:"u_angleWarm",type:"float",default:15,attribute:"angle-warm"},{name:"u_angleCool",type:"float",default:75,attribute:"angle-cool"},{name:"u_angleK",type:"float",default:45,attribute:"angle-k"},{name:"u_showWarm",type:"float",default:1,attribute:"show-warm"},{name:"u_showCool",type:"float",default:1,attribute:"show-cool"},{name:"u_showK",type:"float",default:1,attribute:"show-k"},{name:"u_warmColor",type:"vec3",default:[.85,.25,.06],attribute:"warm-color"},{name:"u_coolColor",type:"vec3",default:[.05,.65,.6],attribute:"cool-color"},{name:"u_blendMode",type:"float",default:1,attribute:"blend-mode"},{name:"u_intensityK",type:"float",default:1,attribute:"intensity-k"}]},w=new Map;function _(e){w.set(e.name,e)}function T(e){return w.get(e)}function B(){return Array.from(w.keys())}_(P);_(V);_(O);_(W);var Y=Object.defineProperty,l=(e,o,a,t)=>{for(var u=void 0,n=e.length-1,r;n>=0;n--)(r=e[n])&&(u=r(o,a,u)||u);return u&&Y(o,a,u),u};const X=2;let E=Promise.resolve();function x(e){const o=E.then(e,e);return E=o,o}const $=new Set(["effect","dotRadius","gridSize","angleC","angleM","angleY","angleK","showC","showM","showY","showK","intensityK","duotoneColor","angle","dotOffsetX","dotOffsetY","bgColor","angleWarm","angleCool","showWarm","showCool","warmColor","coolColor","blendMode","referenceWidth"]),C=class C extends p.LitElement{constructor(){super(...arguments),this.src="",this.effect="halftone-cmyk",this.dotRadius=4,this.gridSize=8,this.angleC=15,this.angleM=75,this.angleY=0,this.angleK=45,this.showC=1,this.showM=1,this.showY=1,this.showK=1,this.intensityK=1,this.duotoneColor="#0099cc",this.angle=0,this.dotOffsetX=.5,this.dotOffsetY=.5,this.bgColor="#ffffff",this.angleWarm=15,this.angleCool=75,this.showWarm=1,this.showCool=1,this.warmColor="#d94010",this.coolColor="#0da699",this.blendMode=1,this.referenceWidth=1024,this.loadingBlur=0,this._webglAvailable=!0,this._snapshotUrl="",this._snapshotLoaded=!1,this._image=null,this._observer=null,this._visible=!1,this._needsRender=!1}render(){if(!this._webglAvailable)return p.html`<img src=${this.src} alt="" />`;const o=this.loadingBlur>0?`filter: blur(${this.loadingBlur}px)`:"";return p.html`
-      <img src=${this.src} alt="" style=${o} />
+`,W={name:"technicolor-2strip",fragmentShader:F,vertexShader:y,uniforms:[{name:"u_dotRadius",type:"float",default:7,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:10,attribute:"grid-size"},{name:"u_angleWarm",type:"float",default:15,attribute:"angle-warm"},{name:"u_angleCool",type:"float",default:75,attribute:"angle-cool"},{name:"u_angleK",type:"float",default:45,attribute:"angle-k"},{name:"u_showWarm",type:"float",default:1,attribute:"show-warm"},{name:"u_showCool",type:"float",default:1,attribute:"show-cool"},{name:"u_showK",type:"float",default:1,attribute:"show-k"},{name:"u_warmColor",type:"vec3",default:[.85,.25,.06],attribute:"warm-color"},{name:"u_coolColor",type:"vec3",default:[.05,.65,.6],attribute:"cool-color"},{name:"u_blendMode",type:"float",default:1,attribute:"blend-mode"},{name:"u_intensityK",type:"float",default:1,attribute:"intensity-k"}]},C=new Map;function _(e){C.set(e.name,e)}function T(e){return C.get(e)}function Y(){return Array.from(C.keys())}_(P);_(I);_(N);_(W);var B=Object.defineProperty,u=(e,o,a,t)=>{for(var s=void 0,n=e.length-1,r;n>=0;n--)(r=e[n])&&(s=r(o,a,s)||s);return s&&B(o,a,s),s};const X=2;let x=Promise.resolve();function w(e){const o=x.then(e,e);return x=o,o}const G=new Set(["effect","dotRadius","gridSize","angleC","angleM","angleY","angleK","showC","showM","showY","showK","intensityK","duotoneColor","angle","dotOffsetX","dotOffsetY","bgColor","angleWarm","angleCool","showWarm","showCool","warmColor","coolColor","blendMode","referenceWidth"]),R=class R extends p.LitElement{constructor(){super(...arguments),this.src="",this.effect="halftone-cmyk",this.dotRadius=4,this.gridSize=8,this.angleC=15,this.angleM=75,this.angleY=0,this.angleK=45,this.showC=1,this.showM=1,this.showY=1,this.showK=1,this.intensityK=1,this.duotoneColor="#0099cc",this.angle=0,this.dotOffsetX=.5,this.dotOffsetY=.5,this.bgColor="#ffffff",this.angleWarm=15,this.angleCool=75,this.showWarm=1,this.showCool=1,this.warmColor="#d94010",this.coolColor="#0da699",this.blendMode=1,this.referenceWidth=1024,this._webglAvailable=!0,this._snapshotUrl="",this._snapshotLoaded=!1,this._image=null,this._observer=null,this._visible=!1,this._needsRender=!1}render(){return this._webglAvailable?p.html`
+      <img class="base" src=${this.src} alt="" />
       ${this._snapshotUrl?p.html`<img
             class="snapshot${this._snapshotLoaded?" loaded":""}"
             src=${this._snapshotUrl}
             @load=${this._onSnapshotLoad}
             alt="" />`:""}
-    `}connectedCallback(){super.connectedCallback(),this._observer=new IntersectionObserver(o=>{var t;const a=this._visible;this._visible=((t=o[0])==null?void 0:t.isIntersecting)??!1,this._visible&&!a&&this._needsRender&&(this._needsRender=!1,x(()=>this._renderEffect()))},{rootMargin:"200px"}),this._observer.observe(this)}updated(o){if(o.has("src")&&this.src){this._loadImage(this.src);return}if(!this._image)return;[...o.keys()].some(t=>$.has(t))&&this._scheduleRender()}disconnectedCallback(){var o;super.disconnectedCallback(),(o=this._observer)==null||o.disconnect(),this._revokeSnapshot()}_loadImage(o){const a=new Image;a.crossOrigin="anonymous",a.onload=()=>{this._image=a,this._scheduleRender()},a.onerror=()=>{console.warn(`[some-shade] Failed to load image: ${o}`)},a.src=o}_scheduleRender(){this._visible?x(()=>this._renderEffect()):this._needsRender=!0}async _renderEffect(){var g;if(!this._image)return;const o=T(this.effect);if(!o){console.warn(`[some-shade] Unknown effect: ${this.effect}`);return}const a=Math.min(window.devicePixelRatio||1,X),t=this._image.naturalWidth,u=this._image.naturalHeight,n=document.createElement("canvas");n.width=t*a,n.height=u*a;const r=U(n);if(!r){this._webglAvailable=!1;return}try{const c=K(r,o.vertexShader,o.fragmentShader);r.useProgram(c.program);const m=D(r,this._image),d=L(r,c);r.viewport(0,0,n.width,n.height),r.clearColor(0,0,0,0),r.clear(r.COLOR_BUFFER_BIT),r.activeTexture(r.TEXTURE0),r.bindTexture(r.TEXTURE_2D,m.texture);const f=c.uniformLocations.get("u_image");f&&r.uniform1i(f,0),k(r,c,this._getUniformValues(m,a)),r.bindBuffer(r.ARRAY_BUFFER,d);const h=4*Float32Array.BYTES_PER_ELEMENT,b=c.attribLocations.get("a_position");b!==void 0&&b!==-1&&(r.enableVertexAttribArray(b),r.vertexAttribPointer(b,2,r.FLOAT,!1,h,0));const v=c.attribLocations.get("a_texCoord");v!==void 0&&v!==-1&&(r.enableVertexAttribArray(v),r.vertexAttribPointer(v,2,r.FLOAT,!1,h,2*Float32Array.BYTES_PER_ELEMENT)),M(r);const R=await new Promise(A=>n.toBlob(A));r.deleteTexture(m.texture),r.deleteProgram(c.program),r.deleteBuffer(d),R&&(this._snapshotLoaded=!1,this._revokeSnapshot(),this._snapshotUrl=URL.createObjectURL(R))}finally{(g=r.getExtension("WEBGL_lose_context"))==null||g.loseContext()}}_onSnapshotLoad(){this._snapshotLoaded=!0}replayTransition(o=500){this._snapshotUrl&&(this._snapshotLoaded=!1,this.updateComplete.then(()=>{setTimeout(()=>{this._snapshotLoaded=!0},o)}))}_revokeSnapshot(){this._snapshotUrl&&(URL.revokeObjectURL(this._snapshotUrl),this._snapshotUrl="")}_getUniformValues(o,a){const t={};t.u_resolution=[o.width*a,o.height*a];const u=o.width/this.referenceWidth;return t.u_dotRadius=this.dotRadius*u,t.u_gridSize=this.gridSize*u,this.effect==="halftone-cmyk"?(t.u_angleC=this.angleC,t.u_angleM=this.angleM,t.u_angleY=this.angleY,t.u_angleK=this.angleK,t.u_showC=this.showC,t.u_showM=this.showM,t.u_showY=this.showY,t.u_showK=this.showK,t.u_intensityK=this.intensityK):this.effect==="halftone-duotone"?(t.u_duotoneColor=this._parseHexColor(this.duotoneColor),t.u_angle=this.angle):this.effect==="dot-grid"?(t.u_dotOffset=[this.dotOffsetX,this.dotOffsetY],t.u_bgColor=this._parseHexColor(this.bgColor),t.u_angle=this.angle):this.effect==="technicolor-2strip"&&(t.u_angleWarm=this.angleWarm,t.u_angleCool=this.angleCool,t.u_angleK=this.angleK,t.u_showWarm=this.showWarm,t.u_showCool=this.showCool,t.u_showK=this.showK,t.u_warmColor=this._parseHexColor(this.warmColor),t.u_coolColor=this._parseHexColor(this.coolColor),t.u_blendMode=this.blendMode,t.u_intensityK=this.intensityK),t}_parseHexColor(o){const a=o.replace("#",""),t=parseInt(a.substring(0,2),16)/255,u=parseInt(a.substring(2,4),16)/255,n=parseInt(a.substring(4,6),16)/255;return[t,u,n]}};C.styles=p.css`
+    `:p.html`<img src=${this.src} alt="" />`}connectedCallback(){super.connectedCallback(),this._observer=new IntersectionObserver(o=>{var t;const a=this._visible;this._visible=((t=o[0])==null?void 0:t.isIntersecting)??!1,this._visible&&!a&&(this._needsRender||this._image&&!this._snapshotUrl)&&(this._needsRender=!1,w(()=>this._renderEffect()))},{rootMargin:"200px"}),this._observer.observe(this)}updated(o){if(o.has("src")&&this.src){this._loadImage(this.src);return}if(!this._image)return;[...o.keys()].some(t=>G.has(t))&&this._scheduleRender()}disconnectedCallback(){var o;super.disconnectedCallback(),(o=this._observer)==null||o.disconnect(),this._revokeSnapshot()}_loadImage(o){const a=new Image;a.crossOrigin="anonymous",a.onload=()=>{this._image=a,this._scheduleRender()},a.onerror=()=>{console.warn(`[some-shade] Failed to load image: ${o}`)},a.src=o}_scheduleRender(){this._visible?w(()=>this._renderEffect()):(this._needsRender=!0,requestAnimationFrame(()=>{if(this._needsRender&&!this._visible){const o=this.getBoundingClientRect();o.bottom>=0&&o.top<window.innerHeight&&(this._visible=!0,this._needsRender=!1,w(()=>this._renderEffect()))}}))}async _renderEffect(){var g;if(!this._image)return;const o=T(this.effect);if(!o){console.warn(`[some-shade] Unknown effect: ${this.effect}`);return}const a=Math.min(window.devicePixelRatio||1,X),t=this._image.naturalWidth,s=this._image.naturalHeight,n=document.createElement("canvas");n.width=t*a,n.height=s*a;const r=U(n);if(!r){this._webglAvailable=!1;return}try{const c=K(r,o.vertexShader,o.fragmentShader);r.useProgram(c.program);const h=D(r,this._image),d=L(r,c);r.viewport(0,0,n.width,n.height),r.clearColor(0,0,0,0),r.clear(r.COLOR_BUFFER_BIT),r.activeTexture(r.TEXTURE0),r.bindTexture(r.TEXTURE_2D,h.texture);const f=c.uniformLocations.get("u_image");f&&r.uniform1i(f,0),k(r,c,this._getUniformValues(h,a)),r.bindBuffer(r.ARRAY_BUFFER,d);const m=4*Float32Array.BYTES_PER_ELEMENT,b=c.attribLocations.get("a_position");b!==void 0&&b!==-1&&(r.enableVertexAttribArray(b),r.vertexAttribPointer(b,2,r.FLOAT,!1,m,0));const v=c.attribLocations.get("a_texCoord");v!==void 0&&v!==-1&&(r.enableVertexAttribArray(v),r.vertexAttribPointer(v,2,r.FLOAT,!1,m,2*Float32Array.BYTES_PER_ELEMENT)),M(r);const S=await new Promise(A=>n.toBlob(A));r.deleteTexture(h.texture),r.deleteProgram(c.program),r.deleteBuffer(d),S&&(this._snapshotLoaded=!1,this._revokeSnapshot(),this._snapshotUrl=URL.createObjectURL(S))}finally{(g=r.getExtension("WEBGL_lose_context"))==null||g.loseContext()}}_onSnapshotLoad(){this._snapshotLoaded=!0}replayTransition(o=500){this._snapshotUrl&&(this._snapshotLoaded=!1,this.updateComplete.then(()=>{setTimeout(()=>{this._snapshotLoaded=!0},o)}))}_revokeSnapshot(){this._snapshotUrl&&(URL.revokeObjectURL(this._snapshotUrl),this._snapshotUrl="")}_getUniformValues(o,a){const t={};t.u_resolution=[o.width*a,o.height*a];const s=o.width/this.referenceWidth;return t.u_dotRadius=this.dotRadius*s,t.u_gridSize=this.gridSize*s,this.effect==="halftone-cmyk"?(t.u_angleC=this.angleC,t.u_angleM=this.angleM,t.u_angleY=this.angleY,t.u_angleK=this.angleK,t.u_showC=this.showC,t.u_showM=this.showM,t.u_showY=this.showY,t.u_showK=this.showK,t.u_intensityK=this.intensityK):this.effect==="halftone-duotone"?(t.u_duotoneColor=this._parseHexColor(this.duotoneColor),t.u_angle=this.angle):this.effect==="dot-grid"?(t.u_dotOffset=[this.dotOffsetX,this.dotOffsetY],t.u_bgColor=this._parseHexColor(this.bgColor),t.u_angle=this.angle):this.effect==="technicolor-2strip"&&(t.u_angleWarm=this.angleWarm,t.u_angleCool=this.angleCool,t.u_angleK=this.angleK,t.u_showWarm=this.showWarm,t.u_showCool=this.showCool,t.u_showK=this.showK,t.u_warmColor=this._parseHexColor(this.warmColor),t.u_coolColor=this._parseHexColor(this.coolColor),t.u_blendMode=this.blendMode,t.u_intensityK=this.intensityK),t}_parseHexColor(o){const a=o.replace("#",""),t=parseInt(a.substring(0,2),16)/255,s=parseInt(a.substring(2,4),16)/255,n=parseInt(a.substring(4,6),16)/255;return[t,s,n]}};R.styles=p.css`
     :host {
       display: block;
       position: relative;
@@ -292,6 +292,9 @@ void main() {
       width: 100%;
       height: auto;
     }
+    img.base {
+      opacity: 0;
+    }
     img.snapshot {
       position: absolute;
       inset: 0;
@@ -303,4 +306,4 @@ void main() {
     img.snapshot.loaded {
       opacity: 1;
     }
-  `;let i=C;l([s.property()],i.prototype,"src");l([s.property()],i.prototype,"effect");l([s.property({type:Number,attribute:"dot-radius"})],i.prototype,"dotRadius");l([s.property({type:Number,attribute:"grid-size"})],i.prototype,"gridSize");l([s.property({type:Number,attribute:"angle-c"})],i.prototype,"angleC");l([s.property({type:Number,attribute:"angle-m"})],i.prototype,"angleM");l([s.property({type:Number,attribute:"angle-y"})],i.prototype,"angleY");l([s.property({type:Number,attribute:"angle-k"})],i.prototype,"angleK");l([s.property({type:Number,attribute:"show-c"})],i.prototype,"showC");l([s.property({type:Number,attribute:"show-m"})],i.prototype,"showM");l([s.property({type:Number,attribute:"show-y"})],i.prototype,"showY");l([s.property({type:Number,attribute:"show-k"})],i.prototype,"showK");l([s.property({type:Number,attribute:"intensity-k"})],i.prototype,"intensityK");l([s.property({attribute:"duotone-color"})],i.prototype,"duotoneColor");l([s.property({type:Number})],i.prototype,"angle");l([s.property({type:Number,attribute:"dot-offset-x"})],i.prototype,"dotOffsetX");l([s.property({type:Number,attribute:"dot-offset-y"})],i.prototype,"dotOffsetY");l([s.property({attribute:"bg-color"})],i.prototype,"bgColor");l([s.property({type:Number,attribute:"angle-warm"})],i.prototype,"angleWarm");l([s.property({type:Number,attribute:"angle-cool"})],i.prototype,"angleCool");l([s.property({type:Number,attribute:"show-warm"})],i.prototype,"showWarm");l([s.property({type:Number,attribute:"show-cool"})],i.prototype,"showCool");l([s.property({attribute:"warm-color"})],i.prototype,"warmColor");l([s.property({attribute:"cool-color"})],i.prototype,"coolColor");l([s.property({type:Number,attribute:"blend-mode"})],i.prototype,"blendMode");l([s.property({type:Number,attribute:"reference-width"})],i.prototype,"referenceWidth");l([s.property({type:Number,attribute:"loading-blur"})],i.prototype,"loadingBlur");l([s.state()],i.prototype,"_webglAvailable");l([s.state()],i.prototype,"_snapshotUrl");l([s.state()],i.prototype,"_snapshotLoaded");customElements.get("some-shade-image")||customElements.define("some-shade-image",i);exports.SomeShadeImage=i;exports.get=T;exports.list=B;exports.register=_;
+  `;let i=R;u([l.property()],i.prototype,"src");u([l.property()],i.prototype,"effect");u([l.property({type:Number,attribute:"dot-radius"})],i.prototype,"dotRadius");u([l.property({type:Number,attribute:"grid-size"})],i.prototype,"gridSize");u([l.property({type:Number,attribute:"angle-c"})],i.prototype,"angleC");u([l.property({type:Number,attribute:"angle-m"})],i.prototype,"angleM");u([l.property({type:Number,attribute:"angle-y"})],i.prototype,"angleY");u([l.property({type:Number,attribute:"angle-k"})],i.prototype,"angleK");u([l.property({type:Number,attribute:"show-c"})],i.prototype,"showC");u([l.property({type:Number,attribute:"show-m"})],i.prototype,"showM");u([l.property({type:Number,attribute:"show-y"})],i.prototype,"showY");u([l.property({type:Number,attribute:"show-k"})],i.prototype,"showK");u([l.property({type:Number,attribute:"intensity-k"})],i.prototype,"intensityK");u([l.property({attribute:"duotone-color"})],i.prototype,"duotoneColor");u([l.property({type:Number})],i.prototype,"angle");u([l.property({type:Number,attribute:"dot-offset-x"})],i.prototype,"dotOffsetX");u([l.property({type:Number,attribute:"dot-offset-y"})],i.prototype,"dotOffsetY");u([l.property({attribute:"bg-color"})],i.prototype,"bgColor");u([l.property({type:Number,attribute:"angle-warm"})],i.prototype,"angleWarm");u([l.property({type:Number,attribute:"angle-cool"})],i.prototype,"angleCool");u([l.property({type:Number,attribute:"show-warm"})],i.prototype,"showWarm");u([l.property({type:Number,attribute:"show-cool"})],i.prototype,"showCool");u([l.property({attribute:"warm-color"})],i.prototype,"warmColor");u([l.property({attribute:"cool-color"})],i.prototype,"coolColor");u([l.property({type:Number,attribute:"blend-mode"})],i.prototype,"blendMode");u([l.property({type:Number,attribute:"reference-width"})],i.prototype,"referenceWidth");u([l.state()],i.prototype,"_webglAvailable");u([l.state()],i.prototype,"_snapshotUrl");u([l.state()],i.prototype,"_snapshotLoaded");customElements.get("some-shade-image")||customElements.define("some-shade-image",i);exports.SomeShadeImage=i;exports.get=T;exports.list=Y;exports.register=_;

package/dist/some-shade.es.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { LitElement as U, css as K, html as y } from "lit";
-import { property as u, state as w } from "lit/decorators.js";
+import { property as u, state as C } from "lit/decorators.js";
 function k(e) {
   return e.getContext("webgl", {
     alpha: !0,
@@ -11,19 +11,19 @@ function x(e, o, a) {
   const t = e.createShader(o);
   if (!t) throw new Error("Failed to create shader");
   if (e.shaderSource(t, a), e.compileShader(t), !e.getShaderParameter(t, e.COMPILE_STATUS)) {
-    const l = e.getShaderInfoLog(t);
-    throw e.deleteShader(t), new Error(`Shader compile error: ${l}`);
+    const s = e.getShaderInfoLog(t);
+    throw e.deleteShader(t), new Error(`Shader compile error: ${s}`);
   }
   return t;
 }
 function D(e, o, a) {
-  const t = x(e, e.VERTEX_SHADER, o), l = x(e, e.FRAGMENT_SHADER, a), r = e.createProgram();
+  const t = x(e, e.VERTEX_SHADER, o), s = x(e, e.FRAGMENT_SHADER, a), r = e.createProgram();
   if (!r) throw new Error("Failed to create program");
-  if (e.attachShader(r, t), e.attachShader(r, l), e.linkProgram(r), !e.getProgramParameter(r, e.LINK_STATUS)) {
+  if (e.attachShader(r, t), e.attachShader(r, s), e.linkProgram(r), !e.getProgramParameter(r, e.LINK_STATUS)) {
     const d = e.getProgramInfoLog(r);
     throw e.deleteProgram(r), new Error(`Program link error: ${d}`);
   }
-  e.deleteShader(t), e.deleteShader(l);
+  e.deleteShader(t), e.deleteShader(s);
   const n = /* @__PURE__ */ new Map(), _ = e.getProgramParameter(r, e.ACTIVE_ATTRIBUTES);
   for (let d = 0; d < _; d++) {
     const c = e.getActiveAttrib(r, d);
@@ -40,21 +40,21 @@ function D(e, o, a) {
   return { program: r, attribLocations: n, uniformLocations: f };
 }
 function L(e, o, a) {
-  for (const [t, l] of Object.entries(a)) {
+  for (const [t, s] of Object.entries(a)) {
     const r = o.uniformLocations.get(t);
     if (r) {
-      if (typeof l == "number")
-        e.uniform1f(r, l);
-      else if (Array.isArray(l))
-        switch (l.length) {
+      if (typeof s == "number")
+        e.uniform1f(r, s);
+      else if (Array.isArray(s))
+        switch (s.length) {
           case 2:
-            e.uniform2fv(r, l);
+            e.uniform2fv(r, s);
             break;
           case 3:
-            e.uniform3fv(r, l);
+            e.uniform3fv(r, s);
             break;
           case 4:
-            e.uniform4fv(r, l);
+            e.uniform4fv(r, s);
             break;
         }
     }
@@ -87,15 +87,15 @@ function z(e, o) {
   ]), t = e.createBuffer();
   if (!t) throw new Error("Failed to create buffer");
   e.bindBuffer(e.ARRAY_BUFFER, t), e.bufferData(e.ARRAY_BUFFER, a, e.STATIC_DRAW);
-  const l = 4 * Float32Array.BYTES_PER_ELEMENT, r = o.attribLocations.get("a_position");
-  r !== void 0 && r !== -1 && (e.enableVertexAttribArray(r), e.vertexAttribPointer(r, 2, e.FLOAT, !1, l, 0));
+  const s = 4 * Float32Array.BYTES_PER_ELEMENT, r = o.attribLocations.get("a_position");
+  r !== void 0 && r !== -1 && (e.enableVertexAttribArray(r), e.vertexAttribPointer(r, 2, e.FLOAT, !1, s, 0));
   const n = o.attribLocations.get("a_texCoord");
-  return n !== void 0 && n !== -1 && (e.enableVertexAttribArray(n), e.vertexAttribPointer(n, 2, e.FLOAT, !1, l, 2 * Float32Array.BYTES_PER_ELEMENT)), t;
+  return n !== void 0 && n !== -1 && (e.enableVertexAttribArray(n), e.vertexAttribPointer(n, 2, e.FLOAT, !1, s, 2 * Float32Array.BYTES_PER_ELEMENT)), t;
 }
 function P(e) {
   e.drawArrays(e.TRIANGLE_STRIP, 0, 4);
 }
-const I = `precision mediump float;
+const V = `precision mediump float;
 varying vec2 v_texCoord;
@@ -189,9 +189,9 @@ void main() {
   gl_Position = vec4(a_position, 0.0, 1.0);
   v_texCoord = a_texCoord;
 }
-`, V = {
+`, I = {
   name: "halftone-cmyk",
-  fragmentShader: I,
+  fragmentShader: V,
   vertexShader: b,
   uniforms: [
     { name: "u_dotRadius", type: "float", default: 4, attribute: "dot-radius" },
@@ -325,7 +325,7 @@ void main() {
     { name: "u_bgColor", type: "vec3", default: [1, 1, 1], attribute: "bg-color" },
     { name: "u_angle", type: "float", default: 0, attribute: "angle" }
   ]
-}, B = `precision mediump float;
+}, Y = `precision mediump float;
 varying vec2 v_texCoord;
@@ -408,9 +408,9 @@ void main() {
   gl_FragColor = vec4(clamp(result, 0.0, 1.0), color.a);
 }
-`, Y = {
+`, B = {
   name: "technicolor-2strip",
-  fragmentShader: B,
+  fragmentShader: Y,
   vertexShader: b,
   uniforms: [
     { name: "u_dotRadius", type: "float", default: 7, attribute: "dot-radius" },
@@ -426,30 +426,30 @@ void main() {
     { name: "u_blendMode", type: "float", default: 1, attribute: "blend-mode" },
     { name: "u_intensityK", type: "float", default: 1, attribute: "intensity-k" }
   ]
-}, C = /* @__PURE__ */ new Map();
+}, R = /* @__PURE__ */ new Map();
 function v(e) {
-  C.set(e.name, e);
+  R.set(e.name, e);
 }
 function X(e) {
-  return C.get(e);
+  return R.get(e);
 }
 function Q() {
-  return Array.from(C.keys());
+  return Array.from(R.keys());
 }
-v(V);
+v(I);
 v(O);
 v(W);
-v(Y);
-var $ = Object.defineProperty, s = (e, o, a, t) => {
-  for (var l = void 0, r = e.length - 1, n; r >= 0; r--)
-    (n = e[r]) && (l = n(o, a, l) || l);
-  return l && $(o, a, l), l;
+v(B);
+var G = Object.defineProperty, l = (e, o, a, t) => {
+  for (var s = void 0, r = e.length - 1, n; r >= 0; r--)
+    (n = e[r]) && (s = n(o, a, s) || s);
+  return s && G(o, a, s), s;
 };
-const G = 2;
-let E = Promise.resolve();
-function T(e) {
-  const o = E.then(e, e);
-  return E = o, o;
+const $ = 2;
+let T = Promise.resolve();
+function w(e) {
+  const o = T.then(e, e);
+  return T = o, o;
 }
 const H = /* @__PURE__ */ new Set([
   "effect",
@@ -477,29 +477,26 @@ const H = /* @__PURE__ */ new Set([
   "coolColor",
   "blendMode",
   "referenceWidth"
-]), R = class R extends U {
+]), S = class S extends U {
   constructor() {
-    super(...arguments), this.src = "", this.effect = "halftone-cmyk", this.dotRadius = 4, this.gridSize = 8, this.angleC = 15, this.angleM = 75, this.angleY = 0, this.angleK = 45, this.showC = 1, this.showM = 1, this.showY = 1, this.showK = 1, this.intensityK = 1, this.duotoneColor = "#0099cc", this.angle = 0, this.dotOffsetX = 0.5, this.dotOffsetY = 0.5, this.bgColor = "#ffffff", this.angleWarm = 15, this.angleCool = 75, this.showWarm = 1, this.showCool = 1, this.warmColor = "#d94010", this.coolColor = "#0da699", this.blendMode = 1, this.referenceWidth = 1024, this.loadingBlur = 0, this._webglAvailable = !0, this._snapshotUrl = "", this._snapshotLoaded = !1, this._image = null, this._observer = null, this._visible = !1, this._needsRender = !1;
+    super(...arguments), this.src = "", this.effect = "halftone-cmyk", this.dotRadius = 4, this.gridSize = 8, this.angleC = 15, this.angleM = 75, this.angleY = 0, this.angleK = 45, this.showC = 1, this.showM = 1, this.showY = 1, this.showK = 1, this.intensityK = 1, this.duotoneColor = "#0099cc", this.angle = 0, this.dotOffsetX = 0.5, this.dotOffsetY = 0.5, this.bgColor = "#ffffff", this.angleWarm = 15, this.angleCool = 75, this.showWarm = 1, this.showCool = 1, this.warmColor = "#d94010", this.coolColor = "#0da699", this.blendMode = 1, this.referenceWidth = 1024, this._webglAvailable = !0, this._snapshotUrl = "", this._snapshotLoaded = !1, this._image = null, this._observer = null, this._visible = !1, this._needsRender = !1;
   }
   render() {
-    if (!this._webglAvailable)
-      return y`<img src=${this.src} alt="" />`;
-    const o = this.loadingBlur > 0 ? `filter: blur(${this.loadingBlur}px)` : "";
-    return y`
-      <img src=${this.src} alt="" style=${o} />
+    return this._webglAvailable ? y`
+      <img class="base" src=${this.src} alt="" />
       ${this._snapshotUrl ? y`<img
             class="snapshot${this._snapshotLoaded ? " loaded" : ""}"
             src=${this._snapshotUrl}
             @load=${this._onSnapshotLoad}
             alt="" />` : ""}
-    `;
+    ` : y`<img src=${this.src} alt="" />`;
   }
   connectedCallback() {
     super.connectedCallback(), this._observer = new IntersectionObserver(
       (o) => {
         var t;
         const a = this._visible;
-        this._visible = ((t = o[0]) == null ? void 0 : t.isIntersecting) ?? !1, this._visible && !a && this._needsRender && (this._needsRender = !1, T(() => this._renderEffect()));
+        this._visible = ((t = o[0]) == null ? void 0 : t.isIntersecting) ?? !1, this._visible && !a && (this._needsRender || this._image && !this._snapshotUrl) && (this._needsRender = !1, w(() => this._renderEffect()));
       },
       // Start rendering slightly before the element scrolls into view.
       { rootMargin: "200px" }
@@ -534,7 +531,12 @@ const H = /* @__PURE__ */ new Set([
   // Render scheduling
   // ---------------------------------------------------------------------------
   _scheduleRender() {
-    this._visible ? T(() => this._renderEffect()) : this._needsRender = !0;
+    this._visible ? w(() => this._renderEffect()) : (this._needsRender = !0, requestAnimationFrame(() => {
+      if (this._needsRender && !this._visible) {
+        const o = this.getBoundingClientRect();
+        o.bottom >= 0 && o.top < window.innerHeight && (this._visible = !0, this._needsRender = !1, w(() => this._renderEffect()));
+      }
+    }));
   }
   // ---------------------------------------------------------------------------
   // WebGL render → snapshot → tear-down
@@ -547,8 +549,8 @@ const H = /* @__PURE__ */ new Set([
       console.warn(`[some-shade] Unknown effect: ${this.effect}`);
       return;
     }
-    const a = Math.min(window.devicePixelRatio || 1, G), t = this._image.naturalWidth, l = this._image.naturalHeight, r = document.createElement("canvas");
-    r.width = t * a, r.height = l * a;
+    const a = Math.min(window.devicePixelRatio || 1, $), t = this._image.naturalWidth, s = this._image.naturalHeight, r = document.createElement("canvas");
+    r.width = t * a, r.height = s * a;
     const n = k(r);
     if (!n) {
       this._webglAvailable = !1;
@@ -580,10 +582,10 @@ const H = /* @__PURE__ */ new Set([
         h,
         2 * Float32Array.BYTES_PER_ELEMENT
       )), P(n);
-      const S = await new Promise(
+      const E = await new Promise(
         (A) => r.toBlob(A)
       );
-      n.deleteTexture(m.texture), n.deleteProgram(f.program), n.deleteBuffer(d), S && (this._snapshotLoaded = !1, this._revokeSnapshot(), this._snapshotUrl = URL.createObjectURL(S));
+      n.deleteTexture(m.texture), n.deleteProgram(f.program), n.deleteBuffer(d), E && (this._snapshotLoaded = !1, this._revokeSnapshot(), this._snapshotUrl = URL.createObjectURL(E));
     } finally {
       (_ = n.getExtension("WEBGL_lose_context")) == null || _.loseContext();
     }
@@ -612,15 +614,15 @@ const H = /* @__PURE__ */ new Set([
       o.width * a,
       o.height * a
     ];
-    const l = o.width / this.referenceWidth;
-    return t.u_dotRadius = this.dotRadius * l, t.u_gridSize = this.gridSize * l, this.effect === "halftone-cmyk" ? (t.u_angleC = this.angleC, t.u_angleM = this.angleM, t.u_angleY = this.angleY, t.u_angleK = this.angleK, t.u_showC = this.showC, t.u_showM = this.showM, t.u_showY = this.showY, t.u_showK = this.showK, t.u_intensityK = this.intensityK) : this.effect === "halftone-duotone" ? (t.u_duotoneColor = this._parseHexColor(this.duotoneColor), t.u_angle = this.angle) : this.effect === "dot-grid" ? (t.u_dotOffset = [this.dotOffsetX, this.dotOffsetY], t.u_bgColor = this._parseHexColor(this.bgColor), t.u_angle = this.angle) : this.effect === "technicolor-2strip" && (t.u_angleWarm = this.angleWarm, t.u_angleCool = this.angleCool, t.u_angleK = this.angleK, t.u_showWarm = this.showWarm, t.u_showCool = this.showCool, t.u_showK = this.showK, t.u_warmColor = this._parseHexColor(this.warmColor), t.u_coolColor = this._parseHexColor(this.coolColor), t.u_blendMode = this.blendMode, t.u_intensityK = this.intensityK), t;
+    const s = o.width / this.referenceWidth;
+    return t.u_dotRadius = this.dotRadius * s, t.u_gridSize = this.gridSize * s, this.effect === "halftone-cmyk" ? (t.u_angleC = this.angleC, t.u_angleM = this.angleM, t.u_angleY = this.angleY, t.u_angleK = this.angleK, t.u_showC = this.showC, t.u_showM = this.showM, t.u_showY = this.showY, t.u_showK = this.showK, t.u_intensityK = this.intensityK) : this.effect === "halftone-duotone" ? (t.u_duotoneColor = this._parseHexColor(this.duotoneColor), t.u_angle = this.angle) : this.effect === "dot-grid" ? (t.u_dotOffset = [this.dotOffsetX, this.dotOffsetY], t.u_bgColor = this._parseHexColor(this.bgColor), t.u_angle = this.angle) : this.effect === "technicolor-2strip" && (t.u_angleWarm = this.angleWarm, t.u_angleCool = this.angleCool, t.u_angleK = this.angleK, t.u_showWarm = this.showWarm, t.u_showCool = this.showCool, t.u_showK = this.showK, t.u_warmColor = this._parseHexColor(this.warmColor), t.u_coolColor = this._parseHexColor(this.coolColor), t.u_blendMode = this.blendMode, t.u_intensityK = this.intensityK), t;
   }
   _parseHexColor(o) {
-    const a = o.replace("#", ""), t = parseInt(a.substring(0, 2), 16) / 255, l = parseInt(a.substring(2, 4), 16) / 255, r = parseInt(a.substring(4, 6), 16) / 255;
-    return [t, l, r];
+    const a = o.replace("#", ""), t = parseInt(a.substring(0, 2), 16) / 255, s = parseInt(a.substring(2, 4), 16) / 255, r = parseInt(a.substring(4, 6), 16) / 255;
+    return [t, s, r];
   }
 };
-R.styles = K`
+S.styles = K`
     :host {
       display: block;
       position: relative;
@@ -632,6 +634,9 @@ R.styles = K`
       width: 100%;
       height: auto;
     }
+    img.base {
+      opacity: 0;
+    }
     img.snapshot {
       position: absolute;
       inset: 0;
@@ -644,96 +649,93 @@ R.styles = K`
       opacity: 1;
     }
   `;
-let i = R;
-s([
+let i = S;
+l([
   u()
 ], i.prototype, "src");
-s([
+l([
   u()
 ], i.prototype, "effect");
-s([
+l([
   u({ type: Number, attribute: "dot-radius" })
 ], i.prototype, "dotRadius");
-s([
+l([
   u({ type: Number, attribute: "grid-size" })
 ], i.prototype, "gridSize");
-s([
+l([
   u({ type: Number, attribute: "angle-c" })
 ], i.prototype, "angleC");
-s([
+l([
   u({ type: Number, attribute: "angle-m" })
 ], i.prototype, "angleM");
-s([
+l([
   u({ type: Number, attribute: "angle-y" })
 ], i.prototype, "angleY");
-s([
+l([
   u({ type: Number, attribute: "angle-k" })
 ], i.prototype, "angleK");
-s([
+l([
   u({ type: Number, attribute: "show-c" })
 ], i.prototype, "showC");
-s([
+l([
   u({ type: Number, attribute: "show-m" })
 ], i.prototype, "showM");
-s([
+l([
   u({ type: Number, attribute: "show-y" })
 ], i.prototype, "showY");
-s([
+l([
   u({ type: Number, attribute: "show-k" })
 ], i.prototype, "showK");
-s([
+l([
   u({ type: Number, attribute: "intensity-k" })
 ], i.prototype, "intensityK");
-s([
+l([
   u({ attribute: "duotone-color" })
 ], i.prototype, "duotoneColor");
-s([
+l([
   u({ type: Number })
 ], i.prototype, "angle");
-s([
+l([
   u({ type: Number, attribute: "dot-offset-x" })
 ], i.prototype, "dotOffsetX");
-s([
+l([
   u({ type: Number, attribute: "dot-offset-y" })
 ], i.prototype, "dotOffsetY");
-s([
+l([
   u({ attribute: "bg-color" })
 ], i.prototype, "bgColor");
-s([
+l([
   u({ type: Number, attribute: "angle-warm" })
 ], i.prototype, "angleWarm");
-s([
+l([
   u({ type: Number, attribute: "angle-cool" })
 ], i.prototype, "angleCool");
-s([
+l([
   u({ type: Number, attribute: "show-warm" })
 ], i.prototype, "showWarm");
-s([
+l([
   u({ type: Number, attribute: "show-cool" })
 ], i.prototype, "showCool");
-s([
+l([
   u({ attribute: "warm-color" })
 ], i.prototype, "warmColor");
-s([
+l([
   u({ attribute: "cool-color" })
 ], i.prototype, "coolColor");
-s([
+l([
   u({ type: Number, attribute: "blend-mode" })
 ], i.prototype, "blendMode");
-s([
+l([
   u({ type: Number, attribute: "reference-width" })
 ], i.prototype, "referenceWidth");
-s([
-  u({ type: Number, attribute: "loading-blur" })
-], i.prototype, "loadingBlur");
-s([
-  w()
+l([
+  C()
 ], i.prototype, "_webglAvailable");
-s([
-  w()
+l([
+  C()
 ], i.prototype, "_snapshotUrl");
-s([
-  w()
+l([
+  C()
 ], i.prototype, "_snapshotLoaded");
 customElements.get("some-shade-image") || customElements.define("some-shade-image", i);
 export {

package/dist/some-shade.umd.js CHANGED Viewed

@@ -1,4 +1,4 @@
-(function(f,h){typeof exports=="object"&&typeof module<"u"?h(exports,require("lit"),require("lit/decorators.js")):typeof define=="function"&&define.amd?define(["exports","lit","lit/decorators.js"],h):(f=typeof globalThis<"u"?globalThis:f||self,h(f.SomeShade={},f.Lit,f.LitDecorators))})(this,(function(f,h,l){"use strict";function U(e){return e.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,preserveDrawingBuffer:!0})}function S(e,o,i){const t=e.createShader(o);if(!t)throw new Error("Failed to create shader");if(e.shaderSource(t,i),e.compileShader(t),!e.getShaderParameter(t,e.COMPILE_STATUS)){const u=e.getShaderInfoLog(t);throw e.deleteShader(t),new Error(`Shader compile error: ${u}`)}return t}function K(e,o,i){const t=S(e,e.VERTEX_SHADER,o),u=S(e,e.FRAGMENT_SHADER,i),r=e.createProgram();if(!r)throw new Error("Failed to create program");if(e.attachShader(r,t),e.attachShader(r,u),e.linkProgram(r),!e.getProgramParameter(r,e.LINK_STATUS)){const d=e.getProgramInfoLog(r);throw e.deleteProgram(r),new Error(`Program link error: ${d}`)}e.deleteShader(t),e.deleteShader(u);const n=new Map,v=e.getProgramParameter(r,e.ACTIVE_ATTRIBUTES);for(let d=0;d<v;d++){const m=e.getActiveAttrib(r,d);m&&n.set(m.name,e.getAttribLocation(r,m.name))}const c=new Map,g=e.getProgramParameter(r,e.ACTIVE_UNIFORMS);for(let d=0;d<g;d++){const m=e.getActiveUniform(r,d);if(m){const _=e.getUniformLocation(r,m.name);_&&c.set(m.name,_)}}return{program:r,attribLocations:n,uniformLocations:c}}function k(e,o,i){for(const[t,u]of Object.entries(i)){const r=o.uniformLocations.get(t);if(r){if(typeof u=="number")e.uniform1f(r,u);else if(Array.isArray(u))switch(u.length){case 2:e.uniform2fv(r,u);break;case 3:e.uniform3fv(r,u);break;case 4:e.uniform4fv(r,u);break}}}}function D(e,o){const i=e.createTexture();if(!i)throw new Error("Failed to create texture");return e.bindTexture(e.TEXTURE_2D,i),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,o),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),{texture:i,width:o.naturalWidth,height:o.naturalHeight}}function L(e,o){const i=new Float32Array([-1,-1,0,1,1,-1,1,1,-1,1,0,0,1,1,1,0]),t=e.createBuffer();if(!t)throw new Error("Failed to create buffer");e.bindBuffer(e.ARRAY_BUFFER,t),e.bufferData(e.ARRAY_BUFFER,i,e.STATIC_DRAW);const u=4*Float32Array.BYTES_PER_ELEMENT,r=o.attribLocations.get("a_position");r!==void 0&&r!==-1&&(e.enableVertexAttribArray(r),e.vertexAttribPointer(r,2,e.FLOAT,!1,u,0));const n=o.attribLocations.get("a_texCoord");return n!==void 0&&n!==-1&&(e.enableVertexAttribArray(n),e.vertexAttribPointer(n,2,e.FLOAT,!1,u,2*Float32Array.BYTES_PER_ELEMENT)),t}function M(e){e.drawArrays(e.TRIANGLE_STRIP,0,4)}const z=`precision mediump float;
+(function(d,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("lit"),require("lit/decorators.js")):typeof define=="function"&&define.amd?define(["exports","lit","lit/decorators.js"],m):(d=typeof globalThis<"u"?globalThis:d||self,m(d.SomeShade={},d.Lit,d.LitDecorators))})(this,(function(d,m,s){"use strict";function U(e){return e.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,preserveDrawingBuffer:!0})}function E(e,o,a){const t=e.createShader(o);if(!t)throw new Error("Failed to create shader");if(e.shaderSource(t,a),e.compileShader(t),!e.getShaderParameter(t,e.COMPILE_STATUS)){const u=e.getShaderInfoLog(t);throw e.deleteShader(t),new Error(`Shader compile error: ${u}`)}return t}function K(e,o,a){const t=E(e,e.VERTEX_SHADER,o),u=E(e,e.FRAGMENT_SHADER,a),r=e.createProgram();if(!r)throw new Error("Failed to create program");if(e.attachShader(r,t),e.attachShader(r,u),e.linkProgram(r),!e.getProgramParameter(r,e.LINK_STATUS)){const f=e.getProgramInfoLog(r);throw e.deleteProgram(r),new Error(`Program link error: ${f}`)}e.deleteShader(t),e.deleteShader(u);const n=new Map,v=e.getProgramParameter(r,e.ACTIVE_ATTRIBUTES);for(let f=0;f<v;f++){const h=e.getActiveAttrib(r,f);h&&n.set(h.name,e.getAttribLocation(r,h.name))}const c=new Map,_=e.getProgramParameter(r,e.ACTIVE_UNIFORMS);for(let f=0;f<_;f++){const h=e.getActiveUniform(r,f);if(h){const g=e.getUniformLocation(r,h.name);g&&c.set(h.name,g)}}return{program:r,attribLocations:n,uniformLocations:c}}function k(e,o,a){for(const[t,u]of Object.entries(a)){const r=o.uniformLocations.get(t);if(r){if(typeof u=="number")e.uniform1f(r,u);else if(Array.isArray(u))switch(u.length){case 2:e.uniform2fv(r,u);break;case 3:e.uniform3fv(r,u);break;case 4:e.uniform4fv(r,u);break}}}}function D(e,o){const a=e.createTexture();if(!a)throw new Error("Failed to create texture");return e.bindTexture(e.TEXTURE_2D,a),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,o),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),{texture:a,width:o.naturalWidth,height:o.naturalHeight}}function L(e,o){const a=new Float32Array([-1,-1,0,1,1,-1,1,1,-1,1,0,0,1,1,1,0]),t=e.createBuffer();if(!t)throw new Error("Failed to create buffer");e.bindBuffer(e.ARRAY_BUFFER,t),e.bufferData(e.ARRAY_BUFFER,a,e.STATIC_DRAW);const u=4*Float32Array.BYTES_PER_ELEMENT,r=o.attribLocations.get("a_position");r!==void 0&&r!==-1&&(e.enableVertexAttribArray(r),e.vertexAttribPointer(r,2,e.FLOAT,!1,u,0));const n=o.attribLocations.get("a_texCoord");return n!==void 0&&n!==-1&&(e.enableVertexAttribArray(n),e.vertexAttribPointer(n,2,e.FLOAT,!1,u,2*Float32Array.BYTES_PER_ELEMENT)),t}function M(e){e.drawArrays(e.TRIANGLE_STRIP,0,4)}const z=`precision mediump float;
 varying vec2 v_texCoord;
@@ -92,7 +92,7 @@ void main() {
   gl_Position = vec4(a_position, 0.0, 1.0);
   v_texCoord = a_texCoord;
 }
-`,P={name:"halftone-cmyk",fragmentShader:z,vertexShader:b,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_angleC",type:"float",default:15,attribute:"angle-c"},{name:"u_angleM",type:"float",default:75,attribute:"angle-m"},{name:"u_angleY",type:"float",default:0,attribute:"angle-y"},{name:"u_angleK",type:"float",default:45,attribute:"angle-k"},{name:"u_showC",type:"float",default:1,attribute:"show-c"},{name:"u_showM",type:"float",default:1,attribute:"show-m"},{name:"u_showY",type:"float",default:1,attribute:"show-y"},{name:"u_showK",type:"float",default:1,attribute:"show-k"},{name:"u_intensityK",type:"float",default:1,attribute:"intensity-k"}]},I={name:"halftone-duotone",fragmentShader:`precision mediump float;
+`,P={name:"halftone-cmyk",fragmentShader:z,vertexShader:b,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_angleC",type:"float",default:15,attribute:"angle-c"},{name:"u_angleM",type:"float",default:75,attribute:"angle-m"},{name:"u_angleY",type:"float",default:0,attribute:"angle-y"},{name:"u_angleK",type:"float",default:45,attribute:"angle-k"},{name:"u_showC",type:"float",default:1,attribute:"show-c"},{name:"u_showM",type:"float",default:1,attribute:"show-m"},{name:"u_showY",type:"float",default:1,attribute:"show-y"},{name:"u_showK",type:"float",default:1,attribute:"show-k"},{name:"u_intensityK",type:"float",default:1,attribute:"intensity-k"}]},V={name:"halftone-duotone",fragmentShader:`precision mediump float;
 varying vec2 v_texCoord;
@@ -134,7 +134,7 @@ void main() {
   gl_FragColor = vec4(result, color.a);
 }
-`,vertexShader:b,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_duotoneColor",type:"vec3",default:[0,.6,.8],attribute:"duotone-color"},{name:"u_angle",type:"float",default:0,attribute:"angle"}]},V={name:"dot-grid",fragmentShader:`precision mediump float;
+`,vertexShader:b,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_duotoneColor",type:"vec3",default:[0,.6,.8],attribute:"duotone-color"},{name:"u_angle",type:"float",default:0,attribute:"angle"}]},I={name:"dot-grid",fragmentShader:`precision mediump float;
 varying vec2 v_texCoord;
@@ -190,7 +190,7 @@ void main() {
   gl_FragColor = vec4(result, 1.0);
 }
-`,vertexShader:b,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_dotOffset",type:"vec2",default:[.5,.5],attribute:"dot-offset"},{name:"u_bgColor",type:"vec3",default:[1,1,1],attribute:"bg-color"},{name:"u_angle",type:"float",default:0,attribute:"angle"}]},N={name:"technicolor-2strip",fragmentShader:`precision mediump float;
+`,vertexShader:b,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,attribute:"grid-size"},{name:"u_dotOffset",type:"vec2",default:[.5,.5],attribute:"dot-offset"},{name:"u_bgColor",type:"vec3",default:[1,1,1],attribute:"bg-color"},{name:"u_angle",type:"float",default:0,attribute:"angle"}]},O={name:"technicolor-2strip",fragmentShader:`precision mediump float;
 varying vec2 v_texCoord;
@@ -273,14 +273,14 @@ void main() {
   gl_FragColor = vec4(clamp(result, 0.0, 1.0), color.a);
 }
-`,vertexShader:b,uniforms:[{name:"u_dotRadius",type:"float",default:7,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:10,attribute:"grid-size"},{name:"u_angleWarm",type:"float",default:15,attribute:"angle-warm"},{name:"u_angleCool",type:"float",default:75,attribute:"angle-cool"},{name:"u_angleK",type:"float",default:45,attribute:"angle-k"},{name:"u_showWarm",type:"float",default:1,attribute:"show-warm"},{name:"u_showCool",type:"float",default:1,attribute:"show-cool"},{name:"u_showK",type:"float",default:1,attribute:"show-k"},{name:"u_warmColor",type:"vec3",default:[.85,.25,.06],attribute:"warm-color"},{name:"u_coolColor",type:"vec3",default:[.05,.65,.6],attribute:"cool-color"},{name:"u_blendMode",type:"float",default:1,attribute:"blend-mode"},{name:"u_intensityK",type:"float",default:1,attribute:"intensity-k"}]},C=new Map;function p(e){C.set(e.name,e)}function E(e){return C.get(e)}function O(){return Array.from(C.keys())}p(P),p(I),p(V),p(N);var F=Object.defineProperty,s=(e,o,i,t)=>{for(var u=void 0,r=e.length-1,n;r>=0;r--)(n=e[r])&&(u=n(o,i,u)||u);return u&&F(o,i,u),u};const W=2;let x=Promise.resolve();function T(e){const o=x.then(e,e);return x=o,o}const B=new Set(["effect","dotRadius","gridSize","angleC","angleM","angleY","angleK","showC","showM","showY","showK","intensityK","duotoneColor","angle","dotOffsetX","dotOffsetY","bgColor","angleWarm","angleCool","showWarm","showCool","warmColor","coolColor","blendMode","referenceWidth"]),R=class R extends h.LitElement{constructor(){super(...arguments),this.src="",this.effect="halftone-cmyk",this.dotRadius=4,this.gridSize=8,this.angleC=15,this.angleM=75,this.angleY=0,this.angleK=45,this.showC=1,this.showM=1,this.showY=1,this.showK=1,this.intensityK=1,this.duotoneColor="#0099cc",this.angle=0,this.dotOffsetX=.5,this.dotOffsetY=.5,this.bgColor="#ffffff",this.angleWarm=15,this.angleCool=75,this.showWarm=1,this.showCool=1,this.warmColor="#d94010",this.coolColor="#0da699",this.blendMode=1,this.referenceWidth=1024,this.loadingBlur=0,this._webglAvailable=!0,this._snapshotUrl="",this._snapshotLoaded=!1,this._image=null,this._observer=null,this._visible=!1,this._needsRender=!1}render(){if(!this._webglAvailable)return h.html`<img src=${this.src} alt="" />`;const o=this.loadingBlur>0?`filter: blur(${this.loadingBlur}px)`:"";return h.html`
-      <img src=${this.src} alt="" style=${o} />
-      ${this._snapshotUrl?h.html`<img
+`,vertexShader:b,uniforms:[{name:"u_dotRadius",type:"float",default:7,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:10,attribute:"grid-size"},{name:"u_angleWarm",type:"float",default:15,attribute:"angle-warm"},{name:"u_angleCool",type:"float",default:75,attribute:"angle-cool"},{name:"u_angleK",type:"float",default:45,attribute:"angle-k"},{name:"u_showWarm",type:"float",default:1,attribute:"show-warm"},{name:"u_showCool",type:"float",default:1,attribute:"show-cool"},{name:"u_showK",type:"float",default:1,attribute:"show-k"},{name:"u_warmColor",type:"vec3",default:[.85,.25,.06],attribute:"warm-color"},{name:"u_coolColor",type:"vec3",default:[.05,.65,.6],attribute:"cool-color"},{name:"u_blendMode",type:"float",default:1,attribute:"blend-mode"},{name:"u_intensityK",type:"float",default:1,attribute:"intensity-k"}]},C=new Map;function p(e){C.set(e.name,e)}function x(e){return C.get(e)}function N(){return Array.from(C.keys())}p(P),p(V),p(I),p(O);var F=Object.defineProperty,l=(e,o,a,t)=>{for(var u=void 0,r=e.length-1,n;r>=0;r--)(n=e[r])&&(u=n(o,a,u)||u);return u&&F(o,a,u),u};const W=2;let T=Promise.resolve();function R(e){const o=T.then(e,e);return T=o,o}const Y=new Set(["effect","dotRadius","gridSize","angleC","angleM","angleY","angleK","showC","showM","showY","showK","intensityK","duotoneColor","angle","dotOffsetX","dotOffsetY","bgColor","angleWarm","angleCool","showWarm","showCool","warmColor","coolColor","blendMode","referenceWidth"]),S=class S extends m.LitElement{constructor(){super(...arguments),this.src="",this.effect="halftone-cmyk",this.dotRadius=4,this.gridSize=8,this.angleC=15,this.angleM=75,this.angleY=0,this.angleK=45,this.showC=1,this.showM=1,this.showY=1,this.showK=1,this.intensityK=1,this.duotoneColor="#0099cc",this.angle=0,this.dotOffsetX=.5,this.dotOffsetY=.5,this.bgColor="#ffffff",this.angleWarm=15,this.angleCool=75,this.showWarm=1,this.showCool=1,this.warmColor="#d94010",this.coolColor="#0da699",this.blendMode=1,this.referenceWidth=1024,this._webglAvailable=!0,this._snapshotUrl="",this._snapshotLoaded=!1,this._image=null,this._observer=null,this._visible=!1,this._needsRender=!1}render(){return this._webglAvailable?m.html`
+      <img class="base" src=${this.src} alt="" />
+      ${this._snapshotUrl?m.html`<img
             class="snapshot${this._snapshotLoaded?" loaded":""}"
             src=${this._snapshotUrl}
             @load=${this._onSnapshotLoad}
             alt="" />`:""}
-    `}connectedCallback(){super.connectedCallback(),this._observer=new IntersectionObserver(o=>{var t;const i=this._visible;this._visible=((t=o[0])==null?void 0:t.isIntersecting)??!1,this._visible&&!i&&this._needsRender&&(this._needsRender=!1,T(()=>this._renderEffect()))},{rootMargin:"200px"}),this._observer.observe(this)}updated(o){if(o.has("src")&&this.src){this._loadImage(this.src);return}if(!this._image)return;[...o.keys()].some(t=>B.has(t))&&this._scheduleRender()}disconnectedCallback(){var o;super.disconnectedCallback(),(o=this._observer)==null||o.disconnect(),this._revokeSnapshot()}_loadImage(o){const i=new Image;i.crossOrigin="anonymous",i.onload=()=>{this._image=i,this._scheduleRender()},i.onerror=()=>{console.warn(`[some-shade] Failed to load image: ${o}`)},i.src=o}_scheduleRender(){this._visible?T(()=>this._renderEffect()):this._needsRender=!0}async _renderEffect(){var v;if(!this._image)return;const o=E(this.effect);if(!o){console.warn(`[some-shade] Unknown effect: ${this.effect}`);return}const i=Math.min(window.devicePixelRatio||1,W),t=this._image.naturalWidth,u=this._image.naturalHeight,r=document.createElement("canvas");r.width=t*i,r.height=u*i;const n=U(r);if(!n){this._webglAvailable=!1;return}try{const c=K(n,o.vertexShader,o.fragmentShader);n.useProgram(c.program);const g=D(n,this._image),d=L(n,c);n.viewport(0,0,r.width,r.height),n.clearColor(0,0,0,0),n.clear(n.COLOR_BUFFER_BIT),n.activeTexture(n.TEXTURE0),n.bindTexture(n.TEXTURE_2D,g.texture);const m=c.uniformLocations.get("u_image");m&&n.uniform1i(m,0),k(n,c,this._getUniformValues(g,i)),n.bindBuffer(n.ARRAY_BUFFER,d);const _=4*Float32Array.BYTES_PER_ELEMENT,y=c.attribLocations.get("a_position");y!==void 0&&y!==-1&&(n.enableVertexAttribArray(y),n.vertexAttribPointer(y,2,n.FLOAT,!1,_,0));const w=c.attribLocations.get("a_texCoord");w!==void 0&&w!==-1&&(n.enableVertexAttribArray(w),n.vertexAttribPointer(w,2,n.FLOAT,!1,_,2*Float32Array.BYTES_PER_ELEMENT)),M(n);const A=await new Promise(Y=>r.toBlob(Y));n.deleteTexture(g.texture),n.deleteProgram(c.program),n.deleteBuffer(d),A&&(this._snapshotLoaded=!1,this._revokeSnapshot(),this._snapshotUrl=URL.createObjectURL(A))}finally{(v=n.getExtension("WEBGL_lose_context"))==null||v.loseContext()}}_onSnapshotLoad(){this._snapshotLoaded=!0}replayTransition(o=500){this._snapshotUrl&&(this._snapshotLoaded=!1,this.updateComplete.then(()=>{setTimeout(()=>{this._snapshotLoaded=!0},o)}))}_revokeSnapshot(){this._snapshotUrl&&(URL.revokeObjectURL(this._snapshotUrl),this._snapshotUrl="")}_getUniformValues(o,i){const t={};t.u_resolution=[o.width*i,o.height*i];const u=o.width/this.referenceWidth;return t.u_dotRadius=this.dotRadius*u,t.u_gridSize=this.gridSize*u,this.effect==="halftone-cmyk"?(t.u_angleC=this.angleC,t.u_angleM=this.angleM,t.u_angleY=this.angleY,t.u_angleK=this.angleK,t.u_showC=this.showC,t.u_showM=this.showM,t.u_showY=this.showY,t.u_showK=this.showK,t.u_intensityK=this.intensityK):this.effect==="halftone-duotone"?(t.u_duotoneColor=this._parseHexColor(this.duotoneColor),t.u_angle=this.angle):this.effect==="dot-grid"?(t.u_dotOffset=[this.dotOffsetX,this.dotOffsetY],t.u_bgColor=this._parseHexColor(this.bgColor),t.u_angle=this.angle):this.effect==="technicolor-2strip"&&(t.u_angleWarm=this.angleWarm,t.u_angleCool=this.angleCool,t.u_angleK=this.angleK,t.u_showWarm=this.showWarm,t.u_showCool=this.showCool,t.u_showK=this.showK,t.u_warmColor=this._parseHexColor(this.warmColor),t.u_coolColor=this._parseHexColor(this.coolColor),t.u_blendMode=this.blendMode,t.u_intensityK=this.intensityK),t}_parseHexColor(o){const i=o.replace("#",""),t=parseInt(i.substring(0,2),16)/255,u=parseInt(i.substring(2,4),16)/255,r=parseInt(i.substring(4,6),16)/255;return[t,u,r]}};R.styles=h.css`
+    `:m.html`<img src=${this.src} alt="" />`}connectedCallback(){super.connectedCallback(),this._observer=new IntersectionObserver(o=>{var t;const a=this._visible;this._visible=((t=o[0])==null?void 0:t.isIntersecting)??!1,this._visible&&!a&&(this._needsRender||this._image&&!this._snapshotUrl)&&(this._needsRender=!1,R(()=>this._renderEffect()))},{rootMargin:"200px"}),this._observer.observe(this)}updated(o){if(o.has("src")&&this.src){this._loadImage(this.src);return}if(!this._image)return;[...o.keys()].some(t=>Y.has(t))&&this._scheduleRender()}disconnectedCallback(){var o;super.disconnectedCallback(),(o=this._observer)==null||o.disconnect(),this._revokeSnapshot()}_loadImage(o){const a=new Image;a.crossOrigin="anonymous",a.onload=()=>{this._image=a,this._scheduleRender()},a.onerror=()=>{console.warn(`[some-shade] Failed to load image: ${o}`)},a.src=o}_scheduleRender(){this._visible?R(()=>this._renderEffect()):(this._needsRender=!0,requestAnimationFrame(()=>{if(this._needsRender&&!this._visible){const o=this.getBoundingClientRect();o.bottom>=0&&o.top<window.innerHeight&&(this._visible=!0,this._needsRender=!1,R(()=>this._renderEffect()))}}))}async _renderEffect(){var v;if(!this._image)return;const o=x(this.effect);if(!o){console.warn(`[some-shade] Unknown effect: ${this.effect}`);return}const a=Math.min(window.devicePixelRatio||1,W),t=this._image.naturalWidth,u=this._image.naturalHeight,r=document.createElement("canvas");r.width=t*a,r.height=u*a;const n=U(r);if(!n){this._webglAvailable=!1;return}try{const c=K(n,o.vertexShader,o.fragmentShader);n.useProgram(c.program);const _=D(n,this._image),f=L(n,c);n.viewport(0,0,r.width,r.height),n.clearColor(0,0,0,0),n.clear(n.COLOR_BUFFER_BIT),n.activeTexture(n.TEXTURE0),n.bindTexture(n.TEXTURE_2D,_.texture);const h=c.uniformLocations.get("u_image");h&&n.uniform1i(h,0),k(n,c,this._getUniformValues(_,a)),n.bindBuffer(n.ARRAY_BUFFER,f);const g=4*Float32Array.BYTES_PER_ELEMENT,y=c.attribLocations.get("a_position");y!==void 0&&y!==-1&&(n.enableVertexAttribArray(y),n.vertexAttribPointer(y,2,n.FLOAT,!1,g,0));const w=c.attribLocations.get("a_texCoord");w!==void 0&&w!==-1&&(n.enableVertexAttribArray(w),n.vertexAttribPointer(w,2,n.FLOAT,!1,g,2*Float32Array.BYTES_PER_ELEMENT)),M(n);const A=await new Promise(B=>r.toBlob(B));n.deleteTexture(_.texture),n.deleteProgram(c.program),n.deleteBuffer(f),A&&(this._snapshotLoaded=!1,this._revokeSnapshot(),this._snapshotUrl=URL.createObjectURL(A))}finally{(v=n.getExtension("WEBGL_lose_context"))==null||v.loseContext()}}_onSnapshotLoad(){this._snapshotLoaded=!0}replayTransition(o=500){this._snapshotUrl&&(this._snapshotLoaded=!1,this.updateComplete.then(()=>{setTimeout(()=>{this._snapshotLoaded=!0},o)}))}_revokeSnapshot(){this._snapshotUrl&&(URL.revokeObjectURL(this._snapshotUrl),this._snapshotUrl="")}_getUniformValues(o,a){const t={};t.u_resolution=[o.width*a,o.height*a];const u=o.width/this.referenceWidth;return t.u_dotRadius=this.dotRadius*u,t.u_gridSize=this.gridSize*u,this.effect==="halftone-cmyk"?(t.u_angleC=this.angleC,t.u_angleM=this.angleM,t.u_angleY=this.angleY,t.u_angleK=this.angleK,t.u_showC=this.showC,t.u_showM=this.showM,t.u_showY=this.showY,t.u_showK=this.showK,t.u_intensityK=this.intensityK):this.effect==="halftone-duotone"?(t.u_duotoneColor=this._parseHexColor(this.duotoneColor),t.u_angle=this.angle):this.effect==="dot-grid"?(t.u_dotOffset=[this.dotOffsetX,this.dotOffsetY],t.u_bgColor=this._parseHexColor(this.bgColor),t.u_angle=this.angle):this.effect==="technicolor-2strip"&&(t.u_angleWarm=this.angleWarm,t.u_angleCool=this.angleCool,t.u_angleK=this.angleK,t.u_showWarm=this.showWarm,t.u_showCool=this.showCool,t.u_showK=this.showK,t.u_warmColor=this._parseHexColor(this.warmColor),t.u_coolColor=this._parseHexColor(this.coolColor),t.u_blendMode=this.blendMode,t.u_intensityK=this.intensityK),t}_parseHexColor(o){const a=o.replace("#",""),t=parseInt(a.substring(0,2),16)/255,u=parseInt(a.substring(2,4),16)/255,r=parseInt(a.substring(4,6),16)/255;return[t,u,r]}};S.styles=m.css`
     :host {
       display: block;
       position: relative;
@@ -292,6 +292,9 @@ void main() {
       width: 100%;
       height: auto;
     }
+    img.base {
+      opacity: 0;
+    }
     img.snapshot {
       position: absolute;
       inset: 0;
@@ -303,4 +306,4 @@ void main() {
     img.snapshot.loaded {
       opacity: 1;
     }
-  `;let a=R;s([l.property()],a.prototype,"src"),s([l.property()],a.prototype,"effect"),s([l.property({type:Number,attribute:"dot-radius"})],a.prototype,"dotRadius"),s([l.property({type:Number,attribute:"grid-size"})],a.prototype,"gridSize"),s([l.property({type:Number,attribute:"angle-c"})],a.prototype,"angleC"),s([l.property({type:Number,attribute:"angle-m"})],a.prototype,"angleM"),s([l.property({type:Number,attribute:"angle-y"})],a.prototype,"angleY"),s([l.property({type:Number,attribute:"angle-k"})],a.prototype,"angleK"),s([l.property({type:Number,attribute:"show-c"})],a.prototype,"showC"),s([l.property({type:Number,attribute:"show-m"})],a.prototype,"showM"),s([l.property({type:Number,attribute:"show-y"})],a.prototype,"showY"),s([l.property({type:Number,attribute:"show-k"})],a.prototype,"showK"),s([l.property({type:Number,attribute:"intensity-k"})],a.prototype,"intensityK"),s([l.property({attribute:"duotone-color"})],a.prototype,"duotoneColor"),s([l.property({type:Number})],a.prototype,"angle"),s([l.property({type:Number,attribute:"dot-offset-x"})],a.prototype,"dotOffsetX"),s([l.property({type:Number,attribute:"dot-offset-y"})],a.prototype,"dotOffsetY"),s([l.property({attribute:"bg-color"})],a.prototype,"bgColor"),s([l.property({type:Number,attribute:"angle-warm"})],a.prototype,"angleWarm"),s([l.property({type:Number,attribute:"angle-cool"})],a.prototype,"angleCool"),s([l.property({type:Number,attribute:"show-warm"})],a.prototype,"showWarm"),s([l.property({type:Number,attribute:"show-cool"})],a.prototype,"showCool"),s([l.property({attribute:"warm-color"})],a.prototype,"warmColor"),s([l.property({attribute:"cool-color"})],a.prototype,"coolColor"),s([l.property({type:Number,attribute:"blend-mode"})],a.prototype,"blendMode"),s([l.property({type:Number,attribute:"reference-width"})],a.prototype,"referenceWidth"),s([l.property({type:Number,attribute:"loading-blur"})],a.prototype,"loadingBlur"),s([l.state()],a.prototype,"_webglAvailable"),s([l.state()],a.prototype,"_snapshotUrl"),s([l.state()],a.prototype,"_snapshotLoaded"),customElements.get("some-shade-image")||customElements.define("some-shade-image",a),f.SomeShadeImage=a,f.get=E,f.list=O,f.register=p,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));
+  `;let i=S;l([s.property()],i.prototype,"src"),l([s.property()],i.prototype,"effect"),l([s.property({type:Number,attribute:"dot-radius"})],i.prototype,"dotRadius"),l([s.property({type:Number,attribute:"grid-size"})],i.prototype,"gridSize"),l([s.property({type:Number,attribute:"angle-c"})],i.prototype,"angleC"),l([s.property({type:Number,attribute:"angle-m"})],i.prototype,"angleM"),l([s.property({type:Number,attribute:"angle-y"})],i.prototype,"angleY"),l([s.property({type:Number,attribute:"angle-k"})],i.prototype,"angleK"),l([s.property({type:Number,attribute:"show-c"})],i.prototype,"showC"),l([s.property({type:Number,attribute:"show-m"})],i.prototype,"showM"),l([s.property({type:Number,attribute:"show-y"})],i.prototype,"showY"),l([s.property({type:Number,attribute:"show-k"})],i.prototype,"showK"),l([s.property({type:Number,attribute:"intensity-k"})],i.prototype,"intensityK"),l([s.property({attribute:"duotone-color"})],i.prototype,"duotoneColor"),l([s.property({type:Number})],i.prototype,"angle"),l([s.property({type:Number,attribute:"dot-offset-x"})],i.prototype,"dotOffsetX"),l([s.property({type:Number,attribute:"dot-offset-y"})],i.prototype,"dotOffsetY"),l([s.property({attribute:"bg-color"})],i.prototype,"bgColor"),l([s.property({type:Number,attribute:"angle-warm"})],i.prototype,"angleWarm"),l([s.property({type:Number,attribute:"angle-cool"})],i.prototype,"angleCool"),l([s.property({type:Number,attribute:"show-warm"})],i.prototype,"showWarm"),l([s.property({type:Number,attribute:"show-cool"})],i.prototype,"showCool"),l([s.property({attribute:"warm-color"})],i.prototype,"warmColor"),l([s.property({attribute:"cool-color"})],i.prototype,"coolColor"),l([s.property({type:Number,attribute:"blend-mode"})],i.prototype,"blendMode"),l([s.property({type:Number,attribute:"reference-width"})],i.prototype,"referenceWidth"),l([s.state()],i.prototype,"_webglAvailable"),l([s.state()],i.prototype,"_snapshotUrl"),l([s.state()],i.prototype,"_snapshotLoaded"),customElements.get("some-shade-image")||customElements.define("some-shade-image",i),d.SomeShadeImage=i,d.get=x,d.list=N,d.register=p,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@johnfmorton/some-shade",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "license": "ISC",
   "homepage": "https://johnfmorton.github.io/some-shade-web-component/",
   "repository": {