abstract-image 13.0.13 → 13.0.14

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

@@ -4,6 +4,7 @@ import { AbstractImage } from "../model/abstract-image.js";
 import { createPoint, Point } from "../model/point.js";
 import { AbstractFontWeight, BinaryFormat, Component, GrowthDirection, ImageData } from "../model/component.js";
 import { Color } from "../model/color.js";
+import { Optional } from "../model/shared.js";
 
 export interface ReactSvgCallbacks {
   readonly onClick?: MouseCallback;
@@ -14,13 +15,22 @@ export interface ReactSvgCallbacks {
 
 export type MouseCallback = (id: string | undefined, point: Point) => void;
 
+export type ReactSvgOptions = {
+  readonly imageDataByUrl: Record<string, `data:image/${string},${string}`>;
+};
+
 export function ReactSvg({
   image,
   callbacks,
+  options,
 }: {
   readonly image: AbstractImage;
   readonly callbacks?: ReactSvgCallbacks;
+  readonly options?: Optional<ReactSvgOptions>;
 }): React.JSX.Element {
+  const opts: ReactSvgOptions = {
+    imageDataByUrl: options?.imageDataByUrl ?? {},
+  };
   const cb = callbacks || {};
   const id = "ai_root";
   return (
@@ -35,7 +45,7 @@ export function ReactSvg({
       onContextMenu={_callback(cb.onContextMenu, id)}
     >
       {image.components.map((c, i) => (
-        <JsxComponent key={i} component={c} />
+        <JsxComponent key={i} component={c} options={opts} />
       ))}
     </svg>
   );
@@ -74,18 +84,24 @@ function getIdAttr(target: Element | undefined, rootId: string): string | undefi
   return parts[1];
 }
 
-function JsxComponent({ component }: { readonly component: Component }): React.JSX.Element {
+function JsxComponent({
+  component,
+  options,
+}: {
+  readonly component: Component;
+  readonly options: ReactSvgOptions;
+}): React.JSX.Element {
   switch (component.type) {
     case "group":
       return (
         <g name={component.name}>
           {component.children.flatMap((c, i) => (
-            <JsxComponent key={i} component={c} />
+            <JsxComponent key={i} component={c} options={options} />
           ))}
         </g>
       );
     case "binaryimage":
-      const url = getImageUrl(component.format, component.data);
+      const url = getImageUrl(component.format, component.data, options);
       return (
         <image
           x={component.topLeft.x}
@@ -270,9 +286,9 @@ function getTextFontWeight(fontWeight: AbstractFontWeight): React.CSSProperties[
   }
 }
 
-function getImageUrl(format: BinaryFormat, data: ImageData): string {
+function getImageUrl(format: BinaryFormat, data: ImageData, options: ReactSvgOptions): string {
   if (data.type === "url") {
-    return data.url;
+    return options.imageDataByUrl[data.url] ?? data.url;
   } else if (format === "png") {
     const base64 = fromByteArray(data.bytes);
     return `data:image/png;base64,${base64}`;

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

@@ -2,23 +2,37 @@ import { fromByteArray } from "base64-js";
 import { Component, GrowthDirection, BinaryFormat, ImageData } from "../model/component.js";
 import { AbstractImage } from "../model/abstract-image.js";
 import { Color } from "../model/color.js";
+import { Optional } from "../model/shared.js";
 
-export function createSVG(image: AbstractImage, pixelWidth?: number, pixelHeight?: number): string {
-  const imageElements = image.components.map((c: Component) => abstractComponentToSVG(c));
+export const SVG_DATA_URL = "data:image/svg+xml,";
+
+export type SvgOptions = {
+  readonly pixelWidth: number;
+  readonly pixelHeight: number;
+  readonly imageDataByUrl: Record<string, `data:image/${string},${string}`>;
+};
+
+export function createSVG(image: AbstractImage, options?: Optional<SvgOptions>): string {
+  const opts: SvgOptions = {
+    imageDataByUrl: options?.imageDataByUrl ?? {},
+    pixelWidth: options?.pixelWidth || image.size.width,
+    pixelHeight: options?.pixelHeight || image.size.height,
+  };
+  const imageElements = image.components.map((c: Component) => abstractComponentToSVG(c, opts));
 
   return createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      width: `${pixelWidth || image.size.width}px`,
-      height: `${pixelHeight || image.size.height}px`,
+      width: `${opts.pixelWidth}px`,
+      height: `${opts.pixelHeight}px`,
       viewBox: [0, 0, image.size.width, image.size.height].join(" "),
     },
     imageElements
   );
 }
 
-function abstractComponentToSVG(component: Component): string {
+function abstractComponentToSVG(component: Component, options: SvgOptions): string {
   switch (component.type) {
     case "group":
       return createElement(
@@ -26,10 +40,10 @@ function abstractComponentToSVG(component: Component): string {
         {
           name: component.name,
         },
-        component.children.map((c) => abstractComponentToSVG(c))
+        component.children.map((c) => abstractComponentToSVG(c, options))
       );
     case "binaryimage":
-      const url = getImageUrl(component.format, component.data);
+      const url = getImageUrl(component.format, component.data, options);
       return url
         ? createElement(
             "image",
@@ -339,9 +353,9 @@ function colorToOpacity(color: Color): string {
   return (color.a / 255).toString();
 }
 
-function getImageUrl(format: BinaryFormat, data: ImageData): string | undefined {
+function getImageUrl(format: BinaryFormat, data: ImageData, options: SvgOptions): string | undefined {
   if (data.type === "url") {
-    return data.url;
+    return options.imageDataByUrl[data.url] ?? data.url;
   } else if (format === "png") {
     const base64 = fromByteArray(data.bytes);
     return `data:image/png;base64,${base64}`;