Skip to content

Commit

Permalink
feat: add support for customizable context menu & toolbar (#2273)
Browse files Browse the repository at this point in the history 
* feat: add support for customizable context menu & toolbar

* fix: fix types

* feat: add support for customizable context menu & toolbar
  • Loading branch information
@jikkai
jikkai authored May 21, 2024
1 parent 43e57fa commit b253997
Show file tree
Hide file tree
Showing 52 changed files with 1,374 additions and 611 deletions.
25 changes: 24 additions & 1 deletion examples/src/sheets/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,30 @@ univer.registerPlugin(UniverUIPlugin, {
univer.registerPlugin(UniverDocsUIPlugin);

univer.registerPlugin(UniverSheetsPlugin);
univer.registerPlugin(UniverSheetsUIPlugin);
univer.registerPlugin(UniverSheetsUIPlugin, {
// menu: {
// 'sheet.command.set-range-bold': {
// tooltip: 'aaaa',
// // group: [],
// // type: '',
// // icon: '',
// title: 'x',
// // positions: '',
// // disabled: '',
// // value: '',
// // activated: '',
// hidden: true,
// disabled: true,
// activated: true,
// },
// 'sheet.command.set-range-fontsize': {
// defaultValue: 40,
// },
// 'sheet.command.set-range-text-color': {
// defaultValue: '#ee00bb',
// },
// },
});

// sheet feature plugins

Expand Down
17 changes: 16 additions & 1 deletion packages/debugger/src/controllers/debugger.controller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
*/

import { Disposable, ICommandService, IUniverInstanceService } from '@univerjs/core';
import type { IMenuItemFactory } from '@univerjs/ui';
import type { IMenuItemFactory, MenuConfig } from '@univerjs/ui';
import { ComponentManager, IMenuService } from '@univerjs/ui';
import { Inject, Injector } from '@wendellhu/redi';

Expand Down Expand Up @@ -52,8 +52,15 @@ import {
import { RecordController } from './local-save/record.controller';
import { ExportController } from './local-save/export.controller';

export interface IUniverDebuggerConfig {
menu: MenuConfig;
}

export const DefaultDebuggerConfig = {};

export class DebuggerController extends Disposable {
constructor(
private readonly _config: Partial<IUniverDebuggerConfig>,
@Inject(Injector) private readonly _injector: Injector,
@IMenuService private readonly _menuService: IMenuService,
@ICommandService private readonly _commandService: ICommandService,
Expand All @@ -64,6 +71,7 @@ export class DebuggerController extends Disposable {
this._initializeContextMenu();

this._initCustomComponents();
this._initMenuConfigs();

[
LocaleOperation,
Expand Down Expand Up @@ -109,4 +117,11 @@ export class DebuggerController extends Disposable {
framework: 'vue3',
}));
}

private _initMenuConfigs() {
const { menu = {} } = this._config;
Object.entries(menu).forEach(([id, config]) => {
this._menuService.setMenuConfigs(id, config);
});
}
}
104 changes: 76 additions & 28 deletions packages/debugger/src/controllers/menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
import { LocaleType } from '@univerjs/core';
import { defaultTheme, greenTheme } from '@univerjs/design';
import type { IMenuButtonItem, IMenuSelectorItem } from '@univerjs/ui';
import { MenuItemType, MenuPosition } from '@univerjs/ui';
import { IMenuService, MenuItemType, MenuPosition, mergeMenuConfigs } from '@univerjs/ui';
import type { IAccessor } from '@wendellhu/redi';

import { ConfirmOperation } from '../commands/operations/confirm.operation';
Expand All @@ -32,7 +32,11 @@ import { ThemeOperation } from '../commands/operations/theme.operation';
import { CreateEmptySheetCommand, DisposeCurrentUnitCommand } from '../commands/commands/unit.command';

export function LocaleMenuItemFactory(accessor: IAccessor): IMenuSelectorItem {
return {
const menuService = accessor.get(IMenuService);

const menuItemConfig = menuService.getMenuConfig(LocaleOperation.id);

return mergeMenuConfigs({
id: LocaleOperation.id,
icon: 'VueI18nIcon',
tooltip: 'i18n',
Expand All @@ -52,11 +56,15 @@ export function LocaleMenuItemFactory(accessor: IAccessor): IMenuSelectorItem {
value: LocaleType.RU_RU,
},
],
};
}, menuItemConfig);
}

export function ThemeMenuItemFactory(accessor: IAccessor): IMenuSelectorItem {
return {
const menuService = accessor.get(IMenuService);

const menuItemConfig = menuService.getMenuConfig(ThemeOperation.id);

return mergeMenuConfigs({
id: ThemeOperation.id,
title: 'Theme',
tooltip: 'Theme',
Expand All @@ -72,11 +80,15 @@ export function ThemeMenuItemFactory(accessor: IAccessor): IMenuSelectorItem {
value: defaultTheme as any,
},
],
};
}, menuItemConfig);
}

export function NotificationMenuItemFactory(accessor: IAccessor): IMenuSelectorItem {
return {
const menuService = accessor.get(IMenuService);

const menuItemConfig = menuService.getMenuConfig(NotificationOperation.id);

return mergeMenuConfigs({
id: NotificationOperation.id,
title: 'Notification',
tooltip: 'Notification',
Expand All @@ -100,11 +112,15 @@ export function NotificationMenuItemFactory(accessor: IAccessor): IMenuSelectorI
value: 'Notification Error',
},
],
};
}, menuItemConfig);
}

export function DialogMenuItemFactory(accessor: IAccessor): IMenuSelectorItem {
return {
const menuService = accessor.get(IMenuService);

const menuItemConfig = menuService.getMenuConfig(DialogOperation.id);

return mergeMenuConfigs({
id: DialogOperation.id,
title: 'Dialog',
tooltip: 'Dialog',
Expand All @@ -120,11 +136,15 @@ export function DialogMenuItemFactory(accessor: IAccessor): IMenuSelectorItem {
value: 'draggable',
},
],
};
}, menuItemConfig);
}

export function ConfirmMenuItemFactory(accessor: IAccessor): IMenuSelectorItem {
return {
const menuService = accessor.get(IMenuService);

const menuItemConfig = menuService.getMenuConfig(ConfirmOperation.id);

return mergeMenuConfigs({
id: ConfirmOperation.id,
title: 'Confirm',
tooltip: 'Confirm',
Expand All @@ -136,11 +156,15 @@ export function ConfirmMenuItemFactory(accessor: IAccessor): IMenuSelectorItem {
value: 'confirm',
},
],
};
}, menuItemConfig);
}

export function MessageMenuItemFactory(accessor: IAccessor): IMenuSelectorItem {
return {
const menuService = accessor.get(IMenuService);

const menuItemConfig = menuService.getMenuConfig(MessageOperation.id);

return mergeMenuConfigs({
id: MessageOperation.id,
title: 'Message',
tooltip: 'Message',
Expand All @@ -152,11 +176,15 @@ export function MessageMenuItemFactory(accessor: IAccessor): IMenuSelectorItem {
value: '',
},
],
};
}, menuItemConfig);
}

export function SidebarMenuItemFactory(accessor: IAccessor): IMenuSelectorItem {
return {
const menuService = accessor.get(IMenuService);

const menuItemConfig = menuService.getMenuConfig(SidebarOperation.id);

return mergeMenuConfigs({
id: SidebarOperation.id,
title: 'Sidebar',
tooltip: 'Sidebar',
Expand All @@ -172,11 +200,15 @@ export function SidebarMenuItemFactory(accessor: IAccessor): IMenuSelectorItem {
value: 'close',
},
],
};
}, menuItemConfig);
}

export function SetEditableMenuItemFactory(accessor: IAccessor): IMenuSelectorItem {
return {
const menuService = accessor.get(IMenuService);

const menuItemConfig = menuService.getMenuConfig(SetEditable.id);

return mergeMenuConfigs({
id: SetEditable.id,
title: 'Editable',
tooltip: 'Editable',
Expand All @@ -192,11 +224,15 @@ export function SetEditableMenuItemFactory(accessor: IAccessor): IMenuSelectorIt
value: 'sheet',
},
],
};
}, menuItemConfig);
}

export function SaveSnapshotSetEditableMenuItemFactory(accessor: IAccessor): IMenuSelectorItem {
return {
const menuService = accessor.get(IMenuService);

const menuItemConfig = menuService.getMenuConfig(SaveSnapshotOptions.id);

return mergeMenuConfigs({
id: SaveSnapshotOptions.id,
type: MenuItemType.SELECTOR,
title: 'Snapshot',
Expand All @@ -215,39 +251,51 @@ export function SaveSnapshotSetEditableMenuItemFactory(accessor: IAccessor): IMe
value: 'record',
},
],
};
}, menuItemConfig);
}

const UNIT_ITEM_MENU_ID = 'debugger.unit-menu-item';

export function UnitMenuItemFactory(): IMenuSelectorItem {
return {
export function UnitMenuItemFactory(accessor: IAccessor): IMenuSelectorItem {
const menuService = accessor.get(IMenuService);

const menuItemConfig = menuService.getMenuConfig(UNIT_ITEM_MENU_ID);

return mergeMenuConfigs({
id: UNIT_ITEM_MENU_ID,
title: 'Unit',
tooltip: 'Unit Commands',
type: MenuItemType.SUBITEMS,
positions: [MenuPosition.TOOLBAR_OTHERS],
};
}, menuItemConfig);
}

export function DisposeCurrentUnitMenuItemFactory(): IMenuButtonItem {
return {
export function DisposeCurrentUnitMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
const menuService = accessor.get(IMenuService);

const menuItemConfig = menuService.getMenuConfig(DisposeCurrentUnitCommand.id);

return mergeMenuConfigs({
id: DisposeCurrentUnitCommand.id,
title: 'Dispose Current Unit',
tooltip: 'Dispose Current Unit',
icon: 'DS',
type: MenuItemType.BUTTON,
positions: [UNIT_ITEM_MENU_ID],
};
}, menuItemConfig);
}

export function CreateEmptySheetMenuItemFactory(): IMenuButtonItem {
return {
export function CreateEmptySheetMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
const menuService = accessor.get(IMenuService);

const menuItemConfig = menuService.getMenuConfig(CreateEmptySheetCommand.id);

return mergeMenuConfigs({
id: CreateEmptySheetCommand.id,
title: 'Create Another Sheet',
tooltip: 'Create Another Sheet',
icon: 'CR',
type: MenuItemType.BUTTON,
positions: [UNIT_ITEM_MENU_ID],
};
}, menuItemConfig);
}
18 changes: 12 additions & 6 deletions packages/debugger/src/debugger-plugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,26 +14,27 @@
* limitations under the License.
*/

import { Plugin } from '@univerjs/core';
import { Plugin, Tools } from '@univerjs/core';
import type { Dependency } from '@wendellhu/redi';
import { Inject, Injector } from '@wendellhu/redi';

import { DebuggerController } from './controllers/debugger.controller';
import type { IUniverDebuggerConfig } from './controllers/debugger.controller';
import { DebuggerController, DefaultDebuggerConfig } from './controllers/debugger.controller';
import { PerformanceMonitorController } from './controllers/performance-monitor.controller';
import { E2EMemoryController } from './controllers/e2e/e2e-memory.controller';

export interface IDebuggerPluginConfig { }

export class UniverDebuggerPlugin extends Plugin {
static override pluginName = 'DEBUGGER_PLUGIN';

private _debuggerController!: DebuggerController;

constructor(
_config: IDebuggerPluginConfig,
private readonly _config: Partial<IUniverDebuggerConfig> = {},
@Inject(Injector) override readonly _injector: Injector
) {
super();

this._config = Tools.deepMerge({}, DefaultDebuggerConfig, this._config);
}

override onStarting(injector: Injector): void {
Expand All @@ -44,7 +45,12 @@ export class UniverDebuggerPlugin extends Plugin {
}

override onRendered(): void {
this._injector.add([DebuggerController]);
this._injector.add([
DebuggerController,
{
useFactory: () => this._injector.createInstance(DebuggerController, this._config),
},
]);
this._debuggerController = this._injector.get(DebuggerController);
}

Expand Down
3 changes: 3 additions & 0 deletions packages/docs-ui/src/basics/interfaces/component-config/i-doc-ui-plugin-config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,15 @@
* limitations under the License.
*/

import type { MenuConfig } from '@univerjs/ui';

export interface ILayout {
docContainerConfig?: DocContainerConfig;
toolbarConfig?: DocToolbarConfig;
}

export interface IUniverDocsUIConfig {
menu?: MenuConfig;
container?: HTMLElement | string;
layout?: ILayout;
}
Expand Down
Loading

0 comments on commit b253997

Please sign in to comment.