feat[krpano]: Control

packages/docs/.umirc.ts

@@ -135,6 +135,10 @@ export default defineConfig({
         path: "/krpano/video-scene",
       },
       {
+        title: "Control 控制器",
+        path: "/krpano/control",
+      },
+      {
         title: "Scene 场景",
         path: "/krpano/scene",
       },

packages/docs/docs/krpano/control/index.md

@@ -0,0 +1,98 @@
+## 控制器
+
+### 修改拖拽视角方向
+
+在移动端竖屏模式下，通过样式旋转横屏，但是物理方向并没有改变，需要重新代理 touch 事件
+
+```tsx
+import React, { useRef, useEffect, useState } from "react";
+import { Krpano, Scene, View, Control } from "@dage/krpano";
+
+const URL = "https://houseoss.4dkankan.com/project/leifeng-transfer";
+
+export default () => {
+  const startX = useRef(0);
+  const startY = useRef(0);
+
+  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
+    const touch = e.touches[0];
+    startX.current = touch.clientX;
+    startY.current = touch.clientY;
+  };
+  const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {
+    const touch = e.touches[0];
+    const deltaX = touch.clientX - startX.current;
+    const deltaY = touch.clientY - startY.current;
+
+    const krpano = window.ReactKrpanoActionProxy;
+    if (krpano) {
+      const currentHlookat = krpano.get("view.hlookat");
+      const currentVlookat = krpano.get("view.vlookat");
+
+      const newHlookat = currentHlookat - deltaY * 0.1;
+      const newVlookat = currentVlookat + deltaX * 0.1;
+
+      krpano.set("view.hlookat", newHlookat);
+      krpano.set("view.vlookat", newVlookat);
+    }
+
+    startX.current = touch.clientX;
+    startY.current = touch.clientY;
+  };
+
+  return (
+    <div className="demo">
+      <div onTouchStart={handleTouchStart} onTouchMove={handleTouchMove}>
+        <Krpano
+          className="krpano"
+          currentScene="center"
+          littlePlanetIntro={true}
+          passQueryParameters={true}
+        >
+          <Control usercontrol="off" />
+
+          <Scene
+            name="center"
+            previewUrl={URL + "/panos/center1.tiles/preview.jpg"}
+            imageTagAttributes={{
+              type: "cube",
+              tileSize: 512,
+              multires: true,
+            }}
+            images={[
+              {
+                tiledImageWidth: 2624,
+                tiledImageHeight: 2624,
+                url: URL + "/panos/center1.tiles/%s/l3/%v/l3_%s_%v_%h.jpg",
+              },
+              {
+                tiledImageWidth: 1280,
+                tiledImageHeight: 1280,
+                url: URL + "/panos/center1.tiles/%s/l2/%v/l2_%s_%v_%h.jpg",
+              },
+              {
+                tiledImageWidth: 640,
+                tiledImageHeight: 640,
+                url: URL + "/panos/center1.tiles/%s/l1/%v/l1_%s_%v_%h.jpg",
+              },
+            ]}
+          >
+            <View
+              hlookat={0}
+              vlookat={0}
+              fovType="DFOV"
+              fov={120}
+              fovMin={90}
+              fovMax={140}
+            />
+          </Scene>
+        </Krpano>
+      </div>
+    </div>
+  );
+};
+```
+
+### API
+
+<API hideTitle exports='["Control"]' src='@dage/krpano/index.d.ts'></API>

packages/docs/docs/krpano/hotspot/index.md

@@ -88,7 +88,6 @@ export default () => {
               edge="top"
               bg={false}
               distorted={true}
-              draggble={true}
               onDown="draggable_hotspot()"
             >
               <div className="hotspot">

packages/docs/docs/krpano/video-scene/index.md

@@ -53,15 +53,23 @@ export default observer(() => {
       );
     }
 
-    videoSceneModel.event.on("Event.videoScene.ready", () => {
-      message.success("视频准备就绪");
-    });
+    const readyEvent = videoSceneModel.event.on(
+      "Event.videoScene.ready",
+      () => {
+        message.success("视频准备就绪");
+      }
+    );
 
     document.addEventListener(
       "WeixinJSBridgeReady",
       wechatJSReadyHandler,
       false
     );
+
+    return () => {
+      // 记得清理监听事件
+      readyEvent();
+    };
   }, []);
 
   return (

packages/docs/docs/log/KRPANO_CHANGELOG.md

@@ -1,5 +1,12 @@
 # @dage/krpano
 
+## 2.5.0
+
+### Minor Changes
+
+- feat: Control
+  fix: 开启小行星视角没有恢复用户控制
+
 ## 2.4.1
 
 ### Patch Changes

packages/krpano/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @dage/krpano
 
+## 2.5.0
+
+### Minor Changes
+
+- feat: Control
+  fix: 开启小行星视角没有恢复用户控制
+
 ## 2.4.1
 
 ### Patch Changes

packages/krpano/package.json

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

packages/krpano/src/components/Control.tsx

@@ -0,0 +1,45 @@
+import { FC, useContext, useEffect } from "react";
+import { KrpanoRendererContext } from "../contexts";
+
+/**
+ * @see https://krpano.com/docu/xml/#control
+ */
+export interface ControlProps {
+  /**
+   * 控制方式
+   * @default 'moveto'
+   */
+  mode?: "drag" | "follow" | "moveto";
+  /**
+   * 控制用户是否可以交互
+   * @default 'all'
+   */
+  usercontrol?: "all" | "mouse" | "keyb" | "off";
+  /**
+   * 是否反转控制方向
+   * @default false
+   */
+  invert?: boolean;
+  [key: string]: unknown;
+}
+
+export const DEFAULT_CONTROL_PROPS: ControlProps = {
+  mode: "drag",
+  usercontrol: "all",
+  invert: false,
+};
+
+export const Control: FC<ControlProps> = (props) => {
+  const renderer = useContext(KrpanoRendererContext);
+
+  useEffect(() => {
+    if (!renderer) return;
+
+    renderer.tagAction.pushSyncTag(
+      "control",
+      Object.assign({} as any, DEFAULT_CONTROL_PROPS, props)
+    );
+  }, [renderer]);
+
+  return <div className="control" />;
+};

packages/krpano/src/components/HotSpot.tsx

@@ -56,7 +56,7 @@ export interface HotspotProps {
   onOver?: EventCallback;
   onHover?: EventCallback;
   onOut?: EventCallback;
-  onDown?: EventCallback;
+  onDown?: EventCallback | string;
   onUp?: EventCallback;
   onClick?: EventCallback;
   onLoaded?: EventCallback;

packages/krpano/src/components/Krpano.tsx

@@ -165,6 +165,7 @@ export const Krpano: React.FC<KrpanoProps> = ({
             copy(lp_fov, view.fov);
             copy(lp_fovmax, view.fovmax);
             copy(lp_limitview, view.limitview);
+            copy(lp_usercontrol, control.usercontrol);
             set(view.fovmax, 170);
             set(view.limitview, lookto);
             set(view.vlookatmin, 90);
@@ -179,7 +180,7 @@ export const Krpano: React.FC<KrpanoProps> = ({
                   set(view.vlookatmax, null);
                   tween(view.hlookat|view.vlookat|view.fov|view.distortion, calc('' + lp_hlookat + '|' + lp_vlookat + '|' + lp_fov + '|' + 0.0),
                     3.0, easeOutQuad,
-                    set(control.usercontrol, all);
+                    set(control.usercontrol, get(lp_usercontrol));
                     tween(view.fovmax, get(lp_fovmax));
                     );
                   );

packages/krpano/src/components/index.ts

@@ -9,3 +9,4 @@ export * from "./Include";
 export * from "./Plugin";
 export * from "./Layer";
 export * from "./VideoScene";
+export * from "./Control";

packages/krpano/src/hooks/index.ts

@@ -1,2 +1,2 @@
-export * from "./useEventCallback";
-export * from "./useCreate";
+export * from "./useEventCallback";
+export * from "./useMounted";

packages/krpano/src/types.ts

@@ -6,6 +6,7 @@ declare global {
       version: string;
     };
     embedpano?: (config: IKrpanoConfig) => void;
+    removepano?: (target: string) => void;
     /**
      * 开启 dev 模式，在拖动热点时会调用此事件
      */