svelteplot 0.13.0 → 0.14.0

package/dist/marks/helpers/GeoPathGroup.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { ScaledDataRecord, PlotState } from '../../types/index.js';
+import type { GeoPath } from 'd3-geo';
+type $$ComponentProps = {
+    scaledData: ScaledDataRecord[];
+    /** d3 geoPath renderer (must NOT have a canvas context set). */
+    path: GeoPath;
+    /** Symbol key used to retrieve the GeoJSON geometry from each datum. */
+    geomKey: symbol;
+    /**
+     * The color keyword that, when used as fill/stroke, maps the threshold
+     * value through the plot's color scale.  E.g. "value" for Contour,
+     * "density" for Density.
+     */
+    colorKeyword: string;
+    fill: string;
+    stroke: string;
+    strokeWidth?: number;
+    strokeOpacity?: number;
+    fillOpacity?: number;
+    opacity?: number;
+    strokeMiterlimit?: number;
+    clipPath?: string;
+    className?: string;
+    ariaLabel?: string;
+    /** Render using a canvas element instead of SVG paths. */
+    canvas?: boolean;
+    plot: PlotState;
+};
+/**
+ * Renders GeoJSON geometries as SVG <path> elements (or via canvas when
+ * canvas=true).  Used by the Contour and Density marks.  Each path's style is
+ * resolved per-threshold using a color keyword (e.g. "value" or "density") that
+ * maps the RAW_VALUE attached to each fake datum through the plot's color scale.
+ */
+declare const GeoPathGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type GeoPathGroup = ReturnType<typeof GeoPathGroup>;
+export default GeoPathGroup;

package/dist/marks/helpers/PathGroup.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+    import type {
+        PlotState,
+        ScaledDataRecord,
+        ScaledChannelName,
+        ChannelAccessor,
+        MarkStyleProps
+    } from '../../types/index.js';
+    import { resolveStyles, resolveProp } from '../../helpers/resolve.js';
+
+    type StyleArgs = Partial<Record<ScaledChannelName | MarkStyleProps, ChannelAccessor>>;
+    import { resolveColor } from './canvas.js';
+    import type { Attachment } from 'svelte/attachments';
+    import CanvasLayer from './CanvasLayer.svelte';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
+
+    let {
+        paths,
+        args,
+        className,
+        usedScales,
+        plot,
+        defaultStrokeWidth = 1,
+        canvas = false
+    }: {
+        paths: { path: string; datum: ScaledDataRecord }[];
+        args: Record<string | symbol, any>;
+        className: string;
+        usedScales: Record<ScaledChannelName, boolean>;
+        plot: PlotState;
+        defaultStrokeWidth?: number;
+        canvas?: boolean;
+    } = $props();
+
+    const render: Attachment = (el: Element) => {
+        const canvasEl = el as HTMLCanvasElement;
+        const context = canvasEl.getContext('2d');
+
+        $effect(() => {
+            if (!context) return;
+
+            context.resetTransform();
+            context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+
+            for (const { path: pathStr, datum } of paths) {
+                const fillColor = resolveColor(datum.fill ?? 'none', canvasEl) as string;
+                const strokeColor = resolveColor(datum.stroke ?? 'none', canvasEl) as string;
+                const opacity = datum.opacity ?? 1;
+                const fillOpacity = datum.fillOpacity ?? 1;
+                const strokeOpacity = datum.strokeOpacity ?? 1;
+                const strokeWidth = resolveProp(
+                    (args as StyleArgs).strokeWidth as ChannelAccessor,
+                    datum.datum,
+                    defaultStrokeWidth
+                ) as number;
+
+                const p = new Path2D(pathStr);
+
+                if (fillColor && fillColor !== 'none') {
+                    context.fillStyle = fillColor;
+                    context.globalAlpha = opacity * fillOpacity;
+                    context.fill(p);
+                }
+
+                if (strokeColor && strokeColor !== 'none') {
+                    context.strokeStyle = strokeColor;
+                    context.lineWidth = strokeWidth ?? defaultStrokeWidth;
+                    context.globalAlpha = opacity * strokeOpacity;
+                    context.stroke(p);
+                }
+            }
+
+            return () => {
+                context.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
+</script>
+
+{#if canvas}
+    <CanvasLayer {@attach render} />
+{:else}
+    <g class={className}>
+        {#each paths as { path, datum }, i (i)}
+            {@const [style, styleClass] = resolveStyles(
+                plot,
+                datum,
+                { strokeWidth: defaultStrokeWidth, ...(args as StyleArgs) },
+                'stroke',
+                usedScales
+            )}
+            <path d={path} class={styleClass} {style} />
+        {/each}
+    </g>
+{/if}

package/dist/marks/helpers/PathGroup.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { PlotState, ScaledDataRecord, ScaledChannelName } from '../../types/index.js';
+type $$ComponentProps = {
+    paths: {
+        path: string;
+        datum: ScaledDataRecord;
+    }[];
+    args: Record<string | symbol, any>;
+    className: string;
+    usedScales: Record<ScaledChannelName, boolean>;
+    plot: PlotState;
+    defaultStrokeWidth?: number;
+    canvas?: boolean;
+};
+declare const PathGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type PathGroup = ReturnType<typeof PathGroup>;
+export default PathGroup;

package/dist/marks/helpers/PathItems.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+    import type {
+        PlotState,
+        ScaledDataRecord,
+        ScaledChannelName,
+        ChannelAccessor,
+        MarkStyleProps
+    } from '../../types/index.js';
+    import { resolveStyles, resolveProp } from '../../helpers/resolve.js';
+
+    type StyleArgs = Partial<Record<ScaledChannelName | MarkStyleProps, ChannelAccessor>>;
+    import { resolveColor } from './canvas.js';
+    import type { Attachment } from 'svelte/attachments';
+    import CanvasLayer from './CanvasLayer.svelte';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
+    import SvelteAnchor from './Anchor.svelte';
+    import { addEventHandlers } from './events.js';
+
+    let {
+        paths,
+        args,
+        options,
+        className,
+        usedScales,
+        plot,
+        canvas = false
+    }: {
+        paths: { path: string; datum: ScaledDataRecord }[];
+        args: Record<string | symbol, any>;
+        options: Record<string, any>;
+        className: string;
+        usedScales: Record<ScaledChannelName, boolean>;
+        plot: PlotState;
+        canvas?: boolean;
+    } = $props();
+
+    const render: Attachment = (el: Element) => {
+        const canvasEl = el as HTMLCanvasElement;
+        const context = canvasEl.getContext('2d');
+
+        $effect(() => {
+            if (!context) return;
+
+            context.resetTransform();
+            context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+
+            for (const { path: pathStr, datum } of paths) {
+                const fillColor = resolveColor(datum.fill ?? 'none', canvasEl) as string;
+                const strokeColor = resolveColor(datum.stroke ?? 'none', canvasEl) as string;
+                const opacity = datum.opacity ?? 1;
+                const fillOpacity = datum.fillOpacity ?? 1;
+                const strokeOpacity = datum.strokeOpacity ?? 1;
+                const strokeWidth = resolveProp(
+                    (args as StyleArgs).strokeWidth as ChannelAccessor,
+                    datum.datum,
+                    1
+                ) as number;
+
+                const p = new Path2D(pathStr);
+
+                if (fillColor && fillColor !== 'none') {
+                    context.fillStyle = fillColor;
+                    context.globalAlpha = opacity * fillOpacity;
+                    context.fill(p);
+                }
+
+                if (strokeColor && strokeColor !== 'none') {
+                    context.strokeStyle = strokeColor;
+                    context.lineWidth = strokeWidth ?? 1;
+                    context.globalAlpha = opacity * strokeOpacity;
+                    context.stroke(p);
+                }
+            }
+
+            return () => {
+                context.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
+</script>
+
+{#if canvas}
+    <CanvasLayer {@attach render} />
+{:else}
+    <g class={className}>
+        {#each paths as { path, datum }, i (i)}
+            {@const [style, styleClass] = resolveStyles(
+                plot,
+                datum,
+                { strokeWidth: 1, ...(args as StyleArgs) },
+                'stroke',
+                usedScales
+            )}
+            <SvelteAnchor {options} datum={datum.datum}>
+                <path
+                    d={path}
+                    class={styleClass}
+                    {style}
+                    {@attach addEventHandlers({
+                        plot,
+                        options: args as any,
+                        datum: datum.datum
+                    })} />
+            </SvelteAnchor>
+        {/each}
+    </g>
+{/if}

package/dist/marks/helpers/PathItems.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { PlotState, ScaledDataRecord, ScaledChannelName } from '../../types/index.js';
+type $$ComponentProps = {
+    paths: {
+        path: string;
+        datum: ScaledDataRecord;
+    }[];
+    args: Record<string | symbol, any>;
+    options: Record<string, any>;
+    className: string;
+    usedScales: Record<ScaledChannelName, boolean>;
+    plot: PlotState;
+    canvas?: boolean;
+};
+declare const PathItems: import("svelte").Component<$$ComponentProps, {}, "">;
+type PathItems = ReturnType<typeof PathItems>;
+export default PathItems;

package/dist/marks/index.d.ts

@@ -14,11 +14,14 @@ export { default as Brush } from './Brush.svelte';
 export { default as BrushX } from './BrushX.svelte';
 export { default as BrushY } from './BrushY.svelte';
 export { default as Cell } from './Cell.svelte';
-export { default as Contour } from './Contour.svelte';
 export { default as CellX } from './CellX.svelte';
 export { default as CellY } from './CellY.svelte';
+export { default as Contour } from './Contour.svelte';
 export { default as CustomMark } from './CustomMark.svelte';
 export { default as CustomMarkHTML } from './CustomMarkHTML.svelte';
+export { default as DelaunayLink } from './DelaunayLink.svelte';
+export { default as DelaunayMesh } from './DelaunayMesh.svelte';
+export { default as Density } from './Density.svelte';
 export { default as DifferenceY } from './DifferenceY.svelte';
 export { default as Dot } from './Dot.svelte';
 export { default as DotX } from './DotX.svelte';
@@ -28,6 +31,7 @@ export { default as Geo } from './Geo.svelte';
 export { default as Graticule } from './Graticule.svelte';
 export { default as GridX } from './GridX.svelte';
 export { default as GridY } from './GridY.svelte';
+export { default as Hull } from './Hull.svelte';
 export { default as Image } from './Image.svelte';
 export { default as Line } from './Line.svelte';
 export { default as LineX } from './LineX.svelte';
@@ -49,6 +53,8 @@ export { default as TickX } from './TickX.svelte';
 export { default as TickY } from './TickY.svelte';
 export { default as Trail } from './Trail.svelte';
 export { default as Vector } from './Vector.svelte';
+export { default as Voronoi } from './Voronoi.svelte';
+export { default as VoronoiMesh } from './VoronoiMesh.svelte';
 export { default as WaffleX } from './WaffleX.svelte';
 export { default as WaffleY } from './WaffleY.svelte';
 export { default as ColorLegend } from './ColorLegend.svelte';

package/dist/marks/index.js

@@ -14,11 +14,14 @@ export { default as Brush } from './Brush.svelte';
 export { default as BrushX } from './BrushX.svelte';
 export { default as BrushY } from './BrushY.svelte';
 export { default as Cell } from './Cell.svelte';
-export { default as Contour } from './Contour.svelte';
 export { default as CellX } from './CellX.svelte';
 export { default as CellY } from './CellY.svelte';
+export { default as Contour } from './Contour.svelte';
 export { default as CustomMark } from './CustomMark.svelte';
 export { default as CustomMarkHTML } from './CustomMarkHTML.svelte';
+export { default as DelaunayLink } from './DelaunayLink.svelte';
+export { default as DelaunayMesh } from './DelaunayMesh.svelte';
+export { default as Density } from './Density.svelte';
 export { default as DifferenceY } from './DifferenceY.svelte';
 export { default as Dot } from './Dot.svelte';
 export { default as DotX } from './DotX.svelte';
@@ -28,6 +31,7 @@ export { default as Geo } from './Geo.svelte';
 export { default as Graticule } from './Graticule.svelte';
 export { default as GridX } from './GridX.svelte';
 export { default as GridY } from './GridY.svelte';
+export { default as Hull } from './Hull.svelte';
 export { default as Image } from './Image.svelte';
 export { default as Line } from './Line.svelte';
 export { default as LineX } from './LineX.svelte';
@@ -49,6 +53,8 @@ export { default as TickX } from './TickX.svelte';
 export { default as TickY } from './TickY.svelte';
 export { default as Trail } from './Trail.svelte';
 export { default as Vector } from './Vector.svelte';
+export { default as Voronoi } from './Voronoi.svelte';
+export { default as VoronoiMesh } from './VoronoiMesh.svelte';
 export { default as WaffleX } from './WaffleX.svelte';
 export { default as WaffleY } from './WaffleY.svelte';
 // HTML marks

package/dist/types/mark.d.ts

@@ -6,7 +6,7 @@ export type Mark<T> = {
     data: DataRecord<T>[];
     options: T;
 };
-export type MarkType = 'area' | 'arrow' | 'axisX' | 'axisY' | 'barX' | 'barY' | 'cell' | 'custom' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'image' | 'link' | 'line' | 'raster' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY' | 'trail' | 'waffleX' | 'waffleY';
+export type MarkType = 'area' | 'arrow' | 'axisX' | 'axisY' | 'barX' | 'barY' | 'cell' | 'contour' | 'custom' | 'delaunayLink' | 'delaunayMesh' | 'density' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'hull' | 'image' | 'link' | 'line' | 'raster' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY' | 'trail' | 'voronoi' | 'voronoiMesh' | 'waffleX' | 'waffleY';
 export type MarkStyleProps = 'strokeDasharray' | 'strokeLinejoin' | 'strokeLinecap' | 'opacity' | 'cursor' | 'pointerEvents' | 'blend' | 'fill' | 'fillOpacity' | 'fontFamily' | 'fontWeight' | 'fontVariant' | 'fontSize' | 'fontStyle' | 'letterSpacing' | 'wordSpacing' | 'stroke' | 'strokeWidth' | 'strokeOpacity' | 'x' | 'y' | 'clipPath' | 'mask' | 'filter' | 'angle' | 'radius' | 'symbol' | 'textAnchor' | 'textTransform' | 'textDecoration' | 'width';
 import type { ChannelAccessor, ConstantAccessor, DataRecord, RawValue } from './index.js';
 import type * as CSS from 'csstype';

package/dist/types/plot.d.ts

@@ -5,7 +5,7 @@ import type { ChannelAccessor, ChannelName, ColorScaleOptions, DataRecord, Legen
 import type { Snippet } from 'svelte';
 import type { GenericMarkOptions, Mark } from './index.js';
 import type { Clip } from '../helpers/projection.js';
-import type { Area, AreaX, AreaY, Arrow, AxisX, AxisY, BarX, BarY, BoxX, BoxY, Brush, BrushX, BrushY, Cell, Contour, DifferenceY, Dot, Frame, Geo, Graticule, GridX, GridY, Image, Line, Link, Pointer, Raster, Rect, RectX, RectY, RuleX, RuleY, Sphere, Spike, Text, TickX, TickY, Trail, Vector } from '../marks/index.js';
+import type { Area, AreaX, AreaY, Arrow, AxisX, AxisY, BarX, BarY, BoxX, BoxY, Brush, BrushX, BrushY, Cell, Contour, DelaunayLink, DelaunayMesh, Density, DifferenceY, Dot, Frame, Geo, Graticule, GridX, GridY, Hull, Image, Line, Link, Pointer, Raster, Rect, RectX, RectY, RuleX, RuleY, Sphere, Spike, Text, TickX, TickY, Trail, Vector, Voronoi, VoronoiMesh } from '../marks/index.js';
 import type WaffleX from '../marks/WaffleX.svelte';
 import type WaffleY from '../marks/WaffleY.svelte';
 import type BaseAxisX from '../marks/helpers/BaseAxisX.svelte';
@@ -208,6 +208,18 @@ export type PlotDefaults = {
      * default props for contour marks
      */
     contour: Partial<Omit<ComponentProps<typeof Contour>, IgnoreDefaults>>;
+    /**
+     * default props for delaunayLink marks
+     */
+    delaunayLink: Partial<Omit<ComponentProps<typeof DelaunayLink>, IgnoreDefaults>>;
+    /**
+     * default props for delaunayMesh marks
+     */
+    delaunayMesh: Partial<Omit<ComponentProps<typeof DelaunayMesh>, IgnoreDefaults>>;
+    /**
+     * default props for density marks
+     */
+    density: Partial<Omit<ComponentProps<typeof Density>, IgnoreDefaults>>;
     /**
      * default props for dot marks
      */
@@ -248,6 +260,10 @@ export type PlotDefaults = {
     gridY: Partial<Omit<ComponentProps<typeof GridY>, IgnoreDefaults> & {
         implicit: boolean;
     }> | true;
+    /**
+     * default props for hull marks
+     */
+    hull: Partial<Omit<ComponentProps<typeof Hull>, IgnoreDefaults>>;
     /**
      * default props for image marks
      */
@@ -324,6 +340,14 @@ export type PlotDefaults = {
      * default props for vector marks
      */
     vector: Partial<Omit<ComponentProps<typeof Vector>, IgnoreDefaults>>;
+    /**
+     * default props for voronoi marks
+     */
+    voronoi: Partial<Omit<ComponentProps<typeof Voronoi>, IgnoreDefaults>>;
+    /**
+     * default props for voronoiMesh marks
+     */
+    voronoiMesh: Partial<Omit<ComponentProps<typeof VoronoiMesh>, IgnoreDefaults>>;
     /**
      * default props for waffle marks, applied to both waffleX and waffleY marks
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.13.0",
+    "version": "0.14.0",
     "description": "A Svelte-native data visualization framework based on the layered grammar of graphics principles.",
     "keywords": [
         "svelte",