369 lines
11 KiB
TypeScript
369 lines
11 KiB
TypeScript
import {Module} from 'vuex'
|
||
import {RootState} from '../index'
|
||
import { forEach } from 'jszip'
|
||
import { transform } from 'typescript'
|
||
|
||
interface DesignDetail{
|
||
designDetail:any,
|
||
designPreviewData:any,
|
||
frontBack:any,
|
||
selectDetail:any,
|
||
printZIndex:any,
|
||
//值都有 sketch，color,print,element
|
||
currentDetailType:any,
|
||
currentPrintElement:any,
|
||
canvasKey:any,
|
||
}
|
||
|
||
const DesignDetail : Module<DesignDetail,RootState> = {
|
||
namespaced: true,
|
||
state:{
|
||
designDetail:null,
|
||
designPreviewData:{},
|
||
frontBack:{
|
||
front:[],
|
||
back:[],
|
||
body:{},
|
||
},
|
||
selectDetail:null,
|
||
printZIndex:-1,
|
||
currentDetailType:'',
|
||
currentPrintElement:null,
|
||
canvasKey:0,
|
||
},
|
||
mutations:{
|
||
clearDetailData(state){
|
||
state.designDetail = null
|
||
state.designPreviewData = {}
|
||
state.frontBack = {
|
||
front:[],
|
||
back:[],
|
||
body:{},
|
||
}
|
||
state.selectDetail = null
|
||
state.printZIndex = -1
|
||
state.currentDetailType = ''
|
||
state.currentPrintElement = null
|
||
state.canvasKey = 0
|
||
},
|
||
setDesignDetail(state,data){
|
||
if(data.others.length > 0 && data.others[0].type == "Body"){
|
||
state.frontBack.body = data.others[0]
|
||
}
|
||
let front:any = []
|
||
let back:any = []
|
||
state.designDetail = data
|
||
// let printZIndex =
|
||
data.clothes.forEach((v:any,index:any)=>{
|
||
// if(!v?.partialDesignDTO){
|
||
// }
|
||
function isJSONString(str) {
|
||
try {
|
||
JSON.parse(str);
|
||
return true; // 解析成功，是有效的JSON字符串
|
||
} catch (e) {
|
||
return false; // 解析失败，不是有效的JSON字符串
|
||
}
|
||
}
|
||
v?.printObject?.prints?.forEach((item:any) => {
|
||
if(isJSONString(item.object)){
|
||
item.object = JSON.parse(item.object)
|
||
}
|
||
});
|
||
v?.trims?.prints?.forEach((item:any) => {
|
||
if(isJSONString(item.object)){
|
||
item.object = JSON.parse(item.object)
|
||
}
|
||
});
|
||
for (let i = v.layersObject.length-1; i >= 0; i--) {
|
||
v.layersObject[i].style = {
|
||
top:v.layersObject[i].position?.[0],
|
||
left:v.layersObject[i].position?.[1],
|
||
width:v.layersObject[i].imageSize?.[0],
|
||
height:v.layersObject[i].imageSize?.[1],
|
||
transform:`rotate(${v.layersObject[i]?.rotate || 0}deg) scaleX(${v.layersObject[i].transpose?.[0] || 1}) scaleY(${v.layersObject[i].transpose?.[1] || 1})`,
|
||
}
|
||
v.layersObject[i].centers={
|
||
left:0,
|
||
top:0,
|
||
}
|
||
v.maskMinioUrl = v.layersObject?.[0]?.maskMinioUrl
|
||
v.maskUrl = v.layersObject?.[0]?.maskUrl
|
||
v.layersObject[i].designOpenrtionBtn = false
|
||
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
|
||
front[index] = v.layersObject[i]
|
||
front[index].style.zIndex = v.priority + 10
|
||
front[index].id = v.id
|
||
}else{
|
||
back[index] = v.layersObject[i]
|
||
back[index].style.zIndex = v.priority
|
||
back[index].id = v.id
|
||
// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
|
||
}
|
||
if(state.printZIndex < v.priority){
|
||
state.printZIndex = v.priority
|
||
}
|
||
}
|
||
})
|
||
state.frontBack.front = front
|
||
state.frontBack.back = back
|
||
},
|
||
updataDetailItem(state,data){
|
||
state.designDetail.clothes.forEach((item:any) => {
|
||
if(item.id == state.selectDetail.id){
|
||
for (const key in data) {
|
||
item[key] = data[key]
|
||
}
|
||
}
|
||
});
|
||
},
|
||
addDesign(state,data){
|
||
|
||
},
|
||
setNewDetail(state,value){
|
||
// state.designDetail.clothes.forEach((item:any) => {
|
||
// if(item.id == state.selectDetail.id){
|
||
// }
|
||
// });
|
||
let select = state.selectDetail
|
||
if(value.id){
|
||
select = state.designDetail.clothes.find((item:any) => item.id == value.id)
|
||
}
|
||
let {data} = value
|
||
let str = value.str || state.currentDetailType
|
||
if(!select)return
|
||
if(!select.newDetail){
|
||
select.newDetail = {}
|
||
}
|
||
if(str == 'sketch'){
|
||
select.newDetail[str] = data
|
||
}else if(str == 'color'){
|
||
select.newDetail[str] = data
|
||
}else if(str == 'print'){
|
||
select.newDetail[str] = data
|
||
}else if(str == 'element'){
|
||
select.newDetail[str] = data
|
||
}else if(str == 'models'){
|
||
// if(!state.designDetail.newModel)state.designDetail.newModel={}
|
||
state.designDetail.newModel = JSON.parse(JSON.stringify(data))
|
||
}else{
|
||
if(!select.newDetail[str])select.newDetail[str] = []
|
||
const foundObjects = select.newDetail[str].filter((item:any) => item.id === data.id);
|
||
if(foundObjects.length == 0){
|
||
select.newDetail[str].push(data)
|
||
}
|
||
}
|
||
},
|
||
setCurrentPrintElement(state,data){//临时存放印花和元素点击用来监听在衣服上添加元素
|
||
state.currentPrintElement = data?.resData || data
|
||
},
|
||
setCurrentDetailType(state,data){
|
||
if(state.selectDetail && state.selectDetail.id){
|
||
state.currentDetailType = data
|
||
}else if(state.selectDetail && data == 'sketch'){
|
||
state.currentDetailType = data
|
||
}
|
||
},
|
||
setFrontBack(state,data){
|
||
state.frontBack = data
|
||
},
|
||
setDesignColthes(state,data){
|
||
if(!state.currentDetailType)state.currentDetailType = 'sketch'
|
||
//切换选择
|
||
// state.currentDetailType = ''
|
||
// state.designDetail.clothes[data.index] = data.clothes
|
||
state.designDetail.clothes.forEach((item:any) => {
|
||
if(item.id == data){
|
||
state.selectDetail = item
|
||
state.frontBack.front.forEach((v:any,index:any)=>{
|
||
v.designOpenrtionBtn = false
|
||
if(v.id == data){
|
||
v.designOpenrtionBtn = true
|
||
}
|
||
})
|
||
}
|
||
});
|
||
},
|
||
addDesignColthes(state){
|
||
let data = {
|
||
changed:null,
|
||
color:{rgba:{
|
||
r:255,
|
||
g:255,
|
||
b:255,
|
||
}},
|
||
designType:null,
|
||
gradient:null,
|
||
id:null,
|
||
partialDesign:{
|
||
layers:[],
|
||
partialDesignPath:'',
|
||
partialDesignMinioPath:'',
|
||
partialDesignBase64:''
|
||
},
|
||
layersObject:null,
|
||
newDetail:{},
|
||
level1Type:'Sketchboard',
|
||
minIOPath:null,
|
||
path:null,
|
||
printObject:null,
|
||
trims:null,
|
||
type:null,
|
||
transpose:[1,1],
|
||
rotate:0,
|
||
}
|
||
if(!state.currentDetailType)state.currentDetailType = 'sketch'
|
||
state.designDetail.clothes.forEach((item:any) => {
|
||
state.frontBack.front.forEach((v:any,index:any)=>{
|
||
v.designOpenrtionBtn = false
|
||
})
|
||
});
|
||
state.selectDetail = data
|
||
},
|
||
changeCanvasKey(state){
|
||
state.canvasKey+=1
|
||
},
|
||
canvasPreviewUpdata(state,{type,callBack}){
|
||
// state.selectDetail.newDetail?.print?.forEach((item:any) => {
|
||
// state.selectDetail.printObject.prints = []
|
||
// state.selectDetail.printObject.push({
|
||
// })
|
||
// });
|
||
if((type == 'print' || type == 'all') && state.selectDetail.newDetail?.print)state.selectDetail.printObject.prints = state.selectDetail.newDetail?.print
|
||
if((type == 'color' || type == 'all') && state.selectDetail.newDetail?.color?.rgba)state.selectDetail.color = {
|
||
...state.selectDetail.newDetail?.color,
|
||
...state.selectDetail.newDetail?.color?.rgba,
|
||
...state.selectDetail.newDetail?.color?.hsv,
|
||
}
|
||
if((type == 'element' || type == 'all') && state.selectDetail.newDetail?.element)state.selectDetail.trims.prints = state.selectDetail.newDetail?.element
|
||
if(type == 'all'){
|
||
state.selectDetail.newDetail = {}
|
||
}else{
|
||
state.selectDetail.newDetail[type] = null
|
||
}
|
||
callBack()
|
||
},
|
||
setPraeview(state,value){//preview
|
||
let data = value?.rv || value
|
||
let currentType = value?.currentType
|
||
if(state.designDetail.oldModel?.url)state.frontBack.body.path = state.designDetail.oldModel.url
|
||
if(value?.rv?.currentFullBodyView)state.designDetail.currentFullBodyView = value.rv.currentFullBodyView
|
||
for (let j = 0; j < data.clothes.length; j++) {
|
||
const item = data.clothes[j];
|
||
if(!item.id)continue
|
||
let id_:any
|
||
if(state.currentDetailType != 'models'){
|
||
if(data.clothes.length > 2){
|
||
//缺少字段临时添加
|
||
id_ = item.id || state.selectDetail.newDetail?.sketch?.id
|
||
}else{
|
||
id_ = state.selectDetail.id || state.selectDetail.newDetail?.sketch?.id
|
||
}
|
||
}else{
|
||
id_ = item.id
|
||
}
|
||
if(state.frontBack?.body?.path){
|
||
let scale:any = value.scale
|
||
if(state.selectDetail?.newDetail?.sketch?.id && !state.selectDetail.id){
|
||
state.frontBack.front.push({id:state.selectDetail.newDetail?.sketch?.id})
|
||
state.frontBack.back.push({id:state.selectDetail.newDetail?.sketch?.id})
|
||
}
|
||
state.frontBack.front.forEach((v:any,index:any)=>{
|
||
if(v.id == id_){
|
||
for (let i = item.layersObject.length-1; i >= 0; i--) {
|
||
item.layersObject[i].style = {
|
||
top:item.layersObject[i].position?.[0] * scale + 'px',
|
||
left:item.layersObject[i].position?.[1] * scale + 'px',
|
||
width:item.layersObject[i].imageSize?.[0] * scale + 'px',
|
||
height:item.layersObject[i].imageSize?.[1] * scale + 'px',
|
||
zIndex:v?.style?.zIndex?v.style.zIndex:v.priority?v.priority:state.frontBack.front.length,
|
||
transform:`rotate(${item.layersObject?.[i]?.rotate || 0}deg) scaleX(${item.layersObject[i].transpose?.[0] || 1}) scaleY(${item.layersObject[i].transpose?.[1] || 1})`,
|
||
}
|
||
item.layersObject[i].centers={
|
||
left:0,
|
||
top:0,
|
||
}
|
||
item.layersObject[i].designOpenrtionBtn = false
|
||
if(item.layersObject[i].imageCategory.indexOf("back") == -1){
|
||
state.frontBack.front[index] = item.layersObject[i]
|
||
// state.frontBack.front[index].style.zIndex = v.priority
|
||
state.frontBack.front[index].id = item.id
|
||
}else{
|
||
state.frontBack.back[index] = item.layersObject[i]
|
||
// state.frontBack.back[index].style.zIndex = v.priority
|
||
state.frontBack.back[index].id = item.id
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
let uploadDetail = (detailItem)=>{
|
||
detailItem.change = item.change
|
||
if(detailItem?.newDetail?.color && currentType != 'color'){
|
||
detailItem.color = detailItem?.newDetail?.color
|
||
detailItem.newDetail.color = null
|
||
}
|
||
if(item.partialDesign){
|
||
detailItem.partialDesign = item.partialDesign
|
||
}
|
||
detailItem.designType = item.designType
|
||
detailItem.canvasId = item.canvasId
|
||
detailItem.layersObject = item.layersObject
|
||
detailItem.path = item.path
|
||
detailItem.minIOPath = item.minIOPath
|
||
detailItem.scale = [1,1]
|
||
detailItem.offset = [0,0]
|
||
detailItem.transpose = item.transpose || [1,1]
|
||
detailItem.rotate = item.rotate || 0
|
||
detailItem.printObject = item.printObject
|
||
detailItem.trims = item.trims
|
||
detailItem.type = item.type
|
||
detailItem.maskMinioUrl = item.layersObject?.[0]?.maskMinioUrl
|
||
detailItem.maskUrl = item.layersObject?.[0]?.maskUrl
|
||
detailItem.color = {
|
||
...item.color,
|
||
rgba:{
|
||
r:item.color?.r,
|
||
g:item.color?.g,
|
||
b:item.color?.b,
|
||
},
|
||
gradient:item.gradient,
|
||
}
|
||
if(detailItem.newDetail?.sketch?.id && !detailItem.id){
|
||
state.designDetail.clothes.push(detailItem)
|
||
}
|
||
detailItem.id = item.id
|
||
if(currentType)if(detailItem.newDetail?.[currentType] && currentType != 'color')delete detailItem.newDetail[currentType]
|
||
}
|
||
if(data.clothes.length > 2){
|
||
state.designDetail.clothes.forEach((detailItem:any) => {
|
||
if(detailItem.id == id_){
|
||
uploadDetail(detailItem)
|
||
}
|
||
});
|
||
}else{
|
||
uploadDetail(state.selectDetail)
|
||
}
|
||
}
|
||
if(value.fun)value.fun()
|
||
|
||
},
|
||
|
||
// setDesignItemOthers(state,data){
|
||
// state.designDetail.others[data.index] = data.others
|
||
// },
|
||
},
|
||
actions:{
|
||
async setSubmit({ commit },str) {
|
||
|
||
// setTimeout(() => {
|
||
// const message = 'Hello from Vuex';
|
||
// commit('setMessage', message); // 更新状态
|
||
// resolve(message); // 返回数据
|
||
// }, 1000);
|
||
},
|
||
|
||
}
|
||
}
|
||
|
||
export default DesignDetail |