Skip to content
This repository has been archived by the owner on Mar 28, 2024. It is now read-only.

Commit

Permalink
fix(frozen bug and style change): fix bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@tubiaoge
tubiaoge committed Aug 7, 2020
1 parent c7c1999 commit 7cfd0d9
Show file tree
Hide file tree
Showing 5 changed files with 131 additions and 63 deletions.
6 changes: 3 additions & 3 deletions src/controllers/freezen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@ const luckysheetFreezen = {
let premax = pre[pre.length - 1];
let ret = arr.slice(cutindex);

for (let i = 0; i < ret.length; i++) {
ret[i] -= premax;
}
// for (let i = 0; i < ret.length; i++) {
// ret[i] -= premax;
// }

return ret;
},
Expand Down
20 changes: 13 additions & 7 deletions src/css/luckysheet-core.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1221,6 +1221,7 @@ div.luckysheet-sheets-add:hover, div.luckysheet-sheets-m:hover {
outline-style: none;
position: relative;
-webkit-user-select: none;
background: #f3f3f2;
}

.luckysheet-rows-h {
Expand All @@ -1234,6 +1235,7 @@ div.luckysheet-sheets-add:hover, div.luckysheet-sheets-m:hover {
cursor: default;
/*height: 472px;*/
width: 38px;
background: #f3f3f2;
}

.luckysheet-cols-menu-btn {
Expand Down Expand Up @@ -1685,7 +1687,7 @@ body:not(.ewa-ipad) .luckysheet-cols-h-cell-nosel:hover, body:not(.ewa-ipad) .lu
/*width: 400px;*/
/* background: #000; */
bottom: 68px;
left: 10px;
left: 0px;
z-index: 1000;
}

Expand Down Expand Up @@ -4484,16 +4486,16 @@ fieldset[disabled] a.btn {
}

.luckysheet-freezebar-vertical-drop-bar {
width: 4px;
background-color: #f3f3f2;
width: 2px;
background:rgba(0, 0, 0, 0.45);
border-width: 2px 1px 2px 2px;
margin-top: 19px;
top: 0px;
bottom: 0px;
}

.luckysheet-freezebar-vertical-drop-title {
width: 4px;
width: 2px;
background: #bcbdbc;
/* opacity: 0.80;
filter: alpha(opacity=80);*/
Expand All @@ -4504,10 +4506,12 @@ fieldset[disabled] a.btn {

.luckysheet-freezebar-hover .luckysheet-freezebar-vertical-drop-bar, .luckysheet-freezebar-active .luckysheet-freezebar-vertical-drop-bar {
background: #C1C1C1;
width: 4px;
}

.luckysheet-freezebar-hover .luckysheet-freezebar-vertical-drop-title, .luckysheet-freezebar-active .luckysheet-freezebar-vertical-drop-title {
background: #5D88DB;
width: 4px;
}


Expand Down Expand Up @@ -4550,9 +4554,9 @@ fieldset[disabled] a.btn {
}

.luckysheet-freezebar-horizontal-drop-bar {
height: 4px;
height: 2px;
overflow: hidden;
background-color: #f3f3f2;
background:rgba(0, 0, 0, 0.45);
border-width: 2px 2px 1px 2px;
margin-left: 45px;
left: 0px;
Expand All @@ -4561,7 +4565,7 @@ fieldset[disabled] a.btn {


.luckysheet-freezebar-horizontal-drop-title {
height: 4px;
height: 2px;
background: #bcbdbc;
/* opacity: 0.80;
filter: alpha(opacity=80);*/
Expand All @@ -4571,10 +4575,12 @@ fieldset[disabled] a.btn {

.luckysheet-freezebar-hover .luckysheet-freezebar-horizontal-drop-bar, .luckysheet-freezebar-active .luckysheet-freezebar-horizontal-drop-bar {
background: #C1C1C1;
height: 4px;
}

.luckysheet-freezebar-hover .luckysheet-freezebar-horizontal-drop-title, .luckysheet-freezebar-active .luckysheet-freezebar-horizontal-drop-title {
background: #5D88DB;
height: 4px;
}


Expand Down
143 changes: 97 additions & 46 deletions src/global/draw.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,6 @@ import { getObjType, chatatABC, luckysheetfontformat } from '../utils/util';
import Store from '../store';
import locale from '../locale/locale';

function luckysheetDrawgrid(scrollWidth, scrollHeight, drawWidth, drawHeight, offsetLeft, offsetTop) {
if($("#luckysheetTableContent").length == 0){
return;
}

luckysheetDrawMain(scrollWidth, scrollHeight, drawWidth, drawHeight, offsetLeft, offsetTop);

$("#luckysheetTableContent").get(0).getContext("2d").clearRect(0, 0, 46, 20);

luckysheetDrawgridColumnTitle(scrollWidth, drawWidth, offsetLeft);
luckysheetDrawgridRowTitle(scrollHeight, drawHeight, offsetTop);
}

function luckysheetDrawgridRowTitle(scrollHeight, drawHeight, offsetTop) {
if (scrollHeight == null) {
scrollHeight = $("#luckysheet-cell-main").scrollTop();
Expand Down Expand Up @@ -65,6 +52,11 @@ function luckysheetDrawgridRowTitle(scrollHeight, drawHeight, offsetTop) {
dataset_row_ed = Store.visibledatarow.length - 1;
}

luckysheetTableContent.save();
luckysheetTableContent.beginPath();
luckysheetTableContent.rect(0, offsetTop* Store.devicePixelRatio, Store.rowHeaderWidth * Store.devicePixelRatio-1, drawHeight-2);
luckysheetTableContent.clip();

let end_r, start_r;

for (let r = dataset_row_st; r <= dataset_row_ed; r++) {
Expand All @@ -85,6 +77,16 @@ function luckysheetDrawgridRowTitle(scrollHeight, drawHeight, offsetTop) {

}
else {

luckysheetTableContent.fillStyle = "#ffffff";
luckysheetTableContent.fillRect(
0,
(start_r + offsetTop) * Store.devicePixelRatio,
Store.rowHeaderWidth * Store.devicePixelRatio-1,
(end_r - start_r - 1) * Store.devicePixelRatio
)
luckysheetTableContent.fillStyle = "#000000";

//行标题栏序列号
let textMetrics = getMeasureText(r+1, luckysheetTableContent);
//luckysheetTableContent.measureText(r + 1);
Expand All @@ -95,7 +97,23 @@ function luckysheetDrawgridRowTitle(scrollHeight, drawHeight, offsetTop) {
luckysheetTableContent.fillText(r + 1, horizonAlignPos, verticalAlignPos);
}

//行标题栏横线
//vertical
luckysheetTableContent.beginPath();
luckysheetTableContent.moveTo(
(Store.rowHeaderWidth - 2 + 0.5) * Store.devicePixelRatio,
Store.devicePixelRatio * (start_r + offsetTop - 2)
);
luckysheetTableContent.lineTo(
(Store.rowHeaderWidth - 2 + 0.5) * Store.devicePixelRatio,
Store.devicePixelRatio * (end_r + offsetTop - 2)
);
luckysheetTableContent.lineWidth = Store.devicePixelRatio;

luckysheetTableContent.strokeStyle = luckysheetdefaultstyle.strokeStyle;
luckysheetTableContent.stroke();
luckysheetTableContent.closePath();

//行标题栏横线,horizen
luckysheetTableContent.beginPath();
luckysheetTableContent.moveTo(
-1,
Expand All @@ -105,30 +123,32 @@ function luckysheetDrawgridRowTitle(scrollHeight, drawHeight, offsetTop) {
(Store.rowHeaderWidth - 1) * Store.devicePixelRatio,
(end_r + offsetTop - 2 + 0.5) * Store.devicePixelRatio
);
luckysheetTableContent.lineWidth = Store.devicePixelRatio;
luckysheetTableContent.strokeStyle = luckysheetdefaultstyle.strokeStyle;
// luckysheetTableContent.lineWidth = Store.devicePixelRatio;
// luckysheetTableContent.strokeStyle = luckysheetdefaultstyle.strokeStyle;
luckysheetTableContent.closePath();
luckysheetTableContent.stroke();
}

//行标题栏竖线
luckysheetTableContent.beginPath();
luckysheetTableContent.moveTo(
(Store.rowHeaderWidth - 2 + 0.5) * Store.devicePixelRatio,
(offsetTop - 1) * Store.devicePixelRatio
);
luckysheetTableContent.lineTo(
(Store.rowHeaderWidth - 2 + 0.5) * Store.devicePixelRatio,
(Store.rh_height + offsetTop) * Store.devicePixelRatio
);
luckysheetTableContent.lineWidth = Store.devicePixelRatio;
luckysheetTableContent.strokeStyle = luckysheetdefaultstyle.strokeStyle;
luckysheetTableContent.closePath();
luckysheetTableContent.stroke();
// luckysheetTableContent.beginPath();
// luckysheetTableContent.moveTo(
// (Store.rowHeaderWidth - 2 + 0.5) * Store.devicePixelRatio,
// (offsetTop - 1) * Store.devicePixelRatio
// );
// luckysheetTableContent.lineTo(
// (Store.rowHeaderWidth - 2 + 0.5) * Store.devicePixelRatio,
// (Store.rh_height + offsetTop) * Store.devicePixelRatio
// );
// luckysheetTableContent.lineWidth = Store.devicePixelRatio;
// luckysheetTableContent.strokeStyle = luckysheetdefaultstyle.strokeStyle;
// luckysheetTableContent.closePath();
// luckysheetTableContent.stroke();


//清除canvas左上角区域 防止列标题栏序列号溢出显示
luckysheetTableContent.clearRect(0, 0, Store.rowHeaderWidth * Store.devicePixelRatio, Store.columeHeaderHeight * Store.devicePixelRatio);
// luckysheetTableContent.clearRect(0, 0, Store.rowHeaderWidth * Store.devicePixelRatio, Store.columeHeaderHeight * Store.devicePixelRatio);

luckysheetTableContent.restore();
}

function luckysheetDrawgridColumnTitle(scrollWidth, drawWidth, offsetLeft) {
Expand Down Expand Up @@ -167,6 +187,11 @@ function luckysheetDrawgridColumnTitle(scrollWidth, drawWidth, offsetLeft) {
if (dataset_col_ed == -1) {
dataset_col_ed = Store.visibledatacolumn.length - 1;
}

luckysheetTableContent.save();
luckysheetTableContent.beginPath();
luckysheetTableContent.rect(offsetLeft* Store.devicePixelRatio, 0, drawWidth, Store.columeHeaderHeight * Store.devicePixelRatio-1);
luckysheetTableContent.clip();

let end_c, start_c;

Expand All @@ -184,6 +209,15 @@ function luckysheetDrawgridColumnTitle(scrollWidth, drawWidth, offsetLeft) {
break;
}

luckysheetTableContent.fillStyle = "#ffffff";
luckysheetTableContent.fillRect(
(start_c + offsetLeft - 1) * Store.devicePixelRatio,
0,
(end_c - start_c) * Store.devicePixelRatio,
Store.columeHeaderHeight * Store.devicePixelRatio-1
)
luckysheetTableContent.fillStyle = "#000000";

//列标题栏序列号
let abc = chatatABC(c);
let textMetrics = getMeasureText(abc, luckysheetTableContent);
Expand All @@ -194,7 +228,7 @@ function luckysheetDrawgridColumnTitle(scrollWidth, drawWidth, offsetLeft) {

luckysheetTableContent.fillText(abc, horizonAlignPos, verticalAlignPos);

//列标题栏竖线
//列标题栏竖线 vertical
luckysheetTableContent.beginPath();
luckysheetTableContent.moveTo(
(end_c + offsetLeft - 2 + 0.5) * Store.devicePixelRatio,
Expand All @@ -208,25 +242,43 @@ function luckysheetDrawgridColumnTitle(scrollWidth, drawWidth, offsetLeft) {
luckysheetTableContent.strokeStyle = luckysheetdefaultstyle.strokeStyle;
luckysheetTableContent.closePath();
luckysheetTableContent.stroke();

//horizen
luckysheetTableContent.beginPath();
luckysheetTableContent.moveTo(
Store.devicePixelRatio * (start_c + offsetLeft - 1),
(Store.columeHeaderHeight - 2 + 0.5) * Store.devicePixelRatio
);
luckysheetTableContent.lineTo(
Store.devicePixelRatio * (end_c + offsetLeft - 1),
(Store.columeHeaderHeight - 2 + 0.5) * Store.devicePixelRatio
);
// luckysheetTableContent.lineWidth = Store.devicePixelRatio;

// luckysheetTableContent.strokeStyle = luckysheetdefaultstyle.strokeStyle;
luckysheetTableContent.stroke();
luckysheetTableContent.closePath();
}

//列标题栏横线
luckysheetTableContent.beginPath();
luckysheetTableContent.moveTo(
(offsetLeft - 1) * Store.devicePixelRatio,
(Store.columeHeaderHeight - 2 + 0.5) * Store.devicePixelRatio
);
luckysheetTableContent.lineTo(
(Store.ch_width + offsetLeft - 2) * Store.devicePixelRatio,
(Store.columeHeaderHeight - 2 + 0.5) * Store.devicePixelRatio
);
luckysheetTableContent.lineWidth = Store.devicePixelRatio;
luckysheetTableContent.strokeStyle = luckysheetdefaultstyle.strokeStyle;
luckysheetTableContent.closePath();
luckysheetTableContent.stroke();
// luckysheetTableContent.beginPath();
// luckysheetTableContent.moveTo(
// (offsetLeft - 1) * Store.devicePixelRatio,
// (Store.columeHeaderHeight - 2 + 0.5) * Store.devicePixelRatio
// );
// luckysheetTableContent.lineTo(
// (Store.ch_width + offsetLeft - 2) * Store.devicePixelRatio,
// (Store.columeHeaderHeight - 2 + 0.5) * Store.devicePixelRatio
// );
// luckysheetTableContent.lineWidth = Store.devicePixelRatio;
// luckysheetTableContent.strokeStyle = luckysheetdefaultstyle.strokeStyle;
// luckysheetTableContent.closePath();
// luckysheetTableContent.stroke();

//清除canvas左上角区域 防止列标题栏序列号溢出显示
luckysheetTableContent.clearRect(0, 0, Store.rowHeaderWidth * Store.devicePixelRatio, Store.columeHeaderHeight * Store.devicePixelRatio);
// luckysheetTableContent.clearRect(0, 0, Store.rowHeaderWidth * Store.devicePixelRatio, Store.columeHeaderHeight * Store.devicePixelRatio);

luckysheetTableContent.restore();
}

function luckysheetDrawMain(scrollWidth, scrollHeight, drawWidth, drawHeight, offsetLeft, offsetTop, columnOffsetCell, rowOffsetCell, mycanvas) {
Expand Down Expand Up @@ -2057,7 +2109,6 @@ function cellOverflow_colIn(map, r, c, col_st, col_ed){
}

export {
luckysheetDrawgrid,
luckysheetDrawgridRowTitle,
luckysheetDrawgridColumnTitle,
luckysheetDrawMain,
Expand Down
Loading

0 comments on commit 7cfd0d9

Please sign in to comment.