feat: 3 click plot draw (#376)

* feat: 3 click plot draw * build: version bump * Update docs --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
dvisionlab · Jul 22, 2024 · 5a3016b · 5a3016b
1 parent 0366a0c
commit 5a3016b
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -8,9 +8,9 @@
 
 ## Dicom Image Toolkit for CornerstoneJS
 
-### Current version: 2.5.14
+### Current version: 2.5.15
 
-### Latest Published Release: 2.5.14
+### Latest Published Release: 2.5.15
 
 This library provides common DICOM functionalities to be used in web-applications: it's wrapper that simplifies the use of cornerstone-js environment.
 

diff --git a/dist/imaging/tools/custom/LengthPlotTool.d.ts b/dist/imaging/tools/custom/LengthPlotTool.d.ts
@@ -88,6 +88,13 @@ export default class LengthPlotTool extends BaseAnnotationTool {
         offset: number;
     };
     constructor(props?: {});
+    /**
+     * handles Mouse Up listener (to create the final plot)
+     * @method
+     * @name setupPlot
+     * @returns {void}
+     */
+    handleClick(): void;
     /**
      * handles Mouse Up listener (to create the final plot)
      * @method
@@ -99,10 +106,10 @@ export default class LengthPlotTool extends BaseAnnotationTool {
      * allows to change the offset between the three lines
      * @method
      * @name changeOffset
-     * @param {WheelEvent} evt
+     * @param {MouseEvent} evt
      * @returns {void}
      */
-    changeOffset(evt: WheelEvent): void;
+    changeOffset(evt: MouseEvent): void;
     /**
      * Creates new measurement on click
      * @method
@@ -164,10 +171,10 @@ export default class LengthPlotTool extends BaseAnnotationTool {
      * Renders the data (new line/modified line)
      * @method
      * @name updateCachedStats
-     * @param {ToolMouseEvent | WheelEvent} evt
+     * @param {ToolMouseEvent | MouseEvent} evt
      * @returns {void}
      */
-    renderToolData(evt: ToolMouseEvent | WheelEvent): void;
+    renderToolData(evt: ToolMouseEvent | MouseEvent): void;
     /**
      * Retrieves the points along the line
      * @method

diff --git a/dist/larvitar.js b/dist/larvitar.js
diff --git a/dist/larvitar.js.map b/dist/larvitar.js.map
diff --git a/docs/documentation/index.html b/docs/documentation/index.html
@@ -74,8 +74,8 @@ <h3> </h3>
 <h1 id="larvitar">Larvitar</h1>
 <p><a href="https://github.com/dvisionlab/Larvitar"><img src="https://img.shields.io/badge/dynamic/json.svg?label=type-coverage&amp;prefix=%E2%89%A5&amp;suffix=%25&amp;query=$.typeCoverage.atLeast&amp;uri=https%3A%2F%2Fraw.githubusercontent.com%2Fplantain-00%2Ftype-coverage%2Fmaster%2Fpackage.json" alt="type-coverage"></a></p>
 <h2 id="dicom-image-toolkit-for-cornerstonejs">Dicom Image Toolkit for CornerstoneJS</h2>
-<h3 id="current-version%3A-2.5.14">Current version: 2.5.14</h3>
-<h3 id="latest-published-release%3A-2.5.14">Latest Published Release: 2.5.14</h3>
+<h3 id="current-version%3A-2.5.15">Current version: 2.5.15</h3>
+<h3 id="latest-published-release%3A-2.5.15">Latest Published Release: 2.5.15</h3>
 <p>This library provides common DICOM functionalities to be used in web-applications: it's wrapper that simplifies the use of cornerstone-js environment.</p>
 <h2 id="features%3A">Features:</h2>
 <ul>

diff --git a/docs/examples/larvitar.js b/docs/examples/larvitar.js
diff --git a/imaging/tools/custom/LengthPlotTool.ts b/imaging/tools/custom/LengthPlotTool.ts
@@ -151,7 +151,6 @@ export default class LengthPlotTool extends BaseAnnotationTool {
     this.borderLeft = 0;
     this.evt;
     this.context;
-    this.wheelactive = false;
     this.currentTarget = null;
     this.fixedOffset = 0;
     this.theta = null;
@@ -160,6 +159,21 @@ export default class LengthPlotTool extends BaseAnnotationTool {
     this.setupPlot = this.setupPlot.bind(this);
     this.changeOffset = this.changeOffset.bind(this);
     this.throttledUpdateCachedStats = throttle(this.updateCachedStats, 110);
+    this.lastY = 0;
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  /**
+   * handles Mouse Up listener (to create the final plot)
+   * @method
+   * @name setupPlot
+   * @returns {void}
+   */
+  handleClick() {
+    this.click += 1;
+    if (this.click === 3){
+      this.click = 0
+    }
   }
 
   //internal class functions
@@ -179,7 +193,7 @@ export default class LengthPlotTool extends BaseAnnotationTool {
       toolData.data[toolData.data.length - 1].handles.fixedoffset =
         toolData.data[toolData.data.length - 1].handles.offset;
     }
-    this.click = +1;
+
     this.measuring =
       this.datahandles?.end.x === this.datahandles?.start.x &&
       this.datahandles?.end.y === this.datahandles?.start.y &&
@@ -238,32 +252,35 @@ export default class LengthPlotTool extends BaseAnnotationTool {
    * allows to change the offset between the three lines
    * @method
    * @name changeOffset
-   * @param {WheelEvent} evt
+   * @param {MouseEvent} evt
    * @returns {void}
    */
-  changeOffset(evt: WheelEvent) {
+  changeOffset(evt: MouseEvent) {
     const toolData: { data: data[] } = getToolState(
       this.currentTarget,
       this.name
     );
-    if (toolData) {
+    if (toolData && this.click === 2) {
       const index = toolData.data.findIndex(obj => obj.active === true);
-      const indexTracing = toolData.data.findIndex(
-        obj => obj.handles.end.moving === true
-      );
+
       if (
         (toolData.data.length != 0 &&
           index != undefined &&
           index != -1 &&
           toolData.data[index] != undefined &&
           evt.buttons === 1) ||
-        (indexTracing != undefined &&
-          indexTracing != -1 &&
-          toolData.data[index] != undefined)
+        (toolData.data[index] != undefined)
       ) {
-        const { deltaY } = evt;
+        const { clientY } = evt;
+
+        if (clientY < this.lastY) {
+            toolData.data[index].handles.offset +=  -1;
+        } else if (clientY > this.lastY) {
+          toolData.data[index].handles.offset += 1;
+        }
+
+        this.lastY = clientY;
 
-        toolData.data[index].handles.offset += deltaY > 0 ? 1 : -1;
         evt.preventDefault();
         this.renderToolData(evt);
 
@@ -280,20 +297,26 @@ export default class LengthPlotTool extends BaseAnnotationTool {
    * @returns {void}
    */
   createNewMeasurement(eventData: EventData) {
+    if (this.click !== 0) return;
+
     this.eventData = eventData;
     clearToolData(eventData.element, this.name);
     if (this.datahandles) {
-      eventData.element.removeEventListener("wheel", evt =>
+      eventData.element.removeEventListener("mousemove", evt =>
         this.changeOffset(evt)
       );
+      eventData.element.removeEventListener("click", this.handleClick);
     }
     if (this.datahandles != null) {
       this.datahandles = null;
       this.abovehandles = null;
       this.belowhandles = null;
       this.theta = null;
     }
-    eventData.element.addEventListener("wheel", evt => this.changeOffset(evt));
+    eventData.element.addEventListener("click", this.handleClick);
+    eventData.element.addEventListener("mousemove", evt =>
+      this.changeOffset(evt)
+    );
 
     this.measuring = true;
     const goodEventData =
@@ -406,16 +429,13 @@ export default class LengthPlotTool extends BaseAnnotationTool {
    * Renders the data (new line/modified line)
    * @method
    * @name updateCachedStats
-   * @param {ToolMouseEvent | WheelEvent} evt
+   * @param {ToolMouseEvent | MouseEvent} evt
    * @returns {void}
    */
-  renderToolData(evt: ToolMouseEvent | WheelEvent) {
+  renderToolData(evt: ToolMouseEvent | MouseEvent) {
     if (evt.detail) {
       this.evt = evt;
       this.currentTarget = evt.currentTarget;
-      this.wheelactive = false;
-    } else {
-      this.wheelactive = true;
     }
 
     if (this.evt) {
@@ -477,14 +497,12 @@ export default class LengthPlotTool extends BaseAnnotationTool {
           end = data.handles.end;
           if (
             this.measuring === false &&
-            this.wheelactive === true &&
             data.active === true
           ) {
             data.handles.fixedoffset = data.handles.offset;
           }
           data.handles.offset =
-            (this.measuring === true && data.handles.end.moving === true) ||
-            this.wheelactive === true
+            (this.measuring === true && data.handles.end.moving === true)
               ? data.handles.offset
               : data.handles.fixedoffset;
           //data.handles.end.y = data.handles.start.y;

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "medical",
     "cornerstone"
   ],
-  "version": "2.5.14",
+  "version": "2.5.15",
   "description": "typescript library for parsing, loading, rendering and interacting with DICOM images",
   "repository": {
     "url": "https://github.com/dvisionlab/Larvitar.git",