fix: Resolve Verilog compilation stuck issue in Tauri desktop app

package.json

@@ -18,6 +18,7 @@
     "@mdi/font": "5.9.55",
     "@mdi/js": "^7.4.47",
     "@tauri-apps/api": "2.3.0",
+    "@tauri-apps/plugin-http": "^2.4.0",
     "@tauri-apps/plugin-fs": "2.2.0",
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-character-count": "^2.0.3",
@@ -76,4 +77,4 @@
   "optionalDependencies": {
     "esbuild-linux-64": "^0.15.18"
   }
-}
+}

src-tauri/capabilities/default.json

@@ -17,6 +17,9 @@
         },
         {
           "url": "https://circuitverse.org/api/v1/auth/signup"
+        },
+        {
+          "url": "https://circuitverse.org/api/v1/simulator/verilogcv"
         }
       ]
     },

src/components/Extra.vue

@@ -85,7 +85,8 @@
     <div id="simulation" class="simulation">
         <!-- <div id="restrictedDiv" class="alert alert-danger display--none"></div> -->
         <div id="canvasArea" class="canvasArea">
-            <canvas id="backgroundArea" style="
+            <canvas
+id="backgroundArea" style="
                     position: absolute;
                     left: 0;
                     top: 0;
@@ -133,7 +134,8 @@
             </div>
 
             <div id="Help"></div>
-            <div class="sk-folding-cube loadingIcon" style="
+            <div
+class="sk-folding-cube loadingIcon" style="
                     display: none;
                     position: absolute;
                     right: 50%;
@@ -179,16 +181,18 @@
     <!-- --------------------------------------------------------------------------------------------- -->
 
     <v-btn
+      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && !simulatorMobileStore.isVerilog"
       class="cir-ele-btn"
-      @mousedown="simulatorMobileStore.showElementsPanel = !simulatorMobileStore.showElementsPanel"
       :style="{bottom: simulatorMobileStore.showElementsPanel ? '10rem' : '2rem'}"
-      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && !simulatorMobileStore.isVerilog"
+      @mousedown="simulatorMobileStore.showElementsPanel = !simulatorMobileStore.showElementsPanel"
     >
         <i class="fas fa-bezier-curve"></i>
     </v-btn>
 
     <v-btn
+      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && !simulatorMobileStore.isVerilog"
       class="cir-btn"
+      :style="{bottom: simulatorMobileStore.showElementsPanel ? '10rem' : '2rem', backgroundColor: selectMultiple ? 'var(--primary)' : 'var(--bg-toggle-btn-primary)'}"
       @mousedown="(e: React.MouseEvent) => {
         if(simulationArea.shiftDown == false) {
             simulationArea.shiftDown = true;
@@ -200,43 +204,41 @@
             e.preventDefault();
         }
       }"
-      :style="{bottom: simulatorMobileStore.showElementsPanel ? '10rem' : '2rem', backgroundColor: selectMultiple ? 'var(--primary)' : 'var(--bg-toggle-btn-primary)'}"
-      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && !simulatorMobileStore.isVerilog"
     >
         <i class="fa-solid fa-vector-square"></i>
     </v-btn>
 
     <v-btn
+      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.isVerilog && simulatorMobileStore.showMobileView"
       class="cir-verilog-btn"
       @mousedown="simulatorMobileStore.showVerilogPanel = !simulatorMobileStore.showVerilogPanel"
-      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.isVerilog && simulatorMobileStore.showMobileView"
     >
         <i class="fa-solid fa-gears"></i>
     </v-btn>
 
     <v-btn
+      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && !simulatorMobileStore.isCopy && !simulatorMobileStore.isVerilog"
       class="cir-btn"
-      @mousedown="copyBtnClick()"
       :style="{bottom: simulatorMobileStore.showElementsPanel ? '16rem' : '8rem'}"
-      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && !simulatorMobileStore.isCopy && !simulatorMobileStore.isVerilog"
+      @mousedown="copyBtnClick()"
     >
         <i class="fa-solid fa-copy"></i>
     </v-btn>
 
     <v-btn
+      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && simulatorMobileStore.isCopy && !simulatorMobileStore.isVerilog"
       class="cir-btn"
-      @mousedown="pasteBtnClick()"
       :style="{bottom: simulatorMobileStore.showElementsPanel ? '16rem' : '8rem'}"
-      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && simulatorMobileStore.isCopy && !simulatorMobileStore.isVerilog"
+      @mousedown="pasteBtnClick()"
     >
         <i class="fa-solid fa-paste"></i>
     </v-btn>
 
     <v-btn
+      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView"
       class="cir-btn"
-      @mousedown="propertiesBtnClick()"
       :style="{bottom: simulatorMobileStore.showElementsPanel ? `${propertiesPanelPos.up}rem` : `${propertiesPanelPos.down}rem`}"
-      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView"
+      @mousedown="propertiesBtnClick()"
     >
         <i class="fa-solid fa-sliders"></i>
     </v-btn>

src/components/Panels/TestBenchPanel/TestBenchPanel.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="testbench-manual-panel draggable-panel noSelect defaultCursor" ref="testbenchPanelRef">
+    <div ref="testbenchPanelRef" class="testbench-manual-panel draggable-panel noSelect defaultCursor">
         <div class="panel-header">
             Testbench
             <span class="fas fa-minus-square minimize panel-button"></span>
@@ -13,38 +13,44 @@
                     <span id="data-type" class="tb-data"><b>Type:</b> <span>{{ testData.type === 'comb' ?
                             'Combinational' : 'Sequential' }}</span></span>
                 </div>
-                <button id="edit-test-btn" @mousedown="buttonListenerFunctions.editTestButton()"
-                    class="custom-btn--basic panel-button tb-dialog-button">
+                <button
+id="edit-test-btn" class="custom-btn--basic panel-button tb-dialog-button"
+                    @mousedown="buttonListenerFunctions.editTestButton()">
                     Edit
                 </button>
-                <button id="remove-test-btn" @mousedown="buttonListenerFunctions.removeTestButton()"
-                    class="custom-btn--tertiary panel-button tb-dialog-button">
+                <button
+id="remove-test-btn" class="custom-btn--tertiary panel-button tb-dialog-button"
+                    @mousedown="buttonListenerFunctions.removeTestButton()">
                     Remove
                 </button>
             </div>
             <div style="overflow: auto; margin-bottom: 10px">
                 <div class="tb-manual-test-buttons tb-group-buttons">
                     <span style="line-height: 24px; margin-right: 5px"><b>Group: </b></span>
-                    <button id="prev-group-btn" @mousedown="buttonListenerFunctions.previousGroupButton()"
-                        class="custom-btn--basic panel-button tb-case-button-left tb-case-button">
+                    <button
+id="prev-group-btn" class="custom-btn--basic panel-button tb-case-button-left tb-case-button"
+                        @mousedown="buttonListenerFunctions.previousGroupButton()">
                         <i class="tb-case-arrow tb-case-arrow-left"></i>
                     </button>
                     <span class="tb-test-label group-label"> {{ testData.groups[testBenchStore.testbenchData.currentGroup].label
                         }}</span>
-                    <button id="next-group-btn" @mousedown="buttonListenerFunctions.nextGroupButton()"
-                        class="custom-btn--basic panel-button tb-case-button-right tb-case-button">
+                    <button
+id="next-group-btn" class="custom-btn--basic panel-button tb-case-button-right tb-case-button"
+                        @mousedown="buttonListenerFunctions.nextGroupButton()">
                         <i class="tb-case-arrow tb-case-arrow-right"></i>
                     </button>
                 </div>
                 <div class="tb-manual-test-buttons tb-case-buttons">
                     <span style="line-height: 24px; margin-right: 5px"><b>Case: </b></span>
-                    <button id="prev-case-btn" @mousedown="buttonListenerFunctions.previousCaseButton()"
-                        class="custom-btn--basic panel-button tb-case-button-left tb-case-button">
+                    <button
+id="prev-case-btn" class="custom-btn--basic panel-button tb-case-button-left tb-case-button"
+                        @mousedown="buttonListenerFunctions.previousCaseButton()">
                         <i class="tb-case-arrow tb-case-arrow-left"></i>
                     </button>
                     <span class="tb-test-label case-label"> {{ currentCase + 1 }}</span>
-                    <button id="next-case-btn" @mousedown="buttonListenerFunctions.nextCaseButton()"
-                        class="custom-btn--basic panel-button tb-case-button-right tb-case-button">
+                    <button
+id="next-case-btn" class="custom-btn--basic panel-button tb-case-button-right tb-case-button"
+                        @mousedown="buttonListenerFunctions.nextCaseButton()">
                         <i class="tb-case-arrow tb-case-arrow-right"></i>
                     </button>
                 </div>
@@ -74,18 +80,20 @@
             </div>
             <div style="display: table; margin-top: 20px; margin-left: 8px">
                 <div class="testbench-manual-panel-buttons">
-                    <button id="validate-btn" @mousedown="buttonListenerFunctions.validateButton()"
-                        class="custom-btn--basic panel-button tb-dialog-button">
+                    <button
+id="validate-btn" class="custom-btn--basic panel-button tb-dialog-button"
+                        @mousedown="buttonListenerFunctions.validateButton()">
                         Validate
                     </button>
-                    <button id="runall-btn" @mousedown="buttonListenerFunctions.runAllButton()"
-                        class="custom-btn--primary panel-button tb-dialog-button">
+                    <button
+id="runall-btn" class="custom-btn--primary panel-button tb-dialog-button"
+                        @mousedown="buttonListenerFunctions.runAllButton()">
                         Run All
                     </button>
                 </div>
                 <span v-if="testBenchStore.showPassed">
                     <span>{{ testBenchStore.passed }} out of {{ testBenchStore.total }}</span> Tests Passed
-                    <span @mousedown="openCreator('result')" :style="{ color: '#18a2cd' }">View Detailed</span>
+                    <span :style="{ color: '#18a2cd' }" @mousedown="openCreator('result')">View Detailed</span>
                 </span>
             </div>
         </div>
@@ -94,8 +102,9 @@
                 <div style="margin-bottom: 10px; overflow: auto">
                     <p><i>No Test is attached to the current circuit</i></p>
                 </div>
-                <button id="attach-test-btn" @mousedown="buttonListenerFunctions.attachTestButton()"
-                    class="custom-btn--primary panel-button tb-dialog-button">
+                <button
+id="attach-test-btn" class="custom-btn--primary panel-button tb-dialog-button"
+                    @mousedown="buttonListenerFunctions.attachTestButton()">
                     Attach Test
                 </button>
             </div>

src/components/Panels/TimingDiagramPanel/TimingDiagramMobile.vue

@@ -17,7 +17,8 @@
             </div>
             {{ $t('simulator.panel_body.timing_diagram.one_cycle') }}
             <div>
-                <input id="timing-diagram-units" type="number" min="1" autocomplete="off" :value="timingDiagramPanelStore.cycleUnits"
+                <input
+id="timing-diagram-units" type="number" min="1" autocomplete="off" :value="timingDiagramPanelStore.cycleUnits"
                     @change="handleUnitsChange" @paste="handleUnitsChange" @keyup="handleUnitsChange" />
                 {{ $t('simulator.panel_body.timing_diagram.units') }}
             </div>

src/components/Panels/TimingDiagramPanel/TimingDiagramPanel.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="timing-diagram-panel draggable-panel" ref="timingDiagramPanelRef" id="time-Diagram">
+    <div id="time-Diagram" ref="timingDiagramPanelRef" class="timing-diagram-panel draggable-panel">
         <!-- Timing Diagram Panel -->
         <PanelHeader
             :header-title="$t('simulator.panel_header.timing_diagram')"