opensource/univer
3
0
Fork 0
mirror of https://github.com/dream-num/univer.git synced 2026-09-01 15:29:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: refactor sheet-ui to DI pattern

Browse Source
This commit is contained in:
Wenzhao Hu
2023-07-31 21:04:01 +08:00
parent 2bb2734d20
commit f2fa12dbfe
20 changed files with 276 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/univer-sheet-ts/src/main.tsx
+13 -19
View File
@@ -3,12 +3,6 @@ import { RenderEngine } from '@univerjs/base-render';
import { SheetPlugin } from '@univerjs/base-sheets';
import { SheetUIPlugin } from '@univerjs/ui-plugin-sheets';
import { DEFAULT_WORKBOOK_DATA_DEMO } from '@univerjs/common-plugin-data';
import { OperationPlugin } from '@univerjs/sheets-plugin-operation';
import { ImportXlsxPlugin } from '@univerjs/sheets-plugin-import-xlsx';
import { OverGridImagePlugin } from '@univerjs/sheets-plugin-image';
import { FindPlugin } from '@univerjs/sheets-plugin-find';
import { DEFAULT_FORMULA_DATA_DEMO, FormulaPlugin } from '@univerjs/sheets-plugin-formula';
import { NumfmtPlugin } from '@univerjs/sheets-plugin-numfmt';
// TODO: @huwenzhao: change the following to new API
@@ -17,16 +11,13 @@ const univer = new Univer({
locale: LocaleType.EN,
});
// create univer sheet instance
const universheet = univer.createUniverSheet(DEFAULT_WORKBOOK_DATA_DEMO);
// base-render
univer.registerPlugin(RenderEngine);
// register plugins
univer.registerPlugin(SheetPlugin);
// create univer sheet instance
const universheet = univer.createUniverSheet(DEFAULT_WORKBOOK_DATA_DEMO);
univer.addUniverSheet(universheet);
// base-sheet
// ui-plugin-sheets
univer.registerPlugin(SheetUIPlugin, {
container: 'universheet',
@@ -42,12 +33,14 @@ univer.registerPlugin(SheetUIPlugin, {
},
});
FormulaPlugin.create(DEFAULT_FORMULA_DATA_DEMO).installTo(universheet);
FindPlugin.create().installTo(universheet);
universheet.installPlugin(new OperationPlugin());
universheet.installPlugin(new ImportXlsxPlugin());
universheet.installPlugin(new OverGridImagePlugin());
universheet.installPlugin(new NumfmtPlugin());
// base-sheet
// FormulaPlugin.create(DEFAULT_FORMULA_DATA_DEMO).installTo(universheet);
// FindPlugin.create().installTo(universheet);
// universheet.installPlugin(new OperationPlugin());
// universheet.installPlugin(new ImportXlsxPlugin());
// universheet.installPlugin(new OverGridImagePlugin());
// universheet.installPlugin(new NumfmtPlugin());
// use for console test
declare global {
@@ -55,4 +48,5 @@ declare global {
univer?: any;
}
}
window.univer = univer;
window.univer = univer;
packages/base-render/src/RenderEngine.ts
+1 -1
View File
@@ -28,4 +28,4 @@ export class RenderEngine extends Plugin {
getEngine(): Engine {
return this._engine;
}
}
}
packages/base-sheets/src/Services/tokens.ts
+1 -1
View File
@@ -15,4 +15,4 @@ export const ISheetPlugin = createIdentifier<SheetPlugin>('deprecated.univer.she
/** @deprecated temporary solution, we should inject SelectionManager directly */
export const ISelectionManager = createIdentifier<SelectionManager>('deprecated.univer.sheet.selection-manager');
export const ICanvasView = createIdentifier<CanvasView>('univer.sheet.canvas-view');
export const ICanvasView = createIdentifier<CanvasView>('univer.sheet.canvas-view');
packages/base-sheets/src/SheetPlugin.ts
+1 -1
View File
@@ -312,4 +312,4 @@ export class SheetPlugin extends Plugin<SheetPluginObserve, SheetContext> {
sheetInjector.add(d);
});
}
}
}
packages/base-sheets/src/View/CanvasView.ts
+1
View File
@@ -9,6 +9,7 @@ import { ISheetContext } from '../Services/tokens';
// workbook
export class CanvasView {
// TODO: rename to SheetCanvasView
private _scene: Scene;
private _views: BaseView[] = []; // worksheet
packages/base-ui/src/Basics/Register/Paste/PasteExtensionManager.ts
+1 -1
View File
@@ -99,4 +99,4 @@ export class PasteExtensionManager {
}
this._invokeAction(actionDataList);
}
}
}
packages/base-ui/src/Common/DragManager.ts
+36 -38
View File
@@ -1,38 +1,36 @@
import { Observable, ObserverManager, Plugin } from '@univerjs/core';
// export type DragObserver = {
// onKeyDownObservable: Observable<DragEvent>;
// };
export class DragManager {
private _observerManager: ObserverManager;
constructor(private _plugin: Plugin) {
this._observerManager = this._plugin.getContext().getObserverManager();
this._installObserver();
}
/**
* init Drag listener
*
* add to docs/slides/
*/
handleDragAction(element: HTMLElement) {
const DropEvent = (evt: DragEvent) => {
evt.preventDefault();
this._observerManager.requiredObserver<DragEvent>('onDropObservable', 'core')?.notifyObservers(evt);
};
const DragOverEvent = (evt: DragEvent) => {
evt.preventDefault();
};
element.addEventListener('drop', DropEvent);
element.addEventListener('dragover', DragOverEvent);
}
private _installObserver() {
// Drag
this._observerManager.addObserver('onDropObservable', 'core', new Observable());
}
}
import { Observable, ObserverManager } from '@univerjs/core';
import { Inject } from '@wendellhu/redi';
// export type DragObserver = {
// onKeyDownObservable: Observable<DragEvent>;
// };
export class DragManager {
constructor(@Inject(ObserverManager) private readonly _observerManager: ObserverManager) {
this._installObserver();
}
/**
* init Drag listener
*
* add to docs/slides/
*/
handleDragAction(element: HTMLElement) {
const DropEvent = (evt: DragEvent) => {
evt.preventDefault();
this._observerManager.requiredObserver<DragEvent>('onDropObservable', 'core')?.notifyObservers(evt);
};
const DragOverEvent = (evt: DragEvent) => {
evt.preventDefault();
};
element.addEventListener('drop', DropEvent);
element.addEventListener('dragover', DragOverEvent);
}
private _installObserver() {
// Drag
this._observerManager.addObserver('onDropObservable', 'core', new Observable());
}
}
packages/core/src/Basics/Univer.ts
+6 -3
View File
@@ -1,5 +1,6 @@
import { Injector, Ctor } from '@wendellhu/redi';
import { CommandManager } from 'src/Command';
import { UniverSheet } from './UniverSheet';
import { UniverDoc } from './UniverDoc';
import { UniverSlide } from './UniverSlide';
@@ -10,7 +11,7 @@ import { IUniverData, IWorkbookConfig } from '../Types/Interfaces';
import { UniverObserverImpl } from './UniverObserverImpl';
import { ObserverManager } from '../Observer';
import { CurrentUniverService, ICurrentUniverService } from '../Service/Current.service';
import { CommandManager } from 'src/Command';
import { IGlobalContext } from '../Service/Context.service';
/**
* Univer.
@@ -154,6 +155,7 @@ export class Univer {
[ObserverManager, { useFactory: () => this._context.getObserverManager() }],
[ICurrentUniverService, { useClass: CurrentUniverService }],
[CommandManager, { useFactory: () => this._context.getCommandManager() }],
[IGlobalContext, { useFactory: () => this._context }],
]);
}
@@ -182,9 +184,10 @@ export class Univer {
private initializePluginsForSheet(sheet: UniverSheet): void {
const plugins = this._univerPluginRegistry.getRegisterPlugins(PluginType.Sheet);
const sheetInjector = sheet._sheetInjector;
plugins.forEach((p) => {
const pluginInstance: Plugin = this._univerInjector.createInstance(p.plugin as unknown as Ctor<any>, p.options);
const pluginInstance: Plugin = sheetInjector.createInstance(p.plugin as unknown as Ctor<any>, p.options);
sheet.installPlugin(pluginInstance);
});
}
}
}
packages/core/src/Basics/UniverSheet.ts
+3 -3
View File
@@ -1,11 +1,11 @@
import { Ctor, Injector, Optional, Disposable, Dependency } from '@wendellhu/redi';
import { ObserverManager } from 'src/Observer';
import { Workbook, ColorBuilder } from '../Sheets/Domain';
import { IWorkbookConfig } from '../Types/Interfaces';
import { BasePlugin, Plugin, PluginCtor, PluginStore } from '../Plugin';
import { IOHttp, IOHttpConfig, Logger } from '../Shared';
import { SheetContext } from './SheetContext';
import { VersionCode, VersionEnv } from './Version';
import { Observer, ObserverManager } from 'src/Observer';
interface IComposedConfig {
[key: string]: any;
@@ -19,7 +19,7 @@ interface IComposedConfig {
export class UniverSheet implements Disposable {
univerSheetConfig: Partial<IWorkbookConfig>;
private readonly _sheetInjector: Injector;
readonly _sheetInjector: Injector;
private readonly _pluginStore = new PluginStore();
@@ -179,4 +179,4 @@ export class UniverSheet implements Disposable {
const dependencies: Dependency[] = [[ObserverManager, { useValue: this.context.getObserverManager() }]];
return parentInjector ? parentInjector.createChild(dependencies) : new Injector(dependencies);
}
}
}
packages/core/src/Service/Context.service.ts
+11
View File
@@ -0,0 +1,11 @@
import { createIdentifier } from '@wendellhu/redi';
import { Context } from '../Basics/Context';
/**
* Global context object
*
* @deprecated global context should be broken into smaller pieces. This service is created
* as a temporary solution to get the application running.
*/
export const IGlobalContext = createIdentifier<Context>('univer.global-context');
packages/core/src/index.ts
+2
View File
@@ -27,4 +27,6 @@ export * from './Server';
export * from './Shared';
export * from './Sheets';
export * from './Slides/Domain';
export { ICurrentUniverService } from './Service/Current.service';
export { IGlobalContext } from './Service/Context.service';
packages/ui-plugin-sheets/src/Controller/AppUIController.ts
+22 -18
View File
@@ -1,28 +1,35 @@
import { LocaleType } from '@univerjs/core';
import { SheetUIPlugin } from '../SheetUIPlugin';
import { Context, LocaleType, ObserverManager } from '@univerjs/core';
import { Inject, Injector, SkipSelf } from '@wendellhu/redi';
import { IGlobalContext } from '@univerjs/base-sheets';
import { ComponentManager, ZIndexManager } from '@univerjs/base-ui';
import { UI } from '../View';
import { SheetContainerUIController } from './SheetContainerUIController';
import { ISheetUIPluginConfig } from '../Basics';
export class AppUIController {
protected _plugin: SheetUIPlugin;
private _sheetContainerController: SheetContainerUIController;
constructor(plugin: SheetUIPlugin) {
this._plugin = plugin;
this._sheetContainerController = new SheetContainerUIController(this._plugin);
constructor(
config: ISheetUIPluginConfig,
@IGlobalContext private readonly _globalContext: Context,
@Inject(Injector) private readonly _injector: Injector,
@SkipSelf() @Inject(ObserverManager) private readonly _globalObserverManager: ObserverManager,
@Inject(ComponentManager) private readonly _componentManager: ComponentManager,
@Inject(ZIndexManager) private readonly _zIndexManager: ZIndexManager
) {
this._sheetContainerController = this._injector.createInstance(SheetContainerUIController, config);
this._injector.add([SheetContainerUIController, { useValue: this._sheetContainerController }]);
const UIConfig = this._sheetContainerController.getUIConfig();
UI.create({
context: this._plugin.getGlobalContext(),
locale: this._plugin.getGlobalContext().getLocale().getCurrentLocale(),
componentManager: this._plugin.getComponentManager(),
zIndexManager: this._plugin.getZIndexManager(),
context: this._globalContext,
locale: this._globalContext.getLocale().getCurrentLocale(),
componentManager: this._componentManager,
zIndexManager: this._zIndexManager,
changeLocale: this.changeLocale,
UIConfig,
container: this._plugin.getConfig().container,
container: config.container,
});
}
@@ -34,13 +41,10 @@ export class AppUIController {
*
*/
changeLocale = (locale: string) => {
this._plugin
.getGlobalContext()
.getLocale()
.change(locale as LocaleType);
this._globalContext.getLocale().change(locale as LocaleType);
// publish
this._plugin.getGlobalContext().getObserverManager().requiredObserver('onAfterChangeUILocaleObservable', 'core')!.notifyObservers();
this._globalObserverManager.requiredObserver('onAfterChangeUILocaleObservable', 'core')!.notifyObservers();
};
getSheetContainerController() {
packages/ui-plugin-sheets/src/Controller/CellEditorUIController.ts
+57 -55
View File
@@ -1,8 +1,11 @@
import { IPointerEvent, IMouseEvent } from '@univerjs/base-render';
import { CANVAS_VIEW_KEY, SheetPlugin } from '@univerjs/base-sheets';
import { getRefElement, CellEditExtensionManager, $$, setLastCaretPosition, handleStringToStyle, handleDomToJson, isCtrlPressed } from '@univerjs/base-ui';
import { Direction, handleStyleToString, ICellData, isKeyPrintable, PLUGIN_NAMES, Tools, UIObserver } from '@univerjs/core';
import { SheetUIPlugin } from '../SheetUIPlugin';
import { Inject, SkipSelf } from '@wendellhu/redi';
import { RefObject } from 'preact';
import { IPointerEvent, IMouseEvent, IRenderingEngine, Engine } from '@univerjs/base-render';
import { CANVAS_VIEW_KEY, CanvasView, CellEditorController, ISelectionManager, SelectionManager } from '@univerjs/base-sheets';
import { getRefElement, CellEditExtensionManager, $$, setLastCaretPosition, handleStringToStyle, handleDomToJson, isCtrlPressed, KeyboardManager } from '@univerjs/base-ui';
import { Direction, handleStyleToString, ICellData, isKeyPrintable, ObserverManager, Tools, UIObserver } from '@univerjs/core';
import { RichText } from '../View/RichText';
export class CellEditorUIController {
@@ -15,39 +18,35 @@ export class CellEditorUIController {
_richText: RichText;
private _plugin: SheetUIPlugin;
private _sheetPlugin: SheetPlugin;
private _cellEditExtensionManager: CellEditExtensionManager;
constructor(plugin: SheetUIPlugin) {
this._plugin = plugin;
this._sheetPlugin = plugin.getUniver().getCurrentUniverSheetInstance().context.getPluginManager().getRequirePluginByName<SheetPlugin>(PLUGIN_NAMES.SPREADSHEET);
constructor(
private readonly _currentRefFetcher: () => RefObject<HTMLDivElement>,
@SkipSelf() @Inject(ObserverManager) private readonly _globalObserverManager: ObserverManager,
@IRenderingEngine private readonly _renderingEngine: Engine,
@Inject(CanvasView) private readonly _sheetCanvasView: CanvasView,
@Inject(ObserverManager) private readonly _selfObserverManager: ObserverManager,
@Inject(CellEditorController) private readonly _cellEditorContorller: CellEditorController,
@ISelectionManager private readonly _selectionManager: SelectionManager,
@Inject(KeyboardManager) private readonly _keyboardManager: KeyboardManager
) {
this._initialize();
}
listenEventManager() {
this._plugin
.getContext()
.getUniver()
.getGlobalContext()
.getObserverManager()
.requiredObserver<UIObserver<string>>('onUIChangeObservable', 'core')
.add((msg) => {
const value = msg.value;
switch (msg.name) {
case 'fontWeight':
// this.setUndo();
console.info('fontWeightfontWeight====', msg);
this._richText.cellTextStyle.updateFormat('bl', value ? '1' : '0');
break;
case 'redo':
// this.setRedo();
break;
}
});
this._globalObserverManager.requiredObserver<UIObserver<string>>('onUIChangeObservable', 'core').add((msg) => {
const value = msg.value;
switch (msg.name) {
case 'fontWeight':
// this.setUndo();
console.info('fontWeightfontWeight====', msg);
this._richText.cellTextStyle.updateFormat('bl', value ? '1' : '0');
break;
case 'redo':
// this.setRedo();
break;
}
});
}
// Get the RichText component
@@ -78,6 +77,7 @@ export class CellEditorUIController {
* @param clear Whether to clear the cell
* @returns
*/
// eslint-disable-next-line max-lines-per-function
enterEditMode(clear: boolean = false) {
this.focusEditEle();
// setTimeout(() => {
@@ -93,9 +93,9 @@ export class CellEditorUIController {
}, 1);
this.isEditMode = true;
this._sheetPlugin.getCellEditorController().setEditMode(this.isEditMode);
this._cellEditorContorller.setEditMode(this.isEditMode);
const currentCell = this._sheetPlugin.getSelectionManager().getCurrentCellModel();
const currentCell = this._selectionManager.getCurrentCellModel();
if (!currentCell) {
return false;
@@ -119,8 +119,9 @@ export class CellEditorUIController {
endY = currentCell.endY;
}
const scrollX = this._sheetPlugin.getMainScene()?.getViewport(CANVAS_VIEW_KEY.VIEW_TOP)?.actualScrollX || 0;
const scrollY = this._sheetPlugin.getMainScene()?.getViewport(CANVAS_VIEW_KEY.VIEW_LEFT)?.actualScrollY || 0;
const mainScene = this._renderingEngine.getScene(CANVAS_VIEW_KEY.MAIN_SCENE);
const scrollX = mainScene?.getViewport(CANVAS_VIEW_KEY.VIEW_TOP)?.actualScrollX || 0;
const scrollY = mainScene?.getViewport(CANVAS_VIEW_KEY.VIEW_LEFT)?.actualScrollY || 0;
this._richTextEle.style.left = `${startX - scrollX}px`;
this._richTextEle.style.top = `${startY - scrollY}px`;
@@ -129,7 +130,7 @@ export class CellEditorUIController {
this._richTextEle.style.minHeight = `${endY - startY}px`;
this._richTextEle.style.borderWidth = '2px';
const univerContainerContentRef = this._plugin.getAppUIController().getSheetContainerController().getContentRef();
const univerContainerContentRef = this._currentRefFetcher();
const sheetContentRect = getRefElement(univerContainerContentRef).getBoundingClientRect();
this._richTextEle.style.maxWidth = `${sheetContentRect.width - startX + scrollX}px`;
@@ -138,7 +139,7 @@ export class CellEditorUIController {
this._richTextEle.style.transform = '';
// this._plugin.showMainByName('cellEditor', true).then(() => {
let cellValue = this._sheetPlugin.getCellEditorController().getSelectionValue();
let cellValue = this._cellEditorContorller.getSelectionValue();
// Intercept, the formula needs to modify the value of the edit state
const cell = this._cellEditExtensionManager.handle({
@@ -156,7 +157,7 @@ export class CellEditorUIController {
}
this._richText.setValue(cellValue);
const style = this._sheetPlugin.getCellEditorController().getSelectionStyle();
const style = this._cellEditorContorller.getSelectionStyle();
this._richTextEditEle.style.cssText = '';
@@ -166,7 +167,7 @@ export class CellEditorUIController {
}
// });
this._sheetPlugin.getCellEditorController().setCurrentEditRangeData();
this._cellEditorContorller.setCurrentEditRangeData();
}
exitEditMode() {
@@ -175,7 +176,7 @@ export class CellEditorUIController {
if (!this.isEditMode) return;
this.isEditMode = false;
this._sheetPlugin.getCellEditorController().setEditMode(this.isEditMode);
this._cellEditorContorller.setEditMode(this.isEditMode);
// this._plugin.showMainByName('cellEditor', false).then(() => {
const value = handleDomToJson(this._richTextEditEle);
const text = this._richTextEditEle.innerText;
@@ -199,7 +200,7 @@ export class CellEditorUIController {
if (Tools.isPlainObject(style)) {
cell.s = style;
}
this._sheetPlugin.getCellEditorController().setCurrentEditRangeValue(cell);
this._cellEditorContorller.setCurrentEditRangeValue(cell);
this.hideEditContainer();
}
@@ -222,7 +223,7 @@ export class CellEditorUIController {
// this._initRegisterComponent();
// If other plugins are loaded asynchronously, they may be initialized after the rendering layer is loaded, and they will not receive obs listeners.
const main = this._sheetPlugin.getMainComponent();
const main = this._sheetCanvasView.getSheetView().getSpreadsheet();
main.onDblclickObserver.add((evt: IPointerEvent | IMouseEvent) => {
// Prevent left + right double click
@@ -251,23 +252,24 @@ export class CellEditorUIController {
this.hideEditContainer();
// init event
this._plugin.getKeyboardManager().handleKeyboardAction(this._richTextEditEle);
this._keyboardManager.handleKeyboardAction(this._richTextEditEle);
this._handleKeyboardObserver();
// Get the display status of the formula prompt box
this._richText.hooks.set('onKeyDown', (event: KeyboardEvent) => {
this._plugin.getObserver('onRichTextKeyDownObservable')?.notifyObservers(event);
this._selfObserverManager.getObserver<Event>('onRichTextKeyDownObservable')?.notifyObservers(event);
});
// Get the display status of the formula prompt box
this._richText.hooks.set('onKeyUp', (event: KeyboardEvent) => {
this._plugin.getObserver('onRichTextKeyUpObservable')?.notifyObservers(event);
this._selfObserverManager.getObserver<Event>('onRichTextKeyUpObservable')?.notifyObservers(event);
});
}
private _handleKeyboardObserver() {
const onKeyDownObservable = this._plugin.getGlobalContext().getObserverManager().getObserver<KeyboardEvent>('onKeyDownObservable', 'core');
const onKeyCompositionStartObservable = this._plugin.getGlobalContext().getObserverManager().getObserver<CompositionEvent>('onKeyCompositionStartObservable', 'core');
const onKeyDownObservable = this._globalObserverManager.getObserver<KeyboardEvent>('onKeyDownObservable', 'core');
const onKeyCompositionStartObservable = this._globalObserverManager.getObserver<CompositionEvent>('onKeyCompositionStartObservable', 'core');
const selectionManager = this._selectionManager;
if (onKeyDownObservable && !onKeyDownObservable.hasObservers()) {
onKeyDownObservable.add((evt: KeyboardEvent) => {
if (!isCtrlPressed(evt) && isKeyPrintable(evt.key)) {
@@ -280,10 +282,10 @@ export class CellEditorUIController {
if (this.isEditMode) {
this.exitEditMode();
const currentCell = this._sheetPlugin.getSelectionManager().getCurrentCellModel();
const currentCell = selectionManager.getCurrentCellModel();
if (!currentCell?.isMerged) {
// move to cell below
this._sheetPlugin.getSelectionManager().move(Direction.BOTTOM);
selectionManager.move(Direction.BOTTOM);
}
} else {
this.enterEditMode();
@@ -298,31 +300,31 @@ export class CellEditorUIController {
case 'ArrowUp':
if (!this.isEditMode) {
this._sheetPlugin.getSelectionManager().move(Direction.TOP);
selectionManager.move(Direction.TOP);
}
break;
case 'ArrowDown':
if (!this.isEditMode) {
this._sheetPlugin.getSelectionManager().move(Direction.BOTTOM);
selectionManager.move(Direction.BOTTOM);
}
break;
case 'ArrowLeft':
if (!this.isEditMode) {
this._sheetPlugin.getSelectionManager().move(Direction.LEFT);
selectionManager.move(Direction.LEFT);
}
break;
case 'ArrowRight':
if (!this.isEditMode) {
this._sheetPlugin.getSelectionManager().move(Direction.RIGHT);
selectionManager.move(Direction.RIGHT);
}
break;
case 'Tab':
if (!this.isEditMode) {
this._sheetPlugin.getSelectionManager().move(Direction.RIGHT);
selectionManager.move(Direction.RIGHT);
}
evt.preventDefault();
break;
packages/ui-plugin-sheets/src/Controller/CountBarUIController.ts
+16 -19
View File
@@ -1,14 +1,18 @@
import { SheetPlugin } from '@univerjs/base-sheets';
import { RangeList, Plugin, Tools, PLUGIN_NAMES, CommandManager, SheetActionBase, SetZoomRatioAction, UIObserver } from '@univerjs/core';
import { Inject } from '@wendellhu/redi';
import { ISelectionManager, SelectionManager } from '@univerjs/base-sheets';
import { RangeList, Tools, CommandManager, SheetActionBase, SetZoomRatioAction, UIObserver, ICurrentUniverService, ObserverManager } from '@univerjs/core';
import { CountBar } from '../View/CountBar';
export class CountBarUIController {
protected _countBar: CountBar;
protected _plugin: Plugin;
constructor(plugin: Plugin) {
this._plugin = plugin;
constructor(
@ICurrentUniverService private readonly _currentUniverService: ICurrentUniverService,
@ISelectionManager private readonly _selectionManager: SelectionManager,
@Inject(ObserverManager) private readonly _observerManager: ObserverManager
) {
CommandManager.getActionObservers().add((event) => {
const action = event.action as SheetActionBase<any>;
const data = event.data;
@@ -22,7 +26,7 @@ export class CountBarUIController {
}
const workbook = action.getWorkBook();
const unitId = workbook.getUnitId();
const currentWorkbook = this._plugin.getContext().getUniver().getCurrentUniverSheetInstance().getWorkBook();
const currentWorkbook = this._currentUniverService.getCurrentUniverSheetInstance().getWorkBook();
const currentUnitId = currentWorkbook.getUnitId();
if (unitId === currentUnitId) {
switch (data.actionName) {
@@ -33,15 +37,9 @@ export class CountBarUIController {
}
}
});
const manager = plugin
.getContext()
.getUniver()
.getCurrentUniverSheetInstance()
.context.getPluginManager()
.getRequirePluginByName<SheetPlugin>(PLUGIN_NAMES.SPREADSHEET)
.getSelectionManager();
plugin.getObserver('onChangeSelectionObserver')?.add(() => {
const rangeList = manager.getActiveRangeList();
this._observerManager.getObserver('onChangeSelectionObserver')?.add(() => {
const rangeList = this._selectionManager.getActiveRangeList();
if (rangeList && this._countBar) {
this._totalRangeList(rangeList);
}
@@ -69,8 +67,7 @@ export class CountBarUIController {
protected _totalRangeList(rangeList: RangeList): void {
let rectList = rangeList.getRangeList();
let recList: string[] = [];
let plugin = this._plugin;
let workbook = plugin.getContext().getUniver().getCurrentUniverSheetInstance().getWorkBook();
let workbook = this._currentUniverService.getCurrentUniverSheetInstance().getWorkBook();
let worksheet = workbook.getActiveSheet();
let cellMatrix = worksheet.getCellMatrix();
let avg = 0;
@@ -111,6 +108,6 @@ export class CountBarUIController {
}
protected _setUIObserve<T>(type: string, msg: UIObserver<T>) {
this._plugin.getContext().getObserverManager().requiredObserver<UIObserver<T>>(type, 'core').notifyObservers(msg);
this._observerManager.requiredObserver<UIObserver<T>>(type, 'core').notifyObservers(msg);
}
}
packages/ui-plugin-sheets/src/Controller/FormulaBarUIController.ts
+13 -14
View File
@@ -1,24 +1,18 @@
import { SheetPlugin, SelectionControl } from '@univerjs/base-sheets';
import { Inject } from '@wendellhu/redi';
import { SelectionControl } from '@univerjs/base-render/src/Component/Sheets/Selection/SelectionControl';
import { CellInputExtensionManager } from '@univerjs/base-ui';
import { INamedRange, PLUGIN_NAMES } from '@univerjs/core';
import { SheetUIPlugin } from '..';
import { ICurrentUniverService, INamedRange, ObserverManager } from '@univerjs/core';
import { FormulaBar } from '../View/FormulaBar';
export class FormulaBarUIController {
private _formulaBar: FormulaBar;
private _plugin: SheetUIPlugin;
private _sheetPlugin: SheetPlugin;
private _cellInputExtensionManager: CellInputExtensionManager;
private _namedRanges: INamedRange[];
constructor(plugin: SheetUIPlugin) {
this._plugin = plugin;
this._sheetPlugin = plugin.getUniver().getCurrentUniverSheetInstance().context.getPluginManager().getPluginByName<SheetPlugin>(PLUGIN_NAMES.SPREADSHEET)!;
constructor(@Inject(ObserverManager) private readonly _observerManager: ObserverManager, @ICurrentUniverService private readonly _currentUniverService: ICurrentUniverService) {
this._initialize();
}
@@ -34,7 +28,7 @@ export class FormulaBarUIController {
}
private _initialize() {
this._sheetPlugin.getObserver('onChangeSelectionObserver')?.add((selectionControl: SelectionControl) => {
this._observerManager.getObserver<SelectionControl>('onChangeSelectionObserver')?.add((selectionControl: SelectionControl) => {
const currentCell = selectionControl.model.currentCell;
if (currentCell) {
@@ -59,7 +53,12 @@ export class FormulaBarUIController {
};
}
const cellData = this._sheetPlugin.getWorkbook().getActiveSheet().getRange(currentRangeData).getObjectValue({ isIncludeStyle: true });
const cellData = this._currentUniverService
.getCurrentUniverSheetInstance()
.getWorkBook()
.getActiveSheet()
.getRange(currentRangeData)
.getObjectValue({ isIncludeStyle: true });
if (cellData) {
let cellValue = String(cellData.m || cellData.v || '');
@@ -90,7 +89,7 @@ export class FormulaBarUIController {
private setFormulaBar() {
// update named ranges data
this._namedRanges = this._sheetPlugin.getContext().getWorkBook().getConfig().namedRanges;
this._namedRanges = this._currentUniverService.getCurrentUniverSheetInstance().getWorkBook().getConfig().namedRanges;
const list = this._namedRanges.map((namedRange) => ({
value: namedRange.name,
packages/ui-plugin-sheets/src/Controller/InfoBarUIController.ts
+5 -7
View File
@@ -1,5 +1,6 @@
import { ICurrentUniverService } from '@univerjs/core';
import { InfoBarModel } from '../Model/InfoBarModel';
import { SheetUIPlugin } from '../SheetUIPlugin';
import { InfoBar } from '../View/InfoBar';
type IProps = {
@@ -20,12 +21,9 @@ export class InfoBarUIController {
private _infoBar: InfoBar;
private _plugin: SheetUIPlugin;
private _infoList: BaseInfoBarProps;
constructor(plugin: SheetUIPlugin) {
this._plugin = plugin;
constructor(@ICurrentUniverService private readonly _currentUniverService: ICurrentUniverService) {
}
getComponent = (ref: InfoBar) => {
@@ -45,7 +43,7 @@ export class InfoBarUIController {
}
private _refreshComponent(): void {
const name = this._plugin.getUniver().getCurrentUniverSheetInstance().getWorkBook().getConfig().name;
const name = this._currentUniverService.getCurrentUniverSheetInstance().getWorkBook().getConfig().name;
this._infoBarModel = new InfoBarModel(name);
this._infoList = {
back: {
@@ -68,4 +66,4 @@ export class InfoBarUIController {
},
};
}
}
}
packages/ui-plugin-sheets/src/Controller/RightMenuUIController.ts
+29 -24
View File
@@ -1,8 +1,8 @@
import { IMouseEvent, IPointerEvent } from '@univerjs/base-render';
import { SheetPlugin } from '@univerjs/base-sheets';
import { BaseMenuItem, BaseSelectChildrenProps, ComponentChildren } from '@univerjs/base-ui';
import { PLUGIN_NAMES, Tools, UIObserver } from '@univerjs/core';
import { SheetUIPlugin } from '..';
import { BaseMenuItem, BaseSelectChildrenProps, ComponentChildren, ComponentManager } from '@univerjs/base-ui';
import { ICurrentUniverService, ObserverManager, Tools, UIObserver } from '@univerjs/core';
import { Inject } from '@wendellhu/redi';
import { CanvasView } from '@univerjs/base-sheets';
import { DefaultRightMenuConfig, SheetRightMenuConfig } from '../Basics';
import { RightMenu, RightMenuInput, RightMenuItem } from '../View';
import styles from '../View/RightMenu/index.module.less';
@@ -29,21 +29,20 @@ export interface RightMenuProps extends BaseMenuItem {
}
export class RightMenuUIController {
private _plugin: SheetUIPlugin;
private _sheetPlugin: SheetPlugin;
private _rightMenu: RightMenu;
private _menuList: RightMenuProps[];
private _config: SheetRightMenuConfig;
constructor(plugin: SheetUIPlugin, config?: SheetRightMenuConfig) {
this._plugin = plugin;
this._sheetPlugin = plugin.getUniver().getCurrentUniverSheetInstance().context.getPluginManager().getPluginByName<SheetPlugin>(PLUGIN_NAMES.SPREADSHEET)!;
// eslint-disable-next-line max-lines-per-function
constructor(
config: SheetRightMenuConfig | undefined,
@Inject(CanvasView) private readonly _sheetCanvasView: CanvasView,
@Inject(ComponentManager) private readonly _componentManager: ComponentManager,
@Inject(ObserverManager) private readonly _observerManager: ObserverManager,
@ICurrentUniverService private readonly _currentUniverService: ICurrentUniverService
) {
this._config = Tools.deepMerge({}, DefaultRightMenuConfig, config);
this._menuList = [
@@ -303,7 +302,7 @@ export class RightMenuUIController {
}
setUIObserve<T>(msg: UIObserver<T>) {
this._plugin.getContext().getObserverManager().requiredObserver<UIObserver<T>>('onUIChangeObservable', 'core').notifyObservers(msg);
this._observerManager.requiredObserver<UIObserver<T>>('onUIChangeObservable', 'core').notifyObservers(msg);
}
insertRow() {
@@ -342,8 +341,9 @@ export class RightMenuUIController {
}
setRowHeight(e: Event) {
console.dir(this._plugin.getContext().getUniver().getCurrentUniverSheetInstance().getWorkBook().getActiveSheet().getConfig());
console.dir(this._plugin.getContext().getUniver().getCurrentUniverSheetInstance().getWorkBook().getStyles());
const univerSheet = this._currentUniverService.getCurrentUniverSheetInstance();
console.dir(univerSheet.getWorkBook().getActiveSheet().getConfig());
console.dir(univerSheet.getWorkBook().getStyles());
if ((e as KeyboardEvent).key !== 'Enter') {
return;
@@ -390,14 +390,19 @@ export class RightMenuUIController {
}
private _initialize() {
this._plugin.getComponentManager().register(RightMenuInput.name, RightMenuInput);
this._plugin.getComponentManager().register(RightMenuItem.name, RightMenuItem);
const componentManager = this._componentManager;
componentManager.register(RightMenuInput.name, RightMenuInput);
componentManager.register(RightMenuItem.name, RightMenuItem);
this._sheetPlugin.getMainComponent().onPointerDownObserver.add((evt: IPointerEvent | IMouseEvent) => {
if (evt.button === 2) {
evt.preventDefault();
this._rightMenu.handleContextMenu(evt);
}
});
// TODO: export MainComponent as a public module of base-sheets
this._sheetCanvasView
.getSheetView()
.getSpreadsheet()
.onPointerDownObserver.add((evt: IPointerEvent | IMouseEvent) => {
if (evt.button === 2) {
evt.preventDefault();
this._rightMenu.handleContextMenu(evt);
}
});
}
}
packages/ui-plugin-sheets/src/Controller/SheetBarUIContruller.ts
+24 -22
View File
@@ -1,7 +1,6 @@
import { BaseMenuItem, BaseUlProps, ColorPicker, CustomComponent } from '@univerjs/base-ui';
import { BaseMenuItem, BaseUlProps, ColorPicker, ComponentManager, CustomComponent } from '@univerjs/base-ui';
import {
Nullable,
Plugin,
CommandManager,
SheetActionBase,
UIObserver,
@@ -13,11 +12,14 @@ import {
SetWorkSheetActivateAction,
SetWorkSheetStatusAction,
RemoveSheetAction,
ICurrentUniverService,
ObserverManager,
} from '@univerjs/core';
import { SheetUIPlugin, SHEET_UI_PLUGIN_NAME } from '..';
import { Inject } from '@wendellhu/redi';
import { SheetBar } from '../View/SheetBar';
import styles from '../View/SheetBar/index.module.less';
import { SheetBarMenuItem } from '../View/SheetBar/SheetBarMenu';
import { SHEET_UI_PLUGIN_NAME } from '../Basics';
interface SheetUl extends BaseMenuItem {
label?: CustomComponent | string;
@@ -33,8 +35,6 @@ export interface SheetUlProps extends BaseUlProps {
export class SheetBarUIController {
protected _sheetBar: SheetBar;
protected _plugin: Plugin;
protected _sheetUl: SheetUl[];
protected _dataId: string;
@@ -45,9 +45,14 @@ export class SheetBarUIController {
protected _menuList: SheetBarMenuItem[];
constructor(plugin: Plugin) {
let that = this;
this._plugin = plugin;
// eslint-disable-next-line max-lines-per-function
constructor(
@ICurrentUniverService private readonly _currentUniverService: ICurrentUniverService,
@Inject(ComponentManager) private readonly _componentManager: ComponentManager,
@Inject(ObserverManager) private readonly _observerManager: ObserverManager
) {
const that = this;
this._sheetUl = [
{
label: 'sheetConfig.delete',
@@ -74,7 +79,7 @@ export class SheetBarUIController {
children: [
{
label: {
name: this._plugin.getPluginName() + ColorPicker.name,
name: SHEET_UI_PLUGIN_NAME + ColorPicker.name,
props: {
onClick: (color: string) => {
this.setUIObserve('onUIChangeObservable', {
@@ -105,10 +110,9 @@ export class SheetBarUIController {
},
},
];
this._plugin
.getPluginByName<SheetUIPlugin>(SHEET_UI_PLUGIN_NAME)
?.getComponentManager()
.register(this._plugin.getPluginName() + ColorPicker.name, ColorPicker);
this._componentManager.register(SHEET_UI_PLUGIN_NAME + ColorPicker.name, ColorPicker);
CommandManager.getActionObservers().add((event) => {
const action = event.action as SheetActionBase<any>;
const data = event.data;
@@ -123,7 +127,7 @@ export class SheetBarUIController {
const workbook = action.getWorkBook();
const unitId = workbook.getUnitId();
const currentWorkbook = this._plugin.getUniver().getCurrentUniverSheetInstance().getWorkBook();
const currentWorkbook = this._currentUniverService.getCurrentUniverSheetInstance().getWorkBook();
const currentUnitId = currentWorkbook.getUnitId();
if (unitId === currentUnitId) {
switch (data.actionName) {
@@ -144,10 +148,8 @@ export class SheetBarUIController {
}
}
});
this._plugin
.getPluginByName<SheetUIPlugin>(SHEET_UI_PLUGIN_NAME)
?.getComponentManager()
.register(this._plugin.getPluginName() + ColorPicker.name, ColorPicker);
this._componentManager.register(SHEET_UI_PLUGIN_NAME + ColorPicker.name, ColorPicker);
}
getComponent = (ref: SheetBar) => {
@@ -156,7 +158,7 @@ export class SheetBarUIController {
};
setUIObserve<T>(type: string, msg: UIObserver<T>) {
this._plugin.getContext().getObserverManager().requiredObserver<UIObserver<T>>(type, 'core').notifyObservers(msg);
this._observerManager.requiredObserver<UIObserver<T>>(type, 'core').notifyObservers(msg);
}
getSheetBar(): SheetBar {
@@ -229,7 +231,7 @@ export class SheetBarUIController {
});
list.forEach((ele, index) => {
if (ele.sheetId === sheetId) {
this._plugin.getUniver().getCurrentUniverSheetInstance().getWorkBook().setSheetOrder(ele.sheetId, index);
this._currentUniverService.getCurrentUniverSheetInstance().getWorkBook().setSheetOrder(ele.sheetId, index);
}
});
};
@@ -241,7 +243,7 @@ export class SheetBarUIController {
menuList: this._menuList,
selectSheet: (event: Event, data: { item: SheetUlProps }) => {
this._dataId = data.item.sheetId;
const sheet = this._plugin.getUniver().getCurrentUniverSheetInstance().getWorkBook().getSheetBySheetId(this._dataId);
const sheet = this._currentUniverService.getCurrentUniverSheetInstance().getWorkBook().getSheetBySheetId(this._dataId);
if (sheet) {
sheet.activate();
}
@@ -259,7 +261,7 @@ export class SheetBarUIController {
}
protected _refreshSheetData(): void {
const workbook = this._plugin.getUniver().getCurrentUniverSheetInstance().getWorkBook();
const workbook = this._currentUniverService.getCurrentUniverSheetInstance().getWorkBook();
const sheets = workbook.getSheets();
this._menuList = sheets.map((sheet, index) => ({
label: sheet.getName(),
packages/ui-plugin-sheets/src/Controller/SheetContainerUIController.ts
+31 -32
View File
@@ -1,8 +1,9 @@
import { DragManager, getRefElement, Prompt, SlotManager, ZIndexManager } from '@univerjs/base-ui';
import { LocaleType } from '@univerjs/core';
import { Inject, Injector } from '@wendellhu/redi';
import { ISheetUIPluginConfig } from '../Basics';
import { SheetUIPlugin } from '../SheetUIPlugin';
import { Inject, Injector, Self, SkipSelf } from '@wendellhu/redi';
import { ComponentManager, DragManager, getRefElement, Prompt, SlotManager } from '@univerjs/base-ui';
import { Context, LocaleType, IGlobalContext, ObserverManager } from '@univerjs/core';
import { ISheetUIPluginConfig } from '../Basics/Interfaces/ComponentConfig/ISheetUIPluginConfig';
import { SheetContainer } from '../View';
import { CellEditorUIController } from './CellEditorUIController';
import { CountBarUIController } from './CountBarUIController';
@@ -13,9 +14,8 @@ import { SheetBarUIController } from './SheetBarUIContruller';
import { SlotController } from './SlotController';
import { ToolbarUIController } from './ToolbarUIController';
// NOTE: is this class necessary? Could be merged to AppUIConrainer
export class SheetContainerUIController {
protected _plugin: SheetUIPlugin;
private _sheetContainer: SheetContainer;
private _toolbarController: ToolbarUIController;
@@ -24,8 +24,6 @@ export class SheetContainerUIController {
private _slotManager: SlotManager;
private _zIndexManager: ZIndexManager;
private _cellEditorUIController: CellEditorUIController;
private _formulaBarUIController: FormulaBarUIController;
@@ -42,24 +40,29 @@ export class SheetContainerUIController {
private _dragManager: DragManager;
constructor(plugin: SheetUIPlugin, @Inject(Injector) private readonly _injector: Injector) {
this._plugin = plugin;
this._config = this._plugin.getConfig();
this._initialize();
constructor(
config: ISheetUIPluginConfig,
@IGlobalContext private readonly _globalContext: Context,
@SkipSelf() @Inject(ObserverManager) private readonly _globalObserverManager: ObserverManager,
@Self() @Inject(ObserverManager) private readonly _observerManager: ObserverManager,
@Inject(Injector) private readonly _injector: Injector,
@Inject(ComponentManager) private readonly _componentManager: ComponentManager
) {
this._config = config;
this._slotController = new SlotController();
this._slotManager = new SlotManager();
this._toolbarController = this._injector.createInstance(ToolbarUIController, this._config.layout?.toolbarConfig);
this._cellEditorUIController = new CellEditorUIController(this._plugin);
this._formulaBarUIController = new FormulaBarUIController(this._plugin);
this._infoBarController = new InfoBarUIController(this._plugin);
this._rightMenuController = new RightMenuUIController(this._plugin, this._config.layout?.rightMenuConfig);
this._countBarController = new CountBarUIController(this._plugin);
this._sheetBarController = new SheetBarUIController(this._plugin);
this._cellEditorUIController = this._injector.createInstance(CellEditorUIController, () => this.getContentRef());
this._formulaBarUIController = this._injector.createInstance(FormulaBarUIController);
this._infoBarController = this._injector.createInstance(InfoBarUIController);
this._rightMenuController = this._injector.createInstance(RightMenuUIController, this._config.layout?.rightMenuConfig);
this._countBarController = this._injector.createInstance(CountBarUIController);
this._sheetBarController = this._injector.createInstance(SheetBarUIController);
this._dragManager = this._injector.createInstance(DragManager);
// 插入prompt组件
this._plugin.getComponentManager().register(Prompt.name, Prompt);
this._componentManager.register(Prompt.name, Prompt);
this._slotManager.setSlotComponent('main', {
name: Prompt.name,
component: {
@@ -70,7 +73,7 @@ export class SheetContainerUIController {
getUIConfig() {
const config = {
context: this._plugin.getGlobalContext(),
context: this._globalContext,
config: this._config,
changeLocale: this.changeLocale,
getComponent: this.getComponent,
@@ -115,9 +118,9 @@ export class SheetContainerUIController {
// 获取SheetContainer组件
getComponent = (ref: SheetContainer) => {
this._sheetContainer = ref;
this._plugin.getObserver('onUIDidMount')?.notifyObservers(this._sheetContainer);
this._plugin.getGlobalContext().getObserverManager().requiredObserver<boolean>('onUIDidMountObservable', 'core').notifyObservers(true);
this._observerManager.getObserver<SheetContainer>('onUIDidMount')?.notifyObservers(this._sheetContainer);
this._globalObserverManager.requiredObserver<boolean>('onUIDidMountObservable', 'core').notifyObservers(true);
this.setSheetContainer();
};
@@ -136,7 +139,7 @@ export class SheetContainerUIController {
.change(locale as LocaleType);
// publish
this._plugin.getGlobalContext().getObserverManager().requiredObserver('onAfterChangeUILocaleObservable', 'core')!.notifyObservers();
this._globalObserverManager.requiredObserver('onAfterChangeUILocaleObservable', 'core')!.notifyObservers();
};
getContentRef() {
@@ -166,15 +169,11 @@ export class SheetContainerUIController {
UIDidMount(cb: Function) {
if (this._sheetContainer) return cb(this._sheetContainer);
this._plugin.getObserver('onUIDidMount')?.add(() => cb(this._sheetContainer));
}
private _initialize() {
this._dragManager = new DragManager(this._plugin);
this._observerManager.getObserver('onUIDidMount')?.add(() => cb(this._sheetContainer));
}
private setSheetContainer() {
// handle drag event
this._dragManager.handleDragAction(getRefElement(this._sheetContainer));
}
}
}
packages/ui-plugin-sheets/src/SheetUIPlugin.ts
+3 -7
View File
@@ -10,7 +10,7 @@ import { IToolbarItemProps } from './Controller/ToolbarUIController';
import { zh, en } from './Locale';
export class SheetUIPlugin extends Plugin<SheetUIPluginObserve, Context> {
static override type = PluginType.Univer;
static override type = PluginType.Sheet;
private _appUIController: AppUIController;
@@ -62,7 +62,6 @@ export class SheetUIPlugin extends Plugin<SheetUIPluginObserve, Context> {
this._sheetInjector.add([KeyboardManager]);
this._sheetInjector.add([RegisterManager]);
this._sheetInjector.add([ComponentManager]);
this._sheetInjector.add([AppUIController]); // TODO: remove plugin
this._sheetInjector.add([ZIndexManager]);
// TODO: maybe we don't have to instantiate these dependencies manually
@@ -70,11 +69,8 @@ export class SheetUIPlugin extends Plugin<SheetUIPluginObserve, Context> {
this._keyboardManager = this._sheetInjector.get(KeyboardManager);
this._zIndexManager = this._sheetInjector.get(ZIndexManager);
this._registerManager = this._sheetInjector.get(RegisterManager);
this._appUIController = this._sheetInjector.get(AppUIController);
}
getConfig() {
return this._config;
this._appUIController = this._sheetInjector.createInstance(AppUIController, this._config);
}
initRender() {
@@ -170,4 +166,4 @@ export class SheetUIPlugin extends Plugin<SheetUIPluginObserve, Context> {
deleteToolButton(name: string) {
this._appUIController.getSheetContainerController().getToolbarController().deleteToolbarConfig(name);
}
}
}