Pause graph when clicking

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/src/tools/TlmGrapher/TlmGrapher.vue

@@ -128,6 +128,8 @@
               @close-graph="() => closeGraph(graph)"
               @min-max-graph="() => minMaxGraph(graph)"
               @resize="() => resize()"
+              @pause="() => (state = 'pause')"
+              @start="() => (state = 'start')"
               @click="() => graphSelected(graph)"
               @started="graphStarted"
             />

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/Graph.vue

@@ -725,6 +725,18 @@ export default {
             // setSeries links graphs so clicking an item to hide it also hides the other graph item
             // setSeries: true,
           },
+          bind: {
+            mouseup: (self, targ, handler) => {
+              return (e) => {
+                // Single click while paused will resume the graph
+                // This makes it possible to resume in TlmViewer widgets
+                if (this.state === 'pause' && self.select.width === 0) {
+                  this.$emit('start')
+                }
+                handler(e)
+              }
+            },
+          },
         },
         hooks: {
           setScale: [
@@ -742,6 +754,14 @@ export default {
               }
             },
           ],
+          setSelect: [
+            (chart) => {
+              // Pause the graph while selecting a range to zoom
+              if (this.state == 'start' && chart.select.width > 0) {
+                this.$emit('pause')
+              }
+            },
+          ],
           ready: [
             (u) => {
               let canvas = u.root.querySelector('.u-over')
@@ -819,6 +839,10 @@ export default {
           setSelect: [
             (chart) => {
               if (!this.zoomChart) {
+                // Pause the graph while selecting an overview range to zoom
+                if (this.state == 'start' && chart.select.width > 0) {
+                  this.$emit('pause')
+                }
                 this.zoomOverview = true
                 let min = chart.posToVal(chart.select.left, 'x')
                 let max = chart.posToVal(

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/widgets/LinegraphWidget.vue

@@ -34,6 +34,8 @@
     :height="size.height"
     :width="size.width"
     :style="computedStyle"
+    @pause="() => (state = 'pause')"
+    @start="() => (state = 'start')"
     hide-system-bar
     hide-overview
   />