/* ══ OM Group ERP — Analysis Studio · Analytical Canvas ═══════════════════ A measurement workspace, not a drawing layer. Two rules govern this file: 1 · ANCHORED IN DATA, NEVER IN PIXELS. Every object stores a bucket label plus a value. New transactions, a rescaled axis, a different grain or a fresh cross-filter re-resolve the anchor against the current bucket list and the object lands back on the same business event. 2 · EVERY OBJECT MEASURES. The readout beside a drawing is recomputed by StudioMeasure from the CURRENT series on every render — start, end, change, slope, angle, duration in days and billing cycles, channel width, volatility, confidence bands, and the revenue / profit / orders / customers / tonnage sitting inside a region. Nothing is cached, nothing is frozen; edit a sale and the numbers on the drawing move with it. Interaction engine: click locks an anchor immediately and permanently — it never drifts. Hover previews the unfinished point at 60fps. A drag (press, move, release) works exactly like a sequence of clicks: press locks point A, release (if it moved) locks point B. A snap engine pulls the cursor gently onto data points and existing anchors within ~16px, with a small ring marking the engaged target; hold Alt to draw free. Selected objects show draggable handles — drag a handle to move that anchor, drag the body to move the whole object. Nothing here ever writes to the ERP. Annotations live in the workspace. */ const { useState: caSt, useEffect: caEf, useMemo: caMemo, useRef: caRef } = React; const CA_TOOLS = [ { id: 'select', label: 'Select', pts: 0, k: 'V', grp: 'Edit', d: 'Pick, move and edit objects already on the chart.', icon: 'M4 4l7 16 2-6 6-2z' }, { id: 'trend', label: 'Trend line', pts: 2, k: 'T', grp: 'Draw', d: 'Two anchors — reads change, slope, angle and duration.', icon: 'M3 18L21 6' }, { id: 'ray', label: 'Ray', pts: 2, k: 'Y', grp: 'Draw', d: 'A trend that keeps running past the second anchor.', icon: 'M3 18l9-6M12 12h9' }, { id: 'extend', label: 'Extended line', pts: 2, k: 'E', grp: 'Draw', d: 'Extends across the full period in both directions.', icon: 'M2 19L22 5M2 19h.01M22 5h.01' }, { id: 'arrow', label: 'Arrow', pts: 2, k: 'A', grp: 'Draw', d: 'Points at a moment worth calling out.', icon: 'M4 20L20 4M20 4h-7M20 4v7' }, { id: 'channel', label: 'Parallel channel', pts: 2, k: 'C', grp: 'Statistical', d: 'Equal-width band around a trend — reads containment.', icon: 'M3 20L21 8M3 14L21 2' }, { id: 'regression', label: 'Regression channel', pts: 3, k: 'R', grp: 'Statistical', d: 'Least-squares fit — two anchors set the span, a third sets the band width. Reads R² and volatility.', icon: 'M3 19L21 7M4 21h16M6 16l3-2 3 1 4-4' }, { id: 'pitchfork', label: 'Pitchfork', pts: 3, k: 'K', grp: 'Statistical', d: 'Three anchors project a median and two tines forward.', icon: 'M3 20L14 9M8 3l11 11M8 3L3 8M19 14l-5 5M14 9l5 5' }, { id: 'forecast', label: 'Forecast projection', pts: 2, k: 'P', grp: 'Projection', d: 'Extends the drawn slope forward with a confidence cone.', icon: 'M3 17l6-5 4 3M13 15l8-6M17 9h4v4' }, { id: 'measure', label: 'Measure', pts: 2, k: 'M', grp: 'Measurement', d: '₹ and quantity difference, %, days, slope, average per day.', icon: 'M4 16l4-4 4 4 4-4 4 4M4 8h16' }, { id: 'hline', label: 'Horizontal level', pts: 1, k: 'H', grp: 'Measurement', d: 'A price or volume level with distance to the series.', icon: 'M3 12h18' }, { id: 'vline', label: 'Vertical marker', pts: 1, k: 'B', grp: 'Measurement', d: 'Marks one bucket and everything booked inside it.', icon: 'M12 3v18' }, { id: 'rect', label: 'Rectangle region', pts: 2, k: 'Q', grp: 'Shapes', d: 'Totals the revenue, profit, orders and tonnage inside.', icon: 'M4 6h16v12H4z' }, { id: 'ellipse', label: 'Circle region', pts: 2, k: 'O', grp: 'Shapes', d: 'Softer highlight over a cluster of buckets.', icon: 'M12 6a6 6 0 100 12 6 6 0 100-12z' }, { id: 'zoneRisk', label: 'Risk zone', pts: 2, k: 'X', grp: 'Shapes', d: 'Flags a window as exposure — full height of the plot.', icon: 'M4 4h6v16H4zM14 9v2M14 15h.01' }, { id: 'zoneOpp', label: 'Opportunity zone', pts: 2, k: 'Z', grp: 'Shapes', d: 'Flags a window as upside — full height of the plot.', icon: 'M14 4h6v16h-6zM4 12l3 3 4-6' }, { id: 'note', label: 'Text note', pts: 1, k: 'N', grp: 'Annotation', d: 'Pins a comment to one bucket and value.', icon: 'M5 4h14v11l-5 5H5z' }, ]; const CA_GRPS = ['Edit', 'Draw', 'Statistical', 'Projection', 'Measurement', 'Shapes', 'Annotation']; const CA_WEIGHTS = [1, 1.7, 2.5]; const CA_COLORS = ['#F97316', '#2563EB', '#DC2626', '#16A34A', window.OM_CHART_COLORS.neutral]; const CA_ZOOM_STEP = 1.35, CA_ZOOM_TWEEN = 170; const CA_WS = 'omStudioWorkspaces'; function caLoadWs() { try { return JSON.parse(localStorage.getItem(CA_WS) || '[]'); } catch (e) { return []; } } function caSaveWs(l) { try { localStorage.setItem(CA_WS, JSON.stringify(l.slice(0, 20))); } catch (e) { } } let caSeq = 0; const caId = () => 'd' + (Date.now() % 1e7) + '-' + (++caSeq); const caName = d => d.name || ((CA_TOOLS.find(t => t.id === d.type) || {}).label || d.type); /* ── precision cursors ═══════════════════════════════════════════════════ Small, sharp, soft-charcoal reticle — a tight crosshair at the exact hotspot plus a faint tool glyph beside it, cased in a thin white halo so it reads on white plot, gridline or coloured fill alike. */ const CA_CUR_GLYPH = { trend: 'M22 22L30 14', ray: 'M22 22l4-4M26 18h4', extend: 'M20 24L30 14', channel: 'M21 25L29 17M23 27L31 19', regression: 'M21 26L30 15M20 29h11', pitchfork: 'M20 28L27 21M24 16l6 6M24 16l-3 3M30 22l-3 3', forecast: 'M20 27l4-4 3 2M27 25l4-4M28 21h3v3', measure: 'M20 26l3-3 3 3 3-3M20 20h10', hline: 'M19 22h12', vline: 'M25 16v12', arrow: 'M20 28L30 18M30 18h-5M30 18v5', rect: 'M20 19h11v10H20z', ellipse: 'M25.5 18.5a5 5 0 100 10 5 5 0 100-10z', zoneRisk: 'M21 18h4v11h-4zM29 20v3M29 27h.01', zoneOpp: 'M27 18h4v11h-4zM20 24l2 2 3-4', note: 'M20 17h10v8l-4 4h-6z', select: '', }; function caCursorCss(tool) { const cross = 'M12 7v3.4M12 13.6v3.4M7 12h3.4M13.6 12h3.4'; const glyph = CA_CUR_GLYPH[tool]; const svg = '' + '' + '' + (glyph ? '' : '') + '' + '' + '' + (glyph ? '' : '') + '' + ''; return 'url("data:image/svg+xml,' + encodeURIComponent(svg) + '") 12 12, crosshair'; } const CA_CURSORS = (() => { const m = {}; CA_TOOLS.forEach(t => { if (t.id !== 'select') m[t.id] = caCursorCss(t.id); }); return m; })(); /* re-resolve a stored anchor against the CURRENT bucket labels */ function caResolve(anchor, labels) { if (!anchor) return { ix: 0, val: 0 }; if (anchor.label != null) { const i = labels.indexOf(anchor.label); if (i >= 0) return { ix: i + (anchor.frac || 0), val: anchor.val }; } return { ix: stClamp(anchor.ix, 0, Math.max(0, labels.length - 1)), val: anchor.val }; } function caAnchor(ix, val, labels) { const i = Math.round(stClamp(ix, 0, Math.max(0, labels.length - 1))); return { ix, frac: ix - i, label: labels[i], val }; } /* ── snap engine ──────────────────────────────────────────────────── Magnetism with a hierarchy, not a nearest-neighbour search: peaks and troughs pull hardest, then exact datapoints, then anchors already placed, then the grid and the bucket baseline. The bias is subtracted from the pixel distance so a slightly further peak still wins over a nearer gridline — the cursor assists, it never fights. */ const CA_BIAS = { peak: 13, low: 13, data: 8, anchor: 10, grid: 0, bucket: 1 }; const CA_SNAP_R = { peak: 26, low: 26, data: 20, anchor: 22, grid: 11, bucket: 11 }; function caSnap(ix, val, labels, values, draws, g) { let best = null, bestScore = Infinity; const consider = (cix, cval, kind) => { if (cval == null || !isFinite(cval)) return; const dist = Math.hypot(g.X(cix) - g.X(ix), g.Y(cval) - g.Y(val)); if (dist > (CA_SNAP_R[kind] || 16)) return; const score = dist - (CA_BIAS[kind] || 0); if (score < bestScore) { bestScore = score; best = { ix: cix, val: cval, kind }; } }; for (let i = 0; i < labels.length; i++) { const v = values[i]; if (v == null) continue; const p = values[i - 1], n = values[i + 1]; const peak = p != null && n != null && v > p && v > n; const low = p != null && n != null && v < p && v < n; consider(i, v, peak ? 'peak' : low ? 'low' : 'data'); } draws.forEach(dw => { ['a', 'b', 'c'].forEach(k => { const a = dw[k]; if (a) { const r = caResolve(a, labels); consider(r.ix, r.val, 'anchor'); } }); }); /* grid intersections — major time buckets × the axis levels */ const step = (g.max - g.min) / 4; const nearI = Math.round(ix); if (nearI >= 0 && nearI < labels.length) { for (let t = 0; t <= 4; t++) consider(nearI, g.min + step * t, 'grid'); consider(nearI, val, 'bucket'); } if (best) return { ix: best.ix, val: best.val, snapped: true, kind: best.kind }; return { ix, val, snapped: false }; } const CA_SNAP_LBL = { peak: 'peak', low: 'low', data: 'data point', anchor: 'anchor', grid: 'grid', bucket: 'bucket' }; /* ── the statistics card ═════════════════════════════════════════════════ ONE component, used by every analytical object — regression, channel, trend, measure, pitchfork, forecast, zone, note. It measures its own content and sizes to it: labels left on a common edge, values right on a common edge, one fixed row height, guaranteed padding, and a flip so it never covers the object it belongs to, the handles, the axis or the toolbar. Nothing clips, nothing overflows, nothing is hidden. ax / ay are the object's reference point — the card chooses its side. */ const CA_PAD = 13, CA_ROW = 14.2, CA_HEAD = 22, CA_COLGAP = 20, CA_WMIN = 190, CA_WMAX = 344; const caTw = (s, px, bold) => String(s == null ? '' : s).length * px * (bold ? 0.575 : 0.535); function CaPanel({ st, ax, ay, g, color, avoid }) { if (!st) return null; const rows = st.rows || []; const badge = st.badge && st.badge.text ? 22 : 0; /* uppercase + letter-spacing runs ~18% wider than the mixed-case rows, and the badge pill eats 9px of inset each side before any padding */ let need = caTw(st.title, 9.2, true) * 1.18 + 36; rows.forEach(r => { need = Math.max(need, caTw(r.k, 8.9, true) + CA_COLGAP + caTw(r.v, 9.4, true) + CA_PAD * 2); }); if (badge) need = Math.max(need, caTw(st.badge.text, 8.8, true) * 1.16 + 18 + CA_PAD * 2); const room = Math.max(150, g.iw - 20); const W = Math.round(stClamp(need, Math.min(CA_WMIN, room), Math.min(CA_WMAX, room))); const H = CA_HEAD + rows.length * CA_ROW + 10 + badge; const L = g.padL, R = g.padL + g.iw, T = g.padT, B = g.padT + g.ih; let px = ax + 14; if (px + W > R - 4) px = ax - 14 - W; /* flip sides */ px = stClamp(px, L + 4, Math.max(L + 4, R - W - 4)); let py = ay; if (py + H > B - 4) py = ay - H - 10; /* flip above */ py = stClamp(py, T + 4, Math.max(T + 4, B - H - 4)); /* last resort: if the card would still sit on top of its own object, lift it clear — above the object if there is room, otherwise below it */ if (avoid && px < avoid.x1 && px + W > avoid.x0 && py < avoid.y1 && py + H > avoid.y0) { const up = avoid.y0 - H - 8, dnp = avoid.y1 + 8; if (up >= T + 4) py = up; else if (dnp + H <= B - 4) py = dnp; } const tone = st.badge ? st.badge.tone : 'n'; const tc = tone === 'up' ? '#16A34A' : tone === 'dn' ? '#DC2626' : '#6B7068'; /* a label only ever shortens when the value beside it needs the room */ const label = r => { const avail = W - CA_PAD * 2 - caTw(r.v, 9.4, true) - 10; const k = String(r.k); if (caTw(k, 8.9, true) <= avail) return k; const max = Math.max(3, Math.floor(avail / (8.9 * 0.575)) - 1); return k.slice(0, max).replace(/[\s·—-]+$/, '') + '…'; }; return ( {st.title.toUpperCase()} {rows.map((r, i) => { const ty = py + CA_HEAD + 13.5 + i * CA_ROW; return ( {label(r)} {r.v} ); })} {badge > 0 && ( {st.badge.text.toUpperCase()} )} ); } /* Full screen and the object menu are position:fixed, but several ancestors animate (transform), which would make them a containing block and trap the overlay inside the panel. Both are therefore portalled to a host appended to that carries the Intelligence Center's token scope. */ function caHost() { let el = document.getElementById('ca-portal-host'); if (!el) { el = document.createElement('div'); el.id = 'ca-portal-host'; document.body.appendChild(el); } return el; } function CaPortal({ on, mode, children }) { const host = caMemo(caHost, []); caEf(() => { host.className = 'intel'; host.setAttribute('data-mode', mode || 'sales'); }, [host, mode]); return on ? ReactDOM.createPortal(children, host) : children; } /* handles that can be dragged to move a single anchor, or the whole object */ function CaHandle({ x, y, isSel, color, active, onPointerDown }) { return ( ); } function StudioCanvas({ ctx, store, onStore }) { const IEc2 = window.IntelEngine; const SM = window.StudioMeasure; const opts = ctx.mode === 'purchase' ? ['purchaseValue', 'qtyPurchased', 'app', 'dieselCost', 'transportCost'] : ['revenue', 'grossProfit', 'netProfit', 'qtySold', 'asp', 'margin']; const metric = opts.indexOf(store.metric) >= 0 ? store.metric : opts[0]; const draws = store.draws || []; const setMetric = m => onStore({ metric: m }); const setDraws = v => onStore({ draws: typeof v === 'function' ? v(draws) : v }); const [tool, setTool] = caSt('select'); const [color, setColor] = caSt(CA_COLORS[0]); const [noteText, setNoteText] = caSt(''); const [draft, setDraft] = caSt(null); const draftRef = caRef(null); const setDraftBoth = d => { draftRef.current = d; setDraft(d); }; const [sel, setSel] = caSt(null); const [showAll, setShowAll] = caSt(false); const [ws, setWs] = caSt(caLoadWs); const [wsName, setWsName] = caSt(''); const [active, setActive] = caSt(store.active || null); const [snapVis, setSnapVis] = caSt(null); const [cur, setCur] = caSt(null); /* live cursor readout for the full-screen status bar */ const curT = caRef(0); const [editDraft, setEditDraft] = caSt(null); const editRef = caRef(null); const setEditBoth = v => { editRef.current = v; setEditDraft(v); }; const dragMeta = caRef(null); /* {id, mode:'anchor'|'move', key?, start?, orig?} — dragging an existing object */ const downRef = caRef(null); /* {px,py} of the click/press that opened the current draft stage */ const geomRef = caRef(null); const snapAllowed = caRef(true); const hist = caRef({ past: [], future: [] }); const [fs, setFs] = caSt(false); const [layers, setLayers] = caSt(false); const [menu, setMenu] = caSt(null); /* {x,y,id} — object context menu */ const [vh, setVh] = caSt(() => window.innerHeight); const [guide, setGuide] = caSt(() => { try { return !localStorage.getItem('omCaGuide'); } catch (e) { return false; } }); const closeGuide = () => { setGuide(false); try { localStorage.setItem('omCaGuide', '1'); } catch (e) { } }; /* ── viewport navigation — pan and zoom the CHART, never the layout ──── `view` is the visible domain rectangle (buckets on X, values on Y) that the plot's fixed pixel box maps. Zooming moves that rectangle around the cursor; the container, toolbar, axes and panels never move, and StPlot clips every drawn object to the plot frame. Targets live in a ref so rapid wheel bursts compound off the latest value, while the displayed rectangle eases toward it over ~170ms. */ const viewRef = caRef(null); /* the target */ const shownRef = caRef(null); /* what is on screen right now */ const baseRef = caRef(null); /* fit-to-data domain, reported by the plot */ const viewRaf = caRef(null); const [view, setView] = caSt(null); const tweenView = (from, to, done) => { if (viewRaf.current) cancelAnimationFrame(viewRaf.current); if (!from) { shownRef.current = to; setView(to); if (done) done(); return; } const t0 = performance.now(); const step = now => { const p = Math.min(1, (now - t0) / CA_ZOOM_TWEEN), e = 1 - Math.pow(1 - p, 3); const v = { x0: from.x0 + (to.x0 - from.x0) * e, x1: from.x1 + (to.x1 - from.x1) * e, y0: from.y0 + (to.y0 - from.y0) * e, y1: from.y1 + (to.y1 - from.y1) * e }; shownRef.current = v; setView(v); if (p < 1) viewRaf.current = requestAnimationFrame(step); else { viewRaf.current = null; if (done) done(); } }; viewRaf.current = requestAnimationFrame(step); }; const applyView = (next, animate) => { const b = baseRef.current; if (next == null) { viewRef.current = null; const from = shownRef.current; if (!from || !b || !animate) { if (viewRaf.current) cancelAnimationFrame(viewRaf.current); viewRaf.current = null; shownRef.current = null; setView(null); return; } tweenView(from, b, () => { shownRef.current = null; setView(null); }); return; } const cur = viewRef.current || shownRef.current || b; if (!cur) return; let t = typeof next === 'function' ? next(cur, b) : next; if (!t || !isFinite(t.x0) || !isFinite(t.y0)) return; if (b && window.stClampView) t = window.stClampView(t, b); viewRef.current = t; if (!animate) { if (viewRaf.current) cancelAnimationFrame(viewRaf.current); viewRaf.current = null; shownRef.current = t; setView(t); return; } tweenView(shownRef.current || cur, t, null); }; const zoomBy = k => applyView(cur => { const cx = (cur.x0 + cur.x1) / 2, cy = (cur.y0 + cur.y1) / 2; const xs = (cur.x1 - cur.x0) / k, ys = (cur.y1 - cur.y0) / k; return { x0: cx - xs / 2, x1: cx + xs / 2, y0: cy - ys / 2, y1: cy + ys / 2 }; }, true); const zoomIn = () => zoomBy(CA_ZOOM_STEP); const zoomOut = () => zoomBy(1 / CA_ZOOM_STEP); const zoomReset = () => applyView(null, true); const vb = baseRef.current; const zoomShown = view && vb ? (vb.x1 - vb.x0) / Math.max(1e-9, view.x1 - view.x0) : 1; const zoomMax = vb ? Math.max(1.2, (vb.x1 - vb.x0) / 1.5) : 12; const zoomMin = 1 / 20; const zoomLbl = (zoomShown < 0.995 ? (zoomShown * 100).toFixed(zoomShown < 0.095 ? 1 : 0) : Math.round(zoomShown * 100)) + '%'; caEf(() => { const on = () => setVh(window.innerHeight); window.addEventListener('resize', on); return () => window.removeEventListener('resize', on); }, []); caEf(() => () => { if (viewRaf.current) cancelAnimationFrame(viewRaf.current); }, []); caEf(() => { if (!fs) return; const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = prev; }; }, [fs]); caEf(() => { if (!menu) return; const close = e => { if (!e.target.closest || !e.target.closest('.ca-menu')) setMenu(null); }; const t = setTimeout(() => window.addEventListener('pointerdown', close), 0); return () => { clearTimeout(t); window.removeEventListener('pointerdown', close); }; }, [menu]); const meta = IEc2.METRICS[metric] || IEc2.METRICS.revenue; const labels = ctx.ser.points.map(p => p.label); const values = ctx.ser.points.map(p => p.m[metric]); /* the live measurement environment — rebuilt from the current series on every data change, which is what keeps every readout honest. */ const env = caMemo(() => ({ labels, values, points: ctx.ser.points, meta, metric, grain: ctx.ser.grain, mode: ctx.mode, ctx, resolve: a => caResolve(a, labels), }), [ctx, metric, JSON.stringify(values)]); const mark = () => { const h = hist.current; h.past.push(draws); if (h.past.length > 80) h.past.shift(); h.future = []; }; const push = d => { mark(); setDraws(l => l.concat([d])); setSel(d.id); }; const undo = () => { const h = hist.current; if (!h.past.length) return; h.future.push(draws); setDraws(h.past.pop()); setSel(null); setDraftBoth(null); }; const redo = () => { const h = hist.current; if (!h.future.length) return; h.past.push(draws); setDraws(h.future.pop()); }; const remove = id => { mark(); setDraws(l => l.filter(d => d.id !== id)); setSel(null); setMenu(null); }; const clear = () => { if (!draws.length) return; mark(); setDraws([]); setSel(null); setMenu(null); }; const patch = (id, p) => { mark(); setDraws(l => l.map(d => d.id === id ? Object.assign({}, d, p) : d)); }; const patchQ = (id, p) => setDraws(l => l.map(d => d.id === id ? Object.assign({}, d, p) : d)); /* no history — live sliders, renames */ const duplicate = id => { const d = draws.find(x => x.id === id); if (!d) return; const off = a => a ? Object.assign({}, a, { ix: a.ix + 0.4 }) : a; const cp = Object.assign({}, d, { id: caId(), name: caName(d) + ' copy', a: off(d.a), b: off(d.b), c: off(d.c) }); mark(); setDraws(l => l.concat([cp])); setSel(cp.id); setMenu(null); }; const reorder = (id, dir) => { const i = draws.findIndex(d => d.id === id); if (i < 0) return; const l = draws.slice(), x = l.splice(i, 1)[0]; l.splice(dir === 'front' ? l.length : 0, 0, x); mark(); setDraws(l); setMenu(null); }; const nudge = (dxIx, dyPx) => { if (!sel) return; const g = geomRef.current; const dv = g ? (g.max - g.min) / g.ih * dyPx : 0; mark(); setDraws(l => l.map(d => { if (d.id !== sel || d.locked) return d; const shift = {}; ['a', 'b', 'c'].forEach(k => { if (!d[k]) return; const r = caResolve(d[k], labels); shift[k] = caAnchor(r.ix + dxIx, r.val + dv, labels); }); return Object.assign({}, d, shift); })); }; function commitEdit() { const dm = dragMeta.current; if (!dm) return; const e = editRef.current; if (e) { mark(); setDraws(list => list.map(x => x.id === e.id ? Object.assign({}, x, e) : x)); } dragMeta.current = null; setEditBoth(null); setSnapVis(null); } function cancelEdit() { dragMeta.current = null; setEditBoth(null); setSnapVis(null); } caEf(() => { const up = () => { if (dragMeta.current) commitEdit(); }; window.addEventListener('pointerup', up); return () => window.removeEventListener('pointerup', up); }, [draws]); caEf(() => { const field = t => /input|textarea|select/i.test((t && t.tagName) || '') || (t && t.isContentEditable); const h = e => { if (field(e.target)) { if (e.key === 'Escape') e.target.blur(); return; } const meta = e.metaKey || e.ctrlKey; if (e.key === 'Escape') { if (dragMeta.current) { cancelEdit(); return; } if (draftRef.current) { setDraftBoth(null); downRef.current = null; setTool('select'); setSnapVis(null); return; } if (guide) { closeGuide(); return; } if (menu) { setMenu(null); return; } if (sel) { setSel(null); return; } if (fs) setFs(false); return; } if (e.key === '?' || (e.key === '/' && e.shiftKey)) { e.preventDefault(); if (guide) closeGuide(); else setGuide(true); return; } if (meta && (e.key === 'z' || e.key === 'Z')) { e.preventDefault(); e.shiftKey ? redo() : undo(); return; } if (meta && (e.key === 'y' || e.key === 'Y')) { e.preventDefault(); redo(); return; } if (meta && (e.key === 'd' || e.key === 'D')) { if (sel) { e.preventDefault(); duplicate(sel); } return; } if (meta && (e.key === '=' || e.key === '+')) { e.preventDefault(); zoomIn(); return; } if (meta && (e.key === '-' || e.key === '_')) { e.preventDefault(); zoomOut(); return; } if (meta && e.key === '0') { e.preventDefault(); zoomReset(); return; } if (meta) return; if ((e.key === 'Delete' || e.key === 'Backspace') && sel && !dragMeta.current && !draftRef.current) { e.preventDefault(); remove(sel); return; } if (sel && /^Arrow/.test(e.key)) { e.preventDefault(); const big = e.shiftKey ? 5 : 1; if (e.key === 'ArrowLeft') nudge(-0.06 * big, 0); if (e.key === 'ArrowRight') nudge(0.06 * big, 0); if (e.key === 'ArrowUp') nudge(0, -2 * big); if (e.key === 'ArrowDown') nudge(0, 2 * big); return; } if (e.key === 'Alt') { snapAllowed.current = false; return; } const k = String(e.key || '').toUpperCase(); if (k === 'F') { e.preventDefault(); setFs(f => !f); return; } if (k === 'L') { e.preventDefault(); setLayers(v => !v); return; } const t = CA_TOOLS.find(x => x.k === k); if (t) { e.preventDefault(); setTool(t.id); setDraftBoth(null); setSnapVis(null); } }; const hu = e => { if (e.key === 'Alt') snapAllowed.current = true; }; document.addEventListener('keydown', h, true); document.addEventListener('keyup', hu, true); return () => { document.removeEventListener('keydown', h, true); document.removeEventListener('keyup', hu, true); }; }, [sel, draws, fs, menu, guide]); const toolDef = CA_TOOLS.find(t => t.id === tool) || CA_TOOLS[0]; function resolveSnap(d, e) { const g = geomRef.current; if (e.altKey || !snapAllowed.current || !g) { setSnapVis(null); return { ix: d.ix, val: d.val }; } const s = caSnap(d.ix, d.val, labels, values, draws, g); setSnapVis(s.snapped ? s : null); return s; } /* An anchor lands exactly where it was clicked — nothing is ever pulled onto the series afterwards. A regression channel's anchors choose the DATE RANGE; the dashed full-height guides show that window, and the band inside it is the least-squares fit of the data. */ const anchorFor = (type, key, ix, val) => caAnchor(ix, val, labels); /* Shift constrains the unfinished leg to 0°/45°/90° off the locked anchor */ function lockAngle(from, ix, val) { const g = geomRef.current; if (!g || !from) return { ix, val }; const A = caResolve(from, labels); const ax = g.X(A.ix), ay = g.Y(A.val); const dx = g.X(ix) - ax, dy = g.Y(val) - ay; const len = Math.hypot(dx, dy); if (len < 1) return { ix, val }; const step = Math.PI / 4, a = Math.round(Math.atan2(dy, dx) / step) * step; return { ix: g.invX(ax + Math.cos(a) * len), val: g.invY(ay + Math.sin(a) * len) }; } /* place the moving point: snap, unless Shift is asking for a locked angle */ function place(e, d, from, key) { if (e.shiftKey && from) { setSnapVis(null); const L = lockAngle(from, d.ix, d.val); return anchorFor(tool, key, L.ix, L.val); } const sp = resolveSnap(d, e); return anchorFor(tool, key, sp.ix, sp.val); } /* The regression channel's third stage sets WIDTH, not a position: the handle is pinned to the second anchor's bucket and only its value moves, free of magnetism (snapping a width to a data point makes it jump). */ function widthAnchor(dr, d) { const B = caResolve(dr.b, labels); return caAnchor(B.ix, d.val, labels); } const isWidthStage = dr => dr && dr.stage === 2 && dr.type === 'regression'; function startAnchorDrag(ev, dObj, key) { ev.stopPropagation(); setSel(dObj.id); dragMeta.current = { id: dObj.id, mode: 'anchor', key }; } function startMoveDrag(ev, dObj) { ev.stopPropagation(); setSel(dObj.id); dragMeta.current = { id: dObj.id, mode: 'move', start: null, orig: { a: dObj.a, b: dObj.b, c: dObj.c } }; } const pointer = { down: (e, d) => { if (menu) setMenu(null); if (tool === 'select') { setSel(null); return; } const sp = resolveSnap(d, e); if (toolDef.pts === 1) { push({ id: caId(), type: tool, color, a: caAnchor(sp.ix, sp.val, labels), text: tool === 'note' ? (noteText.trim() || 'Note') : null }); setTool('select'); setSnapVis(null); return; } const dr = draftRef.current; if (!dr) { downRef.current = { px: d.px, py: d.py }; const a0 = anchorFor(tool, 'a', sp.ix, sp.val); setDraftBoth({ id: caId(), type: tool, color, a: a0, b: a0, stage: 1 }); return; } if (dr.stage === 1) { downRef.current = { px: d.px, py: d.py }; const bAnchor = place(e, d, dr.a, 'b'); if (toolDef.pts === 3) { setDraftBoth(Object.assign({}, dr, { b: bAnchor, c: bAnchor, stage: 2 })); return; } push(Object.assign({}, dr, { b: bAnchor })); setDraftBoth(null); setTool('select'); setSnapVis(null); return; } if (dr.stage === 2) { push(Object.assign({}, dr, { c: isWidthStage(dr) ? widthAnchor(dr, d) : place(e, d, dr.b, 'c') })); setDraftBoth(null); setTool('select'); setSnapVis(null); } }, move: (e, d) => { if (fs) { const now = performance.now(); if (now - curT.current > 70) { curT.current = now; setCur({ ix: d.ix, val: d.val }); } } const dm = dragMeta.current; if (dm) { const sp = resolveSnap(d, e); if (dm.mode === 'anchor') { const obj = draws.find(x => x.id === dm.id); const base = editRef.current && editRef.current.id === dm.id ? editRef.current : { id: dm.id }; setEditBoth(Object.assign({}, base, { id: dm.id, [dm.key]: anchorFor(obj && obj.type, dm.key, sp.ix, sp.val) })); } else { if (!dm.start) { dm.start = { ix: d.ix, val: d.val }; return; } const deltaIx = d.ix - dm.start.ix, deltaVal = d.val - dm.start.val; const shifted = { id: dm.id }; ['a', 'b', 'c'].forEach(k => { const o = dm.orig[k]; if (!o) return; const r = caResolve(o, labels); shifted[k] = caAnchor(r.ix + deltaIx, r.val + deltaVal, labels); }); setEditBoth(shifted); } return; } const dr = draftRef.current; if (!dr) return; if (dr.stage === 2) { if (isWidthStage(dr)) { setSnapVis(null); setDraftBoth(Object.assign({}, dr, { c: widthAnchor(dr, d) })); } else setDraftBoth(Object.assign({}, dr, { c: place(e, d, dr.b, 'c') })); } else setDraftBoth(Object.assign({}, dr, { b: place(e, d, dr.a, 'b') })); }, up: (e, d) => { if (dragMeta.current) { commitEdit(); return; } const dr = draftRef.current; if (!dr || !downRef.current) return; const dist = Math.hypot(d.px - downRef.current.px, d.py - downRef.current.py); downRef.current = null; if (dist < 6) return; /* a plain click — wait for the next click to place the point */ if (dr.stage === 1) { const bAnchor = place(e, d, dr.a, 'b'); if (toolDef.pts === 3) { setDraftBoth(Object.assign({}, dr, { b: bAnchor, c: bAnchor, stage: 2 })); return; } push(Object.assign({}, dr, { b: bAnchor })); setDraftBoth(null); setTool('select'); setSnapVis(null); return; } if (dr.stage === 2) { push(Object.assign({}, dr, { c: isWidthStage(dr) ? widthAnchor(dr, d) : place(e, d, dr.b, 'c') })); setDraftBoth(null); setTool('select'); setSnapVis(null); } }, leave: () => { const dr = draftRef.current; if (dr && dr.stage === 0) setDraftBoth(null); setSnapVis(null); setCur(null); }, }; function saveWorkspace() { const nm = (wsName || '').trim() || 'Analysis ' + (ws.length + 1); const entry = { name: nm, metric, draws, grain: ctx.ser.grain, period: { from: ctx.period.from, to: ctx.period.to, kind: ctx.period.kind, label: ctx.period.label }, at: Date.now() }; const next = [entry].concat(ws.filter(w => w.name !== nm)); setWs(next); caSaveWs(next); setWsName(''); setActive(nm); window.toast && window.toast('Workspace “' + nm + '” saved', 'ok'); } function loadWorkspace(w) { hist.current.push(draws); onStore({ draws: w.draws || [], metric: opts.indexOf(w.metric) >= 0 ? w.metric : opts[0], active: w.name }); setActive(w.name); setSel(null); window.toast && window.toast('“' + w.name + '” restored — every measurement recomputed against live data', 'ok'); } function delWorkspace(nm) { const next = ws.filter(w => w.name !== nm); setWs(next); caSaveWs(next); if (active === nm) setActive(null); } const base = draft ? draws.concat([draft]) : draws; const all = editDraft ? base.map(dw => dw.id === editDraft.id ? Object.assign({}, dw, editDraft) : dw) : base; function overlay(g) { geomRef.current = g; baseRef.current = g.base; const nodes = [], panels = []; all.forEach(d => { if (d.hidden) return; const A = caResolve(d.a, labels); const B = d.b ? caResolve(d.b, labels) : null; const C = d.c ? caResolve(d.c, labels) : null; const x1 = g.X(A.ix), y1 = g.Y(A.val); const x2 = B ? g.X(B.ix) : x1, y2 = B ? g.Y(B.val) : y1; const c = d.color || '#F97316'; const isSel = sel === d.id || (draft && draft.id === d.id); const isEditing = dragMeta.current && dragMeta.current.id === d.id; const pick = ev => { ev.stopPropagation(); if (d.locked) return; if (tool === 'select') startMoveDrag(ev, d); }; const ctx = ev => { ev.preventDefault(); ev.stopPropagation(); setSel(d.id); setMenu({ x: ev.clientX, y: ev.clientY, id: d.id }); }; const common = { className: 'ca-obj' + (isSel ? ' on' : ''), 'data-lw': (d.w && d.w !== 1) ? String(d.w) : null, onPointerDown: pick, onContextMenu: ctx, /* While a drawing tool is armed nothing on the canvas may swallow a click — including the in-progress draft itself. Clicking the third point of a channel or pitchfork usually lands ON the preview band, and an object that stopped propagation there left the drawing permanently unfinished. */ style: { cursor: tool === 'select' ? (d.locked ? 'default' : 'move') : 'inherit', pointerEvents: tool === 'select' ? null : 'none', '--lw': d.w || 1, opacity: d.opacity == null ? 1 : d.opacity }, }; const canHandle = tool === 'select' && isSel && !d.locked; const key = d.id; const st = SM ? SM.stats(d, env, g) : null; const wantPanel = st && (isSel || showAll); if (d.type === 'trend' || d.type === 'arrow' || d.type === 'measure' || d.type === 'ray' || d.type === 'extend' || d.type === 'forecast') { let sx = x1, sy = y1, ex = x2, ey = y2; const dx = x2 - x1, dy = y2 - y1; if ((d.type === 'ray' || d.type === 'forecast' || d.type === 'extend') && dx !== 0) { const at = X => y1 + dy * (X - x1) / dx; const L = g.padL, Rr = g.padL + g.iw; if (d.type === 'extend') { sx = L; sy = at(L); ex = Rr; ey = at(Rr); } else { const tx = dx > 0 ? Rr : L; ex = tx; ey = at(tx); } } nodes.push( {d.type === 'forecast' && st && st.geo && (() => { const ci = Math.abs(g.Y(0) - g.Y(st.geo.ci)) || 0; return ; })()} {d.type === 'arrow' && (() => { const a = Math.atan2(ey - sy, ex - sx), L = 11; return ; })()} {canHandle ? startAnchorDrag(ev, d, 'a')} /> : } {B && (canHandle ? startAnchorDrag(ev, d, 'b')} /> : )} ); if (wantPanel) panels.push(); } else if (d.type === 'channel' || d.type === 'regression') { const geo = st && st.geo; const isReg = d.type === 'regression'; const P = i => g.Y(geo ? geo.intercept + geo.slope * i : A.val); const lo = geo ? geo.lo : Math.min(A.ix, B ? B.ix : A.ix), hi = geo ? geo.hi : Math.max(A.ix, B ? B.ix : A.ix); const xl = g.X(lo), xh = g.X(hi); const hwPx = geo ? Math.abs(g.Y(0) - g.Y(geo.hw)) : 12; /* Handles sit on the anchors the user actually clicked — never on the fitted line, which necessarily moves as the least-squares fit is recomputed. This is what made the first regression anchor appear to drift while the second point was being previewed: the anchor was locked all along, but the handle drawn for it was not the anchor. */ const h1x = isReg ? x1 : xl, h1y = isReg ? y1 : P(lo); const h2x = isReg ? x2 : xh, h2y = isReg ? y2 : P(hi); nodes.push( {isReg && {/* the two anchors are RANGE boundaries — mark them the way a regression trend does, so it reads as a window over the data */} {B && } {B && } } {canHandle ? startAnchorDrag(ev, d, 'a')} /> : } {canHandle ? startAnchorDrag(ev, d, 'b')} /> : } {isReg && d.c && (() => { const C2 = caResolve(d.c, labels); const cx = g.X(C2.ix), cy = g.Y(C2.val); return canHandle ? startAnchorDrag(ev, d, 'c')} /> : ; })()} ); if (wantPanel) panels.push(); } else if (d.type === 'pitchfork') { const geo = st && st.geo; if (geo) { const endIx = labels.length - 1; const yAt = i => g.Y(geo.va + geo.slope * (i - geo.ia)); const xa = g.X(geo.ia), xe = g.X(endIx); const upPx = Math.abs(g.Y(0) - g.Y(Math.max(geo.up, geo.dn))) * (Math.max(geo.up, geo.dn) < 0 ? -1 : 1); const dnPx = Math.abs(g.Y(0) - g.Y(Math.min(geo.up, geo.dn))) * (Math.min(geo.up, geo.dn) < 0 ? -1 : 1); nodes.push( {canHandle ? startAnchorDrag(ev, d, 'a')} /> : } ); if (wantPanel) panels.push(); } } else if (d.type === 'hline') { nodes.push( {window.IC.short(A.val)} {canHandle && startAnchorDrag(ev, d, 'a')} />} ); if (wantPanel) panels.push(); } else if (d.type === 'vline') { const li = Math.round(A.ix); nodes.push( {labels[li] || ''} {canHandle && startAnchorDrag(ev, d, 'a')} />} ); if (wantPanel) panels.push(); } else if (d.type === 'rect' || d.type === 'zoneRisk' || d.type === 'zoneOpp') { const zc = d.type === 'zoneRisk' ? '#DC2626' : d.type === 'zoneOpp' ? '#16A34A' : c; const rx = Math.min(x1, x2), rw = Math.abs(x2 - x1); const ry = d.type === 'rect' ? Math.min(y1, y2) : g.padT; const rh = d.type === 'rect' ? Math.abs(y2 - y1) : g.ih; nodes.push( {d.type !== 'rect' && (() => { const zt = d.type === 'zoneRisk' ? 'RISK ZONE' : 'OPPORTUNITY ZONE'; const zw = zt.length * 6.1 + 12; return {zt}; })()} {canHandle ? startAnchorDrag(ev, d, 'a')} /> : null} {canHandle ? startAnchorDrag(ev, d, 'b')} /> : null} ); if (wantPanel) panels.push(); } else if (d.type === 'ellipse') { nodes.push( {canHandle && startAnchorDrag(ev, d, 'a')} />} {canHandle && startAnchorDrag(ev, d, 'b')} />} ); if (wantPanel) panels.push(); } else if (d.type === 'note') { const words = String(d.text || 'Note').split(/\s+/); const lns = []; let cur = ''; words.forEach(w => { if ((cur + ' ' + w).trim().length > 26) { lns.push(cur.trim()); cur = w; } else cur = (cur + ' ' + w).trim(); }); if (cur) lns.push(cur); const bw = Math.min(190, Math.max.apply(null, lns.map(l => l.length * 5.6)) + 20); const bh = lns.length * 13 + 16; const bx = stClamp(x1, g.padL, g.padL + g.iw - bw), by = stClamp(y1 - bh - 8, g.padT, g.padT + g.ih - bh); nodes.push( {canHandle ? startAnchorDrag(ev, d, 'a')} /> : } {lns.map((l, i) => {l})} ); } }); if (snapVis && (draft || dragMeta.current)) { const sx = g.X(snapVis.ix), sy = g.Y(snapVis.val); const lbl = CA_SNAP_LBL[snapVis.kind] || 'snap'; nodes.push( {lbl.toUpperCase()} ); } return nodes.concat(panels); } const selDraw = draws.find(d => d.id === sel); const selStats = selDraw && SM ? SM.stats(selDraw, env, null) : null; const plotH = fs ? Math.max(300, vh - 152) : 420; const hintMsg = tool !== 'select' ? (draft && draft.stage === 2 ? (tool === 'regression' ? 'Both anchors locked — move to set the channel width, click to finish' : 'First two points locked — click to set the third point of the pitchfork') : toolDef.pts === 1 ? 'Click to place the ' + toolDef.label.toLowerCase() : draft ? 'First anchor locked — click (or release) to confirm the second point' : 'Click to lock the first anchor, then move and click again') : (sel ? 'Selected · ' + caName(draws.find(d => d.id === sel) || {}) : (draws.length ? 'Select an object to read its measurement' : 'Pick a tool and click the chart to begin')); const toolBtn = t => ( ); const toggleFs = () => { const n = !fs; setFs(n); if (n) setLayers(true); }; return (
Canvas Every object is an instrument — anchored to a bucket and a value, measured against live records, never written back.
{fs && (
Analysis Studio
{opts.map(o => )}
{ctx.ser.grain} · {ctx.period.label} setWsName(e.target.value)} placeholder="Name this analysis…" onKeyDown={e => { if (e.key === 'Enter') saveWorkspace(); }} />
)}
{CA_GRPS.map((grp, gi) => { const list = CA_TOOLS.filter(t => t.grp === grp); if (!list.length) return null; return ( {gi > 0 && } {grp} {list.map(toolBtn)} ); })} Colour {CA_COLORS.map(c => ( ))} Zoom {zoomLbl} History View
Metric
{opts.map(o => )}
{tool === 'note' ? setNoteText(e.target.value)} placeholder="Note text, then click the chart…" autoFocus /> : {draws.length ? draws.length + ' object' + (draws.length === 1 ? '' : 's') + ' · select one to read its measurement' : 'Pick a tool and drag across the chart'}}
{ if (!e.target.closest('.ca-obj')) { e.preventDefault(); setMenu(null); } }}> {layers && (
Objects{draws.length}
{!draws.length &&
Nothing drawn yet. Pick a tool and click the chart — every object lands here.
} {draws.slice().reverse().map(d => (
setSel(d.id)} onContextMenu={e => { e.preventDefault(); setSel(d.id); setMenu({ x: e.clientX, y: e.clientY, id: d.id }); }}> patchQ(d.id, { name: e.target.value })} aria-label="Object name" />
))}
)} {guide && ( )} {tool !== 'select' && !fs && (
{hintMsg} · Shift locks the angle · Alt draws free · Esc cancels
)}
{fs && (
Tool{toolDef.label} Snap{snapVis ? (CA_SNAP_LBL[snapVis.kind] || 'magnetic') : 'magnetic'} Objects{draws.length}{sel ? ' · 1 selected' : ''}
{hintMsg}
Bucket{cur ? (labels[Math.round(stClamp(cur.ix, 0, labels.length - 1))] || '—') : '—'} {meta.label}{cur ? window.IC.fmt(cur.val, meta.fmt) : '—'} Zoom{zoomLbl} Wheel zooms · Space-drag pans · double-click fits · ⌘Z undo
)}
Saved analyses
{ws.length === 0 && None yet — draw something and name it below.} {ws.map(w => ( loadWorkspace(w)} title={(w.draws || []).length + ' annotations · saved on ' + w.period.label}> {w.name} ))}
setWsName(e.target.value)} placeholder="July Analysis, Board Review…" onKeyDown={e => { if (e.key === 'Enter') saveWorkspace(); }} />
{menu && (() => { const d = draws.find(x => x.id === menu.id); if (!d) return null; const left = Math.min(menu.x, window.innerWidth - 226), top = Math.min(menu.y, window.innerHeight - 320); const op = d.opacity == null ? 1 : d.opacity; return (
e.preventDefault()}>
{caName(d)}
Colour
{CA_COLORS.map(c => )}
Weight
{CA_WEIGHTS.map((w, i) => )}
Opacity patchQ(d.id, { opacity: Number(e.target.value) / 100 })} aria-label="Opacity" /> {Math.round(op * 100)}%
); })()} {selStats && (
{selStats.rows.map((r, i) => (
{r.k}{r.v}
))}
{selStats.badge && selStats.badge.text && (
{selStats.badge.text}
)}
)} {draws.length > 0 && (
{draws.map(d => { const t = CA_TOOLS.find(z => z.id === d.type); const sum = SM ? SM.summary(d, env) : ''; return (
setSel(d.id)} style={sel === d.id ? { background: '#FAF9F7', borderColor: 'var(--iLine)' } : null}> {t ? t.label : d.type}{d.text ? ' — ' + d.text : ''} {d.a.label}{d.b ? ' → ' + d.b.label : ''} {sum || window.IC.fmt(d.a.val, meta.fmt)}
); })}
)}
); } Object.assign(window, { StudioCanvas, CA_TOOLS, CaPanel, CA_CURSORS });