<div dir="ltr"><div>Hello,</div><div><br></div><div>I've, so far, made progress on the "MVC" (Model-View-Controller) refactoring of some important components of Music Blocks, and have built a proof of concept and a raw design of the code I'm going to export projects into (and/or provide the functionality to write new Music Blocks projects with, using text code).</div><div><br></div><div><b>Milestones:</b></div><div><ul><li><b>Separated 4 major "note" processing/playing functions</b> (<font face="monospace">_playNote</font>, <font face="monospace">_playSwing</font>, <font face="monospace">_playDotted</font>, <font face="monospace">_processNote</font>) into a new class called <font face="monospace">NoteController</font><font face="arial, sans-serif"> in </font><font face="monospace">js/note.js</font>. I'll be revisiting this class and restructuring them accordingly in the upcoming weeks, when I'll be working on exporting music functionality related blocks.</li></ul><ul><li><b>Refactored <font face="monospace">logo.js</font> and <font face="monospace">turtle.js</font> into ES6 compliant standard</b>. I've refactored the existing function prototype based definitions to ES6 <font face="monospace">class</font> definitions, replaced <font face="monospace">var</font> with <font face="monospace">let</font>, and added "arrow functions" to get rid of reference problems with <font face="monospace">this</font> keyword. <font face="monospace">turtle.js</font> previously had three object definitions: <font face="monospace">Turtle</font>, <font face="monospace">Turtles</font>, and <font face="monospace">Queue</font>. I've separated <font face="monospace">Turtles</font> to a new file <font face="monospace">turtles.js</font> and moved <font face="monospace">Queue</font> into <font face="monospace">logo.js</font>.</li></ul><ul><li><b>Designed a simple framework to put in practice the "MVC" model</b>. According to the framework, a component's class references two static classes: a "model" class and a "view" class. "model" and "view" do not interact with each other; they can only make calls to methods in the "controller" (which is the main component object itself), and the "controlled" can make calls to both. Any external code does not see this internal separation - it makes all calls to the main component object (controller) and the framework deals with them. There is just one function call that needs to be added in the beginning of the <font face="monospace">constructor</font> of the component to bring the three sub components together.</li></ul><ul><li><b>Implemented "MVC" for <font face="monospace">Turtle</font> and <font face="monospace">Turtles</font></b>. I've refactored the <font face="monospace">Turtle</font> and <font face="monospace">Turtles</font> classes to comply with the new framework design. In addition, I've planned a higher reordering of the components in the upcoming weeks - after discussion with my mentor Walter, I've decided that the <font face="monospace">Turtle</font> component should oversee all activities of the "mouse" in Music Blocks, i.e. it should oversee all the visual activity and the music based activities. Along this idea, I've further refactored the <font face="monospace">Turtle</font> component by transporting all visual activity related members to a new class called <font face="monospace">Painter</font><font face="arial, sans-serif"> in a new file </font><font face="monospace">turtle-painter.js</font>; every <font face="monospace">Turtle</font> object references a new object of <font face="monospace">Painter</font>. I've planned to create a class called <font face="monospace">Singer</font> and transport all music activity related members to it, as I progress.</li></ul><ul><li><b>Refactored <font face="monospace">Logo</font> in <font face="monospace">logo.js</font></b>. I've discussed with Walter that <font face="monospace">Logo</font> should only preserve the members required for running projects. I've transported "notation" related members (used for "lilypond", "abc", etc.) to a new class called <font face="monospace">Notation</font> in a new file <font face="monospace">notation.js</font>. There were some methods for calculations used by the "Number" blocks, which I moved to a new class called <font face="monospace">MathUtility</font> in <font face="monospace">js/utils/mathutils.js</font>. In addition, I've moved some other methods to <font face="monospace">blocks.js</font>. There is more work remaining, which I'll take up as I begin export work for the music related blocks.</li></ul><ul><li><b>Designed a proof of concept of the export code and built a working model for the "Graphics" and "Pen" blocks</b>. This isn't completely stable yet. This is what I'm currently working on and I plan to settle on a stable model by this week.</li></ul><div>My plan for the coming two weeks is to settle on a design framework for the export code, finalize the API for the "Graphics" and "Pen" blocks, and implement a working API for the blocks in the "Programming" palette. On completion of this part, I'll have completed one end - export API and framework for "Graphics", "Pen", and "Programming" palette blocks. I'll then begin with refactoring the music related code and start working on the API related to the "Music" palette blocks.</div></div><div><br></div><div>I've created a GitHub project called <a href="https://github.com/meganindya/musicblocks/projects/1">Music Blocks JavaScript Export</a> in my fork of Music Blocks, where I update my progress methodically. In the fork, there is a branch called <font face="monospace">js-export</font> where I create and merge duplicates of all pull requests I create to the original Music Blocks repository, to keep track of my work.</div><div><br></div><div>Thank you. Regards.</div><div><br></div><div><div dir="ltr" data-smartmail="gmail_signature"><div dir="ltr"><div><div dir="ltr"><div><div dir="ltr"><blockquote style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><font size="2" color="#666666"><i><span style="font-family:"arial narrow",sans-serif">Anindya Kundu</span></i></font></blockquote><blockquote style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><font size="2"><span style="font-family:"arial narrow",sans-serif"></span></font></blockquote></div></div></div></div></div></div></div></div>