shaders 2.5.127 → 2.5.129
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/core/{Blur-5_t3tR_g.js → Blur-LkvIPGj0.js} +1 -1
- package/dist/core/{ChannelBlur-DWgS3nhn.js → ChannelBlur-WTXL0B7t.js} +1 -1
- package/dist/core/Exposure-CFn2J_t3.js +29 -0
- package/dist/core/{Glass-CXT1jdLw.js → Glass-Cy1wvfuu.js} +1 -1
- package/dist/core/{Glow-5PP4-rM9.js → Glow-CJ7MTzc4.js} +6 -4
- package/dist/core/{ProgressiveBlur-BJwJ5mE0.js → ProgressiveBlur-jvN5Adf4.js} +1 -1
- package/dist/core/{ReflectivePlane-UIT4xlmn.js → ReflectivePlane-CGXUsPVJ.js} +1 -1
- package/dist/core/ThinFilm-CUsi8eSg.js +305 -0
- package/dist/core/{TiltShift-DtQ3dRL-.js → TiltShift-e-1ia_HN.js} +1 -1
- package/dist/core/{VideoTexture-ClutlOqj.js → VideoTexture-FmV1l91c.js} +1 -1
- package/dist/core/{WebcamTexture-D4e06ajM.js → WebcamTexture-DlS4MCDm.js} +1 -1
- package/dist/core/blendModes/linearDodge.d.ts.map +1 -1
- package/dist/core/{computeBlur-CprKe0xa.js → computeBlur-DNlXBk7b.js} +7 -3
- package/dist/core/effects/thinFilm.d.ts +81 -0
- package/dist/core/effects/thinFilm.d.ts.map +1 -0
- package/dist/core/index.js +91 -107
- package/dist/core/registry.js +89 -87
- package/dist/core/renderer.d.ts.map +1 -1
- package/dist/core/shaderRegistry-RdJlP7Pq.js +276 -0
- package/dist/core/shaderRegistry.d.ts.map +1 -1
- package/dist/core/shaders/Blur/index.js +2 -2
- package/dist/core/shaders/ChannelBlur/index.js +2 -2
- package/dist/core/shaders/Exposure/index.d.ts +13 -0
- package/dist/core/shaders/Exposure/index.d.ts.map +1 -0
- package/dist/core/shaders/Exposure/index.js +2 -0
- package/dist/core/shaders/FallingLines/index.js +1 -1
- package/dist/core/shaders/FilmGrain/index.js +1 -1
- package/dist/core/shaders/FloatingParticles/index.js +1 -1
- package/dist/core/shaders/FlowField/index.js +1 -1
- package/dist/core/shaders/Flower/index.js +1 -1
- package/dist/core/shaders/FlowingGradient/index.js +1 -1
- package/dist/core/shaders/FlutedGlass/index.js +1 -1
- package/dist/core/shaders/Fog/index.js +1 -1
- package/dist/core/shaders/Form3D/index.js +1 -1
- package/dist/core/shaders/FractalNoise/index.js +1 -1
- package/dist/core/shaders/Glass/index.js +2 -2
- package/dist/core/shaders/GlassTiles/index.js +1 -1
- package/dist/core/shaders/Glitch/index.js +1 -1
- package/dist/core/shaders/Glow/index.d.ts.map +1 -1
- package/dist/core/shaders/Glow/index.js +2 -2
- package/dist/core/shaders/Godrays/index.js +1 -1
- package/dist/core/shaders/Grayscale/index.js +1 -1
- package/dist/core/shaders/Grid/index.js +1 -1
- package/dist/core/shaders/GridDistortion/index.js +1 -1
- package/dist/core/shaders/Group/index.js +1 -1
- package/dist/core/shaders/Halftone/index.js +1 -1
- package/dist/core/shaders/HexGrid/index.js +1 -1
- package/dist/core/shaders/HueShift/index.js +1 -1
- package/dist/core/shaders/ImageTexture/index.js +1 -1
- package/dist/core/shaders/Invert/index.js +1 -1
- package/dist/core/shaders/Kaleidoscope/index.js +1 -1
- package/dist/core/shaders/LensFlare/index.js +1 -1
- package/dist/core/shaders/LinearBlur/index.js +1 -1
- package/dist/core/shaders/LinearGradient/index.js +1 -1
- package/dist/core/shaders/Liquify/index.js +1 -1
- package/dist/core/shaders/Marble/index.js +1 -1
- package/dist/core/shaders/Mirror/index.js +1 -1
- package/dist/core/shaders/MultiPointGradient/index.js +1 -1
- package/dist/core/shaders/Neon/index.js +1 -1
- package/dist/core/shaders/Paper/index.js +1 -1
- package/dist/core/shaders/Perspective/index.js +1 -1
- package/dist/core/shaders/Pixelate/index.js +1 -1
- package/dist/core/shaders/Plasma/index.js +1 -1
- package/dist/core/shaders/PolarCoordinates/index.js +1 -1
- package/dist/core/shaders/Polygon/index.js +1 -1
- package/dist/core/shaders/Posterize/index.js +1 -1
- package/dist/core/shaders/ProgressiveBlur/index.js +2 -2
- package/dist/core/shaders/RadialGradient/index.js +1 -1
- package/dist/core/shaders/RectangularCoordinates/index.js +1 -1
- package/dist/core/shaders/ReflectivePlane/index.js +2 -2
- package/dist/core/shaders/Ring/index.js +1 -1
- package/dist/core/shaders/Ripples/index.js +1 -1
- package/dist/core/shaders/RoundedRect/index.js +1 -1
- package/dist/core/shaders/Saturation/index.js +1 -1
- package/dist/core/shaders/Sharpness/index.js +1 -1
- package/dist/core/shaders/Shatter/index.js +1 -1
- package/dist/core/shaders/SimplexNoise/index.js +1 -1
- package/dist/core/shaders/SineWave/index.js +1 -1
- package/dist/core/shaders/Smoke/index.js +1 -1
- package/dist/core/shaders/SmokeFill/index.js +1 -1
- package/dist/core/shaders/Solarize/index.js +1 -1
- package/dist/core/shaders/SolidColor/index.js +1 -1
- package/dist/core/shaders/Spherize/index.js +1 -1
- package/dist/core/shaders/Spiral/index.js +1 -1
- package/dist/core/shaders/Star/index.js +1 -1
- package/dist/core/shaders/Strands/index.js +1 -1
- package/dist/core/shaders/Stretch/index.js +1 -1
- package/dist/core/shaders/Stripes/index.js +1 -1
- package/dist/core/shaders/StudioBackground/index.js +1 -1
- package/dist/core/shaders/SunBurst/index.js +1 -1
- package/dist/core/shaders/Swirl/index.js +1 -1
- package/dist/core/shaders/ThinFilm/index.d.ts +130 -0
- package/dist/core/shaders/ThinFilm/index.d.ts.map +1 -0
- package/dist/core/shaders/ThinFilm/index.js +6 -0
- package/dist/core/shaders/TiltShift/index.js +2 -2
- package/dist/core/shaders/Tint/index.js +1 -1
- package/dist/core/shaders/Trapezoid/index.js +1 -1
- package/dist/core/shaders/Tritone/index.js +1 -1
- package/dist/core/shaders/Truchet/index.js +1 -1
- package/dist/core/shaders/Twirl/index.js +1 -1
- package/dist/core/shaders/VHS/index.js +1 -1
- package/dist/core/shaders/Vesica/index.js +1 -1
- package/dist/core/shaders/Vibrance/index.js +1 -1
- package/dist/core/shaders/VideoTexture/index.js +2 -2
- package/dist/core/shaders/Vignette/index.js +1 -1
- package/dist/core/shaders/Voronoi/index.js +1 -1
- package/dist/core/shaders/WaveDistortion/index.js +1 -1
- package/dist/core/shaders/Weave/index.js +1 -1
- package/dist/core/shaders/WebcamTexture/index.js +2 -2
- package/dist/core/shaders/WorleyNoise/index.js +1 -1
- package/dist/core/shaders/ZoomBlur/index.js +1 -1
- package/dist/core/utilities/computeBlur.d.ts.map +1 -1
- package/dist/js/bundle.js +216 -216
- package/dist/js/createShader.js +1 -1
- package/dist/js/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/js/utils/generatePresetCode.js +31 -0
- package/dist/react/Exposure.js +217 -0
- package/dist/react/Preview.js +2 -0
- package/dist/react/Shader.js +1 -1
- package/dist/react/ThinFilm.js +217 -0
- package/dist/react/bundle.js +218 -218
- package/dist/react/components/Exposure.d.ts +33 -0
- package/dist/react/components/Exposure.d.ts.map +1 -0
- package/dist/react/components/ThinFilm.d.ts +41 -0
- package/dist/react/components/ThinFilm.d.ts.map +1 -0
- package/dist/react/engine/Preview.d.ts.map +1 -1
- package/dist/react/index.d.ts +2 -0
- package/dist/react/index.d.ts.map +1 -1
- package/dist/react/index.js +3 -1
- package/dist/react/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/react/utils/generatePresetCode.js +31 -0
- package/dist/registry.js +590 -0
- package/dist/solid/components/Exposure.d.ts +30 -0
- package/dist/solid/components/Exposure.d.ts.map +1 -0
- package/dist/solid/components/Exposure.js +228 -0
- package/dist/solid/components/ThinFilm.d.ts +38 -0
- package/dist/solid/components/ThinFilm.d.ts.map +1 -0
- package/dist/solid/components/ThinFilm.js +228 -0
- package/dist/solid/engine/Preview.d.ts.map +1 -1
- package/dist/solid/engine/Preview.js +204 -200
- package/dist/solid/engine/Shader.js +1 -1
- package/dist/solid/index.d.ts +2 -0
- package/dist/solid/index.d.ts.map +1 -1
- package/dist/solid/index.js +172 -168
- package/dist/solid/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/solid/utils/generatePresetCode.js +31 -0
- package/dist/svelte/components/Exposure.svelte.d.ts +20 -0
- package/dist/svelte/components/ThinFilm.svelte.d.ts +28 -0
- package/dist/svelte/index.d.ts +2 -0
- package/dist/svelte/index.js +1033 -633
- package/dist/svelte/source/components/Exposure.svelte +326 -0
- package/dist/svelte/source/components/ThinFilm.svelte +334 -0
- package/dist/svelte/source/engine/Preview.svelte +4 -0
- package/dist/svelte/source/index.js +2 -0
- package/dist/svelte/utils/generatePresetCode.js +31 -0
- package/dist/vue/Exposure.js +3 -0
- package/dist/vue/Exposure.vue_vue_type_script_setup_true_lang.js +213 -0
- package/dist/vue/Preview.vue_vue_type_script_setup_true_lang.js +4 -0
- package/dist/vue/Shader.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/vue/ThinFilm.js +3 -0
- package/dist/vue/ThinFilm.vue_vue_type_script_setup_true_lang.js +231 -0
- package/dist/vue/components/Exposure.vue.d.ts +55 -0
- package/dist/vue/components/Exposure.vue.d.ts.map +1 -0
- package/dist/vue/components/ThinFilm.vue.d.ts +63 -0
- package/dist/vue/components/ThinFilm.vue.d.ts.map +1 -0
- package/dist/vue/index.d.ts +2 -0
- package/dist/vue/index.d.ts.map +1 -1
- package/dist/vue/index.js +3 -1
- package/dist/vue/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/vue/utils/generatePresetCode.js +31 -0
- package/package.json +17 -1
- package/dist/core/shaderRegistry-Brvv9sO8.js +0 -272
- /package/dist/core/{FallingLines-DqIZ8wTH.js → FallingLines-9elMmSlj.js} +0 -0
- /package/dist/core/{FilmGrain-DdV7_b8g.js → FilmGrain-DIydVgOW.js} +0 -0
- /package/dist/core/{FloatingParticles-LMsFTJKp.js → FloatingParticles-B068TLIi.js} +0 -0
- /package/dist/core/{FlowField-D3CAHBBG.js → FlowField-CeZjhyEo.js} +0 -0
- /package/dist/core/{Flower-BbRNrXIa.js → Flower-DSr0JWa2.js} +0 -0
- /package/dist/core/{FlowingGradient-BRQ_K-k3.js → FlowingGradient-Bd8KBK5P.js} +0 -0
- /package/dist/core/{FlutedGlass-CyFWN_SM.js → FlutedGlass-BJtMfV2c.js} +0 -0
- /package/dist/core/{Fog-CLGVVVeo.js → Fog-BQuVDReH.js} +0 -0
- /package/dist/core/{Form3D-8tPyUgh4.js → Form3D-DOek31CJ.js} +0 -0
- /package/dist/core/{FractalNoise-Ccufnbw6.js → FractalNoise-Dyhbvx9a.js} +0 -0
- /package/dist/core/{GlassTiles-CXJHjEBe.js → GlassTiles-Bb3cuOkr.js} +0 -0
- /package/dist/core/{Glitch-Bg9W-KNm.js → Glitch-zqdbCc2E.js} +0 -0
- /package/dist/core/{Godrays-DHXKsw5B.js → Godrays-DdSLZtBs.js} +0 -0
- /package/dist/core/{Grayscale-DgXoUcmg.js → Grayscale-BC40hfXH.js} +0 -0
- /package/dist/core/{Grid-DwyhjFAT.js → Grid-Lc4S0Hmp.js} +0 -0
- /package/dist/core/{GridDistortion-DJ8S-96Y.js → GridDistortion-DQcPYbXS.js} +0 -0
- /package/dist/core/{Group-DmgNNlDd.js → Group-BeZhHbOT.js} +0 -0
- /package/dist/core/{Halftone-x9boWkFW.js → Halftone-CsblgxnY.js} +0 -0
- /package/dist/core/{HexGrid-BUsgyF8P.js → HexGrid-DWRNPMET.js} +0 -0
- /package/dist/core/{HueShift-D3_5D7jx.js → HueShift-C-p9W5sr.js} +0 -0
- /package/dist/core/{ImageTexture-6ZzBt79u.js → ImageTexture-bqgQxAt9.js} +0 -0
- /package/dist/core/{Invert-kXxY97QJ.js → Invert-D-RVP34v.js} +0 -0
- /package/dist/core/{Kaleidoscope-D4jRcZCt.js → Kaleidoscope-HQNQrRP_.js} +0 -0
- /package/dist/core/{LensFlare-D7vypE2Q.js → LensFlare-DtES749p.js} +0 -0
- /package/dist/core/{LinearBlur-2hspd2YP.js → LinearBlur-6mCJ9fY5.js} +0 -0
- /package/dist/core/{LinearGradient-glCc9IaB.js → LinearGradient-DIbCAHc7.js} +0 -0
- /package/dist/core/{Liquify-uZjs0wcu.js → Liquify-8dcdv2Sl.js} +0 -0
- /package/dist/core/{Marble-DkHLcqFD.js → Marble-DX29RG-p.js} +0 -0
- /package/dist/core/{Mirror-Dv5fOEp6.js → Mirror-BM2xf3Nr.js} +0 -0
- /package/dist/core/{MultiPointGradient-Dvt1GUiv.js → MultiPointGradient-BzM24vnR.js} +0 -0
- /package/dist/core/{Neon-DQDB7hAE.js → Neon-nPiMi3wt.js} +0 -0
- /package/dist/core/{Paper-DNP2-hPM.js → Paper-Ddpe8-EI.js} +0 -0
- /package/dist/core/{Perspective-CAIchX9p.js → Perspective-BIKpqd4H.js} +0 -0
- /package/dist/core/{Pixelate-BbT3Rrf2.js → Pixelate-Cp0-lwkG.js} +0 -0
- /package/dist/core/{Plasma-D9rhkH2y.js → Plasma-M--gLd1Q.js} +0 -0
- /package/dist/core/{PolarCoordinates-2RBCk-fo.js → PolarCoordinates-C42rlD2q.js} +0 -0
- /package/dist/core/{Polygon-C6_siOs0.js → Polygon-CKqH0ApY.js} +0 -0
- /package/dist/core/{Posterize-DNxTRgvF.js → Posterize-B6ZhRkH2.js} +0 -0
- /package/dist/core/{RadialGradient-CQIctl__.js → RadialGradient-SHxJ9ZNF.js} +0 -0
- /package/dist/core/{RectangularCoordinates-F2VzXmal.js → RectangularCoordinates-Dw6Xr9uV.js} +0 -0
- /package/dist/core/{Ring-UT__kmzY.js → Ring-V4sEHwwm.js} +0 -0
- /package/dist/core/{Ripples-CWVLSUP0.js → Ripples-DC1y3YuP.js} +0 -0
- /package/dist/core/{RoundedRect-BPWHTT1j.js → RoundedRect-JY2z6YEH.js} +0 -0
- /package/dist/core/{Saturation-DFOp2yD9.js → Saturation-ChJ9IWnl.js} +0 -0
- /package/dist/core/{Sharpness-PIWR4gYc.js → Sharpness-C1ufX8S-.js} +0 -0
- /package/dist/core/{Shatter-CUYQp-qy.js → Shatter-Du5THcwZ.js} +0 -0
- /package/dist/core/{SimplexNoise-LAxWw8fJ.js → SimplexNoise--vwIZVu0.js} +0 -0
- /package/dist/core/{SineWave-CEQWxC9Q.js → SineWave-BIVPG3oc.js} +0 -0
- /package/dist/core/{Smoke-DO4yylWk.js → Smoke-DSBQreo0.js} +0 -0
- /package/dist/core/{SmokeFill-Dm0sZS5F.js → SmokeFill-Dy-0kjsX.js} +0 -0
- /package/dist/core/{Solarize-mE7LU1li.js → Solarize-BymZlSu0.js} +0 -0
- /package/dist/core/{SolidColor-BljkSdvg.js → SolidColor-D8XC4aoJ.js} +0 -0
- /package/dist/core/{Spherize-DARagREe.js → Spherize-tRTB4WdO.js} +0 -0
- /package/dist/core/{Spiral-CumsIpkp.js → Spiral-CiDp2Tg2.js} +0 -0
- /package/dist/core/{Star-8fAlzR9L.js → Star-Cp4dt6Fl.js} +0 -0
- /package/dist/core/{Strands-BB4RIsFz.js → Strands-V3q8N-y1.js} +0 -0
- /package/dist/core/{Stretch-3S2atBkJ.js → Stretch-CTgtc3nG.js} +0 -0
- /package/dist/core/{Stripes-BGFVSZIt.js → Stripes-CZV6oGMy.js} +0 -0
- /package/dist/core/{StudioBackground-BtJ6b1Ki.js → StudioBackground-CWSHq6vE.js} +0 -0
- /package/dist/core/{SunBurst-BJRFFYhs.js → SunBurst-CskZwXc3.js} +0 -0
- /package/dist/core/{Swirl-fkUEZ2TQ.js → Swirl-CyGfVZ8n.js} +0 -0
- /package/dist/core/{Tint-W_EvzN1-.js → Tint-R7y5CJ4U.js} +0 -0
- /package/dist/core/{Trapezoid-cQzS6-bh.js → Trapezoid-BXzH--z9.js} +0 -0
- /package/dist/core/{Tritone-B3hI2nAi.js → Tritone-CF4Oj1sl.js} +0 -0
- /package/dist/core/{Truchet-s9PmowCP.js → Truchet-BL4jzZDX.js} +0 -0
- /package/dist/core/{Twirl-UDDXGkFl.js → Twirl-BVLPHKJD.js} +0 -0
- /package/dist/core/{VHS-DW1H7Wuy.js → VHS-B2IBdQgX.js} +0 -0
- /package/dist/core/{Vesica-ChQBYWuw.js → Vesica-DzIEa3aJ.js} +0 -0
- /package/dist/core/{Vibrance-DUj7hwzE.js → Vibrance-jrvT49Du.js} +0 -0
- /package/dist/core/{Vignette-F9yxi-UM.js → Vignette-ng_5gjXc.js} +0 -0
- /package/dist/core/{Voronoi-D8HHP_WR.js → Voronoi-C8iIU7AT.js} +0 -0
- /package/dist/core/{WaveDistortion-MbB-Kgjz.js → WaveDistortion-Crt9JSXN.js} +0 -0
- /package/dist/core/{Weave-ou5shgl3.js → Weave-CFmLkEaq.js} +0 -0
- /package/dist/core/{WorleyNoise-Uf6IPm7A.js → WorleyNoise-CEZiaVAN.js} +0 -0
- /package/dist/core/{ZoomBlur-DJ-RNKHM.js → ZoomBlur-DTVSwIvc.js} +0 -0
- /package/dist/core/{browser-NUM-x2tw.js → browser-CDogs09U.js} +0 -0
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
import { createComponent, memo, template, setAttribute, insert, Portal, spread, mergeProps, use } from "solid-js/web";
|
|
2
|
+
import { splitProps, createUniqueId, createMemo, createSignal, onMount, onCleanup, createEffect } from "solid-js";
|
|
3
|
+
import { createUniformsMap } from "../../core/index.js";
|
|
4
|
+
import { setColorSpaceMode } from "../../core/utilities/transformations/index.js";
|
|
5
|
+
import { componentDefinition } from "../../core/shaders/Exposure/index.js";
|
|
6
|
+
import { useShaderContext, ShaderContext } from "../engine/Shader.js";
|
|
7
|
+
var _tmpl$ = /* @__PURE__ */ template(`<span style=display:contents>`), _tmpl$2 = /* @__PURE__ */ template(`<canvas>`);
|
|
8
|
+
let _experimentalWarnedOnce = false;
|
|
9
|
+
if (componentDefinition.experimental && !_experimentalWarnedOnce) {
|
|
10
|
+
_experimentalWarnedOnce = true;
|
|
11
|
+
const _e = componentDefinition.experimental;
|
|
12
|
+
console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, "color: #f59e0b; font-weight: bold");
|
|
13
|
+
}
|
|
14
|
+
function isPropDriver(value) {
|
|
15
|
+
return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
|
|
16
|
+
}
|
|
17
|
+
const DEFAULT_TRANSFORM = {
|
|
18
|
+
offsetX: 0,
|
|
19
|
+
offsetY: 0,
|
|
20
|
+
rotation: 0,
|
|
21
|
+
scale: 1,
|
|
22
|
+
anchorX: 0.5,
|
|
23
|
+
anchorY: 0.5,
|
|
24
|
+
edges: "transparent"
|
|
25
|
+
};
|
|
26
|
+
const defaultProps = {
|
|
27
|
+
blendMode: "normal",
|
|
28
|
+
visible: true
|
|
29
|
+
// opacity intentionally has no default - handled by renderer
|
|
30
|
+
// transform intentionally has no default - handled by effectiveTransform
|
|
31
|
+
};
|
|
32
|
+
try {
|
|
33
|
+
if (componentDefinition && componentDefinition.props) {
|
|
34
|
+
Object.entries(componentDefinition.props).forEach(([key, config]) => {
|
|
35
|
+
const propConfig = config;
|
|
36
|
+
if (propConfig && typeof propConfig === "object" && "default" in propConfig) {
|
|
37
|
+
defaultProps[key] = propConfig.default;
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
} catch (e) {
|
|
42
|
+
console.warn("Error extracting default props:", e);
|
|
43
|
+
}
|
|
44
|
+
function ShaderComponent(props) {
|
|
45
|
+
const [local, otherProps] = splitProps(props, ["children"]);
|
|
46
|
+
const context = useShaderContext();
|
|
47
|
+
const {
|
|
48
|
+
shaderParentId: parentId,
|
|
49
|
+
shaderNodeRegister: parentRegister,
|
|
50
|
+
shaderUniformUpdate: parentUniformUpdate,
|
|
51
|
+
shaderMetadataUpdate: parentMetadataUpdate,
|
|
52
|
+
shaderColorSpace
|
|
53
|
+
} = context;
|
|
54
|
+
const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || createUniqueId();
|
|
55
|
+
const effectiveProps = createMemo(() => {
|
|
56
|
+
let baseProps = {
|
|
57
|
+
...defaultProps
|
|
58
|
+
};
|
|
59
|
+
for (const [key, value] of Object.entries(otherProps)) {
|
|
60
|
+
if (value !== void 0 && !isPropDriver(value)) {
|
|
61
|
+
baseProps[key] = value;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
return baseProps;
|
|
65
|
+
});
|
|
66
|
+
const effectiveTransform = createMemo(() => ({
|
|
67
|
+
...DEFAULT_TRANSFORM,
|
|
68
|
+
...props.transform
|
|
69
|
+
}));
|
|
70
|
+
const mapsFromProps = createMemo(() => {
|
|
71
|
+
const maps = {};
|
|
72
|
+
for (const [key, value] of Object.entries(otherProps)) {
|
|
73
|
+
if (isPropDriver(value)) maps[key] = value;
|
|
74
|
+
}
|
|
75
|
+
return Object.keys(maps).length > 0 ? maps : void 0;
|
|
76
|
+
});
|
|
77
|
+
let uniformsMap = null;
|
|
78
|
+
const getUniformsMap = () => {
|
|
79
|
+
if (!uniformsMap) {
|
|
80
|
+
setColorSpaceMode(shaderColorSpace);
|
|
81
|
+
uniformsMap = createUniformsMap(componentDefinition, effectiveProps(), instanceId);
|
|
82
|
+
}
|
|
83
|
+
return uniformsMap;
|
|
84
|
+
};
|
|
85
|
+
const childContextValue = createMemo(() => ({
|
|
86
|
+
...context,
|
|
87
|
+
shaderParentId: instanceId
|
|
88
|
+
}));
|
|
89
|
+
const isCapturesDOM = !!componentDefinition.capturesDOM;
|
|
90
|
+
let captureCanvasEl;
|
|
91
|
+
const [captureSize, setCaptureSize] = createSignal({
|
|
92
|
+
w: typeof window !== "undefined" ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0,
|
|
93
|
+
h: typeof window !== "undefined" ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0
|
|
94
|
+
});
|
|
95
|
+
if (isCapturesDOM) {
|
|
96
|
+
const onWinResize = () => {
|
|
97
|
+
const d = Math.min(window.devicePixelRatio, 2);
|
|
98
|
+
setCaptureSize({
|
|
99
|
+
w: Math.round(window.innerWidth * d),
|
|
100
|
+
h: Math.round(window.innerHeight * d)
|
|
101
|
+
});
|
|
102
|
+
};
|
|
103
|
+
onMount(() => window.addEventListener("resize", onWinResize));
|
|
104
|
+
onCleanup(() => window.removeEventListener("resize", onWinResize));
|
|
105
|
+
}
|
|
106
|
+
let markerRef;
|
|
107
|
+
let detectedRenderOrder = void 0;
|
|
108
|
+
let isRegistered = false;
|
|
109
|
+
onMount(() => {
|
|
110
|
+
const uniforms = getUniformsMap();
|
|
111
|
+
if (!uniforms) return;
|
|
112
|
+
try {
|
|
113
|
+
const metadata = {
|
|
114
|
+
blendMode: props.blendMode || "normal",
|
|
115
|
+
opacity: props.opacity,
|
|
116
|
+
visible: props.visible === false ? false : true,
|
|
117
|
+
id: props.id,
|
|
118
|
+
mask: props.maskSource ? {
|
|
119
|
+
source: props.maskSource,
|
|
120
|
+
type: props.maskType || "alpha"
|
|
121
|
+
} : void 0,
|
|
122
|
+
maps: mapsFromProps(),
|
|
123
|
+
renderOrder: props.renderOrder ?? detectedRenderOrder,
|
|
124
|
+
transform: effectiveTransform()
|
|
125
|
+
};
|
|
126
|
+
parentRegister(instanceId, componentDefinition.fragmentNode, parentId, metadata, uniforms, componentDefinition, isCapturesDOM ? captureCanvasEl : void 0);
|
|
127
|
+
isRegistered = true;
|
|
128
|
+
if (props.renderOrder === void 0 && markerRef) {
|
|
129
|
+
const parent = markerRef.parentElement;
|
|
130
|
+
if (parent) {
|
|
131
|
+
const siblings = parent.querySelectorAll(":scope > [data-shader-id]");
|
|
132
|
+
const position = Array.from(siblings).indexOf(markerRef);
|
|
133
|
+
if (position >= 0) {
|
|
134
|
+
detectedRenderOrder = position;
|
|
135
|
+
parentMetadataUpdate(instanceId, {
|
|
136
|
+
renderOrder: position
|
|
137
|
+
});
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
} catch (error) {
|
|
142
|
+
console.error("Error registering shader node:", error);
|
|
143
|
+
}
|
|
144
|
+
});
|
|
145
|
+
onCleanup(() => {
|
|
146
|
+
isRegistered = false;
|
|
147
|
+
parentRegister(instanceId, null, null, null, null);
|
|
148
|
+
});
|
|
149
|
+
createEffect(() => {
|
|
150
|
+
if (!isRegistered) return;
|
|
151
|
+
const uniforms = getUniformsMap();
|
|
152
|
+
if (!uniforms) return;
|
|
153
|
+
try {
|
|
154
|
+
const props_snapshot = effectiveProps();
|
|
155
|
+
Object.entries(uniforms).forEach(([propName, uniformData]) => {
|
|
156
|
+
if (!uniformData || typeof uniformData !== "object") return;
|
|
157
|
+
const {
|
|
158
|
+
uniform
|
|
159
|
+
} = uniformData;
|
|
160
|
+
if ((uniform == null ? void 0 : uniform.value) !== void 0 && propName in props_snapshot) {
|
|
161
|
+
const newValue = props_snapshot[propName];
|
|
162
|
+
parentUniformUpdate(instanceId, propName, newValue);
|
|
163
|
+
}
|
|
164
|
+
});
|
|
165
|
+
} catch (error) {
|
|
166
|
+
console.error("Error updating uniforms:", error);
|
|
167
|
+
}
|
|
168
|
+
});
|
|
169
|
+
createEffect(() => {
|
|
170
|
+
if (!isRegistered) return;
|
|
171
|
+
try {
|
|
172
|
+
const metadata = {
|
|
173
|
+
blendMode: props.blendMode || "normal",
|
|
174
|
+
opacity: props.opacity,
|
|
175
|
+
visible: props.visible === false ? false : true,
|
|
176
|
+
id: props.id,
|
|
177
|
+
mask: props.maskSource ? {
|
|
178
|
+
source: props.maskSource,
|
|
179
|
+
type: props.maskType || "alpha"
|
|
180
|
+
} : void 0,
|
|
181
|
+
maps: mapsFromProps(),
|
|
182
|
+
renderOrder: props.renderOrder ?? detectedRenderOrder,
|
|
183
|
+
transform: effectiveTransform()
|
|
184
|
+
};
|
|
185
|
+
parentMetadataUpdate(instanceId, metadata);
|
|
186
|
+
} catch (error) {
|
|
187
|
+
console.error("Error updating metadata:", error);
|
|
188
|
+
}
|
|
189
|
+
});
|
|
190
|
+
const canUseDOM = typeof document !== "undefined" && typeof window !== "undefined";
|
|
191
|
+
return createComponent(ShaderContext.Provider, {
|
|
192
|
+
get value() {
|
|
193
|
+
return childContextValue();
|
|
194
|
+
},
|
|
195
|
+
get children() {
|
|
196
|
+
return [(() => {
|
|
197
|
+
var _el$ = _tmpl$();
|
|
198
|
+
var _ref$ = markerRef;
|
|
199
|
+
typeof _ref$ === "function" ? use(_ref$, _el$) : markerRef = _el$;
|
|
200
|
+
setAttribute(_el$, "data-shader-id", instanceId);
|
|
201
|
+
insert(_el$, () => (!isCapturesDOM || !canUseDOM) && local.children);
|
|
202
|
+
return _el$;
|
|
203
|
+
})(), memo(() => isCapturesDOM && canUseDOM && createComponent(Portal, {
|
|
204
|
+
get children() {
|
|
205
|
+
var _el$2 = _tmpl$2();
|
|
206
|
+
var _ref$2 = captureCanvasEl;
|
|
207
|
+
typeof _ref$2 === "function" ? use(_ref$2, _el$2) : captureCanvasEl = _el$2;
|
|
208
|
+
spread(_el$2, mergeProps({
|
|
209
|
+
"layoutsubtree": ""
|
|
210
|
+
}, {
|
|
211
|
+
get width() {
|
|
212
|
+
return captureSize().w;
|
|
213
|
+
},
|
|
214
|
+
get height() {
|
|
215
|
+
return captureSize().h;
|
|
216
|
+
},
|
|
217
|
+
"style": "position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"
|
|
218
|
+
}), false, true);
|
|
219
|
+
insert(_el$2, () => local.children);
|
|
220
|
+
return _el$2;
|
|
221
|
+
}
|
|
222
|
+
}))];
|
|
223
|
+
}
|
|
224
|
+
});
|
|
225
|
+
}
|
|
226
|
+
export {
|
|
227
|
+
ShaderComponent as default
|
|
228
|
+
};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { JSX } from 'solid-js';
|
|
2
|
+
import { BlendMode, PropDriver, TransformConfig } from '../../core';
|
|
3
|
+
import { ComponentProps } from '../../core/shaders/ThinFilm';
|
|
4
|
+
export type { ComponentProps };
|
|
5
|
+
/**
|
|
6
|
+
* Base props that all shader components have
|
|
7
|
+
*/
|
|
8
|
+
interface BaseShaderProps {
|
|
9
|
+
children?: JSX.Element;
|
|
10
|
+
blendMode?: BlendMode;
|
|
11
|
+
opacity?: number;
|
|
12
|
+
visible?: boolean;
|
|
13
|
+
id?: string;
|
|
14
|
+
maskSource?: string;
|
|
15
|
+
maskType?: string;
|
|
16
|
+
renderOrder?: number;
|
|
17
|
+
transform?: Partial<TransformConfig>;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Component-specific props that merge base props with shader-specific props
|
|
21
|
+
* Note: ComponentProps are made optional since they have defaults from the shader definition
|
|
22
|
+
*/
|
|
23
|
+
type ShaderComponentProps = BaseShaderProps & Partial<Omit<ComponentProps, 'center' | 'scale' | 'intensity' | 'rimWidth' | 'edgeSoftness' | 'thickness' | 'dispersion' | 'saturation' | 'hueShift'>> & {
|
|
24
|
+
center?: ComponentProps['center'] | PropDriver;
|
|
25
|
+
scale?: ComponentProps['scale'] | PropDriver;
|
|
26
|
+
intensity?: ComponentProps['intensity'] | PropDriver;
|
|
27
|
+
rimWidth?: ComponentProps['rimWidth'] | PropDriver;
|
|
28
|
+
edgeSoftness?: ComponentProps['edgeSoftness'] | PropDriver;
|
|
29
|
+
thickness?: ComponentProps['thickness'] | PropDriver;
|
|
30
|
+
dispersion?: ComponentProps['dispersion'] | PropDriver;
|
|
31
|
+
saturation?: ComponentProps['saturation'] | PropDriver;
|
|
32
|
+
hueShift?: ComponentProps['hueShift'] | PropDriver;
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* The main Solid wrapper component for Shader shader nodes
|
|
36
|
+
*/
|
|
37
|
+
export default function ShaderComponent(props: ShaderComponentProps): JSX.Element;
|
|
38
|
+
//# sourceMappingURL=ThinFilm.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThinFilm.d.ts","sourceRoot":"","sources":["../../src/components/ThinFilm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0F,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAE5H,OAAO,EAGH,KAAK,SAAS,EAId,KAAK,UAAU,EACf,KAAK,eAAe,EACvB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGjF,YAAY,EAAE,cAAc,EAAE,CAAC;AAY/B;;GAEG;AACH,UAAU,eAAe;IACrB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CACxC;AAOD;;;GAGG;AACH,KAAK,oBAAoB,GAAG,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,WAAW,GAAG,YAAY,GAAG,YAAY,GAAG,UAAU,CAAC,CAAC,GAAG;IACrM,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG,UAAU,CAAC;IAC/C,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC;IAC7C,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC;IACrD,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC;IACnD,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG,UAAU,CAAC;IAC3D,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC;IACrD,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,GAAG,UAAU,CAAC;IACvD,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,GAAG,UAAU,CAAC;IACvD,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC;CACpD,CAAC;AAmCF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,oBAAoB,eA8NlE"}
|
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
import { createComponent, memo, template, setAttribute, insert, Portal, spread, mergeProps, use } from "solid-js/web";
|
|
2
|
+
import { splitProps, createUniqueId, createMemo, createSignal, onMount, onCleanup, createEffect } from "solid-js";
|
|
3
|
+
import { createUniformsMap } from "../../core/index.js";
|
|
4
|
+
import { setColorSpaceMode } from "../../core/utilities/transformations/index.js";
|
|
5
|
+
import { componentDefinition } from "../../core/shaders/ThinFilm/index.js";
|
|
6
|
+
import { useShaderContext, ShaderContext } from "../engine/Shader.js";
|
|
7
|
+
var _tmpl$ = /* @__PURE__ */ template(`<span style=display:contents>`), _tmpl$2 = /* @__PURE__ */ template(`<canvas>`);
|
|
8
|
+
let _experimentalWarnedOnce = false;
|
|
9
|
+
if (componentDefinition.experimental && !_experimentalWarnedOnce) {
|
|
10
|
+
_experimentalWarnedOnce = true;
|
|
11
|
+
const _e = componentDefinition.experimental;
|
|
12
|
+
console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, "color: #f59e0b; font-weight: bold");
|
|
13
|
+
}
|
|
14
|
+
function isPropDriver(value) {
|
|
15
|
+
return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
|
|
16
|
+
}
|
|
17
|
+
const DEFAULT_TRANSFORM = {
|
|
18
|
+
offsetX: 0,
|
|
19
|
+
offsetY: 0,
|
|
20
|
+
rotation: 0,
|
|
21
|
+
scale: 1,
|
|
22
|
+
anchorX: 0.5,
|
|
23
|
+
anchorY: 0.5,
|
|
24
|
+
edges: "transparent"
|
|
25
|
+
};
|
|
26
|
+
const defaultProps = {
|
|
27
|
+
blendMode: "normal",
|
|
28
|
+
visible: true
|
|
29
|
+
// opacity intentionally has no default - handled by renderer
|
|
30
|
+
// transform intentionally has no default - handled by effectiveTransform
|
|
31
|
+
};
|
|
32
|
+
try {
|
|
33
|
+
if (componentDefinition && componentDefinition.props) {
|
|
34
|
+
Object.entries(componentDefinition.props).forEach(([key, config]) => {
|
|
35
|
+
const propConfig = config;
|
|
36
|
+
if (propConfig && typeof propConfig === "object" && "default" in propConfig) {
|
|
37
|
+
defaultProps[key] = propConfig.default;
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
} catch (e) {
|
|
42
|
+
console.warn("Error extracting default props:", e);
|
|
43
|
+
}
|
|
44
|
+
function ShaderComponent(props) {
|
|
45
|
+
const [local, otherProps] = splitProps(props, ["children"]);
|
|
46
|
+
const context = useShaderContext();
|
|
47
|
+
const {
|
|
48
|
+
shaderParentId: parentId,
|
|
49
|
+
shaderNodeRegister: parentRegister,
|
|
50
|
+
shaderUniformUpdate: parentUniformUpdate,
|
|
51
|
+
shaderMetadataUpdate: parentMetadataUpdate,
|
|
52
|
+
shaderColorSpace
|
|
53
|
+
} = context;
|
|
54
|
+
const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || createUniqueId();
|
|
55
|
+
const effectiveProps = createMemo(() => {
|
|
56
|
+
let baseProps = {
|
|
57
|
+
...defaultProps
|
|
58
|
+
};
|
|
59
|
+
for (const [key, value] of Object.entries(otherProps)) {
|
|
60
|
+
if (value !== void 0 && !isPropDriver(value)) {
|
|
61
|
+
baseProps[key] = value;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
return baseProps;
|
|
65
|
+
});
|
|
66
|
+
const effectiveTransform = createMemo(() => ({
|
|
67
|
+
...DEFAULT_TRANSFORM,
|
|
68
|
+
...props.transform
|
|
69
|
+
}));
|
|
70
|
+
const mapsFromProps = createMemo(() => {
|
|
71
|
+
const maps = {};
|
|
72
|
+
for (const [key, value] of Object.entries(otherProps)) {
|
|
73
|
+
if (isPropDriver(value)) maps[key] = value;
|
|
74
|
+
}
|
|
75
|
+
return Object.keys(maps).length > 0 ? maps : void 0;
|
|
76
|
+
});
|
|
77
|
+
let uniformsMap = null;
|
|
78
|
+
const getUniformsMap = () => {
|
|
79
|
+
if (!uniformsMap) {
|
|
80
|
+
setColorSpaceMode(shaderColorSpace);
|
|
81
|
+
uniformsMap = createUniformsMap(componentDefinition, effectiveProps(), instanceId);
|
|
82
|
+
}
|
|
83
|
+
return uniformsMap;
|
|
84
|
+
};
|
|
85
|
+
const childContextValue = createMemo(() => ({
|
|
86
|
+
...context,
|
|
87
|
+
shaderParentId: instanceId
|
|
88
|
+
}));
|
|
89
|
+
const isCapturesDOM = !!componentDefinition.capturesDOM;
|
|
90
|
+
let captureCanvasEl;
|
|
91
|
+
const [captureSize, setCaptureSize] = createSignal({
|
|
92
|
+
w: typeof window !== "undefined" ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0,
|
|
93
|
+
h: typeof window !== "undefined" ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0
|
|
94
|
+
});
|
|
95
|
+
if (isCapturesDOM) {
|
|
96
|
+
const onWinResize = () => {
|
|
97
|
+
const d = Math.min(window.devicePixelRatio, 2);
|
|
98
|
+
setCaptureSize({
|
|
99
|
+
w: Math.round(window.innerWidth * d),
|
|
100
|
+
h: Math.round(window.innerHeight * d)
|
|
101
|
+
});
|
|
102
|
+
};
|
|
103
|
+
onMount(() => window.addEventListener("resize", onWinResize));
|
|
104
|
+
onCleanup(() => window.removeEventListener("resize", onWinResize));
|
|
105
|
+
}
|
|
106
|
+
let markerRef;
|
|
107
|
+
let detectedRenderOrder = void 0;
|
|
108
|
+
let isRegistered = false;
|
|
109
|
+
onMount(() => {
|
|
110
|
+
const uniforms = getUniformsMap();
|
|
111
|
+
if (!uniforms) return;
|
|
112
|
+
try {
|
|
113
|
+
const metadata = {
|
|
114
|
+
blendMode: props.blendMode || "normal",
|
|
115
|
+
opacity: props.opacity,
|
|
116
|
+
visible: props.visible === false ? false : true,
|
|
117
|
+
id: props.id,
|
|
118
|
+
mask: props.maskSource ? {
|
|
119
|
+
source: props.maskSource,
|
|
120
|
+
type: props.maskType || "alpha"
|
|
121
|
+
} : void 0,
|
|
122
|
+
maps: mapsFromProps(),
|
|
123
|
+
renderOrder: props.renderOrder ?? detectedRenderOrder,
|
|
124
|
+
transform: effectiveTransform()
|
|
125
|
+
};
|
|
126
|
+
parentRegister(instanceId, componentDefinition.fragmentNode, parentId, metadata, uniforms, componentDefinition, isCapturesDOM ? captureCanvasEl : void 0);
|
|
127
|
+
isRegistered = true;
|
|
128
|
+
if (props.renderOrder === void 0 && markerRef) {
|
|
129
|
+
const parent = markerRef.parentElement;
|
|
130
|
+
if (parent) {
|
|
131
|
+
const siblings = parent.querySelectorAll(":scope > [data-shader-id]");
|
|
132
|
+
const position = Array.from(siblings).indexOf(markerRef);
|
|
133
|
+
if (position >= 0) {
|
|
134
|
+
detectedRenderOrder = position;
|
|
135
|
+
parentMetadataUpdate(instanceId, {
|
|
136
|
+
renderOrder: position
|
|
137
|
+
});
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
} catch (error) {
|
|
142
|
+
console.error("Error registering shader node:", error);
|
|
143
|
+
}
|
|
144
|
+
});
|
|
145
|
+
onCleanup(() => {
|
|
146
|
+
isRegistered = false;
|
|
147
|
+
parentRegister(instanceId, null, null, null, null);
|
|
148
|
+
});
|
|
149
|
+
createEffect(() => {
|
|
150
|
+
if (!isRegistered) return;
|
|
151
|
+
const uniforms = getUniformsMap();
|
|
152
|
+
if (!uniforms) return;
|
|
153
|
+
try {
|
|
154
|
+
const props_snapshot = effectiveProps();
|
|
155
|
+
Object.entries(uniforms).forEach(([propName, uniformData]) => {
|
|
156
|
+
if (!uniformData || typeof uniformData !== "object") return;
|
|
157
|
+
const {
|
|
158
|
+
uniform
|
|
159
|
+
} = uniformData;
|
|
160
|
+
if ((uniform == null ? void 0 : uniform.value) !== void 0 && propName in props_snapshot) {
|
|
161
|
+
const newValue = props_snapshot[propName];
|
|
162
|
+
parentUniformUpdate(instanceId, propName, newValue);
|
|
163
|
+
}
|
|
164
|
+
});
|
|
165
|
+
} catch (error) {
|
|
166
|
+
console.error("Error updating uniforms:", error);
|
|
167
|
+
}
|
|
168
|
+
});
|
|
169
|
+
createEffect(() => {
|
|
170
|
+
if (!isRegistered) return;
|
|
171
|
+
try {
|
|
172
|
+
const metadata = {
|
|
173
|
+
blendMode: props.blendMode || "normal",
|
|
174
|
+
opacity: props.opacity,
|
|
175
|
+
visible: props.visible === false ? false : true,
|
|
176
|
+
id: props.id,
|
|
177
|
+
mask: props.maskSource ? {
|
|
178
|
+
source: props.maskSource,
|
|
179
|
+
type: props.maskType || "alpha"
|
|
180
|
+
} : void 0,
|
|
181
|
+
maps: mapsFromProps(),
|
|
182
|
+
renderOrder: props.renderOrder ?? detectedRenderOrder,
|
|
183
|
+
transform: effectiveTransform()
|
|
184
|
+
};
|
|
185
|
+
parentMetadataUpdate(instanceId, metadata);
|
|
186
|
+
} catch (error) {
|
|
187
|
+
console.error("Error updating metadata:", error);
|
|
188
|
+
}
|
|
189
|
+
});
|
|
190
|
+
const canUseDOM = typeof document !== "undefined" && typeof window !== "undefined";
|
|
191
|
+
return createComponent(ShaderContext.Provider, {
|
|
192
|
+
get value() {
|
|
193
|
+
return childContextValue();
|
|
194
|
+
},
|
|
195
|
+
get children() {
|
|
196
|
+
return [(() => {
|
|
197
|
+
var _el$ = _tmpl$();
|
|
198
|
+
var _ref$ = markerRef;
|
|
199
|
+
typeof _ref$ === "function" ? use(_ref$, _el$) : markerRef = _el$;
|
|
200
|
+
setAttribute(_el$, "data-shader-id", instanceId);
|
|
201
|
+
insert(_el$, () => (!isCapturesDOM || !canUseDOM) && local.children);
|
|
202
|
+
return _el$;
|
|
203
|
+
})(), memo(() => isCapturesDOM && canUseDOM && createComponent(Portal, {
|
|
204
|
+
get children() {
|
|
205
|
+
var _el$2 = _tmpl$2();
|
|
206
|
+
var _ref$2 = captureCanvasEl;
|
|
207
|
+
typeof _ref$2 === "function" ? use(_ref$2, _el$2) : captureCanvasEl = _el$2;
|
|
208
|
+
spread(_el$2, mergeProps({
|
|
209
|
+
"layoutsubtree": ""
|
|
210
|
+
}, {
|
|
211
|
+
get width() {
|
|
212
|
+
return captureSize().w;
|
|
213
|
+
},
|
|
214
|
+
get height() {
|
|
215
|
+
return captureSize().h;
|
|
216
|
+
},
|
|
217
|
+
"style": "position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999"
|
|
218
|
+
}), false, true);
|
|
219
|
+
insert(_el$2, () => local.children);
|
|
220
|
+
return _el$2;
|
|
221
|
+
}
|
|
222
|
+
}))];
|
|
223
|
+
}
|
|
224
|
+
});
|
|
225
|
+
}
|
|
226
|
+
export {
|
|
227
|
+
ShaderComponent as default
|
|
228
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Preview.d.ts","sourceRoot":"","sources":["../../src/engine/Preview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+C,KAAK,GAAG,EAAoC,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"Preview.d.ts","sourceRoot":"","sources":["../../src/engine/Preview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+C,KAAK,GAAG,EAAoC,MAAM,UAAU,CAAA;AAmblH,MAAM,WAAW,YAAY;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,GAAG,MAAM,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACvC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAID,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,eA6HlD"}
|