mirror of
https://github.com/nasa/openmct.git
synced 2024-12-26 08:11:05 +00:00
remove is selected, add hover event for extended liens
This commit is contained in:
parent
f4ec532357
commit
cba7c7f8ed
src/plugins
events/components
timeline
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -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 });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -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;
|
||||||
|
@ -57,8 +57,4 @@
|
|||||||
width: $eventLineW;
|
width: $eventLineW;
|
||||||
background-color: $colorEventLineExtended;
|
background-color: $colorEventLineExtended;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__extended-line-hovered {
|
|
||||||
background-color: green;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user