GSoC’24(CircuitVerse) Week 1 & 2

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.