@motion-script/core 0.1.0

package/dist/nodes/geometry/rect-node.js

@@ -0,0 +1,275 @@
+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 { lerpNumber } from "../../tween/lerp";
+import { resolveSize } from "../../layout/size-resolver";
+import { applyPadding, expandByPadding } from "../../layout/padding";
+import { lerpSizeInput } from "../../layout/tweens";
+import { lerpVector2 } from "../../attributes/layout/vector2";
+import { layoutFlex, measureFlex } from "../../layout/flex";
+import { resolveBorderRadius, lerpBorderRadius } from "../../attributes/shape/corners/border-radius";
+import { ShapeNode } from "./shape-node";
+import { Node } from "../base/node";
+import { property } from "../../attributes/properties/decorator";
+/**
+ * The Rectangle is the only node that performs flex / stack layout on its
+ * children. It measures and positions children according to `group`
+ * (row | column | stack), `gap`, `alignment`, and `padding`, then draws
+ * itself as a rounded rect behind them.
+ */
+export class Rect extends ShapeNode {
+    _cachedMeasure = null;
+    _cachedMeasureFrom = null;
+    _groupBlend = null;
+    constructor(props) {
+        super(props);
+        // group has a closure-based tween that captures _groupBlend,
+        // so it can't be expressed as a static @property decorator.
+        this.applyProp("group", props.group ?? "row", {
+            layout: true,
+            tween: (from, to, t) => {
+                if (from === to)
+                    return to;
+                if (t >= 1) {
+                    this._groupBlend = null;
+                    return to;
+                }
+                if (!this._groupBlend ||
+                    this._groupBlend.from !== from ||
+                    this._groupBlend.to !== to) {
+                    this._groupBlend = { from, to, t };
+                }
+                else {
+                    this._groupBlend.t = t;
+                }
+                return from;
+            },
+        });
+        // Override width/height default based on whether children are present.
+        const hasChildren = Array.isArray(props.children) ? props.children.length > 0 : !!props.children;
+        const defaultSize = hasChildren ? 'hug' : 'fill';
+        if (props.width === undefined)
+            this.applyProp("width", defaultSize, { tween: lerpSizeInput });
+        if (props.height === undefined)
+            this.applyProp("height", defaultSize, { tween: lerpSizeInput });
+    }
+    // ---- Drawing ----------------------------------------------------------
+    renderSelf(draw) {
+        draw.rect({
+            width: this.layoutRect.width,
+            height: this.layoutRect.height,
+            borderRadius: this.borderRadius,
+            start: this.start,
+            end: this.end,
+        }).shadow(this.shadow).fill(this.fill).stroke(this.stroke);
+    }
+    applyClip(ctx) {
+        ctx.beginClipRect({
+            width: this.layoutRect.width,
+            height: this.layoutRect.height,
+            borderRadius: this.borderRadius,
+        });
+    }
+    silhouette() {
+        return {
+            kind: "rect",
+            state: {
+                width: this.layoutRect.width,
+                height: this.layoutRect.height,
+                borderRadius: this.borderRadius,
+            },
+        };
+    }
+    // ---- Padding ----------------------------------------------------------
+    // Children must sit inside the stroke; the stroke is drawn at the layout-rect
+    // edge and would otherwise visually cover them.
+    effectivePadding() {
+        let extra = 0;
+        //print when this.stroke is not iterable
+        if (!this.stroke || !(Symbol.iterator in Object(this.stroke))) {
+            console.warn("Rect stroke is not iterable:", this.stroke, "on node:", this.constructor.name, this.id, "signals:", JSON.stringify([...(this.__signals?.keys() ?? [])]));
+            return this.padding;
+        }
+        for (const s of this.stroke) {
+            if (s.weight > extra)
+                extra = s.weight;
+        }
+        if (extra === 0)
+            return this.padding;
+        const p = this.padding;
+        return {
+            left: p.left + extra,
+            right: p.right + extra,
+            top: p.top + extra,
+            bottom: p.bottom + extra,
+        };
+    }
+    // ---- Measure ----------------------------------------------------------
+    measure(constraints, scope) {
+        const maxWidth = constraints.maxWidth ?? 0;
+        const maxHeight = constraints.maxHeight ?? 0;
+        const widthIsHug = this.width === "hug";
+        const heightIsHug = this.height === "hug";
+        const outerForChildrenW = widthIsHug ? maxWidth : resolveSize(this.width, maxWidth, 0);
+        const outerForChildrenH = heightIsHug ? maxHeight : resolveSize(this.height, maxHeight, 0);
+        const padding = this.effectivePadding();
+        const inner = applyPadding(outerForChildrenW, outerForChildrenH, padding);
+        let hugInnerW;
+        let hugInnerH;
+        if (this._groupBlend) {
+            const fromM = this.computeMeasure(this._groupBlend.from, inner.width, inner.height, scope);
+            const toM = this.computeMeasure(this._groupBlend.to, inner.width, inner.height, scope);
+            this._cachedMeasureFrom = fromM;
+            this._cachedMeasure = toM;
+            const t = this._groupBlend.t;
+            hugInnerW = lerpNumber(fromM.hugWidth, toM.hugWidth, t);
+            hugInnerH = lerpNumber(fromM.hugHeight, toM.hugHeight, t);
+        }
+        else {
+            const m = this.computeMeasure(this.group, inner.width, inner.height, scope);
+            this._cachedMeasure = m;
+            this._cachedMeasureFrom = null;
+            hugInnerW = m.hugWidth;
+            hugInnerH = m.hugHeight;
+        }
+        const hugOuter = expandByPadding(hugInnerW, hugInnerH, padding);
+        return {
+            width: widthIsHug ? resolveSize(this.width, maxWidth, hugOuter.width) : outerForChildrenW,
+            height: heightIsHug ? resolveSize(this.height, maxHeight, hugOuter.height) : outerForChildrenH,
+        };
+    }
+    layout(rect, scope) {
+        const prev = this.layoutRect;
+        const rectChanged = prev.width !== rect.width || prev.height !== rect.height;
+        const dirty = this._layoutDirty || rectChanged;
+        super.layout(rect, scope);
+        if (!dirty)
+            return;
+        const padding = this.effectivePadding();
+        const inner = applyPadding(rect.width, rect.height, padding);
+        if (this._groupBlend && this._cachedMeasure && this._cachedMeasureFrom) {
+            const blend = this._groupBlend;
+            const fromLayouts = this.computeChildLayouts(blend.from, rect, this._cachedMeasureFrom, inner.width, inner.height, padding);
+            const toLayouts = this.computeChildLayouts(blend.to, rect, this._cachedMeasure, inner.width, inner.height, padding);
+            const t = blend.t;
+            const children = this._cachedMeasure.children;
+            for (let i = 0; i < children.length; i++) {
+                const f = fromLayouts[i];
+                const to = toLayouts[i];
+                children[i].layout({
+                    x: lerpNumber(f.x, to.x, t),
+                    y: lerpNumber(f.y, to.y, t),
+                    width: lerpNumber(f.width, to.width, t),
+                    height: lerpNumber(f.height, to.height, t),
+                }, scope);
+            }
+            this._cachedMeasure = null;
+            this._cachedMeasureFrom = null;
+            return;
+        }
+        const measure = this._cachedMeasure ?? this.computeMeasure(this.group, inner.width, inner.height, scope);
+        this._cachedMeasure = null;
+        const layouts = this.computeChildLayouts(this.group, rect, measure, inner.width, inner.height, padding);
+        for (let i = 0; i < measure.children.length; i++) {
+            measure.children[i].layout(layouts[i], scope);
+        }
+    }
+    computeMeasure(mode, innerWidth, innerHeight, scope) {
+        if (mode === "stack") {
+            return this.computeStackMeasure(innerWidth, innerHeight, scope);
+        }
+        return this.computeFlexMeasure(mode, innerWidth, innerHeight, scope);
+    }
+    computeChildLayouts(mode, rect, measure, innerWidth, innerHeight, padding) {
+        if (measure.kind === "stack") {
+            return this.computeStackLayouts(rect, measure, padding);
+        }
+        return layoutFlex({
+            direction: mode,
+            entries: measure.entries,
+            rect,
+            innerWidth,
+            innerHeight,
+            gap: this.gap,
+            alignment: this.alignment,
+            padding,
+        });
+    }
+    computeFlexMeasure(direction, innerWidth, innerHeight, scope) {
+        const transformChildren = this.children.filter((c) => c instanceof Node);
+        const adapters = transformChildren.map((child) => ({
+            widthMode: child.width,
+            heightMode: child.height,
+            measure: (c) => child.measure(c, scope),
+        }));
+        const result = measureFlex(adapters, {
+            direction,
+            innerWidth,
+            innerHeight,
+            gap: this.gap,
+            parentWidthMode: this.width,
+            parentHeightMode: this.height,
+        });
+        return {
+            kind: "flex",
+            entries: result.entries,
+            children: transformChildren,
+            hugWidth: result.hugWidth,
+            hugHeight: result.hugHeight,
+        };
+    }
+    computeStackMeasure(innerWidth, innerHeight, scope) {
+        const transformChildren = this.children.filter((c) => c instanceof Node);
+        const constraints = { maxWidth: innerWidth, maxHeight: innerHeight };
+        let hugWidth = 0;
+        let hugHeight = 0;
+        const sizes = [];
+        for (const child of transformChildren) {
+            const size = child.measure(constraints, scope);
+            sizes.push(size);
+            const w = size.width ?? 0;
+            const h = size.height ?? 0;
+            if (w > hugWidth)
+                hugWidth = w;
+            if (h > hugHeight)
+                hugHeight = h;
+        }
+        return {
+            kind: "stack",
+            sizes,
+            children: transformChildren,
+            hugWidth,
+            hugHeight,
+        };
+    }
+    computeStackLayouts(rect, measure, pad) {
+        const innerW = Math.max(0, rect.width - pad.left - pad.right);
+        const innerH = Math.max(0, rect.height - pad.top - pad.bottom);
+        const offsetX = (pad.left - pad.right) / 2;
+        const offsetY = (pad.top - pad.bottom) / 2;
+        const result = [];
+        for (const size of measure.sizes) {
+            const w = size.width ?? 0;
+            const h = size.height ?? 0;
+            const slackX = Math.max(0, innerW - w);
+            const slackY = Math.max(0, innerH - h);
+            const localX = offsetX + (this.alignment.x * slackX) / 2;
+            const localY = offsetY - (this.alignment.y * slackY) / 2;
+            result.push({ x: localX, y: localY, width: w, height: h });
+        }
+        return result;
+    }
+}
+__decorate([
+    property({ default: 0, layout: true })
+], Rect.prototype, "gap", void 0);
+__decorate([
+    property({ default: { x: 0, y: 0 }, tween: lerpVector2, layout: true })
+], Rect.prototype, "alignment", void 0);
+__decorate([
+    property({ default: 0, mapper: (v) => resolveBorderRadius(v), tween: lerpBorderRadius })
+], Rect.prototype, "borderRadius", void 0);
+//# sourceMappingURL=rect-node.js.map

package/dist/nodes/geometry/rect-node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rect-node.js","sourceRoot":"","sources":["../../../src/nodes/geometry/rect-node.ts"],"names":[],"mappings":"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"}

package/dist/nodes/geometry/shape-node.d.ts

@@ -0,0 +1,66 @@
+import { StrokeResolved, type StrokeProp } from "../../attributes/shape/stroke/mapper";
+import { ShadowResolved, type ShadowProp } from "../../attributes/shape/shadow/resolver";
+import { FillResolved } from "../../attributes/shape/fill/union";
+import { ChainableFill } from "../../attributes/shape/fill/chain";
+import { ClipShape, RenderContext } from "../../render/render-context";
+import { AssetTracker } from "../../assets/tracker";
+import { Node, NodeConfig, NodeProps } from "../base/node";
+export interface ShapeProps extends NodeProps {
+    /**
+     * Fill layer(s). Each item can be:
+     * - A plain CSS color string → treated as a solid fill
+     * - A fill prop object (SolidFillProp, LinearGradientFillProp, …)
+     * - An already-resolved fill object
+     * - A {@link FillChain} from the `Fill` builder (e.g. `Fill.color('red')`)
+     */
+    fill?: ChainableFill;
+    /**
+     * Stroke layer(s). `fill` inside each stroke accepts the same loose
+     * values as the top-level fill prop.
+     */
+    stroke?: StrokeProp | StrokeProp[];
+    /**
+     * Shadow layer(s). `fill` inside each shadow accepts the same loose
+     * values as the top-level fill prop.
+     */
+    shadow?: ShadowProp | ShadowProp[];
+    start?: number;
+    end?: number;
+    /** When true, content drawn outside this shape's outline is clipped away. */
+    clip?: boolean;
+}
+export declare abstract class ShapeNode<P extends ShapeProps> extends Node<P> {
+    readonly fill: FillResolved[];
+    readonly stroke: StrokeResolved[];
+    readonly shadow: ShadowResolved[];
+    readonly start: number;
+    readonly end: number;
+    readonly clip: boolean;
+    private _hasDynamicFill;
+    constructor(props: NodeConfig<any, P>);
+    tick(time: number): void;
+    prepare(tracker: AssetTracker): void;
+    protected abstract renderSelf(ctx: RenderContext): void;
+    /**
+     * Push a clip region matching this shape's outline. Subclasses with a
+     * concrete silhouette (rect, ellipse, …) override this; the default is a
+     * no-op so shapes without a clip outline simply render unclipped.
+     */
+    protected applyClip(_ctx: RenderContext): void;
+    /**
+     * This shape's outline, used to clip the background blur to its silhouette.
+     * Concrete shapes with a fillable outline override this; the default `null`
+     * means the shape gets no background blur.
+     */
+    protected silhouette(): ClipShape | null;
+    /**
+     * Apply backdrop effects (background blur, bulge/pinch) beneath this shape,
+     * clipped to its silhouette, before the shape's own fill/stroke are drawn —
+     * so the content underneath is blurred/warped while the shape's own edges
+     * stay sharp. Each effect opens a backdrop layer within the silhouette clip
+     * and composites it straight back.
+     */
+    private applyBackdropEffects;
+    onRender(ctx: RenderContext): void;
+}
+//# sourceMappingURL=shape-node.d.ts.map

package/dist/nodes/geometry/shape-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape-node.d.ts","sourceRoot":"","sources":["../../../src/nodes/geometry/shape-node.ts"],"names":[],"mappings":"AAIA,OAAO,EAAsB,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,kCAAkC,CAAC;AACvG,OAAO,EAAsB,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,oCAAoC,CAAC;AACzG,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAM3D,MAAM,WAAW,UAAW,SAAQ,SAAS;IACzC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6EAA6E;IAC7E,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAGD,8BAAsB,SAAS,CAAC,CAAC,SAAS,UAAU,CAAE,SAAQ,IAAI,CAAC,CAAC,CAAC;IAEjE,SACiB,IAAI,EAAE,YAAY,EAAE,CAAC;IAGtC,SACiB,MAAM,EAAE,cAAc,EAAE,CAAC;IAE1C,SACiB,MAAM,EAAE,cAAc,EAAE,CAAC;IAE1C,SACiB,KAAK,EAAE,MAAM,CAAC;IAE/B,SACiB,GAAG,EAAE,MAAM,CAAC;IAE7B,SACiB,IAAI,EAAE,OAAO,CAAC;IAK/B,OAAO,CAAC,eAAe,CAAS;gBAEpB,KAAK,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC;IAY9B,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAK/B,OAAO,CAAC,OAAO,EAAE,YAAY,GAAG,IAAI;IASpC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI;IAEvD;;;;OAIG;IACH,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI;IAE9C;;;;OAIG;IACH,SAAS,CAAC,UAAU,IAAI,SAAS,GAAG,IAAI;IAExC;;;;;;OAMG;IACH,OAAO,CAAC,oBAAoB;IAmC5B,QAAQ,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI;CAQrC"}

package/dist/nodes/geometry/shape-node.js

@@ -0,0 +1,127 @@
+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 { resolveFillArray, lerpFillArray, updateFill, prepareFill, hasDynamicFill } from "../../attributes/shape/fill/registry";
+import { lerpStrokeArray } from "../../attributes/shape/stroke/lerp";
+import { lerpShadowArray } from "../../attributes/shape/shadow/lerp";
+import { resolveStrokeArray } from "../../attributes/shape/stroke/mapper";
+import { resolveShadowArray } from "../../attributes/shape/shadow/resolver";
+import { property } from "../../attributes/properties/decorator";
+import { Node } from "../base/node";
+export class ShapeNode extends Node {
+    // Cached: does any current fill need a per-frame update() (e.g. video)?
+    // Static fills (solid, gradients, noise, image) have an identity update, so
+    // there's nothing to recompute each frame and tick() can skip entirely.
+    _hasDynamicFill = false;
+    constructor(props) {
+        super(props);
+        const fillCell = this.__signals?.get("fill");
+        if (fillCell) {
+            const refresh = () => {
+                this._hasDynamicFill = hasDynamicFill(fillCell.get());
+            };
+            refresh();
+            fillCell.subscribe(refresh);
+        }
+    }
+    tick(time) {
+        if (!this._hasDynamicFill)
+            return;
+        this.set({ fill: this.fill.map(fill => updateFill(fill, time, this.assets)) });
+    }
+    prepare(tracker) {
+        super.prepare(tracker);
+        [
+            ...this.fill,
+            ...this.stroke.map(s => s.fill),
+            ...this.shadow.map(s => s.fill),
+        ].forEach(fill => prepareFill(fill, tracker, this.layoutRect.width, this.layoutRect.height));
+    }
+    /**
+     * Push a clip region matching this shape's outline. Subclasses with a
+     * concrete silhouette (rect, ellipse, …) override this; the default is a
+     * no-op so shapes without a clip outline simply render unclipped.
+     */
+    applyClip(_ctx) { }
+    /**
+     * This shape's outline, used to clip the background blur to its silhouette.
+     * Concrete shapes with a fillable outline override this; the default `null`
+     * means the shape gets no background blur.
+     */
+    silhouette() { return null; }
+    /**
+     * Apply backdrop effects (background blur, bulge/pinch) beneath this shape,
+     * clipped to its silhouette, before the shape's own fill/stroke are drawn —
+     * so the content underneath is blurred/warped while the shape's own edges
+     * stay sharp. Each effect opens a backdrop layer within the silhouette clip
+     * and composites it straight back.
+     */
+    applyBackdropEffects(ctx) {
+        let blurRadius = 0;
+        const distortions = [];
+        const skslBackdrops = [];
+        for (const effect of this.effects) {
+            if (effect.type === "backgroundBlur")
+                blurRadius += effect.radius;
+            else if (effect.type === "bulgePinch" || effect.type === "zoom")
+                distortions.push(effect);
+            else if (effect.type === "sksl" && effect.mode === "backdrop")
+                skslBackdrops.push(effect);
+        }
+        if (blurRadius <= 0 && distortions.length === 0 && skslBackdrops.length === 0)
+            return;
+        const shape = this.silhouette();
+        if (!shape)
+            return;
+        const w = this.layoutRect?.width ?? 0;
+        const h = this.layoutRect?.height ?? 0;
+        // Clip to the silhouette first so each backdrop layer is confined to the
+        // shape; the renderer opens the backdrop filter within that clip.
+        ctx.beginClipShape(shape);
+        if (blurRadius > 0) {
+            ctx.beginBackgroundBlur(blurRadius);
+            ctx.endBackgroundBlur();
+        }
+        for (const effect of distortions) {
+            ctx.beginBackgroundDistortion(effect, w, h);
+            ctx.endBackgroundDistortion();
+        }
+        for (const effect of skslBackdrops) {
+            ctx.beginBackdropSkSL(effect, w, h);
+            ctx.endBackdropSkSL();
+        }
+        ctx.endClip();
+    }
+    onRender(ctx) {
+        this.applyTransform(ctx);
+        this.applyBackdropEffects(ctx);
+        this.renderSelf(ctx);
+        if (this.clip)
+            this.applyClip(ctx);
+        this.renderChildren(ctx);
+        if (this.clip)
+            ctx.endClip();
+    }
+}
+__decorate([
+    property({ default: [], mapper: resolveFillArray, tween: lerpFillArray })
+], ShapeNode.prototype, "fill", void 0);
+__decorate([
+    property({ default: [], mapper: resolveStrokeArray, tween: lerpStrokeArray, layout: true })
+], ShapeNode.prototype, "stroke", void 0);
+__decorate([
+    property({ default: [], mapper: resolveShadowArray, tween: lerpShadowArray })
+], ShapeNode.prototype, "shadow", void 0);
+__decorate([
+    property({ default: 0 })
+], ShapeNode.prototype, "start", void 0);
+__decorate([
+    property({ default: 1 })
+], ShapeNode.prototype, "end", void 0);
+__decorate([
+    property({ default: false })
+], ShapeNode.prototype, "clip", void 0);
+//# sourceMappingURL=shape-node.js.map

package/dist/nodes/geometry/shape-node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape-node.js","sourceRoot":"","sources":["../../../src/nodes/geometry/shape-node.ts"],"names":[],"mappings":"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"}

package/dist/nodes/index.d.ts

@@ -0,0 +1,17 @@
+export * from "./base/node";
+export * from "./base/scene-node";
+export * from "./base/camera-node";
+export * from "./base/boolean-node";
+export * from "./base/mask-node";
+export * from "./geometry/shape-node";
+export * from "./geometry/rect-node";
+export * from "./geometry/ellipse-node";
+export * from "./geometry/line-node";
+export * from "./geometry/path-node";
+export * from "./geometry/polygon-node";
+export * from "./geometry/polygram-node";
+export * from "./text/richtext-node";
+export * from "./text/text-node";
+export * from "./geometry/grid-node";
+export * from "./media/image-node";
+//# sourceMappingURL=index.d.ts.map

package/dist/nodes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/nodes/index.ts"],"names":[],"mappings":"AAGA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AAGjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AAEjC,cAAc,sBAAsB,CAAC;AAGrC,cAAc,oBAAoB,CAAC"}

package/dist/nodes/index.js

@@ -0,0 +1,20 @@
+// Base
+export * from "./base/node";
+export * from "./base/scene-node";
+export * from "./base/camera-node";
+export * from "./base/boolean-node";
+export * from "./base/mask-node";
+// Geometry
+export * from "./geometry/shape-node";
+export * from "./geometry/rect-node";
+export * from "./geometry/ellipse-node";
+export * from "./geometry/line-node";
+export * from "./geometry/path-node";
+export * from "./geometry/polygon-node";
+export * from "./geometry/polygram-node";
+export * from "./text/richtext-node";
+export * from "./text/text-node";
+export * from "./geometry/grid-node";
+// Media
+export * from "./media/image-node";
+//# sourceMappingURL=index.js.map

package/dist/nodes/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/nodes/index.ts"],"names":[],"mappings":"AAEA,OAAO;AACP,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AAEjC,WAAW;AACX,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AAEjC,cAAc,sBAAsB,CAAC;AAErC,QAAQ;AACR,cAAc,oBAAoB,CAAC"}

package/dist/nodes/media/image-node.d.ts

@@ -0,0 +1,28 @@
+import { RenderContext } from "../../render/render-context";
+import { ChainableMx } from "../../attributes/shape/filters/chain";
+import { MediaFilter } from "../../attributes/shape/filters/union";
+import { ImageFillMode, ImageTransform } from "../../attributes/shape/fill/implementations/image";
+import { BorderRadiusProps, BorderRadiusResolved } from "../../attributes/shape/corners/border-radius";
+import { ShapeNode, ShapeProps } from "../geometry/shape-node";
+import { NodeConfig } from "../base/node";
+import { AssetTracker } from "../../assets/tracker";
+export interface ImageProps extends ShapeProps {
+    borderRadius?: BorderRadiusProps;
+    src?: string;
+    fit?: ImageFillMode;
+    transform?: ImageTransform;
+    scaling?: number;
+    filters?: ChainableMx;
+}
+export declare class Image extends ShapeNode<ImageProps> {
+    readonly borderRadius: BorderRadiusResolved;
+    src?: string;
+    fit?: ImageFillMode;
+    transform?: ImageTransform;
+    scaling?: number;
+    filters?: MediaFilter[];
+    constructor(props: NodeConfig<Image, ImageProps>);
+    prepare(assetManager: AssetTracker): void;
+    protected renderSelf(draw: RenderContext): void;
+}
+//# sourceMappingURL=image-node.d.ts.map

package/dist/nodes/media/image-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-node.d.ts","sourceRoot":"","sources":["../../../src/nodes/media/image-node.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAuB,MAAM,kCAAkC,CAAC;AAEpF,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAC9F,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAyC,MAAM,0CAA0C,CAAC;AAC1I,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAE/D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,WAAW,UAAW,SAAQ,UAAU;IAC1C,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,WAAW,CAAC;CACzB;AAED,qBAAa,KAAM,SAAQ,SAAS,CAAC,UAAU,CAAC;IAG5C,SACiB,YAAY,EAAE,oBAAoB,CAAC;IAEhC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IAE7B,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;gBAEpB,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC;IAIhD,OAAO,CAAC,YAAY,EAAE,YAAY,GAAG,IAAI;IAIzC,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI;CAclD"}

package/dist/nodes/media/image-node.js

@@ -0,0 +1,53 @@
+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 { resolveChainFilters } from "../../attributes/shape/filters/chain";
+import { FilterRegistry } from "../../attributes/shape/filters/registry";
+import { resolveBorderRadius, lerpBorderRadius } from "../../attributes/shape/corners/border-radius";
+import { ShapeNode } from "../geometry/shape-node";
+import { property } from "../../attributes/properties/decorator";
+export class Image extends ShapeNode {
+    constructor(props) {
+        super(props);
+    }
+    prepare(assetManager) {
+        if (this.src)
+            assetManager.requestImage(this.src, this.layoutRect.width, this.layoutRect.height);
+    }
+    renderSelf(draw) {
+        draw.image({
+            width: this.layoutRect.width,
+            height: this.layoutRect.height,
+            borderRadius: this.borderRadius,
+            start: this.start,
+            end: this.end,
+            src: this.src,
+            mode: this.fit,
+            transform: this.transform,
+            scaling: this.scaling,
+            filters: this.filters,
+        }).shadow(this.shadow).fill(this.fill).stroke(this.stroke);
+    }
+}
+__decorate([
+    property({ default: 0, mapper: (v) => resolveBorderRadius(v), tween: lerpBorderRadius })
+], Image.prototype, "borderRadius", void 0);
+__decorate([
+    property()
+], Image.prototype, "src", void 0);
+__decorate([
+    property()
+], Image.prototype, "fit", void 0);
+__decorate([
+    property()
+], Image.prototype, "transform", void 0);
+__decorate([
+    property()
+], Image.prototype, "scaling", void 0);
+__decorate([
+    property({ default: [], tween: FilterRegistry.lerpArray, mapper: resolveChainFilters })
+], Image.prototype, "filters", void 0);
+//# sourceMappingURL=image-node.js.map

package/dist/nodes/media/image-node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-node.js","sourceRoot":"","sources":["../../../src/nodes/media/image-node.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAe,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAGrE,OAAO,EAA2C,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC1I,OAAO,EAAE,SAAS,EAAc,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAa7D,MAAM,OAAO,KAAM,SAAQ,SAAqB;IAa5C,YAAY,KAAoC;QAC5C,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,OAAO,CAAC,YAA0B;QAC9B,IAAI,IAAI,CAAC,GAAG;YAAE,YAAY,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;IACrG,CAAC;IAES,UAAU,CAAC,IAAmB;QACpC,IAAI,CAAC,KAAK,CAAC;YACP,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK;YAC5B,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM;YAC9B,YAAY,EAAE,IAAI,CAAC,YAAY;YAC/B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,IAAI,EAAE,IAAI,CAAC,GAAG;YACd,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;SACxB,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/D,CAAC;CACJ;AA/BoB;IADhB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,CAAoB,EAAE,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC;2CACxD;AAEhC;IAAnB,QAAQ,EAAE;kCAAsB;AACb;IAAnB,QAAQ,EAAE;kCAA6B;AACpB;IAAnB,QAAQ,EAAE;wCAAoC;AAC3B;IAAnB,QAAQ,EAAE;sCAA0B;AAE7B;IADP,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE,mBAAmB,EAAE,CAAC;sCACxD"}