smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

focus on panel after click

Browse source
This commit is contained in:
Ryan Di 2025-04-25 21:18:16 +10:00
parent a0032fcaf2
commit 989cef51cc
3 changed files with 15 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
packages/excalidraw/components/App.tsx
View file

@ -469,6 +469,7 @@ import { EraserTrail } from "../eraser";
import ShapeSwitch, { import ShapeSwitch, {
getSwitchableTypeFromElements, getSwitchableTypeFromElements,
SHAPE_SWITCH_PANEL_CLASSNAME,
shapeSwitchAtom, shapeSwitchAtom,
switchShapes, switchShapes,
} from "./ShapeSwitch"; } from "./ShapeSwitch";
@ -4168,7 +4169,10 @@ class App extends React.Component<AppProps, AppState> {
editorJotaiStore.set(shapeSwitchAtom, null); editorJotaiStore.set(shapeSwitchAtom, null);
} else if ( } else if (
event.key === KEYS.TAB && event.key === KEYS.TAB &&
document.activeElement === this.excalidrawContainerRef?.current (document.activeElement === this.excalidrawContainerRef?.current ||
document.activeElement?.classList.contains(
SHAPE_SWITCH_PANEL_CLASSNAME,
))
) { ) {
event.preventDefault(); event.preventDefault();

4
packages/excalidraw/components/ShapeSwitch.scss
View file

@ -43,5 +43,9 @@
background: var(--island-bg-color); background: var(--island-bg-color);
box-shadow: var(--shadow-island); box-shadow: var(--shadow-island);
padding: 0.5rem; padding: 0.5rem;
&:focus {
outline: none;
}
} }
} }

7
packages/excalidraw/components/ShapeSwitch.tsx
View file

@ -88,6 +88,7 @@ import type { AppClassProperties } from "../types";
const GAP_HORIZONTAL = 8; const GAP_HORIZONTAL = 8;
const GAP_VERTICAL = 10; const GAP_VERTICAL = 10;
export const SHAPE_SWITCH_PANEL_CLASSNAME = "ShapeSwitch__Panel";
export const shapeSwitchAtom = atom<{ export const shapeSwitchAtom = atom<{
type: "panel"; type: "panel";
@ -180,6 +181,7 @@ const Panel = ({
const [panelPosition, setPanelPosition] = useState({ x: 0, y: 0 }); const [panelPosition, setPanelPosition] = useState({ x: 0, y: 0 });
const positionRef = useRef(""); const positionRef = useRef("");
const panelRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
const elements = [...genericElements, ...linearElements].sort((a, b) => const elements = [...genericElements, ...linearElements].sort((a, b) =>
@ -288,6 +290,8 @@ const Panel = ({
return ( return (
<div <div
ref={panelRef}
tabIndex={-1}
style={{ style={{
position: "absolute", position: "absolute",
top: `${ top: `${
@ -298,7 +302,7 @@ const Panel = ({
left: `${panelPosition.x - app.state.offsetLeft - GAP_HORIZONTAL}px`, left: `${panelPosition.x - app.state.offsetLeft - GAP_HORIZONTAL}px`,
zIndex: 2, zIndex: 2,
}} }}
className="ShapeSwitch__Panel" className={SHAPE_SWITCH_PANEL_CLASSNAME}
> >
{SHAPES.map(([type, icon]) => { {SHAPES.map(([type, icon]) => {
const isSelected = const isSelected =
@ -329,6 +333,7 @@ const Panel = ({
| ConvertibleGenericTypes | ConvertibleGenericTypes
| ConvertibleLinearTypes, | ConvertibleLinearTypes,
}); });
panelRef.current?.focus();
}} }}
/> />
); );