55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { Numeric } from '@ohif/ui-next';
|
|
import { useViewportDisplaySets, useViewportRendering } from '../../hooks';
|
|
|
|
interface OpacityMenuProps {
|
|
viewportId: string;
|
|
className?: string;
|
|
}
|
|
|
|
function OpacityMenu({ viewportId, className }: OpacityMenuProps) {
|
|
const { backgroundDisplaySet, foregroundDisplaySets } = useViewportDisplaySets(viewportId, {
|
|
includeForeground: true,
|
|
includeBackground: true,
|
|
});
|
|
const { opacityLinear, setOpacityLinear } = useViewportRendering(viewportId, {
|
|
displaySetInstanceUID: foregroundDisplaySets[0].displaySetInstanceUID,
|
|
});
|
|
|
|
const opacityValue = opacityLinear !== undefined ? opacityLinear : 0;
|
|
const backgroundModality = backgroundDisplaySet?.Modality || '';
|
|
const foregroundModality = foregroundDisplaySets[0]?.Modality || '';
|
|
|
|
return (
|
|
<div className={className}>
|
|
<div className="bg-popover w-72 rounded-lg p-3">
|
|
<div className="mb-2 flex items-center justify-center">
|
|
<span className="text-muted-foreground text-base">Opacity</span>
|
|
</div>
|
|
<div className="">
|
|
<Numeric.Container
|
|
mode="singleRange"
|
|
value={opacityValue}
|
|
onChange={(val: number | [number, number]) => {
|
|
if (typeof val === 'number') {
|
|
setOpacityLinear(val);
|
|
}
|
|
}}
|
|
min={0}
|
|
max={1}
|
|
step={0.0001}
|
|
>
|
|
<div className="flex items-center">
|
|
<span className="text-foreground mr-2 text-sm">{backgroundModality}</span>
|
|
<Numeric.SingleRange showNumberInput={false} />
|
|
<span className="text-foreground ml-2 text-sm">{foregroundModality}</span>
|
|
</div>
|
|
</Numeric.Container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default OpacityMenu;
|