ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-08 11:54:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #1794 from nasa/open599b

Browse Source 
[Timeline] Add resource graphs by drag-and-drop
This commit is contained in:
Andrew Henry 2017-11-17 16:44:59 -08:00 committed by GitHub
commit 71c54cd541
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 255 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
platform/features/timeline/bundle.js
View File

@ -38,6 +38,7 @@ define([
"./src/capabilities/CostCapability",
"./src/directives/MCTSwimlaneDrop",
"./src/directives/MCTSwimlaneDrag",
"./src/directives/MCTResourceGraphDrop",
"./src/services/ObjectLoader",
"./src/chart/MCTTimelineChart",
"text!./res/templates/values.html",
@ -69,6 +70,7 @@ define([
CostCapability,
MCTSwimlaneDrop,
MCTSwimlaneDrag,
MCTResourceGraphDrop,
ObjectLoader,
MCTTimelineChart,
valuesTemplate,
@ -577,6 +579,13 @@ define([
"$interval",
"$log"
]
},
{
"key": "mctResourceGraphDrop",
"implementation": MCTResourceGraphDrop,
"depends": [
"dndService"
]
}
],
"services": [

4
platform/features/timeline/res/sass/_timelines.scss
View File

@ -38,6 +38,10 @@
.l-timeline-pane {
@include absPosDefault();
&.drop-over {
background-color: lighten($colorEditAreaBg, 5%);
}
.l-width-control {
position: relative;
}

3
platform/features/timeline/res/templates/timeline.html
View File

@ -77,7 +77,8 @@
<mct-splitter></mct-splitter>
<!-- BOTTOM PANE RESOURCE LEGEND -->
<div class="split-pane-component abs l-timeline-pane t-pane-h l-pane-btm s-timeline-resource-legend l-timeline-resource-legend">
<div mct-resource-graph-drop
class="split-pane-component abs l-timeline-pane t-pane-h l-pane-btm s-timeline-resource-legend l-timeline-resource-legend">
<div class="l-title s-title">{{ngModel.title}}Resource Graph Legend</div>
<div class="l-legend-items legend">
<mct-include key="'timeline-legend-item'"

81
platform/features/timeline/src/directives/MCTResourceGraphDrop.js Normal file
View File

@ -0,0 +1,81 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2009-2016, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
define(
['./SwimlaneDragConstants'],
function (SwimlaneDragConstants) {
/**
* Defines the `mct-resource-graph-drop` directive. When a drop occurs
* on an element with this attribute, the swimlane targeted by the drop
* will receive the dropped domain object (at which point it can handle
* the drop, typically by toggling the swimlane graph.)
* @param {DndService} dndService drag-and-drop service
*/
function MCTResourceGraphDrop(dndService) {
function link(scope, element, attrs) {
// Handle dragover
element.on('dragover', function (e) {
var swimlane = dndService.getData(
SwimlaneDragConstants.TIMELINE_SWIMLANE_DRAG_TYPE
);
if (typeof swimlane !== "undefined" && !swimlane.graph()) {
element.addClass('drop-over');
scope.$apply();
e.preventDefault();
}
});
// Handle drops
element.on('drop', function (e) {
var swimlane = dndService.getData(
SwimlaneDragConstants.TIMELINE_SWIMLANE_DRAG_TYPE
);
element.removeClass('drop-over');
// Only toggle if the graph isn't already set
if (typeof swimlane !== "undefined" && !swimlane.graph()) {
swimlane.toggleGraph();
e.preventDefault();
}
});
// Clear highlights when drag leaves this swimlane
element.on('dragleave', function (e) {
element.removeClass('drop-over');
scope.$apply();
e.preventDefault();
});
}
return {
// Applies to attributes
restrict: "A",
// Link using above function
link: link
};
}
return MCTResourceGraphDrop;
}
);

159
platform/features/timeline/test/directives/MCTResourceGraphDropSpec.js Normal file
View File

@ -0,0 +1,159 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2009-2016, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
define(
['../../src/directives/MCTResourceGraphDrop', '../../src/directives/SwimlaneDragConstants'],
function (MCTResourceGraphDrop, SwimlaneDragConstants) {
describe("The mct-resource-graph-drop directive", function () {
var mockDndService,
mockScope,
mockElement,
testAttrs,
mockSwimlane,
testEvent,
handlers,
directive;
beforeEach(function () {
handlers = {};
mockDndService = jasmine.createSpyObj(
'dndService',
['setData', 'getData', 'removeData']
);
mockScope = jasmine.createSpyObj('$scope', ['$eval', '$apply']);
mockElement = jasmine.createSpyObj('element', ['on', 'addClass', 'removeClass']);
testAttrs = { mctSwimlaneDrop: "mockSwimlane" };
mockSwimlane = jasmine.createSpyObj(
"swimlane",
['graph', 'toggleGraph']
);
testEvent = {
dataTransfer: { getData: jasmine.createSpy() },
preventDefault: jasmine.createSpy(),
stopPropagation: jasmine.createSpy()
};
testEvent.dataTransfer.getData.andReturn('abc');
mockDndService.getData.andCallFake(function (key) {
return key === SwimlaneDragConstants.TIMELINE_SWIMLANE_DRAG_TYPE ?
mockSwimlane : undefined;
});
mockSwimlane.graph.andReturn(false);
directive = new MCTResourceGraphDrop(mockDndService);
directive.link(mockScope, mockElement, testAttrs);
mockElement.on.calls.forEach(function (call) {
handlers[call.args[0]] = call.args[1];
});
});
it("is available as an attribute", function () {
expect(directive.restrict).toEqual("A");
});
[false, true].forEach(function (graphing) {
describe("when swimlane graph is " + (graphing ? "" : "not ") + "enabled", function () {
beforeEach(function () {
mockSwimlane.graph.andReturn(graphing);
});
describe("on dragover", function () {
var prefix = !graphing ? "does" : "does not";
beforeEach(function () {
handlers.dragover(testEvent);
});
it(prefix + " add a drop-over class", function () {
var expectAddClass = expect(mockElement.addClass);
(!graphing ? expectAddClass : expectAddClass.not)
.toHaveBeenCalledWith('drop-over');
});
it(prefix + " call $apply on scope", function () {
var expectApply = expect(mockScope.$apply);
(!graphing ? expectApply : expectApply.not)
.toHaveBeenCalled();
});
it(prefix + " prevent default", function () {
var expectPreventDefault = expect(testEvent.preventDefault);
(!graphing ? expectPreventDefault : expectPreventDefault.not)
.toHaveBeenCalled();
});
});
describe("on drop", function () {
var prefix = !graphing ? "does" : "does not";
beforeEach(function () {
handlers.drop(testEvent);
});
it("removes any drop-over class", function () {
expect(mockElement.removeClass)
.toHaveBeenCalledWith('drop-over');
});
it(prefix + " toggle the swimlane's resource graph", function () {
var expectToggle = expect(mockSwimlane.toggleGraph);
(!graphing ? expectToggle : expectToggle.not)
.toHaveBeenCalled();
});
it(prefix + " prevent default", function () {
var expectPreventDefault = expect(testEvent.preventDefault);
(!graphing ? expectPreventDefault : expectPreventDefault.not)
.toHaveBeenCalled();
});
});
describe("on dragleave", function () {
beforeEach(function () {
handlers.dragleave(testEvent);
});
it("removes any drop-over class", function () {
expect(mockElement.removeClass)
.toHaveBeenCalledWith('drop-over');
});
it("calls $apply on scope", function () {
expect(mockScope.$apply).toHaveBeenCalled();
});
it("calls preventDefault on events", function () {
expect(testEvent.preventDefault).toHaveBeenCalled();
});
});
});
});
});
}
);