xpict 1.0.0 → 1.0.2

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { GroupLayer, RepeatLayer, GroupLayerOptions, ImageLayer, ImageLayerOptions, LineLayer, LineLayerOptions, RectangleLayer, RectangleLayerOptions, RepeatLayerOptions, TextLayer, TextLayerOptions, CircleLayerOptions, CircleLayer } from "./layers";
 import { Template, InputTemplateOptions } from "./template";
-import * as utils from "./utils";
 import * as effects from "./effects";
+import * as utils from "./utils";
 export * from "./effects";
 export * from "./layers";
 export * from "./template";

package/dist/index.js

@@ -38,8 +38,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const layers_1 = require("./layers");
 const template_1 = require("./template");
-const utils = __importStar(require("./utils"));
 const effects = __importStar(require("./effects"));
+const utils = __importStar(require("./utils"));
 __exportStar(require("./effects"), exports);
 __exportStar(require("./layers"), exports);
 __exportStar(require("./template"), exports);

package/dist/layers/circle-layer.js

@@ -14,14 +14,14 @@ class CircleLayer extends layer_1.Layer {
                 axis: this.options.x,
                 data: data,
                 index: index,
-                templateConfig: templateConfig,
+                templateSize: templateConfig,
             });
         const y = renderContext.offsetY +
             (0, resolve_axis_1.resolveAxis)({
                 axis: this.options.y,
                 data: data,
                 index: index,
-                templateConfig: templateConfig,
+                templateSize: templateConfig,
             });
         const { radius, fill } = this.options;
         const context = renderContext.ctx;

package/dist/layers/group-layer.js

@@ -14,13 +14,13 @@ class GroupLayer extends layer_1.Layer {
             axis: (_a = this.options.x) !== null && _a !== void 0 ? _a : 0,
             data: data,
             index: index,
-            templateConfig: templateConfig,
+            templateSize: templateConfig,
         });
         const dy = (0, resolve_axis_1.resolveAxis)({
             axis: (_b = this.options.y) !== null && _b !== void 0 ? _b : 0,
             data: data,
             index: index,
-            templateConfig: templateConfig,
+            templateSize: templateConfig,
         });
         const prevX = ctx.offsetX;
         const prevY = ctx.offsetY;

package/dist/layers/image-layer.d.ts

@@ -1,4 +1,5 @@
 import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
+import { Dimension } from "../utils/resolve-dimension";
 import { Layer, RenderOptions, WhenFunction } from "./layer";
 import { Axis } from "../utils/resolve-axis";
 export type TransformOptions<Data> = {
@@ -17,8 +18,8 @@ export type ImageLayerOptions<Data> = {
     src: string | ImageSrcFunction<Data>;
     x: Axis<Data>;
     y: Axis<Data>;
-    width?: number;
-    height?: number;
+    width?: Dimension<Data>;
+    height?: Dimension<Data>;
     flipX?: boolean;
     flipY?: boolean;
     rotate?: number;

package/dist/layers/image-layer.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageLayer = void 0;
 const canvas_1 = require("@napi-rs/canvas");
+const resolve_dimension_1 = require("../utils/resolve-dimension");
 const layer_1 = require("./layer");
 const resolve_axis_1 = require("../utils/resolve-axis");
 const error_1 = require("../error");
@@ -15,31 +16,68 @@ class ImageLayer extends layer_1.Layer {
             axis: this.options.x,
             data: data,
             index: index,
-            templateConfig: templateConfig,
+            templateSize: templateConfig,
         });
         const localY = (0, resolve_axis_1.resolveAxis)({
             axis: this.options.y,
             data: data,
             index: index,
-            templateConfig: templateConfig,
+            templateSize: templateConfig,
         });
+        const width = this.options.width
+            ? (0, resolve_dimension_1.resolveDimension)({
+                data: data,
+                dimension: this.options.width,
+                index: index,
+                templateSize: templateConfig,
+            })
+            : this.options.width;
+        const height = this.options.height
+            ? (0, resolve_dimension_1.resolveDimension)({
+                data: data,
+                dimension: this.options.height,
+                index: index,
+                templateSize: templateConfig,
+            })
+            : this.options.height;
         const x = renderContext.offsetX + localX;
         const y = renderContext.offsetY + localY;
         const src = this.options.src;
         const resolvedImageSource = typeof src === "string" ? src : src({ data: data, index: index });
         const image = await (0, canvas_1.loadImage)(resolvedImageSource);
-        const localCanvas = (0, canvas_1.createCanvas)(image.width, image.height);
+        let finalWidth;
+        let finalHeight;
+        if (width && height) {
+            finalWidth = width;
+            finalHeight = height;
+        }
+        else if (width) {
+            finalWidth = width;
+            finalHeight = (width / image.width) * image.height;
+        }
+        else if (height) {
+            finalHeight = height;
+            finalWidth = (height / image.height) * image.width;
+        }
+        else {
+            finalWidth = image.width;
+            finalHeight = image.height;
+        }
+        const localCanvas = (0, canvas_1.createCanvas)(finalWidth, finalHeight);
         const localContext = localCanvas.getContext("2d");
         try {
-            localContext.drawImage(image, 0, 0);
-            if (this.options.flipX) {
-                localContext.translate(image.width, 0);
-                localContext.scale(-1, 1);
-            }
-            if (this.options.flipY) {
-                localContext.translate(0, image.height);
-                localContext.scale(1, -1);
+            const hasRotaion = this.options.flipX || this.options.flipY || this.options.rotate !== undefined;
+            if (hasRotaion) {
+                localContext.translate(finalWidth / 2, finalHeight / 2);
+                if (this.options.rotate !== undefined) {
+                    localContext.rotate((this.options.rotate * Math.PI) / 180);
+                }
+                const scaleX = this.options.flipX ? -1 : 1;
+                const scaleY = this.options.flipY ? -1 : 1;
+                localContext.scale(scaleX, scaleY);
+                localContext.translate(-finalWidth / 2, -finalHeight / 2);
             }
+            localContext.drawImage(image, 0, 0, finalWidth, finalHeight);
             if (this.options.rotate !== undefined) {
                 localContext.translate(image.width / 2, image.height / 2);
                 localContext.rotate((this.options.rotate * Math.PI) / 180);
@@ -55,6 +93,7 @@ class ImageLayer extends layer_1.Layer {
                     });
                 }
             }
+            localContext.restore();
             const buffer = localCanvas.toBuffer("image/png");
             const finalImage = await (0, canvas_1.loadImage)(buffer);
             renderContext.ctx.drawImage(finalImage, x, y);

package/dist/layers/line-layer.d.ts

@@ -1,3 +1,4 @@
+import { Dimension } from "../utils/resolve-dimension";
 import { Layer, RenderOptions, WhenFunction } from "./layer";
 import { Axis } from "../utils/resolve-axis";
 export type LineLayerOptions<Data> = {
@@ -10,7 +11,7 @@ export type LineLayerOptions<Data> = {
         y: Axis<Data>;
     };
     color: string;
-    width: number;
+    width: Dimension<Data>;
     when?: WhenFunction<Data>;
 };
 export declare class LineLayer<Data> extends Layer<Data> {

package/dist/layers/line-layer.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LineLayer = void 0;
+const resolve_dimension_1 = require("../utils/resolve-dimension");
 const layer_1 = require("./layer");
 const resolve_axis_1 = require("../utils/resolve-axis");
 class LineLayer extends layer_1.Layer {
@@ -14,32 +15,38 @@ class LineLayer extends layer_1.Layer {
                 axis: this.options.from.x,
                 data: data,
                 index: index,
-                templateConfig: templateConfig,
+                templateSize: templateConfig,
             });
         const y1 = renderContext.offsetY +
             (0, resolve_axis_1.resolveAxis)({
                 axis: this.options.from.y,
                 data: data,
                 index: index,
-                templateConfig: templateConfig,
+                templateSize: templateConfig,
             });
         const x2 = renderContext.offsetX +
             (0, resolve_axis_1.resolveAxis)({
                 axis: this.options.to.x,
                 data: data,
                 index: index,
-                templateConfig: templateConfig,
+                templateSize: templateConfig,
             });
         const y2 = renderContext.offsetY +
             (0, resolve_axis_1.resolveAxis)({
                 axis: this.options.to.y,
                 data: data,
                 index: index,
-                templateConfig: templateConfig,
+                templateSize: templateConfig,
             });
+        const width = (0, resolve_dimension_1.resolveDimension)({
+            data: data,
+            dimension: this.options.width,
+            index: index,
+            templateSize: templateConfig,
+        });
         const context = renderContext.ctx;
         context.strokeStyle = this.options.color;
-        context.lineWidth = this.options.width;
+        context.lineWidth = width;
         context.lineCap = "round";
         context.beginPath();
         context.moveTo(x1, y1);

package/dist/layers/rectangle-layer.d.ts

@@ -1,10 +1,11 @@
+import { Dimension } from "../utils/resolve-dimension";
 import { Layer, RenderOptions, WhenFunction } from "./layer";
 import { Axis } from "../utils/resolve-axis";
 export type RectangleLayerOptions<Data> = {
     x: Axis<Data>;
     y: Axis<Data>;
-    width: number;
-    height: number;
+    width: Dimension<Data>;
+    height: Dimension<Data>;
     fill: string;
     borderRadius?: number;
     when?: WhenFunction<Data>;

package/dist/layers/rectangle-layer.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RectangleLayer = void 0;
+const resolve_dimension_1 = require("../utils/resolve-dimension");
 const layer_1 = require("./layer");
 const resolve_axis_1 = require("../utils/resolve-axis");
 class RectangleLayer extends layer_1.Layer {
@@ -13,17 +14,29 @@ class RectangleLayer extends layer_1.Layer {
             axis: this.options.x,
             data: data,
             index: index,
-            templateConfig: templateConfig,
+            templateSize: templateConfig,
         });
         const localY = (0, resolve_axis_1.resolveAxis)({
             axis: this.options.y,
             data: data,
             index: index,
-            templateConfig: templateConfig,
+            templateSize: templateConfig,
         });
         const x = renderContext.offsetX + localX;
         const y = renderContext.offsetY + localY;
-        const { width, height, fill, borderRadius } = this.options;
+        const { fill, borderRadius } = this.options;
+        const width = (0, resolve_dimension_1.resolveDimension)({
+            data: data,
+            dimension: this.options.width,
+            index: index,
+            templateSize: templateConfig,
+        });
+        const height = (0, resolve_dimension_1.resolveDimension)({
+            data: data,
+            dimension: this.options.height,
+            index: index,
+            templateSize: templateConfig,
+        });
         const context = renderContext.ctx;
         context.fillStyle = fill;
         if (borderRadius && borderRadius > 0) {

package/dist/layers/repeat-layer.js

@@ -18,13 +18,13 @@ class RepeatLayer extends layer_1.Layer {
                 axis: this.options.x,
                 data: data,
                 index: index,
-                templateConfig: templateConfig,
+                templateSize: templateConfig,
             });
             const dy = (0, resolve_axis_1.resolveAxis)({
                 axis: this.options.y,
                 data: data,
                 index: index,
-                templateConfig: templateConfig,
+                templateSize: templateConfig,
             });
             const prevX = ctx.offsetX;
             const prevY = ctx.offsetY;

package/dist/layers/text-layer.js

@@ -25,13 +25,13 @@ class TextLayer extends layer_1.Layer {
             axis: initialX,
             data: data,
             index: index,
-            templateConfig: templateConfig,
+            templateSize: templateConfig,
         });
         const localY = (0, resolve_axis_1.resolveAxis)({
             axis: initialY,
             data: data,
             index: index,
-            templateConfig: templateConfig,
+            templateSize: templateConfig,
         });
         const x = renderContext.offsetX + localX;
         const y = renderContext.offsetY + localY;

package/dist/template.d.ts

@@ -1,8 +1,10 @@
 import { Canvas } from "@napi-rs/canvas";
 import { Layer } from "./layers/layer";
-export type TemplateConfig = {
+export type TemplateSize = {
     width: number;
     height: number;
+};
+export type TemplateConfig = TemplateSize & {
     fill?: string;
 };
 export type InputTemplateOptions<Data> = {

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

@@ -1,14 +1,12 @@
-import { TemplateConfig } from "../template";
+import { TemplateSize } from "../template";
 export type ComputeAxisOptions<Data> = {
     data: Data;
     index: number;
+    templateSize: TemplateSize;
 };
 export type ComputeAxis<Data> = (options: ComputeAxisOptions<Data>) => number;
 export type Axis<Data> = ComputeAxis<Data> | number;
-export type ResolveAxisOptions<Data> = {
+export type ResolveAxisOptions<Data> = ComputeAxisOptions<Data> & {
     axis: Axis<Data>;
-    data: Data;
-    index: number;
-    templateConfig: TemplateConfig;
 };
 export declare function resolveAxis<Data>({ axis, ...params }: ResolveAxisOptions<Data>): number;

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

@@ -0,0 +1,12 @@
+import { TemplateSize } from "../template";
+export type ComputeDimensionOptions<Data> = {
+    data: Data;
+    index: number;
+    templateSize: TemplateSize;
+};
+export type ComputeDimension<Data> = (options: ComputeDimensionOptions<Data>) => number;
+export type Dimension<Data> = ComputeDimension<Data> | number;
+export type ResolveDimensionOptions<Data> = ComputeDimensionOptions<Data> & {
+    dimension: Dimension<Data>;
+};
+export declare function resolveDimension<Data>({ dimension, ...params }: ResolveDimensionOptions<Data>): number;

package/dist/utils/resolve-dimension.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xpict",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Xpict é uma biblioteca para a geração de imagens padronizadas a partir de modelos declarativos.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",