svg content that represents the icon of the module. The content provided is translated and scaled appropriately automatically, no need to worry about it.
Englobing namespace of the module
providing this function bypass the default view. See discussions in custom builder view.
decorator
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),
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.
Description
Display name
id of the module, should be unique within the pack
Englobing namespace of the module
The FluxPack in which the module is registered
Allows to provide resources to your module, it is a mapping between name and url
decorator
The Property decorator exposes a schema attribute. Properties' type can be a:
A complete example is provided in the documentation of Schema.
A couple of extension of native types are available by providing additional metadata (on top of description).
@property({description: 'an enum', enum:['v0','v1']}) value : string
@property({description: 'an integer', type:'integer'}) value : string
@property({description: 'an integer', type:'code'}) value : string
🔮 More of such extended native types will come in the future (e.g. range, date, etc).
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.
Englobing namespace of the module
the rendering function
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.
decorator
The Schema class decorator provides a simplify approach to describe a data-structure in order to:
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})
}
}
description
the FluxPack
the decorator
Generated using TypeDoc
BuilderView
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:
To go beyond the default view, there is all you need discussed in custom builder view.