FX

package photoflockr;

import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.Group;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.scene.transform.Transform;
import javafx.scene.shape.Rectangle;

/**
 * This class is used to display a tag list.
 */
public class TagList extends CustomNode {
    public var textOpacity: Number;
    public var height: Number;
    public var width: Number;
    public var tags: String[];
    public var clickAction: function(tag: String): Void;

    var color = bind Color.rgb(150, 150, 150, textOpacity);
    var selectionColor = Color.WHITE;
    var font = Font { size: 14 };
    var listGroup: Group;
    var maxWidth: Number = 150;
    var scrollY: Number = 0;

    override public function create(): Node {
        Group {
            var margin = 5;
            var spacing = 6;
            clip: Rectangle {
                height: height
                width: width
            }
            content: [
                // The rectangle manages scrolling.
                Rectangle {
                    var h = bind sizeof tags * (font.size + spacing);
                    var dif = bind h - height
                    height: bind h
                    width: bind width;
                    fill: Color.color(0, 0, 0, 0);
                    smooth: false
                    onMouseWheelMoved: function(e) {
                        if ((scrollY >= 0 and e.wheelRotation < 0) or
                            (scrollY + dif <= 0 and e.wheelRotation > 0))
                        {
                            return;
                        }
                        if (scrollY - e.wheelRotation*5 > 0) {
                            scrollY = 0;
                        } else if (scrollY + dif - e.wheelRotation*5 < 0) {
                            scrollY = -dif;
                        } else {
                            scrollY -= e.wheelRotation*5;
                        }
                    }
                },
                // A list of tags.
                listGroup = Group {
                    translateY: bind scrollY
                    content: bind for (tag in tags)
                        Group {
                            translateY: indexof tag * (font.size + spacing)
                            var r: Rectangle;
                            content: [
                                // The rectangle manages tag selection.
                                r = Rectangle {
                                    height: 20
                                    width: 150
                                    smooth: false
                                    fill: Color.color(0, 0, 0, 0)
                                    onMouseClicked: function(e) {
                                        clickAction(tag);
                                    }
                                },
                                // A single tag.
                                Text {
                                    fill: bind if (r.hover) selectionColor else color
                                    translateX: 5
                                    translateY: 12
                                    content: tag
                                    font: font
                                }
                            ]
                        }
                }
            ]
        }
    }
}