konva - npm Package Compare versions

Comparing version 2.1.8 to 2.2.0

CHANGELOG.md

@@ -8,5 +8,15 @@ # Change Log
 
+## [2.2.0][2018-08-10]
+
+### Added
+
+* New properties for `Konva.Transformer`: `borderStroke`, `borderStrokeWidth`, `borderDash`, `anchorStroke`, `anchorStrokeWidth`, `anchorSize`.
+
+### Changed
+
+* Some properties of `Konva.Transformer` are renamed. `lineEnabled` -> `borderEnabled`. `rotateHandlerOffset` -> `rotateAnchorOffset`, `enabledHandlers` -> `enabledAnchors`.
+
 ## [2.1.8][2018-08-01]
 
-## Fixed
+### Fixed
 
@@ -20,3 +30,3 @@ * Some `Konva.Transformer` fixes
 
-## Fixed
+### Fixed
 
@@ -27,3 +37,3 @@ * `toObject` fixes
 
-## Fixed
+### Fixed
 
@@ -34,3 +44,3 @@ * Some drag&drop fixes
 
-## Fixed
+### Fixed
 
@@ -42,3 +52,3 @@ * Removed wrong dep
 
-## Fixed
+### Fixed
 
@@ -50,3 +60,3 @@ * Typescript fixes
 
-## Fixed
+### Fixed
 
@@ -59,3 +69,3 @@ * Fixed `Konva.Text` justify drawing for a text with decoration
 
-## Fixed
+### Fixed
 
@@ -67,3 +77,3 @@ * `Konva.Transformer` automatically track shape changes
 
-## Fixed
+### Fixed
 
@@ -89,3 +99,3 @@ * Cursor fixes for `Konva.Transformer`
 
-## Fixed
+### Fixed
 
@@ -100,3 +110,3 @@ * some bugs fixes for `group.getClientRect()`
 
-## Fixed
+### Fixed
 
@@ -107,3 +117,3 @@ * Even more bugs fixes for `Konva.Transformer`
 
-## Fixed
+### Fixed
 
@@ -127,3 +137,3 @@ * Several bugs fixes for `Konva.Transformer`
 
-## Fixed
+### Fixed
 
@@ -141,3 +151,3 @@ * Some typescript fixes
 
-## Fixed
+### Fixed
 
@@ -148,3 +158,3 @@ * Some typescript fixes
 
-## Fixed
+### Fixed
 
@@ -151,0 +161,0 @@ * `isBrowser` detection for electron

konva.d.ts

@@ -959,2 +959,3 @@ declare namespace Konva {
     image: HTMLImageElement;
+    frameRate?: number;
   }
@@ -961,0 +962,0 @@

package.json

 {
   "name": "konva",
-  "version": "2.1.8",
+  "version": "2.2.0",
   "author": "Anton Lavrenov",
@@ -5,0 +5,0 @@ "files": [

README.md

@@ -26,3 +26,3 @@ <p align="center">
 ```html
-<script src="https://cdn.rawgit.com/konvajs/konva/2.1.8/konva.min.js"></script>
+<script src="https://cdn.rawgit.com/konvajs/konva/2.2.0/konva.min.js"></script>
 <div id="container"></div>
@@ -29,0 +29,0 @@ <script>

src/Factory.js

@@ -127,11 +127,19 @@ (function() {
         var method = constructor.prototype[newMethodName];
-        constructor.prototype[oldMethodName] = function() {
+        var oldGetter = GET + Konva.Util._capitalize(oldMethodName);
+        var oldSetter = SET + Konva.Util._capitalize(oldMethodName);
+
+        function deprecated() {
           method.apply(this, arguments);
           Konva.Util.error(
-            oldMethodName +
-              ' method is deprecated and will be removed soon. Use ' +
+            '"' +
+              oldMethodName +
+              '" method is deprecated and will be removed soon. Use ""' +
               newMethodName +
-              ' instead'
+              '" instead.'
           );
-        };
+        }
+
+        constructor.prototype[oldMethodName] = deprecated;
+        constructor.prototype[oldGetter] = deprecated;
+        constructor.prototype[oldSetter] = deprecated;
       });
@@ -138,0 +146,0 @@ },

src/shapes/Sprite.js

@@ -13,2 +13,3 @@ (function() {
    * @param {Image} config.image image object
+   * @param {Integer} [config.frameRate] animation frame rate
    * @@shapeParams
@@ -15,0 +16,0 @@ * @@nodeParams

src/shapes/Transformer.js

 (function(Konva) {
   'use strict';
 
-  var BASE_BOX_WIDTH = 10;
-  var BASE_BOX_HEIGHT = 10;
-
   var ATTR_CHANGE_LIST = [
     'resizeEnabledChange',
-    'rotateHandlerOffsetChange'
+    'rotateAnchorOffsetChange',
+    'enabledAnchorsChange',
+    'anchorSizeChange',
+    'borderEnabledChange',
+    'borderStrokeChange',
+    'borderStrokeWidthChange',
+    'anchorStrokeChange',
+    'anchorStrokeWidthChange'
   ].join(' ');
@@ -111,7 +115,13 @@
    * @param {Array} [config.rotationSnaps] Array of angles for rotation snaps. Default is []
-   * @param {Number} [config.rotateHandlerOffset] Default is 50
+   * @param {Number} [config.rotateAnchorOffset] Default is 50
    * @param {Number} [config.padding] Default is 0
-   * @param {Number} [config.lineEnabled] Should we draw border? Default is true
+   * @param {Number} [config.borderEnabled] Should we draw border? Default is true
+   * @param {String} [config.borderStroke] Border stroke color
+   * @param {Number} [config.borderStrokeWidth] Border stroke size
+   * @param {Array} [config.borderDash] Array for border dash.
+   * @param {Number} [config.anchorStroke] Anchor stroke color
+   * @param {Number} [config.anchorStrokeWidth] Anchor stroke size
+   * @param {Number} [config.anchorSize] Default is 10
    * @param {Boolean} [config.keepRatio] Should we keep ratio when we are moving edges? Default is true
-   * @param {Array} [config.enabledHandlers] Array of names of enabled handles
+   * @param {Array} [config.enabledAnchors] Array of names of enabled handles
    * @param {Function} [config.boundBoxFunc] Bounding box function
@@ -121,4 +131,4 @@ * @example
    *   node: rectangle,
-   *   rotateHandlerOffset: 60,
-   *   enabledHandlers: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
+   *   rotateAnchorOffset: 60,
+   *   enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
    * });
@@ -302,8 +312,5 @@ * layer.add(transformer);
         strokeWidth: 1,
-        name: name,
-        width: BASE_BOX_WIDTH,
-        height: BASE_BOX_HEIGHT,
-        offsetX: BASE_BOX_WIDTH / 2,
-        offsetY: BASE_BOX_HEIGHT / 2,
-        dragDistance: 0
+        name: name + ' _anchor',
+        dragDistance: 0,
+        draggable: true
       });
@@ -314,2 +321,5 @@ var self = this;
       });
+      anchor.on('dragstart', function(e) {
+        e.cancelBubble = true;
+      });
 
@@ -360,3 +370,2 @@ // add hover styling
       var back = new Konva.Shape({
-        stroke: 'rgb(0, 161, 255)',
         name: 'back',
@@ -380,3 +389,3 @@ width: 0,
               this.width() / 2,
-              -tr.rotateHandlerOffset() * Konva.Util._sign(this.height())
+              -tr.rotateAnchorOffset() * Konva.Util._sign(this.height())
             );
@@ -392,3 +401,3 @@ }
     _handleMouseDown: function(e) {
-      this.movingResizer = e.target.name();
+      this.movingResizer = e.target.name().split(' ')[0];
 
@@ -674,6 +683,17 @@ // var node = this.getNode();
 
-      var enabledHandlers = this.enabledHandlers();
+      var enabledAnchors = this.enabledAnchors();
       var resizeEnabled = this.resizeEnabled();
       var padding = this.getPadding();
 
+      var anchorSize = this.getAnchorSize();
+      this.find('._anchor').setAttrs({
+        width: anchorSize,
+        height: anchorSize,
+        offsetX: anchorSize / 2,
+        offsetY: anchorSize / 2,
+        stroke: this.getAnchorStroke(),
+        strokeWidth: this.getAnchorStrokeWidth(),
+        fill: this.getAnchorFill()
+      });
+
       this.findOne('.top-left').setAttrs({
@@ -683,3 +703,3 @@ x: -padding,
         scale: invertedScale,
-        visible: resizeEnabled && enabledHandlers.indexOf('top-left') >= 0
+        visible: resizeEnabled && enabledAnchors.indexOf('top-left') >= 0
       });
@@ -690,3 +710,3 @@ this.findOne('.top-center').setAttrs({
         scale: invertedScale,
-        visible: resizeEnabled && enabledHandlers.indexOf('top-center') >= 0
+        visible: resizeEnabled && enabledAnchors.indexOf('top-center') >= 0
       });
@@ -697,3 +717,3 @@ this.findOne('.top-right').setAttrs({
         scale: invertedScale,
-        visible: resizeEnabled && enabledHandlers.indexOf('top-right') >= 0
+        visible: resizeEnabled && enabledAnchors.indexOf('top-right') >= 0
       });
@@ -704,3 +724,3 @@ this.findOne('.middle-left').setAttrs({
         scale: invertedScale,
-        visible: resizeEnabled && enabledHandlers.indexOf('middle-left') >= 0
+        visible: resizeEnabled && enabledAnchors.indexOf('middle-left') >= 0
       });
@@ -711,3 +731,3 @@ this.findOne('.middle-right').setAttrs({
         scale: invertedScale,
-        visible: resizeEnabled && enabledHandlers.indexOf('middle-right') >= 0
+        visible: resizeEnabled && enabledAnchors.indexOf('middle-right') >= 0
       });
@@ -718,3 +738,3 @@ this.findOne('.bottom-left').setAttrs({
         scale: invertedScale,
-        visible: resizeEnabled && enabledHandlers.indexOf('bottom-left') >= 0
+        visible: resizeEnabled && enabledAnchors.indexOf('bottom-left') >= 0
       });
@@ -725,3 +745,3 @@ this.findOne('.bottom-center').setAttrs({
         scale: invertedScale,
-        visible: resizeEnabled && enabledHandlers.indexOf('bottom-center') >= 0
+        visible: resizeEnabled && enabledAnchors.indexOf('bottom-center') >= 0
       });
@@ -732,10 +752,10 @@ this.findOne('.bottom-right').setAttrs({
         scale: invertedScale,
-        visible: resizeEnabled && enabledHandlers.indexOf('bottom-right') >= 0
+        visible: resizeEnabled && enabledAnchors.indexOf('bottom-right') >= 0
       });
 
-      var scaledRotateHandlerOffset =
-        -this.rotateHandlerOffset() * Math.abs(invertedScale.y);
+      var scaledRotateAnchorOffset =
+        -this.rotateAnchorOffset() * Math.abs(invertedScale.y);
       this.findOne('.rotater').setAttrs({
         x: width / 2,
-        y: scaledRotateHandlerOffset * Konva.Util._sign(height),
+        y: scaledRotateAnchorOffset * Konva.Util._sign(height),
         scale: invertedScale,
@@ -749,3 +769,6 @@ visible: this.rotateEnabled()
         scale: invertedScale,
-        visible: this.lineEnabled()
+        visible: this.borderEnabled(),
+        stroke: this.getBorderStroke(),
+        strokeWidth: this.getBorderStrokeWidth(),
+        dash: this.getBorderDash()
       });
@@ -788,3 +811,3 @@ },
     if (!(val instanceof Array)) {
-      Konva.Util.warn('enabledHandlers value should be an array');
+      Konva.Util.warn('enabledAnchors value should be an array');
     }
@@ -808,3 +831,3 @@ if (val instanceof Array) {
    * get/set enabled handlers
-   * @name enabledHandlers
+   * @name enabledAnchors
    * @method
@@ -816,10 +839,10 @@ * @memberof Konva.Transformer.prototype
    * // get list of handlers
-   * var enabledHandlers = transformer.enabledHandlers();
+   * var enabledAnchors = transformer.enabledAnchors();
    *
    * // set handlers
-   * transformer.enabledHandlers(['top-left', 'top-center', 'top-right', 'middle-right', 'middle-left', 'bottom-left', 'bottom-center', 'bottom-right']);
+   * transformer.enabledAnchors(['top-left', 'top-center', 'top-right', 'middle-right', 'middle-left', 'bottom-left', 'bottom-center', 'bottom-right']);
    */
   Konva.Factory.addGetterSetter(
     Konva.Transformer,
-    'enabledHandlers',
+    'enabledAnchors',
     RESIZERS_NAMES,
@@ -844,2 +867,17 @@ validateResizers
   Konva.Factory.addGetterSetter(Konva.Transformer, 'resizeEnabled', true);
+  /**
+   * get/set anchor size. Default is 10
+   * @name validateAnchors
+   * @method
+   * @memberof Konva.Transformer.prototype
+   * @param {Number} 10
+   * @returns {Number}
+   * @example
+   * // get
+   * var anchorSize = transformer.anchorSize();
+   *
+   * // set
+   * transformer.anchorSize(20)
+   */
+  Konva.Factory.addGetterSetter(Konva.Transformer, 'anchorSize', 10);
 
@@ -880,3 +918,3 @@ /**
    * get/set distance for rotation handler
-   * @name rotateHandlerOffset
+   * @name rotateAnchorOffset
    * @method
@@ -888,12 +926,12 @@ * @memberof Konva.Transformer.prototype
    * // get
-   * var rotateHandlerOffset = transformer.rotateHandlerOffset();
+   * var rotateAnchorOffset = transformer.rotateAnchorOffset();
    *
    * // set
-   * transformer.rotateHandlerOffset(100);
+   * transformer.rotateAnchorOffset(100);
    */
-  Konva.Factory.addGetterSetter(Konva.Transformer, 'rotateHandlerOffset', 50);
+  Konva.Factory.addGetterSetter(Konva.Transformer, 'rotateAnchorOffset', 50);
 
   /**
    * get/set visibility of border
-   * @name lineEnabled
+   * @name borderEnabled
    * @method
@@ -905,10 +943,114 @@ * @memberof Konva.Transformer.prototype
    * // get
-   * var lineEnabled = transformer.lineEnabled();
+   * var borderEnabled = transformer.borderEnabled();
    *
    * // set
-   * transformer.lineEnabled(false);
+   * transformer.borderEnabled(false);
    */
-  Konva.Factory.addGetterSetter(Konva.Transformer, 'lineEnabled', true);
+  Konva.Factory.addGetterSetter(Konva.Transformer, 'borderEnabled', true);
 
   /**
+   * get/set anchor stroke color
+   * @name anchorStroke
+   * @method
+   * @memberof Konva.Transformer.prototype
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get
+   * var anchorStroke = transformer.anchorStroke();
+   *
+   * // set
+   * transformer.anchorStroke('red');
+   */
+  Konva.Factory.addGetterSetter(
+    Konva.Transformer,
+    'anchorStroke',
+    'rgb(0, 161, 255)'
+  );
+
+  /**
+   * get/set anchor stroke width
+   * @name anchorStrokeWidth
+   * @method
+   * @memberof Konva.Transformer.prototype
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get
+   * var anchorStrokeWidth = transformer.anchorStrokeWidth();
+   *
+   * // set
+   * transformer.anchorStrokeWidth(3);
+   */
+  Konva.Factory.addGetterSetter(Konva.Transformer, 'anchorStrokeWidth', 1);
+
+  /**
+   * get/set anchor fill color
+   * @name anchorFill
+   * @method
+   * @memberof Konva.Transformer.prototype
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get
+   * var anchorFill = transformer.anchorFill();
+   *
+   * // set
+   * transformer.anchorFill('red');
+   */
+  Konva.Factory.addGetterSetter(Konva.Transformer, 'anchorFill', 'white');
+
+  /**
+   * get/set border stroke color
+   * @name borderStroke
+   * @method
+   * @memberof Konva.Transformer.prototype
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get
+   * var borderStroke = transformer.borderStroke();
+   *
+   * // set
+   * transformer.borderStroke('red');
+   */
+  Konva.Factory.addGetterSetter(
+    Konva.Transformer,
+    'borderStroke',
+    'rgb(0, 161, 255)'
+  );
+
+  /**
+   * get/set border stroke width
+   * @name borderStrokeWidth
+   * @method
+   * @memberof Konva.Transformer.prototype
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get
+   * var borderStrokeWidth = transformer.borderStrokeWidth();
+   *
+   * // set
+   * transformer.borderStrokeWidth(3);
+   */
+  Konva.Factory.addGetterSetter(Konva.Transformer, 'borderStrokeWidth', 1);
+
+  /**
+   * get/set border dash array
+   * @name borderDash
+   * @method
+   * @memberof Konva.Transformer.prototype
+   * @param {Boolean} enabled
+   * @returns {Boolean}
+   * @example
+   * // get
+   * var borderDash = transformer.borderDash();
+   *
+   * // set
+   * transformer.borderDash([2, 2]);
+   */
+  Konva.Factory.addGetterSetter(Konva.Transformer, 'borderDash');
+
+  /**
    * get/set should we keep ration of resize?
@@ -968,3 +1110,9 @@ * @name keepRatio
 
+  Konva.Factory.backCompat(Konva.Transformer, {
+    lineEnabled: 'borderEnabled',
+    rotateHandlerOffset: 'rotateAnchorOffset',
+    enabledHandlers: 'enabledAnchors'
+  });
+
   Konva.Collection.mapMethods(Konva.Transformer);
 })(Konva);

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

1294539

increased by0.78%

Lines of code

36968

increased by0.81%

No dependency changes