Merge pull request #175 from PaulHax/set-opacity

feat(viewer): add opacityPoints event to image actor

.changeset/neat-kids-study.md

@@ -0,0 +1,8 @@
+---
+'@itk-viewer/transfer-function-editor': patch
+'@itk-viewer/element': patch
+'@itk-viewer/viewer': patch
+'@itk-viewer/vtkjs': patch
+---
+
+Add opacityPoints event to image actor

packages/element/examples/view-2d.ts

@@ -16,5 +16,12 @@ document.addEventListener('DOMContentLoaded', async function () {
     .getSnapshot()
     .context.viewports[0].getSnapshot()
     .context.views[0].getSnapshot().context.imageActor;
+
   imageActor.send({ type: 'colorMap', colorMap: '2hot', component: 0 });
+
+  imageActor.send({
+    type: 'colorRange',
+    range: [300, 1500],
+    component: 0,
+  });
 });

packages/element/examples/view-3d.ts

@@ -15,5 +15,21 @@ document.addEventListener('DOMContentLoaded', async function () {
     .getSnapshot()
     .context.viewports[0].getSnapshot()
     .context.views[0].getSnapshot().context.imageActor;
+
   imageActor.send({ type: 'colorMap', colorMap: '2hot', component: 0 });
+
+  imageActor.send({
+    type: 'opacityPoints',
+    points: [
+      [60, 0.1],
+      [100, 0.9],
+      [220, 0.2],
+    ],
+    component: 0,
+  });
+  imageActor.send({
+    type: 'colorRange',
+    range: [60, 220],
+    component: 0,
+  });
 });

packages/transfer-function-editor/examples/vtk-js/main.ts

@@ -4,7 +4,6 @@ import {
   TransferFunctionEditor,
   getNodes,
 } from '../../lib/TransferFunctionEditor';
-import { Point } from '../../lib/Point';
 
 const UPDATE_TF_DELAY = 50;
 const DATA_RANGE = [0, 255];
@@ -33,10 +32,7 @@ if (editorHome) {
   editor.eventTarget.addEventListener(
     'updated',
     throttle((e) => {
-      const points = (<CustomEvent>e).detail as Point[];
-      const arrayPoints = points.map((p) => [p.x, p.y]) as Array<
-        [number, number]
-      >;
+      const arrayPoints = (<CustomEvent>e).detail as Array<[number, number]>;
       const nodes = getNodes(DATA_RANGE, arrayPoints);
       opacityFunction.setNodes(nodes);
 

packages/transfer-function-editor/lib/PiecewiseUtils.ts

@@ -1,5 +1,7 @@
 import { extendPoints } from './Points';
 
+type ReadOnlyPoints = Array<readonly [number, number]>;
+
 export type ChartStyle = {
   lineWidth: number;
   strokeStyle: string;
@@ -101,11 +103,16 @@ export const updateColorCanvas = (
   return workCanvas;
 };
 
-export const windowPointsForSort = (points: [number, number][]) => {
+export const windowPointsForSort = (points: ReadOnlyPoints) => {
   const windowedPoints = extendPoints(points);
   // avoid unstable Array.sort issues
-  windowedPoints[0][0] -= 1e-8;
-  windowedPoints[windowedPoints.length - 1][0] += 1e-8;
+  const firstPoint = windowedPoints[0];
+  windowedPoints[0] = [firstPoint[0] - 1e-8, firstPoint[1]];
+  const lastPoint = windowedPoints[windowedPoints.length - 1];
+  windowedPoints[windowedPoints.length - 1] = [
+    lastPoint[0] + 1e-8,
+    lastPoint[1],
+  ];
   return windowedPoints;
 };
 
@@ -135,9 +142,7 @@ export function rgbaToHexa(rgba: Array<number>) {
   return `#${hexa.join('')}`;
 }
 
-const findY1Intercepts = (
-  points: Array<readonly [number, number]>,
-): number[] => {
+const findY1Intercepts = (points: ReadOnlyPoints): number[] => {
   const xPositions: number[] = [];
 
   for (let i = 0; i < points.length - 1; i++) {
@@ -162,11 +167,10 @@ const findY1Intercepts = (
 
 // Returns vtk.js piecewise function nodes
 // rescaled into data range space.
-export const getNodes = (
-  range: readonly number[],
-  points: Array<readonly [number, number]>,
-) => {
+export const getNodes = (range: readonly number[], points: ReadOnlyPoints) => {
   const xPositions = findY1Intercepts(points);
+  // vtk.js volume voxels get 0 opacity if y > 1
+  // So insert y=1 intercept points
   const withIntercepts = [...points, ...xPositions.map((x) => [x, 1])];
 
   const windowedPoints = windowPointsForSort(

packages/transfer-function-editor/lib/Points.ts

@@ -3,7 +3,10 @@ import { ArrayPoint } from './utils';
 
 // if clampEnds is true, add points at ends with y = 0
 // else extend left and right points to 0 and 1 with left/right y value
-export const extendPoints = (points: [number, number][], clampEnds = false) => {
+export const extendPoints = (
+  points: (readonly [number, number])[],
+  clampEnds = false,
+) => {
   if (points.length === 0) {
     return [
       [0, 1],

packages/viewer/src/image.ts

@@ -70,14 +70,24 @@ export const image = setup({
     events:
       | { type: 'getWorker'; receiver: AnyActorRef }
       | { type: 'builtImage'; builtImage: BuiltImage }
+      | {
+          type: 'colorRange';
+          range: readonly [number, number];
+          component: number;
+        }
       | {
           type: 'normalizedColorRange';
           range: readonly [number, number];
           component: number;
         }
+      | {
+          type: 'opacityPoints';
+          points: Point[];
+          component: number;
+        }
       | {
           type: 'normalizedOpacityPoints';
-          points: [number, number][];
+          points: Point[];
           component: number;
         }
       | { type: 'colorMap'; colorMap: string; component: number };
@@ -90,6 +100,16 @@ export const image = setup({
         });
       },
     }),
+    updateNormalizedColorRanges: assign({
+      normalizedColorRanges: ({ context }) => {
+        return context.dataRanges.map((dataRange, component) => {
+          return computeNormalizedColorRange(
+            dataRange,
+            context.colorRanges[component],
+          );
+        });
+      },
+    }),
     updateOpacityPoints: assign({
       opacityPoints: ({ context: { dataRanges, normalizedOpacityPoints } }) => {
         return dataRanges.map((range, component) => {
@@ -100,6 +120,16 @@ export const image = setup({
         });
       },
     }),
+    updateNormalizedOpacityPoints: assign({
+      normalizedOpacityPoints: ({ context }) => {
+        return context.dataRanges.map((dataRange, component) => {
+          return computeNormalizedOpacityPoints(
+            dataRange,
+            context.opacityPoints[component],
+          );
+        });
+      },
+    }),
     ensureComponentDefaults: assign({
       colorMaps: ({ context: { dataRanges, colorMaps } }) => {
         const components = Array.from(
@@ -151,36 +181,42 @@ export const image = setup({
               },
             }),
             assign({
-              normalizedColorRanges: ({ context }) => {
+              colorRanges: ({ context }) => {
+                // init color ranges if not set
                 return context.dataRanges.map((dataRange, component) => {
-                  if (!context.normalizedColorRanges[component])
-                    return NORMALIZED_RANGE_DEFAULT;
-                  // if data range changes
-                  // scale normalizedColorRange so colorRanges doesn't change
-                  const colorRange = context.colorRanges[component];
-                  return computeNormalizedColorRange(dataRange, colorRange);
+                  if (context.colorRanges[component])
+                    return context.colorRanges[component];
+                  return computeColorRange(dataRange, NORMALIZED_RANGE_DEFAULT);
                 });
               },
-              normalizedOpacityPoints: ({ context }) => {
+              opacityPoints: ({ context }) => {
+                // init opacity points if not set
                 return context.dataRanges.map((dataRange, component) => {
-                  if (!context.normalizedOpacityPoints[component])
-                    return NORMALIZED_OPACITY_POINTS_DEFAULT;
-                  // if data range changes
-                  // scale normalizedPoints so opacityPoints doesn't change
-                  const points = context.opacityPoints[component];
-                  const normalized = computeNormalizedOpacityPoints(
+                  if (context.opacityPoints[component])
+                    return context.opacityPoints[component];
+                  return computeOpacityPoints(
                     dataRange,
-                    points,
+                    NORMALIZED_OPACITY_POINTS_DEFAULT,
                   );
-                  return normalized;
                 });
               },
             }),
-            'updateColorRanges',
-            'updateOpacityPoints',
+            'updateNormalizedColorRanges',
+            'updateNormalizedOpacityPoints',
             'ensureComponentDefaults',
           ],
         },
+        colorRange: {
+          actions: [
+            assign({
+              colorRanges: ({ context, event }) => {
+                context.colorRanges[event.component] = event.range;
+                return [...context.colorRanges];
+              },
+            }),
+            'updateNormalizedColorRanges',
+          ],
+        },
         normalizedColorRange: {
           actions: [
             assign({
@@ -192,6 +228,17 @@ export const image = setup({
             'updateColorRanges',
           ],
         },
+        opacityPoints: {
+          actions: [
+            assign({
+              opacityPoints: ({ context, event }) => {
+                context.opacityPoints[event.component] = event.points;
+                return [...context.opacityPoints];
+              },
+            }),
+            'updateNormalizedOpacityPoints',
+          ],
+        },
         normalizedOpacityPoints: {
           actions: [
             assign({

packages/vtkjs/src/view-3d-vtkjs.ts

@@ -194,8 +194,7 @@ const createImplementation = () => {
       ) => {
         if (!actor) return; // setContainer not called yet.  Thats OK because setContainer event will trigger imageSnapshot.
         const actorProperty = actor.getProperty();
-        const { colorRanges, colorMaps, normalizedOpacityPoints, dataRanges } =
-          state.context;
+        const { colorRanges, colorMaps, opacityPoints } = state.context;
 
         colorMaps.forEach((colorMap, component) => {
           const colorFunc = actorProperty.getRGBTransferFunction(component);
@@ -216,9 +215,16 @@ const createImplementation = () => {
           ct.setMappingRange(...range);
         });
 
-        normalizedOpacityPoints.forEach((points, component) => {
+        opacityPoints.forEach((points, component) => {
+          const xValues = points.map((p) => p[0]);
+          const range = [Math.min(...xValues), Math.max(...xValues)];
+          const delta = range[1] - range[0];
+          const min = range[0];
+          const normalizedPoints = points.map(
+            ([x, y]) => [(x - min) / delta, y] as const,
+          );
+          const nodes = getNodes(range, normalizedPoints);
           const opacityFunc = actorProperty.getScalarOpacity(component);
-          const nodes = getNodes(dataRanges[component], points);
           opacityFunc.setNodes(nodes);
         });