https://linen.dev logo
Powered by
# haxe-ui
  • b
    no idea
  • b
    O is a good candidate
  • b
    i dont see how that would help with a toolbar
  • b
    oh i have a font the makes the O a complete circle
  • b
    ill do something like that: have 16 
    O
    in a row:
    Copy code
    OOOOOOOOOOOOOOOO
    set 
    width
    to 
    81
    since the letter 
    O
    is 
    40 * 40
    and enable wordWrap:
    Copy code
    OO
OO
OO
OO
OO
OO
OO
OO
  • b
    then i can place the objects on top of the `O`s
  • b
    with 
    getCharBoundaries
  • b
    i have NO idea what you are trying to do, but, honestly, none of that makes any sense to me
  • b
    not too much code too:
    Copy code
    haxe
var tf = new TextField();
var icon = new Button();
tf.text = "OOOOOOOOOOOOOOOO";
tf.width = 81;
tf.wordWrap = true;
tf.multiline = true;
addChild(tf);

for (i in 0...tf.text.length) {
  var rect = tf.getCharBoundaries(i);
  rect.x += tf.x;
  rect.y += tf.y
  icon.x = rect.x;
  icon.y = rect.y;
}
  • b
    the textField will look like that:
    Copy code
    OO
OO
OO
OO
OO
OO
OO
OO
  • b
    and everywhere you see an 
    O
    a button will be placed
  • b
    ok?
  • b
    that will achive the look (i think)
  • b
    i think there are easier ways, but i defo dont understand what you are trying to do (ie, the wordwrap)
  • b
    wordWrap automaticly escapes the letters to a new line
  • b
    thus making they're 
    y
    value higher
  • b
    i know what word wrap is, i dont understand how that has anything to do with creating a tool window
  • b
    the letters of the textfield will have the same layout as the toolbox and already have all of the positions handled
  • b
    nvm doing 
    spacing: -1
    does it
  • b
    Copy code
    xml
<vbox style="padding: 5px;">
    <vbox style="spacing: -1">
        <button-bar selectedIndex="0">
            <button text="Button A1" />
            <button text="Button A2" />
            <button text="Button A3" />
        </button-bar>
        <button-bar selectedIndex="1">
            <button text="Button B1" />
            <button text="Button B2" />
            <button text="Button B3" />
        </button-bar>
        <button-bar selectedIndex="2">
            <button text="Button C1" />
            <button text="Button C2" />
            <button text="Button C3" />
        </button-bar>
    </vbox>
</vbox>
  • b
    thats not what you want though, is it? Do you want multiple selections? Or just one?
  • b
    just one
  • b
    ... ... ... i feel like toggle buttons need a "group" property
  • b
    that would fix this
  • b
    or a layout property for button-bar, either work and both make sense
  • b
    Copy code
    xml
<vbox style="padding: 5px;">
    <style>
        .toolbutton {
            border: none;
            background-color: $normal-background-color-end;
            border-radius: 0;
            padding: 5px 5px;
        }

        .toolbutton:down {
            background-color: $accent-color;
        }
    </style>
    <grid columns="2" style="border: 1px solid $normal-border-color;spacing:0;padding:1px;">
        <button id="button1" icon="haxeui-core/styles/default/haxeui_tiny.png" toggle="true" styleName="toolbutton" />
        <button id="button2" icon="haxeui-core/styles/default/haxeui_tiny.png" toggle="true" styleName="toolbutton" />

        <button id="button3" icon="haxeui-core/styles/default/haxeui_tiny.png" toggle="true" styleName="toolbutton" />
        <button id="button4" icon="haxeui-core/styles/default/haxeui_tiny.png" toggle="true" styleName="toolbutton" />

        <button id="button5" icon="haxeui-core/styles/default/haxeui_tiny.png" toggle="true" styleName="toolbutton" />
        <button id="button6" icon="haxeui-core/styles/default/haxeui_tiny.png" toggle="true" styleName="toolbutton" />

        <button id="button7" icon="haxeui-core/styles/default/haxeui_tiny.png" toggle="true" styleName="toolbutton" />
        <button id="button8" icon="haxeui-core/styles/default/haxeui_tiny.png" toggle="true" styleName="toolbutton" />

        <button id="button9" icon="haxeui-core/styles/default/haxeui_tiny.png" toggle="true" styleName="toolbutton" />
        <button id="button10" icon="haxeui-core/styles/default/haxeui_tiny.png" toggle="true" styleName="toolbutton" />
    </grid>
</vbox>
  • b
    Copy code
    haxe
@:build(haxe.ui.ComponentBuilder.build("assets/main-view.xml"))
class MainView extends VBox {
    private var _currentButton:Button = null;
    
    public function new() {
        super();
    }
    
    @:bind(button1, MouseEvent.CLICK)
    @:bind(button2, MouseEvent.CLICK)
    @:bind(button3, MouseEvent.CLICK)
    @:bind(button4, MouseEvent.CLICK)
    @:bind(button5, MouseEvent.CLICK)
    @:bind(button6, MouseEvent.CLICK)
    @:bind(button7, MouseEvent.CLICK)
    @:bind(button8, MouseEvent.CLICK)
    @:bind(button9, MouseEvent.CLICK)
    @:bind(button10, MouseEvent.CLICK)
    private function onToolChange(e:MouseEvent) {
        if (_currentButton != null) {
            _currentButton.selected = false;
        }
        
        _currentButton = cast e.target;
        _currentButton.selected = true;
    }
}
  • b
    that list of `@:bind`s is especially ugly (which a group property would remove)
  • b
    Thanks! Exactly what I was looking for :)
  • b
    send help
1...970971972...1687Latest