Fix RawDialog behavior

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/CmdTlmServer.vue

@@ -22,7 +22,7 @@
 
 <template>
   <top-bar :menus="menus" :title="title" />
-  <v-card>
+  <v-card style="z-index: 2 !important">
     <v-expansion-panels v-model="panel">
       <v-expansion-panel>
         <v-expansion-panel-title>

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/RawDialog.vue

@@ -13,7 +13,7 @@
 # GNU Affero General Public License for more details.
 
 # Modified by OpenC3, Inc.
-# All changes Copyright 2023, OpenC3, Inc.
+# All changes Copyright 2024, OpenC3, Inc.
 # All Rights Reserved
 #
 # This file may also be used under the terms of a commercial license
@@ -27,44 +27,44 @@
     class="raw-dialog"
     ref="rawDialog"
   >
+    <div ref="bar" class="toolbar-wrapper">
+      <v-toolbar height="24">
+        <v-tooltip location="top">
+          <template v-slot:activator="{ props }">
+            <div v-bind="props">
+              <v-icon data-test="copy-icon" @click="copyRawData">
+                mdi-content-copy
+              </v-icon>
+            </div>
+          </template>
+          <span> Copy </span>
+        </v-tooltip>
+        <v-tooltip location="top">
+          <template v-slot:activator="{ props }">
+            <div v-bind="props">
+              <v-icon data-test="download" @click="downloadRawData">
+                mdi-download
+              </v-icon>
+            </div>
+          </template>
+          <span> Download </span>
+        </v-tooltip>
+        <v-spacer />
+        <span> {{ type }} </span>
+        <v-spacer />
+        <v-tooltip location="top">
+          <template v-slot:activator="{ props }">
+            <div v-bind="props">
+              <v-icon data-test="close" @click="$emit('close')">
+                mdi-close-box
+              </v-icon>
+            </div>
+          </template>
+          <span> Close </span>
+        </v-tooltip>
+      </v-toolbar>
+    </div>
     <v-card>
-      <div ref="bar">
-        <v-toolbar height="24">
-          <v-tooltip location="top">
-            <template v-slot:activator="{ props }">
-              <div v-bind="props">
-                <v-icon data-test="copy-icon" @click="copyRawData">
-                  mdi-content-copy
-                </v-icon>
-              </div>
-            </template>
-            <span> Copy </span>
-          </v-tooltip>
-          <v-tooltip location="top">
-            <template v-slot:activator="{ props }">
-              <div v-bind="props">
-                <v-icon data-test="download" @click="downloadRawData">
-                  mdi-download
-                </v-icon>
-              </div>
-            </template>
-            <span> Download </span>
-          </v-tooltip>
-          <v-spacer />
-          <span> {{ type }} </span>
-          <v-spacer />
-          <v-tooltip location="top">
-            <template v-slot:activator="{ props }">
-              <div v-bind="props">
-                <v-icon data-test="close" @click="$emit('close')">
-                  mdi-close-box
-                </v-icon>
-              </div>
-            </template>
-            <span> Close </span>
-          </v-tooltip>
-        </v-toolbar>
-      </div>
       <v-card-title class="d-flex align-center justify-content-space-between">
         <span> {{ header }} </span>
         <v-spacer />
@@ -99,7 +99,13 @@
             <span> {{ receivedCount }} </span>
           </v-col>
         </v-row>
-        <v-textarea v-model="rawData" class="pa-0 ma-0" auto-grow readonly />
+        <v-textarea
+          class="pa-0 ma-0"
+          v-model="rawData"
+          :rows="numRows"
+          no-resize
+          readonly
+        />
       </v-card-text>
     </v-card>
   </div>
@@ -172,6 +178,12 @@ export default {
       style['z-index'] = this.zIndex
       return style
     },
+    numRows() {
+      // This is because v-textarea doesn't behave correctly with really long monospace text
+      let lines = this.rawData.split('\n').length
+      // Add a small fudge factor every 2000 lines to prevent clipping at the bottom
+      return lines + Math.floor(lines / 2000)
+    },
   },
   mounted() {
     this.$refs.bar.onmousedown = this.dragMouseDown
@@ -200,9 +212,8 @@ export default {
       this.dragX = e.clientX
       this.dragY = e.clientY
       // set the element's new position:
-      this.top = this.$refs.bar.parentElement.parentElement.offsetTop - yOffset
-      this.left =
-        this.$refs.bar.parentElement.parentElement.offsetLeft - xOffset
+      this.top = this.$refs.bar.parentElement.offsetTop - yOffset
+      this.left = this.$refs.bar.parentElement.offsetLeft - xOffset
     },
     closeDragElement: function () {
       // stop moving when mouse button is released
@@ -336,22 +347,24 @@ export default {
   border: solid;
   border-width: 1px;
   border-color: white;
-  resize: both;
+  resize: vertical;
   overflow: auto;
+  min-height: 28px;
   max-height: 85vh;
+  width: 815px;
   background-color: var(--color-background-base-selected);
 }
-.raw-dialog :deep(.v-card) {
-  height: 100%;
-  min-width: 800px;
+.raw-dialog .toolbar-wrapper {
+  position: sticky;
+  top: 0;
+  z-index: 1;
 }
-.raw-dialog :deep(.v-card__text) {
-  height: 100%;
+.raw-dialog :deep(.v-card-text) {
   background-color: var(--color-background-base-selected);
 }
 .v-textarea :deep(textarea) {
   margin-top: 10px;
   font-family: 'Courier New', Courier, monospace;
-  overflow-y: scroll;
+  overflow-y: hidden;
 }
 </style>

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/Updater.js

@@ -40,7 +40,7 @@ export default {
   mounted() {
     this.changeUpdater()
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.updater != null) {
       clearInterval(this.updater)
       this.updater = null

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

@@ -122,7 +122,7 @@ export default {
       return !this.formValid && !this.canApprove
     },
   },
-  beforeDestroy() {
+  beforeUnmount() {
     clearInterval(this.updater)
     this.updater = null
     this.canApprove = false

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

@@ -208,7 +208,7 @@ export default {
     this.editor.clearSelection()
     this.editor.focus()
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.editor.destroy()
     this.editor.container.remove()
   },

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/EditDialog.vue

@@ -146,7 +146,7 @@ export default {
       this.editor.setReadOnly(true)
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.editor) {
       this.editor.destroy()
     }