fix: font render bounds (#3754)

Co-authored-by: GitHub Actions <[email protected]>

packages/engine-render/src/components/docs/extensions/line.ts

@@ -15,14 +15,14 @@
  */
 
 import type { IScale, ITextDecoration } from '@univerjs/core';
-import { BaselineOffset, BooleanNumber, getColorStyle, TextDecoration } from '@univerjs/core';
+import type { IDocumentSkeletonGlyph } from '../../../basics/i-document-skeleton-cached';
 
+import type { UniverRenderingContext } from '../../../context';
+import { BaselineOffset, BooleanNumber, getColorStyle, TextDecoration } from '@univerjs/core';
 import { COLOR_BLACK_RGB, DEFAULT_OFFSET_SPACING, FIX_ONE_PIXEL_BLUR_OFFSET } from '../../../basics/const';
 import { calculateRectRotate } from '../../../basics/draw';
-import type { IDocumentSkeletonGlyph } from '../../../basics/i-document-skeleton-cached';
 import { degToRad, getScale } from '../../../basics/tools';
 import { Vector2 } from '../../../basics/vector2';
-import type { UniverRenderingContext } from '../../../context';
 import { DocumentsSpanAndLineExtensionRegistry } from '../../extension';
 import { docExtension } from '../doc-extension';
 
@@ -39,6 +39,12 @@ export class Line extends docExtension {
 
  override draw(ctx: UniverRenderingContext, parentScale: IScale, glyph: IDocumentSkeletonGlyph) {
  const line = glyph.parent?.parent;
+ const { renderConfig } = this.extensionOffset;
+ // rotation of cell text
+ // rotate up down 90 cause problem, univer-pro/issues/2802, This is only a temporary solution
+ const vertexAngle = renderConfig?.vertexAngle || 0;
+ const centerAngle = renderConfig?.centerAngle || 0;
+ const drawStrikeAndUnderline = !(centerAngle === 0 && vertexAngle !== 0 && vertexAngle % 90 === 0);
  const { ts: textStyle, bBox, content } = glyph;
 
  if (line == null || textStyle == null || content === '\r') {
@@ -51,7 +57,7 @@ export class Line extends docExtension {
  const DELTA = 0.5;
  const { ul: underline, st: strikethrough, ol: overline, va: baselineOffset, bbl: bottomBorderLine } = textStyle;
 
- if (underline) {
+ if (drawStrikeAndUnderline && underline) {
  const startY = asc + dsc;
  this._drawLine(ctx, glyph, underline, startY, scale);
  }
@@ -61,7 +67,7 @@ export class Line extends docExtension {
  this._drawLine(ctx, glyph, bottomBorderLine, startY, scale, 2);
  }
 
- if (strikethrough) {
+ if (drawStrikeAndUnderline && strikethrough) {
  // strikethrough position is the middle of bounding box ascent and descent.
  let startY = asc + bd - strikeoutPosition - DELTA;
 

packages/engine-render/src/components/sheets/extensions/font.ts

@@ -150,8 +150,8 @@ export class Font extends SheetExtension {
  ctx.restore();
  }
 
- renderFontEachCell(renderFontContext: IRenderFontContext, row: number, col: number, fontMatrix: ObjectMatrix<IFontCacheItem>) {
- const { ctx, viewRanges, diffRanges, spreadsheetSkeleton, cellInfo } = renderFontContext;
+ renderFontEachCell(renderFontCtx: IRenderFontContext, row: number, col: number, fontMatrix: ObjectMatrix<IFontCacheItem>) {
+ const { ctx, viewRanges, diffRanges, spreadsheetSkeleton, cellInfo } = renderFontCtx;
 
  //#region merged cell
  let { startY, endY, startX, endX } = cellInfo;
@@ -203,23 +203,30 @@ export class Font extends SheetExtension {
  ctx.beginPath();
 
  //#region text overflow
- renderFontContext.overflowRectangle = overflowRange;
- renderFontContext.cellData = cellData;
- renderFontContext.startX = startX;
- renderFontContext.startY = startY;
- renderFontContext.endX = endX;
- renderFontContext.endY = endY;
- this._clipTextOverflow(renderFontContext, row, col, fontMatrix);
+ renderFontCtx.overflowRectangle = overflowRange;
+ renderFontCtx.cellData = cellData;
+ renderFontCtx.startX = startX;
+ renderFontCtx.startY = startY;
+ renderFontCtx.endX = endX;
+ renderFontCtx.endY = endY;
+ this._setFontRenderBounds(renderFontCtx, row, col, fontMatrix);
  //#endregion
 
  ctx.translate(startX + FIX_ONE_PIXEL_BLUR_OFFSET, startY + FIX_ONE_PIXEL_BLUR_OFFSET);
- this._renderDocuments(ctx, fontsConfig, startX, startY, endX, endY, row, col, spreadsheetSkeleton.overflowCache);
+ this._renderDocuments(ctx, fontsConfig, renderFontCtx.startX, renderFontCtx.startY, renderFontCtx.endX, renderFontCtx.endY, row, col, spreadsheetSkeleton.overflowCache);
 
  ctx.closePath();
  ctx.restore();
  };
 
- private _clipTextOverflow(renderFontContext: IRenderFontContext, row: number, col: number, fontMatrix: ObjectMatrix<IFontCacheItem>) {
+ /**
+ * Change font render bounds, for overflow and filter icon & custom render.
+ * @param renderFontContext
+ * @param row
+ * @param col
+ * @param fontMatrix
+ */
+ private _setFontRenderBounds(renderFontContext: IRenderFontContext, row: number, col: number, fontMatrix: ObjectMatrix<IFontCacheItem>) {
  const { ctx, scale, overflowRectangle, rowHeightAccumulation, columnWidthAccumulation, cellData } = renderFontContext;
  let { startX, endX, startY, endY } = renderFontContext;
 
@@ -305,6 +312,10 @@ export class Font extends SheetExtension {
  // for normal cell, forbid text overflow cellarea
  ctx.clip();
  }
+ renderFontContext.startX = startX;
+ renderFontContext.startY = startY;
+ renderFontContext.endX = endX;
+ renderFontContext.endY = endY;
  }
 
  private _renderDocuments(
@@ -316,7 +327,7 @@ export class Font extends SheetExtension {
  endX: number,
  endY: number,
  row: number,
- column: number,
+ col: number,
  overflowCache: ObjectMatrix<IRange>
  ) {
  const documents = this.getDocuments() as Documents;
@@ -339,7 +350,7 @@ export class Font extends SheetExtension {
 
  // Use fix https:/dream-num/univer/issues/927, Set the actual width of the content to the page width of the document,
  // so that the divide will be aligned when the skeleton is calculated.
- const overflowRectangle = overflowCache.getValue(row, column);
+ const overflowRectangle = overflowCache.getValue(row, col);
 
  const isOverflow = !(wrapStrategy === WrapStrategy.WRAP && !overflowRectangle && vertexAngle === 0);
  if (isOverflow) {