svelteplot 0.8.1-pr-298.6 → 0.8.1-pr-301.0

package/dist/marks/helpers/LinearGradientY.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { getContext } from 'svelte';
-    import type { PlotContext, RawValue } from '../../index.js';
+    import type { RawValue } from '../../index.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     let {
         id,
@@ -10,8 +10,7 @@
         stops: { y: RawValue; color: string }[];
     } = $props();
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const projectedStops = $derived(
         stops

package/dist/marks/helpers/MarkerPath.svelte

@@ -11,11 +11,10 @@
         ConstantAccessor,
         DataRecord,
         Mark,
-        PlotContext,
         PlotScales
     } from '../../types/index.js';
     import { addEventHandlers } from './events.js';
-    import { getContext } from 'svelte';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     type MarkerPathProps = BaseMarkProps<Datum> & {
         /**
@@ -78,7 +77,7 @@
 
     const id = randomId();
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = usePlot();
 
     const points = $derived(text && d != null ? d.split(/[LMC]/).slice(1) : []);
     const hasPath = $derived(points.length > 0);
@@ -96,7 +95,7 @@
     class={className}
     stroke-width={strokeWidth_}
     {@attach addEventHandlers({
-        getPlotState,
+        plot,
         options: mark.options,
         datum: datum
     })}>
@@ -127,7 +126,7 @@
         {d}
         {style}
         {@attach addEventHandlers({
-            getPlotState,
+            plot,
             options: mark.options,
             datum: datum
         })} />

package/dist/marks/helpers/MultilineText.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
     import { resolveProp, resolveStyles } from '../../helpers/resolve';
-    import { getContext, type ComponentProps } from 'svelte';
-    import type { PlotContext, ScaledDataRecord, UsedScales } from '../../index.js';
+    import { type ComponentProps } from 'svelte';
+    import type { ScaledDataRecord, UsedScales } from '../../index.js';
     import type Text from '../Text.svelte';
     import { CSS_VAR } from '../../constants';
     import { maybeFromPixel, maybeFromRem } from '../../helpers/getBaseStyles';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     const LINE_ANCHOR = {
         bottom: 'auto',
@@ -12,8 +13,7 @@
         top: 'hanging'
     } as const;
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     let {
         textLines,

package/dist/marks/helpers/RectPath.svelte

@@ -29,11 +29,11 @@ Helper component for rendering rectangular marks in SVG
     import { resolveProp, resolveStyles } from '../../helpers/resolve';
     import { roundedRect } from '../../helpers/roundedRect';
     import { addEventHandlers } from './events.js';
-    import { getContext } from 'svelte';
     import Anchor from './Anchor.svelte';
     import type { BaseMarkProps, BaseRectMarkProps, BorderRadius } from '../../types/mark.js';
     import type { DataRecord, ScaledDataRecord } from '../../types/data.js';
-    import type { PlotContext, UsedScales } from '../../types/index.js';
+    import type { UsedScales } from '../../types/index.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     let {
         datum,
@@ -49,8 +49,7 @@ Helper component for rendering rectangular marks in SVG
         fallbackStyle
     }: RectPathProps = $props();
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const inset = $derived(+(resolveProp(options.inset, datum?.datum, 0) as number));
     const insetLeft = $derived(
@@ -119,7 +118,7 @@ Helper component for rendering rectangular marks in SVG
             class={[styleClass, className]}
             {style}
             {@attach addEventHandlers({
-                getPlotState,
+                plot,
                 options,
                 datum: datum?.datum
             })} />
@@ -131,7 +130,7 @@ Helper component for rendering rectangular marks in SVG
             class={[styleClass, className]}
             {style}
             {@attach addEventHandlers({
-                getPlotState,
+                plot,
                 options,
                 datum: datum?.datum
             })} />

package/dist/marks/helpers/Regression.svelte

@@ -1,10 +1,5 @@
 <script module lang="ts">
-    import type {
-        BaseMarkProps,
-        ChannelAccessor,
-        FacetContext,
-        PlotContext
-    } from '../../types/index.js';
+    import type { BaseMarkProps, ChannelAccessor, FacetContext } from '../../types/index.js';
 
     type RegressionType = 'linear' | 'quad' | 'poly' | 'exp' | 'log' | 'pow' | 'loess';
 
@@ -65,8 +60,9 @@
         throw new Error('unknown regression ' + name);
     }
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
+
+    const plot = usePlot();
 
     let {
         data,

package/dist/marks/helpers/TrailCanvas.svelte

@@ -2,7 +2,6 @@
     import type {
         Mark,
         BaseMarkProps,
-        PlotContext,
         ScaledDataRecord,
         UsedScales,
         CurveName,
@@ -12,10 +11,10 @@
     import type { Attachment } from 'svelte/attachments';
     import { devicePixelRatio } from 'svelte/reactivity/window';
     import { resolveColor } from './canvas.js';
-    import { getContext } from 'svelte';
     import type { CurveFactory } from 'd3-shape';
     import { trailPath, type TrailSample } from './trail';
     import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
 
     interface TrailCanvasProps<Datum> {
         curve?: CurveName | CurveFactory;
@@ -46,8 +45,7 @@
         return value == null ? 1 : +value;
     }
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const render = ((canvas: HTMLCanvasElement) => {
         const context = canvas.getContext('2d');

package/dist/marks/helpers/events.d.ts

@@ -13,8 +13,8 @@ declare global {
  * of the plot frame, regardless of which element triggered the event
  */
 export declare function clientToLayerCoordinates(event: MouseEvent, plotBody: HTMLElement | null | undefined): [number, number];
-export declare function addEventHandlers<T extends DataRow>({ options, datum, getPlotState }: {
+export declare function addEventHandlers<T extends DataRow>({ options, datum, plot }: {
     options: BaseMarkProps<T>;
     datum: DataRecord;
-    getPlotState: () => PlotState;
+    plot: PlotState;
 }): Attachment;

package/dist/marks/helpers/events.js

@@ -19,7 +19,7 @@ export function clientToLayerCoordinates(event, plotBody) {
     // Calculate the coordinates relative to the plot body
     return [event.clientX - plotBodyRect.left, event.clientY - plotBodyRect.top];
 }
-export function addEventHandlers({ options, datum, getPlotState }) {
+export function addEventHandlers({ options, datum, plot }) {
     const events = pick(options, [
         'onclick',
         'oncontextmenu',
@@ -57,7 +57,7 @@ export function addEventHandlers({ options, datum, getPlotState }) {
         for (const [eventName, eventHandler] of Object.entries(events)) {
             if (eventHandler) {
                 const wrappedHandler = (origEvent) => {
-                    const { scales, body, options } = getPlotState();
+                    const { scales, body, options: plotOptions } = plot;
                     if (origEvent instanceof MouseEvent || origEvent instanceof PointerEvent) {
                         let facetEl = origEvent.target;
                         while (facetEl &&
@@ -69,8 +69,8 @@ export function addEventHandlers({ options, datum, getPlotState }) {
                             facetEl = facetEl.parentElement;
                         }
                         const facetRect = (facetEl?.firstElementChild ?? body).getBoundingClientRect();
-                        const relativeX = origEvent.clientX - facetRect.left + (options.marginLeft ?? 0);
-                        const relativeY = origEvent.clientY - facetRect.top + (options.marginTop ?? 0);
+                        const relativeX = origEvent.clientX - facetRect.left + (plotOptions.marginLeft ?? 0);
+                        const relativeY = origEvent.clientY - facetRect.top + (plotOptions.marginTop ?? 0);
                         if (scales.projection) {
                             const [x, y] = scales.projection.invert([relativeX, relativeY]);
                             origEvent.dataX = x;

package/dist/types/plot.d.ts

@@ -26,6 +26,7 @@ export type PlotState = {
      */
     hasFilledDotMarks: boolean;
     css: ((d: string) => string) | null;
+    publicState: Readonly<PlotState>;
 };
 export type PlotContext = {
     /**

package/dist/ui/Spiral.svelte

@@ -1,6 +1,10 @@
 <script>
+    import { usePlot } from '../hooks/usePlot.svelte';
+
     let { numTurns = 4, finalRadius = 10, duration = 2, ...restProps } = $props();
 
+    const plot = usePlot();
+
     const pathD = $derived.by(() => {
         const numPoints = 100;
         const k = finalRadius / (2 * Math.PI * numTurns);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.8.1-pr-298.6",
+    "version": "0.8.1-pr-301.0",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",