FX

package effectsplayground.control;

import javafx.animation.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;

/**
 * @author campbell
 */

public class DetachButton extends CustomNode {
    def size = 12;
    var color = Color.rgb(153, 153, 153);

    def fade = Timeline {
        keyFrames: [
            at (0s) {
                color => Color.rgb(153, 153, 153);
            },
            at (0.2s) {
                color => Color.WHITE;
            }
        ]
    }

    override protected function create() : Node {
        Group {
            var g:Group;
            cursor: Cursor.HAND
            cache: true
            content: [
                Rectangle {
                    x: bind g.layoutBounds.minX
                    y: bind g.layoutBounds.minY
                    width: bind g.layoutBounds.width
                    height: bind g.layoutBounds.height
                    fill: Color.TRANSPARENT
                },
                g = Group {
                    content: [
                        Rectangle {
                            x: 0
                            y: 5
                            width: 7
                            height: 4
                            fill: null
                            stroke: bind color
                        },
                        Rectangle {
                            x: 4
                            y: 3
                            width: 1
                            height: 2
                            fill: bind color
                        },
                        Rectangle {
                            x: 5
                            y: 2
                            width: 4
                            height: 1
                            fill: bind color
                        },
                        Polygon {
                            smooth: false
                            points: [9, 0, 9, 5, 12, 2]
                            fill: bind color
                        },
                    ]
                }
            ]
            onMouseEntered: function(e) {
                fade.rate = 1;
                fade.play();
            }
            onMouseExited: function(e) {
                fade.rate = -1;
                fade.play();
            }
        }
    }
}

function run() {
javafx.stage.Stage {
    width: 300
    height: 100
    scene: Scene {
        fill: Color.BLACK
        content: [
            DetachButton {translateX: 20 translateY: 20}
        ]
    }
}
}