mol-plugin-state: component representation update

src/mol-plugin-state/manager/structure/component.ts

@@ -173,6 +173,23 @@ class StructureComponentManager extends PluginComponent<StructureComponentManage
         return this.plugin.managers.structure.hierarchy.remove(toRemove);
     }
 
+    updateRepresentations(components: ReadonlyArray<StructureComponentRef>, pivot: StructureRepresentationRef, params: StateTransformer.Params<StructureRepresentation3D>) {        
+        if (components.length === 0) return Promise.resolve();
+
+        const index = components[0].representations.indexOf(pivot);
+        if (index < 0) return Promise.resolve();
+
+        const update = this.dataState.build();
+
+        for (const c of components) {
+            const repr = c.representations[index];
+            if (!repr) continue;
+            update.to(repr.cell).update(params);
+        }
+
+        return this.plugin.runTask(this.dataState.updateTree(update));
+    }
+
     async addRepresentation(components: ReadonlyArray<StructureComponentRef>, type: string) {
         if (components.length === 0) return;
 

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

@@ -100,7 +100,7 @@ namespace TransformControlBase {
     }
 }
 
-abstract class TransformControlBase<P, S extends TransformControlBase.ComponentState> extends PurePluginUIComponent<P & { noMargin?: boolean, onApply?: () => void, applyLabel?: string }, S> {
+abstract class TransformControlBase<P, S extends TransformControlBase.ComponentState> extends PurePluginUIComponent<P & { noMargin?: boolean, applyLabel?: string }, S> {
     abstract applyAction(): Promise<void>;
     abstract getInfo(): StateTransformParameters.Props['info'];
     abstract getHeader(): StateTransformer.Definition['display'] | 'none';
@@ -141,7 +141,6 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS
     }
 
     apply = async () => {
-        this.props.onApply?.();
         this.clearAutoApply();
         this.setState({ busy: true });
         try {

src/mol-plugin-ui/state/update-transform.tsx

@@ -19,7 +19,8 @@ namespace UpdateTransformControl {
         state: State,
         toggleCollapsed?: Observable<any>,
         initiallyCollapsed?: boolean,
-        customHeader?: StateTransformer.Definition['display'] | 'none'
+        customHeader?: StateTransformer.Definition['display'] | 'none',
+        customUpdate?: (params: any) => Promise<any>,
     }
 
     export interface ComponentState extends TransformControlBase.ComponentState {
@@ -28,7 +29,10 @@ namespace UpdateTransformControl {
 }
 
 class UpdateTransformControl extends TransformControlBase<UpdateTransformControl.Props, UpdateTransformControl.ComponentState> {
-    applyAction() { return this.plugin.updateTransform(this.props.state, this.props.transform.ref, this.state.params); }
+    applyAction() { 
+        if (this.props.customUpdate) return this.props.customUpdate(this.state.params);
+        return this.plugin.updateTransform(this.props.state, this.props.transform.ref, this.state.params);
+    }
     getInfo() { return this._getInfo(this.props.transform); }
     getTransformerId() { return this.props.transform.transformer.id; }
     getHeader() { return this.props.customHeader || this.props.transform.transformer.definition.display; }

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

@@ -305,12 +305,14 @@ class StructureComponentGroup extends PurePluginUIComponent<{ group: StructureCo
 class StructureRepresentationEntry extends PurePluginUIComponent<{ group: StructureComponentRef[], representation: StructureRepresentationRef }> {
     remove = () => this.plugin.managers.structure.component.removeRepresentations(this.props.group, this.props.representation);
 
+    update = (params: any) => this.plugin.managers.structure.component.updateRepresentations(this.props.group, this.props.representation, params);
+
     render() {
         const repr = this.props.representation.cell;
         // TODO: style in CSS
         return <div style={{ position: 'relative' }}>
             <ExpandGroup header={`${repr.obj?.label || ''} Representation`} noOffset>
-                <UpdateTransformControl state={repr.parent} transform={repr.transform} customHeader='none' noMargin />
+                <UpdateTransformControl state={repr.parent} transform={repr.transform} customHeader='none' customUpdate={this.update} noMargin />
                 <IconButton onClick={this.remove} icon='remove' title='Remove' small style={{ 
                     position: 'absolute', top: 0, right: 0, lineHeight: '20px', height: '20px', textAlign: 'right', width: '44px', paddingRight: '6px'
                 }} />