Skip to content

Commit

Permalink
Make effect names optional (#326)
Browse files Browse the repository at this point in the history 
Effects that do not have names cannot be mutated/animated after
creation.

Also add some more documentation around
createShader/createDynamicShader/createEffect.
  • Loading branch information
@frank-weindel
frank-weindel committed Jul 8, 2024
2 parents db12659 + 0d53c01 commit 768c028
Show file tree
Hide file tree
Showing 10 changed files with 78 additions and 62 deletions.
1 change: 0 additions & 1 deletion examples/tests/destroy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ export default async function test({
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'radius',
props: {
radius: 50,
Expand Down
14 changes: 0 additions & 14 deletions examples/tests/ds-effect-radial-progress.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,12 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'radialProgress',
props: {
progress: 0.6,
},
},
{
name: 'e2',
type: 'linearGradient',
props: {
angle: degToRad(90),
Expand All @@ -66,22 +64,19 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'radialProgress',
props: {
progress: 1,
color: 0x000000ff,
},
},
{
name: 'e2',
type: 'radialProgress',
props: {
progress: 0.2,
},
},
{
name: 'e3',
type: 'linearGradient',
props: {
angle: degToRad(90),
Expand All @@ -102,7 +97,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'radialProgress',
props: {
progress: 1,
Expand All @@ -111,15 +105,13 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
},
},
{
name: 'e2',
type: 'radialProgress',
props: {
progress: 0.2,
range: degToRad(180),
},
},
{
name: 'e3',
type: 'linearGradient',
props: {
angle: degToRad(90),
Expand All @@ -140,7 +132,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'radialProgress',
props: {
progress: 1,
Expand All @@ -150,7 +141,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
},
},
{
name: 'e2',
type: 'radialProgress',
props: {
progress: 0.2,
Expand All @@ -159,7 +149,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
},
},
{
name: 'e3',
type: 'linearGradient',
props: {
angle: degToRad(90),
Expand All @@ -180,7 +169,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'radialProgress',
props: {
progress: 1,
Expand All @@ -191,7 +179,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
},
},
{
name: 'e2',
type: 'radialProgress',
props: {
progress: 0.2,
Expand All @@ -201,7 +188,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
},
},
{
name: 'e3',
type: 'linearGradient',
props: {
angle: degToRad(90),
Expand Down
6 changes: 0 additions & 6 deletions examples/tests/dynamic-shader-circle-border-radius.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'radius',
props: {
radius: 400 / 2,
Expand Down Expand Up @@ -73,14 +72,12 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'radius',
props: {
radius: 400 / 2,
},
},
{
name: 'e2',
type: 'border',
props: {
width: 6,
Expand Down Expand Up @@ -110,7 +107,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'radius',
props: {
radius: 152 / 2,
Expand Down Expand Up @@ -139,14 +135,12 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'radius',
props: {
radius: 152 / 2,
},
},
{
name: 'e2',
type: 'border',
props: {
width: 6,
Expand Down
15 changes: 0 additions & 15 deletions examples/tests/dynamic-shader.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,12 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'radius',
props: {
radius: 50,
},
},
{
name: 'e2',
type: 'linearGradient',
props: {
angle: 0,
Expand All @@ -56,15 +54,13 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
},
},
{
name: 'e3',
type: 'border',
props: {
width: 30,
color: 0xffffffff,
},
},
{
name: 'e4',
type: 'linearGradient',
props: {
angle: degToRad(40),
Expand All @@ -88,15 +84,13 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'borderTop',
props: {
width: 30,
color: 0xff0000ff,
},
},
{
name: 'e2',
type: 'borderBottom',
props: {
width: 30,
Expand All @@ -116,7 +110,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'linearGradient',
props: {
angle: degToRad(90),
Expand All @@ -128,7 +121,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
},
},
{
name: 'e2',
type: 'radius',
props: {
radius: 50,
Expand All @@ -148,15 +140,13 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'borderRight',
props: {
width: 30,
color: 0xff00ffff,
},
},
{
name: 'e2',
type: 'borderLeft',
props: {
width: 15,
Expand All @@ -177,7 +167,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'linearGradient',
props: {
angle: degToRad(180),
Expand All @@ -186,7 +175,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
},
},
{
name: 'e2',
type: 'linearGradient',
props: {
angle: degToRad(-90),
Expand All @@ -208,14 +196,12 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'radius',
props: {
radius: 100,
},
},
{
name: 'e2',
type: 'fadeOut',
props: {
fade: [200, 100, 0, 0],
Expand All @@ -234,7 +220,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'radialGradient',
props: {
colors: [0xff0000ff, 0x00ff00ff, 0x00000000],
Expand Down
6 changes: 0 additions & 6 deletions examples/tests/hole-punch-effect.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'holePunch',
props: {
width: 200,
Expand All @@ -64,7 +63,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'holePunch',
props: {
width: 200,
Expand All @@ -75,7 +73,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
},
},
{
name: 'e2',
type: 'linearGradient',
props: {
angle: degToRad(40),
Expand All @@ -99,7 +96,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'linearGradient',
props: {
angle: degToRad(40),
Expand All @@ -110,7 +106,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
},
},
{
name: 'e2',
type: 'holePunch',
props: {
width: 400,
Expand All @@ -134,7 +129,6 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
shader: renderer.createShader('DynamicShader', {
effects: [
{
name: 'e1',
type: 'holePunch',
props: {
width: 400,
Expand Down
22 changes: 15 additions & 7 deletions examples/tests/shader-animation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,21 @@ export default async function test({
y: 540,
color: 0x00ff00ff,
shader: renderer.createDynamicShader([
renderer.createEffect('r1', 'radius', {
radius: 0,
}),
renderer.createEffect('e1', 'border', {
color: 0xff00ffff,
width: 10,
}),
renderer.createEffect(
'radius',
{
radius: 0,
},
'r1',
),
renderer.createEffect(
'border',
{
color: 0xff00ffff,
width: 10,
},
'e1',
),
]),
parent: testRoot,
});
Expand Down
4 changes: 2 additions & 2 deletions src/core/CoreShaderManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ export class CoreShaderManager {
}

loadDynamicShader<
T extends DynamicEffects<[...{ name: string; type: keyof EffectMap }[]]>,
T extends DynamicEffects<[...{ name?: string; type: keyof EffectMap }[]]>,
>(props: DynamicShaderProps): DynamicShaderController<T> {
if (!this.renderer) {
throw new Error(`Renderer is not been defined`);
Expand Down Expand Up @@ -270,7 +270,7 @@ export class CoreShaderManager {
}

private _createDynShaderCtr<
T extends DynamicEffects<[...{ name: string; type: keyof EffectMap }[]]>,
T extends DynamicEffects<[...{ name?: string; type: keyof EffectMap }[]]>,
>(
shader: InstanceType<ShaderMap['DynamicShader']>,
props: ExtractProps<ShaderMap['DynamicShader']>,
Expand Down
Loading

0 comments on commit 768c028

Please sign in to comment.