detail页面sketch支持镜像、detail图片合成由前端来做，但是新增sketch还是要过接口，sketch调整细节位置变更

src/component/Detail/detailRight/editPrintElement.vue

@@ -51,6 +51,25 @@
 				:tip-formatter="formatter"
 			>
 			</a-slider>
+			<a-popover
+				trigger="click"
+				destroyTooltipOnHide
+				:title="t('Canvas.repeatSetting')"
+			>
+				<template #content>
+					<repeat-setting
+						:object="overallDetail"
+						@inputFillAngle="inputFillAngle"
+						@inputFillOffset="inputFillOffset"
+						@inputFillScale="inputFillScale"
+						@inputFill_Gap="
+							(x, y) => inputFill_Gap(x, y)"
+					/>
+				</template>
+				<div class="btn">
+					<i class="iconfont icon-gengduo"></i>
+				</div>
+			</a-popover>
 		</div>
 		<div class="editPrintElementBox">
 			<div class="designOpenrtion_centent" id="designOpenrtionCentent">
@@ -70,9 +89,10 @@
 						</div>
 					</div>
 					<!-- <img :src="selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg"> -->
-					<img :src="selectDetail?.undividedLayer?selectDetail.undividedLayer:selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg" @load="()=>isSketchLoad = true">
-					<div class="designOpenrtion_btn">
-						<ul v-if="stateOverallSingle == 'single'" 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))">
+					<img :src="selectDetail?.undividedLayerWithSinglePrint?selectDetail.undividedLayerWithSinglePrint: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))">
 							<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
 							<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
 							<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
@@ -82,12 +102,15 @@
 								<img src="../../../assets/images/homePage/cuowu.svg" alt="">
 							</li>
 						</ul>
-						<div v-show="stateOverallSingle != 'single'"></div>
+						<!-- <div v-show="stateOverallSingle != 'single'"></div>
 						<ul v-if="stateOverallSingle != 'single' && printStyleList[type][stateOverallSingle][0]" class="designOpenrtion_Mouoverall active" :style="'left:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.left+';top:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(0,getMousePosition($event,true))">
 							<i class="fi fi-rr-arrows animtion1"></i>
 							<i class="fi fi-rr-arrows animtion2"></i>
 							<li class="designOpenrtion_rotote" v-rotote.stop="[0,printStyleList[type][stateOverallSingle][0]?.pattern?.transform,type]"></li>
-						</ul>
+						</ul> -->
+					</div>
+					<div class="designOpenrtion_pingpu" v-else>
+						<pingpu v-if="overallDetail.url" v-bind="overallDetail"></pingpu>
 					</div>
 				</div>
 			</div>
@@ -106,8 +129,13 @@ import { defineComponent,computed,ref,onMounted,nextTick,watch,toRefs, reactive,
 // import setDesignItem from '@/component/Detail/setDesignItem2.vue'
 import { useStore } from "vuex";
 import { getMousePosition } from "@/tool/mdEvent";
+import { sketchToMask } from "@/tool/util";
+import pingpu from '@/component/Canvas/OverallCanvas/index.vue'
+import RepeatSetting from "./overallSetting/RepeatSetting.vue";
+import { useI18n } from 'vue-i18n'
 export default defineComponent({
     components:{
+		pingpu,RepeatSetting
     },
 	props: {
 		type: {
@@ -116,6 +144,7 @@ export default defineComponent({
 		}
 	},
     setup(props,{emit}) {
+		const { t } = useI18n()
         const store = useStore();
 		const editPrintElementDom = reactive({
 			imgDom:null as any,
@@ -126,6 +155,15 @@ export default defineComponent({
 			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:[],
@@ -215,6 +253,7 @@ export default defineComponent({
 				path:data.url,
 				priority:editPrintElementData.printZIndex,
 				scale,
+				globalCompositeOperation:'',
 			}
 			getItemPosition(item)
 			setItemPosition()
@@ -227,6 +266,7 @@ 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]]
@@ -237,6 +277,14 @@ 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,
@@ -249,6 +297,9 @@ export default defineComponent({
 					path:item.path,
 					minIOPath:item.minIOPath,
 					ifSingle:!!item.ifSingle,
+					globalCompositeOperation:'',
+					object:null,
+					// ...overallDetail,
 				}
 				return value
 			}
@@ -316,6 +367,15 @@ export default defineComponent({
 				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
+				}
 				editPrintElementData.printStyleList[props.type].overall.push(item)
 			}
 
@@ -337,9 +397,9 @@ export default defineComponent({
 					if(!editPrintElementData.selectDetail.printObject.prints)return
 					let state = true
 					// editPrintElementData.stateOverallSingle = 'single'
-					let arr:any = editPrintElementData.selectDetail.printObject.prints
+					let arr:any = editPrintElementData.selectDetail.newDetail?.print || editPrintElementData.selectDetail.printObject.prints
 					if(props.type == 'element'){
-						arr = editPrintElementData.selectDetail.trims.prints
+						arr = editPrintElementData.selectDetail.newDetail?.element || editPrintElementData.selectDetail.trims.prints
 					}
 					if(editPrintElementData.selectDetail.newDetail?.[editPrintElementData.currentDetailType]){
 						arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType]
@@ -384,8 +444,28 @@ export default defineComponent({
 				single:[],
 				overall:[],
 			}
+			if(!editPrintElementData.selectDetail.sketchMask){
+				sketchToMask(newVal).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
+				}
+			}
+		})
 		//设置移动
 		const itemMoveMousedown = (index:number,event:any)=>{
 			if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
@@ -738,6 +818,20 @@ export default defineComponent({
 			collItemSize.prentWidth = (collItemSize.padding + remValue) * elArr.length + 'px'
 			moveItem()
 		} 
+		const inputFillAngle = (angle:any)=>{
+			editPrintElementData.overallDetail.angle = angle
+		}
+		const inputFillOffset = (offset:any)=>{
+			editPrintElementData.overallDetail.offsetX = offset.left
+			editPrintElementData.overallDetail.offsetY = offset.top
+		}
+		const inputFillScale = (scale:any)=>{
+			editPrintElementData.overallDetail.scale = scale
+		}
+		const inputFill_Gap = (x:any,y:any)=>{
+			editPrintElementData.overallDetail.gapX = x
+			editPrintElementData.overallDetail.gapY = y
+		}
 		onMounted(()=>{
 			if(props.type == 'element'){
 				editPrintElementData.stateOverallSingle = 'single'
@@ -747,6 +841,7 @@ export default defineComponent({
 			previewDetailPrintData()
 		})
         return{
+			t,
 			getMousePosition,
 			...toRefs(editPrintElementDom),
 			...toRefs(editPrintElementData),
@@ -760,6 +855,10 @@ export default defineComponent({
 			clearOverall,
 			designMousedown,
 			navDelete,
+			inputFillAngle,
+			inputFillOffset,
+			inputFillScale,
+			inputFill_Gap,
         }
     },
 	directives:{
@@ -983,7 +1082,13 @@ export default defineComponent({
 						// height: 100%;
 						max-width: 100%;
 						// width: 100%;
-
+						&.designOpenrtion_sketchMask{
+							position: absolute;
+							z-index: 3;
+							top: 0;
+							left: 0;
+							pointer-events: none;
+						}
 					}
 					.designOpenrtion_sketch_mask{
 						z-index: 2;
@@ -1013,8 +1118,13 @@ export default defineComponent({
 						}
 					}
 				}
+				.designOpenrtion_pingpu{
+					width: 100%;
+					height: 100%;
+					z-index: 2;
+				}
 				.designOpenrtion_btn{
-					z-index: 3;
+					z-index: 99;
 					>div{
 						width: 100%;
 						height: 100%;