diff --git a/ej2-javascript/accordion/ts/getting-started.md b/ej2-javascript/accordion/ts/getting-started.md index f23a795d4..d4161bff8 100644 --- a/ej2-javascript/accordion/ts/getting-started.md +++ b/ej2-javascript/accordion/ts/getting-started.md @@ -78,7 +78,7 @@ The Accordion CSS files are available in the `ej2-navigations` package folder. T Open the application in Visual Studio Code and add the Syncfusion JavaScript UI controls. -The Accordion can be rendered by defining an array of [`items`](../api/accordion#items). +The Accordion can be rendered by defining an array of [`items`](../api/accordion/#items). * Add the HTML div tag with its `id` attribute as `element` in your `index.html` file to initialize the Accordion. @@ -196,6 +196,6 @@ You need to follow the below structure of HTML elements to render the Accordion. ## See Also -* [How to load accordion items dynamically](./how-to/load-accordion-items-dynamically/) +* [How to load accordion items dynamically](./how-to/load-accordion-items-dynamically) N> You can refer to our [JavaScript Accordion](https://www.syncfusion.com/javascript-ui-controls/js-accordion) feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript Accordion example](https://ej2.syncfusion.com/demos/#/fabric/accordion/default.html) that shows you how to render the Accordion in JavaScript. \ No newline at end of file diff --git a/ej2-javascript/code-snippet/accordion/accordion-treeview-cs1/index.ts b/ej2-javascript/code-snippet/accordion/accordion-treeview-cs1/index.ts index 6a660ce9e..5f8b9916b 100644 --- a/ej2-javascript/code-snippet/accordion/accordion-treeview-cs1/index.ts +++ b/ej2-javascript/code-snippet/accordion/accordion-treeview-cs1/index.ts @@ -2,7 +2,7 @@ import { Accordion, TreeView } from '@syncfusion/ej2-navigations'; -import { DocDB, DownloadDB, PicDB} from 'datasource.ts' +import { DocDB, DownloadDB, PicDB} from './datasource.ts' //Initialize Accordion component let acrdnObj: Accordion = new Accordion({ diff --git a/ej2-javascript/code-snippet/carousel/default-cs1/index.ts b/ej2-javascript/code-snippet/carousel/default-cs1/index.ts index 8ef54aa4e..0ee28f2f5 100644 --- a/ej2-javascript/code-snippet/carousel/default-cs1/index.ts +++ b/ej2-javascript/code-snippet/carousel/default-cs1/index.ts @@ -11,7 +11,6 @@ const carouselObj: Carousel = new Carousel({ { template: '
bee-eater
Bee-eater
' } ], animationEffect: "Fade", - }, }); carouselObj.appendTo("#carousel"); diff --git a/ej2-javascript/code-snippet/carousel/indicator-preview-cs1/ts/index.html b/ej2-javascript/code-snippet/carousel/indicator-preview-cs1/ts/index.html index b1e90b1da..3123a4ec1 100644 --- a/ej2-javascript/code-snippet/carousel/indicator-preview-cs1/ts/index.html +++ b/ej2-javascript/code-snippet/carousel/indicator-preview-cs1/ts/index.html @@ -14,16 +14,18 @@ - + + - + +
LOADING....
@@ -37,4 +39,4 @@
- + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/annotations-conDisp/index.js b/ej2-javascript/code-snippet/diagram/annotations-conDisp/index.js index c8cb27cb9..782a0da38 100644 --- a/ej2-javascript/code-snippet/diagram/annotations-conDisp/index.js +++ b/ej2-javascript/code-snippet/diagram/annotations-conDisp/index.js @@ -9,7 +9,7 @@ var connectors = [ content: 'annotation', offset: 0.2, alignment: 'After', - displacement: { x: 50, y: 10 }, + displacement: { x: 50, y: 50 }, }, ], }, diff --git a/ej2-javascript/code-snippet/diagram/annotations-conDisp/index.ts b/ej2-javascript/code-snippet/diagram/annotations-conDisp/index.ts index b49978456..5ef783cdf 100644 --- a/ej2-javascript/code-snippet/diagram/annotations-conDisp/index.ts +++ b/ej2-javascript/code-snippet/diagram/annotations-conDisp/index.ts @@ -11,7 +11,7 @@ var connectors: ConnectorModel[] = [ content: 'annotation', offset: 0.2, alignment: 'After', - displacement: { x: 50, y: 10 }, + displacement: { x: 50, y: 50 }, }, ], }, diff --git a/ej2-javascript/code-snippet/diagram/nodes-propertyChange/index.js b/ej2-javascript/code-snippet/diagram/nodes-propertyChange/index.js index 0a08ed50f..1545ef419 100644 --- a/ej2-javascript/code-snippet/diagram/nodes-propertyChange/index.js +++ b/ej2-javascript/code-snippet/diagram/nodes-propertyChange/index.js @@ -7,7 +7,7 @@ let nodes = [ offsetY: 50, annotations: [ { - content: 'Click node', + content: 'Node 1', }, ], style: { @@ -27,6 +27,3 @@ var diagram = new ej.diagrams.Diagram({ }); diagram.appendTo('#element'); -document.getElementById('resetSegments').onclick = () => { - diagram.resetSegments(); -}; diff --git a/ej2-javascript/code-snippet/diagram/overview-cs1/index.js b/ej2-javascript/code-snippet/diagram/overview-cs1/index.js index 2ceb4983b..9b7959de2 100644 --- a/ej2-javascript/code-snippet/diagram/overview-cs1/index.js +++ b/ej2-javascript/code-snippet/diagram/overview-cs1/index.js @@ -9,6 +9,58 @@ ej.diagrams.Diagram.Inject( //Click event for Appearance of the Property Panel. //sets node default value + + var hierarchicalTree = [ + { + Name: 'Diagram', + fillColor: '#916DAF', + }, + { + Name: 'Layout', + Category: 'Diagram', + }, + { + Name: 'Tree Layout', + Category: 'Layout', + }, + { + Name: 'Organizational Chart', + Category: 'Layout', + }, + { + Name: 'Hierarchical Tree', + Category: 'Tree Layout', + }, + { + Name: 'Radial Tree', + Category: 'Tree Layout', + }, + { + Name: 'Mind Map', + Category: 'Hierarchical Tree', + }, + { + Name: 'Family Tree', + Category: 'Hierarchical Tree', + }, + { + Name: 'Management', + Category: 'Organizational Chart', + }, + { + Name: 'Human Resources', + Category: 'Management', + }, + { + Name: 'University', + Category: 'Management', + }, + { + Name: 'Business', + Category: 'Management', + }, + ]; + function nodeDefaults(obj, diagram) { obj.style = { fill: '#659be5', @@ -60,7 +112,7 @@ ej.diagrams.Diagram.Inject( dataSourceSettings: { id: 'Name', parentId: 'Category', - dataSource: new ej.data.DataManager(window.hierarchicalTree), + dataSource: new ej.data.DataManager(hierarchicalTree), doBinding: function (nodeModel, data, diagram) { nodeModel.shape = { type: 'Text', content: data.Name }; }, diff --git a/ej2-javascript/code-snippet/diagram/scrollSettings-cs3/index.js b/ej2-javascript/code-snippet/diagram/scrollSettings-cs3/index.js index 504f852a4..c534fee33 100644 --- a/ej2-javascript/code-snippet/diagram/scrollSettings-cs3/index.js +++ b/ej2-javascript/code-snippet/diagram/scrollSettings-cs3/index.js @@ -38,7 +38,7 @@ var diagram = new ej.diagrams.Diagram( scrollLimit: 'Infinity', //Enable autoScroll canAutoScroll: true, - //Defines the autoScroll border of all the sides of diargam + //Defines the autoScroll border of all the sides of diagram autoScrollBorder: { left: 100, right: 100, top: 100, bottom: 100 }, }, }, diff --git a/ej2-javascript/code-snippet/diagram/scrollSettings-cs3/index.ts b/ej2-javascript/code-snippet/diagram/scrollSettings-cs3/index.ts index d93839550..d41883b50 100644 --- a/ej2-javascript/code-snippet/diagram/scrollSettings-cs3/index.ts +++ b/ej2-javascript/code-snippet/diagram/scrollSettings-cs3/index.ts @@ -42,7 +42,7 @@ import { scrollLimit: 'Infinity', //Enable autoScroll canAutoScroll: true, - //Defines the autoScroll border of all the sides of diargam + //Defines the autoScroll border of all the sides of diagram autoScrollBorder: { left: 100, right: 100, top: 100, bottom: 100 }, }, }); diff --git a/ej2-javascript/code-snippet/diagram/shapes-cs4/index.js b/ej2-javascript/code-snippet/diagram/shapes-cs4/index.js index 414f25ace..1777d2e3b 100644 --- a/ej2-javascript/code-snippet/diagram/shapes-cs4/index.js +++ b/ej2-javascript/code-snippet/diagram/shapes-cs4/index.js @@ -3,16 +3,27 @@ var node = { offsetX: 250, offsetY: 250, // Size of the node - width: 100, + width: 300, height: 100, - shape: { type: 'Image', source: 'https://ej2.syncfusion.com/demos/src/diagram/employees/image16.png', scale: 'None' }, + shape: { + type: 'Image', + source: + 'https://ej2.syncfusion.com/demos/src/diagram/employees/image16.png', + scale: 'Stretch', + align: 'None', + }, //Customizes the appearances such as text, font, fill, and stroke. - style: { fill: 'none' } - }; - -// initialize Diagram component - -var diagram = new ej.diagrams.Diagram({ - width: '100%', height: '600px', nodes: [node] - }, '#element'); - + style: { fill: 'none' }, + }; + + // initialize Diagram component + + var diagram = new ej.diagrams.Diagram( + { + width: '100%', + height: '600px', + nodes: [node], + }, + '#element' + ); + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/shapes-cs4/index.ts b/ej2-javascript/code-snippet/diagram/shapes-cs4/index.ts index 92d3d1f55..3b2acd9f7 100644 --- a/ej2-javascript/code-snippet/diagram/shapes-cs4/index.ts +++ b/ej2-javascript/code-snippet/diagram/shapes-cs4/index.ts @@ -1,38 +1,32 @@ - - - -import { - Diagram, - NodeModel, - NodeConstraints -} from '@syncfusion/ej2-diagrams'; +import { Diagram, NodeModel, NodeConstraints } from '@syncfusion/ej2-diagrams'; // A node is created and stored in nodes array. let node: NodeModel = { - // Position of the node - offsetX: 250, - offsetY: 250, - // Size of the node - width: 100, - height: 100, - //sets the type of the shape as Image - shape: { - type: 'Image', - source: 'https://ej2.syncfusion.com/demos/src/diagram/employees/image16.png', - scale: 'None' - }, - //Customizes the appearances such as text, font, fill, and stroke. - style: { - fill: 'none' - } - }; + id: 'node1', + // Position of the node + offsetX: 250, + offsetY: 250, + // Size of the node + width: 300, + height: 100, + //sets the type of the shape as Image + shape: { + type: 'Image', + source: + 'https://ej2.syncfusion.com/demos/src/diagram/employees/image16.png', + scale: 'Stretch', + align: 'None', + }, + //Customizes the appearances such as text, font, fill, and stroke. + style: { + fill: 'none', + }, +}; // initialize diagram component let diagram: Diagram = new Diagram({ - width: '100%', - height: '600px', - // Add node - nodes: [node] + width: '100%', + height: '600px', + // Add node + nodes: [node], }); // render initialized diagram diagram.appendTo('#element'); - - diff --git a/ej2-javascript/code-snippet/diagram/tooltip-size/index.js b/ej2-javascript/code-snippet/diagram/tooltip-size/index.js index 71176c19e..7207cd48e 100644 --- a/ej2-javascript/code-snippet/diagram/tooltip-size/index.js +++ b/ej2-javascript/code-snippet/diagram/tooltip-size/index.js @@ -37,7 +37,7 @@ diagram = new ej.diagrams.Diagram( //Defines mouse over tooltip for a node tooltip: { content: - 'Syncfusion diargam nodes, connectors look and feel can also be customized any way you want. The JavaScript Diagram control provides a rich set of properties through which you can customize connector color, thickness, dash and dot appearance, corners, and even decorators', + 'Syncfusion diagram nodes, connectors look and feel can also be customized any way you want. The JavaScript Diagram control provides a rich set of properties through which you can customize connector color, thickness, dash and dot appearance, corners, and even decorators', position: 'BottomCenter', relativeMode: 'Object', //Set size for tooltip diff --git a/ej2-javascript/code-snippet/diagram/tooltip-size/index.ts b/ej2-javascript/code-snippet/diagram/tooltip-size/index.ts index de39bcfdf..5c8a7706c 100644 --- a/ej2-javascript/code-snippet/diagram/tooltip-size/index.ts +++ b/ej2-javascript/code-snippet/diagram/tooltip-size/index.ts @@ -34,7 +34,7 @@ let diagram: Diagram = new Diagram( //Defines mouse over tooltip for a node tooltip: { content: - 'Syncfusion diargam nodes, connectors look and feel can also be customized any way you want. The JavaScript Diagram control provides a rich set of properties through which you can customize connector color, thickness, dash and dot appearance, corners, and even decorators', + 'Syncfusion diagram nodes, connectors look and feel can also be customized any way you want. The JavaScript Diagram control provides a rich set of properties through which you can customize connector color, thickness, dash and dot appearance, corners, and even decorators', position: 'BottomCenter', relativeMode: 'Object', //Set size for tooltip diff --git a/ej2-javascript/code-snippet/schedule/cell-dimension-cs7/index.ts b/ej2-javascript/code-snippet/schedule/cell-dimension-cs7/index.ts index 41e45e47c..505c790c0 100644 --- a/ej2-javascript/code-snippet/schedule/cell-dimension-cs7/index.ts +++ b/ej2-javascript/code-snippet/schedule/cell-dimension-cs7/index.ts @@ -10,7 +10,7 @@ let scheduleObj: Schedule = new Schedule({ views: ['Day','Week', 'Month', 'Agenda', 'Year'], selectedDate: new Date(2018, 1, 17), minDate:new Date(2017, 4, 17), - maxDate:new Date(2018, 5, 17) + maxDate:new Date(2018, 5, 17), eventSettings: { dataSource: scheduleData } }); scheduleObj.appendTo('#Schedule'); diff --git a/ej2-javascript/code-snippet/schedule/event-cs27/index.ts b/ej2-javascript/code-snippet/schedule/event-cs27/index.ts index 6c9d1c3e0..088b19f22 100644 --- a/ej2-javascript/code-snippet/schedule/event-cs27/index.ts +++ b/ej2-javascript/code-snippet/schedule/event-cs27/index.ts @@ -1,6 +1,6 @@ -import { Schedule, Day, Week, WorkWeek, Month, Agenda View, EventRenderedArgs } from '@syncfusion/ej2-schedule'; +import { Schedule, Day, Week, WorkWeek, Month, Agenda, View, EventRenderedArgs } from '@syncfusion/ej2-schedule'; import { scheduleData } from './datasource.ts'; Schedule.Inject(Day, Week, WorkWeek, Month, Agenda); diff --git a/ej2-javascript/code-snippet/schedule/event-filter-cs1/index.ts b/ej2-javascript/code-snippet/schedule/event-filter-cs1/index.ts index f4c307be6..c629c825d 100644 --- a/ej2-javascript/code-snippet/schedule/event-filter-cs1/index.ts +++ b/ej2-javascript/code-snippet/schedule/event-filter-cs1/index.ts @@ -25,7 +25,7 @@ let scheduleObj: Schedule = new Schedule({ break; } } -}; +}); scheduleObj.appendTo('#Schedule'); function onChange(): void { diff --git a/ej2-javascript/code-snippet/schedule/header-bar-cs2/index.ts b/ej2-javascript/code-snippet/schedule/header-bar-cs2/index.ts index e17bbe3ea..cc2e038a1 100644 --- a/ej2-javascript/code-snippet/schedule/header-bar-cs2/index.ts +++ b/ej2-javascript/code-snippet/schedule/header-bar-cs2/index.ts @@ -34,7 +34,7 @@ let scheduleObj: Schedule = new Schedule({ } }; } - } + }, eventSettings: { dataSource: scheduleData } }); scheduleObj.appendTo('#Schedule'); diff --git a/ej2-javascript/code-snippet/schedule/header-rows-cs5/index.ts b/ej2-javascript/code-snippet/schedule/header-rows-cs5/index.ts index 1ed6447b7..17b868e52 100644 --- a/ej2-javascript/code-snippet/schedule/header-rows-cs5/index.ts +++ b/ej2-javascript/code-snippet/schedule/header-rows-cs5/index.ts @@ -33,7 +33,7 @@ let scheduleObj: Schedule = new Schedule({ ], views: [{ option: 'TimelineMonth' }], eventSettings: { dataSource: eventData } -}; +}); scheduleObj.appendTo('#Schedule'); diff --git a/ej2-javascript/code-snippet/schedule/resource-grouping-cs3/index.ts b/ej2-javascript/code-snippet/schedule/resource-grouping-cs3/index.ts index 31e761ce7..7e33676d9 100644 --- a/ej2-javascript/code-snippet/schedule/resource-grouping-cs3/index.ts +++ b/ej2-javascript/code-snippet/schedule/resource-grouping-cs3/index.ts @@ -32,7 +32,7 @@ let scheduleObj: Schedule = new Schedule({ textField: 'OwnerText', idField: 'Id', groupIDField: 'OwnerGroupId', colorField: 'OwnerColor' }], eventSettings: { dataSource: resourceData }, - renderCell: (args: RenderCellEventArgs) { + renderCell: (args: RenderCellEventArgs) => { if (args.elementType == 'resourceGroupCells' && args.element.className.indexOf('e-work-hours') > 0) { args.element.style.background = "#FAFAE3"; diff --git a/ej2-javascript/diagram/events.md b/ej2-javascript/diagram/events.md index ee6950e60..1daf8b869 100644 --- a/ej2-javascript/diagram/events.md +++ b/ej2-javascript/diagram/events.md @@ -87,8 +87,9 @@ The [`mouseWheel`](../api/diagram/iMouseWheelEventArgs/) event triggers when the {% previewsample "page.domainurl/code-snippet/diagram/events-cs2" %} {% endif %} +## Other events -There are several other events that will be triggered while interacting with diagram elements. To learn more about these events, refer to the sections on [`node-events`](./nodes-events.md) , [`connector-events`](./connector-events.md) , [`port-events`](./ports-interaction.md/#events) , [`annotation-events`](./label-events.md) , [`scroll-events`](./scroll-settings.md/#scroll-change-event) , [`history-events`](./undo-redo.md/#history-change-event) , [`layout-events`](./layout-event.md), [`user-handle-events`](./user-handle.md/#user-handle-events) , [`fixed-user-handle-events`](./user-handle.md/#fixed-user-handle-events) , [`Symbol-palette-events`](./palette-events.md). +There are several other events that will be triggered while interacting with diagram elements. To learn more about these events, refer to the sections on [`node-events`](./nodes-events) , [`connector-events`](./connector-events) , [`port-events`](./ports-interaction/#events) , [`annotation-events`](./label-events) , [`scroll-events`](./scroll-settings/#scroll-change-event) , [`history-events`](./undo-redo/#history-change-event) , [`layout-events`](./layout-event), [`user-handle-events`](./user-handle/#user-handle-events) , [`fixed-user-handle-events`](./user-handle/#fixed-user-handle-events) , [`Symbol-palette-events`](./palette-events). diff --git a/ej2-javascript/diagram/group.md b/ej2-javascript/diagram/group.md index c37213d8b..db4789066 100644 --- a/ej2-javascript/diagram/group.md +++ b/ej2-javascript/diagram/group.md @@ -458,7 +458,7 @@ The following code illustrates how to add a stack panel. ## Interaction -Group node interactions can be performed similarly to normal nodes. Fundamental diagram interactions like selecting, dragging, resizing, and rotating apply equally to group nodes. For more informatation refer to the [`nodes interactions`](./nodes-interaction.md) +Group node interactions can be performed similarly to normal nodes. Fundamental diagram interactions like selecting, dragging, resizing, and rotating apply equally to group nodes. For more informatation refer to the [`nodes interactions`](./nodes-interaction) ### Selecting a Node Group @@ -468,13 +468,13 @@ When a child element within a node group is clicked, the entire contained node g ## Events -The events triggered when interacting with group nodes are similar to those for individual nodes. For more information, refer to the [`nodes events`](./nodes-events.md) +The events triggered when interacting with group nodes are similar to those for individual nodes. For more information, refer to the [`nodes events`](./nodes-events) ## See Also -* [How to add annotations to the node](./labels) +* [How to add annotations to the node](./node-labels) * [How to add ports to the node](./ports) * [How to enable/disable the behavior of the node](./constraints) * [How to add nodes to the symbol palette](./symbol-palette) * [How to create diagram nodes using drawing tools](./tools) -* [How to perform the interaction on the group](./interaction#selection) \ No newline at end of file +* [How to perform the interaction on the group](./interaction#selecting-a-group) \ No newline at end of file diff --git a/ej2-javascript/diagram/images/Zoom-pan.gif b/ej2-javascript/diagram/images/Zoom-pan.gif index 02211add4..ef13c47e3 100644 Binary files a/ej2-javascript/diagram/images/Zoom-pan.gif and b/ej2-javascript/diagram/images/Zoom-pan.gif differ diff --git a/ej2-javascript/diagram/images/connector-interaction.gif b/ej2-javascript/diagram/images/connector-interaction.gif new file mode 100644 index 000000000..c5513c791 Binary files /dev/null and b/ej2-javascript/diagram/images/connector-interaction.gif differ diff --git a/ej2-javascript/diagram/images/different-tooltip.gif b/ej2-javascript/diagram/images/different-tooltip.gif new file mode 100644 index 000000000..295626259 Binary files /dev/null and b/ej2-javascript/diagram/images/different-tooltip.gif differ diff --git a/ej2-javascript/diagram/images/node-interactions.gif b/ej2-javascript/diagram/images/node-interactions.gif new file mode 100644 index 000000000..83e170e7a Binary files /dev/null and b/ej2-javascript/diagram/images/node-interactions.gif differ diff --git a/ej2-javascript/diagram/images/javascript-diagram-symbol-custom-tooltip.gif b/ej2-javascript/diagram/images/symbol-custom-tooltip.gif similarity index 100% rename from ej2-javascript/diagram/images/javascript-diagram-symbol-custom-tooltip.gif rename to ej2-javascript/diagram/images/symbol-custom-tooltip.gif diff --git a/ej2-javascript/diagram/images/javascript-diagram-symbol-palatte-tooltip.gif b/ej2-javascript/diagram/images/symbol-palatte-tooltip.gif similarity index 100% rename from ej2-javascript/diagram/images/javascript-diagram-symbol-palatte-tooltip.gif rename to ej2-javascript/diagram/images/symbol-palatte-tooltip.gif diff --git a/ej2-javascript/diagram/js/commands.md b/ej2-javascript/diagram/js/commands.md index b5e5e62f1..ef6649a5f 100644 --- a/ej2-javascript/diagram/js/commands.md +++ b/ej2-javascript/diagram/js/commands.md @@ -287,7 +287,7 @@ The [`sendBackward`](../api/diagram/#sendbackward) command moves the selected el {% previewsample "page.domainurl/code-snippet/diagram/commands-cs6" %} -The Z-order commands can also be performed using keyboard shortcuts. For more information, refer to the [`keyboard commands`](./interaction.md/#keyboard). +The Z-order commands can also be performed using keyboard shortcuts. For more information, refer to the [`keyboard commands`](./interaction/#keyboard). ## Zoom @@ -314,7 +314,7 @@ diagram.zoom(1.2, { }); ``` -For more information about zoom refer to the [zoom](./scroll-settings.md/#update-zoom-at-runtime) +For more information about zoom refer to the [zoom](./scroll-settings/#update-zoom-at-runtime) ## Nudge command @@ -355,6 +355,8 @@ The arrow keys can be used to move the selected elements up, down, left, or righ Nudge commands are particularly useful for accurate placement of elements. +N> The position change event will not trigger when using keyboard keys to move a node or connector. + ## BringIntoView The [`bringIntoView`](../api/diagram/#bringintoview) command brings the specified rectangular region into the viewport of the diagram, ensuring that it is visible within the current view. @@ -473,7 +475,7 @@ The following code example illustrates how to disable the default cut and delete ## Undo-redo -Undo/redo commands can be executed through shortcut keys. Shortcut key for undo is **`Ctrl+z`** and shortcut key for redo is **`Ctrl+y`**. For more information refer to the [`undo-redo`](./undo-redo.md) +Undo/redo commands can be executed through shortcut keys. Shortcut key for undo is **`Ctrl+z`** and shortcut key for redo is **`Ctrl+y`**. For more information refer to the [`undo-redo`](./undo-redo) ## See Also diff --git a/ej2-javascript/diagram/js/complex-layout.md b/ej2-javascript/diagram/js/complex-layout.md index ca2a89e23..9d8de5cdd 100644 --- a/ej2-javascript/diagram/js/complex-layout.md +++ b/ej2-javascript/diagram/js/complex-layout.md @@ -46,6 +46,7 @@ The following code example illustrates how to create a complex hierarchical tree ![Complex hierarchical tree layout](images/complex-2.png) +N> In Diagram Layouts, all root nodes will always render at the same level. This default behavior cannot be changed to render different trees at distinct levels. ## Line Distribution diff --git a/ej2-javascript/diagram/js/connector-labels.md b/ej2-javascript/diagram/js/connector-labels.md index 57cd2dd0e..8e21a49e2 100644 --- a/ej2-javascript/diagram/js/connector-labels.md +++ b/ej2-javascript/diagram/js/connector-labels.md @@ -61,20 +61,20 @@ The following code example illustrates how to align connector annotations. ## Displacement of annotation -[`Displacement`](../api/diagram/pointmodel/) refers dispalcement of an annotation from its actual position. A connector annotation can be displaced to a particular distance by using a displacement property of the pathAnnotation. The following example shows how to set displacement for the connector annotation. +[`Displacement`](../api/diagram/pointmodel/) refers displacement of an annotation from its actual position. A connector annotation can be displaced to a particular distance by using a displacement property of the pathAnnotation. The following example shows how to set displacement for the connector annotation. {% tabs %} {% highlight js tabtitle="index.js" %} -{% include code-snippet/diagram/annotations-cs7/index.js %} +{% include code-snippet/diagram/annotations-conDisp/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} -{% include code-snippet/diagram/annotations-cs7/index.html %} +{% include code-snippet/diagram/annotations-conDisp/index.html %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/annotations-cs7" %} +{% previewsample "page.domainurl/code-snippet/diagram/annotations-conDisp" %} -N> Displacement is only applicatble when we use alignment as `After` or `Before`. +N> Displacement is only applicable when we use alignment as `After` or `Before`. ## Segment angle for annotation diff --git a/ej2-javascript/diagram/js/connectors.md b/ej2-javascript/diagram/js/connectors.md index 9afbcfa3a..4a679fde5 100644 --- a/ej2-javascript/diagram/js/connectors.md +++ b/ej2-javascript/diagram/js/connectors.md @@ -321,8 +321,8 @@ The following image illustrates how the connector automatically re-routes the se ## See Also -* [How to add annotations to the connector](./labels) -* [How to enable/disable the behavior of the node](./constraints) +* [How to add annotations to the connector](./connector-labels) +* [How to enable/disable the behavior of the connector](./constraints#connector-constraints) * [How to add connectors to the symbol palette](./symbol-palette) -* [How to perform the interaction on the connector](./interaction#connection-editing) -* [How to create diagram connectors using drawing tools](./tools) \ No newline at end of file +* [How to perform the interaction on the connector](./interaction#connector-editing) +* [How to create diagram connectors using drawing tools](./tools#draw-connectors) \ No newline at end of file diff --git a/ej2-javascript/diagram/js/customization.md b/ej2-javascript/diagram/js/customization.md index 3411e9c06..ed1f1e61e 100644 --- a/ej2-javascript/diagram/js/customization.md +++ b/ej2-javascript/diagram/js/customization.md @@ -172,7 +172,7 @@ The [`angle`](../api/diagram/shadowModel/#angle), [`distance`](../api/diagram/sh ## Provide additional information to the node -The [`addInfo`](../api/diagram/nodeModel/#addinfo) property of the node allows you to maintain additional information to the node. You can sepecify either object or string value. +The [`addInfo`](../api/diagram/nodeModel/#addinfo) property of the node allows you to maintain additional information to the node. You can specify either object or string value. The following code shows how to set the AddInfo value. @@ -196,7 +196,7 @@ var nodes = [ ## Constraints -The [`constraints`](../api/diagram/node#constraints-nodeconstraints) property of the node allows you to enable/disable certain behaviours of the node. For more information about node constraints refer to the [`Node Constraints`](./constraints.md) +The [`constraints`](../api/diagram/node#constraints-nodeconstraints) property of the node allows you to enable/disable certain behaviors of the node. For more information about node constraints refer to the [`Node Constraints`](./constraints) ## Stack order diff --git a/ej2-javascript/diagram/js/data-binding.md b/ej2-javascript/diagram/js/data-binding.md index 2a75bcbf6..08c2a329d 100644 --- a/ej2-javascript/diagram/js/data-binding.md +++ b/ej2-javascript/diagram/js/data-binding.md @@ -201,4 +201,4 @@ diagram.removeData(); ## See Also -* [How to arrange the diagram nodes and connectors using varies layout](./automatic-layout) +* [How to arrange the diagram nodes and connectors using various layout](./automatic-layout) diff --git a/ej2-javascript/diagram/js/export.md b/ej2-javascript/diagram/js/export.md index c6021f37d..863bf2d69 100644 --- a/ej2-javascript/diagram/js/export.md +++ b/ej2-javascript/diagram/js/export.md @@ -19,7 +19,7 @@ N> To Export diagram, you need to inject `PrintAndExport` in the diagram. ```JavaScript -var diagram = new ej.diargams.Diagram({ +var diagram = new ej.diagrams.Diagram({ width: 1500, height: 1500 }); diagram.appendTo('#element'); @@ -101,7 +101,7 @@ The following code example demonstrates how to export the diagram as raw data. ```JavaScript -var diagram = new ej.diargams.Diagram({ +var diagram = new ej.diagrams.Diagram({ width: 1500, height: 1500 }); diagram.appendTo('#element'); @@ -190,7 +190,7 @@ Diagram provides support to export the diagram as image for [`stretch`](../api/d The following code example illustrates how to export the region occupied by the diagram elements. ```JavaScript -var diagram = new ej.diargams.Diagram({ +var diagram = new ej.diagrams.Diagram({ width: 1500, height: 1500 }); diagram.appendTo('#element'); diff --git a/ej2-javascript/diagram/js/interaction.md b/ej2-javascript/diagram/js/interaction.md index 098be0181..efdb59d4e 100644 --- a/ej2-javascript/diagram/js/interaction.md +++ b/ej2-javascript/diagram/js/interaction.md @@ -17,9 +17,7 @@ The selector visually represents selected elements, acting as a container to mod ## Selection -An element can be selected by clicking that element. During single click, all previously selected items are cleared. The following image shows how the selected elements are visually represented. - -![Single Selection](images/single-select.gif) +An element can be selected by clicking that element. During single click, all previously selected items are cleared. When selecting/unselecting the diagram elements, the [`selectionChange`](../api/diagram/iSelectionChangeEventArgs/) event and [`click`](../api/diagram/iclickeventargs/) gets triggered. These events enable you to customize the selected elements as needed. @@ -47,8 +45,6 @@ In rubber band selection, you can set the selection of items by region using the This can be configured with the [`rubberBandSelectionMode`](../api/diagram/rubberBandSelectionMode/). -![Multiple Selection](images/multiselect_Highlight.gif) - ### Select/Unselect elements using API @@ -74,11 +70,11 @@ diagram.appendTo('#diagram'); //Select a specified collection of nodes and connectors in the diagram diagram.select([diagram.nodes[0]]); //Removes all elements from the selection list, clearing the current selection. -diargam.clearSelection(); +diagram.clearSelection(); ``` ### Get selected items -You can get the currently selected [`nodes`](../api/diagram/selectorModel/#connectors) and [`connectors`](../api/diagram/selectorModel/#nodes) using [`selectedItems`](../api/diagram/selectorModel/) property of the diargam. +You can get the currently selected [`nodes`](../api/diagram/selectorModel/#connectors) and [`connectors`](../api/diagram/selectorModel/#nodes) using [`selectedItems`](../api/diagram/selectorModel/) property of the diagram. ```javascript @@ -127,16 +123,12 @@ You can also use the CTRL+A keys to select all nodes and connectors in the diagr You can drag an object by clicking and dragging it. When multiple elements are selected, dragging any one of them moves all selected elements together. As you drag elements within the diagram, the [`positionChange`](../api/diagram/idraggingeventargs/) event is triggered, providing opportunities to customize the dragged elements. -![Drag](images/drag.gif) - ## Resize The selector in the diagram is designed with eight resizing handles, commonly referred to as thumbs. These handles allow users to adjust the size of selected items by clicking and dragging them. When resizing, dragging any handle modifies the dimensions of the selected elements accordingly. Notably, when dragging one corner handle, the opposite corner remains fixed to specific alignment of the selected item. During the resizing process, the diagram triggers the [`sizeChange`](../api/diagram/isizechangeeventargs/) event, allowing customization based on the size of the element. -![Resize](images/resize.gif) - N> While dragging and resizing, the objects are snapped towards the nearest objects to make better alignments. ### Aspect ratio @@ -154,7 +146,7 @@ Maintaining aspect ratio in diagram means that when you resize a node, by draggi {% previewsample "page.domainurl/code-snippet/diagram/interaction-aspect" %} -### Customing resize-thumb size +### Customizing resize-thumb size You can change the size of the node resize thumb and the connector end point handle by using the [`handleSize`](../api/diagram/selectorModel/#handlesize) property. The following example shows the resize handle size customization. @@ -169,8 +161,6 @@ You can change the size of the node resize thumb and the connector end point han {% previewsample "page.domainurl/code-snippet/diagram/interaction-cs1" %} -![handleSize](images/handleSize.gif) - The appearance such as fill, stroke, and stroke width of the node resize thumb and connector end point handle can be customized by overriding the e-diagram-resize-handle and e-diagram-endpoint-handle classes respectively. ## Rotate @@ -178,8 +168,6 @@ The appearance such as fill, stroke, and stroke width of the node resize thumb a A rotation handler is positioned above the selector. Clicking and dragging this handler in a circular motion rotates the node. The node rotates around a fixed pivot point. A pivot thumb, located at the center of the node, appears during rotation to indicate the fixed point. Rotating a node triggers the [`rotateChange`](../api/diagram/iRotationEventArgs/) event. -![rotate](images/rotate.gif) - ### Customize rotate handle position The position of the rotate handle can be adjusted by modifying the pivot point of the node using the [`pivot`](../api/diagram/nodeModel/#pivot) property. By default, the pivot point is set to (0.5, 0.5). The following example shows how to render the rotate handle at the left top corner of the node. @@ -195,6 +183,8 @@ The position of the rotate handle can be adjusted by modifying the pivot point o {% previewsample "page.domainurl/code-snippet/diagram/interaction-pivot" %} +![Node interaction](./images/node-interactions.gif) + ## Connector editing Each segment of a selected connector is editable with some specific handles/thumbs. @@ -205,8 +195,6 @@ N> For connector editing, you have to inject the [`ConnectorEditing`](../api/dia Source and target points of selected connectors are represented by two handles. Clicking and dragging these handles allows you to adjust the source and target points. -![Drag End Point Handles](images/connector-end-point.gif) - Dragging the connector end points triggers the following events for customization: When the connector's source point is changed, the [`sourcePointChange`](../api/diagram/iEndChangeEventArgs/) event is triggered. @@ -217,32 +205,26 @@ Connecting a connector to port/node or disconnecting from them triggers the [`co The end point of each straight segment is represented by a thumb that allows you to edit the segment. You can insert any number of new segments into a straight line by clicking while holding the Shift and Ctrl keys (Ctrl+Shift+Click). -![Straight Segment Editing Addition](images/straight-segment-add.gif) - Straight segments can be removed by clicking the segment end point while holding the Ctrl and Shift keys (Ctrl+Shift+Click). -![Straight Segment Editing Remove](images/straight-segment-remove.gif) - ### Orthogonal segment editing Orthogonal thumbs allow you to adjust the length of adjacent segments by clicking and dragging them. When necessary, segments are automatically added or removed during dragging to maintain proper orthogonal routing. When editing a segment, the [`segmentChange`](../api/diagram/iSegmentChangeEventArgs/) event is triggered. When new segments are added to the collection of connector segments, the [`segmentCollectionChange`](../api/diagram/iSegmentCollectionChangeEventArgs/) event is triggered. -![orthogonal Segment Edit](images/orthogonal-segment-edit.gif) - ### Bezier segment editing Bezier segment thumbs allow you to adjust the segments by clicking and dragging them. -![Bezier Segment Thumbs](images/bezierSegmentThumbControl.gif) - #### Bezier Control Points Bezier segments are annotated with two thumbs representing the control points. These control points can be adjusted by clicking and dragging the control thumbs. Dragging the control point changes the angle and distance of the points from the segment point, modifying the curve. -![Bezier Control Points](images/bezier-segement-thumb.gif) +The following image shows the interactions with connector + +![Connector interaction](./images/connector-interaction.gif) ## User handles @@ -256,7 +238,7 @@ The following events are triggered when interacting with a user handle: * [`onUserHandleMouseUp`](../api/diagram/#onuserhandlemouseup) - Triggered when the mouse is released on the user handle. * [`onUserHandleMouseLeave`](../api/diagram/#onuserhandlemouseleave) - Triggered when the mouse leaves the user handle region. -For more information, refer to the [`user handle events`](./user-handle.md/#user-handle-events). +For more information, refer to the [`user handle events`](./user-handle/#user-handle-events). ## Fixed user handle @@ -271,7 +253,7 @@ The following events are triggered when interacting with a fixed user handle: * [`onFixedUserHandleMouseLeave`](../api/diagram/#onfixeduserhandlemouseleave) - Triggered when the mouse leaves the fixed user handle region. * [`fixedUserHandleClick`](../api/diagram/fixedUserHandleClickEventArgs/) - Triggered when the fixed user handle is clicked. -For more information, refer to the [`fixed user handle events`](./user-handle.md/#fixed-user-handle-events). +For more information, refer to the [`fixed user handle events`](./user-handle/#fixed-user-handle-events). ## Determining Mouse Button Clicks @@ -308,7 +290,7 @@ When loading a large diagram, only a certain portion of the diagram is initially | Progress | When the mouse is in motion the status is notified as progress.| | Completed | When panning is stopped the status is notified with completed.| -![Zoom Pan](images/Zoom-pan.gif) +![Zoom Pan](./images/Zoom-pan.gif) ## Keyboard @@ -372,8 +354,8 @@ N> Please note that the positionChange event is triggered for dragging nodes/con ## See Also -* [How to create diagram nodes using drawing tools](./tools#Shapes) -* [How to create diagram connectors using drawing tools](./tools#Connectors ) -* [How to disable the diagram interaction](./tools) +* [How to create diagram nodes using drawing tools](./tools#draw-nodes) +* [How to create diagram connectors using drawing tools](./tools#draw-connectors ) +* [How to disable the diagram interaction](./tools#tool-selection) * [How to control the diagram history](./undo-redo) * [How to create overview control to the diagram](./overview) diff --git a/ej2-javascript/diagram/js/layout-customization.md b/ej2-javascript/diagram/js/layout-customization.md index 516ef4e9a..5ceffacb9 100644 --- a/ej2-javascript/diagram/js/layout-customization.md +++ b/ej2-javascript/diagram/js/layout-customization.md @@ -162,7 +162,7 @@ Diagram allows to expand/collapse the subtrees of a layout. The node’s isExpan {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout-cs15" %} -For more details about customizing the expand and collapse icon refer [`expand Collapse`](./expandAndCollapse.md) +For more details about customizing the expand and collapse icon refer [`expand Collapse`](./expandAndCollapse) ## Layout animation diff --git a/ej2-javascript/diagram/js/nodes-interaction.md b/ej2-javascript/diagram/js/nodes-interaction.md index 08b9ecd1f..0a4500d49 100644 --- a/ej2-javascript/diagram/js/nodes-interaction.md +++ b/ej2-javascript/diagram/js/nodes-interaction.md @@ -38,7 +38,7 @@ A node can be selected at runtime by using the [`select`](../api/diagram/#select |Method | Parameter | Description| |----|----|----| |[`unSelect`](../api/diagram/#unselect)| NodeModel/ConnectorModel | The object to remove from the selection.| -|[`clearSelection`](../api/diagram/#clearSelection)| - | Clears all the selection in the diargam.| +|[`clearSelection`](../api/diagram/#clearSelection)| - | Clears all the selection in the diagram.| ## Drag diff --git a/ej2-javascript/diagram/js/nodes.md b/ej2-javascript/diagram/js/nodes.md index 40164525b..78fcd47cf 100644 --- a/ej2-javascript/diagram/js/nodes.md +++ b/ej2-javascript/diagram/js/nodes.md @@ -77,7 +77,7 @@ The following code illustrates how to add a nodes collection at runtime. ### Add node from palette -Nodes can be predefined and added to the palette, and can be dropped into the diagram when needed. For more information about adding nodes from symbol palette, refer to [`Symbol Palette`](./symbol-palette.md). +Nodes can be predefined and added to the palette, and can be dropped into the diagram when needed. For more information about adding nodes from symbol palette, refer to [`Symbol Palette`](./symbol-palette). {% tabs %} @@ -93,7 +93,7 @@ Nodes can be predefined and added to the palette, and can be dropped into the di ### Create node through data source -Nodes can be generated automatically with the information provided through dataSource property. The default properties for these nodes are fetched from default settings ([`getNodeDefaults`](../api/diagram/#getnodedefaults)). For more information about data source, refer to  [`DataBinding`](./data-binding.md). +Nodes can be generated automatically with the information provided through dataSource property. The default properties for these nodes are fetched from default settings ([`getNodeDefaults`](../api/diagram/#getnodedefaults)). For more information about data source, refer to  [`DataBinding`](./data-binding). {% tabs %} {% highlight js tabtitle="index.js" %} @@ -177,9 +177,9 @@ The following code example demonstrates how to convert a tree view element into ## See Also -* [How to add annotations to the node](./labels) +* [How to add annotations to the node](./node-labels.md) * [How to add ports to the node](./ports) -* [How to enable/disable the behavior of the node](./constraints) +* [How to enable/disable the behavior of the node](./constraints#node-constraints) * [How to add nodes to the symbol palette](./symbol-palette) * [How to edit the node visual interface](./interaction#selection) -* [How to create diagram nodes using drawing tools](./tools) +* [How to create diagram nodes using drawing tools](./tools#draw-nodes) diff --git a/ej2-javascript/diagram/js/palette-customization.md b/ej2-javascript/diagram/js/palette-customization.md index a18554365..721b514fb 100644 --- a/ej2-javascript/diagram/js/palette-customization.md +++ b/ej2-javascript/diagram/js/palette-customization.md @@ -38,7 +38,7 @@ The following example demonstrates how to customize the palette properties. ## Animation -The expand and collpase operation of symbol palette can be animated by utilizing the [`enableAnimation`](../api/diagram/symbolPaletteModel/#enableanimation) property of symbol palette. The following example demonstrates, how to enable and disable animation for symbol palette. +The expand and collapse operation of symbol palette can be animated by utilizing the [`enableAnimation`](../api/diagram/symbolPaletteModel/#enableanimation) property of symbol palette. The following example demonstrates, how to enable and disable animation for symbol palette. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -154,6 +154,8 @@ The [`symbolDragSize`](../api/diagram/symbolPaletteModel/#symboldragsize) proper {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-dragSize" %} +N> If the size of the symbol is not defined, the default size will be determined based on its shape. + ## Expand Mode You can customize whether to expand all the palettes of symbol palette at a time or to expand only one palette at a time. This customization can be done using the [`expandMode`](../api/diagram/symbolPaletteModel/#expandmode) property of symbol palette. @@ -200,7 +202,7 @@ When hovering over symbols in the symbol palette, the default tooltip displays t Refer to the image below for an illustration of the tooltip behavior in the symbol palette. -![SymmbolPaletteTooltip](../diagram/images/SymbolPalatteTooltip.gif) +![SymmbolPaletteTooltip](./images/symbol-palatte-tooltip.gif) ### Custom tooltip for symbols @@ -238,11 +240,11 @@ The following code example demonstrates how to define different tooltips for the The following image illustrates the differentiation of tooltips displayed in the Symbol Palette and the Diagram. -![SymmbolPaletteCustomTooltip](../diagram/images/SymbolCustomTooltip.gif) +![SymmbolPaletteTooltip](./images/different-tooltip.gif) The following code snippet will demonstrate how to define two different tooltip for symbol in the symbol palette and dropped node in the diagram canvas. -## Lacalization +## Localization To localize the symbol palette search box, we need to define the [`locale`](../api/diagram/symbolPaletteModel/#locale) property of the symbol palette with our preferred culture. In the example below, we use **'de-DE**', which is the locale code for German as used in Germany. diff --git a/ej2-javascript/diagram/js/serialization.md b/ej2-javascript/diagram/js/serialization.md index aec658e29..b3b32a345 100644 --- a/ej2-javascript/diagram/js/serialization.md +++ b/ej2-javascript/diagram/js/serialization.md @@ -38,7 +38,7 @@ savedData = localStorage.getItem('fileName'); ``` -The diagram can also be saved as raster or vector image files. For more information about saving the diagram as images, refer to the [`Print`](./print.md) and [`Export`](./export.md) section. +The diagram can also be saved as raster or vector image files. For more information about saving the diagram as images, refer to the [`Print`](./print) and [`Export`](./export) section. ## Load diff --git a/ej2-javascript/diagram/js/tools.md b/ej2-javascript/diagram/js/tools.md index d27bdc089..5ae7825f0 100644 --- a/ej2-javascript/diagram/js/tools.md +++ b/ej2-javascript/diagram/js/tools.md @@ -53,7 +53,7 @@ The following code example illustrates how to draw a path shape. ### Text Nodes -Similarly, you can draw a text node by setting the type of shape as 'Text' in the [`drawingObject`](../api/diagram/#drawingobject) property. The [`text`](../api/diagram/textmodel/) type node contains a property called content, which specifies the text within the node. You can add thae content to the text node once you finish drawing the node. Here is how you can draw a text node at runtime: +Similarly, you can draw a text node by setting the type of shape as 'Text' in the [`drawingObject`](../api/diagram/#drawingobject) property. The [`text`](../api/diagram/textmodel/) type node contains a property called content, which specifies the text within the node. You can add the content to the text node once you finish drawing the node. Here is how you can draw a text node at runtime: {% tabs %} {% highlight js tabtitle="index.js" %} @@ -185,6 +185,8 @@ To activate panning mode set the [`tool`](../api/diagram#tool) property of the d {% previewsample "page.domainurl/code-snippet/diagram/Tools-cs7" %} +N> Please note that panning the diagram is not possible when 'multiplePage' is set to false if any diagram object (node or connector) is outside the defined page break area. + ## Events The [`elementDraw`](../api/diagram/iElementDrawEventArgs/) event is triggered whenever a node or connector is drawn using a drawing tool in the diagram. This event provides a way to capture and respond to actions when elements are created on the canvas. diff --git a/ej2-javascript/diagram/js/virtualization.md b/ej2-javascript/diagram/js/virtualization.md index 2da9e084c..e6f5c5b46 100644 --- a/ej2-javascript/diagram/js/virtualization.md +++ b/ej2-javascript/diagram/js/virtualization.md @@ -19,7 +19,7 @@ Virtualization optimizes the diagram performance by loading only the diagramming This feature significantly enhances performance, especially when working with diagrams containing a large number of nodes and connectors. By reducing the number of objects that need to be processed at any given time, virtualization ensures smoother interactions, such as loading and dragging items within the diagram. -To enable virtualization in a diagram, you need to include the virtualization constraint in the diagram's constraints. For more information, refer to the [`diagram constraints`](./constraints.md/#diagram-constraints). +To enable virtualization in a diagram, you need to include the virtualization constraint in the diagram's constraints. For more information, refer to the [`diagram constraints`](./constraints/#diagram-constraints). The following code example demonstrates how to enable Virtualization mode in the diagram: diff --git a/ej2-javascript/diagram/page-settings.md b/ej2-javascript/diagram/page-settings.md index e833ef9cf..4451fe464 100644 --- a/ej2-javascript/diagram/page-settings.md +++ b/ej2-javascript/diagram/page-settings.md @@ -153,7 +153,7 @@ The [`multiplePage`](../api/diagram/pageSettingsModel/#multiplepage) and [`showP {% previewsample "page.domainurl/code-snippet/diagram/pagesettings-cs3" %} {% endif %} -The color of the page break lines can be customized by overriding the styles of the .e-diagram-page-break class. For more details refer to [`CSS customization`](./style.md/#customizing-the-page-breaks) +The color of the page break lines can be customized by overriding the styles of the .e-diagram-page-break class. For more details refer to [`CSS customization`](./style/#customizing-the-page-breaks) ## Boundary constraints @@ -163,7 +163,7 @@ There are three types of boundary constraints. They are: - Infinity - Diagram - Page -To explore these constraints further, refer to [`Boundary Constraints`](./constraints.md/#boundary-constraints). +To explore these constraints further, refer to [`Boundary Constraints`](./constraints/#boundary-constraints). Below is an example illustrating how to define boundary constraints within the diagram: diff --git a/ej2-javascript/diagram/ruler.md b/ej2-javascript/diagram/ruler.md index 3a4e68888..cf7583f8c 100644 --- a/ej2-javascript/diagram/ruler.md +++ b/ej2-javascript/diagram/ruler.md @@ -58,7 +58,7 @@ The HorizontalRuler’s [`interval`](../api/diagram/diagramRuler/#interval) prop The HorizontalRuler’s [`tickAlignment`](../api/diagram/diagramRuler/#tickalignment) property aligns the ruler ticks to the left or right side, while the VerticalRuler’s [`tickAlignment`](../api/diagram/diagramRuler/#tickalignment) aligns them to the top or bottom. -The HorizontalRuler’s [`thichness`](../api/diagram/diagramRuler/#thickness) property sets the thickness of the horizontal ruler, and the VerticalRuler’s [`thichness`](../api/diagram/diagramRuler/#thickness) property sets the thickness of the vertical ruler. +The HorizontalRuler’s [`thickness`](../api/diagram/diagramRuler/#thickness) property sets the thickness of the horizontal ruler, and the VerticalRuler’s [`thickness`](../api/diagram/diagramRuler/#thickness) property sets the thickness of the vertical ruler. The following code shows how the diagram ruler can be customized. @@ -126,4 +126,4 @@ The following code demonstrates how to use the `arrangeTick` function to customi The HorizontalRuler’s [`markerColor`](../api/diagram/diagramRuler/#markercolor) and VerticalRuler’s [`markerColor`](../api/diagram/diagramRuler/#markercolor) properties are used to define the ruler marker color and marker will be shown while hovering mouse over the diagram canvas. -N> : The MarkerColor property can be customized using the [`marker`](./style/#customizing-the-ruler-marker-color) CSS style. +N> The MarkerColor property can be customized using the [`marker`](./style/#customizing-the-ruler-marker-color) CSS style. diff --git a/ej2-javascript/diagram/shapes.md b/ej2-javascript/diagram/shapes.md index 676ac7622..a36bcd057 100644 --- a/ej2-javascript/diagram/shapes.md +++ b/ej2-javascript/diagram/shapes.md @@ -128,9 +128,9 @@ Link 2: `http://stackoverflow.com/questions/4761711/local-image-in-canvas-in-chr Stretch and align the image content anywhere but within the node boundary. -The scale property of the node allows to stretch the image as you desired (either to maintain proportion or to stretch). By default, the [`scale`](../api/diagram/image#scale-scale) property of the node is set as **meet**. +The scale property of the node allows to stretch the image as you desired (either to maintain proportion or to stretch). By default, the [`scale`](../api/diagram/image/#scale) property of the node is set as **meet**. The [`align`](../api/diagram/imageAlignment/) property is used to set the alignment of the image. -The following code illustrates how to scale or stretch the content of the image node. +The following code illustrates how to use scale and align properties to stretch the image. {% if page.publishingplatform == "typescript" %} @@ -168,6 +168,8 @@ The following table illustrates all the possible scale options for the image nod | Slice |![Slice Alignment](images/Image3.png) | | Stretch |![Stretch Alignment](images/Image4.png) | +N> To visualize the changes in image scaling, it is essential to use the align property along with scale. + ## HTML Html elements can be embedded in the diagram through [`Html`](../api/diagram/node#shape-shapemodel) type node. The shape property of node allows you to set the type of node and to create a HTML node it should be set as `HTML`. diff --git a/ej2-javascript/diagram/ts/commands.md b/ej2-javascript/diagram/ts/commands.md index 0b57aeb51..b90ea36d4 100644 --- a/ej2-javascript/diagram/ts/commands.md +++ b/ej2-javascript/diagram/ts/commands.md @@ -285,7 +285,7 @@ The [`sendBackward`](../api/diagram/#sendbackward) command moves the selected el {% previewsample "page.domainurl/code-snippet/diagram/commands-cs6" %} -The Z-order commands can also be performed using keyboard shortcuts. For more information, refer to the [`keyboard commands`](./interaction.md/#keyboard). +The Z-order commands can also be performed using keyboard shortcuts. For more information, refer to the [`keyboard commands`](./interaction/#keyboard). ## Zoom @@ -312,7 +312,7 @@ diagram.zoom(1.2, { }); ``` -For more information about zoom refer to the [zoom](./scroll-settings.md/#update-zoom-at-runtime) +For more information about zoom refer to the [zoom](./scroll-settings/#update-zoom-at-runtime) ## Nudge command @@ -353,6 +353,8 @@ The arrow keys can be used to move the selected elements up, down, left, or righ Nudge commands are particularly useful for accurate placement of elements. +N> The position change event will not trigger when using keyboard keys to move a node or connector. + ## BringIntoView The [`bringIntoView`](../api/diagram/#bringintoview) command brings the specified rectangular region into the viewport of the diagram, ensuring that it is visible within the current view. @@ -471,7 +473,7 @@ The following code example illustrates how to disable the default cut and delete ## Undo-redo -Undo/redo commands can be executed through shortcut keys. Shortcut key for undo is **`Ctrl+z`** and shortcut key for redo is **`Ctrl+y`**. For more information refer to the [`undo-redo`](./undo-redo.md) +Undo/redo commands can be executed through shortcut keys. Shortcut key for undo is **`Ctrl+z`** and shortcut key for redo is **`Ctrl+y`**. For more information refer to the [`undo-redo`](./undo-redo) ## See Also diff --git a/ej2-javascript/diagram/ts/complex-layout.md b/ej2-javascript/diagram/ts/complex-layout.md index 6007dce6c..ac84a3db1 100644 --- a/ej2-javascript/diagram/ts/complex-layout.md +++ b/ej2-javascript/diagram/ts/complex-layout.md @@ -46,6 +46,7 @@ The following code example illustrates how to create a complex hierarchical tree ![Complex hierarchical tree layout](images/complex-2.png) +N> In Diagram Layouts, all root nodes will always render at the same level. This default behavior cannot be changed to render different trees at distinct levels. ## Line Distribution diff --git a/ej2-javascript/diagram/ts/connector-labels.md b/ej2-javascript/diagram/ts/connector-labels.md index e6df0d470..b0b54b771 100644 --- a/ej2-javascript/diagram/ts/connector-labels.md +++ b/ej2-javascript/diagram/ts/connector-labels.md @@ -61,20 +61,20 @@ The following code example illustrates how to align connector annotations. ## Displacement of annotation -[`Displacement`](../api/diagram/pointmodel/) refers dispalcement of an annotation from its actual position. A connector annotation can be displaced to a particular distance by using a displacement property of the pathAnnotation. The following example shows how to set displacement for the connector annotation. +[`Displacement`](../api/diagram/pointmodel/) refers displacement of an annotation from its actual position. A connector annotation can be displaced to a particular distance by using a displacement property of the pathAnnotation. The following example shows how to set displacement for the connector annotation. {% tabs %} {% highlight ts tabtitle="index.ts" %} -{% include code-snippet/diagram/annotations-cs7/index.ts %} +{% include code-snippet/diagram/annotations-conDisp/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} -{% include code-snippet/diagram/annotations-cs7/index.html %} +{% include code-snippet/diagram/annotations-conDisp/index.html %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/annotations-cs7" %} +{% previewsample "page.domainurl/code-snippet/diagram/annotations-conDisp" %} -N> Displacement is only applicatble when we use alignment as `After` or `Before`. +N> Displacement is only applicable when we use alignment as `After` or `Before`. ## Segment angle for annotation diff --git a/ej2-javascript/diagram/ts/connectors.md b/ej2-javascript/diagram/ts/connectors.md index a04df5b30..e3bc6188e 100644 --- a/ej2-javascript/diagram/ts/connectors.md +++ b/ej2-javascript/diagram/ts/connectors.md @@ -322,8 +322,8 @@ The following image illustrates how the connector automatically re-routes the se ## See Also -* [How to add annotations to the connector](./labels) -* [How to enable/disable the behavior of the node](./constraints) +* [How to add annotations to the connector](./connector-labels) +* [How to enable/disable the behavior of the connector](./constraints#connector-constraints) * [How to add connectors to the symbol palette](./symbol-palette) -* [How to perform the interaction on the connector](./interaction#connection-editing) -* [How to create diagram connectors using drawing tools](./tools) \ No newline at end of file +* [How to perform the interaction on the connector](./interaction#connector-editing) +* [How to create diagram connectors using drawing tools](./tools#draw-connectors) \ No newline at end of file diff --git a/ej2-javascript/diagram/ts/customization.md b/ej2-javascript/diagram/ts/customization.md index 279883c53..d0d145d20 100644 --- a/ej2-javascript/diagram/ts/customization.md +++ b/ej2-javascript/diagram/ts/customization.md @@ -172,7 +172,7 @@ The [`angle`](../api/diagram/shadowModel/#angle), [`distance`](../api/diagram/sh ## Provide additional information to the node -The [`addInfo`](../api/diagram/nodeModel/#addinfo) property of the node allows you to maintain additional information to the node. You can sepecify either object or string value. +The [`addInfo`](../api/diagram/nodeModel/#addinfo) property of the node allows you to maintain additional information to the node. You can specify either object or string value. The following code shows how to set the AddInfo value. @@ -196,7 +196,7 @@ var nodes = [ ## Constraints -The [`constraints`](../api/diagram/node#constraints-nodeconstraints) property of the node allows you to enable/disable certain behaviours of the node. For more information about node constraints refer to the [`Node Constraints`](./constraints.md) +The [`constraints`](../api/diagram/node#constraints-nodeconstraints) property of the node allows you to enable/disable certain behaviors of the node. For more information about node constraints refer to the [`Node Constraints`](./constraints) ## Stack order diff --git a/ej2-javascript/diagram/ts/data-binding.md b/ej2-javascript/diagram/ts/data-binding.md index 80a4249e7..5a3c525e0 100644 --- a/ej2-javascript/diagram/ts/data-binding.md +++ b/ej2-javascript/diagram/ts/data-binding.md @@ -200,4 +200,4 @@ diagram.removeData(); ## See Also -* [How to arrange the diagram nodes and connectors using varies layout](./automatic-layout) +* [How to arrange the diagram nodes and connectors using various layout](./automatic-layout) diff --git a/ej2-javascript/diagram/ts/interaction.md b/ej2-javascript/diagram/ts/interaction.md index 50febc449..702280505 100644 --- a/ej2-javascript/diagram/ts/interaction.md +++ b/ej2-javascript/diagram/ts/interaction.md @@ -17,9 +17,7 @@ The selector visually represents selected elements, acting as a container to mod ## Selection -An element can be selected by clicking that element. During single click, all previously selected items are cleared. The following image shows how the selected elements are visually represented. - -![Single Selection](images/single-select.gif) +An element can be selected by clicking that element. During single click, all previously selected items are cleared. When selecting/unselecting the diagram elements, the [`selectionChange`](../api/diagram/iSelectionChangeEventArgs/) event and [`click`](../api/diagram/iclickeventargs/) gets triggered. These events enable you to customize the selected elements as needed. @@ -47,7 +45,6 @@ In rubber band selection, you can set the selection of items by region using the This can be configured with the [`rubberBandSelectionMode`](../api/diagram/rubberBandSelectionMode/). -![Multiple Selection](images/multiselect_Highlight.gif) ### Select/Unselect elements using API @@ -74,11 +71,11 @@ diagram.appendTo('#diagram'); //Select a specified collection of nodes and connectors in the diagram diagram.select([diagram.nodes[0]]); //Removes all elements from the selection list, clearing the current selection. -diargam.clearSelection(); +diagram.clearSelection(); ``` ### Get selected items -You can get the currently selected [`nodes`](../api/diagram/selectorModel/#connectors) and [`connectors`](../api/diagram/selectorModel/#nodes) using [`selectedItems`](../api/diagram/selectorModel/) property of the diargam. +You can get the currently selected [`nodes`](../api/diagram/selectorModel/#connectors) and [`connectors`](../api/diagram/selectorModel/#nodes) using [`selectedItems`](../api/diagram/selectorModel/) property of the diagram. ```ts @@ -127,7 +124,6 @@ You can also use the CTRL+A keys to select all nodes and connectors in the diagr You can drag an object by clicking and dragging it. When multiple elements are selected, dragging any one of them moves all selected elements together. As you drag elements within the diagram, the [`positionChange`](../api/diagram/idraggingeventargs/) event is triggered, providing opportunities to customize the dragged elements. -![Drag](images/drag.gif) ## Resize @@ -135,8 +131,6 @@ The selector in the diagram is designed with eight resizing handles, commonly re During the resizing process, the diagram triggers the [`sizeChange`](../api/diagram/isizechangeeventargs/) event, allowing customization based on the size of the element. -![Resize](images/resize.gif) - N> While dragging and resizing, the objects are snapped towards the nearest objects to make better alignments. ### Aspect ratio @@ -154,7 +148,7 @@ Maintaining aspect ratio in diagram means that when you resize a node, by draggi {% previewsample "page.domainurl/code-snippet/diagram/interaction-aspect" %} -### Customing resize-thumb size +### Customizing resize-thumb size You can change the size of the node resize thumb and the connector end point handle by using the [`handleSize`](../api/diagram/selectorModel/#handlesize) property. The following example shows the resize handle size customization. @@ -169,8 +163,6 @@ You can change the size of the node resize thumb and the connector end point han {% previewsample "page.domainurl/code-snippet/diagram/interaction-cs1" %} -![handleSize](images/handleSize.gif) - The appearance such as fill, stroke, and stroke width of the node resize thumb and connector end point handle can be customized by overriding the e-diagram-resize-handle and e-diagram-endpoint-handle classes respectively. ## Rotate @@ -178,7 +170,6 @@ The appearance such as fill, stroke, and stroke width of the node resize thumb a A rotation handler is positioned above the selector. Clicking and dragging this handler in a circular motion rotates the node. The node rotates around a fixed pivot point. A pivot thumb, located at the center of the node, appears during rotation to indicate the fixed point. Rotating a node triggers the [`rotateChange`](../api/diagram/iRotationEventArgs/) event. -![rotate](images/rotate.gif) ### Customize rotate handle position @@ -195,6 +186,8 @@ The position of the rotate handle can be adjusted by modifying the pivot point o {% previewsample "page.domainurl/code-snippet/diagram/interaction-pivot" %} +![Node interaction](./images/node-interactions.gif) + ## Connector editing Each segment of a selected connector is editable with some specific handles/thumbs. @@ -205,8 +198,6 @@ N> For connector editing, you have to inject the [`ConnectorEditing`](../api/dia Source and target points of selected connectors are represented by two handles. Clicking and dragging these handles allows you to adjust the source and target points. -![Drag End Point Handles](images/connector-end-point.gif) - Dragging the connector end points triggers the following events for customization: When the connector's source point is changed, the [`sourcePointChange`](../api/diagram/iEndChangeEventArgs/) event is triggered. @@ -217,32 +208,25 @@ Connecting a connector to port/node or disconnecting from them triggers the [`co The end point of each straight segment is represented by a thumb that allows you to edit the segment. You can insert any number of new segments into a straight line by clicking while holding the Shift and Ctrl keys (Ctrl+Shift+Click). -![Straight Segment Editing Addition](images/straight-segment-add.gif) Straight segments can be removed by clicking the segment end point while holding the Ctrl and Shift keys (Ctrl+Shift+Click). -![Straight Segment Editing Remove](images/straight-segment-remove.gif) - ### Orthogonal segment editing Orthogonal thumbs allow you to adjust the length of adjacent segments by clicking and dragging them. When necessary, segments are automatically added or removed during dragging to maintain proper orthogonal routing. When editing a segment, the [`segmentChange`](../api/diagram/iSegmentChangeEventArgs/) event is triggered. When new segments are added to the collection of connector segments, the [`segmentCollectionChange`](../api/diagram/iSegmentCollectionChangeEventArgs/) event is triggered. -![orthogonal Segment Edit](images/orthogonal-segment-edit.gif) - ### Bezier segment editing Bezier segment thumbs allow you to adjust the segments by clicking and dragging them. -![Bezier Segment Thumbs](images/bezierSegmentThumbControl.gif) - #### Bezier Control Points Bezier segments are annotated with two thumbs representing the control points. These control points can be adjusted by clicking and dragging the control thumbs. Dragging the control point changes the angle and distance of the points from the segment point, modifying the curve. -![Bezier Control Points](images/bezier-segement-thumb.gif) +![Connector interaction](./images/connector-interaction.gif) ## User handles @@ -256,7 +240,7 @@ The following events are triggered when interacting with a user handle: * [`onUserHandleMouseUp`](../api/diagram/#onuserhandlemouseup) - Triggered when the mouse is released on the user handle. * [`onUserHandleMouseLeave`](../api/diagram/#onuserhandlemouseleave) - Triggered when the mouse leaves the user handle region. -For more information, refer to the [`user handle events`](./user-handle.md/#user-handle-events). +For more information, refer to the [`user handle events`](./user-handle/#user-handle-events). ## Fixed user handle @@ -271,7 +255,7 @@ The following events are triggered when interacting with a fixed user handle: * [`onFixedUserHandleMouseLeave`](../api/diagram/#onfixeduserhandlemouseleave) - Triggered when the mouse leaves the fixed user handle region. * [`fixedUserHandleClick`](../api/diagram/fixedUserHandleClickEventArgs/) - Triggered when the fixed user handle is clicked. -For more information, refer to the [`fixed user handle events`](./user-handle.md/#fixed-user-handle-events). +For more information, refer to the [`fixed user handle events`](./user-handle/#fixed-user-handle-events). ## Determining Mouse Button Clicks @@ -308,7 +292,7 @@ When loading a large diagram, only a certain portion of the diagram is initially | Progress | When the mouse is in motion the status is notified as progress.| | Completed | When panning is stopped the status is notified with completed.| -![Zoom Pan](images/Zoom-pan.gif) +![Zoom Pan](./images/zoom-pan.gif) ## Keyboard @@ -372,8 +356,8 @@ N> Please note that the positionChange event is triggered for dragging nodes/con ## See Also -* [How to create diagram nodes using drawing tools](./tools#Shapes) -* [How to create diagram connectors using drawing tools](./tools#Connectors ) -* [How to disable the diagram interaction](./tools) +* [How to create diagram nodes using drawing tools](./tools#draw-nodes) +* [How to create diagram connectors using drawing tools](./tools#draw-connectors ) +* [How to disable the diagram interaction](./tools#tool-selection) * [How to control the diagram history](./undo-redo) * [How to create overview control to the diagram](./overview) diff --git a/ej2-javascript/diagram/ts/layout-customization.md b/ej2-javascript/diagram/ts/layout-customization.md index cb52977ba..8eb613678 100644 --- a/ej2-javascript/diagram/ts/layout-customization.md +++ b/ej2-javascript/diagram/ts/layout-customization.md @@ -164,7 +164,7 @@ Diagram allows to expand/collapse the subtrees of a layout. The node’s isExpan {% previewsample "page.domainurl/code-snippet/diagram/AutomaticLayout-cs15" %} -For more details about customizing the expand and collapse icon refer [`expand Collapse`](./expandAndCollapse.md) +For more details about customizing the expand and collapse icon refer [`expand Collapse`](./expandAndCollapse) ## Layout animation diff --git a/ej2-javascript/diagram/ts/nodes-interaction.md b/ej2-javascript/diagram/ts/nodes-interaction.md index d730c2b15..3ccd69f79 100644 --- a/ej2-javascript/diagram/ts/nodes-interaction.md +++ b/ej2-javascript/diagram/ts/nodes-interaction.md @@ -38,7 +38,7 @@ A node can be selected at runtime by using the [`select`](../api/diagram/#select |Method | Parameter | Description| |----|----|----| |[`unSelect`](../api/diagram/#unselect)| NodeModel/ConnectorModel | The object to remove from the selection.| -|[`clearSelection`](../api/diagram/#clearSelection)| - | Clears all the selection in the diargam.| +|[`clearSelection`](../api/diagram/#clearSelection)| - | Clears all the selection in the diagram.| ## Drag diff --git a/ej2-javascript/diagram/ts/nodes.md b/ej2-javascript/diagram/ts/nodes.md index b3b322d03..7dbbd8318 100644 --- a/ej2-javascript/diagram/ts/nodes.md +++ b/ej2-javascript/diagram/ts/nodes.md @@ -77,7 +77,7 @@ The following code illustrates how to add a nodes collection at runtime. ### Add node from palette -Nodes can be predefined and added to the palette, and can be dropped into the diagram when needed. For more information about adding nodes from symbol palette, refer to [`Symbol Palette`](./symbol-palette.md). +Nodes can be predefined and added to the palette, and can be dropped into the diagram when needed. For more information about adding nodes from symbol palette, refer to [`Symbol Palette`](./symbol-palette). {% tabs %} @@ -93,7 +93,7 @@ Nodes can be predefined and added to the palette, and can be dropped into the di ### Create node through data source -Nodes can be generated automatically with the information provided through dataSource property. The default properties for these nodes are fetched from default settings ([`getNodeDefaults`](../api/diagram/#getnodedefaults)). For more information about data source, refer to  [`DataBinding`](./data-binding.md). +Nodes can be generated automatically with the information provided through dataSource property. The default properties for these nodes are fetched from default settings ([`getNodeDefaults`](../api/diagram/#getnodedefaults)). For more information about data source, refer to  [`DataBinding`](./data-binding). {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -177,9 +177,9 @@ The following code example demonstrates how to convert a tree view element into ## See Also -* [How to add annotations to the node](./labels) +* [How to add annotations to the node](./node-labels.md) * [How to add ports to the node](./ports) -* [How to enable/disable the behavior of the node](./constraints) +* [How to enable/disable the behavior of the node](./constraints#node-constraints) * [How to add nodes to the symbol palette](./symbol-palette) * [How to edit the node visual interface](./interaction#selection) -* [How to create diagram nodes using drawing tools](./tools) +* [How to create diagram nodes using drawing tools](./tools#draw-nodes) diff --git a/ej2-javascript/diagram/ts/palette-customization.md b/ej2-javascript/diagram/ts/palette-customization.md index 2c594cce2..28fad87d5 100644 --- a/ej2-javascript/diagram/ts/palette-customization.md +++ b/ej2-javascript/diagram/ts/palette-customization.md @@ -38,7 +38,7 @@ The following example demonstrates how to customize the palette properties. ## Animation -The expand and collpase operation of symbol palette can be animated by utilizing the [`enableAnimation`](../api/diagram/symbolPaletteModel/#enableanimation) property of symbol palette. The following example demonstrates, how to enable and disable animation for symbol palette. +The expand and collapse operation of symbol palette can be animated by utilizing the [`enableAnimation`](../api/diagram/symbolPaletteModel/#enableanimation) property of symbol palette. The following example demonstrates, how to enable and disable animation for symbol palette. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -154,6 +154,7 @@ The [`symbolDragSize`](../api/diagram/symbolPaletteModel/#symboldragsize) proper {% previewsample "page.domainurl/code-snippet/diagram/symbol-palette-dragSize" %} +N> If the size of the symbol is not defined, the default size will be determined based on its shape. ## Expand Mode @@ -201,7 +202,7 @@ When hovering over symbols in the symbol palette, the default tooltip displays t Refer to the image below for an illustration of the tooltip behavior in the symbol palette. -![SymmbolPaletteTooltip](../diagram/images/SymbolPalatteTooltip.gif) +![SymmbolPaletteTooltip](./images/symbol-palatte-tooltip.gif) ### Custom tooltip for symbols @@ -239,11 +240,11 @@ The following code example demonstrates how to define different tooltips for the The following image illustrates the differentiation of tooltips displayed in the Symbol Palette and the Diagram. -![SymmbolPaletteCustomTooltip](../diagram/images/SymbolCustomTooltip.gif) +![SymmbolPaletteTooltip](./images/different-tooltip.gif) The following code snippet will demonstrate how to define two different tooltip for symbol in the symbol palette and dropped node in the diagram canvas. -## Lacalization +## Localization To localize the symbol palette search box, we need to define the [`locale`](../api/diagram/symbolPaletteModel/#locale) property of the symbol palette with our preferred culture. In the example below, we use **'de-DE**', which is the locale code for German as used in Germany. @@ -315,7 +316,7 @@ You can filter the search results based on your specific requirements. To achiev {% tabs %} {% highlight ts tabtitle="index.ts" %} -{% include code-snippet/diagram/symbol-palette-cs13/index.to %} +{% include code-snippet/diagram/symbol-palette-cs13/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/diagram/symbol-palette-cs13/index.html %} diff --git a/ej2-javascript/diagram/ts/serialization.md b/ej2-javascript/diagram/ts/serialization.md index 946f40a31..419e56d1f 100644 --- a/ej2-javascript/diagram/ts/serialization.md +++ b/ej2-javascript/diagram/ts/serialization.md @@ -38,7 +38,7 @@ savedData = localStorage.getItem('fileName'); ``` -The diagram can also be saved as raster or vector image files. For more information about saving the diagram as images, refer to the [`Print`](./print.md) and [`Export`](./export.md) section. +The diagram can also be saved as raster or vector image files. For more information about saving the diagram as images, refer to the [`Print`](./print) and [`Export`](./export) section. ## Load diff --git a/ej2-javascript/diagram/ts/tools.md b/ej2-javascript/diagram/ts/tools.md index fa827cf0c..ff0e9e4ba 100644 --- a/ej2-javascript/diagram/ts/tools.md +++ b/ej2-javascript/diagram/ts/tools.md @@ -53,7 +53,7 @@ The following code example illustrates how to draw a path shape. ### Text Nodes -Similarly, you can draw a text node by setting the type of shape as 'Text' in the [`drawingObject`](../api/diagram/#drawingobject) property. The [`text`](../api/diagram/textmodel/) type node contains a property called content, which specifies the text within the node. You can add thae content to the text node once you finish drawing the node. Here is how you can draw a text node at runtime: +Similarly, you can draw a text node by setting the type of shape as 'Text' in the [`drawingObject`](../api/diagram/#drawingobject) property. The [`text`](../api/diagram/textmodel/) type node contains a property called content, which specifies the text within the node. You can add the content to the text node once you finish drawing the node. Here is how you can draw a text node at runtime: {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -185,6 +185,8 @@ To activate panning mode set the [`tool`](../api/diagram#tool) property of the d {% previewsample "page.domainurl/code-snippet/diagram/Tools-cs7" %} +N> Please note that panning the diagram is not possible when 'multiplePage' is set to false if any diagram object (node or connector) is outside the defined page break area. + ## Events The [`elementDraw`](../api/diagram/iElementDrawEventArgs/) event is triggered whenever a node or connector is drawn using a drawing tool in the diagram. This event provides a way to capture and respond to actions when elements are created on the canvas. diff --git a/ej2-javascript/diagram/ts/virtualization.md b/ej2-javascript/diagram/ts/virtualization.md index f165d0271..2305742e5 100644 --- a/ej2-javascript/diagram/ts/virtualization.md +++ b/ej2-javascript/diagram/ts/virtualization.md @@ -20,7 +20,7 @@ Virtualization optimizes the diagram performance by loading only the diagramming This feature significantly enhances performance, especially when working with diagrams containing a large number of nodes and connectors. By reducing the number of objects that need to be processed at any given time, virtualization ensures smoother interactions, such as loading and dragging items within the diagram. -To enable virtualization in a diagram, you need to include the virtualization constraint in the diagram's constraints. For more information, refer to the [`diagram constraints`](./constraints.md/#diagram-constraints). +To enable virtualization in a diagram, you need to include the virtualization constraint in the diagram's constraints. For more information, refer to the [`diagram constraints`](./constraints/#diagram-constraints). The following code example demonstrates how to enable Virtualization mode in the diagram: diff --git a/ej2-javascript/diagram/user-handle.md b/ej2-javascript/diagram/user-handle.md index ae7d8c3ed..7cc9d964e 100644 --- a/ej2-javascript/diagram/user-handle.md +++ b/ej2-javascript/diagram/user-handle.md @@ -172,7 +172,7 @@ The diagram provides support to show a tooltip when the mouse hovers over any us {% previewsample "page.domainurl/code-snippet/diagram/userhandle-cs4" %} {% endif %} -You can also customize other properties of the tooltip, such as [`position`](../api/diagram/diagramTooltipModel/#position), [`width`](../api/diagram/diagramTooltipModel/#width), [`height`](../api/diagram/diagramTooltipModel/#height), etc. For more information refer to the [`tooltip`](./tool-tip.md) section. +You can also customize other properties of the tooltip, such as [`position`](../api/diagram/diagramTooltipModel/#position), [`width`](../api/diagram/diagramTooltipModel/#width), [`height`](../api/diagram/diagramTooltipModel/#height), etc. For more information refer to the [`tooltip`](./tool-tip) section. ## Appearance @@ -535,7 +535,7 @@ The diagram provides support to show a tooltip when the mouse hovers over any fi {% previewsample "page.domainurl/code-snippet/diagram/fixeduserhandle-cs3" %} {% endif %} -You can also customize other properties of the tooltip, such as [`position`](../api/diagram/diagramTooltipModel/#position), [`width`](../api/diagram/diagramTooltipModel/#width), [`height`](../api/diagram/diagramTooltipModel/#height), etc. For more information refer to the [`tooltip`](./tool-tip.md) section. +You can also customize other properties of the tooltip, such as [`position`](../api/diagram/diagramTooltipModel/#position), [`width`](../api/diagram/diagramTooltipModel/#width), [`height`](../api/diagram/diagramTooltipModel/#height), etc. For more information refer to the [`tooltip`](./tool-tip) section. ### Appearance diff --git a/ej2-javascript/document-editor/keyboard-shortcut.md b/ej2-javascript/document-editor/keyboard-shortcut.md index 32ac0c2e9..af8b22fc7 100644 --- a/ej2-javascript/document-editor/keyboard-shortcut.md +++ b/ej2-javascript/document-editor/keyboard-shortcut.md @@ -131,4 +131,4 @@ The following table lists the default keyboard shortcuts for formatting the para ## See Also -* [How to override the keyboard shortcuts](../document-editor/how-to/override-the-keyboard-shortcuts/) \ No newline at end of file +* [How to override the keyboard shortcuts](../document-editor/how-to/override-the-keyboard-shortcuts) \ No newline at end of file diff --git a/ej2-javascript/schedule/js/getting-started.md b/ej2-javascript/schedule/js/getting-started.md index 090ee8db3..cb66f8964 100644 --- a/ej2-javascript/schedule/js/getting-started.md +++ b/ej2-javascript/schedule/js/getting-started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting started with ##Platform_Name## Schedule control | Syncfusion -description: Checkout and learn about Getting started with ##Platform_Name## Schedule control of Syncfusion Essential JS 2 and more details. +title: Getting started with JavaScript Schedule Control | Syncfusion +description: Checkout and learn about Getting started with JavaScript Schedule Control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started publishingplatform: ##Platform_Name## @@ -9,7 +9,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## Schedule control +# Getting Started with JavaScript Schedule Control This section briefly explains how to create the [**JavaScript Scheduler**](https://www.syncfusion.com/javascript-ui-controls/js-scheduler) component and configure its available functionalities in a JavaScript application. diff --git a/ej2-javascript/tab/ts/getting-started.md b/ej2-javascript/tab/ts/getting-started.md index 2986ae3f8..3e371fdfa 100644 --- a/ej2-javascript/tab/ts/getting-started.md +++ b/ej2-javascript/tab/ts/getting-started.md @@ -79,7 +79,7 @@ The Tab CSS files are available in the `ej2-navigations` package folder. This ca ## Initialize the Tab using JSON items collection -The Tab can be rendered by defining a JSON array. The item is rendered with [`header`](../api/tab/tabItem/#header) text and [`content`](../api/tab/tabItem/#content) for each Tab using [`items`](../api/tab#items) property. +The Tab can be rendered by defining a JSON array. The item is rendered with [`header`](../api/tab/tabItem/#header) text and [`content`](../api/tab/tabItem/#content) for each Tab using [`items`](../api/tab/#items) property. * Add the HTML div tag with its id attribute as `element` in your `index.html` file to initialize the Tab. @@ -284,6 +284,6 @@ tab.appendTo('#tab_html_markup'); ## See Also -* [How to load tab with DataSource](./how-to/load-tab-with-data-source/) +* [How to load tab with DataSource](./how-to/load-tab-with-data-source) N> You can also explore our [JavaScript Tabs example](https://ej2.syncfusion.com/demos/#/material/tab/default.html) that shows you how to configure the Tabs in JavaScript. \ No newline at end of file diff --git a/ej2-javascript/uploader/async.md b/ej2-javascript/uploader/async.md index 7f30deaeb..ecb7ed40f 100644 --- a/ej2-javascript/uploader/async.md +++ b/ej2-javascript/uploader/async.md @@ -147,52 +147,23 @@ You can cancel the upload process by setting the upload event argument **eventar Here’s how to handle the server-side action for saving the file in server. ```c# -[AcceptVerbs("Post")] -public void Save() +public async Task Save(IFormFile UploadFiles) { - try + if (UploadFiles.Length > 0) { - if (HttpContext.Current.Request.Files.AllKeys.Length > 0) + if (!Directory.Exists(uploads)) // Create the directory if not exists { - var httpPostedFile = HttpContext.Current.Request.Files["UploadFiles"]; + Directory.CreateDirectory(uploads); + } - if (httpPostedFile != null) + var filePath = Path.Combine(uploads, UploadFiles.FileName); // Get the file path + using (var fileStream = new FileStream(filePath, FileMode.Create)) // Create the file { - var fileSave = HttpContext.Current.Server.MapPath("UploadedFiles"); - var fileSavePath = Path.Combine(fileSave, httpPostedFile.FileName); - if (!File.Exists(fileSavePath)) - { - httpPostedFile.SaveAs(fileSavePath); - HttpResponse Response = HttpContext.Current.Response; - Response.Clear(); - Response.ContentType = "application/json; charset=utf-8"; - Response.StatusDescription = "File uploaded succesfully"; - Response.End(); + await UploadFiles.CopyToAsync(fileStream); // Save the file } - else - { - HttpResponse Response = HttpContext.Current.Response; - Response.Clear(); - Response.Status = "400 File already exists"; - Response.StatusCode = 400; - Response.StatusDescription = "File already exists"; - Response.End(); } + return Ok(); } - } - } - catch (Exception e) - { - HttpResponse Response = System.Web.HttpContext.Current.Response; - Response.Clear(); - Response.ContentType = "application/json; charset=utf-8"; - Response.StatusCode = 400; - Response.Status = "400 No Content"; - Response.StatusDescription = e.Message; - Response.End(); - } -} - ``` ### Server-side configuration for saving and returning responses @@ -345,38 +316,17 @@ You can remove the files which is not uploaded locally by clicking the remove ic Here’s how to handle the server-side action for removing the file from server. ```c# -[AcceptVerbs("Post")] -public void Remove() +public void Remove(string UploadFiles) { - try + if (UploadFiles != null) { - var fileSave = ""; - if (HttpContext.Current.Request.Form["cancel-uploading"] != null) + var filePath = Path.Combine(uploads, UploadFiles); + if (System.IO.File.Exists(filePath)) { - fileSave = HttpContext.Current.Server.MapPath("UploadingFiles"); + System.IO.File.Delete(filePath); // Delete the file } - else - { - fileSave = HttpContext.Current.Server.MapPath("UploadedFiles"); } - var fileName = HttpContext.Current.Request.Files["UploadFiles"].FileName; - var fileSavePath = Path.Combine(fileSave, fileName); - if (File.Exists(fileSavePath)) - { - File.Delete(fileSavePath); } - } - catch (Exception e) - { - HttpResponse Response = HttpContext.Current.Response; - Response.Clear(); - Response.Status = "404 File not found"; - Response.StatusCode = 404; - Response.StatusDescription = "File not found"; - Response.End(); - } -} - ``` ## Auto Upload diff --git a/ej2-javascript/uploader/chunk-upload.md b/ej2-javascript/uploader/chunk-upload.md index c44697778..4a1306c02 100644 --- a/ej2-javascript/uploader/chunk-upload.md +++ b/ej2-javascript/uploader/chunk-upload.md @@ -192,129 +192,46 @@ The following example explains about chunk upload with cancel support. The server-side implementation entirely depends on the application requirements and logic. The following code snippet provides the server-side logic to handle the chunk upload using the uploader components. ```c# -// Server configuration for upload a file. -public void Save() +public async Task Save(IFormFile UploadFiles) // Save the uploaded file { - try + if (UploadFiles.Length > 0) { - if (HttpContext.Current.Request.Files.AllKeys.Length > 0) + if (!Directory.Exists(uploads)) //Create directory if not exists { - var httpPostedChunkFile = HttpContext.Current.Request.Files["chunkFile"]; - if (httpPostedChunkFile != null) - { - var saveFile = HttpContext.Current.Server.MapPath("UploadingFiles"); - // Save the chunk file in temporery location with .part extension - var SaveFilePath = Path.Combine(saveFile, httpPostedChunkFile.FileName + ".part"); - var chunkIndex = HttpContext.Current.Request.Form["chunkIndex"]; - if (chunkIndex == "0") - { - httpPostedChunkFile.SaveAs(SaveFilePath); + Directory.CreateDirectory(uploads); } - else - { - // Merge the current chunk file with previous uploaded chunk files - MergeChunkFile(SaveFilePath, httpPostedChunkFile.InputStream); - var totalChunk = HttpContext.Current.Request.Form["totalChunk"]; - if (Convert.ToInt32(chunkIndex) == (Convert.ToInt32(totalChunk) - 1)) - { - var savedFile = HttpContext.Current.Server.MapPath("UploadedFiles"); - var originalFilePath = Path.Combine(savedFile, httpPostedChunkFile.FileName); - // After all the chunk files completely uploaded, remove the .part extension and move this file into save location - System.IO.File.Move(SaveFilePath, originalFilePath); - } - } - HttpResponse ChunkResponse = HttpContext.Current.Response; - ChunkResponse.Clear(); - ChunkResponse.ContentType = "application/json; charset=utf-8"; - ChunkResponse.StatusDescription = "File uploaded succesfully"; - ChunkResponse.End(); - } - var httpPostedFile = HttpContext.Current.Request.Files["UploadFiles"]; - if (httpPostedFile != null) + if (UploadFiles.ContentType == "application/octet-stream") //Handle chunk upload { - var fileSave = HttpContext.Current.Server.MapPath("UploadedFiles"); - var fileSavePath = Path.Combine(fileSave, httpPostedFile.FileName); - if (!File.Exists(fileSavePath)) + var filePath = Path.Combine(uploads, UploadFiles.FileName); + using (var fileStream = new FileStream(filePath, FileMode.Append)) { - httpPostedFile.SaveAs(fileSavePath); - HttpResponse Response = HttpContext.Current.Response; - Response.Clear(); - Response.ContentType = "application/json; charset=utf-8"; - Response.StatusDescription = "File uploaded succesfully"; - Response.End(); + await UploadFiles.CopyToAsync(fileStream); } - else - { - HttpResponse Response = HttpContext.Current.Response; - Response.Clear(); - Response.Status = "400 File already exists"; - Response.StatusCode = 400; - Response.StatusDescription = "File already exists"; - Response.End(); } - } - } - } - catch (Exception e) + else //Handle normal upload { - HttpResponse Response = HttpContext.Current.Response; - Response.Clear(); - Response.ContentType = "application/json; charset=utf-8"; - Response.StatusCode = 400; - Response.Status = "400 No Content"; - Response.StatusDescription = e.Message; - Response.End(); - } -} -// Server configuration for remove a uploaded file -public void Remove() + var filePath = Path.Combine(uploads, UploadFiles.FileName); + using (var fileStream = new FileStream(filePath, FileMode.Create)) { - try - { - var fileSave = ""; - if (HttpContext.Current.Request.Form["cancelUploading"] != null) - { - fileSave = HttpContext.Current.Server.MapPath("UploadingFiles"); - } else - { - fileSave = HttpContext.Current.Server.MapPath("UploadedFiles"); + await UploadFiles.CopyToAsync(fileStream); } - var fileName = HttpContext.Current.Request.Files["UploadFiles"].FileName; - var fileSavePath = Path.Combine(fileSave, fileName); - if (File.Exists(fileSavePath)) - { - File.Delete(fileSavePath); } } - catch (Exception e) - { - HttpResponse Response = HttpContext.Current.Response; - Response.Clear(); - Response.Status = "404 File not found"; - Response.StatusCode = 404; - Response.StatusDescription = "File not found"; - Response.End(); + return Ok(); } -} -// Merge the current chunk file with previous uploaded chunk files -public void MergeChunkFile(string fullPath, Stream chunkContent) +public void Remove(string UploadFiles) // Delete the uploaded file { - try + if (UploadFiles != null) { - using (FileStream stream = new FileStream(fullPath, FileMode.Append, FileAccess.Write, FileShare.ReadWrite)) + var filePath = Path.Combine(uploads, UploadFiles); + if (System.IO.File.Exists(filePath)) { - using (chunkContent) - { - chunkContent.CopyTo(stream); + //Delete the file from server + System.IO.File.Delete(filePath); } } } - catch (IOException ex) - { - throw ex; - } -} ``` > You can also explore [JavaScript File Upload](https://www.syncfusion.com/javascript-ui-controls/js-file-upload) feature tour page for its groundbreaking features. You can also explore our [JavaScript File Upload example](https://ej2.syncfusion.com/demos/#/material/uploader/default.html) to understand how to browse the files which you want to upload to the server.