 So, for those of you that follow my titlebar tutorial, we ended up having a program something like this. So you can move it around, you can maximize, minimize and everything, close it. But the main issue and what people requested is that you cannot resize the window. If you move the mouse to the corners, like you don't see the usual arrows that allow you to resize it and you might be okay with that, but in some other cases you want to be able to resize the window. So let's go ahead and create some handles that we can drag and move the windows around and make it bigger or smaller. To do that, what I'm going to do is to make a small room here at the bottom. I can select the graph edit which is the node we use here and we need to have just a tiny bit of space so we can detect the mouse and everything and let's create a control node which is going to be our handler. Okay, we have it right here, let's make it, okay, could be using the layout, use the bottom wide and make it a bit taller. Okay, so that way we're going to have always that part covered with this control node which is the one that we're going to be using. So with every control node you have a section here in the inspector which is mouse, you have the filter which remember this will tell if the mouse has to stop every action and don't continue passing it by to the elements behind it. Ignore, which will just like the name says ignore it and don't register any of your inputs or pass which will register everything and continue sending the signal to the elements under it. For this one I don't really mind like we don't have anything behind it so stop it's fine but here on the default cursor shape you can choose what the cursor will look like when you hover it. In this case we want to have the vertical resize cursor so that way when I enable it and I try the program and I move the mouse there I see the resize. Okay, it doesn't work magically like that so even if I click or I do anything with it like it's not going to change but at least we have the cursor native to your operating system. Now let's add the code to make it work. Let's attach script handler.gd. I'm not sure if I'm using this word right handler, I hope it is. And the code is going to be very similar to what the title bar was. We're going to have a follow, we're going to have like the starting position of where things are going to be but the main thing that we're going to do with this is instead of changing like if you remember when you click here we are changing the window position instead of changing the window position we're going to change the window size and to do that we're going to have to track what is the current size where I'm clicking and if I'm clicking or not and when I release that it will stop following and you know the height of it. So let's start with the signals. Let's connect the GUI input which it will track everything let's connect to the handlebar and here let's do the same as we did before if the event which is what we're getting on this signal is input event mouse button so we are ignoring everything that is moving the cursor on top of it pressing any key or anything and if the mouse button in this case the event is one so we're pressing the left button we want to get the mouse offset which will be the local mouse position that way we know if we click it more on the left on the right so for this variable I will need to do it a global one let's declare it here mouse offset okay it can be empty it will assign its value here like its type now we also want to have the window position we might cover that later on the tutorial we also want to have the window size which is what we're gonna be modifying and we want to toggle if we are following the window or not we're gonna use the same name for following because we want to know if we have to follow the mouse input or not and since we want to toggle it we do this which basically means the opposite of what this is following is going to be also one of these variables but it will just default to false okay okay window size as well and now everything should be fine okay so since when you press click the first time you register one of these events it will set the following and when you release it is going to be also a mouse input event from left click so we want to set it to false okay now what are we gonna do when we are following so in the process function remember this function happens every step actually we have it here but we're gonna remove this we don't need it okay if we follow so if we follow now we can do the changes in this case it's going to be the os window size and since we are only resizing vertically let's do the y okay you can do this with every vector two like when it's a vector two variable you have the x and you have the y variables in this case the y is just the vertical size of the window and this gets a little bit confusing okay but we want to know what's the global mouse position which is where the mouse is like on your screen and we want to get the y position because we are only resizing vertically we also need to know the distance of this element to the edge and that's a variable that we need to get on ready why is that important because imagine that you want to have the handler over here just here let's say you need to know what's the distance between here and here to calculate if you are like making the window bigger or smaller like when i'm clicking where i'm clicking how far is that from there because if we are calculating this y position the window frame will automatically jump here to where our mouse is so we want to make it go here let's undo that change let's get it already let's call it distance to edge let's get it on the ready distance to edge equal to os window size y minus rect global position y this is the global position of this control node we have this is the size of the screen so if the height is this let's say is this part of the screen and the element is over there which is get this distance to the simple subtraction now let's add that distance to the modifier here so this stands to edge and it's very important that we need the mouse offset variable that we created the y version we want to remove this which is if you click imagine this part this bar over here is all the handle bar if we click it here or if we click it here it are you know there are different values on the y axis so we want to get all those different inputs we also want to change the position of this same element this is more flexible in this case i don't think that we really need it but because we already set it on the layout but let's do it anyway rect position y os window size y minus distance to edge okay so i think we have everything now let's try it out let's see if it works if we can resize this okay no it doesn't work and you might be wondering why is this happening well the main issue is that with using the layout and all this code that i'm writing having it as an anchor here like when we select this element here the anchor having it like this generate a lot of weird problems for me so what i do is i do it manually and i reset everything to zero i move it ignoring the layout thing and i just place it there since i'm using the code to make it go up and down this should be enough for you to work let's try it out again without the layout thing and yeah we can resize it vertically as expected so now we have a window with our custom text bar and with the with the vertical resizing of the window so let's add the other two let's add one here to the left and one here to the right and just so you know this doesn't have to be like this you can do it in the shape you want if we move this let's let's hide the graph edit imagine let's this is another kind of program and let's say we want to have only this as the handler let's add a color rect which is going to be the full rect and it's going to be like here like this i don't know green yeah this green whatever so remember just if you do this use the ignore so we don't get confused the the cursor by any of this but yeah the handler here so now if i click in that part of the window you see like we have the resizing yeah and if i click on the rest it doesn't have it so if you want to have like a custom layout with some like special control where you can drag it from a position you can do so but if you want to have it full size you can do it as well let's hide this so we don't have anything other than our title bar so this is more similar to what a window for your program might look like and you can make it like that and if we go full screen or minimize it and then we maximize it we have the same size it keeps everything as we had it before okay so now if we duplicate it and let's make so we cannot select the children let's create one for the side for the right side okay let's do it like so but what happens now if we test it you will see that i can i'm resizing the side that is not the one that i want so i have to go this again remember that the green thing you see is just for reference it doesn't have to be like that on your program you can hide it anytime or you can you don't really need this right so let's modify the script so you also work to resize the right side first of all we need to check if it's indeed the right or the left side let's create a variable export it's going to be a poolion and it's going to be left like is this the left let's say false by default and the same with is this vertical or not let's say true because it was the first one we did since we started doing the vertical let's assign it like that okay now that we have if it's left or not if it's vertical or not we can save it and when we select the nodes you see on the inspector here the values is this the vertical one yes is this one the vertical no it's not it's not the left either that's gonna come later let's do the right one first okay now we need to also track the instance to the edge but instead of using the y values we're gonna be using the x values so if it's vertical we want this part of the code but else that means it's not vertical let's get the distance to the edge to be the position of this rect global position x and let's subtract the window size x okay so now that we have the distance let's now make the changes on the process function i'm gonna add a couple of empty lines so we can scroll it to the middle of screen okay okay so it's following yes if it's vertical we want to have this but if it's horizontal we want to do something else in this case instead of resizing the y we're gonna resize the x and let's get the global global mouse position x minus the distance to the edge minus the mouse of set x okay so we have that and we have to now update the position remember if we don't update the position let's see how let's see what happens like i'm resizing the window but the handler still is still there so if i left it like it's not updating this one we are updating the position and if we leave it somewhere we know what it's always going to be there also we want to change the cursor here we have the vertical cursor let's go mouse vertical resize horizontal resize okay and now the position to do that let's add here so let's check again if it's vertical and false and let's also check if it's not left so left equal false okay and rect global position x which is a position of this element it's going to be the same as the window size x plus the distance to the edge that we had calculated before okay so the rect position you already know that one the window size is like how the width and stuff and the distance to the edge is the same like how far is from the edge or not i'm doing this like this which is fairly simple to understand if you just read the name of the variables but you will see now that we have a main issue right now we've been modifying the size of the windows by changing the y and the x values but if you want to do the resize again from the left side as well there's no way to change the x value of the window size which is this one but from starting from this side so what we're gonna do to make the left handle is move the window and at the same time that are we moving the window to the right we're gonna be resizing the window to the left so that way it will create the illusion that we are resizing it from this side instead of like this it's a bit confusing if you want to try it i really encourage you to try to code it yourself so you understand it completely if not you can just copy the code and paste it in your project but let's go and implement the left side now as we did before with this one let's create a duplicated version of this one press ctrl d now i move it here let's create another shape so we know that this works in any shape or form in any position let's now open the script let's now assign this is not going to be vertical but this is going to be left yes we want that and now inside the script let's fill out the gaps now here we need to check the difference for the distance because in this case we're checking this part and the size is the distance from the left of the of the screen in the left screen we don't need to check that so it's gonna be different so if it's left we want it this tends to edge to be just the position of this element and on the right the one we had since zero is the left we don't need to get the size of the window or anything the handler this stays the same we don't need to change anything but we have to change something here because there are two cases if it's not vertical we want to check if it's left or if it's right in this case the right we already have it and left is the one that we have to do right now so first thing we're going to do is move the window to the other side i took this part exactly the same as we had it on the other tutorial so this is the same code that we used for the window moving which is changing the position of the x to what the current position of the window is plus the mouse where you are moving it removing the offset so if you click it in any other place or whatever and the this end of the to the edge to the element that we are clicking you can check it for my information you can check that tutorial on how we did the custom title bar and if we leave it like this you will see that when i drag it from this side everything moves so the first steps is done now we need to make the window smaller to make it seem like we are resizing it like this okay so os window size x needs to be the window size x of when we click it remember that when we click it we are saving this value and it's going to be plus the window position plus x minus the window position x that we have so this seems very confusing but the size here that we are saving that we are storing and we're using right now it only updates first when you click it and also when you release it so we have a point of reference we have the reference of what the size of the screen and the position was before modifying it since we are modifying it here we want to know how it was before modifying it and we are applying that to the current size that we have let's try it out and when i resize it it moves like expected so now we basically have a window with a custom title bar and the resizing which works exactly as you expect them to do a couple things you have to consider as you can see here if i resize the window more than the size of the handle that we have here the user will not know where is it and you will have to resize it somehow so as homework you can try to make this element as well as we did move it to the position that we wanted make it grow to the full height of the screen or you can just do it on the editor like making it super big so you don't worry like if you resize it or not you're gonna have like always a handle here and second of all and another homework for you if you want to try it is we can do the same thing but with the diagonals so not only having like the up and down but also having these corners over here which will be one here and one here you can also do the same trick with it with the left controller on the top so you are gonna be moving the window up and you're gonna be scaling it adding more size to the bottom and the same can be done with the other corners so that's it for today i hope it wasn't so confusing it was very confusing for me to discover but i ended up figuring it out if you have a better way of doing this please leave a comment on the video or read it or whatever and if you want to download the code for this which is not really that much but if you want to download the project anyway you can donate to my patreon and you can download any project from there i really really really appreciate my patreons thank you so much for all of you that are donating right now it means a lot to me and i hope that i can do more videos soon thanks again and see you next time bye