feature(segmentation): Add contour tools and utilities in a side panel (#5517)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Dan Rukas <dan.rukas@gmail.com>

extensions/cornerstone/src/components/SegmentationUtilityButton.tsx

@@ -0,0 +1,64 @@
+import React, { useCallback } from 'react';
+import { cn, ToolButton } from '@ohif/ui-next';
+import { useUIStateStore } from '@ohif/extension-default';
+
+interface SegmentationUtilityButtonProps {
+  className?: string;
+  isActive?: boolean;
+  id: string;
+}
+
+/**
+ * A button that represents a segmentation utility.
+ * It is implicitly the PopoverTrigger for the options Popover panel that is
+ * opened in the PanelSegmentation component. It in essence is the PopoverTrigger
+ * because typically this button has the associated options to display in the Popover.
+ * Furthermore it also typically has a command for toggling the activeSegmentationUtility
+ * value in the UIStateStore that triggers the fetching of its options.
+
+ * @param props - The props for the button.
+ * @param props.className - The class name for the button.
+ * @param props.isActive - Whether the button is active
+ * @param props.id - The id of the button.
+ */
+function SegmentationUtilityButton(props: SegmentationUtilityButtonProps) {
+  const { className, isActive, id } = props;
+
+  const activeSegmentationUtility = useUIStateStore(
+    store => store.uiState.activeSegmentationUtility
+  );
+
+  const toolButtonClassName = cn(
+    'w-7 h-7 text-primary hover:text-primary hover:!bg-primary/30',
+    className,
+    isActive && 'bg-primary/30'
+  );
+
+  const handleMouseDownCapture = useCallback(
+    event => {
+      if (activeSegmentationUtility === id) {
+        // If this active button is clicked, prevent the default Popover
+        // behaviour of closing the Popover on a pointer/mouse down.
+        // Not doing this will cause the Popover to close and then reopen again.
+        // Why? Because propagating this event will cause PanelSegmentation to
+        // close the Popover by clearing the activeSegmentationUtility. Then
+        // this button will set the activeSegmentationUtility again and the
+        // Popover will reopen.
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [activeSegmentationUtility, id]
+  );
+
+  return (
+    <div onPointerDownCapture={handleMouseDownCapture}>
+      <ToolButton
+        {...props}
+        className={toolButtonClassName}
+      />
+    </div>
+  );
+}
+
+export default SegmentationUtilityButton;