aida_front/src/component/Detail/model/modelPosition.vue

<template>
    <div class="molepositon" :class="{active:!imgDesignImg}">
		<div class="designOpenrtion_imgMask" v-if="frontBack?.body?.path" :style="frontBack?.body?.style">
			<div class="designOpenrtion_print" v-for="item,index in frontBack.back" :style="frontBack.front[index].style">
				<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
			</div>
			<img class="perview_img" @load="setPrintSize()" ref="detailBody" :key="designDetail.designItemId" :src="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'">
			<!-- <div  class="detail_modal_item_front" ref="target"  v-for="item,index in frontBack.front"  @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)"  :style="item.style">
				<img :src="item.imageUrl" alt="">
			</div> -->
			<div  class="detail_modal_item_front" :ref="el => { setElementRef(el, index) }" v-for="item,index in frontBack.front" :class="{'active':item.id == selectDetail?.id}" :style="item.style">
				<img :src="item.imageUrl" alt="">
			</div>
			<div ref="moveableContainer" class="moveableContainer"></div>
		</div>
		<div class="designOpenrtion_imgMask" v-if="!frontBack?.body?.path">
			<div class="designOpenrtion_print">
				<img v-if="frontBack.back?.[0].imageUrl" :src="frontBack.back?.[0].imageUrl" style="object-fit: cover;" alt="">
			</div>
			<div class="detail_modal_item_front" style="position: relative;">
				<img :src="frontBack.front?.[0].imageUrl || selectDetail?.path" style="object-fit: cover;" alt="">
			</div>
			<!-- <img @load="setSelectSketch()" :src="designDetail?.currentFullBodyView || selectDetail?.undividedLayer" style="object-fit: cover;" alt=""> -->
		</div>
    </div>
	<div class="molepositon imgDesignImg" :class="{active:imgDesignImg}">
		<div class="designOpenrtion_imgMask" style="width: 100%;height: 100%;">
			<div class="detail_modal_item_front">
				<img
				style="object-fit: cover;"
				:style="observerWH.width > 0?{width:observerWH.width+'px',height:observerWH.height+'px'}:{width:'100%',height:'auto','object-fit': 'contain'}"
				 :src="designDetail.designItemUrl" alt="">
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,inject,watch,nextTick,createVNode,toRefs, reactive, onUnmounted} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
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';
import { scale } from 'echarts/types/src/scale/helper.js';
export default defineComponent({
    components:{
    },
	props:{
	    imgDesignImg:{
            default:false,
			type:Boolean,
		}
	},
	emits:['addSketch'],
    setup(props,{emit}) {
		const {t} = useI18n()
        const store = useStore();
		const detailData = reactive({
			frontBack:computed(()=>store.state.DesignDetail.frontBack),
			designDetail:computed(()=>store.state.DesignDetail.designDetail),
			selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
			isEditPattern:inject('isEditPattern') as any,
			singleOveral:inject('singleOveral') as any,
			detailBody:null as any,
			observer:null as any,
			observerWH:{
				width:0,
				height:0,
			},
		})
		const selectItem = reactive({
		    selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
		    imgDomIndex:-1,
		    printZIndex:store.state.DesignDetail.printZIndex,
			imgDom:null as any,
			direction:'',
		})
		
		watch(()=>detailData.frontBack?.body?.path,(newVal)=>{
			setPrintSize()
		})
		const setPrintSize = ()=>{
			nextTick(()=>{
				let sacle = 0
				const img = new Image();
				let dom = document.querySelector('.molepositon .perview_img') as any
				if(!detailData.frontBack?.body?.path || !dom)return
				img.onload = () => {
					//监听模特图片宽度设置整体图片宽度
					if (detailData.observer) {
						detailData.observer.disconnect()
					}
					detailData.observerWH.width = dom.width
					detailData.observerWH.height = dom.height
					detailData.observer = new ResizeObserver((entries) => {
						if(entries[0].contentRect.width == 0)return
						detailData.observerWH.width = Math.floor(entries[0].contentRect.width)
						detailData.observerWH.height = Math.floor(entries[0].contentRect.height)
					})
					detailData.observer.observe(dom)


					if(detailData.designDetail.clothes.length == 0){
						store.commit('DesignDetail/addDesignColthes')
						emit('addSketch')
						return
					}
					if(!detailData.selectDetail?.id){
						let item = detailData.designDetail.clothes.reduce((max, current) => {
							return current.priority > max.priority ? current : max;
						});
						store.commit('DesignDetail/setDesignColthes',item.id)
					}
					// resolve(img)
					sacle = dom.parentNode.offsetWidth / img.width
					detailData.frontBack.front.forEach((item:any,index:number) => {
						for (const key in item.style) {
							if(key == 'zIndex')return
							let value = item.style[key]
							if(typeof value !== 'number'){
								value = value.replace('px','')
								item.style[key] = value
							}else{
								item.style[key] = value*sacle+'px'
							}
							// item.style[key] = value*sacle+'px'
						}
						for (const key in detailData.frontBack.back[index].style) {
							if(key == 'zIndex')return
							if(key == 'transform')return
							let value = detailData.frontBack.back[index].style[key]
							if(typeof value !== 'number'){
								value = value.replace('px','')
								detailData.frontBack.back[index].style[key] = value
							}else{
								detailData.frontBack.back[index].style[key] = value*sacle+'px'
							}
							// detailData.frontBack.back[index].style[key] = value*sacle+'px'
						}
					});
					setTimeout(() => {
						initMoveableForSelected()
					},500);
				};
				img.src = detailData.frontBack?.body?.path;
			})
		}
		const getDetailListDom = reactive({
			libraryList:null as any,
			moveableContainer:null as any,//控件层
		})
		
		const elementRefs = ref([]) as any;
		const moveableInstance = ref(null) as any;
		const setElementRef = (el, index) => {
			elementRefs.value[index] = el;
		};
		const updateRect = ()=>{
			setTimeout(() => {
				if(moveableInstance.value)moveableInstance.value.updateRect()
			}, 200);
		}
		const initMoveableForSelected = () => {
			// 销毁旧的实例
			if(selectItem.imgDomIndex == -1)return
			if (moveableInstance.value) {
				moveableInstance.value.destroy();
			}
			
			const selectedEl = elementRefs.value[selectItem.imgDomIndex];
			if (!selectedEl) return;
			if(!selectedEl.style.left)return
			moveableInstance.value = new Moveable(getDetailListDom.moveableContainer, {
				target: selectedEl,
				draggable: true,
				scalable: true,
				rotatable: true,
				keepRatio: false, // 等比缩放
				snappable: true,
				snapThreshold: 5,
				edge: false,
			});
			let startPosition = {//记录初始位置
				left: 0,
				top: 0,
			}
			let startSize = {//记录初始缩放比例
				width: 0,
				height: 0,
			}
			moveableInstance.value.on('scaleStart', ({ target, direction }) => {
				const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
				if (!frontStyle?.mirror){
					let scaleX = frontStyle.style.transform.match(/scaleX\(([-\d.]+)\)/);
					let scaleY = frontStyle.style.transform.match(/scaleY\(([-\d.]+)\)/);
					frontStyle.mirror = { x: scaleX[1] == '-1' ? true : false, y: scaleY[1] == '-1' ? true : false };
				}
				startSize.width = Number(parseInt(target.style.width))
				startSize.height = Number(parseInt(target.style.height))
				startPosition.left = Number(parseInt(target.style.left))
				startPosition.top = Number(parseInt(target.style.top))
			});
			moveableInstance.value.on('rotateStart', ({ target, direction }) => {
				const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
				if (!frontStyle?.mirror){
					let scaleX = frontStyle.style.transform.match(/scaleX\(([-\d.]+)\)/);
					let scaleY = frontStyle.style.transform.match(/scaleY\(([-\d.]+)\)/);
					frontStyle.mirror = { x: scaleX[1] == '-1' ? true : false, y: scaleY[1] == '-1' ? true : false };
				}
			});
			moveableInstance.value.on('dragStart', ({ target, clientX, clientY }) => {
				startPosition = {
					left:parseFloat(selectedEl.style.left.replace('px','')) || 0,
					top:parseFloat(selectedEl.style.top.replace('px','')) || 0,
				}
			});
			// 拖拽 
			moveableInstance.value.on('drag', ({ target, beforeTranslate }) => {
				let x = startPosition.left + beforeTranslate[0]
				let y = startPosition.top + beforeTranslate[1]
				detailData.frontBack.front[selectItem.imgDomIndex].style.left = x + 'px'
				detailData.frontBack.front[selectItem.imgDomIndex].style.top = y + 'px'
			});
			const updateElementTransform = (element, rotateDeg = null) => {
				const currentTransform = element.style?.transform || '';
				const currentRotates = (currentTransform.match(/rotate[XYZ]?\([^)]+\)/g) || []);
				let otherTransforms = currentTransform
					.replace(/scaleX\([^)]*\)/g, '')  // 移除所有 scaleX(...)
					.replace(/scaleY\([^)]*\)/g, '')  // 移除所有 scaleY(...)
					.replace(/rotate[XYZ]?\([^)]+\)/g, '')
					.replace(/\s+/g, ' ')
					.trim();
				
				const transforms = [];
				if (element.mirror && element.mirror.x) transforms.push('scaleX(-1)');
				if (element.mirror && element.mirror.y) transforms.push('scaleY(-1)');
				if (otherTransforms) transforms.push(otherTransforms);
				if (rotateDeg !== null) {
					transforms.push(`rotate(${rotateDeg}deg)`);
				} else if (currentRotates.length > 0) {
					transforms.push(...currentRotates);
				}
				
				element.style.transform = transforms.join(' ').trim();
			};

			moveableInstance.value.on('scale', (e) => {
				var { target, delta, direction, dist} = e
				// console.log('scaleStart', e);
				const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
				
				// 确保 mirror 对象存在并正确初始化
				if (!frontStyle.mirror) {
					frontStyle.mirror = { x: false, y: false };
				}
				
				// 清除可能存在的重复镜像变换
				updateElementTransform(frontStyle);
				
				// let width = parseFloat(frontStyle.style.width);
				// let height = parseFloat(frontStyle.style.height);
				// let left = parseFloat(frontStyle.style.left) || 0;
				// let top = parseFloat(frontStyle.style.top) || 0;
				let width = startSize.width
				let height = startSize.height
				let left = startPosition.left;
				let top = startPosition.top;
				let rotation = 0;
				
				const originalRatio = width / height;
				
				// 提取当前旋转角度
				if (frontStyle.style.transform) {
					const match = frontStyle.style.transform.match(/rotate\(([-\d.]+)deg\)/);
					if (match) rotation = parseFloat(match[1]);
				}
				
				const getAdjustedCorner = (corner, rot) => {
					const rad = rot * (Math.PI / 180);
					const x = corner.x * Math.cos(rad) - corner.y * Math.sin(rad);
					const y = corner.x * Math.sin(rad) + corner.y * Math.cos(rad);
					const threshold = 0.5;
					return { 
						x: Math.abs(x) > threshold ? (x > 0 ? 1 : -1) : 0, 
						y: Math.abs(y) > threshold ? (y > 0 ? 1 : -1) : 0 
					};
				};
				
				// 根据旋转角度调整方向
				// if (rotation !== 0) {
				// 	direction = getAdjustedCorner({ x: direction[0], y: direction[1] }, rotation);
				// 	direction = [direction.x, direction.y];
				// }
				const isDiagonal = Math.abs(direction[0]) === 1 && Math.abs(direction[1]) === 1;
				
				const processAxis = (axis, val, distVal, dir, pos, keepRatio = false, otherAxisResult = null) => {
					const mirrorKey = axis === 'width' ? 'x' : 'y';
					const isWidth = axis === 'width';
					
					let newVal = val * distVal;
					// 翻转处理 - 只在值真正变为负值时触发镜像
					// if (newVal < 0) {
					// 	frontStyle.mirror[mirrorKey] = !frontStyle.mirror[mirrorKey];
					// 	newVal = Math.abs(newVal);
					// } else if (newVal === 0) {
					// 	// 防止值变为0
					// 	newVal = 1;
					// }
					if(newVal < 10) newVal = 10;
					
					// 位置调整
					const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) || (frontStyle.mirror[mirrorKey] && dir === 1);
					
					// 保持宽高比
					// if (keepRatio && otherAxisResult) {
					// 	newVal = isWidth ? otherAxisResult.newVal * originalRatio : otherAxisResult.newVal / originalRatio;
					// }
					
					const adjustPos = shouldMove ? pos - (newVal - val) : pos;
					
					return { newVal, adjustPos };
				};
				
				// 处理缩放
				if (isDiagonal) {
					// const mainAxis = Math.abs(dist[0] - 1) > Math.abs(dist[1] - 1) ? 'width' : 'height';
					// const crossAxis = mainAxis === 'width' ? 'height' : 'width';
					
					// const mainDir = mainAxis === 'width' ? dist[0] : dist[1];
					// const crossDir = crossAxis === 'width' ? dist[0] : dist[1];
					
					// const mainDelta = mainAxis === 'width' ? dist[0] : dist[1];
					
					// const mainResult = processAxis(mainAxis, mainAxis === 'width' ? width : height, mainDelta, mainDir, mainAxis === 'width' ? left : top);
					// const crossResult = processAxis(crossAxis, crossAxis === 'width' ? width : height, 1, crossDir, crossAxis === 'width' ? left : top, true, mainResult);
					
					// frontStyle.style.width = mainAxis === 'width' ? mainResult.newVal + 'px' : crossResult.newVal + 'px';
					// frontStyle.style.height = mainAxis === 'height' ? mainResult.newVal + 'px' : crossResult.newVal + 'px';
					// frontStyle.style.left = mainAxis === 'width' ? mainResult.adjustPos + 'px' : crossResult.adjustPos + 'px';
					// frontStyle.style.top = mainAxis === 'height' ? mainResult.adjustPos + 'px' : crossResult.adjustPos + 'px';
					const scale = (dist[0] < 0 && dist[1] < 0) ? -Math.sqrt(dist[0] * dist[1]) : Math.sqrt(dist[0] * dist[1]);
					const widthResult = processAxis('width', width, scale, direction[0], left);
					const heightResult = processAxis('height', height, scale, direction[1], top);
					frontStyle.style.width = widthResult.newVal + 'px';
					frontStyle.style.height = heightResult.newVal + 'px';
					frontStyle.style.left = widthResult.adjustPos + 'px';
					frontStyle.style.top = heightResult.adjustPos + 'px';

				} else {
					const widthResult = processAxis('width', width, dist[0], direction[0], left);
					const heightResult = processAxis('height', height, dist[1], direction[1], top);
					
					frontStyle.style.left = widthResult.adjustPos + 'px';
					frontStyle.style.top = heightResult.adjustPos + 'px';
					frontStyle.style.width = widthResult.newVal + 'px';
					frontStyle.style.height = heightResult.newVal + 'px';
				}
				
				// 更新变换，确保正确的顺序
				updateElementTransform(frontStyle);
			});
			moveableInstance.value.on('rotate', ({ target, beforeRotate }) => {
				let frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
				if (!frontStyle.mirror) {
					frontStyle.mirror = { x: false, y: false };
				}
				const { x: isMirroredX, y: isMirroredY } = frontStyle.mirror;
				const currentTransform = frontStyle.style?.transform || '';
				const rotateMatch = currentTransform.match(/rotate\(([-\d.]+)deg\)/);
				let currentAngle = 0;
				if (rotateMatch && rotateMatch[1]) {
					const parsed = parseFloat(rotateMatch[1]);
					if (!isNaN(parsed)) {
						currentAngle = parsed;
					}
				}
				const newBeforeRotate = parseFloat(beforeRotate) || 0;
				if (!window._lastRotateData) {
					window._lastRotateData = {
						beforeRotate: newBeforeRotate,
						angle: currentAngle
					};
				}
				const delta = newBeforeRotate - window._lastRotateData.beforeRotate;
				const shouldReverse = (isMirroredX && !isMirroredY) || (!isMirroredX && isMirroredY);
				let newAngle;
				if (shouldReverse) {
					newAngle = window._lastRotateData.angle - delta;
				} else {
					newAngle = window._lastRotateData.angle + delta;
				}
				newAngle = ((newAngle % 360) + 360) % 360;
				window._lastRotateData.beforeRotate = newBeforeRotate;
				window._lastRotateData.angle = newAngle;
				updateElementTransform(frontStyle, newAngle);
			});

			// 可选：在rotateStart时重置
			moveableInstance.value.on('rotateStart', () => {
				window._lastRotateData = null;
			});
			// 调整大小
			moveableInstance.value.on('resize', ({ target, width, height }) => {
				// console.log(width, height)
				// detailData.frontBack.front[selectItem.imgDomIndex].style.width = width
				// detailData.frontBack.front[selectItem.imgDomIndex].style.height = height
			});
			moveableInstance.value.on('dragEnd', ({ target, clientX, clientY }) => {
				startPosition = {
					left:0,
					top:0,
				}
				upDataDetail()
			});
			moveableInstance.value.on('scaleEnd', () => {
				upDataDetail()
			});
			moveableInstance.value.on('rotateEnd', () => {
				upDataDetail()
			});
		};
		// watch(()=>selectItem.selectDetail,(newValue,oldValue)=>{
		// 	if(!newValue && newValue?.id == oldValue?.id)return
		// },{immediate: true,})
		watch(()=>selectItem.selectDetail?.id,(newValue,oldValue)=>{
			if(newValue){
				selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue)
				setTimeout(()=>{
					initMoveableForSelected()
				},100)
			}
		},{immediate: true,})
		watch(()=>detailData.frontBack.front.length,(newValue,oldValue)=>{
			if(selectItem.selectDetail?.id)selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == selectItem.selectDetail?.id)
			setTimeout(()=>{
				initMoveableForSelected()
			},100)
		})
		const setRevocation = async ()=>{
			let frontBack = JSON.parse(JSON.stringify(detailData.frontBack))	
			let revocation:any = JSON.parse((await KeyValueDB.get("revocation") as any) || '[]')
			revocation.push({designData:null,position:frontBack})
			KeyValueDB.set('revocation', JSON.stringify(revocation));
		}
		const upDataDetail = async ()=>{
			//同步到selectDetail数据中，
			// getDetailListData.designDetail
			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
			selectItem.selectDetail.layersObject[1].offset = offset
			selectItem.selectDetail.layersObject[0].priority = priority
			selectItem.selectDetail.layersObject[1].priority = priority
			selectItem.selectDetail.layersObject[0].rotate = rotate
			selectItem.selectDetail.layersObject[1].rotate = rotate
			selectItem.selectDetail.layersObject[0].transpose = transpose
			selectItem.selectDetail.layersObject[1].transpose = transpose
			selectItem.selectDetail.layersObject[0].position = position
			selectItem.selectDetail.layersObject[1].position = position
			selectItem.selectDetail.layersObject[0].imageSize = imageSize
			selectItem.selectDetail.layersObject[1].imageSize = imageSize
			setRevocation()
		}
		const sort = (arr:any)=>{
			arr.sort((a:any, b:any) => {
				var a_num = a.style.zIndex;
				var b_num = b.style.zIndex;
				return a_num - b_num;
			});
			return arr
		}
		const getSubmitData = async (value:any)=>{
			let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
			if(!detailData.frontBack?.body?.layersObject?.[0]?.imageSize){
				return{
					scale:value.layersObject[0].scale,
					offset:value.layersObject[0].offset,
					priority:value.layersObject[0].priority,
				} 
			}
			let ratio = detailData.frontBack.body.layersObject[0].imageSize[0]/parentNode.width

			let scale = 0
			let dom:any = document.querySelector('.molepositon .perview_img')
			const img = new Image();
			img.src =  detailData.frontBack?.body?.path;
			await new Promise<void>((resolve, reject) => {
				img.onload = () => {
					scale = dom.parentNode.offsetWidth / img.width
					resolve()
				};
			})
			// let arr:any = sort(detailData.frontBack.front)
			let arr:any = sort(JSON.parse(JSON.stringify(detailData.frontBack.front)))
			let num = 10
			arr.forEach((item:any)=>{
				item.priority = num++
			})
			let data:any = {
				scale:null,
				offset:null,
				priority:'',
				maskUrl:'',
				maskMinioUrl:'',
				position:null,
				imageSize:null,
			}
			let state = false
			for (let index = 0; index < arr.length; index++) {
				if(value.id == arr[index].id){
					state = true
					let y = ((arr[index]?.style?.top.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[0])
					let x = ((arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[1])
					let positionX = Number((arr[index]?.style?.left.replace(/px/g,'')/scale)).toFixed(2)
					let positionY = Number((arr[index]?.style?.top.replace(/px/g,'')/scale)).toFixed(2)
					let imageSizeW = Number((arr[index]?.style?.width.replace(/px/g,'')/scale)).toFixed(2)
					let imageSizeH = Number((arr[index]?.style?.height.replace(/px/g,'')/scale)).toFixed(2)

					let scaleWidth = arr[index]?.imageSize?Number(((arr[index]?.style?.width.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[0]/arr[index].scale[0])).toFixed(2)):1
					let scaleHeight = arr[index]?.imageSize?Number(((arr[index]?.style?.height.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[1]/arr[index].scale[1])).toFixed(2)):1
					// let widthScale = (arr[index].style.width.replace(/px/g,'')/arr[index].style.height.replace(/px/g,'')).toFixed(2)

					let transformStr = arr[index]?.style?.transform
					let scaleX = transformStr.match(/scaleX\(([-\d.]+)\)/)
					let scaleY = transformStr.match(/scaleY\(([-\d.]+)\)/)
					let rotate = transformStr.match(/rotate\(([-\d.]+)deg\)/);
					data.transpose = [parseFloat(scaleX?.[1] || 1),parseFloat(scaleY?.[1] || 1)]
					data.rotate = parseFloat(rotate?.[1] || 0)
					data.scale = [scaleWidth,scaleHeight]
					let top = y == 0 ? value.layersObject[0].offset[1]:y+value.layersObject[0].offset[1]
					let left = x == 0 ? value.layersObject[0].offset[0]:x+value.layersObject[0].offset[0]
					data.offset = [left?left:0,top?top:0]
					data.position = [positionY,positionX]
					data.imageSize = [imageSizeW,imageSizeH]
					// data.offset = [left?left:0,top?top:0]
					data.maskUrl = arr[index].maskUrl
					data.maskMinioUrl = arr[index].maskMinioUrl
					// data.priority = arr[index].style.zIndex
					data.priority = arr[index].priority
					arr[index].similarity = true
					// item.offset = [(arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
					break
				}
			}
			if(!state){
				data.scale = [1,1]
				data.offset = [0,0]
				data.priority = 10+arr.length
			}
			return data
		}
		const deleteNav = ()=>{

		}
		const updataPosition = ()=>{
			let url = detailData.frontBack?.body?.path
			let sacle = 0
			const img = new Image();
				img.onload = () => {
					let dom:any = document.querySelector('.molepositon .perview_img')
					// resolve(img)
					sacle = dom.parentNode.offsetWidth / img.width
					detailData.frontBack.front.forEach((item:any,index:number) => {
						for (const key in item.style) {
							if(key == 'zIndex')return
							if(key == 'transform')return
							item.style[key] = item.style[key]*sacle+'px'
						}
						for (const key in detailData.frontBack.back[index].style) {
							if(key == 'zIndex')return
							if(key == 'transform')return
							detailData.frontBack.back[index].style[key] = detailData.frontBack.back[index].style[key]*sacle+'px'
						}
					});
				};
				img.src = url;
		}
		onUnmounted(()=>{
			if (detailData.observer) {
				detailData.observer.disconnect()
			}
			if (moveableInstance.value) {
				moveableInstance.value.destroy();
			}
		})
        return{
			...toRefs(detailData),
			...toRefs(selectItem),
			...toRefs(getDetailListDom),
			setElementRef,

			setPrintSize,
			deleteNav,
			getSubmitData,
			getMousePosition,
			updataPosition,
			updateRect,
			initMoveableForSelected,
        }
    },
	
	directives:{
		detailBody:{
			mounted (el,data:any) {
				let sacle = 0
				const img = new Image();
				img.onload = () => {
					// resolve(img)
					sacle = el.parentNode.offsetWidth / img.width
					data.instance.frontBack.front.forEach((item:any,index:number) => {
						for (const key in item.style) {
							if(key == 'zIndex')return
							item.style[key] = item.style[key]*sacle+'px'
						}
						for (const key in data.instance.frontBack.back[index].style) {
							if(key == 'zIndex')return
							data.instance.frontBack.back[index].style[key] = data.instance.frontBack.back[index].style[key]*sacle+'px'
						}
					});
				};
				img.src = data.value;
			},
			updated (el,data:any) {
				let sacle = 0
				const img = new Image();
				img.onload = () => {
					// resolve(img)
					sacle = el.parentNode.offsetWidth / img.width
					data.instance.frontBack.front.forEach((item:any,index:number) => {
						for (const key in item.style) {
							if(key == 'zIndex')return
							item.style[key] = item.style[key].replace(/px/g,'')*sacle+'px'
						}
						for (const key in data.instance.frontBack.back[index].style) {
							if(key == 'zIndex')return
							data.instance.frontBack.back[index].style[key] = data.instance.frontBack.back[index].style[key].replace(/px/g,'')*sacle+'px'
						}
					});
				};
				img.src = data.value;
			}
		}
	},
	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
    .molepositon{
		// width: 30rem;
		// width: calc(66 * .470rem);
		width: calc(66 * .457rem);
		height: 66rem;
		display: flex;
		flex-direction: column;
		// margin: auto 0;
		// padding-top: 3rem;
		position: relative;
		display: none;
		&.active{
			display: flex;
			z-index: 2;
			align-items: center;
			justify-content: center;
		}
		&.imgDesignImg{
			> .designOpenrtion_imgMask{
				.detail_modal_item_front{
					display: flex;
					align-items: center;
					justify-content: center;
					img{
						// height: auto;
					}
				}
			}	
		}
		.moveableContainer{
			:deep(.moveable-origin){
				opacity: 0;
			}
			:deep(.moveable-control){
				width: 1.4rem;
				height: 1.4rem;
				margin-top: -.7rem;
				margin-left: -.7rem;
				border-radius: 0;
				background-color: #44aaff;
				border: 2px solid #44aaff;
				&.moveable-ne,&.moveable-se,&.moveable-sw,&.moveable-nw{
					border: 2px solid #44aaff;
					background-color: #ffff;
				}
			}
			:deep(.moveable-rotation-control){
				border-radius: 50%;
			}
		}
		> .designOpenrtion_imgMask{
			width: auto;
			height: auto;
			position: relative;
			// height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			>img{
				z-index: 2;
				position: relative;
				width: 100%;
				height: auto;
				// height: 100%;
				// object-fit: contain;
			}
			>div{
				position: absolute;
				top: 0;
			}
			
			.detail_modal_item_front,.designOpenrtion_print{
				z-index: 2;
				height: 100%;
				width: 100%;
				pointer-events: none;
				&.active{
					pointer-events: auto;
				}
				img{
					width: 100%;
					// height: ;
					height: 100%;
					float: left;
					user-select:none;
					-webkit-user-drag: none;
				}
				.modal_imgItem{
					position: absolute;
					overflow: hidden;
					top: 0;
					
				}
			}
			.designOpenrtion_print{
				z-index: 1 !important;
			}
		}
	}
</style>