{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "diagram-local-data",
  "framework": "vue",
  "type": "registry:component",
  "component": "Diagram",
  "variant": "local-data",
  "dependencies": [
    "@syncfusion/ej2-vue-diagrams"
  ],
  "description": "Diagram renders a species hierarchy from local data using a tree layout.",
  "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/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/diagram-local-data.md"
  },
  "files": [
    {
      "target": "src/components/diagram-local-data/Diagram.vue",
      "content": "<template>\n  <!-- Diagram and Symbol Palette sections -->\n  <div class=\"control-section diagram-bpmn\">\n    <div style=\"width:100%;height:445px\">\n      <div class=\"sb-mobile-palette-bar\">\n        <div id=\"palette-icon-default\" ref=\"paletteIcon\" role=\"button\" class=\"e-ddb-icons1 e-toggle-palette\"></div>\n      </div>\n      <!-- Symbol Palette component -->\n      <div id=\"palette-space\" class=\"sb-mobile-palette\" style=\"width:240px;height:445px; float:left\" ref=\"paletteSpace\">\n        <ejs-symbolpalette id=\"symbolpalette-bpmn\" :expandMode='expandMode' :palettes='palettes' :width='palettewidth'\n          :height='paletteheight' :getSymbolInfo='getSymbolInfo' :symbolMargin='symbolMargin'\n          :symbolHeight='symbolHeight' :symbolWidth='symbolWidth'\n          :getNodeDefaults='palettegetNodeDefaults'></ejs-symbolpalette>\n      </div>\n\n      <!-- Diagram component -->\n      <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;\n            border-style: solid; border-left: none;\">\n        <ejs-diagram style='display:block' ref=\"diagramObject\" id=\"diagram\" :mode='mode' :width='width' :height='height'\n          :nodes='nodes' :connectors='connectors' :dragEnter='dragEnter' :snapSettings='snapSettings'\n          :contextMenuSettings='contextMenuSettings' :contextMenuOpen='contextMenuOpen'\n          :contextMenuClick='contextMenuClick'></ejs-diagram>\n      </div>\n    </div>\n\n    <!-- Descriptions for the Action and the Diagram -->\n  </div>\n</template>\n\n<script>\n\n// Import necessary components and modules\nimport {\n  DiagramComponent,\n  UndoRedo,\n  SymbolPaletteComponent,\n  NodeConstraints,\n  SnapConstraints,\n  BpmnDiagrams,\n  DiagramContextMenu,\n  DataBinding,\n} from \"@syncfusion/ej2-vue-diagrams\";\n\nlet diagram;\nlet paletteSpace;\nlet paletteIcon;\n// Function to initialize a node\nfunction createNode(id, width, height, offsetX, offsetY,\n  shape, annotations = [], margin = {}, style = {}, constraints = NodeConstraints.Default) {\n  return {\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};\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,\n    {\n      shape: 'Activity', type: 'Bpmn', activity: {\n        activity: 'SubProcess',\n        subProcess: {\n          type: 'Transaction', collapsed: false, processes: ['processesStart', 'service', 'compensation',\n            'error', 'processesTask', 'processesEnd', 'user', 'subProcessesEnd']\n        }\n      }\n    }, [], {}, {}, NodeConstraints.Default | NodeConstraints.AllowDrop\n  ),\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  },\n    [{ id: 'serviceLabel2', content: 'Book hotel', style: { color: 'white' }, offset: { x: 0.5, y: 0.6 } }],\n    { left: 110, top: 20 }, { fill: '#6FAAB0' }\n  ),\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  },\n    [{ id: 'serviceLabel2', content: 'Charge credit card', style: { color: 'white' }, offset: { x: 0.5, y: 0.7 } }],\n    { left: 290, top: 20 }, { fill: '#F6B53F' }\n  ),\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  },\n    [{ id: 'serviceLabel2', content: 'Cancel hotel reservation', style: { color: 'white' }, offset: { x: 0.5, y: 0.6 } }],\n    { left: 30, top: 160 }, { fill: '#E94649' }\n  ),\n  createNode('subProcessesEnd', 30, 30, 0, 0, { type: 'Bpmn', shape: 'Event', event: { event: 'End' } }, [], { left: 440, top: 210 }),\n];\n\n\n// Function to create a connector\nfunction createConnector(id, sourceID, targetID, sourcePortID = \" \", targetPortID = \"\", type = \"Orthogonal\",\n  segments = [], annotations = [], shape = {}, style = {}) {\n  return {\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};\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',\n    [{ type: 'Orthogonal', length: 50, direction: 'Bottom' }],\n    [{ id: 'connector3Label2', content: 'Booking system failure', offset: 0.50, style: { fill: 'white' } }]\n  ),\n  createConnector('connector4', 'subProcess', 'cancelledEnd', 'cancel', \"\", 'Orthogonal',\n    [{ type: 'Orthogonal', length: 50, direction: 'Bottom' }]\n  ),\n  createConnector('connector5', 'processesStart', 'service', \"\", \"\", 'Orthogonal'),\n  createConnector('connector6', 'service', 'processesTask'),\n  createConnector('connector7', 'processesTask', 'processesEnd', \"\", \"\", 'Orthogonal'),\n  createConnector('connector8', 'compensation', 'user', \"\", \"\", 'Orthogonal',\n    [{ type: 'Orthogonal', length: 30, direction: 'Bottom' }, { type: 'Orthogonal', length: 80, direction: 'Left' }],\n    [], { type: 'Bpmn', flow: 'Association', association: 'Directional' }, { strokeDashArray: '2,2' }\n  ),\n  createConnector('connector9', 'error', 'subProcessesEnd', null, null, 'Orthogonal',\n    [{ type: 'Orthogonal', length: 50, direction: 'Bottom' }],\n    [{\n      id: 'connector9Label2', content: 'Cannot charge card', offset: 0.5,\n      style: { fill: 'white', color: 'black' }\n    }]\n  )\n];\n\n//Initializes the bpmn shapes for the symbol pallete.\nlet bpmnShapes = [\n  {\n    id: \"Start\",\n    width: 35,\n    height: 35,\n    shape: {\n      type: \"Bpmn\",\n      shape: \"Event\",\n      event: { event: \"Start\" }\n    }\n  },\n  {\n    id: \"NonInterruptingIntermediate\",\n    width: 35,\n    height: 35,\n    shape: {\n      type: \"Bpmn\",\n      shape: \"Event\",\n      event: { event: \"NonInterruptingIntermediate\" }\n    }\n  },\n  {\n    id: \"End\",\n    width: 35,\n    height: 35,\n    offsetX: 665,\n    offsetY: 230,\n    shape: {\n      type: \"Bpmn\",\n      shape: \"Event\",\n      event: { event: \"End\" }\n    }\n  },\n  {\n    id: \"Task\",\n    width: 35,\n    height: 35,\n    offsetX: 700,\n    offsetY: 700,\n    shape: {\n      type: \"Bpmn\",\n      shape: \"Activity\",\n      activity: {\n        activity: \"Task\"\n      }\n    }\n  },\n  {\n    id: \"Transaction\",\n    width: 35,\n    height: 35,\n    offsetX: 300,\n    offsetY: 100,\n    constraints: NodeConstraints.Default | NodeConstraints.AllowDrop,\n    shape: {\n      type: \"Bpmn\",\n      shape: \"Activity\",\n      activity: {\n        activity: \"SubProcess\",\n        subProcess: {\n          type: \"Transaction\",\n          transaction: {\n            cancel: { visible: false },\n            failure: { visible: false },\n            success: { visible: false }\n          }\n        }\n      }\n    }\n  },\n  {\n    id: \"Task_Service\",\n    width: 35,\n    height: 35,\n    offsetX: 700,\n    offsetY: 700,\n    shape: {\n      type: \"Bpmn\",\n      shape: \"Activity\",\n      activity: {\n        activity: \"Task\",\n        task: { type: \"Service\" }\n      }\n    }\n  },\n  {\n    id: \"Gateway\",\n    width: 35,\n    height: 35,\n    offsetX: 100,\n    offsetY: 100,\n    shape: {\n      type: \"Bpmn\",\n      shape: \"Gateway\",\n      gateway: { type: \"Exclusive\" }\n    }\n  },\n  {\n    id: \"DataObject\",\n    width: 35,\n    height: 35,\n    offsetX: 500,\n    offsetY: 100,\n    shape: {\n      type: \"Bpmn\",\n      shape: \"DataObject\",\n      dataObject: { collection: false, type: \"None\" }\n    }\n  },\n  {\n    id: \"subProcess\",\n    width: 520,\n    height: 250,\n    offsetX: 355,\n    offsetY: 230,\n    constraints: NodeConstraints.Default | NodeConstraints.AllowDrop,\n    shape: {\n      shape: \"Activity\",\n      type: \"Bpmn\",\n      activity: {\n        activity: \"SubProcess\",\n        subProcess: {\n          type: \"Transaction\",\n          collapsed: false,\n          processes: [],\n          transaction: {\n            cancel: { visible: false },\n            failure: { visible: false },\n            success: { visible: false }\n          }\n        }\n      }\n    }\n  }\n];\n\n//Initializes the context menu for shapes.\nlet contextMenu = {\n  show: true,\n  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\n//  Export the default object for Vue component\nexport default {\n  components: {\n    'ejs-diagram': DiagramComponent,\n    'ejs-symbolpalette': SymbolPaletteComponent\n  },\n  data: function () {\n    return {\n      width: \"100%\",\n      height: \"100%\",\n      mode: \"SVG\",\n      nodes: nodes,\n      connectors: connectors,\n      snapSettings: { constraints: SnapConstraints.None },\n      contextMenuSettings: contextMenu,\n      // tslint:disable-next-line:max-func-body-length\n      contextMenuOpen: contextMenuOpen,\n      // tslint:disable-next-line:max-func-body-length\n      contextMenuClick: contextMenuClick,\n\n      // Function to handle drag enter from palette to diagram\n      dragEnter: (args) => {\n        let node = args.element;\n        if (node instanceof Node) {\n          if (node && node.shape && (node.shape).activity && (node.shape).activity.subProcess) {\n            let activity = (node.shape).activity;\n            if (activity && activity.subProcess && !activity.subProcess.collapsed) {\n              if (activity.subProcess.transaction) {\n                if (activity.subProcess.transaction.cancel) {\n                  activity.subProcess.transaction.cancel.visible = true;\n                }\n                if (activity.subProcess.transaction.failure) {\n                  activity.subProcess.transaction.failure.visible = true;\n                }\n                if (activity.subProcess.transaction.success) {\n                  activity.subProcess.transaction.success.visible = true;\n                }\n              }\n            } else {\n              if (node) {\n                let objectWidth = (node.width) || 0;\n                let objectHeight = (node.height) || 0;\n\n                node.width = 100;\n                node.offsetX = node.offsetX || 0;\n                node.offsetY = node.offsetY || 0;\n                node.height = node.height || 0;\n                node.height *= (100 / (node.width) || 1);\n                node.offsetX += (node.width - objectWidth) / 2;\n                node.offsetY += (node.height - objectHeight) / 2;\n              }\n            }\n          }\n        }\n      },\n      expandMode: \"Multiple\",\n      palettes: [\n        {\n          id: \"bpmn\",\n          expanded: true,\n          symbols: bpmnShapes,\n          iconCss: \"shapes\",\n          title: \"Bpmn Shapes\"\n        },\n        {\n          id: \"connectors\",\n          expanded: true,\n          symbols: getConnectors(),\n          iconCss: \"shapes\",\n          title: \"Connectors\"\n        }\n      ],\n      palettewidth: \"235px\",\n      paletteheight: \"445px\",\n      palettegetNodeDefaults: (symbol) => {\n        symbol.style = { strokeColor: \"#757575\" }\n      },\n      symbolHeight: 60,\n      symbolWidth: 60,\n      symbolMargin: { left: 15, right: 15, top: 15, bottom: 15 },\n      getSymbolInfo: (symbol) => {\n        return { fit: true };\n      }\n    };\n  },\n  provide: {\n    diagram: [BpmnDiagrams, UndoRedo, DiagramContextMenu, DataBinding],\n    SymbolPalette: [BpmnDiagrams, DataBinding],\n\n\n  }, mounted: function () {\n    diagram = this.$refs.diagramObject.ej2Instances;\n    paletteIcon = this.$refs.paletteIcon;\n    paletteSpace = this.$refs.paletteSpace;\n    diagram.fitToPage();\n    addEvents();\n  }\n}\n//Functon to Initializes the Connector shapes for the symbol pallete.\nfunction getConnectors() {\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\", type: \"Orthogonal\", sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },\n      targetDecorator: { style: { strokeColor: \"#757575\", fill: \"#757575\" } },\n      shape: { type: \"Bpmn\", flow: \"Association\", association: \"Directional\" }, style: { strokeDashArray: \"2,2\", strokeColor: \"#757575\", fill: \"#757575\" }\n    }\n  ];\n  return connectorSymbols;\n}\n\n//function context menu click\nfunction contextMenuClick(args) {\n  if (diagram && diagram.selectedItems && diagram.selectedItems.nodes && diagram.selectedItems.nodes.length > 0) {\n    let bpmnShape = diagram.selectedItems.nodes[0].shape;\n    if (args.item.iconCss) {\n        if (args.item.iconCss.indexOf('e-adhocs') > -1 && bpmnShape.activity && bpmnShape.activity.subProcess) {\n          bpmnShape.activity.subProcess.adhoc = args.item.id === 'AdhocNone' ? false : true;\n        }\n        if (args.item.iconCss.indexOf('e-event') > -1 && bpmnShape.event) {\n          bpmnShape.event.event = (args.item.id);\n        }\n\n        if (args.item.iconCss.indexOf('e-trigger') > -1) {\n\n          let trigger = args.item.id;\n          trigger = (args.item.id === 'TriggerNone') ? 'None' :\n            (args.item.id === 'triggerCompensation') ? 'Compensation' : args.item.id;\n          if (bpmnShape.event) {\n            bpmnShape.event.trigger = (args.item.text);\n          }\n        }\n        if (bpmnShape.activity) {\n          if (args.item.iconCss.indexOf('e-loop') > -1) {\n            let loop = (args.item.id === 'LoopNone') ? 'None' : args.item.id;\n\n            if (bpmnShape.activity.activity === 'Task' && bpmnShape.activity.task) {\n              bpmnShape.activity.task.loop = loop;\n            }\n            if (bpmnShape.activity.activity === 'SubProcess' && bpmnShape.activity.subProcess) {\n              bpmnShape.activity.subProcess.loop = loop;\n            }\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' && bpmnShape.activity.task) {\n              bpmnShape.activity.task.compensation = compensation;\n            }\n            if (bpmnShape.activity.activity === 'SubProcess' && bpmnShape.activity.subProcess) {\n              bpmnShape.activity.subProcess.compensation = compensation;\n\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' && bpmnShape.activity.task) {\n              bpmnShape.activity.task.call = compensation;\n            }\n          }\n\n          if (args.item.iconCss.indexOf('e-boundry') > -1 && bpmnShape.activity.subProcess) {\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-task') > -1) {\n            let task = args.item.id;\n            if (task === 'TaskNone') { task = 'None'; }\n            if (bpmnShape.activity.activity === 'Task' && bpmnShape.activity.task) {\n              bpmnShape.activity.task.type = task;\n            }\n          }\n        }\n        if (args.item.iconCss.indexOf('e-data') > -1 && bpmnShape.dataObject) {\n          let call = args.item.id;\n          if (args.item.id === 'DataObjectNone') {\n            call = 'None';\n          }\n          bpmnShape.dataObject.type = call;\n        }\n        if (args.item.iconCss.indexOf('e-collection') > -1 && bpmnShape.dataObject) {\n          let call = (args.item.id === 'Collectioncollection') ? true : false;\n          bpmnShape.dataObject.collection = call;\n        }\n\n        if (args.item.iconCss.indexOf('e-gate') > -1 && bpmnShape.gateway) {\n          let task = args.item.id;\n          if (task === 'GateWayNone') { task = 'None'; }\n          if (task === 'GatewayParallel') { task = 'Parallel'; }\n          if (bpmnShape.shape === 'Gateway') {\n            bpmnShape.gateway.type = task;\n          }\n        }\n      }\n      if ((args.item.id === 'CollapsedSubProcess' || args.item.id === 'ExpandedSubProcess') && bpmnShape.activity.subProcess) {\n        if (args.item.id === 'ExpandedSubProcess') {\n          bpmnShape.activity.activity = 'SubProcess';\n          bpmnShape.activity.subProcess.collapsed = false;\n        } else {\n          bpmnShape.activity.activity = 'SubProcess';\n          bpmnShape.activity.subProcess.collapsed = true;\n        }\n      }\n    diagram.dataBind();\n  }\n}\n\n// Define a function to handle opening the context menu\nfunction contextMenuOpen(args) {\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  }\n  for (let item of args.items) {\n    if (item && item.id && diagram && diagram.selectedItems && diagram.selectedItems.nodes && diagram.selectedItems.nodes.length > 0) {\n      let node = diagram.selectedItems.nodes[0].shape;\n      if (node.shape !== \"DataObject\" && node.shape !== \"Gateway\") {\n        if (item.text === \"Ad-Hoc\") {\n          if (node.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 ((diagram.selectedItems.nodes[0].shape).shape === \"DataObject\" ||\n            node.shape === \"Activity\" || (diagram.selectedItems.nodes[0].shape).shape === \"Gateway\") {\n            hiddenId.splice(hiddenId.indexOf(item.id), 1);\n          }\n        }\n        if (item.text === \"Boundry\") {\n          if (node.activity.activity === \"SubProcess\") {\n            hiddenId.splice(hiddenId.indexOf(item.id), 1);\n          }\n        }\n      }\n      if (item.text === \"Data Object\") {\n        if (node.shape === \"DataObject\") {\n          hiddenId.splice(hiddenId.indexOf(item.id), 1);\n        }\n      }\n      if (item.text === \"Collection\") {\n        if (node.shape === \"DataObject\") {\n          hiddenId.splice(hiddenId.indexOf(item.id), 1);\n        }\n      }\n      if (item.text === \"Call\") {\n        if ( node.shape === \"Activity\" && node.activity.activity === \"Task\" ) {\n          hiddenId.splice(hiddenId.indexOf(item.id), 1);\n        }\n      }\n      if (item.text === \"Trigger Result\") {\n        if (node.shape === \"Event\") {\n          hiddenId.splice(hiddenId.indexOf(item.id), 1);\n        }\n      }\n      if (item.text === \"Event Type\") {\n        if (node.shape === \"Event\") {\n          hiddenId.splice(hiddenId.indexOf(item.id), 1);\n        }\n      }\n      if (item.text === \"Task Type\") {\n        if ( node.shape === \"Activity\" && node.activity.activity === \"Task\" ) {\n          hiddenId.splice(hiddenId.indexOf(item.id), 1);\n        }\n      }\n      if (item.text === \"GateWay\") {\n        if (node.shape === \"Gateway\") {\n          hiddenId.splice(hiddenId.indexOf(item.id), 1);\n        }\n      }\n      if ( diagram.selectedItems.nodes.length > 0 && args.parentItem &&\n        args.parentItem.id === \"TriggerResult\" && node.shape === \"Event\" ) {\n        let shape = node;\n        if ( item.text !== \"None\" && (item.text === shape.event.event || item.text === shape.event.trigger) ) {\n          hiddenId.push(item.id);\n        }\n        if (shape.event.event === \"Start\") {\n          if ( item.text === \"Cancel\" || item.text === \"Terminate\" || item.text === \"Link\" ) {\n            hiddenId.push(item.id);\n          }\n        }\n        if ( shape.event.event === \"NonInterruptingStart\" || item.text === \"Link\" ) {\n          if ( item.text === \"Cancel\" || item.text === \"Terminate\" ||\n            item.text === \"Compensation\" || item.text === \"Error\" || item.text === \"None\" ) {\n            hiddenId.push(item.id);\n          }\n        }\n        if (shape.event.event === \"Intermediate\") {\n          if (item.text === \"Terminate\") {\n            hiddenId.push(item.id);\n          }\n        }\n        if (shape.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 (shape.event.event === \"ThrowingIntermediate\") {\n          if ( item.text === \"Cancel\" || item.text === \"Terminate\" || item.text === \"Timer\" ||\n            item.text === \"Error\" || item.text === \"None\" || item.text === \"Pareller\" || item.text === \"Conditional\" ) {\n            hiddenId.push(item.id);\n          }\n        }\n        if (shape.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 ( diagram.selectedItems.nodes.length > 0 && args.parentItem &&\n        args.parentItem.id === \"EventType\" && node.shape === \"Event\" ) {\n        if (item.text === node.event.event) {\n          hiddenId.push(item.id);\n        }\n      }\n    }\n  }\n  args.hiddenItems = hiddenId;\n}\n//Adds EventListener based on device's viewport width.\nfunction addEvents() {\n  var isMobile = window.matchMedia(\"(max-width:550px)\").matches;\n  if (isMobile) {\n    if (paletteIcon) {\n      paletteIcon.addEventListener(\"click\", openPalette, false);\n    }\n  }\n}\n\n//Toggles the visibility of the palette space on mobile devices when the palette icon is clicked.\nfunction openPalette() {\n  var 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    } else {\n      paletteSpace.classList.remove(\"sb-mobile-palette-open\");\n    }\n  }\n}\n</script>\n"
    },
    {
      "target": "src/components/diagram-local-data/DiagramView.vue",
      "content": "<template>\n  <Diagram />\n</template>\n\n<script setup>\nimport Diagram from '../../components/Diagram.vue'\n</script>"
    }
  ]
}