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.
Files changed (158) hide show
  1. package/.github/workflows/nodejs.yml +4 -2
  2. package/.github/workflows/shipjs-trigger.yml +29 -0
  3. package/CHANGELOG.md +73 -12
  4. package/CODE_OF_CONDUCT.md +5 -5
  5. package/CONTRIBUTING.md +31 -77
  6. package/README.md +81 -26
  7. package/dist/effect/base.d.ts +51 -0
  8. package/dist/effect/brightness.d.ts +16 -0
  9. package/dist/effect/channels.d.ts +23 -0
  10. package/dist/effect/chroma-key.d.ts +23 -0
  11. package/dist/effect/contrast.d.ts +15 -0
  12. package/dist/effect/elliptical-mask.d.ts +31 -0
  13. package/dist/effect/gaussian-blur.d.ts +60 -0
  14. package/dist/effect/grayscale.d.ts +7 -0
  15. package/dist/effect/index.d.ts +15 -0
  16. package/dist/effect/pixelate.d.ts +18 -0
  17. package/dist/effect/shader.d.ts +99 -0
  18. package/dist/effect/stack.d.ts +23 -0
  19. package/dist/effect/transform.d.ts +73 -0
  20. package/dist/etro-cjs.js +9287 -3331
  21. package/dist/etro-iife.js +9229 -3273
  22. package/dist/etro.d.ts +7 -0
  23. package/dist/event.d.ts +35 -0
  24. package/dist/index.d.ts +6 -0
  25. package/dist/layer/audio-source.d.ts +24 -0
  26. package/dist/layer/audio.d.ts +14 -0
  27. package/dist/layer/base.d.ts +82 -0
  28. package/dist/layer/image.d.ts +6 -0
  29. package/dist/layer/index.d.ts +11 -0
  30. package/dist/layer/text.d.ts +60 -0
  31. package/dist/layer/video.d.ts +11 -0
  32. package/dist/layer/visual-source.d.ts +32 -0
  33. package/dist/layer/visual.d.ts +58 -0
  34. package/dist/movie.d.ts +192 -0
  35. package/dist/object.d.ts +12 -0
  36. package/dist/util.d.ts +125 -0
  37. package/eslint.conf.js +2 -9
  38. package/eslint.example-conf.js +9 -0
  39. package/eslint.test-conf.js +1 -0
  40. package/eslint.typescript-conf.js +5 -0
  41. package/examples/application/readme-screenshot.html +16 -17
  42. package/examples/application/video-player.html +10 -11
  43. package/examples/application/webcam.html +6 -6
  44. package/examples/introduction/audio.html +30 -18
  45. package/examples/introduction/effects.html +37 -14
  46. package/examples/introduction/export.html +32 -25
  47. package/examples/introduction/functions.html +6 -4
  48. package/examples/introduction/hello-world1.html +9 -5
  49. package/examples/introduction/hello-world2.html +5 -5
  50. package/examples/introduction/keyframes.html +35 -23
  51. package/examples/introduction/media.html +26 -18
  52. package/examples/introduction/text.html +9 -5
  53. package/karma.conf.js +5 -3
  54. package/package.json +36 -14
  55. package/rollup.config.js +15 -4
  56. package/scripts/gen-effect-samples.html +26 -25
  57. package/scripts/save-effect-samples.js +14 -15
  58. package/ship.config.js +80 -0
  59. package/src/effect/base.ts +115 -0
  60. package/src/effect/brightness.ts +43 -0
  61. package/src/effect/channels.ts +50 -0
  62. package/src/effect/chroma-key.ts +82 -0
  63. package/src/effect/contrast.ts +42 -0
  64. package/src/effect/elliptical-mask.ts +75 -0
  65. package/src/effect/gaussian-blur.ts +232 -0
  66. package/src/effect/grayscale.ts +34 -0
  67. package/src/effect/index.ts +22 -0
  68. package/src/effect/pixelate.ts +58 -0
  69. package/src/effect/shader.ts +557 -0
  70. package/src/effect/stack.ts +78 -0
  71. package/src/effect/transform.ts +193 -0
  72. package/src/etro.ts +26 -0
  73. package/src/event.ts +112 -0
  74. package/src/index.ts +8 -0
  75. package/src/layer/audio-source.ts +219 -0
  76. package/src/layer/audio.ts +34 -0
  77. package/src/layer/base.ts +175 -0
  78. package/src/layer/image.ts +8 -0
  79. package/src/layer/index.ts +13 -0
  80. package/src/layer/text.ts +138 -0
  81. package/src/layer/video.ts +15 -0
  82. package/src/layer/visual-source.ts +150 -0
  83. package/src/layer/visual.ts +197 -0
  84. package/src/movie.ts +707 -0
  85. package/src/object.ts +14 -0
  86. package/src/util.ts +466 -0
  87. package/tsconfig.json +8 -0
  88. package/docs/effect.js.html +0 -1215
  89. package/docs/event.js.html +0 -145
  90. package/docs/index.html +0 -81
  91. package/docs/index.js.html +0 -92
  92. package/docs/layer.js.html +0 -888
  93. package/docs/module-effect-GaussianBlurComponent.html +0 -345
  94. package/docs/module-effect.Brightness.html +0 -339
  95. package/docs/module-effect.Channels.html +0 -319
  96. package/docs/module-effect.ChromaKey.html +0 -611
  97. package/docs/module-effect.Contrast.html +0 -339
  98. package/docs/module-effect.EllipticalMask.html +0 -200
  99. package/docs/module-effect.GaussianBlur.html +0 -202
  100. package/docs/module-effect.GaussianBlurHorizontal.html +0 -242
  101. package/docs/module-effect.GaussianBlurVertical.html +0 -242
  102. package/docs/module-effect.Pixelate.html +0 -330
  103. package/docs/module-effect.Shader.html +0 -1227
  104. package/docs/module-effect.Stack.html +0 -406
  105. package/docs/module-effect.Transform.Matrix.html +0 -193
  106. package/docs/module-effect.Transform.html +0 -1174
  107. package/docs/module-effect.html +0 -148
  108. package/docs/module-event.html +0 -473
  109. package/docs/module-index.html +0 -186
  110. package/docs/module-layer-Media.html +0 -1116
  111. package/docs/module-layer-MediaMixin.html +0 -164
  112. package/docs/module-layer.Audio.html +0 -1188
  113. package/docs/module-layer.Base.html +0 -629
  114. package/docs/module-layer.Image.html +0 -1421
  115. package/docs/module-layer.Text.html +0 -1731
  116. package/docs/module-layer.Video.html +0 -1938
  117. package/docs/module-layer.Visual.html +0 -1698
  118. package/docs/module-layer.html +0 -137
  119. package/docs/module-movie.html +0 -3118
  120. package/docs/module-util.Color.html +0 -702
  121. package/docs/module-util.Font.html +0 -395
  122. package/docs/module-util.html +0 -845
  123. package/docs/movie.js.html +0 -689
  124. package/docs/scripts/collapse.js +0 -20
  125. package/docs/scripts/linenumber.js +0 -25
  126. package/docs/scripts/nav.js +0 -12
  127. package/docs/scripts/polyfill.js +0 -4
  128. package/docs/scripts/prettify/Apache-License-2.0.txt +0 -202
  129. package/docs/scripts/prettify/lang-css.js +0 -2
  130. package/docs/scripts/prettify/prettify.js +0 -28
  131. package/docs/scripts/search.js +0 -83
  132. package/docs/styles/jsdoc.css +0 -671
  133. package/docs/styles/prettify.css +0 -79
  134. package/docs/util.js.html +0 -503
  135. package/screenshots/2019-08-17_0.png +0 -0
  136. package/spec/assets/effect/gaussian-blur-horizontal.png +0 -0
  137. package/spec/assets/effect/gaussian-blur-vertical.png +0 -0
  138. package/spec/assets/effect/original.png +0 -0
  139. package/spec/assets/effect/pixelate.png +0 -0
  140. package/spec/assets/effect/transform/multiply.png +0 -0
  141. package/spec/assets/effect/transform/rotate.png +0 -0
  142. package/spec/assets/effect/transform/scale-fraction.png +0 -0
  143. package/spec/assets/effect/transform/scale.png +0 -0
  144. package/spec/assets/effect/transform/translate-fraction.png +0 -0
  145. package/spec/assets/effect/transform/translate.png +0 -0
  146. package/spec/assets/layer/audio.wav +0 -0
  147. package/spec/assets/layer/image.jpg +0 -0
  148. package/spec/effect.spec.js +0 -352
  149. package/spec/event.spec.js +0 -25
  150. package/spec/layer.spec.js +0 -150
  151. package/spec/movie.spec.js +0 -162
  152. package/spec/util.spec.js +0 -285
  153. package/src/effect.js +0 -1268
  154. package/src/event.js +0 -78
  155. package/src/index.js +0 -23
  156. package/src/layer.js +0 -897
  157. package/src/movie.js +0 -637
  158. 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,7 @@
1
+ import { Shader } from './shader';
2
+ /**
3
+ * Converts the target to a grayscale image
4
+ */
5
+ export declare class Grayscale extends Shader {
6
+ constructor();
7
+ }
@@ -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 };