chartai 1.0.0 → 1.1.0

package/dist/plugins/experimental/range-selector.min.js

@@ -0,0 +1 @@
+import{q as w}from"../../chunk-50bcv2hw.js";import"../../chunk-wdfq2fpx.js";import"../../chunk-bbyt23tw.js";var x=new WeakMap;function R(e,c){let{canvas:X,ctx:s}=c,d=X.width,b=X.height,t=w.isDark,C=e.config,i=C.bgColor??(t?[0.11,0.11,0.12]:[0.98,0.98,0.98]);s.fillStyle=`rgb(${i.map((o)=>Math.round(o*255)).join(",")})`,s.fillRect(0,0,d,b);let{bounds:f}=e,M=f.maxX-f.minX||1,u=f.maxY-f.minY||1;for(let o of e.series){if(o.rawX.length===0)continue;let{r:v,g:z,b:y}=o.color;s.strokeStyle=`rgba(${Math.round(v*255)},${Math.round(z*255)},${Math.round(y*255)},0.7)`,s.lineWidth=1,s.beginPath();let P=Math.max(1,Math.floor(o.rawX.length/d));for(let p=0;p<o.rawX.length;p+=P){let S=(o.rawX[p]-f.minX)/M*d,D=b-(o.rawY[p]-f.minY)/u*b;if(p===0)s.moveTo(S,D);else s.lineTo(S,D)}s.stroke()}let{view:n}=e,r=e.homeView,m=1/r.zoomX,a=(n.panX-r.panX)/m*d,g=(n.panX-r.panX+1/n.zoomX)/m*d,l=C.brushColor??(t?"rgba(255,255,255,0.12)":"rgba(0,100,255,0.1)"),h=t?"rgba(255,255,255,0.35)":"rgba(0,100,255,0.5)";s.fillStyle=t?"rgba(0,0,0,0.35)":"rgba(255,255,255,0.5)",s.fillRect(0,0,a,b),s.fillRect(g,0,d-g,b),s.fillStyle=l,s.fillRect(a,0,g-a,b),s.strokeStyle=h,s.lineWidth=1.5,s.strokeRect(a,0.75,g-a,b-1.5)}var L={name:"range-selector",install(e,c){let X=e.config,s=X.rangeSelectorHeight??60,d=X.rangeSelectorMargin??4,b=new AbortController,t=document.createElement("canvas");if(t.style.cssText=`display:block;margin-top:${d}px;`,t.height=s,t.width=c.offsetWidth||400,c.parentElement)c.parentElement.insertBefore(t,c.nextSibling);let C=t.getContext("2d"),i={canvas:t,ctx:C,abort:b,resizeObserver:null,brushDrag:null};x.set(e,i);let f=(u)=>{let n=t.getBoundingClientRect();return Math.max(0,Math.min(1,(u.clientX-n.left)/n.width))};t.addEventListener("mousemove",(u)=>{if(i.brushDrag)return;let n=f(u),{view:r}=e,m=e.homeView,a=1/m.zoomX,g=(r.panX-m.panX)/a,l=g+m.zoomX/r.zoomX,h=5/t.getBoundingClientRect().width;if(Math.abs(n-g)<h||Math.abs(n-l)<h)t.style.cursor="ew-resize";else if(n>g&&n<l)t.style.cursor="grab";else t.style.cursor="default"},{signal:b.signal}),t.addEventListener("mousedown",(u)=>{let n=f(u),{view:r}=e,m=e.homeView,a=1/m.zoomX,g=(r.panX-m.panX)/a,l=g+m.zoomX/r.zoomX,h=5/t.getBoundingClientRect().width;if(Math.abs(n-g)<h)i.brushDrag={type:"left",startX:n,startPanX:r.panX,startZoomX:r.zoomX};else if(Math.abs(n-l)<h)i.brushDrag={type:"right",startX:n,startPanX:r.panX,startZoomX:r.zoomX};else if(n>g&&n<l)i.brushDrag={type:"move",startX:n,startPanX:r.panX,startZoomX:r.zoomX},t.style.cursor="grabbing";else{let o=e.homeView,v=1/o.zoomX,z=1/r.zoomX,y=Math.max(o.panX,Math.min(o.panX+v-z,o.panX+n*v-z/2));e.view.panX=y,w.requestRender(e.id),w.drawChart(e),R(e,i)}u.preventDefault()},{signal:b.signal}),window.addEventListener("mousemove",(u)=>{if(!i.brushDrag)return;let n=t.getBoundingClientRect(),m=(u.clientX-n.left)/n.width-i.brushDrag.startX,{startPanX:a,startZoomX:g}=i.brushDrag,l=e.homeView,h=1/l.zoomX;if(i.brushDrag.type==="move")e.view.panX=Math.max(l.panX,Math.min(l.panX+h-1/g,a+m*h));else if(i.brushDrag.type==="left"){let o=Math.max(l.panX,a+m*h),v=a+1/g;if(o<v-0.01)e.view.panX=o,e.view.zoomX=Math.max(l.zoomX,1/(v-o))}else if(i.brushDrag.type==="right"){let o=Math.min(l.panX+h,a+1/g+m*h);if(o>a+0.01)e.view.zoomX=Math.max(l.zoomX,1/(o-a))}w.requestRender(e.id),w.drawChart(e),R(e,i)},{signal:b.signal}),window.addEventListener("mouseup",(u)=>{i.brushDrag=null;let n=t.getBoundingClientRect(),r=Math.max(0,Math.min(1,(u.clientX-n.left)/n.width)),{view:m}=e,a=e.homeView,g=1/a.zoomX,l=(m.panX-a.panX)/g,h=l+a.zoomX/m.zoomX,o=5/t.getBoundingClientRect().width;if(Math.abs(r-l)<o||Math.abs(r-h)<o)t.style.cursor="ew-resize";else if(r>l&&r<h)t.style.cursor="grab";else t.style.cursor="default"},{signal:b.signal});let M=new ResizeObserver(()=>{let u=c.offsetWidth;if(u>0)t.width=u;R(e,i)});M.observe(c),i.resizeObserver=M,R(e,i)},afterDraw(e,c){let X=x.get(c);if(!X)return;let s=c.el.offsetWidth;if(s>0&&X.canvas.width!==s)X.canvas.width=s;R(c,X)},uninstall(e){let c=x.get(e);if(c)c.abort.abort(),c.resizeObserver.disconnect(),c.canvas.remove(),x.delete(e)}};export{L as rangeSelectorPlugin};

package/dist/plugins/experimental/ruler.js

@@ -0,0 +1,434 @@
+import {
+  dataToScreen,
+  screenToData
+} from "../../chunk-mmsy3yqt.js";
+import {
+  DEFAULT_FONT
+} from "../../chunk-1ngxm8t2.js";
+import {
+  MARGIN
+} from "../../chunk-831dem4f.js";
+import {
+  ChartManager
+} from "../../chunk-n8ew0z0e.js";
+import"../../chunk-93yrr7er.js";
+import"../../chunk-5gtx3pza.js";
+
+// src/plugins/experimental/ruler.ts
+var states = new WeakMap;
+var ENDPOINT_HIT_PX = 12;
+function showClearBtn(btn, visible) {
+  const isVisible = btn.hasAttribute("data-visible");
+  if (visible === isVisible)
+    return;
+  btn.style.transform = "";
+  if (visible) {
+    btn.setAttribute("data-visible", "");
+  } else {
+    btn.removeAttribute("data-visible");
+  }
+}
+function injectRulerStyles() {
+  if (document.getElementById("chart-ruler-styles"))
+    return;
+  const style = document.createElement("style");
+  style.id = "chart-ruler-styles";
+  style.textContent = `
+@layer chartai.ruler {
+  .chart-ruler-wrapper {
+    position: absolute;
+    z-index: 1000;
+    pointer-events: none;
+    display: inline-block;
+  }
+  .chart-ruler-btn {
+    position: relative;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 1.5px solid var(--ruler-btn-border);
+    background: var(--ruler-btn-bg);
+    color: var(--ruler-btn-color);
+    z-index: 100;
+    cursor: pointer;
+    pointer-events: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
+  }
+  .chart-ruler-btn[data-active] {
+    --ruler-btn-border: var(--ruler-active-border);
+    --ruler-btn-bg: var(--ruler-active-bg);
+    --ruler-btn-color: var(--ruler-active-color);
+  }
+  .chart-ruler-clear {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    border: 1px solid oklch(from var(--ruler-active-color) calc(l * 0.7) c h / 1);
+    background: oklch(from var(--ruler-active-color) calc(l * 0.22) c h / 1);
+    color: var(--ruler-active-color);
+    z-index: 101;
+    cursor: pointer;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.22);
+    opacity: 0;
+    transform: scale(0.5);
+    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.4, 0, 1, 1);
+  }
+  .chart-ruler-clear[data-visible] {
+    opacity: 1;
+    transform: scale(1);
+    pointer-events: auto;
+    transition: opacity 0.22s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+}`;
+  document.head.appendChild(style);
+}
+function applyTheme(el, dark) {
+  const s = el.style;
+  if (dark) {
+    s.setProperty("--ruler-btn-border", "rgba(255,255,255,0.2)");
+    s.setProperty("--ruler-btn-bg", "rgba(30,30,32,0.88)");
+    s.setProperty("--ruler-btn-color", "rgba(200,200,200,0.9)");
+    s.setProperty("--ruler-active-border", "rgba(255,200,50,0.8)");
+    s.setProperty("--ruler-active-bg", "rgba(255,200,50,0.2)");
+    s.setProperty("--ruler-active-color", "rgba(255,200,50,0.95)");
+    s.setProperty("--ruler-clear-border", "rgba(255,255,255,0.18)");
+    s.setProperty("--ruler-clear-bg", "rgba(30,30,32,0.95)");
+    s.setProperty("--ruler-clear-color", "rgba(200,200,200,0.9)");
+  } else {
+    s.setProperty("--ruler-btn-border", "rgba(0,0,0,0.15)");
+    s.setProperty("--ruler-btn-bg", "rgba(255,255,255,0.92)");
+    s.setProperty("--ruler-btn-color", "rgba(80,80,80,0.9)");
+    s.setProperty("--ruler-active-border", "rgba(180,100,0,0.8)");
+    s.setProperty("--ruler-active-bg", "rgba(180,100,0,0.12)");
+    s.setProperty("--ruler-active-color", "rgba(180,100,0,0.95)");
+    s.setProperty("--ruler-clear-border", "rgba(0,0,0,0.13)");
+    s.setProperty("--ruler-clear-bg", "rgba(255,255,255,0.97)");
+    s.setProperty("--ruler-clear-color", "rgba(80,80,80,0.9)");
+  }
+}
+function setWrapperPosition(el, pos = "bottom-right") {
+  const m = MARGIN;
+  const pad = 8;
+  el.style.removeProperty("top");
+  el.style.removeProperty("bottom");
+  el.style.removeProperty("left");
+  el.style.removeProperty("right");
+  switch (pos) {
+    case "top-left":
+      el.style.top = `${m.top + pad}px`;
+      el.style.left = `${m.left + pad}px`;
+      break;
+    case "top-right":
+      el.style.top = `${m.top + pad}px`;
+      el.style.right = `${m.right + pad}px`;
+      break;
+    case "bottom-right":
+      el.style.bottom = `${m.bottom + pad}px`;
+      el.style.right = `${m.right + pad}px`;
+      break;
+    default:
+      el.style.bottom = `${m.bottom + pad}px`;
+      el.style.left = `${m.left + pad}px`;
+  }
+}
+function drawPill(ctx, text, cx, cy, color, fontFamily, dark) {
+  ctx.font = `500 11px ${fontFamily}`;
+  const tw = ctx.measureText(text).width;
+  const pw = tw + 16;
+  const ph = 20;
+  const px = cx - pw / 2;
+  const py = cy - ph / 2;
+  ctx.beginPath();
+  ctx.roundRect(px, py, pw, ph, 5);
+  ctx.fillStyle = dark ? "rgba(20,20,22,0.90)" : "rgba(255,255,255,0.95)";
+  ctx.fill();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 1.5;
+  ctx.stroke();
+  ctx.fillStyle = color;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillText(text, cx, cy);
+}
+function drawEndpoint(ctx, x, y, color, dark) {
+  ctx.beginPath();
+  ctx.arc(x, y, 5, 0, Math.PI * 2);
+  ctx.fillStyle = color;
+  ctx.fill();
+  ctx.strokeStyle = dark ? "rgba(0,0,0,0.5)" : "rgba(255,255,255,0.8)";
+  ctx.lineWidth = 1.5;
+  ctx.stroke();
+}
+function drawRulerShape(ctx, a, b, axis, chart, w, h, color, formatX, formatY, fontFamily, dark) {
+  const sa = dataToScreen(a.dataX, a.dataY, chart, w, h);
+  const sb = dataToScreen(b.dataX, b.dataY, chart, w, h);
+  ctx.save();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 1.5;
+  ctx.setLineDash([5, 4]);
+  const TICK = 6;
+  if (axis === "x") {
+    const midY = (sa.y + sb.y) / 2;
+    ctx.beginPath();
+    ctx.moveTo(sa.x, midY);
+    ctx.lineTo(sb.x, midY);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.beginPath();
+    ctx.moveTo(sa.x, midY - TICK);
+    ctx.lineTo(sa.x, midY + TICK);
+    ctx.moveTo(sb.x, midY - TICK);
+    ctx.lineTo(sb.x, midY + TICK);
+    ctx.stroke();
+    drawEndpoint(ctx, sa.x, sa.y, color, dark);
+    drawEndpoint(ctx, sb.x, sb.y, color, dark);
+    const labelX = (sa.x + sb.x) / 2;
+    const labelY = midY - 16;
+    const dx = Math.abs(b.dataX - a.dataX);
+    drawPill(ctx, `ΔX: ${formatX(dx)}`, labelX, labelY, color, fontFamily, dark);
+  } else if (axis === "y") {
+    const midX = (sa.x + sb.x) / 2;
+    ctx.beginPath();
+    ctx.moveTo(midX, sa.y);
+    ctx.lineTo(midX, sb.y);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.beginPath();
+    ctx.moveTo(midX - TICK, sa.y);
+    ctx.lineTo(midX + TICK, sa.y);
+    ctx.moveTo(midX - TICK, sb.y);
+    ctx.lineTo(midX + TICK, sb.y);
+    ctx.stroke();
+    drawEndpoint(ctx, sa.x, sa.y, color, dark);
+    drawEndpoint(ctx, sb.x, sb.y, color, dark);
+    const labelX = midX + 20;
+    const labelY = (sa.y + sb.y) / 2;
+    const dy = Math.abs(b.dataY - a.dataY);
+    drawPill(ctx, `ΔY: ${formatY(dy)}`, labelX, labelY, color, fontFamily, dark);
+  } else {
+    ctx.beginPath();
+    ctx.moveTo(sa.x, sa.y);
+    ctx.lineTo(sb.x, sb.y);
+    ctx.stroke();
+    drawEndpoint(ctx, sa.x, sa.y, color, dark);
+    drawEndpoint(ctx, sb.x, sb.y, color, dark);
+    const labelX = (sa.x + sb.x) / 2;
+    const labelY = (sa.y + sb.y) / 2 - 18;
+    const dx = Math.abs(b.dataX - a.dataX);
+    const dy = Math.abs(b.dataY - a.dataY);
+    drawPill(ctx, `ΔX: ${formatX(dx)}  ΔY: ${formatY(dy)}`, labelX, labelY, color, fontFamily, dark);
+  }
+  ctx.restore();
+}
+var rulerPlugin = {
+  name: "ruler",
+  install(chart, el) {
+    injectRulerStyles();
+    const ac = new AbortController;
+    const cfg = chart.config;
+    const dark = ChartManager.isDark;
+    const wrapper = document.createElement("div");
+    wrapper.className = "chart-ruler-wrapper";
+    setWrapperPosition(wrapper, cfg.rulerPosition);
+    applyTheme(wrapper, dark);
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "chart-ruler-btn";
+    button.title = "Toggle ruler tool";
+    button.innerHTML = `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="4.5" width="12" height="5" rx="1" stroke="currentColor" stroke-width="1.3"/><line x1="3.5" y1="4.5" x2="3.5" y2="7" stroke="currentColor" stroke-width="1.2"/><line x1="5.5" y1="4.5" x2="5.5" y2="6" stroke="currentColor" stroke-width="1.2"/><line x1="7" y1="4.5" x2="7" y2="7" stroke="currentColor" stroke-width="1.2"/><line x1="8.5" y1="4.5" x2="8.5" y2="6" stroke="currentColor" stroke-width="1.2"/><line x1="10.5" y1="4.5" x2="10.5" y2="7" stroke="currentColor" stroke-width="1.2"/></svg>`;
+    const clearBtn = document.createElement("button");
+    clearBtn.type = "button";
+    clearBtn.className = "chart-ruler-clear";
+    clearBtn.title = "Clear all rulers";
+    clearBtn.innerHTML = `<svg width="5" height="5" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="1" y1="1" x2="5" y2="5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="5" y1="1" x2="1" y2="5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>`;
+    wrapper.appendChild(button);
+    wrapper.appendChild(clearBtn);
+    el.appendChild(wrapper);
+    const state = {
+      rulers: [],
+      pending: null,
+      cursorDataX: 0,
+      cursorDataY: 0,
+      active: false,
+      justToggledButton: false,
+      abort: ac,
+      button,
+      clearBtn,
+      wrapper
+    };
+    states.set(chart, state);
+    button.addEventListener("pointerdown", (e) => {
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      e.preventDefault();
+      state.active = !state.active;
+      if (!state.active)
+        state.pending = null;
+      state.justToggledButton = true;
+      if (state.active)
+        button.dataset.active = "";
+      else
+        delete button.dataset.active;
+      ChartManager.drawChart(chart);
+    }, { signal: ac.signal });
+    clearBtn.addEventListener("pointerdown", (e) => {
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      e.preventDefault();
+      clearBtn.style.transform = "scale(0.78)";
+      state.rulers = [];
+      state.pending = null;
+      state.justToggledButton = true;
+      ChartManager.drawChart(chart);
+    }, { signal: ac.signal });
+    clearBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      e.preventDefault();
+    }, { signal: ac.signal });
+    el.addEventListener("mousemove", (e) => {
+      const r = el.getBoundingClientRect();
+      const { x, y } = screenToData(e.clientX - r.left, e.clientY - r.top, chart, r.width, r.height);
+      state.cursorDataX = x;
+      state.cursorDataY = y;
+      if (state.active || state.pending !== null) {
+        ChartManager.drawChart(chart);
+      }
+      e.preventDefault();
+    }, { signal: ac.signal });
+    el.addEventListener("click", (e) => {
+      if (!state.active)
+        return;
+      if (state.justToggledButton) {
+        state.justToggledButton = false;
+        return;
+      }
+      if (chart.dragging)
+        return;
+      e.preventDefault();
+      const r = el.getBoundingClientRect();
+      const sx = e.clientX - r.left;
+      const sy = e.clientY - r.top;
+      const { x: dataX, y: dataY } = screenToData(sx, sy, chart, r.width, r.height);
+      for (let i = state.rulers.length - 1;i >= 0; i--) {
+        const ruler = state.rulers[i];
+        const sa = dataToScreen(ruler.a.dataX, ruler.a.dataY, chart, r.width, r.height);
+        const sb = dataToScreen(ruler.b.dataX, ruler.b.dataY, chart, r.width, r.height);
+        const dA = Math.hypot(sa.x - sx, sa.y - sy);
+        const dB = Math.hypot(sb.x - sx, sb.y - sy);
+        if (dA <= ENDPOINT_HIT_PX || dB <= ENDPOINT_HIT_PX) {
+          state.rulers.splice(i, 1);
+          ChartManager.drawChart(chart);
+          return;
+        }
+      }
+      if (state.pending === null) {
+        state.pending = { dataX, dataY };
+      } else {
+        const rulerMax = chart.config.rulerMax ?? 10;
+        if (state.rulers.length >= rulerMax)
+          state.rulers.shift();
+        state.rulers.push({ a: state.pending, b: { dataX, dataY } });
+        state.pending = null;
+        ChartManager.drawChart(chart);
+      }
+    }, { signal: ac.signal });
+    el.addEventListener("contextmenu", (e) => {
+      e.preventDefault();
+      if (state.pending !== null) {
+        state.pending = null;
+      } else {
+        const r = el.getBoundingClientRect();
+        const sx = e.clientX - r.left;
+        const sy = e.clientY - r.top;
+        let bestIdx = -1;
+        let bestDist = Infinity;
+        for (let i = 0;i < state.rulers.length; i++) {
+          const ruler = state.rulers[i];
+          const sa = dataToScreen(ruler.a.dataX, ruler.a.dataY, chart, r.width, r.height);
+          const sb = dataToScreen(ruler.b.dataX, ruler.b.dataY, chart, r.width, r.height);
+          const dA = Math.hypot(sa.x - sx, sa.y - sy);
+          const dB = Math.hypot(sb.x - sx, sb.y - sy);
+          const d = Math.min(dA, dB);
+          if (d < bestDist) {
+            bestDist = d;
+            bestIdx = i;
+          }
+        }
+        if (bestIdx !== -1)
+          state.rulers.splice(bestIdx, 1);
+      }
+      ChartManager.drawChart(chart);
+    }, { signal: ac.signal });
+    window.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && state.active) {
+        state.pending = null;
+        ChartManager.drawChart(chart);
+      }
+    }, { signal: ac.signal });
+  },
+  afterDraw(ctx, chart) {
+    const state = states.get(chart);
+    if (!state)
+      return;
+    const w = chart.width;
+    const h = chart.height;
+    const dark = ChartManager.isDark;
+    const cfg = chart.config;
+    const axis = cfg.rulerAxis ?? "x";
+    const color = cfg.rulerColor ?? (dark ? "rgba(255,200,50,0.9)" : "rgba(180,100,0,0.9)");
+    const formatX = cfg.formatX ?? String;
+    const formatY = cfg.formatY ?? String;
+    const fontFamily = cfg.fontFamily ?? DEFAULT_FONT;
+    setWrapperPosition(state.wrapper, cfg.rulerPosition);
+    applyTheme(state.wrapper, dark);
+    if (state.active)
+      state.button.dataset.active = "";
+    else
+      delete state.button.dataset.active;
+    showClearBtn(state.clearBtn, state.rulers.length > 0);
+    ctx.save();
+    for (const ruler of state.rulers) {
+      drawRulerShape(ctx, ruler.a, ruler.b, axis, chart, w, h, color, formatX, formatY, fontFamily, dark);
+    }
+    if (state.pending !== null) {
+      const cursor = {
+        dataX: state.cursorDataX,
+        dataY: state.cursorDataY
+      };
+      drawRulerShape(ctx, state.pending, cursor, axis, chart, w, h, color, formatX, formatY, fontFamily, dark);
+      const sc = dataToScreen(state.cursorDataX, state.cursorDataY, chart, w, h);
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(sc.x, sc.y, 5, 0, Math.PI * 2);
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 1.5;
+      ctx.stroke();
+      ctx.restore();
+    }
+    ctx.restore();
+  },
+  uninstall(chart) {
+    const state = states.get(chart);
+    if (!state)
+      return;
+    state.abort.abort();
+    state.wrapper.remove();
+    states.delete(chart);
+  }
+};
+export {
+  rulerPlugin
+};

package/dist/plugins/experimental/ruler.min.js

@@ -0,0 +1,59 @@
+import{j as w,k as R}from"../../chunk-cbydth3q.js";import{l as L}from"../../chunk-cvtt04m6.js";import{o as E}from"../../chunk-0eh4rzy9.js";import{q as v}from"../../chunk-50bcv2hw.js";import"../../chunk-wdfq2fpx.js";import"../../chunk-bbyt23tw.js";var P=new WeakMap,X=12;function A(e,n){let t=e.hasAttribute("data-visible");if(n===t)return;if(e.style.transform="",n)e.setAttribute("data-visible","");else e.removeAttribute("data-visible")}function I(){if(document.getElementById("chart-ruler-styles"))return;let e=document.createElement("style");e.id="chart-ruler-styles",e.textContent=`
+@layer chartai.ruler {
+  .chart-ruler-wrapper {
+    position: absolute;
+    z-index: 1000;
+    pointer-events: none;
+    display: inline-block;
+  }
+  .chart-ruler-btn {
+    position: relative;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 1.5px solid var(--ruler-btn-border);
+    background: var(--ruler-btn-bg);
+    color: var(--ruler-btn-color);
+    z-index: 100;
+    cursor: pointer;
+    pointer-events: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
+  }
+  .chart-ruler-btn[data-active] {
+    --ruler-btn-border: var(--ruler-active-border);
+    --ruler-btn-bg: var(--ruler-active-bg);
+    --ruler-btn-color: var(--ruler-active-color);
+  }
+  .chart-ruler-clear {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    border: 1px solid oklch(from var(--ruler-active-color) calc(l * 0.7) c h / 1);
+    background: oklch(from var(--ruler-active-color) calc(l * 0.22) c h / 1);
+    color: var(--ruler-active-color);
+    z-index: 101;
+    cursor: pointer;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.22);
+    opacity: 0;
+    transform: scale(0.5);
+    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.4, 0, 1, 1);
+  }
+  .chart-ruler-clear[data-visible] {
+    opacity: 1;
+    transform: scale(1);
+    pointer-events: auto;
+    transition: opacity 0.22s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+}`,document.head.appendChild(e)}function Y(e,n){let t=e.style;if(n)t.setProperty("--ruler-btn-border","rgba(255,255,255,0.2)"),t.setProperty("--ruler-btn-bg","rgba(30,30,32,0.88)"),t.setProperty("--ruler-btn-color","rgba(200,200,200,0.9)"),t.setProperty("--ruler-active-border","rgba(255,200,50,0.8)"),t.setProperty("--ruler-active-bg","rgba(255,200,50,0.2)"),t.setProperty("--ruler-active-color","rgba(255,200,50,0.95)"),t.setProperty("--ruler-clear-border","rgba(255,255,255,0.18)"),t.setProperty("--ruler-clear-bg","rgba(30,30,32,0.95)"),t.setProperty("--ruler-clear-color","rgba(200,200,200,0.9)");else t.setProperty("--ruler-btn-border","rgba(0,0,0,0.15)"),t.setProperty("--ruler-btn-bg","rgba(255,255,255,0.92)"),t.setProperty("--ruler-btn-color","rgba(80,80,80,0.9)"),t.setProperty("--ruler-active-border","rgba(180,100,0,0.8)"),t.setProperty("--ruler-active-bg","rgba(180,100,0,0.12)"),t.setProperty("--ruler-active-color","rgba(180,100,0,0.95)"),t.setProperty("--ruler-clear-border","rgba(0,0,0,0.13)"),t.setProperty("--ruler-clear-bg","rgba(255,255,255,0.97)"),t.setProperty("--ruler-clear-color","rgba(80,80,80,0.9)")}function M(e,n="bottom-right"){let t=E,c=8;switch(e.style.removeProperty("top"),e.style.removeProperty("bottom"),e.style.removeProperty("left"),e.style.removeProperty("right"),n){case"top-left":e.style.top=`${t.top+8}px`,e.style.left=`${t.left+8}px`;break;case"top-right":e.style.top=`${t.top+8}px`,e.style.right=`${t.right+8}px`;break;case"bottom-right":e.style.bottom=`${t.bottom+8}px`,e.style.right=`${t.right+8}px`;break;default:e.style.bottom=`${t.bottom+8}px`,e.style.left=`${t.left+8}px`}}function x(e,n,t,c,h,p,g){e.font=`500 11px ${p}`;let r=e.measureText(n).width+16,o=20,s=t-r/2,d=c-o/2;e.beginPath(),e.roundRect(s,d,r,o,5),e.fillStyle=g?"rgba(20,20,22,0.90)":"rgba(255,255,255,0.95)",e.fill(),e.strokeStyle=h,e.lineWidth=1.5,e.stroke(),e.fillStyle=h,e.textAlign="center",e.textBaseline="middle",e.fillText(n,t,c)}function C(e,n,t,c,h){e.beginPath(),e.arc(n,t,5,0,Math.PI*2),e.fillStyle=c,e.fill(),e.strokeStyle=h?"rgba(0,0,0,0.5)":"rgba(255,255,255,0.8)",e.lineWidth=1.5,e.stroke()}function B(e,n,t,c,h,p,g,u,r,o,s,d){let a=w(n.dataX,n.dataY,h,p,g),i=w(t.dataX,t.dataY,h,p,g);e.save(),e.strokeStyle=u,e.lineWidth=1.5,e.setLineDash([5,4]);let y=6;if(c==="x"){let l=(a.y+i.y)/2;e.beginPath(),e.moveTo(a.x,l),e.lineTo(i.x,l),e.stroke(),e.setLineDash([]),e.beginPath(),e.moveTo(a.x,l-y),e.lineTo(a.x,l+y),e.moveTo(i.x,l-y),e.lineTo(i.x,l+y),e.stroke(),C(e,a.x,a.y,u,d),C(e,i.x,i.y,u,d);let b=(a.x+i.x)/2,f=l-16,m=Math.abs(t.dataX-n.dataX);x(e,`ΔX: ${r(m)}`,b,f,u,s,d)}else if(c==="y"){let l=(a.x+i.x)/2;e.beginPath(),e.moveTo(l,a.y),e.lineTo(l,i.y),e.stroke(),e.setLineDash([]),e.beginPath(),e.moveTo(l-y,a.y),e.lineTo(l+y,a.y),e.moveTo(l-y,i.y),e.lineTo(l+y,i.y),e.stroke(),C(e,a.x,a.y,u,d),C(e,i.x,i.y,u,d);let b=l+20,f=(a.y+i.y)/2,m=Math.abs(t.dataY-n.dataY);x(e,`ΔY: ${o(m)}`,b,f,u,s,d)}else{e.beginPath(),e.moveTo(a.x,a.y),e.lineTo(i.x,i.y),e.stroke(),C(e,a.x,a.y,u,d),C(e,i.x,i.y,u,d);let l=(a.x+i.x)/2,b=(a.y+i.y)/2-18,f=Math.abs(t.dataX-n.dataX),m=Math.abs(t.dataY-n.dataY);x(e,`ΔX: ${r(f)}  ΔY: ${o(m)}`,l,b,u,s,d)}e.restore()}var N={name:"ruler",install(e,n){I();let t=new AbortController,c=e.config,h=v.isDark,p=document.createElement("div");p.className="chart-ruler-wrapper",M(p,c.rulerPosition),Y(p,h);let g=document.createElement("button");g.type="button",g.className="chart-ruler-btn",g.title="Toggle ruler tool",g.innerHTML='<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="4.5" width="12" height="5" rx="1" stroke="currentColor" stroke-width="1.3"/><line x1="3.5" y1="4.5" x2="3.5" y2="7" stroke="currentColor" stroke-width="1.2"/><line x1="5.5" y1="4.5" x2="5.5" y2="6" stroke="currentColor" stroke-width="1.2"/><line x1="7" y1="4.5" x2="7" y2="7" stroke="currentColor" stroke-width="1.2"/><line x1="8.5" y1="4.5" x2="8.5" y2="6" stroke="currentColor" stroke-width="1.2"/><line x1="10.5" y1="4.5" x2="10.5" y2="7" stroke="currentColor" stroke-width="1.2"/></svg>';let u=document.createElement("button");u.type="button",u.className="chart-ruler-clear",u.title="Clear all rulers",u.innerHTML='<svg width="5" height="5" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="1" y1="1" x2="5" y2="5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="5" y1="1" x2="1" y2="5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>',p.appendChild(g),p.appendChild(u),n.appendChild(p);let r={rulers:[],pending:null,cursorDataX:0,cursorDataY:0,active:!1,justToggledButton:!1,abort:t,button:g,clearBtn:u,wrapper:p};P.set(e,r),g.addEventListener("pointerdown",(o)=>{if(o.stopPropagation(),o.stopImmediatePropagation(),o.preventDefault(),r.active=!r.active,!r.active)r.pending=null;if(r.justToggledButton=!0,r.active)g.dataset.active="";else delete g.dataset.active;v.drawChart(e)},{signal:t.signal}),u.addEventListener("pointerdown",(o)=>{o.stopPropagation(),o.stopImmediatePropagation(),o.preventDefault(),u.style.transform="scale(0.78)",r.rulers=[],r.pending=null,r.justToggledButton=!0,v.drawChart(e)},{signal:t.signal}),u.addEventListener("click",(o)=>{o.stopPropagation(),o.stopImmediatePropagation(),o.preventDefault()},{signal:t.signal}),n.addEventListener("mousemove",(o)=>{let s=n.getBoundingClientRect(),{x:d,y:a}=R(o.clientX-s.left,o.clientY-s.top,e,s.width,s.height);if(r.cursorDataX=d,r.cursorDataY=a,r.active||r.pending!==null)v.drawChart(e);o.preventDefault()},{signal:t.signal}),n.addEventListener("click",(o)=>{if(!r.active)return;if(r.justToggledButton){r.justToggledButton=!1;return}if(e.dragging)return;o.preventDefault();let s=n.getBoundingClientRect(),d=o.clientX-s.left,a=o.clientY-s.top,{x:i,y}=R(d,a,e,s.width,s.height);for(let l=r.rulers.length-1;l>=0;l--){let b=r.rulers[l],f=w(b.a.dataX,b.a.dataY,e,s.width,s.height),m=w(b.b.dataX,b.b.dataY,e,s.width,s.height),k=Math.hypot(f.x-d,f.y-a),T=Math.hypot(m.x-d,m.y-a);if(k<=X||T<=X){r.rulers.splice(l,1),v.drawChart(e);return}}if(r.pending===null)r.pending={dataX:i,dataY:y};else{let l=e.config.rulerMax??10;if(r.rulers.length>=l)r.rulers.shift();r.rulers.push({a:r.pending,b:{dataX:i,dataY:y}}),r.pending=null,v.drawChart(e)}},{signal:t.signal}),n.addEventListener("contextmenu",(o)=>{if(o.preventDefault(),r.pending!==null)r.pending=null;else{let s=n.getBoundingClientRect(),d=o.clientX-s.left,a=o.clientY-s.top,i=-1,y=1/0;for(let l=0;l<r.rulers.length;l++){let b=r.rulers[l],f=w(b.a.dataX,b.a.dataY,e,s.width,s.height),m=w(b.b.dataX,b.b.dataY,e,s.width,s.height),k=Math.hypot(f.x-d,f.y-a),T=Math.hypot(m.x-d,m.y-a),D=Math.min(k,T);if(D<y)y=D,i=l}if(i!==-1)r.rulers.splice(i,1)}v.drawChart(e)},{signal:t.signal}),window.addEventListener("keydown",(o)=>{if(o.key==="Escape"&&r.active)r.pending=null,v.drawChart(e)},{signal:t.signal})},afterDraw(e,n){let t=P.get(n);if(!t)return;let{width:c,height:h}=n,p=v.isDark,g=n.config,u=g.rulerAxis??"x",r=g.rulerColor??(p?"rgba(255,200,50,0.9)":"rgba(180,100,0,0.9)"),o=g.formatX??String,s=g.formatY??String,d=g.fontFamily??L;if(M(t.wrapper,g.rulerPosition),Y(t.wrapper,p),t.active)t.button.dataset.active="";else delete t.button.dataset.active;A(t.clearBtn,t.rulers.length>0),e.save();for(let a of t.rulers)B(e,a.a,a.b,u,n,c,h,r,o,s,d,p);if(t.pending!==null){let a={dataX:t.cursorDataX,dataY:t.cursorDataY};B(e,t.pending,a,u,n,c,h,r,o,s,d,p);let i=w(t.cursorDataX,t.cursorDataY,n,c,h);e.save(),e.beginPath(),e.arc(i.x,i.y,5,0,Math.PI*2),e.strokeStyle=r,e.lineWidth=1.5,e.stroke(),e.restore()}e.restore()},uninstall(e){let n=P.get(e);if(!n)return;n.abort.abort(),n.wrapper.remove(),P.delete(e)}};export{N as rulerPlugin};