music-score/src/page-instrument/custom-plugins/guide-driver/index.tsx

import { defineComponent, nextTick, ref } from "vue";
import { Config, DriveStep, PopoverDOM, State, driver } from "driver.js";
import "driver.js/dist/driver.css";
import state from "/src/state";
import { getGuidance, setGuidance } from "../guide-page/api";

const endGuide = (guideInfo: any) => {
  try {
    setGuidance({ guideTag: "guideInfo", guideValue: JSON.stringify(guideInfo) });
  } catch (e) {
    console.log(e);
  }
};

/** 练习模式 */
export const PractiseDriver = defineComponent({
  name: "PractiseDriver",
  setup() {
    // 初始化部分引导位置
    const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }) => {
      options.config.stageRadius = 5;
      options.config.stagePadding = 8;
      try {
        const rect = options.state.activeElement?.getBoundingClientRect();
        popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 + 4 + "px";
      } catch {}
    };

    // 乐器方向不一样引导位置不一样
    const instrumentDirection: DriveStep = {
      element: ".driver-7",
      popover: {
        title: "",
        description: "",
        popoverClass: `popoverClass ${state.fingeringInfo.direction === "transverse" ? "popoverClass7" : "popoverClass7-1"}`,
        align: state.fingeringInfo.direction === "transverse" ? "start" : "center",
        side: state.fingeringInfo.direction === "transverse" ? "top" : "left",
        nextBtnText: "下一步7/9",
        showButtons: ["next", "close"],
        onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
          if (state.fingeringInfo.direction === "transverse") driverInitialPosition(popover, options);
        },
        onCloseClick: () => {
          onDriverClose();
        },
      },
    };

    const driverOptions: Config = {
      showProgress: false,
      allowClose: false,
      popoverOffset: 3,
      disableActiveInteraction: true,
      onCloseClick: () => {
        onDriverClose();
      },
      steps: [
        {
          element: ".driver-1",
          popover: {
            title: "",
            description: "",
            popoverClass: "popoverClass popoverClass1",
            align: "end",
            side: "top",
            nextBtnText: "下一步1/9",
            showButtons: ["next", "close"],
            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
              // console.log(popover, "popover", popover.wrapper, options.state.activeElement, options.state.__overlaySvg);
              options.config.stageRadius = 1000;
              options.config.stagePadding = 0;

              // popover.wrapper.addEventListener("click", (e) => {
              //   e.stopPropagation;
              //   console.log("12121212");
              //   // driverObj.drive(1);
              // });

              // document.querySelector(".popoverClass1")?.addEventListener("click", () => {
              //   console.log("11111");
              // });
            },
          },
        },
        {
          element: ".driver-2",
          popover: {
            title: "",
            description: "",
            popoverClass: "popoverClass popoverClass2",
            align: "start",
            side: "top",
            nextBtnText: "下一步2/9",
            showButtons: ["next", "close"],
            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
              driverInitialPosition(popover, options);
            },
          },
        },
        {
          element: ".driver-3",
          popover: {
            title: "",
            description: "",
            popoverClass: "popoverClass popoverClass3",
            align: "start",
            side: "top",
            nextBtnText: "下一步3/9",
            showButtons: ["next", "close"],
            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
              driverInitialPosition(popover, options);
            },
          },
        },
        {
          element: ".driver-4",
          popover: {
            title: "",
            description: "",
            popoverClass: "popoverClass popoverClass4",
            align: "start",
            side: "top",
            nextBtnText: "下一步4/9",
            showButtons: ["next", "close"],
            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
              driverInitialPosition(popover, options);
            },
          },
        },
        {
          element: ".driver-5",
          popover: {
            title: "",
            description: "",
            popoverClass: "popoverClass popoverClass5",
            align: "start",
            side: "top",
            nextBtnText: "下一步5/9",
            showButtons: ["next", "close"],
            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
              driverInitialPosition(popover, options);
            },
          },
        },
        {
          element: ".driver-6",
          popover: {
            title: "",
            description: "",
            popoverClass: "popoverClass popoverClass6",
            align: "start",
            side: "top",
            nextBtnText: "下一步6/9",
            showButtons: ["next", "close"],
            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
              driverInitialPosition(popover, options);
            },
          },
        },
        instrumentDirection,
        {
          element: ".driver-8",
          popover: {
            title: "",
            description: "",
            popoverClass: "popoverClass popoverClass8",
            align: "start",
            side: "bottom",
            nextBtnText: "下一步8/9",
            showButtons: ["next", "close"],
            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
              options.config.stageRadius = 1000;
              options.config.stagePadding = 0;
              try {
                const rect = options.state.activeElement?.getBoundingClientRect();
                popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 - 4 + "px";
              } catch {}
            },
          },
        },
        {
          element: ".driver-9",
          popover: {
            title: "",
            description: "",
            popoverClass: "popoverClass popoverClass9 popoverClose",
            align: "end",
            side: "bottom",
            prevBtnText: "再看一遍",
            doneBtnText: "完成",
            showButtons: ["next", "previous", "close"],
            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
              options.config.stageRadius = 1000;
              options.config.stagePadding = 0;
              try {
                const rect = options.state.activeElement?.getBoundingClientRect();
                popover.wrapper.style.marginLeft = -((rect?.width || 0) / 2 - 8) + "px";
              } catch {}
            },
            onPrevClick: () => {
              driverObj.drive(0);
            },
            onNextClick: () => {
              onDriverClose();
            },
          },
        },
      ],
    };

    let driverObj: any;

    const guideInfo = ref({} as any);
    const getAllGuidance = async () => {
      try {
        if (state.guideInfo) {
          guideInfo.value = state.guideInfo;
        } else {
          const res = await getGuidance({ guideTag: "guideInfo" });
          if (res.data) {
            guideInfo.value = JSON.parse(res.data?.guideValue) || null;
          } else {
            guideInfo.value = {};
          }
        }
        if (!(guideInfo.value && guideInfo.value.practiseDriver)) {
          driverObj = driver(driverOptions);
          nextTick(() => {
            driverObj.drive(0);
          });
        }
      } catch (e) {
        console.log(e);
      }
    };

    getAllGuidance();

    // 结束关闭弹窗
    const onDriverClose = () => {
      if (!guideInfo.value) {
        guideInfo.value = { practiseDriver: true };
      } else {
        guideInfo.value.practiseDriver = true;
      }
      endGuide(guideInfo.value);
      driverObj.destroy();
    };

    return () => <div></div>;
  },
});

/** 跟练模式 */
export const FollowDriver = defineComponent({
  name: "FollowDriver",
  setup() {
    // 初始化部分引导位置
    const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }) => {
      options.config.stageRadius = 5;
      options.config.stagePadding = 8;
      try {
        const rect = options.state.activeElement?.getBoundingClientRect();
        popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 + 4 + "px";
      } catch {}
    };

    const driverOptions: Config = {
      showProgress: false,
      allowClose: false,
      popoverOffset: 3,
      disableActiveInteraction: true,
      steps: [
        {
          element: ".follow-1",
          popover: {
            title: "",
            description: "",
            popoverClass: "popoverClass popoverClassF1",
            align: "end",
            side: "top",
            nextBtnText: "下一步1/3",
            showButtons: ["next", "close"],
            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
              options.config.stageRadius = 1000;
              options.config.stagePadding = 0;
            },
            onCloseClick: () => {
              onDriverClose();
            },
          },
        },
        {
          element: ".driver-5",
          popover: {
            title: "",
            description: "",
            popoverClass: "popoverClass popoverClass5",
            align: "start",
            side: "top",
            nextBtnText: "下一步2/3",
            showButtons: ["next", "close"],
            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
              driverInitialPosition(popover, options);
            },
            onCloseClick: () => {
              onDriverClose();
            },
          },
        },
        {
          element: ".driver-6",
          popover: {
            title: "",
            description: "",
            popoverClass: "popoverClass popoverClass6 popoverClose",
            align: "start",
            side: "top",
            prevBtnText: "再看一遍",
            doneBtnText: "完成",
            showButtons: ["next", "previous", "close"],
            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
              driverInitialPosition(popover, options);
            },
            onPrevClick: () => {
              driverObj.drive(0);
            },
            onNextClick: () => {
              onDriverClose();
            },
            onCloseClick: () => {
              onDriverClose();
            },
          },
        },
      ],
    };

    let driverObj: any;

    const guideInfo = ref({} as any);
    const getAllGuidance = async () => {
      try {
        if (state.guideInfo) {
          guideInfo.value = state.guideInfo;
        } else {
          const res = await getGuidance({ guideTag: "guideInfo" });
          if (res.data) {
            guideInfo.value = JSON.parse(res.data?.guideValue) || null;
          } else {
            guideInfo.value = {};
          }
        }
        if (!(guideInfo.value && guideInfo.value.followDriver)) {
          driverObj = driver(driverOptions);
          nextTick(() => {
            driverObj.drive(0);
          });
        }
      } catch (e) {
        console.log(e);
      }
    };

    getAllGuidance();

    // 结束关闭弹窗
    const onDriverClose = () => {
      if (!guideInfo.value) {
        guideInfo.value = { followDriver: true };
      } else {
        guideInfo.value.followDriver = true;
      }
      endGuide(guideInfo.value);
      driverObj.destroy();
    };

    return () => <div></div>;
  },
});

// 评测模式
export const EvaluatingDriver = defineComponent({
  name: "EvaluatingDriver",
  setup() {
    // 初始化部分引导位置
    const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }) => {
      options.config.stageRadius = 5;
      options.config.stagePadding = 8;
      try {
        const rect = options.state.activeElement?.getBoundingClientRect();
        popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 + 4 + "px";
      } catch {}
    };

    const driverOptions: Config = {
      showProgress: false,
      allowClose: false,
      popoverOffset: 3,
      disableActiveInteraction: true,
      steps: [
        {
          element: ".evaluting-1",
          popover: {
            title: "",
            description: "",
            popoverClass: "popoverClass popoverClassE1",
            align: "end",
            side: "top",
            nextBtnText: "下一步1/3",
            showButtons: ["next", "close"],
            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
              options.config.stageRadius = 1000;
              options.config.stagePadding = 0;
            },
            onCloseClick: () => {
              onDriverClose();
            },
          },
        },
        {
          element: ".driver-5",
          popover: {
            title: "",
            description: "",
            popoverClass: "popoverClass popoverClass5",
            align: "start",
            side: "top",
            nextBtnText: "下一步2/3",
            showButtons: ["next", "close"],
            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
              driverInitialPosition(popover, options);
            },
            onCloseClick: () => {
              onDriverClose();
            },
          },
        },
        {
          element: ".driver-6",
          popover: {
            title: "",
            description: "",
            popoverClass: "popoverClass popoverClass6 popoverClose",
            align: "start",
            side: "top",
            prevBtnText: "再看一遍",
            doneBtnText: "完成",
            showButtons: ["next", "previous", "close"],
            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
              driverInitialPosition(popover, options);
            },
            onPrevClick: () => {
              driverObj.drive(0);
            },
            onNextClick: () => {
              onDriverClose();
            },
            onCloseClick: () => {
              onDriverClose();
            },
          },
        },
      ],
    };
    let driverObj: any;

    const guideInfo = ref({} as any);
    const getAllGuidance = async () => {
      try {
        if (state.guideInfo) {
          guideInfo.value = state.guideInfo;
        } else {
          const res = await getGuidance({ guideTag: "guideInfo" });
          if (res.data) {
            guideInfo.value = JSON.parse(res.data?.guideValue) || null;
          } else {
            guideInfo.value = {};
          }
        }
        if (!(guideInfo.value && guideInfo.value.evaluatingDriver)) {
          driverObj = driver(driverOptions);
          nextTick(() => {
            driverObj.drive(0);
          });
        } else {
          driverObj.destroy();
        }
      } catch (e) {
        console.log(e);
      }
    };

    getAllGuidance();

    // 结束关闭弹窗
    const onDriverClose = () => {
      if (!guideInfo.value) {
        guideInfo.value = { evaluatingDriver: true };
      } else {
        guideInfo.value.evaluatingDriver = true;
      }
      endGuide(guideInfo.value);
      driverObj?.destroy();
    };

    return () => <div></div>;
  },
});

// 评测模式 - 结果弹窗
export const EvaluatingResultDriver = defineComponent({
  name: "EvaluatingResultDriver",
  setup() {
    // 初始化部分引导位置
    const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }, position = 1) => {
      options.config.stageRadius = 1000;
      options.config.stagePadding = 0;
      try {
        const rect = options.state.activeElement?.getBoundingClientRect();
        popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * position + 4 + "px";
      } catch {}
    };

    const driverOptions: Config = {
      showProgress: false,
      allowClose: false,
      popoverOffset: 3,
      disableActiveInteraction: true,
      steps: [
        {
          element: ".evaluting-result-1",
          popover: {
            title: "",
            description: "",
            popoverClass: "popoverClass popoverClassER1",
            align: "start",
            side: "right",
            nextBtnText: "下一步1/4",
            showButtons: ["next", "close"],
            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
              options.config.stageRadius = 12;
              options.config.stagePadding = 10;
            },
            onCloseClick: () => {
              onDriverClose();
            },
          },
        },
        {
          element: ".evaluting-result-2",
          popover: {
            title: "",
            description: "",
            popoverClass: "popoverClass popoverClassER2",
            align: "start",
            side: "top",
            nextBtnText: "下一步2/4",
            showButtons: ["next", "close"],
            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
              options.config.stageRadius = 1000;
              options.config.stagePadding = 0;
              try {
                const rect = options.state.activeElement?.getBoundingClientRect();
                popover.wrapper.style.marginLeft = (rect?.width || 0) / 2 - 4 + "px";
              } catch {}
            },
            onCloseClick: () => {
              onDriverClose();
            },
          },
        },
        {
          element: ".evaluting-result-3",
          popover: {
            title: "",
            description: "",
            popoverClass: "popoverClass popoverClassER3",
            align: "end",
            side: "top",
            nextBtnText: "下一步3/4",
            showButtons: ["next", "close"],
            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
              driverInitialPosition(popover, options, -1);
            },
            onCloseClick: () => {
              onDriverClose();
            },
          },
        },
        {
          element: ".evaluting-result-4",
          popover: {
            title: "",
            description: "",
            popoverClass: "popoverClass popoverClassER4 popoverClose",
            align: "end",
            side: "top",
            prevBtnText: "再看一遍",
            doneBtnText: "完成",
            showButtons: ["next", "previous", "close"],
            onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
              driverInitialPosition(popover, options, -1);
            },
            onPrevClick: () => {
              driverObj.drive(0);
            },
            onNextClick: () => {
              onDriverClose();
            },
            onCloseClick: () => {
              onDriverClose();
            },
          },
        },
      ],
    };
    let driverObj: any;

    const guideInfo = ref({} as any);
    const getAllGuidance = async () => {
      try {
        if (state.guideInfo) {
          guideInfo.value = state.guideInfo;
        } else {
          const res = await getGuidance({ guideTag: "guideInfo" });
          if (res.data) {
            guideInfo.value = JSON.parse(res.data?.guideValue) || null;
          } else {
            guideInfo.value = {};
          }
        }
        if (!(guideInfo.value && guideInfo.value.evaluatingResultDriver)) {
          driverObj = driver(driverOptions);
          nextTick(() => {
            driverObj.drive(0);
          });
        }
      } catch (e) {
        console.log(e);
      }
    };

    getAllGuidance();

    // 结束关闭弹窗
    const onDriverClose = () => {
      if (!guideInfo.value) {
        guideInfo.value = { evaluatingResultDriver: true };
      } else {
        guideInfo.value.evaluatingResultDriver = true;
      }
      endGuide(guideInfo.value);
      driverObj.destroy();
    };

    return () => <div></div>;
  },
});