feat(gsoc'24): circuit file converted to typescript + vue and array interface extension (CircuitVerse#336)

circuit file converted to typescript + vue and array interface extenstion

Author: niladrix719

src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue

@@ -15,13 +15,14 @@
     <p>
         <span>Circuit:</span>
         <input
+            :ref="circnameInput"
             id="circname"
-            :key="SimulatorState.activeCircuit.id"
+            :key="SimulatorState.activeCircuit?.id"
             class="objectPropertyAttribute"
             type="text"
             autocomplete="off"
             name="changeCircuitName"
-            :value="SimulatorState.activeCircuit.name"
+            :value="SimulatorState.activeCircuit?.name"
         />
     </p>
 
@@ -104,9 +105,20 @@ import { useState } from '#/store/SimulatorStore/state'
 import { useProjectStore } from '#/store/projectStore'
 // import DeleteCircuit from '#/components/helpers/deleteCircuit/DeleteCircuit.vue'
 import { closeCircuit } from '#/components/helpers/deleteCircuit/DeleteCircuit.vue'
+import { watch } from 'vue'
+import { ref } from 'vue'
 
 const projectStore = useProjectStore()
 const SimulatorState = <SimulatorStateType>useState()
+const circnameInput = ref<HTMLInputElement | null>(null)
+
+watch(() => SimulatorState.circuit_name_clickable, () => {
+    setTimeout(() => {
+        if (circnameInput.value && SimulatorState.circuit_name_clickable) {
+            circnameInput.value.select()
+        }
+    }, 100)
+})
 // const circuitId: Ref<string | number> = ref(0)
 // const circuitName: Ref<string> = ref('Untitled-Cirucit')
 // const ifPersistentShow: Ref<boolean> = ref(false)
@@ -125,6 +137,7 @@ type SimulatorStateType = {
     dialogBox: {
         delete_circuit: boolean
     }
+    circuit_name_clickable: boolean
 }
 
 // type CircuitItem = {

src/components/TabsBar/TabsBar.vue

@@ -29,7 +29,7 @@
                     draggable="true"
                     @click="switchCircuit(element.id)"
                 >
-                    <span class="circuitName noSelect">
+                    <span class="circuitName noSelect" @mousedown="circuitNameClicked">
                         {{ truncateString(element.name, 18) }}
                     </span>
                     <span
@@ -79,8 +79,9 @@ import {
 // import MessageBox from '#/components/MessageBox/messageBox.vue'
 import { useState } from '#/store/SimulatorStore/state'
 import { closeCircuit } from '../helpers/deleteCircuit/DeleteCircuit.vue'
+import { circuitNameClicked } from '#/simulator/src/circuit'
 
-const SimulatorState = <SimulatorStateType>useState()
+const SimulatorState = useState()
 const drag: Ref<boolean> = ref(false)
 const updateCount: Ref<number> = ref(0)
 
@@ -112,13 +113,6 @@ function toggleHeight() {
 //     focussed: boolean
 // }
 
-type SimulatorStateType = {
-    circuit_list: Array<Object>
-    dialogBox: {
-        create_circuit: boolean
-    }
-}
-
 // type InputArrType = {
 //     text: string
 //     val: string
@@ -285,7 +279,7 @@ function isEmbed(): boolean {
 </script>
 
 <style scoped>
-#tabsBar{
+#tabsBar {
     padding-right: 50px;
     position: relative;
     overflow: hidden;
@@ -314,7 +308,7 @@ function isEmbed(): boolean {
 }
 
 #tabsBar button {
-    font-size: 1rem; 
+    font-size: 1rem;
     height: 20px;
     width: 20px;
 }
@@ -339,11 +333,11 @@ function isEmbed(): boolean {
     max-height: 30px;
 }
 
-.toolbarButton{
+.toolbarButton {
     height: 22px;
 }
 
-.tabsbar-toggle{
+.tabsbar-toggle {
     position: absolute;
     right: 2.5px;
     top: 2.5px;
@@ -359,10 +353,9 @@ function isEmbed(): boolean {
 }
 
 
-.tabsbar-close{
-    font-size: 1rem; 
+.tabsbar-close {
+    font-size: 1rem;
 }
-
 </style>
 
 <!-- TODO: add types for scopelist and fix key issue with draggable -->

src/components/helpers/deleteCircuit/DeleteCircuit.vue

@@ -112,13 +112,13 @@ export function closeCircuit(circuitItem: CircuitItem): void {
  * @category circuit
  */
 export function deleteCurrentCircuit(
-    scopeId: string | number = globalScope.id ?? useState().activeCircuit.id
+    scopeId: string | number = globalScope.id ?? useState().activeCircuit?.id
 ) {
     const SimulatorState = <SimulatorStateType>useState()
     const circuit_list = SimulatorState.circuit_list
     let scope = scopeList[scopeId]
     if (scope == undefined)
-        scope = scopeList[globalScope.id ?? SimulatorState.activeCircuit.id]
+        scope = scopeList[globalScope.id ?? SimulatorState.activeCircuit?.id]
 
     if (scope.verilogMetadata.isVerilogCircuit) {
         scope.initialize()
@@ -130,7 +130,7 @@ export function deleteCurrentCircuit(
     )
     circuit_list.splice(index, 1)
     delete scopeList[scope.id]
-    if (scope.id == globalScope.id ?? SimulatorState.activeCircuit.id) {
+    if (scope.id == globalScope.id ?? SimulatorState.activeCircuit?.id) {
         switchCircuit(Object.keys(scopeList)[0])
     }
     showMessage('Circuit was successfully closed')

src/env.d.ts

@@ -1,5 +1,11 @@
 /// <reference types="vite/client" />
 
+interface Array<T> {
+    clean(deleteValue: T): T[]
+    extend(otherArray: T[]): void
+    contains(value: T): boolean
+}
+
 declare module '*.vue' {
     import type { DefineComponent } from 'vue'
     // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types