Mask Opacity

src/containers/controls.jsx

@@ -9,6 +9,7 @@ import {
 import chroma from 'chroma-js';
 
 import Overlays from "./overlays";
+import InputRange from 'react-input-range';
 import HuePicker from "../components/huepicker";
 import ChannelControls from "./channelcontrols";
 import FileBrowserModal from "../components/filebrowsermodal";
@@ -109,6 +110,7 @@ class Controls extends Component {
   render() {
 
     const {addArrowText, rgba, minerva} = this.props;
+    const {maskOpacity, handleOpacityChange} = this.props;
     const {deleteOverlay, deleteArrow, toggleTextTab} = this.props;
     const {activeStory, handleSelectStory} = this.props;
     const {handleSortStoryMasks, handleSelectStoryMasks} = this.props;
@@ -283,6 +285,24 @@ class Controls extends Component {
               />
             </div>
           </div>
+          <div className="row">
+            <div className="col-12">
+              <div className="font-white">
+                Mask Opacity: {Math.trunc(maskOpacity * 100)}%
+              </div>
+              <div className="width-100">
+                <InputRange
+                  minValue={ 0 }
+                  maxValue={ 1 }
+                  value={ maskOpacity }
+                  step={ 1/256. }
+                  formatLabel={ label => '' }
+                  onChange={ handleOpacityChange }
+                  onChangeComplete={ handleOpacityChange }
+                />
+              </div>
+            </div>
+          </div>
           <div className="row">
             <div className="col-7">
               <div className="font-white">
@@ -584,7 +604,6 @@ class Controls extends Component {
                 MultiValueLabel: SortableMultiValueLabel,
               }}
             />
-            />
           </div>
         </div>
       );

src/containers/imageview.jsx

@@ -642,7 +642,7 @@ class ImageView extends Component {
     }
   }
 
-  updateChannels(viewer, uuid, channels, maskOrder) {
+  updateChannels(viewer, uuid, channels, maskOrder, maskOpacity) {
     const { world } = viewer;
     const ids = new Set(channels.keys());
     // Only check the order of masks that have an associated id map
@@ -690,6 +690,7 @@ class ImageView extends Component {
         }
         const mask_map_id_0 = maskMapOrder[0];
         const tiledImage = this.getTiledImageById(mask_map_id_0);
+        tiledImage.setOpacity(maskOpacity);
         const {many_channels} = tiledImage.source || {};
         if (!many_channels) {
           return;
@@ -738,8 +739,8 @@ class ImageView extends Component {
     // After first render
     if (viewer !== undefined) {
       const { uuid } = this.props.img;
-      const { channels, maskOrder } = this.props;
-      this.updateChannels(viewer, uuid, channels, maskOrder);
+      const { channels, maskOrder, maskOpacity } = this.props;
+      this.updateChannels(viewer, uuid, channels, maskOrder, maskOpacity);
     }
     const overlay_divs = [...Array(100).keys()].map((o,i) => {
       const el = "overlay-" + i;

src/containers/repo.jsx

@@ -423,6 +423,7 @@ class Repo extends Component {
           label: v,
         }];
       })),
+      maskOpacity: 0.5,
       chanRender: defaultChanRender
     };
 
@@ -500,6 +501,7 @@ class Repo extends Component {
     this.labelRGBA = this.labelRGBA.bind(this);
     this.defaultStory = this.defaultStory.bind(this);
     this.handleUpdateAllMasks = this.handleUpdateAllMasks.bind(this);
+    this.handleOpacityChange = this.handleOpacityChange.bind(this);
     this.handleUpdateMask = this.handleUpdateMask.bind(this);
     this.handleMaskChange = this.handleMaskChange.bind(this);
     this.handleMaskInsert = this.handleMaskInsert.bind(this);
@@ -1062,6 +1064,11 @@ class Repo extends Component {
     this.setState(handleUpdateAllMasksPure(this.state, newMask));
   }
 
+  handleOpacityChange(value) {
+    // use setState to assign this value to maskOpacity
+    this.setState({maskOpacity: value});
+  }
+
   handleUpdateMask(newMaskParams, clear=false) {
     this.setState(handleUpdateMaskPure(this.state, newMaskParams, clear));
   }
@@ -1579,14 +1586,15 @@ class Repo extends Component {
     this.setState(newState);
   }
 
-  createMaskOutput({masks}) {
+  createMaskOutput({masks, maskOpacity}) {
     return Array.from(masks.values()).map(v => {
       const channels = [{
           'state_label': v.map_state || 'State',
           'original_label': v.cache_name || '',
           'color': rgbToHex(v.color),
           'label': v.name,
-          'ids': v.map_ids
+          'ids': v.map_ids,
+          'opacity': maskOpacity
       }];
       let group_out = {
         'label': v.name,
@@ -1715,10 +1723,10 @@ class Repo extends Component {
 
   apiRender(render_url) {
     const{groups, masks} = this.state;
-    const {rgba, imageFile} = this.state;
+    const {rgba, imageFile, maskOpacity} = this.state;
     const {root_dir, out_name} = this.state;
     const {stories, chanLabel} = this.state;
-    const mask_output = this.createMaskOutput({masks});
+    const mask_output = this.createMaskOutput({masks, maskOpacity});
     const group_output = this.createGroupOutput({groups, chanLabel, rgba});
     const story_output = this.createWaypoints({stories, groups, masks});
     return fetch('http://'+render_url, {
@@ -1820,7 +1828,7 @@ class Repo extends Component {
 
   async save(is_autosave=false, save_as=false) {
 
-    let {groups, masks, saving, rgba} = this.state;
+    let {groups, masks, saving, rgba, maskOpacity} = this.state;
     const {stories, chanLabel} = this.state;
     const {img, session} = this.state;
     if (saving) {
@@ -1834,7 +1842,7 @@ class Repo extends Component {
 
     let minerva = this.props.env === 'cloud';
 
-    const mask_output = this.createMaskOutput({masks});
+    const mask_output = this.createMaskOutput({masks, maskOpacity});
     const group_output = this.createGroupOutput({groups, chanLabel, rgba});
     const story_output = this.createWaypoints({stories, groups, masks});
     const story_definition = this.createStoryDefinition(story_output, group_output);
@@ -2356,7 +2364,7 @@ class Repo extends Component {
   }
 
   preview() {
-    let {groups, chanLabel, stories, masks, rgba} = this.state;
+    let {groups, chanLabel, stories, masks, rgba, maskOpacity} = this.state;
     const group_output = this.createGroupOutput({groups, chanLabel, rgba});
     const story_output = this.createWaypoints({stories, groups, masks});
     const story_definition = this.createStoryDefinition(story_output, group_output);
@@ -2559,6 +2567,7 @@ class Repo extends Component {
         handleViewport={ this.handleViewport }
         interactor={ this.interactor }
         rotation={this.state.rotation}
+        maskOpacity={this.state.maskOpacity}
       />
     }
 
@@ -2937,6 +2946,8 @@ class Repo extends Component {
               isMaskMapLoading={this.state.isMaskMapLoading}
               invalidMaskMap={this.state.invalidMaskMap}
               toggleTextTab={this.toggleTextTab}
+              maskOpacity={this.state.maskOpacity}
+              handleOpacityChange={this.handleOpacityChange}
             />
             <Confirm
               header="Save file location"