abstract-image 3.1.0 → 3.2.0

package/src/exporters/__tests__/eps-export-image/test-defs/eps-rectangle.ts

@@ -0,0 +1,46 @@
+import { ExportTestDef } from "../export-test-def";
+import * as AbstractImage from "../../../../../src/index";
+
+const components = [
+  AbstractImage.createRectangle(
+    AbstractImage.createPoint(10, 50),
+    AbstractImage.createPoint(50, 60),
+    AbstractImage.blue,
+    2,
+    AbstractImage.red
+  ),
+];
+const image = AbstractImage.createAbstractImage(
+  AbstractImage.createPoint(0, 0),
+  AbstractImage.createSize(400, 400),
+  AbstractImage.white,
+  components
+);
+
+const eps = AbstractImage.epsExportImage(image);
+
+export const test: ExportTestDef = {
+  name: "eps rectangle",
+  abstractImage: eps,
+  expectedImage: `%!PS-Adobe-3.0 EPSF-3.0
+%%BoundingBox: 0 0 400 400
+/ellipse {7 dict begin
+/endangle exch def
+/startangle exch def
+/yradius exch def
+/xradius exch def
+/yC exch def
+/xC exch def
+/savematrix matrix currentmatrix def
+xC yC translate
+xradius yradius scale
+0 0 1 startangle endangle arc
+savematrix setmatrix
+end
+} def
+1 0 0 setrgbcolor
+10 340 40 10 rectfill
+0 0 1 setrgbcolor
+2 setlinewidth
+10 340 40 10 rectstroke`,
+};

package/src/exporters/__tests__/eps-export-image/test-defs/eps-text-growth-directions.ts

@@ -0,0 +1,138 @@
+import { ExportTestDef } from "../export-test-def";
+import * as AbstractImage from "../../../../../src/index";
+
+const components = [
+  AbstractImage.createText(
+    AbstractImage.createPoint(10, 10),
+    "Hello World",
+    "Arial",
+    12,
+    AbstractImage.black,
+    "bold",
+    0,
+    "center",
+    "left",
+    "up",
+    2,
+    AbstractImage.red,
+    false
+  ),
+  AbstractImage.createText(
+    AbstractImage.createPoint(10, 30),
+    "Hello World",
+    "Arial",
+    12,
+    AbstractImage.black,
+    "bold",
+    0,
+    "center",
+    "uniform",
+    "uniform",
+    2,
+    AbstractImage.red,
+    false
+  ),
+  AbstractImage.createText(
+    AbstractImage.createPoint(10, 50),
+    "Hello World",
+    "Arial",
+    12,
+    AbstractImage.black,
+    "bold",
+    0,
+    "left",
+    "right",
+    "down",
+    2,
+    AbstractImage.red,
+    false
+  ),
+  AbstractImage.createText(
+    AbstractImage.createPoint(10, 70),
+    "Hello World",
+    "Arial",
+    12,
+    AbstractImage.black,
+    "bold",
+    0,
+    "right",
+    "right",
+    "down",
+    2,
+    AbstractImage.red,
+    false
+  ),
+];
+const image = AbstractImage.createAbstractImage(
+  AbstractImage.createPoint(0, 0),
+  AbstractImage.createSize(400, 400),
+  AbstractImage.white,
+  components
+);
+
+const eps = AbstractImage.epsExportImage(image);
+
+export const test: ExportTestDef = {
+  name: "eps text growth directions",
+  abstractImage: eps,
+  expectedImage: `%!PS-Adobe-3.0 EPSF-3.0
+%%BoundingBox: 0 0 400 400
+/ellipse {7 dict begin
+/endangle exch def
+/startangle exch def
+/yradius exch def
+/xradius exch def
+/yC exch def
+/xC exch def
+/savematrix matrix currentmatrix def
+xC yC translate
+xradius yradius scale
+0 0 1 startangle endangle arc
+savematrix setmatrix
+end
+} def
+0 0 0 setrgbcolor
+gsave
+/Arial findfont
+12 scalefont setfont
+10 390 moveto
+(Hello World) stringwidth pop neg
+0
+rmoveto
+0 rotate
+(Hello World) show
+grestore
+0 0 0 setrgbcolor
+gsave
+/Arial findfont
+12 scalefont setfont
+10 370 moveto
+(Hello World) stringwidth pop neg 0.5 mul
+gsave (Hello World) true charpath pathbbox exch pop 3 -1 roll pop sub 0.5 mul grestore
+rmoveto
+0 rotate
+(Hello World) show
+grestore
+0 0 0 setrgbcolor
+gsave
+/Arial findfont
+12 scalefont setfont
+10 350 moveto
+0
+gsave (Hello World) true charpath pathbbox exch pop 3 -1 roll pop sub grestore
+rmoveto
+0 rotate
+(Hello World) show
+grestore
+0 0 0 setrgbcolor
+gsave
+/Arial findfont
+12 scalefont setfont
+10 330 moveto
+0
+gsave (Hello World) true charpath pathbbox exch pop 3 -1 roll pop sub grestore
+rmoveto
+0 rotate
+(Hello World) show
+grestore`,
+};

package/src/exporters/__tests__/eps-export-image/test-defs/eps-text.ts

@@ -0,0 +1,60 @@
+import { ExportTestDef } from "../export-test-def";
+import * as AbstractImage from "../../../../../src/index";
+
+const components = [
+  AbstractImage.createText(
+    AbstractImage.createPoint(10, 10),
+    "Hello World",
+    "Arial",
+    12,
+    AbstractImage.black,
+    "bold",
+    0,
+    "center",
+    "right",
+    "down",
+    2,
+    AbstractImage.red,
+    false
+  ),
+];
+const image = AbstractImage.createAbstractImage(
+  AbstractImage.createPoint(0, 0),
+  AbstractImage.createSize(400, 400),
+  AbstractImage.white,
+  components
+);
+
+const eps = AbstractImage.epsExportImage(image);
+
+export const test: ExportTestDef = {
+  name: "eps text",
+  abstractImage: eps,
+  expectedImage: `%!PS-Adobe-3.0 EPSF-3.0
+%%BoundingBox: 0 0 400 400
+/ellipse {7 dict begin
+/endangle exch def
+/startangle exch def
+/yradius exch def
+/xradius exch def
+/yC exch def
+/xC exch def
+/savematrix matrix currentmatrix def
+xC yC translate
+xradius yradius scale
+0 0 1 startangle endangle arc
+savematrix setmatrix
+end
+} def
+0 0 0 setrgbcolor
+gsave
+/Arial findfont
+12 scalefont setfont
+10 390 moveto
+0
+gsave (Hello World) true charpath pathbbox exch pop 3 -1 roll pop sub grestore
+rmoveto
+0 rotate
+(Hello World) show
+grestore`,
+};

package/src/exporters/__tests__/exception/png-unsupported.test.tsx

@@ -0,0 +1,25 @@
+import * as AbstractImage from "../../../../src/index";
+
+const pngEncoded =
+  "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";
+
+const binaryImage = AbstractImage.createBinaryImage(
+  AbstractImage.createPoint(0, 0),
+  AbstractImage.createPoint(400, 400),
+  "png",
+  Buffer.from(pngEncoded, "base64")
+);
+const abstractImage = AbstractImage.createAbstractImage(
+  AbstractImage.createPoint(0, 0),
+  AbstractImage.createSize(400, 400),
+  AbstractImage.white,
+  [binaryImage, binaryImage]
+);
+
+describe("svg text unknown direction", () => {
+  it("should throw an exception", () => {
+    expect(() => {
+      const png = AbstractImage.createPNG(abstractImage);
+    }).toThrow("Not supported!");
+  });
+});

package/src/exporters/__tests__/exception/react-svg-direction-exception.test.tsx

@@ -0,0 +1,65 @@
+import * as AbstractImage from "../../../../src/index";
+
+describe("react svg text unknown direction", () => {
+  it("should throw an exception", () => {
+    expect(() => {
+      const components = [
+        AbstractImage.createText(
+          AbstractImage.createPoint(10, 10),
+          "Hello World",
+          "Arial",
+          12,
+          AbstractImage.black,
+          "bold",
+          0,
+          "center",
+          "down",
+          "down",
+          2,
+          AbstractImage.red,
+          false
+        ),
+      ];
+      const image = AbstractImage.createAbstractImage(
+        AbstractImage.createPoint(0, 0),
+        AbstractImage.createSize(400, 400),
+        AbstractImage.white,
+        components
+      );
+
+      const svg = AbstractImage.createReactSvg(image);
+    }).toThrow("Unknown text alignment down");
+  });
+});
+
+describe("react svg text unknown direction", () => {
+  it("should throw an exception", () => {
+    expect(() => {
+      const components = [
+        AbstractImage.createText(
+          AbstractImage.createPoint(10, 10),
+          "Hello World",
+          "Arial",
+          12,
+          AbstractImage.black,
+          "bold",
+          0,
+          "center",
+          "right",
+          "right",
+          2,
+          AbstractImage.red,
+          false
+        ),
+      ];
+      const image = AbstractImage.createAbstractImage(
+        AbstractImage.createPoint(0, 0),
+        AbstractImage.createSize(400, 400),
+        AbstractImage.white,
+        components
+      );
+
+      const svg = AbstractImage.createReactSvg(image);
+    }).toThrow("Unknown text alignment right");
+  });
+});

package/src/exporters/__tests__/exception/svg-direction-exception.test.tsx

@@ -0,0 +1,65 @@
+import * as AbstractImage from "../../../../src/index";
+
+describe("svg text unknown direction", () => {
+  it("should throw an exception", () => {
+    expect(() => {
+      const components = [
+        AbstractImage.createText(
+          AbstractImage.createPoint(10, 10),
+          "Hello World",
+          "Arial",
+          12,
+          AbstractImage.black,
+          "bold",
+          0,
+          "center",
+          "down",
+          "down",
+          2,
+          AbstractImage.red,
+          false
+        ),
+      ];
+      const image = AbstractImage.createAbstractImage(
+        AbstractImage.createPoint(0, 0),
+        AbstractImage.createSize(400, 400),
+        AbstractImage.white,
+        components
+      );
+
+      const svg = AbstractImage.createSVG(image);
+    }).toThrow("Unknown text alignment down");
+  });
+});
+
+describe("svg text unknown direction", () => {
+  it("should throw an exception", () => {
+    expect(() => {
+      const components = [
+        AbstractImage.createText(
+          AbstractImage.createPoint(10, 10),
+          "Hello World",
+          "Arial",
+          12,
+          AbstractImage.black,
+          "bold",
+          0,
+          "center",
+          "right",
+          "right",
+          2,
+          AbstractImage.red,
+          false
+        ),
+      ];
+      const image = AbstractImage.createAbstractImage(
+        AbstractImage.createPoint(0, 0),
+        AbstractImage.createSize(400, 400),
+        AbstractImage.white,
+        components
+      );
+
+      const svg = AbstractImage.createSVG(image);
+    }).toThrow("Unknown text alignment right");
+  });
+});

package/src/exporters/__tests__/png-export-image/export-test-def.ts

@@ -0,0 +1,11 @@
+/**
+ * Defines a data-type that represents a single test for the Docx render function
+ */
+
+export type ExportTestDef = {
+  readonly name: string;
+  readonly only?: boolean;
+  readonly skip?: boolean;
+  readonly abstractImage: string;
+  readonly expectedImage: string;
+};

package/src/exporters/__tests__/png-export-image/export.test.tsx

@@ -0,0 +1,13 @@
+import path from "path";
+import { loadTests, onlySkip } from "@abstract-visuals/test-utils";
+import { ExportTestDef } from "./export-test-def";
+
+export const tests = loadTests<ExportTestDef>(path.join(__dirname, "test-defs/"));
+
+describe("png-export-image", () => {
+  onlySkip(tests).forEach((item) => {
+    test(item.name, async () => {
+      expect(item.abstractImage).toEqual(item.expectedImage);
+    });
+  });
+});

package/src/exporters/__tests__/png-export-image/test-defs/png-createPNG.tsx

@@ -0,0 +1,26 @@
+import { ExportTestDef } from "../export-test-def";
+import * as AbstractImage from "../../../../../src/index";
+
+const pngEncoded =
+  "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";
+
+const binaryImage = AbstractImage.createBinaryImage(
+  AbstractImage.createPoint(0, 0),
+  AbstractImage.createPoint(400, 400),
+  "png",
+  Buffer.from(pngEncoded, "base64")
+);
+const abstractImage = AbstractImage.createAbstractImage(
+  AbstractImage.createPoint(0, 0),
+  AbstractImage.createSize(400, 400),
+  AbstractImage.white,
+  [binaryImage]
+);
+
+const png = AbstractImage.createPNG(abstractImage);
+
+export const test: ExportTestDef = {
+  name: "png createPNG",
+  abstractImage: Buffer.from(png).toString("base64"),
+  expectedImage: pngEncoded,
+};

package/src/exporters/__tests__/react-svg-export-image/export-test-def.tsx

@@ -0,0 +1,13 @@
+/**
+ * Defines a data-type that represents a single test for the Docx render function
+ */
+
+import * as React from "react";
+
+export type ExportTestDef = {
+  readonly name: string;
+  readonly only?: boolean;
+  readonly skip?: boolean;
+  readonly abstractImage: React.ReactElement<{}, string | React.JSXElementConstructor<any>> | string;
+  readonly expectedSerializedJsx: string;
+};

package/src/exporters/__tests__/react-svg-export-image/export.test.tsx

@@ -0,0 +1,13 @@
+import path from "path";
+import { loadTests, onlySkip } from "@abstract-visuals/test-utils";
+import { ExportTestDef } from "./export-test-def";
+
+export const tests = loadTests<ExportTestDef>(path.join(__dirname, "test-defs/"));
+
+describe("react-svg-export-image", () => {
+  onlySkip(tests).forEach((item) => {
+    test(item.name, async () => {
+      expect(JSON.stringify(item.abstractImage)).toEqual(item.expectedSerializedJsx);
+    });
+  });
+});

package/src/exporters/__tests__/react-svg-export-image/test-defs/react-svg-binary-png.tsx

@@ -0,0 +1,27 @@
+import { ExportTestDef } from "../export-test-def";
+import * as AbstractImage from "../../../../../src/index";
+
+const pngEncoded =
+  "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";
+
+const binaryImage = AbstractImage.createBinaryImage(
+  AbstractImage.createPoint(0, 0),
+  AbstractImage.createPoint(400, 400),
+  "png",
+  Buffer.from(pngEncoded, "base64")
+);
+const abstractImage = AbstractImage.createAbstractImage(
+  AbstractImage.createPoint(0, 0),
+  AbstractImage.createSize(400, 400),
+  AbstractImage.white,
+  [binaryImage]
+);
+
+const svg = AbstractImage.createReactSvg(abstractImage);
+
+export const test: ExportTestDef = {
+  name: "react svg binary png",
+  abstractImage: svg,
+  expectedSerializedJsx:
+    '{"type":"svg","key":null,"ref":null,"props":{"id":"ai_root","width":"400px","height":"400px","viewBox":"0 0 400 400","children":[]},"_owner":null,"_store":{}}',
+};