@twick/2d 0.14.21 → 0.15.0

package/lib/components/Bezier.js

@@ -1,81 +0,0 @@
-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, transformVectorAsPoint } from '@twick/core';
-import { computed } from '../decorators';
-import { arc, drawLine, drawPivot, moveTo } from '../utils';
-import { Curve } from './Curve';
-export class Bezier extends Curve {
-    profile() {
-        const segment = this.segment();
-        return {
-            segments: [segment],
-            arcLength: segment.arcLength,
-            minSin: 0,
-        };
-    }
-    childrenBBox() {
-        return BBox.fromPoints(...this.segment().points);
-    }
-    desiredSize() {
-        return this.segment().getBBox().size;
-    }
-    offsetComputedLayout(box) {
-        box.position = box.position.sub(this.segment().getBBox().center);
-        return box;
-    }
-    drawOverlay(context, matrix) {
-        const size = this.computedSize();
-        const box = this.childrenBBox().transformCorners(matrix);
-        const offsetBeforeTransform = size.mul(this.offset()).scale(0.5);
-        const offset = transformVectorAsPoint(offsetBeforeTransform, matrix);
-        const overlayInfo = this.overlayInfo(matrix);
-        context.lineWidth = 1;
-        context.strokeStyle = 'white';
-        context.fillStyle = 'white';
-        // Draw the curve itself first so everything else gets drawn on top of it
-        context.stroke(overlayInfo.curve);
-        context.fillStyle = 'white';
-        context.globalAlpha = 0.5;
-        context.beginPath();
-        context.stroke(overlayInfo.handleLines);
-        context.globalAlpha = 1;
-        context.lineWidth = 2;
-        // Draw start and end points
-        for (const point of [overlayInfo.startPoint, overlayInfo.endPoint]) {
-            moveTo(context, point);
-            context.beginPath();
-            arc(context, point, 4);
-            context.closePath();
-            context.stroke();
-            context.fill();
-        }
-        // Draw the control points
-        context.fillStyle = 'black';
-        for (const point of overlayInfo.controlPoints) {
-            moveTo(context, point);
-            context.beginPath();
-            arc(context, point, 4);
-            context.closePath();
-            context.fill();
-            context.stroke();
-        }
-        // Draw the offset marker
-        context.lineWidth = 1;
-        context.beginPath();
-        drawPivot(context, offset);
-        context.stroke();
-        // Draw the bounding box
-        context.beginPath();
-        drawLine(context, box);
-        context.closePath();
-        context.stroke();
-    }
-}
-__decorate([
-    computed()
-], Bezier.prototype, "childrenBBox", null);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmV6aWVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL0Jlemllci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7QUFDQSxPQUFPLEVBQUMsSUFBSSxFQUFFLHNCQUFzQixFQUFDLE1BQU0sYUFBYSxDQUFDO0FBR3pELE9BQU8sRUFBQyxRQUFRLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFFdkMsT0FBTyxFQUFDLEdBQUcsRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBQyxNQUFNLFVBQVUsQ0FBQztBQUMxRCxPQUFPLEVBQUMsS0FBSyxFQUFDLE1BQU0sU0FBUyxDQUFDO0FBVTlCLE1BQU0sT0FBZ0IsTUFBTyxTQUFRLEtBQUs7SUFDeEIsT0FBTztRQUNyQixNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDL0IsT0FBTztZQUNMLFFBQVEsRUFBRSxDQUFDLE9BQU8sQ0FBQztZQUNuQixTQUFTLEVBQUUsT0FBTyxDQUFDLFNBQVM7WUFDNUIsTUFBTSxFQUFFLENBQUM7U0FDVixDQUFDO0lBQ0osQ0FBQztJQU9TLFlBQVk7UUFDcEIsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDLEdBQUcsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ25ELENBQUM7SUFFa0IsV0FBVztRQUM1QixPQUFPLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxPQUFPLEVBQUUsQ0FBQyxJQUFJLENBQUM7SUFDdkMsQ0FBQztJQUVrQixvQkFBb0IsQ0FBQyxHQUFTO1FBQy9DLEdBQUcsQ0FBQyxRQUFRLEdBQUcsR0FBRyxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDLE9BQU8sRUFBRSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ2pFLE9BQU8sR0FBRyxDQUFDO0lBQ2IsQ0FBQztJQUVlLFdBQVcsQ0FDekIsT0FBaUMs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

package/lib/components/Circle.d.ts

@@ -1,193 +0,0 @@
-import type { SerializedVector2, SignalValue, SimpleSignal } from '@twick/core';
-import { BBox } from '@twick/core';
-import type { CurveProfile } from '../curves';
-import type { DesiredLength } from '../partials';
-import type { CurveProps } from './Curve';
-import { Curve } from './Curve';
-export interface CircleProps extends CurveProps {
-    /**
-     * {@inheritDoc Circle.startAngle}
-     */
-    startAngle?: SignalValue<number>;
-    /**
-     * {@inheritDoc Circle.endAngle}
-     */
-    endAngle?: SignalValue<number>;
-    /**
-     * {@inheritDoc Circle.counterclockwise}
-     */
-    counterclockwise?: SignalValue<boolean>;
-    /**
-     * {@inheritDoc Circle.closed}
-     */
-    closed?: SignalValue<boolean>;
-}
-/**
- * A node for drawing circular shapes.
- *
- * @remarks
- * This node can be used to render shapes such as: circle, ellipse, arc, and
- * sector (pie chart).
- *
- * @preview
- * ```tsx editor
- * // snippet Simple circle
- * import {makeScene2D, Circle} from '@twick/2d';
- *
- * export default makeScene2D(function* (view) {
- *   view.add(
- *     <Circle
- *       size={160}
- *       fill={'lightseagreen'}
- *     />
- *    );
- * });
- *
- * // snippet Ellipse
- * import {makeScene2D, Circle} from '@twick/2d';
- *
- * export default makeScene2D(function* (view) {
- *   view.add(
- *     <Circle
- *       width={160}
- *       height={80}
- *       fill={'lightseagreen'}
- *     />
- *   );
- * });
- *
- * // snippet Sector (pie chart):
- * import {makeScene2D, Circle} from '@twick/2d';
- * import {createRef} from '@twick/core';
- *
- * export default makeScene2D(function* (view) {
- *   const ref = createRef<Circle>();
- *   view.add(
- *     <Circle
- *       ref={ref}
- *       size={160}
- *       fill={'lightseagreen'}
- *       startAngle={30}
- *       endAngle={270}
- *       closed={true}
- *     />
- *   );
- *
- *   yield* ref().startAngle(270, 2).to(30, 2);
- * });
- *
- * // snippet Arc:
- * import {makeScene2D, Circle} from '@twick/2d';
- * import {createRef} from '@twick/core';
- *
- * export default makeScene2D(function* (view) {
- *   const ref = createRef<Circle>();
- *   view.add(
- *     <Circle
- *       ref={ref}
- *       size={160}
- *       stroke={'lightseagreen'}
- *       lineWidth={8}
- *       startAngle={-90}
- *       endAngle={90}
- *     />
- *   );
- *
- *   yield* ref().startAngle(-270, 2).to(-90, 2);
- * });
- *
- * // snippet Curve properties:
- * import {makeScene2D, Circle} from '@twick/2d';
- * import {all, createRef, easeInCubic, easeOutCubic} from '@twick/core';
- *
- * export default makeScene2D(function* (view) {
- *   const ref = createRef<Circle>();
- *   view.add(
- *     <Circle
- *       ref={ref}
- *       size={160}
- *       stroke={'lightseagreen'}
- *       lineWidth={8}
- *       endAngle={270}
- *       endArrow
- *     />,
- *   );
- *
- *   yield* all(ref().start(1, 1), ref().rotation(180, 1, easeInCubic));
- *   ref().start(0).end(0);
- *   yield* all(ref().end(1, 1), ref().rotation(360, 1, easeOutCubic));
- * });
- * ```
- */
-export declare class Circle extends Curve {
-    /**
-     * The starting angle in degrees for the circle sector.
-     *
-     * @remarks
-     * This property can be used together with {@link startAngle} to turn this
-     * circle into a sector (when using fill) or an arc (when using stroke).
-     *
-     * @defaultValue 0
-     */
-    readonly startAngle: SimpleSignal<number, this>;
-    /**
-     * The ending angle in degrees for the circle sector.
-     *
-     * @remarks
-     * This property can be used together with {@link endAngle} to turn this
-     * circle into a sector (when using fill) or an arc (when using stroke).
-     *
-     * @defaultValue 360
-     */
-    readonly endAngle: SimpleSignal<number, this>;
-    /**
-     * Whether the circle sector should be drawn counterclockwise.
-     *
-     * @remarks
-     * By default, the circle begins at {@link startAngle} and is drawn clockwise
-     * until reaching {@link endAngle}. Setting this property to true will reverse
-     * this direction.
-     */
-    readonly counterclockwise: SimpleSignal<boolean, this>;
-    /**
-     * Whether the path of this circle should be closed.
-     *
-     * @remarks
-     * When set to true, the path of this circle will start and end at the center.
-     * This can be used to fine-tune how sectors are rendered.
-     *
-     * @example
-     * A closed circle will look like a pie chart:
-     * ```tsx
-     * <Circle
-     *   size={300}
-     *   fill={'lightseagreen'}
-     *   endAngle={230}
-     *   closed={true}
-     * />
-     * ```
-     * An open one will look like an arc:
-     * ```tsx
-     * <Circle
-     *   size={300}
-     *   stroke={'lightseagreen'}
-     *   lineWidth={8}
-     *   endAngle={230}
-     *   closed={false}
-     * />
-     * ```
-     *
-     * @defaultValue false
-     */
-    readonly closed: SimpleSignal<boolean, this>;
-    constructor(props: CircleProps);
-    profile(): CurveProfile;
-    protected desiredSize(): SerializedVector2<DesiredLength>;
-    protected offsetComputedLayout(box: BBox): BBox;
-    protected childrenBBox(): BBox;
-    protected getPath(): Path2D;
-    protected getRipplePath(): Path2D;
-    protected getCacheBBox(): BBox;
-    protected createPath(expand?: number): Path2D;
-}
-//# sourceMappingURL=Circle.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../../src/lib/components/Circle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,iBAAiB,EAAE,WAAW,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AAC9E,OAAO,EAAC,IAAI,EAAU,MAAM,aAAa,CAAC;AAC1C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,WAAW,CAAC;AAG5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAE9B,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B;;OAEG;IACH,gBAAgB,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACxC;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgGG;AACH,qBACa,MAAO,SAAQ,KAAK;IAC/B;;;;;;;;OAQG;IACH,SAEwB,UAAU,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAE/D;;;;;;;;OAQG;IACH,SAEwB,QAAQ,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAE7D;;;;;;;OAOG;IACH,SAEwB,gBAAgB,EAAE,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAEtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG;IACH,SAAwB,MAAM,EAAE,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAEzC,KAAK,EAAE,WAAW;IAK9B,OAAO,IAAI,YAAY;cAUX,WAAW,IAAI,iBAAiB,CAAC,aAAa,CAAC;cAO/C,oBAAoB,CAAC,GAAG,EAAE,IAAI,GAAG,IAAI;cAIrC,YAAY,IAAI,IAAI;cAIpB,OAAO,IAAI,MAAM;cAQjB,aAAa,IAAI,MAAM;cAIvB,YAAY,IAAI,IAAI;IAIvC,SAAS,CAAC,UAAU,CAAC,MAAM,SAAI;CAsBhC"}

package/lib/components/Circle.js

@@ -1,178 +0,0 @@
-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, DEG2RAD } from '@twick/core';
-import { getCircleProfile } from '../curves';
-import { computed, initial, nodeName, signal } from '../decorators';
-import { Curve } from './Curve';
-/**
- * A node for drawing circular shapes.
- *
- * @remarks
- * This node can be used to render shapes such as: circle, ellipse, arc, and
- * sector (pie chart).
- *
- * @preview
- * ```tsx editor
- * // snippet Simple circle
- * import {makeScene2D, Circle} from '@twick/2d';
- *
- * export default makeScene2D(function* (view) {
- *   view.add(
- *     <Circle
- *       size={160}
- *       fill={'lightseagreen'}
- *     />
- *    );
- * });
- *
- * // snippet Ellipse
- * import {makeScene2D, Circle} from '@twick/2d';
- *
- * export default makeScene2D(function* (view) {
- *   view.add(
- *     <Circle
- *       width={160}
- *       height={80}
- *       fill={'lightseagreen'}
- *     />
- *   );
- * });
- *
- * // snippet Sector (pie chart):
- * import {makeScene2D, Circle} from '@twick/2d';
- * import {createRef} from '@twick/core';
- *
- * export default makeScene2D(function* (view) {
- *   const ref = createRef<Circle>();
- *   view.add(
- *     <Circle
- *       ref={ref}
- *       size={160}
- *       fill={'lightseagreen'}
- *       startAngle={30}
- *       endAngle={270}
- *       closed={true}
- *     />
- *   );
- *
- *   yield* ref().startAngle(270, 2).to(30, 2);
- * });
- *
- * // snippet Arc:
- * import {makeScene2D, Circle} from '@twick/2d';
- * import {createRef} from '@twick/core';
- *
- * export default makeScene2D(function* (view) {
- *   const ref = createRef<Circle>();
- *   view.add(
- *     <Circle
- *       ref={ref}
- *       size={160}
- *       stroke={'lightseagreen'}
- *       lineWidth={8}
- *       startAngle={-90}
- *       endAngle={90}
- *     />
- *   );
- *
- *   yield* ref().startAngle(-270, 2).to(-90, 2);
- * });
- *
- * // snippet Curve properties:
- * import {makeScene2D, Circle} from '@twick/2d';
- * import {all, createRef, easeInCubic, easeOutCubic} from '@twick/core';
- *
- * export default makeScene2D(function* (view) {
- *   const ref = createRef<Circle>();
- *   view.add(
- *     <Circle
- *       ref={ref}
- *       size={160}
- *       stroke={'lightseagreen'}
- *       lineWidth={8}
- *       endAngle={270}
- *       endArrow
- *     />,
- *   );
- *
- *   yield* all(ref().start(1, 1), ref().rotation(180, 1, easeInCubic));
- *   ref().start(0).end(0);
- *   yield* all(ref().end(1, 1), ref().rotation(360, 1, easeOutCubic));
- * });
- * ```
- */
-let Circle = class Circle extends Curve {
-    constructor(props) {
-        super(props);
-    }
-    profile() {
-        return getCircleProfile(this.size().scale(0.5), this.startAngle() * DEG2RAD, this.endAngle() * DEG2RAD, this.closed(), this.counterclockwise());
-    }
-    desiredSize() {
-        return {
-            x: this.width.context.getter(),
-            y: this.height.context.getter(),
-        };
-    }
-    offsetComputedLayout(box) {
-        return box;
-    }
-    childrenBBox() {
-        return BBox.fromSizeCentered(this.computedSize());
-    }
-    getPath() {
-        if (this.requiresProfile()) {
-            return this.curveDrawingInfo().path;
-        }
-        return this.createPath();
-    }
-    getRipplePath() {
-        return this.createPath(this.rippleSize());
-    }
-    getCacheBBox() {
-        return super.getCacheBBox().expand(this.rippleSize());
-    }
-    createPath(expand = 0) {
-        const path = new Path2D();
-        const start = this.startAngle() * DEG2RAD;
-        let end = this.endAngle() * DEG2RAD;
-        const size = this.size().scale(0.5).add(expand);
-        const closed = this.closed();
-        if (end > start + Math.PI * 2) {
-            const loops = Math.floor((end - start) / (Math.PI * 2));
-            end -= Math.PI * 2 * loops;
-        }
-        if (closed) {
-            path.moveTo(0, 0);
-        }
-        path.ellipse(0, 0, size.x, size.y, 0, start, end, this.counterclockwise());
-        if (closed) {
-            path.closePath();
-        }
-        return path;
-    }
-};
-__decorate([
-    initial(0),
-    signal()
-], Circle.prototype, "startAngle", void 0);
-__decorate([
-    initial(360),
-    signal()
-], Circle.prototype, "endAngle", void 0);
-__decorate([
-    initial(false),
-    signal()
-], Circle.prototype, "counterclockwise", void 0);
-__decorate([
-    computed()
-], Circle.prototype, "profile", null);
-Circle = __decorate([
-    nodeName('Circle')
-], Circle);
-export { Circle };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2lyY2xlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL0NpcmNsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7QUFDQSxPQUFPLEVBQUMsSUFBSSxFQUFFLE9BQU8sRUFBQyxNQUFNLGFBQWEsQ0FBQztBQUUxQyxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSxXQUFXLENBQUM7QUFDM0MsT0FBTyxFQUFDLFFBQVEsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUdsRSxPQUFPLEVBQUMsS0FBSyxFQUFDLE1BQU0sU0FBUyxDQUFDO0FBcUI5Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBZ0dHO0FBRUksSUFBTSxNQUFNLEdBQVosTUFBTSxNQUFPLFNBQVEsS0FBSztJQXVFL0IsWUFBbUIsS0FBa0I7UUFDbkMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2YsQ0FBQztJQUdNLE9BQU87UUFDWixPQUFPLGdCQUFnQixDQUNyQixJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxFQUN0QixJQUFJLENBQUMsVUFBVSxFQUFFLEdBQUcsT0FBTyxFQUMzQixJQUFJLENBQUMsUUFBUSxFQUFFLEdBQUcsT0FBTyxFQUN6QixJQUFJLENBQUMsTUFBTSxFQUFFLEVBQ2IsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQ3hCLENBQUM7SUFDSixDQUFDO0lBRWtCLFdBQVc7UUFDNUIsT0FBTztZQUNMLENBQUMsRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUU7WUFDOUIsQ0FBQyxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRTtTQUNo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

package/lib/components/Code.d.ts

@@ -1,231 +0,0 @@
-import type { SerializedVector2, Signal, SignalValue, SimpleSignal, ThreadGenerator, TimingFunction, Vector2 } from '@twick/core';
-import { BBox } from '@twick/core';
-import type { CodeFragmentDrawingInfo, CodeHighlighter, CodePoint, CodeRange, CodeSelection, CodeSignal, PossibleCodeScope, PossibleCodeSelection } from '../code';
-import type { DesiredLength } from '../partials';
-import type { ShapeProps } from './Shape';
-import { Shape } from './Shape';
-export interface DrawTokenHook {
-    (ctx: CanvasRenderingContext2D, text: string, position: Vector2, color: string, selection: number): void;
-}
-/**
- * Describes custom drawing logic used by the Code node.
- */
-export interface DrawHooks {
-    /**
-     * Custom drawing logic for individual code tokens.
-     *
-     * @example
-     * ```ts
-     * token(ctx, text, position, color, selection) {
-     *   const blur = map(3, 0, selection);
-     *   const alpha = map(0.5, 1, selection);
-     *   ctx.globalAlpha *= alpha;
-     *   ctx.filter = `blur(${blur}px)`;
-     *   ctx.fillStyle = color;
-     *   ctx.fillText(text, position.x, position.y);
-     * }
-     * ```
-     */
-    token: DrawTokenHook;
-}
-export interface CodeProps extends ShapeProps {
-    /**
-     * {@inheritDoc Code.highlighter}
-     */
-    highlighter?: SignalValue<CodeHighlighter | null>;
-    /**
-     * {@inheritDoc Code.code}
-     */
-    code?: SignalValue<PossibleCodeScope>;
-    /**
-     * {@inheritDoc Code.selection}
-     */
-    selection?: SignalValue<PossibleCodeSelection>;
-    /**
-     * {@inheritDoc Code.drawHooks}
-     */
-    drawHooks?: SignalValue<DrawHooks>;
-}
-/**
- * A node for displaying and animating code.
- *
- * @experimental
- *
- * @preview
- * ```tsx editor
- * import {parser} from '@lezer/javascript';
- * import {Code, LezerHighlighter, makeScene2D} from '@twick/2d';
- * import {createRef} from '@twick/core';
- *
- * export default makeScene2D(function* (view) {
- *   LezerHighlighter.registerParser(parser);
- *   const code = createRef<Code>();
- *
- *   view.add(
- *     <Code
- *       ref={code}
- *       offset={-1}
- *       position={view.size().scale(-0.5).add(60)}
- *       fontFamily={'JetBrains Mono, monospace'}
- *       fontSize={36}
- *       code={`\
- * function hello() {
- *   console.log('Hello');
- * }`}
- *     />,
- *   );
- *
- *   yield* code()
- *     .code(
- *       `\
- * function hello() {
- *   console.warn('Hello World');
- * }`,
- *       1,
- *     )
- *     .wait(0.5)
- *     .back(1)
- *     .wait(0.5);
- * });
- * ```
- */
-export declare class Code extends Shape {
-    /**
-     * Create a standalone code signal.
-     *
-     * @param initial - The initial code.
-     * @param highlighter - Custom highlighter to use.
-     */
-    static createSignal(initial: PossibleCodeScope, highlighter?: SignalValue<CodeHighlighter>): CodeSignal<void>;
-    static defaultHighlighter: CodeHighlighter | null;
-    /**
-     * The code highlighter to use for this code node.
-     *
-     * @remarks
-     * Defaults to a shared {@link code.LezerHighlighter}.
-     */
-    readonly highlighter: SimpleSignal<CodeHighlighter | null, this>;
-    /**
-     * The code to display.
-     */
-    readonly code: CodeSignal<this>;
-    /**
-     * Custom drawing logic for the code.
-     *
-     * @remarks
-     * Check out {@link DrawHooks} for available render hooks.
-     *
-     * @example
-     * Make the unselected code blurry and transparent:
-     * ```tsx
-     * <Code
-     *   drawHooks={{
-     *     token(ctx, text, position, color, selection) {
-     *       const blur = map(3, 0, selection);
-     *       const alpha = map(0.5, 1, selection);
-     *       ctx.globalAlpha *= alpha;
-     *       ctx.filter = `blur(${blur}px)`;
-     *       ctx.fillStyle = color;
-     *       ctx.fillText(text, position.x, position.y);
-     *     },
-     *   }}
-     *   // ...
-     * />
-     * ```
-     */
-    readonly drawHooks: SimpleSignal<DrawHooks, this>;
-    protected setDrawHooks(value: DrawHooks): void;
-    /**
-     * The currently selected code range.
-     *
-     * @remarks
-     * Either a single {@link code.CodeRange} or an array of them
-     * describing which parts of the code should be visually emphasized.
-     *
-     * You can use {@link code.word} and
-     * {@link code.lines} to quickly create ranges.
-     *
-     * @example
-     * The following will select the word "console" in the code.
-     * Both lines and columns are 0-based. So it will select a 7-character-long
-     * (`7`) word in the second line (`1`) starting at the third character (`2`).
-     * ```tsx
-     * <Code
-     *   selection={word(1, 2, 7)}
-     *   code={`\
-     * function hello() => {
-     *   console.log('Hello');
-     * }`}
-     *   // ...
-     * />
-     * ```
-     */
-    readonly selection: Signal<PossibleCodeSelection, CodeSelection, this>;
-    oldSelection: CodeSelection | null;
-    selectionProgress: SimpleSignal<number | null, void>;
-    protected tweenSelection(value: CodeRange[], duration: number, timingFunction: TimingFunction): ThreadGenerator;
-    /**
-     * Get the currently displayed code as a string.
-     */
-    parsed(): string;
-    highlighterCache(): {
-        before: unknown;
-        after: unknown;
-    } | null;
-    private cursorCache;
-    private get cursor();
-    constructor(props: CodeProps);
-    /**
-     * Create a child code signal.
-     *
-     * @param initial - The initial code.
-     */
-    createSignal(initial: PossibleCodeScope): CodeSignal<this>;
-    /**
-     * Find all code ranges that match the given pattern.
-     *
-     * @param pattern - Either a string or a regular expression to match.
-     */
-    findAllRanges(pattern: string | RegExp): CodeRange[];
-    /**
-     * Find the first code range that matches the given pattern.
-     *
-     * @param pattern - Either a string or a regular expression to match.
-     */
-    findFirstRange(pattern: string | RegExp): CodeRange;
-    /**
-     * Find the last code range that matches the given pattern.
-     *
-     * @param pattern - Either a string or a regular expression to match.
-     */
-    findLastRange(pattern: string | RegExp): CodeRange;
-    /**
-     * Return the bounding box of the given point (character) in the code.
-     *
-     * @remarks
-     * The returned bound box is in local space of the `Code` node.
-     *
-     * @param point - The point to get the bounding box for.
-     */
-    getPointBbox(point: CodePoint): BBox;
-    /**
-     * Return bounding boxes of all characters in the selection.
-     *
-     * @remarks
-     * The returned bound boxes are in local space of the `Code` node.
-     * Each line of code has a separate bounding box.
-     *
-     * @param selection - The selection to get the bounding boxes for.
-     */
-    getSelectionBbox(selection: PossibleCodeSelection): BBox[];
-    protected drawingInfo(): {
-        fragments: CodeFragmentDrawingInfo[];
-        verticalOffset: number;
-        fontHeight: number;
-    };
-    protected desiredSize(): SerializedVector2<DesiredLength>;
-    protected draw(context: CanvasRenderingContext2D): Promise<void>;
-    protected applyText(context: CanvasRenderingContext2D): void;
-    protected collectAsyncResources(): void;
-}
-//# sourceMappingURL=Code.d.ts.map