etro 0.7.0 → 0.8.2
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/.github/workflows/nodejs.yml +4 -2
- package/.github/workflows/shipjs-trigger.yml +29 -0
- package/CHANGELOG.md +73 -12
- package/CODE_OF_CONDUCT.md +5 -5
- package/CONTRIBUTING.md +31 -77
- package/README.md +81 -26
- package/dist/effect/base.d.ts +51 -0
- package/dist/effect/brightness.d.ts +16 -0
- package/dist/effect/channels.d.ts +23 -0
- package/dist/effect/chroma-key.d.ts +23 -0
- package/dist/effect/contrast.d.ts +15 -0
- package/dist/effect/elliptical-mask.d.ts +31 -0
- package/dist/effect/gaussian-blur.d.ts +60 -0
- package/dist/effect/grayscale.d.ts +7 -0
- package/dist/effect/index.d.ts +15 -0
- package/dist/effect/pixelate.d.ts +18 -0
- package/dist/effect/shader.d.ts +99 -0
- package/dist/effect/stack.d.ts +23 -0
- package/dist/effect/transform.d.ts +73 -0
- package/dist/etro-cjs.js +9287 -3331
- package/dist/etro-iife.js +9229 -3273
- package/dist/etro.d.ts +7 -0
- package/dist/event.d.ts +35 -0
- package/dist/index.d.ts +6 -0
- package/dist/layer/audio-source.d.ts +24 -0
- package/dist/layer/audio.d.ts +14 -0
- package/dist/layer/base.d.ts +82 -0
- package/dist/layer/image.d.ts +6 -0
- package/dist/layer/index.d.ts +11 -0
- package/dist/layer/text.d.ts +60 -0
- package/dist/layer/video.d.ts +11 -0
- package/dist/layer/visual-source.d.ts +32 -0
- package/dist/layer/visual.d.ts +58 -0
- package/dist/movie.d.ts +192 -0
- package/dist/object.d.ts +12 -0
- package/dist/util.d.ts +125 -0
- package/eslint.conf.js +2 -9
- package/eslint.example-conf.js +9 -0
- package/eslint.test-conf.js +1 -0
- package/eslint.typescript-conf.js +5 -0
- package/examples/application/readme-screenshot.html +16 -17
- package/examples/application/video-player.html +10 -11
- package/examples/application/webcam.html +6 -6
- package/examples/introduction/audio.html +30 -18
- package/examples/introduction/effects.html +37 -14
- package/examples/introduction/export.html +32 -25
- package/examples/introduction/functions.html +6 -4
- package/examples/introduction/hello-world1.html +9 -5
- package/examples/introduction/hello-world2.html +5 -5
- package/examples/introduction/keyframes.html +35 -23
- package/examples/introduction/media.html +26 -18
- package/examples/introduction/text.html +9 -5
- package/karma.conf.js +5 -3
- package/package.json +36 -14
- package/rollup.config.js +15 -4
- package/scripts/gen-effect-samples.html +26 -25
- package/scripts/save-effect-samples.js +14 -15
- package/ship.config.js +80 -0
- package/src/effect/base.ts +115 -0
- package/src/effect/brightness.ts +43 -0
- package/src/effect/channels.ts +50 -0
- package/src/effect/chroma-key.ts +82 -0
- package/src/effect/contrast.ts +42 -0
- package/src/effect/elliptical-mask.ts +75 -0
- package/src/effect/gaussian-blur.ts +232 -0
- package/src/effect/grayscale.ts +34 -0
- package/src/effect/index.ts +22 -0
- package/src/effect/pixelate.ts +58 -0
- package/src/effect/shader.ts +557 -0
- package/src/effect/stack.ts +78 -0
- package/src/effect/transform.ts +193 -0
- package/src/etro.ts +26 -0
- package/src/event.ts +112 -0
- package/src/index.ts +8 -0
- package/src/layer/audio-source.ts +219 -0
- package/src/layer/audio.ts +34 -0
- package/src/layer/base.ts +175 -0
- package/src/layer/image.ts +8 -0
- package/src/layer/index.ts +13 -0
- package/src/layer/text.ts +138 -0
- package/src/layer/video.ts +15 -0
- package/src/layer/visual-source.ts +150 -0
- package/src/layer/visual.ts +197 -0
- package/src/movie.ts +707 -0
- package/src/object.ts +14 -0
- package/src/util.ts +466 -0
- package/tsconfig.json +8 -0
- package/docs/effect.js.html +0 -1215
- package/docs/event.js.html +0 -145
- package/docs/index.html +0 -81
- package/docs/index.js.html +0 -92
- package/docs/layer.js.html +0 -888
- package/docs/module-effect-GaussianBlurComponent.html +0 -345
- package/docs/module-effect.Brightness.html +0 -339
- package/docs/module-effect.Channels.html +0 -319
- package/docs/module-effect.ChromaKey.html +0 -611
- package/docs/module-effect.Contrast.html +0 -339
- package/docs/module-effect.EllipticalMask.html +0 -200
- package/docs/module-effect.GaussianBlur.html +0 -202
- package/docs/module-effect.GaussianBlurHorizontal.html +0 -242
- package/docs/module-effect.GaussianBlurVertical.html +0 -242
- package/docs/module-effect.Pixelate.html +0 -330
- package/docs/module-effect.Shader.html +0 -1227
- package/docs/module-effect.Stack.html +0 -406
- package/docs/module-effect.Transform.Matrix.html +0 -193
- package/docs/module-effect.Transform.html +0 -1174
- package/docs/module-effect.html +0 -148
- package/docs/module-event.html +0 -473
- package/docs/module-index.html +0 -186
- package/docs/module-layer-Media.html +0 -1116
- package/docs/module-layer-MediaMixin.html +0 -164
- package/docs/module-layer.Audio.html +0 -1188
- package/docs/module-layer.Base.html +0 -629
- package/docs/module-layer.Image.html +0 -1421
- package/docs/module-layer.Text.html +0 -1731
- package/docs/module-layer.Video.html +0 -1938
- package/docs/module-layer.Visual.html +0 -1698
- package/docs/module-layer.html +0 -137
- package/docs/module-movie.html +0 -3118
- package/docs/module-util.Color.html +0 -702
- package/docs/module-util.Font.html +0 -395
- package/docs/module-util.html +0 -845
- package/docs/movie.js.html +0 -689
- package/docs/scripts/collapse.js +0 -20
- package/docs/scripts/linenumber.js +0 -25
- package/docs/scripts/nav.js +0 -12
- package/docs/scripts/polyfill.js +0 -4
- package/docs/scripts/prettify/Apache-License-2.0.txt +0 -202
- package/docs/scripts/prettify/lang-css.js +0 -2
- package/docs/scripts/prettify/prettify.js +0 -28
- package/docs/scripts/search.js +0 -83
- package/docs/styles/jsdoc.css +0 -671
- package/docs/styles/prettify.css +0 -79
- package/docs/util.js.html +0 -503
- package/screenshots/2019-08-17_0.png +0 -0
- package/spec/assets/effect/gaussian-blur-horizontal.png +0 -0
- package/spec/assets/effect/gaussian-blur-vertical.png +0 -0
- package/spec/assets/effect/original.png +0 -0
- package/spec/assets/effect/pixelate.png +0 -0
- package/spec/assets/effect/transform/multiply.png +0 -0
- package/spec/assets/effect/transform/rotate.png +0 -0
- package/spec/assets/effect/transform/scale-fraction.png +0 -0
- package/spec/assets/effect/transform/scale.png +0 -0
- package/spec/assets/effect/transform/translate-fraction.png +0 -0
- package/spec/assets/effect/transform/translate.png +0 -0
- package/spec/assets/layer/audio.wav +0 -0
- package/spec/assets/layer/image.jpg +0 -0
- package/spec/effect.spec.js +0 -352
- package/spec/event.spec.js +0 -25
- package/spec/layer.spec.js +0 -150
- package/spec/movie.spec.js +0 -162
- package/spec/util.spec.js +0 -285
- package/src/effect.js +0 -1268
- package/src/event.js +0 -78
- package/src/index.js +0 -23
- package/src/layer.js +0 -897
- package/src/movie.js +0 -637
- package/src/util.js +0 -505
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { Stack } from './stack';
|
|
2
|
+
import { Shader } from './shader';
|
|
3
|
+
import { Movie } from '../movie';
|
|
4
|
+
import { Visual } from '../layer';
|
|
5
|
+
export interface GaussianBlurOptions {
|
|
6
|
+
radius: number;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Applies a Gaussian blur
|
|
10
|
+
*/
|
|
11
|
+
export declare class GaussianBlur extends Stack {
|
|
12
|
+
constructor(options: GaussianBlurOptions);
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Shared class for both horizontal and vertical gaussian blur classes.
|
|
16
|
+
*/
|
|
17
|
+
declare class GaussianBlurComponent extends Shader {
|
|
18
|
+
radius: number;
|
|
19
|
+
shape: HTMLCanvasElement;
|
|
20
|
+
private _radiusCache;
|
|
21
|
+
/**
|
|
22
|
+
* @param src - fragment source code (specific to which component -
|
|
23
|
+
* horizontal or vertical)
|
|
24
|
+
* @param radius - only integers are currently supported
|
|
25
|
+
*/
|
|
26
|
+
constructor(options: {
|
|
27
|
+
fragmentSource: string;
|
|
28
|
+
radius: number;
|
|
29
|
+
});
|
|
30
|
+
apply(target: Movie | Visual, reltime: number): void;
|
|
31
|
+
/**
|
|
32
|
+
* Render Gaussian kernel to a canvas for use in shader.
|
|
33
|
+
* @param kernel
|
|
34
|
+
* @private
|
|
35
|
+
*
|
|
36
|
+
* @return
|
|
37
|
+
*/
|
|
38
|
+
private static _render1DKernel;
|
|
39
|
+
private static _gen1DKernel;
|
|
40
|
+
private static _genPascalRow;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Horizontal component of gaussian blur
|
|
44
|
+
*/
|
|
45
|
+
export declare class GaussianBlurHorizontal extends GaussianBlurComponent {
|
|
46
|
+
/**
|
|
47
|
+
* @param radius
|
|
48
|
+
*/
|
|
49
|
+
constructor(options: GaussianBlurOptions);
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Vertical component of gaussian blur
|
|
53
|
+
*/
|
|
54
|
+
export declare class GaussianBlurVertical extends GaussianBlurComponent {
|
|
55
|
+
/**
|
|
56
|
+
* @param radius
|
|
57
|
+
*/
|
|
58
|
+
constructor(options: GaussianBlurOptions);
|
|
59
|
+
}
|
|
60
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @module effect
|
|
3
|
+
*/
|
|
4
|
+
export * from './base';
|
|
5
|
+
export * from './brightness';
|
|
6
|
+
export * from './channels';
|
|
7
|
+
export * from './chroma-key';
|
|
8
|
+
export * from './contrast';
|
|
9
|
+
export * from './elliptical-mask';
|
|
10
|
+
export * from './gaussian-blur';
|
|
11
|
+
export * from './grayscale';
|
|
12
|
+
export * from './pixelate';
|
|
13
|
+
export * from './shader';
|
|
14
|
+
export * from './stack';
|
|
15
|
+
export * from './transform';
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Visual } from '../layer';
|
|
2
|
+
import { Movie } from '../movie';
|
|
3
|
+
import { Dynamic } from '../util';
|
|
4
|
+
import { Shader } from './shader';
|
|
5
|
+
export interface PixelateOptions {
|
|
6
|
+
pixelSize?: Dynamic<number>;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Breaks the target up into squares of `pixelSize` by `pixelSize`
|
|
10
|
+
*/
|
|
11
|
+
export declare class Pixelate extends Shader {
|
|
12
|
+
pixelSize: Dynamic<number>;
|
|
13
|
+
/**
|
|
14
|
+
* @param pixelSize
|
|
15
|
+
*/
|
|
16
|
+
constructor(options?: PixelateOptions);
|
|
17
|
+
apply(target: Movie | Visual, reltime: number): void;
|
|
18
|
+
}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { Visual } from '../layer/index';
|
|
2
|
+
import { Movie } from '../movie';
|
|
3
|
+
import { Base } from './base';
|
|
4
|
+
export interface UniformOptions {
|
|
5
|
+
type?: string;
|
|
6
|
+
defaultFloatComponent?: number;
|
|
7
|
+
}
|
|
8
|
+
export interface TextureOptions {
|
|
9
|
+
createUniform?: boolean;
|
|
10
|
+
target?: any;
|
|
11
|
+
level?: number;
|
|
12
|
+
internalFormat?: any;
|
|
13
|
+
srcFormat?: any;
|
|
14
|
+
srcType?: any;
|
|
15
|
+
wrapS?: any;
|
|
16
|
+
wrapT?: any;
|
|
17
|
+
minFilter?: any;
|
|
18
|
+
magFilter?: any;
|
|
19
|
+
}
|
|
20
|
+
export interface ShaderOptions {
|
|
21
|
+
fragmentSource?: string;
|
|
22
|
+
uniforms?: Record<string, (UniformOptions | string)>;
|
|
23
|
+
textures?: Record<string, TextureOptions>;
|
|
24
|
+
sourceTextureOptions?: TextureOptions;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* A hardware-accelerated pixel mapping using WebGL
|
|
28
|
+
*/
|
|
29
|
+
export declare class Shader extends Base {
|
|
30
|
+
/**
|
|
31
|
+
* WebGL texture units consumed by {@link Shader}
|
|
32
|
+
*/
|
|
33
|
+
static INTERNAL_TEXTURE_UNITS: number;
|
|
34
|
+
private static _DEFAULT_TEXTURE_OPTIONS;
|
|
35
|
+
private static _VERTEX_SOURCE;
|
|
36
|
+
private static _IDENTITY_FRAGMENT_SOURCE;
|
|
37
|
+
private _program;
|
|
38
|
+
private _buffers;
|
|
39
|
+
private _canvas;
|
|
40
|
+
private _gl;
|
|
41
|
+
private _uniformLocations;
|
|
42
|
+
private _attribLocations;
|
|
43
|
+
private _userUniforms;
|
|
44
|
+
private _userTextures;
|
|
45
|
+
private _sourceTextureOptions;
|
|
46
|
+
private _inputTexture;
|
|
47
|
+
/**
|
|
48
|
+
* @param fragmentSrc
|
|
49
|
+
* @param [userUniforms={}] - object mapping uniform id to an
|
|
50
|
+
* options object or a string (if you only need to provide the uniforms'
|
|
51
|
+
* type)
|
|
52
|
+
* @param [userTextures=[]]
|
|
53
|
+
* @param [sourceTextureOptions={}]
|
|
54
|
+
*/
|
|
55
|
+
constructor(options?: ShaderOptions);
|
|
56
|
+
private _initGl;
|
|
57
|
+
private _initTextures;
|
|
58
|
+
private _initAttribs;
|
|
59
|
+
private _initUniforms;
|
|
60
|
+
apply(target: Movie | Visual, reltime: number): void;
|
|
61
|
+
private _checkDimensions;
|
|
62
|
+
private _refreshGl;
|
|
63
|
+
private _enablePositionAttrib;
|
|
64
|
+
private _enableTexCoordAttrib;
|
|
65
|
+
private _prepareTextures;
|
|
66
|
+
private _prepareUniforms;
|
|
67
|
+
private _draw;
|
|
68
|
+
/**
|
|
69
|
+
* Converts a value of a standard type for javascript to a standard type for
|
|
70
|
+
* GLSL
|
|
71
|
+
* @param value - the raw value to prepare
|
|
72
|
+
* @param outputType - the WebGL type of |value|; example:
|
|
73
|
+
* <code>1f</code> for a float
|
|
74
|
+
* @param reltime - current time, relative to the target
|
|
75
|
+
* @param [options] - Optional config
|
|
76
|
+
*/
|
|
77
|
+
private _prepareValue;
|
|
78
|
+
private static _initRectBuffers;
|
|
79
|
+
/**
|
|
80
|
+
* Creates the quad covering the screen
|
|
81
|
+
*/
|
|
82
|
+
private static _initBuffer;
|
|
83
|
+
/**
|
|
84
|
+
* Creates a webgl texture from the source.
|
|
85
|
+
* @param [options] - optional WebGL config for texture
|
|
86
|
+
* @param [options.target=gl.TEXTURE_2D]
|
|
87
|
+
* @param [options.level=0]
|
|
88
|
+
* @param [options.internalFormat=gl.RGBA]
|
|
89
|
+
* @param [options.srcFormat=gl.RGBA]
|
|
90
|
+
* @param [options.srcType=gl.UNSIGNED_BYTE]
|
|
91
|
+
* @param [options.wrapS=gl.CLAMP_TO_EDGE]
|
|
92
|
+
* @param [options.wrapT=gl.CLAMP_TO_EDGE]
|
|
93
|
+
* @param [options.minFilter=gl.LINEAR]
|
|
94
|
+
* @param [options.magFilter=gl.LINEAR]
|
|
95
|
+
*/
|
|
96
|
+
private static _loadTexture;
|
|
97
|
+
private static _initShaderProgram;
|
|
98
|
+
private static _loadShader;
|
|
99
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { Movie } from '../movie';
|
|
2
|
+
import { Base } from './base';
|
|
3
|
+
import { Visual } from '../layer';
|
|
4
|
+
export interface StackOptions {
|
|
5
|
+
effects: Base[];
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* A sequence of effects to apply, treated as one effect. This can be useful
|
|
9
|
+
* for defining reused effect sequences as one effect.
|
|
10
|
+
*/
|
|
11
|
+
export declare class Stack extends Base {
|
|
12
|
+
readonly effects: Base[];
|
|
13
|
+
private _effectsBack;
|
|
14
|
+
constructor(options: StackOptions);
|
|
15
|
+
attach(movie: Movie): void;
|
|
16
|
+
detach(): void;
|
|
17
|
+
apply(target: Movie | Visual, reltime: number): void;
|
|
18
|
+
/**
|
|
19
|
+
* Convenience method for chaining
|
|
20
|
+
* @param effect - the effect to append
|
|
21
|
+
*/
|
|
22
|
+
addEffect(effect: Base): Stack;
|
|
23
|
+
}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { Visual } from '../layer/index';
|
|
2
|
+
import { Movie } from '../movie';
|
|
3
|
+
import { Dynamic } from '../util';
|
|
4
|
+
import { Base } from './base';
|
|
5
|
+
export interface TransformOptions {
|
|
6
|
+
matrix: Dynamic<Transform.Matrix>;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Transforms a layer or movie using a transformation matrix. Use {@link
|
|
10
|
+
* Transform.Matrix} to either A) calculate those values based on a series of
|
|
11
|
+
* translations, scalings and rotations) or B) input the matrix values
|
|
12
|
+
* directly, using the optional argument in the constructor.
|
|
13
|
+
*/
|
|
14
|
+
declare class Transform extends Base {
|
|
15
|
+
/** Matrix that determines how to transform the target */
|
|
16
|
+
matrix: Dynamic<Transform.Matrix>;
|
|
17
|
+
private _tmpMatrix;
|
|
18
|
+
private _tmpCanvas;
|
|
19
|
+
private _tmpCtx;
|
|
20
|
+
/**
|
|
21
|
+
* @param matrix - matrix that determines how to transform the target
|
|
22
|
+
*/
|
|
23
|
+
constructor(options: TransformOptions);
|
|
24
|
+
apply(target: Movie | Visual, reltime: number): void;
|
|
25
|
+
}
|
|
26
|
+
declare namespace Transform {
|
|
27
|
+
/**
|
|
28
|
+
* @class
|
|
29
|
+
* A 3x3 matrix for storing 2d transformations
|
|
30
|
+
*/
|
|
31
|
+
class Matrix {
|
|
32
|
+
/**
|
|
33
|
+
* The identity matrix
|
|
34
|
+
*/
|
|
35
|
+
static IDENTITY: Matrix;
|
|
36
|
+
private static _TMP_MATRIX;
|
|
37
|
+
data: number[];
|
|
38
|
+
constructor(data?: number[]);
|
|
39
|
+
identity(): Matrix;
|
|
40
|
+
/**
|
|
41
|
+
* @param x
|
|
42
|
+
* @param y
|
|
43
|
+
* @param [val]
|
|
44
|
+
*/
|
|
45
|
+
cell(x: number, y: number, val?: number): number;
|
|
46
|
+
get a(): number;
|
|
47
|
+
get b(): number;
|
|
48
|
+
get c(): number;
|
|
49
|
+
get d(): number;
|
|
50
|
+
get e(): number;
|
|
51
|
+
get f(): number;
|
|
52
|
+
/**
|
|
53
|
+
* Combines <code>this</code> with another matrix <code>other</code>
|
|
54
|
+
* @param other
|
|
55
|
+
*/
|
|
56
|
+
multiply(other: Matrix): Matrix;
|
|
57
|
+
/**
|
|
58
|
+
* @param x
|
|
59
|
+
* @param y
|
|
60
|
+
*/
|
|
61
|
+
translate(x: number, y: number): Matrix;
|
|
62
|
+
/**
|
|
63
|
+
* @param x
|
|
64
|
+
* @param y
|
|
65
|
+
*/
|
|
66
|
+
scale(x: number, y: number): Matrix;
|
|
67
|
+
/**
|
|
68
|
+
* @param a - the angle or rotation in radians
|
|
69
|
+
*/
|
|
70
|
+
rotate(a: number): Matrix;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
export { Transform };
|