fix: Avoid using rbga format for SVG attributes

miyanokomiya · Feb 1, 2024 · 5011441 · 5011441
1 parent a790eb3
commit 5011441
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 5 deletions.
diff --git a/src/utils/color.spec.ts b/src/utils/color.spec.ts
@@ -11,6 +11,7 @@ import {
   rednerHSVA,
   rednerRGBA,
   rgbaToHsva,
+  toHexAndAlpha,
 } from "./color";
 
 describe("parseHSLA", () => {
@@ -192,3 +193,12 @@ describe("hsvaToHsla", () => {
     });
   });
 });
+
+describe("toHexAndAlpha", () => {
+  test("should parse RGBA format", () => {
+    expect(toHexAndAlpha("rgba(1,2,3,0.5)")).toEqual(["#010203", 0.5]);
+  });
+  test("should parse HEX format", () => {
+    expect(toHexAndAlpha("#010203")).toEqual(["#010203", 1]);
+  });
+});
diff --git a/src/utils/color.ts b/src/utils/color.ts
@@ -158,3 +158,11 @@ export function hexToColor(hex: string): Color {
       }
     : { r: 0, g: 0, b: 0, a: 1 };
 }
+
+/**
+ * Suppose "str" is either RGBA or HEX format.
+ */
+export function toHexAndAlpha(str?: string | null): [string, number] | undefined {
+  const rgba = str ? parseRGBA(str) ?? hexToColor(str) : undefined;
+  return rgba ? [colorToHex(rgba), rgba.a] : undefined;
+}
diff --git a/src/utils/svgElements.ts b/src/utils/svgElements.ts
@@ -58,3 +58,10 @@ function appendChildren($el: SVGElement, $children: (SVGElement | Text)[]) {
 export function isPlainText(elm: unknown): elm is string {
   return typeof elm === "string";
 }
+
+export function getColorAttributes(
+  type: "fill" | "stroke",
+  val?: [hex: string, alpha: number],
+): SVGAttributes | undefined {
+  return val ? { [type]: val[0], [`${type}-opacity`]: val[1] === 1 ? undefined : val[1] } : undefined;
+}
diff --git a/src/utils/textEditor.ts b/src/utils/textEditor.ts
@@ -3,7 +3,8 @@ import { DocAttrInfo, DocAttributes, DocDelta, DocDeltaInsert, DocOutput } from
 import { Size } from "../models";
 import { applyDefaultStrokeStyle } from "./strokeStyle";
 import { newChronoCache } from "../composables/cache";
-import { SVGElementInfo } from "./svgElements";
+import { SVGElementInfo, getColorAttributes } from "./svgElements";
+import { toHexAndAlpha } from "./color";
 
 export const DEFAULT_FONT_SIZE = 18;
 export const DEFAULT_LINEHEIGHT = 1.2;
@@ -232,7 +233,7 @@ export function renderSVGDocByComposition(
           y: group.bounds.y,
           width: group.bounds.width,
           height: lineHeight,
-          fill: group.attributes.background,
+          ...getColorAttributes("fill", toHexAndAlpha(group.attributes.background)),
         },
       });
     });
@@ -248,7 +249,7 @@ export function renderSVGDocByComposition(
           y1: y,
           x2: group.bounds.x + group.bounds.width,
           y2: y,
-          stroke: group.attributes?.color ?? "#000",
+          ...getColorAttributes("stroke", toHexAndAlpha(group.attributes.color)),
           "stroke-width": fontHeight * 0.07,
         },
       });
@@ -265,7 +266,7 @@ export function renderSVGDocByComposition(
           y1: y,
           x2: group.bounds.x + group.bounds.width,
           y2: y,
-          stroke: group.attributes?.color ?? "#000",
+          ...getColorAttributes("stroke", toHexAndAlpha(group.attributes.color)),
           "stroke-width": fontHeight * 0.07,
         },
       });
@@ -278,7 +279,7 @@ export function renderSVGDocByComposition(
         tag: "tspan",
         attributes: {
           x: lineComposition.bounds.x,
-          fill: op.attributes?.color ?? undefined,
+          ...getColorAttributes("fill", toHexAndAlpha(op.attributes?.color)),
           "font-size": op.attributes?.size ?? undefined,
           "font-weight": op.attributes?.bold ? "bold" : undefined,
           "font-style": op.attributes?.italic ? "italic" : undefined,