Merge pull request #147 from geostyler/26-handle-base64-image-as-inline-content

feat(#26): write layer url as icon image

Author: ger-benjamin

package-lock.json

@@ -37,7 +37,8 @@
     "lint:typecheck:test": "npm run lint && npm run typecheck && npm run test"
   },
   "dependencies": {
-    "geostyler-style": "^10.4.0"
+    "geostyler-style": "^10.4.0",
+    "jimp": "^1.6.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.25.7",
@@ -46,6 +47,7 @@
     "@babel/preset-typescript": "^7.25.7",
     "@terrestris/eslint-config-typescript": "^5.0.0",
     "@types/node": "^22.0.0",
+    "@types/pngjs": "^6.0.5",
     "@typescript-eslint/eslint-plugin": "^7.12.0",
     "@typescript-eslint/eslint-plugin-tslint": "^7.0.2",
     "@typescript-eslint/parser": "^7.12.0",

package.json

@@ -0,0 +1,72 @@
+import { Jimp } from "jimp";
+import { WARNINGS } from "./toGeostylerUtils.ts";
+
+/** Split base64 string */
+interface Base64ImageInfo {
+  data: string;
+  extension: string;
+}
+
+type SupportedMimeTypes =
+  | "image/bmp"
+  | "image/tiff"
+  | "image/x-ms-bmp"
+  | "image/gif"
+  | "image/jpeg"
+  | "image/png";
+
+/**
+ * Get the data and extension from a base64 string.
+ * @returns The data and extension or undefined if the string is not a base64 string.
+ */
+const getBase64ImageInfo = (
+  base64String: string,
+): Base64ImageInfo | undefined => {
+  const tokens = base64String.split(";");
+  if (tokens.length !== 2) {
+    return undefined;
+  }
+  const ext = tokens[0].split("/").pop();
+  if (!ext) {
+    return undefined;
+  }
+  return {
+    data: tokens[1].substring("base64,".length),
+    extension: ext,
+  };
+};
+
+/**
+ * Resize a base64 image to the given size using Jimp.
+ * This is needed because the end reader could be not able to resize a base64 image.
+ * @returns The resized base64 image or the original base64 image if resizing failed.
+ */
+export const resizeBase64Image = async (
+  base64String: string | undefined,
+  size: number,
+): Promise<string | undefined> => {
+  if (!base64String) {
+    return undefined;
+  }
+  const imageInfo = getBase64ImageInfo(base64String);
+  if (!imageInfo) {
+    return base64String;
+  }
+  const mimeType = `image/${imageInfo.extension}` as SupportedMimeTypes;
+  const buffer = Buffer.from(imageInfo.data, "base64");
+  let resizedBase64Image: string | undefined;
+  try {
+    const image = await Jimp.read(buffer);
+    const resizedImage = image.resize({
+      w: Math.floor(size),
+      h: Math.floor(size),
+    });
+    resizedBase64Image = await resizedImage.getBase64(mimeType);
+  } catch (e) {
+    WARNINGS.push(`Could not resize image: ${e}`);
+  }
+  if (resizedBase64Image) {
+    return resizedBase64Image;
+  }
+  return base64String;
+};

src/base64Utils.ts

@@ -1,7 +1,10 @@
 export const ESRI_SYMBOLS_FONT: string = "ESRI Default Marker";
 export const POLYGON_FILL_RESIZE_FACTOR: number = 2 / 3;
 export const OFFSET_FACTOR: number = 4 / 3;
-export const ESRI_SPECIAL_FONT: string[] = ["ttf://ESRI SDS 2.00", "ttf://ESRI SDS 1.95"];
+export const ESRI_SPECIAL_FONT: string[] = [
+  "ttf://ESRI SDS 2.00",
+  "ttf://ESRI SDS 1.95",
+];
 export const ESRI_SPECIAL_FONT_RESIZE_FACTOR: number = 1.8;
 
 export enum MarkerPlacementPosition {

src/constants.ts

@@ -34,6 +34,7 @@ export type SymbolLayer = CIMObject & {
   size: number;
   symbol: CIMSymbol;
   respectFrame: boolean;
+  url?: string;
 };
 
 export type CIMSymbol = CIMObject & {

src/esri/types/symbols/CIMSymbol.ts

@@ -63,19 +63,23 @@ export const convertExpression = (
   }
 
   // Handle if-then-else expressions.
-  const regex = /\[\s*if\s*\(([^)]+)\)\s*{([^}]*)}\s*\]/si;
+  const regex = /\[\s*if\s*\(([^)]+)\)\s*{([^}]*)}\s*\]/is;
   const match = expression.match(regex);
   if (match) {
     const condition = match[1];
     const thenPart = match[2];
-    const elsePart = match.length === 4 ? convertArcadeExpression(match[3]) : "";
+    const elsePart =
+      match.length === 4 ? convertArcadeExpression(match[3]) : "";
 
-    const booleanFunction = processGeostylerBooleanFunction(condition, toLowerCase);
+    const booleanFunction = processGeostylerBooleanFunction(
+      condition,
+      toLowerCase,
+    );
     if (booleanFunction) {
       const processedThen = convertExpression(thenPart, engine, toLowerCase);
       return {
         name: "if_then_else",
-        args: [booleanFunction, processedThen, elsePart]
+        args: [booleanFunction, processedThen, elsePart],
       } as unknown as GeoStylerStringFunction;
     }
     return processPropertyName(expression);
@@ -183,61 +187,63 @@ export const processRoundExpression = (
   language: string,
 ): GeoStylerStringFunction | string => {
   // Match expressions like "Round($feature.CONTOUR, 0)" and processes the field and decimal places
-  const match = expression.match(/(?:{{\s*)?round\(\s*(\w+)\s*,\s*(\d+)\s*\)\s*(?:}})?/);
+  const match = expression.match(
+    /(?:{{\s*)?round\(\s*(\w+)\s*,\s*(\d+)\s*\)\s*(?:}})?/,
+  );
   if (match) {
     const field = match[1];
     const decimalPlaces = Number(match[2]);
     const fProperty: Fproperty = fieldToFProperty(field, toLowerCase);
     let decimalFormat: string;
     if (decimalPlaces === 0) {
-      decimalFormat = '#';
+      decimalFormat = "#";
     } else {
-      decimalFormat = '#.' + '#'.repeat(decimalPlaces);
+      decimalFormat = "#." + "#".repeat(decimalPlaces);
     }
     return {
       args: [decimalFormat, fProperty, language],
-      name: "numberFormat"
+      name: "numberFormat",
     };
   }
   return expression;
 };
 
 export const processGeostylerBooleanFunction = (
   expression: string,
-  toLowerCase: boolean
+  toLowerCase: boolean,
 ): GeoStylerFunction | null => {
   const whereClause = convertWhereClause(expression, toLowerCase);
   if (Array.isArray(whereClause) && whereClause.length === 3) {
     const fProperty: Fproperty = fieldToFProperty(
       String(whereClause[1]),
-      toLowerCase
+      toLowerCase,
     );
     const value = Number(whereClause[2]);
     if (whereClause[0] === ">") {
       return {
         name: "greaterThan",
-        args: [fProperty, value]
+        args: [fProperty, value],
       };
-    } 
+    }
 
     if (whereClause[0] === "==") {
       return {
         name: "equalTo",
-        args: [fProperty, value]
+        args: [fProperty, value],
       };
     }
-    
+
     if (whereClause[0] === "<") {
       return {
         name: "lessThan",
-        args: [fProperty, value]
+        args: [fProperty, value],
       };
     }
-    
+
     if (whereClause[0] === "!=") {
       return {
         name: "notEqualTo",
-        args: [fProperty, value]
+        args: [fProperty, value],
       };
     }
   }

src/expressions.ts

@@ -7,6 +7,7 @@ import {
 } from "geostyler-style";
 import { convert } from "./toGeostyler.ts";
 import { CIMLayerDocument } from "./esri/types/CIMLayerDocument.ts";
+import { WARNINGS } from "./toGeostylerUtils.ts";
 
 export type ConstructorParams = {};
 
@@ -30,14 +31,14 @@ export class LyrxParser implements StyleParser<CIMLayerDocument> {
     this.options = options || {};
   }
 
-  readStyle(inputStyle: CIMLayerDocument): Promise<ReadStyleResult> {
-    const geostylerStyle = convert(inputStyle);
+  async readStyle(inputStyle: CIMLayerDocument): Promise<ReadStyleResult> {
+    const geostylerStyle = await convert(inputStyle);
     return Promise.resolve({
       output: {
         name: geostylerStyle[0].name,
         rules: geostylerStyle[0].rules,
       },
-      warnings: [],
+      warnings: WARNINGS,
       errors: [],
     });
   }

src/index.ts

@@ -39,16 +39,13 @@ import {
   SymbolLayer,
 } from "./esri/types/symbols";
 import { fieldToFProperty } from "./expressions.ts";
-// import { writeFileSync, existsSync, mkdirSync } from 'fs';
-// import uuid from 'uuid';
-// import { tmpdir } from 'os';
-// import path from 'path';
+import { resizeBase64Image } from "./base64Utils.ts";
 
-export const processSymbolLayer = (
+export const processSymbolLayer = async (
   layer: SymbolLayer,
   symbol: CIMSymbol,
   options: Options,
-): Symbolizer[] | undefined => {
+): Promise<Symbolizer[] | undefined> => {
   let layerType: string = layer.type;
 
   switch (layerType) {
@@ -63,9 +60,8 @@ export const processSymbolLayer = (
     case "CIMHatchFill":
       return processSymbolHatchFill(layer);
     case "CIMPictureFill":
-      return processSymbolPicture(layer, symbol, options);
     case "CIMPictureMarker":
-      return processSymbolMarker(layer);
+      return await processSymbolPicture(layer, symbol, options);
     default:
       return;
   }
@@ -333,14 +329,16 @@ const processOrientedMarkerAtEndOfLine = (
 const processMarkerPlacementInsidePolygon = (
   symbolizer: MarkSymbolizer,
   markerPlacement: CIMMarkerPlacement,
-  respectFrame: boolean = true
+  respectFrame: boolean = true,
 ): [
   Expression<number>,
   Expression<number>,
   Expression<number>,
   Expression<number>,
 ] => {
-  const isSpecialFont = ESRI_SPECIAL_FONT.some(font => symbolizer?.wellKnownName?.startsWith(font));
+  const isSpecialFont = ESRI_SPECIAL_FONT.some((font) =>
+    symbolizer?.wellKnownName?.startsWith(font),
+  );
   // In case of markers in a polygon fill, it seems ArcGIS does some undocumented resizing of the marker.
   // We use an empirical factor to account for this, which works in most cases. For special Fonts we need to
   // use another empirical factor when respectFrame is set to false.
@@ -528,11 +526,11 @@ const processSymbolCharacterMarker = (
   return [symbolCharacterMaker];
 };
 
-const processSymbolVectorMarker = (
+const processSymbolVectorMarker = async (
   layer: SymbolLayer,
   cimSymbol: CIMSymbol,
   options: Options,
-): Symbolizer[] => {
+): Promise<Symbolizer[]> => {
   if (layer.size) {
     layer.size = ptToPxProp(layer, "size", 3);
   }
@@ -553,7 +551,8 @@ const processSymbolVectorMarker = (
     // TODO: support multiple marker graphics
     const markerGraphic = markerGraphics[0];
     if (markerGraphic.symbol && markerGraphic.symbol.symbolLayers) {
-      symbol = processSymbolReference(markerGraphic, {})[0] as MarkSymbolizer;
+      const symbolReferences = await processSymbolReference(markerGraphic, {});
+      symbol = symbolReferences[0] as MarkSymbolizer;
       const subLayers = markerGraphic.symbol.symbolLayers.filter(
         (sublayer: SymbolLayer) => sublayer.enable,
       );
@@ -695,67 +694,31 @@ const processSymbolHatchFill = (layer: SymbolLayer): Symbolizer[] => {
   return [fillSymbolizer];
 };
 
-const processSymbolPicture = (
+const processSymbolPicture = async (
   layer: SymbolLayer,
   cimSymbol: CIMSymbol,
   options: Options,
-): Symbolizer[] => {
-  // let url = layer.url;
-  // if (!existsSync(url)) {
-  //     let tokens = url.split(';');
-  //     if (tokens.length === 2) {
-  //         let ext = tokens[0].split('/').pop();
-  //         let data = tokens[1].substring('base64,'.length);
-  //         let tempPath = path.join(
-  //             tmpdir(),
-  //             'bridgestyle',
-  //             uuid.v4().replace('-', ''),
-  //         );
-  //         let iconName = `${uuid.v4()}.${ext}`;
-  //         let iconFile = path.join(tempPath, iconName);
-  //         mkdirSync(tempPath, { recursive: true });
-  //         writeFileSync(iconFile, Buffer.from(data, 'base64'));
-  //         usedIcons.push(iconFile);
-  //         url = iconFile;
-  //     }
-  // }
-
-  let size = ptToPxProp(layer, "height", ptToPxProp(layer, "size", 0));
-  const picureFillSymbolizer: Symbolizer = {
+): Promise<Symbolizer[]> => {
+  const size = ptToPxProp(layer, "height", ptToPxProp(layer, "size", 0));
+  const resizedImage = (await resizeBase64Image(layer.url, size)) ?? "";
+  const pictureFillSymbolizer: Symbolizer = {
     opacity: 1.0,
-    rotate: 0.0,
+    rotate: 0,
     kind: "Icon",
-    color: undefined,
-    // image: url,
-    image: "http://FIXME",
+    image: resizedImage,
     size: size,
   };
 
   const symbolizerWithSubSymbolizer = processSymbolLayerWithSubSymbol(
     cimSymbol,
     layer,
-    picureFillSymbolizer,
+    pictureFillSymbolizer,
     options,
   );
   if (symbolizerWithSubSymbolizer.length) {
     return symbolizerWithSubSymbolizer;
   }
-  return [picureFillSymbolizer];
-};
-
-const processSymbolMarker = (layer: SymbolLayer): Symbolizer[] => {
-  let size = ptToPxProp(layer, "height", ptToPxProp(layer, "size", 0));
-  return [
-    {
-      opacity: 1.0,
-      rotate: 0.0,
-      kind: "Icon",
-      color: undefined,
-      // image: url,
-      image: "http://FIXME",
-      size: size,
-    } as Symbolizer,
-  ];
+  return [pictureFillSymbolizer];
 };
 
 const extractEffect = (layer: SymbolLayer): Effect => {