liuyang
5 years ago
9 changed files with 520 additions and 233 deletions
@ -1,19 +1,151 @@ |
|||
import Store from '../store'; |
|||
import locale from '../locale/locale'; |
|||
import { replaceHtml } from '../utils/util'; |
|||
import rhchInit from '../global/rhchInit'; |
|||
import luckysheetConfigsetting from './luckysheetConfigsetting'; |
|||
import {changeSheetContainerSize} from './resize'; |
|||
import { jfrefreshgrid_rhcw } from '../global/refresh'; |
|||
|
|||
|
|||
export function zoomChange(ratio){ |
|||
if(Store.flowdata==null || Store.flowdata.length==0){ |
|||
return; |
|||
} |
|||
|
|||
Store.zoomRatio = ratio; |
|||
|
|||
jfrefreshgrid_rhcw(Store.flowdata.length, Store.flowdata[0].length); |
|||
|
|||
changeSheetContainerSize(); |
|||
} |
|||
|
|||
|
|||
export function zoomInitial(){ |
|||
//zoom
|
|||
Store.rowHeaderWidth = luckysheetConfigsetting.rowHeaderWidth * Store.zoomRatio; |
|||
Store.columeHeaderHeight = luckysheetConfigsetting.columeHeaderHeight *Store.zoomRatio; |
|||
$("#luckysheet-rows-h").width((Store.rowHeaderWidth-1.5)); |
|||
$("#luckysheet-cols-h-c").height((Store.columeHeaderHeight-1.5)); |
|||
$("#luckysheet-left-top").css({width:Store.rowHeaderWidth-1.5, height:Store.columeHeaderHeight-1.5}); |
|||
|
|||
$("#luckysheet-zoom-minus").click(function(){ |
|||
let currentRatio; |
|||
if(Store.zoomRatio==null){ |
|||
currentRatio = Store.zoomRatio = 1; |
|||
} |
|||
else{ |
|||
currentRatio = Math.ceil(Store.zoomRatio*10)/10; |
|||
} |
|||
|
|||
currentRatio = currentRatio-0.1; |
|||
|
|||
if(currentRatio<=0.1){ |
|||
currentRatio = 0.1; |
|||
} |
|||
|
|||
Store.zoomRatio = currentRatio; |
|||
zoomChange(currentRatio); |
|||
zoomNumberDomBind(currentRatio); |
|||
}); |
|||
|
|||
$("#luckysheet-zoom-plus").click(function(){ |
|||
let currentRatio; |
|||
if(Store.zoomRatio==null){ |
|||
currentRatio = Store.zoomRatio = 1; |
|||
} |
|||
else{ |
|||
currentRatio = Math.floor(Store.zoomRatio*10)/10; |
|||
} |
|||
|
|||
currentRatio = currentRatio+0.1; |
|||
|
|||
if(currentRatio>=4){ |
|||
currentRatio = 4; |
|||
} |
|||
|
|||
Store.zoomRatio = currentRatio; |
|||
zoomChange(currentRatio); |
|||
zoomNumberDomBind(currentRatio); |
|||
}); |
|||
|
|||
$("#luckysheet-zoom-slider").click(function(e){ |
|||
let xoffset = $(this).offset().left, pageX = e.pageX; |
|||
|
|||
let currentRatio = positionToRatio(pageX-xoffset); |
|||
Store.zoomRatio = currentRatio; |
|||
zoomChange(currentRatio); |
|||
zoomNumberDomBind(currentRatio); |
|||
}); |
|||
|
|||
$("#luckysheet-zoom-cursor").mousedown(function(e){ |
|||
let curentX = e.pageX,cursorLeft = parseFloat($("#luckysheet-zoom-cursor").css("left")); |
|||
$(document).off("mousemove.zoomCursor").on("mousemove.zoomCursor",function(event){ |
|||
let moveX = event.pageX; |
|||
let offsetX = moveX - curentX; |
|||
// console.log(moveX, curentX, offsetX);
|
|||
// curentX = moveX;
|
|||
// let left = parseFloat($("#luckysheet-zoom-cursor").css("left"));
|
|||
let pos = cursorLeft + offsetX; |
|||
let currentRatio = positionToRatio(pos); |
|||
|
|||
if(currentRatio>4){ |
|||
currentRatio =4; |
|||
pos = 100; |
|||
} |
|||
|
|||
if(currentRatio<0.1){ |
|||
currentRatio =0.1; |
|||
pos = 0; |
|||
} |
|||
|
|||
Store.zoomRatio = currentRatio; |
|||
zoomChange(currentRatio); |
|||
let r = Math.round(currentRatio*100) + "%"; |
|||
$("#luckysheet-zoom-ratioText").html(r); |
|||
$("#luckysheet-zoom-cursor").css("left", pos-4); |
|||
}); |
|||
|
|||
$(document).off("mouseup.zoomCursor").on("mouseup.zoomCursor",function(event){ |
|||
$(document).off(".zoomCursor"); |
|||
}); |
|||
|
|||
e.stopPropagation(); |
|||
}).click(function(e){ |
|||
e.stopPropagation(); |
|||
}); |
|||
|
|||
$("#luckysheet-zoom-ratioText").click(function(){ |
|||
Store.zoomRatio = 1; |
|||
zoomChange(1); |
|||
zoomNumberDomBind(1); |
|||
}); |
|||
|
|||
zoomNumberDomBind(Store.zoomRatio); |
|||
} |
|||
|
|||
export function zoomChange(){ |
|||
|
|||
} |
|||
function zoomSlierDown(){ |
|||
|
|||
} |
|||
|
|||
function positionToRatio(pos){ |
|||
let ratio = 1; |
|||
if(pos<50){ |
|||
ratio = Math.round((pos*1.8/100 + 0.1)*100)/100; |
|||
} |
|||
else if(pos>50){ |
|||
ratio = Math.round(((pos-50)*6/100 + 1)*100)/100; |
|||
} |
|||
|
|||
return ratio; |
|||
} |
|||
|
|||
function zoomSlierDomBind(ratio){ |
|||
let domPos = 50; |
|||
if(ratio<1){ |
|||
domPos = Math.round((ratio - 0.1)*100 / 0.18)/10; |
|||
} |
|||
else if(ratio>1){ |
|||
domPos = Math.round((ratio - 1)*100 / 0.6)/10+50; |
|||
} |
|||
$("#luckysheet-zoom-cursor").css("left", domPos-4); |
|||
} |
|||
|
|||
function zoomNumberDomBind(ratio){ |
|||
let r = Math.round(ratio*100) + "%"; |
|||
$("#luckysheet-zoom-ratioText").html(r); |
|||
zoomSlierDomBind(ratio); |
|||
} |
|||
|
|||
|
|||
@ -0,0 +1,113 @@ |
|||
.luckysheet-zoom-content{ |
|||
position: absolute; |
|||
width:210px; |
|||
right: 0px; |
|||
height: 22px; |
|||
line-height: 22px; |
|||
text-align: right; |
|||
padding-right: 10px; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
display: flex; |
|||
align-items: center; |
|||
user-select: none; |
|||
} |
|||
|
|||
.luckysheet-zoom-content .luckysheet-zoom-minus{ |
|||
position: absolute; |
|||
left: 0px; |
|||
width: 20px; |
|||
height:20px; |
|||
cursor: pointer; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.luckysheet-zoom-content .luckysheet-zoom-minus-icon{ |
|||
background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTRweCIgaGVpZ2h0PSIycHgiIHZpZXdCb3g9IjAgMCAxNCAyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MyAoOTI0NDUpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPnJpcWlxdWppYW7lpIfku70gNDU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iMjAyMC8wOC8xNCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IueUu+adv+Wkh+S7vS0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTcwNC4wMDAwMDAsIC0xMDY0LjAwMDAwMCkiIGZpbGw9IiM0NDRENUEiPgogICAgICAgICAgICA8ZyBpZD0icmlxaXF1amlhbuWkh+S7vS0xMjYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2OTkuMDAwMDAwLCAxMDUzLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9Iue8lue7hCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNS4wMDAwMDAsIDExLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIHg9IjAiIHk9IjAiIHdpZHRoPSIxNCIgaGVpZ2h0PSIyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=='); |
|||
width: 14px; |
|||
height: 2px; |
|||
} |
|||
|
|||
.luckysheet-zoom-content .luckysheet-zoom-minus:hover{ |
|||
background-color: #E1E4E8; |
|||
} |
|||
|
|||
.luckysheet-zoom-content .luckysheet-zoom-slider{ |
|||
position: absolute; |
|||
left: 25px; |
|||
width: 100px; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
|
|||
.luckysheet-zoom-content .luckysheet-zoom-slider .luckysheet-zoom-line{ |
|||
position: absolute; |
|||
width: 100px; |
|||
height: 2px; |
|||
background: #E1E4E8; |
|||
} |
|||
|
|||
.luckysheet-zoom-content .luckysheet-zoom-slider .luckysheet-zoom-cursor{ |
|||
position: absolute; |
|||
width: 8px; |
|||
height: 8px; |
|||
border-radius: 8px; |
|||
background: #B5BDB8; |
|||
cursor: pointer; |
|||
z-index: 2; |
|||
transition: all 0.3s; |
|||
} |
|||
|
|||
.luckysheet-zoom-content .luckysheet-zoom-slider .luckysheet-zoom-cursor:hover{ |
|||
transform: scale(1.2); |
|||
transform-origin: center center; |
|||
background: rgb(160, 160, 160); |
|||
} |
|||
|
|||
.luckysheet-zoom-content .luckysheet-zoom-slider .luckysheet-zoom-hundred{ |
|||
position: absolute; |
|||
width: 2px; |
|||
height: 4px; |
|||
left: 49px; |
|||
background: #1E1E1F; |
|||
} |
|||
|
|||
|
|||
.luckysheet-zoom-content .luckysheet-zoom-plus{ |
|||
position: absolute; |
|||
left: 130px; |
|||
width: 20px; |
|||
height:20px; |
|||
cursor: pointer; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.luckysheet-zoom-content .luckysheet-zoom-plus .luckysheet-zoom-plus-icon{ |
|||
background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTRweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTQgMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDYzICg5MjQ0NSkgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+cmlxaXF1amlhbuWkh+S7vSA0NjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSIyMDIwLzA4LzE0IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i55S75p2/5aSH5Lu9LTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xODQ4LjAwMDAwMCwgLTEwNTguMDAwMDAwKSIgZmlsbD0iIzQ0NEQ1QSI+CiAgICAgICAgICAgIDxnIGlkPSJyaXFpcXVqaWFu5aSH5Lu9LTExOSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTg0My4wMDAwMDAsIDEwNTMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uEIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1LjAwMDAwMCwgNS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0i55+p5b2iIiB4PSIwIiB5PSI2IiB3aWR0aD0iMTQiIGhlaWdodD0iMiI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaLlpIfku70iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcuMDAwMDAwLCA3LjAwMDAwMCkgcm90YXRlKC0yNzAuMDAwMDAwKSB0cmFuc2xhdGUoLTcuMDAwMDAwLCAtNy4wMDAwMDApICIgeD0iMCIgeT0iNiIgd2lkdGg9IjE0IiBoZWlnaHQ9IjIiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+'); |
|||
width: 14px; |
|||
height: 14px; |
|||
} |
|||
|
|||
.luckysheet-zoom-content .luckysheet-zoom-plus:hover{ |
|||
background-color: #E1E4E8; |
|||
} |
|||
|
|||
.luckysheet-zoom-content .luckysheet-zoom-ratioText{ |
|||
position: absolute; |
|||
left: 155px; |
|||
width: 60px; |
|||
color: #1E1E1F; |
|||
font-size: 12px; |
|||
text-align: left; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.luckysheet-zoom-content .luckysheet-zoom-ratioText:hover{ |
|||
background-color: #E1E4E8; |
|||
} |
|||
Loading…
Reference in new issue