Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

completer: popup positioning is wrong for transformed editor #5688

Open
Totodore opened this issue Nov 29, 2024 · 2 comments
Open

completer: popup positioning is wrong for transformed editor #5688

Totodore opened this issue Nov 29, 2024 · 2 comments
Labels
bug needs-triage

Comments

@Totodore
Copy link

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:
image

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>

image

Possible Solution

No response

Additional Information/Context

No response

Ace Version / Browser / OS / Keyboard layout

1.36.5 / Chrome 131.0
@nightwing
Copy link
Member

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
Copy link
Author

Totodore commented Dec 2, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug needs-triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nightwing @Totodore