From d3d25a128c7f3dbcc83b8cb38a4e8dbc9b7c6fa6 Mon Sep 17 00:00:00 2001
From: Kent Beck <kent@threeriversinstitute.org>
Date: Sat, 21 Mar 2020 09:03:17 -0700
Subject: [PATCH] Extract helper for App context menu handling (#1033)

* Encapsulate SceneHistory. A little.

* Clean up TopErrorBoundary

* Extract helper for App context menu handling
---
 src/components/App.tsx | 136 +++++++++++++++++++++--------------------
 1 file changed, 69 insertions(+), 67 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 3f1961bc..f628e9dd 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -841,73 +841,7 @@ export class App extends React.Component<any, AppState> {
                 this.canvas?.removeEventListener("wheel", this.handleWheel);
               }
             }}
-            onContextMenu={event => {
-              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,
-              });
-            }}
+            onContextMenu={this.handleCanvasContextMenu}
             onPointerDown={this.handleCanvasPointerDown}
             onDoubleClick={this.handleCanvasDoubleClick}
             onPointerMove={this.handleCanvasPointerMove}
@@ -2260,6 +2194,74 @@ export class App extends React.Component<any, AppState> {
     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) => {
     event.preventDefault();
     const { deltaX, deltaY } = event;