@ -1,12 +1,16 @@
import {
rowLocation ,
colLocation ,
mouseposition
} from '../global/location ' ;
import { mouseposition } from '../global/location' ;
import server from './server' ;
import luckysheetsizeauto from './resize' ;
import { modelHTML } from './constant' ;
import { getSheetIndex } from '../methods/get ' ;
import { setluckysheet_scroll_status } from '../methods/set' ;
import { replaceHtml } from '../utils/util' ;
import Store from '../store' ;
import locale from '../locale/locale' ;
const imageCtrl = {
imgItem : {
type : '3' , //1移动并调整单元格大小 2移动并且不调整单元格的大小 3不要移动单元格并调整其大小
src : '' , //图片url
originWidth : null , //图片原始宽度
originHeight : null , //图片原始高度
@ -21,16 +25,51 @@ const imageCtrl = {
height : null , //图片裁剪后 高度
offsetLeft : 0 , //图片裁剪后离未裁剪时 左边的位移
offsetTop : 0 , //图片裁剪后离未裁剪时 顶部的位移
} ,
isFixedPos : false , //固定位置
fixedLeft : null , //固定位置 左位移
fixedTop : null , //固定位置 右位移
border : {
width : 0 , //边框宽度
radius : 0 , //边框半径
style : 'solid' , //边框类型
color : '#000' , //边框颜色
}
} ,
images : null ,
currentImgId : null ,
currentWinW : null ,
currentWinH : null ,
resize : null ,
resize : null ,
resizeXY : null ,
move : false ,
moveXY : null ,
cropChange : null ,
cropChangeXY : null ,
cropChangeObj : null ,
inserImg : function ( src ) {
let rowIndex = Store . luckysheet_select_save [ 0 ] . row_focus || 0 ;
let colIndex = Store . luckysheet_select_save [ 0 ] . column_focus || 0 ;
let left = colIndex == 0 ? 0 : Store . visibledatacolumn [ colIndex - 1 ] ;
let top = rowIndex == 0 ? 0 : Store . visibledatarow [ rowIndex - 1 ] ;
let image = new Image ( ) ;
image . onload = function ( ) {
let width = image . width ,
height = image . height ;
let img = {
src : src ,
left : left ,
top : top ,
originWidth : width ,
originHeight : height
}
imageCtrl . addImgItem ( img ) ;
}
image . src = src ;
} ,
generateRandomId : function ( prefix ) {
if ( prefix == null ) {
prefix = "img" ;
@ -49,22 +88,245 @@ const imageCtrl = {
return prefix + "_" + mid + "_" + time ;
} ,
modelHtml : function ( id , imgItem ) {
let _ this = this ;
let src = imgItem . src ;
let imgItemParam = _ this . getImgItemParam ( imgItem ) ;
let width = imgItem . default . width ,
height = imgItem . default . height ,
left = imgItem . default . left ,
top = imgItem . default . top ;
let width = imgItemParam . width ;
let height = imgItemParam . height ;
let left = imgItemParam . left ;
let top = imgItemParam . top ;
let position = imgItemParam . position ;
return ` <div id=" ${ id } " class="luckysheet-modal-dialog luckysheet-modal-dialog-image" style="width: ${ width } px;height: ${ height } px;padding:0;position:absolute ;left: ${ left } px;top: ${ top } px;z-index:200;">
< div class = "luckysheet-modal-dialog-content" >
< img src = "${src}" style = "width:100%;height:100% ;" / >
return ` <div id=" ${ id } " class="luckysheet-modal-dialog luckysheet-modal-dialog-image" style="width: ${ width } px;height: ${ height } px;padding:0;position: ${ position } ;left: ${ left } px;top: ${ top } px;z-index:200;">
< div class = "luckysheet-modal-dialog-content" style = "width:100%;height:100%;overflow:hidden;position:relative;" >
< img src = "${src}" style = "position:absolute;width:${imgItem.default.width}px;height:${imgItem.default.height}px;left:${-imgItem.crop.offsetLeft}px;top:${-imgItem.crop.offsetTop}px ;" / >
< / d i v >
< div class = "luckysheet-modal-dialog-border" style = "border:${imgItem.border.width}px ${imgItem.border.style} ${imgItem.border.color};border-radius:${imgItem.border.radius}px;position:absolute;left:${-imgItem.border.width}px;right:${-imgItem.border.width}px;top:${-imgItem.border.width}px;bottom:${-imgItem.border.width}px;" > < / d i v >
< / d i v > ` ;
} ,
getSliderHtml : function ( ) {
let imageText = locale ( ) . imageText ;
return ` <div id="luckysheet-modal-dialog-slider-imageCtrl" class="luckysheet-modal-dialog-slider luckysheet-modal-dialog-slider-imageCtrl" style="display:block;">
< div class = "luckysheet-modal-dialog-slider-title" >
< span > $ { imageText . imageSetting } < / s p a n >
< span class = "luckysheet-model-close-btn" title = "${imageText.close}" >
< i class = "fa fa-times" aria - hidden = "true" > < / i >
< / s p a n >
< / d i v >
< div class = "luckysheet-modal-dialog-slider-content" >
< div class = "slider-box" >
< div class = "slider-box-title" > $ { imageText . conventional } < / d i v >
< div class = "slider-box-radios" >
< div class = "radio-item" >
< input type = "radio" id = "imgItemType1" name = "imgItemType" value = "1" >
< label for = "imgItemType1" > $ { imageText . moveCell1 } < / l a b e l >
< / d i v >
< div class = "radio-item" >
< input type = "radio" id = "imgItemType2" name = "imgItemType" value = "2" >
< label for = "imgItemType2" > $ { imageText . moveCell2 } < / l a b e l >
< / d i v >
< div class = "radio-item" >
< input type = "radio" id = "imgItemType3" name = "imgItemType" value = "3" >
< label for = "imgItemType3" > $ { imageText . moveCell3 } < / l a b e l >
< / d i v >
< / d i v >
< div class = "slider-box-checkbox" >
< input type = "checkbox" id = "imgItemIsFixedPos" >
< label for = "imgItemIsFixedPos" > $ { imageText . fixedPos } < / l a b e l >
< / d i v >
< / d i v >
< div class = "slider-box" >
< div class = "slider-box-title" > $ { imageText . border } < / d i v >
< div class = "slider-box-borderConfig" >
< div class = "border-item" >
< label > $ { imageText . width } < / l a b e l >
< input type = "number" id = "imgItemBorderWidth" min = "0" >
< / d i v >
< div class = "border-item" >
< label > $ { imageText . radius } < / l a b e l >
< input type = "number" id = "imgItemBorderRadius" min = "0" >
< / d i v >
< div class = "border-item" >
< label > $ { imageText . style } < / l a b e l >
< select id = "imgItemBorderStyle" >
< option value = "solid" > $ { imageText . solid } < / o p t i o n >
< option value = "dashed" > $ { imageText . dashed } < / o p t i o n >
< option value = "dotted" > $ { imageText . dotted } < / o p t i o n >
< option value = "double" > $ { imageText . double } < / o p t i o n >
< / s e l e c t >
< / d i v >
< div class = "border-item" >
< label > $ { imageText . color } < / l a b e l >
< div id = "imgItemBorderColor" class = "imgItemBorderColor" >
< span > < / s p a n >
< / d i v >
< / d i v >
< / d i v >
< / d i v >
< / d i v >
< / d i v > ` ;
} ,
sliderHtmlShow : function ( ) {
let _ this = this ;
$ ( "#luckysheet-modal-dialog-slider-imageCtrl" ) . remove ( ) ;
let sliderHtml = _ this . getSliderHtml ( ) ;
$ ( "body" ) . append ( sliderHtml ) ;
luckysheetsizeauto ( ) ;
let imgItem = _ this . images [ _ this . currentImgId ] ;
//类型
let type = imgItem . type ;
$ ( "#luckysheet-modal-dialog-slider-imageCtrl #imgItemType" + type ) . prop ( "checked" , true ) ;
//固定位置
let isFixedPos = imgItem . isFixedPos ;
$ ( "#luckysheet-modal-dialog-slider-imageCtrl #imgItemIsFixedPos" ) . prop ( "checked" , isFixedPos ) ;
//边框宽度
let border = imgItem . border ;
$ ( "#luckysheet-modal-dialog-slider-imageCtrl #imgItemBorderWidth" ) . val ( border . width ) ;
$ ( "#luckysheet-modal-dialog-slider-imageCtrl #imgItemBorderRadius" ) . val ( border . radius ) ;
$ ( "#luckysheet-modal-dialog-slider-imageCtrl #imgItemBorderStyle" ) . val ( border . style ) ;
$ ( "#luckysheet-modal-dialog-slider-imageCtrl #imgItemBorderColor span" ) . css ( "background-color" , border . color ) . attr ( "title" , border . color ) ;
_ this . init ( ) ;
} ,
colorSelectDialog : function ( currenColor ) {
const _ locale = locale ( ) ;
const locale_button = _ locale . button ;
const locale_toolbar = _ locale . toolbar ;
$ ( "#luckysheet-modal-dialog-mask" ) . show ( ) ;
$ ( "#luckysheet-imageCtrl-colorSelect-dialog" ) . remove ( ) ;
$ ( "body" ) . append ( replaceHtml ( modelHTML , {
"id" : "luckysheet-imageCtrl-colorSelect-dialog" ,
"addclass" : "luckysheet-imageCtrl-colorSelect-dialog" ,
"title" : "图片边框颜色选择" ,
"content" : ` <div class="currenColor">
当前颜色 ： < span title = "${currenColor}" style = "background-color:${currenColor}" > < / s p a n >
< / d i v >
< div class = "colorshowbox" > < / d i v > ` ,
"botton" : ` <button id="luckysheet-imageCtrl-colorSelect-dialog-confirm" class="btn btn-primary">确定</button>
< button class = "btn btn-default luckysheet-model-close-btn" > 取消 < / b u t t o n > ` ,
"style" : "z-index:100003"
} ) ) ;
let $t = $ ( "#luckysheet-imageCtrl-colorSelect-dialog" )
. find ( ".luckysheet-modal-dialog-content" )
. css ( "min-width" , 300 )
. end ( ) ,
myh = $t . outerHeight ( ) ,
myw = $t . outerWidth ( ) ;
let winw = $ ( window ) . width ( ) , winh = $ ( window ) . height ( ) ;
let scrollLeft = $ ( document ) . scrollLeft ( ) , scrollTop = $ ( document ) . scrollTop ( ) ;
$ ( "#luckysheet-imageCtrl-colorSelect-dialog" ) . css ( {
"left" : ( winw + scrollLeft - myw ) / 2 ,
"top" : ( winh + scrollTop - myh ) / 3
} ) . show ( ) ;
//初始化选择颜色插件
$ ( "#luckysheet-imageCtrl-colorSelect-dialog" ) . find ( ".colorshowbox" ) . spectrum ( {
showPalette : true ,
showPaletteOnly : true ,
preferredFormat : "hex" ,
clickoutFiresChange : false ,
showInitial : true ,
showInput : true ,
flat : true ,
hideAfterPaletteSelect : true ,
showSelectionPalette : true ,
showButtons : false , //隐藏选择取消按钮
maxPaletteSize : 8 ,
maxSelectionSize : 8 ,
color : currenColor ,
cancelText : locale_button . cancel ,
chooseText : locale_toolbar . confirmColor ,
togglePaletteMoreText : locale_toolbar . customColor ,
togglePaletteLessText : locale_toolbar . collapse ,
togglePaletteOnly : true ,
clearText : locale_toolbar . clearText ,
noColorSelectedText : locale_toolbar . noColorSelectedText ,
localStorageKey : "spectrum.textcolor" + server . gridKey ,
palette : [
[ "#000" , "#444" , "#666" , "#999" , "#ccc" , "#eee" , "#f3f3f3" , "#fff" ] ,
[ "#f00" , "#f90" , "#ff0" , "#0f0" , "#0ff" , "#00f" , "#90f" , "#f0f" ] ,
[ "#f4cccc" , "#fce5cd" , "#fff2cc" , "#d9ead3" , "#d0e0e3" , "#cfe2f3" , "#d9d2e9" , "#ead1dc" ] ,
[ "#ea9999" , "#f9cb9c" , "#ffe599" , "#b6d7a8" , "#a2c4c9" , "#9fc5e8" , "#b4a7d6" , "#d5a6bd" ] ,
[ "#e06666" , "#f6b26b" , "#ffd966" , "#93c47d" , "#76a5af" , "#6fa8dc" , "#8e7cc3" , "#c27ba0" ] ,
[ "#c00" , "#e69138" , "#f1c232" , "#6aa84f" , "#45818e" , "#3d85c6" , "#674ea7" , "#a64d79" ] ,
[ "#900" , "#b45f06" , "#bf9000" , "#38761d" , "#134f5c" , "#0b5394" , "#351c75" , "#741b47" ] ,
[ "#600" , "#783f04" , "#7f6000" , "#274e13" , "#0c343d" , "#073763" , "#20124d" , "#4c1130" ]
] ,
move : function ( color ) {
if ( color != null ) {
color = color . toHexString ( ) ;
}
else {
color = "#000" ;
}
$ ( "#luckysheet-imageCtrl-colorSelect-dialog .currenColor span" ) . css ( "background-color" , color ) . attr ( "title" , color ) ;
}
} ) ;
} ,
init : function ( ) {
let _ this = this ;
//关闭
$ ( "#luckysheet-modal-dialog-slider-imageCtrl .luckysheet-model-close-btn" ) . click ( function ( ) {
$ ( "#luckysheet-modal-dialog-slider-imageCtrl" ) . hide ( ) ;
luckysheetsizeauto ( ) ;
} ) ;
//常规
$ ( "#luckysheet-modal-dialog-slider-imageCtrl" ) . off ( "change.radio" ) . on ( "change.radio" , ".radio-item input[type=radio][name=imgItemType]" , function ( ) {
_ this . configChange ( "type" , this . value ) ;
} )
//固定位置
$ ( "#luckysheet-modal-dialog-slider-imageCtrl" ) . off ( "change.checkbox" ) . on ( "change.checkbox" , ".slider-box-checkbox input[type=checkbox]" , function ( ) {
_ this . configChange ( "fixedPos" , this . checked ) ;
} )
//边框宽度
$ ( "#luckysheet-modal-dialog-slider-imageCtrl" ) . off ( "change.borderWidth" ) . on ( "change.borderWidth" , "#imgItemBorderWidth" , function ( ) {
_ this . configChange ( "border-width" , this . valueAsNumber ) ;
} )
//边框半径
$ ( "#luckysheet-modal-dialog-slider-imageCtrl" ) . off ( "change.borderRadius" ) . on ( "change.borderRadius" , "#imgItemBorderRadius" , function ( ) {
_ this . configChange ( "border-radius" , this . valueAsNumber ) ;
} )
//边框样式
$ ( "#luckysheet-modal-dialog-slider-imageCtrl" ) . off ( "change.borderStyle" ) . on ( "change.borderStyle" , "#imgItemBorderStyle" , function ( ) {
_ this . configChange ( "border-radius" , this . value ) ;
} )
//边框颜色 选择
$ ( "#luckysheet-modal-dialog-slider-imageCtrl" ) . off ( "click.color" ) . on ( "click.color" , "#imgItemBorderColor" , function ( ) {
let currenColor = $ ( this ) . find ( "span" ) . attr ( "title" ) ;
_ this . colorSelectDialog ( currenColor ) ;
} )
//边框选择颜色 确定
$ ( document ) . off ( "click.selectColorConfirm" ) . on ( "click.selectColorConfirm" , "#luckysheet-imageCtrl-colorSelect-dialog-confirm" , function ( ) {
let $parent = $ ( this ) . parents ( "#luckysheet-imageCtrl-colorSelect-dialog" ) ;
$ ( "#luckysheet-modal-dialog-mask" ) . hide ( ) ;
$parent . hide ( ) ;
let currenColor = $parent . find ( ".currenColor span" ) . attr ( "title" ) ;
$ ( "#luckysheet-modal-dialog-slider-imageCtrl #imgItemBorderColor span" ) . css ( "background-color" , currenColor ) . attr ( "title" , currenColor ) ;
_ this . configChange ( "border-color" , currenColor ) ;
} ) ;
//image active
$ ( "#luckysheet-image-showBoxs" ) . off ( "mousedown.active" ) . on ( "mousedown.active" , ".luckysheet-modal-dialog-image" , function ( e ) {
$ ( this ) . hide ( ) ;
@ -73,24 +335,20 @@ const imageCtrl = {
_ this . currentImgId = id ;
let item = _ this . images [ id ] ;
let imgItemParam = _ this . getImgItemParam ( item ) ;
let width = item . default . width ,
height = item . default . height ,
left = item . default . left ,
top = item . default . top ;
if ( item . crop . width != width || item . crop . height != height ) {
width = item . crop . width ;
height = item . crop . height ;
left = left + item . crop . offsetLeft ;
top = top + item . crop . offsetTop ;
}
let width = imgItemParam . width ;
let height = imgItemParam . height ;
let left = imgItemParam . left ;
let top = imgItemParam . top ;
let position = imgItemParam . position ;
$ ( "#luckysheet-modal-dialog-activeImage" ) . show ( ) . css ( {
"width" : width ,
"height" : height ,
"left" : left ,
"top" : top
"top" : top ,
"position" : position
} ) ;
$ ( "#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content" ) . css ( {
@ -99,29 +357,38 @@ const imageCtrl = {
"background-position" : - item . crop . offsetLeft + "px " + - item . crop . offsetTop + "px"
} )
$ ( "#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border" ) . css ( {
"border-width" : item . border . width ,
"border-style" : item . border . style ,
"border-color" : item . border . color ,
"border-radius" : item . border . radius ,
"left" : - item . border . width ,
"right" : - item . border . width ,
"top" : - item . border . width ,
"bottom" : - item . border . width ,
} )
_ this . sliderHtmlShow ( ) ;
e . stopPropagation ( ) ;
} )
//image move
$ ( "#luckysheet-modal-dialog-activeImage" ) . off ( "mousedown.move" ) . on ( "mousedown.move" , ".luckysheet-modal-dialog-content" , function ( e ) {
if ( ! $ ( "#luckysheet-modal-dialog-slider-imageCtrl" ) . is ( ":visible" ) ) {
_ this . sliderHtmlShow ( ) ;
}
_ this . move = true ;
_ this . currentWinW = $ ( "#luckysheet-cell-main" ) [ 0 ] . scrollWidth ;
_ this . currentWinH = $ ( "#luckysheet-cell-main" ) [ 0 ] . scrollHeight ;
let scrollTop = $ ( "#luckysheet-cell-main" ) . scrollTop ( ) ,
scrollLeft = $ ( "#luckysheet-cell-main" ) . scrollLeft ( ) ;
let offset = $ ( "#luckysheet-modal-dialog-activeImage" ) . offset ( ) ;
let position = $ ( "#luckysheet-modal-dialog-activeImage" ) . position ( ) ;
_ this . moveXY = [
e . pageX - offset . left ,
e . pageY - offset . top ,
position . left ,
position . top ,
scrollLeft ,
scrollTop
] ;
setluckysheet_scroll_status ( true ) ;
@ -162,54 +429,168 @@ const imageCtrl = {
e . stopPropagation ( ) ;
} )
//image crop
$ ( "#luckysheet-modal-dialog-activeImage" ) . off ( "mousedown.crop" ) . on ( "mousedown.crop" , ".luckysheet-modal-controll-crop" , function ( e ) {
$ ( "#luckysheet-modal-dialog-activeImage" ) . hide ( ) ;
//image croppingEnter
$ ( "#luckysheet-modal-dialog-activeImage" ) . off ( "mousedown.croppingEnter" ) . on ( "mousedown.croppingEnter" , ".luckysheet-modal-controll-crop" , function ( e ) {
_ this . croppingEnter ( ) ;
e . stopPropagation ( ) ;
} )
let item = _ this . images [ _ this . currentImgId ] ;
//image croppingExit
$ ( "#luckysheet-modal-dialog-cropping" ) . off ( "mousedown.croppingExit" ) . on ( "mousedown.croppingExit" , ".luckysheet-modal-controll-crop" , function ( e ) {
_ this . croppingExit ( ) ;
e . stopPropagation ( ) ;
} )
let width = item . default . width ,
height = item . default . height ,
left = item . default . left ,
top = item . default . top ;
//image crop change
$ ( "#luckysheet-modal-dialog-cropping" ) . off ( "mousedown.cropChange" ) . on ( "mousedown.cropChange" , ".resize-item" , function ( e ) {
_ this . cropChange = $ ( this ) . data ( "type" ) ;
if ( item . crop . width != width || item . crop . height != height ) {
width = item . crop . width ;
height = item . crop . height ;
left = left + item . crop . offsetLeft ;
top = top + item . crop . offsetTop ;
}
$ ( "#luckysheet-modal-dialog-cropping" ) . show ( ) . css ( {
"width" : width ,
"height" : height ,
"left" : left ,
"top" : top
} ) ;
$ ( "#luckysheet-modal-dialog-cropping .cropping-mask" ) . css ( {
"width" : item . default . width ,
"height" : item . default . height ,
"background-image" : "url(" + item . src + ")" ,
"left" : - item . crop . offsetLeft ,
"top" : - item . crop . offsetTop
} )
let scrollTop = $ ( "#luckysheet-cell-main" ) . scrollTop ( ) ,
scrollLeft = $ ( "#luckysheet-cell-main" ) . scrollLeft ( ) ;
let mouse = mouseposition ( e . pageX , e . pageY ) ;
let x = mouse [ 0 ] + scrollLeft ;
let y = mouse [ 1 ] + scrollTop ;
$ ( "#luckysheet-modal-dialog-cropping .cropping-content" ) . css ( {
"background-image" : "url(" + item . src + ")" ,
"background-size" : item . default . width + "px " + item . default . height + "px" ,
"background-position" : - item . crop . offsetLeft + "px " + - item . crop . offsetTop + "px"
} )
_ this . cropChangeXY = [
x ,
y
] ;
setluckysheet_scroll_status ( true ) ;
e . stopPropagation ( ) ;
} )
//image delete
$ ( "#luckysheet-modal-d ialog-activeI mage" ) . off ( "mousedown.delete" ) . on ( "mousedown.delete" , ".luckysheet-modal-controll-del" , function ( e ) {
$ ( "#luckysheet-image-showBoxs" ) . off ( "mousedown.delete" ) . on ( "mousedown.delete" , ".luckysheet-modal-controll-del" , function ( e ) {
_ this . removeImgItem ( ) ;
e . stopPropagation ( ) ;
} )
} ,
configChange : function ( type , value ) {
let _ this = this ;
let imgItem = _ this . images [ _ this . currentImgId ] ;
switch ( type ) {
case "type" :
imgItem . type = value ;
break ;
case "fixedPos" :
imgItem . isFixedPos = value ;
let imgItemParam = _ this . getImgItemParam ( imgItem ) ;
let width = imgItemParam . width ;
let height = imgItemParam . height ;
let left = imgItemParam . left ;
let top = imgItemParam . top ;
let position = imgItemParam . position ;
$ ( "#luckysheet-modal-dialog-activeImage" ) . show ( ) . css ( {
"width" : width ,
"height" : height ,
"left" : left ,
"top" : top ,
"position" : position
} ) ;
break ;
case "border-width" :
imgItem . border . width = value ;
$ ( "#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border" ) . css ( {
"border-width" : value ,
"left" : - value ,
"right" : - value ,
"top" : - value ,
"bottom" : - value
} ) ;
break ;
case "border-radius" :
imgItem . border . radius = value ;
$ ( "#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border" ) . css ( "border-radius" , value ) ;
break ;
case "border-style" :
imgItem . border . style = value ;
$ ( "#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border" ) . css ( "border-style" , value ) ;
break ;
case "border-color" :
imgItem . border . color = value ;
$ ( "#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border" ) . css ( "border-color" , value ) ;
break ;
}
_ this . ref ( ) ;
} ,
getImgItemParam ( imgItem ) {
let isFixedPos = imgItem . isFixedPos ;
let width = imgItem . default . width ,
height = imgItem . default . height ,
left = imgItem . default . left ,
top = imgItem . default . top ;
if ( imgItem . crop . width != width || imgItem . crop . height != height ) {
width = imgItem . crop . width ;
height = imgItem . crop . height ;
left += imgItem . crop . offsetLeft ;
top += imgItem . crop . offsetTop ;
}
let position = 'absolute' ;
if ( isFixedPos ) {
position = 'fixed' ;
left = imgItem . fixedLeft + imgItem . crop . offsetLeft ;
top = imgItem . fixedTop + imgItem . crop . offsetTop ;
}
return {
width : width ,
height : height ,
left : left ,
top : top ,
position : position
}
} ,
cancelActiveImgItem : function ( ) {
let _ this = this ;
$ ( "#luckysheet-modal-dialog-activeImage" ) . hide ( ) ;
$ ( "#luckysheet-modal-dialog-cropping" ) . hide ( ) ;
$ ( "#luckysheet-modal-dialog-slider-imageCtrl" ) . hide ( ) ;
let imgItem = _ this . images [ _ this . currentImgId ] ;
let imgItemParam = _ this . getImgItemParam ( imgItem ) ;
let width = imgItemParam . width ;
let height = imgItemParam . height ;
let left = imgItemParam . left ;
let top = imgItemParam . top ;
let position = imgItemParam . position ;
$ ( "#" + _ this . currentImgId ) . show ( ) . css ( {
"width" : width ,
"height" : height ,
"left" : left ,
"top" : top ,
"position" : position
} ) ;
$ ( "#" + _ this . currentImgId + " img" ) . css ( {
"width" : imgItem . default . width ,
"height" : imgItem . default . height ,
"left" : - imgItem . crop . offsetLeft ,
"top" : - imgItem . crop . offsetTop
} ) ;
$ ( "#" + _ this . currentImgId + " .luckysheet-modal-dialog-border" ) . css ( {
"border-width" : imgItem . border . width ,
"border-style" : imgItem . border . style ,
"border-color" : imgItem . border . color ,
"border-radius" : imgItem . border . radius ,
"left" : - imgItem . border . width ,
"right" : - imgItem . border . width ,
"top" : - imgItem . border . width ,
"bottom" : - imgItem . border . width ,
} )
} ,
addImgItem : function ( img ) {
let _ this = this ;
@ -240,12 +621,19 @@ const imageCtrl = {
imgItem . crop . width = width ;
imgItem . crop . height = height ;
let scrollTop = $ ( "#luckysheet-cell-main" ) . scrollTop ( ) ,
scrollLeft = $ ( "#luckysheet-cell-main" ) . scrollLeft ( ) ;
imgItem . fixedLeft = img . left - scrollLeft + Store . rowHeaderWidth ;
imgItem . fixedTop = img . top - scrollTop + Store . infobarHeight + Store . toolbarHeight + Store . calculatebarHeight + Store . columeHeaderHeight ;
let id = _ this . generateRandomId ( ) ;
let modelHtml = _ this . modelHtml ( id , imgItem ) ;
$ ( "#luckysheet-image-showBoxs" ) . append ( modelHtml ) ;
$ ( "#luckysheet-image-showBoxs .img-list " ) . append ( modelHtml ) ;
_ this . images [ id ] = imgItem ;
_ this . ref ( ) ;
_ this . init ( ) ;
} ,
@ -254,29 +642,229 @@ const imageCtrl = {
_ this . move = false ;
let position = $ ( "#luckysheet-modal-dialog-activeImage" ) . position ( ) ;
_ this . images [ _ this . currentImgId ] . left = position . left ;
_ this . images [ _ this . currentImgId ] . top = position . top ;
let obj = $ ( "#luckysheet-modal-dialog-activeImage" ) [ 0 ] ;
let item = _ this . images [ _ this . currentImgId ] ;
if ( item . isFixedPos ) {
item . fixedLeft = obj . offsetLeft - item . crop . offsetLeft ;
item . fixedTop = obj . offsetTop - item . crop . offsetTop ;
}
else {
item . default . left = obj . offsetLeft - item . crop . offsetLeft ;
item . default . top = obj . offsetTop - item . crop . offsetTop ;
}
_ this . ref ( ) ;
} ,
resizeImgItem : function ( ) {
let _ this = this ;
_ this . resize = null ;
let position = $ ( "#luckysheet-modal-dialog-activeImage" ) . position ( ) ;
let width = $ ( "#luckysheet-modal-dialog-activeImage" ) . outerWidth ( ) ;
let height = $ ( "#luckysheet-modal-dialog-activeImage" ) . outerHeight ( ) ;
let obj = $ ( "#luckysheet-modal-dialog-activeImage" ) [ 0 ] ;
let item = _ this . images [ _ this . currentImgId ] ;
let scaleX = obj . clientWidth / item . crop . width ;
let scaleY = obj . clientHeight / item . crop . height ;
item . default . width = Math . round ( item . default . width * scaleX ) ;
item . default . height = Math . round ( item . default . height * scaleY ) ;
item . crop . width = Math . round ( item . crop . width * scaleX ) ;
item . crop . height = Math . round ( item . crop . height * scaleY ) ;
item . crop . offsetLeft = Math . round ( item . crop . offsetLeft * scaleX ) ;
item . crop . offsetTop = Math . round ( item . crop . offsetTop * scaleY ) ;
if ( item . isFixedPos ) {
item . fixedLeft = obj . offsetLeft ;
item . fixedTop = obj . offsetTop ;
}
else {
item . default . left = obj . offsetLeft - item . crop . offsetLeft ;
item . default . top = obj . offsetTop - item . crop . offsetTop ;
}
_ this . ref ( ) ;
} ,
croppingEnter : function ( ) {
let _ this = this ;
_ this . cropping = true ;
$ ( "#luckysheet-modal-dialog-activeImage" ) . hide ( ) ;
$ ( "#luckysheet-modal-dialog-slider-imageCtrl" ) . hide ( ) ;
let item = _ this . images [ _ this . currentImgId ] ;
let imgItemParam = _ this . getImgItemParam ( item ) ;
let width = imgItemParam . width ;
let height = imgItemParam . height ;
let left = imgItemParam . left ;
let top = imgItemParam . top ;
let position = imgItemParam . position ;
$ ( "#luckysheet-modal-dialog-cropping" ) . show ( ) . css ( {
"width" : width ,
"height" : height ,
"left" : left ,
"top" : top ,
"position" : position
} ) ;
$ ( "#luckysheet-modal-dialog-cropping .cropping-mask" ) . css ( {
"width" : item . default . width ,
"height" : item . default . height ,
"background-image" : "url(" + item . src + ")" ,
"left" : - item . crop . offsetLeft ,
"top" : - item . crop . offsetTop
} )
$ ( "#luckysheet-modal-dialog-cropping .cropping-content" ) . css ( {
"background-image" : "url(" + item . src + ")" ,
"background-size" : item . default . width + "px " + item . default . height + "px" ,
"background-position" : - item . crop . offsetLeft + "px " + - item . crop . offsetTop + "px"
} )
_ this . images [ _ this . currentImgId ] . width = width ;
_ this . images [ _ this . currentImgId ] . height = height ;
_ this . images [ _ this . currentImgId ] . left = position . left ;
_ this . images [ _ this . currentImgId ] . top = position . top ;
$ ( "#luckysheet-modal-dialog-cropping .luckysheet-modal-dialog-border" ) . css ( {
"border-width" : item . border . width ,
"border-style" : item . border . style ,
"border-color" : item . border . color ,
"border-radius" : item . border . radius ,
"left" : - item . border . width ,
"right" : - item . border . width ,
"top" : - item . border . width ,
"bottom" : - item . border . width ,
} )
} ,
croppingExit : function ( ) {
let _ this = this ;
_ this . cropping = false ;
$ ( "#luckysheet-modal-dialog-cropping" ) . hide ( ) ;
let item = _ this . images [ _ this . currentImgId ] ;
let imgItemParam = _ this . getImgItemParam ( item ) ;
let width = imgItemParam . width ;
let height = imgItemParam . height ;
let left = imgItemParam . left ;
let top = imgItemParam . top ;
let position = imgItemParam . position ;
$ ( "#luckysheet-modal-dialog-activeImage" ) . show ( ) . css ( {
"width" : width ,
"height" : height ,
"left" : left ,
"top" : top ,
"position" : position
} ) ;
$ ( "#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content" ) . css ( {
"background-image" : "url(" + item . src + ")" ,
"background-size" : item . default . width + "px " + item . default . height + "px" ,
"background-position" : - item . crop . offsetLeft + "px " + - item . crop . offsetTop + "px"
} )
} ,
cropChangeImgItem : function ( ) {
let _ this = this ;
_ this . cropChange = null ;
let item = _ this . images [ _ this . currentImgId ] ;
item . crop . width = _ this . cropChangeObj . width ;
item . crop . height = _ this . cropChangeObj . height ;
item . crop . offsetLeft = _ this . cropChangeObj . offsetLeft ;
item . crop . offsetTop = _ this . cropChangeObj . offsetTop ;
_ this . ref ( ) ;
} ,
removeImgItem : function ( ) {
let _ this = this ;
$ ( "#luckysheet-modal-dialog-activeImage" ) . hide ( ) ;
$ ( "#luckysheet-modal-dialog-cropping" ) . hide ( ) ;
$ ( "#luckysheet-modal-dialog-slider-imageCtrl" ) . hide ( ) ;
$ ( "#" + _ this . currentImgId ) . remove ( ) ;
delete _ this . images [ _ this . currentImgId ] ;
_ this . currentImgId = null ;
_ this . ref ( ) ;
} ,
allImagesShow : function ( ) {
let _ this = this ;
$ ( "#luckysheet-modal-dialog-activeImage" ) . hide ( ) ;
$ ( "#luckysheet-modal-dialog-cropping" ) . hide ( ) ;
$ ( "#luckysheet-modal-dialog-slider-imageCtrl" ) . hide ( ) ;
$ ( "#luckysheet-image-showBoxs .img-list" ) . empty ( ) ;
if ( _ this . images == null ) {
return ;
}
for ( let imgId in _ this . images ) {
let imgItem = _ this . images [ imgId ] ;
let modelHtml = _ this . modelHtml ( imgId , imgItem ) ;
$ ( "#luckysheet-image-showBoxs .img-list" ) . append ( modelHtml ) ;
}
} ,
moveChangeSize : function ( rc , index , changeSize ) {
let _ this = this ;
let images = $ . extend ( true , { } , _ this . images ) ;
if ( rc == "row" ) {
let row = Store . visibledatarow [ index ] ,
row_pre = index - 1 == - 1 ? 0 : Store . visibledatarow [ index - 1 ] ;
}
else if ( rc == "column" ) {
let col = Store . visibledatacolumn [ index ] ,
col_pre = index - 1 == - 1 ? 0 : Store . visibledatacolumn [ index - 1 ] ;
for ( let imgId in images ) {
let imgItem = images [ imgId ] ;
let imgItemParam = _ this . getImgItemParam ( imgItem ) ;
let type = imgItem . type ;
if ( type == "1" ) {
if ( imgItemParam . left >= col ) {
imgItem . default . left = imgItemParam . left + changeSize - item . crop . offsetLeft ;
}
else {
if ( imgItemParam . left + imgItemParam . width > col ) {
let scaleX = obj . clientWidth / item . crop . width ;
}
else {
}
}
}
else if ( type == "2" ) {
}
}
}
} ,
ref : function ( ) {
let _ this = this ;
let file = Store . luckysheetfile [ getSheetIndex ( Store . currentSheetIndex ) ] ;
let images = _ this . images ;
if ( Store . clearjfundo ) {
Store . jfundo = [ ] ;
Store . jfredo . push ( {
"type" : "imageCtrl" ,
"sheetIndex" : Store . currentSheetIndex ,
"images" : file . images == null ? null : $ . extend ( true , { } , file . images ) ,
"curImages" : images
} ) ;
}
file . images = $ . extend ( true , { } , images ) ;
server . saveParam ( "all" , Store . currentSheetIndex , file . images , { "k" : "images" } ) ;
} ,
}
wpxp123456
5 years ago