The coding period has begun, and a lot of work has been done on understanding the codebase, creating new Vue components, and eliminating bugs.
Implementation of LayoutElements Panel Vue Component
Previously, the LayoutElements Panel was in the extra.vue
file.
First, I created a new Vue file for the LayoutElements Panel and moved the HTML part inside the <template> <template/>
tag.
Since the original codebase used vanilla JavaScript for some DOM manipulation, I converted these to Vue's reactive properties.
<div
v-for="(element, j) in group.elements"
class="icon subcircuitModule"
:key="`${i}-${j}`"
:id="`${group.type}-${j}`"
:data-element-id="j"
:data-element-name="group.type"
@mousedown="dragElement(group.type, element, j)"
>
<div class="icon-image">
<img :src="`/img/${group.type}.svg`" />
<p class="img__description">
{ element.label !== '' ? element.label : 'unlabeled' }}
</p>
</div>
</div>
Additionally, I moved all related styles into the <style> <style/>
tag.
PR Link - https://github.com/CircuitVerse/cv-frontend-vue/pull/317
Fixed Mini Map not rendering Issue
Previously the mini map in the simulator was not rendering due to styling issues.
Fixed it! using Changing some CSS properties
PR Link - https://github.com/CircuitVerse/cv-frontend-vue/pull/316
Conclusion
I learned a lot by doing this work and am happy to start my contributions. I hope to produce even better work in the upcoming weeks.
Top comments (0)