[Layout] Support sub-object selection in layout (#1811)

Updates to sub object selection, first cut of selection APIs.

* [API] Add inspector view registry to register inspector view providers and show a view in the inspector.

[API] Modify the selection API to register the click event and handle the event. The API will add a class to the selected object and the immediate parent of the selected object.

[Directive] Implemenet mct-selectable directive for making an element selectable.

[Layout] Update the layout controller to use the Selection API. Also, add double click gesture to allow drilling into a selected object.

Populate the Elements pool with contained elements of the selected object. Update toolbar and inspector to listen for the changes in selection.

* [Frontend] Mods to markup and CSS for sub-object selection

* MCTSelectable allows selection in initialization, use to select on navigation

[Frontend] Show grid in first nested layout, hide from deeper nesting. Only show grids when applicable to relative selection.

* Fix checkstyle and lint errors

* Bring back the change that made mct-init-select work

* [Inspector] Make sure the right content is displayed based on whether a view provider exists or not.

* Only show table options when editing

* Make reviewers' requested changes

* Fix broken tests

* [Frontend] Cleanups and tweaks

Fixes #1811
- Cleanups between frame, editor and selecting.scss;
- Hover and selected borders visually pumped up a bit;
- Solid borders on hover and selecting when browsing;
- Dashed borders for layouts when editing;
- Fixed cursor to only show move capability when
element is selected;

* [Frontend] Tweaks to frame.no-frame layout

Fixes #1811
- Margin set to 0;
- Overflow set to hidden;

* [Frontend] Fixed position items border width fixed

Fixes #1811
- Set to 1px;

* Add tests for inspector controller and fix broken tests. Clean up code.

* [Fixed Position] Stop event propagation on click handlers in fixed position to avoid the event reaching the selection click handlers which caused issues with toolbar and selection."

* Fix tests

* Add tests

* Add test

* Remove element from document

src/selection/Selection.js

@@ -33,37 +33,96 @@ define(['EventEmitter'], function (EventEmitter) {
 
     Selection.prototype = Object.create(EventEmitter.prototype);
 
-    Selection.prototype.add = function (context) {
-        this.clear(); // Only allow single select as initial simplification
-        this.selected.push(context);
-        this.emit('change');
-    };
-
-    Selection.prototype.remove = function (path) {
-        this.selected = this.selected.filter(function (otherPath) {
-            return !path.matches(otherPath);
-        });
-        this.emit('change');
-    };
-
-    Selection.prototype.contains = function (path) {
-        return this.selected.some(function (otherPath) {
-            return path.matches(otherPath);
-        });
-    };
-
-    Selection.prototype.clear = function () {
-        this.selected = [];
-        this.emit('change');
-    };
-
-    Selection.prototype.primary = function () {
-        return this.selected[this.selected.length - 1];
-    };
-
-    Selection.prototype.all = function () {
+    /**
+     * Gets the selected object.
+     * @public
+     */
+    Selection.prototype.get = function () {
         return this.selected;
     };
 
+    /**
+     * Selects the selectable object and emits the 'change' event.
+     *
+     * @param {object} selectable an object with element and context properties
+     * @private
+     */
+    Selection.prototype.select = function (selectable) {
+        if (!Array.isArray(selectable)) {
+            selectable = [selectable];
+        }
+
+        if (this.selected[0] && this.selected[0].element) {
+            this.selected[0].element.classList.remove('s-selected');
+        }
+
+        if (this.selected[1]) {
+            this.selected[1].element.classList.remove('s-selected-parent');
+        }
+
+        if (selectable[0] && selectable[0].element) {
+            selectable[0].element.classList.add('s-selected');
+        }
+
+        if (selectable[1]) {
+            selectable[1].element.classList.add('s-selected-parent');
+        }
+
+        this.selected = selectable;
+        this.emit('change', this.selected);
+    };
+
+    /**
+     * @private
+     */
+    Selection.prototype.capture = function (selectable) {
+        if (!this.capturing) {
+            this.capturing = [];
+        }
+
+        this.capturing.push(selectable);
+    };
+
+    /**
+     * @private
+     */
+    Selection.prototype.selectCapture = function (selectable) {
+        if (!this.capturing) {
+            return;
+        }
+
+        this.select(this.capturing.reverse());
+        delete this.capturing;
+    };
+
+    /**
+     * Attaches the click handlers to the element.
+     *
+     * @param element an html element
+     * @param context object with oldItem, item and toolbar properties
+     * @param select a flag to select the element if true
+     * @returns a function that removes the click handlers from the element
+     * @public
+     */
+    Selection.prototype.selectable = function (element, context, select) {
+        var selectable = {
+            context: context,
+            element: element
+        };
+        var capture = this.capture.bind(this, selectable);
+        var selectCapture = this.selectCapture.bind(this, selectable);
+        element.addEventListener('click', capture, true);
+        element.addEventListener('click', selectCapture);
+
+        if (select) {
+            this.select(selectable);
+        }
+
+        return function () {
+            element.removeEventListener('click', capture);
+            element.removeEventListener('click', selectCapture);
+        };
+    };
+
     return Selection;
 });