fix structure focus camera animation

+ more UI code tweaks

src/mol-canvas3d/camera/transition.ts

@@ -25,6 +25,19 @@ class CameraTransitionManager {
     get target(): Readonly<Camera.Snapshot> { return this._target }
 
     apply(to: Partial<Camera.Snapshot>, durationMs: number = 0, transition?: CameraTransitionManager.TransitionFunc) {
+        if (this.inTransition) {
+            if (durationMs <= 0) {
+                this.finish({ ...this._target, ...to });
+                return;
+            }
+
+            this.func = transition || CameraTransitionManager.defaultTransition;
+            this.start = this.t;
+            this.durationMs = durationMs;
+            Camera.copySnapshot(this._target, { ...this._target, ...to });
+            return;
+        }
+
         Camera.copySnapshot(this._source, this.camera.state);
         Camera.copySnapshot(this._target, this.camera.state);
         Camera.copySnapshot(this._target, to);

src/mol-canvas3d/canvas3d.ts

@@ -303,6 +303,7 @@ namespace Canvas3D {
 
         function resolveCameraReset() {
             if (!cameraResetRequested) return;
+
             const { center, radius } = scene.boundingSphereVisible;
             if (radius > 0) {
                 const duration = nextCameraResetDuration === undefined ? p.cameraResetDurationMs : nextCameraResetDuration
@@ -350,7 +351,9 @@ namespace Canvas3D {
             if (!scene.commit(isSynchronous ? void 0 : sceneCommitTimeoutMs)) return false;
 
             if (debugHelper.isEnabled) debugHelper.update();
-            if (reprCount.value === 0 || shouldResetCamera()) cameraResetRequested = true;
+            if (reprCount.value === 0 || shouldResetCamera()) {
+                cameraResetRequested = true;
+            }
             if (oldBoundingSphereVisible.radius === 0) nextCameraResetDuration = 0;
 
             camera.setState({ radiusMax: scene.boundingSphere.radius })

src/mol-plugin-state/manager/camera.ts

@@ -88,15 +88,20 @@ export class CameraManager {
 
         if (options?.principalAxes) {
             const { origin, dirA, dirC } = options?.principalAxes.boxAxes;
-            this.plugin.canvas3d?.camera.focus(origin, radius, durationMs, dirA, dirC);
+            const snapshot = this.plugin.canvas3d?.camera.getFocus(origin, radius, dirA, dirC);
+            this.plugin.canvas3d?.requestCameraReset({ durationMs, snapshot })
+            // this.plugin.canvas3d?.camera.focus(origin, radius, durationMs, dirA, dirC);
         } else {
-            this.plugin.canvas3d?.camera.focus(sphere.center, radius, durationMs);
+            const snapshot = this.plugin.canvas3d?.camera.getFocus(sphere.center, radius);
+            this.plugin.canvas3d?.requestCameraReset({ durationMs, snapshot })
+
+            // this.plugin.canvas3d?.camera.focus(sphere.center, radius, durationMs);
         }
     }
 
     setSnapshot(snapshot: Partial<Camera.Snapshot>, durationMs?: number) {
         // TODO: setState and requestCameraReset are very similar now: unify them?
-        this.plugin.canvas3d?.camera.setState(snapshot, durationMs);
+        this.plugin.canvas3d?.requestCameraReset({ snapshot, durationMs });
     }
 
     reset(snapshot?: Partial<Camera.Snapshot>, durationMs?: number) {

src/mol-plugin-ui/controls/common.tsx

@@ -314,7 +314,7 @@ export function IconButton(props: {
     extraContent?: JSX.Element,
     flex?: boolean | string | number
 }) {
-    let className = `msp-btn-link msp-btn-icon${props.small ? '-small' : ''}${props.className ? ' ' + props.className : ''}`;
+    let className = `msp-btn msp-btn-icon${props.small ? '-small' : ''}${props.className ? ' ' + props.className : ''}`;
     if (typeof props.toggleState !== 'undefined') {
         className += ` msp-btn-link-toggle-${props.toggleState ? 'on' : 'off'}`
     }

src/mol-plugin-ui/skin/base/components/temp.scss

@@ -118,6 +118,11 @@
         overflow: hidden;
     }
 
+    .msp-btn-icon, .msp-btn-icon-small {
+        flex: 0 0 32px;
+        max-width: 32px;
+    }
+
     > select {
         background: none;
 

src/mol-plugin-ui/structure/components.tsx

@@ -342,10 +342,10 @@ class StructureComponentGroup extends PurePluginUIComponent<{ group: StructureCo
         // const reprLabel = this.reprLabel;
         return <>
             <div className='msp-btn-row-group'>
-                <button className='msp-form-control msp-control-button-label msp-no-overflow' title={`${label}. Click to focus.`} onClick={this.focus} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight} style={{ textAlign: 'left' }}>
+                <Button noOverflow className='msp-control-button-label' title={`${label}. Click to focus.`} onClick={this.focus} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight} style={{ textAlign: 'left' }}>
                     {label}
                     {/* <small className='msp-25-lower-contrast-text' style={{ float: 'right' }}>{reprLabel}</small> */}
-                </button>
+                </Button>
                 <IconButton onClick={this.toggleVisible} icon='visual-visibility' toggleState={!cell.state.isHidden} title={`${cell.state.isHidden ? 'Show' : 'Hide'} component`} small className='msp-form-control' flex />
                 <IconButton onClick={this.toggleRemove} icon='remove' title='Remove' small toggleState={this.state.action === 'remove'} className='msp-form-control' flex />
                 <IconButton onClick={this.toggleAction} icon='dot-3' title='Actions' toggleState={this.state.action === 'action'} className='msp-form-control' flex />

src/mol-plugin-ui/structure/focus.tsx

@@ -138,8 +138,6 @@ export class StructureFocusControls extends PluginUIComponent<{}, StructureFocus
         this.setState({ showAction: false }, () => {
             const f = item.value as FocusEntry
             this.plugin.managers.structure.focus.set(f)
-            // TODO make work with durationMs > 0
-            this.plugin.managers.camera.focusLoci(f.loci, { durationMs: 0 })
         })
     }
 

src/mol-plugin-ui/structure/source.tsx

@@ -253,7 +253,7 @@ export class StructureSourceControls extends CollapsableControls<{}, StructureSo
         return <>
             <div className='msp-btn-row-group' style={{ marginTop: '1px' }}>
                 <Button noOverflow flex onClick={this.toggleHierarchy} disabled={disabled} title={label}>{label}</Button>
-                {presets.length > 0 && <IconButton className='msp-form-control' flex onClick={this.togglePreset} icon='bookmarks' title='Presets' toggleState={this.state.show === 'presets'} disabled={disabled} />}
+                {presets.length > 0 && <IconButton className='msp-form-control' flex='40px' onClick={this.togglePreset} icon='bookmarks' title='Presets' toggleState={this.state.show === 'presets'} disabled={disabled} />}
             </div>
             {this.state.show === 'hierarchy' && <ActionMenu items={this.hierarchyItems} onSelect={this.selectHierarchy} multiselect />}
             {this.state.show === 'presets' && <ActionMenu items={presets} onSelect={this.applyPreset} />}

src/mol-plugin/behavior/dynamic/representation.ts

@@ -211,9 +211,6 @@ export const FocusLoci = PluginBehavior.create<FocusLociProps>({
                         this.ctx.managers.structure.focus.setFromLoci(loci)
                         if (isEmptyLoci(loci)) {
                             this.ctx.managers.camera.reset()
-                        } else {
-                            // TODO make work with durationMs > 0
-                            this.ctx.managers.camera.focusLoci(loci, { durationMs: 0 })
                         }
                     }
                 }

src/mol-plugin/behavior/dynamic/selection/structure-focus-representation.ts

@@ -121,7 +121,7 @@ export class StructureFocusRepresentationBehavior extends PluginBehavior.WithSub
         return PluginCommands.State.Update(this.plugin, { state, tree: update, options: { doNotLogTiming: true, doNotUpdateCurrent: true } });
     }
 
-    private focus(loci: StructureElement.Loci) {
+    private async focus(loci: StructureElement.Loci) {
         const parent = this.plugin.helpers.substructureParent.get(loci.structure);
         if (!parent || !parent.obj) return;
 
@@ -139,7 +139,10 @@ export class StructureFocusRepresentationBehavior extends PluginBehavior.WithSub
         builder.to(refs[StructureFocusRepresentationTags.TargetSel]!).update(StateTransforms.Model.StructureSelectionFromBundle, old => ({ ...old, bundle: residueBundle }));
         builder.to(refs[StructureFocusRepresentationTags.SurrSel]!).update(StateTransforms.Model.StructureSelectionFromExpression, old => ({ ...old, expression: surroundings, label: this.surrLabel }));
 
-        PluginCommands.State.Update(this.plugin, { state, tree: builder, options: { doNotLogTiming: true, doNotUpdateCurrent: true } });
+        await PluginCommands.State.Update(this.plugin, { state, tree: builder, options: { doNotLogTiming: true, doNotUpdateCurrent: true } });
+
+        // TODO make work with durationMs > 0
+        this.plugin.managers.camera.focusLoci(loci)
     }
 
     register(ref: string): void {