[Layout] Add methods for interaction

Add methods for tracking interactions with
frames in a layout. WTD-535.
This commit is contained in:
Victor Woeltjen 2014-12-04 14:01:41 -08:00
parent 4db2febbb3
commit 8956be1209

View File

@ -10,19 +10,28 @@ define(
function LayoutController($scope) { function LayoutController($scope) {
var width = 16, var width = 16,
height = 16, height = 16,
rawPositions = {},
positions = {}; positions = {};
function convertPosition(position, dimensions) { function convertPosition(raw) {
return { return {
left: (width * position[0]) + 'px', left: (width * raw.position[0]) + 'px',
top: (width * position[1]) + 'px', top: (width * raw.position[1]) + 'px',
width: (width * dimensions[0]) + 'px', width: (width * raw.dimensions[0]) + 'px',
height: (height * dimensions[1]) + 'px' height: (height * raw.dimensions[1]) + 'px'
}; };
} }
function defaultPosition(index) { function defaultPosition(index) {
return convertPosition([index, index], DEFAULT_DIMENSIONS); return {
position: [index, index],
dimensions: DEFAULT_DIMENSIONS
};
}
function populatePosition(id, index) {
rawPositions[id] = rawPositions[id] || defaultPosition(index);
positions[id] = convertPosition(rawPositions[id]);
} }
function lookupPanels(model) { function lookupPanels(model) {
@ -34,21 +43,26 @@ define(
// Update width/height that we are tracking // Update width/height that we are tracking
// Pull values from panels field // Pull values from panels field to rawPositions
// Add defaults where needed // Compute positions and add defaults where needed
((model || {}).composition || []).forEach(function (id, i) { ((model || {}).composition || []).forEach(populatePosition);
positions[id] = positions[id] || defaultPosition(i);
});
} }
$scope.$watch("model", lookupPanels); $scope.$watch("model", lookupPanels);
return { return {
getFrameStyle: function (id) { getFrameStyle: function (id) {
return positions[id]; return positions[id];
},
startDrag: function (event) {
console.log("start", event);
},
continueDrag: function (event) {
console.log("continue", event);
},
endDrag: function (event) {
console.log("end", event);
} }
}; };