Closed gioppoluca closed 5 years ago
hey @gioppoluca , vue-cytoscape
no longer have css dependencies, so I believe this is due to your local configuration.
Also nodes cannot be moved but is only possible to drag the whole graph.
this looks like another issue, perhaps if you provide a reproducible example I can give you a hand.
In the link a basic vue.js project with the cytoscape component used in the HelloWorld. No other things running. Both behaviours shown: 1) canvas misplaced to the right and mouse seems to "click" further to the right 2) nodes not grabbable and only graph drag working Environment is linux desktop. Misbehave both with Firefox and Chrome. Here the link to the project: https://we.tl/t-MVHYLDDAh5
Also accessing the site from a windows 10 + Chrome get the same results. Tested in development.
thanks for sharing, I'll take a look at the end of the day.
TL;DR: make sure that the default style in App.vue
is not interfering with your css layout (delete it!).
So I couldn't dive too deep into your code but I just created a simple example that shows the default behavior of vue-cytoscape
:
https://github.com/rcarcasses/vue-cytoscape-1.x.x-test
As you will see, everything appears in the middle as expected.
I did experience some strange initial behavior with css, but I found it was due to the default style in the App.vue
component.
@rcarcasses could you please expand that to include showing how to load vue extensions. I'm having problems with that in vuex as well.
I can confirm that the default VUE app CSS generates gives troubles
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
By removing the:
text-align: center;
All works perfectly even with vue-bootstrap
Thanks for the hint, maybe you can add to yhe documentation.
Also the node problem get solved now they are clickable and moving.
I can confirm that the default VUE app CSS generates gives troubles
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
By removing the:
text-align: center;
All works perfectly even with vue-bootstrap Thanks for the hint, maybe you can add to yhe documentation. Also the node problem get solved now they are clickable and moving.
Thank you so much. I have the same issue and fix it now.
Maybe there are some CSS missing but using vue with bootstrap the graph gets moved right by half the width. Also nodes cannot be moved but is only possible to drag the whole graph. Any hints? Version of vue-cytoscape latest (1.0.4?)