vim-web 0.6.0-dev.8 → 1.0.0-alpha.0

package/dist/vim-web.js

@@ -47528,25 +47528,6 @@ const _CameraMovementSnap = class _CameraMovementSnap extends CameraMovement$1 {
 };
 __publicField(_CameraMovementSnap, "_ZERO", new Vector3());
 let CameraMovementSnap = _CameraMovementSnap;
-function createOpaque() {
-  return new StandardMaterial(createBasicOpaque());
-}
-function createTransparent() {
-  return new StandardMaterial(createBasicTransparent());
-}
-function createBasicOpaque() {
-  return new MeshLambertMaterial({
-    color: 13421772,
-    flatShading: true,
-    side: DoubleSide
-  });
-}
-function createBasicTransparent() {
-  const mat = createBasicOpaque();
-  mat.transparent = true;
-  mat.opacity = 0.25;
-  return mat;
-}
 class StandardMaterial {
   constructor(material) {
     __publicField(this, "three");
@@ -53761,7 +53742,7 @@ let SectionBox$1 = class SectionBox {
   }
 };
 class Gizmos {
-  constructor(renderer, viewport, viewer, camera2) {
+  constructor(renderer, viewport, viewer, camera2, settings2) {
     __publicField(this, "_viewport");
     __publicField(this, "_measure");
     /**
@@ -53788,9 +53769,9 @@ class Gizmos {
       renderer,
       camera2,
       viewer.inputs,
-      viewer.settings
+      settings2
     );
-    this.axes = new GizmoAxes(camera2, viewport, viewer.settings.axes);
+    this.axes = new GizmoAxes(camera2, viewport, settings2.axes);
     this.markers = new GizmoMarkers(renderer, viewer.selection);
     (_a3 = viewport.canvas.parentElement) == null ? void 0 : _a3.prepend(this.axes.canvas);
   }
@@ -54043,8 +54024,8 @@ function createMaskMaterial() {
     clipping: true,
     // Use GLSL ES 3.0 for WebGL 2
     glslVersion: GLSL3,
-    // Only write depth, not color (outline shader only reads depth)
-    colorWrite: false,
+    // Writes 1.0 to color for selected, 0.0 for background (after clear).
+    // Outline shader does edge detection on this binary mask.
     vertexShader: (
       /* glsl */
       `
@@ -54193,33 +54174,13 @@ function createGhostShader() {
   });
 }
 class OutlineMaterial {
-  constructor(options, onUpdate) {
+  constructor(onUpdate) {
     __publicField(this, "three");
-    __publicField(this, "_camera");
     __publicField(this, "_resolution");
-    __publicField(this, "_precision", 1);
     __publicField(this, "_onUpdate");
     this.three = createOutlineMaterial();
     this._onUpdate = onUpdate;
-    this._precision = (options == null ? void 0 : options.precision) ?? 1;
-    this._resolution = (options == null ? void 0 : options.resolution) ?? new Vector2(1, 1);
-    this.resolution = this._resolution;
-    if (options == null ? void 0 : options.sceneBuffer) {
-      this.sceneBuffer = options.sceneBuffer;
-    }
-    this.camera = options == null ? void 0 : options.camera;
-  }
-  /**
-   * Precision of the outline. This is used to scale the resolution of the outline.
-   */
-  get precision() {
-    return this._precision;
-  }
-  set precision(value) {
-    var _a3;
-    this._precision = value;
-    this.resolution = this._resolution;
-    (_a3 = this._onUpdate) == null ? void 0 : _a3.call(this);
+    this._resolution = new Vector2(1, 1);
   }
   /**
    * Resolution of the outline. This should match the resolution of screen.
@@ -54230,50 +54191,24 @@ class OutlineMaterial {
   set resolution(value) {
     var _a3;
     this.three.uniforms.screenSize.value.set(
-      value.x * this._precision,
-      value.y * this._precision,
-      1 / (value.x * this._precision),
-      1 / (value.y * this._precision)
+      value.x,
+      value.y,
+      1 / value.x,
+      1 / value.y
     );
     this._resolution = value;
     this.three.uniformsNeedUpdate = true;
     (_a3 = this._onUpdate) == null ? void 0 : _a3.call(this);
   }
   /**
-   * Camera used to render the outline.
+   * Thickness of the outline in pixels (of the outline render target).
    */
-  get camera() {
-    return this._camera;
+  get thickness() {
+    return this.three.uniforms.thickness.value;
   }
-  set camera(value) {
+  set thickness(value) {
     var _a3;
-    this._camera = value;
-    this.three.uniforms.cameraNear.value = (value == null ? void 0 : value.near) ?? 1;
-    this.three.uniforms.cameraFar.value = (value == null ? void 0 : value.far) ?? 1e3;
-    this.three.uniformsNeedUpdate = true;
-    (_a3 = this._onUpdate) == null ? void 0 : _a3.call(this);
-  }
-  /**
-   * Intensity of the outline. Controls the strength of the edge detection.
-   */
-  get intensity() {
-    return this.three.uniforms.intensity.value;
-  }
-  set intensity(value) {
-    var _a3;
-    this.three.uniforms.intensity.value = value;
-    this.three.uniformsNeedUpdate = true;
-    (_a3 = this._onUpdate) == null ? void 0 : _a3.call(this);
-  }
-  /**
-   * Color of the outline.
-   */
-  get color() {
-    return this.three.uniforms.outlineColor.value;
-  }
-  set color(value) {
-    var _a3;
-    this.three.uniforms.outlineColor.value.set(value);
+    this.three.uniforms.thickness.value = Math.max(1, Math.round(value));
     this.three.uniformsNeedUpdate = true;
     (_a3 = this._onUpdate) == null ? void 0 : _a3.call(this);
   }
@@ -54289,18 +54224,6 @@ class OutlineMaterial {
     this.three.uniformsNeedUpdate = true;
     (_a3 = this._onUpdate) == null ? void 0 : _a3.call(this);
   }
-  /**
-   * Depth buffer used to render the outline.
-   */
-  get depthBuffer() {
-    return this.three.uniforms.depthBuffer.value;
-  }
-  set depthBuffer(value) {
-    var _a3;
-    this.three.uniforms.depthBuffer.value = value;
-    this.three.uniformsNeedUpdate = true;
-    (_a3 = this._onUpdate) == null ? void 0 : _a3.call(this);
-  }
   /**
    * Dispose of the outline material.
    */
@@ -54314,18 +54237,9 @@ function createOutlineMaterial() {
     glslVersion: GLSL3,
     depthWrite: false,
     uniforms: {
-      // Input buffers
       sceneBuffer: { value: null },
-      depthBuffer: { value: null },
-      // Input parameters
-      cameraNear: { value: 1 },
-      cameraFar: { value: 1e3 },
-      screenSize: {
-        value: new Vector4(1, 1, 1, 1)
-      },
-      // Options
-      outlineColor: { value: new Color(16777215) },
-      intensity: { value: 2 }
+      screenSize: { value: new Vector4(1, 1, 1, 1) },
+      thickness: { value: 2 }
     },
     vertexShader: `
       out vec2 vUv;
@@ -54335,52 +54249,55 @@ function createOutlineMaterial() {
       }
       `,
     fragmentShader: `
-      #include <packing>
-
-      uniform sampler2D depthBuffer;
-      uniform float cameraNear;
-      uniform float cameraFar;
+      uniform sampler2D sceneBuffer;
       uniform vec4 screenSize;
-      uniform vec3 outlineColor;
-      uniform float intensity;
+      uniform float thickness;
 
       in vec2 vUv;
       out vec4 fragColor;
 
-      // Use texelFetch for faster indexed access (WebGL 2)
-      float getPixelDepth(int x, int y) {
+      // Read binary selection mask (1.0 = selected, 0.0 = background).
+      // Clamped to texture bounds to avoid false outlines at screen edges.
+      float getMask(int x, int y) {
         ivec2 pixelCoord = ivec2(vUv * screenSize.xy) + ivec2(x, y);
-        float fragCoordZ = texelFetch(depthBuffer, pixelCoord, 0).x;
-        float viewZ = perspectiveDepthToViewZ(fragCoordZ, cameraNear, cameraFar);
-        return viewZToOrthographicDepth(viewZ, cameraNear, cameraFar);
+        pixelCoord = clamp(pixelCoord, ivec2(0), ivec2(screenSize.xy) - 1);
+        return texelFetch(sceneBuffer, pixelCoord, 0).x;
       }
-  
-      float saturate(float num) {
-        return clamp(num, 0.0, 1.0);
+
+      // Check the full grid ring at Chebyshev distance d.
+      // Called with literal constants so the compiler inlines and unrolls.
+      bool checkRing(int d) {
+        // Top and bottom rows (full width)
+        for (int x = -d; x <= d; x++) {
+          if (getMask(x, -d) < 0.5) return true;
+          if (getMask(x,  d) < 0.5) return true;
+        }
+        // Left and right columns (excluding corners)
+        for (int y = -d + 1; y < d; y++) {
+          if (getMask(-d, y) < 0.5) return true;
+          if (getMask( d, y) < 0.5) return true;
+        }
+        return false;
       }
-  
-      void main() {
-        float depth = getPixelDepth(0, 0);
 
-        // Early-out: skip for background pixels (no geometry)
-        if (depth >= 0.99) {
-          fragColor = vec4(0.0, 0.0, 0.0, 0.0);
+      void main() {
+        // Skip non-selected pixels
+        if (getMask(0, 0) < 0.5) {
+          fragColor = vec4(0.0);
           return;
         }
 
-        // Cross edge detection: 4 neighbors at distance 1.
-        // step() converts depth diff to binary (edge or not).
-        // Thickness is controlled by outlineScale (render target resolution).
-        float outline = 0.0;
-        outline += step(0.001, abs(depth - getPixelDepth( 0, -1)));
-        outline += step(0.001, abs(depth - getPixelDepth( 0,  1)));
-        outline += step(0.001, abs(depth - getPixelDepth(-1,  0)));
-        outline += step(0.001, abs(depth - getPixelDepth( 1,  0)));
-        outline = saturate(outline * 0.25 * intensity);
+        // Full grid search ring by ring (3x3, 5x5, 7x7 ... up to 11x11).
+        // Each ring checks all pixels at that Chebyshev distance.
+        // Early-exit between rings once an edge is found.
+        bool edge = checkRing(1);
+
+        if (!edge && thickness >= 2.0) edge = checkRing(2);
+        if (!edge && thickness >= 3.0) edge = checkRing(3);
+        if (!edge && thickness >= 4.0) edge = checkRing(4);
+        if (!edge && thickness >= 5.0) edge = checkRing(5);
 
-        // Output outline intensity to R channel only (RedFormat texture)
-        // Merge pass will use this to blend outline color with scene
-        fragColor = vec4(outline, 0.0, 0.0, 0.0);
+        fragColor = vec4(edge ? 1.0 : 0.0, 0.0, 0.0, 0.0);
       }
       `
   });
@@ -54401,6 +54318,15 @@ class MergeMaterial {
     this.three.uniformsNeedUpdate = true;
     (_a3 = this._onUpdate) == null ? void 0 : _a3.call(this);
   }
+  get opacity() {
+    return this.three.uniforms.opacity.value;
+  }
+  set opacity(value) {
+    var _a3;
+    this.three.uniforms.opacity.value = Math.max(0, Math.min(1, value));
+    this.three.uniformsNeedUpdate = true;
+    (_a3 = this._onUpdate) == null ? void 0 : _a3.call(this);
+  }
   get sourceA() {
     return this.three.uniforms.sourceA.value;
   }
@@ -54426,7 +54352,8 @@ function createMergeMaterial() {
     uniforms: {
       sourceA: { value: null },
       sourceB: { value: null },
-      color: { value: new Color(16777215) }
+      color: { value: new Color(16777215) },
+      opacity: { value: 1 }
     },
     vertexShader: (
       /* glsl */
@@ -54442,25 +54369,26 @@ function createMergeMaterial() {
       /* glsl */
       `
        uniform vec3 color;
+       uniform float opacity;
        uniform sampler2D sourceA;
        uniform sampler2D sourceB;
        in vec2 vUv;
        out vec4 fragColor;
 
        void main() {
-        // Fetch outline intensity first (cheaper to check)
+        // Fetch outline mask first (cheaper to check)
         // Use texture() for proper handling of different resolutions
-        vec4 B = texture(sourceB, vUv);
+        float edge = texture(sourceB, vUv).x;
 
         // Early-out: if no outline, just copy scene directly
-        if (B.x < 0.01) {
+        if (edge < 0.01) {
           fragColor = texture(sourceA, vUv);
           return;
         }
 
-        // Fetch scene and blend with outline color
+        // Fetch scene and blend with outline color using opacity
         vec4 A = texture(sourceA, vUv);
-        fragColor = vec4(mix(A.xyz, color, B.x), 1.0);
+        fragColor = vec4(mix(A.xyz, color, edge * opacity), 1.0);
        }
        `
     )
@@ -54608,9 +54536,7 @@ function applyMaterial(mesh, value) {
   mesh.visible = true;
 }
 const _Materials = class _Materials {
-  constructor(opaque, transparent, modelOpaque, modelTransparent, ghost2, mask, outline, merge) {
-    __publicField(this, "_opaque");
-    __publicField(this, "_transparent");
+  constructor(modelOpaque, modelTransparent, ghost2, mask, outline, merge) {
     __publicField(this, "_modelOpaque");
     __publicField(this, "_modelTransparent");
     __publicField(this, "_ghost");
@@ -54619,20 +54545,15 @@ const _Materials = class _Materials {
     __publicField(this, "_outline");
     __publicField(this, "_merge");
     __publicField(this, "_clippingPlanes");
-    __publicField(this, "_sectionStrokeWidth", 0.01);
-    __publicField(this, "_sectionStrokeFalloff", 0.75);
-    __publicField(this, "_sectionStrokeColor", new Color(16185078));
     __publicField(this, "_onUpdate", new distExports$2.SignalDispatcher());
     // Shared color palette texture for all scene materials
     __publicField(this, "_colorPaletteTexture");
-    this._opaque = opaque ?? createOpaque();
-    this._transparent = transparent ?? createTransparent();
     const onUpdate = () => this._onUpdate.dispatch();
     this._modelOpaque = modelOpaque ?? createModelOpaque(onUpdate);
     this._modelTransparent = modelTransparent ?? createModelTransparent(onUpdate);
     this._ghost = ghost2 ?? new GhostMaterial(void 0, onUpdate);
     this._mask = mask ?? createMaskMaterial();
-    this._outline = outline ?? new OutlineMaterial(void 0, onUpdate);
+    this._outline = outline ?? new OutlineMaterial(onUpdate);
     this._merge = merge ?? new MergeMaterial(onUpdate);
   }
   static createInstance(instance) {
@@ -54678,34 +54599,29 @@ const _Materials = class _Materials {
    * Updates material settings based on the provided configuration.
    */
   applySettings(settings2) {
-    this.modelColor = settings2.standard.color;
     this._ghost.opacity = settings2.ghost.opacity;
     this._ghost.color = settings2.ghost.color;
-    this.sectionStrokeWidth = settings2.section.strokeWidth;
-    this.sectionStrokeFalloff = settings2.section.strokeFalloff;
-    this.sectionStrokeColor = settings2.section.strokeColor;
-    this.outlineIntensity = settings2.outline.intensity;
+    this.outlineOpacity = settings2.outline.opacity;
     this.outlineColor = settings2.outline.color;
+    this.outlineThickness = settings2.outline.thickness;
   }
   /** @internal Signal dispatched whenever a material is modified. */
   get onUpdate() {
     return this._onUpdate.asEvent();
   }
-  /** Base color tint applied to opaque and transparent model materials. */
-  get modelColor() {
-    return this._opaque.color;
+  /** Opacity of the selection outline (0 = invisible, 1 = fully opaque). */
+  get outlineOpacity() {
+    return this._merge.opacity;
   }
-  set modelColor(color) {
-    this._opaque.color = color;
-    this._transparent.color = color;
-    this._onUpdate.dispatch();
+  set outlineOpacity(value) {
+    this._merge.opacity = value;
   }
-  /** Intensity of the selection outline post-process effect. */
-  get outlineIntensity() {
-    return this._outline.intensity;
+  /** Thickness of the selection outline in pixels (of the outline render target). */
+  get outlineThickness() {
+    return this._outline.thickness;
   }
-  set outlineIntensity(value) {
-    this._outline.intensity = value;
+  set outlineThickness(value) {
+    this._outline.thickness = value;
   }
   /** Color of the selection outline post-process effect. */
   get outlineColor() {
@@ -54722,45 +54638,10 @@ const _Materials = class _Materials {
     this._clippingPlanes = value;
     this._modelOpaque.clippingPlanes = value ?? null;
     this._modelTransparent.clippingPlanes = value ?? null;
-    this._opaque.clippingPlanes = value ?? null;
-    this._transparent.clippingPlanes = value ?? null;
     this._ghost.clippingPlanes = value ?? null;
     this._mask.clippingPlanes = value ?? null;
     this._onUpdate.dispatch();
   }
-  /** Width of the stroke rendered where the section box intersects the model. */
-  get sectionStrokeWidth() {
-    return this._sectionStrokeWidth;
-  }
-  set sectionStrokeWidth(value) {
-    if (this._sectionStrokeWidth === value) return;
-    this._sectionStrokeWidth = value;
-    this._opaque.sectionStrokeWidth = value;
-    this._transparent.sectionStrokeWidth = value;
-    this._onUpdate.dispatch();
-  }
-  /** Gradient falloff of the section box intersection stroke. */
-  get sectionStrokeFalloff() {
-    return this._sectionStrokeFalloff;
-  }
-  set sectionStrokeFalloff(value) {
-    if (this._sectionStrokeFalloff === value) return;
-    this._sectionStrokeFalloff = value;
-    this._opaque.sectionStrokeFalloff = value;
-    this._transparent.sectionStrokeFalloff = value;
-    this._onUpdate.dispatch();
-  }
-  /** Color of the section box intersection stroke. */
-  get sectionStrokeColor() {
-    return this._sectionStrokeColor;
-  }
-  set sectionStrokeColor(value) {
-    if (this._sectionStrokeColor === value) return;
-    this._sectionStrokeColor = value;
-    this._opaque.sectionStrokeColor = value;
-    this._transparent.sectionStrokeColor = value;
-    this._onUpdate.dispatch();
-  }
   /**
    * Creates the fixed quantized color palette texture if it doesn't exist.
    * The palette is deterministic (25³ = 15,625 quantized colors in 128×128 texture)
@@ -54770,6 +54651,8 @@ const _Materials = class _Materials {
     if (this._colorPaletteTexture) return;
     const textureData = buildPaletteTexture();
     this._colorPaletteTexture = new DataTexture(
+      // Cast: TS 5.7 narrows Uint8Array.buffer to ArrayBufferLike (includes SharedArrayBuffer),
+      // but Three.js expects BufferSource (ArrayBuffer only). Safe — Uint8Array always backs ArrayBuffer.
       textureData,
       128,
       128,
@@ -54779,8 +54662,6 @@ const _Materials = class _Materials {
     this._colorPaletteTexture.needsUpdate = true;
     this._colorPaletteTexture.minFilter = NearestFilter;
     this._colorPaletteTexture.magFilter = NearestFilter;
-    this._opaque.setColorPaletteTexture(this._colorPaletteTexture);
-    this._transparent.setColorPaletteTexture(this._colorPaletteTexture);
     this._modelOpaque.setColorPaletteTexture(this._colorPaletteTexture);
     this._modelTransparent.setColorPaletteTexture(this._colorPaletteTexture);
     this._onUpdate.dispatch();
@@ -54791,8 +54672,6 @@ const _Materials = class _Materials {
       this._colorPaletteTexture.dispose();
       this._colorPaletteTexture = void 0;
     }
-    this._opaque.dispose();
-    this._transparent.dispose();
     this._modelOpaque.dispose();
     this._modelTransparent.dispose();
     this._ghost.dispose();
@@ -55524,52 +55403,17 @@ function getDefaultViewerSettings() {
         opacityAlways: 0.1
       }
     },
-    background: { color: new Color(12698310) },
-    skybox: {
-      enable: true,
-      skyColor: new Color(16777215),
-      // white
-      groundColor: new Color(16185078),
-      // less white
-      sharpness: 2
-    },
-    skylight: {
-      skyColor: new Color(16777215),
-      groundColor: new Color(16777215),
-      intensity: 0.8
-    },
-    sunlights: [
-      {
-        followCamera: true,
-        position: new Vector3(1e3, 1e3, 1e3),
-        color: new Color(16777215),
-        intensity: 0.8
-      },
-      {
-        followCamera: true,
-        position: new Vector3(-1e3, -1e3, -1e3),
-        color: new Color(16777215),
-        intensity: 0.2
-      }
-    ],
+    background: { color: new Color(16777215) },
     materials: {
-      useFastMaterials: false,
-      standard: {
-        color: new Color(13421772)
-      },
       ghost: {
         color: new Color(921102),
         opacity: 7 / 255
       },
-      section: {
-        strokeWidth: 0.01,
-        strokeFalloff: 0.75,
-        strokeColor: new Color(16185078)
-      },
       outline: {
-        intensity: 2,
+        opacity: 0.85,
         color: new Color(65535),
-        scale: 0.75
+        scale: 0.75,
+        thickness: 2
       }
     },
     axes: getDefaultAxesSettings(),
@@ -55740,11 +55584,11 @@ let Viewport$1 = class Viewport {
     this._unregisterResize = () => window.removeEventListener("resize", onResize);
   }
 };
-function createInputHandler(viewer) {
+function createInputHandler(viewer, controls) {
   return new InputHandler(
     viewer.viewport.canvas,
     createAdapter$2(viewer),
-    viewer.settings.camera.controls
+    controls
   );
 }
 function createAdapter$2(viewer) {
@@ -56256,24 +56100,17 @@ class RenderPass extends Pass {
   }
 }
 class OutlinePass extends Pass {
-  constructor(camera2, material) {
+  constructor(material) {
     super();
     __publicField(this, "_fsQuad");
     __publicField(this, "material");
-    this.material = material ?? new OutlineMaterial();
-    this.material.camera = camera2;
+    this.material = material;
     this._fsQuad = new FullScreenQuad(this.material.three);
     this.needsSwap = true;
   }
   setSize(width, height) {
     this.material.resolution = new Vector2(width, height);
   }
-  get camera() {
-    return this.material.camera;
-  }
-  set camera(value) {
-    this.material.camera = value;
-  }
   dispose() {
     this._fsQuad.dispose();
     this.material.dispose();
@@ -56281,7 +56118,6 @@ class OutlinePass extends Pass {
   render(renderer, writeBuffer, readBuffer) {
     const depthBufferValue = writeBuffer.depthBuffer;
     writeBuffer.depthBuffer = false;
-    this.material.depthBuffer = readBuffer.depthTexture;
     this.material.sceneBuffer = readBuffer.texture;
     if (this.renderToScreen) {
       renderer.setRenderTarget(null);
@@ -56458,8 +56294,7 @@ class RenderingComposer {
       outlineHeight,
       {
         format: RedFormat,
-        type: UnsignedByteType,
-        depthTexture: new DepthTexture(outlineWidth, outlineHeight)
+        type: UnsignedByteType
       }
     );
     this._outlineTarget.texture.name = "selectionTarget";
@@ -56469,9 +56304,10 @@ class RenderingComposer {
       this._camera,
       this._materials.system.mask
     );
+    this._selectionRenderPass.clearColor = new Color(0);
+    this._selectionRenderPass.clearAlpha = 0;
     this._composer.addPass(this._selectionRenderPass);
     this._outlinePass = new OutlinePass(
-      this._camera,
       this._materials.system.outline
     );
     this._composer.addPass(this._outlinePass);
@@ -56524,7 +56360,6 @@ class RenderingComposer {
   set camera(value) {
     this._renderPass.camera = value;
     this._selectionRenderPass.camera = value;
-    this._outlinePass.material.camera = value;
     this._camera = value;
   }
   /**
@@ -56566,7 +56401,10 @@ class RenderingComposer {
       delta,
       false
     );
+    const bg = this._scene.threeScene.background;
+    this._scene.threeScene.background = null;
     this._composer.render(delta);
+    this._scene.threeScene.background = bg;
   }
   /**
    * Cleans up all resources used by the composer
@@ -57565,16 +57403,12 @@ let LoadRequest$2 = class LoadRequest2 extends LoadRequest$3 {
   }
 };
 class WebglViewer {
-  constructor(settings2) {
+  constructor(options) {
     /**
      * The type of the viewer, indicating it is a WebGL viewer.
      * Useful for distinguishing between different viewer types in a multi-viewer application.
      */
     __publicField(this, "type", "webgl");
-    /**
-     * The settings configuration used by the viewer.
-     */
-    __publicField(this, "settings");
     __publicField(this, "_renderer");
     __publicField(this, "_viewport");
     /**
@@ -57594,22 +57428,22 @@ class WebglViewer {
     __publicField(this, "vimCollection", new VimCollection());
     __publicField(this, "_onVimLoaded", new distExports$2.SignalDispatcher());
     __publicField(this, "_updateId");
-    this.settings = createViewerSettings(settings2);
+    const settings2 = createViewerSettings(options);
     this._materials = Materials.getInstance();
     const scene = new RenderScene();
-    this._viewport = new Viewport$1(this.settings);
-    this._camera = new Camera$1(scene, this._viewport, this.settings);
+    this._viewport = new Viewport$1(settings2);
+    this._camera = new Camera$1(scene, this._viewport, settings2);
     this._renderer = new Renderer$1(
       scene,
       this._viewport,
       this._materials,
       this._camera,
-      this.settings
+      settings2
     );
     this.selection = createSelection$1();
-    this._inputs = createInputHandler(this);
-    this._gizmos = new Gizmos(this._renderer, this._viewport, this, this._camera);
-    this.materials.applySettings(this.settings.materials);
+    this._inputs = createInputHandler(this, settings2.camera.controls);
+    this._gizmos = new Gizmos(this._renderer, this._viewport, this, this._camera, settings2);
+    this.materials.applySettings(settings2.materials);
     const size = this._renderer.three.getSize(new Vector2());
     const gpuPicker = new GpuPicker(
       this._renderer.three,
@@ -60201,7 +60035,6 @@ class SocketClient {
    */
   async _onOpen(_) {
     var _a3;
-    console.log("WebSocket connection opened to ", this.url);
     clearTimeout(this._connectionTimeout);
     this.updateState({ status: "validating" });
     const issues = await this._validateConnection();