diff --git a/src/components/UI.jsx b/src/components/UI.jsx
index b16c2ab0..6f4e2fb0 100644
--- a/src/components/UI.jsx
+++ b/src/components/UI.jsx
@@ -33,6 +33,9 @@ const UI = () => {
return (
<>
+ {(showMvmCtrls
+ || (isOnMobile && (is3D || (holdPaint > 0) && !isHistoricalView))
+ ) && }
{(isHistoricalView) ? (
) : (
@@ -40,8 +43,6 @@ const UI = () => {
{(!is3D) && }
- {(showMvmCtrls || ((is3D || holdPaint) && isOnMobile))
- && }
{(!is3D && isOnMobile) && }
>
diff --git a/src/components/buttons/PencilButton.jsx b/src/components/buttons/PencilButton.jsx
index 7f463c61..7793a528 100644
--- a/src/components/buttons/PencilButton.jsx
+++ b/src/components/buttons/PencilButton.jsx
@@ -2,11 +2,12 @@
*
*/
-import React from 'react';
+import React, { useCallback } from 'react';
import { useSelector, useDispatch, shallowEqual } from 'react-redux';
import { TbPencil, TbPencilMinus } from 'react-icons/tb';
import { t } from 'ttag';
+import useLongPress from '../hooks/useLongPress';
import { HOLD_PAINT } from '../../core/constants';
import { selectHoldPaint } from '../../store/actions';
@@ -20,25 +21,71 @@ const PencilButton = () => {
], shallowEqual);
const dispatch = useDispatch();
+ const onLongPress = useCallback(() => {
+ let nextMode;
+ switch (holdPaint) {
+ case HOLD_PAINT.OFF:
+ case HOLD_PAINT.PENCIL:
+ if (window.ssv?.backupurl) {
+ nextMode = HOLD_PAINT.HISTORY;
+ break;
+ }
+ // eslint-disable-next-line no-fallthrough
+ case HOLD_PAINT.HISTORY:
+ if (window.let_me_cheat) {
+ nextMode = HOLD_PAINT.OVERLAY;
+ break;
+ }
+ // eslint-disable-next-line no-fallthrough
+ default:
+ nextMode = (holdPaint)
+ ? HOLD_PAINT.OFF
+ : HOLD_PAINT.PENCIL;
+ }
+ dispatch(selectHoldPaint(nextMode));
+ }, [holdPaint, dispatch]);
+
+ const onShortPress = useCallback(() => {
+ dispatch(selectHoldPaint(
+ (holdPaint)
+ ? HOLD_PAINT.OFF
+ : HOLD_PAINT.PENCIL,
+ ));
+ }, [holdPaint, dispatch]);
+
+ const refCallback = useLongPress(onShortPress, onLongPress);
+
+ let className = 'actionbuttons';
+ let title = t`Enable Pencil`;
+ switch (holdPaint) {
+ case HOLD_PAINT.PENCIL:
+ className += ' ppencil pressed';
+ title = t`Disable Pencil`;
+ break;
+ case HOLD_PAINT.HISTORY:
+ className += ' phistory pressed';
+ title = t`Disable History Pencil`;
+ break;
+ case HOLD_PAINT.OVERLAY:
+ className += ' poverlay pressed';
+ title = t`Disable Overlay Pencil`;
+ break;
+ default:
+ }
+
return (
dispatch(selectHoldPaint(
- (holdPaint === HOLD_PAINT.PENCIL) ? HOLD_PAINT.OFF : HOLD_PAINT.PENCIL,
- ))}
+ ref={refCallback}
>
- {(holdPaint === HOLD_PAINT.PENCIL) ? : }
+ {(holdPaint) ? : }
);
};