So we're gonna start again in the toolbar component. So I'm gonna close everything else here. And what we can do is we can copy our last div, hint and button for the stroke color, paste it here. And we can change this to be stroke width and instead of looking for the active tool and the on change active tool to be stroke color this will be stroke width and inside of this div we are not going to be rendering the div at all. Instead we're going to be using bs-border-width.
You can import this from react-icons.js and let's remove the use state here since we don't need it. I'm going to go ahead and give the bs-border-width some styles. Size 4. So again, size is an equivalent of writing height 4 and width 4. So it replaces these two class names here.
Great! Let's try it out. When I select this, perfect! I now have stroke width available and this should open the stroke width sidebar. Let's go ahead and check it out.
So now I'm going to go ahead and I'm going to copy the stroke color sidebar and I'm gonna replace this with stroke width sidebar. I'm gonna go ahead and rename the props component and the props instance here with the stroke width sidebar. The props themselves can stay the same. What I want to do here is I want to change the active tool to be stroke width. Let's change this to stroke width and we're going to go ahead and change this to modify the stroke of your object or your element.
It can honestly be whatever you prefer it of course. So now I want to go ahead and remove the color picker, right? We are not going to need that. And let's leave and let's remove the import for the color picker and now I want to go inside of the editor here. I'm going to copy and paste the import for the stroke color sidebar and add stroke width sidebar from stroke dash width sidebar in features editor components, right?
Let's go down here and let's copy and paste this and let's render it here. And we can pass everything else. And there we go. So now when I click on the stroke width here, of course, it should only be active when something is selected, right? So you can see how even we already handled this because we added stroke width inside of our types.
We added the selection dependent tools to be stroke width which means that if there is no active object this will be closed right. If you ever see it opened without it's probably because of hot reload so it's not something that will happen in production. Great! So now that we have this we have to go ahead and add the necessary elements to increase this stroke width. So I'm gonna go ahead inside of my terminal, I will shut down the app and I will do bunx, chat-cnui, at latest, and we're going to add two elements.
We're going to add label and slider. Let's go ahead and add those. So make sure you add both the label and the slider. And do bun run dev after that and refresh your app. Great.
Let's head back inside of the stroke width sidebar here. And we're going to go ahead and do the following. So inside of here I'm gonna go ahead and do space y4 and I'm gonna add a border bottom here. I'm gonna add my label component from components UI label. So just make sure you've added the proper import here.
So label from components UI label. Always check your imports. And in here we're gonna add the stroke width. And I'm gonna go ahead and give this a class name of text small. Let's go ahead and just see how that looks now.
So I'm gonna refresh this and add a shape. There we go. So this kind of repeats. So I'm gonna change the title of my sidebar tool sidebar header to be strike options maybe. There we go.
Stroke options and then we're going to have strike width separately. Great. So below the stroke width, we're going to have a slider from components UI slider. So just make sure you added the import for the slider here. And there we go.
So this is how the slider will look like. So now we have to modify that. So let's go ahead and let's find a way to get the current stroke width. So we technically already know how to do that. We can go back inside of the use editor here.
And just as we added the active stroke color, let's replace stroke width here with get active stroke width. So we have the selected object. I just noted a little bug here. So instead of returning the fill color as the default here, let's do stroke color for the get active stroke color. And now for the get active stroke width, we can go ahead and return stroke width here.
And in this one, let's see what is actually the name. Is it stroke width? It is. It is literally stroke width. Perfect.
So make sure you return the stroke width here, here and search for the stroke width. Perfect. And now we're gonna go inside of our types in features editor here and we're gonna go ahead and replace the stroke width with a method which returns a number. Let me just fix this. There we go.
So now the use editor is completely correct and we can go inside of the stroke width sidebar now. And we can get the get active stroke width or stroke width from the features editor types. There we go. Stroke width right here. Since all of these components look similar always confirm that you're working in the correct one.
We are working in the stroke width sidebar. Don't accidentally work in the color or the fill color, right? Great, we now have the value here. So what we can do now is we can give our slider a value. It accepts an array of items, but we can only give it one range by simply giving the value as the first item of the array.
And then let's go ahead and let's define our onChange here. So onChange will do change stroke width and it needs to accept a number like this. And now let's go ahead inside of the slider here and let's do on value change. We get the values so again it's a range. We're gonna call on change and we are simply gonna pass the first item from the values array.
There we go. We have the stroke width. So let's go ahead and try it out now. So I'm gonna go ahead and select this and I will purposely first change the color to something light, right? Something like this.
So I can only focus on the stroke here and let's see if I can increase it. There we go. We can now officially increase our stroke color. Let's go ahead and play around with some other elements to ensure that it is preserved here. So can I change it here?
I can. Absolutely perfect. And it stays and it changes on every selection. Great. So what I want to do now is I want to add an ability to change the type of stroke, right?
So I want to go ahead and give it an option to be dashed or solid. Let's go back instead of our stroke width sidebar here and perhaps we could have called it, you know, stroke options sidebar, but you know, I think it's okay. What I want to do now is I just want to copy the div here. So I'm not copying the entire thing. So I have to remember to close this div And I'm gonna change this to be stroke type.
Now below that I'm gonna go ahead and create an option using a button. So make sure you've added an import for the button right here. Let's go down here. And inside of here I'm gonna go ahead and create a cell closing tag, which will be a class name, which is gonna represent the look off the border, right? So I'm gonna write full width border black, rounded full and border four.
I'm gonna give this button itself a variant of secondary. I'm going to give it a size of large. I'm going to give it a class name which will be full width, height of 16 like this, justify start and text left. Then I'm gonna give it a style of padding 8 pixels, 16 pixels Like this. We could also do this in Tailwind I don't know why I wrote it like this.
Feel free to convert this to Tailwind. We're going to go ahead and copy this button and paste it below. And what we're going to do now is we're going to change this div for the other one to be border dash, whoops, let me scroll down so there is not this big tooltip border-dashed like this. There we go. So now you can see we have two options for the stroke type.
What we have to do now is we have to create functionality for the stroke-array. So we have to head back inside of the use editor here. And let's head directly in the hook right here where we have the stroke width. Let's copy this and let's add stroke-array here. Stroke-array.
And let's go ahead now. Whoops, this will be set stroke-array. We have to go inside of our types now and let's go ahead and export const stroke-array will simply be an empty array in the beginning. So we can now use that here as an import. Make sure you've just added the stroke dash array from features editor types in the use editor hook.
Perfect. We have this now so what we're gonna do we can also define like what kind of elements go here. It's a number, it's an array of numbers. That's the only thing that will go here. And I want to add that to the build editor here.
So we're gonna pass in the stroke-array option but we are also gonna pass in the set stroke dash array option and I like to order this by length you don't have to do that of course. Let's go inside of the build editor and first things first build editor props now accepts stroke dash array which is an array of numbers and it also accepts the setStroke-array which is a method which accepts again an array of numbers and it returns a void. Did I do something wrong here? I did. I did not define the value.
There we go. Let's go inside of the use editor here. And first things first, I think we are missing a dev dependency here. Instead of the use editor, when we add the stroke-array to the editor, we need to also add it here because it's memoized. This is very important to add.
And now, let's go inside of our build editor method and we can now extract the stroke-array and set stroke-array because we pass it from the props right so what I'm going to do is I'm gonna first copy the change stroke width like this and we're gonna call this change stroke dash array. The value will be an array of numbers. We're gonna set stroke dash array here. And then we're gonna go ahead and change for each object stroke dash array and give it a value here. So that's how I want to resolve that.
And let's go ahead and just fix the type. So we have to go inside of the editor interface here and we have to add the following. So change stroke dash array, which is an array of numbers. There we go. No more errors.
Perfect. So I believe that what we have to do now is the same thing that I did with my... Or maybe I don't. I was thinking whether I need to protect the text types, but perhaps I don't. We're gonna get to that once we add the text.
Let's just leave it simple as it is. So we change the local set stroke dash array and we modify that for each of our selections. And the last thing we have to do is right here at the bottom. So the same thing as get active stroke width. Let's go ahead.
Whoops. We just copy to this part. We're going to do get active stroke dash array like this. So we have selected objects, we're gonna return stroke dash array, we are getting stroke dash array and stroke dash array right here And this will return an array of numbers. Perfect.
So let's go ahead inside of the types here, copy this one, rename it and fix the types to be an array of numbers. There we go. Let's go inside of the stroke width sidebar here now and we're gonna go ahead and do the following. Const onChangeStrokeType value will be an array of numbers and it's going to call editor change stroke-array and pass the value and let's go ahead and call this onChangeStrokeWidth So now we can fix this on change stroke width for the stroke width option and Let's call on change stroke type here. So this button right here we have a button above I believe.
Yes, let's first resolve this one. So this on change will be a very simple one, just an empty array. But this one on the other hand, we have to create a stroke look. So for that, we're gonna add 5, 5 in our array right here. Let's go ahead and check this out and see if we've done this correctly.
So I'm going to go ahead and select the shape here. I'm going to change the color to white. I'm going to go ahead and increase my stroke width here. Now I'm gonna click on dashed and there we go. You can see how now we have it dashed.
And let's just go ahead and give the user some indicator that this is currently selected. I think we can now do that because of our method, right? So we now have the value. So I'm going to give this a width value. So it can work like this.
So width value will be for the slider here. Let me just expand this as much as I can. So this will be the width value. And then in here, we're going to get the type value. Editor, get active stroke-array or stroke-array.
And we can get the stroke-array from the same place we've exported all of these types here in the stroke with sidebar. There we go. So now we have the type of value. So what we can do here is something like this. Let's go ahead and mark this as dynamic classes.
Like this. I'm trying to think of a nice solution for this. I think I have some form of an idea. So what I'm gonna do is I'm gonna check if type value is equal to, oof, I'm not sure even sure if I can do this. Yes, because this is a very specific type of comparison.
How about we do this? How about JSON stringify type value? If this is equal to this, in that case, let's go ahead and write border and border blue 500. Can I try that now? If I click this, there we go.
You can see how it's selected. So I don't know if you understand what's going on here with the JSON stringify. You can't really compare an array, right? You can't do the identical operator on an array, right? So that's why we have to stringify it because we are looking for the literal value of this two brackets.
So that's kind of a different thing. We know in background, it's an array. My brain is kind of tired. If you have a nicer solution to this, feel free to do that. But I'm gonna stick with this for now.
And let's give it like a bigger border. And I wanna copy this entire class name and I'm just gonna replace the lower one. And in here, we're gonna compare five and five, right? And I'm just not sure if Stringify adds a space here or not. Let's see if I click here, nothing.
If I remove the space, it gets selected. So no space here. All right, so it's a trick. All right, let's go ahead and check it out there we go beautiful let's try it on a different thing here perfect amazing and if you want to you can also preserve this value So right now it's a dashed array. So if I create a new object, I expect this to have dashed array as well.
You can add that quite easily. And it makes sense to do it because we preserve the stroke width so we should also preserve the stroke type. And we can do that by going inside of use editor. And if you go inside of here we have add diamonds so alongside stroke width also add stroke-array, stroke-array. So I'm just gonna copy this and find all other things.
So we have triangle options, we just add the stroke-array. We have add triangle, we add stroke dash array. Add rectangle, same thing. Add soft rectangle, same thing. Add circle, same thing.
There we go. So now I think it should preserve the value. Let me refresh everything. If I add a circle, if I increase the width and change the type, let me increase the width even more. And now I go ahead and add a rectangle.
There we go. The rectangle has the exact same stroke width as the last one. So it's up to you whether you want this or not, right? I've seen different examples on different types of editor. So you can decide for yourself whether you want that to preserve that value or not.
We're not gonna preserve every single value but this default stroke things I think it's okay to preserve right and stuff like colors as well but later when we get to you know opacity for example we're not going to preserve that I don't think it makes sense if we only want to you know change the opacity of one element it doesn't exactly make sense that we also change the opacity for every subsequent element so if you don't want this feature where once we change something to dashed and then every other element starts with dashed all you have to do is just revert this last change which we've added which is in all of our add circle, add soft rectangle, add rectangle simply remove this stroke dash array. Don't preserve it. Don't keep it in the default options if you don't want it and you can also remove, you know The fill and the stroke if you always want your elements to start with the default values You know, maybe you just keep your elements like this, right? That's an option you have you don't have to add all of these preservations here. I'm just giving you an option to do so if you want to do it.
Great, so we are getting really far along and we already know how to, you know, add various different types of elements here. So what we're gonna do next is explore whether we're going to continue with this and add some more generic stuff like opacity or perhaps it's time to go to the text. We're going to see. Great, great job.