@mhkeller/layercake-annotations 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +2 -0
  2. package/dist/Editor.svelte +32 -17
  3. package/dist/components/AnnotationEditor.svelte +1 -1
  4. package/dist/components/AnnotationsData.svelte +1 -1
  5. package/dist/modules/newAnnotation.js +2 -2
  6. package/dist/types.d.ts +4 -0
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -70,6 +70,8 @@ import annotations from 'annotations.js' // ✗ edits won't persist
70
70
  text: 'Peak value', // Annotation text (supports line breaks)
71
71
  width: '120px', // Optional: fixed width
72
72
  align: 'left', // Optional: 'left', 'center', or 'right'
73
+ style: 'background: yellow;', // Optional: inline CSS styles
74
+ class: 'highlight', // Optional: CSS class name(s)
73
75
  arrows: [] // Array of arrows (see below)
74
76
  }
75
77
  ```
package/dist/Editor.svelte CHANGED
@@ -45,7 +45,6 @@
45
45
  * State vars
46
46
  */
47
47
  let idCounter = Math.max(...annos.map((d) => d.id), -1);
48
- let annotations = $state(annos);
49
48
 
50
49
  /** @type {Ref<boolean>} */
51
50
  const isEditing = createRef(false);
@@ -75,31 +74,32 @@
75
74
  yScale: $yScale,
76
75
  config: $config
77
76
  });
78
- annotations.push(annotation);
79
- saveConfig_debounced(annotations);
77
+ annos.push(annotation);
78
+ saveConfig_debounced(annos);
80
79
  }
81
80
 
82
81
  /**
83
82
  * Delete an annotation from the chart
84
83
  */
85
84
  async function deleteAnnotation(id) {
86
- annotations = annotations.filter((d) => d.id !== id);
87
- saveConfig_debounced(annotations);
85
+ // Reassign annos (the bindable prop) so deletion propagates to parent
86
+ annos = annos.filter((d) => d.id !== id);
87
+ saveConfig_debounced(annos);
88
88
  }
89
89
 
90
90
  /**
91
91
  * Modify the annotation's coordinates on drag
92
92
  */
93
93
  function modifyAnnotation(id, newProps) {
94
- annotations.forEach((d, i) => {
94
+ annos.forEach((d, i) => {
95
95
  if (d.id === id) {
96
- annotations[i] = {
96
+ annos[i] = {
97
97
  ...d,
98
98
  ...newProps
99
99
  };
100
100
  }
101
101
  });
102
- saveConfig_debounced(annotations);
102
+ saveConfig_debounced(annos);
103
103
  }
104
104
 
105
105
  /**
@@ -107,7 +107,7 @@
107
107
  * Arrow structure: { side, clockwise, source: { dx, dy }, target: { [xKey], [yKey] } }
108
108
  */
109
109
  function setArrow(id, arrow) {
110
- const annotation = annotations.find((d) => d.id === id);
110
+ const annotation = annos.find((d) => d.id === id);
111
111
  if (!annotation) return;
112
112
 
113
113
  const existingIndex = annotation.arrows.findIndex((a) => a.side === arrow.side);
@@ -118,28 +118,28 @@
118
118
  annotation.arrows.push(arrow);
119
119
  }
120
120
 
121
- saveConfig_debounced(annotations);
121
+ saveConfig_debounced(annos);
122
122
  }
123
123
 
124
124
  /**
125
125
  * Modify an arrow's properties (e.g., clockwise)
126
126
  */
127
127
  function modifyArrow(id, side, attrs) {
128
- const annotation = annotations.find((d) => d.id === id);
128
+ const annotation = annos.find((d) => d.id === id);
129
129
  if (!annotation) return;
130
130
 
131
131
  const arrow = annotation.arrows.find((a) => a.side === side);
132
132
  if (!arrow) return;
133
133
 
134
134
  Object.assign(arrow, attrs);
135
- saveConfig_debounced(annotations);
135
+ saveConfig_debounced(annos);
136
136
  }
137
137
 
138
138
  /**
139
139
  * Delete an arrow from an annotation
140
140
  */
141
141
  function deleteArrow(id, side) {
142
- const annotation = annotations.find((d) => d.id === id);
142
+ const annotation = annos.find((d) => d.id === id);
143
143
  if (!annotation) return;
144
144
 
145
145
  const len = annotation.arrows.length;
@@ -149,7 +149,7 @@
149
149
  if (len === annotation.arrows.length) {
150
150
  deleteAnnotation(annotation.id);
151
151
  }
152
- saveConfig_debounced(annotations);
152
+ saveConfig_debounced(annos);
153
153
  }
154
154
 
155
155
  /**
@@ -165,7 +165,7 @@
165
165
  } else if (hover.type === 'arrow' && hover.side) {
166
166
  deleteArrow(hover.annotationId, hover.side);
167
167
  }
168
- saveConfig_debounced(annotations);
168
+ saveConfig_debounced(annos);
169
169
  }
170
170
  }
171
171
 
@@ -182,7 +182,7 @@
182
182
  {/snippet}
183
183
 
184
184
  <Svg {defs}>
185
- <Arrows {annotations} />
185
+ <Arrows annotations={annos} />
186
186
  </Svg>
187
187
 
188
188
  <Html>
@@ -196,7 +196,7 @@
196
196
  ></div>
197
197
 
198
198
  <div class="layercake-annotations">
199
- {#each annotations as d (d.id)}
199
+ {#each annos as d (d.id)}
200
200
  <AnnotationEditor {d} {containerClass} />
201
201
  {/each}
202
202
  </div>
@@ -206,8 +206,23 @@
206
206
 
207
207
  <style>
208
208
  .note-listener {
209
+ position: absolute;
210
+ top: 0;
211
+ left: 0;
209
212
  width: 100%;
210
213
  height: 100%;
211
214
  cursor: copy;
215
+ outline: none;
216
+ z-index: 0;
217
+ }
218
+ .layercake-annotations {
219
+ position: relative;
220
+ width: 100%;
221
+ height: 100%;
222
+ z-index: 1;
223
+ pointer-events: none;
224
+ }
225
+ .layercake-annotations :global(.draggable) {
226
+ pointer-events: auto;
212
227
  }
213
228
  </style>
package/dist/components/AnnotationEditor.svelte CHANGED
@@ -108,7 +108,7 @@
108
108
  bind:noteDimensions
109
109
  {containerClass}
110
110
  >
111
- <div class="layercake-annotation" data-id={d.id}>
111
+ <div class="layercake-annotation {d.class || ''}" style={d.style} data-id={d.id}>
112
112
  <EditableText
113
113
  bind:text={d.text}
114
114
  bind:isEditable
package/dist/components/AnnotationsData.svelte CHANGED
@@ -25,7 +25,7 @@
25
25
  style:top={`calc(${$yGet(d)}${units} + ${d.dy || 0}%)`}
26
26
  style:width={d.width}
27
27
  >
28
- <div class="layercake-annotation" style:text-align={d.align || 'left'}>
28
+ <div class="layercake-annotation {d.class || ''}" style={d.style} style:text-align={d.align || 'left'}>
29
29
  <pre>{getText(d)}</pre>
30
30
  </div>
31
31
  </div>
package/dist/modules/newAnnotation.js CHANGED
@@ -19,8 +19,8 @@ export default function newAnnotation(e, id, { xScale, yScale, config }) {
19
19
  [config.y]: yVal[0],
20
20
  dx: xVal[1],
21
21
  dy: yVal[1],
22
- text: 'Enter your note here...',
23
- width: '168px',
22
+ text: 'New note...',
23
+ width: '91px',
24
24
  arrows: []
25
25
  };
26
26
  }
package/dist/types.d.ts CHANGED
@@ -58,6 +58,10 @@ export interface Annotation {
58
58
  width?: string;
59
59
  /** Text alignment: 'left', 'center', or 'right' */
60
60
  align?: 'left' | 'center' | 'right';
61
+ /** Custom inline CSS styles (e.g., "background: yellow; padding: 8px;") */
62
+ style?: string;
63
+ /** Custom CSS class name(s) to add to the annotation element */
64
+ class?: string;
61
65
  /** Arrows attached to this annotation */
62
66
  arrows: Arrow[];
63
67
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mhkeller/layercake-annotations",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "vite build && pnpm package",