One feature we've completely forgot about because I forgot to add it in the sidebar here is the draw mode. So let's go ahead and let's revisit our sidebar. So not anything else, just the sidebar. Let me show you where it's located. So source, features, editor, components.
In here you should have the sidebar with all of your sidebar items. And let's add the draw mode in between shapes and the AI. So I'm just gonna copy one of the sidebar items and I'm gonna use the pencil icon. I'm gonna go ahead and give this a label of draw and I'm going to go ahead and change this to draw as well. There we go.
So just make sure you have the pencil right here. I also have presentation here. I'm not going to need that. All right, there we go. So we now have the draw mode here and when we click on it, it becomes active.
Great. And now let's go ahead and let's go inside of the editor component itself. Inside of here we have the onChange active tool which detects the draw mode and in here we have some to-dos to do, right? We have to enable and we have to disable the draw mode. For that we're gonna have to go inside of our use editor where we've just added the on copy and on paste.
So for now let's go ahead and let's close the... Actually no. We're gonna do this inside of the build editor. Yes. So inside of here above on copy and on paste I'm gonna go ahead and I'm going to add enable drawing mode and this will be canvas, discard active object.
That's the first thing, right? If anything is selected we're gonna discard that. Then we're going to render all and then very simply canvas is drawing mode will be set to true and then we're gonna go ahead and add canvas free drawing brush dot width will now be stroke width which we have controlled in our state and canvas.freeDrawingBrush.color will be our stroke color. So we are reusing the things that we have already here in the props, right, which we control by some other tools. And then, well, that's it.
That's the drawing mode enabled and we also have to add the disable drawing mode. So inside of here we are simply going to call canvas is drawing to be false. Canvas is drawing mode in here will be false. Now let's go inside of the types and let's go ahead and let's add enable drawing mode and disable drawing mode. There we go.
And now we can go inside of the editor here and where we have the to-do to enable drawing mode we can call editor enable drawing mode and inside of here we can do editor disable drawing mode like this and let's go ahead and add the editor in the dependency array here let's see what's going on editor is used before its declaration that's interesting where is my editor tool? Oh I think I have to move the onChangeActiveTool. My apologies. Yes. So let's move this below.
Where do we extract the editor? In here. So just move it below here. There we go. So onChange active tool should be below the use editor where we extract the editor so that we can properly use it here.
There we go. And I think we can already try it out now. So if I click draw here, there we go. I can draw and if I click again, it should stop drawing but it looks like it doesn't. So let's go ahead and see whether there is a mistake in here perhaps.
So editor, this should call the disable drawing mode. Let me go ahead and console log disabling so I see whether this is being called or not. Or maybe I just have to refresh my page first. We'll see. So I'm going to go ahead and check for disable here.
Or why did I log disabling? So let's first try and clicking on this there we go so this enabled it and now if I click here again it did not click on disable all right oh it's because of this part right here. So how about we move this above like this? Yes, because we have an early return here. So there we go.
So just move the draw and this draw right here before you do the early return if the tool is the same. So now we should be able to use this to both activate and deactivate the drawing mode. So again, I'm refreshing. Now I'm drawing. But if I click again, there we go.
Now I can no longer draw. Perfect. And now what I want to do is I also want a sidebar to open so that we can change the width and the color of our strokes, right? Because, yeah, I can now go ahead and like click on individual one and I can change the stroke color and I can change the stroke width but I wanna be able to do that. You can see that we can also change the stroke type but it doesn't do too much, right?
But I also want to enable that while we are drawing right so let's go ahead and do that so I'm gonna go ahead and I will copy source features editor components Let's copy the fill color sidebar like this and we can rename that into draw sidebar. There we go. Let's go ahead and get inside of that new component and replace all instances of fill color with draw sidebar like that and inside of here let's go ahead and let's change the active tool fill to be what's it gonna be? It's going to be draw like this and let's go ahead and change the header title to well do we need the header title yes we can draw and we can just change this to be modify brush settings drawing mode something like that right And we can leave the color picker here as it is. And instead of changing the fill color, we can do change stroke color because that's what's controlled.
That's what's visible with drawing mode. So we didn't actually have to implement any new feature here, right? So for the value, we're going to get active stroke color. And we're going to use stroke color as the default fallback if we can't get it. So great, we don't even have to add any new features to our editor because we are just using the existing ones.
And now let's go ahead and let's go inside of the editor component itself. And I'm gonna go ahead and copy the last one and add this, which will be draw a sidebar from .slash draw a sidebar. Or of course you can change this to features components like I prefer to do great now that we have this Let's go ahead and try it out actually. So when I click on draw, there we go. So now it's black, but if I change it to red, it should be red.
Looks like it's not red. So let's see why that is happening right here. Let's start debugging by clicking on this console log to see whether the value of the color picker is actually being passed inside of here. So we are doing this inside of drawing mode, we are changing the stroke color. Right?
And inside of use editor we are using the stroke color as the color. So this definitely should be working. Let's go ahead and try this out again. So I'm going to refresh and I'm going to change this to orange. And it looks like it's still not working.
So I'm going to go ahead and pause and just debug a little bit. All right, I just had an idea which we can do and it's pretty obvious right so we just have to refresh this basically so we can copy these two elements and let's go ahead and let's find the change stroke color here and before a render all we're simply going to refresh the stroke color like this. So canvas, free drawing brush color, stroke color and same thing for change stroke width. We're just going to go ahead and change the width to the new. This will be value.
Yes. So just make sure you're passing the value here. So same thing here We are passing the value the new color Let's try it out now. So now I think already If I enable draw again, there we go So if I change it to red or orange, it's now orange. If I change it to blue, it is now blue.
Perfect. So what I want to do now is I also want to add a slider which can, you know, in real time increase the width of my brush. Let's head back inside of the draw sidebar And I'm gonna go ahead and just copy this div right here and add a closing tag to it and Then inside of here. I'm gonna add a label from components UI label. So just make sure you've imported this.
Inside of the label, I will write stroke width or let's call it brush width. And Let's give the label a class name Of text small and Below the label we're gonna have a slider so make sure you've added the slider import as well from components UI slider and the slider should now have the value of our current stroke width and on value change here should get the values and it should call the stroke change, right? So let's change this to be on color change and let's apply it here instead of value this will be color value let's go ahead and give that here now let's go ahead and let's get const with value will be editor get active which one is it stroke with like this and let's go ahead and let's create const on width change with a value number and what this will do, we no longer need this console log by the way we'll call editor on stroke on change, no it is change stroke width and passing the new value like this and then inside of here we can pass in the stroke the width value and inside of here we can call on with change with values and the first in the array like this.
We just have to fix this by giving it a default. Do we have stroke width? We do. Perfect. So I added this constant stroke width to here.
Perfect. Let me just collapse all of these elements so they are more readable. And I think we can now actually try this out and perhaps we can do like a border bottom here. There just it's like more readable. Let's try it out.
There we go. So now if I increase this, there we go. I can change this to another color, increase even more. Perfect. I can decrease it.
Amazing. So we now have a drawing mode and using the transparent mode, well, we can't do anything because it's transparent. Perfect! Amazing, amazing job. So you just enabled draw mode.
And what I want to do is I want to disable the draw mode if we click close here. So let's just go ahead and manually do that here as well. So editor, disable drawing mode on close here. So if I click close right here, there we go. You can see that now we are no longer in drawing mode.
One thing we should also check. So we can draw here, but if I click on text, for example, there we go, the draw mode immediately stops. Perfect. So you now have drawing enabled inside of your editor. Amazing amazing job!