param handling tweaks

src/mol-plugin-ui/left-panel.tsx

@@ -131,6 +131,12 @@ class FullSettings extends PluginUIComponent {
     componentDidMount() {
         this.subscribe(this.plugin.events.canvas3d.settingsUpdated, () => this.forceUpdate());
         this.subscribe(this.plugin.layout.events.updated, () => this.forceUpdate());
+
+        this.subscribe(this.plugin.canvas3d!.camera.stateChanged, state => {
+            if (state.radiusMax !== undefined || state.radius !== undefined) {
+                this.forceUpdate()
+            }
+        })
     }
 
     icon(name: IconName, onClick: (e: React.MouseEvent<HTMLButtonElement>) => void, title: string, isOn = true) {

src/mol-plugin-ui/viewport/simple-settings.tsx

@@ -23,7 +23,7 @@ export class SimpleSettingsControl extends PluginUIComponent {
     componentDidMount() {
         this.subscribe(this.plugin.events.canvas3d.settingsUpdated, () => this.forceUpdate());
 
-        this.plugin.canvas3d!.camera.stateChanged.subscribe(state => {
+        this.subscribe(this.plugin.canvas3d!.camera.stateChanged, state => {
             if (state.radiusMax !== undefined || state.radius !== undefined) {
                 this.forceUpdate()
             }
@@ -44,7 +44,7 @@ const SimpleSettingsParams = {
         spin: Canvas3DParams.trackball.params.spin,
         speed: Canvas3DParams.trackball.params.spinSpeed
     }, { pivot: 'spin' }),
-    camera: Canvas3DParams.cameraMode,
+    camera: Canvas3DParams.camera,
     background: PD.Group({
         color: PD.Color(Color(0xFCFBF9), { label: 'Background', description: 'Custom background color' }),
         transparent: PD.Boolean(false)
@@ -77,7 +77,7 @@ const SimpleSettingsMapping = ParamMapping({
         return {
             layout: props.layout,
             spin: { spin: !!canvas.trackball.spin, speed: canvas.trackball.spinSpeed },
-            camera: canvas.cameraMode,
+            camera: canvas.camera,
             background: {
                 color: renderer.backgroundColor,
                 transparent: canvas.transparentBackground
@@ -95,7 +95,7 @@ const SimpleSettingsMapping = ParamMapping({
         const canvas = props.canvas as Mutable<Canvas3DProps>;
         canvas.trackball.spin = s.spin.spin;
         canvas.trackball.spinSpeed = s.spin.speed;
-        canvas.cameraMode = s.camera;
+        canvas.camera = s.camera;
         canvas.transparentBackground = s.background.transparent;
         canvas.renderer.backgroundColor = s.background.color;
         canvas.renderer.style = s.lighting.renderStyle

src/mol-util/param-definition.ts

@@ -409,20 +409,20 @@ export namespace ParamDefinition {
     }
 
     export function mergeParam(p: Any, a: any, b: any): any {
-        if (a === undefined) return b;
-        if (b === undefined) return a;
+        if (a === undefined) return typeof b === 'object' ? { ...b } : b;
+        if (b === undefined) return typeof a === 'object' ? { ...a } : a;
 
         if (p.type === 'group') {
             return merge(p.params, a, b);
         } else if (p.type === 'mapped') {
             const u = a as NamedParams, v = b as NamedParams;
-            if (u.name !== v.name) return v;
+            if (u.name !== v.name) return { ...v };
             const map = p.map(v.name);
             return {
                 name: v.name,
                 params: mergeParam(map, u.params, v.params)
             };
-        } else if (typeof a === 'object' || typeof b === 'object') {
+        } else if (typeof a === 'object' && typeof b === 'object') {
             return { ...a, ...b };
         } else {
             return b