shaders 2.0.644 → 2.0.646
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/react/components/Ascii.d.ts +22 -0
- package/dist/react/components/Ascii.d.ts.map +1 -0
- package/dist/react/index.cjs +43 -43
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.d.ts +1 -0
- package/dist/react/index.d.ts.map +1 -1
- package/dist/react/index.js +12258 -11718
- package/dist/react/index.js.map +1 -1
- package/dist/react/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/svelte/components/Checkerboard.svelte +202 -0
- package/dist/svelte/components/Checkerboard.svelte.d.ts +39 -0
- package/dist/svelte/components/Grid.svelte +202 -0
- package/dist/svelte/components/Grid.svelte.d.ts +39 -0
- package/dist/svelte/components/ImageTexture.svelte +202 -0
- package/dist/svelte/components/ImageTexture.svelte.d.ts +39 -0
- package/dist/svelte/components/Pixelate.svelte +202 -0
- package/dist/svelte/components/Pixelate.svelte.d.ts +39 -0
- package/dist/svelte/components/RadialGradient.svelte +202 -0
- package/dist/svelte/components/RadialGradient.svelte.d.ts +39 -0
- package/dist/svelte/index.d.ts +5 -0
- package/dist/svelte/index.js +5 -0
- package/dist/svelte/utils/generatePresetCode.js +5 -0
- package/dist/vue/components/Ascii.vue.d.ts +48 -0
- package/dist/vue/components/Ascii.vue.d.ts.map +1 -0
- package/dist/vue/components/Checkerboard.vue.d.ts +48 -0
- package/dist/vue/components/Checkerboard.vue.d.ts.map +1 -0
- package/dist/vue/components/Grid.vue.d.ts +48 -0
- package/dist/vue/components/Grid.vue.d.ts.map +1 -0
- package/dist/vue/components/ImageTexture.vue.d.ts +48 -0
- package/dist/vue/components/ImageTexture.vue.d.ts.map +1 -0
- package/dist/vue/components/Pixelate.vue.d.ts +48 -0
- package/dist/vue/components/Pixelate.vue.d.ts.map +1 -0
- package/dist/vue/components/RadialGradient.vue.d.ts +48 -0
- package/dist/vue/components/RadialGradient.vue.d.ts.map +1 -0
- package/dist/vue/index.d.ts +6 -0
- package/dist/vue/index.d.ts.map +1 -1
- package/dist/vue/index.js +38 -38
- package/dist/vue/utils/generatePresetCode.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { type BlendMode } from 'shaders-core';
|
|
2
|
+
import { type ComponentProps } from 'shaders-core/imageTexture';
|
|
3
|
+
/**
|
|
4
|
+
* Define component props including blend mode, opacity, and masking
|
|
5
|
+
*/
|
|
6
|
+
interface ExtendedComponentProps extends Partial<ComponentProps> {
|
|
7
|
+
blendMode?: BlendMode;
|
|
8
|
+
opacity?: number;
|
|
9
|
+
id?: string;
|
|
10
|
+
maskSource?: string;
|
|
11
|
+
maskType?: string;
|
|
12
|
+
}
|
|
13
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
14
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
15
|
+
$$bindings?: Bindings;
|
|
16
|
+
} & Exports;
|
|
17
|
+
(internal: unknown, props: Props & {
|
|
18
|
+
$$events?: Events;
|
|
19
|
+
$$slots?: Slots;
|
|
20
|
+
}): Exports & {
|
|
21
|
+
$set?: any;
|
|
22
|
+
$on?: any;
|
|
23
|
+
};
|
|
24
|
+
z_$$bindings?: Bindings;
|
|
25
|
+
}
|
|
26
|
+
type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
|
|
27
|
+
default: any;
|
|
28
|
+
} ? Props extends Record<string, never> ? any : {
|
|
29
|
+
children?: any;
|
|
30
|
+
} : {});
|
|
31
|
+
declare const ImageTexture: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<ExtendedComponentProps, {
|
|
32
|
+
default: {};
|
|
33
|
+
}>, {
|
|
34
|
+
[evt: string]: CustomEvent<any>;
|
|
35
|
+
}, {
|
|
36
|
+
default: {};
|
|
37
|
+
}, {}, "">;
|
|
38
|
+
type ImageTexture = InstanceType<typeof ImageTexture>;
|
|
39
|
+
export default ImageTexture;
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { getContext, setContext, onMount, onDestroy } from 'svelte';
|
|
3
|
+
import {
|
|
4
|
+
createUniformsMap,
|
|
5
|
+
type UniformsMap,
|
|
6
|
+
type BlendMode,
|
|
7
|
+
type NodeMetadata,
|
|
8
|
+
type PropConfig,
|
|
9
|
+
type MaskConfig
|
|
10
|
+
} from 'shaders-core';
|
|
11
|
+
|
|
12
|
+
// @ts-ignore - this import is replaced at build time
|
|
13
|
+
import { componentDefinition, type ComponentProps } from 'shaders-core/pixelate';
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Define component props including blend mode, opacity, and masking
|
|
17
|
+
*/
|
|
18
|
+
interface ExtendedComponentProps extends Partial<ComponentProps> {
|
|
19
|
+
blendMode?: BlendMode;
|
|
20
|
+
opacity?: number;
|
|
21
|
+
id?: string;
|
|
22
|
+
maskSource?: string;
|
|
23
|
+
maskType?: string;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
// Define the component props and their default values from the shader definition
|
|
27
|
+
const componentDefaults = {
|
|
28
|
+
blendMode: 'normal' as BlendMode,
|
|
29
|
+
// opacity intentionally has no default - handled by renderer
|
|
30
|
+
...Object.entries(componentDefinition.props).reduce(
|
|
31
|
+
(acc, [key, config]) => {
|
|
32
|
+
acc[key] = (config as unknown as PropConfig<typeof config>).default;
|
|
33
|
+
return acc;
|
|
34
|
+
},
|
|
35
|
+
{} as Record<string, any>
|
|
36
|
+
)
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
// Declare props using Svelte 5's syntax with defaults
|
|
40
|
+
const props = $props<ExtendedComponentProps>();
|
|
41
|
+
|
|
42
|
+
// Apply defaults manually since Svelte 5 doesn't have withDefaults equivalent
|
|
43
|
+
const blendMode = props.blendMode ?? componentDefaults.blendMode;
|
|
44
|
+
const opacity = props.opacity; // No default - handled by renderer
|
|
45
|
+
const id = props.id;
|
|
46
|
+
const maskSource = props.maskSource;
|
|
47
|
+
const maskType = props.maskType;
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* FIRST: Get the parent ID from context BEFORE setting our own context
|
|
51
|
+
*/
|
|
52
|
+
const parentId = getContext<string>('ombreParentId');
|
|
53
|
+
if (parentId === undefined) {
|
|
54
|
+
throw new Error('Shader components must be used inside an <Shader> component or another shader component');
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Use the provided ID or generate a unique identifier for this component instance
|
|
59
|
+
*/
|
|
60
|
+
const instanceId = id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
|
|
61
|
+
|
|
62
|
+
/**
|
|
63
|
+
* THEN: Provide our unique identifier to child components
|
|
64
|
+
*/
|
|
65
|
+
setContext('ombreParentId', instanceId);
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* Creates a non-reactive object containing only props that differ from defaults
|
|
69
|
+
* This optimization prevents unnecessary GPU uniform updates for unchanged values
|
|
70
|
+
* Special props like blendMode and opacity are handled separately
|
|
71
|
+
*/
|
|
72
|
+
const shaderReadyProps = $derived.by(() => {
|
|
73
|
+
let baseProps = { ...componentDefaults };
|
|
74
|
+
|
|
75
|
+
// Only include props that differ from defaults (excluding special props)
|
|
76
|
+
for (const key in props) {
|
|
77
|
+
if (key !== 'blendMode' && key !== 'opacity' && key !== 'id' && key !== 'maskSource' && key !== 'maskType') {
|
|
78
|
+
const propValue = (props as any)[key];
|
|
79
|
+
const defaultValue = (componentDefaults as any)[key];
|
|
80
|
+
if (propValue !== undefined && propValue !== defaultValue) {
|
|
81
|
+
(baseProps as any)[key] = propValue;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
return baseProps;
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
/**
|
|
89
|
+
* Creates the GPU uniform values map using only the changed props
|
|
90
|
+
*/
|
|
91
|
+
const uniforms: UniformsMap = createUniformsMap(componentDefinition, shaderReadyProps, instanceId);
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* Get the node registration function from parent context
|
|
95
|
+
*/
|
|
96
|
+
const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null) => void>('ombreNodeRegister');
|
|
97
|
+
if (parentRegister === undefined) {
|
|
98
|
+
throw new Error('Shader components must be used inside an <Shader> component or another shader component');
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/**
|
|
102
|
+
* Get the uniform update function from parent context
|
|
103
|
+
*/
|
|
104
|
+
const parentUniformUpdate = getContext<(nodeId: string, uniformName: string, value: any) => void>('ombreUniformUpdate');
|
|
105
|
+
if (parentUniformUpdate === undefined) {
|
|
106
|
+
throw new Error('Shader components require ombreUniformUpdate from parent');
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Get the metadata update function from parent context
|
|
111
|
+
*/
|
|
112
|
+
const parentMetadataUpdate = getContext<(nodeId: string, metadata: NodeMetadata) => void>('ombreMetadataUpdate');
|
|
113
|
+
if (parentMetadataUpdate === undefined) {
|
|
114
|
+
throw new Error('Shader components require ombreMetadataUpdate from parent');
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// Flag to track when component is registered
|
|
118
|
+
let isRegistered = $state(false);
|
|
119
|
+
|
|
120
|
+
// Setup uniform watchers with registration guard
|
|
121
|
+
Object.entries(uniforms).forEach(([propName, { uniform, transform }]) => {
|
|
122
|
+
$effect(() => {
|
|
123
|
+
// Only run after component is registered
|
|
124
|
+
if (!isRegistered) return;
|
|
125
|
+
|
|
126
|
+
if (uniform && uniform.value !== undefined) {
|
|
127
|
+
const newValue = (props as any)[propName];
|
|
128
|
+
if (newValue !== undefined) {
|
|
129
|
+
const transformedValue = transform ? transform(newValue) : newValue;
|
|
130
|
+
parentUniformUpdate(instanceId, propName, transformedValue);
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
});
|
|
135
|
+
|
|
136
|
+
// Watch blend mode, opacity, and masking changes
|
|
137
|
+
$effect(() => {
|
|
138
|
+
// Only run after component is registered
|
|
139
|
+
if (!isRegistered) return;
|
|
140
|
+
|
|
141
|
+
const metadata: NodeMetadata = {
|
|
142
|
+
blendMode,
|
|
143
|
+
opacity,
|
|
144
|
+
id,
|
|
145
|
+
mask: maskSource ? {
|
|
146
|
+
source: maskSource,
|
|
147
|
+
type: maskType || 'alpha'
|
|
148
|
+
} : undefined,
|
|
149
|
+
renderOrder: 0
|
|
150
|
+
};
|
|
151
|
+
parentMetadataUpdate(instanceId, metadata);
|
|
152
|
+
});
|
|
153
|
+
|
|
154
|
+
// Register this component after mount to ensure parent is ready
|
|
155
|
+
onMount(() => {
|
|
156
|
+
// Debug and safety check before registration
|
|
157
|
+
console.log('componentDefinition:', componentDefinition);
|
|
158
|
+
console.log('fragmentNode type:', typeof componentDefinition?.fragmentNode);
|
|
159
|
+
console.log('fragmentNode:', componentDefinition?.fragmentNode);
|
|
160
|
+
|
|
161
|
+
// Register this component with safety check
|
|
162
|
+
if (componentDefinition && typeof componentDefinition.fragmentNode === 'function') {
|
|
163
|
+
console.log(`Registering ${componentDefinition.name} with ID: ${instanceId}, parent: ${parentId}`);
|
|
164
|
+
|
|
165
|
+
parentRegister(
|
|
166
|
+
instanceId,
|
|
167
|
+
componentDefinition.fragmentNode,
|
|
168
|
+
parentId,
|
|
169
|
+
{
|
|
170
|
+
blendMode,
|
|
171
|
+
opacity,
|
|
172
|
+
id,
|
|
173
|
+
mask: maskSource ? {
|
|
174
|
+
source: maskSource,
|
|
175
|
+
type: maskType || 'alpha'
|
|
176
|
+
} as MaskConfig : undefined,
|
|
177
|
+
renderOrder: 0
|
|
178
|
+
},
|
|
179
|
+
uniforms
|
|
180
|
+
);
|
|
181
|
+
|
|
182
|
+
console.log(`${componentDefinition.name} registered successfully`);
|
|
183
|
+
|
|
184
|
+
// Set flag to enable effects after successful registration
|
|
185
|
+
isRegistered = true;
|
|
186
|
+
} else {
|
|
187
|
+
console.error('componentDefinition.fragmentNode is not a function:', {
|
|
188
|
+
componentDefinition,
|
|
189
|
+
fragmentNode: componentDefinition?.fragmentNode,
|
|
190
|
+
type: typeof componentDefinition?.fragmentNode
|
|
191
|
+
});
|
|
192
|
+
}
|
|
193
|
+
});
|
|
194
|
+
|
|
195
|
+
// Clean up node from registry when component is unmounted
|
|
196
|
+
onDestroy(() => {
|
|
197
|
+
isRegistered = false;
|
|
198
|
+
parentRegister(instanceId, null, null, null, null);
|
|
199
|
+
});
|
|
200
|
+
</script>
|
|
201
|
+
|
|
202
|
+
<slot></slot>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { type BlendMode } from 'shaders-core';
|
|
2
|
+
import { type ComponentProps } from 'shaders-core/pixelate';
|
|
3
|
+
/**
|
|
4
|
+
* Define component props including blend mode, opacity, and masking
|
|
5
|
+
*/
|
|
6
|
+
interface ExtendedComponentProps extends Partial<ComponentProps> {
|
|
7
|
+
blendMode?: BlendMode;
|
|
8
|
+
opacity?: number;
|
|
9
|
+
id?: string;
|
|
10
|
+
maskSource?: string;
|
|
11
|
+
maskType?: string;
|
|
12
|
+
}
|
|
13
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
14
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
15
|
+
$$bindings?: Bindings;
|
|
16
|
+
} & Exports;
|
|
17
|
+
(internal: unknown, props: Props & {
|
|
18
|
+
$$events?: Events;
|
|
19
|
+
$$slots?: Slots;
|
|
20
|
+
}): Exports & {
|
|
21
|
+
$set?: any;
|
|
22
|
+
$on?: any;
|
|
23
|
+
};
|
|
24
|
+
z_$$bindings?: Bindings;
|
|
25
|
+
}
|
|
26
|
+
type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
|
|
27
|
+
default: any;
|
|
28
|
+
} ? Props extends Record<string, never> ? any : {
|
|
29
|
+
children?: any;
|
|
30
|
+
} : {});
|
|
31
|
+
declare const Pixelate: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<ExtendedComponentProps, {
|
|
32
|
+
default: {};
|
|
33
|
+
}>, {
|
|
34
|
+
[evt: string]: CustomEvent<any>;
|
|
35
|
+
}, {
|
|
36
|
+
default: {};
|
|
37
|
+
}, {}, "">;
|
|
38
|
+
type Pixelate = InstanceType<typeof Pixelate>;
|
|
39
|
+
export default Pixelate;
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { getContext, setContext, onMount, onDestroy } from 'svelte';
|
|
3
|
+
import {
|
|
4
|
+
createUniformsMap,
|
|
5
|
+
type UniformsMap,
|
|
6
|
+
type BlendMode,
|
|
7
|
+
type NodeMetadata,
|
|
8
|
+
type PropConfig,
|
|
9
|
+
type MaskConfig
|
|
10
|
+
} from 'shaders-core';
|
|
11
|
+
|
|
12
|
+
// @ts-ignore - this import is replaced at build time
|
|
13
|
+
import { componentDefinition, type ComponentProps } from 'shaders-core/radialGradient';
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Define component props including blend mode, opacity, and masking
|
|
17
|
+
*/
|
|
18
|
+
interface ExtendedComponentProps extends Partial<ComponentProps> {
|
|
19
|
+
blendMode?: BlendMode;
|
|
20
|
+
opacity?: number;
|
|
21
|
+
id?: string;
|
|
22
|
+
maskSource?: string;
|
|
23
|
+
maskType?: string;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
// Define the component props and their default values from the shader definition
|
|
27
|
+
const componentDefaults = {
|
|
28
|
+
blendMode: 'normal' as BlendMode,
|
|
29
|
+
// opacity intentionally has no default - handled by renderer
|
|
30
|
+
...Object.entries(componentDefinition.props).reduce(
|
|
31
|
+
(acc, [key, config]) => {
|
|
32
|
+
acc[key] = (config as unknown as PropConfig<typeof config>).default;
|
|
33
|
+
return acc;
|
|
34
|
+
},
|
|
35
|
+
{} as Record<string, any>
|
|
36
|
+
)
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
// Declare props using Svelte 5's syntax with defaults
|
|
40
|
+
const props = $props<ExtendedComponentProps>();
|
|
41
|
+
|
|
42
|
+
// Apply defaults manually since Svelte 5 doesn't have withDefaults equivalent
|
|
43
|
+
const blendMode = props.blendMode ?? componentDefaults.blendMode;
|
|
44
|
+
const opacity = props.opacity; // No default - handled by renderer
|
|
45
|
+
const id = props.id;
|
|
46
|
+
const maskSource = props.maskSource;
|
|
47
|
+
const maskType = props.maskType;
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* FIRST: Get the parent ID from context BEFORE setting our own context
|
|
51
|
+
*/
|
|
52
|
+
const parentId = getContext<string>('ombreParentId');
|
|
53
|
+
if (parentId === undefined) {
|
|
54
|
+
throw new Error('Shader components must be used inside an <Shader> component or another shader component');
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Use the provided ID or generate a unique identifier for this component instance
|
|
59
|
+
*/
|
|
60
|
+
const instanceId = id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
|
|
61
|
+
|
|
62
|
+
/**
|
|
63
|
+
* THEN: Provide our unique identifier to child components
|
|
64
|
+
*/
|
|
65
|
+
setContext('ombreParentId', instanceId);
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* Creates a non-reactive object containing only props that differ from defaults
|
|
69
|
+
* This optimization prevents unnecessary GPU uniform updates for unchanged values
|
|
70
|
+
* Special props like blendMode and opacity are handled separately
|
|
71
|
+
*/
|
|
72
|
+
const shaderReadyProps = $derived.by(() => {
|
|
73
|
+
let baseProps = { ...componentDefaults };
|
|
74
|
+
|
|
75
|
+
// Only include props that differ from defaults (excluding special props)
|
|
76
|
+
for (const key in props) {
|
|
77
|
+
if (key !== 'blendMode' && key !== 'opacity' && key !== 'id' && key !== 'maskSource' && key !== 'maskType') {
|
|
78
|
+
const propValue = (props as any)[key];
|
|
79
|
+
const defaultValue = (componentDefaults as any)[key];
|
|
80
|
+
if (propValue !== undefined && propValue !== defaultValue) {
|
|
81
|
+
(baseProps as any)[key] = propValue;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
return baseProps;
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
/**
|
|
89
|
+
* Creates the GPU uniform values map using only the changed props
|
|
90
|
+
*/
|
|
91
|
+
const uniforms: UniformsMap = createUniformsMap(componentDefinition, shaderReadyProps, instanceId);
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* Get the node registration function from parent context
|
|
95
|
+
*/
|
|
96
|
+
const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null) => void>('ombreNodeRegister');
|
|
97
|
+
if (parentRegister === undefined) {
|
|
98
|
+
throw new Error('Shader components must be used inside an <Shader> component or another shader component');
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/**
|
|
102
|
+
* Get the uniform update function from parent context
|
|
103
|
+
*/
|
|
104
|
+
const parentUniformUpdate = getContext<(nodeId: string, uniformName: string, value: any) => void>('ombreUniformUpdate');
|
|
105
|
+
if (parentUniformUpdate === undefined) {
|
|
106
|
+
throw new Error('Shader components require ombreUniformUpdate from parent');
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Get the metadata update function from parent context
|
|
111
|
+
*/
|
|
112
|
+
const parentMetadataUpdate = getContext<(nodeId: string, metadata: NodeMetadata) => void>('ombreMetadataUpdate');
|
|
113
|
+
if (parentMetadataUpdate === undefined) {
|
|
114
|
+
throw new Error('Shader components require ombreMetadataUpdate from parent');
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// Flag to track when component is registered
|
|
118
|
+
let isRegistered = $state(false);
|
|
119
|
+
|
|
120
|
+
// Setup uniform watchers with registration guard
|
|
121
|
+
Object.entries(uniforms).forEach(([propName, { uniform, transform }]) => {
|
|
122
|
+
$effect(() => {
|
|
123
|
+
// Only run after component is registered
|
|
124
|
+
if (!isRegistered) return;
|
|
125
|
+
|
|
126
|
+
if (uniform && uniform.value !== undefined) {
|
|
127
|
+
const newValue = (props as any)[propName];
|
|
128
|
+
if (newValue !== undefined) {
|
|
129
|
+
const transformedValue = transform ? transform(newValue) : newValue;
|
|
130
|
+
parentUniformUpdate(instanceId, propName, transformedValue);
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
});
|
|
135
|
+
|
|
136
|
+
// Watch blend mode, opacity, and masking changes
|
|
137
|
+
$effect(() => {
|
|
138
|
+
// Only run after component is registered
|
|
139
|
+
if (!isRegistered) return;
|
|
140
|
+
|
|
141
|
+
const metadata: NodeMetadata = {
|
|
142
|
+
blendMode,
|
|
143
|
+
opacity,
|
|
144
|
+
id,
|
|
145
|
+
mask: maskSource ? {
|
|
146
|
+
source: maskSource,
|
|
147
|
+
type: maskType || 'alpha'
|
|
148
|
+
} : undefined,
|
|
149
|
+
renderOrder: 0
|
|
150
|
+
};
|
|
151
|
+
parentMetadataUpdate(instanceId, metadata);
|
|
152
|
+
});
|
|
153
|
+
|
|
154
|
+
// Register this component after mount to ensure parent is ready
|
|
155
|
+
onMount(() => {
|
|
156
|
+
// Debug and safety check before registration
|
|
157
|
+
console.log('componentDefinition:', componentDefinition);
|
|
158
|
+
console.log('fragmentNode type:', typeof componentDefinition?.fragmentNode);
|
|
159
|
+
console.log('fragmentNode:', componentDefinition?.fragmentNode);
|
|
160
|
+
|
|
161
|
+
// Register this component with safety check
|
|
162
|
+
if (componentDefinition && typeof componentDefinition.fragmentNode === 'function') {
|
|
163
|
+
console.log(`Registering ${componentDefinition.name} with ID: ${instanceId}, parent: ${parentId}`);
|
|
164
|
+
|
|
165
|
+
parentRegister(
|
|
166
|
+
instanceId,
|
|
167
|
+
componentDefinition.fragmentNode,
|
|
168
|
+
parentId,
|
|
169
|
+
{
|
|
170
|
+
blendMode,
|
|
171
|
+
opacity,
|
|
172
|
+
id,
|
|
173
|
+
mask: maskSource ? {
|
|
174
|
+
source: maskSource,
|
|
175
|
+
type: maskType || 'alpha'
|
|
176
|
+
} as MaskConfig : undefined,
|
|
177
|
+
renderOrder: 0
|
|
178
|
+
},
|
|
179
|
+
uniforms
|
|
180
|
+
);
|
|
181
|
+
|
|
182
|
+
console.log(`${componentDefinition.name} registered successfully`);
|
|
183
|
+
|
|
184
|
+
// Set flag to enable effects after successful registration
|
|
185
|
+
isRegistered = true;
|
|
186
|
+
} else {
|
|
187
|
+
console.error('componentDefinition.fragmentNode is not a function:', {
|
|
188
|
+
componentDefinition,
|
|
189
|
+
fragmentNode: componentDefinition?.fragmentNode,
|
|
190
|
+
type: typeof componentDefinition?.fragmentNode
|
|
191
|
+
});
|
|
192
|
+
}
|
|
193
|
+
});
|
|
194
|
+
|
|
195
|
+
// Clean up node from registry when component is unmounted
|
|
196
|
+
onDestroy(() => {
|
|
197
|
+
isRegistered = false;
|
|
198
|
+
parentRegister(instanceId, null, null, null, null);
|
|
199
|
+
});
|
|
200
|
+
</script>
|
|
201
|
+
|
|
202
|
+
<slot></slot>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { type BlendMode } from 'shaders-core';
|
|
2
|
+
import { type ComponentProps } from 'shaders-core/radialGradient';
|
|
3
|
+
/**
|
|
4
|
+
* Define component props including blend mode, opacity, and masking
|
|
5
|
+
*/
|
|
6
|
+
interface ExtendedComponentProps extends Partial<ComponentProps> {
|
|
7
|
+
blendMode?: BlendMode;
|
|
8
|
+
opacity?: number;
|
|
9
|
+
id?: string;
|
|
10
|
+
maskSource?: string;
|
|
11
|
+
maskType?: string;
|
|
12
|
+
}
|
|
13
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
14
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
15
|
+
$$bindings?: Bindings;
|
|
16
|
+
} & Exports;
|
|
17
|
+
(internal: unknown, props: Props & {
|
|
18
|
+
$$events?: Events;
|
|
19
|
+
$$slots?: Slots;
|
|
20
|
+
}): Exports & {
|
|
21
|
+
$set?: any;
|
|
22
|
+
$on?: any;
|
|
23
|
+
};
|
|
24
|
+
z_$$bindings?: Bindings;
|
|
25
|
+
}
|
|
26
|
+
type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
|
|
27
|
+
default: any;
|
|
28
|
+
} ? Props extends Record<string, never> ? any : {
|
|
29
|
+
children?: any;
|
|
30
|
+
} : {});
|
|
31
|
+
declare const RadialGradient: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<ExtendedComponentProps, {
|
|
32
|
+
default: {};
|
|
33
|
+
}>, {
|
|
34
|
+
[evt: string]: CustomEvent<any>;
|
|
35
|
+
}, {
|
|
36
|
+
default: {};
|
|
37
|
+
}, {}, "">;
|
|
38
|
+
type RadialGradient = InstanceType<typeof RadialGradient>;
|
|
39
|
+
export default RadialGradient;
|
package/dist/svelte/index.d.ts
CHANGED
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
export { default as Ascii } from './components/Ascii.svelte';
|
|
2
|
+
export { default as Checkerboard } from './components/Checkerboard.svelte';
|
|
2
3
|
export { default as Circle } from './components/Circle.svelte';
|
|
3
4
|
export { default as DotGrid } from './components/DotGrid.svelte';
|
|
4
5
|
export { default as FilmGrain } from './components/FilmGrain.svelte';
|
|
5
6
|
export { default as GlassTiles } from './components/GlassTiles.svelte';
|
|
6
7
|
export { default as Grayscale } from './components/Grayscale.svelte';
|
|
8
|
+
export { default as Grid } from './components/Grid.svelte';
|
|
7
9
|
export { default as GridDistortion } from './components/GridDistortion.svelte';
|
|
8
10
|
export { default as HueShift } from './components/HueShift.svelte';
|
|
11
|
+
export { default as ImageTexture } from './components/ImageTexture.svelte';
|
|
9
12
|
export { default as Invert } from './components/Invert.svelte';
|
|
10
13
|
export { default as LinearGradient } from './components/LinearGradient.svelte';
|
|
11
14
|
export { default as Liquify } from './components/Liquify.svelte';
|
|
15
|
+
export { default as Pixelate } from './components/Pixelate.svelte';
|
|
12
16
|
export { default as Posterize } from './components/Posterize.svelte';
|
|
17
|
+
export { default as RadialGradient } from './components/RadialGradient.svelte';
|
|
13
18
|
export { default as Ripple } from './components/Ripple.svelte';
|
|
14
19
|
export { default as Saturation } from './components/Saturation.svelte';
|
|
15
20
|
export { default as SolidColor } from './components/SolidColor.svelte';
|
package/dist/svelte/index.js
CHANGED
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
export { default as Ascii } from './components/Ascii.svelte';
|
|
2
|
+
export { default as Checkerboard } from './components/Checkerboard.svelte';
|
|
2
3
|
export { default as Circle } from './components/Circle.svelte';
|
|
3
4
|
export { default as DotGrid } from './components/DotGrid.svelte';
|
|
4
5
|
export { default as FilmGrain } from './components/FilmGrain.svelte';
|
|
5
6
|
export { default as GlassTiles } from './components/GlassTiles.svelte';
|
|
6
7
|
export { default as Grayscale } from './components/Grayscale.svelte';
|
|
8
|
+
export { default as Grid } from './components/Grid.svelte';
|
|
7
9
|
export { default as GridDistortion } from './components/GridDistortion.svelte';
|
|
8
10
|
export { default as HueShift } from './components/HueShift.svelte';
|
|
11
|
+
export { default as ImageTexture } from './components/ImageTexture.svelte';
|
|
9
12
|
export { default as Invert } from './components/Invert.svelte';
|
|
10
13
|
export { default as LinearGradient } from './components/LinearGradient.svelte';
|
|
11
14
|
export { default as Liquify } from './components/Liquify.svelte';
|
|
15
|
+
export { default as Pixelate } from './components/Pixelate.svelte';
|
|
12
16
|
export { default as Posterize } from './components/Posterize.svelte';
|
|
17
|
+
export { default as RadialGradient } from './components/RadialGradient.svelte';
|
|
13
18
|
export { default as Ripple } from './components/Ripple.svelte';
|
|
14
19
|
export { default as Saturation } from './components/Saturation.svelte';
|
|
15
20
|
export { default as SolidColor } from './components/SolidColor.svelte';
|
|
@@ -46,17 +46,22 @@ export function generatePresetCode(preset) {
|
|
|
46
46
|
// Available components (auto-generated)
|
|
47
47
|
export const availableComponents = [
|
|
48
48
|
'Ascii',
|
|
49
|
+
'Checkerboard',
|
|
49
50
|
'Circle',
|
|
50
51
|
'DotGrid',
|
|
51
52
|
'FilmGrain',
|
|
52
53
|
'GlassTiles',
|
|
53
54
|
'Grayscale',
|
|
55
|
+
'Grid',
|
|
54
56
|
'GridDistortion',
|
|
55
57
|
'HueShift',
|
|
58
|
+
'ImageTexture',
|
|
56
59
|
'Invert',
|
|
57
60
|
'LinearGradient',
|
|
58
61
|
'Liquify',
|
|
62
|
+
'Pixelate',
|
|
59
63
|
'Posterize',
|
|
64
|
+
'RadialGradient',
|
|
60
65
|
'Ripple',
|
|
61
66
|
'Saturation',
|
|
62
67
|
'SolidColor',
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { BlendMode } from 'shaders-core';
|
|
2
|
+
import { ComponentProps } from 'shaders-core/ascii';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Define component props including blend mode, opacity, and masking
|
|
6
|
+
*/
|
|
7
|
+
interface ExtendedComponentProps extends Partial<ComponentProps> {
|
|
8
|
+
blendMode?: BlendMode;
|
|
9
|
+
opacity?: number;
|
|
10
|
+
id?: string;
|
|
11
|
+
maskSource?: string;
|
|
12
|
+
maskType?: string;
|
|
13
|
+
}
|
|
14
|
+
declare function __VLS_template(): {
|
|
15
|
+
default?(_: {}): any;
|
|
16
|
+
};
|
|
17
|
+
declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ExtendedComponentProps>, {
|
|
18
|
+
blendMode: string;
|
|
19
|
+
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ExtendedComponentProps>, {
|
|
20
|
+
blendMode: string;
|
|
21
|
+
}>>> & Readonly<{}>, {
|
|
22
|
+
blendMode: BlendMode;
|
|
23
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
24
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
25
|
+
export default _default;
|
|
26
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
27
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
28
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
29
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
30
|
+
} : {
|
|
31
|
+
type: import('vue').PropType<T[K]>;
|
|
32
|
+
required: true;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
type __VLS_WithDefaults<P, D> = {
|
|
36
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
37
|
+
default: D[K];
|
|
38
|
+
}> : P[K];
|
|
39
|
+
};
|
|
40
|
+
type __VLS_Prettify<T> = {
|
|
41
|
+
[K in keyof T]: T[K];
|
|
42
|
+
} & {};
|
|
43
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
44
|
+
new (): {
|
|
45
|
+
$slots: S;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=Ascii.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Ascii.vue.d.ts","sourceRoot":"","sources":["../../src/components/Ascii.vue"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,SAAS,EAIf,MAAM,cAAc,CAAA;AAGrB,OAAO,EAAsB,KAAK,cAAc,EAAC,MAAM,oBAAoB,CAAA;AAI3E;;GAEG;AACH,UAAU,sBAAuB,SAAQ,OAAO,CAAC,cAAc,CAAC;IAC9D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAyKD,iBAAS,cAAc;qBA0BM,GAAG;EAG/B;AAQD,QAAA,MAAM,eAAe;;;;;eAnNP,SAAS;4EAyNrB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
|