clumsy-graphics/package/helpers/renderAnimationFrame.js

a tool for rapidly developing animations where frames are described using svg elements à la react 🙃

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.renderAnimationFrame = void 0;
const fs_1 = __importDefault(require("fs"));
// @ts-expect-error
const inkscape_1 = __importDefault(require("inkscape"));
const IO = __importStar(require("io-ts"));
const server_1 = __importDefault(require("react-dom/server"));
const stream_1 = require("stream");
const promises_1 = __importDefault(require("stream/promises"));
const decodeData_1 = require("./decodeData");
async function renderAnimationFrame(api) {
    const { animationModule, frameIndex, frameFileOutputPath } = api;
    const { getFrameDescription, frameCount } = animationModule;
    console.log(`[${frameIndex}]: rendering svg markup...`);
    const frameDescription = await getFrameDescription({
        frameIndex,
        frameCount,
    });
    const frameSvgMarkup = server_1.default.renderToStaticMarkup(frameDescription);
    console.log(`[${frameIndex}]: encoding svg markup to image file...`);
    await writeSvgMarkupToImageFile({
        frameFileOutputPath,
        frameSvgMarkup,
        frameSize: animationModule.frameSize,
    });
}
exports.renderAnimationFrame = renderAnimationFrame;
async function writeSvgMarkupToImageFile(api) {
    const { frameSvgMarkup, frameSize, frameFileOutputPath } = api;
    const frameSvgStream = stream_1.Readable.from([frameSvgMarkup]);
    const frameFileOutputTypeData = frameFileOutputPath.split(/\.(svg|png)$/, 2)[1];
    const frameFileOutputType = await (0, decodeData_1.decodeData)({
        targetCodec: IO.union([IO.literal('svg'), IO.literal('png')]),
        inputData: frameFileOutputTypeData,
    });
    const svgToPngStream = new inkscape_1.default([
        `--export-type=${frameFileOutputType}`,
        `--export-width=${frameSize.width}`,
        `--export-height=${frameSize.height}`,
    ]);
    const framePngWriteStream = fs_1.default.createWriteStream(frameFileOutputPath);
    return promises_1.default.pipeline(frameSvgStream, svgToPngStream, framePngWriteStream);
}