You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
840 lines
40 KiB
840 lines
40 KiB
import { rowLocation, colLocation, mouseposition } from '../global/location';
|
|
import editor from '../global/editor';
|
|
import formula from '../global/formula';
|
|
import { luckysheetRangeLast } from '../global/cursorPos';
|
|
import { luckysheetrefreshgrid } from '../global/refresh';
|
|
import { setluckysheet_scroll_status } from '../methods/set';
|
|
import { getSheetIndex } from '../methods/get';
|
|
import { getObjType } from '../utils/util';
|
|
import luckysheetFreezen from './freezen';
|
|
import menuButton from './menuButton';
|
|
import server from './server';
|
|
import Store from '../store';
|
|
|
|
//批注
|
|
const luckysheetPostil = {
|
|
defaultWidth: 144,
|
|
defaultHeight: 84,
|
|
currentObj: null,
|
|
currentWinW: null,
|
|
currentWinH: null,
|
|
resize: null,
|
|
resizeXY: null,
|
|
move: false,
|
|
moveXY: null,
|
|
init: function(){
|
|
let _this = this;
|
|
|
|
//点击批注框 聚焦
|
|
$("#luckysheet-postil-showBoxs").off("mousedown.showPs").on("mousedown.showPs", ".luckysheet-postil-show", function(event){
|
|
_this.currentObj = $(this).find(".luckysheet-postil-show-main");
|
|
|
|
if($(this).hasClass("luckysheet-postil-show-active")){
|
|
event.stopPropagation();
|
|
return;
|
|
}
|
|
|
|
_this.removeActivePs();
|
|
|
|
$(this).addClass("luckysheet-postil-show-active");
|
|
$(this).find(".luckysheet-postil-dialog-resize").show();
|
|
$(this).find(".arrowCanvas").css("z-index", 200);
|
|
$(this).find(".luckysheet-postil-show-main").css("z-index", 200);
|
|
|
|
event.stopPropagation();
|
|
});
|
|
$("#luckysheet-postil-showBoxs").off("mouseup.showPs").on("mouseup.showPs", ".luckysheet-postil-show", function(event){
|
|
if(event.which == "3"){
|
|
event.stopPropagation();
|
|
}
|
|
});
|
|
|
|
//批注框 改变大小
|
|
$("#luckysheet-postil-showBoxs").off("mousedown.resize").on("mousedown.resize", ".luckysheet-postil-show .luckysheet-postil-dialog-resize .luckysheet-postil-dialog-resize-item", function(event){
|
|
_this.currentObj = $(this).closest(".luckysheet-postil-show-main");
|
|
_this.currentWinW = $("#luckysheet-cell-main")[0].scrollWidth;
|
|
_this.currentWinH = $("#luckysheet-cell-main")[0].scrollHeight;
|
|
|
|
_this.resize = $(this).data("type");
|
|
|
|
let scrollTop = $("#luckysheet-cell-main").scrollTop(),
|
|
scrollLeft = $("#luckysheet-cell-main").scrollLeft();
|
|
let mouse = mouseposition(event.pageX, event.pageY);
|
|
let x = mouse[0] + scrollLeft;
|
|
let y = mouse[1] + scrollTop;
|
|
|
|
let position = _this.currentObj.position();
|
|
let width = _this.currentObj.width();
|
|
let height = _this.currentObj.height();
|
|
|
|
_this.resizeXY = [
|
|
x,
|
|
y,
|
|
width,
|
|
height,
|
|
position.left + scrollLeft,
|
|
position.top + scrollTop,
|
|
scrollLeft,
|
|
scrollTop
|
|
];
|
|
|
|
setluckysheet_scroll_status(true);
|
|
|
|
if($(this).closest(".luckysheet-postil-show").hasClass("luckysheet-postil-show-active")){
|
|
event.stopPropagation();
|
|
return;
|
|
}
|
|
|
|
_this.removeActivePs();
|
|
|
|
$(this).closest(".luckysheet-postil-show").addClass("luckysheet-postil-show-active");
|
|
$(this).closest(".luckysheet-postil-show").find(".luckysheet-postil-dialog-resize").show();
|
|
$(this).closest(".luckysheet-postil-show").find(".arrowCanvas").css("z-index", 200);
|
|
$(this).closest(".luckysheet-postil-show").find(".luckysheet-postil-show-main").css("z-index", 200);
|
|
|
|
event.stopPropagation();
|
|
});
|
|
|
|
//批注框 移动
|
|
$("#luckysheet-postil-showBoxs").off("mousedown.move").on("mousedown.move", ".luckysheet-postil-show .luckysheet-postil-dialog-move .luckysheet-postil-dialog-move-item", function(event){
|
|
_this.currentObj = $(this).closest(".luckysheet-postil-show-main");
|
|
_this.currentWinW = $("#luckysheet-cell-main")[0].scrollWidth;
|
|
_this.currentWinH = $("#luckysheet-cell-main")[0].scrollHeight;
|
|
|
|
_this.move = true;
|
|
|
|
let scrollTop = $("#luckysheet-cell-main").scrollTop(),
|
|
scrollLeft = $("#luckysheet-cell-main").scrollLeft();
|
|
|
|
let offset = _this.currentObj.offset();
|
|
let position = _this.currentObj.position();
|
|
|
|
_this.moveXY = [
|
|
event.pageX - offset.left,
|
|
event.pageY - offset.top,
|
|
position.left,
|
|
position.top,
|
|
scrollLeft,
|
|
scrollTop
|
|
];
|
|
|
|
setluckysheet_scroll_status(true);
|
|
|
|
if($(this).closest(".luckysheet-postil-show").hasClass("luckysheet-postil-show-active")){
|
|
event.stopPropagation();
|
|
return;
|
|
}
|
|
|
|
_this.removeActivePs();
|
|
|
|
$(this).closest(".luckysheet-postil-show").addClass("luckysheet-postil-show-active");
|
|
$(this).closest(".luckysheet-postil-show").find(".luckysheet-postil-dialog-resize").show();
|
|
$(this).closest(".luckysheet-postil-show").find(".arrowCanvas").css("z-index", 200);
|
|
$(this).closest(".luckysheet-postil-show").find(".luckysheet-postil-show-main").css("z-index", 200);
|
|
|
|
event.stopPropagation();
|
|
});
|
|
},
|
|
overshow: function(event){
|
|
let _this = this;
|
|
|
|
$("#luckysheet-postil-overshow").remove();
|
|
|
|
if($(event.target).closest("#luckysheet-cell-main").length == 0){
|
|
return;
|
|
}
|
|
|
|
let mouse = mouseposition(event.pageX, event.pageY);
|
|
let scrollLeft = $("#luckysheet-cell-main").scrollLeft();
|
|
let scrollTop = $("#luckysheet-cell-main").scrollTop();
|
|
let x = mouse[0] + scrollLeft;
|
|
let y = mouse[1] + scrollTop;
|
|
|
|
if(luckysheetFreezen.freezenverticaldata != null && mouse[0] < (luckysheetFreezen.freezenverticaldata[0] - luckysheetFreezen.freezenverticaldata[2])){
|
|
return;
|
|
}
|
|
|
|
if(luckysheetFreezen.freezenhorizontaldata != null && mouse[1] < (luckysheetFreezen.freezenhorizontaldata[0] - luckysheetFreezen.freezenhorizontaldata[2])){
|
|
return;
|
|
}
|
|
|
|
let row_index = rowLocation(y)[2];
|
|
let col_index = colLocation(x)[2];
|
|
|
|
let margeset = menuButton.mergeborer(Store.flowdata, row_index, col_index);
|
|
if(!!margeset){
|
|
row_index = margeset.row[2];
|
|
col_index = margeset.column[2];
|
|
}
|
|
|
|
if(Store.flowdata[row_index] == null || Store.flowdata[row_index][col_index] == null || Store.flowdata[row_index][col_index].ps == null){
|
|
return;
|
|
}
|
|
|
|
let postil = Store.flowdata[row_index][col_index].ps;
|
|
|
|
if(postil["isshow"] || $("#luckysheet-postil-show_"+ row_index +"_"+ col_index).length > 0){
|
|
return;
|
|
}
|
|
|
|
let value = postil["value"] == null ? "" : postil["value"];
|
|
|
|
let row = Store.visibledatarow[row_index],
|
|
row_pre = row_index - 1 == -1 ? 0 : Store.visibledatarow[row_index - 1];
|
|
let col = Store.visibledatacolumn[col_index],
|
|
col_pre = col_index - 1 == -1 ? 0 : Store.visibledatacolumn[col_index - 1];
|
|
|
|
if(!!margeset){
|
|
row = margeset.row[1];
|
|
row_pre = margeset.row[0];
|
|
|
|
col = margeset.column[1];
|
|
col_pre = margeset.column[0];
|
|
}
|
|
|
|
let toX = col;
|
|
let toY = row_pre;
|
|
|
|
let fromX = toX + 18;
|
|
let fromY = toY - 18;
|
|
|
|
if(fromY < 0){
|
|
fromY = 2;
|
|
}
|
|
|
|
let size = _this.getArrowCanvasSize(fromX, fromY, toX, toY);
|
|
|
|
let html = '<div id="luckysheet-postil-overshow">' +
|
|
'<canvas class="arrowCanvas" width="'+ size[2] +'" height="'+ size[3] +'" style="position:absolute;left:'+ size[0] +'px;top:'+ size[1] +'px;z-index:100;pointer-events:none;"></canvas>' +
|
|
'<div style="width:132px;min-height:72px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:'+ fromX +'px;top:'+ fromY +'px;z-index:100;">'+ value +'</div>' +
|
|
'</div>';
|
|
|
|
$(html).appendTo($("#luckysheet-cell-main"));
|
|
|
|
let ctx = $("#luckysheet-postil-overshow .arrowCanvas").get(0).getContext("2d");
|
|
|
|
_this.drawArrow(ctx, size[4], size[5], size[6], size[7]);
|
|
},
|
|
getArrowCanvasSize: function(fromX, fromY, toX, toY){
|
|
let left = toX - 5;
|
|
|
|
if(fromX < toX){
|
|
left = fromX - 5;
|
|
}
|
|
|
|
let top = toY - 5;
|
|
|
|
if(fromY < toY){
|
|
top = fromY - 5;
|
|
}
|
|
|
|
let width = Math.abs(fromX - toX) + 10;
|
|
let height = Math.abs(fromY - toY) + 10;
|
|
|
|
let x1 = width - 5;
|
|
let x2 = 5;
|
|
|
|
if(fromX < toX){
|
|
x1 = 5;
|
|
x2 = width - 5;
|
|
}
|
|
|
|
let y1 = height - 5;
|
|
let y2 = 5;
|
|
|
|
if(fromY < toY){
|
|
y1 = 5;
|
|
y2 = height - 5;
|
|
}
|
|
|
|
return [left, top, width, height, x1, y1, x2, y2];
|
|
},
|
|
drawArrow: function(ctx, fromX, fromY, toX, toY, theta, headlen, width, color){
|
|
theta = getObjType(theta) == "undefined" ? 30 : theta;
|
|
headlen = getObjType(headlen) == "undefined" ? 6 : headlen;
|
|
width = getObjType(width) == "undefined" ? 1 : width;
|
|
color = getObjType(color) == "undefined" ? "#000" : color;
|
|
|
|
// 计算各角度和对应的P2,P3坐标
|
|
let angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
|
|
angle1 = (angle + theta) * Math.PI / 180,
|
|
angle2 = (angle - theta) * Math.PI / 180,
|
|
topX = headlen * Math.cos(angle1),
|
|
topY = headlen * Math.sin(angle1),
|
|
botX = headlen * Math.cos(angle2),
|
|
botY = headlen * Math.sin(angle2);
|
|
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
|
|
let arrowX = fromX - topX,
|
|
arrowY = fromY - topY;
|
|
|
|
ctx.moveTo(arrowX, arrowY);
|
|
ctx.moveTo(fromX, fromY);
|
|
ctx.lineTo(toX, toY);
|
|
|
|
ctx.lineWidth = width;
|
|
ctx.strokeStyle = color;
|
|
ctx.stroke();
|
|
|
|
arrowX = toX + topX;
|
|
arrowY = toY + topY;
|
|
ctx.moveTo(arrowX, arrowY);
|
|
ctx.lineTo(toX, toY);
|
|
arrowX = toX + botX;
|
|
arrowY = toY + botY;
|
|
ctx.lineTo(arrowX, arrowY);
|
|
|
|
ctx.fillStyle = color;
|
|
ctx.fill();
|
|
ctx.restore();
|
|
},
|
|
buildAllPs: function(data){
|
|
let _this = this;
|
|
|
|
$("#luckysheet-cell-main #luckysheet-postil-showBoxs").empty();
|
|
|
|
for(let r = 0; r < data.length; r++){
|
|
for(let c = 0; c < data[0].length; c++){
|
|
if(data[r][c] != null && data[r][c].ps != null){
|
|
let postil = data[r][c].ps;
|
|
_this.buildPs(r, c, postil);
|
|
}
|
|
}
|
|
}
|
|
|
|
_this.init();
|
|
},
|
|
buildPs: function(r, c, postil){
|
|
if($("#luckysheet-postil-show_"+ r +"_"+ c).length > 0){
|
|
$("#luckysheet-postil-show_"+ r +"_"+ c).remove();
|
|
}
|
|
|
|
if(postil == null){
|
|
return;
|
|
}
|
|
|
|
let _this = this;
|
|
let isshow = postil["isshow"] == null ? false : postil["isshow"];
|
|
|
|
if(isshow){
|
|
let row = Store.visibledatarow[r],
|
|
row_pre = r - 1 == -1 ? 0 : Store.visibledatarow[r - 1];
|
|
let col = Store.visibledatacolumn[c],
|
|
col_pre = c - 1 == -1 ? 0 : Store.visibledatacolumn[c - 1];
|
|
|
|
let margeset = menuButton.mergeborer(Store.flowdata, r, c);
|
|
if(!!margeset){
|
|
row = margeset.row[1];
|
|
row_pre = margeset.row[0];
|
|
|
|
col = margeset.column[1];
|
|
col_pre = margeset.column[0];
|
|
}
|
|
|
|
let toX = col;
|
|
let toY = row_pre;
|
|
|
|
let left = postil["left"] == null ? toX + 18 : postil["left"];
|
|
let top = postil["top"] == null ? toY - 18 : postil["top"];
|
|
let width = postil["width"] == null ? _this.defaultWidth : postil["width"];
|
|
let height = postil["height"] == null ? _this.defaultHeight : postil["height"];
|
|
let value = postil["value"] == null ? "" : postil["value"];
|
|
|
|
if(top < 0){
|
|
top = 2;
|
|
}
|
|
|
|
let size = _this.getArrowCanvasSize(left, top, toX, toY);
|
|
|
|
let html = '<div id="luckysheet-postil-show_'+ r +'_'+ c +'" class="luckysheet-postil-show">' +
|
|
'<canvas class="arrowCanvas" width="'+ size[2] +'" height="'+ size[3] +'" style="position:absolute;left:'+ size[0] +'px;top:'+ size[1] +'px;z-index:100;pointer-events:none;"></canvas>' +
|
|
'<div class="luckysheet-postil-show-main" style="width:'+ width +'px;height:'+ height +'px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:'+ left +'px;top:'+ top +'px;box-sizing:border-box;z-index:100;">' +
|
|
'<div class="luckysheet-postil-dialog-move">' +
|
|
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-t" data-type="t"></div>' +
|
|
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-r" data-type="r"></div>' +
|
|
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-b" data-type="b"></div>' +
|
|
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-l" data-type="l"></div>' +
|
|
'</div>' +
|
|
'<div class="luckysheet-postil-dialog-resize" style="display:none;">' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-lt" data-type="lt"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-mt" data-type="mt"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-lm" data-type="lm"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-rm" data-type="rm"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-rt" data-type="rt"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-lb" data-type="lb"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-mb" data-type="mb"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-rb" data-type="rb"></div>' +
|
|
'</div>' +
|
|
'<div style="width:100%;height:100%;overflow:hidden;">' +
|
|
'<div class="formulaInputFocus" style="width:'+ (width - 12) +'px;height:'+ (height - 12) +'px;line-height:20px;box-sizing:border-box;text-align: center;;word-break:break-all;" spellcheck="false" contenteditable="true">' +
|
|
value +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
$(html).appendTo($("#luckysheet-cell-main #luckysheet-postil-showBoxs"));
|
|
|
|
let ctx = $("#luckysheet-postil-show_"+ r +"_"+ c +" .arrowCanvas").get(0).getContext("2d");
|
|
|
|
_this.drawArrow(ctx, size[4], size[5], size[6], size[7]);
|
|
}
|
|
},
|
|
newPs: function(r, c){
|
|
let _this = this;
|
|
|
|
let row = Store.visibledatarow[r],
|
|
row_pre = r - 1 == -1 ? 0 : Store.visibledatarow[r - 1];
|
|
let col = Store.visibledatacolumn[c],
|
|
col_pre = c - 1 == -1 ? 0 : Store.visibledatacolumn[c - 1];
|
|
|
|
let margeset = menuButton.mergeborer(Store.flowdata, r, c);
|
|
if(!!margeset){
|
|
row = margeset.row[1];
|
|
row_pre = margeset.row[0];
|
|
|
|
col = margeset.column[1];
|
|
col_pre = margeset.column[0];
|
|
}
|
|
|
|
let toX = col;
|
|
let toY = row_pre;
|
|
|
|
let fromX = toX + 18;
|
|
let fromY = toY - 18;
|
|
|
|
if(fromY < 0){
|
|
fromY = 2;
|
|
}
|
|
|
|
let size = _this.getArrowCanvasSize(fromX, fromY, toX, toY);
|
|
|
|
let html = '<div id="luckysheet-postil-show_'+ r +'_'+ c +'" class="luckysheet-postil-show luckysheet-postil-show-active">' +
|
|
'<canvas class="arrowCanvas" width="'+ size[2] +'" height="'+ size[3] +'" style="position:absolute;left:'+ size[0] +'px;top:'+ size[1] +'px;z-index:100;pointer-events:none;"></canvas>' +
|
|
'<div class="luckysheet-postil-show-main" style="width:144px;height:84px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:'+ fromX +'px;top:'+ fromY +'px;box-sizing:border-box;z-index:100;">' +
|
|
'<div class="luckysheet-postil-dialog-move">' +
|
|
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-t" data-type="t"></div>' +
|
|
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-r" data-type="r"></div>' +
|
|
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-b" data-type="b"></div>' +
|
|
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-l" data-type="l"></div>' +
|
|
'</div>' +
|
|
'<div class="luckysheet-postil-dialog-resize">' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-lt" data-type="lt"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-mt" data-type="mt"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-lm" data-type="lm"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-rm" data-type="rm"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-rt" data-type="rt"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-lb" data-type="lb"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-mb" data-type="mb"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-rb" data-type="rb"></div>' +
|
|
'</div>' +
|
|
'<div style="width:100%;height:100%;overflow:hidden;">' +
|
|
'<div class="formulaInputFocus" style="width:132px;height:72px;line-height:20px;box-sizing:border-box;text-align: center;;word-break:break-all;" spellcheck="false" contenteditable="true">' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
$(html).appendTo($("#luckysheet-cell-main #luckysheet-postil-showBoxs"));
|
|
|
|
let ctx = $("#luckysheet-postil-show_"+ r +"_"+ c +" .arrowCanvas").get(0).getContext("2d");
|
|
|
|
_this.drawArrow(ctx, size[4], size[5], size[6], size[7]);
|
|
|
|
$("#luckysheet-postil-show_"+ r +"_"+ c +" .formulaInputFocus").focus();
|
|
|
|
_this.init();
|
|
|
|
let d = editor.deepCopyFlowData(Store.flowdata);
|
|
let rc = [];
|
|
|
|
if(d[r][c] == null){
|
|
d[r][c] = {};
|
|
}
|
|
|
|
d[r][c].ps = { "left": null, "top": null, "width": null, "height": null, "value": "", "isshow": false };
|
|
rc.push(r + "_" + c);
|
|
|
|
_this.ref(d, rc);
|
|
},
|
|
editPs: function(r, c){
|
|
let _this = this;
|
|
|
|
if($("#luckysheet-postil-show_"+ r +"_"+ c).length > 0){
|
|
$("#luckysheet-postil-show_"+ r +"_"+ c).show();
|
|
$("#luckysheet-postil-show_"+ r +"_"+ c).addClass("luckysheet-postil-show-active");
|
|
$("#luckysheet-postil-show_"+ r +"_"+ c).find(".luckysheet-postil-dialog-resize").show();
|
|
}
|
|
else{
|
|
let postil = Store.flowdata[r][c].ps;
|
|
|
|
let row = Store.visibledatarow[r],
|
|
row_pre = r - 1 == -1 ? 0 : Store.visibledatarow[r - 1];
|
|
let col = Store.visibledatacolumn[c],
|
|
col_pre = c - 1 == -1 ? 0 : Store.visibledatacolumn[c - 1];
|
|
|
|
let margeset = menuButton.mergeborer(Store.flowdata, r, c);
|
|
if(!!margeset){
|
|
row = margeset.row[1];
|
|
row_pre = margeset.row[0];
|
|
|
|
col = margeset.column[1];
|
|
col_pre = margeset.column[0];
|
|
}
|
|
|
|
let toX = col;
|
|
let toY = row_pre;
|
|
|
|
let left = postil["left"] == null ? toX + 18 : postil["left"];
|
|
let top = postil["top"] == null ? toY - 18 : postil["top"];
|
|
let width = postil["width"] == null ? _this.defaultWidth : postil["width"];
|
|
let height = postil["height"] == null ? _this.defaultHeight : postil["height"];
|
|
let value = postil["value"] == null ? "" : postil["value"];
|
|
|
|
if(top < 0){
|
|
top = 2;
|
|
}
|
|
|
|
let size = _this.getArrowCanvasSize(left, top, toX, toY);
|
|
|
|
let html = '<div id="luckysheet-postil-show_'+ r +'_'+ c +'" class="luckysheet-postil-show luckysheet-postil-show-active">' +
|
|
'<canvas class="arrowCanvas" width="'+ size[2] +'" height="'+ size[3] +'" style="position:absolute;left:'+ size[0] +'px;top:'+ size[1] +'px;z-index:100;pointer-events:none;"></canvas>' +
|
|
'<div class="luckysheet-postil-show-main" style="width:'+ width +'px;height:'+ height +'px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:'+ left +'px;top:'+ top +'px;box-sizing:border-box;z-index:100;">' +
|
|
'<div class="luckysheet-postil-dialog-move">' +
|
|
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-t" data-type="t"></div>' +
|
|
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-r" data-type="r"></div>' +
|
|
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-b" data-type="b"></div>' +
|
|
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-l" data-type="l"></div>' +
|
|
'</div>' +
|
|
'<div class="luckysheet-postil-dialog-resize">' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-lt" data-type="lt"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-mt" data-type="mt"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-lm" data-type="lm"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-rm" data-type="rm"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-rt" data-type="rt"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-lb" data-type="lb"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-mb" data-type="mb"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-rb" data-type="rb"></div>' +
|
|
'</div>' +
|
|
'<div style="width:100%;height:100%;overflow:hidden;">' +
|
|
'<div class="formulaInputFocus" style="width:'+ (width - 12) +'px;height:'+ (height - 12) +'px;line-height:20px;box-sizing:border-box;text-align: center;;word-break:break-all;" spellcheck="false" contenteditable="true">' +
|
|
value +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
$(html).appendTo($("#luckysheet-cell-main #luckysheet-postil-showBoxs"));
|
|
|
|
let ctx = $("#luckysheet-postil-show_"+ r +"_"+ c +" .arrowCanvas").get(0).getContext("2d");
|
|
|
|
_this.drawArrow(ctx, size[4], size[5], size[6], size[7]);
|
|
}
|
|
|
|
$("#luckysheet-postil-show_"+ r +"_"+ c +" .formulaInputFocus").focus();
|
|
luckysheetRangeLast($("#luckysheet-postil-show_"+ r +"_"+ c +" .formulaInputFocus").get(0));
|
|
|
|
_this.init();
|
|
},
|
|
delPs: function(r, c){
|
|
if($("#luckysheet-postil-show_"+ r +"_"+ c).length > 0){
|
|
$("#luckysheet-postil-show_"+ r +"_"+ c).remove();
|
|
}
|
|
|
|
let d = editor.deepCopyFlowData(Store.flowdata);
|
|
let rc = [];
|
|
|
|
delete d[r][c].ps;
|
|
rc.push(r + "_" + c);
|
|
|
|
this.ref(d, rc);
|
|
},
|
|
showHidePs: function(r, c){
|
|
let _this = this;
|
|
|
|
let postil = Store.flowdata[r][c].ps;
|
|
let isshow = postil["isshow"];
|
|
|
|
let d = editor.deepCopyFlowData(Store.flowdata);
|
|
let rc = [];
|
|
|
|
if(isshow){
|
|
d[r][c].ps.isshow = false;
|
|
|
|
$("#luckysheet-postil-show_"+ r +"_"+ c).remove();
|
|
}
|
|
else{
|
|
d[r][c].ps.isshow = true;
|
|
|
|
let row = Store.visibledatarow[r],
|
|
row_pre = r - 1 == -1 ? 0 : Store.visibledatarow[r - 1];
|
|
let col = Store.visibledatacolumn[c],
|
|
col_pre = c - 1 == -1 ? 0 : Store.visibledatacolumn[c - 1];
|
|
|
|
let margeset = menuButton.mergeborer(Store.flowdata, r, c);
|
|
if(!!margeset){
|
|
row = margeset.row[1];
|
|
row_pre = margeset.row[0];
|
|
|
|
col = margeset.column[1];
|
|
col_pre = margeset.column[0];
|
|
}
|
|
|
|
let toX = col;
|
|
let toY = row_pre;
|
|
|
|
let left = postil["left"] == null ? toX + 18 : postil["left"];
|
|
let top = postil["top"] == null ? toY - 18 : postil["top"];
|
|
let width = postil["width"] == null ? _this.defaultWidth : postil["width"];
|
|
let height = postil["height"] == null ? _this.defaultHeight : postil["height"];
|
|
let value = postil["value"] == null ? "" : postil["value"];
|
|
|
|
if(top < 0){
|
|
top = 2;
|
|
}
|
|
|
|
let size = _this.getArrowCanvasSize(left, top, toX, toY);
|
|
|
|
let html = '<div id="luckysheet-postil-show_'+ r +'_'+ c +'" class="luckysheet-postil-show">' +
|
|
'<canvas class="arrowCanvas" width="'+ size[2] +'" height="'+ size[3] +'" style="position:absolute;left:'+ size[0] +'px;top:'+ size[1] +'px;z-index:100;pointer-events:none;"></canvas>' +
|
|
'<div class="luckysheet-postil-show-main" style="width:'+ width +'px;height:'+ height +'px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:'+ left +'px;top:'+ top +'px;box-sizing:border-box;z-index:100;">' +
|
|
'<div class="luckysheet-postil-dialog-move">' +
|
|
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-t" data-type="t"></div>' +
|
|
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-r" data-type="r"></div>' +
|
|
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-b" data-type="b"></div>' +
|
|
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-l" data-type="l"></div>' +
|
|
'</div>' +
|
|
'<div class="luckysheet-postil-dialog-resize" style="display:none;">' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-lt" data-type="lt"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-mt" data-type="mt"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-lm" data-type="lm"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-rm" data-type="rm"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-rt" data-type="rt"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-lb" data-type="lb"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-mb" data-type="mb"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-rb" data-type="rb"></div>' +
|
|
'</div>' +
|
|
'<div style="width:100%;height:100%;overflow:hidden;">' +
|
|
'<div class="formulaInputFocus" style="width:'+ (width - 12) +'px;height:'+ (height - 12) +'px;line-height:20px;box-sizing:border-box;text-align: center;;word-break:break-all;" spellcheck="false" contenteditable="true">' +
|
|
value +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
$(html).appendTo($("#luckysheet-cell-main #luckysheet-postil-showBoxs"));
|
|
|
|
let ctx = $("#luckysheet-postil-show_"+ r +"_"+ c +" .arrowCanvas").get(0).getContext("2d");
|
|
|
|
_this.drawArrow(ctx, size[4], size[5], size[6], size[7]);
|
|
|
|
_this.init();
|
|
}
|
|
|
|
rc.push(r + "_" + c);
|
|
|
|
_this.ref(d, rc);
|
|
},
|
|
showHideAllPs: function(){
|
|
let _this = this;
|
|
|
|
let d = editor.deepCopyFlowData(Store.flowdata);
|
|
|
|
let isAllShow = true;
|
|
let allPs = [];
|
|
|
|
for(let r = 0; r < d.length; r++){
|
|
for(let c = 0; c < d[0].length; c++){
|
|
if(d[r] != null && d[r][c] != null && d[r][c].ps != null){
|
|
allPs.push(r + "_" + c);
|
|
|
|
if(!d[r][c].ps.isshow){
|
|
isAllShow = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
let rc = [];
|
|
if(allPs.length > 0){
|
|
if(isAllShow){ //全部显示，操作为隐藏所有批注
|
|
$("#luckysheet-cell-main #luckysheet-postil-showBoxs").empty();
|
|
|
|
for(let i = 0; i < allPs.length; i++){
|
|
let rowIndex = allPs[i].split("_")[0];
|
|
let colIndex = allPs[i].split("_")[1];
|
|
|
|
let postil = d[rowIndex][colIndex].ps;
|
|
|
|
if(postil["isshow"]){
|
|
d[rowIndex][colIndex].ps.isshow = false;
|
|
rc.push(allPs[i]);
|
|
}
|
|
}
|
|
}
|
|
else{ //部分显示或全部隐藏，操作位显示所有批注
|
|
for(let i = 0; i < allPs.length; i++){
|
|
let rowIndex = allPs[i].split("_")[0];
|
|
let colIndex = allPs[i].split("_")[1];
|
|
|
|
let postil = d[rowIndex][colIndex].ps;
|
|
|
|
if(!postil["isshow"]){
|
|
let row = Store.visibledatarow[rowIndex],
|
|
row_pre = rowIndex - 1 == -1 ? 0 : Store.visibledatarow[rowIndex - 1];
|
|
let col = Store.visibledatacolumn[colIndex],
|
|
col_pre = colIndex - 1 == -1 ? 0 : Store.visibledatacolumn[colIndex - 1];
|
|
|
|
let margeset = menuButton.mergeborer(Store.flowdata, rowIndex, colIndex);
|
|
if(!!margeset){
|
|
row = margeset.row[1];
|
|
row_pre = margeset.row[0];
|
|
|
|
col = margeset.column[1];
|
|
col_pre = margeset.column[0];
|
|
}
|
|
|
|
let toX = col;
|
|
let toY = row_pre;
|
|
|
|
let left = postil["left"] == null ? toX + 18 : postil["left"];
|
|
let top = postil["top"] == null ? toY - 18 : postil["top"];
|
|
let width = postil["width"] == null ? _this.defaultWidth : postil["width"];
|
|
let height = postil["height"] == null ? _this.defaultHeight : postil["height"];
|
|
let value = postil["value"] == null ? "" : postil["value"];
|
|
|
|
if(top < 0){
|
|
top = 2;
|
|
}
|
|
|
|
let size = _this.getArrowCanvasSize(left, top, toX, toY);
|
|
|
|
let html = '<div id="luckysheet-postil-show_'+ rowIndex +'_'+ colIndex +'" class="luckysheet-postil-show">' +
|
|
'<canvas class="arrowCanvas" width="'+ size[2] +'" height="'+ size[3] +'" style="position:absolute;left:'+ size[0] +'px;top:'+ size[1] +'px;z-index:100;pointer-events:none;"></canvas>' +
|
|
'<div class="luckysheet-postil-show-main" style="width:'+ width +'px;height:'+ height +'px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:'+ left +'px;top:'+ top +'px;box-sizing:border-box;z-index:100;">' +
|
|
'<div class="luckysheet-postil-dialog-move">' +
|
|
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-t" data-type="t"></div>' +
|
|
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-r" data-type="r"></div>' +
|
|
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-b" data-type="b"></div>' +
|
|
'<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-l" data-type="l"></div>' +
|
|
'</div>' +
|
|
'<div class="luckysheet-postil-dialog-resize" style="display:none;">' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-lt" data-type="lt"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-mt" data-type="mt"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-lm" data-type="lm"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-rm" data-type="rm"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-rt" data-type="rt"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-lb" data-type="lb"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-mb" data-type="mb"></div>' +
|
|
'<div class="luckysheet-postil-dialog-resize-item luckysheet-postil-dialog-resize-item-rb" data-type="rb"></div>' +
|
|
'</div>' +
|
|
'<div style="width:100%;height:100%;overflow:hidden;">' +
|
|
'<div class="formulaInputFocus" style="width:'+ (width - 12) +'px;height:'+ (height - 12) +'px;line-height:20px;box-sizing:border-box;text-align: center;;word-break:break-all;" spellcheck="false" contenteditable="true">' +
|
|
value +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
$(html).appendTo($("#luckysheet-cell-main #luckysheet-postil-showBoxs"));
|
|
|
|
let ctx = $("#luckysheet-postil-show_"+ rowIndex +"_"+ colIndex +" .arrowCanvas").get(0).getContext("2d");
|
|
|
|
_this.drawArrow(ctx, size[4], size[5], size[6], size[7]);
|
|
|
|
d[rowIndex][colIndex].ps.isshow = true;
|
|
rc.push(allPs[i]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
_this.ref(d, rc);
|
|
_this.init();
|
|
},
|
|
removeActivePs: function(){
|
|
if($("#luckysheet-postil-showBoxs .luckysheet-postil-show-active").length > 0){
|
|
let id = $("#luckysheet-postil-showBoxs .luckysheet-postil-show-active").attr("id");
|
|
|
|
$("#" + id).removeClass("luckysheet-postil-show-active");
|
|
$("#" + id).find(".luckysheet-postil-dialog-resize").hide();
|
|
$("#" + id).find(".arrowCanvas").css("z-index", 100);
|
|
$("#" + id).find(".luckysheet-postil-show-main").css("z-index", 100);
|
|
|
|
let r = id.split("luckysheet-postil-show_")[1].split("_")[0];
|
|
let c = id.split("luckysheet-postil-show_")[1].split("_")[1];
|
|
|
|
let value = $("#" + id).find(".formulaInputFocus").text();
|
|
|
|
let d = editor.deepCopyFlowData(Store.flowdata);
|
|
let rc = [];
|
|
|
|
d[r][c].ps.value = value;
|
|
rc.push(r + "_" + c);
|
|
|
|
this.ref(d, rc);
|
|
|
|
if(!d[r][c].ps.isshow){
|
|
$("#" + id).remove();
|
|
}
|
|
}
|
|
},
|
|
ref: function(data, rc){
|
|
if (Store.clearjfundo) {
|
|
Store.jfundo = [];
|
|
|
|
Store.jfredo.push({
|
|
"type": "postil",
|
|
"data": Store.flowdata,
|
|
"curdata": data,
|
|
"sheetIndex": Store.currentSheetIndex,
|
|
"rc": rc
|
|
});
|
|
}
|
|
|
|
//flowdata
|
|
Store.flowdata = data;
|
|
editor.webWorkerFlowDataCache(Store.flowdata);//worker存数据
|
|
|
|
Store.luckysheetfile[getSheetIndex(Store.currentSheetIndex)].data = Store.flowdata;
|
|
// formula.execFunctionGroupData = Store.flowdata;
|
|
|
|
//共享编辑模式
|
|
if(server.allowUpdate){
|
|
for(let i = 0; i < rc.length; i++){
|
|
let r = rc[i].split("_")[0];
|
|
let c = rc[i].split("_")[1];
|
|
|
|
server.saveParam("v", Store.currentSheetIndex, Store.flowdata[r][c], { "r": r, "c": c });
|
|
}
|
|
}
|
|
|
|
//刷新表格
|
|
setTimeout(function () {
|
|
luckysheetrefreshgrid();
|
|
}, 1);
|
|
},
|
|
positionSync: function(){
|
|
let _this = this;
|
|
|
|
$("#luckysheet-postil-showBoxs .luckysheet-postil-show").each(function(i, e){
|
|
let id = $(e).attr("id");
|
|
|
|
let r = id.split("luckysheet-postil-show_")[1].split("_")[0];
|
|
let c = id.split("luckysheet-postil-show_")[1].split("_")[1];
|
|
|
|
let cell = Store.flowdata[r][c];
|
|
|
|
if(cell != null && cell.ps != null){
|
|
_this.buildPs(r, c, cell.ps);
|
|
}
|
|
else{
|
|
$("#" + id).hide();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
export default luckysheetPostil;
|