konva - npm Package Compare versions

Comparing version 2.0.3 to 2.1.0

CHANGELOG.md

@@ -8,2 +8,12 @@ # Change Log
 
+## [2.1.0][2018-05-16]
+
+## Fixed
+
+* Cursor fixes for `Konva.Transformer`
+* Fixed lineHeight behavior for `Konva.Text`
+* Some performance optimizations for `Konva.Text`
+* Better wrap algorithm for `Konva.Text`
+* fixed `Konva.Arrow` with tension != 0
+
 ## [2.0.3][2018-04-21]
@@ -10,0 +20,0 @@

konva.d.ts

@@ -8,2 +8,6 @@ declare namespace Konva {
 
+  type HandlerFunc = (
+    e: { target: Konva.Shape; evt: Event; currentTarget: Konva.Node }
+  ) => void;
+
   type globalCompositeOperationType =
@@ -258,3 +262,3 @@ | ''
     offsetY(offsetY: number): this;
-    on(evtStr: string, handler: Function): this;
+    on(evtStr: string, handler: HandlerFunc): this;
     opacity(): number;
@@ -801,2 +805,3 @@ opacity(opacity: number): this;
     closed?: boolean;
+    bezier?: boolean;
   }
@@ -803,0 +808,0 @@

package.json

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

src/shapes/Arrow.js

@@ -40,5 +40,20 @@ (function(Konva) {
       var points = this.points();
+
+      var tp = points;
+      var fromTension = this.getTension() !== 0 && points.length > 4;
+      if (fromTension) {
+        tp = this.getTensionPoints();
+      }
+
       var n = points.length;
-      var dx = points[n - 2] - points[n - 4];
-      var dy = points[n - 1] - points[n - 3];
+
+      var dx, dy;
+      if (fromTension) {
+        dx = points[n - 2] - tp[n - 2];
+        dy = points[n - 1] - tp[n - 1];
+      } else {
+        dx = points[n - 2] - points[n - 4];
+        dy = points[n - 1] - points[n - 3];
+      }
+
       var radians = (Math.atan2(dy, dx) + PI2) % PI2;
@@ -61,4 +76,10 @@ var length = this.pointerLength();
         ctx.translate(points[0], points[1]);
-        dx = points[2] - points[0];
-        dy = points[3] - points[1];
+        if (fromTension) {
+          dx = tp[0] - points[0];
+          dy = tp[1] - points[1];
+        } else {
+          dx = points[2] - points[0];
+          dy = points[3] - points[1];
+        }
+
         ctx.rotate((Math.atan2(-dy, -dx) + PI2) % PI2);
@@ -65,0 +86,0 @@ ctx.moveTo(0, 0);

src/shapes/Text.js

@@ -126,3 +126,3 @@ /*eslint-disable max-depth */
     _sceneFunc: function(context) {
-      var p = this.getPadding(),
+      var padding = this.getPadding(),
         textHeight = this.getTextHeight(),
@@ -144,8 +144,7 @@ lineHeightPx = this.getLineHeight() * textHeight,
       context.setAttr('textAlign', LEFT);
-      context.save();
-      if (p) {
-        context.translate(p, 0);
-        context.translate(0, p + textHeight / 2);
+      if (padding) {
+        context.translate(padding, 0);
+        context.translate(0, padding + lineHeightPx / 2);
       } else {
-        context.translate(0, textHeight / 2);
+        context.translate(0, lineHeightPx / 2);
       }
@@ -162,5 +161,5 @@
         if (align === RIGHT) {
-          context.translate(totalWidth - width - p * 2, 0);
+          context.translate(totalWidth - width - padding * 2, 0);
         } else if (align === CENTER) {
-          context.translate((totalWidth - width - p * 2) / 2, 0);
+          context.translate((totalWidth - width - padding * 2) / 2, 0);
         }
@@ -174,3 +173,3 @@
           // TODO: I have no idea what is real ratio
-          // just /20 looks good enough
+          // just /15 looks good enough
           context.lineWidth = fontSize / 15;
@@ -216,5 +215,6 @@ context.strokeStyle = fill;
         context.restore();
-        context.translate(0, lineHeightPx);
+        if (textArrLen > 1) {
+          context.translate(0, lineHeightPx);
+        }
       }
-      context.restore();
     },
@@ -352,3 +352,2 @@ _hitFunc: function(context) {
       this.textArr = [];
-      getDummyContext().save();
       getDummyContext().font = this._getContextFont();
@@ -389,6 +388,6 @@ for (var i = 0, max = lines.length; i < max; ++i) {
             /*
-                         * 'low' is now the index of the substring end
-                         * 'match' is the substring
-                         * 'matchWidth' is the substring width in px
-                         */
+            * 'low' is now the index of the substring end
+            * 'match' is the substring
+            * 'matchWidth' is the substring width in px
+            */
             if (match) {
@@ -398,5 +397,14 @@ // a fitting substring was found
                 // try to find a space or dash where wrapping could be done
-                var wrapIndex =
-                  Math.max(match.lastIndexOf(SPACE), match.lastIndexOf(DASH)) +
-                  1;
+                var wrapIndex;
+                var nextChar = line[match.length];
+                var nextIsSpaceOrDash = nextChar === SPACE || nextChar === DASH;
+                if (nextIsSpaceOrDash && matchWidth <= maxWidth) {
+                  wrapIndex = match.length;
+                } else {
+                  wrapIndex =
+                    Math.max(
+                      match.lastIndexOf(SPACE),
+                      match.lastIndexOf(DASH)
+                    ) + 1;
+                }
                 if (wrapIndex > 0) {
@@ -450,3 +458,2 @@ // re-cut the substring found at the space/dash position
       }
-      getDummyContext().restore();
       this.textHeight = fontSize;
@@ -453,0 +460,0 @@ // var maxTextWidth = 0;

src/shapes/Transformer.js

@@ -26,2 +26,13 @@ (function(Konva) {
 
+  var ANGLES = {
+    'top-left': -45,
+    'top-center': 0,
+    'top-right': 45,
+    'middle-right': -90,
+    'middle-left': 90,
+    'bottom-left': -135,
+    'bottom-center': 180,
+    'bottom-right': 135
+  };
+
   function getCursor(anchorName, rad) {
@@ -32,2 +43,3 @@ if (anchorName === 'rotater') {
 
+    rad += Konva.Util._degToRad(ANGLES[anchorName] || 0);
     var angle = (Konva.Util._radToDeg(rad) % 360 + 360) % 360;
@@ -77,3 +89,2 @@
    * @memberof Konva
-   * @augments Konva.Container
    * @param {Object} config
@@ -88,4 +99,2 @@ * @param {Boolean} [config.resizeEnabled] Default is true
    * @param {Array} [config.enabledHandlers] Array of names of enabled handles
-   * @@nodeParams
-   * @@containerParams
    * @example
@@ -149,2 +158,10 @@ * var transformer = new Konva.Transformer({
 
+    /**
+     * attach transformer to a Konva.Node. Transformer will adapt it its size and listed events
+     * @method
+     * @memberof Konva.Transformer.prototype
+     * @returns {Konva.Transformer}
+     * @example
+     * transformer.attachTo(shape);
+     */
     setNode: function(node) {
@@ -165,5 +182,4 @@ if (this._node) {
       );
-      // node.on(TRANSFORM_CHANGE_STR, this.requestUpdate.bind(this));
-      // node.on('dragmove.resizer', this.requestUpdate.bind(this));
 
+      // TODO: why do we need this?
       var elementsCreated = !!this.findOne('.top-left');
@@ -173,2 +189,3 @@ if (elementsCreated) {
       }
+      return this;
     },
@@ -180,2 +197,10 @@
 
+    /**
+     * detach transformer from a attached node
+     * @method
+     * @memberof Konva.Transformer.prototype
+     * @returns {Konva.Transformer}
+     * @example
+     * transformer.detach();
+     */
     detach: function() {
@@ -263,3 +288,2 @@ if (this.getNode()) {
         offsetY: 5,
-        draggable: true,
         dragDistance: 0
@@ -281,19 +305,19 @@ });
 
-        var cdx = tr.getWidth() / 2;
-        var cdy = tr.getHeight() / 2;
+        // var cdx = tr.getWidth() / 2;
+        // var cdy = tr.getHeight() / 2;
 
-        var parentPos = tr.getAbsolutePosition(tr.getParent());
-        var center = {
-          x: parentPos.x + (cdx * Math.cos(rad) + cdy * Math.sin(-rad)),
-          y: parentPos.y + (cdy * Math.cos(rad) + cdx * Math.sin(rad))
-        };
+        // var parentPos = tr.getAbsolutePosition(tr.getParent());
+        // var center = {
+        //   x: parentPos.x + (cdx * Math.cos(rad) + cdy * Math.sin(-rad)),
+        //   y: parentPos.y + (cdy * Math.cos(rad) + cdx * Math.sin(rad))
+        // };
 
-        var pos = this.getAbsolutePosition(tr.getParent());
+        // var pos = this.getAbsolutePosition(tr.getParent());
 
-        var dx = -pos.x + center.x;
-        var dy = -pos.y + center.y;
+        // var dx = -pos.x + center.x;
+        // var dy = -pos.y + center.y;
 
-        var angle = -Math.atan2(-dy, dx) - Math.PI / 2;
+        // var angle = -Math.atan2(-dy, dx) - Math.PI / 2;
 
-        var cursor = getCursor(name, angle);
+        var cursor = getCursor(name, rad);
         anchor.getStage().content.style.cursor = cursor;
@@ -599,17 +623,5 @@ layer.batchDraw();
     },
-
-    requestUpdate: function() {
-      if (this.timeout) {
-        return;
-      }
-      this.timeout = setTimeout(
-        function() {
-          this.timeout = null;
-          this.update();
-        }.bind(this)
-      );
-    },
-
     /**
-     * force update of Transformer
+     * force update of Konva.Transformer.
+     * Use it when you updated attached Konva.Group and now you need to reset transformer size
      * @method
@@ -684,5 +696,17 @@ * @memberof Konva.Transformer.prototype
     },
+    /**
+     * determine if transformer is in active transform
+     * @method
+     * @memberof Konva.Transformer.prototype
+     * @returns {Boolean}
+     */
     isTransforming: function() {
       return this._transforming;
     },
+    /**
+     * Stop active transform action
+     * @method
+     * @memberof Konva.Transformer.prototype
+     * @returns {Boolean}
+     */
     stopTransform: function() {
@@ -689,0 +713,0 @@ if (this._transforming) {

src/Stage.js

@@ -542,2 +542,3 @@ (function() {
           Konva.inDblClickWindow = true;
+          clearTimeout(this.dblTimeout);
         } else if (dd) {
@@ -650,2 +651,3 @@ dd.justDragged = false;
         Konva.inDblClickWindow = true;
+        clearTimeout(this.dblTimeout);
       }
@@ -652,0 +654,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

1278079

increased by0.14%

Lines of code

36275

increased by0.22%

No dependency changes