https://linen.dev logo
Join Discord
Powered by
# haxe-ui
  • b
    Copy code
    haxe
package custom;

import haxe.ui.containers.Box;
import js.Browser;
import js.html.TextAreaElement;

class CodeMirror extends Box {
    private var _textarea:TextAreaElement = null;
    private var _codemirror:js.codemirror.CodeMirror;
    
    private override function onReady() {
        super.onReady();
        initCodeMirror();
    }
    
    private function initCodeMirror() {
        if (_textarea == null) {
            _textarea = Browser.document.createTextAreaElement();
            this.element.appendChild(_textarea);
        }
        if (_codemirror == null) {
            _codemirror = js.codemirror.CodeMirror.fromTextArea(_textarea);
            _codemirror.setValue(this.text);
        }
    }
    
    public override function validateComponentLayout():Bool {
        var b = super.validateComponentLayout();
        if (this.width > 0 && this.height > 0 && _codemirror != null) {
            var usableSize = this.layout.usableSize;
            _codemirror.setSize(usableSize.width, usableSize.height);
        }
        return b;
    }
    
    private override function set_text(value:String):String {
        super.set_text(value);
        if (_codemirror != null) {
            _codemirror.setValue(value);
        }
        return value;
    }
}
  • b
    then i added this to my module.xml:
  • b
    Copy code
    xml
<?xml version="1.0" encoding="utf-8" ?>
<module>
    <components>
        <class package="custom" />
    </components>
</module>
  • b
    et viola:
  • b
    Copy code
    xml
<vbox>
    <style>
    .code-mirror {
        border: 1px solid red;
        padding: 5px;
    }
    </style>
    <code-mirror width="300" height="100" text="Something text" />
</vbox>
  • b
    there are some interesting things about code mirror though, it seems to always create a 300px height editor...
  • b
    it seems its styled that way and you cant seem to get rid of it, but im sure its just something im not doing... ill leave it as an exercise to the reader 😉
  • b
    actually, it needed an invalidate, two secs, just revising the custom component
  • c
    i did notice the short height yesterday. hadn't messed with it yet.
  • b
    its alright, fixed it... two secs
  • b
    Copy code
    haxe
package custom;

import haxe.ui.backend.html5.HtmlUtils;
import haxe.ui.containers.Box;
import js.Browser;
import js.html.TextAreaElement;

class CodeMirror extends Box {
    private var _textarea:TextAreaElement = null;
    private var _codemirror:js.codemirror.CodeMirror;
    
    private override function onReady() {
        super.onReady();
        initCodeMirror();
    }
    
    private function initCodeMirror() {
        if (_textarea == null) {
            _textarea = Browser.document.createTextAreaElement();
            this.element.appendChild(_textarea);
        }
        if (_codemirror == null) {
            _codemirror = js.codemirror.CodeMirror.fromTextArea(_textarea);
            if (this.text != null) {
                _codemirror.setValue(this.text);
            }
            _codemirror.setOption("lineWrapping", _wrap);
            invalidateComponent();
        }
    }
    
    public override function validateComponentLayout():Bool {
        var b = super.validateComponentLayout();
        if (this.width > 0 && this.height > 0 && _codemirror != null) {
            var usableSize = this.layout.usableSize;
            _codemirror.setSize(usableSize.width, usableSize.height);
        }
        return b;
    }
    
    private override function set_text(value:String):String {
        super.set_text(value);
        if (_codemirror != null) {
            _codemirror.setValue(value);
        }
        return value;
    }
    
    private var _wrap:Bool = true;
    public var wrap(get, set):Bool;
    private function get_wrap():Bool {
        return _wrap;
    }
    private function set_wrap(value:Bool):Bool {
        _wrap = value;
        if (_codemirror != null) {
            _codemirror.setOption("lineWrapping", _wrap);
        }
        return value;
    }
}
  • b
    and this is the .xml i used (just to make sure things we all OK):
  • b
    Copy code
    xml
<vbox style="padding: 20px;">
    <style>
    .code-mirror {
        border: 1px solid red;
        padding: 1px;
    }
    </style>
    <hbox style="padding: 5px;" width="600" height="400">
        <button text="Button" height="100%" onclick="this.width += 25" />
        <vbox width="100%" height="100%">
            <hbox width="100%">
                <button text="Button" verticalAlign="top" />
                <button text="Button" width="100%" onclick="this.height += 25" />
                <button text="Button" verticalAlign="bottom" />
            </hbox>
            <hbox width="100%" height="100%">
                <code-mirror id="ex1" width="50%" height="100%" text="..." />
                <code-mirror id="ex2" width="50%" height="100%" style="border:1px solid blue;" text="..." />
            </hbox>    
            <hbox width="100%">
                <button text="Button" verticalAlign="top" />
                <button text="Button" width="100%" onclick="this.height += 25" />
                <button text="Button" verticalAlign="bottom" />
            </hbox>
        </vbox>    
        <button text="Button" height="100%" onclick="this.width += 25" />
    </hbox>
    
    <checkbox text="Wrap" selected="true" onchange="ex1.wrap = ex2.wrap = this.selected" />
</vbox>
  • c
    thank you very much.
  • c
    this helps alot.... this one may be a good one to include as an example for haxeui as well. For anyone else it may help out when it comes to custom components.
  • b
    yeah, true
  • b
    its basically exactly the same as that canvas one i knocked together btw, though i appreciated that with a real library (rather than the silly fake one i put together) its more obvious
  • c
    yeah, it does help having a real/functional library.
  • c
    it for some reason made things make more sense i guess when looking at it.
  • c
    just realised everytime i did a build with lime it would reset my index.html...... that explains a few heachaches..... lmao.
  • c
    easy fix though.... whew.
  • c
    Getting my sleep schedule back to normal just doesnt seem to want to happen.
  • c
    Just experienced something new for me this morning. I awoke to some horrible pain in my left side. Turns out i have experience my first dealing with kidney stones. That is pain on a whole new level for me lol.
  • b
    I've had several. Runs in family. My sympathies.
  • b
    I'm adding a custom style to a button, and the default style works but not the 
    :hover
  • b
    It seems like it's conflicting with the default 
    button
    style because if I 
    removeClass("button")
    then it works as intended
  • b
    Flixel backend
  • u
    it seems you can't extend a Label...is there a reason ?
  • u
    (latest git version, haxe 4.1.1, osx, hxwidget)
  • u
    if I simply extended it with a new(){ super() }, no text on screen 😦
1...239240241...1687Latest