|
|
@ -55,11 +55,20 @@ type ToolButtonProps =
|
|
|
|
onPointerDown?(data: { pointerType: PointerType }): void;
|
|
|
|
onPointerDown?(data: { pointerType: PointerType }): void;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
|
|
|
|
export const ToolButton = React.forwardRef(
|
|
|
|
|
|
|
|
(
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
size = "medium",
|
|
|
|
|
|
|
|
visible = true,
|
|
|
|
|
|
|
|
className = "",
|
|
|
|
|
|
|
|
...props
|
|
|
|
|
|
|
|
}: ToolButtonProps,
|
|
|
|
|
|
|
|
ref,
|
|
|
|
|
|
|
|
) => {
|
|
|
|
const { id: excalId } = useExcalidrawContainer();
|
|
|
|
const { id: excalId } = useExcalidrawContainer();
|
|
|
|
const innerRef = React.useRef(null);
|
|
|
|
const innerRef = React.useRef(null);
|
|
|
|
React.useImperativeHandle(ref, () => innerRef.current);
|
|
|
|
React.useImperativeHandle(ref, () => innerRef.current);
|
|
|
|
const sizeCn = `ToolIcon_size_${props.size}`;
|
|
|
|
const sizeCn = `ToolIcon_size_${size}`;
|
|
|
|
|
|
|
|
|
|
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
|
|
|
|
|
|
|
@ -108,8 +117,8 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
|
|
|
|
className={clsx(
|
|
|
|
className={clsx(
|
|
|
|
"ToolIcon_type_button",
|
|
|
|
"ToolIcon_type_button",
|
|
|
|
sizeCn,
|
|
|
|
sizeCn,
|
|
|
|
props.className,
|
|
|
|
className,
|
|
|
|
props.visible && !props.hidden
|
|
|
|
visible && !props.hidden
|
|
|
|
? "ToolIcon_type_button--show"
|
|
|
|
? "ToolIcon_type_button--show"
|
|
|
|
: "ToolIcon_type_button--hide",
|
|
|
|
: "ToolIcon_type_button--hide",
|
|
|
|
{
|
|
|
|
{
|
|
|
@ -155,7 +164,7 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<label
|
|
|
|
<label
|
|
|
|
className={clsx("ToolIcon", props.className)}
|
|
|
|
className={clsx("ToolIcon", className)}
|
|
|
|
title={props.title}
|
|
|
|
title={props.title}
|
|
|
|
onPointerDown={(event) => {
|
|
|
|
onPointerDown={(event) => {
|
|
|
|
lastPointerTypeRef.current = event.pointerType || null;
|
|
|
|
lastPointerTypeRef.current = event.pointerType || null;
|
|
|
@ -184,17 +193,14 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
|
|
|
|
<div className="ToolIcon__icon">
|
|
|
|
<div className="ToolIcon__icon">
|
|
|
|
{props.icon}
|
|
|
|
{props.icon}
|
|
|
|
{props.keyBindingLabel && (
|
|
|
|
{props.keyBindingLabel && (
|
|
|
|
<span className="ToolIcon__keybinding">{props.keyBindingLabel}</span>
|
|
|
|
<span className="ToolIcon__keybinding">
|
|
|
|
|
|
|
|
{props.keyBindingLabel}
|
|
|
|
|
|
|
|
</span>
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</label>
|
|
|
|
</label>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
);
|
|
|
|
ToolButton.defaultProps = {
|
|
|
|
|
|
|
|
visible: true,
|
|
|
|
|
|
|
|
className: "",
|
|
|
|
|
|
|
|
size: "medium",
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ToolButton.displayName = "ToolButton";
|
|
|
|
ToolButton.displayName = "ToolButton";
|
|
|
|