0

When the ECharts Draggable demo is resized it breaks dragging.

This is a Stackblitz with the Demo running in Angular.

If it is opened in a new tab by clicking the "Open in New Tab" button, and resized by opening developer tools, the demo also breaks.

Any ideas why this is happening?

Ole
  • 41,793
  • 59
  • 191
  • 359
  • The stackblitz is stuck on "Starting dev server" for me. The [officail draggable demo](https://echarts.apache.org/examples/en/editor.html?c=line-draggable) works when resizing. – Matthias Mertens Jul 30 '23 at 16:22
  • @MatthiasMertens yes the official demo works for me too, when resizing, and we've tried to stay close to the official demo in terms of implementation, so it's strange. I just clicked on the Stackblitz and it does render for me after about 10 seconds. – Ole Jul 30 '23 at 20:32
  • Demo works now on a different computer. I get lots of `[ECharts] Instance ec_1690782211965 has been disposed` messages in the console when resizing which happens if you are using an instance that has been disposed according to [this issue](https://github.com/apache/echarts/issues/16173). I dont know angular very well but I suspect it is destroying and reinitializing instances for some reason. – Matthias Mertens Jul 31 '23 at 06:11
  • Set the graphic element's invisability to `false` and you can see what happens. They are not updated with the resize and remain at their current position. The problem might still be connected to the disposed instances issue. – Matthias Mertens Jul 31 '23 at 08:08
  • @MatthiasMertens I tried setting it to false and it still breaks for ... No love unfortunately ... – Ole Jul 31 '23 at 17:30
  • This was not a suggestions for a fix. It is just helpful to see whats actually going wrong. You could adjust the position of the graphic elements in your resize function to the position of the visable nodes. – Matthias Mertens Jul 31 '23 at 17:42
  • Ah .. OK .. Got it ... Yeah I have a feeling it has something to do with how Angular is updating the components state as well ... – Ole Jul 31 '23 at 18:35
  • 2
    @MatthiasMertens is right about the fact that the hidden graphic elements remain at their old positions when the chart is resized, but I don't think the main issue is angular disposing and recreating chart instances. There simply isn't any code to update them. After I [implemented](https://stackblitz.com/edit/angular-ivy-jskw9d?file=src%2Fapp%2Fchart.component.ts) that piece of code I looked at the [example page](https://echarts.apache.org/handbook/en/how-to/interaction/drag/) and I realised that in they also implemented something similar, at least in the first full-fledged example. – kikon Aug 01 '23 at 12:37
  • 1
    The chart instance rebuild by angular might however be a serious problem. I added a random id to the echarts instance and I saw that it remains typically the same. However, once or twice I did see an instance deleted and recreated. I don't know when this happens, but the effect should be that in that case you loose all the dragging, points being set to initial positions. So, in your app you should take that into account and implement some persistence mechanism to retrieve the updated position when the chart instance is deleted and rebuilt. But that is not related to the current resize issue. – kikon Aug 01 '23 at 12:46
  • Hmmm ... It's strange that Angular is deleting the instance ... because the resize subscriptions only calls resize on the chart instance itself, so one would think the only thing affected by resizing is the echart instance ... – Ole Aug 01 '23 at 17:27
  • I'm not sure it does delete the instance, probably it doesn't normally. It might've been something related to the stackblitz - I might've possibly reloaded the page while it was still compiling which resulted in some glitch. But I suppose you may think in the production version what happens if someone reloads the page after points were dragged. – kikon Aug 02 '23 at 02:20
  • Yeah i have had things happen on stackblitz that dont happen in production so you may be onto something ... i'll test it out ... – Ole Aug 02 '23 at 02:30

0 Answers0