{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "diagram-bpmn-editor",
  "framework": "react",
  "type": "registry:component",
  "component": "Diagram",
  "variant": "bpmn-editor",
  "dependencies": [
    "@syncfusion/ej2-navigations",
    "@syncfusion/ej2-react-diagrams"
  ],
  "description": "BPMN editor with symbol palette, context menu, undo-redo, and shape editing.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/js/diagram-bpmn-editor.md"
  },
  "files": [
    {
      "target": "src/components/diagram-bpmn-editor/Diagram.jsx",
      "content": "// Import React and necessary components from React Diagram library for building the BPMN editor.\nimport { SymbolPaletteComponent, NodeConstraints, DiagramComponent, Inject, BpmnDiagrams, UndoRedo, DiagramContextMenu, DataBinding, } from \"@syncfusion/ej2-react-diagrams\";\n\nlet diagram;\nlet paletteIconInstance;\nlet paletteSpaceInstance;\n// Function to initialize a node\nconst createNode = (id, width, height, offsetX, offsetY, shape, annotations = [], margin = {}, style = {}, constraints = NodeConstraints.Default) => ({\n    id: id,\n    width: width,\n    height: height,\n    offsetX: offsetX,\n    offsetY: offsetY,\n    shape: shape,\n    annotations,\n    margin: margin,\n    style: style,\n    constraints: constraints\n});\n//Initializes the nodes for the diagram.\nlet nodes = [\n    createNode('start', 40, 40, 35, 180, { type: 'Bpmn', shape: 'Event', event: { event: 'Start' } }),\n    createNode('subProcess', 520, 250, 355, 180, { shape: 'Activity', type: 'Bpmn', activity: { activity: 'SubProcess',\n            subProcess: { type: 'Transaction', collapsed: false, processes: ['processesStart', 'service', 'compensation',\n                    'error', 'processesTask', 'processesEnd', 'user', 'subProcessesEnd'] } } }, [], {}, {}, NodeConstraints.Default | NodeConstraints.AllowDrop),\n    createNode('hazardEnd', 40, 40, 305, 370, { type: 'Bpmn', shape: 'Event', event: { event: 'End' } }, [\n        { id: 'label2', content: 'Hazard', verticalAlignment: 'Top', style: { fill: 'white', color: 'black' }, margin: { top: 20 } }\n    ]),\n    createNode('cancelledEnd', 40, 40, 545, 370, { type: 'Bpmn', shape: 'Event', event: { event: 'End' } }, [\n        { id: 'cancelledEndLabel2', content: 'Cancelled', verticalAlignment: 'Top', style: { fill: 'white', color: 'black' }, margin: { top: 20 } }\n    ]),\n    createNode('end', 40, 40, 665, 180, { type: 'Bpmn', shape: 'Event', event: { event: 'End' } }),\n    createNode('processesStart', 30, 30, 0, 0, { type: 'Bpmn', shape: 'Event', event: { event: 'Start' } }, [], { left: 40, top: 80 }),\n    createNode('service', 95, 70, 0, 0, {\n        type: 'Bpmn', shape: 'Activity', activity: { activity: 'Task', task: { type: 'Service', loop: 'ParallelMultiInstance' } }\n    }, [{ id: 'serviceLabel2', content: 'Book hotel', style: { color: 'white' }, offset: { x: 0.5, y: 0.5 } }], { left: 110, top: 20 }, { fill: '#6FAAB0' }),\n    createNode('compensation', 30, 30, 0, 0, { type: 'Bpmn', shape: 'Event', event: { event: 'Intermediate', trigger: 'Compensation' } }, [], { left: 170, top: 100 }),\n    createNode('processesTask', 95, 70, 0, 0, {\n        type: 'Bpmn', shape: 'Activity', activity: { activity: 'Task', task: { type: 'Service' } }\n    }, [{ id: 'serviceLabel2', content: 'Charge credit card', style: { color: 'white' }, offset: { x: 0.5, y: 0.6 } }], { left: 290, top: 20 }, { fill: '#F6B53F' }),\n    createNode('error', 30, 30, 0, 0, { type: 'Bpmn', shape: 'Event', event: { event: 'Intermediate', trigger: 'Error' } }, [], { left: 350, top: 100 }),\n    createNode('processesEnd', 30, 30, 0, 0, { type: 'Bpmn', shape: 'Event', event: { event: 'End' } }, [], { left: 440, top: 80 }),\n    createNode('user', 90, 80, 0, 0, {\n        type: 'Bpmn', shape: 'Activity', activity: { activity: 'Task', task: { type: 'User', compensation: true } }\n    }, [{ id: 'serviceLabel2', content: 'Cancel hotel reservation', style: { color: 'white' }, offset: { x: 0.5, y: 0.6 } }], { left: 30, top: 160 }, { fill: '#E94649' }),\n    createNode('subProcessesEnd', 30, 30, 0, 0, { type: 'Bpmn', shape: 'Event', event: { event: 'End' } }, [], { left: 440, top: 210 }),\n];\n// Function to create a connector\nconst createConnector = (id, sourceID, targetID, sourcePortID = \" \", targetPortID = \"\", type = \"Orthogonal\", segments = [], annotations = [], shape = {}, style = {}) => ({\n    id: id,\n    sourceID: sourceID,\n    targetID: targetID,\n    sourcePortID: sourcePortID,\n    targetPortID: targetPortID,\n    type: type,\n    segments: segments,\n    annotations: annotations,\n    shape: shape,\n    style: style\n});\n//Initializes the connectors for the diagram.\nlet connectors = [\n    createConnector('connector1', 'start', 'subProcess'),\n    createConnector('connector2', 'subProcess', 'end', 'success'),\n    createConnector('connector3', 'subProcess', 'hazardEnd', 'failure', \"\", 'Orthogonal', [{ type: 'Orthogonal', length: 50, direction: 'Bottom' }], [{ id: 'connector3Label2', content: 'Booking system failure', offset: 0.50, style: { fill: 'white' } }]),\n    createConnector('connector4', 'subProcess', 'cancelledEnd', 'cancel', \"\", 'Orthogonal', [{ type: 'Orthogonal', length: 50, direction: 'Bottom' }]),\n    createConnector('connector5', 'processesStart', 'service', \"\", \"\", 'Orthogonal'),\n    createConnector('connector6', 'service', 'processesTask'),\n    createConnector('connector7', 'processesTask', 'processesEnd', \"\", \"\", 'Orthogonal'),\n    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' }),\n    createConnector('connector9', 'error', 'subProcessesEnd', null, null, 'Orthogonal', [{ type: 'Orthogonal', length: 50, direction: 'Bottom' }], [{ id: 'connector9Label2', content: 'Cannot charge card', offset: 0.5,\n            style: { fill: 'white', color: 'black' } }])\n];\n//Initializes the bpmn shapes for the symbol pallete.\nlet bpmnShapes = [\n    {\n        id: 'Start', width: 35, height: 35, shape: {\n            type: 'Bpmn', shape: 'Event',\n            event: { event: 'Start' }\n        }\n    },\n    {\n        id: 'NonInterruptingIntermediate', width: 35, height: 35, shape: {\n            type: 'Bpmn', shape: 'Event',\n            event: { event: 'NonInterruptingIntermediate' }\n        },\n    },\n    {\n        id: 'End', width: 35, height: 35, shape: {\n            type: 'Bpmn', shape: 'Event',\n            event: { event: 'End' }\n        },\n    },\n    {\n        id: 'Task', width: 35, height: 35, shape: {\n            type: 'Bpmn', shape: 'Activity', activity: {\n                activity: 'Task',\n            },\n        }\n    },\n    {\n        id: 'Transaction', width: 35, height: 35, shape: {\n            type: 'Bpmn', shape: 'Activity',\n            activity: {\n                activity: 'SubProcess', subProcess: {\n                    type: 'Transaction', transaction: {\n                        cancel: { visible: false }, failure: { visible: false }, success: { visible: false }\n                    }\n                }\n            }\n        }\n    },\n    {\n        id: 'Task_Service', width: 35, height: 35, shape: {\n            type: 'Bpmn', shape: 'Activity', activity: {\n                activity: 'Task', task: { type: 'Service' }\n            },\n        }\n    },\n    {\n        id: 'Gateway', width: 35, height: 35, shape: { type: 'Bpmn', shape: 'Gateway', gateway: { type: 'Exclusive' } },\n    },\n    {\n        id: 'DataObject', width: 35, height: 35, shape: { type: 'Bpmn', shape: 'DataObject', dataObject: { collection: false, type: 'None' } }\n    },\n    {\n        id: 'subProcess', width: 520, height: 250,\n        constraints: NodeConstraints.Default | NodeConstraints.AllowDrop,\n        shape: {\n            shape: 'Activity', type: 'Bpmn',\n            activity: {\n                activity: 'SubProcess', subProcess: {\n                    type: 'Transaction', collapsed: false,\n                    processes: [], transaction: {\n                        cancel: { visible: false }, failure: { visible: false }, success: { visible: false }\n                    }\n                }\n            }\n        }\n    },\n];\n//Initializes the context menu for shapes.\nlet contextMenu = {\n    show: true, items: [\n        {\n            text: 'Ad-Hoc', id: 'Adhoc',\n            items: [{ text: 'None', iconCss: 'e-adhocs e-bpmn-event e-bpmn-icons e-None', id: 'AdhocNone' },\n                { iconCss: 'e-adhocs e-bpmn-icons e-adhoc', text: 'Ad-Hoc', id: 'AdhocAdhoc' }]\n        }, {\n            text: 'Loop', id: 'Loop',\n            items: [{ text: 'None', iconCss: 'e-loop e-bpmn-icons e-None', id: 'LoopNone' },\n                { text: 'Standard', iconCss: 'e-loop e-bpmn-icons e-Loop', id: 'Standard' },\n                { text: 'Parallel Multi-Instance', iconCss: 'e-loop e-bpmn-icons e-ParallelMI', id: 'ParallelMultiInstance' },\n                { text: 'Sequence Multi-Instance', iconCss: 'e-loop e-bpmn-icons e-SequentialMI', id: 'SequenceMultiInstance' }]\n        }, {\n            text: 'Compensation', id: 'taskCompensation',\n            items: [{ text: 'None', iconCss: 'e-compensation e-bpmn-icons e-None', id: 'CompensationNone' },\n                { iconCss: 'e-compensation e-bpmn-icons e-Compensation', text: 'Compensation', id: 'CompensationCompensation' }]\n        }, {\n            text: 'Activity-Type', id: 'Activity-Type',\n            items: [{ text: 'Collapsed sub-process', iconCss: 'e-bpmn-icons e-SubProcess', id: 'CollapsedSubProcess' },\n                { iconCss: 'e-bpmn-icons e-Task', text: 'Expanded sub-process', id: 'ExpandedSubProcess' }]\n        }, {\n            text: 'Boundry', id: 'Boundry',\n            items: [{ text: 'Default', iconCss: 'e-boundry e-bpmn-icons e-Default', id: 'Default' },\n                { text: 'Call', iconCss: 'e-boundry e-bpmn-icons e-Call', id: 'BoundryCall' },\n                { text: 'Event', iconCss: 'e-boundry e-bpmn-icons e-Event', id: 'BoundryEvent' }]\n        }, {\n            text: 'Data Object', id: 'DataObject',\n            items: [{ text: 'None', iconCss: 'e-data e-bpmn-icons e-None', id: 'DataObjectNone' },\n                { text: 'Input', iconCss: 'e-data e-bpmn-icons e-DataInput', id: 'Input' },\n                { text: 'Output', iconCss: 'e-data e-bpmn-icons e-DataOutput', id: 'Output' }]\n        }, {\n            text: 'Collection', id: 'collection',\n            items: [{ text: 'None', iconCss: 'e-collection e-bpmn-icons e-None', id: 'collectionNone' },\n                { text: 'Collection', iconCss: 'e-collection e-bpmn-icons e-ParallelMI', id: 'Collectioncollection' }]\n        }, {\n            text: 'Call', id: 'DeftCall',\n            items: [{ text: 'None', iconCss: 'e-call e-bpmn-icons e-None', id: 'CallNone' },\n                { text: 'Call', iconCss: 'e-call e-bpmn-icons e-CallActivity', id: 'CallCall' }]\n        }, {\n            text: 'Trigger Result', id: 'TriggerResult',\n            items: [{ text: 'None', id: 'TriggerNone', iconCss: 'e-trigger e-bpmn-icons e-None' },\n                { text: 'Message', id: 'Message', iconCss: 'e-trigger e-bpmn-icons e-InMessage' },\n                { text: 'Multiple', id: 'Multiple', iconCss: 'e-trigger e-bpmn-icons e-InMultiple' },\n                { text: 'Parallel', id: 'Parallel', iconCss: 'e-trigger e-bpmn-icons e-InParallelMultiple' },\n                { text: 'Signal', id: 'Signal', iconCss: 'e-trigger e-bpmn-icons e-InSignal' },\n                { text: 'Timer', id: 'Timer', iconCss: 'e-trigger e-bpmn-icons e-InTimer' },\n                { text: 'Cancel', id: 'Cancel', iconCss: 'e-trigger e-bpmn-icons e-CancelEnd' },\n                { text: 'Escalation', id: 'Escalation', iconCss: 'e-trigger e-bpmn-icons e-InEscalation' },\n                { text: 'Error', id: 'Error', iconCss: 'e-trigger e-bpmn-icons e-InError' },\n                { text: 'Compensation', id: 'triggerCompensation', iconCss: 'e-trigger e-bpmn-icons e-InCompensation' },\n                { text: 'Terminate', id: 'Terminate', iconCss: 'e-trigger e-bpmn-icons e-TerminateEnd' },\n                { text: 'Conditional', id: 'Conditional', iconCss: 'e-trigger e-bpmn-icons e-InConditional' },\n                { text: 'Link', id: 'Link', iconCss: 'e-trigger e-bpmn-icons e-ThrowLinkin' }\n            ]\n        },\n        {\n            text: 'Event Type', id: 'EventType',\n            items: [{ text: 'Start', id: 'Start', iconCss: 'e-event e-bpmn-icons e-NoneStart', },\n                { text: 'Intermediate', id: 'Intermediate', iconCss: 'e-event e-bpmn-icons e-InterruptingNone' },\n                { text: 'NonInterruptingStart', id: 'NonInterruptingStart', iconCss: 'e-event e-bpmn-icons e-Noninterruptingstart' },\n                { text: 'ThrowingIntermediate', id: 'ThrowingIntermediate', iconCss: 'e-event e-bpmn-icons e-ThrowingIntermediate' },\n                {\n                    text: 'NonInterruptingIntermediate', id: 'NonInterruptingIntermediate',\n                    iconCss: 'e-event e-bpmn-icons e-NoninterruptingIntermediate'\n                },\n                { text: 'End', id: 'End', iconCss: 'e-event e-bpmn-icons e-NoneEnd' }]\n        }, {\n            text: 'Task Type', id: 'TaskType',\n            items: [\n                { text: 'None', id: 'TaskNone', iconCss: 'e-task e-bpmn-icons e-None' },\n                { text: 'Service', id: 'Service', iconCss: 'e-task e-bpmn-icons e-ServiceTask' },\n                { text: 'BusinessRule', id: 'BusinessRule', iconCss: 'e-task e-bpmn-icons e-BusinessRule' },\n                { text: 'InstantiatingReceive', id: 'InstantiatingReceive', iconCss: 'e-task e-bpmn-icons e-InstantiatingReceive' },\n                { text: 'Manual', id: 'Manual', iconCss: 'e-task e-bpmn-icons e-ManualCall' },\n                { text: 'Receive', id: 'Receive', iconCss: 'e-task e-bpmn-icons e-InMessage' },\n                { text: 'Script', id: 'Script', iconCss: 'e-task e-bpmn-icons e-ScriptCall' },\n                { text: 'Send', id: 'Send', iconCss: 'e-task e-bpmn-icons e-OutMessage' },\n                { text: 'User', id: 'User', iconCss: 'e-task e-bpmn-icons e-UserCall' },\n            ]\n        }, {\n            text: 'GateWay', id: 'GateWay',\n            iconCss: 'e-bpmn-icons e-Gateway', items: [\n                { text: 'None', id: 'GatewayNone', iconCss: 'e-gate e-bpmn-icons e-None' },\n                { text: 'Exclusive', iconCss: 'e-gate e-bpmn-icons e-ExclusiveGatewayWithMarker', id: 'Exclusive' },\n                { text: 'Inclusive', iconCss: 'e-gate e-bpmn-icons e-InclusiveGateway', id: 'Inclusive' },\n                { text: 'Parallel', iconCss: 'e-gate e-bpmn-icons e-ParallelGateway', id: 'GatewayParallel' },\n                { text: 'Complex', iconCss: 'e-gate e-bpmn-icons e-ComplexGateway', id: 'Complex' },\n                { text: 'EventBased', iconCss: 'e-gate e-bpmn-icons e-EventBasedGateway', id: 'EventBased' },\n                { text: 'ExclusiveEventBased', iconCss: 'e-gate e-bpmn-icons e-ExclusiveEventBased', id: 'ExclusiveEventBased' },\n                { text: 'ParallelEventBased', iconCss: 'e-gate e-bpmn-icons e-ParallelEventBasedGatewaytostart', id: 'ParallelEventBased' }\n            ]\n        },\n    ],\n    showCustomMenuOnly: true,\n};\n// Define a variable to hold an instance of the DiagramComponent\nlet diagramInstance;\n// Define the function BpmnEditor\nfunction BpmnEditor() {\n    function rendereComplete() {\n        addEvents();\n        diagramInstance.fitToPage();\n    }\n    let isMobile;\n    //Enhances webpage functionality for mobile devices with a click event listener.\n    function addEvents() {\n        isMobile = window.matchMedia('(max-width:550px)').matches;\n        if (isMobile) {\n            let paletteIcon = paletteIconInstance;\n            if (paletteIcon) {\n                paletteIcon.addEventListener('click', openPalette, false);\n            }\n        }\n    }\n    // Manages the visibility state of the palette space on the webpage for mobile devices.\n    function openPalette() {\n        let paletteSpace = paletteSpaceInstance;\n        isMobile = window.matchMedia('(max-width:550px)').matches;\n        if (isMobile) {\n            if (!paletteSpace.classList.contains('sb-mobile-palette-open')) {\n                paletteSpace.classList.add('sb-mobile-palette-open');\n            }\n            else {\n                paletteSpace.classList.remove('sb-mobile-palette-open');\n            }\n        }\n    }\n    // Define the function getConnectors\n    function getConnectors() {\n        //Initializes the Connector shapes for the symbol pallete.\n        let connectorSymbols = [\n            {\n                id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n                targetDecorator: { shape: 'Arrow', style: { strokeColor: '#757575', fill: '#757575' } }, style: { strokeWidth: 2, strokeColor: '#757575' }\n            },\n            {\n                id: 'Link2', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n                targetDecorator: { shape: 'Arrow', style: { strokeColor: '#757575', fill: '#757575' } }, style: { strokeWidth: 2, strokeDashArray: '4 4', strokeColor: '#757575' }\n            },\n            {\n                id: 'Link3', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n                targetDecorator: { shape: 'Arrow', style: { strokeColor: '#757575', fill: '#757575' } }, style: { strokeWidth: 2, strokeColor: '#757575' }\n            },\n            {\n                id: 'link4', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 }, type: 'Orthogonal',\n                targetDecorator: { style: { strokeColor: '#757575', fill: '#757575' } },\n                shape: {\n                    type: 'Bpmn',\n                    flow: 'Association',\n                    association: 'Directional'\n                }, style: {\n                    strokeDashArray: '2,2', strokeColor: '#757575'\n                },\n            },\n        ];\n        return connectorSymbols;\n    }\n    //function context menu click\n    function contextMenuClick(args) {\n        diagram = diagramInstance;\n        if (diagram.selectedItems.nodes.length > 0) {\n            let bpmnShape = diagram.selectedItems.nodes[0].shape;\n            if (args.item.iconCss.indexOf('e-adhocs') > -1) {\n                bpmnShape.activity.subProcess.adhoc = args.item.id === 'AdhocNone' ? false : true;\n            }\n            if (args.item.iconCss.indexOf('e-event') > -1) {\n                bpmnShape.event.event = args.item.id;\n            }\n            if (args.item.iconCss.indexOf('e-trigger') > -1) {\n                bpmnShape.event.trigger = args.item.text;\n            }\n            if (args.item.iconCss.indexOf('e-loop') > -1) {\n                let loop = (args.item.id === 'LoopNone') ? 'None' : args.item.id;\n                if (bpmnShape.activity.activity === 'Task') {\n                    bpmnShape.activity.task.loop = loop;\n                }\n                if (bpmnShape.activity.activity === 'SubProcess') {\n                    bpmnShape.activity.subProcess.loop = loop;\n                }\n            }\n            if (args.item.iconCss.indexOf('e-compensation') > -1) {\n                let compensation = (args.item.id === 'CompensationNone') ? false : true;\n                if (bpmnShape.activity.activity === 'Task') {\n                    bpmnShape.activity.task.compensation = compensation;\n                }\n                if (bpmnShape.activity.activity === 'SubProcess') {\n                    bpmnShape.activity.subProcess.compensation = compensation;\n                }\n            }\n            if (args.item.iconCss.indexOf('e-call') > -1) {\n                let compensation = (args.item.id === 'CallNone') ? false : true;\n                if (bpmnShape.activity.activity === 'Task') {\n                    bpmnShape.activity.task.call = compensation;\n                }\n            }\n            if (args.item.id === 'CollapsedSubProcess' || args.item.id === 'ExpandedSubProcess') {\n                if (args.item.id === 'ExpandedSubProcess') {\n                    bpmnShape.activity.activity = 'SubProcess';\n                    bpmnShape.activity.subProcess.collapsed = false;\n                }\n                else {\n                    bpmnShape.activity.activity = 'SubProcess';\n                    bpmnShape.activity.subProcess.collapsed = true;\n                }\n            }\n            if (args.item.iconCss.indexOf('e-boundry') > -1) {\n                let call = args.item.id;\n                if (args.item.id !== 'Default') {\n                    call = (args.item.id === 'BoundryEvent') ? 'Event' : 'Call';\n                }\n                bpmnShape.activity.subProcess.boundary = call;\n            }\n            if (args.item.iconCss.indexOf('e-data') > -1) {\n                let call = args.item.id === 'DataObjectNone' ? 'None' : args.item.id;\n                bpmnShape.dataObject.type = call;\n            }\n            if (args.item.iconCss.indexOf('e-collection') > -1) {\n                let call = (args.item.id === 'Collectioncollection') ? true : false;\n                bpmnShape.dataObject.collection = call;\n            }\n            if (args.item.iconCss.indexOf('e-task') > -1) {\n                let task = args.item.id === 'TaskNone' ? 'None' : args.item.id;\n                if (bpmnShape.activity.activity === 'Task') {\n                    bpmnShape.activity.task.type = task;\n                }\n            }\n            if (args.item.iconCss.indexOf('e-gate') > -1) {\n                let task = args.item.id.replace('Gateway', '');\n                if (bpmnShape.shape === 'Gateway') {\n                    bpmnShape.gateway.type = task;\n                }\n            }\n            diagram.dataBind();\n        }\n    }\n    // Define a function to handle opening the context menu\n    function contextMenuOpen(args) {\n        diagram = diagramInstance;\n        let hiddenId = [];\n        if (args.element.className !== 'e-menu-parent e-ul ') {\n            hiddenId = ['Adhoc', 'Loop', 'taskCompensation', 'Activity-Type', 'Boundry', 'DataObject',\n                'collection', 'DeftCall', 'TriggerResult', 'EventType', 'TaskType', 'GateWay'];\n        }\n        // Check if nodes are selected\n        if (diagram.selectedItems.nodes.length) {\n            for (let item of args.items) {\n                let bpmnShape = diagram.selectedItems.nodes[0].shape;\n                if (bpmnShape.shape !== 'DataObject' && bpmnShape.shape !== 'Gateway') {\n                    if (item.text === 'Ad-Hoc') {\n                        if (bpmnShape.activity.activity === 'SubProcess') {\n                            hiddenId.splice(hiddenId.indexOf(item.id), 1);\n                        }\n                    }\n                    if (item.text === 'Loop' || item.text === 'Compensation' || item.text === 'Activity-Type') {\n                        if (bpmnShape.shape === 'Activity') {\n                            hiddenId.splice(hiddenId.indexOf(item.id), 1);\n                        }\n                    }\n                    if (item.text === 'Boundry') {\n                        if (bpmnShape.activity.activity === 'SubProcess') {\n                            hiddenId.splice(hiddenId.indexOf(item.id), 1);\n                        }\n                    }\n                }\n                if (item.text === 'Data Object') {\n                    if (bpmnShape.shape === 'DataObject') {\n                        hiddenId.splice(hiddenId.indexOf(item.id), 1);\n                    }\n                }\n                if (item.text === 'Collection') {\n                    if (bpmnShape.shape === 'DataObject') {\n                        hiddenId.splice(hiddenId.indexOf(item.id), 1);\n                    }\n                }\n                if (item.text === 'Call') {\n                    if (bpmnShape.shape === 'Activity' && bpmnShape.activity.activity === 'Task') {\n                        hiddenId.splice(hiddenId.indexOf(item.id), 1);\n                    }\n                }\n                if (item.text === 'Trigger Result') {\n                    if ((bpmnShape.shape === 'Event')) {\n                        hiddenId.splice(hiddenId.indexOf(item.id), 1);\n                    }\n                }\n                if (item.text === 'Event Type') {\n                    if ((bpmnShape.shape === 'Event')) {\n                        hiddenId.splice(hiddenId.indexOf(item.id), 1);\n                    }\n                }\n                if (item.text === 'Task Type') {\n                    if ((bpmnShape.shape === 'Activity')\n                        && (bpmnShape.activity.activity === 'Task')) {\n                        hiddenId.splice(hiddenId.indexOf(item.id), 1);\n                    }\n                }\n                if (item.text === 'GateWay') {\n                    if ((bpmnShape.shape === 'Gateway')) {\n                        hiddenId.splice(hiddenId.indexOf(item.id), 1);\n                    }\n                }\n                if (args.parentItem && args.parentItem.id === 'TriggerResult' && bpmnShape.shape === 'Event') {\n                    if (item.text !== 'None' && (item.text === bpmnShape.event.event || item.text === bpmnShape.event.trigger)) {\n                        hiddenId.push(item.id);\n                    }\n                    if (bpmnShape.event.event === 'Start') {\n                        if (item.text === 'Cancel' || item.text === 'Terminate' || item.text === 'Link') {\n                            hiddenId.push(item.id);\n                        }\n                    }\n                    if (bpmnShape.event.event === 'NonInterruptingStart' || item.text === 'Link') {\n                        if (item.text === 'Cancel' || item.text === 'Terminate' || item.text === 'Compensation' ||\n                            item.text === 'Error' || item.text === 'None') {\n                            hiddenId.push(item.id);\n                        }\n                    }\n                    if (bpmnShape.event.event === 'Intermediate') {\n                        if (item.text === 'Terminate') {\n                            hiddenId.push(item.id);\n                        }\n                    }\n                    if (bpmnShape.event.event === 'NonInterruptingIntermediate') {\n                        if (item.text === 'Cancel' || item.text === 'Terminate' || item.text === 'Compensation' ||\n                            item.text === 'Error' || item.text === 'None' || item.text === 'Link') {\n                            hiddenId.push(item.id);\n                        }\n                    }\n                    if (bpmnShape.event.event === 'ThrowingIntermediate') {\n                        if (item.text === 'Cancel' || item.text === 'Terminate' || item.text === 'Timer' || item.text === 'Error' ||\n                            item.text === 'None' || item.text === 'Pareller' || item.text === 'Conditional') {\n                            hiddenId.push(item.id);\n                        }\n                    }\n                    if (bpmnShape.event.event === 'End') {\n                        if (item.text === 'Parallel' || item.text === 'Timer' || item.text === 'Conditional' || item.text === 'Link') {\n                            hiddenId.push(item.id);\n                        }\n                    }\n                }\n                if (args.parentItem && args.parentItem.id === 'EventType' && bpmnShape.shape === 'Event') {\n                    if (item.text === bpmnShape.event.event) {\n                        hiddenId.push(item.id);\n                    }\n                }\n            }\n        }\n        args.hiddenItems = hiddenId;\n    }\n    return (<div className=\"control-pane\">\n            <div className=\"control-section\">\n                <div className=\"sb-mobile-palette-bar\">\n                    <div id=\"palette-icon\" ref={(paletteIcon) => (paletteIconInstance = paletteIcon)} style={{ float: \"right\" }} className=\"e-ddb-icons1 e-toggle-palette\"></div>\n                </div>\n                <div id=\"palette-space\" ref={(paletteSpace) => (paletteSpaceInstance = paletteSpace)} className=\"sb-mobile-palette\">\n                    <SymbolPaletteComponent \n    //Sets the default values of a Symbol Palette Component \n    id=\"symbolpalette\" expandMode=\"Multiple\" \n    // Palette configurations for BPMN shapes and connectors\n    palettes={[\n            {\n                id: \"Bpmn\",\n                expanded: true,\n                symbols: bpmnShapes,\n                iconCss: \"e-diagram-icons1 e-diagram-Bpmn\",\n                title: \"Bpmn Shapes\"\n            },\n            {\n                id: \"connectors\",\n                expanded: true,\n                symbols: getConnectors(),\n                iconCss: \"e-diagram-icons1 e-diagram-connector\",\n                title: \"Connectors\"\n            }\n        ]} width={\"100%\"} height={\"471px\"} symbolHeight={60} symbolWidth={60} symbolMargin={{ left: 15, right: 15, top: 15, bottom: 15 }} getNodeDefaults={(symbol) => {\n            symbol.style.strokeColor = '#757575';\n        }} getSymbolInfo={(symbol) => {\n            return { fit: true };\n        }}>\n                        <Inject services={[BpmnDiagrams, UndoRedo, DiagramContextMenu, DataBinding]}/>\n                    </SymbolPaletteComponent>\n                </div>\n\n                <div id=\"diagram-space\" className=\"sb-mobile-diagram sb-bpmn-editor\">\n                    {/* Initialize a Diagram component */}\n                    <DiagramComponent id=\"diagram\" ref={diagram => (diagramInstance = diagram)} width={\"100%\"} height={\"445px\"} snapSettings={{ constraints: 0 }} nodes={nodes} connectors={connectors} \n    //Sets the default values of a node\n    contextMenuSettings={contextMenu} contextMenuOpen={contextMenuOpen} contextMenuClick={contextMenuClick} dragEnter={(args) => {\n            let node = args.element;\n            if (node instanceof Node) {\n                if (!node.shape.activity.subProcess.collapsed) {\n                    node.shape.activity.subProcess.transaction.cancel.visible = true;\n                    node.shape.activity.subProcess.transaction.failure.visible = true;\n                    node.shape.activity.subProcess.transaction.success.visible = true;\n                }\n                else {\n                    let ratio = 100 / node.width;\n                    let oldWidth = node.width;\n                    let oldHeight = node.height;\n                    node.width = 100;\n                    node.height *= ratio;\n                    node.offsetX += (node.width - oldWidth) / 2;\n                    node.offsetY += (node.height - oldHeight) / 2;\n                }\n            }\n        }}>\n                        <Inject services={[BpmnDiagrams, UndoRedo, DiagramContextMenu, DataBinding]}/>\n                    </DiagramComponent>\n                </div>\n            </div>\n        </div>);\n}\nexport default BpmnEditor;"
    }
  ]
}