-{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/development/demos/diagram/line-routing/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"diagram\"></div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Getting started - Html Node\n */\nej.diagrams.Diagram.Inject(ej.diagrams.UndoRedo, ej.diagrams.LineRouting, ej.diagrams.ConnectorBridging);\nvar diagram;\n\n// tslint:disable-next-line:max-func-body-length\n\n \n var nodes = [\n {\n id: 'start', offsetX: 115, offsetY: 110, shape: { type: 'Flow', shape: 'Terminator' },\n ports: [{ id: 'port1', offset: { x: 0.5, y: 0 }, visibility: ej.diagrams.PortVisibility.Hidden }],\n style: { fill: '#D5535D' }, annotations: [{ content: 'Start', style: { color: 'white' } }]\n },\n {\n id: 'process', offsetX: 115, offsetY: 255, shape: { type: 'Flow', shape: 'Process' },\n style: { fill: '#65B091' }, annotations: [{ content: 'Process', style: { color: 'white' } }]\n },\n {\n id: 'document', offsetX: 115, offsetY: 400, shape: { type: 'Flow', shape: 'Document' },\n ports: [{ id: 'port1', offset: { x: 0, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Hidden }],\n annotations: [{ content: 'Document', style: { color: 'white' } }], style: { fill: '#5BA5F0' }\n },\n {\n id: 'decision', offsetX: 390, offsetY: 110, shape: { type: 'Flow', shape: 'Decision' },\n style: { fill: '#9A8AF7' }, annotations: [{ content: 'Decision', style: { color: 'white' } }]\n },\n {\n id: 'document2', offsetX: 390, offsetY: 255, shape: { type: 'Flow', shape: 'Document' },\n style: { fill: '#5BA5F0' }, annotations: [{ content: 'Document', style: { color: 'white' } }]\n },\n {\n id: 'end', offsetX: 390, offsetY: 400, shape: { type: 'Flow', shape: 'Terminator' },\n style: { fill: '#D5535D' }, annotations: [{ content: 'End', style: { color: 'white' } }]\n },\n {\n id: 'process2', offsetX: 640, offsetY: 110, shape: { type: 'Flow', shape: 'Process' },\n style: { fill: '#65B091' }, annotations: [{ content: 'Process', style: { color: 'white' } }]\n },\n {\n id: 'card', offsetX: 640, offsetY: 255,\n shape: { type: 'Flow', shape: 'Card' },\n style: { fill: '#76C3F0' },\n annotations: [{ content: 'Card', style: { color: 'white' } }],\n ports: [\n { id: 'port1', offset: { x: 1, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Hidden },\n { id: 'port2', offset: { x: 0.5, y: 1 }, visibility: ej.diagrams.PortVisibility.Hidden }\n ],\n }\n ];\n var connectors = [\n { id: 'Connector1', sourceID: 'start', targetID: 'process', },\n { id: 'Connector2', sourceID: 'process', targetID: 'document' },\n { id: 'Connector3', sourceID: 'document', targetID: 'end' },\n { id: 'Connector4', sourceID: 'start', targetID: 'decision' },\n { id: 'Connector5', sourceID: 'decision', targetID: 'process2' },\n { id: 'Connector6', sourceID: 'process2', targetID: 'card' },\n { id: 'Connector7', sourceID: 'process', targetID: 'document2' },\n { id: 'Connector8', sourceID: 'document2', targetID: 'card' },\n { id: 'Connector9', sourceID: 'start', sourcePortID: 'port1', targetID: 'card', targetPortID: 'port1' },\n { id: 'Connector10', sourceID: 'card', sourcePortID: 'port2', targetID: 'document', targetPortID: 'port1' }\n ];\n\n function getNodeDefaults(node) {\n node.height = 50;\n if(node.id === 'decision') {\n node.height = 70;\n }\n node.width = 120;\n node.style = { strokeColor: 'transparent' };\n return node;\n }\n\n function getConnectorDefaults(connector) {\n connector.type = 'Orthogonal';\n connector.style = { strokeColor: '#707070 ', strokeWidth: 1.25 };\n connector.targetDecorator = { style: { fill: '#707070 ', strokeColor: '#707070 ' } };\n return connector;\n }\n\n //initialize the diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: 600, nodes: nodes, connectors: connectors,\n constraints: ej.diagrams.DiagramConstraints.Default | (ej.diagrams.DiagramConstraints.Bridging | ej.diagrams.DiagramConstraints.LineRouting),\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n getNodeDefaults: getNodeDefaults,\n getConnectorDefaults: getConnectorDefaults,\n created: onCreated,\n });\n diagram.appendTo('#diagram');\n function onCreated() {\n diagram.fitToPage();\n }\n\n"}
0 commit comments