\n
\n \n Alignment\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n Appearance\n
\n \n
\n \n \n
\n \n \n
\n \n \n
\n \n
\n \n \n
\n \n \n
\n \n \n
\n \n
\n \n Templates\n
\n \n \n
\n \n
\n \n Behaviour\n
\n \n \n
\n ![](\"//npmci.syncfusion.com/production/demos/src/diagram/Images/annotation/')
';\n }\n } else if (value === 'interaction') {\n node.annotations[j].constraints = node.annotations[j].constraints ^ ej.diagrams.AnnotationConstraints.Interaction;\n }\n diagram.dataBind();\n }\n }\n}\n//Update the Annotation Position based on the selection\nfunction updatePosition(id) {\n var target = document.getElementById(id);\n for (var i = 0; i < diagram.selectedItems.nodes.length; i++) {\n var node = diagram.selectedItems.nodes[i];\n for (var j = 0; j < node.annotations.length; j++) {\n var annotation = node.annotations[j];\n switch (target.id) {\n case 'left':\n setAnnotationPosition(annotation, 0, 0, 'Top', 'Left', target);\n break;\n case 'right':\n setAnnotationPosition(annotation, 1, 0, 'Top', 'Right', target);\n break;\n case 'bottoml':\n setAnnotationPosition(annotation, 0, 1, 'Bottom', 'Left', target);\n break;\n case 'bottomr':\n setAnnotationPosition(annotation, 1, 1, 'Bottom', 'Right', target);\n break;\n case 'center':\n setAnnotationPosition(annotation, 0.5, 0.5, 'Center', 'Center', target);\n break;\n case 'bottomcenter_top':\n setAnnotationPosition(annotation, 0.5, 1, 'Top', 'Center', target);\n break;\n }\n }\n }\n}\n//set the Annotation Position\nfunction setAnnotationPosition(annotation, offsetX, offsetY, vAlignment, hAlignment, target) {\n annotation.offset.x = offsetX;\n annotation.offset.y = offsetY;\n annotation.verticalAlignment = vAlignment;\n annotation.horizontalAlignment = hAlignment;\n if (vAlignment === 'Top' && hAlignment === 'Left') {\n annotation.margin = { left: 3, top: 3 };\n } else if (vAlignment === 'Top' && hAlignment === 'Right') {\n annotation.margin = { right: 3, top: 3 };\n } else if (vAlignment === 'Bottom' && hAlignment === 'Left') {\n annotation.margin = { left: 3, bottom: 3 };\n } else if (vAlignment === 'Bottom' && hAlignment === 'Right') {\n annotation.margin = { right: 3, bottom: 3 };\n }\n target.classList.add('e-selected-style');\n}\n//Enable or disable the property panel\nfunction enableOptions(arg) {\n var appearance = document.getElementById('propertypanel');\n var selectedElement = document.getElementsByClassName('e-remove-selection');\n if (arg.newValue) {\n if (arg.newValue[0] instanceof ej.diagrams.Node) {\n if (selectedElement.length) {\n selectedElement[0].classList.remove('e-remove-selection');\n }\n } else {\n if (!appearance.classList.contains('e-remove-selection')) {\n appearance.classList.add('e-remove-selection');\n }\n\n }\n }\n}\n\n\n //Click event for Appearance of the Property Panel\n document.getElementById('appearance').onclick = function (args) {\n var target = args.target;\n var selectedElement = document.getElementsByClassName('e-selected-style');\n if (selectedElement.length) {\n selectedElement[0].classList.remove('e-selected-style');\n }\n if (target.className === 'image-pattern-style') {\n updatePosition(target.id);\n }\n };\n\n var bounds = document.getElementsByClassName('content-wrapper')[0].getBoundingClientRect();\n var centerX = (bounds.width / 2);\n //Initializes the nodes for the diagram\n var nodes = [\n {\n id: 'industry', offsetX: centerX, offsetY: 250,\n annotations: [{ content: 'Industry Competitors' }]\n },\n {\n id: 'potential', offsetX: centerX, offsetY: 110,\n annotations: [{ content: 'Potential Entrants' }]\n },\n {\n id: 'suplier', offsetX: centerX - 190, offsetY: 250,\n annotations: [{ content: 'Suppliers' }]\n },\n {\n id: 'substitutes', offsetX: centerX, offsetY: 390,\n annotations: [{ content: 'Substitutes' }]\n },\n {\n id: 'buyers', offsetX: centerX + 190, offsetY: 250,\n annotations: [{ content: 'Buyers' }]\n }\n ];\n //Initializes the connector for the diagram\n var connectors = [\n {\n id: 'connector1', sourceID: 'potential', targetID: 'industry'\n }, {\n id: 'connector2', sourceID: 'suplier', targetID: 'industry'\n }, {\n id: 'connector3', sourceID: 'substitutes', targetID: 'industry',\n }, {\n id: 'connector4', sourceID: 'buyers', targetID: 'industry'\n }, {\n id: 'connector5', sourceID: 'potential', targetID: 'buyers',\n segments: [{ direction: 'Right', type: 'Orthogonal', length: 60 }], targetDecorator: { shape: 'None' }\n }, {\n id: 'connector6', sourceID: 'buyers', targetID: 'substitutes',\n segments: [{ direction: 'Bottom', type: 'Orthogonal', length: 100 }], targetDecorator: { shape: 'None' }\n }, {\n id: 'connector7', targetID: 'suplier', sourceID: 'substitutes',\n segments: [{ direction: 'Left', type: 'Orthogonal', length: 60 }], targetDecorator: { shape: 'None' }\n }, {\n id: 'connector9', sourceID: 'suplier', targetID: 'potential',\n segments: [{ direction: 'Top', type: 'Orthogonal', length: 100 }], targetDecorator: { shape: 'None' }\n }\n ];\n //Initializes diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: '645px', nodes: nodes, connectors: connectors,\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n selectionChange: function (arg) {\n if (arg.state === 'Changed') {\n var selectedElement = document.getElementsByClassName('e-selected-style');\n if (selectedElement.length) {\n selectedElement[0].classList.remove('e-selected-style');\n }\n if (arg.newValue[0]) {\n var node = arg.newValue[0];\n var offset = node.annotations[0].offset;\n if (offset.x === 0 && offset.y === 0) {\n updatePosition('left');\n }\n else if (offset.x === 1 && offset.y === 0) {\n updatePosition('right');\n }\n else if (offset.x === 1 && offset.y === 0) {\n updatePosition('right');\n }\n else if (offset.x === 0 && offset.y === 1) {\n updatePosition('bottoml');\n }\n else if (offset.x === 1 && offset.y === 1) {\n updatePosition('bottomr');\n }\n else if (offset.x === 0.5 && offset.y === 0.5) {\n updatePosition('center');\n }\n else if (offset.x === 0.5 && offset.y === 1) {\n updatePosition('bottomcenter_top');\n }\n }\n enableOptions(arg);\n }\n },\n //Sets the default values of a node\n getNodeDefaults: function (node) {\n var obj = {\n width: 130, height: 50, style: { fill: '#D5EDED', strokeColor: '#7DCFC9', strokeWidth: 1 },\n shape: { cornerRadius: 5 }\n };\n return obj;\n },\n //Sets the default values of a connector\n getConnectorDefaults: function (obj) {\n obj.type = 'Orthogonal';\n obj.constraints = ej.diagrams.ConnectorConstraints.None;\n },\n });\n diagram.appendTo('#diagram');\n diagram.select([diagram.nodes[0]]);\n //Button used to apply for Bold of the Annotation\n bold = new ej.buttons.Button({\n cssClass: 'e-small',\n iconCss: 'e-ddb-icons e-bold',\n });\n bold.appendTo('#bold');\n bold.element.onclick = function () { updateAnnotation('bold'); };\n //Button used to apply for Italic of the Annotation\n italic = new ej.buttons.Button({\n cssClass: 'e-small',\n iconCss: 'e-ddb-icons e-italic'\n });\n italic.appendTo('#italic');\n italic.element.onclick = function () { updateAnnotation('italic'); };\n //NumericTextBox used to apply for Fontsize of the Annotation\n fontSize = new ej.inputs.NumericTextBox({\n value: 0, min: 1,\n max: 8, width: '100%',\n format: '##.##',\n step: 2,\n change: function () { updateAnnotation('fontsize', fontSize); }\n });\n fontSize.appendTo('#fontSize');\n fontSize.dataBind();\n //Colorpicker used to apply for Color of the Annotation\n fontColor = new ej.inputs.ColorPicker({\n value: '#000', change: function (arg) {\n for (var i = 0; i < diagram.selectedItems.nodes.length; i++) {\n var node = diagram.selectedItems.nodes[i];\n for (var j = 0; j < node.annotations.length; j++) {\n node.annotations[j].style.color = arg.currentValue.rgba;\n diagram.dataBind();\n }\n }\n }\n });\n fontColor.appendTo('#fontcolor');\n //Button used to apply for Underline of the Annotation\n underLine = new ej.buttons.Button({\n cssClass: 'e-small',\n iconCss: 'e-ddb-icons e-underline'\n });\n underLine.appendTo('#underline');\n underLine.element.onclick = function () { updateAnnotation('underline'); };\n //FontType Collection\n var fontType = [\n { type: 'Arial', text: 'Arial' },\n { type: 'Aharoni', text: 'Aharoni' },\n { type: 'Bell MT', text: 'Bell MT' },\n { type: 'Fantasy', text: 'Fantasy' },\n { type: 'Times New Roman', text: 'Times New Roman' },\n { type: 'Segoe UI', text: 'Segoe UI' },\n { type: 'Verdana', text: 'Verdana' }\n ];\n //DropDownList used to apply for fontFamily of the Annotation\n fontFamily = new ej.dropdowns.DropDownList({\n dataSource: fontType,\n fields: { value: 'type', text: 'text' }, popupWidth: 150,\n width: '100%', placeholder: 'select a font type',\n index: 0, change: function () {\n updateAnnotation('fontfamily', null, fontFamily);\n }\n });\n fontFamily.appendTo('#fontfamily');\n\n templateList = [\n { value: 'none', text: 'None' },\n { value: 'industry', text: 'Industry Competitors' },\n { value: 'suppliers', text: 'Suppliers' },\n { value: 'potential', text: 'Potential Entrants' },\n { value: 'buyers', text: 'Buyers' },\n { value: 'substitutes', text: 'Substitutes' }\n ];\n\n var template = new ej.dropdowns.DropDownList({\n dataSource: templateList,\n fields: { value: 'value', text: 'text' }, popupWidth: 200,\n width: '100%', placeholder: 'select a template', index: 0,\n change: function (args) {\n updateAnnotation('template', null, args.value.toString());\n }\n });\n template.appendTo('#template');\n\n labelConstraints = new ej.buttons.CheckBox({\n checked: false,\n label: 'Label interaction',\n change: function () {\n updateAnnotation('interaction', null, null);\n }\n });\n labelConstraints.appendTo('#labelConstraints');\n"}
\ No newline at end of file
+{"index.html":"\n\n \n\n \n\n ![](\"//ej2.syncfusion.com/javascript/demos/src/diagram/Images/annotation/')
';\n }\n } else if (value === 'interaction') {\n node.annotations[j].constraints = node.annotations[j].constraints ^ ej.diagrams.AnnotationConstraints.Interaction;\n }\n diagram.dataBind();\n }\n }\n}\n//Update the Annotation Position based on the selection\nfunction updatePosition(id) {\n var target = document.getElementById(id);\n for (var i = 0; i < diagram.selectedItems.nodes.length; i++) {\n var node = diagram.selectedItems.nodes[i];\n for (var j = 0; j < node.annotations.length; j++) {\n var annotation = node.annotations[j];\n switch (target.id) {\n case 'left':\n setAnnotationPosition(annotation, 0, 0, 'Top', 'Left', target);\n break;\n case 'right':\n setAnnotationPosition(annotation, 1, 0, 'Top', 'Right', target);\n break;\n case 'bottoml':\n setAnnotationPosition(annotation, 0, 1, 'Bottom', 'Left', target);\n break;\n case 'bottomr':\n setAnnotationPosition(annotation, 1, 1, 'Bottom', 'Right', target);\n break;\n case 'center':\n setAnnotationPosition(annotation, 0.5, 0.5, 'Center', 'Center', target);\n break;\n case 'bottomcenter_top':\n setAnnotationPosition(annotation, 0.5, 1, 'Top', 'Center', target);\n break;\n }\n }\n }\n}\n//set the Annotation Position\nfunction setAnnotationPosition(annotation, offsetX, offsetY, vAlignment, hAlignment, target) {\n annotation.offset.x = offsetX;\n annotation.offset.y = offsetY;\n annotation.verticalAlignment = vAlignment;\n annotation.horizontalAlignment = hAlignment;\n if (vAlignment === 'Top' && hAlignment === 'Left') {\n annotation.margin = { left: 3, top: 3 };\n } else if (vAlignment === 'Top' && hAlignment === 'Right') {\n annotation.margin = { right: 3, top: 3 };\n } else if (vAlignment === 'Bottom' && hAlignment === 'Left') {\n annotation.margin = { left: 3, bottom: 3 };\n } else if (vAlignment === 'Bottom' && hAlignment === 'Right') {\n annotation.margin = { right: 3, bottom: 3 };\n }\n target.classList.add('e-selected-style');\n}\n//Enable or disable the property panel\nfunction enableOptions(arg) {\n var appearance = document.getElementById('propertypanel');\n var selectedElement = document.getElementsByClassName('e-remove-selection');\n if (arg.newValue) {\n if (arg.newValue[0] instanceof ej.diagrams.Node) {\n if (selectedElement.length) {\n selectedElement[0].classList.remove('e-remove-selection');\n }\n } else {\n if (!appearance.classList.contains('e-remove-selection')) {\n appearance.classList.add('e-remove-selection');\n }\n\n }\n }\n}\n\n\n //Click event for Appearance of the Property Panel\n document.getElementById('appearance').onclick = function (args) {\n var target = args.target;\n var selectedElement = document.getElementsByClassName('e-selected-style');\n if (selectedElement.length) {\n selectedElement[0].classList.remove('e-selected-style');\n }\n if (target.className === 'image-pattern-style') {\n updatePosition(target.id);\n }\n };\n\n var bounds = document.getElementsByClassName('content-wrapper')[0].getBoundingClientRect();\n var centerX = (bounds.width / 2);\n //Initializes the nodes for the diagram\n var nodes = [\n {\n id: 'industry', offsetX: centerX, offsetY: 250,\n annotations: [{ content: 'Industry Competitors' }]\n },\n {\n id: 'potential', offsetX: centerX, offsetY: 110,\n annotations: [{ content: 'Potential Entrants' }]\n },\n {\n id: 'suplier', offsetX: centerX - 190, offsetY: 250,\n annotations: [{ content: 'Suppliers' }]\n },\n {\n id: 'substitutes', offsetX: centerX, offsetY: 390,\n annotations: [{ content: 'Substitutes' }]\n },\n {\n id: 'buyers', offsetX: centerX + 190, offsetY: 250,\n annotations: [{ content: 'Buyers' }]\n }\n ];\n //Initializes the connector for the diagram\n var connectors = [\n {\n id: 'connector1', sourceID: 'potential', targetID: 'industry'\n }, {\n id: 'connector2', sourceID: 'suplier', targetID: 'industry'\n }, {\n id: 'connector3', sourceID: 'substitutes', targetID: 'industry',\n }, {\n id: 'connector4', sourceID: 'buyers', targetID: 'industry'\n }, {\n id: 'connector5', sourceID: 'potential', targetID: 'buyers',\n segments: [{ direction: 'Right', type: 'Orthogonal', length: 60 }], targetDecorator: { shape: 'None' }\n }, {\n id: 'connector6', sourceID: 'buyers', targetID: 'substitutes',\n segments: [{ direction: 'Bottom', type: 'Orthogonal', length: 100 }], targetDecorator: { shape: 'None' }\n }, {\n id: 'connector7', targetID: 'suplier', sourceID: 'substitutes',\n segments: [{ direction: 'Left', type: 'Orthogonal', length: 60 }], targetDecorator: { shape: 'None' }\n }, {\n id: 'connector9', sourceID: 'suplier', targetID: 'potential',\n segments: [{ direction: 'Top', type: 'Orthogonal', length: 100 }], targetDecorator: { shape: 'None' }\n }\n ];\n //Initializes diagram control\n diagram = new ej.diagrams.Diagram({\n width: '100%', height: '645px', nodes: nodes, connectors: connectors,\n snapSettings: { constraints: ej.diagrams.SnapConstraints.None },\n selectionChange: function (arg) {\n if (arg.state === 'Changed') {\n var selectedElement = document.getElementsByClassName('e-selected-style');\n if (selectedElement.length) {\n selectedElement[0].classList.remove('e-selected-style');\n }\n if (arg.newValue[0]) {\n var node = arg.newValue[0];\n var offset = node.annotations[0].offset;\n if (offset.x === 0 && offset.y === 0) {\n updatePosition('left');\n }\n else if (offset.x === 1 && offset.y === 0) {\n updatePosition('right');\n }\n else if (offset.x === 1 && offset.y === 0) {\n updatePosition('right');\n }\n else if (offset.x === 0 && offset.y === 1) {\n updatePosition('bottoml');\n }\n else if (offset.x === 1 && offset.y === 1) {\n updatePosition('bottomr');\n }\n else if (offset.x === 0.5 && offset.y === 0.5) {\n updatePosition('center');\n }\n else if (offset.x === 0.5 && offset.y === 1) {\n updatePosition('bottomcenter_top');\n }\n }\n enableOptions(arg);\n }\n },\n //Sets the default values of a node\n getNodeDefaults: function (node) {\n var obj = {\n width: 130, height: 50, style: { fill: '#D5EDED', strokeColor: '#7DCFC9', strokeWidth: 1 },\n shape: { cornerRadius: 5 }\n };\n return obj;\n },\n //Sets the default values of a connector\n getConnectorDefaults: function (obj) {\n obj.type = 'Orthogonal';\n obj.constraints = ej.diagrams.ConnectorConstraints.None;\n },\n });\n diagram.appendTo('#diagram');\n diagram.select([diagram.nodes[0]]);\n //Button used to apply for Bold of the Annotation\n bold = new ej.buttons.Button({\n cssClass: 'e-small',\n iconCss: 'e-ddb-icons e-bold',\n });\n bold.appendTo('#bold');\n bold.element.onclick = function () { updateAnnotation('bold'); };\n //Button used to apply for Italic of the Annotation\n italic = new ej.buttons.Button({\n cssClass: 'e-small',\n iconCss: 'e-ddb-icons e-italic'\n });\n italic.appendTo('#italic');\n italic.element.onclick = function () { updateAnnotation('italic'); };\n //NumericTextBox used to apply for Fontsize of the Annotation\n fontSize = new ej.inputs.NumericTextBox({\n value: 0, min: 1,\n max: 8, width: '100%',\n format: '##.##',\n step: 2,\n change: function () { updateAnnotation('fontsize', fontSize); }\n });\n fontSize.appendTo('#fontSize');\n fontSize.dataBind();\n //Colorpicker used to apply for Color of the Annotation\n fontColor = new ej.inputs.ColorPicker({\n value: '#000', change: function (arg) {\n for (var i = 0; i < diagram.selectedItems.nodes.length; i++) {\n var node = diagram.selectedItems.nodes[i];\n for (var j = 0; j < node.annotations.length; j++) {\n node.annotations[j].style.color = arg.currentValue.rgba;\n diagram.dataBind();\n }\n }\n }\n });\n fontColor.appendTo('#fontcolor');\n //Button used to apply for Underline of the Annotation\n underLine = new ej.buttons.Button({\n cssClass: 'e-small',\n iconCss: 'e-ddb-icons e-underline'\n });\n underLine.appendTo('#underline');\n underLine.element.onclick = function () { updateAnnotation('underline'); };\n //FontType Collection\n var fontType = [\n { type: 'Arial', text: 'Arial' },\n { type: 'Aharoni', text: 'Aharoni' },\n { type: 'Bell MT', text: 'Bell MT' },\n { type: 'Fantasy', text: 'Fantasy' },\n { type: 'Times New Roman', text: 'Times New Roman' },\n { type: 'Segoe UI', text: 'Segoe UI' },\n { type: 'Verdana', text: 'Verdana' }\n ];\n //DropDownList used to apply for fontFamily of the Annotation\n fontFamily = new ej.dropdowns.DropDownList({\n dataSource: fontType,\n fields: { value: 'type', text: 'text' }, popupWidth: 150,\n width: '100%', placeholder: 'select a font type',\n index: 0, change: function () {\n updateAnnotation('fontfamily', null, fontFamily);\n }\n });\n fontFamily.appendTo('#fontfamily');\n\n templateList = [\n { value: 'none', text: 'None' },\n { value: 'industry', text: 'Industry Competitors' },\n { value: 'suppliers', text: 'Suppliers' },\n { value: 'potential', text: 'Potential Entrants' },\n { value: 'buyers', text: 'Buyers' },\n { value: 'substitutes', text: 'Substitutes' }\n ];\n\n var template = new ej.dropdowns.DropDownList({\n dataSource: templateList,\n fields: { value: 'value', text: 'text' }, popupWidth: 200,\n width: '100%', placeholder: 'select a template', index: 0,\n change: function (args) {\n updateAnnotation('template', null, args.value.toString());\n }\n });\n template.appendTo('#template');\n\n labelConstraints = new ej.buttons.CheckBox({\n checked: false,\n label: 'Label interaction',\n change: function () {\n updateAnnotation('interaction', null, null);\n }\n });\n labelConstraints.appendTo('#labelConstraints');\n"}
\ No newline at end of file
diff --git a/src/diagram/getting-started-node-stack.json b/src/diagram/getting-started-node-stack.json
index 57fb8f44..cc513397 100644
--- a/src/diagram/getting-started-node-stack.json
+++ b/src/diagram/getting-started-node-stack.json
@@ -1 +1 @@
-{"index.html":"\n\n \n\n \n\n