From 9f325e243a8d42dbade3cd5f874b03f4a7f4bc58 Mon Sep 17 00:00:00 2001 From: jocs Date: Fri, 12 Apr 2024 01:36:26 +0800 Subject: [PATCH 1/3] fix: cell text align between normal and edit mode --- examples/src/data/docs/default-document-data-cn.ts | 6 +++--- .../src/controllers/page-render.controller.ts | 5 +++-- packages/docs-ui/src/views/doc-canvas-view.ts | 1 + .../engine-render/src/components/docs/document.ts | 6 ++++++ .../src/components/docs/layout/doc-skeleton.ts | 2 ++ .../src/components/sheets/extensions/font.ts | 6 +++++- .../src/components/sheets/sheet-skeleton.ts | 11 +++++++---- .../controllers/editor/start-edit.controller.ts | 14 +++++++++++--- .../src/services/editor-bridge.service.ts | 1 + .../src/views/editor-container/EditorContainer.tsx | 5 +++-- .../src/views/editor-container/index.module.less | 1 + .../sheets-ui/src/views/formula-bar/FormulaBar.tsx | 3 ++- 12 files changed, 45 insertions(+), 16 deletions(-) diff --git a/examples/src/data/docs/default-document-data-cn.ts b/examples/src/data/docs/default-document-data-cn.ts index c1b5f34f198..e1a45e7a7dc 100644 --- a/examples/src/data/docs/default-document-data-cn.ts +++ b/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, diff --git a/packages/docs-ui/src/controllers/page-render.controller.ts b/packages/docs-ui/src/controllers/page-render.controller.ts index c0cde3b93e3..72e86ea4d18 100644 --- a/packages/docs-ui/src/controllers/page-render.controller.ts +++ b/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(); }) ) diff --git a/packages/docs-ui/src/views/doc-canvas-view.ts b/packages/docs-ui/src/views/doc-canvas-view.ts index 9d97aa19ba0..1428f952df4 100644 --- a/packages/docs-ui/src/views/doc-canvas-view.ts +++ b/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; diff --git a/packages/engine-render/src/components/docs/document.ts b/packages/engine-render/src/components/docs/document.ts index ad6a507a713..e462621c894 100644 --- a/packages/engine-render/src/components/docs/document.ts +++ b/packages/engine-render/src/components/docs/document.ts @@ -14,6 +14,8 @@ * limitations under the License. */ +/* eslint-disable max-lines-per-function */ + import './extensions'; import type { Nullable, Observer } from '@univerjs/core'; @@ -189,6 +191,7 @@ export class Documents extends DocComponent { return (this.getScene() as Scene).getEngine(); } + // eslint-disable-next-line complexity override draw(ctx: UniverRenderingContext, bounds?: IViewportBound) { const documentSkeleton = this.getSkeleton(); @@ -529,10 +532,13 @@ export class Documents extends DocComponent { if (verticalAlign === VerticalAlign.MIDDLE) { offsetTop = (this.height - pageHeight) / 2; } else if (verticalAlign === VerticalAlign.TOP) { + offsetTop = 0; + } else if (verticalAlign === VerticalAlign.UNSPECIFIED) { offsetTop = pagePaddingTop; } else { offsetTop = this.height - pageHeight - pagePaddingBottom; } + return offsetTop; } diff --git a/packages/engine-render/src/components/docs/layout/doc-skeleton.ts b/packages/engine-render/src/components/docs/layout/doc-skeleton.ts index 477978d1102..5edc7a8f817 100644 --- a/packages/engine-render/src/components/docs/layout/doc-skeleton.ts +++ b/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 }; diff --git a/packages/engine-render/src/components/sheets/extensions/font.ts b/packages/engine-render/src/components/sheets/extensions/font.ts index 3edc72b901f..b71113bd15e 100644 --- a/packages/engine-render/src/components/sheets/extensions/font.ts +++ b/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(); }); diff --git a/packages/engine-render/src/components/sheets/sheet-skeleton.ts b/packages/engine-render/src/components/sheets/sheet-skeleton.ts index 1177d107f69..0022d075341 100644 --- a/packages/engine-render/src/components/sheets/sheet-skeleton.ts +++ b/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, diff --git a/packages/sheets-ui/src/controllers/editor/start-edit.controller.ts b/packages/sheets-ui/src/controllers/editor/start-edit.controller.ts index 7b3b58e001a..a64ddd34455 100644 --- a/packages/sheets-ui/src/controllers/editor/start-edit.controller.ts +++ b/packages/sheets-ui/src/controllers/editor/start-edit.controller.ts @@ -236,16 +236,21 @@ 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 = 0; + } else if (verticalAlign === VerticalAlign.UNSPECIFIED) { offsetTop = paddingData.t || 0; + } else { + 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 +327,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 +459,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; diff --git a/packages/sheets-ui/src/services/editor-bridge.service.ts b/packages/sheets-ui/src/services/editor-bridge.service.ts index 2e78c3f9646..00da6029835 100644 --- a/packages/sheets-ui/src/services/editor-bridge.service.ts +++ b/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) { diff --git a/packages/sheets-ui/src/views/editor-container/EditorContainer.tsx b/packages/sheets-ui/src/views/editor-container/EditorContainer.tsx index 6e7547f2c31..b2706bc1d46 100644 --- a/packages/sheets-ui/src/views/editor-container/EditorContainer.tsx +++ b/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 = () => { const [state, setState] = useState({ ...EDITOR_DEFAULT_POSITION, @@ -89,8 +90,8 @@ export const EditorContainer: React.FC = () => { }); } 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, }); diff --git a/packages/sheets-ui/src/views/editor-container/index.module.less b/packages/sheets-ui/src/views/editor-container/index.module.less index ed901b131f8..0d0d38c767e 100644 --- a/packages/sheets-ui/src/views/editor-container/index.module.less +++ b/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; diff --git a/packages/sheets-ui/src/views/formula-bar/FormulaBar.tsx b/packages/sheets-ui/src/views/formula-bar/FormulaBar.tsx index fd6ab2151da..143f0aa6d9a 100644 --- a/packages/sheets-ui/src/views/formula-bar/FormulaBar.tsx +++ b/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(styles.formulaGrey); const [arrowDirection, setArrowDirection] = useState(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, From 818034a0fd9f174951bc90a578a701cdff166793 Mon Sep 17 00:00:00 2001 From: jocs Date: Fri, 12 Apr 2024 01:49:16 +0800 Subject: [PATCH 2/3] fix: cell text align between normal and edit mode --- .../sheets-ui/src/views/editor-container/index.module.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/sheets-ui/src/views/editor-container/index.module.less b/packages/sheets-ui/src/views/editor-container/index.module.less index 0d0d38c767e..6576f6c8164 100644 --- a/packages/sheets-ui/src/views/editor-container/index.module.less +++ b/packages/sheets-ui/src/views/editor-container/index.module.less @@ -22,5 +22,11 @@ height: 100%; background: white; + + canvas { + position: absolute; + top: -1px !important; + left: -1px !important; + } } } From c7f912dca1a3ef36beebfb641c39f23590db5071 Mon Sep 17 00:00:00 2001 From: jocs Date: Sat, 13 Apr 2024 12:59:29 +0800 Subject: [PATCH 3/3] fix: unspecified follow the same rule as bottom --- packages/engine-render/src/components/docs/document.ts | 7 ++----- .../src/controllers/editor/start-edit.controller.ts | 4 +--- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/engine-render/src/components/docs/document.ts b/packages/engine-render/src/components/docs/document.ts index e462621c894..59c047727d3 100644 --- a/packages/engine-render/src/components/docs/document.ts +++ b/packages/engine-render/src/components/docs/document.ts @@ -14,7 +14,6 @@ * limitations under the License. */ -/* eslint-disable max-lines-per-function */ import './extensions'; @@ -191,7 +190,7 @@ export class Documents extends DocComponent { return (this.getScene() as Scene).getEngine(); } - // eslint-disable-next-line complexity + override draw(ctx: UniverRenderingContext, bounds?: IViewportBound) { const documentSkeleton = this.getSkeleton(); @@ -533,9 +532,7 @@ export class Documents extends DocComponent { offsetTop = (this.height - pageHeight) / 2; } else if (verticalAlign === VerticalAlign.TOP) { offsetTop = 0; - } else if (verticalAlign === VerticalAlign.UNSPECIFIED) { - offsetTop = pagePaddingTop; - } else { + } else { // VerticalAlign.UNSPECIFIED follow the same rule as HorizontalAlign.BOTTOM. offsetTop = this.height - pageHeight - pagePaddingBottom; } diff --git a/packages/sheets-ui/src/controllers/editor/start-edit.controller.ts b/packages/sheets-ui/src/controllers/editor/start-edit.controller.ts index a64ddd34455..7f3733b9fff 100644 --- a/packages/sheets-ui/src/controllers/editor/start-edit.controller.ts +++ b/packages/sheets-ui/src/controllers/editor/start-edit.controller.ts @@ -242,9 +242,7 @@ export class StartEditController extends Disposable { offsetTop = (editorHeight - actualHeight) / 2 / scaleY; } else if (verticalAlign === VerticalAlign.TOP) { offsetTop = 0; - } else if (verticalAlign === VerticalAlign.UNSPECIFIED) { - offsetTop = paddingData.t || 0; - } else { + } else { // VerticalAlign.UNSPECIFIED follow the same rule as HorizontalAlign.BOTTOM. offsetTop = (editorHeight - actualHeight) / scaleY - (paddingData.b || 0); }