finish part 1 of expanded mode

src/firefly/js/visualize/ImagePlotCntlr.js

@@ -97,7 +97,7 @@ const initState= function() {
 
     return {
         plotViewAry : [],  //there is one plot view for every ImageViewer, a plotView will have a plotId
-        plotGroupAry : [], // there is one for each group, a plot group may have mutiple plotViews
+        plotGroupAry : [], // there is one for each group, a plot group may have multiple plotViews
         plottingProgressInfo : [], //todo
         plotHistoryRequest: [], //todo
         plotRequestDefaults : {}, // keys are the plot id, values are object with {band : WebPlotRequest}
@@ -174,10 +174,6 @@ export function dispatchUpdateViewSize(plotId,width,height,updateScroll=true,cen
     flux.process({type: UPDATE_VIEW_SIZE,
         payload: {plotId, width, height,updateScroll,centerImagePt}
     });
-    var pv= getPlotViewById(visRoot(),plotId);
-    if (pv && pv.zoomLockingEnabled) {
-        dispatchZoom(pv.plotId,pv.zoomLockingType,true,true);
-    }
 }
 
 
@@ -238,8 +234,10 @@ function dispatch3ColorPlotImage(plotId,redReq,blueReq,greenReq,
 
 /**
  *
- * @param {string} plotId
+ * @param plotId
  * @param {UserZoomTypes} zoomType
+ * @param maxCheck
+ * @param zoomLockingEnabled
  */
 export function dispatchZoom(plotId,zoomType,maxCheck=true, zoomLockingEnabled=false) {
     doDispatchZoom(plotId, zoomType, maxCheck, zoomLockingEnabled);
@@ -274,15 +272,15 @@ export function dispatchAttributeChange(plotId,applyToGroup,attKey,attValue) {
 
 /**
  *
- * @param expandType
+ * @param {ExpandType} expandedMode
  */
 export function dispatchChangeExpandedMode(expandedMode) {
     flux.process({ type: CHANGE_EXPANDED_MODE, payload: {expandedMode} });
 
 
     var enable= expandedMode!==ExpandType.COLLAPSE;
     visRoot().plotViewAry.forEach( (pv) =>
-               dispatchZoomLocking(pv.plotId,enable,pv.zoomLockingType) );
+               dispatchZoomLocking(pv.plotId,enable,pv.plotViewCtx.zoomLockingType) );
 }
 
 

src/firefly/js/visualize/PlotImageTask.js

@@ -79,7 +79,8 @@ function makePlotImageAction(rawAction) {
         } );
 
         if (rawAction.useContextModifications) {
-            wpRequest= modifyRequest(plotId,wpRequest,Band.NO_BAND,true);
+            var pv= getPlotViewById(visRoot(),plotId);
+            if (pv) wpRequest= modifyRequest(pv.plotViewCtx,wpRequest,Band.NO_BAND);
         }
 
 
@@ -107,27 +108,24 @@ function makePlotImageAction(rawAction) {
 
 /**
  *
- * @param {string} plotId
+ * @param {object} pvCtx
  * @param {WebPlotRequest} r
  * @param {Band} band
  * @return {WebPlotRequest}
  */
-function modifyRequest(plotId, r, band) {
+function modifyRequest(pvCtx, r, band) {
 
-    if (!r) return r;
-
-    var pv= PlotViewUtil.getPlotViewById(visRoot(),plotId);
-    if (!pv) return r;
+    if (!r || !pvCtx) return r;
 
     var retval= r.makeCopy();
 
-    var userModRot= pv && pv.userModifiedRotate;
-    if (pv.options.rotateNorth) retval.setRotateNorth(true);
+    var userModRot= pvCtx.userModifiedRotate;
+    if (pvCtx.rotateNorth) retval.setRotateNorth(true);
     if (r.getRotateNorthSuggestion() && userModRot) retval.setRotateNorth(true);
 
 
 
-    //if (r.getRequestType()==RequestType.URL ) { //todo, when do we need to make if a full url, I think in cross-site mode
+    //if (r.getRequestType()===RequestType.URL ) { //todo, when do we need to make if a full url, I think in cross-site mode
     //    r.setURL(modifyURLToFull(r.getURL()));
     //}
 
@@ -137,23 +135,22 @@ function modifyRequest(plotId, r, band) {
     //    retval.setInitialZoomLevel(plot.getZoomFact());
     //}
 
-    if (pv.defThumbnailSize!=DEFAULT_THUMBNAIL_SIZE && !r.containsParam(WPConst.THUMBNAIL_SIZE)) {
-        retval.setThumbnailSize(pv.defThumbnailSize);
+    if (pvCtx.defThumbnailSize!=DEFAULT_THUMBNAIL_SIZE && !r.containsParam(WPConst.THUMBNAIL_SIZE)) {
+        retval.setThumbnailSize(pvCtx.defThumbnailSize);
     }
 
 
-    var cPref= PlotPref.getCacheColorPref(pv.preferenceColorKey);
+    var cPref= PlotPref.getCacheColorPref(pvCtx.preferenceColorKey);
     if (cPref) {
         if (cPref[band]) retval.setInitialRangeValues(cPref[band]);
         retval.setInitialColorTable(cPref.colorTableId);
     }
 
 
-    if (pv.attributes[WPConst.GRID_ID]) {
-        retval.setGridId(pv.attributes[WPConst.GRID_ID]);
-    }
+    if (pvCtx.gridId) retval.setGridId(pvCtx.gridId);
+
 
-    var zPref= PlotPref.getCacheZoomPref(pv.preferenceZoomKey);
+    var zPref= PlotPref.getCacheZoomPref(pvCtx.preferenceZoomKey);
     if (zPref) {
         retval.setInitialZoomLevel(zPref.zooomLevel);
     }

src/firefly/js/visualize/PlotViewUtil.js

@@ -38,6 +38,10 @@ export function getPlotViewById(visRoot,plotId) {
     return visRoot.plotViewAry.find( (pv) => pv.plotId===plotId);
 }
 
+
+
+
+
 /**
  * Return an array of plotId's that are in the plot group associated with the the pvOrId parameter.
  * @param visRoot - root of the visualization object in store

src/firefly/js/visualize/ZoomUtil.js

@@ -96,9 +96,16 @@ export function makeZoomAction(rawAction) {
             }
 
         }
+
+
+        if (Math.floor(pv.primaryPlot.zoomFactor*1000)===Math.floor(level*1000)) { //zoom level the same - just return
+            return;
+        }
+
+
         if (continueZoom) {
-            doZoom(dispatcher,plotId,level,isFullScreen,zoomLockingEnabled,useDelay);
-            var matchFunc= makeZoomLevelMatcher(dispatcher, pv,level,isFullScreen,useDelay);
+            doZoom(dispatcher,plotId,level,isFullScreen,zoomLockingEnabled,userZoomType,useDelay);
+            var matchFunc= makeZoomLevelMatcher(dispatcher, pv,level,isFullScreen,userZoomType,useDelay);
             PlotViewUtil.operateOnOthersInGroup(visRoot(),pv, matchFunc);
         }
         else {
@@ -111,7 +118,7 @@ export function makeZoomAction(rawAction) {
 
 
 
-function makeZoomLevelMatcher(dispatcher, sourcePv,level,isFullScreen,useDelay) {
+function makeZoomLevelMatcher(dispatcher, sourcePv,level,isFullScreen,userZoomType,useDelay) {
     const selectedPlot= sourcePv.primaryPlot;
     const targetArcSecPix= getArcSecPerPix(selectedPlot, level);
 
@@ -125,7 +132,7 @@ function makeZoomLevelMatcher(dispatcher, sourcePv,level,isFullScreen,useDelay)
             // if the new level is only slightly different then use the target level
            newZoomLevel= (Math.abs(plotLevel-level)<.01) ? level : plotLevel;
         }
-        doZoom(dispatcher,pv.plotId,newZoomLevel,isFullScreen,useDelay);
+        doZoom(dispatcher,pv.plotId,newZoomLevel,isFullScreen,userZoomType,useDelay);
     };
 }
 
@@ -135,12 +142,14 @@ function makeZoomLevelMatcher(dispatcher, sourcePv,level,isFullScreen,useDelay)
  * @param dispatcher
  * @param plotId
  * @param zoomLevel
+ * @param zoomLockingEnabled
+ * @param userZoomType
  * @param isFullScreen
  * @param useDelay
  */
-function doZoom(dispatcher,plotId,zoomLevel,isFullScreen, zoomLockingEnabled, useDelay) {
+function doZoom(dispatcher,plotId,zoomLevel,isFullScreen, zoomLockingEnabled, userZoomType,useDelay) {
     dispatcher( { type: ImagePlotCntlr.ZOOM_IMAGE_START,
-                  payload:{plotId,zoomLevel, zoomLockingEnabled} } );
+                  payload:{plotId,zoomLevel, zoomLockingEnabled,userZoomType} } );
 
 
      // note - this filter has a side effect of canceling the timer. There might be a better way to do this.

src/firefly/js/visualize/iv/ExpandedGridView.jsx

@@ -10,17 +10,8 @@ import {getPlotGroupById}  from '../PlotGroup.js';
 import {RotateType}  from '../PlotState.js';
 import {visRoot, ExpandType} from '../ImagePlotCntlr.js';
 import {convertZoomToString} from '../ZoomUtil.js';
-import {VisCtxToolbarView} from './../ui/VisCtxToolbarView.jsx';
-import {VisInlineToolbarView} from './../ui/VisInlineToolbarView.jsx';
 import PlotViewUtil from '../PlotViewUtil.js';
-import {ImageViewerView}  from './ImageViewerView.jsx';
-import {PlotAttribute} from '../WebPlot.js';
-import {AnnotationOps} from '../WebPlotRequest.js';
-import BrowserInfo from '../../util/BrowserInfo.js';
-import {AREA_SELECT,LINE_SELECT,POINT} from '../PlotCmdExtension.js';
-import {getTaskCount} from '../../core/AppDataCntlr.js';
 import './ImageViewerDecorate.css';
-import LOADING from 'html/images/gxt/loading.gif';
 
 export function ExpandedGridView({allPlots}) {
     if (allPlots.expandedMode===ExpandType.COLLAPSE) return <div></div>;

src/firefly/js/visualize/iv/ExpandedSingleView.jsx

@@ -8,18 +8,9 @@ import {ExpandedTools} from './ExpandedTools.jsx';
 import numeral from 'numeral';
 import {getActivePlotView} from '../PlotViewUtil.js';
 import {getPlotGroupById}  from '../PlotGroup.js';
-import {RotateType}  from '../PlotState.js';
 import {visRoot, ExpandType} from '../ImagePlotCntlr.js';
-import {convertZoomToString} from '../ZoomUtil.js';
-import {VisCtxToolbarView} from './../ui/VisCtxToolbarView.jsx';
-import {VisInlineToolbarView} from './../ui/VisInlineToolbarView.jsx';
 import PlotViewUtil from '../PlotViewUtil.js';
-import {ImageViewerView}  from './ImageViewerView.jsx';
-import {PlotAttribute} from '../WebPlot.js';
-import {AnnotationOps} from '../WebPlotRequest.js';
 import BrowserInfo from '../../util/BrowserInfo.js';
-import {AREA_SELECT,LINE_SELECT,POINT} from '../PlotCmdExtension.js';
-import {getTaskCount} from '../../core/AppDataCntlr.js';
 import {ImageViewer} from './../iv/ImageViewer.jsx';
 
 export function ExpandedSingleView({allPlots}) {

src/firefly/js/visualize/iv/ImageViewer.jsx

@@ -5,7 +5,7 @@
 import React, {Component,PropTypes} from 'react';
 import sCompare from 'react-addons-shallow-compare';
 import PlotViewUtil, {getPlotViewById} from '../PlotViewUtil.js';
-import {ImageViewerDecorate} from './ImageViewerDecorate.jsx';
+import {ImageViewerView} from './ImageViewerView.jsx';
 import {visRoot} from '../ImagePlotCntlr.js';
 import {extensionRoot} from '../../core/ExternalAccessCntlr.js';
 import {currMouseState,MouseState} from '../VisMouseCntlr.js';
@@ -86,11 +86,11 @@ export class ImageViewer extends Component {
         var {plotView,allPlots,drawLayersAry,mousePlotId}= this.state;
         if (!plotView) return false;
         return (
-            <ImageViewerDecorate plotView={plotView}
-                                 drawLayersAry={drawLayersAry}
-                                 visRoot={allPlots}
-                                 mousePlotId={mousePlotId}
-                                 extensionList={getExtensionList(plotView.plotId)} />
+            <ImageViewerView plotView={plotView}
+                             drawLayersAry={drawLayersAry}
+                             visRoot={allPlots}
+                             mousePlotId={mousePlotId}
+                             extensionList={getExtensionList(plotView.plotId)} />
         );
     }
 }

src/firefly/js/visualize/iv/ImageViewerDecorate.jsx

@@ -12,7 +12,7 @@ import {convertZoomToString} from '../ZoomUtil.js';
 import {VisCtxToolbarView} from './../ui/VisCtxToolbarView.jsx';
 import {VisInlineToolbarView} from './../ui/VisInlineToolbarView.jsx';
 import PlotViewUtil from '../PlotViewUtil.js';
-import {ImageViewerView}  from './ImageViewerView.jsx';
+import {ImageViewerLayout}  from './ImageViewerLayout.jsx';
 import {PlotAttribute} from '../WebPlot.js';
 import {AnnotationOps} from '../WebPlotRequest.js';
 import BrowserInfo from '../../util/BrowserInfo.js';
@@ -201,15 +201,21 @@ function makeTitleLineHeader(annoOps, expandedMode,titleStr, zoomFactor, plotSta
 //---------- React Components -----------------------------------------------
 //===========================================================================
 
-export function ImageViewerDecorate({plotView:pv,drawLayersAry,extensionList,visRoot,mousePlotId}) {
-    var ctxToolbar= contextToolbar(pv,drawLayersAry,extensionList);
-    var top= ctxToolbar?32:0;
+export function ImageViewerDecorate({plotView:pv,drawLayersAry,extensionList,visRoot,mousePlotId,width,height}) {
+
+    if (!width || !height) return <div></div>;
+
+    const ctxToolbar= contextToolbar(pv,drawLayersAry,extensionList);
+    const top= ctxToolbar?32:0;
     var title, zoomFactor;
     var titleLineHeader= null;
     var inlineTitle= null;
     var plotId= null;
     var plotState= null;
-    var {expandedMode}= visRoot;
+    const {expandedMode}= visRoot;
+    const expandedToSingle= (expandedMode===ExpandType.SINGLE);
+    const iWidth= expandedToSingle ? width : width-4;
+    const iHeight=expandedToSingle ? height-top :height-5-top;
 
     if (pv && pv.primaryPlot) {
         title= pv && pv.primaryPlot ? pv.primaryPlot.title : '';
@@ -236,7 +242,7 @@ export function ImageViewerDecorate({plotView:pv,drawLayersAry,extensionList,vis
         overflow: 'hidden',
         position: 'absolute',
         borderStyle: 'solid',
-        borderWidth: (expandedMode!==ExpandType.SINGLE) ?'3px 2px 2px 2px' : '0 0 0 0',
+        borderWidth: expandedToSingle ? '0 0 0 0' : '3px 2px 2px 2px',
         borderColor: getBorderColor(pv,visRoot)
     };
 
@@ -256,7 +262,9 @@ export function ImageViewerDecorate({plotView:pv,drawLayersAry,extensionList,vis
             <div className='image-viewer-decorate' style={innerStyle}>
                 {ctxToolbar}
                 <div style={{position: 'absolute', width:'100%', top, bottom:0}}>
-                    <ImageViewerView plotView={pv} drawLayersAry={drawLayersAry}/>
+                    <ImageViewerLayout plotView={pv} drawLayersAry={drawLayersAry}
+                                       width={iWidth} height={iHeight}
+                                       externalWidth={width} externalHeight={height}/>
                     {inlineTitle}
                     {makeInlineRightToolbar(visRoot,pv,drawLayersAry,mousePlotId)}
                 </div>
@@ -272,7 +280,9 @@ ImageViewerDecorate.propTypes= {
     drawLayersAry: PropTypes.array.isRequired,
     visRoot: PropTypes.object.isRequired,
     extensionList : PropTypes.array.isRequired,
-    mousePlotId : PropTypes.string
+    mousePlotId : PropTypes.string,
+    width : PropTypes.number.isRequired,
+    height : PropTypes.number.isRequired
 };