search

dash14 / v-network-graph

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

SVG blocks page scrolling #65

Closed bureauvanlieshout closed 2 years ago

bureauvanlieshout commented 2 years ago

Thank you for the fantastic v-network-graph! I implemented it on a project. There is also information beneath the graph area. I disabled zoom etc., but when a user scrolls (mousewheel, trackpad etc.), nothing happens. The page does not scroll. THe "Disable mouse operations" example has the same effect. Mouse operations on the graph are diabled, but also on the page as a whole? Do you have a solution for me, so that I can disable zoom and pan on the graph, but scroll the page while my pointer is over the graph? Thank you, Bart

dash14 commented 2 years ago

Hi @bureauvanlieshout, Thank you for your feedback! Regardless of the configs, mouse and touch events were being blocked, so the behavior has been changed. To use the features described below, please update v-network-graph to v0.5.19.

To allow mouse wheel scrolling on the page, please set view.zoomEnabled or view.mouseWheelZoomEnabled to false.

const configs = defineConfigs({
  view: {
    zoomEnabled: false,
  },
})

To allow scrolling by touch on the page as well, set view.zoomEnabled, view.panEnabled, and node.draggable all to false.

const configs = defineConfigs({
  view: {
    panEnabled: false,
    zoomEnabled: false,
  },
  node: {
    draggable: false,
  },
})

I hope this helps you. Best Regards,

dash14 commented 2 years ago

I close this issue for now. If you have any other question, please reopen this issue.