layerchart 0.54.0 → 0.55.0

package/dist/components/Text.svelte

@@ -1,134 +1,167 @@
-<script>import { tick } from 'svelte';
-import { cls } from '@layerstack/tailwind';
-import { getStringWidth } from '../utils/string.js';
-import { motionStore } from '../stores/motionStore.js';
-/*
-  TODO:
-    - [ ] Handle styled text (use <slot /> to measure?)
-          - [ ] Simplify by using `alignment-baseline` / `dominant-baseline`, rework multiline or drop support, etc
-            - https://svelte.dev/repl/f12d3003313a43ba8a0be53e5786f1c7?version=3.44.3
-              - https://observablehq.com/@neocartocnrs/cheat-sheet-on-texts-in-svg
-
-  Reference:
-  - https://bl.ocks.org/mbostock/7555321
-  - https://github.com/airbnb/visx/blob/master/packages/visx-text/src/Text.tsx
-    - https://airbnb.io/visx/text
-    - https://github.com/airbnb/visx/blob/master/packages/visx-demo/src/pages/text.tsx
-*/
-/** text value */
-export let value = 0;
-/** Maximum width to occupy (approximate as words are not split) */
-export let width = undefined;
-/** x position of the text */
-export let x = 0;
-export let initialX = x;
-/** y position of the text */
-export let y = 0;
-export let initialY = y;
-/** dx offset of the text */
-export let dx = 0;
-/** dy offset of the text */
-export let dy = 0;
-/** Desired "line height" of the text, implemented as y offsets */
-export let lineHeight = '1em';
-/** Cap height of the text */
-export let capHeight = '0.71em'; // Magic number from d3
-/** Whether to scale the fontSize to accommodate the specified width  */
-export let scaleToFit = false;
-/** Horizontal text anchor */
-export let textAnchor = 'start';
-/** Vertical text anchor */
-export let verticalAnchor = 'end'; // default SVG behavior
-/** Rotational angle of the text */
-export let rotate = undefined;
-let wordsByLines = [];
-let wordsWithWidth = [];
-let spaceWidth = 0;
-let style = undefined; // TODO: read from DOM?
-$: words = value != null ? value.toString().split(/(?:(?!\u00A0+)\s+)/) : [];
-$: wordsWithWidth = words.map((word) => ({
+<script lang="ts">
+  import { tick } from 'svelte';
+  import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+  import { cls } from '@layerstack/tailwind';
+
+  import { getStringWidth } from '../utils/string.js';
+  import { motionStore } from '../stores/motionStore.js';
+
+  /*
+    TODO:
+      - [ ] Handle styled text (use <slot /> to measure?)
+			- [ ] Simplify by using `alignment-baseline` / `dominant-baseline`, rework multiline or drop support, etc
+			  - https://svelte.dev/repl/f12d3003313a43ba8a0be53e5786f1c7?version=3.44.3
+				- https://observablehq.com/@neocartocnrs/cheat-sheet-on-texts-in-svg
+
+    Reference:
+    - https://bl.ocks.org/mbostock/7555321
+    - https://github.com/airbnb/visx/blob/master/packages/visx-text/src/Text.tsx
+      - https://airbnb.io/visx/text
+      - https://github.com/airbnb/visx/blob/master/packages/visx-demo/src/pages/text.tsx
+  */
+
+  /** text value */
+  export let value: string | number = 0;
+
+  /** Maximum width to occupy (approximate as words are not split) */
+  export let width: number | undefined = undefined;
+
+  /** x position of the text */
+  export let x: string | number = 0;
+  export let initialX = x;
+
+  /** y position of the text */
+  export let y: string | number = 0;
+  export let initialY = y;
+
+  /** dx offset of the text */
+  export let dx: string | number = 0;
+
+  /** dy offset of the text */
+  export let dy: string | number = 0;
+
+  /** Desired "line height" of the text, implemented as y offsets */
+  export let lineHeight = '1em';
+
+  /** Cap height of the text */
+  export let capHeight = '0.71em'; // Magic number from d3
+
+  /** Whether to scale the fontSize to accommodate the specified width  */
+  export let scaleToFit: boolean = false;
+
+  /** Horizontal text anchor */
+  export let textAnchor: 'start' | 'middle' | 'end' | 'inherit' = 'start';
+
+  /** Vertical text anchor */
+  export let verticalAnchor: 'start' | 'middle' | 'end' | 'inherit' = 'end'; // default SVG behavior
+
+  /** Rotational angle of the text */
+  export let rotate: number | undefined = undefined;
+
+  let wordsByLines: { words: string[]; width?: number }[] = [];
+  let wordsWithWidth: { word: string; width: number }[] = [];
+  let spaceWidth: number = 0;
+
+  let style: CSSStyleDeclaration | undefined = undefined; // TODO: read from DOM?
+
+  $: words = value != null ? value.toString().split(/(?:(?!\u00A0+)\s+)/) : [];
+
+  $: wordsWithWidth = words.map((word) => ({
     word,
     width: getStringWidth(word, style) || 0,
-}));
-$: spaceWidth = getStringWidth('\u00A0', style) || 0;
-$: wordsByLines = wordsWithWidth.reduce((result, item) => {
+  }));
+
+  $: spaceWidth = getStringWidth('\u00A0', style) || 0;
+
+  $: wordsByLines = wordsWithWidth.reduce((result: typeof wordsByLines, item) => {
     const currentLine = result[result.length - 1];
-    if (currentLine &&
-        (width == null || scaleToFit || (currentLine.width || 0) + item.width + spaceWidth < width)) {
-        // Word can be added to an existing line
-        currentLine.words.push(item.word);
-        currentLine.width = currentLine.width || 0;
-        currentLine.width += item.width + spaceWidth;
-    }
-    else {
-        // Add first word to line or word is too long to scaleToFit on existing line
-        const newLine = { words: [item.word], width: item.width };
-        result.push(newLine);
+
+    if (
+      currentLine &&
+      (width == null || scaleToFit || (currentLine.width || 0) + item.width + spaceWidth < width)
+    ) {
+      // Word can be added to an existing line
+      currentLine.words.push(item.word);
+      currentLine.width = currentLine.width || 0;
+      currentLine.width += item.width + spaceWidth;
+    } else {
+      // Add first word to line or word is too long to scaleToFit on existing line
+      const newLine = { words: [item.word], width: item.width };
+      result.push(newLine);
     }
+
     return result;
-}, []);
-$: lines = wordsByLines.length;
-/**
- * Convert css value to pixel value (ex. 0.71em => 11.36)
- */
-function getPixelValue(cssValue) {
+  }, []);
+  $: lines = wordsByLines.length;
+
+  /**
+   * Convert css value to pixel value (ex. 0.71em => 11.36)
+   */
+  function getPixelValue(cssValue: string) {
     // TODO: Properly measure pixel values using DOM (handle inherited font size, zoom, etc)
     // @ts-expect-error
     const [match, value, units] = cssValue.match(/([\d.]+)(\D+)/);
     const number = Number(value);
     switch (units) {
-        case 'px':
-            return number;
-        case 'em':
-        case 'rem':
-            return number * 16;
-        default:
-            return 0;
+      case 'px':
+        return number;
+      case 'em':
+      case 'rem':
+        return number * 16;
+      default:
+        return 0;
     }
-}
-let startDy = 0;
-$: if (verticalAnchor === 'start') {
+  }
+
+  let startDy = 0;
+  $: if (verticalAnchor === 'start') {
     startDy = getPixelValue(capHeight);
-}
-else if (verticalAnchor === 'middle') {
+  } else if (verticalAnchor === 'middle') {
     startDy = ((lines - 1) / 2) * -getPixelValue(lineHeight) + getPixelValue(capHeight) / 2;
-}
-else {
+  } else {
     startDy = (lines - 1) * -getPixelValue(lineHeight);
-}
-let scaleTransform = '';
-$: if (scaleToFit &&
+  }
+
+  let scaleTransform = '';
+  $: if (
+    scaleToFit &&
     lines > 0 &&
     typeof x == 'number' &&
     typeof y == 'number' &&
-    typeof width == 'number') {
+    typeof width == 'number'
+  ) {
     const lineWidth = wordsByLines[0].width || 1;
     const sx = width / lineWidth;
     const sy = sx;
     const originX = x - sx * x;
     const originY = y - sy * y;
     scaleTransform = `matrix(${sx}, 0, 0, ${sy}, ${originX}, ${originY})`;
-}
-else {
+  } else {
     scaleTransform = '';
-}
-$: rotateTransform = rotate ? `rotate(${rotate}, ${x}, ${y})` : '';
-$: transform = `${scaleTransform} ${rotateTransform}`;
-function isValidXOrY(xOrY) {
+  }
+  $: rotateTransform = rotate ? `rotate(${rotate}, ${x}, ${y})` : '';
+
+  $: transform = `${scaleTransform} ${rotateTransform}`;
+
+  function isValidXOrY(xOrY: string | number | undefined) {
     return (
-    // number that is not NaN or Infinity
-    (typeof xOrY === 'number' && Number.isFinite(xOrY)) ||
-        // for percentage
-        typeof xOrY === 'string');
-}
-export let spring = undefined;
-export let tweened = undefined;
-let tweened_x = motionStore(initialX, { spring, tweened });
-let tweened_y = motionStore(initialY, { spring, tweened });
-$: tick().then(() => {
+      // number that is not NaN or Infinity
+      (typeof xOrY === 'number' && Number.isFinite(xOrY)) ||
+      // for percentage
+      typeof xOrY === 'string'
+    );
+  }
+
+  export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
+  export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
+
+  let tweened_x = motionStore(initialX, { spring, tweened });
+  let tweened_y = motionStore(initialY, { spring, tweened });
+
+  $: tick().then(() => {
     tweened_x.set(x);
     tweened_y.set(y);
-});
+  });
 </script>
 
 <!-- `overflow: visible` allow contents to be shown outside element -->

package/dist/components/Threshold.svelte

@@ -1,10 +1,21 @@
-<script>import { min } from 'd3-array';
-import { chartContext } from './ChartContext.svelte';
-import Area from './Area.svelte';
-import ClipPath from './ClipPath.svelte';
-const { y, yDomain } = chartContext();
-export let curve = undefined;
-export let defined = undefined;
+<script lang="ts">
+  /*
+    See also:
+      - https://observablehq.com/@d3/difference-chart
+      - https://github.com/airbnb/visx/issues/245
+  */
+  import type { ComponentProps } from 'svelte';
+  import type { CurveFactory } from 'd3-shape';
+  import { min } from 'd3-array';
+
+  import { chartContext } from './ChartContext.svelte';
+  import Area from './Area.svelte';
+  import ClipPath from './ClipPath.svelte';
+
+  const { y, yDomain } = chartContext();
+
+  export let curve: CurveFactory | undefined = undefined;
+  export let defined: ComponentProps<Area>['defined'] | undefined = undefined;
 </script>
 
 <!-- Recreate on curve change as otherwise is 1 state change behind for some reason -->

package/dist/components/TileImage.svelte

@@ -1,61 +1,67 @@
-<script context="module">"use strict";
-let tileCache = new Map();
+<script context="module" lang="ts">
+  let tileCache = new Map<string, Promise<string>>();
 </script>
 
-<script>import Text from './Text.svelte';
-export let x;
-export let y;
-export let z;
-/** translate x */
-export let tx;
-/** translate y */
-export let ty;
-export let scale;
-export let disableCache = false;
-export let debug = false;
-export let url;
-// if disable cache, set href immediately, otherwise set from cache / dataUri
-let href = disableCache ? url(x, y, z) : '';
-function loadImage(url) {
+<script lang="ts">
+  import Text from './Text.svelte';
+
+  export let x: number;
+  export let y: number;
+  export let z: number;
+  /** translate x */
+  export let tx: number;
+  /** translate y */
+  export let ty: number;
+  export let scale: number;
+
+  export let disableCache = false;
+  export let debug = false;
+
+  export let url: (x: number, y: number, z: number) => string;
+
+  // if disable cache, set href immediately, otherwise set from cache / dataUri
+  let href = disableCache ? url(x, y, z) : '';
+  function loadImage(url: string) {
     // const key = [x, y, z].join('-');
     const key = url;
+
     if (tileCache.has(key)) {
-        tileCache.get(key)?.then((dataUri) => {
-            // console.log('from cache', { x, y, z });
-            href = dataUri;
-        });
-    }
-    else {
-        const promise = new Promise((resolve, reject) => {
-            const img = new Image();
-            img.crossOrigin = 'anonymous';
-            img.onload = function () {
-                var canvas = document.createElement('canvas');
-                var context = canvas.getContext('2d');
-                // @ts-expect-error
-                canvas.height = this.naturalHeight;
-                // @ts-expect-error
-                canvas.width = this.naturalWidth;
-                // @ts-expect-error
-                context.drawImage(this, 0, 0);
-                var dataUri = canvas.toDataURL('image/jpeg');
-                // console.log('from load', { x, y, z });
-                href = dataUri;
-                resolve(dataUri);
-            };
-            img.onerror = (err) => {
-                tileCache.delete(key);
-                reject(err);
-            };
-            img.src = url;
-        });
-        tileCache.set(key, promise);
+      tileCache.get(key)?.then((dataUri) => {
+        // console.log('from cache', { x, y, z });
+        href = dataUri;
+      });
+    } else {
+      const promise = new Promise<string>((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = function () {
+          var canvas = document.createElement('canvas');
+          var context = canvas.getContext('2d')!;
+          // @ts-expect-error
+          canvas.height = this.naturalHeight;
+          // @ts-expect-error
+          canvas.width = this.naturalWidth;
+          // @ts-expect-error
+          context.drawImage(this, 0, 0);
+          var dataUri = canvas.toDataURL('image/jpeg');
+          // console.log('from load', { x, y, z });
+          href = dataUri;
+          resolve(dataUri);
+        };
+        img.onerror = (err) => {
+          tileCache.delete(key);
+          reject(err);
+        };
+        img.src = url;
+      });
+      tileCache.set(key, promise);
     }
-}
-$: if (!disableCache) {
+  }
+
+  $: if (!disableCache) {
     // load using cache
     loadImage(url(x, y, z));
-}
+  }
 </script>
 
 <!-- To avoid aliasing artifacts (thin white lines) between tiles, two layers of tiles are drawn, with the lower layer’s tiles enlarged by one pixel -->