alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'open940b' into open929

Browse Source 
Merge in Fixed Position updates to reconcile conflicts
related to generalization of selection mechanism, WTD-929.

Conflicts:
	platform/features/layout/src/FixedController.js
	platform/features/layout/test/FixedControllerSpec.js
This commit is contained in:
Victor Woeltjen
2015-03-04 15:08:11 -08:00
parent 3ce1064c4e 93debb4abe
commit 5ab2ceb333
49 changed files with 1415 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,8 @@
/*global define*/
define(
['./LayoutDrag', './FixedProxy', './elements/ElementProxies'],
function (LayoutDrag, FixedProxy, ElementProxies) {
['./FixedProxy', './elements/ElementProxies', './FixedDragHandle'],
function (FixedProxy, ElementProxies, FixedDragHandle) {
"use strict";
var DEFAULT_DIMENSIONS = [ 2, 1 ],
@@ -27,6 +27,8 @@ define(
names = {}, // Cache names by ID
values = {}, // Cache values by ID
elementProxiesById = {},
handles = [],
moveHandle,
selection;
// Refresh cell styles (e.g. because grid extent changed)
@@ -64,6 +66,40 @@ define(
};
}
// Update the style for a selected element
function updateSelectionStyle() {
var element = selection && selection.get();
if (element) {
element.style = convertPosition(element);
}
}
// Generate a specific drag handle
function generateDragHandle(elementHandle) {
return new FixedDragHandle(
elementHandle,
gridSize,
updateSelectionStyle,
$scope.commit
);
}
// Generate drag handles for an element
function generateDragHandles(element) {
return element.handles().map(generateDragHandle);
}
// Select an element
function select(element) {
if (selection) {
// Update selection...
selection.select(element);
// ...as well as move, resize handles
moveHandle = generateDragHandle(element);
handles = generateDragHandles(element);
}
}
// Update the displayed value for this object
function updateValue(telemetryObject) {
var id = telemetryObject && telemetryObject.getId();
@@ -121,7 +157,7 @@ define(
if (selection) {
selection.deselect();
if (index > -1) {
selection.select(elementProxies[index]);
select(elementProxies[index]);
}
}
@@ -183,9 +219,7 @@ define(
// Refresh displayed elements
refreshElements();
// Select the newly-added element
if (selection) {
selection.select(elementProxies[elementProxies.length - 1]);
}
select(elementProxies[elementProxies.length - 1]);
// Mark change as persistable
if ($scope.commit) {
$scope.commit("Dropped an element.");
@@ -201,7 +235,7 @@ define(
y: Math.floor(position.y / gridSize[1]),
id: id,
stroke: "transparent",
color: "#717171",
color: "#cccccc",
titled: true,
width: DEFAULT_DIMENSIONS[0],
height: DEFAULT_DIMENSIONS[1]
@@ -274,82 +308,42 @@ define(
return elementProxies;
},
/**
* Check if the element is currently selected.
* Check if the element is currently selected, or (if no
* argument is supplied) get the currently selected element.
* @returns {boolean} true if selected
*/
selected: function (element) {
return selection && selection.selected(element);
return selection && ((arguments.length > 0) ?
selection.selected(element) : selection.get());
},
/**
* Set the active user selection in this view.
* @param element the element to select
*/
select: function (element) {
if (selection) {
selection.select(element);
}
},
select: select,
/**
* Clear the current user selection.
*/
clearSelection: function () {
if (selection) {
selection.deselect();
handles = [];
moveHandle = undefined;
}
},
/**
* Start a drag gesture to move/resize a frame.
*
* The provided position and dimensions factors will determine
* whether this is a move or a resize, and what type it
* will be. For instance, a position factor of [1, 1]
* will move a frame along with the mouse as the drag
* proceeds, while a dimension factor of [0, 0] will leave
* dimensions unchanged. Combining these in different
* ways results in different handles; a position factor of
* [1, 0] and a dimensions factor of [-1, 0] will implement
* a left-edge resize, as the horizontal position will move
* with the mouse while the horizontal dimensions shrink in
* kind (and vertical properties remain unmodified.)
*
* @param element the raw (undecorated) element to drag
* Get drag handles.
* @returns {Array} drag handles for the current selection
*/
startDrag: function (element) {
// Only allow dragging in edit mode
if ($scope.domainObject &&
$scope.domainObject.hasCapability('editor')) {
dragging = {
element: element,
x: element.x(),
y: element.y()
};
}
handles: function () {
return handles;
},
/**
* Continue an active drag gesture.
* @param {number[]} delta the offset, in pixels,
* of the current pointer position, relative
* to its position when the drag started
* Get the handle to handle dragging to reposition an element.
* @returns {FixedDragHandle} the drag handle
*/
continueDrag: function (delta) {
if (dragging) {
// Update x/y values
dragging.element.x(dragging.x + Math.round(delta[0] / gridSize[0]));
dragging.element.y(dragging.y + Math.round(delta[1] / gridSize[1]));
// Update display position
dragging.element.style = convertPosition(dragging.element);
}
},
/**
* End the active drag gesture. This will update the
* view configuration.
*/
endDrag: function () {
// Mark this object as dirty to encourage persistence
if (dragging && $scope.commit) {
dragging = undefined;
$scope.commit("Moved element.");
}
moveHandle: function () {
return moveHandle;
}
};

96
platform/features/layout/src/FixedDragHandle.js Normal file
View File

@@ -0,0 +1,96 @@
/*global define*/
define(
[],
function () {
'use strict';
// Drag handle dimensions
var DRAG_HANDLE_SIZE = [ 6, 6 ];
/**
* Template-displayable drag handle for an element in fixed
* position mode.
* @constructor
*/
function FixedDragHandle(elementHandle, gridSize, update, commit) {
var self = {},
dragging;
// Generate ng-style-appropriate style for positioning
function getStyle() {
// Adjust from grid to pixel coordinates
var x = elementHandle.x() * gridSize[0],
y = elementHandle.y() * gridSize[1];
// Convert to a CSS style centered on that point
return {
left: (x - DRAG_HANDLE_SIZE[0] / 2) + 'px',
top: (y - DRAG_HANDLE_SIZE[1] / 2) + 'px',
width: DRAG_HANDLE_SIZE[0] + 'px',
height: DRAG_HANDLE_SIZE[1] + 'px'
};
}
// Begin a drag gesture
function startDrag() {
// Cache initial x/y positions
dragging = { x: elementHandle.x(), y: elementHandle.y() };
}
// Reposition during drag
function continueDrag(delta) {
if (dragging) {
// Update x/y positions (snapping to grid)
elementHandle.x(
dragging.x + Math.round(delta[0] / gridSize[0])
);
elementHandle.y(
dragging.y + Math.round(delta[1] / gridSize[1])
);
// Invoke update callback
if (update) {
update();
}
}
}
// Conclude a drag gesture
function endDrag() {
// Clear cached state
dragging = undefined;
// Mark change as complete
if (commit) {
commit("Dragged handle.");
}
}
return {
/**
* Get a CSS style to position this drag handle.
* @returns CSS style object (for `ng-style`)
*/
style: getStyle,
/**
* Start a drag gesture. This should be called when a drag
* begins to track initial state.
*/
startDrag: startDrag,
/**
* Continue a drag gesture; update x/y positions.
* @param {number[]} delta x/y pixel difference since drag
* started
*/
continueDrag: continueDrag,
/**
* End a drag gesture. This should be callled when a drag
* concludes to trigger commit of changes.
*/
endDrag: endDrag
};
}
return FixedDragHandle;
}
);

16
platform/features/layout/src/elements/AccessorMutator.js
View File

@@ -8,14 +8,26 @@ define(
/**
* Utility function for creating getter-setter functions,
* since these are frequently useful for element proxies.
*
* An optional third argument may be supplied in order to
* constrain or modify arguments when using as a setter;
* this argument is a function which takes two arguments
* (the current value for the property, and the requested
* new value.) This is useful when values need to be kept
* in certain ranges; specifically, to keep x/y positions
* non-negative in a fixed position view.
*
* @constructor
* @param {Object} object the object to get/set values upon
* @param {string} key the property to get/set
* @param {function} [updater] function used to process updates
*/
function AccessorMutator(object, key) {
function AccessorMutator(object, key, updater) {
return function (value) {
if (arguments.length > 0) {
object[key] = value;
object[key] = updater ?
updater(value, object[key]) :
value;
}
return object[key];
};

2
platform/features/layout/src/elements/ElementFactory.js
View File

@@ -24,7 +24,7 @@ define(
"fixed.text": {
fill: "transparent",
stroke: "transparent",
color: "#717171"
color: "#cccccc"
}
},
DIALOGS = {

22
platform/features/layout/src/elements/ElementProxy.js
View File

@@ -1,8 +1,8 @@
/*global define*/
define(
['./AccessorMutator'],
function (AccessorMutator) {
['./AccessorMutator', './ResizeHandle'],
function (AccessorMutator, ResizeHandle) {
"use strict";
// Index deltas for changes in order
@@ -13,6 +13,11 @@ define(
bottom: Number.NEGATIVE_INFINITY
};
// Ensure a value is non-negative (for x/y setters)
function clamp(value) {
return Math.max(value, 0);
}
/**
* Abstract superclass for other classes which provide useful
* interfaces upon an elements in a fixed position view.
@@ -29,6 +34,8 @@ define(
* @param {Array} elements the full array of elements
*/
function ElementProxy(element, index, elements) {
var handles = [ new ResizeHandle(element, 1, 1) ];
return {
/**
* The element as stored in the view configuration.
@@ -40,14 +47,14 @@ define(
* @param {number} [x] the new x position (if setting)
* @returns {number} the x position
*/
x: new AccessorMutator(element, 'x'),
x: new AccessorMutator(element, 'x', clamp),
/**
* Get and/or set the y position of this element.
* Units are in fixed position grid space.
* @param {number} [y] the new y position (if setting)
* @returns {number} the y position
*/
y: new AccessorMutator(element, 'y'),
y: new AccessorMutator(element, 'y', clamp),
/**
* Get and/or set the stroke color of this element.
* @param {string} [stroke] the new stroke color (if setting)
@@ -97,6 +104,13 @@ define(
if (elements[index] === element) {
elements.splice(index, 1);
}
},
/**
* Get handles to control specific features of this element,
* e.g. corner size.
*/
handles: function () {
return handles;
}
};
}

61
platform/features/layout/src/elements/LineHandle.js Normal file
View File

@@ -0,0 +1,61 @@
/*global define*/
define(
[],
function () {
'use strict';
/**
* Handle for changing x/y position of a line's end point.
* This is used to support drag handles for line elements
* in a fixed position view. Field names for opposite ends
* are provided to avoid zero-length lines.
* @constructor
* @param element the line element
* @param {string} xProperty field which stores x position
* @param {string} yProperty field which stores x position
* @param {string} xOther field which stores x of other end
* @param {string} yOther field which stores y of other end
*/
function LineHandle(element, xProperty, yProperty, xOther, yOther) {
return {
/**
* Get/set the x position of the lower-right corner
* of the handle-controlled element, changing size
* as necessary.
*/
x: function (value) {
if (arguments.length > 0) {
// Ensure we stay in view
value = Math.max(value, 0);
// Make sure end points will still be different
if (element[yOther] !== element[yProperty] ||
element[xOther] !== value) {
element[xProperty] = value;
}
}
return element[xProperty];
},
/**
* Get/set the y position of the lower-right corner
* of the handle-controlled element, changing size
* as necessary.
*/
y: function (value) {
if (arguments.length > 0) {
// Ensure we stay in view
value = Math.max(value, 0);
// Make sure end points will still be different
if (element[xOther] !== element[xProperty] ||
element[yOther] !== value) {
element[yProperty] = value;
}
}
return element[yProperty];
}
};
}
return LineHandle;
}
);

23
platform/features/layout/src/elements/LineProxy.js
View File

@@ -1,8 +1,8 @@
/*global define*/
define(
['./ElementProxy'],
function (ElementProxy) {
['./ElementProxy', './LineHandle'],
function (ElementProxy, LineHandle) {
'use strict';
/**
@@ -15,7 +15,11 @@ define(
* @param {Array} elements the full array of elements
*/
function LineProxy(element, index, elements) {
var proxy = new ElementProxy(element, index, elements);
var proxy = new ElementProxy(element, index, elements),
handles = [
new LineHandle(element, 'x', 'y', 'x2', 'y2'),
new LineHandle(element, 'x2', 'y2', 'x', 'y')
];
/**
* Get the top-left x coordinate, in grid space, of
@@ -24,7 +28,7 @@ define(
*/
proxy.x = function (v) {
var x = Math.min(element.x, element.x2),
delta = v - x;
delta = Math.max(v, 0) - x;
if (arguments.length > 0 && delta) {
element.x += delta;
element.x2 += delta;
@@ -39,7 +43,7 @@ define(
*/
proxy.y = function (v) {
var y = Math.min(element.y, element.y2),
delta = v - y;
delta = Math.max(v, 0) - y;
if (arguments.length > 0 && delta) {
element.y += delta;
element.y2 += delta;
@@ -105,6 +109,15 @@ define(
return element.y2 - proxy.y();
};
/**
* Get element handles for changing the position of end
* points of this line.
* @returns {LineHandle[]} line handles for both end points
*/
proxy.handles = function () {
return handles;
};
return proxy;
}

53
platform/features/layout/src/elements/ResizeHandle.js Normal file
View File

@@ -0,0 +1,53 @@
/*global define*/
define(
[],
function () {
'use strict';
/**
* Handle for changing width/height properties of an element.
* This is used to support drag handles for different
* element types in a fixed position view.
* @constructor
*/
function ResizeHandle(element, minWidth, minHeight) {
// Ensure reasonable defaults
minWidth = minWidth || 0;
minHeight = minHeight || 0;
return {
/**
* Get/set the x position of the lower-right corner
* of the handle-controlled element, changing size
* as necessary.
*/
x: function (value) {
if (arguments.length > 0) {
element.width = Math.max(
minWidth,
value - element.x
);
}
return element.x + element.width;
},
/**
* Get/set the y position of the lower-right corner
* of the handle-controlled element, changing size
* as necessary.
*/
y: function (value) {
if (arguments.length > 0) {
element.height = Math.max(
minHeight,
value - element.y
);
}
return element.y + element.height;
}
};
}
return ResizeHandle;
}
);