Vue Diagram - Default Shape and Connector Settings

The Diagram component allows you to specify default settings for its items in the following ways:

  • Specify settings contained in the defaultItemProperties property.
  • Specify data-binding expressions contained in the edges and nodes properties to define common settings for data-bound edges and nodes.
jQuery
index.js
$(function() {
    $("#diagram").dxDiagram({
        defaultItemProperties: {
            connectorLineType: "straight",
            style: "stroke-width: 3px",
        },
        nodes: {
            // ...
            textStyleExpr: function() {return "fill: green"},
        },
        edges: {
            // ...
            styleExpr: function() {return "stroke: red"},
        },
    });
});
Angular
app.component.html
app.component.ts
<dx-diagram #diagram id="diagram">
    <dxo-default-item-properties connectorLineType="straight" style="stroke-width: 3px">
    </dxo-default-item-properties>
    <dxo-nodes ... [textStyleExpr]="textStyleExpr"></dxo-nodes>
    <dxo-edges ... [styleExpr]="styleExpr"></dxo-edges>
</dx-diagram>
export class AppComponent {
    //...
    styleExpr(obj) {
        return { "stroke": "red" };
    }
    textStyleExpr(obj) {
        return { "fill": "green" };
    }
}
Vue
App.vue
<template>
<DxDiagram
    id="diagram"
    ref="diagram"
>
    <DxDefaultItemProperties :connector-line-type="'straight'" :style="'stroke-width: 3px'" />
    <DxNodes
    ...
    :text-style-expr="textStyleExpr"
    />
    <DxEdges
    ...
    :style-expr="styleExpr"
    />
</DxDiagram>
</template>
<script>
import { DxDiagram, DxNodes, DxEdges, DxDefaultItemProperties} from 'devextreme-vue/diagram';

export default {
    components: {
        DxDiagram, DxNodes, DxEdges, DxDefaultItemProperties
    },
    data() {...},
    methods: {
        textStyleExpr() {
            return 'fill: green';
        },
        styleExpr() {
            return 'stroke: red';
        },
    }
};
</script>
React
App.js
import Diagram, { Nodes, Edges, DefaultItemProperties} from 'devextreme-react/diagram';
// ...
render() {
    return (
    <Diagram id="diagram">
        <DefaultItemProperties connectorLineType="straight"/>
        <Nodes ... textStyleExpr={this.itemTextStyleExpr} />
        <Edges ... styleExpr={this.itemStyleExpr}/>
    </Diagram>
    );
}
itemTextStyleExpr(obj) {
    return { 'fill': 'green' };
}
itemStyleExpr(obj) {
    return { 'stroke': 'red' };
}
ASP.NET Core Controls
DiagramPage.cshtml
@(Html.DevExtreme().Diagram()
    .ID("diagram")
    .DefaultItemProperties(prop=> prop
        .Style("stroke-width: 3px")
        .ConnectorLineType(DiagramConnectorLineType.Straight)
    )
    .Nodes(ns => ns
        // ...
        .TextStyleExpr(new JS("textStyleExpr"))
    )
    .Edges(ns => ns
        // ...
        .StyleExpr(new JS("styleExpr"))
    )
)
<script type="text/javascript">
    function textStyleExpr(obj) {
        return "fill: green";
    }
    function styleExpr(obj) {
        return "stroke: red";
    }
</script>
ASP.NET MVC Controls
DiagramPage.cshtml
@(Html.DevExtreme().Diagram()
    .ID("diagram")
    .DefaultItemProperties(prop=> prop
        .Style("stroke-width: 3px")
        .ConnectorLineType(DiagramConnectorLineType.Straight)
    )
    .Nodes(ns => ns
        // ...
        .TextStyleExpr(new JS("textStyleExpr"))
    )
    .Edges(ns => ns
        // ...
        .StyleExpr(new JS("styleExpr"))
    )
)
<script type="text/javascript">
    function textStyleExpr(obj) {
        return "fill: green";
    }
    function styleExpr(obj) {
        return "stroke: red";
    }
</script>