JavaFX "wonders"

[Jiri Goddard]

Hello guys,

I'm trying to write a component that will fall apart after you click on it (I think the use case is clear ). Of course, it doesn't work properly. Who can help me?

FallIntoPieces.fx

package fallintopieces;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.input.MouseEvent;
import javafx.scene.shape.Shape;

var s1: Shatter = Shatter {
    coefficient: 10
    rotation: false
    node: Rectangle {
        x: 100, y: 100
        width: 50, height: 50
        fill: Color.BLUE
    }

}

var s2: Shatter = Shatter {
    coefficient: 15
    node: Circle {
        centerX: 350, centerY: 200
        radius: 100
        fill: Color.BLACK
    }
}

var r: Shape;
r.onMouseClicked = function(m: MouseEvent): Void {} ; //just a little test - compiles ok

Stage {
    title: "Fall Into Pieces"
    scene: Scene {
        width: 512
        height: 512
        content: [s1, s2]
    }
}

Shatter.fx

package fallintopieces;

import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.Group;
import javafx.scene.input.MouseEvent;
import javafx.util.Math;
import javafx.scene.shape.Arc;
import javafx.scene.paint.Color;
import javafx.scene.shape.ArcType;
import javafx.scene.shape.ShapeIntersect;
import javafx.scene.shape.Shape;
import javafx.animation.transition.TranslateTransition;
import javafx.scene.shape.Rectangle;
import javafx.animation.transition.FadeTransition;
import javafx.animation.transition.RotateTransition;
import javafx.animation.Interpolator;

public class Shatter extends CustomNode {

    public var node: Shape = Rectangle {
        x: 206, y: 206
        width: 100, height: 100
        fill: Color.RED
    };
    
    public var strength: Integer = 3;
    public var coefficient = 6;
    public var fade: Boolean = true;
    public var rotation: Boolean = true;
    public var duration: Duration = 3s;
    public var fadeByValue: Integer = -1;
    public var fadeInterpolator: Interpolator = Interpolator.EASEOUT;
    public var rotateByAngle: Integer = 360;
    public var rotateInterpolator: Interpolator = Interpolator.EASEOUT;
    var angle: Integer = 360 / strength;
    def startAngle: Integer = Math.random() * 100 as Integer;

    function vector(mouseCoord: Integer, pieceCoord: Integer): Integer {
        if ((pieceCoord - mouseCoord) < 0) {
            return (pieceCoord - mouseCoord) * coefficient;
        } else if ((pieceCoord - mouseCoord) == 0) {
            return pieceCoord;
        } else {
            return (pieceCoord - mouseCoord) * coefficient;
        }
    }

    override protected function create () : Node {
        var gtSide = Math.max(node.boundsInLocal.width, node.boundsInLocal.height);
        var radius = gtSide * Math.sqrt(2); //no artefact if i use / instead of *
        var slices: Node[];
        var pieces: Shape[];
        
        /*var group: Group = Group {
            content: bind [slices, node, pieces]*/
            node.onMouseClicked = function(click: MouseEvent): Void { //although, this doesn't compile
                for (i in [0.. strength - 1]) {
                    insert Arc {
                        centerX: click.x, centerY: click.y
                        radiusX: radius, radiusY: radius
                        startAngle: startAngle + (angle * i), length: angle
                        fill: Color.RED
                        opacity: .5
                        type: ArcType.ROUND
                    } into slices;
                    //slices[i].blocksMouse = true;
                    insert ShapeIntersect {
                        a: slices[i] as Shape
                        b: node as Shape
                    } into pieces;                    
                    pieces[i].fill = node.fill;
                    pieces[i].blocksMouse = true;
                }
                
                for (i in [0.. strength - 1]) {
                    TranslateTransition {
                        duration: duration, node: pieces[i]
                        fromX: click.x
                        fromY: click.y
                        toX: vector(click.x, pieces[i].boundsInLocal.maxX)
                        toY: vector(click.y, pieces[i].boundsInLocal.maxY)
                    }.play();
                    if (true == fade) {
                        FadeTransition {
                            duration: duration, node: pieces[i]
                            byValue: fadeByValue, interpolator: fadeInterpolator
                        }.play();
                    }
                    if (true == rotation) {
                        RotateTransition {
                            duration: duration, node: pieces[i]
                            byAngle: rotateByAngle, interpolator: rotateInterpolator
                        }.play();
                    }
                }
                node.blocksMouse = true;
                node.visible = false;
            };
        }
        /*return group;
    }*/
}

First, repair the code so it compiles - uncomment the Group definition and make the onMouseClicked on Group - remove the "node."
Now the issues:
- although there's a code in both classes that is the same - the node.onMouseClicked handler, it compiles in first class, but not in the other one
- if i have my two components on stage and i click on them in the order i added them, it goes quite fine. if i do it vice versa, there's an artefact - i made the slices sequence visible for testing purposes.
- if you actually try to run the program, you spot another bug - after you click on component, the shatter effect appears at another place than are the mouse coordianates.

I played around with certain things for a long time. Now I think I don't see possible mistakes, that's why I came here.

Thanks

Oh, yes - don't mind the vector() function

[Jiri Goddard]

answered here:
http://forums.sun.com/thread.jspa?threadID=5427483