画布增加的新功能

src/component/Detail/canvas/index.vue

@@ -5,14 +5,17 @@
 		 <div class="canvasContent" ref="canvasContent">
 			<div class="content-bottom" ref="canvasContent">
 				<div class="contet">
+							<!-- :clothingImageUrl="selectDetail?.undividedLayerWithSinglePrint || selectDetail.undividedLayer || selectDetail.path" -->
 					<div class="canvas" v-if="currentView === 'canvasEditor'" @click.stop>
 						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
 							@canvasInit="canvasInit"
 							@changeCanvas="changeCanvas" 
 							is-edit
-							:clothingImageUrl="selectDetail?.undividedLayerWithSinglePrint || selectDetail.undividedLayer || selectDetail.path"
+							:clothingImageUrl="selectDetail.path"
+							:clothingImageUrl2="selectDetail.undividedLayer"
 							showFixedLayer
 							:canvasJSON="canvasJSON"
+							:otherData="otherData"
 							:clothing-image-opts="{
 								imageMode:'contains',
 							}"
@@ -108,6 +111,12 @@ export default defineComponent({
 			canvasInstance:null as any,
 			canvasJSON:'',
 			hideCanvas: computed(()=>store.state.Workspace.projectPath !== route.fullPath),
+			otherData:computed(()=>({
+				canvasId: store.state.DesignDetail.selectDetail.canvasId,
+				color: store.state.DesignDetail.selectDetail.color,
+				printObject: store.state.DesignDetail.selectDetail.printObject,
+				trims: store.state.DesignDetail.selectDetail.trims,
+			})),
 		})
 		watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
 			detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
@@ -117,7 +126,6 @@ export default defineComponent({
 		provide('canvasType',detailData.canvasType)
 		
 		const editFront = (str:any)=>{//编辑前后片
-
 			let canvasJSON = '' as any
 			if(detailData.currentView === 'canvasEditor'){
 				sessionStorage.setItem('sketchEdit',detailDom.editCanvas.getJSON())
@@ -309,7 +317,7 @@ export default defineComponent({
 			sessionStorage.removeItem('frontBackEdit');
 			sessionStorage.removeItem('sketchEdit');
 			detailData.canvasLoad = false
-			privewDetail()
+			// privewDetail()
 		})
 		onMounted(()=>{
 			nextTick(async ()=>{

src/component/Detail/detailLeft/colorBox/pallet.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="pallet">
+    <div class="pallet" ref="palletRef">
 		<div class="palletColo" @click="openPallet">
 			<div v-show="!selectColor.gradient" class="palletBackColor" :title="selectColor.name" :style="{'background-color':selectColor.hex}">
 				{{ selectColor.hex }}
@@ -117,6 +117,7 @@ export default defineComponent({
 		})
 		const getpalletListDom = reactive({
 		})
+		const palletRef = ref(null)
 		watch(()=>palletData.color_,(newVal:any)=>{
 			if(!newVal?.rgba?.r)return
 			if(palletData.color?.gradient?.gradientShow){
@@ -221,7 +222,7 @@ export default defineComponent({
 			
 			
             // this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
-			let gradientWidth = (document.querySelector('.pallet .color_setting_operate_bg') as any).clientWidth
+			let gradientWidth = (palletRef.value.querySelector('.color_setting_operate_bg') as any).clientWidth
 			let position = {
 				x:event.clientX,
 				left:event.target.style.left?event.target.style.left.split('%')[0]:0
@@ -276,8 +277,8 @@ export default defineComponent({
 		// 点击外部区域关闭颜色选择器
 		const handleClickOutside = (event: Event) => {
 			const target = event.target as HTMLElement;
-			const colorSettingBlock = document.querySelector('.color_setting_block');
-			const palletColo = document.querySelector('.palletColo');
+			const colorSettingBlock = palletRef.value.querySelector('.color_setting_block');
+			const palletColo = palletRef.value.querySelector('.palletColo');
 			
 			// 如果点击的是 .palletColo 或 .color_setting_block 内部，则不关闭
 			if (palletData.palletShow && colorSettingBlock && 
@@ -294,7 +295,7 @@ export default defineComponent({
 			nextTick().then(()=>{
 				const backIcon = document.createElement('div');
 				backIcon.classList.add('vc-sketch-color-wrap')
-				let dropperDom = document.getElementsByClassName("pallet")?.[0]?.getElementsByClassName('vc-chrome-fields-wrap')[0]
+				let dropperDom = palletRef.value.getElementsByClassName('vc-chrome-fields-wrap')[0]
 				dropperDom.appendChild(backIcon);
 				backIcon.addEventListener('click',async ()=>{
 					try {
@@ -322,7 +323,7 @@ export default defineComponent({
         return{
 			...toRefs(palletData),
 			...toRefs(getpalletListDom),
-
+			palletRef,
 			openPallet,
 			selectImgItem,
 			setOperate,
@@ -614,6 +615,7 @@ export default defineComponent({
 										position: absolute;
 										content: "";
 										top: 0.2rem;
+										left: 0;
 										width: 1rem;
 										height: 1rem;
 										border-radius: 50%;