hyperprop-charting-library 0.1.137 → 0.1.139

package/dist/index.cjs

@@ -2851,6 +2851,9 @@ var DEFAULT_OPTIONS = {
   pinOutOfRangeLines: false,
   doubleClickEnabled: true,
   doubleClickAction: "reset",
+  keyboard: { enabled: true, panBars: 1, deleteSelectedDrawing: true },
+  accessibility: { label: "Price chart", description: "", focusable: true },
+  downsampling: { enabled: true, thresholdPx: 1.5 },
   crosshair: DEFAULT_CROSSHAIR_OPTIONS,
   grid: DEFAULT_GRID_OPTIONS,
   watermark: DEFAULT_WATERMARK_OPTIONS,
@@ -2893,6 +2896,18 @@ var mergeChartOptions = (baseOptions, options = {}) => ({
     ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
     ...options.yAxis ?? {}
   },
+  keyboard: {
+    ...baseOptions.keyboard,
+    ...options.keyboard ?? {}
+  },
+  accessibility: {
+    ...baseOptions.accessibility,
+    ...options.accessibility ?? {}
+  },
+  downsampling: {
+    ...baseOptions.downsampling,
+    ...options.downsampling ?? {}
+  },
   crosshair: {
     ...baseOptions.crosshair,
     ...options.crosshair ?? {}
@@ -3066,6 +3081,10 @@ function createChart(element, options = {}) {
   let drawingSelectHandler = null;
   let drawingDoubleClickHandler = null;
   let drawingEditTextHandler = null;
+  let selectionChangeHandler = null;
+  let contextMenuHandler = null;
+  let keyboardShortcutHandler = null;
+  let lastSelectionSignature = null;
   let magnetMode = "none";
   let priceScaleMode = "linear";
   let priceScaleInverted = false;
@@ -3228,6 +3247,39 @@ function createChart(element, options = {}) {
   canvas.style.setProperty("-webkit-user-select", "none");
   canvas.style.setProperty("-webkit-touch-callout", "none");
   canvas.setAttribute("draggable", "false");
+  const applyAccessibilityAttributes = () => {
+    const a11y = mergedOptions.accessibility ?? {};
+    const focusable = a11y.focusable !== false;
+    if (focusable) {
+      canvas.tabIndex = 0;
+    } else {
+      canvas.removeAttribute("tabindex");
+    }
+    canvas.setAttribute("role", "application");
+    canvas.setAttribute("aria-label", a11y.label ?? "Price chart");
+    if (a11y.description) {
+      canvas.setAttribute("aria-description", a11y.description);
+    } else {
+      canvas.removeAttribute("aria-description");
+    }
+    if (focusable && (mergedOptions.keyboard?.enabled ?? true)) {
+      canvas.setAttribute(
+        "aria-keyshortcuts",
+        "ArrowLeft ArrowRight ArrowUp ArrowDown Plus Minus Home End Delete Escape"
+      );
+    } else {
+      canvas.removeAttribute("aria-keyshortcuts");
+    }
+  };
+  applyAccessibilityAttributes();
+  let focusFromPointer = false;
+  canvas.addEventListener("focus", () => {
+    canvas.style.outline = focusFromPointer ? "none" : "";
+    focusFromPointer = false;
+  });
+  canvas.addEventListener("blur", () => {
+    canvas.style.outline = "none";
+  });
   element.innerHTML = "";
   element.appendChild(canvas);
   const baseCanvas = document.createElement("canvas");
@@ -3731,6 +3783,64 @@ function createChart(element, options = {}) {
     heikinAshiFingerprint = fingerprint;
     return result;
   };
+  let compareSeriesStates = [];
+  const prepareCompareSeries = (options2) => {
+    const rows = [];
+    for (const point of options2.data ?? []) {
+      const t = new Date(point.t).getTime();
+      const c = Number(point.c);
+      if (Number.isFinite(t) && Number.isFinite(c)) rows.push({ t, c });
+    }
+    rows.sort((a, b) => a.t - b.t);
+    return {
+      options: options2,
+      times: rows.map((row) => row.t),
+      closes: rows.map((row) => row.c),
+      aligned: null,
+      alignedFingerprint: ""
+    };
+  };
+  const mainDataFingerprint = () => {
+    const last = data[data.length - 1];
+    return last ? `${data.length}|${data[0].time.getTime()}|${last.time.getTime()}` : "empty";
+  };
+  const getAlignedCompareValues = (state) => {
+    const fingerprint = `${mainDataFingerprint()}|${state.times.length}|${state.times[state.times.length - 1] ?? 0}`;
+    if (state.aligned && state.alignedFingerprint === fingerprint) {
+      return state.aligned;
+    }
+    const aligned = new Float64Array(data.length).fill(Number.NaN);
+    let cursor = 0;
+    let lastValue = Number.NaN;
+    for (let i = 0; i < data.length; i += 1) {
+      const barTime = data[i].time.getTime();
+      while (cursor < state.times.length && state.times[cursor] <= barTime) {
+        lastValue = state.closes[cursor];
+        cursor += 1;
+      }
+      aligned[i] = lastValue;
+    }
+    state.aligned = aligned;
+    state.alignedFingerprint = fingerprint;
+    return aligned;
+  };
+  const visibleCompareSeries = () => compareSeriesStates.filter((state) => state.options.visible !== false && state.times.length > 0);
+  const setCompareSeries = (series) => {
+    compareSeriesStates = (series ?? []).filter((entry) => entry && entry.id).map(prepareCompareSeries);
+    scheduleDraw({ updateAutoScale: true });
+  };
+  const addCompareSeries = (series) => {
+    if (!series?.id) return;
+    compareSeriesStates = [...compareSeriesStates.filter((state) => state.options.id !== series.id), prepareCompareSeries(series)];
+    scheduleDraw({ updateAutoScale: true });
+  };
+  const removeCompareSeries = (id) => {
+    const next = compareSeriesStates.filter((state) => state.options.id !== id);
+    if (next.length === compareSeriesStates.length) return;
+    compareSeriesStates = next;
+    scheduleDraw({ updateAutoScale: true });
+  };
+  const getCompareSeries = () => compareSeriesStates.map((state) => state.options);
   const formatHoverTimeLabel = (time, mode) => {
     if (mode === "time") {
       return time.toLocaleTimeString(void 0, {
@@ -4336,6 +4446,31 @@ function createChart(element, options = {}) {
     const chartType = mergedOptions.chartType;
     const seriesData = chartType === "heikin-ashi" ? getHeikinAshiData() : data;
     const isLineStyleChart = chartType === "line" || chartType === "area" || chartType === "baseline";
+    const comparePlans = [];
+    for (const state of visibleCompareSeries()) {
+      const aligned = getAlignedCompareValues(state);
+      let anchorIndex = -1;
+      for (let index = startIndex; index <= endIndex; index += 1) {
+        if (Number.isFinite(aligned[index] ?? Number.NaN)) {
+          anchorIndex = index;
+          break;
+        }
+      }
+      if (anchorIndex < 0) continue;
+      const baseCompare = aligned[anchorIndex];
+      const baseMain = seriesData[anchorIndex]?.c ?? 0;
+      const usePercent = (state.options.scale ?? "percent") !== "price";
+      const toPrice = usePercent && baseCompare > 0 ? (value) => baseMain * value / baseCompare : (value) => value;
+      let lastNativeValue = Number.NaN;
+      for (let index = endIndex; index >= startIndex; index -= 1) {
+        const value = aligned[index];
+        if (value !== void 0 && Number.isFinite(value)) {
+          lastNativeValue = value;
+          break;
+        }
+      }
+      comparePlans.push({ state, aligned, toPrice, usePercent, baseCompare, lastNativeValue });
+    }
     const skipLatestIndex = mergedOptions.autoScaleIgnoreLatestCandle && data.length > 1 ? data.length - 1 : -1;
     const scanCandleRange = (from, to) => {
       let min = Number.POSITIVE_INFINITY;
@@ -4381,6 +4516,23 @@ function createChart(element, options = {}) {
         maxPrice = Math.max(maxPrice, weightedMax);
       }
     }
+    for (const plan of comparePlans) {
+      if (plan.state.options.includeInAutoScale === false) continue;
+      let compareMin = Number.POSITIVE_INFINITY;
+      let compareMax = Number.NEGATIVE_INFINITY;
+      for (let index = startIndex; index <= endIndex; index += 1) {
+        const value = plan.aligned[index];
+        if (value === void 0 || !Number.isFinite(value)) continue;
+        const price = plan.toPrice(value);
+        if (!Number.isFinite(price)) continue;
+        if (price < compareMin) compareMin = price;
+        if (price > compareMax) compareMax = price;
+      }
+      if (compareMin <= compareMax) {
+        minPrice = Math.min(minPrice, compareMin);
+        maxPrice = Math.max(maxPrice, compareMax);
+      }
+    }
     const priceRange = maxPrice - minPrice || 1;
     const autoMin = minPrice - priceRange * 0.08;
     const autoMax = maxPrice + priceRange * 0.08;
@@ -5492,7 +5644,106 @@ function createChart(element, options = {}) {
       }
       return data[index]?.v;
     };
-    if (isLineStyleChart) {
+    const downsamplingOptions = mergedOptions.downsampling ?? DEFAULT_OPTIONS.downsampling;
+    const downsampleThresholdPx = Math.max(0.2, downsamplingOptions?.thresholdPx ?? 1.5);
+    const shouldDownsample = (downsamplingOptions?.enabled ?? true) && candleSpacing < downsampleThresholdPx && endIndex - startIndex > 2;
+    const seriesColumns = [];
+    if (shouldDownsample) {
+      let current = null;
+      let currentColumn = Number.NaN;
+      for (let index = startIndex; index <= endIndex; index += 1) {
+        const point = seriesData[index];
+        if (!point) continue;
+        const column = Math.round(chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth);
+        if (!current || column !== currentColumn) {
+          currentColumn = column;
+          current = {
+            x: column,
+            open: point.o,
+            high: point.h,
+            low: point.l,
+            close: point.c,
+            minClose: point.c,
+            maxClose: point.c,
+            minCloseIndex: index,
+            maxCloseIndex: index
+          };
+          seriesColumns.push(current);
+          continue;
+        }
+        if (point.h > current.high) current.high = point.h;
+        if (point.l < current.low) current.low = point.l;
+        current.close = point.c;
+        if (point.c < current.minClose) {
+          current.minClose = point.c;
+          current.minCloseIndex = index;
+        }
+        if (point.c > current.maxClose) {
+          current.maxClose = point.c;
+          current.maxCloseIndex = index;
+        }
+      }
+    }
+    if (shouldDownsample && !isLineStyleChart) {
+      const upColumns = new Path2D();
+      const downColumns = new Path2D();
+      for (const column of seriesColumns) {
+        const path = column.close >= column.open ? upColumns : downColumns;
+        const x = column.x + 0.5;
+        const top = crisp(yFromPrice(column.high));
+        const bottom = crisp(yFromPrice(column.low));
+        path.moveTo(x, top);
+        path.lineTo(x, bottom === top ? bottom + 1 : bottom);
+      }
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = mergedOptions.upColor;
+      ctx.stroke(upColumns);
+      ctx.strokeStyle = mergedOptions.downColor;
+      ctx.stroke(downColumns);
+    } else if (shouldDownsample && isLineStyleChart) {
+      const seriesLineWidth = Math.max(1, mergedOptions.lineWidth);
+      const linePath = new Path2D();
+      let started = false;
+      let firstX = 0;
+      let lastX = 0;
+      for (const column of seriesColumns) {
+        const lowFirst = column.minCloseIndex <= column.maxCloseIndex;
+        const first = lowFirst ? column.minClose : column.maxClose;
+        const second = lowFirst ? column.maxClose : column.minClose;
+        const x = column.x;
+        if (!started) {
+          linePath.moveTo(x, yFromPrice(first));
+          firstX = x;
+          started = true;
+        } else {
+          linePath.lineTo(x, yFromPrice(first));
+        }
+        if (second !== first) {
+          linePath.lineTo(x, yFromPrice(second));
+        }
+        lastX = x;
+      }
+      if (started) {
+        if (chartType === "area" || chartType === "baseline") {
+          const baseY = chartType === "baseline" ? yFromPrice(mergedOptions.baselinePrice ?? (yMin + yMax) / 2) : chartBottom;
+          const fillPath = new Path2D(linePath);
+          fillPath.lineTo(lastX, baseY);
+          fillPath.lineTo(firstX, baseY);
+          fillPath.closePath();
+          ctx.save();
+          ctx.globalAlpha = Math.max(0, Math.min(1, mergedOptions.areaFillOpacity));
+          ctx.fillStyle = chartType === "baseline" ? mergedOptions.upColor : mergedOptions.lineColor;
+          ctx.fill(fillPath);
+          ctx.restore();
+        }
+        ctx.save();
+        ctx.strokeStyle = chartType === "baseline" ? mergedOptions.upColor : mergedOptions.lineColor;
+        ctx.lineWidth = seriesLineWidth;
+        ctx.lineJoin = "round";
+        ctx.stroke(linePath);
+        ctx.restore();
+      }
+    } else if (isLineStyleChart) {
       const seriesLineWidth = Math.max(1, mergedOptions.lineWidth);
       const linePath = new Path2D();
       let started = false;
@@ -5658,6 +5909,105 @@ function createChart(element, options = {}) {
         ctx.stroke(downHollowBodies);
       }
     }
+    const compareAxisTags = [];
+    for (const plan of comparePlans) {
+      const color = plan.state.options.color ?? "#f59e0b";
+      const lineWidth = Math.max(1, plan.state.options.lineWidth ?? 1.5);
+      const path = new Path2D();
+      let started = false;
+      let firstX = 0;
+      let lastX = 0;
+      let lastY = 0;
+      let lastPrice = Number.NaN;
+      const emit = (x, y) => {
+        if (!started) {
+          path.moveTo(x, y);
+          firstX = x;
+          started = true;
+        } else {
+          path.lineTo(x, y);
+        }
+        lastX = x;
+        lastY = y;
+      };
+      const xForIndex = (index) => chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+      if (shouldDownsample) {
+        let column = Number.NaN;
+        let minValue = 0;
+        let maxValue = 0;
+        let minIndex = 0;
+        let maxIndex = 0;
+        let hasColumn = false;
+        const flushColumn = () => {
+          if (!hasColumn) return;
+          const lowFirst = minIndex <= maxIndex;
+          const first = plan.toPrice(lowFirst ? minValue : maxValue);
+          const second = plan.toPrice(lowFirst ? maxValue : minValue);
+          if (Number.isFinite(first)) emit(column, yFromPrice(first));
+          if (Number.isFinite(second) && second !== first) emit(column, yFromPrice(second));
+          lastPrice = plan.toPrice(maxIndex >= minIndex ? maxValue : minValue);
+        };
+        for (let index = startIndex; index <= endIndex; index += 1) {
+          const value = plan.aligned[index];
+          if (value === void 0 || !Number.isFinite(value)) continue;
+          const nextColumn = Math.round(xForIndex(index));
+          if (!hasColumn || nextColumn !== column) {
+            flushColumn();
+            column = nextColumn;
+            minValue = value;
+            maxValue = value;
+            minIndex = index;
+            maxIndex = index;
+            hasColumn = true;
+            continue;
+          }
+          if (value < minValue) {
+            minValue = value;
+            minIndex = index;
+          }
+          if (value > maxValue) {
+            maxValue = value;
+            maxIndex = index;
+          }
+        }
+        flushColumn();
+      } else {
+        for (let index = startIndex; index <= endIndex; index += 1) {
+          const value = plan.aligned[index];
+          if (value === void 0 || !Number.isFinite(value)) continue;
+          const price = plan.toPrice(value);
+          if (!Number.isFinite(price)) continue;
+          lastPrice = price;
+          emit(xForIndex(index), yFromPrice(price));
+        }
+      }
+      if (!started) continue;
+      if (plan.state.options.style === "area") {
+        const fillPath = new Path2D(path);
+        fillPath.lineTo(lastX, chartBottom);
+        fillPath.lineTo(firstX, chartBottom);
+        fillPath.closePath();
+        ctx.save();
+        ctx.globalAlpha = Math.max(0, Math.min(1, mergedOptions.areaFillOpacity)) * 0.6;
+        ctx.fillStyle = color;
+        ctx.fill(fillPath);
+        ctx.restore();
+      }
+      ctx.save();
+      ctx.strokeStyle = color;
+      ctx.lineWidth = lineWidth;
+      ctx.lineJoin = "round";
+      ctx.stroke(path);
+      ctx.restore();
+      if (Number.isFinite(lastPrice)) {
+        const label = plan.state.options.label ?? plan.state.options.id;
+        const nativeLast = plan.lastNativeValue;
+        const usePercentTag = plan.usePercent && plan.baseCompare > 0 && Number.isFinite(nativeLast);
+        const changePct = usePercentTag ? (nativeLast / plan.baseCompare - 1) * 100 : 0;
+        const shortText = usePercentTag ? `${changePct >= 0 ? "+" : ""}${changePct.toFixed(2)}%` : formatPrice(nativeLast);
+        compareAxisTags.push({ y: lastY, text: `${label} ${shortText}`, shortText, color });
+      }
+    }
     const activeOverlayIndicators = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
       (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "overlay"
     ).sort((a, b) => a.indicator.zIndex - b.indicator.zIndex);
@@ -6432,6 +6782,35 @@ function createChart(element, options = {}) {
       drawText(countdownText, chartRight + 6, (fullChartBottom + height) / 2, "left", "middle", xAxis.textColor);
       ctx.font = prevFont;
     }
+    if (compareAxisTags.length > 0 && width - chartRight > 0) {
+      const prevFont = ctx.font;
+      const tagFontSize = Math.max(9, (resolvedAxis.fontSize ?? 12) - 2);
+      ctx.font = `${tagFontSize}px ${mergedOptions.fontFamily}`;
+      ctx.textBaseline = "middle";
+      ctx.textAlign = "left";
+      const placed = [];
+      const tagHeight = tagFontSize + 6;
+      const gutterWidth = width - chartRight - 4;
+      for (const tag of [...compareAxisTags].sort((a, b) => a.y - b.y)) {
+        const text = measureTextWidth(tag.text) + 10 <= gutterWidth ? tag.text : tag.shortText;
+        const tagWidth = Math.min(gutterWidth, measureTextWidth(text) + 10);
+        if (tagWidth <= 0) continue;
+        let tagY = clamp(tag.y - tagHeight / 2, chartTop, chartBottom - tagHeight);
+        for (const slot of placed) {
+          if (tagY < slot.bottom + 2 && tagY + tagHeight > slot.top - 2) {
+            tagY = slot.bottom + 2;
+          }
+        }
+        placed.push({ top: tagY, bottom: tagY + tagHeight });
+        ctx.save();
+        ctx.fillStyle = tag.color;
+        fillRoundedRect(chartRight + 2, Math.round(tagY), Math.round(tagWidth), tagHeight, 3);
+        ctx.fillStyle = labelTextColorOn(tag.color, "#ffffff");
+        ctx.fillText(text, chartRight + 7, Math.round(tagY + tagHeight / 2));
+        ctx.restore();
+      }
+      ctx.font = prevFont;
+    }
     if (baseCtx) {
       if (baseCanvas.width !== canvas.width || baseCanvas.height !== canvas.height) {
         baseCanvas.width = canvas.width;
@@ -6455,6 +6834,7 @@ function createChart(element, options = {}) {
       xSpan
     };
     paintCrosshairOverlay();
+    emitSelectionChangeIfMoved();
   };
   const paintCrosshairOverlay = () => {
     crosshairPriceActionRegion = null;
@@ -7055,6 +7435,98 @@ function createChart(element, options = {}) {
     const ratio = (priceScaleTransform(price) - scaledMin) / scaledRange;
     return priceScaleInverted ? drawState.chartTop + ratio * drawState.chartHeight : drawState.chartBottom - ratio * drawState.chartHeight;
   };
+  const getDrawingBounds = (drawing) => {
+    if (!drawState || drawing.points.length === 0) {
+      return null;
+    }
+    const { chartLeft, chartRight, chartTop, chartBottom } = drawState;
+    let left;
+    let right;
+    let top;
+    let bottom;
+    if (drawing.type === "horizontal-line") {
+      const y = canvasYFromDrawingPrice(drawing.points[0].price);
+      left = chartLeft;
+      right = chartRight;
+      top = y;
+      bottom = y;
+    } else if (drawing.type === "vertical-line") {
+      const x = canvasXFromDrawingPoint(drawing.points[0]);
+      left = x;
+      right = x;
+      top = chartTop;
+      bottom = chartBottom;
+    } else {
+      const xs = drawing.points.map((point) => canvasXFromDrawingPoint(point));
+      const ys = drawing.points.map((point) => canvasYFromDrawingPrice(point.price));
+      left = Math.min(...xs);
+      right = Math.max(...xs);
+      top = Math.min(...ys);
+      bottom = Math.max(...ys);
+      if (drawing.type === "ray") {
+        right = chartRight;
+      }
+    }
+    const clampX = (value) => clamp(value, chartLeft, chartRight);
+    const clampY = (value) => clamp(value, chartTop, chartBottom);
+    left = clampX(left);
+    right = clampX(right);
+    top = clampY(top);
+    bottom = clampY(bottom);
+    return {
+      left,
+      top,
+      right,
+      bottom,
+      centerX: (left + right) / 2,
+      centerY: (top + bottom) / 2
+    };
+  };
+  const getSelectedDrawingWithBounds = () => {
+    if (!selectedDrawingId) {
+      return null;
+    }
+    const drawing = drawings.find((entry) => entry.id === selectedDrawingId);
+    if (!drawing || !drawing.visible) {
+      return null;
+    }
+    const bounds = getDrawingBounds(drawing);
+    return bounds ? { drawing: serializeDrawing(drawing), bounds } : null;
+  };
+  const emitSelectionChangeIfMoved = () => {
+    if (!selectionChangeHandler) {
+      lastSelectionSignature = null;
+      return;
+    }
+    const selection = getSelectedDrawingWithBounds();
+    if (!selection || !drawState) {
+      if (lastSelectionSignature !== null) {
+        lastSelectionSignature = null;
+        selectionChangeHandler(null);
+      }
+      return;
+    }
+    const dragging = drawingDragState !== null;
+    const { bounds } = selection;
+    const signature = `${selection.drawing.id}:${Math.round(bounds.left)}:${Math.round(bounds.top)}:${Math.round(
+      bounds.right
+    )}:${Math.round(bounds.bottom)}:${dragging ? 1 : 0}`;
+    if (signature === lastSelectionSignature) {
+      return;
+    }
+    lastSelectionSignature = signature;
+    selectionChangeHandler({
+      drawing: selection.drawing,
+      bounds,
+      plot: {
+        left: drawState.chartLeft,
+        top: drawState.chartTop,
+        right: drawState.chartRight,
+        bottom: drawState.chartBottom
+      },
+      dragging
+    });
+  };
   const distanceToSegment = (x, y, x1, y1, x2, y2) => {
     const dx = x2 - x1;
     const dy = y2 - y1;
@@ -8021,6 +8493,10 @@ function createChart(element, options = {}) {
     if (event.pointerType === "touch" || event.pointerType === "pen") {
       event.preventDefault();
     }
+    if (mergedOptions.accessibility?.focusable !== false && document.activeElement !== canvas) {
+      focusFromPointer = true;
+      canvas.focus({ preventScroll: true });
+    }
     cancelKineticPan();
     panVelocitySamples.length = 0;
     magnetModifierActive = event.metaKey || event.ctrlKey;
@@ -8138,12 +8614,14 @@ function createChart(element, options = {}) {
       const drawingHit = getDrawingHit(point.x, point.y);
       if (drawingHit) {
         selectedDrawingId = drawingHit.drawing.id;
+        const selectBounds = getDrawingBounds(drawingHit.drawing);
         drawingSelectHandler?.({
           drawing: serializeDrawing(drawingHit.drawing),
           target: drawingHit.target,
           ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
           x: point.x,
-          y: point.y
+          y: point.y,
+          ...selectBounds ? { bounds: selectBounds } : {}
         });
         if (!drawingHit.drawing.locked) {
           const startCanvasPoint = drawingPointFromCanvas(point.x, point.y, false);
@@ -8704,7 +9182,152 @@ function createChart(element, options = {}) {
   };
   const onContextMenu = (event) => {
     event.preventDefault();
+    if (!contextMenuHandler || !drawState) {
+      return;
+    }
+    const point = getCanvasPoint(event);
+    const hitRegion = getHitRegion(point.x, point.y);
+    if (hitRegion === "outside") {
+      return;
+    }
+    const pane = hitRegion === "plot" ? getPaneAt(point.x, point.y) : null;
+    const drawingHit = hitRegion === "plot" && !pane ? getDrawingHit(point.x, point.y) : null;
+    if (drawingHit) {
+      if (selectedDrawingId !== drawingHit.drawing.id) {
+        selectedDrawingId = drawingHit.drawing.id;
+        scheduleDraw();
+      }
+    }
+    const region = drawingHit ? "drawing" : pane ? "indicator-pane" : hitRegion;
+    const index = indexFromCanvasX(point.x);
+    const barTime = index === null ? null : getTimeForIndex(index);
+    const bar = index === null ? void 0 : data[index];
+    const inMainPane = !pane && (hitRegion === "plot" || hitRegion === "y-axis");
+    contextMenuHandler({
+      region,
+      x: point.x,
+      y: point.y,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      ...inMainPane ? { price: roundToPricePrecision(priceFromCanvasY(point.y)) } : {},
+      ...index === null ? {} : { index },
+      ...barTime ? { time: barTime.toISOString() } : {},
+      ...bar ? {
+        point: {
+          t: bar.time.toISOString(),
+          o: bar.o,
+          h: bar.h,
+          l: bar.l,
+          c: bar.c,
+          ...bar.v === void 0 ? {} : { v: bar.v }
+        }
+      } : {},
+      ...drawingHit ? {
+        drawing: serializeDrawing(drawingHit.drawing),
+        drawingTarget: drawingHit.target,
+        ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex }
+      } : {},
+      ...pane ? { indicator: { id: pane.id, type: pane.type } } : {}
+    });
+  };
+  const onCanvasKeyDown = (event) => {
+    const keyboard = mergedOptions.keyboard ?? {};
+    if (keyboard.enabled === false) {
+      return;
+    }
+    if (event.altKey || event.ctrlKey || event.metaKey) {
+      return;
+    }
+    const panStep = Math.max(1, keyboard.panBars ?? 1) * (event.shiftKey ? 10 : 1);
+    const emit = (action, drawing) => {
+      keyboardShortcutHandler?.({
+        action,
+        key: event.key,
+        shiftKey: event.shiftKey,
+        ...drawing ? { drawing } : {}
+      });
+    };
+    switch (event.key) {
+      case "Delete":
+      case "Backspace": {
+        if (keyboard.deleteSelectedDrawing === false || !selectedDrawingId) {
+          return;
+        }
+        const target = drawings.find((entry) => entry.id === selectedDrawingId);
+        if (!target) {
+          return;
+        }
+        const removed = serializeDrawing(target);
+        removeDrawing(selectedDrawingId);
+        selectedDrawingId = null;
+        scheduleDraw();
+        emit("delete-drawing", removed);
+        break;
+      }
+      case "Escape": {
+        if (cancelDrawing()) {
+          emit("cancel");
+          break;
+        }
+        if (activeDrawingTool) {
+          setActiveDrawingTool(null);
+          emit("cancel");
+          break;
+        }
+        if (selectedDrawingId) {
+          setSelectedDrawing(null);
+          emit("cancel");
+          break;
+        }
+        return;
+      }
+      case "ArrowLeft":
+        panX(-panStep);
+        emit("pan-left");
+        break;
+      case "ArrowRight":
+        panX(panStep);
+        emit("pan-right");
+        break;
+      case "ArrowUp":
+      case "ArrowDown": {
+        if (!drawState) {
+          return;
+        }
+        const step = (drawState.yMax - drawState.yMin) / 20 * (event.shiftKey ? 5 : 1);
+        panY(event.key === "ArrowUp" ? step : -step);
+        emit(event.key === "ArrowUp" ? "pan-up" : "pan-down");
+        break;
+      }
+      case "+":
+      case "=":
+        zoomInX();
+        emit("zoom-in");
+        break;
+      case "-":
+      case "_":
+        zoomOutX();
+        emit("zoom-out");
+        break;
+      case "Home":
+        fitContent();
+        emit("reset-viewport");
+        break;
+      case "End":
+        setFollowingLatest(true);
+        emit("scroll-to-realtime");
+        break;
+      case "r":
+      case "R":
+        resetViewport();
+        emit("reset-viewport");
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
   };
+  canvas.addEventListener("keydown", onCanvasKeyDown);
   canvas.addEventListener("pointerdown", onPointerDown);
   canvas.addEventListener("pointermove", onPointerMove);
   canvas.addEventListener("pointerup", endPointerDrag);
@@ -8751,6 +9374,7 @@ function createChart(element, options = {}) {
     resetRightMarginCache();
     doubleClickEnabled = mergedOptions.doubleClickEnabled;
     doubleClickAction = mergedOptions.doubleClickAction;
+    applyAccessibilityAttributes();
     const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
     if (!isTickerSmoothingEnabled) {
       smoothedTickerPrice = null;
@@ -9134,6 +9758,23 @@ function createChart(element, options = {}) {
   const onDrawingHover = (handler) => {
     drawingHoverHandler = handler;
   };
+  const onSelectionChange = (handler) => {
+    selectionChangeHandler = handler;
+    lastSelectionSignature = null;
+    if (handler) {
+      emitSelectionChangeIfMoved();
+    }
+  };
+  const getSelectedDrawing = () => getSelectedDrawingWithBounds();
+  const onContextMenuHandler = (handler) => {
+    contextMenuHandler = handler;
+  };
+  const onKeyboardShortcut = (handler) => {
+    keyboardShortcutHandler = handler;
+  };
+  const focus = () => {
+    canvas.focus({ preventScroll: true });
+  };
   const saveState = () => {
     const drawingDefaults = {};
     for (const [tool, defaults] of drawingToolDefaults) {
@@ -9198,6 +9839,7 @@ function createChart(element, options = {}) {
       drawRafId = null;
       pendingDrawUpdateAutoScale = false;
     }
+    canvas.removeEventListener("keydown", onCanvasKeyDown);
     canvas.removeEventListener("pointerdown", onPointerDown);
     canvas.removeEventListener("pointermove", onPointerMove);
     canvas.removeEventListener("pointerup", endPointerDrag);
@@ -9261,10 +9903,19 @@ function createChart(element, options = {}) {
     onDrawingSelect,
     onDrawingDoubleClick,
     onDrawingEditText,
+    onSelectionChange,
+    getSelectedDrawing,
+    onContextMenu: onContextMenuHandler,
+    onKeyboardShortcut,
+    focus,
     setMagnetMode,
     getMagnetMode,
     setPriceScale,
     getPriceScale,
+    setCompareSeries,
+    addCompareSeries,
+    removeCompareSeries,
+    getCompareSeries,
     cancelDrawing,
     setTradeMarkers,
     setSelectedDrawing,