@paper-design/shaders-react 0.0.49 → 0.0.51
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 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +2 -2
- package/dist/shaders/heatmap.d.ts +4 -0
- package/dist/shaders/heatmap.js +21 -9
- package/dist/shaders/heatmap.js.map +2 -2
- package/dist/suspend.d.ts +8 -0
- package/dist/suspend.js +43 -0
- package/dist/suspend.js.map +7 -0
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -80,4 +80,4 @@ export type { HeatmapProps } from './shaders/heatmap.js';
|
|
|
80
80
|
export type { HeatmapUniforms, HeatmapParams } from '@paper-design/shaders';
|
|
81
81
|
export { isPaperShaderElement, getShaderColorFromString } from '@paper-design/shaders';
|
|
82
82
|
export type { PaperShaderElement, ShaderFit, ShaderSizingParams, ShaderSizingUniforms } from '@paper-design/shaders';
|
|
83
|
-
export { colorPanelsMeta, dotOrbitMeta, godRaysMeta, grainGradientMeta, meshGradientMeta, metaballsMeta, pulsingBorderMeta, simplexNoiseMeta, smokeRingMeta, swirlMeta, voronoiMeta, warpMeta, staticMeshGradientMeta, staticRadialGradientMeta, } from '@paper-design/shaders';
|
|
83
|
+
export { colorPanelsMeta, dotOrbitMeta, godRaysMeta, grainGradientMeta, meshGradientMeta, metaballsMeta, pulsingBorderMeta, simplexNoiseMeta, smokeRingMeta, swirlMeta, voronoiMeta, warpMeta, heatmapMeta, staticMeshGradientMeta, staticRadialGradientMeta, } from '@paper-design/shaders';
|
package/dist/index.js
CHANGED
|
@@ -47,6 +47,7 @@ import {
|
|
|
47
47
|
swirlMeta,
|
|
48
48
|
voronoiMeta,
|
|
49
49
|
warpMeta,
|
|
50
|
+
heatmapMeta,
|
|
50
51
|
staticMeshGradientMeta,
|
|
51
52
|
staticRadialGradientMeta
|
|
52
53
|
} from "@paper-design/shaders";
|
|
@@ -90,6 +91,7 @@ export {
|
|
|
90
91
|
godRaysPresets,
|
|
91
92
|
grainGradientMeta,
|
|
92
93
|
grainGradientPresets,
|
|
94
|
+
heatmapMeta,
|
|
93
95
|
heatmapPresets,
|
|
94
96
|
imageDitheringPresets,
|
|
95
97
|
isPaperShaderElement,
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\nexport { ShaderMount } from './shader-mount.js';\nexport type { ShaderMountProps, ShaderComponentProps } from './shader-mount.js';\n\nexport { MeshGradient, meshGradientPresets } from './shaders/mesh-gradient.js';\nexport type { MeshGradientProps } from './shaders/mesh-gradient.js';\nexport type { MeshGradientUniforms, MeshGradientParams } from '@paper-design/shaders';\n\nexport { SmokeRing, smokeRingPresets } from './shaders/smoke-ring.js';\nexport type { SmokeRingProps } from './shaders/smoke-ring.js';\nexport type { SmokeRingUniforms, SmokeRingParams } from '@paper-design/shaders';\n\nexport { NeuroNoise, neuroNoisePresets } from './shaders/neuro-noise.js';\nexport type { NeuroNoiseProps } from './shaders/neuro-noise.js';\nexport type { NeuroNoiseUniforms, NeuroNoiseParams } from '@paper-design/shaders';\n\nexport { DotOrbit, dotOrbitPresets } from './shaders/dot-orbit.js';\nexport type { DotOrbitProps } from './shaders/dot-orbit.js';\nexport type { DotOrbitUniforms, DotOrbitParams } from '@paper-design/shaders';\n\nexport { DotGrid, dotGridPresets } from './shaders/dot-grid.js';\nexport type { DotGridProps } from './shaders/dot-grid.js';\nexport type { DotGridUniforms, DotGridParams } from '@paper-design/shaders';\n\nexport { SimplexNoise, simplexNoisePresets } from './shaders/simplex-noise.js';\nexport type { SimplexNoiseProps } from './shaders/simplex-noise.js';\nexport type { SimplexNoiseUniforms, SimplexNoiseParams } from '@paper-design/shaders';\n\nexport { Metaballs, metaballsPresets } from './shaders/metaballs.js';\nexport type { MetaballsProps } from './shaders/metaballs.js';\nexport type { MetaballsUniforms, MetaballsParams } from '@paper-design/shaders';\n\nexport { Waves, wavesPresets } from './shaders/waves.js';\nexport type { WavesProps } from './shaders/waves.js';\nexport type { WavesUniforms, WavesParams } from '@paper-design/shaders';\n\nexport { PerlinNoise, perlinNoisePresets } from './shaders/perlin-noise.js';\nexport type { PerlinNoiseProps } from './shaders/perlin-noise.js';\nexport type { PerlinNoiseUniforms, PerlinNoiseParams } from '@paper-design/shaders';\n\nexport { Voronoi, voronoiPresets } from './shaders/voronoi.js';\nexport type { VoronoiProps } from './shaders/voronoi.js';\nexport type { VoronoiUniforms, VoronoiParams } from '@paper-design/shaders';\n\nexport { Warp, warpPresets } from './shaders/warp.js';\nexport type { WarpProps } from './shaders/warp.js';\nexport type { WarpUniforms, WarpParams, WarpPattern } from '@paper-design/shaders';\n\nexport { GodRays, godRaysPresets } from './shaders/god-rays.js';\nexport type { GodRaysProps } from './shaders/god-rays.js';\nexport type { GodRaysUniforms, GodRaysParams } from '@paper-design/shaders';\n\nexport { Spiral, spiralPresets } from './shaders/spiral.js';\nexport type { SpiralProps } from './shaders/spiral.js';\nexport type { SpiralUniforms, SpiralParams } from '@paper-design/shaders';\n\nexport { Swirl, swirlPresets } from './shaders/swirl.js';\nexport type { SwirlProps } from './shaders/swirl.js';\nexport type { SwirlUniforms, SwirlParams } from '@paper-design/shaders';\n\nexport { Dithering, ditheringPresets } from './shaders/dithering.js';\nexport type { DitheringProps } from './shaders/dithering.js';\nexport type { DitheringUniforms, DitheringParams } from '@paper-design/shaders';\n\nexport { GrainGradient, grainGradientPresets } from './shaders/grain-gradient.js';\nexport type { GrainGradientProps } from './shaders/grain-gradient.js';\nexport type { GrainGradientUniforms, GrainGradientParams } from '@paper-design/shaders';\n\nexport { LiquidMetal, liquidMetalPresets } from './shaders/liquid-metal.js';\nexport type { LiquidMetalProps } from './shaders/liquid-metal.js';\nexport type { LiquidMetalUniforms, LiquidMetalParams } from '@paper-design/shaders';\n\nexport { PulsingBorder, pulsingBorderPresets } from './shaders/pulsing-border.js';\nexport type { PulsingBorderProps } from './shaders/pulsing-border.js';\nexport type { PulsingBorderUniforms, PulsingBorderParams } from '@paper-design/shaders';\n\nexport { ColorPanels, colorPanelsPresets } from './shaders/color-panels.js';\nexport type { ColorPanelsProps } from './shaders/color-panels.js';\nexport type { ColorPanelsUniforms, ColorPanelsParams } from '@paper-design/shaders';\n\nexport { StaticMeshGradient, staticMeshGradientPresets } from './shaders/static-mesh-gradient.js';\nexport type { StaticMeshGradientProps } from './shaders/static-mesh-gradient.js';\nexport type { StaticMeshGradientUniforms, StaticMeshGradientParams } from '@paper-design/shaders';\n\nexport { StaticRadialGradient, staticRadialGradientPresets } from './shaders/static-radial-gradient.js';\nexport type { StaticRadialGradientProps } from './shaders/static-radial-gradient.js';\nexport type { StaticRadialGradientUniforms, StaticRadialGradientParams } from '@paper-design/shaders';\n\nexport { PaperTexture, paperTexturePresets } from './shaders/paper-texture.js';\nexport type { PaperTextureProps } from './shaders/paper-texture.js';\nexport type { PaperTextureUniforms, PaperTextureParams } from '@paper-design/shaders';\n\nexport { FlutedGlass, flutedGlassPresets } from './shaders/fluted-glass.js';\nexport { type FlutedGlassProps } from './shaders/fluted-glass.js';\nexport { type FlutedGlassUniforms, type FlutedGlassParams } from '@paper-design/shaders';\n\nexport { Water, waterPresets } from './shaders/water.js';\nexport type { WaterProps } from './shaders/water.js';\nexport type { WaterUniforms, WaterParams } from '@paper-design/shaders';\n\nexport { ImageDithering, imageDitheringPresets } from './shaders/image-dithering.js';\nexport type { ImageDitheringProps } from './shaders/image-dithering.js';\nexport type { ImageDitheringUniforms, ImageDitheringParams } from '@paper-design/shaders';\n\nexport { Heatmap, heatmapPresets } from './shaders/heatmap.js';\nexport type { HeatmapProps } from './shaders/heatmap.js';\nexport type { HeatmapUniforms, HeatmapParams } from '@paper-design/shaders';\n\nexport { isPaperShaderElement, getShaderColorFromString } from '@paper-design/shaders';\nexport type { PaperShaderElement, ShaderFit, ShaderSizingParams, ShaderSizingUniforms } from '@paper-design/shaders';\n\nexport {\n colorPanelsMeta,\n dotOrbitMeta,\n godRaysMeta,\n grainGradientMeta,\n meshGradientMeta,\n metaballsMeta,\n pulsingBorderMeta,\n simplexNoiseMeta,\n smokeRingMeta,\n swirlMeta,\n voronoiMeta,\n warpMeta,\n staticMeshGradientMeta,\n staticRadialGradientMeta,\n} from '@paper-design/shaders';\n"],
|
|
5
|
-
"mappings": ";;;;;;AAEA,SAAS,mBAAmB;AAG5B,SAAS,cAAc,2BAA2B;AAIlD,SAAS,WAAW,wBAAwB;AAI5C,SAAS,YAAY,yBAAyB;AAI9C,SAAS,UAAU,uBAAuB;AAI1C,SAAS,SAAS,sBAAsB;AAIxC,SAAS,cAAc,2BAA2B;AAIlD,SAAS,WAAW,wBAAwB;AAI5C,SAAS,OAAO,oBAAoB;AAIpC,SAAS,aAAa,0BAA0B;AAIhD,SAAS,SAAS,sBAAsB;AAIxC,SAAS,MAAM,mBAAmB;AAIlC,SAAS,SAAS,sBAAsB;AAIxC,SAAS,QAAQ,qBAAqB;AAItC,SAAS,OAAO,oBAAoB;AAIpC,SAAS,WAAW,wBAAwB;AAI5C,SAAS,eAAe,4BAA4B;AAIpD,SAAS,aAAa,0BAA0B;AAIhD,SAAS,eAAe,4BAA4B;AAIpD,SAAS,aAAa,0BAA0B;AAIhD,SAAS,oBAAoB,iCAAiC;AAI9D,SAAS,sBAAsB,mCAAmC;AAIlE,SAAS,cAAc,2BAA2B;AAIlD,SAAS,aAAa,0BAA0B;AAChD,eAAsC;AACtC,eAAiE;AAEjE,SAAS,OAAO,oBAAoB;AAIpC,SAAS,gBAAgB,6BAA6B;AAItD,SAAS,SAAS,sBAAsB;AAIxC,SAAS,sBAAsB,gCAAgC;AAG/D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
|
|
4
|
+
"sourcesContent": ["'use client';\n\nexport { ShaderMount } from './shader-mount.js';\nexport type { ShaderMountProps, ShaderComponentProps } from './shader-mount.js';\n\nexport { MeshGradient, meshGradientPresets } from './shaders/mesh-gradient.js';\nexport type { MeshGradientProps } from './shaders/mesh-gradient.js';\nexport type { MeshGradientUniforms, MeshGradientParams } from '@paper-design/shaders';\n\nexport { SmokeRing, smokeRingPresets } from './shaders/smoke-ring.js';\nexport type { SmokeRingProps } from './shaders/smoke-ring.js';\nexport type { SmokeRingUniforms, SmokeRingParams } from '@paper-design/shaders';\n\nexport { NeuroNoise, neuroNoisePresets } from './shaders/neuro-noise.js';\nexport type { NeuroNoiseProps } from './shaders/neuro-noise.js';\nexport type { NeuroNoiseUniforms, NeuroNoiseParams } from '@paper-design/shaders';\n\nexport { DotOrbit, dotOrbitPresets } from './shaders/dot-orbit.js';\nexport type { DotOrbitProps } from './shaders/dot-orbit.js';\nexport type { DotOrbitUniforms, DotOrbitParams } from '@paper-design/shaders';\n\nexport { DotGrid, dotGridPresets } from './shaders/dot-grid.js';\nexport type { DotGridProps } from './shaders/dot-grid.js';\nexport type { DotGridUniforms, DotGridParams } from '@paper-design/shaders';\n\nexport { SimplexNoise, simplexNoisePresets } from './shaders/simplex-noise.js';\nexport type { SimplexNoiseProps } from './shaders/simplex-noise.js';\nexport type { SimplexNoiseUniforms, SimplexNoiseParams } from '@paper-design/shaders';\n\nexport { Metaballs, metaballsPresets } from './shaders/metaballs.js';\nexport type { MetaballsProps } from './shaders/metaballs.js';\nexport type { MetaballsUniforms, MetaballsParams } from '@paper-design/shaders';\n\nexport { Waves, wavesPresets } from './shaders/waves.js';\nexport type { WavesProps } from './shaders/waves.js';\nexport type { WavesUniforms, WavesParams } from '@paper-design/shaders';\n\nexport { PerlinNoise, perlinNoisePresets } from './shaders/perlin-noise.js';\nexport type { PerlinNoiseProps } from './shaders/perlin-noise.js';\nexport type { PerlinNoiseUniforms, PerlinNoiseParams } from '@paper-design/shaders';\n\nexport { Voronoi, voronoiPresets } from './shaders/voronoi.js';\nexport type { VoronoiProps } from './shaders/voronoi.js';\nexport type { VoronoiUniforms, VoronoiParams } from '@paper-design/shaders';\n\nexport { Warp, warpPresets } from './shaders/warp.js';\nexport type { WarpProps } from './shaders/warp.js';\nexport type { WarpUniforms, WarpParams, WarpPattern } from '@paper-design/shaders';\n\nexport { GodRays, godRaysPresets } from './shaders/god-rays.js';\nexport type { GodRaysProps } from './shaders/god-rays.js';\nexport type { GodRaysUniforms, GodRaysParams } from '@paper-design/shaders';\n\nexport { Spiral, spiralPresets } from './shaders/spiral.js';\nexport type { SpiralProps } from './shaders/spiral.js';\nexport type { SpiralUniforms, SpiralParams } from '@paper-design/shaders';\n\nexport { Swirl, swirlPresets } from './shaders/swirl.js';\nexport type { SwirlProps } from './shaders/swirl.js';\nexport type { SwirlUniforms, SwirlParams } from '@paper-design/shaders';\n\nexport { Dithering, ditheringPresets } from './shaders/dithering.js';\nexport type { DitheringProps } from './shaders/dithering.js';\nexport type { DitheringUniforms, DitheringParams } from '@paper-design/shaders';\n\nexport { GrainGradient, grainGradientPresets } from './shaders/grain-gradient.js';\nexport type { GrainGradientProps } from './shaders/grain-gradient.js';\nexport type { GrainGradientUniforms, GrainGradientParams } from '@paper-design/shaders';\n\nexport { LiquidMetal, liquidMetalPresets } from './shaders/liquid-metal.js';\nexport type { LiquidMetalProps } from './shaders/liquid-metal.js';\nexport type { LiquidMetalUniforms, LiquidMetalParams } from '@paper-design/shaders';\n\nexport { PulsingBorder, pulsingBorderPresets } from './shaders/pulsing-border.js';\nexport type { PulsingBorderProps } from './shaders/pulsing-border.js';\nexport type { PulsingBorderUniforms, PulsingBorderParams } from '@paper-design/shaders';\n\nexport { ColorPanels, colorPanelsPresets } from './shaders/color-panels.js';\nexport type { ColorPanelsProps } from './shaders/color-panels.js';\nexport type { ColorPanelsUniforms, ColorPanelsParams } from '@paper-design/shaders';\n\nexport { StaticMeshGradient, staticMeshGradientPresets } from './shaders/static-mesh-gradient.js';\nexport type { StaticMeshGradientProps } from './shaders/static-mesh-gradient.js';\nexport type { StaticMeshGradientUniforms, StaticMeshGradientParams } from '@paper-design/shaders';\n\nexport { StaticRadialGradient, staticRadialGradientPresets } from './shaders/static-radial-gradient.js';\nexport type { StaticRadialGradientProps } from './shaders/static-radial-gradient.js';\nexport type { StaticRadialGradientUniforms, StaticRadialGradientParams } from '@paper-design/shaders';\n\nexport { PaperTexture, paperTexturePresets } from './shaders/paper-texture.js';\nexport type { PaperTextureProps } from './shaders/paper-texture.js';\nexport type { PaperTextureUniforms, PaperTextureParams } from '@paper-design/shaders';\n\nexport { FlutedGlass, flutedGlassPresets } from './shaders/fluted-glass.js';\nexport { type FlutedGlassProps } from './shaders/fluted-glass.js';\nexport { type FlutedGlassUniforms, type FlutedGlassParams } from '@paper-design/shaders';\n\nexport { Water, waterPresets } from './shaders/water.js';\nexport type { WaterProps } from './shaders/water.js';\nexport type { WaterUniforms, WaterParams } from '@paper-design/shaders';\n\nexport { ImageDithering, imageDitheringPresets } from './shaders/image-dithering.js';\nexport type { ImageDitheringProps } from './shaders/image-dithering.js';\nexport type { ImageDitheringUniforms, ImageDitheringParams } from '@paper-design/shaders';\n\nexport { Heatmap, heatmapPresets } from './shaders/heatmap.js';\nexport type { HeatmapProps } from './shaders/heatmap.js';\nexport type { HeatmapUniforms, HeatmapParams } from '@paper-design/shaders';\n\nexport { isPaperShaderElement, getShaderColorFromString } from '@paper-design/shaders';\nexport type { PaperShaderElement, ShaderFit, ShaderSizingParams, ShaderSizingUniforms } from '@paper-design/shaders';\n\nexport {\n colorPanelsMeta,\n dotOrbitMeta,\n godRaysMeta,\n grainGradientMeta,\n meshGradientMeta,\n metaballsMeta,\n pulsingBorderMeta,\n simplexNoiseMeta,\n smokeRingMeta,\n swirlMeta,\n voronoiMeta,\n warpMeta,\n heatmapMeta,\n staticMeshGradientMeta,\n staticRadialGradientMeta,\n} from '@paper-design/shaders';\n"],
|
|
5
|
+
"mappings": ";;;;;;AAEA,SAAS,mBAAmB;AAG5B,SAAS,cAAc,2BAA2B;AAIlD,SAAS,WAAW,wBAAwB;AAI5C,SAAS,YAAY,yBAAyB;AAI9C,SAAS,UAAU,uBAAuB;AAI1C,SAAS,SAAS,sBAAsB;AAIxC,SAAS,cAAc,2BAA2B;AAIlD,SAAS,WAAW,wBAAwB;AAI5C,SAAS,OAAO,oBAAoB;AAIpC,SAAS,aAAa,0BAA0B;AAIhD,SAAS,SAAS,sBAAsB;AAIxC,SAAS,MAAM,mBAAmB;AAIlC,SAAS,SAAS,sBAAsB;AAIxC,SAAS,QAAQ,qBAAqB;AAItC,SAAS,OAAO,oBAAoB;AAIpC,SAAS,WAAW,wBAAwB;AAI5C,SAAS,eAAe,4BAA4B;AAIpD,SAAS,aAAa,0BAA0B;AAIhD,SAAS,eAAe,4BAA4B;AAIpD,SAAS,aAAa,0BAA0B;AAIhD,SAAS,oBAAoB,iCAAiC;AAI9D,SAAS,sBAAsB,mCAAmC;AAIlE,SAAS,cAAc,2BAA2B;AAIlD,SAAS,aAAa,0BAA0B;AAChD,eAAsC;AACtC,eAAiE;AAEjE,SAAS,OAAO,oBAAoB;AAIpC,SAAS,gBAAgB,6BAA6B;AAItD,SAAS,SAAS,sBAAsB;AAIxC,SAAS,sBAAsB,gCAAgC;AAG/D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,10 @@ import React from 'react';
|
|
|
2
2
|
import { type ShaderComponentProps } from '../shader-mount.js';
|
|
3
3
|
import { type HeatmapParams, type ShaderPreset } from '@paper-design/shaders';
|
|
4
4
|
export interface HeatmapProps extends ShaderComponentProps, HeatmapParams {
|
|
5
|
+
/**
|
|
6
|
+
* Suspends the component when the image is being processed.
|
|
7
|
+
*/
|
|
8
|
+
suspendWhenProcessingImage?: boolean;
|
|
5
9
|
}
|
|
6
10
|
export type HeatmapPreset = ShaderPreset<HeatmapParams>;
|
|
7
11
|
export declare const defaultPreset: HeatmapPreset;
|
package/dist/shaders/heatmap.js
CHANGED
|
@@ -12,8 +12,8 @@ import {
|
|
|
12
12
|
defaultObjectSizing,
|
|
13
13
|
toProcessedHeatmap
|
|
14
14
|
} from "@paper-design/shaders";
|
|
15
|
-
import { preload } from "react-dom";
|
|
16
15
|
import { transparentPixel } from "../transparent-pixel.js";
|
|
16
|
+
import { suspend } from "../suspend.js";
|
|
17
17
|
import { jsx } from "react/jsx-runtime";
|
|
18
18
|
const defaultPreset = {
|
|
19
19
|
name: "Default",
|
|
@@ -22,9 +22,9 @@ const defaultPreset = {
|
|
|
22
22
|
scale: 0.75,
|
|
23
23
|
speed: 1,
|
|
24
24
|
frame: 0,
|
|
25
|
-
image: "
|
|
25
|
+
image: "https://shaders.paper.design/images/image-filters/0019.webp",
|
|
26
26
|
contour: 0.5,
|
|
27
|
-
angle:
|
|
27
|
+
angle: 170,
|
|
28
28
|
noise: 0,
|
|
29
29
|
innerGlow: 0.5,
|
|
30
30
|
outerGlow: 0.5,
|
|
@@ -39,7 +39,7 @@ const sepiaPreset = {
|
|
|
39
39
|
scale: 0.75,
|
|
40
40
|
speed: 0.5,
|
|
41
41
|
frame: 0,
|
|
42
|
-
image: "
|
|
42
|
+
image: "https://shaders.paper.design/images/image-filters/0019.webp",
|
|
43
43
|
contour: 0.5,
|
|
44
44
|
angle: 0,
|
|
45
45
|
noise: 0.75,
|
|
@@ -61,6 +61,7 @@ const Heatmap = memo(function HeatmapImpl({
|
|
|
61
61
|
outerGlow = defaultPreset.params.outerGlow,
|
|
62
62
|
colorBack = defaultPreset.params.colorBack,
|
|
63
63
|
colors = defaultPreset.params.colors,
|
|
64
|
+
suspendWhenProcessingImage = false,
|
|
64
65
|
// Sizing props
|
|
65
66
|
fit = defaultPreset.params.fit,
|
|
66
67
|
image = transparentPixel,
|
|
@@ -74,12 +75,23 @@ const Heatmap = memo(function HeatmapImpl({
|
|
|
74
75
|
worldWidth = defaultPreset.params.worldWidth,
|
|
75
76
|
...props
|
|
76
77
|
}) {
|
|
77
|
-
const [processedImage, setProcessedImage] = useState(transparentPixel);
|
|
78
78
|
const imageUrl = typeof image === "string" ? image : image.src;
|
|
79
|
-
|
|
79
|
+
const [processedStateImage, setProcessedStateImage] = useState(transparentPixel);
|
|
80
|
+
let processedImage;
|
|
81
|
+
if (suspendWhenProcessingImage) {
|
|
82
|
+
processedImage = suspend(
|
|
83
|
+
() => toProcessedHeatmap(imageUrl).then((result) => URL.createObjectURL(result.blob)),
|
|
84
|
+
[imageUrl]
|
|
85
|
+
);
|
|
86
|
+
} else {
|
|
87
|
+
processedImage = processedStateImage;
|
|
88
|
+
}
|
|
80
89
|
useLayoutEffect(() => {
|
|
90
|
+
if (suspendWhenProcessingImage) {
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
81
93
|
if (!imageUrl) {
|
|
82
|
-
|
|
94
|
+
setProcessedStateImage(transparentPixel);
|
|
83
95
|
return;
|
|
84
96
|
}
|
|
85
97
|
let url;
|
|
@@ -87,14 +99,14 @@ const Heatmap = memo(function HeatmapImpl({
|
|
|
87
99
|
toProcessedHeatmap(imageUrl).then((result) => {
|
|
88
100
|
if (current) {
|
|
89
101
|
url = URL.createObjectURL(result.blob);
|
|
90
|
-
|
|
102
|
+
setProcessedStateImage(url);
|
|
91
103
|
}
|
|
92
104
|
});
|
|
93
105
|
return () => {
|
|
94
106
|
current = false;
|
|
95
107
|
URL.revokeObjectURL(url);
|
|
96
108
|
};
|
|
97
|
-
}, [imageUrl]);
|
|
109
|
+
}, [imageUrl, suspendWhenProcessingImage]);
|
|
98
110
|
const uniforms = useMemo(
|
|
99
111
|
() => ({
|
|
100
112
|
// Own uniforms
|
|
@@ -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 type ShaderPreset,\n defaultObjectSizing,\n toProcessedHeatmap,\n} from '@paper-design/shaders';\n\nimport {
|
|
5
|
-
"mappings": ";;;;;AAAA,OAAO,SAAS,MAAM,iBAAiB,SAAS,gBAAgB;AAChE,SAAS,mBAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,
|
|
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 type ShaderPreset,\n defaultObjectSizing,\n toProcessedHeatmap,\n} from '@paper-design/shaders';\n\nimport { transparentPixel } from '../transparent-pixel.js';\nimport { suspend } from '../suspend.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 = ShaderPreset<HeatmapParams>;\n\nexport const defaultPreset: HeatmapPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 0.75,\n speed: 1,\n frame: 0,\n image: 'https://shaders.paper.design/images/image-filters/0019.webp',\n contour: 0.5,\n angle: 170,\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 image: 'https://shaders.paper.design/images/image-filters/0019.webp',\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 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 image = transparentPixel,\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 if (suspendWhenProcessingImage) {\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 = useMemo(\n () => ({\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 speed,\n frame,\n contour,\n angle,\n noise,\n innerGlow,\n outerGlow,\n colors,\n colorBack,\n processedImage,\n fit,\n offsetX,\n offsetY,\n originX,\n originY,\n rotation,\n scale,\n worldHeight,\n worldWidth,\n ]\n ) satisfies HeatmapUniforms;\n\n return (\n <ShaderMount {...props} speed={speed} frame={frame} fragmentShader={heatmapFragmentShader} uniforms={uniforms} />\n );\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A cut down version of suspend-react.
|
|
3
|
+
* When paper-shaders only supports React 19+ we can use the use hook instead.
|
|
4
|
+
*/
|
|
5
|
+
type Tuple<T = any> = [T] | T[];
|
|
6
|
+
type Await<T> = T extends Promise<infer V> ? V : never;
|
|
7
|
+
declare const suspend: <Keys extends Tuple<unknown>, Fn extends (...keys: Keys) => Promise<unknown>>(fn: Fn | Promise<unknown>, keys?: Keys) => Await<ReturnType<Fn>>;
|
|
8
|
+
export { suspend };
|
package/dist/suspend.js
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
2
|
+
* Paper Shaders *
|
|
3
|
+
* https://github.com/paper-design/shaders *
|
|
4
|
+
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
|
+
|
|
6
|
+
const isPromise = (promise) => typeof promise === "object" && typeof promise.then === "function";
|
|
7
|
+
const globalCache = [];
|
|
8
|
+
function shallowEqualArrays(arrA, arrB) {
|
|
9
|
+
if (arrA === arrB) return true;
|
|
10
|
+
if (!arrA || !arrB) return false;
|
|
11
|
+
const len = arrA.length;
|
|
12
|
+
if (arrB.length !== len) return false;
|
|
13
|
+
for (let i = 0; i < len; i++) if (arrA[i] !== arrB[i]) return false;
|
|
14
|
+
return true;
|
|
15
|
+
}
|
|
16
|
+
function query(fn, keys = null) {
|
|
17
|
+
if (keys === null) keys = [fn];
|
|
18
|
+
for (const entry2 of globalCache) {
|
|
19
|
+
if (shallowEqualArrays(keys, entry2.keys)) {
|
|
20
|
+
if (Object.prototype.hasOwnProperty.call(entry2, "error")) throw entry2.error;
|
|
21
|
+
if (Object.prototype.hasOwnProperty.call(entry2, "response")) {
|
|
22
|
+
return entry2.response;
|
|
23
|
+
}
|
|
24
|
+
throw entry2.promise;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
const entry = {
|
|
28
|
+
keys,
|
|
29
|
+
promise: (
|
|
30
|
+
// Execute the promise
|
|
31
|
+
(isPromise(fn) ? fn : fn(...keys)).then((response) => {
|
|
32
|
+
entry.response = response;
|
|
33
|
+
}).catch((error) => entry.error = error)
|
|
34
|
+
)
|
|
35
|
+
};
|
|
36
|
+
globalCache.push(entry);
|
|
37
|
+
throw entry.promise;
|
|
38
|
+
}
|
|
39
|
+
const suspend = (fn, keys) => query(fn, keys);
|
|
40
|
+
export {
|
|
41
|
+
suspend
|
|
42
|
+
};
|
|
43
|
+
//# sourceMappingURL=suspend.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/suspend.tsx"],
|
|
4
|
+
"sourcesContent": ["/**\n * A cut down version of suspend-react.\n * When paper-shaders only supports React 19+ we can use the use hook instead.\n */\n\ntype Tuple<T = any> = [T] | T[];\ntype Await<T> = T extends Promise<infer V> ? V : never;\ntype Cache<Keys extends Tuple<unknown>> = {\n promise: Promise<unknown>;\n keys: Keys;\n error?: any;\n response?: unknown;\n};\n\nconst isPromise = (promise: any): promise is Promise<unknown> =>\n typeof promise === 'object' && typeof (promise as Promise<any>).then === 'function';\n\nconst globalCache: Cache<Tuple<unknown>>[] = [];\n\nfunction shallowEqualArrays(arrA: any[], arrB: any[]) {\n if (arrA === arrB) return true;\n if (!arrA || !arrB) return false;\n const len = arrA.length;\n if (arrB.length !== len) return false;\n for (let i = 0; i < len; i++) if (arrA[i] !== arrB[i]) return false;\n return true;\n}\n\nfunction query<Keys extends Tuple<unknown>, Fn extends (...keys: Keys) => Promise<unknown>>(\n fn: Fn | Promise<unknown>,\n keys: Keys = null as unknown as Keys\n) {\n // If no keys were given, the function is the key\n if (keys === null) keys = [fn] as unknown as Keys;\n\n for (const entry of globalCache) {\n // Find a match\n if (shallowEqualArrays(keys, entry.keys)) {\n // If an error occurred, throw\n if (Object.prototype.hasOwnProperty.call(entry, 'error')) throw entry.error;\n // If a response was successful, return\n if (Object.prototype.hasOwnProperty.call(entry, 'response')) {\n return entry.response as Await<ReturnType<Fn>>;\n }\n // If the promise is still unresolved, throw\n throw entry.promise;\n }\n }\n\n // The request is new or has changed.\n const entry: Cache<Keys> = {\n keys,\n promise:\n // Execute the promise\n (isPromise(fn) ? fn : fn(...keys))\n // When it resolves, store its value\n .then((response) => {\n entry.response = response;\n })\n // Store caught errors, they will be thrown in the render-phase to bubble into an error-bound\n .catch((error) => (entry.error = error)),\n };\n // Register the entry\n globalCache.push(entry);\n // And throw the promise, this yields control back to React\n throw entry.promise;\n}\n\nconst suspend = <Keys extends Tuple<unknown>, Fn extends (...keys: Keys) => Promise<unknown>>(\n fn: Fn | Promise<unknown>,\n keys?: Keys\n): Await<ReturnType<Fn>> => query(fn, keys);\n\nexport { suspend };\n"],
|
|
5
|
+
"mappings": ";;;;;AAcA,MAAM,YAAY,CAAC,YACjB,OAAO,YAAY,YAAY,OAAQ,QAAyB,SAAS;AAE3E,MAAM,cAAuC,CAAC;AAE9C,SAAS,mBAAmB,MAAa,MAAa;AACpD,MAAI,SAAS,KAAM,QAAO;AAC1B,MAAI,CAAC,QAAQ,CAAC,KAAM,QAAO;AAC3B,QAAM,MAAM,KAAK;AACjB,MAAI,KAAK,WAAW,IAAK,QAAO;AAChC,WAAS,IAAI,GAAG,IAAI,KAAK,IAAK,KAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAG,QAAO;AAC9D,SAAO;AACT;AAEA,SAAS,MACP,IACA,OAAa,MACb;AAEA,MAAI,SAAS,KAAM,QAAO,CAAC,EAAE;AAE7B,aAAWA,UAAS,aAAa;AAE/B,QAAI,mBAAmB,MAAMA,OAAM,IAAI,GAAG;AAExC,UAAI,OAAO,UAAU,eAAe,KAAKA,QAAO,OAAO,EAAG,OAAMA,OAAM;AAEtE,UAAI,OAAO,UAAU,eAAe,KAAKA,QAAO,UAAU,GAAG;AAC3D,eAAOA,OAAM;AAAA,MACf;AAEA,YAAMA,OAAM;AAAA,IACd;AAAA,EACF;AAGA,QAAM,QAAqB;AAAA,IACzB;AAAA,IACA;AAAA;AAAA,OAEG,UAAU,EAAE,IAAI,KAAK,GAAG,GAAG,IAAI,GAE7B,KAAK,CAAC,aAAa;AAClB,cAAM,WAAW;AAAA,MACnB,CAAC,EAEA,MAAM,CAAC,UAAW,MAAM,QAAQ,KAAM;AAAA;AAAA,EAC7C;AAEA,cAAY,KAAK,KAAK;AAEtB,QAAM,MAAM;AACd;AAEA,MAAM,UAAU,CACd,IACA,SAC0B,MAAM,IAAI,IAAI;",
|
|
6
|
+
"names": ["entry"]
|
|
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.51",
|
|
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.51"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@types/react": "19.1.0"
|