abstract-image 11.2.13 → 11.2.17

package/lib/dynamic-image/schema.js

@@ -0,0 +1,239 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.baseSchema = void 0;
+exports.baseSchema = {
+    elements: {
+        AbstractImage: {
+            description: "Root container — defines the image canvas and its coordinate system.",
+            props: {
+                width: {
+                    type: "number",
+                    required: true,
+                    description: "Total width of the image canvas (in px).",
+                },
+                height: {
+                    type: "number",
+                    required: true,
+                    description: "Total height of the image canvas (in px).",
+                },
+            },
+            allowedChildren: ["Image", "Text", "Rectangle", "Ellipse", "Line", "Polyline", "Polygon", "Group"],
+        },
+        Group: {
+            description: "Groups elements together.",
+            props: {},
+            allowedChildren: ["Image", "Text", "Rectangle", "Ellipse", "Line", "Polyline", "Polygon", "Group"],
+        },
+        Image: {
+            description: "Displays a raster image.",
+            props: {
+                src: {
+                    type: "string",
+                    required: true,
+                    description: "Source of the image (URL or asset ID).",
+                },
+                x: {
+                    type: "number",
+                    description: "X position in pixels.",
+                },
+                y: {
+                    type: "number",
+                    description: "Y position in pixels.",
+                },
+                width: {
+                    type: "number",
+                    description: "Display width in pixels.",
+                },
+                height: {
+                    type: "number",
+                    description: "Display height in pixels.",
+                },
+            },
+            allowedChildren: [],
+        },
+        Ellipse: {
+            description: "Draws an ellipse using x, y, width, and height.",
+            props: {
+                x: {
+                    type: "number",
+                    description: "X coordinate of the top-left of the ellipse box.",
+                },
+                y: {
+                    type: "number",
+                    description: "Y coordinate of the top-left of the ellipse box.",
+                },
+                width: {
+                    type: "number",
+                    description: "Box width.",
+                },
+                height: {
+                    type: "number",
+                    description: "Box height.",
+                },
+                stroke: {
+                    type: "string",
+                    format: "color",
+                    description: "Stroke color (CSS color string).",
+                },
+                strokeWidth: {
+                    type: "number",
+                    description: "Stroke width in pixels.",
+                },
+                fill: {
+                    type: "string",
+                    format: "color",
+                    description: "Fill color (inside the ellipse).",
+                },
+            },
+            allowedChildren: [],
+        },
+        Line: {
+            description: "Draws a straight line between two points.",
+            props: {
+                x1: {
+                    type: "number",
+                    description: "X coordinate of the start point.",
+                },
+                y1: {
+                    type: "number",
+                    description: "Y coordinate of the start point.",
+                },
+                x2: {
+                    type: "number",
+                    description: "X coordinate of the end point.",
+                },
+                y2: {
+                    type: "number",
+                    description: "Y coordinate of the end point.",
+                },
+                stroke: {
+                    type: "string",
+                    format: "color",
+                    description: "Stroke color of the line.",
+                },
+                strokeWidth: {
+                    type: "number",
+                    description: "Width of the stroke in px.",
+                },
+            },
+            allowedChildren: [],
+        },
+        Polyline: {
+            description: "A connected set of line segments (open shape).",
+            props: {
+                points: {
+                    type: "string",
+                    required: true,
+                    description: "List of points: 'x0,y0 x1,y1 x2,y2'.",
+                },
+                stroke: {
+                    type: "string",
+                    format: "color",
+                    description: "Stroke color.",
+                },
+                strokeWidth: {
+                    type: "number",
+                    description: "Stroke width in px.",
+                },
+            },
+            allowedChildren: [],
+        },
+        Polygon: {
+            description: "A closed polygon shape.",
+            props: {
+                points: {
+                    type: "string",
+                    required: true,
+                    description: "List of vertex points: 'x0,y0 x1,y1 ...'.",
+                },
+                stroke: {
+                    type: "string",
+                    format: "color",
+                    description: "Stroke color.",
+                },
+                strokeWidth: {
+                    type: "number",
+                    description: "Stroke width in px.",
+                },
+                fill: {
+                    type: "string",
+                    format: "color",
+                    description: "Fill color of the polygon.",
+                },
+            },
+            allowedChildren: [],
+        },
+        Rectangle: {
+            description: "Draws a rectangle, optionally with rounded corners.",
+            props: {
+                x: {
+                    type: "number",
+                    description: "X position of the rectangle (top-left).",
+                },
+                y: {
+                    type: "number",
+                    description: "Y position of the rectangle (top-left).",
+                },
+                width: {
+                    type: "number",
+                    description: "Rectangle width in px.",
+                },
+                height: {
+                    type: "number",
+                    description: "Rectangle height in px.",
+                },
+                stroke: {
+                    type: "string",
+                    format: "color",
+                    description: "Stroke color.",
+                },
+                strokeWidth: {
+                    type: "number",
+                    description: "Stroke width in px.",
+                },
+                fill: {
+                    type: "string",
+                    format: "color",
+                    description: "Fill color of the rectangle.",
+                },
+                radius: {
+                    type: "number",
+                    description: "Corner radius in px (uniform).",
+                },
+            },
+            allowedChildren: [],
+        },
+        Text: {
+            description: "Renders a text element.",
+            props: {
+                x: {
+                    type: "number",
+                    description: "X position of the text anchor.",
+                },
+                y: {
+                    type: "number",
+                    description: "Y position of the text baseline.",
+                },
+                fontFamily: {
+                    type: "string",
+                    description: "Font family, e.g. 'Inter, system-ui'.",
+                },
+                fontSize: {
+                    type: "number",
+                    description: "Font size in pixels.",
+                },
+                fontWeight: {
+                    type: "string",
+                    description: "Font weight, e.g. 'bold', '700'.",
+                },
+                fill: {
+                    type: "string",
+                    format: "color",
+                    description: "Fill color (text color).",
+                },
+            },
+            allowedChildren: [],
+        },
+    },
+};
+//# sourceMappingURL=schema.js.map

package/lib/dynamic-image/schema.js.map

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

package/lib/dynamic-image/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function generateDataSchema(data: Record<string, unknown>): Record<string, any>;
+//# sourceMappingURL=utils.d.ts.map

package/lib/dynamic-image/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/dynamic-image/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAQrF"}

package/lib/dynamic-image/utils.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateDataSchema = generateDataSchema;
+function generateDataSchema(data) {
+    const schema = {};
+    for (const [key, value] of Object.entries(data)) {
+        schema[key] = inferPropertySchema(value);
+    }
+    return schema;
+}
+function inferPropertySchema(value) {
+    if (value === null || value === undefined) {
+        return {
+            type: "string",
+        };
+    }
+    if (typeof value === "string") {
+        return {
+            type: "string",
+        };
+    }
+    if (typeof value === "number") {
+        return {
+            type: "number",
+        };
+    }
+    if (typeof value === "boolean") {
+        return {
+            type: "boolean",
+        };
+    }
+    if (typeof value === "function") {
+        return {
+            type: "function",
+        };
+    }
+    if (Array.isArray(value)) {
+        const itemSchema = value.length > 0 ? inferPropertySchema(value[0]) : { type: "string" };
+        return {
+            type: "array",
+            shape: itemSchema,
+        };
+    }
+    if (typeof value === "object") {
+        const shape = {};
+        for (const [k, v] of Object.entries(value)) {
+            shape[k] = inferPropertySchema(v);
+        }
+        return {
+            type: "object",
+            shape,
+        };
+    }
+    return { type: "string" };
+}
+//# sourceMappingURL=utils.js.map

package/lib/dynamic-image/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/dynamic-image/utils.ts"],"names":[],"mappings":";;AAAA,gDAQC;AARD,SAAgB,kBAAkB,CAAC,IAA6B;IAC9D,MAAM,MAAM,GAAwB,EAAE,CAAC;IAEvC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QAChD,MAAM,CAAC,GAAG,CAAC,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAS,mBAAmB,CAAC,KAAc;IACzC,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QAC1C,OAAO;YACL,IAAI,EAAE,QAAQ;SACf,CAAC;IACJ,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO;YACL,IAAI,EAAE,QAAQ;SACf,CAAC;IACJ,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO;YACL,IAAI,EAAE,QAAQ;SACf,CAAC;IACJ,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;QAC/B,OAAO;YACL,IAAI,EAAE,SAAS;SAChB,CAAC;IACJ,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE,CAAC;QAChC,OAAO;YACL,IAAI,EAAE,UAAU;SACjB,CAAC;IACJ,CAAC;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;QACzF,OAAO;YACL,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,UAAU;SAClB,CAAC;IACJ,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,MAAM,KAAK,GAAwB,EAAE,CAAC;QACtC,KAAK,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YAC3C,KAAK,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAC;QACpC,CAAC;QACD,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,KAAK;SACN,CAAC;IACJ,CAAC;IAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;AAC5B,CAAC"}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "abstract-image",
-  "version": "11.2.13",
+  "version": "11.2.17",
   "description": "Dynamically create images using code or JSX and render to any format",
   "repository": "https://github.com/dividab/abstract-visuals/tree/master/packages/abstract-image",
   "main": "lib/index.js",
   "types": "lib/index",
+  "sideEffects": false,
   "license": "MIT",
   "exports": {
     ".": "./lib/index.js"
@@ -22,7 +23,8 @@
     "base64-js": "^1.5.1",
     "fast-xml-parser": "^4.5.0",
     "handlebars": "4.7.8",
-    "handlebars-xml": "^0.1.3"
+    "handlebars-xml": "^0.1.6",
+    "jsxpression": "^0.1.11"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <20.0.0"
@@ -34,5 +36,5 @@
     "vite": "^6.0.1",
     "vitest": "^2.1.6"
   },
-  "gitHead": "db19d1efd6eeec69dcacb3a82f51da3fa14f69ef"
+  "gitHead": "07369c92f3faed8f1adfc92b37ff7f8a040cf5e9"
 }

package/src/dynamic-image/components.ts

@@ -0,0 +1,163 @@
+import {
+  AbstractFontWeight,
+  AbstractImage,
+  BinaryImage,
+  black,
+  createBinaryImage,
+  createEllipse,
+  createGroup,
+  createLine,
+  createPolygon,
+  createPolyLine,
+  createRectangle,
+  createText,
+  Ellipse,
+  fromString2,
+  Group,
+  Line,
+  Point,
+  Polygon,
+  PolyLine,
+  Rectangle,
+  solidLine,
+  Text,
+  transparent,
+  white,
+} from "../model";
+
+export const createComponents = (mutableImageUrls: Array<string>): Record<string, (...args: any[]) => any> => ({
+  AbstractImage: (props): AbstractImage => ({
+    topLeft: { x: 0, y: 0 },
+    size: { width: props.width ?? 800, height: props.height ?? 600 },
+    backgroundColor: transparent,
+    components: (props.children ?? []).flat().filter(Boolean),
+  }),
+  Group: (props): Group => {
+    return createGroup("", (props.children ?? []).flat().filter(Boolean));
+  },
+  Image: (props): BinaryImage => {
+    mutableImageUrls.push(props.src);
+    const x = props.x ?? 0;
+    const y = props.y ?? 0;
+    const width = props.width ?? 100;
+    const height = props.height ?? 100;
+    return createBinaryImage(
+      { x, y },
+      { x: x + width, y: y + height },
+      "png",
+      { type: "url", url: props.src },
+      undefined
+    );
+  },
+  Rectangle: (props): Rectangle => {
+    const x = props.x ?? 0;
+    const y = props.y ?? 0;
+    const width = props.width ?? 100;
+    const height = props.height ?? 100;
+    return createRectangle(
+      { x, y },
+      { x: x + width, y: y + height },
+      fromString2(props.stroke ?? "#000", black),
+      props.strokeWidth ?? 1,
+      fromString2(props.fill ?? "#fff", white),
+      undefined,
+      solidLine,
+      props.radius ? { x: props.radius, y: props.radius } : undefined
+    );
+  },
+  Ellipse: (props): Ellipse => {
+    const x = props.x ?? 0;
+    const y = props.y ?? 0;
+    const width = props.width ?? 100;
+    const height = props.height ?? 100;
+    return createEllipse(
+      { x, y },
+      { x: x + width, y: y + height },
+      fromString2(props.stroke ?? "#000", black),
+      props.strokeWidth ?? 1,
+      fromString2(props.fill ?? "#fff", white),
+      undefined,
+      solidLine
+    );
+  },
+  Line: (props): Line => {
+    return createLine(
+      { x: props.x1 ?? 0, y: props.y1 ?? 0 },
+      { x: props.x2 ?? 100, y: props.y2 ?? 0 },
+      fromString2(props.stroke ?? "#000", black),
+      props.strokeWidth ?? 1,
+      undefined,
+      solidLine
+    );
+  },
+  Polyline: (props): PolyLine => {
+    return createPolyLine(
+      parsePointsString(props.points),
+      fromString2(props.stroke ?? "#000", black),
+      props.strokeWidth ?? 1,
+      undefined,
+      solidLine
+    );
+  },
+  Polygon: (props): Polygon => {
+    return createPolygon(
+      parsePointsString(props.points),
+      fromString2(props.stroke ?? "#000", black),
+      props.strokeWidth ?? 1,
+      fromString2(props.fill ?? "#fff", white),
+      undefined,
+      solidLine
+    );
+  },
+  Text: (props): Text => {
+    const fontWeight = mapFontWeight(props.fontWeight);
+    const children = props.children ?? [];
+    const filteredChildren = Array.isArray(children)
+      ? children.flat().filter((c: any) => c !== null && c !== undefined)
+      : [];
+    const text = filteredChildren.length > 0 ? String(filteredChildren[0]) : "";
+    return createText(
+      { x: props.x ?? 0, y: props.y ?? 0 },
+      text,
+      props.fontFamily ?? "",
+      props.fontSize ?? 12,
+      fromString2(props.fill ?? "#000", black),
+      fontWeight,
+      0, // clockwiseRotationDegrees
+      "left", // textAlignment
+      "right", // horizontalGrowthDirection
+      "down", // verticalGrowthDirection
+      0, // strokeThickness
+      transparent, // strokeColor
+      false, // italic
+      undefined // id
+    );
+  },
+});
+
+function mapFontWeight(weight?: string | number): AbstractFontWeight {
+  if (weight === undefined) {
+    return "normal";
+  }
+
+  if (typeof weight === "string") {
+    switch (weight.toLowerCase()) {
+      case "bold":
+      case "bolder":
+        return "bold";
+      case "lighter":
+      case "normal":
+      default:
+        return "normal";
+    }
+  }
+
+  return weight >= 600 ? "bold" : "normal";
+}
+
+function parsePointsString(pointsString: string): Array<Point> {
+  return pointsString.split(" ").map((tuple): Point => {
+    const [xString, yString] = tuple.split(",");
+    return { x: Number(xString ?? 0), y: Number(yString ?? 0) };
+  });
+}