mirror of
https://github.com/nasa/openmct.git
synced 2025-02-01 00:45:41 +00:00
Merge branch 'open615' into open889
Merge in work-in-progress for WTD-615 (Fixed Position View) into topic branch for WTD-889 (a sub-issue of WTD-615, which has been broken down into discrete chunks to support development. Conflicts: platform/telemetry/src/TelemetrySubscription.js
This commit is contained in:
Victor Woeltjen
commit
c6064dfe6c
@ -2,13 +2,20 @@
|
||||
mct-object="domainObject"
|
||||
ng-model="representation">
|
||||
</mct-representation>
|
||||
<div class="holder edit-area outline abs">
|
||||
<!-- edit toolbar goes here -->
|
||||
<div class="holder edit-area outline abs"
|
||||
ng-init="toolbar = {}">
|
||||
|
||||
<mct-toolbar name="mctToolbar"
|
||||
structure="toolbar.structure"
|
||||
ng-model="toolbar.state">
|
||||
</mct-toolbar>
|
||||
|
||||
<div class='split-layout vertical contents abs work-area'>
|
||||
<div class='abs pane left edit-main'>
|
||||
<div class='holder abs object-holder'>
|
||||
<mct-representation key="representation.selected.key"
|
||||
mct-object="domainObject">
|
||||
toolbar="toolbar"
|
||||
mct-object="representation.selected.key && domainObject">
|
||||
</mct-representation>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
37
platform/commonUI/edit/src/ToolbarRepresenter.js
Normal file
37
platform/commonUI/edit/src/ToolbarRepresenter.js
Normal file
@ -0,0 +1,37 @@
|
||||
/*global define*/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
|
||||
function ToolbarRepresenter(scope, element, attrs) {
|
||||
var parent = scope.$parent;
|
||||
|
||||
function represent(domainObject, representation) {
|
||||
// New domain object, clear out the tool bar
|
||||
parent.toolbar = {};
|
||||
scope.toolbar = parent.toolbar;
|
||||
}
|
||||
|
||||
return {
|
||||
/**
|
||||
* Set the current representation in use, and the domain
|
||||
* object being represented.
|
||||
*
|
||||
* @param {RepresentationDefinition} representation the
|
||||
* definition of the representation in use
|
||||
* @param {DomainObject} domainObject the domain object
|
||||
* being represented
|
||||
*/
|
||||
represent: represent,
|
||||
/**
|
||||
* Release any resources associated with this representer.
|
||||
*/
|
||||
destroy: function () {}
|
||||
};
|
||||
}
|
||||
|
||||
return ToolbarRepresenter;
|
||||
|
||||
}
|
||||
);
|
||||
@ -10,6 +10,14 @@
|
||||
"type": "layout",
|
||||
"templateUrl": "templates/layout.html",
|
||||
"uses": [ "composition" ]
|
||||
},
|
||||
{
|
||||
"key": "fixed",
|
||||
"name": "Fixed Position",
|
||||
"glyph": "3",
|
||||
"type": "telemetry.panel",
|
||||
"templateUrl": "templates/fixed.html",
|
||||
"uses": [ "composition" ]
|
||||
}
|
||||
],
|
||||
"representations": [
|
||||
@ -23,6 +31,11 @@
|
||||
"key": "LayoutController",
|
||||
"implementation": "LayoutController.js",
|
||||
"depends": [ "$scope" ]
|
||||
},
|
||||
{
|
||||
"key": "FixedController",
|
||||
"implementation": "FixedController.js",
|
||||
"depends": [ "$scope", "telemetrySubscriber", "telemetryFormatter" ]
|
||||
}
|
||||
],
|
||||
"types": [
|
||||
|
||||
36
platform/features/layout/res/templates/fixed.html
Normal file
36
platform/features/layout/res/templates/fixed.html
Normal file
@ -0,0 +1,36 @@
|
||||
|
||||
|
||||
<div style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;"
|
||||
ng-controller="FixedController as controller"
|
||||
mct-resize="controller.setBounds(bounds)">
|
||||
|
||||
<!-- Background grid -->
|
||||
<div ng-repeat="cell in controller.getCellStyles()"
|
||||
style="position: absolute; border: 1px gray solid; background: black;"
|
||||
ng-style="cell">
|
||||
</div>
|
||||
|
||||
<!-- Telemetry elements -->
|
||||
<div ng-repeat="childObject in composition"
|
||||
style="position: absolute; background: #444;"
|
||||
ng-style="controller.getStyle(childObject.getId())">
|
||||
|
||||
<div style="position: absolute; left: 0px; top: 0px; bottom: 0px; width: 50%; overflow: hidden;">
|
||||
{{childObject.getModel().name}}
|
||||
</div>
|
||||
<div style="position: absolute; right: 0px; top: 0px; bottom: 0px; width: 50%; overflow: hidden;">
|
||||
{{controller.getValue(childObject.getId())}}
|
||||
</div>
|
||||
|
||||
<!-- Drag handles -->
|
||||
<span ng-show="domainObject.hasCapability('editor')">
|
||||
<span style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; cursor: move;"
|
||||
mct-drag-down="controller.startDrag(childObject.getId(), [1,1], [0,0])"
|
||||
mct-drag="controller.continueDrag(delta)"
|
||||
mct-drag-up="controller.endDrag()">
|
||||
</span>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
263
platform/features/layout/src/FixedController.js
Normal file
263
platform/features/layout/src/FixedController.js
Normal file
@ -0,0 +1,263 @@
|
||||
/*global define*/
|
||||
|
||||
define(
|
||||
['./LayoutDrag'],
|
||||
function (LayoutDrag) {
|
||||
"use strict";
|
||||
|
||||
var DEFAULT_DIMENSIONS = [ 2, 1 ],
|
||||
DEFAULT_GRID_SIZE = [64, 16],
|
||||
DEFAULT_GRID_EXTENT = [4, 4];
|
||||
|
||||
/**
|
||||
* The FixedController is responsible for supporting the
|
||||
* Fixed Position view. It arranges frames according to saved
|
||||
* configuration and provides methods for updating these based on
|
||||
* mouse movement.
|
||||
* @constructor
|
||||
* @param {Scope} $scope the controller's Angular scope
|
||||
*/
|
||||
function FixedController($scope, telemetrySubscriber, telemetryFormatter) {
|
||||
var gridSize = DEFAULT_GRID_SIZE,
|
||||
gridExtent = DEFAULT_GRID_EXTENT,
|
||||
activeDrag,
|
||||
activeDragId,
|
||||
subscription,
|
||||
values = {},
|
||||
cellStyles = [],
|
||||
rawPositions = {},
|
||||
positions = {};
|
||||
|
||||
// Utility function to copy raw positions from configuration,
|
||||
// without writing directly to configuration (to avoid triggering
|
||||
// persistence from watchers during drags).
|
||||
function shallowCopy(obj, keys) {
|
||||
var copy = {};
|
||||
keys.forEach(function (k) {
|
||||
copy[k] = obj[k];
|
||||
});
|
||||
return copy;
|
||||
}
|
||||
|
||||
// Refresh cell styles (e.g. because grid extent changed)
|
||||
function refreshCellStyles() {
|
||||
var x, y;
|
||||
|
||||
cellStyles = [];
|
||||
|
||||
for (x = 0; x < gridExtent[0]; x += 1) {
|
||||
for (y = 0; y < gridExtent[1]; y += 1) {
|
||||
// Position blocks; subtract out border size from w/h
|
||||
cellStyles.push({
|
||||
left: x * gridSize[0] + 'px',
|
||||
top: y * gridSize[1] + 'px',
|
||||
width: gridSize[0] - 1 + 'px',
|
||||
height: gridSize[1] - 1 + 'px'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Convert from { positions: ..., dimensions: ... } to an
|
||||
// apropriate ng-style argument, to position frames.
|
||||
function convertPosition(raw) {
|
||||
// Multiply position/dimensions by grid size
|
||||
return {
|
||||
left: (gridSize[0] * raw.position[0]) + 'px',
|
||||
top: (gridSize[1] * raw.position[1]) + 'px',
|
||||
width: (gridSize[0] * raw.dimensions[0]) + 'px',
|
||||
height: (gridSize[1] * raw.dimensions[1]) + 'px'
|
||||
};
|
||||
}
|
||||
|
||||
// Generate a default position (in its raw format) for a frame.
|
||||
// Use an index to ensure that default positions are unique.
|
||||
function defaultPosition(index) {
|
||||
return {
|
||||
position: [index, index],
|
||||
dimensions: DEFAULT_DIMENSIONS
|
||||
};
|
||||
}
|
||||
|
||||
// Store a computed position for a contained frame by its
|
||||
// domain object id. Called in a forEach loop, so arguments
|
||||
// are as expected there.
|
||||
function populatePosition(id, index) {
|
||||
rawPositions[id] =
|
||||
rawPositions[id] || defaultPosition(index || 0);
|
||||
positions[id] =
|
||||
convertPosition(rawPositions[id]);
|
||||
}
|
||||
|
||||
// Compute panel positions based on the layout's object model
|
||||
function lookupPanels(model) {
|
||||
var configuration = $scope.configuration || {},
|
||||
ids = (model || {}).composition || [];
|
||||
|
||||
// Pull panel positions from configuration
|
||||
rawPositions = shallowCopy(configuration.elements || {}, ids);
|
||||
|
||||
// Clear prior computed positions
|
||||
positions = {};
|
||||
|
||||
// Update width/height that we are tracking
|
||||
gridSize = (model || {}).layoutGrid || DEFAULT_GRID_SIZE;
|
||||
|
||||
// Compute positions and add defaults where needed
|
||||
ids.forEach(populatePosition);
|
||||
}
|
||||
|
||||
function updateValue(telemetryObject) {
|
||||
var id = telemetryObject && telemetryObject.getId();
|
||||
if (id) {
|
||||
values[id] = telemetryFormatter.formatRangeValue(
|
||||
subscription.getRangeValue(telemetryObject)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Update telemetry values based on new data available
|
||||
function updateValues() {
|
||||
if (subscription) {
|
||||
subscription.getTelemetryObjects().forEach(updateValue);
|
||||
}
|
||||
}
|
||||
|
||||
// Subscribe to telemetry updates for this domain object
|
||||
function subscribe(domainObject) {
|
||||
// Clear any old values
|
||||
values = {};
|
||||
|
||||
// Release existing subscription (if any)
|
||||
if (subscription) {
|
||||
subscription.unsubscribe();
|
||||
}
|
||||
|
||||
// Make a new subscription
|
||||
subscription = domainObject &&
|
||||
telemetrySubscriber.subscribe(domainObject, updateValues);
|
||||
}
|
||||
|
||||
// Position panes when the model field changes
|
||||
$scope.$watch("model", lookupPanels);
|
||||
|
||||
// Subscribe to telemetry when an object is available
|
||||
$scope.$watch("domainObject", subscribe);
|
||||
|
||||
refreshCellStyles();
|
||||
|
||||
return {
|
||||
/**
|
||||
* Get styles for all background cells, as will populate the
|
||||
* ng-style tag.
|
||||
* @memberof FixedController#
|
||||
* @returns {Array} cell styles
|
||||
*/
|
||||
getCellStyles: function () {
|
||||
return cellStyles;
|
||||
},
|
||||
/**
|
||||
* Get the current data value for the specified domain object.
|
||||
* @memberof FixedController#
|
||||
* @param {string} id the domain object identifier
|
||||
* @returns {string} the displayable data value
|
||||
*/
|
||||
getValue: function (id) {
|
||||
return values[id];
|
||||
},
|
||||
/**
|
||||
* Set the size of the viewable fixed position area.
|
||||
* @memberof FixedController#
|
||||
* @param bounds the width/height, as reported by mct-resize
|
||||
*/
|
||||
setBounds: function (bounds) {
|
||||
var w = Math.ceil(bounds.width / gridSize[0]),
|
||||
h = Math.ceil(bounds.height / gridSize[1]);
|
||||
if (w !== gridExtent[0] || h !== gridExtent[1]) {
|
||||
gridExtent = [w, h];
|
||||
refreshCellStyles();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Get a style object for a frame with the specified domain
|
||||
* object identifier, suitable for use in an `ng-style`
|
||||
* directive to position a frame as configured for this layout.
|
||||
* @param {string} id the object identifier
|
||||
* @returns {Object.<string, string>} an object with
|
||||
* appropriate left, width, etc fields for positioning
|
||||
*/
|
||||
getStyle: function (id) {
|
||||
// Called in a loop, so just look up; the "positions"
|
||||
// object is kept up to date by a watch.
|
||||
return positions[id];
|
||||
},
|
||||
/**
|
||||
* Start a drag gesture to move/resize a frame.
|
||||
*
|
||||
* The provided position and dimensions factors will determine
|
||||
* whether this is a move or a resize, and what type it
|
||||
* will be. For instance, a position factor of [1, 1]
|
||||
* will move a frame along with the mouse as the drag
|
||||
* proceeds, while a dimension factor of [0, 0] will leave
|
||||
* dimensions unchanged. Combining these in different
|
||||
* ways results in different handles; a position factor of
|
||||
* [1, 0] and a dimensions factor of [-1, 0] will implement
|
||||
* a left-edge resize, as the horizontal position will move
|
||||
* with the mouse while the horizontal dimensions shrink in
|
||||
* kind (and vertical properties remain unmodified.)
|
||||
*
|
||||
* @param {string} id the identifier of the domain object
|
||||
* in the frame being manipulated
|
||||
* @param {number[]} posFactor the position factor
|
||||
* @param {number[]} dimFactor the dimensions factor
|
||||
*/
|
||||
startDrag: function (id, posFactor, dimFactor) {
|
||||
activeDragId = id;
|
||||
activeDrag = new LayoutDrag(
|
||||
rawPositions[id],
|
||||
posFactor,
|
||||
dimFactor,
|
||||
gridSize
|
||||
);
|
||||
},
|
||||
/**
|
||||
* Continue an active drag gesture.
|
||||
* @param {number[]} delta the offset, in pixels,
|
||||
* of the current pointer position, relative
|
||||
* to its position when the drag started
|
||||
*/
|
||||
continueDrag: function (delta) {
|
||||
if (activeDrag) {
|
||||
rawPositions[activeDragId] =
|
||||
activeDrag.getAdjustedPosition(delta);
|
||||
populatePosition(activeDragId);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* End the active drag gesture. This will update the
|
||||
* view configuration.
|
||||
*/
|
||||
endDrag: function () {
|
||||
// Write to configuration; this is watched and
|
||||
// saved by the EditRepresenter.
|
||||
$scope.configuration =
|
||||
$scope.configuration || {};
|
||||
// Make sure there is a "panels" field in the
|
||||
// view configuration.
|
||||
$scope.configuration.elements =
|
||||
$scope.configuration.elements || {};
|
||||
// Store the position of this panel.
|
||||
$scope.configuration.elements[activeDragId] =
|
||||
rawPositions[activeDragId];
|
||||
// Mark this object as dirty to encourage persistence
|
||||
if ($scope.commit) {
|
||||
$scope.commit("Moved element.");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
return FixedController;
|
||||
}
|
||||
);
|
||||
@ -74,8 +74,11 @@ define(
|
||||
// Play back from queue if we are lossless
|
||||
while (!pool.isEmpty()) {
|
||||
updateValuesFromPool();
|
||||
// Fire callback, if one was provided
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
|
||||
// Clear the pending flag so that future updates will
|
||||
// schedule this callback.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user