Let's add the zoom in and zoom out features here in our footer. So first of all, we're gonna go and, well, we can close everything besides the use editor or if it's not open for you, simply go back inside of the use editor. And inside of the build editor method here we're going to go ahead and add two functions zoom in and zoom out so let me just get to the top we have a lot of methods here so we're going to add zoom in and zoom out and we can immediately go inside of the types and add those two, so zoom in and zoom out, so we don't write our code with everything being red, there we go Let's go ahead and let's implement the zoom in first. So first of all, let's get and define the zoom ratio, which will be canvas.getZoom. Like that.
And then we're going to increase the zoom ratio by 0.5% 0.05% and then let's go ahead and let's get the center of the canvas so canvas get center and then we're going to call canvas zoom to point and the point we are going to zoom in will be newFabric.point center.left and center.top and in the second argument we're gonna pass in the zoom ratio by which we are going to zoom. There we go. And you can copy this method and you can paste it inside of zoom out here and it will be quite similar. So first of all, we are not going to increase by 0.05 but we are going to decrease by that but we have to be careful right here so we are going to check if zoom ratio is less than 0.2 we are going to keep it at 0.2 as the minimum otherwise we can go ahead and zoom out further. So I don't want the user to be able to zoom out too much.
Great. And if you want to, you can also, you know, create a limit on zooming in. So we're going to go ahead and perhaps do that as well. Let's go ahead and do one more thing here. So we also in the last chapter added Auto Zoom.
So what we can do here is we can add it here as well. Auto Zoom. I believe we don't already have it exported, right? So we can just add it as an export here as well the same way get workspace is exported so let's now add out a zoom here there we go I believe it's not anywhere else perfect now let's go inside of features editor Components and this time let's go inside of our completely empty footer and now we're going to go ahead and add a hint from Components, Hint and inside of that we're going to add button from Components, Button and then we're going to add zoom in from Lucid React. Let's give the hint a label of zoom in, a side of top and side offset of 10.
Let's give the button on click of for now an empty arrow function, a size of icon, variant of ghost and class name of hFull like this. There we go. So let me just indent this a bit And we should now have the zoom in button here. Let's just go ahead and give the icon itself a little bit of styles. So zoom in will have a class name of size 4.
There we go. And we can now copy and paste this and this one can be zoom out and use the zoom out from Lucid React. There we go. So I'm just going to move this here. Now let's go ahead and let's go inside of the editor component itself and we have to find the footer and we have to pass in the editor prop.
Now go back inside of the footer and let's create an interface, footer props which will accept the editor which will be either a type of editor from types or undefined and I'm going to change this to use features editor types whoops, there we go and now inside of here for zoom in we can call editor zoom in and we also have to destructure this my apologies so footer props here and editor there we go so editor a zoom in and for the zoom out it will be editor zoom out. Whoops. Like this. Let's go ahead and try it out now. So I'm gonna go ahead and add a little text and let's try zooming out.
There we go. And you can see there is a limit to how much we can zoom out. We cannot go further than this and we can zoom in. And we can also perhaps add a limit to how much we can zoom in. But you know, you can see it's very, very hard to zoom into too much.
And one caveat here is that let's say you zoom in like this. Every time the method auto zoom is triggered, it will revert back to its place. We simply have to implement not functionality. Otherwise, it's very hard to control, you know, the center of the canvas and the proportions and everything. So if you zoom in like this and then click on a sidebar, you can see how it has to get, you know, relocated.
That's the only way we can handle the great user experience. Great. And I want to add like one more little feature here that I think we are able to do. And we can copy and paste and add it above here. And this one can be, the label can be reset, for example, and it can use the minimize from Lucid React.
So minimize and the function we can use here is our newly exported auto zoom. So let's go ahead and try this out now. So I'm going to refresh again and I'm going to add a heading here and let me zoom out and then if I click on reset, there we go. I can now, you can see, come back to where I was. Perfect.
And if you want to, you can also kind of limit, you know, how much you want to be able to zoom. So if you go inside of use editor here and in the zoom in you can check if zoom ratio is larger than let's say let's check with one so let's keep it at one otherwise zoom ratio. So let's see if this will even enable us to zoom at all. So I'm gonna refresh this and let's see. Okay, so for example, one will block you up until this point, as you can see.
So I can no longer zoom further than this. So you decide whether you want the zoom limit or not. If you don't want it, you can just leave it as this. Great. Now that we've implemented that, we are ready to create one more feature which will be I believe the last thing we can do without a logged in user and that will be the file exporting system and file opening system.
And also we have history. Let's not forget that. So actually that's what I want to do next. I want to add the history and the hotkeys.