svg.resize.js - npm Package Compare versions

Comparing version 1.2.0 to 1.4.0

dist/svg.resize.js

@@ -1,2 +0,2 @@
-/*! svg.resize.js - v1.1.1 - 2016-03-07
+/*! svg.resize.js - v1.4.0 - 2016-09-15
 * https://github.com/Fuzzyma/svg.resize.js
@@ -25,2 +25,11 @@ * Copyright (c) 2016 Ulrich-Matthias Schäfer; Licensed MIT */
 
+    ResizeHandler.prototype._extractPosition = function(event) {
+        // Extract a position from a mouse/touch event.
+        // Returns { x: .., y: .. }
+        return {
+            x: event.clientX || event.touches[0].pageX,
+            y: event.clientY || event.touches[0].pageY
+        };
+    };
+
     ResizeHandler.prototype.init = function (options) {
@@ -91,5 +100,6 @@
 
+        var txPt = this._extractPosition(event.detail.event);
         this.parameters = {
             type: this.el.type, // the type of element
-            p: this.transformPoint(event.detail.event.clientX,event.detail.event.clientY),
+            p: this.transformPoint(txPt.x, txPt.y),
             x: event.detail.x,      // x-position of the mouse when resizing started
@@ -131,3 +141,3 @@ y: event.detail.y,      // y-position of the mouse when resizing started
                         // ...if valid, we resize the this.el (which can include moving because the coord-system starts at the left-top and this edge is moving sometimes when resized)
-                    
+
                         /*
@@ -137,3 +147,3 @@ * but first check if the element is text box, so we can change the font size instead of
                          */
-                        
+
                         if (this.parameters.type === "text") {
@@ -143,3 +153,3 @@ this.el.move(this.parameters.box.x + snap[0], this.parameters.box.y);
                             return;
-                        }                    
+                        }
 
@@ -257,3 +267,3 @@ this.el.move(this.parameters.box.x + snap[0], this.parameters.box.y + snap[1]).size(this.parameters.box.width - snap[0], this.parameters.box.height - snap[1]);
                         }
-                        
+
                         this.el.move(this.parameters.box.x + snap[0], this.parameters.box.y).width(this.parameters.box.width - snap[0]);
@@ -274,3 +284,3 @@ }
                     var sAngle = Math.atan2((this.parameters.p.y - this.parameters.box.y - this.parameters.box.height / 2), (this.parameters.p.x - this.parameters.box.x - this.parameters.box.width / 2));
-                    
+
                     // end minus middle
@@ -307,9 +317,18 @@ var pAngle = Math.atan2((current.y - this.parameters.box.y - this.parameters.box.height / 2), (current.x - this.parameters.box.x - this.parameters.box.width / 2));
 
+        this.el.fire('resizestart', {dx: this.parameters.x, dy: this.parameters.y, event: event});
         // When resizing started, we have to register events for...
+        // Touches.
+        SVG.on(window, 'touchmove.resize', function(e) {
+            _this.update(e || window.event);
+        });
+        SVG.on(window, 'touchend.resize', function() {
+            _this.done();
+        });
+        // Mouse.
         SVG.on(window, 'mousemove.resize', function (e) {
             _this.update(e || window.event);
-        });    // mousemove to keep track of the changes and...
+        });
         SVG.on(window, 'mouseup.resize', function () {
             _this.done();
-        });        // mouseup to know when resizing stops
+        });
 
@@ -329,3 +348,5 @@ };
         // Calculate the difference between the mouseposition at start and now
-        var p = this.transformPoint(event.clientX, event.clientY);
+        var txPt = this._extractPosition(event);
+        var p = this.transformPoint(txPt.x, txPt.y);
+
         var diffX = p.x - this.parameters.p.x,
@@ -338,2 +359,5 @@ diffY = p.y - this.parameters.p.y;
         this.calc(diffX, diffY);
+
+       // Emit an event to say we have changed.
+        this.el.fire('resizing', {dx: diffX, dy: diffY, event: event});
     };
@@ -347,2 +371,4 @@
         SVG.off(window, 'mouseup.resize');
+        SVG.off(window, 'touchmove.resize');
+        SVG.off(window, 'touchend.resize');
         this.el.fire('resizedone');
@@ -358,3 +384,3 @@ };
         // If `pointCoordsY` is given, a single Point has to be snapped (deepSelect). That's why we need a different temp-value
-        if (pointCoordsY) {
+        if (typeof pointCoordsY !== 'undefined') {
             // Note that flag = pointCoordsX in this case
@@ -368,8 +394,47 @@ temp = [(flag + diffX) % this.options.snapToGrid, (pointCoordsY + diffY) % this.options.snapToGrid];
 
-        diffX -= (Math.abs(temp[0]) < this.options.snapToGrid / 2 ? temp[0] : temp[0] - this.options.snapToGrid) + (temp[0] < 0 ? this.options.snapToGrid : 0);
-        diffY -= (Math.abs(temp[1]) < this.options.snapToGrid / 2 ? temp[1] : temp[1] - this.options.snapToGrid) + (temp[1] < 0 ? this.options.snapToGrid : 0);
-        return [diffX, diffY];
 
+        diffX -= (Math.abs(temp[0]) < this.options.snapToGrid / 2 ?
+                  temp[0] :
+                  temp[0] - (diffX < 0 ? -this.options.snapToGrid : this.options.snapToGrid));
+        diffY -= (Math.abs(temp[1]) < this.options.snapToGrid / 2 ?
+                  temp[1] :
+                  temp[1] - (diffY < 0 ? -this.options.snapToGrid : this.options.snapToGrid));
+
+        return this.constraintToBox(diffX, diffY, flag, pointCoordsY);
+
     };
 
+    // keep element within constrained box
+    ResizeHandler.prototype.constraintToBox = function (diffX, diffY, flag, pointCoordsY) {
+        //return [diffX, diffY]
+        var c = this.options.constraint || {};
+        var orgX, orgY;
+
+        if (typeof pointCoordsY !== 'undefined') {
+          orgX = flag;
+          orgY = pointCoordsY;
+        } else {
+          orgX = this.parameters.box.x + (flag & 1 ? 0 : this.parameters.box.width);
+          orgY = this.parameters.box.y + (flag & (1<<1) ? 0 : this.parameters.box.height);
+        }
+
+        if (typeof c.minX !== 'undefined' && orgX + diffX < c.minX) {
+          diffX = c.minX - orgX;
+        }
+
+        if (typeof c.maxX !== 'undefined' && orgX + diffX > c.maxX) {
+          diffX = c.maxX - orgX;
+        }
+
+        if (typeof c.minY !== 'undefined' && orgY + diffY < c.minY) {
+          diffY = c.minY - orgY;
+        }
+
+        if (typeof c.maxY !== 'undefined' && orgY + diffY > c.maxY) {
+          diffY = c.maxY - orgY;
+        }
+
+        return [diffX, diffY];
+    };
+
     SVG.extend(SVG.Element, {
@@ -389,5 +454,6 @@ // Resize element with mouse
         snapToAngle: 0.1,    // Specifies the speed the rotation is happening when moving the mouse
-        snapToGrid: 1        // Snaps to a grid of `snapToGrid` Pixels
+        snapToGrid: 1,       // Snaps to a grid of `snapToGrid` Pixels
+        constraint: {}       // keep element within constrained box
     };
 
 }).call(this);

dist/svg.resize.min.js

@@ -1,4 +0,4 @@
-/*! svg.resize.js - v1.1.1 - 2016-03-07
+/*! svg.resize.js - v1.4.0 - 2016-09-15
 * https://github.com/Fuzzyma/svg.resize.js
 * Copyright (c) 2016 Ulrich-Matthias Schäfer; Licensed MIT */
-(function(){function a(a){a.remember("_resizeHandler",this),this.el=a,this.parameters={},this.lastUpdateCall=null,this.p=a.doc().node.createSVGPoint()}a.prototype.transformPoint=function(a,b,c){return this.p.x=a-(this.offset.x-window.pageXOffset),this.p.y=b-(this.offset.y-window.pageYOffset),this.p.matrixTransform(c||this.m)},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.m=this.el.node.getScreenCTM().inverse(),this.offset={x:window.pageXOffset,y:window.pageYOffset},this.parameters={type:this.el.type,p:this.transformPoint(a.detail.event.clientX,a.detail.event.clientY),x:a.detail.x,y:a.detail.y,box:this.el.bbox(),rotation:this.el.transform().rotation},"text"===this.el.type&&(this.parameters.fontSize=this.el.attr()["font-size"]),void 0!==a.detail.i){var c=this.el.array().valueOf();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);if(this.parameters.box.width-c[0]>0&&this.parameters.box.height-c[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x+c[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize-c[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);if(this.parameters.box.width+c[0]>0&&this.parameters.box.height-c[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x-c[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize+c[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);if(this.parameters.box.width+c[0]>0&&this.parameters.box.height+c[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x-c[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize+c[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);if(this.parameters.box.width-c[0]>0&&this.parameters.box.height+c[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x+c[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize-c[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);if(this.parameters.box.height-c[1]>0){if("text"===this.parameters.type)return;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);if(this.parameters.box.width+c[0]>0){if("text"===this.parameters.type)return;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);if(this.parameters.box.height+c[1]>0){if("text"===this.parameters.type)return;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);if(this.parameters.box.width-c[0]>0){if("text"===this.parameters.type)return;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.p.x,y:b+this.parameters.p.y},d=Math.atan2(this.parameters.p.y-this.parameters.box.y-this.parameters.box.height/2,this.parameters.p.x-this.parameters.box.x-this.parameters.box.width/2),e=Math.atan2(c.y-this.parameters.box.y-this.parameters.box.height/2,c.x-this.parameters.box.x-this.parameters.box.width/2),f=180*(e-d)/Math.PI;this.el.center(this.parameters.box.cx,this.parameters.box.cy).rotate(this.parameters.rotation+f-f%this.options.snapToAngle,this.parameters.box.cx,this.parameters.box.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();d[this.parameters.i][0]=this.parameters.pointCoords[0]+c[0],d[this.parameters.i][1]=this.parameters.pointCoords[1]+c[1],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=this.transformPoint(a.clientX,a.clientY),c=b.x-this.parameters.p.x,d=b.y-this.parameters.p.y;this.lastUpdateCall=[c,d],this.calc(c,d)},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){a.remember("_resizeHandler",this),this.el=a,this.parameters={},this.lastUpdateCall=null,this.p=a.doc().node.createSVGPoint()}a.prototype.transformPoint=function(a,b,c){return this.p.x=a-(this.offset.x-window.pageXOffset),this.p.y=b-(this.offset.y-window.pageYOffset),this.p.matrixTransform(c||this.m)},a.prototype._extractPosition=function(a){return{x:a.clientX||a.touches[0].pageX,y:a.clientY||a.touches[0].pageY}},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;this.m=this.el.node.getScreenCTM().inverse(),this.offset={x:window.pageXOffset,y:window.pageYOffset};var c=this._extractPosition(a.detail.event);if(this.parameters={type:this.el.type,p:this.transformPoint(c.x,c.y),x:a.detail.x,y:a.detail.y,box:this.el.bbox(),rotation:this.el.transform().rotation},"text"===this.el.type&&(this.parameters.fontSize=this.el.attr()["font-size"]),void 0!==a.detail.i){var d=this.el.array().valueOf();this.parameters.i=a.detail.i,this.parameters.pointCoords=[d[a.detail.i][0],d[a.detail.i][1]]}switch(a.type){case"lt":this.calc=function(a,b){var c=this.snapToGrid(a,b);if(this.parameters.box.width-c[0]>0&&this.parameters.box.height-c[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x+c[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize-c[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);if(this.parameters.box.width+c[0]>0&&this.parameters.box.height-c[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x-c[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize+c[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);if(this.parameters.box.width+c[0]>0&&this.parameters.box.height+c[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x-c[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize+c[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);if(this.parameters.box.width-c[0]>0&&this.parameters.box.height+c[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x+c[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize-c[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);if(this.parameters.box.height-c[1]>0){if("text"===this.parameters.type)return;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);if(this.parameters.box.width+c[0]>0){if("text"===this.parameters.type)return;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);if(this.parameters.box.height+c[1]>0){if("text"===this.parameters.type)return;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);if(this.parameters.box.width-c[0]>0){if("text"===this.parameters.type)return;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.p.x,y:b+this.parameters.p.y},d=Math.atan2(this.parameters.p.y-this.parameters.box.y-this.parameters.box.height/2,this.parameters.p.x-this.parameters.box.x-this.parameters.box.width/2),e=Math.atan2(c.y-this.parameters.box.y-this.parameters.box.height/2,c.x-this.parameters.box.x-this.parameters.box.width/2),f=180*(e-d)/Math.PI;this.el.center(this.parameters.box.cx,this.parameters.box.cy).rotate(this.parameters.rotation+f-f%this.options.snapToAngle,this.parameters.box.cx,this.parameters.box.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();d[this.parameters.i][0]=this.parameters.pointCoords[0]+c[0],d[this.parameters.i][1]=this.parameters.pointCoords[1]+c[1],this.el.plot(d)}}this.el.fire("resizestart",{dx:this.parameters.x,dy:this.parameters.y,event:a}),SVG.on(window,"touchmove.resize",function(a){b.update(a||window.event)}),SVG.on(window,"touchend.resize",function(){b.done()}),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=this._extractPosition(a),c=this.transformPoint(b.x,b.y),d=c.x-this.parameters.p.x,e=c.y-this.parameters.p.y;this.lastUpdateCall=[d,e],this.calc(d,e),this.el.fire("resizing",{dx:d,dy:e,event:a})},a.prototype.done=function(){this.lastUpdateCall=null,SVG.off(window,"mousemove.resize"),SVG.off(window,"mouseup.resize"),SVG.off(window,"touchmove.resize"),SVG.off(window,"touchend.resize"),this.el.fire("resizedone")},a.prototype.snapToGrid=function(a,b,c,d){var e;return"undefined"!=typeof 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]-(0>a?-this.options.snapToGrid:this.options.snapToGrid),b-=Math.abs(e[1])<this.options.snapToGrid/2?e[1]:e[1]-(0>b?-this.options.snapToGrid:this.options.snapToGrid),this.constraintToBox(a,b,c,d)},a.prototype.constraintToBox=function(a,b,c,d){var e,f,g=this.options.constraint||{};return"undefined"!=typeof d?(e=c,f=d):(e=this.parameters.box.x+(1&c?0:this.parameters.box.width),f=this.parameters.box.y+(2&c?0:this.parameters.box.height)),"undefined"!=typeof g.minX&&e+a<g.minX&&(a=g.minX-e),"undefined"!=typeof g.maxX&&e+a>g.maxX&&(a=g.maxX-e),"undefined"!=typeof g.minY&&f+b<g.minY&&(b=g.minY-f),"undefined"!=typeof g.maxY&&f+b>g.maxY&&(b=g.maxY-f),[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,constraint:{}}}).call(this);

package.json

 {
   "name": "svg.resize.js",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "An extension for svn.js which allows to resize elements which are selected",
@@ -5,0 +5,0 @@ "keywords": [

README.md

 svg.resize.js
 =============
 
-An extension of [svg.js](https://github.com/wout/svg.js) which allows to resize elements which are selected with [svn.select.js](https://github.com/Fuzzyma/svg.select.js)
+An extension of [svg.js](https://github.com/wout/svg.js) which allows to resize elements which are selected with [svg.select.js](https://github.com/Fuzzyma/svg.select.js)
 
@@ -27,3 +27,3 @@ # Demo
 		var drawing = new SVG('myDrawing').size(500, 500);
-		drawing.rect(50,50).select().resize()
+		drawing.rect(50,50).selectize().resize()
 
@@ -36,3 +36,3 @@ # Usage
 	var rect = draw.rect(100,100);
-    rect.select().resize();
+    rect.selectize().resize();
 
@@ -43,2 +43,17 @@ Deactivate resizing
 
+Keep element within constrained box
+
+	var draw = SVG('drawing');
+	var rect = draw.rect(100, 100);
+	var opt = {
+		constraint: {
+			minX: 0,
+			minY: 0,
+			maxX: 200,
+			maxY: 300
+		}
+	};
+	rect.selectize().resize(opt)
+
+
 # Options
@@ -48,5 +63,12 @@
 - `snapToAngle`: Snaps to an angle when rotating (default `0.1`)
+- `constraint`: Keep element within constrained box (see usage above); The box snaps to the grid defined by `snapToGrid`.
 
+
 # Events
 
-- `resizedone`: Fired when resizing is done
+- `resizing`: Fired when changes occur
+- `resizedone`: Fired when resizing is done
+
+# Known Issues
+
+- resize nested svgs does not work

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30724

increased by12.6%

Lines of code

353

increased by18.06%

Number of lines in readme file

71

increased by47.92%

No dependency changes