编辑器-热点-各种图表类型相关选项的初始化

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

@@ -36,7 +36,6 @@
             class="icon-setting-component"
             :is="iconTypeComponent"
             ref="icon-setting-component"
-            @addHotspot="addHotspot"
           />
           <div class="bars" v-if="hotspot.hotspotIconType !== 'personalized_tag'">
             <RangeItem :value="rang" @input="onRangeChange" />
@@ -302,7 +301,6 @@ export default {
 
     setTimeout(() => {
       if (this.editTitle != '编辑' && this.editTitle != this.$i18n.t('hotspot.edit')) {
-        this.addHotspot(this.$refs['icon-setting-component'].hotspotIconList[0])
         this.rang.value = window.g_hotspotCurrentScale
         this.onRangeChange({ value: window.g_hotspotCurrentScale })
       }
@@ -414,28 +412,6 @@ export default {
       this.$emit("close");
       this.$emit("save", this.hotspot);
     },
-    addHotspot(data) {
-      data.type && (this.hotspot.hotspotIconType = data.type)
-      data.img && (this.hotspot.img = data.img)
-      if (data.serialFrameInfo) {
-        this.hotspot.serialFrameInfo.frameNumber = data.serialFrameInfo.frameNumber
-        this.hotspot.serialFrameInfo.duration = data.serialFrameInfo.duration
-      }
-      if (data.personalizedTagInfo) {
-        this.hotspot.personalizedTagInfo.isShowLine = data.personalizedTagInfo.isShowLine
-        this.hotspot.personalizedTagInfo.lineDirection = data.personalizedTagInfo.lineDirection
-      }
-      
-      if (this.isAdd && (this.editTitle != '编辑' && this.editTitle != this.$i18n.t('hotspot.edit'))) {
-        this.isAdd = false
-        this.$bus.emit('addhotspot', this.hotspot)
-        this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].css', `text-align:center; color:#FFFFFF;
-          font-family:STXihei;font-size:${this.hotspot.fontSize}px;`)
-      } else {
-        this.$getKrpano().set(`hotspot[${this.hotspot.name}].url`, data.img)
-        this.$getKrpano().set(`hotspot[${this.hotspot.name}].hotspottitle`, this.hotspot.hotspotTitle)
-      }
-    }
   }
 };
 </script>

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

@@ -238,14 +238,25 @@ export default {
           hotspotType: data.hotspotType, // 热点类型，切换场景、图片、视频、音频、链接、文本等等
           
           hotspotIconType: 'system_icon', // 热点图标的类型，系统图标(system_icon)、自定义图片(custom_image)、序列帧(serial_frame)、个性标签(personalized_tag)
-          img: '', // 热点图标
+          img: 'static/panoassets/images/hotspot/icon/img_doticon_01.svg', // 热点图标类型为系统图标时，,图标的url
+          icontype: 'icon1', // 热点图标类型为系统图标时，图标的id
+          customIconInfo: { // 热点图标类型为自定义图标时，图标的数据
+            img: '',
+          },
           serialFrameInfo: { // 热点图标类型为序列帧时，序列帧的数据
+            url: '',
             frameNumber: 0, // 总帧数
             duration: 0, // 总播放时长（秒）
           },
           personalizedTagInfo: { // 热点图标类型为个性标签时，个性标签的数据
             isShowLine: true,
-            lineDirection: '',
+            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,
           },
           
           name: "_" + this.$randomWord(true, 8, 8),
@@ -271,16 +282,30 @@ export default {
         if (!hotspotData.hotspotIconType) {
           hotspotData.hotspotIconType = 'system_icon'
         }
-        // v1.3针对序列帧类型的热点图标，新增了序列帧信息
+        // v1.3针对类型为自定义图标的热点图标，新增的数据
+        if (!hotspotData.customIconInfo) {
+          hotspotData.customIconInfo = { 
+            img: '',
+          }
+        }
+        // v1.3针对序列帧类型的热点图标，新增的数据
         if (!hotspotData.serialFrameInfo) {
           hotspotData.serialFrameInfo = {
+            url: '',
             frameNumber: 0,
             duration: 0,
           }
-          hotspotData.personalizedTagInfo = {
-            isShowLine: true,
-            lineDirection: '',
-          }
+        }
+        // v1.3针对个性标签类型的热点图标，新增的数据
+        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) {

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

@@ -1,7 +1,7 @@
 <template>
   <div class="hotspot-icon-custom">
     <button
-      v-if="!selectedIcon"
+      v-if="!hotspot.customIconInfo.img"
       class="add-icon"
       @click="isShowSelectionWindow = true"
     >
@@ -10,9 +10,9 @@
       <div class="tip">{{$i18n.t('hotspot.add_custom_icon_rule')}}</div>
     </button>
 
-    <div v-if="selectedIcon" class="icon-selected">
+    <div v-if="hotspot.customIconInfo.img" class="icon-selected">
       <div class="icon-wrap">
-        <img class="thumb" :src="selectedIcon" alt="">
+        <img class="thumb" :src="hotspot.customIconInfo.img" alt="">
         <button class="delete-btn" @click="onClickDelete">
           <img class="normal" src="@/assets/images/icons/close01_normal@2x.png" alt="">
           <img class="hover" src="@/assets/images/icons/close01_hover@2x.png" alt="">
@@ -36,6 +36,8 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
+
 import MaterialSelector from "@/components/materialSelector.vue";
 
 export default {
@@ -44,22 +46,24 @@ export default {
   },
   data() {
     return {
-      selectedIcon: null,
       isShowSelectionWindow: false,
     }
   },
+  computed: {
+    ...mapGetters({
+      hotspot: 'hotspot',
+    }),
+  },
   methods: {
     handleSubmitFromMaterialSelector(data) {
       this.isShowSelectionWindow = false
-      this.selectedIcon = data[0].icon
-      this.$emit('addHotspot', {
-        type: 'custom_image',
-        img: data[0].icon,
-      })
+      this.hotspot.customIconInfo.img = data[0].icon
     },
     onClickDelete() {
-      this.selectedIcon = null
+      this.hotspot.customIconInfo.img = ''
     }
+  },
+  mounted() {
   }
 }
 </script>

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

@@ -2,7 +2,7 @@
   <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="isShowLine" @change="onSwitcherChange"></Switcher>
+      <Switcher :value="hotspot.personalizedTagInfo.isShowLine" @change="onSwitcherChange"></Switcher>
     </div>
     
     <div class="svg-wrapper"></div>
@@ -10,26 +10,26 @@
     <div class="remark-highlight">{{ $i18n.t('hotspot.hotspot_title') }}</div>
     <div class="title-input-wrapper">
       <input
-        v-model.trim="hotspotTitle"
+        v-model.trim="hotspot.hotspotTitle"
         type="text" maxlength="15"
         :placeholder="$i18n.t('hotspot.title_placeholder')"
       />
-      <span class="count">{{ hotspotTitle.length }}/15</span>
+      <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="color-value">{{ fillColor }}</div>
+      <div class="color-value">{{ hotspot.personalizedTagInfo.fillColor }}</div>
       <div
         class="color-preview"
-        :style="`background-color: ${fillColor};`"
+        :style="`background-color: ${hotspot.personalizedTagInfo.fillColor};`"
       />
       <ColorPicker
         show-alpha
         :predefine="predefineColors"
-        :value="fillColor"
+        :value="hotspot.personalizedTagInfo.fillColor"
         @active-change="onFillColorActiveChange"
       />
     </div>
@@ -38,15 +38,15 @@
     <div
       class="color-picker-wrap"
     >
-      <div class="color-value">{{ borderColor }}</div>
+      <div class="color-value">{{ hotspot.personalizedTagInfo.borderColor }}</div>
       <div
         class="color-preview"
-        :style="`background-color: ${borderColor};`"
+        :style="`background-color: ${hotspot.personalizedTagInfo.borderColor};`"
       />
       <ColorPicker
         show-alpha
         :predefine="predefineColors"
-        :value="borderColor"
+        :value="hotspot.personalizedTagInfo.borderColor"
         @active-change="onBorderColorActiveChange"
       />
     </div>
@@ -55,15 +55,15 @@
     <div
       class="color-picker-wrap"
     >
-      <div class="color-value">{{ textColor }}</div>
+      <div class="color-value">{{ hotspot.personalizedTagInfo.textColor }}</div>
       <div
         class="color-preview"
-        :style="`background-color: ${textColor};`"
+        :style="`background-color: ${hotspot.personalizedTagInfo.textColor};`"
       />
       <ColorPicker
         show-alpha
         :predefine="predefineColors"
-        :value="textColor"
+        :value="hotspot.personalizedTagInfo.textColor"
         @active-change="onTextColorActiveChange"
       />
     </div>
@@ -87,23 +87,23 @@
 
     <div class="text-wrap-setting switcher-wrap">
       <span class="label">{{ $i18n.t('hotspot.if_wrap') }}</span>
-      <Switcher :value="isTextWrap" @change="onTextWrapChange"></Switcher>
+      <Switcher :value="hotspot.personalizedTagInfo.isTextWrap" @change="onTextWrapChange"></Switcher>
     </div>
 
     <div
       class="text-num-per-line-wrap"
       :class="{
-        disable: !isTextWrap
+        disable: !hotspot.personalizedTagInfo.isTextWrap
       }"
     >
       <div class="remark">{{ $i18n.t('hotspot.text_num_per_line') }}</div>
       <div class="value-wrap">
         <input
-          v-model.trim.number="textNumPerLine"
+          v-model.trim.number="hotspot.personalizedTagInfo.textNumPerLine"
           @blur="onTextNumPerLineInputBlur"
           type="number"
           min="1"
-          :disabled="!isTextWrap"
+          :disabled="!hotspot.personalizedTagInfo.isTextWrap"
         >
         <span class="remark">{{ $i18n.t('hotspot.words') }}</span>
       </div>
@@ -113,6 +113,7 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 import * as d3 from "d3";
 import { ColorPicker } from "element-ui";
 import Switcher from "@/components/shared/Switcher.vue";
@@ -126,16 +127,6 @@ export default {
   },
   data() {
     return {
-      isShowLine: true,
-      lineDirection: '',
-      hotspotTitle: '',
-      fillColor: 'rgba(0, 0, 0, 1)',
-      borderColor: 'rgba(0, 0, 0, 1)',
-      textColor: 'rgba(0, 0, 0, 1)',
-      textDirection: '',
-      isTextWrap: false,
-      textNumPerLine: 10,
-      
       svgNode: null,
 
       endpointListForShow: [
@@ -260,8 +251,11 @@ export default {
     }
   },
   computed: {
+    ...mapGetters({
+      hotspot: 'hotspot',
+    }),
     currentTextDirectionIdx() {
-      switch (this.textDirection) {
+      switch (this.hotspot.personalizedTagInfo.textDirection) {
         case 'left-right':
           return 0
         case 'top-bottom':
@@ -273,46 +267,37 @@ export default {
   },
   methods: {
     onSwitcherChange(v) {
-      this.isShowLine = v
-    },
-    emit() {
-      this.$emit('addHotspot', {
-        type: 'personalized_tag',
-        personalizedTagInfo: {
-          isShowLine: this.isShowLine,
-          lineDirection: this.lineDirection,
-        }
-      })
+      this.hotspot.personalizedTagInfo.isShowLine = v
     },
     onFillColorActiveChange(e) {
-      this.fillColor = e
+      this.hotspot.personalizedTagInfo.fillColor = e
     },
     onBorderColorActiveChange(e) {
-      this.borderColor = e
+      this.hotspot.personalizedTagInfo.borderColor = e
     },
     onTextColorActiveChange(e) {
-      this.textColor = e
+      this.hotspot.personalizedTagInfo.textColor = e
     },
     onSelectTextDirection(idx) {
       switch (idx) {
         case 0:
-          this.textDirection = 'left-right'
+          this.hotspot.personalizedTagInfo.textDirection = 'left-right'
           break;
         case 1:
-          this.textDirection = 'top-bottom'
+          this.hotspot.personalizedTagInfo.textDirection = 'top-bottom'
           break;
         default:
           break;
       }
     },
     onTextWrapChange(v) {
-      this.isTextWrap = v
+      this.hotspot.personalizedTagInfo.isTextWrap = v
     },
     onTextNumPerLineInputBlur() {
-      if (this.textNumPerLine < 1) {
-        this.textNumPerLine = 1
+      if (this.hotspot.personalizedTagInfo.textNumPerLine < 1) {
+        this.hotspot.personalizedTagInfo.textNumPerLine = 1
       } else {
-        this.textNumPerLine = Math.round(this.textNumPerLine)
+        this.hotspot.personalizedTagInfo.textNumPerLine = Math.round(this.hotspot.personalizedTagInfo.textNumPerLine)
       }
     },
   },
@@ -410,12 +395,12 @@ export default {
           }).attr('fill', '#0076F6')
             .attr('stroke', '#fff')
 
-          this.lineDirection = datum.id
+          that.hotspot.personalizedTagInfo.lineDirection = datum.id
         })
 
       // 初始状态
       this.svgNode.selectAll('rect.endpoint-for-click').filter((d) => {
-        return d.id === 'left-top'
+        return d.id === that.hotspot.personalizedTagInfo.lineDirection
       }).dispatch('click')
       
     }, 100);

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

@@ -1,7 +1,7 @@
 <template>
   <div class="hotspot-icon-serial-frame">
     <button
-      v-if="!selectedIcon"
+      v-if="!hotspot.serialFrameInfo.img"
       class="add-icon"
       @click="isShowSelectionWindow = true"
     >
@@ -10,7 +10,7 @@
       <div class="tip">{{$i18n.t('hotspot.add_serial_frame_rule')}}</div>
     </button>
 
-    <div v-if="selectedIcon" class="icon-selected">
+    <div v-if="hotspot.serialFrameInfo.img" class="icon-selected">
       <div
         class="icon-wrap"
         :style="{
@@ -21,7 +21,7 @@
         <img
           class="serial-frame-preview"
           ref="serial-frame-preview"
-          :src="selectedIcon"
+          :src="hotspot.serialFrameInfo.img"
           alt=""
           :style="{
             top: -this.frameHeight * this.currentFrameIdx + 'px',
@@ -42,7 +42,7 @@
       <div class="remark">{{$i18n.t('hotspot.frame_total_number')}}</div>
       <div class="right-wrap">
         <input
-          v-model.trim.number="frameNumber"
+          v-model.trim.number="hotspot.serialFrameInfo.frameNumber"
           @blur="onFrameNumberInputBlur"
           type="number"
           min="2"
@@ -56,7 +56,7 @@
       <div class="remark">{{$i18n.t('hotspot.frame_duration')}}</div>
       <div class="right-wrap">
         <input
-          v-model.trim.number="duration"
+          v-model.trim.number="hotspot.serialFrameInfo.duration"
           @blur="onDurationInputBlur"
           type="number"
           min="0"
@@ -87,12 +87,8 @@ export default {
   },
   data() {
     return {
-      selectedIcon: null,
       isShowSelectionWindow: false,
 
-      frameNumber: 30,
-      duration: 3,
-
       frameHeight: 0,
       frameWidth: 0,
       currentFrameIdx: 0,
@@ -100,9 +96,12 @@ export default {
     }
   },
   computed: {
+    ...mapGetters({
+      hotspot: 'hotspot',
+    }),
   },
   watch: {
-    frameNumber: {
+    'hotspot.serialFrameInfo.frameNumber': {
       handler(vNew) {
         if (vNew >= 2 && Number.isInteger(vNew)) {
           this.computeFrameHeight()
@@ -116,7 +115,7 @@ export default {
       },
       immediate: true,
     },
-    duration: {
+    'hotspot.serialFrameInfo.duration': {
       handler() {
         this.playSerialFrame()
       },
@@ -125,20 +124,20 @@ export default {
   },
   methods: {
     onFrameNumberInputBlur() {
-      if (this.frameNumber < 2) {
-        this.frameNumber = 2
+      if (this.hotspot.serialFrameInfo.frameNumber < 2) {
+        this.hotspot.serialFrameInfo.frameNumber = 2
       } else {
-        this.frameNumber = Math.round(this.frameNumber)
+        this.hotspot.serialFrameInfo.frameNumber = Math.round(this.hotspot.serialFrameInfo.frameNumber)
       }
     },
     onDurationInputBlur() {
-      if (this.duration < 0) {
-        this.duration = 0
+      if (this.hotspot.serialFrameInfo.duration < 0) {
+        this.hotspot.serialFrameInfo.duration = 0
       }
     },
     handleSubmitFromMaterialSelector(data) {
       this.isShowSelectionWindow = false
-      this.selectedIcon = data[0].icon
+      this.hotspot.serialFrameInfo.img = data[0].icon
 
       this.computeFrameHeight()
     },
@@ -148,7 +147,7 @@ export default {
 
       setTimeout(() => {
         try {
-          this.frameHeight = this.$refs['serial-frame-preview'].clientHeight / this.frameNumber
+          this.frameHeight = this.$refs['serial-frame-preview'].clientHeight / this.hotspot.serialFrameInfo.frameNumber
           if (this.frameHeight > 110) {
             this.frameWidth = 110 * 110 / this.frameHeight
             this.frameHeight = 110
@@ -162,31 +161,24 @@ export default {
     playSerialFrame() {
       clearInterval(this.intervalId)
       this.currentFrameIdx = 0
-      if (!this.selectedIcon || this.frameHeight <= 0 || this.duration <= 0) {
+      if (!this.hotspot.serialFrameInfo.img || this.frameHeight <= 0 || this.hotspot.serialFrameInfo.duration <= 0) {
         return
       }
       this.intervalId = setInterval(() => {
         this.currentFrameIdx++
-        if (this.currentFrameIdx >= this.frameNumber) {
+        if (this.currentFrameIdx >= this.hotspot.serialFrameInfo.frameNumber) {
           this.currentFrameIdx = 0
         }
-      }, this.duration / this.frameNumber * 1000);
-      this.$emit('addHotspot', {
-        type: 'serial_frame',
-        img: this.selectedIcon,
-        serialFrameInfo: {
-          frameNumber: this.frameNumber,
-          duration: this.duration
-        }
-      })
-
+      }, this.hotspot.serialFrameInfo.duration / this.hotspot.serialFrameInfo.frameNumber * 1000);
     },
     onClickDelete() {
-      this.selectedIcon = null
+      this.hotspot.serialFrameInfo.img = ''
       clearInterval(this.intervalId)
       this.frameHeight = 0
       this.frameWidth = 0
     }
+  },
+  mounted() {
   }
 }
 </script>

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

@@ -4,8 +4,11 @@
       <div class="margin-handler-layer">
         <ul>
           <li
+            :class="{
+              selected: item.id === hotspot.icontype
+            }"
             v-for="(item, i) in hotspotIconList"
-            @click="$emit('addHotspot', item)" :key="i"
+            @click="onClickIcon(item)" :key="i"
           >
             <img :src="item.thumb" alt="">
           </li>
@@ -16,6 +19,8 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
+
 export default {
   data() {
     let cdn = this.$config.getStaticResource('/panoassets/images/hotspot/icon/')
@@ -33,6 +38,19 @@ export default {
       hotspotIconList,
     }
   },
+  computed: {
+    ...mapGetters({
+      hotspot: 'hotspot',
+    }),
+  },
+  methods: {
+    onClickIcon(item) {
+      this.hotspot.img = item.img
+      this.hotspot.icontype = item.id
+    }
+  },
+  mounted() {
+  }
 }
 </script>
 
@@ -70,6 +88,9 @@ export default {
           &:hover {
             border-color: #0076f6;
           }
+          &.selected {
+            border-color: #0076f6;
+          }
         }
       }
     }