Class ThemeBinding

GoJS® Diagramming Components
version 3.0.1
by Northwoods Software®

Hierarchy

A ThemeBinding describes how to automatically set a property on a GraphObject to a value of a property in a Theme. The target property name and the data source property name must be strings. All name matching is case-sensitive.

Register theme bindings by calling GraphObject.theme or another method whose name starts with "theme".

For example, your theme might be like:

{ colors: { primary: 'red' } }

Your simple node template might be like:

  myDiagram.nodeTemplate =
    new go.Node("Auto").add(
      new go.Shape().theme("fill" , "primary"),
      new go.TextBlock("Hello", { font: "bold 11pt sans-serif" })
    );

The theme binding causes the Shape.fill property of the Shape to be set to the value of the theme's "primary" property. If the value of the "primary" property of a particular theme object is undefined, the binding is not evaluated: the target property is not set. If there is an error with the theme binding, you may see a message in the console log. For this reason you may want to explicitly set the initial value for a property when defining the GraphObject, since that value will remain as the default value if the ThemeBinding is not evaluated.

Just like Bindings, it's possible to use different source objects. The typical source is the Theme itself, but one can also use a property of a data object in the model. another GraphObject in the same Part, or the shared JavaScript object that is the value of Model.modelData. The values from these other sources are then used to perform the property lookup in the Theme object. To use these other sources, one can call GraphObject.themeData, GraphObject.themeObject, or GraphObject.themeModel. Or modify the Binding by calling ofData, Binding.ofObject, or Binding.ofModel.

Note that ThemeBindings are always OneWay.

Existing bindings become read-only, and no new bindings may be added, when a template (a Part) is copied. Bindings will be shared by all copies of the template's GraphObjects.

For more information about bindings see Binding documentation. For more information on theming, see the Theming intro page.

since

3.0

Index

Constructors

constructor

Accessors

themeConverter themeSource

Methods

ofData

Accessors

Binding.backConverter Binding.converter Binding.isToData Binding.isToModel Binding.isToObject Binding.isToTheme Binding.mode Binding.sourceName Binding.sourceProperty Binding.targetProperty

Methods

Binding.copy Binding.makeTwoWay Binding.ofModel Binding.ofObject Binding.toString

Constructors

constructor

  • new ThemeBinding(targetprop?: string, sourceprop?: string, themeSource?: string, conv?: ((val: any, targetObj: any) => any), themeConverter?: ((val: any, targetObj: any) => any)): ThemeBinding

  • The constructor creates a Theme binding, where the source value is looked up by the ThemeManager..

    Parameters

    • Optional targetprop: string

      A string naming the target property on the target object. This should not be the empty string.

    • Optional sourceprop: string

      A string naming the source property, which could be on the Theme, data object, GraphObject, or shared model data object. If this argument is not supplied, the source property is assumed to be the same as the target property.

    • Optional themeSource: string

      The source object on the Theme to find the value for the source property name. If this argument is null or not supplied, the empty string is used.

    • Optional conv: ((val: any, targetObj: any) => any)

      A side-effect-free function converting the source property value to lookup in the Theme. If the function is null or not supplied, no conversion takes place.

        • (val: any, targetObj: any): any

        • Parameters

          • val: any
          • targetObj: any

          Returns any

    • Optional themeConverter: ((val: any, targetObj: any) => any)

      An optional side-effect-free function converting the theme value to the value to set the target property. If the function is null or not supplied, no conversion takes place.

        • (val: any, targetObj: any): any

        • Parameters

          • val: any
          • targetObj: any

          Returns any

    Returns ThemeBinding

Accessors

themeConverter
: ((val: any, targetObj: any) => any)

  • Gets or sets a converter function to apply to the theme property value in order to produce the value to set to the target property. The default value is null -- no conversion takes place. Otherwise the value should be a function that takes one or two arguments and returns the desired value.

    Conversion functions must not have any side-effects.

    The function is passed the value from the theme (the first argument) and the target GraphObject (the second argument). The targetProperty is set to the function's return value.

    since

    3.0

themeSource
: string

  • Gets or sets the source object on a Theme for a lookup.

    This can be used to refine where in the Theme to look, sometimes useful to avoid the need for a conversion function.

    {
      colors: {
        sex: {
          M: 'blue',
          F: 'pink'
        }
      }
    }
    ...
    myDiagram.nodeTemplate =
      new go.Node("Auto").add(
        new go.Shape().themeData("fill", "sex", "sex"),  // lookup the "sex" data value in the "sex" Theme object
        ...
      )
    defaultValue

    '' -- the theme will be be searched without any additional object constraint

Methods

ofData

On This Page

Theme

Copyright © 1998-2024 by Northwoods Software Corporation.