@opendata-ai/openchart-vanilla 8.0.0-rc.8 → 8.0.0-rc.9

package/dist/{chunk-UZ7J3NOF.js → chunk-IZQBT6QM.js}

@@ -11,7 +11,7 @@ import {
   resolveMarkFill,
   setAttrs,
   stampAnimationVars
-} from "./chunk-5EOV5JQZ.js";
+} from "./chunk-QW7ZB6NE.js";
 
 // src/export.ts
 function getSVGDimensions(svg) {
@@ -876,6 +876,11 @@ function renderMapSVG(layout, opts) {
     focusIdSet
   );
   renderBorders(cameraGroup, borders);
+  if (animate && animation?.enter && layout.pointMarks.length > 1) {
+    const pointStaggerBudget = animation.enter.duration * 0.5;
+    const perPoint = pointStaggerBudget / (layout.pointMarks.length - 1);
+    svg.style.setProperty("--oc-point-stagger", `${perPoint}ms`);
+  }
   renderPointMarks(cameraGroup, layout.pointMarks, animate ? animation : void 0);
   mapGroup.appendChild(cameraGroup);
   svg.appendChild(mapGroup);
@@ -906,12 +911,14 @@ function renderMapSVG(layout, opts) {
         contentWidth = Math.min(w, ptLegend.bounds.width);
       }
     }
+    const isOverlayContinuous = ptLegend.position === "top-left" && !("entries" in ptLegend && ptLegend.entries);
     const contentCenterY = ptLegend.bounds.y + swatchSize / 2;
-    const bgHeight = swatchSize + padY * 2;
+    const bgHeight = isOverlayContinuous ? ptLegend.bounds.height + padY * 2 : swatchSize + padY * 2;
+    const bgY = isOverlayContinuous ? ptLegend.bounds.y - padY : contentCenterY - bgHeight / 2;
     const bg = createSVGElement2("rect");
     setAttrs2(bg, {
       x: ptLegend.bounds.x - padX,
-      y: contentCenterY - bgHeight / 2,
+      y: bgY,
       width: contentWidth + padX * 2,
       height: bgHeight,
       rx: 4,
@@ -1825,13 +1832,17 @@ function createMap(container, spec, options) {
       fontsReloadPending = false;
       container.dataset.ocFontsState = "ready";
     }
-    if (isFirstRender && currentLayout.focus) {
-      const target = currentLayout.focus.target;
-      currentFocusIds = [...currentLayout.focus.ids];
-      const cam = cameraForTarget(currentLayout, target);
-      currentCamera = cam;
-      if (svgElement) applyMapCamera(svgElement, cam, currentLayout);
-      if (!isAnimating) applyFocusDim(currentFocusIds);
+    if (isFirstRender) {
+      if (currentLayout.focus) {
+        const target = currentLayout.focus.target;
+        currentFocusIds = [...currentLayout.focus.ids];
+        const cam = cameraForTarget(currentLayout, target);
+        currentCamera = cam;
+        if (svgElement) applyMapCamera(svgElement, cam, currentLayout);
+        if (!isAnimating) applyFocusDim(currentFocusIds);
+      } else {
+        currentCamera = cameraForTarget(currentLayout, null);
+      }
     }
     isFirstRender = false;
   }
@@ -2173,6 +2184,104 @@ function createTextEditOverlay(config) {
   resizeObserver.observe(container);
   return { destroy };
 }
+function createTextEditOverlayAtPosition(config) {
+  const { container, svg, position, onCommit, onCancel } = config;
+  let destroyed = false;
+  const scale = getScale(svg);
+  const svgRect = svg.getBoundingClientRect();
+  const containerRect = container.getBoundingClientRect();
+  const padding = 4;
+  const left = position.x * scale.scaleX + (svgRect.left - containerRect.left) - padding;
+  const top = position.y * scale.scaleY + (svgRect.top - containerRect.top) - padding;
+  const computedStyle = window.getComputedStyle(svg);
+  const fontFamily = computedStyle.getPropertyValue("--oc-font-family").trim() || "inherit";
+  const textColor = computedStyle.getPropertyValue("--oc-text-color").trim() || computedStyle.color || "#333";
+  const surfaceColor = computedStyle.getPropertyValue("--oc-surface-color").trim() || "rgba(255, 255, 255, 0.95)";
+  const fontSize = 13 * scale.scaleY;
+  const textarea = document.createElement("textarea");
+  textarea.value = "";
+  textarea.placeholder = "Type annotation text...";
+  const containerPosition = window.getComputedStyle(container).position;
+  const containerWasStatic = containerPosition === "static";
+  if (containerWasStatic) {
+    container.style.position = "relative";
+  }
+  Object.assign(textarea.style, {
+    position: "absolute",
+    top: `${Math.max(0, top)}px`,
+    left: `${Math.max(0, left)}px`,
+    width: "160px",
+    minHeight: "24px",
+    fontFamily,
+    fontSize: `${fontSize}px`,
+    fontWeight: "400",
+    color: textColor,
+    textAlign: "left",
+    lineHeight: "1.3",
+    padding: "2px 4px",
+    margin: "0",
+    border: "1px solid rgba(79, 70, 229, 0.4)",
+    borderRadius: "3px",
+    background: surfaceColor,
+    outline: "none",
+    resize: "none",
+    overflow: "hidden",
+    boxSizing: "border-box",
+    zIndex: "10000",
+    WebkitAppearance: "none",
+    appearance: "none"
+  });
+  container.appendChild(textarea);
+  textarea.focus();
+  function destroy() {
+    if (destroyed) return;
+    destroyed = true;
+    textarea.removeEventListener("keydown", handleKeyDown);
+    document.removeEventListener("mousedown", handleClickOutside);
+    if (containerWasStatic) {
+      container.style.position = "";
+    }
+    if (textarea.parentNode) {
+      textarea.parentNode.removeChild(textarea);
+    }
+  }
+  function commit() {
+    if (destroyed) return;
+    const text = textarea.value.trim();
+    destroy();
+    if (text) {
+      onCommit(text);
+    } else {
+      onCancel();
+    }
+  }
+  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);
+    }
+  });
+  return { destroy };
+}
 
 // src/you-draw-it.ts
 var MIN_TOUCH_TARGET = 24;
@@ -2947,6 +3056,53 @@ function createDragHandler(config) {
   };
 }
 
+// src/interactions/editing-drags.ts
+import {
+  elementRef
+} from "@opendata-ai/openchart-core";
+
+// src/interactions/invert.ts
+function invertScale(invert, pixel) {
+  if (invert.domain && invert.positions && invert.domain.length > 0) {
+    let closest = 0;
+    let minDist = Infinity;
+    for (let i = 0; i < invert.positions.length; i++) {
+      const dist = Math.abs(invert.positions[i] - pixel);
+      if (dist < minDist) {
+        minDist = dist;
+        closest = i;
+      }
+    }
+    return invert.domain[closest];
+  }
+  const span = invert.bottomPixel - invert.topPixel;
+  if (span === 0) return invert.topData;
+  const t = (pixel - invert.topPixel) / span;
+  const { topData, bottomData, scaleType } = invert;
+  if (scaleType === "log") {
+    if (topData <= 0 || bottomData <= 0) return topData + t * (bottomData - topData);
+    return Math.exp(Math.log(topData) + t * (Math.log(bottomData) - Math.log(topData)));
+  }
+  if (scaleType === "sqrt") {
+    const sqrtTop = Math.sqrt(Math.abs(topData)) * Math.sign(topData);
+    const sqrtBottom = Math.sqrt(Math.abs(bottomData)) * Math.sign(bottomData);
+    const sqrtVal = sqrtTop + t * (sqrtBottom - sqrtTop);
+    return sqrtVal * Math.abs(sqrtVal);
+  }
+  if (scaleType === "pow") {
+    const powTop = Math.sign(topData) * Math.abs(topData) ** 0.5;
+    const powBottom = Math.sign(bottomData) * Math.abs(bottomData) ** 0.5;
+    const powVal = powTop + t * (powBottom - powTop);
+    return Math.sign(powVal) * Math.abs(powVal) ** 2;
+  }
+  if (scaleType === "symlog") {
+    const symlog = (x) => Math.sign(x) * Math.log1p(Math.abs(x));
+    const symexp = (x) => Math.sign(x) * Math.expm1(Math.abs(x));
+    return symexp(symlog(topData) + t * (symlog(bottomData) - symlog(topData)));
+  }
+  return topData + t * (bottomData - topData);
+}
+
 // src/interactions/editing-drags.ts
 function wireAnnotationDrag(svg, specAnnotations, onAnnotationEdit, onEdit, setDragging) {
   const annotationElements = svg.querySelectorAll(".oc-annotation-text");
@@ -2998,7 +3154,16 @@ function wireAnnotationDrag(svg, specAnnotations, onAnnotationEdit, onEdit, setD
             dy: origDy + dy
           };
           onAnnotationEdit?.(textAnnotation, newOffset);
-          onEdit?.({ type: "annotation", annotation: textAnnotation, offset: newOffset });
+          onEdit?.({
+            type: "annotation",
+            element: elementRef.annotation(
+              index,
+              textAnnotation.id,
+              `/annotations/${index}/offset`
+            ),
+            annotation: textAnnotation,
+            offset: newOffset
+          });
         }
       },
       setDragging
@@ -3106,6 +3271,11 @@ function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
             const origEndDy = existingOffset?.dy ?? 0;
             onEdit({
               type: "annotation-connector",
+              element: elementRef.annotation(
+                index,
+                textAnnotation.id,
+                `/annotations/${index}/connectorOffset/${ep.name}`
+              ),
               annotation: textAnnotation,
               endpoint: ep.name,
               offset: { dx: origEndDx + dx, dy: origEndDy + dy }
@@ -3176,12 +3346,22 @@ function wireAnnotationLabelDrag(svg, specAnnotations, onEdit, setDragging) {
             if (isRange) {
               onEdit({
                 type: "range-label",
+                element: elementRef.annotation(
+                  index,
+                  specAnnotation.id,
+                  `/annotations/${index}/labelOffset`
+                ),
                 annotation: specAnnotation,
                 labelOffset: { dx: origLabelDx + dx, dy: origLabelDy + dy }
               });
             } else {
               onEdit({
                 type: "refline-label",
+                element: elementRef.annotation(
+                  index,
+                  specAnnotation.id,
+                  `/annotations/${index}/labelOffset`
+                ),
                 annotation: specAnnotation,
                 labelOffset: { dx: origLabelDx + dx, dy: origLabelDy + dy }
               });
@@ -3308,6 +3488,88 @@ function wireSeriesLabelDrag(svg, spec, onEdit, setDragging) {
     }
   };
 }
+function wireAnchorDrag(svg, specAnnotations, layout, onEdit, setDragging) {
+  if (!onEdit || !layout.xInvert || !layout.yInvert) return () => {
+  };
+  const SVG_NS4 = "http://www.w3.org/2000/svg";
+  const cleanups = [];
+  const annotationGroups = svg.querySelectorAll(".oc-annotation-text");
+  for (const el of annotationGroups) {
+    const annotationG = el;
+    const indexStr = annotationG.getAttribute("data-annotation-index");
+    if (indexStr === null) continue;
+    const index = Number(indexStr);
+    const specAnnotation = specAnnotations[index];
+    if (!specAnnotation || specAnnotation.type !== "text") continue;
+    const textAnnotation = specAnnotation;
+    const resolved = layout.annotations.find((a) => a.specIndex === index);
+    if (!resolved?.dot) continue;
+    const anchorX = resolved.dot.x;
+    const anchorY = resolved.dot.y;
+    const handleEl = document.createElementNS(SVG_NS4, "circle");
+    handleEl.setAttribute("class", "oc-anchor-handle");
+    handleEl.setAttribute("cx", String(anchorX));
+    handleEl.setAttribute("cy", String(anchorY));
+    handleEl.setAttribute("r", "4");
+    handleEl.setAttribute("opacity", "0");
+    handleEl.setAttribute("fill", "currentColor");
+    handleEl.setAttribute("stroke", "currentColor");
+    handleEl.style.cursor = "grab";
+    annotationG.appendChild(handleEl);
+    const stopProp = (e) => {
+      e.stopPropagation();
+    };
+    handleEl.addEventListener("mousedown", stopProp);
+    handleEl.addEventListener("touchstart", stopProp);
+    cleanups.push(() => {
+      handleEl.removeEventListener("mousedown", stopProp);
+      handleEl.removeEventListener("touchstart", stopProp);
+    });
+    const cleanup = createDragHandler({
+      element: handleEl,
+      svg,
+      onMove: (dx, dy) => {
+        handleEl.setAttribute("cx", String(anchorX + dx));
+        handleEl.setAttribute("cy", String(anchorY + dy));
+      },
+      onEnd: (dx, dy, moved) => {
+        handleEl.setAttribute("cx", String(anchorX));
+        handleEl.setAttribute("cy", String(anchorY));
+        if (moved) {
+          const newX = invertScale(layout.xInvert, anchorX + dx);
+          const newY = invertScale(layout.yInvert, anchorY + dy);
+          onEdit({
+            type: "annotation-anchor",
+            element: elementRef.annotation(index, textAnnotation.id, `/annotations/${index}`),
+            annotation: textAnnotation,
+            x: newX,
+            y: newY
+          });
+        }
+      },
+      setDragging
+    });
+    cleanups.push(cleanup);
+    const showHandle = () => {
+      handleEl.setAttribute("opacity", "0.6");
+    };
+    const hideHandle = () => {
+      handleEl.setAttribute("opacity", "0");
+    };
+    annotationG.addEventListener("mouseenter", showHandle);
+    annotationG.addEventListener("mouseleave", hideHandle);
+    cleanups.push(() => {
+      annotationG.removeEventListener("mouseenter", showHandle);
+      annotationG.removeEventListener("mouseleave", hideHandle);
+      handleEl.remove();
+    });
+  }
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+}
 
 // src/interactions/keyboard-nav.ts
 function wireKeyboardNav(svg, container, tooltipDescriptors, tooltipManager, layout) {
@@ -3421,7 +3683,7 @@ function wireLegendInteraction(svg, _layout, toggleSeries, onLegendToggle, onEdi
 }
 
 // src/interactions/selection.ts
-import { elementRef } from "@opendata-ai/openchart-core";
+import { elementRef as elementRef2 } from "@opendata-ai/openchart-core";
 function findElementByRef(svg, ref) {
   switch (ref.type) {
     case "annotation": {
@@ -3447,31 +3709,36 @@ function findElementByRef(svg, ref) {
       );
   }
 }
+function encodePointerToken(token) {
+  return token.replace(/~/g, "~0").replace(/\//g, "~1");
+}
 function buildElementRef(element, _specAnnotations) {
   const annotationEl = element.closest("[data-annotation-index]");
   if (annotationEl) {
     const index = Number(annotationEl.getAttribute("data-annotation-index"));
     const id = annotationEl.getAttribute("data-annotation-id") ?? void 0;
-    return elementRef.annotation(index, id);
+    return elementRef2.annotation(index, id, `/annotations/${index}`);
   }
   const chromeEl = element.closest("[data-chrome-key]");
   if (chromeEl) {
     const key = chromeEl.getAttribute("data-chrome-key");
-    if (key) return elementRef.chrome(key);
+    if (key) return elementRef2.chrome(key, `/chrome/${key}`);
   }
   const seriesLabelEl = element.closest(".oc-mark-label[data-series]");
   if (seriesLabelEl) {
     const series = seriesLabelEl.getAttribute("data-series");
-    if (series) return elementRef.seriesLabel(series);
+    if (series)
+      return elementRef2.seriesLabel(series, `/labels/offsets/${encodePointerToken(series)}`);
   }
   const legendEntryEl = element.closest("[data-legend-index]");
   if (legendEntryEl) {
     const index = Number(legendEntryEl.getAttribute("data-legend-index"));
     const series = legendEntryEl.getAttribute("data-legend-label") ?? "";
-    return elementRef.legendEntry(series, index);
+    return elementRef2.legendEntry(series, index);
   }
   const legendEl = element.closest(".oc-legend");
-  if (legendEl && !legendEl.classList.contains("oc-legend--size")) return elementRef.legend();
+  if (legendEl && !legendEl.classList.contains("oc-legend--size"))
+    return elementRef2.legend("/legend");
   return null;
 }
 function getEditableElements(spec, layout) {
@@ -3479,12 +3746,12 @@ function getEditableElements(spec, layout) {
   const chromeKeys = ["title", "subtitle", "source", "byline", "footer"];
   for (const key of chromeKeys) {
     if (layout.chrome[key]) {
-      refs.push(elementRef.chrome(key));
+      refs.push(elementRef2.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));
+    refs.push(elementRef2.annotation(i, annotations[i].id));
   }
   const seriesLabels = [];
   for (const mark of layout.marks) {
@@ -3494,10 +3761,10 @@ function getEditableElements(spec, layout) {
   }
   seriesLabels.sort();
   for (const series of seriesLabels) {
-    refs.push(elementRef.seriesLabel(series));
+    refs.push(elementRef2.seriesLabel(series));
   }
   if ("entries" in layout.legend && layout.legend.entries.length > 0) {
-    refs.push(elementRef.legend());
+    refs.push(elementRef2.legend());
   }
   return refs;
 }
@@ -6153,6 +6420,39 @@ function createChart(container, spec, options) {
           selectElement(ref);
         }
         enterTextEditing();
+        return;
+      }
+      if (!ref && options?.onEdit && currentLayout?.xInvert && currentLayout?.yInvert) {
+        const svgEl = svg;
+        const viewBox = svgEl.viewBox?.baseVal;
+        const svgRect = svgEl.getBoundingClientRect();
+        if (!viewBox || !svgRect.width || !svgRect.height) return;
+        const vbScaleX = viewBox.width / svgRect.width;
+        const vbScaleY = viewBox.height / svgRect.height;
+        const svgX = (mouseEvent.clientX - svgRect.left) * vbScaleX;
+        const svgY = (mouseEvent.clientY - svgRect.top) * vbScaleY;
+        const area = currentLayout.area;
+        if (svgX < area.x || svgX > area.x + area.width) return;
+        if (svgY < area.y || svgY > area.y + area.height) return;
+        const dataX = invertScale(currentLayout.xInvert, svgX);
+        const dataY = invertScale(currentLayout.yInvert, svgY);
+        isTextEditingActive = true;
+        const overlay = createTextEditOverlayAtPosition({
+          container,
+          svg: svgEl,
+          position: { x: svgX, y: svgY },
+          onCommit: (text) => {
+            isTextEditingActive = false;
+            textEditCleanup = null;
+            const annotation = { type: "text", x: dataX, y: dataY, text };
+            options.onEdit({ type: "add", annotation });
+          },
+          onCancel: () => {
+            isTextEditingActive = false;
+            textEditCleanup = null;
+          }
+        });
+        textEditCleanup = overlay.destroy;
       }
     };
     svg.addEventListener("dblclick", handleDblClick);
@@ -6303,7 +6603,7 @@ function createChart(container, spec, options) {
       );
     }
     const editSuppressed = wantsSeriesSearch(currentSpec);
-    if (editSuppressed && !editSuppressWarned && (hasEditingCallbacks(options) || options?.onAnnotationEdit)) {
+    if (editSuppressed && !editSuppressWarned && (options?.editable || hasEditingCallbacks(options) || options?.onAnnotationEdit)) {
       editSuppressWarned = true;
       console.warn(
         "[openchart] seriesSearch and edit mode are mutually exclusive; edit interactions are disabled while seriesSearch is enabled."
@@ -6328,7 +6628,7 @@ function createChart(container, spec, options) {
       }
     };
     const dragAnnotations = "annotations" in currentSpec && Array.isArray(currentSpec.annotations) ? currentSpec.annotations : [];
-    if (!editSuppressed && (options?.onAnnotationEdit || options?.onEdit)) {
+    if (!editSuppressed && (options?.editable ?? Boolean(options?.onAnnotationEdit || options?.onEdit))) {
       cleanupAnnotationDrag = wireAnnotationDrag(
         svgElement,
         dragAnnotations,
@@ -6337,25 +6637,32 @@ function createChart(container, spec, options) {
         setDragging
       );
     }
-    if (!editSuppressed && options?.onEdit) {
+    if (!editSuppressed && (options?.editable ?? Boolean(options?.onEdit))) {
       const editCleanups = [];
+      const onEditFn = options?.onEdit ?? (() => {
+      });
       editCleanups.push(
-        wireConnectorEndpointDrag(svgElement, dragAnnotations, options.onEdit, setDragging)
+        wireConnectorEndpointDrag(svgElement, dragAnnotations, onEditFn, setDragging)
       );
       editCleanups.push(
-        wireAnnotationLabelDrag(svgElement, dragAnnotations, options.onEdit, setDragging)
+        wireAnnotationLabelDrag(svgElement, dragAnnotations, onEditFn, setDragging)
       );
+      if (currentLayout.xInvert && currentLayout.yInvert) {
+        editCleanups.push(
+          wireAnchorDrag(svgElement, dragAnnotations, currentLayout, onEditFn, setDragging)
+        );
+      }
       const editSpec = currentSpec;
-      editCleanups.push(wireChromeDrag(svgElement, editSpec, options.onEdit, setDragging));
-      editCleanups.push(wireLegendDrag(svgElement, editSpec, options.onEdit, setDragging));
-      editCleanups.push(wireSeriesLabelDrag(svgElement, editSpec, options.onEdit, setDragging));
+      editCleanups.push(wireChromeDrag(svgElement, editSpec, onEditFn, setDragging));
+      editCleanups.push(wireLegendDrag(svgElement, editSpec, onEditFn, setDragging));
+      editCleanups.push(wireSeriesLabelDrag(svgElement, editSpec, onEditFn, setDragging));
       cleanupEditDrags = () => {
         for (const cleanup of editCleanups) {
           cleanup();
         }
       };
     }
-    if (!editSuppressed && hasEditingCallbacks(options)) {
+    if (!editSuppressed && (options?.editable ?? hasEditingCallbacks(options))) {
       makeEditable(svgElement);
       cleanupSelection = wireSelectionEvents();
       cleanupKeyboardEdit = wireKeyboardEditEvents();
@@ -6696,4 +7003,4 @@ export {
   createYouDrawIt,
   createChart
 };
-//# sourceMappingURL=chunk-UZ7J3NOF.js.map
+//# sourceMappingURL=chunk-IZQBT6QM.js.map