ts: improve spike and vector mark props

svelteplot · gka · Jun 11, 2025 · Jun 6, 2025 · Jun 6, 2025 · Jun 6, 2025
commit edc97eadd15164925da77cc6a18af18b54945b0c
diff --git a/src/lib/marks/Spike.svelte b/src/lib/marks/Spike.svelte
@@ -2,14 +2,11 @@
     @component
     Wrapper around the vector mark with presets suitable for spike maps 
 -->
-<script module lang="ts">
-    export type SpikeMarkProps = VectorMarkProps;
-</script>
-
-<script lang="ts">
-    import Vector, { type VectorMarkProps } from './Vector.svelte';
-    import type { PlotDefaults } from '../types/index.js';
-    import { getContext } from 'svelte';
+<script lang="ts" generics="Datum extends DataRecord">
+    interface SpikeMarkProps extends ComponentProps<typeof Vector> {}
+    import Vector from './Vector.svelte';
+    import type { DataRecord, PlotDefaults } from '../types/index.js';
+    import { getContext, type ComponentProps } from 'svelte';
 
     let markProps: SpikeMarkProps = $props();
 
@@ -24,7 +21,7 @@
         ...getContext<PlotDefaults>('svelteplot/_defaults').spike
     };
 
-    const { data = [{}], ...options }: SpikeMarkProps = $derived({
+    const { data = [{} as Datum], ...options }: SpikeMarkProps = $derived({
         ...DEFAULTS,
         ...markProps
     });

diff --git a/src/lib/marks/Vector.svelte b/src/lib/marks/Vector.svelte
@@ -3,48 +3,44 @@
     The vector mark lets you place shapes (like arrows) on your plot.
 -->
 <script lang="ts" module>
-    import type {
-        PlotContext,
-        DataRecord,
-        BaseMarkProps,
-        ConstantAccessor,
-        ChannelAccessor,
-        FacetContext,
-        PlotDefaults
-    } from '../types/index.js';
-
     type D3Path = ReturnType<typeof import('d3-path').path>;
-
     export type ShapeRenderer = {
         draw(context: D3Path, l: number, r: number): void;
     };
+</script>
 
-    export type VectorMarkProps = BaseMarkProps & {
-        data: DataRecord[];
-        x: ChannelAccessor;
-        y: ChannelAccessor;
+<script lang="ts" generics="Datum extends DataRecord">
+    interface VectorMarkProps extends BaseMarkProps<Datum> {
+        data: Datum[];
+        x: ChannelAccessor<Datum>;
+        y: ChannelAccessor<Datum>;
         r?: number;
-        length?: ChannelAccessor;
-        rotate?: ChannelAccessor;
+        length?: ChannelAccessor<Datum>;
+        rotate?: ChannelAccessor<Datum>;
         /**
          * Controls where the vector is anchored in relation to the x, y position.
          * If set to 'start', the arrow will start at the x, y position. If set to
          * 'middle', the arrow will be centered at the x, y position. If set to
          * 'end', the arrow will end at the x, y position.
          */
-        anchor: 'start' | 'middle' | 'end';
+        anchor?: 'start' | 'middle' | 'end';
         shape?: 'arrow' | 'spike' | 'arrow-filled' | ShapeRenderer;
         children?: Snippet;
         canvas?: boolean;
-    };
-</script>
+    }
+    import type {
+        PlotContext,
+        DataRecord,
+        BaseMarkProps,
+        ChannelAccessor,
+        FacetContext,
+        PlotDefaults
+    } from '../types/index.js';
 
-<script lang="ts">
     import { getContext, type Snippet } from 'svelte';
     import { pathRound as path } from 'd3-path';
 
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { projectXY } from '../helpers/scales.js';
     import { sort } from 'svelteplot';
     import Mark from '../Mark.svelte';
     //import DotCanvas from './helpers/DotCanvas.svelte';