Added play/pause functionality

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

@@ -36,6 +36,20 @@
         property-input-id="clockTime"
     />
 
+    <p>
+        <span>Play/Pause:</span>
+        <label class="switch">
+            <input
+                type="checkbox"
+                class="objectPropertyAttributeChecked"
+                name="changeSimulationPlaying"
+                :checked="simulationArea.simulationPlaying"
+                @change="toggleSimulationPlaying"
+            />
+            <span class="slider"></span>
+        </label>
+    </p>
+
     <p>
         <span>Clock Enabled:</span>
         <label class="switch">
@@ -104,6 +118,7 @@ import { toggleLayoutMode } from '#/simulator/src/layoutMode'
 // } from '#/simulator/src/circuit'
 // import { showMessage } from '#/simulator/src/utils'
 import { simulationArea } from '#/simulator/src/simulationArea'
+import { toggleSimulationPlaying } from '#/simulator/src/utils'
 import InputGroups from '#/components/Panels/Shared/InputGroups.vue'
 // import MessageBox from '#/components/MessageBox/messageBox.vue'
 // import { ref, Ref, onMounted, watch } from 'vue'

src/simulator/src/engine.js

@@ -403,6 +403,7 @@ export function updateSelectionsAndPane(scope = globalScope) {
 export function play(scope = globalScope, resetNodes = false) {
     if (errorDetected) return // Don't simulate until error is fixed
     if (loading === true) return // Don't simulate until loaded
+    if (!simulationArea.simulationPlaying) return // Don't simulate when paused
 
     simulationArea.simulationQueue.reset()
     plotArea.setExecutionTime() // Waveform thing

src/simulator/src/interface/simulationArea.ts

@@ -6,6 +6,7 @@ export interface SimulationArea {
     hover: boolean;
     clockState: number;
     clockEnabled: boolean;
+    simulationPlaying: boolean;
     // TODO: make this CircuitElement|null once converted to typescript
     lastSelected: any|null;
     stack: any[];

src/simulator/src/listeners.js

@@ -27,6 +27,7 @@ import {
 import { changeScale, findDimensions } from './canvasApi'
 import { scheduleBackup } from './data/backupCircuit'
 import { hideProperties, deleteSelected, uxvar, exitFullView } from './ux';
+import { toggleSimulationPlaying } from './utils'
 import { updateRestrictedElementsList, updateRestrictedElementsInScope, hideRestricted, showRestricted } from './restrictedElementDiv';
 import { removeMiniMap, updatelastMinimapShown } from './minimap'
 import undo from './data/undo'
@@ -557,6 +558,14 @@ export default function startListeners() {
                     // e.preventDefault(); //browsers normally open a new tab
                     simulationArea.changeClockTime(prompt('Enter Time:'))
                 }
+
+                // Simulation play/pause with space key
+                if (e.code === 'Space' || e.key === ' ' || e.keyCode === 32) {
+                    if (e.repeat) return
+                    toggleSimulationPlaying()
+                    e.preventDefault()
+                    return
+                }
             }
 
             if (e.keyCode == 8 || e.key == 'Delete') {

src/simulator/src/simulationArea.ts

@@ -9,6 +9,7 @@ const simulationArea: SimulationArea = {
     hover: false,
     clockState: 0,
     clockEnabled: true,
+    simulationPlaying: true,
     lastSelected: null,
     stack: [],
     prevScale: 0,

src/simulator/src/utils.ts

@@ -41,6 +41,7 @@ export function stripTags(string = '') {
 
 export function clockTick() {
     if (!simulationArea.clockEnabled) return
+    if (!simulationArea.simulationPlaying) return
     if (errorDetectedGet()) return
     if (layoutModeGet()) return
     updateCanvasSet(true)
@@ -50,6 +51,15 @@ export function clockTick() {
     scheduleUpdate(0, 20)
 }
 
+export function toggleSimulationPlaying() {
+    simulationArea.simulationPlaying = !simulationArea.simulationPlaying
+    // UI Update
+    if (simulationArea.simulationPlaying) {
+        updateCanvasSet(true)
+        scheduleUpdate(1)
+    }
+}
+
 /**
  * Helper function to show error
  */