public Element CreateElement()
{
var heading = new Heading("Draw");
var subtitle = new Paragraph("Click to draw a masterpiece");
var toolSel = new Select();
toolSel.AppendChild(new Option {
Text = "Boxes", Value = "box"
});
toolSel.AddOption("Circles", "circle");
var canvas = new Canvas
{
Width = 320,
Height = 240,
};
var context = canvas.GetContext2D();
canvas.Click += (s, e) =>
{
var radius = 10;
context.BeginPath();
if (toolSel.Value == "box")
{
context.Rect(e.OffsetX - radius, e.OffsetY - radius, 2 * radius, 2 * radius);
}
else
{
context.Arc(e.OffsetX, e.OffsetY, radius, 0, 2 * Math.PI, true);
}
context.Fill();
};
canvas.Style.Cursor = "pointer";
canvas.Style.BorderColor = "#CCC";
canvas.Style.BorderStyle = "solid";
canvas.Style.BorderWidth = "1px";
var clearbtn = new Button("Clear")
{
Type = ButtonType.Submit,
ClassName = "btn btn-danger",
};
clearbtn.Click += (s, e) => {
context.ClearRect(0, 0, canvas.Width, canvas.Height);
};
clearbtn.Style.Display = "block";
var app = new Div();
app.AppendChild(heading);
app.AppendChild(subtitle);
app.AppendChild(new Div(toolSel));
app.AppendChild(canvas);
app.AppendChild(clearbtn);
return(app);
}
/// <summary>
/// 1. IsMultiSelect == false && IsCompact == true => render as a drop down select element
/// 2. IsMultiSelect == false && IsCompact == false => render as a list of radio buttons
/// 3. IsMultiSelect == true => render as a list of toggle inputs
/// </summary>
protected static Element ChoiceSetRender(AdaptiveChoiceSetInput adaptiveChoiceSetInput, ElementAdaptiveRenderContext context)
{
if (!adaptiveChoiceSetInput.IsMultiSelect)
{
if (adaptiveChoiceSetInput.Style == AdaptiveChoiceInputStyle.Compact)
{
var uiSelectElement = new Select()
.SetAttr("name", adaptiveChoiceSetInput.Id)
.AddClass("ac-input")
.AddClass("ac-multichoiceInput")
.Style("width", "100%");
foreach (var choice in adaptiveChoiceSetInput.Choices)
{
var option = new Option()
{
Text = choice.Title
}
.SetAttr("value", choice.Value);
if (choice.Value == adaptiveChoiceSetInput.Value)
{
option.SetAttr("selected", string.Empty);
}
uiSelectElement.AppendChild(option);
}
return(uiSelectElement);
}
else
{
return(ChoiceSetRenderInternal(adaptiveChoiceSetInput, context, "radio"));
}
}
else
{
return(ChoiceSetRenderInternal(adaptiveChoiceSetInput, context, "checkbox"));
}
}