Change order of childComponents inside panel?

Christoph Hart

Jupp, valid request. Let me check how easy it is to implement...

ustk

I always wanted to do such a thing, but since it is not actually doable with panels I used object painting in one unique panel. Still very verbose to paint the object in a certain order but it is a viable solution...

Another situation where Z depth would be awesome is when you have multiple components you want to hide/show. Let say ADSR curves. If you want to see all of them but make one modifiable, it has to be on top of the others. The actual workaround is to make dummy curves behind, and only show the real component you want to modify... Well, it doesn't seem very clear once explained, but I assure you, it is clear in my head!

ulrik

@Christoph-Hart Great!

Christoph Hart

Alright, that was rather easy:

function mouseCallback(event)
{
     if(event.clicked)
        this.setZLevel("AlwaysOnTop");

     if(event.mouseUp)
         this.setZLevel("Default");
};

There are more advanced options ("Front" and "Back"), which you might want to use in certain occasions.

I also drive-by fixed a crash with your snippet (dragging around the panels made my system go boom).

ulrik

@Christoph-Hart Hallelujah! Thanks :)

ustk

@Christoph-Hart I'm testing, although the commit - fixed multithreading crash won't compile :

ulrik

@Christoph-Hart Error when compiling

Skärmavbild 2021-03-26 kl. 15.58.52.png

Christoph Hart

Oopsies, little typo. It's fixed now.

ulrik

@Christoph-Hart the setZLevel("Back") seems to behave a bit odd, when setting a childPanel with this once, it will become unreachable, the mouseCallback will no longer function.

Is there more commands than this 4?
I'm trying to sort 10 childPanels in Z and it seems impossible to do that with only this 4 commands.
Is it possible to have an index system for z depth, or a way to set just 1 forward or 1 backward?

And "Default", does it mean the order they where created, first created - deepest z, last created - on top?

ulrik

@ulrik I saw in your commit there where this "numZLevels", is it already possible to set z-depth with numbers?

ulrik

@ulrik ok, I tried but it wasn't

ulrik

@ulrik I think the commands "Backward" & "Forward" would be great to have (1 step for each execursion)

btw, thank you @Christoph-Hart for implementing this!

ulrik

@ulrik I found this in Juce


void 	toFront (bool shouldAlsoGainFocus)
 	Brings the component to the front of its siblings. 
 
void 	toBack ()
 	Changes this component's z-order to be at the back of all its siblings. 
 
void 	toBehind (Component *other)
 	Changes this component's z-order so that it's just behind another component. 
 
void 	setAlwaysOnTop (bool shouldStayOnTop)
 	Sets whether the component should always be kept at the front of its siblings. 
 
bool 	isAlwaysOnTop () const noexcept
 	Returns true if this component is set to always stay in front of its siblings.

I think the “toBehind” would be enough to handle several child panels

ulrik

@Christoph-Hart
Ok, I got it working the way I wanted :)
In this project I have to have all child panels in right z order, so I thought that if I iterate through the child array backwards, and used

child.setZLevel("Front");

it would work, and it did, for awhile
I noticed that after a couple of rearranging in the child array, it did not work.

So first I had to set all childs to

child.setZLevel("Default");

then I could use the

child.setZlevel("Front");

and it seems to work so far.

I'm happy

HiseSnippet 2894.3ocuZstTajbEdjsGrAujrNU9appW9gqQAPVBiMdCAGDRBrpU.ZQBRhoHjgYZg5vnYzNSKDJ6RU6iVdTxiPd.RUImtmKcO2jDjxAWkgo6y4zm96bs6YZ65Xf87bbUJrX2ICwJE9J0NSro8q0WmXqzrtRgWoVqOwxrstM1xCcDdrxdSFp64gMUJT3oGvHqvhOSg+y+5OrmtktsAVLjhxYNDCbKx.BULZ6c+Nhk095l3tjARTu4tMMbrq4X4LBTompVVYntwM5WiORmQ1STUJrPCSB0wsCUmh8TJ7r8bLmzouyXae5Oi3QtxBydnhRGPP9CuuikISiYip3ugB25dJfTZK.hm5CD+Z0CIljnwE.xWym.I3PFOJ7joodUjUuxyu5UPR8dlu58J0NFtjgTwLLc6kpMsoX2d5fIPVs7oU4IE+Mp0b.JrokFneCdeW3gHNzde4xqgdW4xE2d4k.yfGEcqtKp8Qstr1wG0sZyiZbBZGTn.tFSq4LXniM7f1JwnZk3RnSitGU8vF4xav7I35r14xvYs4zx92adCB0ASQV5SvtHavMY4kH1VDaLp2HaCJwwF4XGrBLo45XoYDJp0fUxZDt3xK8iKuDB9wxwP2hKFXw4yss7DDy6fwOqMSeNiMqVwf4CVgRdXP+t02JuxZnd5Vd3PZLXF1VDO54fbtHIoT2QSkRJ9NJPFS2xgLW7PvIkFoSKuz8bTZFnNS7AHSMcKqqfHNsjPVHbG.3fGNFAz5qAC8yMvgKO1Bud7eh4Kz83SpdvT7E7mOv9xVrC.qqXYPdj+NN4Bj6h07ySYkfIkVlr2SDajNxBPXz7rdQ1CXQO+hHQW0zDYiGKuKl1NX8r7fqVu9r8dI8PZgCwdNXXg+KWC.kKVzZIcSSQNdt2yhQdWw78VoEOJaEzphsZIKr80z9YwE.lNiCco7X7WEfWw.Q7D7KeczCzOvR0AryZIoHVT1XhIsOHUuRiyZ0mwz8wjq6S4ymgx2lEHchyHJXFzZeRZBNzYjGNJb4vZ6kTUYF9ZNironw8IF8gTGHhGx1ghnPlWagkgYzRhlnc1AUtnfFICo.nF55LrIyZ1v9ZPMKY5LBxjz0oC0kXesFjKubXlfveBhtJYpS0O2m+KB8UkoyeaxnpDgsBkkl+dweJ9KHVAOC0kDKxPd9dNtHMKVrVDNTLNEIDHG17wqgi75qYEppI2u2yBASsTDPIprMhf98P0N32qt5brbfU5aBVSHfmB9GdZjhESSYFLmEjR1Na5lKaKICa6C0FG9CjVwywBWZnKq1A0k0IfrLJl2BckKV+lLl69T1.o+TNDQ30CfI1kxbY4iEEK43Zhc44lDoB3lPi77VRf9FAHtWGrE1fhYPJulbRG9TEOk0WQc1xWjg.YUtC0Nn2.uvdChLQL4L8hwP587JDKx7KJVc7I0gdwp8olsp2t5QMZ0A8fqnHgrQ0OX0v7fNtYM+rYTSD4mZVLCjwhkHMCdlHk9HJ5qrezWxzdxwhRFRo1bB5EZBj2dhrkZBZ0c.kXUe0W.6reEuXW7j+oR79aQZQhg64eunsmSZHg6sZ1o6CF0cwBbmspZPeaqgzGvpSjrITqDYKCLAi0g.ZVWnrdQWMf2X3d9AHx8CDk7znXb3JQqkPfw.mawZVgsYlp4yvn2.UaMTJRC1.7bmVXc2HmmvbOwG8ArMhm7xfEUEzsRwL2Vf0+ysv2Bs4HDZnQl2EXitnSZdvm5h975sZbViVS2Dm1BKV.cWW8IBipX6DNQRu7RBdWoNtm9HKXWrc58PTTDWPhPGzG4wUqudZYyo7bBZcTkKjWF9A.iVjfLT9HQ8FsZzsgTNlGdJFaeYbYG3W051XFMvt3L6dM+Sek1U.nUdxTmTh4SC69As0cwIx5mx0ONyxjln9T59hluJGYRcVEjxq5xzJsjvHjWYlrsUhy846UzFRh18jiOsKjKEMCOhjmNpM61CzBcOztNdcGR9c6P6S7B6bRpwGFWlt5iAR.Vi01Cw7hX4Rh6aDvTnbtlAH66vvJyfvt0PUJKltGwxBN4hl+8R4U5Jn5ANdxpq8AU17QjMlP6W0ZXecAiV.VC6fRaUTHcl1zExX4uMkRfsF5bngnMWCENwejchFMX7JalH0Z9JAeIyHwpIKSTHPjJdyeO2vxhLzCqctI3OtFx77JWv0G1pmNsj7+yBkkrZQt7YsRo0YWbrF48gnS.Anw.jxY.HgC7IdccshfdVQN7P91hN73S6znV0Vs1qZsu6A5BCmyKlOLjEUtvc3kQ4ErcEfAmPnLGw3FAJDKSQHurafXjcbI7++1dSmIioefoBsBCqWAQcPo0wrL4oyxkVlL93Y2AodVa+hBYmzStoCS7cG2i6lkcs9XWMn+MClo4.85Wi7GXBzSZkMR6jlyk6IeicoHi0hpHhdxJEykxfKWIY3uL874l1UKd+1IC+xcK9wL2hx4XYUYyAn2NKNlHS+4wjzEQa+Lc.lmaMc9brlE.7S+T...4RtlAGei+id8I8n0cFamFRdbUkRcDbnVjei1m6uhPCxAlhKRsESFMl2tJRqEFV19ZZGcJgYItOZfYbUIY8my1hIzgAra.6zg4mDhgeGc5g0Y.9NnC0o8K4BGVwTSZQPuQxuO3TYotvgTmZJ1dYsvEIIa4zb18YWV3.nye98Eu+oGUqayiOZpkFR2saz4hSbLN1YlYxUNztj2PKB7DZk3mhdLP6PcWObSvGvCJ5l9P1RSuQxyWwIx4p+FZmT9AqLdkeGZ7ZRCzGFneVdYtX5HWalbhe52VGePzs2OyRloOK.v9kAr++zEYOsqqRbtfhy+UuHoX40abZcW1yoVqFUOAAMTLGMSjIzvEvkf.lMvLWGJ1H+y2vfCQpcwwtWL4MsEBowOtwzvwncQdnXxsISfRnvQNT7w1ZEW5GWZwkteITxo50Ky4BDlE1MyoYueY2ownl8nAWgcCQ5PBUJ7r3uIW07eStxunYCerQhPG6l1D5wCw1489cUB.TEkBKDnU.oT9648WE7ddwlmQviG53RUHlfxodVaEtFCZVA96NOIm+h.N2aDk5Xy4RUsZ85grIdC8oXc4vWtL6EBw4bQ0.GhHtWHWtyXgWVUJDZNTfLDwKUi7edbB3UpINhaFh4zl0gpJr23dfIALSCwtTByCnPc7sDCr+6eeQ05XuanNCUJ77nf.kBuX1Vs6j+bGlHdn9t72XUz.+iq10ufXzH+yQ6Rn3AgedDek5Fu6sucyxa9sarkxUWKM7leXiu88aA+GeiDobOOOq6uTM1cjJqhJJSjeHtJt6eUnhQ9CC4YbjVV9tNlh7x3JRK8qDtY9cDJqBufiRK7uSnBKbWv.IPI.UYUYgXIUHvkpzCrjrJyBBd8tozwjHfLbt4Fe38eXqM25cuW41vf9nXtjV9bi5Dane9GjM6ata9XZjmAw6PmAvxn6NwOIh+NbYljQu1+0ADSadddH7BprlQxSa94uOg1n7WxPa7W7kTqrQYzcnOTNKbXZoPlW2KkOtaZaqm9sP+OscwPMFer3V4uolL.gYlOJOSi4ixzLeZfb5r7LF+vWv0Oc1v7zhadbZQ5OYouV8PGyQV5z3eMUrOgrfIfByw9rkXeZR1dD5D4OwruHehUyq59J01DpQ+r02mjg9B0R9RquAevZKq1nWO3jwBk8Yp6+m9x+0oo3+YRbMb.OWB3DodznAcfTmFXPSrYeEMrzkOgksz+4xgoO6fsM4O7efeBlrB64BASVIbRkA5FtNWZ3Wkm8Iw8B9HfNYy+x.WT8P1ynJQMEoVtTYkADSxkFFLnXcP2ylmMdD771GAOa9H34cOBdd+ifmsdD77goxC6ijr5Hpy.+vDXf1M3MWUnPCacvKi6Qp7esMMA3E

So for me this is enough of z-options, thank you Christoph!

Christoph Hart

But why don't you use the always on top mode for the currently dragged one and set it back to default on mouseUp?

In your animation the Layer 4 being dragged is still beyond level 2...

ulrik

@Christoph-Hart Yes you're right about setting the dragged to Top so it's visible, I will do that change
The purpose for the z-depth thing is this:

ustk

@Christoph-Hart Default doesn't seem to reset the level...

HiseSnippet 1063.3ocsW1saaaCEGmzILM1ctXEXO.D9Jafr.Ym1tgUTTO+QJLV9vHtM6i1hBZI5XhHQ5IQkFihBzGk8Hra2c8QXOB6QXWr68H0GVzKpAVtXBH.4bN7u3ORpygGOzWXSCBD9.X4mOeFE.+Bzn4b4ztSILNXPO.7dniIARpON1Um4yHAATG.Dt0yzNfk2FD872OsCwkvsoYt.fyELa5QLOlLy6v1+.y08PhC84LOiQ+f1CrE7tBWQnhmsPVfYD6KIWPOgnGVID.tSeGlT3ORRjz.0X5HblOZp3s73weNKfM1kpMZBFodQwtAcmxbcFltVC..31CyV4aEux+JzwLG1R+Y6.eYT.blBy8.XoUQZ6UPp4mBoCEtN5Wvm.OnAdaGi28Qir8YyjYQzrcWz.t5vYBQssahU7XAk9mRntB0H3x88HWROzWYrTQ8GYYsG9gVVMdLtZkJpM+.I9JhOdrjGfeB9koRufJ6J7lI3Ji505DJkBdyZM1qZE7MdtMMs1.MGTqwqe7JzMi6dKzMjvotECtHIsJtjTzpVgwcYbJdRH2VxDbrf2Qx0J8Et0sSksmBe2PZipUdW7LoWIuTuYuOi6Pu9zIYiswq2OfJ+kinWQcqGIC+TbsnyuZ3uCWqGcBIzUVqgBf2q9ahvGWeLlwiN7ZfGqkmPPWhq6XUpTcSrzB+7dLVsmHjzS40aT4cUJW48Uv+2PSljarDTbo94FVWdv+1DVmG5Ml5mtulNPUNypIk2c8RJsiOpMFnfOfyjmNilXmk1piEupSiZAVtXMcksFM8FszxYXYttYUAPxmhp5CakLb0+IipNbujpCw4L.lhwxnjDUPztiYUYPAj25yS9A4H+EC5QjDcYtjUjZUNi5KY5yJXO5Up6LhK5UF0iFboTLSU5eY1G.ta7zVMsjnNYLZV2EEm9Ctd4D9gWzd9RiO9p1uk4HmBfHXMH.LkxtXpTa8GpnLI0K85mx6..KV.VwaKS2fBvSKCd9KaCd9fn.7rHedVTbdNvfme+WM342lt973u.jGOotM4Ym03izLh934FDA50lEbrvS8dH9J2vRR50ZhPm0uWAmDyiArv7Xna9Sxtnet+QGc5OVv4wb68OudMlm6fd1Y86ehp0nabsup4CgSnKQtZGI5VuRBnpHtxU+5q24AL4byVyJPaJV41lRy7JHsl3dezPlzdZ97VJGdUkF9+l2jl9ph5OYB0VlA61nC+oMsCuBfxYhPIiewwDoOS80B5jPuQpTHaphDtJEMPmzURmFEaaos06LinbmHCUd+hjfM01vjfMSCB7H19h2XGWrV2V4tQdTLwi5ntrp0dkMd4MDHj09V.OU2tuw1VuU70J1yWSqMPyAaflGrAZd3Fn4QafluYCz7s2pF8Oz36CkBu3zDkig8itqDB6yIpuxh9hD7u.dhqlXC

After analysing the source I thought they should have been in a parent but this doesn't fix the issue either:

HiseSnippet 1088.3ocsWssaaaDDcorVWKkpfFf7ArPOIA3ZHImjVzfhnpKNPn9hfUh6kffzUjqrVXxcEHW5Xgf.jeq9V9D5eP+E5C8c0Y4EwU0LFRJsBv.dtb3blY4L6vg9RaVPfzGYU5EymwPVeIdzbgZZ2oTt.MnGx593SnAJlOIVUm4ynAALGjk0NOWqvpTQTzu+5YcntTgMKSEBcgjayNl6wUYZG19G4ttGQcXuf6Y38iZOvVJ5Jckg.e1A2.MiZeE8R1oTsaEvHqc66vUR+QJphE.9zQ5LezT4aEw9eAOfO1koEZhFAOnX0ntS4tNCSy0.Dxp3vrLem3L+g3S3N7k5yp.eUjARFByZfUgUoTwUnTyOEkNR55ne.eB5YYPuhwz6A3Q197YpLKZtcO7.Ab3LgBkcSZE6KpveW.2UBdHTG3QuhcjOHrDQsmznw9jG2nQ8mRpTtLT7CTjqo9jwJQ.46IuJE5kLUWo2Lo.DpUsSnRIEMqVe+JkI252cgo0Vf4vp0e8SWgcyDt2A6FREL2MibQPZs4PRoVkxbgKWvHSBE1JtTPjhNJgFouzslcJr8A56FxpWo76hijNSdktXe.W3vt4rIY9V+0GDvT+5wrqYt0hfQdFoZz4WUx2Qp1iMgF5ppVGHv6g+lH8I0FS3hnCu5jwZ3ILnK00cLzJUyjVZfed+Lx1SkJ1YhZ0K+txkJ+9xj+soISx0VBUbY94ZVOdv+t.VSD5Ml4mVWScD5YVso7dqWSoc7QsgiRw.AWc1LVhbVaq1VbVmZsAZYxZpJKGM0FkZ43VlpaOU.k7pHLeXmD2g+SEMc39ISGh6YPbfikvIMpnnpi4TYzF.u0mG7CyA9KGzipn5wbIYDjkyX9Jt9rxpG6Z3Ni3gdkv8XAWojyfizkcev0.wgsR5HQcyXTT2COj5qc4lr.dd64KEZeQ62xcTSQVXq+zBglx3WNUok9Mq3x5xXT5thgdDiYLdnQL.gkwn5Jw32AibEyK8JtR6hPKVfVQaKS0yhRFCRsL+Pa.SaYvzOLxfoejtALcQ9Lcw+kL8PCl1laxzWt9L0eAJOllpd8X5tqQaUFW+3Elm+8ZyCNQ5AOGpOn1pfhcilq3y62aCCh4QGQZDjOzM+frG9W5e7wm8SaXbLK7+wMqQb9B7yOue+Sgk4t0hJv5RRmPWpZ0cnzKKlX.lguxxJ5ERDAb0bykI2fEqZj6hUMyaD5ZR2GfGxU1SymuExguvvi+u4axZpUv8mLgYqxHaQ7Q+71tS5FPkykgJt3xSnJeN71B9zPuQPykMCXh.ZdCzsiEz2NDK2PKqqLiXBmHAXVwhDiM0xVIFalZD4Qs8kuwN95E8hv6EoA3jH5a.JAeLBHSVdmFF23fFHOX+72XaqKEeMv87wzZKvb3Vf4QaAlGuEXdxVf4a1BLe6chQ+oQ+PnR5E2l.JF1O51cKq9BJ7VVzajn+A7F4HCB

I don't understand why you declare this:

Component::SafePointer<Component> c = getComponent();

And then use this everywhere?

c.getComponent()

SteveRiggs

Just spotted this post.

Does this mean that users would be able to rearrange the signal chain now from the GUI if the plugin is built using this method? This is huge if so!

SteveRiggs

@SteveRiggs said in Change order of childComponents inside panel?:

Just spotted this post.

Does this mean that users would be able to rearrange the signal chain now from the GUI if the plugin is built using this method? This is huge if so!

Bump Bump ;)

Lindon

@SteveRiggs do you mean the FX chain? if so thats always been possible...just use FX Slots

Change order of childComponents inside panel?

15

1.8k

10.3k

90.2k