@mhkeller/layercake-annotations 0.2.1 → 0.3.0

package/README.md

@@ -70,6 +70,8 @@ import annotations from 'annotations.js'  // ✗ edits won't persist
   text: 'Peak value',              // Annotation text (supports line breaks)
   width: '120px',                  // Optional: fixed width
   align: 'left',                   // Optional: 'left', 'center', or 'right'
+  style: 'background: yellow;',    // Optional: inline CSS styles
+  class: 'highlight',              // Optional: CSS class name(s)
   arrows: []                       // Array of arrows (see below)
 }
 ```

package/dist/Editor.svelte

@@ -206,9 +206,23 @@
 
 <style>
 	.note-listener {
+		position: absolute;
+		top: 0;
+		left: 0;
 		width: 100%;
 		height: 100%;
 		cursor: copy;
 		outline: none;
+		z-index: 0;
+	}
+	.layercake-annotations {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		z-index: 1;
+		pointer-events: none;
+	}
+	.layercake-annotations :global(.draggable) {
+		pointer-events: auto;
 	}
 </style>

package/dist/components/AnnotationEditor.svelte

@@ -108,7 +108,7 @@
 		bind:noteDimensions
 		{containerClass}
 	>
-		<div class="layercake-annotation" data-id={d.id}>
+		<div class="layercake-annotation {d.class || ''}" style={d.style} data-id={d.id}>
 			<EditableText
 				bind:text={d.text}
 				bind:isEditable

package/dist/components/AnnotationsData.svelte

@@ -25,7 +25,7 @@
 			style:top={`calc(${$yGet(d)}${units} + ${d.dy || 0}%)`}
 			style:width={d.width}
 		>
-			<div class="layercake-annotation" style:text-align={d.align || 'left'}>
+			<div class="layercake-annotation {d.class || ''}" style={d.style} style:text-align={d.align || 'left'}>
 				<pre>{getText(d)}</pre>
 			</div>
 		</div>

package/dist/modules/newAnnotation.js

@@ -19,8 +19,8 @@ export default function newAnnotation(e, id, { xScale, yScale, config }) {
 		[config.y]: yVal[0],
 		dx: xVal[1],
 		dy: yVal[1],
-		text: 'Enter your note here...',
-		width: '168px',
+		text: 'New note...',
+		width: '91px',
 		arrows: []
 	};
 }

package/dist/types.d.ts

@@ -58,6 +58,10 @@ export interface Annotation {
 	width?: string;
 	/** Text alignment: 'left', 'center', or 'right' */
 	align?: 'left' | 'center' | 'right';
+	/** Custom inline CSS styles (e.g., "background: yellow; padding: 8px;") */
+	style?: string;
+	/** Custom CSS class name(s) to add to the annotation element */
+	class?: string;
 	/** Arrows attached to this annotation */
 	arrows: Arrow[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mhkeller/layercake-annotations",
-	"version": "0.2.1",
+	"version": "0.3.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && pnpm package",