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

fix: disable flowchart keybindings inside inputs (#8353)

Browse source
This commit is contained in:
David Luzar 2024-08-09 18:44:17 +02:00 • committed by GitHub
parent 99b91c46f7
commit 87a9430809
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 76 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3887,88 +3887,95 @@ class App extends React.Component<AppProps, AppState> {
}); });
} }
if (event.key === KEYS.ESCAPE && this.flowChartCreator.isCreatingChart) { if (!isInputLike(event.target)) {
this.flowChartCreator.clear();
this.triggerRender(true);
return;
}
const arrowKeyPressed = isArrowKey(event.key);
if (event[KEYS.CTRL_OR_CMD] && arrowKeyPressed && !event.shiftKey) {
event.preventDefault();
const selectedElements = getSelectedElements(
this.scene.getNonDeletedElementsMap(),
this.state,
);
if ( if (
selectedElements.length === 1 && event.key === KEYS.ESCAPE &&
isFlowchartNodeElement(selectedElements[0]) this.flowChartCreator.isCreatingChart
) { ) {
this.flowChartCreator.createNodes( this.flowChartCreator.clear();
selectedElements[0], this.triggerRender(true);
this.scene.getNonDeletedElementsMap(), return;
this.state,
getLinkDirectionFromKey(event.key),
);
} }
return; const arrowKeyPressed = isArrowKey(event.key);
}
if (event.altKey) { if (event[KEYS.CTRL_OR_CMD] && arrowKeyPressed && !event.shiftKey) {
const selectedElements = getSelectedElements(
this.scene.getNonDeletedElementsMap(),
this.state,
);
if (selectedElements.length === 1 && arrowKeyPressed) {
event.preventDefault(); event.preventDefault();
const nextId = this.flowChartNavigator.exploreByDirection( const selectedElements = getSelectedElements(
selectedElements[0],
this.scene.getNonDeletedElementsMap(), this.scene.getNonDeletedElementsMap(),
getLinkDirectionFromKey(event.key), this.state,
); );
if (nextId) { if (
this.setState((prevState) => ({ selectedElements.length === 1 &&
selectedElementIds: makeNextSelectedElementIds( isFlowchartNodeElement(selectedElements[0])
{ ) {
[nextId]: true, this.flowChartCreator.createNodes(
}, selectedElements[0],
prevState, this.scene.getNonDeletedElementsMap(),
), this.state,
})); getLinkDirectionFromKey(event.key),
);
const nextNode = this.scene.getNonDeletedElementsMap().get(nextId);
if (
nextNode &&
!isElementCompletelyInViewport(
nextNode,
this.canvas.width / window.devicePixelRatio,
this.canvas.height / window.devicePixelRatio,
{
offsetLeft: this.state.offsetLeft,
offsetTop: this.state.offsetTop,
scrollX: this.state.scrollX,
scrollY: this.state.scrollY,
zoom: this.state.zoom,
},
this.scene.getNonDeletedElementsMap(),
)
) {
this.scrollToContent(nextNode, {
animate: true,
duration: 300,
});
}
} }
return; return;
} }
if (event.altKey) {
const selectedElements = getSelectedElements(
this.scene.getNonDeletedElementsMap(),
this.state,
);
if (selectedElements.length === 1 && arrowKeyPressed) {
event.preventDefault();
const nextId = this.flowChartNavigator.exploreByDirection(
selectedElements[0],
this.scene.getNonDeletedElementsMap(),
getLinkDirectionFromKey(event.key),
);
if (nextId) {
this.setState((prevState) => ({
selectedElementIds: makeNextSelectedElementIds(
{
[nextId]: true,
},
prevState,
),
}));
const nextNode = this.scene
.getNonDeletedElementsMap()
.get(nextId);
if (
nextNode &&
!isElementCompletelyInViewport(
nextNode,
this.canvas.width / window.devicePixelRatio,
this.canvas.height / window.devicePixelRatio,
{
offsetLeft: this.state.offsetLeft,
offsetTop: this.state.offsetTop,
scrollX: this.state.scrollX,
scrollY: this.state.scrollY,
zoom: this.state.zoom,
},
this.scene.getNonDeletedElementsMap(),
)
) {
this.scrollToContent(nextNode, {
animate: true,
duration: 300,
});
}
}
return;
}
}
} }
if ( if (