123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- import { FC, useContext, useEffect } from "react";
- import { KrpanoRendererContext } from "../contexts/KrpanoRendererContext";
- import { EventCallback } from "../types";
- import { mapEventPropsToJSCall } from "../utils";
- /**
- * @see https://krpano.com/docu/xml/#events
- */
- export interface EventsConfig {
- /** 事件名,若存在该参数则为局部事件 */
- name?: string;
- keep?: boolean;
- onEnterFullscreen?: EventCallback;
- onExitFullscreen?: EventCallback;
- onXmlComplete?: EventCallback;
- onPreviewComplete?: EventCallback;
- onLoadComplete?: EventCallback;
- onBlendComplete?: EventCallback;
- onNewPano?: EventCallback;
- onRemovePano?: EventCallback;
- onNewScene?: EventCallback;
- onXmlError?: EventCallback;
- onLoadError?: EventCallback;
- onKeydown?: EventCallback;
- onKeyup?: EventCallback;
- onClick?: EventCallback;
- onSingleClick?: EventCallback;
- onDoubleClick?: EventCallback;
- onMousedown?: EventCallback;
- onMouseup?: EventCallback;
- onMousewheel?: EventCallback;
- onContextmenu?: EventCallback;
- onIdle?: EventCallback;
- onViewChange?: EventCallback;
- onViewChanged?: EventCallback;
- onResize?: EventCallback;
- onFrameBufferResize?: EventCallback;
- /**
- * 启动自动旋转时回调
- */
- onAutoRotateStart?: EventCallback;
- /**
- * 停止自动旋转时回调
- */
- onAutoRotateStop?: EventCallback;
- /**
- * 全景图完成一轮自动旋转时回调
- */
- onAutoRotateOneRound?: EventCallback;
- /**
- * 自动旋转状态发生改变时回调
- */
- onAutoRotateChange?: EventCallback;
- onIPhoneFullscreen?: EventCallback;
- }
- export interface EventsProps extends EventsConfig {}
- const GlobalEvents = "__GlobalEvents";
- export const Events: FC<EventsProps> = ({ name, keep, ...EventsAttrs }) => {
- const renderer = useContext(KrpanoRendererContext);
- const EventSelector = `events[${name || GlobalEvents}]`;
- // 在renderer上绑定回调
- useEffect(() => {
- renderer?.bindEvents(EventSelector, { ...EventsAttrs });
- return () => {
- renderer?.unbindEvents(EventSelector, { ...EventsAttrs });
- };
- }, [renderer, EventsAttrs]);
- // Krpano标签上添加js call,触发事件
- useEffect(() => {
- renderer?.setTag(
- "events",
- // 全局事件直接设置
- name || null,
- {
- ...mapEventPropsToJSCall(
- { ...EventsAttrs },
- (eventName) =>
- `js(${renderer.name}.fire(${eventName},${EventSelector}))`
- ),
- keep,
- },
- true
- );
- }, [name, renderer]);
- return <div className="events"></div>;
- };
|