fix(PaintWidget): use orientation matrix

Kitware · May 26, 2020 · 0f86669 · 0f86669
1 parent e17d83a
commit 0f86669
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 41 deletions.
diff --git a/Sources/Widgets/Widgets3D/PaintWidget/example/index.js b/Sources/Widgets/Widgets3D/PaintWidget/example/index.js
@@ -222,23 +222,6 @@ reader
 
     updateControlPanel(image.imageMapper, data);
 
-    // give axis information to widgets
-    let axis = [0, 0, 0];
-    data.indexToWorldVec3([1, 0, 0], axis);
-    scene.rectangleHandle.setXAxis(axis);
-    scene.ellipseHandle.setXAxis(axis);
-    scene.circleHandle.setXAxis(axis);
-    axis = [0, 0, 0];
-    data.indexToWorldVec3([0, 1, 0], axis);
-    scene.rectangleHandle.setYAxis(axis);
-    scene.ellipseHandle.setYAxis(axis);
-    scene.circleHandle.setYAxis(axis);
-    axis = [0, 0, 0];
-    data.indexToWorldVec3([0, 0, 1], axis);
-    scene.rectangleHandle.setZAxis(axis);
-    scene.ellipseHandle.setZAxis(axis);
-    scene.circleHandle.setZAxis(axis);
-
     scene.circleHandle.setLabelTextCallback((worldBounds, screenBounds) => {
       const center = vtkBoundingBox.getCenter(screenBounds);
       const radius =
@@ -310,9 +293,6 @@ reader
         widgets.polygonWidget.getManipulator().setOrigin(position);
         widgets.polygonWidget.getManipulator().setNormal(normal);
 
-        scene.rectangleHandle.setSlicingMode(slicingMode);
-        scene.ellipseHandle.setSlicingMode(slicingMode);
-        scene.circleHandle.setSlicingMode(slicingMode);
         painter.setSlicingMode(slicingMode);
 
         scene.paintHandle.updateRepresentationForRender();
@@ -365,9 +345,6 @@ document.querySelector('.axis').addEventListener('input', (ev) => {
   const direction = [0, 0, 0];
   direction[sliceMode] = 1;
   scene.paintHandle.getWidgetState().getHandle().setDirection(direction);
-  scene.rectangleHandle.setSlicingMode(sliceMode);
-  scene.ellipseHandle.setSlicingMode(sliceMode);
-  scene.circleHandle.setSlicingMode(sliceMode);
 
   setCamera(sliceMode, scene.renderer, image.data);
   scene.renderWindow.render();
@@ -429,13 +406,13 @@ scene.paintHandle.onInteractionEvent(() => {
 initializeHandle(scene.rectangleHandle);
 
 scene.rectangleHandle.onInteractionEvent(() => {
-  const bounds = scene.rectangleHandle
+  const rectangleHandle = scene.rectangleHandle
     .getWidgetState()
-    .getRectangleHandle()
-    .getBounds();
-  const point1 = [bounds[0], bounds[2], bounds[4]];
-  const point2 = [bounds[1], bounds[3], bounds[5]];
-  painter.paintRectangle(point1, point2);
+    .getRectangleHandle();
+  painter.paintRectangle(
+    rectangleHandle.getOrigin(),
+    rectangleHandle.getCorner()
+  );
 });
 
 initializeHandle(scene.ellipseHandle);

diff --git a/Sources/Widgets/Widgets3D/PaintWidget/index.js b/Sources/Widgets/Widgets3D/PaintWidget/index.js
@@ -1,5 +1,4 @@
 import macro from 'vtk.js/Sources/macro';
-import * as vtkMath from 'vtk.js/Sources/Common/Core/Math';
 import vtkAbstractWidgetFactory from 'vtk.js/Sources/Widgets/Core/AbstractWidgetFactory';
 import vtkCircleContextRepresentation from 'vtk.js/Sources/Widgets/Representations/CircleContextRepresentation';
 import vtkPlaneManipulator from 'vtk.js/Sources/Widgets/Manipulators/PlaneManipulator';
@@ -8,6 +7,8 @@ import vtkStateBuilder from 'vtk.js/Sources/Widgets/Core/StateBuilder';
 
 import { ViewTypes } from 'vtk.js/Sources/Widgets/Core/WidgetManager/Constants';
 
+import { vec3 } from 'gl-matrix';
+
 // ----------------------------------------------------------------------------
 // Widget linked to a view
 // ----------------------------------------------------------------------------
@@ -20,7 +21,9 @@ function widgetBehavior(publicAPI, model) {
 
     model.painting = true;
     const trailCircle = model.widgetState.addTrail();
-    trailCircle.set(model.activeState.get('origin', 'direction', 'scale1'));
+    trailCircle.set(
+      model.activeState.get('origin', 'up', 'right', 'direction', 'scale1')
+    );
     publicAPI.invokeStartInteractionEvent();
     return macro.EVENT_ABORT;
   };
@@ -41,24 +44,34 @@ function widgetBehavior(publicAPI, model) {
       model.activeState &&
       model.activeState.getActive()
     ) {
+      const normal = model.camera.getDirectionOfProjection();
+      const up = model.camera.getViewUp();
+      const right = [];
+      vec3.cross(right, up, normal);
+      model.activeState.setUp(...up);
+      model.activeState.setRight(...right);
+      model.activeState.setDirection(...normal);
+      model.manipulator.setNormal(normal);
+
       const worldCoords = model.manipulator.handleEvent(
         callData,
         model.openGLRenderWindow
       );
 
       if (worldCoords.length) {
         model.widgetState.setTrueOrigin(...worldCoords);
-
-        // offset origin for handle representation
-        const dir = model.activeState.getDirection();
-        vtkMath.normalize(dir);
-        vtkMath.add(worldCoords, dir, worldCoords);
         model.activeState.setOrigin(...worldCoords);
 
         if (model.painting) {
           const trailCircle = model.widgetState.addTrail();
           trailCircle.set(
-            model.activeState.get('origin', 'direction', 'scale1')
+            model.activeState.get(
+              'origin',
+              'up',
+              'right',
+              'direction',
+              'scale1'
+            )
           );
         }
       }
@@ -150,26 +163,26 @@ function vtkPaintWidget(publicAPI, model) {
         'origin',
         'color',
         'scale1',
-        'direction',
+        'orientation',
         'manipulator',
         'visible',
       ],
       name: 'handle',
       initialValues: {
         scale1: model.radius * 2,
         origin: [0, 0, 0],
-        direction: [0, 0, 1],
+        orientation: [1, 0, 0, 0, 1, 0, 0, 0, 1],
         visible: true,
       },
     })
     .addDynamicMixinState({
       labels: ['trail'],
-      mixins: ['origin', 'color', 'scale1', 'direction'],
+      mixins: ['origin', 'color', 'scale1', 'orientation'],
       name: 'trail',
       initialValues: {
         scale1: model.radius * 2,
         origin: [0, 0, 0],
-        direction: [0, 0, 1],
+        orientation: [1, 0, 0, 0, 1, 0, 0, 0, 1],
       },
     })
     .build();