layerchart 2.0.0-next.56 → 2.0.0-next.58

package/dist/utils/{connectorUtils.js → linkUtils.js}

@@ -58,27 +58,63 @@ function createRoundedPath(opts) {
         return `M ${source.x} ${source.y} L ${pBeforeCorner.x} ${pBeforeCorner.y} A ${effectiveRadius} ${effectiveRadius} 0 0 ${sweepFlag} ${pAfterCorner.x} ${pAfterCorner.y} L ${target.x} ${target.y}`;
     }
 }
+/**
+ * Swoop: circular arc between source and target. Equivalent to ObservablePlot's
+ * Arrow `bend` option — positive angle bends right (clockwise from source to
+ * target), negative bends left, 0 is a straight line.
+ */
+function createSwoopPath({ source, target, dx, dy, bend = 22.5 }) {
+    const chordLen = Math.hypot(dx, dy);
+    const bendRad = (bend * Math.PI) / 180;
+    if (Math.abs(bendRad) < 1e-6 || chordLen < 1e-6) {
+        return createDirectPath(source, target);
+    }
+    // Half-chord subtends `bend` at the arc center, so radius = chord / (2 * sin(bend))
+    const arcRadius = chordLen / (2 * Math.sin(Math.abs(bendRad)));
+    const largeArc = Math.abs(bend) > 90 ? 1 : 0;
+    const sweepFlag = bend > 0 ? 1 : 0;
+    return `M${source.x},${source.y}A${arcRadius},${arcRadius} 0 ${largeArc} ${sweepFlag} ${target.x},${target.y}`;
+}
 const pathStrategies = {
     square: createSquarePath,
     beveled: createBeveledPath,
     rounded: createRoundedPath,
+    swoop: createSwoopPath,
 };
-export function getConnectorPresetPath(opts) {
+export function getLinkPresetPath(opts) {
     const { source, target, type } = opts;
     if (isSamePoint(source, target))
         return '';
     const dx = target.x - source.x;
     const dy = target.y - source.y;
-    // straight line cases
-    if (type === 'straight' || isNearZero(dx) || isNearZero(dy)) {
+    // straight line cases (swoop still bends even when axis-aligned)
+    if (type === 'straight' || (type !== 'swoop' && (isNearZero(dx) || isNearZero(dy)))) {
         return createDirectPath(source, target);
     }
     return (pathStrategies[type] || pathStrategies.square)({ ...opts, dx, dy });
 }
 const FALLBACK_PATH = 'M0,0L0,0';
-export function getConnectorD3Path({ source, target, sweep, curve }) {
+export function getLinkD3Path({ source, target, sweep, curve, orientation = 'horizontal', }) {
     const dx = target.x - source.x;
     const dy = target.y - source.y;
+    // d3 step curves always step along x. For vertical orientation, emit a
+    // y-axis step manually so the step sits between parent/child along depth.
+    if (orientation === 'vertical' && sweep === 'none') {
+        const { x: sx, y: sy } = source;
+        const { x: tx, y: ty } = target;
+        if (curve === curveStep) {
+            const my = (sy + ty) / 2;
+            return `M${sx},${sy}L${sx},${my}L${tx},${my}L${tx},${ty}`;
+        }
+        if (curve === curveStepBefore) {
+            // Bump near source: sibling (x) changes first, then depth (y)
+            return `M${sx},${sy}L${tx},${sy}L${tx},${ty}`;
+        }
+        if (curve === curveStepAfter) {
+            // Bump near target: depth (y) changes first, then sibling (x)
+            return `M${sx},${sy}L${sx},${ty}L${tx},${ty}`;
+        }
+    }
     const line = d3Line().curve(curve);
     let points = [];
     const isAligned = isNearZero(dx) || isNearZero(dy);
@@ -135,12 +171,26 @@ function radialGeometry(source, target) {
         sweepFlag,
     };
 }
-export function getConnectorRadialPresetPath({ source, target, type, radius, }) {
+export function getLinkRadialPresetPath({ source, target, type, radius, bend = 22.5, }) {
     const g = radialGeometry(source, target);
     const { sr, ta, tr, sc, ss, tc, ts, sx, sy, tx, ty, sweepFlag } = g;
     if (type === 'straight') {
         return `M${sx},${sy}L${tx},${ty}`;
     }
+    if (type === 'swoop') {
+        // Circular arc in cartesian space between the polar-converted endpoints.
+        const dx = tx - sx;
+        const dy = ty - sy;
+        const chordLen = Math.hypot(dx, dy);
+        const bendRad = (bend * Math.PI) / 180;
+        if (Math.abs(bendRad) < 1e-6 || chordLen < 1e-6) {
+            return `M${sx},${sy}L${tx},${ty}`;
+        }
+        const arcRadius = chordLen / (2 * Math.sin(Math.abs(bendRad)));
+        const largeArc = Math.abs(bend) > 90 ? 1 : 0;
+        const arcSweep = bend > 0 ? 1 : 0;
+        return `M${sx},${sy}A${arcRadius},${arcRadius} 0 ${largeArc} ${arcSweep} ${tx},${ty}`;
+    }
     if (type === 'rounded') {
         // visx LinkRadialCurve: cubic Bezier with rotated offset (percent controls tension)
         const percent = 0.2;
@@ -183,7 +233,7 @@ export function getConnectorRadialPresetPath({ source, target, type, radius, })
     const p2y = cornerY + radialDir * r * ts;
     return `M${sx},${sy}L${p1x},${p1y}L${p2x},${p2y}L${tx},${ty}`;
 }
-export function getConnectorRadialD3Path({ source, target, curve, }) {
+export function getLinkRadialD3Path({ source, target, curve, }) {
     const g = radialGeometry(source, target);
     const { sr, tr, sc, ss, tc, ts, sx, sy, tx, ty, sweepFlag } = g;
     // Step curves render as polar arcs/radials rather than cartesian stairs.

package/package.json

@@ -5,7 +5,7 @@
   "license": "MIT",
   "repository": "techniq/layerchart",
   "homepage": "https://layerchart.com",
-  "version": "2.0.0-next.56",
+  "version": "2.0.0-next.58",
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
     "@napi-rs/canvas": "^0.1.97",

package/dist/components/Connector.svelte

@@ -1,167 +0,0 @@
-<script lang="ts" module>
-  export type ConnectorPropsWithoutHTML = {
-    /**
-     * The coordinates of the start point of the connector.
-     * @default { x: 0, y: 0 }
-     */
-    source: ConnectorCoords;
-
-    /**
-     * The coordinates of the end point of the connector.
-     *
-     * @default { x: 100, y: 100 }
-     */
-    target: ConnectorCoords;
-
-    /**
-     * The sweep direction of the connector.
-     *
-     * @default 'horizontal-vertical'
-     */
-    sweep?: ConnectorSweep;
-
-    /**
-     * The type of the connector.
-     *
-     * Set to `'d3'` to use a D3 curve function via the `curve` prop.
-     *
-     * @default 'rounded'
-     */
-    type?: ConnectorType;
-
-    /**
-     * The radius of the connector.
-     *
-     * Only used when type is `'beveled'` or `'rounded'`
-     *
-     * @default 20
-     */
-    radius?: number;
-
-    /**
-     * The D3 curve function to use for the connector.
-     *
-     * Only used when type is `'d3'`
-     *
-     * @default `d3.curveLinear`
-     */
-    curve?: CurveFactory;
-
-    /**
-     * Interpret `source`/`target` as polar coordinates (`x` = angle, `y` = radius)
-     * and render the path in radial space. Defaults to `ctx.radial` when unset.
-     */
-    radial?: boolean;
-  } & PathPropsWithoutHTML;
-
-  export type ConnectorProps = ConnectorPropsWithoutHTML &
-    Without<PathProps, ConnectorPropsWithoutHTML>;
-</script>
-
-<script lang="ts">
-  import { type CurveFactory, curveLinear } from 'd3-shape';
-  import {
-    getConnectorD3Path,
-    getConnectorPresetPath,
-    getConnectorRadialD3Path,
-    getConnectorRadialPresetPath,
-    type ConnectorCoords,
-    type ConnectorSweep,
-    type ConnectorType,
-  } from '../utils/connectorUtils.js';
-  import { getChartContext } from '../contexts/chart.js';
-  import Path, { type PathProps, type PathPropsWithoutHTML } from './Path.svelte';
-  import type { Without } from '../utils/types.js';
-  import { createId } from '../utils/createId.js';
-  import { extractLayerProps } from '../utils/attributes.js';
-  import MarkerWrapper from './MarkerWrapper.svelte';
-  import {
-    createMotion,
-    extractTweenConfig,
-    type ResolvedMotion,
-  } from '../utils/motion.svelte.js';
-  import { interpolatePath } from 'd3-interpolate-path';
-
-  const uid = $props.id();
-
-  let {
-    source = { x: 0, y: 0 },
-    target = { x: 100, y: 100 },
-    sweep: sweepProp,
-    type = 'rounded',
-    radius = 20,
-    curve = curveLinear,
-    radial: radialProp,
-    pathRef = $bindable(),
-    pathData: pathDataProp,
-    marker,
-    markerStart,
-    markerMid,
-    markerEnd,
-    motion,
-    ...restProps
-  }: ConnectorProps = $props();
-
-  const ctx = getChartContext();
-  const radial = $derived(radialProp ?? ctx.radial ?? false);
-
-  const sweep = $derived.by(() => {
-    if (sweepProp) return sweepProp;
-    if (type === 'd3') return 'none';
-    return 'horizontal-vertical';
-  });
-
-  const markerStartId = $derived(markerStart || marker ? createId('marker-start', uid) : '');
-  const markerMidId = $derived(markerMid || marker ? createId('marker-mid', uid) : '');
-  const markerEndId = $derived(markerEnd || marker ? createId('marker-end', uid) : '');
-
-  const extractedTween = extractTweenConfig(motion);
-
-  const tweenOptions: ResolvedMotion | undefined = extractedTween
-    ? {
-        type: extractedTween.type,
-        options: {
-          interpolate: interpolatePath,
-          ...extractedTween.options,
-        },
-      }
-    : undefined;
-
-  const pathData = $derived.by(() => {
-    if (pathDataProp) return pathDataProp;
-    if (radial) {
-      return type === 'd3'
-        ? getConnectorRadialD3Path({ source, target, curve })
-        : getConnectorRadialPresetPath({ source, target, type, radius });
-    }
-    if (type === 'd3') {
-      return getConnectorD3Path({
-        source,
-        target,
-        sweep,
-        curve,
-      });
-    } else {
-      return getConnectorPresetPath({ source, target, sweep, type, radius });
-    }
-  });
-
-  const motionPath = createMotion(
-    '',
-    () => pathData,
-    tweenOptions ? tweenOptions : { type: 'none' }
-  );
-</script>
-
-<Path
-  pathData={motionPath.current}
-  bind:pathRef
-  marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
-  marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
-  marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
-  {...extractLayerProps(restProps, 'lc-connector')}
-  {...restProps}
-/>
-<MarkerWrapper id={markerStartId} marker={markerStart} />
-<MarkerWrapper id={markerMidId} marker={markerMid} />
-<MarkerWrapper id={markerEndId} marker={markerEnd} />

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

@@ -1,56 +0,0 @@
-export type ConnectorPropsWithoutHTML = {
-    /**
-     * The coordinates of the start point of the connector.
-     * @default { x: 0, y: 0 }
-     */
-    source: ConnectorCoords;
-    /**
-     * The coordinates of the end point of the connector.
-     *
-     * @default { x: 100, y: 100 }
-     */
-    target: ConnectorCoords;
-    /**
-     * The sweep direction of the connector.
-     *
-     * @default 'horizontal-vertical'
-     */
-    sweep?: ConnectorSweep;
-    /**
-     * The type of the connector.
-     *
-     * Set to `'d3'` to use a D3 curve function via the `curve` prop.
-     *
-     * @default 'rounded'
-     */
-    type?: ConnectorType;
-    /**
-     * The radius of the connector.
-     *
-     * Only used when type is `'beveled'` or `'rounded'`
-     *
-     * @default 20
-     */
-    radius?: number;
-    /**
-     * The D3 curve function to use for the connector.
-     *
-     * Only used when type is `'d3'`
-     *
-     * @default `d3.curveLinear`
-     */
-    curve?: CurveFactory;
-    /**
-     * Interpret `source`/`target` as polar coordinates (`x` = angle, `y` = radius)
-     * and render the path in radial space. Defaults to `ctx.radial` when unset.
-     */
-    radial?: boolean;
-} & PathPropsWithoutHTML;
-export type ConnectorProps = ConnectorPropsWithoutHTML & Without<PathProps, ConnectorPropsWithoutHTML>;
-import { type CurveFactory } from 'd3-shape';
-import { type ConnectorCoords, type ConnectorSweep, type ConnectorType } from '../utils/connectorUtils.js';
-import { type PathProps, type PathPropsWithoutHTML } from './Path.svelte';
-import type { Without } from '../utils/types.js';
-declare const Connector: import("svelte").Component<ConnectorProps, {}, "pathRef">;
-type Connector = ReturnType<typeof Connector>;
-export default Connector;

package/dist/utils/connectorUtils.d.ts

@@ -1,34 +0,0 @@
-import { type CurveFactory } from 'd3-shape';
-export type ConnectorCoords = {
-    x: number;
-    y: number;
-};
-export type PresetConnectorType = 'straight' | 'square' | 'beveled' | 'rounded';
-export type ConnectorType = PresetConnectorType | 'd3';
-export type ConnectorSweep = 'horizontal-vertical' | 'vertical-horizontal' | 'none';
-type GetConnectorPresetPathProps = {
-    source: ConnectorCoords;
-    target: ConnectorCoords;
-    radius: number;
-    type: PresetConnectorType;
-    sweep: ConnectorSweep;
-};
-export declare function getConnectorPresetPath(opts: GetConnectorPresetPathProps): string;
-type GetConnectorD3PathProps = Omit<GetConnectorPresetPathProps, 'radius' | 'type'> & {
-    curve: CurveFactory;
-};
-export declare function getConnectorD3Path({ source, target, sweep, curve }: GetConnectorD3PathProps): string;
-type GetConnectorRadialPresetPathProps = {
-    source: ConnectorCoords;
-    target: ConnectorCoords;
-    type: PresetConnectorType;
-    radius: number;
-};
-export declare function getConnectorRadialPresetPath({ source, target, type, radius, }: GetConnectorRadialPresetPathProps): string;
-type GetConnectorRadialD3PathProps = {
-    source: ConnectorCoords;
-    target: ConnectorCoords;
-    curve?: CurveFactory;
-};
-export declare function getConnectorRadialD3Path({ source, target, curve, }: GetConnectorRadialD3PathProps): string;
-export {};