Rendering Behavior to toggle a visible state of a node
lim-enhui opened this issue · 9 comments
In this image above you can see the node 2 is awkward position...
that is because i have an element that is computed and set visible to false, only to be revealed in later toggle manner
I amended the code in the svg
in line 16: path(v-for="link in _links"
in line 28: template(v-for='(node,key) in _nodes')
_nodes () { return this.nodes.filter((el) => el.visible) }, _links () { return this.links.filter((el) => el.visible) }
So maybe you can give me some hindsight of behavior pattern
This extra pic is to show there is no connected link path to result the node in the state position. But it still holds onto the x and y position.
By default, it should be like this. the loose endpoints of a node
HI, thanks for the screenshots and detailed explanation, maybe you can provide a link to code?
Hi emiliorizzo,
https://github.com/lim-enhui/vue-infoland-demo
here is the repo to see the results of rendering..
Hi I have encounter more issues with the code that I am trying to fix around...
basically when i try to use touch to drag the nodes, it just stuck some where as above...
as you can see the node became fixed position. only for touch..
However, everything seems fine with mouse drag though. hope to hear from you soon.
Hello @lim-enhui
About the 'visible state':
You suggest to add a 'visible' property to nodes?
Why not add / remove the nodes from data source?
Touch support:
Works fine in my projects and the demo, I dont known why not in your project.
I think it would be faster to evaluate a jsfiddle / codepen than your entire application
Can't do that.. cause it will cause rerendering behavior which makes the toggle behavior that switch visible state to rerender the elements.
ok i think i know the cause.. basically when you drag with mouse or touch, it emits click event with touchend and @click.. but when you want to drag you dont intend to run click behavior... I am going to work on the behavior somehow...
@lim-enhui , feel free to open a new issue for node touch.
@lim-enhui See this example: https://codepen.io/emilio/pen/MPpWQy
(hide nodes using css)
I think that this solves this issue, please reopen if not.
Thank you.