https://linen.dev logo
Join Discord
Powered by
# haxe-ui
  • b
    well, monaco wont be able to access the kha canvas... its a js lib... and has no concept of kha, or canvas
  • b
    its made up of a bunch of divs, etc
  • b
    if you wanted to have a code editor inside kha, you would have to write that yourself (like i had to for textfield in kha)... and its no small feat
  • u
    yeah; thats what I want to avoid 😛
  • b
    yeah, totally, it would be an insane amount of work
  • b
    i guess the best bet would be, as i mentioned, to have the monaco editor floating over the top of the kha application
  • b
    and then somehow syncing a fake haxeui components position with the position of the floating monaco editor
  • b
    a less than ideal approach i would say, and sure to be some gotchas... esp if you wanted animated transitions and, say, draggable dialogs... but best i think of off the top of my head
  • u
    yeah it would my best bet; I could try to do what you did with kodegarden though; would need to refactor the workflow, the issue is I want the editor to work in krom standalone(wont use monaco there would try using scintilla ) anyways; I got some thinking to do hehe. Thanks for the info will help in my work
  • b
    cool... im intrigued now, so will have a play a little later and see what it looks like to float monaco over kha and how it responds... if it works to a decent level i whack the source here
  • u
    lol cool. That would be neat 🙂
  • b
    @User - so it works
  • b
    just a test, and isnt perfect, but seems pretty doable
  • b
    pretty simple too (again, not complete of course):
  • b
    Copy code
    xml
<vbox style="padding: 5px;" width="300" height="300">
    <button id="button1" text="Button 1" width="100%" />
    <hbox width="100%" height="100%">
        <button id="button2" text="Button 2" width="50" height="100%" />
        <test-component id="test" width="100%" height="100%" htmlId="myTestComponent" />
        <button id="button3" text="Button 3" height="100%" />
    </hbox>    
    <button id="button4" text="Button 2" width="100%" />
    <hbox>
        <button text="Button 1 Bigger" onclick="button1.height += 20" />
        <button text="Button 2 Bigger" onclick="button2.width += 20" />
        <button text="Button 3 Bigger" onclick="button3.width += 20" />
        <button text="Button 4 Bigger" onclick="button4.height += 20" />
    </hbox>
</vbox>
  • b
    and test component is:
  • b
    Copy code
    haxe
class TestComponent extends Component {
    public var htmlId:String = null;
    
    private var _el:Element = null;
    public override function ready() {
        super.ready();
        _el = Browser.document.getElementById(htmlId);
        _el.style.display = null;
        Toolkit.callLater(function() { // something not quite right here, shouldnt need a 1 frame delay
            syncElementBounds();
        });
    }
    
    public override function onResized() {
        syncElementBounds();
    }
    
    public override function onMoved() {
        syncElementBounds();
    }

    public var offsetX:Float = 8; // location of the canvas on the html page
    public var offsetY:Float = 8;
    private function syncElementBounds() {
        if (_el == null) {
            trace("no element");
            return;
        }
        
        _el.style.left = (offsetX + screenLeft) + "px";
        _el.style.top = (offsetY + screenTop) + "px";
        _el.style.width = width + "px";
        _el.style.height = height + "px";
    }
}
  • b
    the html element could feasibly contain anything, including the monaco editor i would reckon
  • b
    for completeness, heres my kha html page (nothing fancy going on tbh):
  • b
    Copy code
    html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Test</title>
</head>
<body>
    <canvas id="khanvas" width="800" height="600" tabindex="-1" style="position:absolute;"></canvas>
    <div id="myTestComponent" style="background-color:#CCCCFF;position:absolute;display:none;user-select:none">
        This is a native html <div> element, the size and position is controlled from haxeui-kha
    </div>
    <script src="kha.js"></script>
    
</body>
</html>
  • u
    Great . Thanks for this, will try adding monaco in a simple example and will report back.
  • u
    is it normal that I get this: 
    /home/jsnadeau/foundsdk/haxeui-code-editor/haxe/ui/editors/code/monaco/MonacoCodeEditor.hx:6: characters 8-21 : Type not found : monaco.Editor
  • u
    Its probably related to how I use the CodeEditor class i.e. here : https://github.com/mundusnine/monaco-kha/blob/master/Sources/CodeComponent.hx#L9
  • u
    I imagine that I would need to do like I did with khafs i.e. add the extern ? : https://github.com/mundusnine/khafs/blob/master/Sources/kha/WasmFs.hx#L4
  • u
    tried adding https://github.com/ianharrigan/hx-monaco-editor but no cigar still 😛
  • u
    I get new errors: 
    /home/jsnadeau/foundsdk/haxeui-code-editor/haxe/ui/editors/code/monaco/MonacoCodeEditor.hx:92: characters 26-35 : Class<Monaco> has no field languages
  • b
    So i dont think you are going to be able to use haxeui-code-editor... thats a wrapper for haxeui, you cant use a wrapper in kha, you need to use the monaco editor directly, ie, you load outside of you app then, like my example, use haxeui to get bounds, and sync them with the editor
  • b
    forget haxeui for a moment, and think how you would need to use monaco (or something like it), using kha... you have the kha khanvas, and you want to float the editor over the top of said khanvas, then you would need to grab that html element and move it about (using html css) to where you wanted it. Same thing applies when you are using haxeui-kha (since you are just using kha), the difference is that you can create a "fake" component, that will be inside kha and therefore can get all the niceties of the layout engine, but that component is nothing, just a, say, big red box. However, you can use the bounds of that component to position and size the monaco editor that lives outside of your kha canvas application
  • b
    I could look into a fall back for haxeui-code-editor that will try and do that automatically, but im not sure when ill get around to it
  • u
    No need to look into. I will do it. I think I am just failling at web stuff(not my background and I kinda hate it ahah). I am tryin to understand actually how monaco is loaded and its unclear. I see the loader but still seems to not be loaded. I will have to knock my head against the screen thursday to find out. I will also search on the web how people use it out of the context of kha.
1...164165166...1687Latest