syncfusion
/
ej2-showcase-aspnetcore-diagram-builder
зеркало из
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Feature(Ej2-61919)-Diagram builder

This commit is contained in:
SF3696 2022-08-09 17:54:37 +05:30
Родитель bcd1f8b306
Коммит 4bd547bbdb
9 изменённых файлов: 73 добавлений и 41 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

17
Controllers/HomeController.cs
Просмотреть файл

@ -194,7 +194,7 @@ namespace SyncfusionWebApp3.Controllers
ViewBag.Connectors = connector;
List<SymbolPalettePalette> palettes = new List<SymbolPalettePalette>();
palettes.Add(new SymbolPalettePalette() { Id = "flow", Expanded =false, Symbols = SymbolPaletee, Title = "Flow Shapes" });
palettes.Add(new SymbolPalettePalette() { Id = "flow", Expanded =true, Symbols = SymbolPaletee, Title = "Flow Shapes" });
palettes.Add(new SymbolPalettePalette() { Id = "basic", Expanded = false, Symbols = BasicNodes, Title = "Basic Shapes" });
palettes.Add(new SymbolPalettePalette() { Id = "bpmn", Expanded = false, Symbols = BpmnShapes, Title = "BPMN Shapes" });
palettes.Add(new SymbolPalettePalette() { Id = "connectors", Expanded = false, Symbols = connector, Title = "Connectors" });
@ -227,17 +227,23 @@ namespace SyncfusionWebApp3.Controllers
SymbolPaletteSymbolPreview preview=new SymbolPaletteSymbolPreview{Height = 100, Width = 100};
ViewBag.preview = preview;
// ViewBag.fileItems="DropDownDataSources.prototype.getFileMenuItems";
ViewBag.setPaletteNodeDefaults = "setPaletteNodeDefaults";
ViewBag.getSymbolInfo = "getSymbolInfo";
ViewBag.expandValue = "Multiple";
// ViewBag.expandValue = "Multiple";
ViewBag.enableSearch=true;
ViewBag.getNodeDefaults = "getNodeDefaults";
ViewBag.getConnectorDefaults="getConnectorDefaults";
ViewBag.getTool = "getTool";
// ViewBag.Multiple='Multiple';
// ViewBag.commandSettings="getCommandSettings";
// ViewBag.value="selectedItem.nodeProperties.offsetX";
ViewBag.nodechange="change";
// List<ExpandOptions> expand = new List<ExpandOptions>();
// expand.Add(new ExpandOptions() { text = "Multiple", value = "multiple" });
// ViewBag.expand = expand;
// ViewBag.expandValue = "Multiple";
double[] intervals = { 1, 9, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75};
DiagramGridlines grIdLines = new DiagramGridlines()
@ -259,6 +265,11 @@ namespace SyncfusionWebApp3.Controllers
public bool isPrimary { get; set; }
public string cssClass { get; set; }
}
// public class ExpandOptions
// {
// public string text;
// public string value;
// }
public class contextMenuItems
{
[DefaultValue(null)]

5
Models/DropDownDataModel.cs
Просмотреть файл

@ -74,6 +74,11 @@ namespace SyncfusionWebApp3.Models
iconCss= "sf-icon-Copy"
});
editmenuitems.Add(new
{
text = "Paste",
iconCss= "sf-icon-Paste"
});
editmenuitems.Add(new
{
text = "Delete",
iconCss= "sf-icon-Delete"

31
Views/Home/Index.cshtml
Просмотреть файл

@ -8,7 +8,7 @@
<ejs-contextmenu id='arrangeContextMenu'
items='ViewBag.arrangemenuitems' onOpen="arrangeContextMenuOpen" animationSettings="@new Syncfusion.EJ2.Navigations.ContextMenuAnimationSettings(){Effect= Syncfusion.EJ2.Navigations.MenuEffect.None }" cssClass="arrangeMenu"
select="contextMenuClick" beforeClose="arrangeMenuBeforeClose" >
select="contextMenuClick" beforeClose="arrangeMenuBeforeClose" >
</ejs-contextmenu>
<div class='diagrambuilder-container' style="display: none;">
@ -166,10 +166,11 @@
<div class='row content'>
<div class='sidebar show-overview'>
<div class="db-palette-parent">
<ejs-symbolpalette id="symbolpalette" width="100%" height="100%" symbolHeight="50"symbolWidth="50" expandMode="@ViewBag.expandMode"
<ejs-symbolpalette id="symbolpalette" width="100%" height="100%" symbolHeight="50" symbolWidth="50" expandMode="@ViewBag.expandMode"
getSymbolInfo="@ViewBag.getSymbolInfo" palettes="@ViewBag.palettes" symbolPreview="@ViewBag.preview" symbolMargin= "@ViewBag.margin" enableSearch="@ViewBag.enableSearch"
getNodeDefaults="@ViewBag.setPaletteNodeDefaults">
</ejs-symbolpalette>
@* getNodeDefaults="@ViewBag.setPaletteNodeDefaults" *@
</div>
<div class="db-overview-parent">
<div id="overview"></div>
@ -221,9 +222,9 @@
</div>
<div class="row db-prop-row">
<ejs-dropdownlist id="pageSettingsList" dataSource="ViewBag.paperList" change="DiagramPropertyBinding.prototype.paperListChange"
index="0" >
index="0" >
<e-dropdownlist-fields text="text" value="value"></e-dropdownlist-fields>
</ejs-dropdownlist>
</ejs-dropdownlist>
@* <input type="text" id='pageSettingsList' /> *@
</div>
<div class="row db-prop-row" id="pageOrientation">
@ -245,7 +246,7 @@
<span>W</span>
</div>
<div class="db-text-input">
<ejs-numerictextbox id="pageWidth" min="100" format="n0" change="DiagramPropertyBinding.prototype.pageDimensionChange" ></ejs-numerictextbox>
<ejs-numerictextbox id="pageWidth" min="100" format="n0" change="DiagramPropertyBinding.prototype.pageDimensionChange" value="1056"></ejs-numerictextbox>
@* <input id="pageWidth" type="text" /> *@
</div>
</div>
@ -256,7 +257,7 @@
<span>H</span>
</div>
<div class="db-text-input">
<ejs-numerictextbox id="pageHeight" min="100" format="n0" change="DiagramPropertyBinding.prototype.pageDimensionChange"></ejs-numerictextbox>
<ejs-numerictextbox id="pageHeight" min="100" format="n0" change="DiagramPropertyBinding.prototype.pageDimensionChange" value="816"></ejs-numerictextbox>
@* <input id="pageHeight" type="text" /> *@
</div>
</div>
@ -412,7 +413,7 @@
</div>
<div class="col-xs-4 db-col-center">
<ejs-dropdownlist id='gradientDirectionDropdown' dataSource="ViewBag.gradientDirections"
popupWidth='200px' change="nodegradientdirectionchange">
popupWidth='200px' change="nodegradientdirectionchange" index=0>
<e-dropdownlist-fields text="text" value="value"></e-dropdownlist-fields>
</ejs-dropdownlist>
@* <input type="text" id='gradientDirectionDropdown' /> *@
@ -420,7 +421,7 @@
<div class="col-xs-4 db-col-right">
<div class="db-color-container">
<div class="db-color-input">
<ejs-colorpicker id="nodeGradientColor" type="color" mode="Palette" change="nodegradientcolorchange">
<ejs-colorpicker id="nodeGradientColor" type="color" mode="Palette" change="nodegradientcolorchange" value="#fff">
</ejs-colorpicker>
@* <input id="nodeGradientColor" type="color"> *@
</div>
@ -741,7 +742,7 @@
</div>
<div class="row db-prop-row">
<div class="col-xs-6 db-col-left">
<ejs-dropdownlist id="mindMapLevels" dataSource="ViewBag.mindmapLevels" change="mindMapLevelschange">
<ejs-dropdownlist id="mindMapLevels" dataSource="ViewBag.mindmapLevels" change="mindMapLevelschange" index=0>
<e-dropdownlist-fields text="text" value="value"></e-dropdownlist-fields>
</ejs-dropdownlist>
@* <input type="text" id='mindMapLevels' /> *@
@ -1450,7 +1451,7 @@
</div><div class="col-xs-2"><button id="btnCloseLayer" style="right:10px;position:absolute"></button></div></div></div>'>
<e-dialog-animationsettings effect="None"></e-dialog-animationsettings>
</ejs-dialog>
<div style="height: 100px;">
<ejs-dialog id="themeDialog" width='174px' header='Themes' target="#target" isModal='false'
allowDragging="true" visible='false' showCloseIcon='true' position="themesdialogPosition" close='closeThemeDialog'
created='themeDialogCreated'>
@ -1508,18 +1509,20 @@
</div>
</div>
<div class="row">
@* <div class="db-theme-style-div">
<div class="db-theme-style-div">
<div class="db-theme-style theme11">
</div>
</div> *@
@* <div class="db-theme-style-div">
</div>
<div class="db-theme-style-div">
<div class="db-theme-style theme12">
</div>
</div> *@
</div>
</div>
</div>
</e-content-template>
</ejs-dialog>
</div>
<ejs-dialog id="deleteConfirmationDialog" width='400px' header='Delete Field' target="#target"

14
Views/Shared/_Layout.cshtml
Просмотреть файл

@ -18,14 +18,15 @@
@* <link href="https://cdn.syncfusion.com/ej2/material.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>
<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>
<style>
.container {
margin-left: 0px;
@ -36,7 +37,7 @@
/*increase width as per your need*/
max-width: 100%;
}
</style>
</style>
<style>
.e-toolbar .e-toolbar-items .e-toolbar-item button.e-btn .e-icons.e-btn-icon.sssk {
background-image: url('1.svg');
@ -63,9 +64,10 @@
@RenderBody()
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.18/zone.min.js"></script>
@* <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.18/zone.min.js"></script> *@
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
@* <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> *@
<script src="~/js/commoncommands.js"asp-append-version="true"></script>
<script src="~/js/customcontextmenuitems.js"asp-append-version="true" ></script>
<script src="~/js/customproperties.js"asp-append-version="true"></script>

4
wwwroot/js/commoncommands.js
Просмотреть файл

@ -22,12 +22,12 @@ var CommonKeyboardCommands = (function () {
CommonKeyboardCommands.zoomIn = function () {
var diagram = this.selectedItem.selectedDiagram;
diagram.zoomTo({ type: 'ZoomIn', zoomFactor: 0.2 });
this.selectedItem.scrollSettings.currentZoom = (diagram.scrollSettings.currentZoom * 100).toFixed() + '%';
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() + '%';
selectedItem.scrollSettings.currentZoom = (diagram.scrollSettings.currentZoom * 100).toFixed() + '%';
};
CommonKeyboardCommands.download = function (data, filename) {
var dataStr = data;

20
wwwroot/js/event.js
Просмотреть файл

@ -300,8 +300,8 @@ var DiagramPropertyBinding = (function () {
}
diagram.pageSettings.width = pageWidth;
diagram.pageSettings.height = pageHeight;
document.getElementById("pageWidth").ej2_instances[0] = pageWidth;
document.getElementById("pageHeight").ej2_instances[0] = pageHeight;
document.getElementById("pageWidth").ej2_instances[0].value = pageWidth;
document.getElementById("pageHeight").ej2_instances[0].value = pageHeight;
diagram.dataBind();
}
else {
@ -312,8 +312,8 @@ var DiagramPropertyBinding = (function () {
};
DiagramPropertyBinding.prototype.pageDimensionChange = function (args) {
if (args.event) {
var pageWidth = Number(document.getElementById("pageWidth").ej2_instances[0]);
var pageHeight = Number(document.getElementById("pageHeight").ej2_instances[0]);
var pageWidth = Number(document.getElementById("pageWidth").ej2_instances[0].value);
var pageHeight = Number(document.getElementById("pageHeight").ej2_instances[0].value);
var target = args.event.target;
if (target.tagName.toLowerCase() === 'span') {
target = target.parentElement.children[0];
@ -336,16 +336,16 @@ var DiagramPropertyBinding = (function () {
selectedItem.pageSettings.isLandscape = false;
diagram.pageSettings.orientation = 'Portrait';
}
document.getElementById("pageWidth").ej2_instances[0]= diagram.pageSettings.width = pageWidth;
document.getElementById("pageHeight").ej2_instances[0] = diagram.pageSettings.height = pageHeight;
document.getElementById("pageWidth").ej2_instances[0].value= diagram.pageSettings.width = pageWidth;
document.getElementById("pageHeight").ej2_instances[0].value= diagram.pageSettings.height = pageHeight;
diagram.dataBind();
}
}
};
DiagramPropertyBinding.prototype.pageOrientationChange = function (args) {
if (args.event) {
var pageWidth = Number(document.getElementById("pageWidth").ej2_instances[0]);
var pageHeight = Number(document.getElementById("pageHeight").ej2_instances[0]);
var pageWidth = Number(document.getElementById("pageWidth").ej2_instances[0].value);
var pageHeight = Number(document.getElementById("pageHeight").ej2_instances[0].value);
var target = args.event.target;
var diagram = selectedItem.selectedDiagram;
switch (target.id) {
@ -361,8 +361,8 @@ var DiagramPropertyBinding = (function () {
break;
}
diagram.dataBind();
document.getElementById("pageWidth").ej2_instances[0] = diagram.pageSettings.width;
document.getElementById("pageHeight").ej2_instances[0] = diagram.pageSettings.height;
document.getElementById("pageWidth").ej2_instances[0].value = diagram.pageSettings.width;
document.getElementById("pageHeight").ej2_instances[0].value = diagram.pageSettings.height;
}
};
DiagramPropertyBinding.prototype.pageBackgroundChange1 = function (args) {

14
wwwroot/js/home.js
Просмотреть файл

@ -62,7 +62,7 @@ window.onload = function () {
function setPaletteNodeDefaults(node) {
if (!(node.addInfo && (node.addInfo).type === 'CustomShapes') && (!node.children)) {
if (node.id === 'Terminator' || node.id === 'Process') {
node.width = 130;
node.width = 70;
node.height = 65;
} else {
node.width = 50;
@ -78,6 +78,16 @@ function setPaletteNodeDefaults(node) {
}
};
// function getNodeDefault(symbol) {
// if (symbol.id === 'Terminator' || symbol.id === 'Process') {
// symbol.width = 135;
// symbol.height = 65;
// } else {
// symbol.width = 50;
// symbol.height = 50;
// }
// symbol.style = { strokeColor: "#3A3A3A" };
// }
// function setPaletteNodeDefaults(symbol) {
// if (symbol.id === 'Terminator' || symbol.id === 'Process') {
// symbol.width = 50;
@ -2266,7 +2276,7 @@ function executeEditMenu(diagram, commandType) {
this.pasteObjects();
break;
case 'delete':
this.delete();
this.deleteData();
break;
case 'duplicate':
CommonKeyboardCommands.duplicateSelectedItems();

1
wwwroot/js/selector.js
Просмотреть файл

@ -483,6 +483,7 @@ var SelectorViewModel = (function () {
node.rotateAngle =document.getElementById('nodeRotateAngle').ej2_instances[0].value;
break;
case 'aspectratio':
// node.constraints = node.constraints ^ ej.diagrams.NodeConstraints.AspectRatio;
node.constraints = node.constraints ^ ej.diagrams.NodeConstraints.AspectRatio;
break;
}

8
wwwroot/js/utilitymethods.js
Просмотреть файл

@ -523,7 +523,7 @@ var UtilityMethods = (function () {
selectedItems = selectedItems.concat(selectedDiagram.selectedItems.connectors);
if (itemText) {
var commandType = itemText.replace(/[' ']/g, '');
if (selectedItems.length === 0 || selectedItem.diagramType !== 'GeneralDiagram') {
if (selectedItems.length === 0 || selectedItem.diagramType === 'GeneralDiagram') {
switch (commandType.toLowerCase()) {
case 'edittooltip':
var disable = false;
@ -557,11 +557,11 @@ var UtilityMethods = (function () {
return true;
}
if (itemText === 'Select All') {
if (selectedItem.diagramType !== 'GeneralDiagram' || (selectedItem.selectedDiagram.nodes.length === 0 && selectedItem.selectedDiagram.connectors.length === 0)) {
if (selectedItem.diagramType === 'GeneralDiagram' || (selectedItem.selectedDiagram.nodes.length === 0 && selectedItem.selectedDiagram.connectors.length === 0)) {
return true;
}
}
if (selectedItem.diagramType !== 'GeneralDiagram') {
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;
@ -578,7 +578,7 @@ var UtilityMethods = (function () {
for (var i = 0; i < contextMenu.items.length; i++) {
contextMenu.enableItems([contextMenu.items[i].text], false);
}
if (selectedItem.diagramType === 'GeneralDiagram') {
if (selectedItem.diagramType !== 'GeneralDiagram') {
if (selectedItems.length > 1) {
contextMenu.enableItems(['Align Objects', 'Distribute Objects', 'Match Size', 'Lock', 'Unlock', 'Group'], true);
}