Read only diagram in Vue Diagram component

17 Mar 20234 minutes to read

You can create the read-only diagram by using DiagramConstraints.

Step1

To create the read-only diagram, remove the page editable constraints from the diagram constraints as shown as follows.

export default {
    name: 'app',
    data() {
        return {
            //Removing the page editable constraints from the Diagram default constraints
            constraints: DiagramConstraints.Default & ~DiagramConstraints.PageEditable
        }
    }
}

Step2

After defining the read-only constraint to the diagram, you cannot perform any operations over the diagram except the click event. Refer to the following code sample for defining click event and page editable constraints for the diagram.

function clickEvent(args) {
// ...
// ...
alert('click event triggered')
}

export default {
    name: 'app',
    data() {
        // ...
        // ...
        return {
            //Removing the page editable constraints from the Diagram default constraints
            constraints: DiagramConstraints.Default & ~DiagramConstraints.PageEditable,
            //Callling the defined click event
            click:clickEvent
        }
         // ...
        // ...
    }
}

Refer to the following sample for creating read-only diagram and performing actions on click events.

app.vue

<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'>
        </ejs-diagram>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { DiagramPlugin, DiagramConstraints} from '@syncfusion/ej2-vue-diagrams';


//Defining click event
function clickEvent(args) {
alert('click event triggered')
}

    Vue.use(DiagramPlugin);
    let addInfo  = { Designation: 'manager' };
    let nodes = [{
    //Adding custom properties
    addInfo: addInfo,
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    //Page editable constraints for diagram
    constraints: DiagramConstraints.Default & ~DiagramConstraints.PageEditable,
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
    // Text(label) added to the node
}]

export default {
    name: 'app',
    data() {
        return {
            width: "100%",
            height: "350px",
            nodes: nodes,
            click: clickEvent
        }
    },
}
</script>
<style>
    @import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>