feat(core): Add View.clone() method (#9588)

Author: ibgreen

docs/api-reference/core/view.md

@@ -115,6 +115,24 @@ Returns:
 Note: For speed, deck.gl uses shallow equality. This means that a value of `false` does not guarantee that the views are not equivalent.
 
 
+#### `clone` {#clone}
+
+<img src="https://img.shields.io/badge/from-v9.2-green.svg?style=flat-square" alt="from v9.2" />
+
+```js
+view.clone(newProps)
+```
+
+Creates a new `View` instance by merging the existing view's props with the provided `newProps`.
+
+Parameters:
+
+* `newProps` (Object) - Partial view props to override on the cloned view.
+
+Returns:
+
+* `View` - A new view instance with merged props.
+
 #### `makeViewport` {#makeviewport}
 
 ```js

docs/whats-new.md

@@ -2,10 +2,18 @@
 
 This page contains highlights of each deck.gl release. Also check our [vis.gl blog](https://medium.com/vis-gl) for news about new releases and features in deck.gl.
 
+## deck.gl v9.2
+
+Target release date: Q2, 2025
+
 ### Widgets
 
 - React: Pre-wrapped React components for the new deck.gl widgets are available via the [`@deck.gl/react`](./api-reference/react/overview.md) package, including: `ResetViewWidget`, `ScaleWidget`, `GeolocateWidget`, `ScreenshotWidget`, `LoadingWidget`, `ThemeWidget`, `InfoWidget`, and `SplitterWidget` (in addition to the `ZoomWidget`, `CompassWidget`, `FullscreenWidget` from v9.1)
 
+## Core
+
+- [`View.clone()`](./api-reference/core/view.md) - New method that simplifies creating new Views with modified props, similar to `Layer.clone()`.
+
 ## deck.gl v9.1
 
 Release date: Jan 21, 2025

modules/core/src/views/view.ts

@@ -105,6 +105,12 @@ export default abstract class View<
     return this.constructor === view.constructor && deepEqual(this.props, view.props, 2);
   }
 
+  /** Clone this view with modified props */
+  clone(newProps: Partial<ViewProps>): this {
+    const ViewConstructor = this.constructor as new (props: ViewProps) => this;
+    return new ViewConstructor({...this.props, ...newProps});
+  }
+
   /** Make viewport from canvas dimensions and view state */
   makeViewport({width, height, viewState}: {width: number; height: number; viewState: ViewState}) {
     viewState = this.filterViewState(viewState);

test/modules/core/views/view.spec.ts

@@ -19,6 +19,29 @@ test('View#imports', t => {
   t.end();
 });
 
+test('View#clone', t => {
+  const view = new MapView({
+    id: 'test-view',
+    latitude: 0,
+    longitude: 0,
+    zoom: 1
+  });
+  const identicalClone = view.clone({});
+  t.ok(identicalClone instanceof MapView, 'identical clone is an instance of MapView');
+  t.ok(identicalClone !== view, 'identical clone is a new instance');
+  t.ok(identicalClone.equals(view), 'identical clone.equals() is true');
+
+  const clone = view.clone({
+    id: 'cloned-view',
+    zoom: 5
+  });
+  t.is(clone.id, 'cloned-view', 'modified clone id is overridden');
+  t.is(clone.props.zoom, 5, 'modified clone prop zoom is overridden');
+  t.is(clone.props.latitude, view.props.latitude, 'other props are preserved');
+  t.is(clone.props.longitude, view.props.longitude, 'other props are preserved');
+  t.end();
+});
+
 test('View#equals', t => {
   const mapView1 = new MapView({
     id: 'default-view',