 Hi, I'm currently running this preview version of the panel that's been completely written right here And you can see that I was developing this because just look at the amount of clocks That I've added to the panel as a test and the cool thing is that after so much work It kind of works, kind of, but it's already a lot much better than before So first of all, let me show you the most Unexciting thing ever which is the plasma panel actually working You can see that I'm able to drag things inside of the panel and it will show me where they're going to be put And if I drop it, it will be actually added to the panel and then I can go here and enter edit mode and take these widgets and then drag them around and When I'm done, I can take a clock and remove it and this is crazy all of this works and You could say okay It also works on my machine. What's the difference? Well, the difference is that if you haven't been paying attention to my videos I've completely rewritten all of the code and nothing was working Nothing, so it's actually pretty amazing that everything works. What was I doing wrong? Since I ended the last video well Everything almost no idea was good. The idea of Sorry about that the idea of having this Or is that main dot QML? Element the repeater with the model and the delegate which we talked about last time go see I broke the panel video if you haven't seen it yet But now that we do have this repeater Which uses our model and the correct delegate? What was missing is that do you remember in the last video? I talked about This on a plate change function I said, okay, this function should be called whenever the applet changes so also when you actually make Instance 8 instantiate this container element that was wrong when you create a new applet Actually a new container for the applet and then you set the new applet value You're not actually changing any value. You're just adding a context property So to actually reflect reflect the change in the applet. I'm not any more passing applet variable Appear where is it? Where is it? Where is it? Come on? I Will find this okay in here the new element is not longer applet is applet But context applet and then there is this function which is component uncompleted and this is when you're done And you're completed the component Then you instantiate the applet to be inside of the container and you set the applet Property of the container to be this new context applet and This made half of the things work right away, which is very nice It also means that off of the things were not working What's the idea behind of all of this messy stuff? So the idea is this is the container The container whoops the container. I'm doing a clone of this element each time I add something to the panel Okay, and I do that Here new element and then I insert this new element inside the applet's model And when I insert something inside the applet's model it create a new container element And whenever that happens now we call this Uncompleted function, which is when your clone actually is completed and then It says okay, you remember that context applet did I give you up earlier Which is the actual applet inside the container now the parent of that applet is the container It should be as big as the container and course field means as big as My applet is the context applet and then a lot of debugging stuff Which can actually be thrown away because everything works now What could am I actually throwing away thanks to these changes well look at here so see This function remove applet Well, it's useless It's gone insert before no longer needed insert after Not there anymore Sorry about that. I forgot this closing thing Insert at index not needed anymore Whoops too much. Okay Move well this one is actually from me and we'll see later why I need it index at coordinators I'm going to actually delete this whole part of this function But how you haven't done that yet. I'm working on it. That's the next step But it will be thrown away Update margins is needed, but pretty much 90 percent. Okay, no time 75 percent of this file was just removed and Why did I do that? Well First of all that could was very ugly. I didn't like show it to you fully, but that was ugly and Now if I want to add something to the panel, I can just say as I do here insert in the model of the applets At the right position the new element Sometimes the right position is in this case as an example What I'm missing here the Dean's the DND spacer Sorry is the element which actually shows up in the panel to show you where the applets the applet is going to fall when you drag something over the panel and Well, basically it's saying okay take the index Which is I off the spacer and that's where you're going to put the element and then remove The element and the index of the spacer, which is the spacer So add something in the index of the spacer and then take up the spacer or in here insert the new element at The index at this coordinates. So it actually reads up. What's in the coordinates that I gave you and throws the stuff there And that's very nice and everything but I still needed a move function somewhere Yeah, layout manager move What's the what's the reason then this okay? So this is inside on drug move So that is when I'm actually dragging something over the panel So when I'm dragging something over the panel, we move the spacer Which is again the empty space to show you where that place is going to fall We move that to The element at the coordinates of the mouse So that's rather simple. We move the empty spacer underneath the mouse Why did I have to do a different implementation of this inside of the layout man? It's not a different one, but it's an helper function inside of the layout manager The idea is We need to do this bit of code and we are going to often need to move things around So it's actually better to do a function and the idea is that if The index we're moving from is smaller to the index we're moving to Then we need to take one off from the target index. Otherwise, it's fine as is In here, we're doing the actual move function in the model which actually moves the applets This is just a move helper function that takes this minus one off When the from index is smaller to compare to the two index Why is that because if the from index is smaller than this one? It means that the element we're trying to move from is to the left of this one, which means that this one is counting in the you know indexes of the target and We don't want that to happen Ideally, we should like think of we are removing this element from the list and then we're adding it back And if we remove it, it means that if it's on the left of this element This element would shift left from one of one spot So we're adding the minus one. This makes things work and I'm explaining to you like Easily, but it took hours and then there is finally the config orderly Where all of the rest of the magic happens as an example when you're dragging widgets around this There is this very ugly thingy which is very ugly and I need to fix this which is This thing is so what we're doing here This is when you start dragging an element when you press on the mouse over an element to drag it around so We insert inside a model the police soldier, which is empty space the same size of your outlet. Okay then Current outlet equals outlet container component create object root outlet item outlet. Well, what's that? Okay. Okay. Let's calm down. The idea is we are When we start dragging an outlet around We actually need to remove it from the panel and to do that We need to destroy The container it was in we cannot take off the container from the panel as it was We need to destroy the old one and that means we need to create a new one Which is this one. So we create a new container outlet container component And to create this new one We are giving root as the parent element. So we are creating it inside of the root element That's fine And then we're telling him that the outlet is the item outlet and please note that in here in here Sorry, I'm not actually Saying context outlet, but just outlet and that's because Um I forgot but it didn't work context outlet didn't work And because of that, we also need to do the same things that we did with the Contacts outlet now, which means that we have to set the parent to be this element It needs to be as big as this element And then we also need this new Container component that we created to be the same exact size And location As the old one the old one is called item. So we say so we say the x of this equals the x of this The y of this equals the y of this and so on which is ugly And the but that's about it. Then we just remove the old one and that's it It works. It's not pretty by any mean and I should do a pretty way of actually doing a copy of a container component But once that is done It's done As I said, the only thing missing and this is actually interesting. So let me show you Is this whole part. Okay. So what's happening? So if we ignore All of this let's let's pretend it doesn't exist What we're seeing is okay. What is the index of the element at this coordinates? Okay, so Okay, the interest part is this child equals layout child at x y. So basically we're saying, okay take the child this element, uh, sorry at this coordinates and then If we are on the left side of this this whole parentheses says if we are on the left side of the child We return its index if we are on the right side We return the index of the element plus one because we're on the right sounds very easy and this part only says, okay, if we are or are on Horizontal panel then just take it at the middle of the panel instead of up down just for sure. It's probably not needed But then if it it sounds simple because we're just saying take the element at this coordinates and return its index That's it Except it isn't because all of this what's all of this which I want to take off Well, if you look here Well, you have a clock here. You also have a clock here. We have two Between the two there's some margin As you can see here context menu Sorry a tooltip over the clock here another tooltip at the very middle There is no tooltip and okay, I can sorry. Okay very middle No tooltip because there's some margin between one outlet and another and if For any reason we were trying to get the index of the element at this coordinates We're exactly between two outlets. We're inside the margin and inside of the margin. No element exists so what we're saying is If no element exists then Well, there is a return zero which I added but of course If we ignore that Then we need to iterate over each element and check whether if we make it a bit bigger Then it actually fits also the mouse position. Basically. We're removing the margins and checking which element the our mouse is actually in Sad but necessary Does it work? Yes Kind of because there were bugs related to this. Is this ugly? Yes. Also Will it die soon? Yes, because I will find a solution Like as an example, I could make a Transparent element that's actually bigger than the outlet Just this is the outlet Can you actually see this? Like this, this is the outlet And then I make an element which is bigger. So if you get inside of the margin True it might be outside of the outlet, but it's still inside of the transparent element. Maybe that works. Maybe not I will find a better solution than this Worst case scenario scenario I actually make The outlets bigger And then in add back the margin inside of the outlets. That's very ugly But that can't be done if necessary What's for sure is that this code will die. Actually, let me just take it off now In no way am I interested in actually having this in my code Now this is my code. So take it off This update margins function looks very complex and ugly And it's because I wrote it months ago It's kind of necessary for now. Hopefully I will refactor it later and let me actually show you This ugliness This ugliness. This is so ugly And it's me like I wrote this months ago. It's so ugly. I can't believe I wrote this with a sane mind and I blame the the reviewers for making this It's a mess of code with which nobody can understand not even me and nobody can understand this I did put like four lines five lines of comments one two three four five Thank you Niccolò, but it's still a complete mess Maybe it's the only solution. Hopefully not Next steps So as I told you fix that thingy of the coordinates getting between the outlets and This thing that I said before that which I just forgot about what was that Ah, yes, this very ugly part. It needs to be written And then I can actually get back at Predifying the animation code, which if you remember I gave up on last video because it was ugly But that's it for now. Let's show the ending Yep, that's me. That's my face. This is The polish I gifted my girlfriend. I'm currently recording there Still on my voyage my travel on my Thingy to try to fix the plasma panels as much as possible I'm receiving lots of nice comments as always. So I'm super happy And if you want to join this community of people giving me money If you want to join this community, let's take the money part off You can feel free to use one of the links to my Left your your left. It's your left. It's my right Yes, and that's it. See you next time I hope that you like this thingy of rewriting the whole panel because I'm putting quite a lot of effort inside of it Regardless of the donation like that's nice, but I'm actually doing this because I enjoy writing panels good. Honestly, I do Bye