I detailed last week my progress in a technical assessment that involved working with a Canvas and rendering shapes to it. Another week has passed and I've made considerable progress on my Single Page Application. New shapes can be entered, they drag smoothly across the page, and their attributes can be altered.
One of my biggest challenges was handling the mouse events, as the handlers couldn't be attached to the individual shapes themselves but instead to the Canvas as whole. I would have to compare the mouse's click coordinates to a shape's x-y location on a Canvas to determine if the mouse was in the shape or not. Iterating through the shapes against the mouse coordinates was pretty straightforward, but shapes were flying off the page and the dragging was jittery.
To figure out the issue, I had to rely on my trusted tool in my utility belt, Debugger. First thing I noticed was click events being executed multiple times when I was expecting them to only fire once. I made sure to include necessary event methods like preventDefault and stopPropagation to signal to the browser that explicit function should be rendered over default. Upon scouring the internet, a valuable comment on StackOverflow elucidated another event method I hadn't used before, immediateStopPropagation. This prevents simultaneous event listeners from responding, allowing me to string the events in corresponding order.
When a shape is clicked, multiple listeners are being set off by that single click and it's important that the proper sequence of events is being executed. Without explicitly detailing which listener is being fired when, all could be fired at once. Therefore, when a shape is clicked and mouseDown initializes a new Form showing the shape's data, the action is then repeated when the onclick event is executed right after the mouse click is released. This is why multiple Forms were rendering when only one shape was clicked, and this is why shapes were flying out of the canvas when a mouse was released.
Once I added this new found method to my event functions, the Canvas was corresponding much smoother to the cursor scurrying in its border. I still have some styling issues I could work on, but overall the application is mostly finished.
When I say mostly finished, the only issue I'm spending countless minutes on is keeping a shape selected. As per the assessment, a shape that is selected should display a form and have a gold ring around it to show its selection status. A shape is then deselected when the shape is clicked again or the cursor clicks outside of the shape. I was able to get that far, but after a shape is dragged to a new position, it will automatically deselect the shape because it was clicked to be dragged.
This is major progress from a week ago when I was almost confident that I would get nowhere with this project. I count it as a win to get this far after wanting to throw in the towel. Buying some new Vans and some summer reading books definitely helped. I will submit my technical assessment tomorrow, and hopefully it will progress to the next step. But if not, I am content with far I've gotten. And figuring out that final piece will really be the crowning achievement.
Top comments (0)