Fix widgets and applied styles

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

@@ -302,7 +302,7 @@
       </v-list>
     </v-menu>
 
-    <div class="u-series" ref="info">
+    <div v-if="!sparkline" class="u-series" ref="info">
       <v-tooltip
         text="Click item to toggle, Right click to edit"
         location="bottom"

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

@@ -74,6 +74,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-top: 6px;
   padding: 5px;
   width: var(--width);
 }

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

@@ -80,6 +80,7 @@ export default {
   align-items: center;
   padding: 5px;
   height: var(--height);
+  margin-right: 5px;
 }
 .limitsbar__container {
   position: relative;

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

@@ -106,6 +106,7 @@ export default {
   padding: 5px;
   padding-top: 15px;
   width: var(--width);
+  margin-bottom: 5px;
 }
 .rangebar__container {
   position: relative;

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

@@ -21,16 +21,23 @@
 -->
 
 <template>
-  <vertical-widget
-    v-bind="listeners"
-    :settings="settings"
-    :parameters="parameters.slice(1)"
-    :widgets="widgets"
-    :screen-values="screenValues"
-    :screen-time-zone="screenTimeZone"
-    :style="computedStyle"
-    class="overflow-y-auto"
-  />
+  <div ref="container" :style="computedStyle" class="overflow-y-auto">
+    <component
+      v-bind="listeners"
+      v-for="(widget, index) in widgets"
+      :key="index"
+      :is="widget.type"
+      :target="widget.target"
+      :parameters="widget.parameters"
+      :settings="widget.settings"
+      :screen-values="screenValues"
+      :screen-time-zone="screenTimeZone"
+      :widgets="widget.widgets"
+      :name="widget.name"
+      :line="widget.line"
+      :line-number="widget.lineNumber"
+    />
+  </div>
 </template>
 
 <script>
@@ -44,6 +51,21 @@ export default {
   },
   created: function () {
     this.setHeight(this.parameters[0], 'px', 200)
+    if (this.parameters[1]) {
+      let margin = this.parameters[1]
+      this.widgets.forEach((widget) => {
+        // Don't push MARGIN on a widget that's already defined it
+        const found = widget.settings.find(
+          (setting) =>
+            setting[0] === 'MARGIN' ||
+            (setting[0] === 'RAW' &&
+              setting[1].toUpperCase().includes('MARGIN')),
+        )
+        if (found === undefined) {
+          widget.settings.push(['MARGIN', margin])
+        }
+      })
+    }
   },
 }
 </script>

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

@@ -27,8 +27,8 @@ export default {
   mixins: [Widget],
   created() {
     // Populate the applied settings as if they were in the screen definition
-    this.appliedSettings.push(['WIDTH', this.parameters[0]])
-    this.appliedSettings.push(['HEIGHT', this.parameters[1]])
+    this.settings.push(['WIDTH', this.parameters[0]])
+    this.settings.push(['HEIGHT', this.parameters[1]])
   },
 }
 </script>

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

@@ -32,7 +32,7 @@
     />
     <limitsbar-widget
       v-bind="$attrs"
-      :parameters="parameters"
+      :parameters="parameters.slice(0, 3)"
       :settings="[...appliedSettings]"
       :screen-values="screenValues"
       :widget-index="1"

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/widgets/Widget.js

@@ -61,6 +61,8 @@ export default {
   },
   data() {
     return {
+      // The settings that apply to the current widget based on widgetIndex
+      // Calculated in created, updated in setWidth & setHeight and used in computedStyle
       appliedSettings: [],
       // We make style a data attribute so as we recurse through nested
       // widgets we can check to see if style attributes have been applied
@@ -74,27 +76,19 @@ export default {
   },
   computed: {
     computedStyle: function () {
+      // Take all the COSMOS settings and create appliedStyle with actual css values
       this.appliedSettings.forEach((setting) => {
-        const index = parseInt(setting[0])
-        if (this.widgetIndex !== null) {
-          if (this.widgetIndex === index) {
-            setting = setting.slice(1)
-          } else {
-            return
-          }
-        }
         this.applyStyleSetting(setting)
       })
-      const compStyle = { ...this.appliedStyle }
 
       // If nothing has yet defined a width then we add flex to the style
-      if (compStyle['width'] === undefined) {
+      if (this.appliedStyle['width'] === undefined) {
         // This flex allows for alignment in our widgets
         // The value of '0 10 100%' was achieved through trial and error
         // The larger flex-shrink value was critical for success
-        compStyle['flex'] = '0 10 100%' // flex-grow, flex-shrink, flex-basis
+        this.appliedStyle['flex'] = '0 10 100%' // flex-grow, flex-shrink, flex-basis
       }
-      return compStyle
+      return this.appliedStyle
     },
     screen: function () {
       // This exists for backwards compatibility of screen definitions since widgets no longer have a reference
@@ -165,7 +159,7 @@ export default {
           return setting
         }
         // This is our setting so slice off the index and return
-        // this effectively promotes'the subsetting to a setting
+        // this effectively promotes the subsetting to a setting
         // on the current widget
         if (this.widgetIndex === index) {
           return setting.slice(1)
@@ -269,69 +263,35 @@ export default {
       // Don't set the width if someone has already set it
       // This is important in PacketViewer which uses the value-widget
       // and passes an explicit width setting to use
-      let foundSetting = null
-      if (this.widgetIndex !== null) {
-        foundSetting = this.appliedSettings.find(
-          (setting) =>
-            parseInt(setting[0]) === this.widgetIndex && setting[1] === 'WIDTH',
-        )
-      } else {
-        foundSetting = this.appliedSettings.find(
-          (setting) => setting[0] === 'WIDTH',
-        )
-      }
+      let foundSetting = this.appliedSettings.find(
+        (setting) => setting[0] === 'WIDTH',
+      )
       if (foundSetting) {
         return foundSetting['WIDTH']
       } else {
         if (width) {
-          let setting = ['WIDTH', `${width}${units}`]
-          // If we have a widgetIndex apply that so we apply the width to ourselves
-          if (this.widgetIndex !== null) {
-            setting.unshift(this.widgetIndex)
-          }
-          this.appliedSettings.push(setting)
+          this.appliedSettings.push(['WIDTH', `${width}${units}`])
           return parseInt(width)
         } else {
-          let setting = ['WIDTH', `${defaultWidth}${units}`]
-          if (this.widgetIndex !== null) {
-            setting.unshift(this.widgetIndex)
-          }
-          this.appliedSettings.push(setting)
+          this.appliedSettings.push(['WIDTH', `${defaultWidth}${units}`])
           return parseInt(defaultWidth)
         }
       }
     },
     setHeight(height, units = 'px', defaultHeight = '20') {
       // Don't set the height if someone has already set it
       let foundSetting = null
-      if (this.widgetIndex !== null) {
-        foundSetting = this.appliedSettings.find(
-          (setting) =>
-            parseInt(setting[0]) === this.widgetIndex &&
-            setting[1] === 'HEIGHT',
-        )
-      } else {
-        foundSetting = this.appliedSettings.find(
-          (setting) => setting[0] === 'HEIGHT',
-        )
-      }
+      foundSetting = this.appliedSettings.find(
+        (setting) => setting[0] === 'HEIGHT',
+      )
       if (foundSetting) {
         return foundSetting['HEIGHT']
       } else {
         if (height) {
-          let setting = ['HEIGHT', `${height}${units}`]
-          // If we have a widgetIndex apply that so we apply the height to ourselves
-          if (this.widgetIndex !== null) {
-            setting.unshift(this.widgetIndex)
-          }
-          this.appliedSettings.push(setting)
+          this.appliedSettings.push(['HEIGHT', `${height}${units}`])
           return parseInt(height)
         } else {
-          let setting = ['HEIGHT', `${defaultHeight}${units}`]
-          if (this.widgetIndex !== null) {
-            setting.unshift(this.widgetIndex)
-          }
-          this.appliedSettings.push(setting)
+          this.appliedSettings.push(['HEIGHT', `${defaultHeight}${units}`])
           return parseInt(defaultHeight)
         }
       }