tileserver-gl-light 5.5.0-pre.1 → 5.5.0-pre.12

package/src/render.js

@@ -5,6 +5,17 @@ import { SphericalMercator } from '@mapbox/sphericalmercator';
 
 const mercator = new SphericalMercator();
 
+// Constants
+const CONSTANTS = {
+  DEFAULT_LINE_WIDTH: 1,
+  DEFAULT_BORDER_WIDTH_RATIO: 0.1, // 10% of line width
+  DEFAULT_FILL_COLOR: 'rgba(255,255,255,0.4)',
+  DEFAULT_STROKE_COLOR: 'rgba(0,64,255,0.7)',
+  MAX_LINE_WIDTH: 500,
+  MAX_BORDER_WIDTH: 250,
+  MARKER_LOAD_TIMEOUT: 5000,
+};
+
 /**
  * Transforms coordinates to pixels.
  * @param {Array<number>} ll - Longitude/Latitude coordinate pair.
@@ -17,6 +28,73 @@ const precisePx = (ll, zoom) => {
   return [px[0] * scale, px[1] * scale];
 };
 
+/**
+ * Validates if a string is a valid color value.
+ * @param {string} color - Color string to validate.
+ * @returns {boolean} True if valid color.
+ */
+const isValidColor = (color) => {
+  if (!color || typeof color !== 'string') {
+    return false;
+  }
+
+  // Allow 'none' and 'transparent' keywords
+  if (color === 'none' || color === 'transparent') {
+    return true;
+  }
+
+  // Basic validation for common formats
+  const hexPattern = /^#([0-9A-Fa-f]{3}){1,2}$/; // 3 or 6 digits
+  const hexAlphaPattern = /^#([0-9A-Fa-f]{8})$/; // 8 digits with alpha
+  const rgbPattern = /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/;
+  const rgbaPattern = /^rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*[\d.]+\s*\)$/;
+  const namedColors = [
+    'red',
+    'blue',
+    'green',
+    'yellow',
+    'black',
+    'white',
+    'gray',
+    'grey',
+    'orange',
+    'purple',
+    'pink',
+    'brown',
+    'cyan',
+    'magenta',
+  ];
+
+  return (
+    hexPattern.test(color) ||
+    hexAlphaPattern.test(color) ||
+    rgbPattern.test(color) ||
+    rgbaPattern.test(color) ||
+    namedColors.includes(color.toLowerCase())
+  );
+};
+
+/**
+ * Safely parses a numeric value with bounds checking.
+ * @param {string|number} value - Value to parse.
+ * @param {number} defaultValue - Default value if parsing fails.
+ * @param {number} min - Minimum allowed value.
+ * @param {number} max - Maximum allowed value.
+ * @returns {number} Parsed and bounded value.
+ */
+const safeParseNumber = (
+  value,
+  defaultValue,
+  min = -Infinity,
+  max = Infinity,
+) => {
+  const parsed = Number(value);
+  if (isNaN(parsed)) {
+    return defaultValue;
+  }
+  return Math.max(min, Math.min(max, parsed));
+};
+
 /**
  * Draws a marker in canvas context.
  * @param {CanvasRenderingContext2D} ctx - Canvas context object.
@@ -25,22 +103,28 @@ const precisePx = (ll, zoom) => {
  * @returns {Promise<void>} A promise that resolves when the marker is drawn.
  */
 const drawMarker = (ctx, marker, z) => {
-  return new Promise((resolve) => {
+  return new Promise((resolve, reject) => {
     const img = new Image();
     const pixelCoords = precisePx(marker.location, z);
 
+    // Add timeout to prevent hanging on slow/failed image loads
+    const timeout = setTimeout(() => {
+      reject(new Error(`Marker image load timeout: ${marker.icon}`));
+    }, CONSTANTS.MARKER_LOAD_TIMEOUT);
+
     const getMarkerCoordinates = (imageWidth, imageHeight, scale) => {
       // Images are placed with their top-left corner at the provided location
       // within the canvas but we expect icons to be centered and above it.
 
-      // Substract half of the images width from the x-coordinate to center
+      // Subtract half of the image's width from the x-coordinate to center
       // the image in relation to the provided location
       let xCoordinate = pixelCoords[0] - imageWidth / 2;
-      // Substract the images height from the y-coordinate to place it above
+
+      // Subtract the image's height from the y-coordinate to place it above
       // the provided location
       let yCoordinate = pixelCoords[1] - imageHeight;
 
-      // Since image placement is dependent on the size offsets have to be
+      // Since image placement is dependent on the size, offsets have to be
       // scaled as well. Additionally offsets are provided as either positive or
       // negative values so we always add them
       if (marker.offsetX) {
@@ -57,30 +141,38 @@ const drawMarker = (ctx, marker, z) => {
     };
 
     const drawOnCanvas = () => {
-      // Check if the images should be resized before beeing drawn
-      const defaultScale = 1;
-      const scale = marker.scale ? marker.scale : defaultScale;
-
-      // Calculate scaled image sizes
-      const imageWidth = img.width * scale;
-      const imageHeight = img.height * scale;
-
-      // Pass the desired sizes to get correlating coordinates
-      const coords = getMarkerCoordinates(imageWidth, imageHeight, scale);
-
-      // Draw the image on canvas
-      if (scale != defaultScale) {
-        ctx.drawImage(img, coords.x, coords.y, imageWidth, imageHeight);
-      } else {
-        ctx.drawImage(img, coords.x, coords.y);
+      clearTimeout(timeout);
+
+      try {
+        // Check if the image should be resized before being drawn
+        const defaultScale = 1;
+        const scale = marker.scale ? marker.scale : defaultScale;
+
+        // Calculate scaled image sizes
+        const imageWidth = img.width * scale;
+        const imageHeight = img.height * scale;
+
+        // Pass the desired sizes to get correlating coordinates
+        const coords = getMarkerCoordinates(imageWidth, imageHeight, scale);
+
+        // Draw the image on canvas
+        if (scale !== defaultScale) {
+          ctx.drawImage(img, coords.x, coords.y, imageWidth, imageHeight);
+        } else {
+          ctx.drawImage(img, coords.x, coords.y);
+        }
+
+        // Resolve the promise when image has been drawn
+        resolve();
+      } catch (error) {
+        reject(new Error(`Failed to draw marker: ${error.message}`));
       }
-      // Resolve the promise when image has been drawn
-      resolve();
     };
 
     img.onload = drawOnCanvas;
-    img.onerror = (err) => {
-      throw err;
+    img.onerror = () => {
+      clearTimeout(timeout);
+      reject(new Error(`Failed to load marker image: ${marker.icon}`));
     };
     img.src = marker.icon;
   });
@@ -89,7 +181,7 @@ const drawMarker = (ctx, marker, z) => {
 /**
  * Draws a list of markers onto a canvas.
  * Wraps drawing of markers into list of promises and awaits them.
- * It's required because images are expected to load asynchronous in canvas js
+ * It's required because images are expected to load asynchronously in canvas js
  * even when provided from a local disk.
  * @param {CanvasRenderingContext2D} ctx - Canvas context object.
  * @param {Array<object>} markers - Marker objects parsed by extractMarkersFromQuery.
@@ -105,7 +197,26 @@ const drawMarkers = async (ctx, markers, z) => {
   }
 
   // Await marker drawings before continuing
-  await Promise.all(markerPromises);
+  // Use Promise.allSettled to continue even if some markers fail
+  const results = await Promise.allSettled(markerPromises);
+
+  // Log any failures
+  results.forEach((result, index) => {
+    if (result.status === 'rejected') {
+      console.warn(`Marker ${index} failed to render:`, result.reason);
+    }
+  });
+};
+
+/**
+ * Extracts an option value from a path query string.
+ * @param {Array<string>} splitPaths - Path string split by pipe character.
+ * @param {string} optionName - Name of the option to extract.
+ * @returns {string|undefined} Option value or undefined if not found.
+ */
+const getInlineOption = (splitPaths, optionName) => {
+  const found = splitPaths.find((x) => x.startsWith(`${optionName}:`));
+  return found ? found.replace(`${optionName}:`, '') : undefined;
 };
 
 /**
@@ -118,21 +229,25 @@ const drawMarkers = async (ctx, markers, z) => {
  * @returns {void}
  */
 const drawPath = (ctx, path, query, pathQuery, z) => {
-  const splitPaths = pathQuery.split('|');
-
   if (!path || path.length < 2) {
-    return null;
+    return;
   }
 
+  const splitPaths = pathQuery.split('|');
+
+  // Start the path - transform coordinates to pixels on canvas and draw lines between points
   ctx.beginPath();
 
-  // Transform coordinates to pixel on canvas and draw lines between points
-  for (const pair of path) {
+  for (const [i, pair] of path.entries()) {
     const px = precisePx(pair, z);
-    ctx.lineTo(px[0], px[1]);
+    if (i === 0) {
+      ctx.moveTo(px[0], px[1]);
+    } else {
+      ctx.lineTo(px[0], px[1]);
+    }
   }
 
-  // Check if first coordinate matches last coordinate
+  // Check if first coordinate matches last coordinate (closed path)
   if (
     path[0][0] === path[path.length - 1][0] &&
     path[0][1] === path[path.length - 1][1]
@@ -140,77 +255,130 @@ const drawPath = (ctx, path, query, pathQuery, z) => {
     ctx.closePath();
   }
 
-  // Optionally fill drawn shape with a rgba color from query
-  const pathHasFill = splitPaths.filter((x) => x.startsWith('fill')).length > 0;
+  // --- FILL Logic ---
+  const inlineFill = getInlineOption(splitPaths, 'fill');
+  const pathHasFill = inlineFill !== undefined;
+
   if (query.fill !== undefined || pathHasFill) {
-    if ('fill' in query) {
-      ctx.fillStyle = query.fill || 'rgba(255,255,255,0.4)';
-    }
+    let fillColor;
+
     if (pathHasFill) {
-      ctx.fillStyle = splitPaths
-        .find((x) => x.startsWith('fill:'))
-        .replace('fill:', '');
+      fillColor = inlineFill;
+    } else if ('fill' in query) {
+      fillColor = query.fill || CONSTANTS.DEFAULT_FILL_COLOR;
+    } else {
+      fillColor = CONSTANTS.DEFAULT_FILL_COLOR;
     }
-    ctx.fill();
-  }
 
-  // Get line width from query and fall back to 1 if not provided
-  const pathHasWidth =
-    splitPaths.filter((x) => x.startsWith('width')).length > 0;
-  if (query.width !== undefined || pathHasWidth) {
-    let lineWidth = 1;
-    // Get line width from query
-    if ('width' in query) {
-      lineWidth = Number(query.width);
+    // Validate color before using
+    if (isValidColor(fillColor)) {
+      ctx.fillStyle = fillColor;
+      ctx.fill();
+    } else {
+      console.warn(`Invalid fill color: ${fillColor}, using default`);
+      ctx.fillStyle = CONSTANTS.DEFAULT_FILL_COLOR;
+      ctx.fill();
     }
-    // Get line width from path in query
-    if (pathHasWidth) {
-      lineWidth = Number(
-        splitPaths.find((x) => x.startsWith('width:')).replace('width:', ''),
-      );
-    }
-    // Get border width from query and fall back to 10% of line width
-    const borderWidth =
-      query.borderwidth !== undefined
-        ? parseFloat(query.borderwidth)
-        : lineWidth * 0.1;
-
-    // Set rendering style for the start and end points of the path
-    // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap
-    ctx.lineCap = query.linecap || 'butt';
-
-    // Set rendering style for overlapping segments of the path with differing directions
-    // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
-    ctx.lineJoin = query.linejoin || 'miter';
-
-    // In order to simulate a border we draw the path two times with the first
-    // beeing the wider border part.
-    if (query.border !== undefined && borderWidth > 0) {
+  }
+
+  // --- WIDTH & BORDER Logic ---
+  const inlineWidth = getInlineOption(splitPaths, 'width');
+  const pathHasWidth = inlineWidth !== undefined;
+  const inlineBorder = getInlineOption(splitPaths, 'border');
+  const inlineBorderWidth = getInlineOption(splitPaths, 'borderwidth');
+  const pathHasBorder = inlineBorder !== undefined;
+
+  // Parse line width with validation
+  let lineWidth = CONSTANTS.DEFAULT_LINE_WIDTH;
+  if (pathHasWidth) {
+    lineWidth = safeParseNumber(
+      inlineWidth,
+      CONSTANTS.DEFAULT_LINE_WIDTH,
+      0,
+      CONSTANTS.MAX_LINE_WIDTH,
+    );
+  } else if ('width' in query) {
+    lineWidth = safeParseNumber(
+      query.width,
+      CONSTANTS.DEFAULT_LINE_WIDTH,
+      0,
+      CONSTANTS.MAX_LINE_WIDTH,
+    );
+  }
+
+  // Get border width with validation
+  // Default: 10% of line width
+  let borderWidth = lineWidth * CONSTANTS.DEFAULT_BORDER_WIDTH_RATIO;
+  if (pathHasBorder && inlineBorderWidth) {
+    borderWidth = safeParseNumber(
+      inlineBorderWidth,
+      borderWidth,
+      0,
+      CONSTANTS.MAX_BORDER_WIDTH,
+    );
+  } else if (query.borderwidth !== undefined) {
+    borderWidth = safeParseNumber(
+      query.borderwidth,
+      borderWidth,
+      0,
+      CONSTANTS.MAX_BORDER_WIDTH,
+    );
+  }
+
+  // Set rendering style for the start and end points of the path
+  // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap
+  const validLineCaps = ['butt', 'round', 'square'];
+  ctx.lineCap = validLineCaps.includes(query.linecap) ? query.linecap : 'butt';
+
+  // Set rendering style for overlapping segments of the path with differing directions
+  // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
+  const validLineJoins = ['miter', 'round', 'bevel'];
+  ctx.lineJoin = validLineJoins.includes(query.linejoin)
+    ? query.linejoin
+    : 'miter';
+
+  // The final border color, prioritized by inline over global query
+  const finalBorder = pathHasBorder ? inlineBorder : query.border;
+
+  // In order to simulate a border we draw the path two times with the first
+  // being the wider border part.
+  if (finalBorder !== undefined && borderWidth > 0) {
+    // Validate border color
+    if (isValidColor(finalBorder)) {
       // We need to double the desired border width and add it to the line width
       // in order to get the desired border on each side of the line.
       ctx.lineWidth = lineWidth + borderWidth * 2;
-      // Set border style as rgba
-      ctx.strokeStyle = query.border;
+      ctx.strokeStyle = finalBorder;
       ctx.stroke();
+    } else {
+      console.warn(`Invalid border color: ${finalBorder}, skipping border`);
     }
-    ctx.lineWidth = lineWidth;
   }
 
-  const pathHasStroke =
-    splitPaths.filter((x) => x.startsWith('stroke')).length > 0;
-  if (query.stroke !== undefined || pathHasStroke) {
-    if ('stroke' in query) {
-      ctx.strokeStyle = query.stroke;
-    }
-    // Path Stroke gets higher priority
-    if (pathHasStroke) {
-      ctx.strokeStyle = splitPaths
-        .find((x) => x.startsWith('stroke:'))
-        .replace('stroke:', '');
-    }
+  // Set line width for the main stroke
+  ctx.lineWidth = lineWidth;
+
+  // --- STROKE Logic ---
+  const inlineStroke = getInlineOption(splitPaths, 'stroke');
+  const pathHasStroke = inlineStroke !== undefined;
+
+  let strokeColor;
+  if (pathHasStroke) {
+    strokeColor = inlineStroke;
+  } else if ('stroke' in query) {
+    strokeColor = query.stroke;
   } else {
-    ctx.strokeStyle = 'rgba(0,64,255,0.7)';
+    strokeColor = CONSTANTS.DEFAULT_STROKE_COLOR;
   }
+
+  // Validate stroke color
+  if (isValidColor(strokeColor)) {
+    ctx.strokeStyle = strokeColor;
+  } else {
+    console.warn(`Invalid stroke color: ${strokeColor}, using default`);
+    ctx.strokeStyle = CONSTANTS.DEFAULT_STROKE_COLOR;
+  }
+
   ctx.stroke();
 };
 
@@ -260,23 +428,32 @@ export const renderOverlay = async (
   const canvas = createCanvas(scale * w, scale * h);
   const ctx = canvas.getContext('2d');
   ctx.scale(scale, scale);
+
   if (bearing) {
     ctx.translate(w / 2, h / 2);
     ctx.rotate((-bearing / 180) * Math.PI);
     ctx.translate(-center[0], -center[1]);
   } else {
-    // optimized path
+    // Optimized path
     ctx.translate(-center[0] + w / 2, -center[1] + h / 2);
   }
 
   // Draw provided paths if any
   paths.forEach((path, i) => {
     const pathQuery = Array.isArray(query.path) ? query.path.at(i) : query.path;
-    drawPath(ctx, path, query, pathQuery, z);
+    try {
+      drawPath(ctx, path, query, pathQuery, z);
+    } catch (error) {
+      console.error(`Error drawing path ${i}:`, error);
+    }
   });
 
   // Await drawing of markers before rendering the canvas
-  await drawMarkers(ctx, markers, z);
+  try {
+    await drawMarkers(ctx, markers, z);
+  } catch (error) {
+    console.error('Error drawing markers:', error);
+  }
 
   return canvas.toBuffer();
 };