Exemplo n.º 1
0
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            if (!_isVisible)
            {
                return;
            }

            var componentType = DiagramManager.GetComponentForModel(Node) ??
                                DiagramManager.Options.DefaultNodeComponent ??
                                (Node.Layer == RenderLayer.HTML ? typeof(NodeWidget) : typeof(SvgNodeWidget));

            builder.OpenElement(0, Node.Layer == RenderLayer.HTML ? "div" : "g");
            builder.AddAttribute(1, "class", "node");

            if (Node.Layer == RenderLayer.HTML)
            {
                builder.AddAttribute(2, "style", $"top: {Node.Position.Y.ToInvariantString()}px; left: {Node.Position.X.ToInvariantString()}px");
            }
            else
            {
                builder.AddAttribute(2, "transform", $"translate({Node.Position.X.ToInvariantString()} {Node.Position.Y.ToInvariantString()})");
            }

            builder.AddAttribute(3, "onmousedown", EventCallback.Factory.Create <MouseEventArgs>(this, OnMouseDown));
            builder.AddEventStopPropagationAttribute(4, "onmousedown", true);
            builder.AddAttribute(5, "onmouseup", EventCallback.Factory.Create <MouseEventArgs>(this, OnMouseUp));
            builder.AddEventStopPropagationAttribute(6, "onmouseup", true);
            builder.AddElementReferenceCapture(7, value => _element = value);
            builder.OpenComponent(8, componentType);
            builder.AddAttribute(9, "Node", Node);
            builder.CloseComponent();
            builder.CloseElement();
        }
Exemplo n.º 2
0
        /// <inheritdoc />
        protected override void BuildRenderInput(RenderTreeBuilder builder)
        {
            builder.OpenElement(0, GetElementName());
            BuildRenderInput_AddCommonAttributes(builder, GetTypeAttributeValue());

            int?maxLengthEffective = this.MaxLength ?? GetValueAttribute <MaxLengthAttribute>()?.Length;

            if (maxLengthEffective > 0)             // [MaxLength] attribute has a default value of -1
            {
                builder.AddAttribute(1000, "maxlength", maxLengthEffective);
            }

            builder.AddAttribute(1002, "value", FormatValueAsString(Value));
            builder.AddAttribute(1003, BindEvent.ToEventName(), EventCallback.Factory.CreateBinder <string>(this, value => CurrentValueAsString = value, CurrentValueAsString));

            if (this.InputModeEffective is not null)
            {
                builder.AddAttribute(1004, "inputmode", this.InputModeEffective.Value.ToString("f").ToLower());
            }

            builder.AddEventStopPropagationAttribute(1005, "onclick", true);
            builder.AddElementReferenceCapture(1006, elementReferece => InputElement = elementReferece);

            builder.CloseElement();
        }
Exemplo n.º 3
0
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            base.BuildRenderTree(builder);

            builder.OpenElement(0, HtmlTag);
            builder.AddMultipleAttributes(1, Attributes);
            builder.AddAttribute(2, "class", Class);
            builder.AddAttribute(3, "style", Style);
            if (HtmlTag == "button")
            {
                builder.AddEventStopPropagationAttribute(5, "onclick", true);
            }

            builder.AddElementReferenceCapture(6, async capturedRef =>
            {
                Ref = capturedRef;

                if (RefChanged.HasDelegate)
                {
                    await RefChanged.InvokeAsync(Ref);
                }
            });

            builder.AddContent(10, ChildContent);
            builder.CloseElement();
        }
Exemplo n.º 4
0
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            var componentType = DiagramManager.GetComponentForModel(Link) ??
                                DiagramManager.Options.Links.DefaultLinkComponent ??
                                typeof(LinkWidget);

            builder.OpenElement(0, "g");
            builder.AddAttribute(1, "class", "link");
            builder.AddAttribute(2, "onmousedown", EventCallback.Factory.Create <MouseEventArgs>(this, OnMouseDown));
            builder.AddEventStopPropagationAttribute(3, "onmousedown", true);
            builder.AddAttribute(4, "onmouseup", EventCallback.Factory.Create <MouseEventArgs>(this, OnMouseUp));
            builder.AddEventStopPropagationAttribute(5, "onmouseup", true);
            builder.OpenComponent(6, componentType);
            builder.AddAttribute(7, "Link", Link);
            builder.CloseComponent();
            builder.CloseElement();
        }
Exemplo n.º 5
0
 protected override void BuildRenderTree(RenderTreeBuilder builder)
 {
     builder.OpenElement(0, Port.Parent.Layer == RenderLayer.HTML ? "div" : "g");
     builder.AddAttribute(1, "class", "port" + " " + (Port.Alignment.ToString().ToLower()) + " " + (Port.Links.Count > 0 ? "has-links" : "") + " " + (Class));
     builder.AddAttribute(2, "data-port-id", Port.Id);
     builder.AddAttribute(3, "onmousedown", EventCallback.Factory.Create <MouseEventArgs>(this, OnMouseDown));
     builder.AddEventStopPropagationAttribute(4, "onmousedown", true);
     builder.AddAttribute(5, "onmouseup", EventCallback.Factory.Create <MouseEventArgs>(this, OnMouseUp));
     builder.AddEventStopPropagationAttribute(6, "onmouseup", true);
     builder.AddAttribute(7, "ontouchstart", EventCallback.Factory.Create <TouchEventArgs>(this, OnTouchStart));
     builder.AddEventStopPropagationAttribute(8, "ontouchstart", true);
     builder.AddAttribute(9, "ontouchend", EventCallback.Factory.Create <TouchEventArgs>(this, OnTouchEnd));
     builder.AddEventStopPropagationAttribute(10, "ontouchend", true);
     builder.AddEventPreventDefaultAttribute(11, "ontouchend", true);
     builder.AddElementReferenceCapture(12, (__value) => { _element = __value; });
     builder.AddContent(13, ChildContent);
     builder.CloseElement();
 }
Exemplo n.º 6
0
        /// <summary>
        /// BuildRenderTree 方法
        /// </summary>
        /// <param name="builder"></param>
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            if (TabSet != null)
            {
                if (!TabSet.Items.Any(t => t.IsActive))
                {
                    var t = TabSet.Items.FirstOrDefault();
                    t?.SetActive(true);
                }

                foreach (var item in TabSet.Items)
                {
                    var index = 0;
                    builder.OpenElement(index++, "div");
                    builder.AddAttribute(index++, "role", "tab");
                    builder.AddAttribute(index++, "tabindex", "-1");
                    builder.AddAttribute(index++, "class", GetClassString(item.IsActive));
                    builder.AddAttribute(index++, "onclick", EventCallback.Factory.Create(this, async() =>
                    {
                        TabSet.Items.ToList().ForEach(i => i.SetActive(false));
                        item.SetActive(true);
                        if (OnClickTab != null)
                        {
                            await OnClickTab(item);
                        }
                    }));

                    if (!string.IsNullOrEmpty(item.Icon))
                    {
                        builder.OpenElement(index++, "i");
                        builder.AddAttribute(index++, "class", GetIconClassString(item.Icon));
                        builder.CloseElement();
                    }

                    builder.OpenElement(index++, "span");
                    builder.AddAttribute(index++, "class", "tabs-item-text");
                    builder.AddContent(index++, item.Text);
                    builder.CloseElement(); // end span

                    if (TabSet.ShowClose)
                    {
                        builder.OpenElement(index++, "span");
                        builder.AddAttribute(index++, "class", "tabs-item-close");

                        builder.OpenElement(index++, "i");
                        builder.AddAttribute(index++, "class", "fa fa-close");
                        builder.AddAttribute(index++, "onclick", EventCallback.Factory.Create(this, () => TabSet?.Remove(item)));
                        builder.AddEventStopPropagationAttribute(index++, "onclick", true);
                        builder.CloseElement();

                        builder.CloseElement(); // end span
                    }

                    builder.CloseElement(); // end div
                }
            }
        }
Exemplo n.º 7
0
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            int seq = -1;

            var rootClasses =
                new ClassSet("Integrant.Element.Component", "Integrant.Element.Component.Modal");

            if (Modal !.Shown)
            {
                rootClasses.Add("Integrant.Element.Component.Modal:Shown");
            }

            // -> Container

            builder.OpenElement(++seq, "div");
            builder.AddAttribute(++seq, "hidden", !Modal !.Shown);
            builder.AddAttribute(++seq, "class", rootClasses.ToString());
            builder.AddAttribute(++seq, "onclick",
                                 EventCallback.Factory.Create <MouseEventArgs>(this, OnBackgroundClick));
            builder.AddElementReferenceCapture(++seq, elemRef => _elemRef = elemRef);

            // - -> Constrainer

            builder.OpenElement(++seq, "div");
            builder.AddAttribute(++seq, "class", "Integrant.Element.Component.Modal.Constrainer");
            builder.AddAttribute(++seq, "style", $"max-width: {Modal.MaxWidth()};");

            // - - -> Content container

            builder.OpenElement(++seq, "div");
            builder.AddAttribute(++seq, "class", "Integrant.Element.Component.Modal.Content");
            builder.AddAttribute(++seq, "onclick", EventCallback.Factory.Create <MouseEventArgs>(this, OnContentClick));
            builder.AddEventStopPropagationAttribute(++seq, "onclick", true);

            // - - - -> Close button

            builder.OpenElement(++seq, "span");
            builder.AddAttribute(++seq, "class", "Integrant.Element.Component.Modal.CloseButton");
            builder.AddAttribute(++seq, "onclick",
                                 EventCallback.Factory.Create <MouseEventArgs>(this, OnCloseButtonClick));
            builder.OpenComponent <MaterialIcon>(++seq);
            builder.AddAttribute(++seq, "ID", "close");
            builder.CloseComponent();
            builder.CloseElement();

            // - - - -> Content

            builder.AddContent(++seq, ChildContent);

            //

            builder.CloseElement();

            builder.CloseElement();

            builder.CloseElement();
        }
Exemplo n.º 8
0
 protected override void BuildRenderTree(RenderTreeBuilder builder)
 {
     builder.OpenComponent(0, ChildComponent);
     builder.AddEventStopPropagationAttribute(1, "onclick", true); // for child trees, can be overriden.
     builder.AddMultipleAttributes(2, AdditionalAttributes);
     builder.AddAttribute(3, "onclick", new Action(() => Navigate()));
     builder.AddAttribute(4, "selected", _isActive);
     builder.AddAttribute(5, "ChildContent", ChildContent);
     builder.CloseComponent();
 }
Exemplo n.º 9
0
        /// <inheritdoc />
        protected override void BuildRenderInput(RenderTreeBuilder builder)
        {
            builder.OpenElement(0, "input");
            BuildRenderInput_AddCommonAttributes(builder, "checkbox");

            builder.AddAttribute(1000, "checked", BindConverter.FormatValue(CurrentValue));
            builder.AddAttribute(1001, "onchange", value: EventCallback.Factory.CreateBinder <bool>(this, value => CurrentValue = value, CurrentValue));
            builder.AddEventStopPropagationAttribute(1002, "onclick", true);
            builder.AddElementReferenceCapture(1003, elementReferece => InputElement = elementReferece);

            builder.CloseElement();
        }
Exemplo n.º 10
0
        ///-------------------------------------------------------------------------------------------------
        /// <summary>
        ///     Renders the component to the supplied
        ///     <see cref="T:Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder" />.
        /// </summary>
        ///
        /// <param name="builder">  A <see cref="T:Microsoft.AspNetCore.Components.Rendering.RenderTreeBuil
        ///                         der" /> that will receive the render output. </param>
        ///
        /// <seealso cref="Microsoft.AspNetCore.Components.ComponentBase.BuildRenderTree(RenderTreeBuilder)"/>
        ///-------------------------------------------------------------------------------------------------
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            base.BuildRenderTree(builder);

            builder.OpenElement(0, Tag);

            builder.AddMultipleAttributes(1, CustomAttributes);
            builder.AddEventPreventDefaultAttribute(2, "onclick", OnClickPreventDefault);
            builder.AddEventStopPropagationAttribute(3, "onclick", OnClickStopPropagation);

            builder.AddContent(4, ChildContent);

            builder.CloseElement();
        }
Exemplo n.º 11
0
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            var componentType = Diagram.GetComponentForModel(Link) ??
                                Diagram.Options.Links.DefaultLinkComponent ??
                                typeof(LinkWidget);

            builder.OpenElement(0, "g");
            builder.AddAttribute(1, "class", "link");
            builder.AddAttribute(2, "data-link-id", Link.Id);
            builder.AddAttribute(3, "onmousedown", EventCallback.Factory.Create <MouseEventArgs>(this, OnMouseDown));
            builder.AddEventStopPropagationAttribute(4, "onmousedown", true);
            builder.AddAttribute(5, "onmouseup", EventCallback.Factory.Create <MouseEventArgs>(this, OnMouseUp));
            builder.AddEventStopPropagationAttribute(6, "onmouseup", true);
            builder.AddAttribute(7, "ontouchstart", EventCallback.Factory.Create <TouchEventArgs>(this, OnTouchStart));
            builder.AddEventStopPropagationAttribute(8, "ontouchstart", true);
            builder.AddAttribute(9, "ontouchend", EventCallback.Factory.Create <TouchEventArgs>(this, OnTouchEnd));
            builder.AddEventStopPropagationAttribute(10, "ontouchend", true);
            builder.AddEventPreventDefaultAttribute(11, "ontouchend", true);
            builder.OpenComponent(12, componentType);
            builder.AddAttribute(13, "Link", Link);
            builder.CloseComponent();
            builder.CloseElement();
        }
Exemplo n.º 12
0
        protected void BuildRenderInput_RenderRadioItem(RenderTreeBuilder builder, int index)
        {
            var item = itemsToRender[index];

            if (item != null)
            {
                bool selected = (index == selectedItemIndex);
                if (selected)
                {
                    chipValue = SelectorHelpers.GetText(TextSelectorImpl, item);
                }

                string inputId = GroupName + "_" + index.ToString();

                builder.OpenElement(100, "div");

                // TODO CoreCssClass
                builder.AddAttribute(101, "class", CssClassHelper.Combine("form-check", this.Inline ? "form-check-inline" : null));

                builder.OpenElement(200, "input");
                builder.AddAttribute(201, "class", "form-check-input");
                builder.AddAttribute(202, "type", "radio");
                builder.AddAttribute(203, "name", GroupName);
                builder.AddAttribute(204, "id", inputId);
                builder.AddAttribute(205, "value", index.ToString());
                builder.AddAttribute(206, "checked", selected);
                builder.AddAttribute(207, "disabled", !CascadeEnabledComponent.EnabledEffective(this));
                int j = index;
                builder.AddAttribute(208, "onclick", EventCallback.Factory.Create(this, () => HandleInputClick(j)));
                builder.AddEventStopPropagationAttribute(209, "onclick", true);
                builder.AddMultipleAttributes(250, this.AdditionalAttributes);
                builder.CloseElement();                 // input

                builder.OpenElement(300, "label");
                builder.AddAttribute(301, "class", "form-check-label");
                builder.AddAttribute(302, "for", inputId);
                if (ItemTemplateImpl != null)
                {
                    builder.AddContent(303, ItemTemplateImpl(item));
                }
                else
                {
                    builder.AddContent(304, SelectorHelpers.GetText(TextSelectorImpl, item));
                }
                builder.CloseElement();                 // label

                builder.CloseElement();                 // div
            }
        }
Exemplo n.º 13
0
 protected override void BuildRenderTree(RenderTreeBuilder builder)
 {
     if (!String.IsNullOrEmpty(FormValueComponent.Label) || (FormValueComponent.LabelTemplate != null))
     {
         builder.OpenElement(1, "label");
         builder.AddAttribute(2, "for", FormValueComponent.LabelFor);
         builder.AddAttribute(3, "class", CssClassHelper.Combine(FormValueComponent.CoreLabelCssClass, FormValueComponent.LabelCssClass));
         builder.AddEventStopPropagationAttribute(4, "onclick", true);
         if (FormValueComponent.LabelTemplate == null)
         {
             builder.AddContent(5, FormValueComponent.Label);
         }
         builder.AddContent(6, FormValueComponent.LabelTemplate);
         builder.CloseElement();
     }
 }
Exemplo n.º 14
0
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            base.BuildRenderTree(builder);
            //Open
            builder.OpenElement(0, HtmlTag);

            //splatted attributes
            foreach (var attribute in UserAttributes)
            {
                // checking if the value is null, we can get rid of null event handlers
                // for example `@onmouseenter=@(IsOpen ? HandleEnter : null)`
                // this is a powerful feature that in normal HTML elements doesn't work, because
                // Blazor adds always the attribute value and creates an EventCallback
                if (attribute.Value != null)
                {
                    builder.AddAttribute(1, attribute.Key, attribute.Value);
                }
            }
            //Class
            builder.AddAttribute(2, "class", Class);
            //Style
            builder.AddAttribute(3, "style", Style);

            // StopPropagation
            // the order matters. This has to be before content is added
            if (HtmlTag == "button")
            {
                builder.AddEventStopPropagationAttribute(5, "onclick", true);
            }

            //Reference capture
            if (Ref != null)
            {
                builder.AddElementReferenceCapture(6, async capturedRef =>
                {
                    Ref = capturedRef;
                    await RefChanged.InvokeAsync(Ref.Value);
                });
            }

            //Content
            builder.AddContent(10, ChildContent);

            //Close
            builder.CloseElement();
        }
Exemplo n.º 15
0
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            builder.OpenElement(0, ElementName);

            builder.AddAttribute(1, "onclick", InvokeOnClickAsync);
            builder.AddEventPreventDefaultAttribute(2, "onclick", OnClickPreventDefault);
            builder.AddEventStopPropagationAttribute(3, "onclick", OnClickStopPropagation);
            builder.AddMultipleAttributes(4, AdditionalAttributes);
            builder.AddElementReferenceCapture(5, capturedRef =>
            {
                ElementRef = capturedRef;
                ElementRefChanged?.Invoke(ElementRef);
            });
            builder.AddContent(6, ChildContent);

            builder.CloseElement();
        }
Exemplo n.º 16
0
        /// <inheritdoc/>
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            base.BuildRenderTree(builder);
            builder?.OpenElement(0, TagName);

            builder.AddMultipleAttributes(1, Attributes);
            builder.AddEventPreventDefaultAttribute(2, "onclick", ClickPreventDefault);
            builder.AddEventStopPropagationAttribute(3, "onclick", ClickStopPropagation);
            builder.AddContent(4, ChildContent);
            builder.AddElementReferenceCapture(2, capturedRef =>
            {
                ElementRef = capturedRef;
                ElementRefChanged?.Invoke(ElementRef);   // Invoke the callback for the binding to work.
            });

            builder.CloseElement();
        }
 protected override void BuildRenderTree(RenderTreeBuilder builder)
 {
     base.BuildRenderTree(builder);
     builder.OpenElement(0, _Component);
     builder.AddAttribute(1, "class", _Class);
     builder.AddAttribute(2, "style", _Style);
     if (OnClick.HasDelegate)
     {
         builder.AddAttribute(3, "onclick", EventCallback.Factory.Create(this, HandleClick));
     }
     if (OnMouseLeave.HasDelegate)
     {
         builder.AddAttribute(4, "onmouseleave", EventCallback.Factory.Create(this, HandleMouseLeaveAsync));
     }
     if (OnMouseEnter.HasDelegate)
     {
         builder.AddAttribute(5, "onmouseenter", EventCallback.Factory.Create(this, HandleMouseEnterAsync));
     }
     if (OnFocus.HasDelegate)
     {
         builder.AddAttribute(6, "onfocus", EventCallback.Factory.Create <FocusEventArgs>(this, HandleFocusAsync));
     }
     if (OnBlur.HasDelegate)
     {
         builder.AddAttribute(7, "onblur", EventCallback.Factory.Create <FocusEventArgs>(this, HandleBlurAsync));
     }
     if (!string.IsNullOrWhiteSpace(Id))
     {
         builder.AddAttribute(8, "id", Id);
     }
     if (OnClickStop.HasValue)
     {
         builder.AddEventStopPropagationAttribute(9, "onclick", OnClickStop.Value);
     }
     if (OnClickPrevent.HasValue)
     {
         builder.AddEventPreventDefaultAttribute(10, "onclick", OnClickPrevent.Value);
     }
     builder.AddMultipleAttributes(11, Attributes);
     builder.AddContent(12, ChildContent);
     builder.AddElementReferenceCapture(13, (__value) => {
         RootRef.Current = (ElementReference)__value;
     });
     builder.CloseElement();
 }
Exemplo n.º 18
0
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            builder.OpenElement(0, "a");

            builder.AddMultipleAttributes(1, AdditionalAttributes);
            builder.AddAttribute(2, "class", CssClass);

            if (this.OnClick.HasDelegate)
            {
                builder.AddAttribute(3, "onclick", this.OnClick);
                builder.AddEventPreventDefaultAttribute(4, "onclick", true);
                builder.AddEventStopPropagationAttribute(5, "onclick", true);
            }

            builder.AddContent(6, ChildContent);

            builder.CloseElement();
        }
Exemplo n.º 19
0
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            base.BuildRenderTree(builder);
            builder.OpenElement(0, HtmlTag);
            builder.AddMultipleAttributes(1, UserAttributes);
            builder.AddAttribute(2, "class", Class);
            builder.AddAttribute(3, "style", Style);

            //the order matters. This has to be before content is added
            if (HtmlTag == "button")
            {
                builder.AddEventStopPropagationAttribute(5, "onclick", true);
            }

            builder.AddContent(10, ChildContent);


            builder.CloseElement();
        }
Exemplo n.º 20
0
            protected override void BuildRenderTree(RenderTreeBuilder builder)
            {
                base.BuildRenderTree(builder);

                builder.OpenElement(0, "button");
                builder.AddAttribute(1, "type", "button");

                if (OnClick.HasDelegate)
                {
                    builder.AddAttribute(2, "onclick", EventCallback.Factory.Create(this, OnClick));
                    builder.AddEventStopPropagationAttribute(3, "onclick", OnClickStopPropagation);
                    builder.AddEventPreventDefaultAttribute(4, "onclick", OnClickPreventDefault);
                }

                builder.AddElementReferenceCapture(6, elmRef => ButtomElmRef = elmRef);

                builder.AddContent(6, "Click me!");

                builder.CloseElement();
            }
Exemplo n.º 21
0
 /// <summary>
 /// BuildRenderTree 方法
 /// </summary>
 /// <param name="builder"></param>
 protected override void BuildRenderTree(RenderTreeBuilder builder)
 {
     builder.OpenElement(0, TagName);
     if (AdditionalAttributes != null)
     {
         builder.AddMultipleAttributes(1, AdditionalAttributes);
     }
     if (TriggerClick && OnClick != null)
     {
         builder.AddAttribute(2, "onclick", EventCallback.Factory.Create <MouseEventArgs>(this, e => OnClick()));
     }
     if (TriggerDoubleClick && OnDoubleClick != null)
     {
         builder.AddAttribute(3, "ondblclick", EventCallback.Factory.Create <MouseEventArgs>(this, e => OnDoubleClick()));
     }
     builder.AddEventPreventDefaultAttribute(4, "onclick", PreventDefault);
     builder.AddEventStopPropagationAttribute(5, "onclick", StopPropagation);
     builder.AddContent(6, ChildContent);
     builder.CloseElement();
 }
Exemplo n.º 22
0
        /// <inheritdoc />
        protected override void BuildRenderInput(RenderTreeBuilder builder)
        {
            builder.OpenElement(0, "input");
            BuildRenderInput_AddCommonAttributes(builder, "text");

            var inputMode = this.InputModeEffective;

            if ((inputMode is null) && (DecimalsEffective == 0))
            {
                inputMode = Web.InputMode.Numeric;
            }
            if (inputMode is not null)
            {
                builder.AddAttribute(1001, "inputmode", inputMode.Value.ToString("f").ToLower());
            }

            builder.AddAttribute(1002, "onfocus", "this.select();");             // source: https://stackoverflow.com/questions/4067469/selecting-all-text-in-html-text-input-when-clicked
            builder.AddAttribute(1003, "onchange", EventCallback.Factory.CreateBinder <string>(this, value => CurrentValueAsString = value, CurrentValueAsString));
            builder.AddEventStopPropagationAttribute(1004, "onclick", true);

            // The counting sequence values violate all general recommendations.
            // We want the value of the HxInputNumber to be updated (rerendered) when the user input changes, even if FormatValueAsString(Value) hasn't changed.
            // The reason for this is that if a value such as "1.00" is displayed and a user modifies it to "1.0", FormatValueAsString(Value) isn't going to change,
            // the attribute is not rerendered, so the user input stays at "1.0".
            // To solve this issue, we will use the sequence values 1005, 1006, 1007, ... That way, we force Blazor to update the value anyway (because of the sequence change).
            // However, we adjust the sequence only if we want to enforce the rerendering. Otherwise, the component would update all the time.
            // (Originally, we wanted to use the sequences 1000 and 1001, which we would toggle.
            // However, this doesn't work - Blazor probably realizes that it should add the value (sequence 1000) and then remove the value (sequence 1001), resulting in a missing value of the input.)
            checked
            {
                if (forceRenderValue)
                {
                    valueSequenceOffset++;
                    forceRenderValue = false;
                }
                builder.AddAttribute(1006 + valueSequenceOffset, "value", FormatValueAsString(Value));
            }
            builder.AddElementReferenceCapture(Int32.MaxValue, elementReferece => InputElement = elementReferece);

            builder.CloseElement();
        }
Exemplo n.º 23
0
        public override void BuildRenderTree(RenderTreeBuilder builder, object?value)
        {
            object?result1 = Text;

            if (_textBinding.HasValue)
            {
                ReflectionHelper.TryGetPropertyValue(value, _textBinding, out result1);
            }

            object?result2 = Href;

            if (_hrefBinding.HasValue)
            {
                ReflectionHelper.TryGetPropertyValue(value, _hrefBinding, out result2);
            }

            if (HrefConverter != null)
            {
                result2 = HrefConverter.ConvertTypeSafe <string>(result2);
            }

            if (result1 == null)
            {
                result1 = result2;
            }
            else if (TextConverter != null)
            {
                result1 = TextConverter.ConvertTypeSafe <string>(result1);
            }

            builder.OpenElement(0, "a");
            builder.AddAttribute(1, "href", result2?.ToString());
            builder.AddEventStopPropagationAttribute(2, "onclick", true);
            builder.AddContent(3, Format != null && result1 is IFormattable formattableResult
                ? formattableResult.ToString(Format, FormatProvider ?? CultureInfo.InvariantCulture)
                : result1?.ToString());
            builder.CloseElement();
        }
Exemplo n.º 24
0
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            base.BuildRenderTree(builder);
            //Open
            builder.OpenElement(0, HtmlTag);

            //splatted attributes
            builder.AddMultipleAttributes(1, UserAttributes);
            //Class
            builder.AddAttribute(2, "class", Class);
            //Style
            builder.AddAttribute(3, "style", Style);

            // StopPropagation
            //the order matters. This has to be before content is added
            if (HtmlTag == "button")
            {
                builder.AddEventStopPropagationAttribute(5, "onclick", true);
            }

            //Reference capture
            if (Ref != null)
            {
                builder.AddElementReferenceCapture(6, async capturedRef =>
                {
                    Ref = capturedRef;
                    await RefChanged.InvokeAsync(Ref.Value);
                });
            }

            //Content
            builder.AddContent(10, ChildContent);

            //Close
            builder.CloseElement();
        }
Exemplo n.º 25
0
 internal static void AddEventStopPropagationClicksAttribute(this RenderTreeBuilder builder, int sequence)
 {
     builder.AddEventStopPropagationAttribute(sequence, "onclick", true);
     builder.AddEventStopPropagationAttribute(sequence, "ondblclick", true);
 }
Exemplo n.º 26
0
        /// <summary>
        /// 渲染组件方法
        /// </summary>
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            // 渲染正常按钮
            if (Columns != null)
            {
                var index = 0;
                foreach (var header in Columns.Columns)
                {
                    var fieldName   = header.GetFieldName();
                    var displayName = header.GetDisplayName();
                    builder.OpenElement(index++, "th");

                    // 移除 bind-Field
                    header.AdditionalAttributes?.Remove("FieldChanged");
                    builder.AddMultipleAttributes(index++, header.AdditionalAttributes);
                    builder.AddAttribute(index++, "class", CssBuilder.Default()
                                         .AddClass("sortable", header.Sortable)
                                         .AddClass("filterable", header.Filterable)
                                         .Build());

                    // 如果允许排序
                    if (header.Sortable)
                    {
                        builder.AddAttribute(index++, "onclick", EventCallback.Factory.Create(this, async() =>
                        {
                            if (sortOrder == SortOrder.Unset)
                            {
                                sortOrder = SortOrder.Asc;
                            }
                            else if (sortOrder == SortOrder.Asc)
                            {
                                sortOrder = SortOrder.Desc;
                            }
                            else if (sortOrder == SortOrder.Desc)
                            {
                                sortOrder = SortOrder.Unset;
                            }
                            sortName = fieldName;

                            // 通知 Table 组件刷新数据
                            if (Columns.OnSortAsync != null)
                            {
                                await Columns.OnSortAsync.Invoke(sortName, sortOrder);
                            }
                        }));
                    }
                    builder.OpenElement(index++, "div");
                    builder.AddAttribute(index++, "class", CssBuilder.Default("table-cell")
                                         .AddClass("is-sort", header.Sortable)
                                         .AddClass("is-filter", header.Filterable)
                                         .Build());

                    builder.OpenElement(index++, "span");
                    builder.AddAttribute(index++, "class", "table-text");
                    builder.AddContent(index++, displayName);
                    builder.CloseElement(); // span

                    if (header.Filterable)
                    {
                        builder.OpenElement(index++, "i");
                        builder.AddAttribute(index++, "class", CssBuilder.Default("fa fa-fw fa-filter")
                                             .AddClass("active", Columns.HasFilter(fieldName))
                                             .Build());
                        builder.AddAttribute(index++, "data-field", fieldName);
                        builder.AddEventStopPropagationAttribute(index++, "onclick", true);
                        builder.AddAttribute(index++, "onclick", EventCallback.Factory.Create <MouseEventArgs>(this, e =>
                        {
                            // 点击 Filter 小图标事件
                            Columns.ShowFilter(fieldName);
                        }));
                        builder.CloseElement(); // end i
                    }

                    if (header.Sortable)
                    {
                        builder.OpenElement(index++, "i");
                        var order = sortName == fieldName ? sortOrder : SortOrder.Unset;
                        var icon  = order switch
                        {
                            SortOrder.Asc => SortIconAsc,
                            SortOrder.Desc => SortIconDesc,
                            _ => SortIcon
                        };
                        builder.AddAttribute(index++, "class", icon);
                        builder.CloseElement(); // end i
                    }
                    builder.CloseElement();     // end div
                    builder.CloseElement();     // end th
                }
            }
        }
    }
Exemplo n.º 27
0
        protected virtual void BuildElementRenderTree(RenderTreeBuilder builder)
        {
            builder.OpenElement(0, Tag);

            //foreach (var attribute in Attributes)
            //{
            //    builder.AddAttribute(1, attribute.Key, attribute.Value);
            //}

            builder.AddMultipleAttributes(1, Attributes);

            var _class = _Class;
            var _style = _Style;

            if (!string.IsNullOrWhiteSpace(Id))
            {
                builder.AddAttribute(2, "id", Id);
            }

            if (!string.IsNullOrWhiteSpace(_class))
            {
                builder.AddAttribute(3, "class", _class);
            }

            if (!string.IsNullOrWhiteSpace(_style))
            {
                builder.AddAttribute(4, "style", _style);
            }

            if (TabIndex.HasValue)
            {
                builder.AddAttribute(5, "tabindex", Disabled.HasValue && Disabled.Value ? -1 : TabIndex);
            }

            if (OnFocus.HasDelegate)
            {
                builder.AddAttribute(6, "onfocus", EventCallback.Factory.Create <FocusEventArgs>(this, HandleFocusAsync));
            }

            if (OnBlur.HasDelegate)
            {
                builder.AddAttribute(7, "onblur", EventCallback.Factory.Create <FocusEventArgs>(this, HandleBlurAsync));
            }

            if (OnKeyDown.HasDelegate)
            {
                builder.AddAttribute(8, "onkeydown", EventCallback.Factory.Create <KeyboardEventArgs>(this, HandleKeyDownAsync));
            }

            if (OnKeyUp.HasDelegate)
            {
                builder.AddAttribute(9, "onkeyup", EventCallback.Factory.Create <KeyboardEventArgs>(this, HandleKeyUpAsync));
            }

            if (OnMouseDown.HasDelegate)
            {
                builder.AddAttribute(10, "onmousedown", EventCallback.Factory.Create <MouseEventArgs>(this, HandleMouseDownAsync));
            }

            if (OnMouseUp.HasDelegate)
            {
                builder.AddAttribute(11, "onmouseup", EventCallback.Factory.Create <MouseEventArgs>(this, HandleMouseUpAsync));
            }

            if (OnMouseEnter.HasDelegate)
            {
                builder.AddAttribute(12, "onmouseenter", EventCallback.Factory.Create <EventArgs>(this, HandleMouseEnterAsync));
            }

            if (OnMouseLeave.HasDelegate)
            {
                builder.AddAttribute(13, "onmouseleave", EventCallback.Factory.Create <EventArgs>(this, HandleMouseLeaveAsync));
            }

            if (OnMouseOver.HasDelegate)
            {
                builder.AddAttribute(14, "onmouseover", EventCallback.Factory.Create <MouseEventArgs>(this, HandleMouseOverAsync));
            }

            if (OnMouseOut.HasDelegate)
            {
                builder.AddAttribute(15, "onmouseout", EventCallback.Factory.Create <MouseEventArgs>(this, HandleMouseOutAsync));
            }

            if (OnMouseMove.HasDelegate)
            {
                builder.AddAttribute(16, "onmousemove", EventCallback.Factory.Create <MouseEventArgs>(this, HandleMouseMoveAsync));
            }

            if (OnTouchStart.HasDelegate)
            {
                builder.AddAttribute(17, "ontouchstart", EventCallback.Factory.Create <TouchEventArgs>(this, HandleTouchStartAsync));
            }

            if (OnTouchMove.HasDelegate)
            {
                builder.AddAttribute(18, "ontouchmove", EventCallback.Factory.Create <TouchEventArgs>(this, HandleTouchMoveAsync));
            }

            if (OnTouchEnd.HasDelegate)
            {
                builder.AddAttribute(19, "ontouchend", EventCallback.Factory.Create <TouchEventArgs>(this, HandleTouchEndAsync));
            }

            if (OnClick.HasDelegate)
            {
                builder.AddAttribute(20, "onclick", EventCallback.Factory.Create <EventArgs>(this, HandleClickAsync));
            }

            if (OnDrag.HasDelegate)
            {
                builder.AddAttribute(21, "ondrag", EventCallback.Factory.Create <DragEventArgs>(this, HandleDragAsync));
            }

            if (OnDrop.HasDelegate)
            {
                builder.AddAttribute(22, "ondrop", EventCallback.Factory.Create <DragEventArgs>(this, HandleDropAsync));
            }

            if (OnDragStart.HasDelegate)
            {
                builder.AddAttribute(23, "ondragstart", EventCallback.Factory.Create <DragEventArgs>(this, HandleDragStartAsync));
            }

            if (OnDragEnd.HasDelegate)
            {
                builder.AddAttribute(24, "ondragend", EventCallback.Factory.Create <DragEventArgs>(this, HandleDragEndAsync));
            }

            if (OnDragEnter.HasDelegate)
            {
                builder.AddAttribute(25, "ondragenter", EventCallback.Factory.Create <DragEventArgs>(this, HandleDragEnterAsync));
            }

            if (OnDragExit.HasDelegate)
            {
                builder.AddAttribute(26, "ondragexit", EventCallback.Factory.Create <DragEventArgs>(this, HandleDragExitAsync));
            }

            if (OnDragOver.HasDelegate)
            {
                builder.AddAttribute(27, "ondragover", EventCallback.Factory.Create <DragEventArgs>(this, HandleDragOverAsync));
            }

            if (OnDragLeave.HasDelegate)
            {
                builder.AddAttribute(28, "ondragleave", EventCallback.Factory.Create <DragEventArgs>(this, HandleDragLeaveAsync));
            }

            if (!string.IsNullOrWhiteSpace(Role))
            {
                builder.AddAttribute(29, "role", Role);
            }

            if (Disabled.HasValue)
            {
                builder.AddAttribute(30, "disabled", Disabled.Value);
            }

            if (OnClickStop.HasValue)
            {
                builder.AddEventStopPropagationAttribute(31, "onclick", OnClickStop.Value);
            }

            if (OnClickPrevent.HasValue)
            {
                builder.AddEventPreventDefaultAttribute(32, "onclick", OnClickPrevent.Value);
            }

            if (OnKeyUpStop.HasValue)
            {
                builder.AddEventStopPropagationAttribute(33, "onkeyup", OnKeyUpStop.Value);
            }

            if (OnKeyUpPrevent.HasValue)
            {
                builder.AddEventPreventDefaultAttribute(34, "onkeyup", OnKeyUpPrevent.Value);
            }

            if (ChildContent != null)
            {
                builder.AddContent(35, ChildContent(Context));
            }

            builder.AddElementReferenceCapture(36, (__value) => {
                RootRef.Current = (ElementReference)__value;
            });

            builder.CloseElement();
        }
Exemplo n.º 28
0
        public void RenderSvgTree <T>(T item, int k, RenderTreeBuilder builder)
        {
            //Console.WriteLine($"Open Region {k}");
            builder.OpenRegion(k++);

            bool   CaptureRef = false;
            string _value_id  = string.Empty;

            string _classID = string.Empty;

            if (item !.GetType().GetProperties().Any(x => x.Name == "CaptureRef"))
            {
                PropertyInfo pi_captureref = item.GetType().GetProperty("CaptureRef");
                if ((bool)pi_captureref.GetValue(item, null))
                {
                    if (item.GetType().GetProperties().Any(x => x.Name == "ID"))
                    {
                        PropertyInfo pi_id = item.GetType().GetProperty("ID");
                        _value_id = pi_id.GetValue(item, null).ToString();

                        CaptureRef = _value_id != null && !string.IsNullOrEmpty(_value_id.ToString());
                    }
                    if (item.GetType().GetProperties().Any(x => x.Name == "CssClass"))
                    {
                        PropertyInfo pi_id = item.GetType().GetProperty("CssClass");
                        _classID = pi_id.GetValue(item, null).ToString();
                    }
                }
            }



            object _value;
            string _attrName = string.Empty;

            bool IsAllowed = true;

            string tempName = FirstAndLastCharacterToLower(item.GetType().Name);

            //Console.WriteLine($"OpenElement {k}, {tempName}");
            builder.OpenElement(k++, tempName);



            CustomBasicList <PropertyInfo> properties = item.GetType().GetProperties().Where(x => !x.PropertyType.Name.Contains("CustomBasicList") && x.Name != "Content" && !x.PropertyType.Name.Contains("CaptureRef")).ToCustomBasicList();

            PropertyInfo property = item.GetType().GetProperties().Where(x => x.Name == "Content").SingleOrDefault();

            if (property != null)
            {
                properties.Add(property);
            }


            foreach (PropertyInfo pi in properties)
            {
                //list can't filter captureref??????
                if (pi.Name != "CaptureRef")
                {
                    IsAllowed = true;

                    _value = pi.GetValue(item, null);

                    if (pi.PropertyType == typeof(double))
                    {
                        if (double.IsNaN((double)_value))
                        {
                            IsAllowed = false;
                        }
                        else
                        {
                            _value = Math.Round((double)_value, 2);
                        }
                    }

                    //future:
                    //since only text obviously allows 0, then instead of setting the property, it will check to see if its text
                    //if text, then allow
                    //if not text, but shows 0, then not allowed.


                    if (IsAllowed)
                    {
                        IsAllowed = _value != null && !string.IsNullOrEmpty(_value.ToString());
                        if (IsAllowed && _value !.ToString() == "0" && Allow0 == false)
                        {
                            IsAllowed = false;
                        }
                        if (_value !.ToString() == "0" && Allow0 && item is Text == false)
                        {
                            IsAllowed = false; //try a different way.
                        }
                        //if (_value!.ToString() == "0" && Allow0 == true && item is Image)
                        //{
                        //    IsAllowed = false; //try this way.
                        //}
                        //if (_value!.ToString() == "0" && Allow0 == true && item is Path)
                        //{
                        //    IsAllowed = false;
                        //}
                        //if (Allow0 && _value!.ToString() == "0")
                        //{
                        //    IsAllowed = false; //for now
                        //}
                    }



                    if (IsAllowed)
                    {
                        _attrName = pi.Name;
                        if (_value is CustomEventClass custom)
                        {
                            if (custom.ActionClicked != null)
                            {
                                //if you don't have delegate set up, then ignore.
                                builder.AddAttribute(1, "onclick", EventCallback.Factory.Create(this, e => ActionClicked(custom)));
                            }
                            if (custom.StopPropagation)
                            {
                                builder.AddEventStopPropagationAttribute(2, "onclick", true);
                            }
                        }
                        else
                        {
                            if (_attrName.Equals("Content"))
                            {
                                //Console.WriteLine($"Adding Content 3, {_value!.ToString()}");
                                builder.AddContent(3, _value !.ToString());
                            }
                            else if (_attrName.Equals("CssClass"))
                            {
                                builder.AddAttribute(4, "class", _value !.ToString());
                            }
                            else
                            {
                                if (_attrName.Contains("_"))
                                {
                                    _attrName = _attrName.Replace("_", "-");
                                }

                                _attrName = FirstAndLastCharacterToLower(_attrName);

                                //Console.WriteLine($"4, { _attrName}, {_value!.ToString()}");
                                builder.AddAttribute(4, _attrName, _value !.ToString());
                            }
                        }
                    }
                }
            }


            PropertyInfo pi_Children = item.GetType().GetProperty("Children");

            if (pi_Children != null)
            {
                CustomBasicList <object>?children = pi_Children.GetValue(item) as CustomBasicList <object>;

                foreach (object others in children !)
                {
                    RenderSvgTree(others, k++, builder);;
                }
            }



            if (CaptureRef)
            {
                //Console.WriteLine("Builder Add Element Reference Capture 5");
                builder.AddElementReferenceCapture(5, (elementReference) =>
                {
                    ElementReferences.Add(_value_id !, elementReference);
                });
Exemplo n.º 29
0
        public void Cmd_Render <T>(T _Item, int k, RenderTreeBuilder builder, int Par_ID = 0)
        {
            builder.OpenRegion(k++);

            bool   CaptureRef = false;
            string _value_id  = string.Empty;

            if (_Item.GetType().GetProperties().Any(x => x.Name == "CaptureRef"))
            {
                PropertyInfo pi_captureref = _Item.GetType().GetProperty("CaptureRef");
                if ((bool)pi_captureref.GetValue(_Item, null))
                {
                    if (_Item.GetType().GetProperties().Any(x => x.Name == "id"))
                    {
                        PropertyInfo pi_id = _Item.GetType().GetProperty("id");
                        _value_id = pi_id.GetValue(_Item, null).ToString();

                        CaptureRef = _value_id != null && !string.IsNullOrEmpty(_value_id.ToString());
                    }
                }
            }



            object _value;
            string _attrName = string.Empty;

            bool IsAllowed = true;


            builder.OpenElement(k++, _Item.GetType().Name);



            foreach (PropertyInfo pi in _Item.GetType().GetProperties().Where(x => !x.PropertyType.Name.Contains("ICollection") && !x.PropertyType.Name.Contains("CaptureRef")))
            {
                //list can't filter captureref??????
                if (pi.Name != "CaptureRef")
                {
                    IsAllowed = true;

                    _value = pi.GetValue(_Item, null);

                    if (pi.PropertyType == typeof(double))
                    {
                        if (double.IsNaN((double)_value))
                        {
                            IsAllowed = false;
                        }
                        else
                        {
                            _value = Math.Round((double)_value, 2);
                        }
                    }

                    if (IsAllowed)
                    {
                        IsAllowed = _value != null && !string.IsNullOrEmpty(_value.ToString());
                    }


                    if (IsAllowed)
                    {
                        if (pi.Name == "stroke_linecap")
                        {
                            IsAllowed = (strokeLinecap)_value != strokeLinecap.none;
                        }
                    }


                    if (IsAllowed)
                    {
                        _attrName = pi.Name;

                        if (_attrName.Equals("onclick"))
                        {
                            if ((BoolOptionsEnum)_value == BoolOptionsEnum.Yes)
                            {
                                builder.AddAttribute(1, _attrName, EventCallback.Factory.Create(this, e => Cmd_Clicked(e, Par_ID)));
                            }
                        }
                        else if (_attrName.ToLower().Equals("stoppropagation"))
                        {
                            if ((BoolOptionsEnum)_value == BoolOptionsEnum.Yes)
                            {
                                builder.AddEventStopPropagationAttribute(2, "onclick", true);
                            }
                        }
                        else
                        {
                            if (_attrName.Equals("content"))
                            {
                                builder.AddContent(3, _value.ToString());
                            }
                            else
                            {
                                if (_attrName.Contains("_"))
                                {
                                    _attrName = _attrName.Replace("_", "-");
                                }

                                builder.AddAttribute(4, _attrName, _value.ToString());
                            }
                        }
                    }
                }
            }


            PropertyInfo pi_Children = _Item.GetType().GetProperty("Children");

            if (pi_Children != null)
            {
                List <object> children = pi_Children.GetValue(_Item) as List <object>;

                foreach (object item in children)
                {
                    Cmd_Render(item, k++, builder, Par_ID);;
                }
            }



            if (CaptureRef)
            {
                builder.AddElementReferenceCapture(5, (elementReference) =>
                {
                    Elementreferences_Dictionary.Add(_value_id, elementReference);
                });
            }

            builder.CloseElement();

            builder.CloseRegion();
        }
Exemplo n.º 30
0
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            int seq = 0;

            builder.OpenElement(seq++, "svg");
            builder.AddAttribute(seq++, "class", "canvas");
            builder.AddAttribute(seq++, "id", this.GetCanvasID());
            builder.AddAttribute(seq++, "tabindex", "0");

            builder.AddAttribute(seq++, "onwheel", EventCallback.Factory.Create(this, e =>
            {
                this.State.Mouse.Zoom -= (float)e.DeltaY * 0.001f;
                if (this.State.Mouse.Zoom < 0)
                {
                    this.State.Mouse.Zoom = 0.001f;
                }

                this.Translate();
                this.Zoom();
            }));

            builder.AddAttribute(seq++, "onkeydown", EventCallback.Factory.Create(this, e =>
            {
                this.State.Keyboard.KeyDown(e.Key);
            }));

            builder.AddAttribute(seq++, "onkeyup", EventCallback.Factory.Create(this, e =>
            {
                this.State.Keyboard.KeyUp(e.Key);
            }));



            builder.AddAttribute(seq++, "onmousedown", EventCallback.Factory.Create(this, (e) =>
            {
                this.OnDownCallback((float)e.ClientX, (float)e.ClientY, this.State.Keyboard.IsDown("Shift"));
            }));

            builder.AddAttribute(seq++, "ontouchstart", EventCallback.Factory.Create <TouchEventArgs>(this, (e) =>
            {
                this.OnDownCallback((float)e.Touches[0].ClientX, (float)e.Touches[0].ClientY, false);
            }));

            builder.AddEventStopPropagationAttribute(seq++, "ontouchstart", true);



            builder.AddAttribute(seq++, "onmousemove", EventCallback.Factory.Create <MouseEventArgs>(this, (e) =>
            {
                this.State.Mouse.OnMove(this.Box.ToCenterCoords(new Vector2f((float)e.ClientX, (float)e.ClientY)));
            }));

            builder.AddAttribute(seq++, "ontouchmove", EventCallback.Factory.Create <TouchEventArgs>(this, (e) =>
            {
                var pos = new Vector2f((float)e.Touches[0].ClientX, (float)e.Touches[0].ClientY);

                if (e.Touches.Length == 1)
                {
                    if (!this.State.Selector.Visible && this.State.Selected.Count == 0)
                    {
                        this.OnDownCallback((float)e.Touches[0].ClientX, (float)e.Touches[0].ClientY, true);
                    }

                    this.State.Mouse.OnMove(this.Box.ToCenterCoords(pos));
                }
                else if (e.Touches.Length > 1)
                {
                    var currentHypot = MathExtension.Hypot(e.Touches[0].PageX - e.Touches[1].PageX, e.Touches[0].PageY - e.Touches[1].PageY);

                    var val = currentHypot - this.State.Touch.LastPinchHypot;

                    this.State.Touch.LastPinchHypot = currentHypot;

                    if (currentHypot > 150.0f)
                    {
                        this.State.Mouse.Zoom += val < 0 ? -0.05f : 0.05f;
                        this.Zoom();
                        this.State.Mouse.OnFakeMove(this.Box.ToCenterCoords(pos));
                    }
                    else
                    {
                        this.State.Mouse.OnMove(this.Box.ToCenterCoords(pos));
                    }
                }
            }));



            builder.AddAttribute(seq++, "onmouseup", EventCallback.Factory.Create <MouseEventArgs>(this, (e) =>
            {
                this.OnUpLeaveCallback((float)e.ClientX, (float)e.ClientY);
            }));


            builder.AddAttribute(seq++, "ontouchend", EventCallback.Factory.Create(this, (_) =>
            {
                this.OnUpLeaveCallback(0, 0);
            }));



            builder.AddAttribute(seq++, "onmouseleave", EventCallback.Factory.Create(this, (_) =>
            {
                this.OnUpLeaveCallback(0, 0);
            }));

            builder.AddAttribute(seq++, "ontouchcancel", EventCallback.Factory.Create <TouchEventArgs>(this, (e) =>
            {
                this.OnUpLeaveCallback(0, 0);
            }));



            builder.OpenElement(seq++, "g");
            builder.AddAttribute(seq++, "class", "canvas-zoom");
            builder.AddAttribute(seq++, "id", this.GetZoomID());

            builder.OpenElement(seq++, "g");
            builder.AddAttribute(seq++, "class", "canvas-graphics");
            builder.AddAttribute(seq++, "id", this.GetTranslateID());


            foreach (var card in this.State.Storage.Cards)
            {
                //card.Render().Invoke(builder);
                builder.OpenComponent(seq++, card.GetComponentType());
                builder.AddAttribute(seq++, "Canvas", this);
                builder.AddAttribute(seq++, "Descriptor", card);
                builder.CloseComponent();
            }


            if (this.State.Selector != null)
            {
                builder.OpenComponent(seq++, this.State.Selector.GetComponentType());
                builder.AddAttribute(seq++, "Canvas", this);
                builder.AddAttribute(seq++, "Descriptor", this.State.Selector);
                builder.CloseComponent();
            }


            //Console.WriteLine("Re-rendering highlighter");
            if (this.State.Highlighter != null)
            {
                builder.OpenComponent(seq++, this.State.Highlighter.GetComponentType());
                builder.AddAttribute(seq++, "Canvas", this);
                builder.AddAttribute(seq++, "Descriptor", this.State.Highlighter);
                builder.CloseComponent();
            }



            builder.CloseElement();
            builder.CloseElement();
            builder.CloseElement();
        }