@inweb/viewer-core 27.5.0 → 27.6.1

package/src/options/Options.ts

@@ -21,16 +21,39 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { EventEmitter2 } from "@inweb/eventemitter2";
+import { IEventEmitter } from "@inweb/eventemitter2";
 import { CameraMode, defaultOptions, IOptions, RGB } from "./IOptions";
 
+function isColorRGB(value: unknown): boolean {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    typeof (value as { r?: unknown }).r === "number" &&
+    typeof (value as { g?: unknown }).g === "number" &&
+    typeof (value as { b?: unknown }).b === "number"
+  );
+}
+
+function isLegacyRGB(value: unknown): boolean {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    typeof (value as { red?: unknown }).red === "number" &&
+    typeof (value as { green?: unknown }).green === "number" &&
+    typeof (value as { blue?: unknown }).blue === "number"
+  );
+}
+
 export class Options implements IOptions {
-  protected _emitter?: EventEmitter2;
+  protected _emitter?: IEventEmitter;
   protected _data: IOptions;
+  protected _defaults: IOptions;
+  protected _updateCount = 0;
 
-  constructor(emitter?: EventEmitter2) {
+  constructor(emitter?: IEventEmitter) {
     this._emitter = emitter;
-    this._data = defaultOptions();
+    this._data = Options.defaults();
+    this._defaults = Options.defaults();
     this.loadFromStorage();
   }
 
@@ -39,12 +62,21 @@ export class Options implements IOptions {
   }
 
   change(): void {
-    if (this._emitter !== undefined) {
+    if (this._emitter !== undefined && this._updateCount === 0) {
       this.saveToStorage();
       this._emitter.emit({ type: "optionschange", data: this });
     }
   }
 
+  beginUpdate(): void {
+    this._updateCount++;
+  }
+
+  endUpdate(): void {
+    this._updateCount--;
+    this.change();
+  }
+
   saveToStorage(): void {
     if (typeof window !== "undefined")
       try {
@@ -58,10 +90,7 @@ export class Options implements IOptions {
     if (typeof window !== "undefined")
       try {
         const item = localStorage.getItem("od-client-settings");
-        if (item) {
-          const data = JSON.parse(item);
-          this.data = { ...data };
-        }
+        if (item) this.data = JSON.parse(item);
       } catch (error) {
         console.error("Cannot load client settings.", error);
       }
@@ -72,38 +101,59 @@ export class Options implements IOptions {
    *
    * @param fields - Name of fields to be reset. Specify `undefined` to reset all.
    */
-  resetToDefaults(fields?: string[]): void {
-    if (fields !== undefined) {
-      const defaults = Options.defaults();
-      const resetData = fields.reduce((acc, field) => {
-        acc[field] = defaults[field];
-        return acc;
-      }, {});
-      this.data = { ...this.data, ...resetData };
+  resetToDefaults(fields?: string[], defaults: IOptions = this._defaults): void {
+    if (Array.isArray(fields)) {
+      const resetData: Partial<IOptions> = {};
+      for (const field of fields) {
+        if (field in defaults) resetData[field] = defaults[field];
+      }
+      this.data = resetData;
     } else {
-      this.data = { ...this.data, ...Options.defaults() };
+      this.data = defaults;
+    }
+  }
+
+  setProperty<K extends keyof IOptions>(
+    key: K,
+    value: IOptions[K] = this._defaults[key],
+    accept: boolean = this.isValidValue(key, value)
+  ): void {
+    if (!accept) {
+      console.warn(`Options.${key}: Invalid value`, value);
+      return;
+    }
+    if (this._data[key] !== value) {
+      this._data[key] = value;
+      this.change();
     }
   }
 
+  isValidValue(key: keyof IOptions, value: unknown): boolean {
+    return typeof value === typeof this._defaults[key];
+  }
+
   get data(): IOptions {
     return this._data;
   }
 
-  set data(value: IOptions) {
-    this._data = { ...Options.defaults(), ...this._data, ...value };
-    // partial mode first
-    if (this._data.enablePartialMode) {
-      this._data.enableStreamingMode = true;
-      this._data.sceneGraph = false;
+  set data(value: Partial<IOptions>) {
+    this.beginUpdate();
+    try {
+      for (const key of Object.keys(value)) {
+        if (key in this._defaults) this[key] = value[key];
+        else this._data[key] = value[key];
+      }
+      // partial streaming first
+      if ("enablePartialMode" in value) {
+        this.enablePartialMode = (value as IOptions).enablePartialMode;
+      }
+      // sectionFillColor since 27.5
+      if ("sectionFillColor" in value) {
+        this.sectionFillColor = (value as IOptions).sectionFillColor;
+      }
+    } finally {
+      this.endUpdate();
     }
-    // sectionFillColor since 27.5
-    if (!value.sectionFillColor && value.cuttingPlaneFillColor)
-      this._data.sectionFillColor = {
-        r: value.cuttingPlaneFillColor.red,
-        g: value.cuttingPlaneFillColor.green,
-        b: value.cuttingPlaneFillColor.blue,
-      };
-    this.change();
   }
 
   get showWCS(): boolean {
@@ -111,8 +161,7 @@ export class Options implements IOptions {
   }
 
   set showWCS(value: boolean) {
-    this._data.showWCS = value;
-    this.change();
+    this.setProperty("showWCS", value);
   }
 
   get cameraAnimation(): boolean {
@@ -120,8 +169,7 @@ export class Options implements IOptions {
   }
 
   set cameraAnimation(value: boolean) {
-    this._data.cameraAnimation = value;
-    this.change();
+    this.setProperty("cameraAnimation", value);
   }
 
   get antialiasing(): boolean | string {
@@ -129,8 +177,7 @@ export class Options implements IOptions {
   }
 
   set antialiasing(value: boolean | string) {
-    this._data.antialiasing = value;
-    this.change();
+    this.setProperty("antialiasing", value, typeof value === "boolean" || typeof value === "string");
   }
 
   get groundShadow(): boolean {
@@ -138,8 +185,7 @@ export class Options implements IOptions {
   }
 
   set groundShadow(value: boolean) {
-    this._data.groundShadow = value;
-    this.change();
+    this.setProperty("groundShadow", value);
   }
 
   get shadows(): boolean {
@@ -147,8 +193,7 @@ export class Options implements IOptions {
   }
 
   set shadows(value: boolean) {
-    this._data.shadows = value;
-    this.change();
+    this.setProperty("shadows", value);
   }
 
   get cameraAxisXSpeed(): number {
@@ -156,8 +201,7 @@ export class Options implements IOptions {
   }
 
   set cameraAxisXSpeed(value: number) {
-    this._data.cameraAxisXSpeed = value;
-    this.change();
+    this.setProperty("cameraAxisXSpeed", value);
   }
 
   get cameraAxisYSpeed(): number {
@@ -165,8 +209,7 @@ export class Options implements IOptions {
   }
 
   set cameraAxisYSpeed(value: number) {
-    this.cameraAxisYSpeed = value;
-    this.change();
+    this.setProperty("cameraAxisYSpeed", value);
   }
 
   get ambientOcclusion(): boolean {
@@ -174,8 +217,7 @@ export class Options implements IOptions {
   }
 
   set ambientOcclusion(value: boolean) {
-    this._data.ambientOcclusion = value;
-    this.change();
+    this.setProperty("ambientOcclusion", value);
   }
 
   get enableStreamingMode(): boolean {
@@ -183,9 +225,9 @@ export class Options implements IOptions {
   }
 
   set enableStreamingMode(value: boolean) {
-    this._data.enableStreamingMode = value;
-    if (!value) this._data.enablePartialMode = false;
-    this.change();
+    this.setProperty("enableStreamingMode", value);
+    // partial streaming is only used if streaming is enabled
+    this.setProperty("enablePartialMode", this.enablePartialMode && this.enableStreamingMode);
   }
 
   get enablePartialMode(): boolean {
@@ -193,12 +235,10 @@ export class Options implements IOptions {
   }
 
   set enablePartialMode(value: boolean) {
-    this._data.enablePartialMode = value;
-    if (value) {
-      this._data.enableStreamingMode = true;
-      this._data.sceneGraph = false;
-    }
-    this.change();
+    this.setProperty("enablePartialMode", value);
+    // partial streaming requires streaming enabled and disables scene graph
+    this.setProperty("enableStreamingMode", this.enableStreamingMode || this.enablePartialMode);
+    this.setProperty("sceneGraph", this.sceneGraph && !this.enablePartialMode);
   }
 
   get memoryLimit(): number {
@@ -206,31 +246,30 @@ export class Options implements IOptions {
   }
 
   set memoryLimit(value: number) {
-    this._data.memoryLimit = value;
-    this.change();
+    this.setProperty("memoryLimit", value);
   }
 
   get cuttingPlaneFillColor(): RGB {
-    console.warn(
-      "Options.cuttingPlaneFillColor has been deprecated since 27.5 and will be removed in a future release, use sectionFillColor instead"
-    );
-    return {
-      red: this._data.sectionFillColor.r,
-      green: this._data.sectionFillColor.g,
-      blue: this._data.sectionFillColor.b,
-    };
+    return this._data.cuttingPlaneFillColor;
   }
 
   set cuttingPlaneFillColor(value: RGB) {
-    console.warn(
-      "Options.cuttingPlaneFillColor has been deprecated since 27.5 and will be removed in a future release, use sectionFillColor instead"
+    if (this._updateCount === 0) {
+      console.warn(
+        "Options.cuttingPlaneFillColor has been deprecated since 27.5 and will be removed in a future release, use sectionFillColor instead"
+      );
+    }
+    this.setProperty("cuttingPlaneFillColor", value, isLegacyRGB(value));
+    // kept in sync with sectionFillColor (deprecated since 27.5)
+    this.setProperty(
+      "sectionFillColor",
+      {
+        r: this._data.cuttingPlaneFillColor.red,
+        g: this._data.cuttingPlaneFillColor.green,
+        b: this._data.cuttingPlaneFillColor.blue,
+      },
+      true
     );
-    this._data.sectionFillColor = {
-      r: value.red,
-      g: value.green,
-      b: value.blue,
-    };
-    this.change();
   }
 
   get enableSectionFill(): boolean {
@@ -238,17 +277,25 @@ export class Options implements IOptions {
   }
 
   set enableSectionFill(value: boolean) {
-    this._data.enableSectionFill = value;
-    this.change();
+    this.setProperty("enableSectionFill", value);
   }
 
-  get sectionFillColor() {
+  get sectionFillColor(): { r: number; g: number; b: number } {
     return this._data.sectionFillColor;
   }
 
-  set sectionFillColor(value) {
-    this._data.sectionFillColor = value;
-    this.change();
+  set sectionFillColor(value: { r: number; g: number; b: number }) {
+    this.setProperty("sectionFillColor", value, isColorRGB(value));
+    // kept in sync with cuttingPlaneFillColor (deprecated since 27.5)
+    this.setProperty(
+      "cuttingPlaneFillColor",
+      {
+        red: this._data.sectionFillColor.r,
+        green: this._data.sectionFillColor.g,
+        blue: this._data.sectionFillColor.b,
+      },
+      true
+    );
   }
 
   get sectionUseObjectColor(): boolean {
@@ -256,8 +303,7 @@ export class Options implements IOptions {
   }
 
   set sectionUseObjectColor(value: boolean) {
-    this._data.sectionUseObjectColor = value;
-    this.change();
+    this.setProperty("sectionUseObjectColor", value);
   }
 
   get enableSectionHatch(): boolean {
@@ -265,17 +311,15 @@ export class Options implements IOptions {
   }
 
   set enableSectionHatch(value: boolean) {
-    this._data.enableSectionHatch = value;
-    this.change();
+    this.setProperty("enableSectionHatch", value);
   }
 
-  get sectionHatchColor() {
+  get sectionHatchColor(): { r: number; g: number; b: number } {
     return this._data.sectionHatchColor;
   }
 
-  set sectionHatchColor(value) {
-    this._data.sectionHatchColor = value;
-    this.change();
+  set sectionHatchColor(value: { r: number; g: number; b: number }) {
+    this.setProperty("sectionHatchColor", value, isColorRGB(value));
   }
 
   get sectionHatchScale(): number {
@@ -283,8 +327,7 @@ export class Options implements IOptions {
   }
 
   set sectionHatchScale(value: number) {
-    this._data.sectionHatchScale = value;
-    this.change();
+    this.setProperty("sectionHatchScale", value);
   }
 
   get enableSectionOutline(): boolean {
@@ -292,17 +335,15 @@ export class Options implements IOptions {
   }
 
   set enableSectionOutline(value: boolean) {
-    this._data.enableSectionOutline = value;
-    this.change();
+    this.setProperty("enableSectionOutline", value);
   }
 
-  get sectionOutlineColor() {
+  get sectionOutlineColor(): { r: number; g: number; b: number } {
     return this._data.sectionOutlineColor;
   }
 
-  set sectionOutlineColor(value) {
-    this._data.sectionOutlineColor = value;
-    this.change();
+  set sectionOutlineColor(value: { r: number; g: number; b: number }) {
+    this.setProperty("sectionOutlineColor", value, isColorRGB(value));
   }
 
   get sectionOutlineWidth(): number {
@@ -310,126 +351,113 @@ export class Options implements IOptions {
   }
 
   set sectionOutlineWidth(value: number) {
-    this._data.sectionOutlineWidth = value;
-    this.change();
+    this.setProperty("sectionOutlineWidth", value);
   }
 
-  get edgesColor() {
+  get edgesColor(): { r: number; g: number; b: number } {
     return this._data.edgesColor;
   }
 
-  set edgesColor(value) {
-    this._data.edgesColor = value;
-    this.change();
+  set edgesColor(value: { r: number; g: number; b: number }) {
+    this.setProperty("edgesColor", value, isColorRGB(value));
   }
 
-  get facesColor() {
+  get facesColor(): { r: number; g: number; b: number } {
     return this._data.facesColor;
   }
 
-  set facesColor(value) {
-    this._data.facesColor = value;
-    this.change();
+  set facesColor(value: { r: number; g: number; b: number }) {
+    this.setProperty("facesColor", value, isColorRGB(value));
   }
 
-  get edgesVisibility() {
+  get edgesVisibility(): boolean {
     return this._data.edgesVisibility;
   }
 
-  set edgesVisibility(value) {
-    this._data.edgesVisibility = value;
-    this.change();
+  set edgesVisibility(value: boolean) {
+    this.setProperty("edgesVisibility", value);
   }
 
-  get edgesOverlap() {
+  get edgesOverlap(): boolean {
     return this._data.edgesOverlap;
   }
 
-  set edgesOverlap(value) {
-    this._data.edgesOverlap = value;
-    this.change();
+  set edgesOverlap(value: boolean) {
+    this.setProperty("edgesOverlap", value);
   }
 
-  get facesOverlap() {
+  get facesOverlap(): boolean {
     return this._data.facesOverlap;
   }
 
-  set facesOverlap(value) {
-    this._data.facesOverlap = value;
-    this.change();
+  set facesOverlap(value: boolean) {
+    this.setProperty("facesOverlap", value);
   }
 
-  get facesTransparancy() {
+  get facesTransparancy(): number {
     return this._data.facesTransparancy;
   }
 
-  set facesTransparancy(value) {
-    this._data.facesTransparancy = value;
-    this.change();
+  set facesTransparancy(value: number) {
+    this.setProperty("facesTransparancy", value);
   }
 
-  get enableCustomHighlight() {
+  get enableCustomHighlight(): boolean {
     return this._data.enableCustomHighlight;
   }
 
-  set enableCustomHighlight(value) {
-    this._data.enableCustomHighlight = value;
-    this.change();
+  set enableCustomHighlight(value: boolean) {
+    this.setProperty("enableCustomHighlight", value);
   }
 
-  get sceneGraph() {
+  get sceneGraph(): boolean {
     return this._data.sceneGraph;
   }
 
-  set sceneGraph(value) {
-    this._data.sceneGraph = value;
-    if (value) this._data.enablePartialMode = false;
-    this.change();
+  set sceneGraph(value: boolean) {
+    this.setProperty("sceneGraph", value);
+    // scene graph and partial streaming are mutually exclusive
+    this.setProperty("enablePartialMode", this.enablePartialMode && !this.sceneGraph);
   }
 
-  get edgeModel() {
+  get edgeModel(): boolean {
     return Boolean(this._data.edgeModel);
   }
 
-  set edgeModel(value) {
-    this._data.edgeModel = Boolean(value);
-    this.change();
+  set edgeModel(value: boolean) {
+    this.setProperty("edgeModel", value);
   }
 
-  get reverseZoomWheel() {
+  get reverseZoomWheel(): boolean {
     return this._data.reverseZoomWheel;
   }
 
   set reverseZoomWheel(value: boolean) {
-    this._data.reverseZoomWheel = !!value;
-    this.change();
+    this.setProperty("reverseZoomWheel", value);
   }
 
-  get enableZoomWheel() {
+  get enableZoomWheel(): boolean {
     return this._data.enableZoomWheel;
   }
 
   set enableZoomWheel(value: boolean) {
-    this._data.enableZoomWheel = !!value;
-    this.change();
+    this.setProperty("enableZoomWheel", value);
   }
 
-  get enableGestures() {
+  get enableGestures(): boolean {
     return this._data.enableGestures;
   }
 
   set enableGestures(value: boolean) {
-    this._data.enableGestures = !!value;
-    this.change();
+    this.setProperty("enableGestures", value);
   }
 
-  get geometryType() {
+  get geometryType(): string {
     return this._data.geometryType;
   }
 
   set geometryType(value: string) {
-    this._data.geometryType = value;
-    this.change();
+    this.setProperty("geometryType", value);
   }
 
   get rulerUnit(): string {
@@ -437,25 +465,38 @@ export class Options implements IOptions {
   }
 
   set rulerUnit(value: string) {
-    this._data.rulerUnit = value;
-    this.change();
+    this.setProperty("rulerUnit", value);
   }
 
-  get rulerPrecision(): any {
+  get rulerPrecision(): "Default" | "Auto" | number {
     return this._data.rulerPrecision;
   }
 
-  set rulerPrecision(value: any) {
-    this._data.rulerPrecision = value;
-    this.change();
+  set rulerPrecision(value: "Default" | "Auto" | number) {
+    this.setProperty("rulerPrecision", value, typeof value === "number" || value === "Default" || value === "Auto");
   }
 
   get cameraMode(): CameraMode {
-    return this._data.cameraMode || "perspective";
+    return this._data.cameraMode;
   }
 
   set cameraMode(value: CameraMode) {
-    this._data.cameraMode = value;
-    this.change();
+    this.setProperty("cameraMode", value, value === "perspective" || value === "orthographic");
+  }
+
+  get snapshotMimeType(): string {
+    return this._data.snapshotMimeType;
+  }
+
+  set snapshotMimeType(value: string) {
+    this.setProperty("snapshotMimeType", value);
+  }
+
+  get snapshotQuality(): number {
+    return this._data.snapshotQuality;
+  }
+
+  set snapshotQuality(value: number) {
+    this.setProperty("snapshotQuality", value);
   }
 }