GSoC 2024 with Sugar Labs | Week 10 and 11 | Music Blocks (v4) project updates

Posted on by

Hi everyone, welcome to the GSoC’24 Blogs.

I am documenting my complete journey as a contributor for Google Summer of Code 2024 under Sugar Labs for the Music Blocks (v4) project – Masonry Framework.
To get more information about the project, you can read all my blogs here.

In this blog, I would like to share what I have done in the last 2 weeks and project updates.

1. Completing the Brick and Rendering in Storybook

Over the last two weeks, I focused on finalizing the implementation of various bricks (Block, Data, Statement, and Expression) and successfully rendered them in Storybook. Here’s a quick overview of what was achieved:

  • Brick Types Completed: Developed four main types of bricks:
  • Block Bricks: Implemented both ‘No Args’ and ‘With Args’ versions, capable of nesting and executing complex statements.
  • Data Bricks: Created inputs for other bricks, with two distinct types for flexible integration.
  • Expression Bricks: Designed to take values as input and return a value as output.
  • Statement Bricks: Defined the actions to be taken, also with ‘No Args’ and ‘With Args’ versions.
  • Rendering in Storybook: All bricks were successfully displayed in Storybook, allowing for easy visualization, testing, and tweaking of their appearance and behavior.

The code for this can be found here – #411.

2. Rendering the Stack and Fixing Errors

Next, I moved on to rendering the stack of bricks within the workspace. The stack is a crucial component as it defines how bricks are arranged, moved, and interact with each other. The following tasks were completed:

  • Stack Rendering: Implemented the stack structure using a combination of interfaces (IStack, IStackNode) and corresponding classes (Stack, StackNode).
  • Fixed Bounding Box (BBox) Scaling Error: Resolved an issue where bricks were not scaling correctly, which led to visual inconsistencies and misalignment.
  • Movement in Playground: Added functionality for bricks to be moved smoothly within the playground, ensuring that they snap into the correct positions without overlapping or leaving gaps.

The code for this can be found here – #412.

I also gave a presentation explaining the project on the Sugar Labs YouTube channel here.

The code till here can be found on commit – 4fba69dd672fa2c7b5f1df1fece6a4f7f88c004b.

3. Revamping the Brick Code After Mentor Discussion

After discussing with my mentor, we decided to refactor the brick codebase to enhance its flexibility and maintainability. Here’s a summary of the improvements and the new structure:

  • New Brick Structure:
    • Introduced a more organized directory layout with separate folders for components, stories, utils, and types.
    • Refined the final classes for each brick type (BrickBlock.ts, BrickData.ts, BrickStatement.ts, BrickExpression.ts) to align with our updated abstract models in model.ts.
    • Implemented a generic component (BrickWrapper.tsx) to handle different brick types dynamically.

The code for this can be found on Branch gsoc-2024/week-11-12.

Conclusion

These two weeks have been productive, and I am excited about the progress made on the stack tree structure. Stay tuned for more updates as I continue working on enhancing Music Blocks v4.

Also, don’t forget to drop a star on the project GitHub repo! ⭐
Link: https://github.com/sugarlabs/musicblocks-v4

You can connect with me on LinkedIn. Additionally, you can follow me on GitHub and Twitter, it will be appreciated.

Thank you for reading!