From 280c838735d9b680df6c3055cfdfc9264314286b Mon Sep 17 00:00:00 2001 From: Doubek-Kraft Date: Fri, 23 Jun 2017 09:28:49 -0700 Subject: [PATCH] [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" 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. --- platform/features/fixed/bundle.js | 66 +++++++++++++++++++ .../features/layout/src/elements/BoxProxy.js | 4 ++ .../layout/src/elements/ElementProxy.js | 22 +++++++ .../layout/src/elements/ImageProxy.js | 4 ++ .../features/layout/src/elements/LineProxy.js | 4 +- .../layout/src/elements/TelemetryProxy.js | 4 +- 6 files changed, 100 insertions(+), 4 deletions(-) diff --git a/platform/features/fixed/bundle.js b/platform/features/fixed/bundle.js index edc52d48f6..3149c6a290 100644 --- a/platform/features/fixed/bundle.js +++ b/platform/features/fixed/bundle.js @@ -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", diff --git a/platform/features/layout/src/elements/BoxProxy.js b/platform/features/layout/src/elements/BoxProxy.js index c1d61fcc41..01ba57a6df 100644 --- a/platform/features/layout/src/elements/BoxProxy.js +++ b/platform/features/layout/src/elements/BoxProxy.js @@ -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; } diff --git a/platform/features/layout/src/elements/ElementProxy.js b/platform/features/layout/src/elements/ElementProxy.js index 7d75219adb..25f9f13e06 100644 --- a/platform/features/layout/src/elements/ElementProxy.js +++ b/platform/features/layout/src/elements/ElementProxy.js @@ -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; } ); diff --git a/platform/features/layout/src/elements/ImageProxy.js b/platform/features/layout/src/elements/ImageProxy.js index e2a27e64ff..218462e9b3 100644 --- a/platform/features/layout/src/elements/ImageProxy.js +++ b/platform/features/layout/src/elements/ImageProxy.js @@ -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; } diff --git a/platform/features/layout/src/elements/LineProxy.js b/platform/features/layout/src/elements/LineProxy.js index 92d19c0db3..9b061db329 100644 --- a/platform/features/layout/src/elements/LineProxy.js +++ b/platform/features/layout/src/elements/LineProxy.js @@ -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 diff --git a/platform/features/layout/src/elements/TelemetryProxy.js b/platform/features/layout/src/elements/TelemetryProxy.js index 2841e59f51..57668cddd8 100644 --- a/platform/features/layout/src/elements/TelemetryProxy.js +++ b/platform/features/layout/src/elements/TelemetryProxy.js @@ -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';