spike defaults

gka · gka · commit 759a38079459 · 2025-06-05T23:46:31.000+02:00
diff --git a/src/lib/marks/Spike.svelte b/src/lib/marks/Spike.svelte
@@ -8,16 +8,26 @@
 
 <script lang="ts">
     import Vector, { type VectorMarkProps } from './Vector.svelte';
-    let { data = [{}], ...options }: SpikeMarkProps = $props();
+    import type { PlotDefaults } from '../types.js';
+    import { getContext } from 'svelte';
+
+    let markProps: SpikeMarkProps = $props();
+
+    const DEFAULTS = {
+        fill: 'currentColor',
+        fillOpacity: 0.3,
+        strokeWidth: 1,
+        anchor: 'start' as const,
+        stroke: 'currentColor',
+        sort: { channel: '-y' },
+        shape: 'spike' as const,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').spike
+    };
+
+    const { data = [{}], ...options }: SpikeMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 </script>
 
-<Vector
-    {data}
-    fill={options.stroke || 'currentColor'}
-    fillOpacity={0.3}
-    strokeWidth={1}
-    anchor="start"
-    stroke="currentColor"
-    sort={{ channel: '-y' }}
-    {...options}
-    shape="spike" />
+<Vector {data} {...options} />
diff --git a/src/routes/examples/brush/zoomable-scatter.svelte b/src/routes/examples/brush/zoomable-scatter.svelte
@@ -72,6 +72,7 @@
                 }} />
         {:else}
             <Frame
+                stroke={false}
                 fill="transparent"
                 cursor="zoom-out"
                 onpointerup={resetZoom} />
diff --git a/src/routes/marks/brush/+page.md b/src/routes/marks/brush/+page.md
@@ -293,6 +293,7 @@ Another use case for the Brush mark would be to create a zoomable plot by changi
         {:else}
             <Frame
                 fill="transparent"
+                stroke="transparent"
                 cursor="zoom-out"
                 onpointerup={resetZoom} />
         {/if}
