diff --git a/ej2-javascript/diagram/bpmn-activities.md b/ej2-javascript/diagram/bpmn-activities.md index 7cbf1e505..09fc570b9 100644 --- a/ej2-javascript/diagram/bpmn-activities.md +++ b/ej2-javascript/diagram/bpmn-activities.md @@ -342,7 +342,7 @@ A subprocess is defined as an event subprocess, when it is triggered by an event ##### Transaction subprocess -* [`transaction`](../api/diagram/bpmnSubProcess#transaction-bpmntransactionsubprocessmodel) is a set of activities that logically belong together, in which all contained activities must complete their parts of the transaction; otherwise the process is undone. The execution result of a transaction is one of Successful Completion, Unsuccessful Completion (Cancel), and Hazard (Exception). The [`events`](../api/diagram/bpmnSubProcess#event-bpmnsubeventmodel) property of subprocess allows to represent these results as an event attached to the subprocess. +* [`transaction`](../api/diagram/bpmnSubProcess/#transaction) is a set of activities that logically belong together, in which all contained activities must complete their parts of the transaction; otherwise the process is undone. The execution result of a transaction is one of Successful Completion, Unsuccessful Completion (Cancel), and Hazard (Exception). The [`events`](../api/diagram/bpmnSubProcess/#events) property of subprocess allows to represent these results as an event attached to the subprocess. * The event object allows you to define the type of event by which the subprocess will be triggered. The name of the event can be defined to identify the event at runtime. diff --git a/ej2-javascript/diagram/bpmn-dataObject.md b/ej2-javascript/diagram/bpmn-dataObject.md index a12df8d00..446d56ed1 100644 --- a/ej2-javascript/diagram/bpmn-dataObject.md +++ b/ej2-javascript/diagram/bpmn-dataObject.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## ## Data Object -A data object represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [`data object`](../api/diagram/bpmnDataObject), set the shape as **DataObject** and the [`type`](../api/diagram/bpmnDataObjects/) property defines whether data is an input or an output. You can create multiple instances of data object with the collection property of data. +A data object represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a [`data object`](../api/diagram/bpmnDataObject), set the shape as **DataObject** and the [`type`](../api/diagram/bpmnDataObject/#type) property defines whether data is an input or an output. You can create multiple instances of data object with the collection property of data. {% if page.publishingplatform == "typescript" %} diff --git a/ej2-javascript/diagram/bpmn-events.md b/ej2-javascript/diagram/bpmn-events.md index 1d3785f96..11fae8c56 100644 --- a/ej2-javascript/diagram/bpmn-events.md +++ b/ej2-javascript/diagram/bpmn-events.md @@ -52,7 +52,7 @@ The [`event`](../api/diagram/bpmnEvent#event-bpmnevents) property of the node al ## BPMN event trigger -Event triggers are notated as icons inside the circle and they represent the specific details of the process. The [`trigger`](../api/diagram/bpmnEvent#trigger-bpmntriggers) property of the node allows you to set the type of trigger and by default, it is set as **none**. The following table illustrates the type of event triggers. +Event triggers are notated as icons inside the circle and they represent the specific details of the process. The [`trigger`](../api/diagram/bpmnEvent/#trigger ) property of the node allows you to set the type of trigger and by default, it is set as **none**. The following table illustrates the type of event triggers. | Triggers | Start | Non-Interrupting Start | Intermediate | Non-Interrupting Intermediate | Throwing Intermediate | End | | -------- | -------- | -------- | -------- | -------- | -------- | -------- | diff --git a/ej2-javascript/diagram/context-menu.md b/ej2-javascript/diagram/context-menu.md index 7ee84ff8a..bcb09f577 100644 --- a/ej2-javascript/diagram/context-menu.md +++ b/ej2-javascript/diagram/context-menu.md @@ -51,7 +51,7 @@ Diagram provides some default context menu items to ease the execution of some f Context menus can be customized for individual nodes by defining specific menu items beyond the default options. To add additional context menu items, you need to define and incorporate them into the [`items`](../api/diagram/contextMenuItemModel/) property of the context menu. -Each custom item can be defined with specific text and ID using the [`text`](../api/diagram/contextMenuItemModel/#text) and [`ID`](../api/diagram/contextMenuItemModel/#id) properties, respectively. Additionally, you can enhance visual cues by associating icons through the [`iconCss`](../api/diagram/contextMenuItemModel/#iconcss) for enabling the use of font icons. The [`target`](../api/diagram/contextMenuItemModel/#target) property specifies where each menu item should appear, and separators can be included using the [`separator`](..api/diagram/contextMenuItemModel/#separator) property to visually group menu items. This flexibility allows for a tailored user interface that meets specific application needs efficiently. Nested menu items are defined within the [`items`](../api/diagram/contextMenuItemModel/#items) property of a parent menu item. +Each custom item can be defined with specific text and ID using the [`text`](../api/diagram/contextMenuItemModel/#text) and [`ID`](../api/diagram/contextMenuItemModel/#id) properties, respectively. Additionally, you can enhance visual cues by associating icons through the [`iconCss`](../api/diagram/contextMenuItemModel/#iconcss) for enabling the use of font icons. The [`target`](../api/diagram/contextMenuItemModel/#target) property specifies where each menu item should appear, and separators can be included using the [`separator`](../api/diagram/contextMenuItemModel/#separator) property to visually group menu items. This flexibility allows for a tailored user interface that meets specific application needs efficiently. Nested menu items are defined within the [`items`](../api/diagram/contextMenuItemModel/#items) property of a parent menu item. ### To Display custom menu alone @@ -256,7 +256,7 @@ In the following example, menu items are rendered with shortcut key codes for sp |Event|Description| |----|----| |[`contextMenuBeforeItemRender`](../api/diagram/#contextmenubeforeitemrender)|Triggers while initializing each menu item.| -|[`contextMenuOpen`](../api/diagram/diagramBeforeMenuOpenEventArgs/)|Triggers upon right-click before opening the context menu.| +|[`contextMenuOpen`](../api/diagram/#contextmenuopen)|Triggers upon right-click before opening the context menu.| |[`contextMenuClick`](../api/diagram/#contextmenuclick)|Triggers when a menu item is clicked.| The following example shows how to get these events. diff --git a/ej2-javascript/diagram/events.md b/ej2-javascript/diagram/events.md index 75fd6a808..d4c005d1c 100644 --- a/ej2-javascript/diagram/events.md +++ b/ej2-javascript/diagram/events.md @@ -18,7 +18,7 @@ Events in diagrams are triggered during interactions with diagram elements, allo The [`load`](../api/diagram/iLoadEventArgs/) event triggers before the diagram load. ## Loaded Event -The [`loaded`](../api/diagram/#loaded) event triggers when all diagram elements are loaded using [`loadDiagram`](../api/diagram#loadDiagram) method. You can use this event to customize diagram elements during the loading process. +The [`loaded`](../api/diagram/#loaded) event triggers when all diagram elements are loaded using [`loadDiagram`](../api/diagram/#loaddiagram) method. You can use this event to customize diagram elements during the loading process. ```javascript var diagram = new ej.diagrams.Diagram({ diff --git a/ej2-javascript/diagram/grid-lines.md b/ej2-javascript/diagram/grid-lines.md index b48581c33..2278b0465 100644 --- a/ej2-javascript/diagram/grid-lines.md +++ b/ej2-javascript/diagram/grid-lines.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## Gridlines are crisscross lines drawn in diagram page like the lines on traditional graph paper. It helps to position the diagram elements on the diagram page. -The [`snapSettings`](../api/diagram#snapsettings-SnapSettingsModel) property is used to customize the gridlines and control the snapping behavior in the diagram. +The [`snapSettings`](../api/diagram/#snapsettings) property is used to customize the gridlines and control the snapping behavior in the diagram. ## Customize the gridlines visibility @@ -55,7 +55,7 @@ To show only horizontal/vertical gridlines or to hide gridlines, refer to [`Cons The appearance of the gridlines can be customized by using a set of predefined properties. -* The [`horizontalGridLines`](../api/diagram/snapSettings#horizontalgridlines-GridlinesModel) and the [`verticalGridLines`](../api/diagram/snapSettings#verticalgridlines-GridlinesModel) properties allow you to customize the appearance of the horizontal and vertical gridlines respectively. +* The [`horizontalGridLines`](../api/diagram/snapSettings/#horizontalgridlines) and the [`verticalGridLines`](../api/diagram/snapSettings/#verticalgridlines) properties allow you to customize the appearance of the horizontal and vertical gridlines respectively. * The horizontal gridlines [`lineColor`](../api/diagram/gridlines#linecolor-string) and [`lineDashArray`](../api/diagram/gridlines#linedasharray-string) properties are used to customizes the line color and line style of the horizontal gridlines. @@ -312,7 +312,7 @@ The following code example demonstrates how to set the `snapLineColor` property ## Customization of snap intervals -By default, the objects are snapped towards the nearest gridline. The gridline or position towards where the diagram object snaps can be customized with the horizontal gridlines’s [`snapInterval`](../api/diagram/gridlines#snapintervals-number) and the vertical gridlines’s [`snapInterval`](../api/diagram/gridlines#snapintervals-number) properties. +By default, the objects are snapped towards the nearest gridline. The gridline or position towards where the diagram object snaps can be customized with the horizontal gridlines’s [`snapInterval`](../api/diagram/gridlines/#snapintervals) and the vertical gridlines’s [`snapInterval`](../api/diagram/gridlines/#snapintervals) properties. {% if page.publishingplatform == "typescript" %} diff --git a/ej2-javascript/diagram/group.md b/ej2-javascript/diagram/group.md index c39d6e0d2..c4f9a8e48 100644 --- a/ej2-javascript/diagram/group.md +++ b/ej2-javascript/diagram/group.md @@ -18,7 +18,7 @@ Group is used to cluster multiple nodes and connectors into a single element. It ## Add group when initializing diagram -A group can be added to the diagram model through [`nodes`](../api/diagram#nodes-NodeModel) collection. To define an object as group, add the child objects to the [`children`](../api/diagram/node#children-string) collection of the group. The following code illustrates how to create a group node. +A group can be added to the diagram model through [`nodes`](../api/diagram/#nodes) collection. To define an object as group, add the child objects to the [`children`](../api/diagram/node/#children) collection of the group. The following code illustrates how to create a group node. * While creating group, its child node need to be declared before the group declaration. @@ -85,7 +85,7 @@ The following code illustrates how a group at runtime. ## UnGroup nodes at runtime -Group node can be unGrouped dynamically, by using the [`diagram.unGroup`](../api/diagram/#unGroup) method. The following code example shows how to unGroup group node at runtime. +Group node can be unGrouped dynamically, by using the [`diagram.unGroup`](../api/diagram/#ungroup) method. The following code example shows how to unGroup group node at runtime. {% if page.publishingplatform == "typescript" %} @@ -198,7 +198,7 @@ diagram.addChildToGroup(groupNode, childNode); ### Remove children from group at runtime -A specific child from a group node can be removed at runtime by utilizing the diagram method [`removeChildFromGroup`](../api/diagram/#removeChildFromGroup). +A specific child from a group node can be removed at runtime by utilizing the diagram method [`removeChildFromGroup`](../api/diagram/#removechildfromgroup). This functionality is achieved by passing the group and its children as arguments to the method. @@ -417,7 +417,7 @@ The following code illustrates how to add canvas panel. * Stack panel is used to arrange its children in a single line or stack order, either vertically or horizontally. -* It controls spacing by setting margin properties of child and padding properties of group. By default, a stack panel’s [`orientation`](../api/diagram/stackPanel#orientation-Orientation) is vertical. +* It controls spacing by setting margin properties of child and padding properties of group. By default, a stack panel’s [`orientation`](../api/diagram/stackPanel/#orientation) is vertical. The following code illustrates how to add a stack panel. diff --git a/ej2-javascript/diagram/js/commands.md b/ej2-javascript/diagram/js/commands.md index 9ea2d18c5..0e4ad3ee7 100644 --- a/ej2-javascript/diagram/js/commands.md +++ b/ej2-javascript/diagram/js/commands.md @@ -397,7 +397,7 @@ The following code illustrates how to execute the bringToCenter command. ## FitToPage -The [`fitToPage`](../api/diagram/#fittopage) command adjusts the diagram content to fit within the viewport, considering either width, height, or the entire content. The fitToPage method takes one parameter, [`fitOptions`](api/diagram/iFitOptions/), which specifies the options for fitting the diagram to the page. +The [`fitToPage`](../api/diagram/#fittopage) command adjusts the diagram content to fit within the viewport, considering either width, height, or the entire content. The fitToPage method takes one parameter, [`fitOptions`](../api/diagram/#fittopage), which specifies the options for fitting the diagram to the page. ### FitOptions diff --git a/ej2-javascript/diagram/js/complex-layout.md b/ej2-javascript/diagram/js/complex-layout.md index c6737ac1d..aacac4551 100644 --- a/ej2-javascript/diagram/js/complex-layout.md +++ b/ej2-javascript/diagram/js/complex-layout.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Complex hierarchical tree layout in ##Platform_Name## Diagram control -Complex hierarchical tree layout arranges nodes in a tree-like structure, where the child node can have more than one parent. This layout is an extended version of the hierarchical tree layout. To create a complex hierarchical tree, the [`type`](../api/diagram/layout) property of layout should be set as `ComplexHierarchicalTree`. +Complex hierarchical tree layout arranges nodes in a tree-like structure, where the child node can have more than one parent. This layout is an extended version of the hierarchical tree layout. To create a complex hierarchical tree, the [`type`](../api/diagram/layout/#type) property of layout should be set as `ComplexHierarchicalTree`. ## Complex hierarchical tree layout with nodes and connectors @@ -50,7 +50,7 @@ N> In Diagram Layouts, all root nodes will always render at the same level. This ## Line Distribution -Line distribution is used to arrange the connectors without overlapping in automatic layout. In some cases, the automatic layout connectors connecting to the nodes will be overlapped with one another. So user can decide whether the segment of each connector from a single parent node should be same point or different point. The [`connectionPointOrigin`](../api/diagram/layout) property of layout is used to enable or disable the line distribution in layout. By default ConnectionPointOrigin will be `SamePoint`. +Line distribution is used to arrange the connectors without overlapping in automatic layout. In some cases, the automatic layout connectors connecting to the nodes will be overlapped with one another. So user can decide whether the segment of each connector from a single parent node should be same point or different point. The [`connectionPointOrigin`](../api/diagram/layout/#connectionpointorigin) property of layout is used to enable or disable the line distribution in layout. By default ConnectionPointOrigin will be `SamePoint`. The following code example illustrates how to create a complex hierarchical tree with line distribution. diff --git a/ej2-javascript/diagram/js/connector-bezier.md b/ej2-javascript/diagram/js/connector-bezier.md index dd556e939..b03b6694c 100644 --- a/ej2-javascript/diagram/js/connector-bezier.md +++ b/ej2-javascript/diagram/js/connector-bezier.md @@ -38,7 +38,7 @@ To create a bezier segment, the [`segment.type`](../api/diagram/segments) is set * Bezier control points can be positioned in two ways. * When setting control point positions using the The [`point1`](../api/diagram/bezierSegment#point1-PointModel) and [`point2`](../api/diagram/bezierSegment#point2-PointModel) properties, the control point remains fixed in its set position while dragging connector end points. -* When setting control point positions using the [`vector1`](../api/diagram/bezierSegment#vector1-VectorModel) and [`vector2`](../api/diagram/bezierSegment#vector2-VectorModel) properties, the control point dynamically adjusts to maintain the angle and distance originally set while moving the connector end points. +* When setting control point positions using the [`vector1`](../api/diagram/bezierSegment/#vector1) and [`vector2`](/api/diagram/bezierSegment/#vector2) properties, the control point dynamically adjusts to maintain the angle and distance originally set while moving the connector end points. #### Point @@ -59,7 +59,7 @@ The [`point1`](../api/diagram/bezierSegment#point1-PointModel) and [`point2`](.. #### Vector -The [`vector1`](../api/diagram/bezierSegment#vector1-VectorModel) and [`vector2`](../api/diagram/bezierSegment#vector2-VectorModel) properties of bezier segment enable you to define the vectors. The following code illustrates how to configure a bezier curve with vectors. +The [`vector1`](../api/diagram/bezierSegment/#vector1) and [`vector2`](../api/diagram/bezierSegment/#vector2) properties of bezier segment enable you to define the vectors. The following code illustrates how to configure a bezier curve with vectors. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -118,9 +118,9 @@ This feature allows users to choose whether to reset the control points of bezie ### How to customize Bezier Segment Thumb Size -Bezier segment thumbs default to size 10. This can be adjusted globally or for individual connectors using the [`segmentThumbSize`](../api/diagram#segmentThumbSize-SegmentThumbSize) property. -To change the thumb size for all Bezier connectors, set the [`segmentThumbSize`](../api/diagram#segmentThumbSize-SegmentThumbSize) property in the diagram’s model. -To customize the thumb size for a specific connector, disable the [`InheritSegmentThumbSize`](../api/diagram/connectorConstraints) constraint, then set the desired [`segmentThumbSize`](../api/diagram#segmentThumbSize-SegmentThumbSize). +Bezier segment thumbs default to size 10. This can be adjusted globally or for individual connectors using the [`segmentThumbSize`](../api/diagram/#segmentthumbsize) property. +To change the thumb size for all Bezier connectors, set the [`segmentThumbSize`](../api/diagram/#segmentthumbsize) property in the diagram’s model. +To customize the thumb size for a specific connector, disable the [`InheritSegmentThumbSize`](../api/diagram/connectorConstraints) constraint, then set the desired [`segmentThumbSize`](../api/diagram/#segmentthumbsize). {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/ej2-javascript/diagram/js/connector-customization.md b/ej2-javascript/diagram/js/connector-customization.md index 43bf6e6b4..90643abc1 100644 --- a/ej2-javascript/diagram/js/connector-customization.md +++ b/ej2-javascript/diagram/js/connector-customization.md @@ -15,7 +15,7 @@ Diagram allows you to customize the connector appearances. The following topics ## Decorator -* Starting and ending points of a connector can be decorated with some customizable shapes like arrows, circles, diamond, or path. The connection end points can be decorated with the [`sourceDecorator`](../api/diagram/connector#sourcedecorator-DecoratorModel) and [`targetDecorator`](../api/diagram/connector#targetdecorator-DecoratorModel) properties of the connector. +* Starting and ending points of a connector can be decorated with some customizable shapes like arrows, circles, diamond, or path. The connection end points can be decorated with the [`sourceDecorator`](../api/diagram/connector/#sourcedecorator) and [`targetDecorator`](../api/diagram/connector/#targetdecorator) properties of the connector. * The [`shape`](../api/diagram/decoratorShapes) property of `sourceDecorator` allows to define the shape of the decorators. Similarly, the [shape](../api/diagram/decoratorShapes) property of `targetDecorator` allows to define the shape of the decorators. @@ -36,9 +36,9 @@ Diagram allows you to customize the connector appearances. The following topics ### Customize the decorator appearance -* The source decorator’s [`strokeColor`](../api/diagram/strokeStyle#strokecolor-string), [`strokeWidth`](../api/diagram/strokeStyle#strokewidth-number), and [`strokeDashArray`](../api/diagram/strokeStyle#strokedasharray-string) properties are used to customize the color, width, and appearance of the decorator. +* The source decorator’s [`strokeColor`](../api/diagram/strokeStyle#strokecolor-string), [`strokeWidth`](../api/diagram/strokeStyle/#strokewidth), and [`strokeDashArray`](../api/diagram/strokeStyle/#strokedasharray) properties are used to customize the color, width, and appearance of the decorator. -* To set the border stroke color, stroke width, and stroke dash array for the target decorator, use [`strokeColor`](../api/diagram/strokeStyle#strokecolor-string), [`strokeWidth`](../api/diagram/strokeStyle#strokewidth-number), and [`strokeDashArray`](../api/diagram/strokeStyle#strokedasharray-string). +* To set the border stroke color, stroke width, and stroke dash array for the target decorator, use [`strokeColor`](../api/diagram/strokeStyle#strokecolor-string), [`strokeWidth`](../api/diagram/strokeStyle/#strokewidth), and [`strokeDashArray`](../api/diagram/strokeStyle/#strokedasharray). * To set the size for source and target decorator, use width and height property. @@ -97,7 +97,7 @@ Padding is used to leave the space between the Connector's end point and the obj ## Bridging -Line bridging creates a bridge for lines to smartly cross over the other lines, at points of intersection. By default, [`bridgeDirection`](../api/diagram#bridgeDirection-BridgeDirection) is set to top. Depending upon the direction given bridging direction appears. +Line bridging creates a bridge for lines to smartly cross over the other lines, at points of intersection. By default, [`bridgeDirection`](../api/diagram/#bridgedirection) is set to top. Depending upon the direction given bridging direction appears. Bridging can be enabled/disabled either with the `connector.constraints` or `diagram.constraints`. The following code example illustrates how to enable line bridging. {% tabs %} @@ -112,7 +112,7 @@ Bridging can be enabled/disabled either with the `connector.constraints` or `dia {% previewsample "page.domainurl/code-snippet/diagram/connectors-cs21" %} N> You need to inject connector bridging module into the diagram. -The [`bridgeSpace`](../api/diagram/connector#bridgespace-number) property of connectors can be used to define the width for line bridging. +The [`bridgeSpace`](../api/diagram/connector/#bridgespace) property of connectors can be used to define the width for line bridging. Limitation: Bezier segments do not support bridging. @@ -135,7 +135,7 @@ Limitation: Bezier segments do not support bridging. ## Corner radius -Corner radius allows to create connectors with rounded corners. The radius of the rounded corner is set with the [`cornerRadius`](../api/diagram/connector#cornerradius-number) property. +Corner radius allows to create connectors with rounded corners. The radius of the rounded corner is set with the [`cornerRadius`](../api/diagram/connector/#cornerradius) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -150,9 +150,9 @@ Corner radius allows to create connectors with rounded corners. The radius of th ## Connector Appearance -* The connector’s [`strokeWidth`](../api/diagram/strokeStyle#strokewidth-number), [`strokeColor`](../api/diagram/strokeStyle#strokecolor-string), [`strokeDashArray`](../api/diagram/strokeStyle#strokedasharray-string), and [`opacity`](../api/diagram/strokeStyle#opacity-number) properties are used to customize the appearance of the connector segments. +* The connector’s [`strokeWidth`](../api/diagram/strokeStyle/#strokewidth), [`strokeColor`](../api/diagram/strokeStyle/#strokecolor), [`strokeDashArray`](../api/diagram/strokeStyle/#strokedasharray), and [`opacity`](../api/diagram/strokeStyle#opacity-number) properties are used to customize the appearance of the connector segments. -* The [`visible`](../api/diagram/connector#visible-boolean) property of the connector enables or disables the visibility of connector. +* The [`visible`](../api/diagram/connector/#visible) property of the connector enables or disables the visibility of connector. * Default values for all the `connectors` can be set using the `getConnectorDefaults` properties. For example, if all connectors have the same type or having the same property then such properties can be moved into `getConnectorDefaults`. @@ -173,7 +173,7 @@ The following code example illustrates how to customize the segment appearance. ## Connector constraints -* The [`constraints`](../api/diagram/connector#constraints-ConnectorConstraints) property of connector allows to enable/disable certain features of connectors. +* The [`constraints`](../api/diagram/connectorConstraints) property of connector allows to enable/disable certain features of connectors. * To enable or disable the constraints, refer [`constraints`](../api/diagram/connectorConstraints). @@ -209,7 +209,7 @@ var connectors = { ## ZIndex for connector -The connectors [`zIndex`](../api/diagram/connector#zindex-number) property specifies the stack order of the connector. A connector with greater stack order is always in front of a connector with a lower stack order. +The connectors [`zIndex`](../api/diagram/connector/#zindex) property specifies the stack order of the connector. A connector with greater stack order is always in front of a connector with a lower stack order. The following code illustrates how to render connector based on the stack order. @@ -226,7 +226,7 @@ The following code illustrates how to render connector based on the stack order. ## Connector spacing -* The [`connectorSpacing`](../api/diagram/connector#connectorSpacing-number) property allows you to define the distance between the source node and the connector. It is the minimum distance the connector will re-rout or the new segment will create. +* The [`connectorSpacing`](../api/diagram/connector/#connectorspacing) property allows you to define the distance between the source node and the connector. It is the minimum distance the connector will re-rout or the new segment will create. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -241,7 +241,7 @@ The following code illustrates how to render connector based on the stack order. ## MaxSegment thumb -The property [`maxSegmentThumb`](../api/diagram/connector#maxSegmentThumb) is used to limit the number of segment thumb in the connector. +The property [`maxSegmentThumb`](../api/diagram/connector/#maxsegmentthumb) is used to limit the number of segment thumb in the connector. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -273,7 +273,7 @@ The [`resetSegments`](../api/diagram/#resetsegments) method resets the segments ## Enable Connector Splitting -The connectors are used to create a link between two points, ports, or nodes to represent the relationship between them. Split the connector between two nodes when dropping a new node onto an existing connector and create a connection between the new node and existing nodes by setting the [`enableConnectorSplit`](../api/diagram/enableConnectorSplit) as true. The default value of the [`enableConnectorSplit`](../api/diagram/enableConnectorSplit) is false +The connectors are used to create a link between two points, ports, or nodes to represent the relationship between them. Split the connector between two nodes when dropping a new node onto an existing connector and create a connection between the new node and existing nodes by setting the [`enableConnectorSplit`](../api/diagram/#enableconnectorsplit) as true. The default value of the [`enableConnectorSplit`](../api/diagram/#enableconnectorsplit) is false The following code illustrates how to split the connector and create a connection with new node. @@ -292,7 +292,7 @@ The following code illustrates how to split the connector and create a connectio ### Preserve connector style while connector splitting -When splitting a connector using [`enableConnectorSplit`](../api/diagram/enableConnectorSplit), the new connector created will be a normal connector without any specific styles. To ensure the new connector has the same style as the original connector, you can use the collectionChange event to apply the styles. +When splitting a connector using [`enableConnectorSplit`](../api/diagram/#enableconnectorsplit), the new connector created will be a normal connector without any specific styles. To ensure the new connector has the same style as the original connector, you can use the collectionChange event to apply the styles. The following example demonstrates how to apply the same style of the original connector to the newly added connector: diff --git a/ej2-javascript/diagram/js/connector-labels.md b/ej2-javascript/diagram/js/connector-labels.md index c9f294975..0bf845983 100644 --- a/ej2-javascript/diagram/js/connector-labels.md +++ b/ej2-javascript/diagram/js/connector-labels.md @@ -44,7 +44,7 @@ The following image shows the position of the annotation with respect to differe ## Annotation alignment -The connector’s annotation can be aligned over its segment path using the [`alignment`](../api/diagram/annotationalignment/) property of annotation. +The connector’s annotation can be aligned over its segment path using the [`alignment`](../api/diagram/pathAnnotationModel/#alignment) property of annotation. The following code example illustrates how to align connector annotations. @@ -61,7 +61,7 @@ The following code example illustrates how to align connector annotations. ## Displacement of 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. +[`Displacement`](../api/diagram/pathAnnotationModel/#displacement) 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" %} diff --git a/ej2-javascript/diagram/js/connector-orthogonal.md b/ej2-javascript/diagram/js/connector-orthogonal.md index 9d46a6261..5d5e6a9b0 100644 --- a/ej2-javascript/diagram/js/connector-orthogonal.md +++ b/ej2-javascript/diagram/js/connector-orthogonal.md @@ -71,7 +71,7 @@ Orthogonal segments are automatically re-routed, in order to avoid overlapping w ## How to customize Orthogonal Segment Thumb Shape -The orthogonal connector can have any number of segments in between the source and the target point. Segments are rendered with the circle shape by default. The [`segmentThumbShape`](../api/diagram#segmentThumbShape-SegmentThumbShapes) property allows you to change the default shape of the segment thumb. The following predefined shapes are provided: +The orthogonal connector can have any number of segments in between the source and the target point. Segments are rendered with the circle shape by default. The [`segmentThumbShape`](../api/diagram/#segmentthumbshape) property allows you to change the default shape of the segment thumb. The following predefined shapes are provided: | Shape name | Shape | |-------- | -------- | @@ -121,9 +121,9 @@ Use the following CSS to customize the segment thumb shape. ## How to customize Orthogonal Segment Thumb Size -Orthogonal segment thumbs default to size 10. This can be adjusted globally or for individual connectors using the [`segmentThumbSize`](../api/diagram#segmentThumbSize-SegmentThumbSize) property. -To change the thumb size for all Orthogonal connectors, set the [`segmentThumbSize`](../api/diagram#segmentThumbSize-SegmentThumbSize) property in the diagram’s model. -To customize the thumb size for a specific connector, disable the [`InheritSegmentThumbSize`](../api/diagram/connectorConstraints) constraint, then set the desired [`segmentThumbSize`](../api/diagram#segmentThumbSize-SegmentThumbSize). +Orthogonal segment thumbs default to size 10. This can be adjusted globally or for individual connectors using the [`segmentThumbSize`](../api/diagram/#segmentthumbsize) property. +To change the thumb size for all Orthogonal connectors, set the [`segmentThumbSize`](../api/diagram/#segmentthumbsize) property in the diagram’s model. +To customize the thumb size for a specific connector, disable the [`InheritSegmentThumbSize`](../api/diagram/connectorConstraints) constraint, then set the desired [`segmentThumbSize`](../api/diagram/#segmentthumbsize). {% tabs %} diff --git a/ej2-javascript/diagram/js/connector-straight.md b/ej2-javascript/diagram/js/connector-straight.md index 20166b09b..348d15250 100644 --- a/ej2-javascript/diagram/js/connector-straight.md +++ b/ej2-javascript/diagram/js/connector-straight.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## --- ## Straight -To create a straight line, specify the [`type`](../api/diagram/segments) of the segment as **straight** and add a straight segment to [`segments`](../api/diagram/connector#segments) collection and need to specify [`type`](../api/diagram/connector#type-Segments) for the connector. The following code example illustrates how to create a default straight segment. +To create a straight line, specify the [`type`](../api/diagram/segments) of the segment as **straight** and add a straight segment to [`segments`](../api/diagram/connector#segments) collection and need to specify [`type`](../api/diagram/connector/#type) for the connector. The following code example illustrates how to create a default straight segment. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/ej2-javascript/diagram/js/connectors.md b/ej2-javascript/diagram/js/connectors.md index f99e157af..9f97b063f 100644 --- a/ej2-javascript/diagram/js/connectors.md +++ b/ej2-javascript/diagram/js/connectors.md @@ -29,7 +29,7 @@ N> Note: There should not be any white-spaces in the ID string while setting the ## Add connectors through connectors collection -The [`sourcePoint`](../api/diagram/connector#sourcepoint-PointModel) and [`targetPoint`](../api/diagram/connector#targetpoint-PointModel) properties of connector allow you to define the end points of a connector. +The [`sourcePoint`](../api/diagram/connector/#sourcepoint) and [`targetPoint`](../api/diagram/connector/#targetpoint) properties of connector allow you to define the end points of a connector. The following code example illustrates how to add a connector through connector collection. @@ -153,7 +153,7 @@ The following code example illustrates how to clone a connector Get Connector defaults helps to define default properties of the connector. It is triggered when the diagram is initialized. In this event, you can customize the connector properties. -The following code example explains how to customize the connector using [`getConnectorDefaults`](..api/diagram/#getconnectordefaults). +The following code example explains how to customize the connector using [`getConnectorDefaults`](../api/diagram/#getconnectordefaults). {% tabs %} {% highlight js tabtitle="index.js" %} @@ -170,7 +170,7 @@ The following code example explains how to customize the connector using [`getCo ### Connection with nodes -* The [`sourceID`](../api/diagram/connector#sourceid-string) and [`targetID`](../api/diagram/connector#targetid-string) properties allow to define the nodes to be connected. +* The [`sourceID`](../api/diagram/connector/#sourceid) and [`targetID`](../api/diagram/connector/#targetid) properties allow to define the nodes to be connected. * The following code example illustrates how to connect two nodes. @@ -207,7 +207,7 @@ var diagram = new ej.diagrams.Diagram({ ## Connection with ports -The [`sourcePortID`](../api/diagram/connector#sourceportid-string) and [`targetPortID`](../api/diagram/connector#targetportid-string) properties allow to create connections between some specific points of source/target nodes. +The [`sourcePortID`](../api/diagram/connector/#sourceportid) and [`targetPortID`](../api/diagram/connector/#targetportid) properties allow to create connections between some specific points of source/target nodes. The following code example illustrates how to create port to port connections. @@ -222,7 +222,7 @@ The following code example illustrates how to create port to port connections. {% previewsample "page.domainurl/code-snippet/diagram/connectors-cs5" %} -Similarly, the `sourcePortID` or `targetPortID` can be changed at the runtime by changing the port [`sourcePortID`](../api/diagram/connector#sourceportid-string) or [`targetPortID`](../api/diagram/connector#targetportid-string). +Similarly, the `sourcePortID` or `targetPortID` can be changed at the runtime by changing the port [`sourcePortID`](../api/diagram/connector/#sourceportid) or [`targetPortID`](../api/diagram/connector/#targetportid). {% tabs %} {% highlight js tabtitle="index.js" %} @@ -303,7 +303,7 @@ The following image illustrates how the connector automatically re-routes the se ![LineRouting GIF](images/lineRouting.GIF.gif) -* In some situations, automatic line routing enabled diagram needs to ignore a specific connector from automatic line routing. So, in this case, auto routing feature can be disabled to the specific connector using the [`constraints`](../api/diagram/connector#constraints-ConnectorConstraints) property of the connector like the following code snippet. +* In some situations, automatic line routing enabled diagram needs to ignore a specific connector from automatic line routing. So, in this case, auto routing feature can be disabled to the specific connector using the [`constraints`](../api/diagram/connector/#constraints) property of the connector like the following code snippet. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/ej2-javascript/diagram/js/customization.md b/ej2-javascript/diagram/js/customization.md index 31a665cf1..d422b40a8 100644 --- a/ej2-javascript/diagram/js/customization.md +++ b/ej2-javascript/diagram/js/customization.md @@ -34,7 +34,7 @@ N> The value we set in the getNodeDefaults has the higher priority in rendering. ### Apply style to the node -The appearance of a node can be customized by changing its [`fill`](../api/diagram/shapeStyleModel#fill-string) color, [`strokeDashArray`](../api/diagram/shapeStyleModel#strokeDashArray-string), ['strokeWidth'](../api/diagram/shapeStyleModel#strokeWidth-number), ['strokeColor'](../api/diagram/shapeStyleModel#strokeColor-string) and [`opacity`](../api/diagram/shapeStyleModel#strokeColor-string). The [`visible`](../api/diagram/node#visible-boolean) property of the node enables or disables the visibility of the node. +The appearance of a node can be customized by changing its [`fill`](../api/diagram/shapeStyleModel#fill-string) color, [`strokeDashArray`](../api/diagram/shapeStyleModel#strokeDashArray-string), ['strokeWidth'](../api/diagram/shapeStyleModel#strokeWidth-number), ['strokeColor'](../api/diagram/shapeStyleModel#strokeColor-string) and [`opacity`](../api/diagram/shapeStyleModel#strokeColor-string). The [`visible`](../api/diagram/node/#visible) property of the node enables or disables the visibility of the node. The following code illustrates how to customize the appearance of the shape. @@ -120,7 +120,7 @@ Use the following CSS to customize the style of main node on multiple selection. ## Apply rotate angle and corner radius to the node -- `Rotate angle`: The [`rotateAngle`](../api/diagram/node#rotateAngle-number) property allows you to rotate nodes within the diagram. It's particularly useful when you want to represent nodes from different perspectives or angles. +- `Rotate angle`: The [`rotateAngle`](../api/diagram/node/#rotateangle) property allows you to rotate nodes within the diagram. It's particularly useful when you want to represent nodes from different perspectives or angles. - `Corner radius`: The [`cornerRadius`](../api/diagram/basicShapeModel/#cornerradius) property allows you to round the corners of nodes in the diagram. It adds a visual styling effect to the nodes, making them appear softer or more polished. @@ -141,7 +141,7 @@ The following code shows how to set the rotate angle and corner radius for the n ## Apply shadow effect to node -Diagram provides support to add [`shadow`](../api/diagram/node#shadow-shadowmodel) effect to a node that is disabled, by default. It can be enabled with the constraints property of the node. The following code illustrates how to drop shadow. +Diagram provides support to add [`shadow`](../api/diagram/node/#shadow ) effect to a node that is disabled, by default. It can be enabled with the constraints property of the node. The following code illustrates how to drop shadow. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -196,7 +196,7 @@ var nodes = [ ## Constraints -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) +The [`constraints`](../api/diagram/node/#constraints) 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#node-constraints) ## Stack order diff --git a/ej2-javascript/diagram/js/expandAndCollapse.md b/ej2-javascript/diagram/js/expandAndCollapse.md index 77017c856..f10ff7465 100644 --- a/ej2-javascript/diagram/js/expandAndCollapse.md +++ b/ej2-javascript/diagram/js/expandAndCollapse.md @@ -21,7 +21,7 @@ The following properties of the Node are used to represent the state of the node N> Icon can be created only when the node has outEdges. -To explore the properties of expand and collapse icon, refer to [`expandIcon`](../api/diagram/node#expandIcon-iconshapemodel) and [`collapseIcon`](../api/diagram/node#collapseIcon-iconshapemodel). +To explore the properties of expand and collapse icon, refer to [`expandIcon`](../api/diagram/node/#expandicon) and [`collapseIcon`](../api/diagram/node/#collapseicon). ## Customizing expand and collapse icon @@ -53,7 +53,7 @@ The corner radius can be set using the [`cornerRadius`](../api/diagram/iconShape The icon can be aligned relative to the node boundaries. It has margin, offset, horizontalAlignment, and verticalAlignment settings. It is quite tricky, when all four alignments are used together but gives you more control over alignment. -The [`iconColor`](../api/diagram/iconShapeModel#iconColor-string) property can be used to set the strokeColor of the Icon. +The [`iconColor`](../api/diagram/iconShapeModel/#iconcolor) property can be used to set the strokeColor of the Icon. The following code example illustrates the customization of icons. diff --git a/ej2-javascript/diagram/js/export.md b/ej2-javascript/diagram/js/export.md index a47ebc458..7a1c294b4 100644 --- a/ej2-javascript/diagram/js/export.md +++ b/ej2-javascript/diagram/js/export.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Export in ##Platform_Name## Diagram control -Diagram provides support to export its content as image/svg files. The [`exportDiagram`](../api/diagram#exportDiagram) method of diagram helps to export the diagram. The following code illustrates how to export the diagram as image. +Diagram provides support to export its content as image/svg files. The [`exportDiagram`](../api/diagram/#exportdiagram) method of diagram helps to export the diagram. The following code illustrates how to export the diagram as image. N> To Export diagram, you need to inject `PrintAndExport` in the diagram. @@ -185,7 +185,7 @@ To get the html diagram content, the [`getDiagramContent`](../api/diagram/#getdi ### Export diagram with stretch option -Diagram provides support to export the diagram as image for [`stretch`](../api/diagram/iExportOptions#stretch-stretch) option. The exported images will be clearer but larger in file size. +Diagram provides support to export the diagram as image for [`stretch`](../api/diagram/iExportOptions/#stretch) option. The exported images will be clearer but larger in file size. The following code example illustrates how to export the region occupied by the diagram elements. diff --git a/ej2-javascript/diagram/js/hierarchical-layout.md b/ej2-javascript/diagram/js/hierarchical-layout.md index f5d96d9f1..85a8bd572 100644 --- a/ej2-javascript/diagram/js/hierarchical-layout.md +++ b/ej2-javascript/diagram/js/hierarchical-layout.md @@ -15,7 +15,7 @@ The hierarchical tree layout arranges nodes in a tree-like structure, where the ## Hierarchical tree layout with nodes and connectors -To arrange the nodes in a hierarchical structure, specify the layout [`type`](../api/diagram/layout) as **HierarchicalTree**. The following example shows how to arrange the nodes in a hierarchical structure. +To arrange the nodes in a hierarchical structure, specify the layout [`type`](../api/diagram/layout/#type) as **HierarchicalTree**. The following example shows how to arrange the nodes in a hierarchical structure. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/ej2-javascript/diagram/js/interaction.md b/ej2-javascript/diagram/js/interaction.md index 6c6f8e193..3f9f10082 100644 --- a/ej2-javascript/diagram/js/interaction.md +++ b/ej2-javascript/diagram/js/interaction.md @@ -74,7 +74,7 @@ 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 diagram. +You can get the currently selected [`nodes`](../api/diagram/selectorModel/#nodes) and [`connectors`](../api/diagram/selectorModel/#connectors ) using [`selectedItems`](../api/diagram/selectorModel/) property of the diagram. ```javascript diff --git a/ej2-javascript/diagram/js/label-appearance.md b/ej2-javascript/diagram/js/label-appearance.md index c70d904cb..22d5b01be 100644 --- a/ej2-javascript/diagram/js/label-appearance.md +++ b/ej2-javascript/diagram/js/label-appearance.md @@ -12,11 +12,11 @@ domainurl: ##DomainURL## ## Appearance You can change the font style of the annotations with the font specific properties [`fontSize`](../api/diagram/textStyleModel/#fontsize), [`fontFamily`](../api/diagram/textStyleModel/#fontfamily),[`color`](../api/diagram/textStyleModel/#color). -The label’s [`bold`](../api/diagram/textStyleModel/#bold-boolean), [`italic`](../api/diagram/textStyleModel/#italic-boolean), and [`textDecoration`](../api/diagram/textStyleModel/#textDecoration-textdecoration) properties are used to style the label’s text. +The label’s [`bold`](../api/diagram/textStyleModel/#bold-boolean), [`italic`](../api/diagram/textStyleModel/#italic), and [`textDecoration`](../api/diagram/textStyleModel/#textdecoration) properties are used to style the label’s text. -The label’s [`fill`](../api/diagram/textStyleModel/#fill-string), [`strokeColor`](../api/diagram/textStyleModel/#strokeColor-string), and [`strokeWidth`](../api/diagram/textStyleModel/#strokeWidth-number) properties are used to define the background color and border color of the annotation and the [`opacity`](../api/diagram/textStyleModel/#opacity-number) property is used to define the transparency of the annotations. +The label’s [`fill`](../api/diagram/textStyleModel/#fill-string), [`strokeColor`](../api/diagram/textStyleModel/#strokecolor), and [`strokeWidth`](../api/diagram/textStyleModel/#strokewidth) properties are used to define the background color and border color of the annotation and the [`opacity`](../api/diagram/textStyleModel/#opacity) property is used to define the transparency of the annotations. -The [`visible`](../api/diagram/annotationModel/#visibility-number) property of the annotation enables or disables the visibility of annotation. +The [`visible`](../api/diagram/annotationModel/#visibility) property of the annotation enables or disables the visibility of annotation. The following code illustrates how to customize the appearance of the annotation. @@ -79,9 +79,9 @@ The following codes illustrates how to align annotations. ## Hyperlink -Diagram provides a support to add a [`hyperlink`](../api/diagram/annotationModel/#hyperLink-hyperlinkmodel) for the nodes/connectors annotation. It can also be customized with the below properties. +Diagram provides a support to add a [`hyperlink`](../api/diagram/annotationModel/#hyperlink) for the nodes/connectors annotation. It can also be customized with the below properties. -A User can open the hyperlink in the new window, the same tab and the new tab by using the [`hyperlinkOpenState`](../api/annotationModel/hyperlinkmodel/#hyperlinkopenstate) property. +A User can open the hyperlink in the new window, the same tab and the new tab by using the [`hyperlinkOpenState`](../api/diagram/hyperlinkModel/#hyperlinkopenstate) property. The [`content`](../api/diagram/hyperlinkModel/#content) property of `hyperlink` is used to display the content of the hyper link display text. The [`color`](../api/diagram/hyperlinkModel/#color) property of the `hyperlink` is used to display the color of the hyper link. The [`textDecoration`](../api/diagram/textDecoration/) property is used to decorate the hyper link text with **Underline**, **LineThrough**, **Overline**. The following example illustrates how to define and customize hyper link in both node and connector. @@ -114,11 +114,11 @@ Annotation can be rotated by setting the [`rotateAngle`](../api/diagram/shapeAnn ## Template support for annotation -Diagram provides template support for annotation. You can either define a string template and assign it to [`template`](../api/diagram/annotationModel/#template-string) property of annotation or define a annotation template in html file and assign it to the [`annotationTemplate`](../api/diagram/#annotationtemplate) property of the diagram. +Diagram provides template support for annotation. You can either define a string template and assign it to [`template`](../api/diagram/annotationModel/#template) property of annotation or define a annotation template in html file and assign it to the [`annotationTemplate`](../api/diagram/#annotationtemplate) property of the diagram. ### String template - For string template you should define a SVG/HTML content as string in the annotation's [`template`](../api/diagram/annotationModel/#template-string) property. + For string template you should define a SVG/HTML content as string in the annotation's [`template`](../api/diagram/annotationModel/#template) property. The following code illustrates how to define a template in annotation. @@ -171,7 +171,7 @@ The following code illustrates how to define a functional template. ## Text align -The [`textAlign`](../api/diagram/textStyleModel/#textAlign-textalign) property of annotation allows you to set how the text should be aligned (left, right, center, or justify) inside the text block. The following codes illustrate how to set textAlign for an annotation. +The [`textAlign`](../api/diagram/textStyleModel/#textalign) property of annotation allows you to set how the text should be aligned (left, right, center, or justify) inside the text block. The following codes illustrate how to set textAlign for an annotation. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -195,7 +195,7 @@ The following table shows the different text alignment. ## Text Wrapping -When text overflows node boundaries, you can control it by using [`text wrapping`](../api/diagram/textStyleModel/#textWrapping-textwrap). So, it is wrapped into multiple lines. The wrapping property of annotation defines how the text should be wrapped. The following code illustrates how to wrap a text in a node. +When text overflows node boundaries, you can control it by using [`text wrapping`](../api/diagram/textStyleModel/#textwrapping). So, it is wrapped into multiple lines. The wrapping property of annotation defines how the text should be wrapped. The following code illustrates how to wrap a text in a node. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -216,7 +216,7 @@ When text overflows node boundaries, you can control it by using [`text wrapping ## Text overflow -The label’s [`TextOverflow`](../api/diagram/textStyleModel/#textOverFlow-textoverflow) property is used control whether to display the overflowed content in node or not. +The label’s [`TextOverflow`](../api/diagram/textStyleModel/#textoverflow) property is used control whether to display the overflowed content in node or not. - `Clip` - The text which overflowing node's bounds will be removed. - `Ellipsis` - The text which overflowing nodes's bounds will be replaced by three dots. diff --git a/ej2-javascript/diagram/js/label-interaction.md b/ej2-javascript/diagram/js/label-interaction.md index 23e5685ef..3b6a77eac 100644 --- a/ej2-javascript/diagram/js/label-interaction.md +++ b/ej2-javascript/diagram/js/label-interaction.md @@ -68,7 +68,7 @@ Diagram allows to create read-only annotations. You have to set the read-only co Diagram provides support to edit an annotation at runtime, either programmatically or interactively. By default, annotation is in view mode. But it can be brought to edit mode in two ways; ### Programmatically -By using [`startTextEdit`](../api/diagram/#startTextEdit) method, edit the text through programmatically. +By using [`startTextEdit`](../api/diagram/#starttextedit) method, edit the text through programmatically. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -85,11 +85,11 @@ By using [`startTextEdit`](../api/diagram/#startTextEdit) method, edit the text 1. By double-clicking the annotation. 2. By selecting the item and pressing the F2 key. -Double-clicking any annotation will enables editing mode. When the focus of editor is lost, the annotation for the node is updated. When you double-click on the node/connector/diagram model, the [`doubleClick`](../api/diagram/#doubleClick--emittypeidoubleClickeventargs) event gets triggered. +Double-clicking any annotation will enables editing mode. When the focus of editor is lost, the annotation for the node is updated. When you double-click on the node/connector/diagram model, the [`doubleClick`](../api/diagram/#doubleclick) event gets triggered. ## Drag Limit -* The diagram control now supports defining the [`dragLimit`](../api/diagram/annotationModel/#dragLimit) to the label while dragging from the connector and also update the position to the nearest segment offset. +* The diagram control now supports defining the [`dragLimit`](../api/diagram/annotationModel/#draglimit) to the label while dragging from the connector and also update the position to the nearest segment offset. * You can set the value to dragLimit [`left`](../api/diagram/marginModel/#left), [`right`](../api/diagram/marginModel/#right), [`top`](../api/diagram/marginModel/#top), and [`bottom`](../api/diagram/marginModel/#bottom) properties which allow the dragging of connector labels to a certain limit based on the user defined values. diff --git a/ej2-javascript/diagram/js/labels.md b/ej2-javascript/diagram/js/labels.md index 8c993824b..f7a4c5ba0 100644 --- a/ej2-javascript/diagram/js/labels.md +++ b/ej2-javascript/diagram/js/labels.md @@ -17,7 +17,7 @@ domainurl: ##DomainURL## ## Create annotation -An annotation can be added to a node/connector by defining the annotation object and adding that to the annotation collection of the node/connector. The [`content`](../api/diagram/annotationModel/#content-string) property of annotation defines the text to be displayed. The following code illustrates how to create a annotation. +An annotation can be added to a node/connector by defining the annotation object and adding that to the annotation collection of the node/connector. The [`content`](..api/diagram/annotationModel/#content) property of annotation defines the text to be displayed. The following code illustrates how to create a annotation. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -32,9 +32,9 @@ An annotation can be added to a node/connector by defining the annotation object ## Add annotations at runtime -Annotations can be added at runtime by using the diagram method [`addLabels`](../api/diagram/#addLabels). The following code illustrates how to add a annotation to a node. +Annotations can be added at runtime by using the diagram method [`addLabels`](../api/diagram/#addlabels). The following code illustrates how to add a annotation to a node. -The annotation's [`id`](../api/diagram/annotationModel/#id-string) property is used to define the name of the annotation and its further used to find the annotation at runtime and do any customization. +The annotation's [`id`](../api/diagram/annotationModel/#id) property is used to define the name of the annotation and its further used to find the annotation at runtime and do any customization. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -49,7 +49,7 @@ The annotation's [`id`](../api/diagram/annotationModel/#id-string) property is u ## Remove annotation -A collection of annotations can be removed from the node by using diagram method [`removeLabels`](../api/diagram/#removeLabels). The following code illustrates how to remove a annotation to a node. +A collection of annotations can be removed from the node by using diagram method [`removeLabels`](../api/diagram/#removelabels). The following code illustrates how to remove a annotation to a node. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -64,7 +64,7 @@ A collection of annotations can be removed from the node by using diagram method ## Update annotation at runtime -You can get the annotation directly from the node’s annotations collection property and you can change any annotation properties at runtime. To reflect the changes immediately, we need to call [`dataBind`](../api/diagram/#dataBind). +You can get the annotation directly from the node’s annotations collection property and you can change any annotation properties at runtime. To reflect the changes immediately, we need to call [`dataBind`](../api/diagram/#databind ). The following code example illustrates how to change the annotation properties. diff --git a/ej2-javascript/diagram/js/layers.md b/ej2-javascript/diagram/js/layers.md index 58354b47e..54a45b099 100644 --- a/ej2-javascript/diagram/js/layers.md +++ b/ej2-javascript/diagram/js/layers.md @@ -150,7 +150,7 @@ The following code illustrates how to add a new layer with new connectors stored ## Remove layer at runtime -Layers can be removed at runtime by using the [`removeLayer`](../api/diagram#removeLayer) public method. +Layers can be removed at runtime by using the [`removeLayer`](../api/diagram/#removelayer) public method. To remove a layer, pass the ID of the layer you want to remove as a parameter to the `removeLayer` method. @@ -171,7 +171,7 @@ The following code illustrates how to remove a layer. ## moveObjects -You can move objects from one layer to another dynamically using the [`moveObjects`](../api/diagram#moveObjects) public method of the diagram control. This can be useful for managing complex diagrams with multiple layers where you need to update the categorization of elements based on user interaction or other dynamic conditions.. +You can move objects from one layer to another dynamically using the [`moveObjects`](../api/diagram/#moveobjects) public method of the diagram control. This can be useful for managing complex diagrams with multiple layers where you need to update the categorization of elements based on user interaction or other dynamic conditions.. The following code illustrates how to move objects from one layer to another layer. @@ -192,7 +192,7 @@ The following code illustrates how to move objects from one layer to another lay ### Bring Layer Forward -Layers can be moved forward at runtime by using the [`bringLayerForward`](../api/diagram#bringLayerForward) public method. +Layers can be moved forward at runtime by using the [`bringLayerForward`](../api/diagram/#bringlayerforward) public method. ```javascript // move the layer forward @@ -202,7 +202,7 @@ diagram.bringLayerForward('layer1'); ### Send Layer Backward -Layers can be moved backward at runtime by using the [`sendLayerBackward`](../api/diagram#sendLayerBackward) public method. +Layers can be moved backward at runtime by using the [`sendLayerBackward`](../api/diagram/#sendlayerbackward) public method. ```javascript // move the layer backward @@ -225,13 +225,13 @@ The following code illustrates how to send the layer forward/backward to another ### Layer and objects rendering order -The rendering of diagram elements with layer properties involves grouping them within a `diagram_diagramLayer` for basic shape nodes and `diagram_nativeLayer_svg` for SVG-native elements. Even if different types of nodes are added within the same layer, the rendering at the DOM level occurs in separate layers. Therefore, when executing layering commands like [`bringLayerForward`](../api/diagram#bringLayerForward) and [`sendLayerBackward`](../api/diagram#sendLayerBackward), the native SVG elements will always render above the basic shape elements. +The rendering of diagram elements with layer properties involves grouping them within a `diagram_diagramLayer` for basic shape nodes and `diagram_nativeLayer_svg` for SVG-native elements. Even if different types of nodes are added within the same layer, the rendering at the DOM level occurs in separate layers. Therefore, when executing layering commands like [`bringLayerForward`](../api/diagram/#bringlayerforward) and [`sendLayerBackward`](../api/diagram/#sendlayerbackward), the native SVG elements will always render above the basic shape elements. The order of rendering is as follows: HTML shapes -> SVG shapes -> Path data shapes & Basic shapes. ## Clone Layer -Layers can be cloned with its object by using the [`cloneLayer`](../api/diagram#cloneLayer) public method. +Layers can be cloned with its object by using the [`cloneLayer`](../api/diagram/#clonelayer) public method. The following code illustrates how to clone the layer. @@ -256,7 +256,7 @@ Public methods are available to get and set the active layer, which are explaine ### Get ActiveLayer -Active layer of the diagram can be retrieved by using the [`getActiveLayer`](../api/diagram#getActiveLayer) public method. +Active layer of the diagram can be retrieved by using the [`getActiveLayer`](..api/diagram/#getactivelayer) public method. The following code illustrates how fetch active layer from the diagram @@ -269,7 +269,7 @@ let activeLayer = diagram.getActiveLayer(); ### Set ActiveLayer -You can set any layer to be the active layer of the diagram by using the [`setActiveLayer`](../api/diagram#setActiveLayer) public method. +You can set any layer to be the active layer of the diagram by using the [`setActiveLayer`](../api/diagram/#setactivelayer) public method. The following code illustrates how to set active layer for diagram diff --git a/ej2-javascript/diagram/js/layout-customization.md b/ej2-javascript/diagram/js/layout-customization.md index 84a57f2df..756533d4b 100644 --- a/ej2-javascript/diagram/js/layout-customization.md +++ b/ej2-javascript/diagram/js/layout-customization.md @@ -72,7 +72,7 @@ The following code illustrates how to set the initial horizontal and vertical sp ## Layout margin -Layout provides support to add some blank space between the layout bounds/viewport and the layout. The [`margin`](../api/diagram/layout) property of the layout allows you to set the blank space. +Layout provides support to add some blank space between the layout bounds/viewport and the layout. The [`margin`](../api/diagram/layout/#margin) property of the layout allows you to set the blank space. The following code demonstrates how to set the initial layout margin and how to modify the layout margin dynamically at runtime. diff --git a/ej2-javascript/diagram/js/mindmap-layout.md b/ej2-javascript/diagram/js/mindmap-layout.md index c0bef6dde..2a5d6dab0 100644 --- a/ej2-javascript/diagram/js/mindmap-layout.md +++ b/ej2-javascript/diagram/js/mindmap-layout.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Mind Map layout in ##Platform_Name## Diagram control -A mind map is a diagram that displays the nodes as a spider diagram organizes information around a central concept. To create mind map, the [`type`](../api/diagram/layout) of layout should be set as `MindMap`. +A mind map is a diagram that displays the nodes as a spider diagram organizes information around a central concept. To create mind map, the [`type`](../api/diagram/layout/#type) of layout should be set as `MindMap`. ## Mind Map Orientation diff --git a/ej2-javascript/diagram/js/node-labels.md b/ej2-javascript/diagram/js/node-labels.md index 3824d48f7..363ae39ba 100644 --- a/ej2-javascript/diagram/js/node-labels.md +++ b/ej2-javascript/diagram/js/node-labels.md @@ -22,7 +22,7 @@ Diagram allows you to customize the position and appearance of the annotation ef The [`offset`](../api/diagram/pointModel/) property of an annotation is used to align annotations based on fractional values. The offset can be customized by modifying the x and y values of the offset property. By default, the annotation offset is set to 0.5 on both the x and y axes. -By default, the size of the annotation is calculated based on its content. If you want to set the size externally, you can do so using the [`width`](../api/diagram/annotationModel/#width-number) and [`height`](../api/diagram/annotationModel/#height-number) properties of annotation. +By default, the size of the annotation is calculated based on its content. If you want to set the size externally, you can do so using the [`width`](../api/diagram/annotationModel/#width) and [`height`](../api/diagram/annotationModel/#height) properties of annotation. The following code shows how to set offset, height and width for the annotation. @@ -53,7 +53,7 @@ The annotation offset can be updated dynamically at runtime. To update the annot {% previewsample "page.domainurl/code-snippet/diagram/annotations-offsetUpdate" %} -N> Call [`dataBind()`](../api/diagram/#dataBind) after property change to reflect the changes instantly. +N> Call [`dataBind()`](../api/diagram/#databind) after property change to reflect the changes instantly. The following table shows the position of annotation with different offsets. @@ -71,7 +71,7 @@ offset|image| ## Annotation alignment -The [`horizontalAlignment`](../api/diagram/annotationModel/#horizontalAlignment-string) property of annotation is used to set how the annotation is horizontally aligned at the annotation position determined from the fraction values. The [`verticalAlignment`](../api/diagram/annotationModel/#horizontalAlignment-string) property is used to set how annotation is vertically aligned at the annotation position. +The [`horizontalAlignment`](../api/diagram/annotationModel/#horizontalalignment) property of annotation is used to set how the annotation is horizontally aligned at the annotation position determined from the fraction values. The [`verticalAlignment`](../api/diagram/annotationModel/#verticalalignment) property is used to set how annotation is vertically aligned at the annotation position. The following codes illustrates how to align annotations. diff --git a/ej2-javascript/diagram/js/nodes-interaction.md b/ej2-javascript/diagram/js/nodes-interaction.md index 4c5389ada..3ed08b99d 100644 --- a/ej2-javascript/diagram/js/nodes-interaction.md +++ b/ej2-javascript/diagram/js/nodes-interaction.md @@ -22,7 +22,7 @@ You can simply click on the node to select it and click on diagram canvas to uns ### To select node programatically -A node can be selected at runtime by using the [`select`](../api/diagram/#select) method and the selection can be cleared in the diagram by using the [`clearSelection`](../api/diagram/#clearSelection) or [`unSelect`](../api/diagram/#unselect) method. The following code explains how to select and clear selection in the diagram. +A node can be selected at runtime by using the [`select`](../api/diagram/#select) method and the selection can be cleared in the diagram by using the [`clearSelection`](../api/diagram/#clearselection) or [`unSelect`](../api/diagram/#unselect) method. The following code explains how to select and clear selection in the diagram. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -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 diagram.| +|[`clearSelection`](../api/diagram/#clearselection)| - | Clears all the selection in the diagram.| ## Drag diff --git a/ej2-javascript/diagram/js/org-chart.md b/ej2-javascript/diagram/js/org-chart.md index f75d88e18..69ad38f67 100644 --- a/ej2-javascript/diagram/js/org-chart.md +++ b/ej2-javascript/diagram/js/org-chart.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Organizational Chart layout in ##Platform_Name## Diagram control -An organizational chart is a diagram that displays the structure of an organization and relationships. To create an organizational chart, the [`type`](../api/diagram/layout) of layout should be set as an `OrganizationalChart`. +An organizational chart is a diagram that displays the structure of an organization and relationships. To create an organizational chart, the [`type`](../api/diagram/layout/#type) of layout should be set as an `OrganizationalChart`. ## Organizational chart with DataSource diff --git a/ej2-javascript/diagram/js/positioning.md b/ej2-javascript/diagram/js/positioning.md index f2d5d5155..9b337bb1d 100644 --- a/ej2-javascript/diagram/js/positioning.md +++ b/ej2-javascript/diagram/js/positioning.md @@ -13,13 +13,13 @@ domainurl: ##DomainURL## ## Position -* Position of a node is controlled by using its [`offsetX`](../api/diagram/node#offsetX-number) and [`offsetY`](../api/diagram/node#offsetY-number) properties. By default, these offset properties represent the distance between the origin of the diagram’s page and node’s center point. +* Position of a node is controlled by using its [`offsetX`](../api/diagram/node/#offsetx) and [`offsetY`](../api/diagram/node/#offsety) properties. By default, these offset properties represent the distance between the origin of the diagram’s page and node’s center point. -* You may expect this offset values to represent the distance between page origin and node’s top-left corner instead of center. The Pivot property helps to solve this problem. Default value of node’s [`pivot`](../api/diagram/node#pivot--pointmodel) point is (0.5, 0.5), that means center of the node. +* You may expect this offset values to represent the distance between page origin and node’s top-left corner instead of center. The Pivot property helps to solve this problem. Default value of node’s [`pivot`](../api/diagram/node/#pivot) point is (0.5, 0.5), that means center of the node. -* The size of the node can be controlled by using its [`width`](../api/diagram/node#width-number) and [`height`](../api/diagram/node#height-number) properties. +* The size of the node can be controlled by using its [`width`](../api/diagram/node/#width) and [`height`](../api/diagram/node/#height) properties. -* Rotation of a node is controlled by using its [`rotateAngle`](../api/diagram/node#rotateAngle-number) property. +* Rotation of a node is controlled by using its [`rotateAngle`](../api/diagram/node/#rotateangle) property. The following table illustrates how pivot relates offset values with node boundaries. @@ -44,7 +44,7 @@ The following code illustrates how to change the `pivot` value. ## Minimum and maximum size for nodes. -The [`minWidth`](../api/diagram/node#minWidth-number) and [`minHeight`](../api/diagram/node#minHeight-number) properties of node allows you to control the minimum size of the node while resizing. Similarly, the [`maxWidth`](../api/diagram/node#maxWidth-number) and [`maxHeight`](../api/diagram/node#maxHeight-number) properties of node allows you to control the maximum size of the node while resizing. +The [`minWidth`](../api/diagram/node/#minwidth) and [`minHeight`](../api/diagram/node/#minheight) properties of node allows you to control the minimum size of the node while resizing. Similarly, the [`maxWidth`](../api/diagram/node/#maxwidth) and [`maxHeight`](../api/diagram/node/#maxheight) properties of node allows you to control the maximum size of the node while resizing. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/ej2-javascript/diagram/js/radial-layout.md b/ej2-javascript/diagram/js/radial-layout.md index db063cb3a..09962a08b 100644 --- a/ej2-javascript/diagram/js/radial-layout.md +++ b/ej2-javascript/diagram/js/radial-layout.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Radial tree layout in ##Platform_Name## Diagram control -A Radial tree layout is a diagram that presents information in a hierarchical structure, with a central node at the core of the diagram. The central node represents the main concept or topic, and branches extend outward in a radial fashion, creating a tree-like structure. The layout [`root`](../api/diagram/layout) property can be used to define the root node of the layout. When no root node is set, the algorithm automatically considers the node without any incoming edges (InEdges connector count of 0) as the root node. To create radial tree, the [`type`](../api/diagram/layout) of the layout as `RadialTree`. +A Radial tree layout is a diagram that presents information in a hierarchical structure, with a central node at the core of the diagram. The central node represents the main concept or topic, and branches extend outward in a radial fashion, creating a tree-like structure. The layout [`root`](../api/diagram/layout/#root) property can be used to define the root node of the layout. When no root node is set, the algorithm automatically considers the node without any incoming edges (InEdges connector count of 0) as the root node. To create radial tree, the [`type`](../api/diagram/layout/#type) of the layout as `RadialTree`. The RadialTree layout provides support for adding space between the nodes. The [`HorizontalSpacing`](../api/diagram/layoutModel/#horizontalspacing )and [`VerticalSpacing`](../api/diagram/layoutModel/#verticalspacing) properties of the layout allow you to set the space between the nodes. The arrangement results in an ever-expanding concentric arrangement with radial proximity to the root node indicating the node level in the hierarchy. diff --git a/ej2-javascript/diagram/js/serialization.md b/ej2-javascript/diagram/js/serialization.md index 08d87ffd8..77f9d2cbe 100644 --- a/ej2-javascript/diagram/js/serialization.md +++ b/ej2-javascript/diagram/js/serialization.md @@ -42,7 +42,7 @@ The diagram can also be saved as raster or vector image files. For more informat ## Load -The diagram can be loaded from serialized string data using the [`loadDiagram`](../api/diagram#loadDiagram) method. The saved string should be passed as the parameter of the loadDiagram method. The following code illustrates how to load the diagram from serialized string data: +The diagram can be loaded from serialized string data using the [`loadDiagram`](../api/diagram/#loaddiagram) method. The saved string should be passed as the parameter of the loadDiagram method. The following code illustrates how to load the diagram from serialized string data: ```javascript /* @@ -78,7 +78,7 @@ var diagram = new ej.diagrams.Diagram({ The JSON files can be uploaded using the uploader component, where they are parsed to extract the JSON data they contain. To achieve this, configure the uploader component with the saveUrl property to receive uploaded files and store them on the server. Similarly, use the removeUrl property to handle file removal operations on the server. -When a JSON file is uploaded, it undergoes parsing to extract its JSON data. This data is then loaded into the diagram using the [`loadDiagram`](../api/diagram#loadDiagram) method. +When a JSON file is uploaded, it undergoes parsing to extract its JSON data. This data is then loaded into the diagram using the [`loadDiagram`](../api/diagram/#loaddiagram) method. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/ej2-javascript/diagram/js/symmetric-layout.md b/ej2-javascript/diagram/js/symmetric-layout.md index 677c3a842..f4b6ea5c7 100644 --- a/ej2-javascript/diagram/js/symmetric-layout.md +++ b/ej2-javascript/diagram/js/symmetric-layout.md @@ -15,7 +15,7 @@ The symmetric layout has been formed using nodes position by closer together or ## Symmetric layout -The layout’s [`springLength`](../api/diagram/layout) defined as how long edges should be, ideally. This will be the resting length for the springs. Edge attraction and vertex repulsion forces to be defined by using layout’s [`springFactor`](../api/diagram/layout), the more sibling nodes repel each other. The relative positions do not change any more from one iteration to the next. The number of iterations can be specified by using layout’s [`maxIteration`](../api/diagram/layout). +The layout’s [`springLength`](../api/diagram/layout/#springlength) defined as how long edges should be, ideally. This will be the resting length for the springs. Edge attraction and vertex repulsion forces to be defined by using layout’s [`springFactor`](../api/diagram/layout/#springfactor), the more sibling nodes repel each other. The relative positions do not change any more from one iteration to the next. The number of iterations can be specified by using layout’s [`maxIteration`](../api/diagram/layout/#maxiteration). The following code illustrates how to arrange the nodes in a radial tree structure. diff --git a/ej2-javascript/diagram/js/undo-redo.md b/ej2-javascript/diagram/js/undo-redo.md index 408437cbd..78f57ab38 100644 --- a/ej2-javascript/diagram/js/undo-redo.md +++ b/ej2-javascript/diagram/js/undo-redo.md @@ -64,7 +64,7 @@ The diagram method [`startGroupAction`](../api/diagram/#startgroupaction) allows ## Stack Limit -The [`stackLimit`](../api/diagram) property of history manager is used to limits the number of actions to be stored on the history manager. +The [`stackLimit`](../api/diagram/#setstacklimit) property of history manager is used to limits the number of actions to be stored on the history manager. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/ej2-javascript/diagram/page-settings.md b/ej2-javascript/diagram/page-settings.md index 43ae8d03a..89804da1d 100644 --- a/ej2-javascript/diagram/page-settings.md +++ b/ej2-javascript/diagram/page-settings.md @@ -196,7 +196,7 @@ Below is an example illustrating how to define boundary constraints within the d ## Fit options -The [`fitOptions`](api/diagram/fitOptionsModel/) in page settings control how diagram content is fitted within the diagram page. The [`canFit`](../api/diagram/fitOptionsModel/#canfit) property within fitOptions centers the content within the viewport during diagram rendering. Additionally, the [`region`](../api/diagram/diagramRegions/) property specifies whether to fit the page or the content to the center of the viewport. Choosing CustomBounds for the [`region`](../api/diagram/diagramRegions/) allows fitting custom bounds within the diagram by defining them in the [`customBounds`](../api/diagram/fitOptionsModel/#custombounds) property of fitOptions. The [`canZoomIn`](../api/diagram/fitOptionsModel/#canzoomin) property enables zooming in to fit smaller content within the viewport. Additionally, the [`margin`](../api/diagram/marginModel/) property defines the space around the fitted content within the viewport, while the [`mode`](../api/diagram/fitModes/) property sets the fitting mode, typically defaulting to 'Page' but also offering options like 'Width' and 'Height' for specific dimension constraints. +The [`fitOptions`](../api/diagram/fitOptionsModel/) in page settings control how diagram content is fitted within the diagram page. The [`canFit`](../api/diagram/fitOptionsModel/#canfit) property within fitOptions centers the content within the viewport during diagram rendering. Additionally, the [`region`](../api/diagram/diagramRegions/) property specifies whether to fit the page or the content to the center of the viewport. Choosing CustomBounds for the [`region`](../api/diagram/diagramRegions/) allows fitting custom bounds within the diagram by defining them in the [`customBounds`](../api/diagram/fitOptionsModel/#custombounds) property of fitOptions. The [`canZoomIn`](../api/diagram/fitOptionsModel/#canzoomin) property enables zooming in to fit smaller content within the viewport. Additionally, the [`margin`](../api/diagram/marginModel/) property defines the space around the fitted content within the viewport, while the [`mode`](../api/diagram/fitModes/) property sets the fitting mode, typically defaulting to 'Page' but also offering options like 'Width' and 'Height' for specific dimension constraints. The following example demonstrates how fitOptions are utilized in diagram page settings. diff --git a/ej2-javascript/diagram/ports-appearance.md b/ej2-javascript/diagram/ports-appearance.md index 2af3f19ba..bf1e2d276 100644 --- a/ej2-javascript/diagram/ports-appearance.md +++ b/ej2-javascript/diagram/ports-appearance.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## ## Appearance -The appearance of ports can be customized by using [`strokeColor`](../api/diagram/shapeStyleModel/#strokecolor), [`strokeWidth`](../api/diagram/port#strokeWidth-string),[`fill`](../api/diagram/shapeStyleModel/#fill) and [`opacity`](../api/diagram/shapeStyleModel/#opacity) properties of the port. Customize the port size by using the [`width`](../api/diagram/pointPortModel/#width) and [`height`](../api/diagram/pointPortModel/#height) properties of port. The ports [`visibility`](../api/diagram/portvisibility/) property allows you to define, when the port should be visible. +The appearance of ports can be customized by using [`strokeColor`](../api/diagram/shapeStyleModel/#strokecolor), [`strokeWidth`](../api/diagram/shapeStyleModel/#strokewidth),[`fill`](../api/diagram/shapeStyleModel/#fill) and [`opacity`](../api/diagram/shapeStyleModel/#opacity) properties of the port. Customize the port size by using the [`width`](../api/diagram/pointPortModel/#width) and [`height`](../api/diagram/pointPortModel/#height) properties of port. The ports [`visibility`](../api/diagram/portvisibility/) property allows you to define, when the port should be visible. For more information about port visibility refer [`Port Visibility`](#port-visibility) diff --git a/ej2-javascript/diagram/ports.md b/ej2-javascript/diagram/ports.md index c4909b10e..024333e49 100644 --- a/ej2-javascript/diagram/ports.md +++ b/ej2-javascript/diagram/ports.md @@ -69,7 +69,7 @@ To add a connection port, define the port object and add it to node’s [`ports` ## Add ports at runtime -You can add ports to the nodes at runtime by using the diagram method [`addPorts`](../api/diagram#addPorts). The following code illustrates how to add ports to node at runtime. +You can add ports to the nodes at runtime by using the diagram method [`addPorts`](../api/diagram/#addports). The following code illustrates how to add ports to node at runtime. The port’s ID property is used to define the unique ID for the port and its further used to find the port at runtime. If ID is not set, then default ID is automatically set. @@ -104,7 +104,7 @@ If ID is not set, then default ID is automatically set. ## Remove ports at runtime -You can remove ports at runtime by using diagram method [`removePorts`](../api/diagram#removePorts). Refer to the following example which shows how to remove ports at runtime. +You can remove ports at runtime by using diagram method [`removePorts`](../api/diagram/#removeports). Refer to the following example which shows how to remove ports at runtime. {% if page.publishingplatform == "typescript" %} diff --git a/ej2-javascript/diagram/scroll-settings.md b/ej2-javascript/diagram/scroll-settings.md index 9136a675f..47fb9cd97 100644 --- a/ej2-javascript/diagram/scroll-settings.md +++ b/ej2-javascript/diagram/scroll-settings.md @@ -15,7 +15,7 @@ The diagram can be scrolled using both the vertical and horizontal scrollbars. A ## Access and Customize Scroll Settings -Scroll settings in a diagram allow you to access and customize various properties such as [`horizontalOffset`](../api/diagram/scrollSettingsModel/#horizontaloffset), [`verticalOffset`](../api/diagram/scrollSettingsModel/#verticaloffset), [`viewPortWidth`](../api/diagram/scrollSettingsModel/#viewportwidth), [`viewPortHeight`](../api/diagram/scrollSettingsModel/#viewportheight), [`currentZoom`](../api/diagram/scrollSettingsModel/#currentzoom), [`zoomFactor`](../api/diagram/scrollSettingsModel/#zoomfactor), [`maxZoom`](../api/diagram/scrollSettingsModel/#maxzoom), [`minZoom`](../api/diagram/scrollSettingsModel/#minzoom), [`scrollLimit`](../api/diagram/scrollSettingsModel/#scrolllimit) , [`canAutoScroll`](../scrollSettingsModel/#canautoscroll) , [`autoScrollBorder`](../api/diagram/marginmodel/), [`padding`](../api/diagram/marginmodel/) , [`scrollableArea`](../api/diagram/rect/). +Scroll settings in a diagram allow you to access and customize various properties such as [`horizontalOffset`](../api/diagram/scrollSettingsModel/#horizontaloffset), [`verticalOffset`](../api/diagram/scrollSettingsModel/#verticaloffset), [`viewPortWidth`](../api/diagram/scrollSettingsModel/#viewportwidth), [`viewPortHeight`](../api/diagram/scrollSettingsModel/#viewportheight), [`currentZoom`](../api/diagram/scrollSettingsModel/#currentzoom), [`zoomFactor`](../api/diagram/scrollSettingsModel/#zoomfactor), [`maxZoom`](../api/diagram/scrollSettingsModel/#maxzoom), [`minZoom`](../api/diagram/scrollSettingsModel/#minzoom), [`scrollLimit`](../api/diagram/scrollSettingsModel/#scrolllimit) , [`canAutoScroll`](../api/diagram/scrollSettingsModel/#canautoscroll) , [`autoScrollBorder`](../api/diagram/scrollSettingsModel/#autoscrollborder), [`padding`](../api/diagram/scrollSettingsModel/#padding) , [`scrollableArea`](../api/diagram/scrollSettingsModel/#scrollablearea). These properties enable you to read and adjust the scroll status, scroll offset, zoom levels, and more. For a comprehensive overview of these properties, refer to the [`Scroll Settings`](../api/diagram/scrollSettingsModel/) @@ -116,7 +116,7 @@ You can programmatically change the current zoom of diagram by utilizing the [`z #### ZoomOptions -The [`zoomTo`](../api/diagram/#zoomto) method takes one parameter [`zoomOptions`](../api/diagram/zoomOptions/). In that zoomOptions we can specify the [`focusPoint`](../api/diagram/pointModel/), [`type`](../api/diagram/zoomTypes/) and [`zoomFactor`](../api/diagram/zoomOptions/#zoomfactor) +The [`zoomTo`](../api/diagram/#zoomto) method takes one parameter [`zoomOptions`](../api/diagram/zoomOptions/). In that zoomOptions we can specify the [`focusPoint`](../api/diagram/zoomOptions/#focuspoint), [`type`](../api/diagram/zoomTypes/) and [`zoomFactor`](../api/diagram/zoomOptions/#zoomfactor) The following example shows how to zoom-in and zoom-out the diagram using zoomTo method @@ -161,11 +161,11 @@ The autoscroll behavior triggers automatically when any of the following actions The client-side event [`ScrollChange`](../api/diagram/iScrollChangeEventArgs/) is triggered when autoscroll occurs, allowing for customizations. Refer [`scrollChange-event`](#scroll-change-event) for more information. -Autoscroll behavior can be enabled or disabled using the [`canAutoScroll`](../scrollSettingsModel/#canautoscroll) property of the diagram. +Autoscroll behavior can be enabled or disabled using the [`canAutoScroll`](../api/diagram/scrollSettingsModel/#canautoscroll) property of the diagram. ### Autoscroll border -The autoscroll border defines the maximum distance from the mouse pointer to the diagram edge that triggers autoscroll. By default, this distance is set to 15 pixels for all sides (left, right, top, and bottom). You can adjust this using the [`autoScrollBorder`](../api/diagram/marginmodel/) property of the scroll settings. +The autoscroll border defines the maximum distance from the mouse pointer to the diagram edge that triggers autoscroll. By default, this distance is set to 15 pixels for all sides (left, right, top, and bottom). You can adjust this using the [`autoScrollBorder`](../api/diagram/scrollSettingsModel/#autoscrollborder) property of the scroll settings. The following example demonstrates how to configure autoscroll: @@ -293,7 +293,7 @@ The [`reset`](../api/diagram/#reset) method resets the zoom and scroller offsets ## UpdateViewport -The [`updateViewPort`](../api/diagram) method is used to update the dimensions of the diagram viewport. +The [`updateViewPort`](../api/diagram/#updateviewport) method is used to update the dimensions of the diagram viewport. ```javascript //Updates diagram viewport diff --git a/ej2-javascript/diagram/shapes.md b/ej2-javascript/diagram/shapes.md index 6d9b14d44..1aa25b2c6 100644 --- a/ej2-javascript/diagram/shapes.md +++ b/ej2-javascript/diagram/shapes.md @@ -128,7 +128,7 @@ 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) property of the node is set as **meet**. The [`align`](../api/diagram/imageAlignment/) property is used to set the alignment of the image. +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/image/#align) property is used to set the alignment of the image. The following code illustrates how to use scale and align properties to stretch the image. @@ -172,7 +172,7 @@ N> To visualize the changes in image scaling, it is essential to use the align p ## 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`. +Html elements can be embedded in the diagram through [`Html`](../api/diagram/node/#shape) 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`. N> HTML node cannot be exported to image format, like JPEG, PNG, and BMP. It is by design, while exporting the diagram is drawn in a canvas. Further, this canvas is exported into image formats. Currently, drawing in a canvas equivalent from all possible HTML is not feasible. Hence, this limitation. To overcome this limiatation we can use Blink rendering engine. Refer to - [`Html node export`](https://support.syncfusion.com/kb/article/14031/how-to-export-html-node-using-blink-rendering-in-javascript-diagram) @@ -306,7 +306,7 @@ Refer the code example below. ## Native -Diagram provides support to embed SVG element into a node. The shape property of node allows you to set the type of node. To create a [`native`](../api/diagram/node#shape-shapemodel) node, it should be set as **native**. The following code illustrates how a native node is created. +Diagram provides support to embed SVG element into a node. The shape property of node allows you to set the type of node. To create a [`native`](../api/diagram/node/#shape) node, it should be set as **native**. The following code illustrates how a native node is created. {% if page.publishingplatform == "typescript" %} @@ -354,9 +354,9 @@ The following tables illustrates all the possible scale options for the node. ## Basic shapes -* The [`Basic`](../api/diagram/node#shape-shapemodel) shapes are common shapes that are used to represent the geometrical information visually. To create basic shapes, the type of the shape should be set as **basic**. Its shape property can be set with any one of the built-in shape. +* The [`Basic`](../api/diagram/node/#shape) shapes are common shapes that are used to represent the geometrical information visually. To create basic shapes, the type of the shape should be set as **basic**. Its shape property can be set with any one of the built-in shape. -* To render a rounded rectangle, you need to set the type as basic and shape as rectangle. Set the [`cornerRadius`](../api/diagram/shapeStyleModel#cornerRadius-string) property to specify the radius of rounded rectangle. +* To render a rounded rectangle, you need to set the type as basic and shape as rectangle. Set the [`cornerRadius`](../api/diagram/basicShapeModel/#cornerradius) property to specify the radius of rounded rectangle. The following code example illustrates how to create a basic shape. @@ -399,7 +399,7 @@ The list of basic shapes are as follows. ## Path -The [`Path`](../api/diagram/node#shape-shapemodel) shape is a commonly used basic shape that allows visually to represent the geometrical information. As node path data, any geometrical data can be provided. You can create your own Geometry and assign it to data if you want anything different from the standard figures. A geometry does not require any dimension specifications, such as width or height, because it specifies its own size. If the node’s size is set, the geometry is extended to fit the node’s dimensions. +The [`Path`](../api/diagram/node/#shape) shape is a commonly used basic shape that allows visually to represent the geometrical information. As node path data, any geometrical data can be provided. You can create your own Geometry and assign it to data if you want anything different from the standard figures. A geometry does not require any dimension specifications, such as width or height, because it specifies its own size. If the node’s size is set, the geometry is extended to fit the node’s dimensions. To create a path node, specify the shape as Path. The [`data`](../api/diagram/pathModel/#data) property of node allows you to define the path to be drawn. The following code illustrates how a path node is created. @@ -432,7 +432,7 @@ To create a path node, specify the shape as Path. The [`data`](../api/diagram/pa ## Flow Shapes -The [`flow`](../api/diagram/node#shape-shapemodel) shapes are used to represent the process flow. It is used for analyzing, designing, and managing for documentation process. To create a flow shape, specify the shape type as **flow**. Flow shapes and by default, it is considered as **process**. The following code example illustrates how to create a flow shape. +The [`flow`](../api/diagram/node/#shape) shapes are used to represent the process flow. It is used for analyzing, designing, and managing for documentation process. To create a flow shape, specify the shape type as **flow**. Flow shapes and by default, it is considered as **process**. The following code example illustrates how to create a flow shape. {% if page.publishingplatform == "typescript" %} diff --git a/ej2-javascript/diagram/swim-lane.md b/ej2-javascript/diagram/swim-lane.md index 2a114a7aa..815c06b93 100644 --- a/ej2-javascript/diagram/swim-lane.md +++ b/ej2-javascript/diagram/swim-lane.md @@ -86,7 +86,7 @@ The following code example illustrates how to define a swimlane header. ### Customization of headers -The height and width of swimlane header can be customized with [`weight`](../api/diagram/headerModel#width) and [`height`](../api/diagram/headerModel#height) properties of swimlane header. set fill color of header by using the [`style`](../api/diagram/headerModel#style) property. The orientation of swimlane can be customized with the [`orientation`](../api/diagram/swimLaneModel#header) property of the header. +The height and width of swimlane header can be customized with [`width`](../api/diagram/headerModel/#width) and [`height`](../api/diagram/headerModel#height) properties of swimlane header. set fill color of header by using the [`style`](../api/diagram/headerModel#style) property. The orientation of swimlane can be customized with the [`orientation`](../api/diagram/swimLaneModel/#orientation) property of the header. N> By default the swimlane orientation has Horizontal. diff --git a/ej2-javascript/diagram/tool-tip.md b/ej2-javascript/diagram/tool-tip.md index 587a2dce6..b341a9b63 100644 --- a/ej2-javascript/diagram/tool-tip.md +++ b/ej2-javascript/diagram/tool-tip.md @@ -57,7 +57,7 @@ The default tooltip that appears while interacting with nodes can be disabled by ## Tooltip for a specific node/connector -The tooltip can be customized for each node and connector. To show different tooltips for different diagram elements on mouse over, set the [`tooltip`](../api/diagram/diagramTooltipModel/) property of the node or connector with the tooltip [`content`](../aapi/diagram/diagramTooltipModel/#content) and [`position`](../api/diagram/diagramTooltipModel/#position). The following code example illustrates how to customize the tooltip for individual elements. +The tooltip can be customized for each node and connector. To show different tooltips for different diagram elements on mouse over, set the [`tooltip`](../api/diagram/diagramTooltipModel/) property of the node or connector with the tooltip [`content`](../api/diagram/diagramTooltipModel/#content) and [`position`](../api/diagram/diagramTooltipModel/#position). The following code example illustrates how to customize the tooltip for individual elements. {% if page.publishingplatform == "typescript" %}