fix(uni): uni toolbar init (#3973)

dream-num · Nov 13, 2024 · 8cf801a · 8cf801a
1 parent bb4bd08
commit 8cf801a
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 34 deletions.
diff --git a/packages-experimental/uni-formula-ui/src/uni-formula-ui.plugin.ts b/packages-experimental/uni-formula-ui/src/uni-formula-ui.plugin.ts
@@ -15,9 +15,10 @@
  */
 
 import type { Dependency } from '@univerjs/core';
-import { DependentOn, Inject, Injector, Plugin, UniverInstanceType } from '@univerjs/core';
-import { IUniFormulaService, UniverDocUniFormulaPlugin } from '@univerjs/uni-formula';
+import { DependentOn, Inject, Injector, Plugin, touchDependencies, UniverInstanceType } from '@univerjs/core';
+import { TriggerCalculationController } from '@univerjs/sheets-formula';
 
+import { IUniFormulaService, UniverDocUniFormulaPlugin } from '@univerjs/uni-formula';
 import { DOC_FORMULA_UI_PLUGIN_NAME } from './const';
 import { DocUniFormulaInputController } from './controllers/doc-formula-input.controller';
 import { SlideUniFormulaInputController } from './controllers/slide-formula-input.controller';
@@ -50,12 +51,17 @@ export class UniverDocUniFormulaUIPlugin extends Plugin {
     }
 
     override onReady(): void {
-        this._injector.get(IUniFormulaService);
+        touchDependencies(this._injector, [
+            [IUniFormulaService],
+            [TriggerCalculationController],
+        ]);
     }
 
     override onSteady(): void {
-        this._injector.get(UniFormulaUniController);
-        this._injector.get(DocUniFormulaInputController);
-        this._injector.get(SlideUniFormulaInputController);
+        touchDependencies(this._injector, [
+            [UniFormulaUniController],
+            [DocUniFormulaInputController],
+            [SlideUniFormulaInputController],
+        ]);
     }
 }
diff --git a/packages-experimental/uniui/src/plugin.ts b/packages-experimental/uniui/src/plugin.ts
@@ -137,11 +137,10 @@ export class UniverUniUIPlugin extends Plugin {
             [UniuiFlowController],
         ], this._config.override);
         dependencies.forEach((dependency) => this._injector.add(dependency));
-
-        this._injector.get(IUIController);
     }
 
     override onReady(): void {
+        this._injector.get(IUIController); // Do not move it to onStarting, otherwise the univer instance may not be mounted.
         this._injector.get(UniuiFlowController);
         this._injector.get(UniuiLeftSidebarController);
         this._injector.get(UniuiToolbarController);

diff --git a/packages-experimental/uniui/src/views/uni-toolbar/UniFloatToolbar.tsx b/packages-experimental/uniui/src/views/uni-toolbar/UniFloatToolbar.tsx
@@ -14,11 +14,12 @@
  * limitations under the License.
  */
 
+import type { IMenuItem } from '@univerjs/ui';
+import type { IUnitRendererProps } from '../workbench/UniWorkbench';
 import { flip, offset, shift, useFloating } from '@floating-ui/react-dom';
-import React, { useEffect, useImperativeHandle } from 'react';
 import { IUniverInstanceService, type Nullable, useDependency, useObservable } from '@univerjs/core';
 import { ComponentContainer, IMenuManagerService, ToolbarItem, useComponentsOfPart } from '@univerjs/ui';
-import type { IUnitRendererProps } from '../workbench/UniWorkbench';
+import React, { useEffect, useImperativeHandle, useState } from 'react';
 import { DELETE_MENU_ID, DOWNLOAD_MENU_ID, LOCK_MENU_ID, PRINT_MENU_ID, SHARE_MENU_ID, UNI_MENU_POSITIONS, ZEN_MENU_ID } from '../../controllers/menu';
 import styles from './index.module.less';
 
@@ -41,19 +42,27 @@ const UNI_FLOATING_TOOLBAR_SCHEMA: string[] = [
 
 export const UniFloatingToolbar = React.forwardRef<IFloatingToolbarRef, { node: Nullable<IUnitRendererProps> }>(({ node }, ref) => {
     const menuManagerService = useDependency(IMenuManagerService);
+    const isMenuChange = useObservable(menuManagerService.menuChanged$);
+    const [uniVisibleItems, setUniVisibleItems] = useState<IMenuItem[]>([]);
 
     const { x, y, refs, strategy, update } = useFloating({
         placement: 'top',
         middleware: [offset(10), flip(), shift({ padding: 5 })],
     });
 
-    const menus = menuManagerService.getMenuByPositionKey(UNI_MENU_POSITIONS.TOOLBAR_FLOAT);
-    const uniVisibleItems = UNI_FLOATING_TOOLBAR_SCHEMA.map((id) => menus.find((item) => item.key === id)?.item).filter((item) => !!item);
-
     const { setReference, setFloating } = refs;
 
     const toolbarNameComponents = useComponentsOfPart(UniFloatToolbarUIPart.NAME);
 
+    // Function to update the visible items
+    const updateVisibleItems = () => {
+        const menus = menuManagerService.getMenuByPositionKey(UNI_MENU_POSITIONS.TOOLBAR_FLOAT);
+        if (menus) {
+            const visibleItems = UNI_FLOATING_TOOLBAR_SCHEMA.map((id) => menus.find((item) => item.key === id)?.item).filter((item) => !!item);
+            setUniVisibleItems(visibleItems);
+        }
+    };
+
     useImperativeHandle(ref, () => ({
         update: () => update(),
     }), [update]);
@@ -65,6 +74,11 @@ export const UniFloatingToolbar = React.forwardRef<IFloatingToolbarRef, { node:
         }
     }, [node, setReference]);
 
+    // Listen for menu changes and update visible items
+    useEffect(() => {
+        updateVisibleItems();
+    }, [isMenuChange]);
+
     if (!node || !refs.reference.current) {
         return null;
     }

diff --git a/packages-experimental/uniui/src/views/uni-toolbar/UniToolbar.tsx b/packages-experimental/uniui/src/views/uni-toolbar/UniToolbar.tsx
@@ -14,11 +14,12 @@
  * limitations under the License.
  */
 
-import { IUniverInstanceService, UniverInstanceType, useDependency, useObservable } from '@univerjs/core';
-import { IMenuManagerService, ToolbarItem } from '@univerjs/ui';
+import type { IMenuItem } from '@univerjs/ui';
 import type { ComponentType } from 'react';
-import React from 'react';
+import { IUniverInstanceService, UniverInstanceType, useDependency, useObservable } from '@univerjs/core';
 import { useWorkbooks } from '@univerjs/sheets-ui';
+import { IMenuManagerService, ToolbarItem } from '@univerjs/ui';
+import React, { useEffect, useState } from 'react';
 import { UNI_MENU_POSITIONS } from '../../controllers/menu';
 import { UniToolbarService } from '../../services/toolbar/uni-toolbar-service';
 import styles from './index.module.less';
@@ -33,31 +34,41 @@ export function UniToolbar() {
     const instanceService = useDependency(IUniverInstanceService);
     const focusedUnit = useObservable(instanceService.focused$);
     const menuManagerService = useDependency(IMenuManagerService);
+    const isMenuChange = useObservable(menuManagerService.menuChanged$);
+    const [uniVisibleItems, setUniVisibleItems] = useState<(IMenuItem | null)[]>([]);
 
     const type = focusedUnit ? (instanceService.getUnit(focusedUnit)?.type ?? UniverInstanceType.UNIVER_UNKNOWN) : UniverInstanceType.UNIVER_UNKNOWN;
 
-    const menus = menuManagerService.getMenuByPositionKey(UNI_MENU_POSITIONS.TOOLBAR_MAIN);
-
     const toolbarItems = uniToolbarService.getItems();
+    const hasWorkbooks = useWorkbooks().length > 0;
 
-    const uniVisibleItems = toolbarItems.map((item) => {
-        const { impl } = item;
-        const typeImpl = impl.find((item) => item.type === type);
-        const visibleItem = menus.find((item) => item.key === typeImpl?.id)?.item;
-        if (visibleItem) {
-            return visibleItem;
+    // The initialization of the UniToolbar component may be earlier than the initialization of the SheetUIController in the onReady cycle, resulting in the UNI_MENU_POSITIONS.TOOLBAR_MAIN menu not being registered
+    // Function to update the visible items
+    const updateVisibleItems = () => {
+        const menus = menuManagerService.getMenuByPositionKey(UNI_MENU_POSITIONS.TOOLBAR_MAIN);
+        if (menus) {
+            const visibleItems = toolbarItems.map((item) => {
+                const { impl } = item;
+                const typeImpl = impl.find((item) => item.type === type);
+                const visibleItem = menus.find((item) => item.key === typeImpl?.id)?.item;
+                if (visibleItem) {
+                    return visibleItem;
+                }
+                const placeHolderImpl = impl.find((item) => item.type === UniverInstanceType.UNIVER_UNKNOWN);
+                const placeHolderItem = menus.find((item) => item.key === placeHolderImpl?.id)?.item;
+                if (placeHolderItem) {
+                    return placeHolderItem;
+                }
+                return null;
+            }).filter((item) => !!item && !item.id.startsWith('FAKE_'));
+            setUniVisibleItems(visibleItems);
         }
-        const placeHolderImpl = impl.find((item) => item.type === UniverInstanceType.UNIVER_UNKNOWN);
-        const placeHolderItem = menus.find((item) => item.key === placeHolderImpl?.id)?.item;
-        if (placeHolderItem) {
-            return placeHolderItem;
-        }
-        return null;
-    }).filter((item) => {
-        return !!item && !item.id.startsWith('FAKE_');
-    });
+    };
 
-    const hasWorkbooks = useWorkbooks().length > 0;
+    // Listen for menu changes and update visible items
+    useEffect(() => {
+        updateVisibleItems();
+    }, [isMenuChange]);
 
     return (
         <div className={styles.uniToolbar}>