@opendata-ai/openchart-vanilla 6.3.0 → 6.4.1

package/dist/index.js

@@ -3255,7 +3255,7 @@ function escapeHtml(str) {
 }
 
 // src/mount.ts
-import { isLayerSpec } from "@opendata-ai/openchart-core";
+import { elementRef, isLayerSpec } from "@opendata-ai/openchart-core";
 import { compileChart, compileLayer } from "@opendata-ai/openchart-engine";
 
 // src/svg-renderer.ts
@@ -3847,6 +3847,9 @@ function renderAnnotation(parent, annotation, index2) {
   const g = createSVGElement("g");
   g.setAttribute("class", `viz-annotation viz-annotation-${annotation.type}`);
   g.setAttribute("data-annotation-index", String(index2));
+  if (annotation.id) {
+    g.setAttribute("data-annotation-id", annotation.id);
+  }
   if (annotation.rect) {
     const rect = createSVGElement("rect");
     rect.setAttribute("class", "viz-annotation-range");
@@ -4181,6 +4184,159 @@ function renderChartSVG(layout, container) {
   return svg;
 }
 
+// src/text-edit-overlay.ts
+function getScale(svg) {
+  const viewBox = svg.viewBox?.baseVal;
+  const svgRect = svg.getBoundingClientRect();
+  return {
+    scaleX: viewBox?.width && svgRect.width ? svgRect.width / viewBox.width : 1,
+    scaleY: viewBox?.height && svgRect.height ? svgRect.height / viewBox.height : 1
+  };
+}
+function getTextStyles(targetElement, scale) {
+  const computed = window.getComputedStyle(targetElement);
+  const svgFontSize = parseFloat(
+    targetElement.getAttribute("font-size") ?? computed.fontSize ?? "14"
+  );
+  const pixelFontSize = svgFontSize * scale.scaleY;
+  const fontFamily = targetElement.getAttribute("font-family") ?? computed.fontFamily ?? "inherit";
+  const fontWeight = targetElement.getAttribute("font-weight") ?? computed.fontWeight ?? "400";
+  const fill = targetElement.style.getPropertyValue("fill") || targetElement.getAttribute("fill") || computed.color || "#000";
+  const textAnchor = targetElement.getAttribute("text-anchor") ?? "start";
+  let textAlign = "left";
+  if (textAnchor === "middle") textAlign = "center";
+  else if (textAnchor === "end") textAlign = "right";
+  return {
+    fontFamily,
+    fontSize: `${pixelFontSize}px`,
+    fontWeight,
+    color: fill,
+    textAlign,
+    lineHeight: "1.3"
+  };
+}
+function computePosition2(targetElement, svg, container) {
+  const bbox = targetElement.getBBox();
+  const scale = getScale(svg);
+  const svgRect = svg.getBoundingClientRect();
+  const containerRect = container.getBoundingClientRect();
+  const padding = 4;
+  const left = bbox.x * scale.scaleX + (svgRect.left - containerRect.left) - padding;
+  const top = bbox.y * scale.scaleY + (svgRect.top - containerRect.top) - padding;
+  const width = bbox.width * scale.scaleX + padding * 2;
+  const height = bbox.height * scale.scaleY + padding * 2;
+  return {
+    top: Math.max(0, top),
+    left: Math.max(0, left),
+    width: Math.max(width, 60),
+    height: Math.max(height, 24)
+  };
+}
+function createTextEditOverlay(config) {
+  const { container, svg, targetElement, currentText, onCommit, onCancel } = config;
+  let destroyed = false;
+  const originalOpacity = targetElement.getAttribute("opacity");
+  targetElement.setAttribute("opacity", "0");
+  const scale = getScale(svg);
+  const styles = getTextStyles(targetElement, scale);
+  const position = computePosition2(targetElement, svg, container);
+  const textarea = document.createElement("textarea");
+  textarea.value = currentText;
+  const containerPosition = window.getComputedStyle(container).position;
+  const containerWasStatic = containerPosition === "static";
+  if (containerWasStatic) {
+    container.style.position = "relative";
+  }
+  Object.assign(textarea.style, {
+    position: "absolute",
+    top: `${position.top}px`,
+    left: `${position.left}px`,
+    width: `${position.width}px`,
+    minHeight: `${position.height}px`,
+    fontFamily: styles.fontFamily,
+    fontSize: styles.fontSize,
+    fontWeight: styles.fontWeight,
+    color: styles.color,
+    textAlign: styles.textAlign,
+    lineHeight: styles.lineHeight,
+    padding: "2px 4px",
+    margin: "0",
+    border: "1px solid rgba(79, 70, 229, 0.4)",
+    borderRadius: "3px",
+    background: "rgba(255, 255, 255, 0.95)",
+    outline: "none",
+    resize: "none",
+    overflow: "hidden",
+    boxSizing: "border-box",
+    zIndex: "10000",
+    // Remove default textarea appearance
+    WebkitAppearance: "none",
+    appearance: "none"
+  });
+  container.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+  function destroy() {
+    if (destroyed) return;
+    destroyed = true;
+    if (originalOpacity !== null) {
+      targetElement.setAttribute("opacity", originalOpacity);
+    } else {
+      targetElement.removeAttribute("opacity");
+    }
+    textarea.removeEventListener("keydown", handleKeyDown);
+    document.removeEventListener("mousedown", handleClickOutside);
+    resizeObserver.disconnect();
+    if (containerWasStatic) {
+      container.style.position = "";
+    }
+    if (textarea.parentNode) {
+      textarea.parentNode.removeChild(textarea);
+    }
+  }
+  function commit() {
+    if (destroyed) return;
+    const newText = textarea.value;
+    destroy();
+    onCommit(newText);
+  }
+  function cancel() {
+    if (destroyed) return;
+    destroy();
+    onCancel();
+  }
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      commit();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      cancel();
+    }
+  };
+  textarea.addEventListener("keydown", handleKeyDown);
+  const handleClickOutside = (e) => {
+    if (!textarea.contains(e.target)) {
+      commit();
+    }
+  };
+  requestAnimationFrame(() => {
+    if (!destroyed) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+  });
+  const resizeObserver = new ResizeObserver(() => {
+    if (destroyed) return;
+    const newPosition = computePosition2(targetElement, svg, container);
+    textarea.style.top = `${newPosition.top}px`;
+    textarea.style.left = `${newPosition.left}px`;
+    textarea.style.width = `${newPosition.width}px`;
+    textarea.style.minHeight = `${newPosition.height}px`;
+  });
+  resizeObserver.observe(container);
+  return { destroy };
+}
+
 // src/mount.ts
 function resolveDarkMode2(mode) {
   if (mode === "force") return true;
@@ -4458,7 +4614,7 @@ function createDragHandler(config) {
   let activeDocTouchMove = null;
   let activeDocTouchEnd = null;
   let activeDocTouchCancel = null;
-  function getScale() {
+  function getScale2() {
     const viewBox = svg.viewBox?.baseVal;
     const svgRect = svg.getBoundingClientRect();
     return {
@@ -4468,7 +4624,7 @@ function createDragHandler(config) {
   }
   function startDrag(startX, startY) {
     setDragging(true);
-    const { scaleX, scaleY } = getScale();
+    const { scaleX, scaleY } = getScale2();
     element.style.cursor = "grabbing";
     svg.style.userSelect = "none";
     const handleMove = (clientX, clientY) => {
@@ -5125,6 +5281,167 @@ function createScreenReaderTable(layout, container) {
   container.appendChild(table);
   return table;
 }
+var EDITABLE_HOVER_CSS = `
+.viz-editable-hover {
+  outline: 1.5px solid rgba(79, 70, 229, 0.35);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+`;
+function makeEditable(svg) {
+  svg.setAttribute("tabindex", "0");
+  svg.style.outline = "none";
+  const style = document.createElementNS("http://www.w3.org/2000/svg", "style");
+  style.textContent = EDITABLE_HOVER_CSS;
+  svg.insertBefore(style, svg.firstChild);
+}
+function hasEditingCallbacks(opts) {
+  return !!(opts?.onEdit || opts?.onSelect || opts?.onDeselect || opts?.onTextEdit);
+}
+function findElementByRef(svg, ref) {
+  switch (ref.type) {
+    case "annotation": {
+      if (ref.id) {
+        const byId = svg.querySelector(`[data-annotation-id="${ref.id}"]`);
+        if (byId) return byId;
+      }
+      return svg.querySelector(`[data-annotation-index="${ref.index}"]`);
+    }
+    case "chrome":
+      return svg.querySelector(`[data-chrome-key="${ref.key}"]`);
+    case "series-label":
+      return svg.querySelector(`.viz-mark-label[data-series="${ref.series}"]`);
+    case "legend":
+      return svg.querySelector(".viz-legend");
+    case "legend-entry":
+      return svg.querySelector(`[data-legend-index="${ref.index}"]`);
+  }
+}
+function buildElementRef(element, _specAnnotations) {
+  const annotationEl = element.closest("[data-annotation-index]");
+  if (annotationEl) {
+    const index2 = Number(annotationEl.getAttribute("data-annotation-index"));
+    const id = annotationEl.getAttribute("data-annotation-id") ?? void 0;
+    return elementRef.annotation(index2, id);
+  }
+  const chromeEl = element.closest("[data-chrome-key]");
+  if (chromeEl) {
+    const key = chromeEl.getAttribute("data-chrome-key");
+    if (key) return elementRef.chrome(key);
+  }
+  const seriesLabelEl = element.closest(".viz-mark-label[data-series]");
+  if (seriesLabelEl) {
+    const series = seriesLabelEl.getAttribute("data-series");
+    if (series) return elementRef.seriesLabel(series);
+  }
+  const legendEntryEl = element.closest("[data-legend-index]");
+  if (legendEntryEl) {
+    const index2 = Number(legendEntryEl.getAttribute("data-legend-index"));
+    const series = legendEntryEl.getAttribute("data-legend-label") ?? "";
+    return elementRef.legendEntry(series, index2);
+  }
+  const legendEl = element.closest(".viz-legend");
+  if (legendEl) return elementRef.legend();
+  return null;
+}
+function getEditableElements(spec, layout) {
+  const refs = [];
+  const chromeKeys = ["title", "subtitle", "source", "byline", "footer"];
+  for (const key of chromeKeys) {
+    if (layout.chrome[key]) {
+      refs.push(elementRef.chrome(key));
+    }
+  }
+  const annotations = "annotations" in spec && Array.isArray(spec.annotations) ? spec.annotations : [];
+  for (let i = 0; i < annotations.length; i++) {
+    refs.push(elementRef.annotation(i, annotations[i].id));
+  }
+  const seriesLabels = [];
+  for (const mark of layout.marks) {
+    if (mark.type === "line" && mark.label?.visible && mark.seriesKey) {
+      seriesLabels.push(mark.seriesKey);
+    }
+  }
+  seriesLabels.sort();
+  for (const series of seriesLabels) {
+    refs.push(elementRef.seriesLabel(series));
+  }
+  if (layout.legend.entries.length > 0) {
+    refs.push(elementRef.legend());
+  }
+  return refs;
+}
+function isTextEditable(ref, specAnnotations) {
+  if (ref.type === "chrome") return true;
+  if (ref.type === "annotation") {
+    const annotation = specAnnotations[ref.index];
+    return annotation?.type === "text";
+  }
+  return false;
+}
+function getElementText(ref, spec) {
+  if (ref.type === "chrome") {
+    const chromeConfig = "chrome" in spec ? spec.chrome : void 0;
+    if (!chromeConfig) return null;
+    const entry = chromeConfig[ref.key];
+    if (typeof entry === "string") return entry;
+    if (typeof entry === "object" && entry !== null && "text" in entry) {
+      return entry.text;
+    }
+    return null;
+  }
+  if (ref.type === "annotation") {
+    const annotations = "annotations" in spec && Array.isArray(spec.annotations) ? spec.annotations : [];
+    const annotation = annotations[ref.index];
+    if (annotation?.type === "text") return annotation.text ?? null;
+    if (annotation?.label) return annotation.label;
+    return null;
+  }
+  return null;
+}
+function refsEqual(a2, b) {
+  if (a2 === null || b === null) return a2 === b;
+  if (a2.type !== b.type) return false;
+  switch (a2.type) {
+    case "annotation": {
+      const bAnno = b;
+      if (a2.id && bAnno.id) return a2.id === bAnno.id;
+      return a2.index === bAnno.index;
+    }
+    case "chrome":
+      return a2.key === b.key;
+    case "series-label":
+      return a2.series === b.series;
+    case "legend":
+      return true;
+    case "legend-entry": {
+      const bEntry = b;
+      return a2.index === bEntry.index && a2.series === bEntry.series;
+    }
+  }
+}
+function renderSelectionOverlay(svg, ref, layout) {
+  const target = findElementByRef(svg, ref);
+  if (!target) return null;
+  const bbox = target.getBBox();
+  const padding = 4;
+  const accentColor = layout.theme.colors.categorical?.[0] ?? "#4f46e5";
+  const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  g.setAttribute("class", "viz-selection-overlay");
+  const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  rect.setAttribute("x", String(bbox.x - padding));
+  rect.setAttribute("y", String(bbox.y - padding));
+  rect.setAttribute("width", String(bbox.width + padding * 2));
+  rect.setAttribute("height", String(bbox.height + padding * 2));
+  rect.setAttribute("rx", "3");
+  rect.setAttribute("fill", "transparent");
+  rect.setAttribute("stroke", accentColor);
+  rect.setAttribute("stroke-width", "1.5");
+  rect.setAttribute("pointer-events", "none");
+  g.appendChild(rect);
+  svg.appendChild(g);
+  return g;
+}
 function createChart(container, spec, options) {
   let currentSpec = spec;
   let currentLayout;
@@ -5138,11 +5455,17 @@ function createChart(container, spec, options) {
   let cleanupChartEvents = null;
   let cleanupAnnotationDrag = null;
   let cleanupEditDrags = null;
+  let cleanupSelection = null;
+  let cleanupKeyboardEdit = null;
   let srTable = null;
   let destroyed = false;
   let isDragging = false;
   let pendingRender = false;
   let resizeTimer = null;
+  let selectedElement = options?.selectedElement ?? null;
+  let overlayElement = null;
+  let isTextEditingActive = false;
+  let textEditCleanup = null;
   const measureText = createMeasureText();
   function compile() {
     const { width, height } = getContainerDimensions();
@@ -5166,6 +5489,198 @@ function createChart(container, spec, options) {
       height: Math.max(rect.height || 400, 100)
     };
   }
+  function getSpecAnnotations() {
+    return "annotations" in currentSpec && Array.isArray(currentSpec.annotations) ? currentSpec.annotations : [];
+  }
+  function selectElement(ref) {
+    if (!svgElement) return;
+    const target = findElementByRef(svgElement, ref);
+    if (!target) return;
+    if (selectedElement && !refsEqual(selectedElement, ref)) {
+      deselectElement();
+    }
+    selectedElement = ref;
+    overlayElement = renderSelectionOverlay(svgElement, ref, currentLayout);
+    options?.onSelect?.(ref);
+    svgElement.focus();
+  }
+  function deselectElement() {
+    if (!selectedElement) return;
+    if (isTextEditingActive && textEditCleanup) {
+      textEditCleanup();
+      textEditCleanup = null;
+      isTextEditingActive = false;
+    }
+    const prev = selectedElement;
+    selectedElement = null;
+    if (overlayElement?.parentNode) {
+      overlayElement.parentNode.removeChild(overlayElement);
+    }
+    overlayElement = null;
+    options?.onDeselect?.(prev);
+  }
+  function enterTextEditing() {
+    if (!svgElement || !selectedElement || isTextEditingActive) return;
+    const specAnnotations = getSpecAnnotations();
+    if (!isTextEditable(selectedElement, specAnnotations)) return;
+    const currentText = getElementText(selectedElement, currentSpec);
+    if (currentText === null) return;
+    const target = findElementByRef(svgElement, selectedElement);
+    if (!target) return;
+    const textEl = target.tagName === "text" ? target : target.querySelector("text");
+    if (!textEl) return;
+    isTextEditingActive = true;
+    const editRef = selectedElement;
+    const overlay = createTextEditOverlay({
+      container,
+      svg: svgElement,
+      targetElement: textEl,
+      currentText,
+      onCommit: (newText) => {
+        isTextEditingActive = false;
+        textEditCleanup = null;
+        if (newText !== currentText) {
+          options?.onTextEdit?.(editRef, currentText, newText);
+          options?.onEdit?.({
+            type: "text-edit",
+            element: editRef,
+            oldText: currentText,
+            newText
+          });
+        }
+      },
+      onCancel: () => {
+        isTextEditingActive = false;
+        textEditCleanup = null;
+      }
+    });
+    textEditCleanup = overlay.destroy;
+  }
+  function wireSelectionEvents() {
+    if (!svgElement) return () => {
+    };
+    const svg = svgElement;
+    const cleanups = [];
+    const handleClick = (e) => {
+      const mouseEvent = e;
+      const target = mouseEvent.target;
+      if (isTextEditingActive) return;
+      const specAnnotations = getSpecAnnotations();
+      const ref = buildElementRef(target, specAnnotations);
+      if (ref) {
+        selectElement(ref);
+      } else {
+        deselectElement();
+      }
+    };
+    svg.addEventListener("click", handleClick);
+    cleanups.push(() => svg.removeEventListener("click", handleClick));
+    const handleMouseEnter = (e) => {
+      const target = e.target.closest(
+        "[data-annotation-index], [data-chrome-key], .viz-mark-label[data-series], .viz-legend, [data-legend-index]"
+      );
+      if (target) {
+        target.classList.add("viz-editable-hover");
+      }
+    };
+    const handleMouseLeave = (e) => {
+      const target = e.target.closest(".viz-editable-hover");
+      if (target) {
+        target.classList.remove("viz-editable-hover");
+      }
+    };
+    svg.addEventListener("mouseenter", handleMouseEnter, true);
+    svg.addEventListener("mouseleave", handleMouseLeave, true);
+    cleanups.push(() => {
+      svg.removeEventListener("mouseenter", handleMouseEnter, true);
+      svg.removeEventListener("mouseleave", handleMouseLeave, true);
+    });
+    const handleDblClick = (e) => {
+      const mouseEvent = e;
+      const target = mouseEvent.target;
+      const specAnnotations = getSpecAnnotations();
+      const ref = buildElementRef(target, specAnnotations);
+      if (ref && isTextEditable(ref, specAnnotations)) {
+        if (!refsEqual(selectedElement, ref)) {
+          selectElement(ref);
+        }
+        enterTextEditing();
+      }
+    };
+    svg.addEventListener("dblclick", handleDblClick);
+    cleanups.push(() => svg.removeEventListener("dblclick", handleDblClick));
+    return () => {
+      for (const cleanup of cleanups) {
+        cleanup();
+      }
+    };
+  }
+  function wireKeyboardEditEvents() {
+    if (!svgElement) return () => {
+    };
+    const svg = svgElement;
+    const handleKeyDown = (e) => {
+      const specAnnotations = getSpecAnnotations();
+      switch (e.key) {
+        case "Delete":
+        case "Backspace": {
+          if (selectedElement && !isTextEditingActive) {
+            e.preventDefault();
+            options?.onEdit?.({ type: "delete", element: selectedElement });
+          }
+          break;
+        }
+        case "Escape": {
+          e.preventDefault();
+          if (isTextEditingActive && textEditCleanup) {
+            textEditCleanup();
+            textEditCleanup = null;
+            isTextEditingActive = false;
+          } else if (selectedElement) {
+            deselectElement();
+          }
+          break;
+        }
+        case "ArrowDown":
+        case "ArrowRight": {
+          if (!isTextEditingActive && selectedElement) {
+            e.preventDefault();
+            const editables = getEditableElements(currentSpec, currentLayout);
+            if (editables.length === 0) break;
+            const currentIndex = editables.findIndex((r) => refsEqual(r, selectedElement));
+            const nextIndex = currentIndex >= editables.length - 1 ? 0 : currentIndex + 1;
+            selectElement(editables[nextIndex]);
+          }
+          break;
+        }
+        case "ArrowUp":
+        case "ArrowLeft": {
+          if (!isTextEditingActive && selectedElement) {
+            e.preventDefault();
+            const editables = getEditableElements(currentSpec, currentLayout);
+            if (editables.length === 0) break;
+            const currentIndex = editables.findIndex((r) => refsEqual(r, selectedElement));
+            const nextIndex = currentIndex <= 0 ? editables.length - 1 : currentIndex - 1;
+            selectElement(editables[nextIndex]);
+          }
+          break;
+        }
+        case "Enter": {
+          if (selectedElement && !isTextEditingActive) {
+            if (isTextEditable(selectedElement, specAnnotations)) {
+              e.preventDefault();
+              enterTextEditing();
+            }
+          }
+          break;
+        }
+      }
+    };
+    svg.addEventListener("keydown", handleKeyDown);
+    return () => {
+      svg.removeEventListener("keydown", handleKeyDown);
+    };
+  }
   function render() {
     if (isDragging) {
       pendingRender = true;
@@ -5199,6 +5714,20 @@ function createChart(container, spec, options) {
       cleanupEditDrags();
       cleanupEditDrags = null;
     }
+    if (cleanupSelection) {
+      cleanupSelection();
+      cleanupSelection = null;
+    }
+    if (cleanupKeyboardEdit) {
+      cleanupKeyboardEdit();
+      cleanupKeyboardEdit = null;
+    }
+    if (textEditCleanup) {
+      textEditCleanup();
+      textEditCleanup = null;
+      isTextEditingActive = false;
+    }
+    overlayElement = null;
     if (svgElement?.parentNode) {
       svgElement.parentNode.removeChild(svgElement);
     }
@@ -5270,6 +5799,20 @@ function createChart(container, spec, options) {
         }
       };
     }
+    if (hasEditingCallbacks(options)) {
+      makeEditable(svgElement);
+      cleanupSelection = wireSelectionEvents();
+      cleanupKeyboardEdit = wireKeyboardEditEvents();
+      if (selectedElement) {
+        const target = findElementByRef(svgElement, selectedElement);
+        if (target) {
+          overlayElement = renderSelectionOverlay(svgElement, selectedElement, currentLayout);
+        } else {
+          selectedElement = null;
+          overlayElement = null;
+        }
+      }
+    }
     srTable = createScreenReaderTable(currentLayout, container);
     container.classList.add("viz-root");
     const isDark = resolveDarkMode2(options?.darkMode);
@@ -5279,9 +5822,12 @@ function createChart(container, spec, options) {
       container.classList.remove("viz-dark");
     }
   }
-  function update(newSpec) {
+  function update(newSpec, updateOpts) {
     if (destroyed) return;
     currentSpec = newSpec;
+    if (updateOpts && "selectedElement" in updateOpts) {
+      selectedElement = updateOpts.selectedElement ?? null;
+    }
     render();
   }
   function resize() {
@@ -5344,6 +5890,21 @@ function createChart(container, spec, options) {
       cleanupEditDrags();
       cleanupEditDrags = null;
     }
+    if (cleanupSelection) {
+      cleanupSelection();
+      cleanupSelection = null;
+    }
+    if (cleanupKeyboardEdit) {
+      cleanupKeyboardEdit();
+      cleanupKeyboardEdit = null;
+    }
+    if (textEditCleanup) {
+      textEditCleanup();
+      textEditCleanup = null;
+      isTextEditingActive = false;
+    }
+    selectedElement = null;
+    overlayElement = null;
     if (disconnectResize) {
       disconnectResize();
       disconnectResize = null;
@@ -5380,6 +5941,20 @@ function createChart(container, spec, options) {
     destroy,
     get layout() {
       return currentLayout;
+    },
+    getSelectedElement() {
+      return selectedElement;
+    },
+    select(ref) {
+      if (destroyed) return;
+      selectElement(ref);
+    },
+    deselect() {
+      if (destroyed) return;
+      deselectElement();
+    },
+    get isEditing() {
+      return isTextEditingActive;
     }
   };
 }
@@ -6500,6 +7075,7 @@ export {
   createGraph,
   createSimulationWorker,
   createTable,
+  createTextEditOverlay,
   createTooltipManager,
   exportCSV,
   exportJPG,