Dragging Custom Node in JavaFX

Question

I cannot get it working although I am very close to an acceptable solution. I can drag the Dock if it is only a rectangle. But if I add a node (e.g. an image) to this dock I am not able to get a working solution.

Here is my code:

public class Dock extends CustomNode {

    // initialize this with an 64x64 image of your choice
    // via ImageView { image: Image {..}}
    public var content: Node[];
    public var width = 64;
    public var height = 64;
    public var xOffset: Number = 0;
    public var yOffset: Number = 0;
    var imgX: Number = 0;
    var imgY: Number = 0;
    var distX: Number;
    var distY: Number;
    public var rasterX = function (n: Number): Number {
                var MAX = 4 * 64;
                if (n < 0) {
                    return 0
                } else if (n > MAX) {
                    return MAX
                } else
                    return n
            }
    public var rasterY = rasterX;

    override protected function create(): Node {
        Group {
            // if we place the translate here then the whole dock will flicker
            //translateX: bind imgX;
            //translateY: bind imgY;
            content: [
                Rectangle {
                    // ... and here 'content' logically won't be dragged
                    translateX: bind imgX;
                    translateY: bind imgY;
                    height: bind height
                    width: bind width
                    fill: Color.LIGHTGRAY
                    strokeWidth: 4
                    stroke: Color.BLACK
                }, content]

            onMousePressed: function (e: MouseEvent): Void {
                    xOffset = e.x;
                    yOffset = e.y;

                    // Calculate the distance of the mouse point from the image
                    // top-left corner which will always come out as positive value
                    distX = e.x - imgX;
                    distY = e.y - imgY;                    
            }
            onMouseDragged: function (e: MouseEvent): Void {
                    // Find out the new image postion by subtracting the distance
                    // part from the mouse point.
                    imgX = rasterX(e.x - distX);
                    imgY = rasterY(e.y - distY);                    
            }
        }
    }

I tried blocksMouse:true on different nodes, tried it with mouseReleased etc but I coudn't get properly working solution. Do you have any pointers/tips on how this it done correctly?

Answer 1

Finally sorted it out from this example, but you don't need to follow the tutorial (I got an exception!?) - simply download the sources or use:

public class Dock extends CustomNode {

public var content: Node[];
public var width = 64;
public var height = 64;
public var xOffset: Number = 0;
public var yOffset: Number = 0;    
public var rasterX = function (n: Number): Number {
            // the following code is for the 'grid' which can be avoided of course
            var n2 = n - n mod 64;
            var MAX = 4 * 64;
            if (n2 < 0) {
                return 0
            } else if (n2 > MAX) {
                return MAX
            } else
                return n2
        }
public var rasterY = rasterX;    

override protected function create(): Node {
    var node: Group;
    node = Group {
        content: [
            Rectangle {
                height: bind height
                width: bind width
                arcHeight: 10
                arcWidth: 10
                fill: Color.LIGHTGRAY
                strokeWidth: 4
                stroke: Color.BLACK
                effect: DropShadow {
                    offsetX: 5
                    offsetY: 5
                    color: Color.DARKGRAY
                    radius: 10
                }
            }, content]
        onMousePressed: function (e: MouseEvent): Void {
            xOffset = e.sceneX - node.translateX;
            yOffset = e.sceneY - node.translateY;
        }
        onMouseDragged: function (e: MouseEvent): Void {
            node.translateX = rasterX(e.sceneX - yOffset);
            node.translateY = rasterY(e.sceneY - yOffset);
        }
    }
}
}