emberwick 0.1.1 → 0.3.0

package/index.js

@@ -733,6 +733,332 @@ function drawCrosshair(ctx, s) {
     ctx.fillText(t, bx, plot.h + 12);
   }
 }
+const MARKER_SHAPES = [
+  "arrowUp",
+  "arrowDown",
+  "triangleUp",
+  "triangleDown",
+  "circle",
+  "square",
+  "diamond",
+  "flag",
+  "label"
+];
+const SHAPE_SET = new Set(MARKER_SHAPES);
+const DEFAULT_POSITION = {
+  arrowUp: "belowBar",
+  triangleUp: "belowBar",
+  arrowDown: "aboveBar",
+  triangleDown: "aboveBar"
+};
+const POSITIONS = /* @__PURE__ */ new Set(["aboveBar", "belowBar", "inBar", "atPrice"]);
+function normalizeMarker(raw, i) {
+  if (!raw || !isFinite(raw.time)) return null;
+  const shape = SHAPE_SET.has(raw.shape) ? raw.shape : "circle";
+  const position = POSITIONS.has(raw.position) ? raw.position : DEFAULT_POSITION[shape] || "aboveBar";
+  return {
+    id: raw.id != null ? String(raw.id) : `mk${i}`,
+    time: +raw.time,
+    price: isFinite(raw.price) ? +raw.price : null,
+    shape,
+    position,
+    color: raw.color || null,
+    textColor: raw.textColor || null,
+    text: raw.text != null ? String(raw.text) : "",
+    size: isFinite(raw.size) && raw.size > 0 ? +raw.size : 1,
+    /** Anything the consumer wants handed back on hover/click. */
+    data: raw.data,
+    index: -1
+  };
+}
+function normalizeMarkers(list) {
+  if (!Array.isArray(list)) return [];
+  const out = [];
+  for (let i = 0; i < list.length; i++) {
+    const m = normalizeMarker(list[i], i);
+    if (m) out.push(m);
+  }
+  out.sort((a, b) => a.time - b.time);
+  return out;
+}
+function nearestIndex(bars, time) {
+  const n = bars.length;
+  if (!n) return -1;
+  if (time <= bars[0].time) return 0;
+  if (time >= bars[n - 1].time) return n - 1;
+  let lo = 0;
+  let hi = n - 1;
+  while (lo <= hi) {
+    const mid = lo + hi >> 1;
+    const t = bars[mid].time;
+    if (t === time) return mid;
+    if (t < time) lo = mid + 1;
+    else hi = mid - 1;
+  }
+  const a = Math.max(0, hi);
+  const b = Math.min(n - 1, lo);
+  return Math.abs(bars[a].time - time) <= Math.abs(bars[b].time - time) ? a : b;
+}
+function resolveMarkers(markers, bars) {
+  for (let i = 0; i < markers.length; i++) {
+    markers[i].index = nearestIndex(bars, markers[i].time);
+  }
+  return markers;
+}
+function layoutMarkers(markers, s) {
+  const { ts, ps, plot, bars, live } = s;
+  if (!markers.length || !bars.length) return [];
+  const { from, to } = ts.visibleRange();
+  const lastIdx = bars.length - 1;
+  const dense = ts.barWidth() <= 3;
+  const stacks = /* @__PURE__ */ new Map();
+  const placed = [];
+  let lastDenseX = -Infinity;
+  for (const m of markers) {
+    const i = m.index;
+    if (i < 0 || i < from - 2 || i > to + 2) continue;
+    const bar = live && i === lastIdx ? live : bars[i];
+    if (!bar) continue;
+    const x = ts.x(i);
+    if (x < -48 || x > plot.w + 48) continue;
+    if (dense) {
+      if (x - lastDenseX < 4) continue;
+      lastDenseX = x;
+    }
+    const r = 5 * m.size;
+    let y;
+    let dir = 0;
+    if (m.position === "atPrice" && m.price != null) {
+      y = ps.y(m.price);
+    } else if (m.position === "inBar") {
+      y = ps.y((bar.high + bar.low) / 2);
+    } else if (m.position === "belowBar") {
+      y = ps.y(bar.low) + r + 7;
+      dir = 1;
+    } else {
+      y = ps.y(bar.high) - r - 7;
+      dir = -1;
+    }
+    if (dir !== 0) {
+      const key = i + m.position;
+      const n = stacks.get(key) || 0;
+      stacks.set(key, n + 1);
+      y += dir * n * (r * 2 + 5);
+    }
+    placed.push({ m, x, y, r, dir });
+  }
+  return placed;
+}
+const DASH = { solid: [], dashed: [6, 4], dotted: [1, 3] };
+const DOWN_SHAPES = /* @__PURE__ */ new Set(["arrowDown", "triangleDown"]);
+function roundRect(ctx, x, y, w, h, r) {
+  const rr = Math.max(0, Math.min(r, h / 2, w / 2));
+  ctx.beginPath();
+  ctx.moveTo(x + rr, y);
+  ctx.lineTo(x + w - rr, y);
+  ctx.quadraticCurveTo(x + w, y, x + w, y + rr);
+  ctx.lineTo(x + w, y + h - rr);
+  ctx.quadraticCurveTo(x + w, y + h, x + w - rr, y + h);
+  ctx.lineTo(x + rr, y + h);
+  ctx.quadraticCurveTo(x, y + h, x, y + h - rr);
+  ctx.lineTo(x, y + rr);
+  ctx.quadraticCurveTo(x, y, x + rr, y);
+  ctx.closePath();
+}
+function drawZones(ctx, s) {
+  const { zones, theme, ts, ps, plot, bars } = s;
+  if (!zones || !zones.length) return;
+  ctx.save();
+  ctx.font = theme.font;
+  ctx.textBaseline = "top";
+  ctx.textAlign = "left";
+  for (const z of zones) {
+    let x;
+    let y;
+    let w;
+    let h;
+    if (isFinite(z.from) && isFinite(z.to)) {
+      y = ps.y(Math.max(z.from, z.to));
+      h = Math.max(1, ps.y(Math.min(z.from, z.to)) - y);
+      x = 0;
+      w = plot.w;
+    } else if (isFinite(z.fromTime) && isFinite(z.toTime) && bars.length) {
+      const a = ts.x(nearestIndex(bars, Math.min(z.fromTime, z.toTime)));
+      const b = ts.x(nearestIndex(bars, Math.max(z.fromTime, z.toTime)));
+      x = a;
+      w = Math.max(1, b - a);
+      y = 0;
+      h = plot.h;
+    } else {
+      continue;
+    }
+    if (x > plot.w || x + w < 0 || y > plot.h || y + h < 0) continue;
+    ctx.fillStyle = z.color || "rgba(38,166,154,0.10)";
+    ctx.fillRect(x, y, w, h);
+    if (z.border) {
+      ctx.strokeStyle = z.border;
+      ctx.lineWidth = 1;
+      ctx.strokeRect(Math.round(x) + 0.5, Math.round(y) + 0.5, Math.round(w), Math.round(h));
+    }
+    if (z.label) {
+      ctx.fillStyle = z.labelColor || theme.text;
+      ctx.fillText(z.label, Math.max(6, x + 6), Math.max(4, y + 4));
+    }
+  }
+  ctx.restore();
+}
+function drawPriceLines(ctx, s) {
+  const { priceLines, theme, ps, plot } = s;
+  if (!priceLines || !priceLines.length) return;
+  const { step } = priceTicks(ps.lo, ps.hi, Math.max(2, Math.floor(plot.h / 58)));
+  const dec = decimalsFor(step);
+  ctx.save();
+  ctx.font = theme.font;
+  ctx.textBaseline = "middle";
+  for (const L of priceLines) {
+    if (!L || !isFinite(L.price)) continue;
+    const y = Math.round(ps.y(L.price)) + 0.5;
+    if (y < 0 || y > plot.h) continue;
+    const color = L.color || theme.textStrong;
+    ctx.setLineDash(DASH[L.lineStyle] || DASH.dashed);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = L.lineWidth || 1;
+    ctx.beginPath();
+    ctx.moveTo(0, y);
+    ctx.lineTo(plot.w, y);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    if (L.title) {
+      ctx.textAlign = "left";
+      const tw = ctx.measureText(L.title).width;
+      ctx.fillStyle = color;
+      roundRect(ctx, 6, y - 9, tw + 12, 18, 4);
+      ctx.fill();
+      ctx.fillStyle = L.titleColor || theme.tagText;
+      ctx.fillText(L.title, 12, y);
+    }
+    if (L.axisLabel !== false) {
+      const label = L.price.toFixed(dec);
+      ctx.textAlign = "left";
+      const lw = ctx.measureText(label).width;
+      ctx.fillStyle = color;
+      ctx.fillRect(plot.w + 1, y - 9, lw + 14, 18);
+      ctx.fillStyle = L.tagTextColor || theme.tagText;
+      ctx.fillText(label, plot.w + 8, y);
+    }
+  }
+  ctx.restore();
+}
+function shapePath(ctx, shape, x, y, r) {
+  ctx.beginPath();
+  switch (shape) {
+    case "arrowUp":
+      ctx.moveTo(x, y - r);
+      ctx.lineTo(x + r, y);
+      ctx.lineTo(x + r * 0.45, y);
+      ctx.lineTo(x + r * 0.45, y + r);
+      ctx.lineTo(x - r * 0.45, y + r);
+      ctx.lineTo(x - r * 0.45, y);
+      ctx.lineTo(x - r, y);
+      ctx.closePath();
+      break;
+    case "arrowDown":
+      ctx.moveTo(x, y + r);
+      ctx.lineTo(x + r, y);
+      ctx.lineTo(x + r * 0.45, y);
+      ctx.lineTo(x + r * 0.45, y - r);
+      ctx.lineTo(x - r * 0.45, y - r);
+      ctx.lineTo(x - r * 0.45, y);
+      ctx.lineTo(x - r, y);
+      ctx.closePath();
+      break;
+    case "triangleUp":
+      ctx.moveTo(x, y - r);
+      ctx.lineTo(x + r, y + r);
+      ctx.lineTo(x - r, y + r);
+      ctx.closePath();
+      break;
+    case "triangleDown":
+      ctx.moveTo(x, y + r);
+      ctx.lineTo(x + r, y - r);
+      ctx.lineTo(x - r, y - r);
+      ctx.closePath();
+      break;
+    case "square":
+      ctx.rect(x - r, y - r, r * 2, r * 2);
+      break;
+    case "diamond":
+      ctx.moveTo(x, y - r);
+      ctx.lineTo(x + r, y);
+      ctx.lineTo(x, y + r);
+      ctx.lineTo(x - r, y);
+      ctx.closePath();
+      break;
+    default:
+      ctx.arc(x, y, r, 0, Math.PI * 2);
+  }
+}
+function drawFlag(ctx, x, y, r, color) {
+  ctx.fillStyle = color;
+  ctx.fillRect(x - r * 0.8, y - r, Math.max(1, r * 0.3), r * 2);
+  ctx.beginPath();
+  ctx.moveTo(x - r * 0.5, y - r);
+  ctx.lineTo(x + r, y - r * 0.55);
+  ctx.lineTo(x - r * 0.5, y - r * 0.1);
+  ctx.closePath();
+  ctx.fill();
+}
+function drawMarkers(ctx, s, placed, hoverId) {
+  const hits = [];
+  if (!placed || !placed.length) return hits;
+  const { theme } = s;
+  ctx.save();
+  ctx.font = theme.font;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  for (const p of placed) {
+    const { m, x, y, r, dir } = p;
+    const color = m.color || (DOWN_SHAPES.has(m.shape) ? theme.down : theme.up);
+    const hovered = hoverId != null && m.id === hoverId;
+    if (m.shape === "label") {
+      const text = m.text || "•";
+      const w = ctx.measureText(text).width + 14;
+      const h = 18 * m.size;
+      roundRect(ctx, x - w / 2, y - h / 2, w, h, 4);
+      ctx.fillStyle = color;
+      ctx.fill();
+      if (hovered) {
+        ctx.strokeStyle = theme.textStrong;
+        ctx.lineWidth = 1.5;
+        ctx.stroke();
+      }
+      ctx.fillStyle = m.textColor || theme.tagText;
+      ctx.fillText(text, x, y + 0.5);
+      hits.push({ id: m.id, marker: m, x, y, r: Math.max(w, h) / 2 });
+      continue;
+    }
+    if (hovered) {
+      ctx.beginPath();
+      ctx.arc(x, y, r + 4, 0, Math.PI * 2);
+      ctx.fillStyle = "rgba(255,255,255,0.14)";
+      ctx.fill();
+    }
+    if (m.shape === "flag") {
+      drawFlag(ctx, x, y, r, color);
+    } else {
+      shapePath(ctx, m.shape, x, y, r);
+      ctx.fillStyle = color;
+      ctx.fill();
+    }
+    if (m.text) {
+      ctx.fillStyle = m.textColor || theme.text;
+      ctx.fillText(m.text, x, dir >= 0 ? y + r + 9 : y - r - 9);
+    }
+    hits.push({ id: m.id, marker: m, x, y, r: r + 3 });
+  }
+  ctx.restore();
+  return hits;
+}
 class Chart {
   constructor(container, options = {}) {
     if (!container) throw new Error("Chart: container element is required");
@@ -749,7 +1075,18 @@ class Chart {
     this._unsub = null;
     this._loadingHistory = false;
     this._exhausted = false;
-    this._listeners = { crosshair: /* @__PURE__ */ new Set(), visibleRange: /* @__PURE__ */ new Set() };
+    this._listeners = {
+      crosshair: /* @__PURE__ */ new Set(),
+      visibleRange: /* @__PURE__ */ new Set(),
+      markerClick: /* @__PURE__ */ new Set(),
+      markerHover: /* @__PURE__ */ new Set()
+    };
+    this._markers = normalizeMarkers(options.markers);
+    this.priceLines = Array.isArray(options.priceLines) ? options.priceLines.slice() : [];
+    this.zones = Array.isArray(options.zones) ? options.zones.slice() : [];
+    this._markerHits = [];
+    this._hoverMarkerId = null;
+    this._resolveKey = "";
     this.layers = new Layers(container, ["base", "main", "overlay"]);
     this.ts = new TimeScale(options.timeScale);
     this.ps = new PriceScale(options.priceScale);
@@ -1000,6 +1337,14 @@ class Chart {
       } else return;
       e.preventDefault();
     };
+    this._onClick = (e) => {
+      if (moved) return;
+      if (!this._listeners.markerClick.size) return;
+      const p = localPos(e);
+      const hit = this.markerAt(p.x, p.y);
+      if (hit) for (const fn of this._listeners.markerClick) fn(hit);
+    };
+    el.addEventListener("click", this._onClick);
     el.addEventListener("pointerdown", this._onDown);
     el.addEventListener("pointermove", this._onMove);
     el.addEventListener("pointerup", this._onUp);
@@ -1011,21 +1356,126 @@ class Chart {
     if (!el.hasAttribute("tabindex")) el.setAttribute("tabindex", "0");
   }
   _emitCrosshair(p) {
-    if (!this._listeners.crosshair.size) return;
-    let payload = null;
-    if (p && this.bars.length && p.x <= this.plot.w && p.y <= this.plot.h) {
-      const i = Math.round(this.ts.index(p.x));
-      const bar = this.bars[i];
-      if (bar) payload = { index: i, bar, price: this.ps.price(p.y) };
+    if (this._listeners.crosshair.size) {
+      let payload = null;
+      if (p && this.bars.length && p.x <= this.plot.w && p.y <= this.plot.h) {
+        const i = Math.round(this.ts.index(p.x));
+        const bar = this.bars[i];
+        if (bar) payload = { index: i, bar, price: this.ps.price(p.y) };
+      }
+      for (const fn of this._listeners.crosshair) fn(payload);
     }
-    for (const fn of this._listeners.crosshair) fn(payload);
+    this._updateHover(p);
+  }
+  /**
+   * Topmost marker whose hit circle contains the point, else null.
+   * Hit circles come from the last render, so this costs nothing but a loop.
+   */
+  markerAt(x, y) {
+    const hits = this._markerHits;
+    for (let i = hits.length - 1; i >= 0; i--) {
+      const h = hits[i];
+      const dx = x - h.x;
+      const dy = y - h.y;
+      if (dx * dx + dy * dy <= h.r * h.r) return h.marker;
+    }
+    return null;
+  }
+  _updateHover(p) {
+    const hit = p ? this.markerAt(p.x, p.y) : null;
+    const id = hit ? hit.id : null;
+    if (id === this._hoverMarkerId) return;
+    this._hoverMarkerId = id;
+    this.container.style.cursor = hit ? "pointer" : "crosshair";
+    this.loop.invalidate("main");
+    for (const fn of this._listeners.markerHover) fn(hit);
   }
   subscribe(event, fn) {
     const set = this._listeners[event];
     if (!set) throw new Error(`Chart: unknown event "${event}"`);
     set.add(fn);
+    if (event === "visibleRange") {
+      const payload = this.visibleRange();
+      this._rangeKey = this._rangeIdentity(payload);
+      fn(payload);
+    }
     return () => set.delete(fn);
   }
+  // ------------------------------------------------------------------ range --
+  /**
+   * The window currently on screen. Cheap enough to poll, though
+   * subscribe('visibleRange', fn) is the better way to track it.
+   */
+  visibleRange() {
+    const { from, to } = this.ts.visibleRange();
+    return this._rangePayload(from, to);
+  }
+  _rangePayload(from, to) {
+    const n = this.bars.length;
+    return {
+      from,
+      to,
+      fromTime: n ? this.bars[from].time : null,
+      toTime: n ? this.bars[to].time : null,
+      barCount: n,
+      spacing: this.ts.spacing,
+      settled: this.ts.settled
+    };
+  }
+  _rangeIdentity(p) {
+    return `${p.from}:${p.to}:${p.fromTime}:${p.toTime}:${p.settled ? 1 : 0}`;
+  }
+  /**
+   * Fires only when the window actually changed, so a consumer can hang a
+   * fetch off it without debouncing. Two deliberate choices:
+   *
+   * - `spacing` is NOT part of the identity. It is a float that moves on every
+   *   frame of an eased zoom, so keying on it would make this a 60/sec
+   *   firehose. It is still reported, for level-of-detail decisions.
+   * - `settled` IS part of the identity, so the final event of a gesture
+   *   always arrives with settled:true. Without it, code that defers expensive
+   *   work until the view stops moving would wait forever.
+   */
+  _emitVisibleRange(from, to) {
+    const set = this._listeners.visibleRange;
+    if (!set.size) return;
+    const payload = this._rangePayload(from, to);
+    const key = this._rangeIdentity(payload);
+    if (key === this._rangeKey) return;
+    this._rangeKey = key;
+    for (const fn of set) fn(payload);
+  }
+  // ----------------------------------------------------------- annotations --
+  /** Replace every marker. Each `time` is resolved to its nearest bar. */
+  setMarkers(markers) {
+    this._markers = normalizeMarkers(markers);
+    this._resolveKey = "";
+    this.loop.invalidate("main");
+  }
+  /** The current markers, normalised, each with its resolved bar index. */
+  getMarkers() {
+    return this._markers.slice();
+  }
+  addMarker(marker) {
+    this.setMarkers(this._markers.concat([marker]));
+  }
+  removeMarker(id) {
+    const key = String(id);
+    this.setMarkers(this._markers.filter((m) => m.id !== key));
+  }
+  clearMarkers() {
+    this.setMarkers([]);
+  }
+  /** Horizontal lines — entries, stops, targets, alerts. */
+  setPriceLines(lines) {
+    this.priceLines = Array.isArray(lines) ? lines.slice() : [];
+    this.loop.invalidate("main");
+  }
+  /** Shaded regions: a price band ({from,to}) or a time band ({fromTime,toTime}). */
+  setZones(zones) {
+    this.zones = Array.isArray(zones) ? zones.slice() : [];
+    this.loop.invalidate("all");
+  }
   // ----------------------------------------------------------------- frame --
   _frame(dirty, dt) {
     let animating = false;
@@ -1055,15 +1505,33 @@ class Chart {
       live: liveVisible,
       volumeRatio: this.options.volumeRatio,
       cursor: this.cursor,
-      magnet: this.options.magnet
+      magnet: this.options.magnet,
+      priceLines: this.priceLines,
+      zones: this.zones
     };
+    if (this._markers.length) {
+      const key = this.bars.length + ":" + (this.bars.length ? this.bars[0].time : 0);
+      if (key !== this._resolveKey) {
+        resolveMarkers(this._markers, this.bars);
+        this._resolveKey = key;
+      }
+    }
     if (redrawAll) {
       drawGrid(this.layers.ctx.base, state);
+      drawZones(this.layers.ctx.base, state);
       drawCandles(this.layers.ctx.main, state);
+      drawPriceLines(this.layers.ctx.main, state);
+      this._markerHits = drawMarkers(
+        this.layers.ctx.main,
+        state,
+        layoutMarkers(this._markers, state),
+        this._hoverMarkerId
+      );
     }
     if (redrawAll || dirty.has("overlay")) {
       drawCrosshair(this.layers.ctx.overlay, state);
     }
+    this._emitVisibleRange(from, to);
     return animating;
   }
   // ------------------------------------------------------------------- api --
@@ -1105,11 +1573,15 @@ class Chart {
     el.removeEventListener("wheel", this._onWheel);
     el.removeEventListener("dblclick", this._onDbl);
     el.removeEventListener("keydown", this._onKey);
+    el.removeEventListener("click", this._onClick);
     this.detachFeed();
     this.loop.stop();
     this.layers.destroy();
-    this._listeners.crosshair.clear();
-    this._listeners.visibleRange.clear();
+    for (const set of Object.values(this._listeners)) set.clear();
+    this._markers = [];
+    this._markerHits = [];
+    this.priceLines = [];
+    this.zones = [];
     this.bars = [];
   }
 }
@@ -1288,7 +1760,7 @@ class RandomFeed extends DataFeed {
 function createChart(container, options) {
   return new Chart(container, options);
 }
-const version = "0.1.0";
+const version = "0.2.0";
 export {
   Chart,
   DataFeed,