[Plot] Switched to $watchCollection on form model

This commit is contained in:
Henry 2016-02-09 20:51:56 -08:00
parent 645bd5743f
commit ab1c79f25d
10 changed files with 30 additions and 70 deletions

View File

@ -78,8 +78,7 @@ define([
"key": "PlotOptionsController",
"implementation": PlotOptionsController,
"depends": [
"$scope",
"topic"
"$scope"
]
}
],

View File

@ -45,13 +45,13 @@ define(
* @constructor
* @param {Scope} $scope the controller's Angular scope
*/
function PlotOptionsController($scope, topic) {
function PlotOptionsController($scope) {
var self = this;
this.$scope = $scope;
this.domainObject = $scope.domainObject;
this.configuration = this.domainObject.getModel().configuration || {};
this.plotOptionsForm = new PlotOptionsForm(topic);
this.plotOptionsForm = new PlotOptionsForm();
this.composition = [];
/*
@ -64,10 +64,6 @@ define(
}
});
this.formListener = this.plotOptionsForm.listen(function(value){
self.updateConfiguration(value);
});
/*
Set form structures on scope
*/
@ -78,11 +74,27 @@ define(
$scope.$on("$destroy", function() {
//Clean up any listeners on destruction of controller
self.mutationListener();
self.formListener();
});
this.defaultConfiguration();
this.updateChildren();
/**
* Setup a number of watches for changes to form values. On
* change, update the model configuration via mutation
*/
$scope.$watchCollection('configuration.plot.yAxis', function(newValue, oldValue){
self.updateConfiguration(newValue, oldValue);
});
$scope.$watchCollection('configuration.plot.xAxis', function(newValue, oldValue){
self.updateConfiguration(newValue, oldValue);
});
($scope.children || []).forEach(function(child){
$scope.$watchCollection('configuration.plot.series[' + child.getId() + ']', function(newValue, oldValue){
self.updateConfiguration(newValue, oldValue);
});
});
}
/*
@ -134,6 +146,7 @@ define(
*/
PlotOptionsController.prototype.updateConfiguration = function() {
var self = this;
console.log('form values changed');
this.domainObject.useCapability('mutation', function(model){
model.configuration = model.configuration || {};
model.configuration.plot = self.configuration.plot;

View File

@ -33,13 +33,7 @@ define(
* @param topic
* @constructor
*/
function PlotOptionsForm(topic) {
var self = this;
this.onchangeTopic = topic();
function onchange(value){
self.onchangeTopic.notify(value);
}
function PlotOptionsForm() {
/*
Defined below are the form structures for the plot options.
@ -149,10 +143,6 @@ define(
};
}
PlotOptionsForm.prototype.listen = function (callback){
return this.onchangeTopic.listen(callback);
};
return PlotOptionsForm;
}
);

View File

@ -28,8 +28,6 @@ define(
describe("The Plot Options controller", function () {
var plotOptionsController,
mockTopicFunction,
mockTopicObject,
mockDomainObject,
mockMutationCapability,
mockUseCapabilities,
@ -79,18 +77,6 @@ define(
mockUnlisten = jasmine.createSpy('unlisten');
mockMutationCapability.listen.andReturn(mockUnlisten);
mockTopicObject = jasmine.createSpyObj('Topic', [
'listen',
'notify'
]);
mockFormUnlisten = jasmine.createSpy('formUnlisten');
mockTopicObject.listen.andReturn(mockFormUnlisten);
mockTopicFunction = function() {
return mockTopicObject;
};
mockDomainObject = jasmine.createSpyObj('domainObject', [
'getModel',
'useCapability',
@ -103,11 +89,12 @@ define(
mockDomainObject.getModel.andReturn(model);
mockScope = jasmine.createSpyObj('scope', [
'$on'
'$on',
'$watchCollection'
]);
mockScope.domainObject = mockDomainObject;
plotOptionsController = new PlotOptionsController(mockScope, mockTopicFunction);
plotOptionsController = new PlotOptionsController(mockScope);
});
it("sets form definitions on scope", function () {
@ -135,25 +122,24 @@ define(
var scopeConfiguration = mockScope.configuration,
model = mockDomainObject.getModel();
scopeConfiguration.plot.xAxis.key = 'lst';
scopeConfiguration.plot.yAxis.autoScale = true;
scopeConfiguration.plot.yAxis.key = 'eu';
scopeConfiguration.plot.xAxis.key = 'lst';
expect(mockTopicObject.listen).toHaveBeenCalled();
mockTopicObject.listen.mostRecentCall.args[0]();
expect(mockScope.$watchCollection).toHaveBeenCalled();
mockScope.$watchCollection.calls[0].args[1]();
expect(mockDomainObject.useCapability).toHaveBeenCalledWith('mutation', jasmine.any(Function));
mockDomainObject.useCapability.mostRecentCall.args[1](model);
expect(model.configuration.plot.xAxis.key).toBe('lst');
expect(model.configuration.plot.yAxis.autoScale).toBe(true);
expect(model.configuration.plot.yAxis.key).toBe('eu');
expect(model.configuration.plot.xAxis.key).toBe('lst');
});
it("cleans up listeners on destruction of the controller", function () {
mockScope.$on.mostRecentCall.args[1]();
expect(mockUnlisten).toHaveBeenCalled();
expect(mockFormUnlisten).toHaveBeenCalled();
});
});

View File

@ -28,21 +28,11 @@ define(
describe("The Plot Options form", function () {
var plotOptionsForm,
mockTopicFunction,
mockTopicObject,
listener;
beforeEach(function () {
mockTopicObject = jasmine.createSpyObj('Topic', [
'listen',
'notify'
]);
mockTopicFunction = function() {
return mockTopicObject;
};
plotOptionsForm = new PlotOptionsForm(mockTopicFunction);
plotOptionsForm = new PlotOptionsForm();
});
it("defines form specs for x-axis, y-axis, and series data", function () {
@ -55,19 +45,6 @@ define(
expect(plotOptionsForm.plotSeriesForm).toBeDefined();
});
it("uses a topic to register a listener and inform them when a" +
" form value changes", function () {
var changedValue = 'changedValue';
expect(plotOptionsForm.xAxisForm.onchange).toBeDefined();
plotOptionsForm.listen(listener);
expect(mockTopicObject.listen).toHaveBeenCalledWith(listener);
plotOptionsForm.xAxisForm.onchange(changedValue);
expect(mockTopicObject.notify).toHaveBeenCalledWith(changedValue);
});
});
}
);

View File

@ -23,7 +23,6 @@
<input type="checkbox"
name="mctControl"
ng-model="ngModel[field]"
ng-change="ngChange()"
ng-disabled="ngDisabled">
<em></em>
</label>

View File

@ -24,7 +24,6 @@
name="mctControl"
ng-model="ngModel[field]"
ng-disabled="ngDisabled"
ng-change="ngChange()"
ng-value="structure.value">
<em></em>
</label>

View File

@ -24,7 +24,6 @@
ng-model="ngModel[field]"
ng-options="opt.value as opt.name for opt in options"
ng-required="ngRequired"
ng-change="ngChange()"
name="mctControl">
<option value="" ng-show="!ngModel[field]">- Select One -</option>
</select>

View File

@ -25,7 +25,6 @@
ng-required="ngRequired"
ng-model="ngModel[field]"
ng-pattern="ngPattern"
ng-change="ngChange()"
size="{{structure.size}}"
name="mctControl">
</span>

View File

@ -41,7 +41,6 @@
<mct-control key="row.control"
ng-model="ngModel"
ng-required="row.required"
ng-change="row.onchange(ngModel[row.key]); structure.onchange(ngModel)"
ng-pattern="getRegExp(row.pattern)"
options="row.options"
structure="row"