Skip to content

1042050: Addressed review concerns #175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RamyaSubramaniSF4537 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

1042050: Addressed review concerns #175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4e301b0
1042050: Addressed review concerns
RamyaSubramaniSF4537 Aug 19, 2026
00a0844
1042050: Addressed review concerns
RamyaSubramaniSF4537 Aug 19, 2026
4913b79
1042050: Updated Changes
RamyaSubramaniSF4537 Aug 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 44 additions & 44 deletions KB-Samples/HTMLShapeExportInWASM/Pages/Index.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,24 @@
@using Syncfusion.PdfExport;

<div id="OrgChartDiagram" style="width:3000px;height:1000px;">
<SfDiagramComponent @ref="@Diagram" ID="diagramContent" Width="100%" Height="100%" ConnectorCreating="@OnConnectorCreating" NodeCreating="@OnNodeCreating">
<SfDiagramComponent @ref="@diagram" ID="diagramContent" Width="100%" Height="100%" ConnectorCreating="@OnConnectorCreating" NodeCreating="@OnNodeCreating">
<PageSettings>
<BackgroundStyle Background="transaparent"></BackgroundStyle>
</PageSettings>
<DataSourceSettings ID="EmployeeID" ParentID="ParentID" DataSource="DataSource"> </DataSourceSettings>
<Layout @bind-Type="Type" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-Orientation="@OrientationType" @bind-VerticalSpacing="@VerticalSpacing" @bind-HorizontalAlignment="@HorizontalAlignment" @bind-VerticalAlignment="@VerticalAlignment" GetLayoutInfo="GetLayoutInfo">
<LayoutMargin @bind-Top="@Top" @bind-Bottom="@Bottom" @bind-Right="@Right" @bind-Left="@Left"></LayoutMargin>
<Layout @bind-Type="type" @bind-HorizontalSpacing="@horizontalSpacing" @bind-Orientation="@orientationType" @bind-VerticalSpacing="@verticalSpacing" @bind-HorizontalAlignment="@horizontalAlignment" @bind-VerticalAlignment="@verticalAlignment" GetLayoutInfo="GetLayoutInfo">
<LayoutMargin @bind-Top="@top" @bind-Bottom="@bottom" @bind-Right="@right" @bind-Left="@left"></LayoutMargin>
</Layout>

<SnapSettings Constraints="@SnapConstraints.None"></SnapSettings>
<DiagramTemplates>
<NodeTemplate>
@{
Node node1 = (context as Node);
string Name = (node1.Data as HierarchicalDetails).Name;
string Role = (node1.Data as HierarchicalDetails).Designation;
string Imageurl = (node1.Data as HierarchicalDetails).BG;
if (Name == "Maria Anders")
Node node = context as Node;
string name = (node.Data as HierarchicalDetails).Name;
string role = (node.Data as HierarchicalDetails).Designation;
string imageUrl = (node.Data as HierarchicalDetails).BG;
if (name == "Maria Anders")
{
<div class=e-orgchart-div style=" width: 181px;
height: 54px;
Expand All @@ -53,7 +53,7 @@
right: 12px;
/* top: 154px; */
float: left;
background-size: 100% 100%;background-image: url(@( @Imageurl));">
background-size: 100% 100%;background-image: url(@( @imageUrl));">
</div>
</div><span class="e-orgchart-name-div" style=" color: rgba(64.81249898672104, 64.81249898672104, 64.81249898672104, 1);
width: 150px;
Expand All @@ -64,7 +64,7 @@
font-family: Roboto;
text-align: left;
font-size: 14px;
letter-spacing: 0;margin-left:-4px">@Name</span><span style=" color: rgba(122.1874974668026, 122.1874974668026, 122.1874974668026, 1);
letter-spacing: 0;margin-left:-4px">@name</span><span style=" color: rgba(122.1874974668026, 122.1874974668026, 122.1874974668026, 1);
width: 100px;
height: 14px;
position: absolute;
Expand All @@ -73,7 +73,7 @@
font-family: Roboto;
text-align: left;
font-size: 12px;
letter-spacing: 0;" class="e-orgchart-role-div">@Role</span>
letter-spacing: 0;" class="e-orgchart-role-div">@role</span>
<div class="e-orgchart-whole-div" style=" border-radius: 500px;

width: 44px;
Expand All @@ -83,7 +83,7 @@
top: 5px;margin-left:-4px"></div>
</div>
}
else if (Name == "Miguel Angel Paolino")
else if (name == "Miguel Angel Paolino")
{
<div class=e-orgchart-div style=" width: 181px;
height: 54px;
Expand All @@ -105,7 +105,7 @@
right: 12px;
/* top: 154px; */
float: left;
background-size: 100% 100%;background-image: url(@( @Imageurl));">
background-size: 100% 100%;background-image: url(@( @imageUrl));">
</div>
</div><span class="e-orgchart-name-div" style=" color: rgba(64.81249898672104, 64.81249898672104, 64.81249898672104, 1);
width: 150px;
Expand All @@ -116,7 +116,7 @@
font-family: Roboto;
text-align: left;
font-size: 14px;
letter-spacing: 0;margin-left:-4px">@Name</span><span style=" color: rgba(122.1874974668026, 122.1874974668026, 122.1874974668026, 1);
letter-spacing: 0;margin-left:-4px">@name</span><span style=" color: rgba(122.1874974668026, 122.1874974668026, 122.1874974668026, 1);
width: 100px;
height: 14px;
position: absolute;
Expand All @@ -125,7 +125,7 @@
font-family: Roboto;
text-align: left;
font-size: 12px;
letter-spacing: 0;" class="e-orgchart-role-div">@Role</span>
letter-spacing: 0;" class="e-orgchart-role-div">@role</span>
<div class="e-orgchart-whole-div" style=" border-radius: 500px;

width: 44px;
Expand All @@ -136,7 +136,7 @@
</div>

}
else if (Name == "Frédérique Citeaux" || Name == "Christina Berglund" || Name == "Art Braunschweiger")
else if (name == "Frédérique Citeaux" || name == "Christina Berglund" || name == "Art Braunschweiger")
{
<div class=e-orgchart-div style=" width: 181px;
height: 54px;
Expand All @@ -158,7 +158,7 @@
right: 12px;
/* top: 154px; */
float: left;
background-size: 100% 100%;background-image: url(@( @Imageurl));">
background-size: 100% 100%;background-image: url(@( @imageUrl));">
</div>
</div><span class="e-orgchart-name-div" style=" color: rgba(64.81249898672104, 64.81249898672104, 64.81249898672104, 1);
width: 150px;
Expand All @@ -169,7 +169,7 @@
font-family: Roboto;
text-align: left;
font-size: 14px;
letter-spacing: 0;margin-left:-4px">@Name</span><span style=" color: rgba(122.1874974668026, 122.1874974668026, 122.1874974668026, 1);
letter-spacing: 0;margin-left:-4px">@name</span><span style=" color: rgba(122.1874974668026, 122.1874974668026, 122.1874974668026, 1);
width: 100px;
height: 14px;
position: absolute;
Expand All @@ -178,7 +178,7 @@
font-family: Roboto;
text-align: left;
font-size: 12px;
letter-spacing: 0;" class="e-orgchart-role-div">@Role</span>
letter-spacing: 0;" class="e-orgchart-role-div">@role</span>
<div class="e-orgchart-whole-div" style=" border-radius: 500px;

width: 44px;
Expand Down Expand Up @@ -213,7 +213,7 @@
right: 12px;
/* top: 154px; */
float: left;
background-size: 100% 100%;background-image: url(@(@Imageurl));">
background-size: 100% 100%;background-image: url(@(@imageUrl));">
</div>
</div><span class="e-orgchart-name-div" style="color: rgba(64.81249898672104, 64.81249898672104, 64.81249898672104, 1);
width: 150px;
Expand All @@ -224,7 +224,7 @@
font-family: Roboto;
text-align: left;
font-size: 14px;
letter-spacing: 0;margin-left:-4px">@Name</span><span style=" color: rgba(122.1874974668026, 122.1874974668026, 122.1874974668026, 1);
letter-spacing: 0;margin-left:-4px">@name</span><span style=" color: rgba(122.1874974668026, 122.1874974668026, 122.1874974668026, 1);
width: 100px;
height: 14px;
position: absolute;
Expand All @@ -233,7 +233,7 @@
font-family: Roboto;
text-align: left;
font-size: 12px;
letter-spacing: 0;" class="e-orgchart-role-div">@Role</span>
letter-spacing: 0;" class="e-orgchart-role-div">@role</span>
<div class="e-orgchart-whole-div" style=" border-radius: 500px;

width: 44px;
Expand All @@ -260,30 +260,30 @@
@code {
@*Hidden:Lines*@

DiagramInteractions DiagramTool = DiagramInteractions.ZoomPan;
ScrollLimitMode scrollLimit { get; set; } = ScrollLimitMode.Diagram;
public SfDiagramComponent Diagram;
public int? HValue { get; set; } = 60;
public int? VValue { get; set; } = 60;
public LayoutType Type = LayoutType.HierarchicalTree;
public LayoutOrientation OrientationType = LayoutOrientation.TopToBottom;
public HorizontalAlignment HorizontalAlignment = HorizontalAlignment.Auto;
public VerticalAlignment VerticalAlignment = VerticalAlignment.Auto;
public int HorizontalSpacing = 30;
public int VerticalSpacing = 60;
public double Top = 30;
public double Bottom = 30;
public double Right = 30;
public double Left = 30;
private DiagramInteractions diagramTool = DiagramInteractions.ZoomPan;
private ScrollLimitMode scrollLimit { get; set; } = ScrollLimitMode.Diagram;
private SfDiagramComponent diagram;
private int? hValue { get; set; } = 60;
private int? vValue { get; set; } = 60;
private LayoutType type = LayoutType.HierarchicalTree;
private LayoutOrientation orientationType = LayoutOrientation.TopToBottom;
private HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto;
private VerticalAlignment verticalAlignment = VerticalAlignment.Auto;
private int horizontalSpacing = 30;
private int verticalSpacing = 60;
private double top = 30;
private double bottom = 30;
private double right = 30;
private double left = 30;

//Defines diagram constraints
public DiagramConstraints constraints { get; set; }
private DiagramConstraints constraints { get; set; }

//Defines diagrams's nodes collection
public DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
private DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();

//Defines diagrams's connectors collection
public DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
private DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();

private void OnConnectorCreating(IDiagramObject connector)
{
Expand Down Expand Up @@ -319,7 +319,7 @@
}
private async Task ExportImage()
{
await JS.InvokeAsync<object>("exportToImage", Diagram.ID);
await JS.InvokeAsync<object>("exportToImage", diagram.ID);
}
private async void SVGExport()
{
Expand All @@ -329,11 +329,11 @@
FitToPage = false,
Margin = new DiagramThickness() { Bottom = 0, Left = 0, Right = 0, Top = 0 },
};
await Diagram.ExportAsync("Diagram", DiagramExportFormat.SVG, options);
await diagram.ExportAsync("Diagram", DiagramExportFormat.SVG, options);
}
private async Task ExportDiagram()
{
string image = await JS.InvokeAsync<string>("exportToPdf", Diagram.ID);
string image = await JS.InvokeAsync<string>("exportToPdf", diagram.ID);
string[] images = new string[] { image };
await ExportToPdf("diagram", PdfPageOrientation.Portrait, true, images);
}
Expand All @@ -342,7 +342,7 @@
PdfDocument document = new PdfDocument();
document.PageSettings.Orientation = orientation;
document.PageSettings.Margins = new PdfMargins() { Left = 0, Right = 0, Top = 0, Bottom = 0 };
DiagramRect bounds = await JS.InvokeAsync<DiagramRect>("getDiagramBounds", Diagram.ID);
DiagramRect bounds = await JS.InvokeAsync<DiagramRect>("getDiagramBounds", diagram.ID);
document.PageSettings.Height = (float)bounds.Height;
document.PageSettings.Width = (float)bounds.Width;

Expand Down
50 changes: 25 additions & 25 deletions KB-Samples/HTMLShapeExportInWASM/wwwroot/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,38 +19,38 @@ window.download = function download(image) {

window.exportToImage = async function (elementId) {
var image = "";
const original1 = document.getElementById(elementId + '_diagramLayer_div');
const original2 = document.getElementById(elementId + '_htmlLayer');
const clone1 = original1.cloneNode(true);
const clone2 = original2.cloneNode(true);
clone1.appendChild(clone2);
const tempContainer = document.createElement('div');
tempContainer.style.position = 'absolute';
tempContainer.style.left = '-9999px';
tempContainer.style.top = '-9999px';
tempContainer.appendChild(clone1);
document.body.appendChild(tempContainer);
await html2canvas(clone1).then(canvas => image = canvas.toDataURL("image/png"));
const diagramLayerElement = document.getElementById(elementId + '_diagramLayer_div');
const htmlLayerElement = document.getElementById(elementId + '_htmlLayer');
const clonedDiagramLayer = diagramLayerElement.cloneNode(true);
const clonedHtmlLayer = htmlLayerElement.cloneNode(true);
clonedDiagramLayer.appendChild(clonedHtmlLayer);
const exportContainer = document.createElement('div');
exportContainer.style.position = 'absolute';
exportContainer.style.left = '-9999px';
exportContainer.style.top = '-9999px';
exportContainer.appendChild(clonedDiagramLayer);
document.body.appendChild(exportContainer);
await html2canvas(clonedDiagramLayer).then(canvas => image = canvas.toDataURL("image/png"));
var link = document.createElement("a");
link.href = image;
link.download = "diagram.png";
link.click();
}
window.exportToPdf = async function (elementId) {
const original1 = document.getElementById(elementId + '_diagramLayer_div');
const original2 = document.getElementById(elementId + '_htmlLayer');
const clone1 = original1.cloneNode(true);
const clone2 = original2.cloneNode(true);
clone1.appendChild(clone2);
const tempContainer = document.createElement('div');
tempContainer.style.position = 'absolute';
tempContainer.style.left = '-9999px';
tempContainer.style.top = '-9999px';
tempContainer.appendChild(clone1);
document.body.appendChild(tempContainer);
const diagramLayerElement = document.getElementById(elementId + '_diagramLayer_div');
const htmlLayerElement = document.getElementById(elementId + '_htmlLayer');
const clonedDiagramLayer = diagramLayerElement.cloneNode(true);
const clonedHtmlLayer = htmlLayerElement.cloneNode(true);
clonedDiagramLayer.appendChild(clonedHtmlLayer);
const exportContainer = document.createElement('div');
exportContainer.style.position = 'absolute';
exportContainer.style.left = '-9999px';
exportContainer.style.top = '-9999px';
exportContainer.appendChild(clonedDiagramLayer);
document.body.appendChild(exportContainer);
var image = "";
await html2canvas(clone1).then(canvas => image = canvas.toDataURL("image/png"));
document.body.removeChild(tempContainer);
await html2canvas(clonedDiagramLayer).then(canvas => image = canvas.toDataURL("image/png"));
document.body.removeChild(exportContainer);
return image;
}

Expand Down
6 changes: 3 additions & 3 deletions KB-Samples/ImageExport/ImageExport/Components/Pages/Home.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@

@using Syncfusion.Blazor.BarcodeGenerator

<SfQRCodeGenerator @ref="@QRcode" Width="200px" Height="150px" Value="https://www.syncfusion.com/blazor-components/blazor-barcode">
<SfQRCodeGenerator @ref="@qrCode" Width="200px" Height="150px" Value="https://www.syncfusion.com/blazor-components/blazor-barcode">
<QRCodeGeneratorDisplayText Visibility="false"></QRCodeGeneratorDisplayText>
<QRCodeLogo ImageSource="@base64Image"></QRCodeLogo>
</SfQRCodeGenerator>

<input type="button" value="Export" @onclick="@OnExport" />

@code {
private SfQRCodeGenerator QRcode;
private SfQRCodeGenerator qrCode;
private string base64Image;
protected override void OnInitialized()
{
Expand All @@ -23,7 +23,7 @@
}
private async void OnExport()
{
QRcode.Export("QRCodeWithLogo", BarcodeExportType.JPG);
qrCode.Export("QRCodeWithLogo", BarcodeExportType.JPG);
}
}

20 changes: 10 additions & 10 deletions KB-Samples/UnselectSymbolInPalette/UnselectSymbolInPalette/Components/Pages/Home.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,29 +33,29 @@
</SfSymbolPaletteComponent>
</div>
<div id="diagram-space">
<SfDiagramComponent @ref="@Diagram" Height="700px">
<SfDiagramComponent @ref="@diagram" Height="700px">
</SfDiagramComponent>
</div>
</div>

@code {
DiagramSize symbolDragPreviewSize;
public SfDiagramComponent Diagram;
SfSymbolPaletteComponent palette;
public DiagramObjectCollection<Palette> palettes;
double symbolHeight = 65;
double symbolWidth = 65;
public DiagramObjectCollection<NodeBase> basicShapes { get; set; }
private DiagramSize symbolDragPreviewSize;
private SfDiagramComponent diagram;
private SfSymbolPaletteComponent palette;
private DiagramObjectCollection<Palette> palettes;
private double symbolHeight = 65;
private double symbolWidth = 65;
private DiagramObjectCollection<NodeBase> basicShapes { get; set; }

[Inject]
protected IJSRuntime jsRuntime { get; set; }
protected IJSRuntime JsRuntime { get; set; }

protected override async Task OnAfterRenderAsync(bool firstRender)
{
await base.OnAfterRenderAsync(firstRender);
palette.Targets = new DiagramObjectCollection<SfDiagramComponent>
{
Diagram
diagram
};
}

Expand Down