@opendata-ai/openchart-vanilla 8.6.3 → 8.7.0

package/dist/{chunk-W3WPGHYV.js → chunk-5O624XON.js}

@@ -4,7 +4,7 @@ import {
   exportPNG,
   exportSVG,
   exportSVGWithFonts
-} from "./chunk-6B5OBGIO.js";
+} from "./chunk-I73B3DJI.js";
 import {
   buildGradientDefs,
   buildPatternDefs,
@@ -17,12 +17,12 @@ import {
   resolveMarkFill,
   resolvePatternFill,
   stampAnimationVars
-} from "./chunk-MDK6AILK.js";
+} from "./chunk-SXTHPXG6.js";
 import {
   SVG_NS,
   createSVGElement,
   setAttrs
-} from "./chunk-5RX6ZQGZ.js";
+} from "./chunk-SDJHUELU.js";
 import {
   AnimationScheduler,
   SpatialIndex,
@@ -3122,21 +3122,40 @@ function applySecondaryOpacity(els, elapsed, enterDelay, enterDuration) {
   }
 }
 
+// src/dom-helpers.ts
+function applySrOnlyStyles(el) {
+  el.style.position = "absolute";
+  el.style.width = "1px";
+  el.style.height = "1px";
+  el.style.padding = "0";
+  el.style.margin = "-1px";
+  el.style.overflow = "clip";
+  el.style.clipPath = "inset(50%)";
+  el.style.whiteSpace = "nowrap";
+  el.style.borderWidth = "0";
+}
+
 // src/you-draw-it.ts
 var MIN_TOUCH_TARGET = 24;
+var TRAIL_RESOLUTION = 1e3;
+var START_SLOP_PX = 16;
 function buildLinearPath(points) {
   if (points.length === 0) return "";
   const sorted = [...points].sort((a, b) => a.x - b.x);
   return sorted.map((p, i) => `${i === 0 ? "M" : "L"}${p.x},${p.y}`).join(" ");
 }
+function round2(n) {
+  return Math.round(n * 100) / 100;
+}
 function createYouDrawIt(options) {
   const { container, onReveal } = options;
   let destroyed = false;
   let revealed = false;
   let config = null;
   let svgEl = null;
-  const guessByX = /* @__PURE__ */ new Map();
+  const trail = /* @__PURE__ */ new Map();
   let cleanupPointerEvents = null;
+  let activePointer = null;
   function buildHatchPattern(id, color) {
     const pattern = document.createElementNS(SVG_NS, "pattern");
     pattern.setAttribute("id", id);
@@ -3219,11 +3238,12 @@ function createYouDrawIt(options) {
     guessPath.setAttribute("pointer-events", "none");
     group.appendChild(guessPath);
     if (!revealed) {
+      const overlayX = Math.max(area.x, fromX - START_SLOP_PX);
       const overlay = createSVGElement("rect");
       setAttrs(overlay, {
-        x: fromX,
+        x: overlayX,
         y: area.y,
-        width: regionWidth,
+        width: regionWidth + (fromX - overlayX),
         height: area.height,
         fill: "transparent"
       });
@@ -3240,97 +3260,146 @@ function createYouDrawIt(options) {
     }
     svg.appendChild(group);
   }
+  function regionWidthOf(cfg) {
+    return Math.max(0, cfg.area.x + cfg.area.width - cfg.fromX);
+  }
+  function pxToIndex(cfg, px) {
+    const w = regionWidthOf(cfg);
+    if (w === 0) return 0;
+    return (px - cfg.fromX) / w * TRAIL_RESOLUTION;
+  }
+  function indexToPx(cfg, index) {
+    return cfg.fromX + index / TRAIL_RESOLUTION * regionWidthOf(cfg);
+  }
   function redrawGuessPath() {
-    if (!svgEl) return;
+    if (!svgEl || !config) return;
     const path = svgEl.querySelector("[data-ydi-guess-path]");
     if (!path) return;
-    const points = Array.from(guessByX.entries()).map(([x, y]) => ({ x, y }));
-    path.setAttribute("d", buildLinearPath(points));
-  }
-  function snapToNearestSample(px) {
-    if (!config || config.samples.length === 0) return null;
-    let nearestPx = config.samples[0].px;
-    let best = Math.abs(nearestPx - px);
-    for (const s of config.samples) {
-      const d = Math.abs(s.px - px);
-      if (d < best) {
-        best = d;
-        nearestPx = s.px;
-      }
-    }
-    return nearestPx;
+    const cfg = config;
+    const keys = Array.from(trail.keys()).sort((a, b) => a - b);
+    const d = keys.map((i, n) => {
+      const cmd = n === 0 || i - keys[n - 1] > 1 ? "M" : "L";
+      return `${cmd}${round2(indexToPx(cfg, i))},${round2(dataToPixelY(trail.get(i)))}`;
+    }).join(" ");
+    path.setAttribute("d", d);
+    syncResetButton();
+  }
+  function clampX(px) {
+    if (!config) return px;
+    return Math.min(config.area.x + config.area.width, Math.max(config.fromX, px));
   }
   function clampY(py) {
     if (!config) return py;
     return Math.min(config.area.y + config.area.height, Math.max(config.area.y, py));
   }
+  function paintSegment(x0, y0, x1, y1) {
+    if (!config) return;
+    const i0 = pxToIndex(config, x0);
+    const i1 = pxToIndex(config, x1);
+    const lo = Math.max(0, Math.ceil(Math.min(i0, i1)));
+    const hi = Math.min(TRAIL_RESOLUTION, Math.floor(Math.max(i0, i1)));
+    const span = i1 - i0;
+    for (let i = lo; i <= hi; i++) {
+      const t = span === 0 ? 1 : (i - i0) / span;
+      trail.set(i, pixelYToData(y0 + t * (y1 - y0)));
+    }
+    const end = Math.min(TRAIL_RESOLUTION, Math.max(0, Math.round(i1)));
+    trail.set(end, pixelYToData(y1));
+  }
   function wirePointerEvents(svg) {
     const overlay = svg.querySelector("[data-ydi-overlay]");
     if (!overlay) return () => {
     };
-    let dragging = false;
-    const toSvgCoords = (clientX, clientY) => {
+    let last = null;
+    if (activePointer !== null) {
+      try {
+        overlay.setPointerCapture?.(activePointer);
+      } catch {
+        activePointer = null;
+      }
+    }
+    const toSvgPoint = (clientX, clientY) => {
       const svgRect = svg.getBoundingClientRect();
       const viewBox = svg.viewBox?.baseVal;
       const scaleX = viewBox?.width && svgRect.width ? viewBox.width / svgRect.width : 1;
       const scaleY = viewBox?.height && svgRect.height ? viewBox.height / svgRect.height : 1;
       return {
-        svgX: (clientX - svgRect.left) * scaleX,
-        svgY: (clientY - svgRect.top) * scaleY
+        x: clampX((clientX - svgRect.left) * scaleX),
+        y: clampY((clientY - svgRect.top) * scaleY)
       };
     };
-    const paintAt = (clientX, clientY) => {
-      const { svgX, svgY } = toSvgCoords(clientX, clientY);
-      const snapped = snapToNearestSample(svgX);
-      if (snapped === null) return;
-      guessByX.set(snapped, clampY(svgY));
-      redrawGuessPath();
-    };
-    const handleMouseDown = (e) => {
-      const me = e;
-      dragging = true;
-      paintAt(me.clientX, me.clientY);
+    const nearAnchor = (p) => {
+      if (!config?.anchor) return false;
+      if (p.x - config.fromX <= START_SLOP_PX) return true;
+      return config.samples.length > 0 && p.x <= config.samples[0].px;
     };
-    const handleMouseMove = (e) => {
-      if (!dragging) return;
-      const me = e;
-      paintAt(me.clientX, me.clientY);
+    const endStroke = () => {
+      activePointer = null;
+      last = null;
     };
-    const handleMouseUp = () => {
-      dragging = false;
+    const handleDown = (e) => {
+      const pe = e;
+      if (pe.button !== 0) return;
+      if (activePointer !== null && activePointer !== pe.pointerId && overlay.hasPointerCapture?.(activePointer)) {
+        return;
+      }
+      if (pe.cancelable) pe.preventDefault();
+      activePointer = pe.pointerId;
+      overlay.setPointerCapture?.(pe.pointerId);
+      live.textContent = "";
+      const p = toSvgPoint(pe.clientX, pe.clientY);
+      const anchor = config?.anchor;
+      if (trail.size === 0 && anchor && nearAnchor(p)) {
+        trail.set(0, pixelYToData(anchor.y));
+        if (p.x > anchor.x) {
+          paintSegment(anchor.x, anchor.y, p.x, p.y);
+          last = p;
+        } else {
+          last = { x: anchor.x, y: anchor.y };
+        }
+      } else {
+        paintSegment(p.x, p.y, p.x, p.y);
+        last = p;
+      }
+      redrawGuessPath();
     };
-    const handleTouchStart = (e) => {
-      const te = e;
-      if (te.touches.length === 0) return;
-      if (te.cancelable) te.preventDefault();
-      dragging = true;
-      paintAt(te.touches[0].clientX, te.touches[0].clientY);
+    const handleMove = (e) => {
+      const pe = e;
+      if (activePointer !== pe.pointerId) return;
+      if (pe.buttons === 0) {
+        endStroke();
+        return;
+      }
+      if (pe.cancelable) pe.preventDefault();
+      const coalesced = pe.getCoalescedEvents?.() ?? [];
+      const events = coalesced.length > 0 ? coalesced : [pe];
+      for (const ev of events) {
+        const p = toSvgPoint(ev.clientX, ev.clientY);
+        const from = last ?? p;
+        paintSegment(from.x, from.y, p.x, p.y);
+        last = p;
+      }
+      redrawGuessPath();
     };
-    const handleTouchMove = (e) => {
-      if (!dragging) return;
-      const te = e;
-      if (te.touches.length === 0) return;
-      if (te.cancelable) te.preventDefault();
-      paintAt(te.touches[0].clientX, te.touches[0].clientY);
+    const handleUp = (e) => {
+      const pe = e;
+      if (activePointer !== pe.pointerId) return;
+      endStroke();
     };
-    const handleTouchEnd = () => {
-      dragging = false;
+    const handleLostCapture = () => {
+      endStroke();
     };
-    overlay.addEventListener("mousedown", handleMouseDown);
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    overlay.addEventListener("touchstart", handleTouchStart, { passive: false });
-    overlay.addEventListener("touchmove", handleTouchMove, { passive: false });
-    overlay.addEventListener("touchend", handleTouchEnd);
-    overlay.addEventListener("touchcancel", handleTouchEnd);
+    overlay.addEventListener("pointerdown", handleDown);
+    overlay.addEventListener("pointermove", handleMove);
+    overlay.addEventListener("pointerup", handleUp);
+    overlay.addEventListener("pointercancel", handleUp);
+    overlay.addEventListener("lostpointercapture", handleLostCapture);
     return () => {
-      overlay.removeEventListener("mousedown", handleMouseDown);
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-      overlay.removeEventListener("touchstart", handleTouchStart);
-      overlay.removeEventListener("touchmove", handleTouchMove);
-      overlay.removeEventListener("touchend", handleTouchEnd);
-      overlay.removeEventListener("touchcancel", handleTouchEnd);
+      overlay.removeEventListener("pointerdown", handleDown);
+      overlay.removeEventListener("pointermove", handleMove);
+      overlay.removeEventListener("pointerup", handleUp);
+      overlay.removeEventListener("pointercancel", handleUp);
+      overlay.removeEventListener("lostpointercapture", handleLostCapture);
     };
   }
   const root = document.createElement("div");
@@ -3339,10 +3408,21 @@ function createYouDrawIt(options) {
   root.style.position = "absolute";
   const prompt = document.createElement("div");
   prompt.className = "oc-ydi-prompt";
+  const resetButton = document.createElement("button");
+  resetButton.type = "button";
+  resetButton.className = "oc-ydi-reset-button";
+  resetButton.hidden = true;
   const revealButton = document.createElement("button");
   revealButton.type = "button";
   revealButton.className = "oc-ydi-reveal-button";
-  root.append(prompt, revealButton);
+  const actions = document.createElement("div");
+  actions.className = "oc-ydi-actions";
+  actions.append(resetButton, revealButton);
+  const live = document.createElement("span");
+  live.className = "oc-sr-only";
+  applySrOnlyStyles(live);
+  live.setAttribute("aria-live", "polite");
+  root.append(prompt, actions, live);
   container.style.position = container.style.position || "relative";
   container.appendChild(root);
   function reduceMotion() {
@@ -3360,14 +3440,48 @@ function createYouDrawIt(options) {
     const t = (py - inv.topPixel) / span;
     return inv.topData + t * (inv.bottomData - inv.topData);
   }
+  function dataToPixelY(value) {
+    if (!config) return value;
+    const inv = config.yInvert;
+    if (!inv) {
+      const area = config.area;
+      return area.y + (1 - value) * area.height;
+    }
+    const dataSpan = inv.bottomData - inv.topData;
+    if (dataSpan === 0) return inv.topPixel;
+    const t = (value - inv.topData) / dataSpan;
+    return inv.topPixel + t * (inv.bottomPixel - inv.topPixel);
+  }
   function getGuessData() {
-    if (!config) return [];
-    const valueByPx = new Map(config.samples.map((s) => [s.px, s.xValue]));
-    return Array.from(guessByX.entries()).sort((a, b) => a[0] - b[0]).map(([px, py]) => ({ x: valueByPx.get(px) ?? px, y: pixelYToData(py) }));
+    if (!config || trail.size === 0) return [];
+    const cfg = config;
+    const keys = Array.from(trail.keys()).sort((a, b) => a - b);
+    const first = keys[0];
+    const lastKey = keys[keys.length - 1];
+    const out = [];
+    for (const sample of cfg.samples) {
+      const i = pxToIndex(cfg, sample.px);
+      if (i < first - 0.5 || i > lastKey + 0.5) continue;
+      let hiPos = keys.findIndex((k) => k >= i);
+      if (hiPos === -1) hiPos = keys.length - 1;
+      const loPos = hiPos > 0 && keys[hiPos] > i ? hiPos - 1 : hiPos;
+      const k0 = keys[loPos];
+      const k1 = keys[hiPos];
+      if (k1 - k0 > 1) continue;
+      const v0 = trail.get(k0);
+      const v1 = trail.get(k1);
+      const t = k1 === k0 ? 0 : (i - k0) / (k1 - k0);
+      out.push({ x: sample.xValue, y: v0 + t * (v1 - v0) });
+    }
+    return out;
+  }
+  function syncResetButton() {
+    resetButton.hidden = revealed || trail.size === 0;
   }
   function doReveal() {
     if (destroyed || revealed || !svgEl || !config) return;
     revealed = true;
+    activePointer = null;
     const clipRect = svgEl.querySelector("[data-ydi-clip-rect]");
     if (clipRect) {
       if (reduceMotion()) {
@@ -3386,9 +3500,30 @@ function createYouDrawIt(options) {
     root.classList.add("oc-ydi-revealed");
     prompt.textContent = "";
     revealButton.disabled = true;
+    syncResetButton();
     onReveal?.(getGuessData());
   }
+  function doReset() {
+    if (destroyed) return;
+    revealed = false;
+    activePointer = null;
+    trail.clear();
+    revealButton.disabled = false;
+    root.classList.remove("oc-ydi-revealed");
+    syncResetButton();
+    if (config && svgEl) {
+      render(config, svgEl);
+      prompt.textContent = config.prompt;
+      cleanupPointerEvents?.();
+      cleanupPointerEvents = wirePointerEvents(svgEl);
+    }
+  }
   revealButton.addEventListener("click", doReveal);
+  resetButton.addEventListener("click", () => {
+    doReset();
+    revealButton.focus();
+    live.textContent = "Drawing cleared";
+  });
   return {
     update(cfg, svg) {
       if (destroyed) return;
@@ -3403,6 +3538,9 @@ function createYouDrawIt(options) {
       revealButton.setAttribute("aria-label", cfg.revealLabel);
       revealButton.style.minHeight = `${MIN_TOUCH_TARGET}px`;
       revealButton.disabled = revealed;
+      resetButton.textContent = cfg.resetLabel;
+      resetButton.style.minHeight = `${MIN_TOUCH_TARGET}px`;
+      syncResetButton();
       if (revealed) root.classList.add("oc-ydi-revealed");
       else root.classList.remove("oc-ydi-revealed");
       const viewBox = svg.viewBox?.baseVal;
@@ -3421,6 +3559,7 @@ function createYouDrawIt(options) {
       }
     },
     hide() {
+      activePointer = null;
       root.style.display = "none";
       svgEl?.querySelector("[data-you-draw-it]")?.remove();
       cleanupPointerEvents?.();
@@ -3430,17 +3569,7 @@ function createYouDrawIt(options) {
       doReveal();
     },
     reset() {
-      if (destroyed) return;
-      revealed = false;
-      guessByX.clear();
-      revealButton.disabled = false;
-      root.classList.remove("oc-ydi-revealed");
-      if (config && svgEl) {
-        render(config, svgEl);
-        prompt.textContent = config.prompt;
-        cleanupPointerEvents?.();
-        cleanupPointerEvents = wirePointerEvents(svgEl);
-      }
+      doReset();
     },
     get isRevealed() {
       return revealed;
@@ -4843,21 +4972,6 @@ function wireLegendInteraction(svg, _layout, toggleSeries, onLegendToggle, onEdi
 
 // src/interactions/selection.ts
 import { elementRef as elementRef2 } from "@opendata-ai/openchart-core";
-
-// src/dom-helpers.ts
-function applySrOnlyStyles(el) {
-  el.style.position = "absolute";
-  el.style.width = "1px";
-  el.style.height = "1px";
-  el.style.padding = "0";
-  el.style.margin = "-1px";
-  el.style.overflow = "clip";
-  el.style.clipPath = "inset(50%)";
-  el.style.whiteSpace = "nowrap";
-  el.style.borderWidth = "0";
-}
-
-// src/interactions/selection.ts
 function findElementByRef(svg, ref) {
   switch (ref.type) {
     case "annotation": {
@@ -7994,4 +8108,4 @@ export {
   scrubCamera,
   createGeoMap
 };
-//# sourceMappingURL=chunk-W3WPGHYV.js.map
+//# sourceMappingURL=chunk-5O624XON.js.map