Options
All
  • Public
  • Public/Protected
  • All
Menu

Rather that using the decorator RenderView, it is possible to define the view by including a class called RenderView inheriting from ModuleRendererRun into the module namespace. One use-case is a need to persist some state related to view.

This is illustrated in the next example: the module's outputs are accumulated in the view over time, and a selection from the view of one item trigger re-emission.

import {render, children$} from '@youwol/flux-view'

namespace MyModule{

     @Flux(...)
     @BuilderView(...)
     // Do not use @RenderView(...)
     class Module extends ModuleFlux{

         output$ : Pipe<number>
         // in a real scenario, we would need to take care about context here
         selectValue( value: number) { this.output$.next({data: value}) }

         // ...
     } 

     class RenderView extends ModuleRendererRun<Module>{
         
         public readonly accItems$ : Observable<Array<number>>

         constructor(module: Module, wrapperDivAttributes) {
             super(module, wrapperDivAttributes)                  
             // scan: accumulate an observable emission overtime
             this.accItems$ = module.result$.pipe(scan( acc,e )=>[...acc,e], [])
         }

         render() {
             
             let view = (item, itemsCount, i) => ({ 
                  class: i == itemsCount -1 ? 'text-primary' : 'test-secondary'
                  innerText: String(item),
                  onclick: (ev: MouseEvent) => this.module.selectValue(item)) 
             }) * 
             return {
                 children: children$(
                     this.accItems$,
                     (items) => items.map( (item, i) => view(item, items.length, i),
                     { untilFirst: [{innerText:"No output emitted yet"}] }
                 )
             }
         }
     }
}

Type parameters

Hierarchy

  • ModuleRendererRun

Index

Constructors

Properties

Methods

Constructors

constructor

  • new ModuleRendererRun<T>(module: T, wrapperDivAttributes: (module: ModuleFlux) => { class?: string; style?: {} }): ModuleRendererRun<T>
  • Type parameters

    Parameters

    • module: T

      the module to render

    • wrapperDivAttributes: (module: ModuleFlux) => { class?: string; style?: {} }

      The view of a module is always encapsulated in Flux in a wrapper div; wrapperDivAttributes allows to add classes or set style on this div. For instance, a view of type 3D viewer will likely want to apply a {width:'100%'; height:'100%'} to the wrapper div of the 3D viewer.

      This wrapper div attributes is most likely an artifact of the rendering mechanism in Flux. Hopefully it will disappear at some point.

        • (module: ModuleFlux): { class?: string; style?: {} }
        • Parameters

          Returns { class?: string; style?: {} }

          • Optional class?: string
          • Optional style?: {}
            • [key: string]: string

    Returns ModuleRendererRun<T>

Properties

Readonly module

module: T

Readonly wrapperDivAttributes

wrapperDivAttributes: (module: ModuleFlux) => { class?: string; style?: {} }

Type declaration

    • (module: ModuleFlux): { class?: string; style?: {} }
    • Parameters

      Returns { class?: string; style?: {} }

      • Optional class?: string
      • Optional style?: {}
        • [key: string]: string

Methods

Abstract render

  • render(): HTMLElement

Generated using TypeDoc