46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import React, { ReactElement, useCallback, useEffect, useState } from 'react';
|
|
import { Switch } from '@ohif/ui-next';
|
|
import { VolumeShadeProps } from '../../types/ViewportPresets';
|
|
|
|
export function VolumeShade({
|
|
commandsManager,
|
|
viewportId,
|
|
servicesManager,
|
|
onClickShade = bool => {},
|
|
}: VolumeShadeProps): ReactElement {
|
|
const { cornerstoneViewportService } = servicesManager.services;
|
|
const [shade, setShade] = useState(true);
|
|
const [key, setKey] = useState(0);
|
|
|
|
const onShadeChange = useCallback(
|
|
(checked: boolean) => {
|
|
commandsManager.runCommand('setVolumeLighting', { viewportId, options: { shade: checked } });
|
|
},
|
|
[commandsManager, viewportId]
|
|
);
|
|
useEffect(() => {
|
|
const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
|
|
const { actor } = viewport.getActors()[0];
|
|
const shade = actor.getProperty().getShade();
|
|
setShade(shade);
|
|
onClickShade(shade);
|
|
setKey(key + 1);
|
|
}, [viewportId, cornerstoneViewportService]);
|
|
|
|
return (
|
|
<>
|
|
<span className="flex-grow">Shade</span>
|
|
<Switch
|
|
className="ml-2 flex-shrink-0"
|
|
key={key}
|
|
checked={shade}
|
|
onCheckedChange={() => {
|
|
setShade(!shade);
|
|
onClickShade(!shade);
|
|
onShadeChange(!shade);
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|