abstract-image 3.1.3 → 3.2.3

package/src/exporters/__tests__/react-svg-export-image/test-defs/react-svg-text-growth-directions.tsx

@@ -1,76 +1,80 @@
-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
-  ),
-  AbstractImage.createText(
-    AbstractImage.createPoint(10, 30),
-    "Hello World",
-    "Arial",
-    12,
-    AbstractImage.black,
-    "bold",
-    0,
-    "center",
-    "uniform",
-    "uniform",
-    2,
-    AbstractImage.red
-  ),
-  AbstractImage.createText(
-    AbstractImage.createPoint(10, 50),
-    "Hello World",
-    "Arial",
-    12,
-    AbstractImage.black,
-    "bold",
-    0,
-    "left",
-    "right",
-    "down",
-    2,
-    AbstractImage.red
-  ),
-  AbstractImage.createText(
-    AbstractImage.createPoint(10, 70),
-    "Hello World",
-    "Arial",
-    12,
-    AbstractImage.black,
-    "bold",
-    0,
-    "right",
-    "right",
-    "down",
-    2,
-    AbstractImage.red
-  ),
-];
-const image = AbstractImage.createAbstractImage(
-  AbstractImage.createPoint(0, 0),
-  AbstractImage.createSize(400, 400),
-  AbstractImage.white,
-  components
-);
-
-const svg = AbstractImage.createReactSvg(image);
-
-export const test: ExportTestDef = {
-  name: "react svg text growth directions",
-  abstractImage: svg,
-  expectedSerializedJsx:
-    '{"type":"svg","key":null,"ref":null,"props":{"id":"ai_root","width":"400px","height":"400px","viewBox":"0 0 400 400","children":[{"type":"text","key":"0shadow","ref":null,"props":{"style":{"textAnchor":"end","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","stroke":"rgb(255,0,0)","strokeWidth":2},"transform":"rotate(0 10 10)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":10,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"0","ref":null,"props":{"style":{"textAnchor":"end","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","fill":"rgb(0,0,0)"},"transform":"rotate(0 10 10)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":10,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"1shadow","ref":null,"props":{"style":{"textAnchor":"middle","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","stroke":"rgb(255,0,0)","strokeWidth":2},"transform":"rotate(0 10 30)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":36,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"1","ref":null,"props":{"style":{"textAnchor":"middle","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","fill":"rgb(0,0,0)"},"transform":"rotate(0 10 30)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":36,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"2shadow","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","stroke":"rgb(255,0,0)","strokeWidth":2},"transform":"rotate(0 10 50)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":62,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"2","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","fill":"rgb(0,0,0)"},"transform":"rotate(0 10 50)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":62,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"3shadow","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","stroke":"rgb(255,0,0)","strokeWidth":2},"transform":"rotate(0 10 70)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":82,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"3","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","fill":"rgb(0,0,0)"},"transform":"rotate(0 10 70)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":82,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}',
-};
+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 svg = AbstractImage.createReactSvg(image);
+
+export const test: ExportTestDef = {
+  name: "react svg text growth directions",
+  abstractImage: svg,
+  expectedSerializedJsx:
+    '{"type":"svg","key":null,"ref":null,"props":{"id":"ai_root","width":"400px","height":"400px","viewBox":"0 0 400 400","children":[{"type":"text","key":"0shadow","ref":null,"props":{"style":{"textAnchor":"end","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","stroke":"rgb(255,0,0)","strokeWidth":2},"transform":"rotate(0 10 10)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":10,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"0","ref":null,"props":{"style":{"textAnchor":"end","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","fill":"rgb(0,0,0)"},"transform":"rotate(0 10 10)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":10,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"1shadow","ref":null,"props":{"style":{"textAnchor":"middle","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","stroke":"rgb(255,0,0)","strokeWidth":2},"transform":"rotate(0 10 30)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":36,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"1","ref":null,"props":{"style":{"textAnchor":"middle","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","fill":"rgb(0,0,0)"},"transform":"rotate(0 10 30)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":36,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"2shadow","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","stroke":"rgb(255,0,0)","strokeWidth":2},"transform":"rotate(0 10 50)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":62,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"2","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","fill":"rgb(0,0,0)"},"transform":"rotate(0 10 50)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":62,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"3shadow","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","stroke":"rgb(255,0,0)","strokeWidth":2},"transform":"rotate(0 10 70)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":82,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"3","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","fill":"rgb(0,0,0)"},"transform":"rotate(0 10 70)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":82,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}',
+};

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

@@ -0,0 +1,65 @@
+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,
+    "normal",
+    0,
+    "center",
+    "right",
+    "down",
+    2,
+    AbstractImage.red,
+    true
+  ),
+  AbstractImage.createText(
+    AbstractImage.createPoint(20, 20),
+    "Hello World",
+    "Arial",
+    12,
+    AbstractImage.black,
+    "bold",
+    0,
+    "center",
+    "right",
+    "down",
+    2,
+    AbstractImage.red,
+    true
+  ),
+  AbstractImage.createText(
+    AbstractImage.createPoint(30, 30),
+    "Hello World",
+    "Arial",
+    12,
+    AbstractImage.black,
+    "mediumBold",
+    0,
+    "center",
+    "right",
+    "down",
+    2,
+    AbstractImage.red,
+    true
+  ),
+];
+const image = AbstractImage.createAbstractImage(
+  AbstractImage.createPoint(0, 0),
+  AbstractImage.createSize(400, 400),
+  AbstractImage.white,
+  components
+);
+
+const svg = AbstractImage.createReactSvg(image);
+
+export const test: ExportTestDef = {
+  name: "react svg text bold",
+  abstractImage: svg,
+  expectedSerializedJsx:
+    '{"type":"svg","key":null,"ref":null,"props":{"id":"ai_root","width":"400px","height":"400px","viewBox":"0 0 400 400","children":[{"type":"text","key":"0shadow","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"normal","fontFamily":"Arial","stroke":"rgb(255,0,0)","strokeWidth":2},"transform":"rotate(0 10 10)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":22,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"0","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"normal","fontFamily":"Arial","fill":"rgb(0,0,0)"},"transform":"rotate(0 10 10)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":22,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"1shadow","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","stroke":"rgb(255,0,0)","strokeWidth":2},"transform":"rotate(0 20 20)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":20,"y":32,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"1","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","fill":"rgb(0,0,0)"},"transform":"rotate(0 20 20)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":20,"y":32,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"2shadow","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","stroke":"rgb(255,0,0)","strokeWidth":2},"transform":"rotate(0 30 30)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":30,"y":42,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"2","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","fill":"rgb(0,0,0)"},"transform":"rotate(0 30 30)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":30,"y":42,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}',
+};

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

@@ -1,34 +1,35 @@
-import { ExportTestDef } from "../export-test-def";
-import * as AbstractImage from "../../../../../src/index";
-
-const components = [
-  AbstractImage.createText(
-    AbstractImage.createPoint(10, 10),
-    "Hello <sub>World</sub>",
-    "Arial",
-    12,
-    AbstractImage.black,
-    "bold",
-    0,
-    "center",
-    "right",
-    "down",
-    2,
-    AbstractImage.red
-  ),
-];
-const image = AbstractImage.createAbstractImage(
-  AbstractImage.createPoint(0, 0),
-  AbstractImage.createSize(400, 400),
-  AbstractImage.white,
-  components
-);
-
-const svg = AbstractImage.createReactSvg(image);
-
-export const test: ExportTestDef = {
-  name: "react svg text sub",
-  abstractImage: svg,
-  expectedSerializedJsx:
-    '{"type":"svg","key":null,"ref":null,"props":{"id":"ai_root","width":"400px","height":"400px","viewBox":"0 0 400 400","children":[{"type":"text","key":"0shadow","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","stroke":"rgb(255,0,0)","strokeWidth":2},"transform":"rotate(0 10 10)","children":[{"type":"tspan","key":"Hello <sub>World</sub>","ref":null,"props":{"x":10,"y":22,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello "},"_owner":null,"_store":{}},{"type":"tspan","key":"1","ref":null,"props":{"baselineShift":"sub","style":{"fontSize":"9.600000000000001px"},"children":"World"},"_owner":null,"_store":{}},{"type":"tspan","key":"2","ref":null,"props":{"children":""},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"0","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","fill":"rgb(0,0,0)"},"transform":"rotate(0 10 10)","children":[{"type":"tspan","key":"Hello <sub>World</sub>","ref":null,"props":{"x":10,"y":22,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello "},"_owner":null,"_store":{}},{"type":"tspan","key":"1","ref":null,"props":{"baselineShift":"sub","style":{"fontSize":"9.600000000000001px"},"children":"World"},"_owner":null,"_store":{}},{"type":"tspan","key":"2","ref":null,"props":{"children":""},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}',
-};
+import { ExportTestDef } from "../export-test-def";
+import * as AbstractImage from "../../../../../src/index";
+
+const components = [
+  AbstractImage.createText(
+    AbstractImage.createPoint(10, 10),
+    "Hello <sub>World</sub>",
+    "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 svg = AbstractImage.createReactSvg(image);
+
+export const test: ExportTestDef = {
+  name: "react svg text sub",
+  abstractImage: svg,
+  expectedSerializedJsx:
+    '{"type":"svg","key":null,"ref":null,"props":{"id":"ai_root","width":"400px","height":"400px","viewBox":"0 0 400 400","children":[{"type":"text","key":"0shadow","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","stroke":"rgb(255,0,0)","strokeWidth":2},"transform":"rotate(0 10 10)","children":[{"type":"tspan","key":"Hello <sub>World</sub>","ref":null,"props":{"x":10,"y":22,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello "},"_owner":null,"_store":{}},{"type":"tspan","key":"1","ref":null,"props":{"baselineShift":"sub","style":{"fontSize":"9.600000000000001px"},"children":"World"},"_owner":null,"_store":{}},{"type":"tspan","key":"2","ref":null,"props":{"children":""},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"0","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","fill":"rgb(0,0,0)"},"transform":"rotate(0 10 10)","children":[{"type":"tspan","key":"Hello <sub>World</sub>","ref":null,"props":{"x":10,"y":22,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello "},"_owner":null,"_store":{}},{"type":"tspan","key":"1","ref":null,"props":{"baselineShift":"sub","style":{"fontSize":"9.600000000000001px"},"children":"World"},"_owner":null,"_store":{}},{"type":"tspan","key":"2","ref":null,"props":{"children":""},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}',
+};

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

@@ -1,34 +1,35 @@
-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
-  ),
-];
-const image = AbstractImage.createAbstractImage(
-  AbstractImage.createPoint(0, 0),
-  AbstractImage.createSize(400, 400),
-  AbstractImage.white,
-  components
-);
-
-const svg = AbstractImage.createReactSvg(image);
-
-export const test: ExportTestDef = {
-  name: "react svg text",
-  abstractImage: svg,
-  expectedSerializedJsx:
-    '{"type":"svg","key":null,"ref":null,"props":{"id":"ai_root","width":"400px","height":"400px","viewBox":"0 0 400 400","children":[{"type":"text","key":"0shadow","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","stroke":"rgb(255,0,0)","strokeWidth":2},"transform":"rotate(0 10 10)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":22,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"0","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"bold","fontFamily":"Arial","fill":"rgb(0,0,0)"},"transform":"rotate(0 10 10)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":22,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}',
-};
+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,
+    "normal",
+    0,
+    "center",
+    "right",
+    "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);
+
+export const test: ExportTestDef = {
+  name: "react svg text",
+  abstractImage: svg,
+  expectedSerializedJsx:
+    '{"type":"svg","key":null,"ref":null,"props":{"id":"ai_root","width":"400px","height":"400px","viewBox":"0 0 400 400","children":[{"type":"text","key":"0shadow","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"normal","fontFamily":"Arial","stroke":"rgb(255,0,0)","strokeWidth":2},"transform":"rotate(0 10 10)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":22,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}},{"type":"text","key":"0","ref":null,"props":{"style":{"textAnchor":"start","fontSize":"12px","fontWeight":"normal","fontFamily":"Arial","fill":"rgb(0,0,0)"},"transform":"rotate(0 10 10)","children":[{"type":"tspan","key":"Hello World","ref":null,"props":{"x":10,"y":22,"height":"12px","children":[{"type":"tspan","key":"0","ref":null,"props":{"children":"Hello World"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}',
+};

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

@@ -1,11 +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;
-};
+/**
+ * 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__/svg-export-image/export.test.tsx

@@ -1,13 +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("svg-export-image", () => {
-  onlySkip(tests).forEach((item) => {
-    test(item.name, async () => {
-      expect(item.abstractImage).toEqual(item.expectedImage);
-    });
-  });
-});
+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("svg-export-image", () => {
+  onlySkip(tests).forEach((item) => {
+    test(item.name, async () => {
+      expect(item.abstractImage).toEqual(item.expectedImage);
+    });
+  });
+});