layerchart 2.0.0-next.60 → 2.0.0-next.62

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

@@ -0,0 +1,5 @@
+export type { HullProps, HullPropsWithoutHTML } from './Hull.shared.svelte.js';
+import type { HullProps } from './Hull.shared.svelte.js';
+declare const Hull: import("svelte").Component<HullProps, {}, "">;
+type Hull = ReturnType<typeof Hull>;
+export default Hull;

package/dist/components/Hull/Hull.svg.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>
+  export type { HullProps, HullPropsWithoutHTML } from './Hull.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import HullBase from './Hull.base.svelte';
+  import Group from '../Group/Group.svg.svelte';
+  import Spline from '../Spline/Spline.svg.svelte';
+  import type { HullProps } from './Hull.shared.svelte.js';
+
+  let props: HullProps = $props();
+</script>
+
+<HullBase {Group} {Spline} {...props} />

package/dist/components/Hull/Hull.svg.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { HullProps, HullPropsWithoutHTML } from './Hull.shared.svelte.js';
+import type { HullProps } from './Hull.shared.svelte.js';
+declare const Hull: import("svelte").Component<HullProps, {}, "">;
+type Hull = ReturnType<typeof Hull>;
+export default Hull;

package/dist/components/Image/Image.canvas.svelte

@@ -0,0 +1,132 @@
+<script lang="ts" module>
+  export type {
+    ImageProps,
+    ImagePropsWithoutHTML,
+  } from './Image.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { ImageState, imageMarkInfo, type ImageProps } from './Image.shared.svelte.js';
+
+  let { ...rest }: ImageProps = $props();
+
+  const c = new ImageState(() => rest as ImageProps);
+
+  // --- Canvas image cache ---
+  const imageCache = new Map<string, HTMLImageElement>();
+  let loadedImageCount = $state(0);
+
+  function getOrLoadImage(src: string): HTMLImageElement | null {
+    const cached = imageCache.get(src);
+    if (cached?.complete) return cached;
+    if (cached) return null; // Still loading
+
+    const img = new window.Image();
+    if (rest.crossOrigin) img.crossOrigin = rest.crossOrigin;
+    img.src = src;
+    img.onload = () => {
+      loadedImageCount++;
+    };
+    imageCache.set(src, img);
+    return img.complete ? img : null;
+  }
+
+  function canvasRender(ctx: CanvasRenderingContext2D) {
+    if (c.dataMode) {
+      for (const item of c.resolvedItems) {
+        const resolvedHrefValue = c.resolveHref(item.d);
+        if (!resolvedHrefValue) continue;
+
+        const img = getOrLoadImage(resolvedHrefValue);
+        if (!img) continue;
+
+        const renderX = item.x - item.width / 2;
+        const renderY = item.y - item.height / 2;
+
+        ctx.save();
+
+        if (rest.opacity !== undefined) {
+          ctx.globalAlpha = rest.opacity;
+        }
+
+        if (item.rotate) {
+          ctx.translate(item.x, item.y);
+          ctx.rotate((item.rotate * Math.PI) / 180);
+          ctx.translate(-item.x, -item.y);
+        }
+
+        if (item.r !== undefined) {
+          ctx.beginPath();
+          ctx.arc(item.x, item.y, item.r, 0, 2 * Math.PI);
+          ctx.clip();
+        }
+
+        ctx.drawImage(img, renderX, renderY, item.width, item.height);
+        ctx.restore();
+      }
+    } else {
+      const hrefValue = typeof rest.href === 'string' ? rest.href : undefined;
+      if (!hrefValue) return;
+
+      const img = getOrLoadImage(hrefValue);
+      if (!img) return;
+
+      const cx = c.motionX;
+      const cy = c.motionY;
+      const w = c.motionWidth;
+      const h = c.motionHeight;
+      const renderX = cx - w / 2;
+      const renderY = cy - h / 2;
+
+      ctx.save();
+
+      if (rest.opacity !== undefined) {
+        ctx.globalAlpha = rest.opacity;
+      }
+
+      if (c.pixelRotate) {
+        ctx.translate(cx, cy);
+        ctx.rotate((c.pixelRotate * Math.PI) / 180);
+        ctx.translate(-cx, -cy);
+      }
+
+      if (c.pixelR !== undefined) {
+        ctx.beginPath();
+        ctx.arc(cx, cy, c.pixelR, 0, 2 * Math.PI);
+        ctx.clip();
+      }
+
+      ctx.drawImage(img, renderX, renderY, w, h);
+      ctx.restore();
+    }
+  }
+
+  c.chartCtx.registerComponent({
+    name: 'Image',
+    kind: 'mark',
+    markInfo: () => imageMarkInfo(rest as ImageProps, c.dataMode),
+    canvasRender: {
+      render: canvasRender,
+      events: {
+        click: (rest as any).onclick,
+        pointerdown: (rest as any).onpointerdown,
+        pointerenter: (rest as any).onpointerenter,
+        pointermove: (rest as any).onpointermove,
+        pointerleave: (rest as any).onpointerleave,
+      },
+      deps: () => [
+        c.dataMode,
+        c.dataMode ? c.resolvedItems : null,
+        c.motionX,
+        c.motionY,
+        c.motionWidth,
+        c.motionHeight,
+        rest.href,
+        rest.opacity,
+        rest.class,
+        (rest as any).style,
+        loadedImageCount,
+      ],
+    },
+  });
+</script>

package/dist/components/Image/Image.canvas.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { ImageProps, ImagePropsWithoutHTML, } from './Image.shared.svelte.js';
+import { type ImageProps } from './Image.shared.svelte.js';
+declare const Image: import("svelte").Component<ImageProps, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

package/dist/components/Image/Image.html.svelte

@@ -0,0 +1,114 @@
+<script lang="ts" module>
+  export type {
+    ImageProps,
+    ImagePropsWithoutHTML,
+  } from './Image.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+  import { ImageState, imageMarkInfo, type ImageProps } from './Image.shared.svelte.js';
+
+  let {
+    href,
+    crossOrigin,
+    class: className,
+    opacity,
+    // Pull internal-only props out
+    x,
+    y,
+    width,
+    height,
+    r,
+    rotate,
+    initialX,
+    initialY,
+    initialWidth,
+    initialHeight,
+    data,
+    key,
+    motion,
+    preserveAspectRatio,
+    imageRendering,
+    ...rest
+  }: ImageProps = $props();
+
+  const c = new ImageState(
+    () =>
+      ({
+        href,
+        crossOrigin,
+        class: className,
+        opacity,
+        x,
+        y,
+        width,
+        height,
+        r,
+        rotate,
+        initialX,
+        initialY,
+        initialWidth,
+        initialHeight,
+        data,
+        key,
+        motion,
+        preserveAspectRatio,
+        imageRendering,
+        ...rest,
+      }) as ImageProps
+  );
+
+  c.chartCtx.registerComponent({
+    name: 'Image',
+    kind: 'mark',
+    markInfo: () => imageMarkInfo({ x, y, data, ...rest } as ImageProps, c.dataMode),
+  });
+</script>
+
+{#if c.dataMode}
+  {#each c.resolvedItems as item (item.key)}
+    {@const resolvedHrefValue = c.resolveHref(item.d)}
+    <img
+      src={resolvedHrefValue}
+      alt=""
+      style:position="absolute"
+      style:left="{item.x - item.width / 2}px"
+      style:top="{item.y - item.height / 2}px"
+      style:width="{item.width}px"
+      style:height="{item.height}px"
+      style:clip-path={item.r !== undefined ? `circle(${item.r}px at center)` : undefined}
+      style:transform={item.rotate ? `rotate(${item.rotate}deg)` : undefined}
+      style:opacity
+      style:object-fit="cover"
+      crossorigin={crossOrigin}
+      class={cls('lc-image', className)}
+      {...rest as any}
+    />
+  {/each}
+{:else}
+  <img
+    src={typeof href === 'string' ? href : undefined}
+    alt=""
+    style:position="absolute"
+    style:left="{c.motionX - c.motionWidth / 2}px"
+    style:top="{c.motionY - c.motionHeight / 2}px"
+    style:width="{c.motionWidth}px"
+    style:height="{c.motionHeight}px"
+    style:clip-path={c.pixelR !== undefined ? `circle(${c.pixelR}px at center)` : undefined}
+    style:transform={c.pixelRotate ? `rotate(${c.pixelRotate}deg)` : undefined}
+    style:opacity
+    style:object-fit="cover"
+    crossorigin={crossOrigin}
+    class={cls('lc-image', className)}
+    {...rest as any}
+  />
+{/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-image)) {
+      pointer-events: none;
+    }
+  }
+</style>

package/dist/components/Image/Image.html.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { ImageProps, ImagePropsWithoutHTML, } from './Image.shared.svelte.js';
+import { type ImageProps } from './Image.shared.svelte.js';
+declare const Image: import("svelte").Component<ImageProps, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

package/dist/components/Image/Image.shared.svelte.d.ts

@@ -0,0 +1,85 @@
+import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../../utils/types.js';
+import type { DataProp } from '../../utils/dataProp.js';
+import { type MotionProp } from '../../utils/motion.svelte.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+import type { GeoState } from '../../states/geo.svelte.js';
+export type ImagePropsWithoutHTML = {
+    /**
+     * Image URL. In data mode, resolved per item.
+     */
+    href?: string | ((d: any) => string);
+    x?: DataProp;
+    initialX?: number;
+    y?: DataProp;
+    initialY?: number;
+    width?: DataProp;
+    initialWidth?: number;
+    height?: DataProp;
+    initialHeight?: number;
+    /** Circular clip radius. When set, overrides width/height to 2*r. */
+    r?: DataProp;
+    /** Rotation in degrees clockwise. */
+    rotate?: DataProp;
+    /** SVG preserveAspectRatio attribute. @default 'xMidYMid meet' */
+    preserveAspectRatio?: string;
+    /** CORS attribute for the image. */
+    crossOrigin?: '' | 'anonymous' | 'use-credentials';
+    /** Image rendering quality. */
+    imageRendering?: string;
+    /** The opacity of the image. (0 to 1) */
+    opacity?: number;
+    /** Data array to iterate over in data mode. */
+    data?: any[];
+    /** Key function for keyed {#each} rendering in data mode. @default (d, i) => i */
+    key?: (d: any, index: number) => any;
+    /** A bindable reference to the `<image>` element (pixel mode only). @bindable */
+    ref?: SVGImageElement;
+    /** Motion configuration (pixel mode only). */
+    motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
+};
+export type ImageProps = ImagePropsWithoutHTML & Without<SVGAttributes<SVGImageElement>, ImagePropsWithoutHTML>;
+export declare function imageMarkInfo(props: ImageProps, dataMode: boolean): {
+    data?: undefined;
+    x?: undefined;
+    y?: undefined;
+} | {
+    data: any[] | undefined;
+    x: string | undefined;
+    y: string | undefined;
+};
+export declare class ImageState {
+    #private;
+    chartCtx: ChartState;
+    geo: GeoState;
+    dataMode: boolean;
+    resolveImage(d: any): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        r: number | undefined;
+        rotate: number | undefined;
+    };
+    resolveHref(d: any): string | undefined;
+    resolvedItems: {
+        d: any;
+        key: any;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        r: number | undefined;
+        rotate: number | undefined;
+    }[];
+    defaultSize: number;
+    resolvedPixelWidth: number;
+    resolvedPixelHeight: number;
+    pixelR: number | undefined;
+    pixelRotate: number | undefined;
+    get motionX(): any;
+    get motionY(): any;
+    get motionWidth(): any;
+    get motionHeight(): any;
+    constructor(getProps: () => ImageProps);
+}

package/dist/components/Image/Image.shared.svelte.js

@@ -0,0 +1,157 @@
+import { untrack } from 'svelte';
+import { get } from '@layerstack/utils';
+import { hasAnyDataProp, resolveDataProp, resolveGeoDataPair, } from '../../utils/dataProp.js';
+import { chartDataArray } from '../../utils/common.js';
+import { createMotion, createDataMotionMap, parseMotionProp, } from '../../utils/motion.svelte.js';
+import { getChartContext } from '../../contexts/chart.js';
+import { getGeoContext } from '../../contexts/geo.js';
+const defaultKey = (_, i) => i;
+export function imageMarkInfo(props, dataMode) {
+    if (!dataMode)
+        return {};
+    return {
+        data: props.data,
+        x: typeof props.x === 'string' ? props.x : undefined,
+        y: typeof props.y === 'string' ? props.y : undefined,
+    };
+}
+export class ImageState {
+    #getProps = () => ({});
+    chartCtx = getChartContext();
+    geo = getGeoContext();
+    dataMode = $derived(hasAnyDataProp(this.#getProps().x, this.#getProps().y, this.#getProps().width, this.#getProps().height, this.#getProps().r) || typeof this.#getProps().href === 'function');
+    #resolvedData = $derived(this.dataMode ? (this.#getProps().data ?? chartDataArray(this.chartCtx.data)) : []);
+    resolveImage(d) {
+        const props = this.#getProps();
+        const resolvedR = props.r !== undefined ? resolveDataProp(props.r, d, null, 0) : undefined;
+        const defaultSize = resolvedR !== undefined ? resolvedR * 2 : 16;
+        const resolvedWidth = props.width !== undefined
+            ? resolveDataProp(props.width, d, null, defaultSize)
+            : defaultSize;
+        const resolvedHeight = props.height !== undefined
+            ? resolveDataProp(props.height, d, null, defaultSize)
+            : defaultSize;
+        let resolvedX, resolvedY;
+        if (this.geo.projection) {
+            [resolvedX, resolvedY] = resolveGeoDataPair(props.x, props.y, d, this.geo.projection);
+        }
+        else {
+            resolvedX = resolveDataProp(props.x, d, this.chartCtx.xScale, 0);
+            resolvedY = resolveDataProp(props.y, d, this.chartCtx.yScale, 0);
+        }
+        return {
+            x: resolvedX,
+            y: resolvedY,
+            width: resolvedWidth,
+            height: resolvedHeight,
+            r: resolvedR,
+            rotate: props.rotate !== undefined ? resolveDataProp(props.rotate, d, null, 0) : undefined,
+        };
+    }
+    resolveHref(d) {
+        const href = this.#getProps().href;
+        if (!href)
+            return undefined;
+        if (typeof href === 'function')
+            return href(d);
+        const dataValue = get(d, href);
+        if (dataValue !== undefined)
+            return String(dataValue);
+        return href;
+    }
+    resolvedItems = $derived.by(() => {
+        if (!this.dataMode)
+            return [];
+        const props = this.#getProps();
+        const keyFn = props.key ?? defaultKey;
+        return this.#resolvedData.map((d, i) => {
+            const key = keyFn(d, i);
+            const resolved = this.resolveImage(d);
+            const animated = this.#dataMotionMap?.get(key);
+            return {
+                d,
+                key,
+                x: animated?.x ?? resolved.x,
+                y: animated?.y ?? resolved.y,
+                width: animated?.width ?? resolved.width,
+                height: animated?.height ?? resolved.height,
+                r: resolved.r,
+                rotate: resolved.rotate,
+            };
+        });
+    });
+    // Pixel-mode helpers
+    defaultSize = $derived(typeof this.#getProps().r === 'number' ? this.#getProps().r * 2 : 16);
+    resolvedPixelWidth = $derived(typeof this.#getProps().width === 'number'
+        ? this.#getProps().width
+        : this.defaultSize);
+    resolvedPixelHeight = $derived(typeof this.#getProps().height === 'number'
+        ? this.#getProps().height
+        : this.defaultSize);
+    pixelR = $derived(typeof this.#getProps().r === 'number' ? this.#getProps().r : undefined);
+    pixelRotate = $derived(typeof this.#getProps().rotate === 'number' ? this.#getProps().rotate : undefined);
+    #dataMotionMap = null;
+    #motionX;
+    #motionY;
+    #motionWidth;
+    #motionHeight;
+    get motionX() {
+        return this.#motionX.current;
+    }
+    get motionY() {
+        return this.#motionY.current;
+    }
+    get motionWidth() {
+        return this.#motionWidth.current;
+    }
+    get motionHeight() {
+        return this.#motionHeight.current;
+    }
+    constructor(getProps) {
+        this.#getProps = getProps;
+        const initial = getProps();
+        const initialX = initial.initialX ?? (typeof initial.x === 'number' ? initial.x : 0);
+        const initialY = initial.initialY ?? (typeof initial.y === 'number' ? initial.y : 0);
+        const initialWidth = initial.initialWidth ??
+            (typeof initial.width === 'number'
+                ? initial.width
+                : typeof initial.r === 'number'
+                    ? initial.r * 2
+                    : 16);
+        const initialHeight = initial.initialHeight ??
+            (typeof initial.height === 'number'
+                ? initial.height
+                : typeof initial.r === 'number'
+                    ? initial.r * 2
+                    : 16);
+        const motion = initial.motion;
+        this.#motionX = createMotion(initialX, () => (typeof getProps().x === 'number' ? getProps().x : 0), motion === undefined ? undefined : parseMotionProp(motion, 'x'));
+        this.#motionY = createMotion(initialY, () => (typeof getProps().y === 'number' ? getProps().y : 0), motion === undefined ? undefined : parseMotionProp(motion, 'y'));
+        this.#motionWidth = createMotion(initialWidth, () => this.resolvedPixelWidth, motion === undefined ? undefined : parseMotionProp(motion, 'width'));
+        this.#motionHeight = createMotion(initialHeight, () => this.resolvedPixelHeight, motion === undefined ? undefined : parseMotionProp(motion, 'height'));
+        this.#dataMotionMap = createDataMotionMap(motion);
+        if (this.#dataMotionMap) {
+            const motionMap = this.#dataMotionMap;
+            $effect(() => {
+                if (!this.dataMode)
+                    return;
+                const props = getProps();
+                const keyFn = props.key ?? defaultKey;
+                const activeKeys = new Set();
+                for (let i = 0; i < this.#resolvedData.length; i++) {
+                    const d = this.#resolvedData[i];
+                    const key = keyFn(d, i);
+                    activeKeys.add(key);
+                    const resolved = this.resolveImage(d);
+                    untrack(() => motionMap.update(key, {
+                        x: resolved.x,
+                        y: resolved.y,
+                        width: resolved.width,
+                        height: resolved.height,
+                    }));
+                }
+                untrack(() => motionMap.cleanup(activeKeys));
+            });
+        }
+    }
+}

package/dist/components/Image/Image.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" module>
+  export type {
+    ImageProps,
+    ImagePropsWithoutHTML,
+  } from './Image.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import ImageSvg from './Image.svg.svelte';
+  import ImageCanvas from './Image.canvas.svelte';
+  import ImageHtml from './Image.html.svelte';
+  import type { ImageProps } from './Image.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let { ref = $bindable(), ...rest }: ImageProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <ImageSvg bind:ref {...rest} />
+{:else if layerCtx === 'canvas'}
+  <ImageCanvas {...rest} />
+{:else if layerCtx === 'html'}
+  <ImageHtml {...rest} />
+{/if}

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

@@ -0,0 +1,5 @@
+export type { ImageProps, ImagePropsWithoutHTML, } from './Image.shared.svelte.js';
+import type { ImageProps } from './Image.shared.svelte.js';
+declare const Image: import("svelte").Component<ImageProps, {}, "ref">;
+type Image = ReturnType<typeof Image>;
+export default Image;

package/dist/components/Image/Image.svelte.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/{Image.svelte.test.js → Image/Image.svelte.test.js}

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import { render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
-import TestHarness, { componentTestId } from './tests/TestHarness.svelte';
+import TestHarness, { componentTestId } from '../tests/TestHarness.svelte';
 import Image from './Image.svelte';
 describe('Image', () => {
     describe('pixel mode', () => {