layerchart 0.54.0 → 0.55.0

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

package/dist/components/TransformControls.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        placement?: ("left" | "right" | "center" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         orientation?: ("horizontal" | "vertical") | undefined;
         show?: ("reset" | "scrollMode" | "zoomIn" | "zoomOut" | "center")[] | undefined;
     };

package/dist/components/Tree.svelte

@@ -1,31 +1,41 @@
-<script>import { tree as d3Tree } from 'd3-hierarchy';
-import { chartContext } from './ChartContext.svelte';
-const { data, width, height } = chartContext();
-/**
- * Sets this tree layout’s node size to the specified two-element array of numbers `[width, height]`.
- * If unset, layout size is used instead.  When a node size is specified, the root node is always
- * positioned at `⟨0, 0⟩`.
- *
- * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
- */
-export let nodeSize = undefined;
-/**
- * see: https://github.com/d3/d3-hierarchy#tree_separation
- */
-export let separation = undefined;
-export let orientation = 'horizontal';
-let tree;
-$: {
+<script lang="ts">
+  import { type HierarchyPointNode, tree as d3Tree, type TreeLayout } from 'd3-hierarchy';
+  import { chartContext } from './ChartContext.svelte';
+
+  const { data, width, height } = chartContext();
+
+  /**
+   * Sets this tree layout’s node size to the specified two-element array of numbers `[width, height]`.
+   * If unset, layout size is used instead.  When a node size is specified, the root node is always
+   * positioned at `⟨0, 0⟩`.
+   *
+   * see: https://github.com/d3/d3-hierarchy#tree_nodeSize
+   */
+  export let nodeSize: [number, number] | undefined = undefined;
+
+  /**
+   * see: https://github.com/d3/d3-hierarchy#tree_separation
+   */
+  export let separation:
+    | ((a: HierarchyPointNode<any>, b: HierarchyPointNode<any>) => number)
+    | undefined = undefined;
+
+  export let orientation: 'vertical' | 'horizontal' = 'horizontal';
+
+  let tree: TreeLayout<any>;
+  $: {
     tree = d3Tree().size(orientation === 'horizontal' ? [$height, $width] : [$width, $height]);
+
     if (nodeSize) {
-        tree.nodeSize(nodeSize);
+      tree.nodeSize(nodeSize);
     }
     if (separation) {
-        tree.separation(separation);
+      tree.separation(separation);
     }
-}
-// @ts-expect-error
-$: treeData = tree($data);
+  }
+
+  // @ts-expect-error
+  $: treeData = tree($data);
 </script>
 
 <slot nodes={treeData.descendants()} links={treeData.links()} />