ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-21 01:42:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
bwyu 2015-02-23 15:08:41 -08:00
commit e2588e27cc
8 changed files with 183 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,8 @@
"glyph": "L",
"type": "layout",
"templateUrl": "templates/layout.html",
"uses": [ "composition" ]
"uses": [ "composition" ],
"gestures": [ "drop" ]
},
{
"key": "fixed",
@ -17,7 +18,8 @@
"glyph": "3",
"type": "telemetry.panel",
"templateUrl": "templates/fixed.html",
"uses": [ "composition" ]
"uses": [ "composition" ],
"gestures": [ "drop" ]
}
],
"representations": [

45
platform/features/layout/src/FixedController.js
View File

@ -90,9 +90,9 @@ define(
}
// Compute panel positions based on the layout's object model
function lookupPanels(model) {
var configuration = $scope.configuration || {},
ids = (model || {}).composition || [];
function lookupPanels(ids) {
var configuration = $scope.configuration || {};
ids = ids || [];
// Pull panel positions from configuration
rawPositions = shallowCopy(configuration.elements || {}, ids);
@ -101,7 +101,7 @@ define(
positions = {};
// Update width/height that we are tracking
gridSize = (model || {}).layoutGrid || DEFAULT_GRID_SIZE;
gridSize = ($scope.model || {}).layoutGrid || DEFAULT_GRID_SIZE;
// Compute positions and add defaults where needed
ids.forEach(populatePosition);
@ -147,8 +147,40 @@ define(
telemetrySubscriber.subscribe(domainObject, updateValues);
}
// Handle changes in the object's composition
function updateComposition(ids) {
// Populate panel positions
lookupPanels(ids);
// Resubscribe - objects in view have changed
subscribe($scope.domainObject);
}
// Position a panel after a drop event
function handleDrop(e, id, position) {
// Ensure that configuration field is populated
$scope.configuration = $scope.configuration || {};
// Make sure there is a "elements" field in the
// view configuration.
$scope.configuration.elements =
$scope.configuration.elements || {};
// Store the position of this element.
$scope.configuration.elements[id] = {
position: [
Math.floor(position.x / gridSize[0]),
Math.floor(position.y / gridSize[1])
],
dimensions: DEFAULT_DIMENSIONS
};
// Mark change as persistable
if ($scope.commit) {
$scope.commit("Dropped a frame.");
}
// Populate template-facing position for this id
populatePosition(id);
}
// Position panes when the model field changes
$scope.$watch("model", lookupPanels);
$scope.$watch("model.composition", updateComposition);
// Subscribe to telemetry when an object is available
$scope.$watch("domainObject", subscribe);
@ -156,6 +188,9 @@ define(
// Free up subscription on destroy
$scope.$on("$destroy", releaseSubscription);
// Position panes where they are dropped
$scope.$on("mctDrop", handleDrop);
// Initialize styles (position etc.) for cells
refreshCellStyles();

27
platform/features/layout/src/LayoutController.js
View File

@ -82,9 +82,36 @@ define(
ids.forEach(populatePosition);
}
// Position a panel after a drop event
function handleDrop(e, id, position) {
// Ensure that configuration field is populated
$scope.configuration = $scope.configuration || {};
// Make sure there is a "panels" field in the
// view configuration.
$scope.configuration.panels =
$scope.configuration.panels || {};
// Store the position of this panel.
$scope.configuration.panels[id] = {
position: [
Math.floor(position.x / gridSize[0]),
Math.floor(position.y / gridSize[1])
],
dimensions: DEFAULT_DIMENSIONS
};
// Mark change as persistable
if ($scope.commit) {
$scope.commit("Dropped a frame.");
}
// Populate template-facing position for this id
populatePosition(id);
}
// Position panes when the model field changes
$scope.$watch("model.composition", lookupPanels);
// Position panes where they are dropped
$scope.$on("mctDrop", handleDrop);
return {
/**
* Get a style object for a frame with the specified domain

46
platform/features/layout/test/FixedControllerSpec.js
View File

@ -27,6 +27,17 @@ define(
return watch;
}
// As above, but for $on calls
function findOn(expr) {
var on;
mockScope.$on.calls.forEach(function (call) {
if (call.args[0] === expr) {
on = call.args[1];
}
});
return on;
}
function makeMockDomainObject(id) {
var mockObject = jasmine.createSpyObj(
'domainObject-' + id,
@ -39,7 +50,7 @@ define(
beforeEach(function () {
mockScope = jasmine.createSpyObj(
'$scope',
[ "$on", "$watch" ]
[ "$on", "$watch", "commit" ]
);
mockSubscriber = jasmine.createSpyObj(
'telemetrySubscriber',
@ -113,7 +124,7 @@ define(
it("configures view based on model", function () {
mockScope.model = testModel;
findWatch("model")(mockScope.model);
findWatch("model.composition")(mockScope.model.composition);
// Should have styles for all elements of composition
expect(controller.getStyle('a')).toBeDefined();
expect(controller.getStyle('b')).toBeDefined();
@ -126,7 +137,7 @@ define(
mockScope.domainObject = mockDomainObject;
mockScope.model = testModel;
findWatch("domainObject")(mockDomainObject);
findWatch("model")(mockScope.model);
findWatch("model.composition")(mockScope.model.composition);
// Invoke the subscription callback
mockSubscriber.subscribe.mostRecentCall.args[1]();
@ -148,7 +159,7 @@ define(
};
mockScope.model = testModel;
findWatch("model")(mockScope.model);
findWatch("model.composition")(mockScope.model.composition);
// Set first bounds
controller.setBounds(s1);
@ -157,6 +168,33 @@ define(
controller.setBounds(s2);
expect(controller.getCellStyles().length).toEqual(60); // 10 * 6
});
it("listens for drop events", function () {
// Layout should position panels according to
// where the user dropped them, so it needs to
// listen for drop events.
expect(mockScope.$on).toHaveBeenCalledWith(
'mctDrop',
jasmine.any(Function)
);
// Verify precondition
expect(controller.getStyle('d')).not.toBeDefined();
// Notify that a drop occurred
testModel.composition.push('d');
findOn('mctDrop')(
{},
'd',
{ x: 300, y: 100 }
);
expect(controller.getStyle('d')).toBeDefined();
// Should have triggered commit (provided by
// EditRepresenter) with some message.
expect(mockScope.commit)
.toHaveBeenCalledWith(jasmine.any(String));
});
});
}
);

32
platform/features/layout/test/LayoutControllerSpec.js
View File

@ -14,7 +14,7 @@ define(
beforeEach(function () {
mockScope = jasmine.createSpyObj(
"$scope",
[ "$watch" ]
[ "$watch", "$on", "commit" ]
);
testModel = {
@ -97,9 +97,6 @@ define(
// Populate scope
mockScope.$watch.mostRecentCall.args[1](testModel.composition);
// Add a commit method to scope
mockScope.commit = jasmine.createSpy("commit");
// Do a drag
controller.startDrag("b", [1, 1], [0, 0]);
controller.continueDrag([100, 100]);
@ -110,6 +107,33 @@ define(
expect(mockScope.commit)
.toHaveBeenCalledWith(jasmine.any(String));
});
it("listens for drop events", function () {
// Layout should position panels according to
// where the user dropped them, so it needs to
// listen for drop events.
expect(mockScope.$on).toHaveBeenCalledWith(
'mctDrop',
jasmine.any(Function)
);
// Verify precondition
expect(testConfiguration.panels.d).not.toBeDefined();
// Notify that a drop occurred
testModel.composition.push('d');
mockScope.$on.mostRecentCall.args[1](
{},
'd',
{ x: 300, y: 100 }
);
expect(testConfiguration.panels.d).toBeDefined();
// Should have triggered commit (provided by
// EditRepresenter) with some message.
expect(mockScope.commit)
.toHaveBeenCalledWith(jasmine.any(String));
});
});
}
);

15
platform/representation/README.md
View File

@ -1,4 +1,4 @@
This bundle introduces the notion of "representations" to Open MCT Web,
This bundle introduces the notion of "representations" to Open MCT Web,
primarily via an Angular directive, `mct-representation`.
A representation is used to display domain objects as Angular templates.
@ -107,9 +107,14 @@ introduces three specific gestures as "built in" options, listed by key:
drag-drop domain object composition.
* `drop`: Representations with this gesture can serve as drop targets for
drag-drop domain object composition.
* When a drop occurs, an `mctDrop` event will be broadcast with two
arguments (in addition to Angular's event object): The domain object
identifier for the dropped object, and the position (with `x` and `y`
properties in pixels) of the drop, relative to the top-left of the
representation which features the drop gesture.
* `menu`: Representations with this gesture will provide a custom context
menu (instead of the browser default).
* It should be noted that this gesture does _not_ define the appearance
or functionality of this menu; rather, it simply adds a
representation of key `context-menu` to the document at an appropriate
location. This representation will be supplied by the commonUI bundle.
* It should be noted that this gesture does _not_ define the appearance
or functionality of this menu; rather, it simply adds a
representation of key `context-menu` to the document at an appropriate
location. This representation will be supplied by the commonUI bundle.

27
platform/representation/src/gestures/DropGesture.js
View File

@ -20,6 +20,28 @@ define(
*/
function DropGesture($q, element, domainObject) {
function broadcastDrop(id, event) {
// Find the relevant scope...
var scope = element && element.scope && element.scope(),
rect;
if (scope && scope.$broadcast) {
// Get the representation's bounds, to convert
// drop position
rect = element[0].getBoundingClientRect();
// ...and broadcast the event. This allows specific
// views to have post-drop behavior which depends on
// drop position.
scope.$broadcast(
GestureConstants.MCT_DROP_EVENT,
id,
{
x: event.pageX - rect.left,
y: event.pageY - rect.top
}
);
}
}
function doPersist() {
var persistence = domainObject.getCapability("persistence");
@ -60,6 +82,11 @@ define(
}
}
)).then(function (result) {
// Broadcast the drop event if it was successful
if (result) {
broadcastDrop(id, event);
}
// If mutation was successful, persist the change
return result && doPersist();
});

6
platform/representation/src/gestures/GestureConstants.js
View File

@ -14,5 +14,9 @@ define({
* An estimate for the dimensions of a context menu, used for
* positioning.
*/
MCT_MENU_DIMENSIONS: [ 170, 200 ]
MCT_MENU_DIMENSIONS: [ 170, 200 ],
/**
* Identifier for drop events.
*/
MCT_DROP_EVENT: 'mctDrop'
});