Rubberband of HtmlComponents not set correctly

[Lukas Trachsel]

Hi,

I have encountered the problem, that the rubberband of HTMLComponents are not set correctly. 

When the component has a size of 35 x 10 px, than the rubberband is shifted to the top by ~50%.

With a size of 35 x 20px it looks much better, but still not perfect. 

For each component, regardless of the size, the rubberband is a bit shifted. 

When I drag the component to another position it sometimes match perfectly. But this should always be the case regardless of the position of the component.

I would be glad if you could check if there is any problem while calculating the the position of the rubberband. The used HTMLComponents are just images with a fixed size. Nothing complicated.

You can find a working example of the problem in the attachments.

Regards,
Lukas

Attachment: SfDiagramComponentRubberband_d6797857.zip

[Suganthi Karuppannan]

We are able to reproduce the reported issue with an image HTML shape, but when we tried the same with a button instead of an image, the issue was not reproduced. For further analysis, we tried to render the same-sized image inside a div element, but the image rendered outside of the div element. Please refer to the screenshot for your reference.

In order to fix this problem, we changed a sample to measure the image location using a JavaScript interop call and apply the value to the image element's transform property. Please refer to the code snippet and modified sample for your reference.

Code Snippet

HtmlComponent.razor

 

<img src="@Url" @ref="@imageElement" style="transform: @transform"/>

 

@code{

private ElementReference imageElement;

public string transform = "";
protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        if (firstRender && string.IsNullOrEmpty(transform))

        {

            transform = await jsRuntime.InvokeAsync<string>(

                "getTranform", imageElement);

            StateHasChanged();

        }

    }

}

 

interop.js
window.getTranform = function (imageElement) {

    if (imageElement) {

        var measureElement = document.createElement('div');

        measureElement.id = "measureImageElement";

        measureElement.setAttribute("style", "visibility:visible; height: 0px ; width: 0px; overflow: hidden;font-size: 12px;")

        var cloneImageElement = imageElement.cloneNode(true);

        cloneImageElement.id += "copy";

        measureElement.appendChild(cloneImageElement);

        document.body.appendChild(measureElement);

        var imageBounds = cloneImageElement.getBoundingClientRect();

        var measureElementBounds = measureElement.getBoundingClientRect();

        var transform = "translate(" + (measureElementBounds.left - imageBounds.left) + "px," + (measureElementBounds.top - imageBounds.top) + "px);";

        document.body.removeChild(measureElement);

        return transform;

    }

};

Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: SfDiagramComponentRubberbandModified_b4827b22.zip

[Lukas Trachsel]

Hi Suganthi,
thank you for the quick response. I tested it, but the behaviour gets worse. Now the rubberband is shifted downwards for all HTMLComponents:

Furthermore the problem with the minimal offset of the rubberband depending on the position of the HTMLComponent still exists.



I would be glad if you could check this again.
Note: The screenshots show the behaviour of the working example you gave me. I have not changed anything in your example.
Browser details: Chrome Version 107.0.5304.88 (64-Bit)

Regards,
Lukas

[Sumathi Uthayakumar]

Lukas,

We have opened a ticket under your account. Please follow that ticket for further updates.

[Scott Peal]

I had a similar issue using a textarea control inside the rubber band. I had to change the CSS of the textarea to use 100% of the width/height, then I was able to change the textarea size using the rubber band. 

[Sumathi Uthayakumar]

Hi Scott,

We have prepared a simple sample and tried to reproduce the reported issue at our end. We had no selector-related issues at our end while select the node using rubber band. We have shared the sample what we tried at our end also shared video for your reference.

If we have misunderstood your needs, kindly provide us with further information

Regards,

Sumathi U.

Attachment: Sample_and_Video_b3c05815.zip