diff --git a/extensions/cornerstone/src/components/OHIFViewportActionCorners.tsx b/extensions/cornerstone/src/components/OHIFViewportActionCorners.tsx
index ab60510c0..e5bafac42 100644
--- a/extensions/cornerstone/src/components/OHIFViewportActionCorners.tsx
+++ b/extensions/cornerstone/src/components/OHIFViewportActionCorners.tsx
@@ -1,31 +1,54 @@
import React from 'react';
-import { useViewportActionCornersContext } from '../contextProviders/ViewportActionCornersProvider';
-import { useSystem } from '@ohif/core';
-import { useViewportGrid } from '@ohif/ui-next';
+import {
+ useViewportActionCorners,
+ ViewportActionCorners,
+ ViewportActionCornersLocations,
+} from '@ohif/ui-next';
export type OHIFViewportActionCornersProps = {
viewportId: string;
};
function OHIFViewportActionCorners({ viewportId }: OHIFViewportActionCornersProps) {
- const { servicesManager } = useSystem();
- const [viewportActionCornersState] = useViewportActionCornersContext();
+ const [state] = useViewportActionCorners();
- const [viewportGrid] = useViewportGrid();
- const isActiveViewport = viewportGrid.activeViewportId === viewportId;
-
- const ViewportActionCorners =
- servicesManager.services.customizationService.getCustomization('ui.viewportActionCorner');
-
- if (!viewportActionCornersState[viewportId]) {
+ if (!state.viewports[viewportId]) {
return null;
}
+ const components = state.viewports[viewportId];
+
+ const renderCorner = (location: ViewportActionCornersLocations, CornerComponent) => {
+ const cornerComponents = components[location];
+ if (!cornerComponents?.length) {
+ return null;
+ }
+
+ return (
+
+ {cornerComponents
+ .filter(componentInfo => componentInfo.isVisible !== false)
+ .map(componentInfo => (
+
+ {componentInfo.component}
+
+ ))}
+
+ );
+ };
+
return (
-
+
+ {renderCorner(ViewportActionCornersLocations.topLeft, ViewportActionCorners.TopLeft)}
+ {renderCorner(ViewportActionCornersLocations.topRight, ViewportActionCorners.TopRight)}
+ {renderCorner(ViewportActionCornersLocations.bottomLeft, ViewportActionCorners.BottomLeft)}
+ {renderCorner(ViewportActionCornersLocations.bottomRight, ViewportActionCorners.BottomRight)}
+
);
}
diff --git a/extensions/cornerstone/src/components/ViewportColorbar/AdvancedColorbarWithControls.tsx b/extensions/cornerstone/src/components/ViewportColorbar/AdvancedColorbarWithControls.tsx
new file mode 100644
index 000000000..a6f2e00ac
--- /dev/null
+++ b/extensions/cornerstone/src/components/ViewportColorbar/AdvancedColorbarWithControls.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import { Button, Icons } from '@ohif/ui-next';
+import ViewportColorbar from './ViewportColorbar';
+import {
+ ColorbarCustomization,
+ ColorbarPositionType,
+ TickPositionType,
+} from '../../types/Colorbar';
+import type { ColorMapPreset } from '../../types/Colormap';
+
+type ColorbarData = {
+ colorbar: {
+ activeColormapName: string;
+ colormaps: ColorMapPreset[];
+ volumeId?: string;
+ };
+ displaySetInstanceUID: string;
+};
+
+type AdvancedColorbarWithControlsProps = {
+ viewportId: string;
+ colorbars: ColorbarData[];
+ position: string;
+ tickPosition: string;
+ colorbarCustomization: ColorbarCustomization;
+ onClose: (displaySetInstanceUID?: string) => void;
+ viewportElementRef?: React.RefObject
;
+};
+
+/**
+ * AdvancedColorbarWithControls Component
+ * A specialized colorbar component with additional control buttons for advanced window level controls
+ * This component handles the rendering portion of the ViewportColorbarsContainer
+ */
+const AdvancedColorbarWithControls = ({
+ viewportId,
+ colorbars,
+ position,
+ tickPosition,
+ colorbarCustomization,
+ onClose,
+ viewportElementRef,
+}: AdvancedColorbarWithControlsProps) => {
+ const handleClose = (displaySetInstanceUID?: string) => {
+ onClose(displaySetInstanceUID);
+ };
+
+ // Get bottom position styles from customization
+ const positionStyles = colorbarCustomization?.positionStyles || {};
+ const bottomPositionStyles = positionStyles.bottom || {};
+ const heightStyle = bottomPositionStyles.height;
+
+ return (
+
+
+
+
+
+
+
+
+ {colorbars.map((colorbarInfo, index) => {
+ const { colorbar, displaySetInstanceUID } = colorbarInfo;
+ return (
+
+ );
+ })}
+
+
+
+
+
+
+
+ {position !== 'bottom' ? (
+
+ {colorbars.map((colorbarInfo, index) => {
+ const { colorbar, displaySetInstanceUID } = colorbarInfo;
+ return (
+
+ );
+ })}
+
+ ) : (
+
+ )}
+