Ensure the colors are correctly converted

Change-Id: I9a36c6dc4752e07e0b8ff153aa8f741f71f93e4c

diff --git a/src/app/importActions.ts b/src/app/importActions.ts
index 68d904c30a5e09370044a68335220277be87fd3c..4dbae09bb1daf81375d4ab9c5336e5a547808ffa 100644 (file)
--- a/src/app/importActions.ts
+++ b/src/app/importActions.ts
@@ -14,6 +14,17 @@ export type FormState = {
     message: string;
 }
 
+const mapColorNameToHex = (color: string | undefined): string => {
+    switch (color) {
+        case 'light_green':
+            return '#cee741';
+        case 'light_yellow':
+            return '#fef445';
+        default:
+            return color ?? '#ffffff';
+    }
+}
+
 export async function importBoard(prevState: FormState, formData: FormData): Promise<FormState> {
     const boardIdsRaw = formData.getAll('board');
     if (!boardIdsRaw) {
@@ -233,6 +244,18 @@ function transformBoardIntoNeoboardCoordinates(board: Whiteboard): Whiteboard {
     return transformedBoard;
 }
 
+function hexToRGB(hex: string, alpha?: number): string {
+    var r = parseInt(hex.slice(1, 3), 16),
+        g = parseInt(hex.slice(3, 5), 16),
+        b = parseInt(hex.slice(5, 7), 16);
+
+    if (alpha) {
+        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
+    } else {
+        return "rgb(" + r + ", " + g + ", " + b + ")";
+    }
+}
+
 function convertShape(item: ShapeItem): Shape | undefined {
     let shapeType = item.data?.shape;
     let borderRadius = 0;
@@ -247,8 +270,10 @@ function convertShape(item: ShapeItem): Shape | undefined {
 
     const neoboardPadding = 5;
 
-    const opacity = item.style?.fillOpacity ?? (item.style?.fillColor ? "1.0" : "0.0");
-    const borderColorOpacity = item.style?.borderOpacity ?? "1.0";
+    const fillColor = item.style?.fillColor ? mapColorNameToHex(item.style.fillColor) : "#ffffff";
+
+    const opacity = parseFloat(item.style?.fillOpacity ?? (fillColor ? "1.0" : "0.0"));
+    const borderColorOpacity = parseFloat(item.style?.borderOpacity ?? "1.0");
 
     return {
         type: 'shape',
@@ -259,8 +284,8 @@ function convertShape(item: ShapeItem): Shape | undefined {
         },
         width: (item.geometry?.width ?? 1) + neoboardPadding,
         height: (item.geometry?.height ?? 1) + neoboardPadding,
-        fillColor: opacity === "1.0" ? (item.style?.fillColor ?? "#ffffff") : "transparent",
-        strokeColor: borderColorOpacity === "1.0" ? (item.style?.borderColor ?? "#1a1a1a") : "transparent",
+        fillColor: opacity > 0 ? hexToRGB(fillColor, opacity) : "transparent",
+        strokeColor: borderColorOpacity > 0 ? hexToRGB((item.style?.borderColor ?? '#1a1a1a'), opacity) : "transparent",
         strokeWidth: parseFloat(item.style?.borderWidth ?? "2.0"),
         borderRadius: borderRadius,
         text: stripHtml(item.data?.content ?? "").result,
@@ -352,6 +377,7 @@ function convertText(item: TextItem): Shape {
 
 // Make sticky notes a rounded rectangle
 function convertStickyNote(item: StickyNoteItem): Shape {
+    const fillColor = item.style?.fillColor ? mapColorNameToHex(item.style.fillColor) : "#ffffff";
     return {
         type: 'shape',
         kind: 'rectangle',
@@ -361,10 +387,10 @@ function convertStickyNote(item: StickyNoteItem): Shape {
         },
         width: item.geometry?.width ?? 1,
         height: item.geometry?.height ?? 1,
-        fillColor: item.style?.fillColor ?? "#ffffff",
+        fillColor: fillColor ?? "#ffffff",
         strokeColor: 'transparent',
         strokeWidth: 0,
-        borderRadius: 25,
+        borderRadius: 5,
         text: stripHtml(item.data?.content ?? "").result,
         textAlignment: (item.style?.textAlign ?? "left") as "left" | "center" | "right",
         textColor: 'black',