JavaScript/jQuery Diagram Options

$(function() {
    var diagram = $("#diagram").dxDiagram({
        customShapes: [{
            category: "hardware",
            type: "internet",
            title: "Internet",
            backgroundImageUrl: "images/shapes/internet.svg",
            backgroundImageLeft: 0.15,
            backgroundImageTop: 0,
            backgroundImageWidth: 0.7,
            backgroundImageHeight: 0.7,
            defaultWidth: 0.75,
            defaultHeight: 0.75,
            defaultText: "Internet",
            allowEditText: true,
            textLeft: 0,
            textTop: 0.7,
            textWidth: 1,
            textHeight: 0.3,
            connectionPoints: [
                { x: 0.5, y: 0 },
                { x: 0.9, y: 0.5 },
                { x: 0.5, y: 1 },
                { x: 0.1, y: 0.5 }
            ]
        },
        ...
    ],
    toolbox: {
        groups: [{ category: "hardware", title: "Hardware" }]
    }
}).dxDiagram("instance");

<template>
    <DxDiagram
        id="diagram"
        ref="diagram"
    >
        <DxCustomShape
            :category="'hardware'"
            :type="'internet'"
            :title="'Internet'"
            :background-image-url="'images/shapes/internet.svg'"
            :background-image-left="0.15"
            :background-image-top="0"
            :background-image-width="0.7"
            :background-image-height="0.7"
            :default-width="0.75"
            :default-height="0.75"
            :default-text="'Internet'"
            :allow-edit-text="true"
            :text-left="0"
            :text-top="0.7"
            :text-width="1"
            :text-height="0.3"
        >
            <DxConnectionPoint
                :x="0.5"
                :y="0"
            />
            <DxConnectionPoint
                :x="0.9"
                :y="0.5"
            />
            <DxConnectionPoint
                :x="0.5"
                :y="1"
            />
            <DxConnectionPoint
                :x="0.1"
                :y="0.5"
            />
        </DxCustomShape>
        ...
        <DxToolbox :visible="true">
            <DxGroup
                :category="'hardware'"
                :title="'Hardware'"
            />
        </DxToolbox>
    </DxDiagram>
</template>

<script>
import { DxDiagram, DxGroup, DxToolbox, DxCustomShape, DxConnectionPoint } from 'devextreme-vue/diagram';
import 'whatwg-fetch';

export default {
components: {
    DxDiagram, DxGroup, DxToolbox, DxCustomShape, DxConnectionPoint
},
mounted() {
    var diagram = this.$refs['diagram'].instance;
    fetch('data/diagram-hardware.json')
    .then(function(response) {
        return response.json();
    })
    .then(function(json) {
        diagram.import(JSON.stringify(json));
    })
    .catch(function() {
        throw 'Data Loading Error';
    });
}
};
</script>

import React from 'react';
import Diagram, { CustomShape, ConnectionPoint, Group, Toolbox } from 'devextreme-react/diagram';

class App extends React.Component {
constructor(props) {
    super(props);

    this.diagramRef = React.createRef();
}

    render() {
        return (
            <Diagram id="diagram" ref={this.diagramRef}>
                <CustomShape
                    category="hardware"
                    type="internet"
                    title="Internet"
                    backgroundImageUrl="images/shapes/internet.svg"
                    backgroundImageLeft={0.15}
                    backgroundImageTop={0}
                    backgroundImageWidth={0.7}
                    backgroundImageHeight={0.7}
                    defaultWidth={0.75}
                    defaultHeight={0.75}
                    defaultText="Internet"
                    allowEditText={true}
                    textLeft={0}
                    textTop={0.7}
                    textWidth={1}
                    textHeight={0.3}>
                <ConnectionPoint x={0.5} y={0} />
                <ConnectionPoint x={0.9} y={0.5} />
                <ConnectionPoint x={0.5} y={1} />
                <ConnectionPoint x={0.1} y={0.5} />
                </CustomShape>
                ...
                <Toolbox>
                    <Group category="hardware" title="Hardware" />
                </Toolbox>
            </Diagram>
        );
    }
}
export default App;

@(Html.DevExtreme().Diagram()
    .ID("diagram")
    .CustomShapes(cs => {
        cs.Add()
            .Category("hardware")
            .Type("internet")
            .Title("Internet")
            .BackgroundImageUrl("../../Content/Images/shapes/internet.svg")
            .BackgroundImageLeft(0.15)
            .BackgroundImageTop(0)
            .BackgroundImageWidth(0.7)
            .BackgroundImageHeight(0.7)
            .DefaultWidth(1.9)
            .DefaultHeight(1.9)
            .DefaultText("Internet")
            .AllowEditText(true)
            .TextLeft(0)
            .TextTop(0.7)
            .TextWidth(1)
            .TextHeight(0.3)
            .ConnectionPoints(cp => {
                cp.Add().X(0.5).Y(0);
                cp.Add().X(0.9).Y(0.5);
                cp.Add().X(0.5).Y(1);
                cp.Add().X(0.1).Y(0.5);

            });
        ...    
    })
    .Toolbox(tb => tb
        .Groups(g => g.Add().Category("hardware").Title("Hardware"))
    )
)    

$(function() {
    $("#diagram").dxDiagram({
        nodes: {
            //...
        },
        defaultItemProperties: {
            connectorLineStart: "outlinedTriangle",
            connectorLineEnd: "none",
            connectorLineType: "straight",
            style: "fill: #d9d9d9; stroke: #999999",
            textStyle: "font-weight: bold; text-decoration: underline"
        }
    });
});

+
<dx-diagram #diagram id="diagram">
    <dxo-nodes ... />
    <dxo-default-item-properties 
        connectorLineStart="outlinedTriangle" 
        connectorLineEnd="none" 
        connectorLineType="straight" 
        style="fill: #d9d9d9; stroke: #999999" 
        textStyle="font-weight: bold; text-decoration: underline">
    </dxo-default-item-properties>
</dx-diagram>

<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>

<Diagram id="diagram">
    <Nodes ... />
    <DefaultItemProperties 
        connectorLineStart="outlinedTriangle" 
        connectorLineEnd="none" 
        connectorLineType="straight" 
        textStyle="font-weight: bold; text-decoration: underline"/>
</Diagram>

$(function(){
    $("#diagramContainer").dxDiagram({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

<template>
    <DxDiagram ...
        :element-attr="diagramAttributes">
    </DxDiagram>
</template>

<script>
import DxDiagram from 'devextreme-vue/diagram';

export default {
    components: {
        DxDiagram
    },
    data() {
        return {
            diagramAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

import React from 'react';

import Diagram from 'devextreme-react/diagram';

class App extends React.Component {
    diagramAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Diagram ...
                elementAttr={this.diagramAttributes}>
            </Diagram>
        );
    }
}
export default App;

$(function() {
    $("#diagram").dxDiagram({
        viewUnits: "cm",
        units: "cm",
        gridSize: {
            value: 2,
            items: [1, 2, 3]
        },
        // or
        // gridSize: 2,
    });
});

+
<dx-diagram #diagram id="diagram" viewUnits="cm" units="cm">
    <dxo-grid-size 
        [value]="2" 
        [items]='[1, 2, 3]'>
    </dxo-grid-size>
</dx-diagram>

<template>
<DxDiagram
    id="diagram"
    ref="diagram"
    units="cm"
    viewUnits="cm"
>
    <DxGridSize
    :value="2"
    :items="['1', '2', '3']"
    />
</DxDiagram>
</template>

class App extends React.Component {
    // ...
    render() {
        return (
            <Diagram id="diagram" ref={this.diagramRef} units="cm" viewUnits="cm">
                <GridSize value={2} items={[1, 2, 3]} />
            </Diagram>
        );
    }
}

var autoSaveIntervalMs = 2000;
var autoSaveTimeout = -1;

$("#diagram").dxDiagram({
onOptionChanged: function(e) {
    if(e.name === "hasChanges" && e.value && autoSaveTimeout === -1) {
        autoSaveTimeout = setTimeout(function() {
            var data = e.component.export();
            window.localStorage.setItem("foo", data); // saves data to a local storage
            autoSaveTimeout = -1;
            e.component.option("hasChanges", false);
        }, autoSaveIntervalMs);
    }
}

import Diagram from 'devextreme-react/diagram';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.saveInstance = this.saveInstance.bind(this);
    }

    saveInstance(e) {
        this.diagramInstance = e.component;
    }

    render() {
        return (
            <div>
                <Diagram onInitialized={this.saveInstance} />
            </div>
        );
    }
}

$(function() {
    $("#diagramContainer").dxDiagram({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

<template> 
    <DxDiagram ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxDiagram from 'devextreme-vue/diagram'; 

export default { 
    components: { 
        DxDiagram
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script> 

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import Diagram from 'devextreme-react/diagram'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <Diagram ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
} 

$(function() {
    $("#diagram").dxDiagram({
        units: "cm",
        pageSize: {
            width: 10,
            height: 10,
        },
    });
});

+
<dx-diagram #diagram id="diagram" units="cm">
    <dxo-page-size [width]="10" [height]="10">
    </dxo-page-size>
</dx-diagram>

<template>
<DxDiagram
    id="diagram"
    ref="diagram"
    units="cm"
>
    <DxPageSize
    :width="10"
    :height="10"
    />
</DxDiagram>
</template>

class App extends React.Component {
    // ...
    render() {
        return (
            <Diagram id="diagram" ref={this.diagramRef} units="cm">
                <PageSize width={10} height={10} />
            </Diagram>
        );
    }
}

$(function() {
    $("#diagram").dxDiagram({
        zoomLevel: {
            value: 0.75,
            items: [0.5, 0.75, 1, 1.5]
        },
    });
});

+
<dx-diagram #diagram id="diagram">
    <dxo-zoom-level 
        [value]="0.75" 
        [items]='[0.5, 0.75, 1, 1.5]'>
    </dxo-zoom-level>
</dx-diagram>

<template>
<DxDiagram
    id="diagram"
    ref="diagram"
>
    <DxZoomLevel
    :value="0.75"
    :items="['0.5', '0.75', '1', '1.5']"
    />
</DxDiagram>
</template>

class App extends React.Component {
    // ...
    render() {
        return (
            <Diagram id="diagram" ref={this.diagramRef} >
                <ZoomLevel value={0.75} items={['0.5', '0.75', '1', '1.5']}/>
            </Diagram>
        );
    }
}