ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-20 03:36:44 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/open889' into open-master

Browse Source
This commit is contained in:
bwyu 2015-02-23 13:02:36 -08:00
commit 343e7aab3e
7 changed files with 502 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
platform/commonUI/edit/res/templates/edit-object.html
View File

@ -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>

13
platform/features/layout/bundle.json
View File

@ -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
View 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>

276
platform/features/layout/src/FixedController.js Normal file
View File

@ -0,0 +1,276 @@
/*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);
}
// Update the displayed value for this object
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);
}
}
// Free up subscription to telemetry
function releaseSubscription() {
if (subscription) {
subscription.unsubscribe();
subscription = undefined;
}
}
// 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);
// Free up subscription on destroy
$scope.$on("$destroy", releaseSubscription);
// Initialize styles (position etc.) for cells
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;
}
);

162
platform/features/layout/test/FixedControllerSpec.js Normal file
View File

@ -0,0 +1,162 @@
/*global define,describe,it,expect,beforeEach,jasmine*/
define(
["../src/FixedController"],
function (FixedController) {
"use strict";
describe("The Fixed Position controller", function () {
var mockScope,
mockSubscriber,
mockFormatter,
mockDomainObject,
mockSubscription,
testGrid,
testModel,
testValues,
controller;
// Utility function; find a watch for a given expression
function findWatch(expr) {
var watch;
mockScope.$watch.calls.forEach(function (call) {
if (call.args[0] === expr) {
watch = call.args[1];
}
});
return watch;
}
function makeMockDomainObject(id) {
var mockObject = jasmine.createSpyObj(
'domainObject-' + id,
[ 'getId' ]
);
mockObject.getId.andReturn(id);
return mockObject;
}
beforeEach(function () {
mockScope = jasmine.createSpyObj(
'$scope',
[ "$on", "$watch" ]
);
mockSubscriber = jasmine.createSpyObj(
'telemetrySubscriber',
[ 'subscribe' ]
);
mockFormatter = jasmine.createSpyObj(
'telemetryFormatter',
[ 'formatDomainValue', 'formatRangeValue' ]
);
mockDomainObject = jasmine.createSpyObj(
'domainObject',
[ 'getId', 'getModel', 'getCapability' ]
);
mockSubscription = jasmine.createSpyObj(
'subscription',
[ 'unsubscribe', 'getTelemetryObjects', 'getRangeValue' ]
);
testGrid = [ 123, 456 ];
testModel = {
composition: ['a', 'b', 'c'],
layoutGrid: testGrid
};
testValues = { a: 10, b: 42, c: 31.42 };
mockSubscriber.subscribe.andReturn(mockSubscription);
mockSubscription.getTelemetryObjects.andReturn(
testModel.composition.map(makeMockDomainObject)
);
mockSubscription.getRangeValue.andCallFake(function (o) {
return testValues[o.getId()];
});
mockFormatter.formatRangeValue.andCallFake(function (v) {
return "Formatted " + v;
});
controller = new FixedController(
mockScope,
mockSubscriber,
mockFormatter
);
});
it("provides styles for cells", function () {
expect(controller.getCellStyles())
.toEqual(jasmine.any(Array));
});
it("subscribes when a domain object is available", function () {
mockScope.domainObject = mockDomainObject;
findWatch("domainObject")(mockDomainObject);
expect(mockSubscriber.subscribe).toHaveBeenCalledWith(
mockDomainObject,
jasmine.any(Function)
);
});
it("releases subscriptions when domain objects change", function () {
mockScope.domainObject = mockDomainObject;
// First pass - should simply should subscribe
findWatch("domainObject")(mockDomainObject);
expect(mockSubscription.unsubscribe).not.toHaveBeenCalled();
expect(mockSubscriber.subscribe.calls.length).toEqual(1);
// Object changes - should unsubscribe then resubscribe
findWatch("domainObject")(mockDomainObject);
expect(mockSubscription.unsubscribe).toHaveBeenCalled();
expect(mockSubscriber.subscribe.calls.length).toEqual(2);
});
it("configures view based on model", function () {
mockScope.model = testModel;
findWatch("model")(mockScope.model);
// Should have styles for all elements of composition
expect(controller.getStyle('a')).toBeDefined();
expect(controller.getStyle('b')).toBeDefined();
expect(controller.getStyle('c')).toBeDefined();
expect(controller.getStyle('d')).not.toBeDefined();
});
it("provides values for telemetry elements", function () {
// Initialize
mockScope.domainObject = mockDomainObject;
mockScope.model = testModel;
findWatch("domainObject")(mockDomainObject);
findWatch("model")(mockScope.model);
// Invoke the subscription callback
mockSubscriber.subscribe.mostRecentCall.args[1]();
// Formatted values should be available
expect(controller.getValue('a')).toEqual("Formatted 10");
expect(controller.getValue('b')).toEqual("Formatted 42");
expect(controller.getValue('c')).toEqual("Formatted 31.42");
});
it("adds grid cells to fill boundaries", function () {
var s1 = {
width: testGrid[0] * 8,
height: testGrid[1] * 4
},
s2 = {
width: testGrid[0] * 10,
height: testGrid[1] * 6
};
mockScope.model = testModel;
findWatch("model")(mockScope.model);
// Set first bounds
controller.setBounds(s1);
expect(controller.getCellStyles().length).toEqual(32); // 8 * 4
// Set new bounds
controller.setBounds(s2);
expect(controller.getCellStyles().length).toEqual(60); // 10 * 6
});
});
}
);

1
platform/features/layout/test/suite.json
View File

@ -1,4 +1,5 @@
[
"FixedController",
"LayoutController",
"LayoutDrag"
]

5
platform/telemetry/src/TelemetrySubscription.js
View File

@ -74,7 +74,10 @@ define(
// Play back from queue if we are lossless
while (!pool.isEmpty()) {
updateValuesFromPool();
callback();
// Fire callback, if one was provided
if (callback) {
callback();
}
}
// Clear the pending flag so that future updates will