resium/dist/resium.cjs.map

React components for Cesium

{"version":3,"file":"resium.cjs","sources":["../src/core/util.ts","../src/core/EventManager.ts","../src/core/context.ts","../src/core/CameraOperation.ts","../src/core/hooks.ts","../src/core/component.tsx","../src/core/PostProcessStage.ts","../src/Billboard/Billboard.ts","../src/BillboardCollection/BillboardCollection.ts","../src/BillboardGraphics/BillboardGraphics.ts","../src/BoxGraphics/BoxGraphics.ts","../src/Camera/Camera.ts","../src/CameraFlyHome/CameraFlyHome.ts","../src/CameraFlyTo/CameraFlyTo.ts","../src/CameraLookAt/CameraLookAt.ts","../src/CameraFlyToBoundingSphere/CameraFlyToBoundingSphere.ts","../src/Cesium3DTileset/Cesium3DTileset.ts","../src/Cesium3DTilesetGraphics/Cesium3DTilesetGraphics.ts","../src/CesiumWidget/CesiumWidget.ts","../src/ClassificationPrimitive/ClassificationPrimitive.ts","../src/Clock/Clock.ts","../src/CloudCollection/CloudCollection.ts","../src/CorridorGraphics/CorridorGraphics.ts","../src/CumulusCloud/CumulusCloud.ts","../src/CustomDataSource/CustomDataSource.ts","../src/CylinderGraphics/CylinderGraphics.ts","../src/CzmlDataSource/CzmlDataSource.ts","../src/EllipseGraphics/EllipseGraphics.ts","../src/EllipsoidGraphics/EllipsoidGraphics.ts","../src/Entity/Entity.ts","../node_modules/object-assign/index.js","../node_modules/scheduler/cjs/scheduler.production.min.js","../node_modules/scheduler/cjs/scheduler.development.js","../node_modules/scheduler/index.js","../node_modules/react-dom/cjs/react-dom.production.min.js","../node_modules/scheduler/cjs/scheduler-tracing.production.min.js","../node_modules/scheduler/cjs/scheduler-tracing.development.js","../node_modules/scheduler/tracing.js","../node_modules/react-dom/cjs/react-dom.development.js","../node_modules/react-dom/index.js","../src/Fog/Fog.ts","../src/GeoJsonDataSource/GeoJsonDataSource.ts","../src/Globe/Globe.ts","../src/GroundPolylinePrimitive/GroundPolylinePrimitive.ts","../src/GroundPrimitive/GroundPrimitive.ts","../src/GroundPrimitiveCollection/GroundPrimitiveCollection.ts","../src/ImageryLayer/ImageryLayer.ts","../src/ImageryLayerCollection/ImageryLayerCollection.ts","../src/KmlDataSource/KmlDataSource.ts","../src/Label/Label.ts","../src/LabelCollection/LabelCollection.ts","../src/LabelGraphics/LabelGraphics.ts","../src/Model/Model.ts","../src/ModelGraphics/ModelGraphics.ts","../src/Moon/Moon.ts","../src/ParticleSystem/ParticleSystem.ts","../src/PathGraphics/PathGraphics.ts","../src/PlaneGraphics/PlaneGraphics.ts","../src/PointGraphics/PointGraphics.ts","../src/PointPrimitive/PointPrimitive.ts","../src/PointPrimitiveCollection/PointPrimitiveCollection.ts","../src/PolygonGraphics/PolygonGraphics.ts","../src/Polyline/Polyline.ts","../src/PolylineCollection/PolylineCollection.ts","../src/PolylineGraphics/PolylineGraphics.ts","../src/PolylineVolumeGraphics/PolylineVolumeGraphics.ts","../src/PostProcessStage/PostProcessStage.ts","../src/PostProcessStage/BlackAndWhiteStage.ts","../src/PostProcessStage/BrightnessStage.ts","../src/PostProcessStage/LensFlareStage.ts","../src/PostProcessStage/Fxaa.ts","../src/PostProcessStage/NightVisionStage.ts","../src/PostProcessStageComposite/PostProcessStageComposite.ts","../src/PostProcessStageComposite/AmbientOcclusion.ts","../src/PostProcessStageComposite/Bloom.ts","../src/PostProcessStageComposite/BlurStage.ts","../src/PostProcessStageComposite/DepthOfFieldStage.ts","../src/PostProcessStageComposite/EdgeDetectionStage.ts","../src/PostProcessStageComposite/SilhouetteStage.ts","../src/Primitive/Primitive.ts","../src/RectangleGraphics/RectangleGraphics.ts","../src/Scene/Scene.ts","../src/ScreenSpaceCameraController/ScreenSpaceCameraController.ts","../src/ScreenSpaceEventHandler/ScreenSpaceEventHandler.ts","../src/ShadowMap/ShadowMap.ts","../src/SkyAtmosphere/SkyAtmosphere.ts","../src/SkyBox/SkyBox.ts","../src/Sun/Sun.ts","../src/TimeDynamicPointCloud/TimeDynamicPointCloud.ts","../src/Viewer/Viewer.ts","../src/WallGraphics/WallGraphics.ts","../src/EntityDescription/EntityDescription.ts","../src/ScreenSpaceEvent/ScreenSpaceEvent.ts","../src/core/withCesium.tsx"],"sourcesContent":["export function pick<T, K extends keyof T>(obj: T, keys?: K[]): Pick<T, K> {\n  if (!keys) return {} as Pick<T, K>;\n  return entries(obj).reduce((a, [k, v]) => {\n    if (!includes(keys, k)) return a;\n    (a as any)[k] = v;\n    return a;\n  }, {} as Pick<T, K>);\n}\n\nexport function entries<T>(obj: T): [keyof T, T[keyof T]][] {\n  return Object.keys(obj).map(k => [k, obj[k as keyof T]] as [keyof T, T[keyof T]]);\n}\n\nexport function includes<T>(array: readonly T[] | null | undefined, value: T) {\n  return !!array && array.indexOf(value) !== -1;\n}\n\nexport function shallowEquals<T>(a1: T | null | undefined, a2: T | null | undefined) {\n  return (\n    !!a1 &&\n    !!a2 &&\n    [...Object.keys(a1), ...Object.keys(a2)].every(k => a1[k as keyof T] === a2[k as keyof T])\n  );\n}\n\nexport type Destroyable = {\n  isDestroyed(): boolean;\n  destroy(): void;\n};\n\nexport function isDestroyable(d: any): d is Destroyable {\n  return d && typeof d.isDestroyed === \"function\" && typeof d.destroy === \"function\";\n}\n\nexport function isDestroyed(d: any) {\n  return isDestroyable(d) && d.isDestroyed();\n}\n","import {\n  ScreenSpaceEventType,\n  ScreenSpaceEventHandler,\n  Scene,\n  Cartesian2,\n  Primitive,\n  Entity,\n  PrimitiveCollection,\n  Cesium3DTileFeature,\n  PointPrimitiveCollection,\n  LabelCollection,\n  BillboardCollection,\n  PolylineCollection,\n  PointPrimitive,\n  Label,\n  Billboard,\n  Polyline,\n  TimeDynamicPointCloud,\n  ModelMesh,\n  ModelNode,\n  GroundPolylinePrimitive,\n  GroundPrimitive,\n} from \"cesium\";\n\nimport { entries, includes } from \"./util\";\n\nexport const eventManagerContextKey = \"__RESIUM_EVENT_MANAGER\";\n\nexport type EventType = keyof RootEventProps;\n\nexport type RootEventTarget =\n  | Cesium3DTileFeature\n  | {\n      collection?:\n        | PrimitiveCollection\n        | PointPrimitiveCollection\n        | LabelCollection\n        | BillboardCollection\n        | PolylineCollection;\n      id?: Entity | string;\n      mesh?: ModelMesh;\n      node?: ModelNode;\n      primitive?:\n        | Primitive\n        | PointPrimitive\n        | Label\n        | Billboard\n        | Polyline\n        | TimeDynamicPointCloud\n        | GroundPolylinePrimitive\n        | GroundPrimitive;\n    };\n\nexport type EventProps<T> = {\n  onClick?: (movement: CesiumMovementEvent, target: T) => void;\n  onDoubleClick?: (movement: CesiumMovementEvent, target: T) => void;\n  onMouseDown?: (movement: CesiumMovementEvent, target: T) => void;\n  onMouseUp?: (movement: CesiumMovementEvent, target: T) => void;\n  onMiddleClick?: (movement: CesiumMovementEvent, target: T) => void;\n  onMiddleDown?: (movement: CesiumMovementEvent, target: T) => void;\n  onMiddleUp?: (movement: CesiumMovementEvent, target: T) => void;\n  onMouseMove?: (movement: CesiumMovementEvent, target: T) => void;\n  onPinchEnd?: (movement: CesiumMovementEvent, target: T) => void;\n  onPinchMove?: (movement: CesiumMovementEvent, target: T) => void;\n  onPinchStart?: (movement: CesiumMovementEvent, target: T) => void;\n  onRightClick?: (movement: CesiumMovementEvent, target: T) => void;\n  onRightDown?: (movement: CesiumMovementEvent, target: T) => void;\n  onRightUp?: (movement: CesiumMovementEvent, target: T) => void;\n  onMouseEnter?: (movement: CesiumMovementEvent, target: T) => void;\n  onMouseLeave?: (movement: CesiumMovementEvent, target: T) => void;\n};\n\nexport type RootEventProps = EventProps<RootEventTarget> & {\n  onWheel?: (delta: number) => void;\n};\n\ntype EventMap<T> = { [k in EventType]: T };\n\nexport type CesiumMovementEvent = {\n  position?: Cartesian2;\n  startPosition?: Cartesian2;\n  endPosition?: Cartesian2;\n};\n\nexport type Callback<T = any> = (e: CesiumMovementEvent, source: T) => void;\n\nexport const eventNames: EventType[] = [\n  \"onClick\",\n  \"onDoubleClick\",\n  \"onMouseDown\",\n  \"onMouseUp\",\n  \"onMiddleClick\",\n  \"onMiddleDown\",\n  \"onMiddleUp\",\n  \"onMouseMove\",\n  \"onPinchEnd\",\n  \"onPinchMove\",\n  \"onPinchStart\",\n  \"onRightClick\",\n  \"onRightDown\",\n  \"onRightUp\",\n  \"onWheel\",\n  \"onMouseEnter\",\n  \"onMouseLeave\",\n];\n\nexport class EventManager {\n  private static eventTypeMap: EventMap<ScreenSpaceEventType> = {\n    onClick: ScreenSpaceEventType.LEFT_CLICK,\n    onDoubleClick: ScreenSpaceEventType.LEFT_DOUBLE_CLICK,\n    onMouseDown: ScreenSpaceEventType.LEFT_DOWN,\n    onMouseUp: ScreenSpaceEventType.LEFT_UP,\n    onMiddleClick: ScreenSpaceEventType.MIDDLE_CLICK,\n    onMiddleDown: ScreenSpaceEventType.MIDDLE_DOWN,\n    onMiddleUp: ScreenSpaceEventType.MIDDLE_UP,\n    onMouseMove: ScreenSpaceEventType.MOUSE_MOVE,\n    onPinchEnd: ScreenSpaceEventType.PINCH_END,\n    onPinchMove: ScreenSpaceEventType.PINCH_MOVE,\n    onPinchStart: ScreenSpaceEventType.PINCH_START,\n    onRightClick: ScreenSpaceEventType.RIGHT_CLICK,\n    onRightDown: ScreenSpaceEventType.RIGHT_DOWN,\n    onRightUp: ScreenSpaceEventType.RIGHT_UP,\n    onWheel: ScreenSpaceEventType.WHEEL,\n    onMouseEnter: ScreenSpaceEventType.MOUSE_MOVE,\n    onMouseLeave: ScreenSpaceEventType.MOUSE_MOVE,\n  };\n\n  private scene: Scene | undefined;\n  private sshe: ScreenSpaceEventHandler;\n  private events: EventMap<Map<any, Callback>> = {\n    onClick: new Map(),\n    onDoubleClick: new Map(),\n    onMouseDown: new Map(),\n    onMouseUp: new Map(),\n    onMiddleClick: new Map(),\n    onMiddleDown: new Map(),\n    onMiddleUp: new Map(),\n    onMouseMove: new Map(),\n    onPinchEnd: new Map(),\n    onPinchMove: new Map(),\n    onPinchStart: new Map(),\n    onRightClick: new Map(),\n    onRightDown: new Map(),\n    onRightUp: new Map(),\n    onWheel: new Map(),\n    onMouseEnter: new Map(),\n    onMouseLeave: new Map(),\n  };\n  private hovered: any = undefined;\n\n  public constructor(scene?: Scene) {\n    this.scene = scene;\n    this.sshe = new ScreenSpaceEventHandler(scene?.canvas);\n  }\n\n  public destroy() {\n    this.hovered = undefined;\n    if (!this.sshe.isDestroyed()) {\n      this.sshe.destroy();\n    }\n  }\n\n  public isDestroyed() {\n    return this.sshe.isDestroyed();\n  }\n\n  public on(element: any, type: EventType, cb: Callback) {\n    if (element && type === \"onWheel\") return;\n    this.events[type].set(element, cb);\n  }\n\n  public off(element: any, type: EventType) {\n    this.events[type].delete(element);\n    if (this.hovered === element) {\n      this.hovered = undefined;\n    }\n  }\n\n  public setEvents(element: any, props: any) {\n    entries(props).forEach(([k, v]) => {\n      const et = k as EventType;\n      if (includes(eventNames, et)) {\n        if (v) {\n          this.on(element, et, v);\n        } else {\n          this.off(element, et);\n        }\n      }\n    });\n    this.commit();\n  }\n\n  public clearEvents(element: any) {\n    this.hovered = undefined;\n    eventNames.forEach(et => {\n      this.off(element, et);\n    });\n    this.commit();\n  }\n\n  public commit() {\n    const sshe = this.sshe;\n    const destroyed = this.sshe.isDestroyed();\n\n    if (!destroyed) {\n      if (\n        this.events.onMouseEnter.size === 0 &&\n        this.events.onMouseLeave.size === 0 &&\n        this.events.onMouseMove.size === 0\n      ) {\n        this.sshe.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE);\n      } else if (!this.sshe.getInputAction(ScreenSpaceEventType.MOUSE_MOVE)) {\n        this.sshe.setInputAction(this.onMouseMove, ScreenSpaceEventType.MOUSE_MOVE);\n      }\n    }\n\n    entries(this.events).forEach(([et, m]) => {\n      if (et === \"onMouseEnter\" || et === \"onMouseLeave\" || et === \"onMouseMove\") {\n        return;\n      }\n\n      const cesiumEventType = EventManager.eventTypeMap[et];\n\n      if (!destroyed) {\n        if (m.size === 0) {\n          sshe.removeInputAction(cesiumEventType);\n        } else if (!sshe.getInputAction(cesiumEventType)) {\n          sshe.setInputAction(this.eventCallback(et), cesiumEventType);\n        }\n      }\n    });\n  }\n\n  public getScreenSpaceEventHandler() {\n    return this.sshe;\n  }\n\n  private getEventCallback(type: EventType, picked: any) {\n    return picked === null\n      ? this.events[type].get(null)\n      : this.events[type].get(picked.id) || // Entity\n          this.events[type].get(picked.id?.entityCollection?.owner) || // Entity in DataSource\n          this.events[type].get(picked.primitive) || // Primitive\n          this.events[type].get(picked.tileset); // Cesium3DTileFeature\n  }\n\n  private onMouseMove = (e: CesiumMovementEvent) => {\n    const picked = this.pick(e.endPosition);\n\n    if (this.hovered !== picked) {\n      if (this.hovered) {\n        this.getEventCallback(\"onMouseLeave\", this.hovered)?.(e, this.hovered);\n        this.getEventCallback(\"onMouseLeave\", null)?.(e, this.hovered);\n      }\n\n      if (picked) {\n        this.getEventCallback(\"onMouseEnter\", picked)?.(e, picked);\n        this.getEventCallback(\"onMouseEnter\", null)?.(e, picked);\n      }\n    }\n\n    if (picked) {\n      this.getEventCallback(\"onMouseMove\", picked)?.(e, picked);\n    }\n    this.getEventCallback(\"onMouseMove\", null)?.(e, picked);\n\n    this.hovered = picked;\n  };\n\n  private eventCallback = (et: EventType) => {\n    return (e: any) => {\n      const picked = this.pick(e?.position);\n      if (picked) {\n        this.getEventCallback(et, picked)?.(e, picked);\n      }\n      this.getEventCallback(et, null)?.(e, picked);\n    };\n  };\n\n  private pick(pos?: Cartesian2): any | undefined {\n    if (!pos) return undefined;\n    return this.scene?.pick(pos);\n  }\n}\n\nexport default EventManager;\n","import { createContext, useContext } from \"react\";\nimport {\n  Viewer,\n  CesiumWidget,\n  Scene,\n  Globe,\n  Camera,\n  ScreenSpaceEventHandler,\n  Entity,\n  DataSourceCollection,\n  DataSource,\n  EntityCollection,\n  ImageryLayerCollection,\n  PrimitiveCollection,\n  BillboardCollection,\n  LabelCollection,\n  PolylineCollection,\n  PointPrimitiveCollection,\n  CloudCollection,\n} from \"cesium\";\nimport EventManager, { eventManagerContextKey } from \"./EventManager\";\n\nexport type Context = {\n  viewer?: Viewer;\n  cesiumWidget?: CesiumWidget;\n  scene?: Scene;\n  globe?: Globe;\n  camera?: Camera;\n  screenSpaceEventHandler?: ScreenSpaceEventHandler;\n  entity?: Entity;\n  dataSourceCollection?: DataSourceCollection;\n  dataSource?: DataSource;\n  entityCollection?: EntityCollection;\n  imageryLayerCollection?: ImageryLayerCollection;\n  primitiveCollection?: PrimitiveCollection;\n  billboardCollection?: BillboardCollection;\n  labelCollection?: LabelCollection;\n  polylineCollection?: PolylineCollection;\n  pointPrimitiveCollection?: PointPrimitiveCollection;\n  cloudCollection?: CloudCollection;\n  [eventManagerContextKey]?: EventManager;\n};\n\nexport const CesiumContext = createContext<any>({});\nexport const { Provider, Consumer } = CesiumContext;\nexport const useCesium = (): Context => useContext(CesiumContext) || {};\n","import { useEffect, useRef, FC } from \"react\";\nimport { Camera } from \"cesium\";\n\nimport { useCesium } from \"./context\";\n\nexport type CameraOperationProps = {\n  cancelFlightOnUnmount?: boolean;\n  once?: boolean;\n};\n\nexport const createCameraOperation = <P>(\n  name: string,\n  cameraOperationStart: (camera: Camera, props: P, prevProps?: P) => void,\n): FC<P & CameraOperationProps> => {\n  /* eslint-disable react-hooks/rules-of-hooks */\n  const component: FC<P & CameraOperationProps> = props => {\n    const ctx = useCesium();\n    const prevProps = useRef<P>();\n    const first = useRef(false);\n\n    useEffect(() => {\n      return () => {\n        if (ctx.camera && props.cancelFlightOnUnmount) {\n          ctx.camera.cancelFlight();\n        }\n      };\n    }, [ctx.camera, props.cancelFlightOnUnmount]);\n\n    useEffect(() => {\n      if (ctx.camera && ctx.scene && !ctx.scene.isDestroyed() && (!props.once || !first.current)) {\n        ctx.camera.cancelFlight();\n        cameraOperationStart(ctx.camera, props, prevProps.current);\n        first.current = true;\n      }\n      prevProps.current = props;\n    });\n\n    return null;\n  };\n  /* eslint-enable react-hooks/rules-of-hooks */\n\n  component.displayName = name;\n\n  return component;\n};\n","import {\n  useEffect,\n  useRef,\n  useImperativeHandle,\n  useState,\n  useCallback,\n  useLayoutEffect,\n  RefObject,\n} from \"react\";\nimport { Event as CesiumEvent } from \"cesium\";\n\nimport { Context, useCesium } from \"./context\";\nimport { EventManager, eventManagerContextKey } from \"./EventManager\";\nimport { includes, shallowEquals, isDestroyed } from \"./util\";\n\nexport type EventkeyMap<T, P> = { [K in keyof P]?: keyof T };\n\nexport type Options<Element, Props, State = any> = {\n  name: string;\n  create?: (\n    ctx: Context,\n    props: Props,\n    wrapperRef: HTMLDivElement | null,\n  ) => Element | [Element, State] | undefined;\n  destroy?: (\n    element: Element,\n    ctx: Context,\n    wrapperRef: HTMLDivElement | null,\n    state?: State,\n  ) => void;\n  provide?: (element: Element, ctx: Context, state?: State) => Partial<Context>;\n  update?: (element: Element, props: Props, prevProps: Props, context: Context) => void;\n  cesiumProps?: readonly (keyof Props)[];\n  cesiumReadonlyProps?: readonly (keyof Props)[];\n  cesiumEventProps?: EventkeyMap<Element, Props>;\n  setCesiumPropsAfterCreate?: boolean;\n  useCommonEvent?: boolean;\n  useRootEvent?: boolean;\n};\n\nexport const useCesiumComponent = <Element, Props, State = any>(\n  {\n    name,\n    create,\n    destroy,\n    provide,\n    update,\n    cesiumProps,\n    cesiumReadonlyProps,\n    cesiumEventProps,\n    setCesiumPropsAfterCreate,\n    useCommonEvent,\n    useRootEvent,\n  }: Options<Element, Props, State>,\n  props: Props,\n  ref: any,\n): [Partial<Context> | undefined, boolean, RefObject<HTMLDivElement>] => {\n  const element = useRef<Element>();\n  const ctx = useCesium();\n  const provided = useRef<Partial<Context> | undefined>(provide ? {} : undefined);\n  const attachedEvents = useRef<{\n    [key in keyof Element]?: any;\n  }>({});\n  const initialProps = useRef<Props>(props);\n  const prevProps = useRef<Props>({} as Props);\n  const [mounted, setMounted] = useState(false);\n  const mountedRef = useRef(false);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const stateRef = useRef<State>();\n  const eventManager = ctx?.[eventManagerContextKey];\n\n  // Update properties\n  const updateProperties = useCallback(\n    (props: Props) => {\n      if (!element.current) return;\n      const target: any = element.current;\n\n      const propsKeys = Object.keys(props) as (keyof Props)[];\n      const eventKeys = Object.keys(cesiumEventProps || []) as (keyof Props)[];\n\n      const propDiff = propsKeys\n        .concat(\n          (Object.keys(prevProps.current) as (keyof Props)[]).filter(k => !propsKeys.includes(k)),\n        )\n        .filter(k => prevProps.current[k] !== props[k])\n        .map(k => [k, prevProps.current[k], props[k]] as [keyof Props, any, any]);\n\n      const updatedReadonlyProps: (keyof Props)[] = [];\n      for (const [k, prevValue, newValue] of propDiff) {\n        if (includes(cesiumProps, k)) {\n          target[k] = newValue;\n        } else if (includes(cesiumReadonlyProps, k)) {\n          updatedReadonlyProps.push(k);\n        } else if (includes(eventKeys, k)) {\n          const cesiumKey = cesiumEventProps?.[k] as keyof Element;\n          const eventHandler = target[cesiumKey];\n          if (eventHandler instanceof CesiumEvent) {\n            if (typeof prevValue === \"undefined\") {\n              // added\n              eventHandler.addEventListener(newValue);\n              attachedEvents.current[cesiumKey] = newValue;\n            } else if (typeof newValue === \"undefined\") {\n              // deleted\n              eventHandler.removeEventListener(prevValue);\n              delete attachedEvents.current[cesiumKey];\n            } else {\n              // updated\n              eventHandler.removeEventListener(prevValue);\n              eventHandler.addEventListener(newValue);\n            }\n          }\n        }\n      }\n\n      const em = useRootEvent\n        ? (provided.current?.[eventManagerContextKey] as EventManager | undefined)\n        : eventManager;\n      if (useCommonEvent && em && element.current) {\n        em.setEvents(useRootEvent ? null : element.current, props);\n      }\n\n      if (update && mountedRef.current) {\n        update(element.current, props, prevProps.current, ctx);\n      }\n\n      prevProps.current = props;\n      initialProps.current = props;\n\n      // Recreate cesium element when any read-only prop is updated\n      if (mountedRef.current && updatedReadonlyProps.length > 0) {\n        if (process.env.NODE_ENV !== \"production\") {\n          console.warn(\n            `Warning: <${name}> is recreated because following read-only props have been updated: ${updatedReadonlyProps.join(\n              \", \",\n            )}`,\n          );\n        }\n\n        unmount();\n        mount();\n      }\n    },\n    [], // eslint-disable-line react-hooks/exhaustive-deps\n  );\n\n  const mount = useCallback(() => {\n    // Initialize cesium element\n    const result = create?.(ctx, initialProps.current, wrapperRef.current);\n    if (Array.isArray(result)) {\n      element.current = result[0];\n      stateRef.current = result[1];\n    } else {\n      element.current = result;\n    }\n\n    if (setCesiumPropsAfterCreate) {\n      updateProperties(initialProps.current);\n    } else {\n      // Attach events\n      if (element.current && cesiumEventProps) {\n        const target: any = element.current;\n        for (const key of Object.keys(initialProps.current) as (keyof Props)[]) {\n          const eventKey = cesiumEventProps[key];\n          if (eventKey) {\n            const e: any = initialProps.current[key];\n            const eventHandler = target[eventKey];\n            if (e && eventHandler instanceof CesiumEvent) {\n              eventHandler.addEventListener(e);\n            }\n          }\n        }\n      }\n\n      prevProps.current = initialProps.current;\n    }\n\n    if (provide && element.current) {\n      provided.current = { ...ctx, ...provide(element.current, ctx, stateRef.current) };\n    }\n\n    const em = useRootEvent\n      ? (provided.current?.[eventManagerContextKey] as EventManager | undefined)\n      : eventManager;\n    if (useCommonEvent && em && element.current) {\n      em.setEvents(useRootEvent ? null : element.current, initialProps.current);\n    }\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const unmount = useCallback(() => {\n    // Destroy cesium element\n    if (element.current && destroy) {\n      destroy(element.current, ctx, wrapperRef.current, stateRef.current);\n    }\n\n    const em = useRootEvent\n      ? (provided.current?.[eventManagerContextKey] as EventManager | undefined)\n      : eventManager;\n    if (useCommonEvent && em && element.current) {\n      em.clearEvents(useRootEvent ? null : element.current);\n    }\n\n    // Detach all events\n    if (element.current && !isDestroyed(element.current)) {\n      const attachedEventKeys = Object.keys(attachedEvents.current) as (keyof Element)[];\n      for (const k of attachedEventKeys) {\n        const eventHandler: any = element.current[k];\n        eventHandler?.removeEventListener?.(attachedEvents.current[k]);\n      }\n    }\n\n    attachedEvents.current = {};\n    provided.current = undefined;\n    stateRef.current = undefined;\n    element.current = undefined;\n\n    setMounted(false);\n    mountedRef.current = false;\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // To prevent re-execution by hot loader, execute only once\n  useLayoutEffect(() => {\n    mount();\n    return () => unmount();\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Update properties of cesium element\n  useEffect(() => {\n    if (mounted) {\n      if (!shallowEquals(props, prevProps.current)) {\n        updateProperties(props);\n      }\n    } else {\n      // first time\n      prevProps.current = props;\n      initialProps.current = props;\n      setMounted(true);\n      mountedRef.current = true;\n    }\n  }, [mounted, props, updateProperties]);\n\n  // Expose cesium element\n  useImperativeHandle(ref, () => ({\n    cesiumElement: element.current,\n  }));\n\n  return [provided.current, mounted, wrapperRef];\n};\n","import React, {\n  forwardRef,\n  HTMLAttributes,\n  ForwardRefExoticComponent,\n  PropsWithoutRef,\n  RefAttributes,\n  ForwardRefRenderFunction,\n  ReactElement,\n} from \"react\";\n\nimport { useCesiumComponent, Options } from \"./hooks\";\nimport { CesiumContext } from \"./context\";\nimport { pick } from \"./util\";\n\nexport type CesiumComponentOptions<Element, Props, State = any> = Options<Element, Props, State> & {\n  renderContainer?: boolean;\n  noChildren?: boolean;\n  containerProps?: (keyof Props)[] | ((props: Props) => HTMLAttributes<HTMLDivElement>);\n  defaultProps?: Partial<Props>;\n};\n\nexport type CesiumComponentRef<Element> = {\n  cesiumElement?: Element;\n};\n\nexport type CesiumComponentType<Element, Props> = ForwardRefExoticComponent<\n  PropsWithoutRef<Props> & RefAttributes<CesiumComponentRef<Element>>\n>;\n\nexport const createCesiumComponent = <Element, Props, State = any>({\n  renderContainer,\n  noChildren,\n  containerProps,\n  defaultProps,\n  ...options\n}: CesiumComponentOptions<Element, Props, State>): CesiumComponentType<Element, Props> => {\n  const component: ForwardRefRenderFunction<CesiumComponentRef<Element>, Props> = (props, ref) => {\n    const mergedProps = {\n      ...defaultProps,\n      ...props,\n    };\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [provided, mounted, wrapperRef] = useCesiumComponent<Element, Props, State>(\n      options,\n      mergedProps,\n      ref,\n    );\n\n    if (noChildren) return null;\n\n    const children = mounted ? (mergedProps.children as ReactElement) : null;\n    const wrappedChildren = renderContainer ? (\n      <div\n        data-testid=\"resium-container\"\n        ref={wrapperRef}\n        {...(typeof containerProps === \"function\"\n          ? containerProps(mergedProps)\n          : pick(mergedProps, containerProps))}>\n        {children}\n      </div>\n    ) : (\n      children ?? null\n    );\n\n    if (provided) {\n      return <CesiumContext.Provider value={provided}>{wrappedChildren}</CesiumContext.Provider>;\n    }\n    return wrappedChildren;\n  };\n\n  component.displayName = options.name;\n\n  return forwardRef(component);\n};\n","import {\n  PostProcessStageCollection,\n  PostProcessStage,\n  PostProcessStageComposite,\n  Scene,\n} from \"cesium\";\n\nimport { PickCesiumProps } from \"./types\";\nimport { createCesiumComponent } from \"./component\";\nimport { includes } from \"./util\";\n\nexport type PostProcessStageCesiumProps = PickCesiumProps<PostProcessStage, typeof cesiumProps>;\n\nexport type PostProcessStageProps = PostProcessStageCesiumProps;\n\nconst cesiumProps = [\"enabled\", \"selected\"] as const;\n\nexport const createPostProcessStage = <UniformProps>(opts: {\n  name: string;\n  props: (keyof UniformProps)[];\n  readonlyProps?: (keyof UniformProps)[];\n  noMount?: boolean;\n  create(\n    props: Readonly<UniformProps & PostProcessStageCesiumProps>,\n    postProcessStages: PostProcessStageCollection,\n  ): PostProcessStage | PostProcessStageComposite;\n}) =>\n  createCesiumComponent<\n    PostProcessStage | PostProcessStageComposite,\n    PostProcessStageCesiumProps & UniformProps & { stages?: any[] },\n    {\n      scene?: Scene;\n    }\n  >({\n    name: opts.name,\n    create(context, props) {\n      if (!context.scene) return;\n      const element = opts.create(props, context.scene.postProcessStages);\n      if (typeof props.enabled === \"boolean\") {\n        element.enabled = props.enabled;\n      }\n      if (props.selected && \"selected\" in element) {\n        element.selected = props.selected;\n      }\n      opts.props.forEach(k => {\n        if (!includes(opts.readonlyProps, k) && typeof props[k] !== \"undefined\") {\n          element.uniforms[k] = props[k];\n        }\n      });\n      if (!opts.noMount && context.scene && !context.scene.isDestroyed()) {\n        context.scene.postProcessStages.add(element);\n      }\n      return element;\n    },\n    destroy(element, context) {\n      if (!opts.noMount) {\n        if (context.scene && !context.scene.isDestroyed()) {\n          context.scene.postProcessStages.remove(element);\n        }\n        if (!element.isDestroyed()) {\n          element.destroy();\n        }\n      } else {\n        element.enabled = false;\n      }\n    },\n    update(element, props, prevProps) {\n      opts.props.forEach(k => {\n        if (!includes(opts.readonlyProps, k) && props[k] !== prevProps[k]) {\n          element.uniforms[k] = props[k];\n        }\n      });\n    },\n    cesiumProps,\n    cesiumReadonlyProps: opts.readonlyProps,\n    defaultProps: {\n      enabled: true,\n    } as any,\n  });\n\nexport default createPostProcessStage;\n","import { Billboard as CesiumBillboard, BillboardCollection } from \"cesium\";\n\nimport { createCesiumComponent, EventProps, PickCesiumProps } from \"../core\";\n\n/*\n@summary\n`Billboard` is a billboard primitive in the `BillboardCollection`.\n\nPrimitive is a low layer API for geographical visualization.\n[Entity](/components/entity) is more recommended unless performance issues.\n*/\n\n/*\n@scope\nOnly inside [BillboardCollection](/components/BillboardCollection) components.\nA billboard object will be attached to the parent BillboardCollection.\n*/\n\nexport type BillboardCesiumProps = PickCesiumProps<CesiumBillboard, typeof cesiumProps>;\n\nexport type BillboardOtherProps = EventProps<{\n  collection: BillboardCollection;\n  id: string | undefined;\n  primitive: CesiumBillboard;\n}>;\n\nexport type BillboardProps = BillboardCesiumProps & BillboardOtherProps;\n\nconst cesiumProps = [\n  \"alignedAxis\",\n  \"color\",\n  \"disableDepthTestDistance\",\n  \"distanceDisplayCondition\",\n  \"eyeOffset\",\n  \"height\",\n  \"heightReference\",\n  \"horizontalOrigin\",\n  \"id\",\n  \"image\",\n  \"pixelOffset\",\n  \"pixelOffsetScaleByDistance\",\n  \"position\",\n  \"rotation\",\n  \"scale\",\n  \"scaleByDistance\",\n  \"show\",\n  \"sizeInMeters\",\n  \"translucencyByDistance\",\n  \"verticalOrigin\",\n  \"width\",\n] as const;\n\nconst Billboard = createCesiumComponent<CesiumBillboard, BillboardProps>({\n  name: \"Billboard\",\n  create(context, props) {\n    return context.billboardCollection?.add(props);\n  },\n  destroy(element, context) {\n    if (context.billboardCollection && !context.billboardCollection.isDestroyed()) {\n      context.billboardCollection.remove(element);\n    }\n  },\n  cesiumProps,\n  useCommonEvent: true,\n});\n\nexport default Billboard;\n","import { ReactNode } from \"react\";\nimport { BillboardCollection as CesiumBillboardCollection } from \"cesium\";\n\nimport { createCesiumComponent, PickCesiumProps } from \"../core\";\n\n/*\n@summary\n`BillboardCollection` is a collection of billboard primitives.\nIt can have some `Billboard` components as children.\n\nPrimitive is a low layer API for geographical visualization.\n[Entity](/components/entity) is more recommended unless performance issues.\n*/\n\n/*\n@scope\nInside [Viewer](/components/Viewer) or [CesiumWidget](/components/CesiumWidget) components.\nA BillboardColleciton object will be attached to the PrimitiveCollection of the Viewer or CesiumWidget.\n*/\n\nexport type BillboardCollectionCesiumProps = PickCesiumProps<\n  CesiumBillboardCollection,\n  typeof cesiumProps\n>;\n\nexport type BillboardCollectionOtherProps = {\n  children?: ReactNode;\n};\n\nexport type BillboardCollectionProps = BillboardCollectionCesiumProps &\n  BillboardCollectionOtherProps;\n\nconst cesiumProps = [\n  \"blendOption\",\n  \"debugShowBoundingVolume\",\n  \"debugShowTextureAtlas\",\n  \"modelMatrix\",\n  \"show\",\n] as const;\n\nconst BillboardCollection = createCesiumComponent<\n  CesiumBillboardCollection,\n  BillboardCollectionProps\n>({\n  name: \"BillboardCollection\",\n  create(context, props) {\n    if (!context.primitiveCollection) return;\n    const element = new CesiumBillboardCollection({\n      modelMatrix: props.modelMatrix,\n      debugShowBoundingVolume: props.debugShowBoundingVolume,\n      scene: context.scene,\n      blendOption: props.blendOption,\n    });\n    context.primitiveCollection.add(element);\n    return element;\n  },\n  destroy(element, context) {\n    if (context.primitiveCollection && !context.primitiveCollection.isDestroyed()) {\n      context.primitiveCollection.remove(element);\n    }\n    if (!element.isDestroyed()) {\n      element.destroy();\n    }\n  },\n  provide(element) {\n    return {\n      billboardCollection: element,\n    };\n  },\n  cesiumProps,\n});\n\nexport default BillboardCollection;\n","import { BillboardGraphics as CesiumBillboardGraphics } from \"cesium\";\n\nimport { createCesiumComponent, PickCesiumProps, Merge } from \"../core\";\n\n/*\n@summary\n`BillboardGraphics` is a billboard visualization for the entity.\n*/\n\n/*\n@scope\nBillboardGraphics can be mounted only inside[Entity](/components/Entity) components,\nand can not be mounted more than once for each entity.\n*/\n\nexport type BillboardGraphicsCesiumProps = PickCesiumProps<\n  Merge<CesiumBillboardGraphics, CesiumBillboardGraphics.ConstructorOptions>,\n  typeof cesiumProps\n>;\n\nexport type BillboardGraphicsCesiumEvents = {\n  onDefinitionChange?: () => void;\n};\n\nexport type BillboardGraphicsProps = BillboardGraphicsCesiumProps & BillboardGraphicsCesiumEvents;\n\nconst cesiumProps = [\n  \"image\",\n  \"show\",\n  \"scale\",\n  \"horizontalOrigin\",\n  \"verticalOrigin\",\n  \"eyeOffset\",\n  \"pixelOffset\",\n  \"rotation\",\n  \"alignedAxis\",\n  \"width\",\n  \"height\",\n  \"color\",\n  \"scaleByDistance\",\n  \"translucencyByDistance\",\n  \"pixelOffsetScaleByDistance\",\n  \"imageSubRegion\",\n  \"sizeInMeters\",\n  \"heightReference\",\n  \"distanceDisplayCondition\",\n  \"disableDepthTestDistance\",\n] as const;\n\nexport const cesiumEventProps = {\n  onDefinitionChange: \"definitionChanged\",\n} as const;\n\nconst BillboardGraphics = createCesiumComponent<CesiumBillboardGraphics, BillboardGraphicsProps>({\n  name: \"BillboardGraphics\",\n  create(context, props) {\n    if (!context.entity) return;\n    const element = new CesiumBillboardGraphics(props);\n    context.entity.billboard = element;\n    return element;\n  },\n  destroy(_element, context) {\n    if (context.entity) {\n      context.entity.billboard = undefined;\n    }\n  },\n  cesiumProps,\n  cesiumEventProps,\n});\n\nexport default BillboardGraphics;\n","import { BoxGraphics as CesiumBoxGraphics } from \"cesium\";\n\nimport { createCesiumComponent, PickCesiumProps, Merge } from \"../core\";\n\n/*\n@summary\n`BoxGraphics` is a box visualization for the entity.\n*/\n\n/*\n@scope\nBoxGraphic can be mounted only inside[Entity](/components/Entity) components,\nand can not be mounted more than once for each entity.\n*/\n\nexport type BoxGraphicsCesiumProps = PickCesiumProps<\n  Merge<CesiumBoxGraphics, CesiumBoxGraphics.ConstructorOptions>,\n  typeof cesiumProps\n>;\n\nexport type BoxGraphicsCesiumEvents = {\n  onDefinitionChange?: () => void;\n};\n\nexport type BoxGraphicsProps = BoxGraphicsCesiumProps & BoxGraphicsCesiumEvents;\n\nconst cesiumProps = [\n  \"heightReference\",\n  \"dimensions\",\n  \"show\",\n  \"fill\",\n  \"material\",\n  \"outline\",\n  \"outlineColor\",\n  \"outlineWidth\",\n  \"shadows\",\n  \"distanceDisplayCondition\",\n] as const;\n\nexport const cesiumEventProps = {\n  onDefinitionChange: \"definitionChanged\",\n} as const;\n\nconst BoxGraphics = createCesiumComponent<CesiumBoxGraphics, BoxGraphicsProps>({\n  name: \"BoxGraphics\",\n  create(context, props) {\n    if (!context.entity) return;\n    const element = new CesiumBoxGraphics(props);\n    context.entity.box = element;\n    return element;\n  },\n  destroy(_element, context) {\n    if (context.entity) {\n      context.entity.box = undefined;\n    }\n  },\n  cesiumProps,\n  cesiumEventProps,\n});\n\nexport default BoxGraphics;\n","import { Camera as CesiumCamera } from \"cesium\";\n\nimport { createCesiumComponent, PickCesiumProps } from \"../core\";\n\n/*\n@summary\n`Camera` can operate the camera of the scene.\nAll properties are applied to single camera of the scene.\n\n**Note**: Following code is not recommended as occur extra rendering steps:\n\n```\n<Viewer>\n  <Scene>\n    <Globe>\n      <Camera>\n        <Entity />\n      </Camera>\n    </Globe>\n  </Scene>\n</Viewer>\n```\n\n`Camera` component's role is just changing fields of `Viewer#scene#camera`, so following code is recommended.\n\n```\n<Viewer>\n  <Scene />\n  <Globe />\n  <Camera />\n  <Entity />\n</Viewer>\n```\n\nFor details, refer to \"Component location\" chapter in [Guide](/guide).\n*/\n\n/*\n@scope\nCamera can be mounted inside[Viewer](/components/Viewer) or [CesiumWidget](/components/CesiumWidget) components.\nIt can not be mounted more than once for each Viewer or CesiumWidget.\n*/\n\nexport type CameraCesiumProps = PickCesiumProps<CesiumCamera, typeof cesiumProps>;\n\nexport type CameraCesiumEvents = {\n  onChange?: (areaPercentage: number) => void;\n  onMoveEnd?: () => void;\n  onMoveStart?: () => void;\n};\n\nexport type CameraProps = CameraCesiumProps & CameraCesiumEvents;\n\nconst cesiumProps = [\n  \"position\",\n  \"direction\",\n  \"up\",\n  \"right\",\n  \"frustum\",\n  \"defaultMoveAmount\",\n  \"defaultLookAmount\",\n  \"defaultRotateAmount\",\n  \"defaultZoomAmount\",\n  \"constrainedAxis\",\n  \"maximumTranslateFactor\",\n  \"maximumZoomFactor\",\n  \"percentageChanged\",\n] as const;\n\nexport const cesiumEventProps = {\n  onChange: \"changed\",\n  onMoveEnd: \"moveEnd\",\n  onMoveStart: \"moveStart\",\n} as const;\n\nconst Camera = createCesiumComponent<CesiumCamera, CameraProps>({\n  name: \"Camera\",\n  create: context => context.scene?.camera,\n  cesiumProps,\n  cesiumEventProps,\n  setCesiumPropsAfterCreate: true,\n});\n\nexport default Camera;\n","import { createCameraOperation } from \"../core\";\n\n// @noCesiumElement\n\n/*\n@summary\n`CameraFlyHome` is a kind of operation of the camera.\n\nWhen it is mounted, `camera.flyHome(duration)` will be execute.\n\nIf any property is changed, the current camera flight will be canceled and a new one is executed.\n\nSee also: [Camera#flyHome](https://cesium.com/docs/cesiumjs-ref-doc/Camera.html?classFilter=camer#flyHome)\n*/\n\n/*\n@scope\nInside [Viewer](/components/Viewer) or [CesiumWidget](/components/CesiumWidget) components.\n*/\n\nexport type CameraFlyHomeProps = {\n  /** Duration of camera flight (second) */\n  duration: number;\n  /** If true, cancel camera flight if this component is unmounted. Default value is false. */\n  cancelFlightOnUnmount?: boolean;\n  /** If true, camera flight will be executed only once time. */\n  once?: boolean;\n};\n\nconst CameraFlyHome = createCameraOperation<CameraFlyHomeProps>(\n  \"CameraFlyHome\",\n  (camera, { duration }) => {\n    camera.flyHome(duration);\n  },\n);\n\nexport default CameraFlyHome;\n","import { createCameraOperation } from \"../core\";\nimport { Camera } from \"cesium\";\n\n// @noCesiumElement\n\n/*\n@summary\n`CameraFlyTo` is a kind of operation of the camera.\n\nWhen it is mounted, `camera.flyTo(options)` will be execute.\n\nIf any property is changed, the current camera flight will be canceled and a new one is executed.\n\nSee also: [Camera#flyTo](https://cesium.com/docs/cesiumjs-ref-doc/Camera.html?classFilter=camer#flyTo)\n*/\n\n/*\n@scope\nInside [Viewer](/components/Viewer) or [CesiumWidget](/components/CesiumWidget) components.\n*/\n\ntype Options = Parameters<Camera[\"flyTo\"]>[0];\n\nexport type CameraFlyToProps = Omit<Options, \"complete\" | \"cancel\"> & {\n  onComplete?: Options[\"complete\"];\n  onCancel?: Options[\"cancel\"];\n  /** If true, cancel camera flight if this component is unmounted. Default value is false. */\n  cancelFlightOnUnmount?: boolean;\n  /** If true, camera flight will be executed only once time. */\n  once?: boolean;\n};\n\nconst CameraFlyTo = createCameraOperation<CameraFlyToProps>(\n  \"CameraFlyTo\",\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  (camera, { onComplete, onCancel, ...props }) => {\n    camera.flyTo({ ...props, complete: onComplete, cancel: onCancel });\n  },\n);\n\nexport default CameraFlyTo;\n","import { createCameraOperation } from \"../core\";\nimport { Camera } from \"cesium\";\n\n// @noCesiumElement\n\n/*\n@summary\n`CameraLookAt` is a kind of operation of the camera.\n\nWhen it is mounted and its properties are changed, `camera.lookAt(target, offset)` will be executed.\n\nSee also: [Camera#flyTo](https://cesium.com/docs/cesiumjs-ref-doc/Camera.html?classFilter=camer#flyTo)\n*/\n\n/*\n@scope\nInside [Viewer](/components/Viewer) or [CesiumWidget](/components/CesiumWidget) components.\n*/\n\nexport type CameraLookAtProps = {\n  target: Parameters<Camera[\"lookAt\"]>[0];\n  offset: Parameters<Camera[\"lookAt\"]>[1];\n};\n\nconst CameraLookAt = createCameraOperation<CameraLookAtProps>(\n  \"CameraLookAt\",\n  (camera, { target, offset }) => {\n    camera.lookAt(target, offset);\n  },\n);\n\nexport default CameraLookAt;\n","import { createCameraOperation, StaticMethodOptions2 } from \"../core\";\nimport { Camera } from \"cesium\";\n\n// @noCesiumElement\n\n/*\n@summary\n`CameraFlyToBoundingSphere` is a kind of operation of the camera.\n\nWhen it is mounted, `camera.flyToBoundingSphere(boundingSphere, options)` will be execute.\n\nIf any property is changed, the current camera flight will be canceled and a new one is executed.\n\nSee also: [Camera#flyToBoundingSphere](https://cesium.com/docs/cesiumjs-ref-doc/Camera.html?classFilter=camer#flyToBoundingSphere)\n*/\n\n/*\n@scope\nInside [Viewer](/components/Viewer) or [CesiumWidget](/components/CesiumWidget) components.\n*/\n\ntype Options = StaticMethodOptions2<Camera, \"flyToBoundingSphere\">;\n\nexport type CameraFlyToBoundingSphereProps = Omit<Options, \"complete\" | \"cancel\"> & {\n  boundingSphere: Parameters<Camera[\"flyToBoundingSphere\"]>[0];\n  onComplete?: Options[\"complete\"];\n  onCancel?: Options[\"cancel\"];\n  /** If true, cancel camera flight if this component is unmounted. Default value is false. */\n  cancelFlightOnUnmount?: boolean;\n  /** If true, camera flight will be executed only once time. */\n  once?: boolean;\n};\n\nconst CameraFlyToBoundingSphere = createCameraOperation<CameraFlyToBoundingSphereProps>(\n  \"CameraFlyToBoundingSphere\",\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  (camera, { boundingSphere, onComplete, onCancel, ...props }) => {\n    camera.flyToBoundingSphere(boundingSphere, {\n      ...props,\n      complete: onComplete,\n      cancel: onCancel,\n    });\n  },\n);\n\nexport default CameraFlyToBoundingSphere;\n","import { Cesium3DTileset as CesiumCesium3DTileset, Cesium3DTileFeature } from \"cesium\";\nimport {\n  createCesiumComponent,\n  EventProps,\n  PickCesiumProps,\n  ConstructorOptions,\n  Merge,\n} from \"../core\";\n\n/*\n@summary\n`Cesium3DTileset` is a 3D tile set.\n*/\n\n/*\n@scope\nInside [Viewer](/components/Viewer) or [CesiumWidget](/components/CesiumWidget) component.\nA Cesium3DTileset object will be attached to the PrimitiveCollection of the Viewer or CesiumWidget.\n*/\n\nexport type Cesium3DTilesetCesiumProps = PickCesiumProps<CesiumCesium3DTileset, typeof cesiumProps>;\n\nexport type Cesium3DTilesetCesiumReadonlyProps = PickCesiumProps<\n  Merge<CesiumCesium3DTileset, ConstructorOptions<typeof CesiumCesium3DTileset>>,\n  typeof cesiumReadonlyProps,\n  \"url\"\n>;\n\nexport type Cesium3DTilesetCesiumEvents = {\n  onAllTilesLoad?: () => void;\n  onInitialTilesLoad?: () => void;\n  onLoadProgress?: (numberOfPendingRequests: number, numberOfTilesProcessing: number) => void;\n  onTileFailed?: (error: any) => void;\n  onTileLoad?: (tile: CesiumCesium3DTileset) => void;\n  onTileUnload?: () => void;\n  onTileVisible?: (tile: CesiumCesium3DTileset) => void;\n};\n\nexport type Cesium3DTilesetOtherProps = EventProps<Cesium3DTileFeature> & {\n  /** Calls when the tile set is completely loaded. */\n  onReady?: (tileset: CesiumCesium3DTileset) => void;\n};\n\nexport type Cesium3DTilesetProps = Cesium3DTilesetCesiumProps &\n  Cesium3DTilesetCesiumReadonlyProps &\n  Cesium3DTilesetCesiumEvents &\n  Cesium3DTilesetOtherProps;\n\nconst cesiumProps = [\n  \"show\",\n  \"modelMatrix\",\n  \"shadows\",\n  \"maximumScreenSpaceError\",\n  \"maximumMemoryUsage\",\n  \"cullRequestsWhileMoving\",\n  \"cullRequestsWhileMovingMultiplier\",\n  \"preloadWhenHidden\",\n  \"preloadFlightDestinations\",\n  \"preferLeaves\",\n  \"progressiveResolutionHeightFraction\",\n  \"foveatedScreenSpaceError\",\n  \"foveatedConeSize\",\n  \"foveatedMinimumScreenSpaceErrorRelaxation\",\n  \"foveatedInterpolationCallback\",\n  \"foveatedTimeDelay\",\n  \"dynamicScreenSpaceError\",\n  \"dynamicScreenSpaceErrorDensity\",\n  \"dynamicScreenSpaceErrorFactor\",\n  \"dynamicScreenSpaceErrorHeightFalloff\",\n  \"skipLevelOfDetail\",\n  \"baseScreenSpaceError\",\n  \"skipScreenSpaceErrorFactor\",\n  \"skipLevels\",\n  \"immediatelyLoadDesiredLevelOfDetail\",\n  \"loadSiblings\",\n  \"clippingPlanes\",\n  \"classificationType\",\n  \"ellipsoid\",\n  \"imageBasedLightingFactor\",\n  \"lightColor\",\n  \"colorBlendAmount\",\n  \"colorBlendMode\",\n  \"luminanceAtZenith\",\n  \"sphericalHarmonicCoefficients\",\n  \"specularEnvironmentMaps\",\n  \"debugFreezeFrame\",\n  \"debugColorizeTiles\",\n  \"debugWireframe\",\n  \"debugShowBoundingVolume\",\n  \"debugShowContentBoundingVolume\",\n  \"debugShowViewerRequestVolume\",\n  \"debugShowGeometricError\",\n  \"debugShowRenderingStatistics\",\n  \"debugShowMemoryUsage\",\n  \"debugShowUrl\",\n  \"pointCloudShading\",\n  \"style\",\n  \"backFaceCulling\",\n  \"vectorClassificationOnly\",\n  \"vectorKeepDecodedPositions\",\n] as const;\n\nconst cesiumReadonlyProps = [\n  \"url\",\n  \"showOutline\",\n  \"cullWithChildrenBounds\",\n  \"debugHeatmapTilePropertyName\",\n] as const;\n\nexport const cesiumEventProps = {\n  onAllTilesLoad: \"allTilesLoaded\",\n  onInitialTilesLoad: \"initialTilesLoaded\",\n  onLoadProgress: \"loadProgress\",\n  onTileFailed: \"tileFailed\",\n  onTileLoad: \"tileLoad\",\n  onTileUnload: \"tileUnload\",\n  onTileVisible: \"tileVisible\",\n} as const;\n\nconst Cesium3DTileset = createCesiumComponent<CesiumCesium3DTileset, Cesium3DTilesetProps>({\n  name: \"Cesium3DTileset\",\n  create(context, props) {\n    if (!context.primitiveCollection) return;\n    const element = new CesiumCesium3DTileset(props);\n    if (props.colorBlendAmount) {\n      element.colorBlendAmount = props.colorBlendAmount;\n    }\n    if (props.colorBlendMode) {\n      element.colorBlendMode = props.colorBlendMode;\n    }\n    if (props.style) {\n      element.style = props.style;\n    }\n    if (props.onReady) {\n      element.readyPromise.then(props.onReady);\n    }\n    context.primitiveCollection.add(element);\n    return element;\n  },\n  destroy(element, context) {\n    if (context.primitiveCollection && !context.primitiveCollection.isDestroyed()) {\n      context.primitiveCollection.remove(element);\n    }\n    if (!element.isDestroyed()) {\n      element.destroy();\n    }\n  },\n  cesiumProps,\n  cesiumReadonlyProps,\n  cesiumEventProps,\n  useCommonEvent: true,\n});\n\nexport default Cesium3DTileset;\n","import { Cesium3DTilesetGraphics as CesiumCesium3DTilesetGraphics } from \"cesium\";\n\nimport { createCesiumComponent, PickCesiumProps, Merge } from \"../core\";\n\n/*\n@summary\n`Cesium3DTilesetGraphics` is a 3D tileset visualization for the entity.\n*/\n\n/*\n@scope\nCesium3DTilesetGraphics can be mounted only inside[Entity](/components/Entity) components,\nand can not be mounted more than once for each entity.\n*/\n\nexport type Cesium3DTilesetGraphicsCesiumProps = PickCesiumProps<\n  Merge<CesiumCesium3DTilesetGraphics, CesiumCesium3DTilesetGraphics.ConstructorOptions>,\n  typeof cesiumProps\n>;\n\nexport type Cesium3DTilesetGraphicsCesiumEvents = {\n  onDefinitionChange?: () => void;\n};\n\nexport type Cesium3DTilesetGraphicsProps = Cesium3DTilesetGraphicsCesiumProps &\n  Cesium3DTilesetGraphicsCesiumEvents;\n\nconst cesiumProps = [\"show\", \"uri\", \"maximumScreenSpaceError\"] as const;\n\nexport const cesiumEventProps = {\n  onDefinitionChange: \"definitionChanged\",\n} as const;\n\nconst Cesium3DTilesetGraphics = createCesiumComponent<\n  CesiumCesium3DTilesetGraphics,\n  Cesium3DTilesetGraphicsProps\n>({\n  name: \"Cesium3DTilesetGraphics\",\n  create(context, props) {\n    if (!context.entity) return;\n    const element = new CesiumCesium3DTilesetGraphics(props);\n    context.entity.tileset = element;\n    return element;\n  },\n  destroy(_element, context) {\n    if (context.entity) {\n      context.entity.tileset = undefined;\n    }\n  },\n  cesiumProps,\n  cesiumEventProps,\n});\n\nexport default Cesium3DTilesetGraphics;\n","import { CSSProperties, ReactNode } from \"react\";\nimport { CesiumWidget as CesiumCesiumWidget } from \"cesium\";\n\nimport {\n  createCesiumComponent,\n  EventManager,\n  eventManagerContextKey,\n  RootEventProps,\n  PickCesiumProps,\n  Merge,\n  ConstructorOptions2,\n} from \"../core\";\n\n/*\n@summary\n`CesiumWidget` is the simplest root component of resium. All components of resium except the root components have to be mounted inside it.\n\n`Viewer` is also a root component.