fix the ui for floating point brush size

OHIF · Oct 2, 2023 · 850271c · 850271c
1 parent 6e1c6b4
commit 850271c
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 15 deletions.
diff --git a/extensions/cornerstone-dicom-seg/src/panels/SegmentationToolbox.tsx b/extensions/cornerstone-dicom-seg/src/panels/SegmentationToolbox.tsx
@@ -249,8 +249,8 @@ function SegmentationToolbox({ servicesManager, extensionManager }) {
               name: 'Radius (mm)',
               id: 'brush-radius',
               type: 'range',
-              min: 0.01,
-              max: 100,
+              min: 0.5,
+              max: 99.5,
               value: state.Brush.brushSize,
               step: 0.5,
               onChange: value => onBrushSizeChange(value, 'Brush'),
@@ -281,8 +281,8 @@ function SegmentationToolbox({ servicesManager, extensionManager }) {
               name: 'Radius (mm)',
               type: 'range',
               id: 'eraser-radius',
-              min: 0.01,
-              max: 100,
+              min: 0.5,
+              max: 99.5,
               value: state.Eraser.brushSize,
               step: 0.5,
               onChange: value => onBrushSizeChange(value, 'Eraser'),
@@ -337,8 +337,8 @@ function SegmentationToolbox({ servicesManager, extensionManager }) {
               name: 'Radius (mm)',
               id: 'threshold-radius',
               type: 'range',
-              min: 0.01,
-              max: 100,
+              min: 0.5,
+              max: 99.5,
               value: state.ThresholdBrush.brushSize,
               step: 0.5,
               onChange: value => onBrushSizeChange(value, 'ThresholdBrush'),

diff --git a/platform/ui/src/components/AdvancedToolbox/ToolSettings.tsx b/platform/ui/src/components/AdvancedToolbox/ToolSettings.tsx
@@ -35,7 +35,7 @@ function ToolSettings({ options }) {
               className="flex items-center"
               key={option.id}
             >
-              <div className="w-1/3 text-xs text-[13px]">{option.name}</div>
+              <div className="w-1/3 text-[13px]">{option.name}</div>
               <div className="w-2/3">
                 <InputRange
                   minValue={option.min}
@@ -45,7 +45,7 @@ function ToolSettings({ options }) {
                   onChange={e => option.onChange(e)}
                   allowNumberEdit={true}
                   showAdjustmentArrows={false}
-                  inputClassName="ml-2 w-4/5"
+                  inputClassName="ml-1 w-4/5"
                 />
               </div>
             </div>

diff --git a/platform/ui/src/components/InputNumber/InputNumber.tsx b/platform/ui/src/components/InputNumber/InputNumber.tsx
@@ -48,6 +48,7 @@ const InputNumber: React.FC<{
   const inputWidth = Math.max(maxDigits * 10, showAdjustmentArrows ? 20 : 28);
   const arrowWidth = showAdjustmentArrows ? 20 : 0;
   const containerWidth = `${inputWidth + arrowWidth}px`;
+  const decimalPlaces = Number.isInteger(step) ? 0 : step.toString().split('.')[1].length;
 
   useEffect(() => {
     setNumberValue(value);
@@ -101,7 +102,7 @@ const InputNumber: React.FC<{
         <div className="flex">
           <input
             type="number"
-            value={numberValue}
+            value={Number(numberValue).toFixed(decimalPlaces)}
             step={step}
             onChange={handleChange}
             className={'input-number w-full bg-black text-center text-[12px] text-white'}

diff --git a/platform/ui/src/components/InputRange/InputRange.tsx b/platform/ui/src/components/InputRange/InputRange.tsx
@@ -57,10 +57,11 @@ const InputRange: React.FC<InputRangeProps> = ({
   const handleChange = useCallback(
     e => {
       const val = Number(e.target.value);
-      setRangeValue(val);
-      onChange(val);
+      const roundedVal = Math.round(val / step) * step;
+      setRangeValue(roundedVal);
+      onChange(roundedVal);
     },
-    [onChange]
+    [onChange, step]
   );
 
   const rangeValuePercentage = ((rangeValue - minValue) / (maxValue - minValue)) * 100;
@@ -92,8 +93,10 @@ const InputRange: React.FC<InputRangeProps> = ({
         e.preventDefault();
       }}
     >
-      <div className="relative flex w-full items-center">
-        {showLabel && labelPosition === 'left' && LabelOrEditableNumber}
+      <div className="relative flex w-full items-center space-x-2">
+        {showLabel && labelPosition === 'left' && (
+          <div style={{ width: labelWidth }}>{LabelOrEditableNumber}</div>
+        )}
         <div className="range-track"></div>
         <input
           type="range"

diff --git a/platform/ui/src/utils/getMaxDigits.ts b/platform/ui/src/utils/getMaxDigits.ts
@@ -5,8 +5,14 @@
  * @returns The maximum number of digits required to display a value.
  */
 const getMaxDigits = (maxValue: number, step: number) => {
-  const integerDigits = maxValue.toString().length;
+  if (step <= 0) {
+    throw new Error('Step should be greater than zero');
+  }
+
+  // Get the number of integer digits for maxValue
+  const integerDigits = maxValue.toString().split('.')[0].length;
   const decimalDigits = step % 1 === 0 ? 0 : step.toString().split('.')[1].length;
+
   return integerDigits + (decimalDigits ? decimalDigits + 1 : 0);
 };