layerchart 2.0.0-next.5 → 2.0.0-next.50

package/dist/components/{layout → layers}/Html.svelte

@@ -38,6 +38,14 @@
      */
     ignoreTransform?: boolean;
 
+    /**
+     * Whether to clip overflow content.
+     * When true, sets `overflow: hidden` on the layer.
+     *
+     * @default false
+     */
+    clip?: boolean;
+
     children?: Snippet<[{ ref: HTMLElement }]>;
   };
 
@@ -46,11 +54,8 @@
 </script>
 
 <script lang="ts">
-  import { cls } from '@layerstack/tailwind';
-  import { getTransformContext } from '../TransformContext.svelte';
-
-  import { getChartContext, setRenderContext } from '../Chart.svelte';
-  import { layerClass } from '../../utils/attributes.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { setLayerContext } from '../../contexts/layer.js';
 
   let {
     ref: refProp = $bindable(),
@@ -62,6 +67,7 @@
     'aria-describedby': describedBy,
     center = false,
     ignoreTransform = false,
+    clip = false,
     class: className,
     children,
     ...restProps
@@ -75,31 +81,26 @@
   const roleVal = $derived(role || (label || labelledBy || describedBy ? 'figure' : undefined));
 
   const ctx = getChartContext();
-  const transformCtx = getTransformContext();
 
   const transform = $derived.by(() => {
-    if (transformCtx.mode === 'canvas' && !ignoreTransform) {
-      return `translate(${transformCtx.translate.x}px,${transformCtx.translate.y}px) scale(${transformCtx.scale})`;
+    if (ctx.transform.mode === 'canvas' && !ignoreTransform) {
+      return `translate(${ctx.transform.translate.x}px,${ctx.transform.translate.y}px) scale(${ctx.transform.scale})`;
     } else if (center) {
       return `translate(${center === 'x' || center === true ? ctx.width / 2 : 0}px, ${center === 'y' || center === true ? ctx.height / 2 : 0}px)`;
     }
   });
 
-  setRenderContext('html');
+  setLayerContext('html');
 </script>
 
 <div
   bind:this={ref}
-  class={cls(
-    layerClass('layout-html'),
-    'absolute top-0 left-0',
-    pointerEvents === false && 'pointer-events-none',
-    className
-  )}
+  class={['lc-layout-html', className]}
+  class:disablePointerEvents={pointerEvents === false}
+  class:clip
   style:transform
   style:transform-origin="top left"
   style:z-index={zIndex}
-  style:pointer-events={pointerEvents === false ? 'none' : null}
   style:top="{ctx.padding.top}px"
   style:bottom="{ctx.padding.bottom}px"
   style:left="{ctx.padding.left}px"
@@ -112,3 +113,20 @@
 >
   {@render children?.({ ref })}
 </div>
+
+<style>
+  @layer base {
+    :where(.lc-layout-html) {
+      position: absolute;
+      inset: 0;
+
+      &.disablePointerEvents {
+        pointer-events: none;
+      }
+
+      &.clip {
+        overflow: hidden;
+      }
+    }
+  }
+</style>

package/dist/components/{layout → layers}/Html.svelte.d.ts

@@ -30,6 +30,13 @@ type HTMLPropsWithoutHTML = {
      * Ignore TransformContext.  Useful to add static elements such as legends.
      */
     ignoreTransform?: boolean;
+    /**
+     * Whether to clip overflow content.
+     * When true, sets `overflow: hidden` on the layer.
+     *
+     * @default false
+     */
+    clip?: boolean;
     children?: Snippet<[{
         ref: HTMLElement;
     }]>;

package/dist/components/layers/Layer.svelte

@@ -0,0 +1,85 @@
+<script lang="ts" module>
+  import type { ComponentProps, Snippet } from 'svelte';
+
+  export type CanvasLayerProps = {
+    type: 'canvas';
+  } & Omit<ComponentProps<typeof Canvas>, 'type' | 'onpointermove'>;
+
+  export type HtmlLayerProps = {
+    type: 'html';
+  } & Omit<ComponentProps<typeof Html>, 'type' | 'onpointermove'>;
+
+  export type SvgLayerProps = {
+    type: 'svg';
+  } & Omit<ComponentProps<typeof Svg>, 'type' | 'onpointermove'>;
+
+  export type DefaultLayerProps = {
+    type?: undefined;
+    children: Snippet;
+  };
+
+  export type LayerProps = (
+    | CanvasLayerProps
+    | HtmlLayerProps
+    | SvgLayerProps
+    | DefaultLayerProps
+  ) & {
+    onpointermove?: (e: PointerEvent) => void;
+  };
+</script>
+
+<script lang="ts">
+  import Canvas, { type CanvasProps } from './Canvas.svelte';
+  import Svg, { type SVGProps } from './Svg.svelte';
+  import Html, { type HTMLProps } from './Html.svelte';
+  import Frame from '../Frame.svelte';
+  import { getSettings } from '../../contexts/settings.js';
+
+  let { type, children, ...restProps }: LayerProps = $props();
+
+  let settings = getSettings();
+  let layer = $derived(type ?? settings.layer);
+</script>
+
+{#if layer === 'canvas'}
+  <Canvas {...restProps as CanvasProps}>
+    {#snippet children(props)}
+      {#if settings.debug}
+        <Frame class="lc-debug-frame" />
+        <Frame class="lc-debug-frame" full />
+      {/if}
+
+      {@render children?.(props)}
+    {/snippet}
+  </Canvas>
+{:else if layer === 'svg'}
+  <Svg {...restProps as SVGProps}>
+    {#snippet children(props)}
+      {#if settings.debug}
+        <Frame class="lc-debug-frame" />
+        <Frame class="lc-debug-frame" full />
+      {/if}
+
+      {@render children?.(props)}
+    {/snippet}
+  </Svg>
+{:else if layer === 'html'}
+  <Html {...restProps as HTMLProps}>
+    {#snippet children(props)}
+      {#if settings.debug}
+        <Frame class="lc-debug-frame" />
+        <Frame class="lc-debug-frame" full />
+      {/if}
+
+      {@render children?.(props)}
+    {/snippet}
+  </Html>
+{/if}
+
+<style>
+  @layer component {
+    :global(:where(.lc-debug-frame)) {
+      --fill-color: color-mix(in oklab, var(--color-danger) 10%, transparent);
+    }
+  }
+</style>

package/dist/components/layers/Layer.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps, Snippet } from 'svelte';
+export type CanvasLayerProps = {
+    type: 'canvas';
+} & Omit<ComponentProps<typeof Canvas>, 'type' | 'onpointermove'>;
+export type HtmlLayerProps = {
+    type: 'html';
+} & Omit<ComponentProps<typeof Html>, 'type' | 'onpointermove'>;
+export type SvgLayerProps = {
+    type: 'svg';
+} & Omit<ComponentProps<typeof Svg>, 'type' | 'onpointermove'>;
+export type DefaultLayerProps = {
+    type?: undefined;
+    children: Snippet;
+};
+export type LayerProps = (CanvasLayerProps | HtmlLayerProps | SvgLayerProps | DefaultLayerProps) & {
+    onpointermove?: (e: PointerEvent) => void;
+};
+import Canvas from './Canvas.svelte';
+import Svg from './Svg.svelte';
+import Html from './Html.svelte';
+declare const Layer: import("svelte").Component<LayerProps, {}, "">;
+type Layer = ReturnType<typeof Layer>;
+export default Layer;

package/dist/components/{layout → layers}/Svg.svelte

@@ -55,6 +55,14 @@
      */
     ignoreTransform?: boolean;
 
+    /**
+     * Whether to clip overflow content.
+     * When true, sets `overflow: hidden` on the SVG.
+     *
+     * @default false
+     */
+    clip?: boolean;
+
     children?: Snippet<[{ ref: SVGElement }]>;
   };
 
@@ -63,11 +71,8 @@
 </script>
 
 <script lang="ts">
-  import { cls } from '@layerstack/tailwind';
-  import { getTransformContext } from '../TransformContext.svelte';
-
-  import { getChartContext, setRenderContext } from '../Chart.svelte';
-  import { layerClass } from '../../utils/attributes.js';
+  import { getChartContext } from '../../contexts/chart.js';
+  import { setLayerContext } from '../../contexts/layer.js';
 
   let {
     ref: refProp = $bindable(),
@@ -77,6 +82,7 @@
     viewBox,
     ignoreTransform = false,
     center = false,
+    clip = false,
     class: className,
     title,
     defs,
@@ -95,17 +101,16 @@
   });
 
   const ctx = getChartContext();
-  const transformCtx = getTransformContext();
 
   const transform = $derived.by(() => {
-    if (transformCtx.mode === 'canvas' && !ignoreTransform) {
-      return `translate(${transformCtx.translate.x},${transformCtx.translate.y}) scale(${transformCtx.scale})`;
+    if (ctx.transform.mode === 'canvas' && !ignoreTransform) {
+      return `translate(${ctx.transform.translate.x},${ctx.transform.translate.y}) scale(${ctx.transform.scale})`;
     } else if (center) {
       return `translate(${center === 'x' || center === true ? ctx.width / 2 : 0}, ${center === 'y' || center === true ? ctx.height / 2 : 0})`;
     }
   });
 
-  setRenderContext('svg');
+  setLayerContext('svg');
 </script>
 
 <svg
@@ -114,19 +119,16 @@
   width={ctx.containerWidth}
   height={ctx.containerHeight}
   style:z-index={zIndex}
-  class={cls(
-    layerClass('layout-svg'),
-    'absolute top-0 left-0 overflow-visible',
-    pointerEvents === false && 'pointer-events-none',
-    className
-  )}
+  class={['lc-layout-svg', className]}
+  class:disablePointerEvents={pointerEvents === false}
+  class:clip
   role="figure"
   {...restProps}
 >
   {#if typeof title === 'function'}
     {@render title()}
   {:else if title}
-    <title class={layerClass('layout-svg-title')}>{title}</title>
+    <title class="lc-layout-svg-title">{title}</title>
   {/if}
 
   <defs>
@@ -135,11 +137,11 @@
 
   <g
     bind:this={innerRef}
-    class={layerClass('layout-svg-g')}
+    class="lc-layout-svg-g"
     transform="translate({ctx.padding.left}, {ctx.padding.top})"
   >
     {#if transform}
-      <g {transform} class={layerClass('layout-svg-g-transform')}>
+      <g {transform} class="lc-layout-svg-g-transform">
         {@render children?.({ ref })}
       </g>
     {:else}
@@ -147,3 +149,21 @@
     {/if}
   </g>
 </svg>
+
+<style>
+  @layer base {
+    :where(.lc-layout-svg) {
+      position: absolute;
+      inset: 0;
+      overflow: visible; /* match html and allow viewing outside of bounds (useful for axis that leak and general debugging)*/
+
+      &.disablePointerEvents {
+        pointer-events: none;
+      }
+
+      &.clip {
+        overflow: hidden;
+      }
+    }
+  }
+</style>

package/dist/components/{layout → layers}/Svg.svelte.d.ts

@@ -44,6 +44,13 @@ type SVGPropsWithoutHTML = {
      * Useful to add static elements such as legends.
      */
     ignoreTransform?: boolean;
+    /**
+     * Whether to clip overflow content.
+     * When true, sets `overflow: hidden` on the SVG.
+     *
+     * @default false
+     */
+    clip?: boolean;
     children?: Snippet<[{
         ref: SVGElement;
     }]>;

package/dist/components/{layout → layers}/WebGL.svelte

@@ -1,5 +1,9 @@
 <script lang="ts" module>
-  export type WebGLProps = {
+  import type { Snippet } from 'svelte';
+  import type { Without } from '../../utils/types.js';
+  import type { HTMLCanvasAttributes } from 'svelte/elements';
+
+  export type WebGLPropsWithoutHTML = {
     /**
      * A reference to the  `<canvas>` element.
      *
@@ -44,6 +48,9 @@
     >;
   };
 
+  export type WebGLProps = WebGLPropsWithoutHTML &
+    Without<HTMLCanvasAttributes, WebGLPropsWithoutHTML>;
+
   export type WebGLContextValue = {
     gl: WebGLRenderingContext | null;
   };
@@ -61,10 +68,9 @@
 </script>
 
 <script lang="ts">
-  import { onMount, type Snippet } from 'svelte';
-  import { getChartContext } from '../Chart.svelte';
+  import { onMount } from 'svelte';
+  import { getChartContext } from '../../contexts/chart.js';
   import { Context } from 'runed';
-  import { extractLayerProps } from '../../utils/attributes.js';
 
   let {
     context = $bindable(),
@@ -73,6 +79,7 @@
     fallback = '',
     pointerEvents = true,
     zIndex = 0,
+    class: className,
     children,
     ...restProps
   }: WebGLProps = $props();
@@ -116,14 +123,14 @@
 
 <canvas
   bind:this={ref}
+  class={['lc-layout-webgl', className]}
+  class:disablePointerEvents={pointerEvents === false}
   style:z-index={zIndex}
-  style:pointer-events={pointerEvents === false ? 'none' : null}
   style:top={ctx.padding.top + 'px'}
   style:right={ctx.padding.right + 'px'}
   style:bottom={ctx.padding.bottom + 'px'}
   style:left={ctx.padding.left + 'px'}
-  style="width:100%;height:100%;position:absolute;"
-  {...extractLayerProps(restProps, 'layout-webgl')}
+  {...restProps}
 >
   {#if typeof fallback === 'function'}
     {@render fallback()}
@@ -133,3 +140,16 @@
 </canvas>
 
 {@render children?.({ ref, webGLContext: context })}
+
+<style>
+  @layer base {
+    :where(.lc-layout-webgl) {
+      position: absolute;
+      inset: 0;
+
+      &.disablePointerEvents {
+        pointer-events: none;
+      }
+    }
+  }
+</style>

package/dist/components/{layout → layers}/WebGL.svelte.d.ts

@@ -1,4 +1,7 @@
-export type WebGLProps = {
+import type { Snippet } from 'svelte';
+import type { Without } from '../../utils/types.js';
+import type { HTMLCanvasAttributes } from 'svelte/elements';
+export type WebGLPropsWithoutHTML = {
     /**
      * A reference to the  `<canvas>` element.
      *
@@ -39,12 +42,12 @@ export type WebGLProps = {
         }
     ]>;
 };
+export type WebGLProps = WebGLPropsWithoutHTML & Without<HTMLCanvasAttributes, WebGLPropsWithoutHTML>;
 export type WebGLContextValue = {
     gl: WebGLRenderingContext | null;
 };
 export declare function setWebGLContext(context: WebGLContextValue): WebGLContextValue;
 export declare function getWebGLContext(): WebGLContextValue;
-import { type Snippet } from 'svelte';
-declare const WebGl: import("svelte").Component<WebGLProps, {}, "ref" | "context">;
-type WebGl = ReturnType<typeof WebGl>;
-export default WebGl;
+declare const WebGL: import("svelte").Component<WebGLProps, {}, "ref" | "context">;
+type WebGL = ReturnType<typeof WebGL>;
+export default WebGL;

package/dist/components/tests/BrushTestHarness.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import Chart from '../Chart.svelte';
+  import type { ChartState } from '../../states/chart.svelte.js';
+
+  let {
+    chartProps = {},
+    oncontext,
+  }: {
+    chartProps?: Record<string, any>;
+    oncontext?: (ctx: ChartState<any, any, any>) => void;
+  } = $props();
+
+  let chartContext = $state<ChartState<any, any, any>>();
+
+  $effect(() => {
+    if (chartContext) {
+      oncontext?.(chartContext);
+    }
+  });
+
+  const mergedChartProps = $derived({
+    height: 200,
+    ...chartProps,
+  });
+</script>
+
+<Chart {...mergedChartProps} bind:context={chartContext} />

package/dist/components/tests/BrushTestHarness.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ChartState } from '../../states/chart.svelte.js';
+type $$ComponentProps = {
+    chartProps?: Record<string, any>;
+    oncontext?: (ctx: ChartState<any, any, any>) => void;
+};
+declare const BrushTestHarness: import("svelte").Component<$$ComponentProps, {}, "">;
+type BrushTestHarness = ReturnType<typeof BrushTestHarness>;
+export default BrushTestHarness;

package/dist/components/tests/TestHarness.svelte

@@ -0,0 +1,87 @@
+<script lang="ts" module>
+  export const componentTestId = 'test-lc-component';
+  export const chartTestId = 'test-lc-chart';
+</script>
+
+<script lang="ts">
+  import type { Component as ComponentType } from 'svelte';
+  import Chart from '../Chart.svelte';
+  import type { ChartState } from '../../states/chart.svelte.js';
+  import Layer from '../layers/Layer.svelte';
+
+  type ChildComponent = {
+    component: ComponentType;
+    props?: Record<string, any> | ((snippetProps: any) => Record<string, any>);
+  };
+
+  let {
+    useChart = true,
+    chartProps = {},
+    layer = 'svg',
+    layerProps = {},
+    component,
+    componentProps = {},
+    childComponents = [],
+    oncontext,
+  }: {
+    useChart?: boolean;
+    chartProps?: Record<string, any>;
+    layer?: 'svg' | 'html' | 'canvas';
+    layerProps?: Record<string, any>;
+    component: ComponentType;
+    componentProps?: Record<string, any>;
+    childComponents?: ChildComponent[];
+    oncontext?: (ctx: ChartState<any, any, any>) => void;
+  } = $props();
+
+  let chartContext = $state<ChartState<any, any, any>>();
+
+  $effect(() => {
+    if (chartContext) {
+      oncontext?.(chartContext);
+    }
+  });
+
+  const TestComponent = $derived(component);
+
+  // Merge defaults with chartProps so chartProps can override defaults
+  const mergedChartProps = $derived({
+    height: 300,
+    ...chartProps,
+  });
+
+  // Merge future defaults with componentProps so componentProps can override defaults
+  const mergedComponentProps = $derived({
+    ...componentProps,
+  });
+
+  function resolveProps(
+    props: Record<string, any> | ((snippetProps: any) => Record<string, any>) | undefined,
+    snippetProps: any
+  ): Record<string, any> {
+    if (typeof props === 'function') {
+      return props(snippetProps);
+    }
+    return props ?? {};
+  }
+</script>
+
+{#snippet Component()}
+  <TestComponent {...mergedComponentProps} data-testid={componentTestId}>
+    {#snippet children(snippetProps: any)}
+      {#each childComponents as child}
+        <child.component {...resolveProps(child.props, snippetProps)} />
+      {/each}
+    {/snippet}
+  </TestComponent>
+{/snippet}
+
+{#if useChart}
+  <Chart {...mergedChartProps} bind:context={chartContext} data-testid={chartTestId}>
+    <Layer center type={layer} {...layerProps}>
+      {@render Component()}
+    </Layer>
+  </Chart>
+{:else}
+  {@render Component()}
+{/if}

package/dist/components/tests/TestHarness.svelte.d.ts

@@ -0,0 +1,21 @@
+export declare const componentTestId = "test-lc-component";
+export declare const chartTestId = "test-lc-chart";
+import type { Component as ComponentType } from 'svelte';
+import type { ChartState } from '../../states/chart.svelte.js';
+type ChildComponent = {
+    component: ComponentType;
+    props?: Record<string, any> | ((snippetProps: any) => Record<string, any>);
+};
+type $$ComponentProps = {
+    useChart?: boolean;
+    chartProps?: Record<string, any>;
+    layer?: 'svg' | 'html' | 'canvas';
+    layerProps?: Record<string, any>;
+    component: ComponentType;
+    componentProps?: Record<string, any>;
+    childComponents?: ChildComponent[];
+    oncontext?: (ctx: ChartState<any, any, any>) => void;
+};
+declare const TestHarness: ComponentType<$$ComponentProps, {}, "">;
+type TestHarness = ReturnType<typeof TestHarness>;
+export default TestHarness;

package/dist/components/tests/TransformTestHarness.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import Chart from '../Chart.svelte';
+  import type { ChartState } from '../../states/chart.svelte.js';
+
+  let {
+    chartProps = {},
+    oncontext,
+  }: {
+    chartProps?: Record<string, any>;
+    oncontext?: (ctx: ChartState<any, any, any>) => void;
+  } = $props();
+
+  let chartContext = $state<ChartState<any, any, any>>();
+
+  $effect(() => {
+    if (chartContext) {
+      oncontext?.(chartContext);
+    }
+  });
+
+  const mergedChartProps = $derived({
+    height: 300,
+    ...chartProps,
+  });
+</script>
+
+<Chart {...mergedChartProps} bind:context={chartContext} />

package/dist/components/tests/TransformTestHarness.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ChartState } from '../../states/chart.svelte.js';
+type $$ComponentProps = {
+    chartProps?: Record<string, any>;
+    oncontext?: (ctx: ChartState<any, any, any>) => void;
+};
+declare const TransformTestHarness: import("svelte").Component<$$ComponentProps, {}, "">;
+type TransformTestHarness = ReturnType<typeof TransformTestHarness>;
+export default TransformTestHarness;