detail submit preview完善

src/component/Detail/detailRight/editPrintElement.vue

@@ -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{