konva - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

CHANGELOG.md

@@ -8,2 +8,8 @@ # Change Log
 
+## [2.0.2][2018-03-15]
+
+## Fixed
+
+* Even more bugs fixes for `Konva.Transformer`
+
 ## [2.0.1][2018-03-15]
@@ -10,0 +16,0 @@

package.json

 {
   "name": "konva",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "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.0.1/konva.min.js"></script>
+<script src="https://cdn.rawgit.com/konvajs/konva/2.0.2/konva.min.js"></script>
 <div id="container"></div>
@@ -29,0 +29,0 @@ <script>

src/shapes/Transformer.js

@@ -91,2 +91,3 @@ (function(Konva) {
    * @param {Number} [config.rotateHandlerOffset] Default is 50
+   * @param {Number} [config.padding] Default is 0
    * @param {Number} [config.lineEnabled] Should we draw border? Default is true
@@ -169,3 +170,3 @@ * @param {Boolean} [config.keepRatio] Should we keep ratio when we are moving edges? Default is true
       node.on(TRANSFORM_CHANGE_STR, this.requestUpdate.bind(this));
-      node.on('dragmove.resizer', this.requestUpdate);
+      node.on('dragmove.resizer', this.requestUpdate.bind(this));
 
@@ -297,10 +298,14 @@ var elementsCreated = !!this.findOne('.top-left');
         sceneFunc: function(ctx) {
+          var tr = this.getParent();
+          var padding = tr.getPadding();
           ctx.beginPath();
-          ctx.rect(0, 0, this.width(), this.height());
-          ctx.moveTo(this.width() / 2, 0);
-          if (this.getParent().rotateEnabled()) {
-            ctx.lineTo(
-              this.width() / 2,
-              -this.getParent().rotateHandlerOffset()
-            );
+          ctx.rect(
+            -padding,
+            -padding,
+            this.width() + padding * 2,
+            this.height() + padding * 2
+          );
+          ctx.moveTo(this.width() / 2, -padding);
+          if (tr.rotateEnabled()) {
+            ctx.lineTo(this.width() / 2, -tr.rotateHandlerOffset());
           }
@@ -429,2 +434,3 @@
       } else if (this.movingResizer === 'rotater') {
+        var padding = this.getPadding();
         var attrs = this._getNodeRect();
@@ -459,2 +465,5 @@ x = resizerNode.x() - attrs.width / 2;
 
+        var dx = padding;
+        var dy = padding;
+
         this._fitNodeInto(
@@ -467,10 +476,16 @@ Object.assign(attrs, {
               attrs.x +
-              attrs.width / 2 * (Math.cos(alpha) - Math.cos(newAlpha)) +
-              attrs.height / 2 * (Math.sin(-alpha) - Math.sin(-newAlpha)),
+              (attrs.width / 2 + padding) *
+                (Math.cos(alpha) - Math.cos(newAlpha)) +
+              (attrs.height / 2 + padding) *
+                (Math.sin(-alpha) - Math.sin(-newAlpha)) -
+              (dx * Math.cos(rot) + dy * Math.sin(-rot)),
             y:
               attrs.y +
-              attrs.height / 2 * (Math.cos(alpha) - Math.cos(newAlpha)) +
-              attrs.width / 2 * (Math.sin(alpha) - Math.sin(newAlpha)),
-            width: attrs.width,
-            height: attrs.height
+              (attrs.height / 2 + padding) *
+                (Math.cos(alpha) - Math.cos(newAlpha)) +
+              (attrs.width / 2 + padding) *
+                (Math.sin(alpha) - Math.sin(newAlpha)) -
+              (dy * Math.cos(rot) + dx * Math.sin(rot)),
+            width: attrs.width + padding * 2,
+            height: attrs.height + padding * 2
           })
@@ -528,2 +543,3 @@ );
     _fitNodeInto: function(attrs) {
+      // waring! in this attrs padding may be included
       this._settings = true;
@@ -535,9 +551,10 @@ var node = this.getNode();
       var pure = node.getClientRect({ skipTransform: true });
-      var scaleX = attrs.width / pure.width;
-      var scaleY = attrs.height / pure.height;
+      var padding = this.getPadding();
+      var scaleX = (attrs.width - padding * 2) / pure.width;
+      var scaleY = (attrs.height - padding * 2) / pure.height;
 
       var rotation = Konva.getAngle(node.getRotation());
       // debugger;
-      var dx = pure.x * scaleX;
-      var dy = pure.y * scaleY;
+      var dx = pure.x * scaleX - padding;
+      var dy = pure.y * scaleY - padding;
 
@@ -594,6 +611,7 @@ // var dxo = node.offsetX() * scaleX;
       var resizeEnabled = this.resizeEnabled();
+      var padding = this.getPadding();
 
       this.findOne('.top-left').setAttrs({
-        x: 0,
-        y: 0,
+        x: -padding,
+        y: -padding,
         visible: resizeEnabled && enabledHandlers.indexOf('top-left') >= 0
@@ -603,12 +621,12 @@ });
         x: width / 2,
-        y: 0,
+        y: -padding,
         visible: resizeEnabled && enabledHandlers.indexOf('top-center') >= 0
       });
       this.findOne('.top-right').setAttrs({
-        x: width,
-        y: 0,
+        x: width + padding,
+        y: -padding,
         visible: resizeEnabled && enabledHandlers.indexOf('top-right') >= 0
       });
       this.findOne('.middle-left').setAttrs({
-        x: 0,
+        x: -padding,
         y: height / 2,
@@ -618,3 +636,3 @@ visible: resizeEnabled && enabledHandlers.indexOf('middle-left') >= 0
       this.findOne('.middle-right').setAttrs({
-        x: width,
+        x: width + padding,
         y: height / 2,
@@ -624,4 +642,4 @@ visible: resizeEnabled && enabledHandlers.indexOf('middle-right') >= 0
       this.findOne('.bottom-left').setAttrs({
-        x: 0,
-        y: height,
+        x: -padding,
+        y: height + padding,
         visible: resizeEnabled && enabledHandlers.indexOf('bottom-left') >= 0
@@ -631,8 +649,8 @@ });
         x: width / 2,
-        y: height,
+        y: height + padding,
         visible: resizeEnabled && enabledHandlers.indexOf('bottom-center') >= 0
       });
       this.findOne('.bottom-right').setAttrs({
-        x: width,
-        y: height,
+        x: width + padding,
+        y: height + padding,
         visible: resizeEnabled && enabledHandlers.indexOf('bottom-right') >= 0
@@ -802,2 +820,18 @@ });
 
+  /**
+   * get/set padding
+   * @name padding
+   * @method
+   * @memberof Konva.Transformer.prototype
+   * @param {Array} array
+   * @returns {Array}
+   * @example
+   * // get
+   * var padding = shape.padding();
+   *
+   * // set
+   * shape.padding(10);
+   */
+  Konva.Factory.addGetterSetter(Konva.Transformer, 'padding', 0);
+
   Konva.Factory.addOverloadedGetterSetter(Konva.Transformer, 'node');
@@ -804,0 +838,0 @@

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

1267182

increased by0.21%

Lines of code

35921

increased by0.18%

No dependency changes