Vue Diagram - defaultItemProperties

Configures default item properties.

Selector: DxDefaultItemProperties
Type:

Object

Default Value: {}

The component applies default property values to newly created items if you do not specify the values.

App.vue
  • <DxDiagram
  • id="diagram"
  • ref="diagram"
  • >
  • <DxNodes ... >
  • <DxDefaultItemProperties
  • :connector-line-start="'outlinedTriangle'"
  • :connector-line-end="'none'"
  • :connector-line-type="'straight'"
  • :style="'fill: #d9d9d9; stroke: #999999'"
  • :text-style="'font-weight: bold; text-decoration: underline'"/>
  • </DxDiagram>

connectorLineEnd

Specifies the default tip of a connector's end point.

Selector: connector-line-end
Default Value: 'arrow'

The connectorLineEnd property specifies a tip that is displayed at a connector's end point if the toLineEndExpr property does not provide another value.

connectorLineStart

Specifies the default tip of a connector's start point.

Selector: connector-line-start
Default Value: 'none'

The connectorLineStart property specifies a tip that is displayed at a connector's start point if the fromLineEndExpr property does not provide another value.

connectorLineType

Specifies the default type of a connector.

Selector: connector-line-type
Default Value: 'orthogonal'

The connectorLineType property specifies a type of a connector if the lineTypeExpr property does not provide another value.

shapeMaxHeight

Specifies the default maximum height of a shape.

Selector: shape-max-height
Type:

Number

| undefined
Default Value: undefined

The shapeMaxHeight property specifies the maximum height of a shape if the maxHeight property does not provide another value.

shapeMaxWidth

Specifies the default maximum width of a shape.

Selector: shape-max-width
Type:

Number

| undefined
Default Value: undefined

The shapeMaxWidth property specifies the maximum width of a shape if the maxWidth property does not provide another value.

shapeMinHeight

Specifies the default minimum height of a shape.

Selector: shape-min-height
Type:

Number

| undefined
Default Value: undefined

The shapeMinHeight property specifies the minimum height of a shape if the minHeight property does not provide another value.

shapeMinWidth

Specifies the default minimum width of a shape.

Selector: shape-min-width
Type:

Number

| undefined
Default Value: undefined

The shapeMinWidth property specifies the minimum width of a shape if the minWidth property does not provide another value.

style

Specifies a default item style.

Selector: DxStyle
Type:

Object

The style property specifies the style applied to a shape/connector if the nodes.styleExpr/edges.styleExpr property does not provide another value.

The style settings can be specified in the following ways:

  • as inline style declaration, for instance "fill: #d9d9d9; stroke: #999999",
  • as CSS rules presented in JSON format, , for instance {"fill": "#d9d9d9", "stroke": "#999999"}.

textStyle

Specifies an item's default text style.

Selector: DxTextStyle
Type:

Object

The textStyle property specifies a text style that is applied to a shape/connector if the nodes.textStyleExpr/edges.textStyleExpr property does not provide another value.

The style settings can be specified in the following ways:

  • as inline style declaration, for instance "font-weight: bold; text-decoration: underline",
  • as CSS rules in JSON format, for instance { "font-weight": "bold", "text-decoration": "underline" }.