search

chartjs / chartjs-plugin-zoom

Zoom and pan plugin for Chart.js
MIT License
585 stars 324 forks source link

Chart / Zoom inside a webcomponent is offset #726

Closed hugo-valcourt closed 1 year ago

hugo-valcourt commented 1 year ago

"chart.js": "^4.2.0" "chartjs-plugin-zoom": "^2.0.0"

Hi,

I try to debug something, I hope to find someone having the same issue. It's really hard to debug.

I use ChartJs/Zoom inside CustomElement in Vue.js js 3. When I zoom in a web component, the zoom is offset a few pixels (30px).

When I use the Chart in Storybook without a webcomponent everything seem fine.

I think it's really related to the WebComponent Something with the shadowDom ?

In handler.js, I'am playing with mouseDown(chart, event), mouseUpchart, event) and getState(chart), and computeDragRect trying to understand the bug.

Maybe the mouseEvent is related to webcomponent/shadowDom, not the canvas?

Will try to debug this today, and give more details, but any idea would be appreciated

====== EDIT:

When we click on a webcomponent, the click event is on the shadowDom Element, not the canvas element. So the click position is wrong (because of padding and margin surrounding the canvas).

===== EDIT 2 :

See https://stackoverflow.com/questions/57963312/get-event-target-inside-a-web-component

Here https://github.com/chartjs/chartjs-plugin-zoom/blob/master/src/handlers.js#L85

export function computeDragRect(chart, mode, beginPoint, endPoint) {
  const {left: offsetX, top: offsetY} = beginPoint.target.getBoundingClientRect();

The bug is here : target under a webcomponent is the shadowRoot, not the canvas

https://user-images.githubusercontent.com/39559391/217631216-bebb04df-2df9-413d-a8b1-229bd4671164.mov test

https://user-images.githubusercontent.com/39559391/217631942-aa839290-5c92-4f64-849b-6c8111785f9a.mov

hugo-valcourt commented 1 year ago

thanks for the PR :-)