Search results

How to customize the node and connector selector styles

14 Oct 2021 / 2 minutes to read

You can customize the selection handle of nodes and connectors by defining the appropriate customization for the selectors in cascading style sheet.

Step1

In the following code snippet, the selectors have been customized for the nodes resize handles and connectors source/target thumbs in a style sheet.

Copied to clipboard
<style>
    #borderRect, #resizeNorthWest, #resizeNorthEast, #resizeSouthWest, #resizeSouthEast, #resizeNorth, #resizeSouth, #resizeWest, #resizeEast, #connectorSourceThumb, #connectorTargetThumb {
                    stroke= EE1919;
                    stroke-width= 5px;
                    fill= EE1919;
                    opacity= 1;
                    }
</style>

Refer to the following sample for customizing the selectors for the nodes and connectors.

Source
Preview
app.vue
Copied to clipboard
<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :connectors='connectors'>
        </ejs-diagram>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { DiagramPlugin} from '@syncfusion/ej2-vue-diagrams';




    Vue.use(DiagramPlugin);
    let nodes = [{
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
    // Text(label) added to the node
}];

let connectors = [{
    // Name of the connector
    id: "connector1",
    style: {
        strokeColor: '#6BA5D7',
        fill: '#6BA5D7',
        strokeWidth: 2
    },
    targetDecorator: {
        style: {
            fill: '#6BA5D7',
            strokeColor: '#6BA5D7'
        }
    },
    // Sets source and target points
    sourcePoint: {
        x: 100,
        y: 100
    },
    targetPoint: {
        x: 200,
        y: 200
    }
}]

export default {
    name: 'app',
    data() {
        return {
            width: "100%",
            height: "350px",
            nodes: nodes,
            connectors: connectors,
        }
    },
}
</script>
<style>

    #borderRect, #resizeNorthWest, #resizeNorthEast, #resizeSouthWest, #resizeSouthEast, #resizeNorth, #resizeSouth, #resizeWest, #resizeEast, #connectorSourceThumb, #connectorTargetThumb {
                    stroke: EE1919;
                    stroke-width: 5px;
                    fill: EE1919;
                    opacity: 1;
                    }

</style>