videx-3d/dist/types/components/Annotations/annotations-state.d.ts

React 3D component library designed for sub surface visualizations in the browser

import { AnnotationInstance, AnnotationLayer, AnnotationProps } from './types';
export type AnnotationsState = {
    visible: boolean;
    update: {
        required: boolean;
        ref: ReturnType<typeof setTimeout> | null;
        setRef: (v: ReturnType<typeof setTimeout>) => void;
    };
    layers: Record<string, AnnotationLayer>;
    annotations: Record<string, AnnotationProps[]>;
    instances: AnnotationInstance[];
    toggleVisibility: () => void;
    clear: () => void;
    createLayer: (newLayer: AnnotationLayer) => () => void;
    updateLayer: (id: string, updatedLayer: Partial<AnnotationLayer>) => void;
    layerExist: (id: string) => boolean;
    addLayerAnnotations: (layerId: string, scope: string, annotations: AnnotationProps[]) => void;
    removeLayerAnnotations: (layerId: string, scope?: string) => void;
    setInstances: (newInstances: AnnotationInstance[]) => void;
};
/**
 * Get access to annotations global state.
 * This is used internally and should not be used by other components. Use the `useAnnotations` hook instead.
 * @internal
 *
 * @see {@link useAnnotations}
 *
 * @group Hooks
 */
export declare const useAnnotationsState: import('zustand').UseBoundStore<Omit<import('zustand').StoreApi<AnnotationsState>, "subscribe"> & {
    subscribe: {
        (listener: (selectedState: AnnotationsState, previousSelectedState: AnnotationsState) => void): () => void;
        <U>(selector: (state: AnnotationsState) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
            equalityFn?: ((a: U, b: U) => boolean) | undefined;
            fireImmediately?: boolean;
        } | undefined): () => void;
    };
}>;
/**
 * This hook allow you to add annotations to an exisiting `AnnotationsLayer`.
 * A scope is a user defined string, which should uniquely tie the added anotations to your component.
 * If your annotations belong to a specific wellbore, the wellbore name or id would work well as a scope.
 *
 * A single function `addAnnotations` is returned, which you can call from within a `useEffect`
 * hook to set annotations. Annotations must be an array of `AnnotationProps`.
 * The `addAnnotations` function will return a dispose function when invoked, which you should
 * call within the effect dispose function.
 *
 * @example
 * const { addAnnotations } = useAnnotations('casings', scope)
 *
 * @remarks
 * Note that annotation positions needs to be in world space. If your data is relative to
 * for instance a wellbore, you could add an Object3D element with a ref in your component render function
 * and update the position data in a `useEffect` hook:
 *
 * @example
 * useEffect(() => {
 *   let dispose: (() => void) | null = null
 *   if (generator && id) {
 *     const v = new Vector3()
 *     generator(id).then(response => {
 *       if (response && positionRef.current) {
 *         response.forEach((d, i) => {
 *           v.set(...d.position)
 *           positionRef.current.localToWorld(v)
 *           d.position = v.toArray()
 *           d.id = i.toString()
 *         })
 *         dispose = addAnnotations(response || [])
 *       }
 *     })
 *   }
 *
 *   return () => {
 *     if (dispose) dispose()
 *   }
 * }, [addAnnotations, id, generator, positionRef])
 *
 * @see {@link AnnotationsLayer}
 * @see {@link Annotations}
 *
 * @group Hooks
 */
export declare const useAnnotations: (layer: string, scope: string) => {
    addAnnotations: (annotations: AnnotationProps[]) => (() => void) | undefined;
};