DM-10369: client side mask color change

  - Processing image on the client side to set mask color
  - Add image processing framework that can be used in future of colobar changing
  - Processed images can be added to store as data png
  - include new functons in WebUtil: loadImage and requestIdleFrame
  - small clean up of PlotViewUtil

Author: robyww

src/firefly/js/util/Color.js

@@ -32,13 +32,13 @@ const colours = {
 
 
 function toRGBA(/* String */ color, /* Number */ alpha) {
-    var num = parseInt(color, 16);
+    const num = parseInt(color[0]==='#' ? color.substr(1) : color, 16);
     return [num >> 16, num >> 8 & 255, num & 255, alpha];
 }
 
 function toRGB(/* String */ color) {
-        var num = parseInt(color, 16);
-        return [num >> 16, num >> 8 & 255, num & 255];
+    const  num = parseInt(color[0]==='#' ? color.substr(1) : color, 16);
+    return [num >> 16, num >> 8 & 255, num & 255];
 }
 
 function toHex (/* Number */ red, /* Number */ green, /* Number */ blue) {

src/firefly/js/util/WebUtil.js

@@ -46,8 +46,19 @@ export function loadScript(scriptName) {
     return loadPromise;
 }
 
-
-
+/**
+ * Create an image with a promise that resolves when the image is loaded
+ * @param {string} src the source of the image typically a url or local image data
+ * @return {Promise} a promised that will resolved with the loaded image object
+ */
+export function loadImage(src) {
+    return new Promise( (resolve, reject) => {
+        const im = new Image();
+        im.src= src;
+        im.onload= () => resolve(im);
+        im.onerror= (ev) => reject(ev);
+    });
+}
 
 /**
  * Returns a string where all characters that are not valid for a complete URL have been escaped.
@@ -542,3 +553,22 @@ export function isBooleanString(val) {
     return s === 'true' || s === 'false';
 }
 
+/**
+ * A shim about requestIdleFrame
+ * @param callback the callback to happens when idle
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
+ * @function
+ */
+export const requestIdleCallback =
+    window.requestIdleCallback ||
+    function (callback) {
+        return setTimeout(() => {
+            const start = Date.now();
+            callback({
+                didTimeout: false,
+                timeRemaining: () => Math.max(0, 50 - (Date.now() - start))
+            });
+        }, 1);
+    };
+
+export const cancelIdleCallback = window.cancelIdleCallback || ((id) => clearTimeout(id));

src/firefly/js/visualize/ImagePlotCntlr.js

@@ -141,6 +141,8 @@ const WCS_MATCH=`${PLOTS_PREFIX}.wcsMatch`;
 const PLOT_PROGRESS_UPDATE= `${PLOTS_PREFIX}.PlotProgressUpdate`;
 const API_TOOLS_VIEW= `${PLOTS_PREFIX}.apiToolsView`;
 
+const ADD_PROCESSED_TILES= `${PLOTS_PREFIX}.addProcessedTiles`;
+
 /** Action Type: enable/disable wcs matching*/
 export const IMAGE_PLOT_KEY= 'allPlots';
 
@@ -205,6 +207,8 @@ const initState= function() {
         wcsMatchCenterWP: null,
         wcsMatchType: false,
         mpwWcsPrimId: null,
+
+        processedTiles: []
     };
 
 };
@@ -213,6 +217,35 @@ const initState= function() {
 //============ EXPORTS ===========
 
 
+/**
+ * @global
+ * @public
+ * @typedef {Object} ProcessedTiles
+ *
+ * @prop {string} plotId
+ * @prop {string} plotImageId
+ * @prop {string} imageOverlayId
+ * @prop {number} zoomFactor
+ * @prop {Array.<ClientTile>} clientTileAry
+ */
+
+/**
+ * @global
+ * @public
+ * @typedef {Object} ClientTile
+ *
+ * @prop {Object} tileAttributes
+ * @prop {String} dataUrl
+ * @prop {number} width - width of this tile
+ * @prop {number} height - height of this tile
+ * @prop {number} index - index of this tile
+ * @prop {string} url - original file key to use in the service to retrieve this tile
+ * @prop {number} xoff - pixel offset of this tile
+ * @prop {number} yoff - pixel offset of this tile
+ */
+
+
+
 
 /*---------------------------- REDUCERS -----------------------------*/
 
@@ -256,7 +289,7 @@ export default {
     RESTORE_DEFAULTS, CHANGE_PLOT_ATTRIBUTE,EXPANDED_AUTO_PLAY,
     DELETE_PLOT_VIEW, CHANGE_ACTIVE_PLOT_VIEW, CHANGE_PRIME_PLOT,
     PLOT_MASK, PLOT_MASK_START, PLOT_MASK_FAIL, PLOT_MASK_LAZY_LOAD, DELETE_OVERLAY_PLOT,
-    OVERLAY_PLOT_CHANGE_ATTRIBUTES, WCS_MATCH
+    OVERLAY_PLOT_CHANGE_ATTRIBUTES, WCS_MATCH, ADD_PROCESSED_TILES
 };
 
 
@@ -789,6 +822,16 @@ export function dispatchExpandedAutoPlay(autoPlayOn) {
 }
 
 
+/**
+ *
+ * @param plotId
+ * @param plotImageId
+ * @param clientTileAry
+ */
+export function dispatchAddProcessedTiles(plotId, imageOverlayId, plotImageId, zoomFactor, clientTileAry) {
+    flux.process({ type: ADD_PROCESSED_TILES, payload: {plotId, imageOverlayId, plotImageId, zoomFactor, clientTileAry} });
+}
+
 //======================================== Action Creators =============================
 //======================================== Action Creators =============================
 //======================================== Action Creators =============================
@@ -929,6 +972,7 @@ function changePointSelectionActionCreator(rawAction) {
 
 
 
+
 //======================================== Reducer =============================
 //======================================== Reducer =============================
 //======================================== Reducer =============================
@@ -979,6 +1023,7 @@ function reducer(state=initState(), action={}) {
         case PLOT_PROGRESS_UPDATE  :
         case OVERLAY_PLOT_CHANGE_ATTRIBUTES :
         case CHANGE_PRIME_PLOT  :
+        case ADD_PROCESSED_TILES:
             retState= plotChangeReducer(state,action);
             break;
 
@@ -1115,6 +1160,7 @@ function deletePlotView(state,action) {
     if (state.mpwWcsPrimId===plotId) {
         state.mpwWcsPrimId= state.prevActivePlotId;
     }
+    state.processedTiles= state.processedTiles.filter( (d) => d.plotId!==plotId);// remove old client tile data
     return state;
 }
 

src/firefly/js/visualize/ImageViewerLayout.jsx

@@ -5,7 +5,7 @@
 import React, {Component,PropTypes} from 'react';
 import sCompare from 'react-addons-shallow-compare';
 import {xor,isEmpty,get, isString, isFunction, throttle} from 'lodash';
-import {TileDrawerCanvas} from './iv/TileDrawerCanvas.jsx';
+import {ImageRender} from './iv/ImageRender.jsx';
 import {EventLayer} from './iv/EventLayer.jsx';
 import {ImageViewerStatus} from './iv/ImageViewerStatus.jsx';
 import {makeScreenPt, makeDevicePt} from './Point.js';
@@ -31,6 +31,7 @@ import {
     dispatchChangeActivePlotView,
     dispatchUpdateViewSize} from './ImagePlotCntlr.js';
 import {fireMouseCtxChange, makeMouseStatePayload, MouseState} from './VisMouseSync.js';
+import Color from '../util/Color.js';
 
 const DEFAULT_CURSOR= 'crosshair';
 
@@ -316,19 +317,43 @@ function makeTileDrawers(pv) {
 
     const plot= primePlot(pv);
     const rootDrawer= (
-        <TileDrawerCanvas opacity={1} plot={plot} plotView={pv} key={'TileDrawer:'+pv.plotId} />
+        <ImageRender opacity={1} plot={plot} plotView={pv} key={'TileDrawer:'+pv.plotId} />
     );
     const drawers= pv.overlayPlotViews.filter( (opv) => opv.visible && opv.plot).map( (opv) => {
         return (
-            <TileDrawerCanvas opacity={opv.opacity} plot={opv.plot} plotView={pv}
-                key={'TileDrawer-overlay:'+opv.imageOverlayId}
+            <ImageRender opacity={opv.opacity} plot={opv.plot} plotView={pv}
+                         tileAttributes={opv.colorAttributes}
+                         shouldProcess={(im, newData, imState, nextImState) => {
+                                  if (newData) return imState.color!== imState.srcImageColor;
+                                  else         return imState.color!==nextImState.color;
+                              }}
+                         processor={makeMaskColorProcessor(opv.colorAttributes.color)}
+                         key={'TileDrawer-overlay:'+opv.imageOverlayId}
             />
         );
     });
     drawers.unshift(rootDrawer);
     return drawers;
 }
 
+
+function makeMaskColorProcessor(colorStr) {
+    return (imageData) => {
+        const cAry= Color.toRGB(colorStr);
+        const {data}= imageData;
+        const len= data.length;
+        for(let i= 0; i<len; i+=4) {
+            if (data[i] || data[i+1] || data[i+2]) {
+                data[i]  = cAry[0];
+                data[i+1]= cAry[1];
+                data[i+2]= cAry[2];
+            }
+        }
+        return {imageData, compressible:true};
+    };
+}
+
+
 /**
  *
  * @param {object} props