# Dataflow tree editor line graph

**URL:** <https://forum.juce.com/t/dataflow-tree-editor-line-graph/13194>\
**Category:** General JUCE discussion\
**Created:** [July 17, 2014, 11:40am UTC](https://forum.juce.com/t/dataflow-tree-editor-line-graph/13194 "2014-07-17T11:40:32Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![justgook](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/justgook/32/218_2.png) [@justgook](https://forum.juce.com/u/justgook)\
**Post date:** [July 17, 2014, 11:40am UTC](https://forum.juce.com/t/dataflow-tree-editor-line-graph/13194/1 "2014-07-17T11:40:32Z")

</div>

can u suggest what i should use to create somethink like that app  
http://idflood.github.io/ThreeNodes.js/public/index.html#

#1 main question (i cant find tutorial / example): how to creatate this drag'n'drop tree, node joins ...

![](http://www.juce.com/sites/default/files/forum/attachments/jost_0.4.0.png)

#2&nbsp;second question is about "curve edit" how to create (what to use) to create something like that?

![](http://www.juce.com/sites/default/files/forum/attachments/reflect2.jpg)

&nbsp;

---

<div class="post-metadata">

**Author:** ![rory](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/rory/32/534_2.png) [@rory](https://forum.juce.com/u/rory)\
**Post date:** [July 17, 2014, 12:33pm UTC](https://forum.juce.com/t/dataflow-tree-editor-line-graph/13194/2 "2014-07-17T12:33:25Z")

</div>

1) Have you looked at the Demo host example that ships with JUCE?

2) It's very easy to draw any type of shape you like directly onto components in their respective paint() method.

```
MyComponent::paint (Graphics& g)

{

g.drawRectangle....

g.drawLine....

etc..

}
```

&nbsp;

---

<div class="post-metadata">

**Author:** ![justgook](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/justgook/32/218_2.png) [@justgook](https://forum.juce.com/u/justgook)\
**Post date:** [July 17, 2014, 12:46pm UTC](https://forum.juce.com/t/dataflow-tree-editor-line-graph/13194/3 "2014-07-17T12:46:07Z")

</div>

draw is easy - i thing maybe there is alredy some component what i can use for it..&nbsp;  
where i can change curve with some "vertexes" / add new ...  
  
same for "graph" i see there is some "magic" in&nbsp; **AudioProcessorGraph&nbsp;** but i dont know is posible to crate some custom graphTree.. or something like that.. just to work with it, by draging nodes, and make sore that all joints left as is, and some common way how to serialize that data.  
  
just dont wont "investigate bicicle" (something that already is done)  
  
&nbsp;

---

<div class="post-metadata">

**Author:** ![rory](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/rory/32/534_2.png) [@rory](https://forum.juce.com/u/rory)\
**Post date:** [July 17, 2014, 1:26pm UTC](https://forum.juce.com/t/dataflow-tree-editor-line-graph/13194/4 "2014-07-17T13:26:58Z")

</div>

There is no special component for drawing envelopes and curves. You'll have to roll your own. I have to again refer you to the demo host that comes with JUCE with regards to your second question.&nbsp;

---

<div class="post-metadata">

**Author:** ![justgook](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/justgook/32/218_2.png) [@justgook](https://forum.juce.com/u/justgook)\
**Post date:** [July 17, 2014, 1:39pm UTC](https://forum.juce.com/t/dataflow-tree-editor-line-graph/13194/5 "2014-07-17T13:39:04Z")

</div>

which demo do you mean - some from main "juce/extras/Demo"

or about&nbsp;"juce/extras/audio plugin demo"? (this one i cant build)

---

<div class="post-metadata">

**Author:** ![rory](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/rory/32/534_2.png) [@rory](https://forum.juce.com/u/rory)\
**Post date:** [July 17, 2014, 1:53pm UTC](https://forum.juce.com/t/dataflow-tree-editor-line-graph/13194/6 "2014-07-17T13:53:24Z")

</div>

The 'audio plugin HOST' demo :)

---

<div class="post-metadata">

**Author:** ![justgook](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/justgook/32/218_2.png) [@justgook](https://forum.juce.com/u/justgook)\
**Post date:** [July 17, 2014, 1:57pm UTC](https://forum.juce.com/t/dataflow-tree-editor-line-graph/13194/7 "2014-07-17T13:57:57Z")

</div>

tnx - will try to build it

btw - about curve - for me it sounds nothing hard to imploment - but it would be nice (if i&nbsp;be not so lazy ill create pull-request) &nbsp;if that component be there