From 8070206b217fa9eee07c01645624006962744cfc Mon Sep 17 00:00:00 2001 From: nickl Date: Sat, 19 Jun 2021 08:12:41 +0200 Subject: [PATCH 1/2] Retain old angle if angel option not set. The oldAngle value was calculated but never used. If the angle option is not set use the old angle. Tis does not change the default value for option angle as it remains 0. --- jquery.ui.rotatable.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/jquery.ui.rotatable.js b/jquery.ui.rotatable.js index 2eebd21..5fc7213 100644 --- a/jquery.ui.rotatable.js +++ b/jquery.ui.rotatable.js @@ -49,7 +49,7 @@ $.widget('ui.rotatable', $.ui.mouse, { delay: 0, disabled: false, alsoRotate: false, - angle: 0, + angle: undefined, handle: true, handleElementSelector: '
', rotationOriginPosition: { @@ -207,7 +207,7 @@ $.widget('ui.rotatable', $.ui.mouse, { if (this._isRotationOriginPositionGiven()) { element.css('transform-origin', this.getRotationOriginPositionLeft(element) + 'px ' + this.getRotationOriginPositionTop(element) + 'px'); } - var newTransform = 'rotate(' + angle + 'deg) '; + var newTransform = ''; if (currentTransform !== 'none') { var regex = /matrix\((.*),(.*),(.*),(.*),(.*),(.*)\)/; var match = regex.exec(currentTransform); @@ -232,6 +232,9 @@ $.widget('ui.rotatable', $.ui.mouse, { if (a !== 0 || b !== 0) { var r = this._round(Math.sqrt(a * a + b * b), 5); oldAngle = this._angleInDegrees(b > 0 ? Math.acos(a / r) : -Math.acos(a / r)); + if (angle === undefined) { + angle = oldAngle; + } x = r; y = this._round(del / r, 5); if (x !== 1 || y !== 1) { @@ -245,6 +248,9 @@ $.widget('ui.rotatable', $.ui.mouse, { else if (c !== 0 || d !== 0) { var s = Math.sqrt(c * c + d * d); oldAngle = this._angleInDegrees((Math.PI / 2) - (d > 0 ? Math.acos(-c / s) : -Math.acos(c / s))); + if (angle === undefined) { + angle = oldAngle; + } x = del / s; y = s; if (x !== 1 || y !== 1) { @@ -260,13 +266,16 @@ $.widget('ui.rotatable', $.ui.mouse, { } } } + angle = this._calculateAbsoluteAngle(this._num(angle)); + newTransform += 'rotate(' + angle + 'deg) '; + element.css('transform', newTransform); return angle; }, _angle: function (angle) { - this.elementCurrentAngle = this._calculateAbsoluteAngle(this._num(angle)); - return this.perform(this.element, this.elementCurrentAngle); + this.elementCurrentAngle = this.perform(this.element, angle); + return this.elementCurrentAngle; }, _create: function() { From 64838fe3a093764d51e859bc263609764bd75e67 Mon Sep 17 00:00:00 2001 From: nickl Date: Sat, 19 Jun 2021 08:45:15 +0200 Subject: [PATCH 2/2] Add minified js --- jquery.ui.rotatable.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.ui.rotatable.min.js b/jquery.ui.rotatable.min.js index bc7a00f..ee2d231 100644 --- a/jquery.ui.rotatable.min.js +++ b/jquery.ui.rotatable.min.js @@ -22,4 +22,4 @@ * Thanks to jQuery UI Development Team (https://jqueryui.com/about/) * Thanks to Aidan Rogers (https://github.com/godswearhats/jquery-ui-rotatable) */ -!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):t(jQuery)}(function(t){t.widget("ui.rotatable",t.ui.mouse,{widgetEventPrefix:"rotate",options:{classes:{},create:null,distance:1,delay:0,disabled:!1,alsoRotate:!1,angle:0,handle:!0,handleElementSelector:"
",rotationOriginPosition:{top:null,left:null},snap:!1,snapStep:22.5,rotate:function(t,e){},start:function(t,e){},stop:function(t,e){},wheel:!0,wheelStep:7.5},plugins:{},handlers:{},elementStartAngle:0,elementCurrentAngle:0,elementStopAngle:0,mouseStartAngle:0,isRotating:!1,hasRotated:!1,_num:function(t){return parseFloat(t)||0},_isNumber:function(t){return!isNaN(parseFloat(t))},_round:function(t,e){var n=this._num(t),i=Math.pow(10,e),o=n*i;return Math.round(o)/i},_mod:function(t,e){return(t%e+e)%e},_canBeParent:function(){return!this.element[0].nodeName.match(/^(canvas|textarea|input|select|button|img)$/i)},_enableSelection:function(t){return t.attr("unselectable","off"),t.css("user-select","auto"),t.off(".ui-disableSelection")},_disableSelection:function(t){t.attr("unselectable","on"),t.css("user-select","none");var e="onselectstart"in document.createElement("div")?"selectstart":"mousedown";return t.on(e+".ui-disableSelection",function(t){t.preventDefault()})},_angleInDegrees:function(t){return 180*t/Math.PI},_calculateSnap:function(t){return Math.round(t/this.options.snapStep)*this.options.snapStep},_getElementOffset:function(){this._do(0);var t=this.element.offset();return this._do(this.elementCurrentAngle),t},_isRotationOriginPositionGiven:function(){return"number"==typeof this.options.rotationOriginPosition.top||"number"==typeof this.options.rotationOriginPosition.left},_getRotationOriginPositionTop:function(){return"number"==typeof this.options.rotationOriginPosition.top?this.options.rotationOriginPosition.top:Math.round(this.element.height()/2)},_getRotationOriginPositionLeft:function(){return"number"==typeof this.options.rotationOriginPosition.left?this.options.rotationOriginPosition.left:Math.round(this.element.width()/2)},_calculateOrigin:function(){var t=this._getElementOffset();if(this._isRotationOriginPositionGiven())return{x:t.left+this._getRotationOriginPositionLeft(),y:t.top+this._getRotationOriginPositionTop()};var e=this.element.css("transform-origin");if("string"==typeof e){var n=e.match(/([\d.]+)px +([\d.]+)px/);if(null!==n)return{x:t.left+this._num(n[1]),y:t.top+this._num(n[2])}}return{x:t.left+Math.round(this.element.width()/2),y:t.top+Math.round(this.element.height()/2)}},_calculateRotationAngleViaMousePosition:function(t){var e=this._calculateOrigin(),n=t.pageX-e.x,i=t.pageY-e.y,o=this._angleInDegrees(Math.atan2(i,n))-this.mouseStartAngle+this.elementStartAngle;return(this.options.snap||t.shiftKey)&&(o=this._calculateSnap(o)),this._mod(o,360)},_do:function(t){var e=this.element,n=e.css("transform");if(void 0!==n){this._isRotationOriginPositionGiven()&&e.css("transform-origin",this._getRotationOriginPositionLeft()+"px "+this._getRotationOriginPositionTop()+"px");var i="rotate("+t+"deg) ";if("none"!==n){var o=/matrix\((.*),(.*),(.*),(.*),(.*),(.*)\)/.exec(n);if(null!==o){var s=this._num(o[1]),a=this._num(o[2]),r=this._num(o[3]),l=this._num(o[4]),h=this._num(o[5]),u=this._num(o[6]);0!==h&&(i+=0===u?"translate("+h+"px) ":"translate("+h+"px, "+u+"px) ");var g=s*l-a*r,c=null,d=null;if(0!==s||0!==a){var f=this._round(Math.sqrt(s*s+a*a),5);this._angleInDegrees(a>0?Math.acos(s/f):-Math.acos(s/f)),c=f,d=this._round(g/f,5),1===c&&1===d||(i+="scale("+c+(c===d?"":", "+d)+") "),0!==(c=Math.atan((s*r+a*l)/(f*f)))&&(i+="skewX("+this._angleInDegrees(c)+"deg) ")}else if(0!==r||0!==l){var m=Math.sqrt(r*r+l*l);this._angleInDegrees(Math.PI/2-(l>0?Math.acos(-r/m):-Math.acos(r/m))),d=m,1===(c=g/m)&&1===d||(i+="scale("+c+(c===d?"":", "+d)+") "),0!==(c=Math.atan((s*r+a*l)/(m*m)))&&(i+="skewY("+this._angleInDegrees(c)+"deg) ")}else i+="scale(0) "}}e.css("transform",i)}},_create:function(){var e=this.options;this.element.addClass("ui-rotatable"),e.handle&&this._placeHandle(),this.handlers={_mouseWheel:t.proxy(this._mouseWheel,this)},e.wheel&&this.element.bind("wheel",this.handlers._mouseWheel),this.rotationOriginPosition(e.rotationOriginPosition),this.elementCurrentAngle=this._mod(this.options.angle||0,360),this._do(this.elementCurrentAngle),this._mouseInit()},_destroy:function(){this._mouseDestroy(),this.element.removeClass("ui-rotatable"),this.element.off("rotatable"),this.element.find(".ui-rotatable-handle:first").remove(),this.options.wheel&&this.element.unbind("wheel",this.handlers._mouseWheel)},_placeHandle:function(){var e=this.options;if(this.element&&this._canBeParent()){var n=this.element.find(".ui-rotatable-handle:first");n.length<1&&((n=t(e.handleElementSelector)).addClass("ui-rotatable-handle"),n.appendTo(this.element),this._disableSelection(n)),"absolute"!==n.css("position")&&n.css("position","absolute"),n.width()<1&&n.width(9),n.height()<1&&n.height(9),"auto"===n.css("cursor")&&n.css("cursor","grab")}},_getJqHandle:function(){return this.options.handle?this.element.find(".ui-rotatable-handle:first"):this.element},_propagate:function(e,n){t.ui.plugin.call(this,e,[n,this.ui()]),"rotate"!==e&&this._trigger(e,n,this.ui())},_setOption:function(t,e){this._super(t,e)},_mouseCapture:function(t){var e=this.options;if(!this.element||this.element.disabled||e.disabled)return!1;if(e.handle){var n=this._getJqHandle();if(t.target!==n[0])return!1}else if(t.target!==this.element[0])return!1;return!0},_mouseStart:function(t){var e=this._getJqHandle(),n=this._calculateOrigin(),i=t.pageX-n.x,o=t.pageY-n.y;return this.mouseStartAngle=this._angleInDegrees(Math.atan2(o,i)),this.elementStartAngle=this.elementCurrentAngle,this.isRotating=!0,this.hasRotated=!1,this.element.addClass("ui-rotatable-rotating"),e.length>0&&"grab"===e.css("cursor")&&e.css("cursor","grabbing"),this._propagate("start",t),!0},_mouseDrag:function(t){if(!this.element||this.element.disabled||this.options.disabled)return!1;var e=this._calculateRotationAngleViaMousePosition(t),n=this.elementCurrentAngle;if(this.elementCurrentAngle=e,!1===this._propagate("rotate",t))return this.elementCurrentAngle=n,!1;var i=this.ui();return!1===this._trigger("rotate",t,i)?(this.elementCurrentAngle=n,!1):(i.angle.current!==e&&(e=i.angle.current,this.elementCurrentAngle=e),this._do(e),n!==e&&(this.hasRotated=!0),!1)},_mouseStop:function(t){if(!this.element)return!1;var e=this._getJqHandle();return this.isRotating=!1,this.elementStopAngle=this.elementCurrentAngle,this.element.removeClass("ui-rotatable-rotating"),e.length>0&&"grabbing"===e.css("cursor")&&e.css("cursor","grab"),this._propagate("stop",t),!1},_mouseWheel:function(t){if(!this.element||this.element.disabled||this.options.disabled)return!1;var e=Math.round(t.originalEvent.deltaY*this._num(this.options.wheelStep));return(this.options.snap||t.shiftKey)&&(e=this._calculateSnap(e)),e=this.elementCurrentAngle+e,this.angle(e),this._trigger("rotate",t,this.ui()),!0},angle:function(t){var e=this.options;if(void 0===t)return e.angle;e.angle=t,this.elementCurrentAngle=this._mod(t,360),this._do(e.angle)},handle:function(t){var e=this.options;if(void 0===t)return e.handle;e.handle=t,e.handle&&this._placeHandle()},handleElementSelector:function(t){var e=this.options;if(void 0===t)return e.handleElementSelector;e.handleElementSelector=t,e.handle&&this._placeHandle()},rotationOriginPosition:function(t){var e=this.options;if(void 0===t)return e.rotationOriginPosition;"number"==typeof t.top&&(e.rotationOriginPosition.top=t.top),"number"==typeof t.left&&(e.rotationOriginPosition.left=t.left)},ui:function(){return{element:this.element,angle:{start:this.elementStartAngle,current:this.elementCurrentAngle,stop:this.elementStopAngle}}}}),t.ui.plugin.add("rotatable","alsoRotate",{start:function(){var e=t(this).rotatable("instance").options;t(e.alsoRotate).each(function(){t(this).data("ui-rotatable-alsorotate",{})})},rotate:function(e,n){var i=t(this).rotatable("instance").options;console.log(JSON.stringify(i,null,2)),t(i.alsoRotate).each(function(){t(this).data("ui-rotatable-alsorotate")})},stop:function(){t(this).removeData("ui-rotatable-alsorotate")}});t.ui.rotatable;return t.ui.rotatable}); +!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):t(jQuery)}(function(t){t.widget("ui.rotatable",t.ui.mouse,{widgetEventPrefix:"rotate",options:{classes:{},create:null,distance:1,delay:0,disabled:!1,alsoRotate:!1,angle:void 0,handle:!0,handleElementSelector:"
",rotationOriginPosition:{top:null,left:null},snap:!1,snapStep:22.5,start:function(t,e){return!0},rotate:function(t,e){return!0},stop:function(t,e){return!0},wheel:!0,wheelingVerticalStep:null,wheelingHorizontalStep:null},plugins:{},handlers:{},elementStartAngle:0,elementCurrentAngle:0,elementStopAngle:0,mouseStartAngle:null,_num:function(t){return parseFloat(t)||0},_isNumber:function(t){return!isNaN(parseFloat(t))},_round:function(t,e){var n=this._num(t),i=Math.pow(10,e),s=n*i;return Math.round(s)/i},_canBeParent:function(){return!this.element[0].nodeName.match(/^(canvas|textarea|input|select|button|img)$/i)},_enableSelection:function(t){return t.attr("unselectable","off"),t.css("user-select","auto"),t.off(".ui-disableSelection")},_disableSelection:function(t){t.attr("unselectable","on"),t.css("user-select","none");var e="onselectstart"in document.createElement("div")?"selectstart":"mousedown";return t.on(e+".ui-disableSelection",function(t){t.preventDefault()})},_angleInDegrees:function(t){return 180*t/Math.PI},_calculateAbsoluteAngle:function(t){return t>360?t-360:t<0?t+360:t},_calculateSnap:function(t){return Math.round(t/this.options.snapStep)*this.options.snapStep},_getElementOffset:function(){var t=this.element;this.perform(t,0);var e=t.offset();return this.perform(t,this.elementCurrentAngle),e},_isRotationOriginPositionGiven:function(){return"number"==typeof this.options.rotationOriginPosition.top||"number"==typeof this.options.rotationOriginPosition.left},getRotationOriginPositionTop:function(t){return"number"==typeof this.options.rotationOriginPosition.top?this.options.rotationOriginPosition.top:Math.round(t.height()/2)},getRotationOriginPositionLeft:function(t){return"number"==typeof this.options.rotationOriginPosition.left?this.options.rotationOriginPosition.left:Math.round(t.width()/2)},_calculateOrigin:function(){var t=this.element,e=this._getElementOffset();if(this._isRotationOriginPositionGiven())return{x:e.left+this.getRotationOriginPositionLeft(t),y:e.top+this.getRotationOriginPositionTop(t)};var n=t.css("transform-origin");if("string"==typeof n){var i=n.match(/([\d.]+)px +([\d.]+)px/);if(null!==i)return{x:e.left+this._num(i[1]),y:e.top+this._num(i[2])}}return{x:e.left+Math.round(t.width()/2),y:e.top+Math.round(t.height()/2)}},_calculateRotationAngleViaMousePosition:function(t){var e=this._calculateOrigin(),n=this._calculateMouseAngle(t,e)-this._num(this.mouseStartAngle)+this.elementStartAngle;return this.options.snap&&(n=this._calculateSnap(n)),this._calculateAbsoluteAngle(n)},_calculateMouseAngle:function(t,e){var n=t.pageX-e.x,i=t.pageY-e.y;return this._angleInDegrees(Math.atan2(i,n))},perform:function(t,e){var n=null,i=t.css("transform");if(void 0===i)return 0;this._isRotationOriginPositionGiven()&&t.css("transform-origin",this.getRotationOriginPositionLeft(t)+"px "+this.getRotationOriginPositionTop(t)+"px");var s="";if("none"!==i){var o=/matrix\((.*),(.*),(.*),(.*),(.*),(.*)\)/.exec(i);if(null!==o){var a=this._num(o[1]),r=this._num(o[2]),l=this._num(o[3]),u=this._num(o[4]),h=this._num(o[5]),c=this._num(o[6]);0!==h&&(s+=0===c?"translate("+h+"px) ":"translate("+h+"px, "+c+"px) ");var g=a*u-r*l,d=null,f=null;if(0!==a||0!==r){var p=this._round(Math.sqrt(a*a+r*r),5);n=this._angleInDegrees(r>0?Math.acos(a/p):-Math.acos(a/p)),void 0===e&&(e=n),d=p,f=this._round(g/p,5),1===d&&1===f||(s+="scale("+d+(d===f?"":", "+f)+") "),0!==(d=Math.atan((a*l+r*u)/(p*p)))&&(s+="skewX("+this._angleInDegrees(d)+"deg) ")}else if(0!==l||0!==u){var m=Math.sqrt(l*l+u*u);n=this._angleInDegrees(Math.PI/2-(u>0?Math.acos(-l/m):-Math.acos(l/m))),void 0===e&&(e=n),f=m,1===(d=g/m)&&1===f||(s+="scale("+d+(d===f?"":", "+f)+") "),0!==(d=Math.atan((a*l+r*u)/(m*m)))&&(s+="skewY("+this._angleInDegrees(d)+"deg) ")}else s+="scale(0) "}}return s+="rotate("+(e=this._calculateAbsoluteAngle(this._num(e)))+"deg) ",t.css("transform",s),e},_angle:function(t){return this.elementCurrentAngle=this.perform(this.element,t),this.elementCurrentAngle},_create:function(){var e=this.options;this.handlers={_mouseWheel:t.proxy(this._mouseWheel,this)},this.element.addClass("ui-rotatable"),e.handle&&this._placeHandle(),e.wheel&&this.element.bind("wheel",this.handlers._mouseWheel),this.rotationOriginPosition(e.rotationOriginPosition),this._angle(e.angle),this._mouseInit()},_destroy:function(){this._mouseDestroy(),this.element.removeClass("ui-rotatable ui-rotatable-rotating ui-rotatable-rotated"),this.element.off("rotatable"),this.element.find(".ui-rotatable-handle").remove(),this.options.wheel&&this.element.unbind("wheel",this.handlers._mouseWheel)},_placeHandle:function(){var e=this.options;if(this.element&&!this.element.disabled&&!e.disabled&&this._canBeParent()){var n=this.element.find(".ui-rotatable-handle:first");n.length<1&&((n=t(e.handleElementSelector)).addClass("ui-rotatable-handle"),n.appendTo(this.element),this._disableSelection(n));var i=n.css("top"),s=n.css("right"),o=n.css("bottom"),a=n.css("left");"absolute"!==n.css("position")&&n.css("position","absolute"),n.width()<1&&n.width(9),n.height()<1&&n.height(9),"auto"===i&&"auto"===o&&n.css("top","0px"),"auto"===a&&"auto"===s&&n.css("left","0px"),"auto"===n.css("cursor")&&n.css("cursor","grab")}},_displaceHandle:function(){},_getJqHandle:function(){return this.options.handle?this.element.find(".ui-rotatable-handle:first"):this.element},_setOption:function(t,e){this._super(t,e)},_mouseCapture:function(t){var e=this.element,n=this.options;if(!e||e.disabled||n.disabled)return!1;if(n.handle){var i=this._getJqHandle();if(t.target!==i[0])return!1}else if(t.target!==e[0])return!1;return!0},_mouseStart:function(e){var n=this.element;if(!n||n.disabled||this.options.disabled)return!1;var i=this._getJqHandle(),s=this._calculateOrigin();this.mouseStartAngle=this._calculateMouseAngle(e,s),this.elementStartAngle=this.elementCurrentAngle,n.removeClass("ui-rotatable-rotated"),n.addClass("ui-rotatable-rotating"),i.length>0&&"grab"===i.css("cursor")&&i.css("cursor","grabbing");var o=this.ui();return t.ui.plugin.call(this,"start",[e,o]),this._trigger("start",e,o)},_mouseDrag:function(e,n){var i=this.element;if(!i||i.disabled||this.options.disabled)return!1;var s=this._calculateRotationAngleViaMousePosition(e),o=this.elementCurrentAngle;this.elementCurrentAngle=s;var a=this.ui();return t.ui.plugin.call(this,"rotate",[e,a]),!1===this._trigger("rotate",e,a)?(this.elementCurrentAngle=o,!1):(o!==this._angle(s)&&i.addClass("ui-rotatable-rotated"),!1)},_mouseStop:function(e){var n=this.element;if(!n||n.disabled||this.options.disabled)return!1;this.elementStopAngle=this.elementCurrentAngle,n.removeClass("ui-rotatable-rotating");var i=this._getJqHandle();i.length>0&&"grabbing"===i.css("cursor")&&i.css("cursor","grab");var s=this.ui();return t.ui.plugin.call(this,"stop",[e,s]),this._trigger("stop",e,s),this.mouseStartAngle=null,!1},_mouseWheel:function(e){var n=this.options;if(!this.element||this.element.disabled||n.disabled)return!0;var i=1,s=1,o=this._num(n.snapStep);0!==o&&(i=o,s=o),"number"==typeof n.wheelingVerticalStep&&(s=i=n.wheelingVerticalStep),"number"==typeof n.wheelingHorizontalStep&&(s=n.wheelingHorizontalStep);var a=0;if(this._num(e.originalEvent.deltaY)>0?a=i:this._num(e.originalEvent.deltaY)<0?a=-1*i:this._num(e.originalEvent.deltaX)>0?a=s:this._num(e.originalEvent.deltaX)<0&&(a=-1*s),n.snap&&(a=this._calculateSnap(a)),0===a)return!0;a=this.elementCurrentAngle+a,this._angle(a);var r=this.ui();return t.ui.plugin.call(this,"rotate",[e,r]),this._trigger("rotate",e,r),!1},angle:function(t){var e=this.options;if(void 0===t)return e.angle;e.angle=this._angle(t)},handle:function(t){var e=this.options;if(void 0===t)return e.handle;t?e.handle||this._placeHandle():e.handle&&this._displaceHandle(),e.handle=t},wheel:function(t){var e=this.element,n=this.options;if(void 0===t)return n.wheel;t?n.wheel||e.bind("wheel",this.handlers._mouseWheel):n.wheel&&e.unbind("wheel",this.handlers._mouseWheel),n.wheel=t},handleElementSelector:function(t){var e=this.options;if(void 0===t)return e.handleElementSelector;e.handleElementSelector!==t&&(this._displaceHandle(),e.handleElementSelector=t,e.handle&&this._placeHandle())},rotationOriginPosition:function(t){var e=this.options;if(void 0===t)return e.rotationOriginPosition;"number"==typeof t.top&&(e.rotationOriginPosition.top=t.top),"number"==typeof t.left&&(e.rotationOriginPosition.left=t.left)},currentAngle:function(){return this.elementCurrentAngle},ui:function(){return{element:this.element,angle:{mouseStart:this.mouseStartAngle,start:this.elementStartAngle,current:this.elementCurrentAngle,stop:this.elementStopAngle}}}}),t.ui.plugin.add("rotatable","animate",{stop:function(t,e){}}),t.ui.plugin.add("rotatable","alsoRotate",{start:function(e,n){var i=t(this).rotatable("instance").options;t(i.alsoRotate).each(function(){t(this)})},rotate:function(e,n){var i=t(this).rotatable("instance"),s=i.options;t(s.alsoRotate).each(function(){var e=t(this);i.perform(e,i.elementCurrentAngle)})},stop:function(t,e){}});t.ui.rotatable;return t.ui.rotatable});