 Yesterday I was having serious problems fixing that damn bug I talked about, if you haven't seen the video go watch it, but after a while, well I'll tell you what happened, I spent another hour trying to fix it and I gave up, like honestly there was no possible solution and I even like got even stranger outputs at a certain point, the placeholder element was actually smaller than the area that it was occupying, somehow I don't even know what was going on, so I gave up. I went to the visual design KD chat and said okay people I'm going to delete the whole panels code and I'm going to write it from scratch because I can't stand it and after a while there's this person that pop up and said what was your problem again and I explained and I vented all the issues that I had and at a certain point they were like you're using width and height in a grid layout you should be using implicit width and implicit height and I was like wait you're telling me that all I was going all I had to do was to replace width and height with implicit width and implicit height and yeah and that was it, like I checked and it worked. Let me actually show you this thing in function so how does it work. We get back to our nice placeholder element and we can see that we have implicit width is current toplet so if there is a current toplet it is the width of the current toplet and that's it, the implicit width and that was literally it. Now we can see that if we go into edit mode we drag the system tree and then this one everything works except for when you release elements because they're messed up and that's what we're going to investigate next but let's just appreciate the fact that I spent like three hours and I think that all I had to do is know that you know if you use a grid layout like grid layout this one here we have a grid layout which is called the current layout and if you put elements there you need to use implicit width and implicit height. I didn't know that now I do and by the way I received lots of useful comments trained to help me debug what was going on. Some of them were actually really interesting and I spent some time looking into them but unlikely it was as simple as this so okay let's see what's the issue now because there's always some issue to fix and it is the fact that drag and drop is not working anymore in the form of actually dropping things in the right place and that is because I try to implement a suggestion from I don't remember who like this is working it's nice but in general it isn't so I had this suggestion which I thought was pretty cool and made sense which is okay instead of saying okay you need to switch the place of the placeholder when you actually go behind half of the applet you're dragging on top of let me make an example let's say that I'm like dragging this show desktop around this show desktop is moved on the right if it's on the right part of the system pray and on the left if it's on the left part of the system tray you see now that it doesn't work but before it did so this suggestion that I got is instead of making the placeholders switch when you go past half of the applet make it go the other way around when you reaches two thirds which is makes sense like if you're like dragging around here don't switch yet maybe it's just like a miss click or something don't switch yet but if you reach the very end two thirds then switch it that broke everything why does it did it broke everything so let's first of all revert the changes that it did which is pretty easy we just need delete this code I'll explain what it does in a second and like this and it's as before so what this is saying is if we are on a horizontal panel forget about this one this one is interesting if we are on a horizontal panel and the position of the mouse in the item is less than half of the width so on the left part then go put the placeholder on before the item otherwise else put it on the right and by the way in the last video I talked about this property as well which is placeholder dot parent equals configuration area I actually understood why it was needed so thumbs up for that it is resetting the parent element for the placeholder because if you want to insert something in the layout it has to not be in the layout in the first place so since placeholder might already be in the layout you first need to take it off put it somewhere anywhere and then back to the layout so that actually made sense and I added a hopefully helpful comment so now that we've reverted to normal let's switch back and make install this new version and see if it works okay and let's try to drag this should I stop around this is on the right and now it's still on the right so it's not working which is very nice it's always very nice to have something that's not working I think so you can fix it you can see that we are dragging it on the left but it still pops up to be on the right which you shouldn't what about this one same thing happens you only manage to place it on the left when you go through the entire applet which is wrong so what's going on question number one is this code inserting the placeholder before the item we're going through actually being run in the first place console.log the answer is yes so that's pretty sorry yes so that's pretty easy to know let's try it out by the way if you're wondering how do I actually manage the console to stay there when I go into panel edit mode the trick is to make it set it as always keep above other windows and that works so let's actually go pick an applet and then drag it to the left here hello hello nothing happens like you see a lot of densories yes but they're not coming at the right what the hell is going on there look at here okay now it's on the left now it's like dancing hi I am the dumbest developer look at here look at this beauty I wrote property ball is horizontal so in theory this it should be checking if the panel is horizontal ball is horizontal plasmoid from factor equals plasma core types vertical now how stupid sorry so we were saying horizontal now it should work now it should work so the weirdness that we were facing was because for because it wasn't actually checking if it was was going left or right but above on or underneath of course that doesn't work at all so now now we know why so let's try again we compile and run and now now it should be working flawlessly so like this like this like this and it works maybe you saw that there was a weird glitch at the beginning but that's unrelated and we'll fix it later on so we we can actually go here and remove first of all the console log thank you and now we can actually re-implement what I was saying so like this and this condition pretty much the same but else if we align the conditions and this time if it's more than two thirds of the length two thirds then it should switch otherwise it shouldn't make sense doesn't it so let's actually do this let's go for it whenever I change some code while posing OBS I feel like those Minecraft streamers doing like some mining of camera and then they come back with diamonds and stuff so why is it everything broken nothing is working anymore what did I do I broke something let's go see the log there should be some errors somewhere this is unrelated blah blah blah blah blah blah blah blah blah blah blah here expected token on line 72 sorry about that line 72 here expected token comma what what's wrong we're missing a close aren't we one two yes now it's right right let's try again okay now I bet it works yes it does let's actually see how it works so here it doesn't switch here it does here and it's very nice so you can see that it stops being so flickery guys left and right but if you're dragging it on the right it does ignore that weird flicker but it does feel more natural than before I believe if like with before implementation if I went to the middle of the test managers that started doing this you'd see the panel green but now it doesn't so thank you for the suggestion I don't remember who you are but I do remember the suggestion so sorry about that next thing is what hell is going on with that element I don't know if you saw it they keep they keep going to the far left and then going back and that's because currently I deleted lots of code that stopped applets from doing dump animations and that was before the code was that was because the code was very ugly so let's give it a look and it is all year it is it still is very ugly like I really don't like it so I think we'll delete more and then try to guess how to get it back in a prettier way so this is the container the container is the an item with the applet inside of it and in here it has some properties it has first of all an applet inside of it then there is an odd x and odd y which are set to x and y y we'll see why when x changes if we are moving for resize then we are no longer moving for a resize and we stop otherwise the trial translation x equals odd x minus x and translation y equals odd y minus y what's going on well basically we're setting the delta in x and y to this translation object that we'll see what is and then translining running equals true so we are activating animation called trans and then we were set of course odd x and odd y to the right values and same for y and then there is this translation item which is a transform and it is a translate element what does this do well it's an element that actually translates the parent in some direction and then there is an animation that targets the translation to the properties x and y what's going on well the idea is okay so the element went from here to here so we actually move the element but we also add a translation property so that it looks like it's still here and then we animate the translation to make it go there very ugly I don't like it let's delete all of it okay so number animation this is necessary probably because when we insert an element it screws up something probably yeah go away all of this and what we're going to do is actually animate directly the x and y properties and I think there should be a decent way to do this I'm pretty sure so blah blah blah is in tight target target parent I guess or container properties x and y to nothing like this this should work probably I mean it shouldn't but it shouldn't like die either so we can see what happens okay hello okay animations are broken nice that's what we were looking for right broken animations how do we fix this well I probably used the number animation wrong I always get these things wrong so let's take an example from the last change I've done which is in desktop package contents views panel and it's somewhere here number animation target property property is opacity to zero now this is a transition I don't like it and why is the good that I wrote not here is it in some articles that haven't landed yet yes of course this is from the floating panel thingy that hasn't actually landed so let's give it a look yeah it was behavior on x number animation duration blah blah blah so about that I never learn okay so let's get back to the code we were looking on where is it okay it was actually this behavior on I totally know how to spell behavior like this number animation which now only needs this one this one not this one not this one and then same for why why why not like this let's try again again should be awfully broken but we're here to fix okay hello oh my god what is this are you kidding me I mean look at this it's like it doesn't want to move look at here come on come here what the hell is going on why you're not would you do that oh my god okay hello at least come back to the panel this is so interesting though like it it only moves by I know why this happens yeah okay maybe I don't maybe I don't but this I know what this might mess up with in here we have this current up with why plus equals mouse okay but why but why why don't we just say current up with why equals mouse why why not what's the idea sorry so basically every time we move the applet we are changing the y by the moment the delta y of the mouse and the issue with that is that every time we set the y property again for the applet the animation resets that's my guess but if we only set this I don't see why it shouldn't work honestly like I don't see why we should do this whole last x and last y mess in the first place now we can actually take these properties off entirely my end target is to slowly delete everything from the panel and like very gradually delete everything there won't be a panel left after I'm done with that jokes aside edit mode let's see if not works okay oh my god what the hell is that I mean come on just say that you hate me what is that if you go slowly you don't is something resetting the x and y of the applet if so why it only happens if we move only happens sometimes especially if you got a place on the left and guess what how on earth do you break the panel just by adding an image like come on I just added an animation of property you can't do this to me what the hell is going on what is this why now I can just drag anything anywhere it doesn't make any sense whatsoever and is there anything still using the help us instead of actually setting the right position for whatever let's search for this now okay let's search for current applet X okay these are the only two occurrences and if it's not this I have no clue whatsoever what it could be honestly how do you animate elements is it because of the grid layout again is there any documentation on this okay I think this example might be interesting to us so what it's saying is that he near instead of doing this we should actually go for a kind of translation approach so transitions transition and then we go here for number animation and basically we should be targeting properties proper TSM XY and blah blah blah you know the easing type and stuff I need to copy paste from here like this okay so that okay so this is what this random web pages talent is not around the web pages like the documentation this is what the good documentation is trying to tell me I don't know if it's for this particular use case or if I'm just messing up but we'll discover it soon moment of truth I guess okay hello oh my god what is this this is terrible there must be something going on when setting like X and Ys this must be something going very wrong I can still put things on top of each other wait what if it's only used for states that would make sense trans transitions between states no translations that might make sense however that doesn't explain other world behavior that I was seeing and what happens if I just get rid of all of this no animations anymore what happens then like does it just not animate or is it broken I think it will be broken actually let's try it out and yes this is pretty broken okay so we've done something very wrong and potentially it was that and where is it where is it here potentially it was that this although I don't see why like honestly I don't see why this would be an issue whatsoever current tablet why eagles miss Y okay okay I understand I understand what I'll figure this out so as always we stop the video half through any issue that I can solve because that way that way we can actually you know I can work on this without explaining and hopefully that leads me to a quicker answer but not always the case but still and big thanks to all the names there I still get confused by this mirror thing and they really do give me the motivation to do this like every day I'm publishing videos every day and since I've done that I've received a boost in like patterns and stuff so I'm really happy to do this and hopefully I can continue to do this if you want to join this club then links on the left your left my right and that's pretty much it see you next video and I'll probably took a bit about the you know third video of Linus because why not and then back to coding and trying to fix the panel