fix(sheets): the text is aligned at editorial and non-editorial states

examples/src/data/docs/default-document-data-cn.ts

@@ -80,7 +80,7 @@ export const DEFAULT_DOCUMENT_DATA_CN: IDocumentData = {
             {
                 startIndex: 4,
                 paragraphStyle: {
-                    spaceAbove: 10,
+                    spaceAbove: 0,
                     lineSpacing: 2,
                     spaceBelow: 0,
                 },
@@ -601,8 +601,8 @@ export const DEFAULT_DOCUMENT_DATA_CN: IDocumentData = {
         },
         marginTop: ptToPixel(50),
         marginBottom: ptToPixel(50),
-        marginRight: ptToPixel(40),
-        marginLeft: ptToPixel(40),
+        marginRight: ptToPixel(50),
+        marginLeft: ptToPixel(50),
         renderConfig: {
             vertexAngle: 0,
             centerAngle: 0,

packages/docs-ui/src/controllers/page-render.controller.ts

@@ -83,14 +83,15 @@ export class PageRenderController extends Disposable {
                         ctx.save();
 
                         ctx.translate(pageLeft - 0.5, pageTop - 0.5);
-                        Rect.drawWith(ctx, {
+                        const options = {
                             width: pageSize?.width ?? pageWidth ?? width,
                             height: pageSize?.height ?? pageHeight ?? height,
                             strokeWidth: 1,
                             stroke: PAGE_STROKE_COLOR,
                             fill: PAGE_FILL_COLOR,
                             zIndex: 3,
-                        });
+                        };
+                        Rect.drawWith(ctx, options);
                         ctx.restore();
                     })
                 )

packages/docs-ui/src/views/doc-canvas-view.ts

@@ -84,6 +84,7 @@ export class DocCanvasView extends RxDisposable {
         }
     }
 
+    // eslint-disable-next-line max-lines-per-function
     private _addNewRender() {
         const documentModel = this._currentDocumentModel;
 

packages/engine-render/src/components/docs/document.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+
 import './extensions';
 
 import type { Nullable, Observer } from '@univerjs/core';
@@ -189,6 +190,7 @@ export class Documents extends DocComponent {
         return (this.getScene() as Scene).getEngine();
     }
 
+
     override draw(ctx: UniverRenderingContext, bounds?: IViewportBound) {
         const documentSkeleton = this.getSkeleton();
 
@@ -529,10 +531,11 @@ export class Documents extends DocComponent {
         if (verticalAlign === VerticalAlign.MIDDLE) {
             offsetTop = (this.height - pageHeight) / 2;
         } else if (verticalAlign === VerticalAlign.TOP) {
-            offsetTop = pagePaddingTop;
-        } else {
+            offsetTop = 0;
+        } else { // VerticalAlign.UNSPECIFIED follow the same rule as HorizontalAlign.BOTTOM.
             offsetTop = this.height - pageHeight - pagePaddingBottom;
         }
+
         return offsetTop;
     }
 

packages/engine-render/src/components/docs/layout/doc-skeleton.ts

@@ -238,6 +238,7 @@ export class DocumentSkeleton extends Skeleton {
         return glyphGroup[glyph];
     }
 
+    // eslint-disable-next-line max-lines-per-function
     findNodeByCoord(
         coord: Vector2,
         pageLayoutType: PageLayoutType,
@@ -470,6 +471,7 @@ export class DocumentSkeleton extends Skeleton {
      * Split the document according to SectionBreak and perform layout calculations.
      * @returns view model: skeleton
      */
+    // eslint-disable-next-line max-lines-per-function
     private _createSkeleton(_bounds?: IViewportBound) {
         // 每一个布局
         const DEFAULT_PAGE_SIZE = { width: Number.POSITIVE_INFINITY, height: Number.POSITIVE_INFINITY };

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

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+/* eslint-disable max-lines-per-function */
+
 import type { ICellData, IRange, IScale, ObjectMatrix } from '@univerjs/core';
 import { HorizontalAlign, WrapStrategy } from '@univerjs/core';
 
@@ -24,6 +26,7 @@ import type { IFontCacheItem } from '../interfaces';
 import type { SheetComponent } from '../sheet-component';
 import { getDocsSkeletonPageSize, type SpreadsheetSkeleton } from '../sheet-skeleton';
 import { VERTICAL_ROTATE_ANGLE } from '../../../basics/text-rotation';
+import { FIX_ONE_PIXEL_BLUR_OFFSET } from '../../../basics';
 import { SheetExtension } from './sheet-extension';
 
 const UNIQUE_KEY = 'DefaultFontExtension';
@@ -80,6 +83,7 @@ export class Font extends SheetExtension {
             Object.keys(fontList).forEach((fontFormat: string) => {
                 const fontObjectArray = fontList[fontFormat];
 
+                // eslint-disable-next-line complexity
                 fontObjectArray.forValue((rowIndex, columnIndex, docsConfig) => {
                     const cellInfo = this.getCellIndex(
                         rowIndex,
@@ -225,7 +229,7 @@ export class Font extends SheetExtension {
                         );
                     }
 
-                    ctx.translate(startX, startY);
+                    ctx.translate(startX + FIX_ONE_PIXEL_BLUR_OFFSET, startY + FIX_ONE_PIXEL_BLUR_OFFSET);
                     this._renderDocuments(ctx, docsConfig, startX, startY, endX, endY, rowIndex, columnIndex, overflowCache);
                     ctx.restore();
                 });

packages/engine-render/src/components/sheets/sheet-skeleton.ts

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+/* eslint-disable max-lines-per-function */
+
 import type {
     BorderStyleTypes,
     IBorderStyleData,
@@ -199,8 +201,8 @@ export interface IDocumentLayoutObject {
 }
 
 const DEFAULT_PADDING_DATA = {
-    t: 0,
-    b: 0,
+    t: 1,
+    b: 1,
     l: 2,
     r: 2,
 };
@@ -1625,6 +1627,7 @@ export class SpreadsheetSkeleton extends Skeleton {
         }
     }
 
+    // eslint-disable-next-line complexity
     private _setCellCache(r: number, c: number, skipBackgroundAndBorder: boolean, mergeRange?: IRange) {
         const needsRendering = this._renderedCellCache.getValue(r, c);
 
@@ -1808,9 +1811,9 @@ export class SpreadsheetSkeleton extends Skeleton {
         const {
             textRotation,
             paddingData = {
-                t: 2,
+                t: 1,
                 r: 2,
-                b: 0,
+                b: 1,
                 l: 2,
             },
             horizontalAlign = HorizontalAlign.UNSPECIFIED,

packages/sheets-ui/src/controllers/editor/start-edit.controller.ts

@@ -236,16 +236,19 @@ export class StartEditController extends Disposable {
             documentDataModel.updateDocumentDataMargin(paddingData);
         } else {
             // Set the top margin under vertical alignment.
-            let offsetTop = (editorHeight - actualHeight) || 0;
+            let offsetTop = 0;
 
             if (verticalAlign === VerticalAlign.MIDDLE) {
-                offsetTop = (editorHeight - actualHeight) / 2;
+                offsetTop = (editorHeight - actualHeight) / 2 / scaleY;
             } else if (verticalAlign === VerticalAlign.TOP) {
-                offsetTop = paddingData.t || 0;
+                offsetTop = 0;
+            } else { // VerticalAlign.UNSPECIFIED follow the same rule as HorizontalAlign.BOTTOM.
+                offsetTop = (editorHeight - actualHeight) / scaleY - (paddingData.b || 0);
             }
 
-            offsetTop /= scaleY;
+            // offsetTop /= scaleY;
             offsetTop = offsetTop < (paddingData.t || 0) ? paddingData.t || 0 : offsetTop;
+
             documentDataModel.updateDocumentDataMargin({
                 t: offsetTop,
             });
@@ -322,6 +325,7 @@ export class StartEditController extends Disposable {
      * determine whether a scrollbar appears,
      * and calculate the editor's boundaries relative to the browser.
      */
+    // eslint-disable-next-line max-lines-per-function
     private _editAreaProcessing(
         editorWidth: number,
         editorHeight: number,
@@ -453,8 +457,10 @@ export class StartEditController extends Disposable {
     }
 
     // You can double-click on the cell or input content by keyboard to put the cell into the edit state.
+    // eslint-disable-next-line max-lines-per-function
     private _initialStartEdit() {
         this.disposeWithMe(
+            // eslint-disable-next-line max-lines-per-function
             this._editorBridgeService.visible$.subscribe((param) => {
                 const { visible, eventType, keycode } = param;
 

packages/sheets-ui/src/services/editor-bridge.service.ts

@@ -187,6 +187,7 @@ export class EditorBridgeService extends Disposable implements IEditorBridgeServ
         return this._currentEditCellState;
     }
 
+    // eslint-disable-next-line max-lines-per-function
     getLatestEditCellState() {
         const currentEditCell = this._currentEditCell;
         if (currentEditCell == null) {

packages/sheets-ui/src/views/editor-container/EditorContainer.tsx

@@ -39,6 +39,7 @@ const EDITOR_DEFAULT_POSITION = {
  * Floating editor's container.
  * @returns
  */
+// eslint-disable-next-line max-lines-per-function
 export const EditorContainer: React.FC<ICellIEditorProps> = () => {
     const [state, setState] = useState({
         ...EDITOR_DEFAULT_POSITION,
@@ -89,8 +90,8 @@ export const EditorContainer: React.FC<ICellIEditorProps> = () => {
                 });
             } else {
                 setState({
-                    width: endX - startX - FIX_ONE_PIXEL_BLUR_OFFSET,
-                    height: endY - startY - FIX_ONE_PIXEL_BLUR_OFFSET,
+                    width: endX - startX - FIX_ONE_PIXEL_BLUR_OFFSET + 2,
+                    height: endY - startY - FIX_ONE_PIXEL_BLUR_OFFSET + 2,
                     left: startX + FIX_ONE_PIXEL_BLUR_OFFSET,
                     top: startY + FIX_ONE_PIXEL_BLUR_OFFSET,
                 });

packages/sheets-ui/src/views/editor-container/index.module.less

@@ -11,6 +11,7 @@
 
     border: 1px solid rgb(var(--primary-color));
     box-shadow: none;
+    box-sizing: border-box;
 
     .editor-input {
         position: relative;
@@ -21,5 +22,11 @@
         height: 100%;
 
         background: white;
+
+        canvas {
+            position: absolute;
+            top: -1px !important;
+            left: -1px !important;
+        }
     }
 }

packages/sheets-ui/src/views/formula-bar/FormulaBar.tsx

@@ -34,6 +34,7 @@ enum ArrowDirection {
     Up,
 }
 
+// eslint-disable-next-line max-lines-per-function
 export function FormulaBar() {
     const [iconStyle, setIconStyle] = useState<string>(styles.formulaGrey);
     const [arrowDirection, setArrowDirection] = useState<ArrowDirection>(ArrowDirection.Down);
@@ -65,7 +66,7 @@ export function FormulaBar() {
             paragraphLineGapDefault: 0,
             renderConfig: {
                 horizontalAlign: HorizontalAlign.UNSPECIFIED,
-                verticalAlign: VerticalAlign.TOP,
+                verticalAlign: VerticalAlign.UNSPECIFIED,
                 centerAngle: 0,
                 vertexAngle: 0,
                 wrapStrategy: WrapStrategy.WRAP,