etro 0.6.0
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/.env +2 -0
- package/.github/workflows/nodejs.yml +27 -0
- package/CHANGELOG.md +109 -0
- package/CODE_OF_CONDUCT.md +77 -0
- package/CONTRIBUTING.md +155 -0
- package/LICENSE +674 -0
- package/README.md +57 -0
- package/dist/etro.js +3397 -0
- package/docs/effect.js.html +1215 -0
- package/docs/event.js.html +145 -0
- package/docs/index.html +81 -0
- package/docs/index.js.html +92 -0
- package/docs/layer.js.html +888 -0
- package/docs/module-effect-GaussianBlurComponent.html +345 -0
- package/docs/module-effect.Brightness.html +339 -0
- package/docs/module-effect.Channels.html +319 -0
- package/docs/module-effect.ChromaKey.html +611 -0
- package/docs/module-effect.Contrast.html +339 -0
- package/docs/module-effect.EllipticalMask.html +200 -0
- package/docs/module-effect.GaussianBlur.html +202 -0
- package/docs/module-effect.GaussianBlurHorizontal.html +242 -0
- package/docs/module-effect.GaussianBlurVertical.html +242 -0
- package/docs/module-effect.Pixelate.html +330 -0
- package/docs/module-effect.Shader.html +1227 -0
- package/docs/module-effect.Stack.html +406 -0
- package/docs/module-effect.Transform.Matrix.html +193 -0
- package/docs/module-effect.Transform.html +1174 -0
- package/docs/module-effect.html +148 -0
- package/docs/module-event.html +473 -0
- package/docs/module-index.html +186 -0
- package/docs/module-layer-Media.html +1116 -0
- package/docs/module-layer-MediaMixin.html +164 -0
- package/docs/module-layer.Audio.html +1188 -0
- package/docs/module-layer.Base.html +629 -0
- package/docs/module-layer.Image.html +1421 -0
- package/docs/module-layer.Text.html +1731 -0
- package/docs/module-layer.Video.html +1938 -0
- package/docs/module-layer.Visual.html +1698 -0
- package/docs/module-layer.html +137 -0
- package/docs/module-movie.html +3118 -0
- package/docs/module-util.Color.html +702 -0
- package/docs/module-util.Font.html +395 -0
- package/docs/module-util.html +845 -0
- package/docs/movie.js.html +689 -0
- package/docs/scripts/collapse.js +20 -0
- package/docs/scripts/linenumber.js +25 -0
- package/docs/scripts/nav.js +12 -0
- package/docs/scripts/polyfill.js +4 -0
- package/docs/scripts/prettify/Apache-License-2.0.txt +202 -0
- package/docs/scripts/prettify/lang-css.js +2 -0
- package/docs/scripts/prettify/prettify.js +28 -0
- package/docs/scripts/search.js +83 -0
- package/docs/styles/jsdoc.css +671 -0
- package/docs/styles/prettify.css +79 -0
- package/docs/util.js.html +503 -0
- package/eslint.conf.js +28 -0
- package/eslint.test-conf.js +4 -0
- package/examples/application/readme-screenshot.html +86 -0
- package/examples/application/video-player.html +131 -0
- package/examples/application/webcam.html +28 -0
- package/examples/introduction/audio.html +52 -0
- package/examples/introduction/effects.html +56 -0
- package/examples/introduction/export.html +70 -0
- package/examples/introduction/functions.html +35 -0
- package/examples/introduction/hello-world1.html +33 -0
- package/examples/introduction/hello-world2.html +32 -0
- package/examples/introduction/keyframes.html +67 -0
- package/examples/introduction/media.html +55 -0
- package/examples/introduction/text.html +27 -0
- package/jsdoc.conf.json +3 -0
- package/karma.conf.js +60 -0
- package/package.json +63 -0
- package/private-todo.txt +70 -0
- package/rename-file.sh +18 -0
- package/rename-versions.sh +14 -0
- package/rename.sh +22 -0
- package/rollup.config.js +31 -0
- package/screenshots/2019-08-17_0.png +0 -0
- package/scripts/gen-effect-samples.html +99 -0
- package/scripts/save-effect-samples.js +43 -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 +352 -0
- package/spec/event.spec.js +25 -0
- package/spec/layer.spec.js +128 -0
- package/spec/movie.spec.js +154 -0
- package/spec/util.spec.js +285 -0
- package/src/effect.js +1265 -0
- package/src/event.js +78 -0
- package/src/index.js +23 -0
- package/src/layer.js +875 -0
- package/src/movie.js +636 -0
- package/src/util.js +487 -0
package/.env
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
name: Node CI
|
|
2
|
+
|
|
3
|
+
on: [push]
|
|
4
|
+
|
|
5
|
+
jobs:
|
|
6
|
+
build:
|
|
7
|
+
|
|
8
|
+
runs-on: ubuntu-latest
|
|
9
|
+
|
|
10
|
+
strategy:
|
|
11
|
+
matrix:
|
|
12
|
+
node-version: [8.x, 10.x, 12.x]
|
|
13
|
+
|
|
14
|
+
steps:
|
|
15
|
+
- uses: actions/checkout@v1
|
|
16
|
+
- name: Use Node.js ${{ matrix.node-version }}
|
|
17
|
+
uses: actions/setup-node@v1
|
|
18
|
+
with:
|
|
19
|
+
node-version: ${{ matrix.node-version }}
|
|
20
|
+
- name: npm install, lint, build, and test
|
|
21
|
+
run: |
|
|
22
|
+
npm ci
|
|
23
|
+
npm run lint
|
|
24
|
+
npm run build
|
|
25
|
+
npm test
|
|
26
|
+
env:
|
|
27
|
+
CI: true
|
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
## [0.6.0] - 2019-12-26
|
|
4
|
+
### Added
|
|
5
|
+
- Add [API documentation](https://etrojs.dev/).
|
|
6
|
+
- Support enabling and disabling layers and effects.
|
|
7
|
+
- Implement more movie events (*movie.play*, *movie.record*, *movie.pause*, *movie.change.duration*).
|
|
8
|
+
- Implement [property filters](https://github.com/etro-js/etro/wiki/Property-Filters).
|
|
9
|
+
- Implement property caching.
|
|
10
|
+
- Media layer supports media whose duration changes.
|
|
11
|
+
- Add unimplemented `etro.Font` properties.
|
|
12
|
+
- Add example that uses a live stream (the webcam).
|
|
13
|
+
|
|
14
|
+
### Changed
|
|
15
|
+
- Add layer `start` and `stop` methods.
|
|
16
|
+
- Add layer and effect `attach` and `detach` methods.
|
|
17
|
+
- Make some properties public (`_getDefaultOptions`, `_publicExcludes`, `layer.Base#_render`, `event._publish`, `layer.Base#_render`, `event._publish`, `layer.Visual#_doRender`).
|
|
18
|
+
- Change `etro.val(property, element, time)` → `etro.val(element, path, time)`.
|
|
19
|
+
- Make event properties specific to event type
|
|
20
|
+
- *layer.attach|detach*: `source` → `effectTarget`
|
|
21
|
+
- *effect.attach|detach*: `source` → `effectTarget`
|
|
22
|
+
- *movie.change.layer.add|remove*: `source` → `layer`
|
|
23
|
+
- *movie.change.effect.add|remove*: `source` → `effect`
|
|
24
|
+
|
|
25
|
+
### Fixed
|
|
26
|
+
- Media current time is no longer reset every time it's played.
|
|
27
|
+
- Fix Gaussian blur effect throwing error.
|
|
28
|
+
- Custom textures work for shader effects.
|
|
29
|
+
- Fix undefined behavior with shader effects that output transparency.
|
|
30
|
+
- Use `sourceTextureOptions` in shader effects.
|
|
31
|
+
- Recursive property changes now emit events with `etro.watchPublic`.
|
|
32
|
+
- Public properties set to keyframes are treated as keyframes.
|
|
33
|
+
- Update event names in examples.
|
|
34
|
+
|
|
35
|
+
## [0.5.0] - 2019-10-09
|
|
36
|
+
### Added
|
|
37
|
+
- Movies and layers auto-refresh.
|
|
38
|
+
|
|
39
|
+
### Changed
|
|
40
|
+
- Rewrite event system.
|
|
41
|
+
- Events propogate up.
|
|
42
|
+
- Event names are organized into groups.
|
|
43
|
+
|
|
44
|
+
### Fixed
|
|
45
|
+
- Update IIFE global export from `mv` to `etro`.
|
|
46
|
+
- Fix recording audio.
|
|
47
|
+
- Fix recording movies without audio in Chrome.
|
|
48
|
+
- Fix effects for movies.
|
|
49
|
+
|
|
50
|
+
## [0.4.0] - 2019-08-18
|
|
51
|
+
### Added
|
|
52
|
+
- WebGL fragment shader effects, with which you can re-render a layer or movie with a GLSL fragment shader.
|
|
53
|
+
- New `initialRefresh` movie option that can prevent rendering on init.
|
|
54
|
+
|
|
55
|
+
### Changed
|
|
56
|
+
- Most visual effects now use GLSL.
|
|
57
|
+
- New `element` argument passed to function properties to see which Etro object the property belongs to.
|
|
58
|
+
|
|
59
|
+
## [0.3.0] - 2018-12-11
|
|
60
|
+
### Added
|
|
61
|
+
- Function properties.
|
|
62
|
+
- Dynamic properties that call a function every time they're queried.
|
|
63
|
+
|
|
64
|
+
### Changed
|
|
65
|
+
- Null or undefined layer dimensions default to the width or height of the movie.
|
|
66
|
+
- Movie "end" event is now called "ended".
|
|
67
|
+
|
|
68
|
+
### Fixed
|
|
69
|
+
- Bug with layer options
|
|
70
|
+
|
|
71
|
+
### Removed
|
|
72
|
+
- Volume, speed and muted properties. These will most likely be added as separate audio effects in the future.
|
|
73
|
+
|
|
74
|
+
## [0.2.0] - 2018-10-14
|
|
75
|
+
### Added
|
|
76
|
+
- Keyframes
|
|
77
|
+
- Works with any value type in pretty much every built-in component property.
|
|
78
|
+
- Number and objects, including colors and fonts, can interpolate.
|
|
79
|
+
- Custom interpolation option.
|
|
80
|
+
- Elliptical mask effect.
|
|
81
|
+
- Many small improvements.
|
|
82
|
+
|
|
83
|
+
## [0.1.0] - 2018-10-06
|
|
84
|
+
### Added
|
|
85
|
+
- Movies
|
|
86
|
+
- Timeline
|
|
87
|
+
- Playing
|
|
88
|
+
- Exporting
|
|
89
|
+
- Layers
|
|
90
|
+
- Base layers
|
|
91
|
+
- Text layers
|
|
92
|
+
- Image layers
|
|
93
|
+
- Audio layers
|
|
94
|
+
- Video layers
|
|
95
|
+
- Effects
|
|
96
|
+
- Transparency
|
|
97
|
+
- Brightness
|
|
98
|
+
- Contrast
|
|
99
|
+
- Channels
|
|
100
|
+
- Gaussian blur
|
|
101
|
+
- Transform
|
|
102
|
+
|
|
103
|
+
[0.6.0]: https://github.com/etro-js/etro/compare/v0.6...HEAD
|
|
104
|
+
[0.5.0]: https://github.com/etro-js/etro/compare/v0.5...v0.6
|
|
105
|
+
[0.4.0]: https://github.com/etro-js/etro/compare/v0.4...v0.5
|
|
106
|
+
[0.3.0]: https://github.com/etro-js/etro/compare/v0.3...v0.4
|
|
107
|
+
[0.3.0]: https://github.com/etro-js/etro/compare/v0.2...v0.3
|
|
108
|
+
[0.2.0]: https://github.com/etro-js/etro/compare/v0.1...v0.2
|
|
109
|
+
[0.1.0]: https://github.com/etro-js/etro/releases/tag/v0.1
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
# Contributor Covenant Code of Conduct
|
|
2
|
+
|
|
3
|
+
## Our Pledge
|
|
4
|
+
|
|
5
|
+
In the interest of fostering an open and welcoming environment, we as
|
|
6
|
+
contributors and maintainers pledge to making participation in our project and
|
|
7
|
+
our community a harassment-free experience for everyone, regardless of age, body
|
|
8
|
+
size, disability, ethnicity, sex characteristics, gender identity and expression,
|
|
9
|
+
level of experience, education, socio-economic status, nationality, personal
|
|
10
|
+
appearance, race, religion, or sexual identity and orientation.
|
|
11
|
+
|
|
12
|
+
## Our Standards
|
|
13
|
+
|
|
14
|
+
Examples of behavior that contributes to creating a positive environment
|
|
15
|
+
include:
|
|
16
|
+
|
|
17
|
+
* Using welcoming and inclusive language
|
|
18
|
+
* Being respectful of differing viewpoints and experiences
|
|
19
|
+
* Gracefully accepting constructive criticism
|
|
20
|
+
* Focusing on what is best for the community
|
|
21
|
+
* Showing empathy towards other community members
|
|
22
|
+
|
|
23
|
+
Examples of unacceptable behavior by participants include:
|
|
24
|
+
|
|
25
|
+
* The use of sexualized language or imagery and unwelcome sexual attention or
|
|
26
|
+
advances
|
|
27
|
+
* Trolling, insulting/derogatory comments, and personal or political attacks
|
|
28
|
+
* Public or private harassment
|
|
29
|
+
* Publishing others' private information, such as a physical or electronic
|
|
30
|
+
address, without explicit permission
|
|
31
|
+
* Other conduct which could reasonably be considered inappropriate in a
|
|
32
|
+
professional setting
|
|
33
|
+
|
|
34
|
+
## Our Responsibilities
|
|
35
|
+
|
|
36
|
+
Project maintainers are responsible for clarifying the standards of acceptable
|
|
37
|
+
behavior and are expected to take appropriate and fair corrective action in
|
|
38
|
+
response to any instances of unacceptable behavior.
|
|
39
|
+
|
|
40
|
+
Project maintainers have the right and responsibility to remove, edit, or
|
|
41
|
+
reject comments, commits, code, wiki edits, issues, and other contributions
|
|
42
|
+
that are not aligned to this Code of Conduct, or to ban temporarily or
|
|
43
|
+
permanently any contributor for other behaviors that they deem inappropriate,
|
|
44
|
+
threatening, offensive, or harmful.
|
|
45
|
+
|
|
46
|
+
## Scope
|
|
47
|
+
|
|
48
|
+
This Code of Conduct applies both within project spaces and in public spaces
|
|
49
|
+
when an individual is representing the project or its community. Examples of
|
|
50
|
+
representing a project or community include using an official project e-mail
|
|
51
|
+
address, posting via an official social media account, or acting as an appointed
|
|
52
|
+
representative at an online or offline event. Representation of a project may be
|
|
53
|
+
further defined and clarified by project maintainers.
|
|
54
|
+
|
|
55
|
+
## Enforcement
|
|
56
|
+
|
|
57
|
+
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
|
58
|
+
reported by contacting me at **\@etro-js** in the [Slack workspace]. All
|
|
59
|
+
complaints will be reviewed and investigated and will result in a response that
|
|
60
|
+
is deemed necessary and appropriate to the circumstances. The project team is
|
|
61
|
+
obligated to maintain confidentiality with regard to the reporter of an incident.
|
|
62
|
+
Further details of specific enforcement policies may be posted separately.
|
|
63
|
+
|
|
64
|
+
Project maintainers who do not follow or enforce the Code of Conduct in good
|
|
65
|
+
faith may face temporary or permanent repercussions as determined by other
|
|
66
|
+
members of the project's leadership.
|
|
67
|
+
|
|
68
|
+
## Attribution
|
|
69
|
+
|
|
70
|
+
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
|
|
71
|
+
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
|
|
72
|
+
|
|
73
|
+
[homepage]: https://www.contributor-covenant.org
|
|
74
|
+
[slack workspace]: https://join.slack.com/t/etrojs/shared_invite/enQtNzgxODc0ODUyMjU2LTA5MGM5YzIyOGU5NjQxY2E0YmIzYzhhZTU4ODdjNzBiY2M3MzgwZTZiYzU5ZmE2NmYyMjc0ZTE0ZWIxMjBmN2Q
|
|
75
|
+
|
|
76
|
+
For answers to common questions about this code of conduct, see
|
|
77
|
+
https://www.contributor-covenant.org/faq
|
package/CONTRIBUTING.md
ADDED
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
# Contributing
|
|
2
|
+
|
|
3
|
+
## Introduction
|
|
4
|
+
|
|
5
|
+
Thank you for considering contributing to Etro! There are many ways you can contribute to Etro, like creating issues for features or bugs, improving the docs or wiki, or writing the actual code for the library. This page covers how to make changes to the repository files (either code or docs).
|
|
6
|
+
|
|
7
|
+
> Etro has a [Taiga Project](https://tree.taiga.io/project/etro-js-etro/epics) for managing issues and a [Slack workspace](https://join.slack.com/t/etrojs/shared_invite/enQtNzgxODc0ODUyMjU2LTA5MGM5YzIyOGU5NjQxY2E0YmIzYzhhZTU4ODdjNzBiY2M3MzgwZTZiYzU5ZmE2NmYyMjc0ZTE0ZWIxMjBmN2Q) for questions and casual discussion
|
|
8
|
+
|
|
9
|
+
## Setting up your local environment
|
|
10
|
+
|
|
11
|
+
#### Step 0: Dependencies
|
|
12
|
+
|
|
13
|
+
- You will need `git`, `node` and `npm`
|
|
14
|
+
|
|
15
|
+
#### Step 1: Fork
|
|
16
|
+
|
|
17
|
+
- Create your own fork of Etro. Then run
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
$ git clone https://github.com/username/etro.git`
|
|
21
|
+
$ cd etro
|
|
22
|
+
$ git remote add upstream https://github.com/etro-js/etro.git
|
|
23
|
+
$ git fetch upstream
|
|
24
|
+
$ npm install
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
#### Step 2: Branch
|
|
28
|
+
|
|
29
|
+
- To help organize your work, create a branch for your topic. Avoid working directly off the `master` branch
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
$ git checkout -b topic-branch
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Making your changes
|
|
36
|
+
|
|
37
|
+
#### Step 3: Code
|
|
38
|
+
|
|
39
|
+
- If you are writing code, please follow the style guide [StandardJS](https://standardjs.com/rules.html)
|
|
40
|
+
|
|
41
|
+
- To start the development server run
|
|
42
|
+
|
|
43
|
+
```
|
|
44
|
+
$ npm start
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Then, you can see your changes by running some [examples](examples).
|
|
48
|
+
|
|
49
|
+
- When you're ready to submit a piece of work, first run
|
|
50
|
+
|
|
51
|
+
```
|
|
52
|
+
$ npm run lint
|
|
53
|
+
$ npm run build
|
|
54
|
+
$ npm test
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
to lint the code, generate the [dist](dist) files and run unit tests on them.
|
|
58
|
+
|
|
59
|
+
- Commit your changes
|
|
60
|
+
- Please avoid squashing all your commits into one; we try to keep each commit atomic in the `master` branch
|
|
61
|
+
- Please follow these commit message guidelines:
|
|
62
|
+
- Optionally, begin each commit message with [an appropriate emoji](https://gitmoji.carloscuesta.me/)
|
|
63
|
+
- Then, write a concise summary of your changes. If you feel you need to, bullet the main idea of your changes in the description and/or explain why you made the changes.
|
|
64
|
+
- Write in the imperative tense
|
|
65
|
+
- The first line should be 50 characters or less. Wrap lines after around 72 characters (for Vim add `filetype indent plugin on` to ~/.vimrc, and its enabled by default in Atom).
|
|
66
|
+
- *Example:*
|
|
67
|
+
|
|
68
|
+
```
|
|
69
|
+
:emoji: One-liner
|
|
70
|
+
|
|
71
|
+
Optional description
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Submitting your changes
|
|
75
|
+
|
|
76
|
+
#### Step 3: Push
|
|
77
|
+
|
|
78
|
+
- First, rebase (don't merge) to integrate your work with the main repository
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
$ git fetch upstream
|
|
82
|
+
$ git rebase upstream/master
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
- Push your changes to the topic branch in your fork of the repository
|
|
86
|
+
|
|
87
|
+
```
|
|
88
|
+
$ git push origin topic-branch
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
#### Step 4: Pull request
|
|
92
|
+
|
|
93
|
+
- Open a pull request from your topic-branch to the main repository
|
|
94
|
+
- In the PR title, include **fixes ###** for bugs and **resolves ###** for feature requests
|
|
95
|
+
- If you changed any core functionality, make sure you explain your motives for those changes
|
|
96
|
+
|
|
97
|
+
#### Step 5: Feedback
|
|
98
|
+
|
|
99
|
+
- A large part of the submission process is receiving feedback on how you can improve you pull request. If you need change your pull request,
|
|
100
|
+
|
|
101
|
+
```
|
|
102
|
+
$ git add path/to/changes
|
|
103
|
+
$ git commit
|
|
104
|
+
$ git push origin topic-branch
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
## Code overview
|
|
108
|
+
|
|
109
|
+
*Note: To specify the ES6 module (file) that a declaration exists in, the following syntax will be used: `module.export`.*
|
|
110
|
+
|
|
111
|
+
### Module Structure
|
|
112
|
+
|
|
113
|
+
If you are new to the core elements of etro, you should probably read [the *Overview* wiki page](https://github.com/etro-js/etro.wiki/Overview.md).
|
|
114
|
+
|
|
115
|
+
Here are the contents of **src**:
|
|
116
|
+
|
|
117
|
+
| Path | Contents |
|
|
118
|
+
| --- | --- |
|
|
119
|
+
| [**effect.js**](src/effect.js) | all (visual) effect classes |
|
|
120
|
+
| [**event.js**](src/event.js) | the pub/sub mechanics |
|
|
121
|
+
| [**index.js**](src/index.js) | the entry module |
|
|
122
|
+
| [**layer.js**](src/layer.js) | all layer classes |
|
|
123
|
+
| [**movie.js**](src/movie.js) | the `Movie` class |
|
|
124
|
+
| [**util.js**](src/util.js) | general utility |
|
|
125
|
+
|
|
126
|
+
Note that most of the above files will (hopefully soon) be broken down into multiple files each.
|
|
127
|
+
|
|
128
|
+
### Etro Objects
|
|
129
|
+
|
|
130
|
+
The base etro objects are the following:
|
|
131
|
+
* `Movie` - the movie (or entire user project)
|
|
132
|
+
* `layer.Base` - the root type of layer
|
|
133
|
+
* `effect.Base` - the root type of visual effect
|
|
134
|
+
|
|
135
|
+
### Concepts
|
|
136
|
+
|
|
137
|
+
#### Pub/sub system
|
|
138
|
+
|
|
139
|
+
Events emitted by Etro objects use a [pub/sub system](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern). To emit an event, use `event.publish(target, type, event)`. For instance,
|
|
140
|
+
|
|
141
|
+
```js
|
|
142
|
+
event.publish(movie, 'movie.type.of.event', { additionalData: 'foo' })
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
That will notify all listeners of `movie` for event types `'movie'`, `'movie.type'`, `'movie.type.of'` and `'movie.type.of.event'`. To listen for an event, use `event.subscribe(target, type, listener)`, like
|
|
146
|
+
|
|
147
|
+
```js
|
|
148
|
+
event.subscribe(movie, 'movie.type', event => {
|
|
149
|
+
console.log(event.target, event.type, event.additionalData) // should print the movie, 'movie.type.of.event', 'foo'
|
|
150
|
+
}
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
#### Values vs. Properties
|
|
154
|
+
|
|
155
|
+
In Etro objects, almost any property can be a [keyframe](https://github.com/etro-js/etro/wiki/Keyframes), [function](https://github.com/etro-js/etro/wiki/Functions), or just a constant value. To access the current value of the property at a given time, use `util.val(property, element, time)`; where `property` is the keyframe set, function or constant value, `element` is the object to which `property` belongs, and `time` is the current time relative to the element.
|