hyperprop-charting-library 0.1.137 → 0.1.138
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/hyperprop-charting-library.cjs +316 -1
- package/dist/hyperprop-charting-library.d.ts +117 -1
- package/dist/hyperprop-charting-library.js +316 -1
- package/dist/index.cjs +316 -1
- package/dist/index.d.cts +117 -1
- package/dist/index.d.ts +117 -1
- package/dist/index.js +316 -1
- package/docs/API.md +100 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -2851,6 +2851,8 @@ var DEFAULT_OPTIONS = {
|
|
|
2851
2851
|
pinOutOfRangeLines: false,
|
|
2852
2852
|
doubleClickEnabled: true,
|
|
2853
2853
|
doubleClickAction: "reset",
|
|
2854
|
+
keyboard: { enabled: true, panBars: 1, deleteSelectedDrawing: true },
|
|
2855
|
+
accessibility: { label: "Price chart", description: "", focusable: true },
|
|
2854
2856
|
crosshair: DEFAULT_CROSSHAIR_OPTIONS,
|
|
2855
2857
|
grid: DEFAULT_GRID_OPTIONS,
|
|
2856
2858
|
watermark: DEFAULT_WATERMARK_OPTIONS,
|
|
@@ -2893,6 +2895,14 @@ var mergeChartOptions = (baseOptions, options = {}) => ({
|
|
|
2893
2895
|
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
|
|
2894
2896
|
...options.yAxis ?? {}
|
|
2895
2897
|
},
|
|
2898
|
+
keyboard: {
|
|
2899
|
+
...baseOptions.keyboard,
|
|
2900
|
+
...options.keyboard ?? {}
|
|
2901
|
+
},
|
|
2902
|
+
accessibility: {
|
|
2903
|
+
...baseOptions.accessibility,
|
|
2904
|
+
...options.accessibility ?? {}
|
|
2905
|
+
},
|
|
2896
2906
|
crosshair: {
|
|
2897
2907
|
...baseOptions.crosshair,
|
|
2898
2908
|
...options.crosshair ?? {}
|
|
@@ -3066,6 +3076,10 @@ function createChart(element, options = {}) {
|
|
|
3066
3076
|
let drawingSelectHandler = null;
|
|
3067
3077
|
let drawingDoubleClickHandler = null;
|
|
3068
3078
|
let drawingEditTextHandler = null;
|
|
3079
|
+
let selectionChangeHandler = null;
|
|
3080
|
+
let contextMenuHandler = null;
|
|
3081
|
+
let keyboardShortcutHandler = null;
|
|
3082
|
+
let lastSelectionSignature = null;
|
|
3069
3083
|
let magnetMode = "none";
|
|
3070
3084
|
let priceScaleMode = "linear";
|
|
3071
3085
|
let priceScaleInverted = false;
|
|
@@ -3228,6 +3242,39 @@ function createChart(element, options = {}) {
|
|
|
3228
3242
|
canvas.style.setProperty("-webkit-user-select", "none");
|
|
3229
3243
|
canvas.style.setProperty("-webkit-touch-callout", "none");
|
|
3230
3244
|
canvas.setAttribute("draggable", "false");
|
|
3245
|
+
const applyAccessibilityAttributes = () => {
|
|
3246
|
+
const a11y = mergedOptions.accessibility ?? {};
|
|
3247
|
+
const focusable = a11y.focusable !== false;
|
|
3248
|
+
if (focusable) {
|
|
3249
|
+
canvas.tabIndex = 0;
|
|
3250
|
+
} else {
|
|
3251
|
+
canvas.removeAttribute("tabindex");
|
|
3252
|
+
}
|
|
3253
|
+
canvas.setAttribute("role", "application");
|
|
3254
|
+
canvas.setAttribute("aria-label", a11y.label ?? "Price chart");
|
|
3255
|
+
if (a11y.description) {
|
|
3256
|
+
canvas.setAttribute("aria-description", a11y.description);
|
|
3257
|
+
} else {
|
|
3258
|
+
canvas.removeAttribute("aria-description");
|
|
3259
|
+
}
|
|
3260
|
+
if (focusable && (mergedOptions.keyboard?.enabled ?? true)) {
|
|
3261
|
+
canvas.setAttribute(
|
|
3262
|
+
"aria-keyshortcuts",
|
|
3263
|
+
"ArrowLeft ArrowRight ArrowUp ArrowDown Plus Minus Home End Delete Escape"
|
|
3264
|
+
);
|
|
3265
|
+
} else {
|
|
3266
|
+
canvas.removeAttribute("aria-keyshortcuts");
|
|
3267
|
+
}
|
|
3268
|
+
};
|
|
3269
|
+
applyAccessibilityAttributes();
|
|
3270
|
+
let focusFromPointer = false;
|
|
3271
|
+
canvas.addEventListener("focus", () => {
|
|
3272
|
+
canvas.style.outline = focusFromPointer ? "none" : "";
|
|
3273
|
+
focusFromPointer = false;
|
|
3274
|
+
});
|
|
3275
|
+
canvas.addEventListener("blur", () => {
|
|
3276
|
+
canvas.style.outline = "none";
|
|
3277
|
+
});
|
|
3231
3278
|
element.innerHTML = "";
|
|
3232
3279
|
element.appendChild(canvas);
|
|
3233
3280
|
const baseCanvas = document.createElement("canvas");
|
|
@@ -6455,6 +6502,7 @@ function createChart(element, options = {}) {
|
|
|
6455
6502
|
xSpan
|
|
6456
6503
|
};
|
|
6457
6504
|
paintCrosshairOverlay();
|
|
6505
|
+
emitSelectionChangeIfMoved();
|
|
6458
6506
|
};
|
|
6459
6507
|
const paintCrosshairOverlay = () => {
|
|
6460
6508
|
crosshairPriceActionRegion = null;
|
|
@@ -7055,6 +7103,98 @@ function createChart(element, options = {}) {
|
|
|
7055
7103
|
const ratio = (priceScaleTransform(price) - scaledMin) / scaledRange;
|
|
7056
7104
|
return priceScaleInverted ? drawState.chartTop + ratio * drawState.chartHeight : drawState.chartBottom - ratio * drawState.chartHeight;
|
|
7057
7105
|
};
|
|
7106
|
+
const getDrawingBounds = (drawing) => {
|
|
7107
|
+
if (!drawState || drawing.points.length === 0) {
|
|
7108
|
+
return null;
|
|
7109
|
+
}
|
|
7110
|
+
const { chartLeft, chartRight, chartTop, chartBottom } = drawState;
|
|
7111
|
+
let left;
|
|
7112
|
+
let right;
|
|
7113
|
+
let top;
|
|
7114
|
+
let bottom;
|
|
7115
|
+
if (drawing.type === "horizontal-line") {
|
|
7116
|
+
const y = canvasYFromDrawingPrice(drawing.points[0].price);
|
|
7117
|
+
left = chartLeft;
|
|
7118
|
+
right = chartRight;
|
|
7119
|
+
top = y;
|
|
7120
|
+
bottom = y;
|
|
7121
|
+
} else if (drawing.type === "vertical-line") {
|
|
7122
|
+
const x = canvasXFromDrawingPoint(drawing.points[0]);
|
|
7123
|
+
left = x;
|
|
7124
|
+
right = x;
|
|
7125
|
+
top = chartTop;
|
|
7126
|
+
bottom = chartBottom;
|
|
7127
|
+
} else {
|
|
7128
|
+
const xs = drawing.points.map((point) => canvasXFromDrawingPoint(point));
|
|
7129
|
+
const ys = drawing.points.map((point) => canvasYFromDrawingPrice(point.price));
|
|
7130
|
+
left = Math.min(...xs);
|
|
7131
|
+
right = Math.max(...xs);
|
|
7132
|
+
top = Math.min(...ys);
|
|
7133
|
+
bottom = Math.max(...ys);
|
|
7134
|
+
if (drawing.type === "ray") {
|
|
7135
|
+
right = chartRight;
|
|
7136
|
+
}
|
|
7137
|
+
}
|
|
7138
|
+
const clampX = (value) => clamp(value, chartLeft, chartRight);
|
|
7139
|
+
const clampY = (value) => clamp(value, chartTop, chartBottom);
|
|
7140
|
+
left = clampX(left);
|
|
7141
|
+
right = clampX(right);
|
|
7142
|
+
top = clampY(top);
|
|
7143
|
+
bottom = clampY(bottom);
|
|
7144
|
+
return {
|
|
7145
|
+
left,
|
|
7146
|
+
top,
|
|
7147
|
+
right,
|
|
7148
|
+
bottom,
|
|
7149
|
+
centerX: (left + right) / 2,
|
|
7150
|
+
centerY: (top + bottom) / 2
|
|
7151
|
+
};
|
|
7152
|
+
};
|
|
7153
|
+
const getSelectedDrawingWithBounds = () => {
|
|
7154
|
+
if (!selectedDrawingId) {
|
|
7155
|
+
return null;
|
|
7156
|
+
}
|
|
7157
|
+
const drawing = drawings.find((entry) => entry.id === selectedDrawingId);
|
|
7158
|
+
if (!drawing || !drawing.visible) {
|
|
7159
|
+
return null;
|
|
7160
|
+
}
|
|
7161
|
+
const bounds = getDrawingBounds(drawing);
|
|
7162
|
+
return bounds ? { drawing: serializeDrawing(drawing), bounds } : null;
|
|
7163
|
+
};
|
|
7164
|
+
const emitSelectionChangeIfMoved = () => {
|
|
7165
|
+
if (!selectionChangeHandler) {
|
|
7166
|
+
lastSelectionSignature = null;
|
|
7167
|
+
return;
|
|
7168
|
+
}
|
|
7169
|
+
const selection = getSelectedDrawingWithBounds();
|
|
7170
|
+
if (!selection || !drawState) {
|
|
7171
|
+
if (lastSelectionSignature !== null) {
|
|
7172
|
+
lastSelectionSignature = null;
|
|
7173
|
+
selectionChangeHandler(null);
|
|
7174
|
+
}
|
|
7175
|
+
return;
|
|
7176
|
+
}
|
|
7177
|
+
const dragging = drawingDragState !== null;
|
|
7178
|
+
const { bounds } = selection;
|
|
7179
|
+
const signature = `${selection.drawing.id}:${Math.round(bounds.left)}:${Math.round(bounds.top)}:${Math.round(
|
|
7180
|
+
bounds.right
|
|
7181
|
+
)}:${Math.round(bounds.bottom)}:${dragging ? 1 : 0}`;
|
|
7182
|
+
if (signature === lastSelectionSignature) {
|
|
7183
|
+
return;
|
|
7184
|
+
}
|
|
7185
|
+
lastSelectionSignature = signature;
|
|
7186
|
+
selectionChangeHandler({
|
|
7187
|
+
drawing: selection.drawing,
|
|
7188
|
+
bounds,
|
|
7189
|
+
plot: {
|
|
7190
|
+
left: drawState.chartLeft,
|
|
7191
|
+
top: drawState.chartTop,
|
|
7192
|
+
right: drawState.chartRight,
|
|
7193
|
+
bottom: drawState.chartBottom
|
|
7194
|
+
},
|
|
7195
|
+
dragging
|
|
7196
|
+
});
|
|
7197
|
+
};
|
|
7058
7198
|
const distanceToSegment = (x, y, x1, y1, x2, y2) => {
|
|
7059
7199
|
const dx = x2 - x1;
|
|
7060
7200
|
const dy = y2 - y1;
|
|
@@ -8021,6 +8161,10 @@ function createChart(element, options = {}) {
|
|
|
8021
8161
|
if (event.pointerType === "touch" || event.pointerType === "pen") {
|
|
8022
8162
|
event.preventDefault();
|
|
8023
8163
|
}
|
|
8164
|
+
if (mergedOptions.accessibility?.focusable !== false && document.activeElement !== canvas) {
|
|
8165
|
+
focusFromPointer = true;
|
|
8166
|
+
canvas.focus({ preventScroll: true });
|
|
8167
|
+
}
|
|
8024
8168
|
cancelKineticPan();
|
|
8025
8169
|
panVelocitySamples.length = 0;
|
|
8026
8170
|
magnetModifierActive = event.metaKey || event.ctrlKey;
|
|
@@ -8138,12 +8282,14 @@ function createChart(element, options = {}) {
|
|
|
8138
8282
|
const drawingHit = getDrawingHit(point.x, point.y);
|
|
8139
8283
|
if (drawingHit) {
|
|
8140
8284
|
selectedDrawingId = drawingHit.drawing.id;
|
|
8285
|
+
const selectBounds = getDrawingBounds(drawingHit.drawing);
|
|
8141
8286
|
drawingSelectHandler?.({
|
|
8142
8287
|
drawing: serializeDrawing(drawingHit.drawing),
|
|
8143
8288
|
target: drawingHit.target,
|
|
8144
8289
|
...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
|
|
8145
8290
|
x: point.x,
|
|
8146
|
-
y: point.y
|
|
8291
|
+
y: point.y,
|
|
8292
|
+
...selectBounds ? { bounds: selectBounds } : {}
|
|
8147
8293
|
});
|
|
8148
8294
|
if (!drawingHit.drawing.locked) {
|
|
8149
8295
|
const startCanvasPoint = drawingPointFromCanvas(point.x, point.y, false);
|
|
@@ -8704,7 +8850,152 @@ function createChart(element, options = {}) {
|
|
|
8704
8850
|
};
|
|
8705
8851
|
const onContextMenu = (event) => {
|
|
8706
8852
|
event.preventDefault();
|
|
8853
|
+
if (!contextMenuHandler || !drawState) {
|
|
8854
|
+
return;
|
|
8855
|
+
}
|
|
8856
|
+
const point = getCanvasPoint(event);
|
|
8857
|
+
const hitRegion = getHitRegion(point.x, point.y);
|
|
8858
|
+
if (hitRegion === "outside") {
|
|
8859
|
+
return;
|
|
8860
|
+
}
|
|
8861
|
+
const pane = hitRegion === "plot" ? getPaneAt(point.x, point.y) : null;
|
|
8862
|
+
const drawingHit = hitRegion === "plot" && !pane ? getDrawingHit(point.x, point.y) : null;
|
|
8863
|
+
if (drawingHit) {
|
|
8864
|
+
if (selectedDrawingId !== drawingHit.drawing.id) {
|
|
8865
|
+
selectedDrawingId = drawingHit.drawing.id;
|
|
8866
|
+
scheduleDraw();
|
|
8867
|
+
}
|
|
8868
|
+
}
|
|
8869
|
+
const region = drawingHit ? "drawing" : pane ? "indicator-pane" : hitRegion;
|
|
8870
|
+
const index = indexFromCanvasX(point.x);
|
|
8871
|
+
const barTime = index === null ? null : getTimeForIndex(index);
|
|
8872
|
+
const bar = index === null ? void 0 : data[index];
|
|
8873
|
+
const inMainPane = !pane && (hitRegion === "plot" || hitRegion === "y-axis");
|
|
8874
|
+
contextMenuHandler({
|
|
8875
|
+
region,
|
|
8876
|
+
x: point.x,
|
|
8877
|
+
y: point.y,
|
|
8878
|
+
clientX: event.clientX,
|
|
8879
|
+
clientY: event.clientY,
|
|
8880
|
+
...inMainPane ? { price: roundToPricePrecision(priceFromCanvasY(point.y)) } : {},
|
|
8881
|
+
...index === null ? {} : { index },
|
|
8882
|
+
...barTime ? { time: barTime.toISOString() } : {},
|
|
8883
|
+
...bar ? {
|
|
8884
|
+
point: {
|
|
8885
|
+
t: bar.time.toISOString(),
|
|
8886
|
+
o: bar.o,
|
|
8887
|
+
h: bar.h,
|
|
8888
|
+
l: bar.l,
|
|
8889
|
+
c: bar.c,
|
|
8890
|
+
...bar.v === void 0 ? {} : { v: bar.v }
|
|
8891
|
+
}
|
|
8892
|
+
} : {},
|
|
8893
|
+
...drawingHit ? {
|
|
8894
|
+
drawing: serializeDrawing(drawingHit.drawing),
|
|
8895
|
+
drawingTarget: drawingHit.target,
|
|
8896
|
+
...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex }
|
|
8897
|
+
} : {},
|
|
8898
|
+
...pane ? { indicator: { id: pane.id, type: pane.type } } : {}
|
|
8899
|
+
});
|
|
8900
|
+
};
|
|
8901
|
+
const onCanvasKeyDown = (event) => {
|
|
8902
|
+
const keyboard = mergedOptions.keyboard ?? {};
|
|
8903
|
+
if (keyboard.enabled === false) {
|
|
8904
|
+
return;
|
|
8905
|
+
}
|
|
8906
|
+
if (event.altKey || event.ctrlKey || event.metaKey) {
|
|
8907
|
+
return;
|
|
8908
|
+
}
|
|
8909
|
+
const panStep = Math.max(1, keyboard.panBars ?? 1) * (event.shiftKey ? 10 : 1);
|
|
8910
|
+
const emit = (action, drawing) => {
|
|
8911
|
+
keyboardShortcutHandler?.({
|
|
8912
|
+
action,
|
|
8913
|
+
key: event.key,
|
|
8914
|
+
shiftKey: event.shiftKey,
|
|
8915
|
+
...drawing ? { drawing } : {}
|
|
8916
|
+
});
|
|
8917
|
+
};
|
|
8918
|
+
switch (event.key) {
|
|
8919
|
+
case "Delete":
|
|
8920
|
+
case "Backspace": {
|
|
8921
|
+
if (keyboard.deleteSelectedDrawing === false || !selectedDrawingId) {
|
|
8922
|
+
return;
|
|
8923
|
+
}
|
|
8924
|
+
const target = drawings.find((entry) => entry.id === selectedDrawingId);
|
|
8925
|
+
if (!target) {
|
|
8926
|
+
return;
|
|
8927
|
+
}
|
|
8928
|
+
const removed = serializeDrawing(target);
|
|
8929
|
+
removeDrawing(selectedDrawingId);
|
|
8930
|
+
selectedDrawingId = null;
|
|
8931
|
+
scheduleDraw();
|
|
8932
|
+
emit("delete-drawing", removed);
|
|
8933
|
+
break;
|
|
8934
|
+
}
|
|
8935
|
+
case "Escape": {
|
|
8936
|
+
if (cancelDrawing()) {
|
|
8937
|
+
emit("cancel");
|
|
8938
|
+
break;
|
|
8939
|
+
}
|
|
8940
|
+
if (activeDrawingTool) {
|
|
8941
|
+
setActiveDrawingTool(null);
|
|
8942
|
+
emit("cancel");
|
|
8943
|
+
break;
|
|
8944
|
+
}
|
|
8945
|
+
if (selectedDrawingId) {
|
|
8946
|
+
setSelectedDrawing(null);
|
|
8947
|
+
emit("cancel");
|
|
8948
|
+
break;
|
|
8949
|
+
}
|
|
8950
|
+
return;
|
|
8951
|
+
}
|
|
8952
|
+
case "ArrowLeft":
|
|
8953
|
+
panX(-panStep);
|
|
8954
|
+
emit("pan-left");
|
|
8955
|
+
break;
|
|
8956
|
+
case "ArrowRight":
|
|
8957
|
+
panX(panStep);
|
|
8958
|
+
emit("pan-right");
|
|
8959
|
+
break;
|
|
8960
|
+
case "ArrowUp":
|
|
8961
|
+
case "ArrowDown": {
|
|
8962
|
+
if (!drawState) {
|
|
8963
|
+
return;
|
|
8964
|
+
}
|
|
8965
|
+
const step = (drawState.yMax - drawState.yMin) / 20 * (event.shiftKey ? 5 : 1);
|
|
8966
|
+
panY(event.key === "ArrowUp" ? step : -step);
|
|
8967
|
+
emit(event.key === "ArrowUp" ? "pan-up" : "pan-down");
|
|
8968
|
+
break;
|
|
8969
|
+
}
|
|
8970
|
+
case "+":
|
|
8971
|
+
case "=":
|
|
8972
|
+
zoomInX();
|
|
8973
|
+
emit("zoom-in");
|
|
8974
|
+
break;
|
|
8975
|
+
case "-":
|
|
8976
|
+
case "_":
|
|
8977
|
+
zoomOutX();
|
|
8978
|
+
emit("zoom-out");
|
|
8979
|
+
break;
|
|
8980
|
+
case "Home":
|
|
8981
|
+
fitContent();
|
|
8982
|
+
emit("reset-viewport");
|
|
8983
|
+
break;
|
|
8984
|
+
case "End":
|
|
8985
|
+
setFollowingLatest(true);
|
|
8986
|
+
emit("scroll-to-realtime");
|
|
8987
|
+
break;
|
|
8988
|
+
case "r":
|
|
8989
|
+
case "R":
|
|
8990
|
+
resetViewport();
|
|
8991
|
+
emit("reset-viewport");
|
|
8992
|
+
break;
|
|
8993
|
+
default:
|
|
8994
|
+
return;
|
|
8995
|
+
}
|
|
8996
|
+
event.preventDefault();
|
|
8707
8997
|
};
|
|
8998
|
+
canvas.addEventListener("keydown", onCanvasKeyDown);
|
|
8708
8999
|
canvas.addEventListener("pointerdown", onPointerDown);
|
|
8709
9000
|
canvas.addEventListener("pointermove", onPointerMove);
|
|
8710
9001
|
canvas.addEventListener("pointerup", endPointerDrag);
|
|
@@ -8751,6 +9042,7 @@ function createChart(element, options = {}) {
|
|
|
8751
9042
|
resetRightMarginCache();
|
|
8752
9043
|
doubleClickEnabled = mergedOptions.doubleClickEnabled;
|
|
8753
9044
|
doubleClickAction = mergedOptions.doubleClickAction;
|
|
9045
|
+
applyAccessibilityAttributes();
|
|
8754
9046
|
const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
|
|
8755
9047
|
if (!isTickerSmoothingEnabled) {
|
|
8756
9048
|
smoothedTickerPrice = null;
|
|
@@ -9134,6 +9426,23 @@ function createChart(element, options = {}) {
|
|
|
9134
9426
|
const onDrawingHover = (handler) => {
|
|
9135
9427
|
drawingHoverHandler = handler;
|
|
9136
9428
|
};
|
|
9429
|
+
const onSelectionChange = (handler) => {
|
|
9430
|
+
selectionChangeHandler = handler;
|
|
9431
|
+
lastSelectionSignature = null;
|
|
9432
|
+
if (handler) {
|
|
9433
|
+
emitSelectionChangeIfMoved();
|
|
9434
|
+
}
|
|
9435
|
+
};
|
|
9436
|
+
const getSelectedDrawing = () => getSelectedDrawingWithBounds();
|
|
9437
|
+
const onContextMenuHandler = (handler) => {
|
|
9438
|
+
contextMenuHandler = handler;
|
|
9439
|
+
};
|
|
9440
|
+
const onKeyboardShortcut = (handler) => {
|
|
9441
|
+
keyboardShortcutHandler = handler;
|
|
9442
|
+
};
|
|
9443
|
+
const focus = () => {
|
|
9444
|
+
canvas.focus({ preventScroll: true });
|
|
9445
|
+
};
|
|
9137
9446
|
const saveState = () => {
|
|
9138
9447
|
const drawingDefaults = {};
|
|
9139
9448
|
for (const [tool, defaults] of drawingToolDefaults) {
|
|
@@ -9198,6 +9507,7 @@ function createChart(element, options = {}) {
|
|
|
9198
9507
|
drawRafId = null;
|
|
9199
9508
|
pendingDrawUpdateAutoScale = false;
|
|
9200
9509
|
}
|
|
9510
|
+
canvas.removeEventListener("keydown", onCanvasKeyDown);
|
|
9201
9511
|
canvas.removeEventListener("pointerdown", onPointerDown);
|
|
9202
9512
|
canvas.removeEventListener("pointermove", onPointerMove);
|
|
9203
9513
|
canvas.removeEventListener("pointerup", endPointerDrag);
|
|
@@ -9261,6 +9571,11 @@ function createChart(element, options = {}) {
|
|
|
9261
9571
|
onDrawingSelect,
|
|
9262
9572
|
onDrawingDoubleClick,
|
|
9263
9573
|
onDrawingEditText,
|
|
9574
|
+
onSelectionChange,
|
|
9575
|
+
getSelectedDrawing,
|
|
9576
|
+
onContextMenu: onContextMenuHandler,
|
|
9577
|
+
onKeyboardShortcut,
|
|
9578
|
+
focus,
|
|
9264
9579
|
setMagnetMode,
|
|
9265
9580
|
getMagnetMode,
|
|
9266
9581
|
setPriceScale,
|
package/dist/index.d.cts
CHANGED
|
@@ -78,6 +78,8 @@ interface ChartOptions {
|
|
|
78
78
|
pinOutOfRangeLines?: boolean;
|
|
79
79
|
doubleClickEnabled?: boolean;
|
|
80
80
|
doubleClickAction?: "reset" | "placeLimitOrder";
|
|
81
|
+
keyboard?: KeyboardOptions;
|
|
82
|
+
accessibility?: AccessibilityOptions;
|
|
81
83
|
crosshair?: CrosshairOptions;
|
|
82
84
|
grid?: GridOptions;
|
|
83
85
|
watermark?: WatermarkOptions;
|
|
@@ -164,6 +166,36 @@ interface DrawingSelectEvent {
|
|
|
164
166
|
pointIndex?: number;
|
|
165
167
|
x: number;
|
|
166
168
|
y: number;
|
|
169
|
+
/** On-screen box of the drawing, for anchoring a host toolbar to it. */
|
|
170
|
+
bounds?: DrawingBounds;
|
|
171
|
+
}
|
|
172
|
+
/** Canvas-pixel bounding box of a drawing, relative to the chart canvas. */
|
|
173
|
+
interface DrawingBounds {
|
|
174
|
+
left: number;
|
|
175
|
+
top: number;
|
|
176
|
+
right: number;
|
|
177
|
+
bottom: number;
|
|
178
|
+
centerX: number;
|
|
179
|
+
centerY: number;
|
|
180
|
+
}
|
|
181
|
+
/**
|
|
182
|
+
* Emitted whenever the selected drawing's on-screen box moves — selection,
|
|
183
|
+
* deselection (payload `null`), drag, edit, pan, zoom or resize. Hosts render
|
|
184
|
+
* their own floating toolbar and position it from `bounds`, keeping it inside
|
|
185
|
+
* `plot`; the chart never has to draw toolbar chrome itself.
|
|
186
|
+
*/
|
|
187
|
+
interface DrawingSelectionChangeEvent {
|
|
188
|
+
drawing: DrawingObjectOptions;
|
|
189
|
+
bounds: DrawingBounds;
|
|
190
|
+
/** Plot rectangle, so a toolbar can be clamped inside the chart area. */
|
|
191
|
+
plot: {
|
|
192
|
+
left: number;
|
|
193
|
+
top: number;
|
|
194
|
+
right: number;
|
|
195
|
+
bottom: number;
|
|
196
|
+
};
|
|
197
|
+
/** True while the drawing is actively being dragged or resized. */
|
|
198
|
+
dragging: boolean;
|
|
167
199
|
}
|
|
168
200
|
interface DrawingHoverEvent {
|
|
169
201
|
drawing: DrawingObjectOptions | null;
|
|
@@ -470,6 +502,67 @@ interface CrosshairPriceActionEvent {
|
|
|
470
502
|
y: number;
|
|
471
503
|
price: number;
|
|
472
504
|
}
|
|
505
|
+
/**
|
|
506
|
+
* What the pointer was over when the context menu was requested. Hosts switch
|
|
507
|
+
* on this to show the right menu instead of re-deriving it from coordinates.
|
|
508
|
+
*/
|
|
509
|
+
type ChartContextMenuRegion = "plot" | "drawing" | "indicator-pane" | "x-axis" | "y-axis";
|
|
510
|
+
interface ChartContextMenuEvent {
|
|
511
|
+
region: ChartContextMenuRegion;
|
|
512
|
+
/** Canvas-relative position. */
|
|
513
|
+
x: number;
|
|
514
|
+
y: number;
|
|
515
|
+
/** Viewport position, ready to place a DOM menu without re-measuring. */
|
|
516
|
+
clientX: number;
|
|
517
|
+
clientY: number;
|
|
518
|
+
/** Price under the pointer (main pane regions only). */
|
|
519
|
+
price?: number;
|
|
520
|
+
index?: number;
|
|
521
|
+
time?: string;
|
|
522
|
+
point?: OhlcDataPoint;
|
|
523
|
+
/** Set for region "drawing"; the drawing is also selected by the chart. */
|
|
524
|
+
drawing?: DrawingObjectOptions;
|
|
525
|
+
drawingTarget?: "line" | "handle";
|
|
526
|
+
pointIndex?: number;
|
|
527
|
+
/** Set for region "indicator-pane". */
|
|
528
|
+
indicator?: {
|
|
529
|
+
id: string;
|
|
530
|
+
type: string;
|
|
531
|
+
};
|
|
532
|
+
}
|
|
533
|
+
/** Built-in keyboard actions, reported after the chart applies them. */
|
|
534
|
+
type ChartKeyboardAction = "delete-drawing" | "cancel" | "pan-left" | "pan-right" | "pan-up" | "pan-down" | "zoom-in" | "zoom-out" | "reset-viewport" | "scroll-to-realtime";
|
|
535
|
+
interface ChartKeyboardShortcutEvent {
|
|
536
|
+
action: ChartKeyboardAction;
|
|
537
|
+
/** The originating `KeyboardEvent.key`. */
|
|
538
|
+
key: string;
|
|
539
|
+
shiftKey: boolean;
|
|
540
|
+
/** The drawing that was removed, for "delete-drawing" (so hosts can undo). */
|
|
541
|
+
drawing?: DrawingObjectOptions;
|
|
542
|
+
}
|
|
543
|
+
interface KeyboardOptions {
|
|
544
|
+
/**
|
|
545
|
+
* Master switch for the built-in shortcuts. Shortcuts only fire while the
|
|
546
|
+
* chart canvas has focus, so they never swallow typing in host inputs.
|
|
547
|
+
* Default true.
|
|
548
|
+
*/
|
|
549
|
+
enabled?: boolean;
|
|
550
|
+
/** Bars panned per arrow-key press (Shift multiplies by 10). Default 1. */
|
|
551
|
+
panBars?: number;
|
|
552
|
+
/** Delete/Backspace removes the selected drawing. Default true. */
|
|
553
|
+
deleteSelectedDrawing?: boolean;
|
|
554
|
+
}
|
|
555
|
+
interface AccessibilityOptions {
|
|
556
|
+
/** aria-label on the canvas. Default "Price chart". */
|
|
557
|
+
label?: string;
|
|
558
|
+
/**
|
|
559
|
+
* Longer description exposed via aria-description, e.g. the symbol and
|
|
560
|
+
* interval currently shown.
|
|
561
|
+
*/
|
|
562
|
+
description?: string;
|
|
563
|
+
/** Make the canvas focusable so keyboard users can reach it. Default true. */
|
|
564
|
+
focusable?: boolean;
|
|
565
|
+
}
|
|
473
566
|
interface TickerLineOptions {
|
|
474
567
|
visible?: boolean;
|
|
475
568
|
style?: "solid" | "dotted" | "dashed";
|
|
@@ -581,6 +674,29 @@ interface ChartInstance {
|
|
|
581
674
|
onDrawingSelect: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
|
|
582
675
|
onDrawingDoubleClick: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
|
|
583
676
|
onDrawingEditText: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
|
|
677
|
+
/**
|
|
678
|
+
* Selection geometry stream for a host-rendered floating toolbar. Fires on
|
|
679
|
+
* select/deselect and on every frame where the selected drawing's box moves
|
|
680
|
+
* (drag, pan, zoom, resize), so the toolbar can track the shape instead of
|
|
681
|
+
* sitting in a fixed corner. Payload is `null` when nothing is selected.
|
|
682
|
+
*/
|
|
683
|
+
onSelectionChange: (handler: ((event: DrawingSelectionChangeEvent | null) => void) | null) => void;
|
|
684
|
+
/** Current selection and its on-screen box, for imperative reads. */
|
|
685
|
+
getSelectedDrawing: () => {
|
|
686
|
+
drawing: DrawingObjectOptions;
|
|
687
|
+
bounds: DrawingBounds;
|
|
688
|
+
} | null;
|
|
689
|
+
/**
|
|
690
|
+
* Right-click (or long-press equivalent) with everything the host needs to
|
|
691
|
+
* open the correct menu: which region was hit, the price/bar under the
|
|
692
|
+
* pointer, and the drawing or indicator pane it landed on. The chart always
|
|
693
|
+
* suppresses the browser's native menu.
|
|
694
|
+
*/
|
|
695
|
+
onContextMenu: (handler: ((event: ChartContextMenuEvent) => void) | null) => void;
|
|
696
|
+
/** Fires after a built-in keyboard shortcut is applied. */
|
|
697
|
+
onKeyboardShortcut: (handler: ((event: ChartKeyboardShortcutEvent) => void) | null) => void;
|
|
698
|
+
/** Focus the chart canvas so keyboard shortcuts apply to it. */
|
|
699
|
+
focus: () => void;
|
|
584
700
|
setMagnetMode: (mode: "none" | "weak" | "strong") => void;
|
|
585
701
|
getMagnetMode: () => "none" | "weak" | "strong";
|
|
586
702
|
/**
|
|
@@ -781,4 +897,4 @@ declare const compileScriptIndicator: (definition: ScriptIndicatorDefinition) =>
|
|
|
781
897
|
|
|
782
898
|
declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
|
|
783
899
|
|
|
784
|
-
export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type ChartSavedState, type ChartType, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneActionEvent, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneHeightChangeEvent, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type PriceScaleMode, type PriceScaleOptions, SCRIPT_SOURCE_INPUT_VALUES, type ScriptComputeResult, type ScriptIndicatorDefinition, type ScriptIndicatorInputDef, type ScriptInputHelper, type ScriptInputOptions, type ScriptPlotSpec, type TickerLineOptions, type TradeMarkerOptions, type ViewportState, type WatermarkOptions, compileScriptIndicator, createChart, extractScriptInputs, validateScriptSource };
|
|
900
|
+
export { type AccessibilityOptions, type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartContextMenuEvent, type ChartContextMenuRegion, type ChartInstance, type ChartKeyboardAction, type ChartKeyboardShortcutEvent, type ChartOptions, type ChartSavedState, type ChartType, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingBounds, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingSelectionChangeEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneActionEvent, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneHeightChangeEvent, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type KeyboardOptions, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type PriceScaleMode, type PriceScaleOptions, SCRIPT_SOURCE_INPUT_VALUES, type ScriptComputeResult, type ScriptIndicatorDefinition, type ScriptIndicatorInputDef, type ScriptInputHelper, type ScriptInputOptions, type ScriptPlotSpec, type TickerLineOptions, type TradeMarkerOptions, type ViewportState, type WatermarkOptions, compileScriptIndicator, createChart, extractScriptInputs, validateScriptSource };
|