@guardian/interactive-component-library 0.3.2-rc1 → 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/dist/style.css

@@ -1078,6 +1078,18 @@ button {
 .bg-color--oth {
   background-color: var(--oth) !important;
 }
+.bg-color--ind-dem {
+  background-color: var(--ind-dem) !important;
+}
+.bg-color--lib {
+  background-color: var(--lib) !important;
+}
+.bg-color--grn {
+  background-color: var(--grn) !important;
+}
+.bg-color--ken {
+  background-color: var(--ken) !important;
+}
 .bg-color--dem-2 {
   background-color: var(--dem-2) !important;
 }
@@ -1087,6 +1099,18 @@ button {
 .bg-color--oth-2 {
   background-color: var(--oth-2) !important;
 }
+.bg-color--ind-dem-2 {
+  background-color: var(--ind-dem-2) !important;
+}
+.bg-color--lib-2 {
+  background-color: var(--lib-2) !important;
+}
+.bg-color--grn-2 {
+  background-color: var(--grn-2) !important;
+}
+.bg-color--ken-2 {
+  background-color: var(--ken-2) !important;
+}
 .bg-color--undeclared {
   background-color: var(--undeclared) !important;
 }
@@ -1101,6 +1125,18 @@ button {
 .fill-color--oth {
   fill: var(--oth) !important;
 }
+.fill-color--ind-dem {
+  fill: var(--ind-dem) !important;
+}
+.fill-color--lib {
+  fill: var(--lib) !important;
+}
+.fill-color--grn {
+  fill: var(--grn) !important;
+}
+.fill-color--ken {
+  fill: var(--ken) !important;
+}
 .fill-color--dem-2 {
   fill: var(--dem-2) !important;
 }
@@ -1110,6 +1146,18 @@ button {
 .fill-color--oth-2 {
   fill: var(--oth-2) !important;
 }
+.fill-color--ind-dem-2 {
+  fill: var(--ind-dem-2) !important;
+}
+.fill-color--lib-2 {
+  fill: var(--lib-2) !important;
+}
+.fill-color--grn-2 {
+  fill: var(--grn-2) !important;
+}
+.fill-color--ken-2 {
+  fill: var(--ken-2) !important;
+}
 .fill-color--undeclared {
   fill: var(--undeclared) !important;
 }
@@ -1123,6 +1171,18 @@ button {
 .stop-color--oth {
   stop-color: var(--oth) !important;
 }
+.stop-color--ind-dem {
+  stop-color: var(--ind-dem) !important;
+}
+.stop-color--lib {
+  stop-color: var(--lib) !important;
+}
+.stop-color--grn {
+  stop-color: var(--grn) !important;
+}
+.stop-color--ken {
+  stop-color: var(--ken) !important;
+}
 .stop-color--undeclared {
   stop-color: var(--undeclared) !important;
 }
@@ -1136,6 +1196,18 @@ button {
 .stroke-color--oth {
   stroke: var(--oth) !important;
 }
+.stroke-color--ind-dem {
+  stroke: var(--ind-dem) !important;
+}
+.stroke-color--lib {
+  stroke: var(--lib) !important;
+}
+.stroke-color--grn {
+  stroke: var(--grn) !important;
+}
+.stroke-color--ken {
+  stroke: var(--ken) !important;
+}
 .stroke-color--undeclared {
   stroke: var(--undeclared) !important;
 }
@@ -1273,12 +1345,20 @@ body {
   --undeclared: #ededed;
   --declared: #fff;
   --new-group-01: #333333;
-  --dem: #2f3192;
+  --dem: #093ca3;
   --gop: #c70000;
-  --oth: #848484;
-  --dem-2: #bdbeea;
+  --oth: #707070;
+  --ind-dem: #7378d8;
+  --lib: #c6b716;
+  --grn: #0da498;
+  --ken: #ef6f07;
+  --dem-2: #dad7f5;
   --gop-2: #ffdbd4;
-  --oth-2: #c8c8c8;
+  --oth-2: #e7e7e7;
+  --ind-dem-2: #dad7f5;
+  --lib-2: #f4eac2;
+  --grn-2: #cfedea;
+  --ken-2: #ffe2cd;
   --undeclared: #e7e7e7;
 }
 @media (prefers-color-scheme: dark) {
@@ -1377,12 +1457,20 @@ body {
     --undeclared: #ededed;
     --declared: #bababa;
     --new-group-01: #cccccc;
-    --dem: #3c3eb9;
-    --gop: #dc2e1c;
+    --dem: #3261db;
+    --gop: #c70000;
     --oth: #707070;
-    --dem-2: #292b7f;
-    --gop-2: #833a2b;
+    --ind-dem: #7389d8;
+    --lib: #c6b716;
+    --grn: #23b4a9;
+    --ken: #ef6f07;
+    --dem-2: #20366d;
+    --gop-2: #5a0b0b;
     --oth-2: #333333;
+    --ind-dem-2: #394261;
+    --lib-2: #524d13;
+    --grn-2: #19524e;
+    --ken-2: #6a370e;
     --undeclared: #494949;
   }
 }._svg_b5io0_1 {

package/package.json

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