fix[krpano]: 修复 View 组件属性配置不生效

packages/docs/docs/log/KRPANO_CHANGELOG.md

@@ -1,5 +1,11 @@
 # @dage/krpano
 
+## 2.2.2
+
+### Patch Changes
+
+- fix: 修复 View 属性设置失效问题
+
 ## 2.2.1
 
 ### Patch Changes

packages/krpano/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @dage/krpano
 
+## 2.2.2
+
+### Patch Changes
+
+- fix: 修复 View 属性设置失效问题
+
 ## 2.2.1
 
 ### Patch Changes

packages/krpano/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dage/krpano",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "krpano sdk",
   "module": "build/index.js",
   "main": "build/index.js",

packages/krpano/src/components/Events.tsx

@@ -84,7 +84,8 @@ export const Events: FC<EventsProps> = ({ name, keep, ...EventsAttrs }) => {
             `js(${renderer.name}.fire(${eventName},${EventSelector}))`
         ),
         keep,
-      }
+      },
+      true
     );
   }, [name, renderer]);
 

packages/krpano/src/components/HotSpot.tsx

@@ -108,7 +108,8 @@ export const HotSpot: FC<HotspotProps> = memo(({ name, ...rest }) => {
           { ...options },
           (key) => `js(${renderer.name}.fire(${key},${EventSelector}))`
         )
-      )
+      ),
+      true
     );
   }, [renderer, name, options]);
 

packages/krpano/src/components/Krpano.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { KrpanoActionProxy } from "../models";
 import { useMounted, useEventCallback } from "../hooks";
 import { IKrpanoConfig, NativeKrpanoRendererObject } from "../types";
@@ -39,7 +39,6 @@ export const Krpano: React.FC<KrpanoProps> = ({
   onReady,
   ...rest
 }) => {
-  const loaded = useRef(false);
   const [renderer, setRenderer] = useState<KrpanoActionProxy | null>(null);
   const onReadyRef = useEventCallback(onReady);
   const onReadyCallback = useCallback(
@@ -47,6 +46,7 @@ export const Krpano: React.FC<KrpanoProps> = ({
       const krpano = new KrpanoActionProxy(obj);
 
       (window as any)[krpano.name] = krpano;
+      krpano.littlePlanetIntro = littlePlanetIntro ?? false;
       setRenderer(krpano);
 
       if (onReadyRef.current) {
@@ -62,11 +62,10 @@ export const Krpano: React.FC<KrpanoProps> = ({
     renderer.tagAction.waitIncludeLoaded(true).then(() => {
       renderer.loadScene(currentScene);
 
-      littlePlanetIntro &&
-        !loaded.current &&
+      renderer.littlePlanetIntro &&
         renderer.call("skin_setup_littleplanetintro()");
 
-      loaded.current = true;
+      renderer.littlePlanetIntro = false;
     });
   }, [renderer, currentScene]);
 

packages/krpano/src/components/Layer.tsx

@@ -39,7 +39,7 @@ export const Layer: FC<LayerProps> = memo(({ name, ...rest }) => {
   }, []);
 
   useEffect(() => {
-    renderer?.setTag("layer", name, { ...rest });
+    renderer?.setTag("layer", name, { ...rest }, true);
   }, [renderer, name, rest]);
 
   return <div className="layer" />;

packages/krpano/src/components/View.tsx

@@ -32,6 +32,9 @@ export interface ViewProps {
    * @see https://krpano.com/docu/xml/#view.fovtype
    */
   fovType?: "VFOV" | "HFOV" | "DFOV" | "MFOV" | "SFOV";
+  /**
+   * 最大缩放系数，如果存在将覆盖 fovMin
+   */
   maxPixelZoom?: number;
   mFovRatio?: number;
   distortion?: number;
@@ -83,7 +86,19 @@ export const View: React.FC<ViewProps> = memo(({ children, ...viewAttrs }) => {
   const renderer = useContext(KrpanoRendererContext);
 
   useEffect(() => {
-    renderer?.setTag("view", null, { ...viewAttrs });
+    if (!renderer) return;
+
+    if (renderer.littlePlanetIntro) {
+      renderer?.setTag("view", null, { ...viewAttrs });
+
+      // TOFIX: 如果开启小行星入场，会导致 limitview 设置失效
+      setTimeout(() => {
+        // 等待入场动画结束覆盖属性
+        renderer?.setTag("view", null, { ...viewAttrs });
+      }, 4000);
+    } else {
+      renderer?.setTag("view", null, { ...viewAttrs }, true);
+    }
   }, [renderer, viewAttrs]);
 
   return <div className="view">{children}</div>;

packages/krpano/src/models/KrpanoActionProxy.ts

@@ -21,6 +21,11 @@ export class KrpanoActionProxy {
   eventHandlers: EventHandler[] = [];
   tagAction: TagActionProxy;
 
+  /**
+   * 小行星视角
+   */
+  littlePlanetIntro = false;
+
   constructor(
     krpanoRenderer?: NativeKrpanoRendererObject,
     name = "ReactKrpanoActionProxy"
@@ -50,17 +55,15 @@ export class KrpanoActionProxy {
    * @param tag 标签
    * @param name 名称
    * @param attrs 属性
+   * @param nextTick 等待下一帧执行
    */
   async setTag(
     tag: "scene" | "hotspot" | "layer" | "view" | "events" | "autorotate",
     name: string | null,
-    attrs: Record<string, any>
+    attrs: Record<string, any>,
+    nextTick = false
   ) {
-    let nexttick = false;
-
-    if (["events", "hotspot", "layer", "view"].includes(tag)) {
-      nexttick = true;
-    }
+    let nexttick = nextTick;
 
     await this.tagAction.waitIncludeLoaded();
     this.call(