b2spirit 0 Report post Posted December 15, 2015 Hello all, I am quite new to working with pixi and my intention is to create a hierarchical tree structure kind of thing with nodes which are draggable. I have done some work and I currently have trouble getting the lines to move with the draggable nodes. My question is there any examples of full scene graphs with hierachies that I can refer to? Cheers! Quote Share this post Link to post Share on other sites
grovesNL 0 Report post Posted December 15, 2015 I am working on something like this currently, but it's not generic enough to be shared. I'm using a single PIXI.Graphics instance to draw lines between nodes. Each time a node is dragged, I clear the Graphics instance and redraw the updated lines. This achieves the functionality you described. I do some optimizations here such as culling nodes outside of the viewport and lines that do not pass through the viewport. I also separate inactive lines (ie. lines that do not connect to the current node) to a separate container so I can continuously update active lines only (the lines that are moving with the current dragging action). My solution works very well for tens of thousands of nodes, but there is noticeable lag when 10,000+ pipelines are drawn on the screen at once (you may never have this problem). To improve this I plan to move away from the Graphics approach to draw thick lines in the shader directly, but you may never require this if your hierarchies are not very complex. If you want to share an example (either publicly or privately), I can try to assist. Quote Share this post Link to post Share on other sites
xerver 286 Report post Posted December 15, 2015 Pixi is a scene graph, if you move a parent container. The children will move with it. Quote Share this post Link to post Share on other sites
d13 105 Report post Posted December 15, 2015 My question is there any examples of full scene graphs with hierachies that I can refer to? Are you trying to create a drag and drop interface for Pixi sprites? Quote Share this post Link to post Share on other sites
grovesNL 0 Report post Posted December 16, 2015 Typically a node graph is similar to the following structure: The nodes are the circles which would be draggable. In my case the circles are Pixi sprite and the lines are drawn in a Graphics instance. Quote Share this post Link to post Share on other sites
b2spirit 0 Report post Posted December 17, 2015 Are you trying to create a drag and drop interface for Pixi sprites? Sorry for the late reply. Yes, the nodes are dragging properly without issue, but the problem is with the lines. They duplicate. As Groves mentioned, I will try deleting the graphics instance. Quote Share this post Link to post Share on other sites
TheBuffer 0 Report post Posted December 17, 2015 This project may help you: https://github.com/felixmaier/Lamella Screenshot's say: Quote Share this post Link to post Share on other sites
grovesNL 0 Report post Posted December 17, 2015 Sorry for the late reply. Yes, the nodes are dragging properly without issue, but the problem is with the lines. They duplicate. As Groves mentioned, I will try deleting the graphics instance. I don't delete it entirely - just graphics.clear() should be ok. Quote Share this post Link to post Share on other sites
b2spirit 0 Report post Posted December 18, 2015 Thanks Grove, I got it to work . This is taking a bit of time since I am quite new to javascript programming and I am doing it outside my normal work. So my progress is quite slow. I'll probably have more questions later on . Quote Share this post Link to post Share on other sites
grovesNL 0 Report post Posted December 18, 2015 No problem, glad to help! Quote Share this post Link to post Share on other sites