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: popover positioning (#3399)

Browse source
This commit is contained in:
David Luzar 2021-04-05 17:26:37 +02:00 • committed by GitHub
parent 189b721eed
commit 9733ecb3df
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 5199 additions and 4791 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/components/App.tsx
View file

@ -474,6 +474,7 @@ class App extends React.Component<AppProps, AppState> {
UIOptions={this.props.UIOptions}
/>
<div className="excalidraw-textEditorContainer" />
<div className="excalidraw-contextMenuContainer" />
{this.state.showStats && (
<Stats
appState={this.state}
@ -3675,12 +3676,20 @@ class App extends React.Component<AppProps, AppState> {
const type = element ? "element" : "canvas";
const container = this.excalidrawContainerRef.current!;
const {
top: offsetTop,
left: offsetLeft,
} = container.getBoundingClientRect();
const left = event.clientX - offsetLeft;
const top = event.clientY - offsetTop;
if (element && !this.state.selectedElementIds[element.id]) {
this.setState({ selectedElementIds: { [element.id]: true } }, () => {
this._openContextMenu(event, type);
this._openContextMenu({ top, left }, type);
});
} else {
this._openContextMenu(event, type);
this._openContextMenu({ top, left }, type);
}
};
@ -3774,11 +3783,11 @@ class App extends React.Component<AppProps, AppState> {
/** @private use this.handleCanvasContextMenu */
private _openContextMenu = (
{
clientX,
clientY,
left,
top,
}: {
clientX: number;
clientY: number;
left: number;
top: number;
},
type: "canvas" | "element",
) => {
@ -3829,10 +3838,11 @@ class App extends React.Component<AppProps, AppState> {
ContextMenu.push({
options: viewModeOptions,
top: clientY,
left: clientX,
top,
left,
actionManager: this.actionManager,
appState: this.state,
container: this.excalidrawContainerRef.current!,
});
if (this.state.viewModeEnabled) {
@ -3872,10 +3882,11 @@ class App extends React.Component<AppProps, AppState> {
actionToggleViewMode,
actionToggleStats,
],
top: clientY,
left: clientX,
top,
left,
actionManager: this.actionManager,
appState: this.state,
container: this.excalidrawContainerRef.current!,
});
return;
}
@ -3883,10 +3894,11 @@ class App extends React.Component<AppProps, AppState> {
if (this.state.viewModeEnabled) {
ContextMenu.push({
options: [navigator.clipboard && actionCopy, ...options],
top: clientY,
left: clientX,
top,
left,
actionManager: this.actionManager,
appState: this.state,
container: this.excalidrawContainerRef.current!,
});
return;
}
@ -3928,10 +3940,11 @@ class App extends React.Component<AppProps, AppState> {
actionDuplicateSelection,
actionDeleteSelected,
],
top: clientY,
left: clientX,
top,
left,
actionManager: this.actionManager,
appState: this.state,
container: this.excalidrawContainerRef.current!,
});
};