layerchart 2.0.0-next.60 → 2.0.0-next.61

package/dist/components/Highlight/Highlight.base.svelte

@@ -0,0 +1,199 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { HighlightProps } from './Highlight.shared.svelte.js';
+
+  /**
+   * Per-layer primitives a `<Highlight.base>` consumer must inject.
+   * `Arc` is only used for radial `area`; per-layer wrappers can pass the
+   * agnostic Arc until Arc is split.
+   */
+  export type HighlightBaseLayerComponents = {
+    Circle: Component<any>;
+    Line: Component<any>;
+    Rect: Component<any>;
+    Arc: Component<any>;
+  };
+
+  export type HighlightBaseProps = HighlightProps & HighlightBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import { asAny } from '../../utils/types.js';
+  import { extractLayerProps } from '../../utils/attributes.js';
+
+  import { HighlightState } from './Highlight.shared.svelte.js';
+
+  let {
+    Circle,
+    Line,
+    Rect,
+    Arc,
+    points = false,
+    lines: linesProp = false,
+    area = false,
+    bar = false,
+    opacity,
+    motion = 'spring',
+    onAreaClick,
+    onBarClick,
+    onPointClick,
+    onPointEnter,
+    onPointLeave,
+    ...rest
+  }: HighlightBaseProps = $props();
+
+  const c = new HighlightState(
+    () =>
+      ({
+        ...rest,
+        points,
+        lines: linesProp,
+        area,
+        bar,
+        opacity,
+        motion,
+      }) as HighlightProps
+  );
+</script>
+
+{#if c.highlightData}
+  {#if area}
+    {#if typeof area === 'function'}
+      {@render area({ area: c.area })}
+    {:else if c.ctx.radial}
+      <Arc
+        motion={motion === 'spring' ? 'spring' : undefined}
+        startAngle={c.area.x}
+        endAngle={c.area.x + c.area.width}
+        innerRadius={c.area.y}
+        outerRadius={c.area.y + c.area.height}
+        {opacity}
+        class="lc-highlight-area"
+        onclick={onAreaClick && ((e: MouseEvent) => onAreaClick(e, { data: c.highlightData }))}
+      />
+    {:else}
+      <Rect
+        motion={motion === 'spring' ? 'spring' : undefined}
+        {opacity}
+        {...c.area}
+        {...extractLayerProps(area, 'lc-highlight-area')}
+        onclick={onAreaClick && ((e: MouseEvent) => onAreaClick(e, { data: c.highlightData }))}
+      />
+    {/if}
+  {/if}
+
+  {#if bar}
+    {#if typeof bar === 'function'}
+      {@render bar()}
+    {:else}
+      {#await import('../Bar/Bar.svelte') then { default: Bar }}
+        <Bar
+          motion={motion === 'spring' ? 'spring' : undefined}
+          data={c.highlightData}
+          {opacity}
+          {...extractLayerProps(bar, 'lc-highlight-bar')}
+          onclick={onBarClick && ((e: MouseEvent) => onBarClick(e, { data: c.highlightData }))}
+        />
+      {/await}
+    {/if}
+  {/if}
+
+  {#if linesProp}
+    {#if typeof linesProp === 'function'}
+      {@render linesProp({ lines: c.lines })}
+    {:else}
+      {#each c.lines as line}
+        <Line
+          motion={motion === 'spring' ? 'spring' : undefined}
+          x1={line.x1}
+          y1={line.y1}
+          x2={line.x2}
+          y2={line.y2}
+          dashArray={[2, 2]}
+          {opacity}
+          {...extractLayerProps(linesProp, 'lc-highlight-line')}
+        />
+      {/each}
+    {/if}
+  {/if}
+
+  {#if points}
+    {#if typeof points === 'function'}
+      {@render points({ points: c.points })}
+    {:else}
+      {#each c.points as point}
+        {@const pointOpacity =
+          opacity ??
+          (point.seriesKey
+            ? c.ctx.series.isHighlighted(point.seriesKey, true)
+              ? 1
+              : 0.1
+            : undefined)}
+        <Circle
+          motion={motion === 'spring' ? 'spring' : undefined}
+          cx={point.x}
+          cy={point.y}
+          fill={point.fill}
+          r={point.r ?? 4}
+          strokeWidth={point.r ? 2 : 6}
+          opacity={pointOpacity}
+          {...extractLayerProps(points, 'lc-highlight-point')}
+          onpointerdown={onPointClick &&
+            ((e: PointerEvent) => {
+              e.stopPropagation();
+            })}
+          onclick={onPointClick &&
+            ((e: MouseEvent) => onPointClick(e, { point, data: c.highlightData }))}
+          onpointerenter={(e: PointerEvent) => {
+            if (onPointClick) {
+              asAny(e.target).style.cursor = 'pointer';
+            }
+            if (point.seriesKey) {
+              c.ctx.series.highlightKey = point.seriesKey;
+            }
+            onPointEnter?.(e, { point, data: c.highlightData });
+          }}
+          onpointerleave={(e: PointerEvent) => {
+            if (onPointClick) {
+              asAny(e.target).style.cursor = 'default';
+            }
+            if (point.seriesKey) {
+              c.ctx.series.highlightKey = null;
+            }
+            onPointLeave?.(e, { point, data: c.highlightData });
+          }}
+        />
+      {/each}
+    {/if}
+  {/if}
+{/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-highlight-area)) {
+      --fill-color: color-mix(in oklab, var(--color-surface-content, currentColor) 5%, transparent);
+    }
+
+    :global(:where(.lc-highlight-bar)) {
+      --fill-color: var(--color-primary, currentColor);
+    }
+
+    :global(:where(.lc-highlight-line)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 20%,
+        transparent
+      );
+      stroke-width: 2;
+      stroke-dasharray: 2 2;
+      pointer-events: none;
+    }
+
+    :global(:where(.lc-highlight-point)) {
+      --stroke-color: white;
+      --fill-color: var(--color-primary, currentColor);
+      paint-order: stroke;
+      filter: drop-shadow(var(--drop-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.15)));
+    }
+  }
+</style>

package/dist/components/Highlight/Highlight.base.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Component } from 'svelte';
+import type { HighlightProps } from './Highlight.shared.svelte.js';
+/**
+ * Per-layer primitives a `<Highlight.base>` consumer must inject.
+ * `Arc` is only used for radial `area`; per-layer wrappers can pass the
+ * agnostic Arc until Arc is split.
+ */
+export type HighlightBaseLayerComponents = {
+    Circle: Component<any>;
+    Line: Component<any>;
+    Rect: Component<any>;
+    Arc: Component<any>;
+};
+export type HighlightBaseProps = HighlightProps & HighlightBaseLayerComponents;
+declare const Highlight: Component<HighlightBaseProps, {}, "">;
+type Highlight = ReturnType<typeof Highlight>;
+export default Highlight;

package/dist/components/Highlight/Highlight.canvas.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" module>
+  export type { HighlightProps, HighlightPropsWithoutHTML, HighlightPoint, HighlightPointData } from './Highlight.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import HighlightBase from './Highlight.base.svelte';
+  import Circle from '../Circle/Circle.canvas.svelte';
+  import Line from '../Line/Line.canvas.svelte';
+  import Rect from '../Rect/Rect.canvas.svelte';
+  import Arc from '../Arc/Arc.canvas.svelte';
+
+  import type { HighlightProps } from './Highlight.shared.svelte.js';
+
+  let props: HighlightProps = $props();
+</script>
+
+<HighlightBase {Circle} {Line} {Rect} {Arc} {...props} />

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

@@ -0,0 +1,4 @@
+export type { HighlightProps, HighlightPropsWithoutHTML, HighlightPoint, HighlightPointData } from './Highlight.shared.svelte.js';
+declare const Highlight: import("svelte").Component<import("./Highlight.shared.svelte.js").HighlightPropsWithoutHTML, {}, "">;
+type Highlight = ReturnType<typeof Highlight>;
+export default Highlight;

package/dist/components/Highlight/Highlight.html.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  export type { HighlightProps, HighlightPropsWithoutHTML, HighlightPoint, HighlightPointData } from './Highlight.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import HighlightBase from './Highlight.base.svelte';
+  import Circle from '../Circle/Circle.html.svelte';
+  import Line from '../Line/Line.html.svelte';
+  import Rect from '../Rect/Rect.html.svelte';
+  // Arc has no html variant — radial highlight area uses SVG path. Highlight.html
+  // never enters the radial branch (no html chart context is radial), but we
+  // import Arc.svg here so the per-layer wrapper avoids the agnostic dispatcher.
+  import Arc from '../Arc/Arc.svg.svelte';
+
+  import type { HighlightProps } from './Highlight.shared.svelte.js';
+
+  let props: HighlightProps = $props();
+</script>
+
+<HighlightBase {Circle} {Line} {Rect} {Arc} {...props} />

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

@@ -0,0 +1,4 @@
+export type { HighlightProps, HighlightPropsWithoutHTML, HighlightPoint, HighlightPointData } from './Highlight.shared.svelte.js';
+declare const Highlight: import("svelte").Component<import("./Highlight.shared.svelte.js").HighlightPropsWithoutHTML, {}, "">;
+type Highlight = ReturnType<typeof Highlight>;
+export default Highlight;

package/dist/components/{Highlight.svelte.d.ts → Highlight/Highlight.shared.svelte.d.ts}

@@ -1,9 +1,11 @@
 import type { ComponentProps, Snippet } from 'svelte';
-import Circle from './Circle.svelte';
-import Line from './Line.svelte';
-import type Bar from './Bar.svelte';
-import Rect from './Rect.svelte';
-import { type Accessor } from '../utils/common.js';
+import type Bar from '../Bar/Bar.svelte';
+import type Circle from '../Circle/Circle.svelte';
+import type Line from '../Line/Line.svelte';
+import type Rect from '../Rect/Rect.svelte';
+import { type Accessor } from '../../utils/common.js';
+import type { ChartState } from '../../states/chart.svelte.js';
+import type { MotionProp } from '../../utils/motion.svelte.js';
 export type HighlightPointData = {
     x: any;
     y: any;
@@ -16,18 +18,24 @@ export type HighlightPoint = {
     data: HighlightPointData;
     seriesKey?: string;
 };
+export type HighlightLineSegment = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+};
+export type HighlightArea = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
 export type HighlightPropsWithoutHTML = {
-    /**
-     * Highlight specific data (annotate), especte uses tooltip data
-     */
+    /** Highlight specific data (annotate), espeically uses tooltip data */
     data?: any;
-    /**
-     * Override `x` from context
-     */
+    /** Override `x` from context */
     x?: Accessor;
-    /**
-     * Override `y` from context
-     */
+    /** Override `y` from context */
     y?: Accessor;
     /**
      * Use the chart's radius scale for highlight point size.
@@ -54,30 +62,16 @@ export type HighlightPropsWithoutHTML = {
      * Show lines and pass props to Lines
      * @default false
      */
-    lines?: boolean | Partial<ComponentProps<typeof Line>> | Snippet<[
-        {
-            lines: {
-                x1: number;
-                y1: number;
-                x2: number;
-                y2: number;
-            }[];
-        }
-    ]>;
+    lines?: boolean | Partial<ComponentProps<typeof Line>> | Snippet<[{
+        lines: HighlightLineSegment[];
+    }]>;
     /**
      * Show area and pass props to Rect
      * @default false
      */
-    area?: boolean | Partial<ComponentProps<typeof Rect>> | Snippet<[
-        {
-            area: {
-                x: number;
-                y: number;
-                width: number;
-                height: number;
-            };
-        }
-    ]>;
+    area?: boolean | Partial<ComponentProps<typeof Rect>> | Snippet<[{
+        area: HighlightArea;
+    }]>;
     /**
      * Show bar and pass props to Rect
      *
@@ -90,9 +84,7 @@ export type HighlightPropsWithoutHTML = {
      * @default true
      */
     motion?: MotionProp;
-    /**
-     * The opacity of the element. (0 to 1)
-     */
+    /** The opacity of the element. (0 to 1) */
     opacity?: number;
     onAreaClick?: (e: MouseEvent, detail: {
         data: any;
@@ -113,7 +105,31 @@ export type HighlightPropsWithoutHTML = {
         data: any;
     }) => void;
 };
-import type { MotionProp } from '../utils/motion.svelte.js';
-declare const Highlight: import("svelte").Component<HighlightPropsWithoutHTML, {}, "">;
-type Highlight = ReturnType<typeof Highlight>;
-export default Highlight;
+export type HighlightProps = HighlightPropsWithoutHTML;
+/**
+ * Reactive state shared by every per-layer Highlight variant. Holds the
+ * derived `lines`, `area`, and `points` arrays the template renders, plus
+ * helpers like `axis` and `getPointRadius`.
+ */
+export declare class HighlightState {
+    #private;
+    ctx: ChartState;
+    constructor(getProps: () => HighlightProps);
+    x: (d: any) => any;
+    y: (d: any) => any;
+    highlightData: any;
+    xValue: any;
+    xCoord: any;
+    xOffset: number;
+    xCoordScalar: any;
+    yValue: any;
+    yCoord: any;
+    yOffset: number;
+    yCoordScalar: any;
+    axis: "none" | "x" | "y" | "both";
+    /** Resolve radius for a data item using the chart's rScale */
+    getPointRadius(d: any): number | undefined;
+    lines: HighlightLineSegment[];
+    area: HighlightArea;
+    points: HighlightPoint[];
+}