Journey Through GSOC : Countdown to Finish

Posted on by

Hola folks! Are you excited? We’re about to dive into the realm of Music Blocks and uncover all the incredible happenings from final Weeks of my GSoC adventure. In case you missed my earlier blogs, no sweat! This marks the 4th blog in the series, and I’m absolutely thrilled that you’re here to share this journey with me. Without further ado, let’s plunge in and catch up on all the latest updates together!

Creating a Playground

In the last weeks of the project, my task revolved around implementing the drag-and-drop functionality for the “bricks” (as we refer to them) from a designated palette onto the main workspace. This involved creating a playground within the workspace, consisting of two essential child components:

  1. Canvas
  2. Palette

To bring this feature to life, we needed to integrate drag handlers with the bricks, while simultaneously separating them from the Document Object Model (DOM). Our approach involved considering the implementation of a Higher Order Component (HOC) that would effectively attach drag handlers to the SVG generated from the brick instances.

const Brick = withDraggable(BrickStatement);

<DragBrick instance={instance} onCanvasDrop={onBrickDrop} />

Despite completing the implementation, we encountered a few challenges, particularly with edge cases. We needed to ensure that the bricks were being dragged over the drop zone accurately, all while considering boundaries and a threshold value. These factors were crucial in maintaining the smooth movement of bricks from the palette to the canvas.

As we entered the final week, we realized that our initial implementation still had some performance hiccups. In order to enhance its efficiency, we made the decision to adopt the React Aria library. This library provided us with tools for smoother drag-and-drop implementation, ultimately contributing to a more seamless process.

Now, the only piece left is to seamlessly connect all these elements together. I’m hard at work on it and have a strong feeling that it will come together in just a matter of days. Keep your eyes peeled for an upcoming blog where I’ll share the exciting progress with you!

I hope you’ve been enjoying my updates thus far. Stay tuned for more fresh insights into my GSoC adventure coming your way soon!

And hey, remember to show some love by giving a star to the project’s GitHub repository! ⭐
Link: MusicBlocks v4

What an incredible journey this has been! I’m filled with gratitude for the opportunity to work alongside such fantastic mentors. Their guidance has been invaluable, and I’ve gained so much knowledge this summer.

Thanks for Reading !! 😊