So now that we have the three basic tools here to change the color, the stroke color and also some stroke options I want to go ahead and build three other generic tools that we are going to have before we move on to text. And the first thing I want to build is the layering functionality right so I want the ability for our editor to control which shape is above another so I'm going to go ahead and change the color of this to blue So right now this shape is above the circle, right? So I want to go ahead and add a functionality so that we can move this circle above this soft rectangle and vice versa. Let's go ahead and do that. So we're going to go ahead and go inside of features editor hooks use editor right here and inside of here I want to add two features and specifically I want to add them in the build editor so no need for anything besides that So let's go ahead and let's go to the beginning of our return method here so it's easier and let's add bring forward as a method and let's add send backwards as a method like this and now let's go inside of the build editor types more specifically the editor interface and in here let's add the bring forward method which is a simple void and send backwards which is exactly the same and once you've added these two you no longer have any errors inside of the use editor right here.
Now let's go ahead and actually implement these features right here. So we're very simply going to get all active objects and for each of the object we're going to go ahead and use canvas.bringForwardObject like this and after that let's go ahead and do canvas render all one thing that we have to also take care of is that elements can't go below the actual workspace so let's go ahead and just add to do a fix workspace overflow let's call that bug like that so we can copy and paste the exact functionality or the send backwards here but instead of using bring forward we're going to do send backwards like this and now let's go ahead and let's implement a button which will call these two functions and that button will be in the toolbar itself. So what we can do is we can copy this div right here in which we currently just displayed the BS order with. So let's copy that button here and the icon in here will be arrow up from Lucid React. So I'm just going to move this to the top like that and let me separate this two.
There we go. So we added arrow up and we also need arrow down. So we can be prepared for that. And we don't need any special class name here so we can remove that. And instead of the on click changing the active tool, what we're going to do is we're going to call the editor question mark.
And this will be bring forward. So let's go ahead and change the label of the hint to be bring forward as well. And then we can copy and paste this and change this one to send backwards send backwards in the hint as well and change this to arrow down let's go ahead and try it out now so I'm gonna go ahead and add a circle here and there we go. We have these two icons here. I'm going to go ahead and add this.
I will change the color to blue and let's try it out. So what I want is for this circle to get above. Let's go ahead and try it out. So I'm going to click bring forward and there we go you can see that now circle is above our rectangle. If I go ahead and click send backwards again on this rectangle what's gonna happen?
It's gonna go well you can't even get to it now but it's below our workspace so that's the issue that we have so we can fix that by going back inside of the use editor here and in here we wrote a to do so what we are going to do is we're going to get our workspace so const workspace will be get workspace and then what we're gonna do is workspace send to back so we are always gonna ensure that whatever we do with this layering workspace is always the last layer. So we can copy and paste that here. There we go. Let's try it out again. So I'm going to go ahead and add two shapes here.
I'm going to change the color of the rectangle. And now let's play around. So I'm going to go ahead and add two shapes here. I'm going to change the color of the rectangle and now let's play around. So I'm going to go ahead and send this backwards.
There we go. I'm now going to go ahead and send this backwards and it works. What happens if I try and send this circle backwards one more time? There we go. So now as you can see it can never go below our workspace.
Perfect. And I believe that I owe you an explanation for one thing that I left for later. So if you go inside of source features editor components editor I think that's right here there we go I think it's the preserve object stacking so if we turn this off right I explained what the controls above overlay do but I didn't explain this. So if you turn this off, let me show you how it looks like. So now when we have layers, Let's change the colors.
So I'm going to change this to orange. You can see that whenever we select an element, it goes above any other element, even though the true position of this rectangle is behind the circle. When you click on it, it goes forward, but its position doesn't actually change in the layer system right so it only visually appears like that and honestly I think that's just confusing if you like it this way you can you can enable this feature you can disable this feature right But I just think it's very confusing especially when you add the layer functionality because when you click send backwards it looks like nothing happened but it did in fact happen, right? So that's why I recommend turning this on the true and then if you try again when you add your shapes here, so I just added two shapes, let me change the color of one, you can see that now when you select them they stay in their proper position and now the layer methods make more sense. Great, great job.