Skip to content

Commit

Permalink
fix: #700
Browse files Browse the repository at this point in the history 
fix: aux line background

fix: spreadsheet

fix: precise rect for background
  • Loading branch information
@lumixraku
lumixraku committed May 15, 2024
1 parent 28700ba commit b39ddad
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 30 deletions.
15 changes: 10 additions & 5 deletions packages/engine-render/src/components/sheets/extensions/background.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

import type { IRange, IScale } from '@univerjs/core';

import { getColor, inViewRanges, mergeRangeIfIntersects } from '../../../basics/tools';
import { fixLineWidthByScale, getColor, inViewRanges, mergeRangeIfIntersects } from '../../../basics/tools';
import type { UniverRenderingContext } from '../../../context';
import { SpreadsheetExtensionRegistry } from '../../extension';
import type { SpreadsheetSkeleton } from '../sheet-skeleton';
Expand All @@ -29,8 +29,8 @@ const UNIQUE_KEY = 'DefaultBackgroundExtension';
* in prev version background ext is higer than font ext. now turing back lower than font ext.
* font ext zindex is 30.
*/
const DOC_EXTENSION_Z_INDEX = 20;
const PRINTING_Z_INDEX = 20;
const DOC_EXTENSION_Z_INDEX = 21;
const PRINTING_Z_INDEX = 21;

export class Background extends SheetExtension {
override uKey = UNIQUE_KEY;
Expand Down Expand Up @@ -69,6 +69,7 @@ export class Background extends SheetExtension {
}
ctx.save();
// ctx.setGlobalCompositeOperation('destination-over');
const { scaleX, scaleY } = ctx.getScale();
background &&
Object.keys(background).forEach((rgb: string) => {
const backgroundCache = background[rgb];
Expand Down Expand Up @@ -107,8 +108,12 @@ export class Background extends SheetExtension {
startX = mergeInfo.startX;
endX = mergeInfo.endX;
}

backgroundPaths.rect(startX, startY, endX - startX, endY - startY);
// precise is a workaround for windows, macOS does not have this issue.
const startXPrecise = fixLineWidthByScale(startX, scaleX);
const startYPrecise = fixLineWidthByScale(startY, scaleY);
const endXPrecise = fixLineWidthByScale(endX, scaleX);
const endYPrecise = fixLineWidthByScale(endY, scaleY);
backgroundPaths.rect(startXPrecise, startYPrecise, endXPrecise - startXPrecise, endYPrecise - startYPrecise);
});
ctx.fill(backgroundPaths);
});
Expand Down
38 changes: 16 additions & 22 deletions packages/engine-render/src/components/sheets/spreadsheet.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,6 @@ export class Spreadsheet extends SheetComponent {
* diffRange 根据 diffCacheBounds 得到
* @param ctx
* @param viewportInfo
* @returns
*/
override draw(ctx: UniverRenderingContext, viewportInfo: IViewportInfo) {
// const { parent = { scaleX: 1, scaleY: 1 } } = this;
Expand All @@ -128,7 +127,7 @@ export class Spreadsheet extends SheetComponent {
if (!spreadsheetSkeleton) {
return;
}

this._drawAuxiliary(ctx);
const parentScale = this.getParentScale();

const diffRanges = this._refreshIncrementalState && viewportInfo?.diffCacheBounds
Expand Down Expand Up @@ -243,32 +242,31 @@ export class Spreadsheet extends SheetComponent {
this._dirtyBounds = dirtyBounds;
}

renderByViewport(mainCtx: UniverRenderingContext, viewportBoundsInfo: IViewportInfo, spreadsheetSkeleton: SpreadsheetSkeleton) {
const { diffBounds, diffX, diffY, viewPortPosition, cacheCanvas, leftOrigin, topOrigin, bufferEdgeX, bufferEdgeY, isDirty: isViewportDirty, isForceDirty: isViewportForceDirty } = viewportBoundsInfo as Required<IViewportInfo>;
renderByViewport(mainCtx: UniverRenderingContext, viewportInfo: IViewportInfo, spreadsheetSkeleton: SpreadsheetSkeleton) {
const { diffBounds, diffX, diffY, viewPortPosition, cacheCanvas, leftOrigin, topOrigin, bufferEdgeX, bufferEdgeY, isDirty: isViewportDirty, isForceDirty: isViewportForceDirty } = viewportInfo as Required<IViewportInfo>;
const { rowHeaderWidth, columnHeaderHeight } = spreadsheetSkeleton;
const { a: scaleX = 1, d: scaleY = 1 } = mainCtx.getTransform();
const bufferEdgeSizeX = bufferEdgeX * scaleX / window.devicePixelRatio;
const bufferEdgeSizeY = bufferEdgeY * scaleY / window.devicePixelRatio;

const cacheCtx = cacheCanvas.getContext();
cacheCtx.save();

const { left, top, right, bottom } = viewPortPosition;
const dw = right - left + rowHeaderWidth;
const dh = bottom - top + columnHeaderHeight;
const isForceDirty = isViewportForceDirty || this.isForceDirty();
const isDirty = isViewportDirty || this.isDirty();
if (diffBounds.length === 0 || (diffX === 0 && diffY === 0) || isForceDirty || isDirty) {
if (isDirty || isForceDirty) {
this.refreshCacheCanvas(viewportBoundsInfo, { cacheCanvas, cacheCtx, mainCtx, topOrigin, leftOrigin, bufferEdgeX, bufferEdgeY });
this.refreshCacheCanvas(viewportInfo, { cacheCanvas, cacheCtx, mainCtx, topOrigin, leftOrigin, bufferEdgeX, bufferEdgeY });
}
} else if (diffBounds.length !== 0 || diffX !== 0 || diffY !== 0) {
// scrolling && no dirty
this.paintNewAreaOfCacheCanvas(viewportBoundsInfo, {
this.paintNewAreaOfCacheCanvas(viewportInfo, {
cacheCanvas, cacheCtx, mainCtx, topOrigin, leftOrigin, bufferEdgeX, bufferEdgeY, scaleX, scaleY, columnHeaderHeight, rowHeaderWidth,
});
}
// support for browser native zoom
// support for browser native zoom (only windows has this problem)
const sourceLeft = bufferEdgeSizeX * Math.min(1, window.devicePixelRatio);
const sourceTop = bufferEdgeSizeY * Math.min(1, window.devicePixelRatio);
this._applyCache(cacheCanvas, mainCtx, sourceLeft, sourceTop, dw, dh, left, top, dw, dh);
Expand Down Expand Up @@ -344,7 +342,7 @@ export class Spreadsheet extends SheetComponent {
/**
* 整个 viewport 重绘
*/
refreshCacheCanvas(viewportBoundsInfo: IViewportInfo, param: {
refreshCacheCanvas(viewportInfo: IViewportInfo, param: {
cacheCanvas: Canvas; cacheCtx: UniverRenderingContext; mainCtx: UniverRenderingContext;
topOrigin: number;
leftOrigin: number;
Expand All @@ -368,7 +366,7 @@ export class Spreadsheet extends SheetComponent {
cacheCtx.translateWithPrecision(m.e / m.a - leftOrigin + bufferEdgeX, m.f / m.d - topOrigin + bufferEdgeY);

// extension 绘制时按照内容的左上角计算, 不考虑 rowHeaderWidth
this.draw(cacheCtx, viewportBoundsInfo);
this.draw(cacheCtx, viewportInfo);
cacheCtx.restore();
}

Expand Down Expand Up @@ -399,7 +397,6 @@ export class Spreadsheet extends SheetComponent {
const { rowHeaderWidth, columnHeaderHeight } = spreadsheetSkeleton;
mainCtx.translateWithPrecision(rowHeaderWidth, columnHeaderHeight);

this._drawAuxiliary(mainCtx, viewportInfo);

const { viewPortKey } = viewportInfo;
// scene --> layer, getObjects --> viewport.render(object) --> spreadsheet
Expand Down Expand Up @@ -450,27 +447,25 @@ export class Spreadsheet extends SheetComponent {
}

const pixelRatio = cacheCanvas.getPixelRatio();

const cacheCtx = cacheCanvas.getContext();
cacheCtx.save();
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
cacheCtx.setTransform(1, 0, 0, 1, 0, 0);
// Math.round(num * scale) / scale;
const fn = (num: number, scale: number) => {
return Math.round(num * scale) / scale;
return Math.round(num * scale);
};
ctx.imageSmoothingEnabled = false;
// ctx.imageSmoothingEnabled = true;
// ctx.imageSmoothingQuality = 'high';
ctx.drawImage(
cacheCanvas.getCanvasEle(),
fn(sx, pixelRatio) * pixelRatio,
fn(sy, pixelRatio) * pixelRatio,
fn(sx, pixelRatio),
fn(sy, pixelRatio),
sw * pixelRatio,
sh * pixelRatio,
fn(dx, pixelRatio) * pixelRatio,
fn(dy, pixelRatio) * pixelRatio,
fn(dx, pixelRatio),
fn(dy, pixelRatio),
dw * pixelRatio,
dh * pixelRatio
);
Expand Down Expand Up @@ -531,14 +526,13 @@ export class Spreadsheet extends SheetComponent {
* @param bounds
*/
// eslint-disable-next-line max-lines-per-function
private _drawAuxiliary(ctx: UniverRenderingContext, bounds?: IViewportInfo) {
private _drawAuxiliary(ctx: UniverRenderingContext) {
const spreadsheetSkeleton = this.getSkeleton();
if (spreadsheetSkeleton == null) {
return;
}

const { rowColumnSegment, dataMergeCache, overflowCache, stylesCache, showGridlines } = spreadsheetSkeleton;
const { border, backgroundPositions } = stylesCache;
const { rowColumnSegment, dataMergeCache, overflowCache, showGridlines } = spreadsheetSkeleton;
const { startRow, endRow, startColumn, endColumn } = rowColumnSegment;
if (!spreadsheetSkeleton || showGridlines === BooleanNumber.FALSE || this._forceDisableGridlines) {
return;
Expand Down Expand Up @@ -653,7 +647,7 @@ export class Spreadsheet extends SheetComponent {
// overflow cell
this._clearRectangle(ctx, rowHeightAccumulation, columnWidthAccumulation, overflowCache.toNativeArray());

this._clearBackground(ctx, backgroundPositions);
// this._clearBackground(ctx, backgroundPositions);

ctx.restore();
}
Expand Down
6 changes: 3 additions & 3 deletions packages/engine-render/src/viewport.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -268,8 +268,8 @@ export class Viewport {
cacheCanvas.getCanvasEle().style.zIndex = '100';
cacheCanvas.getCanvasEle().style.position = 'fixed';
cacheCanvas.getCanvasEle().style.background = '#fff';
cacheCanvas.getCanvasEle().style.pointerEvents = 'none'; // 禁用事件响应
cacheCanvas.getCanvasEle().style.border = '1px solid black'; // 设置边框样式
cacheCanvas.getCanvasEle().style.pointerEvents = 'none';
cacheCanvas.getCanvasEle().style.border = '1px solid black';
cacheCanvas.getCanvasEle().style.transformOrigin = '100% 100%';
cacheCanvas.getCanvasEle().style.transform = 'scale(0.5)';
cacheCanvas.getCanvasEle().style.translate = '20% 0%';
Expand Down Expand Up @@ -881,7 +881,7 @@ export class Viewport {
}


// eslint-disable-next-line complexity
// eslint-disable-next-line complexity, max-lines-per-function
onMouseWheel(evt: IWheelEvent, state: EventState) {
if (!this._scrollBar || this.isActive === false) {
return;
Expand Down

0 comments on commit b39ddad

Please sign in to comment.