Search results

How to create read-only diagram and do actions only on click events

14 Oct 2021 / 2 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.

Copied to clipboard
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.

Copied to clipboard
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.

Source
Preview
app.vue
Copied to clipboard
<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>
Contents
Contents