# diagram-local-data

> Diagram renders a species hierarchy from local data using a tree layout.

**Framework:** vue  **Component:** Diagram  **Variant:** local-data

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/vue/diagram-local-data.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-diagrams
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/diagram-local-data/Diagram.vue

```vue
<template>
  <!-- Diagram and Symbol Palette sections -->
  <div class="control-section diagram-bpmn">
    <div style="width:100%;height:445px">
      <div class="sb-mobile-palette-bar">
        <div id="palette-icon-default" ref="paletteIcon" role="button" class="e-ddb-icons1 e-toggle-palette"></div>
      </div>
      <!-- Symbol Palette component -->
      <div id="palette-space" class="sb-mobile-palette" style="width:240px;height:445px; float:left" ref="paletteSpace">
        <ejs-symbolpalette id="symbolpalette-bpmn" :expandMode='expandMode' :palettes='palettes' :width='palettewidth'
          :height='paletteheight' :getSymbolInfo='getSymbolInfo' :symbolMargin='symbolMargin'
          :symbolHeight='symbolHeight' :symbolWidth='symbolWidth'
          :getNodeDefaults='palettegetNodeDefaults'></ejs-symbolpalette>
      </div>

      <!-- Diagram component -->
      <div id="diagram-space" class="sb-mobile-diagram" style="height:445px;border-color: rgba(0, 0, 0, 0.12);border-width: 1px 1px 0px 0px;
            border-style: solid; border-left: none;">
        <ejs-diagram style='display:block' ref="diagramObject" id="diagram" :mode='mode' :width='width' :height='height'
          :nodes='nodes' :connectors='connectors' :dragEnter='dragEnter' :snapSettings='snapSettings'
          :contextMenuSettings='contextMenuSettings' :contextMenuOpen='contextMenuOpen'
          :contextMenuClick='contextMenuClick'></ejs-diagram>
      </div>
    </div>

    <!-- Descriptions for the Action and the Diagram -->
  </div>
</template>

<script>

// Import necessary components and modules
import {
  DiagramComponent,
  UndoRedo,
  SymbolPaletteComponent,
  NodeConstraints,
  SnapConstraints,
  BpmnDiagrams,
  DiagramContextMenu,
  DataBinding,
} from "@syncfusion/ej2-vue-diagrams";

let diagram;
let paletteSpace;
let paletteIcon;
// Function to initialize a node
function createNode(id, width, height, offsetX, offsetY,
  shape, annotations = [], margin = {}, style = {}, constraints = NodeConstraints.Default) {
  return {
    id: id,
    width: width,
    height: height,
    offsetX: offsetX,
    offsetY: offsetY,
    shape: shape,
    annotations,
    margin: margin,
    style: style,
    constraints: constraints
  }
};

//Initializes the nodes for the diagram.
let nodes = [
  createNode('start', 40, 40, 35, 180, { type: 'Bpmn', shape: 'Event', event: { event: 'Start' } }),
  createNode('subProcess', 520, 250, 355, 180,
    {
      shape: 'Activity', type: 'Bpmn', activity: {
        activity: 'SubProcess',
        subProcess: {
          type: 'Transaction', collapsed: false, processes: ['processesStart', 'service', 'compensation',
            'error', 'processesTask', 'processesEnd', 'user', 'subProcessesEnd']
        }
      }
    }, [], {}, {}, NodeConstraints.Default | NodeConstraints.AllowDrop
  ),
  createNode('hazardEnd', 40, 40, 305, 370, { type: 'Bpmn', shape: 'Event', event: { event: 'End' } }, [
    { id: 'label2', content: 'Hazard', verticalAlignment: 'Top', style: { fill: 'white', color: 'black' }, margin: { top: 20 } }
  ]),
  createNode('cancelledEnd', 40, 40, 545, 370, { type: 'Bpmn', shape: 'Event', event: { event: 'End' } }, [
    { id: 'cancelledEndLabel2', content: 'Cancelled', verticalAlignment: 'Top', style: { fill: 'white', color: 'black' }, margin: { top: 20 } }
  ]),
  createNode('end', 40, 40, 665, 180, { type: 'Bpmn', shape: 'Event', event: { event: 'End' } }),
  createNode('processesStart', 30, 30, 0, 0, { type: 'Bpmn', shape: 'Event', event: { event: 'Start' } }, [], { left: 40, top: 80 }),
  createNode('service', 95, 70, 0, 0, {
    type: 'Bpmn', shape: 'Activity', activity: { activity: 'Task', task: { type: 'Service', loop: 'ParallelMultiInstance' } }
  },
    [{ id: 'serviceLabel2', content: 'Book hotel', style: { color: 'white' }, offset: { x: 0.5, y: 0.6 } }],
    { left: 110, top: 20 }, { fill: '#6FAAB0' }
  ),
  createNode('compensation', 30, 30, 0, 0, { type: 'Bpmn', shape: 'Event', event: { event: 'Intermediate', trigger: 'Compensation' } }, [], { left: 170, top: 100 }),
  createNode('processesTask', 95, 70, 0, 0, {
    type: 'Bpmn', shape: 'Activity', activity: { activity: 'Task', task: { type: 'Service' } }
  },
    [{ id: 'serviceLabel2', content: 'Charge credit card', style: { color: 'white' }, offset: { x: 0.5, y: 0.7 } }],
    { left: 290, top: 20 }, { fill: '#F6B53F' }
  ),
  createNode('error', 30, 30, 0, 0, { type: 'Bpmn', shape: 'Event', event: { event: 'Intermediate', trigger: 'Error' } }, [], { left: 350, top: 100 }),
  createNode('processesEnd', 30, 30, 0, 0, { type: 'Bpmn', shape: 'Event', event: { event: 'End' } }, [], { left: 440, top: 80 }),
  createNode('user', 90, 80, 0, 0, {
    type: 'Bpmn', shape: 'Activity', activity: { activity: 'Task', task: { type: 'User', compensation: true } }
  },
    [{ id: 'serviceLabel2', content: 'Cancel hotel reservation', style: { color: 'white' }, offset: { x: 0.5, y: 0.6 } }],
    { left: 30, top: 160 }, { fill: '#E94649' }
  ),
  createNode('subProcessesEnd', 30, 30, 0, 0, { type: 'Bpmn', shape: 'Event', event: { event: 'End' } }, [], { left: 440, top: 210 }),
];

// Function to create a connector
function createConnector(id, sourceID, targetID, sourcePortID = " ", targetPortID = "", type = "Orthogonal",
  segments = [], annotations = [], shape = {}, style = {}) {
  return {
    id: id,
    sourceID: sourceID,
    targetID: targetID,
    sourcePortID: sourcePortID,
    targetPortID: targetPortID,
    type: type,
    segments: segments,
    annotations: annotations,
    shape: shape,
    style: style
  }
};

//Initializes the connectors for the diagram.
let connectors = [
  createConnector('connector1', 'start', 'subProcess'),
  createConnector('connector2', 'subProcess', 'end', 'success'),
  createConnector('connector3', 'subProcess', 'hazardEnd', 'failure', "", 'Orthogonal',
    [{ type: 'Orthogonal', length: 50, direction: 'Bottom' }],
    [{ id: 'connector3Label2', content: 'Booking system failure', offset: 0.50, style: { fill: 'white' } }]
  ),
  createConnector('connector4', 'subProcess', 'cancelledEnd', 'cancel', "", 'Orthogonal',
    [{ type: 'Orthogonal', length: 50, direction: 'Bottom' }]
  ),
  createConnector('connector5', 'processesStart', 'service', "", "", 'Orthogonal'),
  createConnector('connector6', 'service', 'processesTask'),
  createConnector('connector7', 'processesTask', 'processesEnd', "", "", 'Orthogonal'),
  createConnector('connector8', 'compensation', 'user', "", "", 'Orthogonal',
    [{ type: 'Orthogonal', length: 30, direction: 'Bottom' }, { type: 'Orthogonal', length: 80, direction: 'Left' }],
    [], { type: 'Bpmn', flow: 'Association', association: 'Directional' }, { strokeDashArray: '2,2' }
  ),
  createConnector('connector9', 'error', 'subProcessesEnd', null, null, 'Orthogonal',
    [{ type: 'Orthogonal', length: 50, direction: 'Bottom' }],
    [{
      id: 'connector9Label2', content: 'Cannot charge card', offset: 0.5,
      style: { fill: 'white', color: 'black' }
    }]
  )
];

//Initializes the bpmn shapes for the symbol pallete.
let bpmnShapes = [
  {
    id: "Start",
    width: 35,
    height: 35,
    shape: {
      type: "Bpmn",
      shape: "Event",
      event: { event: "Start" }
    }
  },
  {
    id: "NonInterruptingIntermediate",
    width: 35,
    height: 35,
    shape: {
      type: "Bpmn",
      shape: "Event",
      event: { event: "NonInterruptingIntermediate" }
    }
  },
  {
    id: "End",
    width: 35,
    height: 35,
    offsetX: 665,
    offsetY: 230,
    shape: {
      type: "Bpmn",
      shape: "Event",
      event: { event: "End" }
    }
  },
  {
    id: "Task",
    width: 35,
    height: 35,
    offsetX: 700,
    offsetY: 700,
    shape: {
      type: "Bpmn",
      shape: "Activity",
      activity: {
        activity: "Task"
      }
    }
  },
  {
    id: "Transaction",
    width: 35,
    height: 35,
    offsetX: 300,
    offsetY: 100,
    constraints: NodeConstraints.Default | NodeConstraints.AllowDrop,
    shape: {
      type: "Bpmn",
      shape: "Activity",
      activity: {
        activity: "SubProcess",
        subProcess: {
          type: "Transaction",
          transaction: {
            cancel: { visible: false },
            failure: { visible: false },
            success: { visible: false }
          }
        }
      }
    }
  },
  {
    id: "Task_Service",
    width: 35,
    height: 35,
    offsetX: 700,
    offsetY: 700,
    shape: {
      type: "Bpmn",
      shape: "Activity",
      activity: {
        activity: "Task",
        task: { type: "Service" }
      }
    }
  },
  {
    id: "Gateway",
    width: 35,
    height: 35,
    offsetX: 100,
    offsetY: 100,
    shape: {
      type: "Bpmn",
      shape: "Gateway",
      gateway: { type: "Exclusive" }
    }
  },
  {
    id: "DataObject",
    width: 35,
    height: 35,
    offsetX: 500,
    offsetY: 100,
    shape: {
      type: "Bpmn",
      shape: "DataObject",
      dataObject: { collection: false, type: "None" }
    }
  },
  {
    id: "subProcess",
    width: 520,
    height: 250,
    offsetX: 355,
    offsetY: 230,
    constraints: NodeConstraints.Default | NodeConstraints.AllowDrop,
    shape: {
      shape: "Activity",
      type: "Bpmn",
      activity: {
        activity: "SubProcess",
        subProcess: {
          type: "Transaction",
          collapsed: false,
          processes: [],
          transaction: {
            cancel: { visible: false },
            failure: { visible: false },
            success: { visible: false }
          }
        }
      }
    }
  }
];

//Initializes the context menu for shapes.
let contextMenu = {
  show: true,
  items: [
    {
      text: 'Ad-Hoc', id: 'Adhoc',
      items: [{ text: 'None', iconCss: 'e-adhocs e-bpmn-event e-bpmn-icons e-None', id: 'AdhocNone' },
      { iconCss: 'e-adhocs e-bpmn-icons e-adhoc', text: 'Ad-Hoc', id: 'AdhocAdhoc' }]
    }, {
      text: 'Loop', id: 'Loop',
      items: [{ text: 'None', iconCss: 'e-loop e-bpmn-icons e-None', id: 'LoopNone' },
      { text: 'Standard', iconCss: 'e-loop e-bpmn-icons e-Loop', id: 'Standard' },
      { text: 'Parallel Multi-Instance', iconCss: 'e-loop e-bpmn-icons e-ParallelMI', id: 'ParallelMultiInstance' },
      { text: 'Sequence Multi-Instance', iconCss: 'e-loop e-bpmn-icons e-SequentialMI', id: 'SequenceMultiInstance' }]
    }, {
      text: 'Compensation', id: 'taskCompensation',
      items: [{ text: 'None', iconCss: 'e-compensation e-bpmn-icons e-None', id: 'CompensationNone' },
      { iconCss: 'e-compensation e-bpmn-icons e-Compensation', text: 'Compensation', id: 'CompensationCompensation' }]
    }, {
      text: 'Activity-Type', id: 'Activity-Type',
      items: [{ text: 'Collapsed sub-process', iconCss: 'e-bpmn-icons e-SubProcess', id: 'CollapsedSubProcess' },
      { iconCss: 'e-bpmn-icons e-Task', text: 'Expanded sub-process', id: 'ExpandedSubProcess' }]
    }, {
      text: 'Boundry', id: 'Boundry',
      items: [{ text: 'Default', iconCss: 'e-boundry e-bpmn-icons e-Default', id: 'Default' },
      { text: 'Call', iconCss: 'e-boundry e-bpmn-icons e-Call', id: 'BoundryCall' },
      { text: 'Event', iconCss: 'e-boundry e-bpmn-icons e-Event', id: 'BoundryEvent' }]
    }, {
      text: 'Data Object', id: 'DataObject',
      items: [{ text: 'None', iconCss: 'e-data e-bpmn-icons e-None', id: 'DataObjectNone' },
      { text: 'Input', iconCss: 'e-data e-bpmn-icons e-DataInput', id: 'Input' },
      { text: 'Output', iconCss: 'e-data e-bpmn-icons e-DataOutput', id: 'Output' }]
    }, {
      text: 'Collection', id: 'collection',
      items: [{ text: 'None', iconCss: 'e-collection e-bpmn-icons e-None', id: 'collectionNone' },
      { text: 'Collection', iconCss: 'e-collection e-bpmn-icons e-ParallelMI', id: 'Collectioncollection' }]
    }, {
      text: 'Call', id: 'DeftCall',
      items: [{ text: 'None', iconCss: 'e-call e-bpmn-icons e-None', id: 'CallNone' },
      { text: 'Call', iconCss: 'e-call e-bpmn-icons e-CallActivity', id: 'CallCall' }]
    }, {
      text: 'Trigger Result', id: 'TriggerResult',
      items: [{ text: 'None', id: 'TriggerNone', iconCss: 'e-trigger e-bpmn-icons e-None' },
      { text: 'Message', id: 'Message', iconCss: 'e-trigger e-bpmn-icons e-InMessage' },
      { text: 'Multiple', id: 'Multiple', iconCss: 'e-trigger e-bpmn-icons e-InMultiple' },
      { text: 'Parallel', id: 'Parallel', iconCss: 'e-trigger e-bpmn-icons e-InParallelMultiple' },
      { text: 'Signal', id: 'Signal', iconCss: 'e-trigger e-bpmn-icons e-InSignal' },
      { text: 'Timer', id: 'Timer', iconCss: 'e-trigger e-bpmn-icons e-InTimer' },
      { text: 'Cancel', id: 'Cancel', iconCss: 'e-trigger e-bpmn-icons e-CancelEnd' },
      { text: 'Escalation', id: 'Escalation', iconCss: 'e-trigger e-bpmn-icons e-InEscalation' },
      { text: 'Error', id: 'Error', iconCss: 'e-trigger e-bpmn-icons e-InError' },
      { text: 'Compensation', id: 'triggerCompensation', iconCss: 'e-trigger e-bpmn-icons e-InCompensation' },
      { text: 'Terminate', id: 'Terminate', iconCss: 'e-trigger e-bpmn-icons e-TerminateEnd' },
      { text: 'Conditional', id: 'Conditional', iconCss: 'e-trigger e-bpmn-icons e-InConditional' },
      { text: 'Link', id: 'Link', iconCss: 'e-trigger e-bpmn-icons e-ThrowLinkin' }
      ]
    },
    {
      text: 'Event Type', id: 'EventType',
      items: [{ text: 'Start', id: 'Start', iconCss: 'e-event e-bpmn-icons e-NoneStart', },
      { text: 'Intermediate', id: 'Intermediate', iconCss: 'e-event e-bpmn-icons e-InterruptingNone' },
      { text: 'NonInterruptingStart', id: 'NonInterruptingStart', iconCss: 'e-event e-bpmn-icons e-Noninterruptingstart' },
      { text: 'ThrowingIntermediate', id: 'ThrowingIntermediate', iconCss: 'e-event e-bpmn-icons e-ThrowingIntermediate' },
      {
        text: 'NonInterruptingIntermediate', id: 'NonInterruptingIntermediate',
        iconCss: 'e-event e-bpmn-icons e-NoninterruptingIntermediate'
      },
      { text: 'End', id: 'End', iconCss: 'e-event e-bpmn-icons e-NoneEnd' }]
    }, {
      text: 'Task Type', id: 'TaskType',
      items: [
        { text: 'None', id: 'TaskNone', iconCss: 'e-task e-bpmn-icons e-None' },
        { text: 'Service', id: 'Service', iconCss: 'e-task e-bpmn-icons e-ServiceTask' },
        { text: 'BusinessRule', id: 'BusinessRule', iconCss: 'e-task e-bpmn-icons e-BusinessRule' },
        { text: 'InstantiatingReceive', id: 'InstantiatingReceive', iconCss: 'e-task e-bpmn-icons e-InstantiatingReceive' },
        { text: 'Manual', id: 'Manual', iconCss: 'e-task e-bpmn-icons e-ManualCall' },
        { text: 'Receive', id: 'Receive', iconCss: 'e-task e-bpmn-icons e-InMessage' },
        { text: 'Script', id: 'Script', iconCss: 'e-task e-bpmn-icons e-ScriptCall' },
        { text: 'Send', id: 'Send', iconCss: 'e-task e-bpmn-icons e-OutMessage' },
        { text: 'User', id: 'User', iconCss: 'e-task e-bpmn-icons e-UserCall' },
      ]
    }, {
      text: 'GateWay', id: 'GateWay',
      iconCss: 'e-bpmn-icons e-Gateway', items: [
        { text: 'None', id: 'GatewayNone', iconCss: 'e-gate e-bpmn-icons e-None' },
        { text: 'Exclusive', iconCss: 'e-gate e-bpmn-icons e-ExclusiveGatewayWithMarker', id: 'Exclusive' },
        { text: 'Inclusive', iconCss: 'e-gate e-bpmn-icons e-InclusiveGateway', id: 'Inclusive' },
        { text: 'Parallel', iconCss: 'e-gate e-bpmn-icons e-ParallelGateway', id: 'GatewayParallel' },
        { text: 'Complex', iconCss: 'e-gate e-bpmn-icons e-ComplexGateway', id: 'Complex' },
        { text: 'EventBased', iconCss: 'e-gate e-bpmn-icons e-EventBasedGateway', id: 'EventBased' },
        { text: 'ExclusiveEventBased', iconCss: 'e-gate e-bpmn-icons e-ExclusiveEventBased', id: 'ExclusiveEventBased' },
        { text: 'ParallelEventBased', iconCss: 'e-gate e-bpmn-icons e-ParallelEventBasedGatewaytostart', id: 'ParallelEventBased' }
      ]
    },
  ],
  showCustomMenuOnly: true
};

//  Export the default object for Vue component
export default {
  components: {
    'ejs-diagram': DiagramComponent,
    'ejs-symbolpalette': SymbolPaletteComponent
  },
  data: function () {
    return {
      width: "100%",
      height: "100%",
      mode: "SVG",
      nodes: nodes,
      connectors: connectors,
      snapSettings: { constraints: SnapConstraints.None },
      contextMenuSettings: contextMenu,
      // tslint:disable-next-line:max-func-body-length
      contextMenuOpen: contextMenuOpen,
      // tslint:disable-next-line:max-func-body-length
      contextMenuClick: contextMenuClick,

      // Function to handle drag enter from palette to diagram
      dragEnter: (args) => {
        let node = args.element;
        if (node instanceof Node) {
          if (node && node.shape && (node.shape).activity && (node.shape).activity.subProcess) {
            let activity = (node.shape).activity;
            if (activity && activity.subProcess && !activity.subProcess.collapsed) {
              if (activity.subProcess.transaction) {
                if (activity.subProcess.transaction.cancel) {
                  activity.subProcess.transaction.cancel.visible = true;
                }
                if (activity.subProcess.transaction.failure) {
                  activity.subProcess.transaction.failure.visible = true;
                }
                if (activity.subProcess.transaction.success) {
                  activity.subProcess.transaction.success.visible = true;
                }
              }
            } else {
              if (node) {
                let objectWidth = (node.width) || 0;
                let objectHeight = (node.height) || 0;

                node.width = 100;
                node.offsetX = node.offsetX || 0;
                node.offsetY = node.offsetY || 0;
                node.height = node.height || 0;
                node.height *= (100 / (node.width) || 1);
                node.offsetX += (node.width - objectWidth) / 2;
                node.offsetY += (node.height - objectHeight) / 2;
              }
            }
          }
        }
      },
      expandMode: "Multiple",
      palettes: [
        {
          id: "bpmn",
          expanded: true,
          symbols: bpmnShapes,
          iconCss: "shapes",
          title: "Bpmn Shapes"
        },
        {
          id: "connectors",
          expanded: true,
          symbols: getConnectors(),
          iconCss: "shapes",
          title: "Connectors"
        }
      ],
      palettewidth: "235px",
      paletteheight: "445px",
      palettegetNodeDefaults: (symbol) => {
        symbol.style = { strokeColor: "#757575" }
      },
      symbolHeight: 60,
      symbolWidth: 60,
      symbolMargin: { left: 15, right: 15, top: 15, bottom: 15 },
      getSymbolInfo: (symbol) => {
        return { fit: true };
      }
    };
  },
  provide: {
    diagram: [BpmnDiagrams, UndoRedo, DiagramContextMenu, DataBinding],
    SymbolPalette: [BpmnDiagrams, DataBinding],

  }, mounted: function () {
    diagram = this.$refs.diagramObject.ej2Instances;
    paletteIcon = this.$refs.paletteIcon;
    paletteSpace = this.$refs.paletteSpace;
    diagram.fitToPage();
    addEvents();
  }
}
//Functon to Initializes the Connector shapes for the symbol pallete.
function getConnectors() {
  let connectorSymbols = [
    {
      id: "Link1", type: "Orthogonal", sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
      targetDecorator: { shape: "Arrow", style: { strokeColor: "#757575", fill: "#757575" } }, style: { strokeWidth: 2, strokeColor: "#757575" }
    },
    {
      id: "Link2", type: "Orthogonal", sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
      targetDecorator: { shape: "Arrow", style: { strokeColor: "#757575", fill: "#757575" } }, style: { strokeWidth: 2, strokeDashArray: "4 4", strokeColor: "#757575" }
    },
    {
      id: "Link3", type: "Straight", sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
      targetDecorator: { shape: "Arrow", style: { strokeColor: "#757575", fill: "#757575" } }, style: { strokeWidth: 2, strokeColor: "#757575" }
    },
    {
      id: "link4", type: "Orthogonal", sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
      targetDecorator: { style: { strokeColor: "#757575", fill: "#757575" } },
      shape: { type: "Bpmn", flow: "Association", association: "Directional" }, style: { strokeDashArray: "2,2", strokeColor: "#757575", fill: "#757575" }
    }
  ];
  return connectorSymbols;
}

//function context menu click
function contextMenuClick(args) {
  if (diagram && diagram.selectedItems && diagram.selectedItems.nodes && diagram.selectedItems.nodes.length > 0) {
    let bpmnShape = diagram.selectedItems.nodes[0].shape;
    if (args.item.iconCss) {
        if (args.item.iconCss.indexOf('e-adhocs') > -1 && bpmnShape.activity && bpmnShape.activity.subProcess) {
          bpmnShape.activity.subProcess.adhoc = args.item.id === 'AdhocNone' ? false : true;
        }
        if (args.item.iconCss.indexOf('e-event') > -1 && bpmnShape.event) {
          bpmnShape.event.event = (args.item.id);
        }

        if (args.item.iconCss.indexOf('e-trigger') > -1) {

          let trigger = args.item.id;
          trigger = (args.item.id === 'TriggerNone') ? 'None' :
            (args.item.id === 'triggerCompensation') ? 'Compensation' : args.item.id;
          if (bpmnShape.event) {
            bpmnShape.event.trigger = (args.item.text);
          }
        }
        if (bpmnShape.activity) {
          if (args.item.iconCss.indexOf('e-loop') > -1) {
            let loop = (args.item.id === 'LoopNone') ? 'None' : args.item.id;

            if (bpmnShape.activity.activity === 'Task' && bpmnShape.activity.task) {
              bpmnShape.activity.task.loop = loop;
            }
            if (bpmnShape.activity.activity === 'SubProcess' && bpmnShape.activity.subProcess) {
              bpmnShape.activity.subProcess.loop = loop;
            }

          }
          if (args.item.iconCss.indexOf('e-compensation') > -1) {
            let compensation = (args.item.id === 'CompensationNone') ? false : true;
            if (bpmnShape.activity.activity === 'Task' && bpmnShape.activity.task) {
              bpmnShape.activity.task.compensation = compensation;
            }
            if (bpmnShape.activity.activity === 'SubProcess' && bpmnShape.activity.subProcess) {
              bpmnShape.activity.subProcess.compensation = compensation;

            }
          }
          if (args.item.iconCss.indexOf('e-call') > -1) {
            let compensation = (args.item.id === 'CallNone') ? false : true;
            if (bpmnShape.activity.activity === 'Task' && bpmnShape.activity.task) {
              bpmnShape.activity.task.call = compensation;
            }
          }

          if (args.item.iconCss.indexOf('e-boundry') > -1 && bpmnShape.activity.subProcess) {
            let call = args.item.id;
            if (args.item.id !== 'Default') {
              call = (args.item.id === 'BoundryEvent') ? 'Event' : 'Call';
            }
            bpmnShape.activity.subProcess.boundary = call;
          }
          if (args.item.iconCss.indexOf('e-task') > -1) {
            let task = args.item.id;
            if (task === 'TaskNone') { task = 'None'; }
            if (bpmnShape.activity.activity === 'Task' && bpmnShape.activity.task) {
              bpmnShape.activity.task.type = task;
            }
          }
        }
        if (args.item.iconCss.indexOf('e-data') > -1 && bpmnShape.dataObject) {
          let call = args.item.id;
          if (args.item.id === 'DataObjectNone') {
            call = 'None';
          }
          bpmnShape.dataObject.type = call;
        }
        if (args.item.iconCss.indexOf('e-collection') > -1 && bpmnShape.dataObject) {
          let call = (args.item.id === 'Collectioncollection') ? true : false;
          bpmnShape.dataObject.collection = call;
        }

        if (args.item.iconCss.indexOf('e-gate') > -1 && bpmnShape.gateway) {
          let task = args.item.id;
          if (task === 'GateWayNone') { task = 'None'; }
          if (task === 'GatewayParallel') { task = 'Parallel'; }
          if (bpmnShape.shape === 'Gateway') {
            bpmnShape.gateway.type = task;
          }
        }
      }
      if ((args.item.id === 'CollapsedSubProcess' || args.item.id === 'ExpandedSubProcess') && bpmnShape.activity.subProcess) {
        if (args.item.id === 'ExpandedSubProcess') {
          bpmnShape.activity.activity = 'SubProcess';
          bpmnShape.activity.subProcess.collapsed = false;
        } else {
          bpmnShape.activity.activity = 'SubProcess';
          bpmnShape.activity.subProcess.collapsed = true;
        }
      }
    diagram.dataBind();
  }
}

// Define a function to handle opening the context menu
function contextMenuOpen(args) {
  let hiddenId = [];
  if (args.element.className !== "e-menu-parent e-ul ") {
    hiddenId = ["Adhoc", "Loop", "taskCompensation", "Activity-Type", "Boundry", "DataObject",
      "collection", "DeftCall", "TriggerResult", "EventType", "TaskType", "GateWay"
    ];
  }
  for (let item of args.items) {
    if (item && item.id && diagram && diagram.selectedItems && diagram.selectedItems.nodes && diagram.selectedItems.nodes.length > 0) {
      let node = diagram.selectedItems.nodes[0].shape;
      if (node.shape !== "DataObject" && node.shape !== "Gateway") {
        if (item.text === "Ad-Hoc") {
          if (node.activity.activity === "SubProcess") {
            hiddenId.splice(hiddenId.indexOf(item.id), 1);
          }
        }
        if (item.text === "Loop" || item.text === "Compensation" || item.text === "Activity-Type") {
          if ((diagram.selectedItems.nodes[0].shape).shape === "DataObject" ||
            node.shape === "Activity" || (diagram.selectedItems.nodes[0].shape).shape === "Gateway") {
            hiddenId.splice(hiddenId.indexOf(item.id), 1);
          }
        }
        if (item.text === "Boundry") {
          if (node.activity.activity === "SubProcess") {
            hiddenId.splice(hiddenId.indexOf(item.id), 1);
          }
        }
      }
      if (item.text === "Data Object") {
        if (node.shape === "DataObject") {
          hiddenId.splice(hiddenId.indexOf(item.id), 1);
        }
      }
      if (item.text === "Collection") {
        if (node.shape === "DataObject") {
          hiddenId.splice(hiddenId.indexOf(item.id), 1);
        }
      }
      if (item.text === "Call") {
        if ( node.shape === "Activity" && node.activity.activity === "Task" ) {
          hiddenId.splice(hiddenId.indexOf(item.id), 1);
        }
      }
      if (item.text === "Trigger Result") {
        if (node.shape === "Event") {
          hiddenId.splice(hiddenId.indexOf(item.id), 1);
        }
      }
      if (item.text === "Event Type") {
        if (node.shape === "Event") {
          hiddenId.splice(hiddenId.indexOf(item.id), 1);
        }
      }
      if (item.text === "Task Type") {
        if ( node.shape === "Activity" && node.activity.activity === "Task" ) {
          hiddenId.splice(hiddenId.indexOf(item.id), 1);
        }
      }
      if (item.text === "GateWay") {
        if (node.shape === "Gateway") {
          hiddenId.splice(hiddenId.indexOf(item.id), 1);
        }
      }
      if ( diagram.selectedItems.nodes.length > 0 && args.parentItem &&
        args.parentItem.id === "TriggerResult" && node.shape === "Event" ) {
        let shape = node;
        if ( item.text !== "None" && (item.text === shape.event.event || item.text === shape.event.trigger) ) {
          hiddenId.push(item.id);
        }
        if (shape.event.event === "Start") {
          if ( item.text === "Cancel" || item.text === "Terminate" || item.text === "Link" ) {
            hiddenId.push(item.id);
          }
        }
        if ( shape.event.event === "NonInterruptingStart" || item.text === "Link" ) {
          if ( item.text === "Cancel" || item.text === "Terminate" ||
            item.text === "Compensation" || item.text === "Error" || item.text === "None" ) {
            hiddenId.push(item.id);
          }
        }
        if (shape.event.event === "Intermediate") {
          if (item.text === "Terminate") {
            hiddenId.push(item.id);
          }
        }
        if (shape.event.event === "NonInterruptingIntermediate") {
          if ( item.text === "Cancel" || item.text === "Terminate" || item.text === "Compensation" ||
            item.text === "Error" || item.text === "None" || item.text === "Link" ) {
            hiddenId.push(item.id);
          }
        }
        if (shape.event.event === "ThrowingIntermediate") {
          if ( item.text === "Cancel" || item.text === "Terminate" || item.text === "Timer" ||
            item.text === "Error" || item.text === "None" || item.text === "Pareller" || item.text === "Conditional" ) {
            hiddenId.push(item.id);
          }
        }
        if (shape.event.event === "End") {
          if ( item.text === "Parallel" || item.text === "Timer" || item.text === "Conditional" || item.text === "Link" ) {
            hiddenId.push(item.id);
          }
        }
      }
      if ( diagram.selectedItems.nodes.length > 0 && args.parentItem &&
        args.parentItem.id === "EventType" && node.shape === "Event" ) {
        if (item.text === node.event.event) {
          hiddenId.push(item.id);
        }
      }
    }
  }
  args.hiddenItems = hiddenId;
}
//Adds EventListener based on device's viewport width.
function addEvents() {
  var isMobile = window.matchMedia("(max-width:550px)").matches;
  if (isMobile) {
    if (paletteIcon) {
      paletteIcon.addEventListener("click", openPalette, false);
    }
  }
}

//Toggles the visibility of the palette space on mobile devices when the palette icon is clicked.
function openPalette() {
  var isMobile = window.matchMedia("(max-width:550px)").matches;
  if (isMobile) {
    if (!paletteSpace.classList.contains("sb-mobile-palette-open")) {
      paletteSpace.classList.add("sb-mobile-palette-open");
    } else {
      paletteSpace.classList.remove("sb-mobile-palette-open");
    }
  }
}
</script>

```

### src/components/diagram-local-data/DiagramView.vue

```vue
<template>
  <Diagram />
</template>

<script setup>
import Diagram from '../../components/Diagram.vue'
</script>
```