So let's wrap up our selection tools with the ability to change whether this is in the forefront or in the background of an element. So let's go inside of our selection tools component. So I'm going to close everything here and go inside of the app folder board components and In here, we have the selection tools right here and let's go ahead and just add the buttons So we're gonna go ahead after the color picker and add a div to hold the two buttons which we're gonna have. Let's give their wrapper a class name of flex. FlexColumn, so they're one above another.
And gapY 0.5. And now let's add a hint here and a button inside. The hint is going to have a label of bring to front and the icon we're gonna use is bring to front from Lucid React. So make sure you import ring to front from Lucid React and you can also import send to back from Lucid React because we're gonna need that as well. So let's go ahead and give this button a variant of word and the size of icon.
And now we can copy and paste this hint in the entire button inside of it with an alternative text, send to back. And let's give this a side of bottom. And this one is going to render send to back icon. So let's go ahead and see how this looks now. There we go.
So you can see that this is an icon which indicates that this is going to be above those two other elements and this one is an icon which indicates that it's kind of going behind those two elements. Great, so we're gonna go ahead and implement those two functions now. So let's go ahead and let's create our moveToBack function. So I'm gonna expand this as much as I can here. And I will also like prepare some two elements here so we can try it out.
So let's go ahead here in the beginning above set fill and let's do const moveToBack to be used mutation. Let me prepare it like this. And from the props, let's extract the storage. And then let's do const LiveLayerIds to be storage.getLayerIds. And then let's create the matrix of indices the plural for index, const indices is going to be an array and let's define that it's going to be an array of numbers like this.
And then let's create a temporary array here, LiveLayerIds to array. And then we're going to iterate over them and move their position. So let index is going to be 0. It's going to go to the length of the array and iterate over each turn. If selection includes array and the current iteration, in that case, indices.push currentIteration, like that.
And then let's go ahead and create another for loop here. So for let I is equal to 0, I is less than indices.length, set the maximum of that array. And let's increase our index at the end, live layer IDs.move, indices, I and I here, like that. And make sure to add the selection in the dependency array of the use mutation. So basically our positioning for what is above and what is behind is going to be controlled by their position in the array.
So let's go ahead and find our send to back option here and let's add on click here move to back. Let's save the file and let's see if we can already test this out whether it's working or not. So for example, I have this green box and I want to move it behind this one. If I click send to back, there we go. You can see how it's being sent to back.
Let me try with this one. There we go. If I try with this, great. So now we have to create an equivalent but to bring something to front. So let's go ahead and copy this method because it's going to be quite similar.
So let me just copy the entire move to back method here And let's create this one and name it moveToFront like this. So the first part of the function is going to stay the same but we are going to have a different for loop here at the end. So the way we create indices is gonna stay exactly like this. And then let's write here for let I to be not zero, but we're gonna start from the end of the array. So indices.length like that.
Minus one. And the maximum iteration is going to be when the number is higher or equal than zero. And we're going to go in the opposite direction, so I minus minus. And then let's do a live layer ids.remove, sorry, .move in the first argument indices and the index and in the second one array.length minus one minus in parentheses indices.length minus one minus I. Like that And make sure you have the selection inside of your dependency array.
And now let's use this move to front here. And let's go ahead and give it to this function, to this button. On click. Where we have the icon bring to front. So let's go ahead and see if that works.
So if I click on the one behind and click bring to front, there we go, that brings it to the front. If I go ahead and click bring to front here, brings it to the front. If I click on the white one, it's brought to the front. Perfect. So we just created all the functionalities which we need here for layer positioning, for changing different colors and for deleting.
What we're gonna do next is create our selection net so that we can do this with multiple elements at once.