qjkankan_v1.1.1/packages/qjkankan-view/src/sdk/QJKanKan/modules/hotspot.js

/**
 * krpano 1.20 全景hotspot统一schema
 *
 * 
 *  */
// import config from '../config'

import 'core-js/modules/es.array.at'
import 'core-js/modules/web.structured-clone'

console.log('支持-structuredClone', 'structuredClone' in globalThis)

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 (origin && origin.titleDisplayMode == "always") {
            dest.visible = 0
        }
        if (origin && origin.titleDisplayMode == "never") {
            dest.visible = 1
        }
        if (origin && origin.titleDisplayMode == "hover") {
            dest.visible = 2
        }
        if ('visible' in origin && typeof origin.visible == "boolean") {
            dest.visible = origin.visible ? 0 : 1
            dest.style.position = "top"
        }
        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 || '';
    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 || '';
    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);
    }
}