Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 406x 406x 406x 406x 406x 406x 108x 108x 33x 75x 75x 75x 300x 300x 225x 75x 225x 225x 225x 225x 225x 406x 406x | import { useCallback, MutableRefObject, useRef } from 'react';
import { useViewportActionCorners, ViewportActionCornersLocations } from '@ohif/ui-next';
import { useSystem } from '@ohif/core';
/**
* Hook that manages viewport action corner components for all viewports in the grid
* @returns A function that can be called to initialize action corners for a viewport
*/
export default function useViewportActionCornersWithGrid() {
const [, api] = useViewportActionCorners();
const { servicesManager } = useSystem();
const { customizationService } = servicesManager.services;
// Keep a ref to track processed viewports to avoid duplicates
const processedViewports = useRef<Set<string>>(new Set());
// Map of customization keys to their corresponding enum values
const locationMap = {
'viewportActionMenu.topLeft': ViewportActionCornersLocations.topLeft,
'viewportActionMenu.topRight': ViewportActionCornersLocations.topRight,
'viewportActionMenu.bottomLeft': ViewportActionCornersLocations.bottomLeft,
'viewportActionMenu.bottomRight': ViewportActionCornersLocations.bottomRight,
};
// Function to process customizations for a viewport
const initializeViewportCorners = useCallback(
(
viewportId: string,
elementRef: MutableRefObject<HTMLDivElement>,
displaySets: any[],
commandsManager: any
) => {
Iif (!viewportId || !elementRef?.current) {
return;
}
// Prevent duplicate processing
if (processedViewports.current.has(viewportId)) {
return;
}
// Mark this viewport as processed
processedViewports.current.add(viewportId);
// Clear any existing components for this viewport
api.clear(viewportId);
// Process each location
Object.entries(locationMap).forEach(([locationKey, locationValue]) => {
const items = customizationService.getCustomization(locationKey);
if (!items || !items.length) {
return;
}
items.forEach(item => {
try {
if (typeof item.component === 'function') {
// Use the component renderer provided directly in the item
const component = item.component({
viewportId,
element: elementRef.current,
displaySets,
location: locationValue,
commandsManager,
});
if (component) {
api.addComponent({
viewportId,
id: item.id,
component,
location: locationValue,
indexPriority: item.indexPriority,
});
}
} else IEif (item.component) {
// Handle static components
api.addComponent({
viewportId,
id: item.id,
component: item.component,
location: locationValue,
indexPriority: item.indexPriority,
});
}
} catch (error) {
console.error(`Error adding component ${item.id} to viewport corner:`, error);
}
});
});
},
[api, customizationService]
);
// Cleanup function for unmounting viewports
const cleanupViewportCorners = useCallback(
(viewportId: string) => {
Iif (!viewportId) {
return;
}
// Remove from processed set
processedViewports.current.delete(viewportId);
// Clear from the store
api.clear(viewportId);
},
[api]
);
return { initializeViewportCorners, cleanupViewportCorners };
}
|