layerchart 2.0.0-next.60 → 2.0.0-next.62

package/dist/components/ArcLabel/ArcLabel.base.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+  import type { ArcLabelProps } from './ArcLabel.shared.svelte.js';
+
+  export type ArcLabelBaseLayerComponents = {
+    Path: Component<any>;
+    Text: Component<any>;
+  };
+
+  export type ArcLabelBaseProps = ArcLabelProps & ArcLabelBaseLayerComponents;
+</script>
+
+<script lang="ts">
+  import { ArcLabelState } from './ArcLabel.shared.svelte.js';
+
+  let {
+    Path,
+    Text,
+    getArcTextProps,
+    centroid,
+    startAngle,
+    endAngle,
+    innerRadius,
+    outerRadius,
+    placement = 'centroid',
+    startOffset,
+    outerPadding,
+    calloutLineLength = 16,
+    calloutLabelOffset = 12,
+    calloutPadding = 4,
+    line,
+    offset = 0,
+    ...restProps
+  }: ArcLabelBaseProps = $props();
+
+  const c = new ArcLabelState(
+    () =>
+      ({
+        getArcTextProps,
+        centroid,
+        startAngle,
+        endAngle,
+        innerRadius,
+        outerRadius,
+        placement,
+        startOffset,
+        outerPadding,
+        calloutLineLength,
+        calloutLabelOffset,
+        calloutPadding,
+        line,
+        offset,
+      }) as ArcLabelProps
+  );
+</script>
+
+{#if placement === 'callout' && c.calloutGeometry}
+  <Path pathData={c.calloutGeometry.pathData} {...line} />
+{/if}
+
+<Text {...c.arcTextProps} {...restProps} />

package/dist/components/ArcLabel/ArcLabel.base.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Component } from 'svelte';
+import type { ArcLabelProps } from './ArcLabel.shared.svelte.js';
+export type ArcLabelBaseLayerComponents = {
+    Path: Component<any>;
+    Text: Component<any>;
+};
+export type ArcLabelBaseProps = ArcLabelProps & ArcLabelBaseLayerComponents;
+declare const ArcLabel: Component<ArcLabelBaseProps, {}, "">;
+type ArcLabel = ReturnType<typeof ArcLabel>;
+export default ArcLabel;

package/dist/components/ArcLabel/ArcLabel.canvas.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" module>
+  export type {
+    ArcLabelProps,
+    ArcLabelConfig,
+    ArcLabelPlacement,
+  } from './ArcLabel.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import ArcLabelBase from './ArcLabel.base.svelte';
+  import Path from '../Path/Path.canvas.svelte';
+  import Text from '../Text/Text.canvas.svelte';
+
+  import type { ArcLabelProps } from './ArcLabel.shared.svelte.js';
+
+  let props: ArcLabelProps = $props();
+</script>
+
+<ArcLabelBase {Path} {Text} {...props} />

package/dist/components/ArcLabel/ArcLabel.canvas.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { ArcLabelProps, ArcLabelConfig, ArcLabelPlacement, } from './ArcLabel.shared.svelte.js';
+import type { ArcLabelProps } from './ArcLabel.shared.svelte.js';
+declare const ArcLabel: import("svelte").Component<ArcLabelProps, {}, "">;
+type ArcLabel = ReturnType<typeof ArcLabel>;
+export default ArcLabel;

package/dist/components/ArcLabel/ArcLabel.shared.svelte.d.ts

@@ -0,0 +1,90 @@
+import type { PathProps } from '../Path/Path.shared.svelte.js';
+import type { TextProps } from '../Text/Text.shared.svelte.js';
+import type { GetArcTextProps, ArcTextOptions } from '../../utils/arcText.svelte.js';
+/**
+ * Placement options for `ArcLabel`.
+ * - `centroid`: at the arc centroid (horizontal text)
+ * - `centroid-rotated`: at the arc centroid, rotated to follow the arc tangent
+ * - `centroid-radial`: at the arc centroid, rotated to read radially (center → outside)
+ * - `inner` / `middle` / `outer`: along the inner / middle / outer arc path
+ * - `callout`: outside the arc connected by a polyline with a bend
+ */
+export type ArcLabelPlacement = 'centroid' | 'centroid-rotated' | 'centroid-radial' | 'inner' | 'middle' | 'outer' | 'callout';
+export type ArcLabelConfig = {
+    /** @default 'centroid' */
+    placement?: ArcLabelPlacement;
+    /** @default 16 */
+    calloutLineLength?: number;
+    /** @default 12 */
+    calloutLabelOffset?: number;
+    /** @default 4 */
+    calloutPadding?: number;
+    /** Props applied to the leader line `<Path>` when using `callout` placement. */
+    line?: Omit<PathProps, 'pathData'>;
+    /** Radial offset for the label, interpreted per-placement. @default 0 */
+    offset?: number;
+} & ArcTextOptions & Omit<TextProps, 'path'>;
+export type ArcLabelProps = {
+    /** Function from `Arc` children snippet for `inner`/`middle`/`outer` placements. */
+    getArcTextProps?: GetArcTextProps;
+    /** Centroid `[x, y]` of the arc (from `Arc` children snippet) */
+    centroid?: [number, number];
+    /** Arc start angle in radians (from `Arc` children snippet) */
+    startAngle?: number;
+    /** Arc end angle in radians (from `Arc` children snippet) */
+    endAngle?: number;
+    /** Arc inner radius (from `Arc` children snippet) */
+    innerRadius?: number;
+    /** Arc outer radius (from `Arc` children snippet) */
+    outerRadius?: number;
+} & ArcLabelConfig;
+export type ArcLabelCalloutGeometry = {
+    pathData: string;
+    labelX: number;
+    labelY: number;
+    textAnchor: 'start' | 'end';
+};
+/**
+ * Reactive state shared by every per-layer ArcLabel variant. Holds derived
+ * geometry (callout path, offset centroid, rotation) and resolved text props.
+ */
+export declare class ArcLabelState {
+    #private;
+    constructor(getProps: () => ArcLabelProps);
+    midAngle: number;
+    offsetCentroid: [number, number] | undefined;
+    effectiveOuterPadding: number;
+    effectiveInnerPadding: number;
+    effectiveCalloutLineLength: number;
+    centroidRotation: number;
+    calloutGeometry: ArcLabelCalloutGeometry | null;
+    arcTextProps: {
+        value?: string | number | ((d: any) => string | number);
+        segments?: import("../Text/Text.shared.svelte.js").TextSegment[];
+        width?: number;
+        x?: string | number | ((d: any) => any);
+        initialX?: string | number;
+        y?: string | number | ((d: any) => any);
+        initialY?: string | number;
+        dx?: string | number;
+        dy?: string | number;
+        lineHeight?: string;
+        capHeight?: string;
+        scaleToFit?: boolean;
+        textAnchor?: "start" | "middle" | "end" | "inherit";
+        verticalAnchor?: "start" | "middle" | "end" | "inherit";
+        dominantBaseline?: "auto" | "text-before-edge" | "text-after-edge" | "middle" | "hanging" | "ideographic" | "mathematical";
+        rotate?: number;
+        svgRef?: SVGElement;
+        svgProps?: Omit<import("svelte/elements").SVGAttributes<SVGElement>, "children">;
+        ref?: SVGTextElement;
+        format?: import("@layerstack/utils").FormatType | import("@layerstack/utils").FormatConfig;
+        motion?: import("../../utils/motion.svelte.js").MotionProp;
+        truncate?: boolean | import("../Text/Text.shared.svelte.js").TruncateTextOptions;
+        pathId?: string;
+        path?: string | null;
+        startOffset?: string | number;
+        data?: any[];
+        key?: (d: any, index: number) => any;
+    } & import("../../index.js").DataDrivenStyleProps & import("../../index.js").Without<import("svelte/elements").SVGAttributes<SVGTextElement>, import("../Text/Text.shared.svelte.js").TextPropsWithoutHTML>;
+}

package/dist/components/ArcLabel/ArcLabel.shared.svelte.js

@@ -0,0 +1,124 @@
+import { radiansToDegrees } from '../../utils/math.js';
+/**
+ * Reactive state shared by every per-layer ArcLabel variant. Holds derived
+ * geometry (callout path, offset centroid, rotation) and resolved text props.
+ */
+export class ArcLabelState {
+    #getProps = () => ({});
+    constructor(getProps) {
+        this.#getProps = getProps;
+    }
+    midAngle = $derived.by(() => {
+        const { startAngle, endAngle } = this.#getProps();
+        return startAngle != null && endAngle != null ? (startAngle + endAngle) / 2 : 0;
+    });
+    offsetCentroid = $derived.by(() => {
+        const { centroid, offset = 0, startAngle, endAngle } = this.#getProps();
+        if (!centroid)
+            return centroid;
+        if (!offset || startAngle == null || endAngle == null)
+            return centroid;
+        const angle = this.midAngle - Math.PI / 2;
+        return [centroid[0] + Math.cos(angle) * offset, centroid[1] + Math.sin(angle) * offset];
+    });
+    effectiveOuterPadding = $derived.by(() => {
+        const props = this.#getProps();
+        const base = props.outerPadding ?? 0;
+        if (props.placement === 'outer' || props.placement === 'middle') {
+            return base + (props.offset ?? 0);
+        }
+        return base;
+    });
+    effectiveInnerPadding = $derived.by(() => {
+        const props = this.#getProps();
+        if (props.placement === 'inner' || props.placement === 'middle')
+            return props.offset ?? 0;
+        return 0;
+    });
+    effectiveCalloutLineLength = $derived((this.#getProps().calloutLineLength ?? 16) + (this.#getProps().offset ?? 0));
+    centroidRotation = $derived.by(() => {
+        const { startAngle, endAngle, placement } = this.#getProps();
+        if (startAngle == null || endAngle == null)
+            return 0;
+        let deg = radiansToDegrees(this.midAngle);
+        if (placement === 'centroid-radial') {
+            deg = deg - 90;
+        }
+        else if (placement !== 'centroid-rotated') {
+            return 0;
+        }
+        deg = ((deg + 180) % 360) - 180;
+        if (deg > 90)
+            deg -= 180;
+        else if (deg < -90)
+            deg += 180;
+        return deg;
+    });
+    calloutGeometry = $derived.by(() => {
+        const { placement, startAngle, endAngle, outerRadius, calloutLabelOffset = 12, calloutPadding = 4, } = this.#getProps();
+        if (placement !== 'callout' || startAngle == null || endAngle == null || outerRadius == null) {
+            return null;
+        }
+        const angle = this.midAngle - Math.PI / 2;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const x0 = cos * outerRadius;
+        const y0 = sin * outerRadius;
+        const bendRadius = outerRadius + this.effectiveCalloutLineLength;
+        const x1 = cos * bendRadius;
+        const y1 = sin * bendRadius;
+        const onRightSide = cos >= 0;
+        const x2 = x1 + (onRightSide ? calloutLabelOffset : -calloutLabelOffset);
+        const y2 = y1;
+        return {
+            pathData: `M${x0},${y0}L${x1},${y1}L${x2},${y2}`,
+            labelX: x2 + (onRightSide ? calloutPadding : -calloutPadding),
+            labelY: y2,
+            textAnchor: onRightSide ? 'start' : 'end',
+        };
+    });
+    arcTextProps = $derived.by(() => {
+        const props = this.#getProps();
+        const { placement = 'centroid', startOffset, outerPadding, getArcTextProps } = props;
+        if (placement === 'centroid') {
+            if (this.offsetCentroid) {
+                return {
+                    x: this.offsetCentroid[0],
+                    y: this.offsetCentroid[1],
+                    textAnchor: 'middle',
+                    verticalAnchor: 'middle',
+                };
+            }
+            return getArcTextProps?.('centroid', { startOffset, outerPadding }) ?? {};
+        }
+        if (placement === 'centroid-rotated' || placement === 'centroid-radial') {
+            if (this.offsetCentroid) {
+                return {
+                    x: this.offsetCentroid[0],
+                    y: this.offsetCentroid[1],
+                    textAnchor: 'middle',
+                    verticalAnchor: 'middle',
+                    rotate: this.centroidRotation,
+                };
+            }
+            return getArcTextProps?.('centroid', { startOffset, outerPadding }) ?? {};
+        }
+        if (placement === 'callout') {
+            const g = this.calloutGeometry;
+            if (g) {
+                return {
+                    x: g.labelX,
+                    y: g.labelY,
+                    textAnchor: g.textAnchor,
+                    verticalAnchor: 'middle',
+                };
+            }
+            return {};
+        }
+        return (getArcTextProps?.(placement, {
+            startOffset,
+            outerPadding: this.effectiveOuterPadding,
+            innerPadding: this.effectiveInnerPadding,
+        }) ?? {});
+    });
+}

package/dist/components/ArcLabel/ArcLabel.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  export type {
+    ArcLabelProps,
+    ArcLabelConfig,
+    ArcLabelPlacement,
+  } from './ArcLabel.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import { getLayerContext } from '../../contexts/layer.js';
+  import ArcLabelSvg from './ArcLabel.svg.svelte';
+  import ArcLabelCanvas from './ArcLabel.canvas.svelte';
+  import type { ArcLabelProps } from './ArcLabel.shared.svelte.js';
+
+  const layerCtx = getLayerContext();
+
+  let props: ArcLabelProps = $props();
+</script>
+
+{#if layerCtx === 'svg'}
+  <ArcLabelSvg {...props} />
+{:else if layerCtx === 'canvas'}
+  <ArcLabelCanvas {...props} />
+{/if}

package/dist/components/ArcLabel/ArcLabel.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { ArcLabelProps, ArcLabelConfig, ArcLabelPlacement, } from './ArcLabel.shared.svelte.js';
+import type { ArcLabelProps } from './ArcLabel.shared.svelte.js';
+declare const ArcLabel: import("svelte").Component<ArcLabelProps, {}, "">;
+type ArcLabel = ReturnType<typeof ArcLabel>;
+export default ArcLabel;

package/dist/components/{ArcLabel.svelte.test.js → ArcLabel/ArcLabel.svelte.test.js}

@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest';
 import { render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
-import TestHarness, { componentTestId } from './tests/TestHarness.svelte';
-import Arc from './Arc.svelte';
+import TestHarness, { componentTestId } from '../tests/TestHarness.svelte';
+import Arc from '../Arc/Arc.svelte';
 import ArcLabel from './ArcLabel.svelte';
 const defaultArcProps = {
     fill: 'currentColor',

package/dist/components/ArcLabel/ArcLabel.svg.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" module>
+  export type {
+    ArcLabelProps,
+    ArcLabelConfig,
+    ArcLabelPlacement,
+  } from './ArcLabel.shared.svelte.js';
+</script>
+
+<script lang="ts">
+  import ArcLabelBase from './ArcLabel.base.svelte';
+  import Path from '../Path/Path.svg.svelte';
+  import Text from '../Text/Text.svg.svelte';
+
+  import type { ArcLabelProps } from './ArcLabel.shared.svelte.js';
+
+  let props: ArcLabelProps = $props();
+</script>
+
+<ArcLabelBase {Path} {Text} {...props} />

package/dist/components/ArcLabel/ArcLabel.svg.svelte.d.ts

@@ -0,0 +1,5 @@
+export type { ArcLabelProps, ArcLabelConfig, ArcLabelPlacement, } from './ArcLabel.shared.svelte.js';
+import type { ArcLabelProps } from './ArcLabel.shared.svelte.js';
+declare const ArcLabel: import("svelte").Component<ArcLabelProps, {}, "">;
+type ArcLabel = ReturnType<typeof ArcLabel>;
+export default ArcLabel;