1410 lines
50 KiB
Vue
1410 lines
50 KiB
Vue
<template>
|
|
<div class="editPrintElement">
|
|
<div class="detailText" style="text-align: left; margin-bottom: 1rem;" v-if="type == 'print'">
|
|
{{ $t('DesignPrintOperation.ModifyPrint') }}
|
|
</div>
|
|
<div class="printOverallBtn" v-if="type == 'print'">
|
|
<div class="overallSlogin">
|
|
<label>
|
|
<input type="radio" name="overallSingle" @change="setOveralSingle" v-model="stateOverallSingle" value="single">
|
|
{{ $t('DesignPrintOperation.Single') }}
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="overallSingle" @change="setOveralSingle" v-model="stateOverallSingle" value="overall">
|
|
{{ $t('DesignPrintOperation.Overall') }}
|
|
</label>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="printElementListBorder single">
|
|
<div class="printElementList" ref="printElementList" :style="{height:'10rem'}">
|
|
<div class="itemList" :style="{width:(prentWidth || 0)}">
|
|
<div class="imgItem"
|
|
v-for="item,index in printStyleList[type][stateOverallSingle]"
|
|
:key="item"
|
|
:class="{active:stateOverallSingle == 'overall' && index == imgDomIndex}"
|
|
@mousedown.stop="designMousedown(getMousePosition($event,false),item.uniqueId,'disLike')"
|
|
@touchstart.passive="designMousedown(getMousePosition($event,true),item.uniqueId,'disLike')"
|
|
@click.stop="overallSetIndex(item)"
|
|
>
|
|
<img :src="item.path" alt="">
|
|
<i class="fi fi-rr-trash" @click.stop="navDelete(item)"></i>
|
|
</div>
|
|
<!-- <div class="imgItem"
|
|
v-if="stateOverallSingle == 'overall'"
|
|
v-for="item in printStyleList[type][stateOverallSingle]"
|
|
:key="item"
|
|
style="width:14rem;height:14rem;left: 0;right: 0;margin: 0 auto;"
|
|
>
|
|
<img :src="item.path" alt="">
|
|
<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="imgDomIndex >= 0" v-show="stateOverallSingle != 'single'" class="habit_System_Designer">
|
|
<!-- <a-slider id="system_silder"
|
|
class="system_silder"
|
|
:min="20"
|
|
:max="1000"
|
|
v-model:value="systemDesignerPercentage"
|
|
:tip-formatter="formatter"
|
|
>
|
|
</a-slider> -->
|
|
<a-popover
|
|
trigger="click"
|
|
destroyTooltipOnHide
|
|
:title="t('Canvas.repeatSetting')"
|
|
>
|
|
<template #content>
|
|
<repeat-setting
|
|
:object="printStyleList[type].overall[imgDomIndex]"
|
|
@inputFillAngle="inputFillAngle"
|
|
@inputFillOffset="inputFillOffset"
|
|
@inputFillScale="inputFillScale"
|
|
:sketchPath="selectDetail.path"
|
|
@inputFill_Gap="
|
|
(x, y) => inputFill_Gap(x, y)"
|
|
/>
|
|
</template>
|
|
<div class="btn">
|
|
<SvgIcon name="overallMore" size="20" />
|
|
</div>
|
|
</a-popover>
|
|
</div>
|
|
<div class="editPrintElementBox">
|
|
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
|
|
<!-- <div class="designOpenrtion_imgMask" :style="sketch"> -->
|
|
<div class="designOpenrtion_imgMask">
|
|
<div class="designOpenrtion_print" v-if="stateOverallSingle == 'single'">
|
|
<div
|
|
v-for="item,index in printStyleList[type][stateOverallSingle]"
|
|
:key="item"
|
|
:style="{...item?.pattern?.style,opacity:item?.object?.opacity || 1}"
|
|
@mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))"
|
|
class="modal_imgItem"
|
|
ref="content"
|
|
>
|
|
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${item.pattern?.transform?.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false">
|
|
</div>
|
|
</div>
|
|
<!-- <img :src="selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg"> -->
|
|
<img :src="stateOverallSingle == 'single'?(selectDetail.undividedLayer||selectDetail.path):(selectDetail.undividedLayerColor || selectDetail.path)" alt="" class="designOpenrtion_sketch" ref="sketchImg" @load="()=>isSketchLoad = true">
|
|
<img :src="selectDetail.sketchMask" alt="" class="designOpenrtion_sketchMask" ref="sketchMask">
|
|
<div class="designOpenrtion_btn" v-if="stateOverallSingle == 'single'" >
|
|
<ul v-for="item,index in printStyleList[type][stateOverallSingle]" :key="item" :class="{active:item?.pattern.designOpenrtionBtn?item?.pattern.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item?.pattern.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
|
|
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
|
|
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
|
|
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
|
|
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('right',getMousePosition($event,true))"></li>
|
|
<li class="designOpenrtion_rotote" v-rotote.stop="[index,item?.transform,type]"></li>
|
|
<li class="designOpenrtion_delete" @click.stop="deletePrint">
|
|
<img src="../../../assets/images/homePage/cuowu.svg" alt="">
|
|
</li>
|
|
</ul>
|
|
<!-- <div v-show="stateOverallSingle != 'single'"></div>
|
|
<ul v-if="stateOverallSingle != 'single' && printStyleList[type][stateOverallSingle][0]" class="designOpenrtion_Mouoverall active" :style="'left:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.left+';top:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(0,getMousePosition($event,true))">
|
|
<i class="fi fi-rr-arrows animtion1"></i>
|
|
<i class="fi fi-rr-arrows animtion2"></i>
|
|
<li class="designOpenrtion_rotote" v-rotote.stop="[0,printStyleList[type][stateOverallSingle][0]?.pattern?.transform,type]"></li>
|
|
</ul> -->
|
|
</div>
|
|
<div class="designOpenrtion_pingpu" v-else>
|
|
<pingpu :width="sketchSize.width" :height="sketchSize.height" ref="pingpuRef" @change-canvas="updateCanvas"></pingpu>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mark_loading" v-show="loadingShow">
|
|
<a-spin size="large" />
|
|
</div>
|
|
</div>
|
|
<!-- <div class="clearOverall" style="text-align: center; height: 6rem;">
|
|
<div class="gallery_btn" v-show="!overallSingle && type == 'print'" style="line-height: 5rem;" @click="clearOverall">Clear</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent,computed,ref,onMounted,nextTick,watch,toRefs, reactive, onBeforeUnmount} from 'vue'
|
|
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
|
import { useStore } from "vuex";
|
|
import { getMousePosition } from "@/tool/mdEvent";
|
|
import { sketchToMask } from "@/tool/util";
|
|
import pingpu from '@/component/Canvas/OverallCanvas/index.vue'
|
|
import RepeatSetting from "./overallSetting/RepeatSetting.vue";
|
|
import { useI18n } from 'vue-i18n'
|
|
export default defineComponent({
|
|
components:{
|
|
pingpu,RepeatSetting
|
|
},
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
default: 'print',
|
|
},
|
|
sketchSize:{
|
|
type:Object,
|
|
default:()=>{}
|
|
},
|
|
},
|
|
setup(props,{emit}) {
|
|
const { t } = useI18n()
|
|
const store = useStore();
|
|
const editPrintElementDom = reactive({
|
|
imgDom:null as any,
|
|
sketchImg:null as any,
|
|
pingpuRef:null as any,
|
|
})
|
|
const editPrintElementData = reactive({
|
|
selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
|
|
currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType),
|
|
currentPrintElement:computed(()=>store.state.DesignDetail.currentPrintElement),
|
|
systemDesignerPercentage:0,
|
|
printStyleList:{
|
|
print:{
|
|
single:[],
|
|
overall:[],
|
|
},
|
|
element:{
|
|
single:[],
|
|
}
|
|
} as any,
|
|
stateOverallSingle:'single' as any,
|
|
type:props.type,
|
|
imgDomIndex:-1,
|
|
direction:'',//判断点的那条边
|
|
printZIndex:2,//印花优先级
|
|
sketchWH:{
|
|
width:0,
|
|
height:0,
|
|
scale:[1,1],
|
|
},
|
|
loadingShow:false,
|
|
printElementList:null as any,
|
|
isSketchLoad:false,
|
|
})
|
|
const ACTIONS = {
|
|
ADD: "add",
|
|
UPDATE: "update",
|
|
DELETE: "delete",
|
|
SELECT: "select",
|
|
SORT: "sort",
|
|
};
|
|
const collItemSize = reactive({
|
|
collValue:18,
|
|
num:1,
|
|
prentWidth:0 as any,
|
|
padding:10,
|
|
likeStyle:{
|
|
|
|
},
|
|
itemStyle:{
|
|
width:0,
|
|
height:0,
|
|
},
|
|
collTime:null as any,
|
|
isMove:false,
|
|
elList:[] as any,
|
|
selectIndex:0,
|
|
})
|
|
watch
|
|
const setOveralSingle = async ()=>{
|
|
|
|
await setItemPosition()
|
|
}
|
|
const formatter = (value:any)=>{
|
|
return `${value}%`;
|
|
}
|
|
const deletePrint = ()=>{
|
|
if(editPrintElementData.imgDomIndex>-1)editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].splice(editPrintElementData.imgDomIndex,1)
|
|
}
|
|
const setScaleLocation:any = (item:any)=>{
|
|
return new Promise((resolve, reject) => {
|
|
// let location = [,]
|
|
let img = new Image
|
|
img.onload = ()=>{
|
|
let imgScale = img.width / img.height
|
|
let zoom = 2
|
|
let width = editPrintElementData.sketchWH.width / zoom
|
|
let height = width / editPrintElementData.sketchWH.height
|
|
|
|
let scale = [width / editPrintElementData.sketchWH.width,height]
|
|
|
|
let sketchW = editPrintElementData.sketchWH.width * editPrintElementData.sketchWH.scale[0]
|
|
let sketchH = editPrintElementData.sketchWH.height * editPrintElementData.sketchWH.scale[1]
|
|
let x = sketchW / 2 - (sketchW * (width / editPrintElementData.sketchWH.width)/2)
|
|
let y = sketchH / 2 -(sketchH * height/2)
|
|
if(!editPrintElementData.stateOverallSingle == 'single'){
|
|
x = sketchW / 2
|
|
y = sketchH / 2
|
|
}
|
|
let location = [x,y]
|
|
resolve({scale,location})
|
|
}
|
|
img.src = item.url
|
|
})
|
|
}
|
|
const addPrintELement = async (data:any)=>{
|
|
if(!editPrintElementData.isSketchLoad)return
|
|
let {scale,location} = await setScaleLocation(data)
|
|
let item = {
|
|
angle:0,
|
|
designType:data.designType,
|
|
ifSingle:editPrintElementData.stateOverallSingle == 'single',
|
|
level2Type:data.level2Type,
|
|
location,
|
|
minIOPath:data.minIOPath || data.originalUrl,
|
|
path:data.url,
|
|
priority:editPrintElementData.printZIndex,
|
|
scale,
|
|
globalCompositeOperation:'',
|
|
}
|
|
getItemPosition(item)
|
|
setItemPosition()
|
|
store.commit('DesignDetail/setCurrentPrintElement',null)
|
|
}
|
|
const previewDetailPrintData = ()=>{
|
|
let data:any = []
|
|
let index = 1
|
|
let setData = (item:any,index:number)=>{
|
|
let scale,location
|
|
let style = item.pattern.style
|
|
let sketchWH = editPrintElementData.sketchWH.scale
|
|
if(item.ifSingle){
|
|
scale = [style.width.replace(/px/g,'')/(editPrintElementData.sketchWH.width),(style.height.replace(/px/g,'')/(editPrintElementData.sketchWH.height))]
|
|
location = [style.left.replace(/px/g,'')*sketchWH[0],style.top.replace(/px/g,'')*sketchWH[1]]
|
|
}else{
|
|
let x = Number(style.left.replace(/px/g,''))
|
|
let y = Number(style.top.replace(/px/g,''))
|
|
location = [(x*sketchWH[0]) ,(y*sketchWH[1])]
|
|
scale = item.scale
|
|
// scale = [item.pattern.style.width/item.pattern.style.height,item.pattern.style.height/item.pattern.style.width]
|
|
// location = [item.pattern.style.left,item.pattern.style.top]
|
|
}
|
|
let value ={
|
|
angle : item.pattern.transform.rotateZ,
|
|
// angle : !this.overallSingle ? 0:item.pattern.transform.rotateZ,
|
|
location : location,
|
|
priority:index,
|
|
scale: scale,
|
|
designType:item.designType,
|
|
level2Type:item.level2Type,
|
|
path:item.path,
|
|
minIOPath:item.minIOPath,
|
|
ifSingle:!!item.ifSingle,
|
|
globalCompositeOperation:'',
|
|
}
|
|
if(item.object)value.object = item.object
|
|
return value
|
|
}
|
|
if(editPrintElementData.printStyleList[props.type].single.length>0){
|
|
sort(editPrintElementData.printStyleList[props.type].single)
|
|
}
|
|
editPrintElementData.printStyleList[props.type].overall.forEach((item:any)=>{
|
|
data.push(setData(item,index))
|
|
index++
|
|
})
|
|
editPrintElementData.printStyleList[props.type].single.forEach((item:any)=>{
|
|
data.push(setData(item,index))
|
|
index++
|
|
})
|
|
let value = {
|
|
data,
|
|
str:props.type
|
|
}
|
|
store.commit('DesignDetail/setNewDetail',value)
|
|
}
|
|
const sort = (list:any)=>{
|
|
list.sort((a:any,b:any)=>{
|
|
var a_num = a.pattern.style.zIndex;
|
|
var b_num = b.pattern.style.zIndex;
|
|
return a_num - b_num;
|
|
})
|
|
}
|
|
const getPosition = ()=>{
|
|
|
|
// editPrintElementData.selectDetail.newDetail[props.type].push()
|
|
}
|
|
const getItemPosition = (item:any)=>{
|
|
let left,top
|
|
if(item.ifSingle){
|
|
//single
|
|
left = item.location[0] / editPrintElementData.sketchWH.scale[0]
|
|
top = item.location[1] / editPrintElementData.sketchWH.scale[1]
|
|
}else{
|
|
//overall
|
|
editPrintElementData.systemDesignerPercentage = item.scale[0]*1000
|
|
left = item.location[0] / editPrintElementData.sketchWH.scale[0]
|
|
top = item.location[1] / editPrintElementData.sketchWH.scale[1]
|
|
editPrintElementData.systemDesignerPercentage = item.scale?.[0]?item.scale[0]*100:30
|
|
}
|
|
let pattern = {
|
|
centers:{left:0,top:0},
|
|
style:{
|
|
left:left+'px',
|
|
top:top+'px',
|
|
right:"auto",
|
|
bottom:"auto",
|
|
width:editPrintElementData.sketchWH.width*item.scale[0]+'px',
|
|
height:editPrintElementData.sketchWH.height*item.scale[1]+'px',
|
|
// zIndex:item.priority,
|
|
},
|
|
transform:{
|
|
rotateZ:item.angle?item.angle:0
|
|
},
|
|
designOpenrtionBtn:false
|
|
}
|
|
editPrintElementData.printZIndex++
|
|
item.pattern = pattern
|
|
|
|
if(item.object){
|
|
|
|
}else{
|
|
item.object = {
|
|
top: 0,
|
|
left: 0,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
opacity: 1,
|
|
angle: 0,
|
|
flipX: false,
|
|
flipY: false,
|
|
blendMode: "multiply",
|
|
gapX: 0,
|
|
gapY: 0,
|
|
}
|
|
if(props.type == 'element'){
|
|
item.object.blendMode = 'source-over'
|
|
}
|
|
}
|
|
if(item.ifSingle){
|
|
editPrintElementData.printStyleList[props.type].single.push(item)
|
|
}else{
|
|
item.token = Date.now().toString() + (editPrintElementData.printStyleList[props.type].overall.length + '')
|
|
// editPrintElementData.printStyleList[props.type].overall = []
|
|
editPrintElementData.printStyleList[props.type].overall.push(item)
|
|
setTimeout(()=>{
|
|
editPrintElementDom.pingpuRef.updataList([
|
|
{
|
|
action: ACTIONS.ADD,
|
|
data: item,
|
|
},
|
|
]);
|
|
})
|
|
|
|
}
|
|
}
|
|
const setPosition = ()=>{
|
|
nextTick(()=>{
|
|
let img = new Image
|
|
img.onload = ()=>{
|
|
// let sketchScale = editPrintElementData.selectDetail.layersObject[0].scale
|
|
let sketchScale = [1,1]
|
|
let scaleX = img.width * sketchScale[0] / editPrintElementDom.sketchImg.offsetWidth
|
|
let scaleY = img.height * sketchScale[1] / editPrintElementDom.sketchImg.offsetHeight
|
|
|
|
editPrintElementData.sketchWH = {
|
|
width:editPrintElementDom.sketchImg.offsetWidth,
|
|
height:editPrintElementDom.sketchImg.offsetHeight,
|
|
scale:[scaleX,scaleY],
|
|
}
|
|
if(!editPrintElementData.selectDetail.printObject.prints)return
|
|
let state = true
|
|
// editPrintElementData.stateOverallSingle = 'single'
|
|
let arr:any = editPrintElementData.selectDetail.newDetail?.print || editPrintElementData.selectDetail.printObject.prints
|
|
if(props.type == 'element'){
|
|
arr = editPrintElementData.selectDetail.newDetail?.element || editPrintElementData.selectDetail.trims.prints
|
|
}
|
|
if(editPrintElementData.selectDetail.newDetail?.[editPrintElementData.currentDetailType]){
|
|
arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType]
|
|
}
|
|
if(arr && arr.length > 0){
|
|
editPrintElementData.printStyleList[props.type].single = []
|
|
editPrintElementData.printStyleList[props.type].overall = []
|
|
arr.forEach((item:any)=>{
|
|
if(!item.ifSingle){
|
|
editPrintElementData.stateOverallSingle = 'overall',
|
|
state = false
|
|
}
|
|
getItemPosition(item)
|
|
})
|
|
setItemPosition()
|
|
}
|
|
// if(props.type == 'print'){
|
|
// editPrintElementData.overallSingle = state
|
|
// }
|
|
}
|
|
// undividedLayer
|
|
//计算宽高使用editPrintElementData.selectDetail.path
|
|
// img.src = editPrintElementData.selectDetail.path
|
|
img.src = editPrintElementData.selectDetail.undividedLayer?editPrintElementData.selectDetail.undividedLayer:editPrintElementData.selectDetail.path
|
|
})
|
|
}
|
|
// watch(()=>editPrintElementData.selectDetail?.id,(newVal)=>{
|
|
// if(!newVal)return
|
|
// editPrintElementData.printStyleList[props.type] = {
|
|
// single:[],
|
|
// overall:[],
|
|
// }
|
|
// setPosition()
|
|
// },{immediate: true,})
|
|
watch(()=>editPrintElementData.currentPrintElement,(newVal)=>{
|
|
if(newVal){
|
|
addPrintELement(newVal)
|
|
}
|
|
})
|
|
watch(()=>((editPrintElementData.selectDetail?.id)),(newVal)=>{
|
|
if(!newVal)return
|
|
editPrintElementData.isSketchLoad = false,
|
|
editPrintElementData.printStyleList[props.type] = {
|
|
single:[],
|
|
overall:[],
|
|
}
|
|
if(!editPrintElementData.selectDetail.sketchMask){
|
|
sketchToMask(editPrintElementData.selectDetail?.layersObject[0].maskUrl).then((res:any)=>{
|
|
editPrintElementData.selectDetail.sketchMask = res
|
|
})
|
|
}
|
|
setPosition()
|
|
},{immediate: true,})
|
|
watch(()=>editPrintElementData.stateOverallSingle,(newVal)=>{
|
|
let arr = editPrintElementData.printStyleList[props.type][newVal]
|
|
if(arr.length > 0){
|
|
editPrintElementData.imgDomIndex = 0
|
|
if(newVal == 'overall'){
|
|
editPrintElementData.printStyleList[props.type].single = []
|
|
editPrintElementData.printStyleList[props.type].overall = []
|
|
arr.forEach((item:any,index:number) => {
|
|
getItemPosition(item)
|
|
});
|
|
}
|
|
}else{
|
|
editPrintElementData.imgDomIndex = -1
|
|
}
|
|
})
|
|
watch(()=>editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].length,(newVal)=>{
|
|
if(newVal > 0){
|
|
if(editPrintElementData.imgDomIndex < 0)editPrintElementData.imgDomIndex = 0
|
|
}
|
|
})
|
|
const addOverallToCanvas = ()=>{
|
|
|
|
editPrintElementDom.pingpuRef
|
|
}
|
|
//设置移动
|
|
const itemMoveMousedown = (index:number,event:any)=>{
|
|
if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
|
|
editPrintElementData.imgDomIndex = index
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].forEach((v:any)=>{
|
|
v.pattern.designOpenrtionBtn = false
|
|
})
|
|
if(editPrintElementData.stateOverallSingle != 'single'){
|
|
editPrintElementDom.imgDom = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("designOpenrtion_Mouoverall")[0]
|
|
}else{
|
|
editPrintElementDom.imgDom = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("modal_imgItem")[editPrintElementData.imgDomIndex]
|
|
}
|
|
let scale = Number(editPrintElementDom.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
|
|
let rotateZ = Number(editPrintElementDom.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.designOpenrtionBtn = true
|
|
// editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.style.zIndex = editPrintElementData.printZIndex++
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.transform = {
|
|
scale:scale,
|
|
rotateZ:rotateZ?rotateZ:0,
|
|
}
|
|
let imgDomWH = editPrintElementDom.imgDom.getBoundingClientRect()
|
|
let left = Number(editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.style.left.replace(/px/g,''))
|
|
let top = Number(editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.style.top.replace(/px/g,''))
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.centers.left = imgDomWH.x+event.offsetX-left
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.centers.top = imgDomWH.y+event.offsetY-top
|
|
// document.addEventListener("mouseup", this.mouseup);
|
|
// document.addEventListener("mousemove", this.moveMousemove);
|
|
document.addEventListener('mousemove', mouseMove);
|
|
document.addEventListener('touchmove', touchmove);
|
|
document.addEventListener('mouseup', mouseup);
|
|
document.addEventListener('touchend', mouseup);
|
|
}
|
|
//设置尺寸
|
|
const itemSizeMousedown = (direction:any,event:any)=>{
|
|
editPrintElementData.direction = direction
|
|
editPrintElementDom.imgDom = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("modal_imgItem")[editPrintElementData.imgDomIndex]
|
|
let scale = Number(editPrintElementDom.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
|
|
let rotateZ = Number(editPrintElementDom.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.designOpenrtionBtn = true
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.transform = {
|
|
scale:scale,
|
|
rotateZ:rotateZ?rotateZ:0,
|
|
}
|
|
let imgDomWH = editPrintElementDom.imgDom.getBoundingClientRect()
|
|
let li = (document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("designOpenrtion_btn_top")[0] as any).offsetWidth/2
|
|
if(editPrintElementData.direction == 'right' || editPrintElementData.direction == 'bottom'){
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left = imgDomWH.x+event.offsetX-li
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top = imgDomWH.y+event.offsetY-li
|
|
}else{
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
|
|
}
|
|
|
|
// document.addEventListener("mouseup", this.sizeMouseup);
|
|
// document.addEventListener("mousemove", this.sizeMousemove);
|
|
document.addEventListener('mousemove', sizeMouseMove);
|
|
document.addEventListener('touchmove', sizeTouchmove);
|
|
document.addEventListener('mouseup', sizeMouseup);
|
|
document.addEventListener('touchend', sizeMouseup);
|
|
}
|
|
const mouseMove = (event:any)=>{
|
|
let e = getMousePosition(event,false)
|
|
mouseMoveOperation(e)
|
|
}
|
|
const touchmove = (event:any)=>{
|
|
let e = getMousePosition(event,true)
|
|
mouseMoveOperation(e)
|
|
}
|
|
//鼠标移动
|
|
const mouseMoveOperation = (e:any)=>{
|
|
let imgDomWH = editPrintElementDom.imgDom.getBoundingClientRect()
|
|
let parentNode:any = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("designOpenrtion_imgMask")[0]
|
|
parentNode = parentNode.getBoundingClientRect()
|
|
let x:any = (e.clientX - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left)+'px'
|
|
let y:any = ( e.clientY - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top)+'px'
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = x
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.top = y
|
|
if(editPrintElementData.stateOverallSingle != 'single'){
|
|
if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = parentNode.width - imgDomWH.width+'px'
|
|
}
|
|
if(x.replace(/px/g,'') <= 0){
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = 0+'px'
|
|
}
|
|
if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.top = parentNode.height - imgDomWH.height+'px'
|
|
}
|
|
if(y.replace(/px/g,'') <= 0){
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.top = 0+'px'
|
|
}
|
|
}
|
|
|
|
}
|
|
const sizeMouseMove = (event:any)=>{
|
|
let e = getMousePosition(event,false)
|
|
sizeMouseMoveOperation(e)
|
|
}
|
|
const sizeTouchmove = (event:any)=>{
|
|
let e = getMousePosition(event,true)
|
|
sizeMouseMoveOperation(e)
|
|
}
|
|
const sizeMouseMoveOperation = (e:any)=>{
|
|
let imgDomWH = editPrintElementDom.imgDom.getBoundingClientRect()
|
|
let parentNode =editPrintElementDom.imgDom.parentNode
|
|
let width = imgDomWH.width
|
|
let height = imgDomWH.height
|
|
let num = width/height
|
|
let num1 = height/width
|
|
let w,h
|
|
//判断移动四个边
|
|
if(editPrintElementData.direction == 'right'){
|
|
w = (e.clientX - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left)
|
|
h = (e.clientX - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left)*num
|
|
width = w+'px'
|
|
height = w*num1+'px'
|
|
}else if(editPrintElementData.direction == 'top'){
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.top = 'auto'
|
|
// editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = 'auto'
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.bottom = parentNode.offsetHeight -imgDomWH.height - editPrintElementDom.imgDom.offsetTop+'px'
|
|
w = (e.clientX - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left)*num
|
|
h = (editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top - e.clientY)
|
|
|
|
height = h+'px'
|
|
width = h*num+'px'
|
|
}else if(editPrintElementData.direction == 'bottom'){
|
|
h = (e.clientY - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top)
|
|
height = h+'px'
|
|
width = h*num+'px'
|
|
}else if(editPrintElementData.direction == 'left'){
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = 'auto'
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.right = parentNode.offsetWidth -imgDomWH.width - editPrintElementDom.imgDom.offsetLeft+'px'
|
|
w = (editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left - e.clientX)
|
|
width = w+'px'
|
|
height = w*num1+'px'
|
|
}
|
|
//判断尺寸是否到边
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.width = width
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.height = height
|
|
|
|
}
|
|
//鼠标抬起
|
|
const sizeMouseup = (e:any)=>{
|
|
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style={
|
|
right:'auto',
|
|
left:editPrintElementDom.imgDom.offsetLeft+'px',
|
|
bottom:'auto',
|
|
top:editPrintElementDom.imgDom.offsetTop+'px',
|
|
height:editPrintElementDom.imgDom.offsetHeight+'px',
|
|
width:editPrintElementDom.imgDom.offsetWidth+'px',
|
|
// zIndex:editPrintElementData.printZIndex
|
|
}
|
|
document.removeEventListener('mousemove',sizeMouseMove)
|
|
document.removeEventListener('touchmove',sizeTouchmove)
|
|
document.removeEventListener('mouseup',sizeMouseup)
|
|
document.removeEventListener('touchend',sizeMouseup)
|
|
}
|
|
const mouseup = (e:any)=>{
|
|
|
|
document.removeEventListener('mousemove',mouseMove)
|
|
document.removeEventListener('touchmove',touchmove)
|
|
document.removeEventListener('mouseup',mouseup)
|
|
document.removeEventListener('touchend',mouseup)
|
|
}
|
|
const clearOverall = ()=>{
|
|
editPrintElementData.printStyleList[props.type].overall = []
|
|
}
|
|
|
|
|
|
const designMousedown = (e:any,uniqueId:number,str:string)=>{
|
|
let item:any = collItemSize.elList.filter((item:any)=>item.uniqueId == uniqueId)[0]
|
|
if(!item)return
|
|
const pEl = editPrintElementData.printElementList;
|
|
item.el.style.zIndex = 2;
|
|
item.el.style.transition = 'all 0s';
|
|
let startX = e.clientX,
|
|
startY = e.clientY,
|
|
startSL = + pEl.scrollLeft,
|
|
left = item.el.offsetLeft,
|
|
top = item.el.offsetTop;
|
|
collItemSize.isMove = false;
|
|
const elWidth = item.el.offsetWidth;
|
|
|
|
|
|
var toMovePx = 1;
|
|
var toMoveType = "";//left right
|
|
let moveFun = (e:any) => {
|
|
collItemSize.isMove = true
|
|
let X = e.clientX - startX + (pEl.scrollLeft - startSL) + left;
|
|
let Y = 0;
|
|
if(X < 0) X = 0;
|
|
const maxLeft = parseInt(collItemSize.prentWidth) - elWidth - collItemSize.padding ;
|
|
if(X > maxLeft) X = maxLeft;
|
|
item.el.style.left = `${X}px`;
|
|
item.el.style.top = `${Y}px`;
|
|
|
|
const pElBCR = pEl.getBoundingClientRect();
|
|
var num = 2;
|
|
if(X < pEl.scrollLeft){
|
|
toMoveType = "left";
|
|
num = pElBCR.x-e.clientX;
|
|
}else if(X > pEl.scrollLeft + pEl.clientWidth - elWidth){
|
|
toMoveType = "right";
|
|
num = e.clientX - pElBCR.x - pElBCR.width;
|
|
}else{
|
|
toMoveType = "";
|
|
}
|
|
toMovePx = num / 20;
|
|
if(toMovePx < 2) toMovePx = 2;
|
|
|
|
|
|
reRange(item, X, Y,str);
|
|
};
|
|
|
|
const updataFun = ()=>{
|
|
if(toMoveType == "left"){
|
|
let left = pEl.scrollLeft - toMovePx;
|
|
if(left < 0)left = 0;
|
|
item.el.style.left = `${left}px`;
|
|
pEl.scrollLeft = left;
|
|
reRange(item, left, 0);
|
|
}else if(toMoveType == "right"){
|
|
let left = pEl.scrollLeft + toMovePx;
|
|
if(left > pEl.scrollWidth - pEl.clientWidth)left = pEl.scrollWidth - pEl.clientWidth;
|
|
const elLeft = left + pEl.clientWidth - elWidth - collItemSize.padding;
|
|
item.el.style.left = `${elLeft}px`;
|
|
pEl.scrollLeft = left;
|
|
reRange(item, elLeft, 0);
|
|
}else if(toMoveType == "stop"){
|
|
return;
|
|
}
|
|
requestAnimationFrame(updataFun);
|
|
}
|
|
updataFun();
|
|
|
|
let mouseUpFun = ()=>{
|
|
toMoveType = "stop"
|
|
document.removeEventListener('mousemove',mouseMove)
|
|
document.removeEventListener('touchmove',touchmove)
|
|
|
|
document.removeEventListener('mouseup',mouseUpFun)
|
|
document.removeEventListener('touchend',mouseUpFun)
|
|
item.el.style.zIndex = 1;
|
|
item.el.style.transition = 'top .5s';
|
|
moveItem();
|
|
sortDesignCollection()
|
|
}
|
|
let mouseMove = function(event:any){
|
|
let e = getMousePosition(event,false)
|
|
moveFun(e)
|
|
}
|
|
let touchmove = function(event:any){
|
|
let e = getMousePosition(event,true)
|
|
moveFun(e)
|
|
}
|
|
|
|
document.addEventListener('mousemove',mouseMove)
|
|
document.addEventListener('touchmove',touchmove)
|
|
|
|
document.addEventListener('mouseup',mouseUpFun)
|
|
document.addEventListener('touchend',mouseUpFun)
|
|
}
|
|
//排序 从大到小
|
|
const sortDesignCollection = ()=> {
|
|
if(editPrintElementData.stateOverallSingle == 'overall'){
|
|
let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
|
|
let tokenList = arr.map((item)=>({token:item.token,srot:item.pattern.style.zIndex}))
|
|
let tokens = tokenList.sort((a:any,b:any)=>a.srot - b.srot).map((item:any)=>item.token)
|
|
editPrintElementDom.pingpuRef.updataList([
|
|
{
|
|
action: ACTIONS.SORT,
|
|
tokens: tokens,
|
|
},
|
|
]);
|
|
}
|
|
}
|
|
const reRange = (item:any, x:number, y:number,str?:string)=>{
|
|
let elList:any = collItemSize.elList
|
|
let index = collItemSize.selectIndex
|
|
let width,height,num
|
|
num = collItemSize.num
|
|
width = collItemSize.itemStyle.width
|
|
height = collItemSize.itemStyle.height
|
|
|
|
let moveIndex = Math.round(x / (width + 10)) + Math.round(y / (height + 10)) * num;
|
|
moveIndex = elList.length - 1 - moveIndex
|
|
moveIndex = moveIndex < 0 ? 0 : moveIndex;
|
|
moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
|
|
if(moveIndex != index){
|
|
collItemSize.selectIndex = moveIndex;
|
|
let currentSort = item.sort;
|
|
for(let i = 0;i < elList.length;i++){
|
|
if(currentSort < moveIndex){
|
|
if(elList[i].sort > currentSort && elList[i].sort <= moveIndex){
|
|
elList[i].sort -= 1;
|
|
};
|
|
}else if(currentSort > moveIndex){
|
|
if(elList[i].sort < currentSort && elList[i].sort >= moveIndex){
|
|
elList[i].sort += 1;
|
|
};
|
|
}
|
|
};
|
|
elList[item.index].sort = moveIndex;
|
|
moveItem();
|
|
}
|
|
}
|
|
const moveItem = ()=>{
|
|
let value = collItemSize.num
|
|
for(let i = 0;i < collItemSize.elList.length;i++){
|
|
let height = parseInt(String((collItemSize.elList.length - 1 - collItemSize.elList[i].sort) / value)) * (collItemSize.itemStyle.width +collItemSize.padding) + 'px';
|
|
collItemSize.elList[i].el.style.left = height
|
|
}
|
|
setZIndex()
|
|
}
|
|
const navDelete = (item:any)=>{
|
|
let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
|
|
let index = arr.findIndex((arrItem:any)=>arrItem.uniqueId == item.uniqueId)
|
|
if(editPrintElementData.stateOverallSingle == 'overall'){
|
|
editPrintElementDom.pingpuRef.updataList([
|
|
{
|
|
action: ACTIONS.DELETE,
|
|
token: arr[index].token,
|
|
},
|
|
]);
|
|
}
|
|
arr.splice(index,1)
|
|
setItemPosition()
|
|
}
|
|
const setZIndex = ()=>{
|
|
let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
|
|
collItemSize.elList.forEach((elItem:any)=>{
|
|
let clothesIndex = arr.findIndex((item:any)=>item.uniqueId == elItem.uniqueId)
|
|
arr[clothesIndex].pattern.style.zIndex = elItem.sort
|
|
// let clothesId = editPrintElementData.designDetail.clothes[clothesIndex].id
|
|
// editPrintElementData.designDetail.clothes[clothesIndex].priority = elItem.sort
|
|
// let frontIndex = editPrintElementData.frontBack_.front.findIndex((item:any)=>item.id == clothesId)
|
|
// editPrintElementData.frontBack_.front[frontIndex].style.zIndex = elItem.sort + 10
|
|
})
|
|
}
|
|
const setItemPosition = async ()=>{
|
|
// editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].splice(editPrintElementData.imgDomIndex,1)
|
|
await nextTick()
|
|
let parent = editPrintElementData.printElementList.offsetWidth
|
|
let elArr = editPrintElementData.printElementList.querySelectorAll('.imgItem')
|
|
let value = collItemSize.num
|
|
const htmlFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
const remValue = 8 * htmlFontSize;
|
|
//子元素宽度 = (父容器总宽度 - (列数-1)*间隙) / 列数
|
|
collItemSize.itemStyle.width = remValue
|
|
collItemSize.elList = []
|
|
let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
|
|
|
|
arr.forEach((item,index) => {item.uniqueId = `${Date.now()}_${index}`});
|
|
|
|
const sortedArray = [...arr].sort((a, b) => a.priority - b.priority);
|
|
const sortMap = {} as any;
|
|
sortedArray.forEach((item, index) => {
|
|
sortMap[item.priority] = index ; // 1, 2, 3, 4...
|
|
});
|
|
for(let i = 0;i < elArr.length;i++){
|
|
collItemSize.elList.push({
|
|
el: elArr[i],
|
|
// sort: elArr.length - i -1,
|
|
sort: sortMap[arr[i].priority],
|
|
index: i,
|
|
uniqueId:arr[i]?.uniqueId || 99999,
|
|
});
|
|
}
|
|
collItemSize.prentWidth = (collItemSize.padding + remValue) * elArr.length + 'px'
|
|
moveItem()
|
|
}
|
|
const updateCanvas = (arr)=>{//画布操作更新对应的参数
|
|
let list = editPrintElementData.printStyleList[props.type].overall
|
|
arr.forEach((item)=>{
|
|
const obj = list.find((v) => v.token === item.token);
|
|
if (item.action === ACTIONS.UPDATE) {
|
|
if (item.action === ACTIONS.UPDATE) {
|
|
try {
|
|
const key = item.key;
|
|
const str = /^\[/.test(item.key)
|
|
? "obj" + key
|
|
: "obj." + key;
|
|
eval(`${str} = item.value`);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}
|
|
} else if (item.action === ACTIONS.SELECT) {
|
|
overallSetIndex(obj)
|
|
} else if(item.action === ACTIONS.DELETE){
|
|
navDelete(obj)
|
|
}
|
|
})
|
|
}
|
|
const inputFillAngle = (angle:any)=>{
|
|
let arr = editPrintElementData.printStyleList[props.type].overall
|
|
arr[editPrintElementData.imgDomIndex].angle = angle
|
|
editPrintElementDom.pingpuRef.updataList([
|
|
{
|
|
action: ACTIONS.UPDATE,
|
|
token: arr[editPrintElementData.imgDomIndex].token,
|
|
key: 'angle',
|
|
value: angle,
|
|
},
|
|
]);
|
|
}
|
|
const inputFillOffset = (offset:any)=>{
|
|
let arr = editPrintElementData.printStyleList[props.type].overall
|
|
arr[editPrintElementData.imgDomIndex].location = [offset.left * offset.size[0] / 100,offset.top * offset.size[1] / 100]
|
|
editPrintElementDom.pingpuRef.updataList([
|
|
{
|
|
action: ACTIONS.UPDATE,
|
|
token: arr[editPrintElementData.imgDomIndex].token,
|
|
key: 'location[0]',
|
|
value: offset.left,
|
|
},
|
|
]);
|
|
editPrintElementDom.pingpuRef.updataList([
|
|
{
|
|
action: ACTIONS.UPDATE,
|
|
token: arr[editPrintElementData.imgDomIndex].token,
|
|
key: 'location[1]',
|
|
value: offset.top,
|
|
},
|
|
]);
|
|
// editPrintElementData.overallDetail.offsetX = offset.left
|
|
// editPrintElementData.overallDetail.offsetY = offset.top
|
|
}
|
|
const inputFillScale = (scale:any)=>{
|
|
let arr = editPrintElementData.printStyleList[props.type].overall
|
|
console.log(arr,scale,editPrintElementData.imgDomIndex)
|
|
arr[editPrintElementData.imgDomIndex].scale = [scale,scale]
|
|
editPrintElementDom.pingpuRef.updataList([
|
|
{
|
|
action: ACTIONS.UPDATE,
|
|
token: arr[editPrintElementData.imgDomIndex].token,
|
|
key: 'scale[0]',
|
|
value: scale,
|
|
},
|
|
]);
|
|
}
|
|
const inputFill_Gap = (x:any,y:any)=>{
|
|
let arr = editPrintElementData.printStyleList[props.type].overall
|
|
arr[editPrintElementData.imgDomIndex].object.gapX = x
|
|
arr[editPrintElementData.imgDomIndex].object.gapY = y
|
|
editPrintElementDom.pingpuRef.updataList([
|
|
{
|
|
action: ACTIONS.UPDATE,
|
|
token: arr[editPrintElementData.imgDomIndex].token,
|
|
key: "object.gapX",
|
|
value: x,
|
|
},
|
|
]);
|
|
editPrintElementDom.pingpuRef.updataList([
|
|
{
|
|
action: ACTIONS.UPDATE,
|
|
token: arr[editPrintElementData.imgDomIndex].token,
|
|
key: "object.gapY",
|
|
value: y,
|
|
},
|
|
]);
|
|
}
|
|
const overallSetIndex = (item)=>{
|
|
if(editPrintElementData.stateOverallSingle !== 'overall')return
|
|
let arr = editPrintElementData.printStyleList[props.type].overall
|
|
let index = arr.findIndex((arrItem:any)=>arrItem.token == item.token)
|
|
editPrintElementData.imgDomIndex = index
|
|
editPrintElementDom.pingpuRef.updataList([
|
|
{
|
|
action: ACTIONS.SELECT,
|
|
token: arr[index].token,
|
|
},
|
|
]);
|
|
}
|
|
onMounted(()=>{
|
|
if(props.type == 'element'){
|
|
editPrintElementData.stateOverallSingle = 'single'
|
|
}
|
|
})
|
|
onBeforeUnmount(()=>{
|
|
previewDetailPrintData()
|
|
})
|
|
return{
|
|
t,
|
|
getMousePosition,
|
|
...toRefs(editPrintElementDom),
|
|
...toRefs(editPrintElementData),
|
|
...toRefs(collItemSize),
|
|
setOveralSingle,
|
|
formatter,
|
|
itemMoveMousedown,
|
|
itemSizeMousedown,
|
|
deletePrint,
|
|
previewDetailPrintData,
|
|
clearOverall,
|
|
designMousedown,
|
|
navDelete,
|
|
updateCanvas,
|
|
inputFillAngle,
|
|
inputFillOffset,
|
|
inputFillScale,
|
|
inputFill_Gap,
|
|
overallSetIndex,
|
|
}
|
|
},
|
|
directives:{
|
|
//操作旋转
|
|
rotote:{
|
|
mounted(el,value:any){
|
|
let mousedown = function(event:any){
|
|
let e = getMousePosition(event,false)
|
|
mouseDownOperation(e)
|
|
}
|
|
|
|
let touchstart = function(event:any){
|
|
let e = getMousePosition(event,true)
|
|
mouseDownOperation(e)
|
|
}
|
|
let mouseDownOperation = (e:any) => {
|
|
let elParent:any = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
|
|
let mouse = true;
|
|
let angle = 0
|
|
let num = 1
|
|
let x = 0
|
|
let y = 0
|
|
num = value.instance.printStyleList[value.value[2]][value.instance.stateOverallSingle][value.instance.imgDomIndex].pattern.transform.scale
|
|
angle = value.instance.printStyleList[value.value[2]][value.instance.stateOverallSingle][value.instance.imgDomIndex].pattern.transform.rotateZ
|
|
// 添加鼠标按下事件监听器
|
|
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
|
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
|
|
// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
|
mouse = true;
|
|
var info = el.getBoundingClientRect();
|
|
let eX = info.x + info.width / 2;
|
|
let eY = info.y + info.height / 2;
|
|
let mouseMove = function(event:any){
|
|
let e = getMousePosition(event,false)
|
|
mouseMoveOperation(e)
|
|
}
|
|
let touchmove = function(event:any){
|
|
let e = getMousePosition(event,true)
|
|
mouseMoveOperation(e)
|
|
}
|
|
let mouseMoveOperation = (e:any) => {
|
|
if (mouse) {
|
|
let X = eX
|
|
let Y = eY
|
|
let x = e.clientX - X
|
|
let y = Y - e.clientY
|
|
angle = Math.atan2(x,y)*(180 / Math.PI)
|
|
if(elParent){
|
|
elParent.firstElementChild.style.transform = "rotateZ("+ angle + "deg)"
|
|
}
|
|
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
|
}
|
|
}
|
|
// 添加鼠标松开事件监听器
|
|
let mouseup = () => {
|
|
value.instance.printStyleList[value.value[2] ][value.instance.stateOverallSingle][value.instance.imgDomIndex].pattern.transform.rotateZ = angle
|
|
mouse = false;
|
|
// document.removeEventListener('mouseup',mouseup)
|
|
// document.removeEventListener('mousemove',mousemove)
|
|
document.removeEventListener('mousemove',mouseMove)
|
|
document.removeEventListener('touchmove',touchmove)
|
|
document.removeEventListener('mouseup',mouseup)
|
|
document.removeEventListener('touchend',mouseup)
|
|
}
|
|
// document.addEventListener('mouseup', mouseup);
|
|
document.addEventListener('mousemove', mouseMove);
|
|
document.addEventListener('touchmove', touchmove);
|
|
document.addEventListener('mouseup', mouseup);
|
|
document.addEventListener('touchend', mouseup);
|
|
}
|
|
el.addEventListener('mousedown',mousedown)
|
|
el.addEventListener('touchstart',touchstart)
|
|
}
|
|
|
|
},
|
|
},
|
|
provide() {
|
|
return {
|
|
}
|
|
},
|
|
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.editPrintElement{
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
flex-direction: column;
|
|
> .printOverallBtn{
|
|
display: flex;
|
|
flex-direction: column;
|
|
> .overallSlogin{
|
|
align-items: center;
|
|
display: flex;
|
|
// margin-top: 1.4rem;
|
|
margin-bottom: 2.2rem;
|
|
> label{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 1.6rem;
|
|
margin-right: 2.4rem;
|
|
&:last-child{
|
|
margin-right: 0rem;
|
|
}
|
|
> input{
|
|
margin-right: 1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.habit_System_Designer {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 1.8rem;
|
|
margin-right: .8rem;
|
|
|
|
.ant-slider-track,
|
|
.ant-slider-rail {
|
|
background-color: #e1e1e1;
|
|
border-radius: calc(0.5rem*1.2);
|
|
}
|
|
:deep(.system_silder){
|
|
width: 17rem;
|
|
}
|
|
.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
|
|
.ant-slider-handle {
|
|
background-color: #2d2e76 !important;
|
|
border: none !important;
|
|
}
|
|
.ant-slider-handle:hover{
|
|
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
|
|
}
|
|
.habit_System_Designer_text{
|
|
font-size: 1.8rem;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
margin-right: 3rem;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
> .printElementListBorder{
|
|
&.single{
|
|
padding: 2rem 4rem;
|
|
width: 100%;
|
|
border-radius: 1.5rem;
|
|
border: .05rem solid #000;
|
|
}
|
|
> .printElementList{
|
|
width: 100%;
|
|
height: 10rem;
|
|
position: relative;
|
|
overflow-x: auto;
|
|
|
|
.itemList{
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
.imgItem{
|
|
width: 8rem;
|
|
height: 8rem;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
&.active{
|
|
border: 2.5px solid #B4B4B4;
|
|
}
|
|
> img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
> i{
|
|
position: absolute;
|
|
right: 1rem;
|
|
top: 1rem;
|
|
color: #fff;
|
|
text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> .editPrintElementBox{
|
|
flex: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
margin: 2rem 0;
|
|
width: 80%;
|
|
align-self: center;
|
|
> .mark_loading{
|
|
position: absolute;
|
|
}
|
|
> .designOpenrtion_centent{
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
justify-content: space-between;
|
|
user-select:none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
transform: translate(-50%,-50%);
|
|
display: flex;
|
|
justify-content: center;
|
|
// width: 100%;
|
|
// max-height: 70%;
|
|
width: max-content;
|
|
&.active{
|
|
flex-direction: row;
|
|
}
|
|
.designOpenrtion_imgMask{
|
|
width: auto;
|
|
height: auto;
|
|
min-width: 60%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
// max-height: 80%;
|
|
position: relative;
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
>img{
|
|
z-index: 2;
|
|
position: relative;
|
|
// height: 100%;
|
|
max-width: 100%;
|
|
// width: 100%;
|
|
&.designOpenrtion_sketchMask{
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.designOpenrtion_sketch_mask{
|
|
z-index: 2;
|
|
// z-index: 3;
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
}
|
|
>div{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
}
|
|
}
|
|
.designOpenrtion_print{
|
|
z-index: 3;
|
|
.modal_imgItem{
|
|
position: absolute;
|
|
top: 0;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
float: left;
|
|
user-select:none;
|
|
-webkit-user-drag: none;
|
|
}
|
|
}
|
|
}
|
|
.designOpenrtion_pingpu{
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
}
|
|
.designOpenrtion_btn{
|
|
z-index: 99;
|
|
>div{
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 2px solid rgb(20, 188, 255);
|
|
position: absolute;
|
|
}
|
|
ul{
|
|
list-style: none;
|
|
// width: 100%;
|
|
// height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
box-sizing: border-box;
|
|
border: 2px solid rgb(20, 188, 255);
|
|
padding: 0;
|
|
-webkit-user-drag: none;
|
|
user-select:none;
|
|
opacity: 0;
|
|
margin: 0;
|
|
|
|
&.designOpenrtion_Mouoverall{
|
|
opacity: 1;
|
|
border: none;
|
|
width: calc(1.4rem*1.2);
|
|
height: calc(1.4rem*1.2);
|
|
z-index: 2;
|
|
i{
|
|
display: flex;
|
|
color: #14bcff;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
.animtion1{
|
|
animation: anim 4s 2s linear infinite;
|
|
// animation-delay: .5;
|
|
}
|
|
.animtion2{
|
|
animation: anim 4s linear infinite;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
@keyframes anim{
|
|
0% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(3);
|
|
}
|
|
}
|
|
|
|
}
|
|
li{
|
|
cursor: pointer;
|
|
// border-radius: 50%;
|
|
width: calc(2rem*1.2);
|
|
height: calc(2rem*1.2);
|
|
background-color: rgb(20, 188, 255);
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
&.active{
|
|
opacity: 1;
|
|
li{
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
.designOpenrtion_btn_top,.designOpenrtion_btn_bottom{
|
|
left: 50%;
|
|
transform: translate(-50%,-50%) ;
|
|
cursor: n-resize;
|
|
}
|
|
.designOpenrtion_btn_top{
|
|
top: 0;
|
|
}
|
|
.designOpenrtion_btn_bottom{
|
|
top: 100%;
|
|
}
|
|
.designOpenrtion_btn_left,.designOpenrtion_btn_right{
|
|
top: 50%;
|
|
transform: translate(-50%,-50%) ;
|
|
cursor: e-resize;
|
|
}
|
|
.designOpenrtion_btn_left{
|
|
left: 0;
|
|
}
|
|
.designOpenrtion_btn_right{
|
|
left: 100%;
|
|
}
|
|
.designOpenrtion_rotote{
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.designOpenrtion_delete{
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 2.5rem;
|
|
background: none;
|
|
transform: translate(100%, -100%);
|
|
height: 2.5rem;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.designOpenrtion_rotote::after{
|
|
position: absolute;
|
|
content: "";
|
|
background-color: #14bcff;
|
|
width: calc(.2rem*1.2);
|
|
height: calc(3rem*1.2);
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translateX(-50%);
|
|
}
|
|
.designOpenrtion_rotote::before{
|
|
position: absolute;
|
|
content: "";
|
|
background-color: #14bcff;
|
|
top: calc(50% - 3rem*1.2);
|
|
left: 50%;
|
|
transform: translate(-50%,-50%) ;
|
|
width: calc(1.5rem*1.2);
|
|
height: calc(1.5rem*1.2);
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |