svelteplot 0.5.1-pr-238.7 → 0.5.2-pr-251.0

package/dist/marks/CustomMark.svelte

@@ -5,6 +5,7 @@
 <script lang="ts" generics="Datum extends DataRecord">
     interface CustomMarkProps extends BaseMarkProps<Datum> {
         data?: Datum[];
+        type?: string;
         x?: ChannelAccessor<Datum>;
         x1?: ChannelAccessor<Datum>;
         x2?: ChannelAccessor<Datum>;
@@ -18,7 +19,6 @@
         marks?: Snippet<[{ records: ScaledDataRecord<Datum>[]; usedScales: UsedScales }]>;
     }
 
-    import { getContext } from 'svelte';
     import type {
         PlotContext,
         DataRecord,
@@ -33,7 +33,13 @@
 
     import Mark from '../Mark.svelte';
 
-    let { data = [{} as Datum], mark, marks, ...options }: CustomMarkProps = $props();
+    let {
+        data = [{} as Datum],
+        mark,
+        type = 'custom',
+        marks,
+        ...options
+    }: CustomMarkProps = $props();
 
     const args = $derived(sort({ data, ...options })) as CustomMarkProps;
 
@@ -53,7 +59,7 @@
     ];
 </script>
 
-<Mark type="custom" required={[]} channels={channels.filter((d) => !!options[d])} {...args}>
+<Mark {type} required={[]} channels={channels.filter((d) => !!options[d])} {...args}>
     {#snippet children({ scaledData, usedScales })}
         {#if marks}
             {@render marks({ records: scaledData.filter((d) => d.valid), usedScales })}

package/dist/marks/Image.svelte

@@ -0,0 +1,67 @@
+<script lang="ts" generics="Datum extends DataRecord">
+    interface ImageMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
+        data: Datum[];
+        x: ChannelAccessor<Datum>;
+        y: ChannelAccessor<Datum>;
+        r?: ChannelAccessor<Datum>;
+        width?: ConstantAccessor<number, Datum>;
+        height?: ConstantAccessor<number, Datum>;
+        src?: ConstantAccessor<string, Datum>;
+        title?: ConstantAccessor<string, Datum>;
+        preserveAspectRatio?: string;
+        // canvas?: boolean;
+        imageClass?: ConstantAccessor<string, Datum>;
+    }
+
+    import type {
+        BaseMarkProps,
+        ChannelAccessor,
+        ConstantAccessor,
+        DataRecord,
+        LinkableMarkProps
+    } from '../types';
+    import { resolveProp } from '../helpers/resolve';
+    import CustomMark from './CustomMark.svelte';
+    import { getPlotDefaults } from '../hooks/plotDefaults';
+    import { sort } from '../transforms';
+
+    let markProps: ImageMarkProps = $props();
+
+    const DEFAULTS: Partial<ImageMarkProps> = {
+        width: 20,
+        preserveAspectRatio: 'xMidYMin slice',
+        ...getPlotDefaults().image
+    };
+
+    const {
+        data = [{} as Datum],
+        width,
+        height,
+        src,
+        title,
+        preserveAspectRatio,
+        ...options
+    }: ImageMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
+
+    const args = $derived(sort({ data, ...options }));
+</script>
+
+<CustomMark type="image" {...args}>
+    {#snippet mark({ record, index, usedScales })}
+        {@const w = record.r !== undefined ? record.r * 2 : resolveProp(width, record.datum, 20)}
+        {@const h =
+            record.r !== undefined ? record.r * 2 : resolveProp(height || width, record.datum, 20)}
+        <image
+            href={resolveProp(src, record.datum, '')}
+            x={record.x - w * 0.5}
+            y={record.y - h * 0.5}
+            {preserveAspectRatio}
+            clip-path={record.r !== undefined ? `circle(${record.r}px)` : null}
+            width={w}
+            height={h}
+            >{#if title}<title>{resolveProp(title, record.datum, '')}</title>{/if}</image>
+    {/snippet}
+</CustomMark>

package/dist/marks/Image.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { DataRecord } from '../types';
+declare class __sveltets_Render<Datum extends DataRecord> {
+    props(): any;
+    events(): {};
+    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']>;
+}
+declare const Image: $$IsomorphicComponent;
+type Image<Datum extends DataRecord> = InstanceType<typeof Image<Datum>>;
+export default Image;

package/dist/marks/index.d.ts

@@ -27,6 +27,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 Image } from './Image.svelte';
 export { default as Line } from './Line.svelte';
 export { default as LineX } from './LineX.svelte';
 export { default as LineY } from './LineY.svelte';

package/dist/marks/index.js

@@ -27,6 +27,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 Image } from './Image.svelte';
 export { default as Line } from './Line.svelte';
 export { default as LineX } from './LineX.svelte';
 export { default as LineY } from './LineY.svelte';

package/dist/types/plot.d.ts

@@ -3,7 +3,7 @@ import type { ColorScheme } from './colorScheme.js';
 import type { GeoProjection } from 'd3-geo';
 import type { ChannelAccessor, ChannelName, ColorScaleOptions, DataRecord, LegendScaleOptions, PlotScales, ScaleOptions, XScaleOptions, YScaleOptions } from './index.js';
 import type { Snippet } from 'svelte';
-import type { Area, AreaX, AreaY, Arrow, AxisX, AxisY, BarX, BarY, BoxX, BoxY, Brush, BrushX, BrushY, Cell, DifferenceY, Dot, Frame, Geo, Graticule, GridX, GridY, Line, Link, Pointer, Rect, RectX, RectY, RuleX, RuleY, Sphere, Spike, Text, TickX, TickY, Vector } from '../marks/index.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, Vector } from '../marks/index.js';
 export type PlotState = {
     width: number;
     height: number;
@@ -230,6 +230,10 @@ export type PlotDefaults = {
     gridY: Partial<Omit<ComponentProps<typeof GridY>, IgnoreDefaults> & {
         implicit: boolean;
     }>;
+    /**
+     * default props for image marks
+     */
+    image: Partial<Omit<ComponentProps<typeof Image>, IgnoreDefaults>>;
     /**
      * default props for line marks
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.5.1-pr-238.7",
+    "version": "0.5.2-pr-251.0",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",