https://linen.dev logo
Join Discord
Powered by
# haxe-ui
  • b
    you might be able to get away with hiding the group header via css... not sure how it will look though
  • b
    actually, it looks alright: http://haxeui.org/builder/?89d085fe
  • b
    ... css-like dsl was such a good idea 🙂 You can do "unsupported" things with ease 🥳
  • b
    they are new... very wip at the moment, but i like how they are coming along... you can use 
    validator(s)
    attributes in interactive components 
    validator="email"
    for shorthand or use 
    <validator>
    under the component for long form (which will be useful for custom configurations - which isnt implemented yet)
  • b
    oh, and validators is a new section in modules.xml, heres the one from haxeui-core (but ofc you can add your own in your modules):
  • b
    Copy code
    xml
    <validators>
        <validator id="required" class="haxe.ui.validators.RequiredValidator" />
        <validator id="pattern" class="haxe.ui.validators.PatternValidator" />
        <validator id="email" class="haxe.ui.validators.EmailValidator" />
    </validators>
  • r
    Beautiful! Thank you!!
  • b
    btw, that almost certainly isnt going to work for native... not sure what your backend is
  • r
    Heaps is my only target for this one, so that should be okay
  • b
    cool
  • b
    Copy code
    xml
    <dropdown id="dd" text="" width="200" validators="required">
        <validator type="pattern" pattern="(?!Item 4)Item.*" />
        <data>
            <item text="Item 1" />
            <item text="Item 2" />
            <item text="ianharrigan@hotmail.com" />
            <item text="Item 4" />
            <item text="Item 5" />
        </data>
    </dropdown>
  • a
    oh hey, i found another bug 😄
  • a
    scroll wheel triggers on all of the scrollable containers
  • b
    guess ceramic is sending an overall "mouse wheel" event... you could always just check bounds and send it to only the one where the mouse currently is (if you are tracking mouse pos)
  • b
    something like:
    Copy code
    haxe
if (!cast(this, Component).hitTest(currentMouseX, currentMouseY)) {
    return;
}
// dispatch event
  • b
    you can also set up custom validators in your module.xml with default properties (this i think ill end up using alot):
    Copy code
    xml

<validators>
    <validator id="myEmail" class="haxe.ui.validators.PatternValidator" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" applyValid="false" />
</validators>
  • a
    validators are cool
  • a
    is there a default "effect" setup?
  • b
    well, it just applies "valid" or "invalid" css style names (though i think im going to change that to "valid-data" and "invalid-data")
  • b
    but each validator can technically do anything, the RequiredValidator applies "required" css stylenames
  • b
    but now its all configurable i can just expose different properties, like "invalidStyleName" etc
  • a
    the xml is convenient
  • a
    good for quick prototyping
  • b
    yeah, the xml is kinda essential for me, since i dont want to mess around with code all the time, but i also want to use the short form (
    validator="email"
    ), but then, for me, i dont want the box to go "green" when its right, i just want the red... so can just override the "email" validator in my module.xml and viola, all sorted
  • b
    ie:
    Copy code
    xml
<validators>
    <validator id="email" class="haxe.ui.validators.EmailValidator" applyValid="false" />
</validators>
  • a
    @billowy-waiter-28954 so, this looks like the next big issue, my current clip rect code seems to mostly work
  • a
    except in some instances
  • a
    I think it might be something to do with hierarchy of visuals but i'm not sure how to handle this
  • a
    Copy code
    hx
    override function handleClipRect(value:Rectangle):Void {
        if (value == null) {
            this.clipQuad = null;
        } else {
            if (this.clipQuad == null) {
                this.clipQuad = new Quad();
                this.clipQuad.visible = true;
                if (this.parentComponent != null) {
                    this.parentComponent.visual.add(clipQuad);
                } else {
                    this.visual.add(clipQuad);
                }
            }

            // this.clipQuad.x = value.left + visual.x - parentComponent.visual.x;
            // this.clipQuad.y = value.top;
            this.x = -value.left;
            this.y = -value.top;
            this.clipQuad.x = left;
            this.clipQuad.y = top;
            this.clipQuad.width = value.width;
            this.clipQuad.height = value.height;
            // trace('x: $x | y: $y | cx: $clipX | cy: $clipY |w: ${value.width} |h:${value.height}');
        }
    }
  • a
    that's what i'm doing currently
1...145514561457...1687Latest