trying to create a bounding box by click and drag in a web component

Issue

I am dealing with event handlers, and getting the start and end position of a mouse.

That way i can create a selection box.

I start by on mousedown, i store the current position: new Point(event.target.clientLeft, event.target.clientTop); which seems to work for that location when i set the selection div accordingly.

The next step is where everything seems wrong. While in the mousemove event, I am trying to get the coordinates of the mouse do i can use the difference to define the Height and Width of the bounding box. It seems that everything is off by the coordinates of the web component i had created.

How should I go about this?

I have been dabbling with the event more, trying to get the position of the mouse, but i think what happens is that my start point is in reference to the webcomponent I created, and not the absolute position.

Has anyone else figured out how to do this correctly, because I have been setting things as absolute, but not correctly rendering.

As a side note, if i could subtract the absolute position of the webcomponent this is in, i think it should render the height and width correctly.

Solution

since a PolymerElement will use HtmlElements, you will have access to a full suite of functions built into the application. For example:

var top = selectedHtml.getBoundingClientRect().top - getBoundingClientRect().top + selectedHtml.clientHeight;
var left = selectedHtml.getBoundingClientRect().left - getBoundingClientRect().left + selectedHtml.clientWidth;
Point coord = new Point(left,top);

then you can just determine the distance from that point to get your width/height:

var top = selectedHtml.getBoundingClientRect().top - getBoundingClientRect().top + selectedHtml.clientHeight;
var left = selectedHtml.getBoundingClientRect().left - getBoundingClientRect().left + selectedHtml.clientWidth;
var h = top - coord.y;
var w = left - coord.x;

and then apply it to your Div.

_item.style.top = top;
_item.style.left = left;
_item.style.width = w;
_item.style.height = h;

Answered By – Fallenreaper

Answer Checked By – Marilyn (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *