@johnfmorton/some-shade 0.1.1-beta → 0.1.2-beta
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.
- package/dist/index.d.ts +1 -5
- package/dist/some-shade.cjs.js +10 -7
- package/dist/some-shade.es.js +122 -139
- package/dist/some-shade.umd.js +11 -8
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -30,6 +30,7 @@ export declare class SomeShadeImage extends LitElement {
|
|
|
30
30
|
showM: number;
|
|
31
31
|
showY: number;
|
|
32
32
|
showK: number;
|
|
33
|
+
intensityK: number;
|
|
33
34
|
duotoneColor: string;
|
|
34
35
|
angle: number;
|
|
35
36
|
dotOffsetX: number;
|
|
@@ -41,7 +42,6 @@ export declare class SomeShadeImage extends LitElement {
|
|
|
41
42
|
showCool: number;
|
|
42
43
|
warmColor: string;
|
|
43
44
|
coolColor: string;
|
|
44
|
-
gateWeave: number;
|
|
45
45
|
loadingBlur: number;
|
|
46
46
|
private _webglAvailable;
|
|
47
47
|
private _snapshotUrl;
|
|
@@ -52,8 +52,6 @@ export declare class SomeShadeImage extends LitElement {
|
|
|
52
52
|
private _lastClientWidth;
|
|
53
53
|
private _visible;
|
|
54
54
|
private _needsRender;
|
|
55
|
-
private _gateWeaveRaf;
|
|
56
|
-
private _gateWeaveTime;
|
|
57
55
|
render(): TemplateResult<1>;
|
|
58
56
|
connectedCallback(): void;
|
|
59
57
|
updated(changed: PropertyValues): void;
|
|
@@ -67,8 +65,6 @@ export declare class SomeShadeImage extends LitElement {
|
|
|
67
65
|
replayTransition(delay?: number): void;
|
|
68
66
|
private _revokeSnapshot;
|
|
69
67
|
private _getUniformValues;
|
|
70
|
-
private _updateGateWeave;
|
|
71
|
-
private _stopGateWeave;
|
|
72
68
|
private _parseHexColor;
|
|
73
69
|
}
|
|
74
70
|
|
package/dist/some-shade.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("lit"),l=require("lit/decorators.js");function
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("lit"),l=require("lit/decorators.js");function k(t){return t.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,preserveDrawingBuffer:!0})}function E(t,o,r){const i=t.createShader(o);if(!i)throw new Error("Failed to create shader");if(t.shaderSource(i,r),t.compileShader(i),!t.getShaderParameter(i,t.COMPILE_STATUS)){const e=t.getShaderInfoLog(i);throw t.deleteShader(i),new Error(`Shader compile error: ${e}`)}return i}function L(t,o,r){const i=E(t,t.VERTEX_SHADER,o),e=E(t,t.FRAGMENT_SHADER,r),n=t.createProgram();if(!n)throw new Error("Failed to create program");if(t.attachShader(n,i),t.attachShader(n,e),t.linkProgram(n),!t.getProgramParameter(n,t.LINK_STATUS)){const c=t.getProgramInfoLog(n);throw t.deleteProgram(n),new Error(`Program link error: ${c}`)}t.deleteShader(i),t.deleteShader(e);const d=new Map,h=t.getProgramParameter(n,t.ACTIVE_ATTRIBUTES);for(let c=0;c<h;c++){const f=t.getActiveAttrib(n,c);f&&d.set(f.name,t.getAttribLocation(n,f.name))}const s=new Map,g=t.getProgramParameter(n,t.ACTIVE_UNIFORMS);for(let c=0;c<g;c++){const f=t.getActiveUniform(n,c);if(f){const m=t.getUniformLocation(n,f.name);m&&s.set(f.name,m)}}return{program:n,attribLocations:d,uniformLocations:s}}function D(t,o,r){for(const[i,e]of Object.entries(r)){const n=o.uniformLocations.get(i);if(n){if(typeof e=="number")t.uniform1f(n,e);else if(Array.isArray(e))switch(e.length){case 2:t.uniform2fv(n,e);break;case 3:t.uniform3fv(n,e);break;case 4:t.uniform4fv(n,e);break}}}}function z(t,o){const r=t.createTexture();if(!r)throw new Error("Failed to create texture");return t.bindTexture(t.TEXTURE_2D,r),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,o),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),{texture:r,width:o.naturalWidth,height:o.naturalHeight}}function P(t,o){const r=new Float32Array([-1,-1,0,1,1,-1,1,1,-1,1,0,0,1,1,1,0]),i=t.createBuffer();if(!i)throw new Error("Failed to create buffer");t.bindBuffer(t.ARRAY_BUFFER,i),t.bufferData(t.ARRAY_BUFFER,r,t.STATIC_DRAW);const e=4*Float32Array.BYTES_PER_ELEMENT,n=o.attribLocations.get("a_position");n!==void 0&&n!==-1&&(t.enableVertexAttribArray(n),t.vertexAttribPointer(n,2,t.FLOAT,!1,e,0));const d=o.attribLocations.get("a_texCoord");return d!==void 0&&d!==-1&&(t.enableVertexAttribArray(d),t.vertexAttribPointer(d,2,t.FLOAT,!1,e,2*Float32Array.BYTES_PER_ELEMENT)),i}function O(t){t.drawArrays(t.TRIANGLE_STRIP,0,4)}const I=`precision mediump float;
|
|
2
2
|
|
|
3
3
|
varying vec2 v_texCoord;
|
|
4
4
|
|
|
@@ -14,6 +14,7 @@ uniform float u_showC;
|
|
|
14
14
|
uniform float u_showM;
|
|
15
15
|
uniform float u_showY;
|
|
16
16
|
uniform float u_showK;
|
|
17
|
+
uniform float u_intensityK;
|
|
17
18
|
|
|
18
19
|
// Returns the texture-space UV of the cell center for a given rotation angle
|
|
19
20
|
vec2 cellCenterUV(vec2 uv, float angle) {
|
|
@@ -68,6 +69,7 @@ void main() {
|
|
|
68
69
|
float ye = yInvK > 0.001 ? (yInvK - yRgb.b) / yInvK : 0.0;
|
|
69
70
|
|
|
70
71
|
float k = 1.0 - max(max(kRgb.r, kRgb.g), kRgb.b);
|
|
72
|
+
k = clamp(k * u_intensityK, 0.0, 1.0);
|
|
71
73
|
|
|
72
74
|
// Compute halftone dots for each channel
|
|
73
75
|
float cDot = halftone(uv, u_angleC, cy, u_gridSize, u_dotRadius) * u_showC;
|
|
@@ -90,7 +92,7 @@ void main() {
|
|
|
90
92
|
gl_Position = vec4(a_position, 0.0, 1.0);
|
|
91
93
|
v_texCoord = a_texCoord;
|
|
92
94
|
}
|
|
93
|
-
`,
|
|
95
|
+
`,M={name:"halftone-cmyk",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_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;
|
|
94
96
|
|
|
95
97
|
varying vec2 v_texCoord;
|
|
96
98
|
|
|
@@ -132,7 +134,7 @@ void main() {
|
|
|
132
134
|
|
|
133
135
|
gl_FragColor = vec4(result, color.a);
|
|
134
136
|
}
|
|
135
|
-
`,
|
|
137
|
+
`,N={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"}]},W=`precision mediump float;
|
|
136
138
|
|
|
137
139
|
varying vec2 v_texCoord;
|
|
138
140
|
|
|
@@ -188,7 +190,7 @@ void main() {
|
|
|
188
190
|
|
|
189
191
|
gl_FragColor = vec4(result, 1.0);
|
|
190
192
|
}
|
|
191
|
-
`,
|
|
193
|
+
`,F={name:"dot-grid",fragmentShader:W,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"}]},Y=`precision mediump float;
|
|
192
194
|
|
|
193
195
|
varying vec2 v_texCoord;
|
|
194
196
|
|
|
@@ -244,18 +246,19 @@ void main() {
|
|
|
244
246
|
|
|
245
247
|
gl_FragColor = vec4(clamp(paper, 0.0, 1.0), color.a);
|
|
246
248
|
}
|
|
247
|
-
`,B={name:"technicolor-2strip",fragmentShader:Y,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_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"}]},w=new Map;function p(
|
|
249
|
+
`,B={name:"technicolor-2strip",fragmentShader:Y,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_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"}]},w=new Map;function p(t){w.set(t.name,t)}function U(t){return w.get(t)}function X(){return Array.from(w.keys())}p(M);p(N);p(F);p(B);var $=Object.defineProperty,u=(t,o,r,i)=>{for(var e=void 0,n=t.length-1,d;n>=0;n--)(d=t[n])&&(e=d(o,r,e)||e);return e&&$(o,r,e),e};const G=2;let T=Promise.resolve();function A(t){const o=T.then(t,t);return T=o,o}const H=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"]),C=class C extends _.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.loadingBlur=0,this._webglAvailable=!0,this._snapshotUrl="",this._snapshotLoaded=!1,this._image=null,this._observer=null,this._resizeObserver=null,this._lastClientWidth=0,this._visible=!1,this._needsRender=!1}render(){if(!this._webglAvailable)return _.html`<img src=${this.src} alt="" />`;const o=this.loadingBlur>0?`filter: blur(${this.loadingBlur}px)`:"";return _.html`
|
|
248
250
|
<img src=${this.src} alt="" style=${o} />
|
|
249
251
|
${this._snapshotUrl?_.html`<img
|
|
250
252
|
class="snapshot${this._snapshotLoaded?" loaded":""}"
|
|
251
253
|
src=${this._snapshotUrl}
|
|
252
254
|
@load=${this._onSnapshotLoad}
|
|
253
255
|
alt="" />`:""}
|
|
254
|
-
`}connectedCallback(){super.connectedCallback(),this._observer=new IntersectionObserver(o=>{var
|
|
256
|
+
`}connectedCallback(){super.connectedCallback(),this._observer=new IntersectionObserver(o=>{var i;const r=this._visible;this._visible=((i=o[0])==null?void 0:i.isIntersecting)??!1,this._visible&&!r&&this._needsRender&&(this._needsRender=!1,A(()=>this._renderEffect()))},{rootMargin:"200px"}),this._observer.observe(this),this._resizeObserver=new ResizeObserver(()=>{if(!this._image)return;const o=this.clientWidth;o>0&&o!==this._lastClientWidth&&(this._lastClientWidth=o,this._scheduleRender())}),this._resizeObserver.observe(this)}updated(o){if(o.has("src")&&this.src){this._loadImage(this.src);return}if(!this._image)return;[...o.keys()].some(i=>H.has(i))&&this._scheduleRender()}disconnectedCallback(){var o,r;super.disconnectedCallback(),(o=this._observer)==null||o.disconnect(),(r=this._resizeObserver)==null||r.disconnect(),this._revokeSnapshot()}_loadImage(o){const r=new Image;r.crossOrigin="anonymous",r.onload=()=>{this._image=r,this._scheduleRender()},r.onerror=()=>{console.warn(`[some-shade] Failed to load image: ${o}`)},r.src=o}_scheduleRender(){this._visible?A(()=>this._renderEffect()):this._needsRender=!0}async _renderEffect(){var g;if(!this._image)return;const o=U(this.effect);if(!o){console.warn(`[some-shade] Unknown effect: ${this.effect}`);return}const r=Math.min(window.devicePixelRatio||1,G),i=this._image.naturalWidth,e=this._image.naturalHeight,n=this.clientWidth||i,d=Math.max(1,i/n);this._lastClientWidth=this.clientWidth;const h=document.createElement("canvas");h.width=i*r,h.height=e*r;const s=k(h);if(!s){this._webglAvailable=!1;return}try{const c=L(s,o.vertexShader,o.fragmentShader);s.useProgram(c.program);const f=z(s,this._image),m=P(s,c);s.viewport(0,0,h.width,h.height),s.clearColor(0,0,0,0),s.clear(s.COLOR_BUFFER_BIT),s.activeTexture(s.TEXTURE0),s.bindTexture(s.TEXTURE_2D,f.texture);const R=c.uniformLocations.get("u_image");R&&s.uniform1i(R,0),D(s,c,this._getUniformValues(f,r,d)),s.bindBuffer(s.ARRAY_BUFFER,m);const S=4*Float32Array.BYTES_PER_ELEMENT,b=c.attribLocations.get("a_position");b!==void 0&&b!==-1&&(s.enableVertexAttribArray(b),s.vertexAttribPointer(b,2,s.FLOAT,!1,S,0));const v=c.attribLocations.get("a_texCoord");v!==void 0&&v!==-1&&(s.enableVertexAttribArray(v),s.vertexAttribPointer(v,2,s.FLOAT,!1,S,2*Float32Array.BYTES_PER_ELEMENT)),O(s);const x=await new Promise(K=>h.toBlob(K));s.deleteTexture(f.texture),s.deleteProgram(c.program),s.deleteBuffer(m),x&&(this._snapshotLoaded=!1,this._revokeSnapshot(),this._snapshotUrl=URL.createObjectURL(x))}finally{(g=s.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,r,i){const e={};return e.u_resolution=[o.width*r,o.height*r],e.u_dotRadius=this.dotRadius*i,e.u_gridSize=this.gridSize*i,this.effect==="halftone-cmyk"?(e.u_angleC=this.angleC,e.u_angleM=this.angleM,e.u_angleY=this.angleY,e.u_angleK=this.angleK,e.u_showC=this.showC,e.u_showM=this.showM,e.u_showY=this.showY,e.u_showK=this.showK,e.u_intensityK=this.intensityK):this.effect==="halftone-duotone"?(e.u_duotoneColor=this._parseHexColor(this.duotoneColor),e.u_angle=this.angle):this.effect==="dot-grid"?(e.u_dotOffset=[this.dotOffsetX,this.dotOffsetY],e.u_bgColor=this._parseHexColor(this.bgColor),e.u_angle=this.angle):this.effect==="technicolor-2strip"&&(e.u_angleWarm=this.angleWarm,e.u_angleCool=this.angleCool,e.u_angleK=this.angleK,e.u_showWarm=this.showWarm,e.u_showCool=this.showCool,e.u_showK=this.showK,e.u_warmColor=this._parseHexColor(this.warmColor),e.u_coolColor=this._parseHexColor(this.coolColor)),e}_parseHexColor(o){const r=o.replace("#",""),i=parseInt(r.substring(0,2),16)/255,e=parseInt(r.substring(2,4),16)/255,n=parseInt(r.substring(4,6),16)/255;return[i,e,n]}};C.styles=_.css`
|
|
255
257
|
:host {
|
|
256
258
|
display: block;
|
|
257
259
|
position: relative;
|
|
258
260
|
overflow: hidden;
|
|
261
|
+
max-width: 100%;
|
|
259
262
|
}
|
|
260
263
|
img {
|
|
261
264
|
display: block;
|
|
@@ -273,4 +276,4 @@ void main() {
|
|
|
273
276
|
img.snapshot.loaded {
|
|
274
277
|
opacity: 1;
|
|
275
278
|
}
|
|
276
|
-
`;let
|
|
279
|
+
`;let a=C;u([l.property()],a.prototype,"src");u([l.property()],a.prototype,"effect");u([l.property({type:Number,attribute:"dot-radius"})],a.prototype,"dotRadius");u([l.property({type:Number,attribute:"grid-size"})],a.prototype,"gridSize");u([l.property({type:Number,attribute:"angle-c"})],a.prototype,"angleC");u([l.property({type:Number,attribute:"angle-m"})],a.prototype,"angleM");u([l.property({type:Number,attribute:"angle-y"})],a.prototype,"angleY");u([l.property({type:Number,attribute:"angle-k"})],a.prototype,"angleK");u([l.property({type:Number,attribute:"show-c"})],a.prototype,"showC");u([l.property({type:Number,attribute:"show-m"})],a.prototype,"showM");u([l.property({type:Number,attribute:"show-y"})],a.prototype,"showY");u([l.property({type:Number,attribute:"show-k"})],a.prototype,"showK");u([l.property({type:Number,attribute:"intensity-k"})],a.prototype,"intensityK");u([l.property({attribute:"duotone-color"})],a.prototype,"duotoneColor");u([l.property({type:Number})],a.prototype,"angle");u([l.property({type:Number,attribute:"dot-offset-x"})],a.prototype,"dotOffsetX");u([l.property({type:Number,attribute:"dot-offset-y"})],a.prototype,"dotOffsetY");u([l.property({attribute:"bg-color"})],a.prototype,"bgColor");u([l.property({type:Number,attribute:"angle-warm"})],a.prototype,"angleWarm");u([l.property({type:Number,attribute:"angle-cool"})],a.prototype,"angleCool");u([l.property({type:Number,attribute:"show-warm"})],a.prototype,"showWarm");u([l.property({type:Number,attribute:"show-cool"})],a.prototype,"showCool");u([l.property({attribute:"warm-color"})],a.prototype,"warmColor");u([l.property({attribute:"cool-color"})],a.prototype,"coolColor");u([l.property({type:Number,attribute:"loading-blur"})],a.prototype,"loadingBlur");u([l.state()],a.prototype,"_webglAvailable");u([l.state()],a.prototype,"_snapshotUrl");u([l.state()],a.prototype,"_snapshotLoaded");customElements.get("some-shade-image")||customElements.define("some-shade-image",a);exports.SomeShadeImage=a;exports.get=U;exports.list=X;exports.register=p;
|
package/dist/some-shade.es.js
CHANGED
|
@@ -1,72 +1,72 @@
|
|
|
1
|
-
import { LitElement as
|
|
1
|
+
import { LitElement as k, css as L, html as y } from "lit";
|
|
2
2
|
import { property as u, state as w } from "lit/decorators.js";
|
|
3
|
-
function D(
|
|
4
|
-
return
|
|
3
|
+
function D(t) {
|
|
4
|
+
return t.getContext("webgl", {
|
|
5
5
|
alpha: !0,
|
|
6
6
|
premultipliedAlpha: !1,
|
|
7
7
|
preserveDrawingBuffer: !0
|
|
8
8
|
});
|
|
9
9
|
}
|
|
10
|
-
function T(
|
|
11
|
-
const
|
|
12
|
-
if (!
|
|
13
|
-
if (
|
|
14
|
-
const
|
|
15
|
-
throw
|
|
10
|
+
function T(t, o, r) {
|
|
11
|
+
const a = t.createShader(o);
|
|
12
|
+
if (!a) throw new Error("Failed to create shader");
|
|
13
|
+
if (t.shaderSource(a, r), t.compileShader(a), !t.getShaderParameter(a, t.COMPILE_STATUS)) {
|
|
14
|
+
const e = t.getShaderInfoLog(a);
|
|
15
|
+
throw t.deleteShader(a), new Error(`Shader compile error: ${e}`);
|
|
16
16
|
}
|
|
17
|
-
return
|
|
17
|
+
return a;
|
|
18
18
|
}
|
|
19
|
-
function z(
|
|
20
|
-
const
|
|
19
|
+
function z(t, o, r) {
|
|
20
|
+
const a = T(t, t.VERTEX_SHADER, o), e = T(t, t.FRAGMENT_SHADER, r), n = t.createProgram();
|
|
21
21
|
if (!n) throw new Error("Failed to create program");
|
|
22
|
-
if (
|
|
23
|
-
const
|
|
24
|
-
throw
|
|
22
|
+
if (t.attachShader(n, a), t.attachShader(n, e), t.linkProgram(n), !t.getProgramParameter(n, t.LINK_STATUS)) {
|
|
23
|
+
const d = t.getProgramInfoLog(n);
|
|
24
|
+
throw t.deleteProgram(n), new Error(`Program link error: ${d}`);
|
|
25
25
|
}
|
|
26
|
-
|
|
27
|
-
const
|
|
28
|
-
for (let
|
|
29
|
-
const f =
|
|
30
|
-
f &&
|
|
26
|
+
t.deleteShader(a), t.deleteShader(e);
|
|
27
|
+
const c = /* @__PURE__ */ new Map(), h = t.getProgramParameter(n, t.ACTIVE_ATTRIBUTES);
|
|
28
|
+
for (let d = 0; d < h; d++) {
|
|
29
|
+
const f = t.getActiveAttrib(n, d);
|
|
30
|
+
f && c.set(f.name, t.getAttribLocation(n, f.name));
|
|
31
31
|
}
|
|
32
|
-
const i = /* @__PURE__ */ new Map(), _ =
|
|
33
|
-
for (let
|
|
34
|
-
const f =
|
|
32
|
+
const i = /* @__PURE__ */ new Map(), _ = t.getProgramParameter(n, t.ACTIVE_UNIFORMS);
|
|
33
|
+
for (let d = 0; d < _; d++) {
|
|
34
|
+
const f = t.getActiveUniform(n, d);
|
|
35
35
|
if (f) {
|
|
36
|
-
const m =
|
|
36
|
+
const m = t.getUniformLocation(n, f.name);
|
|
37
37
|
m && i.set(f.name, m);
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
|
-
return { program: n, attribLocations:
|
|
40
|
+
return { program: n, attribLocations: c, uniformLocations: i };
|
|
41
41
|
}
|
|
42
|
-
function
|
|
43
|
-
for (const [
|
|
44
|
-
const n = o.uniformLocations.get(
|
|
42
|
+
function P(t, o, r) {
|
|
43
|
+
for (const [a, e] of Object.entries(r)) {
|
|
44
|
+
const n = o.uniformLocations.get(a);
|
|
45
45
|
if (n) {
|
|
46
|
-
if (typeof
|
|
47
|
-
|
|
48
|
-
else if (Array.isArray(
|
|
49
|
-
switch (
|
|
46
|
+
if (typeof e == "number")
|
|
47
|
+
t.uniform1f(n, e);
|
|
48
|
+
else if (Array.isArray(e))
|
|
49
|
+
switch (e.length) {
|
|
50
50
|
case 2:
|
|
51
|
-
|
|
51
|
+
t.uniform2fv(n, e);
|
|
52
52
|
break;
|
|
53
53
|
case 3:
|
|
54
|
-
|
|
54
|
+
t.uniform3fv(n, e);
|
|
55
55
|
break;
|
|
56
56
|
case 4:
|
|
57
|
-
|
|
57
|
+
t.uniform4fv(n, e);
|
|
58
58
|
break;
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
|
-
function
|
|
64
|
-
const
|
|
65
|
-
if (!
|
|
66
|
-
return
|
|
63
|
+
function O(t, o) {
|
|
64
|
+
const r = t.createTexture();
|
|
65
|
+
if (!r) throw new Error("Failed to create texture");
|
|
66
|
+
return t.bindTexture(t.TEXTURE_2D, r), t.texImage2D(t.TEXTURE_2D, 0, t.RGBA, t.RGBA, t.UNSIGNED_BYTE, o), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_WRAP_S, t.CLAMP_TO_EDGE), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_WRAP_T, t.CLAMP_TO_EDGE), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MIN_FILTER, t.LINEAR), t.texParameteri(t.TEXTURE_2D, t.TEXTURE_MAG_FILTER, t.LINEAR), { texture: r, width: o.naturalWidth, height: o.naturalHeight };
|
|
67
67
|
}
|
|
68
|
-
function
|
|
69
|
-
const
|
|
68
|
+
function I(t, o) {
|
|
69
|
+
const r = new Float32Array([
|
|
70
70
|
// pos.x pos.y tex.s tex.t
|
|
71
71
|
-1,
|
|
72
72
|
-1,
|
|
@@ -84,18 +84,18 @@ function M(e, o) {
|
|
|
84
84
|
1,
|
|
85
85
|
1,
|
|
86
86
|
0
|
|
87
|
-
]),
|
|
88
|
-
if (!
|
|
89
|
-
|
|
90
|
-
const
|
|
91
|
-
n !== void 0 && n !== -1 && (
|
|
92
|
-
const
|
|
93
|
-
return
|
|
87
|
+
]), a = t.createBuffer();
|
|
88
|
+
if (!a) throw new Error("Failed to create buffer");
|
|
89
|
+
t.bindBuffer(t.ARRAY_BUFFER, a), t.bufferData(t.ARRAY_BUFFER, r, t.STATIC_DRAW);
|
|
90
|
+
const e = 4 * Float32Array.BYTES_PER_ELEMENT, n = o.attribLocations.get("a_position");
|
|
91
|
+
n !== void 0 && n !== -1 && (t.enableVertexAttribArray(n), t.vertexAttribPointer(n, 2, t.FLOAT, !1, e, 0));
|
|
92
|
+
const c = o.attribLocations.get("a_texCoord");
|
|
93
|
+
return c !== void 0 && c !== -1 && (t.enableVertexAttribArray(c), t.vertexAttribPointer(c, 2, t.FLOAT, !1, e, 2 * Float32Array.BYTES_PER_ELEMENT)), a;
|
|
94
94
|
}
|
|
95
|
-
function
|
|
96
|
-
|
|
95
|
+
function M(t) {
|
|
96
|
+
t.drawArrays(t.TRIANGLE_STRIP, 0, 4);
|
|
97
97
|
}
|
|
98
|
-
const
|
|
98
|
+
const V = `precision mediump float;
|
|
99
99
|
|
|
100
100
|
varying vec2 v_texCoord;
|
|
101
101
|
|
|
@@ -111,6 +111,7 @@ uniform float u_showC;
|
|
|
111
111
|
uniform float u_showM;
|
|
112
112
|
uniform float u_showY;
|
|
113
113
|
uniform float u_showK;
|
|
114
|
+
uniform float u_intensityK;
|
|
114
115
|
|
|
115
116
|
// Returns the texture-space UV of the cell center for a given rotation angle
|
|
116
117
|
vec2 cellCenterUV(vec2 uv, float angle) {
|
|
@@ -165,6 +166,7 @@ void main() {
|
|
|
165
166
|
float ye = yInvK > 0.001 ? (yInvK - yRgb.b) / yInvK : 0.0;
|
|
166
167
|
|
|
167
168
|
float k = 1.0 - max(max(kRgb.r, kRgb.g), kRgb.b);
|
|
169
|
+
k = clamp(k * u_intensityK, 0.0, 1.0);
|
|
168
170
|
|
|
169
171
|
// Compute halftone dots for each channel
|
|
170
172
|
float cDot = halftone(uv, u_angleC, cy, u_gridSize, u_dotRadius) * u_showC;
|
|
@@ -187,9 +189,9 @@ void main() {
|
|
|
187
189
|
gl_Position = vec4(a_position, 0.0, 1.0);
|
|
188
190
|
v_texCoord = a_texCoord;
|
|
189
191
|
}
|
|
190
|
-
`,
|
|
192
|
+
`, N = {
|
|
191
193
|
name: "halftone-cmyk",
|
|
192
|
-
fragmentShader:
|
|
194
|
+
fragmentShader: V,
|
|
193
195
|
vertexShader: v,
|
|
194
196
|
uniforms: [
|
|
195
197
|
{ name: "u_dotRadius", type: "float", default: 4, attribute: "dot-radius" },
|
|
@@ -201,9 +203,10 @@ void main() {
|
|
|
201
203
|
{ name: "u_showC", type: "float", default: 1, attribute: "show-c" },
|
|
202
204
|
{ name: "u_showM", type: "float", default: 1, attribute: "show-m" },
|
|
203
205
|
{ name: "u_showY", type: "float", default: 1, attribute: "show-y" },
|
|
204
|
-
{ name: "u_showK", type: "float", default: 1, attribute: "show-k" }
|
|
206
|
+
{ name: "u_showK", type: "float", default: 1, attribute: "show-k" },
|
|
207
|
+
{ name: "u_intensityK", type: "float", default: 1, attribute: "intensity-k" }
|
|
205
208
|
]
|
|
206
|
-
},
|
|
209
|
+
}, W = `precision mediump float;
|
|
207
210
|
|
|
208
211
|
varying vec2 v_texCoord;
|
|
209
212
|
|
|
@@ -245,9 +248,9 @@ void main() {
|
|
|
245
248
|
|
|
246
249
|
gl_FragColor = vec4(result, color.a);
|
|
247
250
|
}
|
|
248
|
-
`,
|
|
251
|
+
`, F = {
|
|
249
252
|
name: "halftone-duotone",
|
|
250
|
-
fragmentShader:
|
|
253
|
+
fragmentShader: W,
|
|
251
254
|
vertexShader: v,
|
|
252
255
|
uniforms: [
|
|
253
256
|
{ name: "u_dotRadius", type: "float", default: 4, attribute: "dot-radius" },
|
|
@@ -322,7 +325,7 @@ void main() {
|
|
|
322
325
|
{ name: "u_bgColor", type: "vec3", default: [1, 1, 1], attribute: "bg-color" },
|
|
323
326
|
{ name: "u_angle", type: "float", default: 0, attribute: "angle" }
|
|
324
327
|
]
|
|
325
|
-
},
|
|
328
|
+
}, X = `precision mediump float;
|
|
326
329
|
|
|
327
330
|
varying vec2 v_texCoord;
|
|
328
331
|
|
|
@@ -378,9 +381,9 @@ void main() {
|
|
|
378
381
|
|
|
379
382
|
gl_FragColor = vec4(clamp(paper, 0.0, 1.0), color.a);
|
|
380
383
|
}
|
|
381
|
-
`,
|
|
384
|
+
`, $ = {
|
|
382
385
|
name: "technicolor-2strip",
|
|
383
|
-
fragmentShader:
|
|
386
|
+
fragmentShader: X,
|
|
384
387
|
vertexShader: v,
|
|
385
388
|
uniforms: [
|
|
386
389
|
{ name: "u_dotRadius", type: "float", default: 4, attribute: "dot-radius" },
|
|
@@ -394,29 +397,29 @@ void main() {
|
|
|
394
397
|
{ name: "u_warmColor", type: "vec3", default: [0.85, 0.25, 0.06], attribute: "warm-color" },
|
|
395
398
|
{ name: "u_coolColor", type: "vec3", default: [0.05, 0.65, 0.6], attribute: "cool-color" }
|
|
396
399
|
]
|
|
397
|
-
},
|
|
398
|
-
function b(
|
|
399
|
-
|
|
400
|
+
}, C = /* @__PURE__ */ new Map();
|
|
401
|
+
function b(t) {
|
|
402
|
+
C.set(t.name, t);
|
|
400
403
|
}
|
|
401
|
-
function
|
|
402
|
-
return
|
|
404
|
+
function G(t) {
|
|
405
|
+
return C.get(t);
|
|
403
406
|
}
|
|
404
407
|
function Z() {
|
|
405
|
-
return Array.from(
|
|
408
|
+
return Array.from(C.keys());
|
|
406
409
|
}
|
|
407
|
-
b(V);
|
|
408
410
|
b(N);
|
|
411
|
+
b(F);
|
|
409
412
|
b(B);
|
|
410
|
-
b(
|
|
411
|
-
var H = Object.defineProperty, l = (
|
|
412
|
-
for (var
|
|
413
|
-
(
|
|
414
|
-
return
|
|
413
|
+
b($);
|
|
414
|
+
var H = Object.defineProperty, l = (t, o, r, a) => {
|
|
415
|
+
for (var e = void 0, n = t.length - 1, c; n >= 0; n--)
|
|
416
|
+
(c = t[n]) && (e = c(o, r, e) || e);
|
|
417
|
+
return e && H(o, r, e), e;
|
|
415
418
|
};
|
|
416
419
|
const q = 2;
|
|
417
420
|
let A = Promise.resolve();
|
|
418
|
-
function U(
|
|
419
|
-
const o = A.then(
|
|
421
|
+
function U(t) {
|
|
422
|
+
const o = A.then(t, t);
|
|
420
423
|
return A = o, o;
|
|
421
424
|
}
|
|
422
425
|
const j = /* @__PURE__ */ new Set([
|
|
@@ -431,6 +434,7 @@ const j = /* @__PURE__ */ new Set([
|
|
|
431
434
|
"showM",
|
|
432
435
|
"showY",
|
|
433
436
|
"showK",
|
|
437
|
+
"intensityK",
|
|
434
438
|
"duotoneColor",
|
|
435
439
|
"angle",
|
|
436
440
|
"dotOffsetX",
|
|
@@ -442,9 +446,9 @@ const j = /* @__PURE__ */ new Set([
|
|
|
442
446
|
"showCool",
|
|
443
447
|
"warmColor",
|
|
444
448
|
"coolColor"
|
|
445
|
-
]),
|
|
449
|
+
]), R = class R extends k {
|
|
446
450
|
constructor() {
|
|
447
|
-
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.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.
|
|
451
|
+
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.loadingBlur = 0, this._webglAvailable = !0, this._snapshotUrl = "", this._snapshotLoaded = !1, this._image = null, this._observer = null, this._resizeObserver = null, this._lastClientWidth = 0, this._visible = !1, this._needsRender = !1;
|
|
448
452
|
}
|
|
449
453
|
render() {
|
|
450
454
|
if (!this._webglAvailable)
|
|
@@ -462,9 +466,9 @@ const j = /* @__PURE__ */ new Set([
|
|
|
462
466
|
connectedCallback() {
|
|
463
467
|
super.connectedCallback(), this._observer = new IntersectionObserver(
|
|
464
468
|
(o) => {
|
|
465
|
-
var
|
|
466
|
-
const
|
|
467
|
-
this._visible = ((
|
|
469
|
+
var a;
|
|
470
|
+
const r = this._visible;
|
|
471
|
+
this._visible = ((a = o[0]) == null ? void 0 : a.isIntersecting) ?? !1, this._visible && !r && this._needsRender && (this._needsRender = !1, U(() => this._renderEffect()));
|
|
468
472
|
},
|
|
469
473
|
// Start rendering slightly before the element scrolls into view.
|
|
470
474
|
{ rootMargin: "200px" }
|
|
@@ -481,23 +485,23 @@ const j = /* @__PURE__ */ new Set([
|
|
|
481
485
|
}
|
|
482
486
|
if (!this._image) return;
|
|
483
487
|
[...o.keys()].some(
|
|
484
|
-
(
|
|
485
|
-
) && this._scheduleRender()
|
|
488
|
+
(a) => j.has(a)
|
|
489
|
+
) && this._scheduleRender();
|
|
486
490
|
}
|
|
487
491
|
disconnectedCallback() {
|
|
488
|
-
var o,
|
|
489
|
-
super.disconnectedCallback(), (o = this._observer) == null || o.disconnect(), (
|
|
492
|
+
var o, r;
|
|
493
|
+
super.disconnectedCallback(), (o = this._observer) == null || o.disconnect(), (r = this._resizeObserver) == null || r.disconnect(), this._revokeSnapshot();
|
|
490
494
|
}
|
|
491
495
|
// ---------------------------------------------------------------------------
|
|
492
496
|
// Image loading
|
|
493
497
|
// ---------------------------------------------------------------------------
|
|
494
498
|
_loadImage(o) {
|
|
495
|
-
const
|
|
496
|
-
|
|
497
|
-
this._image =
|
|
498
|
-
},
|
|
499
|
+
const r = new Image();
|
|
500
|
+
r.crossOrigin = "anonymous", r.onload = () => {
|
|
501
|
+
this._image = r, this._scheduleRender();
|
|
502
|
+
}, r.onerror = () => {
|
|
499
503
|
console.warn(`[some-shade] Failed to load image: ${o}`);
|
|
500
|
-
},
|
|
504
|
+
}, r.src = o;
|
|
501
505
|
}
|
|
502
506
|
// ---------------------------------------------------------------------------
|
|
503
507
|
// Render scheduling
|
|
@@ -511,38 +515,38 @@ const j = /* @__PURE__ */ new Set([
|
|
|
511
515
|
async _renderEffect() {
|
|
512
516
|
var _;
|
|
513
517
|
if (!this._image) return;
|
|
514
|
-
const o =
|
|
518
|
+
const o = G(this.effect);
|
|
515
519
|
if (!o) {
|
|
516
520
|
console.warn(`[some-shade] Unknown effect: ${this.effect}`);
|
|
517
521
|
return;
|
|
518
522
|
}
|
|
519
|
-
const
|
|
523
|
+
const r = Math.min(window.devicePixelRatio || 1, q), a = this._image.naturalWidth, e = this._image.naturalHeight, n = this.clientWidth || a, c = Math.max(1, a / n);
|
|
520
524
|
this._lastClientWidth = this.clientWidth;
|
|
521
525
|
const h = document.createElement("canvas");
|
|
522
|
-
h.width =
|
|
526
|
+
h.width = a * r, h.height = e * r;
|
|
523
527
|
const i = D(h);
|
|
524
528
|
if (!i) {
|
|
525
529
|
this._webglAvailable = !1;
|
|
526
530
|
return;
|
|
527
531
|
}
|
|
528
532
|
try {
|
|
529
|
-
const
|
|
533
|
+
const d = z(
|
|
530
534
|
i,
|
|
531
535
|
o.vertexShader,
|
|
532
536
|
o.fragmentShader
|
|
533
537
|
);
|
|
534
|
-
i.useProgram(
|
|
535
|
-
const f =
|
|
538
|
+
i.useProgram(d.program);
|
|
539
|
+
const f = O(i, this._image), m = I(i, d);
|
|
536
540
|
i.viewport(0, 0, h.width, h.height), i.clearColor(0, 0, 0, 0), i.clear(i.COLOR_BUFFER_BIT), i.activeTexture(i.TEXTURE0), i.bindTexture(i.TEXTURE_2D, f.texture);
|
|
537
|
-
const S =
|
|
538
|
-
S && i.uniform1i(S, 0),
|
|
541
|
+
const S = d.uniformLocations.get("u_image");
|
|
542
|
+
S && i.uniform1i(S, 0), P(
|
|
539
543
|
i,
|
|
540
|
-
|
|
541
|
-
this._getUniformValues(f,
|
|
544
|
+
d,
|
|
545
|
+
this._getUniformValues(f, r, c)
|
|
542
546
|
), i.bindBuffer(i.ARRAY_BUFFER, m);
|
|
543
|
-
const x = 4 * Float32Array.BYTES_PER_ELEMENT, g =
|
|
547
|
+
const x = 4 * Float32Array.BYTES_PER_ELEMENT, g = d.attribLocations.get("a_position");
|
|
544
548
|
g !== void 0 && g !== -1 && (i.enableVertexAttribArray(g), i.vertexAttribPointer(g, 2, i.FLOAT, !1, x, 0));
|
|
545
|
-
const p =
|
|
549
|
+
const p = d.attribLocations.get("a_texCoord");
|
|
546
550
|
p !== void 0 && p !== -1 && (i.enableVertexAttribArray(p), i.vertexAttribPointer(
|
|
547
551
|
p,
|
|
548
552
|
2,
|
|
@@ -550,11 +554,11 @@ const j = /* @__PURE__ */ new Set([
|
|
|
550
554
|
!1,
|
|
551
555
|
x,
|
|
552
556
|
2 * Float32Array.BYTES_PER_ELEMENT
|
|
553
|
-
)),
|
|
557
|
+
)), M(i);
|
|
554
558
|
const E = await new Promise(
|
|
555
|
-
(
|
|
559
|
+
(K) => h.toBlob(K)
|
|
556
560
|
);
|
|
557
|
-
i.deleteTexture(f.texture), i.deleteProgram(
|
|
561
|
+
i.deleteTexture(f.texture), i.deleteProgram(d.program), i.deleteBuffer(m), E && (this._snapshotLoaded = !1, this._revokeSnapshot(), this._snapshotUrl = URL.createObjectURL(E));
|
|
558
562
|
} finally {
|
|
559
563
|
(_ = i.getExtension("WEBGL_lose_context")) == null || _.loseContext();
|
|
560
564
|
}
|
|
@@ -577,45 +581,24 @@ const j = /* @__PURE__ */ new Set([
|
|
|
577
581
|
_revokeSnapshot() {
|
|
578
582
|
this._snapshotUrl && (URL.revokeObjectURL(this._snapshotUrl), this._snapshotUrl = "");
|
|
579
583
|
}
|
|
580
|
-
_getUniformValues(o,
|
|
581
|
-
const
|
|
582
|
-
return
|
|
583
|
-
o.width *
|
|
584
|
-
o.height *
|
|
585
|
-
],
|
|
586
|
-
}
|
|
587
|
-
_updateGateWeave() {
|
|
588
|
-
if (this._stopGateWeave(), this.gateWeave <= 0) {
|
|
589
|
-
const r = this.renderRoot.querySelector("img.snapshot");
|
|
590
|
-
r && (r.style.transform = "");
|
|
591
|
-
return;
|
|
592
|
-
}
|
|
593
|
-
const o = 1e3 / 12, a = (r) => {
|
|
594
|
-
if (r - this._gateWeaveTime >= o) {
|
|
595
|
-
this._gateWeaveTime = r;
|
|
596
|
-
const t = this.renderRoot.querySelector("img.snapshot");
|
|
597
|
-
if (t) {
|
|
598
|
-
const n = (Math.random() - 0.5) * 2 * this.gateWeave, d = (Math.random() - 0.5) * 2 * this.gateWeave, h = 1 + this.gateWeave * 3e-3;
|
|
599
|
-
t.style.transform = `translate(${n}px, ${d}px) scale(${h})`;
|
|
600
|
-
}
|
|
601
|
-
}
|
|
602
|
-
this._gateWeaveRaf = requestAnimationFrame(a);
|
|
603
|
-
};
|
|
604
|
-
this._gateWeaveRaf = requestAnimationFrame(a);
|
|
605
|
-
}
|
|
606
|
-
_stopGateWeave() {
|
|
607
|
-
this._gateWeaveRaf && (cancelAnimationFrame(this._gateWeaveRaf), this._gateWeaveRaf = 0);
|
|
584
|
+
_getUniformValues(o, r, a) {
|
|
585
|
+
const e = {};
|
|
586
|
+
return e.u_resolution = [
|
|
587
|
+
o.width * r,
|
|
588
|
+
o.height * r
|
|
589
|
+
], e.u_dotRadius = this.dotRadius * a, e.u_gridSize = this.gridSize * a, this.effect === "halftone-cmyk" ? (e.u_angleC = this.angleC, e.u_angleM = this.angleM, e.u_angleY = this.angleY, e.u_angleK = this.angleK, e.u_showC = this.showC, e.u_showM = this.showM, e.u_showY = this.showY, e.u_showK = this.showK, e.u_intensityK = this.intensityK) : this.effect === "halftone-duotone" ? (e.u_duotoneColor = this._parseHexColor(this.duotoneColor), e.u_angle = this.angle) : this.effect === "dot-grid" ? (e.u_dotOffset = [this.dotOffsetX, this.dotOffsetY], e.u_bgColor = this._parseHexColor(this.bgColor), e.u_angle = this.angle) : this.effect === "technicolor-2strip" && (e.u_angleWarm = this.angleWarm, e.u_angleCool = this.angleCool, e.u_angleK = this.angleK, e.u_showWarm = this.showWarm, e.u_showCool = this.showCool, e.u_showK = this.showK, e.u_warmColor = this._parseHexColor(this.warmColor), e.u_coolColor = this._parseHexColor(this.coolColor)), e;
|
|
608
590
|
}
|
|
609
591
|
_parseHexColor(o) {
|
|
610
|
-
const
|
|
611
|
-
return [
|
|
592
|
+
const r = o.replace("#", ""), a = parseInt(r.substring(0, 2), 16) / 255, e = parseInt(r.substring(2, 4), 16) / 255, n = parseInt(r.substring(4, 6), 16) / 255;
|
|
593
|
+
return [a, e, n];
|
|
612
594
|
}
|
|
613
595
|
};
|
|
614
|
-
|
|
596
|
+
R.styles = L`
|
|
615
597
|
:host {
|
|
616
598
|
display: block;
|
|
617
599
|
position: relative;
|
|
618
600
|
overflow: hidden;
|
|
601
|
+
max-width: 100%;
|
|
619
602
|
}
|
|
620
603
|
img {
|
|
621
604
|
display: block;
|
|
@@ -634,7 +617,7 @@ C.styles = k`
|
|
|
634
617
|
opacity: 1;
|
|
635
618
|
}
|
|
636
619
|
`;
|
|
637
|
-
let s =
|
|
620
|
+
let s = R;
|
|
638
621
|
l([
|
|
639
622
|
u()
|
|
640
623
|
], s.prototype, "src");
|
|
@@ -671,6 +654,9 @@ l([
|
|
|
671
654
|
l([
|
|
672
655
|
u({ type: Number, attribute: "show-k" })
|
|
673
656
|
], s.prototype, "showK");
|
|
657
|
+
l([
|
|
658
|
+
u({ type: Number, attribute: "intensity-k" })
|
|
659
|
+
], s.prototype, "intensityK");
|
|
674
660
|
l([
|
|
675
661
|
u({ attribute: "duotone-color" })
|
|
676
662
|
], s.prototype, "duotoneColor");
|
|
@@ -704,9 +690,6 @@ l([
|
|
|
704
690
|
l([
|
|
705
691
|
u({ attribute: "cool-color" })
|
|
706
692
|
], s.prototype, "coolColor");
|
|
707
|
-
l([
|
|
708
|
-
u({ type: Number, attribute: "gate-weave" })
|
|
709
|
-
], s.prototype, "gateWeave");
|
|
710
693
|
l([
|
|
711
694
|
u({ type: Number, attribute: "loading-blur" })
|
|
712
695
|
], s.prototype, "loadingBlur");
|
|
@@ -722,7 +705,7 @@ l([
|
|
|
722
705
|
customElements.get("some-shade-image") || customElements.define("some-shade-image", s);
|
|
723
706
|
export {
|
|
724
707
|
s as SomeShadeImage,
|
|
725
|
-
|
|
708
|
+
G as get,
|
|
726
709
|
Z as list,
|
|
727
710
|
b as register
|
|
728
711
|
};
|
package/dist/some-shade.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(c,
|
|
1
|
+
(function(c,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):(c=typeof globalThis<"u"?globalThis:c||self,m(c.SomeShade={},c.Lit,c.LitDecorators))})(this,(function(c,m,l){"use strict";function k(t){return t.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,preserveDrawingBuffer:!0})}function S(t,o,n){const i=t.createShader(o);if(!i)throw new Error("Failed to create shader");if(t.shaderSource(i,n),t.compileShader(i),!t.getShaderParameter(i,t.COMPILE_STATUS)){const e=t.getShaderInfoLog(i);throw t.deleteShader(i),new Error(`Shader compile error: ${e}`)}return i}function L(t,o,n){const i=S(t,t.VERTEX_SHADER,o),e=S(t,t.FRAGMENT_SHADER,n),r=t.createProgram();if(!r)throw new Error("Failed to create program");if(t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),!t.getProgramParameter(r,t.LINK_STATUS)){const f=t.getProgramInfoLog(r);throw t.deleteProgram(r),new Error(`Program link error: ${f}`)}t.deleteShader(i),t.deleteShader(e);const d=new Map,p=t.getProgramParameter(r,t.ACTIVE_ATTRIBUTES);for(let f=0;f<p;f++){const h=t.getActiveAttrib(r,f);h&&d.set(h.name,t.getAttribLocation(r,h.name))}const s=new Map,b=t.getProgramParameter(r,t.ACTIVE_UNIFORMS);for(let f=0;f<b;f++){const h=t.getActiveUniform(r,f);if(h){const _=t.getUniformLocation(r,h.name);_&&s.set(h.name,_)}}return{program:r,attribLocations:d,uniformLocations:s}}function D(t,o,n){for(const[i,e]of Object.entries(n)){const r=o.uniformLocations.get(i);if(r){if(typeof e=="number")t.uniform1f(r,e);else if(Array.isArray(e))switch(e.length){case 2:t.uniform2fv(r,e);break;case 3:t.uniform3fv(r,e);break;case 4:t.uniform4fv(r,e);break}}}}function z(t,o){const n=t.createTexture();if(!n)throw new Error("Failed to create texture");return t.bindTexture(t.TEXTURE_2D,n),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,o),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),{texture:n,width:o.naturalWidth,height:o.naturalHeight}}function P(t,o){const n=new Float32Array([-1,-1,0,1,1,-1,1,1,-1,1,0,0,1,1,1,0]),i=t.createBuffer();if(!i)throw new Error("Failed to create buffer");t.bindBuffer(t.ARRAY_BUFFER,i),t.bufferData(t.ARRAY_BUFFER,n,t.STATIC_DRAW);const e=4*Float32Array.BYTES_PER_ELEMENT,r=o.attribLocations.get("a_position");r!==void 0&&r!==-1&&(t.enableVertexAttribArray(r),t.vertexAttribPointer(r,2,t.FLOAT,!1,e,0));const d=o.attribLocations.get("a_texCoord");return d!==void 0&&d!==-1&&(t.enableVertexAttribArray(d),t.vertexAttribPointer(d,2,t.FLOAT,!1,e,2*Float32Array.BYTES_PER_ELEMENT)),i}function O(t){t.drawArrays(t.TRIANGLE_STRIP,0,4)}const I=`precision mediump float;
|
|
2
2
|
|
|
3
3
|
varying vec2 v_texCoord;
|
|
4
4
|
|
|
@@ -14,6 +14,7 @@ uniform float u_showC;
|
|
|
14
14
|
uniform float u_showM;
|
|
15
15
|
uniform float u_showY;
|
|
16
16
|
uniform float u_showK;
|
|
17
|
+
uniform float u_intensityK;
|
|
17
18
|
|
|
18
19
|
// Returns the texture-space UV of the cell center for a given rotation angle
|
|
19
20
|
vec2 cellCenterUV(vec2 uv, float angle) {
|
|
@@ -68,6 +69,7 @@ void main() {
|
|
|
68
69
|
float ye = yInvK > 0.001 ? (yInvK - yRgb.b) / yInvK : 0.0;
|
|
69
70
|
|
|
70
71
|
float k = 1.0 - max(max(kRgb.r, kRgb.g), kRgb.b);
|
|
72
|
+
k = clamp(k * u_intensityK, 0.0, 1.0);
|
|
71
73
|
|
|
72
74
|
// Compute halftone dots for each channel
|
|
73
75
|
float cDot = halftone(uv, u_angleC, cy, u_gridSize, u_dotRadius) * u_showC;
|
|
@@ -90,7 +92,7 @@ void main() {
|
|
|
90
92
|
gl_Position = vec4(a_position, 0.0, 1.0);
|
|
91
93
|
v_texCoord = a_texCoord;
|
|
92
94
|
}
|
|
93
|
-
`,
|
|
95
|
+
`,M={name:"halftone-cmyk",fragmentShader:I,vertexShader:v,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;
|
|
94
96
|
|
|
95
97
|
varying vec2 v_texCoord;
|
|
96
98
|
|
|
@@ -132,7 +134,7 @@ void main() {
|
|
|
132
134
|
|
|
133
135
|
gl_FragColor = vec4(result, color.a);
|
|
134
136
|
}
|
|
135
|
-
`,vertexShader:v,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"}]},
|
|
137
|
+
`,vertexShader:v,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={name:"dot-grid",fragmentShader:`precision mediump float;
|
|
136
138
|
|
|
137
139
|
varying vec2 v_texCoord;
|
|
138
140
|
|
|
@@ -188,7 +190,7 @@ void main() {
|
|
|
188
190
|
|
|
189
191
|
gl_FragColor = vec4(result, 1.0);
|
|
190
192
|
}
|
|
191
|
-
`,vertexShader:v,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"}]},
|
|
193
|
+
`,vertexShader:v,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"}]},W={name:"technicolor-2strip",fragmentShader:`precision mediump float;
|
|
192
194
|
|
|
193
195
|
varying vec2 v_texCoord;
|
|
194
196
|
|
|
@@ -244,18 +246,19 @@ void main() {
|
|
|
244
246
|
|
|
245
247
|
gl_FragColor = vec4(clamp(paper, 0.0, 1.0), color.a);
|
|
246
248
|
}
|
|
247
|
-
`,vertexShader:v,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,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"}]},
|
|
249
|
+
`,vertexShader:v,uniforms:[{name:"u_dotRadius",type:"float",default:4,attribute:"dot-radius"},{name:"u_gridSize",type:"float",default:8,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"}]},C=new Map;function g(t){C.set(t.name,t)}function x(t){return C.get(t)}function F(){return Array.from(C.keys())}g(M),g(V),g(N),g(W);var Y=Object.defineProperty,u=(t,o,n,i)=>{for(var e=void 0,r=t.length-1,d;r>=0;r--)(d=t[r])&&(e=d(o,n,e)||e);return e&&Y(o,n,e),e};const B=2;let E=Promise.resolve();function T(t){const o=E.then(t,t);return E=o,o}const X=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"]),R=class R 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.loadingBlur=0,this._webglAvailable=!0,this._snapshotUrl="",this._snapshotLoaded=!1,this._image=null,this._observer=null,this._resizeObserver=null,this._lastClientWidth=0,this._visible=!1,this._needsRender=!1}render(){if(!this._webglAvailable)return m.html`<img src=${this.src} alt="" />`;const o=this.loadingBlur>0?`filter: blur(${this.loadingBlur}px)`:"";return m.html`
|
|
248
250
|
<img src=${this.src} alt="" style=${o} />
|
|
249
|
-
${this._snapshotUrl?
|
|
251
|
+
${this._snapshotUrl?m.html`<img
|
|
250
252
|
class="snapshot${this._snapshotLoaded?" loaded":""}"
|
|
251
253
|
src=${this._snapshotUrl}
|
|
252
254
|
@load=${this._onSnapshotLoad}
|
|
253
255
|
alt="" />`:""}
|
|
254
|
-
`}connectedCallback(){super.connectedCallback(),this._observer=new IntersectionObserver(o=>{var
|
|
256
|
+
`}connectedCallback(){super.connectedCallback(),this._observer=new IntersectionObserver(o=>{var i;const n=this._visible;this._visible=((i=o[0])==null?void 0:i.isIntersecting)??!1,this._visible&&!n&&this._needsRender&&(this._needsRender=!1,T(()=>this._renderEffect()))},{rootMargin:"200px"}),this._observer.observe(this),this._resizeObserver=new ResizeObserver(()=>{if(!this._image)return;const o=this.clientWidth;o>0&&o!==this._lastClientWidth&&(this._lastClientWidth=o,this._scheduleRender())}),this._resizeObserver.observe(this)}updated(o){if(o.has("src")&&this.src){this._loadImage(this.src);return}if(!this._image)return;[...o.keys()].some(i=>X.has(i))&&this._scheduleRender()}disconnectedCallback(){var o,n;super.disconnectedCallback(),(o=this._observer)==null||o.disconnect(),(n=this._resizeObserver)==null||n.disconnect(),this._revokeSnapshot()}_loadImage(o){const n=new Image;n.crossOrigin="anonymous",n.onload=()=>{this._image=n,this._scheduleRender()},n.onerror=()=>{console.warn(`[some-shade] Failed to load image: ${o}`)},n.src=o}_scheduleRender(){this._visible?T(()=>this._renderEffect()):this._needsRender=!0}async _renderEffect(){var b;if(!this._image)return;const o=x(this.effect);if(!o){console.warn(`[some-shade] Unknown effect: ${this.effect}`);return}const n=Math.min(window.devicePixelRatio||1,B),i=this._image.naturalWidth,e=this._image.naturalHeight,r=this.clientWidth||i,d=Math.max(1,i/r);this._lastClientWidth=this.clientWidth;const p=document.createElement("canvas");p.width=i*n,p.height=e*n;const s=k(p);if(!s){this._webglAvailable=!1;return}try{const f=L(s,o.vertexShader,o.fragmentShader);s.useProgram(f.program);const h=z(s,this._image),_=P(s,f);s.viewport(0,0,p.width,p.height),s.clearColor(0,0,0,0),s.clear(s.COLOR_BUFFER_BIT),s.activeTexture(s.TEXTURE0),s.bindTexture(s.TEXTURE_2D,h.texture);const A=f.uniformLocations.get("u_image");A&&s.uniform1i(A,0),D(s,f,this._getUniformValues(h,n,d)),s.bindBuffer(s.ARRAY_BUFFER,_);const U=4*Float32Array.BYTES_PER_ELEMENT,y=f.attribLocations.get("a_position");y!==void 0&&y!==-1&&(s.enableVertexAttribArray(y),s.vertexAttribPointer(y,2,s.FLOAT,!1,U,0));const w=f.attribLocations.get("a_texCoord");w!==void 0&&w!==-1&&(s.enableVertexAttribArray(w),s.vertexAttribPointer(w,2,s.FLOAT,!1,U,2*Float32Array.BYTES_PER_ELEMENT)),O(s);const K=await new Promise($=>p.toBlob($));s.deleteTexture(h.texture),s.deleteProgram(f.program),s.deleteBuffer(_),K&&(this._snapshotLoaded=!1,this._revokeSnapshot(),this._snapshotUrl=URL.createObjectURL(K))}finally{(b=s.getExtension("WEBGL_lose_context"))==null||b.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,n,i){const e={};return e.u_resolution=[o.width*n,o.height*n],e.u_dotRadius=this.dotRadius*i,e.u_gridSize=this.gridSize*i,this.effect==="halftone-cmyk"?(e.u_angleC=this.angleC,e.u_angleM=this.angleM,e.u_angleY=this.angleY,e.u_angleK=this.angleK,e.u_showC=this.showC,e.u_showM=this.showM,e.u_showY=this.showY,e.u_showK=this.showK,e.u_intensityK=this.intensityK):this.effect==="halftone-duotone"?(e.u_duotoneColor=this._parseHexColor(this.duotoneColor),e.u_angle=this.angle):this.effect==="dot-grid"?(e.u_dotOffset=[this.dotOffsetX,this.dotOffsetY],e.u_bgColor=this._parseHexColor(this.bgColor),e.u_angle=this.angle):this.effect==="technicolor-2strip"&&(e.u_angleWarm=this.angleWarm,e.u_angleCool=this.angleCool,e.u_angleK=this.angleK,e.u_showWarm=this.showWarm,e.u_showCool=this.showCool,e.u_showK=this.showK,e.u_warmColor=this._parseHexColor(this.warmColor),e.u_coolColor=this._parseHexColor(this.coolColor)),e}_parseHexColor(o){const n=o.replace("#",""),i=parseInt(n.substring(0,2),16)/255,e=parseInt(n.substring(2,4),16)/255,r=parseInt(n.substring(4,6),16)/255;return[i,e,r]}};R.styles=m.css`
|
|
255
257
|
:host {
|
|
256
258
|
display: block;
|
|
257
259
|
position: relative;
|
|
258
260
|
overflow: hidden;
|
|
261
|
+
max-width: 100%;
|
|
259
262
|
}
|
|
260
263
|
img {
|
|
261
264
|
display: block;
|
|
@@ -273,4 +276,4 @@ void main() {
|
|
|
273
276
|
img.snapshot.loaded {
|
|
274
277
|
opacity: 1;
|
|
275
278
|
}
|
|
276
|
-
`;let
|
|
279
|
+
`;let a=R;u([l.property()],a.prototype,"src"),u([l.property()],a.prototype,"effect"),u([l.property({type:Number,attribute:"dot-radius"})],a.prototype,"dotRadius"),u([l.property({type:Number,attribute:"grid-size"})],a.prototype,"gridSize"),u([l.property({type:Number,attribute:"angle-c"})],a.prototype,"angleC"),u([l.property({type:Number,attribute:"angle-m"})],a.prototype,"angleM"),u([l.property({type:Number,attribute:"angle-y"})],a.prototype,"angleY"),u([l.property({type:Number,attribute:"angle-k"})],a.prototype,"angleK"),u([l.property({type:Number,attribute:"show-c"})],a.prototype,"showC"),u([l.property({type:Number,attribute:"show-m"})],a.prototype,"showM"),u([l.property({type:Number,attribute:"show-y"})],a.prototype,"showY"),u([l.property({type:Number,attribute:"show-k"})],a.prototype,"showK"),u([l.property({type:Number,attribute:"intensity-k"})],a.prototype,"intensityK"),u([l.property({attribute:"duotone-color"})],a.prototype,"duotoneColor"),u([l.property({type:Number})],a.prototype,"angle"),u([l.property({type:Number,attribute:"dot-offset-x"})],a.prototype,"dotOffsetX"),u([l.property({type:Number,attribute:"dot-offset-y"})],a.prototype,"dotOffsetY"),u([l.property({attribute:"bg-color"})],a.prototype,"bgColor"),u([l.property({type:Number,attribute:"angle-warm"})],a.prototype,"angleWarm"),u([l.property({type:Number,attribute:"angle-cool"})],a.prototype,"angleCool"),u([l.property({type:Number,attribute:"show-warm"})],a.prototype,"showWarm"),u([l.property({type:Number,attribute:"show-cool"})],a.prototype,"showCool"),u([l.property({attribute:"warm-color"})],a.prototype,"warmColor"),u([l.property({attribute:"cool-color"})],a.prototype,"coolColor"),u([l.property({type:Number,attribute:"loading-blur"})],a.prototype,"loadingBlur"),u([l.state()],a.prototype,"_webglAvailable"),u([l.state()],a.prototype,"_snapshotUrl"),u([l.state()],a.prototype,"_snapshotLoaded"),customElements.get("some-shade-image")||customElements.define("some-shade-image",a),c.SomeShadeImage=a,c.get=x,c.list=F,c.register=g,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}));
|