search

rcarcasses / vue-cytoscape

cytoscape.js now inside vue.js
https://rcarcasses.github.io/vue-cytoscape
MIT License
96 stars 34 forks source link

Canvas misplaced #37

Closed gioppoluca closed 5 years ago

gioppoluca commented 5 years ago

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?)

rcarcasses commented 5 years ago

hey @gioppoluca , vue-cytoscape no longer have css dependencies, so I believe this is due to your local configuration.

rcarcasses commented 5 years ago

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.

gioppoluca commented 5 years ago

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

gioppoluca commented 5 years ago

Also accessing the site from a windows 10 + Chrome get the same results. Tested in development.

rcarcasses commented 5 years ago

thanks for sharing, I'll take a look at the end of the day.

rcarcasses commented 5 years ago

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.

peterclemenko commented 5 years ago

@rcarcasses could you please expand that to include showing how to load vue extensions. I'm having problems with that in vuex as well.

gioppoluca commented 5 years ago

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.

leiyan commented 2 years ago

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.