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

src/components/Extra.vue

@@ -1,4 +1,6 @@
 <template>
+    <QuickButtonMobile v-if="simulatorMobileStore.showMobileView" />
+    <TimingDiagramMobile v-if="simulatorMobileStore.showMobileView" v-show="simulatorMobileStore.showTimingDiagram" />
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- TabsBar -->
     <TabsBar />
@@ -11,12 +13,13 @@
 
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- Circuit Elements Panel -->
-    <ElementsPanel />
+    <ElementsPanel  v-if="!simulatorMobileStore.showMobileView"/>
     <!-- --------------------------------------------------------------------------------------------- -->
 
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- Layout Element Panel -->
     <div
+        v-if="!simulatorMobileStore.showMobileView"
         class="noSelect defaultCursor layoutElementPanel draggable-panel draggable-panel-css"
         ref="layoutElementPanelRef"
     >
@@ -34,14 +37,14 @@
 
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- Timing Diagram Panel -->
-    <TimingDiagramPanel />
+    <TimingDiagramPanel v-if="!simulatorMobileStore.showMobileView" />
     <!-- --------------------------------------------------------------------------------------------- -->
 
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- Testbench -->
-    <TestBenchPanel />
+    <TestBenchPanel v-if="!simulatorMobileStore.showMobileView" />
     <!-- --------------------------------------------------------------------------------------------- -->
-    <TestBenchCreator />
+    <TestBenchCreator v-if="!simulatorMobileStore.showMobileView" />
     <!-- --------------------------------------------------------------------------------------------- -->
 
     <!-- --------------------------------------------------------------------------------------------- -->
@@ -59,7 +62,7 @@
 
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- Element Properties Panel -->
-    <PropertiesPanel />
+    <PropertiesPanel v-if="!simulatorMobileStore.showMobileView" />
     <!-- --------------------------------------------------------------------------------------------- -->
 
     <!-- --------------------------------------------------------------------------------------------- -->
@@ -99,14 +102,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>
@@ -156,6 +186,62 @@
     <!---issue reporting-system----->
     <ReportIssue />
     <!-- --------------------------------------------------------------------------------------------- -->
+
+    <v-btn
+      class="cir-ele-btn"
+      @mousedown="simulatorMobileStore.showElementsPanel = !simulatorMobileStore.showElementsPanel"
+      :style="{bottom: simulatorMobileStore.showElementsPanel ? '10rem' : '2rem'}"
+      v-if="simulatorMobileStore.showMobileView"
+    >
+        <i class="fas fa-bezier-curve"></i>
+    </v-btn>
+
+    <v-btn
+      class="select-mul-btn"
+      @mousedown="(e: React.MouseEvent) => {
+        if(simulationArea.shiftDown == false) {
+            simulationArea.shiftDown = true;
+        }
+        else {
+            simulationArea.shiftDown = false;
+            e.preventDefault();
+        }
+      }"
+      :style="{bottom: simulatorMobileStore.showElementsPanel ? '10rem' : '2rem'}"
+      v-if="simulatorMobileStore.showMobileView"
+    >
+    <i class="fa-solid fa-vector-square"></i>
+    </v-btn>
+
+    <v-btn
+      class="select-mul-btn"
+      @mousedown="copyBtnClick()"
+      :style="{bottom: simulatorMobileStore.showElementsPanel ? '16rem' : '8rem'}"
+      v-if="simulatorMobileStore.showMobileView && !simulatorMobileStore.isCopy"
+    >
+    <i class="fa-solid fa-copy"></i>
+    </v-btn>
+
+    <v-btn
+      class="select-mul-btn"
+      @mousedown="pasteBtnClick()"
+      :style="{bottom: simulatorMobileStore.showElementsPanel ? '16rem' : '8rem'}"
+      v-if="simulatorMobileStore.showMobileView && simulatorMobileStore.isCopy"
+    >
+    <i class="fa-solid fa-paste"></i>
+    </v-btn>
+
+    <v-btn
+      class="select-mul-btn"
+      @mousedown="propertiesBtnClick()"
+      :style="{bottom: simulatorMobileStore.showElementsPanel ? '22rem' : '14rem'}"
+      v-if="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>
@@ -176,5 +262,79 @@ import ReportIssue from './ReportIssue/ReportIssue.vue'
 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 { useLayoutStore } from '#/store/layoutStore'
+import  { panStart, panMove, panStop } from '#/simulator/src/listeners'
+import { useSimulatorMobileStore } from '#/store/simulatorMobileStore'
 import { useState } from '#/store/SimulatorStore/state'
-</script>
+import { onMounted, ref } from 'vue'
+
+const layoutStore = useLayoutStore()
+const simulatorMobileStore = useSimulatorMobileStore()
+
+const layoutElementPanelRef = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+    layoutStore.layoutElementPanelRef = layoutElementPanelRef.value
+})
+
+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{
+    position: absolute;
+    right: 1.5rem;
+    bottom: 15rem;
+    z-index: 100;
+    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;
+}
+
+.select-mul-btn{
+    position: absolute;
+    left: 1.5rem;
+    bottom: 2rem;
+    z-index: 100;
+    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>

src/components/Navbar/Navbar.vue

@@ -15,13 +15,14 @@
             <User :user-data="userDropdownItems" />
         </div>
     </nav>
-    <QuickButton />
+    <QuickButton v-if="!simulatorMobileStore.showMobileView" />
 </template>
 
 <script lang="ts" setup>
 import QuickButton from '@/Navbar/QuickButton/QuickButton.vue'
 import User from '@/Navbar/User/User.vue'
 import NavbarLinks from '@/Navbar/NavbarLinks/NavbarLinks.vue'
+import { useSimulatorMobileStore } from '#/store/simulatorMobileStore'
 
 import navbarData from '#/assets/constants/Navbar/NAVBAR_DATA.json'
 import userDropdownItems from '#/assets/constants/Navbar/USER_DATA.json'
@@ -35,6 +36,7 @@ const navbarLogo = ref('logo')
 const minWidthToShowSidebar = ref(992)
 const showSidebar = ref(false)
 const projectStore = useProjectStore()
+const simulatorMobileStore = useSimulatorMobileStore()
 showSidebar.value =
     window.innerWidth < minWidthToShowSidebar.value ? true : false
 onMounted(() => {

src/components/Navbar/QuickButton/QuickButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="quick-btn" @ondragover="dragover">
+    <div class="quick-btn" id='quick-btn-id' @ondragover="dragover">
         <div id="dragQPanel" class="panel-drag">
             <!-- <DragSvgDots /> -->
             <div class="drag-dot-svg"></div>