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/SegmentationToolConfig.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Switch } from '@ohif/ui-next';
+import { useSystem } from '@ohif/core';
+
+export default function SegmentationToolConfig() {
+  const { commandsManager } = useSystem();
+
+  // Get initial states based on current configuration
+  const [previewEdits, setPreviewEdits] = useState(false);
+  const [segmentLabelEnabled, setSegmentLabelEnabled] = useState(false);
+  const [toggleSegmentEnabled, setToggleSegmentEnabled] = useState(false);
+  const [useCenterAsSegmentIndex, setUseCenterAsSegmentIndex] = useState(false);
+
+  const handlePreviewEditsChange = checked => {
+    setPreviewEdits(checked);
+    commandsManager.run('toggleSegmentPreviewEdit', { toggle: checked });
+  };
+
+  const handleToggleSegmentEnabledChange = checked => {
+    setToggleSegmentEnabled(checked);
+    commandsManager.run('toggleSegmentSelect', { toggle: checked });
+  };
+
+  const handleUseCenterAsSegmentIndexChange = checked => {
+    setUseCenterAsSegmentIndex(checked);
+    commandsManager.run('toggleUseCenterSegmentIndex', { toggle: checked });
+  };
+
+  const handleSegmentLabelEnabledChange = checked => {
+    setSegmentLabelEnabled(checked);
+    commandsManager.run('toggleSegmentLabel', { enabled: checked });
+  };
+
+  return (
+    <div className="bg-muted flex flex-col gap-2 border-b border-b-[2px] border-black px-2 py-3">
+      <div className="flex items-center gap-2">
+        <Switch
+          checked={previewEdits}
+          onCheckedChange={handlePreviewEditsChange}
+        />
+        <span className="text-foreground text-base">Preview edits before creating</span>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Switch
+          checked={useCenterAsSegmentIndex}
+          onCheckedChange={handleUseCenterAsSegmentIndexChange}
+        />
+        <span className="text-foreground text-base">Use center as segment index</span>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Switch
+          checked={toggleSegmentEnabled}
+          onCheckedChange={handleToggleSegmentEnabledChange}
+        />
+        <span className="text-foreground text-base">Hover on segment border to activate</span>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Switch
+          checked={segmentLabelEnabled}
+          onCheckedChange={handleSegmentLabelEnabledChange}
+        />
+        <span className="text-foreground text-base">Show segment name on hover</span>
+      </div>
+    </div>
+  );
+}