Merge pull request #732 from PaulHax/tf-editor-updgrade

Move Scale Bar to upper left.  TranferFunctionEditor upgrade for axis labels.

package.json

@@ -44,7 +44,7 @@
     "itk-image-io": "^1.0.0-b.84",
     "itk-mesh-io": "^1.0.0-b.84",
     "itk-viewer-color-maps": "^1.2.0",
-    "itk-viewer-transfer-function-editor": "^1.5.0",
+    "itk-viewer-transfer-function-editor": "^1.6.0",
     "itk-wasm": "^1.0.0-b.83",
     "mobx": "^5.15.7",
     "mousetrap": "^1.6.5",

src/Rendering/VTKJS/Images/mapToPiecewiseFunctionNodes.js

@@ -1,15 +1,4 @@
-import { windowPointsForSort } from 'itk-viewer-transfer-function-editor'
-
-const getNodes = (range, points) => {
-  const delta = range[1] - range[0]
-  const windowedPoints = windowPointsForSort(points)
-  return windowedPoints.map(([x, y]) => ({
-    x: range[0] + delta * x,
-    y,
-    midpoint: 0.5,
-    sharpness: 0,
-  }))
-}
+import { getNodes } from 'itk-viewer-transfer-function-editor'
 
 // grab head and tail or fallback to data range if 1 or less points
 const getRange = nodes =>

src/Rendering/VTKJS/vtk/ItkVtkViewProxy.js

@@ -19,7 +19,7 @@ export const VOLUME_DIFFUSE_DEFAULT = 1.0
 export const VOLUME_AMBIENT_DEFAULT = 0.4
 
 const CursorCornerAnnotation =
-  '<table class="corner-annotation" style="margin-left: 0;"><tr><td style="margin-left: auto; margin-right: 0;">Index:</td><td>${iIndex},</td><td>${jIndex},</td><td>${kIndex}</td></tr><tr><td style="margin-left: auto; margin-right: 0;">Position:</td><td>${xPosition},</td><td>${yPosition},</td><td>${zPosition}</td></tr><tr><td style="margin-left: auto; margin-right: 0;"">Value:</td><td style="text-align:center;" colspan="3">${value}</td></tr><tr ${annotationLabelStyle}><td style="margin-left: auto; margin-right: 0;">Label:</td><td style="text-align:center;" colspan="3">${annotation}</td></tr></table>'
+  '<table class="corner-annotation" style="margin-left: auto; margin-right: 6px; margin-top: 2em;"><tr><td style="margin-left: auto; margin-right: 0;">Index:</td><td>${iIndex},</td><td>${jIndex},</td><td>${kIndex}</td></tr><tr><td style="margin-left: auto; margin-right: 0;">Position:</td><td>${xPosition},</td><td>${yPosition},</td><td>${zPosition}</td></tr><tr><td style="margin-left: auto; margin-right: 0;"">Value:</td><td style="text-align:center;" colspan="3">${value}</td></tr><tr ${annotationLabelStyle}><td style="margin-left: auto; margin-right: 0;">Label:</td><td style="text-align:center;" colspan="3">${annotation}</td></tr></table>'
 
 const { vtkErrorMacro } = macro
 
@@ -623,8 +623,8 @@ function ItkVtkViewProxy(publicAPI, model) {
 
   model.scaleBarCanvas = document.createElement('canvas')
   model.scaleBarCanvas.style.position = 'absolute'
-  model.scaleBarCanvas.style.left = '50%'
-  model.scaleBarCanvas.style.bottom = '15.0%'
+  model.scaleBarCanvas.style.right = '3em'
+  model.scaleBarCanvas.style.top = '12px'
   model.scaleBarCanvas.style.width = '100px'
   model.scaleBarCanvas.style.height = '30px'
   model.scaleBarCanvas.width = 100 * window.devicePixelRatio

src/UI/Layers/createLayersUIMachine.js

@@ -205,14 +205,17 @@ const assignImageContext = assign({
       if (!actorContext.piecewiseFunctionPoints.has(component)) {
         // Assign default piecewiseFunction
         const points = context.use2D
-          ? [
-              [0, 1],
-              [1, 1],
-            ]
+          ? [[0.5, 1]]
           : [
               [0, 0],
               [0.9, 0.9],
             ]
+        if (context.use2D && components === 1) {
+          // For 2D ImageMapper, if multiple components,
+          // opacity function sets component contribution factor.
+          // If just 1 component, opacity function is irrelevant.
+          points.length = 0
+        }
         actorContext.piecewiseFunctionPoints.set(component, points)
       }
       actorContext.colorRanges.set(component, [0.2, 0.8])