mirror of
https://github.com/nasa/openmct.git
synced 2024-12-20 13:43:09 +00:00
pass event bus
This commit is contained in:
parent
8b5e2f4595
commit
3b236cc33b
@ -113,7 +113,8 @@
|
|||||||
creatable: true
|
creatable: true
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
openmct.install(openmct.plugins.Timeline());
|
const timeLinePlugin = openmct.plugins.Timeline();
|
||||||
|
openmct.install(timeLinePlugin);
|
||||||
openmct.install(openmct.plugins.Hyperlink());
|
openmct.install(openmct.plugins.Hyperlink());
|
||||||
openmct.install(openmct.plugins.UTCTimeSystem());
|
openmct.install(openmct.plugins.UTCTimeSystem());
|
||||||
openmct.install(
|
openmct.install(
|
||||||
@ -234,7 +235,7 @@
|
|||||||
openmct.install(openmct.plugins.Timelist());
|
openmct.install(openmct.plugins.Timelist());
|
||||||
openmct.install(openmct.plugins.BarChart());
|
openmct.install(openmct.plugins.BarChart());
|
||||||
openmct.install(openmct.plugins.ScatterPlot());
|
openmct.install(openmct.plugins.ScatterPlot());
|
||||||
openmct.install(openmct.plugins.EventTimestripPlugin());
|
openmct.install(openmct.plugins.EventTimestripPlugin(timeLinePlugin.eventBus));
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
openmct.start();
|
openmct.start();
|
||||||
});
|
});
|
||||||
|
@ -23,7 +23,7 @@ import mount from 'utils/mount';
|
|||||||
|
|
||||||
import EventTimelineView from './components/EventTimelineView.vue';
|
import EventTimelineView from './components/EventTimelineView.vue';
|
||||||
|
|
||||||
export default function EventTimestripViewProvider(openmct) {
|
export default function EventTimestripViewProvider(openmct, timelineEventBus) {
|
||||||
const type = 'event.time-line.view';
|
const type = 'event.time-line.view';
|
||||||
|
|
||||||
function hasEventTelemetry(domainObject) {
|
function hasEventTelemetry(domainObject) {
|
||||||
@ -65,7 +65,8 @@ export default function EventTimestripViewProvider(openmct) {
|
|||||||
provide: {
|
provide: {
|
||||||
openmct: openmct,
|
openmct: openmct,
|
||||||
domainObject: domainObject,
|
domainObject: domainObject,
|
||||||
objectPath: objectPath
|
objectPath: objectPath,
|
||||||
|
timelineEventBus
|
||||||
},
|
},
|
||||||
template: '<event-timeline-view ref="root"></event-timeline-view>'
|
template: '<event-timeline-view ref="root"></event-timeline-view>'
|
||||||
},
|
},
|
||||||
|
@ -44,7 +44,7 @@ const ID_PREFIX = 'wrapper-';
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [eventData],
|
mixins: [eventData],
|
||||||
inject: ['openmct', 'domainObject', 'objectPath'],
|
inject: ['openmct', 'domainObject', 'objectPath', 'timelineEventBus'],
|
||||||
data() {
|
data() {
|
||||||
const timeSystem = this.openmct.time.getTimeSystem();
|
const timeSystem = this.openmct.time.getTimeSystem();
|
||||||
this.metadata = {};
|
this.metadata = {};
|
||||||
@ -55,7 +55,7 @@ export default {
|
|||||||
height: 0,
|
height: 0,
|
||||||
eventHistory: [],
|
eventHistory: [],
|
||||||
timeSystem: timeSystem,
|
timeSystem: timeSystem,
|
||||||
overlapping: false
|
extendLines: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@ -201,6 +201,9 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
if (this.extendLines) {
|
||||||
|
this.emitExtendedLines();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
setDimensions() {
|
setDimensions() {
|
||||||
const eventsHolder = this.$refs.events;
|
const eventsHolder = this.$refs.events;
|
||||||
@ -318,6 +321,10 @@ export default {
|
|||||||
const eventWrapper = this.createEventWrapper(index, item);
|
const eventWrapper = this.createEventWrapper(index, item);
|
||||||
containerElement.appendChild(eventWrapper);
|
containerElement.appendChild(eventWrapper);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.extendLines) {
|
||||||
|
this.emitExtendedLines();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
updateExistingEventWrapper(existingEventWrapper, event) {
|
updateExistingEventWrapper(existingEventWrapper, event) {
|
||||||
// Update the x co-ordinates of the event wrapper
|
// Update the x co-ordinates of the event wrapper
|
||||||
@ -397,6 +404,12 @@ export default {
|
|||||||
});
|
});
|
||||||
|
|
||||||
return eventWrapper;
|
return eventWrapper;
|
||||||
|
},
|
||||||
|
emitExtendedLines() {
|
||||||
|
const lines = this.eventHistory
|
||||||
|
.filter((e) => this.isEventInBounds(e))
|
||||||
|
.map((e) => ({ x: this.xScale(e.time) }));
|
||||||
|
this.timelineEventBus.emit('update-extended-lines', lines);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -23,9 +23,9 @@
|
|||||||
import EventInspectorViewProvider from './EventInspectorViewProvider.js';
|
import EventInspectorViewProvider from './EventInspectorViewProvider.js';
|
||||||
import EventTimelineViewProvider from './EventTimelineViewProvider.js';
|
import EventTimelineViewProvider from './EventTimelineViewProvider.js';
|
||||||
|
|
||||||
export default function (options) {
|
export default function plugin(timelineEventBus) {
|
||||||
return function install(openmct) {
|
return function install(openmct) {
|
||||||
openmct.objectViews.addProvider(new EventTimelineViewProvider(openmct));
|
openmct.objectViews.addProvider(new EventTimelineViewProvider(openmct, timelineEventBus));
|
||||||
openmct.inspectorViews.addProvider(new EventInspectorViewProvider(openmct));
|
openmct.inspectorViews.addProvider(new EventInspectorViewProvider(openmct));
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
28
src/plugins/timeline/ExtendedLinesBus.js
Normal file
28
src/plugins/timeline/ExtendedLinesBus.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
/*****************************************************************************
|
||||||
|
* 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 { EventEmitter } from 'eventemitter3';
|
||||||
|
export default class EventBusAPI extends EventEmitter {
|
||||||
|
updateExtendedLine(lineData) {
|
||||||
|
this.emit('update-extended-lines', lineData);
|
||||||
|
}
|
||||||
|
}
|
67
src/plugins/timeline/ExtendedLinesOverlay.vue
Normal file
67
src/plugins/timeline/ExtendedLinesOverlay.vue
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<!--
|
||||||
|
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.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="extended-lines-overlay">
|
||||||
|
<div
|
||||||
|
v-for="(line, index) in extendedLines"
|
||||||
|
:key="index"
|
||||||
|
class="extended-line"
|
||||||
|
:style="{ left: `${line.x}px`, height: `${height}px` }"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ExtendedLinesOverlay',
|
||||||
|
props: {
|
||||||
|
extendedLines: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: Number,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.extended-lines-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.extended-line {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 2px;
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
</style>
|
@ -44,6 +44,8 @@
|
|||||||
:item="item"
|
:item="item"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<ExtendedLinesOverlay :extended-lines="extendedLines" :height="height" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -56,6 +58,7 @@ import SwimLane from '@/ui/components/swim-lane/SwimLane.vue';
|
|||||||
import TimelineAxis from '../../ui/components/TimeSystemAxis.vue';
|
import TimelineAxis from '../../ui/components/TimeSystemAxis.vue';
|
||||||
import { useAlignment } from '../../ui/composables/alignmentContext.js';
|
import { useAlignment } from '../../ui/composables/alignmentContext.js';
|
||||||
import { getValidatedData, getValidatedGroups } from '../plan/util.js';
|
import { getValidatedData, getValidatedGroups } from '../plan/util.js';
|
||||||
|
import ExtendedLinesOverlay from './ExtendedLinesOverlay.vue'; // Import the overlay component
|
||||||
import TimelineObjectView from './TimelineObjectView.vue';
|
import TimelineObjectView from './TimelineObjectView.vue';
|
||||||
|
|
||||||
const unknownObjectType = {
|
const unknownObjectType = {
|
||||||
@ -69,9 +72,10 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
TimelineObjectView,
|
TimelineObjectView,
|
||||||
TimelineAxis,
|
TimelineAxis,
|
||||||
SwimLane
|
SwimLane,
|
||||||
|
ExtendedLinesOverlay
|
||||||
},
|
},
|
||||||
inject: ['openmct', 'domainObject', 'path', 'composition'],
|
inject: ['openmct', 'domainObject', 'path', 'composition', 'eventsBus'],
|
||||||
setup() {
|
setup() {
|
||||||
const domainObject = inject('domainObject');
|
const domainObject = inject('domainObject');
|
||||||
const path = inject('path');
|
const path = inject('path');
|
||||||
@ -89,6 +93,7 @@ export default {
|
|||||||
items: [],
|
items: [],
|
||||||
timeSystems: [],
|
timeSystems: [],
|
||||||
height: 0,
|
height: 0,
|
||||||
|
extendedLines: [],
|
||||||
useIndependentTime: this.domainObject.configuration.useIndependentTime === true,
|
useIndependentTime: this.domainObject.configuration.useIndependentTime === true,
|
||||||
timeOptions: this.domainObject.configuration.timeOptions
|
timeOptions: this.domainObject.configuration.timeOptions
|
||||||
};
|
};
|
||||||
@ -101,11 +106,14 @@ export default {
|
|||||||
this.stopFollowingTimeContext();
|
this.stopFollowingTimeContext();
|
||||||
this.handleContentResize.cancel();
|
this.handleContentResize.cancel();
|
||||||
this.contentResizeObserver.disconnect();
|
this.contentResizeObserver.disconnect();
|
||||||
|
this.eventsBus.off('update-extended-lines', this.updateExtendedLines);
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.items = [];
|
this.items = [];
|
||||||
this.setTimeContext();
|
this.setTimeContext();
|
||||||
|
|
||||||
|
this.eventsBus.on('update-extended-lines', this.updateExtendedLines);
|
||||||
|
|
||||||
if (this.composition) {
|
if (this.composition) {
|
||||||
this.composition.on('add', this.addItem);
|
this.composition.on('add', this.addItem);
|
||||||
this.composition.on('remove', this.removeItem);
|
this.composition.on('remove', this.removeItem);
|
||||||
@ -222,6 +230,10 @@ export default {
|
|||||||
this.timeContext.off('boundsChanged', this.updateViewBounds);
|
this.timeContext.off('boundsChanged', this.updateViewBounds);
|
||||||
this.timeContext.off('clockChanged', this.updateViewBounds);
|
this.timeContext.off('clockChanged', this.updateViewBounds);
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
updateExtendedLines(lines) {
|
||||||
|
console.debug('🗺️ Updating extended lines', lines);
|
||||||
|
this.extendedLines = lines;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -24,7 +24,7 @@ import mount from 'utils/mount';
|
|||||||
|
|
||||||
import TimelineViewLayout from './TimelineViewLayout.vue';
|
import TimelineViewLayout from './TimelineViewLayout.vue';
|
||||||
|
|
||||||
export default function TimelineViewProvider(openmct) {
|
export default function TimelineViewProvider(openmct, eventsBus) {
|
||||||
return {
|
return {
|
||||||
key: 'time-strip.view',
|
key: 'time-strip.view',
|
||||||
name: 'TimeStrip',
|
name: 'TimeStrip',
|
||||||
@ -52,7 +52,8 @@ export default function TimelineViewProvider(openmct) {
|
|||||||
openmct,
|
openmct,
|
||||||
domainObject,
|
domainObject,
|
||||||
path: objectPath,
|
path: objectPath,
|
||||||
composition: openmct.composition.get(domainObject)
|
composition: openmct.composition.get(domainObject),
|
||||||
|
eventsBus
|
||||||
},
|
},
|
||||||
template: '<timeline-view-layout></timeline-view-layout>'
|
template: '<timeline-view-layout></timeline-view-layout>'
|
||||||
},
|
},
|
||||||
|
@ -20,12 +20,17 @@
|
|||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
|
|
||||||
|
import ExtendedLinesBus from './ExtendedLinesBus.js';
|
||||||
import TimelineCompositionPolicy from './TimelineCompositionPolicy.js';
|
import TimelineCompositionPolicy from './TimelineCompositionPolicy.js';
|
||||||
import timelineInterceptor from './timelineInterceptor.js';
|
import timelineInterceptor from './timelineInterceptor.js';
|
||||||
import TimelineViewProvider from './TimelineViewProvider.js';
|
import TimelineViewProvider from './TimelineViewProvider.js';
|
||||||
|
|
||||||
|
const eventsBus = new ExtendedLinesBus();
|
||||||
|
|
||||||
|
export { eventsBus };
|
||||||
|
|
||||||
export default function () {
|
export default function () {
|
||||||
return function install(openmct) {
|
function install(openmct) {
|
||||||
openmct.types.addType('time-strip', {
|
openmct.types.addType('time-strip', {
|
||||||
name: 'Time Strip',
|
name: 'Time Strip',
|
||||||
key: 'time-strip',
|
key: 'time-strip',
|
||||||
@ -43,6 +48,10 @@ export default function () {
|
|||||||
timelineInterceptor(openmct);
|
timelineInterceptor(openmct);
|
||||||
openmct.composition.addPolicy(new TimelineCompositionPolicy(openmct).allow);
|
openmct.composition.addPolicy(new TimelineCompositionPolicy(openmct).allow);
|
||||||
|
|
||||||
openmct.objectViews.addProvider(new TimelineViewProvider(openmct));
|
openmct.objectViews.addProvider(new TimelineViewProvider(openmct, eventsBus));
|
||||||
};
|
}
|
||||||
|
|
||||||
|
install.eventBus = eventsBus;
|
||||||
|
|
||||||
|
return install;
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,23 @@
|
|||||||
.c-timeline-holder {
|
.c-timeline-holder {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-timeline__objects {
|
.c-timeline__objects {
|
||||||
display: contents;
|
display: contents;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.extended-lines-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
pointer-events: none; /* Allows clicks to pass through */
|
||||||
|
z-index: 10; /* Ensure it sits atop swimlanes */
|
||||||
|
}
|
||||||
|
|
||||||
|
.extended-line {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 2px;
|
||||||
|
background-color: $colorBodyFg; /* Use desired color */
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user