getElementAtEvent rxjs issue #5103
Comments
|
Can you share the page that generates this issue or a fiddle that reproduces the error? |
|
Sure. I use it with Rxjs (fiddle): <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>chartjs issue</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.6/Rx.min.js"></script>
</head>
<body>
<canvas id="chart"></canvas>
</body>
<script>
const chart = document.getElementById('chart');
const ctx = chart.getContext('2d');
const canvasMousedown$ = Rx.Observable.fromEvent(chart, 'mousedown');
const canvasMousemove$ = Rx.Observable.fromEvent(chart, 'mousemove');
const canvasMouseup$ = Rx.Observable.fromEvent(chart, 'mouseup');
const canvasSelection$ = canvasMousedown$.concatMap((startEvent) => {
return canvasMousemove$.takeUntil(canvasMouseup$).map((endEvent) => [startEvent, endEvent])
});
canvasSelection$.subscribe((events) => {
console.log(getElements(scatterChart, events));
});
var scatterChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{
x: -10,
y: 0
}, {
x: 0,
y: 10
}, {
x: 10,
y: 5
}]
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom'
}]
}
}
});
function getElements(chart, events) {
return events.map((event) => chart.getElementAtEvent(event));
}
</script>
</html>Thank you for the help!
|
|
A workaround would be to restore the function getElements(chart, events) {
return events.map((event) => {
event.currentTarget = chart.canvas
chart.getElementAtEvent(event)
})
} |
|
Thank you for the investigation. My only problem with this solution that I use typescript and the event is a const: |
|
It would be better to figure out why var canvas = evt.currentTarget || evt.target || evt.srcElement; |
|
Thank you for the investigation I hope this fallback get into the code some point of the future because rxjs and other similar libraries getting more popular and I think this fallback could mitigate some issues. |
|
Seems better to solve in RxJS |
benmccann
changed the title
Hi,
In firefox when I tried to call this function:
chart.getElementAtEvent(event)got some error:
TypeError: canvas is undefined Stack trace: module.exports/helpers.getRelativePosition@webpack-internal:///../../../../chart.js/src/core/core.helpers.js:380:7 getRelativePosition@webpack-internal:///../../../../chart.js/src/core/core.interaction.js:19:9 single@webpack-internal:///../../../../chart.js/src/core/core.interaction.js:156:19 getElementAtEvent@webpack-internal:///../../../../chart.js/src/core/core.controller.js:629:11The problem looks like this (core.helper.js):
helpers.getRelativePosition = function(evt, chart) { var mouseX, mouseY; var e = evt.originalEvent || evt; var canvas = evt.currentTarget || evt.srcElement;......CurrentTarget already gone and in firefox srcElement does not exist. Maybe should use 'target' instead?
Any idea how can I make some quick fix? Or did I miss something?
Thank you!
The text was updated successfully, but these errors were encountered: