Text limit for label in Vue Diagram component

16 Mar 20233 minutes to read

You can limit the text for the labels at initial rendering time and dynamically.

Step1

To limit the text for the label at initial rendering, it can be limited with the help of the text’s substring method as shown as follows.

let nodes = [{
    id:"node1",
    // ...
    // ...
    // label added to the node
    annotations: [{ id: 'label1', content: setLimit("SyncfusionSyncfusionSyncfusion", 10)}]
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
    }]

function setLimit(text, limit) {
    let len;
    // Getting the length of the string
    len = text.length;
    // Checking whether it mets limiting criteria or not
    if (len > limit)
    // Removing the characters beyond the limit.
        text = text.substring(0, limit);
    return text;
}

Refer to the following code sample for limiting the text for labels.

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} from '@syncfusion/ej2-vue-diagrams';
    Vue.use(DiagramPlugin);
    let nodes = [{
    id:"node1",
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    // label added to the node
    annotations: [{ id: 'label1', content: setLimit("SyncfusionSyncfusionSyncfusion", 10)}],
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
    }]

function setLimit(text, limit) {
    let len;
    len = text.length;
    if (len > limit)
        text = text.substring(0, limit);
    return text;
}

export default {
    name: 'app',
    data() {
        return {
            width: "100%",
            height: "350px",
            nodes: nodes,
        }
    },
}
</script>
<style>
   #diagram_editBox {
         max-width: 10px;
         }
</style>

To perform the text limiting for labels dynamically, set the [max-width] attribute for the text box ID which appears at the time of editing the labels text.