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

src/components/Extra.vue

@@ -16,19 +16,7 @@
 
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- Layout Element Panel -->
-    <div
-        class="noSelect defaultCursor layoutElementPanel draggable-panel draggable-panel-css"
-    >
-        <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 />
     <!-- --------------------------------------------------------------------------------------------- -->
 
     <!-- --------------------------------------------------------------------------------------------- -->
@@ -320,4 +308,6 @@ 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 LayoutProperty from './Panels/PropertiesPanel/LayoutProperty/LayoutProperty.vue'
 </script>

src/components/Panels/LayoutElementsPanel/LayoutElementsPanel.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="noSelect defaultCursor layoutElementPanel draggable-panel draggable-panel-css">
+    <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 v-for="(group, groupIndex) in SimulatorState.subCircuitElementList" :key="groupIndex">
+          <div class="panelHeader">{{ group.type }}s</div>
+          <div class="panel">
+            <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="`/img/${group.type}.svg`" />
+                <p class="img__description">
+                  {{ element.label !== '' ? element.label : 'unlabeled' }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="SimulatorState.subCircuitElementList.length === 0">
+          <p>No layout elements available</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useState } from '#/store/SimulatorStore/state'
+import { simulationArea } from '#/simulator/src/simulationArea'
+
+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
+    )
+}
+</script>
+
+<style scoped>
+
+.layoutElementPanel {
+  width: 220px;
+  font: inherit;
+  display: none;
+  top: 90px;
+  left: 10px;
+}
+</style>

src/simulator/src/ux.js

@@ -15,6 +15,8 @@ import { circuitProperty } from './circuit'
 import { updateRestrictedElementsInScope } from './restrictedElementDiv'
 import { updateTestbenchUI, setupTestbenchUI } from './testbench'
 import { dragging } from './drag'
+import { SimulatorStore } from '#/store/SimulatorStore/SimulatorStore'
+import { toRefs } from 'vue'
 
 export const uxvar = {
     smartDropXX: 50,
@@ -440,55 +442,44 @@ export function fullView() {
     exitViewEl.addEventListener('click', exitFullView)
 }
 
-/** 
+/**
     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

@@ -11,8 +11,6 @@ export interface State {
           }
     circuit_list: Array<Object>
     dialogBox: {
-        // create_circuit: boolean
-        // delete_circuit: boolean
         combinationalanalysis_dialog: boolean
         hex_bin_dec_converter_dialog: boolean
         saveimage_dialog: boolean
@@ -25,8 +23,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({
@@ -38,8 +42,6 @@ export const useState = defineStore({
             activeCircuit: {},
             circuit_list: [],
             dialogBox: {
-                // create_circuit: false,
-                // delete_circuit: false,
                 combinationalanalysis_dialog: false,
                 hex_bin_dec_converter_dialog: false,
                 saveimage_dialog: false,
@@ -52,15 +54,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;