layerchart 2.0.0-next.0 → 2.0.0-next.2

package/dist/components/layout/Svg.svelte

@@ -1,97 +1,149 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+  import type { Without } from '../../utils/types.js';
+  import type { SVGAttributes } from 'svelte/elements';
+
+  type SVGPropsWithoutHTML = {
+    /**
+     * A reference to the layer's `<svg>` tag.
+     *
+     * @bindable
+     */
+    ref?: SVGSVGElement;
+
+    /**
+     * A reference to the layer's `<g>` tag.
+     *
+     * @bindable
+     */
+    innerRef?: SVGGElement;
+
+    /**
+     * The layer's z-index.
+     */
+    zIndex?: number;
+
+    /**
+     * Set this to `false` to set `pointer-events: none;` on the entire layer.
+     */
+    pointerEvents?: boolean;
+
+    /**
+     * A string passed to the `viewBox` property on the `<svg>` tag.
+     */
+    viewBox?: string;
+
+    /**
+     * Shorthand to set the contents of `<title></title>` for accessibility.
+     * You can also set arbitrary HTML via the title snippet but this is a convenient shorthand.
+     */
+    title?: string | Snippet;
+
+    /**
+     * The inner content of the `<defs>` tag.
+     */
+    defs?: Snippet;
+
+    /**
+     * Translate children to center (useful for radial layouts)
+     */
+    center?: boolean | 'x' | 'y';
+
+    /**
+     * Ignore TransformContext.
+     * Useful to add static elements such as legends.
+     */
+    ignoreTransform?: boolean;
+
+    children?: Snippet<[{ ref: SVGElement }]>;
+  };
+
+  export type SVGProps = SVGPropsWithoutHTML &
+    Without<SVGAttributes<SVGElement>, SVGPropsWithoutHTML>;
+</script>
+
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
-
-  import { setRenderContext } from '../Chart.svelte';
-  import { chartContext } from '../ChartContext.svelte';
-  import { transformContext } from '../TransformContext.svelte';
-
-  /** The layer's `<svg>` tag. Useful for bindings. */
-  export let element: SVGElement | undefined = undefined;
-
-  /** The layer's `<g>` tag. Useful for bindings. */
-  export let innerElement: SVGGElement | undefined = undefined;
-
-  /** The layer's z-index. */
-  export let zIndex = undefined;
-
-  /** Set this to `false` to set `pointer-events: none;` on the entire layer. */
-  export let pointerEvents: boolean | undefined = undefined;
-
-  /** A string passed to the `viewBox` property on the `<svg>` tag. */
-  export let viewBox: string | undefined = undefined;
-
-  /** A string passed to the `aria-label` property on the `<svg>` tag. */
-  export let label: string | undefined = undefined;
-
-  /** A string passed to the `aria-labelledby property` on the `<svg>` tag. */
-  export let labelledBy: string | undefined = undefined;
-
-  /** A string passed to the `aria-describedby` property on the `<svg>` tag. */
-  export let describedBy: string | undefined = undefined;
-
-  /** Shorthand to set the contents of `<title></title>` for accessibility. You can also set arbitrary HTML via the "title" slot but this is a convenient shorthand. If you use the "title" slot, this prop is ignored. */
-  export let title: string | undefined = undefined;
-
-  /**
-   * Translate children to center (useful for radial layouts)
-   */
-  export let center: boolean | 'x' | 'y' = false;
-
-  /** Ignore TransformContext.  Useful to add static elements such as legends. */
-  export let ignoreTransform = false;
-
-  const { containerWidth, containerHeight, width, height, padding } = chartContext();
-  const { mode, scale, translate } = transformContext();
-
-  let transform = '';
-  $: if (mode === 'canvas' && !ignoreTransform) {
-    transform = `translate(${$translate.x},${$translate.y}) scale(${$scale})`;
-  } else if (center) {
-    transform = `translate(${center === 'x' || center === true ? $width / 2 : 0}, ${center === 'y' || center === true ? $height / 2 : 0})`;
-  }
+  import { getTransformContext } from '../TransformContext.svelte';
+
+  import { getChartContext, setRenderContext } from '../Chart.svelte';
+  import { layerClass } from '../../utils/attributes.js';
+
+  let {
+    ref: refProp = $bindable(),
+    innerRef: innerRefProp = $bindable(),
+    zIndex = 0,
+    pointerEvents,
+    viewBox,
+    ignoreTransform = false,
+    center = false,
+    class: className,
+    title,
+    defs,
+    children,
+    ...restProps
+  }: SVGProps = $props();
+
+  let ref = $state<SVGSVGElement>();
+  let innerRef = $state<SVGGElement>();
+
+  $effect.pre(() => {
+    refProp = ref;
+  });
+  $effect.pre(() => {
+    innerRefProp = innerRef;
+  });
+
+  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})`;
+    } else if (center) {
+      return `translate(${center === 'x' || center === true ? ctx.width / 2 : 0}, ${center === 'y' || center === true ? ctx.height / 2 : 0})`;
+    }
+  });
 
   setRenderContext('svg');
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <svg
-  bind:this={element}
+  bind:this={ref}
   {viewBox}
-  width={$containerWidth}
-  height={$containerHeight}
+  width={ctx.containerWidth}
+  height={ctx.containerHeight}
   style:z-index={zIndex}
   class={cls(
-    'layercake-layout-svg',
+    layerClass('layout-svg'),
     'absolute top-0 left-0 overflow-visible',
     pointerEvents === false && 'pointer-events-none',
-    $$props.class
+    className
   )}
-  aria-label={label}
-  aria-labelledby={labelledBy}
-  aria-describedby={describedBy}
-  on:click
   role="figure"
+  {...restProps}
 >
-  <slot name="title">
-    {#if title}<title>{title}</title>{/if}
-  </slot>
+  {#if typeof title === 'function'}
+    {@render title()}
+  {:else if title}
+    <title class={layerClass('layout-svg-title')}>{title}</title>
+  {/if}
 
   <defs>
-    <slot name="defs"></slot>
+    {@render defs?.()}
   </defs>
 
   <g
-    bind:this={innerElement}
-    class="layercake-layout-svg_g"
-    transform="translate({$padding.left}, {$padding.top})"
+    bind:this={innerRef}
+    class={layerClass('layout-svg-g')}
+    transform="translate({ctx.padding.left}, {ctx.padding.top})"
   >
     {#if transform}
-      <g {transform}>
-        <slot {element}></slot>
+      <g {transform} class={layerClass('layout-svg-g-transform')}>
+        {@render children?.({ ref })}
       </g>
     {:else}
-      <slot {element}></slot>
+      {@render children?.({ ref })}
     {/if}
   </g>
 </svg>

package/dist/components/layout/Svg.svelte.d.ts

@@ -1,35 +1,54 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        element?: SVGElement | undefined;
-        innerElement?: SVGGElement | undefined;
-        zIndex?: undefined;
-        pointerEvents?: boolean | undefined | undefined;
-        viewBox?: string | undefined | undefined;
-        label?: string | undefined | undefined;
-        labelledBy?: string | undefined | undefined;
-        describedBy?: string | undefined | undefined;
-        title?: string | undefined | undefined;
-        center?: boolean | "x" | "y" | undefined;
-        ignoreTransform?: boolean | undefined;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        title: {};
-        defs: {};
-        default: {
-            element: SVGElement | undefined;
-        };
-    };
+import type { Snippet } from 'svelte';
+import type { Without } from '../../utils/types.js';
+import type { SVGAttributes } from 'svelte/elements';
+type SVGPropsWithoutHTML = {
+    /**
+     * A reference to the layer's `<svg>` tag.
+     *
+     * @bindable
+     */
+    ref?: SVGSVGElement;
+    /**
+     * A reference to the layer's `<g>` tag.
+     *
+     * @bindable
+     */
+    innerRef?: SVGGElement;
+    /**
+     * The layer's z-index.
+     */
+    zIndex?: number;
+    /**
+     * Set this to `false` to set `pointer-events: none;` on the entire layer.
+     */
+    pointerEvents?: boolean;
+    /**
+     * A string passed to the `viewBox` property on the `<svg>` tag.
+     */
+    viewBox?: string;
+    /**
+     * Shorthand to set the contents of `<title></title>` for accessibility.
+     * You can also set arbitrary HTML via the title snippet but this is a convenient shorthand.
+     */
+    title?: string | Snippet;
+    /**
+     * The inner content of the `<defs>` tag.
+     */
+    defs?: Snippet;
+    /**
+     * Translate children to center (useful for radial layouts)
+     */
+    center?: boolean | 'x' | 'y';
+    /**
+     * Ignore TransformContext.
+     * Useful to add static elements such as legends.
+     */
+    ignoreTransform?: boolean;
+    children?: Snippet<[{
+        ref: SVGElement;
+    }]>;
 };
-export type SvgProps = typeof __propDef.props;
-export type SvgEvents = typeof __propDef.events;
-export type SvgSlots = typeof __propDef.slots;
-export default class Svg extends SvelteComponentTyped<SvgProps, SvgEvents, SvgSlots> {
-}
-export {};
+export type SVGProps = SVGPropsWithoutHTML & Without<SVGAttributes<SVGElement>, SVGPropsWithoutHTML>;
+declare const Svg: import("svelte").Component<SVGProps, {}, "ref" | "innerRef">;
+type Svg = ReturnType<typeof Svg>;
+export default Svg;

package/dist/components/layout/WebGL.svelte

@@ -0,0 +1,135 @@
+<script lang="ts" module>
+  export type WebGLProps = {
+    /**
+     * A reference to the  `<canvas>` element.
+     *
+     * @bindable
+     */
+    ref?: HTMLCanvasElement;
+
+    /**
+     * The layer's z-index.
+     */
+    zIndex?: number;
+
+    /**
+     * Set this to `false` to set `pointer-events: none;` on the entire layer.
+     *
+     * @default true
+     */
+    pointerEvents?: boolean;
+
+    /**
+     * The second argument passed to canvas.getContext.
+     *
+     * See the WebGL docs [for more info](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext).
+     */
+    contextAttributes?: Parameters<HTMLCanvasElement['getContext']>[1];
+
+    /**
+     * The `<canvas>`'s WebGL context.
+     * @bindable
+     */
+    context?: WebGLRenderingContext;
+
+    /**
+     * Text to display if the browser won't render a canvas tag.
+     * You can also set arbitrary HTML via the `fallback` snippet but this is fine
+     * if you just need text. If you use the `fallback` snippet, this prop is ignored.
+     */
+    fallback?: string | Snippet;
+
+    children?: Snippet<
+      [{ ref: HTMLCanvasElement; webGLContext: WebGLRenderingContext | undefined }]
+    >;
+  };
+
+  export type WebGLContextValue = {
+    gl: WebGLRenderingContext | null;
+  };
+
+  const _WebGLContext = new Context<WebGLContextValue>('WebGL');
+
+  export function setWebGLContext(context: WebGLContextValue) {
+    return _WebGLContext.set(context);
+  }
+
+  export function getWebGLContext() {
+    const defaultContext: WebGLContextValue = $state({ gl: null });
+    return _WebGLContext.getOr(defaultContext);
+  }
+</script>
+
+<script lang="ts">
+  import { onMount, type Snippet } from 'svelte';
+  import { getChartContext } from '../Chart.svelte';
+  import { Context } from 'runed';
+  import { extractLayerProps } from '../../utils/attributes.js';
+
+  let {
+    context = $bindable(),
+    ref: refProp = $bindable(),
+    contextAttributes,
+    fallback = '',
+    pointerEvents = true,
+    zIndex = 0,
+    children,
+    ...restProps
+  }: WebGLProps = $props();
+
+  let ref = $state<HTMLCanvasElement>();
+  $effect.pre(() => {
+    refProp = ref;
+  });
+
+  let testGl;
+
+  const ctx = getChartContext();
+
+  onMount(() => {
+    /* --------------------------------------------
+     * Try to find a working webgl context
+     */
+    const contexts = ['webgl', 'experimental-webgl', 'moz-webgl', 'webkit-3d'];
+    for (let j = 0; j < contexts.length; j++) {
+      testGl = ref?.getContext(contexts[j], contextAttributes);
+      if (testGl) {
+        // @ts-ignore
+        context = testGl;
+        break;
+      }
+    }
+  });
+
+  setWebGLContext({
+    get gl() {
+      return context ?? null;
+    },
+    set gl(v: WebGLRenderingContext | null) {
+      if (v) {
+        context = v;
+      }
+      context = undefined;
+    },
+  });
+</script>
+
+<canvas
+  bind:this={ref}
+  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')}
+>
+  {#if typeof fallback === 'function'}
+    {@render fallback()}
+  {:else if fallback}
+    {fallback}
+  {/if}
+</canvas>
+
+{@render children?.({ ref, webGLContext: context })}

package/dist/components/layout/WebGL.svelte.d.ts

@@ -0,0 +1,50 @@
+export type WebGLProps = {
+    /**
+     * A reference to the  `<canvas>` element.
+     *
+     * @bindable
+     */
+    ref?: HTMLCanvasElement;
+    /**
+     * The layer's z-index.
+     */
+    zIndex?: number;
+    /**
+     * Set this to `false` to set `pointer-events: none;` on the entire layer.
+     *
+     * @default true
+     */
+    pointerEvents?: boolean;
+    /**
+     * The second argument passed to canvas.getContext.
+     *
+     * See the WebGL docs [for more info](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext).
+     */
+    contextAttributes?: Parameters<HTMLCanvasElement['getContext']>[1];
+    /**
+     * The `<canvas>`'s WebGL context.
+     * @bindable
+     */
+    context?: WebGLRenderingContext;
+    /**
+     * Text to display if the browser won't render a canvas tag.
+     * You can also set arbitrary HTML via the `fallback` snippet but this is fine
+     * if you just need text. If you use the `fallback` snippet, this prop is ignored.
+     */
+    fallback?: string | Snippet;
+    children?: Snippet<[
+        {
+            ref: HTMLCanvasElement;
+            webGLContext: WebGLRenderingContext | undefined;
+        }
+    ]>;
+};
+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;