feat: screen 自隐藏masks

packages/qjkankan-editor/.env.testprod

@@ -7,5 +7,5 @@ VUE_APP_PROXY_URL_ROOT='https://test.4dkankan.com'
 VUE_APP_PROXY_URL='https://test.4dkankan.com/qjkankan/'
 VUE_APP_ORIGIN=
 VUE_APP_URL_FILL=/qjkankan
-VUE_APP_DEBBUG_FLAG=1019-01
-VUE_APP_DEBBUG_NOTIFY=0
+VUE_APP_DEBBUG_FLAG=1229-01
+VUE_APP_DEBBUG_NOTIFY=1

packages/qjkankan-editor/src/Store/modules/scene.js

@@ -1,8 +1,20 @@
 import { i18n } from "@/lang";
 
 const initCustomMask = {
-  sky: { isShow: false, icon: "", scale: 1, fodderId: "" },
-  earth: { isShow: false, icon: "", scale: 1, fodderId: "" },
+  sky: {
+    isShow: false,
+    icon: "",
+    scale: 1,
+    fodderId: "",
+    antidistorted: false,
+  },
+  earth: {
+    isShow: false,
+    icon: "",
+    scale: 1,
+    fodderId: "",
+    antidistorted: false,
+  },
 };
 
 export default {
@@ -125,5 +137,38 @@ export default {
         rootState.info.scenes[updateSceneIndex] = currentScene;
       }
     },
+    /**
+     * 1.6.0 将遮罩层到所有图层
+     * @param {*} param0
+     * @param {*} type
+     */
+    applycustomMaskToAll({ commit, state, rootState }, type) {
+      const currentScene = state.currentScene;
+      const { sky, earth } = currentScene.customMask;
+      if (type === "sky") {
+        Array.from(rootState.info.scenes).forEach((item, index) => {
+          if (item.type === "pano") {
+            rootState.info.scenes[index]["customMask"]["sky"] = { ...sky };
+          }
+        });
+      }
+      if (type === "earth") {
+        Array.from(rootState.info.scenes).forEach((item, index) => {
+          if (item.type === "pano") {
+            rootState.info.scenes[index]["customMask"]["earth"] = { ...earth };
+          }
+        });
+      }
+    },
+    applyInitVisualToAll({ commit, state, rootState }) {
+      const currentScene = state.currentScene;
+      Array.from(rootState.info.scenes).forEach((item, index) => {
+        if (item.type === "pano") {
+          rootState.info.scenes[index]["initVisual"] = {
+            ...currentScene.initVisual,
+          };
+        }
+      });
+    },
   },
 };

packages/qjkankan-editor/src/framework/play/pano/index.vue

@@ -87,7 +87,7 @@ export default {
   watch: {
     "$route.name": function (newVal) {
       __krfn.utils.toggleHotspot(this.$getKrpano(), newVal == "hotspot");
-      this.handleRouterCoverForCap(newVal == "screen");
+      this.handleRouterCoverForCap();
     },
     currentScene(newVal) {
       if (newVal) {
@@ -259,16 +259,10 @@ export default {
         }
       }
     },
-    handleRouterCoverForCap(isRoute) {
-      if (isRoute) {
-        this.$getKrpano().set("hotspot[peaklogo].visible", false);
-        this.$getKrpano().set("hotspot[nadirlogo].visible", false);
-      } else {
-        const { sky, earth } = this.currentScene.customMask;
-        sky.isShow && this.$getKrpano().set("hotspot[peaklogo].visible", true);
-        earth.isShow &&
-          this.$getKrpano().set("hotspot[nadirlogo].visible", true);
-      }
+    handleRouterCoverForCap() {
+      const { sky, earth } = this.currentScene.customMask;
+      sky.isShow && this.$getKrpano().set("hotspot[peaklogo].visible", true);
+      earth.isShow && this.$getKrpano().set("hotspot[nadirlogo].visible", true);
     },
   },
   mounted() {

packages/qjkankan-editor/src/mixins/debuggerHelper.js

@@ -1,6 +1,6 @@
 import Vue from "vue";
 export const debuggerHelper = (show = true) => {
-  const version = "1.5.1--" + process.env.VUE_APP_DEBBUG_FLAG;
+  const version = "1.6.0--" + process.env.VUE_APP_DEBBUG_FLAG;
   if (show) {
     // log.setColors({
     var css = "background: #28b561; color:#fff;font-size:14px;padding:5px;";

packages/qjkankan-editor/src/views/cover/setting.vue

@@ -48,6 +48,20 @@
           :max="2"
         />
       </div>
+      <div class="swi-col">
+        <span> 跟随场景转动 </span>
+        <switcher
+          :value="sky.antidistorted"
+          @change="(sa) => (sky.antidistorted = Boolean(sa))"
+        ></switcher>
+      </div>
+      <div class="swi-col">
+        <span> 应用到全部全景图 </span>
+        <switcher
+          :value="isApplySkyToAll"
+          @change="(sat) => (isApplySkyToAll = Boolean(sat))"
+        ></switcher>
+      </div>
       <!-- sky end -->
       <div style="margin: 30px 0"></div>
       <!-- earth start -->
@@ -79,7 +93,6 @@
 
       <div class="up-col">
         <span> 缩放比例 </span>
-
         <slider
           v-model="earth.scale"
           show-stops
@@ -89,16 +102,23 @@
           :max="2"
         />
       </div>
-      <!-- earth end -->
-
-      <div class="swi-col" style="padding-top: 15px">
+      <div class="swi-col">
+        <span> 跟随场景转动 </span>
+        <switcher
+          :value="earth.antidistorted"
+          @change="(ve) => (earth.antidistorted = Boolean(ve))"
+        ></switcher>
+      </div>
+      <div class="swi-col">
         <span> 应用到全部全景图 </span>
         <switcher
-          :value="isApplyToAll"
-          @change="(value) => (isApplyToAll = Boolean(value))"
+          :value="isApplyEarthToAll"
+          @change="(vet) => (isApplyEarthToAll = Boolean(vet))"
         ></switcher>
       </div>
+      <!-- earth end -->
     </template>
+
     <div class="goto-4dkk-tip" v-if="currentScene.type === '4dkk'">
       <div class="img-wrap">
         <img
@@ -147,7 +167,8 @@ export default {
   },
   data() {
     return {
-      isApplyToAll: false,
+      isApplySkyToAll: false,
+      isApplyEarthToAll: false,
       isShowSelectionWindow: false,
       isSelect: "",
       scaleMarks: {
@@ -160,12 +181,14 @@ export default {
         icon: "",
         scale: 1,
         fodderId: "",
+        antidistorted: false,
       },
       earth: {
         isShow: false,
         icon: "",
         scale: 1,
         fodderId: "",
+        antidistorted: false,
       },
     };
   },
@@ -178,6 +201,7 @@ export default {
           this.handlePeakStatus(val.isShow);
           this.handlePeakScale(val.scale);
           this.handlePeakURL(val.icon);
+          this.handlePeakDistorted(val.antidistorted);
         }
       },
       deep: true,
@@ -190,18 +214,37 @@ export default {
           this.handleNadirStatus(val.isShow);
           this.handleNadirScale(val.scale);
           this.handleNadirURL(val.icon);
+          this.handleNadirDistorted(val.antidistorted);
         }
       },
       deep: true,
     },
-    isApplyToAll: {
+    isApplySkyToAll: {
+      handler: function (val) {
+        if (val) {
+          this.$confirm({
+            content: "是否应用到全部全景图？",
+            ok: () => {
+              this.$store.dispatch("scene/applycustomMaskToAll", "sky");
+            },
+            no: () => {
+              this.isApplySkyToAll = false;
+            },
+          });
+        }
+      },
+      immediate: true,
+    },
+    isApplyEarthToAll: {
       handler: function (val) {
         if (val) {
           this.$confirm({
             content: "是否应用到全部全景图？",
-            ok: () => {},
+            ok: () => {
+              this.$store.dispatch("scene/applycustomMaskToAll", "earth");
+            },
             no: () => {
-              this.isApplyToAll = false;
+              this.isApplyEarthToAll = false;
             },
           });
         }
@@ -209,11 +252,13 @@ export default {
       immediate: true,
     },
     "currentScene.customMask": {
-      handler: function (newVal) {
-        if (newVal) {
+      handler: function (newVal, oldVal) {
+        if (newVal && newVal !== oldVal) {
           const { sky, earth } = newVal;
-          this.sky = sky;
-          this.earth = earth;
+          this.isApplyEarthToAll = false;
+          this.isApplySkyToAll = false;
+          this.sky = { ...sky };
+          this.earth = { ...earth };
         }
       },
       deep: true,
@@ -241,7 +286,6 @@ export default {
       const status_b = !!status;
       const kr = this.$getKrpano();
       if (kr) {
-        // console.log("handlePeakStatus", status);
         kr.set("hotspot[peaklogo].visible", status_b);
       }
     },
@@ -257,6 +301,12 @@ export default {
         kr.set("hotspot[peaklogo].scale", scale);
       }
     },
+    handlePeakDistorted(anti) {
+      const kr = this.$getKrpano();
+      if (kr) {
+        kr.set("hotspot[peaklogo].distorted", anti);
+      }
+    },
     handleNadirStatus(status) {
       const status_b = !!status;
       const kr = this.$getKrpano();
@@ -276,6 +326,12 @@ export default {
         kr.set("hotspot[nadirlogo].scale", scale);
       }
     },
+    handleNadirDistorted(anti) {
+      const kr = this.$getKrpano();
+      if (kr) {
+        kr.set("hotspot[nadirlogo].distorted", anti);
+      }
+    },
     updateCurrentScene() {
       this.$store.dispatch("scene/syncCurrentSceneToStore");
     },
@@ -292,6 +348,7 @@ export default {
 .cover-panel {
   padding: 20px;
   height: 100%;
+  overflow-y: scroll;
   > .title {
     font-size: 18px;
     color: #fff;
@@ -309,7 +366,7 @@ export default {
     justify-content: space-between;
     align-items: center;
     flex-direction: row;
-    margin: 10px 0;
+    margin: 12px 0;
   }
   .up-col {
     flex-direction: column;

packages/qjkankan-editor/src/views/screen/Setting.vue

@@ -83,6 +83,17 @@ export default {
     };
   },
   watch: {
+    "currentScene.id": {
+      handler(val, oldVal) {
+        if (val && val !== oldVal) {
+          this.applyToAll = false;
+          console.error("screenID不同");
+          this.handleHiddenAllMasks();
+        }
+      },
+      immediate: true,
+    },
+
     "currentScene.initVisual": {
       handler(val) {
         if (val) {
@@ -100,6 +111,22 @@ export default {
         this.handleVlootAt(val);
       },
     },
+    applyToAll: {
+      handler: function (val) {
+        if (val) {
+          this.$confirm({
+            content: "是否应用到全部全景图？",
+            ok: () => {
+              this.$store.dispatch("scene/applyInitVisualToAll");
+            },
+            no: () => {
+              this.applyToAll = false;
+            },
+          });
+        }
+      },
+      immediate: true,
+    },
   },
   methods: {
     onClickGo4dkk() {
@@ -129,6 +156,14 @@ export default {
         kr.set("view.vlookatmax", String(max));
       }
     },
+    handleHiddenAllMasks() {
+      if (this.$getKrpano()) {
+        setTimeout(() => {
+          this.$getKrpano().set("hotspot[peaklogo].visible", false);
+          this.$getKrpano().set("hotspot[nadirlogo].visible", false);
+        }, 500);
+      }
+    },
   },
   mounted() {
     this.$bus.on("initView", (data) => {