fix: state selection state on opening contextMenu (#3333)

This commit is contained in:
David Luzar 2021-03-26 16:41:57 +01:00 committed by GitHub
parent a21db08cae
commit 458e6d6c24
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -2255,10 +2255,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
touchTimeout = window.setTimeout(() => { touchTimeout = window.setTimeout(() => {
touchTimeout = 0; touchTimeout = 0;
if (!invalidateContextMenu) { if (!invalidateContextMenu) {
this.openContextMenu({ this.handleCanvasContextMenu(event);
clientX: event.clientX,
clientY: event.clientY,
});
} }
}, TOUCH_CTX_MENU_TIMEOUT); }, TOUCH_CTX_MENU_TIMEOUT);
} }
@ -3660,7 +3657,19 @@ class App extends React.Component<ExcalidrawProps, AppState> {
event: React.PointerEvent<HTMLCanvasElement>, event: React.PointerEvent<HTMLCanvasElement>,
) => { ) => {
event.preventDefault(); event.preventDefault();
this.openContextMenu(event);
const { x, y } = viewportCoordsToSceneCoords(event, this.state);
const element = this.getElementAtPosition(x, y);
const type = element ? "element" : "canvas";
if (element && !this.state.selectedElementIds[element.id]) {
this.setState({ selectedElementIds: { [element.id]: true } }, () => {
this._openContextMenu(event, type);
});
} else {
this._openContextMenu(event, type);
}
}; };
private maybeDragNewGenericElement = ( private maybeDragNewGenericElement = (
@ -3750,18 +3759,17 @@ class App extends React.Component<ExcalidrawProps, AppState> {
return false; return false;
}; };
private openContextMenu = ({ /** @private use this.handleCanvasContextMenu */
clientX, private _openContextMenu = (
clientY, {
}: { clientX,
clientX: number; clientY,
clientY: number; }: {
}) => { clientX: number;
const { x, y } = viewportCoordsToSceneCoords( clientY: number;
{ clientX, clientY }, },
this.state, type: "canvas" | "element",
); ) => {
const maybeGroupAction = actionGroup.contextItemPredicate!( const maybeGroupAction = actionGroup.contextItemPredicate!(
this.actionManager.getElementsIncludingDeleted(), this.actionManager.getElementsIncludingDeleted(),
this.actionManager.getAppState(), this.actionManager.getAppState(),
@ -3777,7 +3785,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
const _isMobile = isMobile(); const _isMobile = isMobile();
const elements = this.scene.getElements(); const elements = this.scene.getElements();
const element = this.getElementAtPosition(x, y);
const options: ContextMenuOption[] = []; const options: ContextMenuOption[] = [];
if (probablySupportsClipboardBlob && elements.length > 0) { if (probablySupportsClipboardBlob && elements.length > 0) {
options.push(actionCopyAsPng); options.push(actionCopyAsPng);
@ -3786,7 +3794,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
if (probablySupportsClipboardWriteText && elements.length > 0) { if (probablySupportsClipboardWriteText && elements.length > 0) {
options.push(actionCopyAsSvg); options.push(actionCopyAsSvg);
} }
if (!element) { if (type === "canvas") {
const viewModeOptions = [ const viewModeOptions = [
...options, ...options,
typeof this.props.gridModeEnabled === "undefined" && typeof this.props.gridModeEnabled === "undefined" &&
@ -3850,10 +3858,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
return; return;
} }
if (!this.state.selectedElementIds[element.id]) {
this.setState({ selectedElementIds: { [element.id]: true } });
}
if (this.state.viewModeEnabled) { if (this.state.viewModeEnabled) {
ContextMenu.push({ ContextMenu.push({
options: [navigator.clipboard && actionCopy, ...options], options: [navigator.clipboard && actionCopy, ...options],