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

[Fixed Position] Begin refactoring controller

Browse Source 
Begin refactoring Fixed Position controller to facilitate
selection support, as well as multiple types of elements;
WTD-879.
This commit is contained in:
Victor Woeltjen 2015-02-18 13:50:25 -08:00
parent 8662689974
commit bf36141e91
1 changed files with 68 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,23 +23,10 @@ define(
activeDrag, activeDrag,
activeDragId, activeDragId,
subscription, subscription,
values = {},
cellStyles = [], cellStyles = [],
rawPositions = {}, elementProxies = [],
positions = {},
selection; selection;
// Utility function to copy raw positions from configuration,
// without writing directly to configuration (to avoid triggering
// persistence from watchers during drags).
function shallowCopy(obj, keys) {
var copy = {};
keys.forEach(function (k) {
copy[k] = obj[k];
});
return copy;
}
// Refresh cell styles (e.g. because grid extent changed) // Refresh cell styles (e.g. because grid extent changed)
function refreshCellStyles() { function refreshCellStyles() {
var x, y; var x, y;
@ -59,62 +46,27 @@ define(
} }
} }
// Convert from { positions: ..., dimensions: ... } to an // Convert from element x/y/width/height to an
// apropriate ng-style argument, to position frames. // apropriate ng-style argument, to position elements.
function convertPosition(raw) { function convertPosition(raw) {
// Multiply position/dimensions by grid size // Multiply position/dimensions by grid size
return { return {
left: (gridSize[0] * raw.position[0]) + 'px', left: (gridSize[0] * raw.x) + 'px',
top: (gridSize[1] * raw.position[1]) + 'px', top: (gridSize[1] * raw.y) + 'px',
width: (gridSize[0] * raw.dimensions[0]) + 'px', width: (gridSize[0] * raw.width) + 'px',
height: (gridSize[1] * raw.dimensions[1]) + 'px' height: (gridSize[1] * raw.height) + 'px'
}; };
} }
// Generate a default position (in its raw format) for a frame.
// Use an index to ensure that default positions are unique.
function defaultPosition(index) {
return {
position: [index, index],
dimensions: DEFAULT_DIMENSIONS
};
}
// Store a computed position for a contained frame by its
// domain object id. Called in a forEach loop, so arguments
// are as expected there.
function populatePosition(id, index) {
rawPositions[id] =
rawPositions[id] || defaultPosition(index || 0);
positions[id] =
convertPosition(rawPositions[id]);
}
// Compute panel positions based on the layout's object model
function lookupPanels(ids) {
var configuration = $scope.configuration || {};
ids = ids || [];
// Pull panel positions from configuration
rawPositions = shallowCopy(configuration.elements || {}, ids);
// Clear prior computed positions
positions = {};
// Update width/height that we are tracking
gridSize = ($scope.model || {}).layoutGrid || DEFAULT_GRID_SIZE;
// Compute positions and add defaults where needed
ids.forEach(populatePosition);
}
// Update the displayed value for this object // Update the displayed value for this object
function updateValue(telemetryObject) { function updateValue(telemetryObject) {
var id = telemetryObject && telemetryObject.getId(); var id = telemetryObject && telemetryObject.getId();
if (id) { if (id) {
values[id] = telemetryFormatter.formatRangeValue( elementProxies.forEach(function (element) {
element.value = telemetryFormatter.formatRangeValue(
subscription.getRangeValue(telemetryObject) subscription.getRangeValue(telemetryObject)
); );
});
} }
} }
@ -125,6 +77,18 @@ define(
} }
} }
// Decorate an element for display
function makeProxyElement(element) {
return element; // TODO: Use proxy!
}
// Decorate elements in the current configuration
function refreshElements() {
elementProxies = (($scope.configuration || {}).elements || [])
.map(makeProxyElement);
// TODO: Ensure elements for all domain objects?
}
// Free up subscription to telemetry // Free up subscription to telemetry
function releaseSubscription() { function releaseSubscription() {
if (subscription) { if (subscription) {
@ -135,9 +99,6 @@ define(
// Subscribe to telemetry updates for this domain object // Subscribe to telemetry updates for this domain object
function subscribe(domainObject) { function subscribe(domainObject) {
// Clear any old values
values = {};
// Release existing subscription (if any) // Release existing subscription (if any)
if (subscription) { if (subscription) {
subscription.unsubscribe(); subscription.unsubscribe();
@ -151,7 +112,7 @@ define(
// Handle changes in the object's composition // Handle changes in the object's composition
function updateComposition(ids) { function updateComposition(ids) {
// Populate panel positions // Populate panel positions
lookupPanels(ids); // TODO: Ensure defaults here
// Resubscribe - objects in view have changed // Resubscribe - objects in view have changed
subscribe($scope.domainObject); subscribe($scope.domainObject);
} }
@ -163,21 +124,20 @@ define(
// Make sure there is a "elements" field in the // Make sure there is a "elements" field in the
// view configuration. // view configuration.
$scope.configuration.elements = $scope.configuration.elements =
$scope.configuration.elements || {}; $scope.configuration.elements || [];
// Store the position of this element. // Store the position of this element.
$scope.configuration.elements[id] = { $scope.configuration.elements.push({
position: [ type: "fixed.telemetry",
Math.floor(position.x / gridSize[0]), x: Math.floor(position.x / gridSize[0]),
Math.floor(position.y / gridSize[1]) y: Math.floor(position.y / gridSize[1]),
], id: id,
dimensions: DEFAULT_DIMENSIONS width: DEFAULT_DIMENSIONS[0],
}; height: DEFAULT_DIMENSIONS[1]
});
// Mark change as persistable // Mark change as persistable
if ($scope.commit) { if ($scope.commit) {
$scope.commit("Dropped a frame."); $scope.commit("Dropped an element.");
} }
// Populate template-facing position for this id
populatePosition(id);
} }
// Track current selection state // Track current selection state
@ -188,6 +148,9 @@ define(
); );
} }
// Refresh list of elements whenever model changes
$scope.$watch("model.modified", refreshElements);
// Position panes when the model field changes // Position panes when the model field changes
$scope.$watch("model.composition", updateComposition); $scope.$watch("model.composition", updateComposition);
@ -213,15 +176,6 @@ define(
getCellStyles: function () { getCellStyles: function () {
return cellStyles; return cellStyles;
}, },
/**
* Get the current data value for the specified domain object.
* @memberof FixedController#
* @param {string} id the domain object identifier
* @returns {string} the displayable data value
*/
getValue: function (id) {
return values[id];
},
/** /**
* Set the size of the viewable fixed position area. * Set the size of the viewable fixed position area.
* @memberof FixedController# * @memberof FixedController#
@ -235,19 +189,6 @@ define(
refreshCellStyles(); refreshCellStyles();
} }
}, },
/**
* Get a style object for a frame with the specified domain
* object identifier, suitable for use in an `ng-style`
* directive to position a frame as configured for this layout.
* @param {string} id the object identifier
* @returns {Object.<string, string>} an object with
* appropriate left, width, etc fields for positioning
*/
getStyle: function (id) {
// Called in a loop, so just look up; the "positions"
// object is kept up to date by a watch.
return positions[id];
},
/** /**
* Start a drag gesture to move/resize a frame. * Start a drag gesture to move/resize a frame.
* *
@ -269,13 +210,14 @@ define(
* @param {number[]} dimFactor the dimensions factor * @param {number[]} dimFactor the dimensions factor
*/ */
startDrag: function (id, posFactor, dimFactor) { startDrag: function (id, posFactor, dimFactor) {
activeDragId = id; // TODO: Drag!
activeDrag = new LayoutDrag( // activeDragId = id;
rawPositions[id], // activeDrag = new LayoutDrag(
posFactor, // rawPositions[id],
dimFactor, // posFactor,
gridSize // dimFactor,
); // gridSize
// );
}, },
/** /**
* Continue an active drag gesture. * Continue an active drag gesture.
@ -284,32 +226,34 @@ define(
* to its position when the drag started * to its position when the drag started
*/ */
continueDrag: function (delta) { continueDrag: function (delta) {
if (activeDrag) { // TODO: Drag!
rawPositions[activeDragId] = // if (activeDrag) {
activeDrag.getAdjustedPosition(delta); // rawPositions[activeDragId] =
populatePosition(activeDragId); // activeDrag.getAdjustedPosition(delta);
} // populatePosition(activeDragId);
// }
}, },
/** /**
* End the active drag gesture. This will update the * End the active drag gesture. This will update the
* view configuration. * view configuration.
*/ */
endDrag: function () { endDrag: function () {
// Write to configuration; this is watched and // TODO: Drag!
// saved by the EditRepresenter. // // Write to configuration; this is watched and
$scope.configuration = // // saved by the EditRepresenter.
$scope.configuration || {}; // $scope.configuration =
// Make sure there is a "panels" field in the // $scope.configuration || {};
// view configuration. // // Make sure there is a "panels" field in the
$scope.configuration.elements = // // view configuration.
$scope.configuration.elements || {}; // $scope.configuration.elements =
// Store the position of this panel. // $scope.configuration.elements || {};
$scope.configuration.elements[activeDragId] = // // Store the position of this panel.
rawPositions[activeDragId]; // $scope.configuration.elements[activeDragId] =
// Mark this object as dirty to encourage persistence // rawPositions[activeDragId];
if ($scope.commit) { // // Mark this object as dirty to encourage persistence
$scope.commit("Moved element."); // if ($scope.commit) {
} // $scope.commit("Moved element.");
// }
} }
}; };