forked from ppfun/pixelplanet
make Pencil button switch between modes on long-press
This commit is contained in:
parent
0a38b0cd27
commit
d5c258848b
|
@ -33,6 +33,9 @@ const UI = () => {
|
|||
return (
|
||||
<>
|
||||
<Alert />
|
||||
{(showMvmCtrls
|
||||
|| (isOnMobile && (is3D || (holdPaint > 0) && !isHistoricalView))
|
||||
) && <MovementControls />}
|
||||
{(isHistoricalView) ? (
|
||||
<HistorySelect />
|
||||
) : (
|
||||
|
@ -40,8 +43,6 @@ const UI = () => {
|
|||
<PalselButton />
|
||||
<Palette />
|
||||
{(!is3D) && <GlobeButton />}
|
||||
{(showMvmCtrls || ((is3D || holdPaint) && isOnMobile))
|
||||
&& <MovementControls />}
|
||||
{(!is3D && isOnMobile) && <PencilButton />}
|
||||
<CoolDownBox />
|
||||
</>
|
||||
|
|
|
@ -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 (
|
||||
<div
|
||||
id="pencilbutton"
|
||||
className={
|
||||
`actionbuttons${(holdPaint === HOLD_PAINT.PENCIL) ? ' pressed' : ''}`
|
||||
}
|
||||
className={className}
|
||||
style={{
|
||||
bottom: (holdPaint === HOLD_PAINT.PENCIL || showMvmCtrls) ? 180 : 98,
|
||||
bottom: (holdPaint || showMvmCtrls) ? 180 : 98,
|
||||
}}
|
||||
role="button"
|
||||
title={(holdPaint === HOLD_PAINT.PENCIL)
|
||||
? t`Disable Pencil`
|
||||
: t`Enable Pencil`}
|
||||
title={title}
|
||||
tabIndex={-1}
|
||||
onClick={() => dispatch(selectHoldPaint(
|
||||
(holdPaint === HOLD_PAINT.PENCIL) ? HOLD_PAINT.OFF : HOLD_PAINT.PENCIL,
|
||||
))}
|
||||
ref={refCallback}
|
||||
>
|
||||
{(holdPaint === HOLD_PAINT.PENCIL) ? <TbPencilMinus /> : <TbPencil />}
|
||||
{(holdPaint) ? <TbPencilMinus /> : <TbPencil />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue
Block a user