Now let's add the last item inside of our sidebar besides the design of course because for the design sidebar we need authorized users, right? So we will only be able to do design after we add authentication. Before we do that, let's wrap it up by adding the settings. So I'm going to go ahead and go inside of my use editor. And inside of here, we're going to go ahead and add a couple of features.
So we are primarily going to focus right here in the build editor. And here's one thing I want to do from the start. So when we create the editor, right here inside of our use editor hook, I want to pass in a method from AutoResize. So let's go ahead inside of AutoResize here and in here we have a callback called AutoZoom. So let's go ahead now and also return AutoZoom from here.
So besides this use effect right here, inside of this hook we are going to return auto zoom. Like this. And then we can go back inside of use editor here and we can extract it. So auto zoom from useAutoResize. Like this.
So this auto zoom is this useCallback. And then we're going to pass this auto zoom inside of the build editor props. So we're gonna have to update the build editor props right here. So let's simply add auto zoom, it's a simple void. And now we have to do a couple of more things.
So first of all we have to destructure auto zoom from here but we also have to remember that we have to add auto zoom inside of this memo. There we go and now that we have this we can head back inside of the build editor and we can go ahead and actually add the methods that we need. So for the settings sidebar we're gonna need two methods. The first method will be changeSize. The changeSize method will also accept a prop.size which is very simply width which will be a number and height which will be a number.
Inside we're going to get the workspace using our getWorkspace helper. And then we're going to call workspace, oops, let's just properly name this workspace. With a question mark, we're going to add set and pass in the size and then we're gonna call auto zoom here and I'm gonna add it to do save. We no longer, we don't have save at the moment because we don't have any kind of history implemented at all. And besides change size, we also need change background.
So let's add this as well. In here we are also going to get the workspace and then we're going to call workspace question mark set fill and value. And of course this will be value. Like this and you can actually rename the size here to value so we are consistent with all the other methods. There we go.
And now let's go ahead and call canvas render all here in the change background and let's also add to do save. There we go. Now let's go back inside of the types, but this time in the interface editor and let's add the change background and let's add change. Is it a change size? It is change size and change background, But we also have to modify of course the props here, so let's copy this for the size.
There we go. And let's copy this for changeBackground. Perfect. So for the background it's just a value is a string, for changeSize, value is an object with width and height defined. Great.
So we now have the necessary methods here and now we are ready to create the settings sidebar. So let's go ahead and let's copy a simple existing sidebar. I recommend that you copy the fill color here again. And let's go ahead and change this to settings sidebar. Make sure you're inside of the newly created settings sidebar, you can close everything else and rename all instances of fill color sidebar to settings sidebar.
And now let's go ahead and let's change the active tool here to be settings because I think that's what we have inside of our active tool here. It should be settings. There we go. And now this is what we are going to do. So we have a value here so how about we do this.
Let's go inside of our use editor just for a moment here and let's actually return this the get workspace. Let's add it here. So get workspace can simply call itself, right? It can be named like this or you can go ahead and write it like this, however you prefer. So get workspace and now let's go ahead and write the type here for this so let's find the interface editor here get workspace will very simply return the following so what did it say it returns get workspace oh it returns it in fabric dot object or undefined.
I think it's one of those. I'm not sure if I'm correct so let's just see here. This method fabric.object or undefined. Great. So I think now we have the correct type inside of here.
Fabric object or undefined. Now let's go back inside of the settings sidebar. So we're not going to have this value here. Instead this is what we're going to do. First of all we're going to define the workspace to be editor?getWorkspace like this.
Then, we're going to define the initial width to be useMemo workspace.width or 0 and add workspace here. And now what I have to do is add a question mark here and I have to import use memo from react. So let's just move that to the top. Alongside initial width, we are also going to have initial height, which will focus on the height here. And we're also going to have the initial background.
So use memo again. It will have workspace right here and we are going to simply return the following workspace fill or we can default to just plain white color like this. So this is in one line. So great. Now we have the initial width, initial height and the initial background of our workspace which we are going to control with the settings.
And now we can go ahead and create some use states here. So make sure you've added the use state import from React and now we're gonna create the controlled instances of those values. So width, set width, and default is the initial width. Then we're gonna have initial height here so this will be height and set height then we're gonna go ahead and finally have background and set background use state initial background there we go and now let's add a useEffect element here from React make sure you've imported useEffect And what we're gonna do is very simply set width and go ahead and inside of template literals, add the initial width inside like this. And let's just see, yes, we are also supposed to do that here my apologies so let's do it here or actually you know since this is you know inside of use memo here's what we can do instead right let's just leave this like this for now What we're gonna do is we're going to turn this into string from here already like this.
So simply add template literals to both of this here. So this is how it looks like in one line. There we go. So workspace width, workspace height and we've now just embraced them inside of the template literals here. Great, so now initial width is a string and initial height is a string.
So we can now safely use that here and here and we can go ahead and pass the initial width here, set height, initial height, and we can add set background, initial background. And the dependency array will have the initial width, the initial height, and the initial background. There we go. And now I want to create the methods to change all of these. So let's go ahead and let's remove this on change.
Let's just leave the on close and let's create our const change width, which will very simply have the value, which is a string. And it will set the width to be the new value. You can copy and paste this one to be changeHeight and simply call setHeight. And then inside of here go ahead and create const changeBackground which will again be a value which is a string and this will first call setBackground to be value and then it will call editor changeBackground and pass in the new value. So changeBackground is the new method which we've introduced right here, which simply sets the workspace color to something else.
Great, and now let's go ahead and let's create our onSubmit method. So the onSubmit method will have an event, which is a type of React form event and it is an HTML form element. Now inside of here we are going to prevent default and then onSubmit we are going to call changeSize. So you've probably noticed that for changeBackground we are immediately going to change the editor background. But for changeWidth and changeHeight we're only gonna do that once the user submits.
So we don't spam the editor too much so it doesn't crash. And let's go ahead and pass in the width to be parseIntWidth and height will be parseIntHeight. There we go. And I think you can also add the default radix of 10 inside. There we go.
And now let's go ahead and add these values here. So first of all inside of this scroll area we're going to do the following. We're going to add a form here around the entire thing and we'll give the form a class name space y4 and padding of 4 and on submit we'll have the on submit method then in the div inside we're just gonna have space y2 we're not gonna have the color picker at the moment, we're just going to have a label from components UI label which will say height and an input from components UI input which will have a placeholder height, value of our state control height, type number on change event, change height, Event target value. And now that I think of it, we didn't even need the separate methods for this, right? So if you want to feel free to just use direct set states, right, but I'm already in here, so I'm gonna do that.
We're now gonna copy and paste this too and change this one to be width. The placeholder here will be width, the control value will be width and we are going to call changeWidth like this and then still in the form we're gonna add a button from components UI button. So let me just show you what I've added. I've added label input and button from components UI. So just make sure that you've imported them from there and not anywhere else.
And I'm just going to remove this unused import, but leave the color picker because we will use it great so we now have this and let's just add a button which will say precise like this with the type of submit and the class name or width and then outside of this form we're gonna go ahead and open a div with a class name and just a padding 4 and we are going to render the color picker. And the color picker will have a value of background and on change will be change background. And to fix this TypeScript error, we can simply write as string because we don't support gradients or patterns, right? So we know that it's only going to be a string we've already had this issue I believe inside of our use editor here we left a comment let's search for pattern there we go so in get active fill color we did the same thing we define the value as string because we don't support gradients or patterns so we know the only possibility is a string. So we are doing the same thing here.
Great. I think our setting sidebar is now ready and we can now go inside of our editor component and we can add it. So I'm going to copy and paste the last one and add the new one, settings sidebar, from settings sidebar, there we go. And let's go ahead and simply copy any of the existing ones and pass in settings sidebar, just let's confirm that it's opened and controlled with active tool comparing settings, there we go, let's try it, oh and we have to change the title. Yes, we forgot about the title here.
So I'm going to go ahead and change the title to be Settings. And my description here will be workspace settings. Or let's give it something more descriptive. It doesn't really matter but something like change the look of your workspace. And Now when I click on settings, there we go.
So you can see that now we can resize our workspace. But let's try it out. If I change this to blue, there we go. And I can even change it to transparent if we want to later export a transparent PNG, for example. And now let's try this.
So I'm going to change this to 900 and let's click resize. And there we go. You can see how it's now resized inside of here. Beautiful. So we can now change the format of our workspace.
We can change the color. We can change anything we want. Amazing, amazing job. So what we're gonna do next is we're gonna go ahead and add the zoom in and zoom out features here in the footer and then we're gonna go ahead and implement the history and I think that we are getting close to hitting that boundary of the things that we can do without an authenticated user. So soon after that we're gonna have to go ahead and create our authorization.
Nevertheless, great great job!