[Layout] Add numerical inputs for fixed-position layout

Added individual property inputs to the toolbar for height, width, x,
 y, and line endpoint coordinates in fixed/bundle.js.

Added "edit<Property>" AccessorMutators for height and width to each
of the element proxies, so these properties can be exposed only for
elements where it makes sense (e.g. boxes, but not lines, since lines
are better controlled by endpoint coordinates).

Added a method "checkNumeric" to ElementProxy.js , to be used
to restrict inputs to integral values for position and size
 textfield inputs.

Current issues: endpoint coordinate inputs have undexpected behvaior,
handles disappear after using the input fields to modify element
properties.
This commit is contained in:
Doubek-Kraft 2017-06-23 09:28:49 -07:00 committed by Aaron Doubek-Kraft
parent 445dfb3d91
commit 280c838735
6 changed files with 100 additions and 4 deletions

View File

@ -142,7 +142,73 @@ define([
"cssClass": "l-input-lg",
"required": true
}
}
]
},
{
"items": [
{
"property": "x",
"text": "X",
"name": "X",
"cssClass": "l-input-sm",
"control": "textfield"
},
{
"property":"y",
"text": "Y",
"name": "Y",
"cssClass": "l-input-sm",
"control": "textfield"
},
{
"method": "y1",
"text": "X1",
"name": "X1",
"cssClass": "l-input-sm",
"control" : "textfield"
},
{
"property": "y1",
"text": "Y1",
"name": "Y1",
"cssClass": "l-input-sm",
"control" : "textfield"
},
{
"property": "x2",
"text": "X2",
"name": "X2",
"cssClass": "l-input-sm",
"control" : "textfield"
},
{
"property": "y2",
"text": "Y2",
"name": "Y2",
"cssClass": "l-input-sm",
"control" : "textfield"
},
{
"property": "editHeight",
"text": "H",
"name": "H",
"cssClass": "l-input-sm numerical",
"control": "textfield",
"description": "Resize change object height"
},
{
"property": "editWidth",
"text": "W",
"name": "W",
"cssClass": "l-input-sm numerical",
"control": "textfield",
}
]
},
{
"items":[
{
"property": "text",
"cssClass": "icon-gear",

View File

@ -52,6 +52,10 @@ define(
*/
proxy.fill = new AccessorMutator(element, 'fill');
//Expose width and height for editing
proxy.editWidth = new AccessorMutator(element,'width', proxy.checkNumeric);
proxy.editHeight = new AccessorMutator(element,'height', proxy.checkNumeric);
return proxy;
}

View File

@ -156,6 +156,28 @@ define(
return this.resizeHandles;
};
/**
* Ensure and input type is numeric: intended to be passed as the
* updater argument to an AccessorMutator object in order to restrict
* input to integer values only.
* @return Either the string '' (for no input), the new value passed in,
* or the current value of the new value is invalid.
*/
ElementProxy.prototype.checkNumeric = function(value, current) {
// Allow field to be empty
if (value === ''){
return value;
}
// Else, check if the input is integral, and not, return current value
// of the field
value = parseInt(value);
if ( isNaN(value) ){
return current;
} else {
return value;
}
};
return ElementProxy;
}
);

View File

@ -49,6 +49,10 @@ define(
*/
proxy.url = new AccessorMutator(element, 'url');
//Expose width and height properties for editing
proxy.editWidth = new AccessorMutator(element, 'width', proxy.checkNumeric);
proxy.editHeight = new AccessorMutator(element, 'height', proxy.checkNumeric);
return proxy;
}

View File

@ -21,8 +21,8 @@
*****************************************************************************/
define(
['./ElementProxy', './LineHandle'],
function (ElementProxy, LineHandle) {
['./ElementProxy', './LineHandle','./AccessorMutator'],
function (ElementProxy, LineHandle,AccessorMutator) {
/**
* Selection/diplay proxy for line elements of a fixed position

View File

@ -21,8 +21,8 @@
*****************************************************************************/
define(
['./TextProxy'],
function (TextProxy) {
['./TextProxy','./AccessorMutator'],
function (TextProxy,AccessorMutator) {
// Method names to expose from this proxy
var HIDE = 'hideTitle', SHOW = 'showTitle';