@inweb/viewer-visualize 26.1.0 → 26.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/viewer-visualize.js +585 -553
  2. package/dist/viewer-visualize.js.map +1 -1
  3. package/dist/viewer-visualize.min.js +1 -1
  4. package/dist/viewer-visualize.module.js +77 -76
  5. package/dist/viewer-visualize.module.js.map +1 -1
  6. package/lib/Viewer/Commands/index.d.ts +14 -8
  7. package/lib/Viewer/Components/index.d.ts +20 -20
  8. package/lib/Viewer/Draggers/index.d.ts +25 -19
  9. package/lib/Viewer/Viewer.d.ts +58 -55
  10. package/package.json +5 -5
  11. package/src/Viewer/Commands/GetSelected.ts +2 -2
  12. package/src/Viewer/Commands/index.ts +14 -8
  13. package/src/Viewer/Components/index.ts +20 -20
  14. package/src/Viewer/Draggers/index.ts +25 -19
  15. package/src/Viewer/Viewer.ts +60 -56
package/lib/Viewer/Commands/index.d.ts CHANGED
@@ -7,16 +7,22 @@ import { ICommandsRegistry } from "@inweb/viewer-core";
7
7
  * 1. Define a command handler with a first `viewer` parameter.
8
8
  * 2. Register command handler in the commands registry by calling the {@link commands.registerCommand}.
9
9
  *
10
- * @example <caption>Implementing a custom command.</caption>
11
- * import { commands, Viewer } from "@inweb/viewer-visualize";
10
+ * @example Implementing a custom command.
12
11
  *
13
- * function commandHandler(viewer: Viewer, name = "world"): void {
14
- * console.log(`Hello ${name}!!!`);
15
- * }
12
+ * ```javascript
13
+ * import { commands, Viewer } from "@inweb/viewer-visualize";
16
14
  *
17
- * commands.registerCommand("sayHello", commandHandler);
15
+ * function commandHandler(viewer: Viewer, name = "world"): void {
16
+ * console.log(`Hello ${name}!!!`);
17
+ * }
18
18
  *
19
- * @example <caption>Calling a custom command.</caption>
20
- * viewer.executeCommand("sayHello", "user");
19
+ * commands.registerCommand("sayHello", commandHandler);
20
+ * ```
21
+ *
22
+ * @example Calling a custom command.
23
+ *
24
+ * ```javascript
25
+ * viewer.executeCommand("sayHello", "user");
26
+ * ```
21
27
  */
22
28
  export declare const commands: ICommandsRegistry;
package/lib/Viewer/Components/index.d.ts CHANGED
@@ -6,35 +6,35 @@ import { IComponentsRegistry } from "@inweb/viewer-core";
6
6
  *
7
7
  * 1. Define a component class implements {@link IComponent}.
8
8
  * 2. Define a constructor with a `viewer` parameter and add mouse event listeners for the specified viewer.
9
- * 3. Define the component logic in the event listeners. For example, listen for the `mousedown`
10
- * event and select objects when the left mouse button is pressed.
9
+ * 3. Define the component logic in the event listeners. For example, listen for the `mousedown` event and
10
+ * select objects when the left mouse button is pressed.
11
11
  * 4. Override {@link IComponent.dispose} and remove mouse event listeners from the viewer.
12
12
  * 5. Register component provider in the components registry by calling the
13
13
  * {@link components.registerComponent}.
14
14
  *
15
- * @example <caption>Implementing a custom component.</caption>
16
- * import { IComponent, components, Viewer } from "@inweb/viewer-visualize";
15
+ * @example Implementing a custom component.
17
16
  *
18
- * class MyComponent implements IComponent {
19
- * protected viewer: Viewer;
17
+ * ```javascript
18
+ * import { IComponent, components, Viewer } from "@inweb/viewer-visualize";
20
19
  *
21
- * constructor(viewer: Viewer) {
22
- * this.viewer = viewer;
23
- * this.viewer.addEventListener("mousedown", this.onMouseDown);
24
- * }
20
+ * class MyComponent implements IComponent {
21
+ * protected viewer: Viewer;
25
22
  *
26
- * override dispose() {
27
- * this.viewer.removeEventListener("mousedown", this.onMouseDown);
28
- * }
23
+ * constructor(viewer: Viewer) {
24
+ * this.viewer = viewer;
25
+ * this.viewer.addEventListener("mousedown", this.onMouseDown);
26
+ * }
29
27
  *
30
- * onMouseDown = (event: PointerEvent) => {
31
- * // place custom logic here
32
- * };
28
+ * override dispose() {
29
+ * this.viewer.removeEventListener("mousedown", this.onMouseDown);
33
30
  * }
34
31
  *
35
- * components.registerComponent(
36
- * "MyComponent",
37
- * (viewer): IComponent => new MyComponent(viewer)
38
- * );
32
+ * onMouseDown = (event: PointerEvent) => {
33
+ * // place custom logic here
34
+ * };
35
+ * }
36
+ *
37
+ * components.registerComponent( "MyComponent", (viewer): IComponent => new MyComponent(viewer));
38
+ * ```
39
39
  */
40
40
  export declare const components: IComponentsRegistry;
package/lib/Viewer/Draggers/index.d.ts CHANGED
@@ -6,35 +6,41 @@ import { IDraggersRegistry } from "@inweb/viewer-core";
6
6
  *
7
7
  * 1. Define a dragger class implements {@link IDragger}.
8
8
  * 2. Define a constructor with a `viewer` parameter and add mouse event listeners for the specified viewer.
9
- * 3. Define the dragger logic in the event listeners. For example, listen for the `mousemove`
10
- * event and zoom in/out when the left mouse button is pressed.
9
+ * 3. Define the dragger logic in the event listeners. For example, listen for the `mousemove` event and
10
+ * zoom in/out when the left mouse button is pressed.
11
11
  * 4. Override {@link IDragger.dispose} and remove mouse event listeners from the viewer.
12
12
  * 5. Register dragger provider in the draggers registry by calling the {@link draggers.registerDragger}.
13
13
  *
14
- * @example <caption>Implementing a custom dragger.</caption>
15
- * import { IDragger, draggers, Viewer } from "@inweb/viewer-visualize";
14
+ * @example Implementing a custom dragger.
16
15
  *
17
- * class MyDragger implements IDragger {
18
- * protected viewer: Viewer;
16
+ * ```javascript
17
+ * import { IDragger, draggers, Viewer } from "@inweb/viewer-visualize";
19
18
  *
20
- * constructor(viewer: Viewer) {
21
- * this.viewer = viewer;
22
- * this.viewer.addEventListener("pointermove", this.onPointerMove);
23
- * }
19
+ * class MyDragger implements IDragger {
20
+ * protected viewer: Viewer;
24
21
  *
25
- * override dispose() {
26
- * this.viewer.removeEventListener("pointermove", this.onPointerMove);
27
- * }
22
+ * constructor(viewer: Viewer) {
23
+ * this.viewer = viewer;
24
+ * this.viewer.addEventListener("pointermove", this.onPointerMove);
25
+ * }
28
26
  *
29
- * onPointerMove = (event: PointerEvent) => {
30
- * // place custom logic here
31
- * };
27
+ * override dispose() {
28
+ * this.viewer.removeEventListener("pointermove", this.onPointerMove);
32
29
  * }
33
30
  *
34
- * draggers.registerDragger("MyDragger", (viewer): IDragger => new MyDragger(viewer));
31
+ * onPointerMove = (event: PointerEvent) => {
32
+ * // place custom logic here
33
+ * };
34
+ * }
35
+ *
36
+ * draggers.registerDragger("MyDragger", (viewer): IDragger => new MyDragger(viewer));
37
+ * ```
38
+ *
39
+ * @example Activating a custom dragger.
35
40
  *
36
- * @example <caption>Activating a custom dragger.</caption>
37
- * viewer.setActiveDragger("MyDragger");
41
+ * ```javascript
42
+ * viewer.setActiveDragger("MyDragger");
43
+ * ```
38
44
  */
39
45
  declare const draggers: IDraggersRegistry;
40
46
  export { draggers };
package/lib/Viewer/Viewer.d.ts CHANGED
@@ -4,8 +4,8 @@ import { CanvasEventMap, Dragger, IComponent, IDragger, IOptions, IViewer, IView
4
4
  import { IMarkup, IWorldTransform } from "@inweb/markup";
5
5
  import { MarkupType } from "./Markup/MarkupFactory";
6
6
  /**
7
- * 3D viewer powered by
8
- * {@link https://cloud.opendesign.com/docs/index.html#/visualizejs | VisualizeJS} library.
7
+ * 3D viewer powered by {@link https://cloud.opendesign.com/docs/index.html#/visualizejs | VisualizeJS}
8
+ * library.
9
9
  */
10
10
  export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMap & OptionsEventMap> implements IViewer, IWorldTransform {
11
11
  private _activeDragger;
@@ -27,18 +27,18 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
27
27
  _abortControllerForReferences: AbortController | undefined;
28
28
  client: Client | undefined;
29
29
  /**
30
- * @param client - The `Client` instance that is used to load model reference files from the
31
- * Open Cloud Server. Do not specify `Client` if you need a standalone viewer instance to
32
- * view `VSFX` files from the web or from local computer.
30
+ * @param client - The `Client` instance that is used to load model reference files from the Open Cloud
31
+ * Server. Do not specify `Client` if you need a standalone viewer instance to view `VSFX` files from
32
+ * the web or from local computer.
33
33
  * @param params - An object containing viewer configuration parameters.
34
- * @param params.visualizeJsUrl - `VisualizeJS` library URL. Set this URL to use your own
35
- * library instance, or specify `undefined` or blank to use the default URL defined by
36
- * `Viewer.visualize` library you are using.
37
- * @param params.enableAutoUpdate - Enable auto-update of the viewer after any changes. If
38
- * the auto-update is disabled, you need to register an `update` event handler and update
39
- * the `VisualizeJS` viewer and active dragger manually. Default is `true`.
40
- * @param params.markupType - The type of the markup core: `Visualize` (deprecated) or
41
- * `Konva`. Default is `Konva`.
34
+ * @param params.visualizeJsUrl - `VisualizeJS` library URL. Set this URL to use your own library
35
+ * instance, or specify `undefined` or blank to use the default URL defined by `Viewer.visualize`
36
+ * library you are using.
37
+ * @param params.enableAutoUpdate - Enable auto-update of the viewer after any changes. If the
38
+ * auto-update is disabled, you need to register an `update` event handler and update the
39
+ * `VisualizeJS` viewer and active dragger manually. Default is `true`.
40
+ * @param params.markupType - The type of the markup core: `Visualize` (deprecated) or `Konva`. Default
41
+ * is `Konva`.
42
42
  */
43
43
  constructor(client?: Client, params?: {
44
44
  visualizeJsUrl?: string;
@@ -65,9 +65,9 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
65
65
  * Changes the viewer parameters.
66
66
  *
67
67
  * @param params - An object containing new parameters.
68
- * @param params.visualizeJsUrl - `VisualizeJS` library URL. Set this URL to use your own
69
- * library instance or specify `undefined` or blank to use the default URL defined by
70
- * `Viewer.visualize` library you are using.
68
+ * @param params.visualizeJsUrl - `VisualizeJS` library URL. Set this URL to use your own library
69
+ * instance or specify `undefined` or blank to use the default URL defined by `Viewer.visualize`
70
+ * library you are using.
71
71
  */
72
72
  configure(params: {
73
73
  visualizeJsUrl?: string;
@@ -82,10 +82,10 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
82
82
  * - {@link InitializeProgressEvent | initializeprogress}
83
83
  *
84
84
  * @param canvas -
85
- * {@link https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement | HTMLCanvasElement}
86
- * for `VisualizeJS`.
87
- * @param onProgress - A callback function that handles events measuring progress of loading
88
- * of the `VisualizeJS` library.
85
+ * {@link https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement | HTMLCanvasElement} for
86
+ * `VisualizeJS`.
87
+ * @param onProgress - A callback function that handles events measuring progress of loading of the
88
+ * `VisualizeJS` library.
89
89
  */
90
90
  initialize(canvas: HTMLCanvasElement, onProgress?: (event: ProgressEvent) => void): Promise<this>;
91
91
  dispose(): this;
@@ -98,24 +98,24 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
98
98
  /**
99
99
  * Updates the viewer.
100
100
  *
101
- * Do nothing if the auto-update mode is disabled in the constructor. In this case, register
102
- * an `update` event handler and update the `Visualize` viewer and active dragger manually.
101
+ * Do nothing if the auto-update mode is disabled in the constructor. In this case, register an
102
+ * `update` event handler and update the `Visualize` viewer and active dragger manually.
103
103
  *
104
104
  * Fires:
105
105
  *
106
106
  * - {@link UpdateEvent | update}
107
107
  *
108
- * @param force - If `true` updates the viewer immidietly. Otherwise updates on next
109
- * animation frame. Default is `false`.
108
+ * @param force - If `true` updates the viewer immidietly. Otherwise updates on next animation frame.
109
+ * Default is `false`.
110
110
  */
111
111
  update(force?: boolean): void;
112
112
  private scheduleUpdateAsync;
113
113
  /**
114
- * Updates the viewer asynchronously without locking the user interface. Used to update the
115
- * viewer after changes that require a long rendering time.
114
+ * Updates the viewer asynchronously without locking the user interface. Used to update the viewer
115
+ * after changes that require a long rendering time.
116
116
  *
117
- * Do nothing if the auto-update mode is disabled in the constructor. In this case, register
118
- * an `update` event handler and update the `VisualizeJS` viewer and active dragger manually.
117
+ * Do nothing if the auto-update mode is disabled in the constructor. In this case, register an
118
+ * `update` event handler and update the `VisualizeJS` viewer and active dragger manually.
119
119
  *
120
120
  * Fires:
121
121
  *
@@ -126,18 +126,18 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
126
126
  */
127
127
  updateAsync(maxScheduleUpdateTimeInMs?: number, maxScheduleUpdateCount?: number): Promise<void>;
128
128
  /**
129
- * Returns `VisualizeJS`
130
- * {@link https://cloud.opendesign.com/docs/index.html#/visualizejs_api | module} instance.
129
+ * Returns `VisualizeJS` {@link https://cloud.opendesign.com/docs/index.html#/visualizejs_api | module}
130
+ * instance.
131
131
  */
132
132
  get visualizeJs(): any;
133
133
  /**
134
- * Returns `VisualizeJS`
135
- * {@link https://cloud.opendesign.com/docs/index.html#/visualizejs_api | module} instance.
134
+ * Returns `VisualizeJS` {@link https://cloud.opendesign.com/docs/index.html#/visualizejs_api | module}
135
+ * instance.
136
136
  */
137
137
  visLib(): any;
138
138
  /**
139
- * Returns `VisualizeJS`
140
- * {@link https://cloud.opendesign.com/docs/index.html#/vis/Viewer | Viewer} instance.
139
+ * Returns `VisualizeJS` {@link https://cloud.opendesign.com/docs/index.html#/vis/Viewer | Viewer}
140
+ * instance.
141
141
  */
142
142
  visViewer(): any;
143
143
  syncOpenCloudVisualStyle(isInitializing: boolean): this;
@@ -194,15 +194,15 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
194
194
  *
195
195
  * The file geometry data on the server must be converted to `VSFX` format.
196
196
  *
197
- * To open a large file, enable {@link IOptions.enablePartialMode | partial streaming} mode
198
- * before opening (see example below).
197
+ * To open a large file, enable {@link IOptions.enablePartialMode | partial streaming} mode before
198
+ * opening (see example below).
199
199
  *
200
- * This method requires a `Client` instance to be specified when creating the viewer to load
201
- * model reference files from the Open Cloud Server. For a standalone viewer instance use
200
+ * This method requires a `Client` instance to be specified when creating the viewer to load model
201
+ * reference files from the Open Cloud Server. For a standalone viewer instance use
202
202
  * {@link openVsfFile | openVsfFile()} or {@link openVsfxFile | openVsfxFile()}.
203
203
  *
204
- * If there was an active dragger before opening the file, it will be deactivated. After
205
- * opening the file, you must manually activate the required dragger.
204
+ * If there was an active dragger before opening the file, it will be deactivated. After opening the
205
+ * file, you must manually activate the required dragger.
206
206
  *
207
207
  * Fires:
208
208
  *
@@ -214,14 +214,17 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
214
214
  * - {@link GeometryEndEvent | geometryend}
215
215
  * - {@link GeometryErrorEvent | geometryerror}
216
216
  *
217
- * @example <caption>Using partial streaming mode to open a large file from a server.</caption>
218
- * viewer.options.enableStreamingMode = true;
219
- * viewer.options.enablePartialMode = true;
220
- * await viewer.open(file);
217
+ * @example Using partial streaming mode to open a large file from a server.
221
218
  *
222
- * @param file - File, assembly or specific model to load. If a `File` instance with multiple
223
- * models is specified, the default model will be loaded. If there is no default model,
224
- * first availiable model will be loaded.
219
+ * ```javascript
220
+ * viewer.options.enableStreamingMode = true;
221
+ * viewer.options.enablePartialMode = true;
222
+ * await viewer.open(file);
223
+ * ```
224
+ *
225
+ * @param file - File, assembly or specific model to load. If a `File` instance with multiple models is
226
+ * specified, the default model will be loaded. If there is no default model, first availiable model
227
+ * will be loaded.
225
228
  */
226
229
  open(file: File | Assembly | Model): Promise<this>;
227
230
  /**
@@ -230,8 +233,8 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
230
233
  * This method does not support {@link IOptions.enableStreamingMode | streaming} or
231
234
  * {@link IOptions.enablePartialMode | partial streaming} mode.
232
235
  *
233
- * If there was an active dragger before opening the file, it will be deactivated. After
234
- * opening the file, you must manually activate the required dragger.
236
+ * If there was an active dragger before opening the file, it will be deactivated. After opening the
237
+ * file, you must manually activate the required dragger.
235
238
  *
236
239
  * Fires:
237
240
  *
@@ -251,8 +254,8 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
251
254
  * This method does not support {@link IOptions.enableStreamingMode | streaming} or
252
255
  * {@link IOptions.enablePartialMode | partial streaming} mode.
253
256
  *
254
- * If there was an active dragger before opening the file, it will be deactivated. After
255
- * opening the file, you must manually activate the required dragger.
257
+ * If there was an active dragger before opening the file, it will be deactivated. After opening the
258
+ * file, you must manually activate the required dragger.
256
259
  *
257
260
  * Fires:
258
261
  *
@@ -304,8 +307,8 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
304
307
  private getSelection;
305
308
  private setSelection;
306
309
  /**
307
- * Executes the command denoted by the given command. If the command is not found, tries to
308
- * set active dragger with the specified name.
310
+ * Executes the command denoted by the given command. If the command is not found, tries to set active
311
+ * dragger with the specified name.
309
312
  *
310
313
  * The following commands are available by default:
311
314
  *
@@ -337,8 +340,8 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
337
340
  *
338
341
  * @param id - Command ID or dragger name.
339
342
  * @param args - Parameters passed to the command handler function.
340
- * @returns Returns the result of the command handler function or new active dragger
341
- * instance. Returns `undefined` if neither the command nor the dragger exists.
343
+ * @returns Returns the result of the command handler function or new active dragger instance. Returns
344
+ * `undefined` if neither the command nor the dragger exists.
342
345
  */
343
346
  executeCommand(id: string, ...args: any[]): any;
344
347
  deviceAutoRegeneration(): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@inweb/viewer-visualize",
3
- "version": "26.1.0",
3
+ "version": "26.1.2",
4
4
  "description": "JavaScript library for rendering CAD and BIM files in a browser using VisualizeJS",
5
5
  "homepage": "https://cloud.opendesign.com/docs/index.html",
6
6
  "license": "SEE LICENSE IN LICENSE",
@@ -29,10 +29,10 @@
29
29
  "docs": "typedoc"
30
30
  },
31
31
  "dependencies": {
32
- "@inweb/client": "~26.1.0",
33
- "@inweb/eventemitter2": "~26.1.0",
34
- "@inweb/markup": "~26.1.0",
35
- "@inweb/viewer-core": "~26.1.0"
32
+ "@inweb/client": "~26.1.2",
33
+ "@inweb/eventemitter2": "~26.1.2",
34
+ "@inweb/markup": "~26.1.2",
35
+ "@inweb/viewer-core": "~26.1.2"
36
36
  },
37
37
  "visualizeJS": "https://public-fhemb7e3embacwec.z02.azurefd.net/libs/visualizejs/master/Visualize.js"
38
38
  }
package/src/Viewer/Commands/GetSelected.ts CHANGED
@@ -39,8 +39,8 @@ export function getSelected(viewer: Viewer): string[] {
39
39
  entityId.getType() === 1
40
40
  ? entityId.openObject()
41
41
  : entityId.getType() === 2
42
- ? entityId.openObjectAsInsert()
43
- : null;
42
+ ? entityId.openObjectAsInsert()
43
+ : null;
44
44
 
45
45
  if (entityPtr) {
46
46
  const handle = entityPtr.getNativeDatabaseHandle();
package/src/Viewer/Commands/index.ts CHANGED
@@ -55,17 +55,23 @@ import { autoTransformAllModelsToCentralPoint } from "./AutoTransformAllModelsTo
55
55
  * 1. Define a command handler with a first `viewer` parameter.
56
56
  * 2. Register command handler in the commands registry by calling the {@link commands.registerCommand}.
57
57
  *
58
- * @example <caption>Implementing a custom command.</caption>
59
- * import { commands, Viewer } from "@inweb/viewer-visualize";
58
+ * @example Implementing a custom command.
60
59
  *
61
- * function commandHandler(viewer: Viewer, name = "world"): void {
62
- * console.log(`Hello ${name}!!!`);
63
- * }
60
+ * ```javascript
61
+ * import { commands, Viewer } from "@inweb/viewer-visualize";
64
62
  *
65
- * commands.registerCommand("sayHello", commandHandler);
63
+ * function commandHandler(viewer: Viewer, name = "world"): void {
64
+ * console.log(`Hello ${name}!!!`);
65
+ * }
66
66
  *
67
- * @example <caption>Calling a custom command.</caption>
68
- * viewer.executeCommand("sayHello", "user");
67
+ * commands.registerCommand("sayHello", commandHandler);
68
+ * ```
69
+ *
70
+ * @example Calling a custom command.
71
+ *
72
+ * ```javascript
73
+ * viewer.executeCommand("sayHello", "user");
74
+ * ```
69
75
  */
70
76
  export const commands: ICommandsRegistry = commandsRegistry("visualizejs");
71
77
 
package/src/Viewer/Components/index.ts CHANGED
@@ -35,36 +35,36 @@ import { GestureManagerComponent } from "./GestureManagerComponent";
35
35
  *
36
36
  * 1. Define a component class implements {@link IComponent}.
37
37
  * 2. Define a constructor with a `viewer` parameter and add mouse event listeners for the specified viewer.
38
- * 3. Define the component logic in the event listeners. For example, listen for the `mousedown`
39
- * event and select objects when the left mouse button is pressed.
38
+ * 3. Define the component logic in the event listeners. For example, listen for the `mousedown` event and
39
+ * select objects when the left mouse button is pressed.
40
40
  * 4. Override {@link IComponent.dispose} and remove mouse event listeners from the viewer.
41
41
  * 5. Register component provider in the components registry by calling the
42
42
  * {@link components.registerComponent}.
43
43
  *
44
- * @example <caption>Implementing a custom component.</caption>
45
- * import { IComponent, components, Viewer } from "@inweb/viewer-visualize";
44
+ * @example Implementing a custom component.
46
45
  *
47
- * class MyComponent implements IComponent {
48
- * protected viewer: Viewer;
46
+ * ```javascript
47
+ * import { IComponent, components, Viewer } from "@inweb/viewer-visualize";
49
48
  *
50
- * constructor(viewer: Viewer) {
51
- * this.viewer = viewer;
52
- * this.viewer.addEventListener("mousedown", this.onMouseDown);
53
- * }
49
+ * class MyComponent implements IComponent {
50
+ * protected viewer: Viewer;
54
51
  *
55
- * override dispose() {
56
- * this.viewer.removeEventListener("mousedown", this.onMouseDown);
57
- * }
52
+ * constructor(viewer: Viewer) {
53
+ * this.viewer = viewer;
54
+ * this.viewer.addEventListener("mousedown", this.onMouseDown);
55
+ * }
58
56
  *
59
- * onMouseDown = (event: PointerEvent) => {
60
- * // place custom logic here
61
- * };
57
+ * override dispose() {
58
+ * this.viewer.removeEventListener("mousedown", this.onMouseDown);
62
59
  * }
63
60
  *
64
- * components.registerComponent(
65
- * "MyComponent",
66
- * (viewer): IComponent => new MyComponent(viewer)
67
- * );
61
+ * onMouseDown = (event: PointerEvent) => {
62
+ * // place custom logic here
63
+ * };
64
+ * }
65
+ *
66
+ * components.registerComponent( "MyComponent", (viewer): IComponent => new MyComponent(viewer));
67
+ * ```
68
68
  */
69
69
  export const components: IComponentsRegistry = componentsRegistry("visualizejs");
70
70
 
package/src/Viewer/Draggers/index.ts CHANGED
@@ -42,35 +42,41 @@ import { OrbitAroundBuildingDragger } from "./OrbitAroundBuildingDragger";
42
42
  *
43
43
  * 1. Define a dragger class implements {@link IDragger}.
44
44
  * 2. Define a constructor with a `viewer` parameter and add mouse event listeners for the specified viewer.
45
- * 3. Define the dragger logic in the event listeners. For example, listen for the `mousemove`
46
- * event and zoom in/out when the left mouse button is pressed.
45
+ * 3. Define the dragger logic in the event listeners. For example, listen for the `mousemove` event and
46
+ * zoom in/out when the left mouse button is pressed.
47
47
  * 4. Override {@link IDragger.dispose} and remove mouse event listeners from the viewer.
48
48
  * 5. Register dragger provider in the draggers registry by calling the {@link draggers.registerDragger}.
49
49
  *
50
- * @example <caption>Implementing a custom dragger.</caption>
51
- * import { IDragger, draggers, Viewer } from "@inweb/viewer-visualize";
50
+ * @example Implementing a custom dragger.
52
51
  *
53
- * class MyDragger implements IDragger {
54
- * protected viewer: Viewer;
52
+ * ```javascript
53
+ * import { IDragger, draggers, Viewer } from "@inweb/viewer-visualize";
55
54
  *
56
- * constructor(viewer: Viewer) {
57
- * this.viewer = viewer;
58
- * this.viewer.addEventListener("pointermove", this.onPointerMove);
59
- * }
55
+ * class MyDragger implements IDragger {
56
+ * protected viewer: Viewer;
60
57
  *
61
- * override dispose() {
62
- * this.viewer.removeEventListener("pointermove", this.onPointerMove);
63
- * }
58
+ * constructor(viewer: Viewer) {
59
+ * this.viewer = viewer;
60
+ * this.viewer.addEventListener("pointermove", this.onPointerMove);
61
+ * }
64
62
  *
65
- * onPointerMove = (event: PointerEvent) => {
66
- * // place custom logic here
67
- * };
63
+ * override dispose() {
64
+ * this.viewer.removeEventListener("pointermove", this.onPointerMove);
68
65
  * }
69
66
  *
70
- * draggers.registerDragger("MyDragger", (viewer): IDragger => new MyDragger(viewer));
67
+ * onPointerMove = (event: PointerEvent) => {
68
+ * // place custom logic here
69
+ * };
70
+ * }
71
+ *
72
+ * draggers.registerDragger("MyDragger", (viewer): IDragger => new MyDragger(viewer));
73
+ * ```
74
+ *
75
+ * @example Activating a custom dragger.
71
76
  *
72
- * @example <caption>Activating a custom dragger.</caption>
73
- * viewer.setActiveDragger("MyDragger");
77
+ * ```javascript
78
+ * viewer.setActiveDragger("MyDragger");
79
+ * ```
74
80
  */
75
81
  const draggers: IDraggersRegistry = draggersRegistry("visualizejs");
76
82