fix(StackSync): Miscellaneous fixes for stack image sync (#3663)

platform/core/src/services/ToolBarService/ToolbarService.ts

@@ -2,12 +2,37 @@ import merge from 'lodash.merge';
 import { CommandsManager } from '../../classes';
 import { ExtensionManager } from '../../extensions';
 import { PubSubService } from '../_shared/pubSubServiceInterface';
+import type { RunCommand, Commands } from '../../types/Command';
 
 const EVENTS = {
   TOOL_BAR_MODIFIED: 'event::toolBarService:toolBarModified',
   TOOL_BAR_STATE_MODIFIED: 'event::toolBarService:toolBarStateModified',
 };
 
+export type ButtonListeners = Record<string, RunCommand>;
+
+export interface ButtonProps {
+  primary?: Button;
+  secondary?: Button;
+  items?: Button[];
+}
+
+export interface Button extends Commands {
+  id: string;
+  icon?: string;
+  label?: string;
+  type?: string;
+  tooltip?: string;
+  isActive?: boolean;
+  listeners?: ButtonListeners;
+  props?: ButtonProps;
+}
+
+export interface ExtraButtonOptions {
+  listeners?: ButtonListeners;
+  isActive?: boolean;
+}
+
 export default class ToolbarService extends PubSubService {
   public static REGISTRATION = {
     name: 'toolbarService',
@@ -18,7 +43,27 @@ export default class ToolbarService extends PubSubService {
     },
   };
 
-  buttons: Record<string, unknown> = {};
+  public static _createButton(
+    type: string,
+    id: string,
+    icon: string,
+    label: string,
+    commands: Command | Commands,
+    tooltip?: string,
+    extraOptions?: ExtraButtonOptions
+  ): Button {
+    return {
+      id,
+      icon,
+      label,
+      type,
+      commands,
+      tooltip,
+      ...extraOptions,
+    };
+  }
+
+  buttons: Record<string, Button> = {};
   state: {
     primaryToolId: string;
     toggles: Record<string, boolean>;
@@ -54,7 +99,7 @@ export default class ToolbarService extends PubSubService {
     this.buttons = {};
   }
 
-  onModeEnter() {
+  public onModeEnter(): void {
     this.reset();
   }
 
@@ -65,7 +110,7 @@ export default class ToolbarService extends PubSubService {
    *    used for calling the specified interaction.  That is, the command is
    *    called with {...commandOptions,...options}
    */
-  recordInteraction(interaction, options?: Record<string, unknown>) {
+  public recordInteraction(interaction, options?: Record<string, unknown>) {
     if (!interaction) {
       return;
     }
@@ -174,12 +219,18 @@ export default class ToolbarService extends PubSubService {
   }
 
   getActiveTools() {
-    return [this.state.primaryToolId, ...Object.keys(this.state.toggles)];
+    const activeTools = [this.state.primaryToolId];
+    Object.keys(this.state.toggles).forEach(key => {
+      if (this.state.toggles[key]) {
+        activeTools.push(key);
+      }
+    });
+    return activeTools;
   }
 
-  /** Sets the toggle state of a button to the isActive state */
-  public setActive(id: string, isActive: boolean): void {
-    if (isActive) {
+  /** Sets the toggle state of a button to the isToggled state */
+  public setToggled(id: string, isToggled: boolean): void {
+    if (isToggled) {
       this.state.toggles[id] = true;
     } else {
       delete this.state.toggles[id];
@@ -197,10 +248,25 @@ export default class ToolbarService extends PubSubService {
     }
   }
 
-  getButton(id) {
+  public getButton(id: string): Button {
     return this.buttons[id];
   }
 
+  /** Gets a nested button, found in the items/props for the children */
+  public getNestedButton(id: string): Button {
+    if (this.buttons[id]) {
+      return this.buttons[id];
+    }
+    for (const buttonId of Object.keys(this.buttons)) {
+      const { primary, items } = this.buttons[buttonId].props || {};
+      if (primary?.id === id) { return primary; }
+      const found = items?.find(childButton => childButton.id === id);
+      if (found) {
+        return found;
+      }
+    }
+  }
+
   setButtons(buttons) {
     this.buttons = buttons;
     this._broadcastEvent(this.EVENTS.TOOL_BAR_MODIFIED, {
@@ -267,23 +333,22 @@ export default class ToolbarService extends PubSubService {
       if (!this.buttons[button.id]) {
         this.buttons[button.id] = button;
       }
-      this._setTogglesForButtonItems(button.props?.items);
     });
+    this._setTogglesForButtonItems(buttons);
 
     this._broadcastEvent(this.EVENTS.TOOL_BAR_MODIFIED, {});
   }
 
-  _setTogglesForButtonItems(buttonItems) {
-    if (!buttonItems) {
+  _setTogglesForButtonItems(buttons) {
+    if (!buttons) {
       return;
     }
 
-    buttonItems.forEach(buttonItem => {
+    buttons.forEach(buttonItem => {
       if (buttonItem.type === 'toggle') {
-        this.state.toggles[buttonItem.id] = buttonItem.isActive;
-      } else {
-        this._setTogglesForButtonItems(buttonItem.props?.items);
+        this.setToggled(buttonItem.id, buttonItem.isActive);
       }
+      this._setTogglesForButtonItems(buttonItem.props?.items);
     });
   }
 

platform/core/src/types/Command.ts

@@ -4,7 +4,9 @@ export interface Command {
   context?: string;
 }
 
+export type RunCommand = Command | Command[];
+
 /** A set of commands, typically contained in a tool item or other configuration */
 export interface Commands {
-  commands: Command[];
+  commands: RunCommand;
 }