xpict 0.0.2 → 0.1.0

package/dist/template.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Template = void 0;
+const sharp_1 = __importDefault(require("sharp"));
+const commit_frame_1 = require("./utils/commit-frame");
+class Template {
+    constructor(options) {
+        this.options = options;
+    }
+    async render(data) {
+        const { width, height, fill } = this.options.config;
+        let image = (0, sharp_1.default)({
+            create: {
+                width: width,
+                height: height,
+                channels: 4,
+                background: fill !== null && fill !== void 0 ? fill : {
+                    r: 0,
+                    g: 0,
+                    b: 0,
+                    alpha: 0
+                }
+            }
+        });
+        const ctx = {
+            image: image,
+            offsetX: 0,
+            offsetY: 0
+        };
+        for (const layer of this.options.layers) {
+            if (!layer.shouldRender(data))
+                continue;
+            await layer.render(ctx, data);
+            ctx.image = await (0, commit_frame_1.commitFrame)(ctx.image);
+        }
+        return ctx.image.png().toBuffer();
+    }
+}
+exports.Template = Template;

package/dist/utils/commit-frame.d.ts

@@ -0,0 +1,2 @@
+import sharp from "sharp";
+export declare function commitFrame(image: sharp.Sharp): Promise<sharp.Sharp>;

package/dist/utils/commit-frame.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.commitFrame = commitFrame;
+const sharp_1 = __importDefault(require("sharp"));
+async function commitFrame(image) {
+    const buffer = await image.raw().toBuffer({ resolveWithObject: false });
+    const metadata = await image.metadata();
+    return (0, sharp_1.default)(buffer, {
+        raw: {
+            width: metadata.width,
+            height: metadata.height,
+            channels: metadata.channels,
+        }
+    });
+}

package/dist/utils/font-config.d.ts

@@ -0,0 +1,11 @@
+import { FontOptions } from "../layers/text-layer";
+export type FontConfigOptions = {
+    color?: string;
+    name?: string;
+    filePath?: string;
+};
+export type PartialFontOptions = {
+    size: number;
+    color?: string;
+};
+export declare function fontConfig(options: FontConfigOptions): (partialOptions: PartialFontOptions) => FontOptions;

package/dist/utils/font-config.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fontConfig = fontConfig;
+function fontConfig(options) {
+    return (partialOptions) => {
+        return {
+            ...options,
+            ...partialOptions
+        };
+    };
+}

package/dist/utils/resolve-axis.d.ts

@@ -0,0 +1,3 @@
+export type ComputeAxis<Data> = (data: Data, index: number) => number;
+export type Axis<Data> = ComputeAxis<Data> | number;
+export declare function resolveAxis<Data>(axis: Axis<Data>, data: Data, index: number): number;

package/dist/utils/resolve-axis.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveAxis = resolveAxis;
+function resolveAxis(axis, data, index) {
+    if (typeof axis === "function") {
+        return axis(data, index);
+    }
+    return axis;
+}

package/package.json

@@ -1,78 +1,38 @@
 {
   "name": "xpict",
-  "version": "0.0.2",
-  "description": "",
-  "main": "index.js",
+  "version": "0.1.0",
+  "description": "Xpict é uma biblioteca para a geração de imagens padronizadas a partir de modelos declarativos.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/*",
+    "!/**/__tests__"
+  ],
   "scripts": {
-    "test": "ts-node ./tests/index.ts",
-    "test:hr": "ts-node ./tests/generate-hr-maps.ts",
-    "build:clean": "rimraf dist",
-    "compile": "tsc -b ./tsconfig.cjs.json ./tsconfig.esm.json ./tsconfig.types.json",
-    "build": "npm-run-all build:clean compile generate-exports && node ./dev-scripts/prepare-package-json.js",
-    "generate-exports": "node dev-scripts/generate-exports.cjs"
+    "playground:heroic-race": "ts-node ./playground/heroic-race.ts",
+    "test": "jest",
+    "build": "tsc"
   },
-  "keywords": [],
+  "keywords": [
+    "xpict",
+    "image",
+    "template",
+    "canvas",
+    "sharp"
+  ],
   "author": "Marcuth",
-  "license": "ISC",
-  "dependencies": {
-    "@types/node": "^22.5.4",
-    "canvas": "^2.11.2",
-    "sharp": "^0.33.5",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.6.2"
-  },
+  "license": "MIT",
+  "type": "commonjs",
   "devDependencies": {
-    "npm-run-all": "^4.1.5",
-    "rimraf": "^6.0.1"
+    "@types/jest": "^30.0.0",
+    "@types/node": "^25.0.3",
+    "ts-jest": "^29.4.6",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3"
   },
-  "exports": {
-    ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/esm/index.js",
-      "default": "./dist/esm/index.js",
-      "types": "./dist/types/index.d.ts"
-    },
-    "./actions": {
-      "import": "./dist/esm/actions.js",
-      "require": "./dist/cjs/actions.js",
-      "default": "./dist/esm/actions.js",
-      "types": "./dist/types/actions.d.ts"
-    },
-    "./constants": {
-      "import": "./dist/esm/constants.js",
-      "require": "./dist/cjs/constants.js",
-      "default": "./dist/esm/constants.js",
-      "types": "./dist/types/constants.d.ts"
-    },
-    "./utils/clone-image.util.ts": {
-      "import": "./dist/esm/utils/clone-image.util.ts.js",
-      "require": "./dist/cjs/utils/clone-image.util.ts.js",
-      "default": "./dist/esm/utils/clone-image.util.ts.js",
-      "types": "./dist/types/utils/clone-image.util.ts.d.ts"
-    },
-    "./utils/color.util": {
-      "import": "./dist/esm/utils/color.util.js",
-      "require": "./dist/cjs/utils/color.util.js",
-      "default": "./dist/esm/utils/color.util.js",
-      "types": "./dist/types/utils/color.util.d.ts"
-    },
-    "./utils/create-image.util": {
-      "import": "./dist/esm/utils/create-image.util.js",
-      "require": "./dist/cjs/utils/create-image.util.js",
-      "default": "./dist/esm/utils/create-image.util.js",
-      "types": "./dist/types/utils/create-image.util.d.ts"
-    },
-    "./utils": {
-      "import": "./dist/esm/utils/index.js",
-      "require": "./dist/cjs/utils/index.js",
-      "default": "./dist/esm/utils/index.js",
-      "types": "./dist/types/utils/index.d.ts"
-    },
-    "./utils/open-image.util": {
-      "import": "./dist/esm/utils/open-image.util.js",
-      "require": "./dist/cjs/utils/open-image.util.js",
-      "default": "./dist/esm/utils/open-image.util.js",
-      "types": "./dist/types/utils/open-image.util.d.ts"
-    }
+  "dependencies": {
+    "canvas": "^3.2.0",
+    "sharp": "^0.34.5"
   }
-}
+}

package/dev-scripts/generate-exports.cjs

@@ -1,57 +0,0 @@
-const fs = require("fs")
-const path = require("path")
-
-const distPath = path.join(__dirname, "..", "src")
-
-const packageJsonPath = path.join(__dirname, "..", "package.json")
-const packageJson = require(packageJsonPath)
-
-function generateExports(dir, base = "") {
-    const entries = fs.readdirSync(dir)
-    let exports = {}
-
-    entries.forEach(entry => {
-        const fullPath = path.join(dir, entry)
-        const stat = fs.statSync(fullPath)
-
-        if (stat.isDirectory()) {
-            exports = {
-                ...exports,
-                ...generateExports(fullPath, `${base}/${entry}`)
-            }
-        } else if (path.extname(entry) === ".ts") {
-            const exportPath = `${base}/${entry.replace(".ts", "")}`
-
-            const cjsPath = `./dist/cjs${exportPath}.js`
-            const esmPath = `./dist/esm${exportPath}.js`
-            const dtsPath = `./dist/types${exportPath}.d.ts`
-
-            if (exportPath !== "/index") {
-                exports[`.${exportPath.replace("/index", "")}`] = {
-                    import: esmPath,
-                    require: cjsPath,
-                    default: esmPath,
-                    types: dtsPath
-                }
-            }
-        }
-    })
-
-    return exports
-}
-
-const generatedExports = generateExports(distPath)
-
-packageJson.exports = {
-    ".": {
-        import: "./dist/esm/index.js",
-        require: "./dist/esm/index.js",
-        default: "./dist/esm/index.js",
-        types: "./dist/types/index.d.ts",
-    },
-    ...generatedExports
-}
-
-fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
-
-console.log("Exports gerados e adicionados ao package.json")

package/dev-scripts/index.ts

@@ -1,149 +0,0 @@
-// import fakeUa from "fake-useragent"
-
-
-// import { extractInnerText, ParsingModel, PuppeteerClient, PuppeteerClientAction } from "../src"
-
-// const randomizeViewportSize: PuppeteerClientAction = {
-//     type: "beforeRequest",
-//     func: async (page) => {
-//         const width = 1920 + Math.floor(Math.random() * 100)
-//         const height = 3000 + Math.floor(Math.random() * 100)
-
-//         await page.setViewport({
-//             width: width,
-//             height: height,
-//             deviceScaleFactor: 1,
-//             hasTouch: false,
-//             isLandscape: false,
-//             isMobile: false,
-//         })
-//     }
-// }
-
-// const skipAssetsLoading: PuppeteerClientAction = {
-//     type: "beforeRequest",
-//     func: async (page) => {
-//         await page.setRequestInterception(true)
-
-//         page.on("request", async (request) => {
-//             const isAssets = (
-//                 request.resourceType() == "stylesheet" ||
-//                 request.resourceType() == "font" ||
-//                 request.resourceType() == "image"
-//             )
-
-//             if (isAssets) {
-//                 await request.abort()
-//             } else {
-//                 await request.continue()
-//             }
-//         })
-//     }
-// }
-
-// const passWebdriverCheck: PuppeteerClientAction = {
-//     type: "beforeRequest",
-//     func: async (page) => {
-//         await page.evaluateOnNewDocument(() => {
-//             Object.defineProperty(navigator, "webdriver", {
-//                 get: () => false
-//             })
-//         })
-//     }
-// }
-
-// const passChromeCheck: PuppeteerClientAction = {
-//     type: "beforeRequest",
-//     func: async (page) => {
-//         await page.evaluateOnNewDocument(() => {
-//             (window as any).chrome = {
-//                 runtime: {}
-//             }
-//         })
-//     }
-// }
-
-// const passNotificationsCheck: PuppeteerClientAction = {
-//     type: "beforeRequest",
-//     func: async (page) => {
-//         await page.evaluateOnNewDocument(() => {
-//             const originalQuery = window.navigator.permissions.query as any
-            
-//             return window.navigator.permissions.query = (parameters) => {
-//                 return parameters.name === "notifications" ? 
-//                     Promise.resolve({ state: Notification.permission }) :
-//                     originalQuery(parameters)
-//             }
-//         })
-//     }
-// }
-
-// const mockPlugins: PuppeteerClientAction = {
-//     type: "beforeRequest",
-//     func: async (page) => {
-//         await page.evaluateOnNewDocument(() => {
-//             Object.defineProperty(navigator, "plugins", {
-//                 get: () => [1, 2, 3, 4, 5],
-//             })
-//         })
-//     }
-// }
-
-// const mockLanguages: PuppeteerClientAction = {
-//     type: "beforeRequest",
-//     func: async (page) => {
-//         await page.evaluateOnNewDocument(() => {
-//             Object.defineProperty(navigator, "languages", {
-//                 get: () => ["en-US", "en"],
-//             })
-//         })
-//     }
-// }
-
-// const hideAutomationExtensions: PuppeteerClientAction = {
-//     type: "beforeRequest",
-//     func: async (page) => {
-//         await page.evaluateOnNewDocument(() => {
-//             Object.defineProperty(navigator, "webdriver", {
-//                 get: () => undefined
-//             })
-
-//             delete (navigator as any).__proto__.webdriver
-//         })
-//     }
-// }
-
-// ;(async () => {
-//     const client = new PuppeteerClient({
-//         headless: true,
-//         args: ["--no-sandbox", "--disable-setuid-sandbox"],
-//         userAgent: fakeUa
-//     })
-
-//     const pageParser = await client.get({
-//         url: "https://www.terabyteshop.com.br/produto/17216/monitor-gamer-superframe-vision-24pol-fullhd-165hz-hdmidp-sfv2409s",
-//         actions: [
-//             randomizeViewportSize,
-//             skipAssetsLoading,
-//             passWebdriverCheck,
-//             passChromeCheck,
-//             passNotificationsCheck,
-//             mockPlugins,
-//             mockLanguages,
-//             hideAutomationExtensions
-//         ]
-//     })
-
-//     const pageParserModel = {
-//         title: {
-//             query: "title",
-//             extractor: extractInnerText
-//         }
-//     } satisfies ParsingModel
-
-//     const pageData = pageParser.parseItem({ model: pageParserModel })
-
-//     console.log(pageData.title)
-
-//     await client.close()
-// })();

package/dev-scripts/prepare-package-json.js

@@ -1,31 +0,0 @@
-const path = require("path")
-const fs = require("fs")
-
-const distDir = path.join(__dirname, "..", "dist")
-
-function createEsmModulePackageJson() {
-    fs.readdirSync(distDir)
-        .forEach((dir) => {
-            if (dir === "esm") {
-                const packageJsonFile = path.join(distDir, dir, "/package.json")
-
-                if (!fs.existsSync(packageJsonFile)) {
-                    fs.writeFileSync(
-                        packageJsonFile,
-                        new Uint8Array(Buffer.from('{"type": "module"}')),
-                    )
-                }
-            } else if (dir == "cjs") {
-                const packageJsonFile = path.join(distDir, dir, "/package.json")
-
-                if (!fs.existsSync(packageJsonFile)) {
-                    fs.writeFileSync(
-                        packageJsonFile,
-                        new Uint8Array(Buffer.from('{"type": "commonjs"}')),
-                    )
-                }
-            }
-        })
-}
-
-createEsmModulePackageJson()

package/dist/cjs/actions.js

@@ -1,232 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toGrayScale = toGrayScale;
-exports.cropImage = cropImage;
-exports.resizeImage = resizeImage;
-exports.rotateImage = rotateImage;
-exports.blurImage = blurImage;
-exports.modulateSaturation = modulateSaturation;
-exports.modulateBrightness = modulateBrightness;
-exports.invertColors = invertColors;
-exports.addBorder = addBorder;
-exports.adjustContrast = adjustContrast;
-exports.modulateOpacity = modulateOpacity;
-exports.flipImage = flipImage;
-exports.flopImage = flopImage;
-exports.insertText = insertText;
-exports.insertCircle = insertCircle;
-exports.insertRectangle = insertRectangle;
-exports.insertLine = insertLine;
-const canvas_1 = require("canvas");
-const constants_1 = require("./constants");
-function toGrayScale(grayscale = true) {
-    return (image) => image.grayscale(grayscale);
-}
-function cropImage(options) {
-    return (image) => image.extract(options);
-}
-function resizeImage({ width, height, fit = "inside" }) {
-    return (image) => image.resize(width, height, { fit: fit });
-}
-function rotateImage(angle) {
-    return (image) => image.rotate(angle);
-}
-function blurImage(sigma = 1) {
-    return (image) => image.blur(sigma);
-}
-function modulateSaturation(saturation) {
-    return (image) => image.modulate({ saturation });
-}
-function modulateBrightness(brightness) {
-    return (image) => image.modulate({ brightness });
-}
-function invertColors() {
-    return (image) => image.negate();
-}
-function addBorder({ size, color = constants_1.colors.black }) {
-    return (image) => image.extend({
-        top: size,
-        bottom: size,
-        left: size,
-        right: size,
-        background: color
-    });
-}
-function adjustContrast(contrast) {
-    return (image) => {
-        const factor = (259 * (contrast + 255)) / (255 * (259 - contrast));
-        return image.linear(factor, -(128 * factor) + 128);
-    };
-}
-function modulateOpacity(opacity) {
-    return (image) => image.flatten({ background: { alpha: opacity } });
-}
-function flipImage() {
-    return (image) => image.flip();
-}
-function flopImage() {
-    return (image) => image.flop();
-}
-function insertText({ text, font, x, y, backgroundColor = constants_1.insertTextDefaultOptions.backgroundColor, anchor = constants_1.insertTextDefaultOptions.anchor, stroke, rotation = constants_1.insertTextDefaultOptions.rotation }) {
-    return async (image) => {
-        const imageMetadata = await image.metadata();
-        const width = imageMetadata.width;
-        const height = imageMetadata.height;
-        const canvas = (0, canvas_1.createCanvas)(width, height);
-        const context = canvas.getContext("2d");
-        if (backgroundColor !== "transparent") {
-            context.fillStyle = backgroundColor;
-            context.fillRect(0, 0, width, height);
-        }
-        if (font.filePath) {
-            (0, canvas_1.registerFont)(font.filePath, { family: font.name });
-        }
-        context.font = `${font.size}px ${font.name ?? constants_1.insertTextDefaultOptions.font.name}`;
-        context.fillStyle = font.color ?? constants_1.colors.black;
-        const textMetrics = context.measureText(text);
-        const textWidth = textMetrics.width;
-        const textHeight = font.size;
-        const anchorOffsets = {
-            "top-left": {
-                x: 0,
-                y: 0
-            },
-            "top-center": {
-                x: -textWidth / 2,
-                y: 0
-            },
-            "top-right": {
-                x: -textWidth,
-                y: 0
-            },
-            "middle-left": {
-                x: 0,
-                y: -textHeight / 2
-            },
-            "middle-center": {
-                x: -textWidth / 2,
-                y: -textHeight / 2
-            },
-            "middle-right": {
-                x: -textWidth,
-                y: -textHeight / 2
-            },
-            "bottom-left": {
-                x: 0,
-                y: -textHeight
-            },
-            "bottom-center": {
-                x: -textWidth / 2,
-                y: -textHeight
-            },
-            "bottom-right": {
-                x: -textWidth,
-                y: -textHeight
-            }
-        };
-        const { x: offsetX, y: offsetY } = anchorOffsets[anchor] || { x: 0, y: 0 };
-        const adjustedX = x + offsetX;
-        const adjustedY = y + offsetY;
-        const adjustedRotation = rotation ?? 0;
-        context.save();
-        context.translate(adjustedX, adjustedY);
-        context.rotate((adjustedRotation * Math.PI) / 180);
-        if (stroke) {
-            context.strokeStyle = stroke.fill;
-            context.lineWidth = stroke.width;
-            context.lineJoin = "round";
-            context.strokeText(text, 0, 0);
-        }
-        context.fillStyle = font.color ?? constants_1.colors.black;
-        context.fillText(text, 0, 0);
-        context.restore();
-        const textBuffer = canvas.toBuffer();
-        return image.composite([
-            {
-                input: textBuffer,
-                top: 0,
-                left: 0
-            }
-        ]);
-    };
-}
-function insertCircle({ x, y, radius, fill }) {
-    return async (image) => {
-        const imageMetadata = await image.metadata();
-        const width = imageMetadata.width;
-        const height = imageMetadata.height;
-        const canvas = (0, canvas_1.createCanvas)(width, height);
-        const context = canvas.getContext("2d");
-        context.beginPath();
-        context.arc(x, y, radius, 0, Math.PI * 2, true);
-        context.closePath();
-        context.fillStyle = fill;
-        context.fill();
-        const circleBuffer = canvas.toBuffer();
-        return image.composite([
-            {
-                input: circleBuffer,
-                top: 0,
-                left: 0
-            }
-        ]);
-    };
-}
-function insertRectangle({ x, y, width, height, fill, borderRadius }) {
-    return async (image) => {
-        const imageMetadata = await image.metadata();
-        const canvasWidth = imageMetadata.width;
-        const canvasHeight = imageMetadata.height;
-        const canvas = (0, canvas_1.createCanvas)(canvasWidth, canvasHeight);
-        const context = canvas.getContext("2d");
-        context.fillStyle = fill;
-        if (borderRadius && borderRadius > 0) {
-            context.beginPath();
-            context.moveTo(x + borderRadius, y);
-            context.lineTo(x + width - borderRadius, y);
-            context.arcTo(x + width, y, x + width, y + height, borderRadius);
-            context.lineTo(x + width, y + height - borderRadius);
-            context.arcTo(x + width, y + height, x, y + height, borderRadius);
-            context.lineTo(x + borderRadius, y + height);
-            context.arcTo(x, y + height, x, y, borderRadius);
-            context.lineTo(x, y + borderRadius);
-            context.arcTo(x, y, x + width, y, borderRadius);
-            context.closePath();
-            context.fill();
-        }
-        else {
-            context.fillRect(x, y, width, height);
-        }
-        const rectangleBuffer = canvas.toBuffer();
-        return image.composite([
-            {
-                input: rectangleBuffer,
-                top: 0,
-                left: 0
-            }
-        ]);
-    };
-}
-function insertLine({ x1, y1, x2, y2, color, width }) {
-    return async (image) => {
-        const imageMetadata = await image.metadata();
-        const canvasWidth = imageMetadata.width;
-        const canvasHeight = imageMetadata.height;
-        const canvas = (0, canvas_1.createCanvas)(canvasWidth, canvasHeight);
-        const context = canvas.getContext("2d");
-        context.strokeStyle = color;
-        context.lineWidth = width;
-        context.beginPath();
-        context.moveTo(x1, y1);
-        context.lineTo(x2, y2);
-        context.stroke();
-        const lineBuffer = canvas.toBuffer();
-        return image.composite([
-            {
-                input: lineBuffer,
-                top: 0,
-                left: 0
-            }
-        ]);
-    };
-}