npm - layerchart - Versions diffs - 2.0.0-next.4 → 2.0.0-next.41 - Mend

layerchart 2.0.0-next.4 → 2.0.0-next.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (180) hide show

package/dist/components/AnnotationLine.svelte +15 -2
package/dist/components/AnnotationPoint.svelte +29 -11
package/dist/components/AnnotationRange.svelte +18 -4
package/dist/components/Arc.svelte +5 -5
package/dist/components/Area.svelte +10 -2
package/dist/components/Axis.svelte +175 -58
package/dist/components/Axis.svelte.d.ts +23 -6
package/dist/components/Bar.svelte +20 -15
package/dist/components/Bar.svelte.d.ts +2 -2
package/dist/components/Bars.svelte +4 -4
package/dist/components/Blur.svelte +7 -6
package/dist/components/Blur.svelte.d.ts +2 -5
package/dist/components/BrushContext.svelte +45 -45
package/dist/components/Calendar.svelte +31 -10
package/dist/components/Calendar.svelte.d.ts +2 -1
package/dist/components/Chart.svelte +76 -27
package/dist/components/Chart.svelte.d.ts +26 -8
package/dist/components/ChartClipPath.svelte +1 -1
package/dist/components/Circle.svelte +44 -3
package/dist/components/CircleClipPath.svelte +8 -1
package/dist/components/ClipPath.svelte +1 -2
package/dist/components/ColorRamp.svelte +1 -1
package/dist/components/ComputedStyles.svelte +9 -2
package/dist/components/Connector.svelte +3 -3
package/dist/components/Connector.svelte.d.ts +1 -1
package/dist/components/Ellipse.svelte +228 -0
package/dist/components/Ellipse.svelte.d.ts +64 -0
package/dist/components/ForceSimulation.svelte +184 -50
package/dist/components/ForceSimulation.svelte.d.ts +95 -21
package/dist/components/Frame.svelte +1 -1
package/dist/components/GeoCircle.svelte +1 -1
package/dist/components/GeoEdgeFade.svelte +1 -1
package/dist/components/GeoPath.svelte +30 -8
package/dist/components/GeoPoint.svelte +4 -5
package/dist/components/GeoSpline.svelte +5 -5
package/dist/components/GeoSpline.svelte.d.ts +1 -1
package/dist/components/GeoTile.svelte +1 -1
package/dist/components/Graticule.svelte +5 -5
package/dist/components/Grid.svelte +60 -63
package/dist/components/Group.svelte +13 -8
package/dist/components/Group.svelte.d.ts +10 -3
package/dist/components/Highlight.svelte +55 -28
package/dist/components/Highlight.svelte.d.ts +4 -0
package/dist/components/Hull.svelte +12 -5
package/dist/components/Labels.svelte +24 -13
package/dist/components/Labels.svelte.d.ts +12 -5
package/dist/components/Legend.svelte +143 -70
package/dist/components/Legend.svelte.d.ts +12 -8
package/dist/components/Line.svelte +40 -3
package/dist/components/LinearGradient.svelte +35 -4
package/dist/components/Link.svelte +1 -1
package/dist/components/Marker.svelte +37 -26
package/dist/components/MonthPath.svelte +26 -12
package/dist/components/MonthPath.svelte.d.ts +4 -3
package/dist/components/MotionPath.svelte +1 -1
package/dist/components/Pack.svelte.d.ts +10 -3
package/dist/components/Partition.svelte.d.ts +10 -3
package/dist/components/Pattern.svelte +5 -5
package/dist/components/Pie.svelte +1 -2
package/dist/components/Points.svelte +11 -72
package/dist/components/Points.svelte.d.ts +1 -8
package/dist/components/Polygon.svelte +309 -0
package/dist/components/Polygon.svelte.d.ts +115 -0
package/dist/components/RadialGradient.svelte +4 -6
package/dist/components/Rect.svelte +55 -5
package/dist/components/Rect.svelte.d.ts +2 -2
package/dist/components/RectClipPath.svelte +4 -3
package/dist/components/RectClipPath.svelte.d.ts +2 -2
package/dist/components/Rule.svelte +167 -77
package/dist/components/Rule.svelte.d.ts +7 -2
package/dist/components/Spline.svelte +59 -28
package/dist/components/Spline.svelte.d.ts +12 -4
package/dist/components/Text.svelte +121 -73
package/dist/components/Text.svelte.d.ts +6 -0
package/dist/components/TileImage.svelte +19 -4
package/dist/components/TransformContext.svelte +9 -3
package/dist/components/TransformControls.svelte +89 -38
package/dist/components/Tree.svelte.d.ts +10 -3
package/dist/components/Treemap.svelte +63 -26
package/dist/components/Treemap.svelte.d.ts +21 -14
package/dist/components/Voronoi.svelte +12 -13
package/dist/components/charts/ArcChart.svelte +43 -71
package/dist/components/charts/ArcChart.svelte.d.ts +10 -3
package/dist/components/charts/AreaChart.svelte +29 -59
package/dist/components/charts/AreaChart.svelte.d.ts +10 -3
package/dist/components/charts/BarChart.svelte +79 -71
package/dist/components/charts/BarChart.svelte.d.ts +10 -3
package/dist/components/charts/DefaultTooltip.svelte +3 -3
package/dist/components/charts/DefaultTooltip.svelte.d.ts +1 -1
package/dist/components/charts/LineChart.svelte +69 -75
package/dist/components/charts/LineChart.svelte.d.ts +21 -8
package/dist/components/charts/PieChart.svelte +44 -71
package/dist/components/charts/PieChart.svelte.d.ts +10 -3
package/dist/components/charts/ScatterChart.svelte +10 -39
package/dist/components/charts/ScatterChart.svelte.d.ts +10 -3
package/dist/components/charts/utils.svelte.d.ts +1 -19
package/dist/components/charts/utils.svelte.js +7 -35
package/dist/components/index.d.ts +4 -0
package/dist/components/index.js +5 -1
package/dist/components/layout/Canvas.svelte +96 -69
package/dist/components/layout/Canvas.svelte.d.ts +6 -0
package/dist/components/layout/Html.svelte +15 -9
package/dist/components/layout/Layer.svelte +6 -4
package/dist/components/layout/Layer.svelte.d.ts +6 -4
package/dist/components/layout/Svg.svelte +19 -11
package/dist/components/layout/WebGL.svelte +26 -6
package/dist/components/layout/WebGL.svelte.d.ts +5 -2
package/dist/components/tooltip/Tooltip.svelte +73 -36
package/dist/components/tooltip/Tooltip.svelte.d.ts +10 -3
package/dist/components/tooltip/TooltipContext.svelte +167 -54
package/dist/components/tooltip/TooltipContext.svelte.d.ts +19 -5
package/dist/components/tooltip/TooltipHeader.svelte +32 -18
package/dist/components/tooltip/TooltipHeader.svelte.d.ts +3 -3
package/dist/components/tooltip/TooltipItem.svelte +46 -37
package/dist/components/tooltip/TooltipItem.svelte.d.ts +3 -3
package/dist/components/tooltip/TooltipList.svelte +12 -10
package/dist/components/tooltip/TooltipSeparator.svelte +18 -10
package/dist/components/tooltip/tooltipMetaContext.d.ts +2 -2
package/dist/docs/Blockquote.svelte +6 -4
package/dist/docs/Blockquote.svelte.d.ts +4 -19
package/dist/docs/Code.svelte +70 -28
package/dist/docs/Code.svelte.d.ts +9 -24
package/dist/docs/Header1.svelte +4 -2
package/dist/docs/Header1.svelte.d.ts +4 -28
package/dist/docs/Json.svelte +11 -3
package/dist/docs/Json.svelte.d.ts +9 -21
package/dist/docs/Layout.svelte +10 -7
package/dist/docs/Layout.svelte.d.ts +4 -19
package/dist/docs/Link.svelte +7 -3
package/dist/docs/Link.svelte.d.ts +4 -38
package/dist/docs/Preview.svelte +22 -23
package/dist/docs/Preview.svelte.d.ts +5 -6
package/dist/docs/TilesetField.svelte +20 -19
package/dist/docs/TilesetField.svelte.d.ts +5 -22
package/dist/docs/ViewSourceButton.svelte +10 -7
package/dist/docs/ViewSourceButton.svelte.d.ts +7 -21
package/dist/states/series.svelte.d.ts +30 -0
package/dist/states/series.svelte.js +54 -0
package/dist/styles/daisyui-5.css +6 -0
package/dist/styles/shadcn-svelte.css +11 -0
package/dist/styles/skeleton-3.css +15 -0
package/dist/utils/arcText.svelte.js +4 -4
package/dist/utils/array.d.ts +11 -0
package/dist/utils/array.js +23 -0
package/dist/utils/array.test.d.ts +1 -0
package/dist/utils/array.test.js +200 -0
package/dist/utils/attributes.d.ts +3 -13
package/dist/utils/attributes.js +4 -18
package/dist/utils/canvas.d.ts +77 -0
package/dist/utils/canvas.js +105 -41
package/dist/utils/common.d.ts +9 -0
package/dist/utils/common.js +18 -1
package/dist/utils/common.test.js +26 -1
package/dist/utils/genData.d.ts +22 -8
package/dist/utils/genData.js +34 -14
package/dist/utils/graph/dagre.d.ts +4 -4
package/dist/utils/graph/dagre.js +5 -7
package/dist/utils/index.d.ts +1 -0
package/dist/utils/index.js +1 -0
package/dist/utils/math.d.ts +17 -0
package/dist/utils/math.js +17 -0
package/dist/utils/motion.svelte.js +1 -1
package/dist/utils/path.d.ts +10 -0
package/dist/utils/path.js +30 -0
package/dist/utils/rect.svelte.d.ts +2 -2
package/dist/utils/rect.svelte.js +73 -1
package/dist/utils/scales.svelte.d.ts +9 -3
package/dist/utils/scales.svelte.js +47 -4
package/dist/utils/shape.d.ts +43 -0
package/dist/utils/shape.js +59 -0
package/dist/utils/stack.js +1 -1
package/dist/utils/string.d.ts +49 -0
package/dist/utils/string.js +4 -2
package/dist/utils/ticks.d.ts +15 -4
package/dist/utils/ticks.js +140 -159
package/dist/utils/ticks.test.js +16 -26
package/dist/utils/treemap.d.ts +1 -1
package/dist/utils/types.d.ts +15 -2
package/package.json +36 -35
package/dist/utils/object.js +0 -2

package/dist/components/layout/Canvas.svelte CHANGED Viewed

@@ -64,6 +64,13 @@
      */
     ignoreTransform?: boolean;
+    /**
+     * Disable the hit canvas (useful when animations are playing)
+     *
+     * @default false
+     */
+    disableHitCanvas?: boolean;
     /**
      * Show the hit canvas for debugging purposes.
      *
@@ -142,15 +149,14 @@
 <script lang="ts">
   import { onMount, untrack, type Snippet } from 'svelte';
-  import { cls } from '@layerstack/tailwind';
   import { Logger, localPoint } from '@layerstack/utils';
-  import { darkColorScheme } from '@layerstack/svelte-stores';
+  import { MediaQueryPresets } from '@layerstack/svelte-state';
   import { setRenderContext } from '../Chart.svelte';
   import { getTransformContext } from '../TransformContext.svelte';
   import { getPixelColor, scaleCanvas, type ComputedStylesOptions } from '../../utils/canvas.js';
   import { getColorStr, rgbColorGenerator } from '../../utils/color.js';
-  import { Context } from 'runed';
+  import { Context, useMutationObserver, watch } from 'runed';
   import type {
     HTMLCanvasAttributes,
     MouseEventHandler,
@@ -159,7 +165,6 @@
   } from 'svelte/elements';
   import type { Without } from '../../utils/types.js';
   import { getChartContext } from '../Chart.svelte';
-  import { layerClass } from '../../utils/attributes.js';
   let {
     ref: refProp = $bindable(),
@@ -171,6 +176,7 @@
     fallback,
     center = false,
     ignoreTransform = false,
+    disableHitCanvas = false,
     class: className,
     children,
     onclick,
@@ -256,6 +262,23 @@
    * end HitCanvas
    */
+  // Invalidate/redraw if color scheme changes, either via browser `prefers-color-scheme` (including emulation) or by changing `<html class="dark">` or `<html data-theme="...">`
+  const { dark } = new MediaQueryPresets();
+  watch(
+    () => dark.current,
+    () => {
+      canvasContext.invalidate();
+    }
+  );
+  useMutationObserver(
+    () => document.documentElement,
+    () => canvasContext.invalidate(),
+    {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme'],
+    }
+  );
   onMount(() => {
     context = ref?.getContext('2d', { willReadFrequently }) as CanvasRenderingContext2D;
@@ -263,22 +286,7 @@
       willReadFrequently: false, // Explicitly set to `false` to resolve pixel artifacts between fill and stroke with the same color (issue #372)
     }) as CanvasRenderingContext2D;
-    // Invalidate/redraw if color scheme changes, either via browser `prefers-color-scheme` (including emulation) or by changing `<html class="dark">` or `<html data-theme="...">`
-    darkColorScheme.subscribe(() => {
-      canvasContext.invalidate();
-    });
-    const observer = new MutationObserver(() => {
-      canvasContext.invalidate();
-    });
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['class', 'data-theme'],
-    });
     return () => {
-      observer.disconnect();
       if (frameId) {
         cancelAnimationFrame(frameId);
       }
@@ -336,45 +344,53 @@
       context.restore();
     }
-    // sync hit canvas with main canvas
+    /*
+     * Sync hit canvas with main canvas
+     */
     if (hitCanvasContext) {
-      // scale hit canvas to match main canvas
-      scaleCanvas(hitCanvasContext, ctx.containerWidth, ctx.containerHeight);
-      hitCanvasContext.clearRect(0, 0, ctx.containerWidth, ctx.containerHeight);
-      // reset and sync transform to the state after retainState components
-      hitCanvasContext.resetTransform();
-      hitCanvasContext.setTransform(mainTransformAfterRetain);
-      // reset color generator
-      colorGenerator = rgbColorGenerator();
       const inactiveMoving = !activeCanvas && transformCtx.moving;
-      // render retainState components on hit canvas (e.g., Group)
-      for (const c of retainStateComponents) {
-        const componentHasEvents = c.events && Object.values(c.events).filter((d) => d).length > 0;
-        if (componentHasEvents && !inactiveMoving && !transformCtx.dragging) {
-          // since the transform was already applied via setTransform, skip rendering
-          // the retainState component's transform again; proceed to its children
-          continue;
+      if (disableHitCanvas || transformCtx.dragging || inactiveMoving) {
+        // Skip rendering hit canvas
+        hitCanvasContext.clearRect(0, 0, ctx.containerWidth, ctx.containerHeight);
+      } else {
+        // scale hit canvas to match main canvas
+        scaleCanvas(hitCanvasContext, ctx.containerWidth, ctx.containerHeight);
+        hitCanvasContext.clearRect(0, 0, ctx.containerWidth, ctx.containerHeight);
+        // reset and sync transform to the state after retainState components
+        hitCanvasContext.resetTransform();
+        hitCanvasContext.setTransform(mainTransformAfterRetain);
+        // reset color generator
+        colorGenerator = rgbColorGenerator();
+        // render retainState components on hit canvas (e.g., Group)
+        for (const c of retainStateComponents) {
+          const componentHasEvents =
+            c.events && Object.values(c.events).filter((d) => d).length > 0;
+          if (componentHasEvents) {
+            // since the transform was already applied via setTransform, skip rendering
+            // the retainState component's transform again; proceed to its children
+            continue;
+          }
         }
-      }
-      // render non-retainState components on hit canvas
-      for (const c of nonRetainStateComponents) {
-        const componentHasEvents = c.events && Object.values(c.events).filter((d) => d).length > 0;
+        // render non-retainState components on hit canvas
+        for (const c of nonRetainStateComponents) {
+          const componentHasEvents =
+            c.events && Object.values(c.events).filter((d) => d).length > 0;
-        if (componentHasEvents && !inactiveMoving && !transformCtx.dragging) {
-          const color = getColorStr(colorGenerator.next().value);
-          const styleOverrides = { styles: { fill: color, stroke: color, _fillOpacity: 0.1 } };
+          if (componentHasEvents) {
+            const color = getColorStr(colorGenerator.next().value);
+            const styleOverrides = { styles: { fill: color, stroke: color, _fillOpacity: 0.1 } };
-          hitCanvasContext.save();
-          c.render(hitCanvasContext, styleOverrides);
-          hitCanvasContext.restore();
+            hitCanvasContext.save();
+            c.render(hitCanvasContext, styleOverrides);
+            hitCanvasContext.restore();
-          componentByColor.set(color, c);
+            componentByColor.set(color, c);
+          }
         }
       }
     }
@@ -435,12 +451,8 @@
 <canvas
   bind:this={ref}
   style:z-index={zIndex}
-  class={cls(
-    layerClass('layout-canvas'),
-    'absolute top-0 left-0 w-full h-full',
-    pointerEvents === false && 'pointer-events-none',
-    className
-  )}
+  class={['lc-layout-canvas', className]}
+  class:disablePointerEvents={pointerEvents === false}
   onclick={(e) => {
     const component = getPointerComponent(e);
     component?.events?.click?.(e);
@@ -489,17 +501,32 @@
 </canvas>
 <!-- Hit canvas used for hidden context -->
-<canvas
-  bind:this={hitCanvasElement}
-  class={cls(
-    layerClass('hit-canvas'),
-    'layerchart-hitcanvas',
-    'absolute top-0 left-0 w-full h-full',
-    'pointer-events-none', // events all handled by main canvas
-    // '[image-rendering:pixelated]', // https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
-    'border border-danger',
-    !debug && 'opacity-0'
-  )}
-></canvas>
+<canvas bind:this={hitCanvasElement} class="lc-hit-canvas" class:debug></canvas>
 {@render children?.({ ref, canvasContext: context })}
+<style>
+  @layer base {
+    :where(.lc-layout-canvas) {
+      position: absolute;
+      inset: 0;
+      &.disablePointerEvents {
+        pointer-events: none;
+      }
+    }
+    :where(.lc-hit-canvas) {
+      position: absolute;
+      inset: 0;
+      pointer-events: none; /* events handled by main canvas */
+      image-rendering: pixelated; /* https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering */
+      opacity: 0;
+      &.debug {
+        border: 1px solid var(--color-danger, red);
+        opacity: 1;
+      }
+    }
+  }
+</style>

package/dist/components/layout/Canvas.svelte.d.ts CHANGED Viewed

@@ -55,6 +55,12 @@ export type CanvasPropsWithoutHTML = {
      * @default false
      */
     ignoreTransform?: boolean;
+    /**
+     * Disable the hit canvas (useful when animations are playing)
+     *
+     * @default false
+     */
+    disableHitCanvas?: boolean;
     /**
      * Show the hit canvas for debugging purposes.
      *

package/dist/components/layout/Html.svelte CHANGED Viewed

@@ -46,11 +46,9 @@
 </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';
   let {
     ref: refProp = $bindable(),
@@ -90,16 +88,11 @@
 <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}
   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 +105,16 @@
 >
   {@render children?.({ ref })}
 </div>
+<style>
+  @layer base {
+    :where(.lc-layout-html) {
+      position: absolute;
+      inset: 0;
+      &.disablePointerEvents {
+        pointer-events: none;
+      }
+    }
+  }
+</style>

package/dist/components/layout/Layer.svelte CHANGED Viewed

@@ -3,17 +3,19 @@
   export type CanvasLayerProps = {
     type: 'canvas';
-  } & Omit<ComponentProps<typeof Canvas>, 'type'>;
+  } & Omit<ComponentProps<typeof Canvas>, 'type' | 'onpointermove'>;
   export type HtmlLayerProps = {
     type: 'html';
-  } & Omit<ComponentProps<typeof Html>, 'type'>;
+  } & Omit<ComponentProps<typeof Html>, 'type' | 'onpointermove'>;
   export type SvgLayerProps = {
     type: 'svg';
-  } & Omit<ComponentProps<typeof Svg>, 'type'>;
+  } & Omit<ComponentProps<typeof Svg>, 'type' | 'onpointermove'>;
-  export type LayerProps = CanvasLayerProps | HtmlLayerProps | SvgLayerProps;
+  export type LayerProps = (CanvasLayerProps | HtmlLayerProps | SvgLayerProps) & {
+    onpointermove?: (e: PointerEvent) => void;
+  };
 </script>
 <script lang="ts">

package/dist/components/layout/Layer.svelte.d.ts CHANGED Viewed

@@ -1,14 +1,16 @@
 import type { ComponentProps } from 'svelte';
 export type CanvasLayerProps = {
     type: 'canvas';
-} & Omit<ComponentProps<typeof Canvas>, 'type'>;
+} & Omit<ComponentProps<typeof Canvas>, 'type' | 'onpointermove'>;
 export type HtmlLayerProps = {
     type: 'html';
-} & Omit<ComponentProps<typeof Html>, 'type'>;
+} & Omit<ComponentProps<typeof Html>, 'type' | 'onpointermove'>;
 export type SvgLayerProps = {
     type: 'svg';
-} & Omit<ComponentProps<typeof Svg>, 'type'>;
-export type LayerProps = CanvasLayerProps | HtmlLayerProps | SvgLayerProps;
+} & Omit<ComponentProps<typeof Svg>, 'type' | 'onpointermove'>;
+export type LayerProps = (CanvasLayerProps | HtmlLayerProps | SvgLayerProps) & {
+    onpointermove?: (e: PointerEvent) => void;
+};
 import Canvas from './Canvas.svelte';
 import Html from './Html.svelte';
 import Svg from './Svg.svelte';

package/dist/components/layout/Svg.svelte CHANGED Viewed

@@ -63,11 +63,9 @@
 </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';
   let {
     ref: refProp = $bindable(),
@@ -114,19 +112,15 @@
   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}
   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 +129,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 +141,17 @@
     {/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;
+      }
+    }
+  }
+</style>

package/dist/components/layout/WebGL.svelte CHANGED Viewed

@@ -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 { onMount } from 'svelte';
   import { getChartContext } from '../Chart.svelte';
   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/WebGL.svelte.d.ts CHANGED Viewed

@@ -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;

package/dist/components/tooltip/Tooltip.svelte CHANGED Viewed

@@ -162,7 +162,6 @@
   import { getTooltipContext } from './TooltipContext.svelte';
   import { createMotion, type MotionProp } from '../../utils/motion.svelte.js';
   import { untrack, type Snippet } from 'svelte';
-  import { layerClass } from '../../utils/attributes.js';
   let {
     anchor = 'top-left',
@@ -193,8 +192,8 @@
   const ctx = getChartContext();
   const tooltipCtx = getTooltipContext();
-  let tooltipWidth = $state(0);
-  let tooltipHeight = $state(0);
+  let tooltipWidth = $state<number | null>(null);
+  let tooltipHeight = $state<number | null>(null);
   function alignValue(value: number, align: Align, additionalOffset: number, tooltipSize: number) {
     const alignOffset = align === 'center' ? tooltipSize / 2 : align === 'end' ? tooltipSize : 0;
@@ -202,12 +201,11 @@
   }
   const positions = $derived.by(() => {
-    if (!tooltipCtx.data) {
-      // if no data, fallback?
-      const tooltipX = untrack(() => tooltipCtx.x);
-      const tooltipY = untrack(() => tooltipCtx.y);
-      return { x: tooltipX, y: tooltipY };
+    // if no data or tooltip size is not known yet, return null
+    if (!tooltipCtx.data || tooltipWidth === null || tooltipHeight === null) {
+      return { x: null, y: null };
     }
     const xBandOffset = isScaleBand(ctx.xScale)
       ? ctx.xScale.step() / 2 - (ctx.xScale.padding() * ctx.xScale.step()) / 2
       : 0;
@@ -346,8 +344,8 @@
     };
   });
-  const motionX = createMotion(tooltipCtx.x, () => positions.x, motion);
-  const motionY = createMotion(tooltipCtx.y, () => positions.y, motion);
+  const motionX = createMotion(null, () => positions.x, motion);
+  const motionY = createMotion(null, () => positions.y, motion);
   $effect(() => {
     if (!tooltipCtx.data) {
@@ -359,13 +357,8 @@
 {#if tooltipCtx.data}
   <div
     {...props.root}
-    class={cls(
-      layerClass('tooltip-root'),
-      'absolute z-50 select-none',
-      !pointerEvents && 'pointer-events-none',
-      classes.root,
-      props.root?.class
-    )}
+    class={cls('lc-tooltip-root', classes.root, props.root?.class)}
+    class:disablePointerEvents={pointerEvents === false}
     style:top="{motionY.current}px"
     style:left="{motionX.current}px"
     transition:fade={{ duration: 100 }}
@@ -381,30 +374,74 @@
   >
     <div
       {...props.container}
-      class={cls(
-        layerClass('tooltip-container'),
-        variant !== 'none' && ['text-sm py-1 px-2 h-full rounded-sm elevation-1'],
-        {
-          default: [
-            'bg-surface-100/90 dark:bg-surface-300/90 backdrop-filter backdrop-blur-[2px] text-surface-content',
-            '[&_.label]:text-surface-content/75',
-          ],
-          invert: [
-            'bg-surface-content/90 backdrop-filter backdrop-blur-[2px] text-surface-100 border border-surface-content',
-            '[&_.label]:text-surface-100/50',
-          ],
-          none: '',
-        }[variant],
-        classes.container,
-        props.container?.class,
-        className
-      )}
+      class={cls('lc-tooltip-container', classes.container, props.container?.class, className)}
+      data-variant={variant}
     >
       {#if children}
-        <div {...props.content} class={cls(layerClass('tooltip-content'), classes.content)}>
+        <div {...props.content} class={cls('lc-tooltip-content', classes.content)}>
           {@render children({ data: tooltipCtx.data, payload: tooltipCtx.payload })}
         </div>
       {/if}
     </div>
   </div>
 {/if}
+<style>
+  @layer component {
+    :where(.lc-tooltip-root) {
+      position: absolute;
+      z-index: 50;
+      user-select: none;
+      &.disablePointerEvents {
+        pointer-events: none;
+      }
+    }
+    :where(.lc-tooltip-container) {
+      &:not([data-variant='none']) {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        padding: 4px 8px;
+        height: 100%;
+        border-radius: 0.25rem; /* rounded-sm */
+        box-shadow: /* elevation-1 */
+          0px 2px 1px -1px hsl(0 0% 0% / 20%),
+          0px 1px 1px 0px hsl(0 0% 0% / 14%),
+          0px 1px 3px 0px hsl(0 0% 0% / 12%);
+        /* STYLE-TODO: vendor prefix (-webkit?) */
+        backdrop-filter: blur(2px);
+      }
+      &[data-variant='default'] {
+        color: var(--color-surface-content, currentColor);
+        background-color: color-mix(
+          in oklab,
+          light-dark(var(--color-surface-100, white), var(--color-surface-300, black)) 90%,
+          transparent
+        );
+        :global(& .label) {
+          color: color-mix(in oklab, var(--color-surface-content, currentColor) 75%, transparent);
+        }
+      }
+      &[data-variant='invert'] {
+        color: var(--color-surface-100, light-dark(white, black));
+        background-color: color-mix(
+          in oklab,
+          var(--color-surface-content, currentColor) 90%,
+          transparent
+        );
+        :global(& .label) {
+          color: color-mix(
+            in oklab,
+            var(--color-surface-100, light-dark(white, black)) 50%,
+            transparent
+          );
+        }
+      }
+    }
+  }
+</style>

package/dist/components/tooltip/Tooltip.svelte.d.ts CHANGED Viewed

@@ -134,10 +134,17 @@ export type TooltipProps<T = any> = TooltipPropsWithoutHTML<T> & Without<HTMLAtt
 import { type ChartContextValue } from '../Chart.svelte';
 import { type MotionProp } from '../../utils/motion.svelte.js';
 import { type Snippet } from 'svelte';
+declare function $$render<T = any>(): {
+    props: TooltipProps<T>;
+    exports: {};
+    bindings: "rootRef";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T = any> {
-    props(): TooltipProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "rootRef";
     exports(): {};
 }