layerchart 0.81.3 → 0.91.0

package/dist/components/tooltip/TooltipContext.svelte

@@ -4,12 +4,23 @@
 
   export const tooltipContextKey = Symbol();
 
+  type TooltipMode =
+    | 'bisect-x'
+    | 'bisect-y'
+    | 'band'
+    | 'bisect-band'
+    | 'bounds'
+    | 'voronoi'
+    | 'quadtree'
+    | 'manual';
+
   export type TooltipContextValue = {
     x: number;
     y: number;
     data: any;
     show(e: PointerEvent, tooltipData?: any): void;
     hide(e?: PointerEvent): void;
+    mode: TooltipMode;
   };
 
   export type TooltipContext = Readable<TooltipContextValue>;
@@ -20,6 +31,7 @@
     data: null as any,
     show: () => {},
     hide: () => {},
+    mode: 'manual',
   });
   export function tooltipContext() {
     return getContext<TooltipContext>(tooltipContextKey) ?? defaultContext;
@@ -80,15 +92,7 @@
   /**
    * @type {'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'manual'}
    */
-  export let mode:
-    | 'bisect-x'
-    | 'bisect-y'
-    | 'band'
-    | 'bisect-band'
-    | 'bounds'
-    | 'voronoi'
-    | 'quadtree'
-    | 'manual' = 'manual';
+  export let mode: TooltipMode = 'manual';
   /**
    * @type {'closest' | 'left' | 'right'}
    */
@@ -107,7 +111,7 @@
   /** Enable debug view (show hit targets, etc) */
   export let debug = false;
 
-  export let onClick: ({ data }: { data: any }) => any = () => {};
+  export let onclick: ({ data }: { data: any }) => any = () => {};
 
   /** Exposed to allow binding in Chart */
   export let tooltip = writable({
@@ -116,6 +120,7 @@
     data: null as any,
     show: showTooltip,
     hide: hideTooltip,
+    mode,
   });
   setTooltipContext(tooltip);
 
@@ -401,7 +406,7 @@
   on:pointerleave={triggerPointerEvents ? hideTooltip : undefined}
   on:click={(e) => {
     if (triggerPointerEvents) {
-      onClick({ data: $tooltip?.data });
+      onclick({ data: $tooltip?.data });
     }
   }}
 >
@@ -418,22 +423,22 @@
     {#if mode === 'voronoi'}
       <Svg>
         <Voronoi
-          on:pointerenter={(e) => {
-            showTooltip(e.detail.event, e.detail.data);
+          onpointerenter={(e, { data }) => {
+            showTooltip(e, data);
           }}
-          on:pointermove={(e) => {
-            showTooltip(e.detail.event, e.detail.data);
+          onpointermove={(e, { data }) => {
+            showTooltip(e, data);
           }}
-          on:pointerleave={hideTooltip}
-          on:pointerdown={(e) => {
+          onpointerleave={hideTooltip}
+          onpointerdown={(e) => {
             // @ts-expect-error
             if (e.target?.hasPointerCapture(e.pointerId)) {
               // @ts-expect-error
               e.target.releasePointerCapture(e.pointerId);
             }
           }}
-          on:click={(e) => {
-            onClick({ data: e.detail.data });
+          onclick={(e, { data }) => {
+            onclick({ data });
           }}
           classes={{ path: cls(debug && 'fill-danger/10 stroke-danger') }}
         />
@@ -459,7 +464,7 @@
                 }
               }}
               on:click={(e) => {
-                onClick({ data: rect.data });
+                onclick({ data: rect.data });
               }}
             />
           {/each}

package/dist/components/tooltip/TooltipContext.svelte.d.ts

@@ -1,12 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Readable } from 'svelte/store';
 export declare const tooltipContextKey: unique symbol;
+type TooltipMode = 'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'manual';
 export type TooltipContextValue = {
     x: number;
     y: number;
     data: any;
     show(e: PointerEvent, tooltipData?: any): void;
     hide(e?: PointerEvent): void;
+    mode: TooltipMode;
 };
 export type TooltipContext = Readable<TooltipContextValue>;
 export declare function tooltipContext(): TooltipContext;
@@ -14,7 +16,7 @@ declare const __propDef: {
     props: {
         /**
            * @type {'bisect-x' | 'bisect-y' | 'band' | 'bisect-band' | 'bounds' | 'voronoi' | 'quadtree' | 'manual'}
-           */ mode?: "bisect-x" | "bisect-y" | "band" | "bisect-band" | "bounds" | "voronoi" | "quadtree" | "manual";
+           */ mode?: TooltipMode;
         /**
            * @type {'closest' | 'left' | 'right'}
            */ findTooltipData?: "closest" | "left" | "right";
@@ -24,7 +26,7 @@ declare const __propDef: {
            * @type {number}
            */ radius?: number;
         /** Enable debug view (show hit targets, etc) */ debug?: boolean;
-        onClick?: ({ data }: {
+        onclick?: ({ data }: {
             data: any;
         }) => any;
         /** Exposed to allow binding in Chart */ tooltip?: import("svelte/store").Writable<{
@@ -33,6 +35,7 @@ declare const __propDef: {
             data: any;
             show: (e: PointerEvent, tooltipData?: any) => void;
             hide: () => void;
+            mode: TooltipMode;
         }>;
     };
     events: {
@@ -46,6 +49,7 @@ declare const __propDef: {
                 data: any;
                 show: (e: PointerEvent, tooltipData?: any) => void;
                 hide: () => void;
+                mode: TooltipMode;
             };
         };
     };

package/dist/utils/canvas.js

@@ -39,40 +39,40 @@ export function getComputedStyles(canvas, { styles, classes } = {}) {
     }
 }
 /** Render onto canvas context.  Supports CSS variables and classes by tranferring to hidden `<svg>` element before retrieval) */
-function render(canvasCtx, render, styleOptions = {}) {
+function render(ctx, render, styleOptions = {}) {
     // console.count('render');
     // TODO: Consider memoizing?  How about reactiving to CSS variable changes (light/dark mode toggle)
-    const computedStyles = getComputedStyles(canvasCtx.canvas, styleOptions);
+    const computedStyles = getComputedStyles(ctx.canvas, styleOptions);
     // Adhere to CSS paint order: https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order
     const paintOrder = computedStyles?.paintOrder === 'stroke' ? ['stroke', 'fill'] : ['fill', 'stroke'];
     if (computedStyles?.opacity) {
-        canvasCtx.globalAlpha = Number(computedStyles?.opacity);
+        ctx.globalAlpha = Number(computedStyles?.opacity);
     }
     // Text properties
-    canvasCtx.font = `${computedStyles.fontSize} ${computedStyles.fontFamily}`; // build string instead of using `computedStyles.font` to fix/workaround `tabular-nums` returning `null`
+    ctx.font = `${computedStyles.fontSize} ${computedStyles.fontFamily}`; // build string instead of using `computedStyles.font` to fix/workaround `tabular-nums` returning `null`
     // TODO: Hack to handle `textAnchor` with canvas.  Try to find a better approach
     if (computedStyles.textAnchor === 'middle') {
-        canvasCtx.textAlign = 'center';
+        ctx.textAlign = 'center';
     }
     else if (computedStyles.textAnchor === 'end') {
-        canvasCtx.textAlign = 'right';
+        ctx.textAlign = 'right';
     }
     else {
-        canvasCtx.textAlign = computedStyles.textAlign; // TODO: Handle/map `justify` and `match-parent`?
+        ctx.textAlign = computedStyles.textAlign; // TODO: Handle/map `justify` and `match-parent`?
     }
     // TODO: Handle `textBaseline` / `verticalAnchor` (Text)
-    // canvasCtx.textBaseline = 'top';
-    // canvasCtx.textBaseline = 'middle';
-    // canvasCtx.textBaseline = 'bottom';
-    // canvasCtx.textBaseline = 'alphabetic';
-    // canvasCtx.textBaseline = 'hanging';
-    // canvasCtx.textBaseline = 'ideographic';
+    // ctx.textBaseline = 'top';
+    // ctx.textBaseline = 'middle';
+    // ctx.textBaseline = 'bottom';
+    // ctx.textBaseline = 'alphabetic';
+    // ctx.textBaseline = 'hanging';
+    // ctx.textBaseline = 'ideographic';
     // Dashed lines
     if (computedStyles.strokeDasharray.includes(',')) {
         const dashArray = computedStyles.strokeDasharray
             .split(',')
             .map((s) => Number(s.replace('px', '')));
-        canvasCtx.setLineDash(dashArray);
+        ctx.setLineDash(dashArray);
     }
     paintOrder.forEach((attr) => {
         if (attr === 'fill') {
@@ -82,14 +82,14 @@ function render(canvasCtx, render, styleOptions = {}) {
                     ? null
                     : computedStyles?.fill;
             if (fill) {
-                const currentGlobalAlpha = canvasCtx.globalAlpha;
+                const currentGlobalAlpha = ctx.globalAlpha;
                 const fillOpacity = Number(computedStyles?.fillOpacity);
                 const opacity = Number(computedStyles?.opacity);
-                canvasCtx.globalAlpha = fillOpacity * opacity;
-                canvasCtx.fillStyle = fill;
-                render.fill(canvasCtx);
+                ctx.globalAlpha = fillOpacity * opacity;
+                ctx.fillStyle = fill;
+                render.fill(ctx);
                 // Restore in case it was modified by `fillOpacity`
-                canvasCtx.globalAlpha = currentGlobalAlpha;
+                ctx.globalAlpha = currentGlobalAlpha;
             }
         }
         else if (attr === 'stroke') {
@@ -99,42 +99,42 @@ function render(canvasCtx, render, styleOptions = {}) {
                     ? null
                     : computedStyles?.stroke;
             if (stroke) {
-                canvasCtx.lineWidth =
+                ctx.lineWidth =
                     typeof computedStyles?.strokeWidth === 'string'
                         ? Number(computedStyles?.strokeWidth?.replace('px', ''))
                         : (computedStyles?.strokeWidth ?? 1);
-                canvasCtx.strokeStyle = stroke;
-                render.stroke(canvasCtx);
+                ctx.strokeStyle = stroke;
+                render.stroke(ctx);
             }
         }
     });
 }
 /** Render SVG path data onto canvas context.  Supports CSS variables and classes by tranferring to hidden `<svg>` element before retrieval) */
-export function renderPathData(canvasCtx, pathData, styleOptions = {}) {
+export function renderPathData(ctx, pathData, styleOptions = {}) {
     const path = new Path2D(pathData ?? '');
-    render(canvasCtx, {
+    render(ctx, {
         fill: (ctx) => ctx.fill(path),
         stroke: (ctx) => ctx.stroke(path),
     }, styleOptions);
 }
-export function renderText(canvasCtx, text, coords, styleOptions = {}) {
+export function renderText(ctx, text, coords, styleOptions = {}) {
     if (text) {
-        render(canvasCtx, {
+        render(ctx, {
             fill: (ctx) => ctx.fillText(text.toString(), coords.x, coords.y),
             stroke: (ctx) => ctx.strokeText(text.toString(), coords.x, coords.y),
         }, styleOptions);
     }
 }
-export function renderRect(canvasCtx, coords, styleOptions = {}) {
-    render(canvasCtx, {
+export function renderRect(ctx, coords, styleOptions = {}) {
+    render(ctx, {
         fill: (ctx) => ctx.fillRect(coords.x, coords.y, coords.width, coords.height),
         stroke: (ctx) => ctx.strokeRect(coords.x, coords.y, coords.width, coords.height),
     }, styleOptions);
 }
 /** Clear canvas accounting for Canvas `context.translate(...)` */
-export function clearCanvasContext(canvasCtx, options) {
+export function clearCanvasContext(ctx, options) {
     // Clear with negative offset due to Canvas `context.translate(...)`
-    canvasCtx.clearRect(-options.padding.left, -options.padding.top, options.containerWidth, options.containerHeight);
+    ctx.clearRect(-options.padding.left, -options.padding.top, options.containerWidth, options.containerHeight);
 }
 /**
     Scales a canvas for high DPI / retina displays.
@@ -150,15 +150,21 @@ export function scaleCanvas(ctx, width, height) {
     ctx.scale(devicePixelRatio, devicePixelRatio);
     return { width: ctx.canvas.width, height: ctx.canvas.height };
 }
-export function _createLinearGradient(canvasCtx, x0, y0, x1, y1, stops) {
-    const gradient = canvasCtx.createLinearGradient(x0, y0, x1, y1);
+export function _createLinearGradient(ctx, x0, y0, x1, y1, stops) {
+    const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
     stops.forEach(({ offset, color }) => {
         gradient.addColorStop(offset, color);
     });
     return gradient;
 }
 /** Create linear gradient and memoize result to fix reactivity */
-export const createLinearGradient = memoize(_createLinearGradient, (canvasCtx, x0, y0, x1, y1, stops) => {
+export const createLinearGradient = memoize(_createLinearGradient, (ctx, x0, y0, x1, y1, stops) => {
     const key = JSON.stringify({ x0, y0, x1, y1, stops });
     return key;
 });
+export function getPixelColor(ctx, x, y) {
+    const dpr = window.devicePixelRatio ?? 1;
+    const imageData = ctx.getImageData(x * dpr, y * dpr, 1, 1);
+    const [r, g, b, a] = imageData.data;
+    return { r, g, b, a };
+}

package/dist/utils/color.d.ts

@@ -0,0 +1,15 @@
+/** Generator to create a new color on each call */
+export declare function rgbColorGenerator(step?: number): Generator<{
+    r: number;
+    g: number;
+    b: number;
+}, {
+    r: number;
+    g: number;
+    b: number;
+}, unknown>;
+export declare function getColorStr(color: {
+    r: number;
+    g: number;
+    b: number;
+}): string;

package/dist/utils/color.js

@@ -0,0 +1,15 @@
+/** Generator to create a new color on each call */
+export function* rgbColorGenerator(step = 500) {
+    let nextColor = 1;
+    while (nextColor < 16777216) {
+        const r = nextColor & 0xff;
+        const g = (nextColor & 0xff00) >> 8;
+        const b = (nextColor & 0xff0000) >> 16;
+        nextColor += step;
+        yield { r, g, b };
+    }
+    return { r: 0, g: 0, b: 0 };
+}
+export function getColorStr(color) {
+    return `rgb(${color.r},${color.g},${color.b})`;
+}

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.81.3",
+  "version": "0.91.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.12",
     "@mdi/js": "^7.4.47",

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

@@ -1,65 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import { type ComponentProps } from 'svelte';
-import type { SVGAttributes } from 'svelte/elements';
-import { type FormatType } from '@layerstack/utils';
-import Text from './Text.svelte';
-import type { DomainType } from '../utils/scales.js';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        axis?: "x" | "y" | "both" | undefined;
-        handleSize?: number | undefined;
-        resetOnEnd?: boolean | undefined;
-        xDomain?: DomainType | undefined;
-        yDomain?: DomainType | undefined;
-        labels?: (ComponentProps<Text> | boolean) | undefined;
-        mode?: "integrated" | "separated" | undefined;
-        range?: SVGAttributes<SVGRectElement> | undefined;
-        handle?: SVGAttributes<SVGRectElement> | undefined;
-        format?: FormatType | undefined;
-        classes?: {
-            root?: string;
-            frame?: string;
-            range?: string;
-            handle?: string;
-            labels?: string;
-        } | undefined;
-        onChange?: ((e: {
-            xDomain?: DomainType;
-            yDomain?: DomainType;
-        }) => void) | undefined;
-        onBrushStart?: ((e: {
-            xDomain?: DomainType;
-            yDomain?: DomainType;
-        }) => void) | undefined;
-        onBrushEnd?: ((e: {
-            xDomain?: DomainType;
-            yDomain?: DomainType;
-        }) => void) | undefined;
-        onReset?: ((e: {
-            xDomain?: DomainType;
-            yDomain?: DomainType;
-        }) => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        range: {
-            rangeWidth: any;
-            rangeHeight: any;
-        };
-        handle: {
-            edge: string;
-            rangeWidth: any;
-            rangeHeight: any;
-        };
-        labels: {};
-    };
-};
-export type BrushProps = typeof __propDef.props;
-export type BrushEvents = typeof __propDef.events;
-export type BrushSlots = typeof __propDef.slots;
-export default class Brush extends SvelteComponentTyped<BrushProps, BrushEvents, BrushSlots> {
-}
-export {};

package/dist/components/HitCanvas.svelte

@@ -1,118 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  import { cls } from '@layerstack/tailwind';
-
-  import { chartContext } from './ChartContext.svelte';
-  import Canvas from './layout/Canvas.svelte';
-  import { transformContext } from './TransformContext.svelte';
-
-  const { width, height } = chartContext();
-
-  // @ts-expect-error: this will immediately be defined on mount via `bind:context`
-  export let context: CanvasRenderingContext2D = undefined;
-
-  /** Show canvas for debugging */
-  export let debug = false;
-
-  const dispatch = createEventDispatcher<{
-    pointermove: {
-      event: PointerEvent;
-      data: any;
-    };
-    click: {
-      event: MouseEvent;
-      data: any;
-    };
-  }>();
-
-  function* rgbColorGenerator(step = 500) {
-    let nextColor = 1;
-
-    while (nextColor < 16777216) {
-      const rgb = [
-        nextColor & 0xff, // red
-        (nextColor & 0xff00) >> 8, // green
-        (nextColor & 0xff0000) >> 16, // blue
-      ];
-
-      nextColor += step;
-      yield `rgb(${rgb.join(',')})`;
-    }
-
-    return 'rgb(0,0,0)';
-  }
-
-  $: colorGenerator = rgbColorGenerator();
-
-  // Reset color generator whenever updated (width/height) so always reusing same colors (and not exhausting)
-  const { translate, scale, dragging } = transformContext();
-  $: {
-    $width;
-    $height;
-    $translate;
-    $scale;
-
-    colorGenerator = rgbColorGenerator();
-  }
-
-  const dataByColor = new Map<string, any>();
-  function setColorData(color: string, data: any) {
-    dataByColor.set(color, data);
-  }
-
-  let activePointer = false;
-
-  function getPointerData(e: PointerEvent | MouseEvent) {
-    const { offsetX, offsetY } = e;
-
-    const dpr = window.devicePixelRatio ?? 1;
-    const imageData = context.getImageData(offsetX * dpr, offsetY * dpr, 1, 1);
-    const [r, g, b, a] = imageData.data;
-    const colorKey = `rgb(${r},${g},${b})`;
-    const data = dataByColor.get(colorKey);
-
-    return data;
-  }
-
-  function dispatchPointerMove(e: PointerEvent) {
-    const data = getPointerData(e);
-
-    if (data) {
-      activePointer = true;
-    }
-
-    // Still dispatch with `undefined data` to hide tooltip, etc
-    dispatch('pointermove', { event: e, data });
-  }
-</script>
-
-<Canvas
-  bind:context
-  willReadFrequently
-  class={cls(
-    'HitCanvas absolute w-full h-full border border-danger',
-    // '[image-rendering:pixelated]', // https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
-    !debug && 'opacity-0'
-  )}
-  on:pointerenter={dispatchPointerMove}
-  on:pointermove={dispatchPointerMove}
-  on:pointerleave={() => (activePointer = false)}
-  on:pointerleave
-  on:touchmove={(e) => {
-    // Prevent touch to not interfer with pointer if over data
-    if (activePointer) {
-      e.preventDefault();
-    }
-  }}
-  on:click={(e) => {
-    const data = getPointerData(e);
-    if (data) {
-      dispatch('click', { event: e, data });
-    }
-  }}
->
-  <!-- Do not render while dragging to improve interaction performance -->
-  {#if !$dragging}
-    <slot nextColor={() => colorGenerator.next().value} {setColorData}></slot>
-  {/if}
-</Canvas>

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

@@ -1,32 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        context?: CanvasRenderingContext2D;
-        /** Show canvas for debugging */ debug?: boolean;
-    };
-    events: {
-        pointerleave: PointerEvent;
-        pointermove: CustomEvent<{
-            event: PointerEvent;
-            data: any;
-        }>;
-        click: CustomEvent<{
-            event: MouseEvent;
-            data: any;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            nextColor: () => string;
-            setColorData: (color: string, data: any) => void;
-        };
-    };
-};
-export type HitCanvasProps = typeof __propDef.props;
-export type HitCanvasEvents = typeof __propDef.events;
-export type HitCanvasSlots = typeof __propDef.slots;
-export default class HitCanvas extends SvelteComponentTyped<HitCanvasProps, HitCanvasEvents, HitCanvasSlots> {
-}
-export {};