svelteplot 0.3.7-pr-131.0 → 0.3.7-pr-132.1

package/dist/Mark.svelte

@@ -11,7 +11,7 @@
                 {
                     mark: Mark<GenericMarkOptions>;
                     usedScales: ReturnType<typeof getUsedScales>;
-                    scaledData: ScaledDataRecord<Datum>[];
+                    scaledData: ScaledDataRecord[];
                 }
             ]
         >;

package/dist/Mark.svelte.d.ts

@@ -71,7 +71,7 @@ declare class __sveltets_Render<Datum extends DataRecord> {
         children?: Snippet<[{
             mark: any;
             usedScales: ReturnType<typeof getUsedScales>;
-            scaledData: ScaledDataRecord<Datum>[];
+            scaledData: ScaledDataRecord[];
         }]> | undefined;
         defaults?: Partial<Record<ScaledChannelName, RawValue>>;
     };

package/dist/marks/Area.svelte

@@ -41,6 +41,7 @@
         RawValue
     } from '../types/index.js';
     import type { StackOptions } from '../transforms/stack.js';
+    import { addEventHandlers } from './helpers/events';
 
     let markProps: AreaMarkProps = $props();
 
@@ -135,6 +136,11 @@
                                 class={['svelteplot-area', className, styleClass]}
                                 clip-path={options.clipPath}
                                 d={areaPath(areaData)}
+                                use:addEventHandlers={{
+                                    getPlotState,
+                                    options,
+                                    datum: datum.datum
+                                }}
                                 {style}
                                 >{#if title}<title>{title}</title>{/if}</path>
                         </Anchor>

package/dist/marks/CustomMark.svelte

@@ -4,18 +4,10 @@
 -->
 <script lang="ts" generics="Datum extends DataRecord">
     interface CustomMarkProps extends BaseMarkProps<Datum> {
-        data?: Datum[];
+        data: Datum[];
         x?: ChannelAccessor<Datum>;
-        x1?: ChannelAccessor<Datum>;
-        x2?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;
-        y1?: ChannelAccessor<Datum>;
-        y2?: ChannelAccessor<Datum>;
-        r?: ChannelAccessor<Datum>;
-        mark?: Snippet<
-            [{ record: ScaledDataRecord<Datum>; index: number; usedScales: UsedScales }]
-        >;
-        marks?: Snippet<[{ records: ScaledDataRecord<Datum>[]; usedScales: UsedScales }]>;
+        children: Snippet<[{ datum: Datum; x: number; y: number }]>;
     }
 
     import { getContext } from 'svelte';
@@ -23,47 +15,36 @@
         PlotContext,
         DataRecord,
         ChannelAccessor,
-        BaseMarkProps,
-        ScaledDataRecord,
-        UsedScales,
-        ScaledChannelName
+        BaseMarkProps
     } from '../types/index.js';
     import type { Snippet } from 'svelte';
-    import { sort } from '../index.js';
 
-    import Mark from '../Mark.svelte';
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    let plot = $derived(getPlotState());
 
-    let { data = [{} as Datum], mark, marks, ...options }: CustomMarkProps = $props();
+    import { resolveChannel } from '../helpers/resolve.js';
+    import { projectXY } from '../helpers/scales.js';
+    import { isValid } from '../helpers/index.js';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
 
-    const args = $derived(sort({ data, ...options })) as CustomMarkProps;
-
-    const channels: ScaledChannelName[] = [
-        'x',
-        'x1',
-        'x2',
-        'y',
-        'y1',
-        'y2',
-        'r',
-        'fill',
-        'stroke',
-        'opacity',
-        'fillOpacity',
-        'strokeOpacity'
-    ];
+    let {
+        data = [{} as Datum],
+        x,
+        y,
+        children,
+        class: className = null
+    }: CustomMarkProps = $props();
 </script>
 
-<Mark type="custom" required={[]} channels={channels.filter((d) => !!options[d])} {...args}>
-    {#snippet children({ scaledData, usedScales })}
-        {#if marks}
-            {@render marks({ records: scaledData.filter((d) => d.valid), usedScales })}
-        {/if}
-        {#if mark}
-            {#each scaledData as datum, i (i)}
-                {#if datum.valid}
-                    {@render mark({ record: datum, index: i, usedScales })}
-                {/if}
-            {/each}
+<GroupMultiple class="g-custom-mark {className || ''}" length={className ? 2 : data.length}>
+    {#each data as datum, i (i)}
+        {@const x_ = resolveChannel<Datum>('x', datum, { x, y })}
+        {@const y_ = resolveChannel<Datum>('y', datum, { x, y })}
+        {#if isValid(x_) && isValid(y_)}
+            {@const [px, py] = projectXY(plot.scales, x_, y_)}
+            <g transform="translate({px}, {py})">
+                {@render children({ datum, x: px, y: py })}
+            </g>
         {/if}
-    {/snippet}
-</Mark>
+    {/each}
+</GroupMultiple>

package/dist/types/channel.d.ts

@@ -8,5 +8,4 @@ export type ChannelAccessor<T = Record<string | symbol, RawValue>> = ChannelValu
 };
 export type ChannelValue<T = Record<string | symbol, RawValue>> = RawValue | keyof T | ((d: T) => RawValue) | null | undefined;
 export type ScaledChannelName = 'fill' | 'fillOpacity' | 'opacity' | 'r' | 'length' | 'stroke' | 'strokeOpacity' | 'symbol' | 'fx' | 'fy' | 'x' | 'x1' | 'x2' | 'y' | 'y1' | 'y2';
-export type ScaledChannelType<T extends ScaledChannelName> = T extends 'fill' | 'stroke' | 'symbol' ? string : number;
 export type ChannelName = ScaledChannelName | 'z' | 'sort' | 'filter' | 'interval';

package/dist/types/data.d.ts

@@ -1,4 +1,4 @@
-import type { ScaledChannelName, ScaledChannelType } from './channel.js';
+import type { ScaledChannelName } from './channel.js';
 export type RawValue = number | Date | boolean | string | symbol;
 export type DataRecord<T = Record<string | symbol, RawValue>> = T & {
     ___orig___?: RawValue | [RawValue, RawValue];
@@ -6,9 +6,7 @@ export type DataRecord<T = Record<string | symbol, RawValue>> = T & {
 export type ResolvedDataRecord<T = Record<string | symbol, RawValue>> = Partial<Record<ScaledChannelName, any>> & {
     datum: DataRecord<T>;
 };
-export type ScaledDataRecord<T = Record<string | symbol, RawValue>> = Partial<{
-    [K in ScaledChannelName]?: ScaledChannelType<K>;
-}> & {
+export type ScaledDataRecord<T = Record<string | symbol, RawValue>> = Partial<Record<ScaledChannelName, number | string | boolean | undefined>> & {
     datum: DataRecord<T>;
     valid: Boolean;
 };

package/dist/types/mark.d.ts

@@ -6,7 +6,7 @@ export type Mark<T> = {
     data: DataRecord<T>[];
     options: T;
 };
-export type MarkType = 'area' | 'arrow' | 'barX' | 'barY' | 'cell' | 'custom' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'line' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY';
+export type MarkType = 'area' | 'arrow' | 'barX' | 'barY' | 'cell' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'line' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY';
 export type MarkStyleProps = 'strokeDasharray' | 'strokeLinejoin' | 'strokeLinecap' | 'opacity' | 'cursor' | 'pointerEvents' | 'blend' | 'fill' | 'fillOpacity' | 'fontWeight' | 'fontVariant' | 'fontSize' | 'fontStyle' | 'stroke' | 'strokeWidth' | 'strokeOpacity' | 'x' | 'y' | 'clipPath' | 'mask' | 'filter' | 'angle' | 'radius' | 'symbol' | 'textAnchor' | 'width';
 import type { MouseEventHandler } from 'svelte/elements';
 import type { ChannelAccessor, ConstantAccessor, DataRecord, RawValue } from './index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.3.7-pr-131.0",
+    "version": "0.3.7-pr-132.1",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",