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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<Alert />
|
<Alert />
|
||||||
|
{(showMvmCtrls
|
||||||
|
|| (isOnMobile && (is3D || (holdPaint > 0) && !isHistoricalView))
|
||||||
|
) && <MovementControls />}
|
||||||
{(isHistoricalView) ? (
|
{(isHistoricalView) ? (
|
||||||
<HistorySelect />
|
<HistorySelect />
|
||||||
) : (
|
) : (
|
||||||
|
@ -40,8 +43,6 @@ const UI = () => {
|
||||||
<PalselButton />
|
<PalselButton />
|
||||||
<Palette />
|
<Palette />
|
||||||
{(!is3D) && <GlobeButton />}
|
{(!is3D) && <GlobeButton />}
|
||||||
{(showMvmCtrls || ((is3D || holdPaint) && isOnMobile))
|
|
||||||
&& <MovementControls />}
|
|
||||||
{(!is3D && isOnMobile) && <PencilButton />}
|
{(!is3D && isOnMobile) && <PencilButton />}
|
||||||
<CoolDownBox />
|
<CoolDownBox />
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -2,11 +2,12 @@
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React, { useCallback } from 'react';
|
||||||
import { useSelector, useDispatch, shallowEqual } from 'react-redux';
|
import { useSelector, useDispatch, shallowEqual } from 'react-redux';
|
||||||
import { TbPencil, TbPencilMinus } from 'react-icons/tb';
|
import { TbPencil, TbPencilMinus } from 'react-icons/tb';
|
||||||
import { t } from 'ttag';
|
import { t } from 'ttag';
|
||||||
|
|
||||||
|
import useLongPress from '../hooks/useLongPress';
|
||||||
import { HOLD_PAINT } from '../../core/constants';
|
import { HOLD_PAINT } from '../../core/constants';
|
||||||
import { selectHoldPaint } from '../../store/actions';
|
import { selectHoldPaint } from '../../store/actions';
|
||||||
|
|
||||||
|
@ -20,25 +21,71 @@ const PencilButton = () => {
|
||||||
], shallowEqual);
|
], shallowEqual);
|
||||||
const dispatch = useDispatch();
|
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 (
|
return (
|
||||||
<div
|
<div
|
||||||
id="pencilbutton"
|
id="pencilbutton"
|
||||||
className={
|
className={className}
|
||||||
`actionbuttons${(holdPaint === HOLD_PAINT.PENCIL) ? ' pressed' : ''}`
|
|
||||||
}
|
|
||||||
style={{
|
style={{
|
||||||
bottom: (holdPaint === HOLD_PAINT.PENCIL || showMvmCtrls) ? 180 : 98,
|
bottom: (holdPaint || showMvmCtrls) ? 180 : 98,
|
||||||
}}
|
}}
|
||||||
role="button"
|
role="button"
|
||||||
title={(holdPaint === HOLD_PAINT.PENCIL)
|
title={title}
|
||||||
? t`Disable Pencil`
|
|
||||||
: t`Enable Pencil`}
|
|
||||||
tabIndex={-1}
|
tabIndex={-1}
|
||||||
onClick={() => dispatch(selectHoldPaint(
|
ref={refCallback}
|
||||||
(holdPaint === HOLD_PAINT.PENCIL) ? HOLD_PAINT.OFF : HOLD_PAINT.PENCIL,
|
|
||||||
))}
|
|
||||||
>
|
>
|
||||||
{(holdPaint === HOLD_PAINT.PENCIL) ? <TbPencilMinus /> : <TbPencil />}
|
{(holdPaint) ? <TbPencilMinus /> : <TbPencil />}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue
Block a user