chartai 0.0.1

package/dist/chart-library.js

@@ -0,0 +1,544 @@
+// src/chart-library.ts
+var globalPlugins = [];
+function registerPlugin(plugin) {
+  if (!globalPlugins.some((p) => p.name === plugin.name)) {
+    globalPlugins.push(plugin);
+  }
+}
+function unregisterPlugin(name) {
+  const idx = globalPlugins.findIndex((p) => p.name === name);
+  if (idx >= 0)
+    globalPlugins.splice(idx, 1);
+}
+function getPlugins() {
+  return globalPlugins;
+}
+
+class ChartManager {
+  static instance = null;
+  static MARGIN = { left: 55, right: 10, top: 8, bottom: 45 };
+  static HOVER_MAX_DISTANCE_PX = 50;
+  static MIN_ZOOM = 0.1;
+  static MAX_ZOOM = 1e7;
+  static DEFAULT_LABEL_SIZE = 12;
+  static DEFAULT_FONT = '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';
+  static resizeCanvas(canvas, cssWidth, cssHeight) {
+    const dpr = devicePixelRatio || 1;
+    canvas.width = Math.round(cssWidth * dpr);
+    canvas.height = Math.round(cssHeight * dpr);
+    if (canvas instanceof HTMLCanvasElement) {
+      canvas.style.width = `${cssWidth}px`;
+      canvas.style.height = `${cssHeight}px`;
+    }
+  }
+  worker = null;
+  charts = new Map;
+  chartIdCounter = 0;
+  _syncViews = false;
+  _isDark = false;
+  statsCallbacks = [];
+  currentStats = {
+    fps: 0,
+    renderMs: 0,
+    total: 0,
+    active: 0
+  };
+  visibilityObserver;
+  resizeObserver;
+  constructor() {
+    this._isDark = document.documentElement.classList.contains("dark");
+    this.visibilityObserver = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        const id = entry.target.dataset.chartId;
+        if (id) {
+          const chart = this.charts.get(id);
+          if (chart) {
+            chart.visible = entry.isIntersecting;
+            this.worker?.postMessage({
+              type: "set-visibility",
+              id,
+              visible: entry.isIntersecting
+            });
+          }
+        }
+      }
+    }, { threshold: 0.01 });
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const id = entry.target.dataset.chartId;
+        if (!id)
+          continue;
+        const chart = this.charts.get(id);
+        if (!chart)
+          continue;
+        const { width, height } = entry.contentRect;
+        if (width <= 0 || height <= 0)
+          continue;
+        chart.width = width;
+        chart.height = height;
+        const dpr = devicePixelRatio || 1;
+        this.worker?.postMessage({
+          type: "resize",
+          id,
+          width: Math.round(width * dpr),
+          height: Math.round(height * dpr)
+        });
+        ChartManager.resizeCanvas(chart.backCanvas, width, height);
+        ChartManager.resizeCanvas(chart.axisCanvas, width, height);
+        this.drawChart(chart);
+      }
+    });
+  }
+  static getInstance() {
+    if (!ChartManager.instance) {
+      ChartManager.instance = new ChartManager;
+    }
+    return ChartManager.instance;
+  }
+  get isDark() {
+    return this._isDark;
+  }
+  get syncViews() {
+    return this._syncViews;
+  }
+  async init() {
+    if (this.worker)
+      return true;
+    return new Promise((resolve) => {
+      const workerUrl = new URL("./gpu-worker.js", import.meta.url);
+      this.worker = new Worker(workerUrl, { type: "module" });
+      this.worker.onmessage = (e) => {
+        const { type, ...data } = e.data;
+        switch (type) {
+          case "gpu-ready":
+            resolve(true);
+            break;
+          case "error":
+            console.error("ChartManager GPU Error:", data.message);
+            resolve(false);
+            break;
+          case "stats":
+            this.currentStats = {
+              fps: data.fps,
+              renderMs: data.renderMs,
+              total: data.totalCharts,
+              active: data.activeCharts
+            };
+            for (const cb of this.statsCallbacks)
+              cb(this.currentStats);
+            break;
+          case "bounds-update": {
+            const chart = this.charts.get(data.id);
+            if (chart) {
+              chart.bounds = {
+                minX: data.minX,
+                maxX: data.maxX,
+                minY: data.minY,
+                maxY: data.maxY
+              };
+              this.drawChart(chart);
+            }
+            break;
+          }
+        }
+      };
+      this.worker.postMessage({ type: "init", isDark: this._isDark });
+    });
+  }
+  create(config) {
+    if (!this.worker) {
+      throw new Error("ChartManager not initialized. Call init() first.");
+    }
+    const id = `chart-${++this.chartIdCounter}`;
+    const el = document.createElement("div");
+    el.className = "gpu-chart";
+    el.dataset.chartId = id;
+    const canvasWrap = document.createElement("div");
+    canvasWrap.className = "gpu-chart-canvas-wrap";
+    canvasWrap.dataset.chartId = id;
+    const backCanvas = document.createElement("canvas");
+    backCanvas.className = "gpu-chart-back-canvas";
+    const gpuCanvas = document.createElement("canvas");
+    gpuCanvas.className = "gpu-chart-canvas";
+    const axisCanvas = document.createElement("canvas");
+    axisCanvas.className = "gpu-chart-axis-canvas";
+    canvasWrap.appendChild(backCanvas);
+    canvasWrap.appendChild(gpuCanvas);
+    canvasWrap.appendChild(axisCanvas);
+    el.appendChild(canvasWrap);
+    config.container.appendChild(el);
+    let offscreen;
+    try {
+      offscreen = gpuCanvas.transferControlToOffscreen();
+    } catch (e) {
+      console.error(`ChartManager: Failed to create offscreen canvas for ${id}:`, e);
+      throw new Error(`Failed to create chart ${id}: ${e}`);
+    }
+    const rect = canvasWrap.getBoundingClientRect();
+    const cssW = rect.width || 400;
+    const cssH = rect.height || 200;
+    ChartManager.resizeCanvas(offscreen, cssW, cssH);
+    ChartManager.resizeCanvas(backCanvas, cssW, cssH);
+    ChartManager.resizeCanvas(axisCanvas, cssW, cssH);
+    if (config.bgColor) {
+      const [r, g, b] = config.bgColor;
+      canvasWrap.style.background = `rgb(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)})`;
+    }
+    const chart = {
+      id,
+      config,
+      el,
+      backCanvas,
+      axisCanvas,
+      width: cssW,
+      height: cssH,
+      series: [],
+      bounds: { minX: 0, maxX: 1, minY: 0, maxY: 1 },
+      view: { panX: 0, panY: 0, zoomX: 1, zoomY: 1 },
+      zoomMode: config.zoomMode || "both",
+      visible: true,
+      dragging: false,
+      bgColor: config.bgColor,
+      textColor: config.textColor,
+      gridColor: config.gridColor,
+      fontFamily: config.fontFamily,
+      momentum: null,
+      findNearestPoint(screenX, screenY, width, height) {
+        if (this.series.length === 0)
+          return null;
+        const normX = screenX / width;
+        const normY = screenY / height;
+        const rangeX = this.bounds.maxX - this.bounds.minX;
+        const rangeY = this.bounds.maxY - this.bounds.minY;
+        const viewWidth = rangeX / this.view.zoomX;
+        const viewHeight = rangeY / this.view.zoomY;
+        const viewMinX = this.bounds.minX + this.view.panX * rangeX;
+        const viewMinY = this.bounds.minY + this.view.panY * rangeY;
+        const dataX = viewMinX + normX * viewWidth;
+        const dataY = viewMinY + (1 - normY) * viewHeight;
+        let bestSeriesIdx = -1;
+        let bestIdx = -1;
+        let bestDistX = Infinity;
+        let bestDistY = Infinity;
+        for (let s = 0;s < this.series.length; s++) {
+          const series2 = this.series[s];
+          const n = series2.rawX.length;
+          if (n === 0)
+            continue;
+          let lo = 0, hi = n - 1;
+          while (lo < hi) {
+            const mid = lo + hi >> 1;
+            if (series2.rawX[mid] < dataX)
+              lo = mid + 1;
+            else
+              hi = mid;
+          }
+          let idx = lo;
+          if (lo > 0) {
+            const distLo = Math.abs(series2.rawX[lo] - dataX);
+            const distPrev = Math.abs(series2.rawX[lo - 1] - dataX);
+            if (distPrev < distLo)
+              idx = lo - 1;
+          }
+          const distX = Math.abs(series2.rawX[idx] - dataX);
+          const distY = Math.abs(series2.rawY[idx] - dataY);
+          if (distX < bestDistX || distX === bestDistX && distY < bestDistY) {
+            bestDistX = distX;
+            bestDistY = distY;
+            bestSeriesIdx = s;
+            bestIdx = idx;
+          }
+        }
+        if (bestSeriesIdx === -1)
+          return null;
+        const series = this.series[bestSeriesIdx];
+        const pointNormX = (series.rawX[bestIdx] - viewMinX) / viewWidth;
+        const pointScreenX = pointNormX * width;
+        const pixelDistX = Math.abs(pointScreenX - screenX);
+        if (pixelDistX > ChartManager.HOVER_MAX_DISTANCE_PX)
+          return null;
+        return {
+          x: series.rawX[bestIdx],
+          y: series.rawY[bestIdx],
+          index: bestIdx,
+          screenX,
+          screenY,
+          seriesIndex: bestSeriesIdx,
+          seriesLabel: series.label
+        };
+      }
+    };
+    this.charts.set(id, chart);
+    const workerType = config.type === "bar" ? "box" : config.type;
+    this.worker.postMessage({
+      type: "register-chart",
+      id,
+      canvas: offscreen,
+      chartType: workerType,
+      pointSize: config.pointSize ?? 3,
+      maxSamplesPerPixel: config.maxSamplesPerPixel ?? 1e4,
+      bgColor: config.bgColor ?? null
+    }, [offscreen]);
+    this.visibilityObserver.observe(el);
+    this.resizeObserver.observe(canvasWrap);
+    for (const plugin of globalPlugins) {
+      plugin.install?.(chart, canvasWrap);
+    }
+    this.updateSeries(id, config.series);
+    return id;
+  }
+  destroy(id) {
+    const chart = this.charts.get(id);
+    if (!chart)
+      return;
+    for (const plugin of globalPlugins) {
+      plugin.uninstall?.(chart);
+    }
+    if (chart.momentum)
+      cancelAnimationFrame(chart.momentum);
+    this.visibilityObserver.unobserve(chart.el);
+    const wrap = chart.el.querySelector(".gpu-chart-canvas-wrap");
+    if (wrap)
+      this.resizeObserver.unobserve(wrap);
+    chart.el.remove();
+    this.worker?.postMessage({ type: "unregister-chart", id });
+    this.charts.delete(id);
+  }
+  updateSeries(id, series) {
+    const chart = this.charts.get(id);
+    if (!chart || !this.worker)
+      return;
+    if (series.length === 0)
+      return;
+    chart.series = series.map((s) => {
+      const n = s.x.length;
+      if (n === 0)
+        return { label: s.label, color: s.color, rawX: [], rawY: [] };
+      const indices = Array.from({ length: n }, (_, i) => i);
+      indices.sort((a, b) => s.x[a] - s.x[b]);
+      return {
+        label: s.label,
+        color: s.color,
+        rawX: indices.map((i) => s.x[i]),
+        rawY: indices.map((i) => s.y[i])
+      };
+    });
+    let minX = Infinity, maxX = -Infinity;
+    let minY = Infinity, maxY = -Infinity;
+    for (const s of chart.series) {
+      for (let i = 0;i < s.rawX.length; i++) {
+        if (s.rawX[i] < minX)
+          minX = s.rawX[i];
+        if (s.rawX[i] > maxX)
+          maxX = s.rawX[i];
+        if (s.rawY[i] < minY)
+          minY = s.rawY[i];
+        if (s.rawY[i] > maxY)
+          maxY = s.rawY[i];
+      }
+    }
+    const px = (maxX - minX) * 0.05 || 1;
+    const py = (maxY - minY) * 0.1 || 1;
+    minX -= px;
+    maxX += px;
+    minY -= py;
+    maxY += py;
+    const db = chart.config.defaultBounds;
+    if (db) {
+      if (db.minX !== undefined)
+        minX = db.minX;
+      if (db.maxX !== undefined)
+        maxX = db.maxX;
+      if (db.minY !== undefined)
+        minY = db.minY;
+      if (db.maxY !== undefined)
+        maxY = db.maxY;
+    }
+    chart.bounds = { minX, maxX, minY, maxY };
+    const seriesData = chart.series.map((s) => ({
+      label: s.label,
+      colorR: s.color.r,
+      colorG: s.color.g,
+      colorB: s.color.b,
+      dataX: new Float32Array(s.rawX),
+      dataY: new Float32Array(s.rawY)
+    }));
+    this.worker.postMessage({
+      type: "update-series",
+      id,
+      series: seriesData,
+      bounds: chart.bounds
+    }, seriesData.flatMap((s) => [s.dataX.buffer, s.dataY.buffer]));
+    this.sendViewTransform(chart);
+    this.drawChart(chart);
+  }
+  setPointSize(id, size) {
+    const chart = this.charts.get(id);
+    if (!chart)
+      return;
+    this.worker?.postMessage({
+      type: "set-point-size",
+      id,
+      pointSize: Math.max(1, Math.min(8, Math.round(size)))
+    });
+  }
+  setMaxSamplesPerPixel(id, maxSamples) {
+    const chart = this.charts.get(id);
+    if (!chart)
+      return;
+    this.worker?.postMessage({
+      type: "set-max-samples",
+      id,
+      maxSamplesPerPixel: Math.max(0, maxSamples | 0)
+    });
+  }
+  setStyle(id, style) {
+    const chart = this.charts.get(id);
+    if (!chart)
+      return;
+    if (style.bgColor !== undefined)
+      chart.bgColor = style.bgColor;
+    if (style.textColor !== undefined)
+      chart.textColor = style.textColor;
+    if (style.gridColor !== undefined)
+      chart.gridColor = style.gridColor;
+    if (style.fontFamily !== undefined)
+      chart.fontFamily = style.fontFamily;
+    if (style.bgColor !== undefined) {
+      const wrap = chart.el.querySelector(".gpu-chart-canvas-wrap");
+      if (wrap) {
+        const [r, g, b] = style.bgColor;
+        wrap.style.background = `rgb(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)})`;
+      }
+      this.worker?.postMessage({
+        type: "set-style",
+        id,
+        bgColor: style.bgColor
+      });
+    }
+    this.drawChart(chart);
+  }
+  setZoomMode(id, mode) {
+    const chart = this.charts.get(id);
+    if (chart)
+      chart.zoomMode = mode;
+  }
+  getChartCount() {
+    return this.charts.size;
+  }
+  getZoomMode(id) {
+    return this.charts.get(id)?.zoomMode || "both";
+  }
+  setSyncViews(sync) {
+    this._syncViews = sync;
+  }
+  setTheme(dark) {
+    this._isDark = dark;
+    this.worker?.postMessage({ type: "theme", isDark: dark });
+    for (const chart of this.charts.values()) {
+      this.drawChart(chart);
+    }
+  }
+  onStats(callback) {
+    this.statsCallbacks.push(callback);
+    return () => {
+      const idx = this.statsCallbacks.indexOf(callback);
+      if (idx >= 0)
+        this.statsCallbacks.splice(idx, 1);
+    };
+  }
+  getStats() {
+    return { ...this.currentStats };
+  }
+  resetView(id) {
+    const chart = this.charts.get(id);
+    if (!chart)
+      return;
+    if (chart.momentum) {
+      cancelAnimationFrame(chart.momentum);
+      chart.momentum = null;
+    }
+    const startPanX = chart.view.panX;
+    const startPanY = chart.view.panY;
+    const startZoomX = chart.view.zoomX;
+    const startZoomY = chart.view.zoomY;
+    const startTime = performance.now();
+    const animate = () => {
+      const t = Math.min(1, (performance.now() - startTime) / 300);
+      const ease = 1 - Math.pow(1 - t, 3);
+      chart.view.panX = startPanX * (1 - ease);
+      chart.view.panY = startPanY * (1 - ease);
+      chart.view.zoomX = startZoomX + (1 - startZoomX) * ease;
+      chart.view.zoomY = startZoomY + (1 - startZoomY) * ease;
+      this.sendViewTransform(chart);
+      this.drawChart(chart);
+      if (this._syncViews)
+        this.syncAllViews(chart);
+      if (t < 1)
+        requestAnimationFrame(animate);
+    };
+    requestAnimationFrame(animate);
+  }
+  sendViewTransform(chart) {
+    this.worker?.postMessage({
+      type: "view-transform",
+      id: chart.id,
+      panX: chart.view.panX,
+      panY: chart.view.panY,
+      zoomX: chart.view.zoomX,
+      zoomY: chart.view.zoomY
+    });
+  }
+  syncAllViews(source) {
+    const transforms = [];
+    for (const chart of this.charts.values()) {
+      if (chart.id !== source.id) {
+        chart.view = { ...source.view };
+        transforms.push({ id: chart.id });
+        this.drawChart(chart);
+      }
+    }
+    if (transforms.length > 0) {
+      this.worker?.postMessage({
+        type: "batch-view-transform",
+        panX: source.view.panX,
+        panY: source.view.panY,
+        zoomX: source.view.zoomX,
+        zoomY: source.view.zoomY,
+        transforms
+      });
+    }
+  }
+  drawChart(chart) {
+    if (!chart.visible)
+      return;
+    const dpr = devicePixelRatio || 1;
+    const backCtx = chart.backCanvas.getContext("2d");
+    if (backCtx) {
+      backCtx.clearRect(0, 0, chart.backCanvas.width, chart.backCanvas.height);
+      backCtx.save();
+      backCtx.scale(dpr, dpr);
+      for (const plugin of globalPlugins) {
+        plugin.beforeDraw?.(backCtx, chart);
+      }
+      backCtx.restore();
+    }
+    const ctx = chart.axisCanvas.getContext("2d");
+    if (ctx) {
+      ctx.clearRect(0, 0, chart.axisCanvas.width, chart.axisCanvas.height);
+      ctx.save();
+      ctx.scale(dpr, dpr);
+      for (const plugin of globalPlugins) {
+        plugin.afterDraw?.(ctx, chart);
+      }
+      ctx.restore();
+    }
+  }
+}
+export {
+  unregisterPlugin,
+  registerPlugin,
+  getPlugins,
+  ChartManager
+};
+export { ChartManager };

package/dist/chart-library.min.js

@@ -0,0 +1 @@
+var $=[];function c(j){if(!$.some((q)=>q.name===j.name))$.push(j)}function i(j){let q=$.findIndex((A)=>A.name===j);if(q>=0)$.splice(q,1)}function e(){return $}class V{static instance=null;static MARGIN={left:55,right:10,top:8,bottom:45};static HOVER_MAX_DISTANCE_PX=50;static MIN_ZOOM=0.1;static MAX_ZOOM=1e7;static DEFAULT_LABEL_SIZE=12;static DEFAULT_FONT='-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';static resizeCanvas(j,q,A){let B=devicePixelRatio||1;if(j.width=Math.round(q*B),j.height=Math.round(A*B),j instanceof HTMLCanvasElement)j.style.width=`${q}px`,j.style.height=`${A}px`}worker=null;charts=new Map;chartIdCounter=0;_syncViews=!1;_isDark=!1;statsCallbacks=[];currentStats={fps:0,renderMs:0,total:0,active:0};visibilityObserver;resizeObserver;constructor(){this._isDark=document.documentElement.classList.contains("dark"),this.visibilityObserver=new IntersectionObserver((j)=>{for(let q of j){let A=q.target.dataset.chartId;if(A){let B=this.charts.get(A);if(B)B.visible=q.isIntersecting,this.worker?.postMessage({type:"set-visibility",id:A,visible:q.isIntersecting})}}},{threshold:0.01}),this.resizeObserver=new ResizeObserver((j)=>{for(let q of j){let A=q.target.dataset.chartId;if(!A)continue;let B=this.charts.get(A);if(!B)continue;let{width:E,height:J}=q.contentRect;if(E<=0||J<=0)continue;B.width=E,B.height=J;let N=devicePixelRatio||1;this.worker?.postMessage({type:"resize",id:A,width:Math.round(E*N),height:Math.round(J*N)}),V.resizeCanvas(B.backCanvas,E,J),V.resizeCanvas(B.axisCanvas,E,J),this.drawChart(B)}})}static getInstance(){if(!V.instance)V.instance=new V;return V.instance}get isDark(){return this._isDark}get syncViews(){return this._syncViews}async init(){if(this.worker)return!0;return new Promise((j)=>{let q=new URL("./gpu-worker.js",import.meta.url);this.worker=new Worker(q,{type:"module"}),this.worker.onmessage=(A)=>{let{type:B,...E}=A.data;switch(B){case"gpu-ready":j(!0);break;case"error":console.error("ChartManager GPU Error:",E.message),j(!1);break;case"stats":this.currentStats={fps:E.fps,renderMs:E.renderMs,total:E.totalCharts,active:E.activeCharts};for(let J of this.statsCallbacks)J(this.currentStats);break;case"bounds-update":{let J=this.charts.get(E.id);if(J)J.bounds={minX:E.minX,maxX:E.maxX,minY:E.minY,maxY:E.maxY},this.drawChart(J);break}}},this.worker.postMessage({type:"init",isDark:this._isDark})})}create(j){if(!this.worker)throw new Error("ChartManager not initialized. Call init() first.");let q=`chart-${++this.chartIdCounter}`,A=document.createElement("div");A.className="gpu-chart",A.dataset.chartId=q;let B=document.createElement("div");B.className="gpu-chart-canvas-wrap",B.dataset.chartId=q;let E=document.createElement("canvas");E.className="gpu-chart-back-canvas";let J=document.createElement("canvas");J.className="gpu-chart-canvas";let N=document.createElement("canvas");N.className="gpu-chart-axis-canvas",B.appendChild(E),B.appendChild(J),B.appendChild(N),A.appendChild(B),j.container.appendChild(A);let _;try{_=J.transferControlToOffscreen()}catch(Q){throw console.error(`ChartManager: Failed to create offscreen canvas for ${q}:`,Q),new Error(`Failed to create chart ${q}: ${Q}`)}let G=B.getBoundingClientRect(),K=G.width||400,T=G.height||200;if(V.resizeCanvas(_,K,T),V.resizeCanvas(E,K,T),V.resizeCanvas(N,K,T),j.bgColor){let[Q,R,L]=j.bgColor;B.style.background=`rgb(${Math.round(Q*255)},${Math.round(R*255)},${Math.round(L*255)})`}let F={id:q,config:j,el:A,backCanvas:E,axisCanvas:N,width:K,height:T,series:[],bounds:{minX:0,maxX:1,minY:0,maxY:1},view:{panX:0,panY:0,zoomX:1,zoomY:1},zoomMode:j.zoomMode||"both",visible:!0,dragging:!1,bgColor:j.bgColor,textColor:j.textColor,gridColor:j.gridColor,fontFamily:j.fontFamily,momentum:null,findNearestPoint(Q,R,L,p){if(this.series.length===0)return null;let m=Q/L,x=R/p,Y=this.bounds.maxX-this.bounds.minX,u=this.bounds.maxY-this.bounds.minY,y=Y/this.view.zoomX,b=u/this.view.zoomY,X=this.bounds.minX+this.view.panX*Y,l=this.bounds.minY+this.view.panY*u,S=X+m*y,o=l+(1-x)*b,H=-1,Z=-1,k=1/0,C=1/0;for(let P=0;P<this.series.length;P++){let U=this.series[P],f=U.rawX.length;if(f===0)continue;let z=0,w=f-1;while(z<w){let D=z+w>>1;if(U.rawX[D]<S)z=D+1;else w=D}let W=z;if(z>0){let D=Math.abs(U.rawX[z]-S);if(Math.abs(U.rawX[z-1]-S)<D)W=z-1}let M=Math.abs(U.rawX[W]-S),v=Math.abs(U.rawY[W]-o);if(M<k||M===k&&v<C)k=M,C=v,H=P,Z=W}if(H===-1)return null;let I=this.series[H],g=(I.rawX[Z]-X)/y*L;if(Math.abs(g-Q)>V.HOVER_MAX_DISTANCE_PX)return null;return{x:I.rawX[Z],y:I.rawY[Z],index:Z,screenX:Q,screenY:R,seriesIndex:H,seriesLabel:I.label}}};this.charts.set(q,F);let O=j.type==="bar"?"box":j.type;this.worker.postMessage({type:"register-chart",id:q,canvas:_,chartType:O,pointSize:j.pointSize??3,maxSamplesPerPixel:j.maxSamplesPerPixel??1e4,bgColor:j.bgColor??null},[_]),this.visibilityObserver.observe(A),this.resizeObserver.observe(B);for(let Q of $)Q.install?.(F,B);return this.updateSeries(q,j.series),q}destroy(j){let q=this.charts.get(j);if(!q)return;for(let B of $)B.uninstall?.(q);if(q.momentum)cancelAnimationFrame(q.momentum);this.visibilityObserver.unobserve(q.el);let A=q.el.querySelector(".gpu-chart-canvas-wrap");if(A)this.resizeObserver.unobserve(A);q.el.remove(),this.worker?.postMessage({type:"unregister-chart",id:j}),this.charts.delete(j)}updateSeries(j,q){let A=this.charts.get(j);if(!A||!this.worker)return;if(q.length===0)return;A.series=q.map((F)=>{let O=F.x.length;if(O===0)return{label:F.label,color:F.color,rawX:[],rawY:[]};let Q=Array.from({length:O},(R,L)=>L);return Q.sort((R,L)=>F.x[R]-F.x[L]),{label:F.label,color:F.color,rawX:Q.map((R)=>F.x[R]),rawY:Q.map((R)=>F.y[R])}});let B=1/0,E=-1/0,J=1/0,N=-1/0;for(let F of A.series)for(let O=0;O<F.rawX.length;O++){if(F.rawX[O]<B)B=F.rawX[O];if(F.rawX[O]>E)E=F.rawX[O];if(F.rawY[O]<J)J=F.rawY[O];if(F.rawY[O]>N)N=F.rawY[O]}let _=(E-B)*0.05||1,G=(N-J)*0.1||1;B-=_,E+=_,J-=G,N+=G;let K=A.config.defaultBounds;if(K){if(K.minX!==void 0)B=K.minX;if(K.maxX!==void 0)E=K.maxX;if(K.minY!==void 0)J=K.minY;if(K.maxY!==void 0)N=K.maxY}A.bounds={minX:B,maxX:E,minY:J,maxY:N};let T=A.series.map((F)=>({label:F.label,colorR:F.color.r,colorG:F.color.g,colorB:F.color.b,dataX:new Float32Array(F.rawX),dataY:new Float32Array(F.rawY)}));this.worker.postMessage({type:"update-series",id:j,series:T,bounds:A.bounds},T.flatMap((F)=>[F.dataX.buffer,F.dataY.buffer])),this.sendViewTransform(A),this.drawChart(A)}setPointSize(j,q){if(!this.charts.get(j))return;this.worker?.postMessage({type:"set-point-size",id:j,pointSize:Math.max(1,Math.min(8,Math.round(q)))})}setMaxSamplesPerPixel(j,q){if(!this.charts.get(j))return;this.worker?.postMessage({type:"set-max-samples",id:j,maxSamplesPerPixel:Math.max(0,q|0)})}setStyle(j,q){let A=this.charts.get(j);if(!A)return;if(q.bgColor!==void 0)A.bgColor=q.bgColor;if(q.textColor!==void 0)A.textColor=q.textColor;if(q.gridColor!==void 0)A.gridColor=q.gridColor;if(q.fontFamily!==void 0)A.fontFamily=q.fontFamily;if(q.bgColor!==void 0){let B=A.el.querySelector(".gpu-chart-canvas-wrap");if(B){let[E,J,N]=q.bgColor;B.style.background=`rgb(${Math.round(E*255)},${Math.round(J*255)},${Math.round(N*255)})`}this.worker?.postMessage({type:"set-style",id:j,bgColor:q.bgColor})}this.drawChart(A)}setZoomMode(j,q){let A=this.charts.get(j);if(A)A.zoomMode=q}getChartCount(){return this.charts.size}getZoomMode(j){return this.charts.get(j)?.zoomMode||"both"}setSyncViews(j){this._syncViews=j}setTheme(j){this._isDark=j,this.worker?.postMessage({type:"theme",isDark:j});for(let q of this.charts.values())this.drawChart(q)}onStats(j){return this.statsCallbacks.push(j),()=>{let q=this.statsCallbacks.indexOf(j);if(q>=0)this.statsCallbacks.splice(q,1)}}getStats(){return{...this.currentStats}}resetView(j){let q=this.charts.get(j);if(!q)return;if(q.momentum)cancelAnimationFrame(q.momentum),q.momentum=null;let A=q.view.panX,B=q.view.panY,E=q.view.zoomX,J=q.view.zoomY,N=performance.now(),_=()=>{let G=Math.min(1,(performance.now()-N)/300),K=1-Math.pow(1-G,3);if(q.view.panX=A*(1-K),q.view.panY=B*(1-K),q.view.zoomX=E+(1-E)*K,q.view.zoomY=J+(1-J)*K,this.sendViewTransform(q),this.drawChart(q),this._syncViews)this.syncAllViews(q);if(G<1)requestAnimationFrame(_)};requestAnimationFrame(_)}sendViewTransform(j){this.worker?.postMessage({type:"view-transform",id:j.id,panX:j.view.panX,panY:j.view.panY,zoomX:j.view.zoomX,zoomY:j.view.zoomY})}syncAllViews(j){let q=[];for(let A of this.charts.values())if(A.id!==j.id)A.view={...j.view},q.push({id:A.id}),this.drawChart(A);if(q.length>0)this.worker?.postMessage({type:"batch-view-transform",panX:j.view.panX,panY:j.view.panY,zoomX:j.view.zoomX,zoomY:j.view.zoomY,transforms:q})}drawChart(j){if(!j.visible)return;let q=devicePixelRatio||1,A=j.backCanvas.getContext("2d");if(A){A.clearRect(0,0,j.backCanvas.width,j.backCanvas.height),A.save(),A.scale(q,q);for(let E of $)E.beforeDraw?.(A,j);A.restore()}let B=j.axisCanvas.getContext("2d");if(B){B.clearRect(0,0,j.axisCanvas.width,j.axisCanvas.height),B.save(),B.scale(q,q);for(let E of $)E.afterDraw?.(B,j);B.restore()}}}export{i as unregisterPlugin,c as registerPlugin,e as getPlugins,V as ChartManager};export{V as a};

package/dist/gpu-worker.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=gpu-worker.d.ts.map

package/dist/gpu-worker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gpu-worker.d.ts","sourceRoot":"","sources":["../src/gpu-worker.ts"],"names":[],"mappings":""}