瀏覽代碼

docs: 版本更新

chenlei 1 年之前
父節點
當前提交
e25f04bf6d

+ 4 - 0
packages/docs/.umirc.ts

@@ -129,6 +129,10 @@ export default defineConfig({
         title: "View 视角",
         path: "/krpano/view",
       },
+      {
+        title: "Events 事件",
+        path: "/krpano/events",
+      },
     ],
   },
   // more config: https://d.umijs.org/config

+ 3 - 0
packages/docs/docs/krpano/events/index.md

@@ -0,0 +1,3 @@
+### API
+
+<API hideTitle exports='["Events"]' src='@dage/krpano/index.d.ts'></API>

+ 14 - 1
packages/docs/docs/krpano/index.md

@@ -1,4 +1,4 @@
-krpano 是一款基于 xml 开发的插件,改个 skin 样式琢磨半天,想动态添加或者切换场景无从下手,国内社区少的可怜,只有个[英文文档](https://krpano.com/docu/xml/?version=119pr13),修改成本太高了,还好有 gpt 做参数解析。
+xml? 狗看了都摇头,改个 skin 样式琢磨半天,想动态添加或者切换场景无从下手,国内社区少的可怜,只有个[英文文档](https://krpano.com/docu/xml/?version=119pr13),修改成本太高了,还好有 gpt 做参数解析。
 
 `@dage/krpano` 将常用的标签使用 `React` 进行了组件化封装(MVVM 真香),并在实例上补充了 `vtourskin` 的功能,支持类型推断,基本满足开发需求。
 
@@ -16,6 +16,7 @@ import {
   Scene,
   View,
   HotSpot,
+  Events,
   SceneProps,
   ROTATE_DIRECTION,
   ZOOM_ACTION,
@@ -166,6 +167,17 @@ export default () => {
     window.ReactKrpanoActionProxy?.zoomView(action);
   };
 
+  const handleAutoRotateOneRound = () => {
+    const count = window.ReactKrpanoActionProxy?.get("scene").count;
+    const curIndex = window.ReactKrpanoActionProxy?.get(
+      "scene[get(xml.scene)].index"
+    );
+    const nextScene = window.ReactKrpanoActionProxy?.get("scene").getItem(
+      curIndex + 1 >= count ? 0 : curIndex + 1
+    );
+    setCurrentScene(nextScene.name);
+  };
+
   return (
     <div className="demo">
       <Krpano
@@ -176,6 +188,7 @@ export default () => {
         passQueryParameters={true}
       >
         <Autorotate enabled={autorotateEnable} />
+        <Events onAutoRotateOneRound={handleAutoRotateOneRound} />
 
         {[...CENTER_SCENE_LIST, ...PARTY_SCENE_LIST].map(
           (sc) => sc.imageTagAttributes && <Scene key={sc.name} {...sc} />

+ 1 - 1
packages/krpano/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dage/krpano",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "krpano sdk",
   "module": "dist/index.js",
   "main": "dist/index.js",

+ 12 - 4
packages/krpano/src/components/Events.tsx

@@ -9,8 +9,6 @@ import { mapEventPropsToJSCall } from "../utils";
 export interface EventsConfig {
   /** 事件名,若存在该参数则为局部事件 */
   name?: string;
-  /** 暂时不支持 */
-  // keep?: boolean;
   onEnterFullscreen?: EventCallback;
   onExitFullscreen?: EventCallback;
   onXmlComplete?: EventCallback;
@@ -36,9 +34,21 @@ export interface EventsConfig {
   onViewChanged?: EventCallback;
   onResize?: EventCallback;
   onFrameBufferResize?: EventCallback;
+  /**
+   * 启动自动旋转时回调
+   */
   onAutoRotateStart?: EventCallback;
+  /**
+   * 停止自动旋转时回调
+   */
   onAutoRotateStop?: EventCallback;
+  /**
+   * 全景图完成一轮自动旋转时回调
+   */
   onAutoRotateOneRound?: EventCallback;
+  /**
+   * 自动旋转状态发生改变时回调
+   */
   onAutoRotateChange?: EventCallback;
   onIPhoneFullscreen?: EventCallback;
 }
@@ -76,5 +86,3 @@ export const Events: FC<EventsProps> = ({ name, ...EventsAttrs }) => {
 
   return <div className="events"></div>;
 };
-
-export default Events;