diff --git a/ej2-javascript-toc.html b/ej2-javascript-toc.html index ae9a158a6..1e560afa3 100644 --- a/ej2-javascript-toc.html +++ b/ej2-javascript-toc.html @@ -1875,6 +1875,7 @@
  • SignatureSelect and SignatureUnselect event
  • Controlling File Downloads
  • Minimum and Maximum Zoom Properties
    • +
  • How to Restrict Zoom Percentage on Mobile Devices
  • Troubleshooting diff --git a/ej2-javascript/code-snippet/diagram/customRuler-cs1/index.js b/ej2-javascript/code-snippet/diagram/customRuler-cs1/index.js index 27796afee..8b61d2f4c 100644 --- a/ej2-javascript/code-snippet/diagram/customRuler-cs1/index.js +++ b/ej2-javascript/code-snippet/diagram/customRuler-cs1/index.js @@ -1,8 +1,23 @@ var diagram = new ej.diagrams.Diagram({ - width: '100%', height: '600px', - rulerSettings: { - showRulers: true, horizontalRuler:{interval:8, segmentWidth:100, thickness:35, tickAlignment:"LeftOrTop"}, verticalRuler:{interval:10, segmentWidth:150, thickness:35, tickAlignment:"RightOrBottom"} - }, -}); -diagram.appendTo('#element'); - + width: '100%', + height: '600px', + rulerSettings: { + showRulers: true, + horizontalRuler: { + interval: 8, + segmentWidth: 100, + thickness: 35, + //Align horizontal ruler tick to the bottom side. + tickAlignment: 'RightOrBottom', + }, + verticalRuler: { + interval: 10, + segmentWidth: 200, + thickness: 35, + //Align vertical ruler tick to the left side. + tickAlignment: 'LeftOrTop', + }, + }, + }); + diagram.appendTo('#element'); + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/customRuler-cs1/index.ts b/ej2-javascript/code-snippet/diagram/customRuler-cs1/index.ts index 8845827db..f581b2571 100644 --- a/ej2-javascript/code-snippet/diagram/customRuler-cs1/index.ts +++ b/ej2-javascript/code-snippet/diagram/customRuler-cs1/index.ts @@ -1,12 +1,23 @@ - - - import { Diagram } from '@syncfusion/ej2-diagrams'; let diagram: Diagram = new Diagram({ - width: '100%', height: '600px', rulerSettings: { - showRulers: true, horizontalRuler:{interval:8, segmentWidth:100, thickness:25, tickAlignment:"LeftOrTop"},verticalRuler:{interval:10, segmentWidth:150, thickness:35, tickAlignment:"RightOrBottom"} - }, - }); - diagram.appendTo('#element'); - - + width: '100%', + height: '600px', + rulerSettings: { + showRulers: true, + horizontalRuler: { + interval: 8, + segmentWidth: 100, + thickness: 25, + //Align horizontal ruler tick to the bottom side. + tickAlignment: 'RightOrBottom', + }, + verticalRuler: { + interval: 10, + segmentWidth: 200, + thickness: 35, + //Align vertical ruler tick to the left side. + tickAlignment: 'LeftOrTop', + }, + }, +}); +diagram.appendTo('#element'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/gridlines-cs3/index.ts b/ej2-javascript/code-snippet/diagram/gridlines-cs3/index.ts index de9ebc74b..9bdf952d2 100644 --- a/ej2-javascript/code-snippet/diagram/gridlines-cs3/index.ts +++ b/ej2-javascript/code-snippet/diagram/gridlines-cs3/index.ts @@ -1,29 +1,34 @@ - - - -import {Diagram,SnapConstraints,SnapSettingsModel,Snapping} from '@syncfusion/ej2-diagrams'; -Diagram.Inject(Snapping); -let snapSettings: SnapSettingsModel = { +import { + Diagram, + SnapConstraints, + SnapSettingsModel, + Snapping, + } from '@syncfusion/ej2-diagrams'; + Diagram.Inject(Snapping); + let snapSettings: SnapSettingsModel = { + // Define the Constraints for gridlines and snapping constraints: SnapConstraints.ShowLines, + gridType: 'Dots', + // Defines the horizontalGridlines for SnapSettings horizontalGridlines: { - // Sets the lineIntervals of Gridlines - lineIntervals: [1.25, 14, 0.25, 15, 0.25, 15, 0.25, 15, 0.25, 15], - lineColor: 'blue', - lineDashArray: '2 2' + // Sets the line color of gridlines + lineColor: 'blue', + // Defines the dot intervals of gridlines + dotIntervals: [3, 20, 1, 20, 1, 20, 1, 20, 1, 20], }, + // Defines the verticalGridlines for SnapSettings verticalGridlines: { - // Sets the lineIntervals of Gridlines - lineIntervals: [1.25, 14, 0.25, 15, 0.25, 15, 0.25, 15, 0.25, 15], - lineColor: 'blue', - lineDashArray: '2 2' - } -}; -let diagram: Diagram = new Diagram({ + // Defines the dot intervals of gridlines + dotIntervals: [3, 20, 1, 20, 1, 20], + // Sets the line color of gridlines + lineColor: 'blue', + }, + }; + let diagram: Diagram = new Diagram({ width: '100%', - height: '500px', - snapSettings: snapSettings -}); -diagram.appendTo('#element'); - - - + height: '700px', + // Define the snap setting for the diagram + snapSettings: snapSettings, + }); + diagram.appendTo('#element'); + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/gridlines-cs6/index.js b/ej2-javascript/code-snippet/diagram/gridlines-cs6/index.js index cfd74e49e..61f37955c 100644 --- a/ej2-javascript/code-snippet/diagram/gridlines-cs6/index.js +++ b/ej2-javascript/code-snippet/diagram/gridlines-cs6/index.js @@ -1,31 +1,44 @@ -let nodes = [{ - id: 'node1', - width: 100, - height: 100, - offsetX: 100, - offsetY: 100, - style: { - strokeColor: '#6BA5D7', - fill: '#6BA5D7' - } -}]; - -var snapSettings = { +let nodes = [ + { + id: 'node1', + style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' }, + width: 100, + height: 100, + offsetX: 100, + offsetY: 100, + }, + { + id: 'node2', + style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' }, + width: 100, + height: 100, + offsetX: 300, + offsetY: 100, + }, + ]; + + var snapSettings = { + // Enable snap to object constraint + constraints: + ej.diagrams.SnapConstraints.SnapToObject | + ej.diagrams.SnapConstraints.ShowLines, + // Sets the Snap object distance snapObjectDistance: 10, - snapAngle: 10, - snapLineColor: 'red' -}; -var diagram = new ej.diagrams.Diagram({ - width: '800px', - height: '500px', - nodes: nodes, - getNodeDefaults: function(node) { + }; + var diagram = new ej.diagrams.Diagram( + { + width: '800px', + height: '500px', + nodes: nodes, + getNodeDefaults: function (node) { node.height = 100; node.width = 100; node.style.fill = '#6BA5D7'; node.style.strokeColor = 'white'; return node; + }, + snapSettings: snapSettings, }, - snapSettings: snapSettings -}, '#element'); - + '#element' + ); + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/gridlines-cs6/index.ts b/ej2-javascript/code-snippet/diagram/gridlines-cs6/index.ts index 73fb16596..e08f20552 100644 --- a/ej2-javascript/code-snippet/diagram/gridlines-cs6/index.ts +++ b/ej2-javascript/code-snippet/diagram/gridlines-cs6/index.ts @@ -1,41 +1,40 @@ - - - -import {Diagram,SnapConstraints,SnapSettingsModel,Snapping,NodeModel} from '@syncfusion/ej2-diagrams'; -Diagram.Inject(Snapping); -let nodes: NodeModel[] = [{ - id: 'node1', - style:{fill:'#6BA5D7',strokeColor:'#6BA5D7'}, - width: 100, - height: 100, - offsetX: 100, - offsetY: 100 -},{ - id: 'node2', - style:{fill:'#6BA5D7',strokeColor:'#6BA5D7'}, - width: 100, - height: 100, - offsetX: 300, - offsetY: 100 -}]; -let snapSettings: SnapSettingsModel = { +import { + Diagram, + SnapConstraints, + SnapSettingsModel, + Snapping, + NodeModel, + } from '@syncfusion/ej2-diagrams'; + Diagram.Inject(Snapping); + let nodes: NodeModel[] = [ + { + id: 'node1', + style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' }, + width: 100, + height: 100, + offsetX: 100, + offsetY: 100, + }, + { + id: 'node2', + style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' }, + width: 100, + height: 100, + offsetX: 300, + offsetY: 100, + }, + ]; + let snapSettings: SnapSettingsModel = { // Enable snap to object constraint - constraints: SnapConstraints.SnapToObject|SnapConstraints.ShowLines, + constraints: SnapConstraints.SnapToObject | SnapConstraints.ShowLines, // Sets the Snap object distance snapObjectDistance: 10, - // Snap Angle for object - snapAngle: 10, - // Set the Snapline color - snapLineColor: 'red' - -}; -let diagram: Diagram = new Diagram({ + }; + let diagram: Diagram = new Diagram({ width: '100%', height: '500px', nodes: nodes, - snapSettings: snapSettings -}); -diagram.appendTo('#element'); - - - + snapSettings: snapSettings, + }); + diagram.appendTo('#element'); + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/gridlines-dots/index.css b/ej2-javascript/code-snippet/diagram/gridlines-dots/index.css new file mode 100644 index 000000000..25baa48fc --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/gridlines-dots/index.css @@ -0,0 +1,18 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue','calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#element { + display: block; +} diff --git a/ej2-javascript/code-snippet/diagram/gridlines-dots/index.js b/ej2-javascript/code-snippet/diagram/gridlines-dots/index.js new file mode 100644 index 000000000..61ea229cc --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/gridlines-dots/index.js @@ -0,0 +1,28 @@ +var snapSettings = { + // Define the Constraints for gridlines and snapping + constraints: ej.diagrams.SnapConstraints.ShowLines, + gridType: 'Dots', + // Defines the horizontalGridlines for SnapSettings + horizontalGridlines: { + // Sets the line color of gridlines + lineColor: 'blue', + // Defines the dot intervals of gridlines + dotIntervals: [3, 20, 1, 20, 1, 20, 1, 20, 1, 20], + }, + // Defines the verticalGridlines for SnapSettings + verticalGridlines: { + // Defines the dot intervals of gridlines + dotIntervals: [3, 20, 1, 20, 1, 20], + // Sets the line color of gridlines + lineColor: 'blue', + }, + }; + var diagram = new ej.diagrams.Diagram( + { + width: '100%', + height: '700px', + snapSettings: snapSettings, + }, + '#element' + ); + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/gridlines-dots/index.ts b/ej2-javascript/code-snippet/diagram/gridlines-dots/index.ts new file mode 100644 index 000000000..1026f7fd6 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/gridlines-dots/index.ts @@ -0,0 +1,27 @@ +import { + Diagram, + SnapConstraints, + SnapSettingsModel, + Snapping, + } from '@syncfusion/ej2-diagrams'; + Diagram.Inject(Snapping); + let snapSettings: SnapSettingsModel = { + constraints: SnapConstraints.ShowLines, + horizontalGridlines: { + // Sets the lineIntervals of Gridlines + lineIntervals: [1.25, 10, 0.25, 10, 0.25, 10, 0.25, 10, 0.25, 10], + lineColor: 'black', + }, + verticalGridlines: { + // Sets the lineIntervals of Gridlines + lineIntervals: [1.25, 10, 0.25, 10, 0.25, 10, 0.25, 10, 0.25, 10], + lineColor: 'black', + }, + }; + let diagram: Diagram = new Diagram({ + width: '100%', + height: '500px', + snapSettings: snapSettings, + }); + diagram.appendTo('#element'); + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/gridlines-dots/js/index.html b/ej2-javascript/code-snippet/diagram/gridlines-dots/js/index.html new file mode 100644 index 000000000..730d62dc9 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/gridlines-dots/js/index.html @@ -0,0 +1,33 @@ + + EJ2 Diagram + + + + + + + + + + + + + + + + + + +
    +
    +
    + + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/gridlines-dots/systemjs.config.js b/ej2-javascript/code-snippet/diagram/gridlines-dots/systemjs.config.js new file mode 100644 index 000000000..52d3cc78f --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/gridlines-dots/systemjs.config.js @@ -0,0 +1,38 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js" + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/gridlines-dots/ts/index.html b/ej2-javascript/code-snippet/diagram/gridlines-dots/ts/index.html new file mode 100644 index 000000000..62d246b58 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/gridlines-dots/ts/index.html @@ -0,0 +1,28 @@ + + + + + EJ2 Diagram + + + + + + + + + + + + + + + + +
    Loading....
    +
    +
    +
    + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/gridlines-snapAngle/index.css b/ej2-javascript/code-snippet/diagram/gridlines-snapAngle/index.css new file mode 100644 index 000000000..25baa48fc --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/gridlines-snapAngle/index.css @@ -0,0 +1,18 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue','calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#element { + display: block; +} diff --git a/ej2-javascript/code-snippet/diagram/gridlines-snapAngle/index.js b/ej2-javascript/code-snippet/diagram/gridlines-snapAngle/index.js new file mode 100644 index 000000000..c313e33a7 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/gridlines-snapAngle/index.js @@ -0,0 +1,40 @@ +let nodes = [ + { + id: 'node1', + width: 100, + height: 100, + offsetX: 100, + offsetY: 100, + style: { + strokeColor: '#6BA5D7', + fill: '#6BA5D7', + }, + }, + ]; + + var snapSettings = { + snapAngle: 20, + }; + var diagram = new ej.diagrams.Diagram( + { + width: '800px', + height: '500px', + getNodeDefaults: function (node) { + node.height = 100; + node.width = 100; + node.style.fill = '#6BA5D7'; + node.style.strokeColor = 'white'; + return node; + }, + nodes: nodes, + snapSettings: snapSettings, + }, + '#element' + ); + + document.getElementById('snapAngle').onchange = (args) => { + //Update snapAngle dynamically + diagram.snapSettings.snapAngle = Number(args.target.value); + diagram.dataBind(); + }; + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/gridlines-snapAngle/index.ts b/ej2-javascript/code-snippet/diagram/gridlines-snapAngle/index.ts new file mode 100644 index 000000000..e37accf99 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/gridlines-snapAngle/index.ts @@ -0,0 +1,34 @@ +import { + Diagram, + SnapSettingsModel, + Snapping, + NodeModel, + } from '@syncfusion/ej2-diagrams'; + Diagram.Inject(Snapping); + let snapSettings: SnapSettingsModel = { + snapAngle: 20, + }; + let nodes: NodeModel[] = [ + { + id: 'node1', + width: 100, + style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' }, + height: 100, + offsetX: 100, + offsetY: 100, + }, + ]; + let diagram: Diagram = new Diagram({ + width: '100%', + height: '500px', + nodes: nodes, + snapSettings: snapSettings, + }); + diagram.appendTo('#element'); + + (document.getElementById('snapAngle') as HTMLInputElement).onchange = (args: any) => { + //Update snapAngle dynamically + diagram.snapSettings.snapAngle = Number(args.target.value); + diagram.dataBind(); + }; + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/gridlines-snapAngle/js/index.html b/ej2-javascript/code-snippet/diagram/gridlines-snapAngle/js/index.html new file mode 100644 index 000000000..1ae0c7659 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/gridlines-snapAngle/js/index.html @@ -0,0 +1,34 @@ + + EJ2 Diagram + + + + + + + + + + + + + + + + + + +
    + +
    +
    + + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/gridlines-snapAngle/systemjs.config.js b/ej2-javascript/code-snippet/diagram/gridlines-snapAngle/systemjs.config.js new file mode 100644 index 000000000..52d3cc78f --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/gridlines-snapAngle/systemjs.config.js @@ -0,0 +1,38 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js" + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/gridlines-snapAngle/ts/index.html b/ej2-javascript/code-snippet/diagram/gridlines-snapAngle/ts/index.html new file mode 100644 index 000000000..389e87940 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/gridlines-snapAngle/ts/index.html @@ -0,0 +1,29 @@ + + + + + EJ2 Diagram + + + + + + + + + + + + + + + + +
    Loading....
    +
    + +
    +
    + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/gridlines-snapLineColor/index.css b/ej2-javascript/code-snippet/diagram/gridlines-snapLineColor/index.css new file mode 100644 index 000000000..25baa48fc --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/gridlines-snapLineColor/index.css @@ -0,0 +1,18 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue','calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#element { + display: block; +} diff --git a/ej2-javascript/code-snippet/diagram/gridlines-snapLineColor/index.js b/ej2-javascript/code-snippet/diagram/gridlines-snapLineColor/index.js new file mode 100644 index 000000000..54e0e89a6 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/gridlines-snapLineColor/index.js @@ -0,0 +1,51 @@ +let nodes = [ + { + id: 'node1', + width: 100, + height: 100, + offsetX: 100, + offsetY: 100, + style: { + strokeColor: '#6BA5D7', + fill: '#6BA5D7', + }, + }, + { + id: 'node2', + width: 100, + height: 100, + offsetX: 300, + offsetY: 100, + style: { + strokeColor: '#6BA5D7', + fill: '#6BA5D7', + }, + }, + ]; + + var snapSettings = { + snapLineColor: '#14AF41', + }; + var diagram = new ej.diagrams.Diagram( + { + width: '800px', + height: '500px', + getNodeDefaults: function (node) { + node.height = 100; + node.width = 100; + node.style.fill = '#6BA5D7'; + node.style.strokeColor = 'white'; + return node; + }, + nodes: nodes, + snapSettings: snapSettings, + }, + '#element' + ); + + document.getElementById('snapLineColor').onchange = (args) => { + //Update snapLineColor dynamically + diagram.snapSettings.snapLineColor = args.target.value; + diagram.dataBind(); + }; + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/gridlines-snapLineColor/index.ts b/ej2-javascript/code-snippet/diagram/gridlines-snapLineColor/index.ts new file mode 100644 index 000000000..235bca6c2 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/gridlines-snapLineColor/index.ts @@ -0,0 +1,42 @@ +import { + Diagram, + SnapSettingsModel, + Snapping, + NodeModel, + } from '@syncfusion/ej2-diagrams'; + Diagram.Inject(Snapping); + let snapSettings: SnapSettingsModel = { + snapLineColor: '#14AF41', + }; + let nodes: NodeModel[] = [ + { + id: 'node1', + width: 100, + style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' }, + height: 100, + offsetX: 100, + offsetY: 100, + }, + { + id: 'node2', + width: 100, + style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' }, + height: 100, + offsetX: 300, + offsetY: 100, + }, + ]; + let diagram: Diagram = new Diagram({ + width: '100%', + height: '500px', + nodes: nodes, + snapSettings: snapSettings, + }); + diagram.appendTo('#element'); + + (document.getElementById('snapLineColor') as HTMLInputElement).onchange = (args: any) => { + //Update snapLineColor dynamically + diagram.snapSettings.snapLineColor = args.target.value; + diagram.dataBind(); + }; + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/gridlines-snapLineColor/js/index.html b/ej2-javascript/code-snippet/diagram/gridlines-snapLineColor/js/index.html new file mode 100644 index 000000000..276c3c91f --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/gridlines-snapLineColor/js/index.html @@ -0,0 +1,35 @@ + + EJ2 Diagram + + + + + + + + + + + + + + + + + + +
    + + +
    +
    + + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/gridlines-snapLineColor/systemjs.config.js b/ej2-javascript/code-snippet/diagram/gridlines-snapLineColor/systemjs.config.js new file mode 100644 index 000000000..52d3cc78f --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/gridlines-snapLineColor/systemjs.config.js @@ -0,0 +1,38 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js" + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/gridlines-snapLineColor/ts/index.html b/ej2-javascript/code-snippet/diagram/gridlines-snapLineColor/ts/index.html new file mode 100644 index 000000000..f5e5ea78b --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/gridlines-snapLineColor/ts/index.html @@ -0,0 +1,30 @@ + + + + + EJ2 Diagram + + + + + + + + + + + + + + + + +
    Loading....
    +
    + + +
    +
    + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/nodes-cs4/index.js b/ej2-javascript/code-snippet/diagram/nodes-cs4/index.js index b2293c992..a80f24a28 100644 --- a/ej2-javascript/code-snippet/diagram/nodes-cs4/index.js +++ b/ej2-javascript/code-snippet/diagram/nodes-cs4/index.js @@ -5,15 +5,26 @@ var node = { // Size of the node width: 100, height: 100, - style: { fill: '#6BA5D7', strokeColor: 'white' }, - pivot: {x: 0, y: 0} - }; - -// initialize Diagram component - -var diagram = new ej.diagrams.Diagram({ - width: '100%', height: '600px', nodes: [node] - }, '#element'); - -diagram.select([diagram.nodes[0]]); - + // Flip the node in Horizontal Direction + flip: 'Horizontal', + shape: { + type: 'Basic', + shape: 'RightTriangle', + }, + style: { + fill: '#6BA5D7', + strokeDashArray: '5,5', + }, + }; + + // initialize Diagram component + + var diagram = new ej.diagrams.Diagram( + { + width: '100%', + height: '600px', + nodes: [node], + }, + '#element' + ); + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/nodes-flipMode/index.css b/ej2-javascript/code-snippet/diagram/nodes-flipMode/index.css new file mode 100644 index 000000000..25baa48fc --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/nodes-flipMode/index.css @@ -0,0 +1,18 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue','calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#element { + display: block; +} diff --git a/ej2-javascript/code-snippet/diagram/nodes-flipMode/index.js b/ej2-javascript/code-snippet/diagram/nodes-flipMode/index.js new file mode 100644 index 000000000..b4beff782 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/nodes-flipMode/index.js @@ -0,0 +1,125 @@ +var nodes = [ + { + id: 'node1', + // Position of the node + offsetX: 100, + offsetY: 100, + // Size of the node + width: 100, + height: 100, + ports: [ + { + id: 'left', + offset: { x: 0, y: 0.5 }, + visibility: ej.diagrams.PortVisibility.Visible, + }, + ], + annotations: [{ content: 'FlipMode as Label' }], + // Flip the node in Horizontal Direction + flip: 'Horizontal', + //FlipMode as Label + flipMode: 'Label', + shape: { + type: 'Basic', + shape: 'RightTriangle', + }, + style: { + fill: '#6BA5D7', + }, + }, + { + id: 'node2', + // Position of the node + offsetX: 300, + offsetY: 100, + // Size of the node + width: 100, + height: 100, + annotations: [{ content: 'FlipMode as Port' }], + // Flip the node in Horizontal Direction + flip: 'Horizontal', + ports: [ + { + id: 'left', + offset: { x: 0, y: 0.5 }, + visibility: ej.diagrams.PortVisibility.Visible, + }, + ], + //FlipMode as Port + flipMode: 'Port', + shape: { + type: 'Basic', + shape: 'RightTriangle', + }, + style: { + fill: '#6BA5D7', + }, + }, + { + id: 'node3', + // Position of the node + offsetX: 100, + offsetY: 300, + // Size of the node + width: 100, + height: 100, + annotations: [{ content: 'FlipMode as All' }], + // Flip the node in Horizontal Direction + flip: 'Horizontal', + ports: [ + { + id: 'left', + offset: { x: 0, y: 0.5 }, + visibility: ej.diagrams.PortVisibility.Visible, + }, + ], + //FlipMode as All + flipMode: 'All', + shape: { + type: 'Basic', + shape: 'RightTriangle', + }, + style: { + fill: '#6BA5D7', + }, + }, + { + id: 'node4', + // Position of the node + offsetX: 300, + offsetY: 300, + // Size of the node + width: 100, + height: 100, + annotations: [{ content: 'FlipMode as None' }], + // Flip the node in Horizontal Direction + flip: 'Horizontal', + ports: [ + { + id: 'left', + offset: { x: 0, y: 0.5 }, + visibility: ej.diagrams.PortVisibility.Visible, + }, + ], + //FlipMode as None + flipMode: 'None', + shape: { + type: 'Basic', + shape: 'RightTriangle', + }, + style: { + fill: '#6BA5D7', + }, + }, +]; + +// initialize Diagram component + +var diagram = new ej.diagrams.Diagram( + { + width: '100%', + height: '600px', + nodes: nodes, + }, + '#element' +); diff --git a/ej2-javascript/code-snippet/diagram/nodes-flipMode/index.ts b/ej2-javascript/code-snippet/diagram/nodes-flipMode/index.ts new file mode 100644 index 000000000..1d3d78f49 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/nodes-flipMode/index.ts @@ -0,0 +1,125 @@ +import { Diagram, NodeModel, PortVisibility } from '@syncfusion/ej2-diagrams'; +// A node is created and stored in nodes array. +let nodes: NodeModel[] = [ + { + id: 'node1', + // Position of the node + offsetX: 100, + offsetY: 100, + // Size of the node + width: 100, + height: 100, + ports: [ + { + id: 'left', + offset: { x: 0, y: 0.5 }, + visibility: PortVisibility.Visible, + }, + ], + annotations: [{ content: 'FlipMode as Label' }], + // Flip the node in Horizontal Direction + flip: 'Horizontal', + //FlipMode as Label + flipMode: 'Label', + shape: { + type: 'Basic', + shape: 'RightTriangle', + }, + style: { + fill: '#6BA5D7', + }, + }, + { + id: 'node2', + // Position of the node + offsetX: 300, + offsetY: 100, + // Size of the node + width: 100, + height: 100, + annotations: [{ content: 'FlipMode as Port' }], + // Flip the node in Horizontal Direction + flip: 'Horizontal', + ports: [ + { + id: 'left', + offset: { x: 0, y: 0.5 }, + visibility: PortVisibility.Visible, + }, + ], + //FlipMode as Port + flipMode: 'Port', + shape: { + type: 'Basic', + shape: 'RightTriangle', + }, + style: { + fill: '#6BA5D7', + }, + }, + { + id: 'node3', + // Position of the node + offsetX: 100, + offsetY: 300, + // Size of the node + width: 100, + height: 100, + annotations: [{ content: 'FlipMode as All' }], + // Flip the node in Horizontal Direction + flip: 'Horizontal', + ports: [ + { + id: 'left', + offset: { x: 0, y: 0.5 }, + visibility: PortVisibility.Visible, + }, + ], + //FlipMode as All + flipMode: 'All', + shape: { + type: 'Basic', + shape: 'RightTriangle', + }, + style: { + fill: '#6BA5D7', + }, + }, + { + id: 'node4', + // Position of the node + offsetX: 300, + offsetY: 300, + // Size of the node + width: 100, + height: 100, + annotations: [{ content: 'FlipMode as None' }], + // Flip the node in Horizontal Direction + flip: 'Horizontal', + ports: [ + { + id: 'left', + offset: { x: 0, y: 0.5 }, + visibility: PortVisibility.Visible, + }, + ], + //FlipMode as None + flipMode: 'None', + shape: { + type: 'Basic', + shape: 'RightTriangle', + }, + style: { + fill: '#6BA5D7', + }, + }, +]; +// initialize Diagram component +let diagram: Diagram = new Diagram({ + width: '100%', + height: '600px', + // Add node + nodes: nodes, +}); +// render initialized Diagram +diagram.appendTo('#element'); diff --git a/ej2-javascript/code-snippet/diagram/nodes-flipMode/js/index.html b/ej2-javascript/code-snippet/diagram/nodes-flipMode/js/index.html new file mode 100644 index 000000000..730d62dc9 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/nodes-flipMode/js/index.html @@ -0,0 +1,33 @@ + + EJ2 Diagram + + + + + + + + + + + + + + + + + + +
    +
    +
    + + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/nodes-flipMode/systemjs.config.js b/ej2-javascript/code-snippet/diagram/nodes-flipMode/systemjs.config.js new file mode 100644 index 000000000..52d3cc78f --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/nodes-flipMode/systemjs.config.js @@ -0,0 +1,38 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js" + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/nodes-flipMode/ts/index.html b/ej2-javascript/code-snippet/diagram/nodes-flipMode/ts/index.html new file mode 100644 index 000000000..62d246b58 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/nodes-flipMode/ts/index.html @@ -0,0 +1,28 @@ + + + + + EJ2 Diagram + + + + + + + + + + + + + + + + +
    Loading....
    +
    +
    +
    + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/overview-create/index.css b/ej2-javascript/code-snippet/diagram/overview-create/index.css new file mode 100644 index 000000000..25baa48fc --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/overview-create/index.css @@ -0,0 +1,18 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue','calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#element { + display: block; +} diff --git a/ej2-javascript/code-snippet/diagram/overview-create/index.js b/ej2-javascript/code-snippet/diagram/overview-create/index.js new file mode 100644 index 000000000..9f73786bf --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/overview-create/index.js @@ -0,0 +1,23 @@ +/** + * OverView + */ + + // Initializtion of the diagram. + let diagram = new ej.diagrams.Diagram({ + width: '100%', + height: '790px', + nodes: [{ id: 'node1', offsetX: 400, offsetY: 400, height: 100, width: 200 }], + scrollSettings: { scrollLimit: 'Diagram' }, + // Sets the constraints of the SnapSettings + snapSettings: { constraints: ej.diagrams.SnapConstraints.None }, + }); + diagram.appendTo('#element'); + + // Initializtion of the Overview. + let overview = new ej.diagrams.Overview({ + width: '300px', + height: '150ppx', + sourceID: 'element', + }); + overview.appendTo('#overview'); + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/overview-create/index.ts b/ej2-javascript/code-snippet/diagram/overview-create/index.ts new file mode 100644 index 000000000..0c1cc3179 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/overview-create/index.ts @@ -0,0 +1,24 @@ +/** + * OverView + */ + +import { Diagram, Overview, SnapConstraints } from '@syncfusion/ej2-diagrams'; + +// Initializtion of the diagram. +let diagram: Diagram = new Diagram({ + width: '100%', + height: '790px', + nodes: [{ id: 'node1', offsetX: 400, offsetY: 400, height: 100, width: 200 }], + scrollSettings: { scrollLimit: 'Diagram' }, + // Sets the constraints of the SnapSettings + snapSettings: { constraints: SnapConstraints.None }, +}); +diagram.appendTo('#element'); + +// Initializtion of the Overview. +let overview: Overview = new Overview({ + width: '300px', + height: '150ppx', + sourceID: 'element', +}); +overview.appendTo('#overview'); diff --git a/ej2-javascript/code-snippet/diagram/overview-create/js/index.html b/ej2-javascript/code-snippet/diagram/overview-create/js/index.html new file mode 100644 index 000000000..5180303a4 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/overview-create/js/index.html @@ -0,0 +1,44 @@ + + EJ2 Diagram + + + + + + + + + + + + + + + + + + +
    +
    +
    +
    + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/overview-create/systemjs.config.js b/ej2-javascript/code-snippet/diagram/overview-create/systemjs.config.js new file mode 100644 index 000000000..52d3cc78f --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/overview-create/systemjs.config.js @@ -0,0 +1,38 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js" + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/overview-create/ts/index.html b/ej2-javascript/code-snippet/diagram/overview-create/ts/index.html new file mode 100644 index 000000000..4990603db --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/overview-create/ts/index.html @@ -0,0 +1,42 @@ + + + + + EJ2 Diagram + + + + + + + + + + + + + + + + +
    Loading....
    +
    +
    +
    +
    + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/overview-cs1/index.js b/ej2-javascript/code-snippet/diagram/overview-cs1/index.js index 54b08ab18..2ceb4983b 100644 --- a/ej2-javascript/code-snippet/diagram/overview-cs1/index.js +++ b/ej2-javascript/code-snippet/diagram/overview-cs1/index.js @@ -1,101 +1,93 @@ -ej.diagrams.Diagram.Inject(ej.diagrams.DataBinding, ej.diagrams.HierarchicalTree); -// A node is created and stored in nodes array. -var data = [ - { - 'Id': 'parent', 'Name': 'Maria Anders', 'Designation': 'Managing Director', - 'ImageUrl': '../content/images/orgchart/Clayton.png', 'IsExpand': 'true', 'RatingColor': '#C34444' - }, - { - 'Id': 1, 'Name': 'Ana Trujillo', 'Designation': 'Project Manager', - 'ImageUrl': '../content/images/orgchart/Thomas.PNG', 'IsExpand': 'false', - 'RatingColor': '#68C2DE', 'ReportingPerson': 'parent' - }, - { - 'Id': 2, 'Name': 'Anto Moreno', 'Designation': 'Project Lead', - 'ImageUrl': '../content/images/orgchart/image53.png', 'IsExpand': 'false', - 'RatingColor': '#93B85A', 'ReportingPerson': 'parent' - }, - { - 'Id': 3, 'Name': 'Thomas Hardy', 'Designation': 'Senior S/w Engg', - 'ImageUrl': '../content/images/orgchart/image57.png', 'IsExpand': 'false', - 'RatingColor': '#68C2DE', 'ReportingPerson': 1 +ej.diagrams.Diagram.Inject( + ej.diagrams.DataBinding, + ej.diagrams.HierarchicalTree, + ej.diagrams.LayoutAnimation + ); + /** + * hierarchical-model + */ + //Click event for Appearance of the Property Panel. + + //sets node default value + function nodeDefaults(obj, diagram) { + obj.style = { + fill: '#659be5', + strokeColor: 'none', + color: 'white', + strokeWidth: 2, + }; + obj.borderColor = '#3a6eb5'; + obj.backgroundColor = '#659be5'; + obj.width = 150; + obj.height = 50; + obj.expandIcon = { + height: 10, + width: 10, + shape: 'None', + fill: 'lightgray', + offset: { x: 0.5, y: 1 }, + }; + obj.expandIcon.verticalAlignment = 'Auto'; + obj.expandIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 }; + obj.collapseIcon.offset = { x: 0.5, y: 1 }; + obj.collapseIcon.verticalAlignment = 'Auto'; + obj.collapseIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 }; + obj.collapseIcon.height = 10; + obj.collapseIcon.width = 10; + obj.collapseIcon.padding.top = 5; + obj.collapseIcon.shape = 'None'; + obj.collapseIcon.fill = 'lightgray'; + return obj; + } + //sets connector default value + function connectorDefaults(connector, diagram) { + connector.targetDecorator.shape = 'None'; + connector.type = 'Orthogonal'; + connector.style.strokeColor = '#6d6d6d'; + connector.constraints = 0; + connector.cornerRadius = 5; + return connector; + } + + // tslint:disable-next-line:max-func-body-length + + //Initializes the nodes for the diagram + var diagram = new ej.diagrams.Diagram({ + width: '100%', + height: '499px', + snapSettings: { constraints: ej.diagrams.SnapConstraints.None }, + //configures data source settings + dataSourceSettings: { + id: 'Name', + parentId: 'Category', + dataSource: new ej.data.DataManager(window.hierarchicalTree), + doBinding: function (nodeModel, data, diagram) { + nodeModel.shape = { type: 'Text', content: data.Name }; + }, }, - { - 'Id': 4, 'Name': 'Christina kaff', 'Designation': 'S/w Engg', - 'ImageUrl': '../content/images/orgchart/Robin.png', 'IsExpand': 'false', - 'RatingColor': '#93B85A', 'ReportingPerson': 3 - }] -var items = new ej.data.DataManager(data , new ej.data.Query().take(7)); -var overview; -var diagram = new ej.diagrams.Diagram({ - snapSettings: { constraints: 0 }, + //Disables all interactions except zoom/pan + tool: ej.diagrams.DiagramTools.ZoomPan, + //Configures automatic layout layout: { - type: 'OrganizationalChart', margin: { top: 20 }, - getLayoutInfo: (node, tree) => { - if (!tree.hasSubTree) { - tree.orientation = 'Vertical'; - tree.type = 'Alternate'; - } - } + type: 'HierarchicalTree', + verticalSpacing: 30, + horizontalSpacing: 40, + enableAnimation: true, }, - dataSourceSettings: { - id: 'Id', parentId: 'ReportingPerson', dataManager: items + //Defines the default node and connector properties + getNodeDefaults: function (obj, diagram) { + return nodeDefaults(obj, diagram); }, - - getNodeDefaults: (obj) => { - obj.height = 50; - obj.backgroundColor = 'lightgrey'; - obj.style = { fill: 'transparent', strokeWidth: 2 }; - return obj; - }, getConnectorDefaults: (connector) => { - connector.targetDecorator.shape = 'None'; - connector.type = 'Orthogonal'; - return connector; + getConnectorDefaults: function (connector, diagram) { + return connectorDefaults(connector, diagram); }, - - setNodeTemplate: (obj) => { - var content = new ej.diagrams.StackPanel(); - content.id = obj.id + '_outerstack'; - content.style.strokeColor = 'darkgreen'; - content.orientation = 'Horizontal'; - content.padding = { left: 5, right: 10, top: 5, bottom: 5 }; - var image = new ej.diagrams.ImageElement(); - image.width = 50; - image.height = 50; - image.style.strokeColor = 'none'; - image.source = './employee.PNG'; - image.id = obj.id + '_pic'; - var innerStack = new ej.diagrams.StackPanel(); - innerStack.style.strokeColor = 'none'; - innerStack.margin = { left: 5, right: 0, top: 0, bottom: 0 }; - innerStack.id = obj.id + '_innerstack'; - - var text = new ej.diagrams.TextElement(); - text.content = obj.data['Name']; - - text.style.color = 'blue'; - text.style.strokeColor = 'none'; - text.style.fill = 'none'; - text.id = obj.id + '_text1'; - - var desigText = new ej.diagrams.TextElement(); - desigText.margin = { left: 0, right: 0, top: 5, bottom: 0 }; - desigText.content = obj.data['Designation']; - desigText.style.color = 'blue'; - desigText.style.strokeColor = 'none'; - desigText.style.fill = 'none'; - desigText.style.textWrapping = 'Wrap'; - desigText.id = obj.id + '_desig'; - innerStack.children = [text, desigText]; - - content.children = [image, innerStack]; - - return content; - } -}); -diagram.appendTo('#element'); -overview = new ej.diagrams.Overview({ - sourceID: 'element' -}); - overview.appendTo('#overview'); - + }); + diagram.appendTo('#element'); + // Initializtion of the Overview. + let overview = new ej.diagrams.Overview({ + width: '100%', + height: '250px', + sourceID: 'element', + }); + overview.appendTo('#overview'); + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/overview-cs1/index.ts b/ej2-javascript/code-snippet/diagram/overview-cs1/index.ts index e54c1e0fb..1c9e4a9cc 100644 --- a/ej2-javascript/code-snippet/diagram/overview-cs1/index.ts +++ b/ej2-javascript/code-snippet/diagram/overview-cs1/index.ts @@ -1,173 +1,155 @@ - - +/** + * hierarchical-model + */ import { Diagram, + NodeModel, ConnectorModel, - Overview, - OverviewModel -} from '@syncfusion/ej2-diagrams'; -import { - DataManager, - Query -} from '@syncfusion/ej2-data'; -import { - TreeInfo, - Node, - StackPanel, - ImageElement, - Container, - TextElement, + LayoutAnimation, DataBinding, - HierarchicalTree -} from '@syncfusion/ej2-diagrams'; -/** - * Overview - */ -let diagram: Diagram; -let overview: Overview; -Diagram.Inject(DataBinding, HierarchicalTree); -let data: object[] = [{ - 'Id': 'parent', - 'Name': 'Maria Anders', - 'Designation': 'Managing Director', - 'IsExpand': 'true', - 'RatingColor': '#C34444' + HierarchicalTree, + SnapConstraints, + DiagramTools, + Overview, + } from '@syncfusion/ej2-diagrams'; + import { DataManager } from '@syncfusion/ej2-data'; + Diagram.Inject(DataBinding, HierarchicalTree, LayoutAnimation); + + export interface EmployeeInfo { + Name: string; + } + let hierarchicalTree: object = [ + { + Name: 'Diagram', + fillColor: '#916DAF', }, { - 'Id': 1, - 'Name': 'Ana Trujillo', - 'Designation': 'Project Manager', - 'IsExpand': 'false', - 'RatingColor': '#68C2DE', - 'ReportingPerson': 'parent' + Name: 'Layout', + Category: 'Diagram', }, { - 'Id': 2, - 'Name': 'Anto Moreno', - 'Designation': 'Project Lead', - 'IsExpand': 'false', - 'RatingColor': '#93B85A', - 'ReportingPerson': 'parent' + Name: 'Tree Layout', + Category: 'Layout', }, { - 'Id': 3, - 'Name': 'Thomas Hardy', - 'Designation': 'Senior S/w Engg', - 'IsExpand': 'false', - 'RatingColor': '#68C2DE', - 'ReportingPerson': 1 + Name: 'Organizational Chart', + Category: 'Layout', }, { - 'Id': 4, - 'Name': 'Christina kaff', - 'Designation': 'S/w Engg', - 'IsExpand': 'false', - 'RatingColor': '#93B85A', - 'ReportingPerson': 2 + Name: 'Hierarchical Tree', + Category: 'Tree Layout', }, { - 'Id': 5, - 'Name': 'Hanna Moos', - 'Designation': 'Project Trainee', - 'IsExpand': 'true', - 'RatingColor': '#D46E89', - 'ReportingPerson': 2 + Name: 'Radial Tree', + Category: 'Tree Layout', }, -]; -let items: DataManager = new DataManager(data as JSON[], new Query().take(7)); -// Initializes the diagram control -diagram = new Diagram({ - snapSettings: { - constraints: 0 + { + Name: 'Mind Map', + Category: 'Hierarchical Tree', }, - layout: { - type: 'OrganizationalChart', - margin: { - top: 20 - }, - getLayoutInfo: (node: Node, tree: TreeInfo) => { - if (!tree.hasSubTree) { - tree.orientation = 'Vertical'; - tree.type = 'Alternate'; - } - } + { + Name: 'Family Tree', + Category: 'Hierarchical Tree', }, - dataSourceSettings: { - id: 'Id', - parentId: 'ReportingPerson', - dataManager: items + { + Name: 'Management', + Category: 'Organizational Chart', }, -   getNodeDefaults: (node: NodeModel) => { - node.height = 50; - node.style.fill =  '#6BA5D7'; - node.style.borderColor = 'white'; - node.style.strokeColor =  'white'; - return  node; + { + Name: 'Human Resources', + Category: 'Management', }, -     getConnectorDefaults: (obj: ConnectorModel): ConnectorModel => { - obj.style.strokeColor =  '#6BA5D7'; - obj.style.fill =  '#6BA5D7'; - obj.style.strokeWidth =  2; - obj.targetDecorator.style.fill =  '#6BA5D7'; - obj.targetDecorator.style.strokeColor =  '#6BA5D7'; - obj.targetDecorator.shape = 'None'; - obj.type = 'Orthogonal'; - return  obj; + { + Name: 'University', + Category: 'Management', }, - setNodeTemplate: (obj: Node, diagram: Diagram): Container => { - let content: StackPanel = new StackPanel(); - content.id = obj.id + '_outerstack'; - content.style.strokeColor = 'darkgreen'; - content.style.fill = '#6BA5D7'; - content.orientation = 'Horizontal'; - content.padding = { - left: 5, - right: 10, - top: 5, - bottom: 5 - }; - let innerStack: StackPanel = new StackPanel(); - innerStack.style.strokeColor = 'none'; - innerStack.style.fill = '#6BA5D7'; - innerStack.margin = { - left: 5, - right: 0, - top: 0, - bottom: 0 - }; - innerStack.id = obj.id + '_innerstack'; - let text: TextElement = new TextElement(); - text.content = obj.data['Name']; - text.style.color = 'white'; - text.style.strokeColor = 'none'; - text.style.fill = 'none'; - text.id = obj.id + '_text1'; - let desigText: TextElement = new TextElement(); - desigText.margin = { - left: 0, - right: 0, - top: 5, - bottom: 0 - }; - desigText.content = obj.data['Designation']; - desigText.style.color = 'white'; - desigText.style.strokeColor = 'none'; - desigText.style.fill = 'none'; - desigText.style.textWrapping = 'Wrap'; - desigText.id = obj.id + '_desig'; - innerStack.children = [text, desigText]; - content.children = [innerStack]; - return content; - } -}); -diagram.appendTo('#element'); -// Initializes the overview control -let options: OverviewModel = {}; -// Relates diagram with overview -options.sourceID = 'element'; -overview = new Overview(options); -overview.appendTo('#overview'); - - - + { + Name: 'Business', + Category: 'Management', + }, + ]; + //sets node default value + function nodeDefaults(obj: NodeModel): NodeModel { + obj.style = { + fill: '#659be5', + strokeColor: 'none', + color: 'white', + strokeWidth: 2, + }; + obj.width = 150; + obj.height = 50; + obj.borderColor = '#3a6eb5'; + obj.backgroundColor = '#659be5'; + obj.expandIcon = { + height: 10, + width: 10, + shape: 'None', + fill: 'lightgray', + offset: { x: 0.5, y: 1 }, + }; + obj.expandIcon.verticalAlignment = 'Auto'; + obj.expandIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 }; + obj.collapseIcon.offset = { x: 0.5, y: 1 }; + obj.collapseIcon.verticalAlignment = 'Auto'; + obj.collapseIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 }; + obj.collapseIcon.height = 10; + obj.collapseIcon.width = 10; + obj.collapseIcon.padding.top = 5; + obj.collapseIcon.shape = 'None'; + obj.collapseIcon.fill = 'lightgray'; + return obj; + } + + function connectorDefaults( + connector: ConnectorModel, + diagram: Diagram + ): ConnectorModel { + connector.targetDecorator.shape = 'None'; + connector.type = 'Orthogonal'; + connector.style.strokeColor = '#6d6d6d'; + connector.cornerRadius = 5; + return connector; + } + + // tslint:disable-next-line:max-func-body-length + + //Initializes the nodes for the diagram + let diagram: Diagram = new Diagram({ + width: '100%', + height: '499px', + snapSettings: { constraints: SnapConstraints.None }, + //configures data source settings + dataSourceSettings: { + //sets the fields to bind + id: 'Name', + parentId: 'Category', + dataSource: new DataManager(hierarchicalTree), + //binds the data with the nodes + doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => { + nodeModel.shape = { type: 'Text', content: (data as EmployeeInfo).Name }; + }, + }, + //Disables all interactions except zoom/pan + tool: DiagramTools.ZoomPan, + //Configures automatic layout + layout: { + type: 'HierarchicalTree', + verticalSpacing: 30, + horizontalSpacing: 40, + enableAnimation: true, + }, + //Defines the default node and connector properties + getNodeDefaults: nodeDefaults, + getConnectorDefaults: connectorDefaults, + }); + diagram.appendTo('#element'); + + // Initializtion of the Overview. + let overview: Overview = new Overview({ + width: '100%', + height: '250px', + sourceID: 'element', + }); + overview.appendTo('#overview'); + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/overview-cs1/js/index.html b/ej2-javascript/code-snippet/diagram/overview-cs1/js/index.html index 046884605..0e05bf66c 100644 --- a/ej2-javascript/code-snippet/diagram/overview-cs1/js/index.html +++ b/ej2-javascript/code-snippet/diagram/overview-cs1/js/index.html @@ -18,15 +18,24 @@ -
    -
    +
    -
    -
    -
    - - -
    + + + + +
    +
    +
    + + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/ruler-cs2/systemjs.config.js b/ej2-javascript/code-snippet/diagram/ruler-cs2/systemjs.config.js new file mode 100644 index 000000000..52d3cc78f --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/ruler-cs2/systemjs.config.js @@ -0,0 +1,38 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js" + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/ruler-cs2/ts/index.html b/ej2-javascript/code-snippet/diagram/ruler-cs2/ts/index.html new file mode 100644 index 000000000..f002fc960 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/ruler-cs2/ts/index.html @@ -0,0 +1,28 @@ + + + + + EJ2 Diagram + + + + + + + + + + + + + + + + +
    Loading....
    +
    +
    +
    + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/tooltip-cs1/index.js b/ej2-javascript/code-snippet/diagram/tooltip-cs1/index.js index d5996e1c8..887e6cba0 100644 --- a/ej2-javascript/code-snippet/diagram/tooltip-cs1/index.js +++ b/ej2-javascript/code-snippet/diagram/tooltip-cs1/index.js @@ -4,38 +4,65 @@ var diagram; var node = { - id: "node1", - width: 100, - height: 100, - annotations: [{ - id: 'label', - content: 'Rectangle', - offset: { - x: 0.5, - y: 0.5 - }, - style: { - color: 'white' - } - }], - offsetX: 200, - offsetY: 200, - style: { - strokeColor: '#6BA5D7', - fill: '#6BA5D7' + id: 'node1', + width: 100, + height: 100, + annotations: [ + { + id: 'label', + content: 'Rectangle', + offset: { + x: 0.5, + y: 0.5, + }, + style: { + color: 'white', + }, }, - constraints: ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.Tooltip, + ], + offsetX: 200, + offsetY: 200, + style: { + strokeColor: '#6BA5D7', + fill: '#6BA5D7', + }, + constraints: + ej.diagrams.NodeConstraints.Default | + ej.diagrams.NodeConstraints.InheritTooltip, + //Defines mouse over tooltip + tooltip: { + content: 'Node', + position: 'TopLeft', + }, }; -diagram = new ej.diagrams.Diagram({ +let connector = { + id: 'con1', + sourcePoint: { x: 200, y: 100 }, + targetPoint: { x: 400, y: 250 }, + tooltip: { content: 'connector' }, + constraints: + ej.diagrams.ConnectorConstraints.Default | + ej.diagrams.ConnectorConstraints.InheritTooltip, +}; +diagram = new ej.diagrams.Diagram( + { width: '650px', height: '350px', - constraints: ej.diagrams.DiagramConstraints.Default | ej.diagrams.DiagramConstraints.Tooltip, + constraints: + ej.diagrams.DiagramConstraints.Default | + ej.diagrams.DiagramConstraints.Tooltip, nodes: [node], - - //Defines mouse over tooltip + connectors: [connector], + //Defines mouse over tooltip for a node tooltip: { - content: 'Nodes', - position: 'TopLeft' - } -}, '#element'); + //Sets the content of the tooltip + content: 'DiagramToolTip', + //Sets the position of the tooltip + position: 'BottomRight', + //Sets the tooltip position relative to the node + relativeMode: 'Object', + }, + }, + '#element' +); diff --git a/ej2-javascript/code-snippet/diagram/tooltip-cs1/index.ts b/ej2-javascript/code-snippet/diagram/tooltip-cs1/index.ts index 683709d71..11fd3d6b2 100644 --- a/ej2-javascript/code-snippet/diagram/tooltip-cs1/index.ts +++ b/ej2-javascript/code-snippet/diagram/tooltip-cs1/index.ts @@ -1,51 +1,68 @@ - - - import { + ConnectorConstraints, Diagram, - NodeModel, DiagramConstraints, - NodeConstraints -} from '@syncfusion/ej2-diagrams'; -import { - NodeAnimationSettings -} from '@syncfusion/ej2-navigations'; - -//Initializes the diagram component -let diagram: Diagram = new Diagram({ - width: '100%', - height: '350px', - constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip, - //Defines nodes - nodes: [{ - id: "node1", - width: 100, - height: 100, - annotations: [{ - id: 'label', - content: 'Rectangle', - offset: { + NodeConstraints, + } from '@syncfusion/ej2-diagrams'; + let connector = { + id: 'con1', + sourcePoint: { x: 200, y: 100 }, + targetPoint: { x: 400, y: 250 }, + tooltip: { content: 'connector' }, + constraints: + ConnectorConstraints.Default | ConnectorConstraints.InheritTooltip, + }; + //Initializes the diagram component + let diagram: Diagram = new Diagram( + { + width: '100%', + height: '350px', + constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip, + //Defines nodes + nodes: [ + { + id: 'node1', + width: 100, + height: 100, + annotations: [ + { + id: 'label', + content: 'Rectangle', + offset: { x: 0.5, - y: 0.5 + y: 0.5, + }, + style: { + color: 'white', + }, }, - style: { - color: 'white' - } - }], - offsetX: 200, - offsetY: 200, - style: { + ], + offsetX: 200, + offsetY: 200, + style: { strokeColor: '#6BA5D7', - fill: '#6BA5D7' + fill: '#6BA5D7', + }, + //To inherit diagram tooltip + constraints: NodeConstraints.Default | NodeConstraints.InheritTooltip, + //Defines mouse over tooltip for a node + tooltip: { + //Sets the content of the tooltip + content: 'Node', + }, }, - constraints: NodeConstraints.Default | NodeConstraints.Tooltip, - }], - //Defines mouse over tooltip - tooltip: { - content: 'Nodes', - position: 'TopLeft' - } -}, '#element'); - - - + ], + connectors: [connector], + //Defines mouse over tooltip for a node + tooltip: { + //Sets the content of the tooltip + content: 'DiagramToolTip', + //Sets the position of the tooltip + position: 'BottomRight', + //Sets the tooltip position relative to the node + relativeMode: 'Object', + }, + }, + '#element' + ); + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/tooltip-cs2/index.js b/ej2-javascript/code-snippet/diagram/tooltip-cs2/index.js index 0a845a065..f6a3430f3 100644 --- a/ej2-javascript/code-snippet/diagram/tooltip-cs2/index.js +++ b/ej2-javascript/code-snippet/diagram/tooltip-cs2/index.js @@ -4,41 +4,55 @@ var diagram; var node = { - id: "node1", - width: 100, - height: 100, - annotations: [{ - id: 'label', - content: 'Rectangle', - offset: { - x: 0.5, - y: 0.5 - }, - style: { - color: 'white' - } - }], - offsetX: 200, - offsetY: 200, - style: { - strokeColor: '#6BA5D7', - fill: '#6BA5D7' - }, - constraints: ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.Tooltip, - //Defines mouse over tooltip for a node - tooltip: { - //Sets the content of the Tooltip - content: 'Node1', - //Sets the position of the Tooltip - position: 'BottomRight', - //Sets the tooltip position relative to the node - relativeMode: 'Object' + id: 'node1', + width: 100, + height: 100, + annotations: [ + { + id: 'label', + content: 'Rectangle', + offset: { + x: 0.5, + y: 0.5, + }, + style: { + color: 'white', + }, }, + ], + offsetX: 200, + offsetY: 200, + style: { + strokeColor: '#6BA5D7', + fill: '#6BA5D7', + }, + constraints: + ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.Tooltip, + //Defines mouse over tooltip + tooltip: { + content: 'Node', + position: 'TopLeft', + }, +}; +let connector = { + id: 'con1', + sourcePoint: { x: 200, y: 100 }, + targetPoint: { x: 400, y: 250 }, + tooltip: { content: 'connector' }, + constraints: + ej.diagrams.ConnectorConstraints.Default | + ej.diagrams.ConnectorConstraints.Tooltip, }; -diagram = new ej.diagrams.Diagram({ +diagram = new ej.diagrams.Diagram( + { width: '650px', height: '350px', - constraints: ej.diagrams.DiagramConstraints.Default | ej.diagrams.DiagramConstraints.Tooltip, + constraints: + ej.diagrams.DiagramConstraints.Default | + ej.diagrams.DiagramConstraints.Tooltip, nodes: [node], -}, '#element'); + connectors: [connector], + }, + '#element' +); diff --git a/ej2-javascript/code-snippet/diagram/tooltip-cs2/index.ts b/ej2-javascript/code-snippet/diagram/tooltip-cs2/index.ts index 8fe4eee3b..a2e032f6e 100644 --- a/ej2-javascript/code-snippet/diagram/tooltip-cs2/index.ts +++ b/ej2-javascript/code-snippet/diagram/tooltip-cs2/index.ts @@ -1,55 +1,57 @@ - - - import { + ConnectorConstraints, Diagram, - NodeModel, DiagramConstraints, - NodeConstraints -} from '@syncfusion/ej2-diagrams'; -import { - NodeAnimationSettings -} from '@syncfusion/ej2-navigations'; - -//Initializes the diagram component -let diagram: Diagram = new Diagram({ - width: '100%', - height: '350px', - constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip, - //Defines nodes - nodes: [{ - id: "node1", - width: 100, - height: 100, - annotations: [{ - id: 'label', - content: 'Rectangle', - offset: { + NodeConstraints, + } from '@syncfusion/ej2-diagrams'; + let connector = { + id: 'con1', + sourcePoint: { x: 200, y: 100 }, + targetPoint: { x: 400, y: 250 }, + tooltip: { content: 'connector' }, + constraints: ConnectorConstraints.Default | ConnectorConstraints.Tooltip, + }; + //Initializes the diagram component + let diagram: Diagram = new Diagram( + { + width: '100%', + height: '350px', + //Defines nodes + nodes: [ + { + id: 'node1', + width: 100, + height: 100, + annotations: [ + { + id: 'label', + content: 'Rectangle', + offset: { x: 0.5, - y: 0.5 + y: 0.5, + }, + style: { + color: 'white', + }, }, - style: { - color: 'white' - } - }], - offsetX: 200, - offsetY: 200, - style: { + ], + offsetX: 200, + offsetY: 200, + style: { strokeColor: '#6BA5D7', - fill: '#6BA5D7' - }, - constraints: NodeConstraints.Default | NodeConstraints.Tooltip, - //Defines mouse over tooltip for a node - tooltip: { + fill: '#6BA5D7', + }, + //To inherit diagram tooltip + constraints: NodeConstraints.Default | NodeConstraints.Tooltip, + //Defines mouse over tooltip for a node + tooltip: { //Sets the content of the tooltip - content: 'Node1', - //Sets the position of the tooltip - position: 'BottomRight', - //Sets the tooltip position relative to the node - relativeMode: 'Object' + content: 'Node', + }, }, - }] -}, '#element'); - - - + ], + connectors: [connector], + }, + '#element' + ); + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/tooltip-cs4/index.js b/ej2-javascript/code-snippet/diagram/tooltip-cs4/index.js index ff156a876..6db883146 100644 --- a/ej2-javascript/code-snippet/diagram/tooltip-cs4/index.js +++ b/ej2-javascript/code-snippet/diagram/tooltip-cs4/index.js @@ -4,41 +4,45 @@ var diagram; var node = { - id: "node1", - width: 100, - height: 100, - annotations: [{ - id: 'label', - content: 'Rectangle', - offset: { - x: 0.5, - y: 0.5 - }, - style: { - color: 'white' - } - }], - offsetX: 200, - offsetY: 200, - style: { - strokeColor: '#6BA5D7', - fill: '#6BA5D7' - }, - constraints: (ej.diagrams.NodeConstraints.Default & ~ej.diagrams.NodeConstraints.InheritTooltip) | ej.diagrams.NodeConstraints.Tooltip, - //Defines mouse over tooltip for a node - tooltip: { - //Sets the content of the Tooltip - content: 'Node1', - //Sets the position of the Tooltip - position: 'BottomRight', - //Sets the tooltip position relative to the node - relativeMode: 'Object' + id: 'node1', + width: 100, + height: 100, + annotations: [ + { + id: 'label', + content: 'Rectangle', + offset: { + x: 0.5, + y: 0.5, + }, + style: { + color: 'white', + }, }, + ], + offsetX: 200, + offsetY: 200, + style: { + strokeColor: '#6BA5D7', + fill: '#6BA5D7', + }, + constraints: + ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.Tooltip, + //Defines mouse over tooltip for a node + tooltip: { + //Sets the content of the Tooltip + content: 'Node1', + //Sets the position of the Tooltip + position: 'BottomRight', + //Sets the tooltip position relative to the node + relativeMode: 'Object', + }, }; -diagram = new ej.diagrams.Diagram({ +diagram = new ej.diagrams.Diagram( + { width: '100%', height: '350px', - constraints: ej.diagrams.DiagramConstraints.Default | ej.diagrams.DiagramConstraints.Tooltip, nodes: [node], -}, '#element'); - + }, + '#element' +); diff --git a/ej2-javascript/code-snippet/diagram/tooltip-cs4/index.ts b/ej2-javascript/code-snippet/diagram/tooltip-cs4/index.ts index ec890f4f4..6b2c76bd8 100644 --- a/ej2-javascript/code-snippet/diagram/tooltip-cs4/index.ts +++ b/ej2-javascript/code-snippet/diagram/tooltip-cs4/index.ts @@ -1,54 +1,46 @@ - - - -import { - Diagram, - NodeModel, - DiagramConstraints, - NodeConstraints -} from '@syncfusion/ej2-diagrams'; -import { - NodeAnimationSettings -} from '@syncfusion/ej2-navigations'; +import { Diagram, NodeConstraints } from '@syncfusion/ej2-diagrams'; //Initializes the diagram component -let diagram: Diagram = new Diagram({ +let diagram: Diagram = new Diagram( + { width: '100%', height: '350px', - constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip, //Defines nodes - nodes: [{ - id: "node1", + nodes: [ + { + id: 'node1', width: 100, height: 100, - annotations: [{ + annotations: [ + { id: 'label', content: 'Rectangle', offset: { - x: 0.5, - y: 0.5 + x: 0.5, + y: 0.5, }, style: { - color: 'white' - } - }], + color: 'white', + }, + }, + ], offsetX: 200, offsetY: 200, style: { - strokeColor: '#6BA5D7', - fill: '#6BA5D7' + strokeColor: '#6BA5D7', + fill: '#6BA5D7', }, - constraints: (NodeConstraints.Default & ~NodeConstraints.InheritTooltip) | NodeConstraints.Tooltip, + constraints: NodeConstraints.Default | NodeConstraints.Tooltip, //Defines mouse over tooltip for a node tooltip: { - content: 'Node1', - //Sets the alignment properties - position: 'BottomRight', - //Sets to show tooltip around the element - relativeMode: 'Object', + content: 'Node1', + //Sets the alignment properties + position: 'BottomRight', + //Sets to show tooltip around the element + relativeMode: 'Object', }, - }], -}, '#element'); - - - + }, + ], + }, + '#element' +); diff --git a/ej2-javascript/code-snippet/diagram/tooltip-cs5/index.js b/ej2-javascript/code-snippet/diagram/tooltip-cs5/index.js index 8575db730..7ae370fcf 100644 --- a/ej2-javascript/code-snippet/diagram/tooltip-cs5/index.js +++ b/ej2-javascript/code-snippet/diagram/tooltip-cs5/index.js @@ -4,39 +4,43 @@ var diagram; var node = { - id: "node1", - width: 100, - height: 100, - annotations: [{ - id: 'label', - content: 'Rectangle', - offset: { - x: 0.5, - y: 0.5 - }, - style: { - color: 'white' - } - }], - offsetX: 200, - offsetY: 200, - style: { - strokeColor: '#6BA5D7', - fill: '#6BA5D7' - }, - constraints: ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.Tooltip, - //Defines mouse over tooltip for a node - tooltip: { - //Sets the content of the Tooltip - content: 'Node1', - //Sets the tooltip position relative to the node - relativeMode: 'Mouse' + id: 'node1', + width: 100, + height: 100, + annotations: [ + { + id: 'label', + content: 'Rectangle', + offset: { + x: 0.5, + y: 0.5, + }, + style: { + color: 'white', + }, }, + ], + offsetX: 200, + offsetY: 200, + style: { + strokeColor: '#6BA5D7', + fill: '#6BA5D7', + }, + constraints: + ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.Tooltip, + //Defines mouse over tooltip for a node + tooltip: { + //Sets the content of the Tooltip + content: 'Node1', + //Sets the tooltip position relative to the node + relativeMode: 'Mouse', + }, }; -diagram = new ej.diagrams.Diagram({ +diagram = new ej.diagrams.Diagram( + { width: '650px', height: '350px', - constraints: ej.diagrams.DiagramConstraints.Default | ej.diagrams.DiagramConstraints.Tooltip, nodes: [node], -}, '#element'); - + }, + '#element' +); diff --git a/ej2-javascript/code-snippet/diagram/tooltip-cs5/index.ts b/ej2-javascript/code-snippet/diagram/tooltip-cs5/index.ts index a40b649df..084348e94 100644 --- a/ej2-javascript/code-snippet/diagram/tooltip-cs5/index.ts +++ b/ej2-javascript/code-snippet/diagram/tooltip-cs5/index.ts @@ -1,52 +1,44 @@ - - - -import { - Diagram, - NodeModel, - DiagramConstraints, - NodeConstraints -} from '@syncfusion/ej2-diagrams'; -import { - NodeAnimationSettings -} from '@syncfusion/ej2-navigations'; +import { Diagram, NodeConstraints } from '@syncfusion/ej2-diagrams'; //Initializes the diagram component -let diagram: Diagram = new Diagram({ +let diagram: Diagram = new Diagram( + { width: '100%', height: '350px', - constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip, //Defines nodes - nodes: [{ - id: "node1", + nodes: [ + { + id: 'node1', width: 100, height: 100, - annotations: [{ + annotations: [ + { id: 'label', content: 'Rectangle', offset: { - x: 0.5, - y: 0.5 + x: 0.5, + y: 0.5, }, style: { - color: 'white' - } - }], + color: 'white', + }, + }, + ], offsetX: 200, offsetY: 200, style: { - strokeColor: '#6BA5D7', - fill: '#6BA5D7' + strokeColor: '#6BA5D7', + fill: '#6BA5D7', }, constraints: NodeConstraints.Default | NodeConstraints.Tooltip, //Defines mouse over tooltip for a node tooltip: { - content: 'Node1', - //Sets to show tooltip at mouse position - relativeMode: 'Mouse', + content: 'Node1', + //Sets to show tooltip at mouse position + relativeMode: 'Mouse', }, - }], -}, '#element'); - - - + }, + ], + }, + '#element' +); diff --git a/ej2-javascript/code-snippet/diagram/tooltip-cs6/index.js b/ej2-javascript/code-snippet/diagram/tooltip-cs6/index.js index 37fc4ae4c..a852662a4 100644 --- a/ej2-javascript/code-snippet/diagram/tooltip-cs6/index.js +++ b/ej2-javascript/code-snippet/diagram/tooltip-cs6/index.js @@ -2,55 +2,63 @@ * Tooltip sample */ var diagram; -diagram = new ej.diagrams.Diagram({ +diagram = new ej.diagrams.Diagram( + { width: '650px', height: '350px', - constraints: ej.diagrams.DiagramConstraints.Default | ej.diagrams.DiagramConstraints.Tooltip, //Defines nodes - nodes: [{ - id: "node1", + nodes: [ + { + id: 'node1', width: 100, height: 100, - annotations: [{ + annotations: [ + { id: 'label', content: 'Rectangle', offset: { - x: 0.5, - y: 0.5 + x: 0.5, + y: 0.5, }, style: { - color: 'white' - } - }], + color: 'white', + }, + }, + ], offsetX: 200, offsetY: 200, style: { - strokeColor: '#6BA5D7', - fill: '#6BA5D7' + strokeColor: '#6BA5D7', + fill: '#6BA5D7', }, - constraints: ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.Tooltip, + constraints: + ej.diagrams.NodeConstraints.Default | + ej.diagrams.NodeConstraints.Tooltip, //Defines mouse over tooltip for a node tooltip: { - content: 'Node1', - position: 'BottomCenter', - relativeMode: 'Object', - animation: { - //Animation settings to be applied on the Tooltip, while it is being shown over the target. - open: { - //Animation effect on the Tooltip is applied during open and close actions. - effect: 'FadeIn', - //Duration of the animation that is completed per animation cycle. - duration: 150, - //Indicating the waiting time before animation begins. - delay: 0 - }, - //Animation settings to be applied on the Tooltip, when it is closed. - close: { - effect: 'FadeOut', - delay: 0 - } - } + content: 'Node1', + position: 'BottomCenter', + relativeMode: 'Object', + animation: { + //Animation settings to be applied on the Tooltip, while it is being shown over the target. + open: { + //Animation effect on the Tooltip is applied during open and close actions. + effect: 'ZoomIn', + //Duration of the animation that is completed per animation cycle. + duration: 1000, + //Indicating the waiting time before animation begins. + delay: 10, + }, + //Animation settings to be applied on the Tooltip, when it is closed. + close: { + effect: 'ZoomOut', + delay: 10, + duration: 500, + }, + }, }, - }] -}, '#element'); - + }, + ], + }, + '#element' +); diff --git a/ej2-javascript/code-snippet/diagram/tooltip-cs6/index.ts b/ej2-javascript/code-snippet/diagram/tooltip-cs6/index.ts index 7c41d50d4..881440726 100644 --- a/ej2-javascript/code-snippet/diagram/tooltip-cs6/index.ts +++ b/ej2-javascript/code-snippet/diagram/tooltip-cs6/index.ts @@ -1,69 +1,61 @@ - - - -import { - Diagram, - NodeModel, - DiagramConstraints, - NodeConstraints -} from '@syncfusion/ej2-diagrams'; -import { - NodeAnimationSettings -} from '@syncfusion/ej2-navigations'; +import { Diagram, NodeConstraints } from '@syncfusion/ej2-diagrams'; //Initializes the Diagram component -let diagram: Diagram = new Diagram({ +let diagram: Diagram = new Diagram( + { width: '100%', height: '350px', - constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip, //Defines nodes - nodes: [{ - id: "node1", + nodes: [ + { + id: 'node1', width: 100, height: 100, - annotations: [{ + annotations: [ + { id: 'label', content: 'Rectangle', offset: { - x: 0.5, - y: 0.5 + x: 0.5, + y: 0.5, }, style: { - color: 'white' - } - }], + color: 'white', + }, + }, + ], offsetX: 200, offsetY: 200, style: { - strokeColor: '#6BA5D7', - fill: '#6BA5D7' + strokeColor: '#6BA5D7', + fill: '#6BA5D7', }, constraints: NodeConstraints.Default | NodeConstraints.Tooltip, //Defines mouse over tooltip for a node tooltip: { - content: 'Node1', - position: 'BottomCenter', - relativeMode: 'Object', - animation: { - //Animation settings to be applied on the tooltip, while it is being shown over the target. - open: { - //Animation effect on the tooltip is applied during open and close actions. - effect: 'ZoomIn', - //Duration of the animation that is completed per animation cycle. - duration: 1000, - //Indicating the waiting time before animation begins. - delay: 0 - }, - //Animation settings to be applied on the tooltip, when it is closed. - close: { - effect: 'ZoomOut', - duration: 500, - delay: 0 - } - } + content: 'Node1', + position: 'BottomCenter', + relativeMode: 'Object', + animation: { + //Animation settings to be applied on the tooltip, while it is being shown over the target. + open: { + //Animation effect on the tooltip is applied during open and close actions. + effect: 'ZoomIn', + //Duration of the animation that is completed per animation cycle. + duration: 1000, + //Indicating the waiting time before animation begins. + delay: 10, + }, + //Animation settings to be applied on the tooltip, when it is closed. + close: { + effect: 'ZoomOut', + duration: 500, + delay: 10, + }, + }, }, - }] -}, '#element'); - - - + }, + ], + }, + '#element' +); diff --git a/ej2-javascript/code-snippet/diagram/tooltip-cs7/index.js b/ej2-javascript/code-snippet/diagram/tooltip-cs7/index.js index 5cb433e7e..c827f9bff 100644 --- a/ej2-javascript/code-snippet/diagram/tooltip-cs7/index.js +++ b/ej2-javascript/code-snippet/diagram/tooltip-cs7/index.js @@ -9,7 +9,7 @@ var node = { style: { fill: '#6BA5D7', strokeColor: 'white' }, ports: [{ offset: { x: 0.5, y: 0.5 }, visibility: ej.diagrams.PortVisibility.Visible, - constraints: ej.diagrams.PortConstraints.Default | ej.diagrams.PortConstraints.Tooltip, + constraints: ej.diagrams.PortConstraints.Default | ej.diagrams.PortConstraints.ToolTip, //Defines mouse over tooltip for a node tooltip: { content: 'Port Tooltip', diff --git a/ej2-javascript/code-snippet/diagram/tooltip-cs7/index.ts b/ej2-javascript/code-snippet/diagram/tooltip-cs7/index.ts index 1b294c9a2..27eb2af03 100644 --- a/ej2-javascript/code-snippet/diagram/tooltip-cs7/index.ts +++ b/ej2-javascript/code-snippet/diagram/tooltip-cs7/index.ts @@ -30,7 +30,8 @@ let node: NodeModel = { tooltip: { content: 'Port Tooltip', }, - constraints: PortConstraints.Default | PortConstraints.Tooltip + //To enable port tooltip + constraints: PortConstraints.Default | PortConstraints.ToolTip }] }; // initialize diagram component diff --git a/ej2-javascript/code-snippet/diagram/tooltip-disDefTooltip/index.css b/ej2-javascript/code-snippet/diagram/tooltip-disDefTooltip/index.css new file mode 100644 index 000000000..34f5efec7 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-disDefTooltip/index.css @@ -0,0 +1,19 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue','calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#element { + display: block; + height: 350px; +} diff --git a/ej2-javascript/code-snippet/diagram/tooltip-disDefTooltip/index.js b/ej2-javascript/code-snippet/diagram/tooltip-disDefTooltip/index.js new file mode 100644 index 000000000..9e010d466 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-disDefTooltip/index.js @@ -0,0 +1,41 @@ +//Initializes the diagram component +let diagram = new ej.diagrams.Diagram( + { + width: '100%', + height: '350px', + selectedItems: { + //To disable default tooltip + constraints: + ej.diagrams.SelectorConstraints.All & + ~ej.diagrams.SelectorConstraints.ToolTip, + }, + //Defines nodes + nodes: [ + { + id: 'node1', + width: 100, + height: 100, + annotations: [ + { + id: 'label', + content: 'Default tooltip disabled', + offset: { + x: 0.5, + y: 0.5, + }, + style: { + color: 'white', + }, + }, + ], + offsetX: 200, + offsetY: 200, + style: { + strokeColor: '#6BA5D7', + fill: '#6BA5D7', + }, + }, + ], + }, + '#element' +); diff --git a/ej2-javascript/code-snippet/diagram/tooltip-disDefTooltip/index.ts b/ej2-javascript/code-snippet/diagram/tooltip-disDefTooltip/index.ts new file mode 100644 index 000000000..3168d1ae9 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-disDefTooltip/index.ts @@ -0,0 +1,40 @@ +import { Diagram, SelectorConstraints } from '@syncfusion/ej2-diagrams'; +//Initializes the diagram component +let diagram: Diagram = new Diagram( + { + width: '100%', + height: '350px', + selectedItems: { + //To disable default tooltip + constraints: SelectorConstraints.All & ~SelectorConstraints.ToolTip, + }, + //Defines nodes + nodes: [ + { + id: 'node1', + width: 100, + height: 100, + annotations: [ + { + id: 'label', + content: 'Default tooltip disabled', + offset: { + x: 0.5, + y: 0.5, + }, + style: { + color: 'white', + }, + }, + ], + offsetX: 200, + offsetY: 200, + style: { + strokeColor: '#6BA5D7', + fill: '#6BA5D7', + }, + }, + ], + }, + '#element' +); diff --git a/ej2-javascript/code-snippet/diagram/tooltip-disDefTooltip/js/index.html b/ej2-javascript/code-snippet/diagram/tooltip-disDefTooltip/js/index.html new file mode 100644 index 000000000..0b4165853 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-disDefTooltip/js/index.html @@ -0,0 +1,33 @@ + + EJ2 Diagram + + + + + + + + + + + + + + + + + + +
    +
    +
    + + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/tooltip-disDefTooltip/systemjs.config.js b/ej2-javascript/code-snippet/diagram/tooltip-disDefTooltip/systemjs.config.js new file mode 100644 index 000000000..52d3cc78f --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-disDefTooltip/systemjs.config.js @@ -0,0 +1,38 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js" + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/tooltip-disDefTooltip/ts/index.html b/ej2-javascript/code-snippet/diagram/tooltip-disDefTooltip/ts/index.html new file mode 100644 index 000000000..4cdaf0152 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-disDefTooltip/ts/index.html @@ -0,0 +1,28 @@ + + + + + EJ2 Diagram + + + + + + + + + + + + + + + + +
    Loading....
    +
    +
    +
    + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/tooltip-isSticky/index.css b/ej2-javascript/code-snippet/diagram/tooltip-isSticky/index.css new file mode 100644 index 000000000..34f5efec7 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-isSticky/index.css @@ -0,0 +1,19 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue','calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#element { + display: block; + height: 350px; +} diff --git a/ej2-javascript/code-snippet/diagram/tooltip-isSticky/index.js b/ej2-javascript/code-snippet/diagram/tooltip-isSticky/index.js new file mode 100644 index 000000000..a1c96cfc1 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-isSticky/index.js @@ -0,0 +1,49 @@ +/** + * Tooltip sample + */ +var diagram; +diagram = new ej.diagrams.Diagram( + { + width: '650px', + height: '350px', + //Defines nodes + nodes: [ + { + id: 'node1', + width: 100, + height: 100, + annotations: [ + { + id: 'label', + content: 'Rectangle', + offset: { + x: 0.5, + y: 0.5, + }, + style: { + color: 'white', + }, + }, + ], + offsetX: 200, + offsetY: 200, + style: { + strokeColor: '#6BA5D7', + fill: '#6BA5D7', + }, + constraints: + ej.diagrams.NodeConstraints.Default | + ej.diagrams.NodeConstraints.Tooltip, + //Defines mouse over tooltip for a node + tooltip: { + content: 'Node1', + position: 'BottomCenter', + relativeMode: 'Object', + //Activate sticky mode for tooltip + isSticky: true, + }, + }, + ], + }, + '#element' +); diff --git a/ej2-javascript/code-snippet/diagram/tooltip-isSticky/index.ts b/ej2-javascript/code-snippet/diagram/tooltip-isSticky/index.ts new file mode 100644 index 000000000..55bea4147 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-isSticky/index.ts @@ -0,0 +1,46 @@ +import { Diagram, NodeConstraints } from '@syncfusion/ej2-diagrams'; + +//Initializes the Diagram component +let diagram: Diagram = new Diagram( + { + width: '100%', + height: '350px', + //Defines nodes + nodes: [ + { + id: 'node1', + width: 100, + height: 100, + annotations: [ + { + id: 'label', + content: 'Rectangle', + offset: { + x: 0.5, + y: 0.5, + }, + style: { + color: 'white', + }, + }, + ], + offsetX: 200, + offsetY: 200, + style: { + strokeColor: '#6BA5D7', + fill: '#6BA5D7', + }, + constraints: NodeConstraints.Default | NodeConstraints.Tooltip, + //Defines mouse over tooltip for a node + tooltip: { + content: 'Node1', + position: 'BottomCenter', + relativeMode: 'Object', + //Activate sticky mode for tooltip + isSticky: true, + }, + }, + ], + }, + '#element' +); diff --git a/ej2-javascript/code-snippet/diagram/tooltip-isSticky/js/index.html b/ej2-javascript/code-snippet/diagram/tooltip-isSticky/js/index.html new file mode 100644 index 000000000..0b4165853 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-isSticky/js/index.html @@ -0,0 +1,33 @@ + + EJ2 Diagram + + + + + + + + + + + + + + + + + + +
    +
    +
    + + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/tooltip-isSticky/systemjs.config.js b/ej2-javascript/code-snippet/diagram/tooltip-isSticky/systemjs.config.js new file mode 100644 index 000000000..52d3cc78f --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-isSticky/systemjs.config.js @@ -0,0 +1,38 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js" + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/tooltip-isSticky/ts/index.html b/ej2-javascript/code-snippet/diagram/tooltip-isSticky/ts/index.html new file mode 100644 index 000000000..4cdaf0152 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-isSticky/ts/index.html @@ -0,0 +1,28 @@ + + + + + EJ2 Diagram + + + + + + + + + + + + + + + + +
    Loading....
    +
    +
    +
    + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/tooltip-node-con/index.css b/ej2-javascript/code-snippet/diagram/tooltip-node-con/index.css new file mode 100644 index 000000000..34f5efec7 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-node-con/index.css @@ -0,0 +1,19 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue','calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#element { + display: block; + height: 350px; +} diff --git a/ej2-javascript/code-snippet/diagram/tooltip-node-con/index.js b/ej2-javascript/code-snippet/diagram/tooltip-node-con/index.js new file mode 100644 index 000000000..eb0ab3205 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-node-con/index.js @@ -0,0 +1,44 @@ +/** + * Tooltip sample + */ +var diagram; + +var node = { + id: 'node1', + width: 100, + height: 100, + annotations: [ + { + id: 'label', + content: 'Rectangle', + offset: { + x: 0.5, + y: 0.5, + }, + style: { + color: 'white', + }, + }, + ], + offsetX: 200, + offsetY: 200, + style: { + strokeColor: '#6BA5D7', + fill: '#6BA5D7', + }, + constraints: + ej.diagrams.NodeConstraints.Default | ej.diagrams.NodeConstraints.Tooltip, + //Defines mouse over tooltip + tooltip: { + content: 'Node', + position: 'TopLeft', + }, +}; +diagram = new ej.diagrams.Diagram( + { + width: '650px', + height: '350px', + nodes: [node], + }, + '#element' +); diff --git a/ej2-javascript/code-snippet/diagram/tooltip-node-con/index.ts b/ej2-javascript/code-snippet/diagram/tooltip-node-con/index.ts new file mode 100644 index 000000000..f06a975a2 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-node-con/index.ts @@ -0,0 +1,43 @@ +import { Diagram, NodeConstraints } from '@syncfusion/ej2-diagrams'; + +//Initializes the diagram component +let diagram: Diagram = new Diagram( + { + width: '100%', + height: '350px', + //Defines nodes + nodes: [ + { + id: 'node1', + width: 100, + height: 100, + annotations: [ + { + id: 'label', + content: 'Rectangle', + offset: { + x: 0.5, + y: 0.5, + }, + style: { + color: 'white', + }, + }, + ], + offsetX: 200, + offsetY: 200, + style: { + strokeColor: '#6BA5D7', + fill: '#6BA5D7', + }, + //Defines mouse over tooltip + tooltip: { + content: 'Node', + position: 'TopLeft', + }, + constraints: NodeConstraints.Default | NodeConstraints.Tooltip, + }, + ], + }, + '#element' +); diff --git a/ej2-javascript/code-snippet/diagram/tooltip-node-con/js/index.html b/ej2-javascript/code-snippet/diagram/tooltip-node-con/js/index.html new file mode 100644 index 000000000..0b4165853 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-node-con/js/index.html @@ -0,0 +1,33 @@ + + EJ2 Diagram + + + + + + + + + + + + + + + + + + +
    +
    +
    + + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/tooltip-node-con/systemjs.config.js b/ej2-javascript/code-snippet/diagram/tooltip-node-con/systemjs.config.js new file mode 100644 index 000000000..52d3cc78f --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-node-con/systemjs.config.js @@ -0,0 +1,38 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js" + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/tooltip-node-con/ts/index.html b/ej2-javascript/code-snippet/diagram/tooltip-node-con/ts/index.html new file mode 100644 index 000000000..4cdaf0152 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-node-con/ts/index.html @@ -0,0 +1,28 @@ + + + + + EJ2 Diagram + + + + + + + + + + + + + + + + +
    Loading....
    +
    +
    +
    + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/tooltip-size/index.css b/ej2-javascript/code-snippet/diagram/tooltip-size/index.css new file mode 100644 index 000000000..34f5efec7 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-size/index.css @@ -0,0 +1,19 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue','calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#element { + display: block; + height: 350px; +} diff --git a/ej2-javascript/code-snippet/diagram/tooltip-size/index.js b/ej2-javascript/code-snippet/diagram/tooltip-size/index.js new file mode 100644 index 000000000..71176c19e --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-size/index.js @@ -0,0 +1,51 @@ +/** + * Tooltip sample + */ +var diagram; +diagram = new ej.diagrams.Diagram( + { + width: '650px', + height: '350px', + //Defines nodes + nodes: [ + { + id: 'node1', + width: 100, + height: 100, + annotations: [ + { + id: 'label', + content: 'Rectangle', + offset: { + x: 0.5, + y: 0.5, + }, + style: { + color: 'white', + }, + }, + ], + offsetX: 200, + offsetY: 100, + style: { + strokeColor: '#6BA5D7', + fill: '#6BA5D7', + }, + constraints: + ej.diagrams.NodeConstraints.Default | + ej.diagrams.NodeConstraints.Tooltip, + //Defines mouse over tooltip for a node + tooltip: { + content: + 'Syncfusion diargam nodes, connectors look and feel can also be customized any way you want. The JavaScript Diagram control provides a rich set of properties through which you can customize connector color, thickness, dash and dot appearance, corners, and even decorators', + position: 'BottomCenter', + relativeMode: 'Object', + //Set size for tooltip + width: 300, + height: 100, + }, + }, + ], + }, + '#element' +); diff --git a/ej2-javascript/code-snippet/diagram/tooltip-size/index.ts b/ej2-javascript/code-snippet/diagram/tooltip-size/index.ts new file mode 100644 index 000000000..de39bcfdf --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-size/index.ts @@ -0,0 +1,48 @@ +import { Diagram, NodeConstraints } from '@syncfusion/ej2-diagrams'; + +//Initializes the Diagram component +let diagram: Diagram = new Diagram( + { + width: '100%', + height: '350px', + //Defines nodes + nodes: [ + { + id: 'node1', + width: 100, + height: 100, + annotations: [ + { + id: 'label', + content: 'Rectangle', + offset: { + x: 0.5, + y: 0.5, + }, + style: { + color: 'white', + }, + }, + ], + offsetX: 200, + offsetY: 100, + style: { + strokeColor: '#6BA5D7', + fill: '#6BA5D7', + }, + constraints: NodeConstraints.Default | NodeConstraints.Tooltip, + //Defines mouse over tooltip for a node + tooltip: { + content: + 'Syncfusion diargam nodes, connectors look and feel can also be customized any way you want. The JavaScript Diagram control provides a rich set of properties through which you can customize connector color, thickness, dash and dot appearance, corners, and even decorators', + position: 'BottomCenter', + relativeMode: 'Object', + //Set size for tooltip + width: 300, + height: 100, + }, + }, + ], + }, + '#element' +); diff --git a/ej2-javascript/code-snippet/diagram/tooltip-size/js/index.html b/ej2-javascript/code-snippet/diagram/tooltip-size/js/index.html new file mode 100644 index 000000000..0b4165853 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-size/js/index.html @@ -0,0 +1,33 @@ + + EJ2 Diagram + + + + + + + + + + + + + + + + + + +
    +
    +
    + + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/tooltip-size/systemjs.config.js b/ej2-javascript/code-snippet/diagram/tooltip-size/systemjs.config.js new file mode 100644 index 000000000..52d3cc78f --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-size/systemjs.config.js @@ -0,0 +1,38 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js" + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/tooltip-size/ts/index.html b/ej2-javascript/code-snippet/diagram/tooltip-size/ts/index.html new file mode 100644 index 000000000..4cdaf0152 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-size/ts/index.html @@ -0,0 +1,28 @@ + + + + + EJ2 Diagram + + + + + + + + + + + + + + + + +
    Loading....
    +
    +
    +
    + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/tooltip-tipPointer/index.css b/ej2-javascript/code-snippet/diagram/tooltip-tipPointer/index.css new file mode 100644 index 000000000..34f5efec7 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-tipPointer/index.css @@ -0,0 +1,19 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue','calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#element { + display: block; + height: 350px; +} diff --git a/ej2-javascript/code-snippet/diagram/tooltip-tipPointer/index.js b/ej2-javascript/code-snippet/diagram/tooltip-tipPointer/index.js new file mode 100644 index 000000000..a1c96cfc1 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-tipPointer/index.js @@ -0,0 +1,49 @@ +/** + * Tooltip sample + */ +var diagram; +diagram = new ej.diagrams.Diagram( + { + width: '650px', + height: '350px', + //Defines nodes + nodes: [ + { + id: 'node1', + width: 100, + height: 100, + annotations: [ + { + id: 'label', + content: 'Rectangle', + offset: { + x: 0.5, + y: 0.5, + }, + style: { + color: 'white', + }, + }, + ], + offsetX: 200, + offsetY: 200, + style: { + strokeColor: '#6BA5D7', + fill: '#6BA5D7', + }, + constraints: + ej.diagrams.NodeConstraints.Default | + ej.diagrams.NodeConstraints.Tooltip, + //Defines mouse over tooltip for a node + tooltip: { + content: 'Node1', + position: 'BottomCenter', + relativeMode: 'Object', + //Activate sticky mode for tooltip + isSticky: true, + }, + }, + ], + }, + '#element' +); diff --git a/ej2-javascript/code-snippet/diagram/tooltip-tipPointer/index.ts b/ej2-javascript/code-snippet/diagram/tooltip-tipPointer/index.ts new file mode 100644 index 000000000..480c0d371 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-tipPointer/index.ts @@ -0,0 +1,84 @@ +/** + * Tooltip sample + */ +var diagram; +diagram = new ej.diagrams.Diagram( + { + width: '650px', + height: '350px', + //Defines nodes + nodes: [ + { + id: 'node1', + width: 100, + height: 100, + annotations: [ + { + id: 'label', + content: 'Tooltip pointer hidden', + offset: { + x: 0.5, + y: 0.5, + }, + style: { + color: 'white', + }, + }, + ], + offsetX: 100, + offsetY: 100, + style: { + strokeColor: '#6BA5D7', + fill: '#6BA5D7', + }, + constraints: + ej.diagrams.NodeConstraints.Default | + ej.diagrams.NodeConstraints.Tooltip, + //Defines mouse over tooltip for a node + tooltip: { + content: 'Tooltip pointer hidden', + position: 'BottomCenter', + relativeMode: 'Object', + //Hide tip pointer + showTipPointer: false, + }, + }, + { + id: 'node2', + width: 100, + height: 100, + annotations: [ + { + id: 'label', + content: 'Tooltip pointer visible', + offset: { + x: 0.5, + y: 0.5, + }, + style: { + color: 'white', + }, + }, + ], + offsetX: 300, + offsetY: 100, + style: { + strokeColor: '#6BA5D7', + fill: '#6BA5D7', + }, + constraints: + ej.diagrams.NodeConstraints.Default | + ej.diagrams.NodeConstraints.Tooltip, + //Defines mouse over tooltip for a node + tooltip: { + content: 'Tooltip pointer visible', + position: 'BottomCenter', + relativeMode: 'Object', + //Show tip pointer + showTipPointer: true, + }, + }, + ], + }, + '#element' +); diff --git a/ej2-javascript/code-snippet/diagram/tooltip-tipPointer/js/index.html b/ej2-javascript/code-snippet/diagram/tooltip-tipPointer/js/index.html new file mode 100644 index 000000000..0b4165853 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-tipPointer/js/index.html @@ -0,0 +1,33 @@ + + EJ2 Diagram + + + + + + + + + + + + + + + + + + +
    +
    +
    + + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/tooltip-tipPointer/systemjs.config.js b/ej2-javascript/code-snippet/diagram/tooltip-tipPointer/systemjs.config.js new file mode 100644 index 000000000..52d3cc78f --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-tipPointer/systemjs.config.js @@ -0,0 +1,38 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js" + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/tooltip-tipPointer/ts/index.html b/ej2-javascript/code-snippet/diagram/tooltip-tipPointer/ts/index.html new file mode 100644 index 000000000..4cdaf0152 --- /dev/null +++ b/ej2-javascript/code-snippet/diagram/tooltip-tipPointer/ts/index.html @@ -0,0 +1,28 @@ + + + + + EJ2 Diagram + + + + + + + + + + + + + + + + +
    Loading....
    +
    +
    +
    + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/accessibility/ariaLabels/index.css b/ej2-javascript/code-snippet/otp-input/accessibility/ariaLabels/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/accessibility/ariaLabels/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/accessibility/ariaLabels/js/index.html b/ej2-javascript/code-snippet/otp-input/accessibility/ariaLabels/js/index.html index d4ecb1bac..3fae2e5b5 100644 --- a/ej2-javascript/code-snippet/otp-input/accessibility/ariaLabels/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/accessibility/ariaLabels/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/accessibility/ariaLabels/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/accessibility/ariaLabels/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/accessibility/ariaLabels/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/accessibility/ariaLabels/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/accessibility/ariaLabels/ts/index.html b/ej2-javascript/code-snippet/otp-input/accessibility/ariaLabels/ts/index.html index 1f1bd275d..1fb8ad5d1 100644 --- a/ej2-javascript/code-snippet/otp-input/accessibility/ariaLabels/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/accessibility/ariaLabels/ts/index.html @@ -11,7 +11,7 @@ - + @@ -23,18 +23,5 @@
    - diff --git a/ej2-javascript/code-snippet/otp-input/accessibility/htmlAttributes/index.css b/ej2-javascript/code-snippet/otp-input/accessibility/htmlAttributes/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/accessibility/htmlAttributes/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/accessibility/htmlAttributes/js/index.html b/ej2-javascript/code-snippet/otp-input/accessibility/htmlAttributes/js/index.html index d4ecb1bac..3fae2e5b5 100644 --- a/ej2-javascript/code-snippet/otp-input/accessibility/htmlAttributes/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/accessibility/htmlAttributes/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/accessibility/htmlAttributes/styles.css b/ej2-javascript/code-snippet/otp-input/accessibility/htmlAttributes/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/accessibility/htmlAttributes/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/accessibility/htmlAttributes/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/accessibility/htmlAttributes/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/accessibility/htmlAttributes/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/accessibility/htmlAttributes/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/accessibility/htmlAttributes/ts/index.html b/ej2-javascript/code-snippet/otp-input/accessibility/htmlAttributes/ts/index.html index 1f1bd275d..1fb8ad5d1 100644 --- a/ej2-javascript/code-snippet/otp-input/accessibility/htmlAttributes/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/accessibility/htmlAttributes/ts/index.html @@ -11,7 +11,7 @@ - + @@ -23,18 +23,5 @@
    - diff --git a/ej2-javascript/code-snippet/otp-input/appearance/cssClass/index.css b/ej2-javascript/code-snippet/otp-input/appearance/cssClass/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/appearance/cssClass/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/appearance/cssClass/js/index.html b/ej2-javascript/code-snippet/otp-input/appearance/cssClass/js/index.html index 276609cd6..e9eb3f67e 100644 --- a/ej2-javascript/code-snippet/otp-input/appearance/cssClass/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/appearance/cssClass/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/appearance/cssClass/styles.css b/ej2-javascript/code-snippet/otp-input/appearance/cssClass/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/appearance/cssClass/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/appearance/cssClass/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/appearance/cssClass/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/appearance/cssClass/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/appearance/cssClass/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/appearance/cssClass/ts/index.html b/ej2-javascript/code-snippet/otp-input/appearance/cssClass/ts/index.html index 5ba86fc75..cbb51c704 100644 --- a/ej2-javascript/code-snippet/otp-input/appearance/cssClass/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/appearance/cssClass/ts/index.html @@ -11,7 +11,7 @@ - + @@ -23,18 +23,5 @@
    - diff --git a/ej2-javascript/code-snippet/otp-input/appearance/disabled/index.css b/ej2-javascript/code-snippet/otp-input/appearance/disabled/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/appearance/disabled/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/appearance/disabled/js/index.html b/ej2-javascript/code-snippet/otp-input/appearance/disabled/js/index.html index 0172795ae..bfe503f41 100644 --- a/ej2-javascript/code-snippet/otp-input/appearance/disabled/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/appearance/disabled/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/appearance/disabled/styles.css b/ej2-javascript/code-snippet/otp-input/appearance/disabled/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/appearance/disabled/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/appearance/disabled/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/appearance/disabled/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/appearance/disabled/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/appearance/disabled/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/appearance/disabled/ts/index.html b/ej2-javascript/code-snippet/otp-input/appearance/disabled/ts/index.html index fe30dcfb9..7db45d3c3 100644 --- a/ej2-javascript/code-snippet/otp-input/appearance/disabled/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/appearance/disabled/ts/index.html @@ -11,7 +11,7 @@ - + @@ -23,18 +23,5 @@
    - diff --git a/ej2-javascript/code-snippet/otp-input/appearance/length/index.css b/ej2-javascript/code-snippet/otp-input/appearance/length/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/appearance/length/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/appearance/length/js/index.html b/ej2-javascript/code-snippet/otp-input/appearance/length/js/index.html index 6ea6a1b86..db9530ac0 100644 --- a/ej2-javascript/code-snippet/otp-input/appearance/length/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/appearance/length/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/appearance/length/styles.css b/ej2-javascript/code-snippet/otp-input/appearance/length/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/appearance/length/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/appearance/length/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/appearance/length/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/appearance/length/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/appearance/length/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/appearance/length/ts/index.html b/ej2-javascript/code-snippet/otp-input/appearance/length/ts/index.html index bd59a82dd..a7935149b 100644 --- a/ej2-javascript/code-snippet/otp-input/appearance/length/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/appearance/length/ts/index.html @@ -11,7 +11,7 @@ - + @@ -23,18 +23,5 @@
    - diff --git a/ej2-javascript/code-snippet/otp-input/es5-getting-started-cs1/index.css b/ej2-javascript/code-snippet/otp-input/es5-getting-started-cs1/index.css index a90139a4b..978659891 100644 --- a/ej2-javascript/code-snippet/otp-input/es5-getting-started-cs1/index.css +++ b/ej2-javascript/code-snippet/otp-input/es5-getting-started-cs1/index.css @@ -1,4 +1,14 @@ #container { - margin-top: 30px; - padding: 30px; + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; } \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/events/blur/index.css b/ej2-javascript/code-snippet/otp-input/events/blur/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/events/blur/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/events/blur/js/index.html b/ej2-javascript/code-snippet/otp-input/events/blur/js/index.html index 3ee35f482..3455ebb68 100644 --- a/ej2-javascript/code-snippet/otp-input/events/blur/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/events/blur/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/events/blur/styles.css b/ej2-javascript/code-snippet/otp-input/events/blur/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/events/blur/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/events/blur/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/events/blur/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/events/blur/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/events/blur/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/events/blur/ts/index.html b/ej2-javascript/code-snippet/otp-input/events/blur/ts/index.html index 01c7db017..9ec69332d 100644 --- a/ej2-javascript/code-snippet/otp-input/events/blur/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/events/blur/ts/index.html @@ -11,7 +11,7 @@ - + @@ -23,18 +23,5 @@
    - diff --git a/ej2-javascript/code-snippet/otp-input/events/created/index.css b/ej2-javascript/code-snippet/otp-input/events/created/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/events/created/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/events/created/js/index.html b/ej2-javascript/code-snippet/otp-input/events/created/js/index.html index 3ee35f482..3455ebb68 100644 --- a/ej2-javascript/code-snippet/otp-input/events/created/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/events/created/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/events/created/styles.css b/ej2-javascript/code-snippet/otp-input/events/created/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/events/created/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/events/created/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/events/created/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/events/created/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/events/created/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/events/created/ts/index.html b/ej2-javascript/code-snippet/otp-input/events/created/ts/index.html index 01c7db017..9ec69332d 100644 --- a/ej2-javascript/code-snippet/otp-input/events/created/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/events/created/ts/index.html @@ -11,7 +11,7 @@ - + @@ -23,18 +23,5 @@
    - diff --git a/ej2-javascript/code-snippet/otp-input/events/focus/index.css b/ej2-javascript/code-snippet/otp-input/events/focus/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/events/focus/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/events/focus/js/index.html b/ej2-javascript/code-snippet/otp-input/events/focus/js/index.html index 3ee35f482..3455ebb68 100644 --- a/ej2-javascript/code-snippet/otp-input/events/focus/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/events/focus/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/events/focus/styles.css b/ej2-javascript/code-snippet/otp-input/events/focus/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/events/focus/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/events/focus/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/events/focus/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/events/focus/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/events/focus/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/events/focus/ts/index.html b/ej2-javascript/code-snippet/otp-input/events/focus/ts/index.html index 01c7db017..9ec69332d 100644 --- a/ej2-javascript/code-snippet/otp-input/events/focus/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/events/focus/ts/index.html @@ -11,7 +11,7 @@ - + @@ -23,18 +23,5 @@
    - diff --git a/ej2-javascript/code-snippet/otp-input/events/input/index.css b/ej2-javascript/code-snippet/otp-input/events/input/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/events/input/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/events/input/js/index.html b/ej2-javascript/code-snippet/otp-input/events/input/js/index.html index 3ee35f482..3455ebb68 100644 --- a/ej2-javascript/code-snippet/otp-input/events/input/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/events/input/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/events/input/styles.css b/ej2-javascript/code-snippet/otp-input/events/input/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/events/input/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/events/input/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/events/input/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/events/input/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/events/input/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/events/input/ts/index.html b/ej2-javascript/code-snippet/otp-input/events/input/ts/index.html index 01c7db017..9ec69332d 100644 --- a/ej2-javascript/code-snippet/otp-input/events/input/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/events/input/ts/index.html @@ -11,7 +11,7 @@ - + @@ -23,18 +23,5 @@
    - diff --git a/ej2-javascript/code-snippet/otp-input/events/valueChanged/index.css b/ej2-javascript/code-snippet/otp-input/events/valueChanged/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/events/valueChanged/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/events/valueChanged/js/index.html b/ej2-javascript/code-snippet/otp-input/events/valueChanged/js/index.html index 3ee35f482..3455ebb68 100644 --- a/ej2-javascript/code-snippet/otp-input/events/valueChanged/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/events/valueChanged/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/events/valueChanged/styles.css b/ej2-javascript/code-snippet/otp-input/events/valueChanged/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/events/valueChanged/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/events/valueChanged/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/events/valueChanged/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/events/valueChanged/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/events/valueChanged/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/events/valueChanged/ts/index.html b/ej2-javascript/code-snippet/otp-input/events/valueChanged/ts/index.html index 01c7db017..244663337 100644 --- a/ej2-javascript/code-snippet/otp-input/events/valueChanged/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/events/valueChanged/ts/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/events/valueChangedEvent/index.css b/ej2-javascript/code-snippet/otp-input/events/valueChangedEvent/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/events/valueChangedEvent/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/events/valueChangedEvent/js/index.html b/ej2-javascript/code-snippet/otp-input/events/valueChangedEvent/js/index.html index 3ee35f482..3455ebb68 100644 --- a/ej2-javascript/code-snippet/otp-input/events/valueChangedEvent/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/events/valueChangedEvent/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/events/valueChangedEvent/styles.css b/ej2-javascript/code-snippet/otp-input/events/valueChangedEvent/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/events/valueChangedEvent/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/events/valueChangedEvent/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/events/valueChangedEvent/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/events/valueChangedEvent/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/events/valueChangedEvent/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/events/valueChangedEvent/ts/index.html b/ej2-javascript/code-snippet/otp-input/events/valueChangedEvent/ts/index.html index 01c7db017..9ec69332d 100644 --- a/ej2-javascript/code-snippet/otp-input/events/valueChangedEvent/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/events/valueChangedEvent/ts/index.html @@ -11,7 +11,7 @@ - + @@ -23,18 +23,5 @@
    - diff --git a/ej2-javascript/code-snippet/otp-input/getting-started-cs1/index.css b/ej2-javascript/code-snippet/otp-input/getting-started-cs1/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/getting-started-cs1/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/getting-started-cs1/js/index.html b/ej2-javascript/code-snippet/otp-input/getting-started-cs1/js/index.html index 3ee35f482..3455ebb68 100644 --- a/ej2-javascript/code-snippet/otp-input/getting-started-cs1/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/getting-started-cs1/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/getting-started-cs1/styles.css b/ej2-javascript/code-snippet/otp-input/getting-started-cs1/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/getting-started-cs1/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/getting-started-cs1/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/getting-started-cs1/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/getting-started-cs1/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/getting-started-cs1/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/getting-started-cs1/ts/index.html b/ej2-javascript/code-snippet/otp-input/getting-started-cs1/ts/index.html index 01c7db017..9ec69332d 100644 --- a/ej2-javascript/code-snippet/otp-input/getting-started-cs1/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/getting-started-cs1/ts/index.html @@ -11,7 +11,7 @@ - + @@ -23,18 +23,5 @@
    - diff --git a/ej2-javascript/code-snippet/otp-input/inputTypes/number/index.css b/ej2-javascript/code-snippet/otp-input/inputTypes/number/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/inputTypes/number/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/inputTypes/number/js/index.html b/ej2-javascript/code-snippet/otp-input/inputTypes/number/js/index.html index 072cb07ae..bb2ada589 100644 --- a/ej2-javascript/code-snippet/otp-input/inputTypes/number/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/inputTypes/number/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/inputTypes/number/styles.css b/ej2-javascript/code-snippet/otp-input/inputTypes/number/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/inputTypes/number/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/inputTypes/number/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/inputTypes/number/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/inputTypes/number/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/inputTypes/number/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/inputTypes/number/ts/index.html b/ej2-javascript/code-snippet/otp-input/inputTypes/number/ts/index.html index 0c60c55ca..71adabd11 100644 --- a/ej2-javascript/code-snippet/otp-input/inputTypes/number/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/inputTypes/number/ts/index.html @@ -11,7 +11,7 @@ - + @@ -23,18 +23,5 @@
    - diff --git a/ej2-javascript/code-snippet/otp-input/inputTypes/password/index.css b/ej2-javascript/code-snippet/otp-input/inputTypes/password/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/inputTypes/password/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/inputTypes/password/js/index.html b/ej2-javascript/code-snippet/otp-input/inputTypes/password/js/index.html index 65e65d427..1810f83cf 100644 --- a/ej2-javascript/code-snippet/otp-input/inputTypes/password/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/inputTypes/password/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/inputTypes/password/styles.css b/ej2-javascript/code-snippet/otp-input/inputTypes/password/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/inputTypes/password/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/inputTypes/password/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/inputTypes/password/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/inputTypes/password/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/inputTypes/password/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/inputTypes/password/ts/index.html b/ej2-javascript/code-snippet/otp-input/inputTypes/password/ts/index.html index 66c2ccb6c..1dc053244 100644 --- a/ej2-javascript/code-snippet/otp-input/inputTypes/password/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/inputTypes/password/ts/index.html @@ -11,7 +11,7 @@ - + @@ -23,18 +23,5 @@
    - diff --git a/ej2-javascript/code-snippet/otp-input/inputTypes/text/index.css b/ej2-javascript/code-snippet/otp-input/inputTypes/text/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/inputTypes/text/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/inputTypes/text/js/index.html b/ej2-javascript/code-snippet/otp-input/inputTypes/text/js/index.html index cc322bdd8..1f797a5b2 100644 --- a/ej2-javascript/code-snippet/otp-input/inputTypes/text/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/inputTypes/text/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/inputTypes/text/styles.css b/ej2-javascript/code-snippet/otp-input/inputTypes/text/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/inputTypes/text/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/inputTypes/text/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/inputTypes/text/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/inputTypes/text/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/inputTypes/text/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/inputTypes/text/ts/index.html b/ej2-javascript/code-snippet/otp-input/inputTypes/text/ts/index.html index ee2946b5b..a4d812e48 100644 --- a/ej2-javascript/code-snippet/otp-input/inputTypes/text/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/inputTypes/text/ts/index.html @@ -11,7 +11,7 @@ - + @@ -23,18 +23,5 @@
    - diff --git a/ej2-javascript/code-snippet/otp-input/inputTypes/value/index.css b/ej2-javascript/code-snippet/otp-input/inputTypes/value/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/inputTypes/value/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/inputTypes/value/js/index.html b/ej2-javascript/code-snippet/otp-input/inputTypes/value/js/index.html index 3ee35f482..3455ebb68 100644 --- a/ej2-javascript/code-snippet/otp-input/inputTypes/value/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/inputTypes/value/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/inputTypes/value/styles.css b/ej2-javascript/code-snippet/otp-input/inputTypes/value/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/inputTypes/value/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/inputTypes/value/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/inputTypes/value/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/inputTypes/value/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/inputTypes/value/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/inputTypes/value/ts/index.html b/ej2-javascript/code-snippet/otp-input/inputTypes/value/ts/index.html index 01c7db017..9ec69332d 100644 --- a/ej2-javascript/code-snippet/otp-input/inputTypes/value/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/inputTypes/value/ts/index.html @@ -11,7 +11,7 @@ - + @@ -23,18 +23,5 @@
    - diff --git a/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_char/index.css b/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_char/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_char/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_char/js/index.html b/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_char/js/index.html index 778105cb8..be6c37a58 100644 --- a/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_char/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_char/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_char/styles.css b/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_char/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_char/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_char/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_char/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_char/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_char/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_char/ts/index.html b/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_char/ts/index.html index 9e4363ccc..bfa10244f 100644 --- a/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_char/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_char/ts/index.html @@ -11,7 +11,7 @@ - + @@ -23,18 +23,5 @@
    - diff --git a/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_string/index.css b/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_string/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_string/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_string/js/index.html b/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_string/js/index.html index 778105cb8..be6c37a58 100644 --- a/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_string/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_string/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_string/styles.css b/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_string/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_string/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_string/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_string/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_string/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_string/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_string/ts/index.html b/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_string/ts/index.html index 9e4363ccc..1d8154ffe 100644 --- a/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_string/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/placeholder/placeholder_string/ts/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/separator/index.css b/ej2-javascript/code-snippet/otp-input/separator/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/separator/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/separator/js/index.html b/ej2-javascript/code-snippet/otp-input/separator/js/index.html index b9cf6177b..44fbf8f2f 100644 --- a/ej2-javascript/code-snippet/otp-input/separator/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/separator/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/separator/styles.css b/ej2-javascript/code-snippet/otp-input/separator/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/separator/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/separator/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/separator/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/separator/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/separator/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/separator/ts/index.html b/ej2-javascript/code-snippet/otp-input/separator/ts/index.html index 1319b3c43..414c0fe78 100644 --- a/ej2-javascript/code-snippet/otp-input/separator/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/separator/ts/index.html @@ -11,7 +11,7 @@ - + @@ -23,18 +23,5 @@
    - diff --git a/ej2-javascript/code-snippet/otp-input/styling-modes/filled/index.css b/ej2-javascript/code-snippet/otp-input/styling-modes/filled/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/styling-modes/filled/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/styling-modes/filled/js/index.html b/ej2-javascript/code-snippet/otp-input/styling-modes/filled/js/index.html index 5042253a1..582737f2e 100644 --- a/ej2-javascript/code-snippet/otp-input/styling-modes/filled/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/styling-modes/filled/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/styling-modes/filled/styles.css b/ej2-javascript/code-snippet/otp-input/styling-modes/filled/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/styling-modes/filled/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/styling-modes/filled/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/styling-modes/filled/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/styling-modes/filled/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/styling-modes/filled/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/styling-modes/filled/ts/index.html b/ej2-javascript/code-snippet/otp-input/styling-modes/filled/ts/index.html index 33392d7a3..5b7114b78 100644 --- a/ej2-javascript/code-snippet/otp-input/styling-modes/filled/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/styling-modes/filled/ts/index.html @@ -11,7 +11,7 @@ - + @@ -23,18 +23,5 @@
    - diff --git a/ej2-javascript/code-snippet/otp-input/styling-modes/outlined/index.css b/ej2-javascript/code-snippet/otp-input/styling-modes/outlined/index.css new file mode 100644 index 000000000..978659891 --- /dev/null +++ b/ej2-javascript/code-snippet/otp-input/styling-modes/outlined/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; + margin: 50px auto; + width: 350px; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/styling-modes/outlined/js/index.html b/ej2-javascript/code-snippet/otp-input/styling-modes/outlined/js/index.html index c7d411932..bd87e47f8 100644 --- a/ej2-javascript/code-snippet/otp-input/styling-modes/outlined/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/styling-modes/outlined/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/styling-modes/outlined/styles.css b/ej2-javascript/code-snippet/otp-input/styling-modes/outlined/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/styling-modes/outlined/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/styling-modes/outlined/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/styling-modes/outlined/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/styling-modes/outlined/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/styling-modes/outlined/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/styling-modes/outlined/ts/index.html b/ej2-javascript/code-snippet/otp-input/styling-modes/outlined/ts/index.html index adad59c1b..7d4efb17d 100644 --- a/ej2-javascript/code-snippet/otp-input/styling-modes/outlined/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/styling-modes/outlined/ts/index.html @@ -11,7 +11,7 @@ - + @@ -23,18 +23,5 @@
    - diff --git a/ej2-javascript/code-snippet/otp-input/accessibility/ariaLabels/styles.css b/ej2-javascript/code-snippet/otp-input/styling-modes/underlined/index.css similarity index 100% rename from ej2-javascript/code-snippet/otp-input/accessibility/ariaLabels/styles.css rename to ej2-javascript/code-snippet/otp-input/styling-modes/underlined/index.css diff --git a/ej2-javascript/code-snippet/otp-input/styling-modes/underlined/js/index.html b/ej2-javascript/code-snippet/otp-input/styling-modes/underlined/js/index.html index ce9e510f9..2496d0f59 100644 --- a/ej2-javascript/code-snippet/otp-input/styling-modes/underlined/js/index.html +++ b/ej2-javascript/code-snippet/otp-input/styling-modes/underlined/js/index.html @@ -11,7 +11,7 @@ - + diff --git a/ej2-javascript/code-snippet/otp-input/styling-modes/underlined/styles.css b/ej2-javascript/code-snippet/otp-input/styling-modes/underlined/styles.css deleted file mode 100644 index a90139a4b..000000000 --- a/ej2-javascript/code-snippet/otp-input/styling-modes/underlined/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -#container { - margin-top: 30px; - padding: 30px; -} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/otp-input/styling-modes/underlined/systemjs.config.js b/ej2-javascript/code-snippet/otp-input/styling-modes/underlined/systemjs.config.js index eff7f10f5..d56fac8e7 100644 --- a/ej2-javascript/code-snippet/otp-input/styling-modes/underlined/systemjs.config.js +++ b/ej2-javascript/code-snippet/otp-input/styling-modes/underlined/systemjs.config.js @@ -16,7 +16,10 @@ System.config({ main: "index.ts", typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js" + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/otp-input/styling-modes/underlined/ts/index.html b/ej2-javascript/code-snippet/otp-input/styling-modes/underlined/ts/index.html index a3bb1cf20..8ee82f8bf 100644 --- a/ej2-javascript/code-snippet/otp-input/styling-modes/underlined/ts/index.html +++ b/ej2-javascript/code-snippet/otp-input/styling-modes/underlined/ts/index.html @@ -11,7 +11,7 @@ - + @@ -23,18 +23,5 @@
    - diff --git a/ej2-javascript/code-snippet/pivot-table/pivot-table-cs375/index.ts b/ej2-javascript/code-snippet/pivot-table/pivot-table-cs375/index.ts index 016226fac..b5b761676 100644 --- a/ej2-javascript/code-snippet/pivot-table/pivot-table-cs375/index.ts +++ b/ej2-javascript/code-snippet/pivot-table/pivot-table-cs375/index.ts @@ -1,7 +1,7 @@ import { PivotView, IDataSet, CalculatedField, FieldList } from '@syncfusion/ej2-pivotview'; -import { pivotData } from './datasource'; +import { pivotData } from './datasource.ts'; PivotView.Inject(CalculatedField, FieldList); let pivotTableObj: PivotView = new PivotView({ diff --git a/ej2-javascript/code-snippet/pivot-table/pivot-table-cs375/systemjs.config.js b/ej2-javascript/code-snippet/pivot-table/pivot-table-cs375/systemjs.config.js index 738b31781..006c0a37e 100644 --- a/ej2-javascript/code-snippet/pivot-table/pivot-table-cs375/systemjs.config.js +++ b/ej2-javascript/code-snippet/pivot-table/pivot-table-cs375/systemjs.config.js @@ -10,8 +10,7 @@ System.config({ } }, paths: { - "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/", - "*": "*.ts" + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" }, map: { main: "index.ts", @@ -45,4 +44,4 @@ System.config({ System.import('index.ts').catch(console.error.bind(console)).then(function () { document.getElementById('loader').style.display = "none"; document.getElementById('container').style.visibility = "visible"; -}); \ No newline at end of file +}); diff --git a/ej2-javascript/code-snippet/tab/dynamic-tab-cs1/js/index.html b/ej2-javascript/code-snippet/tab/dynamic-tab-cs1/js/index.html index 5e5061370..ca893fb63 100644 --- a/ej2-javascript/code-snippet/tab/dynamic-tab-cs1/js/index.html +++ b/ej2-javascript/code-snippet/tab/dynamic-tab-cs1/js/index.html @@ -6,9 +6,20 @@ + + + diff --git a/ej2-javascript/code-snippet/tab/dynamic-tab-cs1/ts/index.html b/ej2-javascript/code-snippet/tab/dynamic-tab-cs1/ts/index.html index 166762b55..8aaee8358 100644 --- a/ej2-javascript/code-snippet/tab/dynamic-tab-cs1/ts/index.html +++ b/ej2-javascript/code-snippet/tab/dynamic-tab-cs1/ts/index.html @@ -11,6 +11,19 @@ + + diff --git a/ej2-javascript/diagram/grid-lines.md b/ej2-javascript/diagram/grid-lines.md index 5464fe209..d55922fa5 100644 --- a/ej2-javascript/diagram/grid-lines.md +++ b/ej2-javascript/diagram/grid-lines.md @@ -11,15 +11,14 @@ domainurl: ##DomainURL## # Grid lines in ##Platform_Name## Diagram control -Gridlines are the pattern of lines drawn behind the diagram elements. It provides a visual guidance while dragging or arranging the objects on the diagram surface. +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 model’s [`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-SnapSettingsModel) property is used to customize the gridlines and control the snapping behavior in the diagram. ## Customize the gridlines visibility -The [`snapSettings.snapConstraints`](../api/diagram/snapSettings#constraints-SnapConstraints) enables you to show/hide the gridlines. The following code example illustrates how to show or hide gridlines. +The [`snapConstraints`](../api/diagram/snapSettings#constraints-SnapConstraints) enables you to show/hide the gridlines. The following code example illustrates how to show the gridlines. -If you need to enable snapping, then inject snapping module into the diagram. {% if page.publishingplatform == "typescript" %} @@ -48,13 +47,15 @@ If you need to enable snapping, then inject snapping module into the diagram. {% previewsample "page.domainurl/code-snippet/diagram/gridlines-cs1" %} {% endif %} +N>If you want to enable snapping, then inject snapping module into the diagram. + To show only horizontal/vertical gridlines or to hide gridlines, refer to [`Constraints`](../api/diagram/snapSettings#constraints-SnapConstraints). ## Appearance 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 to customize the appearance of the horizontal and vertical gridlines respectively. +* 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 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. @@ -89,6 +90,8 @@ The following code example illustrates how to customize the appearance of gridli {% previewsample "page.domainurl/code-snippet/diagram/gridlines-cs2" %} {% endif %} +![Line appearance](./images/line-appearance.png) + ## Line intervals Thickness and the space between gridlines can be customized by using horizontal gridlines’s [`linesInterval`](../api/diagram/gridlines#lineintervals-number) and vertical gridlines’s [`linesInterval`](../api/diagram/gridlines#lineintervals-number) properties. In the lines interval collections, values at the odd places are referred as the thickness of lines and values at the even places are referred as the space between gridlines. @@ -122,13 +125,53 @@ The following code example illustrates how to customize the thickness of lines a {% previewsample "page.domainurl/code-snippet/diagram/gridlines-cs3" %} {% endif %} +![Line interval](./images/line-interval.png) + +## Dot grid patterns + +The appearance of the grid lines can be changed into dots by settings [`gridType`](../api/diagram/gridType/) of `snapSettings` as Dots. By default, the grid type is **Lines**. + +The following code illustrates how to render grid patterns as Dots. + +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/diagram/gridlines-dots/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/gridlines-dots/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/gridlines-dots" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/diagram/gridlines-dots/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/gridlines-dots/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/gridlines-dots" %} +{% endif %} + +![Dot Grid](./images/grid-dots.png) + ## Snapping +When you draw, resize, or move a diagram element on the page, you can set it to align or snap to the nearest intersection, regardless of whether the grid is visible. + ## Snap to lines -This feature allows the diagram objects to snap to the nearest intersection of gridlines while being dragged or resized. This feature enables easier alignment during layout or design. +This feature allows diagram objects to snap to the nearest intersection of gridlines while being dragged or resized, facilitating easier alignment during layout or design. + +Snapping to gridlines can be enabled or disabled using the [`snapConstraints`](../api/diagram/snapSettings#constraints-SnapConstraints) property of the SnapSettings class. The default value is All. -Snapping to gridlines can be enabled/disabled with the [`snapSettings.snapConstraints`](../api/diagram/snapSettings#constraints-SnapConstraints). The following code example illustrates how to enable/disable the snapping to gridlines. {% if page.publishingplatform == "typescript" %} @@ -157,72 +200,148 @@ Snapping to gridlines can be enabled/disabled with the [`snapSettings.snapConstr {% previewsample "page.domainurl/code-snippet/diagram/gridlines-cs4" %} {% endif %} -## Customization of snap intervals +![Snap to lines](./images/snapToLines.gif) -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. +## Snap to objects + +The snap-to-object feature provides visual cues to assist with aligning and spacing diagram elements. A node can snap to its neighboring objects based on specific alignments, such as the same size and position. These alignments are visually represented by smart guide lines in a cyan shade, with the color code '#07EDE1'. + +The [`snapObjectDistance`](../api/diagram/snapSettings/#snapobjectdistance) property allows you to define minimum distance between the selected object and the nearest object. By default, the snap object distance is set to 5. {% if page.publishingplatform == "typescript" %} {% tabs %} {% highlight ts tabtitle="index.ts" %} -{% include code-snippet/diagram/gridlines-cs5/index.ts %} +{% include code-snippet/diagram/gridlines-cs6/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} -{% include code-snippet/diagram/gridlines-cs5/index.html %} +{% include code-snippet/diagram/gridlines-cs6/index.html %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/gridlines-cs5" %} +{% previewsample "page.domainurl/code-snippet/diagram/gridlines-cs6" %} {% elsif page.publishingplatform == "javascript" %} {% tabs %} {% highlight js tabtitle="index.js" %} -{% include code-snippet/diagram/gridlines-cs5/index.js %} +{% include code-snippet/diagram/gridlines-cs6/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} -{% include code-snippet/diagram/gridlines-cs5/index.html %} +{% include code-snippet/diagram/gridlines-cs6/index.html %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/gridlines-cs5" %} +{% previewsample "page.domainurl/code-snippet/diagram/gridlines-cs6" %} {% endif %} -## Snap to objects +![Snap to object](./images/snapToObject.gif) -The snap to object provides visual cues to assist with aligning and spacing diagram elements. A node can be snapped with its neighboring objects based on certain alignments. Such alignments are visually represented as smart guides. +## Snap Angle -The [`snapObjectDistance`](../api/diagram/snapSettings/#snapobjectdistance) property allows you to define minimum distance between the selected object and the nearest object. +The [`snapAngle`](../api/diagram/snapSettings/#snapangle) property defines the increments by which an object can be rotated within a diagram. -The [`snapAngle`](../api/diagram/snapSettings/#snapangle) property allows you to define the snap angle by which the object needs to be rotated. +For example, if the snapAngle is set to 15 degrees, an object can only be rotated to angles that are multiples of 15 degrees, such as 15°, 30°, 45°, and so on. This ensures precise angule alignment and consistent object positioning, enhancing the overall design accuracy. By default, the snap angle is set to 5" -The [`snapConstraints`](../api/diagram/snapSettings/#constraints) property allows you to enable or disable the certain features of the snapping, refer to `snapConstraints`. +The following code example demonstrates how to set the `snapAngle` property and update it dynamically. -The [`snapLineColor`](../api/diagram/snapSettings/#snaplinecolor) property allows you to define the color of the snapline. +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/diagram/gridlines-snapAngle/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/gridlines-snapAngle/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/gridlines-snapAngle" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/diagram/gridlines-snapAngle/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/gridlines-snapAngle/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/gridlines-snapAngle" %} +{% endif %} + +![Snap Angle](./images/snapAngle.gif) + +## Snap line color + +The [`snapLineColor`](../api/diagram/snapSettings/#snaplinecolor) property allows you to define the color of the snapline used in the diagram. By customizing the snapline color, you can enhance the visual contrast and visibility of these guides, making it easier to achieve accurate alignment. + +This property accepts color values in various formats, such as hexadecimal, RGB, or predefined color names, providing flexibility in how you choose to represent the snaplines in your diagramming application. By default the snap line color is set to `'#07EDE1'`. + +The following code example demonstrates how to set the `snapLineColor` property and update it dynamically. {% if page.publishingplatform == "typescript" %} {% tabs %} {% highlight ts tabtitle="index.ts" %} -{% include code-snippet/diagram/gridlines-cs6/index.ts %} +{% include code-snippet/diagram/gridlines-snapLineColor/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} -{% include code-snippet/diagram/gridlines-cs6/index.html %} +{% include code-snippet/diagram/gridlines-snapLineColor/index.html %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/gridlines-cs6" %} +{% previewsample "page.domainurl/code-snippet/diagram/gridlines-snapLineColor" %} {% elsif page.publishingplatform == "javascript" %} {% tabs %} {% highlight js tabtitle="index.js" %} -{% include code-snippet/diagram/gridlines-cs6/index.js %} +{% include code-snippet/diagram/gridlines-snapLineColor/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} -{% include code-snippet/diagram/gridlines-cs6/index.html %} +{% include code-snippet/diagram/gridlines-snapLineColor/index.html %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/gridlines-cs6" %} -{% endif %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/diagram/gridlines-snapLineColor" %} +{% endif %} + + +## 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. + +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/diagram/gridlines-cs5/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/gridlines-cs5/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/gridlines-cs5" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/diagram/gridlines-cs5/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/gridlines-cs5/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/gridlines-cs5" %} +{% endif %} + + +## Snap constraints + +The [`snapConstraints`](../api/diagram/snapSettings/#constraints) property allows you to enable or disable the certain features of the snapping, for detailed information refer to [`constraints`](./constraints). \ No newline at end of file diff --git a/ej2-javascript/diagram/images/grid-dots.png b/ej2-javascript/diagram/images/grid-dots.png new file mode 100644 index 000000000..da2d4ef3e Binary files /dev/null and b/ej2-javascript/diagram/images/grid-dots.png differ diff --git a/ej2-javascript/diagram/images/line-appearance.png b/ej2-javascript/diagram/images/line-appearance.png new file mode 100644 index 000000000..f01e86f61 Binary files /dev/null and b/ej2-javascript/diagram/images/line-appearance.png differ diff --git a/ej2-javascript/diagram/images/line-interval.png b/ej2-javascript/diagram/images/line-interval.png new file mode 100644 index 000000000..e58cffade Binary files /dev/null and b/ej2-javascript/diagram/images/line-interval.png differ diff --git a/ej2-javascript/diagram/images/overview-interaction.gif b/ej2-javascript/diagram/images/overview-interaction.gif new file mode 100644 index 000000000..0f6bb8b1a Binary files /dev/null and b/ej2-javascript/diagram/images/overview-interaction.gif differ diff --git a/ej2-javascript/diagram/images/snapAngle.gif b/ej2-javascript/diagram/images/snapAngle.gif new file mode 100644 index 000000000..09a1b6846 Binary files /dev/null and b/ej2-javascript/diagram/images/snapAngle.gif differ diff --git a/ej2-javascript/diagram/images/snapToLines.gif b/ej2-javascript/diagram/images/snapToLines.gif new file mode 100644 index 000000000..46fd8efaa Binary files /dev/null and b/ej2-javascript/diagram/images/snapToLines.gif differ diff --git a/ej2-javascript/diagram/images/snapToObject.gif b/ej2-javascript/diagram/images/snapToObject.gif new file mode 100644 index 000000000..80fd8bc24 Binary files /dev/null and b/ej2-javascript/diagram/images/snapToObject.gif differ diff --git a/ej2-javascript/diagram/js/nodes-interaction.md b/ej2-javascript/diagram/js/nodes-interaction.md index 5f751357f..5c5757775 100644 --- a/ej2-javascript/diagram/js/nodes-interaction.md +++ b/ej2-javascript/diagram/js/nodes-interaction.md @@ -96,4 +96,54 @@ A node can be rotated at runtime by using the [`rotate`](../api/diagram/#rotate) {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/nodes-rotate" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/diagram/nodes-rotate" %} + + +## Flip + +The diagram Provides support to flip the node. [`flip`](../api/diagram/node#flip) is performed to give the mirrored image of the original element. + +The flip types are as follows: + +| Flip direction | Description | +| -------- | ----------- | +|HorizontalFlip |[`Horizontal`](../api/diagram/flipDirection) is used to flip the node to be mirrored across the horizontal axis.| +|VerticalFlip|[`Vertical`](../api/diagram/flipDirection) is used to flip the node to be mirrored across the vertical axis.| +|Both|[`Both`](../api/diagram/flipDirection) is used to flip the node to be mirrored across the horizontal and vertical axes.| +|None|It is used to disable all the flip behavior.| + +The following code illustrates how to provide the mirror image of the original element. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/diagram/nodes-cs4/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/nodes-cs4/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/nodes-cs4" %} + +### Flip modes + +The [`flipMode`](../api/diagram/flipMode/) is used to control the behavior of the flip object whether to flip the object along with the port and label. + +| FlipMode | Description | +| -------- | -------- | +|Label| It enables or disables the flip for an object’s label.| +|Port| It enables or disables the flip for an object’s port.| +|All| It enables or disables the flip for both the object’s label and port.| +|None| It is used to disable all the flip mode behavior.| + + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/diagram/nodes-flipMode/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/nodes-flipMode/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/nodes-flipMode" %} \ No newline at end of file diff --git a/ej2-javascript/diagram/overview.md b/ej2-javascript/diagram/overview.md index 6405567ba..605b08cd3 100644 --- a/ej2-javascript/diagram/overview.md +++ b/ej2-javascript/diagram/overview.md @@ -11,30 +11,60 @@ domainurl: ##DomainURL## # Overview in ##Platform_Name## Diagram control -Overview control allows you to see a preview or an overall view of the entire content of a diagram. This helps you to look at the overall picture of a large diagram and also to navigate, pan, or zoom, on a particular position of the page. +The Overview control allows you to see a preview or an overall view of the entire content of a diagram. This helps you to grasp the overall picture of a large diagram and navigate, pan, or zoom to a specific position on the page. -When you work on a very large diagram, you may not know the part you are actually working on, or navigation from one part to another might be difficult. One solution for navigation is to zoom out the entire diagram and find where you are. Then, you can zoom in a particular area you want to. This solution is not suitable when you need some frequent navigation. +## Usage scenario -Overview control solves these problems by showing a preview, that is, an overall view of the entire diagram. A rectangle indicates viewport of the diagram. Navigation becomes easy by dragging this rectangle. +When working on a very large diagram, it can be challenging to know which part you are actually focusing on or to navigate from one section to another. One solution for navigation is to zoom out to view the entire diagram and locate your position. Then, you can zoom in on the specific area you need. However, this method is not ideal for frequent navigation. + +The Overview control addresses these issues by providing a preview, or overall view, of the entire diagram. A rectangle indicates the viewport of the diagram, making navigation easy by dragging this rectangle to the desired section. ## Create overview -The `sourceID` property of overview should be set with the corresponding diagram ID for the overall view. +To create an overview, the [`sourceID`](../api/overview/overviewModel/#sourceid) property of the overview should be set with the corresponding diagram Id for the overall view. -The `width` and `height` properties of the overview allow you to define the size of the overview. +The [`width`](../api/overview/overviewModel/#width) and [`height`](../api/overview/overviewModel/#height) properties of the overview allow you to define its size. -The following code illustrates how to create overview. +The following code illustrates how to create an overview: -### Zoom and Pan +{% if page.publishingplatform == "typescript" %} -In overview, the view port of the diagram is highlighted with a red colored rectangle. Diagram can be zoomed/panned by interacting with that. You can interact with overview as follows: + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/diagram/overview-create/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/overview-create/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/overview-create" %} -* Resize the rectangle: Zooms in/out the diagram. -* Drag the rectangle: Pans the diagram. -* Click at a position: Navigates to the clicked region. -* Choose a particular region by clicking and dragging: Navigates to the specified region. +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/diagram/overview-create/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/overview-create/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/overview-create" %} +{% endif %} -The following image shows how the diagram is zoomed/panned with overview. + +### Overview interactions + +In the overview, the viewport of the diagram is highlighted with a red color rectangle. You can zoom and pan the diagram by interacting with this rectangle. + +You can interact with the overview as follows: + +* Resize the rectangle: Zooms in/out of the diagram. +* Drag the rectangle: Pans the diagram. +* Click on a position: Navigates to the clicked region. +* Select a specific region by clicking and dragging: Navigates to the specified region. {% if page.publishingplatform == "typescript" %} @@ -62,3 +92,11 @@ The following image shows how the diagram is zoomed/panned with overview. {% previewsample "page.domainurl/code-snippet/diagram/overview-cs1" %} {% endif %} + +The following Gif image displays the interactions with overview. + +![Overview-interaction](images/overview-interaction.gif) + + + + diff --git a/ej2-javascript/diagram/ruler.md b/ej2-javascript/diagram/ruler.md index 16446304f..3a4e68888 100644 --- a/ej2-javascript/diagram/ruler.md +++ b/ej2-javascript/diagram/ruler.md @@ -11,15 +11,13 @@ domainurl: ##DomainURL## # Ruler in ##Platform_Name## Diagram control -The Ruler provides a horizontal and vertical guide for measuring in the Diagram control. The Ruler can be used to measure the diagram objects, indicate positions, and align diagram elements. This is especially useful in creating scale models. +The ruler provides horizontal and vertical guides for measuring in the diagram control. It can be used to measure diagram objects, indicate positions, and align diagram elements, making it especially useful for creating scale models.The ruler also includes a position indicator that displays the precise location of the mouse cursor on the diagram canvas, with the default color of the position indicator marker being red. -## Adding Rulers to the Diagram +## Define rulers -* The [`rulerSettings`](https://ej2.syncfusion.com/documentation/api/diagram/rulerSettings/)property is used to control the visibility and appearance of the ruler in the diagram. +The [`rulerSettings`](../api/diagram/rulerSettings/) property of diagram is used to control the visibility and appearance of the ruler in the diagram. -* The RulerSettings [`showRulers`](https://ej2.syncfusion.com/documentation/api/diagram/rulerSettings/#showrulers)property is used to show or hide the rulers in the diagram. - -* The RulerSettings [`horizontalRuler`](https://ej2.syncfusion.com/documentation/api/diagram/rulerSettings/#horizontalruler) and [`verticalRuler`](https://ej2.syncfusion.com/documentation/api/diagram/rulerSettings/#verticalruler) properties are used to customize the rulers appearance in the diagram. +The [`showRulers`](../api/diagram/rulerSettings/#showrulers) property is used to show or hide the rulers in the diagram. The following code shows how to add a ruler to the diagram. @@ -52,15 +50,15 @@ The following code shows how to add a ruler to the diagram. ## Customizing the Ruler -By default, the ruler segments are arranged based on pixel values. +[`horizontalRuler`](../api/diagram/rulerSettings/#horizontalruler) and [`verticalRuler`](../api/diagram/rulerSettings/#verticalruler) properties of `rulerSettings` are used to customize the rulers appearance in the diagram. -* The HorizontalRuler’s [`interval`](https://ej2.syncfusion.com/documentation/api/diagram/diagramRuler/#interval)property allows you to define the interval between ruler segments and the [`segmentWidth`](https://ej2.syncfusion.com/documentation/api/diagram/diagramRuler/#segmentwidth) property allows you to define the segment width of the ruler. Similarly, you can use the VerticalRuler’s [`interval`](https://ej2.syncfusion.com/documentation/api/diagram/diagramRuler/#interval) and [`segmentWidth`](https://ej2.syncfusion.com/documentation/api/diagram/diagramRuler/#segmentwidth) properties are used to define the interval and segment width of the vertical ruler +By default, the ruler segments are arranged based on pixel values. -* The HorizontalRuler’s [`tickAlignment`](https://ej2.syncfusion.com/documentation/api/diagram/diagramRuler/#tickalignment) property is used to align the ruler tick either left or right side of the ruler. The VerticalRuler’s [`tickAlignment`](https://ej2.syncfusion.com/documentation/api/diagram/diagramRuler/#tickalignment) property is used to align the ruler tick either top or bottom side of the ruler. +The HorizontalRuler’s [`interval`](../api/diagram/diagramRuler/#interval) property defines the spacing between ruler segments, and the [`segmentWidth`](../api/diagram/diagramRuler/#segmentwidth) property sets the width of each segment. Similarly, the VerticalRuler’s [`interval`](../api/diagram/diagramRuler/#interval) and [`segmentWidth`](../api/diagram/diagramRuler/#segmentwidth) properties control the interval and segment width for the vertical ruler. -* The HorizontalRuler’s [`arrangeTick`](https://ej2.syncfusion.com/documentation/api/diagram/diagramRuler/#arrangetick) and VerticalRuler’s [`arrangeTick`](https://ej2.syncfusion.com/documentation/api/diagram/diagramRuler/#arrangetick) function is provided for the purpose of customizing the appearance of ruler ticks. It will be called for each tick rendering. +The HorizontalRuler’s [`tickAlignment`](../api/diagram/diagramRuler/#tickalignment) property aligns the ruler ticks to the left or right side, while the VerticalRuler’s [`tickAlignment`](../api/diagram/diagramRuler/#tickalignment) aligns them to the top or bottom. -* The HorizontalRuler’s [`markerColor`](https://ej2.syncfusion.com/documentation/api/diagram/diagramRuler/#markercolor) and VerticalRuler’s [`markerColor`](https://ej2.syncfusion.com/documentation/api/diagram/diagramRuler/#markercolor) properties are used to define the ruler marker color and marker will be shown when performing the interaction in the diagram. +The HorizontalRuler’s [`thichness`](../api/diagram/diagramRuler/#thickness) property sets the thickness of the horizontal ruler, and the VerticalRuler’s [`thichness`](../api/diagram/diagramRuler/#thickness) property sets the thickness of the vertical ruler. The following code shows how the diagram ruler can be customized. @@ -90,4 +88,42 @@ The following code shows how the diagram ruler can be customized. {% previewsample "page.domainurl/code-snippet/diagram/customRuler-cs1" %} {% endif %} ->Note : The MarkerColor property can be customized using the [`marker`](./style/#customizing-the-ruler) CSS style. + +### Arrange tick + +The HorizontalRuler’s [`arrangeTick`](../api/diagram/diagramRuler/#arrangetick) and VerticalRuler’s [`arrangeTick`](../api/diagram/diagramRuler/#arrangetick) functions allow you to customize the appearance of ruler ticks. These functions are called for each tick rendering. + +The following code demonstrates how to use the `arrangeTick` function to customize the tickLength. + +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/diagram/ruler-cs2/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/ruler-cs2/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/ruler-cs2" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/diagram/ruler-cs2/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/ruler-cs2/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/ruler-cs2" %} +{% endif %} + +### Marker color + +The HorizontalRuler’s [`markerColor`](../api/diagram/diagramRuler/#markercolor) and VerticalRuler’s [`markerColor`](../api/diagram/diagramRuler/#markercolor) properties are used to define the ruler marker color and marker will be shown while hovering mouse over the diagram canvas. + +N> : The MarkerColor property can be customized using the [`marker`](./style/#customizing-the-ruler-marker-color) CSS style. diff --git a/ej2-javascript/diagram/style.md b/ej2-javascript/diagram/style.md index 1287367b8..fc15d4403 100644 --- a/ej2-javascript/diagram/style.md +++ b/ej2-javascript/diagram/style.md @@ -173,6 +173,17 @@ Use the following CSS to ruler overlap properties. background-color: red; } +``` +## Customizing the ruler marker color + +Use the following CSS to customize the marker color + +```scss + +.e-diagram .e-d-ruler-marker { + stroke: yellow; + } + ``` ## Customizing the text edit diff --git a/ej2-javascript/diagram/tool-tip.md b/ej2-javascript/diagram/tool-tip.md index c84713233..fa3288334 100644 --- a/ej2-javascript/diagram/tool-tip.md +++ b/ej2-javascript/diagram/tool-tip.md @@ -13,65 +13,51 @@ domainurl: ##DomainURL## -In Graphical User Interface (GUI), the tooltip is a message that is displayed when mouse hovers over an element. The diagram provides tooltip support while dragging, resizing, rotating a node, and when the mouse hovers any diagram element. +In a Graphical User Interface (GUI), a tooltip is a message that appears when the mouse hovers over an element. The diagram control provides tooltip support while dragging, resizing, rotating a node, and when the mouse hovers over any diagram element. ## Default tooltip -By default, diagram displays a tooltip to provide the size, position, and angle related information while dragging, resizing, and rotating. The following images illustrate how the diagram displays the node information during an interaction. +By default, the diagram displays a tooltip showing size, position, and angle information while dragging, resizing, or rotating a node. The following images illustrate how the diagram displays node information during these interactions. | Drag | Resize | Rotate | |---|---|---| | ![ToolTip During Drag](images/Tooltip_img1.png) | ![ToolTip During Resize](images/Tooltip_img2.png) | ![ToolTip During Rotate](images/Tooltip_img3.png) | -## Common tooltip for all nodes and connectors +### Disable default tooltip -The diagram provides support to show tooltip when the mouse hovers over any node/connector. To show tooltip on mouse over, the [`tooltip`](../api/diagram#tooltip) property of diagram model needs to be set with the tooltip [`content`](../api/diagram/diagramTooltip/#content) and [`position`](../api/diagram/diagramTooltip/#position) as shown in the following example. +The default tooltip that appears while interacting with nodes can be disabled by removing the tooltip constraints from the [`selectorConstraints`](../api/diagram/selectorconstraints/) of the [`selectedItems`](../api/diagram/selectormodel/) property of the diagram. {% if page.publishingplatform == "typescript" %} {% tabs %} {% highlight ts tabtitle="index.ts" %} -{% include code-snippet/diagram/tooltip-cs1/index.ts %} +{% include code-snippet/diagram/tooltip-disDefTooltip/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} -{% include code-snippet/diagram/tooltip-cs1/index.html %} +{% include code-snippet/diagram/tooltip-disDefTooltip/index.html %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/tooltip-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/tooltip-disDefTooltip" %} {% elsif page.publishingplatform == "javascript" %} {% tabs %} {% highlight js tabtitle="index.js" %} -{% include code-snippet/diagram/tooltip-cs1/index.js %} +{% include code-snippet/diagram/tooltip-disDefTooltip/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} -{% include code-snippet/diagram/tooltip-cs1/index.html %} +{% include code-snippet/diagram/tooltip-disDefTooltip/index.html %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/tooltip-cs1" %} +{% previewsample "page.domainurl/code-snippet/diagram/tooltip-disDefTooltip" %} {% endif %} -### Disable tooltip at runtime - -The tooltip on mouse over can be disabled by assigning the [`tooltip`](../api/diagram#tooltip) property as `null`. The following code example illustrates how to disable the mouse over tooltip at runtime. - -```ts - -//Initializes the diagram component -let diagram: Diagram = new Diagram({ - width: '100%', height: '350px', - //Disables mouse over tooltip at runtime - tooltip: null -}, '#element'); - -``` ## Tooltip for a specific node/connector -The tooltip can be customized for each node and connector. Remove the **InheritTooltip** option from the [`constraints`](../api/diagram#constraints) of that node/connector. 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`](../aapi/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" %} @@ -100,6 +86,69 @@ The tooltip can be customized for each node and connector. Remove the **InheritT {% previewsample "page.domainurl/code-snippet/diagram/tooltip-cs2" %} {% endif %} +## Inherit diagram tooltip + +The diagram supports inheriting the diagram tooltip when the mouse hovers over any node or connector. To show a tooltip on mouse over, set the diagram's [`tooltip`](../api/diagram#tooltip) property with the tooltip [`content`](../api/diagram/diagramTooltip/#content) and [`position`](../api/diagram/diagramTooltip/#position). Ensure that the nodes and connectors have their constraints set to **InheritTooltip**, as shown in the following example. + +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/diagram/tooltip-cs1/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/tooltip-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/tooltip-cs1" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/diagram/tooltip-cs1/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/tooltip-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/tooltip-cs1" %} +{% endif %} + +### Disable tooltip at runtime + +The tooltip on mouse over can be disabled by setting the diagram's [`tooltip`](../api/diagram#tooltip) property to `null`. The following code example illustrates how to disable the mouse over tooltip at runtime. + +{% if page.publishingplatform == "typescript" %} + +```ts + +//Initializes the diagram component +let diagram: Diagram = new Diagram({ + width: '100%', height: '350px', + //Disables mouse over tooltip at runtime + tooltip: null +}, '#element'); + +``` + +{% elsif page.publishingplatform == "javascript" %} + +```ts + +//Initializes the diagram component +let diagram = new ej.diagrams.Diagram({ + width: '100%', height: '350px', + //Disables mouse over tooltip at runtime + tooltip: null +}, '#element'); + +``` + +{% endif %} + ## Tooltip for Ports The tooltip feature has been implemented to support Ports, providing the ability to display information or descriptions when the mouse hovers over them. @@ -108,9 +157,9 @@ To display tooltips on mouseover, set the desired tooltip [`content`](../api/dia Tooltips for Ports can be enabled or disabled using the [`PortConstraints`](../api/diagram/port#constraints-portconstraints) Tooltip property. - +{% if page.publishingplatform == "typescript" %} ```ts -let ports: [{ +let ports = [{ offset: {x: 1,y: 0.5}, tooltip: {content: 'Port Tootip'}, @@ -121,6 +170,22 @@ let ports: [{ constraints: PortConstraints.Default ~& PortConstraints.ToolTip }] ``` +{% elsif page.publishingplatform == "javascript" %} + +```javascript +let ports = [{ + offset: {x: 1,y: 0.5}, + tooltip: {content: 'Port Tootip'}, + + //enable Port Tooltip Constraints + constraints: ej.diagrams.PortConstraints.Default | ej.diagrams.PortConstraints.ToolTip, + + //disable Port Tooltip Constraints + constraints: ej.diagrams.PortConstraints.Default ~& ej.diagrams.PortConstraints.ToolTip + }] +``` + +{% endif %} Dynamic modification of tooltip content is supported, allowing you to change the displayed tooltip content during runtime. @@ -132,9 +197,6 @@ Dynamic modification of tooltip content is supported, allowing you to change the } ``` -The following image illustrates how the diagram displays tooltips during an interaction with ports: - -![Tooltip](images/PortTooltip.gif) Here, the code provided below demonstrates the port tooltip Interaction. @@ -165,9 +227,14 @@ Here, the code provided below demonstrates the port tooltip Interaction. {% previewsample "page.domainurl/code-snippet/diagram/tooltip-cs7" %} {% endif %} + +The following image illustrates how the diagram displays tooltips during an interaction with ports: + +![Tooltip](images/PortTooltip.gif) + ## Tooltip template content -Any text or image can be added to the tooltip, by default. To customize the tooltip layout or to create your own visualized element on the tooltip, template can be used. +The tooltip template content allows you to customize the tooltip by using HTML templates. This means you can define the structure and style of the tooltip using HTML, providing greater flexibility and control over its appearance. By leveraging HTML templates, you can include rich content such as formatted text, images, and other HTML elements within the tooltip, enhancing the user experience with more informative and visually appealing tooltips. The following code example illustrates how to add formatted HTML content to the tooltip. @@ -202,7 +269,7 @@ The following code example illustrates how to add formatted HTML content to the ### Tooltip relative to object -The diagram provides support to show tooltip around the node/connector that is hovered by the mouse. The tooltip can be aligned by using the [`position`](../api/diagram/diagramTooltip#position) property of the tooltip. The [`relativeMode`](../api/diagram/diagramTooltip#relativemode) property of the tooltip defines whether the tooltip has to be displayed around the object or at the mouse position. +The diagram supports displaying a tooltip around the node or connector that is hovered over by the mouse. The tooltip's alignment can be adjusted using the [`position`](../api/diagram/diagramTooltip#position) property. The [`relativeMode`](../api/diagram/diagramTooltip#relativemode) property specifies whether the tooltip should be displayed around the object or at the mouse position. The following code example illustrates how to position the tooltip around object. @@ -235,7 +302,7 @@ The following code example illustrates how to position the tooltip around object ### Tooltip relative to mouse position -To display the tooltip at mouse position, need to set **mouse** option to the [`relativeMode`](../api/diagram/diagramTooltip#relativemode) property of the tooltip. +To display the tooltip at the mouse position, set the **mouse** option in the [`relativeMode`](../api/diagram/diagramTooltip#relativemode) property of the tooltip. The following code example illustrates how to show tooltip at mouse position. @@ -268,7 +335,9 @@ The following code example illustrates how to show tooltip at mouse position. ## Tooltip animation -To animate the tooltip, a set of specific animation effects are available, and it can be controlled by using the [`animation`](../api/diagram/diagramTooltip#animation) property. The animation property also allows you to set delay, duration, and various other effects of your choice. +To animate the tooltip, you can use a range of animation effects controlled by the [`animation`](../api/diagram/diagramTooltip#animation) property. This property allows you to customize the delay, duration, and various other effects according to your preferences. + +Refer the following sample where we used zoomIn animation for tooltip open and zoomOut animation for tooltip close with delay and duration. {% if page.publishingplatform == "typescript" %} @@ -295,4 +364,103 @@ To animate the tooltip, a set of specific animation effects are available, and i {% endtabs %} {% previewsample "page.domainurl/code-snippet/diagram/tooltip-cs6" %} -{% endif %} \ No newline at end of file +{% endif %} + +## Sticky tooltip + +A sticky tooltip will remain visible even after you move the mouse away from the node or connector. You can activate this feature by setting the [`isSticky`](../api/diagram/diagramTooltipModel/#issticky) property of the tooltip. + +The following example shows how to render sticky tooltip. + +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/diagram/tooltip-isSticky/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/tooltip-isSticky/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/tooltip-isSticky" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/diagram/tooltip-isSticky/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/tooltip-isSticky/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/tooltip-isSticky" %} +{% endif %} + +## Hide tooltip pointer + +The [`showTipPointer`](../api/diagram/diagramTooltipModel/#showtippointer) property allows to control the visibility of tooltip pointer. By default, the `showTipPointer` is set as true. + +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/diagram/tooltip-tipPointer/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/tooltip-tipPointer/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/tooltip-tipPointer" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/diagram/tooltip-tipPointer/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/tooltip-tipPointer/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/tooltip-tipPointer" %} +{% endif %} + +## Tooltip size + +By default, the size of the tooltip is calculated based on its content. If you want to customize the size, you can use the [`width`](../api/diagram/diagramTooltipModel/#width) and [`height`](../api/diagram/diagramTooltipModel/#height) properties of the tooltip. + +The following code example shows how to set the size for the tooltip: + +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/diagram/tooltip-size/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/tooltip-size/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/tooltip-size" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/diagram/tooltip-size/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/tooltip-size/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/tooltip-size" %} +{% endif %} + + diff --git a/ej2-javascript/diagram/ts/nodes-interaction.md b/ej2-javascript/diagram/ts/nodes-interaction.md index d53228bbf..04d7491a4 100644 --- a/ej2-javascript/diagram/ts/nodes-interaction.md +++ b/ej2-javascript/diagram/ts/nodes-interaction.md @@ -96,4 +96,53 @@ A node can be rotated at runtime by using the [`rotate`](../api/diagram/#rotate) {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/diagram/nodes-rotate" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/diagram/nodes-rotate" %} + +## Flip + +The diagram Provides support to flip the node. [`flip`](../api/diagram/node#flip) is performed to give the mirrored image of the original element. + +The flip types are as follows: + +| Flip direction | Description | +| -------- | ----------- | +|HorizontalFlip |[`Horizontal`](../api/diagram/flipDirection) is used to flip the node to be mirrored across the horizontal axis.| +|VerticalFlip|[`Vertical`](../api/diagram/flipDirection) is used to flip the node to be mirrored across the vertical axis.| +|Both|[`Both`](../api/diagram/flipDirection) is used to flip the node to be mirrored across the horizontal and vertical axes.| +|None|It is used to disable all the flip behavior.| + +The following code illustrates how to provide the mirror image of the original element. + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/diagram/nodes-cs4/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/nodes-cs4/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/nodes-cs4" %} + +### Flip modes + +The [`flipMode`](../api/diagram/flipMode/) is used to control the behavior of the flip object whether to flip the object along with the port and label. + +| FlipMode | Description | +| -------- | -------- | +|Label| It enables or disables the flip for an object’s label.| +|Port| It enables or disables the flip for an object’s port.| +|All| It enables or disables the flip for both the object’s label and port.| +|None| It is used to disable all the flip mode behavior.| + + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/diagram/nodes-flipMode/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/diagram/nodes-flipMode/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/diagram/nodes-flipMode" %} \ No newline at end of file diff --git a/ej2-javascript/pdfviewer/how-to/add-save-button.md b/ej2-javascript/pdfviewer/how-to/add-save-button.md new file mode 100644 index 000000000..dfcd6a61a --- /dev/null +++ b/ej2-javascript/pdfviewer/how-to/add-save-button.md @@ -0,0 +1,111 @@ +--- +layout: post +title: Add save button in Toolbar in ##Platform_Name## Pdfviewer control | Syncfusion +description: Learn here all about How to add Save button in toolbar in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more. +platform: ej2-javascript +control: Toolbar +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Add Save button in Built-In Toolbar + +PDF Viewer allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar. + +* Save button - New 'save' button-item can defined by [**CustomToolbarItemModel**](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/customToolbarItem/) and with existing items in [**ToolbarSettings**](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/) property. Newly added save button-item click action can be defined in [`toolbarclick`](https://ej2.syncfusion.com/javascript/documentation/api/toolbar/clickEventArgs/). + +* Show, Hide - save button-item can be shown or hidden using the [`ToolbarSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarItem/). + +* Enable, Disable - Toolbar items can be enabled or disable using [`enabletoolbaritem`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbar/#enabletoolbaritem) + +{% tabs %} +{% highlight js tabtitle="Standalone" %} + var toolItem1 = { + prefixIcon: 'e-icons e-save', + id: 'download', + text: 'Save', + tooltipText: 'Save button', + align: 'Left' +}; +var pdfviewer = new ej.pdfviewer.PdfViewer({ + documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl:'https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib', + toolbarSettings : { toolbarItems: ['OpenOption', toolItem1, 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm'] } + }); +ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields); + +//PDF Viewer control rendering starts +pdfviewer.appendTo('#PdfViewer'); +pdfviewer.toolbarClick = function (args) { + if (args.item && args.item.id === 'download') { + pdfviewer.download(); + } +}; +function OnCreateSearch() { + this.addIcon('prepend', 'e-icons e-search'); +} + +{% endhighlight %} +{% highlight js tabtitle="Server-Backed" %} + +var toolItem1 = { + prefixIcon: 'e-icons e-save', + id: 'download', + text: 'Save', + tooltipText: 'Save button', + align: 'Left' +}; +var pdfviewer = new ej.pdfviewer.PdfViewer({ + documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer', + toolbarSettings : { toolbarItems: ['OpenOption', toolItem1, 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm'] } + }); +ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields); + +//PDF Viewer control rendering starts +pdfviewer.appendTo('#PdfViewer'); +pdfviewer.toolbarClick = function (args) { + if (args.item && args.item.id === 'download') { + pdfviewer.download(); + } +}; +function OnCreateSearch() { + this.addIcon('prepend', 'e-icons e-search'); +} + +{% endhighlight %} +{% endtabs %} + + +N> Default value of toolbar items is ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm'] + +### Align Property + +The align property is used to specify the alignment of a `save` button-item within the toolbar. + +`Left`: Aligns the item to the left side of the toolbar. +`Right`: Aligns the item to the right side of the toolbar. + +### Tooltip Property + +The tooltip property is used to set the tooltip text for a `save` button-item. Tooltip provides additional information when a user hovers over the item. + +### CssClass Property + +The cssClass property is used to apply custom CSS classes to a `save` button-item. It allows custom styling of the `save` button-item. + +### Prefix Property + +The prefix property is used to set the CSS class or icon that should be added as a prefix to the existing content of the `save` button-item. + +### ID Property + +The id property within a CustomToolbarItemModel is a compulsory attribute that plays a vital role in toolbar customization. It serves as a unique identifier for each toolbar item, facilitating distinct references and interactions. + +When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item. +These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel`` in the context of Syncfusion PDF Viewer. When configuring the toolbar using the `ToolbarSettings`` property, you can include these properties to customize the appearance and behavior of each toolbar item. + +N> When customizing save button-item, you have the flexibility to include either icons or text based on your design preference. + +[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to) diff --git a/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-js.md b/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-js.md new file mode 100644 index 000000000..75ab09082 --- /dev/null +++ b/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-js.md @@ -0,0 +1,61 @@ +--- +layout: post +title: Restrict Zoom Percentage in ##Platform_Name## Pdfviewer control | Syncfusion +description: Learn here all how to restrict zoom percentage in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more. +platform: ej2-javascript +control: PDF Viewer +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# How to Restrict Zoom Percentage on Mobile Devices + +In Syncfusion PDF Viewer, you can easily restrict the zoom percentage on mobile devices using the **maxZoom** and **minZoom** property. This feature allows you to set specific limits for zooming, ensuring smoother scrolling performance and efficient document loading, on mobile devices. + +{% tabs %} +{% highlight js tabtitle="Standalone" %} + +var pdfviewer = new ej.pdfviewer.PdfViewer({ + documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", + resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib" + }); +ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); +pdfviewer.appendTo('#PdfViewer'); + +pdfviewer.documentLoad = (): void => { + if (Browser.isDevice && !viewer.enableDesktopMode) { + pdfviewer.maxZoom = 200; + pdfviewer.minZoom = 10; + } + else{ + pdfviewer.zoomMode = 'Default'; + } +}; + +{% endhighlight %} +{% highlight js tabtitle="Server-Backed" %} + +var pdfviewer = new ej.pdfviewer.PdfViewer({ + documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", + serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer' + }); +ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); +pdfviewer.appendTo('#PdfViewer'); + +pdfviewer.documentLoad = (): void => { + if (Browser.isDevice && !viewer.enableDesktopMode) { + pdfviewer.maxZoom = 200; + pdfviewer.minZoom = 10; + } + else{ + pdfviewer.zoomMode = 'Default'; + } +}; + +{% endhighlight %} +{% endtabs %} + +By implementing this, you ensure that the maximum zoom percentage on mobile devices is limited to 200% and the minimum zoom percentage is set to 10%. This prevents performance issues that may arise from excessive zooming on mobile platforms. diff --git a/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-ts.md b/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-ts.md new file mode 100644 index 000000000..ee2b8353d --- /dev/null +++ b/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-ts.md @@ -0,0 +1,69 @@ +--- +layout: post +title: Restrict Zoom Percentage in ##Platform_Name## Pdfviewer control | Syncfusion +description: Learn here all how to restrict zoom percentage in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more. +platform: ej2-javascript +control: PDF Viewer +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# How to Restrict Zoom Percentage on Mobile Devices + +In Syncfusion PDF Viewer, you can easily restrict the zoom percentage on mobile devices using the **maxZoom** and **minZoom** property. This feature allows you to set specific limits for zooming, ensuring smoother scrolling performance and efficient document loading, on mobile devices. + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, + LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, + TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, + BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer); + +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib"; +pdfviewer.appendTo('#PdfViewer'); + +pdfviewer.documentLoad = (): void => { + if (Browser.isDevice && !viewer.enableDesktopMode) { + pdfviewer.maxZoom = 200; + pdfviewer.minZoom = 10; + } + else{ + pdfviewer.zoomMode = 'Default'; + } +}; + +{% endhighlight %} +{% highlight ts tabtitle="Server-Backed" %} + +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, + LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, + TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, + BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer); + +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.serviceUrl = 'https://services.syncfusion.com/js/production/api/pdfviewer'; +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; +pdfviewer.appendTo('#PdfViewer'); + +pdfviewer.documentLoad = (): void => { + if (Browser.isDevice && !viewer.enableDesktopMode) { + pdfviewer.maxZoom = 200; + pdfviewer.minZoom = 10; + } + else{ + pdfviewer.zoomMode = 'Default'; + } +}; + +{% endhighlight %} +{% endtabs %} + +By implementing this, you ensure that the maximum zoom percentage on mobile devices is limited to 200% and the minimum zoom percentage is set to 10%. This prevents performance issues that may arise from excessive zooming on mobile platforms. diff --git a/ej2-javascript/pivotview/images/calculatdfield-grouping-edit1.png b/ej2-javascript/pivotview/images/calculatdfield-grouping-edit1.png index 01ec4e709..7cd3f932f 100644 Binary files a/ej2-javascript/pivotview/images/calculatdfield-grouping-edit1.png and b/ej2-javascript/pivotview/images/calculatdfield-grouping-edit1.png differ diff --git a/ej2-javascript/pivotview/js/calculated-field.md b/ej2-javascript/pivotview/js/calculated-field.md index 1b85eb0d8..bf28e280f 100644 --- a/ej2-javascript/pivotview/js/calculated-field.md +++ b/ej2-javascript/pivotview/js/calculated-field.md @@ -18,7 +18,7 @@ Calculated field can also be included in the pivot table through code behind usi * [`formula`](https://ej2.syncfusion.com/javascript/documentation/api/pivotview/calculatedFieldSettings/#formula): It allows to set the formula. * [`formatSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pivotview/formatSettings/): It helps to set the number format for the resultant value. -> The calculated field is applicable only for value fields. +> The calculated field is applicable only for value fields. By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the pivot table UI, it must be added to the [`values`](https://ej2.syncfusion.com/javascript/documentation/api/pivotview/dataSourceSettings/#values) property, as shown in the code below. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -346,4 +346,4 @@ The event [`actionFailure`](https://ej2.syncfusion.com/javascript/documentation/ {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/pivot-table/action-events-cs6" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/pivot-table/action-events-cs6" %} diff --git a/ej2-javascript/pivotview/js/getting-started.md b/ej2-javascript/pivotview/js/getting-started.md index 0df289083..c9ea5baa1 100644 --- a/ej2-javascript/pivotview/js/getting-started.md +++ b/ej2-javascript/pivotview/js/getting-started.md @@ -397,7 +397,7 @@ The calculated field feature allows user to insert or add a new calculated field Also calculated fields can be added at run time through the built-in dialog. The dialog can be enabled by setting the [`allowCalculatedField`](https://ej2.syncfusion.com/javascript/documentation/api/pivotview/pivotViewModel/#allowcalculatedfield) property to **true**. -> Calculated field is applicable only for value fields. +> Calculated field is applicable only for value fields. By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the pivot table UI, it must be added to the [`values`](https://ej2.syncfusion.com/javascript/documentation/api/pivotview/dataSourceSettings/#values) property, as shown in the code below. Additionally, calculated fields can only be added to the value axis. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/ej2-javascript/pivotview/ts/calculated-field.md b/ej2-javascript/pivotview/ts/calculated-field.md index 7a4ca781a..197ac2f8b 100644 --- a/ej2-javascript/pivotview/ts/calculated-field.md +++ b/ej2-javascript/pivotview/ts/calculated-field.md @@ -19,7 +19,7 @@ Calculated field can also be included in the pivot table through code behind usi * [`formatSettings`](https://ej2.syncfusion.com/documentation/api/pivotview/formatSettings/): It helps to set the number format for the resultant value. To use calculated field option, you need to inject the `CalculatedField` module in pivot table. -> The calculated field is applicable only for value fields. +> The calculated field is applicable only for value fields. By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the pivot table UI, it must be added to the [`values`](https://ej2.syncfusion.com/documentation/api/pivotview/dataSourceSettings/#values) property, as shown in the code below. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -347,4 +347,4 @@ The event [`actionFailure`](https://ej2.syncfusion.com/documentation/api/pivotvi {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/pivot-table/action-events-cs33" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/pivot-table/action-events-cs33" %} diff --git a/ej2-javascript/pivotview/ts/getting-started.md b/ej2-javascript/pivotview/ts/getting-started.md index 9d061638c..6879bfe55 100644 --- a/ej2-javascript/pivotview/ts/getting-started.md +++ b/ej2-javascript/pivotview/ts/getting-started.md @@ -336,7 +336,7 @@ The calculated field feature allows user to insert or add a new calculated field Also calculated fields can be added at run time through the built-in dialog. The dialog can be enabled by setting the `allowCalculatedField` property to **true** and by injecting the `CalculatedField` module as follows. -> If the `CalculatedField` module is not injected, the calculated field dialog will not be rendered with the pivot table component. Moreover calculated field is applicable only for value fields. +> If the `CalculatedField` module is not injected, the calculated field dialog will not appear within the pivot table component. By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the pivot table UI, it must be added to the [`values`](https://ej2.syncfusion.com/documentation/api/pivotview/dataSourceSettings/#values) property, as shown in the code below. Additionally, calculated fields can only be added to the value axis. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -401,4 +401,4 @@ Output will be displayed as follows. {% previewsample "page.domainurl/code-snippet/pivot-table/pivot-table-cs375" %} For more information and to access the quick start project, visit: [GitHub Repository](https://github.com/SyncfusionExamples/getting-started-with-the-typescript-pivot-table-component) - \ No newline at end of file + diff --git a/ej2-typescript-toc.html b/ej2-typescript-toc.html index ecbed4212..07e84d2e9 100644 --- a/ej2-typescript-toc.html +++ b/ej2-typescript-toc.html @@ -1879,6 +1879,7 @@
  • SignatureSelect and SignatureUnselect event
  • Controlling File Downloads
  • Minimum and Maximum Zoom Properties
    • +
  • How to Restrict Zoom Percentage on Mobile Devices
  • Troubleshooting