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

package/dist/vim-web.iife.js

@@ -47544,25 +47544,6 @@ void main() {
   };
   __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");
@@ -53777,7 +53758,7 @@ void main() {
     }
   };
   class Gizmos {
-    constructor(renderer, viewport, viewer, camera2) {
+    constructor(renderer, viewport, viewer, camera2, settings2) {
       __publicField(this, "_viewport");
       __publicField(this, "_measure");
       /**
@@ -53804,9 +53785,9 @@ void main() {
         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);
     }
@@ -54059,8 +54040,8 @@ void main() {
       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 */
         `
@@ -54209,33 +54190,13 @@ void main() {
     });
   }
   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.
@@ -54246,50 +54207,24 @@ void main() {
     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);
     }
@@ -54305,18 +54240,6 @@ void main() {
       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.
      */
@@ -54330,18 +54253,9 @@ void main() {
       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;
@@ -54351,52 +54265,55 @@ void main() {
       }
       `,
       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);
       }
       `
     });
@@ -54417,6 +54334,15 @@ void main() {
       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;
     }
@@ -54442,7 +54368,8 @@ void main() {
       uniforms: {
         sourceA: { value: null },
         sourceB: { value: null },
-        color: { value: new Color(16777215) }
+        color: { value: new Color(16777215) },
+        opacity: { value: 1 }
       },
       vertexShader: (
         /* glsl */
@@ -54458,25 +54385,26 @@ void main() {
         /* 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);
        }
        `
       )
@@ -54624,9 +54552,7 @@ void main() {
     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");
@@ -54635,20 +54561,15 @@ void main() {
       __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) {
@@ -54694,34 +54615,29 @@ void main() {
      * 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() {
@@ -54738,45 +54654,10 @@ void main() {
       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)
@@ -54786,6 +54667,8 @@ void main() {
       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,
@@ -54795,8 +54678,6 @@ void main() {
       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();
@@ -54807,8 +54688,6 @@ void main() {
         this._colorPaletteTexture.dispose();
         this._colorPaletteTexture = void 0;
       }
-      this._opaque.dispose();
-      this._transparent.dispose();
       this._modelOpaque.dispose();
       this._modelTransparent.dispose();
       this._ghost.dispose();
@@ -55540,52 +55419,17 @@ void main() {
           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(),
@@ -55756,11 +55600,11 @@ void main() {
       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) {
@@ -56272,24 +56116,17 @@ void main() {
     }
   }
   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();
@@ -56297,7 +56134,6 @@ void main() {
     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);
@@ -56474,8 +56310,7 @@ void main() {
         outlineHeight,
         {
           format: RedFormat,
-          type: UnsignedByteType,
-          depthTexture: new DepthTexture(outlineWidth, outlineHeight)
+          type: UnsignedByteType
         }
       );
       this._outlineTarget.texture.name = "selectionTarget";
@@ -56485,9 +56320,10 @@ void main() {
         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);
@@ -56540,7 +56376,6 @@ void main() {
     set camera(value) {
       this._renderPass.camera = value;
       this._selectionRenderPass.camera = value;
-      this._outlinePass.material.camera = value;
       this._camera = value;
     }
     /**
@@ -56582,7 +56417,10 @@ void main() {
         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
@@ -57581,16 +57419,12 @@ void main() {
     }
   };
   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");
       /**
@@ -57610,22 +57444,22 @@ void main() {
       __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,
@@ -60217,7 +60051,6 @@ Averrage Date/Second ${avgDataRatePS} kb
      */
     async _onOpen(_) {
       var _a3;
-      console.log("WebSocket connection opened to ", this.url);
       clearTimeout(this._connectionTimeout);
       this.updateState({ status: "validating" });
       const issues = await this._validateConnection();