@pixerate/editor-svelte 0.208.2 → 0.209.0

package/dist/canvas/AnimatedEdge.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import {
+		getCanvasEdgeAnimation,
+		getCanvasEdgePath,
+		resolveCanvasEdgeAnimation,
+		type CanvasAnimatedEdgePathType,
+		type CanvasEdgeAnimation,
+		type Position
+	} from '@pixerate/editor/canvas';
+	import EdgeAnimation from './EdgeAnimation.svelte';
+
+	/** The props Svelte Flow passes a custom edge (the subset `<AnimatedEdge>` uses). */
+	interface Props {
+		id: string;
+		sourceX: number;
+		sourceY: number;
+		targetX: number;
+		targetY: number;
+		sourcePosition?: Position;
+		targetPosition?: Position;
+		/** `data.animation` is the animation; `data.pathType` the path style (default `default`, a bézier). */
+		data?: { animation?: CanvasEdgeAnimation | null; pathType?: CanvasAnimatedEdgePathType; [key: string]: any };
+		label?: string;
+		labelStyle?: string;
+		/** Inline CSS for the edge line (e.g. `stroke: #38bdf8`). */
+		style?: string;
+		markerStart?: string;
+		markerEnd?: string;
+		selected?: boolean;
+		/** Width of the invisible line that takes the pointer. Default 20. */
+		interactionWidth?: number;
+		/** Hold the first frame. Default: follow `prefers-reduced-motion`. */
+		reducedMotion?: boolean;
+		[key: string]: any;
+	}
+
+	/**
+	 * A Svelte Flow edge that plays `data.animation` (travelling dots, marching dashes, a beam or a
+	 * pulse) over its line. Register it as an edge type (`edgeTypes={{ animated: AnimatedEdge }}`) and
+	 * give edges `type: "animated"`; `data.pathType` picks the path (`default`, `straight`, `step`,
+	 * `smoothstep`, `simplebezier`), drawn as Svelte Flow draws it. An edge without an animation is a
+	 * plain edge. Agents change animations with `createCanvasEdgeAnimationToolProvider`.
+	 */
+	let {
+		id,
+		sourceX,
+		sourceY,
+		targetX,
+		targetY,
+		sourcePosition,
+		targetPosition,
+		data,
+		label,
+		labelStyle,
+		style,
+		markerStart,
+		markerEnd,
+		interactionWidth = 20,
+		reducedMotion
+	}: Props = $props();
+
+	const edgePath = $derived(getCanvasEdgePath({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, type: data?.pathType }));
+	const animation = $derived(getCanvasEdgeAnimation({ data }));
+	const stroke = $derived(style?.match(/(?:^|;)\s*stroke\s*:\s*([^;]+)/)?.[1]?.trim());
+	const trackOpacity = $derived(animation ? resolveCanvasEdgeAnimation(animation).trackOpacity : 1);
+	const lineStyle = $derived([style, trackOpacity !== 1 ? `stroke-opacity: ${trackOpacity}` : ''].filter(Boolean).join('; '));
+</script>
+
+<path {id} d={edgePath.path} fill="none" class="svelte-flow__edge-path" style={lineStyle} marker-start={markerStart} marker-end={markerEnd} />
+{#if interactionWidth > 0}
+	<path d={edgePath.path} fill="none" stroke-opacity="0" stroke-width={interactionWidth} class="svelte-flow__edge-interaction" />
+{/if}
+<EdgeAnimation {animation} path={edgePath.path} {id} stroke={stroke ?? 'var(--xy-edge-stroke, #b1b1b7)'} {reducedMotion} />
+{#if label}
+	<text x={edgePath.labelX} y={edgePath.labelY} text-anchor="middle" dominant-baseline="central" class="svelte-flow__edge-text" style={labelStyle}>{label}</text>
+{/if}

package/dist/canvas/AnimatedEdge.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type CanvasAnimatedEdgePathType, type CanvasEdgeAnimation, type Position } from '@pixerate/editor/canvas';
+/** The props Svelte Flow passes a custom edge (the subset `<AnimatedEdge>` uses). */
+interface Props {
+    id: string;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition?: Position;
+    targetPosition?: Position;
+    /** `data.animation` is the animation; `data.pathType` the path style (default `default`, a bézier). */
+    data?: {
+        animation?: CanvasEdgeAnimation | null;
+        pathType?: CanvasAnimatedEdgePathType;
+        [key: string]: any;
+    };
+    label?: string;
+    labelStyle?: string;
+    /** Inline CSS for the edge line (e.g. `stroke: #38bdf8`). */
+    style?: string;
+    markerStart?: string;
+    markerEnd?: string;
+    selected?: boolean;
+    /** Width of the invisible line that takes the pointer. Default 20. */
+    interactionWidth?: number;
+    /** Hold the first frame. Default: follow `prefers-reduced-motion`. */
+    reducedMotion?: boolean;
+    [key: string]: any;
+}
+declare const AnimatedEdge: import("svelte").Component<Props, {}, "">;
+type AnimatedEdge = ReturnType<typeof AnimatedEdge>;
+export default AnimatedEdge;

package/dist/canvas/EdgeAnimation.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { getCanvasEdgeAnimationRender, type CanvasEdgeAnimation } from '@pixerate/editor/canvas';
+	import { createPrefersReducedMotion } from './prefersReducedMotion.svelte.js';
+
+	interface Props {
+		/** The animation (`edge.data.animation`). Renders nothing when null. */
+		animation: CanvasEdgeAnimation | null | undefined;
+		/** SVG path data of the edge, as your edge draws it. */
+		path: string;
+		/** Edge id: keeps glow filter ids unique. */
+		id: string;
+		/** Colour when the animation has none (the edge's stroke). Default `currentColor`. */
+		stroke?: string;
+		/** Hold the first frame. Default: follow `prefers-reduced-motion`. */
+		reducedMotion?: boolean;
+	}
+
+	/**
+	 * The moving part of an animated edge (dots, dashes, a beam or a pulse) as an SVG `<g>`, drawn
+	 * along `path` with SMIL, so nothing runs per frame in JavaScript. Put it in your own Svelte Flow
+	 * edge after `<BaseEdge>`, or use `<AnimatedEdge>`. It ignores the pointer.
+	 */
+	let { animation, path, id, stroke, reducedMotion }: Props = $props();
+
+	const prefers = createPrefersReducedMotion();
+	const render = $derived.by(() => {
+		if (!animation) return null;
+		try {
+			return getCanvasEdgeAnimationRender(animation, { path, id, stroke, reducedMotion: reducedMotion ?? prefers.current });
+		} catch {
+			return null;
+		}
+	});
+	const pathId = $derived(`pixerate-edge-path-${id.replace(/[^a-zA-Z0-9_-]/g, '_')}`);
+</script>
+
+{#if render}
+	<g class="pixerate-edge-animation" data-edge-animation={render.kind} data-moving={render.moving ? 'true' : 'false'} style="pointer-events: none">
+		<defs>
+			<path id={pathId} d={path} />
+			{#if render.glowFilter}
+				<filter
+					id={render.glowFilter.id}
+					filterUnits="userSpaceOnUse"
+					x={render.glowFilter.x}
+					y={render.glowFilter.y}
+					width={render.glowFilter.width}
+					height={render.glowFilter.height}
+				>
+					<feGaussianBlur stdDeviation={render.glowFilter.stdDeviation} result="blur" />
+					<feMerge>
+						<feMergeNode in="blur" />
+						<feMergeNode in="SourceGraphic" />
+					</feMerge>
+				</filter>
+			{/if}
+		</defs>
+		{#each render.elements as el (el.key)}
+			{#if el.type === 'dot'}
+				{#if render.moving}
+					<circle r={el.r} fill={el.fill} filter={el.filter}>
+						<animateMotion
+							dur="{el.motion.dur}s"
+							begin="{el.motion.begin}s"
+							repeatCount="indefinite"
+							keyPoints={el.motion.keyPoints}
+							keyTimes={el.motion.keyTimes}
+							calcMode="linear"
+						>
+							<mpath href="#{pathId}" />
+						</animateMotion>
+					</circle>
+				{:else}
+					<circle cx={el.at.x} cy={el.at.y} r={el.r} fill={el.fill} filter={el.filter} />
+				{/if}
+			{:else}
+				<path
+					d={path}
+					fill="none"
+					stroke={el.stroke}
+					stroke-width={el.strokeWidth}
+					stroke-linecap={el.strokeLinecap}
+					stroke-dasharray={el.strokeDasharray}
+					stroke-dashoffset={el.strokeDashoffset}
+					stroke-opacity={el.opacity}
+					filter={el.filter}
+				>
+					{#if render.moving}
+						{#each el.animate as a (a.attributeName)}
+							<animate attributeName={a.attributeName} values={a.values} dur="{a.dur}s" begin="{a.begin}s" repeatCount="indefinite" />
+						{/each}
+					{/if}
+				</path>
+			{/if}
+		{/each}
+	</g>
+{/if}

package/dist/canvas/EdgeAnimation.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type CanvasEdgeAnimation } from '@pixerate/editor/canvas';
+interface Props {
+    /** The animation (`edge.data.animation`). Renders nothing when null. */
+    animation: CanvasEdgeAnimation | null | undefined;
+    /** SVG path data of the edge, as your edge draws it. */
+    path: string;
+    /** Edge id: keeps glow filter ids unique. */
+    id: string;
+    /** Colour when the animation has none (the edge's stroke). Default `currentColor`. */
+    stroke?: string;
+    /** Hold the first frame. Default: follow `prefers-reduced-motion`. */
+    reducedMotion?: boolean;
+}
+declare const EdgeAnimation: import("svelte").Component<Props, {}, "">;
+type EdgeAnimation = ReturnType<typeof EdgeAnimation>;
+export default EdgeAnimation;

package/dist/canvas/index.d.ts

@@ -29,6 +29,10 @@ export { createCanvasMeasure, type CanvasMeasure, type CreateCanvasMeasureOption
 export { measureBetween, measureToLine, measureSelection, measureLabel, isMeasureModifierHeld, snapToGrid, snapResize, snapNodeResize, inferResizeHandle, resizeHandleAxes, getResizingNodeRect, RESIZE_HANDLES, fitCubics, fitCubicRun, fitPathData, fitFreehandPath, cubicsToPathData, cubicPointAt, isStraightCubic, type MeasureGuide, type MeasureSelectionResult, type MeasureSelectionOptions, type ResizeHandle, type SnapResizeOptions, type SnapResizeResult, type SnapNodeResizeOptions, type SnapNodeResizeResult, type CubicSegment, type FitCubicsOptions, type FitPathDataOptions } from '@pixerate/editor/canvas';
 export { alignNodes, distributeNodes, matchSize, reorderNodes, applyNodeUpdates, invertNodeUpdates, lockNodes, unlockNodes, toggleLockNodes, isLocked, getNodeSize, getNodeRect, getAbsolutePosition, readStyleSize, withStyleSize, computeSnapGuides, createGuideIndex, createNodeGuideIndex, snapNodeDrag, findConnectorSnap, nearestHandlePositions, handlePoint, positionToSide, sideToPosition, oppositePosition, CONNECTION_LINE_TYPES, CanvasScenesStore, createCanvasScenesStore, parseCanvasScenes, fitViewportToRect, fitViewportToNodes, matchArrangeShortcut, DEFAULT_ARRANGE_SHORTCUTS, type AlignEdge, type DistributeAxis, type DistributeMode, type SizeDimension, type ZOrderOperation, type CanvasNodeUpdate, type GuideLine, type GuideIndex, type SnapGuidesOptions, type SnapResult, type ConnectorSnap, type ConnectorSnapTarget, type CanvasConnectionLineType, type CanvasScene, type CanvasScenesState, type CanvasViewport, type CanvasArrangeAction, type ArrangeShortcutBinding } from '@pixerate/editor/canvas';
 export { default as ShapeNode } from './ShapeNode.svelte';
+export { default as AnimatedEdge } from './AnimatedEdge.svelte';
+export { default as EdgeAnimation } from './EdgeAnimation.svelte';
+export { createPrefersReducedMotion } from './prefersReducedMotion.svelte.js';
+export { CANVAS_EDGE_ANIMATION_KINDS, CANVAS_EDGE_ANIMATION_SCHEMA, createCanvasEdgeAnimationToolProvider, getCanvasEdgeAnimation, getCanvasEdgeAnimationRender, getCanvasEdgePath, measureSvgPath, normalizeCanvasEdgeAnimation, resolveCanvasEdgeAnimation, sampleCanvasEdgeAnimation, setCanvasEdgeAnimation, type CanvasAnimatedEdgePathType, type CanvasEdgeAnimation, type CanvasEdgeAnimationDirection, type CanvasEdgeAnimationElement, type CanvasEdgeAnimationFrame, type CanvasEdgeAnimationKind, type CanvasEdgeAnimationKindInfo, type CanvasEdgeAnimationRender, type CanvasEdgeAnimationRenderOptions, type CanvasEdgeAnimationTiming, type CanvasEdgeAnimationToolProviderOptions, type CanvasEdgeAnimationToolTarget, type CanvasEdgeAnimationToolEdge, type CanvasEdgePath, type CanvasEdgePathParams, type MeasuredSvgPath, type SvgPathPoint } from '@pixerate/editor/canvas';
 export { default as CanvasNodeEffectLayer } from './CanvasNodeEffectLayer.svelte';
 export { default as CanvasEffectsPanel } from './CanvasEffectsPanel.svelte';
 export * from './canvasEffects.svelte.js';

package/dist/canvas/index.js

@@ -50,6 +50,11 @@ export { createCanvasMeasure } from './createCanvasMeasure.svelte.js';
 export { measureBetween, measureToLine, measureSelection, measureLabel, isMeasureModifierHeld, snapToGrid, snapResize, snapNodeResize, inferResizeHandle, resizeHandleAxes, getResizingNodeRect, RESIZE_HANDLES, fitCubics, fitCubicRun, fitPathData, fitFreehandPath, cubicsToPathData, cubicPointAt, isStraightCubic } from '@pixerate/editor/canvas';
 export { alignNodes, distributeNodes, matchSize, reorderNodes, applyNodeUpdates, invertNodeUpdates, lockNodes, unlockNodes, toggleLockNodes, isLocked, getNodeSize, getNodeRect, getAbsolutePosition, readStyleSize, withStyleSize, computeSnapGuides, createGuideIndex, createNodeGuideIndex, snapNodeDrag, findConnectorSnap, nearestHandlePositions, handlePoint, positionToSide, sideToPosition, oppositePosition, CONNECTION_LINE_TYPES, CanvasScenesStore, createCanvasScenesStore, parseCanvasScenes, fitViewportToRect, fitViewportToNodes, matchArrangeShortcut, DEFAULT_ARRANGE_SHORTCUTS } from '@pixerate/editor/canvas';
 export { default as ShapeNode } from './ShapeNode.svelte';
+// Animated edges: travelling dots, marching dashes, beams and pulses, and their agent tools
+export { default as AnimatedEdge } from './AnimatedEdge.svelte';
+export { default as EdgeAnimation } from './EdgeAnimation.svelte';
+export { createPrefersReducedMotion } from './prefersReducedMotion.svelte.js';
+export { CANVAS_EDGE_ANIMATION_KINDS, CANVAS_EDGE_ANIMATION_SCHEMA, createCanvasEdgeAnimationToolProvider, getCanvasEdgeAnimation, getCanvasEdgeAnimationRender, getCanvasEdgePath, measureSvgPath, normalizeCanvasEdgeAnimation, resolveCanvasEdgeAnimation, sampleCanvasEdgeAnimation, setCanvasEdgeAnimation } from '@pixerate/editor/canvas';
 export { default as CanvasNodeEffectLayer } from './CanvasNodeEffectLayer.svelte';
 export { default as CanvasEffectsPanel } from './CanvasEffectsPanel.svelte';
 export * from './canvasEffects.svelte.js';

package/dist/canvas/prefersReducedMotion.svelte.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Follows `prefers-reduced-motion: reduce`: `current` is true while the user asks for reduced
+ * motion. Create it in a component (it listens until the component is destroyed).
+ */
+export declare function createPrefersReducedMotion(): {
+    readonly current: boolean;
+};

package/dist/canvas/prefersReducedMotion.svelte.js

@@ -0,0 +1,22 @@
+const REDUCED_MOTION = '(prefers-reduced-motion: reduce)';
+/**
+ * Follows `prefers-reduced-motion: reduce`: `current` is true while the user asks for reduced
+ * motion. Create it in a component (it listens until the component is destroyed).
+ */
+export function createPrefersReducedMotion() {
+    const query = typeof window !== 'undefined' && typeof window.matchMedia === 'function' ? window.matchMedia(REDUCED_MOTION) : null;
+    let reduced = $state(query?.matches ?? false);
+    $effect(() => {
+        if (!query)
+            return;
+        const update = () => (reduced = query.matches);
+        update();
+        query.addEventListener?.('change', update);
+        return () => query.removeEventListener?.('change', update);
+    });
+    return {
+        get current() {
+            return reduced;
+        }
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.208.2",
+  "version": "0.209.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -184,7 +184,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@pixerate/editor": "0.280.0"
+    "@pixerate/editor": "0.281.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",