Component

ve.Component: Components represent inputs and displays that yield a value via .v. They are typically encapsulated by a ve.Feature, but can be manually mounted via bind(arg0_container_el:HTMLElement).

Constructor:

• arg0_options: Object
  • All bindings accept 'this'/'global'/'window' variables. Bindings propagate recursively upwards (i.e. a userchange at a lower level will register as a userchange in an upper level).
  • .binding: string - Related event: .onchange. Bidirectional data binding for both .from_binding/.to_binding.
  • .from_binding: string - Related event: .onprogramchange. Unidirectional data binding.
  • .to_binding: string - Related event: .onuserchange. Unidirectional data binding.
  • .onchange: function(this.v, this:ve.Component)
  • .onprogramchange: function(this.v, this:ve.Component)
  • .onuserchange: function(this.v, this:ve.Component)
  • .attributes: Object - Any attributes to place on the mounted this.element.
    • <attribute_key>: string
  • .limit=true: function(this.v)|undefined | boolean - Whether to display the current Component. Immediate mode.
  • .onload: function(this:ve.Component)
  • .tooltip: Object<ve.Component>|string
  • .style: Object - The CSS/Telestyle object to use for the current element. Immediate mode CSS if function is declared.
    • <selector_key>: string - CSS query selector. :nth-parent() is acceptable.
      • <css_property>: function|string
    • <css_property>: function|string

DOM:

• Attributes:
  • data-debug-add-component: boolean
  • data-debug-limit: boolean
• Fields:
  • .instance: this:ve.Component

Instance:

• .child_class=this.constructor: ve.Component - The constructor object of the child class.
• .is_vercengen_component=true: boolean - Whether to mark this ve.Component as a Vercengen component.
• .parent_el: HTMLElement - The parent element of the current component, should it exist.
• .height=1: number
• .width=1: number
• .x=0: number - Switches to an n+1 default if only .y is defined.
• .y=n + 1: number - Switches to 0 if only .x is defined.
• The linter/engine guarantees the following fields:
• .element: HTMLElement - The HTMLElement that the ve.Component is mounted to.
• .name: string - The name to display for the current ve.Component.
• .owner: any - The root owner of the current ve.Component. This is typically a ve.Class, but can also be a ve.Feature or global/window.
• .owners: Array<any> - A list of relevant owners in descending orders.
• .v: any - The value stored by the component. Getter/setter.

Methods:

• addComponent() - Attempts to mount the current component on its parent_el.
• bind(arg0_container_el:HTMLElement) - Manually mounts the current component to arg0_container_el.
• fireFromBinding() - Pseudo-setter from binding. Fires only upon program-driven changes to .v directly.
• fireToBinding() - Pseudo-setter to binding. Fires only upon user-driven changes to .v.
• remove() - Removes the component/element from the DOM.
• removeComponent() - Unmounts the current component from its parent_el.
• setValueFromObject(arg0_object:Object, arg1_object:Object) -
• setOwner(arg0_value:Object, arg1_owner_array=[]:Array<Object>) - Used by the reflection engine in ve.Class to set the owner hierarchy automatically.

Static Methods:

• linter() - Run at startup if ve.registry.debug_mode is true. Lints all Vercengen components.

Types:

Types are annotated by both their constructor function and what they return after the pipe separator (.v).

* indicates a recursive Object of that type.

• veDatavisSuite(arg0_value:Object, arg1_options:Object) | Object

• veFileExplorer(arg0_value:string, arg1_options:Object) | string - The file path the File Explorer is currently navigating.

• veHierarchy(arg0_value:Object<ve.Component>, arg1_options:Object) | Object<ve.Component> - Note. It is recommended to use ve.HierarchyDatatype as the specific ve.Component for arg0_value. Tree/scene inspector.

  • veHierarchyDatatype(Object<ve.Component>, arg1_options:Object) | Object<ve.Component> - Represents individual items in a hierarchy.

• veNodeEditor(arg0_value:Object, arg1_options:Object) | Object - Visual node-based DAG editor with async processing.

  • veNodeEditorDatatype(arg0_value:Object, arg1_options:Object) | Object

• veScriptManager(arg0_value:string, arg1_options:Object) | string

  • veScriptManagerBlockly(arg0_value:string, arg1_options:Object) | string
  • ScriptManagerMonaco(arg0_value:string, arg1_options:Object) | string

• veSpreadsheet(arg0_value:Array<Array<Array<any>>>|Object, arg1_options:Object) | Array<Array<Array<any>>>|Object - Spreadsheet editor with formulas. Can be converted to ve.Table on demand.

• WordProcessor(arg0_value:string, arg1_options:Object) | string - Word processor.

• veButton(arg0_value:function, arg1_options:Object) | function

• veCheckbox(arg0_value:boolean|Object<boolean>*, arg1_options: Object) | boolean|Object<boolean>* - A recursive list of checkboxes, or a single toggleable input.

• veColour(arg0_value:Array<number, number, number|string, arg1_options: Object>) | Array<number, number, number> - RGB colour selector.

• veDatalist(arg0_value:Object<string>, arg1_options: Object)

• veDate(arg0_value:UF.Date, arg1_options: Object) | UF.Date

• veDateLength(arg0_value:UF.Date, arg1_options: Object) | UF.Date

• veFile(arg0_value:string, arg1_options:Object) | string - The file/folder path selected by the user.

• veFlexInterface(arg0_value:Object<Object|ve.Component>, arg1_options:Object) | Object<Object|ve.Component>

• veGraph(arg0_value:Object, arg1_options:Object) | Object

• veHTML(arg0_value:function|HTMLElement|string, arg1_options: Object) | string

• veInterface(arg0_value:Object<ve.Component>, arg1_options:Object) | Object<ve.Component>

• veLog(arg0_value:string, arg1_options:Object) | string

• veList(arg0_value:Array<ve.Component>, arg1_options:Object) | Array<ve.Component>

• veMap(arg0_value:maptalks.Map, arg1_options:Object) | maptalks.Map

• veMultiTag(arg0_value:Array<string>, arg1_options:Object) | Array<string>

• veNumber(arg0_value:number, arg1_options:Object) | number

• veObjectEditor(arg0_value:Object, arg1_options:Object) | Object - Any valid JSON object.

• veObjectInspector(arg0_value:any, arg1_options:Object) | any

• vePageMenu(arg0_value:Object, arg1_options:Object) | string - The .page key currently displayed.

• vePassword(arg0_value:string, arg1_options:Object) | string

• veRadio(arg0_value:Object<boolean>* | Object<boolean>*

• veRange(arg0_value:number, arg1_options: Object) | number

• veRawInterface(arg0_components_obj:Object<ve.Component>, arg1_options:Object) | Object<ve.Component>

• veRichText(arg0_value:string, arg1_options:Object) | string - Single-line rich text input. .v is an HTML string.

• veSearchSelect(arg0_components_obj:Object<ve.Component>, arg1_options:Object) | Object<ve.Component>

• veSelect(arg0_value:ve.Object<string>, arg1_options:Object) | string - The key of the selected option.

• veTable(arg0_value:Array<Array<any>>, arg1_options:Object) | Array<Array<any>> - Paginated lazy-loaded table. Can be converted to ve.Spreadsheet on demand.

• veTelephone(arg0_value:string, arg1_options:Object) | string

• veText(arg0_value:string, arg1_options: Object) | string

• veTime(arg0_value:{hour:number, minute:number}, arg1_options:Object) | {hour:number, minute:number}

• veToggle(arg0_value:boolean, arg1_options:Object) | boolean

• veUndoRedo(arg0_value:string, arg1_options:Object) | string - The DALS.Timeline ID that the UndoRedo component is currently navigating.

• veURL(arg0_value:string, arg1_options:Object) | string