search

dash14 / v-network-graph

An interactive network graph visualization component for Vue 3
https://dash14.github.io/v-network-graph/
MIT License
495 stars 44 forks source link

svg-pan-zoom error #26

Closed John-Boik closed 2 years ago

John-Boik commented 2 years ago

This might be related to View:unload #24 . As suggested there, I am using version 0.3.10.

I have two "views/pages" or more accurately two components, one of which will show depending on a button click. One of the views, call it the "graph view", has a child component containing a v-network-graph. Once I create a graph, I save the graph data on the backend. When the graph view is opened, code in "mounted()" queries the backend to obtain the saved graph data, if any, and uses it to populate the svg.

I can create a svg graph and save the results. And I can refresh the app from the "other" page and open the graph view without error. But when have the graph view open, then click the button to jump to the other view and back again to the graph view, I always obtain the error:

svg-pan-zoom.js:669 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getViewBox')
    at SvgPanZoom.fit (svg-pan-zoom.js:669)
    at Proxy.fit (svg-pan-zoom.js:1003)
    at Proxy.fitToContents (svg-pan-zoom-ex.ts:52)
    at network-graph.vue:389

The same error occurs if I have the graph view open, alter the code to that page, and save the changes. This causes the v-network-graph component to refresh.

The code near network-graph.vue line 389 is:

// Scales the content to fit in the SVG area.
   const fitToContents = () => {
    updateBorderBox(() => {
    svgPanZoom.value?.fitToContents()

It appears that svgPanZoom is being called with no ViewBox present, so it can't complete the fit function and raises an error. The error apparently occurs before my code in mounted() can query the backend to retrieve the saved graph data. That is, the error occurs, then the backend is queried, then the data is returned and my code works fine.

I can simply ignore the error. But perhaps it would be best if the code in network-graph.vue was changed to call svgPanZoom only if there is a ViewBox present (if that is possible). I'm hoping that this verbal description makes sense, so I won't need to create a small demo to show the problem.

John

dash14 commented 2 years ago

Hi @John-Boik,

Thank you for the detailed report. I'm sorry, but I couldn't get it to reproduce on my end. For the time being, I have given the symptomatic treatment to suppress the backtrace that you gave me, but there may be other underlying problems. Please try v0.3.11.

If you are still having problems, please let me know the following:

dash14 commented 2 years ago

Since there seems to be no reply, I close this issue for now. If you have any questions, please open a new issue or re-open this.