fix: improve Docs table menus and comment interactions (#7871)

Author: DR-Univer

packages/docs-ui/src/controllers/render-controllers/__tests__/doc-paragraph-placeholder.render-controller.spec.ts

@@ -15,9 +15,14 @@
  */
 
 import type { IDocumentBody, IParagraph } from '@univerjs/core';
-import type { IDocumentSkeletonLine, IDocumentSkeletonPage } from '@univerjs/engine-render';
+import type { IDocumentSkeletonLine, IDocumentSkeletonPage, UniverRenderingContext } from '@univerjs/engine-render';
 import { DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, DocumentFlavor, NamedStyleType } from '@univerjs/core';
-import { DocumentSkeletonPageType, GlyphType, LineType, setDocsTableRenderViewportProvider } from '@univerjs/engine-render';
+import {
+    DocumentSkeletonPageType,
+    GlyphType,
+    LineType,
+    setDocsTableRenderViewportProvider,
+} from '@univerjs/engine-render';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import {
     drawParagraphPlaceholders,
@@ -359,12 +364,46 @@ describe('doc paragraph placeholder render controller', () => {
         }]);
     });
 
+    it('paints hints at half the inherited opacity without fading subsequent document content', () => {
+        const alphaStack: number[] = [];
+        const paintedAlphas: number[] = [];
+        const context = {
+            globalAlpha: 0.8,
+            save() {
+                alphaStack.push(this.globalAlpha);
+            },
+            restore() {
+                this.globalAlpha = alphaStack.pop()!;
+            },
+            beginPath: vi.fn(),
+            clip: vi.fn(),
+            closePath: vi.fn(),
+            rectByPrecision: vi.fn(),
+            fillText() {
+                paintedAlphas.push(this.globalAlpha);
+            },
+        };
+        drawParagraphPlaceholders(context as unknown as UniverRenderingContext, [{
+            fontFamily: 'Arial',
+            fontSize: 16,
+            fontWeight: 'normal',
+            maxWidth: 200,
+            text: 'Hint',
+            x: 20,
+            y: 40,
+        }]);
+        expect(paintedAlphas).toEqual([0.4]);
+        expect(context.globalAlpha).toBe(0.8);
+        expect(alphaStack).toEqual([]);
+    });
+
     it('clips long placeholder text instead of scaling its glyphs to maxWidth', () => {
         const ctx = {
             beginPath: vi.fn(),
             clip: vi.fn(),
             closePath: vi.fn(),
             fillText: vi.fn(),
+            globalAlpha: 1,
             rectByPrecision: vi.fn(),
             restore: vi.fn(),
             save: vi.fn(),

packages/docs-ui/src/controllers/render-controllers/doc-paragraph-placeholder.render-controller.ts

@@ -422,6 +422,7 @@ export function drawParagraphPlaceholders(
 ): void {
     ctx.save();
     ctx.fillStyle = color;
+    ctx.globalAlpha *= 0.5;
     ctx.textBaseline = 'alphabetic';
 
     for (const placeholder of placeholders) {

packages/docs-ui/src/index.ts

@@ -175,6 +175,7 @@ export { scrollDocsTableLikeCustomBlockLive } from './embed-docs-custom-block-sc
 export type { IDocsTableLikeCustomBlockScrollOptions } from './embed-docs-custom-block-scroll';
 export { resolveDocsCustomBlockRenderViewport } from './embed-host-anchor';
 export type { IDocsCustomBlockLayoutViewport, IDocsCustomBlockRenderViewportParams } from './embed-host-anchor';
+export { ParagraphSettingMenuFactory } from './menu/context-menu';
 export {
     AlignMenuItemFactory,
     BackgroundColorSelectorMenuItemFactory,

packages/docs-ui/src/services/__tests__/doc-paragraph-menu.service.spec.ts

@@ -14,31 +14,190 @@
  * limitations under the License.
  */
 
+import type { DocumentDataModel, IDocumentData } from '@univerjs/core';
+import type { RenderUnit } from '@univerjs/engine-render';
 import type { IMutiPageParagraphBound, ITableBound } from '../doc-event-manager.service';
 import {
     BlockType,
     DataStreamTreeTokenType,
     DOC_RANGE_TYPE,
     DocumentBlockRangeType,
     DocumentBlockType,
+    DocumentFlavor,
+    IPermissionService,
+    LocaleService,
+    LocaleType,
     PresetListType,
+    Univer,
+    UniverInstanceType,
 } from '@univerjs/core';
-import { createDocumentPermissionPoint, getDocumentParagraphPermissionObjectId } from '@univerjs/docs';
-import { DocumentEditArea } from '@univerjs/engine-render';
+import {
+    createDocumentPermissionPoint,
+    DocSkeletonManagerService,
+    getDocumentParagraphPermissionObjectId,
+    setDocumentPermissionValue,
+    UniverDocsPlugin,
+} from '@univerjs/docs';
+import {
+    CanvasColorService,
+    DocumentEditArea,
+    Documents,
+    ICanvasColorService,
+    IRenderManagerService,
+    RenderManagerService,
+    Viewport,
+} from '@univerjs/engine-render';
 import { UnitAction } from '@univerjs/protocol';
+import {
+    CanvasPopupService,
+    ContextMenuService,
+    DesktopLayoutService,
+    ICanvasPopupService,
+    IContextMenuService,
+    ILayoutService,
+} from '@univerjs/ui';
 import { BehaviorSubject, Subject } from 'rxjs';
-import { describe, expect, it, vi } from 'vitest';
+import { describe, expect, it, onTestFinished, vi } from 'vitest';
+import { buildMoveDocBlockActions } from '../../commands/commands/doc-block-move.command';
+import { genTableSource } from '../../commands/commands/table/table';
+import enUS from '../../locale/en-US';
 import {
     DOC_PARAGRAPH_MENU_COMPONENT_KEY,
     DOC_TABLE_BLOCK_MENU_COMPONENT_KEY,
 } from '../../views/paragraph-menu/component-keys';
 import {
+    DocEventManagerService,
     getPreferredParagraphBoundsInRange,
     getTableBlockMenuHoverRect,
     getTableHorizontalViewportGeometry,
 } from '../doc-event-manager.service';
 import { DocLayoutInteractionService } from '../doc-layout-interaction.service';
 import { DocParagraphMenuService } from '../doc-paragraph-menu.service';
+import { DocCanvasPopManagerService } from '../doc-popup-manager.service';
+import { DocFloatMenuService } from '../float-menu.service';
+import { DocSelectionRenderService } from '../selection/doc-selection-render.service';
+
+describe('focused table menus with real render services', () => {
+    function createFocusedMenuTestBed() {
+        const context = new Proxy({
+            font: '',
+            measureText: (text: string) => ({ width: text.length * 8, actualBoundingBoxAscent: 8, actualBoundingBoxDescent: 2 }),
+        }, { get: (target, key) => key in target ? Reflect.get(target, key) : () => {} });
+        vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(context as never);
+        const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: enUS } });
+        onTestFinished(() => {
+            univer.dispose();
+            vi.restoreAllMocks();
+        });
+        univer.registerPlugin(UniverDocsPlugin);
+        const injector = univer.__getInjector();
+        injector.get(LocaleService).setDirection('ltr');
+        injector.add([IRenderManagerService, { useClass: RenderManagerService }]);
+        injector.add([ICanvasColorService, { useClass: CanvasColorService }]);
+        injector.add([ICanvasPopupService, { useClass: CanvasPopupService }]);
+        injector.add([IContextMenuService, { useClass: ContextMenuService }]);
+        injector.add([ILayoutService, { useClass: DesktopLayoutService }]);
+        injector.add([DocCanvasPopManagerService]);
+        const table = genTableSource(1, 1, 200);
+        const tableStream = `${DataStreamTreeTokenType.TABLE_START}${DataStreamTreeTokenType.TABLE_ROW_START}${DataStreamTreeTokenType.TABLE_CELL_START}Cell\r\n${DataStreamTreeTokenType.TABLE_CELL_END}${DataStreamTreeTokenType.TABLE_ROW_END}${DataStreamTreeTokenType.TABLE_END}`;
+        const model = univer.createUnit<IDocumentData, DocumentDataModel>(UniverInstanceType.UNIVER_DOC, {
+            id: 'focused-table-doc',
+            body: {
+                dataStream: `${tableStream}\rBody\r\n`,
+                paragraphs: [
+                    { startIndex: 7, paragraphId: 'cell' },
+                    { startIndex: tableStream.length, paragraphId: 'after-table' },
+                    { startIndex: tableStream.length + 5, paragraphId: 'body' },
+                ],
+                tables: [{ tableId: table.tableId, startIndex: 0, endIndex: tableStream.length }],
+            },
+            tableSource: { [table.tableId]: table },
+            documentStyle: {
+                documentFlavor: DocumentFlavor.TRADITIONAL,
+                pageSize: { width: 300, height: 400 },
+                marginTop: 20,
+                marginBottom: 20,
+                marginLeft: 20,
+                marginRight: 20,
+            },
+        });
+        const render = injector.get(IRenderManagerService).createRender(model.getUnitId()) as RenderUnit;
+        render.deactivate();
+        render.engine.resizeBySize(300, 400);
+        const canvas = render.engine.getCanvasElement();
+        canvas.style.width = '300px';
+        vi.spyOn(canvas, 'getBoundingClientRect').mockReturnValue(new DOMRect(0, 0, 300, 400));
+        const viewport = new Viewport('viewMain', render.scene, { left: 0, top: 0, width: 300, height: 400 });
+        onTestFinished(() => viewport.dispose());
+        render.addRenderDependencies([[DocSkeletonManagerService], [DocLayoutInteractionService]]);
+        const skeleton = render.with(DocSkeletonManagerService).getSkeleton();
+        const documents = new Documents('focused-table-documents', skeleton);
+        render.mainComponent = documents;
+        render.scene.addObject(documents);
+        render.addRenderDependencies([
+            [DocSelectionRenderService],
+            [DocEventManagerService],
+            [DocFloatMenuService],
+            [DocParagraphMenuService],
+        ]);
+        const service = render.with(DocParagraphMenuService);
+        const bound = render.with(DocEventManagerService).tableBounds.get(table.tableId)!;
+        return { injector, service, bound, render, model };
+    }
+
+    it('keeps a focused table trigger independent of paragraph hover and closes each popup independently', () => {
+        const { injector, service, bound, render, model } = createFocusedMenuTestBed();
+        const popups = injector.get(ICanvasPopupService);
+        service.showTableMenu(bound, true);
+        expect(service.focusedTableTarget?.table?.tableId).toBe(bound.tableId);
+        expect(service.focusedTableTarget?.moveRange.endOffset)
+            .toBe(service.focusedTableTarget!.table!.endIndex + 1);
+        const sourceRange = service.focusedTableTarget!.moveRange;
+        const snapshot = model.getSnapshot();
+        const moved = buildMoveDocBlockActions({
+            documentData: snapshot,
+            sourceRange,
+            targetOffset: snapshot.body!.dataStream.length - 1,
+        });
+        expect(moved.nextDocumentData.body!.dataStream.endsWith('\r\n')).toBe(true);
+        const restored = buildMoveDocBlockActions({
+            documentData: moved.nextDocumentData,
+            sourceRange: moved.movedRange,
+            targetOffset: sourceRange.startOffset,
+        });
+        expect(restored.nextDocumentData.body).toEqual(snapshot.body);
+        service.showParagraphMenu(createParagraphBound({ paragraphStart: 3, paragraphEnd: 7, startIndex: 7 }));
+        expect(service.activeTarget?.kind).toBe(DocumentBlockType.PARAGRAPH);
+        expect(popups.popups).toHaveLength(2);
+        service.setParagraphMenuActive(true, true);
+        service.hideParagraphMenu(true);
+        expect(popups.popups).toHaveLength(1);
+        expect(render.with(DocLayoutInteractionService).isActive).toBe(true);
+        const dismiss = vi.fn();
+        const subscription = service.focusedTableMenuDismiss$.subscribe(dismiss);
+        onTestFinished(() => subscription.unsubscribe());
+        popups.popups[0][1].onClickOutside?.(new PointerEvent('pointerdown'));
+        expect(dismiss).toHaveBeenCalledOnce();
+        expect(service.focusedTableTarget?.table?.tableId).toBe(bound.tableId);
+        service.hideFocusedTableMenu();
+        expect(popups.popups).toHaveLength(0);
+        expect(render.with(DocLayoutInteractionService).isActive).toBe(false);
+    });
+
+    it('releases focused popups on permission loss and service disposal', () => {
+        const { injector, service, bound } = createFocusedMenuTestBed();
+        const popups = injector.get(ICanvasPopupService);
+        service.showTableMenu(bound, true);
+        setDocumentPermissionValue(injector.get(IPermissionService), 'focused-table-doc', 'focused-table-doc', UnitAction.Edit, false);
+        expect(service.focusedTableTarget).toBeNull();
+        expect(popups.popups).toHaveLength(0);
+        setDocumentPermissionValue(injector.get(IPermissionService), 'focused-table-doc', 'focused-table-doc', UnitAction.Edit, true);
+        service.showTableMenu(bound, true);
+        expect(popups.popups).toHaveLength(1);
+        service.dispose();
+        expect(popups.popups).toHaveLength(0);
+    });
+});
 
 describe('DocParagraphMenuService', () => {
     it('shows the paragraph menu for empty paragraphs', () => {