diff --git a/src/component/Canvas/CanvasEditor/commands/RedGreenCommands.js b/src/component/Canvas/CanvasEditor/commands/RedGreenCommands.js index 9b3ffaa6..56638c2f 100644 --- a/src/component/Canvas/CanvasEditor/commands/RedGreenCommands.js +++ b/src/component/Canvas/CanvasEditor/commands/RedGreenCommands.js @@ -159,6 +159,8 @@ export class BatchInitializeRedGreenModeCommand extends Command { absolutePositioned: true, opacity: 0.01, // 设置为几乎透明 id: generateId("redGreenImageMask_"), + rx: 15, + ry: 15, }); // this.canvas.add(this.redGreenImageMask); this.canvas.clipPath = this.redGreenImageMask; diff --git a/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue b/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue index 675c9db4..9d2e2de9 100644 --- a/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue +++ b/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue @@ -22,6 +22,7 @@ const props = defineProps({ default: true, // 是否显示图层面板 }, isBackgroundChangeable: Boolean, + isChangeCanvasSize: Boolean, }); const emit = defineEmits([ @@ -284,6 +285,7 @@ onMounted(() => {
{{ $t("Canvas.width") }} {
{{ $t("Canvas.height") }} CanvasConfig, // 默认配置 }, + isChangeCanvasSize: { + type: Boolean, + default: true, // 是否允许修改画布大小 + }, showLayersPanel: { type: Boolean, default: true, // 是否显示图层面板 @@ -503,7 +507,7 @@ onMounted(async () => { clearTimeout(trailingTimeout); trailingTimeout = setTimeout(() => { optimizeCanvasRendering(canvasManager.canvas, ()=> handleWindowResize()); - }, 200); + }, 1000); }); observer.observe(canvasContainerRef.value); // 使用window的resize事件代替ResizeObserver @@ -566,38 +570,38 @@ async function handleWindowResize() { if(!canvasManager) return; await updateCanvasSize(); // 确保显示的缩放信息是最新的 - currentZoom.value = Math.round(canvasManager.canvas.getZoom() * 100); - setInitZoom(); + await setInitZoom(); await new Promise(requestAnimationFrame); await layerManager?.updateLayersObjectsInteractivity?.(); } -function setInitZoom(){ - if (props.config.initZoom) { +async function setInitZoom(){ + if (props.config.initZoom && !props.enabledRedGreenMode) { const width = canvasManager.width; const height = canvasManager.height; - const cwidth = props.config.width; - const cheight = props.config.height; + const cwidth = canvasWidth.value; + const cheight = canvasHeight.value; let zoom = Math.min(1, width / cwidth, height / cheight); if (zoom < 1) zoom -= 0.05; - setZoom(zoom); // 设置画布缩放 + await setZoom(zoom); // 设置画布缩放 + }else{ + currentZoom.value = Math.round(canvasManager.canvas.getZoom() * 100); } } function resetZoom() { canvasManager.resetZoom(); } -function setZoom(zoom) { - setTimeout(() => { - if (!canvasManager) return; - const newZoom = Math.max(zoom, 0.1); - // 使用画布中心作为缩放点 - const centerPoint = { - x: canvasManager.canvas.width / 2, - y: canvasManager.canvas.height / 2, - }; - canvasManager.animateZoom(centerPoint, newZoom); - }); +async function setZoom(zoom) { + await new Promise(requestAnimationFrame); + if (!canvasManager) return; + const newZoom = Math.max(zoom, 0.1); + // 使用画布中心作为缩放点 + const centerPoint = { + x: canvasManager.canvas.width / 2, + y: canvasManager.canvas.height / 2, + }; + canvasManager.animateZoom(centerPoint, newZoom); } function zoomIn() { @@ -1034,6 +1038,11 @@ defineExpose({ width = 0,// 导出的图片宽度 height = 0, // 导出的图片高度 } = {}) => { + console.log('导出图片',{isContainFixed, +isContainFixedOther, +isPrintTrimsNoRepeat, +isPrintTrimsRepeat, +isContainNormalLayer}) var base64 = await canvasManager.exportImage({ isContainBg, isContainFixed, @@ -1047,6 +1056,7 @@ defineExpose({ expPicType, isEnhanceImg, }); + console.log('导出图片完成',) if(width > 0 && height > 0){ base64 = await resizeImage(base64, width, height); } @@ -1190,7 +1200,7 @@ defineExpose({ :brushSize="brushSize" :enabledRedGreenMode="enabledRedGreenMode" :showLayersPanel="showLayersPanel" - :isBackgroundChangeable="isBackgroundChangeable" + :isChangeCanvasSize="props.isChangeCanvasSize" @update:canvasWidth="canvasWidth = $event" @update:canvasHeight="canvasHeight = $event" @update:canvasColor="canvasColor = $event" @@ -1467,7 +1477,7 @@ defineExpose({ position: absolute; } -.background-grid { +.canvas-container { --offsetX: 50%; --offsetY: 50%; --size: 10px; diff --git a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js index bf7ea1a6..ae7d8ca9 100644 --- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js +++ b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js @@ -459,6 +459,14 @@ export class CanvasManager { const fheight = fixedLayerObj.height * fixedLayerObj.scaleY const bwidth = backgroundObject.width * backgroundObject.scaleX const bheight = backgroundObject.height * backgroundObject.scaleY + console.log(fixedLayerObj.width, + fixedLayerObj.scaleX, + fixedLayerObj.height, + fixedLayerObj.scaleY, + backgroundObject.width, +backgroundObject.scaleX, +backgroundObject.height, +backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer') if(Math.abs(fwidth/bwidth - fheight/bheight) < 0.1) return; this.canvasWidth.value = fwidth this.canvasHeight.value = fheight @@ -1304,6 +1312,7 @@ export class CanvasManager { canvasColor: this.canvasColor.value, activeLayerId: this.layerManager?.activeLayerId?.value, }; + this.FixJsonIdLoss(data); console.log("获取画布JSON数据...", data); return JSON.stringify(data); } catch (error) { @@ -1311,7 +1320,6 @@ export class CanvasManager { throw new Error("获取画布JSON失败"); } } - loadJSON(json, calllBack) { // 确保传入的json是字符串格式 @@ -1324,10 +1332,11 @@ export class CanvasManager { try { const parsedJson = JSON.parse(json); console.log("加载画布JSON数据:", parsedJson); + this.FixJsonIdLoss(parsedJson); this.canvasWidth.value = parsedJson.canvasWidth || this.width; this.canvasHeight.value = parsedJson.canvasHeight || this.height; this.canvasColor.value = parsedJson.canvasColor || this.backgroundColor; - + // eslint-disable-next-line no-async-promise-executor return new Promise(async (resolve, reject) => { const tempLayers = parsedJson?.layers || []; @@ -1441,6 +1450,22 @@ export class CanvasManager { throw new Error("解析JSON失败，请检查输入格式: " + error.message); } } + /** 修复JSON数据中的ID丢失问题 */ + FixJsonIdLoss(json){ + const layers = json?.layers || []; + const objects = json?.canvas?.objects || []; + layers.forEach((layer) => { + if(!layer.fabricObjects?.length && !layer.fabricObject){ + const obj = objects?.find((o) => o.layerId === layer.id); + if(!obj) return; + layer.fabricObjects = [{ + id: obj.id, + type: obj.type, + }] + } + }) + } + /** * 创建其他图层：印花、颜色、元素... diff --git a/src/component/Canvas/CanvasEditor/utils/imageHelper.js b/src/component/Canvas/CanvasEditor/utils/imageHelper.js index 15bd7bf6..47897fc9 100644 --- a/src/component/Canvas/CanvasEditor/utils/imageHelper.js +++ b/src/component/Canvas/CanvasEditor/utils/imageHelper.js @@ -2208,8 +2208,13 @@ export const resizeImage = async (base64, width, height) => { const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; + const scale = height / img.height; + const w = img.width * scale; + const h = img.height * scale; + const x = (width - w) / 2; + const y = 0; const ctx = canvas.getContext("2d"); - ctx.drawImage(img, 0, 0, width, height); + ctx.drawImage(img, x, y, w, h); resolve(canvas.toDataURL()); }; img.onerror = reject; diff --git a/src/component/Canvas/OverallCanvas/index.vue b/src/component/Canvas/OverallCanvas/index.vue index be1a788f..39f652ce 100644 --- a/src/component/Canvas/OverallCanvas/index.vue +++ b/src/component/Canvas/OverallCanvas/index.vue @@ -304,7 +304,7 @@ } else if (item.action === ACTIONS.DELETE) { DeleteItemByToken(item.token); } else if (item.action === ACTIONS.ADD) { - DeleteItemByToken(item.token); + DeleteItemByToken(item.data.token); list.value.push(item.data); await addObject(item.data); } diff --git a/src/component/Detail/DesignDetail.vue b/src/component/Detail/DesignDetail.vue index c240ac61..dd36ee2f 100644 --- a/src/component/Detail/DesignDetail.vue +++ b/src/component/Detail/DesignDetail.vue @@ -129,6 +129,7 @@ import { Modal,message } from 'ant-design-vue'; import {getUploadUrl,segmentImage,setGradual,rgbToHsv,rgbaToHex} from '@/tool/util' import { useStore } from "vuex"; import { openGuide,driverObj__ } from "@/tool/guide"; +import { KeyValueDB } from "@/tool/indexedDB"; import { useI18n } from 'vue-i18n' export default defineComponent({ components:{ @@ -190,7 +191,7 @@ export default defineComponent({ watch(()=>detailData.selectDetail,async (newValue,oldValue)=>{ detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id) if(newValue?.path)await getSketchSize() - if(newValue?.id && oldValue?.id && (newValue.id != oldValue.id)){ + if(newValue?.id && (newValue?.id != oldValue?.id)){ store.commit('DesignDetail/changeCanvasKey') } // privewDetail(oldValue) @@ -198,9 +199,9 @@ export default defineComponent({ provide('getCanvasIfEdit',detailData.getCanvasIfEdit) provide('singleOveral',detailData.singleOveral) provide('isEditPattern',detailData.isEditPattern) - const closeModal = ()=>{ - sessionStorage.removeItem('oppositeRevocation') - sessionStorage.removeItem('revocation') + const closeModal = async ()=>{ + await KeyValueDB.remove('oppositeRevocation') + await KeyValueDB.remove('revocation') detailData.designDetailShow = false emit('destroy') } @@ -214,10 +215,9 @@ export default defineComponent({ Https.axiosGet(url).then( async (rv: any) => { //清除画布JSON数据 - sessionStorage.removeItem('canvasList'); - sessionStorage.removeItem('revocation'); - sessionStorage.removeItem('oppositeRevocation'); - sessionStorage.setItem('key', 'value'); + await KeyValueDB.remove('canvasList'); + await KeyValueDB.remove('revocation'); + await KeyValueDB.remove('oppositeRevocation'); store.commit('DesignDetail/setDesignDetail',rv) rv.clothes.forEach((item:any)=>{ let a @@ -272,24 +272,24 @@ export default defineComponent({ } //撤回 - const setRevocation = ()=>{//设置撤销 + const setRevocation = async ()=>{//设置撤销 let itemDetail = JSON.parse(JSON.stringify(detailData.designDetail)) - let revocation:any = JSON.parse((sessionStorage.getItem("revocation") as any)) + let revocation:any = JSON.parse((await KeyValueDB.get("revocation") as any) || 'null') if(!revocation)revocation = [] - // let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any)) + // let oppositeRevocation = JSON.parse((await KeyValueDB.get("oppositeRevocation") as any)) // if(revocation?.[0]?.designItemId != itemDetail.designItemId || revocation?.[0]?.designItemId == undefined){ // revocation = [] // } revocation.push({designData:itemDetail,position:null}) detailData.revocationShow = revocation?.length - sessionStorage.setItem('revocation', JSON.stringify(revocation)); - sessionStorage.setItem('oppositeRevocation',JSON.stringify([])); + await KeyValueDB.set('revocation', JSON.stringify(revocation)); + await KeyValueDB.set('oppositeRevocation',JSON.stringify([])); } provide('setRevocation',setRevocation) - const revocation = ()=>{//撤回 - let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any)) - let revocation = JSON.parse((sessionStorage.getItem("revocation") as any)) + const revocation = async ()=>{//撤回 + let oppositeRevocation = JSON.parse((await KeyValueDB.get("oppositeRevocation") as any) || 'null') + let revocation = JSON.parse((await KeyValueDB.get("revocation") as any) || 'null') if(revocation.length <= 1)return oppositeRevocation.push(revocation[revocation.length-1]) revocation.splice(revocation.length-1,1) @@ -301,14 +301,14 @@ export default defineComponent({ store.commit('DesignDetail/setFrontBack',revocation[revocation.length-1].position) } store.commit('DesignDetail/setDesignColthes',detailData.selectDetail.id) - sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation)); - sessionStorage.setItem('revocation', JSON.stringify(revocation)); + await KeyValueDB.set('oppositeRevocation', JSON.stringify(oppositeRevocation)); + await KeyValueDB.set('revocation', JSON.stringify(revocation)); // clearSelect() detailData.positionKey++ } - const oppositeRevocation = ()=>{//反撤回 - let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any)) - let revocation = JSON.parse((sessionStorage.getItem("revocation") as any)) + const oppositeRevocation = async ()=>{//反撤回 + let oppositeRevocation = JSON.parse((await KeyValueDB.get("oppositeRevocation") as any) || 'null') + let revocation = JSON.parse((await KeyValueDB.get("revocation") as any) || 'null') // if(!oppositeRevocation[oppositeRevocation.length-1].designData)return if(oppositeRevocation.length < 1)return if(oppositeRevocation[oppositeRevocation.length-1]?.designData){ @@ -321,8 +321,8 @@ export default defineComponent({ detailData.revocationShow = revocation.length oppositeRevocation.splice(oppositeRevocation.length-1,1) detailData.oppositeRevocationShow = oppositeRevocation.length - sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation)); - sessionStorage.setItem('revocation', JSON.stringify(revocation)); + await KeyValueDB.set('oppositeRevocation', JSON.stringify(oppositeRevocation)); + await KeyValueDB.set('revocation', JSON.stringify(revocation)); // this.clearSelect() detailData.positionKey++ } @@ -446,7 +446,6 @@ export default defineComponent({ let value = { currentType : JSON.parse(JSON.stringify(detailData.currentDetailType)), rv:rv, - fun:setRevocation } if(detailData?.designDetail?.newModel)detailData.designDetail.oldModel = JSON.parse(JSON.stringify(detailData.designDetail.newModel)) @@ -499,7 +498,7 @@ export default defineComponent({ Https.axiosPost(Https.httpUrls.designSingle, data).then(async (rv)=>{ saveCanvasJSONToSession() // store.commit('DesignDetail/setPraeview',rv) - const sessionCanvasList = sessionStorage.getItem('canvasList'); + const sessionCanvasList = await KeyValueDB.get('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); @@ -561,11 +560,10 @@ export default defineComponent({ segmentImage(detailData.selectDetail.maskUrl,partialDesign,size).then(async (rv)=>{ let front = detailData.frontBack.front[detailData.imgDomIndex] let back = detailData.frontBack.back[detailData.imgDomIndex] - if(!front?.oldImageUrl)front.oldImageUrl = front.imageUrl - if(!front?.oldMaskUrl)front.oldMaskUrl = front.maskUrl - if(!back?.oldImageUrl)back.oldImageUrl = back.imageUrl - if(!front?.oldMaskUrl)store.commit('DesignDetail/updataDetailItem',{maskUrl:front.oldMaskUrl}) + front.oldImageUrl = '' + front.oldMaskUrl = '' + back.oldImageUrl = '' front.imageUrl = rv.targetFrontUrl back.imageUrl = rv.targetBackUrl store.commit('DesignDetail/canvasPreviewUpdata',{type:detailData.isEditPattern.value?'all':detailData.currentDetailType,callBack:setRevocation}) @@ -575,9 +573,9 @@ export default defineComponent({ img.src = detailData.selectDetail.path }) } - const saveCanvasJSONToSession = ()=>{ + const saveCanvasJSONToSession = async ()=>{ let canvasJSON = detailDom.canvasBox.getCanvasJSON() - const sessionCanvasList = sessionStorage.getItem('canvasList'); + const sessionCanvasList = await KeyValueDB.get('canvasList'); const list = sessionCanvasList ? JSON.parse(sessionCanvasList) : [] let index = -1 list.forEach((item:any,i:number)=>{ @@ -590,7 +588,7 @@ export default defineComponent({ }else{ list[index].canvasJSON = canvasJSON } - sessionStorage.setItem('canvasList', JSON.stringify(list)); + await KeyValueDB.set('canvasList', JSON.stringify(list)); } const detailEdit = async (str:any)=>{ if(str){ @@ -604,8 +602,10 @@ export default defineComponent({ // detailDom.canvasBox.editFront(str) // } detailDom.canvasBox.editFront(str) - let otherData = await updateOtherLayers('single') - await detailDom.canvasBox.updateOtherLayers(otherData) + if(str == 'canvasEditor'){ + let otherData = await updateOtherLayers('single') + await detailDom.canvasBox.updateOtherLayers(otherData) + } detailData.isEditPattern.value = str } }else{ @@ -725,12 +725,12 @@ export default defineComponent({ coverRevocation() detailDom.detailLeft.sketchSysToLibrary() } - const coverRevocation = ()=>{ + const coverRevocation = async ()=>{ let itemDetail = JSON.parse(JSON.stringify(detailData.designDetail)) - let revocation = JSON.parse((sessionStorage.getItem("revocation") as any)) + let revocation = JSON.parse((await KeyValueDB.get("revocation") as any) || 'null') revocation.splice(revocation.length-1,1,{designData:itemDetail,position:null}) - sessionStorage.setItem('revocation', JSON.stringify(revocation)); - sessionStorage.setItem('oppositeRevocation',JSON.stringify([])); + await KeyValueDB.set('revocation', JSON.stringify(revocation)); + await KeyValueDB.set('oppositeRevocation',JSON.stringify([])); } const setSloganData = (data:any)=>{ detailData.selectDetail.sketchString = data @@ -740,9 +740,9 @@ export default defineComponent({ } onMounted(()=>{ }) - onBeforeUnmount(()=>{ - sessionStorage.removeItem('oppositeRevocation') - sessionStorage.removeItem('revocation') + onBeforeUnmount(async ()=>{ + await KeyValueDB.remove('oppositeRevocation') + await KeyValueDB.remove('revocation') store.commit('DesignDetail/clearDetailData') }) @@ -775,36 +775,7 @@ export default defineComponent({ window.removeEventListener('beforeunload',beforeunload) } window.addEventListener('beforeunload',beforeunload) - // let url = Https.httpUrls.getDesignDetail + `?designItemId=34242&designPythonOutfitId=34004` - // this.loadingShow = true - // Https.axiosGet(url).then( - // async (rv: any) => { - // rv.clothes.forEach((item:any)=>{ - // let a - // if(item.layersObject[0].imageCategory.indexOf("back") == -1){ - // a = item.layersObject[0] - // item.layersObject[0] = item.layersObject[1] - // item.layersObject[1] = a - // } - // if(item.printObject.prints == null){ - // item.printObject.prints = [{}] - // } - // }) - // this.store.commit('setDesignItemDetail',rv) - // if(rv.others[0].printObject.path == null){ - // this.body = false - // }else{ - // this.body = true - // } - // this.setImgSize() - // this.generateHighDesignImg = rv.highDesignUrl - // this.designShowPrview = 1 - // this.designDetailShow = true - // this.loadingShow = false - // } - // ).catch(rv=>{ - // this.loadingShow = false - // }) + }, }) diff --git a/src/component/Detail/canvas/index.vue b/src/component/Detail/canvas/index.vue index 917a53de..ad98a5a6 100644 --- a/src/component/Detail/canvas/index.vue +++ b/src/component/Detail/canvas/index.vue @@ -18,7 +18,8 @@ :clothing-image-opts="{ imageMode:'contains', }" - :hideCanvas="hideCanvas" + :isChangeCanvasSize="false" + :hideCanvas="hideCanvas || !isEditPattern" ref="editCanvas"> @@ -34,7 +35,7 @@ :clothing-image-opts="{ imageMode:'contains', }" - :hideCanvas="hideCanvas" + :hideCanvas="hideCanvas || !isEditPattern" ref="editCanvasBackFront">
@@ -117,7 +118,7 @@ export default defineComponent({ getCanvasIfEdit:inject('getCanvasIfEdit')as any, canvasInstance:null as any, canvasJSON:'', - hideCanvas: computed(()=>(store.state.Workspace.projectPath !== route.fullPath && props.isEditPattern)), + hideCanvas: computed(()=>(store.state.Workspace.projectPath !== route.fullPath)), otherData:computed(()=>({ canvasId: store.state.DesignDetail.selectDetail.canvasId, color: store.state.DesignDetail.selectDetail.color, @@ -135,38 +136,20 @@ export default defineComponent({ const editFront = (str:any)=>{//编辑前后片 let canvasJSON = '' as any - if(detailData.currentView === 'canvasEditor'){ - sessionStorage.setItem('sketchEdit',detailDom.editCanvas.getJSON()) - canvasJSON = sessionStorage.getItem('frontBackEdit'); - }else if(detailData.currentView === 'redGreenExample'){ - sessionStorage.setItem('frontBackEdit',detailDom.editCanvasBackFront.getJSON()) - canvasJSON = sessionStorage.getItem('sketchEdit'); - } // detailData.canvasLoad = false detailData.currentView = str - if(canvasJSON){ - // detailData.canvasLoad = true + if(detailData.currentView === 'redGreenExample'){ nextTick(()=>{ - if(detailData.currentView === 'redGreenExample'){ - detailDom.editCanvas.loadJSON(canvasJSON) - }else{ - detailDom.editCanvasBackFront.loadJSON(canvasJSON) - } + setCanvas(detailData.selectDetail.path).then(()=>{ + // detailData.canvasLoad = true + }) }) }else{ - if(detailData.currentView === 'redGreenExample'){ - nextTick(()=>{ - setCanvas(detailData.selectDetail.path).then(()=>{ - // detailData.canvasLoad = true - }) + nextTick(()=>{ + setCanvas(detailData.frontBack.front[detailData.imgDomIndex].maskUrl).then(()=>{ + // detailData.canvasLoad = true }) - }else{ - nextTick(()=>{ - setCanvas(detailData.frontBack.front[detailData.imgDomIndex].maskUrl).then(()=>{ - // detailData.canvasLoad = true - }) - }) - } + }) } } const updateOtherLayers = (obj:any)=>{ @@ -211,6 +194,7 @@ export default defineComponent({ // detailData.canvasConfig.height = domHeight detailData.canvasConfig.width = img.width detailData.canvasConfig.height = img.height + detailData.canvasConfig.initZoom = true res('') } @@ -339,7 +323,6 @@ export default defineComponent({ const canvasLoadJsonSuccess = async ()=>{ let otherData = await props.updateOtherLayers() await updateOtherLayers(otherData) - if(detailData.changeSketchUpdateFrontBack){ await detailData.changeSketchUpdateFrontBack() detailData.changeSketchUpdateFrontBack = null @@ -389,9 +372,6 @@ export default defineComponent({ if(front?.oldMaskUrl)front.maskUrl = front.oldMaskUrl if(back?.oldImageUrl)back.imageUrl = back.oldImageUrl if(front?.oldMaskUrl)store.commit('DesignDetail/updataDetailItem',{maskUrl:front.maskUrl}) - - sessionStorage.removeItem('frontBackEdit'); - sessionStorage.removeItem('sketchEdit'); detailData.canvasLoad = false // privewDetail() }) diff --git a/src/component/Detail/detailLeft/sketch.vue b/src/component/Detail/detailLeft/sketch.vue index 0e8946c7..34207478 100644 --- a/src/component/Detail/detailLeft/sketch.vue +++ b/src/component/Detail/detailLeft/sketch.vue @@ -79,7 +79,6 @@ export default defineComponent({ if(data?.imgUrl)data.url = data.imgUrl let value = { data, - id, } if(detailData.currentDetailType == 'sketch'){ detailData.selectDetail.sketchString = '' diff --git a/src/component/Detail/detailRight/editPrintElement.vue b/src/component/Detail/detailRight/editPrintElement.vue index 53aecc93..1fbefccb 100644 --- a/src/component/Detail/detailRight/editPrintElement.vue +++ b/src/component/Detail/detailRight/editPrintElement.vue @@ -53,7 +53,7 @@ --> @@ -252,7 +252,7 @@ export default defineComponent({ designType:data.designType, ifSingle:editPrintElementData.stateOverallSingle == 'single', level2Type:data.level2Type, - location, + location:editPrintElementData.stateOverallSingle == 'single'?location:[0,0], minIOPath:data.minIOPath || data.originalUrl, path:data.url, priority:editPrintElementData.printZIndex, @@ -276,7 +276,8 @@ export default defineComponent({ }else{ let x = Number(style.left.replace(/px/g,'')) let y = Number(style.top.replace(/px/g,'')) - location = [(x*sketchWH[0]) ,(y*sketchWH[1])] + location = item.location + // location = [(x*sketchWH[0]) ,(y*sketchWH[1])] scale = item.scale // scale = [item.pattern.style.width/item.pattern.style.height,item.pattern.style.height/item.pattern.style.width] // location = [item.pattern.style.left,item.pattern.style.top] @@ -380,19 +381,21 @@ export default defineComponent({ } if(item.ifSingle){ editPrintElementData.printStyleList[props.type].single.push(item) - }else{ + } + if(!item.ifSingle){ item.token = Date.now().toString() + (editPrintElementData.printStyleList[props.type].overall.length + '') // editPrintElementData.printStyleList[props.type].overall = [] editPrintElementData.printStyleList[props.type].overall.push(item) - setTimeout(()=>{ - editPrintElementDom.pingpuRef.updataList([ - { - action: ACTIONS.ADD, - data: item, - }, - ]); - }) - + if(editPrintElementData.stateOverallSingle == 'overall'){ + setTimeout(()=>{ + editPrintElementDom.pingpuRef.updataList([ + { + action: ACTIONS.ADD, + data: item, + }, + ]); + }) + } } } const setPosition = ()=>{ @@ -423,10 +426,10 @@ export default defineComponent({ editPrintElementData.printStyleList[props.type].single = [] editPrintElementData.printStyleList[props.type].overall = [] arr.forEach((item:any)=>{ - if(!item.ifSingle){ - editPrintElementData.stateOverallSingle = 'overall', - state = false - } + // if(!item.ifSingle){ + // editPrintElementData.stateOverallSingle = 'overall', + // state = false + // } getItemPosition(item) }) setItemPosition() @@ -470,16 +473,21 @@ export default defineComponent({ setPosition() },{immediate: true,}) watch(()=>editPrintElementData.stateOverallSingle,(newVal)=>{ - let arr = editPrintElementData.printStyleList[props.type][newVal] + let arr:any = editPrintElementData.selectDetail.newDetail?.print || editPrintElementData.selectDetail.printObject.prints + if(props.type == 'element'){ + arr = editPrintElementData.selectDetail.newDetail?.element || editPrintElementData.selectDetail.trims.prints + } + if(editPrintElementData.selectDetail.newDetail?.[editPrintElementData.currentDetailType]){ + arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType] + } if(arr.length > 0){ editPrintElementData.imgDomIndex = 0 - if(newVal == 'overall'){ - editPrintElementData.printStyleList[props.type].single = [] - editPrintElementData.printStyleList[props.type].overall = [] + editPrintElementData.printStyleList[props.type][newVal] = [] + // editPrintElementData.printStyleList[props.type].single = [] + // editPrintElementData.printStyleList[props.type].overall = [] arr.forEach((item:any,index:number) => { getItemPosition(item) }); - } }else{ editPrintElementData.imgDomIndex = -1 } @@ -900,8 +908,7 @@ export default defineComponent({ } const inputFillOffset = (offset:any)=>{ let arr = editPrintElementData.printStyleList[props.type].overall - let location = [offset.left * offset.size[0] / 100,offset.top * offset.size[1] / 100] - arr[editPrintElementData.imgDomIndex].location = location + arr[editPrintElementData.imgDomIndex].location = [offset.left * offset.size[0] / 100,offset.top * offset.size[1] / 100] editPrintElementDom.pingpuRef.updataList([ { action: ACTIONS.UPDATE, @@ -1111,9 +1118,8 @@ export default defineComponent({ .habit_System_Designer { align-items: center; display: flex; - justify-content: flex-end; margin-top: 1.8rem; - margin-right: .8rem; + margin-left: .8rem; .ant-slider-track, .ant-slider-rail { @@ -1207,20 +1213,22 @@ export default defineComponent({ // width: 100%; // max-height: 70%; width: max-content; + + overflow-y: auto; + overflow-x: hidden; &.active{ flex-direction: row; } + &::-webkit-scrollbar { + display: none; + } .designOpenrtion_imgMask{ - width: auto; - height: auto; + width: 100%; + height: 100%; min-width: 60%; - overflow-y: auto; - overflow-x: hidden; // max-height: 80%; position: relative; - &::-webkit-scrollbar { - display: none; - } + >img{ z-index: 2; position: relative; diff --git a/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue b/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue index b1142f27..2f5418db 100644 --- a/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue +++ b/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue @@ -17,7 +17,7 @@ :max="1000" :step="1" is-input - :tipFormatter="(v) => `${scale}%`" + :tipFormatter="(v) => `${scale.toFixed(0)}%`" :value="scale" @input="inputFillScale" /> @@ -121,8 +121,8 @@ ]); const inputFillScale = (e) => { const scale = e / 100; - console.log(scale) - emit("inputFillScale", scale); + console.log(scale.toFixed(2)) + emit("inputFillScale", scale.toFixed(2)); }; const inputOffset = async (e:any)=>{ emit('inputFillOffset', {...e,size: await sketchSize()}) diff --git a/src/component/Detail/model/modelNav.vue b/src/component/Detail/model/modelNav.vue index 4e9cd8cc..3b3033d2 100644 --- a/src/component/Detail/model/modelNav.vue +++ b/src/component/Detail/model/modelNav.vue @@ -102,6 +102,7 @@ export default defineComponent({ } }).then((rv)=>{ if(rv)store.commit('DesignDetail/setDesignColthes',item.id) + console.log(JSON.parse(JSON.stringify(item)),'==========') }) } const deleteDetailItem = (id:number)=>{ diff --git a/src/component/Detail/model/modelPosition.vue b/src/component/Detail/model/modelPosition.vue index c606f961..51da1ef3 100644 --- a/src/component/Detail/model/modelPosition.vue +++ b/src/component/Detail/model/modelPosition.vue @@ -36,6 +36,7 @@ import { Https } from "@/tool/https"; import { useStore } from "vuex"; import { useI18n } from 'vue-i18n' import { getMousePosition } from "@/tool/mdEvent"; +import { KeyValueDB } from "@/tool/indexedDB"; import Vue3Moveable from 'vue3-moveable'; import Moveable from 'moveable'; import { parse } from 'vue/compiler-sfc'; @@ -393,11 +394,11 @@ export default defineComponent({ initMoveableForSelected() },{immediate: true,}) - const setRevocation = ()=>{ + const setRevocation = async ()=>{ let frontBack = JSON.parse(JSON.stringify(detailData.frontBack)) - let revocation:any = JSON.parse((sessionStorage.getItem("revocation") as any)) + let revocation:any = JSON.parse((await KeyValueDB.get("revocation") as any) || '[]') revocation.push({designData:null,position:frontBack}) - sessionStorage.setItem('revocation', JSON.stringify(revocation)); + KeyValueDB.set('revocation', JSON.stringify(revocation)); } const upDataDetail = async ()=>{ //同步到selectDetail数据中， diff --git a/src/store/Detail/designDetail.ts b/src/store/Detail/designDetail.ts index f667dc7e..f8e36f91 100644 --- a/src/store/Detail/designDetail.ts +++ b/src/store/Detail/designDetail.ts @@ -175,12 +175,12 @@ const DesignDetail : Module = { state.designDetail.clothes.forEach((item:any) => { if(item.id == data){ state.selectDetail = item - state.frontBack.front.forEach((v:any,index:any)=>{ - v.designOpenrtionBtn = false - if(v.id == data){ - v.designOpenrtionBtn = true - } - }) + // state.frontBack.front.forEach((v:any,index:any)=>{ + // v.designOpenrtionBtn = false + // if(v.id == data){ + // v.designOpenrtionBtn = true + // } + // }) } }); }, @@ -315,6 +315,24 @@ const DesignDetail : Module = { detailItem.offset = [0,0] detailItem.transpose = item.transpose || [1,1] detailItem.rotate = item.rotate || 0 + function isJSONString(str) { + try { + JSON.parse(str); + return true; // 解析成功，是有效的JSON字符串 + } catch (e) { + return false; // 解析失败，不是有效的JSON字符串 + } + } + item.trims?.prints?.forEach((item:any) => { + if(isJSONString(item.object)){ + item.object = JSON.parse(item.object) + } + }); + item.printObject?.prints?.forEach((item:any) => { + if(isJSONString(item.object)){ + item.object = JSON.parse(item.object) + } + }); detailItem.printObject = item.printObject detailItem.trims = item.trims detailItem.type = item.type @@ -345,7 +363,6 @@ const DesignDetail : Module = { uploadDetail(state.selectDetail) } } - if(value.fun)value.fun() }, diff --git a/src/tool/indexedDB.js b/src/tool/indexedDB.js new file mode 100644 index 00000000..c6555325 --- /dev/null +++ b/src/tool/indexedDB.js @@ -0,0 +1,71 @@ +const KeyValueDB = { + dbName: 'kvStorage', + storeName: 'kvStore', + + async init() { + return new Promise((resolve) => { + const request = indexedDB.open(this.dbName, 1); + + request.onupgradeneeded = (e) => { + const db = e.target.result; + if (!db.objectStoreNames.contains(this.storeName)) { + db.createObjectStore(this.storeName); + } + }; + + request.onsuccess = () => resolve(request.result); + }); + }, + + // 设置值（类似 localStorage.setItem） + async set(key, value) { + const db = await this.init(); + return new Promise((resolve) => { + const tx = db.transaction(this.storeName, 'readwrite'); + tx.objectStore(this.storeName).put(value, key); + tx.oncomplete = () => resolve(); + }); + }, + + // 获取值（类似 localStorage.getItem） + async get(key) { + const db = await this.init(); + return new Promise((resolve) => { + const tx = db.transaction(this.storeName, 'readonly'); + const request = tx.objectStore(this.storeName).get(key); + request.onsuccess = () => resolve(request.result); + }); + }, + + // 删除值 + async remove(key) { + const db = await this.init(); + return new Promise((resolve) => { + const tx = db.transaction(this.storeName, 'readwrite'); + tx.objectStore(this.storeName).delete(key); + tx.oncomplete = () => resolve(); + }); + }, + + // 清空所有 + async clear() { + const db = await this.init(); + return new Promise((resolve) => { + const tx = db.transaction(this.storeName, 'readwrite'); + tx.objectStore(this.storeName).clear(); + tx.oncomplete = () => resolve(); + }); + }, + + // 获取所有键 + async keys() { + const db = await this.init(); + return new Promise((resolve) => { + const tx = db.transaction(this.storeName, 'readonly'); + const store = tx.objectStore(this.storeName); + const request = store.getAllKeys(); + request.onsuccess = () => resolve(request.result); + }); + } + }; + export {KeyValueDB} \ No newline at end of file