@vroomchart/core-wasm 0.1.0

package/dist/index.js

@@ -0,0 +1,597 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/handle.ts
+var ColorKey = /* @__PURE__ */ ((ColorKey2) => {
+  ColorKey2[ColorKey2["Background"] = 0] = "Background";
+  ColorKey2[ColorKey2["Bull"] = 1] = "Bull";
+  ColorKey2[ColorKey2["Bear"] = 2] = "Bear";
+  ColorKey2[ColorKey2["Wick"] = 3] = "Wick";
+  ColorKey2[ColorKey2["Grid"] = 4] = "Grid";
+  ColorKey2[ColorKey2["AxisText"] = 5] = "AxisText";
+  ColorKey2[ColorKey2["Crosshair"] = 6] = "Crosshair";
+  ColorKey2[ColorKey2["TooltipBg"] = 7] = "TooltipBg";
+  ColorKey2[ColorKey2["TooltipText"] = 8] = "TooltipText";
+  ColorKey2[ColorKey2["CrosshairTarget"] = 9] = "CrosshairTarget";
+  return ColorKey2;
+})(ColorKey || {});
+
+// src/color.ts
+var COLOR_KEYS = {
+  background: 0 /* Background */,
+  bull: 1 /* Bull */,
+  bear: 2 /* Bear */,
+  grid: 4 /* Grid */,
+  axisText: 5 /* AxisText */,
+  crosshair: 6 /* Crosshair */,
+  crosshairTarget: 9 /* CrosshairTarget */
+};
+function parseColor(value) {
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? value >>> 0 : null;
+  }
+  let s = value.trim();
+  if (s.startsWith("#")) s = s.slice(1);
+  if (s.length === 6) s = `ff${s}`;
+  if (s.length !== 8 || !/^[0-9a-fA-F]{8}$/.test(s)) return null;
+  return parseInt(s, 16) >>> 0;
+}
+function applyTheme(handle, theme) {
+  Object.keys(COLOR_KEYS).forEach((field) => {
+    const value = theme[field];
+    if (value == null) return;
+    const argb = parseColor(value);
+    if (argb == null) return;
+    handle.setColor(COLOR_KEYS[field], argb);
+  });
+}
+function argbToCss(argb) {
+  const a = (argb >>> 24 & 255) / 255;
+  const r = argb >>> 16 & 255;
+  const g = argb >>> 8 & 255;
+  const b = argb & 255;
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+
+// src/packCandles.ts
+var BYTES_PER_CANDLE = 48;
+function packCandles(candles) {
+  const buf = new ArrayBuffer(candles.length * BYTES_PER_CANDLE);
+  const view = new DataView(buf);
+  for (let i = 0; i < candles.length; i++) {
+    const c = candles[i];
+    const off = i * BYTES_PER_CANDLE;
+    view.setBigInt64(off, BigInt(Math.trunc(c.timeMs)), true);
+    view.setFloat64(off + 8, c.open, true);
+    view.setFloat64(off + 16, c.high, true);
+    view.setFloat64(off + 24, c.low, true);
+    view.setFloat64(off + 32, c.close, true);
+    view.setFloat64(off + 40, c.volume, true);
+  }
+  return buf;
+}
+function unpackCandles(buf) {
+  const view = new DataView(buf);
+  const n = Math.floor(buf.byteLength / BYTES_PER_CANDLE);
+  const out = new Array(n);
+  for (let i = 0; i < n; i++) {
+    const off = i * BYTES_PER_CANDLE;
+    out[i] = {
+      timeMs: Number(view.getBigInt64(off, true)),
+      open: view.getFloat64(off + 8, true),
+      high: view.getFloat64(off + 16, true),
+      low: view.getFloat64(off + 24, true),
+      close: view.getFloat64(off + 32, true),
+      volume: view.getFloat64(off + 40, true)
+    };
+  }
+  return out;
+}
+
+// src/stub/stubModule.ts
+var DEFAULT_VISIBLE = 80;
+var Y_AXIS_W = 58;
+var X_AXIS_H = 22;
+var RIGHT_PAD_CANDLES = 4;
+var DEFAULT_COLORS = {
+  [0 /* Background */]: 4279046423,
+  [1 /* Bull */]: 4280723098,
+  [2 /* Bear */]: 4293874512,
+  [3 /* Wick */]: 4286086022,
+  [4 /* Grid */]: 4280231472,
+  [5 /* AxisText */]: 4287337630,
+  [6 /* Crosshair */]: 4291416537,
+  [9 /* CrosshairTarget */]: 4291416537
+};
+function median(xs) {
+  if (xs.length === 0) return 0;
+  const s = [...xs].sort((a, b) => a - b);
+  const mid = s.length >> 1;
+  return s.length % 2 ? s[mid] : (s[mid - 1] + s[mid]) / 2;
+}
+function niceStep(raw) {
+  if (raw <= 0 || !Number.isFinite(raw)) return 1;
+  const mag = Math.pow(10, Math.floor(Math.log10(raw)));
+  const norm = raw / mag;
+  const step = norm <= 1 ? 1 : norm <= 2 ? 2 : norm <= 5 ? 5 : 10;
+  return step * mag;
+}
+var StubChart = class {
+  constructor(canvas) {
+    __publicField(this, "canvas", canvas);
+    __publicField(this, "ctx");
+    __publicField(this, "candles", []);
+    __publicField(this, "durationMs", 6e4);
+    __publicField(this, "wCss", 0);
+    __publicField(this, "hCss", 0);
+    __publicField(this, "dpr", 1);
+    __publicField(this, "visStart", 0);
+    __publicField(this, "visEnd", 0);
+    __publicField(this, "priceMin", 0);
+    __publicField(this, "priceMax", 1);
+    __publicField(this, "rangeInit", false);
+    __publicField(this, "crosshair", false);
+    __publicField(this, "chX", 0);
+    __publicField(this, "chY", 0);
+    __publicField(this, "colors", { ...DEFAULT_COLORS });
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("VroomChart stub: 2D canvas context unavailable");
+    this.ctx = ctx;
+  }
+  // --- geometry helpers ---------------------------------------------------
+  get plotW() {
+    return Math.max(0, this.wCss - Y_AXIS_W);
+  }
+  get plotH() {
+    return Math.max(0, this.hCss - X_AXIS_H);
+  }
+  xOf(timeMs) {
+    const span = this.visEnd - this.visStart || 1;
+    return (timeMs - this.visStart) / span * this.plotW;
+  }
+  yOf(price) {
+    const span = this.priceMax - this.priceMin || 1;
+    return (this.priceMax - price) / span * this.plotH;
+  }
+  color(key) {
+    return argbToCss(this.colors[key] ?? DEFAULT_COLORS[key] ?? 4278190080);
+  }
+  // --- data ---------------------------------------------------------------
+  setCandles(packed) {
+    this.candles = unpackCandles(packed);
+    if (this.candles.length >= 2) {
+      const diffs = [];
+      for (let i = 1; i < this.candles.length; i++) {
+        diffs.push(this.candles[i].timeMs - this.candles[i - 1].timeMs);
+      }
+      const m = median(diffs);
+      if (m > 0) this.durationMs = m;
+    }
+    if (!this.rangeInit) this.resetWindow();
+    this.recomputePriceBounds();
+  }
+  resetWindow() {
+    const n = this.candles.length;
+    if (n === 0) {
+      this.visStart = 0;
+      this.visEnd = 1;
+      return;
+    }
+    const last = this.candles[n - 1].timeMs;
+    this.visEnd = last + this.durationMs * RIGHT_PAD_CANDLES;
+    this.visStart = this.visEnd - this.durationMs * (DEFAULT_VISIBLE + RIGHT_PAD_CANDLES);
+    this.rangeInit = true;
+  }
+  recomputePriceBounds() {
+    let lo = Infinity;
+    let hi = -Infinity;
+    for (const c of this.candles) {
+      if (c.timeMs < this.visStart || c.timeMs > this.visEnd) continue;
+      if (c.low < lo) lo = c.low;
+      if (c.high > hi) hi = c.high;
+    }
+    if (!Number.isFinite(lo) || !Number.isFinite(hi) || hi <= lo) {
+      if (this.priceMax > this.priceMin) return;
+      lo = 0;
+      hi = 1;
+    }
+    const pad = (hi - lo) * 0.08;
+    this.priceMin = lo - pad;
+    this.priceMax = hi + pad;
+  }
+  // --- sizing -------------------------------------------------------------
+  setSize(width, height, dpr) {
+    this.wCss = width;
+    this.hCss = height;
+    this.dpr = dpr || 1;
+    this.canvas.width = Math.max(1, Math.round(width * this.dpr));
+    this.canvas.height = Math.max(1, Math.round(height * this.dpr));
+    this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+  }
+  setColor(key, argb) {
+    this.colors[key] = argb >>> 0;
+  }
+  setVisibleRange(startMs, endMs) {
+    if (startMs === 0 && endMs === 0) {
+      this.rangeInit = false;
+      this.resetWindow();
+    } else {
+      this.visStart = startMs;
+      this.visEnd = endMs;
+      this.rangeInit = true;
+    }
+    this.recomputePriceBounds();
+  }
+  // --- viewport mutators --------------------------------------------------
+  pan(dx, dy) {
+    this.translate(dx, dy);
+  }
+  translate(dx, dy) {
+    const span = this.visEnd - this.visStart;
+    const dt = dx / (this.plotW || 1) * span;
+    this.visStart -= dt;
+    this.visEnd -= dt;
+    if (dy) {
+      const pspan = this.priceMax - this.priceMin;
+      const dp = dy / (this.plotH || 1) * pspan;
+      this.priceMin += dp;
+      this.priceMax += dp;
+    }
+  }
+  zoom(scaleX, scaleY, fx, fy) {
+    if (scaleX !== 1) {
+      const span = this.visEnd - this.visStart;
+      const focalT = this.visStart + fx / (this.plotW || 1) * span;
+      const newSpan = span / scaleX;
+      this.visStart = focalT - fx / (this.plotW || 1) * newSpan;
+      this.visEnd = this.visStart + newSpan;
+    }
+    if (scaleY !== 1) {
+      const pspan = this.priceMax - this.priceMin;
+      const focalP = this.priceMax - fy / (this.plotH || 1) * pspan;
+      const newSpan = pspan / scaleY;
+      this.priceMax = focalP + fy / (this.plotH || 1) * newSpan;
+      this.priceMin = this.priceMax - newSpan;
+    }
+  }
+  scalePriceAxis(dy) {
+    const factor = Math.max(0.1, 1 + dy / (this.plotH || 1));
+    const center = (this.priceMin + this.priceMax) / 2;
+    const half = (this.priceMax - this.priceMin) / 2 * factor;
+    this.priceMin = center - half;
+    this.priceMax = center + half;
+  }
+  scaleTimeAxis(dx) {
+    const factor = Math.max(0.1, 1 + dx / (this.plotW || 1));
+    const span = (this.visEnd - this.visStart) * factor;
+    this.visStart = this.visEnd - span;
+  }
+  getAxisMetrics() {
+    return { yAxisWidth: Y_AXIS_W, xAxisHeight: X_AXIS_H, indicatorHeight: 0 };
+  }
+  // --- crosshair ----------------------------------------------------------
+  setCrosshair(x, y) {
+    this.crosshair = true;
+    this.chX = x;
+    this.chY = y;
+  }
+  clearCrosshair() {
+    this.crosshair = false;
+  }
+  snapIndex() {
+    if (this.candles.length === 0) return -1;
+    const span = this.visEnd - this.visStart || 1;
+    const t = this.visStart + this.chX / (this.plotW || 1) * span;
+    let best = -1;
+    let bestD = Infinity;
+    for (let i = 0; i < this.candles.length; i++) {
+      const d = Math.abs(this.candles[i].timeMs - t);
+      if (d < bestD) {
+        bestD = d;
+        best = i;
+      }
+    }
+    return best;
+  }
+  getCrosshairCandle() {
+    if (!this.crosshair) return null;
+    const i = this.snapIndex();
+    if (i < 0) return null;
+    const c = this.candles[i];
+    return { ...c };
+  }
+  // --- indicators (accepted, not drawn in the stub) -----------------------
+  setRSI() {
+  }
+  setMACD() {
+  }
+  setOverlays(_overlays) {
+  }
+  setVWAP() {
+  }
+  isAnimating() {
+    return false;
+  }
+  // --- rendering ----------------------------------------------------------
+  present() {
+    const ctx = this.ctx;
+    const w = this.wCss;
+    const h = this.hCss;
+    if (w <= 0 || h <= 0) return;
+    ctx.clearRect(0, 0, w, h);
+    ctx.fillStyle = this.color(0 /* Background */);
+    ctx.fillRect(0, 0, w, h);
+    this.drawPriceAxis();
+    this.drawTimeAxis();
+    this.drawCandles();
+    if (this.crosshair) this.drawCrosshair();
+  }
+  priceTicks() {
+    const span = this.priceMax - this.priceMin;
+    if (span <= 0) return [];
+    const step = niceStep(span / 5);
+    const first = Math.ceil(this.priceMin / step) * step;
+    const out = [];
+    for (let p = first; p <= this.priceMax; p += step) out.push(p);
+    return out;
+  }
+  fmtPrice(p) {
+    const span = this.priceMax - this.priceMin;
+    const decimals = span < 1 ? 4 : span < 100 ? 2 : 0;
+    return p.toFixed(decimals);
+  }
+  drawPriceAxis() {
+    const ctx = this.ctx;
+    const plotW = this.plotW;
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = this.color(4 /* Grid */);
+    ctx.fillStyle = this.color(5 /* AxisText */);
+    ctx.font = '11px -apple-system, system-ui, "Segoe UI", sans-serif';
+    ctx.textAlign = "left";
+    ctx.textBaseline = "middle";
+    for (const p of this.priceTicks()) {
+      const y = this.yOf(p);
+      if (y < 0 || y > this.plotH) continue;
+      ctx.beginPath();
+      ctx.moveTo(0, Math.round(y) + 0.5);
+      ctx.lineTo(plotW, Math.round(y) + 0.5);
+      ctx.stroke();
+      ctx.fillText(this.fmtPrice(p), plotW + 6, y);
+    }
+  }
+  fmtTime(timeMs) {
+    const d = new Date(timeMs);
+    const span = this.visEnd - this.visStart;
+    const twoDays = 2 * 24 * 3600 * 1e3;
+    const pad = (n) => String(n).padStart(2, "0");
+    if (span < twoDays) return `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    return `${d.getMonth() + 1}/${d.getDate()}`;
+  }
+  drawTimeAxis() {
+    const ctx = this.ctx;
+    const span = this.visEnd - this.visStart;
+    if (span <= 0) return;
+    const targetPx = 80;
+    const stepMs = niceStep(span / this.plotW * targetPx);
+    const first = Math.ceil(this.visStart / stepMs) * stepMs;
+    ctx.fillStyle = this.color(5 /* AxisText */);
+    ctx.font = '11px -apple-system, system-ui, "Segoe UI", sans-serif';
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    const y = this.plotH + X_AXIS_H / 2;
+    for (let t = first; t <= this.visEnd; t += stepMs) {
+      const x = this.xOf(t);
+      if (x < 0 || x > this.plotW) continue;
+      ctx.fillText(this.fmtTime(t), x, y);
+    }
+  }
+  drawCandles() {
+    const ctx = this.ctx;
+    const span = this.visEnd - this.visStart || 1;
+    const slotW = this.durationMs / span * this.plotW;
+    const bodyW = Math.max(1, slotW * 0.7);
+    const bull = this.color(1 /* Bull */);
+    const bear = this.color(2 /* Bear */);
+    const wick = this.color(3 /* Wick */);
+    for (const c of this.candles) {
+      const x = this.xOf(c.timeMs);
+      if (x < -slotW || x > this.plotW + slotW) continue;
+      const up = c.close >= c.open;
+      const yHigh = this.yOf(c.high);
+      const yLow = this.yOf(c.low);
+      const yOpen = this.yOf(c.open);
+      const yClose = this.yOf(c.close);
+      ctx.strokeStyle = wick;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(Math.round(x) + 0.5, yHigh);
+      ctx.lineTo(Math.round(x) + 0.5, yLow);
+      ctx.stroke();
+      ctx.fillStyle = up ? bull : bear;
+      const top = Math.min(yOpen, yClose);
+      const bodyH = Math.max(1, Math.abs(yClose - yOpen));
+      ctx.fillRect(x - bodyW / 2, top, bodyW, bodyH);
+    }
+  }
+  drawCrosshair() {
+    const ctx = this.ctx;
+    const i = this.snapIndex();
+    if (i < 0) return;
+    const c = this.candles[i];
+    const x = this.xOf(c.timeMs);
+    const y = Math.max(0, Math.min(this.plotH, this.chY));
+    ctx.save();
+    ctx.strokeStyle = this.color(6 /* Crosshair */);
+    ctx.lineWidth = 1;
+    ctx.setLineDash([4, 4]);
+    ctx.beginPath();
+    ctx.moveTo(Math.round(x) + 0.5, 0);
+    ctx.lineTo(Math.round(x) + 0.5, this.plotH);
+    ctx.moveTo(0, Math.round(y) + 0.5);
+    ctx.lineTo(this.plotW, Math.round(y) + 0.5);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    const ty = this.yOf(c.close);
+    ctx.strokeStyle = this.color(9 /* CrosshairTarget */);
+    ctx.beginPath();
+    ctx.arc(x, ty, 3.5, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.restore();
+  }
+  destroy() {
+    this.candles = [];
+  }
+};
+function createStubModule() {
+  return {
+    create(canvas) {
+      return new StubChart(canvas);
+    }
+  };
+}
+
+// src/wasm/adapter.ts
+var uid = 0;
+var WasmHandle = class {
+  constructor(wc) {
+    __publicField(this, "wc", wc);
+  }
+  setCandles(packed) {
+    this.wc.setCandles(new Uint8Array(packed));
+  }
+  setSize(width, height, dpr) {
+    this.wc.setSize(width, height, dpr);
+  }
+  setColor(key, argb) {
+    this.wc.setColor(key, argb >>> 0);
+  }
+  setVisibleRange(startMs, endMs) {
+    this.wc.setVisibleRange(startMs, endMs);
+  }
+  pan(dx, dy) {
+    this.wc.pan(dx, dy);
+  }
+  translate(dx, dy) {
+    this.wc.translate(dx, dy);
+  }
+  zoom(scaleX, scaleY, fx, fy) {
+    this.wc.zoom(scaleX, scaleY, fx, fy);
+  }
+  scalePriceAxis(dy) {
+    this.wc.scalePriceAxis(dy);
+  }
+  scaleTimeAxis(dx) {
+    this.wc.scaleTimeAxis(dx);
+  }
+  getAxisMetrics() {
+    return this.wc.getAxisMetrics();
+  }
+  setCrosshair(x, y) {
+    this.wc.setCrosshair(x, y);
+  }
+  clearCrosshair() {
+    this.wc.clearCrosshair();
+  }
+  getCrosshairCandle() {
+    return this.wc.getCrosshairCandle();
+  }
+  setRSI(enabled, period, upperBand, lowerBand, maEnabled, maPeriod) {
+    this.wc.setRSI(enabled, period, upperBand, lowerBand, maEnabled, maPeriod);
+  }
+  setMACD(enabled, fast, slow, signal) {
+    this.wc.setMACD(enabled, fast, slow, signal);
+  }
+  setOverlays(overlays) {
+    this.wc.setOverlays(overlays);
+  }
+  setVWAP(enabled, resetOffsetMin, color, width) {
+    this.wc.setVWAP(enabled, resetOffsetMin, color >>> 0, width);
+  }
+  isAnimating() {
+    return this.wc.isAnimating();
+  }
+  present() {
+    this.wc.present();
+  }
+  destroy() {
+    this.wc.delete();
+  }
+};
+function makeWasmModule(module, fontBytes) {
+  return {
+    create(canvas) {
+      if (!canvas.id) canvas.id = `vroom-canvas-${uid++}`;
+      const wc = new module.WebChart(`#${canvas.id}`);
+      if (fontBytes) wc.setTypeface(fontBytes);
+      return new WasmHandle(wc);
+    }
+  };
+}
+
+// src/wasm/loadWasm.ts
+var dynamicImport = new Function("u", "return import(u)");
+async function loadWasmCore(cfg) {
+  const mod = await dynamicImport(cfg.moduleUrl);
+  const instance = await mod.default({
+    locateFile: (path) => path.endsWith(".wasm") && cfg.wasmUrl ? cfg.wasmUrl : path
+  });
+  let fontBytes = null;
+  if (cfg.fontUrl) {
+    try {
+      const res = await fetch(cfg.fontUrl);
+      if (res.ok) {
+        fontBytes = new Uint8Array(await res.arrayBuffer());
+        console.info(`[vroom] axis font loaded (${cfg.fontUrl}, ${fontBytes.length} bytes)`);
+      } else {
+        console.warn(`[vroom] axis font fetch ${cfg.fontUrl} \u2192 HTTP ${res.status}; labels will be blank.`);
+      }
+    } catch (e) {
+      console.warn(`[vroom] axis font fetch failed (${cfg.fontUrl}); labels will be blank.`, e);
+    }
+  } else {
+    console.warn("[vroom] no fontUrl provided; text labels will be blank.");
+  }
+  return makeWasmModule(instance, fontBytes);
+}
+
+// src/index.ts
+function bundledWasmConfig() {
+  return {
+    moduleUrl: new URL("../assets/vroom_core.mjs", import.meta.url).href,
+    wasmUrl: new URL("../assets/vroom_core.wasm", import.meta.url).href,
+    fontUrl: new URL("../assets/VroomSans-Regular.ttf", import.meta.url).href
+  };
+}
+var modulePromise = null;
+function loadVroom(opts) {
+  if (modulePromise) return modulePromise;
+  if (opts?.forceStub) {
+    modulePromise = Promise.resolve(createStubModule());
+  } else {
+    const cfg = opts?.wasm ?? bundledWasmConfig();
+    const fallback = opts?.fallbackToStub !== false;
+    modulePromise = loadWasmCore(cfg).catch((err) => {
+      if (!fallback) throw err;
+      console.warn("[vroom] Skia-WASM core failed to load; using Canvas2D stub.", err);
+      return createStubModule();
+    });
+  }
+  return modulePromise;
+}
+function resetVroomForTesting() {
+  modulePromise = null;
+}
+export {
+  BYTES_PER_CANDLE,
+  COLOR_KEYS,
+  ColorKey,
+  applyTheme,
+  argbToCss,
+  loadVroom,
+  packCandles,
+  parseColor,
+  resetVroomForTesting,
+  unpackCandles
+};
+//# sourceMappingURL=index.js.map