Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

src/component/Canvas/CanvasEditor/commands/FillRepeatCommand.js

@@ -109,12 +109,19 @@ export class FillRepeatCommand extends Command {
 			const fdObject = this.canvasManager.getFixedLayerObject();
 			const bgObject = this.canvasManager.getBackgroundLayerObject();
 			const tObject = fdObject || bgObject;
+			const tWidth = tObject.width;
+			const tHeight = tObject.height;
+
 			// const offsetX = object.fill?.hasOwnProperty("offsetX") ? object.fill.offsetX : tObject.width / 2;
 			// const offsetY = object.fill?.hasOwnProperty("offsetY") ? object.fill.offsetY : tObject.height / 2;
-			const patternTransform = object.fill?.hasOwnProperty("patternTransform") ? object.fill.patternTransform : createPatternTransform(0.3, 0);
+			const scaleX_ = tWidth / img.width / 5;
+			const scaleY_ = tHeight / img.height / 5;
+			const scale_ = tWidth > tHeight ? scaleX_ : scaleY_;
+
+			const patternTransform = object.fill?.hasOwnProperty("patternTransform") ? object.fill.patternTransform : createPatternTransform(scale_, 0);
 			const scale = getTransformScaleAngle(patternTransform).scale;
-			const offsetX = tObject.width / 2 - img.width * scale / 2;
-			const offsetY = tObject.height / 2 - img.height * scale / 2;
+			const offsetX = tWidth / 2 - img.width * scale / 2;
+			const offsetY = tHeight / 2 - img.height * scale / 2;
 			const pattern = new fabric.Pattern({
 				source: img,
 				repeat: this.fillRepeat,
@@ -146,10 +153,10 @@ export class FillRepeatCommand extends Command {
 				let scaleX = tObject.scaleX || 1;
 				let scaleY = tObject.scaleY || 1;
 				rect.set({
-					width: tObject.width,
-					height: tObject.height,
-					top: tObject.top - tObject.height * scaleY / 2,
-					left: tObject.left - tObject.width * scaleX / 2,
+					width: tWidth,
+					height: tHeight,
+					top: tObject.top - tHeight * scaleY / 2,
+					left: tObject.left - tWidth * scaleX / 2,
 					scaleX,
 					scaleY,
 				});
@@ -192,7 +199,7 @@ export class FillRepeatCommand extends Command {
 
 	// 复制原对象的属性
 	copyObjectProperties(object) {
-		return{
+		return {
 			id: object.id,
 			layerId: object.layerId,
 			layerName: object.layerName,

src/component/Canvas/CanvasEditor/commands/LayerCommands.js

@@ -283,7 +283,7 @@ export class PasteLayerCommand extends Command {
       if(this.newLayer.isPrintTrims){
 		this.layers.value.forEach((layer) => {
           if (layer.isPrintTrimsGroup) {
-            layer.children.push(this.newLayer);
+            layer.children.unshift(this.newLayer);
           }
         })
 	  }else if (this.insertIndex !== undefined && this.insertIndex !== null) {

src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue

@@ -126,8 +126,8 @@
 									:options="selectOptions"
 									@change="(e) => changeFillRepeat(e, v)"
 									:disabled="
-										v.layer?.metadata?.level2Type ===
-										'Embroidery'
+										v.layer?.metadata?.sourceData?.type ===
+										'trims'
 									"
 								/>
 							</div>

src/component/Canvas/CanvasEditor/index.vue

@@ -991,7 +991,7 @@ defineExpose({
   },
   updateOtherLayers: async (otherData) => {
 	await new Promise((resolve) => optimizeCanvasRendering(canvasManager.canvas, resolve));
-    await canvasManager?.createOtherLayers?.(otherData, true);
+    await canvasManager?.createOtherLayers?.(otherData);
 	layerManager.activeLayerId.value = ""
 	layerManager?.sortLayers();
 	await layerManager?.updateLayersObjectsInteractivity?.(true);

src/component/Canvas/CanvasEditor/managers/CanvasManager.js

@@ -1160,7 +1160,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	const flScaleY = fixedLayerObj.scaleY
 	const prints = [];
 	const trims = [];
-	objects.forEach((v) => {
+	objects.forEach((v, i) => {
 		const label = glayer.children.find((v_) => (v_.id === v.layerId || v_.id === v.id));
 		const sourceData = label?.metadata?.sourceData;
 		if(!sourceData) return;
@@ -1174,7 +1174,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 			scale: [0, 0],
 			angle: v.angle,
 			name: sourceData.name,
-			priority: sourceData.priority,
+			priority: i + 1,
 			object:{
 				top: 0,
 				left: 0,
@@ -1240,8 +1240,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		}
 	})
 	// prints.sort((a, b) => a.ifSingle ? 1 : -1);
-	prints.forEach((v, i) => v.priority = i + 1);
-	trims.forEach((v, i) => v.priority = i + 1);
+	// prints.forEach((v, i) => v.priority = i + 1);
+	// trims.forEach((v, i) => v.priority = i + 1);
 	return {prints, trims};
   }
   
@@ -1507,7 +1507,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
    * 创建其他图层：印花、颜色、元素...
    * @param {Object} otherData - 其他图层数据
   */
-  async createOtherLayers(otherData, isUpdate = false) {
+  async createOtherLayers(otherData) {
 	if (!otherData) return console.warn("otherData 为空不需要添加");
 	this.canvas.loading.value = true;
 	let resolve = ()=>{};
@@ -1515,17 +1515,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	const otherData_ = JSON.parse(JSON.stringify(otherData));
 	console.log("==========创建其他图层", otherData_);
 	
-	const updateColor = !!otherData_.color;
-	const updateSpecialGroup = !!otherData_.printObject || !!otherData_.trims;
 	// 删除颜色图层和特殊组图层
-	const ids = [];
-	if(isUpdate){
-		updateColor && ids.push(SpecialLayerId.COLOR)
-		updateSpecialGroup && ids.push(SpecialLayerId.SPECIAL_GROUP)
-	}else{
-		ids.push(SpecialLayerId.COLOR)
-		ids.push(SpecialLayerId.SPECIAL_GROUP)
-	}
+	const ids = [SpecialLayerId.COLOR, SpecialLayerId.SPECIAL_GROUP];
 	this.layers.value = this.layers.value.filter((layer) => {
 	  if(ids.includes(layer.id)){
 	  	ids.push(...layer.children?.map((child) => child.id));
@@ -1533,11 +1524,15 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	  }
 	  return true;
 	})
-	this.canvas.getObjects().forEach((v) => ids.includes(v.id) && this.canvas.remove(v))
+	this.canvas.getObjects().forEach((v) => {
+		if(ids.includes(v.id) || ids.includes(v.layerId)){
+			this.canvas.remove(v)
+		}
+	})
 
 
 	// 创建颜色图层
-	otherData_.color && await this.createColorLayer(otherData_.color);
+	await this.createColorLayer(otherData_.color);
 
 	const printTrimsLayers = [];// 印花和元素图层
 	const singleLayers = [];// 平铺图层
@@ -1555,7 +1550,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		trims.type = "trims";
 		printTrimsLayers.unshift({...trims});
 	})
-	if(isUpdate ? updateSpecialGroup : true){
+	if(printTrimsLayers.length || singleLayers.length){
 		await this.createPrintTrimsLayers(printTrimsLayers, singleLayers);
 	}
 	await this.changeCanvas();
@@ -1686,7 +1681,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	  let opacity = 1
 	  let flipX = false;
 	  let flipY = false;
-	  let blendMode = BlendMode.MULTIPLY;
+	  let blendMode = BlendMode.NORMAL;
 	//   if(item.type === "trims") blendMode = BlendMode.NORMAL;// 元素正常
 	  if(item.object){
 		opacity = item.object.opacity
@@ -1712,7 +1707,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
         hasBorders: true,
         isPrintTrims: true,
       });
-      this.canvas.add(image);
+    //   this.canvas.add(image);
 	  let layer = createLayer({
 	    id: id,
 	    name: name,
@@ -1723,7 +1718,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		isPrintTrims: true,
 		blendMode: blendMode,
 	    fabricObjects: [image.toObject(["id", "layerId", "layerName"])],
-		metadata: {sourceData: item, level2Type: item.level2Type},
+		metadata: {sourceData: item},
+		object: image,
 	  })
 	  children.push(layer);
 	};
@@ -1808,7 +1804,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		},
 		isPrintTrims: true,
       });
-      this.canvas.add(rect);
+    //   this.canvas.add(rect);
 	  let layer = createLayer({
 	    id: id,
 	    name: name,
@@ -1820,6 +1816,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		blendMode: blendMode,
 	    fabricObjects: [rect.toObject(["id", "layerId", "layerName"])],
 		metadata: {sourceData: item},
+		object: rect,
 	  })
 	  children.push(layer);
 	};
@@ -1836,6 +1833,13 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	//   children.push(layer);
 	// }
 	if(children.length === 0) return;
+	// 印花元素排序
+	if(new Set(children.map(v => v.metadata.sourceData.priority)).size === children.length){
+      children.sort((a, b) => b.metadata.sourceData.priority - a.metadata.sourceData.priority);
+	}
+	children.forEach(layer => {
+		this.canvas.add(layer.object);
+	});
 	const groupRect = new fabric.Rect({});
 	await this.setObjecCliptInfo(groupRect);
 	// 插入组图层

src/component/Canvas/canvasExample.vue

@@ -337,46 +337,49 @@
 			color: { rgba: { r: 255, g: 0, b: 0, a: 1 } },
 			printObject: {
 				prints: [
-					// {
-					// 	ifSingle: false,
-					// 	level2Type: "Pattern",
-					// 	designType: "Library",
-					// 	path: "/src/assets/images/canvas/yinhua1.jpg",
-					// 	location: [800, 600],
-					// 	scale: [1, 1],
-					// 	angle: 0,
-					// 	object: {
-					// 		top: 300,
-					// 		left: 400,
-					// 		scaleX: 0.5,
-					// 		scaleY: 0.5,
-					// 		opacity: 1,
-					// 		angle: 0,
-					// 		flipX: false,
-					// 		flipY: false,
-					// 		blendMode: "multiply",
-					// 		gapX: 0,
-					// 		gapY: 0,
-					// 	},
-					// },
-					// {
-					// 	ifSingle: true,
-					// 	level2Type: "Pattern",
-					// 	designType: "Library",
-					// 	path: "/src/assets/images/canvas/yinhua1.jpg",
-					// 	location: [550, 650],
-					// 	scale: [0.15, 0.2],
-					// 	angle: 0,
-					// },
+					{
+						ifSingle: false,
+						level2Type: "Pattern",
+						designType: "Library",
+						path: "/src/assets/images/canvas/yinhua1.jpg",
+						location: [800, 600],
+						scale: [1, 1],
+						angle: 0,
+						priority: 1,
+						object: {
+							top: 300,
+							left: 400,
+							scaleX: 0.5,
+							scaleY: 0.5,
+							opacity: 1,
+							angle: 0,
+							flipX: false,
+							flipY: false,
+							// blendMode: "multiply",
+							gapX: 0,
+							gapY: 0,
+						},
+					},
 					{
 						ifSingle: true,
 						level2Type: "Pattern",
 						designType: "Library",
 						path: "/src/assets/images/canvas/yinhua1.jpg",
-						location: [700, 400],
-						scale: [0.1, 0.133],
+						location: [550, 650],
+						scale: [0.15, 0.2],
 						angle: 0,
+						priority: 2,
 					},
+					// {
+					// 	ifSingle: true,
+					// 	level2Type: "Pattern",
+					// 	designType: "Library",
+					// 	path: "/src/assets/images/canvas/yinhua1.jpg",
+					// 	location: [700, 400],
+					// 	scale: [0.1, 0.133],
+					// 	angle: 0,
+					// 	priority: 3,
+					// },
 				],
 			},
 		});

src/component/Detail/detailRight/editPrintElement.vue

@@ -89,8 +89,8 @@
 							<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${item.pattern?.transform?.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false"> 
 						</div>
 					</div>
-					<!-- <img :src="selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg"> -->
-					<img :src="stateOverallSingle == 'single'?(selectDetail.undividedLayer||selectDetail.path):(selectDetail.undividedLayerColor || selectDetail.path)" alt="" class="designOpenrtion_sketch" ref="sketchImg" @load="()=>isSketchLoad = true">
+					<!-- <img :src="selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg" @load="()=>isSketchLoad = true"> -->
+					<img :src="(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))">
@@ -160,7 +160,6 @@ export default defineComponent({
 			selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
 			currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType),
 			currentPrintElement:computed(()=>store.state.DesignDetail.currentPrintElement),
-			systemDesignerPercentage:0,
 			printStyleList:{
 				print:{
 					single:[],
@@ -174,7 +173,6 @@ export default defineComponent({
 			type:props.type,
 			imgDomIndex:-1,
 			direction:'',//判断点的那条边
-			printZIndex:2,//印花优先级
 			sketchWH:{
 				width:0,
 				height:0,
@@ -225,6 +223,7 @@ export default defineComponent({
 				img.onload = ()=>{
 					let imgScale = img.width / img.height
 					let zoom = 2
+					console.log(editPrintElementData.sketchWH)
 					let width = editPrintElementData.sketchWH.width / zoom
 					let height = width / editPrintElementData.sketchWH.height
 					
@@ -238,24 +237,44 @@ export default defineComponent({
 						x = sketchW / 2
 						y = sketchH / 2
 					}
+					x = sketchW / 2
+					y = sketchH / 2
 					let location = [x,y]
 					resolve({scale,location})
 				}
-				img.src = item.url
+				img.src = item.url || item.path
 			})
 		}
 		const addPrintELement = async (data:any)=>{
 			if(!editPrintElementData.isSketchLoad)return
 			let {scale,location} = await setScaleLocation(data)
+			let printIndex = 0
+			let allElementPrint = []
+			if(props.type == 'print'){
+				allElementPrint = [
+					...(editPrintElementData.printStyleList.print.single || []),
+					...(editPrintElementData.printStyleList.print.overall || []),
+					...(editPrintElementData.selectDetail.trims.prints || []),
+				]
+			}else{
+				allElementPrint = [
+					...(editPrintElementData.printStyleList.element.single || []),
+					...(editPrintElementData.selectDetail.printObject.prints || []),
+				]
+			}
+			
+			printIndex = Math.max(...allElementPrint.map(item => Number(item.priority))) + 1
+			console.log(printIndex)
 			let item = {
 				angle:0,
 				designType:data.designType,
 				ifSingle:editPrintElementData.stateOverallSingle == 'single',
 				level2Type:data.level2Type,
-				location:editPrintElementData.stateOverallSingle == 'single'?location:[0,0],
+				location:location,
+				// location:editPrintElementData.stateOverallSingle == 'single'?location:[0,0],
 				minIOPath:data.minIOPath || data.originalUrl,
 				path:data.url,
-				priority:editPrintElementData.printZIndex,
+				priority:printIndex,
 				scale,
 				globalCompositeOperation:'',
 			}
@@ -286,7 +305,7 @@ export default defineComponent({
 					angle : item.pattern.transform.rotateZ,
 					// angle : !this.overallSingle ? 0:item.pattern.transform.rotateZ,
 					location : location,
-					priority:index,
+					priority:item.priority,
 					scale: scale,
 					designType:item.designType,
 					level2Type:item.level2Type,
@@ -301,10 +320,14 @@ export default defineComponent({
 			if(editPrintElementData.printStyleList[props.type].single.length>0){
 				sort(editPrintElementData.printStyleList[props.type].single)
 			}
+			if(editPrintElementData.printStyleList[props.type].overall.length>0){
+				sort(editPrintElementData.printStyleList[props.type].overall)
+			}
 			editPrintElementData.printStyleList[props.type].overall.forEach((item:any)=>{
 				data.push(setData(item,index))
 				index++ 
 			})
+			console.log(editPrintElementData.printStyleList[props.type].single)
 			editPrintElementData.printStyleList[props.type].single.forEach((item:any)=>{
 				data.push(setData(item,index))
 				index++ 
@@ -336,10 +359,10 @@ export default defineComponent({
 				top = item.location[1] / editPrintElementData.sketchWH.scale[1]
 			}else{
 				//overall
-				editPrintElementData.systemDesignerPercentage = item.scale[0]*1000
+				console.log(item)
 				left = item.location[0] / editPrintElementData.sketchWH.scale[0]
 				top = item.location[1] / editPrintElementData.sketchWH.scale[1]
-				editPrintElementData.systemDesignerPercentage = item.scale?.[0]?item.scale[0]*100:30
+				item.scale = [1,1]
 			}
 			let pattern = {
 				centers:{left:0,top:0},
@@ -357,7 +380,6 @@ export default defineComponent({
 				},
 				designOpenrtionBtn:false
 			}
-			editPrintElementData.printZIndex++
 			item.pattern = pattern
 			
 			if(item.object){
@@ -400,51 +422,49 @@ export default defineComponent({
 				}
 			}
 		}
-		const setPosition = ()=>{
-			nextTick(()=>{
-				let img = new Image
-				img.onload = ()=>{
-					// let sketchScale = editPrintElementData.selectDetail.layersObject[0].scale
-					let sketchScale = [1,1]
-					let scaleX = img.width * sketchScale[0] / editPrintElementDom.sketchImg.offsetWidth
-					let scaleY = img.height * sketchScale[1] / editPrintElementDom.sketchImg.offsetHeight
+		const setPosition = async ()=>{
+			await new Promise<void>((resolve, reject) => {
+				nextTick(()=>{
+					let img = new Image
+					img.onload = ()=>{
+						// let sketchScale = editPrintElementData.selectDetail.layersObject[0].scale
+						let sketchScale = [1,1]
+						let scaleX = img.width * sketchScale[0] / editPrintElementDom.sketchImg.offsetWidth
+						let scaleY = img.height * sketchScale[1] / editPrintElementDom.sketchImg.offsetHeight
 
-					editPrintElementData.sketchWH = {
-						width:editPrintElementDom.sketchImg.offsetWidth,
-						height:editPrintElementDom.sketchImg.offsetHeight,
-						scale:[scaleX,scaleY],
+						editPrintElementData.sketchWH = {
+							width:editPrintElementDom.sketchImg.offsetWidth,
+							height:editPrintElementDom.sketchImg.offsetHeight,
+							scale:[scaleX,scaleY],
+						}
+						if(!editPrintElementData.selectDetail.printObject.prints)return
+						let state = true
+						// editPrintElementData.stateOverallSingle = 'single'
+						let arr:any = editPrintElementData.selectDetail.printObject.prints
+						if(props.type == 'element'){
+							arr = editPrintElementData.selectDetail.trims.prints
+						}
+						// if(editPrintElementData.selectDetail.newDetail?.[editPrintElementData.currentDetailType]){
+						// 	arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType]
+						// }
+						if(arr && arr.length > 0){
+							editPrintElementData.printStyleList[props.type].single = []
+							editPrintElementData.printStyleList[props.type].overall = []
+							arr.forEach((item:any)=>{
+								// if(!item.ifSingle){
+								// 	editPrintElementData.stateOverallSingle = 'overall',
+								// 	state = false
+								// }
+								getItemPosition(item)
+							})
+							setItemPosition()
+						}
+						resolve('')
 					}
-					if(!editPrintElementData.selectDetail.printObject.prints)return
-					let state = true
-					// editPrintElementData.stateOverallSingle = 'single'
-					let arr:any = editPrintElementData.selectDetail.printObject.prints
-					if(props.type == 'element'){
-						arr = editPrintElementData.selectDetail.trims.prints
-					}
-					// if(editPrintElementData.selectDetail.newDetail?.[editPrintElementData.currentDetailType]){
-					// 	arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType]
-					// }
-					if(arr && arr.length > 0){
-						editPrintElementData.printStyleList[props.type].single = []
-						editPrintElementData.printStyleList[props.type].overall = []
-						arr.forEach((item:any)=>{
-							// if(!item.ifSingle){
-							// 	editPrintElementData.stateOverallSingle = 'overall',
-							// 	state = false
-							// }
-							getItemPosition(item)
-						})
-						setItemPosition()
-					}
-					// if(props.type == 'print'){
-					// 	editPrintElementData.overallSingle = state
-					// }
-				}
-				// undividedLayer
-				//计算宽高使用editPrintElementData.selectDetail.path
-				// img.src = editPrintElementData.selectDetail.path
-				img.src = editPrintElementData.selectDetail.undividedLayer?editPrintElementData.selectDetail.undividedLayer:editPrintElementData.selectDetail.path
+					img.src = editPrintElementData.selectDetail.path
+				})
 			})
+			
 		}
 		// watch(()=>editPrintElementData.selectDetail?.id,(newVal)=>{
 		// 	if(!newVal)return
@@ -518,7 +538,6 @@ export default defineComponent({
 			let scale = Number(editPrintElementDom.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
 			let rotateZ = Number(editPrintElementDom.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
 			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.designOpenrtionBtn = true
-			// editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.style.zIndex = editPrintElementData.printZIndex++
 			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.transform = {
 				scale:scale,
 				rotateZ:rotateZ?rotateZ:0,
@@ -652,7 +671,6 @@ export default defineComponent({
 				top:editPrintElementDom.imgDom.offsetTop+'px',
 				height:editPrintElementDom.imgDom.offsetHeight+'px',
 				width:editPrintElementDom.imgDom.offsetWidth+'px',
-				// zIndex:editPrintElementData.printZIndex
 			}
 			document.removeEventListener('mousemove',sizeMouseMove)
 			document.removeEventListener('touchmove',sizeTouchmove)
@@ -804,7 +822,8 @@ export default defineComponent({
 						};
 					}
 				};
-				elList[item.index].sort = moveIndex;
+				let index =  elList.findIndex((elListItem:any)=>item.id == elListItem.id)
+				elList[index].sort = moveIndex;
 				moveItem();
 			}
 		}
@@ -835,6 +854,7 @@ export default defineComponent({
 			collItemSize.elList.forEach((elItem:any)=>{
 				let clothesIndex = arr.findIndex((item:any)=>item.uniqueId == elItem.uniqueId)
 				arr[clothesIndex].pattern.style.zIndex = elItem.sort
+				arr[clothesIndex].priority = elItem.id.split('_')[0]
 				// let clothesId = editPrintElementData.designDetail.clothes[clothesIndex].id
 				// editPrintElementData.designDetail.clothes[clothesIndex].priority = elItem.sort
 				// let frontIndex = editPrintElementData.frontBack_.front.findIndex((item:any)=>item.id == clothesId)
@@ -855,7 +875,6 @@ export default defineComponent({
 			let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
 
 			arr.forEach((item,index) => {item.uniqueId  = `${Date.now()}_${index}`});
-
 			const sortedArray = [...arr].sort((a, b) => a.priority - b.priority);
 			const sortMap = {} as any;
 			sortedArray.forEach((item, index) => {
@@ -866,7 +885,8 @@ export default defineComponent({
 					el: elArr[i], 
 					// sort: elArr.length - i -1, 
 					sort: sortMap[arr[i].priority],
-					index: i,
+					id: `${arr[i].priority}_${Date.now() + i}`,
+					// index: i,
 					uniqueId:arr[i]?.uniqueId || 99999,
 				});
 			}

src/store/Detail/designDetail.ts

@@ -81,7 +81,7 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 						left:v.layersObject[i].position?.[1],
 						width:v.layersObject[i].imageSize?.[0],
 						height:v.layersObject[i].imageSize?.[1],
-						transform:`scaleX(${v.layersObject[i].transpose?.[0] || 1}) scaleY(${v.layersObject[i].transpose?.[1] || 1}) rotate(${v.layersObject?.[i]?.rotate || 0}deg)`,
+						transform:`rotate(${v.layersObject?.[i]?.rotate || 0}deg) scaleX(${v.layersObject[i].transpose?.[0] || 1}) scaleY(${v.layersObject[i].transpose?.[1] || 1})`,
 					}
 					v.layersObject[i].centers={
 						left:0,