zh-chxs-pano/src/App.tsx

import { useState, useMemo, useCallback, useEffect } from "react";
import classNames from "classnames";
import {
  HotSpot,
  Krpano,
  ROTATE_DIRECTION,
  Scene,
  View,
  ZOOM_ACTION,
} from "@dage/krpano";
import useUrlState from "@ahooksjs/use-url-state";
import { useNavigate } from "react-router";
import { MouseHoldView, SceneList } from "./components";
import { ISceneProps } from "./utils";
import "./App.scss";

enum SCENE_NAME {
  HOME = "1",
  SCENE_1 = "2",
}

function App() {
  const navigate = useNavigate();
  const [state, setState] = useUrlState({ scene: SCENE_NAME.HOME });
  const [menuVisible, setMenuVisible] = useState(false);
  const [fullScreen, setFullScreen] = useState(false);
  const [toolbarVisible, setToolbarVisible] = useState(true);
  const [currentScene, setCurrentScene] = useState(state.scene);
  const [hasPreviousPage, setHasPreviousPage] = useState(false);
  const isHome = useMemo(
    () => currentScene === SCENE_NAME.HOME,
    [currentScene]
  );

  useEffect(() => {
    if (window.history.length > 1) {
      setHasPreviousPage(true);
    }
  }, [isHome]);

  const handleScene = useCallback(
    (scene: SCENE_NAME) => {
      setCurrentScene(scene);
      setState({
        scene,
      });
    },
    [setState]
  );

  useEffect(() => {
    if (state.scene !== currentScene) {
      handleScene(state.scene);
    }
  }, [state, currentScene, handleScene]);

  const goToScene = (m: string) => {
    window.location.href = `https://houseoss.4dkankan.com/project/ZHCHXS/scene/index.html#/?m=${m}&showBack=1`;
  };

  const SCENE_LIST = useMemo<ISceneProps[]>(
    () => [
      {
        name: "1",
        title: "翠湖香山1",
        thumbUrl: process.env.PUBLIC_URL + "/panos/1.tiles/thumb.jpg",
        previewUrl: process.env.PUBLIC_URL + "/panos/1.tiles/preview.jpg",
        imageTagAttributes: {
          type: "cube",
          tileSize: 512,
          multires: true,
        },
        images: [
          {
            tiledImageWidth: 4608,
            tiledImageHeight: 4608,
            url:
              process.env.PUBLIC_URL +
              "/panos/1.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg",
          },
          {
            tiledImageWidth: 2304,
            tiledImageHeight: 2304,
            url:
              process.env.PUBLIC_URL +
              "/panos/1.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg",
          },
          {
            tiledImageWidth: 1152,
            tiledImageHeight: 1152,
            url:
              process.env.PUBLIC_URL +
              "/panos/1.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg",
          },
        ],
        children: (
          <>
            <View
              hlookat={10}
              vlookat={20}
              hlookatMin={-190}
              hlookatMax={85}
              vlookatMin={-70}
              vlookatMax={80}
              fovType="MFOV"
              fov={120}
              maxPixelZoom={2}
              fovMin={70}
              fovMax={140}
              limitView="range"
            />

            <HotSpot
              name="hotspot1"
              type="text"
              atv={6}
              ath={-1}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-XW4mfRey6mK")}
            >
              <div className="hotspot-item">
                <p>香园</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot2"
              type="text"
              atv={-3}
              ath={23.5}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-5iy1XKL3pYu")}
            >
              <div className="hotspot-item">
                <p style={{ letterSpacing: 2, fontSize: 16 }}>
                  留香苑传统中式合院别墅<span>(</span>B2<span>)</span>
                </p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot3"
              type="text"
              atv={-13}
              ath={19}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-vrMFXRis6MK")}
            >
              <div className="hotspot-item">
                <p>留香苑AB区归家大堂</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot4"
              type="text"
              atv={-18}
              ath={28}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-WqBcApJJRfd")}
            >
              <div className="hotspot-item">
                <p>留香苑C区归家大堂</p>
              </div>
            </HotSpot>
          </>
        ),
      },
      {
        name: "2",
        title: "翠湖香山2",
        thumbUrl: process.env.PUBLIC_URL + "/panos/2.tiles/thumb.jpg",
        previewUrl: process.env.PUBLIC_URL + "/panos/2.tiles/preview.jpg",
        imageTagAttributes: {
          type: "cube",
          tileSize: 512,
          multires: true,
        },
        images: [
          {
            tiledImageWidth: 4608,
            tiledImageHeight: 4608,
            url:
              process.env.PUBLIC_URL +
              "/panos/2.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg",
          },
          {
            tiledImageWidth: 2304,
            tiledImageHeight: 2304,
            url:
              process.env.PUBLIC_URL +
              "/panos/2.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg",
          },
          {
            tiledImageWidth: 1152,
            tiledImageHeight: 1152,
            url:
              process.env.PUBLIC_URL +
              "/panos/2.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg",
          },
        ],
        children: (
          <>
            <View
              hlookat={0}
              vlookat={20}
              fovType="MFOV"
              fov={120}
              maxPixelZoom={2}
              fovMin={70}
              fovMax={140}
              vlookatMin={-70}
              limitView="range"
            />

            <HotSpot
              name="hotspot1"
              type="text"
              atv={-10}
              ath={-46}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-XW4mfRey6mK")}
            >
              <div className="hotspot-item">
                <p>香园</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot2"
              type="text"
              atv={1}
              ath={-40.5}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-5iy1XKL3pYu")}
            >
              <div className="hotspot-item">
                <p style={{ letterSpacing: 2, fontSize: 16 }}>
                  留香苑传统中式合院别墅<span>(</span>B2<span>)</span>
                </p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot3"
              type="text"
              atv={14}
              ath={3}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-vrMFXRis6MK")}
            >
              <div className="hotspot-item">
                <p>留香苑AB区归家大堂</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot4"
              type="text"
              atv={-4}
              ath={116}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-WqBcApJJRfd")}
            >
              <div className="hotspot-item">
                <p>留香苑C区归家大堂</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot5"
              type="text"
              atv={-18}
              ath={-30}
              scale={0.4}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
            >
              <div className="hotspot-item">
                <p>翠湖高尔夫</p>
              </div>
            </HotSpot>
          </>
        ),
      },
      {
        name: "3",
        title: "翠湖香山3",
        thumbUrl: process.env.PUBLIC_URL + "/panos/3.tiles/thumb.jpg",
        previewUrl: process.env.PUBLIC_URL + "/panos/3.tiles/preview.jpg",
        imageTagAttributes: {
          type: "cube",
          tileSize: 512,
          multires: true,
        },
        images: [
          {
            tiledImageWidth: 4608,
            tiledImageHeight: 4608,
            url:
              process.env.PUBLIC_URL +
              "/panos/3.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg",
          },
          {
            tiledImageWidth: 2304,
            tiledImageHeight: 2304,
            url:
              process.env.PUBLIC_URL +
              "/panos/3.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg",
          },
          {
            tiledImageWidth: 1152,
            tiledImageHeight: 1152,
            url:
              process.env.PUBLIC_URL +
              "/panos/3.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg",
          },
        ],
        children: (
          <>
            <View
              hlookat={200}
              vlookat={50}
              fovType="MFOV"
              fov={120}
              maxPixelZoom={2}
              fovMin={70}
              fovMax={140}
              vlookatMin={-70}
              limitView="range"
            />

            <HotSpot
              name="hotspot1"
              type="text"
              atv={-1}
              ath={260}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-XW4mfRey6mK")}
            >
              <div className="hotspot-item">
                <p>香园</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot2"
              type="text"
              atv={7}
              ath={240}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-5iy1XKL3pYu")}
            >
              <div className="hotspot-item">
                <p style={{ letterSpacing: 2, fontSize: 16 }}>
                  留香苑传统中式合院别墅<span>(</span>B2<span>)</span>
                </p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot3"
              type="text"
              atv={21}
              ath={176}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-vrMFXRis6MK")}
            >
              <div className="hotspot-item">
                <p>留香苑AB区归家大堂</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot4"
              type="text"
              atv={-11}
              ath={142}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-WqBcApJJRfd")}
            >
              <div className="hotspot-item">
                <p>留香苑C区归家大堂</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot5"
              type="text"
              atv={-17}
              ath={-40}
              scale={0.4}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
            >
              <div className="hotspot-item">
                <p>翠湖高尔夫</p>
              </div>
            </HotSpot>
          </>
        ),
      },
      {
        name: "4",
        title: "翠湖香山4",
        thumbUrl: process.env.PUBLIC_URL + "/panos/4.tiles/thumb.jpg",
        previewUrl: process.env.PUBLIC_URL + "/panos/4.tiles/preview.jpg",
        imageTagAttributes: {
          type: "cube",
          tileSize: 512,
          multires: true,
        },
        images: [
          {
            tiledImageWidth: 4608,
            tiledImageHeight: 4608,
            url:
              process.env.PUBLIC_URL +
              "/panos/4.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg",
          },
          {
            tiledImageWidth: 2304,
            tiledImageHeight: 2304,
            url:
              process.env.PUBLIC_URL +
              "/panos/4.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg",
          },
          {
            tiledImageWidth: 1152,
            tiledImageHeight: 1152,
            url:
              process.env.PUBLIC_URL +
              "/panos/4.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg",
          },
        ],
        children: (
          <>
            <View
              hlookat={-20}
              vlookat={2}
              fovType="MFOV"
              fov={110}
              maxPixelZoom={2}
              fovMin={70}
              fovMax={140}
              vlookatMin={-70}
              limitView="range"
            />

            <HotSpot
              name="hotspot1"
              type="text"
              atv={-12.5}
              ath={0}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-XW4mfRey6mK")}
            >
              <div className="hotspot-item">
                <p>香园</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot2"
              type="text"
              atv={-11}
              ath={-13}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-5iy1XKL3pYu")}
            >
              <div className="hotspot-item">
                <p style={{ letterSpacing: 2, fontSize: 16 }}>
                  留香苑传统中式合院别墅<span>(</span>B2<span>)</span>
                </p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot3"
              type="text"
              atv={-10}
              ath={-37}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-vrMFXRis6MK")}
            >
              <div className="hotspot-item">
                <p>留香苑AB区归家大堂</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot4"
              type="text"
              atv={-5}
              ath={-63}
              scale={0.3}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-WqBcApJJRfd")}
            >
              <div className="hotspot-item">
                <p>留香苑C区归家大堂</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot5"
              type="text"
              atv={-16}
              ath={79}
              scale={0.4}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
            >
              <div className="hotspot-item">
                <p>翠湖高尔夫</p>
              </div>
            </HotSpot>
          </>
        ),
      },
      {
        name: "5",
        title: "翠湖香山5",
        thumbUrl: process.env.PUBLIC_URL + "/panos/5.tiles/thumb.jpg",
        previewUrl: process.env.PUBLIC_URL + "/panos/5.tiles/preview.jpg",
        imageTagAttributes: {
          type: "cube",
          tileSize: 512,
          multires: true,
        },
        images: [
          {
            tiledImageWidth: 4608,
            tiledImageHeight: 4608,
            url:
              process.env.PUBLIC_URL +
              "/panos/5.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg",
          },
          {
            tiledImageWidth: 2304,
            tiledImageHeight: 2304,
            url:
              process.env.PUBLIC_URL +
              "/panos/5.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg",
          },
          {
            tiledImageWidth: 1152,
            tiledImageHeight: 1152,
            url:
              process.env.PUBLIC_URL +
              "/panos/5.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg",
          },
        ],
        children: (
          <>
            <View
              hlookat={154}
              vlookat={0}
              fovType="MFOV"
              fov={120}
              maxPixelZoom={2}
              fovMin={70}
              fovMax={140}
              vlookatMin={-70}
              limitView="range"
            />

            <HotSpot
              name="hotspot1"
              type="text"
              atv={-14}
              ath={164}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-XW4mfRey6mK")}
            >
              <div className="hotspot-item">
                <p>香园</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot2"
              type="text"
              atv={-8}
              ath={156}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-5iy1XKL3pYu")}
            >
              <div className="hotspot-item">
                <p style={{ letterSpacing: 2, fontSize: 16 }}>
                  留香苑传统中式合院别墅<span>(</span>B2<span>)</span>
                </p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot3"
              type="text"
              atv={8}
              ath={150}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-vrMFXRis6MK")}
            >
              <div className="hotspot-item">
                <p>留香苑AB区归家大堂</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot4"
              type="text"
              atv={-5}
              ath={50}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-WqBcApJJRfd")}
            >
              <div className="hotspot-item">
                <p>留香苑C区归家大堂</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot5"
              type="text"
              atv={-19}
              ath={200}
              scale={0.4}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
            >
              <div className="hotspot-item">
                <p>翠湖高尔夫</p>
              </div>
            </HotSpot>
          </>
        ),
      },
      {
        name: "6",
        title: "翠湖香山6",
        thumbUrl: process.env.PUBLIC_URL + "/panos/6.tiles/thumb.jpg",
        previewUrl: process.env.PUBLIC_URL + "/panos/6.tiles/preview.jpg",
        imageTagAttributes: {
          type: "cube",
          tileSize: 512,
          multires: true,
        },
        images: [
          {
            tiledImageWidth: 4608,
            tiledImageHeight: 4608,
            url:
              process.env.PUBLIC_URL +
              "/panos/6.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg",
          },
          {
            tiledImageWidth: 2304,
            tiledImageHeight: 2304,
            url:
              process.env.PUBLIC_URL +
              "/panos/6.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg",
          },
          {
            tiledImageWidth: 1152,
            tiledImageHeight: 1152,
            url:
              process.env.PUBLIC_URL +
              "/panos/6.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg",
          },
        ],
        children: (
          <>
            <View
              hlookat={220}
              vlookat={20}
              fovType="MFOV"
              fov={120}
              maxPixelZoom={2}
              fovMin={70}
              fovMax={140}
              vlookatMin={-70}
              limitView="range"
            />

            <HotSpot
              name="hotspot5"
              type="text"
              atv={-19}
              ath={-125}
              scale={0.4}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
            >
              <div className="hotspot-item">
                <p>翠湖高尔夫</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot1"
              type="text"
              atv={-16}
              ath={217}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-XW4mfRey6mK")}
            >
              <div className="hotspot-item">
                <p>香园</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot2"
              type="text"
              atv={-12.5}
              ath={222}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-5iy1XKL3pYu")}
            >
              <div className="hotspot-item">
                <p style={{ letterSpacing: 2, fontSize: 16 }}>
                  留香苑传统中式合院别墅<span>(</span>B2<span>)</span>
                </p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot3"
              type="text"
              atv={-7}
              ath={235}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-vrMFXRis6MK")}
            >
              <div className="hotspot-item">
                <p>留香苑AB区归家大堂</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot4"
              type="text"
              atv={25}
              ath={-10}
              scale={0.7}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-WqBcApJJRfd")}
            >
              <div className="hotspot-item">
                <p>留香苑C区归家大堂</p>
              </div>
            </HotSpot>
          </>
        ),
      },
      {
        name: "7",
        title: "翠湖香山7",
        thumbUrl: process.env.PUBLIC_URL + "/panos/7.tiles/thumb.jpg",
        previewUrl: process.env.PUBLIC_URL + "/panos/7.tiles/preview.jpg",
        imageTagAttributes: {
          type: "cube",
          tileSize: 512,
          multires: true,
        },
        images: [
          {
            tiledImageWidth: 4608,
            tiledImageHeight: 4608,
            url:
              process.env.PUBLIC_URL +
              "/panos/7.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg",
          },
          {
            tiledImageWidth: 2304,
            tiledImageHeight: 2304,
            url:
              process.env.PUBLIC_URL +
              "/panos/7.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg",
          },
          {
            tiledImageWidth: 1152,
            tiledImageHeight: 1152,
            url:
              process.env.PUBLIC_URL +
              "/panos/7.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg",
          },
        ],
        children: (
          <>
            <View
              hlookat={-20}
              vlookat={0}
              fovType="MFOV"
              fov={120}
              maxPixelZoom={2}
              fovMin={70}
              fovMax={140}
              vlookatMin={-70}
              limitView="range"
            />

            <HotSpot
              name="hotspot5"
              type="text"
              atv={-19.5}
              ath={-32}
              scale={0.4}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
            >
              <div className="hotspot-item">
                <p>翠湖高尔夫</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot1"
              type="text"
              atv={-19.5}
              ath={-42}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-XW4mfRey6mK")}
            >
              <div className="hotspot-item">
                <p>香园</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot2"
              type="text"
              atv={-17.5}
              ath={-37}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-5iy1XKL3pYu")}
            >
              <div className="hotspot-item">
                <p style={{ letterSpacing: 2, fontSize: 16 }}>
                  留香苑传统中式合院别墅<span>(</span>B2<span>)</span>
                </p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot3"
              type="text"
              atv={-16}
              ath={-28}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-vrMFXRis6MK")}
            >
              <div className="hotspot-item">
                <p>留香苑AB区归家大堂</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot4"
              type="text"
              atv={-10}
              ath={-9}
              scale={0.7}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-WqBcApJJRfd")}
            >
              <div className="hotspot-item">
                <p>留香苑C区归家大堂</p>
              </div>
            </HotSpot>
          </>
        ),
      },
      {
        name: "8",
        title: "翠湖香山8",
        thumbUrl: process.env.PUBLIC_URL + "/panos/8.tiles/thumb.jpg",
        previewUrl: process.env.PUBLIC_URL + "/panos/8.tiles/preview.jpg",
        imageTagAttributes: {
          type: "cube",
          tileSize: 512,
          multires: true,
        },
        images: [
          {
            tiledImageWidth: 4608,
            tiledImageHeight: 4608,
            url:
              process.env.PUBLIC_URL +
              "/panos/8.tiles/%s/l3/%0v/l3_%s_%0v_%0h.jpg",
          },
          {
            tiledImageWidth: 2304,
            tiledImageHeight: 2304,
            url:
              process.env.PUBLIC_URL +
              "/panos/8.tiles/%s/l2/%0v/l2_%s_%0v_%0h.jpg",
          },
          {
            tiledImageWidth: 1152,
            tiledImageHeight: 1152,
            url:
              process.env.PUBLIC_URL +
              "/panos/8.tiles/%s/l1/%0v/l1_%s_%0v_%0h.jpg",
          },
        ],
        children: (
          <>
            <View
              hlookat={20}
              vlookat={10}
              fovType="MFOV"
              fov={120}
              maxPixelZoom={2}
              fovMin={70}
              fovMax={140}
              vlookatMin={-70}
              limitView="range"
            />

            <HotSpot
              name="hotspot1"
              type="text"
              atv={-18}
              ath={36.5}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-XW4mfRey6mK")}
            >
              <div className="hotspot-item">
                <p>香园</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot2"
              type="text"
              atv={-15.5}
              ath={31}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-5iy1XKL3pYu")}
            >
              <div className="hotspot-item">
                <p style={{ letterSpacing: 2, fontSize: 16 }}>
                  留香苑传统中式合院别墅<span>(</span>B2<span>)</span>
                </p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot3"
              type="text"
              atv={-12}
              ath={42}
              scale={0.5}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-vrMFXRis6MK")}
            >
              <div className="hotspot-item">
                <p>留香苑AB区归家大堂</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot4"
              type="text"
              atv={10}
              ath={7}
              scale={0.7}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
              onClick={goToScene.bind(undefined, "KJ-WqBcApJJRfd")}
            >
              <div className="hotspot-item">
                <p>留香苑C区归家大堂</p>
              </div>
            </HotSpot>

            <HotSpot
              name="hotspot5"
              type="text"
              atv={-19.5}
              ath={55}
              scale={0.4}
              edge="top"
              bg={false}
              distorted={true}
              onOver={() => {}}
              onOut={() => {}}
            >
              <div className="hotspot-item">
                <p>翠湖高尔夫</p>
              </div>
            </HotSpot>
          </>
        ),
      },
    ],
    []
  );

  const handleView = (direction: ROTATE_DIRECTION) => {
    window.ReactKrpanoActionProxy?.rotateView(direction);
  };

  const handleZoom = (action: ZOOM_ACTION) => {
    window.ReactKrpanoActionProxy?.zoomView(action);
  };

  return (
    <div className="App">
      <Krpano
        className="container"
        currentScene={currentScene}
        littlePlanetIntro={isHome}
      >
        {SCENE_LIST.map(
          (sc) => sc.imageTagAttributes && <Scene key={sc.name} {...sc} />
        )}
      </Krpano>

      {hasPreviousPage && !isHome && (
        <div className="back" onClick={() => navigate(-1)} />
      )}

      <div className={classNames("toolbar", { active: toolbarVisible })}>
        <SceneList
          visible={menuVisible}
          className={classNames({ active: menuVisible })}
          currentScene={currentScene}
          list={SCENE_LIST}
          handleScene={handleScene}
        />

        <div
          className="menu toolbar__btn"
          onClick={() => setMenuVisible(!menuVisible)}
        />

        <div className="toolbar__main">
          <div className="toolbar__group">
            <MouseHoldView
              onHold={handleView.bind(undefined, ROTATE_DIRECTION.LEFT)}
            >
              <div className="toolbar__btn left" />
            </MouseHoldView>
            <MouseHoldView
              onHold={handleView.bind(undefined, ROTATE_DIRECTION.RIGHT)}
            >
              <div className="toolbar__btn right" />
            </MouseHoldView>
          </div>
          <div className="toolbar__group">
            <MouseHoldView
              onHold={handleView.bind(undefined, ROTATE_DIRECTION.UP)}
            >
              <div className="toolbar__btn top" />
            </MouseHoldView>
            <MouseHoldView
              onHold={handleView.bind(undefined, ROTATE_DIRECTION.DOWN)}
            >
              <div className="toolbar__btn bottom" />
            </MouseHoldView>
          </div>
          <div className="toolbar__group">
            <MouseHoldView onHold={handleZoom.bind(undefined, ZOOM_ACTION.IN)}>
              <div className="toolbar__btn plus" />
            </MouseHoldView>
            <MouseHoldView onHold={handleZoom.bind(undefined, ZOOM_ACTION.OUT)}>
              <div className="toolbar__btn minus" />
            </MouseHoldView>
          </div>
        </div>

        <div className="toolbar__right">
          {document.fullscreenEnabled && (
            <div
              className={classNames("fullscreen toolbar__btn", {
                exit: fullScreen,
              })}
              onClick={async () => {
                if (fullScreen) {
                  await document.exitFullscreen();
                } else {
                  await document.getElementById("root")?.requestFullscreen();
                }
                setFullScreen(!fullScreen);
              }}
            />
          )}
          <div
            className="hide toolbar__btn"
            onClick={() => {
              setMenuVisible(false);
              setToolbarVisible(false);
            }}
          />
        </div>
      </div>

      <div className="toolbar2">
        {!isHome && (
          <div
            className="home"
            onClick={() => setState({ scene: SCENE_NAME.HOME })}
          />
        )}
        {/* <div className="music" /> */}
      </div>

      <div
        className={classNames("show-toolbar", { active: !toolbarVisible })}
        onClick={() => setToolbarVisible(true)}
      />
    </div>
  );
}

export default App;