@inweb/viewer-visualize 26.10.5 → 26.11.0

package/src/Viewer/Commands/SetSelected.ts

@@ -23,14 +23,16 @@
 
 import { Viewer } from "../Viewer";
 
-export function setSelected(viewer: Viewer, handles: string[] = []): void {
+export function setSelected(viewer: Viewer, handles2: string[] = []): void {
   if (!viewer.visualizeJs) return;
 
+  const handles = handles2.map((handle) => handle.slice(handle.indexOf(":") + 1));
+
   const visLib = viewer.visLib();
   const visViewer = viewer.visViewer();
 
   const selectionSet = new visLib.OdTvSelectionSet();
-  handles?.forEach((handle) => {
+  handles.forEach((handle) => {
     const entityId = visViewer.getEntityByOriginalHandle(handle + "");
     if (!entityId.isNull()) selectionSet.appendEntity(entityId);
   });
@@ -39,6 +41,7 @@ export function setSelected(viewer: Viewer, handles: string[] = []): void {
 
   viewer.update();
   viewer.emitEvent({ type: "select", data: selectionSet, handles });
+  viewer.emitEvent({ type: "select2", data: selectionSet, handles: handles2 });
 
   selectionSet.delete();
 }

package/src/Viewer/Commands/SetSelected2.ts

@@ -0,0 +1,39 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { Viewer } from "../Viewer";
+
+export function setSelected2(viewer: Viewer, handles2: string[] = []): void {
+  const handles = [];
+
+  handles2.forEach((handle) => {
+    if (!handle.includes(":")) {
+      handles.push(handle);
+    } else
+      viewer.models.forEach((model) => {
+        if (handle.split(":", 1)[0] === model.id + "") handles.push(handle);
+      });
+  });
+
+  return viewer.executeCommand("setSelected", handles);
+}

package/src/Viewer/Commands/index.ts

@@ -32,6 +32,7 @@ import { explode, collect } from "./Explode";
 import { getDefaultViewPositions } from "./GetDefaultViewPositions";
 import { getModels } from "./GetModels";
 import { getSelected } from "./GetSelected";
+import { getSelected2 } from "./GetSelected2";
 import { hideSelected } from "./HideSelected";
 import { isolateSelected } from "./IsolateSelected";
 import { regenerateAll } from "./RegenerateAll";
@@ -41,6 +42,7 @@ import { setActiveDragger } from "./SetActiveDragger";
 import { setDefaultViewPosition } from "./SetDefaultViewPosition";
 import { setMarkupColor } from "./SetMarkupColor";
 import { setSelected } from "./SetSelected";
+import { setSelected2 } from "./SetSelected2";
 import { showAll } from "./ShowAll";
 import { zoomToExtents } from "./ZoomToExtents";
 import { zoomToObjects } from "./ZoomToObjects";
@@ -87,6 +89,7 @@ commands.registerCommand("collect", collect);
 commands.registerCommand("getDefaultViewPositions", getDefaultViewPositions);
 commands.registerCommand("getModels", getModels);
 commands.registerCommand("getSelected", getSelected);
+commands.registerCommand("getSelected2", getSelected2);
 commands.registerCommand("hideSelected", hideSelected);
 commands.registerCommand("isolateSelected", isolateSelected);
 commands.registerCommand("regenerateAll", regenerateAll);
@@ -96,6 +99,7 @@ commands.registerCommand("setActiveDragger", setActiveDragger);
 commands.registerCommand("setDefaultViewPosition", setDefaultViewPosition);
 commands.registerCommand("setMarkupColor", setMarkupColor);
 commands.registerCommand("setSelected", setSelected);
+commands.registerCommand("setSelected2", setSelected2);
 commands.registerCommand("showAll", showAll);
 commands.registerCommand("zoomToExtents", zoomToExtents);
 commands.registerCommand("zoomToObjects", zoomToObjects);

package/src/Viewer/Components/index.ts

@@ -37,8 +37,8 @@ import { ResetComponent } from "./ResetComponent";
  *
  * 1. Define a component class implements {@link IComponent}.
  * 2. Define a constructor with a `viewer` parameter and add mouse event listeners for the specified viewer.
- * 3. Define the component logic in the event listeners. For example, listen for the `mousedown` event and
- *    select objects when the left mouse button is pressed.
+ * 3. Define the component logic in the event listeners. For example, listen for the `geometryend` event and
+ *    implement post-processing logic for the model.
  * 4. Override {@link IComponent.dispose} and remove mouse event listeners from the viewer.
  * 5. Register component provider in the components registry by calling the
  *    {@link components.registerComponent}.
@@ -51,18 +51,19 @@ import { ResetComponent } from "./ResetComponent";
  * class MyComponent implements IComponent {
  *   protected viewer: Viewer;
  *
- *   constructor(viewer: Viewer) {
+ *  constructor(viewer: Viewer) {
  *     this.viewer = viewer;
- *     this.viewer.addEventListener("mousedown", this.onMouseDown);
+ *     this.viewer.addEventListener("geometryend", this.onGeometryEnd);
  *   }
  *
  *   override dispose() {
- *     this.viewer.removeEventListener("mousedown", this.onMouseDown);
+ *     this.viewer.removeEventListener("geometryend", this.onGeometryEnd);
  *   }
  *
- *   onMouseDown = (event: PointerEvent) => {
- *     // place custom logic here
+ *   onGeometryEnd = (event: MouseEvent) => {
+ *     this.viewer.executeCommand("zoomToExtents");
  *   };
+ *
  * }
  *
  * components.registerComponent( "MyComponent", (viewer): IComponent => new MyComponent(viewer));

package/src/Viewer/Draggers/Common/OdBaseDragger.ts

@@ -135,8 +135,9 @@ export class OdBaseDragger extends OdaGeAction {
       this.subject.update();
 
       const selectionSet = viewer.getSelected();
-      const handles = this.subject.getSelected();
-      this.onmessage({ type: "select", data: selectionSet, handles });
+
+      this.onmessage({ type: "select", data: selectionSet, handles: this.subject.getSelected() });
+      this.onmessage({ type: "select2", data: selectionSet, handles: this.subject.getSelected2() });
     }
   }
 

package/src/Viewer/Draggers/MeasureLineDragger/MeasureLineItem.ts

@@ -20,6 +20,7 @@
 // By use of this software, its documentation or related materials, you
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
+
 import * as utils from "./MeasureUtils";
 
 export class MeasureLineItem {
@@ -29,8 +30,9 @@ export class MeasureLineItem {
   protected htmlElemTitle: HTMLElement;
   protected startPoint: number[];
   protected endPoint: number[];
-  protected unit: string;
   protected scale: number;
+  protected unit: string;
+  protected precision: any;
   protected size: number;
   protected style: CSSStyleDeclaration;
   protected viewer: any;
@@ -49,8 +51,9 @@ export class MeasureLineItem {
     this.startPoint = null;
     this.endPoint = null;
 
-    this.unit = "";
     this.scale = 1.0;
+    this.unit = "";
+    this.precision = 2;
     this.size = 10.0;
     this.lineThickness = 2;
 
@@ -153,13 +156,11 @@ export class MeasureLineItem {
         this.htmlElemLine.style.zIndex = "1";
         this.htmlElemLine.style.height = `${height}px`;
 
-        const distance = `${this.getDistance()} ${this.unit}`;
+        const distance = this.getDistance();
 
         const pX = p1.x + dx / 2;
         const pY = p1.y + dy / 2;
 
-        const widthTitle = distance.length * 10;
-
         this.htmlElemTitle = utils.createHtmlElementIfNeed(this.htmlElemTitle, this.targetElement, "ruler-value");
         this.htmlElemTitle.style.display = "block";
         this.htmlElemTitle.style.cursor = "pointer";
@@ -167,9 +168,8 @@ export class MeasureLineItem {
         this.htmlElemTitle.style.color = "white";
         this.htmlElemTitle.style.position = "Absolute";
         this.htmlElemTitle.style.top = `${pY}px`;
-        this.htmlElemTitle.style.left = `${pX - widthTitle / 2}px`;
-        this.htmlElemTitle.style.width = `${widthTitle}px`;
-        this.htmlElemTitle.style.transformOrigin = "0px 0px";
+        this.htmlElemTitle.style.left = `${pX}px`;
+        this.htmlElemTitle.style.transform = "translate(-50%, -50%)";
         this.htmlElemTitle.style.borderRadius = "5px";
         this.htmlElemTitle.style.boxShadow = this.style.boxShadow;
         this.htmlElemTitle.style.border = "none";
@@ -177,7 +177,7 @@ export class MeasureLineItem {
         this.htmlElemTitle.style.zIndex = "3";
         this.htmlElemTitle.style.padding = "2px";
         this.htmlElemTitle.style.textAlign = "center";
-        this.htmlElemTitle.innerHTML = `${distance}`;
+        this.htmlElemTitle.innerHTML = this.formatDistance(distance);
       } else {
         this.htmlElemLine.style.display = "none";
         this.htmlElemTitle.style.display = "none";
@@ -187,13 +187,39 @@ export class MeasureLineItem {
 
   getDistance(): number {
     let distance = utils.getDistance(this.startPoint, this.endPoint, this.moduleInstance);
-    if (Math.abs(this.scale - 1.0) > 10e-5) {
-      distance = (distance / this.scale).toFixed(2);
-    }
-
+    if (Math.abs(this.scale) > 1e-10) distance /= this.scale;
     return distance;
   }
 
+  calculatePrecision(value: number) {
+    const distance = Math.abs(value);
+
+    if (distance >= 1000) return 0;
+    if (distance >= 10) return 1;
+    if (distance >= 0.1) return 2;
+    if (distance >= 0.001) return 3;
+
+    return distance > 0 ? Math.floor(-Math.log10(distance)) + 1 : 2;
+  }
+
+  formatDistance(distance: number): string {
+    let digits: number;
+
+    if (this.precision === "Auto") digits = this.calculatePrecision(distance);
+    else if (Number.isFinite(this.precision)) digits = this.precision;
+    else digits = parseFloat(this.precision);
+
+    if (!Number.isFinite(digits)) digits = 2;
+    else if (digits < 0) digits = 0;
+    else if (digits > 10) digits = 10;
+
+    let result = distance.toFixed(digits);
+    if (this.precision === "Auto") result = result.replace(/\.0+$/, "").replace(/\.$/, "");
+    if (+result !== distance) result = "~ " + result;
+
+    return `${result} ${this.unit}`;
+  }
+
   setStartPoint(gePoint: number[]): void {
     this.startPoint = gePoint;
     this.drawMeasureLine();
@@ -233,6 +259,11 @@ export class MeasureLineItem {
     this.drawMeasureLine();
   }
 
+  setPrecision(precision: any): void {
+    this.precision = precision;
+    this.drawMeasureLine();
+  }
+
   setStyle(style: CSSStyleDeclaration): void {
     this.style = style;
     this.drawMeasureLine();

package/src/Viewer/Draggers/MeasureLineDragger/index.ts

@@ -34,22 +34,24 @@ export class MeasureLineDragger extends OdBaseDragger {
   protected gripingRadius: number;
   protected firstPoint: number[];
   protected secondPoint: number[];
-  protected renameUnitTable: any;
   protected items: MeasureLineItem[];
   protected m_overlayElement: HTMLElement;
   protected previewMeasureLine: MeasureLineItem;
   protected conversionFactor: number;
-  protected oldRulerUnit: string;
+  protected rulerUnitTable: any;
+  protected rulerUnit: string;
+  protected rulerPrecision: any;
 
   constructor(subject: Viewer) {
     super(subject);
+
     this.lineThickness = 2;
     this.press = false;
     this.gripingRadius = 5.0;
     this.firstPoint = null;
     this.secondPoint = null;
 
-    this.renameUnitTable = {
+    this.rulerUnitTable = {
       Millimeters: "mm",
       Centimeters: "cm",
       Meters: "m",
@@ -59,14 +61,16 @@ export class MeasureLineDragger extends OdBaseDragger {
       Kilometers: "km",
       Miles: "mi",
       Micrometers: "µm",
+      Mils: "mil",
       MicroInches: "µin",
       Default: "unit",
     };
 
+    this.rulerUnit = subject.options.rulerUnit ?? "Default";
+    this.rulerPrecision = subject.options.rulerPrecision ?? "Default";
+
     this.items = [];
-    this.canvasEvents.push("resize");
-    this.oldRulerUnit = subject.options.rulerUnit ?? "Default";
-    this.optionsChange = this.optionsChange.bind(this);
+    this.canvasEvents.push("resize", "optionsChange");
   }
 
   override initialize(): void {
@@ -174,9 +178,14 @@ export class MeasureLineDragger extends OdBaseDragger {
   createMeasureLine(): MeasureLineItem {
     const viewer = this.m_module.getViewer();
     const item = new MeasureLineItem(this.m_overlayElement, viewer, this.m_module);
+
     item.lineThickness = this.lineThickness || item.lineThickness;
-    const isDefaultUnit = !this.subject.options.rulerUnit || this.subject.options.rulerUnit === "Default";
-    item.setUnit(renameUnit(this.renameUnitTable, isDefaultUnit ? viewer.getUnit() : this.subject.options.rulerUnit));
+
+    const isDefaultUnit = this.rulerUnit === "Default";
+    const isDefaultPrecision = this.rulerPrecision === "Default";
+
+    item.setUnit(renameUnit(this.rulerUnitTable, isDefaultUnit ? viewer.getUnit() : this.rulerUnit));
+
     if (!isDefaultUnit) {
       const fromUnit = this.getKUnitByName(viewer.getUnit());
       const toUnit = this.getKUnitByName(this.subject.options.rulerUnit);
@@ -186,6 +195,13 @@ export class MeasureLineDragger extends OdBaseDragger {
     } else {
       item.setConversionFactor(1.0);
     }
+
+    if (!isDefaultPrecision) {
+      item.setPrecision(this.rulerPrecision);
+    } else {
+      item.setPrecision(2);
+    }
+
     this.items.push(item);
     return item;
   }
@@ -193,22 +209,38 @@ export class MeasureLineDragger extends OdBaseDragger {
   optionsChange(event): void {
     const options: IOptions = event.data;
     const toUnitName = options.rulerUnit ?? "Default";
-    if (this.oldRulerUnit === toUnitName) return;
-    this.oldRulerUnit = toUnitName;
+    const toPrecision = options.rulerPrecision ?? "Default";
+
+    const unitChanged = this.rulerUnit !== toUnitName;
+    const precisionChanged = this.rulerPrecision !== toPrecision;
+
+    if (!unitChanged && !precisionChanged) return;
+
+    this.rulerUnit = toUnitName;
+    this.rulerPrecision = toPrecision;
 
     const drawingUnit = this.m_module.getViewer().getUnit();
     const eToUnit = this.getKUnitByName(toUnitName);
     const eFromUnit = this.getKUnitByName(drawingUnit);
 
     this.items.forEach((item) => {
-      if (toUnitName === "Default") {
-        item.setUnit(renameUnit(this.renameUnitTable, drawingUnit));
-        item.setConversionFactor(1.0);
-      } else {
-        item.setUnit(renameUnit(this.renameUnitTable, toUnitName));
-        const multiplier = this.m_module.getViewer().getUnitsConversionCoef(eFromUnit, eToUnit);
-        this.conversionFactor = 1 / multiplier;
-        item.setConversionFactor(this.conversionFactor);
+      if (unitChanged) {
+        if (toUnitName === "Default") {
+          item.setUnit(renameUnit(this.rulerUnitTable, drawingUnit));
+          item.setConversionFactor(1.0);
+        } else {
+          item.setUnit(renameUnit(this.rulerUnitTable, toUnitName));
+          const multiplier = this.m_module.getViewer().getUnitsConversionCoef(eFromUnit, eToUnit);
+          this.conversionFactor = 1 / multiplier;
+          item.setConversionFactor(this.conversionFactor);
+        }
+      }
+      if (precisionChanged) {
+        if (toPrecision === "Default") {
+          item.setPrecision(2);
+        } else {
+          item.setPrecision(toPrecision);
+        }
       }
     });
   }
@@ -243,6 +275,9 @@ export class MeasureLineDragger extends OdBaseDragger {
       case "Micrometers":
         eUnit = this.m_module.Units.kMicrometers;
         break;
+      case "Mils":
+        eUnit = this.m_module.Units.kMils;
+        break;
       case "MicroInches":
         eUnit = this.m_module.Units.kMicroInches;
         break;

package/src/Viewer/Draggers/OdJoyStickDragger.ts

@@ -100,7 +100,7 @@ export class OdJoyStickDragger {
         callback({
           x: 100 * ((movedX - centerX) / maxMoveStick),
           y: 100 * ((movedY - centerY) / maxMoveStick) * -1,
-          global: global,
+          global,
         });
       }
     };
@@ -116,7 +116,7 @@ export class OdJoyStickDragger {
       callback({
         x: 100 * ((movedX - centerX) / maxMoveStick),
         y: 100 * ((movedY - centerY) / maxMoveStick) * -1,
-        global: global,
+        global,
       });
     };
 

package/src/Viewer/Loaders/VSFCloudLoader.ts

@@ -23,6 +23,7 @@
 
 import { Loader } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
+import { ModelImpl } from "../Models/ModelImpl";
 
 export class VSFCloudLoader extends Loader {
   public viewer: Viewer;
@@ -70,6 +71,11 @@ export class VSFCloudLoader extends Loader {
       }
 
       if (i === 0) {
+        const modelImpl = new ModelImpl();
+        modelImpl.id = model.file.id;
+
+        this.viewer.models.push(modelImpl);
+
         this.viewer.syncOptions();
         this.viewer.syncOverlay();
         this.viewer.update(true);

package/src/Viewer/Loaders/VSFFileLoader.ts

@@ -23,6 +23,7 @@
 
 import { Loader, LoadParams } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
+import { ModelImpl } from "../Models/ModelImpl";
 import { FileLoader } from "./FileLoader";
 
 export class VSFFileLoader extends Loader {
@@ -40,7 +41,7 @@ export class VSFFileLoader extends Loader {
     );
   }
 
-  override async load(file: any, format?: string, params?: LoadParams): Promise<this> {
+  override async load(file: any, format?: string, params: LoadParams = {}): Promise<this> {
     if (!this.viewer.visualizeJs) return this;
 
     const visViewer = this.viewer.visViewer();
@@ -68,6 +69,11 @@ export class VSFFileLoader extends Loader {
       throw error;
     }
 
+    const modelImpl = new ModelImpl();
+    modelImpl.id = params.modelId || this.extractFileName(file);
+
+    this.viewer.models.push(modelImpl);
+
     this.viewer.syncOptions();
     this.viewer.syncOverlay();
     this.viewer.update(true);

package/src/Viewer/Loaders/VSFXCloudLoader.ts

@@ -23,6 +23,7 @@
 
 import { Loader } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
+import { ModelImpl } from "../Models/ModelImpl";
 
 export class VSFXCloudLoader extends Loader {
   public viewer: Viewer;
@@ -42,7 +43,7 @@ export class VSFXCloudLoader extends Loader {
     );
   }
 
-  override async load(model: any, format?: string, params: any = {}): Promise<this> {
+  override async load(model: any): Promise<this> {
     if (!this.viewer.visualizeJs) return Promise.resolve(this);
 
     const visViewer = this.viewer.visViewer();
@@ -65,6 +66,11 @@ export class VSFXCloudLoader extends Loader {
       throw error;
     }
 
+    const modelImpl = new ModelImpl();
+    modelImpl.id = model.file.id;
+
+    this.viewer.models.push(modelImpl);
+
     this.viewer.syncOptions();
     this.viewer.syncOverlay();
     this.viewer.update(true);

package/src/Viewer/Loaders/VSFXCloudPartialLoader.ts

@@ -23,6 +23,7 @@
 
 import { Loader } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
+import { ModelImpl } from "../Models/ModelImpl";
 import { UpdateController, UpdateType } from "./UpdateController";
 
 const PENDING_REQUESTS_SIZE = 50;
@@ -49,7 +50,7 @@ export class VSFXCloudPartialLoader extends Loader {
     );
   }
 
-  override async load(model: any, format?: string): Promise<this> {
+  override async load(model: any): Promise<this> {
     if (!this.viewer.visualizeJs) return this;
 
     const visViewer = this.viewer.visViewer();
@@ -81,10 +82,15 @@ export class VSFXCloudPartialLoader extends Loader {
       this.viewer.emitEvent({ type: "geometryprogress", data: progress, file: model.file, model });
 
       if (isDatabaseChunk) {
+        const modelImpl = new ModelImpl();
+        modelImpl.id = model.file.id;
+
+        this.viewer.models.push(modelImpl);
+
         this.viewer.syncOptions();
         this.viewer.syncOverlay();
-
         updateController.update(UpdateType.kForce);
+
         this.viewer.emitEvent({ type: "databasechunk", data: chunk, file: model.file, model });
       } else {
         updateController.update(UpdateType.kDelay);

package/src/Viewer/Loaders/VSFXCloudStreamingLoader.ts

@@ -23,6 +23,7 @@
 
 import { Loader } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
+import { ModelImpl } from "../Models/ModelImpl";
 import { UpdateController, UpdateType } from "./UpdateController";
 
 export class VSFXCloudStreamingLoader extends Loader {
@@ -79,10 +80,15 @@ export class VSFXCloudStreamingLoader extends Loader {
       }
 
       if (isDatabaseChunk) {
+        const modelImpl = new ModelImpl();
+        modelImpl.id = model.file.id;
+
+        this.viewer.models.push(modelImpl);
+
         this.viewer.syncOptions();
         this.viewer.syncOverlay();
-
         updateController.update(UpdateType.kForce);
+
         this.viewer.emitEvent({ type: "databasechunk", data: chunk, file: model.file, model });
       } else {
         updateController.update(UpdateType.kDelay);

package/src/Viewer/Loaders/VSFXFileLoader.ts

@@ -23,6 +23,7 @@
 
 import { Loader, LoadParams } from "@inweb/viewer-core";
 import { Viewer } from "../Viewer";
+import { ModelImpl } from "../Models/ModelImpl";
 import { FileLoader } from "./FileLoader";
 
 export class VSFXFileLoader extends Loader {
@@ -40,7 +41,7 @@ export class VSFXFileLoader extends Loader {
     );
   }
 
-  override async load(file: any, format?: string, params?: LoadParams): Promise<this> {
+  override async load(file: any, format?: string, params: LoadParams = {}): Promise<this> {
     if (!this.viewer.visualizeJs) return this;
 
     const visViewer = this.viewer.visViewer();
@@ -68,6 +69,11 @@ export class VSFXFileLoader extends Loader {
       throw error;
     }
 
+    const modelImpl = new ModelImpl();
+    modelImpl.id = params.modelId || this.extractFileName(file);
+
+    this.viewer.models.push(modelImpl);
+
     this.viewer.syncOptions();
     this.viewer.syncOverlay();
     this.viewer.update(true);

package/src/Viewer/Loaders/index.ts

@@ -38,23 +38,24 @@ import { VSFXCloudPartialLoader } from "./VSFXCloudPartialLoader";
  *
  * 1. Define a loader class implements {@link ILoader}.
  * 2. Define a constructor with a `viewer` parameter.
- * 3. Override {@link ILoader.isSupport} and сheck if the loader can load the specified file.
+ * 3. Override {@link ILoader.isSupport} and check if the loader can load the specified file.
  * 4. Override {@link ILoader.load} and define the logic for loading the model from the file.
  *
  *    The loader should do:
  *
  *    - Load model data from file into the buffer. The model data must be a `VSFX` format.
  *    - Parse data buffer with the `VisualizeJS` viewer instance.
+ *    - Create `ModelImpl` instance with unique model ID add it to the viewer `models` list.
  *    - Synchronize viewer styles, options and overlay.
  *    - Update the viewer.
  *
  *    The loader must emit events:
  *
- *    - `geometryprogress` - during loading. If progress is not supported, emit it once with a value of 100%
- *         after the load is complete.
+ *    - `geometryprogress` - during loading (or once at 100% when complete).
  *    - `databasechunk` - when model is loaded and ready to render.
  * 5. Override {@link ILoader.dispose} and release loader resources, if required.
- * 6. Register loader provider in the loaders registry by calling the {@link loaders.registerLoader}.
+ * 6. Use `this.abortController` (defined in `Loader` class) to abort loading raw data.
+ * 7. Register loader provider in the loaders registry by calling the {@link loaders.registerLoader}.
  *
  * @example Implementing a custom loader.
  *
@@ -70,21 +71,25 @@ import { VSFXCloudPartialLoader } from "./VSFXCloudPartialLoader";
  *   }
  *
  *   override isSupport(file, format): Boolean {
- *     // place custom logic here
- *     return ...;
+ *     // check if this loader supports the file source and format
+ *     return type file === "string" && format === "myformat";
  *   }
  *
  *   override load(file, format, params): Promise<this> {
+ *    // load VSFX data from file (custom loading logic)
+ *     const data = await fetch(file).then((result) => result.arrayBuffer());
  *
- *     // place custom loading logic here
- *     const data = ...
+ *     const modelImpl = new ModelImpl();
+ *     modelImpl.id = params.modelId;
  *
- *     this.viewer.visualizeJs.getViewer().parseVsfx(data);
+ *     this.viewer.visViewer().parseVsfx(new Uint8Array(data));
+ *     this.viewer.models.push(modelImpl);
  *
  *     this.viewer.syncOptions();
  *     this.viewer.syncOverlay();
  *     this.viewer.update();
  *
+ *     this.viewer.emitEvent({ type: "geometryprogress", data: 1, file });
  *     this.viewer.emitEvent({ type: "databasechunk", data, file });
  *
  *     return Promise.resove(this);