Options
All
  • Public
  • Public/Protected
  • All
Menu

This class is used to generate the view of the module in the builder panel.

🤓 These views are SVG elements, every modules have an associated group element in the builder's canvas with id equal to the ModuleFlux.moduleId. The group's children not only define the appearance of the module, but also its actions that can be triggered from the canvas.

ModuleRendererBuild implements a default view generating a kind of 'box' including a user-defined icon and featuring the appropriate number of inputs and outputs. This is what the decorator BuilderView allows at the first place.

Implementing a custom view

The simplest way to create custom view is to use the BuilderView decorator by providing a custom render function. For instance:

@BuilderView({
      namespace:      ModuleNamespace,
      render :        (mdle: ModuleFlux) => customRenderFunction( mdle , ModuleNamespace)
  })
class Module extends ModuleFlux{
     //...
}

// somewhere in the code:
function customRenderFunction(mdle: ModuleFlux, factory: Factory){
     const renderingGroup = document.createElementNS("http://www.w3.org/2000/svg", "g")
     // create your custom view in the renderingGroup 
     // e.g. by appending element with renderingGroup.appendChild()
     return renderingGroup
}

You can get inspiration or use the function genericModulePlot.

A usual need when creating a custom view is to be able to interact with the configuration of the module. For such case you can use the Environment.hostCommandRequest$ pipeline (accessible from ModuleFlux.environment) to send UpdateConfigurationCommand commands:

function customRenderFunction(mdle: ModuleFlux, factory: Factory){
     const renderingGroup = document.createElementNS("http://www.w3.org/2000/svg", "g")

     renderingGroup.onclick =  (event: MouseEvent) => {
         let actualConfiguration = mdle.configuration
         // anything of the conf. including 'PersistentData' can be updated
         let newConf = new Factory.Configuration( 
             {...actualConfiguration, ...{title:'updated title}}
         )
         let cmd = new UpdateConfigurationCommand(mdle, newConf)
         mdle.environment.hostCommandRequests$(cmd) 
     }
     return renderingGroup
}

🧐 Another approach to define a custom view (usually in case you need to persist a state) is to include a class called BuilderView inheriting from ModuleRendererBuild into the module namespace and override the render method. In that case, do not use the BuilderView decorator.

Hierarchy

  • ModuleRendererBuild

Index

Constructors

Properties

Methods

Constructors

constructor

Properties

Readonly Factory

Factory: Factory

Factory of the module

Static iconsFactory

iconsFactory: {} = ...

Cache store for the module's icons

param

original content

param

svg content including transform

param

the transform part for appropriate rescaling

Type declaration

  • [key: string]: { icon: string; iconNormalized: { content: string; transforms: string } }
    • icon: string
    • iconNormalized: { content: string; transforms: string }
      • content: string
      • transforms: string

Methods

icon

  • icon(): { content: string; transforms: string }
  • Return the svg content (aka icon) normalized to fit the module's box of the builder view (100 x 100 pixels).

    Returns { content: string; transforms: string }

    • content: string
    • transforms: string

render

Generated using TypeDoc