Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(sheet): render viewport wrong size #1727

Draft
wants to merge 13 commits into
base: dev
Choose a base branch
from
Draft

fix(sheet): render viewport wrong size #1727

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
b5287a8
fix(sheet): render viewport wrong size
DR-Univer Mar 28, 2024
0027171
fix: new viewport need more param
lumixraku May 20, 2024
ffe97fd
feat: cache by viewport
lumixraku Mar 30, 2024
5b16202
fix: markdirty & scrolling was conflict before, so scrolling & dirty …
lumixraku May 9, 2024
1ec8a2d
fix: 0510-1725
lumixraku May 10, 2024
a3111e4
fix: blurry when applyCache especially in windows 175%
lumixraku May 11, 2024
b700bbb
fix: merge cells background
lumixraku May 11, 2024
43bfb91
feat: fix cf render error on printing mode
weird94 May 14, 2024
5f5a6fc
fix: viewport make dirty false
lumixraku May 16, 2024
4c2d87e
test(facade): fix canvas mock
jikkai May 15, 2024
f97db72
fix: should beginPath before clip()
lumixraku May 21, 2024
cfae458
chore: comments to english
lumixraku May 21, 2024
0b81b50
fix: change viewport update timing
lumixraku May 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Next Next commit
fix(sheet): render viewport wrong size
  • Loading branch information
@DR-Univer @lumixraku
DR-Univer authored and lumixraku committed May 24, 2024
commit b5287a80c22c445922d99ebec7bf1ae28aa5fb4b
100 changes: 48 additions & 52 deletions packages/engine-render/src/components/sheets/spreadsheet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,68 +268,64 @@ export class Spreadsheet extends SheetComponent {
// return;
// }

if (viewPortKey === 'viewMain') {
const ctx = this._cacheCanvas.getContext();
ctx.save();
const ctx = this._cacheCanvas.getContext();
ctx.save();

const { left, top, right, bottom } = viewPortPosition;
const { left, top, right, bottom } = viewPortPosition;

const dw = right - left + rowHeaderWidth;
const dw = right - left + rowHeaderWidth;

const dh = bottom - top + columnHeaderHeight;
const dh = bottom - top + columnHeaderHeight;

if (diffBounds.length === 0 || (diffX === 0 && diffY === 0) || this._forceDirty) {
if (this.isDirty() || this._forceDirty) {
this._cacheCanvas.clear();
ctx.setTransform(mainCtx.getTransform());
this._draw(ctx, bounds);
this._forceDirty = false;
}
this._applyCache(mainCtx, left, top, dw, dh, left, top, dw, dh);
} else {
if (this.isDirty()) {
if (this._forceDirty) {
if (this.isDirty() || this._forceDirty) {
this._cacheCanvas.clear();
ctx.setTransform(mainCtx.getTransform());
this._draw(ctx, bounds);
this._forceDirty = false;
}
this._applyCache(mainCtx, left, top, dw, dh, left, top, dw, dh);
} else {
if (this.isDirty()) {
ctx.save();
ctx.globalCompositeOperation = 'copy';
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.drawImage(this._cacheCanvas.getCanvasEle(), diffX * scaleX, diffY * scaleY);
ctx.restore();

this._refreshIncrementalState = true;
ctx.setTransform(mainCtx.getTransform());

for (const diffBound of diffBounds) {
const { left: diffLeft, right: diffRight, bottom: diffBottom, top: diffTop } = diffBound;
ctx.save();
ctx.globalCompositeOperation = 'copy';
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.drawImage(this._cacheCanvas.getCanvasEle(), diffX * scaleX, diffY * scaleY);
ctx.restore();

this._refreshIncrementalState = true;
ctx.setTransform(mainCtx.getTransform());

for (const diffBound of diffBounds) {
const { left: diffLeft, right: diffRight, bottom: diffBottom, top: diffTop } = diffBound;
ctx.save();
ctx.beginPath();
ctx.rectByPrecision(
diffLeft - rowHeaderWidth - FIX_ONE_PIXEL_BLUR_OFFSET,
diffTop - columnHeaderHeight - FIX_ONE_PIXEL_BLUR_OFFSET,
diffRight - diffLeft + rowHeaderWidth + FIX_ONE_PIXEL_BLUR_OFFSET * 2,
diffBottom - diffTop + columnHeaderHeight + FIX_ONE_PIXEL_BLUR_OFFSET * 2
);
ctx.beginPath();
ctx.rectByPrecision(
diffLeft - rowHeaderWidth - FIX_ONE_PIXEL_BLUR_OFFSET,
diffTop - columnHeaderHeight - FIX_ONE_PIXEL_BLUR_OFFSET,
diffRight - diffLeft + rowHeaderWidth + FIX_ONE_PIXEL_BLUR_OFFSET * 2,
diffBottom - diffTop + columnHeaderHeight + FIX_ONE_PIXEL_BLUR_OFFSET * 2
);
// ctx.fillStyle = 'rgb(0,0,0)';

ctx.clip();
this._draw(ctx, {
viewBound: bounds.viewBound,
diffBounds: [diffBound],
diffX: bounds.diffX,
diffY: bounds.diffY,
viewPortPosition: bounds.viewPortPosition,
viewPortKey: bounds.viewPortKey,
});
ctx.restore();
}

this._refreshIncrementalState = false;
ctx.clip();
this._draw(ctx, {
viewBound: bounds.viewBound,
diffBounds: [diffBound],
diffX: bounds.diffX,
diffY: bounds.diffY,
viewPortPosition: bounds.viewPortPosition,
viewPortKey: bounds.viewPortKey,
});
ctx.restore();
}
this._applyCache(mainCtx, left, top, dw, dh, left, top, dw, dh);
}

ctx.restore();
} else {
this._draw(mainCtx, bounds);
this._refreshIncrementalState = false;
}
this._applyCache(mainCtx, left, top, dw, dh, left, top, dw, dh);
}

ctx.restore();
} else {
this._draw(mainCtx, bounds);
}
Expand Down
94 changes: 51 additions & 43 deletions packages/engine-render/src/viewport.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,9 @@ interface IViewProps extends IViewPosition {
isWheelPreventDefaultX?: boolean;
isWheelPreventDefaultY?: boolean;
active?: boolean;

isRelativeX?: boolean;
isRelativeY?: boolean;
}

export interface IScrollObserverParam {
Expand Down Expand Up @@ -136,10 +139,6 @@ export class Viewport {

private _scrollStopNum: NodeJS.Timeout | number = 0;

private _preScrollX: number = 0;

private _preScrollY: number = 0;

private _renderClipState = true;

private _active = true;
Expand All @@ -158,6 +157,10 @@ export class Viewport {

private _preViewportBound: Nullable<IViewportBound>;

private _preScrollX: number = 0;

private _preScrollY: number = 0;

constructor(viewPortKey: string, scene: ThinScene, props?: IViewProps) {
this._viewPortKey = viewPortKey;

Expand All @@ -179,6 +182,14 @@ export class Viewport {
// this._heightOrigin = this.height;
// }

if (props?.isRelativeX != null) {
this._isRelativeX = props.isRelativeX;
}

if (props?.isRelativeY != null) {
this._isRelativeY = props.isRelativeY;
}

this._setWithAndHeight(props);

this._isWheelPreventDefaultX = props?.isWheelPreventDefaultX || false;
Expand Down Expand Up @@ -537,7 +548,7 @@ export class Viewport {
// DEPT: left is set by upper views but width and height is not

const { scaleX, scaleY } = this._getBoundScale(m[0], m[3]);
ctx.rect(this.left, this.top, (this.width || 0) * scaleX, (this.height || 0) * scaleY);
ctx.rect(this.left, this.top, (this.width || 0), (this.height || 0));
ctx.clip();
}

Expand Down Expand Up @@ -790,35 +801,25 @@ export class Viewport {
let width;
let height;

let left = this.left * scaleX;
let top = this.top * scaleY;

if (this._leftOrigin != null) {
left = this._leftOrigin * scaleX;
}

if (this._topOrigin != null) {
top = this._topOrigin * scaleY;
}
const left = this._leftOrigin * scaleX;
const top = this._topOrigin * scaleY;

if (this._widthOrigin != null) {
width = this._widthOrigin * scaleX;
if (this._isRelativeX) {
width = parentWidth - (this._left + this._right);
} else {
width = parentWidth - (left + this._right);
this.width = width;
width = (this._widthOrigin || 0) * scaleX;
}

if (this._heightOrigin != null) {
height = this._heightOrigin * scaleY;
if (this._isRelativeY) {
height = parentHeight - (this._top + this._bottom);
} else {
height = parentHeight - (top + this._bottom);
this.height = height;
height = (this._heightOrigin || 0) * scaleY;
}

this._left = left;
this._top = top;
// this._width = width;
// this._height = height;
this._width = width;
this._height = height;

// if (!forceCalculate && this._widthOrigin != null) {
// width = this._widthOrigin;
Expand Down Expand Up @@ -971,13 +972,13 @@ export class Viewport {

const m = sceneTrans.getMatrix();

const scaleFromX = this._isRelativeX ? (m[0] < 1 ? m[0] : 1) : 1;
// const scaleFromX = this._isRelativeX ? (m[0] < 1 ? m[0] : 1) : 1;

const scaleFromY = this._isRelativeY ? (m[3] < 1 ? m[3] : 1) : 1;
// const scaleFromY = this._isRelativeY ? (m[3] < 1 ? m[3] : 1) : 1;

const scaleToX = this._isRelativeX ? 1 : m[0] < 1 ? m[0] : 1;
// const scaleToX = this._isRelativeX ? 1 : m[0] < 1 ? m[0] : 1;

const scaleToY = this._isRelativeY ? 1 : m[3] < 1 ? m[3] : 1;
// const scaleToY = this._isRelativeY ? 1 : m[3] < 1 ? m[3] : 1;

let width = this._width;

Expand All @@ -993,10 +994,10 @@ export class Viewport {
height = size.height;
}

const xFrom: number = this.left * scaleFromX;
const xTo: number = ((width || 0) + this.left) * scaleToX;
const yFrom: number = this.top * scaleFromY;
const yTo: number = ((height || 0) + this.top) * scaleToY;
const xFrom: number = this.left;
const xTo: number = ((width || 0) + this.left);
const yFrom: number = this.top;
const yTo: number = ((height || 0) + this.top);

/**
* @DR-Univer The coordinates here need to be consistent with the clip in the render,
Expand Down Expand Up @@ -1094,29 +1095,36 @@ export class Viewport {
}

private _setWithAndHeight(props?: IViewProps) {
this.top = props?.top || 0;
this.left = props?.left || 0;
this.bottom = props?.bottom || 0;
this.right = props?.right || 0;
if (props?.top != null) {
this.top = props.top;
}

if (props?.left != null) {
this.left = props.left;
}

if (props?.bottom != null) {
this.bottom = props.bottom;
}

if (props?.right != null) {
this.right = props.right;
}

if (Tools.isDefine(props?.width)) {
if (Tools.isDefine(props?.width) && !this._isRelativeX) {
this.width = props?.width;
this._widthOrigin = this.width;
this._isRelativeX = false;
} else {
this.width = null;
this._widthOrigin = null;
this._isRelativeX = true;
}

if (Tools.isDefine(props?.height)) {
if (Tools.isDefine(props?.height) && !this._isRelativeY) {
this.height = props?.height;
this._heightOrigin = this.height;
this._isRelativeY = false;
} else {
this.height = null;
this._heightOrigin = null;
this._isRelativeY = true;
}
}

Expand Down
16 changes: 12 additions & 4 deletions packages/sheets-ui/src/controllers/render-controllers/freeze.render-controller.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ const FREEZE_COLUMN_MAIN_NAME = '__SpreadsheetFreezeColumnMainName__';

const FREEZE_COLUMN_HEADER_NAME = '__SpreadsheetFreezeColumnHeaderName__';

const FREEZE_SIZE_NORMAL = 4;
const FREEZE_SIZE_NORMAL = 2;

const AUXILIARY_CLICK_HIDDEN_OBJECT_TRANSPARENCY = 0.01;

Expand Down Expand Up @@ -214,9 +214,13 @@ export class HeaderFreezeRenderController extends Disposable implements IRenderC

const scale = Math.max(scene.scaleX, scene.scaleY);

const FREEZE_SIZE = FREEZE_SIZE_NORMAL / (scale < 1 ? 1 : scale);
let FREEZE_SIZE = FREEZE_SIZE_NORMAL / (scale < 1 ? 1 : scale);

if (freezeDirectionType === FREEZE_DIRECTION_TYPE.ROW) {
if (freezeRow === -1 || freezeRow === 0) {
FREEZE_SIZE = FREEZE_SIZE * 2;
}

const FREEZE_OFFSET = FREEZE_SIZE;

this._rowFreezeHeaderRect = new Rect(FREEZE_ROW_HEADER_NAME, {
Expand All @@ -235,7 +239,7 @@ export class HeaderFreezeRenderController extends Disposable implements IRenderC

this._rowFreezeMainRect = new Rect(FREEZE_ROW_MAIN_NAME, {
fill,
width: shapeWidth * 2,
width: shapeWidth * 2 / scale,
height: FREEZE_SIZE,
left: rowHeaderWidthAndMarginLeft,
top: startY - FREEZE_OFFSET,
Expand All @@ -244,6 +248,10 @@ export class HeaderFreezeRenderController extends Disposable implements IRenderC

scene.addObjects([this._rowFreezeHeaderRect, this._rowFreezeMainRect], SHEET_COMPONENT_HEADER_LAYER_INDEX);
} else {
if (freezeColumn === -1 || freezeColumn === 0) {
FREEZE_SIZE = FREEZE_SIZE * 2;
}

const FREEZE_OFFSET = FREEZE_SIZE;

this._columnFreezeHeaderRect = new Rect(FREEZE_COLUMN_HEADER_NAME, {
Expand All @@ -263,7 +271,7 @@ export class HeaderFreezeRenderController extends Disposable implements IRenderC
this._columnFreezeMainRect = new Rect(FREEZE_COLUMN_MAIN_NAME, {
fill,
width: FREEZE_SIZE,
height: shapeHeight * 2,
height: shapeHeight * 2 / scale,
left: startX - FREEZE_OFFSET,
top: columnHeaderHeightAndMarginTop,
zIndex: 3,
Expand Down