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