Skip to content

Commit

Permalink
fix: select multiple rows
Browse files Browse the repository at this point in the history
  • Loading branch information
@nusr
nusr committed Feb 17, 2024
1 parent 6b5d1a1 commit bb1fa93
Show file tree
Hide file tree
Showing 15 changed files with 363 additions and 298 deletions.
195 changes: 5 additions & 190 deletions src/canvas/Content.ts
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,6 @@
import {
isEmpty,
thinLineWidth,
npx,
dpr,
intToColumnName,
Range,
theme,
canvasLog,
} from '@/util';
import {
fillRect,
fillText,
drawLines,
renderCell,
drawTriangle,
resizeCanvas,
} from './util';
import { HEADER_STYLE } from './constant';
import { Point, ContentView, IController, EventType } from '@/types';
import { isEmpty, npx, dpr, Range, canvasLog } from '@/util';
import { renderCell, resizeCanvas } from './util';
import { ContentView, IController, EventType } from '@/types';

export class Content implements ContentView {
private canvas: HTMLCanvasElement;
Expand All @@ -42,6 +25,7 @@ export class Content implements ContentView {
if (changeSet.size === 0) {
return;
}

const check =
changeSet.has('row') ||
changeSet.has('col') ||
Expand All @@ -50,19 +34,12 @@ export class Content implements ContentView {
changeSet.has('cellStyle') ||
changeSet.has('cellValue') ||
changeSet.has('scroll');

if (!check) {
return;
}
canvasLog('render canvas content');
const { width, height } = this.controller.getDomRect();
const headerSize = this.controller.getHeaderSize();
this.clear();
const contentWidth = width - headerSize.width;
const contentHeight = height - headerSize.height;
this.renderGrid(contentWidth, contentHeight);
this.renderRowsHeader(contentHeight);
this.renderColsHeader(contentWidth);
this.renderTriangle();
this.renderContent();
}
private clear() {
Expand Down Expand Up @@ -139,166 +116,4 @@ export class Content implements ContentView {
}
ctx.restore();
}
private renderTriangle(): void {
const headerSize = this.controller.getHeaderSize();
this.ctx.save();
this.ctx.fillStyle = theme.backgroundColor;

fillRect(this.ctx, 0, 0, headerSize.width, headerSize.height);
this.ctx.fillStyle = theme.triangleFillColor;
const offset = 2;
drawTriangle(
this.ctx,
[headerSize.width / 2 - offset, headerSize.height - offset],
[headerSize.width - offset, headerSize.height - offset],
[headerSize.width - offset, offset],
);

this.ctx.restore();
}

private renderGrid(width: number, height: number): void {
const { controller } = this;
const headerSize = controller.getHeaderSize();
const { row: rowIndex, col: colIndex } = controller.getScroll();
const { rowCount, colCount } = this.controller.getSheetInfo(
this.controller.getCurrentSheetId(),
);
const lineWidth = thinLineWidth();
this.ctx.save();
this.ctx.fillStyle = theme.white;
this.ctx.lineWidth = lineWidth;
this.ctx.strokeStyle = theme.gridStrokeColor;
this.ctx.translate(npx(headerSize.width), npx(headerSize.height));
const pointList: Point[] = [];
let y = 0;
let x = 0;
let maxX = 0;
for (let i = colIndex; i < colCount; i++) {
maxX += controller.getColWidth(i);
if (maxX > width) {
break;
}
}
const realWidth = Math.min(maxX, width);
let skip = false;
for (let i = rowIndex; i < rowCount; i++) {
if (!skip) {
pointList.push([0, y], [realWidth, y]);
} else {
skip = false;
}
const h = controller.getRowHeight(i);
if (h === 0) {
skip = true;
}
y += h;
if (y > height) {
break;
}
}
for (let i = colIndex; i < colCount; i++) {
if (!skip) {
pointList.push([x, 0], [x, y]);
} else {
skip = false;
}
const w = controller.getColWidth(i);
if (w === 0) {
skip = true;
}
x += w;
if (x > realWidth) {
break;
}
}
pointList.push([0, y], [x, y]);
pointList.push([x, 0], [x, y]);
drawLines(this.ctx, pointList);
this.ctx.restore();
}
private fillRowText(row: number, rowWidth: number, y: number): void {
this.ctx.fillStyle = theme.black;
fillText(this.ctx, String(row), rowWidth / 2, y);
}

private fillColText(colText: string, x: number, colHeight: number): void {
this.ctx.fillStyle = theme.black;
fillText(this.ctx, colText, x, colHeight / 2 + dpr());
}
private renderRowsHeader(height: number): void {
const { controller } = this;
const { row: rowIndex } = controller.getScroll();
const headerSize = controller.getHeaderSize();
const { rowCount } = controller.getSheetInfo(
controller.getCurrentSheetId(),
);
this.ctx.save();
this.ctx.fillStyle = theme.backgroundColor;
fillRect(this.ctx, 0, headerSize.height, headerSize.width, height);
Object.assign(this.ctx, HEADER_STYLE);
const pointList: Point[] = [];
let y = headerSize.height;
let i = rowIndex;

for (; i < rowCount; i++) {
const rowHeight = controller.getRowHeight(i);
let temp = y;
if (i === rowIndex) {
temp += thinLineWidth() / 2;
}
pointList.push([0, temp], [headerSize.width, temp]);
if (rowHeight > 0) {
this.fillRowText(i + 1, headerSize.width, temp + rowHeight / 2);
}
y += rowHeight;
if (y > height) {
break;
}
}
pointList.push([0, y], [headerSize.width, y]);
pointList.push([0, 0], [0, y]);
drawLines(this.ctx, pointList);
this.ctx.restore();
}
private renderColsHeader(width: number): void {
const { controller } = this;

const { col: colIndex } = controller.getScroll();
const headerSize = controller.getHeaderSize();
const { colCount } = controller.getSheetInfo(
controller.getCurrentSheetId(),
);
const pointList: Point[] = [];
this.ctx.save();
this.ctx.fillStyle = theme.backgroundColor;
fillRect(this.ctx, headerSize.width, 0, width, headerSize.height);
Object.assign(this.ctx, HEADER_STYLE);

let x = headerSize.width;
let i = colIndex;
for (; i < colCount; i++) {
const colWidth = controller.getColWidth(i);
let temp = x;
if (i === colIndex) {
temp += thinLineWidth() / 2;
}
pointList.push([temp, 0], [temp, headerSize.height]);
if (colWidth > 0) {
this.fillColText(
intToColumnName(i),
temp + colWidth / 2,
headerSize.height,
);
}
x += colWidth;
if (x > width) {
break;
}
}
pointList.push([x, 0], [x, headerSize.height]);
pointList.push([0, 0], [x, 0]);
drawLines(this.ctx, pointList);
this.ctx.restore();
}
}
Loading

0 comments on commit bb1fa93

Please sign in to comment.