import { EventEmitter, h } from '../../stencil-public-runtime'; import { Dimensions } from '@vertexvis/geometry'; import { BasicInteractionHandler, BasicViewer, Disposable } from '@vertexvis/utils'; import { CrossSectioningOptions, FeatureHighlightOptions, FeatureLineOptions, FrameType, PhantomOptions, SceneComparisonOptions, SelectionHighlightingOptions } from '../../interfaces'; import { AnnotationController, AnnotationState } from '../../lib/annotations/controller'; import { CanvasController } from '../../lib/canvases'; import { Config, PartialConfig } from '../../lib/config'; import { Cursor } from '../../lib/cursors'; import { Environment } from '../../lib/environment'; import { BaseInteractionHandler } from '../../lib/interactions/baseInteractionHandler'; import { InteractionHandler } from '../../lib/interactions/interactionHandler'; import { KeyInteraction } from '../../lib/interactions/keyInteraction'; import { TapEventDetails } from '../../lib/interactions/tapEventDetails'; import { ModelViewController } from '../../lib/model-views/controller'; import { PmiController } from '../../lib/pmi'; import { SceneItemController } from '../../lib/scene-items/controller'; import { Scene } from '../../lib/scenes/scene'; import { ViewerStream } from '../../lib/stream/stream'; import { StencilBufferManager, Viewport } from '../../lib/types'; import { Frame } from '../../lib/types/frame'; import { FrameCameraType } from '../../lib/types/frameCamera'; interface ConnectedStatus { jwt: string; status: 'connected'; } interface ConnectingStatus { status: 'connecting'; } interface DisconnectedStatus { status: 'disconnected'; } interface ConnectionFailedStatus { status: 'connection-failed'; errorMessage: string; } export interface LoadOptions { cameraType?: FrameCameraType; } /** @internal */ export type ConnectionStatus = ConnectingStatus | ConnectedStatus | DisconnectedStatus | ConnectionFailedStatus; export declare class Viewer implements BasicViewer { private hostElement; /** * A URN of the scene resource to load when the component is mounted in the * DOM tree. The specified resource is a URN in the following format: * * * `urn:vertex:scene:` */ src?: string; /** * The Client ID associated with your Vertex Application. */ clientId?: string; /** * Property used for internals or testing. * * @internal */ deviceId?: string; /** * An object or JSON encoded string that defines configuration settings for * the viewer. */ config?: PartialConfig | string; /** * Sets the default environment for the viewer. This setting is used for * auto-configuring network hosts. * * Use the `config` property for manually setting hosts. * * @see Viewer.config */ configEnv: Environment; /** * @internal */ resolvedConfig?: Config; /** * Enables or disables the default mouse and touch interactions provided by * the viewer. Enabled by default. */ cameraControls: boolean; /** * The type of camera model to represent the scene with. Can be either * `perspective` or `orthographic`, and defaults to `perspective`. */ cameraType: FrameCameraType; /** * Enables or disables the default keyboard shortcut interactions provided by * the viewer. Enabled by default, requires `cameraControls` being enabled. * */ keyboardControls: boolean; /** * Sets the rotation interaction behavior. True by default. * * When rotateAroundTapPoint is true and the user clicks on geometry, then the model will rotate * around the point that was clicked. When rotateAroundTapPoint is true and the user clicks * in empty space (not on geometry), then the model will rotate around the center of the viewport. * * When rotateAroundTapPoint is false, then the model will always rotate around the center of the viewport. */ rotateAroundTapPoint: boolean; /** * A token that can be used to make API calls to other Vertex services. * * @internal */ token?: string; /** * Specifies when a depth buffer is requested from rendering. Possible values * are: * * * `undefined`: A depth buffer is never requested. * * `final`: A depth buffer is only requested on the final frame. * * `all`: A depth buffer is requested for every frame. * * Depth buffers can increase the amount of data that's sent to a client and * can impact rendering performance. Values of `undefined` or `final` should * be used when needing the highest rendering performance. Some features, * like measurement and pins, require that depth buffers are requested and * will override an 'undefined' value when the feature is active. */ depthBuffers?: FrameType; /** * Specifies how phantom parts should appear. * The opacity must be between 0 and 1, where 0 is completely hidden and 1 is completely visible. */ phantom?: PhantomOptions; /** * Specifies whether to use the default lights for the scene. When false, default * lights are used. When true, no default lights are used, and the lights must * be specified separately. */ noDefaultLights: boolean; /** * Specifies whether to enable temporal refinement of still images. */ enableTemporalRefinement: boolean; /** * Specifies experimental rendering options. For Vertex use only. * * @internal */ experimentalRenderingOptions: string; /** * Specifies if and how to render feature lines. */ featureLines?: FeatureLineOptions; /** * Specifies the halo selection properties. * Parameter notes: * * lineWidth values supported currently are 0-5. This width is currently the value x2. For example, 1 will have a pixel width of 2. * * color is optional. This will be the color of the selected items in the viewer. * * opacity is also optional. The opacity will be applied to everything selected besides the highlighted outer line. */ selectionHighlighting?: SelectionHighlightingOptions; /** * Specifies how selected features should be highlighted. */ featureHighlighting?: FeatureHighlightOptions; /** * Specifies if and how to compare to another scene */ sceneComparison?: SceneComparisonOptions; /** * Specifies options related to presentation of cross-sections. * Defaults to showing the cross-section with an end cap that matches the part color. */ crossSectioning?: CrossSectioningOptions; /** * Specifies when a feature map is returned from rendering. Feature maps * include information about the surfaces, edges and cross-sections that are * in a frame. * * Possible values are: * * * `undefined`: A feature map is never requested. * * `final`: A feature map is only requested on the final frame. * * `all`: A feature map is requested for every frame. * * Feature maps can increase the amount of data that's sent to a client and * can impact rendering performance. Values of `undefined` or `final` should * be used when needing the highest rendering performance. */ featureMaps?: FrameType; /** * An optional value that will debounce frame updates when resizing * this viewer element. */ resizeDebounce: number; /** * The last frame that was received, which can be used to inspect the scene * and camera information. * * @readonly */ frame: Frame | undefined; /** * @internal */ stream?: ViewerStream; /** * @internal */ stencilBuffer: StencilBufferManager; /** * Represents the current viewport of the viewer. The viewport represents the * dimensions of the canvas where a frame is rendered. It contains methods for * translating between viewport coordinates, frame coordinates and world * coordinates. */ viewport: Viewport; /** * The annotation controller for accessing annotations associated with the * scene view. * * @readonly */ annotations: AnnotationController | undefined; /** * The controller for accessing model views associated with the scene view. * * @readonly */ modelViews: ModelViewController | undefined; /** * The controller for accessing and viewing PMI. * * @readonly */ pmi: PmiController | undefined; /** * The controller for accessing and viewing SceneItems. * * @readonly */ sceneItems: SceneItemController | undefined; /** * The controller for accessing canvases and their associated markup. * * @readonly */ canvases: CanvasController | undefined; /** * Experimental flag indicating that connections to Vertex should be established * if the viewer is initially hidden through its own style or computed style, or * has not been scrolled into view. * * *Caution:* Setting this flag can result in reduced performance, * and should generally not be used in a production setting. */ experimentalSkipVisibilityCheck: boolean; /** * Emits an event whenever the user taps or clicks a location in the viewer. * The event includes the location of the tap or click. * * This event can be used in combination with the {@link scene} method * to query for items at the point of the tap. * * @see {@link Scene.raycaster Scene.raycaster} for more information. */ tap: EventEmitter; /** * Emits an event whenever the user double taps or clicks a location in the viewer. * The event includes the location of the first tap or click. */ doubletap: EventEmitter; /** * Emits an event whenever the user taps or clicks a location in the viewer and the * configured amount of time passes without receiving a mouseup or touchend. * The event includes the location of the tap or click. */ longpress: EventEmitter; /** * Emits an event when a frame has been received by the viewer. The event * will include details about the drawn frame, such as the `Scene` information * related to the scene. */ frameReceived: EventEmitter; /** * Emits an event when a frame has been drawn to the viewer's canvas. The event * will include details about the drawn frame, such as the `Scene` information * related to the scene. */ frameDrawn: EventEmitter; /** * Emits an event when a provided oauth2 token is about to expire, or is about to expire, * causing issues with establishing a websocket connection, or performing API calls. */ tokenExpired: EventEmitter; /** * Emits an event when the connection status changes for the viewer */ connectionChange: EventEmitter; /** * Emits an event when the scene is ready to be interacted with. */ sceneReady: EventEmitter; /** * Emits an event when a frame is received with a different scene attribute. */ sceneChanged: EventEmitter; /** * Emits an event when the user has started an interaction. */ interactionStarted: EventEmitter; /** * Emits an event when the user hs finished an interaction. */ interactionFinished: EventEmitter; /** * Emits an event when the camera type changes. */ cameraTypeChanged: EventEmitter; /** * Emits an event when the state for annotation changes. */ annotationStateChanged: EventEmitter; /** * Used for internals or testing. * * @internal */ deviceIdChange: EventEmitter; dimensionschange: EventEmitter; private dimensions?; private hostDimensions?; private errorMessage?; private cursor?; /** * This stores internal state that you want to preserve across live-reloads, * but shouldn't trigger a refresh if the data changes. Marking this with * @State to allow to preserve state across live-reloads. */ private stateMap; private viewerContainerElement?; private canvasContainerElement?; private canvasElement?; private canvasRenderer; private mutationObserver?; private styleObserver?; private resizeObserver?; private visibilityObserver?; private isResizing?; private isResizeUpdate?; private isVisible; private resizeTimer?; private streamAttributesUpdateTimer?; private frameRenderVersion; private interactionHandlers; private defaultInteractionHandlerDisposables; private tapHandlerDisposable?; private interactionApi; private tapKeyInteractions; private defaultTapKeyInteractions; private baseInteractionHandler?; private internalFrameDrawnDispatcher; constructor(); /** * @ignore */ protected connectedCallback(): void; /** * @ignore */ protected componentWillLoad(): void; /** * @ignore */ protected componentDidLoad(): Promise; /** * @ignore */ protected disconnectedCallback(): void; /** * @ignore */ protected render(): h.JSX.IntrinsicElements; /** * @internal */ dispatchFrameDrawn(frame: Frame): Promise; /** * Registers and initializes an interaction handler with the viewer. Returns a * `Disposable` that should be used to deregister the interaction handler. * * `InteractionHandler`s are used to build custom mouse and touch interactions * for the viewer. Use `` to disable * the default camera controls provided by the viewer. * * @example * ``` * class CustomInteractionHandler extends InteractionHandler { * private element: HTMLElement; * private api: InteractionApi; * * public dispose(): void { * this.element.removeEventListener('click', this.handleElementClick); * } * * public initialize(element: HTMLElement, api: InteractionApi): void { * this.api = api; * this.element = element; * this.element.addEventListener('click', this.handleElementClick); * } * * private handleElementClick = (event: MouseEvent) => { * api.tap({ x: event.clientX, y: event.clientY }); * } * } * * const viewer = document.querySelector("vertex-viewer"); * viewer.registerInteractionHandler(new CustomInteractionHandler); * ``` * * @param interactionHandler The interaction handler to register. * @returns {Promise} A promise containing the disposable to use to * deregister the handler. */ registerInteractionHandler(interactionHandler: InteractionHandler): Promise; /** * Registers and initializes an interaction handler with the viewer. Returns a * `Disposable` that should be used to deregister the interaction handler. * * `InteractionHandler`s are used to build custom mouse and touch interactions * for the viewer. Use `` to disable * the default camera controls provided by the viewer. * * @example * ``` * class CustomInteractionHandler extends InteractionHandler { * private element: HTMLElement; * private api: InteractionApi; * * public dispose(): void { * this.element.removeEventListener('click', this.handleElementClick); * } * * public initialize(element: HTMLElement, api: InteractionApi): void { * this.api = api; * this.element = element; * this.element.addEventListener('click', this.handleElementClick); * } * * private handleElementClick = (event: MouseEvent) => { * api.tap({ x: event.clientX, y: event.clientY }); * } * } * * const viewer = document.querySelector("vertex-viewer"); * viewer.registerInteractionHandler(new CustomInteractionHandler); * ``` * * @param interactionHandler The interaction handler to register. * @returns {Promise} A promise containing the disposable to use to * deregister the handler. */ registerBasicInteractionHandler(interactionHandler: BasicInteractionHandler): Promise; /** * Registers a key interaction to be invoked when a specific set of * keys are pressed during a `tap` event. * * `KeyInteraction`s are used to build custom keyboard shortcuts for the * viewer using the current state of they keyboard to determine whether * the `fn` should be invoked. Use `` * to disable the default keyboard shortcuts provided by the viewer. * * @example * ``` * class CustomKeyboardInteraction extends KeyInteraction { * constructor(private viewer: HTMLVertexViewerElement) {} * * public predicate(keyState: KeyState): boolean { * return keyState['Alt']; * } * * public async fn(event: TapEventDetails) { * const scene = await this.viewer.scene(); * const result = await scene.raycaster().hitItems(event.position); * * if (result.hits.length > 0) { * await scene * .camera() * .fitTo(q => q.withItemId(result.hits[0].itemId)) * .render(); * } * } * } * ``` * * @param keyInteraction - The `KeyInteraction` to register. */ registerTapKeyInteraction(keyInteraction: KeyInteraction): Promise; /** * The HTML element that will handle interaction events from the user. Used by * components to listen for interaction events from the same element as the * viewer. Note, this property maybe removed in the future when refactoring * our interaction handling. * * @internal * @deprecated Use `InteractionHandler`. */ getInteractionTarget_DEPRECATED(): Promise; /** * Adds a cursor to the viewer, and displays it if the cursor has the highest * priority. * * Cursors are managed as a prioritized list. A cursor is displayed if it has * the highest priority or if the cursor is the most recently added cursor in * the set of cursors with the same priority. * * To remove a cursor, call `dispose()` on the returned disposable. * * @param cursor The cursor to add. * @param priority The priority of the cursor. * @returns A disposable that can be used to remove the cursor. * @see See {@link CursorManager} for constants to pass to `priority`. */ addCursor(cursor: Cursor, priority?: number): Promise; getInteractionHandlers(): Promise; /** * @internal * @ignore */ getKeyInteractions(): Promise[]>; getBaseInteractionHandler(): Promise; /** * @deprecated Use `token`. */ getJwt(): Promise; handleSrcChanged(src: string | undefined): void; /** * @ignore */ protected handleCameraControlsChanged(): void; /** * @ignore */ protected handleKeyboardControlsChanged(): void; /** * @ignore */ protected handleRotateAboutTapPointChanged(): void; protected handleCameraTypeChanged(updatedCameraType: string, previousCameraType: string): void; /** * @ignore */ protected handleStreamAttributesChanged(): void; private handleUpdateStreamAttributesWithTimer; /** * @ignore */ protected handleEnableTemporalRefinementChanged(): void; /** * @ignore */ protected handleConfigChanged(): void; /** * @ignore */ protected handleConfigEnvChanged(): void; /** * Loads the given scene into the viewer and return a `Promise` that * resolves when the scene has been loaded. The specified scene is * provided as a URN in the following format: * * * `urn:vertex:scene:` * * @param urn The URN of the resource to load. * @param options Optional configurations when loading the scene. * cameraType (Optional) The camera type to load. If not included, the default camera type for the resource will be used. */ load(urn: string, options?: LoadOptions): Promise; /** * Disconnects the websocket and removes any internal state associated with * the scene. */ unload(): Promise; /** * Disconnects the websocket and clears the internal state associated with * the scene before reconnecting to the same scene. */ reload(): Promise; /** * Returns an object that is used to perform operations on the `Scene` that's * currently being viewed. These operations include updating items, * positioning the camera and performing hit tests. */ scene(): Promise; /** * Returns `true` indicating that the scene is ready to be interacted with. */ isSceneReady(): Promise; private handleTapEvent; private emitConnectionChange; private handleElementResize; private handleVisibilityChange; private loadOrResumeStream; private registerSlotChangeListeners; private injectViewerApi; private syncViewerStyles; private calculateComponentDimensions; private recalculateComponentDimensions; private reportPerformance; private addStreamListeners; private handleStreamStateChanged; private handleConnecting; private handleConnected; private handleConnectionFailed; private handleDisconnected; private updateDimensions; private updateFrame; private updateViewerBackground; private initializeDefaultInteractionHandlers; private clearDefaultCameraInteractionHandlers; private clearDefaultKeyboardInteractions; private initializeDefaultCameraInteractionHandlers; private initializeDefaultKeyboardInteractionHandlers; private initializeDefaultTapInteractionHandler; private initializeInteractionHandler; private initializeBasicInteractionHandler; private createInteractionApi; private handleCursorChanged; private createScene; /** * This function is currently not in use, but will be required * when we want to automatically configure the background color of * JPEG images. */ private getBackgroundColor; private getBounds; private getCanvasDimensions; private getImageScale; private getStreamAttributes; private updateCanvasDimensions; private updateStreamAttributes; private updateEnableTemporalRefinement; private updateInteractionApi; private updateCameraType; private handleAnnotationSetsChange; private getDepthBufferStreamAttributesValue; private updateResolvedConfig; private getResolvedConfig; private getStream; private getDeviceId; private waitForConnectedState; } export {};