ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-19 07:38:15 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Add a sticky telemetry point select to on-click plot behavior #2379 (#2471)

Browse Source 
* Add a sticky telemetry point select to on-click plot behavior #2379

* changed class 'lock-highlight-point' on parent element to drive lock/unlock feature on highlight points.

* Styling for sticky-telemetry-point

- New glyph: icon-cursor-lock;
- Better layout and SCSS for overlaid state indicators in plot area;

* single click on plot, lock/unlock highlight points.

* cleanup + added lock icon on legends.

* fixed panning does not end on mouse up.
This commit is contained in:
Nikhil
2019-10-07 13:55:47 -07:00
committed by Deep Tailor
parent c054914a9c
commit 9b7a986475
9 changed files with 177 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/plugins/plot/res/templates/mct-plot.html
View File

@ -29,7 +29,8 @@
</div>
<!-- COLLAPSED PLOT LEGEND -->
<div class="plot-wrapper-collapsed-legend">
<div class="plot-wrapper-collapsed-legend"
ng-class="{'icon-cursor-lock': !!lockHighlightPoint}">
<div class="plot-legend-item"
ng-repeat="series in series track by $index">
<div class="plot-series-swatch-and-name">
@ -74,7 +75,8 @@
</tr>
</thead>
<tr ng-repeat="series in series" class="plot-legend-item">
<td class="plot-series-swatch-and-name">
<td class="plot-series-swatch-and-name"
ng-class="{'icon-cursor-lock': !!lockHighlightPoint}">
<span class="plot-series-color-swatch"
ng-style="{ 'background-color': series.get('color').asHexString() }">
</span>
@ -145,9 +147,14 @@
ng-style="{
left: (tickWidth + 30) + 'px'
}">
<span class="t-object-alert t-alert-unsynced"
title="This plot is not currently displaying the latest data.
Reset Pan/zoom to return to view latest data."></span>
<div class="l-state-indicators">
<span class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."></span>
<span class="l-state-indicators__alert-cursor-lock icon-cursor-lock"
title="Telemetry point selection is locked. Click anywhere in the plot to unlock."
ng-if="lockHighlightPoint"></span>
</div>
<div class="gl-plot-display-area has-local-controls has-cursor-guides">
<mct-ticks axis="xAxis">
<div class="gl-plot-hash hash-v"

40
src/plugins/plot/src/plot/MCTPlotController.js
View File

@ -65,6 +65,7 @@ define([
}
this.$canvas = this.$element.find('canvas');
this.listenTo(this.$canvas, 'click', this.onMouseClick, this);
this.listenTo(this.$canvas, 'mousemove', this.trackMousePosition, this);
this.listenTo(this.$canvas, 'mouseleave', this.untrackMousePosition, this);
this.listenTo(this.$canvas, 'mousedown', this.onMouseDown, this);
@ -75,6 +76,7 @@ define([
MCTPlotController.prototype.initialize = function () {
this.$canvas = this.$element.find('canvas');
this.listenTo(this.$canvas, 'click', this.onMouseClick, this);
this.listenTo(this.$canvas, 'mousemove', this.trackMousePosition, this);
this.listenTo(this.$canvas, 'mouseleave', this.untrackMousePosition, this);
this.listenTo(this.$canvas, 'mousedown', this.onMouseDown, this);
@ -206,9 +208,30 @@ define([
this.highlightValues(point);
};
MCTPlotController.prototype.onMouseClick = function ($event) {
const isClick = this.isMouseClick();
if (this.pan) {
this.endPan($event);
}
if (this.marquee) {
this.endMarquee($event);
}
this.$scope.$apply();
if (!this.$scope.highlights.length || !isClick) {
return;
}
this.$scope.lockHighlightPoint = !this.$scope.lockHighlightPoint;
};
MCTPlotController.prototype.highlightValues = function (point) {
this.highlightPoint = point;
this.$scope.$emit('plot:highlight:update', point);
if (this.$scope.lockHighlightPoint) {
return;
}
if (!point) {
this.$scope.highlights = [];
this.$scope.series.map(function (series) {
@ -249,15 +272,18 @@ define([
MCTPlotController.prototype.onMouseUp = function ($event) {
this.stopListening(this.$window, 'mouseup', this.onMouseUp, this);
this.stopListening(this.$window, 'mousemove', this.trackMousePosition, this);
if (this.pan) {
this.endPan($event);
}
if (this.marquee) {
this.endMarquee($event);
}
this.$scope.$apply();
};
MCTPlotController.prototype.isMouseClick = function () {
if (!this.marquee) {
return;
}
const { start, end } = this.marquee;
return start.x === end.x && start.y === end.y;
}
MCTPlotController.prototype.updateMarquee = function () {
if (!this.marquee) {
return;