completer: popup positioning is wrong for transformed editor

Totodore commented 3 days ago

Describe the bug

I have an editor that is css-transformed (scaling and translation). The editor is working well thanks to the hasCssTransforms config property. However the completer popup is completely mis-positionned:

Expected Behavior

I would expect the popup to be positioned according to the transformed editor no matter its scaling/translation.

Current Behavior

The popup is positioning according to absolute screen coordinates.

Reproduction Steps

index.html

<!doctype html>
<html lang="en">
    <head>
        <title>ACE in Action</title>
        <style type="text/css" media="screen">
            #editor {
                width: 1400px;
                height: 1400px;
                position: absolute;
                transform: scale(0.4) translate(200px, 200px);
                left: 0, top: 0;
            }
            .wrapper {
                background-color: red;
                width: 50000px;
                height: 50000px;
                position: relative;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div id="editor">
                function foo(items) { var x = "All this is syntax highlighted";
                return x; }
            </div>
        </div>

        <script
            src="frontend/node_modules/ace-builds/src/ace.js"
            type="text/javascript"
            charset="utf-8"
        ></script>
        <script
            src="frontend/node_modules/ace-builds/src/ext-language_tools.js"
            type="text/javascript"
            charset="utf-8"
        ></script>
        <script>
            var editor = ace.edit("editor", {
                mode: "ace/mode/javascript",
                theme: "ace/theme/merbivore",
                fontSize: 20,
                hasCssTransforms: true,
                enableBasicAutocompletion: true,
                enableLiveAutocompletion: true,
            });
            editor.setTheme("ace/theme/monokai");
            editor.session.setMode("ace/mode/javascript");
        </script>
    </body>
</html>

Possible Solution

No response

Additional Information/Context

No response

Ace Version / Browser / OS / Keyboard layout

1.36.5 / Chrome 131.0

nightwing commented 23 hours ago

Would it be enough to simply show the popup near the cursor, or should we try to apply the transform from editor to the popup?

Totodore commented 22 hours ago

I think the popup should be transformed because if it is only positionned according to the mouse the scaling is not respected. I think that currently it's how it works and with only translation it is OK. But with scaling, it messes with the translation and it ends up being shifted.

ajaxorg / ace