@twick/2d 0.11.0

package/lib/components/Curve.d.ts

@@ -0,0 +1,204 @@
+import type { BBox, SerializedVector2, SignalValue, SimpleSignal } from '@twick/core';
+import { Vector2 } from '@twick/core';
+import type { CurveDrawingInfo } from '../curves/CurveDrawingInfo';
+import type { CurvePoint } from '../curves/CurvePoint';
+import type { CurveProfile } from '../curves/CurveProfile';
+import type { DesiredLength } from '../partials';
+import type { ShapeProps } from './Shape';
+import { Shape } from './Shape';
+export interface CurveProps extends ShapeProps {
+    /**
+     * {@inheritDoc Curve.closed}
+     */
+    closed?: SignalValue<boolean>;
+    /**
+     * {@inheritDoc Curve.start}
+     */
+    start?: SignalValue<number>;
+    /**
+     * {@inheritDoc Curve.startOffset}
+     */
+    startOffset?: SignalValue<number>;
+    /**
+     * {@inheritDoc Curve.startArrow}
+     */
+    startArrow?: SignalValue<boolean>;
+    /**
+     * {@inheritDoc Curve.end}
+     */
+    end?: SignalValue<number>;
+    /**
+     * {@inheritDoc Curve.endOffset}
+     */
+    endOffset?: SignalValue<number>;
+    /**
+     * {@inheritDoc Curve.endArrow}
+     */
+    endArrow?: SignalValue<boolean>;
+    /**
+     * {@inheritDoc Curve.arrowSize}
+     */
+    arrowSize?: SignalValue<number>;
+}
+export declare abstract class Curve extends Shape {
+    /**
+     * Whether the curve should be closed.
+     *
+     * @remarks
+     * Closed curves have their start and end points connected.
+     */
+    readonly closed: SimpleSignal<boolean, this>;
+    /**
+     * A percentage from the start before which the curve should be clipped.
+     *
+     * @remarks
+     * The portion of the curve that comes before the given percentage will be
+     * made invisible.
+     *
+     * This property is usefully for animating the curve appearing on the screen.
+     * The value of `0` means the very start of the curve (accounting for the
+     * {@link startOffset}) while `1` means the very end (accounting for the
+     * {@link endOffset}).
+     */
+    readonly start: SimpleSignal<number, this>;
+    /**
+     * The offset in pixels from the start of the curve.
+     *
+     * @remarks
+     * This property lets you specify where along the defined curve the actual
+     * visible portion starts. For example, setting it to `20` will make the first
+     * 20 pixels of the curve invisible.
+     *
+     * This property is useful for trimming the curve using a fixed distance.
+     * If you want to animate the curve appearing on the screen, use {@link start}
+     * instead.
+     */
+    readonly startOffset: SimpleSignal<number, this>;
+    /**
+     * Whether to display an arrow at the start of the visible curve.
+     *
+     * @remarks
+     * Use {@link arrowSize} to control the size of the arrow.
+     */
+    readonly startArrow: SimpleSignal<boolean, this>;
+    /**
+     * A percentage from the start after which the curve should be clipped.
+     *
+     * @remarks
+     * The portion of the curve that comes after the given percentage will be
+     * made invisible.
+     *
+     * This property is usefully for animating the curve appearing on the screen.
+     * The value of `0` means the very start of the curve (accounting for the
+     * {@link startOffset}) while `1` means the very end (accounting for the
+     * {@link endOffset}).
+     */
+    readonly end: SimpleSignal<number, this>;
+    /**
+     * The offset in pixels from the end of the curve.
+     *
+     * @remarks
+     * This property lets you specify where along the defined curve the actual
+     * visible portion ends. For example, setting it to `20` will make the last
+     * 20 pixels of the curve invisible.
+     *
+     * This property is useful for trimming the curve using a fixed distance.
+     * If you want to animate the curve appearing on the screen, use {@link end}
+     * instead.
+     */
+    readonly endOffset: SimpleSignal<number, this>;
+    /**
+     * Whether to display an arrow at the end of the visible curve.
+     *
+     * @remarks
+     * Use {@link arrowSize} to control the size of the arrow.
+     */
+    readonly endArrow: SimpleSignal<boolean, this>;
+    /**
+     * Controls the size of the end and start arrows.
+     *
+     * @remarks
+     * To make the arrows visible make sure to enable {@link startArrow} and/or
+     * {@link endArrow}.
+     */
+    readonly arrowSize: SimpleSignal<number, this>;
+    protected canHaveSubpath: boolean;
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    constructor(props: CurveProps);
+    protected abstract childrenBBox(): BBox;
+    abstract profile(): CurveProfile;
+    /**
+     * Convert a percentage along the curve to a distance.
+     *
+     * @remarks
+     * The returned distance is given in relation to the full curve, not
+     * accounting for {@link startOffset} and {@link endOffset}.
+     *
+     * @param value - The percentage along the curve.
+     */
+    percentageToDistance(value: number): number;
+    /**
+     * Convert a distance along the curve to a percentage.
+     *
+     * @remarks
+     * The distance should be given in relation to the full curve, not
+     * accounting for {@link startOffset} and {@link endOffset}.
+     *
+     * @param value - The distance along the curve.
+     */
+    distanceToPercentage(value: number): number;
+    /**
+     * The base arc length of this curve.
+     *
+     * @remarks
+     * This is the entire length of this curve, not accounting for
+     * {@link startOffset | the offsets}.
+     */
+    baseArcLength(): number;
+    /**
+     * The offset arc length of this curve.
+     *
+     * @remarks
+     * This is the length of the curve that accounts for
+     * {@link startOffset | the offsets}.
+     */
+    offsetArcLength(): number;
+    /**
+     * The visible arc length of this curve.
+     *
+     * @remarks
+     * This arc length accounts for both the offset and the {@link start} and
+     * {@link end} properties.
+     */
+    arcLength(): number;
+    /**
+     * The percentage of the curve that's currently visible.
+     *
+     * @remarks
+     * The returned value is the ratio between the visible length (as defined by
+     * {@link start} and {@link end}) and the offset length of the curve.
+     */
+    completion(): number;
+    protected processSubpath(_path: Path2D, _startPoint: Vector2 | null, _endPoint: Vector2 | null): void;
+    protected curveDrawingInfo(): CurveDrawingInfo;
+    protected getPointAtDistance(value: number): CurvePoint;
+    getPointAtPercentage(value: number): CurvePoint;
+    protected getComputedLayout(): BBox;
+    protected offsetComputedLayout(box: BBox): BBox;
+    protected getPath(): Path2D;
+    protected getCacheBBox(): BBox;
+    protected lineWidthCoefficient(): number;
+    /**
+     * Check if the path requires a profile.
+     *
+     * @remarks
+     * The profile is only required if certain features are used. Otherwise, the
+     * profile generation can be skipped, and the curve can be drawn directly
+     * using the 2D context.
+     */
+    protected requiresProfile(): boolean;
+    protected drawShape(context: CanvasRenderingContext2D): void;
+    private drawArrows;
+    private drawArrow;
+}
+//# sourceMappingURL=Curve.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Curve.d.ts","sourceRoot":"","sources":["../../src/lib/components/Curve.ts"],"names":[],"mappings":"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"}

package/lib/components/Curve.js

@@ -0,0 +1,284 @@
+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 { Vector2, clamp } from '@twick/core';
+import { getPointAtDistance } from '../curves/getPointAtDistance';
+import { computed, initial, nodeName, signal } from '../decorators';
+import { lineTo, moveTo, resolveCanvasStyle } from '../utils';
+import { Shape } from './Shape';
+let Curve = class Curve extends Shape {
+    desiredSize() {
+        return this.childrenBBox().size;
+    }
+    constructor(props) {
+        super(props);
+        this.canHaveSubpath = false;
+    }
+    /**
+     * Convert a percentage along the curve to a distance.
+     *
+     * @remarks
+     * The returned distance is given in relation to the full curve, not
+     * accounting for {@link startOffset} and {@link endOffset}.
+     *
+     * @param value - The percentage along the curve.
+     */
+    percentageToDistance(value) {
+        return clamp(0, this.baseArcLength(), this.startOffset() + this.offsetArcLength() * value);
+    }
+    /**
+     * Convert a distance along the curve to a percentage.
+     *
+     * @remarks
+     * The distance should be given in relation to the full curve, not
+     * accounting for {@link startOffset} and {@link endOffset}.
+     *
+     * @param value - The distance along the curve.
+     */
+    distanceToPercentage(value) {
+        return (value - this.startOffset()) / this.offsetArcLength();
+    }
+    /**
+     * The base arc length of this curve.
+     *
+     * @remarks
+     * This is the entire length of this curve, not accounting for
+     * {@link startOffset | the offsets}.
+     */
+    baseArcLength() {
+        return this.profile().arcLength;
+    }
+    /**
+     * The offset arc length of this curve.
+     *
+     * @remarks
+     * This is the length of the curve that accounts for
+     * {@link startOffset | the offsets}.
+     */
+    offsetArcLength() {
+        const startOffset = this.startOffset();
+        const endOffset = this.endOffset();
+        const baseLength = this.baseArcLength();
+        return clamp(0, baseLength, baseLength - startOffset - endOffset);
+    }
+    /**
+     * The visible arc length of this curve.
+     *
+     * @remarks
+     * This arc length accounts for both the offset and the {@link start} and
+     * {@link end} properties.
+     */
+    arcLength() {
+        return this.offsetArcLength() * Math.abs(this.start() - this.end());
+    }
+    /**
+     * The percentage of the curve that's currently visible.
+     *
+     * @remarks
+     * The returned value is the ratio between the visible length (as defined by
+     * {@link start} and {@link end}) and the offset length of the curve.
+     */
+    completion() {
+        return Math.abs(this.start() - this.end());
+    }
+    processSubpath(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _path, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _startPoint, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _endPoint) {
+        // do nothing
+    }
+    curveDrawingInfo() {
+        const path = new Path2D();
+        let subpath = new Path2D();
+        const profile = this.profile();
+        let start = this.percentageToDistance(this.start());
+        let end = this.percentageToDistance(this.end());
+        if (start > end) {
+            [start, end] = [end, start];
+        }
+        const distance = end - start;
+        const arrowSize = Math.min(distance / 2, this.arrowSize());
+        if (this.startArrow()) {
+            start += arrowSize / 2;
+        }
+        if (this.endArrow()) {
+            end -= arrowSize / 2;
+        }
+        let length = 0;
+        let startPoint = null;
+        let startTangent = null;
+        let endPoint = null;
+        let endTangent = null;
+        for (const segment of profile.segments) {
+            const previousLength = length;
+            length += segment.arcLength;
+            if (length < start) {
+                continue;
+            }
+            const relativeStart = (start - previousLength) / segment.arcLength;
+            const relativeEnd = (end - previousLength) / segment.arcLength;
+            const clampedStart = clamp(0, 1, relativeStart);
+            const clampedEnd = clamp(0, 1, relativeEnd);
+            if (this.canHaveSubpath &&
+                endPoint &&
+                !segment.getPoint(0).position.equals(endPoint)) {
+                path.addPath(subpath);
+                this.processSubpath(subpath, startPoint, endPoint);
+                subpath = new Path2D();
+                startPoint = null;
+            }
+            const [startCurvePoint, endCurvePoint] = segment.draw(subpath, clampedStart, clampedEnd, startPoint === null);
+            if (startPoint === null) {
+                startPoint = startCurvePoint.position;
+                startTangent = startCurvePoint.normal.flipped.perpendicular;
+            }
+            endPoint = endCurvePoint.position;
+            endTangent = endCurvePoint.normal.flipped.perpendicular;
+            if (length > end) {
+                break;
+            }
+        }
+        if (this.closed() &&
+            this.start.isInitial() &&
+            this.end.isInitial() &&
+            this.startOffset.isInitial() &&
+            this.endOffset.isInitial()) {
+            subpath.closePath();
+        }
+        this.processSubpath(subpath, startPoint, endPoint);
+        path.addPath(subpath);
+        return {
+            startPoint: startPoint ?? Vector2.zero,
+            startTangent: startTangent ?? Vector2.right,
+            endPoint: endPoint ?? Vector2.zero,
+            endTangent: endTangent ?? Vector2.right,
+            arrowSize,
+            path,
+            startOffset: start,
+        };
+    }
+    getPointAtDistance(value) {
+        return getPointAtDistance(this.profile(), value + this.startOffset());
+    }
+    getPointAtPercentage(value) {
+        return getPointAtDistance(this.profile(), this.percentageToDistance(value));
+    }
+    getComputedLayout() {
+        return this.offsetComputedLayout(super.getComputedLayout());
+    }
+    offsetComputedLayout(box) {
+        box.position = box.position.sub(this.childrenBBox().center);
+        return box;
+    }
+    getPath() {
+        return this.curveDrawingInfo().path;
+    }
+    getCacheBBox() {
+        const box = this.childrenBBox();
+        const arrowSize = this.startArrow() || this.endArrow() ? this.arrowSize() : 0;
+        const lineWidth = this.lineWidth();
+        const coefficient = this.lineWidthCoefficient();
+        return box.expand(Math.max(0, arrowSize, lineWidth * coefficient));
+    }
+    lineWidthCoefficient() {
+        return this.lineCap() === 'square' ? 0.5 * 1.4143 : 0.5;
+    }
+    /**
+     * Check if the path requires a profile.
+     *
+     * @remarks
+     * The profile is only required if certain features are used. Otherwise, the
+     * profile generation can be skipped, and the curve can be drawn directly
+     * using the 2D context.
+     */
+    requiresProfile() {
+        return (!this.start.isInitial() ||
+            !this.startOffset.isInitial() ||
+            !this.startArrow.isInitial() ||
+            !this.end.isInitial() ||
+            !this.endOffset.isInitial() ||
+            !this.endArrow.isInitial());
+    }
+    drawShape(context) {
+        super.drawShape(context);
+        if (this.startArrow() || this.endArrow()) {
+            this.drawArrows(context);
+        }
+    }
+    drawArrows(context) {
+        const { startPoint, startTangent, endPoint, endTangent, arrowSize } = this.curveDrawingInfo();
+        if (arrowSize < 0.001) {
+            return;
+        }
+        context.save();
+        context.beginPath();
+        if (this.endArrow()) {
+            this.drawArrow(context, endPoint, endTangent.flipped, arrowSize);
+        }
+        if (this.startArrow()) {
+            this.drawArrow(context, startPoint, startTangent, arrowSize);
+        }
+        context.fillStyle = resolveCanvasStyle(this.stroke(), context);
+        context.closePath();
+        context.fill();
+        context.restore();
+    }
+    drawArrow(context, center, tangent, arrowSize) {
+        const normal = tangent.perpendicular;
+        const origin = center.add(tangent.scale(-arrowSize / 2));
+        moveTo(context, origin);
+        lineTo(context, origin.add(tangent.add(normal).scale(arrowSize)));
+        lineTo(context, origin.add(tangent.sub(normal).scale(arrowSize)));
+        lineTo(context, origin);
+        context.closePath();
+    }
+};
+__decorate([
+    initial(false),
+    signal()
+], Curve.prototype, "closed", void 0);
+__decorate([
+    initial(0),
+    signal()
+], Curve.prototype, "start", void 0);
+__decorate([
+    initial(0),
+    signal()
+], Curve.prototype, "startOffset", void 0);
+__decorate([
+    initial(false),
+    signal()
+], Curve.prototype, "startArrow", void 0);
+__decorate([
+    initial(1),
+    signal()
+], Curve.prototype, "end", void 0);
+__decorate([
+    initial(0),
+    signal()
+], Curve.prototype, "endOffset", void 0);
+__decorate([
+    initial(false),
+    signal()
+], Curve.prototype, "endArrow", void 0);
+__decorate([
+    initial(24),
+    signal()
+], Curve.prototype, "arrowSize", void 0);
+__decorate([
+    computed()
+], Curve.prototype, "arcLength", null);
+__decorate([
+    computed()
+], Curve.prototype, "curveDrawingInfo", null);
+Curve = __decorate([
+    nodeName('Curve')
+], Curve);
+export { Curve };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ3VydmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvQ3VydmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBTUEsT0FBTyxFQUFDLE9BQU8sRUFBRSxLQUFLLEVBQUMsTUFBTSxhQUFhLENBQUM7QUFJM0MsT0FBTyxFQUFDLGtCQUFrQixFQUFDLE1BQU0sOEJBQThCLENBQUM7QUFDaEUsT0FBTyxFQUFDLFFBQVEsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUVsRSxPQUFPLEVBQUMsTUFBTSxFQUFFLE1BQU0sRUFBRSxrQkFBa0IsRUFBQyxNQUFNLFVBQVUsQ0FBQztBQUU1RCxPQUFPLEVBQUMsS0FBSyxFQUFDLE1BQU0sU0FBUyxDQUFDO0FBc0N2QixJQUFlLEtBQUssR0FBcEIsTUFBZSxLQUFNLFNBQVEsS0FBSztJQTRHcEIsV0FBVztRQUM1QixPQUFPLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQyxJQUFJLENBQUM7SUFDbEMsQ0FBQztJQUVELFlBQW1CLEtBQWlCO1FBQ2xDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQVBMLG1CQUFjLEdBQUcsS0FBSyxDQUFDO0lBUWpDLENBQUM7SUFNRDs7Ozs7Ozs7T0FRRztJQUNJLG9CQUFvQixDQUFDLEtBQWE7UUFDdkMsT0FBTyxLQUFLLENBQ1YsQ0FBQyxFQUNELElBQUksQ0FBQyxhQUFhLEVBQUUsRUFDcEIsSUFBSSxDQUFDLFdBQVcsRUFBRSxHQUFHLElBQUksQ0FBQyxlQUFlLEVBQUUsR0FBRyxLQUFLLENBQ3BELENBQUM7SUFDSixDQUFDO0lBRUQ7Ozs7Ozs7O09BUUc7SUFDSSxvQkFBb0IsQ0FBQyxLQUFhO1FBQ3ZDLE9BQU8sQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQy9ELENBQUM7SUFFRDs7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

package/lib/components/Grid.d.ts

@@ -0,0 +1,76 @@
+import type { PossibleVector2, SignalValue, SimpleSignal, Vector2Signal } from '@twick/core';
+import type { ShapeProps } from './Shape';
+import { Shape } from './Shape';
+export interface GridProps extends ShapeProps {
+    /**
+     * {@inheritDoc Grid.spacing}
+     */
+    spacing?: SignalValue<PossibleVector2>;
+    /**
+     * {@inheritDoc Grid.start}
+     */
+    start?: SignalValue<number>;
+    /**
+     * {@inheritDoc Grid.end}
+     */
+    end?: SignalValue<number>;
+}
+/**
+ * A node for drawing a two-dimensional grid.
+ *
+ * @preview
+ * ```tsx editor
+ * import {Grid, makeScene2D} from '@twick/2d';
+ * import {all, createRef} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const grid = createRef<Grid>();
+ *
+ *   view.add(
+ *     <Grid
+ *       ref={grid}
+ *       width={'100%'}
+ *       height={'100%'}
+ *       stroke={'#666'}
+ *       start={0}
+ *       end={1}
+ *     />,
+ *   );
+ *
+ *   yield* all(
+ *     grid().end(0.5, 1).to(1, 1).wait(1),
+ *     grid().start(0.5, 1).to(0, 1).wait(1),
+ *   );
+ * });
+ * ```
+ */
+export declare class Grid extends Shape {
+    /**
+     * The spacing between the grid lines.
+     */
+    readonly spacing: Vector2Signal<this>;
+    /**
+     * The percentage that should be clipped from the beginning of each grid line.
+     *
+     * @remarks
+     * The portion of each grid line that comes before the given percentage will
+     * be made invisible.
+     *
+     * This property is useful for animating the grid appearing on-screen.
+     */
+    readonly start: SimpleSignal<number, this>;
+    /**
+     * The percentage that should be clipped from the end of each grid line.
+     *
+     * @remarks
+     * The portion of each grid line that comes after the given percentage will
+     * be made invisible.
+     *
+     * This property is useful for animating the grid appearing on-screen.
+     */
+    readonly end: SimpleSignal<number, this>;
+    constructor(props: GridProps);
+    protected drawShape(context: CanvasRenderingContext2D): void;
+    private mapPoints;
+}
+//# sourceMappingURL=Grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/lib/components/Grid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,YAAY,EACZ,aAAa,EACd,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAE9B,MAAM,WAAW,SAAU,SAAQ,UAAU;IAC3C;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B;;OAEG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,IAAK,SAAQ,KAAK;IAC7B;;OAEG;IACH,SAEwB,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAErD;;;;;;;;OAQG;IACH,SAEwB,KAAK,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAE1D;;;;;;;;OAQG;IACH,SAEwB,GAAG,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;gBAErC,KAAK,EAAE,SAAS;cAIhB,SAAS,CAAC,OAAO,EAAE,wBAAwB;IA8B9D,OAAO,CAAC,SAAS;CAUlB"}

package/lib/components/Grid.js

@@ -0,0 +1,91 @@
+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 { map } from '@twick/core';
+import { initial, nodeName, signal, vector2Signal } from '../decorators';
+import { Shape } from './Shape';
+/**
+ * A node for drawing a two-dimensional grid.
+ *
+ * @preview
+ * ```tsx editor
+ * import {Grid, makeScene2D} from '@twick/2d';
+ * import {all, createRef} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const grid = createRef<Grid>();
+ *
+ *   view.add(
+ *     <Grid
+ *       ref={grid}
+ *       width={'100%'}
+ *       height={'100%'}
+ *       stroke={'#666'}
+ *       start={0}
+ *       end={1}
+ *     />,
+ *   );
+ *
+ *   yield* all(
+ *     grid().end(0.5, 1).to(1, 1).wait(1),
+ *     grid().start(0.5, 1).to(0, 1).wait(1),
+ *   );
+ * });
+ * ```
+ */
+let Grid = class Grid extends Shape {
+    constructor(props) {
+        super(props);
+    }
+    drawShape(context) {
+        context.save();
+        this.applyStyle(context);
+        this.drawRipple(context);
+        const spacing = this.spacing();
+        const size = this.computedSize().scale(0.5);
+        const steps = size.div(spacing).floored;
+        for (let x = -steps.x; x <= steps.x; x++) {
+            const [from, to] = this.mapPoints(-size.height, size.height);
+            context.beginPath();
+            context.moveTo(spacing.x * x, from);
+            context.lineTo(spacing.x * x, to);
+            context.stroke();
+        }
+        for (let y = -steps.y; y <= steps.y; y++) {
+            const [from, to] = this.mapPoints(-size.width, size.width);
+            context.beginPath();
+            context.moveTo(from, spacing.y * y);
+            context.lineTo(to, spacing.y * y);
+            context.stroke();
+        }
+        context.restore();
+    }
+    mapPoints(start, end) {
+        let from = map(start, end, this.start());
+        let to = map(start, end, this.end());
+        if (to < from) {
+            [from, to] = [to, from];
+        }
+        return [from, to];
+    }
+};
+__decorate([
+    initial(80),
+    vector2Signal('spacing')
+], Grid.prototype, "spacing", void 0);
+__decorate([
+    initial(0),
+    signal()
+], Grid.prototype, "start", void 0);
+__decorate([
+    initial(1),
+    signal()
+], Grid.prototype, "end", void 0);
+Grid = __decorate([
+    nodeName('Grid')
+], Grid);
+export { Grid };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiR3JpZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9HcmlkLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQU1BLE9BQU8sRUFBQyxHQUFHLEVBQUMsTUFBTSxhQUFhLENBQUM7QUFDaEMsT0FBTyxFQUFDLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLGFBQWEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUV2RSxPQUFPLEVBQUMsS0FBSyxFQUFDLE1BQU0sU0FBUyxDQUFDO0FBaUI5Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTRCRztBQUVJLElBQU0sSUFBSSxHQUFWLE1BQU0sSUFBSyxTQUFRLEtBQUs7SUFrQzdCLFlBQW1CLEtBQWdCO1FBQ2pDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNmLENBQUM7SUFFa0IsU0FBUyxDQUFDLE9BQWlDO1FBQzVELE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNmLElBQUksQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDekIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUV6QixNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDL0IsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUM1QyxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxDQUFDLE9BQU8sQ0FBQztRQUV4QyxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLElBQUksS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQ3pDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1lBRTdELE9BQU8sQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUNwQixPQUFPLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDLEdBQUcsQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDO1lBQ3BDLE9BQU8sQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUMsR0FBRyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7WUFDbEMsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQ25CLENBQUM7UUFFRCxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLElBQUksS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQ3pDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBRTNELE9BQU8sQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUNwQixPQUFPLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxPQUFPLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDO1lBQ3BDLE9BQU8sQ0FBQyxNQUFNLENBQUMsRUFBRSxFQUFFLE9BQU8sQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7WUFDbEMsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBQ25CLENBQUM7UUFFRCxPQUFPLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVPLFNBQVMsQ0FBQyxLQUFhLEVBQUUsR0FBVztRQUMxQyxJQUFJLElBQUksR0FBRyxHQUFHLENBQUMsS0FBSyxFQUFFLEdBQUcsRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztRQUN6QyxJQUFJLEVBQUUsR0FBRyxHQUFHLENBQUMsS0FBSyxFQUFFLEdBQUcsRUFBRSxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQztRQUVyQyxJQUFJLEVBQUUsR0FBRyxJQUFJLEVBQUUsQ0FBQztZQUNkLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxHQUFHLENBQUMsRUFBRSxFQUFFLElBQUksQ0FBQyxDQUFDO1FBQzFCLENBQUM7UUFFRCxPQUFPLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQ3BCLENBQUM7Q0FDRixDQUFBO0FBeEV5QjtJQUZ2QixPQUFPLENBQUMsRUFBRSxDQUFDO0lBQ1gsYUFBYSxDQUFDLFNBQVMsQ0FBQztxQ0FDNEI7QUFhN0I7SUFGdkIsT0FBTyxDQUFDLENBQUMsQ0FBQztJQUNWLE1BQU0sRUFBRTttQ0FDaUQ7QUFhbEM7SUFGdkIsT0FBTyxDQUFDLENBQUMsQ0FBQztJQUNWLE1BQU0sRUFBRTtpQ0FDK0M7QUFoQzdDLElBQUk7SUFEaEIsUUFBUSxDQUFDLE1BQU0sQ0FBQztHQUNKLElBQUksQ0E4RWhCIn0=