@revideo/2d 0.1.0

package/lib/components/Path.d.ts

@@ -0,0 +1,18 @@
+import { BBox, SignalValue, SimpleSignal, TimingFunction, Vector2 } from '@revideo/core';
+import { CurveProfile } from '../curves';
+import { Curve, CurveProps } from './Curve';
+export interface PathProps extends CurveProps {
+    data: SignalValue<string>;
+}
+export declare class Path extends Curve {
+    private currentProfile;
+    readonly data: SimpleSignal<string, this>;
+    constructor(props: PathProps);
+    profile(): CurveProfile;
+    protected childrenBBox(): BBox;
+    protected lineWidthCoefficient(): number;
+    protected processSubpath(path: Path2D, startPoint: Vector2 | null, endPoint: Vector2 | null): void;
+    protected tweenData(newPath: SignalValue<string>, time: number, timingFunction: TimingFunction): Generator<void | import("@revideo/core").ThreadGenerator | Promise<any> | import("@revideo/core").Promisable<any>, void, any>;
+    drawOverlay(context: CanvasRenderingContext2D, matrix: DOMMatrix): void;
+}
+//# sourceMappingURL=Path.d.ts.map

package/lib/components/Path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../../src/lib/components/Path.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EAGJ,WAAW,EACX,YAAY,EAEZ,cAAc,EAEd,OAAO,EACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,YAAY,EAAC,MAAM,WAAW,CAAC;AAKvC,OAAO,EAAC,KAAK,EAAE,UAAU,EAAC,MAAM,SAAS,CAAC;AAE1C,MAAM,WAAW,SAAU,SAAQ,UAAU;IAC3C,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC3B;AAED,qBAAa,IAAK,SAAQ,KAAK;IAC7B,OAAO,CAAC,cAAc,CAA2C;IACjE,SACwB,IAAI,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;gBAEtC,KAAK,EAAE,SAAS;IAMnB,OAAO,IAAI,YAAY;cAIpB,YAAY;cAKZ,oBAAoB,IAAI,MAAM;cAe9B,cAAc,CAC/B,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,OAAO,GAAG,IAAI,EAC1B,QAAQ,EAAE,OAAO,GAAG,IAAI,GACvB,IAAI;IAOP,SAAS,CAAE,SAAS,CAClB,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,EAC5B,IAAI,EAAE,MAAM,EACZ,cAAc,EAAE,cAAc;IAqBhB,WAAW,CACzB,OAAO,EAAE,wBAAwB,EACjC,MAAM,EAAE,SAAS,GAChB,IAAI;CAoCR"}

package/lib/components/Path.js

@@ -0,0 +1,96 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { BBox, createSignal, isReactive, threadable, tween, } from '@revideo/core';
+import { createCurveProfileLerp } from '../curves/createCurveProfileLerp';
+import { getPathProfile } from '../curves/getPathProfile';
+import { computed, signal } from '../decorators';
+import { drawLine, drawPivot } from '../utils';
+import { Curve } from './Curve';
+export class Path extends Curve {
+    constructor(props) {
+        super(props);
+        this.currentProfile = createSignal(null);
+        this.canHaveSubpath = true;
+    }
+    profile() {
+        return this.currentProfile() ?? getPathProfile(this.data());
+    }
+    childrenBBox() {
+        const points = this.profile().segments.flatMap(segment => segment.points);
+        return BBox.fromPoints(...points);
+    }
+    lineWidthCoefficient() {
+        const join = this.lineJoin();
+        let coefficient = super.lineWidthCoefficient();
+        if (join === 'miter') {
+            const { minSin } = this.profile();
+            if (minSin > 0) {
+                coefficient = Math.max(coefficient, 0.5 / minSin);
+            }
+        }
+        return coefficient;
+    }
+    processSubpath(path, startPoint, endPoint) {
+        if (startPoint && endPoint && startPoint.equals(endPoint)) {
+            path.closePath();
+        }
+    }
+    *tweenData(newPath, time, timingFunction) {
+        const fromProfile = this.profile();
+        const toProfile = getPathProfile(isReactive(newPath) ? newPath() : newPath);
+        const interpolator = createCurveProfileLerp(fromProfile, toProfile);
+        this.currentProfile(fromProfile);
+        yield* tween(time, value => {
+            const progress = timingFunction(value);
+            this.currentProfile(interpolator(progress));
+        }, () => {
+            this.currentProfile(null);
+            this.data(newPath);
+        });
+    }
+    drawOverlay(context, matrix) {
+        const box = this.childrenBBox().transformCorners(matrix);
+        const size = this.computedSize();
+        const offset = size.mul(this.offset()).scale(0.5).transformAsPoint(matrix);
+        const segments = this.profile().segments;
+        context.lineWidth = 1;
+        context.strokeStyle = 'white';
+        context.fillStyle = 'white';
+        context.save();
+        context.setTransform(matrix);
+        let endPoint = null;
+        let path = new Path2D();
+        for (const segment of segments) {
+            if (endPoint && !segment.getPoint(0).position.equals(endPoint)) {
+                context.stroke(path);
+                path = new Path2D();
+                endPoint = null;
+            }
+            const [, end] = segment.draw(path, 0, 1, endPoint == null);
+            endPoint = end.position;
+        }
+        context.stroke(path);
+        context.restore();
+        context.beginPath();
+        drawPivot(context, offset);
+        context.stroke();
+        context.beginPath();
+        drawLine(context, box);
+        context.closePath();
+        context.stroke();
+    }
+}
+__decorate([
+    signal()
+], Path.prototype, "data", void 0);
+__decorate([
+    computed()
+], Path.prototype, "profile", null);
+__decorate([
+    threadable()
+], Path.prototype, "tweenData", null);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUGF0aC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9QYXRoLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLE9BQU8sRUFDTCxJQUFJLEVBQ0osWUFBWSxFQUNaLFVBQVUsRUFHVixVQUFVLEVBRVYsS0FBSyxHQUVOLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBQyxzQkFBc0IsRUFBQyxNQUFNLGtDQUFrQyxDQUFDO0FBQ3hFLE9BQU8sRUFBQyxjQUFjLEVBQUMsTUFBTSwwQkFBMEIsQ0FBQztBQUN4RCxPQUFPLEVBQUMsUUFBUSxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUMvQyxPQUFPLEVBQUMsUUFBUSxFQUFFLFNBQVMsRUFBQyxNQUFNLFVBQVUsQ0FBQztBQUM3QyxPQUFPLEVBQUMsS0FBSyxFQUFhLE1BQU0sU0FBUyxDQUFDO0FBTTFDLE1BQU0sT0FBTyxJQUFLLFNBQVEsS0FBSztJQUs3QixZQUFtQixLQUFnQjtRQUNqQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFMUCxtQkFBYyxHQUFHLFlBQVksQ0FBc0IsSUFBSSxDQUFDLENBQUM7UUFNL0QsSUFBSSxDQUFDLGNBQWMsR0FBRyxJQUFJLENBQUM7SUFDN0IsQ0FBQztJQUdlLE9BQU87UUFDckIsT0FBTyxJQUFJLENBQUMsY0FBYyxFQUFFLElBQUksY0FBYyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDO0lBQzlELENBQUM7SUFFa0IsWUFBWTtRQUM3QixNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsRUFBRSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUMxRSxPQUFPLElBQUksQ0FBQyxVQUFVLENBQUMsR0FBRyxNQUFNLENBQUMsQ0FBQztJQUNwQyxDQUFDO0lBRWtCLG9CQUFvQjtRQUNy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

package/lib/components/Polygon.d.ts

@@ -0,0 +1,111 @@
+import { BBox, SerializedVector2, SignalValue, SimpleSignal } from '@revideo/core';
+import { CurveProfile } from '../curves';
+import { DesiredLength } from '../partials';
+import { Curve, CurveProps } from './Curve';
+export interface PolygonProps extends CurveProps {
+    /**
+     * {@inheritDoc Polygon.sides}
+     */
+    sides?: SignalValue<number>;
+    /**
+     * {@inheritDoc Polygon.radius}
+     */
+    radius?: SignalValue<number>;
+}
+/**
+ * A node for drawing regular polygons.
+ *
+ * @remarks
+ * This node can be used to render shapes such as: triangle, pentagon,
+ * hexagon and more.
+ *
+ * Note that the polygon is inscribed in a circle defined by the height
+ * and width. If height and width are unequal, the polygon is inscribed
+ * in the resulting ellipse.
+ *
+ * Since the polygon is inscribed in the circle, the actual displayed
+ * height and width may differ somewhat from the bounding rectangle. This
+ * will be particularly noticeable if the number of sides is low, e.g. for a
+ * triangle.
+ *
+ * @preview
+ * ```tsx editor
+ * // snippet Polygon
+ * import {makeScene2D, Polygon} from '@revideo/2d';
+ * import {createRef} from '@revideo/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ref = createRef<Polygon>();
+ *   view.add(
+ *     <Polygon
+ *       ref={ref}
+ *       sides={6}
+ *       size={160}
+ *       fill={'lightseagreen'}
+ *     />
+ *   );
+ *
+ *   yield* ref().sides(3, 2).to(6, 2);
+ * });
+ *
+ * // snippet Pentagon outline
+ * import {makeScene2D, Polygon} from '@revideo/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Polygon
+ *       sides={5}
+ *       size={160}
+ *       radius={30}
+ *       stroke={'lightblue'}
+ *       lineWidth={8}
+ *     />
+ *   );
+ * });
+ * ```
+ */
+export declare class Polygon extends Curve {
+    /**
+     * The number of sides of the polygon.
+     *
+     * @remarks
+     * For example, a value of 6 creates a hexagon.
+     *
+     * @example
+     * ```tsx
+     * <Polygon
+     *   size={320}
+     *   sides={7}
+     *   stroke={'#fff'}
+     *   lineWidth={8}
+     *   fill={'lightseagreen'}
+     * />
+     * ```
+     */
+    readonly sides: SimpleSignal<number, this>;
+    /**
+     * The radius of the polygon's corners.
+     *
+     * @example
+     * ```tsx
+     * <Polygon
+     *   radius={30}
+     *   size={320}
+     *   sides={3}
+     *   stroke={'#fff'}
+     *   lineWidth={8}
+     * />
+     * ```
+     */
+    readonly radius: SimpleSignal<number, this>;
+    constructor(props: PolygonProps);
+    profile(): CurveProfile;
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected offsetComputedLayout(box: BBox): BBox;
+    protected childrenBBox(): BBox;
+    protected requiresProfile(): boolean;
+    protected getPath(): Path2D;
+    protected getRipplePath(): Path2D;
+    protected createPath(expand?: number): Path2D;
+}
+//# sourceMappingURL=Polygon.d.ts.map

package/lib/components/Polygon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Polygon.d.ts","sourceRoot":"","sources":["../../src/lib/components/Polygon.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,iBAAiB,EACjB,WAAW,EACX,YAAY,EAEb,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,YAAY,EAAqB,MAAM,WAAW,CAAC;AAE3D,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAC,KAAK,EAAE,UAAU,EAAC,MAAM,SAAS,CAAC;AAE1C,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,qBAAa,OAAQ,SAAQ,KAAK;IAChC;;;;;;;;;;;;;;;;OAgBG;IACH,SAEwB,KAAK,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAE1D;;;;;;;;;;;;;OAaG;IACH,SAEwB,MAAM,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;gBAExC,KAAK,EAAE,YAAY;IAKtB,OAAO,IAAI,YAAY;cAepB,WAAW,IAAI,iBAAiB,CAAC,aAAa,CAAC;cAO/C,oBAAoB,CAAC,GAAG,EAAE,IAAI,GAAG,IAAI;cAIrC,YAAY,IAAI,IAAI;cAIpB,eAAe,IAAI,OAAO;cAI1B,OAAO,IAAI,MAAM;cAOjB,aAAa,IAAI,MAAM;IAI1C,SAAS,CAAC,UAAU,CAAC,MAAM,SAAI;CAOhC"}

package/lib/components/Polygon.js

@@ -0,0 +1,123 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { BBox, Vector2, } from '@revideo/core';
+import { getPolylineProfile } from '../curves';
+import { computed, initial, signal } from '../decorators';
+import { drawPolygon } from '../utils';
+import { Curve } from './Curve';
+/**
+ * A node for drawing regular polygons.
+ *
+ * @remarks
+ * This node can be used to render shapes such as: triangle, pentagon,
+ * hexagon and more.
+ *
+ * Note that the polygon is inscribed in a circle defined by the height
+ * and width. If height and width are unequal, the polygon is inscribed
+ * in the resulting ellipse.
+ *
+ * Since the polygon is inscribed in the circle, the actual displayed
+ * height and width may differ somewhat from the bounding rectangle. This
+ * will be particularly noticeable if the number of sides is low, e.g. for a
+ * triangle.
+ *
+ * @preview
+ * ```tsx editor
+ * // snippet Polygon
+ * import {makeScene2D, Polygon} from '@revideo/2d';
+ * import {createRef} from '@revideo/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ref = createRef<Polygon>();
+ *   view.add(
+ *     <Polygon
+ *       ref={ref}
+ *       sides={6}
+ *       size={160}
+ *       fill={'lightseagreen'}
+ *     />
+ *   );
+ *
+ *   yield* ref().sides(3, 2).to(6, 2);
+ * });
+ *
+ * // snippet Pentagon outline
+ * import {makeScene2D, Polygon} from '@revideo/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Polygon
+ *       sides={5}
+ *       size={160}
+ *       radius={30}
+ *       stroke={'lightblue'}
+ *       lineWidth={8}
+ *     />
+ *   );
+ * });
+ * ```
+ */
+export class Polygon extends Curve {
+    constructor(props) {
+        super(props);
+    }
+    profile() {
+        const sides = this.sides();
+        const radius = this.radius();
+        const points = [];
+        const size = this.computedSize().scale(0.5);
+        for (let i = 0; i < sides; i++) {
+            const theta = (i * 2 * Math.PI) / sides;
+            const direction = Vector2.fromRadians(theta).perpendicular;
+            points.push(direction.mul(size));
+        }
+        return getPolylineProfile(points, radius, true);
+    }
+    desiredSize() {
+        return {
+            x: this.width.context.getter(),
+            y: this.height.context.getter(),
+        };
+    }
+    offsetComputedLayout(box) {
+        return box;
+    }
+    childrenBBox() {
+        return BBox.fromSizeCentered(this.computedSize());
+    }
+    requiresProfile() {
+        return super.requiresProfile() || this.radius() > 0;
+    }
+    getPath() {
+        if (this.requiresProfile()) {
+            return this.curveDrawingInfo().path;
+        }
+        return this.createPath();
+    }
+    getRipplePath() {
+        return this.createPath(this.rippleSize());
+    }
+    createPath(expand = 0) {
+        const path = new Path2D();
+        const sides = this.sides();
+        const box = BBox.fromSizeCentered(this.size()).expand(expand);
+        drawPolygon(path, box, sides);
+        return path;
+    }
+}
+__decorate([
+    initial(6),
+    signal()
+], Polygon.prototype, "sides", void 0);
+__decorate([
+    initial(0),
+    signal()
+], Polygon.prototype, "radius", void 0);
+__decorate([
+    computed()
+], Polygon.prototype, "profile", null);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUG9seWdvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9Qb2x5Z29uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLE9BQU8sRUFDTCxJQUFJLEVBSUosT0FBTyxHQUNSLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBZSxrQkFBa0IsRUFBQyxNQUFNLFdBQVcsQ0FBQztBQUMzRCxPQUFPLEVBQUMsUUFBUSxFQUFFLE9BQU8sRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFFeEQsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLFVBQVUsQ0FBQztBQUNyQyxPQUFPLEVBQUMsS0FBSyxFQUFhLE1BQU0sU0FBUyxDQUFDO0FBYTFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FtREc7QUFDSCxNQUFNLE9BQU8sT0FBUSxTQUFRLEtBQUs7SUF3Q2hDLFlBQW1CLEtBQW1CO1FBQ3BDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNmLENBQUM7SUFHZSxPQUFPO1FBQ3JCLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUMzQixNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7UUFFN0IsTUFBTSxNQUFNLEdBQUcsRUFBRSxDQUFDO1FBQ2xCLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDNUMsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLEtBQUssRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQy9CLE1BQU0sS0FBSyxHQUFHLENBQUMsQ0FBQyxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUMsRUFBRSxDQUFDLEdBQUcsS0FBSyxDQUFDO1lBQ3hDLE1BQU0sU0FBUyxHQUFHLE9BQU8sQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUMsYUFBYSxDQUFDO1lBQzNELE1BQU0sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO1FBQ25DLENBQUM7UUFFRCxPQUFPLGtCQUFrQixDQUFDLE1BQU0sRUFBRSxNQUFNLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDbEQsQ0FBQztJQUVrQixXQUFXO1FBQzVCLE9BQU87WUFDTCxDQUFDLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsTUFBTSxFQUFFO1lBQzlCLENBQUMsRUFBRSxJQUFJLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUU7U0FDaEMsQ0FBQztJQUNKLENBQUM7SUFFa0Isb0JBQW9CLENBQUMsR0FBUztRQUMvQyxPQUFPLEdBQUcsQ0FBQztJQUNiLENBQUM7SUFFa0IsWUFBWTtRQUM3QixPQUFPLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUMsQ0FBQztJQUNwRCxDQUFDO0lBRWtCLGVBQWU7UUFDaEMsT0FBTyxLQUFLLENBQUMsZUFBZSxFQUFFLElBQUksSUFBSSxDQUFDLE1BQU0sRUFBRSxHQUFHLENBQUMsQ0FBQztJQUN0RCxDQUFDO0lBRWtCLE9BQU87UUFDeEIsSUFBSSxJQUFJLENBQUMsZUFBZSxFQUFFLEVBQUUsQ0FBQztZQUMzQixPQUFPLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDLElBQUksQ0FBQztRQUN0QyxDQUFDO1FBRUQsT0FBTyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDM0IsQ0FBQztJQUNrQixhQUFhO1FBQzlCLE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUMsQ0FBQztJQUM1QyxDQUFDO0lBRVMsVUFBVSxDQUFDLE1BQU0sR0FBRyxDQUFDO1FBQzdCLE1BQU0sSUFBSSxHQUFHLElBQUksTUFBTSxFQUFFLENBQUM7UUFDMUIsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQzNCLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDOUQsV0FBVyxDQUFDLElBQUksRUFBRSxHQUFHLEVBQUUsS0FBSyxDQUFDLENBQUM7UUFDOUIsT0FBTyxJQUFJLENBQUM7SUFDZCxDQUFDO0NBQ0Y7QUE3RXlCO0lBRnZCLE9BQU8sQ0FBQyxDQUFDLENBQUM7SUFDVixNQUFNLEVBQUU7c0NBQ2lEO0FBa0JsQztJQUZ2QixPQUFPLENBQUMsQ0FBQyxDQUFDO0lBQ1YsTUFBTSxFQUFFO3VDQUNrRDtBQU8zQztJQURmLFFBQVEsRUFBRTtzQ0FjViJ9

package/lib/components/QuadBezier.d.ts

@@ -0,0 +1,61 @@
+import { PossibleVector2, SignalValue, Vector2Signal } from '@revideo/core';
+import { PolynomialSegment } from '../curves/PolynomialSegment';
+import { Bezier, BezierOverlayInfo } from './Bezier';
+import { CurveProps } from './Curve';
+export interface QuadBezierProps extends CurveProps {
+    p0?: SignalValue<PossibleVector2>;
+    p0X?: SignalValue<number>;
+    p0Y?: SignalValue<number>;
+    p1?: SignalValue<PossibleVector2>;
+    p1X?: SignalValue<number>;
+    p1Y?: SignalValue<number>;
+    p2?: SignalValue<PossibleVector2>;
+    p2X?: SignalValue<number>;
+    p2Y?: SignalValue<number>;
+}
+/**
+ * A node for drawing a quadratic Bézier curve.
+ *
+ * @preview
+ * ```tsx editor
+ * import {makeScene2D, QuadBezier} from '@revideo/2d';
+ * import {createRef} from '@revideo/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const bezier = createRef<QuadBezier>();
+ *
+ *   view.add(
+ *     <QuadBezier
+ *       ref={bezier}
+ *       lineWidth={4}
+ *       stroke={'lightseagreen'}
+ *       p0={[-200, 0]}
+ *       p1={[0, -200]}
+ *       p2={[200, 0]}
+ *       end={0}
+ *     />
+ *   );
+ *
+ *   yield* bezier().end(1, 1);
+ *   yield* bezier().start(1, 1).to(0, 1);
+ * });
+ * ```
+ */
+export declare class QuadBezier extends Bezier {
+    /**
+     * The start point of the Bézier curve.
+     */
+    readonly p0: Vector2Signal<this>;
+    /**
+     * The control point of the Bézier curve.
+     */
+    readonly p1: Vector2Signal<this>;
+    /**
+     * The end point of the Bézier curve.
+     */
+    readonly p2: Vector2Signal<this>;
+    constructor(props: QuadBezierProps);
+    protected segment(): PolynomialSegment;
+    protected overlayInfo(matrix: DOMMatrix): BezierOverlayInfo;
+}
+//# sourceMappingURL=QuadBezier.d.ts.map

package/lib/components/QuadBezier.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuadBezier.d.ts","sourceRoot":"","sources":["../../src/lib/components/QuadBezier.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAC,iBAAiB,EAAC,MAAM,6BAA6B,CAAC;AAG9D,OAAO,EAAC,MAAM,EAAE,iBAAiB,EAAC,MAAM,UAAU,CAAC;AACnD,OAAO,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC;AAEnC,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,EAAE,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAClC,GAAG,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,GAAG,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAE1B,EAAE,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAClC,GAAG,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,GAAG,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAE1B,EAAE,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAClC,GAAG,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,GAAG,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,UAAW,SAAQ,MAAM;IACpC;;OAEG;IACH,SACwB,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAEhD;;OAEG;IACH,SACwB,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAEhD;;OAEG;IACH,SACwB,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;gBAE7B,KAAK,EAAE,eAAe;IAKzC,SAAS,CAAC,OAAO,IAAI,iBAAiB;IAItC,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,SAAS,GAAG,iBAAiB;CAoB5D"}

package/lib/components/QuadBezier.js

@@ -0,0 +1,76 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { QuadBezierSegment } from '../curves';
+import { computed, vector2Signal } from '../decorators';
+import { lineTo, moveTo, quadraticCurveTo } from '../utils';
+import { Bezier } from './Bezier';
+/**
+ * A node for drawing a quadratic Bézier curve.
+ *
+ * @preview
+ * ```tsx editor
+ * import {makeScene2D, QuadBezier} from '@revideo/2d';
+ * import {createRef} from '@revideo/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const bezier = createRef<QuadBezier>();
+ *
+ *   view.add(
+ *     <QuadBezier
+ *       ref={bezier}
+ *       lineWidth={4}
+ *       stroke={'lightseagreen'}
+ *       p0={[-200, 0]}
+ *       p1={[0, -200]}
+ *       p2={[200, 0]}
+ *       end={0}
+ *     />
+ *   );
+ *
+ *   yield* bezier().end(1, 1);
+ *   yield* bezier().start(1, 1).to(0, 1);
+ * });
+ * ```
+ */
+export class QuadBezier extends Bezier {
+    constructor(props) {
+        super(props);
+    }
+    segment() {
+        return new QuadBezierSegment(this.p0(), this.p1(), this.p2());
+    }
+    overlayInfo(matrix) {
+        const [p0, p1, p2] = this.segment().transformPoints(matrix);
+        const curvePath = new Path2D();
+        moveTo(curvePath, p0);
+        quadraticCurveTo(curvePath, p1, p2);
+        const handleLinesPath = new Path2D();
+        moveTo(handleLinesPath, p0);
+        lineTo(handleLinesPath, p1);
+        lineTo(handleLinesPath, p2);
+        return {
+            curve: curvePath,
+            startPoint: p0,
+            endPoint: p2,
+            controlPoints: [p1],
+            handleLines: handleLinesPath,
+        };
+    }
+}
+__decorate([
+    vector2Signal('p0')
+], QuadBezier.prototype, "p0", void 0);
+__decorate([
+    vector2Signal('p1')
+], QuadBezier.prototype, "p1", void 0);
+__decorate([
+    vector2Signal('p2')
+], QuadBezier.prototype, "p2", void 0);
+__decorate([
+    computed()
+], QuadBezier.prototype, "segment", null);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUXVhZEJlemllci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9RdWFkQmV6aWVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUNBLE9BQU8sRUFBQyxpQkFBaUIsRUFBQyxNQUFNLFdBQVcsQ0FBQztBQUU1QyxPQUFPLEVBQUMsUUFBUSxFQUFFLGFBQWEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN0RCxPQUFPLEVBQUMsTUFBTSxFQUFFLE1BQU0sRUFBRSxnQkFBZ0IsRUFBQyxNQUFNLFVBQVUsQ0FBQztBQUMxRCxPQUFPLEVBQUMsTUFBTSxFQUFvQixNQUFNLFVBQVUsQ0FBQztBQWlCbkQ7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTJCRztBQUNILE1BQU0sT0FBTyxVQUFXLFNBQVEsTUFBTTtJQW1CcEMsWUFBbUIsS0FBc0I7UUFDdkMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2YsQ0FBQztJQUdTLE9BQU87UUFDZixPQUFPLElBQUksaUJBQWlCLENBQUMsSUFBSSxDQUFDLEVBQUUsRUFBRSxFQUFFLElBQUksQ0FBQyxFQUFFLEVBQUUsRUFBRSxJQUFJLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUNoRSxDQUFDO0lBRVMsV0FBVyxDQUFDLE1BQWlCO1FBQ3JDLE1BQU0sQ0FBQyxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsQ0FBQyxHQUFHLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxlQUFlLENBQUMsTUFBTSxDQUFDLENBQUM7UUFFNUQsTUFBTSxTQUFTLEdBQUcsSUFBSSxNQUFNLEVBQUUsQ0FBQztRQUMvQixNQUFNLENBQUMsU0FBUyxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBQ3RCLGdCQUFnQixDQUFDLFNBQVMsRUFBRSxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQUM7UUFFcEMsTUFBTSxlQUFlLEdBQUcsSUFBSSxNQUFNLEVBQUUsQ0FBQztRQUNyQyxNQUFNLENBQUMsZUFBZSxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBQzVCLE1BQU0sQ0FBQyxlQUFlLEVBQUUsRUFBRSxDQUFDLENBQUM7UUFDNUIsTUFBTSxDQUFDLGVBQWUsRUFBRSxFQUFFLENBQUMsQ0FBQztRQUU1QixPQUFPO1lBQ0wsS0FBSyxFQUFFLFNBQVM7WUFDaEIsVUFBVSxFQUFFLEVBQUU7WUFDZCxRQUFRLEVBQUUsRUFBRTtZQUNaLGFBQWEsRUFBRSxDQUFDLEVBQUUsQ0FBQztZQUNuQixXQUFXLEVBQUUsZUFBZTtTQUM3QixDQUFDO0lBQ0osQ0FBQztDQUNGO0FBM0N5QjtJQUR2QixhQUFhLENBQUMsSUFBSSxDQUFDO3NDQUM0QjtBQU14QjtJQUR2QixhQUFhLENBQUMsSUFBSSxDQUFDO3NDQUM0QjtBQU14QjtJQUR2QixhQUFhLENBQUMsSUFBSSxDQUFDO3NDQUM0QjtBQU90QztJQURULFFBQVEsRUFBRTt5Q0FHViJ9

package/lib/components/Ray.d.ts

@@ -0,0 +1,60 @@
+import { BBox, PossibleVector2, SignalValue, Vector2Signal } from '@revideo/core';
+import { CurveProfile } from '../curves';
+import { Curve, CurveProps } from './Curve';
+export interface RayProps extends CurveProps {
+    /**
+     * {@inheritDoc Ray.from}
+     */
+    from?: SignalValue<PossibleVector2>;
+    fromX?: SignalValue<number>;
+    fromY?: SignalValue<number>;
+    /**
+     * {@inheritDoc Ray.to}
+     */
+    to?: SignalValue<PossibleVector2>;
+    toX?: SignalValue<number>;
+    toY?: SignalValue<number>;
+}
+/**
+ * A node for drawing an individual line segment.
+ *
+ * @preview
+ * ```tsx editor
+ * import {makeScene2D} from '@revideo/2d';
+ * import {Ray} from '@revideo/2d';
+ * import {createRef} from '@revideo/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ray = createRef<Ray>();
+ *
+ *   view.add(
+ *     <Ray
+ *       ref={ray}
+ *       lineWidth={8}
+ *       endArrow
+ *       stroke={'lightseagreen'}
+ *       fromX={-200}
+ *       toX={200}
+ *     />,
+ *   );
+ *
+ *   yield* ray().start(1, 1);
+ *   yield* ray().start(0).end(0).start(1, 1);
+ * });
+ * ```
+ */
+export declare class Ray extends Curve {
+    /**
+     * The starting point of the ray.
+     */
+    readonly from: Vector2Signal<this>;
+    /**
+     * The ending point of the ray.
+     */
+    readonly to: Vector2Signal<this>;
+    constructor(props: RayProps);
+    protected childrenBBox(): BBox;
+    profile(): CurveProfile;
+    drawOverlay(context: CanvasRenderingContext2D, matrix: DOMMatrix): void;
+}
+//# sourceMappingURL=Ray.d.ts.map

package/lib/components/Ray.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ray.d.ts","sourceRoot":"","sources":["../../src/lib/components/Ray.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,eAAe,CAAC;AAChF,OAAO,EAAC,YAAY,EAAc,MAAM,WAAW,CAAC;AAGpD,OAAO,EAAC,KAAK,EAAE,UAAU,EAAC,MAAM,SAAS,CAAC;AAE1C,MAAM,WAAW,QAAS,SAAQ,UAAU;IAC1C;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAE5B;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAClC,GAAG,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,GAAG,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBACa,GAAI,SAAQ,KAAK;IAC5B;;OAEG;IACH,SACwB,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAElD;;OAEG;IACH,SACwB,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;gBAE7B,KAAK,EAAE,QAAQ;cAIf,YAAY;IAIf,OAAO,IAAI,YAAY;IAUvB,WAAW,CACzB,OAAO,EAAE,wBAAwB,EACjC,MAAM,EAAE,SAAS;CAoCpB"}