@paper-design/shaders-react 0.0.55 → 0.0.56
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/color-props-are-equal.js +2 -15
- package/dist/color-props-are-equal.js.map +2 -2
- package/dist/fast-deep-equal.d.ts +1 -0
- package/dist/fast-deep-equal.js +33 -0
- package/dist/fast-deep-equal.js.map +7 -0
- package/dist/shader-mount.js +76 -51
- package/dist/shader-mount.js.map +2 -2
- package/dist/shaders/heatmap.js +22 -45
- package/dist/shaders/heatmap.js.map +2 -2
- package/package.json +2 -2
|
@@ -3,24 +3,11 @@
|
|
|
3
3
|
* https://github.com/paper-design/shaders *
|
|
4
4
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
5
|
|
|
6
|
+
import { fastDeepEqual } from "./fast-deep-equal.js";
|
|
6
7
|
function colorPropsAreEqual(prevProps, nextProps) {
|
|
7
8
|
for (const key in prevProps) {
|
|
8
9
|
if (key === "colors") {
|
|
9
|
-
|
|
10
|
-
const nextIsArray = Array.isArray(nextProps.colors);
|
|
11
|
-
if (!prevIsArray || !nextIsArray) {
|
|
12
|
-
if (Object.is(prevProps.colors, nextProps.colors) === false) {
|
|
13
|
-
return false;
|
|
14
|
-
}
|
|
15
|
-
continue;
|
|
16
|
-
}
|
|
17
|
-
if (prevProps.colors?.length !== nextProps.colors?.length) {
|
|
18
|
-
return false;
|
|
19
|
-
}
|
|
20
|
-
if (!prevProps.colors?.every((color, index) => color === nextProps.colors?.[index])) {
|
|
21
|
-
return false;
|
|
22
|
-
}
|
|
23
|
-
continue;
|
|
10
|
+
return fastDeepEqual(prevProps.colors, nextProps.colors);
|
|
24
11
|
}
|
|
25
12
|
if (Object.is(prevProps[key], nextProps[key]) === false) {
|
|
26
13
|
return false;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/color-props-are-equal.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;
|
|
4
|
+
"sourcesContent": ["import { fastDeepEqual } from './fast-deep-equal.js';\n\ninterface PropsWithColors {\n colors?: string[];\n [key: string]: unknown;\n}\n\nexport function colorPropsAreEqual(prevProps: PropsWithColors, nextProps: PropsWithColors): boolean {\n for (const key in prevProps) {\n if (key === 'colors') {\n return fastDeepEqual(prevProps.colors, nextProps.colors);\n }\n\n if (Object.is(prevProps[key], nextProps[key]) === false) {\n return false;\n }\n }\n\n return true;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;AAAA,SAAS,qBAAqB;AAOvB,SAAS,mBAAmB,WAA4B,WAAqC;AAClG,aAAW,OAAO,WAAW;AAC3B,QAAI,QAAQ,UAAU;AACpB,aAAO,cAAc,UAAU,QAAQ,UAAU,MAAM;AAAA,IACzD;AAEA,QAAI,OAAO,GAAG,UAAU,GAAG,GAAG,UAAU,GAAG,CAAC,MAAM,OAAO;AACvD,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function fastDeepEqual(a: any, b: any): boolean;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
2
|
+
* Paper Shaders *
|
|
3
|
+
* https://github.com/paper-design/shaders *
|
|
4
|
+
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
|
+
|
|
6
|
+
function fastDeepEqual(a, b) {
|
|
7
|
+
if (a === b) return true;
|
|
8
|
+
if (a && b && typeof a == "object" && typeof b == "object") {
|
|
9
|
+
if (a.constructor !== b.constructor) return false;
|
|
10
|
+
var length, i, keys;
|
|
11
|
+
if (Array.isArray(a)) {
|
|
12
|
+
length = a.length;
|
|
13
|
+
if (length != b.length) return false;
|
|
14
|
+
for (i = length; i-- !== 0; ) if (!fastDeepEqual(a[i], b[i])) return false;
|
|
15
|
+
return true;
|
|
16
|
+
}
|
|
17
|
+
if (a.constructor !== Object) return false;
|
|
18
|
+
keys = Object.keys(a);
|
|
19
|
+
length = keys.length;
|
|
20
|
+
if (length !== Object.keys(b).length) return false;
|
|
21
|
+
for (i = length; i-- !== 0; ) if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
|
|
22
|
+
for (i = length; i-- !== 0; ) {
|
|
23
|
+
var key = keys[i];
|
|
24
|
+
if (!fastDeepEqual(a[key], b[key])) return false;
|
|
25
|
+
}
|
|
26
|
+
return true;
|
|
27
|
+
}
|
|
28
|
+
return a !== a && b !== b;
|
|
29
|
+
}
|
|
30
|
+
export {
|
|
31
|
+
fastDeepEqual
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=fast-deep-equal.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/fast-deep-equal.ts"],
|
|
4
|
+
"sourcesContent": ["// Adapted from https://github.com/epoberezkin/fast-deep-equal\n\nexport function fastDeepEqual(a: any, b: any): boolean {\n if (a === b) return true;\n\n if (a && b && typeof a == 'object' && typeof b == 'object') {\n if (a.constructor !== b.constructor) return false;\n\n var length, i, keys;\n if (Array.isArray(a)) {\n length = a.length;\n if (length != b.length) return false;\n for (i = length; i-- !== 0; ) if (!fastDeepEqual(a[i], b[i])) return false;\n return true;\n }\n\n // Our change: compare Arrays (done above) and anonymous Objects only,\n // other objects will be compared by reference equality.\n if (a.constructor !== Object) return false;\n\n keys = Object.keys(a);\n length = keys.length;\n if (length !== Object.keys(b).length) return false;\n\n for (i = length; i-- !== 0; ) if (!Object.prototype.hasOwnProperty.call(b, keys[i]!)) return false;\n\n for (i = length; i-- !== 0; ) {\n var key = keys[i];\n\n if (!fastDeepEqual(a[key!], b[key!])) return false;\n }\n\n return true;\n }\n\n // true if both NaN, false otherwise\n return a !== a && b !== b;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;AAEO,SAAS,cAAc,GAAQ,GAAiB;AACrD,MAAI,MAAM,EAAG,QAAO;AAEpB,MAAI,KAAK,KAAK,OAAO,KAAK,YAAY,OAAO,KAAK,UAAU;AAC1D,QAAI,EAAE,gBAAgB,EAAE,YAAa,QAAO;AAE5C,QAAI,QAAQ,GAAG;AACf,QAAI,MAAM,QAAQ,CAAC,GAAG;AACpB,eAAS,EAAE;AACX,UAAI,UAAU,EAAE,OAAQ,QAAO;AAC/B,WAAK,IAAI,QAAQ,QAAQ,IAAK,KAAI,CAAC,cAAc,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EAAG,QAAO;AACrE,aAAO;AAAA,IACT;AAIA,QAAI,EAAE,gBAAgB,OAAQ,QAAO;AAErC,WAAO,OAAO,KAAK,CAAC;AACpB,aAAS,KAAK;AACd,QAAI,WAAW,OAAO,KAAK,CAAC,EAAE,OAAQ,QAAO;AAE7C,SAAK,IAAI,QAAQ,QAAQ,IAAK,KAAI,CAAC,OAAO,UAAU,eAAe,KAAK,GAAG,KAAK,CAAC,CAAE,EAAG,QAAO;AAE7F,SAAK,IAAI,QAAQ,QAAQ,KAAK;AAC5B,UAAI,MAAM,KAAK,CAAC;AAEhB,UAAI,CAAC,cAAc,EAAE,GAAI,GAAG,EAAE,GAAI,CAAC,EAAG,QAAO;AAAA,IAC/C;AAEA,WAAO;AAAA,EACT;AAGA,SAAO,MAAM,KAAK,MAAM;AAC1B;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/shader-mount.js
CHANGED
|
@@ -4,12 +4,13 @@
|
|
|
4
4
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
5
|
|
|
6
6
|
"use client";
|
|
7
|
-
import { useEffect, useRef, forwardRef, useState } from "react";
|
|
7
|
+
import { useEffect, useRef, forwardRef, useState, useLayoutEffect } from "react";
|
|
8
8
|
import {
|
|
9
|
-
ShaderMount as ShaderMountVanilla
|
|
10
|
-
getEmptyPixel
|
|
9
|
+
ShaderMount as ShaderMountVanilla
|
|
11
10
|
} from "@paper-design/shaders";
|
|
12
11
|
import { useMergeRefs } from "./use-merge-refs.js";
|
|
12
|
+
import { transparentPixel } from "./transparent-pixel.js";
|
|
13
|
+
import { fastDeepEqual } from "./fast-deep-equal.js";
|
|
13
14
|
import { jsx } from "react/jsx-runtime";
|
|
14
15
|
async function processUniforms(uniformsProp) {
|
|
15
16
|
const processedUniforms = {};
|
|
@@ -34,10 +35,6 @@ async function processUniforms(uniformsProp) {
|
|
|
34
35
|
};
|
|
35
36
|
Object.entries(uniformsProp).forEach(([key, value]) => {
|
|
36
37
|
if (typeof value === "string") {
|
|
37
|
-
if (!value) {
|
|
38
|
-
processedUniforms[key] = getEmptyPixel();
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
38
|
if (!isValidUrl(value)) {
|
|
42
39
|
console.warn(`Uniform "${key}" has invalid URL "${value}". Skipping image loading.`);
|
|
43
40
|
return;
|
|
@@ -55,7 +52,7 @@ async function processUniforms(uniformsProp) {
|
|
|
55
52
|
console.error(`Could not set uniforms. Failed to load image at ${value}`);
|
|
56
53
|
reject();
|
|
57
54
|
};
|
|
58
|
-
img.src = value;
|
|
55
|
+
img.src = value || transparentPixel;
|
|
59
56
|
});
|
|
60
57
|
imageLoadPromises.push(imagePromise);
|
|
61
58
|
} else {
|
|
@@ -67,7 +64,7 @@ async function processUniforms(uniformsProp) {
|
|
|
67
64
|
}
|
|
68
65
|
const ShaderMount = forwardRef(
|
|
69
66
|
function ShaderMountImpl({
|
|
70
|
-
fragmentShader,
|
|
67
|
+
fragmentShader: fragmentShaderProp,
|
|
71
68
|
uniforms: uniformsProp,
|
|
72
69
|
webGlContextAttributes,
|
|
73
70
|
speed = 0,
|
|
@@ -79,62 +76,90 @@ const ShaderMount = forwardRef(
|
|
|
79
76
|
style,
|
|
80
77
|
...divProps
|
|
81
78
|
}, forwardedRef) {
|
|
82
|
-
const
|
|
83
|
-
const
|
|
84
|
-
const
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
79
|
+
const containerRef = useRef(null);
|
|
80
|
+
const [shaderMount, setShaderMount] = useState(null);
|
|
81
|
+
const uniformsRegistered = useRef(null);
|
|
82
|
+
const [initialShaderFragment] = useState(fragmentShaderProp);
|
|
83
|
+
const [initialContextAttrs] = useState(webGlContextAttributes);
|
|
84
|
+
const initialFrame = useRef(frame);
|
|
85
|
+
const [documentVisible, setDocumentVisible] = useState(() => {
|
|
86
|
+
return typeof window === "undefined" || document.hidden === false;
|
|
87
|
+
});
|
|
88
|
+
useLayoutEffect(() => {
|
|
89
|
+
const uniformsDidChange = !fastDeepEqual(uniformsRegistered.current, uniformsProp);
|
|
90
|
+
if (uniformsDidChange) {
|
|
91
|
+
let cancelPromise = false;
|
|
92
|
+
processUniforms(uniformsProp).then((uniforms) => {
|
|
93
|
+
if (cancelPromise || !containerRef.current) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
uniformsRegistered.current = uniformsProp;
|
|
97
|
+
if (shaderMount) {
|
|
98
|
+
shaderMount.setUniforms(uniforms);
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
const canvas = new ShaderMountVanilla(
|
|
102
|
+
containerRef.current,
|
|
103
|
+
initialShaderFragment,
|
|
92
104
|
uniforms,
|
|
93
|
-
|
|
105
|
+
initialContextAttrs,
|
|
94
106
|
speed,
|
|
95
107
|
frame,
|
|
96
108
|
minPixelRatio,
|
|
97
109
|
maxPixelCount
|
|
98
110
|
);
|
|
99
|
-
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
|
|
111
|
+
setShaderMount(canvas);
|
|
112
|
+
});
|
|
113
|
+
return () => {
|
|
114
|
+
cancelPromise = true;
|
|
115
|
+
};
|
|
116
|
+
}
|
|
117
|
+
if (!shaderMount) {
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
const targetSpeed = documentVisible ? speed : 0;
|
|
121
|
+
if (shaderMount.speed !== targetSpeed) {
|
|
122
|
+
shaderMount.setSpeed(targetSpeed);
|
|
123
|
+
}
|
|
124
|
+
if (initialFrame.current !== frame) {
|
|
125
|
+
initialFrame.current = frame;
|
|
126
|
+
shaderMount.setFrame(frame);
|
|
127
|
+
}
|
|
128
|
+
if (shaderMount.minPixelRatio !== minPixelRatio) {
|
|
129
|
+
shaderMount.setMinPixelRatio(minPixelRatio);
|
|
130
|
+
}
|
|
131
|
+
if (shaderMount.maxPixelCount !== maxPixelCount) {
|
|
132
|
+
shaderMount.setMaxPixelCount(maxPixelCount);
|
|
133
|
+
}
|
|
134
|
+
}, [
|
|
135
|
+
documentVisible,
|
|
136
|
+
frame,
|
|
137
|
+
initialContextAttrs,
|
|
138
|
+
initialShaderFragment,
|
|
139
|
+
maxPixelCount,
|
|
140
|
+
minPixelRatio,
|
|
141
|
+
shaderMount,
|
|
142
|
+
speed,
|
|
143
|
+
uniformsProp
|
|
144
|
+
]);
|
|
145
|
+
useEffect(() => {
|
|
103
146
|
return () => {
|
|
104
|
-
|
|
105
|
-
shaderMountRef.current = null;
|
|
147
|
+
shaderMount?.dispose();
|
|
106
148
|
};
|
|
107
|
-
}, [
|
|
149
|
+
}, [shaderMount]);
|
|
108
150
|
useEffect(() => {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
shaderMountRef.current?.setUniforms(uniforms);
|
|
114
|
-
}
|
|
115
|
-
};
|
|
116
|
-
updateUniforms();
|
|
151
|
+
function onVisibilityChange() {
|
|
152
|
+
setDocumentVisible(!document.hidden);
|
|
153
|
+
}
|
|
154
|
+
document.addEventListener("visibilitychange", onVisibilityChange);
|
|
117
155
|
return () => {
|
|
118
|
-
|
|
156
|
+
document.removeEventListener("visibilitychange", onVisibilityChange);
|
|
119
157
|
};
|
|
120
|
-
}, [
|
|
121
|
-
useEffect(() => {
|
|
122
|
-
shaderMountRef.current?.setSpeed(speed);
|
|
123
|
-
}, [speed, isInitialized]);
|
|
124
|
-
useEffect(() => {
|
|
125
|
-
shaderMountRef.current?.setMaxPixelCount(maxPixelCount);
|
|
126
|
-
}, [maxPixelCount, isInitialized]);
|
|
127
|
-
useEffect(() => {
|
|
128
|
-
shaderMountRef.current?.setMinPixelRatio(minPixelRatio);
|
|
129
|
-
}, [minPixelRatio, isInitialized]);
|
|
130
|
-
useEffect(() => {
|
|
131
|
-
shaderMountRef.current?.setFrame(frame);
|
|
132
|
-
}, [frame, isInitialized]);
|
|
133
|
-
const mergedRef = useMergeRefs([divRef, forwardedRef]);
|
|
158
|
+
}, []);
|
|
134
159
|
return /* @__PURE__ */ jsx(
|
|
135
160
|
"div",
|
|
136
161
|
{
|
|
137
|
-
ref:
|
|
162
|
+
ref: useMergeRefs([containerRef, forwardedRef]),
|
|
138
163
|
style: width !== void 0 || height !== void 0 ? { width, height, ...style } : style,
|
|
139
164
|
...divProps
|
|
140
165
|
}
|
package/dist/shader-mount.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/shader-mount.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\nimport { useEffect, useRef, forwardRef, useState } from 'react';\nimport {\n ShaderMount as ShaderMountVanilla,\n
|
|
5
|
-
"mappings": ";;;;;;AAEA,SAAS,WAAW,QAAQ,YAAY,
|
|
4
|
+
"sourcesContent": ["'use client';\n\nimport { useEffect, useRef, forwardRef, useState, useLayoutEffect } from 'react';\nimport {\n ShaderMount as ShaderMountVanilla,\n type PaperShaderElement,\n type ShaderMotionParams,\n type ShaderMountUniforms,\n} from '@paper-design/shaders';\nimport { useMergeRefs } from './use-merge-refs.js';\nimport { transparentPixel } from './transparent-pixel.js';\nimport { fastDeepEqual } from './fast-deep-equal.js';\n\n/**\n * React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images\n *\n * We accept undefined as a convenience for server rendering, when some things may be undefined\n * We just skip setting the uniform if it's undefined. This allows the shader mount to still take up space during server rendering\n */\ninterface ShaderMountUniformsReact {\n [key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement | undefined;\n}\n\nexport interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'>, ShaderMotionParams {\n ref?: React.Ref<PaperShaderElement>;\n fragmentShader: string;\n uniforms: ShaderMountUniformsReact;\n minPixelRatio?: number;\n maxPixelCount?: number;\n webGlContextAttributes?: WebGLContextAttributes;\n\n /** Inline CSS width style */\n width?: string | number;\n /** Inline CSS height style */\n height?: string | number;\n}\n\nexport interface ShaderComponentProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'> {\n ref?: React.Ref<PaperShaderElement>;\n minPixelRatio?: number;\n maxPixelCount?: number;\n webGlContextAttributes?: WebGLContextAttributes;\n\n /** Inline CSS width style */\n width?: string | number;\n /** Inline CSS height style */\n height?: string | number;\n}\n\n/** Parse the provided uniforms, turning URL strings into loaded images */\nasync function processUniforms(uniformsProp: ShaderMountUniformsReact): Promise<ShaderMountUniforms> {\n const processedUniforms = {} as ShaderMountUniforms;\n const imageLoadPromises: Promise<void>[] = [];\n\n const isValidUrl = (url: string): boolean => {\n try {\n // Handle absolute paths\n if (url.startsWith('/')) return true;\n // Check if it's a valid URL\n new URL(url);\n return true;\n } catch {\n return false;\n }\n };\n\n const isExternalUrl = (url: string): boolean => {\n try {\n if (url.startsWith('/')) return false;\n const urlObject = new URL(url, window.location.origin);\n return urlObject.origin !== window.location.origin;\n } catch {\n return false;\n }\n };\n\n Object.entries(uniformsProp).forEach(([key, value]) => {\n if (typeof value === 'string') {\n // Make sure the provided string is a valid URL or just skip trying to set this uniform entirely\n if (!isValidUrl(value)) {\n console.warn(`Uniform \"${key}\" has invalid URL \"${value}\". Skipping image loading.`);\n return;\n }\n\n const imagePromise = new Promise<void>((resolve, reject) => {\n const img = new Image();\n if (isExternalUrl(value)) {\n img.crossOrigin = 'anonymous';\n }\n img.onload = () => {\n processedUniforms[key] = img;\n resolve();\n };\n img.onerror = () => {\n console.error(`Could not set uniforms. Failed to load image at ${value}`);\n reject();\n };\n // Use a transparent pixel for empty strings\n img.src = value || transparentPixel;\n });\n imageLoadPromises.push(imagePromise);\n } else {\n processedUniforms[key] = value;\n }\n });\n\n await Promise.all(imageLoadPromises);\n return processedUniforms;\n}\n\n/**\n * A React component that mounts a shader and updates its uniforms as the component's props change\n * If you pass a string as a uniform value, it will be assumed to be a URL and attempted to be loaded as an image\n */\nexport const ShaderMount: React.FC<ShaderMountProps> = forwardRef<PaperShaderElement, ShaderMountProps>(\n function ShaderMountImpl(\n {\n fragmentShader: fragmentShaderProp,\n uniforms: uniformsProp,\n webGlContextAttributes,\n speed = 0,\n frame = 0,\n width,\n height,\n minPixelRatio,\n maxPixelCount,\n style,\n ...divProps\n },\n forwardedRef\n ) {\n const containerRef = useRef<PaperShaderElement>(null);\n const [shaderMount, setShaderMount] = useState<ShaderMountVanilla | null>(null);\n\n // Uniforms that have been registered for processing or already processed\n const uniformsRegistered = useRef<ShaderMountUniformsReact>(null);\n\n // Save the initial shader fragment and context attributes, they are not allowed to change\n const [initialShaderFragment] = useState(fragmentShaderProp);\n const [initialContextAttrs] = useState(webGlContextAttributes);\n\n // Initial frame that the animation starts at\n const initialFrame = useRef(frame);\n\n const [documentVisible, setDocumentVisible] = useState(() => {\n return typeof window === 'undefined' || document.hidden === false;\n });\n\n useLayoutEffect(() => {\n // Check if uniforms have changed, if yes we'll schedule processing\n const uniformsDidChange = !fastDeepEqual(uniformsRegistered.current, uniformsProp);\n\n if (uniformsDidChange) {\n let cancelPromise = false;\n\n processUniforms(uniformsProp).then((uniforms) => {\n if (cancelPromise || !containerRef.current) {\n return;\n }\n\n uniformsRegistered.current = uniformsProp;\n\n // If shader mount already exists, we can update the uniforms\n if (shaderMount) {\n shaderMount.setUniforms(uniforms);\n return;\n }\n\n // Otherwise, initialize a new shader mount\n const canvas = new ShaderMountVanilla(\n containerRef.current,\n initialShaderFragment,\n uniforms,\n initialContextAttrs,\n speed,\n frame,\n minPixelRatio,\n maxPixelCount\n );\n\n setShaderMount(canvas);\n });\n\n return () => {\n cancelPromise = true;\n };\n }\n\n // Can't do granular updates if shader mount doesn't exist yet\n if (!shaderMount) {\n return;\n }\n\n // Pause when document is hidden\n const targetSpeed = documentVisible ? speed : 0;\n if (shaderMount.speed !== targetSpeed) {\n shaderMount.setSpeed(targetSpeed);\n }\n\n if (initialFrame.current !== frame) {\n initialFrame.current = frame;\n shaderMount.setFrame(frame);\n }\n\n if (shaderMount.minPixelRatio !== minPixelRatio) {\n shaderMount.setMinPixelRatio(minPixelRatio);\n }\n\n if (shaderMount.maxPixelCount !== maxPixelCount) {\n shaderMount.setMaxPixelCount(maxPixelCount);\n }\n }, [\n documentVisible,\n frame,\n initialContextAttrs,\n initialShaderFragment,\n maxPixelCount,\n minPixelRatio,\n shaderMount,\n speed,\n uniformsProp,\n ]);\n\n // Free up shader mount resources when the component unmounts\n useEffect(() => {\n return () => {\n shaderMount?.dispose();\n };\n }, [shaderMount]);\n\n useEffect(() => {\n function onVisibilityChange() {\n setDocumentVisible(!document.hidden);\n }\n\n document.addEventListener('visibilitychange', onVisibilityChange);\n\n return () => {\n document.removeEventListener('visibilitychange', onVisibilityChange);\n };\n }, []);\n\n return (\n <div\n ref={useMergeRefs([containerRef, forwardedRef]) as unknown as React.RefObject<HTMLDivElement>}\n style={width !== undefined || height !== undefined ? { width, height, ...style } : style}\n {...divProps}\n />\n );\n }\n);\n\nShaderMount.displayName = 'ShaderMount';\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/shaders/heatmap.js
CHANGED
|
@@ -106,51 +106,28 @@ const Heatmap = memo(function HeatmapImpl({
|
|
|
106
106
|
URL.revokeObjectURL(url);
|
|
107
107
|
};
|
|
108
108
|
}, [imageUrl, suspendWhenProcessingImage]);
|
|
109
|
-
const uniforms =
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
}),
|
|
132
|
-
[
|
|
133
|
-
speed,
|
|
134
|
-
frame,
|
|
135
|
-
contour,
|
|
136
|
-
angle,
|
|
137
|
-
noise,
|
|
138
|
-
innerGlow,
|
|
139
|
-
outerGlow,
|
|
140
|
-
colors,
|
|
141
|
-
colorBack,
|
|
142
|
-
processedImage,
|
|
143
|
-
fit,
|
|
144
|
-
offsetX,
|
|
145
|
-
offsetY,
|
|
146
|
-
originX,
|
|
147
|
-
originY,
|
|
148
|
-
rotation,
|
|
149
|
-
scale,
|
|
150
|
-
worldHeight,
|
|
151
|
-
worldWidth
|
|
152
|
-
]
|
|
153
|
-
);
|
|
109
|
+
const uniforms = {
|
|
110
|
+
// Own uniforms
|
|
111
|
+
u_image: processedImage,
|
|
112
|
+
u_contour: contour,
|
|
113
|
+
u_angle: angle,
|
|
114
|
+
u_noise: noise,
|
|
115
|
+
u_innerGlow: innerGlow,
|
|
116
|
+
u_outerGlow: outerGlow,
|
|
117
|
+
u_colorBack: getShaderColorFromString(colorBack),
|
|
118
|
+
u_colors: colors.map(getShaderColorFromString),
|
|
119
|
+
u_colorsCount: colors.length,
|
|
120
|
+
// Sizing uniforms
|
|
121
|
+
u_fit: ShaderFitOptions[fit],
|
|
122
|
+
u_offsetX: offsetX,
|
|
123
|
+
u_offsetY: offsetY,
|
|
124
|
+
u_originX: originX,
|
|
125
|
+
u_originY: originY,
|
|
126
|
+
u_rotation: rotation,
|
|
127
|
+
u_scale: scale,
|
|
128
|
+
u_worldHeight: worldHeight,
|
|
129
|
+
u_worldWidth: worldWidth
|
|
130
|
+
};
|
|
154
131
|
return /* @__PURE__ */ jsx(ShaderMount, { ...props, speed, frame, fragmentShader: heatmapFragmentShader, uniforms });
|
|
155
132
|
}, colorPropsAreEqual);
|
|
156
133
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/heatmap.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { memo, useLayoutEffect, useMemo, useState } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n getShaderColorFromString,\n heatmapFragmentShader,\n ShaderFitOptions,\n type HeatmapUniforms,\n type HeatmapParams,\n defaultObjectSizing,\n toProcessedHeatmap,\n type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nimport { transparentPixel } from '../transparent-pixel.js';\nimport { suspend } from '../suspend.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\n\nexport interface HeatmapProps extends ShaderComponentProps, HeatmapParams {\n /**\n * Suspends the component when the image is being processed.\n */\n suspendWhenProcessingImage?: boolean;\n}\n\nexport type HeatmapPreset = ImageShaderPreset<HeatmapParams>;\n\nexport const defaultPreset: HeatmapPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 0.75,\n speed: 1,\n frame: 0,\n contour: 0.5,\n angle: 0,\n noise: 0,\n innerGlow: 0.5,\n outerGlow: 0.5,\n colorBack: '#000000',\n colors: ['#11206a', '#1f3ba2', '#2f63e7', '#6bd7ff', '#ffe679', '#ff991e', '#ff4c00'],\n },\n} as const satisfies HeatmapPreset;\n\nexport const sepiaPreset: HeatmapPreset = {\n name: 'Sepia',\n params: {\n ...defaultObjectSizing,\n scale: 0.75,\n speed: 0.5,\n frame: 0,\n contour: 0.5,\n angle: 0,\n noise: 0.75,\n innerGlow: 0.5,\n outerGlow: 0.5,\n colorBack: '#000000',\n colors: ['#997F45', '#ffffff'],\n },\n} as const satisfies HeatmapPreset;\n\nexport const heatmapPresets: HeatmapPreset[] = [defaultPreset, sepiaPreset];\n\nexport const Heatmap: React.FC<HeatmapProps> = memo(function HeatmapImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n image = '',\n contour = defaultPreset.params.contour,\n angle = defaultPreset.params.angle,\n noise = defaultPreset.params.noise,\n innerGlow = defaultPreset.params.innerGlow,\n outerGlow = defaultPreset.params.outerGlow,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n suspendWhenProcessingImage = false,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n rotation = defaultPreset.params.rotation,\n scale = defaultPreset.params.scale,\n worldHeight = defaultPreset.params.worldHeight,\n worldWidth = defaultPreset.params.worldWidth,\n ...props\n}: HeatmapProps) {\n const imageUrl = typeof image === 'string' ? image : image.src;\n const [processedStateImage, setProcessedStateImage] = useState<string>(transparentPixel);\n\n let processedImage: string;\n\n // toProcessedHeatmap expects the document object to exist. This prevents SSR issues during builds.\n if (suspendWhenProcessingImage && typeof window !== 'undefined') {\n processedImage = suspend(\n (): Promise<string> => toProcessedHeatmap(imageUrl).then((result) => URL.createObjectURL(result.blob)),\n [imageUrl]\n );\n } else {\n processedImage = processedStateImage;\n }\n\n useLayoutEffect(() => {\n if (suspendWhenProcessingImage) {\n // Skip doing work in the effect as it's been handled by suspense.\n return;\n }\n\n if (!imageUrl) {\n setProcessedStateImage(transparentPixel);\n return;\n }\n\n let url: string;\n let current = true;\n\n toProcessedHeatmap(imageUrl).then((result) => {\n if (current) {\n url = URL.createObjectURL(result.blob);\n setProcessedStateImage(url);\n }\n });\n\n return () => {\n current = false;\n URL.revokeObjectURL(url);\n };\n }, [imageUrl, suspendWhenProcessingImage]);\n\n const uniforms =
|
|
5
|
-
"mappings": ";;;;;AAAA,OAAO,SAAS,MAAM,iBAAiB,SAAS,gBAAgB;AAChE,SAAS,mBAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,wBAAwB;AACjC,SAAS,eAAe;AACxB,SAAS,0BAA0B;
|
|
4
|
+
"sourcesContent": ["import React, { memo, useLayoutEffect, useMemo, useState } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport {\n getShaderColorFromString,\n heatmapFragmentShader,\n ShaderFitOptions,\n type HeatmapUniforms,\n type HeatmapParams,\n defaultObjectSizing,\n toProcessedHeatmap,\n type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nimport { transparentPixel } from '../transparent-pixel.js';\nimport { suspend } from '../suspend.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\n\nexport interface HeatmapProps extends ShaderComponentProps, HeatmapParams {\n /**\n * Suspends the component when the image is being processed.\n */\n suspendWhenProcessingImage?: boolean;\n}\n\nexport type HeatmapPreset = ImageShaderPreset<HeatmapParams>;\n\nexport const defaultPreset: HeatmapPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 0.75,\n speed: 1,\n frame: 0,\n contour: 0.5,\n angle: 0,\n noise: 0,\n innerGlow: 0.5,\n outerGlow: 0.5,\n colorBack: '#000000',\n colors: ['#11206a', '#1f3ba2', '#2f63e7', '#6bd7ff', '#ffe679', '#ff991e', '#ff4c00'],\n },\n} as const satisfies HeatmapPreset;\n\nexport const sepiaPreset: HeatmapPreset = {\n name: 'Sepia',\n params: {\n ...defaultObjectSizing,\n scale: 0.75,\n speed: 0.5,\n frame: 0,\n contour: 0.5,\n angle: 0,\n noise: 0.75,\n innerGlow: 0.5,\n outerGlow: 0.5,\n colorBack: '#000000',\n colors: ['#997F45', '#ffffff'],\n },\n} as const satisfies HeatmapPreset;\n\nexport const heatmapPresets: HeatmapPreset[] = [defaultPreset, sepiaPreset];\n\nexport const Heatmap: React.FC<HeatmapProps> = memo(function HeatmapImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n image = '',\n contour = defaultPreset.params.contour,\n angle = defaultPreset.params.angle,\n noise = defaultPreset.params.noise,\n innerGlow = defaultPreset.params.innerGlow,\n outerGlow = defaultPreset.params.outerGlow,\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n suspendWhenProcessingImage = false,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n rotation = defaultPreset.params.rotation,\n scale = defaultPreset.params.scale,\n worldHeight = defaultPreset.params.worldHeight,\n worldWidth = defaultPreset.params.worldWidth,\n ...props\n}: HeatmapProps) {\n const imageUrl = typeof image === 'string' ? image : image.src;\n const [processedStateImage, setProcessedStateImage] = useState<string>(transparentPixel);\n\n let processedImage: string;\n\n // toProcessedHeatmap expects the document object to exist. This prevents SSR issues during builds.\n if (suspendWhenProcessingImage && typeof window !== 'undefined') {\n processedImage = suspend(\n (): Promise<string> => toProcessedHeatmap(imageUrl).then((result) => URL.createObjectURL(result.blob)),\n [imageUrl]\n );\n } else {\n processedImage = processedStateImage;\n }\n\n useLayoutEffect(() => {\n if (suspendWhenProcessingImage) {\n // Skip doing work in the effect as it's been handled by suspense.\n return;\n }\n\n if (!imageUrl) {\n setProcessedStateImage(transparentPixel);\n return;\n }\n\n let url: string;\n let current = true;\n\n toProcessedHeatmap(imageUrl).then((result) => {\n if (current) {\n url = URL.createObjectURL(result.blob);\n setProcessedStateImage(url);\n }\n });\n\n return () => {\n current = false;\n URL.revokeObjectURL(url);\n };\n }, [imageUrl, suspendWhenProcessingImage]);\n\n const uniforms = {\n // Own uniforms\n u_image: processedImage,\n u_contour: contour,\n u_angle: angle,\n u_noise: noise,\n u_innerGlow: innerGlow,\n u_outerGlow: outerGlow,\n u_colorBack: getShaderColorFromString(colorBack),\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_rotation: rotation,\n u_scale: scale,\n u_worldHeight: worldHeight,\n u_worldWidth: worldWidth,\n };\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={heatmapFragmentShader} uniforms={uniforms} />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": ";;;;;AAAA,OAAO,SAAS,MAAM,iBAAiB,SAAS,gBAAgB;AAChE,SAAS,mBAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,wBAAwB;AACjC,SAAS,eAAe;AACxB,SAAS,0BAA0B;AA4I/B;AAjIG,MAAM,gBAA+B;AAAA,EAC1C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA,EACtF;AACF;AAEO,MAAM,cAA6B;AAAA,EACxC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,QAAQ,CAAC,WAAW,SAAS;AAAA,EAC/B;AACF;AAEO,MAAM,iBAAkC,CAAC,eAAe,WAAW;AAEnE,MAAM,UAAkC,KAAK,SAAS,YAAY;AAAA;AAAA,EAEvE,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ;AAAA,EACR,UAAU,cAAc,OAAO;AAAA,EAC/B,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,YAAY,cAAc,OAAO;AAAA,EACjC,YAAY,cAAc,OAAO;AAAA,EACjC,YAAY,cAAc,OAAO;AAAA,EACjC,SAAS,cAAc,OAAO;AAAA,EAC9B,6BAA6B;AAAA;AAAA,EAG7B,MAAM,cAAc,OAAO;AAAA,EAC3B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,WAAW,cAAc,OAAO;AAAA,EAChC,QAAQ,cAAc,OAAO;AAAA,EAC7B,cAAc,cAAc,OAAO;AAAA,EACnC,aAAa,cAAc,OAAO;AAAA,EAClC,GAAG;AACL,GAAiB;AACf,QAAM,WAAW,OAAO,UAAU,WAAW,QAAQ,MAAM;AAC3D,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAiB,gBAAgB;AAEvF,MAAI;AAGJ,MAAI,8BAA8B,OAAO,WAAW,aAAa;AAC/D,qBAAiB;AAAA,MACf,MAAuB,mBAAmB,QAAQ,EAAE,KAAK,CAAC,WAAW,IAAI,gBAAgB,OAAO,IAAI,CAAC;AAAA,MACrG,CAAC,QAAQ;AAAA,IACX;AAAA,EACF,OAAO;AACL,qBAAiB;AAAA,EACnB;AAEA,kBAAgB,MAAM;AACpB,QAAI,4BAA4B;AAE9B;AAAA,IACF;AAEA,QAAI,CAAC,UAAU;AACb,6BAAuB,gBAAgB;AACvC;AAAA,IACF;AAEA,QAAI;AACJ,QAAI,UAAU;AAEd,uBAAmB,QAAQ,EAAE,KAAK,CAAC,WAAW;AAC5C,UAAI,SAAS;AACX,cAAM,IAAI,gBAAgB,OAAO,IAAI;AACrC,+BAAuB,GAAG;AAAA,MAC5B;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,gBAAU;AACV,UAAI,gBAAgB,GAAG;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,UAAU,0BAA0B,CAAC;AAEzC,QAAM,WAAW;AAAA;AAAA,IAEf,SAAS;AAAA,IACT,WAAW;AAAA,IACX,SAAS;AAAA,IACT,SAAS;AAAA,IACT,aAAa;AAAA,IACb,aAAa;AAAA,IACb,aAAa,yBAAyB,SAAS;AAAA,IAC/C,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA;AAAA,IAGtB,OAAO,iBAAiB,GAAG;AAAA,IAC3B,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,cAAc;AAAA,EAChB;AAEA,SACE,oBAAC,eAAa,GAAG,OAAO,OAAc,OAAc,gBAAgB,uBAAuB,UAAoB;AAEnH,GAAG,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@paper-design/shaders-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.56",
|
|
4
4
|
"license": "SEE LICENSE IN https://github.com/paper-design/shaders/blob/main/LICENSE",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"type-check": "tsc --project tsconfig.json"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@paper-design/shaders": "0.0.
|
|
27
|
+
"@paper-design/shaders": "0.0.56"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@types/react": "19.1.0"
|