abstract-image 7.0.1 → 7.2.3

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

@@ -31,5 +31,5 @@ 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":{}}',
+    '{"type":"svg","key":null,"ref":null,"props":{"id":"ai_root","width":"400px","height":"400px","viewBox":"0 0 400 400","children":[{"key":"0","ref":null,"props":{"component":{"type":"text","position":{"x":10,"y":10},"text":"Hello <sub>World</sub>","fontFamily":"Arial","fontSize":12,"textColor":{"a":255,"r":0,"g":0,"b":0},"fontWeight":"bold","clockwiseRotationDegrees":0,"textAlignment":"center","horizontalGrowthDirection":"right","verticalGrowthDirection":"down","strokeThickness":2,"strokeColor":{"a":255,"r":255,"g":0,"b":0},"italic":false}},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}',
 };

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

@@ -31,5 +31,5 @@ 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":{}}',
+    '{"type":"svg","key":null,"ref":null,"props":{"id":"ai_root","width":"400px","height":"400px","viewBox":"0 0 400 400","children":[{"key":"0","ref":null,"props":{"component":{"type":"text","position":{"x":10,"y":10},"text":"Hello World","fontFamily":"Arial","fontSize":12,"textColor":{"a":255,"r":0,"g":0,"b":0},"fontWeight":"normal","clockwiseRotationDegrees":0,"textAlignment":"center","horizontalGrowthDirection":"right","verticalGrowthDirection":"down","strokeThickness":2,"strokeColor":{"a":255,"r":255,"g":0,"b":0},"italic":false}},"_owner":null,"_store":{}}]},"_owner":null,"_store":{}}',
 };

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

@@ -28,7 +28,9 @@ export function createReactSvg(
       onMouseMove={_callback(cb.onMouseMove, id)}
       onContextMenu={_callback(cb.onContextMenu, id)}
     >
-      {image.components.flatMap((c, i) => _visit(i.toString(), c as any))}
+      {image.components.map((c, i) => (
+        <Component key={i} component={c} />
+      ))}
     </svg>
   );
 }
@@ -66,32 +68,33 @@ function getIdAttr(target: Element | undefined, rootId: string): string | undefi
   return parts[1];
 }
 
-function _visit(key: string, component: AbstractImage.Component): Array<React.ReactElement<{}>> {
+function Component({ component }: { readonly component: AbstractImage.Component }): JSX.Element {
   switch (component.type) {
     case "group":
-      return [
-        <g key={key} name={component.name}>
-          {component.children.flatMap((c, i) => _visit(i.toString(), c as any))}
-        </g>,
-      ];
+      return (
+        <g name={component.name}>
+          {component.children.flatMap((c, i) => (
+            <Component key={i} component={c} />
+          ))}
+        </g>
+      );
     case "binaryimage":
       const url = getImageUrl(component.format, component.data);
-      return [
+      return (
         <image
-          key={key}
           x={component.topLeft.x}
           y={component.topLeft.y}
           width={component.bottomRight.x - component.topLeft.x}
           height={component.bottomRight.y - component.topLeft.y}
           id={makeIdAttr(component.id)}
           href={url}
-        />,
-      ];
+        />
+      );
+
     case "line":
-      return [
+      return (
         <line
           id={makeIdAttr(component.id)}
-          key={key}
           x1={component.start.x}
           y1={component.start.y}
           x2={component.end.x}
@@ -99,73 +102,61 @@ function _visit(key: string, component: AbstractImage.Component): Array<React.Re
           stroke={colorToRgb(component.strokeColor)}
           strokeWidth={component.strokeThickness}
           strokeOpacity={colorToOpacity(component.strokeColor)}
-        />,
-      ];
-    case "text":
+        />
+      );
+
+    case "text": {
       if (!component.text) {
-        return [];
+        return <></>;
       }
-      const lineHeight = component.fontSize;
+      const dy = getBaselineAdjustment(component.verticalGrowthDirection);
+      const transform = `rotate(${component.clockwiseRotationDegrees} ${component.position.x} ${component.position.y})`;
+      const lines: Array<string> = component.text !== null ? component.text.split("\n") : [];
+      const tSpans = lines.map((t) => (
+        <TSpan
+          key={t}
+          text={t}
+          x={component.position.x}
+          y={component.position.y + (lines.indexOf(t) + dy) * component.fontSize}
+          fontSize={component.fontSize}
+          lineHeight={component.fontSize}
+        />
+      ));
 
-      const shadowStyle = {
-        textAnchor: getTextAnchor(component.horizontalGrowthDirection),
-        fontSize: component.fontSize.toString() + "px",
-        fontWeight: getTextFontWeight(component.fontWeight),
-        fontFamily: component.fontFamily,
-        stroke: colorToRgb(component.strokeColor),
-        strokeWidth: component.strokeThickness,
-      };
-      const style = {
+      const baseStyle = {
         textAnchor: getTextAnchor(component.horizontalGrowthDirection),
         fontSize: component.fontSize.toString() + "px",
         fontWeight: getTextFontWeight(component.fontWeight),
         fontFamily: component.fontFamily,
-        fill: colorToRgb(component.textColor),
       };
-      const dy = getBaselineAdjustment(component.verticalGrowthDirection);
-
-      const transform =
-        "rotate(" +
-        component.clockwiseRotationDegrees.toString() +
-        " " +
-        component.position.x.toString() +
-        " " +
-        component.position.y.toString() +
-        ")";
-
-      const lines: Array<string> = component.text !== null ? component.text.split("\n") : [];
-      const tSpans = lines.map((t) =>
-        renderLine(
-          t,
-          component.position.x,
-          component.position.y + (lines.indexOf(t) + dy) * lineHeight,
-          component.fontSize,
-          lineHeight
-        )
-      );
-      let cs: Array<React.ReactElement<{}>> = [];
-      if (component.strokeThickness > 0 && component.strokeColor) {
-        cs.push(
-          <text key={key + "shadow"} style={shadowStyle} transform={transform}>
+      return (
+        <>
+          {component.strokeThickness > 0 && component.strokeColor && (
+            <text
+              style={{
+                ...baseStyle,
+                stroke: colorToRgb(component.strokeColor),
+                strokeWidth: component.strokeThickness,
+              }}
+              transform={transform}
+            >
+              {tSpans}
+            </text>
+          )}
+          <text style={{ ...baseStyle, fill: colorToRgb(component.textColor) }} transform={transform}>
             {tSpans}
           </text>
-        );
-      }
-      cs.push(
-        <text key={key} style={style} transform={transform}>
-          {tSpans}
-        </text>
+        </>
       );
-      return cs;
+    }
     case "ellipse":
       const rx = Math.abs(component.bottomRight.x - component.topLeft.x) * 0.5;
       const ry = Math.abs(component.bottomRight.y - component.topLeft.y) * 0.5;
       const cx = (component.bottomRight.x + component.topLeft.x) * 0.5;
       const cy = (component.bottomRight.y + component.topLeft.y) * 0.5;
-      return [
+      return (
         <ellipse
           id={makeIdAttr(component.id)}
-          key={key}
           cx={cx}
           cy={cy}
           rx={rx}
@@ -175,40 +166,37 @@ function _visit(key: string, component: AbstractImage.Component): Array<React.Re
           strokeOpacity={colorToOpacity(component.strokeColor)}
           fillOpacity={colorToOpacity(component.fillColor)}
           fill={colorToRgb(component.fillColor)}
-        />,
-      ];
+        />
+      );
     case "polyline":
       let linePoints = component.points.map((p) => p.x.toString() + "," + p.y.toString()).join(" ");
-      return [
+      return (
         <polyline
           id={makeIdAttr(component.id)}
-          key={key}
           points={linePoints}
           stroke={colorToRgb(component.strokeColor)}
           strokeWidth={component.strokeThickness}
           strokeOpacity={colorToOpacity(component.strokeColor)}
           fill="none"
-        />,
-      ];
+        />
+      );
     case "polygon":
       let points = component.points.map((p) => p.x.toString() + "," + p.y.toString()).join(" ");
-      return [
+      return (
         <polygon
           id={makeIdAttr(component.id)}
-          key={key}
           points={points}
           stroke={colorToRgb(component.strokeColor)}
           strokeWidth={component.strokeThickness}
           strokeOpacity={colorToOpacity(component.strokeColor)}
           fillOpacity={colorToOpacity(component.fillColor)}
           fill={colorToRgb(component.fillColor)}
-        />,
-      ];
+        />
+      );
     case "rectangle":
-      return [
+      return (
         <rect
           id={makeIdAttr(component.id)}
-          key={key}
           x={component.topLeft.x}
           y={component.topLeft.y}
           width={Math.abs(component.bottomRight.x - component.topLeft.x)}
@@ -218,10 +206,10 @@ function _visit(key: string, component: AbstractImage.Component): Array<React.Re
           strokeOpacity={colorToOpacity(component.strokeColor)}
           fillOpacity={colorToOpacity(component.fillColor)}
           fill={colorToRgb(component.fillColor)}
-        />,
-      ];
+        />
+      );
     default:
-      return [];
+      return <></>;
   }
 }
 
@@ -252,7 +240,19 @@ function getImageUrl(format: AbstractImage.BinaryFormat, data: AbstractImage.Ima
   }
 }
 
-function renderLine(text: string, x: number, y: number, fontSize: number, lineHeight: number): JSX.Element {
+function TSpan({
+  text,
+  x,
+  y,
+  fontSize,
+  lineHeight,
+}: {
+  readonly text: string;
+  readonly x: number;
+  readonly y: number;
+  readonly fontSize: number;
+  readonly lineHeight: number;
+}): JSX.Element {
   const split = text.split("<sub>").flatMap((t) => t.split("</sub>"));
   let inside = false;
   const tags: Array<JSX.Element> = [];
@@ -270,7 +270,7 @@ function renderLine(text: string, x: number, y: number, fontSize: number, lineHe
     inside = !inside;
   }
   return (
-    <tspan key={text} x={x} y={y} height={lineHeight.toString() + "px"}>
+    <tspan x={x} y={y} height={lineHeight.toString() + "px"}>
       {tags}
     </tspan>
   );
@@ -299,7 +299,7 @@ function getTextAnchor(d: AbstractImage.GrowthDirection): "end" | "middle" | "st
   if (d === "right") {
     return "start";
   }
-  throw "Unknown text alignment " + d;
+  throw "Unknown text anchor " + d;
 }
 
 function colorToRgb(color: AbstractImage.Color): string {

package/src/exporters/svg-export-image.ts

@@ -124,27 +124,9 @@ function abstractComponentToSVG(component: AbstractImage.Component): string {
       const cs: Array<string> = [];
 
       if (component.strokeThickness > 0 && component.strokeColor !== null) {
-        cs.push(
-          createElement(
-            "text",
-            {
-              style: objectToAttributeValue(shadowStyle),
-              transform: transform,
-            },
-            tSpans
-          )
-        );
+        cs.push(createElement("text", { style: objectToAttributeValue(shadowStyle), transform: transform }, tSpans));
       }
-      cs.push(
-        createElement(
-          "text",
-          {
-            style: objectToAttributeValue(style),
-            transform: transform,
-          },
-          tSpans
-        )
-      );
+      cs.push(createElement("text", { style: objectToAttributeValue(style), transform: transform }, tSpans));
       return cs.join();
     case "ellipse":
       const rx = Math.abs(component.bottomRight.x - component.topLeft.x) * 0.5;
@@ -280,7 +262,7 @@ function getTextAnchor(d: AbstractImage.GrowthDirection): string {
   if (d === "right") {
     return "start";
   }
-  throw "Unknown text alignment " + d;
+  throw "Unknown text anchor " + d;
 }
 
 function colorToRgb(color: AbstractImage.Color): string {

package/src/model/component.ts

@@ -244,19 +244,19 @@ export function createText(
 ): Text {
   return {
     type: "text",
-    position: position,
-    text: text,
-    fontFamily: fontFamily,
-    fontSize: fontSize,
-    textColor: textColor,
-    fontWeight: fontWeight,
-    clockwiseRotationDegrees: clockwiseRotationDegrees,
-    textAlignment: textAlignment,
-    horizontalGrowthDirection: horizontalGrowthDirection,
-    verticalGrowthDirection: verticalGrowthDirection,
-    strokeThickness: strokeThickness,
-    strokeColor: strokeColor,
-    italic: italic,
+    position,
+    text,
+    fontFamily,
+    fontSize,
+    textColor,
+    fontWeight,
+    clockwiseRotationDegrees,
+    textAlignment,
+    horizontalGrowthDirection,
+    verticalGrowthDirection,
+    strokeThickness,
+    strokeColor,
+    italic,
   };
 }
 
@@ -267,11 +267,7 @@ export interface SubImage {
 }
 
 export function createSubImage(topLeft: Point.Point, image: Component): SubImage {
-  return {
-    type: "subimage",
-    topLeft: topLeft,
-    image: image,
-  };
+  return { type: "subimage", topLeft, image };
 }
 
 export function embedAbstractImage(topLeft: Point.Point, name: string, image: AbstractImage.AbstractImage): Component {