Answer
The easiest way to achieve the functionality you’re looking for would be to simply change the CSS for the mark handles to set their display
to none !important
. The CSS for the mark handles can be found in viewercontrol.css . See the following code for an example:
/* mark selection handles */
.pccMarkHandleTopLeft,
.pccMarkHandleTopCenter,
.pccMarkHandleTopRight,
.pccMarkHandleMidLeft,
.pccMarkHandleMidRight,
.pccMarkHandleBottomLeft,
.pccMarkHandleBottomCenter,
.pccMarkHandleBottomRight,
.pccMarkHandlePoint,
.pccMarkHandleTextSelectionStart,
.pccMarkHandleTextSelectionEnd {
position: absolute;
width: 40px;
height: 40px;
display: none !important;
background-image: url(data:image/png;base64,iVBORw...);
}
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min-resolution: 2dppx),
screen and (min-resolution: 192dpi) {
.pccMarkHandleTopLeft,
.pccMarkHandleTopCenter,
.pccMarkHandleTopRight,
.pccMarkHandleMidLeft,
.pccMarkHandleMidRight,
.pccMarkHandleBottomLeft,
.pccMarkHandleBottomCenter,
.pccMarkHandleBottomRight,
.pccMarkHandlePoint,
.pccMarkHandleTextSelectionStart,
.pccMarkHandleTextSelectionEnd {
-webkit-background-size: 40px 40px;
background-size: 40px;
display: none !important;
background-image: url(data:image/png;base64,iVBORw...);
}
}
You will want to set the !important
flag so that the functions inside viewercontrol don’t set the display back to block
.
One thing you may want to do is separate out pccMarkHandleTextSelectionStart
and pccMarkHandleTextSelectionEnd
to not include display: none
. This way, the text selection annotations are able to be edited, since they are reliant on the handles for "movement" because they select a portion of the text signified by the handles.