diff --git a/konva-node/package.json b/konva-node/package.json index c2d84ec3..71fe605d 100644 --- a/konva-node/package.json +++ b/konva-node/package.json @@ -1,6 +1,6 @@ { "name": "konva-node", - "version": "0.5.5", + "version": "0.9.0", "description": "Konva framework for NodeJS env", "main": "index.js", "files": [ @@ -26,6 +26,6 @@ "license": "MIT", "dependencies": { "canvas": "^1.6.7", - "konva": "^1.7.3" + "konva": "^2.5.1" } } diff --git a/konva.js b/konva.js index 5a9a63a7..86ef0b05 100644 --- a/konva.js +++ b/konva.js @@ -2,7 +2,7 @@ * Konva JavaScript Framework v2.5.1 * http://konvajs.github.io/ * Licensed under the MIT - * Date: Sat Nov 17 2018 + * Date: Thu Nov 22 2018 * * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva) @@ -2627,9 +2627,9 @@ return this._cache[attr]; }, /* - * when the logic for a cached result depends on ancestor propagation, use this - * method to clear self and children cache - */ + * when the logic for a cached result depends on ancestor propagation, use this + * method to clear self and children cache + */ _clearSelfAndDescendantCache: function(attr) { this._clearCache(attr); @@ -2798,6 +2798,7 @@ /** * Return client rectangle {x, y, width, height} of node. This rectangle also include all styling (strokes, shadows, etc). * The rectangle position is relative to parent container. + * The purpose of the method is similar to getBoundingClientRect API of the DOM. * @method * @memberof Konva.Node.prototype * @param {Object} config @@ -3023,10 +3024,10 @@ name; /* - * loop through types and attach event listeners to - * each one. eg. 'click mouseover.namespace mouseout' - * will create three event bindings - */ + * loop through types and attach event listeners to + * each one. eg. 'click mouseover.namespace mouseout' + * will create three event bindings + */ for (n = 0; n < len; n++) { event = events[n]; parts = event.split(DOT); @@ -3162,7 +3163,7 @@ return this; }, /** - * remove and destroy a node. Kill it forever! You should not reuse node after destroy(). + * remove and destroy a node. Kill it and delete forever! You should not reuse node after destroy(). * @method * @memberof Konva.Node.prototype * @example @@ -4109,9 +4110,9 @@ for (n = 0; n < len; n++) { listener = allListeners[n]; /* - * don't include konva namespaced listeners because - * these are generated by the constructors - */ + * don't include konva namespaced listeners because + * these are generated by the constructors + */ if (listener.name.indexOf(KONVA) < 0) { // if listeners array doesn't exist, then create it if (!node.eventListeners[key]) { @@ -4169,7 +4170,7 @@ return this._toKonvaCanvas(config)._canvas; }, /** - * Creates a composite data URL. If MIME type is not + * Creates a composite data URL (base64 string). If MIME type is not * specified, then "image/png" will result. For "image/jpeg", specify a quality * level as quality (range 0.0 - 1.0) * @method @@ -12144,8 +12145,8 @@ }; }; /* - * Animation methods - */ + * Animation methods + */ Konva.Animation.prototype = { /** * set layers to be redrawn on each animation frame @@ -12288,16 +12289,16 @@ key, needRedraw; /* - * loop through all animations and execute animation - * function. if the animation object has specified node, - * we can add the node to the nodes hash to eliminate - * drawing the same node multiple times. The node property - * can be the stage itself or a layer - */ + * loop through all animations and execute animation + * function. if the animation object has specified node, + * we can add the node to the nodes hash to eliminate + * drawing the same node multiple times. The node property + * can be the stage itself or a layer + */ /* - * WARNING: don't cache animations.length because it could change while - * the for loop is running, causing a JS error - */ + * WARNING: don't cache animations.length because it could change while + * the for loop is running, causing a JS error + */ for (n = 0; n < animations.length; n++) { anim = animations[n]; @@ -12353,8 +12354,9 @@ * batch draw. this function will not do immediate draw * but it will schedule drawing to next tick (requestAnimFrame) * @method + * @name batchDraw * @return {Konva.Layer} this - * @memberof Konva.Base.prototype + * @memberof Konva.BaseLayer.prototype */ Konva.BaseLayer.prototype.batchDraw = function() { var that = this, @@ -12376,6 +12378,7 @@ /** * batch draw * @method + * @name batchDraw * @return {Konva.Stage} this * @memberof Konva.Stage.prototype */ @@ -16443,11 +16446,11 @@ var layer = this.getLayer(); /* - * animation object has no executable function because - * the updates are done with a fixed FPS with the setInterval - * below. The anim object only needs the layer reference for - * redraw - */ + * animation object has no executable function because + * the updates are done with a fixed FPS with the setInterval + * below. The anim object only needs the layer reference for + * redraw + */ this.anim.setLayers(layer); this._setInterval(); this.anim.start(); @@ -16464,7 +16467,7 @@ /** * determine if animation of sprite is running or not. returns true or false * @method - * @memberof Konva.Animation.prototype + * @memberof Konva.Sprite.prototype * @returns {Boolean} */ isRunning: function() { diff --git a/konva.min.js b/konva.min.js index 4a7116e2..c2fad7f6 100644 --- a/konva.min.js +++ b/konva.min.js @@ -2,7 +2,7 @@ * Konva JavaScript Framework v2.5.1 * http://konvajs.github.io/ * Licensed under the MIT - * Date: Sat Nov 17 2018 + * Date: Thu Nov 22 2018 * * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva) diff --git a/src/Animation.js b/src/Animation.js index 0f470679..20f6654a 100644 --- a/src/Animation.js +++ b/src/Animation.js @@ -66,8 +66,8 @@ }; }; /* - * Animation methods - */ + * Animation methods + */ Konva.Animation.prototype = { /** * set layers to be redrawn on each animation frame @@ -210,16 +210,16 @@ key, needRedraw; /* - * loop through all animations and execute animation - * function. if the animation object has specified node, - * we can add the node to the nodes hash to eliminate - * drawing the same node multiple times. The node property - * can be the stage itself or a layer - */ + * loop through all animations and execute animation + * function. if the animation object has specified node, + * we can add the node to the nodes hash to eliminate + * drawing the same node multiple times. The node property + * can be the stage itself or a layer + */ /* - * WARNING: don't cache animations.length because it could change while - * the for loop is running, causing a JS error - */ + * WARNING: don't cache animations.length because it could change while + * the for loop is running, causing a JS error + */ for (n = 0; n < animations.length; n++) { anim = animations[n]; @@ -275,8 +275,9 @@ * batch draw. this function will not do immediate draw * but it will schedule drawing to next tick (requestAnimFrame) * @method + * @name batchDraw * @return {Konva.Layer} this - * @memberof Konva.Base.prototype + * @memberof Konva.BaseLayer.prototype */ Konva.BaseLayer.prototype.batchDraw = function() { var that = this, @@ -298,6 +299,7 @@ /** * batch draw * @method + * @name batchDraw * @return {Konva.Stage} this * @memberof Konva.Stage.prototype */ diff --git a/src/Context.js b/src/Context.js index 41fc2355..ae29835b 100644 --- a/src/Context.js +++ b/src/Context.js @@ -623,7 +623,8 @@ if (shape.hasStroke()) { if (!strokeScaleEnabled) { this.save(); - this.setTransform(1, 0, 0, 1, 0, 0); + // set 2, because otherwise stroke will be 1/2 of its size + this.setTransform(2, 0, 0, 2, 0, 0); } this._applyLineCap(shape); diff --git a/src/Node.js b/src/Node.js index f4b19a94..303274c0 100644 --- a/src/Node.js +++ b/src/Node.js @@ -98,9 +98,9 @@ return this._cache[attr]; }, /* - * when the logic for a cached result depends on ancestor propagation, use this - * method to clear self and children cache - */ + * when the logic for a cached result depends on ancestor propagation, use this + * method to clear self and children cache + */ _clearSelfAndDescendantCache: function(attr) { this._clearCache(attr); @@ -269,6 +269,7 @@ /** * Return client rectangle {x, y, width, height} of node. This rectangle also include all styling (strokes, shadows, etc). * The rectangle position is relative to parent container. + * The purpose of the method is similar to getBoundingClientRect API of the DOM. * @method * @memberof Konva.Node.prototype * @param {Object} config @@ -494,10 +495,10 @@ name; /* - * loop through types and attach event listeners to - * each one. eg. 'click mouseover.namespace mouseout' - * will create three event bindings - */ + * loop through types and attach event listeners to + * each one. eg. 'click mouseover.namespace mouseout' + * will create three event bindings + */ for (n = 0; n < len; n++) { event = events[n]; parts = event.split(DOT); @@ -633,7 +634,7 @@ return this; }, /** - * remove and destroy a node. Kill it forever! You should not reuse node after destroy(). + * remove and destroy a node. Kill it and delete forever! You should not reuse node after destroy(). * @method * @memberof Konva.Node.prototype * @example @@ -1580,9 +1581,9 @@ for (n = 0; n < len; n++) { listener = allListeners[n]; /* - * don't include konva namespaced listeners because - * these are generated by the constructors - */ + * don't include konva namespaced listeners because + * these are generated by the constructors + */ if (listener.name.indexOf(KONVA) < 0) { // if listeners array doesn't exist, then create it if (!node.eventListeners[key]) { @@ -1640,7 +1641,7 @@ return this._toKonvaCanvas(config)._canvas; }, /** - * Creates a composite data URL. If MIME type is not + * Creates a composite data URL (base64 string). If MIME type is not * specified, then "image/png" will result. For "image/jpeg", specify a quality * level as quality (range 0.0 - 1.0) * @method diff --git a/src/Shape.js b/src/Shape.js index 68289a76..8c5f841a 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -260,6 +260,18 @@ var fillRect = this.getSelfRect(); var strokeWidth = (this.hasStroke() && this.strokeWidth()) || 0; + + // var scale = { + // x: 1, + // y: 1 + // }; + // if (!this.strokeScaleEnabled()) { + // var scale = this.getAbsoluteScale(); + // // scale = { + // // x: Math.abs(scale.x) + // // } + // } + var fillAndStrokeWidth = fillRect.width + strokeWidth; var fillAndStrokeHeight = fillRect.height + strokeWidth; diff --git a/src/shapes/Sprite.js b/src/shapes/Sprite.js index 250e62e4..50cebc9c 100644 --- a/src/shapes/Sprite.js +++ b/src/shapes/Sprite.js @@ -167,11 +167,11 @@ var layer = this.getLayer(); /* - * animation object has no executable function because - * the updates are done with a fixed FPS with the setInterval - * below. The anim object only needs the layer reference for - * redraw - */ + * animation object has no executable function because + * the updates are done with a fixed FPS with the setInterval + * below. The anim object only needs the layer reference for + * redraw + */ this.anim.setLayers(layer); this._setInterval(); this.anim.start(); @@ -188,7 +188,7 @@ /** * determine if animation of sprite is running or not. returns true or false * @method - * @memberof Konva.Animation.prototype + * @memberof Konva.Sprite.prototype * @returns {Boolean} */ isRunning: function() { diff --git a/src/shapes/Transformer.js b/src/shapes/Transformer.js index b79f7b14..d6b6e695 100644 --- a/src/shapes/Transformer.js +++ b/src/shapes/Transformer.js @@ -67,7 +67,7 @@ if (isMirrored) { rad *= -1; } - var angle = (Konva.Util._radToDeg(rad) % 360 + 360) % 360; + var angle = ((Konva.Util._radToDeg(rad) % 360) + 360) % 360; if ( Konva.Util._inRange(angle, 315 + 22.5, 360) || @@ -657,6 +657,7 @@ this.getNode().rotation(newAttrs.rotation); } var pure = node.getClientRect({ skipTransform: true, skipShadow: true }); + var padding = this.getPadding(); var scaleX = (newAttrs.width - padding * 2) / pure.width; var scaleY = (newAttrs.height - padding * 2) / pure.height; diff --git a/test/unit/shapes/Transformer-test.js b/test/unit/shapes/Transformer-test.js index 5e1c0981..bf72ef9f 100644 --- a/test/unit/shapes/Transformer-test.js +++ b/test/unit/shapes/Transformer-test.js @@ -71,6 +71,47 @@ suite('Transformer', function() { assert.equal(tr.rotation(), rect.rotation()); }); + test.skip('try to fit rectangle with strokeScaleEnabled = false', function() { + var stage = addStage(); + var layer = new Konva.Layer(); + stage.add(layer); + + var rect = new Konva.Rect({ + x: 20, + y: 20, + width: 100, + height: 100, + fill: 'green', + stroke: 'rgba(0,0,0,0.5)', + strokeWidth: 40, + name: 'myCircle', + draggable: true, + strokeScaleEnabled: false + }); + layer.add(rect); + + var tr = new Konva.Transformer(); + layer.add(tr); + tr.attachTo(rect); + + layer.draw(); + + tr._fitNodeInto({ + x: 0, + y: 0, + width: 200, + height: 200 + }); + + var scale = 200 / 140; + + assert.equal(rect.x(), 0); + assert.equal(rect.y(), 0); + assert.equal(rect.width(), 100); + assert.equal(rect.height(), 100); + assert.equal(rect.scaleX(), scale); + }); + test('listen shape changes', function() { var stage = addStage(); var layer = new Konva.Layer();