fix(ui): skip ribbon republish when inputs are unchanged (#7144)

Author: jikkai

packages/ui/src/services/ribbon/__tests__/ribbon.service.spec.ts

@@ -33,12 +33,14 @@ import { IMenuManagerService, MenuManagerService } from '../../menu/menu-manager
 import { MenuManagerPosition, RibbonPosition } from '../../menu/types';
 import { DesktopRibbonService, IRibbonService } from '../ribbon.service';
 
-function createService() {
+function createService(univerInstanceService?: { focused$: BehaviorSubject<string | null> }) {
     const injector = new Injector();
     injector.add([IConfigService, { useClass: ConfigService }]);
     injector.add([IContextService, { useClass: ContextService }]);
     injector.add([ILogService, { useClass: DesktopLogService }]);
-    injector.add([IUniverInstanceService, { useClass: UniverInstanceService }]);
+    injector.add(univerInstanceService
+        ? [IUniverInstanceService, univerInstanceService as never]
+        : [IUniverInstanceService, { useClass: UniverInstanceService }]);
     injector.add([IMenuManagerService, { useClass: MenuManagerService }]);
     injector.add([IRibbonService, { useClass: DesktopRibbonService }]);
     return {
@@ -149,4 +151,70 @@ describe('DesktopRibbonService', () => {
         ribbonSub.unsubscribe();
         activeSub.unsubscribe();
     });
+
+    it('does not republish the ribbon when hidden states emit unchanged values', () => {
+        const { service, menuManagerService } = createService();
+        const hidden$ = new BehaviorSubject(false);
+        const ribbons: IMenuSchema[][] = [];
+        const ribbonSub = service.ribbon$.subscribe((ribbon) => ribbons.push(ribbon));
+
+        menuManagerService.appendRootMenu({
+            [MenuManagerPosition.RIBBON]: {
+                [RibbonPosition.START]: {
+                    order: 0,
+                    [`${RibbonPosition.START}.stable-group`]: {
+                        order: 0,
+                        stableCommand: {
+                            order: 0,
+                            menuItemFactory: () => ({ id: 'stable-command', type: MenuItemType.BUTTON, hidden$ }),
+                        },
+                    },
+                },
+            },
+        } as MenuSchemaType);
+
+        const publishCountAfterInitialHiddenState = ribbons.length;
+        hidden$.next(false);
+
+        expect(ribbons.length).toBe(publishCountAfterInitialHiddenState);
+
+        hidden$.next(true);
+
+        expect(ribbons.length).toBe(publishCountAfterInitialHiddenState + 1);
+
+        ribbonSub.unsubscribe();
+    });
+
+    it('does not republish the ribbon when focus emits the same unit id', () => {
+        const focused$ = new BehaviorSubject<string | null>('unit-1');
+        const { service, menuManagerService } = createService({ focused$ });
+        const ribbons: IMenuSchema[][] = [];
+        const ribbonSub = service.ribbon$.subscribe((ribbon) => ribbons.push(ribbon));
+
+        menuManagerService.appendRootMenu({
+            [MenuManagerPosition.RIBBON]: {
+                [RibbonPosition.START]: {
+                    order: 0,
+                    [`${RibbonPosition.START}.focus-group`]: {
+                        order: 0,
+                        focusCommand: {
+                            order: 0,
+                            menuItemFactory: () => ({ id: 'focus-command', type: MenuItemType.BUTTON }),
+                        },
+                    },
+                },
+            },
+        } as MenuSchemaType);
+
+        const publishCountAfterMenuLoad = ribbons.length;
+        focused$.next('unit-1');
+
+        expect(ribbons.length).toBe(publishCountAfterMenuLoad);
+
+        focused$.next('unit-2');
+
+        expect(ribbons.length).toBe(publishCountAfterMenuLoad + 1);
+
+        ribbonSub.unsubscribe();
+    });
 });

packages/ui/src/services/ribbon/ribbon.service.ts

@@ -18,12 +18,16 @@ import type { Observable, Subscription } from 'rxjs';
 import type { IMenuSchema } from '../menu/menu-manager.service';
 import { createIdentifier, Disposable, IUniverInstanceService } from '@univerjs/core';
 import { BehaviorSubject, combineLatest } from 'rxjs';
-import { startWith } from 'rxjs/operators';
+import { distinctUntilChanged, startWith } from 'rxjs/operators';
 import { IMenuManagerService } from '../menu/menu-manager.service';
 import { MenuManagerPosition, RibbonPosition } from '../menu/types';
 
 export const IRibbonService = createIdentifier<IRibbonService>('univer.ribbon-service');
 
+function isSameHiddenMap(previous: boolean[], current: boolean[]): boolean {
+    return previous.length === current.length && previous.every((hidden, index) => hidden === current[index]);
+}
+
 export interface IRibbonService {
     ribbon$: Observable<IMenuSchema[]>;
     activatedTab$: Observable<string>;
@@ -110,7 +114,7 @@ export class DesktopRibbonService extends Disposable implements IRibbonService {
         this.disposeWithMe(
             combineLatest([
                 this._menuManagerService.menuChanged$.pipe(startWith(undefined)),
-                this._univerInstanceService.focused$.pipe(startWith(undefined)),
+                this._univerInstanceService.focused$.pipe(startWith(undefined), distinctUntilChanged()),
             ]).subscribe(() => {
                 this._updateRibbon();
             })
@@ -148,7 +152,10 @@ export class DesktopRibbonService extends Disposable implements IRibbonService {
         this._hiddenSubscription?.unsubscribe();
 
         this._hiddenSubscription = combineLatest(hiddenObservableMap)
-            .pipe(startWith(new Array(hiddenObservableMap.length).fill(false)))
+            .pipe(
+                startWith(new Array(hiddenObservableMap.length).fill(false)),
+                distinctUntilChanged(isSameHiddenMap)
+            )
             .subscribe((hiddenMap) => {
                 const newRibbon: IMenuSchema[] = [];