layerchart 0.6.5 → 0.6.6

package/components/Points.svelte

@@ -2,10 +2,11 @@
 import Circle from './Circle.svelte';
 import { isScaleBand } from '../utils/scales';
 const context = getContext('LayerCake');
-const { data, xGet, yGet, xScale, yScale, config } = context;
+const { data, xGet, y, yGet, xScale, yScale, rGet, config } = context;
 export let r = 5;
 export let offsetX = undefined;
 export let offsetY = undefined;
+export let color = 'var(--color-blue-500)';
 function getOffset(value, offset, scale) {
     if (typeof offset === 'function') {
         return offset(value, context);
@@ -20,6 +21,18 @@ function getOffset(value, offset, scale) {
         return 0;
     }
 }
+function getColor(item, index) {
+    if (typeof color === 'function') {
+        return color({ value: $y(item), item, index });
+    }
+    else if ($config.r) {
+        // console.log({ item, value: $rGet(item), scale: $rGet.domain() });
+        return $rGet(item);
+    }
+    else {
+        return color;
+    }
+}
 $: points = $data.flatMap((d) => {
     if (Array.isArray($config.x)) {
         /*
@@ -29,7 +42,8 @@ $: points = $data.flatMap((d) => {
         return $xGet(d).map((x) => {
             return {
                 x: x + getOffset(x, offsetX, $xScale),
-                y: $yGet(d) + getOffset($yGet(d), offsetY, $yScale)
+                y: $yGet(d) + getOffset($yGet(d), offsetY, $yScale),
+                data: d
             };
         });
     }
@@ -41,7 +55,8 @@ $: points = $data.flatMap((d) => {
         return $yGet(d).map((y) => {
             return {
                 x: $xGet(d) + getOffset($xGet(d), offsetX, $xScale),
-                y: y + getOffset(y, offsetY, $yScale)
+                y: y + getOffset(y, offsetY, $yScale),
+                data: d
             };
         });
     }
@@ -52,7 +67,8 @@ $: points = $data.flatMap((d) => {
         */
         return {
             x: $xGet(d) + getOffset($xGet(d), offsetX, $xScale),
-            y: $yGet(d) + getOffset($yGet(d), offsetY, $yScale)
+            y: $yGet(d) + getOffset($yGet(d), offsetY, $yScale),
+            data: d
         };
     }
 });
@@ -60,8 +76,8 @@ $: points = $data.flatMap((d) => {
 
 <slot {points}>
 	<g class="point-group">
-		{#each points as point}
-			<Circle cx={point.x} cy={point.y} {r} {...$$restProps} />
+		{#each points as point, index}
+			<Circle cx={point.x} cy={point.y} {r} fill={getColor(point.data, index)} {...$$restProps} />
 		{/each}
 	</g>
 </slot>

package/components/Points.svelte.d.ts

@@ -5,6 +5,11 @@ declare const __propDef: {
         r?: number;
         offsetX?: number | ((value: number, context: any) => number);
         offsetY?: number | ((value: number, context: any) => number);
+        color?: string | ((obj: {
+            value: any;
+            item: any;
+            index: number;
+        }) => string);
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Tooltip.svelte

@@ -2,12 +2,27 @@
 import { spring } from 'svelte/motion';
 import { fade } from 'svelte/transition';
 import { writable } from 'svelte/store';
-import { bisector } from 'd3-array';
+import { bisector, max, min } from 'd3-array';
+import { Delaunay } from 'd3-delaunay';
+import { quadtree as d3Quadtree } from 'd3-quadtree';
 import { Svg, Html } from './Chart.svelte';
+import ChartClipPath from './ChartClipPath.svelte';
 import { localPoint } from '../utils/event';
-import { isScaleBand, scaleBandInvert } from '../utils/scales';
+import { isScaleBand, scaleInvert } from '../utils/scales';
+import { quadtreeRects } from '../utils/quadtree';
 const dispatch = createEventDispatcher();
-const { flatData, x, xScale, xGet, yScale, yGet, width, height, padding } = getContext('LayerCake');
+const { flatData, x, xScale, xGet, xRange, yScale, yGet, yRange, width, height, padding } = getContext('LayerCake');
+/*
+    TODO: Defaults to consider (if possible to detect scale type, which might not be possible)
+    - scaleTime / scaleLinear: bisect
+    - scaleTime / scaleLinear (multi/stack): bisect
+    - scaleTime / scaleBand: bisect (or band)
+    - scaleTime (multi) / scaleBand: bounds (or possible band if not overlapping)
+    - scaleBand, scaleLinear: band (or bounds)
+    - scaleBand, scaleLinear: band (or bounds) - multiple (overlapping) bars
+    - scaleLinear, scaleLinear: voronoi (or quadtree)
+*/
+export let mode = 'bisect';
 export let snapToDataX = false;
 export let snapToDataY = false;
 export let findTooltipData = 'closest';
@@ -15,6 +30,8 @@ export let topOffset = 10;
 export let leftOffset = 10;
 export let contained = 'container'; // TODO: Support 'window' using getBoundingClientRect()
 export let animate = true;
+export let radius = Infinity;
+export let debug = false;
 let tooltip = null;
 let tooltipWidth = 0;
 let tooltipHeight = 0;
@@ -40,56 +57,63 @@ $: if (tooltip) {
         $left = tooltip.left + leftOffset;
     }
 }
-function handleTooltip(event) {
+function handleTooltip(event, tooltipData) {
     const point = localPoint(event.target, event);
     const localX = point?.x ?? 0;
     const localY = point?.y ?? 0;
-    let tooltipData;
-    if (isScaleBand($xScale)) {
-        // `x` value at mouse/touch coordinate
-        const valueAtPoint = scaleBandInvert($xScale)(localX);
-        tooltipData = $flatData.find((d) => $x(d) === valueAtPoint);
-    }
-    else {
-        // `x` value at mouse/touch coordinate
-        const valueAtPoint = $xScale.invert(localX);
-        const bisectX = bisector((d) => {
-            const value = $x(d);
-            if (Array.isArray(value)) {
-                // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
-                // Using first value.  Consider using average, max, etc
-                // const midpoint = new Date((value[1].valueOf() + value[0].getTime()) / 2);
-                // return midpoint;
-                return value[0];
+    // If tooltipData not provided already (voronoi, etc), attempt to find it
+    if (tooltipData == null) {
+        if (mode === 'quadtree') {
+            tooltipData = quadtree.find(localX, localY, radius);
+        }
+        else {
+            // `x` value at mouse/touch coordinate
+            const valueAtPoint = scaleInvert($xScale, localX);
+            if (isScaleBand($xScale)) {
+                tooltipData = $flatData.find((d) => $x(d) === valueAtPoint);
             }
             else {
-                return value;
-            }
-        }).left;
-        const index = bisectX($flatData, valueAtPoint, 1);
-        const data0 = $flatData[index - 1];
-        const data1 = $flatData[index];
-        switch (findTooltipData) {
-            case 'closest':
-                if (data1 === undefined) {
-                    tooltipData = data0;
+                // continuous scale (linear, time, etc).  Use bisector to find closest data to mouse location
+                const bisectX = bisector((d) => {
+                    const value = $x(d);
+                    if (Array.isArray(value)) {
+                        // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+                        // Using first value.  Consider using average, max, etc
+                        // const midpoint = new Date((value[1].valueOf() + value[0].getTime()) / 2);
+                        // return midpoint;
+                        return value[0];
+                    }
+                    else {
+                        return value;
+                    }
+                }).left;
+                const index = bisectX($flatData, valueAtPoint, 1);
+                const data0 = $flatData[index - 1];
+                const data1 = $flatData[index];
+                switch (findTooltipData) {
+                    case 'closest':
+                        if (data1 === undefined) {
+                            tooltipData = data0;
+                        }
+                        else if (data0 === undefined) {
+                            tooltipData = data1;
+                        }
+                        else {
+                            tooltipData =
+                                Number(valueAtPoint) - Number($x(data0)) >
+                                    Number($x(data1)) - Number(valueAtPoint)
+                                    ? data1
+                                    : data0;
+                        }
+                        break;
+                    case 'left':
+                        tooltipData = data0;
+                        break;
+                    case 'right':
+                    default:
+                        tooltipData = data1;
                 }
-                else if (data0 === undefined) {
-                    tooltipData = data1;
-                }
-                else {
-                    tooltipData =
-                        Number(valueAtPoint) - Number($x(data0)) > Number($x(data1)) - Number(valueAtPoint)
-                            ? data1
-                            : data0;
-                }
-                break;
-            case 'left':
-                tooltipData = data0;
-                break;
-            case 'right':
-            default:
-                tooltipData = data1;
+            }
         }
     }
     if (tooltipData) {
@@ -99,26 +123,107 @@ function handleTooltip(event) {
             data: tooltipData
         };
     }
+    else {
+        // Hide tooltip if unable to locate
+        tooltip = null;
+    }
 }
 function hideTooltip(event) {
     tooltip = null;
 }
+let points;
+let voronoi;
+$: if (mode === 'voronoi') {
+    points = $flatData.map((d) => {
+        const xValue = $xGet(d);
+        const yValue = $yGet(d);
+        const x = Array.isArray(xValue) ? xValue[0] : xValue;
+        const y = Array.isArray(yValue) ? yValue[0] : yValue;
+        const point = [x, y];
+        point.data = d;
+        return point;
+    });
+    voronoi = Delaunay.from(points).voronoi([0, 0, $width, $height]);
+}
+let quadtree;
+$: if (mode === 'quadtree') {
+    quadtree = d3Quadtree()
+        .extent([
+        [0, 0],
+        [$width, $height]
+    ])
+        .x((d) => {
+        const value = $xGet(d);
+        if (Array.isArray(value)) {
+            // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+            // Using first value.  Consider using average, max, etc
+            // const midpoint = new Date((value[1].valueOf() + value[0].getTime()) / 2);
+            // return midpoint;
+            return value[0];
+        }
+        else {
+            return value;
+        }
+    })
+        .y((d) => {
+        const value = $yGet(d);
+        if (Array.isArray(value)) {
+            // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
+            // Using first value.  Consider using average, max, etc
+            // const midpoint = new Date((value[1].valueOf() + value[0].getTime()) / 2);
+            // return midpoint;
+            return value[0];
+        }
+        else {
+            return value;
+        }
+    })
+        .addAll($flatData);
+}
+let rects = [];
+$: if (mode === 'bounds' || mode === 'band') {
+    rects = $flatData.map((d) => {
+        const xValue = $xGet(d);
+        const yValue = $yGet(d);
+        const x = Array.isArray(xValue) ? min(xValue) : xValue;
+        const y = Array.isArray(yValue) ? max(yValue) : yValue;
+        const xOffset = isScaleBand($xScale) ? ($xScale.padding() * $xScale.step()) / 2 : 0;
+        const yOffset = isScaleBand($yScale) ? ($yScale.padding() * $yScale.step()) / 2 : 0;
+        const fullWidth = max($xRange) - min($xRange);
+        const fullHeight = max($yRange) - min($yRange);
+        if (mode === 'band') {
+            // full band width/height regardless of value
+            return {
+                x: isScaleBand($xScale) ? x - xOffset : min($xRange),
+                y: isScaleBand($yScale) ? y - yOffset : min($yRange),
+                width: isScaleBand($xScale) ? $xScale.step() : fullWidth,
+                height: isScaleBand($yScale) ? $yScale.step() : fullHeight,
+                data: d
+            };
+        }
+        else if (mode === 'bounds') {
+            return {
+                x: isScaleBand($xScale) || Array.isArray(xValue) ? x - xOffset : min($xRange),
+                // y: isScaleBand($yScale) || Array.isArray(yValue) ? y - yOffset : min($yRange),
+                y: y - yOffset,
+                width: Array.isArray(xValue)
+                    ? xValue[1] - xValue[0]
+                    : isScaleBand($xScale)
+                        ? $xScale.step()
+                        : min($xRange) + x,
+                height: Array.isArray(yValue)
+                    ? yValue[1] - yValue[0]
+                    : isScaleBand($yScale)
+                        ? $yScale.step()
+                        : max($yRange) - y,
+                data: d
+            };
+        }
+    });
+    // console.log({ rects });
+}
 </script>
 
-<Html>
-	<div
-		class="absolute"
-		style="width: {$width}px; height: {$height}px; background: _red; z-index: 9999"
-		on:touchstart={handleTooltip}
-		on:touchmove={handleTooltip}
-		on:mousemove={handleTooltip}
-		on:mouseleave={hideTooltip}
-		on:click={(e) => {
-			dispatch('click', { data: tooltip?.data });
-		}}
-	/>
-</Html>
-
 {#if tooltip}
 	<Html>
 		<div
@@ -140,3 +245,69 @@ function hideTooltip(event) {
 		<slot name="highlight" data={tooltip?.data} />
 	</Svg>
 {/if}
+
+{#if mode === 'bisect' || mode === 'quadtree'}
+	<Html>
+		<div
+			class="absolute"
+			style="width: {$width}px; height: {$height}px; background: _red; z-index: 9999"
+			on:touchstart={handleTooltip}
+			on:touchmove={handleTooltip}
+			on:mousemove={handleTooltip}
+			on:mouseleave={hideTooltip}
+			on:click={(e) => {
+				dispatch('click', { data: tooltip?.data });
+			}}
+		/>
+	</Html>
+{:else if mode === 'voronoi'}
+	<Svg>
+		{#each points as point, i}
+			<g class="tooltip-voronoi">
+				<path
+					d={voronoi.renderCell(i)}
+					style:fill="transparent"
+					style:stroke={debug ? 'red' : 'transparent'}
+					on:mousemove={(e) => handleTooltip(e, point.data)}
+					on:mouseleave={hideTooltip}
+				/>
+			</g>
+		{/each}
+	</Svg>
+{:else if mode === 'bounds' || mode === 'band'}
+	<Svg>
+		<g class="tooltip-rects">
+			{#each rects as rect}
+				<rect
+					x={rect.x}
+					y={rect.y}
+					width={rect.width}
+					height={rect.height}
+					style:fill="transparent"
+					style:stroke={debug ? 'red' : 'transparent'}
+					on:mousemove={(e) => handleTooltip(e, rect.data)}
+					on:mouseleave={hideTooltip}
+				/>
+			{/each}
+		</g>
+	</Svg>
+{/if}
+
+{#if mode === 'quadtree' && debug}
+	<Svg>
+		<ChartClipPath>
+			<g class="tooltip-quadtree">
+				{#each quadtreeRects(quadtree, false) as rect}
+					<rect
+						x={rect.x}
+						y={rect.y}
+						width={rect.width}
+						height={rect.height}
+						stroke="red"
+						fill="none"
+					/>
+				{/each}
+			</g>
+		</ChartClipPath>
+	</Svg>
+{/if}

package/components/Tooltip.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        mode?: 'bisect' | 'voronoi' | 'quadtree' | 'bounds' | 'band';
         snapToDataX?: boolean;
         snapToDataY?: boolean;
         findTooltipData?: 'closest' | 'left' | 'right';
@@ -8,6 +9,8 @@ declare const __propDef: {
         leftOffset?: number;
         contained?: 'container' | false;
         animate?: boolean;
+        radius?: number;
+        debug?: boolean;
     };
     events: {
         click: CustomEvent<{

package/package.json

@@ -3,15 +3,17 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "devDependencies": {
     "@rollup/plugin-dsv": "^2.0.3",
     "@sveltejs/adapter-vercel": "^1.0.0-next.58",
     "@sveltejs/kit": "^1.0.0-next.350",
     "@tailwindcss/typography": "^0.5.2",
     "@types/d3-array": "^3.0.3",
+    "@types/d3-delaunay": "^6.0.1",
     "@types/d3-dsv": "^3.0.0",
     "@types/d3-hierarchy": "^3.1.0",
+    "@types/d3-quadtree": "^3.0.2",
     "@types/d3-sankey": "^0.11.2",
     "@types/d3-scale": "^4.0.2",
     "@types/d3-shape": "^3.1.0",
@@ -35,9 +37,11 @@
   "dependencies": {
     "@mdi/js": "^6.7.96",
     "d3-array": "^3.1.6",
+    "d3-delaunay": "^6.0.2",
     "d3-dsv": "^3.0.1",
     "d3-hierarchy": "^3.1.2",
     "d3-interpolate-path": "^2.2.3",
+    "d3-quadtree": "^3.0.1",
     "d3-sankey": "^0.12.3",
     "d3-scale": "^4.0.2",
     "d3-scale-chromatic": "^3.0.0",
@@ -80,7 +84,6 @@
     "./components/RectClipPath.svelte": "./components/RectClipPath.svelte",
     "./components/Sankey.svelte": "./components/Sankey.svelte",
     "./components/Text.svelte": "./components/Text.svelte",
-    "./components/Text2.svelte": "./components/Text2.svelte",
     "./components/Threshold.svelte": "./components/Threshold.svelte",
     "./components/Tooltip.svelte": "./components/Tooltip.svelte",
     "./components/Tree.svelte": "./components/Tree.svelte",
@@ -103,6 +106,7 @@
     "./utils/math": "./utils/math.js",
     "./utils/path": "./utils/path.js",
     "./utils/pivot": "./utils/pivot.js",
+    "./utils/quadtree": "./utils/quadtree.js",
     "./utils/scales": "./utils/scales.js",
     "./utils/stack": "./utils/stack.js",
     "./utils/string": "./utils/string.js",

package/utils/event.js

@@ -1,5 +1,7 @@
 import { isSVGElement, isSVGGraphicsElement, isSVGSVGElement, isTouchEvent } from 'svelte-ux/types/typeGuards';
 // See: https://github.com/airbnb/visx/blob/master/packages/visx-event/src/localPointGeneric.ts
+// TODO: Matches event.layerX/Y, but are deprecated (https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/layerX).
+//       Similar and could be replaced by event.offsetX/Y (but not identical)
 export function localPoint(node, event) {
     if (!node || !event)
         return null;

package/utils/genData.d.ts

@@ -17,6 +17,17 @@ export declare function createDateSeries(options: {
 }): {
     date: Date;
 }[];
+export declare function createTimeSeries(options: {
+    count?: number;
+    min: number;
+    max: number;
+    keys: Array<string>;
+    value: 'number' | 'integer';
+}): {
+    name: string;
+    startDate: Date;
+    endDate: Date;
+}[];
 export declare const wideData: {
     year: string;
     apples: number;

package/utils/genData.js

@@ -1,4 +1,4 @@
-import { startOfToday, subDays } from 'date-fns';
+import { addMinutes, startOfDay, startOfToday, subDays } from 'date-fns';
 import { degreesToRadians, radiansToDegrees } from './math';
 /**
  * Get random number between min (inclusive) and max (exclusive)
@@ -34,6 +34,30 @@ export function createDateSeries(options) {
         };
     });
 }
+export function createTimeSeries(options) {
+    const count = options.count ?? 10;
+    const min = options.min;
+    const max = options.max;
+    const keys = options.keys ?? ['value'];
+    let lastStartDate = startOfDay(new Date());
+    const timeSeries = Array.from({ length: count }).map((_, i) => {
+        const startDate = addMinutes(lastStartDate, getRandomInteger(0, 60));
+        const endDate = addMinutes(startDate, getRandomInteger(5, 60));
+        lastStartDate = startDate;
+        return {
+            name: `item ${i + 1}`,
+            startDate,
+            endDate,
+            ...Object.fromEntries(keys.map((key) => {
+                return [
+                    key,
+                    options.value === 'integer' ? getRandomInteger(min, max) : getRandomNumber(min, max)
+                ];
+            }))
+        };
+    });
+    return timeSeries;
+}
 export const wideData = [
     { year: '2019', apples: 3840, bananas: 1920, cherries: 960, dates: 400 },
     { year: '2018', apples: 1600, bananas: 1440, cherries: 960, dates: 400 },

package/utils/quadtree.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Transverse guadtree and generate rect dimensions
+ */
+export declare function quadtreeRects(quadtree: any, showLeaves?: boolean): any[];

package/utils/quadtree.js

@@ -0,0 +1,12 @@
+/**
+ * Transverse guadtree and generate rect dimensions
+ */
+export function quadtreeRects(quadtree, showLeaves = true) {
+    const rects = [];
+    quadtree.visit((node, x0, y0, x1, y1) => {
+        if (showLeaves || Array.isArray(node)) {
+            rects.push({ x: x0, y: y0, width: x1 - x0, height: y1 - y0 });
+        }
+    });
+    return rects;
+}

package/utils/scales.d.ts

@@ -10,6 +10,11 @@ import { MotionOptions } from '../stores/motionStore';
  */
 export declare function scaleBandInvert(scale: any): (value: any) => any;
 export declare function isScaleBand(scale: any): boolean;
+/**
+ *  Generic way to invert a scale value, handling scaleBand and continuous scales (linear, time, etc).
+ *  Useful to map mouse event location (x,y) to domain value
+ */
+export declare function scaleInvert(scale: any, value: number): any;
 /**
  * Animate d3-scale as domain and/or range are updated using tweened store
  */

package/utils/scales.js

@@ -22,6 +22,18 @@ export function scaleBandInvert(scale) {
 export function isScaleBand(scale) {
     return typeof scale.bandwidth === 'function';
 }
+/**
+ *  Generic way to invert a scale value, handling scaleBand and continuous scales (linear, time, etc).
+ *  Useful to map mouse event location (x,y) to domain value
+ */
+export function scaleInvert(scale, value) {
+    if (isScaleBand(scale)) {
+        return scaleBandInvert(scale)(value);
+    }
+    else {
+        return scale.invert(value);
+    }
+}
 /**
  * Animate d3-scale as domain and/or range are updated using tweened store
  */

package/components/Text2.svelte

@@ -1,43 +0,0 @@
-<script>import '$lib/utils/string';
-/*
-TODO:
-  - [ ] Handle styled text (use <slot /> to measure?)
-        - [ ] Simplify by using `alignment-baseline` / `dominant-baseline`, rework multiline or drop support, etc
-          - https://svelte.dev/repl/f12d3003313a43ba8a0be53e5786f1c7?version=3.44.3
-            - https://observablehq.com/@neocartocnrs/cheat-sheet-on-texts-in-svg
-
-Reference:
-- https://bl.ocks.org/mbostock/7555321
-- https://github.com/airbnb/visx/blob/master/packages/visx-text/src/Text.tsx
-  - https://airbnb.io/visx/text
-  - https://github.com/airbnb/visx/blob/master/packages/visx-demo/src/pages/text.tsx
-*/
-/** x position of the text. */
-export let x = 0;
-/** y position of the text. */
-export let y = 0;
-/** dx offset of the text. */
-export let dx = 0;
-/** dy offset of the text. */
-export let dy = 0;
-/** Horizontal text anchor. */
-export let textAnchor = 'start';
-/** Vertical text anchor. */
-export let verticalAnchor = 'end'; // default SVG behavior
-/** Rotational angle of the text. */
-export let rotate = undefined;
-</script>
-
-<!-- overflow: visible;   allow contents to be shown outside element -->
-<!-- paint-order: stroke; support stroke outlining text  -->
-<!-- <svg x={dx} y={dy} style="overflow: visible; paint-order: stroke;">
-	{#if isValidXOrY(x) && isValidXOrY(y)}
-		<text {x} {y} {transform} text-anchor={textAnchor} {...$$restProps}>
-			{#each wordsByLines as line, index}
-				<tspan {x} dy={index === 0 ? startDy : lineHeight}>
-					{line.words.join(' ')}
-				</tspan>
-			{/each}
-		</text>
-	{/if}
-</svg> -->

package/components/Text2.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        /** x position of the text. */ x?: string | number;
-        /** y position of the text. */ y?: string | number;
-        /** dx offset of the text. */ dx?: string | number;
-        /** dy offset of the text. */ dy?: string | number;
-        /** Horizontal text anchor. */ textAnchor?: 'start' | 'middle' | 'end' | 'inherit';
-        /** Vertical text anchor. */ verticalAnchor?: 'start' | 'middle' | 'end' | 'inherit';
-        /** Rotational angle of the text. */ rotate?: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type Text2Props = typeof __propDef.props;
-export declare type Text2Events = typeof __propDef.events;
-export declare type Text2Slots = typeof __propDef.slots;
-export default class Text2 extends SvelteComponentTyped<Text2Props, Text2Events, Text2Slots> {
-}
-export {};