Tuesday, July 29, 2014

How to implement jquery rotatable with gwtquery ?

So I'm trying to implement this jquery plugin into a gwtquery one.

I'm using the Draggable . Most of the code is easily implemented in Gwtquery but I see have two problem area 1. with how events are handled: in jquery events are just passed to the function here is where they declare the draggable:
   _rotator
.draggable({
        helper
: 'clone',
        revert
: false,
        start
: function (e) {
          e
.stopPropagation();
          e
.stopImmediatePropagation();



      // Element Width & Height()
      dims
= {
       
'w': _this.width(),
       
'h': _this.height()
     
};

     
// Center Coords
      center_coords
= {
       
'x': _this.offset().left + _this.width() * 0.5,
       
'y': _this.offset().top + _this.height() * 0.5
     
};
   
},
    drag
: function (e) {
     
var mouse_coords, angle;

      e
.stopPropagation();
      e
.stopImmediatePropagation();

      _this
.rotating = true;

     
// Mouse Coords
      mouse_coords
= {
       
'x': e.pageX,
       
'y': e.pageY
     
};


Things to note here too is the dims??? for what was it declared still can't figure that out. But the code clearly stops propagation must be important The same code can't really be implement this way because access to the event isn't there

Here's my code



 DraggableOptions dragOpts = new DraggableOptions();
            dragOpts
.setHelper(HelperType.CLONE);
           dragOpts
.setRevert(RevertOption.NEVER);
           dragOpts
.setOnDragStart(new DragFunction(){
           
@Override
           
public void f(DragContext context) {

       centerCoords
.setX(context.getDraggable().getOffsetLeft()    +    context.getDraggable().getOffsetWidth());
                centerCoords
.setY(context.getDraggable().getOffsetTop() +     context.getDraggable().getOffsetTop());
           
}});
        dragOpts
.setOnDrag(new DragFunction(){

           
@Override
           
public void f(DragContext context) {
               
final  Coordinate mouseCoords = GWT.create(Coordinate.class);
               
Double angle;
                $
(_this).mousemove(new Function(){
                   
@Override
                   
public boolean f(Event e){

                        mouseCoords
.setX(e.getClientX());
                        mouseCoords
.setY( e.getClientY());

                       
return true;
                   
}
               
});

                angle
= radToDeg(getAngle(mouseCoords, centerCoords)) - 90;

                rotate
(angle);

           
}});
        dragOpts
.setOnDragStop(new DragFunction(){

           
@Override
           
public void f(DragContext context) {
                _this
.rotating = false;

           
}});


        $
(rotator).as(Draggable).draggable(dragOpts );


DragContext doesn't give access to the event. If I implement the HandlerManager it won't have access to local variables. So my answer was to hack a mousemove function where I do have access to events. again this code only fires once in chrome and not at all in ie an ff

So how should I go about implementing this?

Enter code here...



--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

No comments:

Post a Comment