abstract-image 3.3.2 → 3.3.3

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

@@ -1,32 +1,32 @@
-import { ExportTestDef } from "../export-test-def";
-import * as AbstractImage from "../../../../../src/index";
-
-const components = [
-  AbstractImage.createPolygon(
-    [
-      AbstractImage.createPoint(110, 10),
-      AbstractImage.createPoint(100, 20),
-      AbstractImage.createPoint(110, 30),
-      AbstractImage.createPoint(100, 40),
-      AbstractImage.createPoint(110, 50),
-    ],
-    AbstractImage.blue,
-    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 polygon",
-  abstractImage: svg,
-  expectedSerializedJsx:
-    '{"type":"svg","key":null,"ref":null,"props":{"id":"ai_root","width":"400px","height":"400px","viewBox":"0 0 400 400","children":[{"type":"polygon","key":"0","ref":null,"props":{"points":"110,10 100,20 110,30 100,40 110,50","stroke":"rgb(0,0,255)","strokeWidth":2,"strokeOpacity":"1","fillOpacity":"1","fill":"rgb(255,0,0)"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}',
-};
+import { ExportTestDef } from "../export-test-def";
+import * as AbstractImage from "../../../../../src/index";
+
+const components = [
+  AbstractImage.createPolygon(
+    [
+      AbstractImage.createPoint(110, 10),
+      AbstractImage.createPoint(100, 20),
+      AbstractImage.createPoint(110, 30),
+      AbstractImage.createPoint(100, 40),
+      AbstractImage.createPoint(110, 50),
+    ],
+    AbstractImage.blue,
+    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 polygon",
+  abstractImage: svg,
+  expectedSerializedJsx:
+    '{"type":"svg","key":null,"ref":null,"props":{"id":"ai_root","width":"400px","height":"400px","viewBox":"0 0 400 400","children":[{"type":"polygon","key":"0","ref":null,"props":{"points":"110,10 100,20 110,30 100,40 110,50","stroke":"rgb(0,0,255)","strokeWidth":2,"strokeOpacity":"1","fillOpacity":"1","fill":"rgb(255,0,0)"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}',
+};

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

@@ -1,33 +1,33 @@
-import { ExportTestDef } from "../export-test-def";
-import * as AbstractImage from "../../../../../src/index";
-
-const components = [
-  AbstractImage.createPolyLine(
-    [
-      AbstractImage.createPoint(10, 40),
-      AbstractImage.createPoint(20, 30),
-      AbstractImage.createPoint(30, 40),
-      AbstractImage.createPoint(40, 30),
-      AbstractImage.createPoint(50, 40),
-      AbstractImage.createPoint(60, 30),
-      AbstractImage.createPoint(70, 40),
-    ],
-    AbstractImage.black,
-    2
-  ),
-];
-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 polyline",
-  abstractImage: svg,
-  expectedSerializedJsx:
-    '{"type":"svg","key":null,"ref":null,"props":{"id":"ai_root","width":"400px","height":"400px","viewBox":"0 0 400 400","children":[{"type":"polyline","key":"0","ref":null,"props":{"points":"10,40 20,30 30,40 40,30 50,40 60,30 70,40","stroke":"rgb(0,0,0)","strokeWidth":2,"strokeOpacity":"1","fill":"none"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}',
-};
+import { ExportTestDef } from "../export-test-def";
+import * as AbstractImage from "../../../../../src/index";
+
+const components = [
+  AbstractImage.createPolyLine(
+    [
+      AbstractImage.createPoint(10, 40),
+      AbstractImage.createPoint(20, 30),
+      AbstractImage.createPoint(30, 40),
+      AbstractImage.createPoint(40, 30),
+      AbstractImage.createPoint(50, 40),
+      AbstractImage.createPoint(60, 30),
+      AbstractImage.createPoint(70, 40),
+    ],
+    AbstractImage.black,
+    2
+  ),
+];
+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 polyline",
+  abstractImage: svg,
+  expectedSerializedJsx:
+    '{"type":"svg","key":null,"ref":null,"props":{"id":"ai_root","width":"400px","height":"400px","viewBox":"0 0 400 400","children":[{"type":"polyline","key":"0","ref":null,"props":{"points":"10,40 20,30 30,40 40,30 50,40 60,30 70,40","stroke":"rgb(0,0,0)","strokeWidth":2,"strokeOpacity":"1","fill":"none"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}',
+};

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

@@ -1,27 +1,27 @@
-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 svg = AbstractImage.createReactSvg(image);
-
-export const test: ExportTestDef = {
-  name: "react svg rectangle",
-  abstractImage: svg,
-  expectedSerializedJsx:
-    '{"type":"svg","key":null,"ref":null,"props":{"id":"ai_root","width":"400px","height":"400px","viewBox":"0 0 400 400","children":[{"type":"rect","key":"0","ref":null,"props":{"x":10,"y":50,"width":40,"height":10,"stroke":"rgb(0,0,255)","strokeWidth":2,"strokeOpacity":"1","fillOpacity":"1","fill":"rgb(255,0,0)"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}',
-};
+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 svg = AbstractImage.createReactSvg(image);
+
+export const test: ExportTestDef = {
+  name: "react svg rectangle",
+  abstractImage: svg,
+  expectedSerializedJsx:
+    '{"type":"svg","key":null,"ref":null,"props":{"id":"ai_root","width":"400px","height":"400px","viewBox":"0 0 400 400","children":[{"type":"rect","key":"0","ref":null,"props":{"x":10,"y":50,"width":40,"height":10,"stroke":"rgb(0,0,255)","strokeWidth":2,"strokeOpacity":"1","fillOpacity":"1","fill":"rgb(255,0,0)"},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}',
+};

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

@@ -1,36 +1,36 @@
-import { ExportTestDef } from "../export-test-def";
-import * as AbstractImage from "../../../../../src/index";
-
-const subImage = AbstractImage.createText(
-  AbstractImage.createPoint(10, 10),
-  "",
-  "Arial",
-  12,
-  AbstractImage.black,
-  "bold",
-  0,
-  "center",
-  "right",
-  "down",
-  2,
-  AbstractImage.red,
-  false
-);
-
-const components = [AbstractImage.createSubImage(AbstractImage.createPoint(10, 10), subImage)];
-
-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 subimage",
-  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":{}}',
-};
+import { ExportTestDef } from "../export-test-def";
+import * as AbstractImage from "../../../../../src/index";
+
+const subImage = AbstractImage.createText(
+  AbstractImage.createPoint(10, 10),
+  "",
+  "Arial",
+  12,
+  AbstractImage.black,
+  "bold",
+  0,
+  "center",
+  "right",
+  "down",
+  2,
+  AbstractImage.red,
+  false
+);
+
+const components = [AbstractImage.createSubImage(AbstractImage.createPoint(10, 10), subImage)];
+
+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 subimage",
+  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":{}}',
+};

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

@@ -1,50 +1,50 @@
-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
-  ),
-  AbstractImage.createText(
-    AbstractImage.createPoint(10, 10),
-    "Hello World",
-    "Arial",
-    12,
-    AbstractImage.black,
-    "mediumBold",
-    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 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":"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":{}},{"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 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":"1","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,
+    "bold",
+    0,
+    "center",
+    "right",
+    "down",
+    2,
+    AbstractImage.red,
+    false
+  ),
+  AbstractImage.createText(
+    AbstractImage.createPoint(10, 10),
+    "Hello World",
+    "Arial",
+    12,
+    AbstractImage.black,
+    "mediumBold",
+    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 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":"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":{}},{"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 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":"1","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":{}}',
+};

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

@@ -1,80 +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,
-    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":{}}',
-};
+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":{}}',
+};