//cast to YuiGalleryContext for using the yui gallery java api.
final YuiGalleryContext Y = Y_.cast();
//redefine parent loading the new Y sandbox.
Node p = Y.one(parent.getDOMNode());
//we want to work with NodeTransform2d nod extension, so we simply cast the node to that class:
final NodeTransform2d n1 = p.appendChild("<p>click me first</p>").cast();
//set fixed bounds
n1.setStyles(Style.create().backgroundColor("red").fontSize("24px").
width("100px").height("70px"));
n1.on("click", new EventCallback<YuiEvent>() {
@Override
public void call(YuiEvent e) {
n1.rotate(25, TransitionVal.create().duration(0.5).easing("linear"));
}
});
final NodeTransform2d n2 = p.appendChild("<p>and then click me also</p>").cast();
//set fixed bounds
n2.setStyles(Style.create().backgroundColor("blue").fontSize("18px").
width("100px").height("140px"));
n2.on("click", new EventCallback<YuiEvent>() {
@Override
public void call(YuiEvent e) {
CSSMatrix2d matrix = n1.getMatrix().scale(2.5).skewX(1.5);
n2.transform(matrix, TransitionVal.create().duration(0.5).easing("linear"));
}
});
//AND NOW TRANSFORM A THIRD NODE, USING ONLY THE API OF gallery-cssmatrix2d
final NodeTransform2d n3 = p.appendChild("<p>mouse over me once</p>").cast();
n3.setStyles(Style.create().left("200px").top("100px").backgroundColor("green"));
n3.once("mouseover", new EventCallback<YuiEvent>() {
@Override
public void call(YuiEvent e) {
CSSMatrix2d m = Y.newCSSMatrix2d().setMatrixValue(n3.getString("transform"));
n3.setStyle("transform", m.rotate(20).translate(0, 20).toString_());
}
});
}
});
}