@opendata-ai/openchart-svelte 6.2.1 → 6.4.1

package/dist/Chart.svelte

@@ -12,6 +12,7 @@ import type {
   ChartSpec,
   DarkMode,
   ElementEdit,
+  ElementRef,
   GraphSpec,
   LayerSpec,
   MarkEvent,
@@ -33,7 +34,11 @@ let {
   onannotationclick,
   onannotationedit,
   onedit,
+  onselect,
+  ondeselect,
+  ontextedit,
   ondatapointclick,
+  selectedElement: selectedElementProp,
   class: className,
   style,
 }: {
@@ -47,7 +52,11 @@ let {
   onannotationclick?: (annotation: Annotation, event: MouseEvent) => void;
   onannotationedit?: (annotation: TextAnnotation, offset: AnnotationOffset) => void;
   onedit?: (edit: ElementEdit) => void;
+  onselect?: (element: ElementRef) => void;
+  ondeselect?: (element: ElementRef) => void;
+  ontextedit?: (element: ElementRef, oldText: string, newText: string) => void;
   ondatapointclick?: (data: Record<string, unknown>) => void;
+  selectedElement?: ElementRef;
   class?: string;
   style?: string;
 } = $props();
@@ -84,6 +93,10 @@ const stableHandlers: MountOptions = {
 const stableOnAnnotationEdit = (annotation: TextAnnotation, offset: AnnotationOffset) =>
   untrack(() => onannotationedit)?.(annotation, offset);
 const stableOnEdit = (edit: ElementEdit) => untrack(() => onedit)?.(edit);
+const stableOnSelect = (element: ElementRef) => untrack(() => onselect)?.(element);
+const stableOnDeselect = (element: ElementRef) => untrack(() => ondeselect)?.(element);
+const stableOnTextEdit = (element: ElementRef, oldText: string, newText: string) =>
+  untrack(() => ontextedit)?.(element, oldText, newText);
 
 let prevSpec = '';
 
@@ -99,6 +112,10 @@ $effect(() => {
 
   const hasAnnotationEdit = untrack(() => onannotationedit) !== undefined;
   const hasEdit = untrack(() => onedit) !== undefined;
+  const hasSelect = untrack(() => onselect) !== undefined;
+  const hasDeselect = untrack(() => ondeselect) !== undefined;
+  const hasTextEdit = untrack(() => ontextedit) !== undefined;
+  const currentSelectedElement = untrack(() => selectedElementProp);
 
   const options: MountOptions = {
     theme: resolvedTheme,
@@ -107,6 +124,10 @@ $effect(() => {
     ...stableHandlers,
     ...(hasAnnotationEdit ? { onAnnotationEdit: stableOnAnnotationEdit } : {}),
     ...(hasEdit ? { onEdit: stableOnEdit } : {}),
+    ...(hasSelect ? { onSelect: stableOnSelect } : {}),
+    ...(hasDeselect ? { onDeselect: stableOnDeselect } : {}),
+    ...(hasTextEdit ? { onTextEdit: stableOnTextEdit } : {}),
+    ...(currentSelectedElement ? { selectedElement: currentSelectedElement } : {}),
   };
 
   instance = createChart(containerEl, currentSpec, options);
@@ -121,9 +142,36 @@ $effect(() => {
   const specString = JSON.stringify(currentSpec);
   if (specString !== prevSpec) {
     prevSpec = specString;
-    instance.update(currentSpec);
+    instance.update(currentSpec, { selectedElement: untrack(() => selectedElementProp) });
   }
 });
+
+// Effect 3: Watch selectedElement prop changes.
+$effect(() => {
+  const sel = selectedElementProp;
+  // Read instance without tracking to avoid coupling to Effect 1
+  const inst = untrack(() => instance);
+  if (!inst) return;
+
+  if (sel) {
+    inst.select(sel);
+  } else {
+    inst.deselect();
+  }
+});
+
+// Imperative methods exposed via component exports
+export function getSelectedElement(): ElementRef | null {
+  return instance?.getSelectedElement() ?? null;
+}
+
+export function select(ref: ElementRef): void {
+  instance?.select(ref);
+}
+
+export function deselect(): void {
+  instance?.deselect();
+}
 </script>
 
 <div

package/dist/Chart.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Annotation, AnnotationOffset, ChartSpec, DarkMode, ElementEdit, GraphSpec, LayerSpec, MarkEvent, TextAnnotation, ThemeConfig } from '@opendata-ai/openchart-core';
+import type { Annotation, AnnotationOffset, ChartSpec, DarkMode, ElementEdit, ElementRef, GraphSpec, LayerSpec, MarkEvent, TextAnnotation, ThemeConfig } from '@opendata-ai/openchart-core';
 type $$ComponentProps = {
     spec: ChartSpec | LayerSpec | GraphSpec;
     theme?: ThemeConfig;
@@ -10,11 +10,19 @@ type $$ComponentProps = {
     onannotationclick?: (annotation: Annotation, event: MouseEvent) => void;
     onannotationedit?: (annotation: TextAnnotation, offset: AnnotationOffset) => void;
     onedit?: (edit: ElementEdit) => void;
+    onselect?: (element: ElementRef) => void;
+    ondeselect?: (element: ElementRef) => void;
+    ontextedit?: (element: ElementRef, oldText: string, newText: string) => void;
     ondatapointclick?: (data: Record<string, unknown>) => void;
+    selectedElement?: ElementRef;
     class?: string;
     style?: string;
 };
-declare const Chart: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Chart: import("svelte").Component<$$ComponentProps, {
+    getSelectedElement: () => ElementRef | null;
+    select: (ref: ElementRef) => void;
+    deselect: () => void;
+}, "">;
 type Chart = ReturnType<typeof Chart>;
 export default Chart;
 //# sourceMappingURL=Chart.svelte.d.ts.map

package/dist/Chart.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.svelte.d.ts","sourceRoot":"","sources":["../src/Chart.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,UAAU,EACV,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,WAAW,EACX,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EACd,WAAW,EACZ,MAAM,6BAA6B,CAAC;AAKpC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IACxC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5D,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACxE,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClF,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAsGF,QAAA,MAAM,KAAK,sDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Chart.svelte.d.ts","sourceRoot":"","sources":["../src/Chart.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,UAAU,EACV,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,WAAW,EACX,UAAU,EACV,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EACd,WAAW,EACZ,MAAM,6BAA6B,CAAC;AAKpC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IACxC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5D,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACxE,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClF,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,KAAK,IAAI,CAAC;IAC3C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC3D,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiJF,QAAA,MAAM,KAAK;8BAlBqB,UAAU,GAAG,IAAI;kBAI3B,UAAU,KAAG,IAAI;oBAIjB,IAAI;MAUyB,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-svelte",
-  "version": "6.2.1",
+  "version": "6.4.1",
   "description": "Svelte components for openchart: <Chart />, <DataTable />, <Graph />, <VizThemeProvider />",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -51,16 +51,16 @@
     "typecheck": "svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "6.2.1",
-    "@opendata-ai/openchart-engine": "6.2.1",
-    "@opendata-ai/openchart-vanilla": "6.2.1"
+    "@opendata-ai/openchart-core": "6.4.1",
+    "@opendata-ai/openchart-engine": "6.4.1",
+    "@opendata-ai/openchart-vanilla": "6.4.1"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.3.0",
-    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@testing-library/svelte": "^5.2.0",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0"

package/src/Chart.svelte

@@ -12,6 +12,7 @@ import type {
   ChartSpec,
   DarkMode,
   ElementEdit,
+  ElementRef,
   GraphSpec,
   LayerSpec,
   MarkEvent,
@@ -33,7 +34,11 @@ let {
   onannotationclick,
   onannotationedit,
   onedit,
+  onselect,
+  ondeselect,
+  ontextedit,
   ondatapointclick,
+  selectedElement: selectedElementProp,
   class: className,
   style,
 }: {
@@ -47,7 +52,11 @@ let {
   onannotationclick?: (annotation: Annotation, event: MouseEvent) => void;
   onannotationedit?: (annotation: TextAnnotation, offset: AnnotationOffset) => void;
   onedit?: (edit: ElementEdit) => void;
+  onselect?: (element: ElementRef) => void;
+  ondeselect?: (element: ElementRef) => void;
+  ontextedit?: (element: ElementRef, oldText: string, newText: string) => void;
   ondatapointclick?: (data: Record<string, unknown>) => void;
+  selectedElement?: ElementRef;
   class?: string;
   style?: string;
 } = $props();
@@ -84,6 +93,10 @@ const stableHandlers: MountOptions = {
 const stableOnAnnotationEdit = (annotation: TextAnnotation, offset: AnnotationOffset) =>
   untrack(() => onannotationedit)?.(annotation, offset);
 const stableOnEdit = (edit: ElementEdit) => untrack(() => onedit)?.(edit);
+const stableOnSelect = (element: ElementRef) => untrack(() => onselect)?.(element);
+const stableOnDeselect = (element: ElementRef) => untrack(() => ondeselect)?.(element);
+const stableOnTextEdit = (element: ElementRef, oldText: string, newText: string) =>
+  untrack(() => ontextedit)?.(element, oldText, newText);
 
 let prevSpec = '';
 
@@ -99,6 +112,10 @@ $effect(() => {
 
   const hasAnnotationEdit = untrack(() => onannotationedit) !== undefined;
   const hasEdit = untrack(() => onedit) !== undefined;
+  const hasSelect = untrack(() => onselect) !== undefined;
+  const hasDeselect = untrack(() => ondeselect) !== undefined;
+  const hasTextEdit = untrack(() => ontextedit) !== undefined;
+  const currentSelectedElement = untrack(() => selectedElementProp);
 
   const options: MountOptions = {
     theme: resolvedTheme,
@@ -107,6 +124,10 @@ $effect(() => {
     ...stableHandlers,
     ...(hasAnnotationEdit ? { onAnnotationEdit: stableOnAnnotationEdit } : {}),
     ...(hasEdit ? { onEdit: stableOnEdit } : {}),
+    ...(hasSelect ? { onSelect: stableOnSelect } : {}),
+    ...(hasDeselect ? { onDeselect: stableOnDeselect } : {}),
+    ...(hasTextEdit ? { onTextEdit: stableOnTextEdit } : {}),
+    ...(currentSelectedElement ? { selectedElement: currentSelectedElement } : {}),
   };
 
   instance = createChart(containerEl, currentSpec, options);
@@ -121,9 +142,36 @@ $effect(() => {
   const specString = JSON.stringify(currentSpec);
   if (specString !== prevSpec) {
     prevSpec = specString;
-    instance.update(currentSpec);
+    instance.update(currentSpec, { selectedElement: untrack(() => selectedElementProp) });
   }
 });
+
+// Effect 3: Watch selectedElement prop changes.
+$effect(() => {
+  const sel = selectedElementProp;
+  // Read instance without tracking to avoid coupling to Effect 1
+  const inst = untrack(() => instance);
+  if (!inst) return;
+
+  if (sel) {
+    inst.select(sel);
+  } else {
+    inst.deselect();
+  }
+});
+
+// Imperative methods exposed via component exports
+export function getSelectedElement(): ElementRef | null {
+  return instance?.getSelectedElement() ?? null;
+}
+
+export function select(ref: ElementRef): void {
+  instance?.select(ref);
+}
+
+export function deselect(): void {
+  instance?.deselect();
+}
 </script>
 
 <div