This repository was archived by the owner on Jul 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathdrawing-tool-plnkr.json
More file actions
1 lines (1 loc) · 39.4 KB
/
drawing-tool-plnkr.json
File metadata and controls
1 lines (1 loc) · 39.4 KB
1
{"index.css":"","systemjs.config.js":"System.config({\r\n transpiler: \"ts\",\r\n typescriptOptions: {\r\n target: \"es5\",\r\n module: \"commonjs\",\r\n moduleResolution: \"node\",\r\n emitDecoratorMetadata: true,\r\n experimentalDecorators: true,\r\n \"jsx\": \"react\"\r\n },\r\n meta: {\r\n 'typescript': {\r\n \"exports\": \"ts\"\r\n },\r\n '*.json': { loader: 'plugin-json' }\r\n },\r\n paths: {\r\n \"syncfusion:\": \"http://cdn.syncfusion.com/ej2/\"},\r\n map: {\r\n app: 'app',\r\n ts: \"https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js\",\r\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\r\n \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\r\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\r\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-splitbuttons\": \"syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\r\n \"@syncfusion/ej2-maps\": \"syncfusion:ej2-maps/dist/ej2-maps.umd.min.js\",\r\n \"@syncfusion/ej2-treemap\": \"syncfusion:ej2-treemap/dist/ej2-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\r\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\r\n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\r\n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\r\n \"@syncfusion/ej2-schedule\": \"syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\", \r\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\r\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\", \r\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\r\n \"@syncfusion/ej2-documenteditor\": \"syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-notifications\": \"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-richtexteditor\": \"syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js\",\r\n\t\t\"@syncfusion/ej2-svg-base\": \"syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js\",\r\n \"@syncfusion/ej2-pivotview\": \"syncfusion:ej2-pivotview/dist/ej2-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-heatmap\": \"syncfusion:ej2-heatmap/dist/ej2-heatmap.umd.min.js\",\r\n \"@syncfusion/ej2-react-base\": \"syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js\",\r\n \"@syncfusion/ej2-react-buttons\": \"syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-splitbuttons\": \"syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-charts\": \"syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js\",\r\n \"@syncfusion/ej2-react-maps\": \"syncfusion:ej2-react-maps/dist/ej2-react-maps.umd.min.js\",\r\n \"@syncfusion/ej2-react-treemap\": \"syncfusion:ej2-react-treemap/dist/ej2-react-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-react-circulargauge\": \"syncfusion:ej2-react-circulargauge/dist/ej2-react-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-lineargauge\": \"syncfusion:ej2-react-lineargauge/dist/ej2-react-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-calendars\": \"syncfusion:ej2-react-calendars/dist/ej2-react-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-react-dropdowns\": \"syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-react-grids\": \"syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js\",\r\n \"@syncfusion/ej2-react-inputs\": \"syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-react-lists\": \"syncfusion:ej2-react-lists/dist/ej2-react-lists.umd.min.js\",\r\n \"@syncfusion/ej2-react-navigations\": \"syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-react-popups\": \"syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js\",\r\n \"@syncfusion/ej2-react-schedule\": \"syncfusion:ej2-react-schedule/dist/ej2-react-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-react-documenteditor\": \"syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-notifications\": \"syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-react-richtexteditor\": \"syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-pivotview\": \"syncfusion:ej2-react-pivotview/dist/ej2-react-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-react-heatmap\": \"syncfusion:ej2-react-heatmap/dist/ej2-react-heatmap.umd.min.js\",\r\n \"react-dom\":\"https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js\",\r\n \"react\":\"https://unpkg.com/react@15.5.4/dist/react.min.js\",\r\n },\r\n packages: {\r\n 'app': { main: 'index', defaultExtension: 'tsx' },\r\n }\r\n});\r\n\r\nSystem.import('app');","index.html":"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Diagram · DrawingTools · Essential JS 2 for React · Syncfusion</title>\r\n <meta charset=\"utf-8\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\r\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\r\n <!-- {{:meta}} -->\r\n <meta name=\"author\" content=\"Syncfusion\" />\r\n <script type=\"text/javascript\">\r\n var themeName = location.hash || 'material';\r\n themeName = themeName.replace('#','');\r\n window.ripple = (themeName === \"material\")\r\n document.write('<link href=\"http://cdn.syncfusion.com/ej2/' + themeName + '.css\" rel=\"stylesheet\">');\r\n </script>\r\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\r\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\r\n <script src=\"systemjs.config.js\"></script>\r\n <link href=\"index.css\" rel=\"stylesheet\" />\r\n <style>\r\n #loader {\r\n color: #008cff;\r\n height: 40px;\r\n left: 45%;\r\n position: absolute;\r\n top: 45%;\r\n width: 30%;\r\n }\r\n body {\r\n touch-action:none;\r\n }\r\n .body {\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n }\r\n\r\n .e-view {\r\n bottom: 0;\r\n left: 0;\r\n overflow: hidden;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n }\r\n\r\n .sb-left {\r\n float: left;\r\n }\r\n\r\n .sb-right {\r\n float: right;\r\n }\r\n\r\n .sb-block {\r\n display: block;\r\n }\r\n\r\n .sb-table {\r\n display: table;\r\n }\r\n\r\n .sb-table-cell {\r\n display: table-cell;\r\n vertical-align: middle;\r\n }\r\n\r\n /*sample header*/\r\n\r\n\r\n .sb-header {\r\n height: 48px;\r\n background: #FFFFFF;\r\n box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);\r\n z-index: 1001;\r\n opacity: 100;\r\n }\r\n\r\n\r\n .sb-header-left, .sb-header-right {\r\n height: 100%;\r\n }\r\n\r\n #sb-header-text {\r\n padding-left: 22px;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n .header-logo {\r\n float: left;\r\n padding-left: 8px;\r\n padding-right: 22px;\r\n }\r\n\r\n .footer-logo {\r\n background: url(https://ej2.syncfusion.com/home/images/footer-logo.svg) no-repeat right;\r\n height: 40px;\r\n width: 140px;\r\n }\r\n\r\n .sb-header-splitter {\r\n float: left;\r\n border-left: 1px solid rgb(196, 196, 196);\r\n height: 32px;\r\n margin-top: 8px;\r\n padding-left: 22 px;\r\n }\r\n\r\n .sb-header-settings {\r\n display: none;\r\n }\r\n\r\n .product-style a{\r\n padding-right: 15px;\r\n font-family:Roboto;\r\n font-weight: 500;\r\n font-size: 13px;\r\n color: #363636;\r\n text-align: center;\r\n text-decoration: none;\r\n }\r\n .product-style a:hover {\r\n color:#3C78EF;\r\n }\r\n\r\n .sb-download-btn a {\r\n text-decoration: none;\r\n }\r\n\r\n .sb-download-text {\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-wrapper {\r\n padding-right: 27px;\r\n }\r\n\r\n .sb-download-btn:hover .sb-download-btn:focus .sb-download-btn.active {\r\n border-radius: 2px;\r\n font-family: \"Roboto\";\r\n font-weight: bold;\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-btn:hover {\r\n background: #006CE6;\r\n }\r\n\r\n .sb-download-btn:focus {\r\n background: #0051CB;\r\n }\r\n\r\n .sb-download-btn.active {\r\n background: #0036B1;\r\n }\r\n\r\n .sb-download-btn {\r\n background-color: #3C78EF;\r\n opacity: 100;\r\n border-radius: 2px;\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n font-weight: 500;\r\n line-height: 18px;\r\n height: 32px;\r\n border-color: transparent;\r\n }\r\n\r\n .sb-bread-crumb {\r\n padding-left: 20px;\r\n padding-top: 24px;\r\n padding-bottom: 10px;\r\n }\r\n\r\n .category-allcontrols a, .category-text a, .crumb-sample {\r\n display: table;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #3C78EF;\r\n text-align: left;\r\n text-decoration: none;\r\n }\r\n\r\n .sb-bread-crumb .sb-bread-crumb-text>div {\r\n font-size: 15px;\r\n font-weight: 500;\r\n padding-right: 8px;\r\n cursor: default;\r\n display: table-cell;\r\n }\r\n\r\n .sb-bread-crumb-text>div.seperator {\r\n font-weight: 700;\r\n font-size: 15px;\r\n vertical-align: bottom;\r\n } \r\n\r\n .content {\r\n overflow: auto;\r\n height: calc(100% - 50px);\r\n top: 50px;\r\n }\r\n\r\n\r\n .sample-content {\r\n top: 48px;\r\n background: #FFFFFF;\r\n }\r\n\r\n .div {\r\n display: block;\r\n }\r\n\r\n .control-section {\r\n padding-left: 4px;\r\n }\r\n\r\n .crumb-sample {\r\n color: #000000;\r\n line-height: 18px;\r\n }\r\n\r\n #description {\r\n padding-bottom: 16px;\r\n padding-left: 20px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n padding-top: 14px;\r\n }\r\n\r\n #action-description {\r\n padding-left: 20px;\r\n padding-bottom: 15px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n #description-section {\r\n padding-left: 20px;\r\n padding-top: 30px;\r\n opacity: 0.87;\r\n font-family:Roboto;\r\n font-weight: 700;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n\r\n\r\n </style>\r\n</head>\r\n\r\n<body class='e-view ej2-new' aria-busy=\"true\">\r\n <div class=\"sample-browser\">\r\n <div id='sample-header' class=\"sb-header\" role=\"banner\">\r\n <div class='sb-header-left sb-left sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"header-logo\">\r\n <a href=\"https://ej2.syncfusion.com/home/react.html\" target=\"\" rel=\"noopener noreferrer\">\r\n <div class=\"footer-logo\"> </div>\r\n </a>\r\n </div>\r\n \r\n </div>\r\n <div class=\"sb-header-splitter sb-download-splitter\"></div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div id='sb-header-text' class='e-sb-header-text'>\r\n \r\n <span class='sb-header-text-left'>Essential JS 2 for React</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class='sb-header-right sb-right sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class='product-style'>\r\n <div><a href=\"https://www.syncfusion.com/products/react/diagram\">PRODUCT DETAILS</a></div>\r\n </div>\r\n </div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"sb-header-item sb-table-cell sb-download-wrapper\">\r\n <a href=\"https://www.syncfusion.com/downloads/essential-js2\" target=\"_blank\">\r\n <button id=\"download-now\" class=\"sb-download-btn\">\r\n <span class=\"sb-download-text\">DOWNLOAD</span>\r\n </button>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class ='content e-view'>\r\n <div class='sample-content'>\r\n <div id=\"sample-bread-crumb\" class=\"sb-bread-crumb\">\r\n <div class=\"sb-bread-crumb-text\">\r\n <div class=\"category-allcontrols\"><a href=\"https://ej2.syncfusion.com/react/demos\"><span>All Controls</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"category-text bread-ctext\"><a href=\"https://ej2.syncfusion.com/react/demos/#/material/diagram/default.html\"><span>Diagram</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"crumb-sample\">DrawingTools</div>\r\n </div>\r\n </div>\r\n <div class=\"control-content\">\r\n <div id=\"action-description\">\r\n <p>\r\n \n <p>\n This sample visualizes how to build a diagram interactively using\n drawing tools. Continuous draw option, snapping, and undo/redo\n support are enabled to easily draw diagrams. Rulers, gridlines, and\n snapping options are enabled to easily align objects.\n </p>\n \r\n </p>\r\n </div>\r\n <div class=\"container-fluid\">\r\n <div class=\"control-section\">\r\n <div id='sample'>\r\n <div id='loader'>Loading....</div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div id=\"description-section\">Description</div> \r\n <div id=\"description\">\r\n <p>\r\n \n <p>\n This example shows how to draw shapes and connections interactively.\n In addition to that, rulers, gridlines, and snapping options are\n enabled to assist drawing. The <code>tool</code> property can be\n used to enable drawing. Add <code>DrawOnce</code> or{" "}\n <code>ContinousDraw</code> option to the\n <code>tool</code> property of the diagram. The{" "}\n <code>drawingObject</code> property can be used to define a\n shape/connector to be drawn.\n </p>\n\n <p>\n Few shape and connector templates are added in the palette. To draw\n basic shapes and connectors, click the templates in the palette. For\n polygon shapes, a corner/point will be added to the polygon for each\n mouse left button click. Drawing will be completed either on mouse\n right button click or double click.\n </p>\n\n <p 500=\"\" style=\"{{\" fontweight:=\"\" }}=\"\">Injecting Module</p>\n <p>\n The diagram component’s features are segregated into individual\n feature-wise modules. To enable undo and redo support, inject{" "}\n <code>UndoRedo</code> module into <code>services</code>.\n </p>\n <br>\n \r\n </p> \r\n </div> \r\n </div> \r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n</body>\r\n</html>\r\n","app/index.tsx":"import * as ReactDOM from \"react-dom\";\r\nimport * as React from \"react\";\r\nimport {\r\n DiagramComponent,\r\n NodeModel,\r\n BasicShapes,\r\n Segments,\r\n SnapSettingsModel,\r\n SnapConstraints,\r\n TextModel,\r\n PathModel,\r\n ImageModel,\r\n DiagramTools,\r\n UndoRedo,\r\n GridlinesModel,\r\n Snapping,\r\n FlowShapes,\r\n ConnectorModel,\r\n Connector,\r\n PointPortModel,\r\n PortConstraints,\r\n PortVisibility,\r\n PointModel,\r\n BasicShape,\r\n Inject\r\n} from \"@syncfusion/ej2-react-diagrams\";\r\nimport { SampleBase } from './sample-base';\r\nimport { DataManager } from \"@syncfusion/ej2-data\";\r\nimport {\r\n CheckBoxComponent,\r\n ChangeEventArgs\r\n} from \"@syncfusion/ej2-react-buttons\";\r\n\r\nlet shape: { [key: string]: Object }[] = [\r\n { shapeName: \"BasicShape\", shapeId: \"Basic\" },\r\n { shapeName: \"FlowShape\", shapeId: \"Flow\" },\r\n { shapeName: \"Connector\", shapeId: \"Segment\" },\r\n { shapeName: \"Path\", shapeId: \"Path\" },\r\n { shapeName: \"Image\", shapeId: \"Image\" },\r\n { shapeName: \"SVG\", shapeId: \"SVG\" },\r\n { shapeName: \"Text\", shapeId: \"Text\" }\r\n];\r\nlet basic: BasicShapes[] = [\r\n \"Rectangle\",\r\n \"Ellipse\",\r\n \"Hexagon\",\r\n \"Parallelogram\",\r\n \"Triangle\",\r\n \"Plus\",\r\n \"Star\",\r\n \"Pentagon\",\r\n \"Heptagon\",\r\n \"Octagon\",\r\n \"Trapezoid\",\r\n \"Decagon\",\r\n \"RightTriangle\",\r\n \"Cylinder\",\r\n \"Diamond\"\r\n];\r\nlet flow: FlowShapes[] = [\r\n \"Process\",\r\n \"Decision\",\r\n \"Document\",\r\n \"PreDefinedProcess\",\r\n \"Terminator\",\r\n \"PaperTap\",\r\n \"DirectData\",\r\n \"SequentialData\"\r\n];\r\nlet connector: Segments[] = [\"Straight\", \"Orthogonal\"];\r\nlet node: NodeModel;\r\nlet diagramInstance: DiagramComponent;\r\nlet interval: number[];\r\ninterval = [\r\n 1,\r\n 9,\r\n 0.25,\r\n 9.75,\r\n 0.25,\r\n 9.75,\r\n 0.25,\r\n 9.75,\r\n 0.25,\r\n 9.75,\r\n 0.25,\r\n 9.75,\r\n 0.25,\r\n 9.75,\r\n 0.25,\r\n 9.75,\r\n 0.25,\r\n 9.75,\r\n 0.25,\r\n 9.75\r\n];\r\nlet gridlines: GridlinesModel = {\r\n lineColor: \"#e0e0e0\",\r\n lineIntervals: interval\r\n};\r\nlet snapSettings: SnapSettingsModel = {\r\n snapObjectDistance: 5,\r\n constraints:\r\n SnapConstraints.SnapToObject |\r\n SnapConstraints.SnapToLines |\r\n SnapConstraints.ShowLines,\r\n horizontalGridlines: gridlines,\r\n verticalGridlines: gridlines\r\n};\r\nconst SAMPLE_CSS = `.image-pattern-style {\r\n background-color: white;\r\n background-size: contain;\r\n background-repeat: no-repeat;\r\n height: 45px;\r\n width: calc((100% - 12px) / 3);\r\n cursor: pointer;\r\n border: 1px solid #D5D5D5;\r\n background-position: center;\r\n float: left;\r\n }\r\n\r\n .image-pattern-style:hover {\r\n border-color: gray;\r\n border-width: 2px;\r\n }\r\n\r\n .row {\r\n margin-left: 0px;\r\n margin-right: 0px;\r\n }\r\n\r\n .row-header {\r\n font-size: 12px;\r\n font-weight: 500;\r\n }\r\n\r\n .e-checkbox-wrapper .e-label {\r\n font-size: 12px;\r\n }\r\n\r\n .property-panel-header {\r\n padding-top: 15px;\r\n padding-bottom: 5px\r\n }\r\n\r\n .e-selected-style {\r\n border-color: #006CE6;\r\n border-width: 2px;\r\n }\r\n\r\n .control-section {\r\n padding-top: 0px;\r\n padding-bottom: 0px;\r\n padding-right: 0px;\r\n }\r\n\r\n .container-fluid {\r\n padding-left: 0px;\r\n }\r\n\r\n .diagram-control-pane .col-xs-6 {\r\n padding-left: 0px;\r\n padding-right: 0px;\r\n }`;\r\n\r\nexport class DrawingTools extends SampleBase<{}, {}> {\r\n rendereComplete() {\r\n SetShape(\"Rectangle\");\r\n diagramInstance.tool = DiagramTools.ContinuousDraw;\r\n diagramInstance.dataBind();\r\n //Click Event used to decide the drawing object.\r\n document.getElementById(\"appearance\").onclick = (args: MouseEvent) => {\r\n let target: HTMLElement = args.target as HTMLElement;\r\n let selectedElement: HTMLCollection = document.getElementsByClassName(\r\n \"e-selected-style\"\r\n );\r\n if (\r\n selectedElement.length &&\r\n target.id !== \"\" &&\r\n target.id !== \"checked\"\r\n ) {\r\n selectedElement[0].classList.remove(\"e-selected-style\");\r\n }\r\n if (!target.classList.contains(\"e-selected-style\")) {\r\n target.classList.add(\"e-selected-style\");\r\n }\r\n if (target.className === \"image-pattern-style e-selected-style\") {\r\n switch (target.id) {\r\n case \"shape1\":\r\n SetShape(\"Rectangle\");\r\n break;\r\n case \"shape2\":\r\n SetShape(\"Ellipse\");\r\n break;\r\n case \"shape3\":\r\n SetShape(\"Hexagon\");\r\n break;\r\n case \"shape4\":\r\n SetShape(\"Pentagon\");\r\n break;\r\n case \"shape5\":\r\n SetShape(\"Polygon\");\r\n break;\r\n case \"straight\":\r\n setdrawobject(null, { type: \"Straight\" });\r\n break;\r\n case \"ortho\":\r\n setdrawobject(null, { type: \"Orthogonal\" });\r\n break;\r\n case \"cubic\":\r\n setdrawobject(null, { type: \"Bezier\" });\r\n break;\r\n case \"path\":\r\n getPathShape();\r\n target.classList.add(\"e-selected-style\");\r\n break;\r\n case \"image\":\r\n getImageNode();\r\n break;\r\n case \"svg\":\r\n getSVGNode();\r\n break;\r\n case \"text\":\r\n getTextNode();\r\n break;\r\n default:\r\n if (\r\n selectedElement.length &&\r\n target.id !== \"\" &&\r\n target.id !== \"checked\"\r\n ) {\r\n selectedElement[0].classList.remove(\"e-selected-style\");\r\n }\r\n }\r\n }\r\n };\r\n }\r\n render() {\r\n return (\r\n <div className=\"control-pane diagram-control-pane\">\r\n <style>{SAMPLE_CSS}</style>\r\n <div className=\"col-lg-8 control-section\">\r\n <div className=\"content-wrapper\" style={{ width: \"100%\" }}>\r\n <DiagramComponent\r\n id=\"diagram\"\r\n ref={diagram => (diagramInstance = diagram)}\r\n width={\"100%\"}\r\n height={\"540px\"}\r\n snapSettings={snapSettings}\r\n rulerSettings={{ showRulers: true }}\r\n //Sets the default values of a node\r\n getNodeDefaults={(node: NodeModel) => {\r\n let obj: NodeModel = node;\r\n let basicShape: BasicShape = node.shape as BasicShape;\r\n if (\r\n basicShape.shape === \"Rectangle\" ||\r\n basicShape.shape === \"Ellipse\"\r\n ) {\r\n obj.ports = getPorts(node);\r\n } else if (basicShape.shape === \"Hexagon\") {\r\n obj.ports = getHexagonPorts(node);\r\n } else if (basicShape.shape === \"Pentagon\") {\r\n obj.ports = getPentagonPorts(node);\r\n } else if (basicShape.type === \"Path\") {\r\n obj.ports = getPathPorts(node);\r\n }\r\n }}\r\n />\r\n <Inject services={[UndoRedo, Snapping]} />\r\n </div>\r\n </div>\r\n\r\n <div className=\"col-lg-4 property-section\">\r\n <div className=\"property-panel-header\">Properties</div>\r\n <div className=\"row property-panel-content\" id=\"appearance\">\r\n <div className=\"row row-header\" style={{ paddingTop: \"10px\" }}>\r\n Shapes\r\n </div>\r\n <div className=\"row\" style={{ paddingTop: \"8px\" }}>\r\n <div\r\n title=\"Retangle\"\r\n className=\"image-pattern-style e-selected-style\"\r\n id=\"shape1\"\r\n style={{\r\n backgroundImage:\r\n \"url('http://ej2.syncfusion.com/react/demos/src/diagram/Images/drawingTool/basicshape/DrawingTool_1.png')\",\r\n marginRight: \"3px\"\r\n }}\r\n />\r\n <div\r\n title=\"Ellipse\"\r\n className=\"image-pattern-style\"\r\n id=\"shape2\"\r\n style={{\r\n backgroundImage:\r\n \"url('http://ej2.syncfusion.com/react/demos/src/diagram/Images/drawingTool/basicshape/DrawingTool_2.png')\",\r\n margin: \"0px 3px\"\r\n }}\r\n />\r\n <div\r\n title=\"Hexagon\"\r\n className=\"image-pattern-style\"\r\n id=\"shape3\"\r\n style={{\r\n backgroundImage:\r\n \"url('http://ej2.syncfusion.com/react/demos/src/diagram/Images/drawingTool/basicshape/DrawingTool_3.png')\"\r\n }}\r\n />\r\n </div>\r\n <div className=\"row\" style={{ paddingTop: \"8px\" }}>\r\n <div\r\n title=\"Pentagon\"\r\n className=\"image-pattern-style\"\r\n id=\"shape4\"\r\n style={{\r\n backgroundImage:\r\n \"url('http://ej2.syncfusion.com/react/demos/src/diagram/Images/drawingTool/basicshape/DrawingTool_4.png')\",\r\n marginRight: \"3px\"\r\n }}\r\n />\r\n <div\r\n title=\"Polygon\"\r\n className=\"image-pattern-style\"\r\n id=\"shape5\"\r\n style={{\r\n backgroundImage:\r\n \"url('http://ej2.syncfusion.com/react/demos/src/diagram/Images/drawingTool/basicshape/DrawingTool_5.png')\",\r\n margin: \"0px 3px\"\r\n }}\r\n />\r\n <div\r\n title=\"Path\"\r\n className=\"image-pattern-style\"\r\n id=\"path\"\r\n style={{\r\n backgroundImage:\r\n \"url('http://ej2.syncfusion.com/react/demos/src/diagram/Images/drawingTool/DrawingTool_6.png')\"\r\n }}\r\n />\r\n </div>\r\n <div className=\"row\" style={{ paddingTop: \"8px\" }}>\r\n <div\r\n title=\"Image\"\r\n className=\"image-pattern-style\"\r\n id=\"image\"\r\n style={{\r\n backgroundImage:\r\n \"url('http://ej2.syncfusion.com/react/demos/src/diagram/Images/drawingTool/DrawingTool_7.png')\",\r\n marginRight: \"3px\"\r\n }}\r\n />\r\n <div\r\n title=\"SVG\"\r\n className=\"image-pattern-style\"\r\n id=\"svg\"\r\n style={{\r\n backgroundImage:\r\n \"url('http://ej2.syncfusion.com/react/demos/src/diagram/Images/drawingTool/DrawingTool_8.png')\",\r\n marginRight: \"3px\"\r\n }}\r\n />\r\n <div\r\n title=\"Text\"\r\n className=\"image-pattern-style\"\r\n id=\"text\"\r\n style={{\r\n backgroundImage:\r\n \"url('http://ej2.syncfusion.com/react/demos/src/diagram/Images/drawingTool/DrawingTool_9.png')\",\r\n marginRight: \"3px\"\r\n }}\r\n />\r\n </div>\r\n <div className=\"row row-header\" style={{ paddingTop: \"10px\" }}>\r\n Connector\r\n </div>\r\n <div className=\"row\" style={{ paddingTop: \"8px\" }}>\r\n <div\r\n className=\"image-pattern-style\"\r\n id=\"straight\"\r\n style={{\r\n backgroundImage:\r\n \"url('http://ej2.syncfusion.com/react/demos/src/diagram/Images/drawingTool/connector/Connectors_1.png')\",\r\n marginRight: \"3px\"\r\n }}\r\n />\r\n <div\r\n className=\"image-pattern-style\"\r\n id=\"ortho\"\r\n style={{\r\n backgroundImage:\r\n \"url('http://ej2.syncfusion.com/react/demos/src/diagram/Images/drawingTool/connector/Connectors_2.png')\",\r\n margin: \"0px 3px\"\r\n }}\r\n />\r\n <div\r\n className=\"image-pattern-style\"\r\n id=\"cubic\"\r\n style={{\r\n backgroundImage:\r\n \"url('http://ej2.syncfusion.com/react/demos/src/diagram/Images/drawingTool/connector/Connectors_3.png')\"\r\n }}\r\n />\r\n </div>\r\n <div className=\"row property-panel-content\" style={{ paddingTop: \"10px\" }}>\r\n <CheckBoxComponent\r\n id=\"checked\"\r\n label=\"Continuous Draw\"\r\n checked={true}\r\n change={onChange}\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nfunction onChange(args: ChangeEventArgs): void {\r\n diagramInstance.tool = args.checked\r\n ? DiagramTools.ContinuousDraw\r\n : DiagramTools.DrawOnce;\r\n}\r\n\r\n//Enable drawing object.\r\nfunction setdrawobject(node: NodeModel, connector: ConnectorModel): void {\r\n let continuousDraw: any = document.getElementById(\"checked\");\r\n if (!continuousDraw.checked) {\r\n diagramInstance.tool = DiagramTools.DrawOnce;\r\n }\r\n if (connector == null) {\r\n diagramInstance.drawingObject = node;\r\n } else {\r\n diagramInstance.drawingObject = connector;\r\n }\r\n diagramInstance.dataBind();\r\n}\r\n//Enable drawing Tool.\r\nfunction enableTool(): void {\r\n let continuousDraw: any = document.getElementById(\"checked\");\r\n if (!continuousDraw.checked) {\r\n diagramInstance.tool = DiagramTools.DrawOnce;\r\n }\r\n diagramInstance.dataBind();\r\n}\r\n\r\n//Set the Shape of the drawing Object.\r\nfunction SetShape(obj: string): void {\r\n let drawingshape:\r\n | NodeModel\r\n | PathModel\r\n | ImageModel\r\n | TextModel\r\n | ConnectorModel\r\n | BasicShapes;\r\n drawingshape = { type: \"Basic\", shape: obj } as NodeModel;\r\n node = {\r\n shape: drawingshape as NodeModel\r\n };\r\n diagramInstance.drawingObject = node;\r\n enableTool();\r\n}\r\n//Set TextNode Shape.\r\nfunction getTextNode(): void {\r\n let drawingshape:\r\n | NodeModel\r\n | PathModel\r\n | ImageModel\r\n | TextModel\r\n | ConnectorModel;\r\n drawingshape = { type: \"Text\" };\r\n node = {\r\n shape: drawingshape\r\n };\r\n setdrawobject(node, null);\r\n}\r\n//Set SVG Node\r\nfunction getSVGNode(): void {\r\n // tslint:disable-next-line:max-line-length\r\n let drawingshape:\r\n | NodeModel\r\n | PathModel\r\n | ImageModel\r\n | TextModel\r\n | ConnectorModel;\r\n drawingshape = {\r\n type: \"Native\",\r\n content: getPath()\r\n };\r\n node = {\r\n shape: drawingshape\r\n };\r\n setdrawobject(node, null);\r\n}\r\n\r\nfunction getPath(): string {\r\n let str: string =\r\n '<svg version=\"1.0\" xmlns=\"http://www.w3.org/2000/svg\" width=\"350.000000pt\" ' +\r\n 'height=\"229.000000pt\" viewBox=\"0 0 350.000000 229.000000\" ' +\r\n 'preserveAspectRatio=\"xMidYMid meet\"> <metadata>' +\r\n \" Created by potrace 1.11, written by Peter Selinger 2001-2013\" +\r\n ' </metadata> <g transform=\"translate(0.000000,229.000000) scale(0.100000,-0.100000)\"' +\r\n ' fill=\"#de6ca9\" stroke=\"none\"><path d=\"M0 1145 l0 -1145 1750 0 1750 0 0 1145 0 1145' +\r\n \" -1750 0 -1750 0 0 -1145z m1434 186 c19 -8 26 -18 26 -37 0 -24 -3 -26\" +\r\n \" -27 -19 -16 3 -58 9 -94 12 -63 5 -67 4 -88 -23 -23 -29 -21 -60 6 -81 8\" +\r\n \" -6 47 -19 86 -29 55 -13 80 -25 106 -51 31 -31 33 -37 29 -88 -8 -94 -69\" +\r\n \" -133 -193 -122 -90 7 -115 20 -115 58 0 26 3 30 18 24 91 -38 168 -41 204\" +\r\n \" -8 23 21 23 75 1 96 -10 8 -49 23 -88 33 -88 22 -135 63 -135 118 0 92 67 140\" +\r\n \" 181 131 31 -2 68 -9 83 -14z m854 -6 c38 -15 42 -21 42 -51 l0 -33 -47 25\" +\r\n \" c-41 22 -58 25 -115 22 -58 -3 -72 -8 -97 -32 -79 -75 -59 -259 32 -297 35\" +\r\n \" -15 106 -18 150 -6 26 7 27 10 27 67 l0 60 -50 0 c-47 0 -50 2 -50 25 0 25\" +\r\n \" 1 25 80 25 l81 0 -3 -97 -3 -98 -40 -20 c-22 -10 -65 -21 -95 -23 -153 -11\" +\r\n \" -242 74 -243 230 0 145 93 235 233 224 30 -2 74 -12 98 -21z m-638 -169 l67\" +\r\n \" -178 40 103 c22 57 53 139 69 182 28 75 29 77 62 77 19 0 32 -4 30 -9 -1 -5\" +\r\n \" -39 -104 -83 -220 l-80 -211 -37 0 c-35 0 -37 2 -56 53 -11 28 -48 124 -81 \" +\r\n '211 -34 87 -61 163 -61 168 0 5 14 8 32 6 31 -3 32 -5 98 -182z\" />' +\r\n \"</g> </svg>\";\r\n return str;\r\n}\r\nfunction getImageNode(): void {\r\n let drawingshape:\r\n | NodeModel\r\n | PathModel\r\n | ImageModel\r\n | TextModel\r\n | ConnectorModel;\r\n drawingshape = { type: \"Image\", source: \"http://ej2.syncfusion.com/react/demos/src/diagram/employee.png\" };\r\n node = {\r\n shape: drawingshape\r\n };\r\n setdrawobject(node, null);\r\n}\r\nfunction getPathShape(): void {\r\n // tslint:disable-next-line:max-line-length\r\n let drawingshape:\r\n | NodeModel\r\n | PathModel\r\n | ImageModel\r\n | TextModel\r\n | ConnectorModel;\r\n drawingshape = {\r\n type: \"Path\",\r\n data:\r\n \"M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z\"\r\n };\r\n node = {\r\n shape: drawingshape\r\n };\r\n setdrawobject(node, null);\r\n}\r\nfunction getPorts(obj: NodeModel): PointPortModel[] {\r\n let ports: PointPortModel[] = [\r\n createPort(\"port1\", { x: 0, y: 0.5 }),\r\n createPort(\"port2\", { x: 0.5, y: 1 }),\r\n createPort(\"port3\", { x: 1, y: 0.5 }),\r\n createPort(\"port4\", { x: 0.5, y: 0 })\r\n ];\r\n return ports;\r\n}\r\nfunction getPathPorts(obj: NodeModel): PointPortModel[] {\r\n let ports: PointPortModel[] = [\r\n createPort(\"port1\", { x: 0.5, y: 0 }),\r\n createPort(\"port2\", { x: 0, y: 0.39 }),\r\n createPort(\"port3\", { x: 1, y: 0.39 }),\r\n createPort(\"port4\", { x: 0.2, y: 1 }),\r\n createPort(\"port5\", { x: 0.8, y: 1 })\r\n ];\r\n return ports;\r\n}\r\nfunction getHexagonPorts(obj: NodeModel): PointPortModel[] {\r\n let ports: PointPortModel[] = [\r\n createPort(\"port1\", { x: 0, y: 0.5 }),\r\n createPort(\"port2\", { x: 0.5, y: 0 }),\r\n createPort(\"port3\", { x: 0.3, y: 0 }),\r\n createPort(\"port4\", { x: 0.7, y: 0 }),\r\n createPort(\"port5\", { x: 1, y: 0.5 }),\r\n createPort(\"port6\", { x: 0.5, y: 1 }),\r\n createPort(\"port7\", { x: 0.3, y: 1 }),\r\n createPort(\"port8\", { x: 0.7, y: 1 })\r\n ];\r\n return ports;\r\n}\r\nfunction getPentagonPorts(obj: NodeModel): PointPortModel[] {\r\n let ports: PointPortModel[] = [\r\n createPort(\"port1\", { x: 0.5, y: 0 }),\r\n createPort(\"port2\", { x: 0, y: 0.4 }),\r\n createPort(\"port3\", { x: 1, y: 0.4 }),\r\n createPort(\"port4\", { x: 0.2, y: 1 }),\r\n createPort(\"port5\", { x: 0.85, y: 1 })\r\n ];\r\n return ports;\r\n}\r\nfunction createPort(id: string, offset: PointModel): PointPortModel {\r\n let port: PointPortModel = {\r\n id: id,\r\n shape: \"Square\",\r\n offset: offset,\r\n constraints: PortConstraints.Draw,\r\n visibility: PortVisibility.Hover\r\n };\r\n return port;\r\n}\r\n\nReactDOM.render(<DrawingTools />, document.getElementById('sample'));","app/sample-base.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { RouteComponentProps } from 'react-router-dom';\r\nimport { enableRipple } from '@syncfusion/ej2-base';\r\n\r\nenableRipple((window as any).ripple);\r\nexport class SampleBase<P, S> extends React.PureComponent<RouteComponentProps<any> & P, S>{\r\n public rendereComplete(): void {\r\n /**custom render complete function */\r\n }\r\n componentDidMount(): void {\r\n setTimeout(() => {\r\n this.rendereComplete();\r\n }\r\n );\r\n }\r\n}"}