 Hello! It's been a while since I last did a devlog explaining what I'm working on for Kitty Plasma, but it's not actually like I stopped developing, kind of, because I had exams, but not completely. I'm still doing stuff and I think I'm almost done with a new merge request and I want you to see it. And it is still the merge request about panels, about rewriting panels, and it's been like this for months, but I'm almost done. I'm almost done, which is good news to say the least. Now, what has slowed me so much down is myself, luckily. That has to be said. You need to know that a lot of time ago I had implemented this blue line that you see around the elements. This is called margin areas and it's a cool feature, which I don't regret implementing at all. However, what I do regret is implementing it wrong. I mean, not wrong, but the code is kind of ugly and, you know, I'm my worst enemy. And so I'm rewriting it. So what was wrong? Let's address it. So how this worked is that every time you moved an applet, like drag and dropping an applet like this, now, every time at every single frame, I would call a function which is called update margins. Now, by the way, if you see some flickering, some elements disappearing, that's because of the screen recording. It's not KD Plasma. I'm sorry. Now, what this function does update margin is see the first element and give it a small margin and move on. Second element, small margin, move on. Third element, oh, it's called margin separator. So we actually need to switch to the next margin, which is big. Then this element is big margin, this element big margin, and all of the way until the end. So all of these elements get big margin, all of this small margin. And this was kind of necessary. I mean, every time you move an applet. However, that wasn't an amazing idea, especially because these elements, this blue line were actually destroyed and then completely recreated every time I called update margins, which means that at every single frame you moved an applet, all of these KML elements were destroyed and then recreated from scratch. Now, this has almost no impact whatsoever on performance and battery because drag and drop in applets is such a rare scenario. However, it could have been better and it resulted in clicker ink. How did I address it? Well, you could say that from a technical point of view, like probably from a performance point of view, my solution, my new solution is not much better. I think it's a bit better. I think what happens now instead of creating these elements that are like super long, look at here, look at the bottom right. So you've got this blue rectangle that stops here and goes from here. This is not like a custom shape. It's actually a rectangle which goes from here to here. Now, what I was doing is I was doing some super hard mathematics to actually draw a single rectangle, just one, which is this one. What I do now, which is much, much easier, is that each applet draws its own rectangle. So here, this applet here, the show desktop draws a little bit of a rectangle and then the system tray draws a little bit and then this applet draws a little bit and then this applet draws a little bit. So what you see as a single rectangle, well, it's actually five. Which could be not amazing for performance, I think, because I'm doing five KML elements instead of one. But in theory, it shouldn't be an issue and it's so much easier to actually implement this. Let's actually quickly, quickly give a look to the code to see how it's implemented. Now, before, before my patch in made dot KML, I had a super long function with to just calculate how to do rectangles. Now, what I do is that I take this element, which is called the applet container component, which is an applet, just the KML element around the applet. And down here, I've got this item. This item, it doesn't have a name. If it had, it would be, no, actually, it does have a name. It's just in the wrong spot should be here. It's called the margin highlight elements. And it contains four elements, four rectangles, why four? Okay, let's go back to see the panel, why four? Okay, so most applets actually just have two rectangles, which is the one at the top, the one here as well, the one at the top, the one at the bottom. However, there is the margin separator, which actually requires four elements, which is a rectangle at the top, rectangle at the bottom, triangle at the top, triangle at the bottom, that's four elements, two rectangles, two triangles. So how are these defined? So we got these four elements and this one and this one, they're called fill. Now the fill element of the margin highlight SPG is a rectangle. So that's how I'm drawing rectangles. And then there is top right and bottom right, which are the triangles and actually draw them. Well, it's pretty easy. I just have to mess a bit with margins. So what I do as an example, let's take this rectangle as an example, what I do is for the top, just go as top as you can for the left, go as way left as you can for the right, go as way right as you can. And then for the left margin, actually go negative. So you need to extend over your borders by how much the row spacing divided by two, the row spacing is the spacing between the elements. So by taking that spacing, I divided it by two, well, you get the right amount of spacing to extend and make it look like it's just one rectangle through all of the outlets. Same thing for the right one. For the top margin, we actually need to go negative that as well because we do have some margin on the top. And what I say is that just remove that margin. We've got thought margin, which is this variable here, get margin top, just go negative on it. So we actually remove it. And for the height, then we use the height of the margin, simply enough. Now, there is a couple of false true, which you can see documented in this function, sorry, this function. And it's just about making sure that we get the right amount of margin. Don't worry about the details, but it's actually pretty easy. Now, another thing I implemented is if you right now open up the panel, oh, actually, this is funnier. Let's say this one first, even though this code is amazingly perfect, sometimes I still had one pixel that was not covered by any rectangle. So I had this rectangle, this rectangle, and there was just one pixel in between, which was so annoying, because I thought I had done everything perfectly. And I kind of did, kind of. And what do you do when you kind of do everything right? You round. So what I had forgotten about doing in here, I was missing the math dot round. So the width of the elements was like, it's 45 pixels dot 2478. And that 2478, 0.2478 eventually added up to be one pixel. And that one pixel was not covered by anything. I just had to round the width. That's it. That was literally it. Just by rounding the elements, everything went fine. Thankfully, I didn't lose too much time on this one. It could have been worse. I was prepared for worse. What else? Okay, so another cool one. So you know that if you go into edit mode, you've got this pop up, which is icons only task manager. And if we move the mouse here and wait, it disappears, which is pretty cool, isn't it? Now what's the issue? If you've got this pop up, and you move the mouse, and you move the mouse away before my rewrite, the pop up wouldn't actually disappear. Why is that? Why is that? That was very annoying. And thankfully I fixed it. The idea is, so you've got the pop up, and that makes sense. And they could say that if the mouse leaves the pop up like this, then you wait for a couple of seconds and then you close it. But they could didn't say anything about the mouse leaving the panel. When the mouse left the panel, nothing happened. So how did I fix this? So let's see how that translates into code. We've got here what's called hide timer. And the hide timer, which is defined blah, blah, blah here is a timer. It lasts, I think it's 2.5 seconds, something like maybe less, I don't know. And when it's over, when the timer is over, we set the current upload to be nothing. And that actually makes the pop up disappear. Now to make sure that the pop up disappears, we need to start the timer. And this timer was started here. This is the main item of the dialogue. So we've got the dialogue, which is the pop up. And inside of the dialogue, we have when the mouse exits the area, then you restart the timer. Okay, this didn't work. What was missing is in the panel, which is this element here. I also needed to add, when you exit the panel, you also need to start the timer. Actually, it's restart. I don't know the difference, but it was restart down there. So it should be restart here as well. And that was it. That was literally it. And that fixed it. Then another thing, if you right now go into edit mode in the panel, and you start clicking elements around like this one, and then this one, and then this one, and then this one like this, what you will notice is that sometimes there is a bug. So maybe let's say you click an element like this, just clicking it, and then releasing. Sometimes you will see that, oops, sorry about that. Sometimes you will see that it does like this. And I was like, what? So what's the issue? So we've got an element. And when we start a drag and drop in this element, behind the element, we add a replacer, which is empty. As you can see, there's nothing behind the element. And it's just as wide as the element you're drag and dropping. So it's a fitting replacement in theory. But it didn't actually work. Now, this is something I had already lost our son already. And I thought I had fixed it thanks to the help of some people too, I think months ago, I don't remember anymore. Yes, I think the solution was suggested to me. I didn't find it by myself. So I was like, oh no, here we go again. What was the issue? So let's go see the drop in replacement that we have, which is called please folder. Now, the idea is that we had a layout preferred with to be the width of the element. The code was like this, layout preferred with is the current applet. If we have a current tablet, then it is the current applet with otherwise it's zero. Okay, what's the issue here? It's very hard to catch actually. So the idea is, let's remove this code just to show you why this is wrong. So what this does is, we've got a current applet. This current applet has actually three different widths. It's the preferred width, the maximum width and the minimum width. The preferred width is the width that you would like to have maximum, minimum is, you know, maximum and minimum. So when you add the current applet to the panel, the actual width of the panel might be none of those three values. It's just the actual width you ask for thought. Maybe I give you something more. Maybe I give you something less depends depending on the context. And here I do the right thing to actually ask for the width. Because if I asked for the preferred width, I would have literally no guarantee that this is actually the width of the current applet. Because preferred only means that you would like that width, not that you actually get it, but the width property is the actual width. So worst issue is it was still wrong. And now of course you see it because there's code down here. But the idea is that I'm setting the width of the applet to be preferred width. So the placeholder is saying, please, I would like to have the same width of the current applet. And that doesn't mean that it will actually receive the same width. Just like the preferred width of the current applet doesn't mean that you will actually receive the same width. So what was the fix? So to make sure that the placeholder and the current applet's current applet behaves exactly the same, all I had to do, let's revert all of the changes, was to say, okay, so we've got all of the three values, let's stick to width right now. So sorry, let's stick to these three values. I actually would like to have the same width that the current applet would like to have. I have, has a maximum width, the same maximum width that the current applet has. And I have the minimum width to be the same applet, the same width, minimum width as the current applet does. So instead of messing with the actual width of the current applet, we don't even try to have the same width because it would be impossible to tell the layout I want exactly this width. I just say I want the same width, I want the same maximum width, and I want the same minimum width. And these three things combined actually make, sorry, actually make it. It does work now. So it is better, hopefully it will even get better. Like there's some things remaining. And if you want to help me out actually do these things, then please do a donation because it really helps both in improving my channel, which I spent a lot of hours on, and also working on KDE, which you also spend a lot of hours on. And that's a lot of time. So if you want to reward the times, the time that I give into these projects, a donation is very appreciated. And about that, I gotta really say thank you to all of those that did give me donations because it really helps. I think I say this sentence every time, but I mean, it's true. What do you want me to say? Also, subscribe, that sort of stuff, put likes. I mean, you've probably closed the video by now, right? See you tomorrow.