feat(gsoc'24): Mobile view Implementation for vue simulator (#361)

* feat(gsoc'24): Mobile view Circuit Elements panel component Implemented * feat(gsoc'24): Quick button mobile component implemented * mobile touch implemented * updated * feat: timming diagram implemented for mobile view * added toggle button and horizontal scroll for btns * updated * added selection tool * Removed bug from previous commit * Enable touch for embed simulator * Double tap implemented * Romoving clarity error * updated to latest (listeners.js file) * fixed event bug * copy paste implementation * copy paste fixed * properties panel mobile implemented * updated * layout mode components for mobile view * added sidebar and upated the navbar layout, and other refactoring * small bug fixes and responsiveness * verilog editor panel implemented with some navbar ui fixes * verilog mode toggle fix * tabs for verilog fixed * removed some used code * updated * fixed * fixed * Update src/components/Panels/ElementsPanel/ElementsPanel.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update src/store/simulatorMobileStore.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update src/components/Panels/TimingDiagramPanel/TimingDiagramPanel.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update src/components/Panels/PropertiesPanel/PropertiesPanel.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update src/simulator/src/Verilog2CV.js Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fixed * updated --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
CircuitVerse · Sep 1, 2024 · cb13645 · cb13645
1 parent 2c53abb
commit cb13645
Show file tree

Hide file tree

Showing 50 changed files with 2,625 additions and 723 deletions.
diff --git a/src/components/Extra.vue b/src/components/Extra.vue
@@ -1,4 +1,6 @@
 <template>
+    <QuickButtonMobile v-if="simulatorMobileStore.showQuickButtons && simulatorMobileStore.showMobileView" />
+    <TimingDiagramMobile v-if="simulatorMobileStore.showMobileView" v-show="simulatorMobileStore.showTimingDiagram" />
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- TabsBar -->
     <TabsBar />
@@ -11,7 +13,7 @@
 
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- Circuit Elements Panel -->
-    <ElementsPanel />
+    <ElementsPanel v-if="!simulatorMobileStore.showMobileView"/>
     <!-- --------------------------------------------------------------------------------------------- -->
 
     <!-- --------------------------------------------------------------------------------------------- -->
@@ -21,14 +23,14 @@
 
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- Timing Diagram Panel -->
-    <TimingDiagramPanel />
+    <TimingDiagramPanel v-if="!simulatorMobileStore.showMobileView" />
     <!-- --------------------------------------------------------------------------------------------- -->
 
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- Testbench -->
-    <TestBenchPanel />
+    <TestBenchPanel v-if="!simulatorMobileStore.showMobileView" />
     <!-- --------------------------------------------------------------------------------------------- -->
-    <TestBenchCreator />
+    <TestBenchCreator v-if="!simulatorMobileStore.showMobileView" />
     <!-- --------------------------------------------------------------------------------------------- -->
 
     <!-- --------------------------------------------------------------------------------------------- -->
@@ -41,12 +43,17 @@
 
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- Verilog Editor Panel -->
-    <VerilogEditorPanel />
+    <VerilogEditorPanel v-if="!simulatorMobileStore.showMobileView" />
+
+    <div id="code-window" class="code-window">
+        <textarea id="codeTextArea"></textarea>
+    </div>
+    <VerilogEditorPanelMobile v-if="simulatorMobileStore.showMobileView && simulatorMobileStore.showVerilogPanel" />
     <!-- --------------------------------------------------------------------------------------------- -->
 
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- Element Properties Panel -->
-    <PropertiesPanel />
+    <PropertiesPanel v-if="!simulatorMobileStore.showMobileView" />
     <!-- --------------------------------------------------------------------------------------------- -->
 
     <!-- --------------------------------------------------------------------------------------------- -->
@@ -86,14 +93,41 @@
                     width: 100%;
                     height: 100%;
                 "></canvas>
-            <canvas id="simulationArea" style="
+            <canvas
+                    id="simulationArea"
+                    style="
                     position: absolute;
                     left: 0;
                     top: 0;
                     z-index: 1;
                     width: 100%;
                     height: 100%;
-                "></canvas>
+                    "
+                    @touchstart="(e) => {
+                        simulationArea.touch = true;
+                        panStart(e)
+                    }"
+                    @touchend="(e) => {
+                        simulationArea.touch = true;
+                        panStop(e)
+                    }"
+                    @touchmove="(e) => {
+                        simulationArea.touch = true;
+                        panMove(e)
+                    }"
+                    @mousedown="(e) => {
+                        simulationArea.touch = false;
+                        panStart(e)
+                    }"
+                    @mousemove="(e) => {
+                        simulationArea.touch = false;
+                        panMove(e)
+                    }"
+                    @mouseup="(e) => {
+                        simulationArea.touch = false;
+                        panStop(e)
+                    }"
+            ></canvas>
             <div id="miniMap">
                 <canvas id="miniMapArea" style="position: absolute; left: 0; top: 0; z-index: 3"></canvas>
             </div>
@@ -143,10 +177,77 @@
     <!---issue reporting-system----->
     <ReportIssue />
     <!-- --------------------------------------------------------------------------------------------- -->
+
+    <v-btn
+      class="cir-ele-btn"
+      @mousedown="simulatorMobileStore.showElementsPanel = !simulatorMobileStore.showElementsPanel"
+      :style="{bottom: simulatorMobileStore.showElementsPanel ? '10rem' : '2rem'}"
+      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && !simulatorMobileStore.isVerilog"
+    >
+        <i class="fas fa-bezier-curve"></i>
+    </v-btn>
+
+    <v-btn
+      class="cir-btn"
+      @mousedown="(e: React.MouseEvent) => {
+        if(simulationArea.shiftDown == false) {
+            simulationArea.shiftDown = true;
+            selectMultiple = true;
+        }
+        else {
+            simulationArea.shiftDown = false;
+            selectMultiple = false;
+            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
+      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
+      class="cir-btn"
+      @mousedown="copyBtnClick()"
+      :style="{bottom: simulatorMobileStore.showElementsPanel ? '16rem' : '8rem'}"
+      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && !simulatorMobileStore.isCopy && !simulatorMobileStore.isVerilog"
+    >
+        <i class="fa-solid fa-copy"></i>
+    </v-btn>
+
+    <v-btn
+      class="cir-btn"
+      @mousedown="pasteBtnClick()"
+      :style="{bottom: simulatorMobileStore.showElementsPanel ? '16rem' : '8rem'}"
+      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && simulatorMobileStore.isCopy && !simulatorMobileStore.isVerilog"
+    >
+        <i class="fa-solid fa-paste"></i>
+    </v-btn>
+
+    <v-btn
+      class="cir-btn"
+      @mousedown="propertiesBtnClick()"
+      :style="{bottom: simulatorMobileStore.showElementsPanel ? `${propertiesPanelPos.up}rem` : `${propertiesPanelPos.down}rem`}"
+      v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView"
+    >
+        <i class="fa-solid fa-sliders"></i>
+    </v-btn>
+
+    <ElementsPanelMobile v-if="simulatorMobileStore.showMobileView" />
+    <PropertiesPanelMobile v-if="simulatorMobileStore.showMobileView" />
 </template>
 
 <script lang="ts" setup>
 import VerilogEditorPanel from './Panels/VerilogEditorPanel/VerilogEditorPanel.vue'
+import VerilogEditorPanelMobile from './Panels/VerilogEditorPanel/VerilogEditorPanelMobile.vue'
 import ElementsPanel from './Panels/ElementsPanel/ElementsPanel.vue'
 import PropertiesPanel from './Panels/PropertiesPanel/PropertiesPanel.vue'
 import TimingDiagramPanel from './Panels/TimingDiagramPanel/TimingDiagramPanel.vue'
@@ -164,5 +265,90 @@ import LayoutElementsPanel from './Panels/LayoutElementsPanel/LayoutElementsPane
 import TestBenchPanel from './Panels/TestBenchPanel/TestBenchPanel.vue'
 import TestBenchCreator from './Panels/TestBenchPanel/TestBenchCreator.vue'
 import TestBenchValidator from './Panels/TestBenchPanel/TestBenchValidator.vue'
+import QuickButtonMobile from './Navbar/QuickButton/QuickButtonMobile.vue'
+import TimingDiagramMobile from './Panels/TimingDiagramPanel/TimingDiagramMobile.vue'
+import ElementsPanelMobile from './Panels/ElementsPanel/ElementsPanelMobile.vue'
+import PropertiesPanelMobile from './Panels/PropertiesPanel/PropertiesPanelMobile.vue'
+import { simulationArea } from '#/simulator/src/simulationArea'
+import { paste } from '#/simulator/src/events'
+import  { panStart, panMove, panStop } from '#/simulator/src/listeners'
+import { useSimulatorMobileStore } from '#/store/simulatorMobileStore'
 import { useState } from '#/store/SimulatorStore/state'
-</script>
+import { reactive, ref, watch } from 'vue'
+
+const simulatorMobileStore = useSimulatorMobileStore()
+const selectMultiple = ref(false)
+const propertiesPanelPos = reactive({
+    up: 22,
+    down: 14
+});
+
+watch(() => simulatorMobileStore.isVerilog, (val) => {
+    if (val) {
+        propertiesPanelPos.up = 10
+        propertiesPanelPos.down = 2
+    } else {
+        propertiesPanelPos.up = 22
+        propertiesPanelPos.down = 14
+    }
+})
+
+const copyBtnClick = () => {
+    window.document.execCommand('copy')
+    simulationArea.shiftDown = false
+    simulatorMobileStore.isCopy = true
+}
+
+const pasteBtnClick = () => {
+    paste(localStorage.getItem('clipboardData'));
+    simulatorMobileStore.isCopy = false
+}
+
+const propertiesBtnClick = () => {
+    simulatorMobileStore.showPropertiesPanel = !simulatorMobileStore.showPropertiesPanel
+}
+</script>
+
+<style scoped>
+.cir-ele-btn, .cir-verilog-btn {
+    position: absolute;
+    right: 1.5rem;
+    bottom: 15rem;
+    z-index: 90;
+    background-color: var(--bg-toggle-btn-primary);
+    color: white;
+    border-radius: 100%;
+    font-size: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    transition: 0.3s;
+    padding: 1rem;
+    height: 4rem;
+    width: 4rem;
+}
+
+.cir-verilog-btn {
+    bottom: 2rem;
+}
+
+.cir-btn{
+    position: absolute;
+    left: 1.5rem;
+    bottom: 2rem;
+    z-index: 90;
+    background-color: var(--bg-toggle-btn-primary);
+    color: white;
+    border-radius: 100%;
+    font-size: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    transition: 0.3s;
+    padding: 1rem;
+    height: 4rem;
+    width: 4rem;
+}
+</style>
diff --git a/src/components/Logo/Logo.vue b/src/components/Logo/Logo.vue
@@ -1,7 +1,7 @@
 <template>
-    <router-link to="/">
+    <a href="/">
         <span :class="cvlogo"></span>
-    </router-link>
+    </a>
 </template>
 
 <script>