|
@@ -67,8 +67,6 @@ const HighlightTools: React.FC<Props> = ({
|
|
) as HTMLElement;
|
|
) as HTMLElement;
|
|
}
|
|
}
|
|
if (textLayer) {
|
|
if (textLayer) {
|
|
- textLayer.style.zIndex = '10';
|
|
|
|
-
|
|
|
|
const newMarkup = getMarkupWithSelection({
|
|
const newMarkup = getMarkupWithSelection({
|
|
...data,
|
|
...data,
|
|
scale,
|
|
scale,
|
|
@@ -83,10 +81,6 @@ const HighlightTools: React.FC<Props> = ({
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (selection?.isCollapsed) {
|
|
if (selection?.isCollapsed) {
|
|
- if (textLayer) {
|
|
|
|
- textLayer.style.zIndex = '0';
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
setCurrentId('');
|
|
setCurrentId('');
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -124,29 +118,37 @@ const HighlightTools: React.FC<Props> = ({
|
|
}
|
|
}
|
|
}, [annotations, data, scale, currentId]);
|
|
}, [annotations, data, scale, currentId]);
|
|
|
|
|
|
|
|
+ const subscribeEvent = () => {
|
|
|
|
+ document.addEventListener('mousedown', handleDown);
|
|
|
|
+ document.addEventListener('mousemove', handleMove);
|
|
|
|
+ document.addEventListener('mouseup', handleUp);
|
|
|
|
+ document.addEventListener('selectstart', handleSelectStart);
|
|
|
|
+ document.addEventListener('touchstart', handleDown);
|
|
|
|
+ document.addEventListener('touchmove', handleMove);
|
|
|
|
+ document.addEventListener('touchend', handleUp);
|
|
|
|
+ document.addEventListener('selectionchange', handleSelectChange);
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ const unsubscribeEvent = () => {
|
|
|
|
+ document.removeEventListener('mousedown', handleDown);
|
|
|
|
+ document.removeEventListener('mousemove', handleMove);
|
|
|
|
+ document.removeEventListener('mouseup', handleUp);
|
|
|
|
+ document.removeEventListener('selectstart', handleSelectStart);
|
|
|
|
+ document.removeEventListener('touchstart', handleDown);
|
|
|
|
+ document.removeEventListener('touchmove', handleMove);
|
|
|
|
+ document.removeEventListener('touchend', handleUp);
|
|
|
|
+ document.removeEventListener('selectionchange', handleSelectChange);
|
|
|
|
+ };
|
|
|
|
+
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
if (isActive) {
|
|
if (isActive) {
|
|
- document.addEventListener('mousedown', handleDown);
|
|
|
|
- document.addEventListener('mousemove', handleMove);
|
|
|
|
- document.addEventListener('mouseup', handleUp);
|
|
|
|
- document.addEventListener('selectstart', handleSelectStart);
|
|
|
|
- document.addEventListener('touchstart', handleDown);
|
|
|
|
- document.addEventListener('touchmove', handleMove);
|
|
|
|
- document.addEventListener('touchend', handleUp);
|
|
|
|
- document.addEventListener('selectionchange', handleSelectChange);
|
|
|
|
- } else if (textLayer) {
|
|
|
|
- textLayer.style.zIndex = '0';
|
|
|
|
|
|
+ subscribeEvent();
|
|
|
|
+ } else {
|
|
|
|
+ unsubscribeEvent();
|
|
}
|
|
}
|
|
|
|
|
|
return (): void => {
|
|
return (): void => {
|
|
- document.removeEventListener('mousedown', handleDown);
|
|
|
|
- document.removeEventListener('mousemove', handleMove);
|
|
|
|
- document.removeEventListener('mouseup', handleUp);
|
|
|
|
- document.removeEventListener('selectstart', handleSelectStart);
|
|
|
|
- document.removeEventListener('touchstart', handleDown);
|
|
|
|
- document.removeEventListener('touchmove', handleMove);
|
|
|
|
- document.removeEventListener('touchend', handleUp);
|
|
|
|
- document.removeEventListener('selectionchange', handleSelectChange);
|
|
|
|
|
|
+ unsubscribeEvent();
|
|
};
|
|
};
|
|
}, [isActive, handleUp, handleSelectChange]);
|
|
}, [isActive, handleUp, handleSelectChange]);
|
|
|
|
|