Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
svg.resize.js
Advanced tools
svg.resize.js - npm Package Compare versions
Comparing version 1.0.0 to 1.0.1
@@ -1,2 +0,2 @@ | ||
| /*! svg.resize.js - v1.0.0 - 2015-06-08 | ||
| /*! svg.resize.js - v1.0.1 - 2015-06-22 | ||
| * https://github.com/Fuzzyma/svg.resize.js | ||
@@ -6,2 +6,22 @@ * Copyright (c) 2015 Ulrich-Matthias Schäfer; Licensed MIT */ | ||
| // Calculates the offset of an element | ||
| function offset(el) { | ||
| var x = 0, y = 0; | ||
| if ('doc' in el) { | ||
| var box = el.bbox(); | ||
| x = box.x; | ||
| y = box.y; | ||
| el = el.doc().parent(); | ||
| } | ||
| while (el.nodeName.toUpperCase() !== 'BODY') { | ||
| x += el.offsetLeft; | ||
| y += el.offsetTop; | ||
| el = el.offsetParent; | ||
| } | ||
| return {x: x, y: y}; | ||
| } | ||
| function ResizeHandler(el) { | ||
@@ -89,10 +109,6 @@ | ||
| if (event.detail.i !== undefined) { | ||
| // `deepSelect` is possible with lines, too. | ||
| // We have to check that and getting the right point here. | ||
| // So first we build a point-array like the one in polygon and polyline | ||
| var array = this.el.type === 'line' ? [ | ||
| [this.el.attr('x1'), this.el.attr('y1')], | ||
| [this.el.attr('x2'), this.el.attr('y2')] | ||
| ] : this.el.array.value; | ||
| // get the point array | ||
| var array = this.el.array().valueOf(); | ||
| // Save the index and the point which is moved | ||
@@ -206,16 +222,19 @@ this.parameters.i = event.detail.i; | ||
| var current = {x: diffX + this.parameters.x, y: diffY + this.parameters.y}; | ||
| // we need the offset of the element to calculate our angle | ||
| var off = offset(this.el); | ||
| // start minus middle | ||
| var sAngle = Math.atan2((this.parameters.y - this.parameters.rbox.cy), (this.parameters.x - this.parameters.rbox.cx)); | ||
| var sAngle = Math.atan2((this.parameters.y - off.y - this.parameters.rbox.height / 2), (this.parameters.x - off.x - this.parameters.rbox.width / 2)); | ||
| // end minus middle | ||
| var pAngle = Math.atan2((current.y - this.parameters.rbox.cy), (current.x - this.parameters.rbox.cx)); | ||
| var pAngle = Math.atan2((current.y - off.y - this.parameters.rbox.height / 2), (current.x - off.x - this.parameters.rbox.width / 2)); | ||
| var angle = (pAngle - sAngle) * 180 / Math.PI; | ||
| // We have to move the this.el to the center of the rbox first and change the rotation afterwards | ||
| // We have to move the element to the center of the rbox first and change the rotation afterwards | ||
| // because rotation always works around a rotation-center, which is changed when moving the this.el. | ||
| // We also set the new rotation center to the center of the rbox. | ||
| // The -2 and -1.5 is tuning since the box is jumping for a few px when starting the rotation. | ||
| this.el.center(this.parameters.rbox.cx - 2, this.parameters.rbox.cy - 1.5).transform({rotation: this.parameters.rotation + angle - angle % this.options.snapToAngle, cx: this.parameters.rbox.cx, cy: this.parameters.rbox.cy}); | ||
| // The -0.5 and -1 is tuning since the box is jumping for a few px when starting the rotation. | ||
| this.el.center(this.parameters.rbox.cx - 0.5, this.parameters.rbox.cy - 1).rotate(this.parameters.rotation + angle - angle % this.options.snapToAngle, this.parameters.rbox.cx, this.parameters.rbox.cy); | ||
| }; | ||
@@ -231,13 +250,4 @@ break; | ||
| // We build an object to handle the different properties of a line, if needed | ||
| var array = this.el.type === 'line' ? [ | ||
| { | ||
| x1: this.parameters.pointCoords[0] + snap[0], | ||
| y1: this.parameters.pointCoords[1] + snap[1] | ||
| }, | ||
| { | ||
| x2: this.parameters.pointCoords[0] + snap[0], | ||
| y2: this.parameters.pointCoords[1] + snap[1] | ||
| } | ||
| ] : this.el.array.value; // Otherwise we need the normal point-array | ||
| // Get the point array | ||
| var array = this.el.array().valueOf(); | ||
@@ -244,0 +254,0 @@ |
@@ -1,4 +0,4 @@ | ||
| /*! svg.resize.js - v1.0.0 - 2015-06-08 | ||
| /*! svg.resize.js - v1.0.1 - 2015-06-22 | ||
| * https://github.com/Fuzzyma/svg.resize.js | ||
| * Copyright (c) 2015 Ulrich-Matthias Schäfer; Licensed MIT */ | ||
| (function(){function a(a){a.remember("_resizeHandler",this),this.el=a,this.parameters={},this.lastUpdateCall=null}a.prototype.init=function(a){var b=this;if(this.stop(),"stop"!==a){this.options={};for(var c in this.el.resize.defaults)this.options[c]=this.el.resize.defaults[c],"undefined"!=typeof a[c]&&(this.options[c]=a[c]);this.el.on("lt.resize",function(a){b.resize(a||window.event)}),this.el.on("rt.resize",function(a){b.resize(a||window.event)}),this.el.on("rb.resize",function(a){b.resize(a||window.event)}),this.el.on("lb.resize",function(a){b.resize(a||window.event)}),this.el.on("t.resize",function(a){b.resize(a||window.event)}),this.el.on("r.resize",function(a){b.resize(a||window.event)}),this.el.on("b.resize",function(a){b.resize(a||window.event)}),this.el.on("l.resize",function(a){b.resize(a||window.event)}),this.el.on("rot.resize",function(a){b.resize(a||window.event)}),this.el.on("point.resize",function(a){b.resize(a||window.event)}),this.update()}},a.prototype.stop=function(){return this.el.off("lt.resize"),this.el.off("rt.resize"),this.el.off("rb.resize"),this.el.off("lb.resize"),this.el.off("t.resize"),this.el.off("r.resize"),this.el.off("b.resize"),this.el.off("l.resize"),this.el.off("rot.resize"),this.el.off("point.resize"),this},a.prototype.resize=function(a){var b=this;if(this.parameters={x:a.detail.x,y:a.detail.y,box:this.el.bbox(),rbox:this.el.rbox(),rotation:this.el.transform().rotation},void 0!==a.detail.i){var c="line"===this.el.type?[[this.el.attr("x1"),this.el.attr("y1")],[this.el.attr("x2"),this.el.attr("y2")]]:this.el.array.value;this.parameters.i=a.detail.i,this.parameters.pointCoords=[c[a.detail.i][0],c[a.detail.i][1]]}switch(a.type){case"lt":this.calc=function(a,b){var c=this.snapToGrid(a,b);this.parameters.box.width-c[0]>0&&this.parameters.box.height-c[1]>0&&this.el.move(this.parameters.box.x+c[0],this.parameters.box.y+c[1]).size(this.parameters.box.width-c[0],this.parameters.box.height-c[1])};break;case"rt":this.calc=function(a,b){var c=this.snapToGrid(a,b,2);this.parameters.box.width+c[0]>0&&this.parameters.box.height-c[1]>0&&this.el.move(this.parameters.box.x,this.parameters.box.y+c[1]).size(this.parameters.box.width+c[0],this.parameters.box.height-c[1])};break;case"rb":this.calc=function(a,b){var c=this.snapToGrid(a,b,0);this.parameters.box.width+c[0]>0&&this.parameters.box.height+c[1]>0&&this.el.move(this.parameters.box.x,this.parameters.box.y).size(this.parameters.box.width+c[0],this.parameters.box.height+c[1])};break;case"lb":this.calc=function(a,b){var c=this.snapToGrid(a,b,1);this.parameters.box.width-c[0]>0&&this.parameters.box.height+c[1]>0&&this.el.move(this.parameters.box.x+c[0],this.parameters.box.y).size(this.parameters.box.width-c[0],this.parameters.box.height+c[1])};break;case"t":this.calc=function(a,b){var c=this.snapToGrid(a,b,2);this.parameters.box.height-c[1]>0&&this.el.move(this.parameters.box.x,this.parameters.box.y+c[1]).height(this.parameters.box.height-c[1])};break;case"r":this.calc=function(a,b){var c=this.snapToGrid(a,b,0);this.parameters.box.width+c[0]>0&&this.el.move(this.parameters.box.x,this.parameters.box.y).width(this.parameters.box.width+c[0])};break;case"b":this.calc=function(a,b){var c=this.snapToGrid(a,b,0);this.parameters.box.height+c[1]>0&&this.el.move(this.parameters.box.x,this.parameters.box.y).height(this.parameters.box.height+c[1])};break;case"l":this.calc=function(a,b){var c=this.snapToGrid(a,b,1);this.parameters.box.width-c[0]>0&&this.el.move(this.parameters.box.x+c[0],this.parameters.box.y).width(this.parameters.box.width-c[0])};break;case"rot":this.calc=function(a,b){var c={x:a+this.parameters.x,y:b+this.parameters.y},d=Math.atan2(this.parameters.y-this.parameters.rbox.cy,this.parameters.x-this.parameters.rbox.cx),e=Math.atan2(c.y-this.parameters.rbox.cy,c.x-this.parameters.rbox.cx),f=180*(e-d)/Math.PI;this.el.center(this.parameters.rbox.cx-2,this.parameters.rbox.cy-1.5).transform({rotation:this.parameters.rotation+f-f%this.options.snapToAngle,cx:this.parameters.rbox.cx,cy:this.parameters.rbox.cy})};break;case"point":this.calc=function(a,b){var c=this.snapToGrid(a,b,this.parameters.pointCoords[0],this.parameters.pointCoords[1]),d="line"===this.el.type?[{x1:this.parameters.pointCoords[0]+c[0],y1:this.parameters.pointCoords[1]+c[1]},{x2:this.parameters.pointCoords[0]+c[0],y2:this.parameters.pointCoords[1]+c[1]}]:this.el.array.value;return"line"===this.el.type?void this.el.attr(d[this.parameters.i]):(d[this.parameters.i][0]=this.parameters.pointCoords[0]+c[0],d[this.parameters.i][1]=this.parameters.pointCoords[1]+c[1],void this.el.plot(d))}}SVG.on(window,"mousemove.resize",function(a){b.update(a||window.event)}),SVG.on(window,"mouseup.resize",function(){b.done()})},a.prototype.update=function(a){if(!a)return void(this.lastUpdateCall&&this.calc(this.lastUpdateCall[0],this.lastUpdateCall[1]));var b=a.pageX-this.parameters.x,c=a.pageY-this.parameters.y;this.lastUpdateCall=[b,c],this.calc(b,c)},a.prototype.done=function(){this.lastUpdateCall=null,SVG.off(window,"mousemove.resize"),SVG.off(window,"mouseup.resize"),this.el.fire("resizedone")},a.prototype.snapToGrid=function(a,b,c,d){var e;return d?e=[(c+a)%this.options.snapToGrid,(d+b)%this.options.snapToGrid]:(c=null==c?3:c,e=[(this.parameters.box.x+a+(1&c?0:this.parameters.box.width))%this.options.snapToGrid,(this.parameters.box.y+b+(2&c?0:this.parameters.box.height))%this.options.snapToGrid]),a-=(Math.abs(e[0])<this.options.snapToGrid/2?e[0]:e[0]-this.options.snapToGrid)+(e[0]<0?this.options.snapToGrid:0),b-=(Math.abs(e[1])<this.options.snapToGrid/2?e[1]:e[1]-this.options.snapToGrid)+(e[1]<0?this.options.snapToGrid:0),[a,b]},SVG.extend(SVG.Element,{resize:function(b){return(this.remember("_resizeHandler")||new a(this)).init(b||{}),this}}),SVG.Element.prototype.resize.defaults={snapToAngle:.1,snapToGrid:1}}).call(this); | ||
| (function(){function a(a){var b=0,c=0;if("doc"in a){var d=a.bbox();b=d.x,c=d.y,a=a.doc().parent()}for(;"BODY"!==a.nodeName.toUpperCase();)b+=a.offsetLeft,c+=a.offsetTop,a=a.offsetParent;return{x:b,y:c}}function b(a){a.remember("_resizeHandler",this),this.el=a,this.parameters={},this.lastUpdateCall=null}b.prototype.init=function(a){var b=this;if(this.stop(),"stop"!==a){this.options={};for(var c in this.el.resize.defaults)this.options[c]=this.el.resize.defaults[c],"undefined"!=typeof a[c]&&(this.options[c]=a[c]);this.el.on("lt.resize",function(a){b.resize(a||window.event)}),this.el.on("rt.resize",function(a){b.resize(a||window.event)}),this.el.on("rb.resize",function(a){b.resize(a||window.event)}),this.el.on("lb.resize",function(a){b.resize(a||window.event)}),this.el.on("t.resize",function(a){b.resize(a||window.event)}),this.el.on("r.resize",function(a){b.resize(a||window.event)}),this.el.on("b.resize",function(a){b.resize(a||window.event)}),this.el.on("l.resize",function(a){b.resize(a||window.event)}),this.el.on("rot.resize",function(a){b.resize(a||window.event)}),this.el.on("point.resize",function(a){b.resize(a||window.event)}),this.update()}},b.prototype.stop=function(){return this.el.off("lt.resize"),this.el.off("rt.resize"),this.el.off("rb.resize"),this.el.off("lb.resize"),this.el.off("t.resize"),this.el.off("r.resize"),this.el.off("b.resize"),this.el.off("l.resize"),this.el.off("rot.resize"),this.el.off("point.resize"),this},b.prototype.resize=function(b){var c=this;if(this.parameters={x:b.detail.x,y:b.detail.y,box:this.el.bbox(),rbox:this.el.rbox(),rotation:this.el.transform().rotation},void 0!==b.detail.i){var d=this.el.array().valueOf();this.parameters.i=b.detail.i,this.parameters.pointCoords=[d[b.detail.i][0],d[b.detail.i][1]]}switch(b.type){case"lt":this.calc=function(a,b){var c=this.snapToGrid(a,b);this.parameters.box.width-c[0]>0&&this.parameters.box.height-c[1]>0&&this.el.move(this.parameters.box.x+c[0],this.parameters.box.y+c[1]).size(this.parameters.box.width-c[0],this.parameters.box.height-c[1])};break;case"rt":this.calc=function(a,b){var c=this.snapToGrid(a,b,2);this.parameters.box.width+c[0]>0&&this.parameters.box.height-c[1]>0&&this.el.move(this.parameters.box.x,this.parameters.box.y+c[1]).size(this.parameters.box.width+c[0],this.parameters.box.height-c[1])};break;case"rb":this.calc=function(a,b){var c=this.snapToGrid(a,b,0);this.parameters.box.width+c[0]>0&&this.parameters.box.height+c[1]>0&&this.el.move(this.parameters.box.x,this.parameters.box.y).size(this.parameters.box.width+c[0],this.parameters.box.height+c[1])};break;case"lb":this.calc=function(a,b){var c=this.snapToGrid(a,b,1);this.parameters.box.width-c[0]>0&&this.parameters.box.height+c[1]>0&&this.el.move(this.parameters.box.x+c[0],this.parameters.box.y).size(this.parameters.box.width-c[0],this.parameters.box.height+c[1])};break;case"t":this.calc=function(a,b){var c=this.snapToGrid(a,b,2);this.parameters.box.height-c[1]>0&&this.el.move(this.parameters.box.x,this.parameters.box.y+c[1]).height(this.parameters.box.height-c[1])};break;case"r":this.calc=function(a,b){var c=this.snapToGrid(a,b,0);this.parameters.box.width+c[0]>0&&this.el.move(this.parameters.box.x,this.parameters.box.y).width(this.parameters.box.width+c[0])};break;case"b":this.calc=function(a,b){var c=this.snapToGrid(a,b,0);this.parameters.box.height+c[1]>0&&this.el.move(this.parameters.box.x,this.parameters.box.y).height(this.parameters.box.height+c[1])};break;case"l":this.calc=function(a,b){var c=this.snapToGrid(a,b,1);this.parameters.box.width-c[0]>0&&this.el.move(this.parameters.box.x+c[0],this.parameters.box.y).width(this.parameters.box.width-c[0])};break;case"rot":this.calc=function(b,c){var d={x:b+this.parameters.x,y:c+this.parameters.y},e=a(this.el),f=Math.atan2(this.parameters.y-e.y-this.parameters.rbox.height/2,this.parameters.x-e.x-this.parameters.rbox.width/2),g=Math.atan2(d.y-e.y-this.parameters.rbox.height/2,d.x-e.x-this.parameters.rbox.width/2),h=180*(g-f)/Math.PI;this.el.center(this.parameters.rbox.cx-.5,this.parameters.rbox.cy-1).rotate(this.parameters.rotation+h-h%this.options.snapToAngle,this.parameters.rbox.cx,this.parameters.rbox.cy)};break;case"point":this.calc=function(a,b){var c=this.snapToGrid(a,b,this.parameters.pointCoords[0],this.parameters.pointCoords[1]),d=this.el.array().valueOf();return"line"===this.el.type?void this.el.attr(d[this.parameters.i]):(d[this.parameters.i][0]=this.parameters.pointCoords[0]+c[0],d[this.parameters.i][1]=this.parameters.pointCoords[1]+c[1],void this.el.plot(d))}}SVG.on(window,"mousemove.resize",function(a){c.update(a||window.event)}),SVG.on(window,"mouseup.resize",function(){c.done()})},b.prototype.update=function(a){if(!a)return void(this.lastUpdateCall&&this.calc(this.lastUpdateCall[0],this.lastUpdateCall[1]));var b=a.pageX-this.parameters.x,c=a.pageY-this.parameters.y;this.lastUpdateCall=[b,c],this.calc(b,c)},b.prototype.done=function(){this.lastUpdateCall=null,SVG.off(window,"mousemove.resize"),SVG.off(window,"mouseup.resize"),this.el.fire("resizedone")},b.prototype.snapToGrid=function(a,b,c,d){var e;return d?e=[(c+a)%this.options.snapToGrid,(d+b)%this.options.snapToGrid]:(c=null==c?3:c,e=[(this.parameters.box.x+a+(1&c?0:this.parameters.box.width))%this.options.snapToGrid,(this.parameters.box.y+b+(2&c?0:this.parameters.box.height))%this.options.snapToGrid]),a-=(Math.abs(e[0])<this.options.snapToGrid/2?e[0]:e[0]-this.options.snapToGrid)+(e[0]<0?this.options.snapToGrid:0),b-=(Math.abs(e[1])<this.options.snapToGrid/2?e[1]:e[1]-this.options.snapToGrid)+(e[1]<0?this.options.snapToGrid:0),[a,b]},SVG.extend(SVG.Element,{resize:function(a){return(this.remember("_resizeHandler")||new b(this)).init(a||{}),this}}),SVG.Element.prototype.resize.defaults={snapToAngle:.1,snapToGrid:1}}).call(this); |
| { | ||
| "name": "svg.resize.js", | ||
| "version": "1.0.0", | ||
| "version": "1.0.1", | ||
| "description": "An extension for svn.js which allows to resize elements which are selected", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -43,3 +43,7 @@ svg.resize.js | ||
| - snapToGrid: Snaps the shape to a virtual grid while resizing (default `1`) | ||
| - snapToAngle: Snaps to an angle when rotating (default `0.1`) | ||
| - `snapToGrid`: Snaps the shape to a virtual grid while resizing (default `1`) | ||
| - `snapToAngle`: Snaps to an angle when rotating (default `0.1`) | ||
| # Events | ||
| - `resizedone`: Fired when resizing is done |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by1.5%
271
- Number of lines in readme file
- increased by9.09%
48
Worsened metrics
- Total package byte prevSize
- decreased by-0.92%
24125
No dependency changes