search

haxeui / haxeui-kha

The Kha backend of the HaxeUI framework -
http://haxeui.org
MIT License
45 stars 16 forks source link

Component does not change when window resizes on html5 #41

Closed XANOZOID closed 3 years ago

XANOZOID commented 4 years ago

If you have a component with width or height set to a percentage and you adjust the window's size, the top-most component does not reflect the changes. This works on the standard html5 target. Haven't been able to test krom.

Expected Behavior

The component extends to fit to the size of the window.

Current Behavior

Only the size of the window at the very start of the program is respected and then it never changes.

Possible Solution

I tried looking for any code dealing with resizing in the kha-backend, or events, and I couldn't find any traces.

Steps to Reproduce (for bugs)

<?xml version="1.0" encoding="utf-8"?>
<hbox id="main" width="100%" height="100%">
    <!-- <style source="../css/main.css" /> -->

    <style>
        #main {
            background-color: green;
        }
    </style>
</hbox>

Your Environment

XANOZOID commented 4 years ago

Also, I tried working around it using this snippet of code but it still didn't work. However, I could confirm that the canvas was being altered during resize and I can confirm that the SystemImpl get_width/get_height matched; something's certainly fishy.

static function setFullWindowCanvas():Void {
    #if kha_html5
    //make html5 canvas resizable
    document.documentElement.style.padding = "0";
    document.documentElement.style.margin = "0";
    document.body.style.padding = "0";
    document.body.style.margin = "0";
    var canvas:CanvasElement = cast Browser.document.getElementById("khanvas");
    canvas.style.display = "block";

    var resize = function() {
        canvas.width = Std.int(window.innerWidth * window.devicePixelRatio);
        canvas.height = Std.int(window.innerHeight * window.devicePixelRatio);
        canvas.style.width = document.documentElement.clientWidth + "px";
        canvas.style.height = document.documentElement.clientHeight + "px";
    }
    window.onresize = resize;
    resize();
    #end
}
ianharrigan commented 4 years ago

what does the .html look like that holds the kha khanvas?

XANOZOID commented 4 years ago

I tried viewing the live html, but electron target's debug console seems to be disabled on launch with kha's particular setup. And it uses non-browser supported javascript so I can't run it in regular chrome either.

Here's the HTML it's served with, though! Thank you :smile: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Editor</title>
    <style>
        html, body, canvas, div {
            margin:0;
            padding: 0;         
            width:100%;
            height:100%;
        }
        #khanvas {
            display:block;
            border:none;
            outline:none;
        }
    </style>
</head>
<body>
    <canvas id="khanvas" width="0" height="0" tabindex="-1"></canvas>
    <script src="kha.js"></script>
</body>
</html>

Anything else you'd to direct me towards?

maxfish commented 4 years ago

Another way I'm using to fix this issue is adding this code within the update() or the render() functions:

        if (_main.width != Screen.instance.width || _main.height != Screen.instance.height) {
            _main.resizeComponent(Screen.instance.width, Screen.instance.height);
            trace("Resize main component");
        }

_main is your top most component, the one you get from ComponentMacros.buildComponent(). This solution is not perfect, and I suspect it lags one frame behind the rest of the update, but it' s OK for me now

ianharrigan commented 4 years ago

Can we retest this and see if its still an issue (i just merged a PR that may have fixed it - assuming kha implements the function on html).

sh-dave commented 3 years ago

This seems to work fine nowadays and can be closed i think.