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

platform/features/layout/bundle.json

@@ -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": [

platform/features/layout/src/FixedController.js

@@ -90,9 +90,9 @@ define(
             }
 
             // Compute panel positions based on the layout's object model
-            function lookupPanels(model) {
+            function lookupPanels(ids) {
-                var configuration = $scope.configuration || {},
+                var configuration = $scope.configuration || {};
-                    ids = (model || {}).composition || [];
+                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();
 

platform/features/layout/src/LayoutController.js

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

platform/features/layout/test/FixedControllerSpec.js

@@ -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));
+            });
         });
     }
 );

platform/features/layout/test/LayoutControllerSpec.js

@@ -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));
+            });
         });
     }
 );

platform/representation/README.md

@@ -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
+  * It should be noted that this gesture does _not_ define the appearance
-      or functionality of this menu; rather, it simply adds a
+  or functionality of this menu; rather, it simply adds a
-      representation of key `context-menu` to the document at an appropriate
+  representation of key `context-menu` to the document at an appropriate
-      location. This representation will be supplied by the commonUI bundle.
+  location. This representation will be supplied by the commonUI bundle.

platform/representation/src/gestures/DropGesture.js

@@ -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();
                     });

platform/representation/src/gestures/GestureConstants.js

@@ -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'
 });