This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
Creates and sets the Aria live region. +Defines variables for node selection history and runs setup method.
+Optional init: Partial<AriaCommandHandler>OverridedoThis is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
A way of reducing the number of cases where link segments of orthogonal links overlap.
+Typical setup:
+ myDiagram.routers.add(new AvoidsLinksRouter());
+If you want to experiment with this extension, try the AvoidsLinksRouter sample.
+Optional init: Partial<AvoidsLinksRouter>Gets or sets whether the AvoidsLinksRouter should reduce spacing between separated Links to avoid overlap +with nearby Nodes. If avoidsNodes is false, all separated links will have a distance of exactly linkSpacing, +even if this causes them to cross over a nearby Node.
+The default value is true.
+Gets or sets the number of times the AvoidsLinksRouter will run iteratively. +In the vast majority of cases, one iteration should be enough and this parameter should not need to be modified. +Multiple iterations may be useful when numerous links coincide, particularly when they are close to Nodes with avoidsNodes set to true.
+The default value is 1.
+Gets or sets the desired distance between Links that are separated by AvoidsLinksRouter. +If avoidsNodes is true, this value is the maximum allowed distance between such links, +but the distance could be smaller to avoid overlapping Nodes.
+The default value is 4.
+OverridecanOverriderouteAbstract A Router is a class that is responsible for the paths of a collection of Links.
+Some routers modify the Link.points of some Links in ways that the default +routing provided by Link.computePoints cannot, because the latter method +only considers the properties of the Link and its connected ports -- not other Nodes or Links.
+Some routers modify other aspects of Links.
+The most commonly used Router is the +<a href="../../extensions/AvoidsLinksRouter.js>AvoidsLinksRouter extension +in the extensions or extensionsJSM directories.
+The Router class is abstract and does not really provide any functionality of its own. +You can install a Router subclass by constructing and initializing it and then inserting +it into the Diagram.routers list.
+myDiagram.routers.add(new AvoidsLinksRouter());
+A Router that has been installed will automatically operate on the Links of Groups or +the top-level Links of the Diagram.
+You can disable a Router by setting its isEnabled property to false, +or by overriding canRoute to decide when it should operate.
+Your subclass of Router should override routeLinks method in order +to examine the Links implicitly given to the method.
+Gets or sets the Diagram this router is associated with. +Routers cannot be shared.
+Gets or sets whether this router is enabled.
+Gets or sets whether this router runs during real-time operations, such as dragging or resizing. +The default is true.
+Gets or sets the name of this router.
+VirtualcanDetermine for the given collection if this router can route.
+Adding a Router to the Diagram will cause the Diagram to call canRoute for every group recursively,
+and finally for the Diagram itself.
By default this just returns the value of isEnabled.
+If true, routeLinks will be called on each collection.
An override of this method should return false if isEnabled is false.
+This method is only called by the Diagram. If using a Router without adding it to a Diagram, this method will never be called.
+VirtualrouteRoute the links for a given collection (Group or Diagram). By default this is called +in a depth-first manner on every Group in the Diagram, and then the Diagram itself. +If a layout occurred for a Group or a Diagram, this is called immediately afterwards +if canRoute returns true.
+It is common to route all links in each Group's Group.memberParts,
+and then all top-level links in the Diagram.links collection.
+(All Links that have Part.containingGroup === null)
The first argument is a Set of Links that the Diagram has collected which it considers invalid.
+Typically, these are the only links that need routing. Since routeLinks is called with each Group
+and then the Diagram, you should check the Part.containingGroup on each Link to ensure it matches:
public routeLinks(links: GSet<Link>, coll?: Diagram | Group): void {
const container = coll instanceof Diagram ? null : coll;
const it = links.iterator;
while (it.next()) {
const link = it.value;
// Only operate on links that are in the corresponding collection, if one is given
if (coll && link.containingGroup !== container) continue;
. . .
+This method should not check the canRoute predicate.
+An interface describing a theme.
+The various optional properties this interface provides are the default +object names used to lookup some binding target properties. For example, +Panel.padding is looked up in the margins object and +Shape.strokeWidth and GraphObject.opacity are looked up in the numbers object.
+While the indexer can be used for other arbitrary objects, we suggest using the optional named properties +here for their respective purposes.
+The string index, allowing for any other ThemeValues object
+Optional arrowheadsThe arrowheads used for Link shapes. +Values should correspond with valid arrowhead names for Shape.fromArrow and Shape.toArrow.
+Built-in themes provide a toArrow value for the default link template.
Optional colorsThe colors used by the theme. +See ThemeColors.
+Optional fontsThe fonts used by the theme.
+Built-in themes provide values for normal and bold fonts.
Optional marginsThe Margins used by the theme.
+Built-in themes provide a group value for the default Group template's Placeholder.padding.
Optional numbersThe numbers used by the theme, most commonly specifying stroke widths.
+Built-in themes provide values for group and selection stroke widths.
Optional pointsThe Points used by the theme.
+Optional rectsThe Rects used by the theme.
+Optional sizesThe Sizes used by the theme.
+Optional spotsThe Spots used by the theme.
+Optional targetA map of GraphObject target properties to Theme objects. +This determines where a lookup will occur for a given property. +For example, one might map Shape.fill to the colors object via "fill" -> "colors".
+If not defined, or a target property is missing, some sensible defaults are provided.
+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.
+The constructor creates a Theme binding, where the source value is looked up by the ThemeManager..
+Optional targetprop: stringA string naming the target property on the target object. + This should not be the empty string.
+Optional sourceprop: stringA 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: stringThe 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.
+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.
+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.
+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
...
)
+An interface describing an object with string or number keys and BrushLike values.
+The optional properties on this interface outline various values used by default templates.
+Setting these values allows for some customization of built in templates without providing new +definitions. For example, one could use the default link template and customize the color:
+myDiagram.themeManager.set('', {
colors: { link: 'turquoise' }
});
+Or change the color of the selection adornment without providing custom selectionAdornmentTemplates:
myDiagram.themeManager.set('', {
colors: { selection: 'pink' }
});
+The index property, allowing for any other color or group of colors to be defined.
+Optional adornmentThe fill color of the various default tool handles, such as ResizingTool.handle.
+Optional adornmentThe stroke color of the various default tool handles, such as ResizingTool.handle.
+Optional commentThe stroke color of the built in "Comment" node template and link template.
+Optional divThe background color of the diagram's div, if using ThemeManager.changesDivBackground.
+Optional dragThe stroke color of the default DragSelectingTool.box.
+Optional gridThe stroke color of major gridlines in the default Diagram.grid.
+Optional gridThe stroke color of minor gridlines in the default Diagram.grid.
+Optional groupThe fill color of the built in group shape.
+Optional linkThe stroke/fill color the built in link template and link label.
+Optional outlineThe stroke color of the built in group shape.
+Optional overviewThe stroke color of the default Overview.box.
+Optional selectionThe stroke color of the default selection adornment.
+Optional tempThe stroke color of the default LinkingBaseTool.temporaryLink.
+Optional tempThe stroke color of the default LinkingBaseTool.temporaryFromPort and LinkingBaseTool.temporaryToPort.
+Optional textThe text color of the built in node, group, and item template.
+This class is responsible for managing a Diagram's theming (or multiple Diagrams, if shared).
+Read more about theming at Theming.
+Your templates can make use of the values held by the current Theme by calling +GraphObject.theme or GraphObject.themeData or GraphObject.themeModel methods, +or by adding a ThemeBinding to a GraphObject when using GraphObject.make. +All theme bindings are OneWay only -- from source data to target GraphObject property.
+Use GraphObject.theme to look up a value directly from the current Theme. +Use GraphObject.themeData to look up a value in the current Theme based on the value +of a data property. +Use GraphObject.themeModel to look up a value in the current Theme based on the value +of a data property on the Model.modelData shared object.
+For example:
+myDiagram.nodeTemplate =
new go.Node('Auto').add(
new go.Shape('RoundedRectangle', { strokeWidth: 2 })
.theme('fill', 'primary') // Shape.fill is set to the current theme's colors.primary
.theme('stroke', 'border'), // Shape.stroke is set to the current theme's colors.border
new go.TextBlock({ margin: 8 })
.bind('text', 'key')
.theme('stroke', 'text') // stroke color is a dark or light gray
);
+See Themes for the definitions of the two predefined Themes that are normally used.
+There are additional theming resources defined in +Themes.js +in the extensions or extensionsJSM directories.
+Constructs a ThemeManager.
+If a themeMap isn't provided, this constructor provides default light and dark themes,
+copies of Themes.Light and Themes.Dark, respectively.
Optional init: Partial<ThemeManager>Optional initialization properties.
+Gets or sets whether this ThemeManager changes the div background color when currentTheme changes.
+If true, the background color will be set to the CSS color string denoted by the div property
+of the Theme.colors object.
Gets or sets the current theme for this ThemeManager.
+A value of system will rely on the browser's preferred color scheme,
+using light or dark themes.
Gets or sets the default theme for this ThemeManager.
+This property determines which theme is used as a fallback if a lookup +doesn't find a value in the current theme.
+ReadonlypreferredThis read-only property returns the user's preferred color scheme,
+useful when currentTheme is set to system.
See https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme.
+Gets or sets the map of theme names -> Themes for this ThemeManager.
+Make sure this ThemeManager knows about a Diagram for which it should handle theming.
+this
+VirtualfindFinds a value in this ThemeManager's themes.
+By default, this first looks in the currentTheme, then the defaultTheme.
+Because findTheme is called, this method also handles currentTheme being system.
The default implementation is:
+return this.getValue(this.findTheme(this.currentTheme), prop, source, tprop) || this.getValue(this.findTheme(this.defaultTheme), prop, source, tprop);
+This method may be overridden to search Themes in different orders. +Please read the Introduction page on Extensions for how to override methods and how to call this base method.
+a property to search for in the Theme, + also accepting '.'-separated paths, an array of strings representing a path, or an index to an array element
+Optional source: string | string[]where to perform the lookup within the Theme object
+Optional tprop: stringan optional target property name, used if a full path is not provided, + which can determine the property on the Theme object to search via Theme.targetPropertyMap
+the value found, or undefined if not found
+VirtualgetGets a value from the given Theme.
+the Theme to search
+a property to search for in the Theme, + also accepting '.'-separated paths, an array of strings representing a path, or an index to an array element
+Optional source: string | string[]where to perform the lookup within the Theme object
+Optional tprop: stringan optional target property name, used if a full path is not provided, + which can determine the property on the Theme object to search via Theme.targetPropertyMap
+the value in the given Theme, or undefined if not found
+Inform this ThemeManager that it will no longer handle theming for a given diagram.
+this
+Set a particular theme and update all associated theme bindings. +Note that this will modify the named Theme object via a merge if it exists.
+If passed system, this method will create/update the preferredColorScheme theme.
which theme to change, or the empty string to update the default theme
+a partial Theme object to merge into the given theme or add as a new theme
+this
+An interface describing an object with string or number keys and values of a given type.
+This static class specifies the built in themes.
+Light and Dark are the default light and dark themes +initialized by the ThemeManager. Note that these themes are complete, +so if you update values in the light theme, you'll also need to update the dark theme since +the values exist in both and won't use a default fallback.
+Static Readonly DarkThe default dark theme used by ThemeManager. +The name of this theme is "dark".
+Defined as the following:
+{
colors: {
text: '#f5f5f5', // Neutral 100
comment: '#facc15', // Yellow 400
link: '#f5f5f5', // Neutral 100
group: '#a3a3a388', // Neutral 400, partially transparent
outline: '#a3a3a3', // Neutral 400
selection: '#38bdf8', // Sky 400
div: '#171717', // Neutral 900
gridMinor: '#262626', // Neutral 800
gridMajor: '#404040', // Neutral 700
overviewBox: '#e879f9', // Fuschia 400
tempLink: '#60a5fa', // Blue 400
tempPort: '#e879f9', // Fuschia 400
adornmentFill: '#38bdf8', // Sky 400
adornmentStroke: '#2563eb', // Blue 600
dragSelect: '#e879f9' // Fuschia 400
},
fonts: {
normal: '10pt sans-serif',
bold: 'bold 12pt sans-serif'
},
numbers: {
group: 1, // group strokeWidth
selection: 3 // selection strokeWidth
},
margins: {
group: new Margin(5) // group padding
},
arrowheads: {
toArrow: 'Standard'
}
}
+Static Readonly LightThe default light theme used by ThemeManager. +The name of this theme is "light".
+Defined as the following:
+{
colors: {
text: '#0a0a0a', // Neutral 950
comment: '#ca8a04', // Yellow 600
link: '#0a0a0a', // Neutral 950
group: '#a3a3a344', // Neutral 400, partially transparent
outline: '#a3a3a3', // Neutral 400
selection: '#0ea5e9', // Sky 500
div: '#fff',
gridMinor: '#e5e5e5', // Neutral 200
gridMajor: '#a3a3a3', // Neutral 400
overviewBox: '#c026d3', // Fuschia 600
tempLink: '#2563eb', // Blue 600
tempPort: '#c026d3', // Fuschia 600
adornmentFill: '#0ea5e9', // Sky 500
adornmentStroke: '#1e40af', // Blue 800
dragSelect: '#c026d3' // Fuschia 600
},
fonts: {
normal: '10pt sans-serif',
bold: 'bold 12pt sans-serif'
},
numbers: {
group: 1, // group strokeWidth
selection: 3 // selection strokeWidth
},
margins: {
group: new Margin(5) // group padding
},
arrowheads: {
toArrow: 'Standard'
}
}
+You can pan and zoom with Leaflet, and select and drag with GoJS. - The GoJS div is on top of the Leaflet map, but this sample selectively bubbles events to leaflet by using a custom Tool. + The GoJS div is on top of the Leaflet map, but this sample selectively bubbles events to leaflet by using a custom + Tool. Dragged nodes will update their latitude and longitude data in the Diagram.model.
This custom CommandHandler is an example of how screen reader accessibility can be added to diagrams with an
+aria-liveDIV.This CommandHandler adds more key commands for a user:
++- Arrow keys: Change selection to a new node, if possible, based on direction. This is added to an internal navigation history.
+
+b: Give a description of which nodes are adjacent to the currently selected nodex: Go backwards in the navigation historyc: Go forwards in the navigation historyThis custom CommandHandler is meant as a starting point to create a more individualized CommandHandler for your unique use case. +Certain data and attributes of nodes that are different between diagrams may be important to the accessibility interpretation. +When describing a Part, this example calls getPartText, which uses the
+Part.textif it is specified, otherwise thePart.key. +You'll want to modify this to suit your needs.If you want to experiment with this extension, try the Accessibility sample.
+