@revideo/2d 0.1.4-alpha.878 → 0.1.7
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/lib/code/CodeCursor.d.ts +74 -74
- package/lib/code/CodeCursor.js +286 -352
- package/lib/code/CodeDiffer.d.ts +16 -21
- package/lib/code/CodeDiffer.js +41 -39
- package/lib/code/CodeFragment.d.ts +8 -16
- package/lib/code/CodeFragment.js +36 -36
- package/lib/code/CodeHighlighter.d.ts +59 -59
- package/lib/code/CodeHighlighter.js +1 -1
- package/lib/code/CodeMetrics.d.ts +8 -12
- package/lib/code/CodeMetrics.js +24 -26
- package/lib/code/CodeRange.d.ts +5 -21
- package/lib/code/CodeRange.js +124 -131
- package/lib/code/CodeScope.d.ts +8 -18
- package/lib/code/CodeScope.js +61 -59
- package/lib/code/CodeSelection.d.ts +4 -9
- package/lib/code/CodeSelection.js +8 -8
- package/lib/code/CodeSignal.d.ts +47 -74
- package/lib/code/CodeSignal.js +189 -206
- package/lib/code/CodeTokenizer.d.ts +1 -1
- package/lib/code/CodeTokenizer.js +41 -41
- package/lib/code/DefaultHighlightStyle.d.ts +2 -2
- package/lib/code/DefaultHighlightStyle.js +96 -96
- package/lib/code/LezerHighlighter.d.ts +19 -21
- package/lib/code/LezerHighlighter.js +101 -101
- package/lib/code/diff.d.ts +9 -12
- package/lib/code/diff.js +205 -218
- package/lib/code/extractRange.d.ts +4 -7
- package/lib/code/extractRange.js +71 -79
- package/lib/code/index.d.ts +1 -1
- package/lib/code/index.js +1 -1
- package/lib/components/Audio.d.ts +11 -11
- package/lib/components/Audio.js +109 -115
- package/lib/components/Bezier.d.ts +18 -18
- package/lib/components/Bezier.js +75 -86
- package/lib/components/Circle.d.ts +90 -95
- package/lib/components/Circle.js +74 -85
- package/lib/components/Code.d.ts +211 -244
- package/lib/components/Code.js +269 -317
- package/lib/components/CodeBlock.d.ts +67 -109
- package/lib/components/CodeBlock.js +373 -414
- package/lib/components/CubicBezier.d.ts +36 -36
- package/lib/components/CubicBezier.js +49 -52
- package/lib/components/Curve.d.ts +198 -208
- package/lib/components/Curve.js +269 -270
- package/lib/components/Grid.d.ts +42 -47
- package/lib/components/Grid.js +56 -63
- package/lib/components/Icon.d.ts +50 -55
- package/lib/components/Icon.js +50 -58
- package/lib/components/Img.d.ts +79 -86
- package/lib/components/Img.js +181 -193
- package/lib/components/Knot.d.ts +78 -97
- package/lib/components/Knot.js +60 -81
- package/lib/components/Latex.d.ts +12 -12
- package/lib/components/Latex.js +65 -77
- package/lib/components/Layout.d.ts +413 -455
- package/lib/components/Layout.js +681 -666
- package/lib/components/Line.d.ts +49 -61
- package/lib/components/Line.js +193 -216
- package/lib/components/Media.d.ts +35 -35
- package/lib/components/Media.js +134 -135
- package/lib/components/Node.d.ts +830 -875
- package/lib/components/Node.js +1314 -1383
- package/lib/components/Path.d.ts +14 -35
- package/lib/components/Path.js +89 -100
- package/lib/components/Polygon.d.ts +55 -60
- package/lib/components/Polygon.js +66 -71
- package/lib/components/QuadBezier.d.ts +29 -29
- package/lib/components/QuadBezier.js +45 -50
- package/lib/components/Ray.d.ts +28 -28
- package/lib/components/Ray.js +64 -71
- package/lib/components/Rect.d.ts +108 -115
- package/lib/components/Rect.js +72 -78
- package/lib/components/SVG.d.ts +139 -165
- package/lib/components/SVG.js +541 -609
- package/lib/components/Shape.d.ts +35 -44
- package/lib/components/Shape.js +127 -112
- package/lib/components/Spline.d.ts +40 -46
- package/lib/components/Spline.js +175 -190
- package/lib/components/Txt.d.ts +44 -55
- package/lib/components/Txt.js +155 -156
- package/lib/components/TxtLeaf.d.ts +16 -20
- package/lib/components/TxtLeaf.js +158 -177
- package/lib/components/Video.d.ts +41 -41
- package/lib/components/Video.js +135 -138
- package/lib/components/View2D.d.ts +21 -21
- package/lib/components/View2D.js +85 -98
- package/lib/components/index.d.ts +1 -1
- package/lib/components/index.js +1 -1
- package/lib/components/types.d.ts +9 -22
- package/lib/components/types.js +1 -1
- package/lib/curves/ArcSegment.d.ts +24 -36
- package/lib/curves/ArcSegment.js +94 -145
- package/lib/curves/CircleSegment.d.ts +16 -26
- package/lib/curves/CircleSegment.js +49 -56
- package/lib/curves/CubicBezierSegment.d.ts +13 -18
- package/lib/curves/CubicBezierSegment.js +46 -79
- package/lib/curves/CurveDrawingInfo.d.ts +9 -9
- package/lib/curves/CurveDrawingInfo.js +1 -1
- package/lib/curves/CurvePoint.d.ts +13 -13
- package/lib/curves/CurvePoint.js +1 -1
- package/lib/curves/CurveProfile.d.ts +5 -5
- package/lib/curves/CurveProfile.js +1 -1
- package/lib/curves/KnotInfo.d.ts +8 -8
- package/lib/curves/KnotInfo.js +1 -1
- package/lib/curves/LineSegment.d.ts +14 -19
- package/lib/curves/LineSegment.js +42 -42
- package/lib/curves/Polynomial.d.ts +110 -110
- package/lib/curves/Polynomial.js +239 -249
- package/lib/curves/Polynomial2D.d.ts +20 -20
- package/lib/curves/Polynomial2D.js +42 -46
- package/lib/curves/PolynomialSegment.d.ts +37 -42
- package/lib/curves/PolynomialSegment.js +81 -83
- package/lib/curves/QuadBezierSegment.d.ts +12 -12
- package/lib/curves/QuadBezierSegment.js +41 -71
- package/lib/curves/Segment.d.ts +7 -12
- package/lib/curves/Segment.js +3 -2
- package/lib/curves/UniformPolynomialCurveSampler.d.ts +34 -34
- package/lib/curves/UniformPolynomialCurveSampler.js +62 -68
- package/lib/curves/createCurveProfileLerp.d.ts +6 -17
- package/lib/curves/createCurveProfileLerp.js +208 -211
- package/lib/curves/getBezierSplineProfile.d.ts +4 -8
- package/lib/curves/getBezierSplineProfile.js +101 -145
- package/lib/curves/getCircleProfile.d.ts +4 -10
- package/lib/curves/getCircleProfile.js +40 -72
- package/lib/curves/getPathProfile.d.ts +2 -2
- package/lib/curves/getPathProfile.js +112 -135
- package/lib/curves/getPointAtDistance.d.ts +4 -7
- package/lib/curves/getPointAtDistance.js +12 -12
- package/lib/curves/getPolylineProfile.d.ts +4 -8
- package/lib/curves/getPolylineProfile.js +54 -67
- package/lib/curves/getRectProfile.d.ts +4 -9
- package/lib/curves/getRectProfile.js +52 -117
- package/lib/curves/index.d.ts +1 -1
- package/lib/curves/index.js +1 -1
- package/lib/decorators/canvasStyleSignal.d.ts +3 -3
- package/lib/decorators/canvasStyleSignal.js +10 -10
- package/lib/decorators/colorSignal.d.ts +1 -1
- package/lib/decorators/colorSignal.js +7 -7
- package/lib/decorators/compound.d.ts +2 -4
- package/lib/decorators/compound.js +23 -43
- package/lib/decorators/computed.d.ts +1 -1
- package/lib/decorators/computed.js +9 -9
- package/lib/decorators/defaultStyle.d.ts +2 -5
- package/lib/decorators/defaultStyle.js +11 -11
- package/lib/decorators/filtersSignal.d.ts +8 -28
- package/lib/decorators/filtersSignal.js +64 -87
- package/lib/decorators/index.d.ts +1 -1
- package/lib/decorators/index.js +1 -1
- package/lib/decorators/initializers.d.ts +2 -5
- package/lib/decorators/initializers.js +19 -18
- package/lib/decorators/nodeName.d.ts +1 -1
- package/lib/decorators/nodeName.js +4 -4
- package/lib/decorators/signal.d.ts +20 -40
- package/lib/decorators/signal.js +104 -113
- package/lib/decorators/spacingSignal.d.ts +1 -1
- package/lib/decorators/spacingSignal.js +13 -13
- package/lib/decorators/vector2Signal.d.ts +7 -13
- package/lib/decorators/vector2Signal.js +13 -15
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- package/lib/jsx-dev-runtime.d.ts +3 -3
- package/lib/jsx-dev-runtime.js +3 -3
- package/lib/jsx-runtime.d.ts +9 -19
- package/lib/jsx-runtime.js +18 -18
- package/lib/partials/Filter.d.ts +16 -24
- package/lib/partials/Filter.js +69 -69
- package/lib/partials/Gradient.d.ts +24 -30
- package/lib/partials/Gradient.js +58 -69
- package/lib/partials/Pattern.d.ts +9 -14
- package/lib/partials/Pattern.js +24 -30
- package/lib/partials/ShaderConfig.d.ts +74 -81
- package/lib/partials/ShaderConfig.js +23 -22
- package/lib/partials/index.d.ts +1 -1
- package/lib/partials/index.js +1 -1
- package/lib/partials/types.d.ts +6 -19
- package/lib/partials/types.js +1 -1
- package/lib/scenes/Scene2D.d.ts +23 -42
- package/lib/scenes/Scene2D.js +151 -161
- package/lib/scenes/index.d.ts +1 -1
- package/lib/scenes/index.js +1 -1
- package/lib/scenes/makeScene2D.d.ts +5 -7
- package/lib/scenes/makeScene2D.js +10 -10
- package/lib/scenes/useScene2D.d.ts +2 -2
- package/lib/scenes/useScene2D.js +3 -3
- package/lib/tsconfig.build.tsbuildinfo +1 -1
- package/lib/utils/CanvasUtils.d.ts +21 -93
- package/lib/utils/CanvasUtils.js +105 -186
- package/lib/utils/diff.d.ts +18 -25
- package/lib/utils/diff.js +87 -84
- package/lib/utils/index.d.ts +1 -1
- package/lib/utils/index.js +1 -1
- package/lib/utils/is.d.ts +2 -4
- package/lib/utils/is.js +2 -2
- package/lib/utils/makeSignalExtensions.d.ts +4 -11
- package/lib/utils/makeSignalExtensions.js +17 -17
- package/package.json +5 -5
package/lib/components/Spline.js
CHANGED
|
@@ -1,36 +1,15 @@
|
|
|
1
|
-
var __decorate =
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var
|
|
5
|
-
r =
|
|
6
|
-
c < 3
|
|
7
|
-
? target
|
|
8
|
-
: desc === null
|
|
9
|
-
? (desc = Object.getOwnPropertyDescriptor(target, key))
|
|
10
|
-
: desc,
|
|
11
|
-
d;
|
|
12
|
-
if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function')
|
|
13
|
-
r = Reflect.decorate(decorators, target, key, desc);
|
|
14
|
-
else
|
|
15
|
-
for (var i = decorators.length - 1; i >= 0; i--)
|
|
16
|
-
if ((d = decorators[i]))
|
|
17
|
-
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
18
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
19
|
-
|
|
20
|
-
import {BBox, Vector2, unwrap, useLogger} from '@revideo/core';
|
|
21
|
-
import {CubicBezierSegment, getBezierSplineProfile} from '../curves';
|
|
22
|
-
import {computed, initial, signal} from '../decorators';
|
|
23
|
-
import {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
drawLine,
|
|
27
|
-
drawPivot,
|
|
28
|
-
lineTo,
|
|
29
|
-
moveTo,
|
|
30
|
-
quadraticCurveTo,
|
|
31
|
-
} from '../utils';
|
|
32
|
-
import {Curve} from './Curve';
|
|
33
|
-
import {Knot} from './Knot';
|
|
6
|
+
};
|
|
7
|
+
import { BBox, Vector2, unwrap, useLogger, } from '@revideo/core';
|
|
8
|
+
import { CubicBezierSegment, getBezierSplineProfile, } from '../curves';
|
|
9
|
+
import { computed, initial, signal } from '../decorators';
|
|
10
|
+
import { arc, bezierCurveTo, drawLine, drawPivot, lineTo, moveTo, quadraticCurveTo, } from '../utils';
|
|
11
|
+
import { Curve } from './Curve';
|
|
12
|
+
import { Knot } from './Knot';
|
|
34
13
|
/**
|
|
35
14
|
* A node for drawing a smooth line through a number of points.
|
|
36
15
|
*
|
|
@@ -75,170 +54,176 @@ import {Knot} from './Knot';
|
|
|
75
54
|
* ```
|
|
76
55
|
*/
|
|
77
56
|
export class Spline extends Curve {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
'<p>The spline won't be visible unless you specify at least two knots:</p>\n<pre class=""><code class="language-tsx"><<span class="hljs-title class_">Spline</span>\n stroke=<span class="hljs-string">"#fff"</span>\n lineWidth={<span class="hljs-number">8</span>}\n points={[\n [<span class="hljs-number">100</span>, <span class="hljs-number">0</span>],\n [<span class="hljs-number">0</span>, <span class="hljs-number">0</span>],\n [<span class="hljs-number">0</span>, <span class="hljs-number">100</span>],\n ]}\n/></code></pre><p>For more control over the knot handles, you can alternatively provide the knots\nas children to the spline using the <code>Knot</code> component:</p>\n<pre class=""><code class="language-tsx"><<span class="hljs-title class_">Spline</span> stroke=<span class="hljs-string">"#fff"</span> lineWidth={<span class="hljs-number">8</span>}>\n <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">Knot</span> <span class="hljs-attr">x</span>=<span class="hljs-string">{100}</span> <span class="hljs-attr">endHandle</span>=<span class="hljs-string">{[-50,</span> <span class="hljs-attr">0</span>]} /></span></span>\n <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">Knot</span> /></span></span>\n <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">Knot</span> <span class="hljs-attr">y</span>=<span class="hljs-string">{100}</span> <span class="hljs-attr">startHandle</span>=<span class="hljs-string">{[-100,</span> <span class="hljs-attr">50</span>]} /></span></span>\n</<span class="hljs-title class_">Spline</span>></code></pre>',
|
|
92
|
-
inspect: this.key,
|
|
93
|
-
});
|
|
57
|
+
constructor(props) {
|
|
58
|
+
super(props);
|
|
59
|
+
if ((props.children === undefined ||
|
|
60
|
+
!Array.isArray(props.children) ||
|
|
61
|
+
props.children.length < 2) &&
|
|
62
|
+
(props.points === undefined || props.points.length < 2) &&
|
|
63
|
+
props.spawner === undefined) {
|
|
64
|
+
useLogger().warn({
|
|
65
|
+
message: 'Insufficient number of knots specified for spline. A spline needs at least two knots.',
|
|
66
|
+
remarks: "<p>The spline won't be visible unless you specify at least two knots:</p>\n<pre class=\"\"><code class=\"language-tsx\"><<span class=\"hljs-title class_\">Spline</span>\n stroke=<span class=\"hljs-string\">"#fff"</span>\n lineWidth={<span class=\"hljs-number\">8</span>}\n points={[\n [<span class=\"hljs-number\">100</span>, <span class=\"hljs-number\">0</span>],\n [<span class=\"hljs-number\">0</span>, <span class=\"hljs-number\">0</span>],\n [<span class=\"hljs-number\">0</span>, <span class=\"hljs-number\">100</span>],\n ]}\n/></code></pre><p>For more control over the knot handles, you can alternatively provide the knots\nas children to the spline using the <code>Knot</code> component:</p>\n<pre class=\"\"><code class=\"language-tsx\"><<span class=\"hljs-title class_\">Spline</span> stroke=<span class=\"hljs-string\">"#fff"</span> lineWidth={<span class=\"hljs-number\">8</span>}>\n <span class=\"language-xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">Knot</span> <span class=\"hljs-attr\">x</span>=<span class=\"hljs-string\">{100}</span> <span class=\"hljs-attr\">endHandle</span>=<span class=\"hljs-string\">{[-50,</span> <span class=\"hljs-attr\">0</span>]} /></span></span>\n <span class=\"language-xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">Knot</span> /></span></span>\n <span class=\"language-xml\"><span class=\"hljs-tag\"><<span class=\"hljs-name\">Knot</span> <span class=\"hljs-attr\">y</span>=<span class=\"hljs-string\">{100}</span> <span class=\"hljs-attr\">startHandle</span>=<span class=\"hljs-string\">{[-100,</span> <span class=\"hljs-attr\">50</span>]} /></span></span>\n</<span class=\"hljs-title class_\">Spline</span>></code></pre>",
|
|
67
|
+
inspect: this.key,
|
|
68
|
+
});
|
|
69
|
+
}
|
|
94
70
|
}
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
return getBezierSplineProfile(
|
|
98
|
-
this.knots(),
|
|
99
|
-
this.closed(),
|
|
100
|
-
this.smoothness(),
|
|
101
|
-
);
|
|
102
|
-
}
|
|
103
|
-
knots() {
|
|
104
|
-
const points = this.points();
|
|
105
|
-
if (points) {
|
|
106
|
-
return points.map(signal => {
|
|
107
|
-
const point = new Vector2(unwrap(signal));
|
|
108
|
-
return {
|
|
109
|
-
position: point,
|
|
110
|
-
startHandle: point,
|
|
111
|
-
endHandle: point,
|
|
112
|
-
auto: {start: 1, end: 1},
|
|
113
|
-
};
|
|
114
|
-
});
|
|
71
|
+
profile() {
|
|
72
|
+
return getBezierSplineProfile(this.knots(), this.closed(), this.smoothness());
|
|
115
73
|
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
74
|
+
knots() {
|
|
75
|
+
const points = this.points();
|
|
76
|
+
if (points) {
|
|
77
|
+
return points.map(signal => {
|
|
78
|
+
const point = new Vector2(unwrap(signal));
|
|
79
|
+
return {
|
|
80
|
+
position: point,
|
|
81
|
+
startHandle: point,
|
|
82
|
+
endHandle: point,
|
|
83
|
+
auto: { start: 1, end: 1 },
|
|
84
|
+
};
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
return this.children()
|
|
88
|
+
.filter(this.isKnot)
|
|
89
|
+
.map(knot => knot.points());
|
|
129
90
|
}
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
91
|
+
childrenBBox() {
|
|
92
|
+
const points = this.profile().segments.flatMap(segment => segment.points);
|
|
93
|
+
return BBox.fromPoints(...points);
|
|
133
94
|
}
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
return BBox.fromBBoxes(...bounds);
|
|
146
|
-
}
|
|
147
|
-
drawOverlay(context, matrix) {
|
|
148
|
-
const size = this.computedSize();
|
|
149
|
-
const box = this.childrenBBox().transformCorners(matrix);
|
|
150
|
-
const offset = size.mul(this.offset()).scale(0.5).transformAsPoint(matrix);
|
|
151
|
-
const segments = this.profile().segments;
|
|
152
|
-
context.lineWidth = 1;
|
|
153
|
-
context.strokeStyle = 'white';
|
|
154
|
-
context.fillStyle = 'white';
|
|
155
|
-
const splinePath = new Path2D();
|
|
156
|
-
// Draw the actual spline first so that all control points get drawn on top of it.
|
|
157
|
-
for (let i = 0; i < segments.length; i++) {
|
|
158
|
-
const segment = segments[i];
|
|
159
|
-
const [from, startHandle, endHandle, to] =
|
|
160
|
-
segment.transformPoints(matrix);
|
|
161
|
-
moveTo(splinePath, from);
|
|
162
|
-
if (segment instanceof CubicBezierSegment) {
|
|
163
|
-
bezierCurveTo(splinePath, startHandle, endHandle, to);
|
|
164
|
-
} else {
|
|
165
|
-
quadraticCurveTo(splinePath, startHandle, endHandle);
|
|
166
|
-
}
|
|
95
|
+
lineWidthCoefficient() {
|
|
96
|
+
const join = this.lineJoin();
|
|
97
|
+
let coefficient = super.lineWidthCoefficient();
|
|
98
|
+
if (join !== 'miter') {
|
|
99
|
+
return coefficient;
|
|
100
|
+
}
|
|
101
|
+
const { minSin } = this.profile();
|
|
102
|
+
if (minSin > 0) {
|
|
103
|
+
coefficient = Math.max(coefficient, 0.5 / minSin);
|
|
104
|
+
}
|
|
105
|
+
return coefficient;
|
|
167
106
|
}
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
context.
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
context.fill();
|
|
200
|
-
// Draw final point of segment only if we're on the last segment.
|
|
201
|
-
// Otherwise, it will get drawn as the start point of the next segment.
|
|
202
|
-
if (i === segments.length - 1) {
|
|
203
|
-
if (to !== undefined) {
|
|
204
|
-
moveTo(context, to);
|
|
205
|
-
context.beginPath();
|
|
206
|
-
arc(context, to, 4);
|
|
207
|
-
context.closePath();
|
|
208
|
-
context.stroke();
|
|
209
|
-
context.fill();
|
|
107
|
+
desiredSize() {
|
|
108
|
+
return this.getTightBBox().size;
|
|
109
|
+
}
|
|
110
|
+
offsetComputedLayout(box) {
|
|
111
|
+
box.position = box.position.sub(this.getTightBBox().center);
|
|
112
|
+
return box;
|
|
113
|
+
}
|
|
114
|
+
getTightBBox() {
|
|
115
|
+
const bounds = this.profile().segments.map(segment => segment.getBBox());
|
|
116
|
+
return BBox.fromBBoxes(...bounds);
|
|
117
|
+
}
|
|
118
|
+
drawOverlay(context, matrix) {
|
|
119
|
+
const size = this.computedSize();
|
|
120
|
+
const box = this.childrenBBox().transformCorners(matrix);
|
|
121
|
+
const offset = size.mul(this.offset()).scale(0.5).transformAsPoint(matrix);
|
|
122
|
+
const segments = this.profile().segments;
|
|
123
|
+
context.lineWidth = 1;
|
|
124
|
+
context.strokeStyle = 'white';
|
|
125
|
+
context.fillStyle = 'white';
|
|
126
|
+
const splinePath = new Path2D();
|
|
127
|
+
// Draw the actual spline first so that all control points get drawn on top of it.
|
|
128
|
+
for (let i = 0; i < segments.length; i++) {
|
|
129
|
+
const segment = segments[i];
|
|
130
|
+
const [from, startHandle, endHandle, to] = segment.transformPoints(matrix);
|
|
131
|
+
moveTo(splinePath, from);
|
|
132
|
+
if (segment instanceof CubicBezierSegment) {
|
|
133
|
+
bezierCurveTo(splinePath, startHandle, endHandle, to);
|
|
134
|
+
}
|
|
135
|
+
else {
|
|
136
|
+
quadraticCurveTo(splinePath, startHandle, endHandle);
|
|
137
|
+
}
|
|
210
138
|
}
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
139
|
+
context.stroke(splinePath);
|
|
140
|
+
for (let i = 0; i < segments.length; i++) {
|
|
141
|
+
const segment = segments[i];
|
|
142
|
+
context.fillStyle = 'white';
|
|
143
|
+
const [from, startHandle, endHandle, to] = segment.transformPoints(matrix);
|
|
144
|
+
const handlePath = new Path2D();
|
|
145
|
+
context.globalAlpha = 0.5;
|
|
146
|
+
// Line from p0 to p1
|
|
147
|
+
moveTo(handlePath, from);
|
|
148
|
+
lineTo(handlePath, startHandle);
|
|
149
|
+
if (segment instanceof CubicBezierSegment) {
|
|
150
|
+
// Line from p2 to p3
|
|
151
|
+
moveTo(handlePath, endHandle);
|
|
152
|
+
lineTo(handlePath, to);
|
|
153
|
+
context.beginPath();
|
|
154
|
+
context.stroke(handlePath);
|
|
155
|
+
}
|
|
156
|
+
else {
|
|
157
|
+
// Line from p1 to p2
|
|
158
|
+
lineTo(handlePath, endHandle);
|
|
159
|
+
context.beginPath();
|
|
160
|
+
context.stroke(handlePath);
|
|
161
|
+
}
|
|
162
|
+
context.globalAlpha = 1;
|
|
163
|
+
context.lineWidth = 2;
|
|
164
|
+
// Draw first point of segment
|
|
165
|
+
moveTo(context, from);
|
|
166
|
+
context.beginPath();
|
|
167
|
+
arc(context, from, 4);
|
|
168
|
+
context.closePath();
|
|
169
|
+
context.stroke();
|
|
170
|
+
context.fill();
|
|
171
|
+
// Draw final point of segment only if we're on the last segment.
|
|
172
|
+
// Otherwise, it will get drawn as the start point of the next segment.
|
|
173
|
+
if (i === segments.length - 1) {
|
|
174
|
+
if (to !== undefined) {
|
|
175
|
+
moveTo(context, to);
|
|
176
|
+
context.beginPath();
|
|
177
|
+
arc(context, to, 4);
|
|
178
|
+
context.closePath();
|
|
179
|
+
context.stroke();
|
|
180
|
+
context.fill();
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
// Draw the control points
|
|
184
|
+
context.fillStyle = 'black';
|
|
185
|
+
for (const point of [startHandle, endHandle]) {
|
|
186
|
+
if (point.magnitude > 0) {
|
|
187
|
+
moveTo(context, point);
|
|
188
|
+
context.beginPath();
|
|
189
|
+
arc(context, point, 4);
|
|
190
|
+
context.closePath();
|
|
191
|
+
context.fill();
|
|
192
|
+
context.stroke();
|
|
193
|
+
}
|
|
194
|
+
}
|
|
222
195
|
}
|
|
223
|
-
|
|
196
|
+
context.lineWidth = 1;
|
|
197
|
+
context.beginPath();
|
|
198
|
+
drawPivot(context, offset);
|
|
199
|
+
context.stroke();
|
|
200
|
+
context.beginPath();
|
|
201
|
+
drawLine(context, box);
|
|
202
|
+
context.closePath();
|
|
203
|
+
context.stroke();
|
|
204
|
+
}
|
|
205
|
+
isKnot(node) {
|
|
206
|
+
return node instanceof Knot;
|
|
224
207
|
}
|
|
225
|
-
context.lineWidth = 1;
|
|
226
|
-
context.beginPath();
|
|
227
|
-
drawPivot(context, offset);
|
|
228
|
-
context.stroke();
|
|
229
|
-
context.beginPath();
|
|
230
|
-
drawLine(context, box);
|
|
231
|
-
context.closePath();
|
|
232
|
-
context.stroke();
|
|
233
|
-
}
|
|
234
|
-
isKnot(node) {
|
|
235
|
-
return node instanceof Knot;
|
|
236
|
-
}
|
|
237
208
|
}
|
|
238
|
-
__decorate([
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
__decorate([
|
|
243
|
-
|
|
244
|
-
|
|
209
|
+
__decorate([
|
|
210
|
+
initial(0.4),
|
|
211
|
+
signal()
|
|
212
|
+
], Spline.prototype, "smoothness", void 0);
|
|
213
|
+
__decorate([
|
|
214
|
+
initial(null),
|
|
215
|
+
signal()
|
|
216
|
+
], Spline.prototype, "points", void 0);
|
|
217
|
+
__decorate([
|
|
218
|
+
computed()
|
|
219
|
+
], Spline.prototype, "profile", null);
|
|
220
|
+
__decorate([
|
|
221
|
+
computed()
|
|
222
|
+
], Spline.prototype, "knots", null);
|
|
223
|
+
__decorate([
|
|
224
|
+
computed()
|
|
225
|
+
], Spline.prototype, "childrenBBox", null);
|
|
226
|
+
__decorate([
|
|
227
|
+
computed()
|
|
228
|
+
], Spline.prototype, "getTightBBox", null);
|
|
229
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3BsaW5lLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL1NwbGluZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBQSxPQUFPLEVBQ0wsSUFBSSxFQUtKLE9BQU8sRUFDUCxNQUFNLEVBQ04sU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFDTCxrQkFBa0IsRUFHbEIsc0JBQXNCLEdBQ3ZCLE1BQU0sV0FBVyxDQUFDO0FBRW5CLE9BQU8sRUFBQyxRQUFRLEVBQUUsT0FBTyxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUV4RCxPQUFPLEVBQ0wsR0FBRyxFQUNILGFBQWEsRUFDYixRQUFRLEVBQ1IsU0FBUyxFQUNULE1BQU0sRUFDTixNQUFNLEVBQ04sZ0JBQWdCLEdBQ2pCLE1BQU0sVUFBVSxDQUFDO0FBQ2xCLE9BQU8sRUFBQyxLQUFLLEVBQWEsTUFBTSxTQUFTLENBQUM7QUFDMUMsT0FBTyxFQUFDLElBQUksRUFBQyxNQUFNLFFBQVEsQ0FBQztBQWdCNUI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTBDRztBQUNILE1BQU0sT0FBTyxNQUFPLFNBQVEsS0FBSztJQTJCL0IsWUFBbUIsS0FBa0I7UUFDbkMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBRWIsSUFDRSxDQUFDLEtBQUssQ0FBQyxRQUFRLEtBQUssU0FBUztZQUMzQixDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQztZQUM5QixLQUFLLENBQUMsUUFBUSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUM7WUFDNUIsQ0FBQyxLQUFLLENBQUMsTUFBTSxLQUFLLFNBQVMsSUFBSSxLQUFLLENBQUMsTUFBTSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUM7WUFDdkQsS0FBSyxDQUFDLE9BQU8sS0FBSyxTQUFTLEVBQzNCLENBQUM7WUFDRCxT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
|
package/lib/components/Txt.d.ts
CHANGED
|
@@ -1,62 +1,51 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
TimingFunction,
|
|
7
|
-
} from '@revideo/core';
|
|
8
|
-
import {Node} from './Node';
|
|
9
|
-
import {Shape, ShapeProps} from './Shape';
|
|
10
|
-
import {TxtLeaf} from './TxtLeaf';
|
|
11
|
-
import {ComponentChildren} from './types';
|
|
1
|
+
import { InterpolationFunction, SignalValue, SimpleSignal, ThreadGenerator, TimingFunction } from '@revideo/core';
|
|
2
|
+
import { Node } from './Node';
|
|
3
|
+
import { Shape, ShapeProps } from './Shape';
|
|
4
|
+
import { TxtLeaf } from './TxtLeaf';
|
|
5
|
+
import { ComponentChildren } from './types';
|
|
12
6
|
type TxtChildren = string | Node | (string | Node)[];
|
|
13
7
|
type AnyTxt = Txt | TxtLeaf;
|
|
14
8
|
export interface TxtProps extends ShapeProps {
|
|
15
|
-
|
|
16
|
-
|
|
9
|
+
children?: TxtChildren;
|
|
10
|
+
text?: SignalValue<string>;
|
|
17
11
|
}
|
|
18
12
|
export declare class Txt extends Shape {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
protected innerText(): string;
|
|
56
|
-
protected parentTxt(): Txt | null;
|
|
57
|
-
protected parseChildren(children: ComponentChildren): AnyTxt[];
|
|
58
|
-
protected applyFlex(): void;
|
|
59
|
-
protected draw(context: CanvasRenderingContext2D): void;
|
|
13
|
+
/**
|
|
14
|
+
* Create a bold text node.
|
|
15
|
+
*
|
|
16
|
+
* @remarks
|
|
17
|
+
* This is a shortcut for
|
|
18
|
+
* ```tsx
|
|
19
|
+
* <Txt fontWeight={700} />
|
|
20
|
+
* ```
|
|
21
|
+
*
|
|
22
|
+
* @param props - Additional text properties.
|
|
23
|
+
*/
|
|
24
|
+
static b(props: TxtProps): Txt;
|
|
25
|
+
/**
|
|
26
|
+
* Create an italic text node.
|
|
27
|
+
*
|
|
28
|
+
* @remarks
|
|
29
|
+
* This is a shortcut for
|
|
30
|
+
* ```tsx
|
|
31
|
+
* <Txt fontStyle={'italic'} />
|
|
32
|
+
* ```
|
|
33
|
+
*
|
|
34
|
+
* @param props - Additional text properties.
|
|
35
|
+
*/
|
|
36
|
+
static i(props: TxtProps): Txt;
|
|
37
|
+
readonly text: SimpleSignal<string, this>;
|
|
38
|
+
protected getText(): string;
|
|
39
|
+
protected setText(value: SignalValue<string>): void;
|
|
40
|
+
protected setChildren(value: SignalValue<ComponentChildren>): void;
|
|
41
|
+
protected tweenText(value: SignalValue<string>, time: number, timingFunction: TimingFunction, interpolationFunction: InterpolationFunction<string>): ThreadGenerator;
|
|
42
|
+
protected getLayout(): boolean;
|
|
43
|
+
constructor({ children, text, ...props }: TxtProps);
|
|
44
|
+
protected innerText(): string;
|
|
45
|
+
protected parentTxt(): Txt | null;
|
|
46
|
+
protected parseChildren(children: ComponentChildren): AnyTxt[];
|
|
47
|
+
protected applyFlex(): void;
|
|
48
|
+
protected draw(context: CanvasRenderingContext2D): void;
|
|
60
49
|
}
|
|
61
50
|
export {};
|
|
62
|
-
//# sourceMappingURL=Txt.d.ts.map
|
|
51
|
+
//# sourceMappingURL=Txt.d.ts.map
|