svelteplot 0.0.1-alpha.8 → 0.1.3-next.11

package/dist/marks/helpers/DotCanvas.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+    import type { PlotState, Mark, DataRecord, BaseMarkProps } from '../../types.js';
+    import { CSS_VAR } from '../../constants.js';
+    import { isValid, testFilter } from '../../helpers/index.js';
+    import { resolveChannel, resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
+    import { projectXY } from '../../helpers/scales.js';
+    import { maybeSymbol } from '../../helpers/symbols.js';
+    import { symbol as d3Symbol } from 'd3-shape';
+    import { untrack } from 'svelte';
+    import { isEqual } from 'es-toolkit';
+
+    let canvas: HTMLCanvasElement | undefined = $state();
+    let devicePixelRatio = $state(1);
+
+    let {
+        mark,
+        plot,
+        data,
+        testFacet,
+        usedScales
+    }: {
+        mark: Mark<BaseMarkProps>;
+        plot: PlotState;
+        data: DataRecord[];
+        testFacet: any;
+        usedScales: any;
+    } = $props();
+
+    function drawSymbolPath(symbolType: string, size: number, context) {
+        // maybeSymbol(symbolType).draw(context, size);
+        return d3Symbol(maybeSymbol(symbolType), size).context(context)();
+    }
+
+    function scaleHash(scale) {
+        return { domain: scale.domain, type: scale.type, range: scale.range };
+    }
+
+    let _plotSize = $state([plot.width, plot.height]);
+    let _usedScales = $state(usedScales);
+    let _markOptions = $state(mark.options);
+    const xScale = $derived(scaleHash(plot.scales.x));
+    const yScale = $derived(scaleHash(plot.scales.y));
+    const rScale = $derived(scaleHash(plot.scales.r));
+    let _xScale = $state(xScale);
+    let _yScale = $state(yScale);
+    let _rScale = $state(rScale);
+
+    const filteredData = $derived(
+        data.filter((datum) => testFilter(datum, _markOptions) && testFacet(datum, _markOptions))
+    );
+
+    let _filteredData: DataRecord[] = $state([]);
+
+    $effect(() => {
+        // update _usedScales only if changed
+        if (!isEqual(usedScales, _usedScales)) _usedScales = usedScales;
+        if (!isEqual(mark.options, _markOptions)) _markOptions = mark.options;
+
+        const plotSize = [plot.width, plot.height];
+        if (!isEqual(plotSize, _plotSize)) _plotSize = plotSize;
+
+        if (
+            _markOptions.filter
+                ? !isEqual(filteredData, _filteredData)
+                : filteredData.length !== _filteredData.length
+        ) {
+            _filteredData = filteredData;
+        }
+        if (!isEqual(xScale, _xScale)) _xScale = xScale;
+        if (!isEqual(yScale, _yScale)) _yScale = yScale;
+        if (!isEqual(rScale, _rScale)) _rScale = rScale;
+    });
+
+    $effect(() => {
+        // track plot size, since we're untracking the scales
+        _plotSize;
+        _markOptions;
+        _xScale;
+        _yScale;
+        _rScale;
+        const plotScales = untrack(() => plot.scales);
+        const context = canvas.getContext('2d');
+        if (context === null) return;
+        // this will re-run whenever `color` or `size` change
+        context.resetTransform();
+        context.scale(devicePixelRatio, devicePixelRatio);
+
+        for (const datum of _filteredData) {
+            // untrack the filter test to avoid redrawing when not necessary
+            const x = resolveChannel('x', datum, _markOptions);
+            const y = resolveChannel('y', datum, _markOptions);
+            const r = resolveChannel('r', datum, _markOptions) || 2;
+            const symbol_ = resolveChannel('symbol', datum, {
+                symbol: 'circle',
+                ..._markOptions
+            });
+            const symbol = _usedScales.symbol ? plotScales.symbol.fn(symbol_) : symbol_;
+
+            if (isValid(x) && isValid(y) && isValid(r)) {
+                const [px, py] = projectXY(plotScales, x, y, true, true);
+
+                const r_ = _usedScales.r ? plotScales.r.fn(r) : r;
+                const size = r_ * r_ * Math.PI * devicePixelRatio;
+                let { stroke, strokeOpacity, fillOpacity, fill, opacity } = resolveScaledStyleProps(
+                    datum,
+                    _markOptions,
+                    _usedScales,
+                    untrack(() => plot),
+                    'stroke'
+                );
+
+                if (`${fill}`.toLowerCase() === 'currentcolor')
+                    fill = getComputedStyle(canvas.parentElement.parentElement).getPropertyValue(
+                        'color'
+                    );
+                if (`${stroke}`.toLowerCase() === 'currentcolor')
+                    stroke = getComputedStyle(canvas.parentElement.parentElement).getPropertyValue(
+                        'color'
+                    );
+                if (CSS_VAR.test(fill))
+                    fill = getComputedStyle(canvas).getPropertyValue(fill.slice(4, -1));
+                if (CSS_VAR.test(stroke))
+                    stroke = getComputedStyle(canvas).getPropertyValue(stroke.slice(4, -1));
+
+                if (stroke && stroke !== 'none') {
+                    const strokeWidth = resolveProp(_markOptions.strokeWidth, datum, 1.6);
+                    context.lineWidth = strokeWidth;
+                }
+                context.fillStyle = fill ? fill : 'none';
+                context.strokeStyle = stroke ? stroke : 'none';
+                context.translate(px, py);
+
+                context.beginPath();
+                drawSymbolPath(symbol, size, context);
+                context.closePath();
+
+                if (opacity != null) context.globalAlpha = opacity ?? 1;
+                if (fillOpacity != null) context.globalAlpha = (opacity ?? 1) * fillOpacity;
+                if (fill && fill !== 'none') context.fill();
+                if (strokeOpacity != null) context.globalAlpha = (opacity ?? 1) * strokeOpacity;
+                if (stroke && stroke !== 'none') context.stroke();
+                context.translate(-px, -py);
+            }
+        }
+        return () => {
+            canvas?.getContext('2d')?.clearRect(0, 0, canvas?.width, canvas?.height);
+        };
+    });
+
+    // code from https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
+    let remove: null | (() => void) = null;
+
+    function updatePixelRatio() {
+        if (remove != null) {
+            remove();
+        }
+        const mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
+        const media = matchMedia(mqString);
+        media.addEventListener('change', updatePixelRatio);
+        remove = () => {
+            media.removeEventListener('change', updatePixelRatio);
+        };
+        devicePixelRatio = window.devicePixelRatio;
+    }
+    $effect(() => {
+        updatePixelRatio();
+    });
+</script>
+
+<foreignObject x="0" y="0" width={plot.width} height={plot.height}>
+    <canvas
+        xmlns="http://www.w3.org/1999/xhtml"
+        bind:this={canvas}
+        width={plot.width * devicePixelRatio}
+        height={plot.height * devicePixelRatio}
+        style="width: {plot.width}px; height: {plot.height}px;"></canvas>
+</foreignObject>
+
+<style>
+    foreignObject,
+    canvas {
+        color: currentColor;
+    }
+</style>

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

@@ -0,0 +1,11 @@
+import type { PlotState, Mark, DataRecord, BaseMarkProps } from '../../types.js';
+type $$ComponentProps = {
+    mark: Mark<BaseMarkProps>;
+    plot: PlotState;
+    data: DataRecord[];
+    testFacet: any;
+    usedScales: any;
+};
+declare const DotCanvas: import("svelte").Component<$$ComponentProps, {}, "">;
+type DotCanvas = ReturnType<typeof DotCanvas>;
+export default DotCanvas;

package/dist/marks/helpers/GeoCanvas.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+    import type { PlotState, Mark, DataRecord, BaseMarkProps } from '../../types.js';
+    import { CSS_VAR } from '../../constants.js';
+    import { testFilter } from '../../helpers/index.js';
+    import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
+    import { untrack } from 'svelte';
+    import { isEqual } from 'es-toolkit';
+    import { type GeoPath } from 'd3-geo';
+
+    let canvas: HTMLCanvasElement | undefined = $state();
+    let devicePixelRatio = $state(1);
+
+    let {
+        mark,
+        plot,
+        data,
+        testFacet,
+        usedScales,
+        path
+    }: {
+        mark: Mark<BaseMarkProps>;
+        plot: PlotState;
+        data: DataRecord[];
+        testFacet: any;
+        usedScales: any;
+        path: GeoPath;
+    } = $props();
+
+    function scaleHash(scale) {
+        return { domain: scale.domain, type: scale.type, range: scale.range };
+    }
+
+    let _plotSize = $state([plot.width, plot.height]);
+    let _usedScales = $state(usedScales);
+    let _markOptions = $state(mark.options);
+
+    const filteredData = $derived(
+        data.filter((datum) => testFilter(datum, _markOptions) && testFacet(datum, _markOptions))
+    );
+
+    let _filteredData: DataRecord[] = $state([]);
+
+    $effect(() => {
+        // update _usedScales only if changed
+        if (!isEqual(usedScales, _usedScales)) _usedScales = usedScales;
+        if (!isEqual(mark.options, _markOptions)) _markOptions = mark.options;
+
+        const plotSize = [plot.width, plot.height];
+        if (!isEqual(plotSize, _plotSize)) _plotSize = plotSize;
+
+        if (
+            _markOptions.filter
+                ? !isEqual(filteredData, _filteredData)
+                : filteredData.length !== _filteredData.length
+        ) {
+            _filteredData = filteredData;
+        }
+    });
+
+    $effect(() => {
+        // track plot size, since we're untracking the scales
+        _plotSize;
+        _markOptions;
+
+        const plotScales = untrack(() => plot.scales);
+        const context = canvas.getContext('2d');
+        if (context === null) return;
+        // this will re-run whenever `color` or `size` change
+        context.resetTransform();
+        context.scale(devicePixelRatio, devicePixelRatio);
+
+        let currentColor;
+
+        path.context(context);
+
+        const plot_ = untrack(() => plot);
+
+        for (const datum of _filteredData) {
+            // untrack the filter test to avoid redrawing when not necessary
+            let { stroke, fill, opacity, ...restStyles } = resolveScaledStyleProps(
+                datum,
+                _markOptions,
+                _usedScales,
+                plot_,
+                'fill'
+            );
+
+            const fillOpacity = restStyles['fill-opacity'];
+            const strokeOpacity = restStyles['stroke-opacity'];
+
+            if (`${fill}`.toLowerCase() === 'currentcolor')
+                fill =
+                    currentColor ||
+                    (currentColor = getComputedStyle(
+                        canvas?.parentElement?.parentElement
+                    ).getPropertyValue('color'));
+            if (`${stroke}`.toLowerCase() === 'currentcolor')
+                stroke =
+                    currentColor ||
+                    (currentColor = getComputedStyle(
+                        canvas?.parentElement?.parentElement
+                    ).getPropertyValue('color'));
+            if (CSS_VAR.test(fill))
+                fill = getComputedStyle(canvas).getPropertyValue(fill.slice(4, -1));
+            if (CSS_VAR.test(stroke))
+                stroke = getComputedStyle(canvas).getPropertyValue(stroke.slice(4, -1));
+
+            if (stroke && stroke !== 'none') {
+                const strokeWidth = resolveProp(_markOptions.strokeWidth, datum, 1.6);
+                context.lineWidth = strokeWidth;
+            }
+            context.fillStyle = fill ? fill : 'none';
+            context.strokeStyle = stroke ? stroke : 'none';
+
+            context.beginPath();
+            path(datum);
+            context.closePath();
+
+            if (opacity != null) context.globalAlpha = opacity ?? 1;
+            if (fillOpacity != null) context.globalAlpha = (opacity ?? 1) * fillOpacity;
+
+            if (fill && fill !== 'none') context.fill();
+            if (strokeOpacity != null) context.globalAlpha = (opacity ?? 1) * strokeOpacity;
+            if (stroke && stroke !== 'none') context.stroke();
+        }
+        return () => {
+            canvas?.getContext('2d')?.clearRect(0, 0, canvas?.width, canvas?.height);
+        };
+    });
+
+    // code from https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
+    let remove: null | (() => void) = null;
+
+    function updatePixelRatio() {
+        if (remove != null) {
+            remove();
+        }
+        const mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
+        const media = matchMedia(mqString);
+        media.addEventListener('change', updatePixelRatio);
+        remove = () => {
+            media.removeEventListener('change', updatePixelRatio);
+        };
+        devicePixelRatio = window.devicePixelRatio;
+    }
+    $effect(() => {
+        updatePixelRatio();
+    });
+</script>
+
+<foreignObject x="0" y="0" width={plot.width} height={plot.height}>
+    <canvas
+        xmlns="http://www.w3.org/1999/xhtml"
+        bind:this={canvas}
+        width={plot.width * devicePixelRatio}
+        height={plot.height * devicePixelRatio}
+        style="width: {plot.width}px; height: {plot.height}px;"></canvas>
+</foreignObject>
+
+<style>
+    foreignObject,
+    canvas {
+        color: currentColor;
+    }
+</style>

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

@@ -0,0 +1,13 @@
+import type { PlotState, Mark, DataRecord, BaseMarkProps } from '../../types.js';
+import { type GeoPath } from 'd3-geo';
+type $$ComponentProps = {
+    mark: Mark<BaseMarkProps>;
+    plot: PlotState;
+    data: DataRecord[];
+    testFacet: any;
+    usedScales: any;
+    path: GeoPath;
+};
+declare const GeoCanvas: import("svelte").Component<$$ComponentProps, {}, "">;
+type GeoCanvas = ReturnType<typeof GeoCanvas>;
+export default GeoCanvas;

package/dist/marks/helpers/GroupMultiple.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    let {
+        length = 1,
+        children,
+        class: className = null,
+        ...groupProps
+    }: { children: Snippet; length?: number; class?: string | null } = $props();
+</script>
+
+{#if length > 1 || className}
+    <g class={className} {...groupProps}>
+        {@render children()}
+    </g>
+{:else}
+    {@render children()}
+{/if}

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    length?: number;
+    class?: string | null;
+};
+declare const GroupMultiple: import("svelte").Component<$$ComponentProps, {}, "">;
+type GroupMultiple = ReturnType<typeof GroupMultiple>;
+export default GroupMultiple;

package/dist/marks/helpers/Marker.svelte

@@ -0,0 +1,93 @@
+<script module lang="ts">
+    export type MarkerShape =
+        | 'dot'
+        | 'circle'
+        | 'circle-stroke'
+        | 'arrow'
+        | 'arrow-reverse'
+        | 'tick'
+        | 'tick-x'
+        | 'tick-y';
+</script>
+
+<!-- 
+    @component Marker is a helper component that creates a marker for use in a line or path.
+-->
+
+<script lang="ts">
+    import { getContext } from 'svelte';
+
+    type MarkerProps = {
+        id: string;
+        shape: MarkerShape;
+        color: string;
+    };
+
+    let { id, shape, color }: MarkerProps = $props();
+
+    const tickMarker = (orient: number | 'auto') => ({
+        viewBox: '-3 -3 6 6',
+        path: 'M0,-3v6',
+        width: 6,
+        height: 6,
+        orient,
+        color: 'stroke'
+    });
+
+    const MARKERS: Record<
+        MarkerShape,
+        {
+            path?: string;
+            width: number;
+            height: number;
+            orient: number | 'auto';
+            color: 'fill' | 'stroke';
+            bg?: 'fill' | 'stroke';
+            viewBox?: string;
+        }
+    > = {
+        circle: { width: 6.67, height: 6.67, orient: 0, color: 'fill', bg: 'stroke' },
+        dot: { width: 6.67, height: 6.67, orient: 0, color: 'fill' },
+        'circle-stroke': { width: 6.67, height: 6.67, orient: 0, color: 'stroke', bg: 'fill' },
+        tick: tickMarker('auto'),
+        'tick-x': tickMarker(90),
+        'tick-y': tickMarker(0),
+        arrow: {
+            path: 'M-1.5,-3l3,3l-3,3',
+            width: 6.67,
+            height: 6.67,
+            orient: 'auto',
+            color: 'stroke'
+        },
+        'arrow-reverse': {
+            path: 'M1.5,-3l-3,3l3,3',
+            width: 6.67,
+            height: 6.67,
+            orient: 'auto',
+            color: 'stroke'
+        }
+    };
+
+    const defaultDotRadius = getContext('svelteplot/_defaults').markerDotRadius;
+
+    const markerColors = $derived({
+        fill: 'none',
+        [MARKERS[shape].color]: color,
+        ...(MARKERS[shape].bg ? { [MARKERS[shape].bg as string]: 'var(--svelteplot-bg)' } : {})
+    });
+</script>
+
+<marker
+    {id}
+    viewBox={MARKERS[shape].viewBox || '-5 -5 10 10'}
+    markerWidth={MARKERS[shape].width}
+    orient={MARKERS[shape].orient}
+    markerHeight={MARKERS[shape].height}
+    stroke-width="1.5"
+    {...markerColors}>
+    {#if shape === 'dot' || shape === 'circle' || shape === 'circle-stroke'}
+        <circle r={defaultDotRadius} />
+    {:else}
+        <path d={MARKERS[shape].path} />
+    {/if}
+</marker>

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

@@ -0,0 +1,10 @@
+export type MarkerShape = 'dot' | 'circle' | 'circle-stroke' | 'arrow' | 'arrow-reverse' | 'tick' | 'tick-x' | 'tick-y';
+type MarkerProps = {
+    id: string;
+    shape: MarkerShape;
+    color: string;
+};
+/** Marker is a helper component that creates a marker for use in a line or path. */
+declare const Marker: import("svelte").Component<MarkerProps, {}, "">;
+type Marker = ReturnType<typeof Marker>;
+export default Marker;

package/dist/marks/helpers/MarkerPath.svelte

@@ -0,0 +1,141 @@
+<!--
+    @component
+    Helper component for paths with markers and optional text along the path.
+-->
+<script lang="ts">
+    import Marker, { type MarkerShape } from './Marker.svelte';
+    import { isSnippet, randomId } from '../../helpers/index.js';
+    import { resolveProp } from '../../helpers/resolve.js';
+    import type {
+        BaseMarkProps,
+        ConstantAccessor,
+        DataRecord,
+        Mark,
+        PlotContext,
+        PlotScales
+    } from '../../types.js';
+    import { addEventHandlers } from './events.js';
+    import { getContext } from 'svelte';
+
+    type MarkerPathProps = BaseMarkProps & {
+        /**
+         * the datum associated with this path, usually the first
+         * element of the data array group
+         */
+        datum: DataRecord;
+        /**
+         * the marker shape to use at the start of the path, defaults to
+         * cirlce
+         */
+        markerStart?: boolean | MarkerShape;
+        /**
+         * the marker shape to use at the middle of the path, defaults to circle
+         */
+        markerMid?: boolean | MarkerShape;
+        /**
+         * the marker shape to use at the end of the path, defaults to circle
+         */
+        markerEnd?: boolean | MarkerShape;
+        /**
+         * shorthand for setting all markers
+         */
+        marker?: boolean | MarkerShape;
+        /**
+         * path string
+         */
+        d: string;
+        style: string;
+        startOffset: string;
+        textStyle: string;
+        textStyleClass?: string | null;
+        text: string;
+        transform: string;
+        color: string;
+        strokeWidth: ConstantAccessor<number>;
+        mark: Mark<BaseMarkProps>;
+        scales: PlotScales;
+    };
+
+    let {
+        datum,
+        markerStart,
+        markerMid,
+        markerEnd,
+        marker,
+        d,
+        dInv,
+        style,
+        class: className = null,
+        textStyleClass = null,
+        startOffset,
+        textStyle,
+        text,
+        transform,
+        color,
+        strokeWidth,
+        mark
+    }: MarkerPathProps = $props();
+
+    const id = randomId();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+
+    const points = $derived(text && d != null ? d.split(/[LMC]/).slice(1) : []);
+    const hasPath = $derived(points.length > 0);
+    const firstPt = $derived(text && hasPath ? points.at(0).split(',').map(Number) : []);
+    const lastPt = $derived(text && hasPath ? points.at(-1).split(',').map(Number) : []);
+    const leftToRight = $derived(text && hasPath ? firstPt[0] < lastPt.at(-2) : true);
+
+    // use reversed path if the path is not left to right
+    const textPath = $derived(!text || leftToRight ? d : dInv);
+    const strokeWidth_ = $derived(resolveProp(strokeWidth, datum, 1.4));
+</script>
+
+<g
+    {transform}
+    class={className}
+    stroke-width={strokeWidth_}
+    use:addEventHandlers={{ getPlotState, options: mark.options, datum }}>
+    {#each Object.entries( { start: markerStart, mid: markerMid, end: markerEnd, all: marker } ) as [key, marker]}
+        {@const markerId = `marker-${key === 'all' ? '' : `${key}-`}${id}`}
+        {#if isSnippet(marker)}
+            {@render marker(markerId, color)}
+        {:else if marker}
+            <Marker
+                id={markerId}
+                shape={marker === true ? 'circle' : resolveProp(marker, datum)}
+                {color} />
+        {/if}
+    {/each}
+    {#if mark.options.onmouseenter || mark.options.onclick}
+        <!-- add invisible path in bg for easier mouse access -->
+        <path
+            {d}
+            style="fill:none;stroke-width: {(strokeWidth || 1) +
+                10}; stroke: transparent; stroke-opacity:0" />
+    {/if}
+    <path
+        marker-start={markerStart || marker
+            ? `url(#marker-${markerStart ? 'start-' : ''}${id})`
+            : null}
+        marker-mid={markerMid || marker ? `url(#marker-${markerMid ? 'mid-' : ''}${id})` : null}
+        marker-end={markerEnd || marker ? `url(#marker-${markerEnd ? 'end-' : ''}${id})` : null}
+        {d}
+        {style}
+        use:addEventHandlers={{ getPlotState, options: mark.options, datum }} />
+    {#if text}
+        <!-- since textPath.side is not yet supported, we have to use an invisible
+            path in order to keep the text from turning upside down -->
+        <path d={textPath} {id} stroke="none" fill="none" />
+        <text dy="-3" style={textStyle} class={textStyleClass}>
+            <textPath {startOffset} href="#{id}">{text}</textPath>
+        </text>
+    {/if}
+</g>
+
+<style>
+    text {
+        font-size: 12px;
+        paint-order: stroke fill;
+    }
+</style>

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

@@ -0,0 +1,44 @@
+import { type MarkerShape } from './Marker.svelte';
+import type { BaseMarkProps, ConstantAccessor, DataRecord, Mark, PlotScales } from '../../types.js';
+type MarkerPathProps = BaseMarkProps & {
+    /**
+     * the datum associated with this path, usually the first
+     * element of the data array group
+     */
+    datum: DataRecord;
+    /**
+     * the marker shape to use at the start of the path, defaults to
+     * cirlce
+     */
+    markerStart?: boolean | MarkerShape;
+    /**
+     * the marker shape to use at the middle of the path, defaults to circle
+     */
+    markerMid?: boolean | MarkerShape;
+    /**
+     * the marker shape to use at the end of the path, defaults to circle
+     */
+    markerEnd?: boolean | MarkerShape;
+    /**
+     * shorthand for setting all markers
+     */
+    marker?: boolean | MarkerShape;
+    /**
+     * path string
+     */
+    d: string;
+    style: string;
+    startOffset: string;
+    textStyle: string;
+    textStyleClass?: string | null;
+    text: string;
+    transform: string;
+    color: string;
+    strokeWidth: ConstantAccessor<number>;
+    mark: Mark<BaseMarkProps>;
+    scales: PlotScales;
+};
+/** Helper component for paths with markers and optional text along the path. */
+declare const MarkerPath: import("svelte").Component<MarkerPathProps, {}, "">;
+type MarkerPath = ReturnType<typeof MarkerPath>;
+export default MarkerPath;