DEV Community

Cover image for GSoC’24(CircuitVerse) Week 1 & 2
Niladri Adhikary
Niladri Adhikary

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

Additionally, I moved all related styles into the <style> <style/> tag.

Image description

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

Image description

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)