mirror of
				https://github.com/excalidraw/excalidraw.git
				synced 2025-10-30 02:14:38 +01:00 
			
		
		
		
	Extract helper for App context menu handling (#1033)
* Encapsulate SceneHistory. A little. * Clean up TopErrorBoundary * Extract helper for App context menu handling
This commit is contained in:
		| @@ -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; | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 Kent Beck
					Kent Beck