@revideo/2d 0.5.10 → 0.5.11-alpha.1101
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/editor/editor/NodeInspectorConfig.d.ts +3 -0
- package/editor/editor/NodeInspectorConfig.d.ts.map +1 -0
- package/editor/editor/PreviewOverlayConfig.d.ts +3 -0
- package/editor/editor/PreviewOverlayConfig.d.ts.map +1 -0
- package/editor/editor/Provider.d.ts +17 -0
- package/editor/editor/Provider.d.ts.map +1 -0
- package/editor/editor/SceneGraphTabConfig.d.ts +3 -0
- package/editor/editor/SceneGraphTabConfig.d.ts.map +1 -0
- package/editor/editor/icons/CircleIcon.d.ts +2 -0
- package/editor/editor/icons/CircleIcon.d.ts.map +1 -0
- package/editor/editor/icons/CodeBlockIcon.d.ts +2 -0
- package/editor/editor/icons/CodeBlockIcon.d.ts.map +1 -0
- package/editor/editor/icons/CurveIcon.d.ts +2 -0
- package/editor/editor/icons/CurveIcon.d.ts.map +1 -0
- package/editor/editor/icons/GridIcon.d.ts +2 -0
- package/editor/editor/icons/GridIcon.d.ts.map +1 -0
- package/editor/editor/icons/IconMap.d.ts +3 -0
- package/editor/editor/icons/IconMap.d.ts.map +1 -0
- package/editor/editor/icons/ImgIcon.d.ts +2 -0
- package/editor/editor/icons/ImgIcon.d.ts.map +1 -0
- package/editor/editor/icons/LayoutIcon.d.ts +2 -0
- package/editor/editor/icons/LayoutIcon.d.ts.map +1 -0
- package/editor/editor/icons/LineIcon.d.ts +2 -0
- package/editor/editor/icons/LineIcon.d.ts.map +1 -0
- package/editor/editor/icons/NodeIcon.d.ts +2 -0
- package/editor/editor/icons/NodeIcon.d.ts.map +1 -0
- package/editor/editor/icons/RayIcon.d.ts +2 -0
- package/editor/editor/icons/RayIcon.d.ts.map +1 -0
- package/editor/editor/icons/RectIcon.d.ts +2 -0
- package/editor/editor/icons/RectIcon.d.ts.map +1 -0
- package/editor/editor/icons/ShapeIcon.d.ts +2 -0
- package/editor/editor/icons/ShapeIcon.d.ts.map +1 -0
- package/editor/editor/icons/TxtIcon.d.ts +2 -0
- package/editor/editor/icons/TxtIcon.d.ts.map +1 -0
- package/editor/editor/icons/VideoIcon.d.ts +2 -0
- package/editor/editor/icons/VideoIcon.d.ts.map +1 -0
- package/editor/editor/icons/View2DIcon.d.ts +2 -0
- package/editor/editor/icons/View2DIcon.d.ts.map +1 -0
- package/editor/editor/index.d.ts +4 -0
- package/editor/editor/index.d.ts.map +1 -0
- package/editor/editor/tree/DetachedRoot.d.ts +2 -0
- package/editor/editor/tree/DetachedRoot.d.ts.map +1 -0
- package/editor/editor/tree/NodeElement.d.ts +8 -0
- package/editor/editor/tree/NodeElement.d.ts.map +1 -0
- package/editor/editor/tree/TreeElement.d.ts +15 -0
- package/editor/editor/tree/TreeElement.d.ts.map +1 -0
- package/editor/editor/tree/TreeRoot.d.ts +3 -0
- package/editor/editor/tree/TreeRoot.d.ts.map +1 -0
- package/editor/editor/tree/ViewRoot.d.ts +2 -0
- package/editor/editor/tree/ViewRoot.d.ts.map +1 -0
- package/editor/editor/tree/index.d.ts +4 -0
- package/editor/editor/tree/index.d.ts.map +1 -0
- package/editor/editor/tsconfig.build.tsbuildinfo +1 -1
- package/lib/code/CodeSignal.d.ts +1 -1
- package/lib/code/CodeSignal.d.ts.map +1 -1
- package/lib/code/index.d.ts +1 -1
- package/lib/code/index.d.ts.map +1 -1
- package/lib/code/index.js +2 -2
- package/lib/components/Audio.js +3 -3
- package/lib/components/Img.d.ts +18 -3
- package/lib/components/Img.d.ts.map +1 -1
- package/lib/components/Img.js +37 -21
- package/lib/components/Layout.js +4 -2
- package/lib/components/Line.d.ts.map +1 -1
- package/lib/components/Line.js +34 -2
- package/lib/components/Media.d.ts +3 -3
- package/lib/components/Media.d.ts.map +1 -1
- package/lib/components/Media.js +32 -6
- package/lib/components/Node.d.ts.map +1 -1
- package/lib/components/Node.js +2 -2
- package/lib/components/Rive.d.ts +3 -3
- package/lib/components/Rive.d.ts.map +1 -1
- package/lib/components/Rive.js +8 -5
- package/lib/components/Spline.d.ts.map +1 -1
- package/lib/components/Spline.js +28 -2
- package/lib/components/TxtLeaf.d.ts +0 -1
- package/lib/components/TxtLeaf.d.ts.map +1 -1
- package/lib/components/TxtLeaf.js +5 -14
- package/lib/components/Video.d.ts.map +1 -1
- package/lib/components/Video.js +4 -4
- package/lib/components/View2D.d.ts.map +1 -1
- package/lib/components/View2D.js +1 -1
- package/lib/components/index.d.ts +2 -2
- package/lib/components/index.d.ts.map +1 -1
- package/lib/components/index.js +3 -3
- package/lib/curves/Polynomial2D.d.ts.map +1 -1
- package/lib/curves/index.d.ts +5 -5
- package/lib/curves/index.d.ts.map +1 -1
- package/lib/curves/index.js +6 -6
- package/lib/partials/Pattern.d.ts.map +1 -1
- package/lib/partials/Pattern.js +1 -1
- package/lib/scenes/Scene2D.d.ts.map +1 -1
- package/lib/scenes/Scene2D.js +3 -4
- package/lib/scenes/index.d.ts +1 -1
- package/lib/scenes/index.d.ts.map +1 -1
- package/lib/scenes/index.js +2 -2
- package/lib/scenes/makeScene2D.d.ts +1 -1
- package/lib/scenes/makeScene2D.d.ts.map +1 -1
- package/lib/scenes/makeScene2D.js +3 -4
- package/lib/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +9 -8
- package/src/lib/code/index.ts +1 -1
- package/src/lib/components/Audio.ts +2 -2
- package/src/lib/components/Img.ts +48 -20
- package/src/lib/components/Layout.ts +3 -3
- package/src/lib/components/Line.ts +33 -1
- package/src/lib/components/Media.ts +30 -6
- package/src/lib/components/Rive.ts +7 -11
- package/src/lib/components/Spline.ts +27 -1
- package/src/lib/components/TxtLeaf.ts +4 -13
- package/src/lib/components/Video.ts +2 -3
- package/src/lib/components/View2D.ts +1 -0
- package/src/lib/components/__tests__/mockScene2D.ts +1 -5
- package/src/lib/components/index.ts +2 -2
- package/src/lib/curves/index.ts +5 -5
- package/src/lib/globals.d.ts +0 -1
- package/src/lib/partials/Pattern.ts +0 -1
- package/src/lib/scenes/Scene2D.ts +2 -3
- package/src/lib/scenes/index.ts +1 -1
- package/src/lib/scenes/makeScene2D.ts +3 -6
- package/src/lib/tsconfig.json +3 -7
- package/lib/components/Asset.d.ts +0 -24
- package/lib/components/Asset.d.ts.map +0 -1
- package/lib/components/Asset.js +0 -40
- package/src/lib/components/Asset.ts +0 -51
- package/src/lib/components/__logs__/image-without-source.md +0 -17
- package/src/lib/components/__logs__/line-without-points.md +0 -30
- package/src/lib/components/__logs__/reactive-playback-rate.md +0 -21
- package/src/lib/components/__logs__/spline-with-insufficient-knots.md +0 -24
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import {SimpleSignal, useAssetBase} from '@revideo/core';
|
|
2
|
-
import {nodeName, signal} from '../decorators';
|
|
3
|
-
import {Rect} from './Rect';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* A component that has a source. Used as a base class for `Media` and `Img` components.
|
|
7
|
-
*/
|
|
8
|
-
@nodeName('Asset')
|
|
9
|
-
export abstract class Asset extends Rect {
|
|
10
|
-
/**
|
|
11
|
-
* The source of this asset.
|
|
12
|
-
*
|
|
13
|
-
* @example
|
|
14
|
-
* Using a local path, with the resource inside the /public folder:
|
|
15
|
-
* ```tsx
|
|
16
|
-
* view.add(<Img src={'/image.png} />)
|
|
17
|
-
* ```
|
|
18
|
-
* Loading a resource from the internet:
|
|
19
|
-
* ```tsx
|
|
20
|
-
* view.add(<Img src="https://example.com/image.png" />)
|
|
21
|
-
* ```
|
|
22
|
-
*/
|
|
23
|
-
@signal()
|
|
24
|
-
public declare readonly src: SimpleSignal<string, this>;
|
|
25
|
-
|
|
26
|
-
public assetRoot?: `${string}/`;
|
|
27
|
-
|
|
28
|
-
public fullSource(): string {
|
|
29
|
-
if (!this.assetRoot) {
|
|
30
|
-
this.assetRoot = useAssetBase();
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
let src = this.src();
|
|
34
|
-
const isUrl =
|
|
35
|
-
src.startsWith('http://') ||
|
|
36
|
-
src.startsWith('https://') ||
|
|
37
|
-
src.startsWith('data:');
|
|
38
|
-
|
|
39
|
-
if (isUrl) {
|
|
40
|
-
return src;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
// We remove the trailing slash from the assetRoot
|
|
44
|
-
// and make sure there is a leading slash in the src
|
|
45
|
-
if (src[0] !== '/') {
|
|
46
|
-
src = '/' + src;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
return this.assetRoot.slice(0, -1) + src;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
The image won't be visible unless you specify a source:
|
|
2
|
-
|
|
3
|
-
```tsx
|
|
4
|
-
import myImage from './example.png';
|
|
5
|
-
// ...
|
|
6
|
-
<Img src={myImage} />;
|
|
7
|
-
```
|
|
8
|
-
|
|
9
|
-
If you did this intentionally, and don't want to see this warning, set the `src`
|
|
10
|
-
property to `null`:
|
|
11
|
-
|
|
12
|
-
```tsx
|
|
13
|
-
<Img src={null} />
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
[Learn more](https://motioncanvas.io/docs/media#images) about working with
|
|
17
|
-
images.
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
The line won't be visible unless you specify at least two points:
|
|
2
|
-
|
|
3
|
-
```tsx
|
|
4
|
-
<Line
|
|
5
|
-
stroke="#fff"
|
|
6
|
-
lineWidth={8}
|
|
7
|
-
points={[
|
|
8
|
-
[100, 0],
|
|
9
|
-
[0, 0],
|
|
10
|
-
[0, 100],
|
|
11
|
-
]}
|
|
12
|
-
/>
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
Alternatively, you can define the points using the children:
|
|
16
|
-
|
|
17
|
-
```tsx
|
|
18
|
-
<Line stroke="#fff" lineWidth={8}>
|
|
19
|
-
<Node x={100} />
|
|
20
|
-
<Node />
|
|
21
|
-
<Node y={100} />
|
|
22
|
-
</Line>
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
If you did this intentionally, and want to disable this message, set the
|
|
26
|
-
`points` property to `null`:
|
|
27
|
-
|
|
28
|
-
```tsx
|
|
29
|
-
<Line stroke="#fff" lineWidth={8} points={null} />
|
|
30
|
-
```
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
The `playbackRate` of a `Video` cannot be reactive.
|
|
2
|
-
|
|
3
|
-
Make sure to use a concrete value and not a function:
|
|
4
|
-
|
|
5
|
-
```ts wrong
|
|
6
|
-
video.playbackRate(() => 7);
|
|
7
|
-
```
|
|
8
|
-
|
|
9
|
-
```ts correct
|
|
10
|
-
video.playbackRate(7);
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
If you're using a signal, extract its value before passing it to the property:
|
|
14
|
-
|
|
15
|
-
```ts wrong
|
|
16
|
-
video.playbackRate(mySignal);
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
```ts correct
|
|
20
|
-
video.playbackRate(mySignal());
|
|
21
|
-
```
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
The spline won't be visible unless you specify at least two knots:
|
|
2
|
-
|
|
3
|
-
```tsx
|
|
4
|
-
<Spline
|
|
5
|
-
stroke="#fff"
|
|
6
|
-
lineWidth={8}
|
|
7
|
-
points={[
|
|
8
|
-
[100, 0],
|
|
9
|
-
[0, 0],
|
|
10
|
-
[0, 100],
|
|
11
|
-
]}
|
|
12
|
-
/>
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
For more control over the knot handles, you can alternatively provide the knots
|
|
16
|
-
as children to the spline using the `Knot` component:
|
|
17
|
-
|
|
18
|
-
```tsx
|
|
19
|
-
<Spline stroke="#fff" lineWidth={8}>
|
|
20
|
-
<Knot x={100} endHandle={[-50, 0]} />
|
|
21
|
-
<Knot />
|
|
22
|
-
<Knot y={100} startHandle={[-100, 50]} />
|
|
23
|
-
</Spline>
|
|
24
|
-
```
|