Class Viewer

3D viewer powered by VisualizeJS library.

Hierarchy

EventEmitter2<ViewerEventMap & CanvasEventMap & OptionsEventMap>
- Viewer

Implements

Constructors

constructor

new Viewer(
    client?: Client,
    params?: {
        crossOrigin?: string;
        enableAutoUpdate?: boolean;
        markupType?: MarkupType;
        visualizeJsUrl?: string;
    },
): Viewer
Parameters
- Optionalclient: Client
  The Client instance that is used to load model reference files from the Open Cloud Server. Do not specify Client if you need a standalone viewer instance to view VSFX files from the web or from local computer.
- params: {
      crossOrigin?: string;
      enableAutoUpdate?: boolean;
      markupType?: MarkupType;
      visualizeJsUrl?: string;
  } = {}
  An object containing viewer configuration parameters.
  - OptionalcrossOrigin?: string
    The crossorigin content attribute on Visalize.js script element. One of the following values: "", anonymous or use-credentials.
  - OptionalenableAutoUpdate?: boolean
    Enable auto-update of the viewer after any changes. If the auto-update is disabled, you need to register an update event handler and update the VisualizeJS viewer and active dragger manually. Default is true.
  - OptionalmarkupType?: MarkupType
    The type of the markup core: Visualize (deprecated) or Konva. Default is Konva.
  - OptionalvisualizeJsUrl?: string
    VisualizeJS library URL. Set this URL to use your own library instance, or specify undefined or blank to use the default URL defined by Viewer.visualize library you are using.
Returns Viewer
Overrides EventEmitter2<ViewerEventMap & CanvasEventMap & OptionsEventMap>.constructor

Properties

canvas

canvas: HTMLCanvasElement

HTMLCanvasElement for the viewer used to operate on. Defined only while the viewer is initialized.

canvasEvents

canvasEvents: string[]

List of canvas events, such as mouse events or pointer events or touch events that the viewer should listen and redirect to the draggers and components.

By default, the following events are redirected:

click
contextmenu
dblclick
mousedown
mouseleave
mousemove
mouseup
pointercancel
pointerdown
pointerleave
pointermove
pointerup
touchcancel
touchend
touchmove
touchstart
wheel

client

client: Client

The Client instance that is used to load model reference files from the Open Cloud Server.

Accessors

components

get components(): string[]
List of names of available components.

Returns string[]
Implementation of IViewer.components

draggers

get draggers(): string[]
List of names of available draggers.

The following draggers are available by default:
- Pan
- Orbit
- Zoom
- MeasureLine
- CuttingPlaneXAxis
- CuttingPlaneYAxis
- CuttingPlaneZAxis
- Walk
For a quick reference on how to implement your own dragger, see IDragger.
Returns string[]
Implementation of IViewer.draggers

markup

get markup(): IMarkup
2D markup core instance used to create markups.

Returns IMarkup

options

get options(): IOptions
Viewer options.

Returns IOptions
Implementation of IViewer.options

visualizeJs

get visualizeJs(): any
Returns VisualizeJS module instance.

Returns any

visualizeJsUrl

get visualizeJsUrl(): string
VisualizeJS library URL. Use configure() to change library URL.

Returns string

Methods

activeDragger

activeDragger(): IDragger
Returns the active dragger reference, or null if there is no active dragger.

Returns IDragger
Implementation of IViewer.activeDragger

addEventListener

addEventListener<
    T extends
        (keyof ViewerEventMap)
        | (keyof CanvasEventMap)
        | "optionschange",
>(
    type: T,
    listener: (
        event: (ViewerEventMap & CanvasEventMap & OptionsEventMap)[T],
    ) => void,
): this
Registers a new listener for the event type.
Type Parameters
- T extends (keyof ViewerEventMap) | (keyof CanvasEventMap) | "optionschange"
Parameters
- type: T
  The type of event to listen to.
- listener: (event: (ViewerEventMap & CanvasEventMap & OptionsEventMap)[T]) => void
  The function that gets called when the event is fired.
Returns this
Implementation of IViewer.addEventListener
Inherited from EventEmitter2.addEventListener

addMarkupEntity

addMarkupEntity(entityName: string): any
Adds an empty Visualize markup entity to the overlay.
Parameters
- entityName: string
Returns any

cancel

cancel(): this
Cancels asynchronous file loading started with open().

Fires:
- calcel
Returns this
Implementation of IViewer.cancel

clear

clear(): this
Unloads an open file, clears the canvas and markups, deactivates the active dragger.

Fires:
- clear
Returns this
Implementation of IViewer.clear

clearOverlay

clearOverlay(): void
Clears the overlay view.

Returns void
Implementation of IViewer.clearOverlay

clearSelected

clearSelected(): void
Unselects all objects.

Fires:
- select
Returns void
Implementation of IViewer.clearSelected

clearSlices

clearSlices(): void
Removes all cutting planes.

Returns void
Implementation of IViewer.clearSlices

collect

collect(): void
Collect model objects back. Alias to explode(0).

Fires:
- explode
Returns void
Implementation of IViewer.collect

colorizeAllMarkup

colorizeAllMarkup(r?: number, g?: number, b?: number): void
Deprecated since 25.11. Use markup.colorizeAllMarkup() instead.
Parameters
- r: number = 255
- g: number = 0
- b: number = 0
Returns void

colorizeSelectedMarkups

colorizeSelectedMarkups(r?: number, g?: number, b?: number): void
Deprecated since 25.11. Use markup.colorizeSelectedMarkups() instead.
Parameters
- r: number = 255
- g: number = 0
- b: number = 0
Returns void

configure

configure(params: { crossOrigin?: string; visualizeJsUrl?: string }): this
Changes the viewer parameters.
Parameters
- params: { crossOrigin?: string; visualizeJsUrl?: string }
  An object containing new parameters.
  - OptionalcrossOrigin?: string
    The crossorigin content attribute on Visalize.js script element. One of the following values: "", anonymous or use-credentials.
  - OptionalvisualizeJsUrl?: string
    VisualizeJS library URL. Set this URL to use your own library instance or specify undefined or blank to use the default URL defined by Viewer.visualize library you are using.
Returns this

createViewpoint

createViewpoint(): IViewpoint
Saves the viewer state at the viewpoint.

To save a viewpoint to the server for a specific file, use the File.saveViewpoint().

Returns IViewpoint
Implementation of IViewer.createViewpoint

dispose

dispose(): this
Unloads an open file, clears the canvas and markups, and releases resources allocated by this viewer instance. Call this method before release the Viewer instance.

Returns this
Implementation of IViewer.dispose

drawViewpoint

drawViewpoint(viewpoint: IViewpoint): void
Sets the viewer state to the specified viewpoint.

To get a list of available viewpoints from the server for a specific file, use the File.getViewpoints().
Parameters
- viewpoint: IViewpoint
  Viewpoint data.
Returns void
Implementation of IViewer.drawViewpoint

emit

emit(type: string | object, ...args: any[]): boolean
Fires the event. Alias to emitEvent().
Parameters
- type: string | object
  The type of event that gets fired.
- ...args: any[]
  The event properties.
Returns boolean
Implementation of IViewer.emit
Inherited from EventEmitter2.emit

emitEvent

emitEvent<
    T extends
        (keyof ViewerEventMap)
        | (keyof CanvasEventMap)
        | "optionschange",
>(
    event: Event<Extract<T, string>> & (
        ViewerEventMap & CanvasEventMap & OptionsEventMap
    )[T],
): boolean
Fires the event. Calls each of the listeners registered for the event type event.type, in the order they were registered.
Type Parameters
- T extends (keyof ViewerEventMap) | (keyof CanvasEventMap) | "optionschange"
Parameters
- event: Event<Extract<T, string>> & (ViewerEventMap & CanvasEventMap & OptionsEventMap)[T]
  The event that gets fired.
Returns boolean
Implementation of IViewer.emitEvent
Inherited from EventEmitter2.emitEvent

executeCommand

executeCommand(id: string, ...args: any[]): any
Executes the command denoted by the given command. If the command is not found, tries to set active dragger with the specified name.

The following commands are available by default:
- applyModelTransform
- autoTransformAllModelsToCentralPoint
- clearMarkup
- clearSelected
- clearSlices
- createPreview
- explode
- getDefaultViewPositions
- getModels
- getSelected
- hideSelected
- isolateSelected
- regenerateAll
- resetView
- selectModel
- setActiveDragger
- setDefaultViewPosition
- setMarkupColor
- setSelected
- showAll
- zoomToExtents
- zoomToObjects
- zoomToSelected
To register custom command use the commands.registerCommand.
Parameters
- id: string
  Command ID or dragger name.
- ...args: any[]
  Parameters passed to the command handler function.
Returns any
Returns the result of the command handler function or new active dragger instance. Returns undefined if neither the command nor the dragger exists.

Implementation of IViewer.executeCommand

explode

explode(index?: number): void
Breaks the model into its component objects. To collect objects back use index 0.

Fires:
- explode
Parameters
- index: number = 0
  Explode index. Range is 0 to 100.
Returns void
Implementation of IViewer.explode

getComponent

getComponent(name: string): IComponent
Returns the component reference, or null if there is no component with the specified name.
Parameters
- name: string
Returns IComponent
Implementation of IViewer.getComponent

getMarkupColor

getMarkupColor(): { b: number; g: number; r: number }
Deprecated since 25.11. Use markup.getMarkupColor() instead.

Returns { b: number; g: number; r: number }

getScale

getScale(): { x: number; y: number; z: number }
Returns the scaling factors for each axis in world space.

Returns { x: number; y: number; z: number }
Implementation of IWorldTransform.getScale

getSelected

getSelected(): string[]
Returns a list of original handles for the selected objects.

Returns string[]
Implementation of IViewer.getSelected

hideSelected

hideSelected(): void
Makes the selected objects invisible.

Fires:
- hide
- select
Returns void
Implementation of IViewer.hideSelected

initialize

initialize(
canvas: HTMLCanvasElement,
onProgress?: (event: ProgressEvent) => void,
): Promise<Viewer>
Loads the VisualizeJS module and initializes it with the specified canvas. Call dispose() to release allocated resources.

Fires:
- initialize
- initializeprogress
Parameters
- canvas: HTMLCanvasElement
  HTMLCanvasElement for VisualizeJS.
- OptionalonProgress: (event: ProgressEvent) => void
  A callback function that handles events measuring progress of loading of the VisualizeJS library.
Returns Promise<Viewer>
Implementation of IViewer.initialize

is3D

is3D(): boolean
Returns true if current opened model is 3D model.

Returns boolean
Implementation of IViewer.is3D

isInitialized

isInitialized(): boolean
Returns true if VisualizeJS module has been loaded and initialized.

Returns boolean
Implementation of IViewer.isInitialized

isolateSelected

isolateSelected(): void
Hides all objects except selected.

Fires:
- isolate
Returns void
Implementation of IViewer.isolateSelected

off

off(type: string, listener: (event: any) => void): this
Removes the listener from an event type. Alias to removeEventListener().
Parameters
- type: string
  The type of the event that gets removed.
- listener: (event: any) => void
  The listener function that gets removed.
Returns this
Implementation of IViewer.off
Inherited from EventEmitter2.off

on

on(type: string, listener: (event: any) => void): this
Registers a new listener for the event type. Alias to addEventListener()
Parameters
- type: string
  The type of event to listen to.
- listener: (event: any) => void
  The function that gets called when the event is fired.
Returns this
Implementation of IViewer.on
Inherited from EventEmitter2.on

open

open(
    file: FileSource,
    params?: {
        format?: string;
        mode?: string;
        requestHeader?: HeadersInit;
        withCredentials?: boolean;
    },
): Promise<Viewer>
Loads a file into the viewer.

The viewer must be initialized before opening the file. Otherwise, open() does nothing.

This method requires a Client instance to be specified to load file from the Open Cloud Server. The file geometry data on the Open Cloud Server must be converted into a vsfx format, otherwise an exception will be thrown.

For files from Open Cloud Server, the default model will be loaded. If there is no default model, first availiable model will be loaded. If no models are found in the file, an exception will be thrown.

For URLs, the file extension is used to determine the file format. For a ArrayBuffer and Data URL, a file format must be specified using params.format parameter (see below). If no appropriate loader is found for the specified format, an exception will be thrown.

If there was an active dragger before opening the file, it will be deactivated. After opening the file, you must manually activate the required dragger.

To open a large files, enable partial streaming mode before opening. Partial streaming is only supported when opening files from an Open Cloud Server, but not local files and URLs. Example:
```
viewer.options.enableStreamingMode = true;
viewer.options.enablePartialMode = true;
await viewer.open(file);
```
Fires:
Parameters
- file: FileSource
  File to load. Can be one of:
  
  File, Assembly or Model instance from the Open Cloud Server
  
  File URL string
  
  Data URL string
  
  Web API File object
  
  ArrayBuffer object
- params: {
      format?: string;
      mode?: string;
      requestHeader?: HeadersInit;
      withCredentials?: boolean;
  } = {}
  Loading parameters.
  - Optionalformat?: string
    File format string. Required when loading a file as ArrayBuffer or Data URL.
  - Optionalmode?: string
    Reserved for future use.
  - OptionalrequestHeader?: HeadersInit
    The request header used in HTTP request.
  - OptionalwithCredentials?: boolean
    Whether the HTTP request uses credentials such as cookies, authorization headers or TLS client certificates. See XMLHttpRequest.withCredentials for more details.
Returns Promise<Viewer>
Implementation of IViewer.open

openVsfFile

openVsfFile(buffer: ArrayBuffer | Uint8Array<ArrayBufferLike>): this
Deprecated since 26.4. Use open() instead.
Parameters
- buffer: ArrayBuffer | Uint8Array<ArrayBufferLike>
Returns this
Deprecated

openVsfxFile

openVsfxFile(buffer: ArrayBuffer | Uint8Array<ArrayBufferLike>): this
Deprecated since 26.4. Use open() instead.
Parameters
- buffer: ArrayBuffer | Uint8Array<ArrayBufferLike>
Returns this
Deprecated

registerDragger

registerDragger(name: string, dragger: typeof Dragger): void
Deprecated since 25.12. Use draggers.registerDragger instead.
Parameters
- name: string
- dragger: typeof Dragger
Returns void

removeAllListeners

removeAllListeners<
    T extends
        (keyof ViewerEventMap)
        | (keyof CanvasEventMap)
        | "optionschange",
>(
    type?: T,
): this
If type is specified, removes all registered listeners for type, otherwise removes all registered listeners.
Type Parameters
- T extends (keyof ViewerEventMap) | (keyof CanvasEventMap) | "optionschange"
Parameters
- Optionaltype: T
  The type of the listener that gets removed.
Returns this
Implementation of IViewer.removeAllListeners
Inherited from EventEmitter2.removeAllListeners

removeEventListener

removeEventListener<
    T extends
        (keyof ViewerEventMap)
        | (keyof CanvasEventMap)
        | "optionschange",
>(
    type: T,
    listener: (
        event: (ViewerEventMap & CanvasEventMap & OptionsEventMap)[T],
    ) => void,
): this
Removes the listener for the event type.
Type Parameters
- T extends (keyof ViewerEventMap) | (keyof CanvasEventMap) | "optionschange"
Parameters
- type: T
  The type of the event that gets removed.
- listener: (event: (ViewerEventMap & CanvasEventMap & OptionsEventMap)[T]) => void
  The listener function that gets removed.
Returns this
Implementation of IViewer.removeEventListener
Inherited from EventEmitter2.removeEventListener

resetActiveDragger

resetActiveDragger(): void
Resets the state of the active dragger.

Returns void
Implementation of IViewer.resetActiveDragger

screenToWorld

screenToWorld(
position: { x: number; y: number },
): { x: number; y: number; z: number }
Transforms position from screen space into world space.
Parameters
- position: { x: number; y: number }
  Screen position in pixels.
Returns { x: number; y: number; z: number }
Implementation of IWorldTransform.screenToWorld

setActiveDragger

setActiveDragger(name?: string): IDragger
Changes the active dragger. The viewer must be initialized before activating the dragger, otherwise an exception will be thrown.

Fires:
- changeactivedragger
Parameters
- name: string = ""
  Dragger name. Can be one of the draggers list or an ampty string to deactivate the current dragger.
Returns IDragger
Returns the new active dragger reference or null if there is no dragger with the given name.

Implementation of IViewer.setActiveDragger

setMarkupColor

setMarkupColor(r?: number, g?: number, b?: number): void
Deprecated since 25.11. Use markup.setMarkupColor() instead.
Parameters
- r: number = 255
- g: number = 0
- b: number = 0
Returns void

setSelected

setSelected(handles?: string[]): void
Selects the objects by original handles.

Fires:
- select
Parameters
- Optionalhandles: string[]
  The list of original handles.
Returns void
Implementation of IViewer.setSelected

setSize

setSize(width: number, height: number, updateStyle?: boolean): void
Resizes the output canvas to (width, height) with device pixel ratio taken into account.

Fires:
- resize
Parameters
- width: number
  The width of the canvas.
- height: number
  The height of the canvas.
- updateStyle: boolean = true
  Setting updateStyle to false prevents any style changes to the output canvas.
Returns void
Implementation of IViewer.setSize

showAll

showAll(): void
Makes all objects visible.

Fires:
- showall
Returns void
Implementation of IViewer.showAll

syncOverlay

syncOverlay(): void
Creates an overlay view. Overlay view is used to draw cutting planes and markups.

Returns void
Implementation of IViewer.syncOverlay

update

update(force?: boolean): void
Updates the viewer.

Do nothing if the auto-update mode is disabled in the constructor. In this case, register an update event handler and update the Visualize viewer and active dragger manually.

Fires:
- update
Parameters
- force: boolean = false
  If true updates the viewer immidietly. Otherwise updates on next animation frame. Default is false.
Returns void
Implementation of IViewer.update

updateAsync

updateAsync(
maxScheduleUpdateTimeInMs?: number,
maxScheduleUpdateCount?: number,
): Promise<void>
Updates the viewer asynchronously without locking the user interface. Used to update the viewer after changes that require a long rendering time.

Do nothing if the auto-update mode is disabled in the constructor. In this case, register an update event handler and update the VisualizeJS viewer and active dragger manually.

Fires:
- update
Parameters
- maxScheduleUpdateTimeInMs: number = 50
  Maximum time for one update, default 30 ms.
- maxScheduleUpdateCount: number = 50
  Maximum count of scheduled updates.
Returns Promise<void>

visLib

visLib(): any
Returns VisualizeJS module instance.

Returns any

visViewer

visViewer(): any
Returns VisualizeJS Viewer instance.

Returns any

worldToScreen

worldToScreen(
position: { x: number; y: number; z: number },
): { x: number; y: number }
Transforms position from world space into screen space.
Parameters
- position: { x: number; y: number; z: number }
  Position in world space coordinates.
Returns { x: number; y: number }
Implementation of IWorldTransform.worldToScreen

Class Viewer

Hierarchy

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

OptionalcrossOrigin?: string

OptionalenableAutoUpdate?: boolean

OptionalmarkupType?: MarkupType

OptionalvisualizeJsUrl?: string

Returns Viewer

Properties

canvas

canvasEvents

client

Accessors

components

Returns string[]

draggers

Returns string[]

markup

Returns IMarkup

options

Returns IOptions

visualizeJs

Returns any

visualizeJsUrl

Returns string

Methods

activeDragger

Returns IDragger

addEventListener

Type Parameters

Parameters

Returns this

addMarkupEntity

Parameters

Returns any

cancel

Returns this

clear

Returns this

clearOverlay

Returns void

clearSelected

Returns void

clearSlices

Returns void

collect

Returns void

colorizeAllMarkup

Parameters

Returns void

colorizeSelectedMarkups

Parameters

Returns void

configure

Parameters

OptionalcrossOrigin?: string

OptionalvisualizeJsUrl?: string

Returns this

createViewpoint

Returns IViewpoint

dispose

Returns this

drawViewpoint

Parameters

Returns void

emit

Parameters

Returns boolean

emitEvent

Type Parameters

Parameters

Returns boolean

`Optional`crossOrigin?: string

`Optional`enableAutoUpdate?: boolean

`Optional`markupType?: MarkupType

`Optional`visualizeJsUrl?: string

`Optional`crossOrigin?: string

`Optional`visualizeJsUrl?: string

`Optional`format?: string

`Optional`mode?: string

`Optional`requestHeader?: HeadersInit

`Optional`withCredentials?: boolean