svg.select.js - npm Package Compare versions

Comparing version 2.1.2 to 3.0.0

dist/svg.select.js

 /*!
 * svg.select.js - An extension of svg.js which allows to select elements with mouse
-* @version 2.1.2
+* @version 3.0.0
 * https://github.com/svgdotjs/svg.select.js
@@ -19,2 +19,27 @@ *
 
+    // helper list with position settings of each type of point
+    this.pointsList = {
+      lt: [ 0, 0 ],
+      rt: [ 'width', 0 ],
+      rb: [ 'width', 'height' ],
+      lb: [ 0, 'height' ],
+      t: [ 'width / 2', 0 ],
+      r: [ 'width', 'height / 2' ],
+      b: [ 'width / 2', 'height' ],
+      l: [ 0, 'height / 2' ]
+    };
+
+    // helper function to evaluate point coordinates based on settings above and an object (bbox in our case)
+    this.pointCoord = function (setting, object) {
+      return typeof setting !== 'string' ? setting : eval('object.' + setting)
+    }
+
+    this.pointCoords = function (point, object) {
+      var settings = this.pointsList[point];
+
+      return {
+        x: this.pointCoord(settings[0], object),
+        y: this.pointCoord(settings[1], object)
+      }
+    }
 }
@@ -27,2 +52,5 @@
 
+    // store defaults list of points in order to verify users config
+    var points = this.el.selectize.defaults.points;
+
     // Merging the defaults and the options-object together
@@ -36,2 +64,46 @@ for (var i in this.el.selectize.defaults) {
 
+    // prepare & validate list of points to be added (or excluded)
+    var pointsLists = ['points', 'pointsExclude'];
+
+    for (var i in pointsLists) {
+      var option = this.options[pointsLists[i]];
+
+      if (typeof option === 'string') {
+        if (option.length > 0) {
+          // if set as comma separated string list => convert it into an array
+          option = option.split(/\s*,\s*/i);
+        } else {
+          option = [];
+        }
+      } else if (typeof option === 'boolean' && pointsLists[i] === 'points') {
+        // this is not needed, but let's have it for legacy support
+        option = option ? points : [];
+      }
+
+      this.options[pointsLists[i]] = option;
+    }
+
+    // intersect correct all points options with users config (exclude unwanted points)
+    // ES5 -> NO arrow functions nor Array.includes()
+    this.options.points = [ points, this.options.points ].reduce(
+      function (a, b) {
+        return a.filter(
+          function (c) {
+            return b.indexOf(c) > -1;
+          }
+        )
+      }
+    );
+
+    // exclude pointsExclude, if wanted
+    this.options.points = [ this.options.points, this.options.pointsExclude ].reduce(
+      function (a, b) {
+        return a.filter(
+          function (c) {
+            return b.indexOf(c) < 0;
+          }
+        )
+      }
+    );
+
     this.parent = this.el.parent();
@@ -64,4 +136,4 @@ this.nested = (this.nested || this.parent.group());
     this.pointSelection.set = this.parent.set();
-    // draw the circles and mark the element as selected
-    this.drawCircles();
+    // draw the points and mark the element as selected
+    this.drawPoints();
 
@@ -81,4 +153,4 @@ return this;
 
-// The function to draw the circles
-SelectHandler.prototype.drawCircles = function () {
+// Draws a points
+SelectHandler.prototype.drawPoints = function () {
 
@@ -103,16 +175,43 @@ var _this = this, array = this.getPointArray();
         // add every point to the set
-        this.pointSelection.set.add(
-            // a circle with our css-classes and a touchstart-event which fires our event for moving points
-            this.nested.circle(this.options.radius)
-                .center(array[i][0], array[i][1])
-                .addClass(this.options.classPoints)
-                .addClass(this.options.classPoints + '_point')
-                .on('touchstart', curriedEvent)
-                .on('mousedown', curriedEvent)
-        );
+        // add css-classes and a touchstart-event which fires our event for moving points
+        var point = this.drawPoint(array[i][0], array[i][1])
+                        .addClass(this.options.classPoints)
+                        .addClass(this.options.classPoints + '_point')
+                        .on('touchstart', curriedEvent)
+                        .on('mousedown', curriedEvent)
+        this.pointSelection.set.add(point);
     }
+};
 
+// The function to draw single point
+SelectHandler.prototype.drawPoint = function (cx, cy) {
+    var pointType = this.options.pointType;
+
+    switch (pointType) {
+        case 'circle':
+            return this.drawCircle(cx, cy);
+        case 'rect':
+            return this.drawRect(cx, cy);
+        default:
+            if (typeof pointType === 'function') {
+                return pointType.call(this, cx, cy);
+            }
+
+            throw new Error('Unknown ' + pointType + ' point type!');
+    }
 };
 
-// every time a circle is moved, we have to update the positions of our circle
+// The function to draw the circle point
+SelectHandler.prototype.drawCircle = function (cx, cy) {
+    return this.nested.circle(this.options.pointSize)
+                      .center(cx, cy);
+};
+
+// The function to draw the rect point
+SelectHandler.prototype.drawRect = function (cx, cy) {
+    return this.nested.rect(this.options.pointSize, this.options.pointSize)
+                      .center(cx, cy);
+};
+
+// every time a point is moved, we have to update the positions of our point
 SelectHandler.prototype.updatePointSelection = function () {
@@ -130,3 +229,3 @@ var array = this.getPointArray();
 SelectHandler.prototype.updateRectSelection = function () {
-    var bbox = this.el.bbox();
+    var _this = this, bbox = this.el.bbox();
 
@@ -139,19 +238,14 @@ this.rectSelection.set.get(0).attr({
     // set.get(1) is always in the upper left corner. no need to move it
-    if (this.options.points) {
-        this.rectSelection.set.get(2).center(bbox.width, 0);
-        this.rectSelection.set.get(3).center(bbox.width, bbox.height);
-        this.rectSelection.set.get(4).center(0, bbox.height);
+    if (this.options.points.length) {
+      this.options.points.map(function (point, index) {
+        var coords = _this.pointCoords(point, bbox);
 
-        this.rectSelection.set.get(5).center(bbox.width / 2, 0);
-        this.rectSelection.set.get(6).center(bbox.width, bbox.height / 2);
-        this.rectSelection.set.get(7).center(bbox.width / 2, bbox.height);
-        this.rectSelection.set.get(8).center(0, bbox.height / 2);
+        _this.rectSelection.set.get(index + 1).center(coords.x, coords.y);
+      });
     }
 
     if (this.options.rotationPoint) {
-        if (this.options.points) {
-            this.rectSelection.set.get(9).center(bbox.width / 2, 20);
-        } else {
-            this.rectSelection.set.get(1).center(bbox.width / 2, 20);
-        }
+        var length = this.rectSelection.set.length();
+
+        this.rectSelection.set.get(length - 1).center(bbox.width / 2, 20);
     }
@@ -188,14 +282,15 @@ };
     // Draw Points at the edges, if enabled
-    if (this.options.points && !this.rectSelection.set.get(1)) {
+    if (this.options.points.length && this.rectSelection.set.length() < 2) {
         var ename ="touchstart", mname = "mousedown";
-        this.rectSelection.set.add(this.nested.circle(this.options.radius).center(0, 0).attr('class', this.options.classPoints + '_lt').on(mname, getMoseDownFunc('lt')).on(ename, getMoseDownFunc('lt')));
-        this.rectSelection.set.add(this.nested.circle(this.options.radius).center(bbox.width, 0).attr('class', this.options.classPoints + '_rt').on(mname, getMoseDownFunc('rt')).on(ename, getMoseDownFunc('rt')));
-        this.rectSelection.set.add(this.nested.circle(this.options.radius).center(bbox.width, bbox.height).attr('class', this.options.classPoints + '_rb').on(mname, getMoseDownFunc('rb')).on(ename, getMoseDownFunc('rb')));
-        this.rectSelection.set.add(this.nested.circle(this.options.radius).center(0, bbox.height).attr('class', this.options.classPoints + '_lb').on(mname, getMoseDownFunc('lb')).on(ename, getMoseDownFunc('lb')));
 
-        this.rectSelection.set.add(this.nested.circle(this.options.radius).center(bbox.width / 2, 0).attr('class', this.options.classPoints + '_t').on(mname, getMoseDownFunc('t')).on(ename, getMoseDownFunc('t')));
-        this.rectSelection.set.add(this.nested.circle(this.options.radius).center(bbox.width, bbox.height / 2).attr('class', this.options.classPoints + '_r').on(mname, getMoseDownFunc('r')).on(ename, getMoseDownFunc('r')));
-        this.rectSelection.set.add(this.nested.circle(this.options.radius).center(bbox.width / 2, bbox.height).attr('class', this.options.classPoints + '_b').on(mname, getMoseDownFunc('b')).on(ename, getMoseDownFunc('b')));
-        this.rectSelection.set.add(this.nested.circle(this.options.radius).center(0, bbox.height / 2).attr('class', this.options.classPoints + '_l').on(mname, getMoseDownFunc('l')).on(ename, getMoseDownFunc('l')));
+        this.options.points.map(function (point, index) {
+            var coords = _this.pointCoords(point, bbox);
 
+            var pointElement = _this.drawPoint(coords.x, coords.y)
+                                    .attr('class', _this.options.classPoints + '_' + point)
+                                    .on(mname, getMoseDownFunc(point))
+                                    .on(ename, getMoseDownFunc(point));
+            _this.rectSelection.set.add(pointElement);
+        });
+
         this.rectSelection.set.each(function () {
@@ -218,5 +313,8 @@ this.addClass(_this.options.classPoints);
         };
-        this.rectSelection.set.add(this.nested.circle(this.options.radius).center(bbox.width / 2, 20).attr('class', this.options.classPoints + '_rot')
-            .on("touchstart", curriedEvent).on("mousedown", curriedEvent));
 
+        var pointElement = this.drawPoint(bbox.width / 2, 20)
+                              .attr('class', this.options.classPoints + '_rot')
+                              .on("touchstart", curriedEvent)
+                              .on("mousedown", curriedEvent);
+        this.rectSelection.set.add(pointElement);
     }
@@ -320,9 +418,11 @@
 SVG.Element.prototype.selectize.defaults = {
-    points: true,                            // If true, points at the edges are drawn. Needed for resize!
+    points: ['lt', 'rt', 'rb', 'lb', 't', 'r', 'b', 'l'],    // which points to draw, default all
+    pointsExclude: [],                       // easier option if to exclude few than rewrite all
     classRect: 'svg_select_boundingRect',    // Css-class added to the rect
     classPoints: 'svg_select_points',        // Css-class added to the points
-    radius: 7,                               // radius of the points
+    pointSize: 7,                            // size of point
     rotationPoint: true,                     // If true, rotation point is drawn. Needed for rotation!
-    deepSelect: false                        // If true, moving of single points is possible (only line, polyline, polyon)
+    deepSelect: false,                       // If true, moving of single points is possible (only line, polyline, polyon)
+    pointType: 'circle'                      // Point type: circle or rect, default circle
 };
 }());

dist/svg.select.min.js

@@ -1,1 +0,1 @@
-/*! svg.select.js v2.1.2 MIT*/;!function(){"use strict";function t(t){this.el=t,t.remember("_selectHandler",this),this.pointSelection={isSelected:!1},this.rectSelection={isSelected:!1}}t.prototype.init=function(t,e){var i=this.el.bbox();this.options={};for(var s in this.el.selectize.defaults)this.options[s]=this.el.selectize.defaults[s],void 0!==e[s]&&(this.options[s]=e[s]);this.parent=this.el.parent(),this.nested=this.nested||this.parent.group(),this.nested.matrix(new SVG.Matrix(this.el).translate(i.x,i.y)),this.options.deepSelect&&-1!==["line","polyline","polygon"].indexOf(this.el.type)?this.selectPoints(t):this.selectRect(t),this.observe(),this.cleanup()},t.prototype.selectPoints=function(t){return this.pointSelection.isSelected=t,this.pointSelection.set?this:(this.pointSelection.set=this.parent.set(),this.drawCircles(),this)},t.prototype.getPointArray=function(){var t=this.el.bbox();return this.el.array().valueOf().map(function(e){return[e[0]-t.x,e[1]-t.y]})},t.prototype.drawCircles=function(){for(var t=this,e=this.getPointArray(),i=0,s=e.length;i<s;++i){var n=function(e){return function(i){i=i||window.event,i.preventDefault?i.preventDefault():i.returnValue=!1,i.stopPropagation();var s=i.pageX||i.touches[0].pageX,n=i.pageY||i.touches[0].pageY;t.el.fire("point",{x:s,y:n,i:e,event:i})}}(i);this.pointSelection.set.add(this.nested.circle(this.options.radius).center(e[i][0],e[i][1]).addClass(this.options.classPoints).addClass(this.options.classPoints+"_point").on("touchstart",n).on("mousedown",n))}},t.prototype.updatePointSelection=function(){var t=this.getPointArray();this.pointSelection.set.each(function(e){this.cx()===t[e][0]&&this.cy()===t[e][1]||this.center(t[e][0],t[e][1])})},t.prototype.updateRectSelection=function(){var t=this.el.bbox();this.rectSelection.set.get(0).attr({width:t.width,height:t.height}),this.options.points&&(this.rectSelection.set.get(2).center(t.width,0),this.rectSelection.set.get(3).center(t.width,t.height),this.rectSelection.set.get(4).center(0,t.height),this.rectSelection.set.get(5).center(t.width/2,0),this.rectSelection.set.get(6).center(t.width,t.height/2),this.rectSelection.set.get(7).center(t.width/2,t.height),this.rectSelection.set.get(8).center(0,t.height/2)),this.options.rotationPoint&&(this.options.points?this.rectSelection.set.get(9).center(t.width/2,20):this.rectSelection.set.get(1).center(t.width/2,20))},t.prototype.selectRect=function(t){function e(t){return function(e){e=e||window.event,e.preventDefault?e.preventDefault():e.returnValue=!1,e.stopPropagation();var s=e.pageX||e.touches[0].pageX,n=e.pageY||e.touches[0].pageY;i.el.fire(t,{x:s,y:n,event:e})}}var i=this,s=this.el.bbox();if(this.rectSelection.isSelected=t,this.rectSelection.set=this.rectSelection.set||this.parent.set(),this.rectSelection.set.get(0)||this.rectSelection.set.add(this.nested.rect(s.width,s.height).addClass(this.options.classRect)),this.options.points&&!this.rectSelection.set.get(1)){var n="touchstart",o="mousedown";this.rectSelection.set.add(this.nested.circle(this.options.radius).center(0,0).attr("class",this.options.classPoints+"_lt").on(o,e("lt")).on(n,e("lt"))),this.rectSelection.set.add(this.nested.circle(this.options.radius).center(s.width,0).attr("class",this.options.classPoints+"_rt").on(o,e("rt")).on(n,e("rt"))),this.rectSelection.set.add(this.nested.circle(this.options.radius).center(s.width,s.height).attr("class",this.options.classPoints+"_rb").on(o,e("rb")).on(n,e("rb"))),this.rectSelection.set.add(this.nested.circle(this.options.radius).center(0,s.height).attr("class",this.options.classPoints+"_lb").on(o,e("lb")).on(n,e("lb"))),this.rectSelection.set.add(this.nested.circle(this.options.radius).center(s.width/2,0).attr("class",this.options.classPoints+"_t").on(o,e("t")).on(n,e("t"))),this.rectSelection.set.add(this.nested.circle(this.options.radius).center(s.width,s.height/2).attr("class",this.options.classPoints+"_r").on(o,e("r")).on(n,e("r"))),this.rectSelection.set.add(this.nested.circle(this.options.radius).center(s.width/2,s.height).attr("class",this.options.classPoints+"_b").on(o,e("b")).on(n,e("b"))),this.rectSelection.set.add(this.nested.circle(this.options.radius).center(0,s.height/2).attr("class",this.options.classPoints+"_l").on(o,e("l")).on(n,e("l"))),this.rectSelection.set.each(function(){this.addClass(i.options.classPoints)})}if(this.options.rotationPoint&&(this.options.points&&!this.rectSelection.set.get(9)||!this.options.points&&!this.rectSelection.set.get(1))){var c=function(t){t=t||window.event,t.preventDefault?t.preventDefault():t.returnValue=!1,t.stopPropagation();var e=t.pageX||t.touches[0].pageX,s=t.pageY||t.touches[0].pageY;i.el.fire("rot",{x:e,y:s,event:t})};this.rectSelection.set.add(this.nested.circle(this.options.radius).center(s.width/2,20).attr("class",this.options.classPoints+"_rot").on("touchstart",c).on("mousedown",c))}},t.prototype.handler=function(){var t=this.el.bbox();this.nested.matrix(new SVG.Matrix(this.el).translate(t.x,t.y)),this.rectSelection.isSelected&&this.updateRectSelection(),this.pointSelection.isSelected&&this.updatePointSelection()},t.prototype.observe=function(){var t=this;if(MutationObserver)if(this.rectSelection.isSelected||this.pointSelection.isSelected)this.observerInst=this.observerInst||new MutationObserver(function(){t.handler()}),this.observerInst.observe(this.el.node,{attributes:!0});else try{this.observerInst.disconnect(),delete this.observerInst}catch(t){}else this.el.off("DOMAttrModified.select"),(this.rectSelection.isSelected||this.pointSelection.isSelected)&&this.el.on("DOMAttrModified.select",function(){t.handler()})},t.prototype.cleanup=function(){!this.rectSelection.isSelected&&this.rectSelection.set&&(this.rectSelection.set.each(function(){this.remove()}),this.rectSelection.set.clear(),delete this.rectSelection.set),!this.pointSelection.isSelected&&this.pointSelection.set&&(this.pointSelection.set.each(function(){this.remove()}),this.pointSelection.set.clear(),delete this.pointSelection.set),this.pointSelection.isSelected||this.rectSelection.isSelected||(this.nested.remove(),delete this.nested)},SVG.extend(SVG.Element,{selectize:function(e,i){return"object"==typeof e&&(i=e,e=!0),(this.remember("_selectHandler")||new t(this)).init(void 0===e||e,i||{}),this}}),SVG.Element.prototype.selectize.defaults={points:!0,classRect:"svg_select_boundingRect",classPoints:"svg_select_points",radius:7,rotationPoint:!0,deepSelect:!1}}();
+/*! svg.select.js v3.0.0 MIT*/;!function(){"use strict";function SelectHandler(el){this.el=el,el.remember("_selectHandler",this),this.pointSelection={isSelected:!1},this.rectSelection={isSelected:!1},this.pointsList={lt:[0,0],rt:["width",0],rb:["width","height"],lb:[0,"height"],t:["width / 2",0],r:["width","height / 2"],b:["width / 2","height"],l:[0,"height / 2"]},this.pointCoord=function(setting,object){return"string"!=typeof setting?setting:eval("object."+setting)},this.pointCoords=function(t,e){var i=this.pointsList[t];return{x:this.pointCoord(i[0],e),y:this.pointCoord(i[1],e)}}}SelectHandler.prototype.init=function(t,e){var i=this.el.bbox();this.options={};var n=this.el.selectize.defaults.points;for(var s in this.el.selectize.defaults)this.options[s]=this.el.selectize.defaults[s],void 0!==e[s]&&(this.options[s]=e[s]);var o=["points","pointsExclude"];for(var s in o){var r=this.options[o[s]];"string"==typeof r?r=r.length>0?r.split(/\s*,\s*/i):[]:"boolean"==typeof r&&"points"===o[s]&&(r=r?n:[]),this.options[o[s]]=r}this.options.points=[n,this.options.points].reduce(function(t,e){return t.filter(function(t){return e.indexOf(t)>-1})}),this.options.points=[this.options.points,this.options.pointsExclude].reduce(function(t,e){return t.filter(function(t){return e.indexOf(t)<0})}),this.parent=this.el.parent(),this.nested=this.nested||this.parent.group(),this.nested.matrix(new SVG.Matrix(this.el).translate(i.x,i.y)),this.options.deepSelect&&-1!==["line","polyline","polygon"].indexOf(this.el.type)?this.selectPoints(t):this.selectRect(t),this.observe(),this.cleanup()},SelectHandler.prototype.selectPoints=function(t){return this.pointSelection.isSelected=t,this.pointSelection.set?this:(this.pointSelection.set=this.parent.set(),this.drawPoints(),this)},SelectHandler.prototype.getPointArray=function(){var t=this.el.bbox();return this.el.array().valueOf().map(function(e){return[e[0]-t.x,e[1]-t.y]})},SelectHandler.prototype.drawPoints=function(){for(var t=this,e=this.getPointArray(),i=0,n=e.length;i<n;++i){var s=function(e){return function(i){i=i||window.event,i.preventDefault?i.preventDefault():i.returnValue=!1,i.stopPropagation();var n=i.pageX||i.touches[0].pageX,s=i.pageY||i.touches[0].pageY;t.el.fire("point",{x:n,y:s,i:e,event:i})}}(i),o=this.drawPoint(e[i][0],e[i][1]).addClass(this.options.classPoints).addClass(this.options.classPoints+"_point").on("touchstart",s).on("mousedown",s);this.pointSelection.set.add(o)}},SelectHandler.prototype.drawPoint=function(t,e){var i=this.options.pointType;switch(i){case"circle":return this.drawCircle(t,e);case"rect":return this.drawRect(t,e);default:if("function"==typeof i)return i.call(this,t,e);throw new Error("Unknown "+i+" point type!")}},SelectHandler.prototype.drawCircle=function(t,e){return this.nested.circle(this.options.pointSize).center(t,e)},SelectHandler.prototype.drawRect=function(t,e){return this.nested.rect(this.options.pointSize,this.options.pointSize).center(t,e)},SelectHandler.prototype.updatePointSelection=function(){var t=this.getPointArray();this.pointSelection.set.each(function(e){this.cx()===t[e][0]&&this.cy()===t[e][1]||this.center(t[e][0],t[e][1])})},SelectHandler.prototype.updateRectSelection=function(){var t=this,e=this.el.bbox();if(this.rectSelection.set.get(0).attr({width:e.width,height:e.height}),this.options.points.length&&this.options.points.map(function(i,n){var s=t.pointCoords(i,e);t.rectSelection.set.get(n+1).center(s.x,s.y)}),this.options.rotationPoint){var i=this.rectSelection.set.length();this.rectSelection.set.get(i-1).center(e.width/2,20)}},SelectHandler.prototype.selectRect=function(t){function e(t){return function(e){e=e||window.event,e.preventDefault?e.preventDefault():e.returnValue=!1,e.stopPropagation();var n=e.pageX||e.touches[0].pageX,s=e.pageY||e.touches[0].pageY;i.el.fire(t,{x:n,y:s,event:e})}}var i=this,n=this.el.bbox();if(this.rectSelection.isSelected=t,this.rectSelection.set=this.rectSelection.set||this.parent.set(),this.rectSelection.set.get(0)||this.rectSelection.set.add(this.nested.rect(n.width,n.height).addClass(this.options.classRect)),this.options.points.length&&this.rectSelection.set.length()<2){this.options.points.map(function(t,s){var o=i.pointCoords(t,n),r=i.drawPoint(o.x,o.y).attr("class",i.options.classPoints+"_"+t).on("mousedown",e(t)).on("touchstart",e(t));i.rectSelection.set.add(r)}),this.rectSelection.set.each(function(){this.addClass(i.options.classPoints)})}if(this.options.rotationPoint&&(this.options.points&&!this.rectSelection.set.get(9)||!this.options.points&&!this.rectSelection.set.get(1))){var s=function(t){t=t||window.event,t.preventDefault?t.preventDefault():t.returnValue=!1,t.stopPropagation();var e=t.pageX||t.touches[0].pageX,n=t.pageY||t.touches[0].pageY;i.el.fire("rot",{x:e,y:n,event:t})},o=this.drawPoint(n.width/2,20).attr("class",this.options.classPoints+"_rot").on("touchstart",s).on("mousedown",s);this.rectSelection.set.add(o)}},SelectHandler.prototype.handler=function(){var t=this.el.bbox();this.nested.matrix(new SVG.Matrix(this.el).translate(t.x,t.y)),this.rectSelection.isSelected&&this.updateRectSelection(),this.pointSelection.isSelected&&this.updatePointSelection()},SelectHandler.prototype.observe=function(){var t=this;if(MutationObserver)if(this.rectSelection.isSelected||this.pointSelection.isSelected)this.observerInst=this.observerInst||new MutationObserver(function(){t.handler()}),this.observerInst.observe(this.el.node,{attributes:!0});else try{this.observerInst.disconnect(),delete this.observerInst}catch(t){}else this.el.off("DOMAttrModified.select"),(this.rectSelection.isSelected||this.pointSelection.isSelected)&&this.el.on("DOMAttrModified.select",function(){t.handler()})},SelectHandler.prototype.cleanup=function(){!this.rectSelection.isSelected&&this.rectSelection.set&&(this.rectSelection.set.each(function(){this.remove()}),this.rectSelection.set.clear(),delete this.rectSelection.set),!this.pointSelection.isSelected&&this.pointSelection.set&&(this.pointSelection.set.each(function(){this.remove()}),this.pointSelection.set.clear(),delete this.pointSelection.set),this.pointSelection.isSelected||this.rectSelection.isSelected||(this.nested.remove(),delete this.nested)},SVG.extend(SVG.Element,{selectize:function(t,e){return"object"==typeof t&&(e=t,t=!0),(this.remember("_selectHandler")||new SelectHandler(this)).init(void 0===t||t,e||{}),this}}),SVG.Element.prototype.selectize.defaults={points:["lt","rt","rb","lb","t","r","b","l"],pointsExclude:[],classRect:"svg_select_boundingRect",classPoints:"svg_select_points",pointSize:7,rotationPoint:!0,deepSelect:!1,pointType:"circle"}}();

package.json

 {
   "name": "svg.select.js",
-  "version": "2.1.2",
+  "version": "3.0.0",
   "description": "An extension of svg.js which allows to select elements with mouse",
@@ -21,2 +21,5 @@ "keywords": [
   ],
+  "scripts": {
+    "build": "gulp"
+  },
   "repository": {
@@ -30,6 +33,6 @@ "type": "git",
   "devDependencies": {
-    "del": "^2.2.2",
+    "del": "^3.0.0",
     "gulp": "^3.9.1",
-    "gulp-clean-css": "3.5.0",
-    "gulp-header": "^1.8.8",
+    "gulp-clean-css": "3.9.2",
+    "gulp-header": "^2.0.1",
     "gulp-iife": "^0.3.0",
@@ -39,3 +42,3 @@ "gulp-rename": "^1.2.2",
     "gulp-trimlines": "^1.0.1",
-    "gulp-uglify": "^2.1.2",
+    "gulp-uglify": "^3.0.0",
     "gulp-wrap-iife": "0.0.1"
@@ -42,0 +45,0 @@ },

README.md

@@ -48,3 +48,29 @@ svg.select.js
 
+You can specify which points to be drawn (default all will be drawn)
 
+The list can be an array of strings or a comma separated list / string, representing each position, in correspondence with the classes:
+
+* `lt` - left top
+* `rt` - right top
+* `rb` - right bottom
+* `lb` - left bottom
+* `t` - top
+* `r` - right
+* `b` - bottom
+* `l` - left
+
+Example of drawing only `top` and `right` points:
+
+    rect.selectize({
+      points: ['t', 'r'] // or 't, r'
+    })
+
+There is also an extra option called `pointsExclude` which can be a list of points to be excluded from the `points` list.
+
+So let's say that you need all the points except `top` and `right`:
+
+    rect.selectize({
+      pointsExclude: ['t', 'r'] // or 't, r'
+    })
+
 You can style the selection with the classes
@@ -68,7 +94,9 @@
 
-- points: Points should be drawn (default `true`)
+- points: Points should be drawn (default `['lt', 'rt', 'rb', 'lb', 't', 'r', 'b', 'l']`)
+- pointsExclude: Same as points option, only thing that this excludes listed points, you can use (default `[]`)
 - classRect: Classname of the rect from the bounding Box (default `svg_select_boundingRect`)
 - classPoints: Classname/Prefix of the Points (default `svg_select_points`)
-- radius: Radius of the points (default `7`)
+- pointSize: Size of the point. Radius for the `pointType: 'circle'` or size of a rect for `pointType: 'rect'` (default `7`)
 - rotationPoint: Draws the point for doing rotation (default `true`)
-- deepSelect: Only for polygon/polyline/line. Selects the points itself (default `false`)
+- deepSelect: Only for polygon/polyline/line. Selects the points itself (default `false`)
+- pointType: Type of a point, `circle` or `rect` or function (see functions for drawing [circle](src/svg.select.js#L188) or [rect](src/svg.select.js#L194) points) (default `circle`)

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

27019

increased by14.13%

Lines of code

370

increased by29.37%

Number of lines in readme file

100

increased by38.89%

No dependency changes