Provide getRect() as Utility Method

[jadiagaurang]

Environments

• Framework name: Vanilla JS
• Framework version: N/A
• Moveable Component version: 0.51.1
• Testable Address(optional): N/A

Description

Hi @daybrush

I have built and implemented a custom GroupManager to group/ungroup Targets! I want to create a Border around Grouped Elements so it helps visualize groups during design.

To create a Border around grouped elements, I have created a DIV with position: absolute and applied width, height, and transform: translate(x, y) rotate(d) properties from the values derived from MoveableRef.getRect() function. It works for a single group. However, I have a feature where a User can select multiple groups to drag, resize, and rotate. On that event MoveableRef.getRect() function gives values for the entire selected Rectingle.

So, I would like getRect() as a Utility method that accepts an array of targets and returns all the position values for those supplied targets.

I tried to build it myself, but I need help with rotation. When I rotate a Group the function doesn't calculate width, height, x, and y.

getRect: function (targets) {
    var me = this;

    var arrayEls = [];
    targets.forEach(function (target) {
        var style = target.style;
        var x = 0;
        var y = 0;
        if (!me.isBlank(style.transform)) {
            var parsedTransform = me.parseComplexStyleProperty(style.transform);

            x = $.trim(parsedTransform["translate"][0].split(',')[0]);
            y = $.trim(parsedTransform["translate"][0].split(',')[1]);
        }
        arrayEls.push({
            "height": style.height.ToPixelNum(),
            "width": style.width.ToPixelNum(),
            "x": x.ToPixelNum(),
            "y": y.ToPixelNum()
        });
    });

    let minX = Infinity;
    let minY = Infinity;
    let maxX = -Infinity;
    let maxY = -Infinity;

    // Iterate over each element to find the minimum and maximum coordinates
    arrayEls.forEach(function (element) {
        minX = Math.min(minX, element.x);
        minY = Math.min(minY, element.y);
        maxX = Math.max(maxX, element.x + element.width);
        maxY = Math.max(maxY, element.y + element.height);
    });

    let width = maxX - minX;
    let height = maxY - minY;

    return {
        width: width,
        height: height,
        left: minX,
        top: minY,
        //right: maxX,
        //bottom: maxY,
    };
}

Here is a video to help you visualize my current implementation.

https://github.com/daybrush/moveable/assets/430637/33212a24-ced9-460b-91c6-d8e04f82b767

I appreciate any help you can give me.

[jadiagaurang]

@daybrush Thanks for categorizing this request as a question.

I must create borders around given targets to show users how those elements are grouped. It helps users visualize and make good design sense.

I considered saving Rect data for grouped elements with x, y, width, height, and rotation to create an absolute position DIV to show borders.

Could you help me flush out the ideas and provide code samples to achieve that?

[daybrush]

@jadiagaurang

https://daybrush.com/moveable/release/latest/doc/Moveable.html#getRect

moveable also has a .getRect method. Have you tried using it?

pos1, pos2, pos3, pos4 (4 points each)

width, height (offsetWidth, offsetHeight)

You can see left, top, rotation, etc.

[jadiagaurang]

@daybrush I am aware of the getRect() Method and use that as needed.

But, I am trying to create Absolute Positioned borders around grouped Elements to have better UX.

I am not able to position the Border Element when Elements are Rotated. Check out the video.

I have two buttons and would like to rotate them to 90 degrees and group them!

I am updating the following CSS Prop for the border DIV.

var varGroupRect = objMoveableRef.getRect();
var elGroupStyle = `height: ${varGroupRect.height}px; width:${varGroupRect.width}px; transform: translate(${varGroupRect.left}px, ${varGroupRect.top}px) rotate(${varGroupRect.rotation}deg);`;

Can you help me with this issue? Thanks in advance!

https://github.com/daybrush/moveable/assets/430637/5261e446-8a65-4adc-8dc0-3d81def4da25