@guardian/interactive-component-library 0.3.2 → 0.4.0

package/dist/components/molecules/canvas-map/lib/interpolators/interpolateStyles.js

@@ -1,6 +1,6 @@
-import { Style } from "../styles/Style.js";
 import { Stroke } from "../styles/Stroke.js";
 import { Fill } from "../styles/Fill.js";
+import { Style } from "../styles/Style.js";
 function interpolateStyles(firstStyle, secondStyle, interpolateColors, interpolateNumbers) {
   const fillInterpolator = interpolateFill(
     firstStyle.fill,

package/dist/components/molecules/canvas-map/lib/layers/TextLayer.js

@@ -1,6 +1,6 @@
 import { TextLayerRenderer } from "../renderers/TextLayerRenderer.js";
-import { Style } from "../styles/Style.js";
 import { Text } from "../styles/Text.js";
+import { Style } from "../styles/Style.js";
 import { Dispatcher } from "../events/Dispatcher.js";
 import { combineExtents } from "../util/extent.js";
 import { MapEvent } from "../events/MapEvent.js";

package/dist/components/molecules/canvas-map/lib/layers/VectorLayer.js

@@ -1,6 +1,6 @@
 import { VectorLayerRenderer } from "../renderers/VectorLayerRenderer.js";
-import { Style } from "../styles/Style.js";
 import { Stroke } from "../styles/Stroke.js";
+import { Style } from "../styles/Style.js";
 import { combineExtents } from "../util/extent.js";
 import { Dispatcher } from "../events/Dispatcher.js";
 import { MapEvent } from "../events/MapEvent.js";

package/dist/components/molecules/canvas-map/lib/renderers/FeatureRenderer.js

@@ -33,8 +33,7 @@ class FeatureRenderer {
     }
     this.drawPath(geometries, context);
     if (fill) {
-      context.fillStyle = fill.getRgba();
-      context.fill();
+      fill.drawInContext(context, transform.k);
     }
     if (stroke) {
       context.save();

package/dist/components/molecules/canvas-map/lib/styles/Fill.d.ts

@@ -1,7 +1,33 @@
+/**
+ * @class Fill
+ * @description Represents a fill style for a feature
+ * @property {string} color - The color of the fill
+ * @property {number} opacity - The opacity of the fill
+ * @property {HashPattern} pattern - The pattern of the fill
+ */
 export class Fill {
-    constructor(options: any);
-    color: any;
-    opacity: any;
+    /**
+     * @constructor
+     * @description Creates a new instance of the Fill class
+     * @param {Object} [options] - The options for the fill
+     * @param {string} [options.color="#CCC"] - The color of the fill
+     * @param {number} [options.opacity=1] - The opacity of the fill
+     * @param {Object} [options.pattern=null] - The pattern of the fill
+     */
+    constructor(options?: {
+        color?: string;
+        opacity?: number;
+        pattern?: any;
+    });
+    color: string;
+    opacity: number;
+    pattern: any;
     _getRgba: (...arg0: any[]) => string;
+    /**
+     * @function getRgba
+     * @description Returns the fill color as an RGBA string
+     * @returns {string} The fill color with opacity applied
+     */
     getRgba(): string;
+    drawInContext(context: any, scale: any): void;
 }

package/dist/components/molecules/canvas-map/lib/styles/Fill.js

@@ -1,14 +1,36 @@
 import { memoise } from "../util/memoise.js";
 import { toRgba } from "../util/toRgba.js";
 class Fill {
+  /**
+   * @constructor
+   * @description Creates a new instance of the Fill class
+   * @param {Object} [options] - The options for the fill
+   * @param {string} [options.color="#CCC"] - The color of the fill
+   * @param {number} [options.opacity=1] - The opacity of the fill
+   * @param {Object} [options.pattern=null] - The pattern of the fill
+   */
   constructor(options) {
     this.color = (options == null ? void 0 : options.color) || "#CCC";
     this.opacity = (options == null ? void 0 : options.opacity) || 1;
+    this.pattern = (options == null ? void 0 : options.pattern) || null;
     this._getRgba = memoise(toRgba);
   }
+  /**
+   * @function getRgba
+   * @description Returns the fill color as an RGBA string
+   * @returns {string} The fill color with opacity applied
+   */
   getRgba() {
     return this._getRgba(this.color, this.opacity);
   }
+  drawInContext(context, scale) {
+    if (this.pattern) {
+      context.fillStyle = this.pattern.createPatternInContext(context, scale);
+    } else {
+      context.fillStyle = this.getRgba();
+    }
+    context.fill();
+  }
 }
 export {
   Fill

package/dist/components/molecules/canvas-map/lib/styles/HashPattern.d.ts

@@ -0,0 +1,38 @@
+/**
+ * HashPattern creates a diagonally-striped pattern used to fill a canvas element.
+ *
+ * Use `createPatternInContext` to create a pattern that can be used as a `fillStyle`.
+ */
+export class HashPattern {
+    /**
+     * @param {Object} options
+     * @param {number} [options.stripeWidth=4] - width of the pattern's stripes
+     * @param {number} [options.gapWidth =10] - width of the gap between the stripes
+     * @param {string} [options.stripeColor="#eee"]
+     * @param {string} [options.gapColor="#777"]
+     */
+    constructor({ stripeWidth, gapWidth, gapColor, stripeColor, }: {
+        stripeWidth?: number;
+        gapWidth?: number;
+        stripeColor?: string;
+        gapColor?: string;
+    });
+    stripeWidth: number;
+    stripeColor: string;
+    gapwidth: number;
+    gapColor: string;
+    tileSize: number;
+    offscreenCanvas: HTMLCanvasElement;
+    lastDrawnScale: any;
+    lastDrawnPattern: CanvasPattern;
+    /**
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {number} scale
+     */
+    createPatternInContext(ctx: CanvasRenderingContext2D, scale: number): CanvasPattern;
+    /**
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {number} scale
+     */
+    _createPattern(ctx: CanvasRenderingContext2D, scale: number): CanvasPattern;
+}

package/dist/components/molecules/canvas-map/lib/styles/HashPattern.js

@@ -0,0 +1,72 @@
+class HashPattern {
+  /**
+   * @param {Object} options
+   * @param {number} [options.stripeWidth=4] - width of the pattern's stripes
+   * @param {number} [options.gapWidth =10] - width of the gap between the stripes
+   * @param {string} [options.stripeColor="#eee"]
+   * @param {string} [options.gapColor="#777"]
+   */
+  constructor({
+    stripeWidth = 4,
+    gapWidth = 8,
+    gapColor = "#eee",
+    stripeColor = "#777"
+  }) {
+    this.stripeWidth = stripeWidth;
+    this.stripeColor = stripeColor;
+    this.gapwidth = gapWidth;
+    this.gapColor = gapColor;
+    const hypot = stripeWidth * 2 + gapWidth * 2;
+    this.tileSize = Math.round(hypot / Math.SQRT2);
+    this.offscreenCanvas = document.createElement("canvas");
+    this.lastDrawnScale = null;
+    this.lastDrawnPattern = null;
+  }
+  /**
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {number} scale
+   */
+  createPatternInContext(ctx, scale) {
+    const roundedScale = Math.round(scale);
+    if (roundedScale === this.lastDrawnScale) {
+      return this.lastDrawnPattern;
+    }
+    this.lastDrawnPattern = this._createPattern(ctx, roundedScale);
+    this.lastDrawnScale = roundedScale;
+    return this.lastDrawnPattern;
+  }
+  /**
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {number} scale
+   */
+  _createPattern(ctx, scale) {
+    const size = this.tileSize * scale;
+    this.offscreenCanvas.width = size;
+    this.offscreenCanvas.height = size;
+    const offCtx = this.offscreenCanvas.getContext("2d");
+    if (this.gapColor) {
+      offCtx.fillStyle = this.gapColor;
+      offCtx.fillRect(0, 0, size, size);
+    }
+    const lineWidth = this.stripeWidth * scale;
+    offCtx.strokeStyle = this.stripeColor;
+    offCtx.lineWidth = lineWidth;
+    offCtx.lineCap = "square";
+    offCtx.beginPath();
+    offCtx.moveTo(-1, 1);
+    offCtx.lineTo(1, -1);
+    offCtx.moveTo(0, size);
+    offCtx.lineTo(size, 0);
+    offCtx.moveTo(size - 1, size + 1);
+    offCtx.lineTo(size + 1, size - 1);
+    offCtx.stroke();
+    const pattern = ctx.createPattern(this.offscreenCanvas, "repeat");
+    pattern.setTransform(
+      new DOMMatrix().scale(1 / Math.round(scale), 1 / Math.round(scale))
+    );
+    return pattern;
+  }
+}
+export {
+  HashPattern
+};

package/dist/components/molecules/canvas-map/lib/styles/Style.d.ts

@@ -8,7 +8,7 @@
  * @class
  * @property {Object} properties - The properties of the style
  * @property {Object} properties.stroke - The stroke color of the style
- * @property {Object} properties.fill - The fill color of the style
+ * @property {Fill} properties.fill - The fill color of the style
  * @property {Object} properties.text - The text color of the style
  */
 export class Style {

package/dist/components/molecules/canvas-map/lib/styles/index.d.ts

@@ -1,4 +1,5 @@
-export * from './Style';
 export * from './Stroke';
+export * from './HashPattern';
 export * from './Fill';
 export * from './Text';
+export * from './Style';

package/dist/index.js

@@ -42,10 +42,11 @@ import { MapEvent } from "./components/molecules/canvas-map/lib/events/MapEvent.
 import { Projection } from "./components/molecules/canvas-map/lib/projection/index.js";
 import { TextLayer } from "./components/molecules/canvas-map/lib/layers/TextLayer.js";
 import { VectorLayer } from "./components/molecules/canvas-map/lib/layers/VectorLayer.js";
-import { Style } from "./components/molecules/canvas-map/lib/styles/Style.js";
 import { Stroke, StrokePosition } from "./components/molecules/canvas-map/lib/styles/Stroke.js";
+import { HashPattern } from "./components/molecules/canvas-map/lib/styles/HashPattern.js";
 import { Fill } from "./components/molecules/canvas-map/lib/styles/Fill.js";
 import { Text } from "./components/molecules/canvas-map/lib/styles/Text.js";
+import { Style } from "./components/molecules/canvas-map/lib/styles/Style.js";
 import { GeoCoordinate } from "./components/molecules/canvas-map/lib/util/coordinate.js";
 import { GeoBounds } from "./components/molecules/canvas-map/lib/util/bounds.js";
 import { Extent, combineExtents, containsCoordinate, containsXY, extentForCoordinates } from "./components/molecules/canvas-map/lib/util/extent.js";
@@ -89,6 +90,7 @@ export {
   GeoJSON,
   GradientIcon,
   GridType,
+  HashPattern,
   InfoButton,
   LabelOverlapConfig,
   LabelType,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guardian/interactive-component-library",
   "private": false,
-  "version": "0.3.2",
+  "version": "0.4.0",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",