svelteplot 0.12.0 → 0.14.0

package/dist/marks/helpers/VectorCanvas.svelte

@@ -0,0 +1,127 @@
+<!--
+@component
+Helper component for rendering Vector marks in canvas
+-->
+<script lang="ts" generics="Datum extends DataRecord">
+    interface VectorCanvasProps {
+        data: ScaledDataRecord<Datum>[];
+        options: BaseMarkProps<Datum> & {
+            rotate?: ChannelAccessor<Datum>;
+            r?: number;
+            anchor?: 'start' | 'middle' | 'end';
+            shape?: 'arrow' | 'spike' | 'arrow-filled' | ShapeRenderer;
+        };
+        usedScales: UsedScales;
+    }
+
+    import type {
+        BaseMarkProps,
+        ChannelAccessor,
+        DataRecord,
+        ScaledDataRecord,
+        UsedScales
+    } from '../../types/index.js';
+    import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
+    import { defaultRadius, shapePath, type ShapeRenderer } from '../../helpers/vectorShapes.js';
+    import type { Attachment } from 'svelte/attachments';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
+    import CanvasLayer from './CanvasLayer.svelte';
+    import { resolveColor } from './canvas.js';
+    import { usePlot } from '../../hooks/usePlot.svelte.js';
+
+    const plot = usePlot();
+
+    let { data, options, usedScales }: VectorCanvasProps = $props();
+
+    const render: Attachment = (canvasEl: Element) => {
+        const canvas = canvasEl as HTMLCanvasElement;
+        const context = canvas.getContext('2d');
+
+        $effect(() => {
+            if (context) {
+                context.resetTransform();
+                context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+
+                const shape = options.shape ?? 'arrow';
+                const anchor = options.anchor ?? 'middle';
+                const defaultColorProp = shape === 'arrow-filled' ? 'fill' : 'stroke';
+
+                for (const d of data) {
+                    if (!d.valid) continue;
+
+                    const datum = d.datum as unknown as Datum;
+                    const length = d.length as number;
+                    const r = (d.r as number) ?? defaultRadius;
+
+                    if (length == null || r == null) continue;
+
+                    const styleProps = resolveScaledStyleProps(
+                        d.datum,
+                        options,
+                        usedScales,
+                        plot,
+                        defaultColorProp
+                    ) as Record<string, unknown>;
+
+                    const opacity = +(styleProps['opacity'] ?? 1);
+                    const fillOpacity = +(styleProps['fill-opacity'] ?? 1);
+                    const strokeOpacity = +(styleProps['stroke-opacity'] ?? 1);
+                    const fill = resolveColor(String(styleProps.fill || 'none'), canvas);
+                    const stroke = resolveColor(String(styleProps.stroke || 'none'), canvas);
+
+                    const hasFill = fill && fill !== 'none';
+                    const hasStroke = stroke && stroke !== 'none';
+
+                    if (!hasFill && !hasStroke) continue;
+
+                    const rotateDeg = (resolveProp(options.rotate, datum, 0) ?? 0) as number;
+                    const rotateRad = (rotateDeg * Math.PI) / 180;
+
+                    const anchorOffset =
+                        anchor === 'start' ? 0 : anchor === 'end' ? length : length / 2;
+
+                    const pathStr = shapePath(shape, length, r);
+                    if (!pathStr) continue;
+                    const path2d = new Path2D(pathStr);
+
+                    const strokeWidth = (resolveProp(options.strokeWidth, datum, 1.5) ??
+                        1.5) as number;
+
+                    context.save();
+                    context.translate(d.x as number, d.y as number);
+                    context.rotate(rotateRad);
+                    context.translate(0, anchorOffset);
+
+                    context.lineWidth = strokeWidth;
+                    context.lineCap = 'round';
+                    context.lineJoin = 'round';
+
+                    if (hasFill) {
+                        context.fillStyle = fill as string;
+                        context.globalAlpha = opacity * fillOpacity;
+                        context.fill(path2d);
+                    }
+
+                    if (hasStroke) {
+                        context.strokeStyle = stroke as string;
+                        context.globalAlpha = opacity * strokeOpacity;
+                        context.stroke(path2d);
+                    }
+
+                    context.restore();
+                }
+            }
+
+            return () => {
+                context?.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
+</script>
+
+<CanvasLayer {@attach render} />

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

@@ -0,0 +1,36 @@
+import type { BaseMarkProps, ChannelAccessor, DataRecord, ScaledDataRecord, UsedScales } from '../../types/index.js';
+import { type ShapeRenderer } from '../../helpers/vectorShapes.js';
+declare function $$render<Datum extends DataRecord>(): {
+    props: {
+        data: ScaledDataRecord<Datum>[];
+        options: BaseMarkProps<Datum> & {
+            rotate?: ChannelAccessor<Datum>;
+            r?: number;
+            anchor?: "start" | "middle" | "end";
+            shape?: "arrow" | "spike" | "arrow-filled" | ShapeRenderer;
+        };
+        usedScales: UsedScales;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Datum extends DataRecord> {
+    props(): ReturnType<typeof $$render<Datum>>['props'];
+    events(): ReturnType<typeof $$render<Datum>>['events'];
+    slots(): ReturnType<typeof $$render<Datum>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Datum extends DataRecord>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Datum>['bindings']>;
+    } & ReturnType<__sveltets_Render<Datum>['exports']>;
+    <Datum extends DataRecord>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** Helper component for rendering Vector marks in canvas */
+declare const VectorCanvas: $$IsomorphicComponent;
+type VectorCanvas<Datum extends DataRecord> = InstanceType<typeof VectorCanvas<Datum>>;
+export default VectorCanvas;

package/dist/marks/index.d.ts

@@ -16,8 +16,12 @@ export { default as BrushY } from './BrushY.svelte';
 export { default as Cell } from './Cell.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';
@@ -27,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';
@@ -48,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

@@ -16,8 +16,12 @@ export { default as BrushY } from './BrushY.svelte';
 export { default as Cell } from './Cell.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';
@@ -27,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';
@@ -48,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, DifferenceY, Dot, Frame, Geo, Graticule, GridX, GridY, Image, Line, Link, Pointer, 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';
@@ -204,6 +204,22 @@ export type PlotDefaults = {
      * default props for cell marks
      */
     cell: Partial<Omit<ComponentProps<typeof Cell>, IgnoreDefaults>>;
+    /**
+     * 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
      */
@@ -244,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
      */
@@ -260,6 +280,10 @@ export type PlotDefaults = {
      * default props for pointer marks
      */
     pointer: Partial<Omit<ComponentProps<typeof Pointer>, IgnoreDefaults>>;
+    /**
+     * default props for raster marks
+     */
+    raster: Partial<Omit<ComponentProps<typeof Raster>, IgnoreDefaults>>;
     /**
      * default props for rect marks, applied to rect and rectX marks
      */
@@ -316,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
      */