d4afd66268
* feat: add hand/panning tool * move hand tool right of tool lock separator * tweak i18n * rename `panning` -> `hand` * toggle between last tool and hand on `H` shortcut * hide properties sidebar when `hand` active * revert to rendering HandButton manually due to mobile toolbar
33 lines
813 B
TypeScript
33 lines
813 B
TypeScript
import "./ToolIcon.scss";
|
|
|
|
import clsx from "clsx";
|
|
import { ToolButton } from "./ToolButton";
|
|
import { handIcon } from "./icons";
|
|
import { KEYS } from "../keys";
|
|
|
|
type LockIconProps = {
|
|
title?: string;
|
|
name?: string;
|
|
checked: boolean;
|
|
onChange?(): void;
|
|
isMobile?: boolean;
|
|
};
|
|
|
|
export const HandButton = (props: LockIconProps) => {
|
|
return (
|
|
<ToolButton
|
|
className={clsx("Shape", { fillable: false })}
|
|
type="radio"
|
|
icon={handIcon}
|
|
name="editor-current-shape"
|
|
checked={props.checked}
|
|
title={`${props.title} — H`}
|
|
keyBindingLabel={!props.isMobile ? KEYS.H.toLocaleUpperCase() : undefined}
|
|
aria-label={`${props.title} — H`}
|
|
aria-keyshortcuts={KEYS.H}
|
|
data-testid={`toolbar-hand`}
|
|
onChange={() => props.onChange?.()}
|
|
/>
|
|
);
|
|
};
|