resize widths for all swimlane labels

- resize is not yet persisted

src/plugins/timeline/TimelineViewLayout.vue

@@ -62,7 +62,8 @@
 
 <script>
 import _ from 'lodash';
-import { inject } from 'vue';
+import { useDragResizer } from 'utils/vue/useDragResizer.js';
+import { inject, provide } from 'vue';
 
 import SwimLane from '@/ui/components/swim-lane/SwimLane.vue';
 
@@ -90,6 +91,12 @@ export default {
     ExtendedLinesOverlay
   },
   inject: ['openmct', 'domainObject', 'path', 'composition', 'extendedLinesBus'],
+  props: {
+    isEditing: {
+      type: Boolean,
+      default: false
+    }
+  },
   setup() {
     const domainObject = inject('domainObject');
     const path = inject('path');
@@ -100,6 +107,12 @@ export default {
       openmct
     );
 
+    // Drag resizer - Swimlane column width
+    const { size, mousedown } = useDragResizer('horizontal', { size: 200 });
+
+    provide('swimLaneLabelWidth', size);
+    provide('mousedown', mousedown);
+
     return { alignmentData, resetAlignment };
   },
   data() {

src/ui/components/swim-lane/SwimLane.vue

@@ -56,7 +56,7 @@
           @click="pressOnButton"
         />
       </div>
-      <div class="c-swimlane__handle" @mousedown="resizeStart"></div>
+      <div class="c-swimlane__handle" @mousedown="mousedown"></div>
     </div>
 
     <div
@@ -74,7 +74,7 @@ import tooltipHelpers from '../../../api/tooltips/tooltipMixins.js';
 
 export default {
   mixins: [tooltipHelpers],
-  inject: ['openmct'],
+  inject: ['openmct', 'mousedown', 'swimLaneLabelWidth'],
   props: {
     iconClass: {
       type: String,
@@ -187,7 +187,7 @@ export default {
         return {};
       }
 
-      const columnWidth = this.labelWidth / 2;
+      const columnWidth = this.swimLaneLabelWidth / 2;
 
       return {
         'grid-template-columns': `${columnWidth}px ${columnWidth}px 1fr`
@@ -206,31 +206,6 @@ export default {
       } else {
         this.buttonClickOff();
       }
-    },
-    resizeStart(event) {
-      console.log(`resizingStart: ${this.resizeStartX}`);
-      this.resizeStartX = event.clientX;
-      this.resizeStartWidth = this.labelWidth;
-
-      document.addEventListener('mouseup', this.resizeEnd, {
-        once: true,
-        capture: true
-      });
-      document.addEventListener('mousemove', this.resize);
-      event.preventDefault();
-    },
-    resizeEnd(event) {
-      console.log('resizingEnd');
-      this.resizeStartX = undefined;
-      this.resizeStartWidth = undefined;
-      document.removeEventListener('mousemove', this.resize);
-      event.preventDefault();
-      event.stopPropagation();
-    },
-    resize(event) {
-      console.log(`resizing: ${this.labelWidth}`);
-      let delta = event.clientX - this.resizeStartX;
-      this.labelWidth = this.resizeStartWidth + delta;
     }
   }
 };

src/utils/vue/useDragResizer.js

@@ -0,0 +1,93 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { ref } from 'vue';
+
+/**
+ * @typedef {Object} DragResizerOptions the options object
+ * @property {number} [size=0] the initial size of the object to track size for
+ * @property {Function} [callback] the function to call when drag is complete
+ */
+
+/**
+ * @typedef {Object} ReturnObject the return object
+ * @property {number} size the reactive size ref
+ * @property {function} mousedown
+ */
+
+/**
+ * Defines a drag resizer hook that tracks the size of an object
+ * in vertical or horizontal direction on drag
+ * @param {('horizontal'|'vertical')} [direction='horizontal'] the direction of drag to track
+ * @param {DragResizerOptions} [param={}] the options object
+ * @returns {ReturnObject}
+ */
+export function useDragResizer(direction = 'horizontal', { size: initialSize = 0, callback } = {}) {
+  if (direction !== 'horizontal' && direction !== 'vertical') {
+    throw new Error(`Must specify 'horizontal' or 'vertical' drag direction`);
+  }
+
+  const size = ref(initialSize);
+
+  let dragStartLength;
+  let dragStartPosition;
+  const position = direction === 'horizontal' ? 'clientX' : 'clientY';
+
+  /**
+   * Begins the tracking process for the drag resizer
+   * and attaches mousemove and mousedown listeners to track size after drag completion
+   * Attach to a mousedown event for a draggable element
+   * @param {*} event the mousedown event
+   */
+  function mousedown(event) {
+    dragStartLength = size.value;
+    dragStartPosition = event[position];
+
+    document.addEventListener('mouseup', mouseup, {
+      once: true,
+      capture: true
+    });
+    document.addEventListener('mousemove', mousemove);
+    event.preventDefault();
+  }
+
+  function mousemove(event) {
+    const delta = event[position] - dragStartPosition;
+    size.value = dragStartLength + delta;
+  }
+
+  function mouseup(event) {
+    dragStartLength = undefined;
+    dragStartPosition = undefined;
+
+    document.removeEventListener('mousemove', mousemove);
+    event.preventDefault();
+    event.stopPropagation();
+
+    callback?.();
+  }
+
+  return {
+    size,
+    mousedown
+  };
+}