@guardian/interactive-component-library 0.5.6 → 0.6.0

package/dist/components/molecules/canvas-map/controls/ZoomControl.d.ts

@@ -1,6 +1,15 @@
-export function ZoomControl({ resetEnabled, onZoomIn, onZoomOut, onReset }: {
-    resetEnabled: any;
-    onZoomIn: any;
-    onZoomOut: any;
-    onReset: any;
+/**
+ * @param {Object} props
+ * @param {boolean} props.resetEnabled
+ * @param {boolean} props.resetVisible
+ * @param {(event: MouseEvent) => {}} props.onZoomIn
+ * @param {(event: MouseEvent) => {}} props.onZoomOut
+ * @param {(event: MouseEvent) => {}} props.onReset
+ */
+export function ZoomControl({ resetEnabled, resetVisible, onZoomIn, onZoomOut, onReset, }: {
+    resetEnabled: boolean;
+    resetVisible: boolean;
+    onZoomIn: (event: MouseEvent) => {};
+    onZoomOut: (event: MouseEvent) => {};
+    onReset: (event: MouseEvent) => {};
 }): import("preact").JSX.Element;

package/dist/components/molecules/canvas-map/controls/ZoomControl.js

@@ -3,7 +3,13 @@ import { IconMinus } from "./icons/minus.js";
 import { IconPlus } from "./icons/plus.js";
 import { IconReset } from "./icons/reset.js";
 import styles from "./style.module.css.js";
-function ZoomControl({ resetEnabled, onZoomIn, onZoomOut, onReset }) {
+function ZoomControl({
+  resetEnabled,
+  resetVisible,
+  onZoomIn,
+  onZoomOut,
+  onReset
+}) {
   const _onZoomIn = (event) => {
     event.stopPropagation();
     onZoomIn(event);
@@ -23,6 +29,7 @@ function ZoomControl({ resetEnabled, onZoomIn, onZoomOut, onReset }) {
       "button",
       {
         className: styles.button,
+        style: { display: resetVisible ? "block" : "none" },
         onClick: _onReset,
         disabled: !resetEnabled,
         children: /* @__PURE__ */ jsx(

package/dist/components/molecules/canvas-map/lib/renderers/TextLayerRenderer.d.ts

@@ -49,17 +49,6 @@ export class TextLayerRenderer {
         maxX: number;
         maxY: number;
     };
-    /**
-     * @param {import("../styles/Text").Text} textStyle
-     * @param {{x: number, y: number}} position
-     */
-    getElementPosition(textStyle: import('../styles/Text').Text, position: {
-        x: number;
-        y: number;
-    }): {
-        left: string;
-        top: string;
-    };
     getCollisionBoxElement(bbox: any): HTMLDivElement;
     /**
      * Draws a `Text` element's icon on the canvas.

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

@@ -48,15 +48,20 @@ class TextLayerRenderer {
       );
       const textElement = this.getTextElementWithID(feature.uid);
       textElement.innerText = featureStyle.text.content;
-      const [canvasX, canvasY] = transform.apply(point.coordinates);
+      const [canvasX, canvasY] = featureStyle.text.callout ? transform.apply(
+        projection([
+          featureStyle.text.callout.offsetTo.x,
+          featureStyle.text.callout.offsetTo.y
+        ])
+      ) : transform.apply(point.coordinates);
       const [relativeX, relativeY] = [
         canvasX / sizeInPixels[0],
         canvasY / sizeInPixels[1]
       ];
-      const position = this.getElementPosition(featureStyle.text, {
-        x: relativeX,
-        y: relativeY
-      });
+      const position = {
+        left: `${relativeX * 100}%`,
+        top: `${relativeY * 100}%`
+      };
       const elementDimens = this.styleTextElement(
         textElement,
         featureStyle.text,
@@ -78,13 +83,14 @@ class TextLayerRenderer {
         canvasCtx ?? (canvasCtx = canvasSingleton.getContext2d());
       }
       if (callout) {
-        const canvasOffsetX = (callout.offsetBy.x - callout.leaderGap) * window.devicePixelRatio;
-        const canvasOffsetY = callout.offsetBy.y * window.devicePixelRatio;
+        const [originalX, originalY] = transform.apply(point.coordinates);
+        const offsetDiffX = canvasX - originalX;
+        const offsetDiffY = canvasY - originalY;
         canvasCtx.beginPath();
-        canvasCtx.moveTo(canvasX, canvasY);
-        canvasCtx.lineTo(canvasX + canvasOffsetX / 2, canvasY + canvasOffsetY);
-        canvasCtx.moveTo(canvasX + canvasOffsetX / 2, canvasY + canvasOffsetY);
-        canvasCtx.lineTo(canvasX + canvasOffsetX, canvasY + canvasOffsetY);
+        canvasCtx.moveTo(originalX, originalY);
+        canvasCtx.lineTo(originalX + offsetDiffX / 2, originalY + offsetDiffY);
+        canvasCtx.moveTo(originalX + offsetDiffX / 2, canvasY);
+        canvasCtx.lineTo(canvasX, canvasY);
         canvasCtx.strokeStyle = callout.leaderColor;
         canvasCtx.lineWidth = callout.leaderWidth;
         canvasCtx.stroke();
@@ -95,10 +101,6 @@ class TextLayerRenderer {
         canvasCtx.save();
         let iconPosX = relativeX * viewPortSize[0];
         let iconPosY = relativeY * viewPortSize[1];
-        if (callout) {
-          iconPosX += callout.offsetBy.x;
-          iconPosY += callout.offsetBy.y;
-        }
         if (icon.position === "right") {
           iconPosX += elementDimens.width;
         } else if (icon.position === "left") {
@@ -200,12 +202,6 @@ class TextLayerRenderer {
     let minY = position.y + translateY - collisionPadding.top;
     let maxX = minX + dimens.width + collisionPadding.left + collisionPadding.right;
     let maxY = minY + dimens.height + collisionPadding.top + collisionPadding.bottom;
-    if (textStyle.callout) {
-      minX += textStyle.callout.offsetBy.x;
-      minY += textStyle.callout.offsetBy.y;
-      maxX += textStyle.callout.offsetBy.x;
-      maxY += textStyle.callout.offsetBy.y;
-    }
     minX = Math.floor(minX);
     minY = Math.floor(minY);
     maxX = Math.ceil(maxX);
@@ -217,22 +213,6 @@ class TextLayerRenderer {
       maxY
     };
   }
-  /**
-   * @param {import("../styles/Text").Text} textStyle
-   * @param {{x: number, y: number}} position
-   */
-  getElementPosition(textStyle, position) {
-    if (textStyle.callout) {
-      return {
-        left: `calc(${position.x * 100}% + ${textStyle.callout.offsetBy.x}px)`,
-        top: `calc(${position.y * 100}% + ${textStyle.callout.offsetBy.y}px)`
-      };
-    }
-    return {
-      left: `${position.x * 100}%`,
-      top: `${position.y * 100}%`
-    };
-  }
   getCollisionBoxElement(bbox) {
     const element = document.createElement("div");
     const style = element.style;

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

@@ -2,9 +2,9 @@
  * TODO: add leader 'style' option, e.g. kink, direct, manhattan, etc.
  *
  * @typedef CalloutOptions
- * @property {{ x: number, y: number }} offsetBy { x, y } offset in pixels, relative to the text position.
+ * @property {{ x: number, y: number }} offsetTo { x, y } map coordinates to offset the text to.
  *
- * E.g. { x: 10, y: 20 } will move the callout 10 pixels to the right and 20 pixels down.
+ * E.g. { x: 200, y: 300 } will place the callout at map coordinates (200, 300).
  * @property {number} [leaderGap=5] Distance in pixels between the leader line and the text
  * @property {string} [leaderColor="#121212"] Hex colour of the leader line
  * @property {number} [leaderWidth=1] Stroke width of the leader line
@@ -106,16 +106,16 @@ export class Text implements TextStyle {
  */
 export type CalloutOptions = {
     /**
-     * { x, y } offset in pixels, relative to the text position.
+     * { x, y } map coordinates to offset the text to.
      *
-     * E.g. { x: 10, y: 20 } will move the callout 10 pixels to the right and 20 pixels down.
+     * E.g. { x: 200, y: 300 } will place the callout at map coordinates (200, 300).
      */
     /**
-     * { x, y } offset in pixels, relative to the text position.
+     * { x, y } map coordinates to offset the text to.
      *
-     * E.g. { x: 10, y: 20 } will move the callout 10 pixels to the right and 20 pixels down.
+     * E.g. { x: 200, y: 300 } will place the callout at map coordinates (200, 300).
      */
-    offsetBy: {
+    offsetTo: {
         x: number;
         y: number;
     };

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

@@ -16,7 +16,7 @@ class Text {
    * @param {TextStyle} [options] Style options
    */
   constructor(options) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g;
     this.content = options == null ? void 0 : options.content;
     this.anchor = (options == null ? void 0 : options.anchor) || TextAnchor.CENTER;
     this.fontFamily = (options == null ? void 0 : options.fontFamily) || "var(--text-sans)";
@@ -28,17 +28,16 @@ class Text {
     this.radialOffset = (options == null ? void 0 : options.radialOffset) || 0;
     if (options.callout) {
       this.callout = options.callout;
-      (_a = this.callout).offsetBy ?? (_a.offsetBy = { x: 0, y: 0 });
-      (_b = this.callout).leaderGap ?? (_b.leaderGap = 5);
-      (_c = this.callout).leaderColor ?? (_c.leaderColor = "#121212");
-      (_d = this.callout).leaderWidth ?? (_d.leaderWidth = 1);
+      (_a = this.callout).leaderGap ?? (_a.leaderGap = 5);
+      (_b = this.callout).leaderColor ?? (_b.leaderColor = "#121212");
+      (_c = this.callout).leaderWidth ?? (_c.leaderWidth = 1);
     }
     if (options.icon) {
       this.icon = options.icon;
-      (_e = this.icon).shape ?? (_e.shape = "circle");
-      (_f = this.icon).position ?? (_f.position = "left");
-      (_g = this.icon).size ?? (_g.size = 10);
-      (_h = this.icon).padding ?? (_h.padding = 5);
+      (_d = this.icon).shape ?? (_d.shape = "circle");
+      (_e = this.icon).position ?? (_e.position = "left");
+      (_f = this.icon).size ?? (_f.size = 10);
+      (_g = this.icon).padding ?? (_g.padding = 5);
     }
   }
   /**

package/dist/style.css

@@ -1237,6 +1237,18 @@ button {
 .border-color--undeclared {
   border-color: var(--undeclared) !important;
 }
+.border-color--ind-dem {
+  border-color: var(--ind-dem) !important;
+}
+.border-color--lib {
+  border-color: var(--lib) !important;
+}
+.border-color--grn {
+  border-color: var(--grn) !important;
+}
+.border-color--ken {
+  border-color: var(--ken) !important;
+}
 /* BEFORE-ELEMENT-COLOR ----------------------------------------------------- */
 .before-color--dem:before {
   background-color: var(--dem) !important;

package/package.json

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