feat(gsoc'24): Implemented LayoutElements Panel vue component (CircuitVerse#317)

* feat(gsoc'24): Implemented LayoutElements Panel vue component

* fixed syntax err

* codeclimate issue fix

* codeclimate issue

* updated default import

* updated naming for indexes

* i18n and img not rendering fixed

* Update LayoutElementsPanel.vue

* layout image url corrected

* updated

* dropdown added for layoutmode

Author: niladrix719

src/components/Extra.vue

@@ -16,20 +16,7 @@
 
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- Layout Element Panel -->
-    <div
-        class="noSelect defaultCursor layoutElementPanel draggable-panel draggable-panel-css"
-        ref="layoutElementPanelRef"
-    >
-        <div class="panel-header">
-            Layout Elements
-            <span class="fas fa-minus-square minimize"></span>
-            <span class="fas fa-external-link-square-alt maximize"></span>
-        </div>
-        <div class="panel-body">
-            <div class="search-results"></div>
-            <div id="subcircuitMenu" class="accordion"></div>
-        </div>
-    </div>
+    <LayoutElementsPanel />
     <!-- --------------------------------------------------------------------------------------------- -->
 
     <!-- --------------------------------------------------------------------------------------------- -->
@@ -173,6 +160,7 @@ import CustomShortcut from './DialogBox/CustomShortcut.vue'
 import InsertSubcircuit from './DialogBox/InsertSubcircuit.vue'
 import OpenOffline from './DialogBox/OpenOffline.vue'
 import ReportIssue from './ReportIssue/ReportIssue.vue'
+import LayoutElementsPanel from './Panels/LayoutElementsPanel/LayoutElementsPanel.vue'
 import TestBenchPanel from './Panels/TestBenchPanel/TestBenchPanel.vue'
 import TestBenchCreator from './Panels/TestBenchPanel/TestBenchCreator.vue'
 import TestBenchValidator from './Panels/TestBenchPanel/TestBenchValidator.vue'

src/components/Panels/LayoutElementsPanel/LayoutElementsPanel.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="noSelect defaultCursor layoutElementPanel draggable-panel draggable-panel-css"
+    ref="layoutElementPanelRef">
+    <div class="panel-header">
+      {{ $t('simulator.layout.layout_elements') }}
+      <span class="fas fa-minus-square minimize"></span>
+      <span class="fas fa-external-link-square-alt maximize"></span>
+    </div>
+    <div class="panel-body">
+      <v-expansion-panels id="menu" class="accordion" variant="accordion">
+        <v-expansion-panel v-for="(group, groupIndex) in SimulatorState.subCircuitElementList" :key="groupIndex">
+          <v-expansion-panel-title>
+            {{ group.type }}s
+          </v-expansion-panel-title>
+          <v-expansion-panel-text eager>
+            <div class="panel customScroll">
+              <div v-for="(element, elementIndex) in group.elements" class="icon subcircuitModule"
+              :key="`${groupIndex}-${elementIndex}`" :id="`${group.type}-${elementIndex}`"
+              :data-element-id="elementIndex" :data-element-name="group.type"
+              @mousedown="dragElement(group.type, element, elementIndex)">
+              <div class="icon-image">
+                <img :src="getImgUrl(group.type)" />
+                <p class="img__description">
+                  {{ element.label !== '' ? element.label : $t('simulator.unlabeled') }}
+                </p>
+              </div>
+              </div>
+            </div>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useState } from '#/store/SimulatorStore/state'
+import { simulationArea } from '#/simulator/src/simulationArea'
+import { useLayoutStore } from '#/store/layoutStore';
+import { ref, onMounted } from 'vue';
+
+const layoutStore = useLayoutStore()
+
+const layoutElementPanelRef = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+    layoutStore.layoutElementPanelRef = layoutElementPanelRef.value
+})
+
+const SimulatorState = useState();
+
+const dragElement = (groupType: string, element: any, index: number) => {
+  element.subcircuitMetadata.showInSubcircuit = true
+  element.newElement = true
+  simulationArea.lastSelected = element
+
+  // Remove the element from subCircuitElementList
+  SimulatorState.subCircuitElementList.forEach((typeGroup) => {
+    typeGroup.elements = typeGroup.elements.filter(
+      (_, elementIndex) => {
+        if(typeGroup.type === groupType && index === elementIndex)
+        return false
+
+        return true;
+      }
+    )
+  })
+
+  // Remove the type group if its elements array is empty
+  SimulatorState.subCircuitElementList =
+    SimulatorState.subCircuitElementList.filter(
+      (typeGroup) => typeGroup.elements.length > 0
+    )
+}
+
+function getImgUrl(elementName: string) {
+  const elementImg = new URL(
+    `../../../simulator/src/img/${elementName}.svg`,
+    import.meta.url
+  ).href;
+  return elementImg;
+}
+</script>
+
+<style scoped>
+
+.layoutElementPanel {
+  width: 220px;
+  font: inherit;
+  display: none;
+  top: 90px;
+  left: 10px;
+}
+</style>

src/locales/bn.json

@@ -9,6 +9,11 @@
         "report_issue": "সমস্যা রিপোর্ট করুন",
         "restricted_elements_used": "সীমাবদ্ধ উপাদান ব্যবহৃত:",
         "made_with_circuitverse": "সার্কিটভার্স দ্বারা তৈরি",
+        "layout": {
+            "layout_elements": "লেআউট এলিমেন্টস",
+            "no_elements_available": "কোনো লেআউট এলিমেন্টস উপলব্ধ নেই"
+        },
+        "unlabeled": "অনলেবেলড",
         "nav": {
             "untitled_project": "শিরোনামহীন প্রকল্প",
             "sign_out": "সাইন আউট",

src/locales/en.json

@@ -9,6 +9,11 @@
         "report_issue": "Report an issue",
         "restricted_elements_used": "Restricted elements used:",
         "made_with_circuitverse": "Made With CircuitVerse",
+        "layout": {
+            "layout_elements": "Layout Elements",
+            "no_elements_available": "No layout elements available"
+        },
+        "unlabeled": "Unlabeled",
         "nav": {
             "untitled_project": "Untitled",
             "sign_out": "Sign Out",

src/locales/hi.json

@@ -9,6 +9,11 @@
         "report_issue": "मामले की रिपोर्ट करें",
         "restricted_elements_used": "प्रतिबंधित एलिमेंट्स जिनका इस्तेमाल किया गया:",
         "made_with_circuitverse": "सर्किटवर्स में बनाया गया",
+        "layout": {
+            "layout_elements": "लेआउट एलिमेंट्स",
+            "no_elements_available": "कोई लेआउट एलिमेंट्स उपलब्ध नहीं हैं"
+        },
+        "unlabeled": "अनलेबल्ड",
         "nav": {
             "untitled_project": "शीर्षकहीन",
             "sign_out": "साइन आउट",

src/simulator/src/ux.js

@@ -14,6 +14,8 @@ import logixFunction from './data'
 import { circuitProperty } from './circuit'
 import { updateRestrictedElementsInScope } from './restrictedElementDiv'
 import { dragging } from './drag'
+import { SimulatorStore } from '#/store/SimulatorStore/SimulatorStore'
+import { toRefs } from 'vue'
 import { circuitElementList } from './metadata'
 
 export const uxvar = {
@@ -437,51 +439,40 @@ export function fullView() {
     Fills the elements that can be displayed in the subcircuit, in the subcircuit menu
 **/
 export function fillSubcircuitElements() {
-    $('#subcircuitMenu').empty()
-    var subCircuitElementExists = false
+    const simulatorStore = SimulatorStore()
+    const { subCircuitElementList, isEmptySubCircuitElementList } = toRefs(simulatorStore)
+    subCircuitElementList.value = []
+    isEmptySubCircuitElementList.value = true
+
+    const subcircuitElements = []
+
+    let subCircuitElementExists = false
+
     for (let el of circuitElementList) {
         if (globalScope[el].length === 0) continue
         if (!globalScope[el][0].canShowInSubcircuit) continue
-        let tempHTML = ''
-
-        // add a panel for each existing group
-        tempHTML += `<div class="panelHeader">${el}s</div>`
-        tempHTML += `<div class="panel">`
 
         let available = false
 
+        const elementGroup = {
+            type: el,
+            elements: [],
+        }
+
         // add an SVG for each element
         for (let i = 0; i < globalScope[el].length; i++) {
             if (!globalScope[el][i].subcircuitMetadata.showInSubcircuit) {
-                tempHTML += `<div class="icon subcircuitModule" id="${el}-${i}" data-element-id="${i}" data-element-name="${el}">`
-                tempHTML += `<img src= "/img/${el}.svg">`
-                tempHTML += `<p class="img__description">${
-                    globalScope[el][i].label !== ''
-                        ? globalScope[el][i].label
-                        : 'unlabeled'
-                }</p>`
-                tempHTML += '</div>'
                 available = true
+                const element = globalScope[el][i];
+                elementGroup.elements.push(element);
             }
         }
-        tempHTML += '</div>'
         subCircuitElementExists = subCircuitElementExists || available
-        if (available) $('#subcircuitMenu').append(tempHTML)
-    }
+        if (available) {
+            subcircuitElements.push(elementGroup);
+        }
 
-    if (!subCircuitElementExists) {
-        $('#subcircuitMenu').append('<p>No layout elements available</p>')
+        subCircuitElementList.value = subcircuitElements
+        isEmptySubCircuitElementList.value = !subCircuitElementExists
     }
-
-    $('.subcircuitModule').mousedown(function () {
-        let elementName = this.dataset.elementName
-        let elementIndex = this.dataset.elementId
-
-        let element = globalScope[elementName][elementIndex]
-
-        element.subcircuitMetadata.showInSubcircuit = true
-        element.newElement = true
-        simulationArea.lastSelected = element
-        this.parentElement.removeChild(this)
-    })
 }

src/store/SimulatorStore/state.ts

@@ -17,8 +17,6 @@ export interface State {
     successMessages: string[]
     circuit_name_clickable: boolean;
     dialogBox: {
-        // create_circuit: boolean
-        // delete_circuit: boolean
         combinationalanalysis_dialog: boolean
         hex_bin_dec_converter_dialog: boolean
         saveimage_dialog: boolean
@@ -31,8 +29,14 @@ export interface State {
         export_project_dialog: boolean
         import_project_dialog: boolean
     }
-    // createCircuit: Object | { circuitName: string }
     combinationalAnalysis: Object
+    subCircuitElementList: Array<LayoutElementGroup>
+    isEmptySubCircuitElementList: boolean
+}
+
+interface LayoutElementGroup {
+    type: string
+    elements: any[]
 }
 
 export const useState = defineStore({
@@ -47,8 +51,6 @@ export const useState = defineStore({
             successMessages: [],
             circuit_name_clickable: false,
             dialogBox: {
-                // create_circuit: false,
-                // delete_circuit: false,
                 combinationalanalysis_dialog: false,
                 hex_bin_dec_converter_dialog: false,
                 saveimage_dialog: false,
@@ -61,15 +63,14 @@ export const useState = defineStore({
                 export_project_dialog: false,
                 import_project_dialog: false,
             },
-            // createCircuit: {
-            //     circuitName: 'Untitled Circuit',
-            // },
             combinationalAnalysis: {
                 inputNameList: 'eg. In A, In B',
                 outputNameList: 'eg. Out X, Out Y',
                 booleanExpression: 'Example: (AB)',
                 decimalColumnBox: false,
             },
+            subCircuitElementList: [],
+            isEmptySubCircuitElementList: true,
         }
     },
-})
+})

src/styles/css/main.stylesheet.css

@@ -661,14 +661,6 @@ div.icon img {
     right: 10px;
 }
 
-.layoutElementPanel {
-    width: 220px;
-    font: inherit;
-    display: none;
-    top: 90px;
-    left: 10px;
-}
-
 .timing-diagram-panel {
     border-radius: 5px;
     z-index: 70;