feat: add display value

zakodium-oss · Aug 23, 2023 · dada7ee · dada7ee
1 parent 69e94e3
commit dada7ee
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 19 deletions.
diff --git a/src/components/roi/ROIEditPreference.tsx b/src/components/roi/ROIEditPreference.tsx
@@ -148,6 +148,7 @@ function ROIEditPreference() {
             <Table.Header>
               <ValueRenderers.Title value="Kind" />
               <ValueRenderers.Title value="Color" />
+              <ValueRenderers.Title value="Display" />
               <ValueRenderers.Title value="Display value" />
               <ValueRenderers.Title value="Font size" />
               <ValueRenderers.Title value="Font color" />
@@ -184,6 +185,20 @@ function ROIEditPreference() {
                     }
                   />
                 </ValueRenderers.Component>
+                <ValueRenderers.Component>
+                  <Checkbox
+                    checked={annotationsPreferences[key].displayValue}
+                    onChange={(checked) =>
+                      setAnnotationsPreferences({
+                        ...annotationsPreferences,
+                        [key]: {
+                          ...annotationsPreferences[key],
+                          displayValue: checked as boolean,
+                        },
+                      })
+                    }
+                  />
+                </ValueRenderers.Component>
                 <ValueRenderers.Component>
                   <Input
                     type="number"

diff --git a/src/components/roi/annotation/ConvexHullAnnotation.tsx b/src/components/roi/annotation/ConvexHullAnnotation.tsx
@@ -17,7 +17,7 @@ function ConvexHullAnnotation({ roi }: ConvexHullAnnotationProps) {
   );
 
   const preferences = usePreferences();
-  const { color, enabled, fontColor, fontSize } =
+  const { color, enabled, fontColor, fontSize, displayValue } =
     preferences.rois.annotations.convexHull;
 
   const polygonStyle: CSSProperties = useMemo(
@@ -43,9 +43,11 @@ function ConvexHullAnnotation({ roi }: ConvexHullAnnotationProps) {
   return (
     <g>
       <polygon points={svgPoints} style={polygonStyle} />
-      <text x={roi.width / 2} y={roi.height + 1} style={textStyle}>
-        {roi.convexHull.surface}
-      </text>
+      {displayValue && (
+        <text x={roi.width / 2} y={roi.height + 1} style={textStyle}>
+          {roi.convexHull.surface}
+        </text>
+      )}
     </g>
   );
 }

diff --git a/src/components/roi/annotation/FeretAnnotation.tsx b/src/components/roi/annotation/FeretAnnotation.tsx
@@ -31,7 +31,7 @@ function FeretAnnotation({ roi }: FeretAnnotationProps) {
   );
 
   const preferences = usePreferences();
-  const { color, enabled, fontColor, fontSize } =
+  const { color, enabled, fontColor, fontSize, displayValue } =
     preferences.rois.annotations.feretDiameters;
 
   const lineStyle: CSSProperties = useMemo(
@@ -67,14 +67,16 @@ function FeretAnnotation({ roi }: FeretAnnotationProps) {
             key={`${roi.id}-${index}`}
           >
             <line x1={x1} y1={y1} x2={x2} y2={y2} style={lineStyle} />
-            <text
-              x={0}
-              y={0}
-              transform={`translate(${x}, ${y})  rotate(${rotation})`}
-              style={textStyle}
-            >
-              {length.toFixed(2)}
-            </text>
+            {displayValue && (
+              <text
+                x={0}
+                y={0}
+                transform={`translate(${x}, ${y})  rotate(${rotation})`}
+                style={textStyle}
+              >
+                {length.toFixed(2)}
+              </text>
+            )}
           </g>
         );
       })}

diff --git a/src/components/roi/annotation/MBRAnnotation.tsx b/src/components/roi/annotation/MBRAnnotation.tsx
@@ -16,7 +16,7 @@ function MBRAnnotation({ roi }: MBRAnnotationProps) {
     [roi.mbr.points],
   );
   const preferences = usePreferences();
-  const { color, enabled, fontSize, fontColor } =
+  const { color, enabled, fontSize, fontColor, displayValue } =
     preferences.rois.annotations.minimalBoundingRectangle;
 
   const polygonStyle: CSSProperties = useMemo(
@@ -43,9 +43,11 @@ function MBRAnnotation({ roi }: MBRAnnotationProps) {
   return (
     <g>
       <polygon points={svgPoints} style={polygonStyle} />
-      <text x={roi.width / 2} y={-1} style={textStyle}>
-        {roi.width} x {roi.height} ({roi.surface} pixels)
-      </text>
+      {displayValue && (
+        <text x={roi.width / 2} y={-1} style={textStyle}>
+          {roi.width} x {roi.height} ({roi.surface} pixels)
+        </text>
+      )}
     </g>
   );
 }

diff --git a/src/state/preferences/PreferencesReducer.ts b/src/state/preferences/PreferencesReducer.ts
@@ -41,6 +41,7 @@ export type AnnotationsPreferences = {
     color: string;
     fontColor: string;
     fontSize: number;
+    displayValue: boolean;
   };
 };
 
@@ -62,24 +63,28 @@ export const initialPreferencesState: PreferencesState = {
         color: '#ff0000',
         fontColor: '#ff0000',
         fontSize: 2,
+        displayValue: true,
       },
       minimalBoundingRectangle: {
         enabled: true,
         color: '#0000ff',
         fontColor: '#0000ff',
         fontSize: 2,
+        displayValue: true,
       },
       feretDiameters: {
         enabled: true,
-        color: '#000000',
+        color: '#ff00ff',
         fontColor: '#ff00ff',
         fontSize: 2,
+        displayValue: true,
       },
       surface: {
-        enabled: true,
+        enabled: false,
         color: '#00ff00',
         fontColor: '#00ff00',
         fontSize: 2,
+        displayValue: true,
       },
     },
   },