重构热点兼容多类型

packages/qjkankan-editor/public/static/template/customTooltip.xml

@@ -2,9 +2,38 @@
     <!-- 1.20. 新热点模式 -->
     <action name="addJQHotspot">
         showlog();
-        set(schp_name,%2); 
+        set(hsp_name,%1); 
+        set(hsp_type,%2); 
+        
+        trace('hotspotStyle::',%10);
+        if(%2==0, set(hotspot[get(hsp_name)].url,%4););
+        ifnot(%2==0, set(hotspot[get(hsp_name)].type, 'text'));
+        set(hotspot[get(hsp_name)].name,%1);
+        set(hotspot[get(hsp_name)].hotspottype,%2);
+        set(hotspot[get(hsp_name)].hotspottitle,%3);
+        <!-- set(hotspot[get(hsp_name)].hotspotStyle,%10); -->
+
+        set(hotspot[get(hsp_name)].ath,%5);
+        set(hotspot[get(hsp_name)].atv,%6);
+        set(hotspot[get(hsp_name)].width,'prop');
+        set(hotspot[get(hsp_name)].height,%8);
+        set(hotspot[get(hsp_name)].visible,true);
+        set(hotspot[get(hsp_name)].alpha,1);
+        set(hotspot[get(hsp_name)].scale,1);
+        set(hotspot[get(hsp_name)].autoalpha,false);
+        set(hotspot[get(hsp_name)].distorted,false);
+        <!-- layer -->
+        txtadd(hotspot[get(hsp_name)].onloaded,"add_all_2_tooltip();");
+        addhotspot(get(hsp_name));
+        set(hotspot[get(hsp_name)].ondown,draghotspot1(););
+
+    </action>
+
+
+
+    <action name="addImgTextHotSpot1">
+        set(schp_name,%1); 
         set(hotspot[get(schp_name)].type,'text');
-        <!-- set(hotspot[get(schp_name)].url,%1); -->
         set(hotspot[get(schp_name)].ath,%4);
         set(hotspot[get(schp_name)].atv,%5);
         set(hotspot[get(schp_name)].hotspottitle,%3);
@@ -50,8 +79,11 @@
 
     <action name="add_all_2_tooltip">
         txtadd(tooltipname2, 'tooltip2_', get(name)); 
+        trace('hotspottitle::',get(hotspottitle));
         set(toolP,get(name)); 
-        trace('parentName::',get(name));
+
+        <!-- copy(textColor, hotspotStyle.); -->
+ 
         addlayer(get(tooltipname2));
         txtadd(layer[get(tooltipname2)].parent, 'hotspot[', get(name), ']');
         set(layer[get(tooltipname2)].autowidth, true);

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

@@ -12,6 +12,7 @@ const initState = {
     link: "",
     icon: "",
     visible: true,
+    size: 0,
     style: {
         fontSize: 12,
         position: "top",
@@ -27,9 +28,35 @@ const initState = {
         frameNumber: 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 = true
+        }
+        if (origin && origin.titleDisplayMode == "never") {
+            dest.visible = false
+        }
+    }
+    //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
+    }
+
+}
 
 const coverSystemIconPart = (origin) => {
-    const duplicate = Object.assign({}, initState);
+    const duplicate = structuredClone(initState)
     duplicate.id = origin.name;
     duplicate.title = origin.hotspotTitle;
     duplicate.ath = origin.ath;
@@ -37,18 +64,66 @@ const coverSystemIconPart = (origin) => {
     duplicate.type = 0;
     duplicate.icon = origin.img || '';
     duplicate.link = origin.link || '';
-    duplicate.style.fontSize = origin.fontSize;
+    duplicate.size = origin.size;
+    convertBaseStyle(duplicate, origin)
+    return duplicate;
+}
+
+const coverImageconPart = (origin) => {
+    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 || origin.img || '';
+    duplicate.link = origin.link || '';
+    duplicate.size = origin.size;
+    convertBaseStyle(duplicate, origin)
+    return duplicate;
+}
+const coverSerialFrame = (origin) => {
+    const duplicate = structuredClone(initState);
+    duplicate.id = origin.name;
+    duplicate.title = origin.hotspotTitle;
+    duplicate.ath = origin.ath;
+    duplicate.atv = origin.atv;
+    duplicate.type = 2;
+    duplicate.icon = origin.customIconInfo.img || origin.img || '';
+    duplicate.link = origin.link || '';
+    duplicate.size = origin.size;
+    convertBaseStyle(duplicate, origin)
+    return duplicate;
 }
 
 
-const convertJQHotspot = (origin) => {
+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':
-
-            break;
+            return coverSystemIconPart(origin);
+        case 'custom_image':
+            return coverImageconPart(origin);
+        case 'serial_frame':
+            return coverSerialFrame(origin);
+        case 'personalized_tag':
+            return coverpersonalizedTag(origin);
         default:
-            break;
+            return false;
     }
 }
 

packages/qjkankan-editor/src/core/utils.js

@@ -1,6 +1,5 @@
-
 import Vue from 'vue'
-
+import { convertJQHotspot } from './hotspot'
 let vue = new Vue()
 
 export default class Utils {
@@ -59,19 +58,20 @@ export default class Utils {
    */
 
   edithotspot(krpano, param) {
-    krpano.call(`editImgTextHotSpot(
-      ${param.img},
-      ${param.name},
-      ${param.hotspotTitle},
-      ${param.ath},
-      ${param.atv},
-      ${true},
-      ${true},
-      ${param.link},
-      ${true},
-      ${param.visible},
-      ${param.size || 1},
-      ${param.fontSize})`);
+
+    // krpano.call(`editImgTextHotSpot(
+    //   ${param.img},
+    //   ${param.name},
+    //   ${param.hotspotTitle},
+    //   ${param.ath},
+    //   ${param.atv},
+    //   ${true},
+    //   ${true},
+    //   ${param.link},
+    //   ${true},
+    //   ${param.visible},
+    //   ${param.size || 1},
+    //   ${param.fontSize})`);
   }
 
 
@@ -80,30 +80,37 @@ export default class Utils {
    */
 
   addhotspot(krpano, param, type) {
-    krpano.set("curscreen_x", krpano.get('stagewidth') / 2);
-    krpano.set("curscreen_y", krpano.get('stageheight') / 2);
-    krpano.call("screentosphere(curscreen_x, curscreen_y, curscreen_ath, curscreen_atv);");
-    let ath = krpano.get("curscreen_ath");
-    let atv = krpano.get("curscreen_atv");
-    console.warn('hotspot-data',param,type);
     /**
      * type: 0,系统图标 , 1.自定义图际. 2.序列帧  3.个性标签
      */
-
-    // krpano.call(`addJQHotspot(
-    //   ${param.img},
-    //   ${param.name},
-    //   ${param.hotspotTitle},
-    //   ${param.ath != '' ? param.ath : ath},
-    //   ${param.atv != '' ? param.atv : atv},
-    //   ${true},
-    //   ${type},
-    //   ${param.link},
-    //   ${true},
-    //   ${param.visible},
-    //   ${(param.size * 50) || 1},
-    //   ${Number(param.fontSize)})`);
-
+    try {
+      krpano.set("curscreen_x", krpano.get('stagewidth') / 2);
+      krpano.set("curscreen_y", krpano.get('stageheight') / 2);
+      krpano.call("screentosphere(curscreen_x, curscreen_y, curscreen_ath, curscreen_atv);");
+      const hotspot = convertJQHotspot(param);
+      const hotspotStyle = Object.values(hotspot.style);
+      const hotspotString = hotspotStyle.join('##');
+      const hotspotSize = (Number(hotspot.size) || 1) * 50;
+      const ath = hotspot.ath != '' ? hotspot.ath : krpano.get("curscreen_ath");
+      const atv = hotspot.atv != '' ? hotspot.atv : krpano.get("curscreen_atv");
+
+      const callString = `addJQHotspot(
+        ${hotspot.id},
+        ${hotspot.type},
+        ${hotspot.title},
+        "${hotspot.icon}",
+        ${ath},
+        ${atv},
+        "${hotspot.link}",
+        ${hotspotSize},
+        ${hotspot.visible},
+        "${hotspotString}"
+        )`;
+      console.warn('callString', callString.trim());
+      krpano.call(callString);
+    } catch (error) {
+      console.error('error', error);
+    }
 
     // 设置热点图片默认的偏移值
     // let offset = '-130%'
@@ -206,7 +213,7 @@ export default class Utils {
     if (typeof someData == 'string') {
       mysd = JSON.parse(someData)
     }
-  
+
     mysd.hotspots.forEach(item => {
       this.addhotspot(krpano, item, type)
     });

packages/qjkankan-editor/src/views/hotspot/EditPanel.vue

@@ -245,14 +245,14 @@ export default {
       },
       deep: true,
     },
-    hotspotIcon: {
-      handler(val) {
-        console.error("this.hotspotIcon", val);
-        val.img.length > 0 &&
-          this.$getKrpano().set(`hotspot[${this.hotspot.name}].url`, val.img);
-      },
-      deep: true,
-    },
+    // hotspotIcon: {
+    //   handler(val) {
+    //     console.error("this.hotspotIcon", val);
+    //     val.img.length > 0 &&
+    //       this.$getKrpano().set(`hotspot[${this.hotspot.name}].url`, val.img);
+    //   },
+    //   deep: true,
+    // },
     // "hotspot.img": function () {
     //   console.log("this.hotspot.img", this.hotspot.img);
     //   this.$getKrpano().set(
@@ -260,54 +260,54 @@ export default {
     //     this.hotspot.img
     //   );
     // },
-    "hotspot.titlePosition": function (val) {
-      console.log("111", val);
-      if (val === "bottom") {
-        this.$getKrpano().set("layer[tooltip_" + this.hotspot.name + "].css");
-      }
-    },
-    "hotspot.hotspotTitle": function () {
-      this.$getKrpano().set(
-        "layer[tooltip_" + this.hotspot.name + "].html",
-        `<span style="color:white">${this.hotspot.hotspotTitle}</span>`
-      );
-    },
+    // "hotspot.titlePosition": function (val) {
+    //   console.log("111", val);
+    //   if (val === "bottom") {
+    //     this.$getKrpano().set("layer[tooltip_" + this.hotspot.name + "].css");
+    //   }
+    // },
+    // "hotspot.hotspotTitle": function () {
+    //   this.$getKrpano().set(
+    //     "layer[tooltip_" + this.hotspot.name + "].html",
+    //     `<span style="color:white">${this.hotspot.hotspotTitle}</span>`
+    //   );
+    // },
     // 'hotspot.visible': function () {
     //   this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].visible', this.hotspot.visible)
     // },
-    "hotspot.size": {
-      immediate: true,
-      handler: function (newVal) {
-        let h = 52;
-        let scaleH = h * newVal;
+    // "hotspot.size": {
+    //   immediate: true,
+    //   handler: function (newVal) {
+    //     let h = 52;
+    //     let scaleH = h * newVal;
 
-        let offset = "-130%";
+    //     let offset = "-130%";
 
-        this.rang = { ...this.rang, value: newVal };
-        this.$getKrpano().set(`hotspot[${this.hotspot.name}].height`, scaleH);
+    //     this.rang = { ...this.rang, value: newVal };
+    //     this.$getKrpano().set(`hotspot[${this.hotspot.name}].height`, scaleH);
 
-        if (newVal < 1) {
-          offset = "-200%";
-        }
+    //     if (newVal < 1) {
+    //       offset = "-200%";
+    //     }
 
-        if (newVal > 1) {
-          offset = "-100%";
-        }
-        this.$getKrpano().set(
-          "layer[tooltip_" + this.hotspot.name + "].y",
-          `${offset}`
-        );
-      },
-    },
-    "hotspot.fontSize": {
-      handler: function (newVal) {
-        this.$getKrpano().set(
-          "layer[tooltip_" + this.hotspot.name + "].css",
-          `text-align:center; color:#FFFFFF;
-          font-family:STXihei;font-size:${newVal}px;`
-        );
-      },
-    },
+    //     if (newVal > 1) {
+    //       offset = "-100%";
+    //     }
+    //     this.$getKrpano().set(
+    //       "layer[tooltip_" + this.hotspot.name + "].y",
+    //       `${offset}`
+    //     );
+    //   },
+    // },
+    // "hotspot.fontSize": {
+    //   handler: function (newVal) {
+    //     this.$getKrpano().set(
+    //       "layer[tooltip_" + this.hotspot.name + "].css",
+    //       `text-align:center; color:#FFFFFF;
+    //       font-family:STXihei;font-size:${newVal}px;`
+    //     );
+    //   },
+    // },
   },
   beforeDestroy() {
     this.$bus.removeListener("resethotspotTitle", this.listerFnReset);