sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extract helper for App context menu handling (#1033)

Browse Source 
* Encapsulate SceneHistory. A little.

* Clean up TopErrorBoundary

* Extract helper for App context menu handling
This commit is contained in:
Kent Beck 2020-03-21 09:03:17 -07:00 committed by GitHub
parent 5413d59925
commit d3d25a128c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 69 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
src/components/App.tsx
View File

@ -841,73 +841,7 @@ export class App extends React.Component<any, AppState> {
this.canvas?.removeEventListener("wheel", this.handleWheel); this.canvas?.removeEventListener("wheel", this.handleWheel);
} }
}} }}
onContextMenu={event => { onContextMenu={this.handleCanvasContextMenu}
event.preventDefault();
const { x, y } = viewportCoordsToSceneCoords(
event,
this.state,
this.canvas,
window.devicePixelRatio,
);
const element = getElementAtPosition(
globalSceneState.getAllElements(),
this.state,
x,
y,
this.state.zoom,
);
if (!element) {
ContextMenu.push({
options: [
navigator.clipboard && {
label: t("labels.paste"),
action: () => this.pasteFromClipboard(null),
},
probablySupportsClipboardBlob &&
hasNonDeletedElements(
globalSceneState.getAllElements(),
) && {
label: t("labels.copyAsPng"),
action: this.copyToClipboardAsPng,
},
...this.actionManager.getContextMenuItems(action =>
this.canvasOnlyActions.includes(action.name),
),
],
top: event.clientY,
left: event.clientX,
});
return;
}
if (!this.state.selectedElementIds[element.id]) {
this.setState({ selectedElementIds: { [element.id]: true } });
}
ContextMenu.push({
options: [
navigator.clipboard && {
label: t("labels.copy"),
action: this.copyToAppClipboard,
},
navigator.clipboard && {
label: t("labels.paste"),
action: () => this.pasteFromClipboard(null),
},
probablySupportsClipboardBlob && {
label: t("labels.copyAsPng"),
action: this.copyToClipboardAsPng,
},
...this.actionManager.getContextMenuItems(
action => !this.canvasOnlyActions.includes(action.name),
),
],
top: event.clientY,
left: event.clientX,
});
}}
onPointerDown={this.handleCanvasPointerDown} onPointerDown={this.handleCanvasPointerDown}
onDoubleClick={this.handleCanvasDoubleClick} onDoubleClick={this.handleCanvasDoubleClick}
onPointerMove={this.handleCanvasPointerMove} onPointerMove={this.handleCanvasPointerMove}
@ -2260,6 +2194,74 @@ export class App extends React.Component<any, AppState> {
window.addEventListener("pointerup", onPointerUp); window.addEventListener("pointerup", onPointerUp);
}; };
private handleCanvasContextMenu = (
event: React.PointerEvent<HTMLCanvasElement>,
) => {
event.preventDefault();
const { x, y } = viewportCoordsToSceneCoords(
event,
this.state,
this.canvas,
window.devicePixelRatio,
);
const element = getElementAtPosition(
globalSceneState.getAllElements(),
this.state,
x,
y,
this.state.zoom,
);
if (!element) {
ContextMenu.push({
options: [
navigator.clipboard && {
label: t("labels.paste"),
action: () => this.pasteFromClipboard(null),
},
probablySupportsClipboardBlob &&
hasNonDeletedElements(globalSceneState.getAllElements()) && {
label: t("labels.copyAsPng"),
action: this.copyToClipboardAsPng,
},
...this.actionManager.getContextMenuItems(action =>
this.canvasOnlyActions.includes(action.name),
),
],
top: event.clientY,
left: event.clientX,
});
return;
}
if (!this.state.selectedElementIds[element.id]) {
this.setState({ selectedElementIds: { [element.id]: true } });
}
ContextMenu.push({
options: [
navigator.clipboard && {
label: t("labels.copy"),
action: this.copyToAppClipboard,
},
navigator.clipboard && {
label: t("labels.paste"),
action: () => this.pasteFromClipboard(null),
},
probablySupportsClipboardBlob && {
label: t("labels.copyAsPng"),
action: this.copyToClipboardAsPng,
},
...this.actionManager.getContextMenuItems(
action => !this.canvasOnlyActions.includes(action.name),
),
],
top: event.clientY,
left: event.clientX,
});
};
private handleWheel = withBatchedUpdates((event: WheelEvent) => { private handleWheel = withBatchedUpdates((event: WheelEvent) => {
event.preventDefault(); event.preventDefault();
const { deltaX, deltaY } = event; const { deltaX, deltaY } = event;