ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-20 17:33:23 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[Layout] Utilize mct-drag

Browse Source 
Utilize mct-drag in the layout view to allow editing
of frame position by drag. WTD-535.
This commit is contained in:
Victor Woeltjen 2014-12-05 08:51:41 -08:00
parent b941557b41
commit 847144c630
3 changed files with 91 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
platform/features/layout/res/templates/layout.html
View File

@ -11,6 +11,14 @@
</mct-representation>
</div>
<span>
<span style="position: absolute; left: 12px; right: 12px; top: 12px; bottom: 12px;"
mct-drag-down="controller.startDrag(childObject.getId(), [1,1], [0,0])"
mct-drag="controller.continueDrag(delta)"
mct-drag-up="controller.endDrag()">
</span>
</span>
</div>
</div>

40
platform/features/layout/src/LayoutController.js
View File

@ -1,15 +1,17 @@
/*global define*/
define(
[],
function () {
['./LayoutDrag'],
function (LayoutDrag) {
"use strict";
var DEFAULT_DIMENSIONS = [ 4, 2 ];
var DEFAULT_DIMENSIONS = [ 12, 8 ];
function LayoutController($scope) {
var width = 16,
height = 16,
var width = 32,
height = 32,
activeDrag,
activeDragId,
rawPositions = {},
positions = {};
@ -30,8 +32,10 @@ define(
}
function populatePosition(id, index) {
rawPositions[id] = rawPositions[id] || defaultPosition(index);
positions[id] = convertPosition(rawPositions[id]);
rawPositions[id] =
rawPositions[id] || defaultPosition(index || 0);
positions[id] =
convertPosition(rawPositions[id]);
}
function lookupPanels(model) {
@ -55,14 +59,24 @@ define(
getFrameStyle: function (id) {
return positions[id];
},
startDrag: function (event) {
console.log("start", event);
startDrag: function (id, posFactor, dimFactor) {
activeDragId = id;
activeDrag = new LayoutDrag(
rawPositions[id],
posFactor,
dimFactor,
[ width, height ]
);
},
continueDrag: function (event) {
console.log("continue", event);
continueDrag: function (delta) {
if (activeDrag) {
rawPositions[activeDragId] =
activeDrag.getAdjustedPosition(delta);
populatePosition(activeDragId);
}
},
endDrag: function (event) {
console.log("end", event);
endDrag: function () {
// TODO: Mutate, persist
}
};

56
platform/features/layout/src/LayoutDrag.js Normal file
View File

@ -0,0 +1,56 @@
/*global define*/
define(
[],
function () {
"use strict";
function LayoutDrag(rawPosition, posFactor, dimFactor, gridSize) {
function toGridDelta(pixelDelta) {
return pixelDelta.map(function (v, i) {
return Math.round(v / gridSize[i]);
});
}
function multiply(array, factors) {
return array.map(function (v, i) {
return v * factors[i];
});
}
function add(array, other) {
return array.map(function (v, i) {
return v + other[i];
});
}
function max(array, other) {
return array.map(function (v, i) {
return Math.max(v, other[i]);
});
}
function getAdjustedPosition(pixelDelta) {
var gridDelta = toGridDelta(pixelDelta);
return {
position: max(add(
rawPosition.position,
multiply(gridDelta, posFactor)
), [0, 0]),
dimensions: max(add(
rawPosition.dimensions,
multiply(gridDelta, dimFactor)
), [1, 1])
};
}
return {
getAdjustedPosition: getAdjustedPosition
};
}
return LayoutDrag;
}
);