feat: improve disableEditing flag (#3875)

Co-authored-by: Igor Octaviano <igoroctaviano@gmail.com>

platform/ui/src/components/MeasurementTable/MeasurementItem.tsx

@@ -4,7 +4,17 @@ import classnames from 'classnames';
 
 import Icon from '../Icon';
 
-const MeasurementItem = ({ uid, index, label, displayText, isActive, onClick, onEdit, item }) => {
+const MeasurementItem = ({
+  uid,
+  index,
+  label,
+  displayText,
+  isActive,
+  isLocked,
+  onClick,
+  onEdit,
+  item,
+}) => {
   const [isHovering, setIsHovering] = useState(false);
 
   const onEditHandler = event => {
@@ -49,20 +59,22 @@ const MeasurementItem = ({ uid, index, label, displayText, isActive, onClick, on
             dangerouslySetInnerHTML={{ __html: line }}
           ></span>
         ))}
-        <Icon
-          className={classnames(
-            'absolute w-4 cursor-pointer text-white transition duration-300',
-            { 'invisible mr-2 opacity-0': !isActive && !isHovering },
-            { 'opacity-1 visible': !isActive && isHovering }
-          )}
-          name="pencil"
-          style={{
-            top: 4,
-            right: 4,
-            transform: isActive || isHovering ? '' : 'translateX(100%)',
-          }}
-          onClick={onEditHandler}
-        />
+        {!isLocked && (
+          <Icon
+            className={classnames(
+              'absolute w-4 cursor-pointer text-white transition duration-300',
+              { 'invisible mr-2 opacity-0': !isActive && !isHovering },
+              { 'opacity-1 visible': !isActive && isHovering }
+            )}
+            name="pencil"
+            style={{
+              top: 4,
+              right: 4,
+              transform: isActive || isHovering ? '' : 'translateX(100%)',
+            }}
+            onClick={onEditHandler}
+          />
+        )}
       </div>
     </div>
   );

platform/ui/src/components/MeasurementTable/MeasurementTable.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { ServicesManager } from '@ohif/core';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import { annotation as CsAnnotation } from '@cornerstonejs/tools';
 
 import MeasurementItem from './MeasurementItem';
 
@@ -16,6 +17,8 @@ const MeasurementTable = ({ data, title, onClick, onEdit, servicesManager }) =>
     contentProps: {},
   });
   const CustomMeasurementItem = itemCustomization.content;
+  const annotationManager = CsAnnotation.state.getAnnotationManager();
+  const { locking } = CsAnnotation;
 
   return (
     <div>
@@ -25,19 +28,25 @@ const MeasurementTable = ({ data, title, onClick, onEdit, servicesManager }) =>
       </div>
       <div className="ohif-scrollbar max-h-112 overflow-hidden">
         {data.length !== 0 &&
-          data.map((measurementItem, index) => (
-            <CustomMeasurementItem
-              key={measurementItem.uid}
-              uid={measurementItem.uid}
-              index={index + 1}
-              label={measurementItem.label}
-              isActive={measurementItem.isActive}
-              displayText={measurementItem.displayText}
-              item={measurementItem}
-              onClick={onClick}
-              onEdit={onEdit}
-            />
-          ))}
+          data.map((measurementItem, index) => {
+            const isLocked = locking.isAnnotationLocked(
+              annotationManager.getAnnotation(measurementItem.uid)
+            );
+            return (
+              <CustomMeasurementItem
+                key={measurementItem.uid}
+                uid={measurementItem.uid}
+                index={index + 1}
+                label={measurementItem.label}
+                isActive={measurementItem.isActive}
+                isLocked={isLocked}
+                displayText={measurementItem.displayText}
+                item={measurementItem}
+                onClick={onClick}
+                onEdit={onEdit}
+              />
+            );
+          })}
         {data.length === 0 && (
           <div className="group flex cursor-default border border-transparent bg-black transition duration-300">
             <div className="bg-primary-dark text-primary-light group-hover:bg-secondary-main w-6 py-1 text-center text-base transition duration-300"></div>