This commit is contained in:
pipeline 2021-11-16 09:49:05 +00:00
Родитель 6f6f143737
Коммит d8bce048f6
51 изменённых файлов: 91 добавлений и 98 удалений

Просмотреть файл

@ -101,6 +101,7 @@
"validation",
"editing",
"timeline",
"progressbar"
"progressbar",
null
]
}

Просмотреть файл

@ -1,6 +1,6 @@
{
"name": "@syncfusion/ej2-javascript-samples",
"version": "19.3.43",
"version": "19.3.53",
"description": "Examples of JavaScript (ES5) UI Controls",
"author": "Syncfusion Inc.",
"license": "SEE LICENSE IN license",

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -1 +1 @@
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/development/demos/diagram/local-data/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"content-wrapper\" style=\"width: 100%\">\n <div id=\"diagram\"></div>\n </div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Local Data Binding sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: 490,\n //Configures data source\n dataSourceSettings: {\n id: 'Name', parentId: 'Category', dataSource: new ej.data.DataManager(window.species),\n //binds the external data with node\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.annotations = [{\n content: data.Name, style: { color: 'black' }\n }];\n nodeModel.style = { fill: '#ffeec7', strokeColor: '#f5d897', strokeWidth: 1 };\n }\n },\n //Configrues HierarchicalTree layout\n layout: {\n type: 'HierarchicalTree', horizontalSpacing: 15, verticalSpacing: 50,\n margin: { top: 10, left: 10, right: 10, bottom: 0 },\n },\n //Sets the default values of nodes\n getNodeDefaults: function (obj) {\n obj.shape = { type: 'Basic', shape: 'Rectangle' };\n obj.style = { strokeWidth: 1 };\n obj.width = 95;\n obj.height = 30;\n },\n //Sets the default values of connectors.\n getConnectorDefaults: function (connector) {\n connector.type = 'Orthogonal';\n connector.style.strokeColor = '#4d4d4d';\n connector.targetDecorator.shape = 'None';\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n snapSettings: { constraints: 0 }\n });\n diagram.appendTo('#diagram');\n\n"}
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/diagram/local-data/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"content-wrapper\" style=\"width: 100%\">\n <div id=\"diagram\"></div>\n </div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Local Data Binding sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: 490,\n //Configures data source\n dataSourceSettings: {\n id: 'Name', parentId: 'Category', dataSource: new ej.data.DataManager(window.species),\n //binds the external data with node\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.annotations = [{\n content: data.Name, style: { color: 'black' }\n }];\n nodeModel.style = { fill: '#ffeec7', strokeColor: '#f5d897', strokeWidth: 1 };\n }\n },\n //Configrues HierarchicalTree layout\n layout: {\n type: 'HierarchicalTree', horizontalSpacing: 15, verticalSpacing: 50,\n margin: { top: 10, left: 10, right: 10, bottom: 0 },\n },\n //Sets the default values of nodes\n getNodeDefaults: function (obj) {\n obj.shape = { type: 'Basic', shape: 'Rectangle' };\n obj.style = { strokeWidth: 1 };\n obj.width = 95;\n obj.height = 30;\n },\n //Sets the default values of connectors.\n getConnectorDefaults: function (connector) {\n connector.type = 'Orthogonal';\n connector.style.strokeColor = '#4d4d4d';\n connector.targetDecorator.shape = 'None';\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n snapSettings: { constraints: 0 }\n });\n diagram.appendTo('#diagram');\n\n"}

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -1 +1 @@
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/development/demos/diagram/overview/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"content-wrapper\">\n <div id=\"diagram\"></div>\n </div>\n</div>\n<div class=\"col-lg-4\" style=\" width:50%; padding:0px;right:30px;bottom:20px;border: #eeeeee;border-style: solid;box-shadow: 0px 2px 2px rgba(0,0,0,0.3); background:#f7f7f7;position:absolute\">\n <div id=\"overview\" style=\"top:30px\"></div>\n</div>\n\n\n<style>\n</style></div></body></html>","index.js":"{{ripple}}\n/**\n * OverView\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n\n//Funtion to add the Template of the Node.\nfunction setNodeTemplate(obj, diagram) {\n var content = new ej.diagrams.StackPanel();\n content.id = obj.id + '_outerstack';\n content.orientation = 'Horizontal';\n content.style.strokeColor = 'gray';\n content.padding = { left: 5, right: 10, top: 5, bottom: 5 };\n\n var image = new ej.diagrams.ImageElement();\n image.width = 50;\n image.height = 50;\n image.style.strokeColor = 'none';\n image.source = obj.data.ImageUrl;\n image.id = obj.id + '_pic';\n\n var innerStack = new ej.diagrams.StackPanel();\n innerStack.style.strokeColor = 'none';\n innerStack.margin = { left: 5, right: 0, top: 0, bottom: 0 };\n innerStack.id = obj.id + '_innerstack';\n\n var text = new ej.diagrams.TextElement();\n text.content = obj.data.Name;\n text.style.color = 'black';\n text.style.bold = true;\n text.style.strokeColor = 'none';\n text.horizontalAlignment = 'Left';\n text.style.fill = 'none';\n text.id = obj.id + '_text1';\n\n var desigText = new ej.diagrams.TextElement();\n desigText.margin = { left: 0, right: 0, top: 5, bottom: 0 };\n desigText.content = obj.data.Designation;\n desigText.style.color = 'black';\n desigText.style.strokeColor = 'none';\n desigText.style.fontSize = 12;\n desigText.style.fill = 'none';\n desigText.horizontalAlignment = 'Left';\n desigText.style.textWrapping = 'Wrap';\n desigText.id = obj.id + '_desig';\n innerStack.children = [text, desigText];\n content.children = [image, innerStack];\n return content;\n}\n\n var overview;\n //Initializtion of the diagram.\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '590px', scrollSettings: { scrollLimit: 'Infinity' },\n //Sets the constraints of the SnapSettings\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //Configrues organizational chart layout\n layout: {\n type: 'OrganizationalChart', margin: { top: 20 },\n getLayoutInfo: function (node, tree) {\n if (!tree.hasSubTree) {\n tree.orientation = 'Vertical';\n tree.type = 'Right';\n }\n }\n },\n //Sets the parent and child relationship of DataSource.\n dataSourceSettings: {\n id: 'Id', parentId: 'ReportingPerson', dataSource: new ej.data.DataManager(window.overviewData)\n },\n //Sets the default values of Nodes.\n getNodeDefaults: function (obj, diagram) {\n obj.height = 50;\n obj.style = { fill: 'transparent', strokeWidth: 2 };\n return obj;\n },\n //Sets the default values of connectors.\n getConnectorDefaults: function (connector, diagram) {\n connector.targetDecorator.shape = 'None';\n connector.type = 'Orthogonal';\n connector.style.strokeColor = 'gray';\n return connector;\n },\n //customization of the node.\n setNodeTemplate: function (obj, diagram) {\n return setNodeTemplate(obj, diagram);\n }\n });\n diagram.appendTo('#diagram');\n //Initializtion of the Overview.\n\n overview = new ej.diagrams.Overview({\n width: '100%', height: '150px', sourceID: 'diagram'\n });\n overview.appendTo('#overview');\n\n"}
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/diagram/overview/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <div class=\"content-wrapper\">\n <div id=\"diagram\"></div>\n </div>\n</div>\n<div class=\"col-lg-4\" style=\" width:50%; padding:0px;right:30px;bottom:20px;border: #eeeeee;border-style: solid;box-shadow: 0px 2px 2px rgba(0,0,0,0.3); background:#f7f7f7;position:absolute\">\n <div id=\"overview\" style=\"top:30px\"></div>\n</div>\n\n\n<style>\n</style></div></body></html>","index.js":"{{ripple}}\n/**\n * OverView\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n\n//Funtion to add the Template of the Node.\nfunction setNodeTemplate(obj, diagram) {\n var content = new ej.diagrams.StackPanel();\n content.id = obj.id + '_outerstack';\n content.orientation = 'Horizontal';\n content.style.strokeColor = 'gray';\n content.padding = { left: 5, right: 10, top: 5, bottom: 5 };\n\n var image = new ej.diagrams.ImageElement();\n image.width = 50;\n image.height = 50;\n image.style.strokeColor = 'none';\n image.source = obj.data.ImageUrl;\n image.id = obj.id + '_pic';\n\n var innerStack = new ej.diagrams.StackPanel();\n innerStack.style.strokeColor = 'none';\n innerStack.margin = { left: 5, right: 0, top: 0, bottom: 0 };\n innerStack.id = obj.id + '_innerstack';\n\n var text = new ej.diagrams.TextElement();\n text.content = obj.data.Name;\n text.style.color = 'black';\n text.style.bold = true;\n text.style.strokeColor = 'none';\n text.horizontalAlignment = 'Left';\n text.style.fill = 'none';\n text.id = obj.id + '_text1';\n\n var desigText = new ej.diagrams.TextElement();\n desigText.margin = { left: 0, right: 0, top: 5, bottom: 0 };\n desigText.content = obj.data.Designation;\n desigText.style.color = 'black';\n desigText.style.strokeColor = 'none';\n desigText.style.fontSize = 12;\n desigText.style.fill = 'none';\n desigText.horizontalAlignment = 'Left';\n desigText.style.textWrapping = 'Wrap';\n desigText.id = obj.id + '_desig';\n innerStack.children = [text, desigText];\n content.children = [image, innerStack];\n return content;\n}\n\n var overview;\n //Initializtion of the diagram.\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '590px', scrollSettings: { scrollLimit: 'Infinity' },\n //Sets the constraints of the SnapSettings\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //Configrues organizational chart layout\n layout: {\n type: 'OrganizationalChart', margin: { top: 20 },\n getLayoutInfo: function (node, tree) {\n if (!tree.hasSubTree) {\n tree.orientation = 'Vertical';\n tree.type = 'Right';\n }\n }\n },\n //Sets the parent and child relationship of DataSource.\n dataSourceSettings: {\n id: 'Id', parentId: 'ReportingPerson', dataSource: new ej.data.DataManager(window.overviewData)\n },\n //Sets the default values of Nodes.\n getNodeDefaults: function (obj, diagram) {\n obj.height = 50;\n obj.style = { fill: 'transparent', strokeWidth: 2 };\n return obj;\n },\n //Sets the default values of connectors.\n getConnectorDefaults: function (connector, diagram) {\n connector.targetDecorator.shape = 'None';\n connector.type = 'Orthogonal';\n connector.style.strokeColor = 'gray';\n return connector;\n },\n //customization of the node.\n setNodeTemplate: function (obj, diagram) {\n return setNodeTemplate(obj, diagram);\n }\n });\n diagram.appendTo('#diagram');\n //Initializtion of the Overview.\n\n overview = new ej.diagrams.Overview({\n width: '100%', height: '150px', sourceID: 'diagram'\n });\n overview.appendTo('#overview');\n\n"}

Просмотреть файл

@ -1 +1 @@
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/development/demos/diagram/pert-chart/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div style=\"width:100%\">\n <div id=\"diagram\"></div>\n </div>\n</div>\n\n\n<style>\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for PERT Chart\n */\n\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree, ej.diagrams.ComplexHierarchicalTree);\n\n //customization of the node template.\n function getNodeTemplate(node) {\n var table = new ej.diagrams.StackPanel();\n table.style.fill = '#0069d9';\n table.id = ej.diagrams.randomId();\n table.orientation = 'Vertical';\n var nameKey = 'id';\n var stack = new ej.diagrams.StackPanel();\n stack.children = [];\n stack.id = ej.diagrams.randomId();\n stack.height = 25;\n stack.orientation = 'Horizontal';\n stack.style.fill = 'white';\n stack.horizontalAlignment = 'Stretch';\n addRows(stack, node);\n table.children = [(getTextElement(node.data[nameKey], 'Stretch', 170, 'Stretch')), stack];\n table.children[0].style.color = 'white';\n table.children[0].style.fontSize = 14;\n return table;\n }\n\n function getTextElement(text, alignment, width, valignment) {\n var textElement = new ej.diagrams.TextElement();\n textElement.content = text;\n textElement.id = ej.diagrams.randomId();\n textElement.width = width;\n textElement.height = 25;\n textElement.horizontalAlignment = alignment;\n textElement.verticalAlignment = valignment;\n textElement.style.strokeWidth = 1;\n textElement.style.strokeColor = '#b5b5b5';\n textElement.style.fill = 'transparent';\n textElement.style.color = '#3c3c3c';\n textElement.relativeMode = 'Object';\n return textElement;\n }\n\n function addRows(column, node) {\n column.children.push(getTextElement(node.data.startDate, 'Left', 70));\n column.children.push(getTextElement(node.data.duration, 'Center', 30));\n column.children.push(getTextElement(node.data.endDate, 'Right', 70));\n }\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '499px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n dataSourceSettings: {\n id: 'id', parentId: 'Category',\n dataSource: new ej.data.DataManager(window.pertChartData),\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.shape = { type: 'Text' };\n }\n }, layout: {\n type: 'ComplexHierarchicalTree', orientation: 'LeftToRight', verticalSpacing: 100, horizontalSpacing: 70\n },\n getConnectorDefaults: function (connector, diagram) {\n connector.type = 'Straight';\n connector.style.strokeColor = '#979797';\n connector.targetDecorator.width = 10;\n connector.targetDecorator.height = 10;\n connector.targetDecorator.style = { fill: '#979797', strokeColor: '#979797' };\n return connector;\n },\n //used to customize template of the node.\n setNodeTemplate: function (node) { return getNodeTemplate(node); },\n tool: ej.diagrams.DiagramTools.ZoomPan\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n\n"}
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/diagram/pert-chart/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div style=\"width:100%\">\n <div id=\"diagram\"></div>\n </div>\n</div>\n\n\n<style>\n</style></div></body></html>","index.js":"{{ripple}}/**\n * Sample for PERT Chart\n */\n\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree, ej.diagrams.ComplexHierarchicalTree);\n\n //customization of the node template.\n function getNodeTemplate(node) {\n var table = new ej.diagrams.StackPanel();\n table.style.fill = '#0069d9';\n table.id = ej.diagrams.randomId();\n table.orientation = 'Vertical';\n var nameKey = 'id';\n var stack = new ej.diagrams.StackPanel();\n stack.children = [];\n stack.id = ej.diagrams.randomId();\n stack.height = 25;\n stack.orientation = 'Horizontal';\n stack.style.fill = 'white';\n stack.horizontalAlignment = 'Stretch';\n addRows(stack, node);\n table.children = [(getTextElement(node.data[nameKey], 'Stretch', 170, 'Stretch')), stack];\n table.children[0].style.color = 'white';\n table.children[0].style.fontSize = 14;\n return table;\n }\n\n function getTextElement(text, alignment, width, valignment) {\n var textElement = new ej.diagrams.TextElement();\n textElement.content = text;\n textElement.id = ej.diagrams.randomId();\n textElement.width = width;\n textElement.height = 25;\n textElement.horizontalAlignment = alignment;\n textElement.verticalAlignment = valignment;\n textElement.style.strokeWidth = 1;\n textElement.style.strokeColor = '#b5b5b5';\n textElement.style.fill = 'transparent';\n textElement.style.color = '#3c3c3c';\n textElement.relativeMode = 'Object';\n return textElement;\n }\n\n function addRows(column, node) {\n column.children.push(getTextElement(node.data.startDate, 'Left', 70));\n column.children.push(getTextElement(node.data.duration, 'Center', 30));\n column.children.push(getTextElement(node.data.endDate, 'Right', 70));\n }\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '499px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n dataSourceSettings: {\n id: 'id', parentId: 'Category',\n dataSource: new ej.data.DataManager(window.pertChartData),\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.shape = { type: 'Text' };\n }\n }, layout: {\n type: 'ComplexHierarchicalTree', orientation: 'LeftToRight', verticalSpacing: 100, horizontalSpacing: 70\n },\n getConnectorDefaults: function (connector, diagram) {\n connector.type = 'Straight';\n connector.style.strokeColor = '#979797';\n connector.targetDecorator.width = 10;\n connector.targetDecorator.height = 10;\n connector.targetDecorator.style = { fill: '#979797', strokeColor: '#979797' };\n return connector;\n },\n //used to customize template of the node.\n setNodeTemplate: function (node) { return getNodeTemplate(node); },\n tool: ej.diagrams.DiagramTools.ZoomPan\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n\n"}

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -1 +1 @@
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/development/demos/diagram/remote-data/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"diagram\" class=\"diagramclass\">\n </div>\n</div>\n\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Remote Data binding sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: 490,\n //Configrues hierarchical tree layout\n layout: {\n type: 'HierarchicalTree', margin: { left: 0, right: 0, top: 100, bottom: 0 },\n verticalSpacing: 40,\n getLayoutInfo: function (node, options) {\n if (options.level === 3) {\n node.style.fill = '#3c418d';\n }\n if (options.level === 2) {\n node.style.fill = '#108d8d';\n options.type = 'Center';\n options.orientation = 'Horizontal';\n }\n if (options.level === 1) {\n node.style.fill = '#822b86';\n }\n }\n },\n //Sets the default values of nodes\n getNodeDefaults: function (obj) {\n obj.width = 80;\n obj.height = 40;\n obj.shape = { type: 'Basic', shape: 'Rectangle' };\n obj.style = { fill: '#048785', strokeColor: 'Transparent' };\n return obj;\n },\n //Sets the default values of connector\n getConnectorDefaults: function (connector) {\n connector.type = 'Orthogonal';\n connector.style.strokeColor = '#048785';\n connector.targetDecorator.shape = 'None';\n return connector;\n },\n //Configures data source\n dataSourceSettings: {\n id: 'EmployeeID', parentId: 'ReportsTo',\n dataSource: new ej.data.DataManager(\n { url: 'https://mvc.syncfusion.com/Services/Northwnd.svc/', crossDomain: true },\n new ej.data.Query().from('Employees').select('EmployeeID,ReportsTo,FirstName').take(9)\n ),\n //binds the external data with node\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.annotations = [{\n content: data.FirstName,\n style: { color: 'white' }\n }];\n }\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n snapSettings: { constraints: 0 }\n });\n diagram.appendTo('#diagram');\n"}
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/diagram/remote-data/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div id=\"diagram\" class=\"diagramclass\">\n </div>\n</div>\n\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Remote Data binding sample\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: 490,\n //Configrues hierarchical tree layout\n layout: {\n type: 'HierarchicalTree', margin: { left: 0, right: 0, top: 100, bottom: 0 },\n verticalSpacing: 40,\n getLayoutInfo: function (node, options) {\n if (options.level === 3) {\n node.style.fill = '#3c418d';\n }\n if (options.level === 2) {\n node.style.fill = '#108d8d';\n options.type = 'Center';\n options.orientation = 'Horizontal';\n }\n if (options.level === 1) {\n node.style.fill = '#822b86';\n }\n }\n },\n //Sets the default values of nodes\n getNodeDefaults: function (obj) {\n obj.width = 80;\n obj.height = 40;\n obj.shape = { type: 'Basic', shape: 'Rectangle' };\n obj.style = { fill: '#048785', strokeColor: 'Transparent' };\n return obj;\n },\n //Sets the default values of connector\n getConnectorDefaults: function (connector) {\n connector.type = 'Orthogonal';\n connector.style.strokeColor = '#048785';\n connector.targetDecorator.shape = 'None';\n return connector;\n },\n //Configures data source\n dataSourceSettings: {\n id: 'EmployeeID', parentId: 'ReportsTo',\n dataSource: new ej.data.DataManager(\n { url: 'https://mvc.syncfusion.com/Services/Northwnd.svc/', crossDomain: true },\n new ej.data.Query().from('Employees').select('EmployeeID,ReportsTo,FirstName').take(9)\n ),\n //binds the external data with node\n doBinding: function (nodeModel, data, diagram) {\n nodeModel.annotations = [{\n content: data.FirstName,\n style: { color: 'white' }\n }];\n }\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n snapSettings: { constraints: 0 }\n });\n diagram.appendTo('#diagram');\n"}

Просмотреть файл

@ -1 +1 @@
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/development/demos/diagram/right-to-left-tree/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div style=\"width:100%\">\n <div id=\"diagram\"></div>\n </div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Sample for RTL tree\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n //Create and add ports for Node.\n function getPorts(root) {\n var ports = [\n {\n id: 'port1', shape: 'Circle', offset: { x: 0, y: 0.5 }, horizontalAlignment: 'Left',\n verticalAlignment: 'Bottom', margin: { right: -2, bottom: -5.5 }\n },\n {\n id: 'port2', shape: 'Circle', offset: { x: 1, y: 0.99 }, horizontalAlignment: 'Right',\n verticalAlignment: 'Bottom', margin: { right: -2, bottom: -5.5 }\n }\n ];\n if (!root) {\n ports[0].offset.y = 1;\n }\n else {\n ports[0].verticalAlignment = 'Center';\n ports[0].horizontalAlignment = 'Center';\n }\n return ports;\n}\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '600px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //Configure the data source\n dataSourceSettings: {\n id: 'Name', parentId: 'Category',\n dataSource: new ej.data.DataManager(window.artificialIntelligence),\n doBinding: function (nodeModel, data, diagram) {\n var nameKey = 'Name';\n nodeModel.annotations = [{ content: data[nameKey] }];\n }\n },\n //Configures the layout\n layout: {\n type: 'HierarchicalTree', orientation: 'RightToLeft',\n verticalAlignment: 'Center', horizontalAlignment: 'Center', verticalSpacing: 100,\n horizontalSpacing: -10\n },\n //Enables zoom pan tool \n tool: ej.diagrams.DiagramTools.ZoomPan,\n //Sets the default values of a Node\n getNodeDefaults: function (obj, diagram) {\n obj.width = 120;\n obj.style = { fill: '#034d6d', strokeWidth: 1 };\n var key = 'branch';\n //set the shape of the Node.\n if (obj.data[key] === 'root') {\n obj.shape = { type: 'Basic', shape: 'Ellipse' };\n obj.height = 120;\n }\n else {\n obj.shape = {\n type: 'Native',\n content: '<svg width=\"120\" height=\"61\"><g><line x1=\"0\" x2=\"120\" y1=\"60\" y2=\"60\" stroke-width=\"1\" stroke= \"black\"></line>' +\n '<rect x=\"0\" y=\"0\" width=\"120\" height=\"60\" fill=\"transparent\" stroke=\"none\"></rect></g></svg>'\n };\n obj.style.strokeWidth = 0;\n obj.height = 60;\n }\n //Set ports and annotations\n obj.ports = getPorts(obj.data[key] === 'root');\n var annotation = obj.annotations[0];\n if (obj.data[key] !== 'root') {\n annotation.offset = { y: 1 };\n annotation.verticalAlignment = 'Bottom';\n annotation.margin = { bottom: 10 };\n }\n else {\n annotation.style = { color: 'white' };\n }\n return obj;\n },\n //Sets the default values of a Connector\n getConnectorDefaults: function (connector, diagram) {\n connector.type = 'Bezier';\n connector.sourcePortID = 'port1';\n connector.targetPortID = 'port2';\n connector.targetDecorator = { shape: 'None' };\n return connector;\n },\n });\n diagram.appendTo('#diagram');\n \n"}
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/diagram/right-to-left-tree/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div style=\"width:100%\">\n <div id=\"diagram\"></div>\n </div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Sample for RTL tree\n */\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree);\n //Create and add ports for Node.\n function getPorts(root) {\n var ports = [\n {\n id: 'port1', shape: 'Circle', offset: { x: 0, y: 0.5 }, horizontalAlignment: 'Left',\n verticalAlignment: 'Bottom', margin: { right: -2, bottom: -5.5 }\n },\n {\n id: 'port2', shape: 'Circle', offset: { x: 1, y: 0.99 }, horizontalAlignment: 'Right',\n verticalAlignment: 'Bottom', margin: { right: -2, bottom: -5.5 }\n }\n ];\n if (!root) {\n ports[0].offset.y = 1;\n }\n else {\n ports[0].verticalAlignment = 'Center';\n ports[0].horizontalAlignment = 'Center';\n }\n return ports;\n}\n\n //Initializes diagram control\n var diagram = new ej.diagrams.Diagram({\n width: '100%', height: '600px', snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n //Configure the data source\n dataSourceSettings: {\n id: 'Name', parentId: 'Category',\n dataSource: new ej.data.DataManager(window.artificialIntelligence),\n doBinding: function (nodeModel, data, diagram) {\n var nameKey = 'Name';\n nodeModel.annotations = [{ content: data[nameKey] }];\n }\n },\n //Configures the layout\n layout: {\n type: 'HierarchicalTree', orientation: 'RightToLeft',\n verticalAlignment: 'Center', horizontalAlignment: 'Center', verticalSpacing: 100,\n horizontalSpacing: -10\n },\n //Enables zoom pan tool \n tool: ej.diagrams.DiagramTools.ZoomPan,\n //Sets the default values of a Node\n getNodeDefaults: function (obj, diagram) {\n obj.width = 120;\n obj.style = { fill: '#034d6d', strokeWidth: 1 };\n var key = 'branch';\n //set the shape of the Node.\n if (obj.data[key] === 'root') {\n obj.shape = { type: 'Basic', shape: 'Ellipse' };\n obj.height = 120;\n }\n else {\n obj.shape = {\n type: 'Native',\n content: '<svg width=\"120\" height=\"61\"><g><line x1=\"0\" x2=\"120\" y1=\"60\" y2=\"60\" stroke-width=\"1\" stroke= \"black\"></line>' +\n '<rect x=\"0\" y=\"0\" width=\"120\" height=\"60\" fill=\"transparent\" stroke=\"none\"></rect></g></svg>'\n };\n obj.style.strokeWidth = 0;\n obj.height = 60;\n }\n //Set ports and annotations\n obj.ports = getPorts(obj.data[key] === 'root');\n var annotation = obj.annotations[0];\n if (obj.data[key] !== 'root') {\n annotation.offset = { y: 1 };\n annotation.verticalAlignment = 'Bottom';\n annotation.margin = { bottom: 10 };\n }\n else {\n annotation.style = { color: 'white' };\n }\n return obj;\n },\n //Sets the default values of a Connector\n getConnectorDefaults: function (connector, diagram) {\n connector.type = 'Bezier';\n connector.sourcePortID = 'port1';\n connector.targetPortID = 'port2';\n connector.targetDecorator = { shape: 'None' };\n return connector;\n },\n });\n diagram.appendTo('#diagram');\n \n"}

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -70,6 +70,7 @@ this.default = function () {
format: '###.##',
value: 0.8,
step: 0.1,
max: 3.5,
});
springfactor.appendTo('#springfactor');
var maxiteration = new ej.inputs.NumericTextBox({

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -1 +1 @@
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/development/demos/diagram/venn-diagram/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"content-wrapper\" style=\"width: 100%\">\n <div id=\"diagram\"></div>\n </div>\n</div>\n\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Venn Diagram\n */\nej.diagrams.Diagram.Inject();\nvar diagram;\n\n //Initialize shape\n var shape = { type: 'Basic', shape: 'Ellipse' };\n //Initialize Diagram Nodes\n var nodes = [\n {\n id: 'datascience', offsetX: 450, offsetY: 232, width: 400, height: 400, annotations: [{\n content: 'Data Science',\n offset: { x: 0.5, y: 0.10 }\n }], shape: shape, style: { fill: '#f2f2f2', strokeColor: '#acacac', strokeWidth: 1 }\n },\n {\n id: 'trignometry', offsetX: 515, offsetY: 205, width: 200, height: 200, shape: shape, annotations: [{\n content: 'Trignometry',\n offset: { x: 0.5, y: 0.4 }, horizontalAlignment: 'Left'\n }, { content: 'Thesis', offset: { x: 0.45, y: 0.8 } }],\n style: { fill: '#feb42f', opacity: 0.2, strokeColor: '#feb42f' }\n },\n {\n id: 'expertise', offsetX: 445, offsetY: 290, width: 200, height: 200, shape: shape,\n annotations: [{ content: 'Expertise', offset: { x: 0.5, y: 0.7 }, verticalAlignment: 'Top' }],\n style: { fill: '#6acbd4', opacity: 0.2, strokeColor: '#6acbd4' }\n },\n {\n id: 'programming', offsetX: 388, offsetY: 205, width: 200, height: 200, annotations: [{\n content: 'Programming ',\n offset: { x: 0.5, y: 0.4 }, horizontalAlignment: 'Right'\n }, {\n content: 'Assembly', offset: { x: 0.7, y: 0.35 },\n horizontalAlignment: 'Left'\n }, { content: 'Horizon', offset: { x: 0.7, y: 0.6 }, horizontalAlignment: 'Left' },\n { content: 'Middleware', offset: { x: 0.5, y: 0.8 } }], shape: shape,\n style: { fill: '#ed1d79', opacity: 0.2, strokeColor: '#ed1d79' }\n },\n ];\n //Initializes diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: 580, nodes: nodes,\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None }, tool: ej.diagrams.DiagramTools.ZoomPan\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n"}
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/diagram/venn-diagram/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"content-wrapper\" style=\"width: 100%\">\n <div id=\"diagram\"></div>\n </div>\n</div>\n\n\n</div></body></html>","index.js":"{{ripple}}/**\n * Venn Diagram\n */\nej.diagrams.Diagram.Inject();\nvar diagram;\n\n //Initialize shape\n var shape = { type: 'Basic', shape: 'Ellipse' };\n //Initialize Diagram Nodes\n var nodes = [\n {\n id: 'datascience', offsetX: 450, offsetY: 232, width: 400, height: 400, annotations: [{\n content: 'Data Science',\n offset: { x: 0.5, y: 0.10 }\n }], shape: shape, style: { fill: '#f2f2f2', strokeColor: '#acacac', strokeWidth: 1 }\n },\n {\n id: 'trignometry', offsetX: 515, offsetY: 205, width: 200, height: 200, shape: shape, annotations: [{\n content: 'Trignometry',\n offset: { x: 0.5, y: 0.4 }, horizontalAlignment: 'Left'\n }, { content: 'Thesis', offset: { x: 0.45, y: 0.8 } }],\n style: { fill: '#feb42f', opacity: 0.2, strokeColor: '#feb42f' }\n },\n {\n id: 'expertise', offsetX: 445, offsetY: 290, width: 200, height: 200, shape: shape,\n annotations: [{ content: 'Expertise', offset: { x: 0.5, y: 0.7 }, verticalAlignment: 'Top' }],\n style: { fill: '#6acbd4', opacity: 0.2, strokeColor: '#6acbd4' }\n },\n {\n id: 'programming', offsetX: 388, offsetY: 205, width: 200, height: 200, annotations: [{\n content: 'Programming ',\n offset: { x: 0.5, y: 0.4 }, horizontalAlignment: 'Right'\n }, {\n content: 'Assembly', offset: { x: 0.7, y: 0.35 },\n horizontalAlignment: 'Left'\n }, { content: 'Horizon', offset: { x: 0.7, y: 0.6 }, horizontalAlignment: 'Left' },\n { content: 'Middleware', offset: { x: 0.5, y: 0.8 } }], shape: shape,\n style: { fill: '#ed1d79', opacity: 0.2, strokeColor: '#ed1d79' }\n },\n ];\n //Initializes diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: 580, nodes: nodes,\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None }, tool: ej.diagrams.DiagramTools.ZoomPan\n });\n diagram.appendTo('#diagram');\n diagram.fitToPage();\n"}

Просмотреть файл

@ -1 +1 @@
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/development/demos/diagram/virtualization/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div>\n <div id=\"toolbar\" style=\"width: 100%\"></div>\n </div>\n\n <div id=\"diagram\"></div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * virtualization sample\n */\n// tslint:disable-next-line:max-func-body-length\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.ComplexHierarchicalTree);\nvar bound = new ej.diagrams.Rect(100, 100, 500, 100);\nvar diagram;\nfunction onClick(args) {\n switch (args.item.tooltipText) {\n case 'ZoomIn':\n var zoomin = { type: 'ZoomIn', zoomFactor: 0.2 };\n diagram.zoomTo(zoomin);\n break;\n case 'ZoomOut':\n var zoomout = { type: 'ZoomOut', zoomFactor: 0.2 };\n diagram.zoomTo(zoomout);\n break;\n case 'Reset':\n diagram.reset();\n diagram.fitToPage({ mode: 'Page', region: 'CustomBounds', margin: { left: 50, right: 50 }, customBounds: bound });\n break;\n }\n}\nfunction dataVirtualization() {\n var i = 0, j, k, name, parentName;\n var data = [];\n parentName = window.virtualizationData[0].Name;\n data.push({ 'Name': parentName, 'Parent': \"\" });\n i++;\n for (j = 1; j < 100; j++) {\n name = window.virtualizationData[i].Name;\n data.push({ 'Name': name, 'Parent': parentName });\n i++;\n for (k = 0; k < 2; k++) {\n data.push({ 'Name': window.virtualizationData[i].Name, 'Parent': name });\n i++;\n }\n }\n return data;\n}\nvar virtualData = new ej.data.DataManager(dataVirtualization());\n\n //Initializes diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: '500px',\n //Configrues hierarchical tree layout\n layout: {\n type: 'HierarchicalTree',\n margin: { left: 10, top: 10 },\n horizontalSpacing: 40.0,\n verticalSpacing: 50.0,\n orientation: 'TopToBottom',\n },\n //Sets the default values of nodes\n getNodeDefaults: function (obj) {\n obj.shape = { type: 'Text', content: obj.data.Name, shape: 'Rectangle', cornerRadius: 5 };\n obj.style = { fill: '#659be5', strokeColor: 'none', color: 'white', strokeWidth: 2 };\n obj.backgroundColor = '#659be5';\n obj.shape.margin = { left: 5, right: 5, bottom: 5, top: 5 };\n obj.width = 80;\n obj.height = 30;\n return obj;\n },\n //Sets the default values of connectors\n getConnectorDefaults: function (connector) {\n connector.type = 'Orthogonal';\n connector.cornerRadius = 7;\n connector.targetDecorator.height = 7;\n connector.targetDecorator.width = 7;\n connector.style.strokeColor = '#6d6d6d';\n },\n //Configures data source\n dataSourceSettings: {\n dataSource: virtualData,\n parentId: \"Parent\",\n id: \"Name\",\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n //Enables the virtualization constraint\n constraints: ej.diagrams.DiagramConstraints.Default | ej.diagrams.DiagramConstraints.Virtualization,\n snapSettings: { constraints: 0 },\n created: function () {\n //fit the diagram to the page with respect to mode and region\n diagram.fitToPage(\n {\n mode: 'Page',\n region: 'CustomBounds',\n margin: { left: 50, right: 50 },\n customBounds: bound\n });\n },\n });\n diagram.appendTo('#diagram');\n //create the Toolbar and add ZoomIn,ZoomOut and Reset options in ToolBar.\n var toolbarObj = new ej.navigations.Toolbar({\n clicked: onClick,\n items: [\n { type: 'Button', text: 'Zoom In', tooltipText: 'ZoomIn', prefixIcon: 'e-ddb-icons e-zoomin' }, { type: 'Separator' },\n { type: 'Button', text: 'Zoom Out', tooltipText: 'ZoomOut', prefixIcon: 'e-ddb-icons e-zoomout' }, { type: 'Separator' },\n { type: 'Button', text: 'Reset', tooltipText: 'Reset', prefixIcon: 'e-ddb-icons e-reset' }\n ]\n });\n toolbarObj.appendTo('#toolbar');\n"}
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/diagram/virtualization/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div>\n <div id=\"toolbar\" style=\"width: 100%\"></div>\n </div>\n\n <div id=\"diagram\"></div>\n</div>\n\n</div></body></html>","index.js":"{{ripple}}/**\n * virtualization sample\n */\n// tslint:disable-next-line:max-func-body-length\nej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.ComplexHierarchicalTree);\nvar bound = new ej.diagrams.Rect(100, 100, 500, 100);\nvar diagram;\nfunction onClick(args) {\n switch (args.item.tooltipText) {\n case 'ZoomIn':\n var zoomin = { type: 'ZoomIn', zoomFactor: 0.2 };\n diagram.zoomTo(zoomin);\n break;\n case 'ZoomOut':\n var zoomout = { type: 'ZoomOut', zoomFactor: 0.2 };\n diagram.zoomTo(zoomout);\n break;\n case 'Reset':\n diagram.reset();\n diagram.fitToPage({ mode: 'Page', region: 'CustomBounds', margin: { left: 50, right: 50 }, customBounds: bound });\n break;\n }\n}\nfunction dataVirtualization() {\n var i = 0, j, k, name, parentName;\n var data = [];\n parentName = window.virtualizationData[0].Name;\n data.push({ 'Name': parentName, 'Parent': \"\" });\n i++;\n for (j = 1; j < 100; j++) {\n name = window.virtualizationData[i].Name;\n data.push({ 'Name': name, 'Parent': parentName });\n i++;\n for (k = 0; k < 2; k++) {\n data.push({ 'Name': window.virtualizationData[i].Name, 'Parent': name });\n i++;\n }\n }\n return data;\n}\nvar virtualData = new ej.data.DataManager(dataVirtualization());\n\n //Initializes diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: '500px',\n //Configrues hierarchical tree layout\n layout: {\n type: 'HierarchicalTree',\n margin: { left: 10, top: 10 },\n horizontalSpacing: 40.0,\n verticalSpacing: 50.0,\n orientation: 'TopToBottom',\n },\n //Sets the default values of nodes\n getNodeDefaults: function (obj) {\n obj.shape = { type: 'Text', content: obj.data.Name, shape: 'Rectangle', cornerRadius: 5 };\n obj.style = { fill: '#659be5', strokeColor: 'none', color: 'white', strokeWidth: 2 };\n obj.backgroundColor = '#659be5';\n obj.shape.margin = { left: 5, right: 5, bottom: 5, top: 5 };\n obj.width = 80;\n obj.height = 30;\n return obj;\n },\n //Sets the default values of connectors\n getConnectorDefaults: function (connector) {\n connector.type = 'Orthogonal';\n connector.cornerRadius = 7;\n connector.targetDecorator.height = 7;\n connector.targetDecorator.width = 7;\n connector.style.strokeColor = '#6d6d6d';\n },\n //Configures data source\n dataSourceSettings: {\n dataSource: virtualData,\n parentId: \"Parent\",\n id: \"Name\",\n },\n //Disables all interactions except zoom/pan\n tool: ej.diagrams.DiagramTools.ZoomPan,\n //Enables the virtualization constraint\n constraints: ej.diagrams.DiagramConstraints.Default | ej.diagrams.DiagramConstraints.Virtualization,\n snapSettings: { constraints: 0 },\n created: function () {\n //fit the diagram to the page with respect to mode and region\n diagram.fitToPage(\n {\n mode: 'Page',\n region: 'CustomBounds',\n margin: { left: 50, right: 50 },\n customBounds: bound\n });\n },\n });\n diagram.appendTo('#diagram');\n //create the Toolbar and add ZoomIn,ZoomOut and Reset options in ToolBar.\n var toolbarObj = new ej.navigations.Toolbar({\n clicked: onClick,\n items: [\n { type: 'Button', text: 'Zoom In', tooltipText: 'ZoomIn', prefixIcon: 'e-ddb-icons e-zoomin' }, { type: 'Separator' },\n { type: 'Button', text: 'Zoom Out', tooltipText: 'ZoomOut', prefixIcon: 'e-ddb-icons e-zoomout' }, { type: 'Separator' },\n { type: 'Button', text: 'Reset', tooltipText: 'Reset', prefixIcon: 'e-ddb-icons e-reset' }\n ]\n });\n toolbarObj.appendTo('#toolbar');\n"}

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -9,9 +9,6 @@ this.default = function () {
},
allowDragAndDrop: false,
allowResizing: false,
destroyed: function () {
menuObj.destroy();
}
});
scheduleObj.appendTo('#Schedule');

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -462,9 +462,6 @@ this.default = function () {
deleteBtn.onclick = function (e) { buttonClickActions(e); };
}
}
},
destroyed: function () {
contextMenuObj.destroy();
}
});
scheduleObj.appendTo('#scheduler');

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -1,8 +1,6 @@
<div class="control-section">
<div class="content-wrapper">
<div class="schedule-quick-info">
<div id="Schedule"></div>
</div>
<div id="Schedule"></div>
</div>
</div>
<div id="action-description">
@ -79,38 +77,38 @@
</script>
<style>
.schedule-quick-info .quick-info-header {
.quick-info-header {
background-color: white;
padding: 8px 18px;
}
.schedule-quick-info .quick-info-header-content {
.quick-info-header-content {
justify-content: flex-end;
display: flex;
flex-direction: column;
padding: 5px 10px 5px;
}
.schedule-quick-info .quick-info-title {
.quick-info-title {
font-weight: 500;
font-size: 16px;
letter-spacing: 0.48px;
height: 22px;
}
.schedule-quick-info .duration-text {
.duration-text {
font-size: 11px;
letter-spacing: 0.33px;
height: 14px;
}
.schedule-quick-info .content-area {
.content-area {
margin: 0;
padding: 10px;
width: 100%;
}
.schedule-quick-info .event-content {
.event-content {
height: 90px;
display: flex;
flex-direction: column;
@ -118,9 +116,9 @@
padding: 0 15px;
}
.schedule-quick-info .meeting-type-wrap,
.schedule-quick-info .meeting-subject-wrap,
.schedule-quick-info .notes-wrap {
.meeting-type-wrap,
.meeting-subject-wrap,
.notes-wrap {
font-size: 11px;
color: #666;
letter-spacing: 0.33px;
@ -128,13 +126,13 @@
padding: 5px;
}
.schedule-quick-info .event-content div label {
.event-content div label {
display: inline-block;
min-width: 45px;
color: #666;
}
.schedule-quick-info .event-content div span {
.event-content div span {
font-size: 11px;
color: #151515;
letter-spacing: 0.33px;
@ -142,64 +140,64 @@
padding-left: 8px;
}
.schedule-quick-info .cell-footer.e-btn {
.cell-footer.e-btn {
background-color: #ffffff;
border-color: #878787;
color: #878787;
}
.schedule-quick-info .cell-footer {
.cell-footer {
padding-top: 10px;
}
.schedule-quick-info .e-quick-popup-wrapper .e-cell-popup .e-popup-content {
.e-quick-popup-wrapper .e-cell-popup .e-popup-content {
padding: 0 14px;
}
.schedule-quick-info .e-quick-popup-wrapper .e-event-popup .e-popup-footer {
.e-quick-popup-wrapper .e-event-popup .e-popup-footer {
display: block;
}
.schedule-quick-info .e-quick-popup-wrapper .e-popup-footer button:first-child {
.e-quick-popup-wrapper .e-popup-footer button:first-child {
margin-right: 5px;
}
.material-dark .schedule-quick-info .quick-info-header {
.material-dark .quick-info-header {
background-color: #424242;
}
.highcontrast .schedule-quick-info .quick-info-header,
.tailwind-dark .schedule-quick-info .quick-info-header,
.bootstrap-dark .schedule-quick-info .quick-info-header,
.bootstrap5-dark .schedule-quick-info .quick-info-header,
.fabric-dark .schedule-quick-info .quick-info-header {
.highcontrast .quick-info-header,
.tailwind-dark .quick-info-header,
.bootstrap-dark .quick-info-header,
.bootstrap5-dark .quick-info-header,
.fabric-dark .quick-info-header {
background-color: transparent;
}
.tailwind-dark .schedule-quick-info .quick-info-header-content,
.bootstrap-dark .schedule-quick-info .quick-info-header-content,
.fabric-dark .schedule-quick-info .quick-info-header-content,
.material-dark .schedule-quick-info .quick-info-header-content,
.highcontrast .schedule-quick-info .quick-info-header-content {
.tailwind-dark .quick-info-header-content,
.bootstrap-dark .quick-info-header-content,
.fabric-dark .quick-info-header-content,
.material-dark .quick-info-header-content,
.highcontrast .quick-info-header-content {
color: #fff !important;
}
.tailwind-dark .schedule-quick-info .event-content div label,
.tailwind-dark .schedule-quick-info .event-content div span,
.bootstrap-dark .schedule-quick-info .event-content div label,
.bootstrap-dark .schedule-quick-info .event-content div span,
.bootstrap5-dark .schedule-quick-info .event-content div label,
.bootstrap5-dark .schedule-quick-info .event-content div span,
.fabric-dark .schedule-quick-info .event-content div label,
.fabric-dark .schedule-quick-info .event-content div span,
.material-dark .schedule-quick-info .event-content div label,
.material-dark .schedule-quick-info .event-content div span,
.highcontrast .schedule-quick-info .event-content div label,
.highcontrast .schedule-quick-info .event-content div span {
.tailwind-dark .event-content div label,
.tailwind-dark .event-content div span,
.bootstrap-dark .event-content div label,
.bootstrap-dark .event-content div span,
.bootstrap5-dark .event-content div label,
.bootstrap5-dark .event-content div span,
.fabric-dark .event-content div label,
.fabric-dark .event-content div span,
.material-dark .event-content div label,
.material-dark .event-content div span,
.highcontrast .event-content div label,
.highcontrast .event-content div span {
color: #fff;
}
.material .schedule-quick-info .e-quick-popup-wrapper .e-popup-footer {
.material .e-quick-popup-wrapper .e-popup-footer {
display: block !important;
padding: 0px 18px 8px 22px !important;
}

Просмотреть файл

@ -1 +1 @@
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/tree-grid/search/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-9 control-section\">\n <div class=\"content-wrapper\">\n <div id=\"Grid\"></div>\n </div>\n</div>\n\n<div class=\"col-lg-3 property-section\">\n <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n <tbody><tr>\n <td style=\"width: 50%\">\n <div style=\"padding-top: 10px\">Hierarchy Mode</div>\n </td>\n <td style=\"width: 100%;padding-right: 10px\">\n <div>\n <input type=\"text\" tabindex=\"1\" id=\"mode\">\n </div>\n </td>\n </tr>\n </tbody></table>\n \n</div>\n","index.js":"{{ripple}}\n var mode = [\n { id: 'Parent', mode: 'Parent' },\n { id: 'Child', mode: 'Child' },\n { id: 'Both', mode: 'Both' },\n { id: 'None', mode: 'None' },\n ];\n var grid = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n allowPaging: true,\n height: 350,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n toolbar: ['Search'],\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 80 },\n { field: 'taskName', headerText: 'Task Name', width: 200 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 100, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90 },\n { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90 }\n ],\n pageSettings: { pageCount: 5 }\n });\n grid.appendTo('#Grid');\n var dropDownMode = new ej.dropdowns.DropDownList({\n dataSource: mode,\n width: '100px',\n fields: { text: 'mode', value: 'id' },\n value: 'Parent',\n change: function (e) {\n var mode = e.value;\n grid.search('');\n grid.searchSettings.searchHierarchyMode = mode;\n }\n });\n dropDownMode.appendTo('#mode');\n"}
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/tree-grid/search/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-9 control-section\">\n <div class=\"content-wrapper\">\n <div id=\"Grid\"></div>\n </div>\n</div>\n\n<div class=\"col-lg-3 property-section\">\n <table id=\"property\" title=\"Properties\" style=\"width: 100%\">\n <tbody><tr>\n <td style=\"width: 50%\">\n <div style=\"padding-top: 10px\">Hierarchy Mode</div>\n </td>\n <td style=\"width: 100%;padding-right: 10px\">\n <div>\n <input type=\"text\" tabindex=\"1\" id=\"mode\">\n </div>\n </td>\n </tr>\n </tbody></table>\n \n</div>\n","index.js":"{{ripple}}\n var mode = [\n { id: 'Parent', mode: 'Parent' },\n { id: 'Child', mode: 'Child' },\n { id: 'Both', mode: 'Both' },\n { id: 'None', mode: 'None' },\n ];\n var grid = new ej.treegrid.TreeGrid({\n dataSource: window.sampleData,\n allowPaging: true,\n height: 350,\n childMapping: 'subtasks',\n treeColumnIndex: 1,\n toolbar: ['Search'],\n columns: [\n { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 80 },\n { field: 'taskName', headerText: 'Task Name', width: 200 },\n { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 100, format: { skeleton: 'yMd', type: 'date' } },\n { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90 },\n { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90 }\n ],\n pageSettings: { pageCount: 5 }\n });\n grid.appendTo('#Grid');\n var dropDownMode = new ej.dropdowns.DropDownList({\n dataSource: mode,\n width: '100px',\n fields: { text: 'mode', value: 'id' },\n value: 'Parent',\n change: function (e) {\n var mode = e.value;\n grid.search('');\n grid.searchSettings.hierarchyMode = mode;\n }\n });\n dropDownMode.appendTo('#mode');\n"}

Просмотреть файл

@ -30,7 +30,7 @@ this.default = function () {
change: function (e) {
var mode = e.value;
grid.search('');
grid.searchSettings.searchHierarchyMode = mode;
grid.searchSettings.hierarchyMode = mode;
}
});
dropDownMode.appendTo('#mode');

Просмотреть файл

@ -1122,13 +1122,12 @@ a.code:visited {
border: none;
background: none;
}
.bootstrap5-dark .sb-plnr-section, .bootstrap5 .sb-plnr-section, .bootstrap4 .sb-plnr-section {
.bootstrap5-dark .sb-plnr-section, .bootstrap5 .sb-plnr-section {
height: 33px;
line-height: 30px;
}
.bootstrap5 .sample-navigation,.bootstrap5 .sb-open-new-wrapper,
.bootstrap5-dark .sample-navigation,.bootstrap5-dark .sb-open-new-wrapper,
.bootstrap4 .sample-navigation,.bootstrap5 .sb-open-new-wrapper {
.bootstrap5-dark .sample-navigation,.bootstrap5-dark .sb-open-new-wrapper {
line-height:33px;
}
.sb-desktop-setting {