Show hide context menu in Vue Diagram component

17 Mar 20238 minutes to read

In the diagram, you can create the customized context menu. Refer to the contextmenu for further references.

Step1

To add the [customized context menu] (./context-menu#), define the customized context menu as shown as follows.

<template>
    <div id="app">
        <ejs-diagram id="diagram">
        </ejs-diagram>
    </div>
</template>

//Defining customized context menu
contextMenuSettings: {
    show: true,
    items: [{
        text: 'Apple',
        id: 'apple',
    },
    {
        text: 'Carrot',
        id: 'carrot'
    }
    ],
    // Hides the default context menu items and shows only the custom menu
    showCustomMenuOnly: true,
};

Step2

To load separate customized menu for each nodes, define the hidden ID of the context menu as shown as follows.

    // ...
    // ...
    // Defining the hidden Id for hiding the unwanted context menu item and displays the needed one
    let hiddenId = [];
        hiddenId = ['apple', 'carrot'];
    // ...
    // ...
    let diagram = this.$refs.diagram.ej2Instances
    if (diagram.selectedItems.nodes.length) {
        //From the hiddenId getting the needed context menu items
            if (diagram.selectedItems.nodes[0].id === "Fruit") {
                hiddenId.splice(hiddenId.indexOf('apple'),1);
                // ...
                // ...
            }
                // ...
                // ...
    }
    args.hiddenItems = hiddenId;

Refer to the following code sample for creating customized context menu with hiding the context menu item option.

app.vue

<template>
    <div id="app">
        <ejs-diagram id="diagram"  :width='width' :height='height' :nodes='nodes' :contextMenuSettings='contextMenuSettings' :contextMenuOpen="contextMenuOpen"></ejs-diagram>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { DiagramPlugin,DiagramContextMenu,Diagram,DiagramBeforeMenuOpenEventArgs } from '@syncfusion/ej2-vue-diagrams';
    Diagram.Inject(DiagramContextMenu);
    Vue.use(DiagramPlugin);

    let nodes = [{
            id: 'Fruit', width: 100, height: 100, offsetX: 300, offsetY: 300, shape: {type: 'Basic', shape: 'Ellipse'}, style: {fill:  '#6BA5D7', strokeColor: 'white'},
            annotations: [{ id: 'label1', content: 'Fruits' }]
        },
        {
            id: 'Vegetable', width: 100, height: 100, offsetX: 200, offsetY: 200, shape: {type: 'Basic', shape: 'Ellipse'}, style: {fill:  '#6BA5D7', strokeColor: 'white'},
            annotations: [{ id: 'label2', content: 'Vegetables' }]
        }
];

function contextMenuOpen(args) {
    let hiddenId = [];
    let obj = document.getElementById("diagram");
    let diagram = obj.ej2_instances[0];
    if (args.element.className !== 'e-menu-parent e-ul ') {
        hiddenId = ['apple', 'carrot', 'orange', 'radish', 'mango', 'cabbage'];
    }
    if (diagram.selectedItems.nodes.length) {
            if (diagram.selectedItems.nodes[0].id === "Fruit") {
                hiddenId.splice(hiddenId.indexOf('apple'),1);
                hiddenId.splice(hiddenId.indexOf('orange'),1);
                hiddenId.splice(hiddenId.indexOf('mango'),1);
            }

            if (diagram.selectedItems.nodes[0].id === "Vegetable") {
                hiddenId.splice(hiddenId.indexOf('carrot'),1);
                hiddenId.splice(hiddenId.indexOf('radish'),1);
                hiddenId.splice(hiddenId.indexOf('cabbage'),1);
            }
    }
    args.hiddenItems = hiddenId;
}

export default {
    name: 'app',
    data() {
        return {
            width: "100%",
            height: "350px",
            nodes: nodes,
            contextMenuOpen: contextMenuOpen,
            contextMenuSettings: {
        //Enables the context menu
        show: true,
        // Defines the custom context menu items
        items: [{
        text: 'Apple',
        id: 'apple',
    },
    {
        text: 'Carrot',
        id: 'carrot'
    },
    {
        text: 'Orange',
        id: 'orange'
    },
    {
        text: 'Radish',
        id: 'radish'
    },
    {
        text: 'Mango',
        id: 'mango'
    },
    {
        text: 'Cabbage',
        id: 'cabbage'
    }
    ],
    // Hides the default context menu items
    showCustomMenuOnly: true,
    }
        }
    }
}


</script>
<style>
    @import "../../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>