update

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

@@ -6,15 +6,16 @@
         set(hsp_type,%2); 
         txtadd(iconUrl,'',%4);
         txtreplace(iconUrl,'|',',');
+
         if(%2 LE 1,
-             <!-- trace('id==',get(hsp_name),"::",get(iconUrl)); -->
+                     <!-- trace('id==',get(hsp_name),"::",get(iconUrl)); -->
              set(hotspot[get(hsp_name)].type,'image');
              set(hotspot[get(hsp_name)].url,get(iconUrl));
          );
         ifnot(%2 LE 1, set(hotspot[get(hsp_name)].type, 'text'));
 
-        <!-- 其他标签 （0，1，2）-->
-        if(%2 LT 2,
+                <!-- 其他标签 （0，1，2）-->
+        if(%2 LE 2,
          set(hotspot[get(hsp_name)].height,%8);
          set(hotspot[get(hsp_name)].width,'prop');
          txtadd(hotspot[get(hsp_name)].onloaded,"add_tooltip_label();");
@@ -28,26 +29,26 @@
 
         set(hotspot[get(hsp_name)].ath,%5);
         set(hotspot[get(hsp_name)].atv,%6);
-       
+
         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);
-
+        set(hotspot[get(hsp_name)].onclick,'js(__krfn.utils.linkopen(%7,%1));');
         set(hotspot[get(hsp_name)].ondown,dragJQhotspot(););
         set(hotspot[get(hsp_name)].onup,js(__krfn.angle.updateHotSpotData(get(xml.scene),get(name),get(ath),get(atv))));
 
          txtsplit(%10,'|',fontSize,pos,isHover,borderColor,fillColor,textColor,isShowLine,isTextWrap,lineDirection,textDirection,textNumPerLine,duration,frameNumber);
      
    
-        <!-- 个性化标签（3） -->
+                <!-- 个性化标签（3） -->
         if(%2 == 3,    
             set(hotspot[get(hsp_name)].height,80);
             set(hotspot[get(hsp_name)].width,1);
             set(hotspot[get(hsp_name)].padding,0);
             set(hotspot[get(hsp_name)].background,false);
-            txtadd(line,'<div style="background-color: ',get(borderColor),';width:1px;height:80px;"></div>');
+            txtadd(line,'        <div style="background-color: ',get(borderColor),';width:1px;height:80px;"></div>');
             trace('tags::',tagStyle);
             copy(hotspot[get(hsp_name)].html,line);
             txtadd(hotspot[get(hsp_name)].onloaded,"add_tooltip_label();add_tooltip_dot();");
@@ -84,30 +85,78 @@
     <action name="add_tooltip_label">
         txtadd(tooltipname, 'tooltip_', get(name)); 
         txtsplit(hotspotStyle,'|',fontSize,pos,isHover,borderColor,fillColor,textColor,isShowLine,isTextWrap,lineDirection,textDirection,textNumPerLine,duration,frameNumber);
+
         addlayer(get(tooltipname));
-        set(labelParent,get(name));
         txtadd(layer[get(tooltipname)].parent, 'hotspot[', get(name), ']');
         set(layer[get(tooltipname)].autowidth, true);
         set(layer[get(tooltipname)].width,'prop');
         set(layer[get(tooltipname)].height,30); 
         set(layer[get(tooltipname)].edge,center);
         set(layer[get(tooltipname)].background,false);
-        set(layer[get(tooltipname)].x,0);
-        set(layer[get(tooltipname)].y,-45);
+
         set(layer[get(tooltipname)].padding,0);
         set(layer[get(tooltipname)].type,'html');
         set(layer[get(tooltipname)].url,'%SWFPATH%/plugins/textfield.swf');
         set(layer[get(tooltipname)].border,false);
         set(layer[get(tooltipname)].align,center);
+  
         set(layer[get(tooltipname)].ondown,'dragJQlayer();');
-        set(layer[get(tooltipname)].onup,js(__krfn.angle.updateHotSpotData(get(xml.scene),get(hsName),get(vath),get(vatv))));
-        <!-- set(hotspot[get(hsp_name)].onup,js(__krfn.angle.updateHotSpotData(get(xml.scene),get(name),get(ath),get(atv)))); -->
-        txtadd(labelCode, '<div style="display: flex; align-items: center; justify-content: center; position: relative; border: 0px solid rgba(255,255,255,1); padding: 6px 10px; white-space: pre; border-radius: 5px; background: rgba(0,0,0,0.5);">','<div style="text-align: left; font-size:',get(fontSize),'px; color: rgba(255,255,255,1); line-height: 1.4;">',get(hotspottitle),'</div>
+        set(layer[get(tooltipname)].onup,js(__krfn.angle.updateHotSpotData(get(xml.scene),get(hsName),get(atv),get(atv))));
+                <!-- set(hotspot[get(hsp_name)].onup,js(__krfn.angle.updateHotSpotData(get(xml.scene),get(name),get(ath),get(atv)))); -->
+        txtadd(labelCode, '        <div style="display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid ',get(borderColor),'; padding: 6px 10px; white-space: pre; border-radius: 5px; background: ',get(fillColor),'">','            <div style="text-align: left; font-size:',get(fontSize),'px; color: ',get(textColor),'; line-height: 1.4;">',get(hotspottitle),'</div>
         </div>'); 
-        <!-- 个性化标签（3） -->
+      
+        <!-- label方位 -->
+        if(get(hotspottype) LE 2,
+        set_label_pos(get(tooltipname),get(pos));
+       );
+       <!-- if(get(hotspottype) LE 2,
+        add(dHeight,get(height), 5);
+        if(
+            pos == 'top',
+            mul(dHeight, -1);
+            set(layer[get(tooltipname)].x,0);
+            set(layer[get(tooltipname)].y,get(dHeight));
+        );
+         if(
+            pos == 'bottom',
+            mul(dHeight, 1);
+            set(layer[get(tooltipname)].x,0);
+            set(layer[get(tooltipname)].y,0);
+        );
+        if(
+            pos == 'left',
+            txtadd(jsCode,"document.getElementById('krpanoSWFObject').get('layer[",get(tooltipname),"]').pixelwidth");
+            def(dWidth,number);
+            delayedcall(
+            1,
+            jsget(dWidth,get(jsCode));
+            mul(dWidth, -1);
+            txtadd(tooltipname, 'tooltip_', get(name)); 
+            set(layer[get(tooltipname)].y,0);
+            set(layer[get(tooltipname)].x,get(dWidth));
+            );
+        );
+        if(
+            pos == 'right',
+            txtadd(jsCode,"document.getElementById('krpanoSWFObject').get('layer[",get(tooltipname),"]').pixelwidth");
+            def(dWidth,number);
+            trace('left-id'::,get(tooltipname));
+            delayedcall(
+            1,
+            jsget(dWidth,get(jsCode));
+            mul(dWidth, 1);
+            txtadd(tooltipname, 'tooltip_', get(name)); 
+            set(layer[get(tooltipname)].y,0);
+            set(layer[get(tooltipname)].x,get(dWidth));
+            );
+        );
+       );
+        -->
+                <!-- 个性化标签（3） -->
         if(get(hotspottype) == 3,    
             trace('lineDirection2::',lineDirection); 
-            txtadd(labelCode, '<div style="display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid ',get(borderColor),'; padding: 6px 10px; white-space: pre; border-radius: 5px; background: ',get(fillColor),'">','<div style="text-align: left; font-size:',get(fontSize),'px; color: ',get(textColor),'; line-height: 1.4;">',get(hotspottitle),'</div></div>'); 
+                    <!-- txtadd(labelCode, '<div style="display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid ',get(borderColor),'; padding: 6px 10px; white-space: pre; border-radius: 5px; background: ',get(fillColor),'">','<div style="text-align: left; font-size:',get(fontSize),'px; color: ',get(textColor),'; line-height: 1.4;">',get(hotspottitle),'</div></div>');  -->
             if(
                 lineDirection == 'right-top',
                 set(layer[get(tooltipname)].y,-60);
@@ -151,13 +200,10 @@
              );
 
         );
-
-     
-
         copy(layer[get(tooltipname)].html, labelCode);
             
     </action>
-    <!-- <style name="tooltip_dot_bg" type="container" border-radius="50%" bgcolor="0xFFFFFF" bgalpha="0.9"  height="20" width="20" keep="true"  /> -->
+    <!-- <style name="tooltip_dot_bg" type="container" border-radius="50%" bgcolor="0xFFFFFF" bgalpha="0.9" height="20" width="20" keep="true" /> -->
     <action name='add_tooltip_dot'>
         txtadd(tooldot, 'tooldot_', get(name)); 
         trace('hey::',get(borderColor));
@@ -176,10 +222,11 @@
         set(layer[get(tooldot)].backgroundcolor,get(borderColor)); 
         set(layer[get(tooldot)].backgroundalpha,0.9); 
         set(layer[get(tooldot)].bgroundedge,5);
+
         set(layer[get(tooldot)].ondown,'dragJQlayer();');
-        set(layer[get(tooldotupdateHotSpotData )].onup,js(__krfn.angle.updateHotSpotData(get(xml.scene),get(hsName),get(vath),get(vatv))));
+        set(layer[get(tooldotupdateHotSpotData )].onup,js(__krfn.angle.updateHotSpotData(get(xml.scene),get(hsName),get(ath),get(atv))));
 
-        <!-- 个性化标签（3） -->
+                <!-- 个性化标签（3） -->
         if(get(hotspottype) == 3,    
             trace('lineDirection3::',lineDirection); 
             if(
@@ -226,20 +273,99 @@
 
     </action>
 
-   <action name="editJQHotspot">
+    <action name='set_label_pos'>
+        <!-- label方位 -->
+       set(tooltipname,%1);
+       set(pos,%2);
+       trace('set_label_pos::',get(tooltipname),'pos::',pos);
+      
+        if(
+            pos == 'top',
+            add(dHeight,get(layer[get(tooltipname)].height), 5);
+            mul(dHeight, -1);
+            set(layer[get(tooltipname)].x,0);
+            set(layer[get(tooltipname)].y,get(dHeight));
+        );
+         if(
+            pos == 'bottom',
+            add(dHeight,get(layer[get(tooltipname)].height), 5);
+            mul(dHeight, 1);
+            set(layer[get(tooltipname)].x,0);
+            set(layer[get(tooltipname)].y,get(dHeight));
+        );
+        if(
+            pos == 'left',
+            txtadd(jsCode,"document.getElementById('krpanoSWFObject').get('layer[",get(tooltipname),"]').pixelwidth");
+            def(dWidth,number);
+            delayedcall(
+            1,
+            jsget(dWidth,get(jsCode));
+            mul(dWidth, -1);
+            txtadd(tooltipname, '', get(tooltipname)); 
+            trace('left'::,dWidth,"id::",get(tooltipname));
+            set(layer[get(tooltipname)].y,0);
+            set(layer[get(tooltipname)].x,get(dWidth));
+            );
+        );
+        if(
+            pos == 'right',
+            txtadd(jsCode,"document.getElementById('krpanoSWFObject').get('layer[",get(tooltipname),"]').pixelwidth");
+            def(dWidth,number);
+            delayedcall(
+            1,
+            jsget(dWidth,get(jsCode));
+            mul(dWidth, 1);
+            txtadd(tooltipname, '', get(tooltipname)); 
+            trace('right'::,dWidth,"id::",get(tooltipname));
+
+            set(layer[get(tooltipname)].y,0);
+            set(layer[get(tooltipname)].x,get(dWidth));
+            );
+        );
+
+       
+       
+    </action>
+    <action name="removeJQHotspot">
+        set(delHotspot,%1);
+        removehotspot(%1,true);
+        txtadd(delHotspotLabel,'tooltip_',get(delHotspot));
+        txtadd(delHotspotdot,'tooldot_',get(delHotspot));
+        removelayer(get(delHotspotLabel));
+        removelayer(get(delHotspotdot));
+    </action>
+
+    <!-- 编辑热点 -->
+    <action name="editJQHotspot">
       showlog();
+      trace('editJQHotspot',%3);
       set(hsp_name,%1); 
       set(hsp_type,%2); 
-      trace('edit');
-    </action> 
+      txtadd(hsLabel, 'tooltip_', %1); 
+      txtadd(hsDot, 'tooldot_', %2); 
+      set(hotspot[get(hsp_name)].height,%8);
+      set(hotspot[get(hsp_name)].width,'prop');
+      set(hotspot[get(hsp_name)].hotspottitle,%3);
+      set(hotspot[get(hsp_name)].hotspotStyle,%10);
+      txtsplit(%10,'|',fontSize,pos,isHover,borderColor,fillColor,textColor,isShowLine,isTextWrap,lineDirection,textDirection,textNumPerLine,duration,frameNumber);
+   
+      txtadd(labelCode, '<div style="display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid ',get(borderColor) ,'; padding: 6px 10px; white-space: pre; border-radius: 5px; background: ',get(fillColor),'">','        <div style="text-align: left; font-size:',get(fontSize),'px; color: ',get(textColor),'; line-height: 1.4;">',%3,'</div></div>');     
+      copy(layer[get(hsLabel)].html, labelCode);
+      if(get(%3) LE 2,
+         set_label_pos(get(hsLabel),get(pos));
+       );
+
+
+
+</action>
 
-    <action name="dragJQlayer"> 
+<action name="dragJQlayer"> 
        txtadd(hsName, '', get(name)); 
        txtreplace(hsName, 'tooltip_', ''); 
        txtreplace(hsName, 'tooldot_', ''); 
 
-       <!-- trace('drag::',hsName); -->
-                <!-- copy(drag_currentx, x);
+           <!-- trace('drag::',hsName); -->
+    <!-- copy(drag_currentx, x);
         copy(drag_currenty, y);
         copy(drag_stagex, mouse.stagex); 
         copy(drag_stagey, mouse.stagey);
@@ -256,19 +382,21 @@
         sub(drag_adjusty,mouse.stagey, hotspotcentery); 
     
         asyncloop(
-                     <!-- 计算热点中心点 -->
+                         <!-- 计算热点中心点 -->
             pressed,
             sub(dx, mouse.stagex, drag_adjustx);
             sub(dy, mouse.stagey, drag_adjusty);
-            screentosphere(dx, dy, vath, vatv); 
-                      <!-- 更新 -->
-            copy(hotspot[get(hsName)].ath, vath);
-            copy(hotspot[get(hsName)].atv, vatv);
+            screentosphere(dx, dy, ath, atv); 
+                          <!-- 更新 -->
+            copy(hotspot[get(hsName)].ath, ath);
+            copy(hotspot[get(hsName)].atv, atv);
         );   
 
-    </action>
+</action>
+
+<action name="dragJQhotspot">
+        trace('dragJQhotspot::',ath,atv);
 
-    <action name="dragJQhotspot">
         spheretoscreen(ath, atv, hotspotcenterx, hotspotcentery, 'l');
         sub(drag_adjustx,mouse.stagex, hotspotcenterx);
         sub(drag_adjusty,mouse.stagey, hotspotcentery); 
@@ -279,5 +407,5 @@
             sub(dy, mouse.stagey, drag_adjusty);
             screentosphere(dx, dy, ath, atv); 
         );
-    </action>
+</action>
 </krpano>

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

@@ -17,7 +17,7 @@ export default class Angle {
    * @param {*} hotspotType 
    */
   updateHotSpotData(hsName, hpname, ath, atv) {
-    // console.log('updateHotSpotData', arguments);
+    console.log('updateHotSpotData', arguments);
     this.ath = ath;
     this.atv = atv;
     if (ath && atv) {

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

@@ -42,6 +42,9 @@ const convertBaseStyle = (dest, origin) => {
         if (origin && origin.titleDisplayMode == "never") {
             dest.visible = false
         }
+        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 === 'personalized_tag') {

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

@@ -58,21 +58,6 @@ export default class Utils {
    */
 
   edithotspot(krpano, param) {
-    debugger;
-    // 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})`);
-
     try {
       const hotspot = convertJQHotspot(param);
       const hotspotStyle = Object.values(hotspot.style);

packages/qjkankan-editor/src/framework/core/index.vue

@@ -151,6 +151,7 @@ export default {
     this.$bus.on("addhotspot", (data) => {
       this.addhotspot(data);
     });
+   
   },
 };
 </script>

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

@@ -242,7 +242,11 @@ export default {
     hotspot: {
       handler(val) {
         // console.error("this.hotspot", val);
-        console.error("hotspot", val.personalizedTagInfo);
+        console.error("hotspot", val);
+        this.$bus.emit('edithotspot',val);
+        console.log('this.$bus',this.$bus);
+        // this.$getKrpano().call("removeJQHotspot(" + val.name + ");");
+        // this.$bus.emit("addhotspot", val);
       },
       deep: true,
     },
@@ -469,6 +473,10 @@ export default {
     this.$bus.on("delhotspot", () => {
       this.cancel();
     });
+    this.$bus.on("edithotspot", (data) => {
+      const krpano = document.getElementById("krpanoSWFObject");
+      __krfn.utils.edithotspot(krpano, data);
+    });
 
     setTimeout(() => {
       if (
@@ -582,7 +590,7 @@ export default {
     reset(data) {
       this.$bus.emit("edithotspotTitle", data);
       this.$bus.emit("edithotspotTitleisShow", data);
-      this.$getKrpano().set(`hotspot[${data.name}].url`, data.img);
+      // this.$getKrpano().set(`hotspot[${data.name}].url`, data.img);
     },
     save() {
       this.$store.commit("SetHotspot", this.hotspot);

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

@@ -206,10 +206,10 @@ export default {
   },
   methods: {
     deleteKRHotspot(data) {
-      this.$getKrpano().call("removehotspot(" + data.name + ",true);");
-      this.$getKrpano().call(
-        "removeplugin(" + ("tooltip_" + data.name) + ",true);"
-      );
+      this.$getKrpano().call("removeJQHotspot(" + data.name + ");");
+      // this.$getKrpano().call(
+      //   "removeplugin(" + ("tooltip_" + data.name) + ",true);"
+      // );
     },
     close(data) {
       if (data) {
@@ -308,9 +308,9 @@ export default {
             // 热点图标类型为个性标签时，个性标签的数据
             isShowLine: true,
             lineDirection: "left-top",
-            fillColor: "rgba(0, 0, 0, 1)",
-            borderColor: "rgba(0, 0, 0, 1)",
-            textColor: "rgba(0, 0, 0, 1)",
+            fillColor: "rgba(0, 0, 0, 0.5)",
+            borderColor: "rgba(255, 255, 255, 0.8)",
+            textColor: "rgba(255, 255, 255, 1)",
             textDirection: "left-right",
             isTextWrap: false,
             textNumPerLine: 10,