Skip to content

Commit cb13645

Browse files
niladrix719coderabbitai[bot]
niladrix719
and
coderabbitai[bot]
authored
feat(gsoc'24): Mobile view Implementation for vue simulator (CircuitVerse#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>
1 parent 2c53abb commit cb13645

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+2625
-723
lines changed

‎src/components/Extra.vue

Lines changed: 195 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<template>
2+
<QuickButtonMobile v-if="simulatorMobileStore.showQuickButtons && simulatorMobileStore.showMobileView" />
3+
<TimingDiagramMobile v-if="simulatorMobileStore.showMobileView" v-show="simulatorMobileStore.showTimingDiagram" />
24
<!-- --------------------------------------------------------------------------------------------- -->
35
<!-- TabsBar -->
46
<TabsBar />
@@ -11,7 +13,7 @@
1113

1214
<!-- --------------------------------------------------------------------------------------------- -->
1315
<!-- Circuit Elements Panel -->
14-
<ElementsPanel />
16+
<ElementsPanel v-if="!simulatorMobileStore.showMobileView"/>
1517
<!-- --------------------------------------------------------------------------------------------- -->
1618

1719
<!-- --------------------------------------------------------------------------------------------- -->
@@ -21,14 +23,14 @@
2123

2224
<!-- --------------------------------------------------------------------------------------------- -->
2325
<!-- Timing Diagram Panel -->
24-
<TimingDiagramPanel />
26+
<TimingDiagramPanel v-if="!simulatorMobileStore.showMobileView" />
2527
<!-- --------------------------------------------------------------------------------------------- -->
2628

2729
<!-- --------------------------------------------------------------------------------------------- -->
2830
<!-- Testbench -->
29-
<TestBenchPanel />
31+
<TestBenchPanel v-if="!simulatorMobileStore.showMobileView" />
3032
<!-- --------------------------------------------------------------------------------------------- -->
31-
<TestBenchCreator />
33+
<TestBenchCreator v-if="!simulatorMobileStore.showMobileView" />
3234
<!-- --------------------------------------------------------------------------------------------- -->
3335

3436
<!-- --------------------------------------------------------------------------------------------- -->
@@ -41,12 +43,17 @@
4143

4244
<!-- --------------------------------------------------------------------------------------------- -->
4345
<!-- Verilog Editor Panel -->
44-
<VerilogEditorPanel />
46+
<VerilogEditorPanel v-if="!simulatorMobileStore.showMobileView" />
47+
48+
<div id="code-window" class="code-window">
49+
<textarea id="codeTextArea"></textarea>
50+
</div>
51+
<VerilogEditorPanelMobile v-if="simulatorMobileStore.showMobileView && simulatorMobileStore.showVerilogPanel" />
4552
<!-- --------------------------------------------------------------------------------------------- -->
4653

4754
<!-- --------------------------------------------------------------------------------------------- -->
4855
<!-- Element Properties Panel -->
49-
<PropertiesPanel />
56+
<PropertiesPanel v-if="!simulatorMobileStore.showMobileView" />
5057
<!-- --------------------------------------------------------------------------------------------- -->
5158

5259
<!-- --------------------------------------------------------------------------------------------- -->
@@ -86,14 +93,41 @@
8693
width: 100%;
8794
height: 100%;
8895
"></canvas>
89-
<canvas id="simulationArea" style="
96+
<canvas
97+
id="simulationArea"
98+
style="
9099
position: absolute;
91100
left: 0;
92101
top: 0;
93102
z-index: 1;
94103
width: 100%;
95104
height: 100%;
96-
"></canvas>
105+
"
106+
@touchstart="(e) => {
107+
simulationArea.touch = true;
108+
panStart(e)
109+
}"
110+
@touchend="(e) => {
111+
simulationArea.touch = true;
112+
panStop(e)
113+
}"
114+
@touchmove="(e) => {
115+
simulationArea.touch = true;
116+
panMove(e)
117+
}"
118+
@mousedown="(e) => {
119+
simulationArea.touch = false;
120+
panStart(e)
121+
}"
122+
@mousemove="(e) => {
123+
simulationArea.touch = false;
124+
panMove(e)
125+
}"
126+
@mouseup="(e) => {
127+
simulationArea.touch = false;
128+
panStop(e)
129+
}"
130+
></canvas>
97131
<div id="miniMap">
98132
<canvas id="miniMapArea" style="position: absolute; left: 0; top: 0; z-index: 3"></canvas>
99133
</div>
@@ -143,10 +177,77 @@
143177
<!---issue reporting-system----->
144178
<ReportIssue />
145179
<!-- --------------------------------------------------------------------------------------------- -->
180+
181+
<v-btn
182+
class="cir-ele-btn"
183+
@mousedown="simulatorMobileStore.showElementsPanel = !simulatorMobileStore.showElementsPanel"
184+
:style="{bottom: simulatorMobileStore.showElementsPanel ? '10rem' : '2rem'}"
185+
v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && !simulatorMobileStore.isVerilog"
186+
>
187+
<i class="fas fa-bezier-curve"></i>
188+
</v-btn>
189+
190+
<v-btn
191+
class="cir-btn"
192+
@mousedown="(e: React.MouseEvent) => {
193+
if(simulationArea.shiftDown == false) {
194+
simulationArea.shiftDown = true;
195+
selectMultiple = true;
196+
}
197+
else {
198+
simulationArea.shiftDown = false;
199+
selectMultiple = false;
200+
e.preventDefault();
201+
}
202+
}"
203+
:style="{bottom: simulatorMobileStore.showElementsPanel ? '10rem' : '2rem', backgroundColor: selectMultiple ? 'var(--primary)' : 'var(--bg-toggle-btn-primary)'}"
204+
v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && !simulatorMobileStore.isVerilog"
205+
>
206+
<i class="fa-solid fa-vector-square"></i>
207+
</v-btn>
208+
209+
<v-btn
210+
class="cir-verilog-btn"
211+
@mousedown="simulatorMobileStore.showVerilogPanel = !simulatorMobileStore.showVerilogPanel"
212+
v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.isVerilog && simulatorMobileStore.showMobileView"
213+
>
214+
<i class="fa-solid fa-gears"></i>
215+
</v-btn>
216+
217+
<v-btn
218+
class="cir-btn"
219+
@mousedown="copyBtnClick()"
220+
:style="{bottom: simulatorMobileStore.showElementsPanel ? '16rem' : '8rem'}"
221+
v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && !simulatorMobileStore.isCopy && !simulatorMobileStore.isVerilog"
222+
>
223+
<i class="fa-solid fa-copy"></i>
224+
</v-btn>
225+
226+
<v-btn
227+
class="cir-btn"
228+
@mousedown="pasteBtnClick()"
229+
:style="{bottom: simulatorMobileStore.showElementsPanel ? '16rem' : '8rem'}"
230+
v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && simulatorMobileStore.isCopy && !simulatorMobileStore.isVerilog"
231+
>
232+
<i class="fa-solid fa-paste"></i>
233+
</v-btn>
234+
235+
<v-btn
236+
class="cir-btn"
237+
@mousedown="propertiesBtnClick()"
238+
:style="{bottom: simulatorMobileStore.showElementsPanel ? `${propertiesPanelPos.up}rem` : `${propertiesPanelPos.down}rem`}"
239+
v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView"
240+
>
241+
<i class="fa-solid fa-sliders"></i>
242+
</v-btn>
243+
244+
<ElementsPanelMobile v-if="simulatorMobileStore.showMobileView" />
245+
<PropertiesPanelMobile v-if="simulatorMobileStore.showMobileView" />
146246
</template>
147247

148248
<script lang="ts" setup>
149249
import VerilogEditorPanel from './Panels/VerilogEditorPanel/VerilogEditorPanel.vue'
250+
import VerilogEditorPanelMobile from './Panels/VerilogEditorPanel/VerilogEditorPanelMobile.vue'
150251
import ElementsPanel from './Panels/ElementsPanel/ElementsPanel.vue'
151252
import PropertiesPanel from './Panels/PropertiesPanel/PropertiesPanel.vue'
152253
import TimingDiagramPanel from './Panels/TimingDiagramPanel/TimingDiagramPanel.vue'
@@ -164,5 +265,90 @@ import LayoutElementsPanel from './Panels/LayoutElementsPanel/LayoutElementsPane
164265
import TestBenchPanel from './Panels/TestBenchPanel/TestBenchPanel.vue'
165266
import TestBenchCreator from './Panels/TestBenchPanel/TestBenchCreator.vue'
166267
import TestBenchValidator from './Panels/TestBenchPanel/TestBenchValidator.vue'
268+
import QuickButtonMobile from './Navbar/QuickButton/QuickButtonMobile.vue'
269+
import TimingDiagramMobile from './Panels/TimingDiagramPanel/TimingDiagramMobile.vue'
270+
import ElementsPanelMobile from './Panels/ElementsPanel/ElementsPanelMobile.vue'
271+
import PropertiesPanelMobile from './Panels/PropertiesPanel/PropertiesPanelMobile.vue'
272+
import { simulationArea } from '#/simulator/src/simulationArea'
273+
import { paste } from '#/simulator/src/events'
274+
import { panStart, panMove, panStop } from '#/simulator/src/listeners'
275+
import { useSimulatorMobileStore } from '#/store/simulatorMobileStore'
167276
import { useState } from '#/store/SimulatorStore/state'
168-
</script>
277+
import { reactive, ref, watch } from 'vue'
278+
279+
const simulatorMobileStore = useSimulatorMobileStore()
280+
const selectMultiple = ref(false)
281+
const propertiesPanelPos = reactive({
282+
up: 22,
283+
down: 14
284+
});
285+
286+
watch(() => simulatorMobileStore.isVerilog, (val) => {
287+
if (val) {
288+
propertiesPanelPos.up = 10
289+
propertiesPanelPos.down = 2
290+
} else {
291+
propertiesPanelPos.up = 22
292+
propertiesPanelPos.down = 14
293+
}
294+
})
295+
296+
const copyBtnClick = () => {
297+
window.document.execCommand('copy')
298+
simulationArea.shiftDown = false
299+
simulatorMobileStore.isCopy = true
300+
}
301+
302+
const pasteBtnClick = () => {
303+
paste(localStorage.getItem('clipboardData'));
304+
simulatorMobileStore.isCopy = false
305+
}
306+
307+
const propertiesBtnClick = () => {
308+
simulatorMobileStore.showPropertiesPanel = !simulatorMobileStore.showPropertiesPanel
309+
}
310+
</script>
311+
312+
<style scoped>
313+
.cir-ele-btn, .cir-verilog-btn {
314+
position: absolute;
315+
right: 1.5rem;
316+
bottom: 15rem;
317+
z-index: 90;
318+
background-color: var(--bg-toggle-btn-primary);
319+
color: white;
320+
border-radius: 100%;
321+
font-size: 20px;
322+
display: flex;
323+
justify-content: center;
324+
align-items: center;
325+
cursor: pointer;
326+
transition: 0.3s;
327+
padding: 1rem;
328+
height: 4rem;
329+
width: 4rem;
330+
}
331+
332+
.cir-verilog-btn {
333+
bottom: 2rem;
334+
}
335+
336+
.cir-btn{
337+
position: absolute;
338+
left: 1.5rem;
339+
bottom: 2rem;
340+
z-index: 90;
341+
background-color: var(--bg-toggle-btn-primary);
342+
color: white;
343+
border-radius: 100%;
344+
font-size: 20px;
345+
display: flex;
346+
justify-content: center;
347+
align-items: center;
348+
cursor: pointer;
349+
transition: 0.3s;
350+
padding: 1rem;
351+
height: 4rem;
352+
width: 4rem;
353+
}
354+
</style>

‎src/components/Logo/Logo.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
2-
<router-link to="/">
2+
<a href="/">
33
<span :class="cvlogo"></span>
4-
</router-link>
4+
</a>
55
</template>
66

77
<script>

0 commit comments

Comments
 (0)