mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-04-14 16:40:58 -04:00
fix: context menu positioning (#4025)
This commit is contained in:
parent
bea4a1e066
commit
75aeaa6c38
1 changed files with 102 additions and 106 deletions
|
@ -4092,116 +4092,112 @@ class App extends React.Component<AppProps, AppState> {
|
||||||
actionToggleStats,
|
actionToggleStats,
|
||||||
];
|
];
|
||||||
|
|
||||||
ContextMenu.push({
|
|
||||||
options: viewModeOptions,
|
|
||||||
top,
|
|
||||||
left,
|
|
||||||
actionManager: this.actionManager,
|
|
||||||
appState: this.state,
|
|
||||||
container: this.excalidrawContainerRef.current!,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (this.state.viewModeEnabled) {
|
if (this.state.viewModeEnabled) {
|
||||||
return;
|
ContextMenu.push({
|
||||||
}
|
options: viewModeOptions,
|
||||||
|
top,
|
||||||
ContextMenu.push({
|
left,
|
||||||
options: [
|
actionManager: this.actionManager,
|
||||||
this.isMobile &&
|
appState: this.state,
|
||||||
navigator.clipboard && {
|
container: this.excalidrawContainerRef.current!,
|
||||||
name: "paste",
|
});
|
||||||
perform: (elements, appStates) => {
|
} else {
|
||||||
this.pasteFromClipboard(null);
|
ContextMenu.push({
|
||||||
return {
|
options: [
|
||||||
commitToHistory: false,
|
this.isMobile &&
|
||||||
};
|
navigator.clipboard && {
|
||||||
|
name: "paste",
|
||||||
|
perform: (elements, appStates) => {
|
||||||
|
this.pasteFromClipboard(null);
|
||||||
|
return {
|
||||||
|
commitToHistory: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
contextItemLabel: "labels.paste",
|
||||||
},
|
},
|
||||||
contextItemLabel: "labels.paste",
|
this.isMobile && navigator.clipboard && separator,
|
||||||
},
|
probablySupportsClipboardBlob &&
|
||||||
this.isMobile && navigator.clipboard && separator,
|
elements.length > 0 &&
|
||||||
probablySupportsClipboardBlob &&
|
actionCopyAsPng,
|
||||||
elements.length > 0 &&
|
probablySupportsClipboardWriteText &&
|
||||||
actionCopyAsPng,
|
elements.length > 0 &&
|
||||||
probablySupportsClipboardWriteText &&
|
actionCopyAsSvg,
|
||||||
elements.length > 0 &&
|
((probablySupportsClipboardBlob && elements.length > 0) ||
|
||||||
actionCopyAsSvg,
|
(probablySupportsClipboardWriteText && elements.length > 0)) &&
|
||||||
((probablySupportsClipboardBlob && elements.length > 0) ||
|
separator,
|
||||||
(probablySupportsClipboardWriteText && elements.length > 0)) &&
|
actionSelectAll,
|
||||||
separator,
|
separator,
|
||||||
actionSelectAll,
|
typeof this.props.gridModeEnabled === "undefined" &&
|
||||||
separator,
|
actionToggleGridMode,
|
||||||
typeof this.props.gridModeEnabled === "undefined" &&
|
typeof this.props.zenModeEnabled === "undefined" &&
|
||||||
actionToggleGridMode,
|
actionToggleZenMode,
|
||||||
typeof this.props.zenModeEnabled === "undefined" &&
|
typeof this.props.viewModeEnabled === "undefined" &&
|
||||||
actionToggleZenMode,
|
actionToggleViewMode,
|
||||||
typeof this.props.viewModeEnabled === "undefined" &&
|
actionToggleStats,
|
||||||
actionToggleViewMode,
|
],
|
||||||
actionToggleStats,
|
top,
|
||||||
],
|
left,
|
||||||
top,
|
actionManager: this.actionManager,
|
||||||
left,
|
appState: this.state,
|
||||||
actionManager: this.actionManager,
|
container: this.excalidrawContainerRef.current!,
|
||||||
appState: this.state,
|
});
|
||||||
container: this.excalidrawContainerRef.current!,
|
}
|
||||||
});
|
} else if (type === "element") {
|
||||||
return;
|
if (this.state.viewModeEnabled) {
|
||||||
|
ContextMenu.push({
|
||||||
|
options: [navigator.clipboard && actionCopy, ...options],
|
||||||
|
top,
|
||||||
|
left,
|
||||||
|
actionManager: this.actionManager,
|
||||||
|
appState: this.state,
|
||||||
|
container: this.excalidrawContainerRef.current!,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
ContextMenu.push({
|
||||||
|
options: [
|
||||||
|
this.isMobile && actionCut,
|
||||||
|
this.isMobile && navigator.clipboard && actionCopy,
|
||||||
|
this.isMobile &&
|
||||||
|
navigator.clipboard && {
|
||||||
|
name: "paste",
|
||||||
|
perform: (elements, appStates) => {
|
||||||
|
this.pasteFromClipboard(null);
|
||||||
|
return {
|
||||||
|
commitToHistory: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
contextItemLabel: "labels.paste",
|
||||||
|
},
|
||||||
|
this.isMobile && separator,
|
||||||
|
...options,
|
||||||
|
separator,
|
||||||
|
actionCopyStyles,
|
||||||
|
actionPasteStyles,
|
||||||
|
separator,
|
||||||
|
maybeGroupAction && actionGroup,
|
||||||
|
maybeUngroupAction && actionUngroup,
|
||||||
|
(maybeGroupAction || maybeUngroupAction) && separator,
|
||||||
|
actionAddToLibrary,
|
||||||
|
separator,
|
||||||
|
actionSendBackward,
|
||||||
|
actionBringForward,
|
||||||
|
actionSendToBack,
|
||||||
|
actionBringToFront,
|
||||||
|
separator,
|
||||||
|
maybeFlipHorizontal && actionFlipHorizontal,
|
||||||
|
maybeFlipVertical && actionFlipVertical,
|
||||||
|
(maybeFlipHorizontal || maybeFlipVertical) && separator,
|
||||||
|
actionDuplicateSelection,
|
||||||
|
actionDeleteSelected,
|
||||||
|
],
|
||||||
|
top,
|
||||||
|
left,
|
||||||
|
actionManager: this.actionManager,
|
||||||
|
appState: this.state,
|
||||||
|
container: this.excalidrawContainerRef.current!,
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.state.viewModeEnabled) {
|
|
||||||
ContextMenu.push({
|
|
||||||
options: [navigator.clipboard && actionCopy, ...options],
|
|
||||||
top,
|
|
||||||
left,
|
|
||||||
actionManager: this.actionManager,
|
|
||||||
appState: this.state,
|
|
||||||
container: this.excalidrawContainerRef.current!,
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
ContextMenu.push({
|
|
||||||
options: [
|
|
||||||
this.isMobile && actionCut,
|
|
||||||
this.isMobile && navigator.clipboard && actionCopy,
|
|
||||||
this.isMobile &&
|
|
||||||
navigator.clipboard && {
|
|
||||||
name: "paste",
|
|
||||||
perform: (elements, appStates) => {
|
|
||||||
this.pasteFromClipboard(null);
|
|
||||||
return {
|
|
||||||
commitToHistory: false,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
contextItemLabel: "labels.paste",
|
|
||||||
},
|
|
||||||
this.isMobile && separator,
|
|
||||||
...options,
|
|
||||||
separator,
|
|
||||||
actionCopyStyles,
|
|
||||||
actionPasteStyles,
|
|
||||||
separator,
|
|
||||||
maybeGroupAction && actionGroup,
|
|
||||||
maybeUngroupAction && actionUngroup,
|
|
||||||
(maybeGroupAction || maybeUngroupAction) && separator,
|
|
||||||
actionAddToLibrary,
|
|
||||||
separator,
|
|
||||||
actionSendBackward,
|
|
||||||
actionBringForward,
|
|
||||||
actionSendToBack,
|
|
||||||
actionBringToFront,
|
|
||||||
separator,
|
|
||||||
maybeFlipHorizontal && actionFlipHorizontal,
|
|
||||||
maybeFlipVertical && actionFlipVertical,
|
|
||||||
(maybeFlipHorizontal || maybeFlipVertical) && separator,
|
|
||||||
actionDuplicateSelection,
|
|
||||||
actionDeleteSelected,
|
|
||||||
],
|
|
||||||
top,
|
|
||||||
left,
|
|
||||||
actionManager: this.actionManager,
|
|
||||||
appState: this.state,
|
|
||||||
container: this.excalidrawContainerRef.current!,
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
private handleWheel = withBatchedUpdates((event: WheelEvent) => {
|
private handleWheel = withBatchedUpdates((event: WheelEvent) => {
|
||||||
|
|
Loading…
Add table
Reference in a new issue