update

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

@@ -4,32 +4,58 @@
         showlog();
         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'));
+        txtadd(iconUrl,'',%4);
+        txtreplace(iconUrl,'|',',');
+        if(%2 LE 1,
+             <!-- 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,
+         set(hotspot[get(hsp_name)].height,%8);
+         set(hotspot[get(hsp_name)].width,'prop');
+         txtadd(hotspot[get(hsp_name)].onloaded,"add_tooltip_label();");
+         );
+
+        <!-- 个性化标签（3） -->
+        ifnot(%2 LT 2,
+            trace('tags::',%3);
+            set(hotspot[get(hsp_name)].height,80);
+            set(hotspot[get(hsp_name)].width,1);
+            txtadd(hotspot[get(hsp_name)].onloaded,"add_tooltip_label();add_tooltip_dot();");
+            set(hotspot[get(hsp_name)].rotate,35);
+        );
+
         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)].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();");
+                <!-- layer -->
+    
+ 
         addhotspot(get(hsp_name));
-        set(hotspot[get(hsp_name)].ondown,draghotspot1(););
+        set(hotspot[get(hsp_name)].ondown,dragJQhotspot(););
 
     </action>
 
-
+  <action name="editJQHotspot">
+      showlog();
+      set(hsp_name,%1); 
+      set(hsp_type,%2); 
+      trace('edit');
+    </action> 
 
     <action name="addImgTextHotSpot1">
         set(schp_name,%1); 
@@ -43,47 +69,56 @@
         set(hotspot[get(schp_name)].scale,1);
         set(hotspot[get(schp_name)].autoalpha,false);
         set(hotspot[get(schp_name)].distorted,false);
-         <!-- set(hotspot[get(schp_name)].width,'prop');
+                 <!-- set(hotspot[get(schp_name)].width,'prop');
         set(hotspot[get(schp_name)].height,%11); -->
         set(hotspot[get(schp_name)].width, 1); 
         set(hotspot[get(schp_name)].height,70); 
         set(hotspot[get(schp_name)].visible,true);
-        <!-- set(hotspot[get(schp_name)].onhover,showtext(get(hotspottitle),skintext));  -->
+                <!-- set(hotspot[get(schp_name)].onhover,showtext(get(hotspottitle),skintext));  -->
         addhotspot(get(schp_name));
         set(hotspot[get(schp_name)].onclick,'js(__krfn.utils.linkopen(%8,%2));');
   
         if(%7 == false,
           , 
           set(hotspot[get(schp_name)].ondown,draghotspot1(););
-          <!-- set(hotspot[get(schp_name)].onup,js(__krfn.angle.updateHotSpotData(get(xml.scene),get(name),get(ath),get(atv),"imgtext"))); -->
+                  <!-- set(hotspot[get(schp_name)].onup,js(__krfn.angle.updateHotSpotData(get(xml.scene),get(name),get(ath),get(atv),"imgtext"))); -->
         );
 
-                                                <!-- txtadd(hotspot[get(schp_name)].onloaded,"add_all_the_time_tooltip(hotspot[get(name)].hotspottitle);"); -->
+                                                        <!-- txtadd(hotspot[get(schp_name)].onloaded,"add_all_the_time_tooltip(hotspot[get(name)].hotspottitle);"); -->
         <!-- txtadd(hotspot[get(schp_name)].onloaded,"add_all_2_tooltip(hotspot[get(name)].hotspottitle);"); -->
         <!-- txtadd(hotspot[get(schp_name)].onloaded,"add_all_2_tooltip(hotspot[get(name)].hotspottitle);"); -->
         txtadd(hotspot[get(schp_name)].onloaded,"add_all_2_tooltip();");
-                                                <!-- txtadd(hotspot[get(schp_name)].onloaded,"add_all_2_tooltip(hotspot[get(name)].hotspottitle,hotspot[get(name)].ath,hotspot[get(name)].atv);"); -->
+                                                        <!-- txtadd(hotspot[get(schp_name)].onloaded,"add_all_2_tooltip(hotspot[get(name)].hotspottitle,hotspot[get(name)].ath,hotspot[get(name)].atv);"); -->
      
         set(hotspot[get(schp_name)].onhover,null);
         set(hotspot[get(schp_name)].onout,null);
         set(hotspot[get(schp_name)].onover,null);
        
-      <!-- if(%10 == true,
+              <!-- if(%10 == true,
           set(plugin[get(tooltipname)].visible,true);,
           set(plugin[get(tooltipname)].visible,false);
         ); -->
         <!-- txtadd(csstxt, 'text-align:center; color:#FFFFFF; font-family:STXihei; font-size:', %12,'px');
         set(plugin[get(tooltipname)].css,get(csstxt)));, -->
-  
+
     </action>
 
-    <action name="add_all_2_tooltip">
+    <action name="add_tooltip_label">
         txtadd(tooltipname2, 'tooltip2_', get(name)); 
-        trace('hotspottitle::',get(hotspottitle));
-        set(toolP,get(name)); 
-
-        <!-- copy(textColor, hotspotStyle.); -->
- 
+          <!-- fontSize: 12,
+        position: "top",
+        isHover: false,
+        borderColor: "",
+        isShowLine: "",
+        isTextWrap: "",
+        lineDirection: "",
+        textColor: "",
+        textDirection: "",
+        textNumPerLine: "",
+        duration: 0,
+        frameNumber: 0, -->
+        txtsplit(hotspotStyle,'|',fontSize,pos,isHover,borderColor,isShowLine,isTextWrap,lineDirection,textColor,textDirection,textNumPerLine,duration,frameNumber);
+        trace('hotspotStyle::',lineDirection);
         addlayer(get(tooltipname2));
         txtadd(layer[get(tooltipname2)].parent, 'hotspot[', get(name), ']');
         set(layer[get(tooltipname2)].autowidth, true);
@@ -92,26 +127,56 @@
         set(layer[get(tooltipname2)].edge,center);
         set(layer[get(tooltipname2)].background,false);
         set(layer[get(tooltipname2)].x,0);
-        set(layer[get(tooltipname2)].y,-50);
+        set(layer[get(tooltipname2)].y,-45);
         set(layer[get(tooltipname2)].padding,0);
         set(layer[get(tooltipname2)].type,'html');
         set(layer[get(tooltipname2)].url,'%SWFPATH%/plugins/textfield.swf');
         set(layer[get(tooltipname2)].border,false);
         set(layer[get(tooltipname2)].align,center);
-        set(layer[get(tooltipname2)].ondown,'draglayer();');
+        set(layer[get(tooltipname2)].ondown,'dragJQlayer();');
+     
+
+        ifnot(get(hotspottype) LT 2,
+            set(layer[get(tooltipname2)].y,-60);
+            set(layer[get(tooltipname2)].rotate,-35);
+        );
 
-        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: 12px; color: rgba(255,255,255,1); line-height: 1.4;">',get(hotspottitle),'</div></div>'); 
+        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>
+        </div>'); 
 
         copy(layer[get(tooltipname2)].html, labelCode);
             
     </action>
+    <!-- <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(tooldot));
+        addlayer(get(tooldot));
+        txtadd(layer[get(tooldot)].parent, 'hotspot[', get(name), ']');
+        set(layer[get(tooldot)].width,10); 
+        set(layer[get(tooldot)].height,10); 
+        set(layer[get(tooldot)].padding,0); 
+        set(layer[get(tooldot)].x,0);
+        set(layer[get(tooldot)].y,40);
+        set(layer[get(tooldot)].align,center);
+        set(layer[get(tooldot)].type,'text');
+        set(layer[get(tooldot)].background,true);
+        set(layer[get(tooldot)].backgroundcolor,0xFFFFFF); 
+        set(layer[get(tooldot)].backgroundalpha,0.9); 
+        set(layer[get(tooldot)].bgroundedge,5);
+        set(layer[get(tooldot)].ondown,'dragJQlayer();');
+        <!-- set(layer[get(tooldot)].html, '<div style="width:100%;height:100%;border-radius:50%;background:rgba(255,255,255,0.9);"></div>'); -->
+  
+    </action>
 
 
-    <action name="draglayer"> 
+    <action name="dragJQlayer"> 
        txtadd(hsName, '', get(name)); 
        txtreplace(hsName, 'tooltip2_', ''); 
-       
-        <!-- copy(drag_currentx, x);
+       txtreplace(hsName, 'tooldot_', ''); 
+
+       trace('drag::',hsName);
+                <!-- copy(drag_currentx, x);
         copy(drag_currenty, y);
         copy(drag_stagex, mouse.stagex); 
         copy(drag_stagey, mouse.stagey);
@@ -119,7 +184,6 @@
         indexoftxt(align_contains_bottom, get(align), 'bottom'); 
         calc(drag_align_x, align_contains_right GE 0 ? -1 : +1);
         calc(drag_align_y, align_contains_bottom GE 0 ? -1 : +1);    
-        
         -->
         
         copy(hath, hotspot[get(hsName)].ath);
@@ -129,21 +193,19 @@
         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);
         );   
 
     </action>
 
-
-
-    <action name="draghotspot1">
+    <action name="dragJQhotspot">
         spheretoscreen(ath, atv, hotspotcenterx, hotspotcentery, 'l');
         sub(drag_adjustx,mouse.stagex, hotspotcenterx);
         sub(drag_adjusty,mouse.stagey, hotspotcentery); 

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

@@ -72,6 +72,30 @@ export default class Utils {
     //   ${param.visible},
     //   ${param.size || 1},
     //   ${param.fontSize})`);
+
+    try {
+      const hotspot = convertJQHotspot(param);
+      const hotspotStyle = Object.values(hotspot.style);
+      const hotspotString = hotspotStyle.join('|');
+      const hotspotSize = (Number(hotspot.size) || 1) * 50;
+      let icon = hotspot.icon.replace(/,/g, '|');
+
+      const callString = `editJQHotspot(
+        ${hotspot.id},
+        ${hotspot.type},
+        ${hotspot.title},
+        "${icon}",
+        ${hotspot.ath},
+        ${hotspot.atv},
+        "${hotspot.link}",
+        ${hotspotSize},
+        ${hotspot.visible},
+        "${hotspotString}"
+        )`;
+      krpano.call(callString);
+    } catch (error) {
+      console.error('error', error);
+    }
   }
 
 
@@ -89,16 +113,16 @@ export default class Utils {
       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 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");
-
+      let icon = hotspot.icon.replace(/,/g, '|');
       const callString = `addJQHotspot(
         ${hotspot.id},
         ${hotspot.type},
         ${hotspot.title},
-        "${hotspot.icon}",
+        "${icon}",
         ${ath},
         ${atv},
         "${hotspot.link}",
@@ -106,7 +130,6 @@ export default class Utils {
         ${hotspot.visible},
         "${hotspotString}"
         )`;
-      console.warn('callString', callString.trim());
       krpano.call(callString);
     } catch (error) {
       console.error('error', error);

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

@@ -241,7 +241,8 @@ export default {
   watch: {
     hotspot: {
       handler(val) {
-        console.error("this.hotspot", val);
+        // console.error("this.hotspot", val);
+        console.error("hotspot-lineDirection", val.personalizedTagInfo.lineDirection);
       },
       deep: true,
     },

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

@@ -402,16 +402,20 @@ export default {
             duration: 0,
           };
         }
-        hotspotData.personalizedTagInfo = {
-          isShowLine: true,
-          lineDirection: "left-top",
-          fillColor: "rgba(0, 0, 0, 1)",
-          borderColor: "rgba(0, 0, 0, 1)",
-          textColor: "rgba(0, 0, 0, 1)",
-          textDirection: "left-right",
-          isTextWrap: false,
-          textNumPerLine: 10,
-        };
+        if (!hotspotData.personalizedTagInfo) {
+          hotspotData.personalizedTagInfo = {
+            isShowLine: true,
+            lineDirection: "left-top",
+            fillColor: "rgba(0, 0, 0, 1)",
+            borderColor: "rgba(0, 0, 0, 1)",
+            textColor: "rgba(0, 0, 0, 1)",
+            textDirection: "left-right",
+            isTextWrap: false,
+            textNumPerLine: 10,
+          };
+        }
+  
+
         // v1.3把visible: Boolean换成了titleDisplayMode
         if (hotspotData.visible) {
           hotspotData.titleDisplayMode = "always";

packages/qjkankan-editor/src/views/hotspot/hotspotIconType/personalized_tag.vue

@@ -1,26 +1,28 @@
 <template>
   <div class="hotspot-icon-personalized-tag">
     <div class="line-show-setting switcher-wrap">
-      <span class="label">{{$i18n.t('hotspot.if_show_marking_line')}}</span>
-      <Switcher :value="hotspot.personalizedTagInfo.isShowLine" @change="onSwitcherChange"></Switcher>
+      <span class="label">{{ $i18n.t("hotspot.if_show_marking_line") }}</span>
+      <Switcher
+        :value="hotspot.personalizedTagInfo.isShowLine"
+        @change="onSwitcherChange"
+      ></Switcher>
     </div>
-    
+
     <div class="svg-wrapper"></div>
 
-    <div class="remark-highlight">{{ $i18n.t('hotspot.hotspot_title') }}</div>
+    <div class="remark-highlight">{{ $i18n.t("hotspot.hotspot_title") }}</div>
     <div class="title-input-wrapper">
       <input
         v-model.trim="hotspot.hotspotTitle"
-        type="text" maxlength="15"
+        type="text"
+        maxlength="15"
         :placeholder="$i18n.t('hotspot.title_placeholder')"
       />
       <span class="count">{{ hotspot.hotspotTitle.length }}/15</span>
     </div>
 
-    <div class="remark">{{ $i18n.t('hotspot.hotspot_title') }}</div>
-    <div
-      class="color-picker-wrap"
-    >
+    <div class="remark">{{ $i18n.t("hotspot.hotspot_title") }}</div>
+    <div class="color-picker-wrap">
       <div class="color-value">{{ hotspot.personalizedTagInfo.fillColor }}</div>
       <div
         class="color-preview"
@@ -34,11 +36,11 @@
       />
     </div>
 
-    <div class="remark">{{ $i18n.t('hotspot.shape_border_color') }}</div>
-    <div
-      class="color-picker-wrap"
-    >
-      <div class="color-value">{{ hotspot.personalizedTagInfo.borderColor }}</div>
+    <div class="remark">{{ $i18n.t("hotspot.shape_border_color") }}</div>
+    <div class="color-picker-wrap">
+      <div class="color-value">
+        {{ hotspot.personalizedTagInfo.borderColor }}
+      </div>
       <div
         class="color-preview"
         :style="`background-color: ${hotspot.personalizedTagInfo.borderColor};`"
@@ -51,10 +53,8 @@
       />
     </div>
 
-    <div class="remark">{{ $i18n.t('hotspot.text_color') }}</div>
-    <div
-      class="color-picker-wrap"
-    >
+    <div class="remark">{{ $i18n.t("hotspot.text_color") }}</div>
+    <div class="color-picker-wrap">
       <div class="color-value">{{ hotspot.personalizedTagInfo.textColor }}</div>
       <div
         class="color-preview"
@@ -68,7 +68,7 @@
       />
     </div>
 
-    <div class="remark">{{ $i18n.t('hotspot.text_direction') }}</div>
+    <div class="remark">{{ $i18n.t("hotspot.text_direction") }}</div>
     <TabbarSwitcherIcon
       class="text-direction-switcher"
       :tabList="[
@@ -86,17 +86,20 @@
     />
 
     <div class="text-wrap-setting switcher-wrap">
-      <span class="label">{{ $i18n.t('hotspot.if_wrap') }}</span>
-      <Switcher :value="hotspot.personalizedTagInfo.isTextWrap" @change="onTextWrapChange"></Switcher>
+      <span class="label">{{ $i18n.t("hotspot.if_wrap") }}</span>
+      <Switcher
+        :value="hotspot.personalizedTagInfo.isTextWrap"
+        @change="onTextWrapChange"
+      ></Switcher>
     </div>
 
     <div
       class="text-num-per-line-wrap"
       :class="{
-        disable: !hotspot.personalizedTagInfo.isTextWrap
+        disable: !hotspot.personalizedTagInfo.isTextWrap,
       }"
     >
-      <div class="remark">{{ $i18n.t('hotspot.text_num_per_line') }}</div>
+      <div class="remark">{{ $i18n.t("hotspot.text_num_per_line") }}</div>
       <div class="value-wrap">
         <input
           v-model.trim.number="hotspot.personalizedTagInfo.textNumPerLine"
@@ -104,11 +107,10 @@
           type="number"
           min="1"
           :disabled="!hotspot.personalizedTagInfo.isTextWrap"
-        >
-        <span class="remark">{{ $i18n.t('hotspot.words') }}</span>
+        />
+        <span class="remark">{{ $i18n.t("hotspot.words") }}</span>
       </div>
     </div>
-
   </div>
 </template>
 
@@ -131,103 +133,103 @@ export default {
 
       endpointListForShow: [
         {
-          id: 'left-top',
-          x: 'calc(0% + 7px)',
-          cx: 'calc(0% + 7px + (7px / 2))',
-          y: 'calc(0% + 7px)',
-          cy: 'calc(0% + 7px + (7px / 2))',
+          id: "left-top",
+          x: "calc(0% + 7px)",
+          cx: "calc(0% + 7px + (7px / 2))",
+          y: "calc(0% + 7px)",
+          cy: "calc(0% + 7px + (7px / 2))",
         },
         {
-          id: 'center-top',
-          x: 'calc(50% - 7px / 2)',
-          cx: '50%',
-          y: 'calc(0% + 7px)',
-          cy: 'calc(0% + 7px + (7px / 2))',
+          id: "center-top",
+          x: "calc(50% - 7px / 2)",
+          cx: "50%",
+          y: "calc(0% + 7px)",
+          cy: "calc(0% + 7px + (7px / 2))",
         },
         {
-          id: 'right-top',
-          x: 'calc(100% - 7px - 7px)',
-          cx: 'calc(100% - 7px - (7px / 2))',
-          y: 'calc(0% + 7px)',
-          cy: 'calc(0% + 7px + (7px / 2))',
+          id: "right-top",
+          x: "calc(100% - 7px - 7px)",
+          cx: "calc(100% - 7px - (7px / 2))",
+          y: "calc(0% + 7px)",
+          cy: "calc(0% + 7px + (7px / 2))",
         },
         {
-          id: 'right-center',
-          x: 'calc(100% - 7px - 7px)',
-          cx: 'calc(100% - 7px - (7px / 2))',
-          y: 'calc(50% - 7px / 2)',
-          cy: '50%',
+          id: "right-center",
+          x: "calc(100% - 7px - 7px)",
+          cx: "calc(100% - 7px - (7px / 2))",
+          y: "calc(50% - 7px / 2)",
+          cy: "50%",
         },
         {
-          id: 'right-bottom',
-          x: 'calc(100% - 7px - 7px)',
-          cx: 'calc(100% - 7px - (7px / 2))',
-          y: 'calc(100% - 7px - 7px)',
-          cy: 'calc(100% - 7px - (7px / 2))',
+          id: "right-bottom",
+          x: "calc(100% - 7px - 7px)",
+          cx: "calc(100% - 7px - (7px / 2))",
+          y: "calc(100% - 7px - 7px)",
+          cy: "calc(100% - 7px - (7px / 2))",
         },
         {
-          id: 'center-bottom',
-          x: 'calc(50% - 7px / 2)',
-          cx: '50%',
-          y: 'calc(100% - 7px - 7px)',
-          cy: 'calc(100% - 7px - (7px / 2))',
+          id: "center-bottom",
+          x: "calc(50% - 7px / 2)",
+          cx: "50%",
+          y: "calc(100% - 7px - 7px)",
+          cy: "calc(100% - 7px - (7px / 2))",
         },
         {
-          id: 'left-bottom',
-          x: 'calc(0% + 7px)',
-          cx: 'calc(0% + 7px + (7px / 2))',
-          y: 'calc(100% - 7px - 7px)',
-          cy: 'calc(100% - 7px - (7px / 2))',
+          id: "left-bottom",
+          x: "calc(0% + 7px)",
+          cx: "calc(0% + 7px + (7px / 2))",
+          y: "calc(100% - 7px - 7px)",
+          cy: "calc(100% - 7px - (7px / 2))",
         },
         {
-          id: 'left-center',
-          x: 'calc(0% + 7px)',
-          cx: 'calc(0% + 7px + (7px / 2))',
-          y: 'calc(50% - 7px / 2)',
-          cy: '50%',
+          id: "left-center",
+          x: "calc(0% + 7px)",
+          cx: "calc(0% + 7px + (7px / 2))",
+          y: "calc(50% - 7px / 2)",
+          cy: "50%",
         },
       ],
 
       endpointListForClick: [
         {
-          id: 'left-top',
-          x: '0%',
-          y: '0%',
+          id: "left-top",
+          x: "0%",
+          y: "0%",
         },
         {
-          id: 'center-top',
-          x: 'calc(50% - 21px / 2)',
-          y: '0%',
+          id: "center-top",
+          x: "calc(50% - 21px / 2)",
+          y: "0%",
         },
         {
-          id: 'right-top',
-          x: 'calc(100% - 21px)',
-          y: '0%',
+          id: "right-top",
+          x: "calc(100% - 21px)",
+          y: "0%",
         },
         {
-          id: 'right-center',
-          x: 'calc(100% - 21px)',
-          y: 'calc(50% - 21px / 2)',
+          id: "right-center",
+          x: "calc(100% - 21px)",
+          y: "calc(50% - 21px / 2)",
         },
         {
-          id: 'right-bottom',
-          x: 'calc(100% - 21px)',
-          y: 'calc(100% - 21px)',
+          id: "right-bottom",
+          x: "calc(100% - 21px)",
+          y: "calc(100% - 21px)",
         },
         {
-          id: 'center-bottom',
-          x: 'calc(50% - 21px / 2)',
-          y: 'calc(100% - 21px)',
+          id: "center-bottom",
+          x: "calc(50% - 21px / 2)",
+          y: "calc(100% - 21px)",
         },
         {
-          id: 'left-bottom',
-          x: '0%',
-          y: 'calc(100% - 21px)',
+          id: "left-bottom",
+          x: "0%",
+          y: "calc(100% - 21px)",
         },
         {
-          id: 'left-center',
-          x: '0%',
-          y: 'calc(50% - 21px / 2)',
+          id: "left-center",
+          x: "0%",
+          y: "calc(50% - 21px / 2)",
         },
       ],
 
@@ -248,164 +250,206 @@ export default {
         "rgba(155, 155, 155, 1)",
         "rgba(255, 255, 255, 1)",
       ],
-    }
+    };
+  },
+  watch: {
+    "hotspot.personalizedTagInfo.lineDirection": {
+      handler: function (value) {
+        this.selectLineClick(value);
+      },
+      // deep: true,
+      immediate: true,
+    },
   },
   computed: {
     ...mapGetters({
-      hotspot: 'hotspot',
+      hotspot: "hotspot",
     }),
     currentTextDirectionIdx() {
       switch (this.hotspot.personalizedTagInfo.textDirection) {
-        case 'left-right':
-          return 0
-        case 'top-bottom':
-          return 1
-        default: 
-          return 0
+        case "left-right":
+          return 0;
+        case "top-bottom":
+          return 1;
+        default:
+          return 0;
       }
     },
   },
   methods: {
     onSwitcherChange(v) {
-      this.hotspot.personalizedTagInfo.isShowLine = v
+      this.hotspot.personalizedTagInfo.isShowLine = v;
     },
     onFillColorActiveChange(e) {
-      this.hotspot.personalizedTagInfo.fillColor = e
+      this.hotspot.personalizedTagInfo.fillColor = e;
     },
     onBorderColorActiveChange(e) {
-      this.hotspot.personalizedTagInfo.borderColor = e
+      this.hotspot.personalizedTagInfo.borderColor = e;
     },
     onTextColorActiveChange(e) {
-      this.hotspot.personalizedTagInfo.textColor = e
+      this.hotspot.personalizedTagInfo.textColor = e;
     },
     onSelectTextDirection(idx) {
       switch (idx) {
         case 0:
-          this.hotspot.personalizedTagInfo.textDirection = 'left-right'
+          this.hotspot.personalizedTagInfo.textDirection = "left-right";
           break;
         case 1:
-          this.hotspot.personalizedTagInfo.textDirection = 'top-bottom'
+          this.hotspot.personalizedTagInfo.textDirection = "top-bottom";
           break;
         default:
           break;
       }
     },
     onTextWrapChange(v) {
-      this.hotspot.personalizedTagInfo.isTextWrap = v
+      this.hotspot.personalizedTagInfo.isTextWrap = v;
     },
     onTextNumPerLineInputBlur() {
       if (this.hotspot.personalizedTagInfo.textNumPerLine < 1) {
-        this.hotspot.personalizedTagInfo.textNumPerLine = 1
+        this.hotspot.personalizedTagInfo.textNumPerLine = 1;
       } else {
-        this.hotspot.personalizedTagInfo.textNumPerLine = Math.round(this.hotspot.personalizedTagInfo.textNumPerLine)
+        this.hotspot.personalizedTagInfo.textNumPerLine = Math.round(
+          this.hotspot.personalizedTagInfo.textNumPerLine
+        );
       }
     },
+    selectLineClick(id) {
+      setTimeout(() => {
+        if (this.svgNode) {
+          console.log("id",  id);
+          const selectNode = this.svgNode
+            .selectAll("rect.endpoint-for-click")
+            .filter((d) => {
+              return d.id === id;
+            });
+          console.log("selectNode", selectNode);
+          selectNode.dispatch("click");
+        }
+      }, 500);
+    },
   },
   mounted() {
-    this.svgNode = d3.select('.svg-wrapper')
+    this.svgNode = d3
+      .select(".svg-wrapper")
       .append("svg")
-      .attr("width", '100%')
-      .attr('height', '100%')
-      
+      .attr("width", "100%")
+      .attr("height", "100%");
+
     setTimeout(() => {
-      const that = this
+      const that = this;
 
       // 大方框
-      this.svgNode.append('rect')
-        .attr('x', 'calc(7px + (7px / 2))')
-        .attr('y', 'calc(7px + (7px / 2)')
-        .attr('width', 'calc(100% - (7px + (7px / 2)) * 2)')
-        .attr('height', 'calc(100% - (7px + (7px / 2)) * 2)')
-        .attr('fill', 'none')
-        .attr('stroke-width', '1px')
-        .attr('stroke', '#404040')
+      this.svgNode
+        .append("rect")
+        .attr("x", "calc(7px + (7px / 2))")
+        .attr("y", "calc(7px + (7px / 2)")
+        .attr("width", "calc(100% - (7px + (7px / 2)) * 2)")
+        .attr("height", "calc(100% - (7px + (7px / 2)) * 2)")
+        .attr("fill", "none")
+        .attr("stroke-width", "1px")
+        .attr("stroke", "#404040");
 
       // 中心小圆
-      this.svgNode.append('circle')
-        .attr('cx', '50%')
-        .attr('cy', '50%')
-        .attr('r', '5px')
-        .attr('fill', '#fff')
+      this.svgNode
+        .append("circle")
+        .attr("cx", "50%")
+        .attr("cy", "50%")
+        .attr("r", "5px")
+        .attr("fill", "#fff");
 
       // 中心稍大的圈
-      this.svgNode.append('circle')
-        .attr('cx', '50%')
-        .attr('cy', '50%')
-        .attr('r', '7px')
-        .attr('fill', 'none')
-        .attr('stroke-width', '1px')
-        .attr('stroke', 'rgba(255, 255, 255, 0.2)')
+      this.svgNode
+        .append("circle")
+        .attr("cx", "50%")
+        .attr("cy", "50%")
+        .attr("r", "7px")
+        .attr("fill", "none")
+        .attr("stroke-width", "1px")
+        .attr("stroke", "rgba(255, 255, 255, 0.2)");
 
       // 中心到各端点的线
-      this.svgNode.selectAll('line')
+      this.svgNode
+        .selectAll("line")
         .data(this.endpointListForShow)
         .enter()
-        .append('line')
-        .attr('x1', '50%')
-        .attr('y1', '50%')
-        .attr('x2', (d) => d.cx)
-        .attr('y2', (d) => d.cy)
-        .attr('stroke-width', '1px')
-        .attr('stroke', 'none')
+        .append("line")
+        .attr("x1", "50%")
+        .attr("y1", "50%")
+        .attr("x2", (d) => d.cx)
+        .attr("y2", (d) => d.cy)
+        .attr("stroke-width", "1px")
+        .attr("stroke", "none");
 
       // 各端点-用于显示
-      this.svgNode.selectAll('rect.endpoint-for-show')
+      this.svgNode
+        .selectAll("rect.endpoint-for-show")
         .data(this.endpointListForShow)
         .enter()
-        .append('rect')
-        .classed('endpoint-for-show', true)
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .attr('width', '7px')
-        .attr('height', '7px')
-        .attr('rx', '2px')
-        .attr('ry', '2px')
-        .attr('fill', '#1a1b1d')
-        .attr('stroke-width', '1px')
-        .attr('stroke', '#666')
-        .attr('idx', (d, i) => i)
-        .attr('cursor', 'pointer')
+        .append("rect")
+        .classed("endpoint-for-show", true)
+        .attr("x", (d) => d.x)
+        .attr("y", (d) => d.y)
+        .attr("width", "7px")
+        .attr("height", "7px")
+        .attr("rx", "2px")
+        .attr("ry", "2px")
+        .attr("fill", "#1a1b1d")
+        .attr("stroke-width", "1px")
+        .attr("stroke", "#666")
+        .attr("idx", (d, i) => i)
+        .attr("cursor", "pointer");
 
       // 各端点-用于点击
-      this.svgNode.selectAll('rect.endpoint-for-click')
+      this.svgNode
+        .selectAll("rect.endpoint-for-click")
         .data(this.endpointListForClick)
         .enter()
-        .append('rect')
-        .classed('endpoint-for-click', true)
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .attr('width', '21px')
-        .attr('height', '21px')
-        .attr('rx', '2px')
-        .attr('ry', '2px')
-        .attr('fill', 'transparent')
-        .attr('idx', (d, i) => i)
-        .attr('cursor', 'pointer')
-        .on('click', function(e, datum) {
-          that.svgNode.selectAll('line').attr('stroke', 'none')
-          that.svgNode.selectAll('rect.endpoint-for-show')
-            .attr('fill', '#1a1b1d')
-            .attr('stroke', '#666')
-            
-          that.svgNode.selectAll('line').filter((d) => {
-            return d.id === datum.id
-          }).attr('stroke', '#fff')
-          that.svgNode.selectAll('rect.endpoint-for-show').filter((d) => {
-            return d.id === datum.id
-          }).attr('fill', '#0076F6')
-            .attr('stroke', '#fff')
+        .append("rect")
+        .classed("endpoint-for-click", true)
+        .attr("x", (d) => d.x)
+        .attr("y", (d) => d.y)
+        .attr("width", "21px")
+        .attr("height", "21px")
+        .attr("rx", "2px")
+        .attr("ry", "2px")
+        .attr("fill", "transparent")
+        .attr("idx", (d, i) => i)
+        .attr("cursor", "pointer")
+        .on("click", function (e, datum) {
+          that.svgNode.selectAll("line").attr("stroke", "none");
+          that.svgNode
+            .selectAll("rect.endpoint-for-show")
+            .attr("fill", "#1a1b1d")
+            .attr("stroke", "#666");
+
+          that.svgNode
+            .selectAll("line")
+            .filter((d) => {
+              return d.id === datum.id;
+            })
+            .attr("stroke", "#fff");
+          that.svgNode
+            .selectAll("rect.endpoint-for-show")
+            .filter((d) => {
+              return d.id === datum.id;
+            })
+            .attr("fill", "#0076F6")
+            .attr("stroke", "#fff");
 
-          that.hotspot.personalizedTagInfo.lineDirection = datum.id
-        })
+          that.hotspot.personalizedTagInfo.lineDirection = datum.id;
+        });
 
       // 初始状态
-      this.svgNode.selectAll('rect.endpoint-for-click').filter((d) => {
-        return d.id === that.hotspot.personalizedTagInfo.lineDirection
-      }).dispatch('click')
-      
+
+      // this.svgNode
+      //   .selectAll("rect.endpoint-for-click")
+      //   .filter((d) => {
+      //     return d.id === that.hotspot.personalizedTagInfo.lineDirection;
+      //   })
+      //   .dispatch("click");
     }, 100);
-  }
-}
+  },
+};
 </script>
 
 <style lang="less" scoped>
@@ -413,12 +457,12 @@ export default {
   .remark-highlight {
     margin-top: 16px;
     font-size: 18px;
-    color: #FFFFFF;
+    color: #ffffff;
   }
   .remark {
     margin-top: 16px;
     font-size: 14px;
-    color: #FFFFFF;
+    color: #ffffff;
     opacity: 0.6;
   }
 
@@ -436,24 +480,24 @@ export default {
   > .svg-wrapper {
     margin-top: 16px;
     height: 110px;
-    background: #1A1B1D;
+    background: #1a1b1d;
     border-radius: 2px;
     border: 1px solid #404040;
   }
 
-  >.title-input-wrapper {
+  > .title-input-wrapper {
     position: relative;
     border: 1px solid rgba(151, 151, 151, 0.2);
     padding: 0 16px;
-    background: #1A1B1D;
+    background: #1a1b1d;
     border-radius: 2px;
     height: 36px;
     width: 100%;
     margin-top: 18px;
     &:focus-within {
-      border-color: #0076F6;
+      border-color: #0076f6;
     }
-    >input {
+    > input {
       border: none;
       background: transparent;
       outline: none;
@@ -464,7 +508,7 @@ export default {
       letter-spacing: 1px;
       font-size: 14px;
     }
-    >.count {
+    > .count {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
@@ -487,7 +531,7 @@ export default {
     position: relative;
     .color-value {
       font-size: 14px;
-      color: #FFFFFF;
+      color: #ffffff;
     }
     .color-preview {
       width: 26px;
@@ -527,11 +571,11 @@ export default {
       > input {
         width: 60px;
         height: 36px;
-        background: #1A1B1D;
+        background: #1a1b1d;
         border-radius: 2px;
         border: 1px solid #404040;
         font-size: 14px;
-        color: #FFFFFF;
+        color: #ffffff;
         margin-right: 10px;
         padding-left: 16px;
         &:focus {
@@ -541,4 +585,4 @@ export default {
     }
   }
 }
-</style>
+</style>