Horizontal TreeView

General JUCE discussion
1

Hi,
i would know if there’s some way to implements an horizonal treeView ( where the items is disposed aloung columns instead of rows ) using/overriding some methods that the TreeView or TreeViewItem classes offer without modifiying it.

I thought to create a simple class TreeViewComponent that acts as a wrapper for a TreeView in this way :

class TreeViewComponent : public Component {
            public:

                TreeViewComponent (bool isVertical)
                
                void resized() override {

                auto area = getLocalBounds().toFloat();

				if (!isVertical) {

					auto pX = (float)(area.getWidth() * 0.5f);
					auto pY = (float)(area.getHeight() * 0.5f);

					auto t = AffineTransform::rotation(MathConstants<float>::halfPi,pX,pY).followedBy(flip(area.getWidth()));
					
					treeView->setTransform(t);
				}

				treeView->setBounds(area.toNearestIntEdges());
                }

            protected:

                
                std::unique_ptr<TreeView> treeView;

                 //this method flip the component from [__d__] to [__b__]
                AffineTransform flip(float width){
                   return { -1.f, 0.f, width,0.f, 1.f, 0.f }
                }

                bool isVertical;

            };

So it can apply a rotate-flip transformation to obtain an horizontal view.
Is this a right way or maybe i need to find a better one ?

2

Are you looking for a column view like the Finder’s column list? If so Dave has one… drowaudio/dRowAudio_ColumnFileBrowser.h at master · drowaudio/drowaudio · GitHub

3

Thanks for the response.
No, i wasn’t looking at something like that.
I need some object that hold a list of components ad display them in an horizotal view kepping al the advantages that comes using a TreeView ( Viewport , DragAndDrop , ecc… )
In my case i have a ValueTree node with severals child , for example :

ROOT
   CHILD_1
   CHILD_2
   ...
   CHILD_N

So, starting from the ROOT and iterating for each child ( like the TreeView does ) i wanna build an horizontal list of components that show informations based on children ( CHILD1 , ecc… )
This list must be horizontal ( while the TreeView build a vertical one ) and the components inside could be dragged and droppen to reorder their position inside the list ( updating the ROOT value tree ) and so on…

Looking at Waveform i wanna implements something like the Mixer section where for each track a component is builded with the level meter ecc… and those components could be reordered ( updating the Edit Value Tree that corrisponds to the ROOT in the example that i showed you before )

For these reasons i thought to create a standart TreeView and the apply an AffineTransformation to obtain an horizontal one, but it seems to trottling around and olso in general i don’t think this is the best solution to reach my goal.

4

This is an interesting problem. I think I’d start by just applying an AffineTransform to the outermost Component to rotate the whole thing 90 degeees. (You can just do this in the constructor, I’m pretty sure that doing it in the resized() call is a mistake). Then, I’d override the createItemComponent() method in TreeViewItem, and create a new label Component with the text rotated -90 degrees.

Not sure how well this would work, but it might get you started.

5

Hi LiamG,
I dont think you could apply an AffineTransform in the constructor just because to apply it you need the component bounds.
This one is setted by parent when you call the setBounds() method on it.

class Child : public Component {
   Child(){
      //The bounds to this component here is not yet setted....
      setTranformation(...)
   }

   void paint(Graphics&g) override{
     //Here the bounds is setted so you can apply a transformation
   }

   void resized() override {
     //Here the bounds is setted so you can apply a transformation
   }

}

class Parent : public Component {
   Parent(){}

    void resized() override {
      //Here you are defining the child component bounds
      child->setBounds(getLocalBounds().reduced(10));
   }

   Child child;
}

I think that the trottling of the component is caused because the bounds is relative to int while the AffineTranform is relative to float so we lost the precision…

6

I’m not at a computer right now so i might be wrong, but can’t you just do setTransform(juce::AffineTransform().rotate(90)) ?

7

Yes, i could do it but the method :

AffineTransform rotated (float angleInRadians,
                             float pivotX,
                             float pivotY) const noexcept;

wants a pivotX and pivotY on wich perform the rotation that are 0 by default.
When these are 0 you are not performing a rotate in place so the component will be rotate of 90 degrees but in a different position… to keep the component in place with a rotation you must set pivotX and pivotY as center coordinates like i wrote in the first comment :

auto pX = (float)(area.getWidth() * 0.5f);
auto pY = (float)(area.getHeight() * 0.5f);
auto t = AffineTransform::rotation(MathConstants<float>::halfPi,pX,pY);

To do that you must have the bounds of the component you want to rotate…