|
|
@@ -0,0 +1,204 @@
|
|
|
+import{getBoundary,getLineScaleInfo,caclShapePercentage} from "@/views/ppt_manage/newVersion/utils/untils";
|
|
|
+import ContextMenu from "@/views/ppt_manage/newVersion/components/layer/Element/ShapeContextMenu.vue";
|
|
|
+export default{
|
|
|
+ components:{ContextMenu},
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ movePoint:{ //移动时,记录鼠标的位置
|
|
|
+ startX:null,
|
|
|
+ startY:null,
|
|
|
+ moveX:null,
|
|
|
+ moveY:null,
|
|
|
+ },
|
|
|
+ scalePoint:{//缩放时,记录鼠标的位置
|
|
|
+ startX:null,
|
|
|
+ startY:null,
|
|
|
+ moveX:null,
|
|
|
+ moveY:null,
|
|
|
+ },
|
|
|
+ isMouseDown:false,//鼠标是否按下
|
|
|
+ eventType:'move',//当前进行的事件:move:移动元素,resize:缩放元素
|
|
|
+ contextmenus:[
|
|
|
+ {id:1,text:'删除元素',eventName:'deleteShape'},
|
|
|
+ {id:2,text:'复制元素',eventName:'copyShape'}
|
|
|
+ ],//右键菜单的菜单项
|
|
|
+ isContextMenusShow:false,//右键菜单是否显示
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ //开始移动
|
|
|
+ handleMoveStart(event){
|
|
|
+ if(!this.isActive) return
|
|
|
+ //保存移动前的坐标
|
|
|
+ this.isMouseDown = true
|
|
|
+ this.eventType = 'move'
|
|
|
+ this.movePoint.startX = event.clientX
|
|
|
+ this.movePoint.startY = event.clientY
|
|
|
+ document.onmousemove=(e)=>{
|
|
|
+ //如果显示了右键菜单,隐藏掉
|
|
|
+ if(this.isContextMenusShow){
|
|
|
+ this.hideContextMenu()
|
|
|
+ }
|
|
|
+ this.handleMove(e)
|
|
|
+ }
|
|
|
+ document.onmouseup = ()=>{
|
|
|
+ this.isMouseDown = false
|
|
|
+ document.onmousemove = null
|
|
|
+ document.onmouseup = null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //移动中
|
|
|
+ handleMove(e){
|
|
|
+ if(!this.isMouseDown) return
|
|
|
+ const {startX,startY} = this.movePoint
|
|
|
+ this.movePoint.moveX = e.clientX-startX
|
|
|
+ this.movePoint.moveY = e.clientY-startY
|
|
|
+ //设置移动的边界点:不能超出editor-area
|
|
|
+ const areaWidth = $(".editor-area").width()||0
|
|
|
+ const areaHeight = areaWidth*0.7
|
|
|
+ let moveInfo = {}
|
|
|
+ moveInfo.left = Math.min(Math.max(this.elementInfo.left+this.movePoint.moveX,0),areaWidth-this.elementInfo.width)
|
|
|
+ moveInfo.top = Math.min(Math.max(this.elementInfo.top+this.movePoint.moveY,0),areaHeight-this.elementInfo.height)
|
|
|
+ this.changeStyle(moveInfo,{})
|
|
|
+ //改变完后,更新movePoint的位置
|
|
|
+ this.movePoint.startX = e.clientX
|
|
|
+ this.movePoint.startY = e.clientY
|
|
|
+ },
|
|
|
+ //开始缩放
|
|
|
+ handleScaleStart(event,direction){
|
|
|
+ this.isMouseDown = true
|
|
|
+ this.eventType = 'resize'
|
|
|
+ this.scalePoint.startX = event.clientX
|
|
|
+ this.scalePoint.startY = event.clientY
|
|
|
+ document.onmousemove=(e)=>{
|
|
|
+ //如果显示了右键菜单,隐藏掉
|
|
|
+ if(this.isContextMenusShow){
|
|
|
+ this.hideContextMenu()
|
|
|
+ }
|
|
|
+ this.handleScale(e,direction)
|
|
|
+ }
|
|
|
+ document.onmouseup = ()=>{
|
|
|
+ this.isMouseDown = false
|
|
|
+ document.onmousemove = null
|
|
|
+ document.onmouseup = null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //缩放中
|
|
|
+ handleScale(e,direction){
|
|
|
+ if(!this.isMouseDown) return
|
|
|
+ const {left,top,width,height} = this.elementInfo
|
|
|
+ let scaleInfo = {left:left,top:top,width:width,height:height}
|
|
|
+ //根据direction和moveX,moveY算出元素应该缩放+移动的参数
|
|
|
+ const {startX,startY} = this.scalePoint
|
|
|
+ this.scalePoint.moveX = e.clientX-startX
|
|
|
+ this.scalePoint.moveY = e.clientY-startY
|
|
|
+ //计算拖拽后位置和宽高
|
|
|
+ const areaWidth = $(".editor-area").width()||0
|
|
|
+ const areaHeight = areaWidth*0.7
|
|
|
+ //常规的八个点
|
|
|
+ //左上角:拖拽会改变left,top,width,height
|
|
|
+ if(direction==='LEFT_TOP'){
|
|
|
+ scaleInfo.left = getBoundary(Math.max(left + this.scalePoint.moveX,0),0,(areaWidth - (scaleInfo.width+5)))
|
|
|
+ scaleInfo.top = getBoundary(Math.max(top + this.scalePoint.moveY,0),0,(areaHeight-(scaleInfo.height+5)))
|
|
|
+ if(scaleInfo.left===0){
|
|
|
+ scaleInfo.width = getBoundary(width - this.scalePoint.moveX,25,width)
|
|
|
+ }else{
|
|
|
+ scaleInfo.width = getBoundary(width - this.scalePoint.moveX,25,areaWidth)
|
|
|
+ }
|
|
|
+ if(scaleInfo.top===0){
|
|
|
+ scaleInfo.height = getBoundary(height - this.scalePoint.moveY,25,height)
|
|
|
+ }else{
|
|
|
+ scaleInfo.height = getBoundary(height - this.scalePoint.moveY,25,areaHeight)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //左中:拖拽会改变left,width
|
|
|
+ else if (direction==="LEFT"){
|
|
|
+ scaleInfo.width = getBoundary(width - this.scalePoint.moveX,25,areaWidth)
|
|
|
+ scaleInfo.left = getBoundary(Math.max(left + this.scalePoint.moveX,0),0,(areaWidth - (scaleInfo.width+5)))
|
|
|
+
|
|
|
+ }
|
|
|
+ //左下:拖拽会改变left,width,height
|
|
|
+ else if(direction==="LEFT_BOTTOM"){
|
|
|
+ scaleInfo.width = getBoundary(width - this.scalePoint.moveX,25,areaWidth)
|
|
|
+ scaleInfo.height = getBoundary(height + this.scalePoint.moveY,25,areaHeight)
|
|
|
+ scaleInfo.left = getBoundary(Math.max(left + this.scalePoint.moveX,0),0,(areaWidth - (scaleInfo.width+5)))
|
|
|
+ }
|
|
|
+ //右上:拖拽会改变top,width,height
|
|
|
+ else if(direction==="RIGHT_TOP"){
|
|
|
+ scaleInfo.width = getBoundary(width + this.scalePoint.moveX,25,areaWidth-left)
|
|
|
+ scaleInfo.height = getBoundary(height - this.scalePoint.moveY,25,areaHeight-top)
|
|
|
+ scaleInfo.top = Math.max(top + this.scalePoint.moveY,0)
|
|
|
+ }
|
|
|
+ //右中:拖拽会改变width
|
|
|
+ else if(direction==="RIGHT"){
|
|
|
+ scaleInfo.width = getBoundary(width + this.scalePoint.moveX,25,areaWidth-left)
|
|
|
+ }
|
|
|
+ //右下:拖拽会改变width,height
|
|
|
+ else if(direction==="RIGHT_BOTTOM"){
|
|
|
+ scaleInfo.width = getBoundary(width + this.scalePoint.moveX,25,areaWidth-left)
|
|
|
+ scaleInfo.height = getBoundary(height + this.scalePoint.moveY,25,areaHeight-top)
|
|
|
+ }
|
|
|
+ //中上:拖拽会改变top,height
|
|
|
+ else if(direction==="TOP"){
|
|
|
+ scaleInfo.height = getBoundary(height - this.scalePoint.moveY,25,areaHeight)
|
|
|
+ scaleInfo.top = Math.max(top + this.scalePoint.moveY,0)
|
|
|
+ }
|
|
|
+ //中下:拖拽会改变height
|
|
|
+ else if(direction==="BOTTOM"){
|
|
|
+ scaleInfo.height = getBoundary(height + this.scalePoint.moveY,25,areaHeight)
|
|
|
+ }
|
|
|
+ this.changeStyle({},scaleInfo)
|
|
|
+ this.scalePoint.startX = e.clientX
|
|
|
+ this.scalePoint.startY = e.clientY
|
|
|
+ },
|
|
|
+ changeStyle(moveInfo,scaleInfo){
|
|
|
+ //const {moveX,moveY} = this.movePoint
|
|
|
+ if(this.eventType==='resize'){
|
|
|
+ const {left,top,width,height} = scaleInfo
|
|
|
+ this.elementInfo.left = left
|
|
|
+ this.elementInfo.top = top
|
|
|
+ this.elementInfo.width = width
|
|
|
+ this.elementInfo.height = height
|
|
|
+ }else if(this.eventType==='move'){
|
|
|
+ const {left,top} = moveInfo
|
|
|
+ this.elementInfo.left = left
|
|
|
+ this.elementInfo.top = top
|
|
|
+ }
|
|
|
+ //更新realWidth,realHeight
|
|
|
+ this.elementInfo.realWidth = this.elementInfo.width
|
|
|
+ this.elementInfo.realHeight = this.elementInfo.height
|
|
|
+ //更新percentage单位
|
|
|
+ const width = $('.editor-area').width(),height = width*0.7
|
|
|
+ const percentageShape = caclShapePercentage({layerWidth:width,layerHeight:height},this.elementInfo)
|
|
|
+ this.elementInfo.percentageLeft = percentageShape.percentageLeft
|
|
|
+ this.elementInfo.percentageTop = percentageShape.percentageTop
|
|
|
+ this.elementInfo.percentageWidth = percentageShape.percentageWidth
|
|
|
+ this.elementInfo.percentageHeight = percentageShape.percentageHeight
|
|
|
+ },
|
|
|
+ //显示右键菜单
|
|
|
+ showContentMenu(e){
|
|
|
+ e.preventDefault();
|
|
|
+ if(!this.isCoverEdit) {
|
|
|
+ this.$emit('chooseThis')
|
|
|
+ }
|
|
|
+ $(`#menu-${this.elementInfo.id}`).css({ "left": document.body.scrollLeft + e.clientX, "top":
|
|
|
+ document.body.scrollTop + e.clientY}).show();
|
|
|
+ this.isContextMenusShow = true
|
|
|
+ },
|
|
|
+ //隐藏右键菜单
|
|
|
+ hideContextMenu(){
|
|
|
+ $(`#menu-${this.elementInfo.id}`).hide();
|
|
|
+ this.isContextMenuShow = false
|
|
|
+ },
|
|
|
+ //删除当前元素
|
|
|
+ handleDeleteLayer(){
|
|
|
+ this.$emit('deleteEl',this.elementInfo)
|
|
|
+ this.hideContextMenu()
|
|
|
+ },
|
|
|
+ //复制当前元素
|
|
|
+ handleCopyShape(){
|
|
|
+ this.$emit('copyEl',this.elementInfo)
|
|
|
+ this.hideContextMenu()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
cxmo