useScreenSpaceEventHandler

Use Cesium's ScreenSpaceEventHandler in a Vue-friendly way.

The handler is recreated when the canvas or tracked inputs change, and it is destroyed automatically when the component scope is disposed.

Usage

<script setup lang="ts">
import * as Cesium from 'cesium';
import { useScreenSpaceEventHandler } from 'vesium';
import { ref } from 'vue';

const coord = ref<Record<any, any>>({});

Object.values(Cesium.ScreenSpaceEventType).forEach((type: any) => {
  useScreenSpaceEventHandler(type, (ctx: any) => coord.value[type] = JSON.stringify(ctx));
});
</script>

<template>
  <div
    w="200px"
    bg="[var(--vp-c-bg)]"
    p="10px"
    flex="~ col gap-5px"
  >
    <span v-for="(value, key) in Cesium.ScreenSpaceEventType" :key="key">
      {{ key }} : {{ coord[value] || '--' }}
    </span>
  </div>
</template>

const stop = useScreenSpaceEventHandler(
  Cesium.ScreenSpaceEventType.LEFT_CLICK,
  (event) => {
    console.log(event.position);
  },
  {
    modifier: Cesium.KeyboardEventModifier.SHIFT,
    isActive: true,
  },
);

// later
stop();

Notes

• The composable returns a stop function, so calling it tears down the current handler immediately.
• isActive pauses listener registration without forcing a full recreation.
• modifier is forwarded to Cesium's keyboard modifier argument.

Type Definitions

import type { KeyboardEventModifier, ScreenSpaceEventType } from 'cesium';
import type { MaybeRefOrGetter, WatchStopHandle } from 'vue';
import { ScreenSpaceEventHandler } from 'cesium';
export type ScreenSpaceEvent<T extends ScreenSpaceEventType> = {
    [ScreenSpaceEventType.LEFT_DOWN]: ScreenSpaceEventHandler.PositionedEvent;
    [ScreenSpaceEventType.LEFT_UP]: ScreenSpaceEventHandler.PositionedEvent;
    [ScreenSpaceEventType.LEFT_CLICK]: ScreenSpaceEventHandler.PositionedEvent;
    [ScreenSpaceEventType.LEFT_DOUBLE_CLICK]: ScreenSpaceEventHandler.PositionedEvent;
    [ScreenSpaceEventType.RIGHT_DOWN]: ScreenSpaceEventHandler.PositionedEvent;
    [ScreenSpaceEventType.RIGHT_UP]: ScreenSpaceEventHandler.PositionedEvent;
    [ScreenSpaceEventType.RIGHT_CLICK]: ScreenSpaceEventHandler.PositionedEvent;
    [ScreenSpaceEventType.MIDDLE_DOWN]: ScreenSpaceEventHandler.PositionedEvent;
    [ScreenSpaceEventType.MIDDLE_UP]: ScreenSpaceEventHandler.PositionedEvent;
    [ScreenSpaceEventType.MIDDLE_CLICK]: ScreenSpaceEventHandler.PositionedEvent;
    [ScreenSpaceEventType.MOUSE_MOVE]: ScreenSpaceEventHandler.MotionEvent;
    [ScreenSpaceEventType.WHEEL]: number;
    [ScreenSpaceEventType.PINCH_START]: ScreenSpaceEventHandler.TwoPointEvent;
    [ScreenSpaceEventType.PINCH_END]: ScreenSpaceEventHandler.TwoPointEvent;
    [ScreenSpaceEventType.PINCH_MOVE]: ScreenSpaceEventHandler.TwoPointMotionEvent;
}[T];
export interface UseScreenSpaceEventHandlerOptions {
    /**
     * Modifier key forwarded to Cesium.
     */
    modifier?: MaybeRefOrGetter<KeyboardEventModifier | undefined>;
    /**
     * Whether to activate the event listener without tearing down the composable.
     * @default true
     */
    isActive?: MaybeRefOrGetter<boolean>;
}
/**
 * Easily use the `ScreenSpaceEventHandler`,
 * when the dependent data changes or the component is unmounted,
 * the listener function will automatically reload or destroy.
 *
 * @param type Types of mouse event
 * @param inputAction Callback function for listening
 */
export declare function useScreenSpaceEventHandler<T extends ScreenSpaceEventType>(type?: MaybeRefOrGetter<T | undefined>, inputAction?: (event: ScreenSpaceEvent<T>) => any, options?: UseScreenSpaceEventHandlerOptions): WatchStopHandle;
//# sourceMappingURL=index.d.ts.map