"Select All" only appears when clicking outside of a shape via actionFilter (#329)

Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>

src/actions/manager.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import { Action, ActionsManagerInterface, UpdaterFn } from "./types";
+import {
+  Action,
+  ActionsManagerInterface,
+  UpdaterFn,
+  ActionFilterFn
+} from "./types";
 import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
 
@@ -40,9 +45,11 @@ export class ActionManager implements ActionsManagerInterface {
   getContextMenuItems(
     elements: readonly ExcalidrawElement[],
     appState: AppState,
-    updater: UpdaterFn
+    updater: UpdaterFn,
+    actionFilter: ActionFilterFn = action => action
   ) {
     return Object.values(this.actions)
+      .filter(actionFilter)
       .filter(action => "contextItemLabel" in action)
       .sort(
         (a, b) =>

src/actions/types.ts

@@ -14,6 +14,7 @@ type ActionFn = (
 ) => ActionResult;
 
 export type UpdaterFn = (res: ActionResult) => void;
+export type ActionFilterFn = (action: Action) => void;
 
 export interface Action {
   name: string;
@@ -46,7 +47,8 @@ export interface ActionsManagerInterface {
   getContextMenuItems: (
     elements: readonly ExcalidrawElement[],
     appState: AppState,
-    updater: UpdaterFn
+    updater: UpdaterFn,
+    actionFilter: ActionFilterFn
   ) => { label: string; action: () => void }[];
   renderAction: (
     name: string,

src/index.tsx

@@ -64,7 +64,7 @@ import {
   actionPasteStyles
 } from "./actions";
 import { SidePanel } from "./components/SidePanel";
-import { ActionResult } from "./actions/types";
+import { Action, ActionResult } from "./actions/types";
 import { getDefaultAppState } from "./appState";
 
 let { elements } = createScene();
@@ -123,6 +123,7 @@ export class App extends React.Component<{}, AppState> {
   rc: RoughCanvas | null = null;
 
   actionManager: ActionManager = new ActionManager();
+  canvasOnlyActions: Array<Action>;
   constructor(props: any) {
     super(props);
     this.actionManager.registerAction(actionDeleteSelected);
@@ -151,6 +152,8 @@ export class App extends React.Component<{}, AppState> {
 
     this.actionManager.registerAction(actionCopyStyles);
     this.actionManager.registerAction(actionPasteStyles);
+
+    this.canvasOnlyActions = [actionSelectAll];
   }
 
   private syncActionResult = (res: ActionResult) => {
@@ -398,7 +401,13 @@ export class App extends React.Component<{}, AppState> {
                   navigator.clipboard && {
                     label: "Paste",
                     action: () => this.pasteFromClipboard()
-                  }
+                  },
+                  ...this.actionManager.getContextMenuItems(
+                    elements,
+                    this.state,
+                    this.syncActionResult,
+                    action => this.canvasOnlyActions.includes(action)
+                  )
                 ],
                 top: e.clientY,
                 left: e.clientX
@@ -425,7 +434,8 @@ export class App extends React.Component<{}, AppState> {
                 ...this.actionManager.getContextMenuItems(
                   elements,
                   this.state,
-                  this.syncActionResult
+                  this.syncActionResult,
+                  action => !this.canvasOnlyActions.includes(action)
                 )
               ],
               top: e.clientY,