Diagram Builder Sample Added.

.gitignore

@@ -0,0 +1,6 @@
+.npmrc
+.vscode/
+dist/
+node_modules/
+src/**/*.min.js
+src/**/*-plnkr.json

Jenkinsfile

@@ -0,0 +1,39 @@
+#!groovy
+
+node('EJ2Sample') {
+    try {
+        deleteDir()
+
+        stage('Import') {
+            git url: 'https://gitlab.syncfusion.com/essential-studio/ej2-groovy-scripts.git', branch: 'master', credentialsId: env.JENKINS_CREDENTIAL_ID
+            shared = load 'src/shared.groovy'
+        }
+
+        stage('Checkout') {
+            checkout scm
+            shared.getProjectDetails()
+            shared.gitlabCommitStatus('running')
+        }
+
+        stage('Install') {
+            shared.install()
+        }
+
+        stage('Test') {
+            shared.test()
+        }
+
+        stage('Publish') {
+            shared.publish()
+        }
+
+        shared.gitlabCommitStatus('success')
+        deleteDir()
+    }
+    catch(Exception e) {
+        println(e)
+        shared.gitlabCommitStatus('failed')
+        deleteDir()
+        error('Build Failed')
+    }
+}

README.md

@@ -1,2 +1,27 @@
-# ej2-javascript-diagram-builder
-The JavaScript diagram builder application is used to create the diagrams such as "Flow Charts", "MindMap Diagrams" and "Organization Chart" through Visual Interface.
+# Essential JS 2 for JavaScript - Diagram Builder
+
+The diagram builder demo application showcases creating diagrams such as flow charts, Mind Map diagrams, and organization chart through visual interface.
+
+## Deployment
+
+### Install
+
+* To install all dependent packages, use the below command.
+
+```
+npm install
+```
+
+### Run
+
+To run the sample, use the below command
+
+```
+npm run serve
+```
+
+## Demo
+
+#### <a href="https://ej2.syncfusion.com/showcase/javascript/diagrambuilder/" target="_blank">https://ej2.syncfusion.com/showcase/javascript/diagrambuilder/</a>
+
+Check all the showcase and tutorial samples from <a href="https://ej2.syncfusion.com/home/angular.html" target="_blank">here</a>.

config.json

@@ -0,0 +1,9 @@
+{
+    "htmllint": ["./src/**/*.html"],
+    "json": ["./**/*.json"],
+    "dedupe": ["./src/**/*.js"],
+    "watchSample": ["./src/**/*.js"],
+    "jshint": ["./src/**/*.js", "!./src/**/*.min.js"],
+    "github": ["./src/**/*.{html,ts,json}", "./styles{,/**}", "./src/**/images{,/**}", "./src/common/lib{,/**}", "./src/common/cldr-data{,/**}", "./src/showcase{,/**}", "!./src/showcase/**/!(webpack.config)*.{js,json}", "!./styles/**/!(index)*.css", "./spec/**/*.ts", "./*.html", "./favicon.ico", "karma.conf.js", "package.json", "test-main.js", "tsconfig.json", "webpack.config.js", "!./googlec03dd4bc003151bc.html", "license"],
+    "isShowCase":true
+}

gulpfile.js

@@ -0,0 +1,50 @@
+var fs = require('fs');
+var gulp = require('gulp');
+var webpackGulp = require('webpack-stream');
+var webpack = require('webpack');
+var runSequence = require('run-sequence');
+/**
+ * Bundle all module using webpack
+ */
+gulp.task('bundle', function() {
+    var webpackConfig = require(fs.realpathSync('./webpack.config.js'));
+    return gulp.src('')
+        .pipe(webpackGulp(webpackConfig, webpack))
+        .pipe(gulp.dest('.'));
+});
+
+
+gulp.task('bundle1', function() {
+    return "sss";
+});
+
+/**
+ * Compile SampleBrowser Samples.
+ */
+gulp.task('build', ['ship-deps'], function(done) {
+    if (!fs.existsSync('./styles')) {
+        fs.mkdirSync('./styles');
+    }
+    runSequence('bundle', done);
+});
+
+
+gulp.task('ship-deps', function(done) {
+    gulp.src(['./node_modules/@syncfusion/ej2/*.css', './node_modules/@syncfusion/ej2/dist/*{.js,.map}', './node_modules/fuse.js/dist/fuse.min.js'])
+        .pipe(gulp.dest('./dist/'))
+        .on('end', function() {
+            done();
+        });
+});
+
+gulp.task('serve', ['build'], function (done) {
+    var browserSync = require('browser-sync');
+    var bs = browserSync.create('Essential JS 2 javascript');
+    var options = {
+        server: {
+            baseDir: './'
+        },
+        ui: false
+    };
+    bs.init(options, done);
+});

index.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- Google Tag Manager -->
+    <script>(function (w, d, s, l, i) {
+            w[l] = w[l] || []; w[l].push({
+                'gtm.start':
+                    new Date().getTime(), event: 'gtm.js'
+            }); var f = d.getElementsByTagName(s)[0],
+                j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+                    'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+        })(window, document, 'script', 'dataLayer', 'GTM-WLQL39J');</script>
+    <!-- End Google Tag Manager -->
+    <meta charset="UTF-8" />
+    <title>Create flowchart, mind map, org chart with syncfusion diagram builder</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="The diagram builder application has been built using angular platform to create diagrams like flowcharts, mind map, and organizational chart.">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
+    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
+    <link href="src/assets/index.css" rel="stylesheet" />
+    <link href="src/assets/db-icons1/style.css" rel="stylesheet" />
+    <link href="src/assets/dbstyle/diagrambuilder.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.10/Reflect.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-signals/1.0.0/js-signals.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/crossroads/0.12.0/crossroads.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/hasher/1.2.0/hasher.min.js"></script>
+    <script type="text/javascript">
+        if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
+            document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js"><\/script>');
+        }
+    </script>
+   <style>
+    .e-toolbar .e-toolbar-items .e-toolbar-item button.e-btn .e-icons.e-btn-icon.sssk {
+        background-image: url('1.svg');
+        background-repeat: no-repeat;
+        width: 14px;
+        height: 14px;
+        min-width: 14px;
+        min-height: 14px;
+        line-height: 14px;
+    }
+</style>
+</head>
+
+<body>
+    <div class="sb-content-overlay">
+        <div class="sb-loading">
+            <svg class="circular" height="40" width="40">
+                <circle class="loadingPath" cx="25" cy="25" r="20" fill="none" stroke-width="6" stroke-miterlimit="10"></circle>
+            </svg>
+        </div>
+    </div>
+    <div id="content-area" style="height: 100%">
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.18/zone.min.js"></script>
+    <script src="dist/ej2.min.js"></script>
+    <script src="./scripts/commoncommands.js"></script>
+    <script src="./scripts/customcontextmenuitems.js"></script>
+    <script src="./scripts/customproperties.js"></script>
+    <script src="./scripts/downloaddata.js"></script>
+    <script src="./scripts/dropdowndatasource.js"></script>
+    <script src="./scripts/electrical-shapes.js"></script>
+    <script src="./scripts/events.js"></script>
+    <script src="./scripts/floorplan-shapes.js"></script>
+    <script src="./scripts/layers.js"></script>
+    <script src="./scripts/mindmap.js"></script>
+    <script src="./scripts/network-shapes.js"></script>
+    <script src="./scripts/orgchart.js"></script>
+    <script src="./scripts/pages.js"></script>
+    <script src="./scripts/palettes.js"></script> -->
+    <script src="./scripts/selector.js"></script>
+    <script src="./scripts/themes.js"></script>
+    <script src="./scripts/userhandles.js"></script>
+     <script src="./scripts/utilitymethods.js"></script>
+     <script src="src/home/home.js"></script>
+
+    <script src="src/common/index.js" type="text/javascript"></script> 
+</body>
+</html>

license

@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program,  and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions. 
+
+Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions. 
+
+The Syncfusion license that contains the terms and conditions can be found at 
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

package.json

@@ -0,0 +1,29 @@
+{
+    "name": "@syncfusion/ej2-js-diagram-builder",
+    "version": "1.0.0",
+    "description": "Pure Javascript Samples for diagram",
+    "author": "Syncfusion Inc.",
+    "license": "SEE LICENSE IN license",
+    "dependencies": {
+        "@syncfusion/ej2": "*",
+        "browser-sync": "^2.26.3",
+        "cheerio": "^1.0.0-rc.1",
+        "crossroads": "^0.12.2",
+        "gulp": "^3.9.1",
+        "hasher": "^1.2.0",
+        "webpack": "^2.5.1",
+        "webpack-stream": "^4.0.0"
+    },
+    "devDependencies": {
+        "elasticlunr": "0.9.5",
+        "fuse.js": "^3.2.0",
+        "gulp-jshint": "^2.0.1",
+        "jshint": "^2.9.2",
+        "run-sequence": "^2.2.1"
+    },
+    "scripts": {
+        "test": "gulp js-hint ",
+        "serve": "gulp serve",
+        "build": "gulp build"
+    }
+}

scripts/commoncommands.js

@@ -0,0 +1,143 @@
+var CommonKeyboardCommands = (function () {
+    var selectedItem;
+    var page;
+    var isOpen;
+    function CommonKeyboardCommands() {
+    }
+    CommonKeyboardCommands.newDiagram = function () {
+        var origin = window.location.origin;
+        if (!origin) {
+            origin = window.location.protocol + '//'
+                + window.location.hostname
+                + (window.location.port ? ':' + window.location.port : '');
+        }
+        window.open(origin + window.location.pathname);
+    };
+    CommonKeyboardCommands.openDiagram = function () {
+        this.openUploadBox(true, '.json');
+    };
+    CommonKeyboardCommands.saveDiagram = function () {
+        this.download(this.page.savePage(), document.getElementById('diagramName').innerHTML);
+    };
+    CommonKeyboardCommands.zoomIn = function () {
+        var diagram = this.selectedItem.selectedDiagram;
+        diagram.zoomTo({ type: 'ZoomIn', zoomFactor: 0.2 });
+        this.selectedItem.scrollSettings.currentZoom = (diagram.scrollSettings.currentZoom * 100).toFixed() + '%';
+    };
+    CommonKeyboardCommands.zoomOut = function () {
+        var diagram = this.selectedItem.selectedDiagram;
+        diagram.zoomTo({ type: 'ZoomOut', zoomFactor: 0.2 });
+        this.selectedItem.scrollSettings.currentZoom = (diagram.scrollSettings.currentZoom * 100).toFixed() + '%';
+    };
+    CommonKeyboardCommands.download = function (data, filename) {
+        var dataStr = data;
+        if (window.navigator.msSaveBlob) {
+            var blob = new Blob([dataStr], { type: 'data:text/json;charset=utf-8,' });
+            window.navigator.msSaveOrOpenBlob(blob, filename + '.json');
+        }
+        else {
+            dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(dataStr);
+            var a = document.createElement('a');
+            a.href = dataStr;
+            a.download = filename + '.json';
+            document.body.appendChild(a);
+            a.click();
+        }
+    };
+    CommonKeyboardCommands.openUploadBox = function (isOpen, extensionType) {
+        var defaultUpload = document.getElementById('defaultfileupload');
+        defaultUpload = defaultUpload.ej2_instances[0];
+        defaultUpload.clearAll();
+        this.selectedItem.orgDataSettings.extensionType = defaultUpload.allowedExtensions = extensionType;
+        defaultUpload.dataBind();
+        this.isOpen = isOpen;
+        document.getElementsByClassName('e-file-select-wrap')[0].children[0].click();
+    };
+    CommonKeyboardCommands.addCommonCommands = function (commands) {
+        commands.push({
+            gesture: { key: ej.diagrams.Keys.N, keyModifiers: ej.diagrams.KeyModifiers.Shift }, canExecute: this.canExecute,
+            execute: this.newDiagram.bind(this), name: 'New'
+        });
+        commands.push({
+            gesture: { key: ej.diagrams.Keys.N, keyModifiers: ej.diagrams.KeyModifiers.Shift }, canExecute: this.canExecute,
+            execute: this.newDiagram.bind(this), name: 'New'
+        });
+        commands.push({
+            gesture: { key: ej.diagrams.Keys.O, keyModifiers: ej.diagrams.KeyModifiers.Control }, canExecute: this.canExecute,
+            execute: this.openDiagram.bind(this), name: 'Open'
+        });
+        commands.push({
+            gesture: { key: ej.diagrams.Keys.S, keyModifiers: ej.diagrams.KeyModifiers.Control }, canExecute: this.canExecute,
+            execute: this.saveDiagram.bind(this), name: 'Save'
+        });
+        commands.push({
+            gesture: { key: ej.diagrams.Keys.Plus, keyModifiers: ej.diagrams.KeyModifiers.Control }, canExecute: this.canExecute,
+            execute: this.zoomIn.bind(this), name: 'ZoomIn'
+        });
+        commands.push({
+            gesture: { key: ej.diagrams.Keys.Minus, keyModifiers: ej.diagrams.KeyModifiers.Control }, canExecute: this.canExecute,
+            execute: this.zoomOut.bind(this), name: 'ZoomOut'
+        });
+        return commands;
+    };
+    CommonKeyboardCommands.canExecute = function () {
+        return true;
+    };
+    CommonKeyboardCommands.cloneSelectedItems = function () {
+        var diagram = this.selectedItem.selectedDiagram;
+        var selectedItems1 = diagram.selectedItems.nodes;
+        selectedItems1 = selectedItems1.concat(diagram.selectedItems.connectors);
+        return selectedItems1;
+    };
+    CommonKeyboardCommands.duplicateSelectedItems = function () {
+        this.selectedItem.selectedDiagram.paste(this.cloneSelectedItems());
+    };
+    CommonKeyboardCommands.cloneSelectedItemswithChildElements = function () {
+        return this.cloneChild();
+    };
+    CommonKeyboardCommands.cloneChild = function () {
+        var diagram = this.selectedItem.selectedDiagram;
+        var selectedItems1 = [];
+        if (diagram.selectedItems.nodes.length > 0) {
+            var node = diagram.selectedItems.nodes[0];
+            if (node.addInfo) {
+                node.addInfo.isFirstNode = true;
+            }
+            else {
+                node.addInfo = { isFirstNode: true };
+            }
+            selectedItems1.push(node);
+            selectedItems1 = this.cloneSubChildSubChild(node, selectedItems1);
+        }
+        return selectedItems1;
+    };
+    CommonKeyboardCommands.cloneSubChildSubChild = function (node, select) {
+        var diagram = this.selectedItem.selectedDiagram;
+        var select1 = select;
+        for (var i = node.outEdges.length - 1; i >= 0; i--) {
+            var connector = diagram.getObject(node.outEdges[i]);
+            var childNode = diagram.getObject(connector.targetID);
+            select1.push(connector);
+            select1.push(childNode);
+            if (childNode.outEdges.length > 0) {
+                this.cloneSubChildSubChild(childNode, select1);
+            }
+        }
+        return this.sortCollection(select1);
+    };
+    CommonKeyboardCommands.sortCollection = function (select1) {
+        var select = [];
+        for (var i = select1.length - 1; i >= 0; i--) {
+            if (select1[i] instanceof ej.diagrams.Node) {
+                select.push(select1[i]);
+            }
+        }
+        for (var i = select1.length - 1; i >= 0; i--) {
+            if (select1[i] instanceof ej.diagrams.Connector) {
+                select.push(select1[i]);
+            }
+        }
+        return select;
+    };
+    return CommonKeyboardCommands;
+}());

scripts/customcontextmenuitems.js

@@ -0,0 +1,60 @@
+var CustomContextMenuItems = (function () {
+    function CustomContextMenuItems() {
+        // this.items = [
+        //     {
+        //         text: 'Duplicate', id: 'duplicate'
+        //     },
+        // ];
+    }
+    CustomContextMenuItems.prototype.items = function () {
+        var items = [
+            {
+                text: 'Duplicate', id: 'duplicate'
+            },
+        ];
+        return items;
+    }
+    CustomContextMenuItems.prototype.getHiddenMenuItems = function (diagram) {
+        var hiddenItems = [];
+        hiddenItems.push('duplicate');
+        // hiddenItems.push('Ad-Hoc', 'Loop', 'Compensation', 'Activity-Type', 'Boundry',
+        //     'Data Object', 'Collection', 'Call', 'Trigger Result', 'Event Type', 'Task Type', 'GateWay');
+        if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
+            hiddenItems.splice(hiddenItems.indexOf('duplicate'), 1);
+        }
+        if (diagram.selectedItems.nodes.length === 1 && diagram.selectedItems.connectors.length === 0) {
+            var node = diagram.selectedItems.nodes[0];
+            if (node.shape && node.shape.type === 'Bpmn') {
+                var bpmnShape = node.shape;
+                if (bpmnShape.shape === 'Event') {
+                    // hiddenItems.splice(hiddenItems.indexOf('Event Type'), 1);
+                    // hiddenItems.splice(hiddenItems.indexOf('Trigger Result'), 1);
+                }
+            }
+        }
+        return hiddenItems;
+    };
+    CustomContextMenuItems.prototype.updateBpmnShape = function (diagram, item) {
+        var itemText = item.text.replace(/[' ']/g, '').replace(/[-]/g, '');
+        if (itemText === 'Duplicate') {
+            CommonKeyboardCommands.duplicateSelectedItems();
+        }
+        else if (diagram.selectedItems.nodes.length === 1 && diagram.selectedItems.connectors.length === 0) {
+            var node = diagram.selectedItems.nodes[0];
+            if (node.shape && node.shape.type === 'Bpmn') {
+                var bpmnShape = node.shape;
+                if (item.id.startsWith('eventType')) {
+                    bpmnShape.event.event = itemText;
+                }
+                else if (item.id.startsWith('triggerType')) {
+                    bpmnShape.event.trigger = itemText;
+                }
+                else if (item.id.startsWith('taskType')) {
+                    // bpmnShape.activity.task.type = itemText as BpmnTasks;
+                    bpmnShape.activity.subProcess = {};
+                }
+            }
+        }
+    };
+    return CustomContextMenuItems;
+}());

scripts/customproperties.js

@@ -0,0 +1,155 @@
+/**
+ *  Custom Properties handler
+ */
+var CustomProperties = (function () {
+    function CustomProperties(selectedItem, customPropertyDialog) {
+        this.selectedItem = selectedItem;
+        this.customPropertyDialog = customPropertyDialog;
+    }
+    CustomProperties.prototype.getPropertyDialogContent = function (addInfo) {
+        var propertyDialogContent = document.createElement('div');
+        if (addInfo) {
+            var addInfo1 = addInfo;
+            var keys = Object.keys(addInfo1);
+            for (var i = 0; i < keys.length; i++) {
+                propertyDialogContent.appendChild(this.clonePropInfoTemplate(keys[i], addInfo1[keys[i]]));
+            }
+            this.createSpaceElement(propertyDialogContent);
+        }
+        propertyDialogContent.appendChild(this.clonePropTemplate());
+        this.customPropertyDialog.content = propertyDialogContent.outerHTML;
+        this.customPropertyDialog.refresh();
+        this.triggerEvents(addInfo);
+    };
+    CustomProperties.prototype.triggerEvents = function (addInfo) {
+        var removeBtnElements = document.getElementsByClassName('propertyLabelDiv');
+        var removeCheckBoxElements = document.getElementsByClassName('propertyTooltipDiv');
+        var propertyValueElements = document.getElementsByClassName('propertyValueDiv');
+        var addInfo1 = addInfo;
+        var keys = Object.keys(addInfo1);
+        for (var i = 0; i < keys.length; i++) {
+            var removeBtnElement = removeBtnElements[i + 1].children[0];
+            var removeButton = new ej.buttons.Button({ iconCss: 'sf-icon-Delete', cssClass: keys[i] });
+            removeButton.appendTo(removeBtnElement);
+            removeBtnElement.onclick = this.showConfirmationDialog.bind(this);
+            var checkboxTooltipElement = removeCheckBoxElements[i + 1].children[0];
+            var checkboxTooltip = new ej.buttons.CheckBox({ checked: Boolean(addInfo1[keys[i]].checked), cssClass: keys[i] });
+            checkboxTooltip.change = this.removeField.bind(this);
+            checkboxTooltip.appendTo(checkboxTooltipElement);
+            propertyValueElements[i + 1].children[0].value = addInfo1[keys[i]].value.toString();
+            propertyValueElements[i + 1].children[0].onchange = this.valueChange.bind(this);
+        }
+        var propButton = document.getElementsByClassName('db-custom-prop-button')[1];
+        var button = new ej.buttons.Button();
+        button.appendTo(propButton);
+        propButton.onclick = this.addCustomProperty.bind(this);
+    };
+    CustomProperties.prototype.clonePropInfoTemplate = function (key, keyValue) {
+        var propertyInfo = document.getElementsByClassName('db-custom-prop-info-template')[0].cloneNode(true);
+        propertyInfo.style.display = '';
+        var propertyName = key;
+        if (keyValue.type === 'nameField') {
+            propertyName = 'Name';
+        }
+        else if (keyValue.type === 'imageField') {
+            propertyName = 'Image URL';
+        }
+        propertyInfo.getElementsByClassName('propertyNameDiv')[0].innerHTML = propertyName;
+        var removeBtnElement = propertyInfo.getElementsByClassName('btnRemoveProperty')[0];
+        if (keyValue.type !== 'bindingField') {
+            removeBtnElement.style.display = 'None';
+        }
+        return propertyInfo;
+    };
+    CustomProperties.prototype.valueChange = function (args) {
+        var target = args.target;
+        var addInfo = this.selectedItem.selectedDiagram.selectedItems.nodes[0].addInfo;
+        addInfo[target.parentElement.parentElement.children[0].innerHTML].value = target.value;
+        var imageField = false;
+        if (addInfo['Image URL'] && addInfo['Image URL'].checked) {
+            imageField = true;
+        }
+        this.selectedItem.utilityMethods.updateLayout(this.selectedItem, true, imageField);
+    };
+    CustomProperties.prototype.removeField = function (args) {
+        var target = args.event.target;
+        var className = target.parentElement.parentElement.className.replace('e-checkbox-wrapper ', '').trim();
+        for (var i = 0; i < this.selectedItem.selectedDiagram.nodes.length; i++) {
+            var node = this.selectedItem.selectedDiagram.nodes[i];
+            if (node.id !== 'textNode') {
+                var nodeInfo = node.addInfo;
+                nodeInfo[className].checked = args.checked;
+            }
+        }
+        var imageField = false;
+        var addInfo = this.selectedItem.selectedDiagram.selectedItems.nodes[0].addInfo;
+        if (addInfo['Image URL'] && addInfo['Image URL'].checked) {
+            imageField = true;
+        }
+        this.selectedItem.utilityMethods.updateLayout(this.selectedItem, true, imageField);
+    };
+    CustomProperties.prototype.showConfirmationDialog = function (args) {
+        var target = args.target;
+        if (target.tagName.toLowerCase() === 'span') {
+            target = target.parentElement;
+        }
+        this.deleteField = target.className.replace('btnRemoveProperty e-control e-btn ', '').replace(' e-icon-btn', '').trim();
+        var dialog = document.getElementById('deleteConfirmationDialog');
+        dialog.ej2_instances[0].show();
+    };
+    CustomProperties.prototype.removeProperty = function (args) {
+        for (var i = 0; i < this.selectedItem.selectedDiagram.nodes.length; i++) {
+            var node = this.selectedItem.selectedDiagram.nodes[i];
+            if (node.id !== 'textNode') {
+                var nodeInfo = node.addInfo;
+                delete nodeInfo[this.deleteField];
+            }
+        }
+        var addInfo = this.selectedItem.selectedDiagram.selectedItems.nodes[0].addInfo;
+        this.getPropertyDialogContent(addInfo);
+        var imageField = false;
+        if (addInfo['Image URL'] && addInfo['Image URL'].checked) {
+            imageField = true;
+        }
+        this.selectedItem.utilityMethods.updateLayout(this.selectedItem, true, imageField);
+        this.deleteField = '';
+        var dialog = document.getElementById('deleteConfirmationDialog');
+        dialog.ej2_instances[0].hide();
+    };
+    CustomProperties.prototype.createSpaceElement = function (element) {
+        var spaceDiv = document.createElement('div');
+        spaceDiv.style.height = '10px';
+        element.appendChild(spaceDiv);
+    };
+    CustomProperties.prototype.clonePropTemplate = function () {
+        var propertyInfo = document.getElementsByClassName('db-custom-prop-template')[0].cloneNode(true);
+        propertyInfo.style.display = '';
+        return propertyInfo;
+    };
+    CustomProperties.prototype.addCustomProperty = function () {
+        var propName = document.getElementsByClassName('txtPropertyName')[1].value;
+        if (propName) {
+            for (var i = 0; i < this.selectedItem.selectedDiagram.nodes.length; i++) {
+                var node = this.selectedItem.selectedDiagram.nodes[i];
+                if (node.id !== 'textNode') {
+                    var nodeInfo = node.addInfo;
+                    nodeInfo[propName] = { value: '', type: 'bindingField', checked: false };
+                }
+            }
+            this.getPropertyDialogContent(this.selectedItem.selectedDiagram.selectedItems.nodes[0].addInfo);
+        }
+        else {
+            alert('Invalid Name');
+        }
+    };
+    CustomProperties.prototype.setTooltip = function (node, content) {
+        if (content) {
+            node.constraints = node.constraints | ej.diagrams.NodeConstraints.Tooltip;
+            node.tooltip = { content: content, position: 'BottomCenter', relativeMode: 'Object' };
+        }
+        else {
+            node.constraints = node.constraints & ~ej.diagrams.NodeConstraints.Tooltip;
+        }
+    };
+    return CustomProperties;
+}());

scripts/downloaddata.js

@@ -0,0 +1,142 @@
+var DownloadExampleFiles = (function () {
+    function DownloadExampleFiles(selectedItem) {
+        this.selectedItem = selectedItem;
+    }
+    DownloadExampleFiles.prototype.getData = function () {
+       var data = [
+            {
+                'Name': 'Maria Anders', 'EmployeeID': '1', 'Role': 'Managing Director', 'Department': '',
+                'Location': 'US', 'Phone': '(555) 111-1111', 'Email': 'mariaanders@fakecompany.com', 'Supervisor Name': '',
+                'Supervisor ID': '', 'Image URL': 'src/assets/dbstyle/orgchart_images/blank-male.jpg'
+            },
+            {
+                'Name': 'Carine Schmitt', 'EmployeeID': '2', 'Role': 'Project Manager', 'Department': 'Development',
+                'Location': 'US', 'Phone': '(555) 222-2222', 'Email': 'carineschmitt@fakecompany.com', 'Supervisor Name': 'Maria Anders',
+                'Supervisor ID': '1', 'Image URL': 'src/assets/dbstyle/orgchart_images/blank-male.jpg'
+            },
+            {
+                'Name': 'Daniel Tonini', 'EmployeeID': '3', 'Role': 'Project Manager', 'Department': 'Development',
+                'Location': 'US', 'Phone': '(555) 333-3333', 'Email': 'danieltonini@fakecompany.com', 'Supervisor Name': 'Maria Anders',
+                'Supervisor ID': '1', 'Image URL': 'src/assets/dbstyle/orgchart_images/blank-male.jpg'
+            },
+            {
+                'Name': 'Alex Camino', 'EmployeeID': '4', 'Role': 'Project Lead', 'Department': 'Development',
+                'Location': 'US', 'Phone': '(555) 444-4444', 'Email': 'alexcamino@fakecompany.com', 'Supervisor Name': 'Daniel Tonini',
+                'Supervisor ID': '3', 'Image URL': 'src/assets/dbstyle/orgchart_images/blank-male.jpg'
+            },
+            {
+                'Name': 'Jones Bergson', 'EmployeeID': '5', 'Role': 'Project Lead', 'Department': 'Development',
+                'Location': 'US', 'Phone': '(555) 555-5555', 'Email': 'jonesbergson@fakecompany.com', 'Supervisor Name': 'Daniel Tonini',
+                'Supervisor ID': '3', 'Image URL': 'src/assets/dbstyle/orgchart_images/blank-male.jpg'
+            },
+            {
+                'Name': 'Rene Phillips', 'EmployeeID': '6', 'Role': 'Project Lead', 'Department': 'Development',
+                'Location': 'US', 'Phone': '(555) 666-6666', 'Email': 'renephillips@fakecompany.com', 'Supervisor Name': 'Daniel Tonini',
+                'Supervisor ID': '3', 'Image URL': 'src/assets/dbstyle/orgchart_images/blank-male.jpg'
+            },
+        ];
+        return data;
+    }
+    DownloadExampleFiles.prototype.downloadCSV = function () {
+        var csv = 'Name,EmployeeID,Role,Department,Location,Phone,Email,Supervisor Name,Supervisor ID,Image URL\n';
+        var data = this.getData();
+        data.forEach(function (row) {
+            for (var prop in row) {
+                csv += row[prop].toString() + ',';
+            }
+            csv += '\n';
+        });
+        if (window.navigator.msSaveBlob) {
+            var blob = new Blob([csv], { type: 'text/plain;charset=utf-8;' });
+            window.navigator.msSaveOrOpenBlob(blob, 'people.csv');
+        }
+        else {
+            var hiddenElement = document.createElement('a');
+            hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
+            hiddenElement.target = '_blank';
+            hiddenElement.download = 'people.csv';
+            document.body.appendChild(hiddenElement);
+            hiddenElement.click();
+            hiddenElement.remove();
+        }
+    };
+    DownloadExampleFiles.prototype.downloadJSON = function () {
+        var data = this.getData();
+        var dataStr = JSON.stringify(data);
+        if (window.navigator.msSaveBlob) {
+            var blob = new Blob([dataStr], { type: 'data:text/json;charset=utf-8,' });
+            window.navigator.msSaveOrOpenBlob(blob, 'people.json');
+        }
+        else {
+            dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(dataStr);
+            var downloadAnchorNode = document.createElement('a');
+            downloadAnchorNode.setAttribute('href', dataStr);
+            downloadAnchorNode.setAttribute('download', 'people.json');
+            document.body.appendChild(downloadAnchorNode);
+            downloadAnchorNode.click();
+            downloadAnchorNode.remove();
+        }
+    };
+    DownloadExampleFiles.prototype.downloadXML = function () {
+        var xmltext = '<?xml version="1.0" encoding="utf-8" ?><people>' +
+            '<person Name="Maria Anders" Role="Managing Director" Location="US" Phone="(555) 111-1111" Email="mariaanders@fakecompany.com" ImageURL="src/assets/dbstyle/orgchart_images/blank-male.jpg">' +
+            '<person Name="Carine Schmitt" Role="Project Manager" Department="Development" Location="US" Phone="(555) 222-2222" Email="carineschmitt@fakecompany.com" SupervisorName="Maria Anders" ImageURL="src/assets/dbstyle/orgchart_images/blank-male.jpg"></person>' +
+            '<person Name="Daniel Tonini" Role="Project Manager" Department="Development" Location="US" Phone="(555) 333-3333" Email="danieltonini@fakecompany.com" SupervisorName="Maria Anders" ImageURL="src/assets/dbstyle/orgchart_images/blank-male.jpg">' +
+            '<person Name="Alex Camino" Role="Project Manager" Department="Development" Location="US" Phone="(555) 444-4444" Email="alexcamino@fakecompany.com" SupervisorName="Daniel Tonini" ImageURL="src/assets/dbstyle/orgchart_images/blank-male.jpg"></person>' +
+            '<person Name="Jones Bergson" Role="Project Lead" Department="Development" Location="US" Phone="(555) 555-5555" Email="jonesbergson@fakecompany.com" SupervisorName="Daniel Tonini" ImageURL="src/assets/dbstyle/orgchart_images/blank-male.jpg"></person>' +
+            '<person Name="Rene Phillips" Role="Project Lead" Department="Development" Location="US" Phone="(555) 666-6666" Email="renephillips@fakecompany.com" SupervisorName="Daniel Tonini" ImageURL="src/assets/dbstyle/orgchart_images/blank-male.jpg"></person>' +
+            '</person>' +
+            '</person>' +
+            '</people>';
+        var filename = 'people.xml';
+        var bb = new Blob([xmltext], { type: 'text/plain' });
+        if (window.navigator.msSaveBlob) {
+            window.navigator.msSaveOrOpenBlob(bb, filename);
+        }
+        else {
+            var pom = document.createElement('a');
+            pom.setAttribute('href', window.URL.createObjectURL(bb));
+            pom.setAttribute('download', filename);
+            document.body.appendChild(pom);
+            pom.click();
+            pom.remove();
+        }
+    };
+    DownloadExampleFiles.prototype.downloadFormatChange = function (args) {
+        if (args.event) {
+            var target = args.event.target;
+            if (target.parentElement.innerText === 'csv') {
+                selectedItem.orgDataSettings.buttonContent = document.getElementById("btnDownloadFile").ej2_instances[0].content = 'Download Example CSV';
+                document.getElementById("defaultfileupload").ej2_instances[0].allowedExtensions = '.csv';
+                document.getElementById('descriptionText1').innerHTML = 'Make sure that each column of the table has a header';
+                document.getElementById('descriptionText2').innerHTML = 'Each employee should have a reporting person (except the top most employee of the organization)' +
+                    ', and it should be indicated by any field from the data source.';
+            }
+            else if (target.parentElement.innerText === 'xml') {
+                selectedItem.orgDataSettings.buttonContent = document.getElementById("btnDownloadFile").ej2_instances[0].content = 'Download Example XML';
+                document.getElementById("defaultfileupload").ej2_instances[0].allowedExtensions = '.xml';
+                document.getElementById('descriptionText1').innerHTML = 'Make sure that XML document has a unique root element and start-tags have matching end-tags.';
+                document.getElementById('descriptionText2').innerHTML = 'All XML elements will be considered employees and will act as a reporting person for its child XML elements.';
+            }
+            else {
+                selectedItem.orgDataSettings.buttonContent = document.getElementById("btnDownloadFile").ej2_instances[0].content = 'Download Example JSON';
+                document.getElementById("defaultfileupload").ej2_instances[0].allowedExtensions = '.json';
+                document.getElementById('descriptionText1').innerHTML = 'Make sure that you have defined a valid JSON format.';
+                document.getElementById('descriptionText2').innerHTML = 'Each employee should have a reporting person (except the top most employee of the organization)' +
+                    ', and it should be indicated by any field from the data source.';
+            }
+        }
+    };
+    DownloadExampleFiles.prototype.downloadExampleFiles = function (args) {
+        if (selectedItem.orgDataSettings.buttonContent === 'Download Example CSV') {
+            this.downloadCSV();
+        }
+        else if (selectedItem.orgDataSettings.buttonContent === 'Download Example XML') {
+            this.downloadXML();
+        }
+        else {
+            this.downloadJSON();
+        }
+    };
+    return DownloadExampleFiles;
+}());

scripts/dropdowndatasource.js

@@ -0,0 +1,226 @@
+var DropDownDataSources = (function () {
+
+    function DropDownDataSources() {
+
+    };
+    DropDownDataSources.prototype.fileFormats = function () {
+        var fileFormats = [
+            { text: 'JPG', value: 'JPG' }, { text: 'PNG', value: 'PNG' },
+            { text: 'BMP', value: 'BMP' }, { text: 'SVG', value: 'SVG' }
+        ];
+        return fileFormats;
+    };
+    DropDownDataSources.prototype.diagramRegions = function () {
+        var diagramRegions = [
+            { text: 'Content', value: 'Content' }, { text: 'PageSettings', value: 'PageSettings' }
+        ];
+        return diagramRegions;
+    };
+    DropDownDataSources.prototype.importFormat = function () {
+        var importFormat = [
+            { text: 'CSV', value: 'CSV' }, { text: 'XML', value: 'XML' }, { text: 'JSON', value: 'JSON' }
+        ];
+        return importFormat;
+    };
+    DropDownDataSources.prototype.borderStyles = function () {
+        var borderStyles = [
+            { text: 'None', value: 'None', className: 'ddl-svg-style ddl_linestyle_none' },
+            { text: '1,2', value: '1,2', className: 'ddl-svg-style ddl_linestyle_one_two' },
+            { text: '3,3', value: '3,3', className: 'ddl-svg-style ddl_linestyle_three_three' },
+            { text: '5,3', value: '5,3', className: 'ddl-svg-style ddl_linestyle_five_three' },
+            { text: '4,4,1', value: '4,4,1', className: 'ddl-svg-style ddl_linestyle_four_four_one' }
+        ];
+        return borderStyles;
+    };
+    DropDownDataSources.prototype.fontFamilyList = function () {
+        var fontFamilyList = [
+            { text: 'Arial', value: 'Arial' },
+            { text: 'Aharoni', value: 'Aharoni' },
+            { text: 'Bell MT', value: 'Bell MT' },
+            { text: 'Fantasy', value: 'Fantasy' },
+            { text: 'Times New Roman', value: 'Times New Roman' },
+            { text: 'Segoe UI', value: 'Segoe UI' },
+            { text: 'Verdana', value: 'Verdana' },
+        ];
+        return fontFamilyList;
+    };
+    DropDownDataSources.prototype.decoratorList = function () {
+        var decoratorList = [
+            { text: 'None', value: 'None' },
+            { text: 'Arrow', value: 'Arrow' },
+            { text: 'Diamond', value: 'Diamond' },
+            { text: 'OpenArrow', value: 'OpenArrow' },
+            { text: 'Circle', value: 'Circle' },
+            { text: 'Square', value: 'Square' },
+            { text: 'Fletch', value: 'Fletch' },
+            { text: 'OpenFetch', value: 'OpenFetch' },
+            { text: 'IndentedArrow', value: 'IndentedArrow' },
+            { text: 'OutdentedArrow', value: 'OutdentedArrow' },
+            { text: 'DoubleArrow', value: 'DoubleArrow' }
+        ];
+        return decoratorList;
+    };
+    DropDownDataSources.prototype.textPositionDataSource= function() {
+        var textPosition = [
+            { text: 'TopLeft', value: 'TopLeft' }, { text: 'TopCenter', value: 'TopCenter' },
+            { text: 'TopRight', value: 'TopRight' }, { text: 'MiddleLeft', value: 'MiddleLeft' },
+            { text: 'Center', value: 'Center' }, { text: 'MiddleRight', value: 'MiddleRight' },
+            { text: 'BottomLeft', value: 'BottomLeft' }, { text: 'BottomCenter', value: 'BottomCenter' },
+            { text: 'BottomRight', value: 'BottomRight' },
+        ];
+        return textPosition;
+    }
+    DropDownDataSources.prototype.lineTypes = function () {
+        var lineTypes = [
+            { text: 'Straight', value: 'Straight' }, { text: 'Orthogonal', value: 'Orthogonal' },
+            { text: 'Bezier', value: 'Bezier' }
+        ];
+        return lineTypes;
+    };
+    DropDownDataSources.prototype.gradientDirections = function () {
+        var gradientDirections = [
+            { text: 'BottomToTop', value: 'BottomToTop' }, { text: 'TopToBottom', value: 'TopToBottom' },
+            { text: 'RightToLeft', value: 'RightToLeft' }, { text: 'LeftToRight', value: 'LeftToRight' }
+        ];
+        return gradientDirections;
+    };
+    DropDownDataSources.prototype.drawShapesList = function () {
+        var drawShapesList = [
+            { iconCss: 'sf-icon-Square', text: 'Rectangle' },
+            { iconCss: 'sf-icon-Ellipse', text: 'Ellipse' },
+            { iconCss: 'sf-icon-Triangle', text: 'Polygon' }
+        ];
+        return drawShapesList;
+    };
+    DropDownDataSources.prototype.drawConnectorsList = function () {
+        var drawConnectorsList = [
+            { iconCss: 'sf-icon-StraightLine', text: 'Straight Line' },
+            { iconCss: 'sf-icon-ConnectorMode', text: 'Orthogonal Line' },
+            { iconCss: 'sf-icon-BeizerLine', text: 'Bezier' }
+        ];
+        return drawConnectorsList;
+    };
+    DropDownDataSources.prototype.orderCommandsList = function () {
+        var orderCommandsList = [
+            { iconCss: 'sf-icon-Sendback', text: 'Send To Back' },
+            { iconCss: 'sf-icon-BringFront', text: 'Bring To Front' },
+            { iconCss: 'sf-icon-SendBackward', text: 'Send Backward' },
+            { iconCss: 'sf-icon-BringForward', text: 'Bring Forward' },
+        ];
+        return orderCommandsList;
+    };
+    DropDownDataSources.prototype.mindmapLevels = function () {
+        var mindmapLevels = [
+            { text: 'Root', value: 'Level0' }, { text: 'Level1', value: 'Level1' },
+            { text: 'Level2', value: 'Level2' }, { text: 'Level3', value: 'Level3' },
+            { text: 'Level4', value: 'Level4' }, { text: 'Level5', value: 'Level5' },
+        ];
+        return mindmapLevels;
+    };
+    DropDownDataSources.prototype.zoomMenuItems = function () {
+        var zoomMenuItems = [
+            { text: '400%' }, { text: '300%' }, { text: '200%' }, { text: '150%' },
+            { text: '100%' }, { text: '75%' }, { text: '50%' }, { text: '25%' }, { separator: true },
+            { text: 'Fit To Screen' }
+            // { separator: true },
+            // { text: 'Custom' },
+        ];
+        return zoomMenuItems;
+    };
+    DropDownDataSources.prototype.paperList = function () {
+        var paperList = [
+            { text: 'Letter (8.5 in x 11 in)', value: 'Letter' }, { text: 'Legal (8.5 in x 14 in)', value: 'Legal' },
+            { text: 'Tabloid (279 mm x 432 mm)', value: 'Tabloid' }, { text: 'A3 (297 mm x 420 mm)', value: 'A3' },
+            { text: 'A4 (210 mm x 297 mm)', value: 'A4' }, { text: 'A5 (148 mm x 210 mm)', value: 'A5' },
+            { text: 'A6 (105 mm x 148 mm)', value: 'A6' }, { text: 'Custom', value: 'Custom' },
+        ];
+        return paperList;
+    };
+    DropDownDataSources.prototype.listViewData = function () {
+        var listViewData = [
+            { text: 'Flow', id: 'flowShapes', checked: true },
+            { text: 'Basic', id: 'basicShapes', checked: true },
+            { text: 'BPMN', id: 'bpmnShapes', checked: true },
+            { text: 'Connectors', id: 'connectorsShapes', checked: true },
+            { text: 'Electrical', id: 'electricalShapes', checked: false },
+            { text: 'Network', id: 'networkShapes', checked: false },
+            { text: 'Floorplan', id: 'floorShapes', checked: false },
+        ];
+        return listViewData;
+    };
+    DropDownDataSources.prototype.getFileMenuItems = function () {
+        var menuItems = [
+            { text: 'New' }, { text: 'Open' }, { separator: true },
+            { text: 'Save', iconCss: 'sf-icon-Save' }, { text: 'Save As' },
+            // { text: 'Rename' }, { separator: true },
+            { text: 'Export', iconCss: 'sf-icon-Export' }, { separator: true },
+            { text: 'Print', iconCss: 'sf-icon-Print' }
+        ];
+        return menuItems;
+    };
+    DropDownDataSources.prototype.getEditMenuItems = function () {
+        var menuItems = [
+            { text: 'Undo', iconCss: 'sf-icon-Undo' }, { text: 'Redo', iconCss: 'sf-icon-Redo' }, { separator: true },
+            { text: 'Cut', iconCss: 'sf-icon-Cut' }, { text: 'Copy', iconCss: 'sf-icon-Copy' },
+            { text: 'Paste', iconCss: 'sf-icon-Paste' }, { text: 'Delete', iconCss: 'sf-icon-Delete' }, { separator: true },
+            { text: 'Duplicate' }, { separator: true },
+            // { text: 'Edit Data' },
+            { text: 'Edit Tooltip' }, { separator: true },
+            { text: 'Select All' },
+        ];
+        return menuItems;
+    };
+    DropDownDataSources.prototype.getViewMenuItems = function () {
+        var menuItems = [
+            { text: 'Zoom In', iconCss: 'sf-icon-ZoomIn' }, { text: 'Zoom Out', iconCss: 'sf-icon-ZoomOut' }, { separator: true },
+            { text: 'Fit To Screen' }, { separator: true },
+            { text: 'Show Rulers' }, { text: 'Show Guides', iconCss: 'sf-icon-Selection' },
+            { text: 'Show Grid', iconCss: 'sf-icon-Selection' }, { separator: true },
+            { text: 'Snap To Grid' }
+        ];
+        return menuItems;
+    };
+    DropDownDataSources.prototype.getArrangeMenuItems = function () {
+        var menuItems1 = [
+            { text: 'Send To Back', iconCss: 'sf-icon-Sendback' }, { text: 'Bring To Front', iconCss: 'sf-icon-BringFront' },
+            { text: 'Send Backward', iconCss: 'sf-icon-SendBackward' }, { text: 'Bring Forward', iconCss: 'sf-icon-BringForward' },
+            { separator: true },
+            {
+                text: 'Align Objects', items: [
+                    { text: 'Left', iconCss: 'sf-icon-AlignLeft' }, { text: 'Right', iconCss: 'sf-icon-AlignRight' },
+                    { text: 'Center', iconCss: 'sf-icon-AlignHorizontally' }, { text: 'Top', iconCss: 'sf-icon-AilgnTop' },
+                    { text: 'Bottom', iconCss: 'sf-icon-AlignBottom' }, { text: 'Middle', iconCss: 'sf-icon-AlignVertically' }
+                ]
+            },
+            {
+                text: 'Distribute Objects', items: [
+                    { text: 'Horizontally', iconCss: 'sf-icon-DistributeHorizontal' },
+                    { text: 'Vertically', iconCss: 'sf-icon-DistributeVertical' }
+                ]
+            },
+            {
+                text: 'Match Size', items: [
+                    { text: 'Both Width and Height' }, { text: 'Width' }, { text: 'Height' }
+                ]
+            }, { separator: true },
+            { text: 'Lock' }, { text: 'Unlock' }, { separator: true },
+            { text: 'Group' }, { text: 'Ungroup' }
+        ];
+        return menuItems1;
+    };
+    DropDownDataSources.prototype.getWindowMenuItems = function () {
+        var menuItems = [
+            { text: 'Show Toolbar', iconCss: 'sf-icon-Selection' }, { text: 'Show Stencil', iconCss: 'sf-icon-Selection' },
+            { text: 'Show Properties', iconCss: 'sf-icon-Selection' }, { text: 'Show Layers' },
+            { text: 'Show Pager', iconCss: 'sf-icon-Selection' }, { text: 'Themes' }
+        ];
+        return menuItems;
+    };
+    DropDownDataSources.prototype.getHelpMenuItems = function () {
+        var menuItems = [
+            { text: 'Keyboard Shortcuts' }, { text: 'Documentation' }
+        ];
+        return menuItems;
+    };
+    return DropDownDataSources;
+}());

scripts/events.js

@@ -0,0 +1,697 @@
+var DiagramClientSideEvents = (function () {
+    function DiagramClientSideEvents(selectedItem, page) {
+        this.selectedItem = selectedItem;
+        this.page = page;
+    }
+    DiagramClientSideEvents.prototype.selectionChange = function (args) {
+        var diagram = selectedItem.selectedDiagram;
+        if (selectedItem.preventSelectionChange || selectedItem.isLoading) {
+            return;
+        }
+        if (args.state === 'Changed') {
+            if (selectedItem.diagramType === 'MindMap') {
+                if (args.newValue.length === 1 && diagram.selectedItems.nodes.length === 1) {
+                    var node = args.newValue[0];
+                    diagram.selectedItems.userHandles[0].visible = false;
+                    diagram.selectedItems.userHandles[1].visible = false;
+                    diagram.selectedItems.userHandles[2].visible = false;
+                    if (node.id !== 'textNode' && !(node instanceof ej.diagrams.Connector)) {
+                        var addInfo = node.addInfo;
+                        if (node.id === 'rootNode') {
+                            diagram.selectedItems.userHandles[0].visible = true;
+                            diagram.selectedItems.userHandles[1].visible = true;
+                        }
+                        else if (addInfo.orientation.toString() === 'Left') {
+                            diagram.selectedItems.userHandles[0].visible = true;
+                            diagram.selectedItems.userHandles[2].visible = true;
+                            diagram.selectedItems.userHandles[2].side = 'Left';
+                        }
+                        else {
+                            diagram.selectedItems.userHandles[1].visible = true;
+                            diagram.selectedItems.userHandles[2].visible = true;
+                            diagram.selectedItems.userHandles[2].side = 'Right';
+                        }
+                        selectedItem.utilityMethods.bindMindMapProperties(node, selectedItem);
+                    }
+                    if (node.addInfo && node.addInfo.level !== undefined) {
+                        selectedItem.mindmapSettings.levelType.value = 'Level' + node.addInfo.level;
+                    }
+                }
+            }
+            else if (selectedItem.diagramType === 'OrgChart') {
+                if (args.newValue.length === 1) {
+                    var node = args.newValue[0];
+                    diagram.selectedItems.userHandles[0].visible = false;
+                    diagram.selectedItems.userHandles[1].visible = false;
+                    diagram.selectedItems.userHandles[2].visible = false;
+                    if (node.id !== 'textNode' && node instanceof ej.diagrams.Node) {
+                        diagram.selectedItems.userHandles[0].visible = true;
+                        diagram.selectedItems.userHandles[1].visible = true;
+                        diagram.selectedItems.userHandles[2].visible = true;
+                    }
+                }
+            }
+            else {
+                var selectedItems = selectedItem.selectedDiagram.selectedItems.nodes;
+                selectedItems = selectedItems.concat(selectedItem.selectedDiagram.selectedItems.connectors);
+                selectedItem.utilityMethods.enableToolbarItems(selectedItems);
+                var nodeContainer = document.getElementById('nodePropertyContainer');
+                nodeContainer.classList.remove('multiple');
+                nodeContainer.classList.remove('connector');
+                if (selectedItems.length > 1) {
+                    this.multipleSelectionSettings(selectedItems);
+                }
+                else if (selectedItems.length === 1) {
+                    this.singleSelectionSettings(selectedItems[0]);
+                }
+                else {
+                    selectedItem.utilityMethods.objectTypeChange('diagram');
+                }
+            }
+        }
+    };
+
+    DiagramClientSideEvents.prototype.multipleSelectionSettings = function (selectedItems) {
+        selectedItem.utilityMethods.objectTypeChange('None');
+        var showConnectorPanel = false, showNodePanel = false;
+        var showTextPanel = false, showConTextPanel = false;
+        var nodeContainer = document.getElementById('nodePropertyContainer');
+        for (var i = 0; i < selectedItems.length; i++) {
+            var object = selectedItems[i];
+            if (object instanceof ej.diagrams.Node && (!showNodePanel || !showTextPanel)) {
+                showNodePanel = true;
+                showTextPanel = object.annotations.length > 0 && object.annotations[0].content ? true : false;
+            }
+            else if (object instanceof ej.diagrams.Connector && (!showConnectorPanel || !showConTextPanel)) {
+                showConnectorPanel = true;
+                showConTextPanel = object.annotations.length > 0 && object.annotations[0].content ? true : false;
+            }
+        }
+        var selectItem1 = selectedItem.selectedDiagram.selectedItems;
+        if (showNodePanel) {
+            nodeContainer.style.display = '';
+            nodeContainer.classList.add('multiple');
+            if (showConnectorPanel) {
+                nodeContainer.classList.add('connector');
+            }
+            selectedItem.utilityMethods.bindNodeProperties(selectItem1.nodes[0], selectedItem);
+        }
+        if (showConnectorPanel && !showNodePanel) {
+            document.getElementById('connectorPropertyContainer').style.display = '';
+            selectedItem.utilityMethods.bindConnectorProperties(selectItem1.connectors[0], selectedItem);
+        }
+        if (showTextPanel || showConTextPanel) {
+            document.getElementById('textPropertyContainer').style.display = '';
+            if (showTextPanel && showConTextPanel) {
+                document.getElementById('textPositionDiv').style.display = 'none';
+                document.getElementById('textColorDiv').className = 'col-xs-6 db-col-left';
+            }
+            else {
+                document.getElementById('textPositionDiv').style.display = '';
+                document.getElementById('textColorDiv').className = 'col-xs-6 db-col-right';
+                if (showConTextPanel) {
+                    diagramEvents.ddlTextPosition.dataSource = selectedItem.textProperties.getConnectorTextPositions();
+                    //selectedItem.utilityMethods.bindTextProperties(selectItem1.connectors[0].annotations[0].style, selectedItem);
+                }
+                else {
+                    diagramEvents.ddlTextPosition.dataSource = selectedItem.textProperties.getNodeTextPositions();
+                    //selectedItem.utilityMethods.bindTextProperties(selectItem1.connectors[0].annotations[0].style, selectedItem);
+                }
+                diagramEvents.ddlTextPosition.dataBind();
+            }
+        }
+    };
+    DiagramClientSideEvents.prototype.singleSelectionSettings = function (selectedObject) {
+        var object = null;
+        if (selectedObject instanceof ej.diagrams.Node) {
+            selectedItem.utilityMethods.objectTypeChange('node');
+            object = selectedObject;
+            selectedItem.utilityMethods.bindNodeProperties(object, selectedItem);
+        }
+        else if (selectedObject instanceof  ej.diagrams.Connector) {
+            selectedItem.utilityMethods.objectTypeChange('connector');
+            object = selectedObject;
+            selectedItem.utilityMethods.bindConnectorProperties(object, selectedItem);
+        }
+        if (object.shape && object.shape.type === 'Text') {
+            document.getElementById('textPropertyContainer').style.display = '';
+            document.getElementById('toolbarTextAlignmentDiv').style.display = 'none';
+            document.getElementById('textPositionDiv').style.display = 'none';
+            document.getElementById('textColorDiv').className = 'col-xs-6 db-col-left';
+            selectedItem.utilityMethods.bindTextProperties(object.style, selectedItem);
+        }
+        else if (object.annotations.length > 0 && object.annotations[0].content) {
+            document.getElementById('textPropertyContainer').style.display = '';
+            var annotation = null;
+            document.getElementById('toolbarTextAlignmentDiv').style.display = '';
+            document.getElementById('textPositionDiv').style.display = '';
+            document.getElementById('textColorDiv').className = 'col-xs-6 db-col-right';
+            selectedItem.utilityMethods.bindTextProperties(object.annotations[0].style, selectedItem);
+            selectedItem.utilityMethods.updateHorVertAlign(object.annotations[0].horizontalAlignment, object.annotations[0].verticalAlignment);
+            if (object.annotations[0] instanceof ej.diagrams.ShapeAnnotation) {
+                annotation = object.annotations[0];
+                diagramEvents.ddlTextPosition.dataSource = selectedItem.textProperties.getNodeTextPositions();
+                diagramEvents.ddlTextPosition.value = selectedItem.textProperties.textPosition = null;
+                diagramEvents.ddlTextPosition.dataBind();
+                diagramEvents.ddlTextPosition.value = selectedItem.textProperties.textPosition = selectedItem.utilityMethods.getPosition(annotation.offset);
+                diagramEvents.ddlTextPosition.dataBind();
+            }
+            else if (object.annotations[0] instanceof ej.diagrams.PathAnnotation) {
+                annotation = object.annotations[0];
+                diagramEvents.ddlTextPosition.dataSource = selectedItem.textProperties.getConnectorTextPositions();
+                diagramEvents.ddlTextPosition.value = selectedItem.textProperties.textPosition = null;
+                diagramEvents.ddlTextPosition.dataBind();
+                diagramEvents.ddlTextPosition.value = selectedItem.textProperties.textPosition = annotation.alignment;
+                diagramEvents.ddlTextPosition.dataBind();
+            }
+        }
+    };
+    DiagramClientSideEvents.prototype.nodePositionChange = function (args) {
+        selectedItem.preventPropertyChange = true;
+        selectedItem.nodeProperties.offsetX.value = (Math.round(args.newValue.offsetX * 100) / 100);
+        selectedItem.nodeProperties.offsetY.value = (Math.round(args.newValue.offsetY * 100) / 100);
+        if (args.state === 'Completed') {
+            selectedItem.isModified = true;
+            selectedItem.preventPropertyChange = false;
+        }
+    };
+    DiagramClientSideEvents.prototype.nodeSizeChange = function (args) {
+        selectedItem.preventPropertyChange = true;
+        selectedItem.nodeProperties.width.value = (Math.round(args.newValue.width * 100) / 100);
+        selectedItem.nodeProperties.height.value = (Math.round(args.newValue.height * 100) / 100);
+        if (args.state === 'Completed') {
+            selectedItem.isModified = true;
+            selectedItem.preventPropertyChange = false;
+        }
+    };
+    DiagramClientSideEvents.prototype.textEdit = function (args) {
+        if (selectedItem.diagramType === 'MindMap') {
+            setTimeout(function () { selectedItem.selectedDiagram.doLayout(); }, 10);
+        }
+        selectedItem.isModified = true;
+    };
+
+    DiagramClientSideEvents.prototype.scrollChange = function (args) {
+        selectedItem.scrollSettings.currentZoom = (args.newValue.CurrentZoom * 100).toFixed() + '%';
+    };
+    DiagramClientSideEvents.prototype.nodeRotationChange = function (args) {
+        selectedItem.preventPropertyChange = true;
+        selectedItem.nodeProperties.rotateAngle.value = (Math.round(args.newValue.rotateAngle * 100) / 100);
+        selectedItem.preventPropertyChange = false;
+        if (args.state === 'Completed') {
+            selectedItem.isModified = true;
+        }
+    };
+    DiagramClientSideEvents.prototype.diagramContextMenuClick = function (args) {
+        var diagram = selectedItem.selectedDiagram;
+        selectedItem.customContextMenu.updateBpmnShape(diagram, args.item);
+        var text = args.item.text;
+        if (text === 'Group' || text === 'Un Group' || text === 'Undo' || text === 'Redo' || text === 'Select All') {
+            selectedItem.isModified = true;
+            if (selectedItem.diagramType === 'MindMap' || selectedItem.diagramType === 'OrgChart') {
+                if (text === 'Undo' || text === 'Redo') {
+                    args.cancel = true;
+                    if (text === 'Undo') {
+                        selectedItem.utilityMethods.undoRedoLayout(true, selectedItem);
+                    }
+                    else if (text === 'Redo') {
+                        selectedItem.utilityMethods.undoRedoLayout(false, selectedItem);
+                    }
+                }
+            }
+        }
+        if (selectedItem.diagramType === 'MindMap' || selectedItem.diagramType === 'OrgChart') {
+            if (text === 'Copy') {
+                selectedItem.utilityMethods.copyLayout(selectedItem);
+            }
+            else if (text === 'Cut') {
+                args.cancel = true;
+                selectedItem.utilityMethods.cutLayout(selectedItem);
+            }
+            else if (text === 'Paste') {
+                args.cancel = true;
+                selectedItem.utilityMethods.pasteLayout(selectedItem);
+            }
+        }
+    };
+    DiagramClientSideEvents.prototype.diagramContextMenuOpen = function (args) {
+        var diagram = selectedItem.selectedDiagram;
+        args.hiddenItems = args.hiddenItems.concat(selectedItem.customContextMenu.getHiddenMenuItems(diagram));
+    };
+    DiagramClientSideEvents.prototype.dragEnter = function (args) {
+        var obj = args.element;
+        var ratio = 100 / obj.width;
+        obj.width = 100;
+        obj.height *= ratio;
+    };
+    DiagramClientSideEvents.prototype.historyChange = function (args) {
+        var diagram = selectedItem.selectedDiagram;
+        var toolbarContainer = document.getElementsByClassName('db-toolbar-container')[0];
+        toolbarContainer.classList.remove('db-undo');
+        toolbarContainer.classList.remove('db-redo');
+        if (diagram.historyManager.undoStack.length > 0) {
+            toolbarContainer.classList.add('db-undo');
+        }
+        if (diagram.historyManager.redoStack.length > 0) {
+            toolbarContainer.classList.add('db-redo');
+        }
+    };
+    return DiagramClientSideEvents;
+}());
+
+var DiagramPropertyBinding = (function () {
+    function DiagramPropertyBinding(selectedItem, page) {
+        this.selectedItem = selectedItem;
+        this.page = page;
+    }
+    DiagramPropertyBinding.prototype.pageBreaksChange = function (args) {
+        if (args.event) {
+            selectedItem.pageSettings.pageBreaks = args.checked;
+            selectedItem.selectedDiagram.pageSettings.showPageBreaks = args.checked;
+        }
+    };
+    DiagramPropertyBinding.prototype.paperListChange = function (args) {
+        if (args.element) {
+            var diagram = selectedItem.selectedDiagram;
+            document.getElementById('pageDimension').style.display = 'none';
+            document.getElementById('pageOrientation').style.display = '';
+            selectedItem.pageSettings.paperSize = args.value;
+            var paperSize = selectedItem.utilityMethods.getPaperSize(selectedItem.pageSettings.paperSize);
+            var pageWidth = paperSize.pageWidth;
+            var pageHeight = paperSize.pageHeight;
+            if (pageWidth && pageHeight) {
+                if (selectedItem.pageSettings.isPortrait) {
+                    if (pageWidth > pageHeight) {
+                        var temp = pageWidth;
+                        pageWidth = pageHeight;
+                        pageHeight = temp;
+                    }
+                }
+                else {
+                    if (pageHeight > pageWidth) {
+                        var temp = pageHeight;
+                        pageHeight = pageWidth;
+                        pageWidth = temp;
+                    }
+                }
+                diagram.pageSettings.width = pageWidth;
+                diagram.pageSettings.height = pageHeight;
+                selectedItem.pageSettings.pageWidth = pageWidth;
+                selectedItem.pageSettings.pageHeight = pageHeight;
+                diagram.dataBind();
+            }
+            else {
+                document.getElementById('pageOrientation').style.display = 'none';
+                document.getElementById('pageDimension').style.display = '';
+            }
+        }
+    };
+    DiagramPropertyBinding.prototype.pageDimensionChange = function (args) {
+        if (args.event) {
+            var pageWidth = Number(selectedItem.pageSettings.pageWidth);
+            var pageHeight = Number(selectedItem.pageSettings.pageHeight);
+            var target = args.event.target;
+            if (target.tagName.toLowerCase() === 'span') {
+                target = target.parentElement.children[0];
+            }
+            var diagram = selectedItem.selectedDiagram;
+            if (target.id === 'pageWidth') {
+                pageWidth = Number(target.value.replace(/,/g, ''));
+            }
+            else {
+                pageHeight = Number(target.value.replace(/,/g, ''));
+            }
+            if (pageWidth && pageHeight) {
+                if (pageWidth > pageHeight) {
+                    selectedItem.pageSettings.isPortrait = false;
+                    selectedItem.pageSettings.isLandscape = true;
+                    diagram.pageSettings.orientation = 'Landscape';
+                }
+                else {
+                    selectedItem.pageSettings.isPortrait = true;
+                    selectedItem.pageSettings.isLandscape = false;
+                    diagram.pageSettings.orientation = 'Portrait';
+                }
+                selectedItem.pageSettings.pageWidth = diagram.pageSettings.width = pageWidth;
+                selectedItem.pageSettings.pageHeight = diagram.pageSettings.height = pageHeight;
+                diagram.dataBind();
+            }
+        }
+    };
+    DiagramPropertyBinding.prototype.pageOrientationChange = function (args) {
+        if (args.event) {
+            var pageWidth = Number(selectedItem.pageSettings.pageWidth);
+            var pageHeight = Number(selectedItem.pageSettings.pageHeight);
+            var target = args.event.target;
+            var diagram = selectedItem.selectedDiagram;
+            switch (target.id) {
+                case 'pagePortrait':
+                    selectedItem.pageSettings.isPortrait = true;
+                    selectedItem.pageSettings.isLandscape = false;
+                    diagram.pageSettings.orientation = 'Portrait';
+                    break;
+                case 'pageLandscape':
+                    selectedItem.pageSettings.isPortrait = false;
+                    selectedItem.pageSettings.isLandscape = true;
+                    diagram.pageSettings.orientation = 'Landscape';
+                    break;
+            }
+            diagram.dataBind();
+            selectedItem.pageSettings.pageWidth = diagram.pageSettings.width;
+            selectedItem.pageSettings.pageHeight = diagram.pageSettings.height;
+        }
+    };
+    DiagramPropertyBinding.prototype.pageBackgroundChange1 = function (args) {
+        if (args.currentValue) {
+            // let target: HTMLInputElement = args.target as HTMLInputElement;
+            var diagram = selectedItem.selectedDiagram;
+            diagram.pageSettings.background = {
+                color: args.currentValue.rgba
+            };
+            diagram.dataBind();
+        }
+    };
+    DiagramPropertyBinding.prototype.textPositionChange = function (args) {
+        if (args.value !== null) {
+            this.textPropertyChange('textPosition', args.value);
+        }
+    };
+    DiagramPropertyBinding.prototype.toolbarTextStyleChange = function (args) {
+        this.textPropertyChange(args.item.tooltipText, false);
+    };
+    DiagramPropertyBinding.prototype.toolbarTextSubAlignChange = function (args) {
+        var propertyName = args.item.tooltipText.replace(/[' ']/g, '');
+        this.textPropertyChange(propertyName, propertyName);
+    };
+    DiagramPropertyBinding.prototype.toolbarTextAlignChange = function (args) {
+        var propertyName = args.item.tooltipText.replace('Align ', '');
+        this.textPropertyChange(propertyName, propertyName);
+    };
+    DiagramPropertyBinding.prototype.textPropertyChange = function (propertyName, propertyValue) {
+        if (!selectedItem.preventPropertyChange) {
+            var diagram = selectedItem.selectedDiagram;
+            var selectedObjects = diagram.selectedItems.nodes;
+            selectedObjects = selectedObjects.concat(diagram.selectedItems.connectors);
+            propertyName = propertyName.toLowerCase();
+            if (selectedObjects.length > 0) {
+                for (var i = 0; i < selectedObjects.length; i++) {
+                    var node = selectedObjects[i];
+                    if (node instanceof ej.diagrams.Node || node instanceof ej.diagrams.Connector) {
+                        if (node.annotations.length > 0) {
+                            for (var j = 0; j < node.annotations.length; j++) {
+                                var annotation = null;
+                                if (node.annotations[j] instanceof ej.diagrams.ShapeAnnotation) {
+                                    annotation = node.annotations[j];
+                                    if (propertyName === 'textposition') {
+                                        selectedItem.textProperties.textPosition = propertyValue.toString();
+                                        annotation.offset = selectedItem.utilityMethods.getOffset(propertyValue);
+                                    }
+                                }
+                                else if (node.annotations[j] instanceof ej.diagrams.PathAnnotation) {
+                                    annotation = node.annotations[j];
+                                    if (propertyName === 'textposition') {
+                                        selectedItem.textProperties.textPosition = propertyValue.toString();
+                                        annotation.alignment = selectedItem.textProperties.textPosition;
+                                    }
+                                }
+                                if (propertyName === 'left' || propertyName === 'right' || propertyName === 'center') {
+                                    annotation.horizontalAlignment = propertyValue;
+                                    selectedItem.utilityMethods.updateHorVertAlign(annotation.horizontalAlignment, annotation.verticalAlignment);
+                                }
+                                else if (propertyName === 'top' || propertyName === 'bottom') {
+                                    annotation.verticalAlignment = propertyValue;
+                                    selectedItem.utilityMethods.updateHorVertAlign(annotation.horizontalAlignment, annotation.verticalAlignment);
+                                }
+                                else if (propertyName === 'middle') {
+                                    annotation.verticalAlignment = 'Center';
+                                    selectedItem.utilityMethods.updateHorVertAlign(annotation.horizontalAlignment, annotation.verticalAlignment);
+                                }
+                                else {
+                                    this.updateTextProperties(propertyName, propertyValue, annotation.style);
+                                }
+                            }
+                        }
+                        else if (node.shape && node.shape.type === 'Text') {
+                            this.updateTextProperties(propertyName, propertyValue, node.style);
+                        }
+                    }
+                }
+                diagram.dataBind();
+                selectedItem.isModified = true;
+            }
+        }
+    };
+    DiagramPropertyBinding.prototype.updateTextProperties = function (propertyName, propertyValue, annotation) {
+        switch (propertyName) {
+            case 'bold':
+                annotation.bold = !annotation.bold;
+                this.updateToolbarState('toolbarTextStyle', annotation.bold, 0);
+                break;
+            case 'italic':
+                annotation.italic = !annotation.italic;
+                this.updateToolbarState('toolbarTextStyle', annotation.italic, 1);
+                break;
+            case 'underline':
+                selectedItem.textProperties.textDecoration = !selectedItem.textProperties.textDecoration;
+                annotation.textDecoration = annotation.textDecoration === 'None' || !annotation.textDecoration ? 'Underline' : 'None';
+                this.updateToolbarState('toolbarTextStyle', selectedItem.textProperties.textDecoration, 2);
+                break;
+            case 'aligntextleft':
+            case 'aligntextright':
+            case 'aligntextcenter':
+                annotation.textAlign = propertyValue.toString().replace('AlignText', '');
+                selectedItem.utilityMethods.updateTextAlign(annotation.textAlign);
+                break;
+        }
+    };
+    DiagramPropertyBinding.prototype.updateToolbarState = function (toolbarName, isSelected, index) {
+        var toolbarTextStyle = document.getElementById(toolbarName);
+        if (toolbarTextStyle) {
+            toolbarTextStyle = toolbarTextStyle.ej2_instances[0];
+        }
+        if (toolbarTextStyle) {
+            var cssClass = toolbarTextStyle.items[index].cssClass;
+            toolbarTextStyle.items[index].cssClass = isSelected ? cssClass + ' tb-item-selected' : cssClass.replace(' tb-item-selected', '');
+            toolbarTextStyle.dataBind();
+        }
+    };
+    return DiagramPropertyBinding;
+}());
+
+var MindMapPropertyBinding = (function () {
+    function MindMapPropertyBinding(selectedItem) {
+        this.selectedItem = selectedItem;
+    }
+    MindMapPropertyBinding.prototype.mindmapTextStyleChange = function (args) {
+        this.updateMindMapTextStyle(args.item.tooltipText.toLowerCase(), false);
+    };
+    MindMapPropertyBinding.prototype.updateMindMapTextStyle = function (propertyName, propertyValue) {
+        var diagram = selectedItem.selectedDiagram;
+        if (diagram.nodes.length > 0) {
+            for (var i = 0; i < diagram.nodes.length; i++) {
+                var node = diagram.nodes[i];
+                if (node.addInfo && node.annotations.length > 0) {
+                    var annotation = node.annotations[0].style;
+                    var addInfo = node.addInfo;
+                    var levelType = selectedItem.mindmapSettings.levelType.value;
+                    if ('Level' + addInfo.level === levelType || addInfo.level === levelType) {
+                        switch (propertyName) {
+                            case 'bold':
+                                annotation.bold = !annotation.bold;
+                                break;
+                            case 'italic':
+                                annotation.italic = !annotation.italic;
+                                break;
+                            case 'underline':
+                                annotation.textDecoration = annotation.textDecoration === 'None' || !annotation.textDecoration ? 'Underline' : 'None';
+                                break;
+                        }
+                    }
+                }
+                diagram.dataBind();
+                selectedItem.isModified = true;
+            }
+        }
+    };
+    MindMapPropertyBinding.prototype.mindmapPatternChange = function (args) {
+        var target = args.target;
+        var diagram = selectedItem.selectedDiagram;
+        diagram.historyManager.startGroupAction();
+        for (var i = 0; i < selectedItem.selectedDiagram.nodes.length; i++) {
+            var node = selectedItem.selectedDiagram.nodes[i];
+            if (node.id !== 'textNode') {
+                if (target.className === 'mindmap-pattern-style mindmap-pattern1') {
+                    if (node.id === 'rootNode') {
+                        node.height = 50;
+                    }
+                    else {
+                        node.height = 20;
+                    }
+                }
+                else {
+                    node.height = 50;
+                }
+            }
+            selectedItem.selectedDiagram.dataBind();
+        }
+        for (var i = 0; i < selectedItem.selectedDiagram.connectors.length; i++) {
+            var connector = selectedItem.selectedDiagram.connectors[i];
+            switch (target.className) {
+                case 'mindmap-pattern-style mindmap-pattern1':
+                    connector.type = 'Bezier';
+                    MindMapUtilityMethods.templateType = 'template1';
+                    break;
+                case 'mindmap-pattern-style mindmap-pattern2':
+                    connector.type = 'Bezier';
+                    MindMapUtilityMethods.templateType = 'template4';
+                    break;
+                case 'mindmap-pattern-style mindmap-pattern3':
+                    connector.type = 'Orthogonal';
+                    MindMapUtilityMethods.templateType = 'template2';
+                    break;
+                case 'mindmap-pattern-style mindmap-pattern4':
+                    connector.type = 'Straight';
+                    MindMapUtilityMethods.templateType = 'template3';
+                    break;
+            }
+            selectedItem.selectedDiagram.dataBind();
+        }
+        diagram.historyManager.endGroupAction();
+        selectedItem.selectedDiagram.doLayout();
+        selectedItem.isModified = true;
+    };
+    return MindMapPropertyBinding;
+}());
+
+var OrgChartPropertyBinding = (function () {
+    function OrgChartPropertyBinding(selectedItem) {
+        this.selectedItem = selectedItem;
+    }
+    OrgChartPropertyBinding.prototype.orgDropDownChange = function (args) {
+        if (args.element) {
+            var value = args.value ? args.value.toString() : '';
+            if (args.element.id === 'employeeId') {
+                selectedItem.orgDataSettings.id = value;
+            }
+            else if (args.element.id === 'superVisorId') {
+                selectedItem.orgDataSettings.parent = value;
+            }
+            else if (args.element.id === 'orgNameField') {
+                selectedItem.orgDataSettings.nameField = value;
+            }
+            else if (args.element.id === 'orgImageField') {
+                selectedItem.orgDataSettings.imageField = value;
+            }
+        }
+    };
+    OrgChartPropertyBinding.prototype.orgMultiSelectChange = function (args) {
+        if (args.element) {
+            if (args.element.id === 'orgAdditionalField') {
+                selectedItem.orgDataSettings.additionalFields = args.value;
+            }
+            else if (args.element.id === 'orgBindingFields') {
+                selectedItem.orgDataSettings.bindingFields = args.value;
+            }
+        }
+    };
+    OrgChartPropertyBinding.prototype.orgChartSpacingChange = function (args) {
+        if (args.event) {
+            var target = args.event.target;
+            if (target.tagName.toLowerCase() === 'span') {
+                target = target.parentElement.children[0];
+            }
+            if (target.id === 'orgHorizontalSpacing') {
+                selectedItem.selectedDiagram.layout.horizontalSpacing = args.value;
+            }
+            else {
+                selectedItem.selectedDiagram.layout.verticalSpacing = args.value;
+            }
+        }
+    };
+    OrgChartPropertyBinding.prototype.orgChartAligmentChange = function (args) {
+        var diagram = selectedItem.selectedDiagram;
+        var commandType = args.item.tooltipText.replace(/[' ']/g, '').toLowerCase();
+        switch (commandType) {
+            case 'alignleft':
+                diagram.layout.horizontalAlignment = 'Left';
+                break;
+            case 'alignright':
+                diagram.layout.horizontalAlignment = 'Right';
+                break;
+            case 'aligncenter':
+                diagram.layout.horizontalAlignment = 'Center';
+                break;
+            case 'aligntop':
+                diagram.layout.verticalAlignment = 'Top';
+                break;
+            case 'alignmiddle':
+                diagram.layout.verticalAlignment = 'Center';
+                break;
+            case 'alignbottom':
+                diagram.layout.verticalAlignment = 'Bottom';
+                break;
+        }
+        selectedItem.isModified = true;
+    };
+    OrgChartPropertyBinding.prototype.layoutOrientationChange = function (args) {
+        var target = args.target;
+        switch (target.className) {
+            case 'org-pattern-style org-pattern-1 vertical-alternate':
+                OrgChartUtilityMethods.subTreeAlignments = 'Alternate';
+                OrgChartUtilityMethods.subTreeOrientation = 'Vertical';
+                break;
+            case 'org-pattern-style org-pattern-2 vertical-left':
+                OrgChartUtilityMethods.subTreeAlignments = 'Left';
+                OrgChartUtilityMethods.subTreeOrientation = 'Vertical';
+                break;
+            case 'org-pattern-style org-pattern-3 vertical-right':
+                OrgChartUtilityMethods.subTreeAlignments = 'Right';
+                OrgChartUtilityMethods.subTreeOrientation = 'Vertical';
+                break;
+            case 'org-pattern-style org-pattern-4 horizontal-center':
+                OrgChartUtilityMethods.subTreeAlignments = 'Center';
+                OrgChartUtilityMethods.subTreeOrientation = 'Horizontal';
+                break;
+            case 'org-pattern-style org-pattern-5 horizontal-right':
+                OrgChartUtilityMethods.subTreeAlignments = 'Right';
+                OrgChartUtilityMethods.subTreeOrientation = 'Horizontal';
+                break;
+            case 'org-pattern-style org-pattern-6 horizontal-left':
+                OrgChartUtilityMethods.subTreeAlignments = 'Left';
+                OrgChartUtilityMethods.subTreeOrientation = 'Horizontal';
+                break;
+        }
+        selectedItem.selectedDiagram.doLayout();
+        selectedItem.isModified = true;
+    };
+    OrgChartPropertyBinding.prototype.layoutPatternChange = function (args) {
+        var target = args.target;
+        var bindingFields = target.id === 'orgPattern2' || target.id === 'orgPattern4' ? true : false;
+        var imageField = target.id === 'orgPattern3' || target.id === 'orgPattern4' ? true : false;
+        selectedItem.utilityMethods.updateLayout(selectedItem, bindingFields, imageField);
+    };
+    OrgChartPropertyBinding.prototype.getTooltipContent = function (args) {
+        if (args.target) {
+            if (args.target.classList.contains('db-employee-id')) {
+                return 'Defines a unique column from the data source.';
+            }
+            else if (args.target.classList.contains('db-supervisor-id')) {
+                return 'Defines a column that is used to identify the person to whom the employee reports to.';
+            }
+            else if (args.target.classList.contains('db-nameField-id')) {
+                return 'Defines a column that has an employee name, and it appears at the top of the shapes.';
+            }
+            else if (args.target.classList.contains('db-bindingField-id')) {
+                return 'Defines columns that have employees’ contact information, and appear after the employees’ names in the shape.';
+            }
+            else if (args.target.classList.contains('db-imageField-id')) {
+                return 'Defines a column that has the picture of an employee.';
+            }
+            else if (args.target.classList.contains('db-additionalField-id')) {
+                return 'Defines columns that should be displayed through a tooltip.';
+            }
+        }
+        return '';
+    };
+    return OrgChartPropertyBinding;
+}());

scripts/layers.js

@@ -0,0 +1,246 @@
+/**
+ *  Layers handler
+ */
+var DiagramBuilderLayer = (function () {
+    function DiagramBuilderLayer(selectedItem, layerDialog) {
+        this.isEditing = false;
+        this.layerCount1 = 0;
+        this.selectedItem = selectedItem;
+        this.layerDialog = layerDialog;
+    }
+    DiagramBuilderLayer.prototype.getLayers = function () {
+        return this.selectedItem.selectedDiagram.layers.sort(function (a, b) {
+            return a.zIndex - b.zIndex;
+        });
+    };
+    DiagramBuilderLayer.prototype.getLayerDialogContent = function () {
+        var layerDialogContent = document.createElement('div');
+        var layers = this.getLayers();
+        if (layers.length > 0) {
+            var orderType = 'None';
+            for (var i = layers.length - 1; i >= 0; i--) {
+                if (layers.length > 1) {
+                    if (i === layers.length - 1) {
+                        orderType = 'Backward';
+                    }
+                    else if (i === 0) {
+                        orderType = 'Forward';
+                    }
+                    else {
+                        orderType = 'Both';
+                    }
+                }
+                layerDialogContent.appendChild(this.cloneLayerTemplate(layers[i], orderType, i));
+            }
+            if (layers.length === 1) {
+                this.removeLayer.disabled = true;
+            }
+            else {
+                this.removeLayer.disabled = false;
+            }
+        }
+        this.layerDialog.content = layerDialogContent.outerHTML;
+        this.layerDialog.dataBind();
+        this.triggerEvents();
+    };
+    DiagramBuilderLayer.prototype.cloneLayerTemplate = function (layer, orderType, index) {
+        var layerTemplate = document.getElementsByClassName('db-layer-template')[0].cloneNode(true);
+        layerTemplate.style.display = '';
+        if (this.getActiveLayer(layer)) {
+            layerTemplate.className = 'db-layer-template active';
+        }
+        var layerNameElement = layerTemplate.getElementsByClassName('db-layer-name')[0];
+        layerNameElement.innerHTML = layer.addInfo.name;
+        layerNameElement.className = 'db-layer-name ' + layer.id;
+        layerNameElement.parentNode.style.width = 'calc(100% - ' + 88 + 'px)';
+        return layerTemplate;
+    };
+    DiagramBuilderLayer.prototype.triggerEvents = function () {
+        var visibleElements = document.getElementsByClassName('db-layer-visible');
+        var lockElements = document.getElementsByClassName('db-layer-lock');
+        var layers = this.getLayers();
+        for (var i = 0; i < layers.length; i++) {
+            var layer = layers[i];
+            var visibleLayer = new ej.buttons.Button({
+                iconCss: layer.visible ? 'sf-icon-View' : 'sf-icon-Invisible',
+                cssClass: layer.id
+            });
+            var visibleElement = visibleElements[layers.length - i];
+            visibleElement.title = layer.visible ? 'Visible' : 'Invisible';
+            visibleLayer.appendTo(visibleElement);
+            visibleElement.onclick = this.changeLayerVisibility.bind(this);
+            if (!layer.visible) {
+                visibleElement.parentElement.className = 'db-layer-content-btn db-layer-invisible';
+            }
+            var lockElement = lockElements[layers.length - i];
+            var lockLayer = new ej.buttons.Button({
+                iconCss: layer.lock ? 'sf-icon-Lock' : 'sf-icon-Unlock',
+                cssClass: layer.id,
+            });
+            lockLayer.appendTo(lockElement);
+            lockElement.title = layer.lock ? 'Lock' : 'Unlock';
+            lockElement.onclick = this.changeLayerSelection.bind(this);
+            if (layer.lock) {
+                lockElement.parentElement.className = 'db-layer-content-btn db-layer-invisible';
+            }
+        }
+        var layerNameElements = document.getElementsByClassName('db-layer-name');
+        for (var i = 0; i < layerNameElements.length; i++) {
+            var layerNameElement = layerNameElements[i];
+            layerNameElement.parentElement.onclick = this.setActiveLayer.bind(this);
+            layerNameElement.parentElement.ondblclick = this.btnRenameLayer.bind(this);
+            layerNameElement.parentElement.children[1].addEventListener('focusout', this.renameLayer.bind(this));
+            layerNameElement.parentElement.children[1].addEventListener('keydown', this.renameLayerKeyDown.bind(this));
+        }
+    };
+    DiagramBuilderLayer.prototype.renameLayerKeyDown = function (args) {
+        if (args.which === 13) {
+            this.renameLayer(args);
+        }
+    };
+    DiagramBuilderLayer.prototype.getLayerBottomPanel = function () {
+        var bottomPanel = '<div class="db-layer-bottom-panel">' +
+            '<div class="row" style="margin-top: 6px;">' +
+            '<div class="col-xs-2">' +
+            '<button id="btnAdd" style="right:16px;position:absolute"></button>' +
+            '</div>' +
+            '<div class="col-xs-2">' +
+            '<button id="btnDuplicate" style="right:14px;position:absolute"></button>' +
+            '</div>' +
+            '<div class="col-xs-2">' +
+            '<button id="btnRemove" style="right:12px;position:absolute"></button>' +
+            '</div>' +
+            '<div class="col-xs-2">' +
+            '<button id="btnCloseLayer" style="right:10px;position:absolute"></button>' +
+            '</div>' +
+            '</div>' +
+            '</div>';
+        return bottomPanel;
+    };
+    DiagramBuilderLayer.prototype.initLayerBottomPanel = function () {
+        this.removeLayer = new ej.buttons.Button({ iconCss: 'sf-icon-Delete' });
+        this.removeLayer.appendTo('#btnRemove');
+        document.getElementById('btnRemove').onclick = this.btnRemoveLayer.bind(this);
+        var duplicateLayer = new ej.buttons.Button({ iconCss: 'sf-icon-Copy' });
+        duplicateLayer.appendTo('#btnDuplicate');
+        document.getElementById('btnDuplicate').onclick = this.btnDuplicateLayer.bind(this);
+        var addLayer = new ej.buttons.Button({ iconCss: 'sf-icon-Plus' });
+        addLayer.appendTo('#btnAdd');
+        document.getElementById('btnAdd').onclick = this.btnAddLayer.bind(this);
+        var closeLayer = new ej.buttons.Button({ iconCss: 'sf-icon-Close' });
+        closeLayer.appendTo('#btnCloseLayer');
+        document.getElementById('btnCloseLayer').onclick = this.btnCloseDialog.bind(this);
+    };
+    DiagramBuilderLayer.prototype.changeLayerSelection = function (args) {
+        var element = args.target;
+        var layerName = element.className.replace('db-layer-lock e-control e-btn ', '').replace(' e-icon-btn', '').replace(' e-ripple', '');
+        var layer = this.findLayer(layerName);
+        layer.lock = !layer.lock;
+        element.ej2_instances[0].iconCss = layer.lock ? 'sf-icon-Lock' : 'sf-icon-Unlock';
+        element.title = layer.lock ? 'Lock' : 'Unlock';
+        element.parentElement.className = layer.lock ? 'db-layer-content-btn db-layer-invisible' : 'db-layer-content-btn';
+        this.selectedItem.selectedDiagram.dataBind();
+    };
+    DiagramBuilderLayer.prototype.changeLayerVisibility = function (args) {
+        var element = args.target;
+        var layerName = element.className.replace('db-layer-visible e-control e-btn ', '').replace(' e-icon-btn', '').replace(' e-ripple', '');
+        var layer = this.findLayer(layerName);
+        layer.visible = !layer.visible;
+        element.ej2_instances[0].iconCss = layer.visible ? 'sf-icon-View' : 'sf-icon-Invisible';
+        element.title = layer.visible ? 'Visible' : 'Invisible';
+        element.parentElement.className = layer.visible ? 'db-layer-content-btn' : 'db-layer-content-btn db-layer-invisible';
+        this.selectedItem.selectedDiagram.dataBind();
+    };
+    DiagramBuilderLayer.prototype.changeLayerZorder = function (args) {
+        var element = args.target;
+        var layerName = element.className.replace('db-layer-order-second e-control e-btn ', '').replace(' e-icon-btn', '').replace(' e-ripple', '');
+        layerName = layerName.replace('db-layer-order-first e-control e-btn ', '').replace(' e-ripple', '');
+        if (element.innerText.toLowerCase() === 'forward') {
+            this.selectedItem.selectedDiagram.bringLayerForward(layerName);
+        }
+        else {
+            this.selectedItem.selectedDiagram.sendLayerBackward(layerName);
+        }
+        this.getLayerDialogContent();
+    };
+    DiagramBuilderLayer.prototype.setActiveLayer = function (args) {
+        if (!this.isEditing) {
+            var target = args.target;
+            this.selectedItem.selectedDiagram.setActiveLayer(target.children[0].className.replace('db-layer-name ', ''));
+            var elements = document.getElementsByClassName('db-layer-template active');
+            if (elements.length > 0) {
+                elements[0].className = 'db-layer-template';
+            }
+            target.parentElement.parentElement.className = 'db-layer-template active';
+        }
+    };
+    DiagramBuilderLayer.prototype.btnRenameLayer = function (args) {
+        if (!this.isEditing) {
+            var target = args.target;
+            target.classList.add('db-layer-editing');
+            var inputElement = target.children[1];
+            inputElement.focus();
+            inputElement.value = target.children[0].innerHTML;
+            inputElement.select();
+            this.isEditing = true;
+        }
+    };
+    DiagramBuilderLayer.prototype.renameLayer = function (args) {
+        var target = args.target;
+        var addInfo = this.selectedItem.selectedDiagram.activeLayer.addInfo;
+        target.parentElement.children[0].innerHTML = addInfo.name = target.value;
+        target.parentElement.classList.remove('db-layer-editing');
+        this.isEditing = false;
+    };
+    DiagramBuilderLayer.prototype.btnRemoveLayer = function (args) {
+        var activeLayerIndex = this.getLayers().indexOf(this.selectedItem.selectedDiagram.activeLayer);
+        this.selectedItem.selectedDiagram.removeLayer(this.selectedItem.selectedDiagram.activeLayer.id);
+        if (activeLayerIndex - 1 < 0) {
+            this.selectedItem.selectedDiagram.setActiveLayer(this.getLayers()[0].id);
+        }
+        else {
+            this.selectedItem.selectedDiagram.setActiveLayer(this.getLayers()[activeLayerIndex - 1].id);
+        }
+        this.getLayerDialogContent();
+    };
+    DiagramBuilderLayer.prototype.btnCloseDialog = function () {
+        this.layerDialog.hide();
+        var btnWindow = document.getElementById('btnWindowMenu');
+        btnWindow.ej2_instances[0].items[3].iconCss = '';
+    };
+    DiagramBuilderLayer.prototype.btnDuplicateLayer = function () {
+        var name = this.selectedItem.selectedDiagram.activeLayer.addInfo.name;
+        this.selectedItem.selectedDiagram.cloneLayer(this.selectedItem.selectedDiagram.activeLayer.id);
+        this.selectedItem.selectedDiagram.layers[this.selectedItem.selectedDiagram.layers.length - 1].addInfo = {
+            'name': name + ' Copy'
+        };
+        this.getLayerDialogContent();
+    };
+    DiagramBuilderLayer.prototype.btnAddLayer = function () {
+        var layer = {
+            id: 'Untitled_Layer' + this.layerCount1,
+            addInfo: {
+                'name': 'Untitled_Layer' + this.layerCount1
+            }
+        };
+        this.selectedItem.selectedDiagram.addLayer(layer);
+        this.getLayerDialogContent();
+        this.layerCount1++;
+    };
+    DiagramBuilderLayer.prototype.getActiveLayer = function (layer) {
+        if (layer.id === this.selectedItem.selectedDiagram.activeLayer.id) {
+            return layer;
+        }
+        return null;
+    };
+    DiagramBuilderLayer.prototype.findLayer = function (layerName) {
+        var layers = this.getLayers();
+        for (var i = 0; i < layers.length; i++) {
+            if (layers[i].id === layerName) {
+                return layers[i];
+            }
+        }
+        return null;
+    };
+    return DiagramBuilderLayer;
+}());

scripts/mindmap.js

@@ -0,0 +1,681 @@
+/**
+ *  Home page handler
+ */
+var MindMap = (function () {
+    function MindMap(selectedItem) {
+        this.selectedItem = selectedItem;
+    }
+    MindMap.prototype.getCommandSettings = function () {
+        var commandManager = {
+            commands: [{
+                    gesture: { key: ej.diagrams.Keys.Tab }, canExecute: this.canExecute,
+                    execute: this.addChild.bind(this), name: 'leftChild'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Tab, keyModifiers: ej.diagrams.KeyModifiers.Shift }, canExecute: this.canExecute,
+                    execute: this.addRightChild.bind(this), name: 'rightChild'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Enter }, canExecute: this.canExecute,
+                    execute: this.addSibilingChildTop.bind(this), name: 'sibilingChildTop'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Enter, keyModifiers: ej.diagrams.KeyModifiers.Shift }, canExecute: this.canExecute,
+                    execute: this.addSibilingChildBottom.bind(this), name: 'sibilingChildBottom'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Delete }, canExecute: this.canExecute,
+                    execute: this.removeChild.bind(this), name: 'deleteChid'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Down }, canExecute: this.canExecute,
+                    execute: this.navigateBottomChild.bind(this), name: 'navigationDown'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Up }, canExecute: this.canExecute,
+                    execute: this.navigateTopChild.bind(this), name: 'navigationUp'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Right }, canExecute: this.canExecute,
+                    execute: this.navigateLeftChild.bind(this), name: 'navigationLeft'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Left }, canExecute: this.canExecute,
+                    execute: this.navigateRightChild.bind(this), name: 'navigationRight'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Space }, canExecute: this.canExecute,
+                    execute: this.expandCollapse.bind(this), name: 'expandCollapse'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.F2 }, canExecute: this.canExecute,
+                    execute: this.editNode.bind(this), name: 'editing'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.F1 }, canExecute: this.canExecute,
+                    execute: MindMapUtilityMethods.onHideNodeClick.bind(MindMapUtilityMethods), name: 'showShortCut'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Z, keyModifiers: ej.diagrams.KeyModifiers.Control }, canExecute: this.canExecute,
+                    execute: this.undoMindMap.bind(this), name: 'undo'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Y, keyModifiers: ej.diagrams.KeyModifiers.Control }, canExecute: this.canExecute,
+                    execute: this.redoMindMap.bind(this), name: 'redo'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.X, keyModifiers: ej.diagrams.KeyModifiers.Control }, canExecute: this.canExecute,
+                    execute: this.cutMindMap.bind(this), name: 'cutObject'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.C, keyModifiers: ej.diagrams.KeyModifiers.Control }, canExecute: this.canExecute,
+                    execute: this.copyMindMap.bind(this), name: 'copyObject'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.V, keyModifiers: ej.diagrams.KeyModifiers.Control }, canExecute: this.canExecute,
+                    execute: this.pasteMindMap.bind(this), name: 'pasteObject'
+                }
+            ]
+        };
+        commandManager.commands = CommonKeyboardCommands.addCommonCommands(commandManager.commands);
+        return commandManager;
+    };
+    MindMap.prototype.preventExecute = function () {
+        return false;
+    };
+    MindMap.prototype.canExecute = function () {
+        return true;
+    };
+    MindMap.prototype.undoMindMap = function () {
+        this.selectedItem.utilityMethods.undoRedoLayout(true, this.selectedItem);
+    };
+    MindMap.prototype.redoMindMap = function () {
+        this.selectedItem.utilityMethods.undoRedoLayout(false, this.selectedItem);
+    };
+    MindMap.prototype.cutMindMap = function () {
+        this.selectedItem.utilityMethods.cutLayout(this.selectedItem);
+    };
+    MindMap.prototype.copyMindMap = function () {
+        this.selectedItem.utilityMethods.copyLayout(this.selectedItem);
+    };
+    MindMap.prototype.pasteMindMap = function () {
+        this.selectedItem.utilityMethods.pasteLayout(this.selectedItem);
+    };
+    MindMap.prototype.addChild = function (args) {
+        MindMapUtilityMethods.addNode('Left');
+    };
+    MindMap.prototype.addRightChild = function (args) {
+        MindMapUtilityMethods.addNode('Right');
+    };
+    MindMap.prototype.addSibilingChildTop = function () {
+        MindMapUtilityMethods.addSibilingChild('Top');
+    };
+    MindMap.prototype.addSibilingChildBottom = function () {
+        MindMapUtilityMethods.addSibilingChild('Bottom');
+    };
+    MindMap.prototype.removeChild = function (args) {
+        this.selectedItem.utilityMethods.removeChild(this.selectedItem);
+    };
+    MindMap.prototype.navigateLeftChild = function (args) {
+        this.navigateChild('left');
+    };
+    MindMap.prototype.navigateRightChild = function () {
+        this.navigateChild('right');
+    };
+    MindMap.prototype.navigateTopChild = function () {
+        this.navigateChild('top');
+    };
+    MindMap.prototype.navigateBottomChild = function () {
+        this.navigateChild('bottom');
+    };
+    MindMap.prototype.expandCollapse = function () {
+        var diagram = this.selectedItem.selectedDiagram;
+        if (diagram.selectedItems.nodes.length > 0) {
+            var node = diagram.selectedItems.nodes[0];
+            node.isExpanded = !node.isExpanded;
+            diagram.dataBind();
+        }
+    };
+    MindMap.prototype.editNode = function () {
+        var diagram = this.selectedItem.selectedDiagram;
+        if (diagram.selectedItems.nodes.length > 0) {
+            var node = diagram.selectedItems.nodes[0];
+            diagram.startTextEdit(node, node.annotations[0].id);
+            this.selectedItem.isModified = true;
+        }
+    };
+    MindMap.prototype.navigateChild = function (direction) {
+        var diagram = this.selectedItem.selectedDiagram;
+        var node = null;
+        if (direction === 'top' || direction === 'bottom') {
+            var sameLevelNodes = this.getSameLevelNodes();
+            var index = sameLevelNodes.indexOf(diagram.selectedItems.nodes[0]);
+            node = direction === 'top' ? sameLevelNodes[index - 1] : sameLevelNodes[index + 1];
+        }
+        else {
+            node = this.getMinDistanceNode(diagram, direction);
+        }
+        if (node) {
+            diagram.clearSelection();
+            diagram.select([node]);
+            diagram.bringIntoView(node.wrapper.bounds);
+        }
+    };
+    MindMap.prototype.getSameLevelNodes = function () {
+        var sameLevelNodes = [];
+        var diagram = this.selectedItem.selectedDiagram;
+        if (diagram.selectedItems.nodes.length > 0) {
+            var node = diagram.selectedItems.nodes[0];
+            var orientation_1 = node.addInfo.orientation.toString();
+            var connector = MindMapUtilityMethods.getConnector(diagram.connectors, node.inEdges[0]);
+            var parentNode = MindMapUtilityMethods.getNode(diagram.nodes, connector.sourceID);
+            for (var i = 0; i < parentNode.outEdges.length; i++) {
+                connector = MindMapUtilityMethods.getConnector(diagram.connectors, parentNode.outEdges[i]);
+                var childNode = MindMapUtilityMethods.getNode(diagram.nodes, connector.targetID);
+                if (childNode) {
+                    var childOrientation = childNode.addInfo.orientation.toString();
+                    if (orientation_1 === childOrientation) {
+                        sameLevelNodes.push(childNode);
+                    }
+                }
+            }
+        }
+        return sameLevelNodes;
+    };
+    MindMap.prototype.getMinDistanceNode = function (diagram, direction) {
+        var node = diagram.selectedItems.nodes[0];
+        var parentBounds = node.wrapper.bounds;
+        var childBounds = null;
+        var oldChildBoundsTop = 0;
+        var childNode = null;
+        var lastChildNode = null;
+        var leftOrientationFirstChild = null, rightOrientationFirstChild = null;
+        if (node.id === 'rootNode') {
+            var edges = node.outEdges;
+            for (var i = 0; i < edges.length; i++) {
+                var connector = MindMapUtilityMethods.getConnector(diagram.connectors, edges[i]);
+                childNode = MindMapUtilityMethods.getNode(diagram.nodes, connector.targetID);
+                var addInfo = childNode.addInfo;
+                if (addInfo.orientation.toString().toLowerCase() === direction) {
+                    if (direction === 'left' && leftOrientationFirstChild === null) {
+                        leftOrientationFirstChild = childNode;
+                    }
+                    if (direction === 'right' && rightOrientationFirstChild === null) {
+                        rightOrientationFirstChild = childNode;
+                    }
+                    childBounds = childNode.wrapper.bounds;
+                    if (parentBounds.top >= childBounds.top && (childBounds.top >= oldChildBoundsTop || oldChildBoundsTop === 0)) {
+                        oldChildBoundsTop = childBounds.top;
+                        lastChildNode = childNode;
+                    }
+                }
+            }
+            if (!lastChildNode) {
+                lastChildNode = direction === 'left' ? leftOrientationFirstChild : rightOrientationFirstChild;
+            }
+        }
+        else {
+            var edges = [];
+            var selecttype = '';
+            var orientation_2 = node.addInfo.orientation.toString();
+            if (orientation_2.toLowerCase() === 'left') {
+                edges = direction === 'left' ? node.outEdges : node.inEdges;
+                selecttype = direction === 'left' ? 'target' : 'source';
+            }
+            else {
+                edges = direction === 'right' ? node.outEdges : node.inEdges;
+                selecttype = direction === 'right' ? 'target' : 'source';
+            }
+            for (var i = 0; i < edges.length; i++) {
+                var connector = MindMapUtilityMethods.getConnector(diagram.connectors, edges[i]);
+                childNode = MindMapUtilityMethods.getNode(diagram.nodes, selecttype === 'target' ? connector.targetID : connector.sourceID);
+                if (childNode.id === 'rootNode') {
+                    lastChildNode = childNode;
+                    break;
+                }
+                else {
+                    childBounds = childNode.wrapper.bounds;
+                    if (selecttype === 'target') {
+                        if (parentBounds.top >= childBounds.top && (childBounds.top >= oldChildBoundsTop || oldChildBoundsTop === 0)) {
+                            oldChildBoundsTop = childBounds.top;
+                            lastChildNode = childNode;
+                        }
+                    }
+                    else {
+                        lastChildNode = childNode;
+                    }
+                }
+            }
+        }
+        return lastChildNode;
+    };
+    MindMap.prototype.createMindMap = function (isNew) {
+        var diagram = this.selectedItem.selectedDiagram;
+        this.selectedItem.utilityMethods.currentDiagramVisibility('mindmap-diagram', this.selectedItem);
+        diagram.updateViewPort();
+        if (isNew) {
+            diagram.clear();
+            diagram.constraints = diagram.constraints & ~ej.diagrams.DiagramConstraints.UndoRedo;
+            var rootNode = MindMapUtilityMethods.createEmptyMindMap();
+            diagram.layout = {
+                horizontalSpacing: 100,
+                verticalSpacing: 50,
+                type: 'MindMap',
+                getBranch: function (node) {
+                    if (node.addInfo) {
+                        var addInfo = node.addInfo;
+                        return addInfo.orientation.toString();
+                    }
+                    return 'Left';
+                },
+                root: rootNode.id
+            };
+            diagram.pageSettings = { width: null, height: null };
+            diagram.selectedItems = { userHandles: MindMapUtilityMethods.handle, constraints: ej.diagrams.SelectorConstraints.UserHandle };
+            diagram.commandManager = this.getCommandSettings();
+            //diagram.tool = ej.diagrams.DiagramTools.SingleSelect | ej.diagrams.DiagramTools.ZoomPan;
+            diagram.snapSettings.constraints = diagram.snapSettings.constraints & ~ej.diagrams.SnapConstraints.ShowLines;
+            diagram.constraints = diagram.constraints | ej.diagrams.DiagramConstraints.UndoRedo;
+            diagram.tool = ej.diagrams.DiagramTools.SingleSelect | ej.diagrams.DiagramTools.ZoomPan;
+            diagram.dataBind();
+            this.selectedItem.utilityMethods.bindMindMapProperties(rootNode, this.selectedItem);
+        }
+        else {
+            this.updateMindMap();
+        }
+        diagram.contextMenuSettings.show = false;
+        diagram.dataBind();
+    };
+    MindMap.prototype.updateMindMap = function () {
+        var diagram = this.selectedItem.selectedDiagram;
+        diagram.layout = {
+            getBranch: function (node) {
+                if (node.addInfo) {
+                    var addInfo = node.addInfo;
+                    return addInfo.orientation.toString();
+                }
+                return 'Left';
+            },
+        };
+        diagram.pageSettings = { width: null, height: null };
+        diagram.selectedItems = { userHandles: MindMapUtilityMethods.handle, constraints: ej.diagrams.SelectorConstraints.UserHandle };
+        diagram.commandManager = this.getCommandSettings();
+        diagram.tool = ej.diagrams.DiagramTools.SingleSelect | ej.diagrams.DiagramTools.ZoomPan;
+    };
+    MindMap.prototype.getShortCutKeys = function (shortcutKeys) {
+        var annotations = [];
+        var y = 0.1;
+        for (var i = 0; i < shortcutKeys.length; i++) {
+            var annotation = {
+                content: shortcutKeys[i].key.toString() + ': ' + shortcutKeys[i].value.toString(), offset: { x: 0.1, y: y }, visibility: true,
+                style: { color: 'white' }, horizontalAlignment: 'Left', verticalAlignment: 'Bottom'
+            };
+            annotations.push(annotation);
+            y += 0.1;
+        }
+        return annotations;
+    };
+    return MindMap;
+}());
+
+var MindMapUtilityMethods = (function () {
+    function MindMapUtilityMethods() {
+    }
+    MindMapUtilityMethods.mindmapPaste = function () {
+        var diagram = this.selectedItem.selectedDiagram;
+        var selectedNode = diagram.selectedItems.nodes[0];
+        var selectedelement;
+        var mindmapData;
+        var selecteditemOrientation;
+        if (this.selectedItem.pasteData.length > 0) {
+            diagram.startGroupAction();
+            diagram.paste(this.selectedItem.pasteData);
+            if (selectedNode.id !== 'rootNode') {
+                selecteditemOrientation = selectedNode.addInfo.orientation.toString();
+            }
+            else {
+                selecteditemOrientation = this.selectedItem.pastedFirstItem.addInfo.orientation.toString();
+            }
+            selectedelement = this.selectedItem.pastedFirstItem;
+            mindmapData = MindMapUtilityMethods.getMindMapShape(selectedNode);
+            var connector = MindMapUtilityMethods.setConnectorDefault(diagram, selecteditemOrientation, mindmapData.connector, selectedNode.id, selectedelement.id);
+            diagram.add(connector);
+            var selectedNodeLevel = void 0;
+            selectedNodeLevel = selectedNode.addInfo.level;
+            this.updateLevel(selectedelement, selectedNodeLevel, selecteditemOrientation);
+            diagram.clearSelection();
+            this.selectedItem.preventPropertyChange = true;
+            diagram.select([selectedelement]);
+            this.selectedItem.preventPropertyChange = false;
+            diagram.doLayout();
+            diagram.endGroupAction();
+            diagram.bringIntoView(diagram.nodes[diagram.nodes.length - 1].wrapper.bounds);
+        }
+    };
+    MindMapUtilityMethods.updateLevel = function (parentNode, level, orientation) {
+        var diagram = this.selectedItem.selectedDiagram;
+        var lastNode = parentNode;
+        var level1;
+        parentNode.addInfo.level = level + 1;
+        level1 = 'Level' + parentNode.addInfo.level;
+        this.addMindMapLevels(level1);
+        parentNode.addInfo.orientation = orientation;
+        for (var i = parentNode.outEdges.length - 1; i >= 0; i--) {
+            var connector = MindMapUtilityMethods.getConnector(diagram.connectors, lastNode.outEdges[i]);
+            var childNode = MindMapUtilityMethods.getNode(diagram.nodes, connector.targetID);
+            childNode.addInfo.orientation = orientation;
+            connector.sourcePortID = 'rightPort';
+            connector.targetPortID = 'leftPort';
+            if (orientation === 'Right') {
+                connector.sourcePortID = 'leftPort';
+                connector.targetPortID = 'rightPort';
+            }
+            if (childNode.outEdges.length > 0) {
+                this.updateLevel(childNode, parentNode.addInfo.level, orientation);
+            }
+            else {
+                childNode.addInfo.level = parentNode.addInfo.level + 1;
+                level1 = 'Level' + childNode.addInfo.level;
+                this.addMindMapLevels(level1);
+            }
+        }
+        diagram.dataBind();
+    };
+    MindMapUtilityMethods.addMindMapLevels = function (level) {
+        var mindmap = document.getElementById('mindMapLevels');
+        var dropdownlist = mindmap.ej2_instances[0];
+        var dropdowndatasource = dropdownlist.dataSource;
+        var isExist = false;
+        for (var i = 0; i < dropdowndatasource.length; i++) {
+            var data = dropdowndatasource[i];
+            if (data.text === level) {
+                isExist = true;
+                break;
+            }
+        }
+        if (!isExist) {
+            dropdowndatasource.push({ text: level, value: level });
+        }
+        dropdownlist.dataSource = dropdowndatasource;
+        dropdownlist.dataBind();
+    };
+    MindMapUtilityMethods.createEmptyMindMap = function () {
+        var node = {
+            id: 'rootNode', width: 150, minHeight: 50,
+            annotations: [{ content: 'MindMap', style: { color: '#000000' } }],
+            shape: { type: 'Basic', shape: 'Rectangle', cornerRadius: 5 },
+            ports: [{ id: 'leftPort', offset: { x: 0, y: 0.5 } }, { id: 'rightPort', offset: { x: 1, y: 0.5 } }],
+            addInfo: { level: 0 }, style: { fill: '#D0ECFF', strokeColor: '#80BFEA', strokeWidth: 1 },
+            constraints: ej.diagrams.NodeConstraints.Default & ~ej.diagrams.NodeConstraints.Delete
+        };
+        this.selectedItem.selectedDiagram.add(node);
+        var node1 = {
+            id: 'textNode', width: 400, height: 280, offsetX: this.selectedItem.selectedDiagram.scrollSettings.viewPortWidth - 200, offsetY: 140,
+            shape: { type: 'HTML', content: this.getShortCutString() }, style: { strokeWidth: 0 },
+            excludeFromLayout: true,
+            constraints: ej.diagrams.NodeConstraints.Default & ~ej.diagrams.NodeConstraints.Delete
+        };
+        this.selectedItem.selectedDiagram.add(node1);
+        document.getElementById('diagram').querySelector('#closeIconDiv').onclick = this.onHideNodeClick.bind(this);
+        return node;
+    };
+    MindMapUtilityMethods.onHideNodeClick = function () {
+        var node1 = MindMapUtilityMethods.getNode(this.selectedItem.selectedDiagram.nodes, 'textNode');
+        node1.visible = !node1.visible;
+        this.selectedItem.selectedDiagram.dataBind();
+    };
+    MindMapUtilityMethods.getShortCutString = function () {
+        return '<div style="width: 400px; height: 280px; padding: 10px; background-color: #FFF7B5; border: 1px solid #FFF7B5">' +
+            '<div id="closeIconDiv" style="float: right; width: 22px; height: 22px; border: 1px solid #FFF7B5">' +
+            '<span class="sf-icon-Close" style="font-size:14px;cursor:pointer;"></span>' +
+            '</div>' +
+            '<div>' +
+            '<span class="db-html-font-medium">Quick shortcuts</span>' +
+            '</div>' +
+            '<div style="padding-top:10px">' +
+            '<ul>' +
+            '<li>' +
+            '<span class="db-html-font-medium">Tab : </span>' +
+            '<span class="db-html-font-normal">Add a subtopic to the left</span>' +
+            '</li>' +
+            '</ul>' +
+            '</div>' +
+            '<div>' +
+            '<ul>' +
+            '<li>' +
+            '<span class="db-html-font-medium">Shift + Tab : </span>' +
+            '<span class="db-html-font-normal">Add a subtopic to the right</span>' +
+            '</li>' +
+            '</ul>' +
+            '</div>' +
+            '<div>' +
+            '<ul>' +
+            '<li>' +
+            '<span class="db-html-font-medium">Enter : </span>' +
+            '<span class="db-html-font-normal">Add a sibling subtopic to the top</span>' +
+            '</li>' +
+            '</ul>' +
+            '</div>' +
+            '<div>' +
+            '<ul>' +
+            '<li>' +
+            '<span class="db-html-font-medium">Delete : </span>' +
+            '<span class="db-html-font-normal">Delete a topic</span>' +
+            '</li>' +
+            '</ul>' +
+            '</div>' +
+            '<div>' +
+            '<ul>' +
+            '<li>' +
+            '<span class="db-html-font-medium">F2 : </span>' +
+            '<span class="db-html-font-normal">Edit a topic</span>' +
+            '</li>' +
+            '</ul>' +
+            '</div>' +
+            '<div>' +
+            '<ul>' +
+            '<li>' +
+            '<span class="db-html-font-medium">Esc : </span>' +
+            '<span class="db-html-font-normal">End text editing</span>' +
+            '</li>' +
+            '</ul>' +
+            '</div>' +
+            '<div>' +
+            '<ul>' +
+            '<li>' +
+            '<span class="db-html-font-medium">Arrow(Up, Down, Left, Right) : </span>' +
+            '<span class="db-html-font-normal">Navigate between topics</span>' +
+            '</li>' +
+            '</ul>' +
+            '</div>' +
+            '<div>' +
+            '<ul>' +
+            '<li>' +
+            '<span class="db-html-font-medium">F1 : </span>' +
+            '<span class="db-html-font-normal">Show/Hide shortcut Key</span>' +
+            '</li>' +
+            '</ul>' +
+            '</div>' +
+            '</div>';
+    };
+    MindMapUtilityMethods.getMindMapShape = function (parentNode) {
+        var sss = {};
+        var node = {};
+        var connector = {};
+        var addInfo = parentNode.addInfo;
+        if (this.templateType === 'template1') {
+            var annotations = {
+                //verticalAlignment: 'Bottom', offset: { x: 0.5, y: 0 },
+                content: ''
+            };
+            node = {
+                minWidth: 100, maxWidth: 100, minHeight: 20, shape: { type: 'Basic', shape: 'Rectangle' },
+                annotations: [annotations], style: { fill: '#000000', strokeColor: '#000000' },
+                addInfo: { level: addInfo.level + 1 },
+                offsetX: 200, offsetY: 200
+            };
+            connector = { type: 'Bezier', style: { strokeWidth: 3 } };
+        }
+        else {
+            node = {
+                minWidth: 100, maxWidth: 100, minHeight: 50, shape: { type: 'Basic', shape: 'Rectangle' },
+                annotations: [{ content: '' }],
+                style: { fill: '#000000', strokeColor: '#000000' },
+                addInfo: { level: addInfo.level + 1 },
+                offsetX: 200, offsetY: 200
+            };
+            if (this.templateType === 'template2') {
+                connector = { type: 'Orthogonal', style: { strokeColor: '#000000' } };
+            }
+            else if (this.templateType === 'template3') {
+                connector = { type: 'Straight', style: { strokeColor: '#000000' } };
+            }
+            else {
+                connector = { type: 'Bezier', style: { strokeColor: '#000000' } };
+            }
+        }
+        if (addInfo.level < 1) {
+            node.style.fill = this.selectedItem.utilityMethods.fillColorCode[this.lastFillIndex];
+            node.style.strokeColor = this.selectedItem.utilityMethods.borderColorCode[this.lastFillIndex];
+            ;
+            if (this.lastFillIndex + 1 >= this.selectedItem.utilityMethods.fillColorCode.length) {
+                this.lastFillIndex = 0;
+            }
+            else {
+                this.lastFillIndex++;
+            }
+        }
+        else {
+            node.style.strokeColor = node.style.fill = parentNode.style.fill;
+        }
+        connector.style.strokeColor = node.style.fill;
+        connector.targetDecorator = { shape: 'None' };
+        connector.constraints = ej.diagrams.ConnectorConstraints.PointerEvents | ej.diagrams.ConnectorConstraints.Select | ej.diagrams.ConnectorConstraints.Delete;
+        node.constraints = ej.diagrams.NodeConstraints.Default & ~ej.diagrams.NodeConstraints.Drag;
+        node.ports = [{ id: 'leftPort', offset: { x: 0, y: 0.5 } }, { id: 'rightPort', offset: { x: 1, y: 0.5 } }];
+        sss.node = node;
+        sss.connector = connector;
+        return sss;
+    };
+    MindMapUtilityMethods.addNode = function (orientation) {
+        var diagram = this.selectedItem.selectedDiagram;
+        var selectedNode = diagram.selectedItems.nodes[0];
+        if (selectedNode.id !== 'rootNode') {
+            var selectedNodeOrientation = selectedNode.addInfo.orientation.toString();
+            orientation = selectedNodeOrientation;
+        }
+        diagram.startGroupAction();
+        var mindmapData = this.getMindMapShape(selectedNode);
+        var node = mindmapData.node;
+        this.addMindMapLevels('Level' + node.addInfo.level);
+        node.id = 'node' + this.selectedItem.randomIdGenerator();
+        if (node.addInfo) {
+            node.addInfo.orientation = orientation;
+        }
+        else {
+            node.addInfo = { 'orientation': orientation };
+        }
+        diagram.add(node);
+        var connector = this.setConnectorDefault(diagram, orientation, mindmapData.connector, selectedNode.id, node.id);
+        diagram.add(connector);
+        var node1 = this.getNode(diagram.nodes, node.id);
+        diagram.doLayout();
+        diagram.endGroupAction();
+        this.selectedItem.preventPropertyChange = true;
+        diagram.select([node1]);
+        this.selectedItem.preventPropertyChange = false;
+        diagram.dataBind();
+        diagram.bringIntoView(node1.wrapper.bounds);
+        diagram.startTextEdit(node1, node1.annotations[0].id);
+        this.selectedItem.isModified = true;
+    };
+    MindMapUtilityMethods.addSibilingChild = function (position) {
+        var diagram = this.selectedItem.selectedDiagram;
+        var selectedNode = diagram.selectedItems.nodes[0];
+        if (selectedNode.id !== 'rootNode') {
+            var selectedNodeOrientation = selectedNode.addInfo.orientation.toString();
+            var orientation_3 = selectedNodeOrientation;
+            var connector1 = this.getConnector(diagram.connectors, selectedNode.inEdges[0]);
+            diagram.startGroupAction();
+            var mindmapData = this.getMindMapShape(this.getNode(diagram.nodes, connector1.sourceID));
+            var node = mindmapData.node;
+            node.id = 'node' + this.selectedItem.randomIdGenerator();
+            if (node.addInfo) {
+                node.addInfo.orientation = orientation_3;
+            }
+            else {
+                node.addInfo = { 'orientation': orientation_3 };
+            }
+            diagram.add(node);
+            var connector = this.setConnectorDefault(diagram, orientation_3, mindmapData.connector, connector1.sourceID, node.id);
+            diagram.add(connector);
+            var node1 = this.getNode(diagram.nodes, node.id);
+            diagram.doLayout();
+            diagram.endGroupAction();
+            this.selectedItem.preventPropertyChange = true;
+            diagram.select([node1]);
+            this.selectedItem.preventPropertyChange = false;
+            diagram.bringIntoView(node1.wrapper.bounds);
+            diagram.startTextEdit(node1, node1.annotations[0].id);
+            this.selectedItem.isModified = true;
+        }
+    };
+    MindMapUtilityMethods.getConnector = function (connectors, name) {
+        for (var i = 0; i < connectors.length; i++) {
+            if (connectors[i].id === name) {
+                return connectors[i];
+            }
+        }
+        return null;
+    };
+    MindMapUtilityMethods.getNode = function (nodes, name) {
+        for (var i = 0; i < nodes.length; i++) {
+            if (nodes[i].id === name) {
+                return nodes[i];
+            }
+        }
+        return null;
+    };
+    MindMapUtilityMethods.setConnectorDefault = function (diagram, orientation, connector, sourceID, targetID) {
+        connector.id = 'connector' + this.selectedItem.randomIdGenerator();
+        connector.sourceID = sourceID;
+        connector.targetID = targetID;
+        connector.sourcePortID = 'rightPort';
+        connector.targetPortID = 'leftPort';
+        if (orientation === 'Right') {
+            connector.sourcePortID = 'leftPort';
+            connector.targetPortID = 'rightPort';
+        }
+        connector.style.strokeWidth = 3;
+        return connector;
+    };
+    MindMapUtilityMethods.lastFillIndex = 0;
+    MindMapUtilityMethods.shortCutkeys = [
+        { 'key': 'Tab', 'value': 'Add a subtopic to left side' },
+        { 'key': 'Shift + Tab', 'value': 'Add a subtopic to right side' },
+        { 'key': 'Enter', 'value': 'Add a sibling subtopic to top' },
+        { 'key': 'Shift + Enter', 'value': 'Add a sibling subtopic to bottom' },
+        { 'key': 'Delete', 'value': 'Delete a topic' },
+        { 'key': 'Spacebar', 'value': 'Expand/Collapse a topic' },
+        { 'key': 'F2', 'value': 'Edit a topic' },
+        { 'key': 'Esc', 'value': 'End a text editing' },
+        { 'key': 'Arrow(Up, Down, Left, Right)', 'value': 'Navigate between topics' },
+    ];
+    MindMapUtilityMethods.handle = [
+        {
+            name: 'leftHandle', pathColor: 'white', backgroundColor: '#7d7d7d', borderColor: 'white',
+            pathData: 'M0,3.063 L7.292,3.063 L7.292,0 L11.924,4.633 L7.292,9.266 L7.292,5.714 L0.001,5.714 L0.001,3.063Z',
+            side: 'Right', offset: 0.5, horizontalAlignment: 'Center', verticalAlignment: 'Center',
+        },
+        {
+            name: 'rightHandle', pathColor: 'white', backgroundColor: '#7d7d7d', borderColor: 'white',
+            pathData: 'M11.924,6.202 L4.633,6.202 L4.633,9.266 L0,4.633 L4.632,0 L4.632,3.551 L11.923,3.551 L11.923,6.202Z',
+            visible: true, offset: 0.5, side: 'Left', horizontalAlignment: 'Center', verticalAlignment: 'Center'
+        }, {
+            name: 'removeHandle', pathColor: 'white', backgroundColor: '#7d7d7d', borderColor: 'white',
+            pathData: 'M 7.04 22.13 L 92.95 22.13 L 92.95 88.8 C 92.95 91.92 91.55 94.58 88.76 96.74 C 85.97 98.91 82.55 100 78.52 100 L 21.48 100 C 17.45 100 14.03 98.91 11.24 96.74 C 8.45 94.58 7.04 91.92 7.04 88.8 z M 32.22 0 L 67.78 0 L 75.17 5.47 L 100 5.47 L 100 16.67 L 0 16.67 L 0 5.47 L 24.83 5.47 z',
+            side: 'Bottom', offset: 0.5, horizontalAlignment: 'Center', verticalAlignment: 'Center'
+        }
+    ];
+    return MindMapUtilityMethods;
+}());

scripts/orgchart.js

@@ -0,0 +1,789 @@
+var OrgChartData = (function () {
+    function OrgChartData(selectedItem1) {
+        this.selectedItem = selectedItem1;
+    }
+    OrgChartData.prototype.getCommandSettings = function () {
+        var commandManager = {
+            commands: [{
+                    gesture: { key: ej.diagrams.Keys.Tab }, canExecute: this.canExecute,
+                    execute: this.addChild.bind(this), name: 'SubChild'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Enter }, canExecute: this.canExecute,
+                    execute: this.addRightChild.bind(this), name: 'SameLevelSubChild'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Tab, keyModifiers: ej.diagrams.KeyModifiers.Shift }, canExecute: this.canExecute,
+                    execute: this.changeChildParent.bind(this), name: 'sibilingChildTop'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Delete }, canExecute: this.canExecute,
+                    execute: this.removeChild.bind(this), name: 'deleteChid'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Down }, canExecute: this.canExecute,
+                    execute: this.navigateBottomChild.bind(this), name: 'navigationDown'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Up }, canExecute: this.canExecute,
+                    execute: this.navigateTopChild.bind(this), name: 'navigationUp'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Left }, canExecute: this.canExecute,
+                    execute: this.navigateLeftChild.bind(this), name: 'navigationLeft'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Right }, canExecute: this.canExecute,
+                    execute: this.navigateRightChild.bind(this), name: 'navigationRight'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.F2 }, canExecute: this.canExecute,
+                    execute: this.editChild.bind(this), name: 'editChild'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.F1 }, canExecute: this.canExecute,
+                    execute: OrgChartUtilityMethods.onHideNodeClick.bind(OrgChartUtilityMethods), name: 'showShortCut'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Z, keyModifiers: ej.diagrams.KeyModifiers.Control }, canExecute: this.canExecute,
+                    execute: this.undoOrgChart.bind(this), name: 'undo'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Y, keyModifiers: ej.diagrams.KeyModifiers.Control }, canExecute: this.canExecute,
+                    execute: this.redoOrgChart.bind(this), name: 'redo'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.Space }, canExecute: this.canExecute,
+                    execute: this.spaceOrgChart.bind(this), name: 'expandcollapse'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.X, keyModifiers: ej.diagrams.KeyModifiers.Control }, canExecute: this.canExecute,
+                    execute: this.cutOrgChart.bind(this), name: 'cutObject'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.C, keyModifiers: ej.diagrams.KeyModifiers.Control }, canExecute: this.canExecute,
+                    execute: this.copyOrgChart.bind(this), name: 'copyObject'
+                },
+                {
+                    gesture: { key: ej.diagrams.Keys.V, keyModifiers: ej.diagrams.KeyModifiers.Control }, canExecute: this.canExecute,
+                    execute: this.pasteOrgChart.bind(this), name: 'pasteObject'
+                }
+            ]
+        };
+        commandManager.commands = CommonKeyboardCommands.addCommonCommands(commandManager.commands);
+        return commandManager;
+    };
+    OrgChartData.prototype.spaceOrgChart = function () {
+        // let diagram: Diagram = this.selectedItem.selectedDiagram;
+        // let selectedNode: Node = diagram.selectedItems.nodes[0] as Node;
+        // selectedNode.isExpanded = !selectedNode.isExpanded;
+        // diagram.dataBind();
+    };
+    OrgChartData.prototype.undoOrgChart = function () {
+        this.selectedItem.utilityMethods.undoRedoLayout(true, this.selectedItem);
+    };
+    OrgChartData.prototype.redoOrgChart = function () {
+        this.selectedItem.utilityMethods.undoRedoLayout(false, this.selectedItem);
+    };
+    OrgChartData.prototype.cutOrgChart = function () {
+        this.selectedItem.utilityMethods.cutLayout(this.selectedItem);
+    };
+    OrgChartData.prototype.copyOrgChart = function () {
+        this.selectedItem.utilityMethods.copyLayout(this.selectedItem);
+    };
+    OrgChartData.prototype.pasteOrgChart = function () {
+        this.selectedItem.utilityMethods.pasteLayout(this.selectedItem);
+    };
+    OrgChartData.prototype.addChild = function (args) {
+        var diagram = this.selectedItem.selectedDiagram;
+        OrgChartUtilityMethods.addChild(diagram.selectedItems.nodes[0].id);
+    };
+    OrgChartData.prototype.editChild = function (args) {
+        var diagram = this.selectedItem.selectedDiagram;
+        OrgChartUtilityMethods.showCustomProperty();
+    };
+    OrgChartData.prototype.addRightChild = function (args) {
+        var diagram = this.selectedItem.selectedDiagram;
+        if (diagram.selectedItems.nodes.length > 0) {
+            var node = diagram.selectedItems.nodes[0];
+            if (node.inEdges.length > 0) {
+                var connector1 = this.getConnector(diagram.connectors, node.inEdges[0]);
+                OrgChartUtilityMethods.addChild(connector1.sourceID);
+            }
+        }
+    };
+    OrgChartData.prototype.changeChildParent = function () {
+        this.selectedItem.preventPropertyChange = true;
+        var diagram = this.selectedItem.selectedDiagram;
+        var selectedNode = diagram.selectedItems.nodes[0];
+        if (selectedNode.inEdges.length > 0) {
+            var connector1 = this.getConnector(diagram.connectors, selectedNode.inEdges[0]);
+            var parentNode = this.getNode(diagram.nodes, connector1.sourceID);
+            if (parentNode.inEdges.length > 0) {
+                var connector2 = this.getConnector(diagram.connectors, parentNode.inEdges[0]);
+                connector1.sourceID = connector2.sourceID;
+                diagram.dataBind();
+            }
+            else {
+                diagram.remove(connector1);
+            }
+            diagram.doLayout();
+            diagram.select([selectedNode]);
+        }
+        this.selectedItem.preventPropertyChange = false;
+        this.selectedItem.isModified = true;
+    };
+    OrgChartData.prototype.removeChild = function (args) {
+        this.selectedItem.utilityMethods.removeChild(this.selectedItem);
+    };
+    OrgChartData.prototype.navigateLeftChild = function () {
+        this.navigateChild('left');
+    };
+    OrgChartData.prototype.navigateRightChild = function () {
+        this.navigateChild('right');
+    };
+    OrgChartData.prototype.navigateTopChild = function () {
+        this.navigateChild('up');
+    };
+    OrgChartData.prototype.navigateBottomChild = function () {
+        this.navigateChild('down');
+    };
+    OrgChartData.prototype.navigateChild = function (direction) {
+        var diagram = this.selectedItem.selectedDiagram;
+        var node = null;
+        if (direction === 'left' || direction === 'right') {
+            var sameLevelNodes = this.getSameLevelNodes();
+            var index = sameLevelNodes.indexOf(diagram.selectedItems.nodes[0]);
+            node = direction === 'left' ? sameLevelNodes[index - 1] : sameLevelNodes[index + 1];
+        }
+        else {
+            node = this.getMinDistanceNode(diagram, direction);
+        }
+        if (node) {
+            diagram.clearSelection();
+            diagram.select([node]);
+            diagram.bringIntoView(node.wrapper.bounds);
+        }
+    };
+    OrgChartData.prototype.getMinDistanceNode = function (diagram, direction) {
+        var node = diagram.selectedItems.nodes[0];
+        var selectedNodeBounds = node.wrapper.bounds;
+        var lastChildNode = null;
+        if (direction === 'up') {
+            var edges = node.inEdges;
+            if (edges.length > 0) {
+                var connector = this.getConnector(diagram.connectors, edges[0]);
+                var parentNode = this.getNode(diagram.nodes, connector.sourceID);
+                var childNodes = [];
+                for (var i = 0; i < parentNode.outEdges.length; i++) {
+                    connector = this.getConnector(diagram.connectors, parentNode.outEdges[i]);
+                    var childNode = this.getNode(diagram.nodes, connector.targetID);
+                    if (childNode) {
+                        childNodes.push(childNode);
+                    }
+                }
+                if (childNodes.length > 0) {
+                    for (var i = 0; i < childNodes.length; i++) {
+                        var childNodeBounds = childNodes[i].wrapper.bounds;
+                        if (childNodeBounds.top < selectedNodeBounds.top && childNodeBounds.left === selectedNodeBounds.left) {
+                            lastChildNode = childNodes[i];
+                        }
+                    }
+                }
+                if (!lastChildNode) {
+                    lastChildNode = parentNode;
+                }
+            }
+        }
+        else {
+            var oldChildBoundsLeft = 0;
+            var edges = node.outEdges;
+            for (var i = 0; i < edges.length; i++) {
+                var connector = this.getConnector(diagram.connectors, edges[i]);
+                var childNode = this.getNode(diagram.nodes, connector.targetID);
+                if (childNode) {
+                    var childNodeBounds = childNode.wrapper.bounds;
+                    if (selectedNodeBounds.left >= childNodeBounds.left &&
+                        (childNodeBounds.left >= oldChildBoundsLeft || oldChildBoundsLeft === 0)) {
+                        if (lastChildNode) {
+                            if (childNodeBounds.top <= lastChildNode.wrapper.bounds.top) {
+                                lastChildNode = childNode;
+                            }
+                        }
+                        else {
+                            lastChildNode = childNode;
+                        }
+                    }
+                }
+                if (!lastChildNode) {
+                    lastChildNode = childNode;
+                }
+            }
+        }
+        return lastChildNode;
+    };
+    OrgChartData.prototype.getSameLevelNodes = function () {
+        var sameLevelNodes = [];
+        var diagram = this.selectedItem.selectedDiagram;
+        if (diagram.selectedItems.nodes.length > 0) {
+            var node = diagram.selectedItems.nodes[0];
+            var connector = this.getConnector(diagram.connectors, node.inEdges[0]);
+            var parentNode = this.getNode(diagram.nodes, connector.sourceID);
+            for (var i = 0; i < parentNode.outEdges.length; i++) {
+                connector = this.getConnector(diagram.connectors, parentNode.outEdges[i]);
+                var childNode = this.getNode(diagram.nodes, connector.targetID);
+                if (childNode) {
+                    sameLevelNodes.push(childNode);
+                }
+            }
+        }
+        return sameLevelNodes;
+    };
+    OrgChartData.prototype.getConnector = function (connectors, name) {
+        for (var i = 0; i < connectors.length; i++) {
+            if (connectors[i].id === name) {
+                return connectors[i];
+            }
+        }
+        return null;
+    };
+    OrgChartData.prototype.getNode = function (nodes, name) {
+        for (var i = 0; i < nodes.length; i++) {
+            if (nodes[i].id === name) {
+                return nodes[i];
+            }
+        }
+        return null;
+    };
+    OrgChartData.prototype.createOrgChart = function (isNew) {
+        var diagram = this.selectedItem.selectedDiagram;
+        this.selectedItem.utilityMethods.currentDiagramVisibility('orgchart-diagram', this.selectedItem);
+        diagram.updateViewPort();
+        if (isNew) {
+            diagram.clear();
+            OrgChartUtilityMethods.createEmptyOrgChart();
+            this.doLayoutSettings(diagram);
+        }
+        else {
+            diagram.commandManager = this.getCommandSettings();
+        }
+        diagram.contextMenuSettings.show = false;
+        diagram.dataBind();
+    };
+    OrgChartData.prototype.doLayoutSettings = function (diagram) {
+        diagram.layout = {
+            type: 'OrganizationalChart',
+            horizontalSpacing: 50, verticalSpacing: 50,
+            getLayoutInfo: OrgChartUtilityMethods.getLayoutInfo.bind(OrgChartUtilityMethods)
+        };
+        diagram.selectedItems = { userHandles: OrgChartUtilityMethods.handle, constraints: ej.diagrams.SelectorConstraints.UserHandle };
+        diagram.tool = ej.diagrams.DiagramTools.SingleSelect | ej.diagrams.DiagramTools.ZoomPan;
+        diagram.pageSettings = { width: null, height: null };
+        diagram.commandManager = this.getCommandSettings();
+        diagram.snapSettings.constraints = diagram.snapSettings.constraints & ~ej.diagrams.SnapConstraints.ShowLines;
+        diagram.selectedItems.constraints = ej.diagrams.SelectorConstraints.UserHandle;
+        diagram.dataBind();
+    };
+    OrgChartData.prototype.canExecute = function () {
+        return true;
+    };
+    return OrgChartData;
+}());
+
+var OrgChartUtilityMethods = (function () {
+    function OrgChartUtilityMethods() {
+    }
+    OrgChartUtilityMethods.orgchartPaste = function () {
+        var diagram = this.selectedItem.selectedDiagram;
+        var selectedNode = diagram.selectedItems.nodes[0];
+        var selectedelement;
+        var mindmapData;
+        var orientation;
+        diagram.startGroupAction();
+        if (this.selectedItem.pasteData.length > 0) {
+            diagram.paste(this.selectedItem.pasteData);
+            selectedelement = this.selectedItem.pastedFirstItem;
+            var connector = {
+                id: 'connector' + this.selectedItem.randomIdGenerator(), sourceID: selectedNode.id,
+                targetID: selectedelement.id, type: 'Orthogonal',
+                style: { strokeColor: 'black', strokeWidth: 2 }
+            };
+            connector.constraints = ej.diagrams.ConnectorConstraints.PointerEvents | ej.diagrams.ConnectorConstraints.Select | ej.diagrams.ConnectorConstraints.Delete;
+            diagram.add(connector);
+            diagram.clearSelection();
+            diagram.select([selectedelement]);
+            diagram.doLayout();
+            diagram.bringIntoView(diagram.nodes[diagram.nodes.length - 1].wrapper.bounds);
+        }
+        this.selectedItem.isModified = true;
+        diagram.endGroupAction();
+    };
+    OrgChartUtilityMethods.showUploadDialog = function () {
+        this.uploadDialog.show();
+    };
+    OrgChartUtilityMethods.readFile = function (event) {
+        this.orgChart = new OrgChartData(this.selectedItem);
+        this.columnsList = [];
+        var resultString = event.target.result.toString();
+        if (this.fileType === 'csv') {
+            this.orgDataSource = OrgChartUtilityMethods.convertCsvToJson(resultString);
+        }
+        else if (this.fileType === 'json') {
+            this.orgDataSource = JSON.parse(resultString);
+            for (var i = 0; i < this.orgDataSource.length; i++) {
+                var attr = this.orgDataSource[i];
+                for (var prop in attr) {
+                    if (this.columnsList.indexOf(prop) === -1) {
+                        this.columnsList.push(prop);
+                    }
+                }
+            }
+        }
+        else {
+            var parser = new DOMParser();
+            var xmlDom = parser.parseFromString(resultString, 'text/xml');
+            var element = xmlDom.children[0];
+            this.orgDataSource = this.convertXmlToJson(element);
+        }
+        var columns = this.getDataSourceColumns();
+        //this.selectedItem.orgDataSettings.dataSourceColumns = columns;
+        document.getElementById("employeeId").ej2_instances[0].dataSource = columns;
+        document.getElementById("superVisorId").ej2_instances[0].dataSource = columns;
+        document.getElementById("orgNameField").ej2_instances[0].dataSource = columns;
+        document.getElementById("orgBindingFields").ej2_instances[0].dataSource = columns;
+        document.getElementById("orgImageField").ej2_instances[0].dataSource = columns;
+        document.getElementById("orgAdditionalField").ej2_instances[0].dataSource = columns;
+    };
+    OrgChartUtilityMethods.validateParentChildRelation = function () {
+        var isParentChild = false;
+        var ss1 = this.getParentChildValues();
+        for (var i = 0; i < ss1.childValues.length; i++) {
+            if (ss1.parentValues.indexOf(ss1.childValues[i]) !== -1) {
+                isParentChild = true;
+            }
+        }
+        return isParentChild;
+    };
+    OrgChartUtilityMethods.showCustomProperty = function () {
+        var node = this.selectedItem.selectedDiagram.selectedItems.nodes[0];
+        this.customProperty = new CustomProperties(this.selectedItem, this.customPropertyDialog);
+        this.customProperty.getPropertyDialogContent(node.addInfo);
+        this.customPropertyDialog.cssClass = 'db-org-diagram';
+        this.customPropertyDialog.dataBind();
+        this.customPropertyDialog.show();
+    };
+    OrgChartUtilityMethods.getParentChildValues = function () {
+        var parentValues = [], childValues = [];
+        for (var i = 0; i < this.orgDataSource.length; i++) {
+            var data = this.orgDataSource[i];
+            var childValue = data[this.selectedItem.orgDataSettings.id] ? data[this.selectedItem.orgDataSettings.id].toString() : '';
+            var parentValue = data[this.selectedItem.orgDataSettings.parent] ? data[this.selectedItem.orgDataSettings.parent].toString() : '';
+            if (childValue) {
+                childValues.push(childValue);
+            }
+            if (parentValue) {
+                parentValues.push(parentValue);
+            }
+        }
+        return { parentValues: parentValues, childValues: childValues };
+    };
+    OrgChartUtilityMethods.addChild = function (sourceId) {
+        var diagram = this.selectedItem.selectedDiagram;
+        var parentNode = this.getNode(diagram.nodes, sourceId);
+        diagram.startGroupAction();
+        var node = {
+            id: 'node' + this.selectedItem.randomIdGenerator(),
+            minWidth: parentNode.minWidth, minHeight: parentNode.minHeight, maxHeight: parentNode.maxHeight,
+            annotations: [{ content: 'Name', style: { bold: true, fontSize: 14 } }],
+            style: { fill: parentNode.style.fill, strokeColor: parentNode.style.strokeColor, strokeWidth: parentNode.style.strokeWidth },
+            offsetX: 200, offsetY: 200
+        };
+        node.constraints = ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.AllowDrop;
+        if (parentNode.shape && parentNode.shape.type === 'Image') {
+            node.shape = { type: 'Image', source: 'src/assets/dbstyle/orgchart_images/blank-male.jpg', align: 'XMinYMin', scale: 'Meet' };
+        }
+        else {
+            node.shape = { type: 'Basic', shape: 'Rectangle', cornerRadius: 5 };
+        }
+        var keys = Object.keys(parentNode.addInfo);
+        var addInfo = {};
+        for (var i = 0; i < keys.length; i++) {
+            var key = keys[i];
+            var keyValue = ej.diagrams.cloneObject(parentNode.addInfo[key]);
+            addInfo[key] = keyValue;
+            if (key !== 'Name') {
+                addInfo[key].value = '';
+            }
+            else {
+                addInfo[key].value = 'Name';
+            }
+        }
+        node.addInfo = ej.diagrams.cloneObject(addInfo);
+        diagram.add(node);
+        var connector = {
+            id: 'connector' + this.selectedItem.randomIdGenerator(), sourceID: sourceId,
+            targetID: node.id, type: 'Orthogonal',
+            style: { strokeColor: 'black', strokeWidth: 2 }
+        };
+        connector.constraints = ej.diagrams.ConnectorConstraints.PointerEvents | ej.diagrams.ConnectorConstraints.Select | ej.diagrams.ConnectorConstraints.Delete;
+        diagram.add(connector);
+        var node1 = this.getNode(diagram.nodes, node.id);
+        diagram.doLayout();
+        diagram.endGroupAction();
+        this.selectedItem.preventPropertyChange = true;
+        diagram.select([node1]);
+        this.selectedItem.preventPropertyChange = false;
+        diagram.bringIntoView(node1.wrapper.bounds);
+        this.selectedItem.isModified = true;
+    };
+    OrgChartUtilityMethods.getNode = function (nodes, name) {
+        for (var i = 0; i < nodes.length; i++) {
+            if (nodes[i].id === name) {
+                return nodes[i];
+            }
+        }
+        return null;
+    };
+    OrgChartUtilityMethods.bindFields = function () {
+        var addInfo = {};
+        for (var i = 0; i < this.orgDataSource.length; i++) {
+            addInfo = {};
+            addInfo.nameField = this.selectedItem.orgDataSettings.nameField;
+            addInfo.bindingFields = this.selectedItem.orgDataSettings.bindingFields;
+            addInfo.imageField = this.selectedItem.orgDataSettings.imageField;
+            addInfo.additionalFields = this.selectedItem.orgDataSettings.additionalFields;
+            this.orgDataSource[i].addInfo = ej.diagrams.cloneObject(addInfo);
+        }
+        return this.orgDataSource;
+    };
+    OrgChartUtilityMethods.createEmptyOrgChart = function () {
+        var diagram = this.selectedItem.selectedDiagram;
+        diagram.constraints = diagram.constraints & ~ej.diagrams.DiagramConstraints.UndoRedo;
+        var node = {
+            id: 'rootNode', minWidth: 150, minHeight: 50, maxHeight: 50,
+            annotations: [{ content: 'Name', style: { fontSize: 14, bold: true } }],
+            shape: { type: 'Basic', shape: 'Rectangle', cornerRadius: 5 },
+            style: { fill: '#C4F2E8', strokeColor: '#8BC1B7', strokeWidth: 2 },
+            addInfo: {
+                'Name': { value: 'Name', type: 'nameField', checked: true },
+                'Image URL': { value: '', type: 'imageField', checked: false }
+            },
+        };
+        node.constraints = ej.diagrams.NodeConstraints.Default & ~ej.diagrams.NodeConstraints.Delete;
+        node.constraints |= ej.diagrams.NodeConstraints.AllowDrop;
+        diagram.add(node);
+        var node1 = {
+            id: 'textNode', width: 400, height: 300, offsetX: diagram.scrollSettings.viewPortWidth - 200,
+            offsetY: 150, shape: { type: 'HTML', content: this.getShortCutString() }, style: { strokeWidth: 0 },
+            excludeFromLayout: true, constraints: ej.diagrams.NodeConstraints.Default & ~ej.diagrams.NodeConstraints.Delete
+        };
+        diagram.add(node1);
+        document.getElementById('diagram').querySelector('#closeIconDiv').onclick = this.onHideNodeClick.bind(this);
+        diagram.constraints = diagram.constraints | ej.diagrams.DiagramConstraints.UndoRedo;
+    };
+    OrgChartUtilityMethods.onHideNodeClick = function () {
+        var node1 = MindMapUtilityMethods.getNode(this.selectedItem.selectedDiagram.nodes, 'textNode');
+        node1.visible = !node1.visible;
+        this.selectedItem.selectedDiagram.dataBind();
+    };
+    OrgChartUtilityMethods.getShortCutString = function () {
+        return '<div style="width: 400px; height: 300px; padding: 10px; background-color: #FFF7B5; border: 1px solid #FFF7B5">' +
+            '<div id="closeIconDiv" style="float: right; width: 22px; height: 22px; border: 1px solid #FFF7B5">' +
+            '<span class="sf-icon-Close" style="font-size:14px;cursor:pointer;"></span>' +
+            '</div>' +
+            '<div>' +
+            '<span class="db-html-font-medium">Quick shortcuts</span>' +
+            '</div>' +
+            '<div style="padding-top:10px">' +
+            '<ul>' +
+            '<li>' +
+            '<span class="db-html-font-medium">Tab : </span>' +
+            '<span class="db-html-font-normal">Add a child to parent</span>' +
+            '</li>' +
+            '</ul>' +
+            '</div>' +
+            '<div>' +
+            '<ul>' +
+            '<li>' +
+            '<span class="db-html-font-medium">Enter : </span>' +
+            '<span class="db-html-font-normal">Add a child to the same level</span>' +
+            '</li>' +
+            '</ul>' +
+            '</div>' +
+            '<div>' +
+            '<ul>' +
+            '<li>' +
+            '<span class="db-html-font-medium">Shift + Tab : </span>' +
+            '<span class="db-html-font-normal">Move the child parent to the next level</span>' +
+            '</li>' +
+            '</ul>' +
+            '</div>' +
+            '<div>' +
+            '<ul>' +
+            '<li>' +
+            '<span class="db-html-font-medium">Delete : </span>' +
+            '<span class="db-html-font-normal">Delete a topic</span>' +
+            '</li>' +
+            '</ul>' +
+            '</div>' +
+            '<div>' +
+            '<ul>' +
+            '<li>' +
+            '<span class="db-html-font-medium">F2 : </span>' +
+            '<span class="db-html-font-normal">Edit a topic</span>' +
+            '</li>' +
+            '</ul>' +
+            '</div>' +
+            '<div>' +
+            '<ul>' +
+            '<li>' +
+            '<span class="db-html-font-medium">Esc : </span>' +
+            '<span class="db-html-font-normal">End text editing</span>' +
+            '</li>' +
+            '</ul>' +
+            '</div>' +
+            '<div>' +
+            '<ul>' +
+            '<li>' +
+            '<span class="db-html-font-medium">Arrow(Up, Down, Left, Right) : </span>' +
+            '<span class="db-html-font-normal">Navigate between child</span>' +
+            '</li>' +
+            '</ul>' +
+            '</div>' +
+            '<div>' +
+            '<ul>' +
+            '<li>' +
+            '<span class="db-html-font-medium">Spacebar : </span>' +
+            '<span class="db-html-font-normal">Expand/Collapse a shape</span>' +
+            '</li>' +
+            '</ul>' +
+            '</div>' +
+            '<div>' +
+            '<ul>' +
+            '<li>' +
+            '<span class="db-html-font-medium">F1 : </span>' +
+            '<span class="db-html-font-normal">Show/Hide shortcut Key</span>' +
+            '</li>' +
+            '</ul>' +
+            '</div>' +
+            '</div>';
+    };
+    OrgChartUtilityMethods.applyDataSource = function () {
+        document.getElementsByClassName('db-property-editor-container')[0].classList.add('orgchart-diagram');
+        var diagram = this.selectedItem.selectedDiagram;
+        diagram.clear();
+        diagram.updateViewPort();
+        diagram.getNodeDefaults = this.setNodeDefaults;
+        diagram.getConnectorDefaults = this.setConnectorDefaults;
+        var items = new ej.data.DataManager(this.bindFields());
+        if (this.fileType === 'xml') {
+            diagram.dataSourceSettings = {
+                id: 'id', parentId: 'parentId', dataManager: items
+            };
+        }
+        else {
+            diagram.dataSourceSettings = {
+                id: this.selectedItem.orgDataSettings.id.toString(), parentId: this.selectedItem.orgDataSettings.parent.toString(),
+                dataManager: items
+            };
+        }
+        diagram.layout = {
+            type: 'OrganizationalChart',
+            getLayoutInfo: this.getLayoutInfo.bind(this)
+        };
+        diagram.selectedItems = { userHandles: OrgChartUtilityMethods.handle, constraints: ej.diagrams.SelectorConstraints.UserHandle };
+        diagram.pageSettings = { width: null, height: null };
+        //diagram.tool = ej.diagrams.DiagramTools.SingleSelect | ej.diagrams.DiagramTools.ZoomPan;
+        diagram.commandManager = this.orgChart.getCommandSettings();
+        diagram.snapSettings.constraints = diagram.snapSettings.constraints & ~ej.diagrams.SnapConstraints.ShowLines;
+        diagram.selectedItems.constraints = ej.diagrams.SelectorConstraints.UserHandle;
+        diagram.dataBind();
+        diagram.dataBind();
+        this.uploadDialog.hide();
+    };
+    OrgChartUtilityMethods.getLayoutInfo = function (node, options) {
+        if (!options.hasSubTree) {
+            options.orientation = this.subTreeOrientation;
+            options.type = this.subTreeAlignments;
+        }
+    };
+    OrgChartUtilityMethods.getDataSourceColumns = function () {
+        var columns = [];
+        for (var i = 0; i < this.columnsList.length; i++) {
+            if (this.columnsList[i]) {
+                columns.push({
+                    'text': this.columnsList[i], 'value': this.columnsList[i]
+                });
+            }
+        }
+        return columns;
+    };
+    OrgChartUtilityMethods.setConnectorDefaults = function (connector, diagram) {
+        var connector1 = { type: 'Orthogonal', style: { strokeWidth: 2 } };
+        return connector1;
+    };
+    OrgChartUtilityMethods.setNodeDefaults = function (node, diagram) {
+        node.minWidth = node.minWidth || 150;
+        node.minHeight = node.minHeight || 100;
+        node.maxHeight = node.maxHeight || 100;
+        if (node.data) {
+            var data = node.data;
+            var addInfo = data.addInfo;
+            var addInfo1 = {};
+            var propName1 = 'Name';
+            addInfo1[propName1] = { 'value': data[addInfo.nameField.toString()], 'type': 'nameField', 'checked': true };
+            var propertyFields = [addInfo.nameField.toString()];
+            if (addInfo.imageField) {
+                propName1 = 'Image URL';
+                node.shape = {
+                    type: 'Image', source: data[addInfo.imageField.toString()].toString(),
+                    align: 'XMinYMin', scale: 'Meet'
+                };
+                node.minWidth = 250;
+                addInfo1[propName1] = { 'value': data[addInfo.imageField.toString()], 'type': 'imageField', 'checked': true };
+            }
+            if (addInfo.bindingFields) {
+                var bindingFields = addInfo.bindingFields;
+                for (var i = 0; i < bindingFields.length; i++) {
+                    addInfo1[bindingFields[i]] = { 'value': data[bindingFields[i]], 'type': 'bindingField', 'checked': true };
+                }
+                propertyFields = propertyFields.concat(bindingFields);
+            }
+            var annotations = [];
+            var startY = 0.5 - ((propertyFields.length - 1) / 10);
+            for (var i = 0; i < propertyFields.length; i++) {
+                var content = data[propertyFields[i]];
+                var annotation1 = { content: content ? content : '' };
+                var offset = { x: 0.5, y: startY };
+                if (node.shape && node.shape.type === 'Image') {
+                    offset.x = 0;
+                    annotation1.margin = { left: 110 };
+                    annotation1.horizontalAlignment = 'Left';
+                }
+                if (i === 0) {
+                    annotation1.style = { fontSize: 14, bold: true };
+                }
+                startY += 0.2;
+                annotation1.offset = offset;
+                annotations.push(annotation1);
+            }
+            if (annotations.length > 0) {
+                node.annotations = annotations;
+            }
+            if (addInfo.additionalFields) {
+                var additionalFields = addInfo.additionalFields;
+                var content = '';
+                for (var i = 0; i < additionalFields.length; i++) {
+                    content = content + additionalFields[i] + ':' + data[additionalFields[i]] + '\n';
+                    addInfo1[additionalFields[i]] = { 'value': data[additionalFields[i]], 'type': 'bindingField', 'checked': false };
+                }
+                node.tooltip = { content: content, position: 'BottomCenter', relativeMode: 'Object' };
+                node.constraints = ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.Tooltip;
+            }
+            node.style.fill = '#88C65C';
+            node.style.strokeColor = '#88C65C';
+            node.addInfo = addInfo1;
+        }
+        return node;
+    };
+    OrgChartUtilityMethods.convertCsvToJson = function (csvText) {
+        var allTextLines = csvText.split(/\r\n|\n/);
+        this.columnsList = allTextLines[0].split(',');
+        var lines = [];
+        for (var i = 1; i < allTextLines.length; i++) {
+            if (allTextLines[i]) {
+                var data = allTextLines[i].split(',');
+                //if (data.length === headers.length) {
+                var tarr = {};
+                for (var j = 0; j < this.columnsList.length; j++) {
+                    if (data[j].trim().startsWith('"') && !data[j].trim().endsWith('"')) {
+                        while (!data[j].trim().endsWith('"')) {
+                            data[j] = data[j] + ',' + data[j + 1];
+                            data.splice(j + 1, 1);
+                        }
+                    }
+                    tarr[this.columnsList[j]] = data[j];
+                }
+                lines.push(tarr);
+                //}
+            }
+        }
+        return lines;
+    };
+    OrgChartUtilityMethods.convertXmlToJson = function (element) {
+        var dataSource = [];
+        for (var i = 0; i < element.children.length; i++) {
+            var childElement = element.children[i];
+            var rowData = this.generateRowData(childElement, dataSource.length.toString());
+            if (Object.keys(rowData).length > 0) {
+                dataSource.push(rowData);
+            }
+            if (childElement.children.length > 0) {
+                var key = 'id';
+                this.convertChildXmlToJson(childElement, rowData[key].toString(), dataSource);
+            }
+        }
+        return dataSource;
+    };
+    OrgChartUtilityMethods.convertChildXmlToJson = function (element, parentId, dataSource) {
+        for (var i = 0; i < element.children.length; i++) {
+            var childElement = element.children[i];
+            var rowData = this.generateRowData(childElement, dataSource.length.toString(), parentId.toString());
+            if (Object.keys(rowData).length > 0) {
+                dataSource.push(rowData);
+            }
+            if (childElement.children.length > 0) {
+                var key = 'id';
+                this.convertChildXmlToJson(childElement, rowData[key].toString(), dataSource);
+            }
+        }
+    };
+    OrgChartUtilityMethods.generateRowData = function (element, id, parentId) {
+        var rowData = {};
+        for (var i = 0; i < element.attributes.length; i++) {
+            var attr = element.attributes[i];
+            rowData[attr.name] = attr.value;
+            if (this.columnsList.indexOf(attr.name) === -1) {
+                this.columnsList.push(attr.name);
+            }
+        }
+        var key = 'id';
+        rowData[key] = id;
+        if (parentId) {
+            key = 'parentId';
+            rowData[key] = parentId;
+        }
+        return rowData;
+    };
+    OrgChartUtilityMethods.columnsList = [];
+    OrgChartUtilityMethods.orgDataSource = [];
+    OrgChartUtilityMethods.subTreeOrientation = 'Vertical';
+    OrgChartUtilityMethods.subTreeAlignments = 'Alternate';
+    OrgChartUtilityMethods.shortCutkeys = [
+        { 'key': 'Tab', 'value': 'Add a child to parent' },
+        { 'key': 'Enter', 'value': 'Add a child to same level' },
+        { 'key': 'Shift + Tab', 'value': 'Move the child parent to next level' },
+        { 'key': 'Delete', 'value': 'Delete a child' },
+        { 'key': 'Spacebar', 'value': 'Expand/Collapse a shape' },
+        { 'key': 'F2', 'value': 'Edit a shape' },
+        { 'key': 'Esc', 'value': 'End Editing' },
+        { 'key': 'Arrow(Up, Down, Left, Right)', 'value': 'Navigate between child' },
+    ];
+    OrgChartUtilityMethods.handle = [
+        {
+            name: 'orgAddHandle', pathColor: 'white', backgroundColor: '#7d7d7d', borderColor: 'white',
+            pathData: 'M 30.05 15.03 L 30.05 30.05 L 15.02 30.05 L 15.02 39.9 L 30.05 39.9 L 30.05 54.93 L 39.9 54.93 L 39.9 39.9 L 54.93 39.9 L 54.93 30.05 L 39.9 30.05 L 39.9 15.03 z',
+            side: 'Left', offset: 0, horizontalAlignment: 'Center', verticalAlignment: 'Center'
+        },
+        {
+            name: 'orgRemoveHandle', pathColor: 'white', backgroundColor: '#7d7d7d', borderColor: 'white',
+            pathData: 'M 7.04 22.13 L 92.95 22.13 L 92.95 88.8 C 92.95 91.92 91.55 94.58 88.76 96.74 C 85.97 98.91 82.55 100 78.52 100 L 21.48 100 C 17.45 100 14.03 98.91 11.24 96.74 C 8.45 94.58 7.04 91.92 7.04 88.8 z M 32.22 0 L 67.78 0 L 75.17 5.47 L 100 5.47 L 100 16.67 L 0 16.67 L 0 5.47 L 24.83 5.47 z',
+            visible: true, offset: 1, side: 'Right', horizontalAlignment: 'Center', verticalAlignment: 'Center'
+        }, {
+            name: 'orgEditHandle', pathColor: 'white', backgroundColor: '#7d7d7d', borderColor: 'white',
+            pathData: 'M 42.65 30.41 L 67.5 53.99 L 41.2 78.73 C 39.41 80.42 37.34 81.27 34.99 81.27 C 32.65 81.27 30.57 80.49 28.78 78.93 L 25.05 82.44 L 0 82.44 L 16.36 67.05 C 14.57 65.36 13.67 63.41 13.67 61.2 C 13.67 58.99 14.57 56.98 16.36 55.16 z M 78.42 25.49 C 78.57 0 78.73 0.01 78.88 0.01 C 81.09 -0.12 83.09 0.66 84.88 2.35 L 97.52 14.04 C 99.17 15.86 100 17.87 100 20.09 C 100 22.29 99.17 24.24 97.52 25.93 L 71.84 50.09 L 46.79 26.51 L 72.47 2.35 C 74.15 0.77 76.13 -0.02 78.42 25.49 z',
+            side: 'Right', offset: 0, horizontalAlignment: 'Center', verticalAlignment: 'Center'
+        },
+    ];
+    return OrgChartUtilityMethods;
+}());

scripts/pages.js

@@ -0,0 +1,206 @@
+/**
+ * Page Handler
+ */
+var PageOptions = (function () {
+    function PageOptions() {
+    }
+    return PageOptions;
+}());
+
+var PageCreation = (function () {
+    function PageCreation(selectedItem) {
+        this.pageOptionList = [];
+        this.pageSwitch = false;
+        this.selectedItem = selectedItem;
+    }
+    PageCreation.prototype.generatePageButtons = function (pages) {
+        var pageOptionElement = document.getElementById('pageOptionList');
+        var pageContainerWidth = pageOptionElement.parentElement.getBoundingClientRect().width - 1;
+        var buttonWidth = 75;
+        if (pages.length * buttonWidth > pageContainerWidth) {
+            buttonWidth = (pageContainerWidth - 32) / pages.length;
+        }
+        while (pageOptionElement.hasChildNodes()) {
+            pageOptionElement.removeChild(pageOptionElement.lastChild);
+        }
+        for (var i = 0; i < pages.length; i++) {
+            var pageOption = pages[i];
+            var buttonElement_1 = document.createElement('button');
+            buttonElement_1.setAttribute('id', pageOption.name);
+            buttonElement_1.setAttribute('style', 'width:' + buttonWidth + 'px');
+            buttonElement_1.setAttribute('title', pageOption.text);
+            buttonElement_1.onclick = this.showPageData.bind(this);
+            pageOptionElement.appendChild(buttonElement_1);
+            var pageButton_1 = new ej.buttons.Button({
+                content: pageOption.text
+            });
+            pageButton_1.appendTo(buttonElement_1);
+            if (this.activePage.name === pageOption.name) {
+                buttonElement_1.classList.add('db-active-page');
+            }
+        }
+        var buttonElement = document.createElement('button');
+        buttonElement.setAttribute('id', 'addNewPage');
+        pageOptionElement.appendChild(buttonElement);
+        buttonElement.setAttribute('style', 'width:32px');
+        buttonElement.onclick = this.addNewPage.bind(this);
+        var pageButton = new ej.buttons.Button({
+            iconCss: 'sf-icon-Plus'
+        });
+        pageButton.appendTo(buttonElement);
+    };
+    PageCreation.prototype.showPageData = function (evt) {
+        var target = evt.target;
+        var page1 = this.findPage(target.id);
+        if (page1 != null) {
+            if (this.activePage) {
+                var button = document.getElementById(this.activePage.name);
+                if (button.classList.contains('db-active-page')) {
+                    button.classList.remove('db-active-page');
+                }
+                this.saveDiagramSettings();
+            }
+            this.activePage = page1;
+            this.pageSwitch = true;
+            this.loadDiagramSettings();
+            this.pageSwitch = false;
+        }
+        target.classList.add('db-active-page');
+    };
+    PageCreation.prototype.findPage = function (id) {
+        for (var i = 0; i < this.pageOptionList.length; i++) {
+            if (this.pageOptionList[i].name === id) {
+                return this.pageOptionList[i];
+            }
+        }
+        return null;
+    };
+    PageCreation.prototype.addNewPage = function () {
+        if (this.activePage) {
+            this.saveDiagramSettings();
+            this.selectedItem.selectedDiagram.clear();
+        }
+        if (this.selectedItem.diagramType === 'MindMap') {
+            MindMapUtilityMethods.createEmptyMindMap();
+            this.selectedItem.selectedDiagram.doLayout();
+        }
+        else if (this.selectedItem.diagramType === 'OrgChart') {
+            OrgChartUtilityMethods.createEmptyOrgChart();
+            this.selectedItem.selectedDiagram.doLayout();
+        }
+        this.activePage = new PageOptions();
+        this.activePage.name = 'page' + (this.pageOptionList.length + 1);
+        this.activePage.text = 'Page' + (this.pageOptionList.length + 1);
+        this.pageOptionList.push(this.activePage);
+        this.generatePageButtons(this.pageOptionList);
+    };
+    PageCreation.prototype.savePage = function () {
+        var pageData = {};
+        this.saveDiagramSettings();
+        pageData.pageOptionList = this.pageOptionList;
+        pageData.activePage = this.activePage.name;
+        pageData.diagramType = this.selectedItem.diagramType;
+        return JSON.stringify(pageData);
+    };
+    PageCreation.prototype.loadPage = function (savedData) {
+        var pageData = JSON.parse(savedData);
+        this.pageOptionList = pageData.pageOptionList;
+        this.activePage = this.findPage(pageData.activePage.toString());
+        this.selectedItem.diagramType = pageData.diagramType.toString();
+        this.generatePageButtons(this.pageOptionList);
+    };
+    PageCreation.prototype.saveDiagramSettings = function () {
+        this.activePage.diagram = JSON.parse(this.selectedItem.selectedDiagram.saveDiagram());
+        if (this.selectedItem.diagramType === 'MindMap') {
+            this.activePage.mindmapTemplateType = MindMapUtilityMethods.templateType;
+        }
+    };
+    PageCreation.prototype.loadDiagramSettings = function () {
+        var diagram = this.selectedItem.selectedDiagram;
+        document.getElementsByClassName('sidebar')[0].className = 'sidebar show-overview';
+        this.selectedItem.isLoading = true;
+        diagram.loadDiagram(JSON.stringify(this.activePage.diagram));
+        diagram.clearSelection();
+        this.selectedItem.isLoading = false;
+        document.getElementsByClassName('sidebar')[0].className = 'sidebar';
+        if (this.selectedItem.diagramType === 'MindMap') {
+            MindMapUtilityMethods.templateType = this.activePage.mindmapTemplateType;
+            if (!this.pageSwitch && !this.selectedItem.isTemplateLoad) {
+                MindMapUtilityMethods.selectedItem = this.selectedItem;
+                var map = new MindMap(this.selectedItem);
+                map.createMindMap(false);
+            }
+            var closeIconDiv = document.getElementById('diagram').querySelector('#closeIconDiv');
+            if (closeIconDiv) {
+                closeIconDiv.onclick = MindMapUtilityMethods.onHideNodeClick.bind(MindMapUtilityMethods);
+            }
+        }
+        if (this.selectedItem.diagramType === 'OrgChart') {
+            if (!this.pageSwitch && !this.selectedItem.isTemplateLoad) {
+                OrgChartUtilityMethods.selectedItem = this.selectedItem;
+                var org = new OrgChartData(this.selectedItem);
+                org.createOrgChart(false);
+            }
+            var closeIconDiv = document.getElementById('diagram').querySelector('#closeIconDiv');
+            if (closeIconDiv) {
+                closeIconDiv.onclick = OrgChartUtilityMethods.onHideNodeClick.bind(OrgChartUtilityMethods);
+            }
+        }
+        var btnView = document.getElementById('btnViewMenu');
+        btnView = btnView.ej2_instances[0];
+        if (diagram.rulerSettings) {
+            btnView.items[5].iconCss = diagram.rulerSettings.showRulers ? 'sf-icon-Selection' : '';
+            var containerDiv = document.getElementById('diagramContainerDiv');
+            if (!diagram.rulerSettings.showRulers) {
+                containerDiv.classList.remove('db-show-ruler');
+            }
+            else {
+                if (!containerDiv.classList.contains('db-show-ruler')) {
+                    containerDiv.classList.add('db-show-ruler');
+                }
+            }
+        }
+        if (diagram.snapSettings) {
+            btnView.items[6].iconCss = (diagram.snapSettings.constraints & ej.diagrams.SnapConstraints.SnapToObject) ? 'sf-icon-Selection' : '';
+            btnView.items[7].iconCss = (diagram.snapSettings.constraints & ej.diagrams.SnapConstraints.ShowLines) ? 'sf-icon-Selection' : '';
+            btnView.items[9].iconCss = (diagram.snapSettings.constraints & ej.diagrams.SnapConstraints.SnapToLines) ? 'sf-icon-Selection' : '';
+        }
+    };
+    PageCreation.prototype.loadJson = function () {
+        var _this = this;
+        if (!this.selectedItem.uniqueId) {
+            this.selectedItem.uniqueId = this.selectedItem.randomIdGenerator();
+        }
+        if (this.selectedItem.isModified) {
+            var spanElement_1 = document.getElementById('diagramreport');
+            spanElement_1.innerHTML = 'Saving';
+            this.selectedItem.isModified = false;
+            var save = this.savePage();
+            var ajax = new Ajax('https://ej2services.syncfusion.com/production/web-services/api/Diagram/SaveJson', 'POST', true, 'application/json');
+            var data = JSON.stringify({
+                DiagramName: this.selectedItem.uniqueId,
+                DiagramContent: save,
+            });
+            ajax.send(data).then();
+            var context_1 = this;
+            ajax.onSuccess = function (data) {
+                //if (window.location.pathname.length === 1) {
+                var uri = window.location.origin + _this.selectedItem.getAbsolutePath() + '?id=' + _this.selectedItem.uniqueId;
+                window.history.replaceState(null, null, uri);
+                context_1.isModified = false;
+                spanElement_1.innerHTML = 'Saved';
+                //}
+            };
+            ajax.onFailure = function (args) {
+                context_1.isModified = false;
+                spanElement_1.innerHTML = 'Offline';
+            };
+            ajax.onError = function (args) {
+                context_1.isModified = false;
+                spanElement_1.innerHTML = 'Offline';
+                return null;
+            };
+        }
+    };
+    return PageCreation;
+}());

scripts/palettes.js

@@ -0,0 +1,209 @@
+/**
+ *  Palette handler
+ */
+var Palettes = (function () {
+    function Palettes() {
+        this.electricalShapes = new ElectricalShapes();
+        this.floorplans = new FloorplanShapes();
+        this.networkShapes = new NetworkShapes();
+    }
+    Palettes.prototype.getSymbolPalette = function () {
+        var palettes = [
+            { id: 'flow', expanded: true, symbols: this.getFlowShapes(), title: 'Flow Shapes' },
+            { id: 'basic', expanded: false, symbols: this.getBasicShapes(), title: 'Basic Shapes' },
+            { id: 'bpmn', expanded: false, symbols: this.getBPMNShapes(), title: 'BPMN Shapes' },
+            { id: 'connectors', expanded: false, symbols: this.getConnectors(), title: 'Connectors' }
+        ];
+        return palettes;
+    };
+    Palettes.prototype.getBasicShapes = function () {
+        var basicShapes = [
+            { id: 'Rectangle', shape: { type: 'Basic', shape: 'Rectangle' }, style: { strokeWidth: 2 } },
+            { id: 'Ellipse', shape: { type: 'Basic', shape: 'Ellipse' }, style: { strokeWidth: 2 } },
+            { id: 'Hexagon', shape: { type: 'Basic', shape: 'Hexagon' }, style: { strokeWidth: 2 } },
+            { id: 'Parallelogram', shape: { type: 'Basic', shape: 'Parallelogram' }, style: { strokeWidth: 2 } },
+            { id: 'Triangle', shape: { type: 'Basic', shape: 'Triangle' }, style: { strokeWidth: 2 } },
+            { id: 'Plus', shape: { type: 'Basic', shape: 'Plus' }, style: { strokeWidth: 2 } },
+            { id: 'Star', shape: { type: 'Basic', shape: 'Star' }, style: { strokeWidth: 2 } },
+            { id: 'Pentagon', shape: { type: 'Basic', shape: 'Pentagon' }, style: { strokeWidth: 2 } },
+            { id: 'Heptagon', shape: { type: 'Basic', shape: 'Heptagon' }, style: { strokeWidth: 2 } },
+            { id: 'Octagon', shape: { type: 'Basic', shape: 'Octagon' }, style: { strokeWidth: 2 } },
+            { id: 'Trapezoid', shape: { type: 'Basic', shape: 'Trapezoid' }, style: { strokeWidth: 2 } },
+            { id: 'Decagon', shape: { type: 'Basic', shape: 'Decagon' }, style: { strokeWidth: 2 } },
+            { id: 'RightTriangle', shape: { type: 'Basic', shape: 'RightTriangle' }, style: { strokeWidth: 2 } },
+            { id: 'Cylinder', shape: { type: 'Basic', shape: 'Cylinder' }, style: { strokeWidth: 2 } },
+            { id: 'Diamond', shape: { type: 'Basic', shape: 'Diamond' }, style: { strokeWidth: 2 } },
+        ];
+        return basicShapes;
+    };
+    Palettes.prototype.getFlowShapes = function () {
+        var flowShapes = [
+            { id: 'Terminator', shape: { type: 'Flow', shape: 'Terminator' }, style: { strokeWidth: 2 } },
+            { id: 'Process', shape: { type: 'Flow', shape: 'Process' }, style: { strokeWidth: 2 } },
+            { id: 'Decision', shape: { type: 'Flow', shape: 'Decision' }, style: { strokeWidth: 2 } },
+            { id: 'Document', shape: { type: 'Flow', shape: 'Document' }, style: { strokeWidth: 2 } },
+            { id: 'PreDefinedProcess', shape: { type: 'Flow', shape: 'PreDefinedProcess' }, style: { strokeWidth: 2 } },
+            { id: 'PaperTap', shape: { type: 'Flow', shape: 'PaperTap' }, style: { strokeWidth: 2 } },
+            { id: 'DirectData', shape: { type: 'Flow', shape: 'DirectData' }, style: { strokeWidth: 2 } },
+            { id: 'SequentialData', shape: { type: 'Flow', shape: 'SequentialData' }, style: { strokeWidth: 2 } },
+            { id: 'Sort', shape: { type: 'Flow', shape: 'Sort' }, style: { strokeWidth: 2 } },
+            { id: 'MultiDocument', shape: { type: 'Flow', shape: 'MultiDocument' }, style: { strokeWidth: 2 } },
+            { id: 'Collate', shape: { type: 'Flow', shape: 'Collate' }, style: { strokeWidth: 2 } },
+            { id: 'SummingJunction', shape: { type: 'Flow', shape: 'SummingJunction' }, style: { strokeWidth: 2 } },
+            { id: 'Or', shape: { type: 'Flow', shape: 'Or' }, style: { strokeWidth: 2 } },
+            { id: 'InternalStorage', shape: { type: 'Flow', shape: 'InternalStorage' }, style: { strokeWidth: 2 } },
+            { id: 'Extract', shape: { type: 'Flow', shape: 'Extract' }, style: { strokeWidth: 2 } },
+            { id: 'ManualOperation', shape: { type: 'Flow', shape: 'ManualOperation' }, style: { strokeWidth: 2 } },
+            { id: 'Merge', shape: { type: 'Flow', shape: 'Merge' }, style: { strokeWidth: 2 } },
+            { id: 'OffPageReference', shape: { type: 'Flow', shape: 'OffPageReference' }, style: { strokeWidth: 2 } },
+            { id: 'SequentialAccessStorage', shape: { type: 'Flow', shape: 'SequentialAccessStorage' }, style: { strokeWidth: 2 } },
+            { id: 'Annotation', shape: { type: 'Flow', shape: 'Annotation' }, style: { strokeWidth: 2 } },
+            { id: 'Annotation2', shape: { type: 'Flow', shape: 'Annotation2' }, style: { strokeWidth: 2 } },
+            { id: 'data', shape: { type: 'Flow', shape: 'Data' }, style: { strokeWidth: 2 } },
+            { id: 'Card', shape: { type: 'Flow', shape: 'Card' }, style: { strokeWidth: 2 } },
+            { id: 'Delay', shape: { type: 'Flow', shape: 'Delay' }, style: { strokeWidth: 2 } },
+            { id: 'Preparation', shape: { type: 'Flow', shape: 'Preparation' }, style: { strokeWidth: 2 } },
+            { id: 'Display', shape: { type: 'Flow', shape: 'Display' }, style: { strokeWidth: 2 } },
+            { id: 'ManualInput', shape: { type: 'Flow', shape: 'ManualInput' }, style: { strokeWidth: 2 } },
+            { id: 'LoopLimit', shape: { type: 'Flow', shape: 'LoopLimit' }, style: { strokeWidth: 2 } },
+            { id: 'StoredData', shape: { type: 'Flow', shape: 'StoredData' }, style: { strokeWidth: 2 } }
+        ];
+        return flowShapes;
+    };
+    Palettes.prototype.getBPMNShapes = function () {
+        var bpmnShapes = [
+            {
+                id: 'BPMNStart', style: { strokeWidth: 2 }, shape: { type: 'Bpmn', shape: 'Event', event: { event: 'Start', trigger: 'None' } },
+            },
+            {
+                id: 'Intermediate', style: { strokeWidth: 2 }, shape: { type: 'Bpmn', shape: 'Event', event: { event: 'Intermediate', trigger: 'None' } },
+            },
+            {
+                id: 'End', style: { strokeWidth: 2 }, shape: { type: 'Bpmn', shape: 'Event', event: { event: 'End', trigger: 'None' } },
+            },
+            {
+                id: 'Gateway', style: { strokeWidth: 2 }, shape: { type: 'Bpmn', shape: 'Gateway' }
+            },
+            {
+                id: 'Task', style: { strokeWidth: 2 }, shape: { type: 'Bpmn', shape: 'Activity', activity: { activity: 'Task' } }
+            },
+            {
+                id: 'SubProcessEventBased', style: { strokeWidth: 2 }, shape: {
+                    type: 'Bpmn', shape: 'Activity', activity: {
+                        activity: 'SubProcess',
+                        subProcess: { type: 'Transaction', transaction: { success: { visible: false }, failure: { visible: false }, cancel: { visible: false } } }
+                    },
+                },
+            },
+            {
+                id: 'Message', style: { strokeWidth: 2 }, shape: { type: 'Bpmn', shape: 'Message' }
+            },
+            {
+                id: 'DataObject', style: { strokeWidth: 2 }, shape: { type: 'Bpmn', shape: 'DataObject' }
+            },
+            {
+                id: 'DataSource', style: { strokeWidth: 2 }, shape: { type: 'Bpmn', shape: 'DataSource' }
+            },
+            {
+                id: 'Activity', style: { strokeWidth: 2 }, shape: { type: 'Bpmn', shape: 'Activity' }
+            },
+            {
+                id: 'Group', style: { strokeWidth: 2 }, shape: { type: 'Bpmn', shape: 'Group' }
+            },
+        ];
+        return bpmnShapes;
+    };
+    Palettes.prototype.getConnectors = function () {
+        var connectorSymbols = [
+            {
+                id: 'Link1', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
+                targetDecorator: { shape: 'Arrow', style: { strokeWidth: 2 } }, style: { strokeWidth: 2 }
+            },
+            {
+                id: 'Link2', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
+                targetDecorator: { shape: 'Arrow', style: { strokeWidth: 2 } }, style: { strokeWidth: 2, strokeDashArray: '3,3' }
+            },
+            {
+                id: 'link3', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
+                style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }
+            },
+            {
+                id: 'Link4', type: 'Orthogonal', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
+                style: { strokeWidth: 2, strokeDashArray: '3,3' }, targetDecorator: { shape: 'None' }
+            },
+            {
+                id: 'Link21', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
+                targetDecorator: { shape: 'Arrow', style: { strokeWidth: 2 } }, style: { strokeWidth: 2 }
+            },
+            {
+                id: 'Link22', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
+                targetDecorator: { shape: 'Arrow', style: { strokeWidth: 2 } }, style: { strokeWidth: 2, strokeDashArray: '3,3' }
+            },
+            {
+                id: 'link23', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
+                style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }
+            },
+            {
+                id: 'Link24', type: 'Straight', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
+                style: { strokeWidth: 2, strokeDashArray: '3,3' }, targetDecorator: { shape: 'None' }
+            },
+            {
+                id: 'link33', type: 'Bezier', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
+                style: { strokeWidth: 2 }, targetDecorator: { shape: 'None' }
+            },
+            {
+                id: 'Link34', type: 'Bezier', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 },
+                style: { strokeWidth: 2, strokeDashArray: '3,3' }, targetDecorator: { shape: 'None' }
+            }
+        ];
+        return connectorSymbols;
+    };
+    Palettes.prototype.getSymbolInfo = function (symbol) {
+        return { fit: true };
+    };
+    Palettes.prototype.setPaletteNodeDefaults = function (node) {
+        if (!(node.addInfo && node.addInfo.type === 'CustomShapes') && (!node.children)) {
+            if (node.id === 'Terminator' || node.id === 'Process') {
+                node.width = 130;
+                node.height = 65;
+            }
+            else {
+                node.width = 50;
+                node.height = 50;
+            }
+            node.ports = [
+                { offset: { x: 0, y: 0.5 }, style: { fill: 'white' }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
+                { offset: { x: 0.5, y: 0 }, style: { fill: 'white' }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
+                { offset: { x: 1, y: 0.5 }, style: { fill: 'white' }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw },
+                { offset: { x: 0.5, y: 1 }, style: { fill: 'white' }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw }
+            ];
+            node.style.strokeColor = '#3A3A3A';
+        }
+    };
+    Palettes.prototype.getPalettes = function (text) {
+        var palettes = [];
+        if (text.indexOf('Flow') !== -1) {
+            palettes.push({ id: 'flow', expanded: true, symbols: this.getFlowShapes(), title: 'Flow Shapes' });
+        }
+        if (text.indexOf('Basic') !== -1) {
+            palettes.push({ id: 'basic', expanded: false, symbols: this.getBasicShapes(), title: 'Basic Shapes' });
+        }
+        if (text.indexOf('BPMN') !== -1) {
+            palettes.push({ id: 'bpmn', expanded: false, symbols: this.getBPMNShapes(), title: 'BPMN Shapes' });
+        }
+        if (text.indexOf('Connectors') !== -1) {
+            palettes.push({ id: 'connectors', expanded: false, symbols: this.getConnectors(), title: 'Connectors' });
+        }
+        if (text.indexOf('Electrical') !== -1) {
+            palettes = palettes.concat(this.electricalShapes.getElectricalShapes());
+        }
+        if (text.indexOf('Network') !== -1) {
+            palettes.push({ id: 'network', expanded: false, symbols: this.networkShapes.getNetworkShapes(), title: 'Network Shapes' });
+        }
+        if (text.indexOf('Floorplan') !== -1) {
+            palettes.push({ id: 'floorplan', expanded: false, symbols: this.floorplans.getFloorPlans(), title: 'Floorplan Shapes' });
+        }
+        return palettes;
+    };
+    return Palettes;
+}());

scripts/selector.js

@@ -0,0 +1,756 @@
+/**
+ * Selector Handler
+ */
+
+var NodeProperties = (function () {
+    function NodeProperties() {
+        this.m_offsetX = 0;
+        this.m_offsetY = 0;
+        this.m_width = 0;
+        this.m_height = 0;
+        this.m_rotateAngle = 0;
+        this.m_fillColor = '#ffffff';
+        this.m_strokeColor = '#000000';
+        this.m_strokeStyle = 'None';
+        this.m_strokeWidth = 1;
+        this.m_opacity = 0;
+        this.opacityText = '0%';
+        this.m_aspectRatio = false;
+        this.m_gradient = false;
+        this.m_gradientDirection = 'BottomToTop';
+        this.m_gradientColor = '#ffffff';
+    }
+
+    NodeProperties.prototype.triggerPropertyChange = function (propertyName, propertyValue) {
+        if (!ej.base.isNullOrUndefined(this.propertyChange)) {
+            this.propertyChange.call(this, { propertyName: propertyName, propertyValue: propertyValue });
+        }
+    };
+    NodeProperties.prototype.getGradient = function (node) {
+        var gradientValue = this.getGradientDirectionValue(selectedItem.nodeProperties.gradientDirection.value);
+        node.style.gradient = {
+            type: 'Linear',
+            x1: gradientValue.x1, x2: gradientValue.x2, y1: gradientValue.y1, y2: gradientValue.y2,
+            stops: [
+                { color: node.style.fill, offset: 0 },
+                { color: this.getColor(selectedItem.nodeProperties.gradientColor.value), offset: 1 }
+            ]
+        };
+    };
+    NodeProperties.prototype.getGradientDirectionValue = function (direction) {
+        var gradientValue = {};
+        var x1 = 0, x2 = 0, y1 = 0, y2 = 0;
+        if (direction === 'LeftToRight') {
+            x1 = 100;
+        }
+        else if (direction === 'BottomToTop') {
+            y2 = 100;
+        }
+        else if (direction === 'RightToLeft') {
+            x2 = 100;
+        }
+        else {
+            y1 = 100;
+        }
+        gradientValue = { x1: x1, y1: y1, x2: x2, y2: y2 };
+        return gradientValue;
+    };
+    NodeProperties.prototype.getColor = function (colorName) {
+        if (window.navigator.msSaveBlob && colorName.length === 9) {
+            return colorName.substring(0, 7);
+        }
+        return colorName;
+    };
+
+    return NodeProperties;
+}());
+
+var ConnectorProperties = (function () {
+    function ConnectorProperties() {
+        this.m_lineColor = '#ffffff';
+    }
+    ConnectorProperties.prototype.triggerPropertyChange = function (propertyName, propertyValue) {
+        if (!ej.base.isNullOrUndefined(this.propertyChange)) {
+            this.propertyChange.call(this, { propertyName: propertyName, propertyValue: propertyValue });
+        }
+    };
+    return ConnectorProperties;
+}());
+
+var TextProperties = (function () {
+    function TextProperties() {
+        this.m_textPosition = '';
+        this.m_fontFamily = 'Arial';
+        this.m_fontColor = '#ffffff';
+        this.textPositionDataSource = this.getNodeTextPositions();
+    }
+    TextProperties.prototype.getNodeTextPositions = function () {
+        return [
+            { text: 'TopLeft', value: 'TopLeft' }, { text: 'TopCenter', value: 'TopCenter' },
+            { text: 'TopRight', value: 'TopRight' }, { text: 'MiddleLeft', value: 'MiddleLeft' },
+            { text: 'Center', value: 'Center' }, { text: 'MiddleRight', value: 'MiddleRight' },
+            { text: 'BottomLeft', value: 'BottomLeft' }, { text: 'BottomCenter', value: 'BottomCenter' },
+            { text: 'BottomRight', value: 'BottomRight' },
+        ];
+    };
+    TextProperties.prototype.getConnectorTextPositions = function () {
+        return [
+            { text: 'Before', value: 'Before' }, { text: 'Center', value: 'Center' },
+            { text: 'After', value: 'After' },
+        ];
+    };
+    TextProperties.prototype.triggerPropertyChange = function (propertyName, propertyValue) {
+        if (!ej.base.isNullOrUndefined(this.propertyChange)) {
+            this.propertyChange.call(this, { propertyName: propertyName, propertyValue: propertyValue });
+        }
+    };
+    return TextProperties;
+}());
+
+var ExportSettings = (function () {
+    function ExportSettings() {
+        this.m_fileName = 'Diagram';
+        this.m_format = 'JPG';
+        this.m_region = 'PageSettings';
+    }
+    Object.defineProperty(ExportSettings.prototype, "fileName", {
+        get: function () {
+            return this.m_fileName;
+        },
+        set: function (fileName) {
+            this.m_fileName = fileName;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ExportSettings.prototype, "format", {
+        get: function () {
+            return this.m_format;
+        },
+        set: function (format) {
+            this.m_format = format;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ExportSettings.prototype, "region", {
+        get: function () {
+            return this.m_region;
+        },
+        set: function (region) {
+            this.m_region = region;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return ExportSettings;
+}());
+
+var PrintSettings = (function () {
+    function PrintSettings() {
+        this.m_region = 'PageSettings';
+        this.m_pageWidth = 0;
+        this.m_pageHeight = 0;
+        this.m_isPortrait = true;
+        this.m_isLandscape = false;
+        this.m_multiplePage = false;
+        this.m_paperSize = 'Letter';
+    }
+    Object.defineProperty(PrintSettings.prototype, "region", {
+        get: function () {
+            return this.m_region;
+        },
+        set: function (region) {
+            this.m_region = region;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PrintSettings.prototype, "pageWidth", {
+        get: function () {
+            return this.m_pageWidth;
+        },
+        set: function (pageWidth) {
+            this.m_pageWidth = pageWidth;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PrintSettings.prototype, "pageHeight", {
+        get: function () {
+            return this.m_pageHeight;
+        },
+        set: function (pageHeight) {
+            this.m_pageHeight = pageHeight;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PrintSettings.prototype, "isPortrait", {
+        get: function () {
+            return this.m_isPortrait;
+        },
+        set: function (isPortrait) {
+            this.m_isPortrait = isPortrait;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PrintSettings.prototype, "isLandscape", {
+        get: function () {
+            return this.m_isLandscape;
+        },
+        set: function (isLandscape) {
+            this.m_isLandscape = isLandscape;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PrintSettings.prototype, "multiplePage", {
+        get: function () {
+            return this.m_multiplePage;
+        },
+        set: function (multiplePage) {
+            this.m_multiplePage = multiplePage;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PrintSettings.prototype, "paperSize", {
+        get: function () {
+            return this.m_paperSize;
+        },
+        set: function (paperSize) {
+            this.m_paperSize = paperSize;
+            document.getElementById('printCustomSize').style.display = 'none';
+            document.getElementById('printOrientation').style.display = 'none';
+            if (paperSize === 'Custom') {
+                document.getElementById('printCustomSize').style.display = '';
+            }
+            else {
+                document.getElementById('printOrientation').style.display = '';
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return PrintSettings;
+}());
+
+var PageSettings = (function () {
+    function PageSettings() {
+        this.pageWidth = 1056;
+        this.pageHeight = 816;
+        this.backgroundColor = '#ffffff';
+        this.isPortrait = false;
+        this.isLandscape = true;
+        this.paperSize = 'Letter';
+        this.pageBreaks = false;
+    }
+    return PageSettings;
+}());
+
+var ScrollSettings = (function () {
+    function ScrollSettings() {
+        this.currentZoom = '100%';
+    }
+    return ScrollSettings;
+}());
+
+var MindMapSettings = (function () {
+    function MindMapSettings() {
+        this.m_levelType = 'Level0';
+        this.m_fill = 'white';
+        this.m_stroke = 'white';
+        this.m_strokeStyle = 'None';
+        this.m_strokeWidth = 1;
+        this.m_fontFamily = 'Arial';
+        this.m_fontColor = '#ffffff';
+    }
+    Object.defineProperty(MindMapSettings.prototype, "levelType", {
+        get: function () {
+            return this.m_levelType;
+        },
+        set: function (levelType) {
+            if (this.m_levelType !== levelType) {
+                this.m_levelType = levelType;
+                this.triggerPropertyChange('levelType', levelType);
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MindMapSettings.prototype, "fill", {
+        get: function () {
+            return this.m_fill;
+        },
+        set: function (fill) {
+            if (this.m_fill !== fill) {
+                this.m_fill = fill;
+                this.triggerPropertyChange('fill', fill);
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MindMapSettings.prototype, "stroke", {
+        get: function () {
+            return this.m_stroke;
+        },
+        set: function (stroke) {
+            if (this.m_stroke !== stroke) {
+                this.m_stroke = stroke;
+                this.triggerPropertyChange('stroke', stroke);
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MindMapSettings.prototype, "strokeStyle", {
+        get: function () {
+            return this.m_strokeStyle;
+        },
+        set: function (strokeStyle) {
+            if (this.m_strokeStyle !== strokeStyle) {
+                this.m_strokeStyle = strokeStyle;
+                this.triggerPropertyChange('strokeStyle', strokeStyle);
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MindMapSettings.prototype, "strokeWidth", {
+        get: function () {
+            return this.m_strokeWidth;
+        },
+        set: function (strokeWidth) {
+            if (this.m_strokeWidth !== strokeWidth) {
+                this.m_strokeWidth = strokeWidth;
+                this.triggerPropertyChange('strokeWidth', strokeWidth);
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MindMapSettings.prototype, "opacity", {
+        get: function () {
+            return this.m_opacity;
+        },
+        set: function (opacity) {
+            if (this.m_opacity !== opacity) {
+                this.m_opacity = opacity;
+                this.triggerPropertyChange('opacity', opacity);
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MindMapSettings.prototype, "fontFamily", {
+        get: function () {
+            return this.m_fontFamily;
+        },
+        set: function (fontFamily) {
+            if (this.m_fontFamily !== fontFamily) {
+                this.m_fontFamily = fontFamily;
+                this.triggerPropertyChange('fontFamily', fontFamily);
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MindMapSettings.prototype, "fontSize", {
+        get: function () {
+            return this.m_fontSize;
+        },
+        set: function (fontSize) {
+            if (this.m_fontSize !== fontSize) {
+                this.m_fontSize = fontSize;
+                this.triggerPropertyChange('fontSize', fontSize);
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MindMapSettings.prototype, "fontColor", {
+        get: function () {
+            return this.m_fontColor;
+        },
+        set: function (fontColor) {
+            if (this.m_fontColor !== fontColor) {
+                this.m_fontColor = fontColor;
+                this.triggerPropertyChange('fontColor', fontColor);
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MindMapSettings.prototype, "textOpacity", {
+        get: function () {
+            return this.m_textOpacity;
+        },
+        set: function (textOpacity) {
+            if (this.m_textOpacity !== textOpacity) {
+                this.m_textOpacity = textOpacity;
+                this.triggerPropertyChange('textOpacity', textOpacity);
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+
+    MindMapSettings.prototype.triggerPropertyChange = function (propertyName, propertyValue) {
+        if (!ej.base.isNullOrUndefined(this.propertyChange)) {
+            this.propertyChange.call(this, { propertyName: propertyName, propertyValue: propertyValue });
+        }
+    };
+
+    return MindMapSettings;
+}());
+
+var OrgDataSettings = (function () {
+    function OrgDataSettings() {
+        this.dataSourceColumns = [];
+        this.id = '';
+        this.parent = '';
+        this.nameField = '';
+        this.bindingFields = [];
+        this.imageField = '';
+        this.additionalFields = [];
+        this.fileformat = '';
+        this.extensionType = '.csv';
+        this.buttonContent = 'Download Example CSV';
+    }
+    return OrgDataSettings;
+}());
+
+var SelectorViewModel = (function () {
+    function SelectorViewModel() {
+        this.selectedDiagram = null;
+        this.isCopyLayoutElement = false;
+        this.currentDiagramName = '';
+        this.preventPropertyChange = false;
+        this.isModified = false;
+        this.uniqueId = null;
+        this.preventSelectionChange = false;
+        this.pasteData = [];
+        this.isLoading = false;
+        this.isTemplateLoad = false;
+        this.nodeProperties = new NodeProperties();
+        this.textProperties = new TextProperties();
+        this.connectorProperties = new ConnectorProperties();
+        this.exportSettings = new ExportSettings();
+        this.printSettings = new PrintSettings();
+        this.pageSettings = new PageSettings();
+        this.utilityMethods = new UtilityMethods();
+        this.mindmapSettings = new MindMapSettings();
+        this.orgDataSettings = new OrgDataSettings();
+        this.scrollSettings = new ScrollSettings();
+        this.customContextMenu = new CustomContextMenuItems();
+        this.nodeProperties.propertyChange = this.nodePropertyChange.bind(this);
+        this.connectorProperties.propertyChange = this.connectorPropertyChange.bind(this);
+        this.textProperties.propertyChange = this.textPropertyChange.bind(this);
+        this.mindmapSettings.propertyChange = this.mindMapPropertyChange.bind(this);
+    }
+    SelectorViewModel.prototype.randomIdGenerator = function () {
+        return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
+    };
+    SelectorViewModel.prototype.getAbsolutePath = function () {
+        return window.location.pathname;
+    };
+    SelectorViewModel.prototype.nodePropertyChange = function (args) {
+        if (!selectedItem.preventPropertyChange) {
+            var diagram = selectedItem.selectedDiagram;
+            if (diagram) {
+                if (diagram.selectedItems.nodes.length > 0) {
+                    var selectedNodes = diagram.selectedItems.nodes;
+                    for (var i = 0; i < selectedNodes.length; i++) {
+                        var node = selectedNodes[i];
+                        var propertyName1 = args.propertyName.toString().toLowerCase();
+                        switch (propertyName1) {
+                            case 'offsetx':
+                                node.offsetX = selectedItem.nodeProperties.offsetX.value;
+                                break;
+                            case 'offsety':
+                                node.offsetY = selectedItem.nodeProperties.offsetY.value;
+                                break;
+                            case 'width':
+                                node.width = selectedItem.nodeProperties.width.value;
+                                break;
+                            case 'height':
+                                node.height = selectedItem.nodeProperties.height.value;
+                                break;
+                            case 'rotateangle':
+                                node.rotateAngle = selectedItem.nodeProperties.rotateAngle.value;
+                                break;
+                            case 'aspectratio':
+                                node.constraints = node.constraints ^ ej.diagrams.NodeConstraints.AspectRatio;
+                                break;
+                        }
+                        if (!node.children) {
+                            this.applyNodeStyle(propertyName1, node, args.propertyValue);
+                        }
+                        else {
+                            for (var j = 0; j < node.children.length; j++) {
+                                this.applyNodeStyle(propertyName1, diagram.getObject(node.children[j]), args.propertyValue);
+                            }
+                        }
+                    }
+                    this.isModified = true;
+                }
+                if (diagram.connectors.length > 0) {
+                    var selectedNodes = diagram.selectedItems.connectors;
+                    for (var i = 0; i < selectedNodes.length; i++) {
+                        switch (args.propertyName.toString().toLowerCase()) {
+                            case 'strokecolor':
+                                selectedItem.connectorProperties.lineColor.value = selectedItem.getColor(selectedItem.nodeProperties.strokeColor.value);
+                                break;
+                            case 'strokewidth':
+                                selectedItem.connectorProperties.lineWidth.value = selectedItem.nodeProperties.strokeWidth.value;
+                                break;
+                            case 'strokestyle':
+                                selectedItem.connectorProperties.lineStyle.value = selectedItem.nodeProperties.strokeStyle.value;
+                                break;
+                            case 'opacity':
+                                selectedItem.connectorProperties.opacity.value = selectedItem.nodeProperties.opacity.value;
+                                break;
+                        }
+                    }
+                    this.isModified = true;
+                }
+                diagram.dataBind();
+            }
+        }
+    };
+    SelectorViewModel.prototype.applyNodeStyle = function (propertyName, node, value) {
+        var addInfo = node.addInfo || {};
+        switch (propertyName) {
+            case 'fillcolor':
+                node.style.fill = this.getColor(value);
+                if (value && value.checked) {
+                    NodeProperties.prototype.getGradient(node);
+                }
+                break;
+            case 'strokecolor':
+                node.style.strokeColor = this.getColor(selectedItem.nodeProperties.strokeColor.value);
+                break;
+            case 'strokewidth':
+                node.style.strokeWidth = selectedItem.nodeProperties.strokeWidth.value;
+                break;
+            case 'strokestyle':
+                node.style.strokeDashArray = selectedItem.nodeProperties.strokeStyle.value;
+                break;
+            case 'opacity':
+                node.style.opacity = selectedItem.nodeProperties.opacity.value / 100;
+                document.getElementById("nodeOpacitySliderText").value = selectedItem.nodeProperties.opacity.value + '%';
+                break;
+            case 'gradient':
+                if (value && !value.checked) {
+                    node.style.gradient.type = 'None';
+                }
+                else {
+                    NodeProperties.prototype.getGradient(node);
+                }
+                break;
+            case 'gradientdirection':
+            case 'gradientcolor':
+                NodeProperties.prototype.getGradient(node);
+                break;
+        }
+    };
+    SelectorViewModel.prototype.connectorPropertyChange = function (args) {
+        if (!selectedItem.preventPropertyChange) {
+            var diagram = selectedItem.selectedDiagram;
+            if (diagram && diagram.selectedItems.connectors.length > 0) {
+                var selectedNodes = diagram.selectedItems.connectors;
+                for (var i = 0; i < selectedNodes.length; i++) {
+                    var connector = selectedNodes[i];
+                    switch (args.propertyName.toString().toLowerCase()) {
+                        case 'linecolor':
+                            connector.style.strokeColor = this.getColor(selectedItem.connectorProperties.lineColor.value);
+                            connector.sourceDecorator.style = { fill: connector.style.strokeColor, strokeColor: connector.style.strokeColor };
+                            connector.targetDecorator.style = { fill: connector.style.strokeColor, strokeColor: connector.style.strokeColor };
+                            break;
+                        case 'linewidth':
+                            connector.style.strokeWidth = selectedItem.connectorProperties.lineWidth.value;
+                            if (connector.sourceDecorator.style) {
+                                connector.sourceDecorator.style.strokeWidth = connector.style.strokeWidth;
+                            }
+                            else {
+                                connector.sourceDecorator.style = { strokeWidth: connector.style.strokeWidth };
+                            }
+                            if (connector.targetDecorator.style) {
+                                connector.targetDecorator.style.strokeWidth = connector.style.strokeWidth;
+                            }
+                            else {
+                                connector.targetDecorator.style = { strokeWidth: connector.style.strokeWidth };
+                            }
+                            break;
+                        case 'linestyle':
+                            connector.style.strokeDashArray = selectedItem.connectorProperties.lineStyle.value;
+                            break;
+                        case 'linetype':
+                            connector.type = selectedItem.connectorProperties.lineType.value;
+                            break;
+                        case 'sourcetype':
+                            connector.sourceDecorator.shape = selectedItem.connectorProperties.sourceType.value;
+                            break;
+                        case 'targettype':
+                            connector.targetDecorator.shape = selectedItem.connectorProperties.targetType.value;
+                            break;
+                        case 'sourcesize':
+                            connector.sourceDecorator.width = connector.sourceDecorator.height = selectedItem.connectorProperties.sourceSize.value;
+                            break;
+                        case 'targetsize':
+                            connector.targetDecorator.width = connector.targetDecorator.height = selectedItem.connectorProperties.targetSize.value;
+                            break;
+                        case 'opacity':
+                            connector.style.opacity = selectedItem.connectorProperties.opacity.value / 100;
+                            connector.targetDecorator.style.opacity = connector.style.opacity;
+                            connector.sourceDecorator.style.opacity = connector.style.opacity;
+                            document.getElementById("connectorOpacitySliderText").value = selectedItem.connectorProperties.opacity.value + '%';
+                            break;
+                        case 'linejump':
+                            if (args.propertyValue.checked) {
+                                connector.constraints = connector.constraints | ej.diagrams.ConnectorConstraints.Bridging;
+                            }
+                            else {
+                                connector.constraints = connector.constraints & ~ej.diagrams.ConnectorConstraints.Bridging;
+                            }
+                            break;
+                        case 'linejumpsize':
+                            connector.bridgeSpace = selectedItem.connectorProperties.lineJumpSize.value;
+                            break;
+                    }
+                }
+                diagram.dataBind();
+                this.isModified = true;
+            }
+        }
+    };
+    SelectorViewModel.prototype.textPropertyChange = function (args) {
+        if (!selectedItem.preventPropertyChange) {
+            var diagram = selectedItem.selectedDiagram;
+            if (diagram) {
+                var selectedObjects = diagram.selectedItems.nodes;
+                selectedObjects = selectedObjects.concat(diagram.selectedItems.connectors);
+                var propertyName = args.propertyName.toString().toLowerCase();
+                if (selectedObjects.length > 0) {
+                    for (var i = 0; i < selectedObjects.length; i++) {
+                        var node = selectedObjects[i];
+                        if (node instanceof ej.diagrams.Node || node instanceof ej.diagrams.Connector) {
+                            if (node.annotations.length > 0) {
+                                for (var j = 0; j < node.annotations.length; j++) {
+                                    var annotation = node.annotations[j].style;
+                                    this.updateTextProperties(propertyName, annotation);
+                                }
+                            }
+                            else if (node.shape && node.shape.type === 'Text') {
+                                this.updateTextProperties(propertyName, node.style);
+                            }
+                        }
+                    }
+                    diagram.dataBind();
+                    this.isModified = true;
+                }
+            }
+        }
+    };
+    SelectorViewModel.prototype.updateTextProperties = function (propertyName, annotation) {
+        switch (propertyName) {
+            case 'fontfamily':
+                annotation.fontFamily = selectedItem.textProperties.fontFamily.value;
+                break;
+            case 'fontsize':
+                annotation.fontSize = selectedItem.textProperties.fontSize.value;
+                break;
+            case 'fontcolor':
+                annotation.color = this.getColor(selectedItem.textProperties.fontColor.value);
+                break;
+            case 'opacity':
+                annotation.opacity = selectedItem.textProperties.opacity.value / 100;
+                document.getElementById("textOpacityText").value = selectedItem.textProperties.opacity.value + '%';
+                break;
+        }
+    };
+    SelectorViewModel.prototype.mindMapPropertyChange = function (args) {
+        if (!selectedItem.preventPropertyChange) {
+            var diagram = selectedItem.selectedDiagram;
+            if (diagram && diagram.nodes.length > 0) {
+                for (var i = 0; i < diagram.nodes.length; i++) {
+                    var node = diagram.nodes[i];
+                    if (node.addInfo) {
+                        var addInfo = node.addInfo;
+                        var levelType = selectedItem.mindmapSettings.levelType.value;
+                        if ('Level' + addInfo.level === levelType || addInfo.level === levelType) {
+                            switch (args.propertyName.toString().toLowerCase()) {
+                                case 'fill':
+                                    node.style.fill = this.getColor(selectedItem.mindmapSettings.fill.value);
+                                    break;
+                                case 'stroke':
+                                    node.style.strokeColor = this.getColor(selectedItem.mindmapSettings.stroke.value);
+                                    if (node.inEdges.length > 0) {
+                                        var connector = MindMapUtilityMethods.getConnector(diagram.connectors, node.inEdges[0]);
+                                        connector.style.strokeColor = node.style.strokeColor;
+                                    }
+                                    break;
+                                case 'strokewidth':
+                                    node.style.strokeWidth = selectedItem.mindmapSettings.strokeWidth.value;
+                                    if (node.inEdges.length > 0) {
+                                        var connector1 = MindMapUtilityMethods.getConnector(diagram.connectors, node.inEdges[0]);
+                                        connector1.style.strokeWidth = selectedItem.mindmapSettings.strokeWidth.value;
+                                    }
+                                    break;
+                                case 'strokestyle':
+                                    node.style.strokeDashArray = selectedItem.mindmapSettings.strokeStyle.value;
+                                    if (node.inEdges.length > 0) {
+                                        var connector2 = MindMapUtilityMethods.getConnector(diagram.connectors, node.inEdges[0]);
+                                        connector2.style.strokeDashArray = selectedItem.mindmapSettings.strokeStyle.value;
+                                    }
+                                    break;
+                                case 'opacity':
+                                    node.style.opacity = selectedItem.mindmapSettings.opacity.value / 100;
+                                    document.getElementById("mindmapOpacityText").value = selectedItem.mindmapSettings.opacity.value + '%';
+                                    break;
+                                default:
+                                    this.updateMindMapTextStyle(node, args.propertyName.toString().toLowerCase());
+                                    break;
+                            }
+                        }
+                    }
+                    diagram.dataBind();
+                    this.isModified = true;
+                }
+            }
+        }
+    };
+    SelectorViewModel.prototype.updateMindMapTextStyle = function (node, propertyName) {
+        var diagram = selectedItem.selectedDiagram;
+        if (node.addInfo && node.annotations.length > 0) {
+            var annotation = node.annotations[0].style;
+            switch (propertyName) {
+                case 'fontfamily':
+                    annotation.fontFamily = selectedItem.mindmapSettings.fontFamily.value;
+                    break;
+                case 'fontsize':
+                    annotation.fontSize = selectedItem.mindmapSettings.fontSize.value;
+                    break;
+                case 'fontcolor':
+                    annotation.color = this.getColor(selectedItem.mindmapSettings.fontColor.value);
+                    break;
+                case 'textopacity':
+                    annotation.opacity = selectedItem.mindmapSettings.textOpacity.value / 100;
+                    document.getElementById("textOpacityText").value = selectedItem.mindmapSettings.textOpacity.value + '%';
+                    break;
+            }
+        }
+        diagram.dataBind();
+        this.isModified = true;
+    };
+    SelectorViewModel.prototype.getColor = function (colorName) {
+        if (window.navigator.msSaveBlob && colorName.length === 9) {
+            return colorName.substring(0, 7);
+        }
+        return colorName;
+    };
+    return SelectorViewModel;
+}());

scripts/themes.js

@@ -0,0 +1,290 @@
+/**
+ *  Theme handler
+ */
+
+DiagramTheme = (function () {
+    function DiagramTheme(selectedItem) {
+        this.nodeOldStyles = [];
+        this.connectorOldStyles = [];
+        this.isThemeApplied = false;
+        this.colorList = [
+            {
+                themeName: 'theme1', themeStyle: [
+                    { fillColor: '#F0F0F0', borderColor: '#D2D2D2', textColor: '#000000', type: 'shapeType1' },
+                    { fillColor: '#E3E3E3', borderColor: '#D2D2D2', textColor: '#000000', type: 'shapeType2' },
+                    { fillColor: '#ffffff', borderColor: '#D2D2D2', textColor: '#000000', type: 'shapeType3' },
+                    { fillColor: '#D2D2D2', borderColor: '#D2D2D2', textColor: '#000000', type: 'shapeType4' }
+                ], lineColor: '#6A696A', lineType: 'Orthogonal'
+            },
+            {
+                themeName: 'theme2', themeStyle: [
+                    { fillColor: '#F0F0F0', borderColor: '#ABABAB', textColor: '#000000', type: 'shapeType1' },
+                    { fillColor: '#6A696A', borderColor: '#6A696A', textColor: '#FFFFFF', type: 'shapeType2' },
+                    { fillColor: '#FFFFFF', borderColor: '#ABABAB', textColor: '#000000', type: 'shapeType3' },
+                    { fillColor: '#161415', borderColor: '#161415', textColor: '#FFFFFF', type: 'shapeType4' }
+                ], lineColor: '#6A696A', lineType: 'Orthogonal'
+            },
+            {
+                themeName: 'theme3', themeStyle: [
+                    { fillColor: '#D8EBEC', borderColor: '#77B4B7', textColor: '#000000', type: 'shapeType1' },
+                    { fillColor: '#F4E6CE', borderColor: '#D8B983', textColor: '#000000', type: 'shapeType2' },
+                    { fillColor: '#F3CBDB', borderColor: '#F4B1CC', textColor: '#000000', type: 'shapeType3' },
+                    { fillColor: '#528AD8', borderColor: '#174F9C', textColor: '#000000', type: 'shapeType4' }
+                ], lineColor: '#18519D', lineType: 'Orthogonal'
+            },
+            {
+                themeName: 'theme4', themeStyle: [
+                    { fillColor: '#A9DDD8', borderColor: '#00AE9D', textColor: '#000000', type: 'shapeType1' },
+                    { fillColor: '#F4E0BB', borderColor: '#FBB63D', textColor: '#000000', type: 'shapeType2' },
+                    { fillColor: '#B5DAEA', borderColor: '#29A4DA', textColor: '#000000', type: 'shapeType3' },
+                    { fillColor: '#D69BC1', borderColor: '#C360A0', textColor: '#000000', type: 'shapeType4' }
+                ], lineColor: '#C86DA7', lineType: 'Bezier'
+            },
+            {
+                themeName: 'theme5', themeStyle: [
+                    { fillColor: '#BFEAE5', borderColor: '#96C7BF', textColor: '#000000', type: 'shapeType1' },
+                    { fillColor: '#F8ECC4', borderColor: '#C3B58B', textColor: '#000000', type: 'shapeType2' },
+                    { fillColor: '#E8E2FF', borderColor: '#CFC4FB', textColor: '#000000', type: 'shapeType3' },
+                    { fillColor: '#F7E2E5', borderColor: '#D4A8AF', textColor: '#000000', type: 'shapeType4' }
+                ], lineColor: '#4D4D4D', lineType: 'Orthogonal'
+            },
+            {
+                themeName: 'theme6', themeStyle: [
+                    { fillColor: '#FFE9E1', borderColor: '#F6D2C4', textColor: '#000000', type: 'shapeType1' },
+                    { fillColor: '#DFEEE4', borderColor: '#ACD9BB', textColor: '#000000', type: 'shapeType2' },
+                    { fillColor: '#FFF8F6', borderColor: '#FFE7E0', textColor: '#000000', type: 'shapeType3' },
+                    { fillColor: '#B2ABA9', borderColor: '#161415', textColor: '#000000', type: 'shapeType4' }
+                ], lineColor: '#161415', lineType: 'Orthogonal'
+            },
+            {
+                themeName: 'theme7', themeStyle: [
+                    { fillColor: '#9FE3DD', borderColor: '#49C7BC', textColor: '#000000', type: 'shapeType1' },
+                    { fillColor: '#2EA499', borderColor: '#50BFB5', textColor: '#FFFFFF', type: 'shapeType2' },
+                    { fillColor: '#E6F5F7', borderColor: '#9FE3DD', textColor: '#000000', type: 'shapeType3' },
+                    { fillColor: '#13615A', borderColor: '#13615A', textColor: '#FFFFFF', type: 'shapeType4' }
+                ], lineColor: '#13615A', lineType: 'Bezier'
+            },
+            {
+                themeName: 'theme8', themeStyle: [
+                    { fillColor: '#F5F2D7', borderColor: '#E4D772', textColor: '#000000', type: 'shapeType1' },
+                    { fillColor: '#FCEBFF', borderColor: '#F8CAFF', textColor: '#000000', type: 'shapeType2' },
+                    { fillColor: '#EAE4F2', borderColor: '#D3BDF1', textColor: '#000000', type: 'shapeType3' },
+                    { fillColor: '#551660', borderColor: '#551660', textColor: '#FFFFFF', type: 'shapeType4' }
+                ], lineColor: '#551660', lineType: 'Bezier'
+            },
+            {
+                themeName: 'theme9', themeStyle: [
+                    { fillColor: '#2CBAA7', borderColor: '#FFFFFF', textColor: '#000000', type: 'shapeType1' },
+                    { fillColor: '#EFC608', borderColor: '#FFFFFF', textColor: '#000000', type: 'shapeType2' },
+                    { fillColor: '#27BBD6', borderColor: '#FFFFFF', textColor: '#000000', type: 'shapeType3' },
+                    { fillColor: '#2B333C', borderColor: '#FFFFFF', textColor: '#FFFFFF', type: 'shapeType4' }
+                ], lineColor: '#2B333C', lineType: 'Orthogonal'
+            },
+            {
+                themeName: 'theme10', themeStyle: [
+                    { fillColor: '#8DAF5B', borderColor: '#FFFFFF', textColor: '#FFFFFF', type: 'shapeType1' },
+                    { fillColor: '#E6B15A', borderColor: '#FFFFFF', textColor: '#FFFFFF', type: 'shapeType2' },
+                    { fillColor: '#2683A8', borderColor: '#FFFFFF', textColor: '#FFFFFF', type: 'shapeType3' },
+                    { fillColor: '#E64759', borderColor: '#FFFFFF', textColor: '#FFFFFF', type: 'shapeType4' }
+                ], lineColor: '#E64759', lineType: 'Bezier'
+            },
+            {
+                themeName: 'theme11', themeStyle: [
+                    { fillColor: '#46B38E', borderColor: '#FFFFFF', textColor: '#FFFFFF', type: 'shapeType1' },
+                    { fillColor: '#42A5F5', borderColor: '#FFFFFF', textColor: '#FFFFFF', type: 'shapeType2' },
+                    { fillColor: '#9F86FF', borderColor: '#FFFFFF', textColor: '#FFFFFF', type: 'shapeType3' },
+                    { fillColor: '#E64759', borderColor: '#FFFFFF', textColor: '#FFFFFF', type: 'shapeType4' }
+                ], lineColor: '#696969', lineType: 'Orthogonal'
+            },
+            {
+                themeName: 'theme12', themeStyle: [
+                    { fillColor: '#78BFFE', borderColor: '#5AAAFF', textColor: '#000000', type: 'shapeType1' },
+                    { fillColor: '#288CF7', borderColor: '#288CF7', textColor: '#FFFFFF', type: 'shapeType2' },
+                    { fillColor: '#BCDEF8', borderColor: '#8ECAFF', textColor: '#000000', type: 'shapeType3' },
+                    { fillColor: '#054F96', borderColor: '#054F96', textColor: '#FFFFFF', type: 'shapeType4' }
+                ], lineColor: '#054F96', lineType: 'Bezier'
+            }
+        ];
+        this.selectedItem = selectedItem;
+    }
+    DiagramTheme.prototype.getShapeType = function (shapeType) {
+        if (shapeType === 'Ellipse' || shapeType === 'Terminator') {
+            return 'shapeType2';
+        }
+        else if (shapeType === 'Plus' || shapeType === 'Star' || shapeType === 'Diamond' || shapeType === 'Decision') {
+            return 'shapeType4';
+        }
+        else if (shapeType === 'Hexagon' || shapeType === 'Parallelogram' || shapeType === 'Trapezoid' || shapeType === 'Cylinder') {
+            return 'shapeType3';
+        }
+        else if (shapeType === 'DirectData' || shapeType === 'SequentialData' || shapeType === 'Sort' || shapeType === 'MultiDocument' ||
+            shapeType === 'Collate' || shapeType === 'Or' || shapeType === 'InternalStorage' || shapeType === 'SequentialAccessStorage' ||
+            shapeType === 'Annotation2' || shapeType === 'ManualInput' || shapeType === 'StoredData') {
+            return 'shapeType3';
+        }
+        else {
+            return 'shapeType1';
+        }
+    };
+    DiagramTheme.prototype.getShapeStyle = function (shapeType, themeStyle) {
+        for (var i = 0; i < themeStyle.length; i++) {
+            if (themeStyle[i].type === shapeType) {
+                return themeStyle[i];
+            }
+        }
+        return null;
+    };
+    DiagramTheme.prototype.getThemeStyle = function (themeName) {
+        for (var i = 0; i < this.colorList.length; i++) {
+            if (this.colorList[i].themeName === themeName) {
+                return this.colorList[i];
+            }
+        }
+        return null;
+    };
+    DiagramTheme.prototype.themeMouseOver = function (args) {
+        var target = args.target;
+        var diagram = this.selectedItem.selectedDiagram;
+        if (target.className === 'db-theme-style-div') {
+            var themeName = target.children[0].className.replace('db-theme-style ', '');
+            this.applyStyle(themeName);
+            this.isThemeApplied = true;
+        }
+    };
+    DiagramTheme.prototype.applyOldStyle = function () {
+        var diagram = this.selectedItem.selectedDiagram;
+        diagram.historyManager.startGroupAction();
+        for (var i = 0; i < this.nodeOldStyles.length; i++) {
+            var themeStyle = this.nodeOldStyles[i];
+            var node = MindMapUtilityMethods.getNode(diagram.nodes, this.nodeOldStyles[i].name.toString());
+            node.style.fill = themeStyle.fill.toString();
+            node.style.strokeColor = themeStyle.border.toString();
+            if (node.annotations.length > 0) {
+                if (!node.annotations[0].hyperlink) {
+                    node.annotations[0].style.color = themeStyle.fontColor;
+                }
+            }
+            diagram.dataBind();
+        }
+        for (var i = 0; i < this.connectorOldStyles.length; i++) {
+            var themeStyle = this.connectorOldStyles[i];
+            var connector = MindMapUtilityMethods.getConnector(diagram.connectors, this.connectorOldStyles[i].name.toString());
+            connector.style.strokeColor = themeStyle.border.toString();
+            connector.sourceDecorator.style.fill = connector.sourceDecorator.style.strokeColor = themeStyle.border.toString();
+            connector.targetDecorator.style.fill = connector.targetDecorator.style.strokeColor = themeStyle.border.toString();
+            connector.type = themeStyle.type;
+            diagram.dataBind();
+        }
+        this.isThemeApplied = false;
+        diagram.historyManager.endGroupAction();
+    };
+    DiagramTheme.prototype.themeClick = function (args) {
+        var target = args.target;
+        if (target.classList.contains('db-theme-style-div')) {
+            var themeName = target.children[0].className.replace('db-theme-style ', '');
+            this.selectedItem.themeStyle = themeName;
+            this.applyStyle(themeName);
+            this.setNodeOldStyles();
+            for (var i = 0; i < this.colorList.length; i++) {
+                var element = document.getElementsByClassName(String(this.colorList[i].themeName))[0].parentNode;
+                if (element.classList.contains('db-theme-focus-style-div')) {
+                    element.classList.remove('db-theme-focus-style-div');
+                }
+                if (this.colorList[i].themeName === themeName) {
+                    element.classList.add('db-theme-focus-style-div');
+                }
+            }
+            this.selectedItem.isModified = true;
+        }
+    };
+    DiagramTheme.prototype.setNodeOldStyles = function () {
+        this.nodeOldStyles = [];
+        this.connectorOldStyles = [];
+        var diagram = this.selectedItem.selectedDiagram;
+        if (diagram.nodes.length > 0) {
+            var nodes = diagram.nodes;
+            for (var i = 0; i < nodes.length; i++) {
+                var node = nodes[i];
+                var style = { name: node.id, 'fill': node.style.fill, 'border': node.style.strokeColor };
+                if (node.annotations.length > 0) {
+                    if (!node.annotations[0].hyperlink) {
+                        style.fontColor = node.annotations[0].style.color;
+                    }
+                }
+                this.nodeOldStyles.push(style);
+            }
+        }
+        if (diagram.connectors.length > 0) {
+            var connectors = diagram.connectors;
+            for (var i = 0; i < connectors.length; i++) {
+                var connector = connectors[i];
+                this.connectorOldStyles.push({ name: connector.id, 'border': connector.style.strokeColor, 'type': connector.type });
+            }
+        }
+    };
+    DiagramTheme.prototype.applyStyle = function (themeName) {
+        var themeType = this.getThemeStyle(themeName);
+        var diagram = this.selectedItem.selectedDiagram;
+        diagram.historyManager.startGroupAction();
+        if (diagram.nodes.length > 0) {
+            var nodes = diagram.nodes;
+            for (var i = 0; i < nodes.length; i++) {
+                var node = nodes[i];
+                if (node.style.gradient) {
+                    node.style.gradient.type = 'None';
+                }
+                this.applyThemeStyleforElement(node, themeType);
+            }
+        }
+        if (diagram.connectors.length > 0 && themeType) {
+            var connectors = diagram.connectors;
+            for (var i = 0; i < connectors.length; i++) {
+                var connector = connectors[i];
+                this.applyThemeStyleforElement(connector, themeType);
+            }
+            diagram.dataBind();
+        }
+        diagram.historyManager.endGroupAction();
+    };
+    DiagramTheme.prototype.applyThemeStyleforElement = function (element, themeName) {
+        var themeType;
+        if (!themeName) {
+            themeType = this.getThemeStyle(this.selectedItem.themeStyle);
+        }
+        else {
+            themeType = themeName;
+        }
+        var diagram = this.selectedItem.selectedDiagram;
+        diagram.historyManager.startGroupAction();
+        if (element instanceof ej.diagrams.Node) {
+            var node = element;
+            if (node.shape) {
+                var shapeStyle = null;
+                if (node.shape.type === 'Flow' || node.shape.type === 'Basic') {
+                    var shapeModel = node.shape;
+                    shapeStyle = this.getShapeStyle(this.getShapeType(shapeModel.shape), themeType.themeStyle);
+                    if (shapeStyle) {
+                        node.style.fill = shapeStyle.fillColor;
+                        node.style.strokeColor = shapeStyle.borderColor;
+                        if (node.annotations.length > 0) {
+                            if (!(node.annotations[0].hyperlink && node.annotations[0].hyperlink.link)) {
+                                node.annotations[0].style.color = shapeStyle.textColor;
+                            }
+                        }
+                        diagram.dataBind();
+                    }
+                }
+            }
+        }
+        else if (element instanceof ej.diagrams.Connector) {
+            var connector = element;
+            connector.style.strokeColor = themeType.lineColor.toString();
+            connector.sourceDecorator.style.fill = connector.sourceDecorator.style.strokeColor = themeType.lineColor.toString();
+            connector.targetDecorator.style.fill = connector.targetDecorator.style.strokeColor = themeType.lineColor.toString();
+            connector.type = themeType.lineType;
+            diagram.dataBind();
+        }
+        diagram.historyManager.endGroupAction();
+    };
+    return DiagramTheme;
+}());

scripts/userhandles.js

@@ -0,0 +1,200 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+var CustomTool = (function () {
+    function CustomTool(selectedItem) {
+        this.selectedItem = null;
+        this.selectedItem = selectedItem;
+    }
+    CustomTool.prototype.getTool = function (action) {
+        var tool;
+        if (action === 'leftHandle') {
+            var leftTool = new LeftExtendTool(this.selectedItem.selectedDiagram.commandHandler);
+            leftTool.selectedItem = this.selectedItem;
+            return leftTool;
+        }
+        else if (action === 'rightHandle') {
+            var rightTool = new RightExtendTool(this.selectedItem.selectedDiagram.commandHandler);
+            rightTool.selectedItem = this.selectedItem;
+            return rightTool;
+        }
+        else if (action === 'removeHandle') {
+            var removeTool = new RemoveTool(this.selectedItem.selectedDiagram.commandHandler);
+            removeTool.selectedItem = this.selectedItem;
+            return removeTool;
+        }
+        else if (action === 'orgAddHandle') {
+            var orgAddTool = new OrgAddHandleTool(this.selectedItem.selectedDiagram.commandHandler);
+            orgAddTool.selectedItem = this.selectedItem;
+            return orgAddTool;
+        }
+        else if (action === 'orgRemoveHandle') {
+            var orgRemoveTool = new OrgRemoveHandleTool(this.selectedItem.selectedDiagram.commandHandler);
+            orgRemoveTool.selectedItem = this.selectedItem;
+            return orgRemoveTool;
+        }
+        else if (action === 'orgEditHandle') {
+            var orgEditTool = new OrgEditHandleTool(this.selectedItem.selectedDiagram.commandHandler);
+            orgEditTool.selectedItem = this.selectedItem;
+            return orgEditTool;
+        }
+        return tool;
+    };
+    return CustomTool;
+}());
+
+var LeftExtendTool = (function (_super) {
+    __extends(LeftExtendTool, _super);
+    function LeftExtendTool() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.selectedItem = null;
+        return _this;
+    }
+    LeftExtendTool.prototype.mouseDown = function (args) {
+        this.inAction = true;
+        _super.prototype.mouseDown.call(this, args);
+    };
+    LeftExtendTool.prototype.mouseUp = function (args) {
+        if (this.inAction) {
+            var selectedObject = this.commandHandler.getSelectedObject();
+            if (selectedObject[0]) {
+                if (selectedObject[0] instanceof ej.diagrams.Node) {
+                    MindMapUtilityMethods.addNode('Left');
+                }
+            }
+        }
+        _super.prototype.mouseUp.call(this, args);
+    };
+    return LeftExtendTool;
+}(ej.diagrams.ToolBase));
+var RightExtendTool = (function (_super) {
+    __extends(RightExtendTool, _super);
+    function RightExtendTool() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.selectedItem = null;
+        return _this;
+    }
+    RightExtendTool.prototype.mouseDown = function (args) {
+        this.inAction = true;
+        _super.prototype.mouseDown.call(this, args);
+    };
+    RightExtendTool.prototype.mouseUp = function (args) {
+        if (this.inAction) {
+            var selectedObject = this.commandHandler.getSelectedObject();
+            if (selectedObject[0]) {
+                if (selectedObject[0] instanceof ej.diagrams.Node) {
+                    MindMapUtilityMethods.addNode('Right');
+                }
+            }
+        }
+        _super.prototype.mouseUp.call(this, args);
+    };
+    return RightExtendTool;
+}(ej.diagrams.ToolBase));
+var RemoveTool = (function (_super) {
+    __extends(RemoveTool, _super);
+    function RemoveTool() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.selectedItem = null;
+        return _this;
+    }
+    RemoveTool.prototype.mouseDown = function (args) {
+        this.inAction = true;
+        _super.prototype.mouseDown.call(this, args);
+    };
+    RemoveTool.prototype.mouseUp = function (args) {
+        if (this.inAction) {
+            var selectedObject = this.commandHandler.getSelectedObject();
+            if (selectedObject[0]) {
+                if (selectedObject[0] instanceof ej.diagrams.Node) {
+                    this.selectedItem.utilityMethods.removeChild(this.selectedItem);
+                }
+            }
+        }
+        _super.prototype.mouseUp.call(this, args);
+    };
+    return RemoveTool;
+}(ej.diagrams.ToolBase));
+
+var OrgAddHandleTool = (function (_super) {
+    __extends(OrgAddHandleTool, _super);
+    function OrgAddHandleTool() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.selectedItem = null;
+        return _this;
+    }
+    OrgAddHandleTool.prototype.mouseDown = function (args) {
+        this.inAction = true;
+        _super.prototype.mouseDown.call(this, args);
+    };
+    OrgAddHandleTool.prototype.mouseUp = function (args) {
+        if (this.inAction) {
+            var selectedObject = this.commandHandler.getSelectedObject();
+            if (selectedObject[0]) {
+                if (selectedObject[0] instanceof ej.diagrams.Node) {
+                    OrgChartUtilityMethods.addChild(this.selectedItem.selectedDiagram.selectedItems.nodes[0].id);
+                }
+            }
+        }
+        _super.prototype.mouseUp.call(this, args);
+    };
+    return OrgAddHandleTool;
+}(ej.diagrams.ToolBase));
+
+var OrgRemoveHandleTool = (function (_super) {
+    __extends(OrgRemoveHandleTool, _super);
+    function OrgRemoveHandleTool() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.selectedItem = null;
+        return _this;
+    }
+    OrgRemoveHandleTool.prototype.mouseDown = function (args) {
+        this.inAction = true;
+        _super.prototype.mouseDown.call(this, args);
+    };
+    OrgRemoveHandleTool.prototype.mouseUp = function (args) {
+        if (this.inAction) {
+            var selectedObject = this.commandHandler.getSelectedObject();
+            if (selectedObject[0]) {
+                if (selectedObject[0] instanceof ej.diagrams.Node) {
+                    this.selectedItem.utilityMethods.removeChild(this.selectedItem);
+                }
+            }
+        }
+        _super.prototype.mouseUp.call(this, args);
+    };
+    return OrgRemoveHandleTool;
+}(ej.diagrams.ToolBase));
+
+var OrgEditHandleTool = (function (_super) {
+    __extends(OrgEditHandleTool, _super);
+    function OrgEditHandleTool() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.selectedItem = null;
+        return _this;
+    }
+    OrgEditHandleTool.prototype.mouseDown = function (args) {
+        this.inAction = true;
+        _super.prototype.mouseDown.call(this, args);
+    };
+    OrgEditHandleTool.prototype.mouseUp = function (args) {
+        if (this.inAction) {
+            var selectedObject = this.commandHandler.getSelectedObject();
+            if (selectedObject[0]) {
+                if (selectedObject[0] instanceof ej.diagrams.Node) {
+                    OrgChartUtilityMethods.showCustomProperty();
+                }
+            }
+        }
+        _super.prototype.mouseUp.call(this, args);
+    };
+    return OrgEditHandleTool;
+}(ej.diagrams.ToolBase));

scripts/utilitymethods.js

@@ -0,0 +1,817 @@
+/**
+ *  Home page handler
+ */
+
+var PaperSize = (function () {
+    function PaperSize() {
+    }
+    return PaperSize;
+}());
+
+var UtilityMethods = (function () {
+    function UtilityMethods() {
+        this.flowChartImage = [
+            { source: 'src/assets/dbstyle/common_images/blank_diagram.svg', name: 'Blank Diagram', type: 'svg_blank' },
+            { source: 'src/assets/dbstyle/flowchart_Images/Credit_Card_Processing.svg', name: 'Credit Card Processing', type: 'svg_image' },
+            { source: 'src/assets/dbstyle/flowchart_Images/Bank_Teller_Flow.svg', name: 'Banking Teller Process Flow', type: 'svg_image' },
+            { source: 'src/assets/dbstyle/flowchart_Images/Developer_Workflow.SVG', name: 'Agile"s Developer Workflow', type: 'svg_image' },
+        ];
+        this.mindMapImage = [
+            { source: 'src/assets/dbstyle/common_images/blank_diagram_mind.svg', name: 'Blank Diagram', type: 'svg_image' },
+            { source: 'src/assets/dbstyle/mindmap_images/BusinessPlanning.SVG', name: 'Business Planning', type: 'svg_image' },
+            { source: 'src/assets/dbstyle/mindmap_images/TQM.SVG', name: 'Quality Management', type: 'svg_image' },
+            { source: 'src/assets/dbstyle/mindmap_images/SoftwareLifeCycle.SVG', name: 'Software Life Cycle', type: 'svg_image' },
+        ];
+        this.orgChartImage = [
+            { source: 'src/assets/dbstyle/common_images/blank_diagram_org.svg', name: 'Blank Diagram', type: 'svg_image' },
+            { source: 'src/assets/dbstyle/orgchart_images/OrgRenderingStyle_1.svg', name: 'Org Template Style - 1', type: 'svg_image' },
+            { source: 'src/assets/dbstyle/orgchart_images/OrgRenderingStyle_2.svg', name: 'Org Template Style - 2', type: 'svg_image' },
+            { source: 'src/assets/dbstyle/orgchart_images/OrgRenderingStyle_3.svg', name: 'Org Template Style - 3', type: 'svg_image' },
+        ];
+        this.bpmnImage = [
+            { source: 'src/assets/dbstyle/common_images/blank_diagram.svg', name: 'Blank Diagram', type: 'svg_blank' },
+            { source: 'src/assets/dbstyle/bpmn_images/Template1.png', name: 'BPMN Diagram 1' },
+            { source: 'src/assets/dbstyle/bpmn_images/Template1.png', name: 'BPMN Diagram 2' },
+            { source: 'src/assets/dbstyle/bpmn_images/Template1.png', name: 'BPMN Diagram 3' },
+        ];
+        this.fillColorCode = ['#C4F2E8', '#F7E0B3', '#E5FEE4', '#E9D4F1', '#D4EFED', '#DEE2FF'];
+        this.borderColorCode = ['#8BC1B7', '#E2C180', '#ACCBAA', '#D1AFDF', '#90C8C2', '#BBBFD6'];
+    }
+    UtilityMethods.prototype.bindNodeProperties = function (node, selectedItem) {
+        selectedItem.preventPropertyChange = true;
+        selectedItem.nodeProperties.offsetX.value = (Math.round(node.offsetX * 100) / 100);
+        selectedItem.nodeProperties.offsetY.value = (Math.round(node.offsetY * 100) / 100);
+        selectedItem.nodeProperties.width.value = node.width ? (Math.round(node.width * 100) / 100) : (Math.round(node.minWidth * 100) / 100);
+        selectedItem.nodeProperties.height.value = node.height ? (Math.round(node.height * 100) / 100) : (Math.round(node.minHeight * 100) / 100);
+        selectedItem.nodeProperties.rotateAngle.value = node.rotateAngle;
+        selectedItem.nodeProperties.strokeColor.value = this.getHexColor(node.style.strokeColor);
+        selectedItem.nodeProperties.strokeStyle.value = node.style.strokeDashArray ? node.style.strokeDashArray : 'None';
+        selectedItem.nodeProperties.strokeWidth.value = node.style.strokeWidth;
+        selectedItem.nodeProperties.fillColor.value = this.getHexColor(node.style.fill);
+        selectedItem.nodeProperties.opacity.value = node.style.opacity * 100;
+        selectedItem.nodeProperties.aspectRatio.checked = node.constraints & ej.diagrams.NodeConstraints.AspectRatio ? true : false;
+        selectedItem.nodeProperties.gradient = node.style.gradient.type !== 'None' ? true : false;
+        var gradientElement = document.getElementById('gradientStyle');
+        if (selectedItem.nodeProperties.gradient) {
+            gradientElement.className = 'row db-prop-row db-gradient-style-show';
+            selectedItem.nodeProperties.gradientColor.value = node.style.gradient.stops[1].color;
+            var gradient = node.style.gradient;
+            if (gradient.x1) {
+                selectedItem.nodeProperties.gradientDirection.value = 'North';
+            }
+            else if (gradient.x2) {
+                selectedItem.nodeProperties.gradientDirection.value = 'East';
+            }
+            else if (gradient.y1) {
+                selectedItem.nodeProperties.gradientDirection.value = 'West';
+            }
+            else if (gradient.y2) {
+                selectedItem.nodeProperties.gradientDirection.value = 'South';
+            }
+        }
+        else {
+            gradientElement.className = 'row db-prop-row db-gradient-style-hide';
+            selectedItem.nodeProperties.gradientColor.value = '#ffffff';
+            selectedItem.nodeProperties.gradientDirection.value = 'South';
+        }
+        selectedItem.preventPropertyChange = false;
+    };
+    UtilityMethods.prototype.bindMindMapProperties = function (node, selectedItem) {
+        selectedItem.preventPropertyChange = true;
+        selectedItem.mindmapSettings.stroke.value = node.style.strokeColor;
+        selectedItem.mindmapSettings.strokeStyle.value = node.style.strokeDashArray ? node.style.strokeDashArray : 'None';
+        selectedItem.mindmapSettings.strokeWidth.value = node.style.strokeWidth;
+        selectedItem.mindmapSettings.fill.value = node.style.fill;
+        selectedItem.mindmapSettings.opacity.value = (node.style.opacity || 1) * 100;
+        if (node.annotations.length > 0) {
+            var annotation = node.annotations[0].style;
+            selectedItem.mindmapSettings.fontFamily.value = annotation.fontFamily;
+            selectedItem.mindmapSettings.fontColor.value = annotation.color;
+            selectedItem.mindmapSettings.fontSize.value = annotation.fontSize;
+            selectedItem.mindmapSettings.textOpacity.value = (annotation.opacity || 1) * 100;
+        }
+        selectedItem.preventPropertyChange = false;
+    };
+    UtilityMethods.prototype.bindTextProperties = function (text, selectedItem) {
+        selectedItem.preventPropertyChange = true;
+        selectedItem.textProperties.fontColor.value = this.getHexColor(text.color);
+        selectedItem.textProperties.fontFamily.value = text.fontFamily;
+        selectedItem.textProperties.fontSize.value = text.fontSize;
+        selectedItem.textProperties.opacity.value = text.opacity * 100;
+        var toolbarTextStyle = document.getElementById('toolbarTextStyle');
+        if (toolbarTextStyle) {
+            toolbarTextStyle = toolbarTextStyle.ej2_instances[0];
+        }
+        if (toolbarTextStyle) {
+            toolbarTextStyle.items[0].cssClass = text.bold ? 'tb-item-start tb-item-selected' : 'tb-item-start';
+            toolbarTextStyle.items[1].cssClass = text.italic ? 'tb-item-middle tb-item-selected' : 'tb-item-middle';
+            toolbarTextStyle.items[2].cssClass = text.textDecoration === 'Underline' ? 'tb-item-end tb-item-selected' : 'tb-item-end';
+        }
+        this.updateTextAlign(text.textAlign);
+        selectedItem.preventPropertyChange = false;
+    };
+    UtilityMethods.prototype.updateTextAlign = function (textAlign) {
+        var toolbarTextSubAlignment = document.getElementById('toolbarTextSubAlignment');
+        if (toolbarTextSubAlignment) {
+            toolbarTextSubAlignment = toolbarTextSubAlignment.ej2_instances[0];
+        }
+        if (toolbarTextSubAlignment) {
+            for (var i = 0; i < toolbarTextSubAlignment.items.length; i++) {
+                toolbarTextSubAlignment.items[i].cssClass = toolbarTextSubAlignment.items[i].cssClass.replace(' tb-item-selected', '');
+            }
+            var index = textAlign === 'Left' ? 0 : (textAlign === 'Center' ? 1 : 2);
+            toolbarTextSubAlignment.items[index].cssClass = toolbarTextSubAlignment.items[index].cssClass + ' tb-item-selected';
+        }
+    };
+    UtilityMethods.prototype.updateHorVertAlign = function (horizontalAlignment, verticalAlignment) {
+        var toolbarHorVerAlignment = document.getElementById('toolbarTextAlignment');
+        if (toolbarHorVerAlignment) {
+            toolbarHorVerAlignment = toolbarHorVerAlignment.ej2_instances[0];
+        }
+        if (toolbarHorVerAlignment) {
+            for (var i = 0; i < toolbarHorVerAlignment.items.length; i++) {
+                toolbarHorVerAlignment.items[i].cssClass = toolbarHorVerAlignment.items[i].cssClass.replace(' tb-item-selected', '');
+            }
+            var index = horizontalAlignment === 'Right' ? 0 : (horizontalAlignment === 'Center' ? 1 : 2);
+            toolbarHorVerAlignment.items[index].cssClass = toolbarHorVerAlignment.items[index].cssClass + ' tb-item-selected';
+            index = verticalAlignment === 'Bottom' ? 3 : (verticalAlignment === 'Center' ? 4 : 5);
+            toolbarHorVerAlignment.items[index].cssClass = toolbarHorVerAlignment.items[index].cssClass + ' tb-item-selected';
+        }
+    };
+    UtilityMethods.prototype.bindConnectorProperties = function (connector, selectedItem) {
+        selectedItem.preventPropertyChange = true;
+        selectedItem.connectorProperties.lineColor.value = this.getHexColor(connector.style.strokeColor);
+        selectedItem.connectorProperties.lineStyle.value = connector.style.strokeDashArray ? connector.style.strokeDashArray : 'None';
+        selectedItem.connectorProperties.lineType.value = connector.type;
+        selectedItem.connectorProperties.lineWidth.value = connector.style.strokeWidth;
+        selectedItem.connectorProperties.sourceType.value = connector.sourceDecorator.shape;
+        selectedItem.connectorProperties.targetType.value = connector.targetDecorator.shape;
+        selectedItem.connectorProperties.opacity.value = connector.style.opacity * 100;
+        selectedItem.connectorProperties.lineJumpSize.value = connector.bridgeSpace;
+        selectedItem.connectorProperties.lineJump.checked = connector.constraints & ej.diagrams.ConnectorConstraints.Bridging ? true : false;
+        selectedItem.connectorProperties.targetSize.value = connector.targetDecorator.width;
+        selectedItem.connectorProperties.sourceSize.value = connector.sourceDecorator.width;
+        selectedItem.preventPropertyChange = false;
+    };
+    UtilityMethods.prototype.getHexColor = function (colorStr) {
+        var a = document.createElement('div');
+        a.style.color = colorStr;
+        var colors = window.getComputedStyle(document.body.appendChild(a)).color.match(/\d+/g).map(function (a) {
+            return parseInt(a, 10);
+        });
+        document.body.removeChild(a);
+        return (colors.length >= 3) ? '#' + (((1 << 24) + (colors[0] << 16) + (colors[1] << 8) + colors[2]).toString(16).substr(1)) : '';
+    };
+    UtilityMethods.prototype.getOffset = function (position) {
+        switch (position.toLowerCase()) {
+            case 'topleft':
+                return { x: 0, y: 0 };
+            case 'topcenter':
+                return { x: 0.5, y: 0 };
+            case 'topright':
+                return { x: 1, y: 0 };
+            case 'middleleft':
+                return { x: 0, y: 0.5 };
+            default:
+                return { x: 0.5, y: 0.5 };
+            case 'middleright':
+                return { x: 1, y: 0.5 };
+            case 'bottomleft':
+                return { x: 0, y: 1 };
+            case 'bottomcenter':
+                return { x: 0.5, y: 1 };
+            case 'bottomright':
+                return { x: 1, y: 1 };
+        }
+    };
+    UtilityMethods.prototype.getPosition = function (offset) {
+        if (offset.x === 0 && offset.y === 0) {
+            return 'TopLeft';
+        }
+        else if (offset.x === 0.5 && offset.y === 0) {
+            return 'TopCenter';
+        }
+        else if (offset.x === 1 && offset.y === 0) {
+            return 'TopRight';
+        }
+        else if (offset.x === 0 && offset.y === 0.5) {
+            return 'MiddleLeft';
+        }
+        else if (offset.x === 1 && offset.y === 0.5) {
+            return 'MiddleRight';
+        }
+        else if (offset.x === 0 && offset.y === 1) {
+            return 'BottomLeft';
+        }
+        else if (offset.x === 0.5 && offset.y === 1) {
+            return 'BottomCenter';
+        }
+        else if (offset.x === 1 && offset.y === 1) {
+            return 'BottomRight';
+        }
+        else {
+            return 'Center';
+        }
+    };
+    UtilityMethods.prototype.hideElements = function (elementType, diagram, diagramType) {
+        var diagramContainer = document.getElementsByClassName('diagrambuilder-container')[0];
+        if (diagramContainer.classList.contains(elementType)) {
+            if (!(diagramType === 'mindmap-diagram' || diagramType === 'orgchart-diagram')) {
+                diagramContainer.classList.remove(elementType);
+            }
+        }
+        else {
+            diagramContainer.classList.add(elementType);
+        }
+        if (diagram) {
+            diagram.updateViewPort();
+        }
+    };
+    UtilityMethods.prototype.objectTypeChange = function (objectType) {
+        document.getElementById('diagramPropertyContainer').style.display = 'none';
+        document.getElementById('nodePropertyContainer').style.display = 'none';
+        document.getElementById('textPropertyContainer').style.display = 'none';
+        document.getElementById('connectorPropertyContainer').style.display = 'none';
+        switch (objectType) {
+            case 'diagram':
+                document.getElementById('diagramPropertyContainer').style.display = '';
+                break;
+            case 'node':
+                document.getElementById('nodePropertyContainer').style.display = '';
+                break;
+            case 'connector':
+                document.getElementById('connectorPropertyContainer').style.display = '';
+                break;
+        }
+    };
+    UtilityMethods.prototype.getDefaultDiagramTemplates1 = function (selectedItem, tempCount, backgroundColor, parentId) {
+        tempCount = tempCount ? tempCount : 4;
+        backgroundColor = backgroundColor ? backgroundColor : 'red';
+        parentId = parentId ? parentId : 'Flow Chart';
+        var parentDiv = document.getElementById('diagramTemplateDiv1');
+        parentDiv = parentDiv.cloneNode(true);
+        parentDiv.id = '';
+        parentDiv.style.display = '';
+        var parentElements = parentDiv.getElementsByClassName('db-diagram-template-parent-text');
+        for (var i = 0; i < parentElements.length; i++) {
+            if (parentElements[i].children[0].innerHTML.trim() === parentId) {
+                parentElements[i].classList.add('active');
+            }
+            parentElements[i].onclick = this.showDiagramTemplates.bind(this, selectedItem);
+        }
+        var diagramTemplatesDiv = parentDiv.getElementsByClassName('diagramTemplates')[0];
+        diagramTemplatesDiv.appendChild(this.generateDiagramTemplates(tempCount, backgroundColor, parentId, selectedItem));
+        this.tempDialog.content = parentDiv.outerHTML;
+        this.tempDialog.dataBind();
+        this.triggerTemplateEvent(selectedItem);
+        return this.tempDialog.content;
+    };
+    UtilityMethods.prototype.generateDiagramTemplates = function (tempCount, backgroundColor, parentId, selectedItem) {
+        var parentTemplateDiv = document.createElement('div');
+        parentTemplateDiv.classList.add('class', 'db-parent-diagram-template');
+        var divElement = document.getElementById('diagramTemplateDiv');
+        for (var i = 0; i < tempCount; i++) {
+            var cloneTemplateDiv = divElement.cloneNode(true);
+            cloneTemplateDiv.style.display = '';
+            cloneTemplateDiv.id = '';
+            var imageDiv = cloneTemplateDiv.children[0];
+            imageDiv.setAttribute('id', parentId.replace(' ', '').toLowerCase() + '_child' + i);
+            imageDiv.onclick = this.generateDiagram.bind(this, selectedItem);
+            var diagramType = this.getImageSource(parentId, i);
+            imageDiv.children[0].style.backgroundImage = 'url(' + diagramType.source + ')';
+            if (diagramType.type) {
+                if (diagramType.type === 'svg_blank') {
+                    imageDiv.children[0].className = 'db-diagram-template-svg-blank-image';
+                }
+                else {
+                    imageDiv.children[0].className = 'db-diagram-template-svg-image';
+                }
+            }
+            else {
+                imageDiv.children[0].className = 'db-diagram-template-image';
+            }
+            cloneTemplateDiv.children[1].children[0].innerHTML = diagramType.name;
+            parentTemplateDiv.appendChild(cloneTemplateDiv);
+        }
+        return parentTemplateDiv;
+    };
+    UtilityMethods.prototype.triggerTemplateEvent = function (selectedItem) {
+        var parentElements = document.getElementsByClassName('db-diagram-template-parent-text');
+        for (var i = 0; i < parentElements.length; i++) {
+            parentElements[i].onclick = this.showDiagramTemplates.bind(this, selectedItem);
+        }
+        var parentElements1 = document.getElementsByClassName('db-diagram-template-image-div');
+        for (var i = 0; i < parentElements1.length; i++) {
+            parentElements1[i].onclick = this.generateDiagram.bind(this, selectedItem);
+        }
+    };
+    UtilityMethods.prototype.getImageSource = function (diagramType, index) {
+        switch (diagramType) {
+            case 'Flow Chart':
+                return this.flowChartImage[index];
+            case 'Mind Map':
+                return this.mindMapImage[index];
+            case 'Org Chart':
+                return this.orgChartImage[index];
+            default:
+                return this.bpmnImage[index];
+        }
+    };
+    UtilityMethods.prototype.readTextFile = function (file, selectedItem) {
+        var _this = this;
+        document.getElementsByClassName('sb-content-overlay')[0].style.display = '';
+        var ajax = new ej.base.Ajax(file, 'GET', true);
+        ajax.send().then();
+        var context = this;
+        ajax.onSuccess = function (data) {
+            selectedItem.preventSelectionChange = true;
+            selectedItem.isTemplateLoad = true;
+            _this.page.loadPage(data);
+            _this.page.loadDiagramSettings();
+            selectedItem.isTemplateLoad = false;
+            if (selectedItem.diagramType === 'MindMap') {
+                var rootNode = MindMapUtilityMethods.getNode(selectedItem.selectedDiagram.nodes, 'rootNode');
+                selectedItem.utilityMethods.bindMindMapProperties(rootNode, selectedItem);
+            }
+            if (selectedItem.diagramType === 'OrgChart') {
+                selectedItem.selectedDiagram.layout.getLayoutInfo = OrgChartUtilityMethods.getLayoutInfo.bind(OrgChartUtilityMethods);
+                selectedItem.selectedDiagram.selectedItems.userHandles = OrgChartUtilityMethods.handle;
+                selectedItem.selectedDiagram.selectedItems.constraints = ej.diagrams.SelectorConstraints.UserHandle;
+                selectedItem.selectedDiagram.dataBind();
+            }
+            selectedItem.preventSelectionChange = false;
+            document.getElementsByClassName('sb-content-overlay')[0].style.display = 'none';
+        };
+        ajax.onFailure = function (data) {
+            document.getElementsByClassName('sb-content-overlay')[0].style.display = 'none';
+        };
+        ajax.onError = function (evt) {
+            document.getElementsByClassName('sb-content-overlay')[0].style.display = 'none';
+            return null;
+        };
+    };
+    UtilityMethods.prototype.generateDiagram = function (selectedItem, evt) {
+        var diagramContainer = document.getElementsByClassName('diagrambuilder-container')[0];
+        var target = evt.target;
+        if (target.id.startsWith('mindmap')) {
+            selectedItem.diagramType = 'MindMap';
+            MindMapUtilityMethods.selectedItem = selectedItem;
+            var mindMapObject = new MindMap(selectedItem);
+            if (target.id === 'mindmap_child0') {
+                mindMapObject.createMindMap(true);
+                MindMapUtilityMethods.templateType = 'template1';
+            }
+            else if (target.id === 'mindmap_child1') {
+                mindMapObject.createMindMap(false);
+                this.readTextFile('src/assets/dbstyle/mindmap_images/BusinessPlanning.json', selectedItem);
+                MindMapUtilityMethods.templateType = 'template1';
+            }
+            else if (target.id === 'mindmap_child2') {
+                mindMapObject.createMindMap(false);
+                this.readTextFile('src/assets/dbstyle/mindmap_images/TQM.json', selectedItem);
+                MindMapUtilityMethods.templateType = 'template2';
+            }
+            else if (target.id === 'mindmap_child3') {
+                mindMapObject.createMindMap(false);
+                this.readTextFile('src/assets/dbstyle/mindmap_images/SoftwareDevelopmentLifeCycle.json', selectedItem);
+                MindMapUtilityMethods.templateType = 'template1';
+            }
+            this.hideMenuItems();
+            diagramContainer.classList.add('custom-diagram');
+        }
+        else if (target.id.startsWith('orgchart')) {
+            selectedItem.diagramType = 'OrgChart';
+            OrgChartUtilityMethods.selectedItem = selectedItem;
+            var orgChartObject = new OrgChartData(selectedItem);
+            if (target.id === 'orgchart_child0') {
+                orgChartObject.createOrgChart(true);
+            }
+            else {
+                OrgChartUtilityMethods.subTreeOrientation = 'Horizontal';
+                OrgChartUtilityMethods.subTreeAlignments = 'Center';
+                if (target.id === 'orgchart_child1') {
+                    orgChartObject.createOrgChart(false);
+                    this.readTextFile('src/assets/dbstyle/orgchart_images/OrgTemplateStyle1.json', selectedItem);
+                }
+                else if (target.id === 'orgchart_child2') {
+                    orgChartObject.createOrgChart(false);
+                    this.readTextFile('src/assets/dbstyle/orgchart_images/OrgTemplateStyle2.json', selectedItem);
+                }
+                else if (target.id === 'orgchart_child3') {
+                    orgChartObject.createOrgChart(false);
+                    this.readTextFile('src/assets/dbstyle/orgchart_images/OrgTemplateStyle3.json', selectedItem);
+                }
+            }
+            this.hideMenuItems();
+            diagramContainer.classList.add('custom-diagram');
+        }
+        else if (target.id.startsWith('flowchart')) {
+            if (target.id === 'flowchart_child0') {
+                selectedItem.selectedDiagram.clear();
+            }
+            else if (target.id === 'flowchart_child1') {
+                this.readTextFile('src/assets/dbstyle/flowchart_Images/CreditCardFlow.json', selectedItem);
+            }
+            else if (target.id === 'flowchart_child2') {
+                this.readTextFile('src/assets/dbstyle/flowchart_Images/BankingTellerProcess.json', selectedItem);
+            }
+            else if (target.id === 'flowchart_child3') {
+                this.readTextFile('src/assets/dbstyle/flowchart_Images/Developer_Workflow.json', selectedItem);
+            }
+            selectedItem.diagramType = 'GeneralDiagram';
+            diagramContainer.classList.add('general-diagram');
+        }
+        else {
+            selectedItem.selectedDiagram.clear();
+            selectedItem.diagramType = 'GeneralDiagram';
+            diagramContainer.classList.add('general-diagram');
+        }
+        var diagramName = target.parentElement.children[1].children[0].innerHTML;
+        if (diagramName !== 'Blank Diagram') {
+            document.getElementById('diagramName').innerHTML = diagramName;
+        }
+        this.tempDialog.hide();
+    };
+    UtilityMethods.prototype.hideMenuItems = function () {
+        var btnWindow = document.getElementById('btnWindowMenu');
+        btnWindow.ej2_instances[0].items[1].iconCss = '';
+        var btnView = document.getElementById('btnViewMenu');
+        btnView.ej2_instances[0].items[7].iconCss = '';
+    };
+    UtilityMethods.prototype.currentDiagramVisibility = function (diagramname, selectedItem) {
+        if (diagramname === 'mindmap-diagram' || diagramname === 'orgchart-diagram') {
+            selectedItem.utilityMethods.hideElements('hide-palette', null, diagramname);
+            var diagramContainer = document.getElementsByClassName('db-current-diagram-container')[0];
+            diagramContainer.classList.add(diagramname);
+            var propertyContainer = document.getElementsByClassName('db-property-editor-container')[0];
+            if (diagramname === 'mindmap-diagram') {
+                propertyContainer.classList.remove('orgchart-diagram');
+            }
+            else {
+                propertyContainer.classList.remove('mindmap-diagram');
+            }
+            propertyContainer.classList.add(diagramname);
+        }
+    };
+    UtilityMethods.prototype.showDiagramTemplates = function (selectedItem, evt) {
+        var target = evt.target;
+        if (target.tagName.toLowerCase() === 'span') {
+            target = target.parentElement;
+        }
+        switch (target.children[0].innerHTML.trim()) {
+            case 'Flow Chart':
+                this.getDefaultDiagramTemplates1(selectedItem, 4, 'red', 'Flow Chart');
+                break;
+            case 'Mind Map':
+                this.getDefaultDiagramTemplates1(selectedItem, 4, 'blue', 'Mind Map');
+                break;
+            case 'Org Chart':
+                this.getDefaultDiagramTemplates1(selectedItem, 4, 'orange', 'Org Chart');
+                break;
+            case 'BPMN':
+                this.getDefaultDiagramTemplates1(selectedItem, 4, 'brown', 'BPMN');
+                break;
+        }
+    };
+    UtilityMethods.prototype.enableToolbarItems = function (selectedItems) {
+        var toolbarContainer = document.getElementsByClassName('db-toolbar-container')[0];
+        var toolbarClassName = 'db-toolbar-container';
+        if (toolbarContainer.classList.contains('db-undo')) {
+            toolbarClassName += ' db-undo';
+        }
+        if (toolbarContainer.classList.contains('db-redo')) {
+            toolbarClassName += ' db-redo';
+        }
+        toolbarContainer.className = toolbarClassName;
+        if (selectedItems.length === 1) {
+            toolbarContainer.className = toolbarContainer.className + ' db-select';
+            if (selectedItems[0] instanceof ej.diagrams.Node) {
+                if (selectedItems[0].children) {
+                    if (selectedItems[0].children.length > 2) {
+                        toolbarContainer.className = toolbarContainer.className + ' db-select db-double db-multiple db-node db-group';
+                    }
+                    else {
+                        toolbarContainer.className = toolbarContainer.className + ' db-select db-double db-node db-group';
+                    }
+                }
+                else {
+                    toolbarContainer.className = toolbarContainer.className + ' db-select db-node';
+                }
+            }
+        }
+        else if (selectedItems.length === 2) {
+            toolbarContainer.className = toolbarContainer.className + ' db-select db-double';
+        }
+        else if (selectedItems.length > 2) {
+            toolbarContainer.className = toolbarContainer.className + ' db-select db-double db-multiple';
+        }
+        if (selectedItems.length > 1) {
+            var isNodeExist = false;
+            for (var i = 0; i < selectedItems.length; i++) {
+                if (selectedItems[i] instanceof ej.diagrams.Node) {
+                    toolbarContainer.className = toolbarContainer.className + ' db-select db-node';
+                    break;
+                }
+            }
+        }
+    };
+    UtilityMethods.prototype.enableMenuItems = function (itemText, selectedItem) {
+        var selectedDiagram = diagram.ej2_instances ? diagram.ej2_instances[0] : selectedItem.selectedDiagram;
+        var selectedItems = selectedDiagram.selectedItems.nodes;
+        selectedItems = selectedItems.concat(selectedDiagram.selectedItems.connectors);
+        if (itemText) {
+            var commandType = itemText.replace(/[' ']/g, '');
+            if (selectedItems.length === 0 || selectedItem.diagramType !== 'GeneralDiagram') {
+                switch (commandType.toLowerCase()) {
+                    case 'edittooltip':
+                        var disable = false;
+                        if (!(selectedItems.length === 1)) {
+                            disable = true;
+                        }
+                        return disable;
+                    case 'cut':
+                        return true;
+                    case 'copy':
+                        return true;
+                    case 'delete':
+                        return true;
+                    case 'duplicate':
+                        return true;
+                }
+            }
+            if (selectedItems.length > 1) {
+                switch (commandType.toLowerCase()) {
+                    case 'edittooltip':
+                        return true;
+                }
+            }
+            if (selectedItem.pasteData.length === 0 && itemText === 'Paste') {
+                return true;
+            }
+            if (itemText === 'Undo' && selectedItem.selectedDiagram.historyManager.undoStack.length === 0) {
+                return true;
+            }
+            if (itemText === 'Redo' && selectedItem.selectedDiagram.historyManager.redoStack.length === 0) {
+                return true;
+            }
+            if (itemText === 'Select All') {
+                if (selectedItem.diagramType !== 'GeneralDiagram' || (selectedItem.selectedDiagram.nodes.length === 0 && selectedItem.selectedDiagram.connectors.length === 0)) {
+                    return true;
+                }
+            }
+            if (selectedItem.diagramType !== 'GeneralDiagram') {
+                if (itemText === 'Themes' || itemText === 'Paste' || itemText === 'Show Rulers' || itemText === 'Show Guides'
+                    || itemText === 'Show Grid' || itemText === 'Snap To Grid' || itemText === 'Show Stencil') {
+                    return true;
+                }
+            }
+        }
+        return false;
+    };
+    UtilityMethods.prototype.enableArrangeMenuItems = function (selectedItem) {
+        var contextInstance = document.getElementById('arrangeContextMenu');
+        var contextMenu = contextInstance.ej2_instances[0];
+        var selectedItems = selectedItem.selectedDiagram.selectedItems.nodes;
+        selectedItems = selectedItems.concat(selectedItem.selectedDiagram.selectedItems.connectors);
+        for (var i = 0; i < contextMenu.items.length; i++) {
+            contextMenu.enableItems([contextMenu.items[i].text], false);
+        }
+        if (selectedItem.diagramType === 'GeneralDiagram') {
+            if (selectedItems.length > 1) {
+                contextMenu.enableItems(['Align Objects', 'Distribute Objects', 'Match Size', 'Lock', 'Unlock', 'Group'], true);
+            }
+            else if (selectedItems.length === 1) {
+                contextMenu.enableItems(['Send To Back', 'Bring To Front', 'Send Backward', 'Bring Forward']);
+                var object = selectedItems[0];
+                if (object instanceof ej.diagrams.Node) {
+                    if (object.children && object.children.length > 0) {
+                        contextMenu.enableItems(['Ungroup']);
+                    }
+                    if (object.constraints & ej.diagrams.NodeConstraints.Drag) {
+                        contextMenu.enableItems(['Lock'], true);
+                    }
+                    else {
+                        contextMenu.enableItems(['Unlock'], true);
+                    }
+                }
+            }
+        }
+    };
+    UtilityMethods.prototype.getPaperSize = function (paperName) {
+        var paperSize = new PaperSize();
+        switch (paperName) {
+            case 'Letter':
+                paperSize.pageWidth = 816;
+                paperSize.pageHeight = 1056;
+                break;
+            case 'Legal':
+                paperSize.pageWidth = 816;
+                paperSize.pageHeight = 1344;
+                break;
+            case 'Tabloid':
+                paperSize.pageWidth = 1056;
+                paperSize.pageHeight = 1632;
+                break;
+            case 'A3':
+                paperSize.pageWidth = 1122;
+                paperSize.pageHeight = 1587;
+                break;
+            case 'A4':
+                paperSize.pageWidth = 793;
+                paperSize.pageHeight = 1122;
+                break;
+            case 'A5':
+                paperSize.pageWidth = 559;
+                paperSize.pageHeight = 793;
+                break;
+            case 'A6':
+                paperSize.pageWidth = 396;
+                paperSize.pageHeight = 559;
+                break;
+        }
+        return paperSize;
+    };
+    UtilityMethods.prototype.removeChild = function (selectedItem) {
+        var diagram = selectedItem.selectedDiagram;
+        if (diagram.selectedItems.nodes.length > 0) {
+            selectedItem.preventPropertyChange = true;
+            diagram.historyManager.startGroupAction();
+            this.removeSubChild(diagram.selectedItems.nodes[0], selectedItem);
+            diagram.historyManager.endGroupAction();
+            diagram.doLayout();
+            selectedItem.preventPropertyChange = false;
+        }
+        selectedItem.isModified = true;
+    };
+    UtilityMethods.prototype.removeSubChild = function (node, selectedItem) {
+        var diagram = selectedItem.selectedDiagram;
+        for (var i = node.outEdges.length - 1; i >= 0; i--) {
+            var connector = MindMapUtilityMethods.getConnector(diagram.connectors, node.outEdges[i]);
+            var childNode = MindMapUtilityMethods.getNode(diagram.nodes, connector.targetID);
+            if (childNode != null && childNode.outEdges.length > 0) {
+                this.removeSubChild(childNode, selectedItem);
+            }
+            else {
+                diagram.remove(childNode);
+            }
+        }
+        for (var j = node.inEdges.length - 1; j >= 0; j--) {
+            var connector = MindMapUtilityMethods.getConnector(diagram.connectors, node.inEdges[j]);
+            var childNode = MindMapUtilityMethods.getNode(diagram.nodes, connector.sourceID);
+            var index = childNode.outEdges.indexOf(connector.id);
+            if (childNode.outEdges.length > 1 && index === 0) {
+                index = childNode.outEdges.length;
+            }
+            if (index > 0) {
+                var node1 = childNode.outEdges[index - 1];
+                var connector1 = diagram.getObject(node1);
+                var node2 = MindMapUtilityMethods.getNode(diagram.nodes, connector1.targetID);
+                diagram.select([node2]);
+            }
+            else {
+                diagram.select([childNode]);
+            }
+        }
+        diagram.remove(node);
+    };
+    UtilityMethods.prototype.cutLayout = function (selectedItem) {
+        var diagram = selectedItem.selectedDiagram;
+        if (diagram.selectedItems.nodes.length) {
+            selectedItem.utilityMethods.copyLayout(selectedItem);
+            selectedItem.utilityMethods.removeChild(selectedItem);
+            diagram.doLayout();
+            selectedItem.isModified = true;
+        }
+    };
+    UtilityMethods.prototype.copyLayout = function (selectedItem) {
+        var diagram = selectedItem.selectedDiagram;
+        var selectedNode = diagram.selectedItems.nodes[0];
+        if (selectedNode.id !== 'rootNode') {
+            selectedItem.pasteData = CommonKeyboardCommands.cloneSelectedItemswithChildElements();
+        }
+    };
+    UtilityMethods.prototype.pasteLayout = function (selectedItem) {
+        selectedItem.isCopyLayoutElement = true;
+        if (selectedItem.diagramType === 'MindMap') {
+            MindMapUtilityMethods.mindmapPaste();
+        }
+        else if (selectedItem.diagramType === 'OrgChart') {
+            OrgChartUtilityMethods.orgchartPaste();
+        }
+        selectedItem.isCopyLayoutElement = false;
+        selectedItem.isModified = true;
+    };
+    UtilityMethods.prototype.undoRedoLayout = function (isundo, selectedItem) {
+        var diagram = selectedItem.selectedDiagram;
+        if (isundo) {
+            diagram.undo();
+        }
+        else {
+            diagram.redo();
+        }
+        if (diagram.selectedItems.nodes.length === 0) {
+            this.updateSectionforNode(selectedItem);
+        }
+        diagram.doLayout();
+        selectedItem.isModified = true;
+    };
+    UtilityMethods.prototype.updateSectionforNode = function (selectedItem) {
+        var diagram = selectedItem.selectedDiagram;
+        for (var i = 0; i < diagram.nodes.length; i++) {
+            var newselection = diagram.nodes[i];
+            if (newselection.id === 'rootNode') {
+                selectedItem.preventPropertyChange = true;
+                diagram.select([newselection]);
+                selectedItem.preventPropertyChange = false;
+            }
+        }
+    };
+    UtilityMethods.prototype.updateLayout = function (selectedItem, bindBindingFields, imageField) {
+        for (var i = 0; i < selectedItem.selectedDiagram.nodes.length; i++) {
+            var node = selectedItem.selectedDiagram.nodes[i];
+            if (node.id !== 'textNode') {
+                var nodeInfo = node.addInfo;
+                var keys = Object.keys(nodeInfo);
+                var bindingFields = [];
+                var additionalFields = [];
+                var propName = 'Name';
+                if (nodeInfo[propName] && nodeInfo[propName].checked) {
+                    bindingFields.push(propName);
+                }
+                for (var i_1 = 0; i_1 < keys.length; i_1++) {
+                    var keyValue = nodeInfo[keys[i_1]];
+                    if (keyValue.type === 'bindingField') {
+                        if (keyValue.checked) {
+                            if (bindBindingFields) {
+                                bindingFields.push(keys[i_1]);
+                            }
+                        }
+                        else {
+                            additionalFields.push(keys[i_1]);
+                        }
+                    }
+                }
+                selectedItem.selectedDiagram.removeLabels(node, node.annotations);
+                propName = 'Image URL';
+                if (!imageField) {
+                    node.minWidth = 150;
+                    node.minHeight = 50;
+                    node.maxHeight = 50;
+                    selectedItem.selectedDiagram.dataBind();
+                    node.shape = { type: 'Basic', shape: 'Rectangle', cornerRadius: 5 };
+                    selectedItem.selectedDiagram.dataBind();
+                }
+                else if (imageField) {
+                    node.minWidth = 300;
+                    node.minHeight = 100;
+                    node.maxHeight = 100;
+                    selectedItem.selectedDiagram.dataBind();
+                    node.shape = {
+                        type: 'Image', source: nodeInfo[propName] && nodeInfo[propName].value ? nodeInfo[propName].value.toString() : 'src/assets/dbstyle/orgchart_images/blank-male.jpg',
+                        align: 'XMinYMin', scale: 'Meet'
+                    };
+                    selectedItem.selectedDiagram.dataBind();
+                }
+                var annotations = [];
+                var startY = 0.5 - ((bindingFields.length - 1) / 10);
+                for (var i_2 = 0; i_2 < bindingFields.length; i_2++) {
+                    var annotation1 = {
+                        content: nodeInfo[bindingFields[i_2]].value.toString(), offset: { x: 0.5, y: startY }
+                    };
+                    if (node.shape && node.shape.type === 'Image') {
+                        annotation1.offset.x = 0;
+                        annotation1.margin = { left: 110 };
+                        annotation1.horizontalAlignment = 'Left';
+                    }
+                    if (i_2 === 0) {
+                        annotation1.style = { fontSize: 14, bold: true };
+                    }
+                    startY += 0.2;
+                    annotations.push(annotation1);
+                }
+                if (annotations.length > 0) {
+                    selectedItem.selectedDiagram.addLabels(node, annotations);
+                }
+                var content = '';
+                if (additionalFields.length > 0) {
+                    for (var i_3 = 0; i_3 < additionalFields.length; i_3++) {
+                        if (nodeInfo[additionalFields[i_3]].value) {
+                            content = content + additionalFields[i_3] + ':' + nodeInfo[additionalFields[i_3]].value + '\n';
+                        }
+                    }
+                }
+                if (content) {
+                    node.tooltip = { content: content, position: 'BottomCenter', relativeMode: 'Object' };
+                    node.constraints = ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.Tooltip;
+                }
+                else {
+                    node.constraints = ej.diagrams.NodeConstraints.Default & ~ej.diagrams.NodeConstraints.Tooltip;
+                }
+            }
+        }
+        selectedItem.selectedDiagram.dataBind();
+        selectedItem.selectedDiagram.doLayout();
+        selectedItem.isModified = true;
+    };
+    return UtilityMethods;
+}());

src/assets/Outlook Icons/fonts/icomoon.svg

@@ -0,0 +1,76 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe700;" glyph-name="Add" d="M449.5 510.5h-218.7v-125h218.8v-218.7h125v218.8h218.8v125h-218.9v218.8h-125v-218.9zM953.2 448l-0.575-22.672-1.707-22.378-2.81-22.056-3.886-21.706-4.934-21.328-5.954-20.923-6.946-20.489-7.91-20.028-8.846-19.538-9.755-19.021-10.635-18.476-11.487-17.903-12.312-17.301-13.108-16.672-13.877-16.016-14.618-15.331-15.331-14.618-16.016-13.877-16.672-13.109-17.301-12.312-17.903-11.487-18.476-10.635-19.021-9.755-19.538-8.846-20.028-7.91-20.489-6.946-20.923-5.954-21.328-4.934-21.706-3.886-22.056-2.811-22.378-1.707-22.672-0.575-22.672 0.575-22.378 1.707-22.056 2.811-21.706 3.886-21.328 4.934-20.923 5.954-20.489 6.946-20.028 7.91-19.538 8.846-19.021 9.755-18.476 10.635-17.903 11.487-17.301 12.312-16.672 13.109-16.016 13.877-15.331 14.618-14.618 15.331-13.877 16.016-13.109 16.672-12.312 17.301-11.487 17.903-10.635 18.476-9.755 19.021-8.846 19.538-7.91 20.028-6.946 20.489-5.954 20.923-4.934 21.328-3.886 21.706-2.811 22.056-1.707 22.378-0.575 22.672 0.575 22.672 1.707 22.378 2.811 22.056 3.886 21.706 4.934 21.328 5.954 20.923 6.946 20.489 7.91 20.028 8.846 19.538 9.755 19.021 10.635 18.476 11.487 17.903 12.312 17.301 13.109 16.672 13.877 16.016 14.618 15.331 15.331 14.618 16.016 13.877 16.672 13.108 17.301 12.312 17.903 11.487 18.476 10.635 19.021 9.755 19.538 8.846 20.028 7.91 20.489 6.946 20.923 5.954 21.328 4.934 21.706 3.886 22.056 2.81 22.378 1.707 22.672 0.575 22.672-0.575 22.378-1.707 22.056-2.81 21.706-3.886 21.328-4.934 20.923-5.954 20.489-6.946 20.028-7.91 19.538-8.846 19.021-9.755 18.476-10.635 17.903-11.487 17.301-12.312 16.672-13.108 16.016-13.877 15.331-14.618 14.618-15.331 13.877-16.016 13.108-16.672 12.312-17.301 11.487-17.903 10.635-18.476 9.755-19.021 8.846-19.538 7.91-20.028 6.946-20.489 5.954-20.923 4.934-21.328 3.886-21.706 2.81-22.056 1.707-22.378 0.575-22.672zM12 448l0.652-25.691 1.934-25.358 3.185-24.994 4.405-24.598 5.592-24.17 6.748-23.71 7.873-23.219 8.965-22.696 10.026-22.142 11.056-21.556 12.053-20.938 13.019-20.289 13.954-19.608 14.856-18.895 15.727-18.15 16.567-17.374 17.374-16.567 18.15-15.727 18.895-14.856 19.608-13.954 20.289-13.019 20.938-12.053 21.556-11.056 22.142-10.026 22.696-8.965 23.219-7.873 23.71-6.748 24.17-5.592 24.598-4.405 24.994-3.185 25.358-1.934 25.691-0.652 25.691 0.652 25.358 1.934 24.994 3.185 24.598 4.405 24.17 5.592 23.71 6.748 23.219 7.873 22.696 8.965 22.142 10.026 21.556 11.056 20.938 12.053 20.289 13.019 19.608 13.954 18.895 14.856 18.15 15.727 17.374 16.567 16.567 17.374 15.727 18.15 14.856 18.895 13.954 19.608 13.019 20.289 12.053 20.938 11.056 21.556 10.026 22.142 8.965 22.696 7.873 23.219 6.748 23.71 5.592 24.17 4.405 24.598 3.185 24.994 1.934 25.358 0.652 25.691-0.652 25.691-1.934 25.358-3.185 24.994-4.405 24.598-5.592 24.17-6.748 23.71-7.873 23.219-8.965 22.696-10.026 22.142-11.056 21.556-12.053 20.938-13.019 20.289-13.954 19.608-14.856 18.895-15.727 18.15-16.567 17.374-17.374 16.567-18.15 15.727-18.895 14.856-19.608 13.954-20.289 13.019-20.938 12.053-21.556 11.056-22.142 10.026-22.696 8.965-23.219 7.873-23.71 6.748-24.17 5.592-24.598 4.405-24.994 3.185-25.358 1.934-25.691 0.652-25.691-0.652-25.358-1.934-24.994-3.185-24.598-4.405-24.17-5.592-23.71-6.748-23.219-7.873-22.696-8.965-22.142-10.026-21.556-11.056-20.938-12.053-20.289-13.019-19.608-13.954-18.895-14.856-18.15-15.727-17.374-16.567-16.567-17.374-15.727-18.15-14.856-18.895-13.954-19.608-13.019-20.289-12.053-20.938-11.056-21.556-10.026-22.142-8.965-22.696-7.873-23.219-6.748-23.71-5.592-24.17-4.405-24.598-3.185-24.994-1.934-25.358-0.652-25.691z" />
+<glyph unicode="&#xe701;" glyph-name="More" d="M762 448l0.646-12.775 1.895-12.407 3.082-11.976 4.205-11.483 5.266-10.926 6.263-10.306 7.198-9.624 8.070-8.878 8.878-8.070 9.624-7.198 10.306-6.263 10.926-5.266 11.483-4.205 11.976-3.082 12.407-1.895 12.775-0.646 12.775 0.646 12.407 1.895 11.976 3.082 11.483 4.205 10.926 5.266 10.306 6.263 9.624 7.198 8.878 8.070 8.070 8.878 7.198 9.624 6.263 10.306 5.266 10.926 4.205 11.483 3.082 11.976 1.895 12.407 0.646 12.775-0.646 12.775-1.895 12.407-3.082 11.976-4.205 11.483-5.266 10.926-6.263 10.306-7.198 9.624-8.070 8.878-8.878 8.070-9.624 7.198-10.306 6.263-10.926 5.266-11.483 4.205-11.976 3.082-12.407 1.895-12.775 0.646-12.775-0.646-12.407-1.895-11.976-3.082-11.483-4.205-10.926-5.266-10.306-6.263-9.624-7.198-8.878-8.070-8.070-8.878-7.198-9.624-6.263-10.306-5.266-10.926-4.205-11.483-3.082-11.976-1.895-12.407-0.646-12.775zM387 448l0.646-12.775 1.895-12.407 3.082-11.976 4.205-11.483 5.266-10.926 6.263-10.306 7.198-9.624 8.070-8.878 8.878-8.070 9.624-7.198 10.306-6.263 10.926-5.266 11.483-4.205 11.976-3.082 12.407-1.895 12.775-0.646 12.775 0.646 12.407 1.895 11.976 3.082 11.483 4.205 10.926 5.266 10.306 6.263 9.624 7.198 8.878 8.070 8.070 8.878 7.198 9.624 6.263 10.306 5.266 10.926 4.205 11.483 3.082 11.976 1.895 12.407 0.646 12.775-0.646 12.775-1.895 12.407-3.082 11.976-4.205 11.483-5.266 10.926-6.263 10.306-7.198 9.624-8.070 8.878-8.878 8.070-9.624 7.198-10.306 6.263-10.926 5.266-11.483 4.205-11.976 3.082-12.407 1.895-12.775 0.646-12.775-0.646-12.407-1.895-11.976-3.082-11.483-4.205-10.926-5.266-10.306-6.263-9.624-7.198-8.878-8.070-8.070-8.878-7.198-9.624-6.263-10.306-5.266-10.926-4.205-11.483-3.082-11.976-1.895-12.407-0.646-12.775zM12 448l0.646-12.775 1.895-12.407 3.082-11.976 4.205-11.483 5.266-10.926 6.263-10.306 7.198-9.624 8.070-8.878 8.878-8.070 9.624-7.198 10.306-6.263 10.926-5.266 11.483-4.205 11.976-3.082 12.407-1.895 12.775-0.646 12.775 0.646 12.407 1.895 11.976 3.082 11.483 4.205 10.926 5.266 10.306 6.263 9.624 7.198 8.878 8.070 8.070 8.878 7.198 9.624 6.263 10.306 5.266 10.926 4.205 11.483 3.082 11.976 1.895 12.407 0.646 12.775-0.646 12.775-1.895 12.407-3.082 11.976-4.205 11.483-5.266 10.926-6.263 10.306-7.198 9.624-8.070 8.878-8.878 8.070-9.624 7.198-10.306 6.263-10.926 5.266-11.483 4.205-11.976 3.082-12.407 1.895-12.775 0.646-12.775-0.646-12.407-1.895-11.976-3.082-11.483-4.205-10.926-5.266-10.306-6.263-9.624-7.198-8.878-8.070-8.070-8.878-7.198-9.624-6.263-10.306-5.266-10.926-4.205-11.483-3.082-11.976-1.895-12.407-0.646-12.775z" />
+<glyph unicode="&#xe702;" glyph-name="Search" d="M906.713 594.6l-0.323-12.748-0.96-12.583-1.581-12.402-2.186-12.205-2.775-11.993-3.349-11.765-3.906-11.521-4.449-11.262-4.975-10.987-5.486-10.696-5.981-10.389-6.46-10.067-6.924-9.729-7.372-9.376-7.804-9.006-8.22-8.621-8.621-8.22-9.006-7.804-9.376-7.372-9.729-6.924-10.067-6.46-10.389-5.981-10.696-5.486-10.987-4.975-11.262-4.449-11.521-3.906-11.765-3.349-11.993-2.775-12.205-2.186-12.402-1.581-12.583-0.96-12.748-0.323-12.748 0.323-12.583 0.96-12.402 1.581-12.205 2.186-11.993 2.775-11.765 3.349-11.521 3.906-11.262 4.449-10.987 4.975-10.696 5.486-10.389 5.981-10.067 6.46-9.729 6.924-9.376 7.372-9.006 7.804-8.621 8.22-8.22 8.621-7.804 9.006-7.372 9.376-6.924 9.729-6.46 10.067-5.981 10.389-5.486 10.696-4.975 10.987-4.449 11.262-3.906 11.521-3.349 11.765-2.775 11.993-2.186 12.205-1.581 12.402-0.96 12.583-0.323 12.748 0.323 12.748 0.96 12.583 1.581 12.403 2.186 12.207 2.775 11.995 3.349 11.768 3.906 11.524 4.449 11.265 4.975 10.99 5.486 10.7 5.981 10.394 6.46 10.072 6.924 9.734 7.372 9.38 7.804 9.011 8.22 8.626 8.621 8.225 9.006 7.809 9.376 7.376 9.729 6.928 10.067 6.465 10.389 5.985 10.696 5.49 10.987 4.979 11.262 4.452 11.521 3.909 11.765 3.351 11.993 2.777 12.205 2.187 12.402 1.582 12.583 0.961 12.748 0.324 12.748-0.324 12.583-0.961 12.402-1.582 12.205-2.187 11.993-2.777 11.765-3.351 11.521-3.909 11.262-4.452 10.987-4.979 10.696-5.49 10.389-5.985 10.067-6.465 9.729-6.928 9.376-7.376 9.006-7.809 8.621-8.225 8.22-8.626 7.804-9.011 7.372-9.38 6.924-9.734 6.46-10.072 5.981-10.394 5.486-10.7 4.975-10.99 4.449-11.265 3.906-11.524 3.349-11.768 2.775-11.995 2.186-12.207 1.581-12.403 0.96-12.583 0.323-12.748zM305.213 594.6l0.197-11.802 0.586-11.703 0.969-11.598 1.345-11.488 3.79-22.625 5.213-22.12 6.582-21.572 7.896-20.98 9.157-20.345 10.364-19.666-10.837-4.323-10.387-5.514-9.825-6.77-9.15-8.092-268.3-268.3-7.225-7.994-6.261-8.519-5.298-8.969-4.335-9.344-3.371-9.644-2.408-9.869-1.445-10.019-0.482-10.094 0.482-10.094 1.445-10.019 2.408-9.869 3.371-9.644 4.335-9.344 5.298-8.969 6.261-8.519 7.225-7.994 8.008-7.209 8.526-6.252 8.971-5.293 9.344-4.333 9.644-3.372 9.871-2.41 10.026-1.447 10.108-0.483 10.079 0.483 10.011 1.447 9.866 2.41 9.643 3.372 9.343 4.333 8.966 5.293 8.511 6.252 7.979 7.209 268.3 268.4 8.092 9.15 6.77 9.825 5.514 10.388 4.323 10.837 19.637-10.364 20.331-9.157 20.978-7.896 21.578-6.582 22.131-5.213 22.638-3.79 11.494-1.345 11.603-0.969 11.706-0.586 11.803-0.197 18.161 0.461 17.926 1.367 17.668 2.251 17.388 3.112 17.085 3.952 16.76 4.769 16.412 5.563 16.043 6.335 15.65 7.085 15.236 7.812 14.799 8.517 14.34 9.2 13.858 9.86 13.354 10.498 12.828 11.113 12.279 11.706 11.708 12.277 11.115 12.825 10.499 13.351 9.861 13.855 9.201 14.336 8.518 14.795 7.813 15.231 7.086 15.645 6.336 16.037 5.563 16.406 4.769 16.753 3.952 17.078 3.113 17.38 2.251 17.66 1.367 17.917 0.461 18.152-0.461 18.161-1.367 17.926-2.251 17.668-3.113 17.388-3.952 17.085-4.769 16.76-5.563 16.412-6.336 16.043-7.086 15.65-7.813 15.236-8.518 14.799-9.201 14.34-9.861 13.858-10.499 13.354-11.115 12.828-11.708 12.279-12.279 11.708-12.828 11.115-13.354 10.499-13.858 9.861-14.34 9.201-14.799 8.518-15.236 7.813-15.65 7.086-16.043 6.336-16.412 5.563-16.76 4.769-17.085 3.952-17.388 3.113-17.668 2.251-17.926 1.367-18.161 0.461-18.153-0.461-17.918-1.367-17.661-2.251-17.382-3.113-17.080-3.952-16.756-4.769-16.409-5.563-16.040-6.336-15.649-7.086-15.235-7.813-14.799-8.518-14.34-9.201-13.859-9.861-13.356-10.499-12.83-11.115-12.282-11.708-11.711-12.279-11.118-12.828-10.502-13.354-9.864-13.858-9.204-14.34-8.521-14.799-7.816-15.236-7.088-15.65-6.338-16.043-5.566-16.412-4.771-16.76-3.954-17.085-3.114-17.388-2.252-17.668-1.368-17.926-0.461-18.161z" />
+<glyph unicode="&#xe703;" glyph-name="Information" d="M480.8-51.951h62.5v62.5h-62.5v-62.5zM437.5 938.049l-17.642-5.533-17.070-6.555-16.489-7.586-15.898-8.627-15.278-9.62-14.622-10.567-13.947-11.523-13.253-12.489-12.489-13.295-11.523-13.942-10.567-14.598-9.62-15.264-8.641-15.898-7.609-16.489-6.559-17.070-5.491-17.642-4.389-18.109-3.123-18.466-1.867-18.803-0.62-19.122h62.5l0.272 11.273 0.814 11.095 1.356 10.917 1.896 10.739 2.435 10.561 2.973 10.383 3.51 10.205 4.045 10.027 4.509 9.778 4.9 9.459 5.289 9.141 5.676 8.822 6.061 8.503 6.443 8.184 6.822 7.866 7.2 7.547 7.547 7.195 7.866 6.812 8.184 6.43 8.503 6.049 8.822 5.67 9.141 5.291 9.459 4.914 9.778 4.538 10.027 4.074 10.205 3.523 10.383 2.975 10.561 2.429 10.739 1.885 10.917 1.343 11.095 0.804 11.273 0.268 11.273-0.272 11.095-0.814 10.917-1.356 10.739-1.896 10.561-2.435 10.383-2.973 10.205-3.51 10.027-4.045 9.778-4.538 9.459-4.914 9.141-5.291 8.822-5.67 8.503-6.049 8.184-6.43 7.866-6.812 7.547-7.195 7.195-7.547 6.812-7.866 6.43-8.184 6.049-8.503 5.67-8.822 5.291-9.141 4.914-9.459 4.538-9.778 4.045-10.055 3.51-10.218 2.973-10.385 2.435-10.555 1.896-10.728 1.356-10.905 0.814-11.085 0.272-11.269-0.673-17.136-2.014-16.302-3.345-15.458-4.667-14.605-5.814-13.931-6.648-13.444-7.492-12.956-8.345-12.469-9.091-12.059-9.709-11.741-10.309-11.441-10.891-11.159-22.725-21.987-23.175-21.912-23.175-22.3-22.725-22.9-10.933-11.889-10.305-12.423-9.686-12.967-9.077-13.52-8.359-14.155-7.516-14.858-6.653-15.552-5.772-16.236-4.709-17.078-3.341-18.072-1.991-19.047-0.659-20.003v-93.8h62.5v93.8l0.673 17.136 2.014 16.302 3.345 15.458 4.667 14.605 5.772 13.931 6.653 13.444 7.516 12.956 8.359 12.469 9.091 12.041 9.709 11.684 10.309 11.347 10.891 11.028 22.725 21.813 23.175 21.887 23.175 22.325 22.725 23.075 10.891 11.962 10.309 12.488 9.709 13.012 9.091 13.538 8.359 14.155 7.516 14.858 6.653 15.552 5.772 16.236 4.709 17.078 3.341 18.072 1.991 19.047 0.659 20.003-0.62 19.108-1.867 18.78-3.123 18.461-4.389 18.152-5.533 17.642-6.555 17.070-7.586 16.489-8.627 15.898-9.62 15.278-10.567 14.622-11.523 13.947-12.489 13.253-13.253 12.489-13.947 11.523-14.622 10.567-15.278 9.62-15.898 8.641-16.489 7.609-17.070 6.559-17.642 5.491-18.109 4.389-18.466 3.123-18.803 1.867-19.122 0.62-19.108-0.563-18.78-1.838-18.461-3.112-18.152-4.388z" />
+<glyph unicode="&#xe704;" glyph-name="Notification" d="M583.4 90.85l-0.341-7.369-1.034-7.106-1.747-6.844-2.478-6.581-3.037-6.245-3.563-5.842-4.088-5.448-4.612-5.064-5.078-4.627-5.472-4.111-5.847-3.567-6.203-2.995-6.581-2.436-6.844-1.752-7.106-1.058-7.369-0.355-7.369 0.341-7.106 1.034-6.844 1.747-6.581 2.478-6.203 3.038-5.847 3.563-5.472 4.087-5.078 4.613-4.612 5.064-4.088 5.448-3.563 5.842-3.037 6.245-2.436 6.581-1.752 6.844-1.058 7.106-0.355 7.369h142.8zM623.1 853.95l12.769-5.911 12.358-6.411 11.947-6.912 11.539-7.416 11.131-7.922 10.724-8.431 10.319-8.942 9.914-9.455 9.455-9.886 8.942-10.305 8.431-10.722 7.922-11.137 7.416-11.55 6.912-11.96 6.411-12.368 5.911-12.773 5.278-13.088 4.582-13.313 3.883-13.537 3.182-13.763 2.479-13.987 1.774-14.213 1.066-14.438 0.356-14.662v-428.6h-571.5v428.6l0.356 14.662 1.066 14.438 1.774 14.213 2.479 13.987 3.182 13.763 3.883 13.537 4.582 13.313 5.278 13.088 5.911 12.769 6.411 12.358 6.912 11.948 7.416 11.538 7.922 11.131 8.431 10.724 8.942 10.319 9.455 9.914 9.886 9.426 10.305 8.928 10.722 8.429 11.137 7.929 11.55 7.427 11.96 6.924 12.368 6.421 12.773 5.915 13.088 5.306 13.314 4.595 13.541 3.885 13.77 3.176 13.999 2.468 14.23 1.761 14.462 1.056 14.695 0.352 14.63-0.356 14.414-1.066 14.198-1.774 13.983-2.479 13.767-3.182 13.552-3.883 13.336-4.582 13.12-5.278zM417.2 935.15l-22.498-7.088-21.739-8.362-20.97-9.638-20.192-10.912-19.369-12.15-18.506-13.35-17.644-14.55-16.781-15.75-15.708-16.767-14.555-17.62-13.373-18.502-12.164-19.411-10.969-20.192-9.656-20.97-8.344-21.739-7.031-22.498-3.019-11.493-2.609-11.604-2.201-11.711-1.796-11.817-1.393-11.92-0.992-12.021-0.593-12.119-0.197-12.215v-428.5h-71.5v-71.4h285.7l0.695-14.564 2.092-14.123 3.498-13.655 4.914-13.158 6.091-12.58 7.159-11.783 8.209-10.977 9.241-10.161 10.161-9.241 10.977-8.209 11.783-7.159 12.58-6.091 13.2-4.914 13.65-3.498 14.1-2.092 14.55-0.695 14.55 0.695 14.1 2.092 13.65 3.498 13.2 4.914 12.58 6.091 11.783 7.159 10.977 8.209 10.161 9.241 9.227 10.161 8.186 10.977 7.155 11.783 6.133 12.58 4.872 13.2 3.503 13.65 2.116 14.1 0.709 14.55h285.7v71.4h-71.4v428.6l-0.201 12.211-0.603 12.109-1.004 12.008-1.404 11.909-1.802 11.81-2.199 11.713-2.596 11.617-2.99 11.522-7.088 22.484-8.362 21.716-9.638 20.966-10.912 20.234-12.15 19.369-13.35 18.506-14.55 17.644-15.75 16.781-16.739 15.75-17.648 14.55-18.53 13.35-19.383 12.15-20.192 10.913-20.97 9.637-21.739 8.363-22.498 7.087-11.489 3.019-11.592 2.609-11.695 2.201-11.798 1.796-11.902 1.393-12.005 0.992-12.108 0.593-12.211 0.197-12.219-0.202-12.129-0.605-12.033-1.008-11.931-1.411-11.823-1.814-11.71-2.217-11.59-2.62-11.465-3.023z" />
+<glyph unicode="&#xe705;" glyph-name="Setting" d="M562.6 567.6l11.416-5.509 10.684-6.466 9.934-7.403 9.166-8.322 8.38-9.223 7.433-9.964 6.477-10.695 5.511-11.417 4.405-11.998 3.158-12.439 1.902-12.87 0.636-13.292-0.622-13.278-1.878-12.847-3.153-12.434-4.447-12.041-5.553-11.459-6.472-10.691-7.409-9.941-8.366-9.209-9.166-8.364-9.934-7.398-10.684-6.442-11.416-5.495-11.998-4.405-12.439-3.158-12.87-1.902-13.292-0.636-13.292 0.622-12.87 1.878-12.439 3.153-11.998 4.447-11.459 5.509-10.691 6.466-9.941 7.403-9.209 8.322-8.38 9.223-7.433 9.964-6.477 10.695-5.511 11.417-4.389 11.998-3.123 12.439-1.867 12.87-0.62 13.292 0.622 13.292 1.878 12.87 3.153 12.439 4.447 11.998 5.511 11.417 6.477 10.695 7.433 9.964 8.38 9.223 9.167 8.364 9.945 7.398 10.714 6.442 11.473 5.495 11.984 4.405 12.416 3.158 12.866 1.902 13.334 0.636 13.234-0.636 12.841-1.902 12.428-3.158 11.997-4.405zM440.1 618.2l-16.316-7.931-15.209-9.244-14.122-10.556-13.053-11.869-11.867-13.067-10.545-14.145-9.214-15.214-7.873-16.273-3.408-8.475-2.95-8.625-2.493-8.775-2.037-8.925-1.582-9.075-1.129-9.225-0.676-9.375-0.225-9.525 0.225-9.492 0.676-9.35 1.129-9.207 1.582-9.063 2.037-8.918 2.493-8.771 2.95-8.624 3.408-8.475 7.873-16.273 9.214-15.214 10.545-14.145 11.867-13.067 13.067-11.869 14.145-10.556 15.214-9.244 16.273-7.931 8.475-3.379 8.624-2.936 8.771-2.491 8.918-2.043 9.063-1.593 9.207-1.141 9.35-0.686 9.492-0.229 9.492 0.225 9.35 0.676 9.207 1.129 9.063 1.582 8.918 2.037 8.771 2.493 8.624 2.95 8.475 3.408 16.316 7.931 15.209 9.244 14.122 10.556 13.053 11.869 11.867 13.053 10.545 14.122 9.214 15.209 7.873 16.316 3.408 8.475 2.95 8.624 2.493 8.771 2.037 8.918 1.582 9.063 1.129 9.207 0.676 9.35 0.225 9.492-0.225 9.521-0.676 9.365-1.129 9.213-1.582 9.064-2.037 8.919-2.493 8.777-2.95 8.638-3.408 8.504-7.873 16.273-9.214 15.214-10.545 14.145-11.867 13.067-13.067 11.869-14.145 10.556-15.214 9.244-16.273 7.931-8.475 3.379-8.624 2.936-8.771 2.491-8.918 2.043-9.063 1.593-9.207 1.141-9.35 0.686-9.492 0.229-9.492-0.229-9.35-0.686-9.207-1.141-9.063-1.593-8.918-2.043-8.771-2.491-8.624-2.936-8.475-3.379zM465.3 763.3l23.3 2 11.612 0.763 11.688 0.237 11.4-0.237 11.7-0.763 23.1-2 72.7 115.9 102.2-42.2-30.9-133.1 17.975-15.737 16.625-15.663 15.787-16.487 15.413-17.913 133.1 30.9 42.3-102.2-115.9-72.2 1.9-23.1 0.763-11.7 0.237-11.4-0.275-11.688-0.725-11.612-1.9-23.3 115.9-72.7-42.3-102.1-133.1 30.9-15.663-18.025-15.737-16.675-16.487-15.75-17.913-15.45 30.9-133-102.2-42.2-72.2 115.9-23.3-2-11.612-0.762-11.688-0.238-11.4 0.238-11.7 0.762-23.1 2-72.6-115.9-102.2 42.2 30.9 133.1-17.975 15.737-16.625 15.663-15.825 16.45-7.744 8.778-7.631 9.172-133.1-30.9-42.2 102.2 115.9 72.2-1.9 23.1-0.762 11.663-0.238 11.438 0.238 11.687 0.762 11.613 1.9 23.3-115.9 72.7 42.2 102.1 133.1-30.9 15.663 17.975 15.737 16.625 16.487 15.788 17.913 15.412-30.9 133.1 102.2 42.2 72.1-115.9zM227.2 869.9l33.4-145.8-12.525-12.075-12.075-12.525-145.9 33.4-78.1-188.1 127.2-79.1-0.4-17.6 0.2-8.8 0.2-8.9-127.2-79.2 78.1-188.1 145.9 33.4 12.038-12.525 12.563-12.075-33.4-145.8 188-78.1 79.1 127.2 8.8-0.2 8.8-0.3 8.8 0.3 8.8 0.2 79.3-127.2 188.1 78.1-33.4 145.9 12.513 12.075 11.987 12.525 145.9-33.4 78.1 188.1-127.2 79.1 0.2 8.9 0.3 8.8-0.3 8.8-0.2 8.8 127.2 79.1-78.1 188.1-145.9-33.4-12.025 12.525-12.475 12.075 33.4 145.8-188.1 78.1-79.1-127.2-17.6 0.6-17.6-0.6-79.3 127.2-188-78.1z" />
+<glyph unicode="&#xe900;" glyph-name="Agenda .path1" horiz-adv-x="1017" d="M963.001 839.696h-108.443v-56.481c-3.165-32.573-30.404-57.826-63.541-57.826s-60.376 25.253-63.521 57.565l-0.021 0.261v56.481h-437.728v-56.481c-3.165-32.573-30.404-57.826-63.541-57.826s-60.376 25.253-63.521 57.565l-0.021 0.261v56.481h-109.008c-28.843-1.437-51.909-24.306-53.649-52.934l-0.008-0.158v-798.641c0-28.386 23.012-51.398 51.398-51.398h913.862c28.386 0 51.398 23.012 51.398 51.398v0 798.641c-1.748 28.786-24.814 51.655-53.524 53.087l-0.133 0.005zM960.177-7.519h-903.696v621.291h903.696z" />
+<glyph unicode="&#xe901;" glyph-name="Agenda .path2" horiz-adv-x="1017" d="M176.785 783.215c2.763-25.079 23.834-44.412 49.421-44.412s46.657 19.334 49.401 44.189l0.020 0.223v112.962c-2.763 25.079-23.834 44.412-49.421 44.412s-46.657-19.334-49.401-44.189l-0.020-0.223z" />
+<glyph unicode="&#xe902;" glyph-name="Agenda .path3" horiz-adv-x="1017" d="M225.924 719.956c0.001 0 0.002 0 0.002 0 35.050 0 63.501 28.254 63.821 63.228v112.992c-3.165 32.573-30.404 57.826-63.541 57.826s-60.376-25.253-63.521-57.565l-0.021-0.261v-112.962c0.316-34.809 28.45-62.942 63.229-63.258h0.030zM225.924 945.88c27.45 0 49.703-22.253 49.703-49.703v0-112.962c-2.763-25.079-23.834-44.412-49.421-44.412s-46.657 19.334-49.401 44.189l-0.020 0.223v112.962c0 0.001 0 0.002 0 0.003 0 27.252 21.932 49.381 49.108 49.7h0.030z" />
+<glyph unicode="&#xe903;" glyph-name="Agenda .path4" horiz-adv-x="1017" d="M741.595 783.215c2.763-25.079 23.834-44.412 49.421-44.412s46.657 19.334 49.401 44.189l0.020 0.223v112.962c-2.763 25.079-23.834 44.412-49.421 44.412s-46.657-19.334-49.401-44.189l-0.020-0.223z" />
+<glyph unicode="&#xe904;" glyph-name="Agenda .path5" horiz-adv-x="1017" d="M790.734 719.956c0.001 0 0.002 0 0.002 0 35.050 0 63.501 28.254 63.821 63.228v112.992c-3.165 32.573-30.404 57.826-63.541 57.826s-60.376-25.253-63.521-57.565l-0.021-0.261v-112.962c0.316-34.809 28.45-62.942 63.229-63.258h0.030zM790.734 945.88c27.45 0 49.703-22.253 49.703-49.703v0-112.962c-2.763-25.079-23.834-44.412-49.421-44.412s-46.657 19.334-49.401 44.189l-0.020 0.223v112.962c0 0.001 0 0.002 0 0.003 0 27.252 21.932 49.381 49.108 49.7h0.030z" />
+<glyph unicode="&#xe905;" glyph-name="Archive" d="M0 832h1024v-170.667h-1024v170.667zM42.667 64h938.667v554.667h-938.667zM298.667 533.333h426.667v-85.333h-426.667z" />
+<glyph unicode="&#xe906;" glyph-name="Attach" horiz-adv-x="459" d="M459.476 767.84v-607.653c-0.103-30.951-6.855-60.298-18.901-86.725l0.539 1.32c-12.328-27.564-28.863-51.072-49.067-70.846l-0.040-0.039c-20.518-19.802-44.732-35.937-71.482-47.249l-1.538-0.578c-26.057-11.341-56.412-17.939-88.307-17.939-0.481 0-0.961 0.001-1.441 0.004h0.074c-0.381-0.002-0.831-0.004-1.282-0.004-31.925 0-62.309 6.598-89.863 18.504l1.47-0.565c-28.292 11.879-52.508 28.016-73.089 47.892l0.068-0.065c-19.765 19.396-35.989 42.317-47.669 67.758l-0.584 1.42c-11.507 25.106-18.259 54.454-18.362 85.367v640.571c-0.007 0.527-0.011 1.149-0.011 1.772 0 22.261 4.881 43.382 13.631 62.352l-0.382-0.925c8.966 19.746 20.889 36.59 35.412 50.785l0.031 0.031c14.561 14.036 31.677 25.542 50.565 33.735l1.105 0.427c18.514 8.1 40.089 12.813 62.765 12.813 0.303 0 0.606-0.001 0.908-0.003h-0.047c0.282 0.002 0.615 0.003 0.948 0.003 22.647 0 44.192-4.714 63.709-13.213l-1.031 0.4c20.173-8.702 37.436-20.354 52.139-34.629l-0.042 0.040c14.588-14.204 26.516-31.054 35.025-49.787l0.418-1.029c8.361-18.039 13.239-39.153 13.239-61.406 0-0.18 0-0.36-0.001-0.541v0.028-640.534c0.002-0.237 0.003-0.516 0.003-0.797 0-13.306-2.831-25.95-7.922-37.365l0.232 0.583c-5.24-11.79-12.288-21.846-20.909-30.304l-0.015-0.015c-18.039-17.489-42.67-28.27-69.818-28.27s-51.779 10.781-69.844 28.295l0.026-0.025c-8.645 8.467-15.694 18.525-20.68 29.705l-0.244 0.613c-4.859 10.831-7.69 23.476-7.69 36.781 0 0.28 0.001 0.56 0.004 0.839v-0.043 544.454h65.334v-543.6c-0.001-0.086-0.001-0.188-0.001-0.291 0-8.831 3.776-16.781 9.801-22.322l0.022-0.020c5.931-5.837 14.074-9.441 23.059-9.441s17.129 3.604 23.064 9.445l-0.004-0.004c6.050 5.631 9.822 13.638 9.822 22.527 0 0.037 0 0.074 0 0.11v-0.006 640.534c0.028 0.846 0.044 1.842 0.044 2.84 0 12.199-2.368 23.845-6.67 34.503l0.221-0.619c-5.219 11.798-12.27 21.857-20.906 30.301l-0.018 0.017c-17.905 17.444-42.397 28.202-69.402 28.202-0.672 0-1.342-0.007-2.011-0.020l0.1 0.002c-0.066 0-0.144 0-0.221 0-26.995 0-51.48-10.751-69.405-28.205l0.022 0.021c-8.654-8.462-15.705-18.521-20.681-29.707l-0.243-0.612c-4.859-10.859-7.689-23.533-7.689-36.869 0-0.249 0.001-0.498 0.003-0.747v0.038-640.534c-0.001-0.152-0.001-0.332-0.001-0.513 0-22.253 4.877-43.367 13.621-62.33l-0.382 0.925c8.957-19.75 20.881-36.595 35.411-50.784l0.032-0.031c14.661-14.234 31.924-25.887 50.992-34.162l1.104-0.427c18.459-8.1 39.975-12.814 62.593-12.814 0.364 0 0.727 0.001 1.090 0.004h-0.056c0.282-0.002 0.615-0.003 0.948-0.003 22.647 0 44.192 4.714 63.709 13.213l-1.031-0.4c20.173 8.702 37.436 20.354 52.139 34.629l-0.042-0.040c14.553 14.226 26.476 31.069 35.019 49.78l0.424 1.036c8.361 18.039 13.239 39.153 13.239 61.406 0 0.18 0 0.36-0.001 0.541v-0.028 608.507z" />
+<glyph unicode="&#xe907;" glyph-name="Back" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512c282.77 0 512 229.23 512 512v0c0 282.77-229.23 512-512 512v0zM512-10.105c-253.005 0-458.105 205.101-458.105 458.105s205.101 458.105 458.105 458.105c253.005 0 458.105-205.101 458.105-458.105v0c-0.307-252.881-205.224-457.799-458.076-458.105h-0.030zM503.916 617.768l-37.726 37.726-201.566-201.027h0.539l-6.467-7.006 207.495-206.956 37.726 37.726-142.282 142.821h392.893v53.895h-392.893l142.282 142.821z" />
+<glyph unicode="&#xe908;" glyph-name="Bento" d="M0 550.4h204.8v-204.8h-204.8v204.8zM819.2 140.8h204.8v-204.8h-204.8v204.8zM819.2 550.4h204.8v-204.8h-204.8v204.8zM409.6 960h204.8v-204.8h-204.8v204.8zM819.2 960h204.8v-204.8h-204.8v204.8zM409.6 140.8h204.8v-204.8h-204.8v204.8zM0 960h204.8v-204.8h-204.8v204.8zM0 140.8h204.8v-204.8h-204.8v204.8zM409.6 550.4h204.8v-204.8h-204.8v204.8z" />
+<glyph unicode="&#xe909;" glyph-name="Blue" d="M118.154 960h787.692v-1024h-787.692v1024z" />
+<glyph unicode="&#xe90a;" glyph-name="Bold" d="M137.216 109.056v676.864h-26.624c-3.83-0.424-8.271-0.665-12.769-0.665-27.591 0-53.058 9.093-73.568 24.447l0.32-0.23c-15.249 15.049-24.695 35.946-24.695 59.049 0 1.562 0.043 3.113 0.128 4.653l-0.009-0.214c-0.047 1.041-0.073 2.262-0.073 3.49 0 23.583 9.842 44.866 25.642 59.968l0.031 0.030c20.166 15.068 45.587 24.126 73.125 24.126 4.179 0 8.309-0.209 12.381-0.616l-0.514 0.042h417.792c4.64 0.231 10.076 0.362 15.542 0.362 86.37 0 165.079-32.801 224.349-86.625l-0.276 0.247c56.050-50.453 91.137-123.251 91.137-204.244 0-0.195 0-0.391-0.001-0.586v0.030c-0.468-37.088-8.332-72.217-22.179-104.149l0.675 1.749c-15.944-35.972-37.7-66.582-64.4-92.054l-0.112-0.106c49.075-30.085 89.078-70.416 117.908-118.242l0.876-1.566c24.487-40.895 38.967-90.219 38.967-142.925 0-1.953-0.020-3.902-0.059-5.845l0.005 0.291c0.004-0.578 0.007-1.263 0.007-1.947 0-44.096-10.598-85.717-29.386-122.454l0.706 1.521c-12.878-27.071-30.48-49.914-51.954-68.381l-0.27-0.227c-29.075-24.431-63.050-44.226-100.083-57.635l-2.317-0.733c-39.593-13.174-85.175-20.774-132.532-20.774-5.608 0-11.192 0.107-16.749 0.318l0.801-0.024h-488.448c-3.467-0.347-7.494-0.546-11.566-0.546-28.12 0-54.034 9.445-74.742 25.337l0.292-0.215c-15.221 15.044-24.648 35.923-24.648 59.003 0 1.217 0.026 2.429 0.078 3.633l-0.006-0.172c-0.044 1-0.069 2.173-0.069 3.352 0 23.305 9.855 44.308 25.624 59.070l0.045 0.042c20.396 15.625 46.269 25.039 74.341 25.039 3.75 0 7.46-0.168 11.124-0.497l-0.473 0.034zM307.2 535.040h178.176c2.88-0.117 6.261-0.184 9.657-0.184 57.804 0 111.097 19.312 153.779 51.837l-0.62-0.453c26.764 18.735 44.049 49.423 44.049 84.148 0 0.657-0.006 1.312-0.018 1.966l0.001-0.098c0.003 0.303 0.005 0.662 0.005 1.020 0 33.388-15.979 63.044-40.707 81.737l-0.258 0.187c-31.061 19.973-68.981 31.841-109.673 31.841-7.537 0-14.98-0.407-22.306-1.201l0.907 0.080h-212.992zM307.2 109.056h286.72c5.27-0.404 11.412-0.634 17.609-0.634 44.765 0 86.724 12.019 122.824 33.006l-1.169-0.627c19.422 14.527 31.86 37.47 31.86 63.317 0 1.501-0.042 2.992-0.125 4.472l0.009-0.205c-4.398 43.062-27.977 79.841-61.937 102.076l-0.527 0.324c-44.809 32.368-100.843 51.771-161.409 51.771-6.259 0-12.47-0.207-18.626-0.615l0.836 0.044h-216.064z" />
+<glyph unicode="&#xe90b;" glyph-name="Bullets" d="M341.333 917.333h853.333v-85.333h-853.333v85.333zM341.333 490.667h853.333v-85.333h-853.333v85.333zM341.333 64h853.333v-85.333h-853.333v85.333zM170.667 874.667c0-47.128-38.205-85.333-85.333-85.333s-85.333 38.205-85.333 85.333c0 47.128 38.205 85.333 85.333 85.333s85.333-38.205 85.333-85.333zM170.667 448c0-47.128-38.205-85.333-85.333-85.333s-85.333 38.205-85.333 85.333c0 47.128 38.205 85.333 85.333 85.333s85.333-38.205 85.333-85.333zM170.667 21.333c0-47.128-38.205-85.333-85.333-85.333s-85.333 38.205-85.333 85.333c0 47.128 38.205 85.333 85.333 85.333s85.333-38.205 85.333-85.333z" />
+<glyph unicode="&#xe911;" glyph-name="Calendar" d="M837.818 890.182v46.545h-46.545v-46.545h-558.545v46.545h-46.545v-46.545h-186.182v-930.909h1024v930.909zM977.455 5.818h-930.909v651.636h930.909zM46.545 704v139.636h139.636v-46.545h46.545v46.545h558.545v-46.545h46.545v46.545h139.636v-139.636zM744.727 564.364h93.091v-93.091h-93.091v93.091zM558.545 564.364h93.091v-93.091h-93.091v93.091zM372.364 564.364h93.091v-93.091h-93.091v93.091zM744.727 378.182h93.091v-93.091h-93.091v93.091zM558.545 378.182h93.091v-93.091h-93.091v93.091zM372.364 378.182h93.091v-93.091h-93.091v93.091zM186.182 378.182h93.091v-93.091h-93.091v93.091zM558.545 192h93.091v-93.091h-93.091v93.091zM372.364 192h93.091v-93.091h-93.091v93.091zM186.182 192h93.091v-93.091h-93.091v93.091z" />
+<glyph unicode="&#xe912;" glyph-name="Centre-aligned" d="M1102.769 960v-78.769h-1102.769v78.769zM157.538 723.692v-78.769h787.692v78.769zM0 408.615h1102.769v78.769h-1102.769zM157.538 251.077v-78.769h787.692v78.769zM0-64h1102.769v78.769h-1102.769z" />
+<glyph unicode="&#xe913;" glyph-name="Checkbox-Composite" d="M889.6 625.067l-29.867 29.867-454.4-453.973-198.4 197.973-29.867-29.867 228.267-228.693 484.267 484.693zM0 960v-1024h1024v1024zM981.333-21.333h-938.667v938.667h938.667z" />
+<glyph unicode="&#xe914;" glyph-name="Checkbox" d="M0 960v-1024h1024v1024zM981.333-21.333h-938.667v938.667h938.667z" />
+<glyph unicode="&#xe915;" glyph-name="Copy" d="M219.429 960v-804.571h804.571v804.571zM950.857 228.571h-658.286v512h658.286zM731.429 82.286v-73.143h-658.286v512h73.143v219.429h-146.286v-804.571h804.571v146.286h-73.143z" />
+<glyph unicode="&#xe916;" glyph-name="Create-New" d="M1024 490.667h-469.333v469.333h-85.333v-469.333h-469.333v-85.333h469.333v-469.333h85.333v469.333h469.333v85.333z" />
+<glyph unicode="&#xe917;" glyph-name="Decr-Indent" d="M0 960h1102.769v-78.769h-1102.769v78.769zM0 644.923h551.385v-78.769h-551.385v78.769zM0 329.846h551.385v-78.769h-551.385v78.769zM0 14.769h1102.769v-78.769h-1102.769v78.769zM946.018 644.135l-44.111 44.111-240.246-240.246 240.246-240.246 44.111 44.111-157.538 156.751h314.289v78.769h-314.289l157.538 156.751z" />
+<glyph unicode="&#xe91c;" glyph-name="Delete" d="M180.706-3.765c0-33.267 26.968-60.235 60.235-60.235v0h542.118c33.267 0 60.235 26.968 60.235 60.235v0 783.059h-662.588zM662.588 628.706c0 16.634 13.484 30.118 30.118 30.118s30.118-13.484 30.118-30.118v0-542.118c0-16.634-13.484-30.118-30.118-30.118s-30.118 13.484-30.118 30.118v0zM481.882 628.706c0 16.634 13.484 30.118 30.118 30.118s30.118-13.484 30.118-30.118v0-542.118c0-16.634-13.484-30.118-30.118-30.118s-30.118 13.484-30.118 30.118v0zM301.176 628.706c0 16.634 13.484 30.118 30.118 30.118s30.118-13.484 30.118-30.118v0-542.118c0-16.634-13.484-30.118-30.118-30.118s-30.118 13.484-30.118 30.118v0zM875.219 899.765h-272.866v17.468c0 23.62-19.147 42.767-42.767 42.767h-95.172c-23.62 0-42.767-19.147-42.767-42.767v0-17.468h-272.866c-15.636 0-28.311-12.675-28.311-28.311v-4.216c0.338-15.374 12.88-27.708 28.304-27.708 0.002 0 0.004 0 0.007 0h726.437c15.636 0 28.311 12.675 28.311 28.311v0 3.614c0 15.636-12.675 28.311-28.311 28.311v0z" />
+<glyph unicode="&#xe91d;" glyph-name="Dropdown-arrow" d="M1016.32 647.68l-508.16-508.16-508.16 508.16 120.96 120.32 384-384 384 384z" />
+<glyph unicode="&#xe91e;" glyph-name="Favorite-Composite" d="M1024 576.107h-392.007l-119.993 383.893-119.993-383.893h-392.007l315.997-242.976-123.837-397.131 319.84 245.965 319.84-245.965-123.837 397.131 315.997 242.976z" />
+<glyph unicode="&#xe91f;" glyph-name="Favorite" d="M512.427 816.947l79.426-253.651 9.394-29.892h298.916l-216.927-166.539-23.486-18.362 8.967-28.611 85.405-268.17-213.511 163.55-28.183 18.789-26.048-20.070-213.511-163.55 85.405 268.17 8.967 28.611-25.621 19.643-216.073 166.112h298.916l9.394 29.892 78.572 254.078zM512.427 960l-120.42-384.32h-392.007l315.997-242.976-123.837-397.558 320.267 246.819 319.413-246.819-123.837 397.131 316.851 243.403h-392.861l-119.566 384.32z" />
+<glyph unicode="&#xe920;" glyph-name="Flag_1" d="M150.588 960h60.235v-1024h-60.235v1024zM271.059 960v-542.118l602.353 271.059-602.353 271.059z" />
+<glyph unicode="&#xe921;" glyph-name="Font-Color-Icon" horiz-adv-x="1048" d="M0 40.811h1048.106v-104.811h-1048.106v104.811zM398.28 443.284h257.834l70.223-192.852h112.147l-264.123 709.568h-92.233l-266.219-709.568h112.147zM524.053 831.083l104.811-304.999h-209.621z" />
+<glyph unicode="&#xe923;" glyph-name="Font-Size" d="M374.784 893.44l-374.784-957.44h157.696l102.4 260.096h360.448l96.256-260.096h160.768l-371.712 957.44zM283.648 307.712l156.672 409.6 151.552-409.6zM944.128 960h-362.496l181.248-147.456 181.248 147.456z" />
+<glyph unicode="&#xe925;" glyph-name="Font" d="M1101.576-10.294c-31.485 33.127-56.299 72.925-72.076 117.023l-0.726 2.325-332.979 731.599h-25.063l-336.559-728.019c-19.338-49.445-46.409-91.852-80.168-127.923l0.205 0.221c-22.105-13.977-48.6-23.040-77.045-25.033l-0.531-0.030v-23.869h300.755v23.869c-0.963-0.017-2.098-0.027-3.236-0.027-31.443 0-61.132 7.506-87.375 20.823l1.101-0.507c-11.919 7.734-19.812 20.798-20.287 35.735l-0.002 0.069c3.054 28.845 11.535 55.13 24.415 78.664l-0.546-1.089 64.448 139.636h371.17l57.287-127.702c14.48-26.235 24.616-56.913 28.526-89.505l0.117-1.199c-0.056-15.463-8.050-29.046-20.118-36.893l-0.171-0.104c-20.643-11.351-45.239-18.029-71.395-18.029-2.174 0-4.336 0.046-6.487 0.137l0.307-0.010v-23.869h378.331v23.869c-0.24-0.001-0.523-0.002-0.807-0.002-34.271 0-65.927 11.198-91.508 30.134l0.417-0.295zM477.389 280.914l167.086 358.042 162.312-358.042zM447.552 416.97v0l51.319 106.219-184.988 436.811h-75.189l-238.695-543.030h97.865l60.867 147.991h226.76zM175.441 628.214l97.865 238.695 94.284-238.695z" />
+<glyph unicode="&#xe926;" glyph-name="Green" d="M118.154 960h787.692v-1024h-787.692v1024z" />
+<glyph unicode="&#xe927;" glyph-name="Help" d="M483.556 0.853h64.284v-63.716h-64.284v63.716zM793.6 748.373c-27.869 98.127-103.72 173.789-199.92 200.897l-2.036 0.49c-22.857 6.499-49.108 10.235-76.231 10.235s-53.374-3.737-78.266-10.723l2.035 0.488c-98.059-27.665-173.722-103.328-200.895-199.354l-0.491-2.032c-6.503-22.488-10.243-48.32-10.243-75.025 0-0.424 0.001-0.848 0.003-1.272v0.065h64.284c-0.004 0.516-0.007 1.127-0.007 1.738 0 30.84 6.492 60.164 18.184 86.679l-0.542-1.377c23.483 53.547 65.35 95.414 117.439 118.325l1.459 0.572c25.212 11.15 54.614 17.641 85.533 17.641 0.53 0 1.059-0.002 1.588-0.006h-0.081c0.414 0.003 0.902 0.004 1.392 0.004 30.958 0 60.4-6.49 87.040-18.185l-1.392 0.545c53.777-23.371 95.853-65.262 118.893-117.442l0.573-1.455c11.15-25.248 17.64-54.69 17.64-85.648 0-0.489-0.002-0.978-0.005-1.467v0.075c0.016-0.89 0.025-1.939 0.025-2.991 0-22.193-3.971-43.458-11.242-63.123l0.408 1.261c-7.902-20.633-17.673-38.465-29.481-54.72l0.468 0.676c-12.796-17.977-26.247-33.775-40.933-48.329l-0.027-0.026-47.218-44.942q-23.893-22.756-47.218-46.080c-14.956-15.37-28.457-32.306-40.188-50.491l-0.772-1.277c-11.482-17.834-21.318-38.357-28.469-60.099l-0.544-1.91c-6.873-21.585-10.834-46.412-10.834-72.164 0-1.23 0.009-2.458 0.027-3.684l-0.002 0.185v-96.142h64.284v96.711c-0.016 0.89-0.025 1.939-0.025 2.991 0 22.193 3.971 43.458 11.242 63.123l-0.408-1.261c7.909 20.634 17.68 38.464 29.483 54.724l-0.47-0.679c11.96 17.641 24.494 33.065 38.223 47.33l-0.107-0.112 47.218 44.942q23.893 22.756 47.218 46.649c14.882 15.547 28.383 32.664 40.155 50.998l0.805 1.34c11.495 17.835 21.333 38.36 28.473 60.107l0.541 1.902c6.873 21.585 10.834 46.412 10.834 72.164 0 1.23-0.009 2.458-0.027 3.684l0.002-0.185c0.121 3.104 0.19 6.748 0.19 10.408 0 23.149-2.765 45.653-7.984 67.198l0.398-1.944z" />
+<glyph unicode="&#xe928;" glyph-name="Highlight" d="M0 38.4h1024v-102.4h-1024v102.4zM512 154.112l126.976 33.792 263.168 280.576c6.106 6.59 10.976 14.426 14.18 23.070l0.156 0.482c0.798 4.156 1.254 8.937 1.254 13.824s-0.456 9.668-1.329 14.301l0.075-0.477c1.029 4.617 1.618 9.92 1.618 15.36s-0.589 10.743-1.707 15.848l0.090-0.488c-3.528 8.717-8.372 16.19-14.37 22.565l0.034-0.037c-5.94 6.394-13.087 11.574-21.091 15.193l-0.413 0.167c-7.475 3.708-16.253 5.955-25.537 6.143l-0.063 0.001c-0.183 0.002-0.399 0.003-0.615 0.003-9.029 0-17.617-1.885-25.394-5.282l0.409 0.159c-8.417-3.786-15.564-8.966-21.466-15.319l-0.038-0.041-264.192-284.672zM819.2 550.4h11.264l10.24 6.144h13.312c2.462 0.57 5.289 0.896 8.192 0.896s5.73-0.327 8.446-0.945l-0.254 0.049c5.067-1.378 9.502-3.484 13.452-6.237l-0.14 0.093c3.821-4.035 6.932-8.789 9.104-14.030l0.112-0.306c0.54-2.617 0.849-5.624 0.849-8.704s-0.309-6.087-0.898-8.993l0.049 0.289c0.374-2.155 0.587-4.637 0.587-7.168s-0.214-5.013-0.624-7.428l0.036 0.26c-1.654-4.301-3.723-8.019-6.233-11.389l0.089 0.125-8.192-10.24-9.216-10.24-58.368 62.464zM791.552 520.704l58.368-62.464-214.016-234.496c-4.515 15.071-11.905 28.089-21.597 39.019l0.093-0.107c-9.96 10.466-22.329 18.546-36.224 23.359l-0.64 0.193zM563.2 261.632l17.408-7.168c5.88-3.148 10.934-6.896 15.367-11.271l-0.007 0.007c4.319-4.451 8.061-9.499 11.082-14.999l0.182-0.361c2.998-5.305 5.458-11.446 7.062-17.925l0.106-0.507-65.536-17.408zM286.72 437.76h251.904l38.912-109.568 77.824 84.992-196.608 546.816h-90.112l-260.096-716.8h109.568zM409.6 829.952l102.4-307.2h-204.8z" />
+<glyph unicode="&#xe92b;" glyph-name="Hyperlink" d="M832 544h-128c0 106.039-85.961 192-192 192v0h-320c-106.039 0-192-85.961-192-192s85.961-192 192-192v0h128c0-106.039 85.961-192 192-192v0h320c106.039 0 192 85.961 192 192s-85.961 192-192 192v0zM192 416c-70.692 0-128 57.308-128 128s57.308 128 128 128v0h320c70.692 0 128-57.308 128-128v0h-128c-82.624-0.524-152.82-53.157-179.417-126.663l-0.423-1.337zM622.080 480c-22.415-38.313-63.249-63.708-110.038-64h-110.122c22.415 38.313 63.249 63.708 110.038 64h0.042zM832 224h-320c-70.692 0-128 57.308-128 128v0h128c82.624 0.524 152.82 53.157 179.417 126.663l0.423 1.337h140.16c70.692 0 128-57.308 128-128s-57.308-128-128-128v0z" />
+<glyph unicode="&#xe92c;" glyph-name="Incr-Indent" d="M0 960h1102.769v-78.769h-1102.769v78.769zM551.385 644.923h551.385v-78.769h-551.385v78.769zM551.385 329.846h551.385v-78.769h-551.385v78.769zM0 14.769h1102.769v-78.769h-1102.769v78.769zM156.751 251.865l44.111-44.111 240.246 240.246-240.246 240.246-44.111-44.111 157.538-156.751h-314.289v-78.769h314.289l-157.538-156.751z" />
+<glyph unicode="&#xe931;" glyph-name="Italic" d="M673.978 57.949c4.572 0.557 9.866 0.875 15.234 0.875 21.585 0 41.97-5.137 60-14.256l-0.761 0.349c9.309-8.378 12.102-24.204 8.378-46.545-2.336-19.533-11.926-36.471-25.955-48.316l-0.111-0.091c-19.135-9.206-41.603-14.585-65.328-14.585-4.858 0-9.664 0.226-14.407 0.667l0.608-0.046h-510.138c-1.336-0.133-2.887-0.21-4.456-0.21-14.138 0-26.833 6.18-35.53 15.986l-0.043 0.049c-5.165 8.39-8.225 18.555-8.225 29.435 0 6.111 0.965 11.996 2.752 17.512l-0.113-0.402c1.872 19.093 11.617 35.596 25.901 46.426l0.165 0.12c19.31 8.591 41.839 13.594 65.537 13.594 4.784 0 9.52-0.204 14.201-0.603l-0.61 0.042h171.287l153.6 777.309h-175.942c-3.503-0.342-7.572-0.537-11.687-0.537-21.591 0-41.928 5.365-59.752 14.835l0.69-0.335c-10.24 9.309-13.033 25.135-9.309 48.407 1.687 18.534 9.532 34.972 21.443 47.51l-0.032-0.034c11.989 9.347 27.266 14.986 43.861 14.986 1.272 0 2.536-0.033 3.791-0.099l-0.176 0.007h545.513c1.311 0.134 2.834 0.21 4.374 0.21 13.877 0 26.306-6.196 34.672-15.973l0.052-0.062c5.815-9.039 9.271-20.075 9.271-31.918 0-5.196-0.665-10.237-1.915-15.042l0.091 0.414c-1.811-19.675-11.539-36.776-25.927-48.3l-0.138-0.107c-18.899-8.676-41.002-13.734-64.287-13.734-5.226 0-10.392 0.255-15.487 0.753l0.646-0.051h-174.080l-154.531-778.24z" />
+<glyph unicode="&#xe932;" glyph-name="Left-aligned" d="M1024 923.429v-73.143h-1024v73.143zM731.429 704h-731.429v-73.143h731.429zM0 411.429h1024v73.143h-1024zM731.429 265.143h-731.429v-73.143h731.429zM0-27.429h1024v73.143h-1024z" />
+<glyph unicode="&#xe933;" glyph-name="Like" d="M475.352 1.213c60.912 0.139 118.874 12.609 171.573 35.044l-2.882-1.090c58.106 24.879 125.722 39.343 196.716 39.343 0.189 0 0.378 0 0.568 0h182.674v365.945h-164.918c-0.447-0.003-0.975-0.005-1.503-0.005-34.681 0-67.696 7.137-97.655 20.022l1.608-0.615c-17.008 7.035-31.54 14.801-45.193 23.793l1-0.618c-14.77 9.701-27.642 20.175-39.357 31.811l0.014-0.014-354.627 356.783-6.467 7.545c-0.878 0.356-1.897 0.563-2.964 0.563s-2.086-0.207-3.019-0.582l0.054 0.019c-0.163 0.005-0.355 0.008-0.547 0.008-9.823 0-17.785-7.963-17.785-17.785 0-0.192 0.003-0.384 0.009-0.575l-0.001 0.028c-0.003-0.508-0.005-1.109-0.005-1.711 0-24.82 2.949-48.95 8.514-72.062l-0.425 2.092c5.719-25.854 13.508-48.529 23.499-69.971l-0.863 2.063c7.138-14.639 14.265-32.484 20.179-50.873l0.84-3.021c4.663-13.467 8.959-29.954 12.063-46.858l0.333-2.186c2.714-14.405 4.826-31.8 5.873-49.482l0.056-1.179q0-25.869 0-53.895h-326.063c-10.296-0.122-19.506-4.667-25.837-11.82l-0.032-0.037c-6.651-6.386-10.784-15.352-10.784-25.284 0-0.206 0.002-0.412 0.005-0.617v0.031c1.648-8.589 3.698-16.004 6.264-23.173l-0.336 1.076q5.928-19.402 15.629-49.044l21.558-64.674 25.331-77.069 26.408-78.147 24.253-70.602 18.324-53.895 10.779-30.72c2.541-7.557 7.243-13.826 13.366-18.25l0.108-0.074c5.81-4.308 13.101-6.925 21-7.006h0.019z" />
+<glyph unicode="&#xe934;" glyph-name="Mail" d="M981.333 768h-981.333v-640h1024v640zM938.667 725.333l-426.667-231.68-426.667 231.68zM42.667 170.667v530.347l469.333-256 469.333 256v-530.347z" />
+<glyph unicode="&#xe935;" glyph-name="Mark-as-read" d="M754.526 582.737v53.895l-377.263 215.579-377.263-215.579v-538.947h269.474v-53.895h754.526v538.947zM921.6 528.842l-274.863-183.242-274.863 183.242zM269.474 465.785l-215.579 136.893v2.695l323.368 184.859 323.368-184.859v-2.695l-30.72-19.941h-400.438zM970.105 97.684h-646.737v398.821l323.368-215.579 323.368 215.579z" />
+<glyph unicode="&#xe936;" glyph-name="Menu" d="M1024 736v-64h-1024v64zM0 416h1024v64h-1024zM0 160h1024v64h-1024z" />
+<glyph unicode="&#xe937;" glyph-name="More2" d="M113.778 448c0-31.419-25.47-56.889-56.889-56.889s-56.889 25.47-56.889 56.889c0 31.419 25.47 56.889 56.889 56.889s56.889-25.47 56.889-56.889zM568.889 448c0-31.419-25.47-56.889-56.889-56.889s-56.889 25.47-56.889 56.889c0 31.419 25.47 56.889 56.889 56.889s56.889-25.47 56.889-56.889zM1024 448c0-31.419-25.47-56.889-56.889-56.889s-56.889 25.47-56.889 56.889c0 31.419 25.47 56.889 56.889 56.889s56.889-25.47 56.889-56.889z" />
+<glyph unicode="&#xe938;" glyph-name="New" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512c282.77 0 512 229.23 512 512v0c0 282.77-229.23 512-512 512v0zM512-10.105c-253.005 0-458.105 205.101-458.105 458.105s205.101 458.105 458.105 458.105c253.005 0 458.105-205.101 458.105-458.105v0c-0.307-252.881-205.224-457.799-458.076-458.105h-0.030zM538.947 636.632h-53.895v-161.684h-161.684v-53.895h161.684v-161.684h53.895v161.684h161.684v53.895h-161.684v161.684z" />
+<glyph unicode="&#xe939;" glyph-name="Notification2" d="M903.529 176.941v-60.235h-783.059v60.235l60.235 60.235v331.294c0.811 166.618 124.049 304.208 284.326 327.467l1.792 0.213v18.673c0 24.95 20.226 45.176 45.176 45.176s45.176-20.226 45.176-45.176v0-18.673c162.069-23.473 285.307-161.063 286.117-327.596v-331.378zM421.647 26.353c0-49.901 40.452-90.353 90.353-90.353s90.353 40.452 90.353 90.353v0 30.118h-180.706z" />
+<glyph unicode="&#xe93a;" glyph-name="Numbering" d="M315.077 881.231h787.692v-78.769h-787.692v78.769zM315.077 487.385h787.692v-78.769h-787.692v78.769zM315.077 93.538h787.692v-78.769h-787.692v78.769zM78.769 960h78.769v-236.308h-78.769v236.308zM39.385 172.308v-59.077h78.769v-32.295h-39.385v-43.323h39.385v-42.535h-78.769v-59.077h157.538v236.308h-157.538zM157.538 507.077v59.077h-157.538v-59.077h78.769v-177.231h157.538v59.077h-78.769v118.154z" />
+<glyph unicode="&#xe940;" glyph-name="Orange" d="M118.154 960h787.692v-1024h-787.692v1024z" />
+<glyph unicode="&#xe941;" glyph-name="People" d="M845.265 582.516c24.558-13.074 45.685-28.559 64.304-46.614l-0.071 0.069c17.674-17.083 33.079-36.339 45.833-57.381l0.713-1.266c12.728-20.085 23.352-43.253 30.68-67.842l0.506-1.977c7.588-22.334 12.447-48.12 13.482-74.887l0.016-0.516h-69.818c0.001 0.186 0.001 0.406 0.001 0.626 0 29.067-6.168 56.694-17.266 81.643l0.509-1.28c-21.874 50.165-61.079 89.37-109.881 110.712l-1.363 0.531c-23.953 10.512-51.873 16.63-81.222 16.63s-57.269-6.118-82.554-17.148l1.332 0.518c-50.165-21.874-89.37-61.079-110.712-109.881l-0.531-1.363c-10.59-23.669-16.757-51.296-16.757-80.363 0-0.22 0-0.44 0.001-0.66v0.034c-0.663-68.779-34.156-129.599-85.537-167.625l-0.572-0.404c69.351-35.524 121.198-96.932 143.315-171.153l0.51-1.996c7.192-23.084 11.431-49.641 11.636-77.159l0.001-0.107h-69.818c0.001 0.214 0.001 0.468 0.001 0.723 0 29.034-6.168 56.628-17.265 81.542l0.508-1.276c-21.874 50.165-61.079 89.37-109.881 110.712l-1.363 0.531c-23.957 10.487-51.877 16.589-81.222 16.589s-57.265-6.102-82.559-17.108l1.337 0.518c-50.165-21.874-89.37-61.079-110.712-109.881l-0.531-1.363c-10.59-23.638-16.758-51.232-16.758-80.267 0-0.254 0-0.508 0.001-0.762v0.039h-70.284c-0.002 0.432-0.004 0.943-0.004 1.454 0 27.008 3.912 53.102 11.2 77.747l-0.491-1.936c22.89 76.211 74.857 137.585 142.696 172.405l1.595 0.744c-51.65 38.552-84.827 99.38-85.178 167.973v0.056c-0.001 0.186-0.001 0.406-0.001 0.626 0 29.067 6.168 56.694 17.266 81.643l-0.509-1.28c21.781 50.352 61.006 89.728 109.883 111.177l1.36 0.532c23.383 10.304 50.647 16.302 79.311 16.302 0.754 0 1.506-0.004 2.258-0.012l-0.115 0.001c68.807-0.274 129.805-33.463 168.101-84.628l0.394-0.55c27.974 54.45 71.223 97.699 124.074 124.924l1.599 0.749c-51.892 38.734-85.14 99.96-85.178 168.954v0.006c-0.001 0.186-0.001 0.406-0.001 0.626 0 29.067 6.168 56.694 17.266 81.643l-0.509-1.28c21.781 50.352 61.006 89.728 109.883 111.177l1.36 0.532c23.953 10.512 51.873 16.63 81.222 16.63s57.269-6.118 82.554-17.148l-1.332 0.518c50.165-21.874 89.37-61.079 110.712-109.881l0.531-1.363c10.59-23.669 16.757-51.296 16.757-80.363 0-0.22 0-0.44-0.001-0.66v0.034c-0.274-68.807-33.463-129.805-84.628-168.101l-0.55-0.394zM302.545 192.931c0.124 0 0.271-0.001 0.417-0.001 19.378 0 37.796 4.112 54.429 11.511l-0.853-0.339c18.060 7.201 33.522 17.283 46.594 29.835l-0.048-0.046c12.259 12.421 22.292 27.075 29.426 43.293l0.363 0.925c7.017 15.918 11.102 34.478 11.102 53.993s-4.085 38.074-11.446 54.872l0.344-0.88c-14.453 33.708-40.765 60.020-73.565 74.126l-0.908 0.347c-15.914 7.043-34.475 11.143-53.993 11.143s-38.079-4.1-54.867-11.486l0.874 0.343c-33.52-14.547-59.66-40.839-73.661-73.562l-0.346-0.91c-7.043-15.914-11.143-34.475-11.143-53.993s4.1-38.079 11.486-54.867l-0.343 0.874c14.685-33.286 40.721-59.323 73.097-73.648l0.91-0.359c15.34-6.893 33.234-10.986 52.063-11.17l0.068-0.001zM581.818 751.476c-0.003-0.346-0.005-0.755-0.005-1.165 0-19.282 4.114-37.604 11.512-54.134l-0.336 0.841c14.685-33.286 40.721-59.323 73.097-73.648l0.91-0.359c15.914-7.043 34.475-11.143 53.993-11.143s38.079 4.1 54.867 11.486l-0.874-0.343c33.634 14.347 59.925 40.488 74.123 73.106l0.349 0.901c7.017 15.918 11.102 34.478 11.102 53.993s-4.085 38.074-11.446 54.872l0.344-0.88c-14.453 33.708-40.765 60.020-73.565 74.126l-0.908 0.347c-15.914 7.043-34.475 11.143-53.993 11.143s-38.079-4.1-54.867-11.486l0.874 0.343c-33.52-14.547-59.66-40.839-73.661-73.562l-0.346-0.91c-7.062-15.72-11.175-34.074-11.175-53.389 0-0.376 0.002-0.751 0.005-1.126v0.057z" />
+<glyph unicode="&#xe942;" glyph-name="Pin" d="M975.787 682.667c-1.406 0.047-3.059 0.074-4.718 0.074-59.323 0-110.589-34.492-134.839-84.516l-0.39-0.892h-247.467c-14.507 96.853-85.333 170.667-167.68 170.667h-42.667v-298.667h-341.333l-36.693-21.333 37.12-21.333h341.333v-298.667h42.667c85.333 0 153.173 73.813 167.68 170.667h247.467c24.639-50.915 75.906-85.408 135.229-85.408 1.659 0 3.312 0.027 4.958 0.081l-0.24-0.006h42.667v469.333z" />
+<glyph unicode="&#xe943;" glyph-name="Purple" d="M118.154 960h787.692v-1024h-787.692v1024z" />
+<glyph unicode="&#xe945;" glyph-name="Red" d="M118.154 960h787.692v-1024h-787.692v1024z" />
+<glyph unicode="&#xe946;" glyph-name="Reply-All" d="M904.237 451.117c-0.253 165.872-134.65 300.269-300.497 300.522h-362.431l161.169 161.169-47.193 47.193-243.979-243.979 243.979-245.76 47.193 48.974-165.621 165.621h366.859c128.736-0.469 232.915-104.937 232.915-233.738 0-99.353-61.988-184.229-149.399-218.060l-1.596-0.543c-40.939 63.066-111.018 104.195-190.703 104.195-0.886 0-1.772-0.005-2.656-0.015l0.135 0.001h-280.042l117.983 117.983-31.61 31.61-171.854-173.19 171.409-171.409 31.61 31.61-117.537 118.873h280.042c3.060 0.198 6.634 0.311 10.234 0.311 88.668 0 161.32-68.572 167.819-155.578l0.034-0.56c-6.533-87.566-79.185-156.138-167.853-156.138-3.601 0-7.175 0.113-10.719 0.336l0.485-0.024v-44.522c3.029-0.154 6.577-0.242 10.146-0.242 113.234 0 205.812 88.435 212.435 200.006l0.028 0.584c-0.114 12.835-1.568 25.268-4.228 37.247l0.221-1.184c113.335 44.191 192.35 152.111 193.224 278.598l0.001 0.109z" />
+<glyph unicode="&#xe947;" glyph-name="Reply" horiz-adv-x="1035" d="M625.152 755.2h-528.384l156.672 166.4-36.352 38.4-180.736-192-36.352-38.4 217.088-230.4 36.352 38.4-156.672 166.4h528.384c197.939 0 358.4-160.461 358.4-358.4s-160.461-358.4-358.4-358.4v0h-614.4v-51.2h614.4c226.216 0 409.6 183.384 409.6 409.6s-183.384 409.6-409.6 409.6v0z" />
+<glyph unicode="&#xe948;" glyph-name="Right-aligned" d="M1024 923.429v-73.143h-1024v73.143zM292.571 630.857h731.429v73.143h-731.429zM0 411.429h1024v73.143h-1024zM292.571 192h731.429v73.143h-731.429zM0-27.429h1024v73.143h-1024z" />
+<glyph unicode="&#xe949;" glyph-name="Right" d="M1035.171 762.647l-680.495-680.495-354.676 354.676 57.716 57.716 296.96-296.96 622.778 622.778z" />
+<glyph unicode="&#xe94a;" glyph-name="Search2" d="M708.482 960c-173.698-0.737-314.222-141.716-314.222-315.516 0-76.521 27.241-146.68 72.554-201.309l-0.42 0.522-466.393-467.541 40.731-40.731 465.82 466.393c54.249-45.331 124.74-72.856 201.66-72.856 174.256 0 315.518 141.262 315.518 315.518 0 174.16-141.108 315.363-315.232 315.518h-0.015zM708.482 386.331c-142.573 0-258.151 115.578-258.151 258.151s115.578 258.151 258.151 258.151c142.573 0 258.151-115.578 258.151-258.151v0c-0.326-142.442-115.709-257.826-258.12-258.151h-0.031z" />
+<glyph unicode="&#xe94b;" glyph-name="Send" d="M341.333 686.933v-477.867h682.667v477.867zM976.213 639.147l-293.547-164.523-293.547 164.523zM980.992 256.853h-596.651v331.776l298.325-167.253 299.008 167.253zM238.933 618.667h-204.8c-18.851 0-34.133-15.282-34.133-34.133s15.282-34.133 34.133-34.133v0h204.8c18.851 0 34.133 15.282 34.133 34.133s-15.282 34.133-34.133 34.133v0zM238.933 482.133h-136.533c-18.851 0-34.133-15.282-34.133-34.133s15.282-34.133 34.133-34.133v0h136.533c18.851 0 34.133 15.282 34.133 34.133s-15.282 34.133-34.133 34.133v0zM238.933 345.6h-68.267c-18.851 0-34.133-15.282-34.133-34.133s15.282-34.133 34.133-34.133v0h68.267c18.851 0 34.133 15.282 34.133 34.133s-15.282 34.133-34.133 34.133v0z" />
+<glyph unicode="&#xe94c;" glyph-name="Settings" d="M893.852 438.98q0 4.725 0 9.020t0 9.020c0 3.007 0 6.013 0 9.020l128.859 80.752-77.745 192.859-149.477-34.362q-12.027 12.886-24.913 25.342l34.362 149.477-194.148 79.893-80.752-128.859h-36.081l-81.181 128.859-192.43-79.893 34.362-149.477q-12.886-12.027-24.913-25.342l-149.477 34.362-80.322-192.43 128.859-81.181c0-3.007 0-6.013 0-9.020s0-6.013 0-9.020 0-6.013 0-9.020 0-6.013 0-9.020l-128.859-80.752 79.893-192.43 149.477 34.362q12.027-12.886 24.913-25.342l-33.933-150.765 192.43-79.893 80.752 128.859h36.081l80.752-128.859 193.289 79.893-34.362 149.477q12.886 12.027 24.913 25.342l149.477-34.362 79.893 192.43-128.859 81.181c-1.289 3.866-0.859 6.872-0.859 9.879zM512 190.282c-142.334 0-257.718 115.384-257.718 257.718s115.384 257.718 257.718 257.718c142.334 0 257.718-115.384 257.718-257.718v0c0-142.334-115.384-257.718-257.718-257.718v0zM619.383 448c0-59.306-48.077-107.383-107.383-107.383s-107.383 48.077-107.383 107.383c0 59.306 48.077 107.383 107.383 107.383s107.383-48.077 107.383-107.383z" />
+<glyph unicode="&#xe94d;" glyph-name="Underlined" d="M173.149 858.531h13.033v-442.182c-0.13-3.329-0.204-7.237-0.204-11.163 0-86.221 35.737-164.095 93.207-219.618l0.088-0.084c58.486-53.377 136.645-86.071 222.441-86.071 5.91 0 11.784 0.155 17.618 0.462l-0.816-0.034c7.576-0.621 16.398-0.976 25.304-0.976 85.851 0 164.012 32.922 222.548 86.829l-0.231-0.21c52.146 61.83 83.837 142.394 83.837 230.36 0 9.351-0.358 18.618-1.061 27.788l0.075-1.217v416.116h10.24c3.255-0.331 7.033-0.52 10.856-0.52 15.912 0 31.059 3.272 44.806 9.181l-0.739-0.282c10.539 8.253 17.25 20.978 17.25 35.27 0 2.336-0.179 4.631-0.525 6.87l0.032-0.25c0.105 1.194 0.165 2.584 0.165 3.988 0 13.342-5.398 25.424-14.129 34.18l0.001-0.001c-10.119 8.187-23.144 13.144-37.328 13.144-1.278 0-2.546-0.040-3.804-0.119l0.172 0.009h-203.869c-3.566 0.344-7.709 0.54-11.898 0.54-19.643 0-38.278-4.315-55.009-12.048l0.813 0.337c-9.915-8.255-16.18-20.602-16.18-34.412 0-1.98 0.129-3.93 0.379-5.843l-0.024 0.225c-0.345-1.998-0.543-4.299-0.543-6.645 0-14.923 7.98-27.982 19.906-35.142l0.185-0.103c19.308-7.414 41.644-11.709 64.984-11.709 4.978 0 9.91 0.195 14.789 0.579l-0.645-0.041h40.029v-400.291c0.61-7.293 0.958-15.784 0.958-24.356 0-62.959-18.769-121.534-51.017-170.435l0.72 1.162c-35.272-37.756-85.358-61.289-140.94-61.289-6.096 0-12.126 0.283-18.077 0.837l0.762-0.057c-0.801-0.010-1.746-0.016-2.693-0.016-37.365 0-72.64 8.949-103.798 24.82l1.299-0.601c-30.66 15.412-55.608 38.27-73.099 66.265l-0.443 0.76c-11.63 18.738-20.639 40.528-25.804 63.764l-0.261 1.4c-5.454 29.653-8.574 63.776-8.574 98.628 0 5.255 0.071 10.493 0.212 15.713l-0.016-0.77v387.258h32.582c5.843-0.714 12.607-1.122 19.467-1.122 20.043 0 39.273 3.48 57.119 9.87l-1.183-0.37c12.081 7.492 20.006 20.68 20.006 35.72 0 2.178-0.166 4.316-0.486 6.404l0.029-0.233c0.209 1.604 0.328 3.46 0.328 5.344 0 14.081-6.651 26.608-16.984 34.611l-0.1 0.075c-18.659 7.496-40.292 11.844-62.94 11.844-5.371 0-10.685-0.245-15.932-0.723l0.675 0.050h-186.182c-2.651 0.382-5.711 0.6-8.823 0.6-14.548 0-27.983-4.768-38.828-12.826l0.174 0.124c-8.777-8.763-14.206-20.876-14.206-34.257 0-1.705 0.088-3.389 0.26-5.049l-0.017 0.208c-0.361-2.111-0.567-4.543-0.567-7.023 0-14.187 6.752-26.796 17.218-34.791l0.106-0.078c13.949-5.966 30.179-9.435 47.22-9.435 5.671 0 11.251 0.384 16.718 1.128l-0.636-0.071zM93.091 29.091h837.818v-93.091h-837.818v93.091z" />
+<glyph unicode="&#xe94e;" glyph-name="Undo" d="M790.528 851.968c-66.951 66.763-159.343 108.045-261.376 108.045s-194.426-41.281-261.385-108.053l-114.167-114.167v219.648h-51.2v-307.2h307.2v51.2h-219.648l114.176 114.176c56.632 52.581 132.763 84.846 216.43 84.846 175.883 0 318.464-142.581 318.464-318.464 0-83.667-32.264-159.798-85.030-216.63l0.184 0.201-468.48-395.776 36.352-36.352 468.48 395.776c66.641 67.007 107.834 159.381 107.834 261.376s-41.193 194.369-107.85 261.392l0.016-0.016z" />
+<glyph unicode="&#xe94f;" glyph-name="Yellow" d="M118.154 960h787.692v-1024h-787.692v1024z" />
+<glyph unicode="&#xe950;" glyph-name="Close" d="M571.577 448.448l447.944-453.319-59.129-59.129-453.319 447.944-453.319-447.944-53.753 59.129 447.944 453.319-447.944 452.423 59.129 59.129 452.423-447.944 453.319 447.944 59.129-59.129z" />
+<glyph unicode="&#xe951;" glyph-name="Notify" horiz-adv-x="861" d="M593.031 27.787h-325.557c-207.238 0-317.669 48.045-245.244 111.148s132.661 263.171 132.661 445.311c-0.385 5.839-0.604 12.659-0.604 19.53 0 148.4 102.219 272.925 240.089 307.007l2.173 0.454c7.888 29.401 20.078 48.762 33.703 48.762s25.815-19.361 33.703-48.762c140.043-34.536 242.262-159.062 242.262-307.462 0-6.871-0.219-13.691-0.651-20.453l0.047 0.923c0-182.14 59.518-382.924 131.944-445.311s-37.289-111.148-244.527-111.148zM430.252-64c36.522 0.405 65.972 30.106 65.972 66.685 0 0.001 0 0.003 0 0.004v0h-131.944c0-0.001 0-0.003 0-0.004 0-36.579 29.45-66.28 65.934-66.685h0.038z" />
+<glyph unicode="&#xe952;" glyph-name="Help-white" horiz-adv-x="734" d="M464.896 148.309h-191.829c-6.409 0-11.605-5.196-11.605-11.605v0-189.781c0.371-6.109 5.416-10.923 11.585-10.923 0.007 0 0.014 0 0.021 0h191.828c0.41-0.051 0.884-0.081 1.366-0.081 6.409 0 11.605 5.196 11.605 11.605 0 0.028 0 0.057 0 0.085v-0.004 189.781c-0.328 6.146-5.391 11.005-11.59 11.005-0.487 0-0.966-0.030-1.437-0.088l0.056 0.006zM633.515 871.936c-66.906 55.131-153.486 88.562-247.875 88.562-6.94 0-13.838-0.181-20.689-0.538l0.959 0.040c-4.928 0.23-10.706 0.361-16.514 0.361-92.427 0-177.11-33.156-242.805-88.222l0.588 0.48c-61.539-51.913-101.875-127.274-107.136-212.133l-0.043-0.859c-0.001-0.054-0.001-0.118-0.001-0.182 0-5.686 4.089-10.417 9.487-11.413l0.071-0.011 174.763-22.528c5.294 0.169 9.68 3.858 10.906 8.795l0.017 0.080c7.928 48.14 31.276 89.8 64.713 120.704l0.141 0.128c29.263 24.271 67.204 38.998 108.584 38.998 1.906 0 3.805-0.031 5.697-0.093l-0.276 0.007c1.687 0.063 3.669 0.099 5.659 0.099 40.424 0 77.4-14.763 105.831-39.191l-0.216 0.181c24.685-20.557 40.282-51.3 40.282-85.686 0-0.356-0.002-0.712-0.005-1.067v0.054c0.022-0.81 0.035-1.762 0.035-2.718 0-24.826-8.495-47.668-22.736-65.777l0.174 0.229c-29.57-30.033-61.453-57.585-95.433-82.441l-2.189-1.527c-45.51-34.008-83.314-75.511-112.24-123.014l-1.083-1.914c-18.243-38.594-28.893-83.84-28.893-131.574 0-4.145 0.080-8.271 0.239-12.377l-0.018 0.591c0-5.461 0-20.48 0-45.739 0.371-6.109 5.416-10.923 11.585-10.923 0.007 0 0.014 0 0.021 0h172.031c6.409 0 11.605 5.196 11.605 11.605v0c-0.566 6.467-0.888 13.991-0.888 21.591 0 29.385 4.822 57.643 13.719 84.027l-0.542-1.853c19.303 30.392 43.156 55.984 70.922 76.603l0.758 0.538c58.896 44.972 109.728 96.237 152.836 153.635l1.447 2.013c23.278 35.245 37.247 78.425 37.546 124.85v0.078c-1.442 83.685-40.312 158.009-100.541 207.14l-0.493 0.39z" />
+</font></defs></svg>

src/assets/Outlook Icons/style.css

@@ -0,0 +1,229 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('fonts/icomoon.eot?rjjyu7');
+  src:  url('fonts/icomoon.eot?rjjyu7#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?rjjyu7') format('truetype'),
+    url('fonts/icomoon.woff?rjjyu7') format('woff'),
+    url('fonts/icomoon.svg?rjjyu7#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="ej-icon-"], [class*=" ej-icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.ej-icon-More:before {
+  content: "\e701";
+}
+.ej-icon-Search:before {
+  content: "\e702";
+}
+.ej-icon-Notify:before {
+  content: "\e704";
+}
+.ej-icon-Help-white:before {
+  content: "\e703";
+}
+.ej-icon-Close:before {
+  content: "\e950";
+}
+.ej-icon-Agenda .path1:before {
+  content: "\e900";
+  color: rgb(0, 0, 0);
+}
+.ej-icon-Agenda .path2:before {
+  content: "\e901";
+  margin-left: -0.9931640625em;
+  color: rgb(0, 0, 0);
+}
+.ej-icon-Agenda .path3:before {
+  content: "\e902";
+  margin-left: -0.9931640625em;
+  color: rgb(255, 255, 255);
+}
+.ej-icon-Agenda .path4:before {
+  content: "\e903";
+  margin-left: -0.9931640625em;
+  color: rgb(0, 0, 0);
+}
+.ej-icon-Agenda .path5:before {
+  content: "\e904";
+  margin-left: -0.9931640625em;
+  color: rgb(255, 255, 255);
+}
+.ej-icon-Archive:before {
+  content: "\e905";
+}
+.ej-icon-Attach:before {
+  content: "\e906";
+}
+.ej-icon-Back:before {
+  content: "\e907";
+}
+.ej-icon-Bento:before {
+  content: "\e908";
+}
+.ej-icon-Blue:before {
+  content: "\e909";
+  color: #55abe5;
+}
+.ej-icon-Bold:before {
+  content: "\e90a";
+}
+.ej-icon-Bullets:before {
+  content: "\e90b";
+}
+.ej-icon-Calendar:before {
+  content: "\e911";
+}
+.ej-icon-Centre-aligned:before {
+  content: "\e912";
+}
+.ej-icon-Checkbox-Composite:before {
+  content: "\e913";
+}
+.ej-icon-Checkbox:before {
+  content: "\e914";
+}
+.ej-icon-Copy:before {
+  content: "\e915";
+}
+.ej-icon-Create-New:before {
+  content: "\e916";
+}
+.ej-icon-Decr-Indent:before {
+  content: "\e917";
+}
+.ej-icon-Delete:before {
+  content: "\e91c";
+}
+.ej-icon-Dropdown-arrow:before {
+  content: "\e91d";
+}
+.ej-icon-Favorite-Composite:before {
+  content: "\e91e";
+}
+.ej-icon-Favorite:before {
+  content: "\e91f";
+}
+.ej-icon-Flag_1:before {
+  content: "\e920";
+}
+.ej-icon-Font-Color-Icon:before {
+  content: "\e921";
+}
+.ej-icon-Font-Size:before {
+  content: "\e923";
+}
+.ej-icon-Font:before {
+  content: "\e925";
+}
+.ej-icon-Green:before {
+  content: "\e926";
+  color: #5fbe7c;
+}
+.ej-icon-Help:before {
+  content: "\e927";
+}
+.ej-icon-Highlight:before {
+  content: "\e928";
+}
+.ej-icon-Hyperlink:before {
+  content: "\e92b";
+  color: #7e7e7e;
+}
+.ej-icon-Incr-Indent:before {
+  content: "\e92c";
+}
+.ej-icon-Italic:before {
+  content: "\e931";
+}
+.ej-icon-Left-aligned:before {
+  content: "\e932";
+}
+.ej-icon-Like:before {
+  content: "\e933";
+}
+.ej-icon-Mail:before {
+  content: "\e934";
+}
+.ej-icon-Mark-as-read:before {
+  content: "\e935";
+}
+.ej-icon-Menu:before {
+  content: "\e936";
+}
+.ej-icon-More2:before {
+  content: "\e937";
+}
+.ej-icon-New:before {
+  content: "\e700";
+}
+.ej-icon-Notification2:before {
+  content: "\e939";
+  color: #fff;
+}
+.ej-icon-Numbering:before {
+  content: "\e93a";
+}
+.ej-icon-Orange:before {
+  content: "\e940";
+  color: #ff8c03;
+}
+.ej-icon-People:before {
+  content: "\e941";
+}
+.ej-icon-Pin:before {
+  content: "\e942";
+}
+.ej-icon-Purple:before {
+  content: "\e943";
+  color: #a895e2;
+}
+.ej-icon-Red:before {
+  content: "\e945";
+  color: #f07d88;
+}
+.ej-icon-Reply-All:before {
+  content: "\e946";
+}
+.ej-icon-Reply:before {
+  content: "\e947";
+}
+.ej-icon-Right-aligned:before {
+  content: "\e948";
+}
+.ej-icon-Right:before {
+  content: "\e949";
+}
+.ej-icon-Search2:before {
+  content: "\e94a";
+}
+.ej-icon-Send:before {
+  content: "\e94b";
+}
+.ej-icon-Settings:before {
+  content: "\e705";
+}
+.ej-icon-Underlined:before {
+  content: "\e94d";
+}
+.ej-icon-Undo:before {
+  content: "\e94e";
+}
+.ej-icon-Yellow:before {
+  content: "\e94f";
+  color: #fff100;
+}

src/assets/db-icons1/style.css

@@ -0,0 +1,105 @@
+@font-face {
+font-family: 'Final diagram icons copy';
+src:
+url('Fonts/Final diagram icons copy.ttf') format('truetype'),
+url('Fonts/Final diagram icons copy.woff') format('woff'),
+url('Fonts/Final diagram icons copy.eot') format('eot'),
+url('Fonts/Final diagram icons copy.svg?#Final diagram icons copy') format('svg');
+font-weight: normal;
+font-style: normal;
+}
+
+[class^="sf-icon-"], [class*=" sf-icon-"] {
+ font-family: 'Final diagram icons copy' !important;
+speak: none;
+font-size: 55px;
+font-style: normal;
+font-weight: normal;
+font-variant: normal;
+text-transform: none;
+line-height: 1;
+-webkit-font-smoothing: antialiased;
+-moz-osx-font-smoothing: grayscale;
+}
+
+.sf-icon-Underline:before { content: "\e700"; }
+.sf-icon-InsertImage:before { content: "\e701"; }
+.sf-icon-Search:before { content: "\e703"; }
+.sf-icon-BringForward:before { content: "\e704"; }
+.sf-icon-ConnectorMode:before { content: "\e705"; }
+.sf-icon-Bold:before { content: "\e706"; }
+.sf-icon-Sendback:before { content: "\e707"; }
+.sf-icon-ZoomOut:before { content: "\e708"; }
+.sf-icon-Redo:before { content: "\e709"; }
+.sf-icon-Unlock1:before { content: "\e70a"; }
+.sf-icon-AilgnTop:before { content: "\e70b"; }
+.sf-icon-Copy:before { content: "\e70c"; }
+.sf-icon-Square:before { content: "\e70d"; }
+.sf-icon-Print:before { content: "\e70e"; }
+.sf-icon-DistributeVertical:before { content: "\e70f"; }
+.sf-icon-AlignHorizontally:before { content: "\e710"; }
+.sf-icon-BringFront:before { content: "\e711"; }
+.sf-icon-Delete:before { content: "\e712"; }
+.sf-icon-Unlock:before { content: "\e713"; }
+.sf-icon-Ungroup:before { content: "\e714"; }
+.sf-icon-Selection:before { content: "\e715"; }
+.sf-icon-Ellipse:before { content: "\e716"; }
+.sf-icon-TextHorizontalCenter:before { content: "\e717"; }
+.sf-icon-ColorPickers:before { content: "\e718"; }
+.sf-icon-Expander:before { content: "\e719"; }
+.sf-icon-DownArrow:before { content: "\e71b"; }
+.sf-icon-ZoomIn:before { content: "\e71c"; }
+.sf-icon-Shape_Rectangle:before { content: "\e71d"; }
+.sf-icon-SendBackward:before { content: "\e71e"; }
+.sf-icon-ColorFormat:before { content: "\e71f"; }
+.sf-icon-Triangle:before { content: "\e720"; }
+.sf-icon-Up:before { content: "\e721"; }
+.sf-icon-Group:before { content: "\e722"; }
+.sf-icon-AlignBottom:before { content: "\e723"; }
+.sf-icon-InsertText:before { content: "\e726"; }
+.sf-icon-RoundedSquare:before { content: "\e727"; }
+.sf-icon-Collapse1:before { content: "\e728"; }
+.sf-icon-DistributeHorizontal:before { content: "\e729"; }
+.sf-icon-Invisible:before { content: "\e72a"; }
+.sf-icon-Shape_Circle:before { content: "\e72b"; }
+.sf-icon-Down:before { content: "\e72c"; }
+.sf-icon-AlignLeft:before { content: "\e72d"; }
+.sf-icon-Paste:before { content: "\e72e"; }
+.sf-icon-AlignRight:before { content: "\e72f"; }
+.sf-icon-AlignVertically:before { content: "\e730"; }
+.sf-icon-ParaAlignCenter:before { content: "\e731"; }
+.sf-icon-Plus:before { content: "\e732"; }
+.sf-icon-View:before { content: "\e733"; }
+.sf-icon-Export:before { content: "\e734"; }
+.sf-icon-StraightLine:before { content: "\e735"; }
+.sf-icon-Shape_Square:before { content: "\e736"; }
+.sf-icon-Duplicate:before { content: "\e737"; }
+.sf-icon-Close:before { content: "\e738"; }
+.sf-icon-Collapse:before { content: "\e739"; }
+.sf-icon-Rotate1:before { content: "\e73a"; }
+.sf-icon-Pan:before { content: "\e73b"; }
+.sf-icon-ParaAlignLeft:before { content: "\e73d"; }
+.sf-icon-ParaAlignRight:before { content: "\e73e"; }
+.sf-icon-TextInput:before { content: "\e73f"; }
+.sf-icon-Pickers:before { content: "\e740"; }
+.sf-icon-TextVerticalCenter:before { content: "\e741"; }
+.sf-icon-InsertLink:before { content: "\e742"; }
+.sf-icon-Undo:before { content: "\e743"; }
+.sf-icon-Cut:before { content: "\e744"; }
+.sf-icon-Save:before { content: "\e745"; }
+.sf-icon-DrawingMode:before { content: "\e746"; }
+.sf-icon-Rotate:before { content: "\e747"; }
+.sf-icon-Layers:before { content: "\e748"; }
+.sf-icon-BeizerLine:before { content: "\e749"; }
+.sf-icon-Order:before { content: "\e74a"; }
+.sf-icon-Selector:before { content: "\e74b"; }
+.sf-icon-TextLeft:before { content: "\e74c"; }
+.sf-icon-TextBottom:before { content: "\e74d"; }
+.sf-icon-TextCenterVertical:before { content: "\e74e"; }
+.sf-icon-TextHorizondalCenter:before { content: "\e74f"; }
+.sf-icon-TextTop:before { content: "\e750"; }
+.sf-icon-TextRight:before { content: "\e751"; }
+.sf-icon-FillColor:before { content: "\e752"; }
+.sf-icon-Italic:before { content: "\e753"; }
+.sf-icon-DownArrow2:before { content: "\e754"; }
+.sf-icon-Lock:before { content: "\e755"; }

src/assets/dbstyle/Icons_FilledDotE.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#6CA4D9;}
+	.st1{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st2{fill:#626262;}
+	.st3{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st4{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
+	.st5{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
+	.st6{fill:#C0C0C0;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st7{fill:none;stroke:#171B1F;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:none;stroke:#6CA4D9;stroke-width:2;stroke-miterlimit:10;}
+	.st9{fill:none;stroke:#6CA4D9;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#4A4A4A;}
+	.st11{fill:#FFFFFF;}
+	.st12{fill:#C0C0C0;}
+	.st13{fill:#171B1F;}
+</style>
+<g>
+	<g>
+		<rect x="5" y="15" class="st0" width="11" height="2"/>
+	</g>
+	<g>
+		<circle class="st0" cx="21" cy="16" r="6"/>
+	</g>
+</g>
+</svg>

src/assets/dbstyle/Theme - Disable.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#bababa;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#bababa;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#bababa;}
+	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#bababa;}
+</style>
+<g>
+	<rect class="st0" width="5.3" height="5.3"/>
+	<rect y="6.7" class="st1" width="5.3" height="5.3"/>
+	<rect x="6.7" class="st2" width="5.3" height="5.3"/>
+	<rect x="6.7" y="6.7" class="st3" width="5.3" height="5.3"/>
+</g>
+</svg>

src/assets/dbstyle/Theme.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFA40A;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#0082FF;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#63CF12;}
+	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#43C9AA;}
+</style>
+<g>
+	<rect class="st0" width="5.3" height="5.3"/>
+	<rect y="6.7" class="st1" width="5.3" height="5.3"/>
+	<rect x="6.7" class="st2" width="5.3" height="5.3"/>
+	<rect x="6.7" y="6.7" class="st3" width="5.3" height="5.3"/>
+</g>
+</svg>

src/assets/dbstyle/bpmn_images/Note.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="25px" viewBox="0 0 24 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <title></title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Import" transform="translate(-57.000000, -193.000000)" fill="#EEAF00">
+            <path d="M69,193.5 C75.625,193.5 81,198.875 81,205.5 C81,212.125 75.625,217.5 69,217.5 C62.375,217.5 57,212.125 57,205.5 C57,198.875 62.375,193.5 69,193.5 Z M71,212.984375 L71,210.015625 C71,209.734375 70.78125,209.5 70.515625,209.5 L67.515625,209.5 C67.234375,209.5 67,209.734375 67,210.015625 L67,212.984375 C67,213.265625 67.234375,213.5 67.515625,213.5 L70.515625,213.5 C70.78125,213.5 71,213.265625 71,212.984375 Z M70.96875,207.609375 L71.25,197.90625 C71.25,197.796875 71.203125,197.6875 71.09375,197.625 C71,197.546875 70.859375,197.5 70.71875,197.5 L67.28125,197.5 C67.140625,197.5 67,197.546875 66.90625,197.625 C66.796875,197.6875 66.75,197.796875 66.75,197.90625 L67.015625,207.609375 C67.015625,207.828125 67.25,208 67.546875,208 L70.4375,208 C70.71875,208 70.953125,207.828125 70.96875,207.609375 Z" id=""></path>
+        </g>
+    </g>
+</svg>

src/assets/dbstyle/common_images/Icons_ClosedASMEArrowE.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#6CA4D9;}
+	.st1{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st2{fill:#626262;}
+	.st3{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st4{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
+	.st5{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
+	.st6{fill:#C0C0C0;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st7{fill:none;stroke:#171B1F;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:none;stroke:#6CA4D9;stroke-width:2;stroke-miterlimit:10;}
+	.st9{fill:none;stroke:#6CA4D9;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#4A4A4A;}
+	.st11{fill:#FFFFFF;}
+	.st12{fill:#C0C0C0;}
+	.st13{fill:#171B1F;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M13,23V9l14,7L13,23z M15,12.2v7.5l7.5-3.8L15,12.2z"/>
+	</g>
+	<g>
+		<rect x="5" y="15" class="st0" width="9" height="2"/>
+	</g>
+</g>
+</svg>

src/assets/dbstyle/common_images/Icons_ClosedDiamondE.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#6CA4D9;}
+	.st1{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st2{fill:#626262;}
+	.st3{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st4{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
+	.st5{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
+	.st6{fill:#C0C0C0;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st7{fill:none;stroke:#171B1F;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:none;stroke:#6CA4D9;stroke-width:2;stroke-miterlimit:10;}
+	.st9{fill:none;stroke:#6CA4D9;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#4A4A4A;}
+	.st11{fill:#FFFFFF;}
+	.st12{fill:#C0C0C0;}
+	.st13{fill:#171B1F;}
+</style>
+<g>
+	<g>
+		<rect x="5" y="15" class="st0" width="10" height="2"/>
+	</g>
+	<g>
+		<polygon class="st0" points="18,22 13,16 18,10 20.8,14 19.1,15.1 17.9,13.3 15.6,16 17.9,18.7 19.1,16.9 20.8,18 		"/>
+	</g>
+	<g>
+		<path class="st0" d="M23,21.3c-2.3,0-4-2.3-4-5.3s1.8-5.3,4-5.3c2.3,0,4,2.3,4,5.3S25.2,21.3,23,21.3z M23,12.7
+			c-1.1,0-2,1.6-2,3.3s0.9,3.3,2,3.3s2-1.6,2-3.3S24.1,12.7,23,12.7z"/>
+	</g>
+</g>
+</svg>

src/assets/dbstyle/common_images/Icons_ClosedDotE.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#6CA4D9;}
+	.st1{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st2{fill:#626262;}
+	.st3{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st4{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
+	.st5{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
+	.st6{fill:#C0C0C0;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st7{fill:none;stroke:#171B1F;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:none;stroke:#6CA4D9;stroke-width:2;stroke-miterlimit:10;}
+	.st9{fill:none;stroke:#6CA4D9;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#4A4A4A;}
+	.st11{fill:#FFFFFF;}
+	.st12{fill:#C0C0C0;}
+	.st13{fill:#171B1F;}
+</style>
+<g>
+	<g>
+		<rect x="5" y="15" class="st0" width="11" height="2"/>
+	</g>
+	<g>
+		<path class="st0" d="M21,22c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S24.3,22,21,22z M21,12c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4
+			S23.2,12,21,12z"/>
+	</g>
+</g>
+</svg>

src/assets/dbstyle/common_images/Icons_FilledDotE.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#6CA4D9;}
+	.st1{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st2{fill:#626262;}
+	.st3{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st4{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
+	.st5{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
+	.st6{fill:#C0C0C0;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
+	.st7{fill:none;stroke:#171B1F;stroke-width:3;stroke-miterlimit:10;}
+	.st8{fill:none;stroke:#6CA4D9;stroke-width:2;stroke-miterlimit:10;}
+	.st9{fill:none;stroke:#6CA4D9;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#4A4A4A;}
+	.st11{fill:#FFFFFF;}
+	.st12{fill:#C0C0C0;}
+	.st13{fill:#171B1F;}
+</style>
+<g>
+	<g>
+		<rect x="5" y="15" class="st0" width="11" height="2"/>
+	</g>
+	<g>
+		<circle class="st0" cx="21" cy="16" r="6"/>
+	</g>
+</g>
+</svg>

src/assets/dbstyle/common_images/Overview - Normal.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="17px" height="16px" viewBox="0 0 17 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Overview - Normal</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M13.3076923,9.07692308 C13.3076923,7.29567308 11.8581731,5.84615385 10.0769231,5.84615385 C8.29567308,5.84615385 6.84615385,7.29567308 6.84615385,9.07692308 C6.84615385,10.8581731 8.29567308,12.3076923 10.0769231,12.3076923 C11.8581731,12.3076923 13.3076923,10.8581731 13.3076923,9.07692308 Z M2.98505665,14 L5,14 L5,16 L2.98505665,16 L0.985056648,16 L0.985056648,0 L2.98505665,0 L17,1.46957616e-15 L17,2 L17,4 L15,4 L15,2 L2.98505665,2 L2.98505665,14 Z M17,15.0769231 C17,15.5817308 16.5817308,16 16.0769231,16 C15.8317308,16 15.59375,15.8990385 15.4278846,15.7259615 L12.9543269,13.2596154 C12.1105769,13.84375 11.1009615,14.1538462 10.0769231,14.1538462 C7.27163462,14.1538462 5,11.8822115 5,9.07692308 C5,6.27163462 7.27163462,4 10.0769231,4 C12.8822115,4 15.1538462,6.27163462 15.1538462,9.07692308 C15.1538462,10.1009615 14.84375,11.1105769 14.2596154,11.9543269 L16.7331731,14.4278846 C16.8990385,14.59375 17,14.8317308 17,15.0769231 Z" id="Overview---Normal" fill="#4A4A4A"></path>
+    </g>
+</svg>

src/assets/dbstyle/common_images/Overview.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="16px" viewBox="0 0 18 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Overview</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M13.315164,9.07692308 C13.315164,7.29567308 11.8656448,5.84615385 10.0843948,5.84615385 C8.30314475,5.84615385 6.85362552,7.29567308 6.85362552,9.07692308 C6.85362552,10.8581731 8.30314475,12.3076923 10.0843948,12.3076923 C11.8656448,12.3076923 13.315164,10.8581731 13.315164,9.07692308 Z M2.99252832,14 L5.00747168,14 L5.00747168,16 L2.99252832,16 L0.992528324,16 L0.992528324,0 L2.99252832,0 L17.0074717,1.46957616e-15 L17.0074717,2 L17.0074717,4 L15.0074717,4 L15.0074717,2 L2.99252832,2 L2.99252832,14 Z M17.0074717,15.0769231 C17.0074717,15.5817308 16.5892024,16 16.0843948,16 C15.8392024,16 15.6012217,15.8990385 15.4353563,15.7259615 L12.9617986,13.2596154 C12.1180486,13.84375 11.1084332,14.1538462 10.0843948,14.1538462 C7.27910629,14.1538462 5.00747168,11.8822115 5.00747168,9.07692308 C5.00747168,6.27163462 7.27910629,4 10.0843948,4 C12.8896832,4 15.1613178,6.27163462 15.1613178,9.07692308 C15.1613178,10.1009615 14.8512217,11.1105769 14.2670871,11.9543269 L16.7406448,14.4278846 C16.9065101,14.59375 17.0074717,14.8317308 17.0074717,15.0769231 Z" id="Overview" fill="#046AE5"></path>
+    </g>
+</svg>

src/assets/dbstyle/common_images/blank_diagram.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
+    <title>Combined Shape</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Create-new-Diagram" transform="translate(-260.000000, -325.000000)" fill="#4A4A4A">
+            <g id="Group-2" transform="translate(32.000000, 225.000000)">
+                <g id="Group" transform="translate(228.000000, 100.000000)">
+                    <path d="M11,9 L20,9 L20,11 L11,11 L11,20 L9,20 L9,11 L0,11 L0,9 L9,9 L9,0 L11,0 L11,9 Z" id="Combined-Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/dbstyle/common_images/blank_diagram_mind.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="135px" height="125px" viewBox="0 0 135 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>blank_diagram_mind</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="blank_diagram_mind" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" stroke="#A4E1F5" fill="#DAF6FF" x="46.2277392" y="55.4923239" width="42.5445216" height="14.0153523" rx="3"></rect>
+        <path d="M50.2460938,65.5 L50.2460938,59.71875 L51.3828125,59.71875 L52.984375,64.1914062 L54.6328125,59.71875 L55.6484375,59.71875 L55.6484375,65.5 L54.8828125,65.5 L54.8828125,60.796875 L53.2890625,65.1132812 L52.4960938,65.1132812 L50.9492188,60.7851562 L50.9492188,65.5 L50.2460938,65.5 Z M57.1599963,65.5 L57.1599963,61.2578125 L57.9295275,61.2578125 L57.9295275,65.5 L57.1599963,65.5 Z M57.1599963,60.4882812 L57.1599963,59.71875 L57.9295275,59.71875 L57.9295275,60.4882812 L57.1599963,60.4882812 Z M59.4723363,65.5 L59.4723363,61.2578125 L60.2418675,61.2578125 L60.2418675,62.0546875 C60.6481195,61.4609345 61.1455104,61.1640625 61.734055,61.1640625 C62.1012443,61.1640625 62.3942102,61.2805978 62.6129613,61.5136719 C62.8317123,61.746746 62.9410863,62.0598939 62.9410863,62.453125 L62.9410863,65.5 L62.171555,65.5 L62.171555,62.703125 C62.171555,62.3880193 62.1253315,62.1634121 62.0328831,62.0292969 C61.9404347,61.8951816 61.7874415,61.828125 61.5738988,61.828125 C61.1025422,61.828125 60.6585363,62.1367157 60.2418675,62.7539062 L60.2418675,65.5 L59.4723363,65.5 Z M67.1596763,65.5 L67.1596763,64.703125 C66.8471747,65.2994821 66.3758252,65.5976562 65.7456138,65.5976562 C65.2351945,65.5976562 64.8335058,65.4114602 64.5405356,65.0390625 C64.2475654,64.6666648 64.1010825,64.1575553 64.1010825,63.5117187 C64.1010825,62.8059861 64.2670965,62.2382834 64.5991294,61.8085937 C64.9311623,61.3789041 65.3680069,61.1640625 65.9096763,61.1640625 C66.4122829,61.1640625 66.8289454,61.3567689 67.1596763,61.7421875 L67.1596763,59.3320312 L67.9331138,59.3320312 L67.9331138,65.5 L67.1596763,65.5 Z M67.1596763,62.2695312 C66.7612368,61.917967 66.3836364,61.7421875 66.0268638,61.7421875 C65.2898809,61.7421875 64.921395,62.3059839 64.921395,63.4335937 C64.921395,64.4257862 65.2495167,64.921875 65.90577,64.921875 C66.3328555,64.921875 66.75082,64.6888044 67.1596763,64.2226562 L67.1596763,62.2695312 Z M69.4485788,65.5 L69.4485788,59.71875 L70.5852975,59.71875 L72.18686,64.1914062 L73.8352975,59.71875 L74.8509225,59.71875 L74.8509225,65.5 L74.0852975,65.5 L74.0852975,60.796875 L72.4915475,65.1132812 L71.6985788,65.1132812 L70.1517038,60.7851562 L70.1517038,65.5 L69.4485788,65.5 Z M78.5499813,64.9609375 C78.0890414,65.3854188 77.6450355,65.5976562 77.21795,65.5976562 C76.8663857,65.5976562 76.574722,65.4876313 76.34295,65.2675781 C76.111178,65.0475249 75.9952938,64.7695329 75.9952938,64.4335937 C75.9952938,63.9700498 76.1899533,63.6139335 76.5792781,63.3652344 C76.968603,63.1165352 77.5265401,62.9921875 78.2531063,62.9921875 L78.4367,62.9921875 L78.4367,62.4804687 C78.4367,61.9882788 78.1840984,61.7421875 77.6788875,61.7421875 C77.2726355,61.7421875 76.8338378,61.8671862 76.3624813,62.1171875 L76.3624813,61.4804687 C76.880713,61.2695302 77.3663852,61.1640625 77.8195125,61.1640625 C78.2934732,61.1640625 78.6430791,61.2708323 78.8683406,61.484375 C79.0936022,61.6979177 79.2062313,62.0299457 79.2062313,62.4804687 L79.2062313,64.4023437 C79.2062313,64.8424501 79.3416466,65.0625 79.6124813,65.0625 C79.6463356,65.0625 79.6958143,65.0572917 79.7609188,65.046875 L79.8156063,65.4726562 C79.6411262,65.55599 79.4484198,65.5976562 79.2374813,65.5976562 C78.8781045,65.5976562 78.6489401,65.3854188 78.5499813,64.9609375 Z M78.4367,64.5429687 L78.4367,63.4453125 L78.1788875,63.4375 C77.7570104,63.4375 77.415868,63.5175773 77.15545,63.6777344 C76.895032,63.8378914 76.764825,64.0481758 76.764825,64.3085937 C76.764825,64.4934905 76.8299285,64.6497389 76.9601375,64.7773437 C77.0903465,64.9049486 77.2491991,64.96875 77.4367,64.96875 C77.7570141,64.96875 78.0903441,64.8268243 78.4367,64.5429687 Z M80.78029,67.0429687 L80.78029,61.2578125 L81.5498213,61.2578125 L81.5498213,62.0546875 C81.864927,61.4609345 82.3375785,61.1640625 82.96779,61.1640625 C83.4782092,61.1640625 83.8798979,61.3502586 84.1728681,61.7226562 C84.4658383,62.0950539 84.6123213,62.6041634 84.6123213,63.25 C84.6123213,63.9531285 84.4463073,64.5201801 84.1142744,64.9511719 C83.7822415,65.3821636 83.3453969,65.5976562 82.8037275,65.5976562 C82.3011208,65.5976562 81.8831563,65.4049498 81.5498213,65.0195312 L81.5498213,67.0429687 L80.78029,67.0429687 Z M81.5498213,64.4882812 C81.9456566,64.8424497 82.323257,65.0195312 82.6826338,65.0195312 C83.4222208,65.0195312 83.7920088,64.4557348 83.7920088,63.328125 C83.7920088,62.3333284 83.463887,61.8359375 82.8076338,61.8359375 C82.3779441,61.8359375 81.9586775,62.0690081 81.5498213,62.5351562 L81.5498213,64.4882812 Z" id="MindMap" fill="#000000"></path>
+    </g>
+</svg>

src/assets/dbstyle/common_images/blank_diagram_org.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="135px" height="125px" viewBox="0 0 135 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>blank_diagram_org</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="blank_diagram_org" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" stroke="#89BEB3" fill="#B8F4E8" x="46.2277392" y="55.4923239" width="42.5445216" height="14.0153523" rx="3"></rect>
+        <path d="M57.1194606,65.5 L57.1194606,59.71875 L57.9241481,59.71875 L60.8343044,64.1835937 L60.8343044,59.71875 L61.5374294,59.71875 L61.5374294,65.5 L60.7366481,65.5 L57.8225856,61.0351562 L57.8225856,65.5 L57.1194606,65.5 Z M65.2403944,64.9609375 C64.7794546,65.3854188 64.3354486,65.5976562 63.9083631,65.5976562 C63.5567989,65.5976562 63.2651351,65.4876313 63.0333631,65.2675781 C62.8015911,65.0475249 62.6857069,64.7695329 62.6857069,64.4335937 C62.6857069,63.9700498 62.8803664,63.6139335 63.2696912,63.3652344 C63.6590161,63.1165352 64.2169532,62.9921875 64.9435194,62.9921875 L65.1271131,62.9921875 L65.1271131,62.4804687 C65.1271131,61.9882788 64.8745115,61.7421875 64.3693006,61.7421875 C63.9630486,61.7421875 63.5242509,61.8671862 63.0528944,62.1171875 L63.0528944,61.4804687 C63.5711261,61.2695302 64.0567984,61.1640625 64.5099256,61.1640625 C64.9838863,61.1640625 65.3334922,61.2708323 65.5587537,61.484375 C65.7840153,61.6979177 65.8966444,62.0299457 65.8966444,62.4804687 L65.8966444,64.4023437 C65.8966444,64.8424501 66.0320597,65.0625 66.3028944,65.0625 C66.3367487,65.0625 66.3862274,65.0572917 66.4513319,65.046875 L66.5060194,65.4726562 C66.3315393,65.55599 66.1388329,65.5976562 65.9278944,65.5976562 C65.5685176,65.5976562 65.3393532,65.3854188 65.2403944,64.9609375 Z M65.1271131,64.5429687 L65.1271131,63.4453125 L64.8693006,63.4375 C64.4474235,63.4375 64.1062811,63.5175773 63.8458631,63.6777344 C63.5854452,63.8378914 63.4552381,64.0481758 63.4552381,64.3085937 C63.4552381,64.4934905 63.5203416,64.6497389 63.6505506,64.7773437 C63.7807596,64.9049486 63.9396122,64.96875 64.1271131,64.96875 C64.4474272,64.96875 64.7807572,64.8268243 65.1271131,64.5429687 Z M67.4707031,65.5 L67.4707031,61.2578125 L68.2402344,61.2578125 L68.2402344,62.0546875 C68.6152362,61.4609345 69.0970023,61.1640625 69.6855469,61.1640625 C70.253258,61.1640625 70.6399729,61.4609345 70.8457031,62.0546875 C71.2102883,61.4583304 71.6842419,61.1601562 72.2675781,61.1601562 C72.64258,61.1601562 72.9329417,61.2701812 73.1386719,61.4902344 C73.3444021,61.7102876 73.4472656,62.0182272 73.4472656,62.4140625 L73.4472656,65.5 L72.6738281,65.5 L72.6738281,62.5351562 C72.6738281,62.0507788 72.4824238,61.8085937 72.0996094,61.8085937 C71.7011699,61.8085937 71.2832053,62.091143 70.8457031,62.65625 L70.8457031,65.5 L70.0722656,65.5 L70.0722656,62.5351562 C70.0722656,62.0481746 69.8769551,61.8046875 69.4863281,61.8046875 C69.0983054,61.8046875 68.6829449,62.0885388 68.2402344,62.65625 L68.2402344,65.5 L67.4707031,65.5 Z M78.0486681,65.3632812 C77.5330405,65.519532 77.0916387,65.5976562 76.7244494,65.5976562 C76.0994463,65.5976562 75.5896857,65.389976 75.1951525,64.9746094 C74.8006193,64.5592427 74.6033556,64.0208366 74.6033556,63.359375 C74.6033556,62.7161426 74.777182,62.1888041 75.12484,61.7773437 C75.472498,61.3658834 75.917155,61.1601562 76.4588244,61.1601562 C76.9718478,61.1601562 77.3683282,61.3424461 77.6482775,61.7070312 C77.9282268,62.0716164 78.0681994,62.5898404 78.0681994,63.2617187 L78.0642931,63.5 L75.3885119,63.5 C75.5004916,64.5078175 75.9939763,65.0117187 76.8689806,65.0117187 C77.1892947,65.0117187 77.58252,64.9257821 78.0486681,64.7539062 L78.0486681,65.3632812 Z M75.4236681,62.921875 L77.2947619,62.921875 C77.2947619,62.1328086 77.000494,61.7382812 76.4119494,61.7382812 C75.8208006,61.7382812 75.4913768,62.1328086 75.4236681,62.921875 Z" id="Name" fill="#000000"></path>
+    </g>
+</svg>

src/assets/dbstyle/common_images/linestyle/0,0.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="141px" height="3px" viewBox="0 0 141 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>0,0</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="0,0" fill="#979797" fill-rule="nonzero" points="0.5 2.5 0.5 0.5 140.5 0.5 140.5 2.5"></polygon>
+    </g>
+</svg>

src/assets/dbstyle/common_images/linestyle/1,2.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="139px" height="3px" viewBox="0 0 139 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>1,2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M0.5,2.84651275 L0.5,0.846512754 L2.5,0.846512754 L2.5,2.84651275 L0.5,2.84651275 Z M4.5,2.84651275 L4.5,0.846512754 L6.5,0.846512754 L6.5,2.84651275 L4.5,2.84651275 Z M8.5,2.84651275 L8.5,0.846512754 L10.5,0.846512754 L10.5,2.84651275 L8.5,2.84651275 Z M12.5,2.84651275 L12.5,0.846512754 L14.5,0.846512754 L14.5,2.84651275 L12.5,2.84651275 Z M16.5,2.84651275 L16.5,0.846512754 L18.5,0.846512754 L18.5,2.84651275 L16.5,2.84651275 Z M20.5,2.84651275 L20.5,0.846512754 L22.5,0.846512754 L22.5,2.84651275 L20.5,2.84651275 Z M24.5,2.84651275 L24.5,0.846512754 L26.5,0.846512754 L26.5,2.84651275 L24.5,2.84651275 Z M28.5,2.84651275 L28.5,0.846512754 L30.5,0.846512754 L30.5,2.84651275 L28.5,2.84651275 Z M32.5,2.84651275 L32.5,0.846512754 L34.5,0.846512754 L34.5,2.84651275 L32.5,2.84651275 Z M36.5,2.84651275 L36.5,0.846512754 L38.5,0.846512754 L38.5,2.84651275 L36.5,2.84651275 Z M40.5,2.84651275 L40.5,0.846512754 L42.5,0.846512754 L42.5,2.84651275 L40.5,2.84651275 Z M44.5,2.84651275 L44.5,0.846512754 L46.5,0.846512754 L46.5,2.84651275 L44.5,2.84651275 Z M48.5,2.84651275 L48.5,0.846512754 L50.5,0.846512754 L50.5,2.84651275 L48.5,2.84651275 Z M52.5,2.84651275 L52.5,0.846512754 L54.5,0.846512754 L54.5,2.84651275 L52.5,2.84651275 Z M56.5,2.84651275 L56.5,0.846512754 L58.5,0.846512754 L58.5,2.84651275 L56.5,2.84651275 Z M60.5,2.84651275 L60.5,0.846512754 L62.5,0.846512754 L62.5,2.84651275 L60.5,2.84651275 Z M64.5,2.84651275 L64.5,0.846512754 L66.5,0.846512754 L66.5,2.84651275 L64.5,2.84651275 Z M68.5,2.84651275 L68.5,0.846512754 L70.5,0.846512754 L70.5,2.84651275 L68.5,2.84651275 Z M72.5,2.84651275 L72.5,0.846512754 L74.5,0.846512754 L74.5,2.84651275 L72.5,2.84651275 Z M76.5,2.84651275 L76.5,0.846512754 L78.5,0.846512754 L78.5,2.84651275 L76.5,2.84651275 Z M80.5,2.84651275 L80.5,0.846512754 L82.5,0.846512754 L82.5,2.84651275 L80.5,2.84651275 Z M84.5,2.84651275 L84.5,0.846512754 L86.5,0.846512754 L86.5,2.84651275 L84.5,2.84651275 Z M88.5,2.84651275 L88.5,0.846512754 L90.5,0.846512754 L90.5,2.84651275 L88.5,2.84651275 Z M92.5,2.84651275 L92.5,0.846512754 L94.5,0.846512754 L94.5,2.84651275 L92.5,2.84651275 Z M96.5,2.84651275 L96.5,0.846512754 L98.5,0.846512754 L98.5,2.84651275 L96.5,2.84651275 Z M100.5,2.84651275 L100.5,0.846512754 L102.5,0.846512754 L102.5,2.84651275 L100.5,2.84651275 Z M104.5,2.84651275 L104.5,0.846512754 L106.5,0.846512754 L106.5,2.84651275 L104.5,2.84651275 Z M108.5,2.84651275 L108.5,0.846512754 L110.5,0.846512754 L110.5,2.84651275 L108.5,2.84651275 Z M112.5,2.84651275 L112.5,0.846512754 L114.5,0.846512754 L114.5,2.84651275 L112.5,2.84651275 Z M116.5,2.84651275 L116.5,0.846512754 L118.5,0.846512754 L118.5,2.84651275 L116.5,2.84651275 Z M120.5,2.84651275 L120.5,0.846512754 L122.5,0.846512754 L122.5,2.84651275 L120.5,2.84651275 Z M124.5,2.84651275 L124.5,0.846512754 L126.5,0.846512754 L126.5,2.84651275 L124.5,2.84651275 Z M128.5,2.84651275 L128.5,0.846512754 L130.5,0.846512754 L130.5,2.84651275 L128.5,2.84651275 Z M132.5,2.84651275 L132.5,0.846512754 L134.5,0.846512754 L134.5,2.84651275 L132.5,2.84651275 Z M136.5,2.84651275 L136.5,0.846512754 L138.5,0.846512754 L138.5,2.84651275 L136.5,2.84651275 Z" id="1,2" fill="#979797" fill-rule="nonzero"></path>
+    </g>
+</svg>

src/assets/dbstyle/common_images/linestyle/3,3.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="141px" height="3px" viewBox="0 0 141 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>3,3</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M0.5,2.84651275 L0.5,0.846512754 L4.5,0.846512754 L4.5,2.84651275 L0.5,2.84651275 Z M8.5,2.84651275 L8.5,0.846512754 L12.5,0.846512754 L12.5,2.84651275 L8.5,2.84651275 Z M16.5,2.84651275 L16.5,0.846512754 L20.5,0.846512754 L20.5,2.84651275 L16.5,2.84651275 Z M24.5,2.84651275 L24.5,0.846512754 L28.5,0.846512754 L28.5,2.84651275 L24.5,2.84651275 Z M32.5,2.84651275 L32.5,0.846512754 L36.5,0.846512754 L36.5,2.84651275 L32.5,2.84651275 Z M40.5,2.84651275 L40.5,0.846512754 L44.5,0.846512754 L44.5,2.84651275 L40.5,2.84651275 Z M48.5,2.84651275 L48.5,0.846512754 L52.5,0.846512754 L52.5,2.84651275 L48.5,2.84651275 Z M56.5,2.84651275 L56.5,0.846512754 L60.5,0.846512754 L60.5,2.84651275 L56.5,2.84651275 Z M64.5,2.84651275 L64.5,0.846512754 L68.5,0.846512754 L68.5,2.84651275 L64.5,2.84651275 Z M72.5,2.84651275 L72.5,0.846512754 L76.5,0.846512754 L76.5,2.84651275 L72.5,2.84651275 Z M80.5,2.84651275 L80.5,0.846512754 L84.5,0.846512754 L84.5,2.84651275 L80.5,2.84651275 Z M88.5,2.84651275 L88.5,0.846512754 L92.5,0.846512754 L92.5,2.84651275 L88.5,2.84651275 Z M96.5,2.84651275 L96.5,0.846512754 L100.5,0.846512754 L100.5,2.84651275 L96.5,2.84651275 Z M104.5,2.84651275 L104.5,0.846512754 L108.5,0.846512754 L108.5,2.84651275 L104.5,2.84651275 Z M112.5,2.84651275 L112.5,0.846512754 L116.5,0.846512754 L116.5,2.84651275 L112.5,2.84651275 Z M120.5,2.84651275 L120.5,0.846512754 L124.5,0.846512754 L124.5,2.84651275 L120.5,2.84651275 Z M128.5,2.84651275 L128.5,0.846512754 L132.5,0.846512754 L132.5,2.84651275 L128.5,2.84651275 Z M136.5,2.84651275 L136.5,0.846512754 L140.5,0.846512754 L140.5,2.84651275 L136.5,2.84651275 Z" id="3,3" fill="#979797" fill-rule="nonzero"></path>
+    </g>
+</svg>

src/assets/dbstyle/common_images/linestyle/4,4,1.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="139px" height="2px" viewBox="0 0 139 2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>4,4,1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M0.5,2 L0.5,0 L10.5,0 L10.5,2 L0.5,2 Z M12.5,2 L12.5,0 L14.5,0 L14.5,2 L12.5,2 Z M16.5,2 L16.5,0 L26.5,0 L26.5,2 L16.5,2 Z M28.5,2 L28.5,0 L30.5,0 L30.5,2 L28.5,2 Z M32.5,2 L32.5,0 L42.5,0 L42.5,2 L32.5,2 Z M44.5,2 L44.5,0 L46.5,0 L46.5,2 L44.5,2 Z M48.5,2 L48.5,0 L58.5,0 L58.5,2 L48.5,2 Z M60.5,2 L60.5,0 L62.5,0 L62.5,2 L60.5,2 Z M64.5,2 L64.5,0 L74.5,0 L74.5,2 L64.5,2 Z M76.5,2 L76.5,0 L78.5,0 L78.5,2 L76.5,2 Z M80.5,2 L80.5,0 L90.5,0 L90.5,2 L80.5,2 Z M92.5,2 L92.5,0 L94.5,0 L94.5,2 L92.5,2 Z M96.5,2 L96.5,0 L106.5,0 L106.5,2 L96.5,2 Z M108.5,2 L108.5,0 L110.5,0 L110.5,2 L108.5,2 Z M112.5,2 L112.5,0 L122.5,0 L122.5,2 L112.5,2 Z M124.5,2 L124.5,0 L126.5,0 L126.5,2 L124.5,2 Z M128.5,2 L128.5,0 L138.5,0 L138.5,2 L128.5,2 Z" id="4,4,1" fill="#979797" fill-rule="nonzero"></path>
+    </g>
+</svg>

src/assets/dbstyle/common_images/linestyle/5,3.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="141px" height="3px" viewBox="0 0 141 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>5,3</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M0.5,2.84651275 L0.5,0.846512754 L10.5,0.846512754 L10.5,2.84651275 L0.5,2.84651275 Z M13.5,2.84651275 L13.5,0.846512754 L23.5,0.846512754 L23.5,2.84651275 L13.5,2.84651275 Z M26.5,2.84651275 L26.5,0.846512754 L36.5,0.846512754 L36.5,2.84651275 L26.5,2.84651275 Z M39.5,2.84651275 L39.5,0.846512754 L49.5,0.846512754 L49.5,2.84651275 L39.5,2.84651275 Z M52.5,2.84651275 L52.5,0.846512754 L62.5,0.846512754 L62.5,2.84651275 L52.5,2.84651275 Z M65.5,2.84651275 L65.5,0.846512754 L75.5,0.846512754 L75.5,2.84651275 L65.5,2.84651275 Z M78.5,2.84651275 L78.5,0.846512754 L88.5,0.846512754 L88.5,2.84651275 L78.5,2.84651275 Z M91.5,2.84651275 L91.5,0.846512754 L101.5,0.846512754 L101.5,2.84651275 L91.5,2.84651275 Z M104.5,2.84651275 L104.5,0.846512754 L114.5,0.846512754 L114.5,2.84651275 L104.5,2.84651275 Z M117.5,2.84651275 L117.5,0.846512754 L127.5,0.846512754 L127.5,2.84651275 L117.5,2.84651275 Z M130.5,2.84651275 L130.5,0.846512754 L140.5,0.846512754 L140.5,2.84651275 L130.5,2.84651275 Z" id="5,3" fill="#979797" fill-rule="nonzero"></path>
+    </g>
+</svg>

src/assets/dbstyle/mindmap_images/Mind_Map0.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="106px" height="45px" viewBox="0 0 106 45" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Mindmap4</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Mindmap4" transform="translate(-1.000000, -0.196554)" fill="#979797">
+            <g id="Group-39-Copy" transform="translate(84.500000, 18.000000) scale(-1, 1) translate(-84.500000, -18.000000) translate(61.000000, 0.000000)">
+                <g id="Group-40" transform="translate(38.815951, 9.000000)" fill-rule="nonzero">
+                    <path d="M0.332721862,13.1225916 L-0.0719977312,12.2081508 C1.40172171,11.5559018 2.59301823,9.40644581 3.42480852,5.73094063 C4.34346701,1.67158332 5.60974888,-0.325620497 7.40872285,-0.0459786699 L7.25512234,0.942154359 C6.2218279,0.781533721 5.2084791,2.37980669 4.40014465,5.95166543 C3.50494202,9.90737629 2.17482886,12.3072991 0.332721862,13.1225916 Z" id="Path-10-Copy-4" transform="translate(3.668363, 6.525402) scale(-1, 1) translate(-3.668363, -6.525402) "></path>
+                    <path d="M0.347132733,26.4161048 L-0.0864086019,25.5149711 C1.38976099,24.8047762 2.58859496,22.4534635 3.42297211,18.445643 C4.3404767,14.0385308 5.59675087,11.8846627 7.41522869,12.1919382 L7.2486165,13.1779607 C6.23482591,13.0066565 5.21146941,14.7611898 4.40198107,18.6494602 C3.50936528,22.9370223 2.18678958,25.5310338 0.347132733,26.4161048 Z" id="Path-10-Copy-5" transform="translate(3.664410, 19.289610) scale(-1, -1) translate(-3.664410, -19.289610) "></path>
+                </g>
+                <g id="Group-41" transform="translate(12.904777, 9.671536) scale(-1, 1) translate(-12.904777, -9.671536) translate(0.904777, 0.171536)">
+                    <g id="Group-3-Copy-4" transform="translate(0.637410, 0.936735)" fill-rule="nonzero">
+                        <path d="M0.368122905,8.88980136 L0.0752793305,7.93364099 C1.36858818,7.53753883 2.38766903,6.26513881 3.10984123,4.05687833 C3.94245996,1.5108941 5.1176363,0.228264118 6.67940644,0.396260803 L6.5724553,1.39052508 C5.61553556,1.28759102 4.76347371,2.21756214 4.06030593,4.36771086 C3.24669161,6.85558333 2.02352415,8.38280103 0.368122905,8.88980136 Z" id="Path-10-Copy-2"></path>
+                        <path d="M0.37964105,17.0708388 L0.0637611857,16.1220396 C1.35454864,15.692303 2.38053001,14.2997966 3.10627239,11.8874779 C3.93608382,9.12924065 5.1049131,7.74251004 6.68400028,7.92715284 L6.56786146,8.92038583 C5.62825876,8.81051801 4.76984985,9.8289575 4.06387476,12.1755711 C3.25383063,14.8681032 2.03756369,16.5188733 0.37964105,17.0708388 Z" id="Path-10-Copy-3" transform="translate(3.373881, 12.490839) scale(1, -1) translate(-3.373881, -12.490839) "></path>
+                    </g>
+                    <rect id="Rectangle-30-Copy-15" x="7.08588957" y="16.7177189" width="16" height="2" rx="1"></rect>
+                    <rect id="Rectangle-30-Copy-16" x="7.08588957" y="0.844247973" width="16" height="2" rx="1"></rect>
+                </g>
+                <rect id="Rectangle-30-Copy-12" transform="translate(31.815951, 35.000000) scale(-1, 1) translate(-31.815951, -35.000000) " x="23.8159509" y="34" width="16" height="2" rx="1"></rect>
+                <rect id="Rectangle-30-Copy-13" transform="translate(31.815951, 9.637256) scale(-1, 1) translate(-31.815951, -9.637256) " x="23.8159509" y="8.63725593" width="16" height="2" rx="1"></rect>
+            </g>
+            <g id="Group-39" transform="translate(0.000000, 8.000000)">
+                <g id="Group-40" transform="translate(38.815951, 1.000000)" fill-rule="nonzero">
+                    <path d="M0.332721862,13.1225916 L-0.0719977312,12.2081508 C1.40172171,11.5559018 2.59301823,9.40644581 3.42480852,5.73094063 C4.34346701,1.67158332 5.60974888,-0.325620497 7.40872285,-0.0459786699 L7.25512234,0.942154359 C6.2218279,0.781533721 5.2084791,2.37980669 4.40014465,5.95166543 C3.50494202,9.90737629 2.17482886,12.3072991 0.332721862,13.1225916 Z" id="Path-10-Copy-4" transform="translate(3.668363, 6.525402) scale(-1, 1) translate(-3.668363, -6.525402) "></path>
+                    <path d="M0.347132733,26.4161048 L-0.0864086019,25.5149711 C1.38976099,24.8047762 2.58859496,22.4534635 3.42297211,18.445643 C4.3404767,14.0385308 5.59675087,11.8846627 7.41522869,12.1919382 L7.2486165,13.1779607 C6.23482591,13.0066565 5.21146941,14.7611898 4.40198107,18.6494602 C3.50936528,22.9370223 2.18678958,25.5310338 0.347132733,26.4161048 Z" id="Path-10-Copy-5" transform="translate(3.664410, 19.289610) scale(-1, -1) translate(-3.664410, -19.289610) "></path>
+                </g>
+                <rect id="Rectangle-30-Copy" x="46.1478735" y="12.6388701" width="16" height="2" rx="1"></rect>
+                <g id="Group-41" transform="translate(12.904777, 27.671536) scale(-1, 1) translate(-12.904777, -27.671536) translate(0.904777, 18.171536)">
+                    <g id="Group-3-Copy-4" transform="translate(0.637410, 0.936735)" fill-rule="nonzero">
+                        <path d="M0.294659814,8.37375044 L0.00181623985,7.41759007 C1.29512509,7.02148791 2.31420594,5.74908789 3.03637814,3.54082741 C3.86899687,0.994843176 5.04417321,-0.287786803 6.60594335,-0.119790118 L6.49899221,0.87447416 C5.54207246,0.771540097 4.69001062,1.70151122 3.98684284,3.85165994 C3.17322852,6.33953241 1.95006106,7.86675011 0.294659814,8.37375044 Z" id="Path-10-Copy-2"></path>
+                        <path d="M0.306177959,16.5547879 L-0.0097019049,15.6059887 C1.28108555,15.176252 2.30706692,13.7837457 3.0328093,11.371427 C3.86262073,8.61318973 5.03145001,7.22645912 6.61053719,7.41110192 L6.49439837,8.40433491 C5.55479567,8.29446709 4.69638676,9.31290658 3.99041167,11.6595202 C3.18036754,14.3520523 1.9641006,16.0028224 0.306177959,16.5547879 Z" id="Path-10-Copy-3" transform="translate(3.300418, 11.974788) scale(1, -1) translate(-3.300418, -11.974788) "></path>
+                    </g>
+                    <rect id="Rectangle-30-Copy-15" x="7.01242648" y="16.201668" width="16" height="2" rx="1"></rect>
+                    <rect id="Rectangle-30-Copy-16" x="7.01242648" y="0.328197052" width="16" height="2" rx="1"></rect>
+                </g>
+                <rect id="Rectangle-30-Copy-12" transform="translate(31.815951, 27.000000) scale(-1, 1) translate(-31.815951, -27.000000) " x="23.8159509" y="26" width="16" height="2" rx="1"></rect>
+                <rect id="Rectangle-30-Copy-13" transform="translate(31.815951, 1.392993) scale(-1, 1) translate(-31.815951, -1.392993) " x="23.8159509" y="0.392992522" width="16" height="2" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/dbstyle/mindmap_images/Mind_Map1.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="106px" height="51px" viewBox="0 0 106 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Mindmap1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Mindmap1" transform="translate(-1.000000, 0.303446)" fill-rule="nonzero">
+            <g id="Group-39-Copy" transform="translate(84.500000, 21.000000) scale(-1, 1) translate(-84.500000, -21.000000) translate(61.000000, 0.000000)">
+                <g id="Group-40" transform="translate(38.815951, 12.000000)" fill="#979797">
+                    <path d="M0.332721862,13.1225916 L-0.0719977312,12.2081508 C1.40172171,11.5559018 2.59301823,9.40644581 3.42480852,5.73094063 C4.34346701,1.67158332 5.60974888,-0.325620497 7.40872285,-0.0459786699 L7.25512234,0.942154359 C6.2218279,0.781533721 5.2084791,2.37980669 4.40014465,5.95166543 C3.50494202,9.90737629 2.17482886,12.3072991 0.332721862,13.1225916 Z" id="Path-10-Copy-4" transform="translate(3.668363, 6.525402) scale(-1, 1) translate(-3.668363, -6.525402) "></path>
+                    <path d="M0.347132733,26.4161048 L-0.0864086019,25.5149711 C1.38976099,24.8047762 2.58859496,22.4534635 3.42297211,18.445643 C4.3404767,14.0385308 5.59675087,11.8846627 7.41522869,12.1919382 L7.2486165,13.1779607 C6.23482591,13.0066565 5.21146941,14.7611898 4.40198107,18.6494602 C3.50936528,22.9370223 2.18678958,25.5310338 0.347132733,26.4161048 Z" id="Path-10-Copy-5" transform="translate(3.664410, 19.289610) scale(-1, -1) translate(-3.664410, -19.289610) "></path>
+                </g>
+                <g id="Group-41" transform="translate(12.904777, 12.671536) scale(-1, 1) translate(-12.904777, -12.671536) translate(0.904777, 0.171536)">
+                    <g id="Group-3-Copy-4" transform="translate(0.637410, 4.936735)" fill="#979797">
+                        <path d="M0.368122905,8.4224282 L0.0752793305,7.46626784 C1.36858818,7.07016568 2.38766903,5.79776565 3.10984123,3.58950518 C3.94245996,1.04352094 5.1176363,-0.239109036 6.67940644,-0.0711123506 L6.5724553,0.923151927 C5.61553556,0.820217864 4.76347371,1.75018899 4.06030593,3.9003377 C3.24669161,6.38821018 2.02352415,7.91542788 0.368122905,8.4224282 Z" id="Path-10-Copy-2"></path>
+                        <path d="M0.37964105,16.6034656 L0.0637611857,15.6546664 C1.35454864,15.2249298 2.38053001,13.8324235 3.10627239,11.4201047 C3.93608382,8.6618675 5.1049131,7.27513689 6.68400028,7.45977969 L6.56786146,8.45301268 C5.62825876,8.34314485 4.76984985,9.36158435 4.06387476,11.7081979 C3.25383063,14.40073 2.03756369,16.0515002 0.37964105,16.6034656 Z" id="Path-10-Copy-3" transform="translate(3.373881, 12.023466) scale(1, -1) translate(-3.373881, -12.023466) "></path>
+                    </g>
+                    <path d="M9.08588957,18.2503457 L9.08588957,22.2503457 L21.0858896,22.2503457 L21.0858896,18.2503457 L9.08588957,18.2503457 Z M8.08588957,16.2503457 L22.0858896,16.2503457 C22.6381743,16.2503457 23.0858896,16.698061 23.0858896,17.2503457 L23.0858896,23.2503457 C23.0858896,23.8026305 22.6381743,24.2503457 22.0858896,24.2503457 L8.08588957,24.2503457 C7.53360482,24.2503457 7.08588957,23.8026305 7.08588957,23.2503457 L7.08588957,17.2503457 C7.08588957,16.698061 7.53360482,16.2503457 8.08588957,16.2503457 Z" id="Rectangle-30-Copy-15" fill="#767676"></path>
+                    <path d="M9.08588957,2.37687482 L9.08588957,6.37687482 L21.0858896,6.37687482 L21.0858896,2.37687482 L9.08588957,2.37687482 Z M8.08588957,0.376874819 L22.0858896,0.376874819 C22.6381743,0.376874819 23.0858896,0.82459007 23.0858896,1.37687482 L23.0858896,7.37687482 C23.0858896,7.92915957 22.6381743,8.37687482 22.0858896,8.37687482 L8.08588957,8.37687482 C7.53360482,8.37687482 7.08588957,7.92915957 7.08588957,7.37687482 L7.08588957,1.37687482 C7.08588957,0.82459007 7.53360482,0.376874819 8.08588957,0.376874819 Z" id="Rectangle-30-Copy-16" fill="#767676"></path>
+                </g>
+                <path d="M25.8159509,40 L37.8159509,40 L37.8159509,36 L25.8159509,36 L25.8159509,40 Z M24.8159509,34 L38.8159509,34 C39.3682357,34 39.8159509,34.4477153 39.8159509,35 L39.8159509,41 C39.8159509,41.5522847 39.3682357,42 38.8159509,42 L24.8159509,42 C24.2636662,42 23.8159509,41.5522847 23.8159509,41 L23.8159509,35 C23.8159509,34.4477153 24.2636662,34 24.8159509,34 Z" id="Rectangle-30-Copy-12" fill="#767676" transform="translate(31.815951, 38.000000) scale(-1, 1) translate(-31.815951, -38.000000) "></path>
+                <path d="M25.8159509,15.1698828 L37.8159509,15.1698828 L37.8159509,11.1698828 L25.8159509,11.1698828 L25.8159509,15.1698828 Z M24.8159509,9.16988278 L38.8159509,9.16988278 C39.3682357,9.16988278 39.8159509,9.61759803 39.8159509,10.1698828 L39.8159509,16.1698828 C39.8159509,16.7221675 39.3682357,17.1698828 38.8159509,17.1698828 L24.8159509,17.1698828 C24.2636662,17.1698828 23.8159509,16.7221675 23.8159509,16.1698828 L23.8159509,10.1698828 C23.8159509,9.61759803 24.2636662,9.16988278 24.8159509,9.16988278 Z" id="Rectangle-30-Copy-13" fill="#767676" transform="translate(31.815951, 13.169883) scale(-1, 1) translate(-31.815951, -13.169883) "></path>
+            </g>
+            <g id="Group-39" transform="translate(0.000000, 9.000000)">
+                <g id="Group-40" transform="translate(38.815951, 3.000000)" fill="#979797">
+                    <path d="M0.332721862,13.1225916 L-0.0719977312,12.2081508 C1.40172171,11.5559018 2.59301823,9.40644581 3.42480852,5.73094063 C4.34346701,1.67158332 5.60974888,-0.325620497 7.40872285,-0.0459786699 L7.25512234,0.942154359 C6.2218279,0.781533721 5.2084791,2.37980669 4.40014465,5.95166543 C3.50494202,9.90737629 2.17482886,12.3072991 0.332721862,13.1225916 Z" id="Path-10-Copy-4" transform="translate(3.668363, 6.525402) scale(-1, 1) translate(-3.668363, -6.525402) "></path>
+                    <path d="M0.347132733,26.4161048 L-0.0864086019,25.5149711 C1.38976099,24.8047762 2.58859496,22.4534635 3.42297211,18.445643 C4.3404767,14.0385308 5.59675087,11.8846627 7.41522869,12.1919382 L7.2486165,13.1779607 C6.23482591,13.0066565 5.21146941,14.7611898 4.40198107,18.6494602 C3.50936528,22.9370223 2.18678958,25.5310338 0.347132733,26.4161048 Z" id="Path-10-Copy-5" transform="translate(3.664410, 19.289610) scale(-1, -1) translate(-3.664410, -19.289610) "></path>
+                </g>
+                <path d="M48.1478735,13.6388701 L48.1478735,17.6388701 L60.1478735,17.6388701 L60.1478735,13.6388701 L48.1478735,13.6388701 Z M47.1478735,11.6388701 L61.1478735,11.6388701 C61.7001583,11.6388701 62.1478735,12.0865854 62.1478735,12.6388701 L62.1478735,18.6388701 C62.1478735,19.1911549 61.7001583,19.6388701 61.1478735,19.6388701 L47.1478735,19.6388701 C46.5955888,19.6388701 46.1478735,19.1911549 46.1478735,18.6388701 L46.1478735,12.6388701 C46.1478735,12.0865854 46.5955888,11.6388701 47.1478735,11.6388701 Z" id="Rectangle-30-Copy" fill="#767676"></path>
+                <g id="Group-41" transform="translate(12.904777, 29.171536) scale(-1, 1) translate(-12.904777, -29.171536) translate(0.904777, 17.171536)">
+                    <g id="Group-3-Copy-4" transform="translate(0.637410, 4.936735)" fill="#979797">
+                        <path d="M0.368122905,8.10881793 L0.0752793305,7.15265757 C1.36858818,6.75655541 2.38766903,5.48415538 3.10984123,3.27589491 C3.94245996,0.729910673 5.1176363,-0.552719306 6.67940644,-0.384722621 L6.5724553,0.609541656 C5.61553556,0.506607594 4.76347371,1.43657872 4.06030593,3.58672743 C3.24669161,6.07459991 2.02352415,7.60181761 0.368122905,8.10881793 Z" id="Path-10-Copy-2"></path>
+                        <path d="M0.37964105,16.2898553 L0.0637611857,15.3410562 C1.35454864,14.9113195 2.38053001,13.5188132 3.10627239,11.1064945 C3.93608382,8.34825723 5.1049131,6.96152662 6.68400028,7.14616942 L6.56786146,8.13940241 C5.62825876,8.02953458 4.76984985,9.04797408 4.06387476,11.3945877 C3.25383063,14.0871198 2.03756369,15.7378899 0.37964105,16.2898553 Z" id="Path-10-Copy-3" transform="translate(3.373881, 11.709856) scale(1, -1) translate(-3.373881, -11.709856) "></path>
+                    </g>
+                    <path d="M9.08588957,17.9367355 L9.08588957,21.9367355 L21.0858896,21.9367355 L21.0858896,17.9367355 L9.08588957,17.9367355 Z M8.08588957,15.9367355 L22.0858896,15.9367355 C22.6381743,15.9367355 23.0858896,16.3844507 23.0858896,16.9367355 L23.0858896,22.9367355 C23.0858896,23.4890202 22.6381743,23.9367355 22.0858896,23.9367355 L8.08588957,23.9367355 C7.53360482,23.9367355 7.08588957,23.4890202 7.08588957,22.9367355 L7.08588957,16.9367355 C7.08588957,16.3844507 7.53360482,15.9367355 8.08588957,15.9367355 Z" id="Rectangle-30-Copy-15" fill="#767676"></path>
+                    <path d="M9.08588957,2.06326455 L9.08588957,6.06326455 L21.0858896,6.06326455 L21.0858896,2.06326455 L9.08588957,2.06326455 Z M8.08588957,0.0632645492 L22.0858896,0.0632645492 C22.6381743,0.0632645492 23.0858896,0.510979799 23.0858896,1.06326455 L23.0858896,7.06326455 C23.0858896,7.6155493 22.6381743,8.06326455 22.0858896,8.06326455 L8.08588957,8.06326455 C7.53360482,8.06326455 7.08588957,7.6155493 7.08588957,7.06326455 L7.08588957,1.06326455 C7.08588957,0.510979799 7.53360482,0.0632645492 8.08588957,0.0632645492 Z" id="Rectangle-30-Copy-16" fill="#767676"></path>
+                </g>
+                <path d="M25.8159509,31 L37.8159509,31 L37.8159509,27 L25.8159509,27 L25.8159509,31 Z M24.8159509,25 L38.8159509,25 C39.3682357,25 39.8159509,25.4477153 39.8159509,26 L39.8159509,32 C39.8159509,32.5522847 39.3682357,33 38.8159509,33 L24.8159509,33 C24.2636662,33 23.8159509,32.5522847 23.8159509,32 L23.8159509,26 C23.8159509,25.4477153 24.2636662,25 24.8159509,25 Z" id="Rectangle-30-Copy-12" fill="#767676" transform="translate(31.815951, 29.000000) scale(-1, 1) translate(-31.815951, -29.000000) "></path>
+                <path d="M25.8159509,2.16988278 L25.8159509,6.16988278 L37.8159509,6.16988278 L37.8159509,2.16988278 L25.8159509,2.16988278 Z M24.8159509,0.169882775 L38.8159509,0.169882775 C39.3682357,0.169882775 39.8159509,0.617598025 39.8159509,1.16988278 L39.8159509,7.16988278 C39.8159509,7.72216753 39.3682357,8.16988278 38.8159509,8.16988278 L24.8159509,8.16988278 C24.2636662,8.16988278 23.8159509,7.72216753 23.8159509,7.16988278 L23.8159509,1.16988278 C23.8159509,0.617598025 24.2636662,0.169882775 24.8159509,0.169882775 Z" id="Rectangle-30-Copy-13" fill="#767676" transform="translate(31.815951, 4.169883) scale(-1, 1) translate(-31.815951, -4.169883) "></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/dbstyle/mindmap_images/Mind_Map2.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="105px" height="49px" viewBox="0 0 105 49" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Mindmap2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Mindmap2" transform="translate(-1.500000, -0.696554)" fill-rule="nonzero">
+            <g id="Group-43" transform="translate(61.000000, 0.000000)">
+                <g id="Group-41" transform="translate(28.650697, 0.322921)" fill="#767676">
+                    <path d="M2.08588957,18.2503457 L2.08588957,22.2503457 L14.0858896,22.2503457 L14.0858896,18.2503457 L2.08588957,18.2503457 Z M1.08588957,16.2503457 L15.0858896,16.2503457 C15.6381743,16.2503457 16.0858896,16.698061 16.0858896,17.2503457 L16.0858896,23.2503457 C16.0858896,23.8026305 15.6381743,24.2503457 15.0858896,24.2503457 L1.08588957,24.2503457 C0.533604821,24.2503457 0.0858895706,23.8026305 0.0858895706,23.2503457 L0.0858895706,17.2503457 C0.0858895706,16.698061 0.533604821,16.2503457 1.08588957,16.2503457 Z" id="Rectangle-30-Copy-15"></path>
+                    <path d="M2.08588957,2.37687482 L2.08588957,6.37687482 L14.0858896,6.37687482 L14.0858896,2.37687482 L2.08588957,2.37687482 Z M1.08588957,0.376874819 L15.0858896,0.376874819 C15.6381743,0.376874819 16.0858896,0.82459007 16.0858896,1.37687482 L16.0858896,7.37687482 C16.0858896,7.92915957 15.6381743,8.37687482 15.0858896,8.37687482 L1.08588957,8.37687482 C0.533604821,8.37687482 0.0858895706,7.92915957 0.0858895706,7.37687482 L0.0858895706,1.37687482 C0.0858895706,0.82459007 0.533604821,0.376874819 1.08588957,0.376874819 Z" id="Rectangle-30-Copy-16"></path>
+                </g>
+                <path d="M8.73952262,32.1513849 L8.73952262,36.1513849 L20.7395226,36.1513849 L20.7395226,32.1513849 L8.73952262,32.1513849 Z M7.73952262,30.1513849 L21.7395226,30.1513849 C22.2918074,30.1513849 22.7395226,30.5991001 22.7395226,31.1513849 L22.7395226,37.1513849 C22.7395226,37.7036696 22.2918074,38.1513849 21.7395226,38.1513849 L7.73952262,38.1513849 C7.18723787,38.1513849 6.73952262,37.7036696 6.73952262,37.1513849 L6.73952262,31.1513849 C6.73952262,30.5991001 7.18723787,30.1513849 7.73952262,30.1513849 Z" id="Rectangle-30-Copy-12" fill="#767676"></path>
+                <path d="M8.73952262,11.3212676 L8.73952262,15.3212676 L20.7395226,15.3212676 L20.7395226,11.3212676 L8.73952262,11.3212676 Z M7.73952262,9.32126764 L21.7395226,9.32126764 C22.2918074,9.32126764 22.7395226,9.76898289 22.7395226,10.3212676 L22.7395226,16.3212676 C22.7395226,16.8735524 22.2918074,17.3212676 21.7395226,17.3212676 L7.73952262,17.3212676 C7.18723787,17.3212676 6.73952262,16.8735524 6.73952262,16.3212676 L6.73952262,10.3212676 C6.73952262,9.76898289 7.18723787,9.32126764 7.73952262,9.32126764 Z" id="Rectangle-30-Copy-13" fill="#767676"></path>
+                <polygon id="Path-11" fill="#979797" points="29.0007642 20.5735144 29.0007642 21.5735144 24.9644661 21.5735144 24.9644661 4.5 29 4.5 29 5.5 25.9644661 5.5 25.9644661 20.5735144"></polygon>
+                <polygon id="Path-11-Copy" fill="#979797" points="3.7032245 33.7641582 6.73952262 33.7641582 6.73952262 34.7641582 2.7032245 34.7641582 2.7032245 13.2358418 6.73875841 13.2358418 6.73875841 14.2358418 3.7032245 14.2358418"></polygon>
+                <polygon id="Path-12" fill="#979797" points="22.5 14 22.5 13 25 13 25 14"></polygon>
+                <polygon id="Path-12-Copy" fill="#979797" points="0.238758408 24.9632428 0.238758408 23.9632428 2.73875841 23.9632428 2.73875841 24.9632428"></polygon>
+            </g>
+            <g id="Group-43-Copy" transform="translate(23.703347, 30.000000) scale(-1, -1) translate(-23.703347, -30.000000) translate(0.703347, 10.500000)">
+                <g id="Group-41" transform="translate(28.650697, 0.322921)" fill="#767676">
+                    <path d="M2.08588957,18.2503457 L2.08588957,22.2503457 L14.0858896,22.2503457 L14.0858896,18.2503457 L2.08588957,18.2503457 Z M1.08588957,16.2503457 L15.0858896,16.2503457 C15.6381743,16.2503457 16.0858896,16.698061 16.0858896,17.2503457 L16.0858896,23.2503457 C16.0858896,23.8026305 15.6381743,24.2503457 15.0858896,24.2503457 L1.08588957,24.2503457 C0.533604821,24.2503457 0.0858895706,23.8026305 0.0858895706,23.2503457 L0.0858895706,17.2503457 C0.0858895706,16.698061 0.533604821,16.2503457 1.08588957,16.2503457 Z" id="Rectangle-30-Copy-15"></path>
+                    <path d="M2.08588957,2.37687482 L2.08588957,6.37687482 L14.0858896,6.37687482 L14.0858896,2.37687482 L2.08588957,2.37687482 Z M1.08588957,0.376874819 L15.0858896,0.376874819 C15.6381743,0.376874819 16.0858896,0.82459007 16.0858896,1.37687482 L16.0858896,7.37687482 C16.0858896,7.92915957 15.6381743,8.37687482 15.0858896,8.37687482 L1.08588957,8.37687482 C0.533604821,8.37687482 0.0858895706,7.92915957 0.0858895706,7.37687482 L0.0858895706,1.37687482 C0.0858895706,0.82459007 0.533604821,0.376874819 1.08588957,0.376874819 Z" id="Rectangle-30-Copy-16"></path>
+                </g>
+                <path d="M8.73952262,32.1513849 L8.73952262,36.1513849 L20.7395226,36.1513849 L20.7395226,32.1513849 L8.73952262,32.1513849 Z M7.73952262,30.1513849 L21.7395226,30.1513849 C22.2918074,30.1513849 22.7395226,30.5991001 22.7395226,31.1513849 L22.7395226,37.1513849 C22.7395226,37.7036696 22.2918074,38.1513849 21.7395226,38.1513849 L7.73952262,38.1513849 C7.18723787,38.1513849 6.73952262,37.7036696 6.73952262,37.1513849 L6.73952262,31.1513849 C6.73952262,30.5991001 7.18723787,30.1513849 7.73952262,30.1513849 Z" id="Rectangle-30-Copy-12" fill="#767676"></path>
+                <path d="M8.73952262,11.3212676 L8.73952262,15.3212676 L20.7395226,15.3212676 L20.7395226,11.3212676 L8.73952262,11.3212676 Z M7.73952262,9.32126764 L21.7395226,9.32126764 C22.2918074,9.32126764 22.7395226,9.76898289 22.7395226,10.3212676 L22.7395226,16.3212676 C22.7395226,16.8735524 22.2918074,17.3212676 21.7395226,17.3212676 L7.73952262,17.3212676 C7.18723787,17.3212676 6.73952262,16.8735524 6.73952262,16.3212676 L6.73952262,10.3212676 C6.73952262,9.76898289 7.18723787,9.32126764 7.73952262,9.32126764 Z" id="Rectangle-30-Copy-13" fill="#767676"></path>
+                <polygon id="Path-11" fill="#979797" points="29.0007642 20.5735144 29.0007642 21.5735144 24.9644661 21.5735144 24.9644661 4.5 29 4.5 29 5.5 25.9644661 5.5 25.9644661 20.5735144"></polygon>
+                <polygon id="Path-11-Copy" fill="#979797" points="3.7032245 33.7641582 6.73952262 33.7641582 6.73952262 34.7641582 2.7032245 34.7641582 2.7032245 13.2358418 6.73875841 13.2358418 6.73875841 14.2358418 3.7032245 14.2358418"></polygon>
+                <polygon id="Path-12" fill="#979797" points="22.5 14 22.5 13 25 13 25 14"></polygon>
+                <polygon id="Path-12-Copy" fill="#979797" points="0.238758408 24.9632428 0.238758408 23.9632428 2.73875841 23.9632428 2.73875841 24.9632428"></polygon>
+            </g>
+            <path d="M47.7033471,22.790255 L47.7033471,26.790255 L59.7033471,26.790255 L59.7033471,22.790255 L47.7033471,22.790255 Z M46.7033471,20.790255 L60.7033471,20.790255 C61.2556318,20.790255 61.7033471,21.2379702 61.7033471,21.790255 L61.7033471,27.790255 C61.7033471,28.3425397 61.2556318,28.790255 60.7033471,28.790255 L46.7033471,28.790255 C46.1510623,28.790255 45.7033471,28.3425397 45.7033471,27.790255 L45.7033471,21.790255 C45.7033471,21.2379702 46.1510623,20.790255 46.7033471,20.790255 Z" id="Rectangle-30-Copy" fill="#767676"></path>
+        </g>
+    </g>
+</svg>

src/assets/dbstyle/mindmap_images/Mind_Map3.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="102px" height="49px" viewBox="0 0 102 49" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Mindmap3</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Mindmap3" transform="translate(0.000000, -0.696554)" fill-rule="nonzero">
+            <g id="Group-46" transform="translate(59.000000, 0.000000)">
+                <g id="Group-45" transform="translate(0.000000, 13.000000)" fill="#979797">
+                    <polygon id="Path-13" points="5.56105221 0.260573935 6.43894779 0.739426065 0.438947786 11.7394261 -0.438947786 11.2605739"></polygon>
+                    <polygon id="Path-13-Copy" transform="translate(3.000000, 16.500000) scale(1, -1) translate(-3.000000, -16.500000) " points="5.56105221 10.7605739 6.43894779 11.2394261 0.438947786 22.2394261 -0.438947786 21.7605739"></polygon>
+                </g>
+                <g id="Group-45-Copy" transform="translate(20.947350, 4.043695)" fill="#979797">
+                    <polygon id="Path-13" points="5.58459947 0.128820031 6.41540053 0.685389533 0.415400527 9.64169473 -0.415400527 9.08512523"></polygon>
+                    <polygon id="Path-13-Copy" transform="translate(3.000000, 13.434458) scale(1, -1) translate(-3.000000, -13.434458) " points="5.58459947 8.67802045 6.41540053 9.23458995 0.415400527 18.1908952 -0.415400527 17.6343256"></polygon>
+                </g>
+                <g id="Group-41" transform="translate(25.947350, 0.322921)" fill="#767676">
+                    <path d="M2.08588957,18.2503457 L2.08588957,22.2503457 L14.0858896,22.2503457 L14.0858896,18.2503457 L2.08588957,18.2503457 Z M1.08588957,16.2503457 L15.0858896,16.2503457 C15.6381743,16.2503457 16.0858896,16.698061 16.0858896,17.2503457 L16.0858896,23.2503457 C16.0858896,23.8026305 15.6381743,24.2503457 15.0858896,24.2503457 L1.08588957,24.2503457 C0.533604821,24.2503457 0.0858895706,23.8026305 0.0858895706,23.2503457 L0.0858895706,17.2503457 C0.0858895706,16.698061 0.533604821,16.2503457 1.08588957,16.2503457 Z" id="Rectangle-30-Copy-15"></path>
+                    <path d="M2.08588957,2.37687482 L2.08588957,6.37687482 L14.0858896,6.37687482 L14.0858896,2.37687482 L2.08588957,2.37687482 Z M1.08588957,0.376874819 L15.0858896,0.376874819 C15.6381743,0.376874819 16.0858896,0.82459007 16.0858896,1.37687482 L16.0858896,7.37687482 C16.0858896,7.92915957 15.6381743,8.37687482 15.0858896,8.37687482 L1.08588957,8.37687482 C0.533604821,8.37687482 0.0858895706,7.92915957 0.0858895706,7.37687482 L0.0858895706,1.37687482 C0.0858895706,0.82459007 0.533604821,0.376874819 1.08588957,0.376874819 Z" id="Rectangle-30-Copy-16"></path>
+                </g>
+                <path d="M7.03617556,36.1513849 L19.0361756,36.1513849 L19.0361756,32.1513849 L7.03617556,32.1513849 L7.03617556,36.1513849 Z M6.03617556,30.1513849 L20.0361756,30.1513849 C20.5884603,30.1513849 21.0361756,30.5991001 21.0361756,31.1513849 L21.0361756,37.1513849 C21.0361756,37.7036696 20.5884603,38.1513849 20.0361756,38.1513849 L6.03617556,38.1513849 C5.48389081,38.1513849 5.03617556,37.7036696 5.03617556,37.1513849 L5.03617556,31.1513849 C5.03617556,30.5991001 5.48389081,30.1513849 6.03617556,30.1513849 Z" id="Rectangle-30-Copy-12" fill="#767676"></path>
+                <path d="M7.03617556,11.3212676 L7.03617556,15.3212676 L19.0361756,15.3212676 L19.0361756,11.3212676 L7.03617556,11.3212676 Z M6.03617556,9.32126764 L20.0361756,9.32126764 C20.5884603,9.32126764 21.0361756,9.76898289 21.0361756,10.3212676 L21.0361756,16.3212676 C21.0361756,16.8735524 20.5884603,17.3212676 20.0361756,17.3212676 L6.03617556,17.3212676 C5.48389081,17.3212676 5.03617556,16.8735524 5.03617556,16.3212676 L5.03617556,10.3212676 C5.03617556,9.76898289 5.48389081,9.32126764 6.03617556,9.32126764 Z" id="Rectangle-30-Copy-13" fill="#767676"></path>
+            </g>
+            <g id="Group-46-Copy" transform="translate(21.500000, 30.000000) scale(-1, -1) translate(-21.500000, -30.000000) translate(0.000000, 10.500000)">
+                <g id="Group-45" transform="translate(0.000000, 13.000000)" fill="#979797">
+                    <polygon id="Path-13" points="5.56105221 0.260573935 6.43894779 0.739426065 0.438947786 11.7394261 -0.438947786 11.2605739"></polygon>
+                    <polygon id="Path-13-Copy" transform="translate(3.000000, 16.500000) scale(1, -1) translate(-3.000000, -16.500000) " points="5.56105221 10.7605739 6.43894779 11.2394261 0.438947786 22.2394261 -0.438947786 21.7605739"></polygon>
+                </g>
+                <g id="Group-45-Copy" transform="translate(20.947350, 4.043695)" fill="#979797">
+                    <polygon id="Path-13" points="5.58459947 0.128820031 6.41540053 0.685389533 0.415400527 9.64169473 -0.415400527 9.08512523"></polygon>
+                    <polygon id="Path-13-Copy" transform="translate(3.000000, 13.434458) scale(1, -1) translate(-3.000000, -13.434458) " points="5.58459947 8.67802045 6.41540053 9.23458995 0.415400527 18.1908952 -0.415400527 17.6343256"></polygon>
+                </g>
+                <g id="Group-41" transform="translate(25.947350, 0.322921)" fill="#767676">
+                    <path d="M2.08588957,18.2503457 L2.08588957,22.2503457 L14.0858896,22.2503457 L14.0858896,18.2503457 L2.08588957,18.2503457 Z M1.08588957,16.2503457 L15.0858896,16.2503457 C15.6381743,16.2503457 16.0858896,16.698061 16.0858896,17.2503457 L16.0858896,23.2503457 C16.0858896,23.8026305 15.6381743,24.2503457 15.0858896,24.2503457 L1.08588957,24.2503457 C0.533604821,24.2503457 0.0858895706,23.8026305 0.0858895706,23.2503457 L0.0858895706,17.2503457 C0.0858895706,16.698061 0.533604821,16.2503457 1.08588957,16.2503457 Z" id="Rectangle-30-Copy-15"></path>
+                    <path d="M2.08588957,2.37687482 L2.08588957,6.37687482 L14.0858896,6.37687482 L14.0858896,2.37687482 L2.08588957,2.37687482 Z M1.08588957,0.376874819 L15.0858896,0.376874819 C15.6381743,0.376874819 16.0858896,0.82459007 16.0858896,1.37687482 L16.0858896,7.37687482 C16.0858896,7.92915957 15.6381743,8.37687482 15.0858896,8.37687482 L1.08588957,8.37687482 C0.533604821,8.37687482 0.0858895706,7.92915957 0.0858895706,7.37687482 L0.0858895706,1.37687482 C0.0858895706,0.82459007 0.533604821,0.376874819 1.08588957,0.376874819 Z" id="Rectangle-30-Copy-16"></path>
+                </g>
+                <path d="M7.03617556,36.1513849 L19.0361756,36.1513849 L19.0361756,32.1513849 L7.03617556,32.1513849 L7.03617556,36.1513849 Z M6.03617556,30.1513849 L20.0361756,30.1513849 C20.5884603,30.1513849 21.0361756,30.5991001 21.0361756,31.1513849 L21.0361756,37.1513849 C21.0361756,37.7036696 20.5884603,38.1513849 20.0361756,38.1513849 L6.03617556,38.1513849 C5.48389081,38.1513849 5.03617556,37.7036696 5.03617556,37.1513849 L5.03617556,31.1513849 C5.03617556,30.5991001 5.48389081,30.1513849 6.03617556,30.1513849 Z" id="Rectangle-30-Copy-12" fill="#767676"></path>
+                <path d="M7.03617556,11.3212676 L7.03617556,15.3212676 L19.0361756,15.3212676 L19.0361756,11.3212676 L7.03617556,11.3212676 Z M6.03617556,9.32126764 L20.0361756,9.32126764 C20.5884603,9.32126764 21.0361756,9.76898289 21.0361756,10.3212676 L21.0361756,16.3212676 C21.0361756,16.8735524 20.5884603,17.3212676 20.0361756,17.3212676 L6.03617556,17.3212676 C5.48389081,17.3212676 5.03617556,16.8735524 5.03617556,16.3212676 L5.03617556,10.3212676 C5.03617556,9.76898289 5.48389081,9.32126764 6.03617556,9.32126764 Z" id="Rectangle-30-Copy-13" fill="#767676"></path>
+            </g>
+            <path d="M45,26.790255 L57,26.790255 L57,22.790255 L45,22.790255 L45,26.790255 Z M44,20.790255 L58,20.790255 C58.5522847,20.790255 59,21.2379702 59,21.790255 L59,27.790255 C59,28.3425397 58.5522847,28.790255 58,28.790255 L44,28.790255 C43.4477153,28.790255 43,28.3425397 43,27.790255 L43,21.790255 C43,21.2379702 43.4477153,20.790255 44,20.790255 Z" id="Rectangle-30-Copy-11" fill="#767676"></path>
+        </g>
+    </g>
+</svg>

src/assets/dbstyle/orgchart_images/OrgRenderingStyle_1.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="135px" height="135px" viewBox="0 0 135 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>OrgRenderingStyle_1 OrgRenderingStyle_1 OrgRenderingStyle_1 </title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="OrgRenderingStyle_1-OrgRenderingStyle_1-OrgRenderingStyle_1-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-2" transform="translate(1.000000, 31.000000)">
+            <g id="Group" transform="translate(0.000000, 0.500000)" stroke="#FFEBB0" stroke-width="2">
+                <rect id="Rectangle-3-Copy-7" fill="#FFF8E5" x="48.5963086" y="1.17861717" width="35.9199819" height="13.2827523" rx="2"></rect>
+                <rect id="Rectangle-3-Copy-10" fill="#FFF8E5" x="48.5963086" y="29.1969964" width="35.9199819" height="13.2827523" rx="2"></rect>
+                <rect id="Rectangle-3-Copy-11" fill="#FFF8E5" x="48.5963086" y="57.2153757" width="35.9199819" height="13.2827523" rx="2"></rect>
+                <rect id="Rectangle-3-Copy-12" fill="#FFF8E5" x="1.19633127" y="57.2153757" width="35.9199819" height="13.2827523" rx="2"></rect>
+                <rect id="Rectangle-3-Copy-13" fill="#FFF8E5" x="95.9962859" y="57.2153757" width="35.9199819" height="13.2827523" rx="2"></rect>
+                <path d="M66.5562995,15.1332779 L66.5562995,28.7480069" id="Path-11"></path>
+                <path d="M66.5562995,43.4797487 C66.5562995,51.5696909 66.5562995,55.9648918 66.5562995,56.6653513" id="Path-11-Copy"></path>
+                <polyline id="Path-12" points="18.0160688 56.3710886 18.0160688 49.6419702 115.604167 49.6419702 115.604167 56.5451697"></polyline>
+            </g>
+            <rect id="Rectangle-5" fill="#444444" x="56.0578512" y="7" width="21.9834711" height="2"></rect>
+            <rect id="Rectangle-5-Copy" fill="#444444" x="56.0578512" y="35.5" width="21.9834711" height="2"></rect>
+            <rect id="Rectangle-5-Copy-2" fill="#444444" x="56.0578512" y="63.2074929" width="21.9834711" height="2"></rect>
+            <rect id="Rectangle-5-Copy-4" fill="#444444" x="8.96135909" y="63.2074929" width="21.9834711" height="2"></rect>
+            <rect id="Rectangle-5-Copy-3" fill="#444444" x="103.184979" y="63.2074929" width="21.9834711" height="2"></rect>
+        </g>
+    </g>
+</svg>

src/assets/dbstyle/orgchart_images/OrgRenderingStyle_2.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="135px" height="135px" viewBox="0 0 135 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>OrgRenderingStyle_2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="OrgRenderingStyle_2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(1.000000, 27.709016)">
+            <g id="Group-Copy" transform="translate(0.515273, 0.545082)" stroke="#88FEE1" stroke-width="2">
+                <rect id="Rectangle-3-Copy-7" fill="#B6FFF2" x="48.2061749" y="1.19472199" width="35.6091623" height="14.6607054" rx="2"></rect>
+                <rect id="Rectangle-3-Copy-10" fill="#B6FFF2" x="48.2061749" y="31.7393486" width="35.6091623" height="14.6607054" rx="2"></rect>
+                <rect id="Rectangle-3-Copy-11" fill="#B6FFF2" x="48.2061749" y="62.2839751" width="35.6091623" height="14.6607054" rx="2"></rect>
+                <rect id="Rectangle-3-Copy-12" fill="#B6FFF2" x="1.19472199" y="62.2839751" width="35.6091623" height="14.6607054" rx="2"></rect>
+                <rect id="Rectangle-3-Copy-13" fill="#B6FFF2" x="95.2176278" y="62.2839751" width="35.6091623" height="14.6607054" rx="2"></rect>
+                <path d="M66.0107561,16.4977537 L66.0107561,31.3400403" id="Path-11"></path>
+                <path d="M66.0107561,47.400054 C66.0107561,56.2194172 66.0107561,61.0109066 66.0107561,61.7745223" id="Path-11-Copy"></path>
+                <polyline id="Path-12" points="17.8683961 61.4537278 17.8683961 54.1178856 114.656592 54.1178856 114.656592 61.6435047"></polyline>
+            </g>
+            <rect id="Rectangle-5-Copy-5" fill="#444444" x="56.1136335" y="5.45081967" width="21.8032787" height="2.18032787"></rect>
+            <rect id="Rectangle-5-Copy-6" fill="#444444" x="56.1136335" y="36.5204918" width="21.8032787" height="2.18032787"></rect>
+            <rect id="Rectangle-5-Copy-7" fill="#444444" x="56.1136335" y="66.7262013" width="21.8032787" height="2.18032787"></rect>
+            <rect id="Rectangle-5-Copy-8" fill="#444444" x="9.40317812" y="66.7262013" width="21.8032787" height="2.18032787"></rect>
+            <rect id="Rectangle-5-Copy-9" fill="#444444" x="102.854473" y="66.7262013" width="21.8032787" height="2.18032787"></rect>
+            <rect id="Rectangle-5-Copy-14" fill="#B7B7B7" x="56.1136335" y="9.81147541" width="21.8032787" height="2.18032787"></rect>
+            <rect id="Rectangle-5-Copy-13" fill="#B7B7B7" x="56.1136335" y="40.8811475" width="21.8032787" height="2.18032787"></rect>
+            <rect id="Rectangle-5-Copy-12" fill="#B7B7B7" x="56.1136335" y="71.086857" width="21.8032787" height="2.18032787"></rect>
+            <rect id="Rectangle-5-Copy-11" fill="#B7B7B7" x="9.40317812" y="71.086857" width="21.8032787" height="2.18032787"></rect>
+            <rect id="Rectangle-5-Copy-10" fill="#B7B7B7" x="102.854473" y="71.086857" width="21.8032787" height="2.18032787"></rect>
+        </g>
+    </g>
+</svg>

src/assets/dbstyle/orgchart_images/OrgRenderingStyle_3.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="135px" height="135px" viewBox="0 0 135 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>OrgRenderingStyle_3</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="OrgRenderingStyle_3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-2" transform="translate(1.000000, 28.032520)">
+            <g id="Group" transform="translate(0.540650, 0.000000)">
+                <g id="Group-Copy" transform="translate(0.511084, 0.540650)" stroke="#FFB3A6" stroke-width="2">
+                    <rect id="Rectangle-3-Copy-7" fill="#FFD7D0" x="47.8223849" y="1.19313889" width="35.3033968" height="14.5252525" rx="2"></rect>
+                    <rect id="Rectangle-3-Copy-10" fill="#FFD7D0" x="47.8223849" y="31.4894352" width="35.3033968" height="14.5252525" rx="2"></rect>
+                    <rect id="Rectangle-3-Copy-11" fill="#FFD7D0" x="47.8223849" y="61.7857314" width="35.3033968" height="14.5252525" rx="2"></rect>
+                    <rect id="Rectangle-3-Copy-12" fill="#FFD7D0" x="1.19313889" y="61.7857314" width="35.3033968" height="14.5252525" rx="2"></rect>
+                    <rect id="Rectangle-3-Copy-13" fill="#FFD7D0" x="94.4516309" y="61.7857314" width="35.3033968" height="14.5252525" rx="2"></rect>
+                    <path d="M65.4740833,16.3636256 L65.4740833,31.0852433" id="Path-11"></path>
+                    <path d="M65.4740833,47.0146877 C65.4740833,55.7623487 65.4740833,60.514883 65.4740833,61.2722904" id="Path-11-Copy"></path>
+                    <polyline id="Path-12" points="17.7231246 60.954104 17.7231246 53.6779027 113.724424 53.6779027 113.724424 61.142338"></polyline>
+                </g>
+                <rect id="Rectangle-5-Copy-5" fill="#444444" x="64.0354539" y="5.40650407" width="15.1382114" height="2.16260163"></rect>
+                <rect id="Rectangle-5-Copy-6" fill="#444444" x="64.0354539" y="36.2235772" width="15.1382114" height="2.16260163"></rect>
+                <rect id="Rectangle-5-Copy-7" fill="#444444" x="64.0354539" y="66.1837118" width="15.1382114" height="2.16260163"></rect>
+                <rect id="Rectangle-5-Copy-8" fill="#444444" x="16.8088987" y="66.1837118" width="15.1382114" height="2.16260163"></rect>
+                <rect id="Rectangle-5-Copy-9" fill="#444444" x="110.396286" y="66.1837118" width="15.1382114" height="2.16260163"></rect>
+                <rect id="Rectangle-5-Copy-14" fill="#B7B7B7" x="64.0354539" y="9.73170732" width="10.8130081" height="2.16260163"></rect>
+                <rect id="Rectangle-5-Copy-13" fill="#B7B7B7" x="64.0354539" y="40.5487805" width="10.8130081" height="2.16260163"></rect>
+                <rect id="Rectangle-5-Copy-12" fill="#B7B7B7" x="64.0354539" y="70.5089151" width="10.8130081" height="2.16260163"></rect>
+                <rect id="Rectangle-5-Copy-11" fill="#B7B7B7" x="16.8088987" y="70.5089151" width="10.8130081" height="2.16260163"></rect>
+                <rect id="Rectangle-5-Copy-10" fill="#B7B7B7" x="110.396286" y="70.5089151" width="10.8130081" height="2.16260163"></rect>
+            </g>
+            <path d="M56.0961812,3.01863383 C57.7396653,3.01863383 59.1417127,3.6003137 60.3023654,4.76369089 C61.463018,5.92706809 62.0433356,7.32775322 62.0433356,8.9657883 C62.0433356,10.6038234 61.463018,12.0045085 60.3023654,13.1678857 C59.1417127,14.3312629 57.7396653,14.9129428 56.0961812,14.9129428 C54.452697,14.9129428 53.0506496,14.3312629 51.889997,13.1678857 C50.7293443,12.0045085 50.1490267,10.6038234 50.1490267,8.9657883 C50.1490267,7.32775322 50.7293443,5.92706809 51.889997,4.76369089 C53.0506496,3.6003137 54.452697,3.01863383 56.0961812,3.01863383 Z M56.0961812,4.80557226 C55.6040644,4.80557226 55.1815932,4.97774951 54.8287548,5.32210915 C54.4759164,5.6664688 54.2994998,6.08527831 54.2994998,6.57855024 C54.2994998,7.07182217 54.4759164,7.49528512 54.8287548,7.84895178 C55.1815932,8.20261845 55.6040644,8.37944913 56.0961812,8.37944913 C56.5882979,8.37944913 57.0061266,8.20261845 57.3496798,7.84895178 C57.693233,7.49528512 57.865007,7.07182217 57.865007,6.57855024 C57.865007,6.08527831 57.693233,5.6664688 57.3496798,5.32210915 C57.0061266,4.97774951 56.5882979,4.80557226 56.0961812,4.80557226 Z M56.0961812,13.2656089 C56.8297136,13.2656089 57.5075246,13.0934317 58.1296345,12.749072 C58.7517443,12.4047124 59.2577812,11.934715 59.6477605,11.3390659 C59.6477605,10.9667852 59.4295611,10.636391 58.9931557,10.3478735 C58.5567503,10.059356 58.0739261,9.84529776 57.5446684,9.7056925 C57.0154108,9.56608723 56.5325866,9.49628565 56.0961812,9.49628565 C55.6597758,9.49628565 55.1769515,9.56608723 54.6476939,9.7056925 C54.1184363,9.84529776 53.635612,10.059356 53.1992066,10.3478735 C52.7628012,10.636391 52.5353167,10.9667852 52.5167463,11.3390659 C52.9067256,11.934715 53.4174051,12.4047124 54.0488001,12.749072 C54.6801952,13.0934317 55.3626487,13.2656089 56.0961812,13.2656089 Z" id="" fill="#444444"></path>
+            <path d="M56.0961812,33.5203252 C57.7396653,33.5203252 59.1417127,34.1020051 60.3023654,35.2653823 C61.463018,36.4287595 62.0433356,37.8294446 62.0433356,39.4674797 C62.0433356,41.1055148 61.463018,42.5061999 60.3023654,43.6695771 C59.1417127,44.8329543 57.7396653,45.4146341 56.0961812,45.4146341 C54.452697,45.4146341 53.0506496,44.8329543 51.889997,43.6695771 C50.7293443,42.5061999 50.1490267,41.1055148 50.1490267,39.4674797 C50.1490267,37.8294446 50.7293443,36.4287595 51.889997,35.2653823 C53.0506496,34.1020051 54.452697,33.5203252 56.0961812,33.5203252 Z M56.0961812,35.3072636 C55.6040644,35.3072636 55.1815932,35.4794409 54.8287548,35.8238005 C54.4759164,36.1681602 54.2994998,36.5869697 54.2994998,37.0802416 C54.2994998,37.5735135 54.4759164,37.9969765 54.8287548,38.3506432 C55.1815932,38.7043098 55.6040644,38.8811405 56.0961812,38.8811405 C56.5882979,38.8811405 57.0061266,38.7043098 57.3496798,38.3506432 C57.693233,37.9969765 57.865007,37.5735135 57.865007,37.0802416 C57.865007,36.5869697 57.693233,36.1681602 57.3496798,35.8238005 C57.0061266,35.4794409 56.5882979,35.3072636 56.0961812,35.3072636 Z M56.0961812,43.7673003 C56.8297136,43.7673003 57.5075246,43.595123 58.1296345,43.2507634 C58.7517443,42.9064037 59.2577812,42.4364064 59.6477605,41.8407573 C59.6477605,41.4684766 59.4295611,41.1380824 58.9931557,40.8495649 C58.5567503,40.5610473 58.0739261,40.3469891 57.5446684,40.2073839 C57.0154108,40.0677786 56.5325866,39.997977 56.0961812,39.997977 C55.6597758,39.997977 55.1769515,40.0677786 54.6476939,40.2073839 C54.1184363,40.3469891 53.635612,40.5610473 53.1992066,40.8495649 C52.7628012,41.1380824 52.5353167,41.4684766 52.5167463,41.8407573 C52.9067256,42.4364064 53.4174051,42.9064037 54.0488001,43.2507634 C54.6801952,43.595123 55.3626487,43.7673003 56.0961812,43.7673003 Z" id="-copy" fill="#444444"></path>
+            <path d="M56.0961812,63.796748 C57.7396653,63.796748 59.1417127,64.3784278 60.3023654,65.541805 C61.463018,66.7051822 62.0433356,68.1058674 62.0433356,69.7439024 C62.0433356,71.3819375 61.463018,72.7826227 60.3023654,73.9459998 C59.1417127,75.109377 57.7396653,75.6910569 56.0961812,75.6910569 C54.452697,75.6910569 53.0506496,75.109377 51.889997,73.9459998 C50.7293443,72.7826227 50.1490267,71.3819375 50.1490267,69.7439024 C50.1490267,68.1058674 50.7293443,66.7051822 51.889997,65.541805 C53.0506496,64.3784278 54.452697,63.796748 56.0961812,63.796748 Z M56.0961812,65.5836864 C55.6040644,65.5836864 55.1815932,65.7558636 54.8287548,66.1002233 C54.4759164,66.4445829 54.2994998,66.8633924 54.2994998,67.3566644 C54.2994998,67.8499363 54.4759164,68.2733993 54.8287548,68.6270659 C55.1815932,68.9807326 55.6040644,69.1575633 56.0961812,69.1575633 C56.5882979,69.1575633 57.0061266,68.9807326 57.3496798,68.6270659 C57.693233,68.2733993 57.865007,67.8499363 57.865007,67.3566644 C57.865007,66.8633924 57.693233,66.4445829 57.3496798,66.1002233 C57.0061266,65.7558636 56.5882979,65.5836864 56.0961812,65.5836864 Z M56.0961812,74.043723 C56.8297136,74.043723 57.5075246,73.8715458 58.1296345,73.5271862 C58.7517443,73.1828265 59.2577812,72.7128292 59.6477605,72.11718 C59.6477605,71.7448993 59.4295611,71.4145052 58.9931557,71.1259876 C58.5567503,70.8374701 58.0739261,70.6234119 57.5446684,70.4838066 C57.0154108,70.3442014 56.5325866,70.2743998 56.0961812,70.2743998 C55.6597758,70.2743998 55.1769515,70.3442014 54.6476939,70.4838066 C54.1184363,70.6234119 53.635612,70.8374701 53.1992066,71.1259876 C52.7628012,71.4145052 52.5353167,71.7448993 52.5167463,72.11718 C52.9067256,72.7128292 53.4174051,73.1828265 54.0488001,73.5271862 C54.6801952,73.8715458 55.3626487,74.043723 56.0961812,74.043723 Z" id="-copy-3" fill="#444444"></path>
+            <path d="M102.182927,63.796748 C103.826411,63.796748 105.228458,64.3784278 106.389111,65.541805 C107.549764,66.7051822 108.130081,68.1058674 108.130081,69.7439024 C108.130081,71.3819375 107.549764,72.7826227 106.389111,73.9459998 C105.228458,75.109377 103.826411,75.6910569 102.182927,75.6910569 C100.539443,75.6910569 99.1373953,75.109377 97.9767426,73.9459998 C96.81609,72.7826227 96.2357724,71.3819375 96.2357724,69.7439024 C96.2357724,68.1058674 96.81609,66.7051822 97.9767426,65.541805 C99.1373953,64.3784278 100.539443,63.796748 102.182927,63.796748 Z M102.182927,65.5836864 C101.69081,65.5836864 101.268339,65.7558636 100.9155,66.1002233 C100.562662,66.4445829 100.386246,66.8633924 100.386246,67.3566644 C100.386246,67.8499363 100.562662,68.2733993 100.9155,68.6270659 C101.268339,68.9807326 101.69081,69.1575633 102.182927,69.1575633 C102.675044,69.1575633 103.092872,68.9807326 103.436425,68.6270659 C103.779979,68.2733993 103.951753,67.8499363 103.951753,67.3566644 C103.951753,66.8633924 103.779979,66.4445829 103.436425,66.1002233 C103.092872,65.7558636 102.675044,65.5836864 102.182927,65.5836864 Z M102.182927,74.043723 C102.916459,74.043723 103.59427,73.8715458 104.21638,73.5271862 C104.83849,73.1828265 105.344527,72.7128292 105.734506,72.11718 C105.734506,71.7448993 105.516307,71.4145052 105.079901,71.1259876 C104.643496,70.8374701 104.160672,70.6234119 103.631414,70.4838066 C103.102156,70.3442014 102.619332,70.2743998 102.182927,70.2743998 C101.746521,70.2743998 101.263697,70.3442014 100.73444,70.4838066 C100.205182,70.6234119 99.7223577,70.8374701 99.2859523,71.1259876 C98.8495469,71.4145052 98.6220624,71.7448993 98.6034919,72.11718 C98.9934712,72.7128292 99.5041507,73.1828265 100.135546,73.5271862 C100.766941,73.8715458 101.449394,74.043723 102.182927,74.043723 Z" id="-copy-4" fill="#444444"></path>
+            <path d="M9.16122223,63.4752535 C10.8047064,63.4752535 12.2067538,64.0569334 13.3674064,65.2203106 C14.5280591,66.3836878 15.1083767,67.7843729 15.1083767,69.422408 C15.1083767,71.0604431 14.5280591,72.4611282 13.3674064,73.6245054 C12.2067538,74.7878826 10.8047064,75.3695625 9.16122223,75.3695625 C7.51773807,75.3695625 6.1156907,74.7878826 4.95503804,73.6245054 C3.79438539,72.4611282 3.21406776,71.0604431 3.21406776,69.422408 C3.21406776,67.7843729 3.79438539,66.3836878 4.95503804,65.2203106 C6.1156907,64.0569334 7.51773807,63.4752535 9.16122223,63.4752535 Z M9.16122223,65.262192 C8.66910551,65.262192 8.24663428,65.4343692 7.89379587,65.7787289 C7.54095746,66.1230885 7.36454091,66.541898 7.36454091,67.03517 C7.36454091,67.5284419 7.54095746,67.9519048 7.89379587,68.3055715 C8.24663428,68.6592382 8.66910551,68.8360688 9.16122223,68.8360688 C9.65333896,68.8360688 10.0711676,68.6592382 10.4147208,68.3055715 C10.758274,67.9519048 10.930048,67.5284419 10.930048,67.03517 C10.930048,66.541898 10.758274,66.1230885 10.4147208,65.7787289 C10.0711676,65.4343692 9.65333896,65.262192 9.16122223,65.262192 Z M9.16122223,73.7222286 C9.89475471,73.7222286 10.5725657,73.5500514 11.1946755,73.2056917 C11.8167853,72.8613321 12.3228223,72.3913347 12.7128016,71.7956856 C12.7128016,71.4234049 12.4946022,71.0930108 12.0581968,70.8044932 C11.6217914,70.5159757 11.1389671,70.3019175 10.6097095,70.1623122 C10.0804519,70.022707 9.59762763,69.9529054 9.16122223,69.9529054 C8.72481684,69.9529054 8.24199257,70.022707 7.71273496,70.1623122 C7.18347735,70.3019175 6.70065309,70.5159757 6.26424769,70.8044932 C5.82784229,71.0930108 5.60035778,71.4234049 5.58178734,71.7956856 C5.97176663,72.3913347 6.48244614,72.8613321 7.11384119,73.2056917 C7.74523623,73.5500514 8.42768976,73.7222286 9.16122223,73.7222286 Z" id="-copy-2" fill="#444444"></path>
+        </g>
+    </g>
+</svg>

src/assets/dbstyle/orgchart_images/org-pattern1.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="112px" height="77px" viewBox="0 0 112 77" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Org1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Org1">
+            <rect id="Rectangle-3-Copy-60" fill="#FFFFFF" x="0" y="0.385469681" width="112" height="76" rx="4"></rect>
+            <path d="M37.3626064,7.30539794 L37.3626064,15.3053979 L58.3626064,15.3053979 L58.3626064,7.30539794 L37.3626064,7.30539794 Z M36.3626064,5.30539794 L59.3626064,5.30539794 C59.9148911,5.30539794 60.3626064,5.75311319 60.3626064,6.30539794 L60.3626064,16.3053979 C60.3626064,16.8576827 59.9148911,17.3053979 59.3626064,17.3053979 L36.3626064,17.3053979 C35.8103216,17.3053979 35.3626064,16.8576827 35.3626064,16.3053979 L35.3626064,6.30539794 C35.3626064,5.75311319 35.8103216,5.30539794 36.3626064,5.30539794 Z" id="Rectangle-30" fill="#767676" fill-rule="nonzero"></path>
+            <polygon id="Path-9" fill="#4A4A4A" fill-rule="nonzero" points="68.6303164 48.2157994 68.6303164 47.2157994 73.5986395 47.2157994 73.5986395 48.2157994"></polygon>
+            <polygon id="Path-9-Copy" fill="#4A4A4A" fill-rule="nonzero" points="63.8626064 48.2157994 63.8626064 47.2157994 68.8309295 47.2157994 68.8309295 48.2157994"></polygon>
+            <polygon id="Path-9-Copy-2" fill="#4A4A4A" fill-rule="nonzero" points="63.8626064 64.3053979 63.8626064 63.3053979 68.8309295 63.3053979 68.8309295 64.3053979"></polygon>
+            <path d="M74.6659103,68.4282765 L95.6659103,68.4282765 L95.6659103,60.4282765 L74.6659103,60.4282765 L74.6659103,68.4282765 Z M73.6659103,58.4282765 L96.6659103,58.4282765 C97.2181951,58.4282765 97.6659103,58.8759917 97.6659103,59.4282765 L97.6659103,69.4282765 C97.6659103,69.9805612 97.2181951,70.4282765 96.6659103,70.4282765 L73.6659103,70.4282765 C73.1136256,70.4282765 72.6659103,69.9805612 72.6659103,69.4282765 L72.6659103,59.4282765 C72.6659103,58.8759917 73.1136256,58.4282765 73.6659103,58.4282765 Z" id="Rectangle-30-Copy-4" fill="#767676" fill-rule="nonzero"></path>
+            <path d="M41.2584747,68.4282765 L62.2584747,68.4282765 L62.2584747,60.4282765 L41.2584747,60.4282765 L41.2584747,68.4282765 Z M40.2584747,58.4282765 L63.2584747,58.4282765 C63.8107595,58.4282765 64.2584747,58.8759917 64.2584747,59.4282765 L64.2584747,69.4282765 C64.2584747,69.9805612 63.8107595,70.4282765 63.2584747,70.4282765 L40.2584747,70.4282765 C39.70619,70.4282765 39.2584747,69.9805612 39.2584747,69.4282765 L39.2584747,59.4282765 C39.2584747,58.8759917 39.70619,58.4282765 40.2584747,58.4282765 Z" id="Rectangle-30-Copy-7" fill="#767676" fill-rule="nonzero"></path>
+            <polygon id="Path-6" fill="#4A4A4A" fill-rule="nonzero" points="27.5590057 25.8572392 26.5590057 25.8572392 26.5590057 21.1094312 69.166207 21.1094312 69.166207 25.9757039 68.166207 25.9757039 68.166207 22.1094312 27.5590057 22.1094312"></polygon>
+            <path d="M74.6659103,52.2278447 L95.6659103,52.2278447 L95.6659103,44.2278447 L74.6659103,44.2278447 L74.6659103,52.2278447 Z M73.6659103,42.2278447 L96.6659103,42.2278447 C97.2181951,42.2278447 97.6659103,42.6755599 97.6659103,43.2278447 L97.6659103,53.2278447 C97.6659103,53.7801294 97.2181951,54.2278447 96.6659103,54.2278447 L73.6659103,54.2278447 C73.1136256,54.2278447 72.6659103,53.7801294 72.6659103,53.2278447 L72.6659103,43.2278447 C72.6659103,42.6755599 73.1136256,42.2278447 73.6659103,42.2278447 Z" id="Rectangle-30-Copy-3" fill="#767676" fill-rule="nonzero"></path>
+            <path d="M16,27.0219549 L16,35.0219549 L37,35.0219549 L37,27.0219549 L16,27.0219549 Z M15,25.0219549 L38,25.0219549 C38.5522847,25.0219549 39,25.4696701 39,26.0219549 L39,36.0219549 C39,36.5742396 38.5522847,37.0219549 38,37.0219549 L15,37.0219549 C14.4477153,37.0219549 14,36.5742396 14,36.0219549 L14,26.0219549 C14,25.4696701 14.4477153,25.0219549 15,25.0219549 Z" id="Rectangle-30-Copy" fill="#767676" fill-rule="nonzero"></path>
+            <path d="M41.2584747,44.2278447 L41.2584747,52.2278447 L62.2584747,52.2278447 L62.2584747,44.2278447 L41.2584747,44.2278447 Z M40.2584747,42.2278447 L63.2584747,42.2278447 C63.8107595,42.2278447 64.2584747,42.6755599 64.2584747,43.2278447 L64.2584747,53.2278447 C64.2584747,53.7801294 63.8107595,54.2278447 63.2584747,54.2278447 L40.2584747,54.2278447 C39.70619,54.2278447 39.2584747,53.7801294 39.2584747,53.2278447 L39.2584747,43.2278447 C39.2584747,42.6755599 39.70619,42.2278447 40.2584747,42.2278447 Z" id="Rectangle-30-Copy-8" fill="#767676" fill-rule="nonzero"></path>
+            <polygon id="Path-7" fill="#4A4A4A" fill-rule="nonzero" points="47.309738 17.3616232 48.309738 17.3616232 48.309738 21.6094312 47.309738 21.6094312"></polygon>
+            <polygon id="Path-8" fill="#4A4A4A" fill-rule="nonzero" points="72.527812 63.3484713 72.527812 64.3484713 68.1303164 64.3484713 68.1303164 36.8484713 69.1303164 36.8484713 69.1303164 63.3484713"></polygon>
+            <path d="M58.3309295,27.0219549 L58.3309295,35.0219549 L79.3309295,35.0219549 L79.3309295,27.0219549 L58.3309295,27.0219549 Z M57.3309295,25.0219549 L80.3309295,25.0219549 C80.8832143,25.0219549 81.3309295,25.4696701 81.3309295,26.0219549 L81.3309295,36.0219549 C81.3309295,36.5742396 80.8832143,37.0219549 80.3309295,37.0219549 L57.3309295,37.0219549 C56.7786448,37.0219549 56.3309295,36.5742396 56.3309295,36.0219549 L56.3309295,26.0219549 C56.3309295,25.4696701 56.7786448,25.0219549 57.3309295,25.0219549 Z" id="Rectangle-30-Copy-2" fill="#767676" fill-rule="nonzero"></path>
+        </g>
+    </g>
+</svg>

src/assets/dbstyle/orgchart_images/org-pattern2.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="112px" height="77px" viewBox="0 0 112 77" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Org2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Org2" transform="translate(0.000000, -0.500000)">
+            <rect id="Rectangle-3-Copy-59" fill="#FFFFFF" x="0" y="0.759784786" width="112" height="76" rx="4"></rect>
+            <g id="Group-Copy-2" transform="translate(12.500000, 5.839857)" fill-rule="nonzero">
+                <path d="M40.3626064,2 L40.3626064,10 L61.3626064,10 L61.3626064,2 L40.3626064,2 Z M39.3626064,0 L62.3626064,0 C62.9148911,-1.01453063e-16 63.3626064,0.44771525 63.3626064,1 L63.3626064,11 C63.3626064,11.5522847 62.9148911,12 62.3626064,12 L39.3626064,12 C38.8103216,12 38.3626064,11.5522847 38.3626064,11 L38.3626064,1 C38.3626064,0.44771525 38.8103216,1.01453063e-16 39.3626064,0 Z" id="Rectangle-30" fill="#767676"></path>
+                <polygon id="Path-9" fill="#4A4A4A" transform="translate(27.015838, 42.410401) scale(-1, 1) translate(-27.015838, -42.410401) " points="24.5316768 42.9104014 24.5316768 41.9104014 29.5 41.9104014 29.5 42.9104014"></polygon>
+                <path d="M2.53167685,55.1228785 L2.53167685,63.1228785 L23.5316768,63.1228785 L23.5316768,55.1228785 L2.53167685,55.1228785 Z M1.53167685,53.1228785 L24.5316768,53.1228785 C25.0839616,53.1228785 25.5316768,53.5705938 25.5316768,54.1228785 L25.5316768,64.1228785 C25.5316768,64.6751633 25.0839616,65.1228785 24.5316768,65.1228785 L1.53167685,65.1228785 C0.979392098,65.1228785 0.531676848,64.6751633 0.531676848,64.1228785 L0.531676848,54.1228785 C0.531676848,53.5705938 0.979392098,53.1228785 1.53167685,53.1228785 Z" id="Rectangle-30-Copy-4" fill="#767676" transform="translate(13.031677, 59.122879) scale(-1, 1) translate(-13.031677, -59.122879) "></path>
+                <polygon id="Path-6" fill="#4A4A4A" points="30.5590057 20.5518413 29.5590057 20.5518413 29.5590057 15.8040333 72.166207 15.8040333 72.166207 20.6703059 71.166207 20.6703059 71.166207 16.8040333 30.5590057 16.8040333"></polygon>
+                <path d="M2.53167685,38.9224468 L2.53167685,46.9224468 L23.5316768,46.9224468 L23.5316768,38.9224468 L2.53167685,38.9224468 Z M1.53167685,36.9224468 L24.5316768,36.9224468 C25.0839616,36.9224468 25.5316768,37.370162 25.5316768,37.9224468 L25.5316768,47.9224468 C25.5316768,48.4747315 25.0839616,48.9224468 24.5316768,48.9224468 L1.53167685,48.9224468 C0.979392098,48.9224468 0.531676848,48.4747315 0.531676848,47.9224468 L0.531676848,37.9224468 C0.531676848,37.370162 0.979392098,36.9224468 1.53167685,36.9224468 Z" id="Rectangle-30-Copy-3" fill="#767676" transform="translate(13.031677, 42.922447) scale(-1, 1) translate(-13.031677, -42.922447) "></path>
+                <path d="M19,21.7165569 L19,29.7165569 L40,29.7165569 L40,21.7165569 L19,21.7165569 Z M18,19.7165569 L41,19.7165569 C41.5522847,19.7165569 42,20.1642722 42,20.7165569 L42,30.7165569 C42,31.2688417 41.5522847,31.7165569 41,31.7165569 L18,31.7165569 C17.4477153,31.7165569 17,31.2688417 17,30.7165569 L17,20.7165569 C17,20.1642722 17.4477153,19.7165569 18,19.7165569 Z" id="Rectangle-30-Copy" fill="#767676"></path>
+                <polygon id="Path-7" fill="#4A4A4A" points="50.309738 12.0562252 51.309738 12.0562252 51.309738 16.3040333 50.309738 16.3040333"></polygon>
+                <polygon id="Path-8" fill="#4A4A4A" transform="translate(27.230425, 45.293073) scale(-1, 1) translate(-27.230425, -45.293073) " points="29.4291724 58.0430734 29.4291724 59.0430734 25.0316768 59.0430734 25.0316768 31.5430734 26.0316768 31.5430734 26.0316768 58.0430734"></polygon>
+                <path d="M61.3309295,21.7165569 L61.3309295,29.7165569 L82.3309295,29.7165569 L82.3309295,21.7165569 L61.3309295,21.7165569 Z M60.3309295,19.7165569 L83.3309295,19.7165569 C83.8832143,19.7165569 84.3309295,20.1642722 84.3309295,20.7165569 L84.3309295,30.7165569 C84.3309295,31.2688417 83.8832143,31.7165569 83.3309295,31.7165569 L60.3309295,31.7165569 C59.7786448,31.7165569 59.3309295,31.2688417 59.3309295,30.7165569 L59.3309295,20.7165569 C59.3309295,20.1642722 59.7786448,19.7165569 60.3309295,19.7165569 Z" id="Rectangle-30-Copy-2" fill="#767676"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/dbstyle/orgchart_images/org-pattern3.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="112px" height="76px" viewBox="0 0 112 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Org3</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Org3">
+            <rect id="Rectangle-3-Copy-58" fill="#FFFFFF" x="0" y="0" width="112" height="76" rx="4"></rect>
+            <g id="Group-Copy-3" transform="translate(22.000000, 5.000000)" fill-rule="nonzero">
+                <path d="M23.3626064,2 L23.3626064,10 L44.3626064,10 L44.3626064,2 L23.3626064,2 Z M22.3626064,0 L45.3626064,0 C45.9148911,-1.01453063e-16 46.3626064,0.44771525 46.3626064,1 L46.3626064,11 C46.3626064,11.5522847 45.9148911,12 45.3626064,12 L22.3626064,12 C21.8103216,12 21.3626064,11.5522847 21.3626064,11 L21.3626064,1 C21.3626064,0.44771525 21.8103216,1.01453063e-16 22.3626064,0 Z" id="Rectangle-30" fill="#767676"></path>
+                <polygon id="Path-9" fill="#4A4A4A" points="8.53167685 42.9104014 8.53167685 41.9104014 13.5 41.9104014 13.5 42.9104014"></polygon>
+                <path d="M14.5,55.1228785 L14.5,63.1228785 L35.5,63.1228785 L35.5,55.1228785 L14.5,55.1228785 Z M13.5,53.1228785 L36.5,53.1228785 C37.0522847,53.1228785 37.5,53.5705938 37.5,54.1228785 L37.5,64.1228785 C37.5,64.6751633 37.0522847,65.1228785 36.5,65.1228785 L13.5,65.1228785 C12.9477153,65.1228785 12.5,64.6751633 12.5,64.1228785 L12.5,54.1228785 C12.5,53.5705938 12.9477153,53.1228785 13.5,53.1228785 Z" id="Rectangle-30-Copy-4" fill="#767676" transform="translate(25.000000, 59.122879) scale(-1, 1) translate(-25.000000, -59.122879) "></path>
+                <polygon id="Path-6" fill="#4A4A4A" points="13.5590057 20.5518413 12.5590057 20.5518413 12.5590057 15.8040333 55.166207 15.8040333 55.166207 20.6703059 54.166207 20.6703059 54.166207 16.8040333 13.5590057 16.8040333"></polygon>
+                <path d="M14.5,38.9224468 L14.5,46.9224468 L35.5,46.9224468 L35.5,38.9224468 L14.5,38.9224468 Z M13.5,36.9224468 L36.5,36.9224468 C37.0522847,36.9224468 37.5,37.370162 37.5,37.9224468 L37.5,47.9224468 C37.5,48.4747315 37.0522847,48.9224468 36.5,48.9224468 L13.5,48.9224468 C12.9477153,48.9224468 12.5,48.4747315 12.5,47.9224468 L12.5,37.9224468 C12.5,37.370162 12.9477153,36.9224468 13.5,36.9224468 Z" id="Rectangle-30-Copy-3" fill="#767676" transform="translate(25.000000, 42.922447) scale(-1, 1) translate(-25.000000, -42.922447) "></path>
+                <path d="M2,21.7165569 L2,29.7165569 L23,29.7165569 L23,21.7165569 L2,21.7165569 Z M1,19.7165569 L24,19.7165569 C24.5522847,19.7165569 25,20.1642722 25,20.7165569 L25,30.7165569 C25,31.2688417 24.5522847,31.7165569 24,31.7165569 L1,31.7165569 C0.44771525,31.7165569 6.76353751e-17,31.2688417 0,30.7165569 L0,20.7165569 C-6.76353751e-17,20.1642722 0.44771525,19.7165569 1,19.7165569 Z" id="Rectangle-30-Copy" fill="#767676"></path>
+                <polygon id="Path-7" fill="#4A4A4A" points="33.309738 12.0562252 34.309738 12.0562252 34.309738 16.3040333 33.309738 16.3040333"></polygon>
+                <polygon id="Path-8" fill="#4A4A4A" points="12.4291724 58.0430734 12.4291724 59.0430734 8.03167685 59.0430734 8.03167685 31.5430734 9.03167685 31.5430734 9.03167685 58.0430734"></polygon>
+                <path d="M44.3309295,21.7165569 L44.3309295,29.7165569 L65.3309295,29.7165569 L65.3309295,21.7165569 L44.3309295,21.7165569 Z M43.3309295,19.7165569 L66.3309295,19.7165569 C66.8832143,19.7165569 67.3309295,20.1642722 67.3309295,20.7165569 L67.3309295,30.7165569 C67.3309295,31.2688417 66.8832143,31.7165569 66.3309295,31.7165569 L43.3309295,31.7165569 C42.7786448,31.7165569 42.3309295,31.2688417 42.3309295,30.7165569 L42.3309295,20.7165569 C42.3309295,20.1642722 42.7786448,19.7165569 43.3309295,19.7165569 Z" id="Rectangle-30-Copy-2" fill="#767676"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/dbstyle/orgchart_images/org-pattern4.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="112px" height="77px" viewBox="0 0 112 77" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Org4</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Org4">
+            <rect id="Rectangle-3-Copy-57" fill="#FFFFFF" x="0" y="0.839856524" width="112" height="76" rx="4"></rect>
+            <g id="Group-Copy-4" transform="translate(7.500000, 12.839857)" fill-rule="nonzero">
+                <path d="M23.3626064,2 L23.3626064,10 L44.3626064,10 L44.3626064,2 L23.3626064,2 Z M22.3626064,0 L45.3626064,0 C45.9148911,-1.01453063e-16 46.3626064,0.44771525 46.3626064,1 L46.3626064,11 C46.3626064,11.5522847 45.9148911,12 45.3626064,12 L22.3626064,12 C21.8103216,12 21.3626064,11.5522847 21.3626064,11 L21.3626064,1 C21.3626064,0.44771525 21.8103216,1.01453063e-16 22.3626064,0 Z" id="Rectangle-30" fill="#767676"></path>
+                <path d="M44.166207,49.9224468 L65.166207,49.9224468 L65.166207,41.9224468 L44.166207,41.9224468 L44.166207,49.9224468 Z M43.166207,39.9224468 L66.166207,39.9224468 C66.7184918,39.9224468 67.166207,40.370162 67.166207,40.9224468 L67.166207,50.9224468 C67.166207,51.4747315 66.7184918,51.9224468 66.166207,51.9224468 L43.166207,51.9224468 C42.6139223,51.9224468 42.166207,51.4747315 42.166207,50.9224468 L42.166207,40.9224468 C42.166207,40.370162 42.6139223,39.9224468 43.166207,39.9224468 Z" id="Rectangle-30-Copy-4" fill="#767676" transform="translate(54.666207, 45.922447) scale(-1, 1) translate(-54.666207, -45.922447) "></path>
+                <path d="M74,49.9224468 L95,49.9224468 L95,41.9224468 L74,41.9224468 L74,49.9224468 Z M73,39.9224468 L96,39.9224468 C96.5522847,39.9224468 97,40.370162 97,40.9224468 L97,50.9224468 C97,51.4747315 96.5522847,51.9224468 96,51.9224468 L73,51.9224468 C72.4477153,51.9224468 72,51.4747315 72,50.9224468 L72,40.9224468 C72,40.370162 72.4477153,39.9224468 73,39.9224468 Z" id="Rectangle-30-Copy-5" fill="#767676" transform="translate(84.500000, 45.922447) scale(-1, 1) translate(-84.500000, -45.922447) "></path>
+                <polygon id="Path-6" fill="#4A4A4A" points="13.5590057 20.5518413 12.5590057 20.5518413 12.5590057 15.8040333 55.166207 15.8040333 55.166207 20.6703059 54.166207 20.6703059 54.166207 16.8040333 13.5590057 16.8040333"></polygon>
+                <polygon id="Path-6-Copy" fill="#4A4A4A" points="25.5 39.9643649 24.5 39.9643649 24.5 35.2165569 86.4189149 35.2165569 86.4189149 40.0828296 85.4189149 40.0828296 85.4189149 36.2165569 25.5 36.2165569"></polygon>
+                <path d="M14.5,41.9224468 L14.5,49.9224468 L35.5,49.9224468 L35.5,41.9224468 L14.5,41.9224468 Z M13.5,39.9224468 L36.5,39.9224468 C37.0522847,39.9224468 37.5,40.370162 37.5,40.9224468 L37.5,50.9224468 C37.5,51.4747315 37.0522847,51.9224468 36.5,51.9224468 L13.5,51.9224468 C12.9477153,51.9224468 12.5,51.4747315 12.5,50.9224468 L12.5,40.9224468 C12.5,40.370162 12.9477153,39.9224468 13.5,39.9224468 Z" id="Rectangle-30-Copy-3" fill="#767676" transform="translate(25.000000, 45.922447) scale(-1, 1) translate(-25.000000, -45.922447) "></path>
+                <path d="M2,21.7165569 L2,29.7165569 L23,29.7165569 L23,21.7165569 L2,21.7165569 Z M1,19.7165569 L24,19.7165569 C24.5522847,19.7165569 25,20.1642722 25,20.7165569 L25,30.7165569 C25,31.2688417 24.5522847,31.7165569 24,31.7165569 L1,31.7165569 C0.44771525,31.7165569 6.76353751e-17,31.2688417 0,30.7165569 L0,20.7165569 C-6.76353751e-17,20.1642722 0.44771525,19.7165569 1,19.7165569 Z" id="Rectangle-30-Copy" fill="#767676"></path>
+                <polygon id="Path-7" fill="#4A4A4A" points="33.309738 12.0562252 34.309738 12.0562252 34.309738 16.3040333 33.309738 16.3040333"></polygon>
+                <polygon id="Path-7-Copy" fill="#4A4A4A" points="54.3309295 31.7165569 55.3309295 31.7165569 55.3309295 35.9643649 54.3309295 35.9643649"></polygon>
+                <polygon id="Path-7-Copy-2" fill="#4A4A4A" points="54.3309295 35.9643649 55.3309295 35.9643649 55.3309295 40.212173 54.3309295 40.212173"></polygon>
+                <path d="M44.3309295,21.7165569 L44.3309295,29.7165569 L65.3309295,29.7165569 L65.3309295,21.7165569 L44.3309295,21.7165569 Z M43.3309295,19.7165569 L66.3309295,19.7165569 C66.8832143,19.7165569 67.3309295,20.1642722 67.3309295,20.7165569 L67.3309295,30.7165569 C67.3309295,31.2688417 66.8832143,31.7165569 66.3309295,31.7165569 L43.3309295,31.7165569 C42.7786448,31.7165569 42.3309295,31.2688417 42.3309295,30.7165569 L42.3309295,20.7165569 C42.3309295,20.1642722 42.7786448,19.7165569 43.3309295,19.7165569 Z" id="Rectangle-30-Copy-2" fill="#767676"></path>
+            </g>
+        </g>
+    </g>
+</svg>