feat: make fields and icons optionally clickable in flyouts (#7672)

* feat: add ability to click fields in flyouts

* feat: control if icons are clickable in flyouts

* fix: make default icons not clickable in flyout

* fix: use booleans like a real programmer

Author: maribethb

core/field.ts

@@ -581,6 +581,20 @@ export abstract class Field<T = any>
     );
   }
 
+  /**
+   * Check whether the field should be clickable while the block is in a flyout.
+   * The default is that fields are clickable in always-open flyouts such as the
+   * simple toolbox, but not in autoclosing flyouts such as the category toolbox.
+   * Subclasses may override this function to change this behavior. Note that
+   * `isClickable` must also return true for this to have any effect.
+   *
+   * @param autoClosingFlyout true if the containing flyout is an auto-closing one.
+   * @returns Whether the field should be clickable while the block is in a flyout.
+   */
+  isClickableInFlyout(autoClosingFlyout: boolean): boolean {
+    return !autoClosingFlyout;
+  }
+
   /**
    * Check whether this field is currently editable.  Some fields are never
    * EDITABLE (e.g. text labels). Other fields may be EDITABLE but may exist on

core/gesture.ts

@@ -1157,25 +1157,29 @@ export class Gesture {
   }
 
   /**
-   * Whether this gesture is a click on a field.  This should only be called
+   * Whether this gesture is a click on a field that should be handled.  This should only be called
    * when ending a gesture (pointerup).
    *
    * @returns Whether this gesture was a click on a field.
    */
   private isFieldClick(): boolean {
-    const fieldClickable = this.startField
-      ? this.startField.isClickable()
-      : false;
+    if (!this.startField) return false;
     return (
-      fieldClickable &&
+      this.startField.isClickable() &&
       !this.hasExceededDragRadius &&
-      (!this.flyout || !this.flyout.autoClose)
+      (!this.flyout ||
+        this.startField.isClickableInFlyout(this.flyout.autoClose))
     );
   }
 
-  /** @returns Whether this gesture is a click on an icon. */
+  /** @returns Whether this gesture is a click on an icon that should be handled. */
   private isIconClick(): boolean {
-    return !!this.startIcon && !this.hasExceededDragRadius;
+    if (!this.startIcon) return false;
+    const handleInFlyout =
+      !this.flyout ||
+      !this.startIcon.isClickableInFlyout ||
+      this.startIcon.isClickableInFlyout(this.flyout.autoClose);
+    return !this.hasExceededDragRadius && handleInFlyout;
   }
 
   /**

core/icons/comment_icon.ts

@@ -223,6 +223,10 @@ export class CommentIcon extends Icon implements IHasBubble, ISerializable {
     this.setBubbleVisible(!this.bubbleIsVisible());
   }
 
+  override isClickableInFlyout(): boolean {
+    return false;
+  }
+
   /**
    * Updates the text of this comment in response to changes in the text of
    * the input bubble.

core/icons/icon.ts

@@ -133,6 +133,19 @@ export abstract class Icon implements IIcon {
 
   onClick(): void {}
 
+  /**
+   * Check whether the icon should be clickable while the block is in a flyout.
+   * The default is that icons are clickable in all flyouts (auto-closing or not).
+   * Subclasses may override this function to change this behavior.
+   *
+   * @param autoClosingFlyout true if the containing flyout is an auto-closing one.
+   * @returns Whether the icon should be clickable while the block is in a flyout.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isClickableInFlyout(autoClosingFlyout: boolean): boolean {
+    return true;
+  }
+
   /**
    * Sets the visibility of the icon's bubble if one exists.
    *

core/icons/mutator_icon.ts

@@ -157,6 +157,10 @@ export class MutatorIcon extends Icon implements IHasBubble {
     }
   }
 
+  override isClickableInFlyout(): boolean {
+    return false;
+  }
+
   bubbleIsVisible(): boolean {
     return !!this.miniWorkspaceBubble;
   }

core/icons/warning_icon.ts

@@ -160,6 +160,10 @@ export class WarningIcon extends Icon implements IHasBubble {
     this.setBubbleVisible(!this.bubbleIsVisible());
   }
 
+  override isClickableInFlyout(): boolean {
+    return false;
+  }
+
   bubbleIsVisible(): boolean {
     return !!this.textBubble;
   }

core/interfaces/i_icon.ts

@@ -83,6 +83,15 @@ export interface IIcon {
    * Notifies the icon that it has been clicked.
    */
   onClick(): void;
+
+  /**
+   * Check whether the icon should be clickable while the block is in a flyout.
+   * If this function is not defined, the icon will be clickable in all flyouts.
+   *
+   * @param autoClosingFlyout true if the containing flyout is an auto-closing one.
+   * @returns Whether the icon should be clickable while the block is in a flyout.
+   */
+  isClickableInFlyout?(autoClosingFlyout: boolean): boolean;
 }
 
 /** Type guard that checks whether the given object is an IIcon. */