From cba7c7f8ed970ebb37853bc28154abe837063399 Mon Sep 17 00:00:00 2001 From: Scott Bell Date: Tue, 17 Dec 2024 20:04:16 +0100 Subject: [PATCH] remove is selected, add hover event for extended liens --- .../events/components/EventTimelineView.vue | 47 ++++--------------- src/plugins/timeline/ExtendedLinesBus.js | 4 +- src/plugins/timeline/ExtendedLinesOverlay.vue | 37 +++++++-------- src/plugins/timeline/TimelineViewLayout.vue | 7 +++ src/plugins/timeline/timeline.scss | 4 -- 5 files changed, 36 insertions(+), 63 deletions(-) diff --git a/src/plugins/events/components/EventTimelineView.vue b/src/plugins/events/components/EventTimelineView.vue index 9ad732a0009..f135fd3f771 100644 --- a/src/plugins/events/components/EventTimelineView.vue +++ b/src/plugins/events/components/EventTimelineView.vue @@ -39,7 +39,6 @@ const PADDING = 1; const CONTAINER_CLASS = 'c-events-tsv__container'; const NO_ITEMS_CLASS = 'c-events-tsv__no-items'; const EVENT_WRAPPER_CLASS = 'c-events-tsv__event-wrapper'; -const EVENT_SELECTED_CLASS = 'is-selected'; const ID_PREFIX = 'wrapper-'; const AXES_PADDING = 20; @@ -117,9 +116,6 @@ export default { this.unlisten = this.openmct.objects.observe(this.domainObject, '*', this.observeForChanges); this.extendedLinesBus.on('disable-extended-lines', this.disableExtendEventLines); this.extendedLinesBus.on('enable-extended-lines', this.enableExtendEventLines); - this.extendedLinesBus.on('event-clicked', this.checkIfOurEvent); - - document.addEventListener('click', this.checkIfOutsideClick); }, beforeUnmount() { if (this.eventStripResizeObserver) { @@ -136,9 +132,7 @@ export default { this.extendedLinesBus.off('disable-extended-lines', this.disableExtendEventLines); this.extendedLinesBus.off('enable-extended-lines', this.enableExtendEventLines); - this.extendedLinesBus.off('event-clicked', this.checkIfOurEvent); - - document.removeEventListener('click', this.checkIfOutsideClick); + this.extendedLinesBus.off('event-hovered', this.checkIfOurEvent); }, methods: { setTimeContext() { @@ -366,10 +360,10 @@ export default { updateExistingEventWrapper(existingEventWrapper, event) { existingEventWrapper.style.left = `${this.xScale(event.time)}px`; }, - createPathSelection() { + createPathSelection(eventWrapper) { const selection = []; selection.unshift({ - element: this.$el, + element: eventWrapper, context: { item: this.domainObject } @@ -385,13 +379,13 @@ export default { return selection; }, - createSelectionForInspector(event) { + createSelectionForInspector(event, eventWrapper) { const eventContext = { type: 'time-strip-event-selection', event }; - const selection = this.createPathSelection(); + const selection = this.createPathSelection(eventWrapper); if ( selection.length && this.openmct.objects.areIdsEqual( @@ -405,7 +399,7 @@ export default { }; } else { selection.unshift({ - element: this.$el, + element: eventWrapper, context: { item: this.domainObject, ...eventContext @@ -427,9 +421,11 @@ export default { eventWrapper.ariaLabel = textToShow; eventWrapper.addEventListener('mouseover', () => { this.showToolTip(textToShow, eventTickElement); + this.extendedLinesBus.updateHoverExtendEventLine(this.keyString, event.time); }); eventWrapper.addEventListener('mouseleave', () => { this.tooltip?.destroy(); + this.extendedLinesBus.updateHoverExtendEventLine(this.keyString, null); }); } eventWrapper.appendChild(eventTickElement); @@ -442,9 +438,7 @@ export default { eventWrapper.addEventListener('click', (mouseEvent) => { mouseEvent.stopPropagation(); - this.createSelectionForInspector(event); - this.toggleEventSelection(eventTickElement); - this.extendedLinesBus.eventClicked(this.keyString); + this.createSelectionForInspector(event, eventWrapper); }); return eventWrapper; @@ -453,7 +447,7 @@ export default { if (this.extendLines) { const lines = this.eventHistory .filter((e) => this.isEventInBounds(e)) - .map((e) => ({ x: this.xScale(e.time), limitClass: e.limitClass })); + .map((e) => ({ x: this.xScale(e.time), limitClass: e.limitClass, id: e.time })); this.extendedLinesBus.emit('update-extended-lines', { lines, keyString: this.keyString @@ -472,27 +466,6 @@ export default { parentElement: referenceElement, cssClasses: ['c-timeline-event-tooltip'] }); - }, - checkIfOurEvent(keyString) { - if (this.keyString !== keyString) { - this.selectedEvent?.classList.remove(EVENT_SELECTED_CLASS); - this.selectedEvent = null; - } - }, - toggleEventSelection(clickedEvent) { - this.selectedEvent?.classList.remove(EVENT_SELECTED_CLASS); - clickedEvent.classList.add(EVENT_SELECTED_CLASS); - this.selectedEvent = clickedEvent; - }, - checkIfOutsideClick(event) { - if ( - this.selectedEvent && - !this.selectedEvent.contains(event.target) && - !this.$refs.events.contains(event.target) - ) { - this.selectedEvent.classList.remove(EVENT_SELECTED_CLASS); - this.selectedEvent = null; - } } } }; diff --git a/src/plugins/timeline/ExtendedLinesBus.js b/src/plugins/timeline/ExtendedLinesBus.js index d7b8558bd29..56f70719851 100644 --- a/src/plugins/timeline/ExtendedLinesBus.js +++ b/src/plugins/timeline/ExtendedLinesBus.js @@ -31,7 +31,7 @@ export default class ExtendedLinesBus extends EventEmitter { enableExtendEventLines(keyString) { this.emit('enable-extended-lines', keyString); } - eventClicked(keyString) { - this.emit('event-clicked', keyString); + updateHoverExtendEventLine(keyString, id) { + this.emit('update-extended-hover', { id, keyString }); } } diff --git a/src/plugins/timeline/ExtendedLinesOverlay.vue b/src/plugins/timeline/ExtendedLinesOverlay.vue index 771e42bcd54..b9a06ed64d2 100644 --- a/src/plugins/timeline/ExtendedLinesOverlay.vue +++ b/src/plugins/timeline/ExtendedLinesOverlay.vue @@ -28,12 +28,17 @@ >
@@ -54,26 +59,18 @@ export default { leftOffset: { type: Number, default: 0 + }, + extendedLineHover: { + type: Object, + required: true } }, - data() { - return { - hoveredLine: { - key: null, - index: null - } - }; - }, - methods: { - startingHover(key, index) { - if (key === null && index === null) { - this.hoveredLine = { key: null, index: null }; - } else { - this.hoveredLine = { key, index }; - } + computed: { + hoveredLineId() { + return this.extendedLineHover.id || null; }, - isHovered(key, index) { - return this.hoveredLine.key === key && this.hoveredLine.index === index; + hoveredKeyString() { + return this.extendedLineHover.keyString || null; } } }; diff --git a/src/plugins/timeline/TimelineViewLayout.vue b/src/plugins/timeline/TimelineViewLayout.vue index 9cbf7627c36..821cbdc155e 100644 --- a/src/plugins/timeline/TimelineViewLayout.vue +++ b/src/plugins/timeline/TimelineViewLayout.vue @@ -50,6 +50,7 @@ :extended-lines-per-key="extendedLinesPerKey" :height="height" :left-offset="extendedLinesLeftOffset" + :extended-line-hover="extendedLineHover" /> @@ -103,6 +104,7 @@ export default { useIndependentTime: this.domainObject.configuration.useIndependentTime === true, timeOptions: this.domainObject.configuration.timeOptions, extendedLinesPerKey: {}, + extendedLineHover: {}, extendedLinesLeftOffset: 0 }; }, @@ -123,12 +125,14 @@ export default { this.handleContentResize.cancel(); this.contentResizeObserver.disconnect(); this.extendedLinesBus.off('update-extended-lines', this.updateExtendedLines); + this.extendedLinesBus.off('update-extended-hover', this.updateExtendedHover); }, mounted() { this.items = []; this.setTimeContext(); this.extendedLinesBus.on('update-extended-lines', this.updateExtendedLines); + this.extendedLinesBus.on('update-extended-hover', this.updateExtendedHover); if (this.composition) { this.composition.on('add', this.addItem); @@ -254,6 +258,9 @@ export default { updateExtendedLines({ keyString, lines }) { this.extendedLinesPerKey[keyString] = lines; }, + updateExtendedHover({ keyString, id }) { + this.extendedLineHover = { keyString, id }; + }, calculateExtendedLinesLeftOffset() { const swimLaneOffset = this.calculateSwimlaneOffset(); this.extendedLinesLeftOffset = this.alignmentData.leftWidth + swimLaneOffset; diff --git a/src/plugins/timeline/timeline.scss b/src/plugins/timeline/timeline.scss index cbfb2a8871c..4d79f6dd9e8 100644 --- a/src/plugins/timeline/timeline.scss +++ b/src/plugins/timeline/timeline.scss @@ -57,8 +57,4 @@ width: $eventLineW; background-color: $colorEventLineExtended; } - - &__extended-line-hovered { - background-color: green; - } }