Week 2 Report | GSoC'22@CircuitVerse
During this period I started by replacing jQuery UI with Vue Components.
It was followed by coding the logic for them to link with the functionality.
I started with creating the CircuitElements Panel component. Earlier the project was using jQueryUI accordion which I replaced with a Vuetify Expansion Panel component.
Used lifecycle hooks to get the data for the icons to be displayed it looping through the data. Modified the code for searching of circuit elements and displaying them in the panel.
Internationalization
Once the component and its functionality were working nicely, I worked on the internationalization of components.
I had already done the basic configurations during the first week. I added the translations for English and Hindi.
src/locales
|____ en.json (for english translations)
|____ hi.json (for hindi translations)
|____ i18n.ts (for configurations)Followed by this I worked on fixing some small bugs.
Dragging of Panels
The next step was to find an alternative for the jQueryUI draggable function.
I looked into several Javascript libraries unable to find the most appropriate one.
Then I coded the drag functionality by myself.
I found it to be lagging a little on dragging very quickly. Hence will replace it later after deciding upon a suitable library or will use the logic useDraggable function from VueUse.
Conclusion
This week was very productive for me. I completed one of the most important components to code - CircuitElementsPanel. Link to the PR
The other two important components to code in the upcoming weeks.
Properties Panel
Dialog Boxes are
Converting a pre-written code from one framework to another is always a complicated task as in each step I have to be conscious of not breaking any functionality or introducing bugs into the app.
With lots of parts of code interconnected, linking some of the components & logic in Vue with others yet to be converted to Vue code increases my confidence as I progress.