hyperprop-charting-library 0.1.137 → 0.1.138

package/dist/hyperprop-charting-library.js

@@ -2819,6 +2819,8 @@ var DEFAULT_OPTIONS = {
   pinOutOfRangeLines: false,
   doubleClickEnabled: true,
   doubleClickAction: "reset",
+  keyboard: { enabled: true, panBars: 1, deleteSelectedDrawing: true },
+  accessibility: { label: "Price chart", description: "", focusable: true },
   crosshair: DEFAULT_CROSSHAIR_OPTIONS,
   grid: DEFAULT_GRID_OPTIONS,
   watermark: DEFAULT_WATERMARK_OPTIONS,
@@ -2861,6 +2863,14 @@ var mergeChartOptions = (baseOptions, options = {}) => ({
     ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
     ...options.yAxis ?? {}
   },
+  keyboard: {
+    ...baseOptions.keyboard,
+    ...options.keyboard ?? {}
+  },
+  accessibility: {
+    ...baseOptions.accessibility,
+    ...options.accessibility ?? {}
+  },
   crosshair: {
     ...baseOptions.crosshair,
     ...options.crosshair ?? {}
@@ -3034,6 +3044,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;
@@ -3196,6 +3210,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");
@@ -6423,6 +6470,7 @@ function createChart(element, options = {}) {
       xSpan
     };
     paintCrosshairOverlay();
+    emitSelectionChangeIfMoved();
   };
   const paintCrosshairOverlay = () => {
     crosshairPriceActionRegion = null;
@@ -7023,6 +7071,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;
@@ -7989,6 +8129,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;
@@ -8106,12 +8250,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);
@@ -8672,7 +8818,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);
@@ -8719,6 +9010,7 @@ function createChart(element, options = {}) {
     resetRightMarginCache();
     doubleClickEnabled = mergedOptions.doubleClickEnabled;
     doubleClickAction = mergedOptions.doubleClickAction;
+    applyAccessibilityAttributes();
     const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
     if (!isTickerSmoothingEnabled) {
       smoothedTickerPrice = null;
@@ -9102,6 +9394,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) {
@@ -9166,6 +9475,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);
@@ -9229,6 +9539,11 @@ function createChart(element, options = {}) {
     onDrawingSelect,
     onDrawingDoubleClick,
     onDrawingEditText,
+    onSelectionChange,
+    getSelectedDrawing,
+    onContextMenu: onContextMenuHandler,
+    onKeyboardShortcut,
+    focus,
     setMagnetMode,
     getMagnetMode,
     setPriceScale,