The fooprint can be drawn and operated on multiple plots synchronounsly. Fixed the bug for editing the rotate angle in drawing layer panel. Showing all handles (rotate or resize) while moving the footprint or marker.

Cindy Wang · Cindy Wang · commit 21e6a804a180 · 2016-07-15T16:07:46.000-07:00
diff --git a/src/firefly/js/drawingLayers/FootprintTool.js b/src/firefly/js/drawingLayers/FootprintTool.js
@@ -22,7 +22,7 @@ import {clone} from '../util/WebUtil.js';
 import {getDS9Region} from '../rpc/PlotServicesJson.js';
 import {FootprintFactory} from '../visualize/draw/FootprintFactory.js';
 import {makeViewPortPt, makeWorldPt, makeImagePt} from '../visualize/Point.js';
-import {get, set, isArray, has} from 'lodash';
+import {get, set, isArray, has, isNil} from 'lodash';
 import Enum from 'enum';
 
 
@@ -215,7 +215,7 @@ export function footprintMoveActionCreator(rawAction) {
 
             refPt = imagePt;
             footprintStatus = FootprintStatus.relocate;
-            isHandle = {isOutline: true};
+            isHandle = {isOutline: true, isRotate: true};
         }
 
         if (move) {
@@ -297,7 +297,7 @@ function getLayerChanges(drawLayer, action) {
             var {plotIdAry} = action.payload;
 
 
-            if (angleDeg) {
+            if (!isNil(angleDeg)) {
                 return updateFootprintAngle(angleDeg, obj, plotIdAry[0]);
             } else {
                 return updateFootprintText(fpText, fpTextLoc, obj);
@@ -350,16 +350,26 @@ function updateFootprintText(text, textLoc, footprintDrawObj) {
 
 /**
  * set footprint rotate angle
- * @param angleDeg
+ * @param angleDegStr
  * @param footprintDrawObj
  * @param plotId
  * @returns {*}
  */
-function updateFootprintAngle(angleDeg, footprintDrawObj, plotId) {
+function updateFootprintAngle(angleDegStr, footprintDrawObj, plotId) {
     const plot = primePlot(visRoot(), plotId);
     var cc = CsysConverter.make(plot);
+    var angleDeg;
+
+    angleDeg = angleDegStr ? parseFloat(angleDegStr) : 0.0;
+
+    while (angleDeg > 180.0 || angleDeg < -180.0) {
+        angleDeg = angleDeg < 0 ? angleDeg + 360 : angleDeg - 360;
+    }
 
     var angleUpdatedObj = updateFootprintDrawobjAngle(footprintDrawObj, cc, footprintDrawObj.pts[0], angleDeg, ANGLE_UNIT.degree, true);
+    if (angleUpdatedObj) {
+        angleUpdatedObj.angleFromUI = true;
+    }
 
     return angleUpdatedObj ? {drawData: {data: [angleUpdatedObj]}} : {};
 }
@@ -423,6 +433,7 @@ function createFootprintObjs(action, text, textLoc, crtFpObj) {
              } else {
                  footprintObj = updateFootprintDrawobjAngle(crtFpObj, cc, wpt,
                                                             angle, angleUnit);
+                 footprintObj.angleFromUI = false;
              }
          } else {       // start to move or rotate (mouse down) or end the operation (mouse up)
              if (footprintStatus !== FootprintStatus.select ) {
@@ -470,6 +481,7 @@ function centerForRotation(drawObj, wpt) {
     var {outlineIndex, drawObjAry} = drawObj;
     var outlineBox =  (outlineIndex && drawObjAry && drawObjAry.length > outlineIndex ) ? drawObjAry[outlineIndex] : null;
 
+    //return outlineBox.pts[0];
     return (outlineBox && outlineBox.outlineType === OutlineType.plotcenter) ? outlineBox.pts[0] : wpt;
 }
 /**
diff --git a/src/firefly/js/drawingLayers/FootprintToolUI.jsx b/src/firefly/js/drawingLayers/FootprintToolUI.jsx
@@ -14,28 +14,30 @@ import {primePlot, getDrawLayerById} from '../visualize/PlotViewUtil.js';
 import CoordUtil from '../visualize/CoordUtil.js';
 import CsysConverter from '../visualize/CsysConverter.js';
 import {visRoot} from '../visualize/ImagePlotCntlr.js';
-import {isNil, get} from 'lodash';
+import {InputFieldView} from '../ui/InputFieldView.jsx';
+import {isNil, get, isEmpty} from 'lodash';
 import numeral from 'numeral';
+import validator from 'validator';
 
 export const getFootprintToolUIComponent = (drawLayer,pv) => <FootprintToolUI drawLayer={drawLayer} pv={pv}/>;
 export const defaultFootprintTextLoc = TextLocation.REGION_SE;
 
+const precision = '0[.000000]';
+
 class FootprintToolUI extends React.Component {
     constructor(props) {
         super(props);
 
-        var fpText = get(this.props.drawLayer, ['drawData', 'data', '0', 'text'], '');
-        var fpTextLoc = get(this.props.drawLayer, ['drawData', 'data', '0', 'textLoc'], defaultFootprintTextLoc);
-        var angle = get(this.props.drawLayer, ['drawData', 'data', '0', 'angle'], 0.0);
-        var angleUnit = get(this.props.drawLayer, ['drawData', 'data', '0', angleUnit], ANGLE_UNIT.radian);
-        var angleDeg = convertAngle(angleUnit.key, 'deg', angle);
-        var fpInfo = get(this.props.drawLayer, 'fpInfo');
+        var {angle = 0.0, angleUnit = ANGLE_UNIT.radian,
+             text = '', textLoc = defaultFootprintTextLoc} = get(this.props.drawLayer, ['drawData', 'data', '0']) || {};
+
+        var angleDeg = `${formatAngle(convertAngle(angleUnit.key, 'deg', angle))}`;
+        var {fpInfo, currentPt} = this.props.drawLayer;
         const plot= primePlot(visRoot(),this.props.pv.plotId);
-        var {currentPt} = this.props.drawLayer;
 
         this.csys = CsysConverter.make(plot);
-        this.state = {fpText,  fpTextLoc: fpTextLoc.key, angleDeg, fpInfo,
-                      currentPt: this.csys.getWorldCoords(currentPt)};
+        this.state = {fpText: text,  fpTextLoc: textLoc.key, angleDeg, fpInfo,
+                      currentPt: this.csys.getWorldCoords(currentPt), isValidAngle: true};
         this.changeFootprintText = this.changeFootprintText.bind(this);
         this.changeFootprintTextLocation = this.changeFootprintTextLocation.bind(this);
         this.changeFootprintAngle = this.changeFootprintAngle.bind(this);
@@ -63,11 +65,11 @@ class FootprintToolUI extends React.Component {
                 this.setState({currentPt});
             }
 
-            var {angle = 0.0, angleUnit = ANGLE_UNIT.radian} = get(dl, ['drawData', 'data', '0']);
-            var angleDeg = convertAngle(angleUnit.key, 'radian', angle);
+            if (!get(dl, ['drawData', 'data', '0', 'angleFromUI'], false)) {
+                var {angle = 0.0, angleUnit = ANGLE_UNIT.radian} = get(dl, ['drawData', 'data', '0']) || {};
 
-            if (angleDeg !== this.state.angleDeg) {
-                this.setState({angleDeg});
+                angle = convertAngle(angleUnit.key, 'deg', angle);
+                this.setState({angleDeg: `${formatAngle(angle)}`, isValidAngle: true});
             }
         }
     }
@@ -93,9 +95,16 @@ class FootprintToolUI extends React.Component {
 
     changeFootprintAngle(ev) {
         var angleDeg = get(ev, 'target.value');
+        var isValidAngle = true;
 
-        this.setState({angleDeg});
-        dispatchModifyCustomField( this.props.drawLayer.drawLayerId, {angleDeg}, this.props.pv.plotId);
+        if  (isEmpty(angleDeg) || !validator.isFloat(angleDeg)) {
+            if (!angleDeg) angleDeg = '';
+            isValidAngle = false;
+        }
+        this.setState({isValidAngle, angleDeg});
+        if (isValidAngle) {
+            dispatchModifyCustomField(this.props.drawLayer.drawLayerId, {angleDeg}, this.props.pv.plotId);
+        }
     }
 
     render() {
@@ -106,17 +115,18 @@ class FootprintToolUI extends React.Component {
         };
 
         var textOnLink = `Add ${get(this.state.fpInfo, 'footprint')} ${get(this.state.fpInfo, 'instrument')}`;
+        var {isValidAngle, angleDeg, fpText, fpTextLoc} = this.state;
 
         return (
             <div style={{display:'flex', justifyContent:'flex-start', padding:'5px 0 9px 0'}}>
                 <div style={tStyle}>
                     <div> Label:<input style={{width: 60}}
                                        type='text'
-                                       value={this.state.fpText}
+                                       value={fpText}
                                        onChange={this.changeFootprintText}/>
                     </div>
                     <div> Corners:
-                        <select value={this.state.fpTextLoc} onChange={ this.changeFootprintTextLocation }>
+                        <select value={fpTextLoc} onChange={ this.changeFootprintTextLocation }>
                             <option value={TextLocation.REGION_NE.key}> NE </option>
                             <option value={TextLocation.REGION_NW.key}> NW </option>
                             <option value={TextLocation.REGION_SE.key}> SE </option>
@@ -125,11 +135,15 @@ class FootprintToolUI extends React.Component {
                     </div>
                 </div>
                 <div style={tStyle}>
-                    <div> Angle:<input style={{width: 60}}
-                                       type='text'
-                                       value={this.state.angleDeg}
-                                       onChange={this.changeFootprintAngle}/>
-                    </div>
+                    <InputFieldView
+                                valid={isValidAngle}
+                                onChange={this.changeFootprintAngle}
+                                value={angleDeg}
+                                message={'invalid angle value'}
+                                label={'Angle:'}
+                                labelWidth={30}
+
+                    />
                     <div title={textOnLink}>
                         <a className='ff-href' style={{textDecoration: 'underline'}}
                            onClick={()=>addFootprintDrawLayer(this.props.pv, this.state.fpInfo)}>{textOnLink}</a>
@@ -173,6 +187,11 @@ function convertWorldToString(pt) {
     var str = '';
     if (!pt) return str;
 
-    var precision = '0.0000';
     return `${numeral(pt.x).format(precision)} ${numeral(pt.y).format(precision)}`;
-}
+}
+
+function formatAngle(angle) {
+     var anglePre = parseFloat(`${numeral(angle).format(precision)}`);
+
+     return `${anglePre}`;
+}
diff --git a/src/firefly/js/drawingLayers/MarkerTool.js b/src/firefly/js/drawingLayers/MarkerTool.js
@@ -188,7 +188,7 @@ export function markerToolMoveActionCreator(rawAction) {
                 wpt = getWorldOrImage(makeImagePt(imageCenter.x + dx, imageCenter.y + dy), cc);
                 move.apt = {x: dx, y: dy, type: ShapeDataObj.UnitType.IMAGE_PIXEL};
                 markerStatus = MarkerStatus.relocate;
-                isHandle = {isOutline: true};
+                isHandle = {isOutline: true, isResize: true};
             }
         }
         // resize (newDize) or relocate (wpt),  status remains the same
diff --git a/src/firefly/js/visualize/draw/MarkerFootprintObj.js b/src/firefly/js/visualize/draw/MarkerFootprintObj.js

Original file line number	Diff line number	Diff line change
`@@ -188,7 +188,7 @@ export function markerToolMoveActionCreator(rawAction) {`
`188`	`188`	`wpt = getWorldOrImage(makeImagePt(imageCenter.x + dx, imageCenter.y + dy), cc);`
`189`	`189`	`move.apt = {x: dx, y: dy, type: ShapeDataObj.UnitType.IMAGE_PIXEL};`
`190`	`190`	`markerStatus = MarkerStatus.relocate;`
`191`		`- isHandle = {isOutline: true};`
	`191`	`+ isHandle = {isOutline: true, isResize: true};`
`192`	`192`	`}`
`193`	`193`	`}`
`194`	`194`	`// resize (newDize) or relocate (wpt), status remains the same`