mol-state: cell visibility support

src/mol-plugin/behavior.ts

@@ -6,13 +6,18 @@
 
 export * from './behavior/behavior'
 
-import * as State from './behavior/built-in/state'
-import * as Representation from './behavior/built-in/representation'
+import * as StaticState from './behavior/static/state'
+import * as StaticRepresentation from './behavior/static/representation'
+import * as StaticCamera from './behavior/static/representation'
+
+import * as DynamicRepresentation from './behavior/dynamic/representation'
 
 export const BuiltInPluginBehaviors = {
-    State,
+    State: StaticState,
+    Representation: StaticRepresentation,
+    Camera: StaticCamera
 }
 
 export const PluginBehaviors = {
-    Representation
+    Representation: DynamicRepresentation
 }
\ No newline at end of file

src/mol-plugin/behavior/built-in/representation.ts → src/mol-plugin/behavior/dynamic/representation.ts

@@ -5,54 +5,9 @@
  */
 
 import { PluginBehavior } from '../behavior';
-import { PluginStateObject as SO } from '../../state/objects';
 import { EmptyLoci, Loci, areLociEqual } from 'mol-model/loci';
 import { MarkerAction } from 'mol-geo/geometry/marker-data';
 
-export const AddRepresentationToCanvas = PluginBehavior.create({
-    name: 'add-representation-to-canvas',
-    ctor: class extends PluginBehavior.Handler {
-        register(): void {
-            this.subscribeObservable(this.ctx.events.state.data.object.created, o => {
-                if (!SO.isRepresentation3D(o.obj)) return;
-                this.ctx.canvas3d.add(o.obj.data);
-                this.ctx.canvas3d.requestDraw(true);
-            });
-            this.subscribeObservable(this.ctx.events.state.data.object.updated, o => {
-                if (o.oldObj && SO.isRepresentation3D(o.oldObj)) {
-                    this.ctx.canvas3d.remove(o.oldObj.data);
-                    this.ctx.canvas3d.requestDraw(true);
-                    o.oldObj.data.destroy();
-                }
-
-                const oo = o.obj;
-                if (!SO.isRepresentation3D(oo)) return;
-                this.ctx.canvas3d.add(oo.data);
-                this.ctx.canvas3d.requestDraw(true);
-            });
-            this.subscribeObservable(this.ctx.events.state.data.object.removed, o => {
-                const oo = o.obj;
-                if (!SO.isRepresentation3D(oo)) return;
-                this.ctx.canvas3d.remove(oo.data);
-                this.ctx.canvas3d.requestDraw(true);
-                oo.data.destroy();
-            });
-            // this.subscribeObservable(this.ctx.events.state.data.object.replaced, o => {
-            //     if (o.oldObj && SO.isRepresentation3D(o.oldObj)) {
-            //         this.ctx.canvas3d.remove(o.oldObj.data);
-            //         this.ctx.canvas3d.requestDraw(true);
-            //         o.oldObj.data.destroy();
-            //     }
-            //     if (o.newObj && SO.isRepresentation3D(o.newObj)) {
-            //         this.ctx.canvas3d.add(o.newObj.data);
-            //         this.ctx.canvas3d.requestDraw(true);
-            //     }
-            // });
-        }
-    },
-    display: { name: 'Add Representation To Canvas', group: 'Data' }
-});
-
 export const HighlightLoci = PluginBehavior.create({
     name: 'representation-highlight-loci',
     ctor: class extends PluginBehavior.Handler {

src/mol-plugin/behavior/static/camera.ts

+/**
+ * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+
+import { PluginContext } from 'mol-plugin/context';
+
+export function registerDefault(ctx: PluginContext) {
+}

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

+/**
+ * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+
+import { PluginStateObject as SO } from '../../state/objects';
+import { PluginContext } from 'mol-plugin/context';
+
+export function registerDefault(ctx: PluginContext) {
+    SyncRepresentationToCanvas(ctx);
+}
+
+export function SyncRepresentationToCanvas(ctx: PluginContext) {
+    ctx.events.state.data.object.created.subscribe(e => {
+        if (!SO.isRepresentation3D(e.obj)) return;
+        ctx.canvas3d.add(e.obj.data);
+        ctx.canvas3d.requestDraw(true);
+
+        // TODO: update visiblity
+    });
+    ctx.events.state.data.object.updated.subscribe(e => {
+        if (e.oldObj && SO.isRepresentation3D(e.oldObj)) {
+            ctx.canvas3d.remove(e.oldObj.data);
+            ctx.canvas3d.requestDraw(true);
+            e.oldObj.data.destroy();
+        }
+
+        if (!SO.isRepresentation3D(e.obj)) return;
+
+        // TODO: update visiblity
+        ctx.canvas3d.add(e.obj.data);
+        ctx.canvas3d.requestDraw(true);
+    });
+    ctx.events.state.data.object.removed.subscribe(e => {
+        const oo = e.obj;
+        if (!SO.isRepresentation3D(oo)) return;
+        ctx.canvas3d.remove(oo.data);
+        ctx.canvas3d.requestDraw(true);
+        oo.data.destroy();
+    });
+}
+
+export function UpdateRepresentationVisibility(ctx: PluginContext) {
+    ctx.events.state.data.object.cellState.subscribe(e => {
+        const cell = e.state.cells.get(e.ref)!;
+        if (!SO.isRepresentation3D(cell.obj)) return;
+
+        // TODO: update visiblity
+    })
+}
\ No newline at end of file

src/mol-plugin/behavior/built-in/state.ts → src/mol-plugin/behavior/static/state.ts

@@ -6,13 +6,15 @@
 
 import { PluginCommands } from '../../command';
 import { PluginContext } from '../../context';
+import { StateTree, Transform, State } from 'mol-state';
 
-export function registerAll(ctx: PluginContext) {
+export function registerDefault(ctx: PluginContext) {
     SetCurrentObject(ctx);
     Update(ctx);
     ApplyAction(ctx);
     RemoveObject(ctx);
     ToggleExpanded(ctx);
+    ToggleVisibility(ctx);
 }
 
 export function SetCurrentObject(ctx: PluginContext) {
@@ -38,29 +40,14 @@ export function ToggleExpanded(ctx: PluginContext) {
     PluginCommands.State.ToggleExpanded.subscribe(ctx, ({ state, ref }) => state.updateCellState(ref, ({ isCollapsed }) => ({ isCollapsed: !isCollapsed })));
 }
 
-// export const SetCurrentObject = PluginBehavior.create({
-//     name: 'set-current-data-object-behavior',
-//     ctor: PluginBehavior.simpleCommandHandler(PluginCommands.State.SetCurrentObject, ({ state, ref }, ctx) => state.setCurrent(ref)),
-//     display: { name: 'Set Current Handler', group: 'Data' }
-// });
-
-// export const Update = PluginBehavior.create({
-//     name: 'update-data-behavior',
-//     ctor: PluginBehavior.simpleCommandHandler(PluginCommands.State.Update, ({ state, tree }, ctx) => ctx.runTask(state.update(tree))),
-//     display: { name: 'Update Data Handler', group: 'Data' }
-// });
+export function ToggleVisibility(ctx: PluginContext) {
+    PluginCommands.State.ToggleVisibility.subscribe(ctx, ({ state, ref }) => setVisibility(state, ref, !state.tree.cellStates.get(ref).isHidden));
+}
 
-// export const ApplyAction = PluginBehavior.create({
-//     name: 'update-data-behavior',
-//     ctor: PluginBehavior.simpleCommandHandler(PluginCommands.State.Update, ({ state, tree }, ctx) => ctx.runTask(state.update(tree))),
-//     display: { name: 'Update Data Handler', group: 'Data' }
-// });
+function setVisibility(state: State, root: Transform.Ref, value: boolean) {
+    StateTree.doPreOrder(state.tree, state.tree.transforms.get(root), { state, value }, setVisibilityVisitor);
+}
 
-// export const RemoveObject = PluginBehavior.create({
-//     name: 'remove-object-data-behavior',
-//     ctor: PluginBehavior.simpleCommandHandler(PluginCommands.State.RemoveObject, ({ state, ref }, ctx) => {
-//         const tree = state.tree.build().delete(ref).getTree();
-//         return ctx.runTask(state.update(tree));
-//     }),
-//     display: { name: 'Remove Object Handler', group: 'Data' }
-// });
\ No newline at end of file
+function setVisibilityVisitor(t: Transform, tree: StateTree, ctx: { state: State, value: boolean }) {
+    ctx.state.updateCellState(t.ref, { isHidden: ctx.value });
+}
\ No newline at end of file

src/mol-plugin/command/state.ts

@@ -16,4 +16,6 @@ export const Update = PluginCommand<{ state: State, tree: State.Tree | State.Bui
 
 export const RemoveObject = PluginCommand<{ state: State, ref: Transform.Ref }>();
 
-export const ToggleExpanded = PluginCommand<{ state: State, ref: Transform.Ref }>({ isImmediate: true });
\ No newline at end of file
+export const ToggleExpanded = PluginCommand<{ state: State, ref: Transform.Ref }>({ isImmediate: true });
+
+export const ToggleVisibility = PluginCommand<{ state: State, ref: Transform.Ref }>({ isImmediate: true });
\ No newline at end of file

src/mol-plugin/context.ts

@@ -82,12 +82,13 @@ export class PluginContext {
     }
 
     private initBuiltInBehavior() {
-        BuiltInPluginBehaviors.State.registerAll(this);
+        BuiltInPluginBehaviors.State.registerDefault(this);
+        BuiltInPluginBehaviors.Representation.registerDefault(this);
+        BuiltInPluginBehaviors.Camera.registerDefault(this);
     }
 
     async _test_initBehaviors() {
         const tree = this.state.behavior.tree.build()
-            .toRoot().apply(PluginBehaviors.Representation.AddRepresentationToCanvas, { ref: PluginBehaviors.Representation.AddRepresentationToCanvas.id })
             .toRoot().apply(PluginBehaviors.Representation.HighlightLoci, { ref: PluginBehaviors.Representation.HighlightLoci.id })
             .toRoot().apply(PluginBehaviors.Representation.SelectLoci, { ref: PluginBehaviors.Representation.SelectLoci.id })
             .getTree();

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

@@ -66,9 +66,16 @@ export class StateTreeNode extends PluginComponent<{ nodeRef: string, state: Sta
             }}>{cellState.isCollapsed ? '+' : '-'}</a>]
         </>;
 
+        const visibility = <>
+            [<a href='#' onClick={e => {
+                e.preventDefault();
+                PluginCommands.State.ToggleVisibility.dispatch(this.context, { state: this.props.state, ref: this.props.nodeRef });
+            }}>{cellState.isHidden ? 'H' : 'V'}</a>]
+        </>;
+
         const children = this.props.state.tree.children.get(this.props.nodeRef);
         return <div>
-            {remove}{children.size === 0 ? void 0 : expander} {label}
+            {remove}{visibility}{children.size === 0 ? void 0 : expander} {label}
             {cellState.isCollapsed || children.size === 0
                 ? void 0
                 : <div style={{ marginLeft: '7px', paddingLeft: '3px', borderLeft: '1px solid #999' }}>{children.map(c => <StateTreeNode state={this.props.state} nodeRef={c!} key={c} />)}</div>