添加画布颜色历史

src/component/HomePage/ExportModel.vue

@@ -47,7 +47,6 @@
 							class="exportCanvasBox_allItem"
 							v-for="(item,key) in allBoardData"
 						>	
-
 							<div v-if="item[0] && key == 'disposeMoodboard'" class="exportCanvasBox_intro">Entirety Moodboard</div>
 							<div v-if="item[0] && key == 'printboardFiles'" class="exportCanvasBox_intro">Printboard</div>
 							<div v-if="item[0] && key == 'moodboardFiles'" class="exportCanvasBox_intro">Moodboard</div>
@@ -64,10 +63,9 @@
 										<div>{{colorItem.name}}</div>
 									</div>
 								</div>
-								
 							</div>
-
 							<div
+								v-if="key != 'moodboardPosition'"
 								class="exportCanvasBox_item"
 								v-for="imgItem in item"
 								:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
@@ -83,27 +81,29 @@
 					</div>
 				</div>
 				<div class="exportCanvasBox_operation_bor_item exportCanvasBox_left_tool_item_column">
-					<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
+					<div class="label_item" v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
 						<div >{{ $t('exportModel.Color') }}</div>
 						<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
-					</label>
-					<label v-show="operation != 'move'">
+						<div class="labelHover_show exportCanvasBox_imgbor">
+							<div v-for="item in colorHistoryList" :style="{'background':item}" @click="setColorHistory(item)"></div>
+						</div>
+					</div>
+					<div class="label_item" v-show="operation != 'move'">
 						<div >{{ $t('exportModel.Size') }}:</div>
 						<input @change="setFontFamily" type="range" @input="setPencilWidth" min="3" max="50" v-model="canvasPencilWidth[operation]">
-					</label>
-					<label v-show="operation == 'pencil'">
+					</div>
+					<div class="label_item" v-show="operation == 'pencil'">
 						<div >{{ $t('exportModel.Brushwork') }}:</div>
 						<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
 							style="flex: 1"
 							@change="brushworkChange"
 							>
-							<!-- v-model:value="brushwork" -->
 							<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
 								<img :src="item.url" alt="">
 							</a-select-option>
 						</a-select>
-					</label>
-					<label v-show="operation == 'texture'" class="texture">
+					</div>
+					<div class="label_item texture" v-show="operation == 'texture'">
 						<div >{{ $t('exportModel.Texture') }}:</div>
 						<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
 							style="flex: 1"
@@ -114,15 +114,15 @@
 								<img :src="item.url" alt="">
 							</a-select-option>
 						</a-select>
-					</label>
-					<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
+					</div>
+					<div class="label_item" v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
 						<div >{{ $t('exportModel.FillBack') }}:</div>
 						<div class="exportCanvasBox_left_tool_item leftAlign">
 							<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
 							<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
 						</div>
-					</label>
-					<label v-show="operation === 'move'">
+					</div>
+					<div class="label_item" v-show="operation === 'move'">
 						<div >{{ $t('exportModel.Layer') }}:</div>
 						<div class="exportCanvasBox_left_tool_item top">
 							<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
@@ -130,12 +130,12 @@
 							<i class="icon iconfont icon-xiayiceng" @click="setLayerIndex('Backwards')"></i>
 							<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
 						</div>
-					</label>
-					<!-- <label v-show="allSelectWidth > -1 && operation != 'move'">
+					</div>
+					<!-- <div class="label_item" v-show="allSelectWidth > -1 && operation != 'move'">
 						<div >{{ $t('exportModel.Width') }}</div>
 						<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
-					</label> -->
-					<label v-show="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
+					</div> -->
+					<div class="label_item" v-show="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
 						<div>Font Family</div>
 						<a-select ref="select" class="label_select" size="small" v-model:value="fontFamily"
 							style="flex: 1"
@@ -146,11 +146,11 @@
 								{{item.name}}
 							</a-select-option>
 						</a-select>
-					</label>
+					</div>
 					<!-- <label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
 						<div >{{ $t('exportModel.Height') }}</div>
 						<input type="number" @input="setPencilColor" v-model="canvasPencilColor">
-					</label> -->
+					</div> -->
 				</div>
 				<!-- <div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
 					{{ $t('exportModel.More') }}
@@ -1527,31 +1527,40 @@ export default defineComponent({
 		let setTimeOut = {
 			color:null,
 			width:null,
+			colorHistory:null,
 		}//给切换颜色设置防抖
+		let colorHistoryList = ref(['rgb(0, 0, 0)'])
+		let setColorHistory = (value)=>{
+			canvasPencilColor.value = value
+			pencilColor()
+		}
+		let pencilColor = ()=>{
+			if(createText.set){
+				setFontFamily()
+				return
+			}
+			// brushIndicator.fill = canvasPencilColor.value;
+			if(canvas.freeDrawingBrush.isEraser){
+			}else{
+				pencilbtnStyle.value.background = canvasPencilColor.value
+			}
+			if(brushworkValue.value == 'Marking'){
+				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
+			}else if(brushworkValue.value == 'InkBrush'){
+				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
+			}else{
+				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
+			}
+		}
 		let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
 			clearTimeout(setTimeOut.color)
+			clearTimeout(setTimeOut.colorHistory)
 			setTimeOut.color = setTimeout(()=>{
-				if(createText.set){
-					setFontFamily()
-					return
-				}
-				// brushIndicator.fill = canvasPencilColor.value;
-				
-				if(canvas.freeDrawingBrush.isEraser){
-
-				}else{
-					pencilbtnStyle.value.background = canvasPencilColor.value
-				}
-				if(brushworkValue.value == 'Marking'){
-					canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
-				}else if(brushworkValue.value == 'InkBrush'){
-					canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
-				}else{
-					canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
-				}
-
-
-			},100)
+				pencilColor()
+			},200)
+			setTimeOut.colorHistory = setTimeout(()=>{
+				colorHistoryList.value.push(canvasPencilColor.value)
+			},1000)
 		}
 		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
 			clearTimeout(setTimeOut.width)
@@ -1956,7 +1965,6 @@ export default defineComponent({
 		let submitLiquefaction = (rv)=>{
 			const originalWidth = liquefactionData.width * liquefactionData.scaleX; // 保存原始宽度
 			const originalHeight = liquefactionData.height * liquefactionData.scaleY; // 保存原始高度
-			console.log(liquefactionData);
 			liquefactionData.setSrc(rv, function() {
 				liquefactionData.scaleToWidth(originalWidth);
 				liquefactionData.scaleToHeight(originalHeight);
@@ -1971,7 +1979,6 @@ export default defineComponent({
 				liquefactionData = activeObjects[0]
 				liquefaction.value.init(activeObjects[0])
 			} else {
-				console.log('No object selected.');
 				message.info(useI18.t('exportModel.jsContent6'))
 				return null;
 			}
@@ -2031,6 +2038,8 @@ export default defineComponent({
 			canvasPencilWidth,//input选择宽度
 			setAllSelectWidth,//多选设置宽度
 			allSelectWidth,//多选设置宽度的值
+			colorHistoryList,//历史颜色
+			setColorHistory,//设置历史颜色
 			setPencilColor,//切换颜色执行函数 给当前矩形或者笔触设置颜色
 			setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
 			setHDExport,//高清导出选择的图片
@@ -2192,7 +2201,7 @@ export default defineComponent({
 			.exportCanvasBox_left_tool{
 				margin: 0;
 			}
-			label {
+			.label_item,label {
                 display: flex;
 				align-items: center;
 				width: 23%;
@@ -2340,8 +2349,29 @@ export default defineComponent({
 				flex: 1;
 				margin-left: 8rem;
 				display: flex;
-				label{
+				.label_item{
 					margin-right: 2rem;
+					position: relative;
+					.labelHover_show{
+						position: absolute;
+						width: 100%;
+						height: 10rem;
+						top: 100%;
+						z-index: 2;
+						flex-wrap: wrap;
+						div{
+							width: 3rem;
+							height: 3rem;
+							margin-right: 1rem;
+							margin-bottom: 1rem;
+							cursor: pointer;
+						}
+					}
+				}
+				.label_item:hover{
+					.labelHover_show{
+						display: flex;
+					}
 				}
 			}
 			.exportCanvasBox_left_tool_item{

src/component/HomePage/Generate.vue

@@ -114,7 +114,7 @@
 						</a-upload>
 					</i>
 					<div :title="$t('Generate.style')">
-						<generalMenu :dataList="printModelList" @setprintModel="setprintModel" :item="printModel"></generalMenu>
+						<generalMenu :dataList="printModelList" :isCanvas="type_.type2 == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel"></generalMenu>
 					</div>
 				</div>
 				<textarea 

src/component/HomePage/MoodboardUpload.vue

@@ -440,7 +440,9 @@ export default defineComponent({
 				// let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
 				let layout:any = this.$refs.layout
 				if(this.layoutList.length <= 0){
-					// await this.layout()
+					let styleObj = this.store.state.UploadFilesModule.moodboardPosition
+					if(!styleObj.domStyle)await this.layout()
+					// 
 					let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
 					this.layoutList = arr
 				}

src/component/HomePage/collectionModal.vue

@@ -66,6 +66,7 @@ import ColorboardUpload from '@/component/HomePage/ColorboardUpload.vue'
 import SketchboardUpload from '@/component/HomePage/SketchboardUpload.vue'
 import MarketingSketchUpload from '@/component/HomePage/MarketingSketchUpload.vue'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
 import { Modal,message } from 'ant-design-vue';
 import { Https } from "@/tool/https";
 import {useStore} from 'vuex'
@@ -83,7 +84,13 @@ export default defineComponent({
         SketchboardUpload,
         MarketingSketchUpload
     },
-	setup(){
+	props:{
+		getDesignData: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(props){
 		const store = useStore()
 		let {t} = useI18n()
 		let driver__:any = computed(()=>{
@@ -285,9 +292,46 @@ export default defineComponent({
 			})
 			return bor
 		},
+		getPantongName() {
+			let colorBoards = this.store.state.UploadFilesModule.colorBoards;
+			let data: any = [];
+			for (let v of colorBoards) {
+				let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
+				let hsv = rgbToHsv(color);
+				v.hsv = hsv[0] + hsv[1] + hsv[2];
+				data.push({
+					h: hsv[0],
+					s: hsv[1],
+					v: hsv[2],
+				});
+			}
+			
+			return new Promise((resolve: any, reject: any) => {
+				Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
+					.then((rv: any) => {
+						if (rv) {
+							rv.forEach((ele: any, index: number) => {
+								colorBoards[index].id = ele.id;
+								colorBoards[index].tcx = ele.tcx;
+								colorBoards[index].name = ele.name;
+							});
+							this.store.commit("setColorboardList", colorBoards);
+							resolve();
+						}
+					})
+					.catch((res) => {
+						reject();
+					});
+			});
+		},
         //完成
         async finishCollection(){
 			this.isShowMark = true
+			this.store.commit('clearAllId')
+			this.$emit('finishCollection')
+			await this.getPantongName()
+			this.store.commit("setAllBoardData");
+
 			let sketchList = this.store.state.UploadFilesModule.sketchboard
 			let arr:any = []
 			sketchList.forEach((item:any) => {
@@ -299,12 +343,14 @@ export default defineComponent({
 				}
 				arr.push(obj)
 			});
-			let data = {sketchBoards:arr}
+			// let data = {sketchBoards:arr}
+			let data = this.getDesignData(-1)
+			data.moodboardPosition = JSON.stringify(this.store.state.UploadFilesModule.moodboardPosition)
+			data.collectionId = this.store.state.HomeStoreModule.designCollectionId?this.store.state.HomeStoreModule.designCollectionId:null
 			if(!await this.isPinOpen(sketchList)){
 				this.isShowMark = false
 				return
 			}
-			
 			let elList = document.querySelectorAll('.img_block_item_sketch img')
 			Https.axiosPost(Https.httpUrls.sketchBoardsBoundingBox, data)
 				.then((rv: any) => {
@@ -314,7 +360,6 @@ export default defineComponent({
 					GO.id = 0
 					this.showCollectionModal =false
 					this.collectionStep = 1
-					this.$emit('finishCollection')
 					if(this.driver__.driver){
 						driverObj__.moveNext()
 					}

src/component/HomePage/generalMenu.vue

@@ -1,17 +1,21 @@
 <template>
 	<div class="generalMenu_printModel">
 		<div @click.stop="openPrintModel" :class="driverClass.class1">
-			<a-popover>
+			<a-popover v-if="isCanvas">
 				<template #content>
 					<img style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
 				</template>
 				<span v-if="item.label">{{ item.label }}</span>
 				<span v-else>{{ item.name }}</span>
 			</a-popover>
+			<div v-else>
+				<span v-if="item.label">{{ item.label }}</span>
+				<span v-else>{{ item.name }}</span>
+			</div>
 		</div>
 		<ul :class="driverClass.class2" v-show="openClick">
 			<li v-for="item,index in dataList" :class="{active:deleteItem == index}" class="printModel_item" @click="setprintModel(item,index)">
-				<a-popover placement="right">
+				<a-popover placement="right" v-if="isCanvas">
 					<template #content>
 						<img v-if="item.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
 						<div v-else-if="item.img == -1" class="generalMenu_printModel_upload ">
@@ -37,7 +41,10 @@
 					<span v-if="item.label">{{ item.label }}</span>
 					<span v-else>{{ item.name }}</span>
 				</a-popover>
-				
+				<div v-else>
+					<span v-if="item.label">{{ item.label }}</span>
+					<span v-else>{{ item.name }}</span>
+				</div>
 			</li>
 		</ul>
 	</div>
@@ -64,6 +71,10 @@ import { message, Upload, Modal } from "ant-design-vue";
 			 type:Boolean,
 			 default:false,
 		 },
+		 isCanvas:{
+			 type:Boolean,
+			 default:false,
+		 },
 		 deleteItem:{
 			type:Number,
 			default:-1

src/component/HomePage/layout.vue

@@ -140,9 +140,7 @@ export default defineComponent({
 		let layoutList:any = ref([])
 		const content:any = ref<HTMLElement | null>(null);
 		let loadingShow = ref(false)
-		let styleObj:any = computed(()=>{
-			return store.state.UploadFilesModule.moodboardPosition
-		})
+		let styleObj:any = {}
 		let moodItemScale = ref(0)
 		let domObj = {
 			dom:['img','ul','.layout_rotote','.layout_translate','.layout_angle_tr','.layout_angle_tl','.layout_angle_br','.layout_angle_bl'],
@@ -692,6 +690,7 @@ export default defineComponent({
     methods: {
 		init(){
 			let parentList:any = this.$parent
+			this.styleObj = this.store.state.UploadFilesModule.moodboardPosition
 			parentList = parentList.layoutList
 			this.layout = true
 			// let layoutList = this.store.state.UploadFilesModule.moodboard
@@ -756,7 +755,7 @@ export default defineComponent({
 					zIndex: obj['z-index']?obj['z-index']:1
 				}
 			});
-			const sortedNums = nums.sort((a, b) => a.zIndex - b.zIndex);
+			const sortedNums = nums.sort((a:any, b:any) => a.zIndex - b.zIndex);
 			
 			GO.zIndex = sortedNums.length + 1
 			// GO.zIndex = sortedNums[sortedNums.length - 1].zIndex + 1
@@ -817,8 +816,9 @@ export default defineComponent({
         //提交模板
         submitTemplate() {
 			this.loadingShow = true
+			this.setDomStyle()
 			this.styleObj.domStyle = this.setIndex(this.styleObj.domStyle)//index统一排序设置值
-			this.store.commit("setDisposeMoodboardPosition", this.styleObj);
+			this.store.commit("setDisposeMoodboardPosition", JSON.parse(JSON.stringify(this.styleObj)));
 			this.layoutList.forEach((v:any)=>{
 				v.setPitch = false
 			})
@@ -841,7 +841,6 @@ export default defineComponent({
 							this.loadingShow = false
 							this.store.commit("setDisposeMoodboard", rv);
 
-							this.setDomStyle()
 
 						}
 					).catch(rv=>{

src/component/HomePage/scaleImage.vue

@@ -110,7 +110,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="scaleImage_nav" @keydown="handleKeyDown">
+		<div class="scaleImage_nav">
 			<div class="nav_left">
 				<i class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
 			</div>
@@ -163,7 +163,7 @@ export default defineComponent({
 	},
     setup(props:any,{emit}) {
 		const store = useStore();
-		
+		let {t} = useI18n()
 		let productimg = reactive({
 			isProductimg:false,
 			productimgSearchName:'',
@@ -301,12 +301,34 @@ export default defineComponent({
 				});
 			}
 		}
-		let submitBase64Data = (rv:any)=>{
+		let submitBase64Data = async (rv:any)=>{
 			loadingShow.value = true
+			let isOverlay = false
+			await new Promise<void>((resolve, reject) => {
+				Modal.confirm({
+					title: t('scaleImage.overlayOrNot'),
+					icon: createVNode(ExclamationCircleOutlined),
+					okText: 'Yes',
+					cancelText: 'No',
+					mask:false,
+					centered:true,
+					onOk() {
+						resolve()
+						isOverlay = true
+
+					},
+					onCancel(){
+						isOverlay = false
+						resolve()
+					}
+				});
+			})
 			let data = {
 				"base64": rv,
 				"category": scaleImageList.value[scaleImageIndex.value]?.categoryValue,
 				"gender": props.workspace.sexEnum.value,
+				"originalId":scaleImageList.value[scaleImageIndex.value]?.id,
+				"isOverride":isOverlay,
 			}
 			Https.axiosPost(Https.httpUrls.modifySketch, data).then(
 				(rv) => {
@@ -314,25 +336,9 @@ export default defineComponent({
 					rv.status = 'Success'
 					rv.category = scaleImageList.value[scaleImageIndex.value]?.category
 					rv.categoryValue = scaleImageList.value[scaleImageIndex.value]?.categoryValue
-					delete rv.url
-					Modal.confirm({
-						title: useI18n().t('scaleImage.overlayOrNot'),
-						icon: createVNode(ExclamationCircleOutlined),
-						okText: 'Yes',
-						cancelText: 'No',
-						mask:false,
-						centered:true,
-						onOk() {
-							scaleImageList.value[scaleImageIndex.value] = rv
-							loadingShow.value = false
-							scaleImage.value = false
-						},
-						onCancel(){
-							scaleImageList.value.unshift(rv)
-							loadingShow.value = false
-							scaleImage.value = false
-						}
-					});
+					isOverlay?(scaleImageList.value[scaleImageIndex.value] = rv):(scaleImageList.value.unshift(rv))
+					loadingShow.value = false
+					scaleImage.value = false
 				}
 			).catch(res=>{
 				loadingShow.value = false