remove is selected, add hover event for extended liens

This commit is contained in:
Scott Bell 2024-12-17 20:04:16 +01:00
parent f4ec532357
commit cba7c7f8ed
5 changed files with 36 additions and 63 deletions

View File

@ -39,7 +39,6 @@ const PADDING = 1;
const CONTAINER_CLASS = 'c-events-tsv__container'; const CONTAINER_CLASS = 'c-events-tsv__container';
const NO_ITEMS_CLASS = 'c-events-tsv__no-items'; const NO_ITEMS_CLASS = 'c-events-tsv__no-items';
const EVENT_WRAPPER_CLASS = 'c-events-tsv__event-wrapper'; const EVENT_WRAPPER_CLASS = 'c-events-tsv__event-wrapper';
const EVENT_SELECTED_CLASS = 'is-selected';
const ID_PREFIX = 'wrapper-'; const ID_PREFIX = 'wrapper-';
const AXES_PADDING = 20; const AXES_PADDING = 20;
@ -117,9 +116,6 @@ export default {
this.unlisten = this.openmct.objects.observe(this.domainObject, '*', this.observeForChanges); this.unlisten = this.openmct.objects.observe(this.domainObject, '*', this.observeForChanges);
this.extendedLinesBus.on('disable-extended-lines', this.disableExtendEventLines); this.extendedLinesBus.on('disable-extended-lines', this.disableExtendEventLines);
this.extendedLinesBus.on('enable-extended-lines', this.enableExtendEventLines); this.extendedLinesBus.on('enable-extended-lines', this.enableExtendEventLines);
this.extendedLinesBus.on('event-clicked', this.checkIfOurEvent);
document.addEventListener('click', this.checkIfOutsideClick);
}, },
beforeUnmount() { beforeUnmount() {
if (this.eventStripResizeObserver) { if (this.eventStripResizeObserver) {
@ -136,9 +132,7 @@ export default {
this.extendedLinesBus.off('disable-extended-lines', this.disableExtendEventLines); this.extendedLinesBus.off('disable-extended-lines', this.disableExtendEventLines);
this.extendedLinesBus.off('enable-extended-lines', this.enableExtendEventLines); this.extendedLinesBus.off('enable-extended-lines', this.enableExtendEventLines);
this.extendedLinesBus.off('event-clicked', this.checkIfOurEvent); this.extendedLinesBus.off('event-hovered', this.checkIfOurEvent);
document.removeEventListener('click', this.checkIfOutsideClick);
}, },
methods: { methods: {
setTimeContext() { setTimeContext() {
@ -366,10 +360,10 @@ export default {
updateExistingEventWrapper(existingEventWrapper, event) { updateExistingEventWrapper(existingEventWrapper, event) {
existingEventWrapper.style.left = `${this.xScale(event.time)}px`; existingEventWrapper.style.left = `${this.xScale(event.time)}px`;
}, },
createPathSelection() { createPathSelection(eventWrapper) {
const selection = []; const selection = [];
selection.unshift({ selection.unshift({
element: this.$el, element: eventWrapper,
context: { context: {
item: this.domainObject item: this.domainObject
} }
@ -385,13 +379,13 @@ export default {
return selection; return selection;
}, },
createSelectionForInspector(event) { createSelectionForInspector(event, eventWrapper) {
const eventContext = { const eventContext = {
type: 'time-strip-event-selection', type: 'time-strip-event-selection',
event event
}; };
const selection = this.createPathSelection(); const selection = this.createPathSelection(eventWrapper);
if ( if (
selection.length && selection.length &&
this.openmct.objects.areIdsEqual( this.openmct.objects.areIdsEqual(
@ -405,7 +399,7 @@ export default {
}; };
} else { } else {
selection.unshift({ selection.unshift({
element: this.$el, element: eventWrapper,
context: { context: {
item: this.domainObject, item: this.domainObject,
...eventContext ...eventContext
@ -427,9 +421,11 @@ export default {
eventWrapper.ariaLabel = textToShow; eventWrapper.ariaLabel = textToShow;
eventWrapper.addEventListener('mouseover', () => { eventWrapper.addEventListener('mouseover', () => {
this.showToolTip(textToShow, eventTickElement); this.showToolTip(textToShow, eventTickElement);
this.extendedLinesBus.updateHoverExtendEventLine(this.keyString, event.time);
}); });
eventWrapper.addEventListener('mouseleave', () => { eventWrapper.addEventListener('mouseleave', () => {
this.tooltip?.destroy(); this.tooltip?.destroy();
this.extendedLinesBus.updateHoverExtendEventLine(this.keyString, null);
}); });
} }
eventWrapper.appendChild(eventTickElement); eventWrapper.appendChild(eventTickElement);
@ -442,9 +438,7 @@ export default {
eventWrapper.addEventListener('click', (mouseEvent) => { eventWrapper.addEventListener('click', (mouseEvent) => {
mouseEvent.stopPropagation(); mouseEvent.stopPropagation();
this.createSelectionForInspector(event); this.createSelectionForInspector(event, eventWrapper);
this.toggleEventSelection(eventTickElement);
this.extendedLinesBus.eventClicked(this.keyString);
}); });
return eventWrapper; return eventWrapper;
@ -453,7 +447,7 @@ export default {
if (this.extendLines) { if (this.extendLines) {
const lines = this.eventHistory const lines = this.eventHistory
.filter((e) => this.isEventInBounds(e)) .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', { this.extendedLinesBus.emit('update-extended-lines', {
lines, lines,
keyString: this.keyString keyString: this.keyString
@ -472,27 +466,6 @@ export default {
parentElement: referenceElement, parentElement: referenceElement,
cssClasses: ['c-timeline-event-tooltip'] 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;
}
} }
} }
}; };

View File

@ -31,7 +31,7 @@ export default class ExtendedLinesBus extends EventEmitter {
enableExtendEventLines(keyString) { enableExtendEventLines(keyString) {
this.emit('enable-extended-lines', keyString); this.emit('enable-extended-lines', keyString);
} }
eventClicked(keyString) { updateHoverExtendEventLine(keyString, id) {
this.emit('event-clicked', keyString); this.emit('update-extended-hover', { id, keyString });
} }
} }

View File

@ -28,12 +28,17 @@
> >
<div <div
v-for="(line, index) in lines" v-for="(line, index) in lines"
:id="line.id"
:key="index" :key="index"
class="c-timeline__extended-line" class="c-timeline__extended-line"
:class="[line.limitClass, { 'c-timeline__extended-line-hovered': isHovered(key, index) }]" :class="[
line.limitClass,
{
'c-timeline__extended-line-hovered':
hoveredLineId && hoveredKeyString === key && line.id === hoveredLineId
}
]"
:style="{ left: `${line.x + leftOffset}px`, height: `${height}px` }" :style="{ left: `${line.x + leftOffset}px`, height: `${height}px` }"
@mouseover="startingHover(key, index)"
@mouseleave="startingHover(null, null)"
></div> ></div>
</div> </div>
</div> </div>
@ -54,26 +59,18 @@ export default {
leftOffset: { leftOffset: {
type: Number, type: Number,
default: 0 default: 0
},
extendedLineHover: {
type: Object,
required: true
} }
}, },
data() { computed: {
return { hoveredLineId() {
hoveredLine: { return this.extendedLineHover.id || null;
key: null,
index: null
}
};
},
methods: {
startingHover(key, index) {
if (key === null && index === null) {
this.hoveredLine = { key: null, index: null };
} else {
this.hoveredLine = { key, index };
}
}, },
isHovered(key, index) { hoveredKeyString() {
return this.hoveredLine.key === key && this.hoveredLine.index === index; return this.extendedLineHover.keyString || null;
} }
} }
}; };

View File

@ -50,6 +50,7 @@
:extended-lines-per-key="extendedLinesPerKey" :extended-lines-per-key="extendedLinesPerKey"
:height="height" :height="height"
:left-offset="extendedLinesLeftOffset" :left-offset="extendedLinesLeftOffset"
:extended-line-hover="extendedLineHover"
/> />
</div> </div>
</template> </template>
@ -103,6 +104,7 @@ export default {
useIndependentTime: this.domainObject.configuration.useIndependentTime === true, useIndependentTime: this.domainObject.configuration.useIndependentTime === true,
timeOptions: this.domainObject.configuration.timeOptions, timeOptions: this.domainObject.configuration.timeOptions,
extendedLinesPerKey: {}, extendedLinesPerKey: {},
extendedLineHover: {},
extendedLinesLeftOffset: 0 extendedLinesLeftOffset: 0
}; };
}, },
@ -123,12 +125,14 @@ export default {
this.handleContentResize.cancel(); this.handleContentResize.cancel();
this.contentResizeObserver.disconnect(); this.contentResizeObserver.disconnect();
this.extendedLinesBus.off('update-extended-lines', this.updateExtendedLines); this.extendedLinesBus.off('update-extended-lines', this.updateExtendedLines);
this.extendedLinesBus.off('update-extended-hover', this.updateExtendedHover);
}, },
mounted() { mounted() {
this.items = []; this.items = [];
this.setTimeContext(); this.setTimeContext();
this.extendedLinesBus.on('update-extended-lines', this.updateExtendedLines); this.extendedLinesBus.on('update-extended-lines', this.updateExtendedLines);
this.extendedLinesBus.on('update-extended-hover', this.updateExtendedHover);
if (this.composition) { if (this.composition) {
this.composition.on('add', this.addItem); this.composition.on('add', this.addItem);
@ -254,6 +258,9 @@ export default {
updateExtendedLines({ keyString, lines }) { updateExtendedLines({ keyString, lines }) {
this.extendedLinesPerKey[keyString] = lines; this.extendedLinesPerKey[keyString] = lines;
}, },
updateExtendedHover({ keyString, id }) {
this.extendedLineHover = { keyString, id };
},
calculateExtendedLinesLeftOffset() { calculateExtendedLinesLeftOffset() {
const swimLaneOffset = this.calculateSwimlaneOffset(); const swimLaneOffset = this.calculateSwimlaneOffset();
this.extendedLinesLeftOffset = this.alignmentData.leftWidth + swimLaneOffset; this.extendedLinesLeftOffset = this.alignmentData.leftWidth + swimLaneOffset;

View File

@ -57,8 +57,4 @@
width: $eventLineW; width: $eventLineW;
background-color: $colorEventLineExtended; background-color: $colorEventLineExtended;
} }
&__extended-line-hovered {
background-color: green;
}
} }