@cornerstonejs/tools 1.1.4 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/tools",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "Cornerstone3D Tools",
   "main": "dist/umd/index.js",
   "types": "dist/esm/index.d.ts",
@@ -26,7 +26,7 @@
     "webpack:watch": "webpack --mode development --progress --watch  --config ./.webpack/webpack.dev.js"
   },
   "dependencies": {
-    "@cornerstonejs/core": "^1.1.4",
+    "@cornerstonejs/core": "^1.1.6",
     "lodash.clonedeep": "4.5.0",
     "lodash.get": "^4.4.2"
   },
@@ -49,5 +49,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "bd0b4c3bbbcf1646a9dffcbd6a26794dcd292cfb"
+  "gitHead": "cd4bc2f52ab0963cfa024eb975c5cac955067400"
 }

package/src/eventListeners/mouse/mouseDownListener.ts

@@ -22,6 +22,9 @@ const { MOUSE_DOWN, MOUSE_DOWN_ACTIVATE, MOUSE_CLICK, MOUSE_UP, MOUSE_DRAG } =
 //
 const DOUBLE_CLICK_TOLERANCE_MS = 400;
 
+// This tolerance is how long to accept a secondary button down
+const MULTI_BUTTON_TOLERANCE_MS = 150;
+
 // A drag (projected distance) during the double click timeout that is greater than this
 // value will cancel the timeout and suppress any double click that might occur.
 // This tolerance is particularly important on touch devices where some movement
@@ -124,17 +127,28 @@ const doubleClickState: IDoubleClickState = {
  * @private
  */
 function mouseDownListener(evt: MouseEvent) {
-  // Ignore any mouse down during the double click timeout because only
-  // the first mouse down has the potential of being handled.
   if (doubleClickState.doubleClickTimeout) {
+    // A second identical click will be a double click event, so ignore it
+    if (evt.buttons === doubleClickState.mouseDownEvent.buttons) return;
+
+    // Record the second button or the changed button event as the initial
+    // button down state so that the multi-button event can be detected
+    doubleClickState.mouseDownEvent = evt;
+
+    // If second button is added, then ensure double click timeout is terminated
+    // and do not handle three or more button gestures.
+    _doStateMouseDownAndUp();
     return;
   }
 
-  // Only left single button click can be doubled up, so fire immediately
-  // on anything except left double click.
+  // Handle multi-button clicks by adding a delay before handling them.
+  // Double clicks (left button only) physically take the user longer, so
+  // use a longer timeout, and for multi-button at the same time, the clicks
+  // are done at the same time by the user, just the system perceives them
+  // separately, so have a short timeout to allow catching both buttons.
   doubleClickState.doubleClickTimeout = setTimeout(
     _doStateMouseDownAndUp,
-    evt.buttons === 1 ? DOUBLE_CLICK_TOLERANCE_MS : 0
+    evt.buttons === 1 ? DOUBLE_CLICK_TOLERANCE_MS : MULTI_BUTTON_TOLERANCE_MS
   );
 
   // First mouse down of a potential double click. So save it and start

package/src/tools/annotation/CobbAngleTool.ts

@@ -1,3 +1,4 @@
+import { vec3 } from 'gl-matrix';
 import { Events } from '../../enums';
 import {
   getEnabledElement,
@@ -381,6 +382,52 @@ class CobbAngleTool extends AnnotationTool {
     this.isDrawing = false;
   };
 
+  /**
+   * Handles the mouse down for all points that follow the very first mouse down.
+   * The very first mouse down is handled by addAnnotation.
+   * This method ensures that the state of the tool is correct for the drawing of the second line segment.
+   * In particular it ensures that the second segment can be created via a mouse down and drag.
+   */
+  _mouseDownCallback = (
+    evt: EventTypes.MouseUpEventType | EventTypes.MouseClickEventType
+  ) => {
+    const { annotation, handleIndex } = this.editData;
+    const eventDetail = evt.detail;
+    const { element, currentPoints } = eventDetail;
+    const worldPos = currentPoints.world;
+    const { data } = annotation;
+
+    if (handleIndex === 1) {
+      // This is the mouse down for the second point of the first segment.
+      // The mouse up takes care of adding the first point of the second segment.
+      data.handles.points[1] = worldPos;
+      this.editData.hasMoved =
+        data.handles.points[1][0] !== data.handles.points[0][0] ||
+        data.handles.points[1][1] !== data.handles.points[0][0];
+      return;
+    }
+
+    if (handleIndex === 3) {
+      // This is the mouse down for the second point of the second segment (i.e. the last point)
+      data.handles.points[3] = worldPos;
+      this.editData.hasMoved =
+        data.handles.points[3][0] !== data.handles.points[2][0] ||
+        data.handles.points[3][1] !== data.handles.points[2][0];
+
+      this.angleStartedNotYetCompleted = false;
+      return;
+    }
+
+    // This is the first mouse down of the first point of the second line segment.
+    // It is as if we have not moved yet because Cobb Angle has two, disjoint sections, each with its own move.
+    this.editData.hasMoved = false;
+    hideElementCursor(element);
+
+    // Add the last segment points for the subsequent drag/mouse move.
+    data.handles.points[2] = data.handles.points[3] = worldPos;
+    this.editData.handleIndex = data.handles.points.length - 1;
+  };
+
   _mouseDragCallback = (
     evt: EventTypes.MouseDragEventType | EventTypes.MouseMoveEventType
   ) => {
@@ -532,6 +579,10 @@ class CobbAngleTool extends AnnotationTool {
       Events.MOUSE_CLICK,
       this._mouseUpCallback as EventListener
     );
+    element.addEventListener(
+      Events.MOUSE_DOWN,
+      this._mouseDownCallback as EventListener
+    );
 
     // element.addEventListener(Events.TOUCH_END, this._mouseUpCallback)
     // element.addEventListener(Events.TOUCH_DRAG, this._mouseDragCallback)
@@ -556,6 +607,10 @@ class CobbAngleTool extends AnnotationTool {
       Events.MOUSE_CLICK,
       this._mouseUpCallback as EventListener
     );
+    element.removeEventListener(
+      Events.MOUSE_DOWN,
+      this._mouseDownCallback as EventListener
+    );
 
     // element.removeEventListener(Events.TOUCH_END, this._mouseUpCallback)
     // element.removeEventListener(Events.TOUCH_DRAG, this._mouseDragCallback)
@@ -775,20 +830,40 @@ class CobbAngleTool extends AnnotationTool {
       return;
     }
 
-    const worldPos1 = data.handles.points[0];
-    const worldPos2 = data.handles.points[1];
-    const worldPos3 = data.handles.points[2];
-    const worldPos4 = data.handles.points[3];
+    const seg1: [Types.Point3, Types.Point3] = [null, null];
+    const seg2: [Types.Point3, Types.Point3] = [null, null];
+    let minDist = Number.MAX_VALUE;
+
+    // Order the endpoints of each line segment such that seg1[1] and seg2[0]
+    // are the closest (Euclidean distance-wise) to each other. Thus
+    // the angle formed between the vectors seg1[1]->seg1[0] and seg2[0]->seg[1]
+    // is calculated.
+    // The assumption here is that the Cobb angle line segments are drawn
+    // such that the segments intersect nearest the segment endpoints
+    // that are closest AND those closest endpoints are the tails of the
+    // vectors used to calculate the angle between the vectors/line segments.
+    for (let i = 0; i < 2; i += 1) {
+      for (let j = 2; j < 4; j += 1) {
+        const dist = vec3.distance(
+          data.handles.points[i],
+          data.handles.points[j]
+        );
+        if (dist < minDist) {
+          minDist = dist;
+          seg1[1] = data.handles.points[i];
+          seg1[0] = data.handles.points[(i + 1) % 2];
+          seg2[0] = data.handles.points[j];
+          seg2[1] = data.handles.points[2 + ((j - 1) % 2)];
+        }
+      }
+    }
 
     const { cachedStats } = data;
     const targetIds = Object.keys(cachedStats);
 
     for (let i = 0; i < targetIds.length; i++) {
       const targetId = targetIds[i];
-      const angle = angleBetweenLines(
-        [worldPos1, worldPos2],
-        [worldPos3, worldPos4]
-      );
+      const angle = angleBetweenLines(seg1, seg2);
 
       cachedStats[targetId] = {
         angle,

package/src/utilities/math/angle/angleBetweenLines.ts

@@ -5,6 +5,8 @@ type Line = [Types.Point3, Types.Point3];
 
 /**
  * It returns the angle between two lines in degrees.
+ * The angle measured is that between the vectors
+ * line1[1]->line1[0] AND line2[0]->line2[1].
  * @param line1 - Line = [p1, p2]
  * @param line2 - Line = [p3, p4]
  * @returns The angle between two lines in degrees.