godswearhats / jquery-ui-rotatable Goto Github PK

Using this script with jquery-ui-1.9.1 the handle is duplicated when rotating element.
I hide it in rotateElement(); ( Im not sure this is proper way)

rotateElement: function(event) {
~~~
$( ".ui-draggable-dragging" , this.element ).hide();
return false;
}

It would be great to be able to cancel a rotate by returning false, or provide containment by being able to alter the angle within the rotate callback.

An example of how this might be achieved:

    rotateElement: function(event) {
        if (!this.element || this.element.disabled) {
            return false;
        }

        var rotateAngle = this.getRotateAngle(event);

        var previousRotateAngle = this.elementCurrentAngle;
        this.elementCurrentAngle = rotateAngle;

        // Plugins callbacks need to be called first.
        if ( this._propagate("rotate", event) === false ) {
          this.elementCurrentAngle = previousRotateAngle;
          return false;
        }
        var ui = this.ui();
        if ( this._trigger("rotate", event, ui ) == false ) {
          this.elementCurrentAngle = previousRotateAngle;
          return false;
        } else if (ui.angle.current != rotateAngle) {
          rotateAngle = ui.angle.current;
          this.elementCurrentAngle = rotateAngle;
        }

        this.performRotation(rotateAngle);

        if (previousRotateAngle != rotateAngle) {
            this.hasRotated = true;
        }

        return false;
    },

This changes how your plugin works a bit, since now rotate is triggered BEFORE the actual rotation. This is actually more in line with how typical jQuery widgets work.

Anyways, let me know what you think ... I could fork and create a pull request if you are interested.

The problem is when you rotate a element, then you try to drag it.. the element make a little jump of position, then drag..... that little jump is big as the rotation angle.... that happens in the DEMO too

http://godswearhats.com/jquery-ui-rotatable/demo.html

With the #target3, if you resize a little your element, then rotate, then drag... the jump of position is clearly visible. I don't know the reason why #target2 works perfectly but in my implementation (same than target2) acts like target3 with the little jump when I try to drag. Help!

Seems related to the position:absolute.... position:relative works fine!

Hello,
I have just used this great widget for a client-side layout designer jquery plugin, and I needed the feature of rotating elements in it. I also needed an additional feature, that Shiftkey snaps the angle on rotate event to the nearest 45 degree.

I was just wondering if you could use my solution to improve the widget with the following snippet (rotateElement function):

After the row

    var rotateAngle = mouseAngle - this.mouseStartAngle + this.elementStartAngle;

insert the following:

    if(event.shiftKey){
        var degree = rotateAngle * (180/Math.PI);
        var closestStep = 0;
        var step = 45; // it could be an input option to the widget
        var dist = degree%360%step;
        var gap = step - Math.abs(dist);

        if(Math.abs(dist) < gap){
            closestStep = (degree - dist) * (Math.PI/180);
        }
        else if(Math.abs(dist) >= gap){
            if(dist < 0){
                closestStep = degree - gap;
            }
            else if(dist > 0){
                closestStep = degree + gap;
            }
            else{
                closestStep = degree;
            }
            closestStep = closestStep * (Math.PI/180);
        }
        rotateAngle = closestStep;
    }

Initialized with option angle : 0 and rotatable stopped woking.

However I found a working fix.

In line 37
change this if(this.options.angle != false)

TO THIS if(this.options.angle !== false)

I was hoping this would work out of the box with packering, this is not the case. Would be nice to have a library that plugs into jqueryui seamlessly so....

Lets see if we can make it work then shall we, issue opened for attention, suggestions and note keeping.

Some issues so far:

• No rotate indicator in left corner, can't find handle to mouse rotate - fixed css wasn't loaded
• Wheel rotate seems to ignore degrees
• When using snap wheel rotate stops
• Returns back to normal orientation by packering when moved
• There also seems to be bigger problems when using with jqueryui 1.12.1 (as a side note)

Here is a codepen as an example implementation with draggable, resizable and rotatable. Using jqueryui 1.11.2.

Any suggestions?

Can you upload the newest version to the CDN? I noticed that you can't disable the scroll-wheel in the CDN version.

I love the plugin! Thanks for all your help!

Make a release version so that it can be added to CDN's

start, stop methods are not called when rotate using mouse wheel.
And how do I call rotate programmatically? Let's say if I have a input box and when I add rotation angle into it how would I change the rotation?

Is there a way to rotate a targeted element in code?

What I'm trying to do: allow the user to freely rotate an element, but then swing back to a certain set of positions when released. Is there a way to make the element rotate automatically?

Rotatable is completely awesome thank you for your efforts. I'm trying to use the plugin for a web app that's destined for an iPad. Testing on desktop browsers works perfectly. Unfortunately, i'm not able to get rotation to work on the iPad. When I tap and drag on the rotation handle, nothing happens. I tried the obvious replacement of mouse triggers with touch triggers (touchstart, touchmove and touchend)...this did not do the trick. Any insight you can provide is very much appreciated.

Thanks again

In example of transform parameter there is unnecessary bracket. User should enter transform value without bracket to make it work.

How is possible to get a variable with the Id of the div ratated?
Thanks

Can the rotation be restricted to degrees say 0, 90, 180, 270, 360?

With jQuery2, it won't work well for me.

To reproduce the problem, modify demo.html like htis

<!--
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
-->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

the rotate center was changed after drag end.

The current implementation on CDN has an angle option that uses radians.
Not degrees, as mentioned in the readme.

Hi!

I don't if it is possible to do it with this plugin, if you will implement it or if I have to manually modify the source code, but what I'm looking for is a way to configure a start degrees and an end degrees values to allow rotation from 3º to 356º (for example), but if it arrives to 0º, rotate to 0º.

This could be usefull if you don't want that the user that will rotate the element has to extrictly rotate the element to 0º. E.g.: when 356º is reached, prevent rotation until it arrives to 0º. If 0º is reached, rotate element to 0º and prevent rotation until it goes again to 3º or 356º. Even if you set step: 1 and snap: true it would be a good implementation, so they can't miss to "reset" the rotation.

Thanks in advance.

Regards,
Daglimioux.

I tried rotating the resizable object by 180 degrees in the demo. Then when I tried to resize the object, with the resizable handle there was some strange behavior.

There is a wheelRotate option but it does not apply to Scroll Whell rotation when hovering. Is there a way to actually disable an object to rotate (with scroll wheel) when hovered?

Currently there is no way to set the angle in deg , it is always rad, please show a working example.

try ur demo in mobile
it is not work

Handle doesn't disappear when elem.rotatable('disabled') is called. The rotation is disabled but the handle remains.

Hi there,

Nifty little plugin!

I noticed that when using rotatable({disabled:true}) and rotatable('enable'), the plugin adds and removes the correct CSS-class state (.ui-rotatable-disabled).

That said, the respective element is, in fact, still rotatable despite the following code:

rotateElement: function(event) {
    if (!this.element || this.element.disabled) {
        return false;
    }
    [...]

Not sure why it isn't working, but maybe the disabled-flag is stored in an options object attached to the DOM element rather than the disabled property directly on it?

Is there a way to recreate rotatable once ui-rotatable-handle has been removed??

jQuery UI's draggable provides the ability to specify an external element as a handler for the rotation.

This would be incredibly useful for me within jquery-ui-rotatable. Any plans on implementing something like this?

When passing wheelRotate: false in options, moving the wheel still rotates the element.

Chromium Version 52.0.2743.116 Built on Ubuntu , running on LinuxMint 17.2 (64-bit)

I want to drag a div in another div. I mean it should be draggable in side that div only.

How can I achieve it?

Thanks in advance.

Steps to reproduce:

1. Start rotation by mouse down.
2. Keeping the mouse button down the user moves out of browser window.
3. Release mouse button outside.
4. Enter back to the browser window.

The rotation is still active.

This can be fixed by adding the following on line (Line #165)

rotateElement: function(event) {

if(!event.which){return;}

Math.abs gives the wrong deg result as you can see here
https://jsfiddle.net/unloco/13sgedLn/12/

I don't understand why it was used, I forgot all about trig

If one monitors the angle in say, the console, the angle (I've converted to degrees for legibility) is all over the place in terms of numbers.

Instead, limit the angle reported from 0 to 360.

Hi Guys,

i have some wired Problems with the rotatable Plugin.
This happens also on the normal demo page.
http://godswearhats.com/jquery-ui-rotatable/demo.html

When i start to drag and then rotate all look fine but when i try it a second or third time the rotation is really wired. Look at the Video:
https://youtu.be/AQqBJRco7VE

I hope someone can fix this.

Thank You,
Daniel

Hi is there a way to make this mobile please? Thanks

I have setup a fiddle http://jsbin.com/gasolo/edit?html,js,output to replicate this issue.
When the option wheelRotate is set to false, it still rotates when the wheel is rotated on the element.

When passing wheelRotate: false in options, moving the wheel still rotates the element.

After rotating an object I need to retrieve the current angle so I can persist it in my backend.

At this moment, I'm doing this

jQuery(div).rotatable({
        stop: function (element) {
            var rotation = jQuery(element.target).data('ui-rotatable').elementCurrentAngle;
            console.log('Rotatable stopped', rotation);
        }
    });

it works fine, but somehow it feels hacky. Is there a canonical way to get the widget attributes in a given moment?

How can I rotate an object while clicking on a button with some predefined angle instead of using the handle? Actually I need both features that user should be able to rotate object (an image etc) through handle by using mouse and also by entering value of angle in text box and clicking on button.

I would like the functionality to resize from all four sides of the div.

Hi again!

Would be nice to set a return false; on the start function event to stop rotation if a condition is met. I'm trying to do it now, but it doesn't stop rotating the element. It just prevents the custom function execution, but not the rotation (like with jQuery UI resizable).

Thanks in advance.

Best regards,
Daglimioux.

I tried using this plugin and use css transform to apply zooming. After zooming the rotation flickers and doesn't work smoothly.

I have attached a jsfiddle for example
https://jsfiddle.net/pj0fLxdk/

var params = {
// Callback fired on rotation start.
start: function(event, ui) {
},
// Callback fired during rotation.
rotate: function(event, ui) {
// if (Math.abs(ui.angle.current > 6)) {
console.log("Rotating " + ui.angle.current)
// }
},
// Callback fired on rotation end.
stop: function(event, ui) {
},
// Set the rotation center at (25%, 75%).
// angle: 0.2,
rotationCenterX: 25.0,
rotationCenterY: 75.0,
transforms: {
translate: '(50%, 50%)',
scale: '(2)'
//any other transforms
},
};

$(document).on('click', '.block-add', function () {

    var a = $(this);
    var src = a.find('img:first').attr('src');
    var elem = $('<div class=""><img src="' + src + '" class="blocks" /></div>');
    $('.block').append(elem);
    elem.draggable();
    elem.rotatable(params).find('.blocks:first').resizable({ handles: "nw, sw, se, ne" });

// When rotating image its rotate from corner point of image .How to fix this ?

Is it possible to use this on a div background image? idea is to reposition, rotate, resize the div background image right on the webpage dynamically. I found https://github.com/kentor/jquery-draggable-background which is really cool. Was wondering if rotatable could work that way

i've got code that looks like this and when i rotate the element with my scroll wheel these don't fire. is there something i'm doing wrong in the set up?

$("#nftInner").rotatable({
        wheelRotate: true,
        rotate: function (event, ui) {
	        // todo: make this a timeout. stop() is not called on wheel
	        updateFirebaseTransform({ radians: ui.angle.current });
        },
        radians: pageData.transform.radians,
        start: function(event, ui) {
	        $(this).addClass("dashed-boder"); // Not firing
        },
        stop: function(event, ui) {
	        $(this).removeClass("dashed-boder"); // Not firing
        }
});

Hi,
I added some code for setting the center of rotation, and since I am new to github I could not figure out how I helped out in your piece of code here.

Instead I made a fork, which can be found here:
https://github.com/Snorvarg/jquery-ui-rotatable

Feel free to use it if you find it usable!

Hello there, nice plugin !

One thing I just recognize is that wheelRotate don't care about step option - or at least it's not correct.

What is a good way to fix that?

Thank you!

Hi there,

Please can you tell me if I can use the target element that is being rotated as the handle too?

I have the following markup:

<div><img /></div>

I want to rotate the img and use it as the handle at the same time. It appears to work when I reference it as the handle:

img.attr('data-edit-status', 'rotating').rotatable({ degrees: currentRotation, handle: img, stop: function (event, ui) { currentRotation = ui.angle.degrees } })

but when I try and destroy the rotation it fails:

$('img[data-edit-status="rotating"]').rotatable('destroy')

Many thanks in advance.