qjkankan_v1.1.1/packages/qjkankan-editor/src/core/hotspot.js

/**
 * krpano 1.20 全景hotspot统一schema
 *
 *
 *  */

import config from "../config";

const initState = {
  id: "",
  title: "",
  type: 0, // 热点大类型
  ath: 0,
  atv: 0,
  link: "",
  icon: "",
  visible: true,
  size: 0,
  style: {
    fontSize: 12,
    position: "top",
    isHover: false,
    borderColor: "",
    fillColor: "",
    textColor: "",
    isShowLine: "",
    isTextWrap: "",
    lineDirection: "",
    textDirection: "",
    textNumPerLine: "",
    duration: 0,
    frameNumber: 0,
    frameWidth: 0,
  },
};
//基本样式汇总
const convertBaseStyle = (dest, origin) => {
  if (dest) {
    // normal

    dest.style.fontSize = origin.fontSize;
    dest.style.position = origin.titlePosition;
    // 兼容旧数据

    if ("visible" in origin && typeof origin.visible == "boolean") {
      dest.visible = origin.visible ? 0 : 1;
      // origin.titleDisplayMode = origin.visible ? "always" : "never";
      origin.titleDisplayMode = origin.visible ? 1 : 0;
      delete origin.visible;
      dest.style.position = "top";
    }
    // if (origin && origin.titleDisplayMode == "always") {
    if (origin && origin.titleDisplayMode == 1) {
      dest.visible = 0;
    }
    // if (origin && origin.titleDisplayMode == "never") {
    if (origin && origin.titleDisplayMode == 0) {
      dest.visible = 1;
    }
    if (origin && origin.titleDisplayMode == "hover") {
      dest.visible = 2;
    }

    dest.style.borderColor = "";
    dest.style.fillColor = "rgba(0,0,0,0.8)";
    dest.style.textColor = "rgba(255,255,255,1)";
  }
  //custom
  if (origin && origin.hotspotIconType === "serial_frame") {
    dest.style.duration = origin.serialFrameInfo.duration;
    dest.style.frameNumber = origin.serialFrameInfo.frameNumber;
    dest.style.frameWidth = origin.serialFrameInfo.frameWidth;
  }
  //custom
  if (origin && origin.hotspotIconType === "personalized_tag") {
    dest.style.borderColor = origin.personalizedTagInfo.borderColor;
    dest.style.fillColor = origin.personalizedTagInfo.fillColor;
    dest.style.isTextWrap = origin.personalizedTagInfo.isTextWrap;
    dest.style.lineDirection = origin.personalizedTagInfo.lineDirection;
    dest.style.textColor = origin.personalizedTagInfo.textColor;
    dest.style.textDirection = origin.personalizedTagInfo.textDirection;
    dest.style.textNumPerLine = origin.personalizedTagInfo.textNumPerLine;
    dest.style.isShowLine = origin.personalizedTagInfo.isShowLine;
  }
};

const coverSystemIconPart = (origin) => {
  const duplicate = structuredClone(initState);
  duplicate.id = origin.name;
  duplicate.title = origin.hotspotTitle;
  duplicate.ath = origin.ath;
  duplicate.atv = origin.atv;
  duplicate.type = 0;
  duplicate.icon = origin.img || "";
  duplicate.link = origin.link || "";
  duplicate.size = origin.size;
  convertBaseStyle(duplicate, origin);
  return duplicate;
};

const coverImageconPart = (origin) => {
  const defaultImage = config.getStaticResource("/panoassets/images/hotspot/image_place_holder.png");
  const duplicate = structuredClone(initState);
  duplicate.id = origin.name;
  duplicate.title = origin.hotspotTitle;
  duplicate.ath = origin.ath;
  duplicate.atv = origin.atv;
  duplicate.type = 1;
  duplicate.icon = origin.customIconInfo.img || defaultImage;
  duplicate.link = origin.link || "";
  duplicate.size = origin.size;
  convertBaseStyle(duplicate, origin);
  return duplicate;
};
const coverSerialFrame = (origin) => {
  const duplicate = structuredClone(initState);
  const defaultImage = config.getStaticResource("/panoassets/images/hotspot/image_place_holder.png");
  // console.log('defaultImage', defaultImage);
  duplicate.id = origin.name;
  duplicate.title = origin.hotspotTitle;
  duplicate.ath = origin.ath;
  duplicate.atv = origin.atv;
  duplicate.type = 2;

  duplicate.icon = origin.serialFrameInfo.img + "?x-oss-process=image/resize,w_128,q_80" || defaultImage;
  duplicate.link = origin.link || "";
  duplicate.size = origin.size;
  convertBaseStyle(duplicate, origin);
  return duplicate;
};

const coverpersonalizedTag = (origin) => {
  const duplicate = structuredClone(initState);
  duplicate.id = origin.name;
  duplicate.title = origin.hotspotTitle;
  duplicate.ath = origin.ath;
  duplicate.atv = origin.atv;
  duplicate.type = 3;
  duplicate.link = origin.link || "";
  duplicate.size = origin.size;
  convertBaseStyle(duplicate, origin);
  return duplicate;
};

export const convertJQHotspot = (origin) => {
  const type = origin.hotspotIconType;
  
  switch (type) {
    case "system_icon":
      return coverSystemIconPart(origin);
    case "custom_image":
      return coverImageconPart(origin);
    case "serial_frame":
      return coverSerialFrame(origin);
    case "personalized_tag":
      return coverpersonalizedTag(origin);
    default:
      return coverSystemIconPart(origin);
  }
};