@mhkeller/layercake-annotations 0.1.0

package/dist/components/Arrows.svelte

@@ -0,0 +1,175 @@
+<!--
+  @component
+  Renders SVG arrows for annotations. Source position is relative to annotation (pixel offsets),
+  target position is in data space with optional percentage offsets for ordinal scales.
+  During drag, uses live pixel coordinates from dragState.
+ -->
+<script>
+	/** @typedef {import('../types.js').Annotation} Annotation */
+	/** @typedef {import('../types.js').DragState} DragState */
+	/** @typedef {import('../types.js').ModifyArrowFn} ModifyArrowFn */
+	/**
+	 * @template T
+	 * @typedef {import('../types.js').Ref<T>} Ref
+	 */
+
+	import { getContext } from 'svelte';
+
+	import { createArrowPath } from '../modules/arrowUtils.js';
+	import { getArrowSource, getArrowTarget } from '../modules/coordinates.js';
+
+	/** @type {{ annotations?: Annotation[] }} */
+	let { annotations = [] } = $props();
+
+	const { xScale, yScale, x, y, width, height } = getContext('LayerCake');
+
+	/** @type {Ref<DragState | null> | undefined} - Only available in Editor mode */
+	const dragStateRef = getContext('previewArrow');
+
+	/** @type {ModifyArrowFn | undefined} - Only available in Editor mode */
+	const modifyArrow = getContext('modifyArrow');
+
+	/**
+	 * Build scales object for coordinate utilities
+	 */
+	function getScales() {
+		return {
+			xScale: $xScale,
+			yScale: $yScale,
+			x: $x,
+			y: $y,
+			width: $width,
+			height: $height
+		};
+	}
+
+	/**
+	 * Compute the SVG path for a saved arrow
+	 */
+	function getStaticPath(anno, arrow) {
+		const scales = getScales();
+		const source = getArrowSource(anno, arrow, scales);
+		const target = getArrowTarget(arrow, scales);
+		const clockwise = arrow.clockwise !== undefined ? arrow.clockwise : true;
+
+		return createArrowPath(source, target, clockwise);
+	}
+
+	/**
+	 * Toggle clockwise on cmd+click - cycle order depends on side
+	 */
+	function handleArrowClick(e, anno, arrow) {
+		if (!e.metaKey || !modifyArrow) return;
+
+		const side = arrow.side;
+		const clockwise =
+			arrow.clockwise !== undefined ? arrow.clockwise : side === 'west' ? false : true;
+
+		let newClockwise;
+		if (side === 'east') {
+			// East: clockwise → straight → counter-clockwise → clockwise
+			if (clockwise === true) {
+				newClockwise = null;
+			} else if (clockwise === null) {
+				newClockwise = false;
+			} else {
+				newClockwise = true;
+			}
+		} else {
+			// West: counter-clockwise → straight → clockwise → counter-clockwise
+			if (clockwise === false) {
+				newClockwise = null;
+			} else if (clockwise === null) {
+				newClockwise = true;
+			} else {
+				newClockwise = false;
+			}
+		}
+
+		modifyArrow(anno.id, side, { clockwise: newClockwise });
+	}
+
+	/**
+	 * Check if a specific arrow is currently being dragged
+	 */
+	let draggingArrowKey = $derived.by(() => {
+		if (!dragStateRef) return null;
+		const ds = dragStateRef.value;
+		if (!ds) return null;
+		return `${ds.annotationId}_${ds.side}`;
+	});
+
+	/**
+	 * Reactive drag path - renders arrow being dragged (new or existing)
+	 */
+	let dragPath = $derived.by(() => {
+		if (!dragStateRef) return '';
+		const ds = dragStateRef.value;
+		if (!ds || ds.annotationId === null || ds.annotationId === undefined) return '';
+		if (ds.sourceX == null || ds.targetX == null) return '';
+
+		const clockwise = ds.clockwise !== undefined ? ds.clockwise : true;
+		return createArrowPath(
+			{ x: ds.sourceX, y: ds.sourceY },
+			{ x: ds.targetX, y: ds.targetY },
+			clockwise
+		);
+	});
+</script>
+
+		<g class="swoops">
+	<!-- Render saved arrows (hide if this specific arrow is being dragged) -->
+			{#each annotations as anno}
+				{#if anno.arrows}
+					{#each anno.arrows as arrow}
+				{@const arrowKey = `${anno.id}_${arrow.side}`}
+				{@const isBeingDragged = draggingArrowKey === arrowKey}
+				{#if !isBeingDragged}
+					{@const pathD = getStaticPath(anno, arrow)}
+					<!-- Visible arrow -->
+					<path class="arrow-visible" marker-end="url(#layercake-annotation-arrowhead)" d={pathD}
+					></path>
+					<!-- Invisible hit area for clicking (edit mode only) -->
+					{#if modifyArrow}
+						<path
+							class="arrow-hitarea"
+							d={pathD}
+							onclick={(e) => handleArrowClick(e, anno, arrow)}
+							onkeydown={(e) => e.key === 'Enter' && handleArrowClick(e, anno, arrow)}
+							role="button"
+							tabindex="0"
+							aria-label="Arrow - Cmd+Enter to toggle curve direction"
+						></path>
+					{/if}
+				{/if}
+			{/each}
+		{/if}
+	{/each}
+
+	<!-- Arrow being dragged (new or existing) - rendered with live coordinates -->
+	{#if dragPath}
+		<path class="arrow-visible" marker-end="url(#layercake-annotation-arrowhead)" d={dragPath}
+		></path>
+	{/if}
+</g>
+
+<style>
+	.swoops {
+		position: absolute;
+		max-width: 200px;
+		line-height: 14px;
+	}
+	.arrow-visible {
+		fill: none;
+		stroke: #000;
+		stroke-width: 1;
+		pointer-events: none;
+	}
+	.arrow-hitarea {
+		fill: none;
+		stroke: transparent;
+		stroke-width: 12;
+		cursor: pointer;
+		pointer-events: stroke;
+	}
+</style>

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

@@ -0,0 +1,20 @@
+export default Arrows;
+export type Annotation = import("../types.js").Annotation;
+export type DragState = import("../types.js").DragState;
+export type ModifyArrowFn = import("../types.js").ModifyArrowFn;
+export type Ref<T> = import("../types.js").Ref<T>;
+type Arrows = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Renders SVG arrows for annotations. Source position is relative to annotation (pixel offsets),
+ * target position is in data space with optional percentage offsets for ordinal scales.
+ * During drag, uses live pixel coordinates from dragState.
+ */
+declare const Arrows: import("svelte").Component<{
+    annotations?: Annotation[];
+}, {}, "">;
+type $$ComponentProps = {
+    annotations?: Annotation[];
+};

package/dist/components/Draggable.svelte

@@ -0,0 +1,121 @@
+<script>
+	/** @typedef {import('../types.js').HoverState} HoverState */
+	/**
+	 * @template T
+	 * @typedef {import('../types.js').Ref<T>} Ref
+	 */
+
+	import { getContext } from 'svelte';
+
+	let {
+		id,
+		left,
+		top,
+		ondrag,
+		canDrag = true,
+		bannedTargets = [],
+		noteDimensions = $bindable(),
+		containerClass = '.chart-container',
+		width,
+		onclick,
+		children
+	} = $props();
+
+	/**
+	 * State vars
+	 */
+	let el = $state();
+	let isBanned = $state(false);
+	let thisMoving = $state(false);
+
+	/** @type {Ref<HoverState | null>} */
+	const hovering = getContext('hovering');
+	/** @type {Ref<boolean>} */
+	const moving = getContext('moving');
+	const { padding } = getContext('LayerCake');
+
+	function onmousedown(e) {
+		moving.value = true;
+		thisMoving = true;
+		isBanned = [...e.target.classList].some((c) => bannedTargets.includes(c));
+	}
+
+	/**
+	 * Broadcast the elements movements on drag
+	 */
+	function onmousemove(e) {
+		if (thisMoving && canDrag && !isBanned) {
+			const { left, top } = el.getBoundingClientRect();
+
+			const parent = el.closest(containerClass).getBoundingClientRect();
+
+			ondrag([
+				left - parent.left - $padding.left + e.movementX,
+				top - parent.top - $padding.top - 0 + e.movementY
+			]);
+		}
+	}
+
+	function onmouseup() {
+		moving.value = false;
+		thisMoving = false;
+	}
+	function onmouseover() {
+		if (moving.value) return;
+		hovering.value = { annotationId: id, type: 'body' };
+	}
+	function onmouseout() {
+		if (moving.value) return;
+		hovering.value = null;
+	}
+</script>
+
+<div
+	bind:this={el}
+	style:left
+	style:top
+	style:width
+	class="draggable"
+	class:canDrag
+	class:hovering={hovering.value?.annotationId === id}
+	{onclick}
+	{onmousedown}
+	{onmouseover}
+	{onmouseout}
+	onfocus={onmouseover}
+	onblur={onmouseout}
+	onkeydown={(e) => e.key === 'Delete' && onclick(e)}
+	role="button"
+	tabindex="0"
+	aria-label="Annotation - drag to move, press Delete to remove"
+	bind:clientWidth={noteDimensions[0]}
+	bind:clientHeight={noteDimensions[1]}
+>
+	{@render children()}
+</div>
+
+<svelte:window {onmouseup} {onmousemove} />
+
+<style>
+	.draggable {
+		position: absolute;
+		display: inline-block;
+		box-sizing: border-box;
+		transition: border-color 250ms;
+		border-radius: 2px;
+		padding: 3px;
+		border: 1px solid transparent;
+	}
+	.draggable.hovering {
+		border-color: red;
+	}
+
+	.draggable.canDrag {
+		user-select: none;
+		cursor: move;
+	}
+
+	.draggable.hovering :global(.grabber) {
+		opacity: 1;
+	}
+</style>

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

@@ -0,0 +1,33 @@
+export default Draggable;
+export type HoverState = import("../types.js").HoverState;
+export type Ref<T> = import("../types.js").Ref<T>;
+type Draggable = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Draggable: import("svelte").Component<{
+    id: any;
+    left: any;
+    top: any;
+    ondrag: any;
+    canDrag?: boolean;
+    bannedTargets?: any[];
+    noteDimensions?: any;
+    containerClass?: string;
+    width: any;
+    onclick: any;
+    children: any;
+}, {}, "noteDimensions">;
+type $$ComponentProps = {
+    id: any;
+    left: any;
+    top: any;
+    ondrag: any;
+    canDrag?: boolean;
+    bannedTargets?: any[];
+    noteDimensions?: any;
+    containerClass?: string;
+    width: any;
+    onclick: any;
+    children: any;
+};

package/dist/components/EditableText.svelte

@@ -0,0 +1,131 @@
+<script>
+	/**
+	 * @template T
+	 * @typedef {import('../types.js').Ref<T>} Ref
+	 */
+
+	import { getContext } from 'svelte';
+
+	/** @type {Ref<boolean>} */
+	const isEditing = getContext('isEditing');
+
+	let { text = $bindable(), isEditable = $bindable(false), alignment } = $props();
+
+	let textarea = $state(null);
+
+	function selectAllTextInContentEditable(element) {
+		const selection = window.getSelection();
+		const range = document.createRange();
+		range.selectNodeContents(element);
+		selection.removeAllRanges();
+		selection.addRange(range);
+	}
+
+	function cancelEdit() {
+		isEditable = false;
+		text = text.trim();
+		window.removeEventListener('keydown', handleKeydown);
+		document.removeEventListener('click', handleClickOutside);
+
+		// Wait for the click event to propagate before setting isEditing to false
+		setTimeout(() => {
+			isEditing.value = false;
+		}, 200);
+	}
+
+	function handleClickOutside(event) {
+		if (isEditable && textarea && !textarea.contains(event.target)) {
+			textarea.blur();
+		}
+	}
+
+	function handleKeydown(e) {
+		if (e.key === 'Escape' || e.key === 'Tab') {
+			textarea.blur();
+		}
+		// Enter without shift saves, shift+enter allows line break
+		if (e.key === 'Enter' && !e.shiftKey) {
+			e.preventDefault();
+			textarea.blur();
+		}
+	}
+
+	$effect(() => {
+		if (textarea && isEditable) {
+			textarea.focus();
+			selectAllTextInContentEditable(textarea);
+			window.addEventListener('keydown', handleKeydown);
+		}
+	});
+
+	function handleDoubleClick(e) {
+		// Don't enter edit mode if Cmd is held (used for alignment cycling)
+		if (e.metaKey) return;
+		isEditable = true;
+		isEditing.value = true;
+		document.addEventListener('click', handleClickOutside);
+	}
+	function onclick(e) {
+		if (isEditable) {
+			e.stopPropagation();
+			// If we are inside a contenteditable element, don't propagate the click event
+			e.preventDefault();
+			return false;
+		}
+	}
+</script>
+
+{#if isEditable}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<div
+		class="textarea"
+		role="textbox"
+		aria-multiline="true"
+		tabindex="0"
+		bind:this={textarea}
+		onblur={cancelEdit}
+		{onclick}
+		ondblclick={handleDoubleClick}
+		contenteditable
+		bind:innerText={text}
+		style:text-align={alignment}
+	></div>
+{:else}
+	<div
+		class="text-display"
+		ondblclick={handleDoubleClick}
+		onkeydown={(e) => e.key === 'Enter' && handleDoubleClick()}
+		role="button"
+		tabindex="0"
+		aria-label="Double-click or press Enter to edit"
+		style:text-align={alignment}
+	>
+		<pre>{text}</pre>
+	</div>
+{/if}
+
+<style>
+	.textarea[contenteditable] {
+		outline: none;
+		position: relative;
+		white-space: pre-wrap;
+	}
+	.textarea[contenteditable]:after {
+		position: absolute;
+		content: '';
+		top: -2px;
+		right: -4px;
+		bottom: -2px;
+		left: -4px;
+		pointer-events: none;
+		border-radius: 3px;
+		border: 2px solid #007bff;
+		box-shadow: 0 0 5px #007bff50;
+	}
+	pre {
+		margin: 0;
+		font-family: inherit;
+		white-space: pre-wrap;
+		word-wrap: break-word;
+	}
+</style>

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

@@ -0,0 +1,16 @@
+export default EditableText;
+export type Ref<T> = import("../types.js").Ref<T>;
+type EditableText = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const EditableText: import("svelte").Component<{
+    text?: any;
+    isEditable?: boolean;
+    alignment: any;
+}, {}, "text" | "isEditable">;
+type $$ComponentProps = {
+    text?: any;
+    isEditable?: boolean;
+    alignment: any;
+};

package/dist/components/ResizeHandles.svelte

@@ -0,0 +1,146 @@
+<!--
+  @component
+  Horizontal resize handles for annotation text boxes.
+  Supports west (left) and east (right) resizing only.
+-->
+<script>
+	import { getContext } from 'svelte';
+
+	let {
+		/** Which handles to show: 'west', 'east', or both */
+		grabbers = ['west', 'east'],
+		/** Current width in pixels (bound) - number or "Npx" string */
+		width = $bindable(),
+		/** Callback when resizing */
+		ondrag,
+		/** Container selector for position calculations */
+		containerClass = '.chart-container'
+	} = $props();
+
+	/** Parse width to number */
+	function parseWidth(w) {
+		if (typeof w === 'number') return w;
+		if (typeof w === 'string') return parseInt(w) || 0;
+		return 0;
+	}
+
+	const { padding } = getContext('LayerCake');
+
+	let active = $state(null);
+	let initialRect = $state(null);
+	let initialPos = $state(null);
+
+	function onmousedown(event) {
+		event.stopPropagation();
+		active = event.target;
+		const rect = active.parentElement.getBoundingClientRect();
+		initialRect = {
+			width: rect.width,
+			left: rect.left,
+			top: rect.top
+		};
+		initialPos = { x: event.pageX };
+		active.classList.add('selected');
+
+		window.addEventListener('mousemove', onmousemove);
+		window.addEventListener('mouseup', onmouseup);
+	}
+
+	function onmouseup() {
+		if (!active) return;
+
+		active.classList.remove('selected');
+		active = null;
+		initialRect = null;
+		initialPos = null;
+
+		window.removeEventListener('mousemove', onmousemove);
+		window.removeEventListener('mouseup', onmouseup);
+	}
+
+	function onmousemove(event) {
+		if (!active) return;
+
+		const isEast = active.classList.contains('east');
+		const isWest = active.classList.contains('west');
+
+		if (isEast) {
+			const delta = event.pageX - initialPos.x;
+			const newWidth = Math.round(initialRect.width + delta);
+			if (newWidth < 50) return;
+			width = `${newWidth}px`;
+			ondrag();
+		}
+
+		if (isWest) {
+			const delta = initialPos.x - event.pageX;
+			const newWidth = Math.round(initialRect.width + delta);
+			if (newWidth < 50) return;
+
+			width = `${newWidth}px`;
+
+			// Calculate new position - the left edge moves with the mouse
+			const parent = active.parentElement.closest(containerClass)?.getBoundingClientRect();
+			if (parent) {
+				const newLeft = event.pageX - parent.left - $padding.left;
+				const newTop = initialRect.top - parent.top - $padding.top;
+				ondrag([newLeft, newTop]);
+			} else {
+				ondrag();
+			}
+		}
+		}
+
+	/** Keyboard resize handler */
+	function onResize(delta) {
+		const currentWidth = parseWidth(width);
+		const newWidth = Math.max(50, currentWidth + delta);
+		width = `${newWidth}px`;
+		ondrag();
+	}
+</script>
+
+{#each grabbers as grabber}
+	<div
+		class="grabber {grabber}"
+		{onmousedown}
+		onkeydown={(e) => {
+			if (e.key === 'ArrowLeft') { onResize(-10); e.preventDefault(); }
+			if (e.key === 'ArrowRight') { onResize(10); e.preventDefault(); }
+		}}
+		role="slider"
+		tabindex="0"
+		aria-label="Resize handle - use arrow keys to adjust width"
+		aria-valuenow={width}
+	></div>
+{/each}
+
+<style>
+	.grabber {
+		position: absolute;
+		box-sizing: border-box;
+		transition: opacity 250ms;
+		opacity: 0;
+		z-index: 9999;
+		width: 3px;
+		height: 70%;
+		top: 50%;
+		background: red;
+		border-radius: 2px;
+		cursor: col-resize;
+	}
+
+	.grabber.west {
+		left: -0.5px;
+		transform: translateX(-50%) translateY(-50%);
+	}
+
+	.grabber.east {
+		right: -0.5px;
+		transform: translateX(50%) translateY(-50%);
+	}
+
+	.grabber.selected {
+		opacity: 1;
+	}
+</style>

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

@@ -0,0 +1,21 @@
+export default ResizeHandles;
+type ResizeHandles = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Horizontal resize handles for annotation text boxes.
+ * Supports west (left) and east (right) resizing only.
+ */
+declare const ResizeHandles: import("svelte").Component<{
+    grabbers?: any[];
+    width?: any;
+    ondrag: any;
+    containerClass?: string;
+}, {}, "width">;
+type $$ComponentProps = {
+    grabbers?: any[];
+    width?: any;
+    ondrag: any;
+    containerClass?: string;
+};

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Annotations } from "./Annotations.svelte";
+export { default as AnnotationsEditor } from "./Editor.svelte";
+export { default as AnnotationsStatic } from "./Static.svelte";
+export type Annotation = import("./types.js").Annotation;
+export type Arrow = import("./types.js").Arrow;
+export type ArrowSource = import("./types.js").ArrowSource;
+export type ArrowTarget = import("./types.js").ArrowTarget;

package/dist/index.js

@@ -0,0 +1,11 @@
+export { default as Annotations } from './Annotations.svelte';
+export { default as AnnotationsEditor } from './Editor.svelte';
+export { default as AnnotationsStatic } from './Static.svelte';
+
+// Re-export types for consumers
+/**
+ * @typedef {import('./types.js').Annotation} Annotation
+ * @typedef {import('./types.js').Arrow} Arrow
+ * @typedef {import('./types.js').ArrowSource} ArrowSource
+ * @typedef {import('./types.js').ArrowTarget} ArrowTarget
+ */

package/dist/modules/arrowUtils.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Create an SVG arc path between two points.
+ * Adapted from bizweekgraphics/swoopyarrows
+ *
+ * @param {{ x: number, y: number }} source - Start point
+ * @param {{ x: number, y: number }} target - End point
+ * @param {boolean|null} clockwise - Arc direction (null for straight line)
+ * @param {number} [angle=Math.PI/2] - Arc angle in radians
+ * @returns {string} SVG path string
+ */
+export function createArrowPath(source: {
+    x: number;
+    y: number;
+}, target: {
+    x: number;
+    y: number;
+}, clockwise: boolean | null, angle?: number): string;