Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite
This commit is contained in:
@@ -61,12 +61,10 @@
|
|||||||
<model
|
<model
|
||||||
ref="model"
|
ref="model"
|
||||||
:key="positionKey"
|
:key="positionKey"
|
||||||
@canvasReload="canvasReload"
|
|
||||||
@detailEdit="detailEdit"
|
@detailEdit="detailEdit"
|
||||||
@addSketch="()=>isEditPattern.value = ''"
|
@addSketch="()=>isEditPattern.value = ''"
|
||||||
@revocation="revocation"
|
@revocation="revocation"
|
||||||
@oppositeRevocation="oppositeRevocation"
|
@oppositeRevocation="oppositeRevocation"
|
||||||
@modelOnLoad="modelOnLoad"
|
|
||||||
@sketchSysToLibrary="sketchSysToLibrary"
|
@sketchSysToLibrary="sketchSysToLibrary"
|
||||||
></model>
|
></model>
|
||||||
<div class="btn">
|
<div class="btn">
|
||||||
@@ -171,12 +169,11 @@ export default defineComponent({
|
|||||||
fun:null,
|
fun:null,
|
||||||
},
|
},
|
||||||
positionKey:0,
|
positionKey:0,
|
||||||
isUndividedLayerWithSinglePrint:false,
|
|
||||||
detailLeftColorKey:0,
|
detailLeftColorKey:0,
|
||||||
})
|
})
|
||||||
watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
|
watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
|
||||||
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
|
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
|
||||||
if(newValue?.undividedLayer)newValue.undividedLayer_ = newValue.undividedLayer
|
detailData.canvasKey += 1
|
||||||
// privewDetail(oldValue)
|
// privewDetail(oldValue)
|
||||||
},{immediate: true})
|
},{immediate: true})
|
||||||
|
|
||||||
@@ -198,6 +195,11 @@ export default defineComponent({
|
|||||||
detailData.loadingShow = true
|
detailData.loadingShow = true
|
||||||
Https.axiosGet(url).then(
|
Https.axiosGet(url).then(
|
||||||
async (rv: any) => {
|
async (rv: any) => {
|
||||||
|
//清除画布JSON数据
|
||||||
|
sessionStorage.removeItem('canvasList');
|
||||||
|
sessionStorage.removeItem('revocation');
|
||||||
|
sessionStorage.removeItem('oppositeRevocation');
|
||||||
|
sessionStorage.setItem('key', 'value');
|
||||||
store.commit('DesignDetail/setDesignDetail',rv)
|
store.commit('DesignDetail/setDesignDetail',rv)
|
||||||
rv.clothes.forEach((item:any)=>{
|
rv.clothes.forEach((item:any)=>{
|
||||||
let a
|
let a
|
||||||
@@ -231,25 +233,17 @@ export default defineComponent({
|
|||||||
element.designType = 'Library'
|
element.designType = 'Library'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
if(!item.layersObject[0].undividedLayerWithSinglePrint){
|
|
||||||
detailData.isUndividedLayerWithSinglePrint = true
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
detailData.singleOveral.value = rv.singleOverall
|
detailData.singleOveral.value = rv.singleOverall
|
||||||
detailData.designDetailShow = true
|
detailData.designDetailShow = true
|
||||||
// this.deleteShow = false
|
// this.deleteShow = false
|
||||||
initialize()
|
|
||||||
setRevocation()
|
setRevocation()
|
||||||
if(rv.singleOverall == "single"){
|
if(rv.singleOverall == "single"){
|
||||||
store.commit('DesignDetail/setDesignColthes',rv.clothes[0].id)
|
store.commit('DesignDetail/setDesignColthes',rv.clothes[0].id)
|
||||||
modelOnLoad()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if(detailData.isUndividedLayerWithSinglePrint){
|
|
||||||
}else{
|
|
||||||
detailData.loadingShow = false
|
detailData.loadingShow = false
|
||||||
}
|
|
||||||
resolve(rv)
|
resolve(rv)
|
||||||
}
|
}
|
||||||
).catch(rv=>{
|
).catch(rv=>{
|
||||||
@@ -259,12 +253,6 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
const initialize = ()=>{//design后初始化
|
|
||||||
|
|
||||||
|
|
||||||
sessionStorage.removeItem('oppositeRevocation')
|
|
||||||
sessionStorage.removeItem('revocation')
|
|
||||||
}
|
|
||||||
//撤回
|
//撤回
|
||||||
const setRevocation = ()=>{//设置撤销
|
const setRevocation = ()=>{//设置撤销
|
||||||
let itemDetail = JSON.parse(JSON.stringify(detailData.designDetail))
|
let itemDetail = JSON.parse(JSON.stringify(detailData.designDetail))
|
||||||
@@ -331,7 +319,7 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
for(let i = 0;i<list.length;i++){
|
for(let i = 0;i<list.length;i++){
|
||||||
detailData.selectDetail
|
detailData.selectDetail
|
||||||
let {scale,offset,priority,transpose,rotate,maskUrl,maskMinioUrl} = await (detailDom.model as any).getSubmitData(list[i],detailData.isUndividedLayerWithSinglePrint)
|
let {scale,offset,priority,transpose,rotate,maskUrl,maskMinioUrl} = await (detailDom.model as any).getSubmitData(list[i])
|
||||||
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
|
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
|
||||||
let gradient = null
|
let gradient = null
|
||||||
let newData = list[i]?.newDetail?.[detailData.currentDetailType]
|
let newData = list[i]?.newDetail?.[detailData.currentDetailType]
|
||||||
@@ -354,6 +342,32 @@ export default defineComponent({
|
|||||||
detailData.selectDetail.maskUrl = ''
|
detailData.selectDetail.maskUrl = ''
|
||||||
detailData.selectDetail.maskMinioUrl = ''
|
detailData.selectDetail.maskMinioUrl = ''
|
||||||
}
|
}
|
||||||
|
function isNetworkPath(str) {
|
||||||
|
if (typeof str !== 'string' || str.trim() === '') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const urlPatterns = [
|
||||||
|
/^https?:\/\//i, // http:// 或 https://
|
||||||
|
/^ftp:\/\//i, // ftp://
|
||||||
|
/^ws:\/\//i, // ws://
|
||||||
|
/^wss:\/\//i, // wss://
|
||||||
|
/^\/\//, // 协议相对路径 //example.com
|
||||||
|
/^data:/i, // data:image/png;base64,...(这是Base64,不是网络路径)
|
||||||
|
];
|
||||||
|
// 排除data:URL(这实际上是Base64)
|
||||||
|
if (str.startsWith('data:')) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return urlPatterns.some(pattern => pattern.test(str));
|
||||||
|
}
|
||||||
|
const printObjectToJSON = (list:any)=>{
|
||||||
|
if(list?.length > 0){
|
||||||
|
list.forEach((item:any)=>{
|
||||||
|
if(item.object)item.object = JSON.stringify(item.object)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
let data:any = {
|
let data:any = {
|
||||||
changed:false,
|
changed:false,
|
||||||
color,
|
color,
|
||||||
@@ -361,7 +375,7 @@ export default defineComponent({
|
|||||||
id:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.id:list[i].id,
|
id:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.id:list[i].id,
|
||||||
maskMinioUrl:((newData && detailData.currentDetailType == 'sketch') || list[i].sketchString)?'':list[i]?.maskMinioUrl,
|
maskMinioUrl:((newData && detailData.currentDetailType == 'sketch') || list[i].sketchString)?'':list[i]?.maskMinioUrl,
|
||||||
// maskUrl:'',
|
// maskUrl:'',
|
||||||
maskUrl:((newData && detailData.currentDetailType == 'sketch') || list[i].sketchString)?'':list[i]?.maskUrl,
|
maskUrl:list[i]?.maskUrl || '',
|
||||||
// offset:[
|
// offset:[
|
||||||
// -233.13985,
|
// -233.13985,
|
||||||
// 406.90964
|
// 406.90964
|
||||||
@@ -369,7 +383,7 @@ export default defineComponent({
|
|||||||
offset,
|
offset,
|
||||||
transpose,
|
transpose,
|
||||||
rotate,
|
rotate,
|
||||||
partialDesign:(detailData.currentDetailType == 'sketch' || detailData.isEditPattern.value == 'editSketch')?{}:list[i].partialDesign,
|
partialDesign:list[i].partialDesign,
|
||||||
// partialDesign:detailData.isEditPattern.value?list[i].partialDesign:{},
|
// partialDesign:detailData.isEditPattern.value?list[i].partialDesign:{},
|
||||||
path:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.minIOPath:list[i].minIOPath,
|
path:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.minIOPath:list[i].minIOPath,
|
||||||
printObject:(newData && detailData.currentDetailType == 'print' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].printObject?list[i].printObject:{prints:[]},
|
printObject:(newData && detailData.currentDetailType == 'print' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].printObject?list[i].printObject:{prints:[]},
|
||||||
@@ -384,6 +398,8 @@ export default defineComponent({
|
|||||||
trims:(newData && detailData.currentDetailType == 'element' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
|
trims:(newData && detailData.currentDetailType == 'element' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
|
||||||
accessory:(newData && detailData.currentDetailType == 'accessory' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
|
accessory:(newData && detailData.currentDetailType == 'accessory' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
|
||||||
}
|
}
|
||||||
|
data.printObject.prints = printObjectToJSON(data.printObject.prints)
|
||||||
|
data.trims.prints = printObjectToJSON(data.trims.prints)
|
||||||
if((detailData.isEditPattern.value && list[i].color?.gradient) || (!detailData.isEditPattern.value && (list[i].newDetail?.color?.gradient || list[i].color?.gradient))){
|
if((detailData.isEditPattern.value && list[i].color?.gradient) || (!detailData.isEditPattern.value && (list[i].newDetail?.color?.gradient || list[i].color?.gradient))){
|
||||||
gradient = list[i].newDetail?.color?.gradient || list[i].color.gradient
|
gradient = list[i].newDetail?.color?.gradient || list[i].color.gradient
|
||||||
gradient.colorImg = await setGradual(gradient,320,700)
|
gradient.colorImg = await setGradual(gradient,320,700)
|
||||||
@@ -398,7 +414,7 @@ export default defineComponent({
|
|||||||
let workspace = store.state.Workspace.probjects
|
let workspace = store.state.Workspace.probjects
|
||||||
if(!detailData?.selectDetail?.path && !detailData?.selectDetail?.newDetail?.sketch?.minIOPath)return
|
if(!detailData?.selectDetail?.path && !detailData?.selectDetail?.newDetail?.sketch?.minIOPath)return
|
||||||
let clothes:any
|
let clothes:any
|
||||||
if(detailData.currentDetailType == 'models' || detailData.isUndividedLayerWithSinglePrint){
|
if(detailData.currentDetailType == 'models'){
|
||||||
clothes = await setClothes(detailData.designDetail.clothes,str)
|
clothes = await setClothes(detailData.designDetail.clothes,str)
|
||||||
}else{
|
}else{
|
||||||
clothes = await setClothes([detailData.selectDetail],str)
|
clothes = await setClothes([detailData.selectDetail],str)
|
||||||
@@ -412,6 +428,7 @@ export default defineComponent({
|
|||||||
sketchString:'',
|
sketchString:'',
|
||||||
modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'',
|
modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'',
|
||||||
modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'',
|
modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'',
|
||||||
|
designType:detailData.selectDetail.id?'merage':'default',
|
||||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||||
processId:userDetail.value.userId,
|
processId:userDetail.value.userId,
|
||||||
probjectId:store.state.Workspace.probjects.id,
|
probjectId:store.state.Workspace.probjects.id,
|
||||||
@@ -428,7 +445,6 @@ export default defineComponent({
|
|||||||
detailData.selectDetail.sketchString = null
|
detailData.selectDetail.sketchString = null
|
||||||
store.commit('DesignDetail/setPraeview',value)
|
store.commit('DesignDetail/setPraeview',value)
|
||||||
detailData.loadingShow = false
|
detailData.loadingShow = false
|
||||||
detailData.isUndividedLayerWithSinglePrint = false
|
|
||||||
canvasReload()
|
canvasReload()
|
||||||
// setRevocation()
|
// setRevocation()
|
||||||
}).catch(res=>{
|
}).catch(res=>{
|
||||||
@@ -447,13 +463,21 @@ export default defineComponent({
|
|||||||
sketchString:'',
|
sketchString:'',
|
||||||
modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'',
|
modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'',
|
||||||
modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'',
|
modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'',
|
||||||
|
designType:detailData.selectDetail.id?'merage':'default',
|
||||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||||
processId:userDetail.value.userId,
|
processId:userDetail.value.userId,
|
||||||
probjectId:store.state.Workspace.probjects.id,
|
probjectId:store.state.Workspace.probjects.id,
|
||||||
}
|
}
|
||||||
detailData.loadingShow = true
|
detailData.loadingShow = true
|
||||||
Https.axiosPost(Https.httpUrls.designSingle, data).then((rv)=>{
|
Https.axiosPost(Https.httpUrls.designSingle, data).then(async (rv)=>{
|
||||||
|
saveCanvasJSONToSession()
|
||||||
// store.commit('DesignDetail/setPraeview',rv)
|
// store.commit('DesignDetail/setPraeview',rv)
|
||||||
|
const sessionCanvasList = sessionStorage.getItem('canvasList');
|
||||||
|
const canvasList = sessionCanvasList ? JSON.parse(sessionCanvasList) : []
|
||||||
|
for (let i = 0; i < canvasList.length; i++) {
|
||||||
|
const index = detailData.designDetail.clothes.findIndex(item => item.id === canvasList[i].id);
|
||||||
|
if(index>-1)await detailDom.canvasBox.saveCanvas(canvasList[i])
|
||||||
|
}
|
||||||
let designCollectionList = store.state.HomeStoreModule.designCollectionList
|
let designCollectionList = store.state.HomeStoreModule.designCollectionList
|
||||||
let likeDesignCollectionList = store.state.HomeStoreModule.likeDesignCollectionList
|
let likeDesignCollectionList = store.state.HomeStoreModule.likeDesignCollectionList
|
||||||
designCollectionList.forEach((item:any) => {
|
designCollectionList.forEach((item:any) => {
|
||||||
@@ -503,19 +527,29 @@ export default defineComponent({
|
|||||||
|
|
||||||
front.imageUrl = rv.targetFrontUrl
|
front.imageUrl = rv.targetFrontUrl
|
||||||
back.imageUrl = rv.targetBackUrl
|
back.imageUrl = rv.targetBackUrl
|
||||||
detailData.selectDetail.undividedLayerWithSinglePrint = partialDesign
|
|
||||||
store.commit('DesignDetail/canvasPreviewUpdata',{type:detailData.isEditPattern.value?'all':detailData.currentDetailType,callBack:setRevocation})
|
store.commit('DesignDetail/canvasPreviewUpdata',{type:detailData.isEditPattern.value?'all':detailData.currentDetailType,callBack:setRevocation})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
img.src = detailData.selectDetail.path
|
img.src = detailData.selectDetail.path
|
||||||
|
saveCanvasJSONToSession()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const modelOnLoad = ()=>{
|
const saveCanvasJSONToSession = ()=>{
|
||||||
if(!detailData.isUndividedLayerWithSinglePrint)return
|
let canvasJSON = detailDom.canvasBox.getCanvasJSON()
|
||||||
setTimeout(()=>{
|
const sessionCanvasList = sessionStorage.getItem('canvasList');
|
||||||
let data = getSubmitData('sub')
|
const list = sessionCanvasList ? JSON.parse(sessionCanvasList) : []
|
||||||
store.dispatch('DesignDetail/setSubmit',data)
|
let index = -1
|
||||||
|
list.forEach((item:any,i:number)=>{
|
||||||
|
if(item.id == detailData.selectDetail.id){
|
||||||
|
index = i
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
if(index < 0){
|
||||||
|
list.push({id:detailData.selectDetail.id,canvasJSON:canvasJSON})
|
||||||
|
}else{
|
||||||
|
list[index].canvasJSON = canvasJSON
|
||||||
|
}
|
||||||
|
sessionStorage.setItem('canvasList', JSON.stringify(list));
|
||||||
}
|
}
|
||||||
const detailEdit = async (str:any)=>{
|
const detailEdit = async (str:any)=>{
|
||||||
if(str){
|
if(str){
|
||||||
@@ -574,10 +608,13 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
if(detailData.currentDetailType == 'color'){
|
if(detailData.currentDetailType == 'color'){
|
||||||
let color = detailData.selectDetail.newDetail?.color
|
let color = detailData.selectDetail.newDetail?.color
|
||||||
console.log(color)
|
|
||||||
// let colorData:any = await getColorName(color?.rgba)
|
// let colorData:any = await getColorName(color?.rgba)
|
||||||
if(detailData.selectDetail.newDetail?.color?.rgba?.r){
|
if(detailData.selectDetail.newDetail?.color){
|
||||||
|
if(color.r){
|
||||||
color.rgba = {r:color.r,g:color.g,b:color.b,a:color.a}
|
color.rgba = {r:color.r,g:color.g,b:color.b,a:color.a}
|
||||||
|
}else{
|
||||||
|
color.rbga = {}
|
||||||
|
}
|
||||||
otherData.color = color
|
otherData.color = color
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -685,7 +722,6 @@ export default defineComponent({
|
|||||||
oppositeRevocation,
|
oppositeRevocation,
|
||||||
detailEdit,
|
detailEdit,
|
||||||
canvasReload,
|
canvasReload,
|
||||||
modelOnLoad,
|
|
||||||
sketchSysToLibrary,
|
sketchSysToLibrary,
|
||||||
setSloganData,
|
setSloganData,
|
||||||
updateOtherLayers,//更新到画布图层 再canvasInit中执行
|
updateOtherLayers,//更新到画布图层 再canvasInit中执行
|
||||||
|
|||||||
@@ -5,14 +5,13 @@
|
|||||||
<div class="canvasContent" ref="canvasContent">
|
<div class="canvasContent" ref="canvasContent">
|
||||||
<div class="content-bottom" ref="canvasContent">
|
<div class="content-bottom" ref="canvasContent">
|
||||||
<div class="contet">
|
<div class="contet">
|
||||||
<!-- :clothingImageUrl="selectDetail?.undividedLayerWithSinglePrint || selectDetail.undividedLayer || selectDetail.path" -->
|
|
||||||
<div class="canvas" :class="{'active': currentView === 'canvasEditor'}"@click.stop>
|
<div class="canvas" :class="{'active': currentView === 'canvasEditor'}"@click.stop>
|
||||||
<editCanvas v-if="canvasLoad" :config="canvasConfig"
|
<editCanvas v-if="canvasLoad" :config="canvasConfig"
|
||||||
@canvasInit="canvasInit"
|
@canvasInit="editSketchCanvasInit"
|
||||||
is-edit
|
is-edit
|
||||||
:clothingMinIOPath="selectDetail.minIOPath"
|
:clothingMinIOPath="selectDetail.minIOPath"
|
||||||
:clothingImageUrl="selectDetail.path"
|
:clothingImageUrl="selectDetail.path"
|
||||||
:clothingImageUrl2="selectDetail.undividedLayer_"
|
:clothingImageUrl2="selectDetail.layersObject[0].maskUrl"
|
||||||
showFixedLayer
|
showFixedLayer
|
||||||
:canvasJSON="canvasJSON"
|
:canvasJSON="canvasJSON"
|
||||||
@canvasLoadJsonSuccess="canvasLoadJsonSuccess"
|
@canvasLoadJsonSuccess="canvasLoadJsonSuccess"
|
||||||
@@ -26,7 +25,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="editFrontBack" v-if="currentView === 'redGreenExample'" @click.stop>
|
<div class="editFrontBack" v-if="currentView === 'redGreenExample'" @click.stop>
|
||||||
<editCanvas v-if="canvasLoad" :config="canvasConfig"
|
<editCanvas v-if="canvasLoad" :config="canvasConfig"
|
||||||
@canvasInit="canvasInit"
|
@canvasInit="editFrontBackCanvasInit"
|
||||||
:enabledRedGreenMode="true"
|
:enabledRedGreenMode="true"
|
||||||
:clothingImageUrl="selectDetail.path"
|
:clothingImageUrl="selectDetail.path"
|
||||||
:redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl"
|
:redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl"
|
||||||
@@ -151,7 +150,7 @@ export default defineComponent({
|
|||||||
}else{
|
}else{
|
||||||
if(detailData.currentView === 'redGreenExample'){
|
if(detailData.currentView === 'redGreenExample'){
|
||||||
nextTick(()=>{
|
nextTick(()=>{
|
||||||
setCanvas(detailData.selectDetail?.undividedLayerWithSinglePrint || detailData.selectDetail.undividedLayer || detailData.selectDetail.path).then(()=>{
|
setCanvas(detailData.selectDetail.path).then(()=>{
|
||||||
// detailData.canvasLoad = true
|
// detailData.canvasLoad = true
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
@@ -167,18 +166,25 @@ export default defineComponent({
|
|||||||
const updateOtherLayers = (obj:any)=>{
|
const updateOtherLayers = (obj:any)=>{
|
||||||
if(!detailDom.editCanvas)return
|
if(!detailDom.editCanvas)return
|
||||||
return new Promise(async (res,reject)=>{
|
return new Promise(async (res,reject)=>{
|
||||||
console.log(obj,'====')
|
|
||||||
await detailDom?.editCanvas.updateOtherLayers(obj)
|
await detailDom?.editCanvas.updateOtherLayers(obj)
|
||||||
res('')
|
res('')
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
|
const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
|
||||||
// if(!detailDom.editCanvas)return
|
// if(!detailDom.editCanvas)return
|
||||||
return new Promise((res,reject)=>{
|
return new Promise(async (res,reject)=>{
|
||||||
detailDom.editCanvas.exportImage({isContainFixedOther:true,isContainFixed:true}).then((rv)=>{
|
await detailDom.editCanvas.exportImage({isContainFixed:true}).then((rv)=>{
|
||||||
if(oldSelectDetail?.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = rv
|
if(oldSelectDetail?.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = rv
|
||||||
res('')
|
|
||||||
})
|
})
|
||||||
|
//包含平铺图层 single+overall模式的图
|
||||||
|
await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsNoRepeat:true,isPrintTrimsRepeat:true,isContainNormalLayer:false}).then((rv)=>{
|
||||||
|
oldSelectDetail.undividedLayerWithSinglePrint = rv
|
||||||
|
})
|
||||||
|
//不包含平铺图层overall模式的图
|
||||||
|
await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsNoRepeat:false,isPrintTrimsRepeat:true,isContainNormalLayer:false}).then((rv)=>{
|
||||||
|
oldSelectDetail.undividedLayer = rv
|
||||||
|
})
|
||||||
|
res('')
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const getCanvasElement = ()=>{
|
const getCanvasElement = ()=>{
|
||||||
@@ -247,7 +253,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
|
|
||||||
const frontBackChange = (value:any)=>{
|
const frontBackChange = (value:any)=>{
|
||||||
let full = detailData.frontBack.front[detailData.imgDomIndex]?.undividedLayerWithSinglePrint || detailData.frontBack.front[detailData.imgDomIndex].undividedLayer || detailData.selectDetail.path
|
let full = detailData.selectDetail.partialDesign.partialDesignBase64 || detailData.selectDetail.path
|
||||||
let size = {
|
let size = {
|
||||||
...detailData.canvasConfig,
|
...detailData.canvasConfig,
|
||||||
}
|
}
|
||||||
@@ -268,7 +274,13 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
const canvasInit = (value:any)=>{
|
const editSketchCanvasInit = (value:any)=>{
|
||||||
|
detailData.canvasInstance = value
|
||||||
|
detailData.getCanvasIfEdit.fun = getCanvasLength
|
||||||
|
detailData.isShowMark = false
|
||||||
|
console.log('初始化完成')
|
||||||
|
}
|
||||||
|
const editFrontBackCanvasInit = (value:any)=>{
|
||||||
detailData.canvasInstance = value
|
detailData.canvasInstance = value
|
||||||
detailData.getCanvasIfEdit.fun = getCanvasLength
|
detailData.getCanvasIfEdit.fun = getCanvasLength
|
||||||
detailData.isShowMark = false
|
detailData.isShowMark = false
|
||||||
@@ -277,20 +289,19 @@ export default defineComponent({
|
|||||||
const getCanvasLength = ()=>{
|
const getCanvasLength = ()=>{
|
||||||
return detailData.canvasInstance?.commandManager?.undoStack?.length
|
return detailData.canvasInstance?.commandManager?.undoStack?.length
|
||||||
}
|
}
|
||||||
const saveCanvas = async (type:string = '')=>{
|
const getCanvasJSON = ()=>{
|
||||||
if(type !== 'auto'){
|
if(!detailDom?.editCanvas)return ''
|
||||||
detailData.isShowMark = true
|
return detailDom?.editCanvas?.getJSON()
|
||||||
}
|
}
|
||||||
const index = detailData.designDetail.clothes.findIndex(item => item.id === detailData.selectDetail.id);
|
const saveCanvas = async (canvasData:any)=>{
|
||||||
|
const index = detailData.designDetail.clothes.findIndex(item => item.id === canvasData.id);
|
||||||
await new Promise<void>((resolve, reject) => {
|
await new Promise<void>((resolve, reject) => {
|
||||||
if(!detailDom?.editCanvas)return resolve()
|
let canvasJSON = JSON.parse(canvasData.canvasJSON)
|
||||||
let canvasJSON = detailDom?.editCanvas?.getJSON()
|
if(!canvasJSON)return resolve()
|
||||||
let canvasData = JSON.parse(canvasJSON)
|
// canvasData.canvas.objects.forEach((objectsItem:any) => {
|
||||||
if(!canvasData)return resolve()
|
// if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
|
||||||
canvasData.canvas.objects.forEach((objectsItem:any) => {
|
// });
|
||||||
if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
|
let blob = new Blob([JSON.stringify(canvasJSON)], { type: "application/json" });
|
||||||
});
|
|
||||||
let blob = new Blob([JSON.stringify(canvasData)], { type: "application/json" });
|
|
||||||
let formData = new FormData();
|
let formData = new FormData();
|
||||||
formData.append("file", blob, "data.json");
|
formData.append("file", blob, "data.json");
|
||||||
formData.append("designItemDetailId", detailData.selectDetail.id);
|
formData.append("designItemDetailId", detailData.selectDetail.id);
|
||||||
@@ -321,6 +332,11 @@ export default defineComponent({
|
|||||||
const canvasLoadJsonSuccess = async ()=>{
|
const canvasLoadJsonSuccess = async ()=>{
|
||||||
let otherData = await props.updateOtherLayers()
|
let otherData = await props.updateOtherLayers()
|
||||||
updateOtherLayers(otherData)
|
updateOtherLayers(otherData)
|
||||||
|
if(detailData.selectDetail.undividedLayerColor){
|
||||||
|
await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsRepeat:false,isPrintTrimsNoRepeat:false,isContainNormalLayer:false}).then((rv)=>{
|
||||||
|
detailData.selectDetail.undividedLayerColor = rv
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const submitBase64Data = ()=>{
|
const submitBase64Data = ()=>{
|
||||||
@@ -343,6 +359,12 @@ export default defineComponent({
|
|||||||
onMounted(()=>{
|
onMounted(()=>{
|
||||||
nextTick(async ()=>{
|
nextTick(async ()=>{
|
||||||
// detailData.currentView = 'canvasEditor'
|
// detailData.currentView = 'canvasEditor'
|
||||||
|
const sessionCanvasList = sessionStorage.getItem('canvasList');
|
||||||
|
const canvasList = sessionCanvasList ? JSON.parse(sessionCanvasList) : []
|
||||||
|
let canvasIndex = canvasList.findIndex(item => item.id === detailData.selectDetail.id);
|
||||||
|
if(canvasIndex>1){
|
||||||
|
detailData.canvasJSON = canvasList[canvasIndex].canvasJSON
|
||||||
|
}
|
||||||
if(detailData.selectDetail.canvasId){
|
if(detailData.selectDetail.canvasId){
|
||||||
detailData.isShowMark = true
|
detailData.isShowMark = true
|
||||||
await new Promise((resolve, reject) => {
|
await new Promise((resolve, reject) => {
|
||||||
@@ -360,7 +382,7 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
setCanvas(detailData.selectDetail?.undividedLayerWithSinglePrint || detailData.selectDetail.undividedLayer || detailData.selectDetail.path).then(()=>{
|
setCanvas(detailData.selectDetail.path).then(()=>{
|
||||||
detailData.canvasLoad = true
|
detailData.canvasLoad = true
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
@@ -372,12 +394,14 @@ export default defineComponent({
|
|||||||
privewDetail,
|
privewDetail,
|
||||||
setFrontBackColor,
|
setFrontBackColor,
|
||||||
frontBackChange,
|
frontBackChange,
|
||||||
canvasInit,
|
editSketchCanvasInit,
|
||||||
|
editFrontBackCanvasInit,
|
||||||
saveCanvas,
|
saveCanvas,
|
||||||
getCanvasElement,
|
getCanvasElement,
|
||||||
updateOtherLayers,
|
updateOtherLayers,
|
||||||
canvasLoadJsonSuccess,
|
canvasLoadJsonSuccess,
|
||||||
submitBase64Data,
|
submitBase64Data,
|
||||||
|
getCanvasJSON,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
provide() {
|
provide() {
|
||||||
|
|||||||
@@ -16,20 +16,21 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="printElementListBorder" :class="{'single':stateOverallSingle == 'single'}">
|
<div class="printElementListBorder single">
|
||||||
<div class="printElementList" ref="printElementList" :style="{height:stateOverallSingle == 'overall'?'14rem':'10rem'}">
|
<div class="printElementList" ref="printElementList" :style="{height:'10rem'}">
|
||||||
<div class="itemList" :style="{width:stateOverallSingle == 'single'?(prentWidth || 0) : '100%'}">
|
<div class="itemList" :style="{width:(prentWidth || 0)}">
|
||||||
<div class="imgItem"
|
<div class="imgItem"
|
||||||
v-if="stateOverallSingle == 'single'"
|
v-for="item,index in printStyleList[type][stateOverallSingle]"
|
||||||
v-for="item in printStyleList[type][stateOverallSingle]"
|
|
||||||
:key="item"
|
:key="item"
|
||||||
|
:class="{active:stateOverallSingle == 'overall' && index == imgDomIndex}"
|
||||||
@mousedown.stop="designMousedown(getMousePosition($event,false),item.uniqueId,'disLike')"
|
@mousedown.stop="designMousedown(getMousePosition($event,false),item.uniqueId,'disLike')"
|
||||||
@touchstart.passive="designMousedown(getMousePosition($event,true),item.uniqueId,'disLike')"
|
@touchstart.passive="designMousedown(getMousePosition($event,true),item.uniqueId,'disLike')"
|
||||||
|
@click.stop="overallSetIndex(item)"
|
||||||
>
|
>
|
||||||
<img :src="item.path" alt="">
|
<img :src="item.path" alt="">
|
||||||
<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
|
<i class="fi fi-rr-trash" @click.stop="navDelete(item)"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="imgItem"
|
<!-- <div class="imgItem"
|
||||||
v-if="stateOverallSingle == 'overall'"
|
v-if="stateOverallSingle == 'overall'"
|
||||||
v-for="item in printStyleList[type][stateOverallSingle]"
|
v-for="item in printStyleList[type][stateOverallSingle]"
|
||||||
:key="item"
|
:key="item"
|
||||||
@@ -37,11 +38,11 @@
|
|||||||
>
|
>
|
||||||
<img :src="item.path" alt="">
|
<img :src="item.path" alt="">
|
||||||
<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
|
<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
|
||||||
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div v-if="imgDomIndex >= 0" v-show="stateOverallSingle != 'single'" class="habit_System_Designer">
|
||||||
<div v-show="stateOverallSingle != 'single'" class="habit_System_Designer">
|
|
||||||
<!-- <a-slider id="system_silder"
|
<!-- <a-slider id="system_silder"
|
||||||
class="system_silder"
|
class="system_silder"
|
||||||
:min="20"
|
:min="20"
|
||||||
@@ -57,10 +58,11 @@
|
|||||||
>
|
>
|
||||||
<template #content>
|
<template #content>
|
||||||
<repeat-setting
|
<repeat-setting
|
||||||
:object="overallDetail"
|
:object="printStyleList[type].overall[imgDomIndex]"
|
||||||
@inputFillAngle="inputFillAngle"
|
@inputFillAngle="inputFillAngle"
|
||||||
@inputFillOffset="inputFillOffset"
|
@inputFillOffset="inputFillOffset"
|
||||||
@inputFillScale="inputFillScale"
|
@inputFillScale="inputFillScale"
|
||||||
|
:sketchPath="selectDetail.path"
|
||||||
@inputFill_Gap="
|
@inputFill_Gap="
|
||||||
(x, y) => inputFill_Gap(x, y)"
|
(x, y) => inputFill_Gap(x, y)"
|
||||||
/>
|
/>
|
||||||
@@ -74,12 +76,11 @@
|
|||||||
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
|
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
|
||||||
<!-- <div class="designOpenrtion_imgMask" :style="sketch"> -->
|
<!-- <div class="designOpenrtion_imgMask" :style="sketch"> -->
|
||||||
<div class="designOpenrtion_imgMask">
|
<div class="designOpenrtion_imgMask">
|
||||||
<div class="designOpenrtion_print">
|
<div class="designOpenrtion_print" v-if="stateOverallSingle == 'single'">
|
||||||
<div
|
<div
|
||||||
v-for="item,index in printStyleList[type][stateOverallSingle]"
|
v-for="item,index in printStyleList[type][stateOverallSingle]"
|
||||||
:key="item"
|
:key="item"
|
||||||
v-if="stateOverallSingle == 'single'"
|
:style="{...item?.pattern?.style,opacity:item?.object?.opacity || 1}"
|
||||||
:style="item?.pattern?.style"
|
|
||||||
@mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))"
|
@mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))"
|
||||||
class="modal_imgItem"
|
class="modal_imgItem"
|
||||||
ref="content"
|
ref="content"
|
||||||
@@ -88,7 +89,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <img :src="selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg"> -->
|
<!-- <img :src="selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg"> -->
|
||||||
<img :src="selectDetail?.undividedLayerWithSinglePrint?selectDetail.undividedLayerWithSinglePrint:selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg" @load="()=>isSketchLoad = true">
|
<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">
|
<img :src="selectDetail.sketchMask" alt="" class="designOpenrtion_sketchMask" ref="sketchMask">
|
||||||
<div class="designOpenrtion_btn" v-if="stateOverallSingle == 'single'" >
|
<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))">
|
<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))">
|
||||||
@@ -109,7 +110,7 @@
|
|||||||
</ul> -->
|
</ul> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="designOpenrtion_pingpu" v-else>
|
<div class="designOpenrtion_pingpu" v-else>
|
||||||
<pingpu v-if="overallDetail.url" v-bind="overallDetail"></pingpu>
|
<pingpu :list="printStyleList[type].overall" ref="pingpuRef" @change-canvas="updateCanvas"></pingpu>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -148,21 +149,13 @@ export default defineComponent({
|
|||||||
const editPrintElementDom = reactive({
|
const editPrintElementDom = reactive({
|
||||||
imgDom:null as any,
|
imgDom:null as any,
|
||||||
sketchImg:null as any,
|
sketchImg:null as any,
|
||||||
|
pingpuRef:null as any,
|
||||||
})
|
})
|
||||||
const editPrintElementData = reactive({
|
const editPrintElementData = reactive({
|
||||||
selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
|
selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
|
||||||
currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType),
|
currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType),
|
||||||
currentPrintElement:computed(()=>store.state.DesignDetail.currentPrintElement),
|
currentPrintElement:computed(()=>store.state.DesignDetail.currentPrintElement),
|
||||||
systemDesignerPercentage:0,
|
systemDesignerPercentage:0,
|
||||||
overallDetail:{
|
|
||||||
url: '',
|
|
||||||
offsetX: 0, // px
|
|
||||||
offsetY: 0, // px
|
|
||||||
angle: 0, // 角度
|
|
||||||
scale: 100, // %
|
|
||||||
gapX: 0, // px
|
|
||||||
gapY: 0, // px
|
|
||||||
},
|
|
||||||
printStyleList:{
|
printStyleList:{
|
||||||
print:{
|
print:{
|
||||||
single:[],
|
single:[],
|
||||||
@@ -172,9 +165,9 @@ export default defineComponent({
|
|||||||
single:[],
|
single:[],
|
||||||
}
|
}
|
||||||
} as any,
|
} as any,
|
||||||
stateOverallSingle:'single',
|
stateOverallSingle:'single' as any,
|
||||||
type:props.type,
|
type:props.type,
|
||||||
imgDomIndex:0,
|
imgDomIndex:-1,
|
||||||
direction:'',//判断点的那条边
|
direction:'',//判断点的那条边
|
||||||
printZIndex:2,//印花优先级
|
printZIndex:2,//印花优先级
|
||||||
sketchWH:{
|
sketchWH:{
|
||||||
@@ -186,6 +179,13 @@ export default defineComponent({
|
|||||||
printElementList:null as any,
|
printElementList:null as any,
|
||||||
isSketchLoad:false,
|
isSketchLoad:false,
|
||||||
})
|
})
|
||||||
|
const ACTIONS = {
|
||||||
|
ADD: "add",
|
||||||
|
UPDATE: "update",
|
||||||
|
DELETE: "delete",
|
||||||
|
SELECT: "select",
|
||||||
|
SORT: "sort",
|
||||||
|
};
|
||||||
const collItemSize = reactive({
|
const collItemSize = reactive({
|
||||||
collValue:18,
|
collValue:18,
|
||||||
num:1,
|
num:1,
|
||||||
@@ -205,13 +205,14 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
|
|
||||||
const setOveralSingle = ()=>{
|
const setOveralSingle = ()=>{
|
||||||
|
|
||||||
setItemPosition()
|
setItemPosition()
|
||||||
}
|
}
|
||||||
const formatter = (value:any)=>{
|
const formatter = (value:any)=>{
|
||||||
return `${value}%`;
|
return `${value}%`;
|
||||||
}
|
}
|
||||||
const deletePrint = ()=>{
|
const deletePrint = ()=>{
|
||||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].splice(editPrintElementData.imgDomIndex,1)
|
if(editPrintElementData.imgDomIndex>-1)editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].splice(editPrintElementData.imgDomIndex,1)
|
||||||
}
|
}
|
||||||
const setScaleLocation:any = (item:any)=>{
|
const setScaleLocation:any = (item:any)=>{
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
@@ -265,7 +266,6 @@ export default defineComponent({
|
|||||||
let scale,location
|
let scale,location
|
||||||
let style = item.pattern.style
|
let style = item.pattern.style
|
||||||
let sketchWH = editPrintElementData.sketchWH.scale
|
let sketchWH = editPrintElementData.sketchWH.scale
|
||||||
let overallDetail = {}
|
|
||||||
if(item.ifSingle){
|
if(item.ifSingle){
|
||||||
scale = [style.width.replace(/px/g,'')/(editPrintElementData.sketchWH.width),(style.height.replace(/px/g,'')/(editPrintElementData.sketchWH.height))]
|
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]]
|
location = [style.left.replace(/px/g,'')*sketchWH[0],style.top.replace(/px/g,'')*sketchWH[1]]
|
||||||
@@ -276,14 +276,6 @@ export default defineComponent({
|
|||||||
scale =[ editPrintElementData.systemDesignerPercentage/100, editPrintElementData.systemDesignerPercentage/100]
|
scale =[ editPrintElementData.systemDesignerPercentage/100, editPrintElementData.systemDesignerPercentage/100]
|
||||||
// scale = [item.pattern.style.width/item.pattern.style.height,item.pattern.style.height/item.pattern.style.width]
|
// 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]
|
// location = [item.pattern.style.left,item.pattern.style.top]
|
||||||
overallDetail = {
|
|
||||||
offsetX: editPrintElementData.overallDetail.offsetX, // px
|
|
||||||
offsetY: editPrintElementData.overallDetail.offsetY, // px
|
|
||||||
angle: editPrintElementData.overallDetail.angle, // 角度
|
|
||||||
scale: editPrintElementData.overallDetail.scale, // %
|
|
||||||
gapX: editPrintElementData.overallDetail.gapX, // px
|
|
||||||
gapY: editPrintElementData.overallDetail.gapY, // px
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
let value ={
|
let value ={
|
||||||
angle : item.pattern.transform.rotateZ,
|
angle : item.pattern.transform.rotateZ,
|
||||||
@@ -297,9 +289,8 @@ export default defineComponent({
|
|||||||
minIOPath:item.minIOPath,
|
minIOPath:item.minIOPath,
|
||||||
ifSingle:!!item.ifSingle,
|
ifSingle:!!item.ifSingle,
|
||||||
globalCompositeOperation:'',
|
globalCompositeOperation:'',
|
||||||
object:null,
|
|
||||||
// ...overallDetail,
|
|
||||||
}
|
}
|
||||||
|
if(item.object)value.object = item.object
|
||||||
return value
|
return value
|
||||||
}
|
}
|
||||||
if(editPrintElementData.printStyleList[props.type].single.length>0){
|
if(editPrintElementData.printStyleList[props.type].single.length>0){
|
||||||
@@ -332,7 +323,6 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
const getItemPosition = (item:any)=>{
|
const getItemPosition = (item:any)=>{
|
||||||
let left,top
|
let left,top
|
||||||
|
|
||||||
if(item.ifSingle){
|
if(item.ifSingle){
|
||||||
//single
|
//single
|
||||||
left = item.location[0] / editPrintElementData.sketchWH.scale[0]
|
left = item.location[0] / editPrintElementData.sketchWH.scale[0]
|
||||||
@@ -362,22 +352,46 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
editPrintElementData.printZIndex++
|
editPrintElementData.printZIndex++
|
||||||
item.pattern = pattern
|
item.pattern = pattern
|
||||||
|
function isJSONString(str) {
|
||||||
|
try {
|
||||||
|
JSON.parse(str);
|
||||||
|
return true; // 解析成功,是有效的JSON字符串
|
||||||
|
} catch (e) {
|
||||||
|
return false; // 解析失败,不是有效的JSON字符串
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(item.object){
|
||||||
|
if(isJSONString(item.object)){
|
||||||
|
item.object = JSON.parse(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(item.ifSingle){
|
if(item.ifSingle){
|
||||||
editPrintElementData.printStyleList[props.type].single.push(item)
|
editPrintElementData.printStyleList[props.type].single.push(item)
|
||||||
}else{
|
}else{
|
||||||
editPrintElementData.printStyleList[props.type].overall = []
|
item.token = Date.now().toString() + (editPrintElementData.printStyleList[props.type].overall.length + '')
|
||||||
editPrintElementData.overallDetail = {
|
// editPrintElementData.printStyleList[props.type].overall = []
|
||||||
url: item.path,
|
|
||||||
offsetX: 0, // px
|
|
||||||
offsetY: 0, // px
|
|
||||||
angle: 0, // 角度
|
|
||||||
scale: 100, // %
|
|
||||||
gapX: 0, // px
|
|
||||||
gapY: 0, // px
|
|
||||||
}
|
|
||||||
editPrintElementData.printStyleList[props.type].overall.push(item)
|
editPrintElementData.printStyleList[props.type].overall.push(item)
|
||||||
|
editPrintElementDom.pingpuRef.updataList([
|
||||||
|
{
|
||||||
|
action: ACTIONS.ADD,
|
||||||
|
data: item,
|
||||||
|
},
|
||||||
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
const setPosition = ()=>{
|
const setPosition = ()=>{
|
||||||
nextTick(()=>{
|
nextTick(()=>{
|
||||||
@@ -405,7 +419,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
if(arr && arr.length > 0){
|
if(arr && arr.length > 0){
|
||||||
arr.forEach((item:any)=>{
|
arr.forEach((item:any)=>{
|
||||||
if(!item.ifSingle && arr.length == 1){
|
if(!item.ifSingle){
|
||||||
editPrintElementData.stateOverallSingle = 'overall',
|
editPrintElementData.stateOverallSingle = 'overall',
|
||||||
state = false
|
state = false
|
||||||
}
|
}
|
||||||
@@ -436,7 +450,7 @@ export default defineComponent({
|
|||||||
addPrintELement(newVal)
|
addPrintELement(newVal)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
watch(()=>((editPrintElementData.selectDetail?.undividedLayer || editPrintElementData.selectDetail?.id)),(newVal)=>{
|
watch(()=>((editPrintElementData.selectDetail?.id)),(newVal)=>{
|
||||||
if(!newVal)return
|
if(!newVal)return
|
||||||
editPrintElementData.isSketchLoad = false,
|
editPrintElementData.isSketchLoad = false,
|
||||||
editPrintElementData.printStyleList[props.type] = {
|
editPrintElementData.printStyleList[props.type] = {
|
||||||
@@ -444,27 +458,34 @@ export default defineComponent({
|
|||||||
overall:[],
|
overall:[],
|
||||||
}
|
}
|
||||||
if(!editPrintElementData.selectDetail.sketchMask){
|
if(!editPrintElementData.selectDetail.sketchMask){
|
||||||
sketchToMask(newVal).then((res:any)=>{
|
sketchToMask(editPrintElementData.selectDetail?.layersObject[0].maskUrl).then((res:any)=>{
|
||||||
editPrintElementData.selectDetail.sketchMask = res
|
editPrintElementData.selectDetail.sketchMask = res
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
setPosition()
|
setPosition()
|
||||||
},{immediate: true,})
|
},{immediate: true,})
|
||||||
watch(()=>editPrintElementData.stateOverallSingle,(newVal)=>{
|
watch(()=>editPrintElementData.stateOverallSingle,(newVal)=>{
|
||||||
|
let arr = editPrintElementData.printStyleList[props.type][newVal]
|
||||||
|
if(arr.length > 0){
|
||||||
|
editPrintElementData.imgDomIndex = 0
|
||||||
if(newVal == 'overall'){
|
if(newVal == 'overall'){
|
||||||
let overallPrint = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]?.[0]
|
arr.forEach((item:any,index:number) => {
|
||||||
if(!overallPrint?.path)return
|
item.id_ = index
|
||||||
editPrintElementData.overallDetail = {
|
});
|
||||||
url: overallPrint.path,
|
|
||||||
offsetX: overallPrint.offsetX || 0, // px
|
|
||||||
offsetY: overallPrint.offsetY || 0, // px
|
|
||||||
angle: overallPrint.angle || 0, // 角度
|
|
||||||
scale: overallPrint.scale || 100, // %
|
|
||||||
gapX: overallPrint.gapX || 0, // px
|
|
||||||
gapY: overallPrint.gapY || 0, // px
|
|
||||||
}
|
}
|
||||||
|
}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)=>{
|
const itemMoveMousedown = (index:number,event:any)=>{
|
||||||
if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
|
if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
|
||||||
@@ -728,7 +749,17 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
//排序 从大到小
|
//排序 从大到小
|
||||||
const sortDesignCollection = ()=> {
|
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)=>{
|
const reRange = (item:any, x:number, y:number,str?:string)=>{
|
||||||
let elList:any = collItemSize.elList
|
let elList:any = collItemSize.elList
|
||||||
@@ -771,6 +802,14 @@ export default defineComponent({
|
|||||||
const navDelete = (item:any)=>{
|
const navDelete = (item:any)=>{
|
||||||
let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
|
let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
|
||||||
let index = arr.findIndex((arrItem:any)=>arrItem.uniqueId == item.uniqueId)
|
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)
|
arr.splice(index,1)
|
||||||
setItemPosition()
|
setItemPosition()
|
||||||
}
|
}
|
||||||
@@ -817,19 +856,105 @@ export default defineComponent({
|
|||||||
collItemSize.prentWidth = (collItemSize.padding + remValue) * elArr.length + 'px'
|
collItemSize.prentWidth = (collItemSize.padding + remValue) * elArr.length + 'px'
|
||||||
moveItem()
|
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)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
const inputFillAngle = (angle:any)=>{
|
const inputFillAngle = (angle:any)=>{
|
||||||
editPrintElementData.overallDetail.angle = angle
|
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)=>{
|
const inputFillOffset = (offset:any)=>{
|
||||||
editPrintElementData.overallDetail.offsetX = offset.left
|
let arr = editPrintElementData.printStyleList[props.type].overall
|
||||||
editPrintElementData.overallDetail.offsetY = offset.top
|
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)=>{
|
const inputFillScale = (scale:any)=>{
|
||||||
editPrintElementData.overallDetail.scale = scale
|
let arr = editPrintElementData.printStyleList[props.type].overall
|
||||||
|
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)=>{
|
const inputFill_Gap = (x:any,y:any)=>{
|
||||||
editPrintElementData.overallDetail.gapX = x
|
let arr = editPrintElementData.printStyleList[props.type].overall
|
||||||
editPrintElementData.overallDetail.gapY = y
|
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(()=>{
|
onMounted(()=>{
|
||||||
if(props.type == 'element'){
|
if(props.type == 'element'){
|
||||||
@@ -854,10 +979,12 @@ export default defineComponent({
|
|||||||
clearOverall,
|
clearOverall,
|
||||||
designMousedown,
|
designMousedown,
|
||||||
navDelete,
|
navDelete,
|
||||||
|
updateCanvas,
|
||||||
inputFillAngle,
|
inputFillAngle,
|
||||||
inputFillOffset,
|
inputFillOffset,
|
||||||
inputFillScale,
|
inputFillScale,
|
||||||
inputFill_Gap,
|
inputFill_Gap,
|
||||||
|
overallSetIndex,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
directives:{
|
directives:{
|
||||||
@@ -1022,6 +1149,9 @@ export default defineComponent({
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
&.active{
|
||||||
|
border: 2px solid #B4B4B4;
|
||||||
|
}
|
||||||
> img{
|
> img{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -1075,6 +1205,9 @@ export default defineComponent({
|
|||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
// max-height: 80%;
|
// max-height: 80%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
>img{
|
>img{
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -1087,6 +1220,7 @@ export default defineComponent({
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.designOpenrtion_sketch_mask{
|
.designOpenrtion_sketch_mask{
|
||||||
|
|||||||
@@ -1,9 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="repeat-setting">
|
<div class="repeat-setting">
|
||||||
|
{{ }}
|
||||||
<div class="repeat-setting-item">
|
<div class="repeat-setting-item">
|
||||||
<span class="label">{{ t("Canvas.angle") }}</span>
|
<span class="label">{{ t("Canvas.angle") }}</span>
|
||||||
<angle-tool
|
<angle-tool
|
||||||
:angle="angle"
|
:angle="angle"
|
||||||
|
styleType="2"
|
||||||
@input="(e) => emit('inputFillAngle', e)"
|
@input="(e) => emit('inputFillAngle', e)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -52,9 +54,9 @@
|
|||||||
<div class="repeat-setting-item">
|
<div class="repeat-setting-item">
|
||||||
<span class="label">{{ t("Canvas.offset") }}</span>
|
<span class="label">{{ t("Canvas.offset") }}</span>
|
||||||
<offset-tool
|
<offset-tool
|
||||||
:top="(props.object.fill?.offsetY / props.object.height) * 100"
|
:top="offset[1]"
|
||||||
:left="(props.object.fill?.offsetX / props.object.width) * 100"
|
:left="offset[0]"
|
||||||
@input="(e) => emit('inputFillOffset', e)"
|
@input="inputOffset"
|
||||||
@change="(e) => emit('changeFillOffset', e)"
|
@change="(e) => emit('changeFillOffset', e)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -74,15 +76,38 @@
|
|||||||
required: true,
|
required: true,
|
||||||
type: Object,
|
type: Object,
|
||||||
},
|
},
|
||||||
|
sketchPath: {
|
||||||
|
required: true,
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
const angle = computed(() => props.object?.angle || 0);
|
const angle = computed(() => props.object?.angle || 0);
|
||||||
const scale = computed(() => {
|
const scale = computed(() => {
|
||||||
// let scaleValue = props.object?.scale/10;
|
// let scaleValue = props.object?.scale/10;
|
||||||
// return props.object?.scale/10;
|
// return props.object?.scale/10;
|
||||||
return props.object?.scale
|
return props.object?.scale[0] * 100;
|
||||||
});
|
});
|
||||||
const gapX = computed(() => props.object?.gapX || 0);
|
const offset = ref([0,0])
|
||||||
const gapY = computed(() => props.object?.gapY || 0);
|
const sketchSize:any = async ()=>{
|
||||||
|
let img = new Image();
|
||||||
|
let size = [0,0];
|
||||||
|
img.src = props.sketchPath;
|
||||||
|
await new Promise((resolve, reject) => {
|
||||||
|
img.onload = () => {
|
||||||
|
size = [img.width, img.height]
|
||||||
|
resolve([img.width, img.height]);
|
||||||
|
}
|
||||||
|
img.onerror = reject;
|
||||||
|
});
|
||||||
|
return size
|
||||||
|
}
|
||||||
|
watch (() => props.object.path || props.object.location, async () => {
|
||||||
|
let size = await sketchSize();
|
||||||
|
offset.value[0] = props.object.location[0] / size[0] * 100;
|
||||||
|
offset.value[1] = props.object.location[1] / size[1] * 100;
|
||||||
|
},{immediate: true})
|
||||||
|
const gapX = computed(() => props.object.object?.gapX || 0);
|
||||||
|
const gapY = computed(() => props.object.object?.gapY || 0);
|
||||||
const emit = defineEmits([
|
const emit = defineEmits([
|
||||||
"inputFillAngle",
|
"inputFillAngle",
|
||||||
"changeFillAngle",
|
"changeFillAngle",
|
||||||
@@ -94,9 +119,13 @@
|
|||||||
"changeFill_Gap",
|
"changeFill_Gap",
|
||||||
]);
|
]);
|
||||||
const inputFillScale = (e) => {
|
const inputFillScale = (e) => {
|
||||||
// const scale = e * 10;
|
const scale = e / 100;
|
||||||
emit("inputFillScale", e);
|
console.log(scale)
|
||||||
|
emit("inputFillScale", scale);
|
||||||
};
|
};
|
||||||
|
const inputOffset = async (e:any)=>{
|
||||||
|
emit('inputFillOffset', {...e,size: await sketchSize()})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<div class="back" v-show="isEditPattern.value">
|
<div class="back" v-show="isEditPattern.value">
|
||||||
<i class="fi fi-br-angle-left" @click="setBack"></i>
|
<i class="fi fi-br-angle-left" @click="setBack"></i>
|
||||||
</div>
|
</div>
|
||||||
<modelNav ref="modelNav" @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')" @sketchSysToLibrary="()=>$emit('sketchSysToLibrary')" @deleteItem="deleteItem"></modelNav>
|
<modelNav ref="modelNav" @addSketch="()=>$emit('addSketch')" @sketchSysToLibrary="()=>$emit('sketchSysToLibrary')" @deleteItem="deleteItem"></modelNav>
|
||||||
</div>
|
</div>
|
||||||
<div class="modelindex_right" ref="modelindexRight">
|
<div class="modelindex_right" ref="modelindexRight">
|
||||||
<div class="detail_btn">
|
<div class="detail_btn">
|
||||||
@@ -32,7 +32,7 @@
|
|||||||
</i>
|
</i>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<position ref="position" @modelOnLoad="()=>$emit('modelOnLoad')" @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')" :imgDesignImg=imgDesignImg></position>
|
<position ref="position" @addSketch="()=>$emit('addSketch')" :imgDesignImg=imgDesignImg></position>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -51,7 +51,7 @@ export default defineComponent({
|
|||||||
components:{
|
components:{
|
||||||
position,modelNav
|
position,modelNav
|
||||||
},
|
},
|
||||||
emits:['detailEdit','canvasReload','addSketch','revocation','oppositeRevocation','modelOnLoad','sketchSysToLibrary'],
|
emits:['detailEdit','addSketch','revocation','oppositeRevocation','sketchSysToLibrary'],
|
||||||
setup(props,{emit}) {
|
setup(props,{emit}) {
|
||||||
const {t} = useI18n()
|
const {t} = useI18n()
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
@@ -71,8 +71,8 @@ export default defineComponent({
|
|||||||
modelindexRight:null as any,
|
modelindexRight:null as any,
|
||||||
modelNav:null as any,
|
modelNav:null as any,
|
||||||
})
|
})
|
||||||
const getSubmitData = (value:any,boolean)=>{
|
const getSubmitData = (value:any)=>{
|
||||||
return getDetailListDom.position.getSubmitData(value,boolean)
|
return getDetailListDom.position.getSubmitData(value,)
|
||||||
}
|
}
|
||||||
const showDesignImgDetail = (str:any)=>{
|
const showDesignImgDetail = (str:any)=>{
|
||||||
emit('detailEdit',str)
|
emit('detailEdit',str)
|
||||||
|
|||||||
@@ -34,7 +34,7 @@ export default defineComponent({
|
|||||||
components:{
|
components:{
|
||||||
position,
|
position,
|
||||||
},
|
},
|
||||||
emits:['canvasReload','addSketch','deleteItem','sketchSysToLibrary'],
|
emits:['addSketch','deleteItem','sketchSysToLibrary'],
|
||||||
props:{
|
props:{
|
||||||
},
|
},
|
||||||
setup(props,{emit}) {
|
setup(props,{emit}) {
|
||||||
@@ -79,25 +79,25 @@ export default defineComponent({
|
|||||||
detailData.selectDetail?.id &&
|
detailData.selectDetail?.id &&
|
||||||
detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
|
detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
|
||||||
){
|
){
|
||||||
Modal.confirm({
|
resolve()
|
||||||
title: t('collectionModal.jsContent6'),
|
// Modal.confirm({
|
||||||
icon: createVNode(ExclamationCircleOutlined),
|
// title: t('collectionModal.jsContent6'),
|
||||||
okText: 'Yes',
|
// icon: createVNode(ExclamationCircleOutlined),
|
||||||
cancelText: 'No',
|
// okText: 'Yes',
|
||||||
mask:false,
|
// cancelText: 'No',
|
||||||
centered:true,
|
// mask:false,
|
||||||
onOk() {
|
// centered:true,
|
||||||
resolve(true)
|
// onOk() {
|
||||||
emit('canvasReload')
|
// resolve(true)
|
||||||
},
|
// emit('canvasReload')
|
||||||
onCancel(){
|
// },
|
||||||
resolve(false)
|
// onCancel(){
|
||||||
}
|
// resolve(false)
|
||||||
});
|
// }
|
||||||
|
// });
|
||||||
}else{
|
}else{
|
||||||
resolve(true)
|
resolve(true)
|
||||||
if(detailData.selectDetail.id !== item.id){
|
if(detailData.selectDetail.id !== item.id){
|
||||||
emit('canvasReload')
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}).then((rv)=>{
|
}).then((rv)=>{
|
||||||
@@ -117,7 +117,6 @@ export default defineComponent({
|
|||||||
const maxObj = detailData.designDetail.clothes.find(item => item.priority === maxValue);
|
const maxObj = detailData.designDetail.clothes.find(item => item.priority === maxValue);
|
||||||
store.commit('DesignDetail/setDesignColthes',maxObj.id)
|
store.commit('DesignDetail/setDesignColthes',maxObj.id)
|
||||||
}
|
}
|
||||||
emit('canvasReload')
|
|
||||||
emit('deleteItem')
|
emit('deleteItem')
|
||||||
}
|
}
|
||||||
const addSketch = ()=>{
|
const addSketch = ()=>{
|
||||||
|
|||||||
@@ -49,7 +49,7 @@ export default defineComponent({
|
|||||||
type:Boolean,
|
type:Boolean,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
emits:['canvasReload','addSketch','modelOnLoad'],
|
emits:['addSketch'],
|
||||||
setup(props,{emit}) {
|
setup(props,{emit}) {
|
||||||
const {t} = useI18n()
|
const {t} = useI18n()
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
@@ -137,7 +137,6 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
emit('modelOnLoad')
|
|
||||||
initMoveableForSelected()
|
initMoveableForSelected()
|
||||||
},500);
|
},500);
|
||||||
};
|
};
|
||||||
@@ -403,7 +402,7 @@ export default defineComponent({
|
|||||||
const upDataDetail = async ()=>{
|
const upDataDetail = async ()=>{
|
||||||
//同步到selectDetail数据中,
|
//同步到selectDetail数据中,
|
||||||
// getDetailListData.designDetail
|
// getDetailListData.designDetail
|
||||||
let {scale,offset,priority,transpose,rotate,position,imageSize} = await getSubmitData(selectItem.selectDetail,false)
|
let {scale,offset,priority,transpose,rotate,position,imageSize} = await getSubmitData(selectItem.selectDetail)
|
||||||
selectItem.selectDetail.layersObject[0].scale = scale
|
selectItem.selectDetail.layersObject[0].scale = scale
|
||||||
selectItem.selectDetail.layersObject[1].scale = scale
|
selectItem.selectDetail.layersObject[1].scale = scale
|
||||||
selectItem.selectDetail.layersObject[0].offset = offset
|
selectItem.selectDetail.layersObject[0].offset = offset
|
||||||
@@ -428,9 +427,9 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
return arr
|
return arr
|
||||||
}
|
}
|
||||||
const getSubmitData = async (value:any,isNoComputed)=>{
|
const getSubmitData = async (value:any)=>{
|
||||||
let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
|
let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
|
||||||
if(!detailData.frontBack?.body?.layersObject?.[0]?.imageSize || isNoComputed){
|
if(!detailData.frontBack?.body?.layersObject?.[0]?.imageSize){
|
||||||
return{
|
return{
|
||||||
scale:value.layersObject[0].scale,
|
scale:value.layersObject[0].scale,
|
||||||
offset:value.layersObject[0].offset,
|
offset:value.layersObject[0].offset,
|
||||||
|
|||||||
@@ -73,14 +73,10 @@ const DesignDetail : Module<DesignDetail,RootState> = {
|
|||||||
front[index] = v.layersObject[i]
|
front[index] = v.layersObject[i]
|
||||||
front[index].style.zIndex = v.priority + 10
|
front[index].style.zIndex = v.priority + 10
|
||||||
front[index].id = v.id
|
front[index].id = v.id
|
||||||
front[index].undividedLayer = v.undividedLayer
|
|
||||||
front[index].undividedLayerWithSinglePrint = v?.undividedLayerWithSinglePrint
|
|
||||||
}else{
|
}else{
|
||||||
back[index] = v.layersObject[i]
|
back[index] = v.layersObject[i]
|
||||||
back[index].style.zIndex = v.priority
|
back[index].style.zIndex = v.priority
|
||||||
back[index].id = v.id
|
back[index].id = v.id
|
||||||
back[index].undividedLayer = v.undividedLayer
|
|
||||||
back[index].undividedLayerWithSinglePrint = v?.undividedLayerWithSinglePrint
|
|
||||||
// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
|
// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
|
||||||
}
|
}
|
||||||
if(state.printZIndex < v.priority){
|
if(state.printZIndex < v.priority){
|
||||||
@@ -200,11 +196,8 @@ const DesignDetail : Module<DesignDetail,RootState> = {
|
|||||||
printObject:null,
|
printObject:null,
|
||||||
trims:null,
|
trims:null,
|
||||||
type:null,
|
type:null,
|
||||||
undividedLayer:null,
|
|
||||||
undividedLayer_:null,
|
|
||||||
transpose:[1,1],
|
transpose:[1,1],
|
||||||
rotate:0,
|
rotate:0,
|
||||||
undividedLayerWithSinglePrint:null,
|
|
||||||
}
|
}
|
||||||
if(!state.currentDetailType)state.currentDetailType = 'sketch'
|
if(!state.currentDetailType)state.currentDetailType = 'sketch'
|
||||||
state.designDetail.clothes.forEach((item:any) => {
|
state.designDetail.clothes.forEach((item:any) => {
|
||||||
@@ -258,8 +251,6 @@ const DesignDetail : Module<DesignDetail,RootState> = {
|
|||||||
let el:any = document.querySelector('.molepositon .perview_img')
|
let el:any = document.querySelector('.molepositon .perview_img')
|
||||||
await new Promise((resolve, reject) => {
|
await new Promise((resolve, reject) => {
|
||||||
if(!state.frontBack?.body?.path){
|
if(!state.frontBack?.body?.path){
|
||||||
state.frontBack.front[0].undividedLayer = value.rv.clothes[0].undividedLayer
|
|
||||||
state.frontBack.front[0].undividedLayerWithSinglePrint = value.rv.clothes[0]?.undividedLayerWithSinglePrint
|
|
||||||
resolve('')
|
resolve('')
|
||||||
}
|
}
|
||||||
const img = new Image();
|
const img = new Image();
|
||||||
@@ -290,14 +281,10 @@ const DesignDetail : Module<DesignDetail,RootState> = {
|
|||||||
state.frontBack.front[index] = item.layersObject[i]
|
state.frontBack.front[index] = item.layersObject[i]
|
||||||
// state.frontBack.front[index].style.zIndex = v.priority
|
// state.frontBack.front[index].style.zIndex = v.priority
|
||||||
state.frontBack.front[index].id = item.id
|
state.frontBack.front[index].id = item.id
|
||||||
state.frontBack.front[index].undividedLayer = item.undividedLayer
|
|
||||||
state.frontBack.front[index].undividedLayerWithSinglePrint = item?.undividedLayerWithSinglePrint
|
|
||||||
}else{
|
}else{
|
||||||
state.frontBack.back[index] = item.layersObject[i]
|
state.frontBack.back[index] = item.layersObject[i]
|
||||||
// state.frontBack.back[index].style.zIndex = v.priority
|
// state.frontBack.back[index].style.zIndex = v.priority
|
||||||
state.frontBack.back[index].id = item.id
|
state.frontBack.back[index].id = item.id
|
||||||
state.frontBack.back[index].undividedLayer = item.undividedLayer
|
|
||||||
state.frontBack.back[index].undividedLayerWithSinglePrint = item?.undividedLayerWithSinglePrint
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -336,8 +323,6 @@ const DesignDetail : Module<DesignDetail,RootState> = {
|
|||||||
},
|
},
|
||||||
gradient:item.gradient,
|
gradient:item.gradient,
|
||||||
}
|
}
|
||||||
detailItem.undividedLayer = item.undividedLayer
|
|
||||||
detailItem.undividedLayerWithSinglePrint = item?.undividedLayerWithSinglePrint
|
|
||||||
if(detailItem.newDetail?.sketch?.id && !detailItem.id){
|
if(detailItem.newDetail?.sketch?.id && !detailItem.id){
|
||||||
state.designDetail.clothes.push(detailItem)
|
state.designDetail.clothes.push(detailItem)
|
||||||
}
|
}
|
||||||
@@ -383,8 +368,6 @@ const DesignDetail : Module<DesignDetail,RootState> = {
|
|||||||
// },
|
// },
|
||||||
// gradient:item.gradient,
|
// gradient:item.gradient,
|
||||||
// }
|
// }
|
||||||
// state.selectDetail.undividedLayer = item.undividedLayer
|
|
||||||
// state.selectDetail.undividedLayerWithSinglePrint = item?.undividedLayerWithSinglePrint
|
|
||||||
// if(state.selectDetail.newDetail?.sketch?.id && !state.selectDetail.id){
|
// if(state.selectDetail.newDetail?.sketch?.id && !state.selectDetail.id){
|
||||||
// state.designDetail.clothes.push(state.selectDetail)
|
// state.designDetail.clothes.push(state.selectDetail)
|
||||||
// }
|
// }
|
||||||
|
|||||||
Reference in New Issue
Block a user