shaders 2.5.103 → 2.5.104
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/Fog-DhFHErOx.js +674 -0
- package/dist/core/Smoke-LIDjCv7f.js +629 -0
- package/dist/core/SmokeFill-ChSIfTxW.js +641 -0
- package/dist/core/{VideoTexture-DnHIs4pp.js → VideoTexture-SWLe5c3m.js} +1 -1
- package/dist/core/{WebcamTexture-XBDo2kgN.js → WebcamTexture-cXPyEumA.js} +1 -1
- package/dist/core/index.js +73 -70
- package/dist/core/registry.js +72 -69
- package/dist/core/renderer.d.ts.map +1 -1
- package/dist/core/shaderRegistry-CVhdTDhR.js +252 -0
- package/dist/core/shaderRegistry.d.ts.map +1 -1
- package/dist/core/shaders/Fog/index.d.ts +78 -0
- package/dist/core/shaders/Fog/index.d.ts.map +1 -0
- package/dist/core/shaders/Fog/index.js +4 -0
- package/dist/core/shaders/Form3D/index.js +1 -1
- package/dist/core/shaders/Glass/index.js +1 -1
- package/dist/core/shaders/GlassTiles/index.js +1 -1
- package/dist/core/shaders/Glitch/index.js +1 -1
- package/dist/core/shaders/Glow/index.js +1 -1
- 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/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 +1 -1
- package/dist/core/shaders/RadialGradient/index.js +1 -1
- package/dist/core/shaders/RectangularCoordinates/index.js +1 -1
- 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.d.ts +113 -0
- package/dist/core/shaders/Smoke/index.d.ts.map +1 -0
- package/dist/core/shaders/Smoke/index.js +4 -0
- package/dist/core/shaders/SmokeFill/index.d.ts +145 -0
- package/dist/core/shaders/SmokeFill/index.d.ts.map +1 -0
- package/dist/core/shaders/SmokeFill/index.js +5 -0
- 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/Swirl/index.js +1 -1
- package/dist/core/shaders/TiltShift/index.js +1 -1
- 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/ZoomBlur/index.js +1 -1
- package/dist/js/createShader.js +1 -1
- package/dist/js/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/js/utils/generatePresetCode.js +67 -0
- package/dist/react/Fog.js +223 -0
- package/dist/react/Preview.js +3 -0
- package/dist/react/Shader.js +1 -1
- package/dist/react/Smoke.js +223 -0
- package/dist/react/SmokeFill.js +223 -0
- package/dist/react/components/Fog.d.ts +31 -0
- package/dist/react/components/Fog.d.ts.map +1 -0
- package/dist/react/components/Smoke.d.ts +33 -0
- package/dist/react/components/Smoke.d.ts.map +1 -0
- package/dist/react/components/SmokeFill.d.ts +34 -0
- package/dist/react/components/SmokeFill.d.ts.map +1 -0
- package/dist/react/engine/Preview.d.ts.map +1 -1
- package/dist/react/index.d.ts +3 -0
- package/dist/react/index.d.ts.map +1 -1
- package/dist/react/index.js +4 -1
- package/dist/react/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/react/utils/generatePresetCode.js +67 -0
- package/dist/registry.js +1189 -0
- package/dist/solid/components/Fog.d.ts +28 -0
- package/dist/solid/components/Fog.d.ts.map +1 -0
- package/dist/solid/components/Fog.js +228 -0
- package/dist/solid/components/Smoke.d.ts +30 -0
- package/dist/solid/components/Smoke.d.ts.map +1 -0
- package/dist/solid/components/Smoke.js +228 -0
- package/dist/solid/components/SmokeFill.d.ts +31 -0
- package/dist/solid/components/SmokeFill.d.ts.map +1 -0
- package/dist/solid/components/SmokeFill.js +228 -0
- package/dist/solid/engine/Preview.d.ts.map +1 -1
- package/dist/solid/engine/Preview.js +162 -156
- package/dist/solid/engine/Shader.js +1 -1
- package/dist/solid/index.d.ts +3 -0
- package/dist/solid/index.d.ts.map +1 -1
- package/dist/solid/index.js +144 -138
- package/dist/solid/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/solid/utils/generatePresetCode.js +67 -0
- package/dist/svelte/components/Fog.svelte.d.ts +19 -0
- package/dist/svelte/components/Smoke.svelte.d.ts +20 -0
- package/dist/svelte/components/SmokeFill.svelte.d.ts +21 -0
- package/dist/svelte/{generatePresetCode-psTzYsW3.js → generatePresetCode-DR_OAIL7.js} +67 -0
- package/dist/svelte/index.d.ts +3 -0
- package/dist/svelte/index.js +1151 -551
- package/dist/svelte/source/components/Fog.svelte +325 -0
- package/dist/svelte/source/components/Smoke.svelte +326 -0
- package/dist/svelte/source/components/SmokeFill.svelte +327 -0
- package/dist/svelte/source/engine/Preview.svelte +6 -0
- package/dist/svelte/source/index.js +3 -0
- package/dist/svelte/utils/generatePresetCode.js +1 -1
- package/dist/vue/Fog.js +3 -0
- package/dist/vue/Fog.vue_vue_type_script_setup_true_lang.js +222 -0
- package/dist/vue/Preview.vue_vue_type_script_setup_true_lang.js +6 -0
- package/dist/vue/Shader.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/vue/Smoke.js +3 -0
- package/dist/vue/Smoke.vue_vue_type_script_setup_true_lang.js +227 -0
- package/dist/vue/SmokeFill.js +3 -0
- package/dist/vue/SmokeFill.vue_vue_type_script_setup_true_lang.js +232 -0
- package/dist/vue/components/Fog.vue.d.ts +54 -0
- package/dist/vue/components/Fog.vue.d.ts.map +1 -0
- package/dist/vue/components/Smoke.vue.d.ts +55 -0
- package/dist/vue/components/Smoke.vue.d.ts.map +1 -0
- package/dist/vue/components/SmokeFill.vue.d.ts +56 -0
- package/dist/vue/components/SmokeFill.vue.d.ts.map +1 -0
- package/dist/vue/index.d.ts +3 -0
- package/dist/vue/index.d.ts.map +1 -1
- package/dist/vue/index.js +4 -1
- package/dist/vue/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/vue/utils/generatePresetCode.js +67 -0
- package/package.json +25 -1
- package/dist/core/shaderRegistry-BWuH2me2.js +0 -246
- /package/dist/core/{Form3D-rKpxb9t3.js → Form3D-DaPbLGUi.js} +0 -0
- /package/dist/core/{Glass-C04tCmBL.js → Glass-CpcmrDfm.js} +0 -0
- /package/dist/core/{GlassTiles-k1C4a4u8.js → GlassTiles-Dgh6nOaE.js} +0 -0
- /package/dist/core/{Glitch-DzPMkBu4.js → Glitch-BsbzLahF.js} +0 -0
- /package/dist/core/{Glow-BwaPYDRZ.js → Glow-Ft2x2QHL.js} +0 -0
- /package/dist/core/{Godrays-DAYmq-BP.js → Godrays-D1LINbut.js} +0 -0
- /package/dist/core/{Grayscale-lYKBBkGY.js → Grayscale-Ri-695Uh.js} +0 -0
- /package/dist/core/{Grid-BJ-nxN3i.js → Grid-BYSsAIEv.js} +0 -0
- /package/dist/core/{GridDistortion-DtaRNrTZ.js → GridDistortion-DWFGD8ya.js} +0 -0
- /package/dist/core/{Group-DpozigtX.js → Group-CkhjTW59.js} +0 -0
- /package/dist/core/{Halftone-XFa7by1s.js → Halftone-BUCDTTAU.js} +0 -0
- /package/dist/core/{HexGrid-D-EmQ4kI.js → HexGrid-BUiDrehv.js} +0 -0
- /package/dist/core/{HueShift-D9K0ynaS.js → HueShift-BtGVMu7q.js} +0 -0
- /package/dist/core/{ImageTexture-CArkZMfh.js → ImageTexture-CrX_9-f0.js} +0 -0
- /package/dist/core/{Invert-DCnwo_Xq.js → Invert-azYrcDMi.js} +0 -0
- /package/dist/core/{Kaleidoscope-BytHro3k.js → Kaleidoscope-CFWtKisp.js} +0 -0
- /package/dist/core/{LensFlare-B0vv4x97.js → LensFlare-ttrXgfea.js} +0 -0
- /package/dist/core/{LinearBlur-BFewxPjV.js → LinearBlur-By2aD8OO.js} +0 -0
- /package/dist/core/{LinearGradient-BKUf_u7r.js → LinearGradient-CM02z32l.js} +0 -0
- /package/dist/core/{Liquify-cE5dxrfh.js → Liquify-CyXo6vAH.js} +0 -0
- /package/dist/core/{Mirror-DIle92J8.js → Mirror-B7XmfGdw.js} +0 -0
- /package/dist/core/{MultiPointGradient-DDwac_mm.js → MultiPointGradient-8zGSIM4U.js} +0 -0
- /package/dist/core/{Neon-Dg8UfC7P.js → Neon-C1JlexhM.js} +0 -0
- /package/dist/core/{Paper-bMSMCeYK.js → Paper-B08rxNys.js} +0 -0
- /package/dist/core/{Perspective-BmfvQV6W.js → Perspective-BN_OpTZq.js} +0 -0
- /package/dist/core/{Pixelate-Dl26r6IT.js → Pixelate-dxPAFCRu.js} +0 -0
- /package/dist/core/{Plasma-CJWS1TvX.js → Plasma-DGCw0cd7.js} +0 -0
- /package/dist/core/{PolarCoordinates-lq6K4WBm.js → PolarCoordinates-CMYCFT4S.js} +0 -0
- /package/dist/core/{Polygon-DRCs3CYs.js → Polygon-CsCOt5YE.js} +0 -0
- /package/dist/core/{Posterize-BjH7Zscm.js → Posterize-Blv9pzPT.js} +0 -0
- /package/dist/core/{ProgressiveBlur-B8xwWyTM.js → ProgressiveBlur-Cx6eR7o9.js} +0 -0
- /package/dist/core/{RadialGradient-DiGFPgrn.js → RadialGradient-De0gtdh3.js} +0 -0
- /package/dist/core/{RectangularCoordinates-COkNDxi0.js → RectangularCoordinates-8Sa2GaDy.js} +0 -0
- /package/dist/core/{Ring-QApyKPzE.js → Ring-kHH-DIDQ.js} +0 -0
- /package/dist/core/{Ripples-C8Q17Hvz.js → Ripples-Bf6Zwg6X.js} +0 -0
- /package/dist/core/{RoundedRect-Ca9af9xe.js → RoundedRect-B0sWh2BN.js} +0 -0
- /package/dist/core/{Saturation-CgDaiq6n.js → Saturation-CB19kOXg.js} +0 -0
- /package/dist/core/{Sharpness-CRXT0D30.js → Sharpness-CQOboeqy.js} +0 -0
- /package/dist/core/{Shatter-BssZTRYJ.js → Shatter-BhK75BiG.js} +0 -0
- /package/dist/core/{SimplexNoise-KfTCAfpL.js → SimplexNoise-BcSgytjc.js} +0 -0
- /package/dist/core/{SineWave-Ckeap_YM.js → SineWave-VTNDSK_g.js} +0 -0
- /package/dist/core/{Solarize-DhtQYYpW.js → Solarize-CWDgSBiv.js} +0 -0
- /package/dist/core/{SolidColor-6yUkGybH.js → SolidColor-DhMdM3bE.js} +0 -0
- /package/dist/core/{Spherize-8LXrGGG_.js → Spherize-BZxwopX8.js} +0 -0
- /package/dist/core/{Spiral-Bs7uZrBr.js → Spiral-gpkw37l1.js} +0 -0
- /package/dist/core/{Star-DiXwnPGP.js → Star-WJAOZ5P5.js} +0 -0
- /package/dist/core/{Strands-DsAAVemq.js → Strands-DOthZNHt.js} +0 -0
- /package/dist/core/{Stretch-D7P2R5lV.js → Stretch--GV6hbru.js} +0 -0
- /package/dist/core/{Stripes-DF8agIiJ.js → Stripes-CFCXw1_N.js} +0 -0
- /package/dist/core/{StudioBackground-BFeNfwEu.js → StudioBackground-DJr-cxOL.js} +0 -0
- /package/dist/core/{Swirl-BwezrSAA.js → Swirl-By5FadQK.js} +0 -0
- /package/dist/core/{TiltShift-CI3FlfYk.js → TiltShift-Dh8wc9GG.js} +0 -0
- /package/dist/core/{Tint-BdXlqlzz.js → Tint-DaTx2HII.js} +0 -0
- /package/dist/core/{Trapezoid-BX_hmeZJ.js → Trapezoid-Co0sIA73.js} +0 -0
- /package/dist/core/{Tritone-BlJ7cchN.js → Tritone-C9Yx69Tw.js} +0 -0
- /package/dist/core/{Truchet-Bnn0fwbF.js → Truchet-CkFSkniR.js} +0 -0
- /package/dist/core/{Twirl-C5ijhqz1.js → Twirl-v8pLqUTN.js} +0 -0
- /package/dist/core/{VHS-CQJ1hV_D.js → VHS-mKd1QBBj.js} +0 -0
- /package/dist/core/{Vesica-DU0f85NG.js → Vesica-CxP7UD0a.js} +0 -0
- /package/dist/core/{Vibrance-CGvYDeds.js → Vibrance-WR5yQv_9.js} +0 -0
- /package/dist/core/{Vignette-BJaonUVL.js → Vignette-hAIKTi35.js} +0 -0
- /package/dist/core/{Voronoi-DZemzWA4.js → Voronoi-DOGmwUSK.js} +0 -0
- /package/dist/core/{WaveDistortion--Y-m667K.js → WaveDistortion-BGdgj3Iz.js} +0 -0
- /package/dist/core/{Weave-CtyohvHz.js → Weave-CIP_EUPa.js} +0 -0
- /package/dist/core/{ZoomBlur-BwkhsFRE.js → ZoomBlur-BuIVpHGG.js} +0 -0
- /package/dist/core/{browser-DTNngPey.js → browser-D8zonASQ.js} +0 -0
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { JSX } from 'solid-js';
|
|
2
|
+
import { BlendMode, TransformConfig } from '../../core';
|
|
3
|
+
import { ComponentProps } from '../../core/shaders/Fog';
|
|
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, never>> & {};
|
|
24
|
+
/**
|
|
25
|
+
* The main Solid wrapper component for Shader shader nodes
|
|
26
|
+
*/
|
|
27
|
+
export default function ShaderComponent(props: ShaderComponentProps): JSX.Element;
|
|
28
|
+
//# sourceMappingURL=Fog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Fog.d.ts","sourceRoot":"","sources":["../../src/components/Fog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0F,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAE5H,OAAO,EAGH,KAAK,SAAS,EAKd,KAAK,eAAe,EACvB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAuB,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAG5E,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,KAAK,CAAC,CAAC,GAAG,EACpF,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/Fog/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,30 @@
|
|
|
1
|
+
import { JSX } from 'solid-js';
|
|
2
|
+
import { BlendMode, PropDriver, TransformConfig } from '../../core';
|
|
3
|
+
import { ComponentProps } from '../../core/shaders/Smoke';
|
|
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, 'emitFrom'>> & {
|
|
24
|
+
emitFrom?: ComponentProps['emitFrom'] | PropDriver;
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* The main Solid wrapper component for Shader shader nodes
|
|
28
|
+
*/
|
|
29
|
+
export default function ShaderComponent(props: ShaderComponentProps): JSX.Element;
|
|
30
|
+
//# sourceMappingURL=Smoke.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Smoke.d.ts","sourceRoot":"","sources":["../../src/components/Smoke.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,oBAAoB,CAAC;AAG9E,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,UAAU,CAAC,CAAC,GAAG;IACxF,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/Smoke/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,31 @@
|
|
|
1
|
+
import { JSX } from 'solid-js';
|
|
2
|
+
import { BlendMode, PropDriver, TransformConfig } from '../../core';
|
|
3
|
+
import { ComponentProps } from '../../core/shaders/SmokeFill';
|
|
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' | 'emitFrom'>> & {
|
|
24
|
+
center?: ComponentProps['center'] | PropDriver;
|
|
25
|
+
emitFrom?: ComponentProps['emitFrom'] | PropDriver;
|
|
26
|
+
};
|
|
27
|
+
/**
|
|
28
|
+
* The main Solid wrapper component for Shader shader nodes
|
|
29
|
+
*/
|
|
30
|
+
export default function ShaderComponent(props: ShaderComponentProps): JSX.Element;
|
|
31
|
+
//# sourceMappingURL=SmokeFill.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SmokeFill.d.ts","sourceRoot":"","sources":["../../src/components/SmokeFill.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,wBAAwB,CAAC;AAGlF,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,UAAU,CAAC,CAAC,GAAG;IACnG,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG,UAAU,CAAC;IAC/C,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"}
|