layerchart 2.0.0-next.1 → 2.0.0-next.3

package/dist/components/TransformContext.svelte

@@ -1,126 +1,326 @@
-<script lang="ts" context="module">
-  import { getContext, setContext } from 'svelte';
-  import { writable, type Readable, type Writable, derived } from 'svelte/store';
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements';
 
-  export const transformContextKey = Symbol();
+  const DEFAULT_TRANSLATE = { x: 0, y: 0 };
+  const DEFAULT_SCALE = 1;
 
   type TransformMode = 'canvas' | 'manual' | 'none';
   type TransformScrollMode = 'scale' | 'translate' | 'none';
 
   export type TransformContextValue = {
+    /**
+     * The current transform mode.
+     *
+     * - `canvas`: The transform is applied to the canvas element.
+     * - `manual`: The transform is applied manually.
+     * - `none`: No transform is applied.
+     */
     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>;
+
+    /**
+     * The current scale of the transform.
+     */
+    scale: number;
+
+    /**
+     * Set the scale of the transform
+     * @param value - the scale value to set
+     * @param options - motion options to apply to the transform (defaults to the motion options passed to the component)
+     */
+    setScale(value: number, options?: MotionProp): void;
+
+    /**
+     * The current translate of the transform.
+     */
+    translate: { x: number; y: number };
+
+    /**
+     * Set the translate of the transform
+     * @param point - the point to translate to
+     * @param options - motion options to apply to the transform (defaults to the motion options passed to the component)
+     */
+    setTranslate(point: { x: number; y: number }, options?: MotionProp): void;
+
+    /**
+     * Whether the transform is currently being moved
+     */
+    moving: boolean;
+
+    /**
+     * Whether the transform is currently being dragged
+     */
+    dragging: boolean;
+
+    /**
+     * The scroll mode of the transform.
+     *
+     * - `scale`: Scrolling will zoom in/out the canvas.
+     * - `translate`: Scrolling will pan the canvas.
+     * - `none`: No scroll mode is applied.
+     */
+    scrollMode: TransformScrollMode;
+
+    /**
+     * Set the scroll mode of the transform
+     *
+     * @param mode - the scroll mode to set
+     */
     setScrollMode(mode: TransformScrollMode): void;
+
+    /**
+     * Reset the transform to its initial state
+     */
     reset(): void;
+
+    /**
+     * Zoom in the transform
+     */
     zoomIn(): void;
+
+    /**
+     * Zoom out the transform
+     *
+     */
     zoomOut(): void;
+
+    /**
+     * Translate the transform to the center of the canvas
+     */
     translateCenter(): void;
+
+    /**
+     * Zoom to a specific point in the canvas
+     *
+     * @param center - The point (in chart coordinates) that should become the new
+     * center of the view after zooming.
+     *
+     * @param rect - A rectangular region (in chart coordinates) that the view should scale to fit.
+     * If omitted, the scale defaults to 1 (no zoom).
+     */
     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,
-    translate: defaultTranslate,
-    setTranslate: defaultTranslate.set,
-    moving: writable(false),
-    dragging: writable(false),
-    scrollMode: writable('none'),
-    setScrollMode: () => {},
-    reset: () => {},
-    zoomIn: () => {},
-    zoomOut: () => {},
-    translateCenter: () => {},
-    zoomTo: () => {},
-  };
-  export function transformContext() {
-    return getContext<TransformContext>(transformContextKey) ?? defaultContext;
+  const _TransformContext = new Context<TransformContextValue>('TransformContext');
+
+  function createDefaultTransformContext() {
+    let defaultTranslate = $state(DEFAULT_TRANSLATE);
+    let defaultScale = $state(DEFAULT_SCALE);
+
+    const defaultContext: TransformContextValue = {
+      mode: 'none',
+      get scale() {
+        return defaultScale;
+      },
+      setScale: (value: number) => {
+        defaultScale = value;
+      },
+      get translate() {
+        return defaultTranslate;
+      },
+      setTranslate: (value: { x: 0; y: 0 }) => {
+        defaultTranslate = value;
+      },
+      moving: false,
+      dragging: false,
+      scrollMode: 'none',
+      setScrollMode: () => {},
+      reset: () => {},
+      zoomIn: () => {},
+      zoomOut: () => {},
+      translateCenter: () => {},
+      zoomTo: () => {},
+    };
+    return defaultContext;
   }
 
-  function setTransformContext(transform: TransformContext) {
-    setContext(transformContextKey, transform);
+  export function getTransformContext() {
+    return _TransformContext.getOr(createDefaultTransformContext());
   }
-</script>
-
-<script lang="ts">
-  import { chartContext } from './ChartContext.svelte';
-  import { motionStore, type MotionOptions, motionFinishHandler } from '../stores/motionStore.js';
-  import { localPoint } from '@layerstack/utils';
 
-  const { width, height, padding } = chartContext();
-
-  export let mode: TransformMode = 'none';
-
-  export let spring: boolean | Parameters<typeof motionStore>[1]['spring'] = undefined;
-  export let tweened: boolean | Parameters<typeof motionStore>[1]['tweened'] = undefined;
+  export function setTransformContext(transform: TransformContextValue) {
+    return _TransformContext.set(transform);
+  }
 
-  export let processTranslate = (x: number, y: number, deltaX: number, deltaY: number) => {
-    return {
-      x: x + deltaX,
-      y: y + deltaY,
+  type TransformContextPropsWithoutHTML = {
+    mode?: TransformMode;
+    processTranslate?: (
+      x: number,
+      y: number,
+      deltaX: number,
+      deltaY: number
+    ) => {
+      x: number;
+      y: number;
     };
+    /**
+     * Disable pointer events including move/dragging.  Useful for `mode="canvas" but only want
+     * zoomTo() interactions
+     *
+     * @default false
+     */
+    disablePointer?: boolean;
+
+    /**
+     * A bindable reference to the transform context value.
+     *
+     * @bindable
+     */
+    transformContext?: TransformContextValue;
+
+    /**
+     * Initial scroll mode.
+     * This is set to `none` by default, but can be set to `scale` or `translate`
+     *
+     * @default 'none'
+     */
+    initialScrollMode?: TransformScrollMode;
+
+    /**
+     * Distance/threshold to consider drag vs click (disable click propagation)
+     *
+     * @default 10
+     */
+    clickDistance?: number;
+
+    /**
+     * Initial translate value
+     */
+    initialTranslate?: { x: number; y: number };
+
+    /**
+     *  Initial scale value
+     */
+    initialScale?: number;
+
+    /**
+     * A callback function that is called when the transform is applied.
+     * @param e
+     */
+    onTransform?: (details: { scale: number; translate: { x: number; y: number } }) => void;
+
+    ondragstart?: () => void;
+    ondragend?: () => void;
+    ref?: HTMLElement;
+    children?: Snippet<[{ transformContext: TransformContextValue }]>;
+
+    motion?: MotionProp;
   };
 
-  /** Disable pointer events including move/dragging.  Useful for `mode="canvas" but only want zoomTo() interactions */
-  export let disablePointer = false;
+  type TransformContextProps = TransformContextPropsWithoutHTML &
+    Without<HTMLAttributes<HTMLElement>, TransformContextPropsWithoutHTML>;
+</script>
 
-  /** Action to take during wheel scroll */
-  export let initialScrollMode: TransformScrollMode = 'none';
+<script lang="ts">
+  import { localPoint } from '@layerstack/utils';
+  import { Context, watch } from 'runed';
+  import type { Without } from '../utils/types.js';
+  import { getChartContext } from './Chart.svelte';
+  import type { Snippet } from 'svelte';
+  import { cls } from '@layerstack/tailwind';
+  import { layerClass } from '../utils/attributes.js';
+  import {
+    createControlledMotion,
+    createMotionTracker,
+    parseMotionProp,
+    type MotionProp,
+  } from '../utils/motion.svelte.js';
+
+  let {
+    mode = 'none',
+    motion,
+    processTranslate = (x: number, y: number, deltaX: number, deltaY: number) => ({
+      x: x + deltaX,
+      y: y + deltaY,
+    }),
+    disablePointer = false,
+    initialScrollMode = 'none',
+    clickDistance = 10,
+    ondragend = () => {},
+    ondragstart = () => {},
+    onTransform = () => {},
+    initialTranslate,
+    initialScale,
+    onwheel = () => {},
+    onpointerdown = () => {},
+    onpointermove = () => {},
+    ontouchmove = () => {},
+    onpointerup = () => {},
+    ondblclick = () => {},
+    onclickcapture = () => {},
+    ref: refProp = $bindable(),
+    children,
+    class: className,
+    transformContext = $bindable(),
+    ...restProps
+  }: TransformContextProps = $props();
+
+  let ref = $state<HTMLElement>();
+  $effect.pre(() => {
+    refProp = ref;
+  });
 
-  /** Distance/threshold to consider drag vs click (disable click propagation) */
-  export let clickDistance = 10;
+  transformContext = {
+    get mode() {
+      return mode;
+    },
+    get scale() {
+      return scale.current;
+    },
+    setScale,
+    get translate() {
+      return translate.current;
+    },
+    setTranslate,
+    get dragging() {
+      return dragging;
+    },
+    get moving() {
+      return moving;
+    },
+    reset,
+    zoomIn,
+    zoomOut,
+    translateCenter,
+    zoomTo,
+    get scrollMode() {
+      return scrollMode;
+    },
+    setScrollMode,
+  };
 
-  export let ondragstart: (() => void) | undefined = undefined;
-  export let ondragend: (() => void) | undefined = undefined;
-  export let ontransform:
-    | ((e: { scale: number; translate: { x: number; y: number } }) => void)
-    | undefined = undefined;
+  const ctx = getChartContext();
 
   let pointerDown = false;
-  const dragging = writable(false);
-  const scrollMode = writable<TransformScrollMode>(initialScrollMode);
+  let dragging = $state(false);
+  let scrollMode = $state<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 resolvedMotion = parseMotionProp(motion);
 
-  const DEFAULT_SCALE = 1;
-  export let initialScale: number | undefined = undefined;
-  export const scale = motionStore(initialScale ?? DEFAULT_SCALE, { spring, tweened });
+  const translate = createControlledMotion(initialTranslate ?? DEFAULT_TRANSLATE, resolvedMotion);
+  const scale = createControlledMotion(initialScale ?? DEFAULT_SCALE, resolvedMotion);
 
   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;
+    scrollMode = mode;
   }
 
   export function reset() {
-    $translate = initialTranslate ?? DEFAULT_TRANSLATE;
-    $scale = initialScale ?? DEFAULT_SCALE;
+    translate.target = initialTranslate ?? DEFAULT_TRANSLATE;
+    scale.target = initialScale ?? DEFAULT_SCALE;
   }
 
   export function zoomIn() {
-    scaleTo(1.25, { x: ($width + $padding.left) / 2, y: ($height + $padding.top) / 2 });
+    scaleTo(1.25, { x: (ctx.width + ctx.padding.left) / 2, y: (ctx.height + ctx.padding.top) / 2 });
   }
 
   export function zoomOut() {
-    scaleTo(0.8, { x: ($width + $padding.left) / 2, y: ($height + $padding.top) / 2 });
+    scaleTo(0.8, { x: (ctx.width + ctx.padding.left) / 2, y: (ctx.height + ctx.padding.top) / 2 });
   }
 
   export function translateCenter() {
-    $translate = {
+    translate.target = {
       x: 0,
       y: 0,
     };
@@ -130,32 +330,38 @@
     center: { x: number; y: number },
     rect?: { width: number; height: number }
   ) {
-    const newScale = rect ? ($width < $height ? $width / rect.width : $height / rect.height) : 1;
-
-    $translate = {
-      x: $width / 2 - center.x * newScale,
-      y: $height / 2 - center.y * newScale,
+    const newScale = rect
+      ? ctx.width < ctx.height
+        ? ctx.width / rect.width
+        : ctx.height / rect.height
+      : 1;
+
+    translate.target = {
+      x: ctx.width / 2 - center.x * newScale,
+      y: ctx.height / 2 - center.y * newScale,
     };
 
     if (rect) {
-      $scale = newScale;
+      scale.target = newScale;
     }
   }
 
-  function onPointerDown(e: PointerEvent & { currentTarget: HTMLDivElement }) {
+  function onPointerDown(e: PointerEvent & { currentTarget: HTMLElement }) {
+    onpointerdown?.(e);
     if (mode === 'none' || disablePointer) return;
 
     e.preventDefault();
 
     pointerDown = true;
-    $dragging = false;
+    dragging = false;
     startPoint = localPoint(e);
-    startTranslate = $translate;
+    startTranslate = translate.current;
 
     ondragstart?.();
   }
 
-  function onPointerMove(e: PointerEvent & { currentTarget: HTMLDivElement }) {
+  function onPointerMove(e: PointerEvent & { currentTarget: HTMLElement }) {
+    onpointermove?.(e);
     if (!pointerDown) return;
 
     e.preventDefault(); // Stop text selection
@@ -164,44 +370,51 @@
     const deltaX = endPoint.x - startPoint.x;
     const deltaY = endPoint.y - startPoint.y;
 
-    if (!$dragging) {
+    if (!dragging) {
       // If dragged beyond threshold, disable click propagation
-      $dragging = deltaX * deltaX + deltaY * deltaY > clickDistance;
+      dragging = deltaX * deltaX + deltaY * deltaY > clickDistance;
     }
 
-    if ($dragging) {
+    if (dragging) {
       e.stopPropagation(); // Stop tooltip from trigging (along with `capture: true`)
       e.currentTarget?.setPointerCapture(e.pointerId);
 
       setTranslate(
         processTranslate(startTranslate.x, startTranslate.y, deltaX, deltaY),
-        // @ts-expect-error
-        spring ? { hard: true } : tweened ? { duration: 0 } : undefined
+        translate.type === 'spring'
+          ? { instant: true }
+          : translate.type === 'tween'
+            ? { duration: 0 }
+            : undefined
       );
     }
   }
 
-  function onPointerUp(e: PointerEvent) {
+  function onPointerUp(e: PointerEvent & { currentTarget: HTMLElement }) {
+    onpointerup?.(e);
     pointerDown = false;
-    $dragging = false;
+    dragging = false;
     ondragend?.();
   }
 
-  function onClick(e: MouseEvent) {
-    if ($dragging) {
+  function onClick(e: MouseEvent & { currentTarget: HTMLElement }) {
+    onclickcapture?.(e);
+    if (dragging) {
       // Do not propagate click event to children if drag/moved.  Registered in capture phase (top-down)
       e.stopPropagation();
     }
   }
 
-  function onDoubleClick(e: MouseEvent) {
+  function onDoubleClick(e: MouseEvent & { currentTarget: HTMLElement }) {
+    ondblclick?.(e);
     if (mode === 'none' || disablePointer) return;
     const point = localPoint(e);
     scaleTo(e.shiftKey ? 0.5 : 2, point);
   }
 
-  function onWheel(e: WheelEvent) {
-    if (mode === 'none' || disablePointer || $scrollMode === 'none') return;
+  function onWheel(e: WheelEvent & { currentTarget: HTMLElement }) {
+    onwheel?.(e);
+    if (mode === 'none' || disablePointer || scrollMode === 'none') return;
 
     e.preventDefault();
 
@@ -210,7 +423,7 @@
     // Pinch to zoom is registered as a wheel event with control key
     const pinchToZoom = e.ctrlKey;
 
-    if ($scrollMode === 'scale' || pinchToZoom) {
+    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);
@@ -218,16 +431,25 @@
       scaleTo(
         Math.pow(2, scaleBy),
         point,
-        // @ts-expect-error
-        spring ? { hard: true } : tweened ? { duration: 0 } : undefined
+        scale.type === 'spring'
+          ? { instant: true }
+          : scale.type === 'tween'
+            ? { duration: 0 }
+            : undefined
       );
-    } else if ($scrollMode === 'translate') {
-      translate.update(
-        (startTranslate) =>
+    } else if (scrollMode === 'translate') {
+      const startTranslate = translate.current;
+      translate
+        .set(
           processTranslate(startTranslate.x, startTranslate.y, -e.deltaX, -e.deltaY),
-        // @ts-expect-error
-        spring ? { hard: true } : tweened ? { duration: 0 } : undefined
-      );
+          translate.type === 'spring'
+            ? { instant: true }
+            : translate.type === 'tween'
+              ? { duration: 0 }
+              : undefined
+        )
+        .then(() => {})
+        .catch(() => {});
     }
   }
 
@@ -237,73 +459,56 @@
   function scaleTo(
     value: number,
     point: { x: number; y: number },
-    options: Parameters<typeof motionStore>[1] | undefined = undefined
+    options: Parameters<(typeof scale)['set']>[1] | undefined = undefined
   ) {
-    const currentScale = $scale;
-    const newScale = $scale * value;
+    const currentScale = scale.current;
+    const newScale = scale.current * value;
     setScale(newScale, options);
 
     // Translate towards point (ex. mouse cursor/center) while zooming in/out
     const invertTransformPoint = {
-      x: (point.x - $padding.left - $translate.x) / currentScale,
-      y: (point.y - $padding.top - $translate.y) / currentScale,
+      x: (point.x - ctx.padding.left - translate.current.x) / currentScale,
+      y: (point.y - ctx.padding.top - translate.current.y) / currentScale,
     };
     const newTranslate = {
-      x: point.x - $padding.left - invertTransformPoint.x * newScale,
-      y: point.y - $padding.top - invertTransformPoint.y * newScale,
+      x: point.x - ctx.padding.left - invertTransformPoint.x * newScale,
+      y: point.y - ctx.padding.top - 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: { x: number; y: number }, options?: MotionOptions) {
-    // @ts-expect-error
+  const translating = createMotionTracker();
+  const scaling = createMotionTracker();
+
+  const moving = $derived(dragging || translating.current || scaling.current);
+
+  export function setTranslate(
+    point: { x: number; y: number },
+    options?: Parameters<(typeof translate)['set']>[1]
+  ) {
     translating.handle(translate.set(point, options));
   }
 
-  export function setScale(value: number, options?: MotionOptions) {
-    // @ts-expect-error
+  export function setScale(value: number, options?: MotionProp) {
     scaling.handle(scale.set(value, options));
   }
 
-  $: center = { x: $width / 2, y: $height / 2 };
-
-  $: viewportCenter = {
-    x: center.x - $translate.x,
-    y: center.y - $translate.y,
-  };
-
-  $: ontransform?.({ scale: $scale, translate: $translate });
-
-  setTransformContext({
-    mode,
-    scale,
-    setScale,
-    translate,
-    setTranslate,
-    dragging,
-    moving,
-    reset,
-    zoomIn,
-    zoomOut,
-    translateCenter,
-    zoomTo,
-    scrollMode,
-    setScrollMode,
+  watch([() => scale.current, () => translate.current], () => {
+    onTransform({
+      scale: scale.current,
+      translate: translate.current,
+    });
   });
+
+  setTransformContext(transformContext);
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  on:wheel={onWheel}
-  on:pointerdown={onPointerDown}
-  on:pointermove={onPointerMove}
-  on:touchmove={(e) => {
+  onwheel={onWheel}
+  onpointerdown={onPointerDown}
+  onpointermove={onPointerMove}
+  ontouchmove={(e) => {
+    ontouchmove?.(e);
     // Touch events cause pointer events to be interrupted.
     // Typically `touch-action: none` works, but doesn't appear to with SVG, but `preventDefault()` works here
     // https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#touch-action_css_property
@@ -311,23 +516,12 @@
       e.preventDefault();
     }
   }}
-  on:pointerup={onPointerUp}
-  on:dblclick={onDoubleClick}
-  on:click|capture={onClick}
-  on:click
-  on:keydown
-  on:keyup
-  on:keypress
-  class="h-full"
+  onpointerup={onPointerUp}
+  ondblclick={onDoubleClick}
+  onclickcapture={onClick}
+  class={cls(layerClass('transform-context'), 'h-full', className)}
+  bind:this={ref}
+  {...restProps}
 >
-  <slot
-    transform={{
-      scale: $scale,
-      setScale,
-      translate: $translate,
-      setTranslate,
-      zoomTo,
-      reset,
-    }}
-  />
+  {@render children?.({ transformContext: transformContext })}
 </div>