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