layerchart 0.54.0 → 0.54.1

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 -->

package/dist/components/TransformContext.svelte

@@ -1,9 +1,34 @@
-<script context="module">import { getContext, setContext } from 'svelte';
-import { writable, derived } from 'svelte/store';
-export const transformContextKey = Symbol();
-const defaultTranslate = writable({ x: 0, y: 0 });
-const defaultScale = writable(1);
-const defaultContext = {
+<script lang="ts" context="module">
+  import { getContext, setContext } from 'svelte';
+  import { writable, type Readable, type Writable, derived } from 'svelte/store';
+
+  export const transformContextKey = Symbol();
+
+  type TransformMode = 'canvas' | 'manual' | 'none';
+  type TransformScrollMode = 'scale' | 'translate' | 'none';
+
+  export type TransformContextValue = {
+    mode: TransformMode;
+    scale: Writable<number>;
+    setScale(value: number, options?: MotionOptions): void;
+    translate: Writable<{ x: number; y: number }>;
+    setTranslate(point: { x: number; y: number }, options?: MotionOptions): void;
+    moving: Readable<boolean>;
+    dragging: Readable<boolean>;
+    scrollMode: Readable<TransformScrollMode>;
+    setScrollMode(mode: TransformScrollMode): void;
+    reset(): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    translateCenter(): void;
+    zoomTo(center: { x: number; y: number }, rect?: { width: number; height: number }): void;
+  };
+
+  export type TransformContext = TransformContextValue;
+
+  const defaultTranslate = writable({ x: 0, y: 0 });
+  const defaultScale = writable(1);
+  const defaultContext: TransformContext = {
     mode: 'none',
     scale: defaultScale,
     setScale: defaultScale.set,
@@ -12,194 +37,269 @@ const defaultContext = {
     moving: writable(false),
     dragging: writable(false),
     scrollMode: writable('none'),
-    setScrollMode: () => { },
-    reset: () => { },
-    zoomIn: () => { },
-    zoomOut: () => { },
-    translateCenter: () => { },
-    zoomTo: () => { },
-};
-export function transformContext() {
-    return getContext(transformContextKey) ?? defaultContext;
-}
-function setTransformContext(transform) {
+    setScrollMode: () => {},
+    reset: () => {},
+    zoomIn: () => {},
+    zoomOut: () => {},
+    translateCenter: () => {},
+    zoomTo: () => {},
+  };
+  export function transformContext() {
+    return getContext<TransformContext>(transformContextKey) ?? defaultContext;
+  }
+
+  function setTransformContext(transform: TransformContext) {
     setContext(transformContextKey, transform);
-}
+  }
 </script>
 
-<script>import { createEventDispatcher } from 'svelte';
-import { chartContext } from './ChartContext.svelte';
-import { motionStore, motionFinishHandler } from '../stores/motionStore.js';
-const { width, height } = chartContext();
-export let mode = 'none';
-/** Translate towards point (ex. mouse cursor/center) while zooming in/out */
-export let translateOnScale = false;
-export let spring = undefined;
-export let tweened = undefined;
-export let processTranslate = (x, y, deltaX, deltaY, scale) => {
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  import { chartContext } from './ChartContext.svelte';
+  import { motionStore, type MotionOptions, motionFinishHandler } from '../stores/motionStore.js';
+
+  const { width, height } = chartContext();
+
+  export let mode: TransformMode = 'none';
+  /** Translate towards point (ex. mouse cursor/center) while zooming in/out */
+  export let translateOnScale = false;
+
+  export let spring: boolean | Parameters<typeof motionStore>[1]['spring'] = undefined;
+  export let tweened: boolean | Parameters<typeof motionStore>[1]['tweened'] = undefined;
+
+  export let processTranslate = (
+    x: number,
+    y: number,
+    deltaX: number,
+    deltaY: number,
+    scale: number
+  ) => {
     return {
-        x: x + deltaX / scale,
-        y: y + deltaY / scale,
+      x: x + deltaX / scale,
+      y: y + deltaY / scale,
     };
-};
-/** Disable pointer events including move/dragging.  Useful for `mode="canvas" but only want zoomTo() interactions */
-export let disablePointer = false;
-/** Action to take during wheel scroll */
-export let initialScrollMode = 'none';
-/** Distance/threshold to consider drag vs click (disable click propagation) */
-export let clickDistance = 10;
-const dispatch = createEventDispatcher();
-let pointerDown = false;
-const dragging = writable(false);
-const scrollMode = writable(initialScrollMode);
-const DEFAULT_TRANSLATE = { x: 0, y: 0 };
-export let initialTranslate = undefined;
-export const translate = motionStore(initialTranslate ?? DEFAULT_TRANSLATE, { spring, tweened });
-const DEFAULT_SCALE = 1;
-export let initialScale = undefined;
-export const scale = motionStore(initialScale ?? DEFAULT_SCALE, { spring, tweened });
-let startPoint = { x: 0, y: 0 };
-let startTranslate = { x: 0, y: 0 };
-export function setScrollMode(mode) {
+  };
+
+  /** Disable pointer events including move/dragging.  Useful for `mode="canvas" but only want zoomTo() interactions */
+  export let disablePointer = false;
+
+  /** Action to take during wheel scroll */
+  export let initialScrollMode: TransformScrollMode = 'none';
+
+  /** Distance/threshold to consider drag vs click (disable click propagation) */
+  export let clickDistance = 10;
+
+  const dispatch = createEventDispatcher<{
+    dragstart: null;
+    dragend: null;
+    transform: { scale: number; translate: { x: number; y: number } };
+  }>();
+
+  let pointerDown = false;
+  const dragging = writable(false);
+  const scrollMode = writable<TransformScrollMode>(initialScrollMode);
+
+  const DEFAULT_TRANSLATE = { x: 0, y: 0 };
+  export let initialTranslate: { x: number; y: number } | undefined = undefined;
+  export const translate = motionStore(initialTranslate ?? DEFAULT_TRANSLATE, { spring, tweened });
+
+  const DEFAULT_SCALE = 1;
+  export let initialScale: number | undefined = undefined;
+  export const scale = motionStore(initialScale ?? DEFAULT_SCALE, { spring, tweened });
+
+  let startPoint: { x: number; y: number } = { x: 0, y: 0 };
+  let startTranslate: { x: number; y: number } = { x: 0, y: 0 };
+
+  export function setScrollMode(mode: TransformScrollMode) {
     $scrollMode = mode;
-}
-export function reset() {
+  }
+
+  export function reset() {
     $translate = initialTranslate ?? DEFAULT_TRANSLATE;
     $scale = initialScale ?? DEFAULT_SCALE;
-}
-export function zoomIn() {
+  }
+
+  export function zoomIn() {
     scaleTo(1.25, { x: $width / 2, y: $height / 2 });
-}
-export function zoomOut() {
+  }
+
+  export function zoomOut() {
     scaleTo(0.8, { x: $width / 2, y: $height / 2 });
-}
-export function translateCenter() {
+  }
+
+  export function translateCenter() {
     $translate = {
-        x: 0,
-        y: 0,
+      x: 0,
+      y: 0,
     };
-}
-export function zoomTo(center, rect) {
+  }
+
+  export function zoomTo(
+    center: { x: number; y: number },
+    rect?: { width: number; height: number }
+  ) {
     // TODO: Improve with geo/projection
+
     $translate = {
-        x: $width / 2 - center.x,
-        y: $height / 2 - center.y,
+      x: $width / 2 - center.x,
+      y: $height / 2 - center.y,
     };
+
     if (rect) {
-        $scale = $width < $height ? $width / rect.width : $height / rect.height;
+      $scale = $width < $height ? $width / rect.width : $height / rect.height;
     }
-}
-function onPointerDown(e) {
-    if (mode === 'none' || disablePointer)
-        return;
+  }
+
+  function onPointerDown(e: PointerEvent & { currentTarget: HTMLDivElement }) {
+    if (mode === 'none' || disablePointer) return;
+
     e.preventDefault();
+
     pointerDown = true;
     $dragging = false;
     startPoint = localPoint(e);
     startTranslate = $translate;
+
     dispatch('dragstart');
-}
-function onPointerMove(e) {
-    if (!pointerDown)
-        return;
+  }
+
+  function onPointerMove(e: PointerEvent) {
+    if (!pointerDown) return;
+
     e.preventDefault(); // Stop text selection
+
     const endPoint = localPoint(e);
     const deltaX = endPoint.x - startPoint.x;
     const deltaY = endPoint.y - startPoint.y;
+
     if (!$dragging) {
-        // If dragged beyond threshold, disable click propagation
-        $dragging = deltaX * deltaX + deltaY * deltaY > clickDistance;
+      // If dragged beyond threshold, disable click propagation
+      $dragging = deltaX * deltaX + deltaY * deltaY > clickDistance;
     }
+
     if ($dragging) {
-        e.stopPropagation(); // Stop tooltip from trigging (along with `capture: true`)
-        // @ts-expect-error
-        e.currentTarget?.setPointerCapture(e.pointerId);
-        setTranslate(processTranslate(startTranslate.x, startTranslate.y, deltaX, deltaY, $scale), 
+      e.stopPropagation(); // Stop tooltip from trigging (along with `capture: true`)
+      // @ts-expect-error
+      e.currentTarget?.setPointerCapture(e.pointerId);
+
+      setTranslate(
+        processTranslate(startTranslate.x, startTranslate.y, deltaX, deltaY, $scale),
         // @ts-expect-error
-        spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
+        spring ? { hard: true } : tweened ? { duration: 0 } : undefined
+      );
     }
-}
-function onPointerUp(e) {
+  }
+
+  function onPointerUp(e: PointerEvent) {
     pointerDown = false;
     $dragging = false;
     dispatch('dragend');
-}
-function onClick(e) {
+  }
+
+  function onClick(e: MouseEvent) {
     if ($dragging) {
-        // Do not propagate click event to children if drag/moved.  Registered in capture phase (top-down)
-        e.stopPropagation();
+      // Do not propagate click event to children if drag/moved.  Registered in capture phase (top-down)
+      e.stopPropagation();
     }
-}
-function onDoubleClick(e) {
-    if (mode === 'none' || disablePointer)
-        return;
+  }
+
+  function onDoubleClick(e: MouseEvent) {
+    if (mode === 'none' || disablePointer) return;
     const point = localPoint(e);
     scaleTo(e.shiftKey ? 0.5 : 2, point);
-}
-function onWheel(e) {
-    if (mode === 'none' || disablePointer || $scrollMode === 'none')
-        return;
+  }
+
+  function onWheel(e: WheelEvent) {
+    if (mode === 'none' || disablePointer || $scrollMode === 'none') return;
+
     e.preventDefault();
+
     const point = (startPoint = localPoint(e));
+
     // Pinch to zoom is registered as a wheel event with control key
     const pinchToZoom = e.ctrlKey;
+
     if ($scrollMode === 'scale' || pinchToZoom) {
-        // https://github.com/d3/d3-zoom#zoom_wheelDelta
-        const scaleBy = -e.deltaY * (e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 0.002) * (e.ctrlKey ? 10 : 1);
-        scaleTo(Math.pow(2, scaleBy), point, 
+      // https://github.com/d3/d3-zoom#zoom_wheelDelta
+      const scaleBy =
+        -e.deltaY * (e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 0.002) * (e.ctrlKey ? 10 : 1);
+
+      scaleTo(
+        Math.pow(2, scaleBy),
+        point,
         // @ts-expect-error
-        spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
-    }
-    else if ($scrollMode === 'translate') {
-        translate.update((startTranslate) => processTranslate(startTranslate.x, startTranslate.y, -e.deltaX, -e.deltaY, $scale), 
+        spring ? { hard: true } : tweened ? { duration: 0 } : undefined
+      );
+    } else if ($scrollMode === 'translate') {
+      translate.update(
+        (startTranslate) =>
+          processTranslate(startTranslate.x, startTranslate.y, -e.deltaX, -e.deltaY, $scale),
         // @ts-expect-error
-        spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
+        spring ? { hard: true } : tweened ? { duration: 0 } : undefined
+      );
     }
-}
-/**
- * Apply scale and translate towards point
- */
-function scaleTo(value, point, options = undefined) {
+  }
+
+  /**
+   * Apply scale and translate towards point
+   */
+  function scaleTo(
+    value: number,
+    point: { x: number; y: number },
+    options: Parameters<typeof motionStore>[1] | undefined = undefined
+  ) {
     const currentScale = $scale;
     const newScale = $scale * value;
     setScale(newScale, options);
+
     if (translateOnScale) {
-        // Translate towards point (ex. mouse cursor/center) while zooming in/out
-        const invertTransformPoint = {
-            x: (point.x - $translate.x) / currentScale,
-            y: (point.y - $translate.y) / currentScale,
-        };
-        const newTranslate = {
-            x: point.x - invertTransformPoint.x * newScale,
-            y: point.y - invertTransformPoint.y * newScale,
-        };
-        setTranslate(newTranslate, options);
+      // Translate towards point (ex. mouse cursor/center) while zooming in/out
+      const invertTransformPoint = {
+        x: (point.x - $translate.x) / currentScale,
+        y: (point.y - $translate.y) / currentScale,
+      };
+      const newTranslate = {
+        x: point.x - invertTransformPoint.x * newScale,
+        y: point.y - invertTransformPoint.y * newScale,
+      };
+      setTranslate(newTranslate, options);
     }
-}
-const translating = motionFinishHandler();
-const scaling = motionFinishHandler();
-const moving = derived([dragging, translating, scaling], ([dragging, translating, scaling]) => dragging || translating || scaling);
-export function setTranslate(point, options) {
+  }
+
+  const translating = motionFinishHandler();
+  const scaling = motionFinishHandler();
+  const moving = derived(
+    [dragging, translating, scaling],
+    ([dragging, translating, scaling]) => dragging || translating || scaling
+  );
+  export function setTranslate(point: { x: number; y: number }, options?: MotionOptions) {
     // @ts-expect-error
     translating.handle(translate.set(point, options));
-}
-export function setScale(value, options) {
+  }
+
+  export function setScale(value: number, options?: MotionOptions) {
     // @ts-expect-error
     scaling.handle(scale.set(value, options));
-}
-function localPoint(e) {
+  }
+
+  function localPoint(e: PointerEvent | MouseEvent | WheelEvent) {
     return {
-        x: e.offsetX,
-        y: e.offsetY,
+      x: e.offsetX,
+      y: e.offsetY,
     };
-}
-$: center = { x: $width / 2, y: $height / 2 };
-$: viewportCenter = {
+  }
+
+  $: center = { x: $width / 2, y: $height / 2 };
+
+  $: viewportCenter = {
     x: center.x - $translate.x,
     y: center.y - $translate.y,
-};
-$: dispatch('transform', { scale: $scale, translate: $translate });
-setTransformContext({
+  };
+
+  $: dispatch('transform', { scale: $scale, translate: $translate });
+
+  setTransformContext({
     mode,
     scale,
     setScale,
@@ -214,7 +314,7 @@ setTransformContext({
     zoomTo,
     scrollMode,
     setScrollMode,
-});
+  });
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

package/dist/components/TransformControls.svelte

@@ -1,36 +1,64 @@
-<script>import { Button, Icon, MenuButton, Tooltip } from 'svelte-ux';
-import { cls } from '@layerstack/tailwind';
-import { mdiArrowULeftTop, mdiMagnifyPlusOutline, mdiMagnifyMinusOutline, mdiImageFilterCenterFocus, mdiChevronDown, mdiResize, mdiArrowExpandAll, mdiCancel, } from '@mdi/js';
-import { transformContext } from './TransformContext.svelte';
-export let placement = 'top-right';
-export let orientation = 'vertical';
-export let show = ['zoomIn', 'zoomOut', 'center', 'reset', 'scrollMode'];
-$: menuPlacementByOrientationAndPlacement = {
+<script lang="ts">
+  import { Button, Icon, MenuButton, Tooltip } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
+
+  import {
+    mdiArrowULeftTop,
+    mdiMagnifyPlusOutline,
+    mdiMagnifyMinusOutline,
+    mdiImageFilterCenterFocus,
+    mdiChevronDown,
+    mdiResize,
+    mdiArrowExpandAll,
+    mdiCancel,
+  } from '@mdi/js';
+
+  import { transformContext } from './TransformContext.svelte';
+
+  type Placement =
+    | 'top-left'
+    | 'top'
+    | 'top-right'
+    | 'left'
+    | 'center'
+    | 'right'
+    | 'bottom-left'
+    | 'bottom'
+    | 'bottom-right';
+
+  export let placement: Placement = 'top-right';
+  export let orientation: 'horizontal' | 'vertical' = 'vertical';
+
+  type Actions = 'zoomIn' | 'zoomOut' | 'center' | 'reset' | 'scrollMode';
+  export let show: Actions[] = ['zoomIn', 'zoomOut', 'center', 'reset', 'scrollMode'];
+
+  $: menuPlacementByOrientationAndPlacement = {
     horizontal: {
-        'top-left': 'bottom-end',
-        top: 'bottom-end',
-        'top-right': 'bottom-end',
-        left: 'bottom-end',
-        center: 'bottom-end',
-        right: 'bottom-end',
-        'bottom-left': 'top-end',
-        bottom: 'top-end',
-        'bottom-right': 'top-end',
+      'top-left': 'bottom-end',
+      top: 'bottom-end',
+      'top-right': 'bottom-end',
+      left: 'bottom-end',
+      center: 'bottom-end',
+      right: 'bottom-end',
+      'bottom-left': 'top-end',
+      bottom: 'top-end',
+      'bottom-right': 'top-end',
     },
     vertical: {
-        'top-left': 'right-start',
-        top: 'right-start',
-        'top-right': 'left-start',
-        left: 'right-start',
-        center: 'right-start',
-        right: 'left-start',
-        'bottom-left': 'right-end',
-        bottom: 'right-end',
-        'bottom-right': 'left-end',
+      'top-left': 'right-start',
+      top: 'right-start',
+      'top-right': 'left-start',
+      left: 'right-start',
+      center: 'right-start',
+      right: 'left-start',
+      'bottom-left': 'right-end',
+      bottom: 'right-end',
+      'bottom-right': 'left-end',
     },
-};
-const transform = transformContext();
-const scrollMode = transform.scrollMode;
+  } as const;
+
+  const transform = transformContext();
+  const scrollMode = transform.scrollMode;
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->