fix: 2880 in pro

packages/docs-ui/src/commands/commands/doc-header-footer.command.ts

@@ -15,11 +15,12 @@
  */
 
 import type { ICommand, IDocumentBody, IMutationInfo, JSONXActions } from '@univerjs/core';
-import { BooleanNumber, CommandType, ICommandService, IUniverInstanceService, JSONX, Tools } from '@univerjs/core';
 import type { IRichTextEditingMutationParams } from '@univerjs/docs';
-import { DocSkeletonManagerService, RichTextEditingMutation } from '@univerjs/docs';
+import { BooleanNumber, CommandType, ICommandService, IUniverInstanceService, JSONX, Tools } from '@univerjs/core';
+import { DocSelectionManagerService, DocSkeletonManagerService, RichTextEditingMutation } from '@univerjs/docs';
 import { DocumentEditArea, IRenderManagerService, type ITextRangeWithStyle } from '@univerjs/engine-render';
 import { HeaderFooterType } from '../../controllers/doc-header-footer.controller';
+import { DocSelectionRenderService } from '../../services/selection/doc-selection-render.service';
 import { SidebarDocHeaderFooterPanelOperation } from '../operations/doc-header-footer-panel.operation';
 
 function getEmptyHeaderFooterBody(): IDocumentBody {
@@ -241,3 +242,47 @@ export const OpenHeaderFooterPanelCommand: ICommand<IOpenHeaderFooterPanelParams
  return commandService.executeCommand(SidebarDocHeaderFooterPanelOperation.id, { value: 'open' });
  },
 };
+
+interface ICloseHeaderFooterParams {
+ unitId: string;
+}
+
+export const CloseHeaderFooterCommand: ICommand<ICloseHeaderFooterParams> = {
+ id: 'doc.command.close-header-footer',
+ type: CommandType.COMMAND,
+
+ handler: async (accessor, params: ICloseHeaderFooterParams) => {
+ const commandService = accessor.get(ICommandService);
+ const renderManagerService = accessor.get(IRenderManagerService);
+ const docSelectionManagerService = accessor.get(DocSelectionManagerService);
+
+ const { unitId } = params;
+
+ const renderObject = renderManagerService.getRenderById(unitId);
+ if (renderObject == null) {
+ return false;
+ }
+
+ const { scene } = renderObject;
+ const transformer = scene.getTransformerByCreate();
+ const docSkeletonManagerService = renderObject.with(DocSkeletonManagerService);
+ const docSelectionRenderService = renderObject.with(DocSelectionRenderService);
+ const skeleton = docSkeletonManagerService?.getSkeleton();
+ const viewModel = docSkeletonManagerService?.getViewModel();
+
+ if (viewModel == null || skeleton == null) {
+ return false;
+ }
+
+ // TODO: @JOCS, these codes bellow should be automatically executed?
+ docSelectionManagerService.replaceTextRanges([]); // Clear text selection.
+ transformer.clearSelectedObjects();
+ docSelectionRenderService.setSegment('');
+ docSelectionRenderService.setSegmentPage(-1);
+ viewModel.setEditArea(DocumentEditArea.BODY);
+ skeleton.calculate();
+ renderObject.mainComponent?.makeDirty(true);
+
+ return commandService.executeCommand(SidebarDocHeaderFooterPanelOperation.id, { value: 'close' });
+ },
+};

packages/docs-ui/src/commands/commands/switch-doc-mode.command.ts

@@ -19,8 +19,7 @@ import type { IRichTextEditingMutationParams } from '@univerjs/docs';
 import { CommandType, DocumentFlavor, ICommandService, IUniverInstanceService, JSONX } from '@univerjs/core';
 import { DocSelectionManagerService, RichTextEditingMutation } from '@univerjs/docs';
 
-export interface ISwitchDocModeCommandParams {
-}
+export interface ISwitchDocModeCommandParams { }
 
 export const SwitchDocModeCommand: ICommand<ISwitchDocModeCommandParams> = {
  id: 'doc.command.switch-mode',

packages/docs-ui/src/controllers/doc-header-footer.controller.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { DocumentDataModel } from '@univerjs/core';
+import type { DocumentDataModel, ICommandInfo } from '@univerjs/core';
 import type { Documents, DocumentViewModel, IMouseEvent, IPageRenderConfig, IPathProps, IPointerEvent, IRenderContext, IRenderModule, RenderComponentType } from '@univerjs/engine-render';
 import type { Nullable } from 'vitest';
 import { BooleanNumber, Disposable, DocumentFlavor, ICommandService, Inject, IUniverInstanceService, LocaleService, toDisposable, Tools } from '@univerjs/core';
@@ -23,7 +23,8 @@ import { DocSkeletonManagerService } from '@univerjs/docs';
 import { DocumentEditArea, IRenderManagerService, PageLayoutType, Path, Rect, Vector2 } from '@univerjs/engine-render';
 import { ComponentManager } from '@univerjs/ui';
 import { neoGetDocObject } from '../basics/component-tools';
-import { CoreHeaderFooterCommand } from '../commands/commands/doc-header-footer.command';
+import { CloseHeaderFooterCommand, CoreHeaderFooterCommand } from '../commands/commands/doc-header-footer.command';
+import { SwitchDocModeCommand } from '../commands/commands/switch-doc-mode.command';
 import { IEditorService } from '../services/editor/editor-manager.service';
 import { DocSelectionRenderService } from '../services/selection/doc-selection-render.service';
 import { COMPONENT_DOC_HEADER_FOOTER_PANEL } from '../views/header-footer/panel/component-name';
@@ -142,19 +143,28 @@ export class DocHeaderFooterController extends Disposable implements IRenderModu
  }
 
  private _initialize() {
- // FIXME: @Jocs, NO need to register this controller in Modern Document???
- const docDataModel = this._context.unit;
-
- const documentFlavor = docDataModel.getSnapshot().documentStyle.documentFlavor;
-
- // Only traditional document support header/footer.
- if (documentFlavor !== DocumentFlavor.TRADITIONAL) {
- return;
- }
-
  this._init();
  this._drawHeaderFooterLabel();
  this._initCustomComponents();
+ this._listenSwitchMode();
+ }
+
+ // Close header footer panel when switch mode.
+ private _listenSwitchMode() {
+ this.disposeWithMe(
+ this._commandService.beforeCommandExecuted((command: ICommandInfo) => {
+ if (SwitchDocModeCommand.id === command.id) {
+ const viewModel = this._docSkeletonManagerService.getViewModel();
+ const editArea = viewModel.getEditArea();
+
+ if (editArea !== DocumentEditArea.BODY) {
+ this._commandService.executeCommand(CloseHeaderFooterCommand.id, {
+ unitId: this._context.unitId,
+ });
+ }
+ }
+ })
+ );
  }
 
  private _initCustomComponents(): void {
@@ -184,6 +194,10 @@ export class DocHeaderFooterController extends Disposable implements IRenderModu
  return;
  }
 
+ if (!this._isTraditionalMode()) {
+ return;
+ }
+
  const { offsetX, offsetY } = evt;
 
  const {
@@ -271,6 +285,10 @@ export class DocHeaderFooterController extends Disposable implements IRenderModu
  return;
  }
 
+ if (!this._isTraditionalMode()) {
+ return;
+ }
+
  if (currentRender == null) {
  return;
  }
@@ -383,6 +401,14 @@ export class DocHeaderFooterController extends Disposable implements IRenderModu
  return editor.isReadOnly();
  }
 
+ private _isTraditionalMode() {
+ const docDataModel = this._context.unit;
+
+ const documentFlavor = docDataModel.getSnapshot().documentStyle.documentFlavor;
+
+ return documentFlavor === DocumentFlavor.TRADITIONAL;
+ }
+
  private _getDocDataModel() {
  return this._context.unit;
  }

packages/docs-ui/src/controllers/menu/menu.ts

@@ -97,6 +97,47 @@ function getInsertTableHiddenObservable(
  });
 }
 
+function getHeaderFooterDisabledObservable(accessor: IAccessor): Observable<boolean> {
+ const univerInstanceService = accessor.get(IUniverInstanceService);
+ const commandService = accessor.get(ICommandService);
+
+ return new Observable((subscriber) => {
+ const subscription0 = commandService.onCommandExecuted((command) => {
+ if (command.id === SwitchDocModeCommand.id) {
+ const docDataModel = univerInstanceService.getCurrentUniverDocInstance();
+ if (docDataModel == null) {
+ subscriber.next(true);
+ return;
+ }
+
+ const documentStyle = docDataModel.getSnapshot().documentStyle;
+ subscriber.next(documentStyle.documentFlavor !== DocumentFlavor.TRADITIONAL);
+ }
+ });
+
+ const subscription = univerInstanceService.focused$.subscribe((unitId) => {
+ if (unitId == null) {
+ subscriber.next(true);
+ return;
+ }
+
+ const docDataModel = univerInstanceService.getUnit<DocumentDataModel>(unitId);
+
+ if (docDataModel == null) {
+ subscriber.next(true);
+ return;
+ }
+
+ return subscriber.next(docDataModel.getSnapshot().documentStyle.documentFlavor !== DocumentFlavor.TRADITIONAL);
+ });
+
+ return () => {
+ subscription.unsubscribe();
+ subscription0.dispose();
+ };
+ });
+}
+
 function getTableDisabledObservable(accessor: IAccessor): Observable<boolean> {
  const docSelectionManagerService = accessor.get(DocSelectionManagerService);
  const univerInstanceService = accessor.get(IUniverInstanceService);
@@ -531,6 +572,7 @@ export function HeaderFooterMenuItemFactory(accessor: IAccessor): IMenuButtonIte
  type: MenuItemType.BUTTON,
  icon: 'HeaderFooterSingle',
  tooltip: 'toolbar.headerFooter',
+ disabled$: getHeaderFooterDisabledObservable(accessor),
  hidden$: combineLatest(getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC), getHeaderFooterMenuHiddenObservable(accessor), (one, two) => {
  return one || two;
  }),

packages/docs-ui/src/docs-ui-plugin.ts

@@ -36,6 +36,7 @@ import { DocCopyCommand, DocCutCommand, DocPasteCommand } from './commands/comma
 import { CutContentCommand, InnerPasteCommand } from './commands/commands/clipboard.inner.command';
 import { DeleteCommand, InsertCommand, UpdateCommand } from './commands/commands/core-editing.command';
 import { DeleteCustomBlockCommand, DeleteLeftCommand, DeleteRightCommand, MergeTwoParagraphCommand } from './commands/commands/delete.command';
+import { CloseHeaderFooterCommand } from './commands/commands/doc-header-footer.command';
 import { DocParagraphSettingCommand } from './commands/commands/doc-paragraph-setting.command';
 import { IMEInputCommand } from './commands/commands/ime-input.command';
 import { ResetInlineFormatTextBackgroundColorCommand, SetInlineFormatBoldCommand, SetInlineFormatCommand, SetInlineFormatFontFamilyCommand, SetInlineFormatFontSizeCommand, SetInlineFormatItalicCommand, SetInlineFormatStrikethroughCommand, SetInlineFormatSubscriptCommand, SetInlineFormatSuperscriptCommand, SetInlineFormatTextBackgroundColorCommand, SetInlineFormatTextColorCommand, SetInlineFormatUnderlineCommand } from './commands/commands/inline-format.command';
@@ -190,6 +191,7 @@ export class UniverDocsUIPlugin extends Plugin {
  DocTableDeleteRowsCommand,
  DocTableDeleteColumnsCommand,
  DocTableDeleteTableCommand,
+ CloseHeaderFooterCommand,
  DocTableTabCommand,
  TabCommand,
  AfterSpaceCommand,

packages/docs-ui/src/views/header-footer/panel/DocHeaderFooterOptions.tsx

@@ -16,11 +16,11 @@
 
 import { BooleanNumber, ICommandService, IUniverInstanceService, LocaleService, Tools, useDependency } from '@univerjs/core';
 import { Button, Checkbox, InputNumber } from '@univerjs/design';
-import { DocSelectionManagerService, DocSkeletonManagerService } from '@univerjs/docs';
+import { DocSkeletonManagerService } from '@univerjs/docs';
 import { DocumentEditArea, IRenderManagerService } from '@univerjs/engine-render';
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
-import { CoreHeaderFooterCommandId, type IHeaderFooterProps } from '../../../commands/commands/doc-header-footer.command';
+import { CloseHeaderFooterCommand, CoreHeaderFooterCommandId, type IHeaderFooterProps } from '../../../commands/commands/doc-header-footer.command';
 import { DocSelectionRenderService } from '../../../services/selection/doc-selection-render.service';
 import styles from './index.module.less';
 
@@ -33,7 +33,7 @@ export const DocHeaderFooterOptions = (props: IDocHeaderFooterOptionsProps) => {
  const univerInstanceService = useDependency(IUniverInstanceService);
  const renderManagerService = useDependency(IRenderManagerService);
  const commandService = useDependency(ICommandService);
- const docSelectionManagerService = useDependency(DocSelectionManagerService);
+
  const { unitId } = props;
 
  const docSelectionRenderService = renderManagerService.getRenderById(unitId)!.with(DocSelectionRenderService)!;
@@ -128,30 +128,9 @@ export const DocHeaderFooterOptions = (props: IDocHeaderFooterOptionsProps) => {
  };
 
  const closeHeaderFooter = () => {
- const renderObject = renderManagerService.getRenderById(unitId);
- if (renderObject == null) {
- return;
- }
-
- const { scene } = renderObject;
- const transformer = scene.getTransformerByCreate();
- const docSkeletonManagerService = renderObject.with(DocSkeletonManagerService);
- const skeleton = docSkeletonManagerService?.getSkeleton();
- const viewModel = docSkeletonManagerService?.getViewModel();
- const render = renderManagerService.getRenderById(unitId);
-
- if (render == null || viewModel == null || skeleton == null) {
- return;
- }
-
- // TODO: @JOCS, these codes bellow should be automatically executed?
- docSelectionManagerService.replaceTextRanges([]); // Clear text selection.
- transformer.clearSelectedObjects();
- docSelectionRenderService.setSegment('');
- docSelectionRenderService.setSegmentPage(-1);
- viewModel.setEditArea(DocumentEditArea.BODY);
- skeleton.calculate();
- render.mainComponent?.makeDirty(true);
+ commandService.executeCommand(CloseHeaderFooterCommand.id, {
+ unitId,
+ });
  };
 
  useEffect(() => {

packages/docs-ui/src/views/header-footer/panel/DocHeaderFooterPanel.tsx

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useState } from 'react';
 import { IUniverInstanceService, LocaleService, useDependency } from '@univerjs/core';
 import { DocSkeletonManagerService } from '@univerjs/docs';
 import { DocumentEditArea, IRenderManagerService } from '@univerjs/engine-render';
+import React, { useEffect, useState } from 'react';
 
-import styles from './index.module.less';
 import { DocHeaderFooterOptions } from './DocHeaderFooterOptions';
+import styles from './index.module.less';
 
 export const DocHeaderFooterPanel = () => {
  const localeService = useDependency(LocaleService);