Options
All
  • Public
  • Public/Protected
  • All
Menu

Module lib/models/decorators

Index

Functions

BuilderView

  • BuilderView(__namedParameters: { icon: string; namespace: any; render?: (ModuleFlux: any, icon: string) => SVGElement }): (target: any) => void
  • Decorator associated to the class ModuleFlux providing required features related to the builder view.

    To generate a default view with a custom icon of your module, decorate the Module class with @BuilderView and provide some svg content (as string) to use as icon:

    @BuilderView({
          namespace: ModuleNamespace,
          icon : "<!-- svg content goes here --!>"
      })
    class Module extends ModuleFlux{
         //...
    }
    
    

    The svg content will be appropriately scaled and translated, do not worry about that 😇.

    To go beyond the default view, there is all you need discussed in custom builder view.

    Parameters

    • __namedParameters: { icon: string; namespace: any; render?: (ModuleFlux: any, icon: string) => SVGElement }
      • icon: string

        svg content that represents the icon of the module. The content provided is translated and scaled appropriately automatically, no need to worry about it.

      • namespace: any

        Englobing namespace of the module

      • Optional render?: (ModuleFlux: any, icon: string) => SVGElement

        providing this function bypass the default view. See discussions in custom builder view.

          • (ModuleFlux: any, icon: string): SVGElement
          • Parameters

            • ModuleFlux: any
            • icon: string

            Returns SVGElement

    Returns (target: any) => void

    decorator

      • (target: any): void
      • Parameters

        • target: any

        Returns void

Flux

  • Flux(__namedParameters: { compatibility?: {}; description?: string; displayName?: string; id: string; namespace: any; pack: FluxPack; resources?: {} }): (target: any) => void
  • Decorator associated to the class ModuleFlux that registers modules in a pack and create general information in the Factory.

    Typical usage looks like:

    @Flux({
          pack:           pack,
          namespace:      ModuleFilePicker,
          id:             "FilePicker",
          displayName:    "File Picker",
          description:    "This module allows to select a file from an id and a drive",
          resources: {
              'technical doc': `${pack.urlCDN}/dist/docs/modules/modulelocaldrive.html`
          }
      })
    @BuilderView(...) // <- not related to the discussion
    @RenderView(...) // <- not related to the discussion
    class Module extends ModuleFlux{
         //...
    }
    
    

    Similar decorators exist for features related to the module's view in the builder panel (BuilderView) or in the render panel (RenderView),

    Parameters

    • __namedParameters: { compatibility?: {}; description?: string; displayName?: string; id: string; namespace: any; pack: FluxPack; resources?: {} }
      • Optional compatibility?: {}

        Required for plugins: specify compatibility with a parent module. It is a dictionary {[condition-name]: condition-fct} where condition-name is a meaningful (short) name for the condition and condition-fct the condition. For a given parentModule, the plugin won't be able to be attached to it if any of the condition-fct return false when evaluated with parentModule.

      • Optional description?: string

        Description

      • Optional displayName?: string

        Display name

      • id: string

        id of the module, should be unique within the pack

      • namespace: any

        Englobing namespace of the module

      • pack: FluxPack

        The FluxPack in which the module is registered

      • Optional resources?: {}

        Allows to provide resources to your module, it is a mapping between name and url

        • [key: string]: string

    Returns (target: any) => void

    decorator

      • (target: any): void
      • Parameters

        • target: any

        Returns void

Property

  • Property(metadata: { description?: string }): (target: any, key: any) => void
  • The Property decorator exposes a schema attribute. Properties' type can be a:

    • native type: boolean, string, number
    • other classes decorated with @Schema

    A complete example is provided in the documentation of Schema.

    Native types extension

    A couple of extension of native types are available by providing additional metadata (on top of description).

    • enums: e.g. @property({description: 'an enum', enum:['v0','v1']}) value : string
    • integer: e.g. @property({description: 'an integer', type:'integer'}) value : string
    • some piece of code: e.g. @property({description: 'an integer', type:'code'}) value : string

    🔮 More of such extended native types will come in the future (e.g. range, date, etc).

    Parameters

    • metadata: { description?: string }
      • [key: string]: any
      • Optional description?: string

    Returns (target: any, key: any) => void

      • (target: any, key: any): void
      • Parameters

        • target: any
        • key: any

        Returns void

RenderView

  • RenderView<T>(__namedParameters: { namespace: any; render?: (module: T) => HTMLElement | string; wrapperDivAttributes?: (module: T) => { class?: string; style?: {} } }): (target: any) => void
  • The decorator @RenderView is used to define a rendering view. The rendering view is a UI component that gets displayed on the rendering panel of Flux app from which the user can interact.

    You can use any framework to create the view - as long as an HTMLElement is returned -, we internally use flux-view as it is built on top of RxJs just like this library.

    To illustrate the discussion with a view that displays the last emitted output of a module:

    import {render, attr$} from '@youwol/flux-view'
    
    @RenderView<Module>({
          namespace:      ModuleNamespace,
          render :        (mdle: ModuleFlux) => {
             return render({
                 class: 'text-primary',
                 innerText: attr$(
                     mdle.output$,
                     (value: number) => `The output is ${value}`,
                     {untilFirst: "No output emitted yet"}
             })
          }
      })
    class Module extends ModuleFlux{
    
         output$ : Pipe<number>
         //...
    }
    

    Note that you can provide a wrapperDivAttributes parameters to the decorator to control the style and classes of the wrapper div of your UI component.

    More advanced use cases are discussed with the class ModuleRendererRun.

    Type parameters

    Parameters

    • __namedParameters: { namespace: any; render?: (module: T) => HTMLElement | string; wrapperDivAttributes?: (module: T) => { class?: string; style?: {} } }
      • namespace: any

        Englobing namespace of the module

      • Optional render?: (module: T) => HTMLElement | string

        the rendering function

          • (module: T): HTMLElement | string
          • Parameters

            • module: T

            Returns HTMLElement | string

      • Optional wrapperDivAttributes?: (module: T) => { 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.

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

            • module: T

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

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

    Returns (target: any) => void

    decorator

      • (target: any): void
      • Parameters

        • target: any

        Returns void

Schema

  • Schema(__namedParameters: { description?: string; pack: any }): (target: any) => void
  • The Schema class decorator provides a simplify approach to describe a data-structure in order to:

    • get an automatic view generation (e.g. in the settings panel of Flux)
    • provide a mechanism of schema validation (e.g. used in mergeConfiguration)

    When declaring a Schema, the Property attributes decorator needs to be used to register the list of attributes of the schema. Properties can be either a native types (with eventual additional metadata - e.g. type: integer) or reference other schemas.

    The next snippet presents the general case of a PesistentData composing others schemas:

    
     Enum TypesExample{
       Example0 = 'example0',
       Example1 = 'example1' *    
     }
     // To provide an example of PersistentData inheriting from an existing class
     @Schema({pack}) export class SomeBaseModel{
    
         @Property({description:'some enum', enum: Object.values(TypesExample) })
         type: string
    
         constructor({type} :{type?:TypesExample}= {}) {
             // the default values of the properties are defined here
             this.type = type != undefined ? type : Types.Example0
         }
     }
    
     // To provide an example of PersistentData composing from an existing class
     @Schema({pack}) export class Vector3D{
    
         @Property({description: 'x coordinates'}) x: number
         @Property({description: 'y coordinates'}) y: number
         @Property({description: 'z coordinates'}) z: number
    
         constructor({x, y, z} :{x?:number, y?: number, z?: number}= {
             this.x = x != undefined ? x : 0         
             this.y = y != undefined ? y : 0
             this.z = z != undefined ? z : 0
         })
     }
    
     @Schema({pack})
     // We want to inherit all the properties defined in the class SomeBaseModel
     export class PersistentData extends SomeBaseModel {
    
         @Property({
             description: 'a simple type',
             type: 'integer' // simple types may have some additional description available
         })
         value0 : number
    
         @Property({
             description: 'a nested type'
         })
         value1 : Vector3D
    
         constructor({value0, value1, ...rest} :{value0?:number, value1?: unknown}= {}) {
             // this next line call the construction of SomeBaseConfiguration by forwarding the required parameters
             super(rest)
             // the default values of the properties are defined here
             this.value0 = value0 != undefined  ? value0  : 0
             this.value1 = value1 != undefined 
               ? new Vector3D(value1) 
               : new Vector3D({x:0,y:0,z:0})
         }
    }
    

    Parameters

    • __namedParameters: { description?: string; pack: any }
      • Optional description?: string

        description

      • pack: any

        the FluxPack

    Returns (target: any) => void

    the decorator

      • (target: any): void
      • Parameters

        • target: any

        Returns void

Generated using TypeDoc