@nmmty/lazycanvas 0.6.4 → 1.0.0-dev.10

package/dist/structures/components/TextLayer.js

@@ -3,19 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextLayer = void 0;
 const BaseLayer_1 = require("./BaseLayer");
 const types_1 = require("../../types");
-const LazyUtil_1 = require("../../utils/LazyUtil");
-const utils_1 = require("../../utils/utils");
+const utils_1 = require("../../utils");
 /**
- * Class representing a Text Layer, extending the BaseLayer class.
+ * Class representing a Text layer, extending the BaseLayer class.
  */
 class TextLayer extends BaseLayer_1.BaseLayer {
-    /**
-     * The properties of the Text Layer.
-     */
-    props;
     /**
      * Constructs a new TextLayer instance.
-     * @param {ITextLayerProps} [props] - The properties of the Text Layer.
+     * @param {ITextLayerProps} [props] - The properties of the Text layer.
      * @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
      */
     constructor(props, misc) {
@@ -43,9 +38,9 @@ class TextLayer extends BaseLayer_1.BaseLayer {
     setFont(familyOrConfig, size, weight) {
         if (typeof familyOrConfig === "string") {
             if (!size)
-                throw new LazyUtil_1.LazyError('The size of the font must be provided');
+                throw new utils_1.LazyError("The size of the font must be provided");
             if (!weight)
-                throw new LazyUtil_1.LazyError('The weight of the font must be provided');
+                throw new utils_1.LazyError("The weight of the font must be provided");
             this.props.font = {
                 family: familyOrConfig,
                 size,
@@ -88,10 +83,10 @@ class TextLayer extends BaseLayer_1.BaseLayer {
      */
     setColor(color, ...sub) {
         if (!color)
-            throw new LazyUtil_1.LazyError('The color of the layer must be provided');
+            throw new utils_1.LazyError("The color of the layer must be provided");
         if (!(0, utils_1.isColor)(color))
-            throw new LazyUtil_1.LazyError('The color of the layer must be a valid color');
-        this.props.fillStyle = color;
+            throw new utils_1.LazyError("The color of the layer must be a valid color");
+        this.props.color = color;
         if (sub && sub.length > 0) {
             this.props.subStringColors = sub;
         }
@@ -137,13 +132,12 @@ class TextLayer extends BaseLayer_1.BaseLayer {
     setStroke(width, cap, join, dash, dashOffset, miterLimit) {
         this.props.stroke = {
             width,
-            cap: cap || 'butt',
-            join: join || 'miter',
+            cap: cap || "butt",
+            join: join || "miter",
             dash: dash || [],
             dashOffset: dashOffset || 0,
             miterLimit: miterLimit || 10,
         };
-        this.props.filled = false; // Ensure filled is false when stroke is set
         return this;
     }
     /**
@@ -171,13 +165,32 @@ class TextLayer extends BaseLayer_1.BaseLayer {
      * @returns {Object} The width and height of the text.
      */
     measureText(ctx, canvas) {
-        const w = (0, utils_1.parseToNormal)(this.props.size?.width, ctx, canvas);
-        const h = (0, utils_1.parseToNormal)(this.props.size?.height, ctx, canvas, { width: w, height: 0 }, { vertical: true });
-        if (this.props.multiline.enabled) {
-            return { width: w, height: h };
+        ctx.font = `${this.props.font.weight} ${this.props.font.size}px ${this.props.font.family}`;
+        if (this.props?.multiline?.enabled) {
+            const w = (0, utils_1.parseToNormal)(this.props.size?.width || "vw", ctx, canvas);
+            // Calculate actual height based on text wrapping
+            const words = this.props.text.split(" ");
+            let line = "";
+            let linesCount = 1;
+            for (let word of words) {
+                let linePlus = line + word + " ";
+                if (ctx.measureText(linePlus).width > w) {
+                    linesCount++;
+                    line = word + " ";
+                }
+                else {
+                    line = linePlus;
+                }
+            }
+            const lineHeight = this.props.font.size * (this.props.multiline.spacing || 1.1);
+            const calculatedHeight = linesCount * lineHeight;
+            // If height is fixed in props, use it, otherwise use calculated height
+            const fixedHeight = this.props.size?.height
+                ? (0, utils_1.parseToNormal)(this.props.size.height, ctx, canvas, { width: w, height: 0 }, { vertical: true })
+                : 0;
+            return { width: w, height: fixedHeight || calculatedHeight };
         }
         else {
-            ctx.font = `${this.props.font.weight} ${this.props.font.size}px ${this.props.font.family}`;
             let data = ctx.measureText(this.props.text);
             return { width: data.width, height: this.props.font.size };
         }
@@ -186,37 +199,50 @@ class TextLayer extends BaseLayer_1.BaseLayer {
      * Draws the text layer on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      */
     async draw(ctx, canvas, manager, debug) {
         const parcer = (0, utils_1.parser)(ctx, canvas, manager);
         const { x, y, w } = parcer.parseBatch({
-            x: { v: this.props.x },
-            y: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
-            w: { v: this.props.size?.width },
+            x: { v: this.props.position?.x || 0 },
+            y: { v: this.props.position?.y || 0, options: utils_1.defaultArg.vl(true) },
+            w: { v: this.props.size?.width || "vw" },
         });
-        const h = parcer.parse(this.props.size?.height, LazyUtil_1.defaultArg.wh(w), LazyUtil_1.defaultArg.vl(true));
+        const h = parcer.parse(this.props.size?.height || 0, utils_1.defaultArg.wh(w), utils_1.defaultArg.vl(true));
         if (debug)
-            LazyUtil_1.LazyLog.log('none', `TextLayer:`, { x, y, w, h });
+            utils_1.LazyLog.log("none", `TextLayer:`, { x, y, w, h });
         ctx.save();
-        (0, utils_1.transform)(ctx, this.props.transform, { width: w, height: h, x, y, type: this.type }, { text: this.props.text, textAlign: this.props.align, fontSize: this.props.font.size, multiline: this.props.multiline.enabled });
+        if (this.props.transform) {
+            (0, utils_1.transform)(ctx, this.props.transform, { width: w, height: h, x, y, type: this.type }, {
+                text: this.props.text,
+                textAlign: this.props.align,
+                fontSize: this.props.font.size,
+                multiline: this.props?.multiline?.enabled || false,
+            });
+        }
         ctx.beginPath();
-        (0, utils_1.drawShadow)(ctx, this.props.shadow);
-        (0, utils_1.opacity)(ctx, this.props.opacity);
-        (0, utils_1.filters)(ctx, this.props.filter);
-        ctx.textAlign = this.props.align;
+        utils_1.DrawUtils.drawShadow(ctx, this.props.shadow);
+        utils_1.DrawUtils.opacity(ctx, this.props.opacity);
+        utils_1.DrawUtils.filters(ctx, this.props.filter);
+        // When layout is managed by Yoga, always use top-left alignment
+        // since Yoga calculates position as top-left corner
+        const useLayoutAlignment = this.props._computedLayout === true;
+        ctx.textAlign = useLayoutAlignment ? "left" : this.props.align;
         if (this.props.letterSpacing)
             ctx.letterSpacing = `${this.props.letterSpacing}px`;
         if (this.props.wordSpacing)
             ctx.wordSpacing = `${this.props.wordSpacing}px`;
-        if (this.props.baseline)
-            ctx.textBaseline = this.props.baseline;
+        ctx.textBaseline = useLayoutAlignment ? "top" : this.props.baseline || "alphabetic";
         if (this.props.direction)
             ctx.direction = this.props.direction;
-        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle, { debug, layer: { width: w, height: h, x, y, align: 'center' }, manager });
-        if (this.props.multiline.enabled) {
-            const words = this.props.text.split(' ');
+        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.color, {
+            debug,
+            layer: { width: w, height: h, x, y, align: "center" },
+            manager,
+        });
+        if (this.props?.multiline?.enabled) {
+            const words = this.props.text.split(" ");
             let lines = [];
             for (let fontSize = 1; fontSize <= this.props.font.size; fontSize++) {
                 let lineHeight = fontSize * (this.props.multiline.spacing || 1.1);
@@ -224,14 +250,14 @@ class TextLayer extends BaseLayer_1.BaseLayer {
                 let xm = x;
                 let ym = y;
                 lines = [];
-                let line = '';
+                let line = "";
                 let charOffset = 0; // Track position in original text
                 for (let word of words) {
-                    let linePlus = line + word + ' ';
+                    let linePlus = line + word + " ";
                     if (ctx.measureText(linePlus).width > w) {
                         lines.push({ text: line, x: xm, y: ym, startOffset: charOffset });
                         charOffset += line.length;
-                        line = word + ' ';
+                        line = word + " ";
                         ym += lineHeight;
                     }
                     else {
@@ -267,19 +293,12 @@ class TextLayer extends BaseLayer_1.BaseLayer {
     drawText(props, ctx, fillStyle, text, x, y, w, textOffset = 0) {
         // If no substring colors are defined, draw normally
         if (!props.subStringColors || props.subStringColors.length === 0) {
-            if (props.filled) {
-                ctx.fillStyle = fillStyle;
-                ctx.fillText(text, x, y, w);
+            utils_1.DrawUtils.fillStyle(ctx, fillStyle, this.props.stroke);
+            if (props.stroke) {
+                ctx.strokeText(text, x, y, w);
             }
             else {
-                ctx.strokeStyle = fillStyle;
-                ctx.lineWidth = props.stroke?.width || 1;
-                ctx.lineCap = props.stroke?.cap || 'butt';
-                ctx.lineJoin = props.stroke?.join || 'miter';
-                ctx.miterLimit = props.stroke?.miterLimit || 10;
-                ctx.lineDashOffset = props.stroke?.dashOffset || 0;
-                ctx.setLineDash(props.stroke?.dash || []);
-                ctx.strokeText(text, x, y, w);
+                ctx.fillText(text, x, y, w);
             }
             return;
         }
@@ -288,14 +307,17 @@ class TextLayer extends BaseLayer_1.BaseLayer {
         let currentX = x;
         // Save original text alignment and set to left for manual positioning
         const originalAlign = ctx.textAlign;
-        ctx.textAlign = 'left';
+        ctx.textAlign = "left";
         // Adjust starting X based on text alignment
         const alignValue = props.align;
-        if (alignValue === types_1.TextAlign.Center || alignValue === 'center') {
+        if (alignValue === types_1.TextAlign.Center || alignValue === "center") {
             const totalWidth = ctx.measureText(text).width;
             currentX = x - totalWidth / 2;
         }
-        else if (alignValue === types_1.TextAlign.Right || alignValue === 'right' || alignValue === types_1.TextAlign.End || alignValue === 'end') {
+        else if (alignValue === types_1.TextAlign.Right ||
+            alignValue === "right" ||
+            alignValue === types_1.TextAlign.End ||
+            alignValue === "end") {
             const totalWidth = ctx.measureText(text).width;
             currentX = x - totalWidth;
         }
@@ -323,16 +345,19 @@ class TextLayer extends BaseLayer_1.BaseLayer {
                     text: text.substring(currentIndex, localStart),
                     color: fillStyle,
                     start: currentIndex,
-                    end: localStart
+                    end: localStart,
                 });
             }
             // Add colored substring
             if (localStart < localEnd) {
                 segments.push({
                     text: text.substring(localStart, localEnd),
-                    color: subColor.color,
+                    color: (0, utils_1.parseFillStyle)(ctx, subColor.color, {
+                        debug: false,
+                        layer: { width: w, height: 0, x: 0, y: 0, align: "center" },
+                    }),
                     start: localStart,
-                    end: localEnd
+                    end: localEnd,
                 });
                 currentIndex = localEnd;
             }
@@ -343,7 +368,7 @@ class TextLayer extends BaseLayer_1.BaseLayer {
                 text: text.substring(currentIndex),
                 color: fillStyle,
                 start: currentIndex,
-                end: textLength
+                end: textLength,
             });
         }
         // Draw each segment
@@ -351,19 +376,12 @@ class TextLayer extends BaseLayer_1.BaseLayer {
             if (segment.text.length === 0)
                 continue;
             const segmentWidth = ctx.measureText(segment.text).width;
-            if (props.filled) {
-                ctx.fillStyle = segment.color;
-                ctx.fillText(segment.text, currentX, y);
+            utils_1.DrawUtils.fillStyle(ctx, segment.color, this.props.stroke);
+            if (props.stroke) {
+                ctx.strokeText(segment.text, currentX, y);
             }
             else {
-                ctx.strokeStyle = segment.color;
-                ctx.lineWidth = props.stroke?.width || 1;
-                ctx.lineCap = props.stroke?.cap || 'butt';
-                ctx.lineJoin = props.stroke?.join || 'miter';
-                ctx.miterLimit = props.stroke?.miterLimit || 10;
-                ctx.lineDashOffset = props.stroke?.dashOffset || 0;
-                ctx.setLineDash(props.stroke?.dash || []);
-                ctx.strokeText(segment.text, currentX, y);
+                ctx.fillText(segment.text, currentX, y);
             }
             currentX += segmentWidth;
         }
@@ -371,29 +389,28 @@ class TextLayer extends BaseLayer_1.BaseLayer {
         ctx.textAlign = originalAlign;
     }
     /**
-     * Converts the Text Layer to a JSON representation.
-     * @returns {ITextLayer} The JSON representation of the Text Layer.
+     * Converts the Text layer to a JSON representation.
+     * @returns {ITextLayer} The JSON representation of the Text layer.
      */
     toJSON() {
         let data = super.toJSON();
         let copy = { ...this.props };
-        for (const key of ['x', 'y', 'size.width', 'size.height', 'fillStyle']) {
-            if (copy[key] && typeof copy[key] === 'object' && 'toJSON' in copy[key]) {
+        for (const key of ["x", "y", "size.width", "size.height", "fillStyle"]) {
+            if (copy[key] && typeof copy[key] === "object" && "toJSON" in copy[key]) {
                 copy[key] = copy[key].toJSON();
             }
         }
         return { ...data, props: copy };
     }
     /**
-     * Validates the properties of the Text Layer.
+     * Validates the properties of the Text layer.
      * @param {ITextLayerProps} [data] - The properties to validate.
      * @returns {ITextLayerProps} The validated properties.
      */
     validateProps(data) {
         return {
             ...super.validateProps(data),
-            filled: data.filled || true,
-            fillStyle: data.fillStyle || '#000000',
+            color: data.color || "#000000",
             text: data.text || "",
             font: {
                 family: data.font?.family || "Arial",
@@ -405,7 +422,7 @@ class TextLayer extends BaseLayer_1.BaseLayer {
                 spacing: data.multiline?.spacing || 1.1,
             },
             size: {
-                width: data.size?.width || "vw",
+                width: data.size?.width || 0,
                 height: data.size?.height || 0,
             },
             align: data.align || types_1.TextAlign.Left,

package/dist/structures/components/index.d.ts

@@ -1,10 +1,10 @@
-export * from './BaseLayer';
-export * from './BezierLayer';
-export * from './ClearLayer';
-export * from './ImageLayer';
-export * from './TextLayer';
-export * from './MorphLayer';
-export * from './Group';
-export * from './LineLayer';
-export * from './QuadraticLayer';
-export * from './Path2DLayer';
+export * from "./BaseLayer";
+export * from "./BezierLayer";
+export * from "./ImageLayer";
+export * from "./TextLayer";
+export * from "./MorphLayer";
+export * from "./Div";
+export * from "./LineLayer";
+export * from "./QuadraticLayer";
+export * from "./Path2DLayer";
+export * from "./PolygonLayer";

package/dist/structures/components/index.js

@@ -16,11 +16,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./BaseLayer"), exports);
 __exportStar(require("./BezierLayer"), exports);
-__exportStar(require("./ClearLayer"), exports);
 __exportStar(require("./ImageLayer"), exports);
 __exportStar(require("./TextLayer"), exports);
 __exportStar(require("./MorphLayer"), exports);
-__exportStar(require("./Group"), exports);
+__exportStar(require("./Div"), exports);
 __exportStar(require("./LineLayer"), exports);
 __exportStar(require("./QuadraticLayer"), exports);
 __exportStar(require("./Path2DLayer"), exports);
+__exportStar(require("./PolygonLayer"), exports);

package/dist/structures/helpers/Exporter.d.ts

@@ -1,19 +1,24 @@
 import { IOLazyCanvas, LazyCanvas } from "../LazyCanvas";
 import { AnyExport } from "../../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
+import { Scene } from "../../core";
 /**
- * Class responsible for exporting a LazyCanvas instance to various formats.
+ * Class responsible for exporting a LazyCanvas or Scene instance to various formats.
  */
 export declare class Exporter {
     /**
      * The LazyCanvas instance to be exported.
      */
-    canvas: LazyCanvas;
+    canvas?: LazyCanvas;
+    /**
+     * The Scene instance to be exported.
+     */
+    scene?: Scene;
     /**
      * Constructs a new Exporter instance.
-     * @param canvas {LazyCanvas} - The LazyCanvas instance to be exported.
+     * @param source {LazyCanvas | Scene} - The LazyCanvas or Scene instance to be exported.
      */
-    constructor(canvas: LazyCanvas);
+    constructor(source: LazyCanvas | Scene);
     /**
      * Saves a file to the filesystem.
      * @param {any} [buffer] - The data to be saved.
@@ -34,12 +39,16 @@ export declare class Exporter {
      * @param {Object} [opts] - Optional settings.
      * @param {string} [opts.name] - The name of the file (optional).
      * @param {boolean} [opts.saveAsFile] - Whether to save the export as a file (optional).
+     * @param {number} [opts.duration] - Duration of the animation in seconds (Scene only).
+     * @param {number} [opts.fps] - Frames per second for animation (default: 60, Scene only).
      * @returns {Promise<Buffer | SKRSContext2D | Canvas | SvgCanvas | string>} The exported data.
      * @throws {LazyError} If the export type is not supported.
      */
     export(exportType: AnyExport, opts?: {
         name?: string;
         saveAsFile?: boolean;
+        duration?: number;
+        fps?: number;
     }): Promise<Buffer | SKRSContext2D | Canvas | SvgCanvas | string>;
     /**
      * Synchronously exports the canvas to the specified format.

package/dist/structures/helpers/Exporter.js

@@ -32,27 +32,33 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Exporter = void 0;
 const types_1 = require("../../types");
-const LazyUtil_1 = require("../../utils/LazyUtil");
-const fs = __importStar(require("fs"));
-const utils_1 = require("../../utils/utils");
+const utils_1 = require("../../utils");
+const fs = __importStar(require("node:fs"));
 const _yaml = __importStar(require("js-yaml"));
+const APNGEncoder_1 = __importDefault(require("../../utils/APNGEncoder"));
+const core_1 = require("../../core");
 /**
- * Class responsible for exporting a LazyCanvas instance to various formats.
+ * Class responsible for exporting a LazyCanvas or Scene instance to various formats.
  */
 class Exporter {
-    /**
-     * The LazyCanvas instance to be exported.
-     */
-    canvas;
     /**
      * Constructs a new Exporter instance.
-     * @param canvas {LazyCanvas} - The LazyCanvas instance to be exported.
+     * @param source {LazyCanvas | Scene} - The LazyCanvas or Scene instance to be exported.
      */
-    constructor(canvas) {
-        this.canvas = canvas;
+    constructor(source) {
+        if (source instanceof core_1.Scene) {
+            this.scene = source;
+            this.canvas = source.lazyCanvas;
+        }
+        else {
+            this.canvas = source;
+        }
     }
     /**
      * Saves a file to the filesystem.
@@ -63,9 +69,9 @@ class Exporter {
      */
     async saveFile(buffer, extension, name) {
         if (!buffer)
-            throw new LazyUtil_1.LazyError('Buffer must be provided');
+            throw new utils_1.LazyError("Buffer must be provided");
         if (!extension)
-            throw new LazyUtil_1.LazyError('Extension must be provided');
+            throw new utils_1.LazyError("Extension must be provided");
         fs.writeFileSync(`${name === undefined ? (0, utils_1.generateRandomName)() : name}.${extension}`, buffer);
     }
     /**
@@ -86,12 +92,15 @@ class Exporter {
      * @param {Object} [opts] - Optional settings.
      * @param {string} [opts.name] - The name of the file (optional).
      * @param {boolean} [opts.saveAsFile] - Whether to save the export as a file (optional).
+     * @param {number} [opts.duration] - Duration of the animation in seconds (Scene only).
+     * @param {number} [opts.fps] - Frames per second for animation (default: 60, Scene only).
      * @returns {Promise<Buffer | SKRSContext2D | Canvas | SvgCanvas | string>} The exported data.
      * @throws {LazyError} If the export type is not supported.
      */
     async export(exportType, opts) {
-        // beforeExport hook
-        this.canvas.manager.plugins.executeHook('beforeExport', this.canvas);
+        if (!this.canvas) {
+            throw new utils_1.LazyError("Canvas is not initialized");
+        }
         let result;
         switch (exportType) {
             case types_1.Export.CTX:
@@ -100,69 +109,94 @@ class Exporter {
                 break;
             case types_1.Export.SVG:
             case "svg":
-                result = await this.canvas.manager.render.render('svg');
+                result = await this.canvas.manager.render.render("svg");
                 if (opts?.saveAsFile) {
-                    await this.saveFile(result, 'svg', opts.name);
+                    await this.saveFile(result, "svg", opts.name);
                 }
                 break;
             case types_1.Export.BUFFER:
             case "buffer":
-                result = await this.canvas.manager.render.render('buffer');
-                if (opts?.saveAsFile) {
-                    await this.saveFile(result, 'png', opts.name);
+                if (this.scene) {
+                    result = await this.scene.renderFirstFrame().then((frame) => frame.toBuffer("image/png"));
+                }
+                else {
+                    result = (await this.canvas.manager.render.render("buffer"));
                 }
-                break;
-            case types_1.Export.GIF:
-            case "gif":
-                result = await this.canvas.manager.render.render('buffer');
                 if (opts?.saveAsFile) {
-                    await this.saveFile(result, 'gif', opts.name);
+                    await this.saveFile(result, "png", opts.name);
                 }
                 break;
             case types_1.Export.WEBP:
             case "webp":
-                result = await this.canvas.manager.render.render('buffer');
+                if (this.scene) {
+                    result = await this.scene
+                        .renderFirstFrame()
+                        .then((frame) => frame.toBuffer("image/webp"));
+                }
+                else {
+                    result = await this.canvas.manager.render.render("webp");
+                }
                 if (opts?.saveAsFile) {
-                    await this.saveFile(result, 'webp', opts.name);
+                    await this.saveFile(result, "webp", opts.name);
                 }
                 break;
-            case types_1.Export.JPEG:
-            case "jpeg":
-                result = await this.canvas.manager.render.render('buffer');
-                await this.saveFile(result, 'jpeg', opts?.name);
-                break;
             case types_1.Export.JPG:
             case "jpg":
-                const jpg = await this.canvas.manager.render.render('buffer');
-                await this.saveFile(jpg, 'jpg', opts?.name);
-                return jpg;
+                if (this.scene) {
+                    result = await this.scene
+                        .renderFirstFrame()
+                        .then((frame) => frame.toBuffer("image/jpeg"));
+                }
+                else {
+                    result = await this.canvas.manager.render.render("jpg");
+                }
+                await this.saveFile(result, "jpg", opts?.name);
+                return result;
             case types_1.Export.PNG:
             case "png":
-                const png = await this.canvas.manager.render.render('buffer');
-                await this.saveFile(png, 'png', opts?.name);
-                return png;
+                if (this.scene) {
+                    result = await this.scene.renderFirstFrame().then((frame) => frame.toBuffer("image/png"));
+                }
+                else {
+                    result = await this.canvas.manager.render.render("png");
+                }
+                await this.saveFile(result, "png", opts?.name);
+                return result;
+            case types_1.Export.APNG:
+            case "apng":
+                if (!this.scene) {
+                    throw new utils_1.LazyError("APNG export requires a Scene instance. Use: new Exporter(scene)");
+                }
+                const duration = opts?.duration ?? 0;
+                const timeNow = Date.now();
+                const fps = opts?.fps ?? 60;
+                const frameData = await this.scene.renderAnimationData(timeNow, timeNow + duration, fps);
+                const encoder = new APNGEncoder_1.default(this.scene.width, this.scene.height, fps).addFrames(...frameData);
+                const buffer = encoder.encode();
+                if (opts?.saveAsFile !== false) {
+                    fs.writeFileSync(`${opts?.name ?? "animation"}.png`, buffer);
+                }
+                return buffer;
             case types_1.Export.JSON:
             case "json":
                 const json = this.syncExport(exportType);
                 if (opts?.saveAsFile) {
-                    await this.saveFile(JSON.stringify(json), 'json', opts.name);
+                    await this.saveFile(JSON.stringify(json), "json", opts.name);
                 }
                 return JSON.stringify(json);
             case types_1.Export.CANVAS:
             case "canvas":
-                return await this.canvas.manager.render.render(exportType);
+                return (await this.canvas.manager.render.render(exportType));
             case types_1.Export.YAML:
             case "yaml":
                 const yaml = _yaml.dump(this.syncExport(types_1.Export.JSON));
                 if (opts?.saveAsFile) {
-                    await this.saveFile(yaml, 'yaml', opts.name);
+                    await this.saveFile(yaml, "yaml", opts.name);
                 }
                 return yaml;
             default:
-                throw new LazyUtil_1.LazyError(`Export type ${exportType} is not supported`);
+                throw new utils_1.LazyError(`Export type ${exportType} is not supported`);
         }
-        // afterExport hook
-        this.canvas.manager.plugins.executeHook('afterExport', this.canvas, result);
         return result;
     }
     /**
@@ -171,13 +205,15 @@ class Exporter {
      * @returns {IOLazyCanvas | void} The exported data or void if the export type is unsupported.
      */
     syncExport(exportType) {
+        if (!this.canvas) {
+            throw new utils_1.LazyError("Canvas is not initialized");
+        }
         switch (exportType) {
             case types_1.Export.JSON:
             case "json":
                 return {
                     options: this.canvas.options,
-                    animation: this.canvas.manager.animation.options,
-                    layers: this.exportLayers(this.canvas.manager.layers)
+                    layers: this.exportLayers(this.canvas.manager.layers),
                 };
         }
     }