working resize with persistence

add swimLaneLabelWidth input to inspector

src/plugins/inspectorViews/elements/ElementsPool.vue

@@ -44,12 +44,13 @@
           @drop-custom="moveTo(index)"
         >
           <template #content="slotProps">
-            <slot name="content" :index="index" :object="element" v-bind="slotProps"></slot>
+            <slot name="content" :index="index" v-bind="slotProps"></slot>
           </template>
         </ElementItem>
         <li class="js-last-place" @drop="moveToIndex(elements.length)"></li>
       </ul>
       <div v-if="elements.length === 0">No contained elements</div>
+      <slot name="custom"></slot>
     </div>
   </div>
 </template>

src/plugins/timeline/TimelineElementsContent.vue

@@ -12,44 +12,38 @@
     />
     <span>px</span>
   </template>
-  <select v-model="isFixed" aria-label="fixedOrFlex">
+  <select v-model="fixed" aria-label="fixedOrFlex" @change="toggleFixed">
-    <option :selected="!isFixed" :value="false">flex</option>
+    <option :value="false">flex</option>
-    <option :selected="isFixed" :value="true">fixed</option>
+    <option :value="true">fixed</option>
   </select>
 </template>
 <script>
-import { computed, inject, ref, toRaw } from 'vue';
+import { inject, ref } from 'vue';
 
 export default {
   props: {
-    object: {
-      type: Object,
-      required: true
-    },
     index: {
       type: Number,
       required: true
+    },
+    container: {
+      type: Object,
+      required: true
     }
   },
   setup(props) {
     const openmct = inject('openmct');
     const domainObject = inject('domainObject');
 
-    openmct.objects.observe(domainObject, 'configuration.containers', updateContainer);
+    const fixed = ref(props.container.fixed ?? false);
+    const size = ref(props.container.size);
 
-    const container = ref(null);
+    function toggleFixed() {
-    const fixed = computed(() => {
-      return container.value?.fixed;
-    });
-    const isFixed = computed({ get: () => fixed, set: (_isFixed) => toggleFixed(_isFixed) });
-    const size = computed(() => container.value?.size);
-
-    function toggleFixed(_fixed) {
       openmct.objectViews.emit(
         `contextAction:${openmct.objects.makeKeyString(domainObject.identifier)}`,
         'toggleFixedContextAction',
         props.index,
-        _fixed
+        fixed.value
       );
     }
 
@@ -63,19 +57,13 @@ export default {
       );
     }
 
-    function updateContainer(containers) {
-      container.value = containers[props.index];
-    }
-
     return {
       openmct,
       domainObject,
-      container,
       fixed,
-      isFixed,
       size,
-      updateContainer,
+      changeSize,
-      changeSize
+      toggleFixed
     };
   }
 };

src/plugins/timeline/TimelineElementsPool.vue

@@ -1,21 +1,84 @@
 <template>
   <ElementsPool>
-    <template #content="{ index, object }">
+    <template #content="{ index }">
-      <TimelineElementsContent :index="index" :object="object" />
+      <TimelineElementsContent
+        :index="index"
+        :container="domainObject.configuration.containers[index]"
+      />
+    </template>
+    <template #custom>
+      <div class="c-inspector__properties c-inspect-properties" aria-label="Swim Lane Label Width">
+        <div class="c-inspect-properties__header">Swin Lane Label Width</div>
+        <div class="c-inspect-properties__row">
+          <input
+            :value="swimLaneLabelWidth"
+            aria-labelledby="Width in pixels"
+            class="field control"
+            :pattern="/\d+/"
+            type="number"
+            name="value"
+            min="0"
+            @change="changeSwimLaneLabelWidth"
+          />
+          <span>px</span>
+        </div>
+      </div>
     </template>
   </ElementsPool>
 </template>
 <script>
+import { inject, ref } from 'vue';
+
 import ElementsPool from '@/plugins/inspectorViews/elements/ElementsPool.vue';
 
+import { configuration } from './configuration.js';
 import TimelineElementsContent from './TimelineElementsContent.vue';
+
 export default {
   components: {
     ElementsPool,
     TimelineElementsContent
   },
   setup() {
-    return {};
+    const openmct = inject('openmct');
+    const domainObject = inject('domainObject');
+
+    const selectionContext = openmct.selection.get()[0][0].context;
+    const initialSwimLaneLabelWidth =
+      domainObject.configuration.swimLaneLabelWidth ?? configuration.swimLaneLabelWidth;
+    // get initial containers configuration from selection context,
+    // as domain.configuration.containers not resilient to composition modifications made outside of view
+    const initialContainers =
+      selectionContext.containers ??
+      domainObject.configuration.containers ??
+      configuration.containers;
+    const swimLaneLabelWidth = ref(initialSwimLaneLabelWidth);
+    const containers = ref(initialContainers);
+    openmct.objects.observe(domainObject, 'configuration.containers', updateContainers);
+    openmct.objects.observe(
+      domainObject,
+      'configuration.swimLaneLabelWidth',
+      updateSwimLaneLabelWidth
+    );
+
+    function updateSwimLaneLabelWidth(_swimLaneLabelWidth) {
+      swimLaneLabelWidth.value = _swimLaneLabelWidth;
+    }
+
+    function updateContainers(_containers) {
+      containers.value = _containers;
+    }
+
+    function changeSwimLaneLabelWidth(event) {
+      const _size = Number(event.target.value);
+      openmct.objectViews.emit(
+        `contextAction:${openmct.objects.makeKeyString(domainObject.identifier)}`,
+        'changeSwimLaneLabelWidthContextAction',
+        _size
+      );
+    }
+
+    return { domainObject, changeSwimLaneLabelWidth, swimLaneLabelWidth };
   }
 };
 </script>

src/plugins/timeline/TimelineViewLayout.vue

@@ -199,7 +199,17 @@ export default {
       if (isConfigurationChanged) {
         console.log('yo');
         setContainers(existingContainers);
-        mutateContainers();
+      }
+
+      const selection = openmct.selection.get()[0];
+      const selectionContext = selection?.[0]?.context;
+      const selectionDomainObject = selectionContext?.item;
+      const selectionType = selectionDomainObject?.type;
+
+      if (selectionType === 'time-strip') {
+        selectionContext.containers = containers.value;
+        selectionContext.swimLaneLabelWidth = swimLaneLabelWidth.value;
+        openmct.selection.select(selection);
       }
     });
 
@@ -295,6 +305,12 @@ export default {
       sizeFixedContainer(index, size);
     }
 
+    // context action called from outside component
+    function changeSwimLaneLabelWidthContextAction(size) {
+      swimLaneLabelWidth.value = size;
+      mutateSwimLaneLabelWidth();
+    }
+
     onBeforeUnmount(() => {
       compositionCollection.off('add', addItem);
       compositionCollection.off('remove', removeItem);
@@ -322,7 +338,8 @@ export default {
       endContainerResizing,
       mutateContainers,
       toggleFixedContextAction,
-      changeSizeContextAction
+      changeSizeContextAction,
+      changeSwimLaneLabelWidthContextAction
     };
   },
   data() {