aida_front/src/tool/guide.js

import { nextTick} from "vue";
import { driver } from "driver.js";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import "driver.js/dist/driver.css";
import { useStore } from "vuex";
//版本一
let driverIndex__ = 0
let store
let element
let data = {
	index:driverIndex__,
	driver:true,
}
const driverObj__ = driver({
	steps: [
		{ element: '.Guide_1_1_1', popover: { title: 'Title', description: 'Description' } },
		{ element: '.Guide_1_27', popover: { title: '', description: 'You can change the mannequin and other settings in Workspace.' } },
		{ element: '.Guide_1_28', popover: { title: '', description: 'Change the mannequin here.', side: "right",align: 'center' } },
		{ element: '.Guide_1_28', popover: { title: '', description: 'Change the mannequin here.', side: "right",align: 'end' } },
		{ element: '.Guide_1_29', popover: { title: '', description: 'Select a mannequin of your choice from our system library.' } },


		{ element: '.Guide_1_1', popover: { title: '', description: 'Begin your creative journey here. ' } },
		{ element: '.Guide_1_1_2', popover: { title: '', description: 'Begin your creative journey here. ' } },
		{ element: '.Guide_1_1_2', popover: { title: '', description: 'Begin your creative journey here. ' } },
		// { element: '.Guide_1_1_2', popover: { title: '', description: 'Begin your creative journey here. ' } },
		// { element: '.Guide_1_3', popover: { title: '', description: 'Description' } },
		// { element: '.Guide_1_2', popover: { title: '', description: 'Description' } },
		{ element: '.Guide_1_4', popover: { title: '', description: 'Click here to try the latest image generation technology to create your mood board.' } },
		{ element: '.Guide_1_5', popover: { title: '', description: "Enter keywords that capture the mood you wish to express and then click the 'Generate' button." } },
		{ element: '.Guide_1_6', popover: { title: '', description: 'Select three images for your moodboard.' } },
		{ element: '.Guide_1_7', popover: { title: '', description: 'Click here to layout your moodboard.' } },
		{ element: '.Guide_1_8', popover: { title: '', description: 'Click here for next step.' } },
		//以上moodboard
		{ element: '.Guide_1_2_1', popover: { title: '', description: 'Upload two print images here' } },
		{ element: '.Guide_1_2_2', popover: { title: '', description: 'Crop the uploaded image here.' } },
		{ element: '.Guide_1_2_2', popover: { title: '', description: 'Crop the uploaded image here.' } },
		{ element: '.Guide_1_2_3', popover: { title: '', description: 'Crop the uploaded image here.' } },
		{ element: '.Guide_1_2_4', popover: { title: '', description: 'Crop the uploaded image here.' } },
		{ element: '.Guide_1_2_5', popover: { title: '', description: 'Crop the uploaded image here.' } },
		{ element: '.Guide_1_2_6', popover: { title: '', description: 'Crop the uploaded image here.' } },
		{ element: '.Guide_1_2_7', popover: { title: '', description: 'Crop the uploaded image here.' } },
		{ element: '.Guide_1_2_8', popover: { title: '', description: 'Crop the uploaded image here.' } },
		{ element: '.Guide_1_2_9', popover: { title: '', description: 'Crop the uploaded image here.' } },
		{ element: '.Guide_1_8', popover: { title: '', description: 'Click here for next step.' } },
		{ element: '.Guide_1_10', popover: { title: '', description: 'Click here to extract primary colors from image.' } },
		{ element: '.Guide_1_11', popover: { title: '', description: 'Select the color you want from these color blocks as the first color.' } },

		{ element: '.Guide_1_11_1', popover: { title: '', description: 'Click on this block to select the second color.' } },
		{ element: '.Guide_1_11_2', popover: { title: '', description: 'Choose the color you want from these color blocks.' } },

		{ element: '.Guide_1_8', popover: { title: '', description: 'Click here for next step.' } },
		{ element: '.Guide_1_9', popover: { title: '', description: 'Upload or select two sketches for your collection on this page.' } },
		{ element: '.Guide_1_9_1', popover: { title: '', description: 'Upload or select two sketches for your collection on this page.' } },
		{ element: '.Guide_1_9_2', popover: { title: '', description: 'Upload or select two sketches for your collection on this page.' } },

		{ element: '.Guide_1_13', popover: { title: '', description: 'Click here to choose a category for the uploaded sketch.' } },
		{ element: '.Guide_1_13_1', popover: { title: '', description: 'Choose correct category for the sketch.' } },
		{ element: '.Guide_1_13_2', popover: { title: '', description: 'Choose correct category for the sketch.' } },
		{ element: '.Guide_1_14', popover: { title: '', description: 'After you have confirmed categories of sketches are correct, click here to complete the uploading process.' } },
		//开始design
		{ element: '.Guide_1_15', popover: { title: '', description: 'Click here to let AI generate design illustrations.' } },
		{ element: '.Guide_1_16', popover: { title: '', description: 'Please wait a few seconds.' } },
		{ element: '.Guide_1_17', popover: { title: '', description: 'Click on any design image you are interested in to modify the details.' } },
		// { element: '.Guide_1_18', popover: { title: '', description: 'Description' } },
		{ element: '.Guide_1_30', popover: { title: '', description: 'Click the ‘Redesign’ button to generate new results using the selected mannequin.' } },
		{ element: '.Guide_1_16', popover: { title: '', description: 'Click here to let AI generate design illustrations.' } },
		{ element: '.Guide_1_17', popover: { title: '', description: 'Click on any design image you are interested in to modify the details.' } },
		{ element: '.Guide_1_19', popover: { title: '', description: 'Click on the clothes to modify its details.' } },
		{ element: '.Guide_1_20', popover: { title: '', description: 'Click here to add or change the print.' } },
		{ element: '.Guide_1_21', popover: { title: '', description: 'You can find the print you uploaded earlier in your Library.' } },
		{ element: '.Guide_1_22', popover: { title: '', description: 'Select a print for this sketch.' } },
		{ element: '.Guide_1_23', popover: { title: '', description: 'Click here to layout the selected print' } },
		// { element: '.Guide_1_24', popover: { title: '', description: 'Description' } },
		{ element: '.Guide_1_25', popover: { title: '', description: 'Preview printed design here.' ,side: "right",align: 'end' } },
		{ element: '.Guide_1_26', popover: { title: '', description: 'Click here to finalize your modification.' } },
		{ element: '.Guide_1_99', popover: { title: 'Begin Your Design', description: 'Your guide is complete, and now the canvas is yours to create freely. For more insights and details, check out our demo video on the homepage at <a href="https://code-create.com.hk/aida/" style="pointer-events: auto;" target="_blank">https://code-create.com.hk/aida/</a>' } },
	  ],
	  // showProgress: true,//控制总页数和当前页数是否显示
	allowClose:false,
	showButtons:false,
	stagePadding:10,//切口到元素的距离
	stageRadius:5,//切口圆弧度
	allowKeyboardControl:true,//控制是否可以键盘控制下一步
	disableActiveInteraction:false,//是否禁用显示元素的交互
	overlayOpacity:.4,
	overlay: true,
	// nextBtnText: '—›',
	// prevBtnText: '‹—',
	doneBtnText: '✕',
	onPopoverRender: (popover, options) => {//每个步骤的元素和所有信息
		// console.log(popover,options,element);	
		popover.previousButton.style.display = 'none'
		// let driver = document.querySelector('body')
		driverIndex__ = driverObj__.getState().activeIndex
		data = {
			index : driverIndex__,
			driver : true,
		}
		store?.commit("setGuide", data);
		if(options.state.activeIndex ==  0){
			popover.wrapper.style.display = 'none'
		}else{
			popover.wrapper.style.display = 'block'
		}
		
		//判断是不是generate 如果是就吧边距设为0
		// if(options.state.activeIndex >= 2 && options.state.activeIndex < 3){
		// 	options.config.stagePadding = 0
		// }else{
		// 	options.config.stagePadding = 10
		// }
		if(
			// options.state.activeIndex >=  2 && options.state.activeIndex < 3 || 
			options.state.activeIndex >=  6 && options.state.activeIndex < 9 || 
			options.state.activeIndex >= 14 && options.state.activeIndex < 16 || 
			// options.state.activeIndex >= 24 && options.state.activeIndex < 25 ||
			driverObj__.isLastStep()
		){
			popover.footer.style.display = 'block'
			// popover.previousButton.style.display = 'block'
			popover.footerButtons.style.pointerEvents = 'auto';
			// driver.classList.add('showEvents')
			// addDiv(options.state.activeElement)
		}else{
			popover.footer.style.display = 'none'
			// popover.previousButton.style.display = 'none'
			// removeDiv(options.state.activeElement)
			popover.footerButtons.style.pointerEvents = 'none';
			// driver.classList.remove('showEvents')
		}
		nextTick().then(()=>{
			if(element){
				element.classList.remove('Guide_')
			}
			element = options.state.activeElement
			element.classList.add('Guide_')
		})
		
		
	},
	//销毁前
	onDestroyStarted:()=>{
		console.log(213123123);
		data = {
			index : driverIndex__,
			driver : false,
		}
		store?.commit("setGuide", data);
		setCookie("isBeginner", false);
		driverObj__.destroy();//销毁方法
	},
	//销毁前
	onDestroyed:()=>{
	},
	
	

	// onNextClick:(element, step, options) =>{
	// 	// if(options.state.activeIndex == 2){
	// 	// 	driverObj__.moveTo(4)
	// 	// }else{
	// 	// 	driverObj__.moveNext()
	// 	// }
	// }
});
function addDiv(element){
	element.style.posiiton = 'relative'
	const mask = document.getElementsByClassName('driver-mask__')?.[0]
	if(mask){
	}else{
		const mask = document.createElement('div');
		mask.style.position = 'absolute';
		mask.style.top = '0';
		mask.style.left = '0';
		mask.style.width = '100%';
		mask.style.height = '100%';
		mask.style.backgroundColor = 'rgba(0, 0, 0, 0)';
		mask.style.zIndex = '9999';
		mask.classList.add('driver-mask__')
		element.appendChild(mask);
	}
}
function removeDiv(element){
	const mask = document.getElementsByClassName('driver-mask__')?.[0]
	if(mask){
		// element.removeChild(mask);
		mask.remove()
	}
}

const openGuide = () =>{
	let isBeginner = JSON.parse(getCookie('isBeginner'))
	let data
	// console.log(isBeginner);
	if(isBeginner){
		driverObj__.drive();
		data = {
			index:driverIndex__,
			driver:true,
		}
	}else{
		driverObj__.destroy();
		data = {
			index:driverIndex__,
			driver:false,
		}
	}
	driverObj__.destroy();
	// driverObj__.drive();

	data = {
		index:driverIndex__,
		driver:false,
	}
	store = useStore()
	// driverObj__.moveTo(18);
	store?.commit("setGuide", data);
	// driverObj__.moveNext();
	// driverObj__.movePrevious();
}	

export{
    openGuide,
	driverObj__,
	driverIndex__,
}