页面调整

src/component/DetailCopy/canvas/index.vue

@@ -18,18 +18,19 @@
 					<tool ref="tool" class="tool" v-if="canvasObj.id || frontBackCanvasObj.id" @toolLiquefaction="toolLiquefaction" @editFront="editFront" :isEditFrontBack="isEditFrontBack"></tool>
 				</div> -->
 				<div class="contet">
-					<div class="canvas" v-if="!isEditFrontBack" @click.stop>
-						<editCanvas v-if="canvasLoad && currentView === 'canvasEditor'" :config="canvasConfig" 
-							:clothingImageUrl="selectDetail.undividedLayer" 
+					<div class="canvas" v-if="currentView === 'canvasEditor'" @click.stop>
+						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
+							@canvasInit="canvasInit"
+							:clothingImageUrl="selectDetail.undividedLayer"
 							isFixedErasable
+							showFixedLayer
 							:clothing-image-opts="{
 								imageMode:'contains',
 							}"
 							ref="editCanvas">
 							<template #customTools="{ toolButtonProps }">
 								<!-- 也可以直接使用普通的按钮 -->
-								 {{toolButtonProps}}
-								<div class="custom-tool-btn" @click="setCurrentView('redGreenExample')">
+								<div class="custom-tool-btn" :class="{active:currentView === 'redGreenExample'}" @click="editFront('redGreenExample')">
 									<i class="fi fi-sr-layers"></i>
 									<div class="tool-tooltip">Edit the front and back sections</div>
 								</div>
@@ -37,16 +38,16 @@
 						</editCanvas>
 						<!-- <canvasContent ref="canvasContent"></canvasContent> -->
 					</div>
-					<div class="editFrontBack" v-if="isEditFrontBack" @click.stop>
+					<div class="editFrontBack" v-if="currentView === 'redGreenExample'" @click.stop>
 						<!-- <editFrontBack 
 							:patchData="frontBack" 
 							:imgDomIndex="imgDomIndex" 
 							
 							ref="editFrontBack">
 						</editFrontBack> -->
-						<editCanvas v-if="canvasLoad && currentView === 'redGreenExample'" :config="canvasConfig" 
+						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
 							:enabledRedGreenMode="true"
-							:clothingImageUrl="selectDetail.undividedLayer" 
+							:clothingImageUrl="selectDetail.path" 
 							:redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl"
 							@trigger-red-green-mouseup="frontBackChange"
 							:clothing-image-opts="{
@@ -54,7 +55,7 @@
 							}"
 							ref="editCanvasBackFront">
 							<template #customTools="{ toolButtonProps }">
-								<div class="custom-tool-btn" @click="setCurrentView('canvasEditor')">
+								<div class="custom-tool-btn" :class="{active:currentView === 'redGreenExample'}" @click="editFront('canvasEditor')">
 									<i class="fi fi-sr-layers"></i>
 									<div class="tool-tooltip">Edit the front and back sections</div>
 								</div>
@@ -67,9 +68,6 @@
 					<div class="gallery_btn" @click="privewDetail">Finish</div>
 				</div> -->
 			</div>
-			<div class="Finish" style="text-align: right;margin-top:1rem;">
-				<div class="gallery_btn" style="line-height: 4rem;padding: 0 1rem;" @click="editFront">EditFrontBack</div>
-			</div>
 		 </div>
 		
 		<!-- <div class="mark_loading" v-show="isShowMark">
@@ -121,13 +119,14 @@ export default defineComponent({
 			liquefaction:null as any,
 			canvasType:'export',
 			imgDomIndex:-1,
-			isEditFrontBack:false,
 		    selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
 			canvasLoad:false,
 			canvasConfig:{
 			} as any,
 			currentView:'canvasEditor',
+			getCanvasIfEdit:inject('getCanvasIfEdit')as any,
+			canvasInstance:null as any,
 		})
 		watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
 			detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
@@ -152,10 +151,10 @@ export default defineComponent({
 		const toolLiquefaction = ()=>{//工具点击按钮
 			setLiquefaction()
 		}
-		const editFront = ()=>{//编辑前后片
+		const editFront = (str:any)=>{//编辑前后片
 
 			let canvasJSON = '' as any
-			if(!detailData.isEditFrontBack){
+			if(detailData.currentView === 'canvasEditor'){
 				sessionStorage.setItem('sketchEdit',detailDom.editCanvas.getJSON())
 				canvasJSON = sessionStorage.getItem('frontBackEdit');
 			}else{
@@ -163,18 +162,18 @@ export default defineComponent({
 				canvasJSON = sessionStorage.getItem('sketchEdit');
 			}
 			detailData.canvasLoad = false
-			detailData.isEditFrontBack = !detailData.isEditFrontBack
+			detailData.currentView = str
 			if(canvasJSON){
 				detailData.canvasLoad = true
 				nextTick(()=>{
-					if(!detailData.isEditFrontBack){
+					if(detailData.currentView === 'redGreenExample'){
 						detailDom.editCanvas.loadJSON(canvasJSON)
 					}else{
 						detailDom.editCanvasBackFront.loadJSON(canvasJSON)
 					}
 				})
 			}else{
-				if(!detailData.isEditFrontBack){
+				if(detailData.currentView === 'redGreenExample'){
 					nextTick(()=>{
 						setCanvas(detailData.selectDetail.undividedLayer).then(()=>{
 							detailData.canvasLoad = true
@@ -190,6 +189,7 @@ export default defineComponent({
 			}
 		}
 		const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
+			if(!detailDom.editCanvas)return
 			return new Promise((res,reject)=>{
 				detailDom.editCanvas.exportImage({isContainBg:false,isContainFixed:true}).then((rv)=>{
 					// let data = await detailData.canvasObj.detailSubmit()
@@ -225,18 +225,36 @@ export default defineComponent({
 				...detailData.canvasConfig,
 			}
 			segmentImage(value,full,size).then((rv)=>{
-				detailData.frontBack.front[detailData.imgDomIndex].imageUrl = rv.targetFrontUrl
-				detailData.frontBack.back[detailData.imgDomIndex].imageUrl = rv.targetBackUrl
-				detailData.frontBack.front[detailData.imgDomIndex].maskUrl = value
+				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.imageUrl
+				if(!back?.oldImageUrl)back.oldImageUrl = back.imageUrl
+				if(!front?.oldMaskUrl)store.commit('DesignDetailCopy/updataDetailItem',{maskUrl:front.oldMaskUrl})
+
+				front.imageUrl = rv.targetFrontUrl
+				front.maskUrl = value
+				back.imageUrl = rv.targetBackUrl
 				store.commit('DesignDetailCopy/updataDetailItem',{maskUrl:value})
 			})
 
 		}
-		const setCurrentView = (str:string)=>{
-			detailData.currentView = str
+		const canvasInit = (value:any)=>{
+			// detailDom.editCanvas.addImageToLayer(detailData.selectDetail.undividedLayer,{layerId:value.layers.value[0].id,imageMode:'contains',undoable:false})
+			detailData.canvasInstance = value
+			detailData.getCanvasIfEdit.fun = getCanvasLength
+		}
+		const getCanvasLength = ()=>{
+			return detailData.canvasInstance?.commandManager?.undoStack?.length
 		}
 		onBeforeUnmount(()=>{
-			console.log(12312)
+			let front = detailData.frontBack.front[detailData.imgDomIndex]
+			let back = detailData.frontBack.back[detailData.imgDomIndex]
+			if(front?.oldImageUrl)front.imageUrl = front.oldImageUrl
+			if(front?.oldMaskUrl)front.maskUrl = front.oldMaskUrl
+			if(back?.oldImageUrl)back.imageUrl = back.oldImageUrl
+			if(front?.oldMaskUrl)store.commit('DesignDetailCopy/updataDetailItem',{maskUrl:front.oldMaskUrl})
+
 			sessionStorage.removeItem('frontBackEdit');
 			sessionStorage.removeItem('sketchEdit');
 			detailData.canvasLoad = false
@@ -257,7 +275,7 @@ export default defineComponent({
 			privewDetail,
 			setFrontBackColor,
 			frontBackChange,
-			setCurrentView,
+			canvasInit,
         }
     },
 	provide() {
@@ -374,10 +392,18 @@ export default defineComponent({
   font-size: 16px;
   color: #333;
   transition: all 0.2s ease;
+  &.active{
+	background-color: #e6f7ff;
+    color: #1890ff;
+  }
 }
 
 .custom-tool-btn:hover {
   background-color: #f0f0f0;
+  &.active{
+	background-color: #e6f7ff;
+    color: #1890ff;
+  }
 }
 
 .custom-tool-btn:hover .tool-tooltip {