fix(widgets): fix paintWidget example and small bugs

BREAKING CHANGE: SplineWidget's handles now scale up automatically.

Author: tomsuchel

Sources/Widgets/Widgets3D/PaintWidget/example/index.js

@@ -298,8 +298,6 @@ reader
     image.imageMapper.onModified(update);
     // trigger initial update
     update();
-
-    //    readyAll();
   });
 
 // register readyAll to resize event
@@ -370,14 +368,11 @@ function initializeHandle(handle) {
   handle.onStartInteractionEvent(() => {
     painter.startStroke();
   });
-
   handle.onEndInteractionEvent(() => {
     painter.endStroke();
   });
 }
 
-initializeHandle(scene.paintHandle);
-
 scene.paintHandle.onStartInteractionEvent(() => {
   painter.startStroke();
   painter.addPoint(widgets.paintWidget.getWidgetState().getTrueOrigin());
@@ -386,82 +381,91 @@ scene.paintHandle.onStartInteractionEvent(() => {
 scene.paintHandle.onInteractionEvent(() => {
   painter.addPoint(widgets.paintWidget.getWidgetState().getTrueOrigin());
 });
+initializeHandle(scene.paintHandle);
 
-initializeHandle(scene.rectangleHandle);
-
-scene.rectangleHandle.onInteractionEvent(() => {
-  const rectangleHandle = scene.rectangleHandle
-    .getWidgetState()
-    .getRectangleHandle();
+scene.rectangleHandle.onEndInteractionEvent((pointPlaced) => {
+  if (pointPlaced) {
+    const rectangleHandle = scene.rectangleHandle
+      .getWidgetState()
+      .getRectangleHandle();
 
-  painter.paintRectangle(
-    rectangleHandle.getOrigin(),
-    rectangleHandle.getCorner()
-  );
+    painter.paintRectangle(
+      rectangleHandle.getOrigin(),
+      rectangleHandle.getCorner()
+    );
+  }
 });
+initializeHandle(scene.rectangleHandle);
 
-initializeHandle(scene.ellipseHandle);
-
-scene.ellipseHandle.onInteractionEvent(() => {
-  const center = scene.ellipseHandle
-    .getWidgetState()
-    .getEllipseHandle()
-    .getOrigin();
-  const point2 = scene.ellipseHandle
-    .getWidgetState()
-    .getPoint2Handle()
-    .getOrigin();
-
-  const corner = [
-    center[0] - point2[0],
-    center[1] - point2[1],
-    center[2] - point2[2],
-  ];
-  painter.paintEllipse(center, corner);
+scene.ellipseHandle.onEndInteractionEvent((pointPlaced) => {
+  if (pointPlaced) {
+    const center = scene.ellipseHandle
+      .getWidgetState()
+      .getEllipseHandle()
+      .getOrigin();
+    const point2 = scene.ellipseHandle
+      .getWidgetState()
+      .getPoint2Handle()
+      .getOrigin();
+
+    let corner = [];
+
+    if (
+      scene.ellipseHandle.isBehaviorActive(
+        BehaviorCategory.RATIO,
+        ShapeBehavior[BehaviorCategory.RATIO].FIXED
+      )
+    ) {
+      const radius = vec3.distance(center, point2);
+      corner = [radius, radius, radius];
+    } else {
+      corner = [
+        center[0] - point2[0],
+        center[1] - point2[1],
+        center[2] - point2[2],
+      ];
+    }
+
+    painter.paintEllipse(center, corner);
+  }
 });
+initializeHandle(scene.ellipseHandle);
 
-initializeHandle(scene.circleHandle);
-
-scene.circleHandle.onInteractionEvent(() => {
-  const center = scene.circleHandle
-    .getWidgetState()
-    .getEllipseHandle()
-    .getOrigin();
-  const point2 = scene.circleHandle
-    .getWidgetState()
-    .getPoint1Handle()
-    .getOrigin();
-
-  const radius = vec3.distance(center, point2);
+scene.circleHandle.onEndInteractionEvent((pointPlaced) => {
+  if (pointPlaced) {
+    const center = scene.circleHandle
+      .getWidgetState()
+      .getEllipseHandle()
+      .getOrigin();
+    const point2 = scene.circleHandle
+      .getWidgetState()
+      .getPoint2Handle()
+      .getOrigin();
 
-  const corner = [radius, radius, radius];
-  painter.paintEllipse(center, corner);
-});
+    const radius = vec3.distance(center, point2);
 
-scene.splineHandle.onStartInteractionEvent(() => {
-  painter.startStroke();
+    const corner = [radius, radius, radius];
+    painter.paintEllipse(center, corner);
+  }
 });
+initializeHandle(scene.circleHandle);
 
 scene.splineHandle.onEndInteractionEvent(() => {
   const points = scene.splineHandle.getPoints();
   painter.paintPolygon(points);
-  painter.endStroke();
 
   scene.splineHandle.reset();
   scene.splineHandle.updateRepresentationForRender();
   scene.widgetManager.grabFocus(widgets.splineWidget);
 });
-
-scene.polygonHandle.onStartInteractionEvent(() => {
-  painter.startStroke();
-});
+initializeHandle(scene.splineHandle);
 
 scene.polygonHandle.onEndInteractionEvent(() => {
   const points = scene.polygonHandle.getPoints();
   painter.paintPolygon(points);
-  painter.endStroke();
 
   scene.polygonHandle.reset();
   scene.polygonHandle.updateRepresentationForRender();
   scene.widgetManager.grabFocus(widgets.polygonWidget);
 });
+initializeHandle(scene.polygonHandle);

Sources/Widgets/Widgets3D/ShapeWidget/behavior.js

@@ -526,7 +526,7 @@ export default function widgetBehavior(publicAPI, model) {
       } else {
         publicAPI.placePoint2(model.point2Handle.getOrigin());
         publicAPI.invokeInteractionEvent();
-        publicAPI.invokeEndInteractionEvent();
+        publicAPI.invokeEndInteractionEvent(true);
       }
 
       return macro.EVENT_ABORT;
@@ -558,7 +558,7 @@ export default function widgetBehavior(publicAPI, model) {
       model.apiSpecificRenderWindow.setCursor('pointer');
       model.widgetState.deactivate();
       model.interactor.cancelAnimation(publicAPI);
-      publicAPI.invokeEndInteractionEvent();
+      publicAPI.invokeEndInteractionEvent(true);
 
       return macro.EVENT_ABORT;
     }
@@ -587,7 +587,7 @@ export default function widgetBehavior(publicAPI, model) {
 
         if (distance > maxDistance || publicAPI.isDraggingForced()) {
           publicAPI.invokeInteractionEvent();
-          publicAPI.invokeEndInteractionEvent();
+          publicAPI.invokeEndInteractionEvent(true);
 
           if (publicAPI.getResetAfterPointPlacement()) {
             publicAPI.reset();
@@ -608,7 +608,7 @@ export default function widgetBehavior(publicAPI, model) {
   publicAPI.handleKeyDown = ({ key }) => {
     if (key === 'Escape') {
       if (model.hasFocus) {
-        publicAPI.invokeEndInteractionEvent();
+        publicAPI.invokeEndInteractionEvent(false);
         publicAPI.reset();
         publicAPI.loseFocus();
       }

Sources/Widgets/Widgets3D/SplineWidget/behavior.js

@@ -356,7 +356,6 @@ export default function widgetBehavior(publicAPI, model) {
       model.activeState.activate();
       model.activeState.setVisible(true);
       model.interactor.requestAnimation(publicAPI);
-      publicAPI.invokeStartInteractionEvent();
       updateHandlesSize();
     }
 

Sources/Widgets/Widgets3D/SplineWidget/index.js

@@ -38,6 +38,9 @@ function vtkSplineWidget(publicAPI, model) {
           {
             builder: vtkSphereHandleRepresentation,
             labels: ['handles', 'moveHandle'],
+            initialValues: {
+              scaleInPixels: true,
+            },
           },
           {
             builder: vtkSplineContextRepresentation,