fix(ui): Prevent unintended text selection and improve component behavior (#5077)

This commit is contained in:
Alireza authored and GitHub committed 2025-05-28 22:41:15 -04:00
1 parent 773d6edaf7
commit c6327acdc1
5 files changed
+73 -32

No files matched your search

@@ -2,6 +2,11 @@
width: 100%;
height: 100%; /* MUST have `height` to prevent resize infinite loop */
position: relative;
/* Prevent text selection on the entire viewport wrapper */
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.cornerstone-viewport-element {
@@ -16,4 +21,26 @@
/* Prevents the entire page from getting larger
when the magnify tool is near the sides/corners of the page */
overflow: hidden;
/* Prevent text selection on the viewport element */
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
/* Prevent text selection on overlay elements */
.noselect {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
/* Ensure all elements within viewport wrapper prevent text selection */
.viewport-wrapper * {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
@@ -343,7 +343,9 @@ const OHIFCornerstoneViewport = React.memo(
data-viewportId={viewportId}
ref={el => {
elementRef.current = el;
if (el) viewportRef.register(el);
if (el) {
viewportRef.register(el);
}
}}
></div>
<CornerstoneOverlays
@@ -3,6 +3,12 @@
--ol-foreground-color: #000000;
--ol-subtle-foreground-color: #000;
--ol-subtle-background-color: rgba(78, 78, 78, 0.5);
/* Prevent text selection on the entire viewer to avoid interference with annotations */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.DicomMicroscopyViewer .ol-box {