fixed grid tool config with grid's pattern dimension (#394)

* fixed grid tool config with grid's pattern dimension * Update docs --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
dvisionlab · Sep 26, 2024 · 25ac493 · 25ac493
1 parent 3412818
commit 25ac493
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 46 deletions.
diff --git a/dist/imaging/tools/custom/gridTool.d.ts b/dist/imaging/tools/custom/gridTool.d.ts
@@ -21,7 +21,7 @@ export declare class GridTool extends BaseTool {
      * @returns {Promise<void>}
      */
     activeCallback(element: HTMLElement): Promise<void>;
-    triggerInputPatternDimensionChange(event: any): void;
+    triggerInputGridDimensionChange(event: any): void;
     /**
      * function triggered when tool is set to disabled
      *

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/examples/larvitar.js b/docs/examples/larvitar.js
diff --git a/imaging/tools/custom/gridTool.ts b/imaging/tools/custom/gridTool.ts
@@ -24,16 +24,6 @@ import { handleElement } from "./utils/gridToolUtils/gridToolUtils";
 import { Coords, GridConfig, MeasurementMouseEvent } from "../types";
 import { DEFAULT_TOOLS } from "../default";
 
-const defaultGridSize = 50; // Pattern squares default size (5cm)
-const defaultConfig = {
-  minRows: 500,
-  minColumns: 500,
-  dashHeightMM: 2, // Dash default height in mm
-  dashWidthMM: 10, // Dash default width in mm
-  colorFractionLight: 2 / 3, // Fraction of lightGray color
-  colorFractionDark: 1 / 3, // Fraction of darkGray color
-  minPixelSpacing: 0.1
-};
 /**
  * @public
  * @class GridTool
@@ -48,19 +38,14 @@ export class GridTool extends BaseTool {
     super({
       name: "GridTool",
       configuration: {
-        setup:
-          (DEFAULT_TOOLS["Grid"].configuration as GridConfig).setup ??
-          defaultConfig,
-        patternDimension:
-          (DEFAULT_TOOLS["Grid"].configuration as GridConfig)
-            .patternDimension ?? defaultGridSize,
+        setup: (DEFAULT_TOOLS["Grid"].configuration as GridConfig).setup,
         gridPixelArray: []
       },
       ...props
     });
     this.handleMouseClick = this.handleMouseClick.bind(this);
-    this.triggerInputPatternDimensionChange =
-      this.triggerInputPatternDimensionChange.bind(this);
+    this.triggerInputGridDimensionChange =
+      this.triggerInputGridDimensionChange.bind(this);
   }
 
   /**
@@ -75,11 +60,7 @@ export class GridTool extends BaseTool {
     const enabledElement = await handleElement(element);
     element.addEventListener(EVENTS.MOUSE_CLICK, this.handleMouseClick);
     const newSetup = (DEFAULT_TOOLS["Grid"].configuration as GridConfig).setup;
-    const newGridSize = (DEFAULT_TOOLS["Grid"].configuration as GridConfig)
-      .patternDimension;
-    this.configuration.setup = newSetup ?? defaultConfig;
-    this.configuration.patternDimension = newGridSize ?? defaultGridSize;
-
+    this.configuration.setup = newSetup;
     if (
       enabledElement &&
       enabledElement.image.rows >= this.configuration.setup.minRows &&
@@ -88,15 +69,15 @@ export class GridTool extends BaseTool {
       this.enabledElement = enabledElement;
       this.triggerDrawGrid(enabledElement);
     }
-    const buttonPatternDimension = document.getElementById("patternDimension");
-    buttonPatternDimension?.addEventListener(
+    const buttonGridDimension = document.getElementById("patternDimension");
+    buttonGridDimension?.addEventListener(
       "input",
-      this.triggerInputPatternDimensionChange
+      this.triggerInputGridDimensionChange
     );
   }
 
-  triggerInputPatternDimensionChange(event: any) {
-    (DEFAULT_TOOLS["Grid"].configuration as GridConfig).patternDimension =
+  triggerInputGridDimensionChange(event: any) {
+    (DEFAULT_TOOLS["Grid"].configuration as GridConfig).setup.gridDimensionMM =
       event.target.value;
     updateImage(this.enabledElement.element);
   }
@@ -110,10 +91,10 @@ export class GridTool extends BaseTool {
    */
   disabledCallback(element: HTMLElement) {
     element.removeEventListener(EVENTS.MOUSE_CLICK, this.handleMouseClick);
-    const buttonPatternDimension = document.getElementById("patternDimension");
-    buttonPatternDimension?.removeEventListener(
+    const buttonGridDimension = document.getElementById("gridDimension");
+    buttonGridDimension?.removeEventListener(
       "input",
-      this.triggerInputPatternDimensionChange
+      this.triggerInputGridDimensionChange
     );
   }
 
@@ -164,10 +145,7 @@ export class GridTool extends BaseTool {
   triggerDrawGrid(enabledElement: EnabledElement) {
     this.configuration.gridPixelArray = [];
     const newSetup = (DEFAULT_TOOLS["Grid"].configuration as GridConfig).setup;
-    const newGridSize = (DEFAULT_TOOLS["Grid"].configuration as GridConfig)
-      .patternDimension;
     if (newSetup) this.configuration.setup = newSetup;
-    if (newGridSize) this.configuration.patternDimension = newGridSize;
 
     const image = enabledElement.image as Image;
     const pixelSpacing = {
@@ -199,12 +177,12 @@ export class GridTool extends BaseTool {
       this.configuration.setup.colorFractionDark
     );
 
-    let patternHeight = this.configuration.patternDimension
-      ? mmToPixels(this.configuration.patternDimension, pixelSpacing.y)
-      : mmToPixels(this.configuration.patternDimension, pixelSpacing.y);
-    let patternWidth = this.configuration.patternDimension
-      ? mmToPixels(this.configuration.patternDimension, pixelSpacing.x)
-      : mmToPixels(this.configuration.patternDimension, pixelSpacing.x);
+    let patternHeight = this.configuration.setup.gridDimensionMM
+      ? mmToPixels(this.configuration.setup.gridDimensionMM, pixelSpacing.y)
+      : mmToPixels(this.configuration.setup.gridDimensionMM, pixelSpacing.y);
+    let patternWidth = this.configuration.setup.gridDimensionMM
+      ? mmToPixels(this.configuration.setup.gridDimensionMM, pixelSpacing.x)
+      : mmToPixels(this.configuration.setup.gridDimensionMM, pixelSpacing.x);
     const patternCanvasDimensions = convertDimensionsToCanvas(
       element,
       patternWidth,

diff --git a/imaging/tools/default.ts b/imaging/tools/default.ts
@@ -558,8 +558,16 @@ const DEFAULT_TOOLS: {
     name: "Grid",
     viewports: "all",
     configuration: {
-      setup: null,
-      patternDimension: null,
+      setup: {
+        minRows: 500,
+        minColumns: 500,
+        dashHeightMM: 2, // Dash default height in mm
+        dashWidthMM: 10, // Dash default width in mm
+        colorFractionLight: 2 / 3, // Fraction of lightGray color
+        colorFractionDark: 1 / 3, // Fraction of darkGray color
+        minPixelSpacing: 0.1,
+        gridDimensionMM: 50 // Pattern squares default size (5cm)
+      },
       gridPixelArray: []
     },
     options: {},

diff --git a/imaging/tools/types.d.ts b/imaging/tools/types.d.ts
@@ -22,6 +22,7 @@ export type gridSettings = {
   colorFractionLight: number;
   colorFractionDark: number;
   minPixelSpacing: number;
+  gridDimensionMM: number;
 };
 
 export type ToolConfig = {