/
Pattern.ts
35 lines (30 loc) · 893 Bytes
/
Pattern.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import {SimpleSignal} from '@motion-canvas/core';
import {computed} from '../decorators/computed';
import {initial, initializeSignals, signal} from '../decorators/signal';
export type CanvasRepetition =
| null
| 'repeat'
| 'repeat-x'
| 'repeat-y'
| 'no-repeat';
// TODO Support custom transformation matrices
export interface PatternProps {
image: CanvasImageSource;
repetition?: CanvasRepetition;
}
export class Pattern {
@signal()
public declare readonly image: SimpleSignal<CanvasImageSource, this>;
@initial(null)
@signal()
public declare readonly repetition: SimpleSignal<CanvasRepetition, this>;
public constructor(props: PatternProps) {
initializeSignals(this, props);
}
@computed()
public canvasPattern(
context: CanvasRenderingContext2D,
): CanvasPattern | null {
return context.createPattern(this.image(), this.repetition());
}
}