diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 1fe78c9a..00000000 --- a/.eslintrc +++ /dev/null @@ -1,218 +0,0 @@ -{ - "extends": "eslint:recommended", - "env": { - "browser": true, - "node": true - }, - "rules": { - "no-alert": 0, - "no-array-constructor": 2, - "no-bitwise": 0, - "no-caller": 2, - "no-catch-shadow": 2, - "comma-dangle": 2, - "no-underscore-dangle": 0, - "no-cond-assign": 2, - "no-console": 0, - "no-constant-condition": 0, - "no-continue": 0, - "no-control-regex": 2, - "no-debugger": 2, - "no-delete-var": 2, - "no-div-regex": 0, - "no-dupe-keys": 2, - "no-dupe-args": 2, - "no-duplicate-case": 2, - "no-else-return": 0, - "no-empty": 2, - "no-empty-class": 0, - "no-empty-character-class": 2, - "no-labels": 2, - "no-eq-null": 2, - "no-eval": 2, - "no-ex-assign": 2, - "no-extend-native": 2, - "no-extra-bind": 2, - "no-extra-boolean-cast": 2, - "no-extra-parens": 0, - "no-extra-semi": 2, - "no-fallthrough": 2, - "no-floating-decimal": 0, - "no-func-assign": 2, - "no-implied-eval": 2, - "no-inline-comments": 0, - "no-inner-declarations": [2, "functions"], - "no-invalid-regexp": 2, - "no-irregular-whitespace": 2, - "no-iterator": 2, - "no-label-var": 2, - "no-lone-blocks": 2, - "no-lonely-if": 0, - "no-loop-func": 2, - "no-mixed-requires": [1, false], - "no-mixed-spaces-and-tabs": [2, false], - "linebreak-style": [1, "unix"], - "no-multi-spaces": 2, - "no-multi-str": 2, - "no-multiple-empty-lines": [ - 1, - { - "max": 3 - } - ], - "no-native-reassign": 2, - "no-negated-in-lhs": 2, - "no-nested-ternary": 0, - "no-new": 2, - "no-new-func": 2, - "no-new-object": 2, - "no-new-require": 0, - "no-new-wrappers": 2, - "no-obj-calls": 2, - "no-octal": 2, - "no-octal-escape": 2, - "no-param-reassign": 0, - "no-path-concat": 0, - "no-plusplus": 0, - "no-process-env": 0, - "no-process-exit": 2, - "no-proto": 2, - "no-redeclare": 2, - "no-regex-spaces": 2, - "no-reserved-keys": 0, - "no-restricted-modules": 0, - "no-return-assign": 0, - "no-script-url": 2, - "no-self-compare": 0, - "no-sequences": 2, - "no-shadow": 2, - "no-shadow-restricted-names": 2, - "no-spaced-func": 2, - "no-sparse-arrays": 2, - "no-sync": 0, - "no-ternary": 0, - "no-trailing-spaces": 2, - "no-throw-literal": 1, - "no-undef": 2, - "no-undef-init": 2, - "no-undefined": 0, - "no-unneeded-ternary": 2, - "no-unreachable": 2, - "no-unused-expressions": 2, - "no-unused-vars": [ - 2, - { - "vars": "all", - "args": "after-used" - } - ], - "no-use-before-define": 2, - "no-void": 0, - "no-var": 0, - "prefer-const": 0, - "no-warning-comments": [ - 0, - { - "terms": ["todo", "fixme", "xxx"], - "location": "start" - } - ], - "no-with": 2, - "accessor-pairs": 0, - "block-scoped-var": 0, - "brace-style": [0, "1tbs"], - "camelcase": 0, - "comma-spacing": 2, - "comma-style": 0, - "complexity": [1, 15], - "computed-property-spacing": [0, "never"], - "consistent-return": 1, - "consistent-this": [0, "that"], - "curly": [2, "all"], - "default-case": 0, - "dot-location": 0, - "dot-notation": [ - 2, - { - "allowKeywords": true - } - ], - "eol-last": 0, - "eqeqeq": 2, - "func-names": 0, - "func-style": [1, "declaration"], - "generator-star": 0, - "generator-star-spacing": 0, - "guard-for-in": 1, - "handle-callback-err": 2, - "indent": 0, - "key-spacing": [ - 2, - { - "beforeColon": false, - "afterColon": true - } - ], - "lines-around-comment": 0, - "max-depth": [2, 5], - "max-len": [2, 320, 4], - "max-nested-callbacks": [2, 2], - "max-params": [1, 8], - "max-statements": [1, 260], - "new-cap": 0, - "new-parens": 2, - "newline-after-var": 0, - "object-curly-spacing": [0, "never"], - "object-shorthand": 0, - "one-var": 0, - "operator-assignment": [0, "always"], - "operator-linebreak": 0, - "padded-blocks": 0, - "quote-props": 0, - "quotes": [2, "single"], - "radix": 0, - "semi": 2, - "semi-spacing": [ - 2, - { - "before": false, - "after": true - } - ], - "sort-vars": 0, - "space-after-function-name": [0, "never"], - "space-after-keywords": [0, "always"], - "space-before-blocks": [0, "always"], - "space-before-function-paren": [0, "always"], - "space-before-function-parentheses": [0, "always"], - "space-in-brackets": [0, "never"], - "space-in-parens": [0, "never"], - "space-infix-ops": 2, - "keyword-spacing": 0, - "space-unary-ops": [ - 2, - { - "words": true, - "nonwords": false - } - ], - "spaced-comment": 0, - "spaced-line-comment": [0, "always"], - "strict": [0, "function"], - "use-isnan": 2, - "valid-jsdoc": 0, - "valid-typeof": 2, - "vars-on-top": 0, - "wrap-iife": 0, - "wrap-regex": 0, - "yoda": [2, "never"] - }, - "globals": { - "Konva": false, - "define": false, - "test": false, - "assert": false, - "addStage": false, - "suite": false - } -} diff --git a/.gitignore b/.gitignore index 023152ef..cf6ec68d 100644 --- a/.gitignore +++ b/.gitignore @@ -11,7 +11,6 @@ docs homedocs jsdoc-template api -test/sandbox.html package-lock.json lib src_old diff --git a/bower.json b/bower.json deleted file mode 100644 index cc97733e..00000000 --- a/bower.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "name": "konva", - "authors": [ - "Anton Lavrenov", "Eric Rowell" - ], - "homepage": "http://konvajs.org", - "description": "Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.", - "keywords": [ - "canvas", - "animations", - "graphic", - "html5" - ], - "license": "MIT", - "ignore": [ - "**/.*", - "test", - "resources", - "src", - "*.yml", - ".jshitrc", - ".npmignore", - "package.json", - ".travis.yml", - ".gitignore", - "Gruntfile.js", - "gulpfile.js" - ], - "main": "konva.min.js" -} diff --git a/konva.js b/konva.js index 7c95f76d..9683e320 100644 --- a/konva.js +++ b/konva.js @@ -5,10 +5,10 @@ }(this, (function () { 'use strict'; /* - * Konva JavaScript Framework v7.2.5 + * Konva JavaScript Framework v@@version * http://konvajs.org/ * Licensed under the MIT - * Date: Thu Apr 29 2021 + * Date: @@date * * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva) @@ -76,7 +76,7 @@ : {}; const Konva$2 = { _global: glob, - version: '7.2.5', + version: '@@version', isBrowser: detectBrowser(), isUnminified: /param/.test(function (param) { }.toString()), dblClickWindow: 400, @@ -1202,7 +1202,9 @@ Util.warn(_formatValue(val) + ' is a not valid value for "' + attr + - '" attribute. The value should be a number or Array(' + noOfElements + ')'); + '" attribute. The value should be a number or Array(' + + noOfElements + + ')'); } return val; }; @@ -1240,7 +1242,8 @@ if (Konva$2.isUnminified) { return function (val, attr) { const isString = Util._isString(val); - const isGradient = Object.prototype.toString.call(val) === '[object CanvasGradient]'; + const isGradient = Object.prototype.toString.call(val) === '[object CanvasGradient]' || + (val && val.addColorStop); if (!(isString || isGradient)) { Util.warn(_formatValue(val) + ' is a not valid value for "' + @@ -1556,7 +1559,7 @@ this.strokeShape(shape); } } - getTrace(relaxed) { + getTrace(relaxed, rounded) { var traceArr = this.traceArr, len = traceArr.length, str = '', n, trace, method, args; for (n = 0; n < len; n++) { trace = traceArr[n]; @@ -1573,6 +1576,9 @@ str += OPEN_PAREN_BRACKET + args.join(COMMA) + CLOSE_BRACKET_PAREN; } else { + if (rounded) { + args = args.map((a) => typeof a === 'number' ? Math.floor(a) : a); + } str += OPEN_PAREN + args.join(COMMA) + CLOSE_PAREN; } } @@ -2516,26 +2522,7 @@ * @constructor * @memberof Konva * @param {Object} config - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] + * @@nodeParams */ class Node { constructor(config) { @@ -2618,8 +2605,8 @@ _clearSelfAndDescendantCache(attr, forceEvent) { this._clearCache(attr); // trigger clear cache, so transformer can use it - if (forceEvent && attr === ABSOLUTE_TRANSFORM) { - this.fire('_clearTransformCache'); + if (attr === ABSOLUTE_TRANSFORM) { + this.fire('absoluteTransformChange'); } } /** @@ -5158,33 +5145,8 @@ * @augments Konva.Node * @abstract * @param {Object} config - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] - * * @param {Object} [config.clip] set clip - * @param {Number} [config.clipX] set clip x - * @param {Number} [config.clipY] set clip y - * @param {Number} [config.clipWidth] set clip width - * @param {Number} [config.clipHeight] set clip height - * @param {Function} [config.clipFunc] set clip func - + * @@nodeParams + * @@containerParams */ class Container extends Node { constructor() { @@ -5803,26 +5765,7 @@ * @augments Konva.Container * @param {Object} config * @param {String|Element} config.container Container selector or DOM element - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] + * @@nodeParams * @example * var stage = new Konva.Stage({ * width: 500, @@ -6716,80 +6659,8 @@ * @memberof Konva * @augments Konva.Node * @param {Object} config - * @param {String} [config.fill] fill color - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false. - * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas. The default is "auto" - equals to strokeWidth - * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true - * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true - * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke. The default is true - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or square. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] - * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] + * @@shapeParams + * @@nodeParams * @example * var customShape = new Konva.Shape({ * x: 5, @@ -8300,33 +8171,8 @@ * @param {Object} config * @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want * to clear the canvas before each layer draw. The default value is true. - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] - * * @param {Object} [config.clip] set clip - * @param {Number} [config.clipX] set clip x - * @param {Number} [config.clipY] set clip y - * @param {Number} [config.clipWidth] set clip width - * @param {Number} [config.clipHeight] set clip height - * @param {Function} [config.clipFunc] set clip func - + * @@nodeParams + * @@containerParams * @example * var layer = new Konva.Layer(); * stage.add(layer); @@ -8410,13 +8256,13 @@ setZIndex(index) { super.setZIndex(index); var stage = this.getStage(); - if (stage) { - stage.content.removeChild(this.getCanvas()._canvas); + if (stage && stage.content) { + stage.content.removeChild(this.getCanvasElement()); if (index < stage.children.length - 1) { - stage.content.insertBefore(this.getCanvas()._canvas, stage.children[index + 1].getCanvas()._canvas); + stage.content.insertBefore(this.getCanvasElement(), stage.children[index + 1].getCanvas()._canvas); } else { - stage.content.appendChild(this.getCanvas()._canvas); + stage.content.appendChild(this.getCanvasElement()); } } return this; @@ -8424,9 +8270,9 @@ moveToTop() { Node.prototype.moveToTop.call(this); var stage = this.getStage(); - if (stage) { - stage.content.removeChild(this.getCanvas()._canvas); - stage.content.appendChild(this.getCanvas()._canvas); + if (stage && stage.content) { + stage.content.removeChild(this.getCanvasElement()); + stage.content.appendChild(this.getCanvasElement()); } return true; } @@ -8436,15 +8282,15 @@ return false; } var stage = this.getStage(); - if (!stage) { + if (!stage || !stage.content) { return false; } - stage.content.removeChild(this.getCanvas()._canvas); + stage.content.removeChild(this.getCanvasElement()); if (this.index < stage.children.length - 1) { - stage.content.insertBefore(this.getCanvas()._canvas, stage.children[this.index + 1].getCanvas()._canvas); + stage.content.insertBefore(this.getCanvasElement(), stage.children[this.index + 1].getCanvas()._canvas); } else { - stage.content.appendChild(this.getCanvas()._canvas); + stage.content.appendChild(this.getCanvasElement()); } return true; } @@ -8454,8 +8300,10 @@ var stage = this.getStage(); if (stage) { var children = stage.children; - stage.content.removeChild(this.getCanvas()._canvas); - stage.content.insertBefore(this.getCanvas()._canvas, children[this.index + 1].getCanvas()._canvas); + if (stage.content) { + stage.content.removeChild(this.getCanvasElement()); + stage.content.insertBefore(this.getCanvasElement(), children[this.index + 1].getCanvas()._canvas); + } } return true; } @@ -8467,8 +8315,10 @@ var stage = this.getStage(); if (stage) { var children = stage.children; - stage.content.removeChild(this.getCanvas()._canvas); - stage.content.insertBefore(this.getCanvas()._canvas, children[1].getCanvas()._canvas); + if (stage.content) { + stage.content.removeChild(this.getCanvasElement()); + stage.content.insertBefore(this.getCanvasElement(), children[1].getCanvas()._canvas); + } } return true; } @@ -8478,7 +8328,7 @@ return this; } remove() { - var _canvas = this.getCanvas()._canvas; + var _canvas = this.getCanvasElement(); Node.prototype.remove.call(this); if (_canvas && _canvas.parentNode && Util._isInDocument(_canvas)) { _canvas.parentNode.removeChild(_canvas); @@ -8708,7 +8558,7 @@ * @method */ toggleHitCanvas() { - if (!this.parent) { + if (!this.parent || !this.parent['content']) { return; } var parent = this.parent; @@ -8787,13 +8637,7 @@ * @constructor * @memberof Konva * @augments Konva.Layer - * * @param {Object} [config.clip] set clip - * @param {Number} [config.clipX] set clip x - * @param {Number} [config.clipY] set clip y - * @param {Number} [config.clipWidth] set clip width - * @param {Number} [config.clipHeight] set clip height - * @param {Function} [config.clipFunc] set clip func - + * @@containerParams * @example * var layer = new Konva.FastLayer(); */ @@ -8813,33 +8657,8 @@ * @memberof Konva * @augments Konva.Container * @param {Object} config - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] - * * @param {Object} [config.clip] set clip - * @param {Number} [config.clipX] set clip x - * @param {Number} [config.clipY] set clip y - * @param {Number} [config.clipWidth] set clip width - * @param {Number} [config.clipHeight] set clip height - * @param {Function} [config.clipFunc] set clip func - + * @@nodeParams + * @@containerParams * @example * var group = new Konva.Group(); */ @@ -9806,80 +9625,8 @@ * @param {Number} config.innerRadius * @param {Number} config.outerRadius * @param {Boolean} [config.clockwise] - * @param {String} [config.fill] fill color - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false. - * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas. The default is "auto" - equals to strokeWidth - * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true - * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true - * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke. The default is true - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or square. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] - * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] + * @@shapeParams + * @@nodeParams * @example * // draw a Arc that's pointing downwards * var arc = new Konva.Arc({ @@ -9991,80 +9738,8 @@ * The default is 0 * @param {Boolean} [config.closed] defines whether or not the line shape is closed, creating a polygon or blob * @param {Boolean} [config.bezier] if no tension is provided but bezier=true, we draw the line as a bezier using the passed points - * @param {String} [config.fill] fill color - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false. - * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas. The default is "auto" - equals to strokeWidth - * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true - * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true - * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke. The default is true - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or square. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] - * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] + * @@shapeParams + * @@nodeParams * @example * var line = new Konva.Line({ * x: 100, @@ -10283,80 +9958,8 @@ * @param {Number} config.pointerLength Arrow pointer length. Default value is 10. * @param {Number} config.pointerWidth Arrow pointer width. Default value is 10. * @param {Boolean} config.pointerAtBeginning Do we need to draw pointer on both sides?. Default false. - * @param {String} [config.fill] fill color - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false. - * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas. The default is "auto" - equals to strokeWidth - * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true - * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true - * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke. The default is true - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or square. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] - * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] + * @@shapeParams + * @@nodeParams * @example * var line = new Konva.Line({ * points: [73, 70, 340, 23, 450, 60, 500, 20], @@ -10496,80 +10099,8 @@ * @augments Konva.Shape * @param {Object} config * @param {Number} config.radius - * @param {String} [config.fill] fill color - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false. - * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas. The default is "auto" - equals to strokeWidth - * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true - * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true - * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke. The default is true - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or square. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] - * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] + * @@shapeParams + * @@nodeParams * @example * // create circle * var circle = new Konva.Circle({ @@ -10629,80 +10160,8 @@ * @augments Konva.Shape * @param {Object} config * @param {Object} config.radius defines x and y radius - * @param {String} [config.fill] fill color - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false. - * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas. The default is "auto" - equals to strokeWidth - * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true - * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true - * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke. The default is true - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or square. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] - * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] + * @@shapeParams + * @@nodeParams * @example * var ellipse = new Konva.Ellipse({ * radius : { @@ -10799,80 +10258,8 @@ * @param {Object} config * @param {Image} config.image * @param {Object} [config.crop] - * @param {String} [config.fill] fill color - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false. - * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas. The default is "auto" - equals to strokeWidth - * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true - * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true - * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke. The default is true - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or square. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] - * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] + * @@shapeParams + * @@nodeParams * @example * var imageObj = new Image(); * imageObj.onload = function() { @@ -11079,26 +10466,7 @@ * @constructor * @memberof Konva * @param {Object} config - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] + * @@nodeParams * @example * // create label * var label = new Konva.Label({ @@ -11359,80 +10727,8 @@ * @augments Konva.Shape * @param {Object} config * @param {String} config.data SVG data string - * @param {String} [config.fill] fill color - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false. - * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas. The default is "auto" - equals to strokeWidth - * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true - * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true - * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke. The default is true - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or square. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] - * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] + * @@shapeParams + * @@nodeParams * @example * var path = new Konva.Path({ * x: 240, @@ -12177,80 +11473,8 @@ * @augments Konva.Shape * @param {Object} config * @param {Number} [config.cornerRadius] - * @param {String} [config.fill] fill color - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false. - * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas. The default is "auto" - equals to strokeWidth - * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true - * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true - * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke. The default is true - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or square. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] - * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] + * @@shapeParams + * @@nodeParams * @example * var rect = new Konva.Rect({ * width: 100, @@ -12325,80 +11549,8 @@ * @param {Object} config * @param {Number} config.sides * @param {Number} config.radius - * @param {String} [config.fill] fill color - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false. - * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas. The default is "auto" - equals to strokeWidth - * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true - * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true - * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke. The default is true - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or square. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] - * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] + * @@shapeParams + * @@nodeParams * @example * var hexagon = new Konva.RegularPolygon({ * x: 100, @@ -12508,80 +11660,8 @@ * @param {Number} config.innerRadius * @param {Number} config.outerRadius * @param {Boolean} [config.clockwise] - * @param {String} [config.fill] fill color - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false. - * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas. The default is "auto" - equals to strokeWidth - * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true - * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true - * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke. The default is true - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or square. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] - * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] + * @@shapeParams + * @@nodeParams * @example * var ring = new Konva.Ring({ * innerRadius: 40, @@ -12657,80 +11737,8 @@ * @param {Integer} [config.frameIndex] animation frame index * @param {Image} config.image image object * @param {Integer} [config.frameRate] animation frame rate - * @param {String} [config.fill] fill color - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false. - * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas. The default is "auto" - equals to strokeWidth - * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true - * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true - * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke. The default is true - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or square. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] - * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] + * @@shapeParams + * @@nodeParams * @example * var imageObj = new Image(); * imageObj.onload = function() { @@ -13022,80 +12030,8 @@ * @param {Integer} config.numPoints * @param {Number} config.innerRadius * @param {Number} config.outerRadius - * @param {String} [config.fill] fill color - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false. - * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas. The default is "auto" - equals to strokeWidth - * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true - * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true - * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke. The default is true - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or square. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] - * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] + * @@shapeParams + * @@nodeParams * @example * var star = new Konva.Star({ * x: 100, @@ -13266,80 +12202,8 @@ * @param {Number} [config.lineHeight] default is 1 * @param {String} [config.wrap] can be "word", "char", or "none". Default is word * @param {Boolean} [config.ellipsis] can be true or false. Default is false. if Konva.Text config is set to wrap="none" and ellipsis=true, then it will add "..." to the end - * @param {String} [config.fill] fill color - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false. - * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas. The default is "auto" - equals to strokeWidth - * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true - * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true - * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke. The default is true - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or square. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] - * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] + * @@shapeParams + * @@nodeParams * @example * var text = new Konva.Text({ * x: 10, @@ -13942,80 +12806,8 @@ * @param {String} config.data SVG data string * @param {Function} config.getKerning a getter for kerning values for the specified characters * @param {Function} config.kerningFunc a getter for kerning values for the specified characters - * @param {String} [config.fill] fill color - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false. - * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas. The default is "auto" - equals to strokeWidth - * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true - * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true - * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke. The default is true - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or square. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] - * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] + * @@shapeParams + * @@nodeParams * @example * var kerningPairs = { * 'A': { @@ -14796,7 +13588,7 @@ }; node.on(additionalEvents, onChange); node.on(TRANSFORM_CHANGE_STR, onChange); - node.on(`_clearTransformCache.${EVENTS_NAME}`, onChange); + node.on(`absoluteTransformChange.${EVENTS_NAME}`, onChange); node.on(`xChange.${EVENTS_NAME} yChange.${EVENTS_NAME}`, onChange); this._proxyDrag(node); }); @@ -15017,11 +13809,13 @@ anchor.on('mouseenter', () => { var rad = Konva$2.getAngle(this.rotation()); var cursor = getCursor(name, rad); - anchor.getStage().content.style.cursor = cursor; + anchor.getStage().content && + (anchor.getStage().content.style.cursor = cursor); this._cursorChange = true; }); anchor.on('mouseout', () => { - anchor.getStage().content.style.cursor = ''; + anchor.getStage().content && + (anchor.getStage().content.style.cursor = ''); this._cursorChange = false; }); this.add(anchor); @@ -15076,10 +13870,12 @@ var hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)); this.sin = Math.abs(height / hypotenuse); this.cos = Math.abs(width / hypotenuse); - window.addEventListener('mousemove', this._handleMouseMove); - window.addEventListener('touchmove', this._handleMouseMove); - window.addEventListener('mouseup', this._handleMouseUp, true); - window.addEventListener('touchend', this._handleMouseUp, true); + if (typeof window !== 'undefined') { + window.addEventListener('mousemove', this._handleMouseMove); + window.addEventListener('touchmove', this._handleMouseMove); + window.addEventListener('mouseup', this._handleMouseUp, true); + window.addEventListener('touchend', this._handleMouseUp, true); + } this._transforming = true; var ap = e.target.getAbsolutePosition(); var pos = e.target.getStage().getPointerPosition(); @@ -15274,10 +14070,12 @@ _removeEvents(e) { if (this._transforming) { this._transforming = false; - window.removeEventListener('mousemove', this._handleMouseMove); - window.removeEventListener('touchmove', this._handleMouseMove); - window.removeEventListener('mouseup', this._handleMouseUp, true); - window.removeEventListener('touchend', this._handleMouseUp, true); + if (typeof window !== 'undefined') { + window.removeEventListener('mousemove', this._handleMouseMove); + window.removeEventListener('touchmove', this._handleMouseMove); + window.removeEventListener('mouseup', this._handleMouseUp, true); + window.removeEventListener('touchend', this._handleMouseUp, true); + } var node = this.getNode(); this._fire('transformend', { evt: e, target: node }); if (node) { @@ -15541,7 +14339,7 @@ } destroy() { if (this.getStage() && this._cursorChange) { - this.getStage().content.style.cursor = ''; + this.getStage().content && (this.getStage().content.style.cursor = ''); } Group.prototype.destroy.call(this); this.detach(); @@ -15896,80 +14694,8 @@ * @param {Number} config.angle in degrees * @param {Number} config.radius * @param {Boolean} [config.clockwise] - * @param {String} [config.fill] fill color - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.fillAfterStrokeEnabled]. Should we draw fill AFTER stroke? Default is false. - * @param {Number} [config.hitStrokeWidth] size of the stroke on hit canvas. The default is "auto" - equals to strokeWidth - * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true - * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true - * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shadow for stroke. The default is true - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or square. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] - * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] + * @@shapeParams + * @@nodeParams * @example * // draw a wedge that's pointing downwards * var wedge = new Konva.Wedge({ diff --git a/package.json b/package.json index 4bdeb22b..a9093fec 100644 --- a/package.json +++ b/package.json @@ -15,16 +15,14 @@ "browser": "./lib/index.js", "typings": "./types/index-types.d.ts", "scripts": { - "start": "npm run watch & gulp", + "start": "npm run test:watch", "lint": "gulp lint", "build": "npm run compile && gulp build", "full-build": "npm run build && npm t", - "test": "node ./test/import-test.js && npm run test:build && mocha-headless-chrome -f ./test-build/parcel-runner.html -a disable-web-security && npm run test:types", - "test:node": "env TS_NODE_PROJECT=\"tsconfig.testing.json\" mocha -r ts-node/register test/unit-new/**/*.ts", - "test:node:watch": "env TS_NODE_PROJECT=\"tsconfig.testing.json\" mocha -r ts-node/register test/**/*.ts", - "test:types": "tsc -p ./test/ --noEmit", - "test:build": "parcel build ./test/parcel-runner.html --dist-dir test-build --target none --public-url ./ --no-source-maps", - "test:watch": "rm -rf ./parcel-cache && parcel serve ./test/parcel-runner.html", + "test": "node ./test/import-test.js && npm run test:build && mocha-headless-chrome -f ./test-build/unit-tests.html -a disable-web-security && npm run test:types", + "test:node": "env TS_NODE_PROJECT=\"./test/tsconfig.json\" mocha -r ts-node/register test/unit/**/*.ts", + "test:build": "parcel build ./test/unit-tests.html --dist-dir test-build --target none --public-url ./ --no-source-maps", + "test:watch": "rm -rf ./parcel-cache && parcel serve ./test/unit-tests.html ./test/manual-tests.html ./test/performance/bunnies.html", "prettier": "prettier --write \"src/**/*.js\" \"test/**/*.js\" --single-quote", "tsc": "tsc --removeComments", "rollup": "rollup -c", diff --git a/src/Node.ts b/src/Node.ts index 3f03e365..275aa36d 100644 --- a/src/Node.ts +++ b/src/Node.ts @@ -169,6 +169,7 @@ type NodeEventMap = GlobalEventHandlersEventMap & { }; export interface KonvaEventObject { + type: string; target: Shape | Stage; evt: EventType; currentTarget: Node; diff --git a/src/shapes/Circle.ts b/src/shapes/Circle.ts index 538b7b91..9491ca3b 100644 --- a/src/shapes/Circle.ts +++ b/src/shapes/Circle.ts @@ -5,7 +5,7 @@ import { getNumberValidator } from '../Validators'; import { _registerNode } from '../Global'; export interface CircleConfig extends ShapeConfig { - radius: number; + radius?: number; } /** diff --git a/test/assets/Ghostscript_Tiger.svg b/test/assets/Ghostscript_Tiger.svg deleted file mode 100644 index 671e556f..00000000 --- a/test/assets/Ghostscript_Tiger.svg +++ /dev/null @@ -1,725 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/test/assets/bamoon.jpg b/test/assets/bamoon.jpg deleted file mode 100644 index 210a19c0..00000000 Binary files a/test/assets/bamoon.jpg and /dev/null differ diff --git a/test/assets/cropped-darth.jpg b/test/assets/cropped-darth.jpg deleted file mode 100644 index 39972190..00000000 Binary files a/test/assets/cropped-darth.jpg and /dev/null differ diff --git a/test/assets/cropped-darth.png b/test/assets/cropped-darth.png deleted file mode 100644 index 7d2cb003..00000000 Binary files a/test/assets/cropped-darth.png and /dev/null differ diff --git a/test/assets/rabbit.png b/test/assets/rabbit.png deleted file mode 100644 index e9cbdfa0..00000000 Binary files a/test/assets/rabbit.png and /dev/null differ diff --git a/test/ifame.html b/test/ifame.html index 26cf5f15..386c0d7c 100644 --- a/test/ifame.html +++ b/test/ifame.html @@ -7,6 +7,7 @@ + diff --git a/test/lib/imagediff.js b/test/lib/imagediff.js deleted file mode 100644 index 800b8cea..00000000 --- a/test/lib/imagediff.js +++ /dev/null @@ -1,391 +0,0 @@ -// js-imagediff 1.0.3 -// (c) 2011-2012 Carl Sutherland, Humble Software -// Distributed under the MIT License -// For original source and documentation visit: -// http://www.github.com/HumbleSoftware/js-imagediff - -(function (name, definition) { - var root = this; - if (typeof module !== 'undefined') { - try { - var Canvas = require('canvas'); - } catch (e) { - throw new Error( - e.message + - '\n' + - 'Please see https://github.com/HumbleSoftware/js-imagediff#cannot-find-module-canvas\n' - ); - } - module.exports = definition(root, name, Canvas); - } else if (typeof define === 'function' && typeof define.amd === 'object') { - define(definition); - } else { - root[name] = definition(root, name); - } -})('imagediff', function (root, name, Canvas) { - var TYPE_ARRAY = /\[object Array\]/i, - TYPE_CANVAS = /\[object (Canvas|HTMLCanvasElement)\]/i, - TYPE_CONTEXT = /\[object CanvasRenderingContext2D\]/i, - TYPE_IMAGE = /\[object (Image|HTMLImageElement)\]/i, - TYPE_IMAGE_DATA = /\[object ImageData\]/i, - UNDEFINED = 'undefined', - canvas = getCanvas(), - context = canvas.getContext('2d'), - previous = root[name], - imagediff, - jasmine; - - // Creation - function getCanvas(width, height) { - var canvas = Canvas ? new Canvas() : document.createElement('canvas'); - if (width) canvas.width = width; - if (height) canvas.height = height; - return canvas; - } - function getImageData(width, height) { - canvas.width = width; - canvas.height = height; - context.clearRect(0, 0, width, height); - return context.createImageData(width, height); - } - - // Type Checking - function isImage(object) { - return isType(object, TYPE_IMAGE); - } - function isCanvas(object) { - return isType(object, TYPE_CANVAS); - } - function isContext(object) { - return isType(object, TYPE_CONTEXT); - } - function isImageData(object) { - return !!( - object && - isType(object, TYPE_IMAGE_DATA) && - typeof object.width !== UNDEFINED && - typeof object.height !== UNDEFINED && - typeof object.data !== UNDEFINED - ); - } - function isImageType(object) { - return ( - isImage(object) || - isCanvas(object) || - isContext(object) || - isImageData(object) - ); - } - function isType(object, type) { - return ( - typeof object === 'object' && - !!Object.prototype.toString.apply(object).match(type) - ); - } - - // Type Conversion - function copyImageData(imageData) { - var height = imageData.height, - width = imageData.width, - data = imageData.data, - newImageData, - newData, - i; - - canvas.width = width; - canvas.height = height; - newImageData = context.getImageData(0, 0, width, height); - newData = newImageData.data; - - for (i = imageData.data.length; i--; ) { - newData[i] = data[i]; - } - - return newImageData; - } - function toImageData(object) { - if (isImage(object)) { - return toImageDataFromImage(object); - } - if (isCanvas(object)) { - return toImageDataFromCanvas(object); - } - if (isContext(object)) { - return toImageDataFromContext(object); - } - if (isImageData(object)) { - return object; - } - } - function toImageDataFromImage(image) { - var height = image.height, - width = image.width; - canvas.width = width; - canvas.height = height; - context.clearRect(0, 0, width, height); - context.drawImage(image, 0, 0); - return context.getImageData(0, 0, width, height); - } - function toImageDataFromCanvas(canvas) { - var height = canvas.height, - width = canvas.width, - context = canvas.getContext('2d'); - return context.getImageData(0, 0, width, height); - } - function toImageDataFromContext(context) { - var canvas = context.canvas, - height = canvas.height, - width = canvas.width; - return context.getImageData(0, 0, width, height); - } - function toCanvas(object) { - var data = toImageData(object), - canvas = getCanvas(data.width, data.height), - context = canvas.getContext('2d'); - - context.putImageData(data, 0, 0); - return canvas; - } - - // ImageData Equality Operators - function equalWidth(a, b) { - return a.width === b.width; - } - function equalHeight(a, b) { - return a.height === b.height; - } - function equalDimensions(a, b) { - return equalHeight(a, b) && equalWidth(a, b); - } - function equal(a, b, tolerance) { - var aData = a.data, - bData = b.data, - length = aData.length, - i; - - tolerance = tolerance || 0; - - if (!equalDimensions(a, b)) return false; - for (i = length; i--; ) { - if (aData[i] !== bData[i] && Math.abs(aData[i] - bData[i]) > tolerance) { - console.log('Difference', Math.abs(aData[i] - bData[i])); - return false; - } - } - - return true; - } - - // Diff - function diff(a, b, options) { - return (equalDimensions(a, b) ? diffEqual : diffUnequal)(a, b, options); - } - function diffEqual(a, b, options) { - var height = a.height, - width = a.width, - c = getImageData(width, height), // c = a - b - aData = a.data, - bData = b.data, - cData = c.data, - length = cData.length, - row, - column, - i, - j, - k, - v; - - for (i = 0; i < length; i += 4) { - cData[i] = Math.abs(aData[i] - bData[i]); - cData[i + 1] = Math.abs(aData[i + 1] - bData[i + 1]); - cData[i + 2] = Math.abs(aData[i + 2] - bData[i + 2]); - cData[i + 3] = Math.abs(255 - Math.abs(aData[i + 3] - bData[i + 3])); - } - - return c; - } - function diffUnequal(a, b, options) { - var height = Math.max(a.height, b.height), - width = Math.max(a.width, b.width), - c = getImageData(width, height), // c = a - b - aData = a.data, - bData = b.data, - cData = c.data, - align = options && options.align, - rowOffset, - columnOffset, - row, - column, - i, - j, - k, - v; - - for (i = cData.length - 1; i > 0; i = i - 4) { - cData[i] = 255; - } - - // Add First Image - offsets(a); - for (row = a.height; row--; ) { - for (column = a.width; column--; ) { - i = 4 * ((row + rowOffset) * width + (column + columnOffset)); - j = 4 * (row * a.width + column); - cData[i + 0] = aData[j + 0]; // r - cData[i + 1] = aData[j + 1]; // g - cData[i + 2] = aData[j + 2]; // b - // cData[i+3] = aData[j+3]; // a - } - } - - // Subtract Second Image - offsets(b); - for (row = b.height; row--; ) { - for (column = b.width; column--; ) { - i = 4 * ((row + rowOffset) * width + (column + columnOffset)); - j = 4 * (row * b.width + column); - cData[i + 0] = Math.abs(cData[i + 0] - bData[j + 0]); // r - cData[i + 1] = Math.abs(cData[i + 1] - bData[j + 1]); // g - cData[i + 2] = Math.abs(cData[i + 2] - bData[j + 2]); // b - } - } - - // Helpers - function offsets(imageData) { - if (align === 'top') { - rowOffset = 0; - columnOffset = 0; - } else { - rowOffset = Math.floor((height - imageData.height) / 2); - columnOffset = Math.floor((width - imageData.width) / 2); - } - } - - return c; - } - - // Validation - function checkType() { - var i; - for (i = 0; i < arguments.length; i++) { - if (!isImageType(arguments[i])) { - throw { - name: 'ImageTypeError', - message: 'Submitted object was not an image.', - }; - } - } - } - - // Jasmine Matchers - function get(element, content) { - element = document.createElement(element); - if (element && content) { - element.innerHTML = content; - } - return element; - } - - jasmine = { - toBeImageData: function () { - return imagediff.isImageData(this.actual); - }, - - toImageDiffEqual: function (expected, tolerance) { - if (typeof document !== UNDEFINED) { - this.message = function () { - var div = get('div'), - a = get('div', '
Actual:
'), - b = get('div', '
Expected:
'), - c = get('div', '
Diff:
'), - diff = imagediff.diff(this.actual, expected), - canvas = getCanvas(), - context; - - canvas.height = diff.height; - canvas.width = diff.width; - - div.style.overflow = 'hidden'; - a.style.float = 'left'; - b.style.float = 'left'; - c.style.float = 'left'; - - context = canvas.getContext('2d'); - context.putImageData(diff, 0, 0); - - a.appendChild(toCanvas(this.actual)); - b.appendChild(toCanvas(expected)); - c.appendChild(canvas); - - div.appendChild(a); - div.appendChild(b); - div.appendChild(c); - - return [div, 'Expected not to be equal.']; - }; - } - - return imagediff.equal(this.actual, expected, tolerance); - }, - }; - - // Image Output - function imageDataToPNG(imageData, outputFile, callback) { - var canvas = toCanvas(imageData), - base64Data, - decodedImage; - - callback = callback || Function; - - base64Data = canvas.toDataURL().replace(/^data:image\/\w+;base64,/, ''); - decodedImage = new Buffer(base64Data, 'base64'); - require('fs').writeFile(outputFile, decodedImage, callback); - } - - // Definition - imagediff = { - createCanvas: getCanvas, - createImageData: getImageData, - - isImage: isImage, - isCanvas: isCanvas, - isContext: isContext, - isImageData: isImageData, - isImageType: isImageType, - - toImageData: function (object) { - checkType(object); - if (isImageData(object)) { - return copyImageData(object); - } - return toImageData(object); - }, - - equal: function (a, b, tolerance) { - checkType(a, b); - a = toImageData(a); - b = toImageData(b); - return equal(a, b, tolerance); - }, - diff: function (a, b, options) { - checkType(a, b); - a = toImageData(a); - b = toImageData(b); - return diff(a, b, options); - }, - - jasmine: jasmine, - - // Compatibility - noConflict: function () { - root[name] = previous; - return imagediff; - }, - }; - - if (typeof module !== 'undefined') { - imagediff.imageDataToPNG = imageDataToPNG; - } - - return imagediff; -}); diff --git a/test/lib/stats.js b/test/lib/stats.js deleted file mode 100644 index 3002e162..00000000 --- a/test/lib/stats.js +++ /dev/null @@ -1,105 +0,0 @@ -// stats.js - http://github.com/mrdoob/stats.js -var Stats = function () { - var l = Date.now(), - m = l, - g = 0, - n = Infinity, - o = 0, - h = 0, - p = Infinity, - q = 0, - r = 0, - s = 0, - f = document.createElement('div'); - f.id = 'stats'; - f.addEventListener( - 'mousedown', - function (b) { - b.preventDefault(); - t(++s % 2); - }, - !1 - ); - f.style.cssText = 'width:80px;opacity:0.9;cursor:pointer'; - var a = document.createElement('div'); - a.id = 'fps'; - a.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002'; - f.appendChild(a); - var i = document.createElement('div'); - i.id = 'fpsText'; - i.style.cssText = - 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px'; - i.innerHTML = 'FPS'; - a.appendChild(i); - var c = document.createElement('div'); - c.id = 'fpsGraph'; - c.style.cssText = - 'position:relative;width:74px;height:30px;background-color:#0ff'; - for (a.appendChild(c); 74 > c.children.length; ) { - var j = document.createElement('span'); - j.style.cssText = 'width:1px;height:30px;float:left;background-color:#113'; - c.appendChild(j); - } - var d = document.createElement('div'); - d.id = 'ms'; - d.style.cssText = - 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none'; - f.appendChild(d); - var k = document.createElement('div'); - k.id = 'msText'; - k.style.cssText = - 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px'; - k.innerHTML = 'MS'; - d.appendChild(k); - var e = document.createElement('div'); - e.id = 'msGraph'; - e.style.cssText = - 'position:relative;width:74px;height:30px;background-color:#0f0'; - for (d.appendChild(e); 74 > e.children.length; ) - (j = document.createElement('span')), - (j.style.cssText = - 'width:1px;height:30px;float:left;background-color:#131'), - e.appendChild(j); - var t = function (b) { - s = b; - switch (s) { - case 0: - a.style.display = 'block'; - d.style.display = 'none'; - break; - case 1: - (a.style.display = 'none'), (d.style.display = 'block'); - } - }; - return { - REVISION: 11, - domElement: f, - setMode: t, - begin: function () { - l = Date.now(); - }, - end: function () { - var b = Date.now(); - g = b - l; - n = Math.min(n, g); - o = Math.max(o, g); - k.textContent = g + ' MS (' + n + '-' + o + ')'; - var a = Math.min(30, 30 - 30 * (g / 200)); - e.appendChild(e.firstChild).style.height = a + 'px'; - r++; - b > m + 1e3 && - ((h = Math.round((1e3 * r) / (b - m))), - (p = Math.min(p, h)), - (q = Math.max(q, h)), - (i.textContent = h + ' FPS (' + p + '-' + q + ')'), - (a = Math.min(30, 30 - 30 * (h / 100))), - (c.appendChild(c.firstChild).style.height = a + 'px'), - (m = b), - (r = 0)); - return b; - }, - update: function () { - l = this.end(); - }, - }; -}; diff --git a/test/manual-tests.html b/test/manual-tests.html new file mode 100644 index 00000000..06b519af --- /dev/null +++ b/test/manual-tests.html @@ -0,0 +1,70 @@ + + +
+ + + + + + + + + + +
+ + + + + diff --git a/test/unit-new/filters/Blur-test.ts b/test/manual/Blur-test.ts similarity index 94% rename from test/unit-new/filters/Blur-test.ts rename to test/manual/Blur-test.ts index c266ad80..46bffcba 100644 --- a/test/unit-new/filters/Blur-test.ts +++ b/test/manual/Blur-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, loadImage } from '../utis'; +import { addStage, Konva, loadImage } from '../unit/utis'; describe('Blur', function () { // ====================================================== @@ -88,26 +88,14 @@ describe('Blur', function () { layer.add(group); stage.add(layer); - group.cache({ - x: -150, - y: -150, - width: 300, - height: 300, - }); + group.cache(); - group.offset({ - x: 150, - y: 150, - }); + group.offset(); group.filters([Konva.Filters.Blur]); group.blurRadius(20); layer.draw(); - - //document.body.appendChild(group._getCanvasCache().hit._canvas); - - //showHit(layer); }); // ====================================================== @@ -240,7 +228,7 @@ describe('Blur', function () { var tween = new Konva.Tween({ node: darth, - duration: 2.0, + duration: 1, blurRadius: 0, easing: Konva.Easings.EaseInOut, }); diff --git a/test/unit-new/filters/Brighten-test.ts b/test/manual/Brighten-test.ts similarity index 98% rename from test/unit-new/filters/Brighten-test.ts rename to test/manual/Brighten-test.ts index 5f28249f..8ba30fb1 100644 --- a/test/unit-new/filters/Brighten-test.ts +++ b/test/manual/Brighten-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, loadImage } from '../utis'; +import { addStage, Konva, loadImage } from '../unit/utis'; describe('Brighten', function () { // ====================================================== diff --git a/test/unit-new/filters/Contrast-test.ts b/test/manual/Contrast-test.ts similarity index 97% rename from test/unit-new/filters/Contrast-test.ts rename to test/manual/Contrast-test.ts index 14744f85..45265482 100644 --- a/test/unit-new/filters/Contrast-test.ts +++ b/test/manual/Contrast-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, loadImage } from '../utis'; +import { addStage, Konva, loadImage } from '../unit/utis'; describe('Filter Contrast', function () { // ====================================================== diff --git a/test/unit-new/filters/Emboss-test.ts b/test/manual/Emboss-test.ts similarity index 97% rename from test/unit-new/filters/Emboss-test.ts rename to test/manual/Emboss-test.ts index 25d2e72c..e3cdfe9f 100644 --- a/test/unit-new/filters/Emboss-test.ts +++ b/test/manual/Emboss-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, loadImage } from '../utis'; +import { addStage, Konva, loadImage } from '../unit/utis'; describe('Emboss', function () { // ====================================================== diff --git a/test/unit-new/filters/Enhance-test.ts b/test/manual/Enhance-test.ts similarity index 96% rename from test/unit-new/filters/Enhance-test.ts rename to test/manual/Enhance-test.ts index 766ba764..77faf631 100644 --- a/test/unit-new/filters/Enhance-test.ts +++ b/test/manual/Enhance-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, loadImage } from '../utis'; +import { addStage, Konva, loadImage } from '../unit/utis'; describe('Enhance', function () { // ====================================================== diff --git a/test/unit-new/filters/Filter-test.ts b/test/manual/Filter-test.ts similarity index 88% rename from test/unit-new/filters/Filter-test.ts rename to test/manual/Filter-test.ts index 793245dd..19c44ca2 100644 --- a/test/unit-new/filters/Filter-test.ts +++ b/test/manual/Filter-test.ts @@ -1,4 +1,4 @@ -import { addStage, Konva, cloneAndCompareLayer } from '../utis'; +import { addStage, Konva, cloneAndCompareLayer } from '../unit/utis'; describe('Filter', function () { it('pixelRaio check', function () { diff --git a/test/unit-new/filters/Grayscale-test.ts b/test/manual/Grayscale-test.ts similarity index 96% rename from test/unit-new/filters/Grayscale-test.ts rename to test/manual/Grayscale-test.ts index 4b298659..8b5ec3ae 100644 --- a/test/unit-new/filters/Grayscale-test.ts +++ b/test/manual/Grayscale-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, loadImage } from '../utis'; +import { addStage, Konva, loadImage } from '../unit/utis'; describe('Grayscale', function () { // ====================================================== diff --git a/test/unit-new/filters/HSL-test.ts b/test/manual/HSL-test.ts similarity index 97% rename from test/unit-new/filters/HSL-test.ts rename to test/manual/HSL-test.ts index b96d71ab..f0848ab9 100644 --- a/test/unit-new/filters/HSL-test.ts +++ b/test/manual/HSL-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, loadImage } from '../utis'; +import { addStage, Konva, loadImage } from '../unit/utis'; describe('HSL', function () { // ====================================================== diff --git a/test/unit-new/filters/HSV-test.ts b/test/manual/HSV-test.ts similarity index 98% rename from test/unit-new/filters/HSV-test.ts rename to test/manual/HSV-test.ts index 0375f5ca..896a27c9 100644 --- a/test/unit-new/filters/HSV-test.ts +++ b/test/manual/HSV-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, loadImage } from '../utis'; +import { addStage, Konva, loadImage } from '../unit/utis'; describe('HSV', function () { // ====================================================== diff --git a/test/unit-new/filters/Invert-test.ts b/test/manual/Invert-test.ts similarity index 96% rename from test/unit-new/filters/Invert-test.ts rename to test/manual/Invert-test.ts index 5205a346..f08685dc 100644 --- a/test/unit-new/filters/Invert-test.ts +++ b/test/manual/Invert-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, loadImage } from '../utis'; +import { addStage, Konva, loadImage } from '../unit/utis'; describe('Invert', function () { // ====================================================== diff --git a/test/unit-new/filters/Kaleidoscope-test.ts b/test/manual/Kaleidoscope-test.ts similarity index 97% rename from test/unit-new/filters/Kaleidoscope-test.ts rename to test/manual/Kaleidoscope-test.ts index 07dbef92..e98e7a42 100644 --- a/test/unit-new/filters/Kaleidoscope-test.ts +++ b/test/manual/Kaleidoscope-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, loadImage } from '../utis'; +import { addStage, Konva, loadImage } from '../unit/utis'; describe('Kaleidoscope', function () { // ====================================================== diff --git a/test/manual/manual-test.js b/test/manual/Manual-test.ts similarity index 92% rename from test/manual/manual-test.js rename to test/manual/Manual-test.ts index 3b599a6d..263aaad5 100644 --- a/test/manual/manual-test.js +++ b/test/manual/Manual-test.ts @@ -1,6 +1,10 @@ -suite('Manual', function () { +import { assert } from 'chai'; + +import { addStage, Konva, loadImage } from '../unit/utis'; + +describe('Manual', function () { // ====================================================== - test('oscillation animation', function () { + it('oscillation animation', function () { var stage = addStage(); var layer = new Konva.Layer(); @@ -33,7 +37,7 @@ suite('Manual', function () { var centerX = stage.width() / 2; var anim = new Konva.Animation(function (frame) { - hexagon.setX( + hexagon.x( amplitude * Math.sin((new Date().getTime() * 2 * Math.PI) / period) + centerX ); @@ -43,7 +47,7 @@ suite('Manual', function () { }); // ====================================================== - test('rotation animation', function () { + it('rotation animation', function () { var stage = addStage(); var layer = new Konva.Layer(); var rect; @@ -76,7 +80,7 @@ suite('Manual', function () { }); // ====================================================== - test('tween node', function () { + it('tween node', function () { var stage = addStage(); var layer = new Konva.Layer(); var rect = new Konva.Rect({ @@ -108,7 +112,7 @@ suite('Manual', function () { }); // ====================================================== - test('tween spline', function () { + it('tween spline', function () { var stage = addStage(); var layer = new Konva.Layer(); @@ -147,7 +151,7 @@ suite('Manual', function () { }); // ====================================================== - test('blur and tween spline', function () { + it('blur and tween spline', function () { var stage = addStage(); var layer = new Konva.Layer(); @@ -201,7 +205,7 @@ suite('Manual', function () { tween.play(); }); - test('Make sure that all texts are inside rectangles.', function () { + it('Make sure that all texts are inside rectangles.', function () { var stage = addStage(); var layer = new Konva.Layer(); @@ -243,7 +247,7 @@ suite('Manual', function () { stage.add(layer); }); - test('change hit graph ratio', function () { + it('change hit graph ratio', function () { var stage = addStage(); var layer = new Konva.Layer(); var circle = new Konva.Circle({ @@ -280,19 +284,19 @@ suite('Manual', function () { }); }); - test('tween color', function () { + it('tween color', function () { var stage = addStage(); var layer = new Konva.Layer(); var circle = new Konva.Circle({ x: 100, - y: stage.getHeight() / 2, + y: stage.height() / 2, radius: 70, fill: 'red', stroke: 'blue', strokeWidth: 4, - shadowOffsetX: 10, + shadowOffx: 10, shadowOffsetY: 10, shadowColor: 'black', }); @@ -317,7 +321,7 @@ suite('Manual', function () { }); // ====================================================== - test('create image hit region with pixelRatio, look at hit, test hit with mouseover', function (done) { + it('create image hit region with pixelRatio, look at hit, test hit with mouseover', function (done) { var imageObj = new Image(); Konva.pixelRatio = 2; @@ -357,7 +361,7 @@ suite('Manual', function () { }); // ====================================================== - test('image hit region with alpha threshold, mouseover circle', function (done) { + it('image hit region with alpha threshold, mouseover circle', function (done) { var stage = addStage(); var layer = new Konva.Layer(); stage.add(layer); diff --git a/test/unit-new/filters/Mask-test.ts b/test/manual/Mask-test.ts similarity index 92% rename from test/unit-new/filters/Mask-test.ts rename to test/manual/Mask-test.ts index d56679a2..03d96222 100644 --- a/test/unit-new/filters/Mask-test.ts +++ b/test/manual/Mask-test.ts @@ -1,4 +1,4 @@ -import { addStage, Konva, loadImage } from '../utis'; +import { addStage, Konva, loadImage } from '../unit/utis'; describe('Mask', function () { // ====================================================== diff --git a/test/unit-new/filters/Noise-test.ts b/test/manual/Noise-test.ts similarity index 93% rename from test/unit-new/filters/Noise-test.ts rename to test/manual/Noise-test.ts index 75ef0439..e09c7334 100644 --- a/test/unit-new/filters/Noise-test.ts +++ b/test/manual/Noise-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, loadImage } from '../utis'; +import { addStage, Konva, loadImage } from '../unit/utis'; describe('Noise', function () { // ====================================================== diff --git a/test/unit-new/filters/Pixelate-test.ts b/test/manual/Pixelate-test.ts similarity index 93% rename from test/unit-new/filters/Pixelate-test.ts rename to test/manual/Pixelate-test.ts index 65c5cc34..b68d3a71 100644 --- a/test/unit-new/filters/Pixelate-test.ts +++ b/test/manual/Pixelate-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, loadImage } from '../utis'; +import { addStage, Konva, loadImage } from '../unit/utis'; describe('Pixelate', function () { // ====================================================== diff --git a/test/unit-new/filters/Posterize-test.ts b/test/manual/Posterize-test.ts similarity index 93% rename from test/unit-new/filters/Posterize-test.ts rename to test/manual/Posterize-test.ts index dfe28102..057c7365 100644 --- a/test/unit-new/filters/Posterize-test.ts +++ b/test/manual/Posterize-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, loadImage } from '../utis'; +import { addStage, Konva, loadImage } from '../unit/utis'; describe('Posterize', function () { // ====================================================== diff --git a/test/unit-new/filters/RGB-test.ts b/test/manual/RGB-test.ts similarity index 97% rename from test/unit-new/filters/RGB-test.ts rename to test/manual/RGB-test.ts index f2d65cb4..2f2d5145 100644 --- a/test/unit-new/filters/RGB-test.ts +++ b/test/manual/RGB-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, loadImage } from '../utis'; +import { addStage, Konva, loadImage } from '../unit/utis'; describe('RGB', function () { // ====================================================== diff --git a/test/unit-new/filters/RGBA-test.ts b/test/manual/RGBA-test.ts similarity index 96% rename from test/unit-new/filters/RGBA-test.ts rename to test/manual/RGBA-test.ts index 9ac90e72..71e29c9c 100644 --- a/test/unit-new/filters/RGBA-test.ts +++ b/test/manual/RGBA-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, loadImage } from '../utis'; +import { addStage, Konva, loadImage } from '../unit/utis'; describe('RGBA', function () { // ====================================================== diff --git a/test/unit-new/filters/Sepia-test.ts b/test/manual/Sepia-test.ts similarity index 96% rename from test/unit-new/filters/Sepia-test.ts rename to test/manual/Sepia-test.ts index 82f3a0e0..58f5f97a 100644 --- a/test/unit-new/filters/Sepia-test.ts +++ b/test/manual/Sepia-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, loadImage } from '../utis'; +import { addStage, Konva, loadImage } from '../unit/utis'; describe('Filter Sepia', function () { // ====================================================== diff --git a/test/unit-new/filters/Solarize-test.ts b/test/manual/Solarize-test.ts similarity index 91% rename from test/unit-new/filters/Solarize-test.ts rename to test/manual/Solarize-test.ts index 43a4a618..4858b6d2 100644 --- a/test/unit-new/filters/Solarize-test.ts +++ b/test/manual/Solarize-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, loadImage } from '../utis'; +import { addStage, Konva, loadImage } from '../unit/utis'; describe('Solarize', function () { // ====================================================== diff --git a/test/unit-new/filters/Threshold-test.ts b/test/manual/Threshold-test.ts similarity index 93% rename from test/unit-new/filters/Threshold-test.ts rename to test/manual/Threshold-test.ts index b4b8b903..3f59d773 100644 --- a/test/unit-new/filters/Threshold-test.ts +++ b/test/manual/Threshold-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, loadImage } from '../utis'; +import { addStage, Konva, loadImage } from '../unit/utis'; describe('Threshold', function () { // ====================================================== diff --git a/test/memLeakTest.html b/test/memLeakTest.html deleted file mode 100644 index 26ff4f56..00000000 --- a/test/memLeakTest.html +++ /dev/null @@ -1,59 +0,0 @@ - - - - KonvaJS Memory leak test - - - - Check memory before tests. Open console. Run "run()". See memory after. -
- - - - diff --git a/test/memory/build-destroy-star.html b/test/memory/build-destroy-star.html deleted file mode 100644 index 7bb5e4e0..00000000 --- a/test/memory/build-destroy-star.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - - -
- - - - - - - \ No newline at end of file diff --git a/test/memory/build-destroy-text.html b/test/memory/build-destroy-text.html deleted file mode 100644 index ec82a9b4..00000000 --- a/test/memory/build-destroy-text.html +++ /dev/null @@ -1,60 +0,0 @@ - - - - - - -
- - - - - - - \ No newline at end of file diff --git a/test/node-runner.js b/test/node-runner.js deleted file mode 100644 index 2591088c..00000000 --- a/test/node-runner.js +++ /dev/null @@ -1,123 +0,0 @@ -var fs = require('fs'), - Konva = require('../dist/konva-dev'); - -global.Konva = Konva; -Konva.enableTrace = true; - -// Config MINIMAL test environment -global.suite = function (title, func) { - console.log('Suite : ' + title); - func(); -}; - -global.test = function (title, func) { - try { - console.log('Run test: ' + title); - func(function () {}); - } catch (e) { - console.log('Error at ' + title, e); - throw e; - } -}; -test.skip = function () {}; -global.assert = function (condtion, message) { - if (!condtion) { - throw 'assert throw:' + message; - } -}; -global.assert.equal = function (left, right) { - if (left !== right) { - } -}; -global.assert.notEqual = function (left, right) { - if (left === right) { - throw 'assert throw'; - } -}; - -global.addStage = function () { - return new Konva.Stage({ - width: 578, - height: 200, - }); -}; - -// Some utils for testing -global.konvaContainer = Konva.document.createElement('div'); -Konva.document.body.appendChild(konvaContainer); -global.showHit = global.addContainer = function () {}; -global.Image = Konva._nodeCanvas.Image; -Image.prototype.style = {}; -eval(fs.readFileSync('./test/assets/tiger.js') + ''); -eval(fs.readFileSync('./test/assets/worldMap.js') + ''); -global.tiger = tiger; -global.worldMap = worldMap; - -// now load all tests -require('./unit/Global-test.js'); -require('./unit/Node-test.js'); -require('./unit/Global-test.js'); -require('./unit/Util-test.js'); -require('./unit/Canvas-test.js'); -require('./unit/Node-test.js'); -require('./unit/Container-test.js'); -require('./unit/Stage-test.js'); -require('./unit/Layer-test.js'); -require('./unit/Shape-test.js'); -require('./unit/Collection-test.js'); - -// shapes --> -require('./unit/shapes/Rect-test.js'); -require('./unit/shapes/Circle-test.js'); -require('./unit/shapes/Image-test.js'); -require('./unit/shapes/Line-test.js'); -require('./unit/shapes/Text-test.js'); -require('./unit/shapes/Blob-test.js'); -require('./unit/shapes/Ellipse-test.js'); -require('./unit/shapes/Polygon-test.js'); -require('./unit/shapes/Spline-test.js'); -require('./unit/shapes/Sprite-test.js'); -require('./unit/shapes/Wedge-test.js'); -require('./unit/shapes/Arc-test.js'); -require('./unit/shapes/Ring-test.js'); - -// // extensions --> -require('./unit/Animation-test.js'); -require('./unit/DragAndDrop-test.js'); -require('./unit/Tween-test.js'); - -// // plugins --> -require('./unit/plugins/Label-test.js'); -require('./unit/plugins/Star-test.js'); -require('./unit/plugins/RegularPolygon-test.js'); -require('./unit/plugins/Path-test.js'); -require('./unit/plugins/TextPath-test.js'); - -// // filters --> -require('./unit/filters/Blur-test.js'); -require('./unit/filters/Brighten-test.js'); -require('./unit/filters/RGB-test.js'); -require('./unit/filters/HSV-test.js'); -require('./unit/filters/HSL-test.js'); -require('./unit/filters/Invert-test.js'); -require('./unit/filters/Mask-test.js'); -require('./unit/filters/Grayscale-test.js'); -require('./unit/filters/Enhance-test.js'); -require('./unit/filters/Pixelate-test.js'); -require('./unit/filters/Noise-test.js'); -require('./unit/filters/Threshold-test.js'); -require('./unit/filters/Posterize-test.js'); -require('./unit/filters/Sepia-test.js'); -require('./unit/filters/Contrast-test.js'); -require('./unit/filters/Emboss-test.js'); -require('./unit/filters/Solarize-test.js'); -require('./unit/filters/Kaleidoscope-test.js'); - -// //=============== functional tests ================--> - -require('./functional/MouseEvents-test.js'); -require('./functional/TouchEvents-test.js'); -//require('./functional/DragAndDropEvents-test.js'); disabled because of simplest test configuration - -// //=============== manual tests ================--> -// require('./manual/manual-test.js'); disabled because of unlimited animation diff --git a/test/parcel-runner.html b/test/parcel-runner.html deleted file mode 100644 index 1fbd14d1..00000000 --- a/test/parcel-runner.html +++ /dev/null @@ -1,37 +0,0 @@ - - -
- - - - - - - - - -
- - - - - diff --git a/test/parcel-runner.ts b/test/parcel-runner.ts deleted file mode 100644 index bfa96d9c..00000000 --- a/test/parcel-runner.ts +++ /dev/null @@ -1,34 +0,0 @@ -import './unit-new/Animation-test.ts'; -import './unit-new/Canvas-test.ts'; -import './unit-new/Container-test.ts'; -import './unit-new/Context-test.ts'; -import './unit-new/DragAndDrop-test.ts'; -import './unit-new/Global-test.ts'; -import './unit-new/Group-test.ts'; -import './unit-new/Layer-test.ts'; -import './unit-new/Util-test.ts'; -import './unit-new/Stage-test.ts'; -import './unit-new/Shape-test.ts'; -import './unit-new/Node-test.ts'; -import './unit-new/Node-cache-test.ts'; - -import './unit-new/shapes/Rect-test.ts'; -import './unit-new/shapes/Circle-test.ts'; -import './unit-new/shapes/Image-test.ts'; -import './unit-new/shapes/Line-test.ts'; -import './unit-new/shapes/Text-test.ts'; -import './unit-new/shapes/Blob-test.ts'; -import './unit-new/shapes/Ellipse-test.ts'; -import './unit-new/shapes/Polygon-test.ts'; -import './unit-new/shapes/Spline-test.ts'; -import './unit-new/shapes/Sprite-test.ts'; -import './unit-new/shapes/Wedge-test.ts'; -import './unit-new/shapes/Arc-test.ts'; -import './unit-new/shapes/Ring-test.ts'; -import './unit-new/shapes/Label-test.ts'; -import './unit-new/shapes/Star-test.ts'; -import './unit-new/shapes/RegularPolygon-test.ts'; -import './unit-new/shapes/Path-test.ts'; -import './unit-new/shapes/TextPath-test.ts'; -import './unit-new/shapes/Arrow-test.ts'; -import './unit-new/shapes/Transformer-test.ts'; diff --git a/test/performance/bunnies.html b/test/performance/bunnies.html index 01294e82..0215b18f 100644 --- a/test/performance/bunnies.html +++ b/test/performance/bunnies.html @@ -10,10 +10,13 @@
- - + + + + - - - - - - \ No newline at end of file diff --git a/test/performance/rotate-cached-star.html b/test/performance/rotate-cached-star.html deleted file mode 100644 index 07ee9a75..00000000 --- a/test/performance/rotate-cached-star.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - - -
- - - - - - - - \ No newline at end of file diff --git a/test/runner.html b/test/runner.html deleted file mode 100644 index eb7c8c1a..00000000 --- a/test/runner.html +++ /dev/null @@ -1,191 +0,0 @@ - - - - - KonvaJS Mocha Tests - - - - - -

KonvaJS Test

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/test/sandbox.html b/test/sandbox.html new file mode 100644 index 00000000..54efb808 --- /dev/null +++ b/test/sandbox.html @@ -0,0 +1,196 @@ + + + + + KonvaJS Sandbox + + + + + + + + + + + Some text +
+ + + + diff --git a/test/sandbox2.html b/test/sandbox2.html deleted file mode 100644 index 0caa9810..00000000 --- a/test/sandbox2.html +++ /dev/null @@ -1,58 +0,0 @@ - - - - - Konva Offscreen Canvas Demo - - - - - - - - diff --git a/test/setStats.js b/test/setStats.js deleted file mode 100644 index 454cba0c..00000000 --- a/test/setStats.js +++ /dev/null @@ -1,29 +0,0 @@ -window.requestAnimFrame = (function (callback) { - return ( - window.requestAnimationFrame || - window.webkitRequestAnimationFrame || - window.mozRequestAnimationFrame || - window.oRequestAnimationFrame || - window.msRequestAnimationFrame || - function (callback) { - window.setTimeout(callback, 1000 / 30); - } - ); -})(); - -stats = new Stats(); -stats.setMode(0); -stats.domElement.style.position = 'fixed'; -stats.domElement.style.left = '0px'; -stats.domElement.style.top = '0px'; -document.body.appendChild(stats.domElement); - -function setStats() { - stats.begin(); - requestAnimFrame(function () { - stats.end(); - setStats(); - }); -} - -setStats(); diff --git a/test/test.html b/test/test.html deleted file mode 100644 index 8a9e6e6c..00000000 --- a/test/test.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - - - -
- - - - - diff --git a/test/tsconfig.json b/test/tsconfig.json index 819141e6..19e85afc 100644 --- a/test/tsconfig.json +++ b/test/tsconfig.json @@ -1,6 +1,10 @@ { "compilerOptions": { - "strict": true + "outDir": "lib", + "target": "ES2015", + "noEmitOnError": true, + "moduleResolution": "node", + "lib": ["ES2015", "dom"] }, - "files": ["../types/index-types.d.ts"] -} \ No newline at end of file + "include": ["../src/*.ts"] +} diff --git a/test/unit-tests.html b/test/unit-tests.html new file mode 100644 index 00000000..64bf00c0 --- /dev/null +++ b/test/unit-tests.html @@ -0,0 +1,112 @@ + + +
+ + + + + + + + + + + +
+ + + + + diff --git a/test/unit-new/Animation-test.ts b/test/unit/Animation-test.ts similarity index 100% rename from test/unit-new/Animation-test.ts rename to test/unit/Animation-test.ts diff --git a/test/unit-new/shapes/Arc-test.ts b/test/unit/Arc-test.ts similarity index 99% rename from test/unit-new/shapes/Arc-test.ts rename to test/unit/Arc-test.ts index fb7c7b2b..b1d9b100 100644 --- a/test/unit-new/shapes/Arc-test.ts +++ b/test/unit/Arc-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, createCanvas, compareLayerAndCanvas } from '../utis'; +import { addStage, Konva, createCanvas, compareLayerAndCanvas } from './utis'; describe('Arc', function () { // ====================================================== diff --git a/test/unit-new/shapes/Arrow-test.ts b/test/unit/Arrow-test.ts similarity index 98% rename from test/unit-new/shapes/Arrow-test.ts rename to test/unit/Arrow-test.ts index dd2a8690..8fb65a48 100644 --- a/test/unit-new/shapes/Arrow-test.ts +++ b/test/unit/Arrow-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, cloneAndCompareLayer } from '../utis'; +import { addStage, Konva, cloneAndCompareLayer } from './utis'; describe('Arrow', function () { // ====================================================== diff --git a/test/unit-new/shapes/Blob-test.ts b/test/unit/Blob-test.ts similarity index 96% rename from test/unit-new/shapes/Blob-test.ts rename to test/unit/Blob-test.ts index 9cf685ec..382f2191 100644 --- a/test/unit-new/shapes/Blob-test.ts +++ b/test/unit/Blob-test.ts @@ -1,7 +1,7 @@ import { assert } from 'chai'; -import { Line } from '../../../src/shapes/Line'; +import { Line } from '../../src/shapes/Line'; -import { addStage, Konva, cloneAndCompareLayer } from '../utis'; +import { addStage, Konva, cloneAndCompareLayer } from './utis'; describe('Blob', function () { // ====================================================== diff --git a/test/unit-new/Canvas-test.ts b/test/unit/Canvas-test.ts similarity index 100% rename from test/unit-new/Canvas-test.ts rename to test/unit/Canvas-test.ts diff --git a/test/unit-new/shapes/Circle-test.ts b/test/unit/Circle-test.ts similarity index 99% rename from test/unit-new/shapes/Circle-test.ts rename to test/unit/Circle-test.ts index e0f6d23d..28169bad 100644 --- a/test/unit-new/shapes/Circle-test.ts +++ b/test/unit/Circle-test.ts @@ -6,7 +6,7 @@ import { createCanvas, compareLayerAndCanvas, loadImage, -} from '../utis'; +} from './utis'; describe('Circle', function () { // ====================================================== diff --git a/test/unit-new/Container-test.ts b/test/unit/Container-test.ts similarity index 100% rename from test/unit-new/Container-test.ts rename to test/unit/Container-test.ts diff --git a/test/unit-new/Context-test.ts b/test/unit/Context-test.ts similarity index 100% rename from test/unit-new/Context-test.ts rename to test/unit/Context-test.ts diff --git a/test/unit-new/DragAndDrop-test.ts b/test/unit/DragAndDrop-test.ts similarity index 100% rename from test/unit-new/DragAndDrop-test.ts rename to test/unit/DragAndDrop-test.ts diff --git a/test/functional/DragAndDropEvents-test.js b/test/unit/DragAndDropEvents-test.ts similarity index 79% rename from test/functional/DragAndDropEvents-test.js rename to test/unit/DragAndDropEvents-test.ts index c9f45ffc..c65a4aee 100644 --- a/test/functional/DragAndDropEvents-test.js +++ b/test/unit/DragAndDropEvents-test.ts @@ -1,6 +1,16 @@ -suite('DragAndDropEvents', function () { +import { assert } from 'chai'; + +import { + addStage, + Konva, + simulateMouseDown, + simulateMouseMove, + simulateMouseUp, +} from './utis'; + +describe('DragAndDropEvents', function () { // ====================================================== - test('test dragstart, dragmove, dragend', function (done) { + it('test dragstart, dragmove, dragend', function (done) { var stage = addStage(); var layer = new Konva.Layer(); @@ -17,7 +27,7 @@ suite('DragAndDropEvents', function () { var circle = new Konva.Circle({ x: 380, - y: stage.getHeight() / 2, + y: stage.height() / 2, radius: 70, strokeWidth: 4, fill: 'red', @@ -34,7 +44,6 @@ suite('DragAndDropEvents', function () { var dragStart = false; var dragMove = false; var dragEnd = false; - var mouseup = false; var events = []; circle.on('dragstart', function () { @@ -60,7 +69,7 @@ suite('DragAndDropEvents', function () { /* * simulate drag and drop */ - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 380, y: 98, }); @@ -72,7 +81,7 @@ suite('DragAndDropEvents', function () { assert(Konva.isDragReady(), ' isDragReady()) should be true 6'); setTimeout(function () { - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 385, y: 98, }); @@ -84,7 +93,7 @@ suite('DragAndDropEvents', function () { //assert.equal(dragMove, 'dragmove event was not triggered'); assert(!dragEnd, 'dragend event should not have been triggered 10'); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 385, y: 98, }); @@ -105,19 +114,17 @@ suite('DragAndDropEvents', function () { //console.log(greenCircle.getPosition()); //console.log(circle.getPosition()); - assert.equal(greenCircle.getX(), 40, 'green circle x should be 40'); - assert.equal(greenCircle.getY(), 40, 'green circle y should be 40'); - assert.equal(circle.getX(), 385, 'circle x should be 100'); - assert.equal(circle.getY(), 100, 'circle y should be 100'); - - showHit(layer); + assert.equal(greenCircle.x(), 40, 'green circle x should be 40'); + assert.equal(greenCircle.y(), 40, 'green circle y should be 40'); + assert.equal(circle.x(), 385, 'circle x should be 100'); + assert.equal(circle.y(), 100, 'circle y should be 100'); done(); }, 20); }); // ====================================================== - test('destroy shape while dragging', function (done) { + it('destroy shape while dragging', function (done) { var stage = addStage(); var layer = new Konva.Layer(); @@ -133,7 +140,7 @@ suite('DragAndDropEvents', function () { var circle = new Konva.Circle({ x: 380, - y: stage.getHeight() / 2, + y: stage.height() / 2, radius: 70, strokeWidth: 4, fill: 'red', @@ -153,15 +160,10 @@ suite('DragAndDropEvents', function () { dragEnd = true; }); - circle.on('mouseup', function () { - //console.log('mouseup'); - events.push('mouseup'); - }); - assert(!Konva.isDragging(), ' isDragging() should be false'); assert(!Konva.isDragReady(), ' isDragReady()) should be false'); - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 380, y: 98, }); @@ -169,7 +171,7 @@ suite('DragAndDropEvents', function () { assert(!circle.isDragging(), 'circle should not be dragging'); setTimeout(function () { - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 100, y: 98, }); @@ -193,7 +195,7 @@ suite('DragAndDropEvents', function () { }); // ====================================================== - test('click should not occur after drag and drop', function (done) { + it('click should not occur after drag and drop', function (done) { var stage = addStage(); var layer = new Konva.Layer(); @@ -221,18 +223,18 @@ suite('DragAndDropEvents', function () { //console.log('dblclick'); }); - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 40, y: 40, }); setTimeout(function () { - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 100, y: 100, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 100, y: 100, }); @@ -244,7 +246,7 @@ suite('DragAndDropEvents', function () { }); // ====================================================== - test('drag and drop distance', function (done) { + it('drag and drop distance', function (done) { var stage = addStage(); var layer = new Konva.Layer(); @@ -263,23 +265,23 @@ suite('DragAndDropEvents', function () { circle.dragDistance(4); var top = stage.content.getBoundingClientRect().top; - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 40, y: 40, }); setTimeout(function () { - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 40, y: 42, }); assert(!circle.isDragging(), 'still not dragging'); - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 40, y: 45, }); assert(circle.isDragging(), 'now circle is dragging'); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 41, y: 45, }); @@ -289,7 +291,7 @@ suite('DragAndDropEvents', function () { }); // ====================================================== - test('cancel drag and drop by setting draggable to false', function (done) { + it('cancel drag and drop by setting draggable to false', function (done) { var stage = addStage(); var layer = new Konva.Layer(); var circle = new Konva.Circle({ @@ -330,18 +332,18 @@ suite('DragAndDropEvents', function () { /* * simulate drag and drop */ - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 380, y: 100, }); setTimeout(function () { - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 100, y: 100, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 100, y: 100, }); @@ -353,7 +355,7 @@ suite('DragAndDropEvents', function () { }); // ====================================================== - test('drag and drop layer', function (done) { + it('drag and drop layer', function (done) { var stage = addStage(); var layer = new Konva.Layer({ sceneFunc: function () { @@ -370,15 +372,15 @@ suite('DragAndDropEvents', function () { }); var circle1 = new Konva.Circle({ - x: stage.getWidth() / 2, - y: stage.getHeight() / 2, + x: stage.width() / 2, + y: stage.height() / 2, radius: 70, fill: 'red', }); var circle2 = new Konva.Circle({ x: 400, - y: stage.getHeight() / 2, + y: stage.height() / 2, radius: 70, fill: 'green', }); @@ -393,42 +395,34 @@ suite('DragAndDropEvents', function () { /* * simulate drag and drop */ - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 399, y: 96, }); setTimeout(function () { - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 210, y: 109, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 210, y: 109, }); //console.log(layer.getPosition()) - assert.equal(layer.getX(), -189, 'layer x should be -189'); - assert.equal(layer.getY(), 13, 'layer y should be 13'); + assert.equal(layer.x(), -189, 'layer x should be -189'); + assert.equal(layer.y(), 13, 'layer y should be 13'); done(); }, 20); }); // ====================================================== - test('drag and drop stage', function (done) { - var container = document.createElement('div'), - stage = new Konva.Stage({ - container: container, - width: 578, - height: 200, - draggable: true, - }); - - konvaContainer.appendChild(container); + it('drag and drop stage', function (done) { + var stage = addStage({ draggable: true }); //stage.setDraggable(true); @@ -444,38 +438,36 @@ suite('DragAndDropEvents', function () { layer.add(circle); stage.add(layer); - var top = stage.content.getBoundingClientRect().top; - - assert.equal(stage.getX(), 0); - assert.equal(stage.getY(), 0); + assert.equal(stage.x(), 0); + assert.equal(stage.y(), 0); /* * simulate drag and drop */ - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 0, y: 100, }); setTimeout(function () { - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 300, y: 110, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 300, y: 110, }); - assert.equal(stage.getX(), 300); - assert.equal(stage.getY(), 10); + assert.equal(stage.x(), 300); + assert.equal(stage.y(), 10); done(); }, 20); }); - test('click should not start drag&drop', function () { + it('click should not start drag&drop', function () { var stage = addStage(); var layer = new Konva.Layer({ draggable: true, @@ -514,8 +506,8 @@ suite('DragAndDropEvents', function () { circle.on('click', function () { click += 1; }); - stage.simulateMouseDown({ x: 70, y: 70 }); - stage.simulateMouseUp({ x: 70, y: 70 }); + simulateMouseDown(stage, { x: 70, y: 70 }); + simulateMouseUp(stage, { x: 70, y: 70 }); assert.equal(click, 1, 'click triggered'); assert.equal(dragstart, 0, 'dragstart not triggered'); @@ -523,7 +515,7 @@ suite('DragAndDropEvents', function () { assert.equal(dragend, 0, 'dragend not triggered'); }); - test('drag&drop should not fire click', function () { + it('drag&drop should not fire click', function () { var stage = addStage(); var layer = new Konva.Layer({ draggable: true, @@ -562,9 +554,9 @@ suite('DragAndDropEvents', function () { circle.on('click', function () { click += 1; }); - stage.simulateMouseDown({ x: 70, y: 70 }); - stage.simulateMouseMove({ x: 80, y: 80 }); - stage.simulateMouseUp({ x: 80, y: 80 }); + simulateMouseDown(stage, { x: 70, y: 70 }); + simulateMouseMove(stage, { x: 80, y: 80 }); + simulateMouseUp(stage, { x: 80, y: 80 }); assert.equal(click, 0, 'click triggered'); assert.equal(dragstart, 1, 'dragstart not triggered'); @@ -572,7 +564,7 @@ suite('DragAndDropEvents', function () { assert.equal(dragend, 1, 'dragend not triggered'); }); - test('drag events should not trigger on a click even if we stop drag on dragstart', function () { + it('drag events should not trigger on a click even if we stop drag on dragstart', function () { var stage = addStage(); var layer = new Konva.Layer({ draggable: true, @@ -612,9 +604,9 @@ suite('DragAndDropEvents', function () { circle.on('click', function () { click += 1; }); - stage.simulateMouseDown({ x: 70, y: 70 }); - stage.simulateMouseMove({ x: 75, y: 75 }); - stage.simulateMouseUp({ x: 75, y: 75 }); + simulateMouseDown(stage, { x: 70, y: 70 }); + simulateMouseMove(stage, { x: 75, y: 75 }); + simulateMouseUp(stage, { x: 75, y: 75 }); assert.equal(click, 0, 'click triggered'); assert.equal(dragstart, 1, 'dragstart triggered'); diff --git a/test/unit-new/shapes/Ellipse-test.ts b/test/unit/Ellipse-test.ts similarity index 99% rename from test/unit-new/shapes/Ellipse-test.ts rename to test/unit/Ellipse-test.ts index 679e315d..2b893df3 100644 --- a/test/unit-new/shapes/Ellipse-test.ts +++ b/test/unit/Ellipse-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, createCanvas, compareLayerAndCanvas } from '../utis'; +import { addStage, Konva, createCanvas, compareLayerAndCanvas } from './utis'; describe('Ellipse', function () { // ====================================================== diff --git a/test/unit-new/Global-test.ts b/test/unit/Global-test.ts similarity index 100% rename from test/unit-new/Global-test.ts rename to test/unit/Global-test.ts diff --git a/test/unit-new/Group-test.ts b/test/unit/Group-test.ts similarity index 100% rename from test/unit-new/Group-test.ts rename to test/unit/Group-test.ts diff --git a/test/unit-new/shapes/Image-test.ts b/test/unit/Image-test.ts similarity index 99% rename from test/unit-new/shapes/Image-test.ts rename to test/unit/Image-test.ts index bebbb444..f4560ce2 100644 --- a/test/unit-new/shapes/Image-test.ts +++ b/test/unit/Image-test.ts @@ -8,7 +8,7 @@ import { loadImage, isNode, isBrowser, -} from '../utis'; +} from './utis'; describe('Image', function () { // ====================================================== diff --git a/test/unit-new/shapes/Label-test.ts b/test/unit/Label-test.ts similarity index 83% rename from test/unit-new/shapes/Label-test.ts rename to test/unit/Label-test.ts index d7e5cc26..d6359158 100644 --- a/test/unit-new/shapes/Label-test.ts +++ b/test/unit/Label-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, cloneAndCompareLayer, isBrowser } from '../utis'; +import { addStage, Konva, cloneAndCompareLayer, isBrowser } from './utis'; describe('Label', function () { // ====================================================== @@ -79,19 +79,12 @@ describe('Label', function () { layer.add(label); stage.add(layer); - var trace = layer.getContext().getTrace(); + var trace = layer.getContext().getTrace(false, true); - if (isBrowser) { - assert.equal( - trace, - 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,-63.965,120);shadowColor=rgba(0,0,0,0.2);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(5,0);lineTo(153.965,0);lineTo(163.965,-20);lineTo(173.965,0);lineTo(322.93,0);arc(322.93,5,5,4.712,0,false);lineTo(327.93,55);arc(322.93,55,5,0,1.571,false);lineTo(5,60);arc(5,55,5,1.571,3.142,false);lineTo(0,5);arc(5,5,5,3.142,4.712,false);closePath();fillStyle=#bbb;fill();restore();save();transform(1,0,0,1,-63.965,120);font=normal normal 50px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=green;fillText(Hello big world,0,30);restore();restore();' - ); - } else { - assert.equal( - trace, - 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,-64.5,120);shadowColor=rgba(0,0,0,0.2);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(5,0);lineTo(154.5,0);lineTo(164.5,-20);lineTo(174.5,0);lineTo(324,0);arc(324,5,5,4.712,0,false);lineTo(329,55);arc(324,55,5,0,1.571,false);lineTo(5,60);arc(5,55,5,1.571,3.142,false);lineTo(0,5);arc(5,5,5,3.142,4.712,false);closePath();fillStyle=#bbb;fill();restore();save();transform(1,0,0,1,-64.5,120);font=normal normal 50px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=green;fillText(Hello big world,0,30);restore();restore();' - ); - } + assert.equal( + trace, + 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,-64,120);shadowColor=rgba(0,0,0,0.2);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(5,0);lineTo(153,0);lineTo(163,-20);lineTo(173,0);lineTo(322,0);arc(322,5,5,4,0,false);lineTo(327,55);arc(322,55,5,0,1,false);lineTo(5,60);arc(5,55,5,1,3,false);lineTo(0,5);arc(5,5,5,3,4,false);closePath();fillStyle=#bbb;fill();restore();save();transform(1,0,0,1,-64,120);font=normal normal 50px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=green;fillText(Hello big world,0,30);restore();restore();' + ); }); it('find label class', function () { @@ -125,7 +118,7 @@ describe('Label', function () { }); // caching doesn't give exactly the same result. WHY? - it.skip('cache label', function () { + it('cache label', function () { var stage = addStage(); var layer = new Konva.Layer(); @@ -260,7 +253,7 @@ describe('Label', function () { stage.add(layer); - cloneAndCompareLayer(layer, 250); + cloneAndCompareLayer(layer, 250, 100); }); it('tag should list text size changes', function () { diff --git a/test/unit-new/Layer-test.ts b/test/unit/Layer-test.ts similarity index 100% rename from test/unit-new/Layer-test.ts rename to test/unit/Layer-test.ts diff --git a/test/unit-new/shapes/Line-test.ts b/test/unit/Line-test.ts similarity index 99% rename from test/unit-new/shapes/Line-test.ts rename to test/unit/Line-test.ts index c24ba3a7..653cc054 100644 --- a/test/unit-new/shapes/Line-test.ts +++ b/test/unit/Line-test.ts @@ -6,7 +6,7 @@ import { createCanvas, compareLayerAndCanvas, compareLayers, -} from '../utis'; +} from './utis'; describe('Line', function () { // ====================================================== diff --git a/test/functional/MouseEvents-test.js b/test/unit/MouseEvents-test.ts similarity index 87% rename from test/functional/MouseEvents-test.js rename to test/unit/MouseEvents-test.ts index e5903591..1af15b19 100644 --- a/test/functional/MouseEvents-test.js +++ b/test/unit/MouseEvents-test.ts @@ -1,6 +1,18 @@ -suite('MouseEvents', function () { +import { assert } from 'chai'; + +import { + addStage, + Konva, + simulateMouseDown, + simulateMouseMove, + simulateMouseUp, + simulateTouchStart, + simulateTouchEnd, +} from './utis'; + +describe('MouseEvents', function () { // ====================================================== - test('stage content mouse events', function (done) { + it('stage content mouse events', function (done) { var stage = addStage(); var layer = new Konva.Layer(); var circle = new Konva.Circle({ @@ -16,9 +28,15 @@ suite('MouseEvents', function () { layer.add(circle); stage.add(layer); - var circleMousedown = (circleMouseup = stageContentMousedown = stageContentMouseup = stageContentMousemove = stageContentMouseout = stageContentMouseover = stageContentClick = stageContentDblClick = 0); - - var top = stage.content.getBoundingClientRect().top; + var circleMousedown = 0; + var circleMouseup = 0; + var stageContentMousedown = 0; + var stageContentMouseup = 0; + var stageContentMousemove = 0; + var stageContentMouseout = 0; + var stageContentMouseover = 0; + var stageContentClick = 0; + var stageContentDblClick = 0; circle.on('mousedown', function () { circleMousedown++; @@ -58,12 +76,12 @@ suite('MouseEvents', function () { stageContentDblClick++; }); - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 100, y: 100, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 100, y: 100, }); @@ -74,11 +92,11 @@ suite('MouseEvents', function () { assert.equal(stageContentMouseup, 1); assert.equal(stageContentClick, 1); - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 1, y: 1, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 1, y: 1, }); @@ -87,11 +105,11 @@ suite('MouseEvents', function () { assert.equal(stageContentMouseup, 2); // trigger double click - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 1, y: 1, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 1, y: 1, }); @@ -101,7 +119,7 @@ suite('MouseEvents', function () { //assert.equal(stageContentDblClick, 1); setTimeout(function () { - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 200, y: 1, }); @@ -127,16 +145,14 @@ suite('MouseEvents', function () { }); // ====================================================== - test('remove shape with onclick', function () { + it('remove shape with onclick', function () { var stage = addStage(); - var top = stage.content.getBoundingClientRect().top; - var layer = new Konva.Layer(); var circle = new Konva.Circle({ - x: stage.getWidth() / 2, - y: stage.getHeight() / 2, + x: stage.width() / 2, + y: stage.height() / 2, radius: 70, fill: 'green', stroke: 'black', @@ -157,12 +173,12 @@ suite('MouseEvents', function () { setTimeout(remove, 0); }); - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 291, y: 112, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 291, y: 112, }); @@ -170,7 +186,7 @@ suite('MouseEvents', function () { }); // ====================================================== - test('test listening true/false with clicks', function () { + it('test listening true/false with clicks', function () { var stage = addStage(); var top = stage.content.getBoundingClientRect().top; @@ -178,8 +194,8 @@ suite('MouseEvents', function () { var layer = new Konva.Layer(); var circle = new Konva.Circle({ - x: stage.getWidth() / 2, - y: stage.getHeight() / 2, + x: stage.width() / 2, + y: stage.height() / 2, radius: 70, fill: 'green', stroke: 'black', @@ -197,23 +213,23 @@ suite('MouseEvents', function () { stage.add(layer); // ----------------------------------- - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 291, y: 112, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 291, y: 112, }); assert.equal(clickCount, 1, 'should be 1 click'); // ----------------------------------- - circle.setListening(false); - stage.simulateMouseDown({ + circle.listening(false); + simulateMouseDown(stage, { x: 291, y: 112, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 291, y: 112, }); @@ -224,12 +240,12 @@ suite('MouseEvents', function () { ); // ----------------------------------- - circle.setListening(true); - stage.simulateMouseDown({ + circle.listening(true); + simulateMouseDown(stage, { x: 291, y: 112, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 291, y: 112, }); @@ -237,7 +253,7 @@ suite('MouseEvents', function () { }); // ====================================================== - test('click mapping', function () { + it('click mapping', function () { var stage = addStage(); var layer = new Konva.Layer({ sceneFunc: function () { @@ -253,15 +269,15 @@ suite('MouseEvents', function () { }); var redCircle = new Konva.Circle({ - x: stage.getWidth() / 2, - y: stage.getHeight() / 2, + x: stage.width() / 2, + y: stage.height() / 2, radius: 70, fill: 'red', }); var greenCircle = new Konva.Circle({ x: 400, - y: stage.getHeight() / 2, + y: stage.height() / 2, radius: 70, fill: 'green', }); @@ -283,17 +299,14 @@ suite('MouseEvents', function () { layer.add(greenCircle); stage.add(layer); - var top = stage.content.getBoundingClientRect().top; - - showHit(layer); // mousedown and mouseup on red circle - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 284, y: 113, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 284, y: 113, }); @@ -302,12 +315,12 @@ suite('MouseEvents', function () { assert.equal(greenClicks, 0, 'green circle should have 0 clicks'); // mousedown and mouseup on green circle - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 397, y: 108, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 397, y: 108, }); @@ -316,12 +329,12 @@ suite('MouseEvents', function () { assert.equal(greenClicks, 1, 'green circle should have 1 click'); // mousedown red circle and mouseup on green circle - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 284, y: 113, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 397, y: 108, }); @@ -331,7 +344,7 @@ suite('MouseEvents', function () { }); // ====================================================== - test('text events', function () { + it('text events', function () { var stage = addStage(); var layer = new Konva.Layer(); var text = new Konva.Text({ @@ -354,14 +367,12 @@ suite('MouseEvents', function () { layer.add(text); stage.add(layer); - showHit(layer); - - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 300, y: 120, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 300, y: 120, }); @@ -374,14 +385,14 @@ suite('MouseEvents', function () { }); // ====================================================== - test('modify fill stroke and stroke width on hover with circle', function (done) { + it('modify fill stroke and stroke width on hover with circle', function (done) { var stage = addStage(); var layer = new Konva.Layer({ throttle: 999, }); var circle = new Konva.Circle({ x: 380, - y: stage.getHeight() / 2, + y: stage.height() / 2, radius: 70, strokeWidth: 4, fill: 'red', @@ -389,17 +400,17 @@ suite('MouseEvents', function () { }); circle.on('mouseover', function () { - this.setFill('yellow'); - this.setStroke('purple'); - this.setStrokeWidth(20); + this.fill('yellow'); + this.stroke('purple'); + this.strokeWidth(20); //console.log('mouseover') layer.draw(); }); circle.on('mouseout', function () { - this.setFill('red'); - this.setStroke('black'); - this.setStrokeWidth(4); + this.fill('red'); + this.stroke('black'); + this.strokeWidth(4); //console.log('mouseout') layer.draw(); }); @@ -409,47 +420,39 @@ suite('MouseEvents', function () { var top = stage.content.getBoundingClientRect().top; - assert.equal(circle.getFill(), 'red', 'circle fill should be red'); - assert.equal(circle.getStroke(), 'black', 'circle stroke should be black'); + assert.equal(circle.fill(), 'red', 'circle fill should be red'); + assert.equal(circle.stroke(), 'black', 'circle stroke should be black'); setTimeout(function () { - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 377, y: 101, }); - assert.equal(circle.getFill(), 'yellow', 'circle fill should be yellow'); - assert.equal( - circle.getStroke(), - 'purple', - 'circle stroke should be purple' - ); + assert.equal(circle.fill(), 'yellow', 'circle fill should be yellow'); + assert.equal(circle.stroke(), 'purple', 'circle stroke should be purple'); setTimeout(function () { // move mouse back out of circle - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 157, y: 138, }); - assert.equal(circle.getFill(), 'red', 'circle fill should be red'); - assert.equal( - circle.getStroke(), - 'black', - 'circle stroke should be black' - ); + assert.equal(circle.fill(), 'red', 'circle fill should be red'); + assert.equal(circle.stroke(), 'black', 'circle stroke should be black'); done(); }, 20); }, 20); }); // ====================================================== - test('mousedown mouseup mouseover mouseout mousemove click dblclick', function (done) { + it('mousedown mouseup mouseover mouseout mousemove click dblclick', function (done) { var stage = addStage(); var layer = new Konva.Layer(); var circle = new Konva.Circle({ - x: stage.getWidth() / 2, - y: stage.getHeight() / 2, + x: stage.width() / 2, + y: stage.height() / 2, radius: 70, fill: 'red', stroke: 'black', @@ -507,7 +510,7 @@ suite('MouseEvents', function () { setTimeout(function () { // move mouse to center of circle to trigger mouseover - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 290, y: 100, }); @@ -522,7 +525,7 @@ suite('MouseEvents', function () { setTimeout(function () { // move mouse again inside circle to trigger mousemove - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 290, y: 100, }); @@ -536,7 +539,7 @@ suite('MouseEvents', function () { assert(!mouseout, '2) mouseout should be false'); // mousedown inside circle - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 290, y: 100, }); @@ -550,7 +553,7 @@ suite('MouseEvents', function () { assert(!mouseout, '3) mouseout should be false'); // mouseup inside circle - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 290, y: 100, }); @@ -564,7 +567,7 @@ suite('MouseEvents', function () { assert(!mouseout, '4) mouseout should be false'); // mousedown inside circle - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 290, y: 100, }); @@ -578,7 +581,7 @@ suite('MouseEvents', function () { assert(!mouseout, '5) mouseout should be false'); // mouseup inside circle to trigger double click - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 290, y: 100, }); @@ -593,7 +596,7 @@ suite('MouseEvents', function () { setTimeout(function () { // move mouse outside of circle to trigger mouseout - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 0, y: 100, }); @@ -612,14 +615,14 @@ suite('MouseEvents', function () { }); // ====================================================== - test('test group mousedown events', function () { + it('test group mousedown events', function () { var stage = addStage(); var layer = new Konva.Layer(); var group = new Konva.Group(); var redCircle = new Konva.Circle({ - x: stage.getWidth() / 2, - y: stage.getHeight() / 2, + x: stage.width() / 2, + y: stage.height() / 2, radius: 80, strokeWidth: 4, fill: 'red', @@ -628,8 +631,8 @@ suite('MouseEvents', function () { }); var greenCircle = new Konva.Circle({ - x: stage.getWidth() / 2, - y: stage.getHeight() / 2, + x: stage.width() / 2, + y: stage.height() / 2, radius: 40, strokeWidth: 4, fill: 'green', @@ -656,7 +659,7 @@ suite('MouseEvents', function () { greenCircleMousedowns++; }); - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 285, y: 100, }); @@ -664,7 +667,7 @@ suite('MouseEvents', function () { assert.equal(groupMousedowns, 1, 'groupMousedowns should be 1'); assert.equal(greenCircleMousedowns, 1, 'greenCircleMousedowns should be 1'); - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 332, y: 139, }); @@ -672,7 +675,7 @@ suite('MouseEvents', function () { assert.equal(groupMousedowns, 2, 'groupMousedowns should be 2'); assert.equal(greenCircleMousedowns, 1, 'greenCircleMousedowns should be 1'); - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 285, y: 92, }); @@ -680,7 +683,7 @@ suite('MouseEvents', function () { assert.equal(groupMousedowns, 3, 'groupMousedowns should be 3'); assert.equal(greenCircleMousedowns, 2, 'greenCircleMousedowns should be 2'); - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 221, y: 146, }); @@ -690,7 +693,7 @@ suite('MouseEvents', function () { }); // ====================================================== - test('test mousedown events with antialiasing', function () { + it('test mousedown events with antialiasing', function () { var stage = addStage(); var layer = new Konva.Layer(); var group = new Konva.Group(); @@ -720,14 +723,14 @@ suite('MouseEvents', function () { layer.draw(); var top = stage.content.getBoundingClientRect().top; - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 135, y: 30, }); assert.equal(groupMousedowns, 1, 'groupMousedowns should be 1'); }); - test('test mousemove events with antialiasing', function () { + it('test mousemove events with antialiasing', function () { var stage = addStage(); var layer = new Konva.Layer(); @@ -764,7 +767,7 @@ suite('MouseEvents', function () { var top = stage.content.getBoundingClientRect().top; // move mouse slowly for (var i = 99; i < 129; i++) { - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: i, y: 135, }); @@ -773,7 +776,7 @@ suite('MouseEvents', function () { }); // ====================================================== - test('group mouseenter events', function (done) { + it('group mouseenter events', function (done) { var stage = addStage(); var layer = new Konva.Layer(); var group = new Konva.Group({ @@ -788,8 +791,8 @@ suite('MouseEvents', function () { var groupMouseleaves = 0; var redCircle = new Konva.Circle({ - x: stage.getWidth() / 2, - y: stage.getHeight() / 2, + x: stage.width() / 2, + y: stage.height() / 2, radius: 80, strokeWidth: 4, fill: 'red', @@ -798,8 +801,8 @@ suite('MouseEvents', function () { }); var greenCircle = new Konva.Circle({ - x: stage.getWidth() / 2, - y: stage.getHeight() / 2, + x: stage.width() / 2, + y: stage.height() / 2, radius: 40, strokeWidth: 4, fill: 'green', @@ -847,7 +850,7 @@ suite('MouseEvents', function () { setTimeout(function () { // move mouse outside of circles - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 177, y: 146, }); @@ -861,7 +864,7 @@ suite('MouseEvents', function () { setTimeout(function () { // move mouse inside of red circle - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 236, y: 145, }); @@ -877,7 +880,7 @@ suite('MouseEvents', function () { setTimeout(function () { // move mouse inside of green circle - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 284, y: 118, }); @@ -892,7 +895,7 @@ suite('MouseEvents', function () { setTimeout(function () { // move mouse back to red circle - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 345, y: 105, }); @@ -906,7 +909,7 @@ suite('MouseEvents', function () { setTimeout(function () { // move mouse outside of circles - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 177, y: 146, }); @@ -931,7 +934,7 @@ suite('MouseEvents', function () { }); // ====================================================== - test('test mouseleave with multiple groups', function () { + it('test mouseleave with multiple groups', function () { var stage = addStage(); var layer = new Konva.Layer({ id: 'layer', @@ -1007,7 +1010,7 @@ suite('MouseEvents', function () { var top = stage.content.getBoundingClientRect().top; - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 10, y: 10, }); @@ -1043,7 +1046,7 @@ suite('MouseEvents', function () { 'move1 : group2 mouseout should not trigger' ); - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 50, y: 50, }); @@ -1079,7 +1082,7 @@ suite('MouseEvents', function () { 'move2 : group2 mouseout should not trigger' ); - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 10, y: 10, }); @@ -1111,7 +1114,7 @@ suite('MouseEvents', function () { assert.equal(groupMouseout, 2, 'move3 : group mouseout should trigger'); assert.equal(group2Mouseout, 1, 'move3 : group2 mouseout should trigger'); - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 50, y: 50, }); @@ -1146,7 +1149,7 @@ suite('MouseEvents', function () { }); // ====================================================== - test('test mouseleave with multiple groups 2', function () { + it('test mouseleave with multiple groups 2', function () { var stage = addStage(); var layer = new Konva.Layer(); stage.add(layer); @@ -1235,7 +1238,7 @@ suite('MouseEvents', function () { var top = stage.content.getBoundingClientRect().top; - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 10, y: 10, }); @@ -1246,7 +1249,7 @@ suite('MouseEvents', function () { 'move1 : group1 mouseenter should trigger' ); - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 60, y: 60, }); @@ -1266,7 +1269,7 @@ suite('MouseEvents', function () { 'move2 : group1 mouseleave should trigger' ); - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 10, y: 10, }); @@ -1289,7 +1292,7 @@ suite('MouseEvents', function () { }); // ====================================================== - test('test mouseleave and mouseenter on deep nesting', function () { + it('test mouseleave and mouseenter on deep nesting', function () { var stage = addStage(); var layer = new Konva.Layer(); stage.add(layer); @@ -1348,7 +1351,7 @@ suite('MouseEvents', function () { mouseleave += 1; }); // move to big circle - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 20, y: 20, }); @@ -1356,7 +1359,7 @@ suite('MouseEvents', function () { assert.equal(mouseleave, 0, 'no leave on first move'); // move to small inner circle - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 50, y: 50, }); @@ -1364,7 +1367,7 @@ suite('MouseEvents', function () { assert.equal(mouseleave, 0, 'no leave on second move'); // move to big circle - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 20, y: 20, }); @@ -1372,7 +1375,7 @@ suite('MouseEvents', function () { assert.equal(mouseleave, 0, 'no leave on third move'); // move out of group - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 0, y: 0, }); @@ -1381,7 +1384,7 @@ suite('MouseEvents', function () { }); // ====================================================== - test('test dblclick to a wrong target', function () { + it('test dblclick to a wrong target', function () { var stage = addStage(); var layer = new Konva.Layer(); stage.add(layer); @@ -1420,21 +1423,21 @@ suite('MouseEvents', function () { rightRectDblClick++; }); - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 50, y: 50, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 50, y: 50, }); assert.equal(leftRectSingleClick, 1, 'leftRect trigger a click'); - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 150, y: 50, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 150, y: 50, }); @@ -1443,7 +1446,7 @@ suite('MouseEvents', function () { }); // ====================================================== - test('test mouseleave + mouseenter with deep nesting', function () { + it('test mouseleave + mouseenter with deep nesting', function () { var stage = addStage(); var layer = new Konva.Layer(); stage.add(layer); @@ -1547,7 +1550,7 @@ suite('MouseEvents', function () { rightRectMouseout += 1; }); - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 50, y: 50, }); @@ -1558,7 +1561,7 @@ suite('MouseEvents', function () { 'move1 : leftRectMouseenter mouseenter should trigger' ); - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 150, y: 50, }); @@ -1584,7 +1587,7 @@ suite('MouseEvents', function () { 'move2 : rightGrandParentGroup mouseenter should trigger' ); - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 50, y: 50, }); @@ -1613,12 +1616,12 @@ suite('MouseEvents', function () { }); // ====================================================== - test('test event bubbling', function () { + it('test event bubbling', function () { var stage = addStage(); var layer = new Konva.Layer(); var circle = new Konva.Circle({ x: 380, - y: stage.getHeight() / 2, + y: stage.height() / 2, radius: 70, strokeWidth: 4, fill: 'red', @@ -1670,11 +1673,11 @@ suite('MouseEvents', function () { e.push('stage'); }); // click on circle - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 374, y: 114, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 374, y: 114, }); @@ -1688,12 +1691,12 @@ suite('MouseEvents', function () { }); // ====================================================== - test('test custom circle hit function', function (done) { + it('test custom circle hit function', function (done) { var stage = addStage(); var layer = new Konva.Layer(); var circle = new Konva.Circle({ x: 380, - y: stage.getHeight() / 2, + y: stage.height() / 2, radius: 70, strokeWidth: 4, fill: 'red', @@ -1728,7 +1731,7 @@ suite('MouseEvents', function () { setTimeout(function () { // move mouse far outside circle - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 113, y: 112, }); @@ -1737,7 +1740,7 @@ suite('MouseEvents', function () { assert.equal(mouseovers, 0, '1) mouseovers should be 0'); assert.equal(mouseouts, 0, '1) mouseouts should be 0'); - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 286, y: 118, }); @@ -1746,7 +1749,7 @@ suite('MouseEvents', function () { assert.equal(mouseouts, 0, '2)mouseouts should be 0'); setTimeout(function () { - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 113, y: 112, }); @@ -1754,8 +1757,6 @@ suite('MouseEvents', function () { assert.equal(mouseovers, 1, '3) mouseovers should be 1'); assert.equal(mouseouts, 1, '3) mouseouts should be 1'); - showHit(layer); - // set drawBufferFunc with setter circle.hitFunc(function (context) { @@ -1771,7 +1772,7 @@ suite('MouseEvents', function () { setTimeout(function () { // move mouse far outside circle - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 113, y: 112, }); @@ -1780,7 +1781,7 @@ suite('MouseEvents', function () { assert.equal(mouseouts, 1, '4) mouseouts should be 1'); setTimeout(function () { - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 286, y: 118, }); @@ -1789,7 +1790,7 @@ suite('MouseEvents', function () { assert.equal(mouseouts, 1, '5) mouseouts should be 1'); setTimeout(function () { - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 321, y: 112, }); @@ -1799,7 +1800,7 @@ suite('MouseEvents', function () { setTimeout(function () { // move to center of circle - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 375, y: 112, }); @@ -1817,7 +1818,7 @@ suite('MouseEvents', function () { }, 20); }); - test('change ratio for hit graph', function () { + it('change ratio for hit graph', function () { var stage = addStage(); var layer = new Konva.Layer(); var circle = new Konva.Circle({ @@ -1853,7 +1854,7 @@ suite('MouseEvents', function () { assert.equal(shape, circle); }); - test('double click after click should trigger event', function (done) { + it('double click after click should trigger event', function (done) { var stage = addStage(); var layer = new Konva.Layer(); stage.add(layer); @@ -1892,11 +1893,11 @@ suite('MouseEvents', function () { smallDblClicks += 1; }); - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 10, y: 10, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 10, y: 10, }); @@ -1906,11 +1907,11 @@ suite('MouseEvents', function () { assert.equal(smallDblClicks, 0, 'no dblclick on small rect'); setTimeout(function () { - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 100, y: 100, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 100, y: 100, }); @@ -1920,11 +1921,11 @@ suite('MouseEvents', function () { assert.equal(smallDblClicks, 0, 'no dblclick on small rect'); setTimeout(function () { - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 100, y: 100, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 100, y: 100, }); @@ -1938,7 +1939,7 @@ suite('MouseEvents', function () { }); }); - test('click on stage and second click on shape should not trigger double click (check after dblclick)', function (done) { + it('click on stage and second click on shape should not trigger double click (check after dblclick)', function (done) { var stage = addStage(); var layer = new Konva.Layer(); stage.add(layer); @@ -1958,19 +1959,19 @@ suite('MouseEvents', function () { var bigDblClicks = 0; // make dblclick - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 100, y: 100, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 100, y: 100, }); - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 100, y: 100, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 100, y: 100, }); @@ -1983,11 +1984,11 @@ suite('MouseEvents', function () { bigDblClicks += 1; }); - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 10, y: 10, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 10, y: 10, }); @@ -1995,11 +1996,11 @@ suite('MouseEvents', function () { assert.equal(bigClicks, 0); assert.equal(bigDblClicks, 0); - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 100, y: 100, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 100, y: 100, }); @@ -2010,7 +2011,7 @@ suite('MouseEvents', function () { done(); }); - test('double click after drag should trigger event', function (done) { + it('double click after drag should trigger event', function (done) { var stage = addStage(); var layer = new Konva.Layer(); stage.add(layer); @@ -2050,15 +2051,15 @@ suite('MouseEvents', function () { smallDblClicks += 1; }); - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 10, y: 10, }); - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 15, y: 15, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 15, y: 15, }); @@ -2068,11 +2069,11 @@ suite('MouseEvents', function () { assert.equal(smallDblClicks, 0, 'no dblclick on small rect'); setTimeout(function () { - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 100, y: 100, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 100, y: 100, }); @@ -2082,11 +2083,11 @@ suite('MouseEvents', function () { assert.equal(smallDblClicks, 0, 'no dblclick on small rect'); setTimeout(function () { - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 100, y: 100, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 100, y: 100, }); @@ -2100,7 +2101,7 @@ suite('MouseEvents', function () { }); }); - test('test mouseenter on empty stage', function () { + it('test mouseenter on empty stage', function () { var stage = addStage(); var layer = new Konva.Layer(); stage.add(layer); @@ -2122,7 +2123,7 @@ suite('MouseEvents', function () { assert.equal(mouseenterCount, 1, 'mouseenterCount should be 1'); }); - test('test mouseleave on empty stage', function () { + it('test mouseleave on empty stage', function () { var stage = addStage(); var layer = new Konva.Layer(); stage.add(layer); @@ -2144,7 +2145,7 @@ suite('MouseEvents', function () { assert.equal(mouseleave, 1, 'mouseleave should be 1'); }); - test('test mouseleave from the shape', function () { + it('test mouseleave from the shape', function () { var stage = addStage(); var layer = new Konva.Layer(); stage.add(layer); @@ -2189,7 +2190,7 @@ suite('MouseEvents', function () { }); // move into a circle - stage.simulateMouseMove({ x: 200, y: 5 }); + simulateMouseMove(stage, { x: 200, y: 5 }); var top = stage.content.getBoundingClientRect().top; var evt = { @@ -2208,7 +2209,7 @@ suite('MouseEvents', function () { assert.equal(mouseout, 1, 'mouseout should be 1'); }); - test('should not trigger mouseenter on stage when we go to the shape from empty space', function () { + it('should not trigger mouseenter on stage when we go to the shape from empty space', function () { var stage = addStage(); var layer = new Konva.Layer(); stage.add(layer); @@ -2228,12 +2229,12 @@ suite('MouseEvents', function () { mouseenter += 1; }); - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 100, y: 100, }); - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 25, y: 25, }); @@ -2241,7 +2242,7 @@ suite('MouseEvents', function () { assert.equal(mouseenter, 0, 'mouseenter should be 1'); }); - test('should not trigger mouseleave after shape destroy', function () { + it('should not trigger mouseleave after shape destroy', function () { var stage = addStage(); var layer = new Konva.Layer(); stage.add(layer); @@ -2273,14 +2274,14 @@ suite('MouseEvents', function () { mouseleave += 1; }); - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 10, y: 10, }); rect.destroy(); layer.draw(); - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 20, y: 20, }); @@ -2288,7 +2289,7 @@ suite('MouseEvents', function () { assert.equal(mouseleave, 0); }); - test('should not trigger mouseenter on stage twice when we go to the shape directly', function () { + it('should not trigger mouseenter on stage twice when we go to the shape directly', function () { var stage = addStage(); var layer = new Konva.Layer(); stage.add(layer); @@ -2316,7 +2317,7 @@ suite('MouseEvents', function () { stage._mouseenter(evt); - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 10, y: 10, }); @@ -2326,7 +2327,7 @@ suite('MouseEvents', function () { assert.equal(mouseenter, 1, 'mouseenter should be 1'); }); - test('should trigger mouse events if we set Konva.hitOnDragEnabled = true', function () { + it('should trigger mouse events if we set Konva.hitOnDragEnabled = true', function () { Konva.hitOnDragEnabled = true; var stage = addStage(); var layer = new Konva.Layer(); @@ -2347,20 +2348,20 @@ suite('MouseEvents', function () { mousemove += 1; }); - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 10, y: 10, }); - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 20, y: 20, }); - stage.simulateMouseMove({ + simulateMouseMove(stage, { x: 30, y: 30, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 30, y: 30, }); @@ -2369,7 +2370,7 @@ suite('MouseEvents', function () { Konva.hitOnDragEnabled = false; }); - test('test scaled with CSS stage', function () { + it('test scaled with CSS stage', function () { var stage = addStage(); stage.container().style.transform = 'scale(0.5)'; @@ -2392,12 +2393,12 @@ suite('MouseEvents', function () { clicks += 1; }); - stage.simulateMouseDown({ + simulateMouseDown(stage, { x: 40, y: 40, }); - stage.simulateMouseUp({ + simulateMouseUp(stage, { x: 40, y: 40, }); @@ -2407,11 +2408,11 @@ suite('MouseEvents', function () { assert.deepEqual(stage.getPointerPosition(), { x: 80, y: 80 }); // try touch too - stage.simulateTouchStart({ + simulateTouchStart(stage, { x: 30, y: 30, }); - stage.simulateTouchEnd({ + simulateTouchEnd(stage, { x: 30, y: 30, }); diff --git a/test/unit-new/Node-cache-test.ts b/test/unit/Node-cache-test.ts similarity index 100% rename from test/unit-new/Node-cache-test.ts rename to test/unit/Node-cache-test.ts diff --git a/test/unit-new/Node-test.ts b/test/unit/Node-test.ts similarity index 99% rename from test/unit-new/Node-test.ts rename to test/unit/Node-test.ts index fd87a6c1..82a9db41 100644 --- a/test/unit-new/Node-test.ts +++ b/test/unit/Node-test.ts @@ -342,7 +342,7 @@ describe.skip('Node', function () { ); layer2.add(image); layer2.draw(); - compareLayers(layer, layer2, 50); + compareLayers(layer, layer2, 150); Konva.pixelRatio = oldRatio; done(); }); diff --git a/test/unit-new/shapes/Path-test.ts b/test/unit/Path-test.ts similarity index 98% rename from test/unit-new/shapes/Path-test.ts rename to test/unit/Path-test.ts index ca093fc2..b5f63a8c 100644 --- a/test/unit-new/shapes/Path-test.ts +++ b/test/unit/Path-test.ts @@ -1,7 +1,7 @@ import { assert } from 'chai'; -import worldMap from '../../assets/worldMap'; -import tiger from '../../assets/tiger'; +import worldMap from '../assets/worldMap'; +import tiger from '../assets/tiger'; import { addStage, @@ -10,7 +10,7 @@ import { compareLayerAndCanvas, cloneAndCompareLayer, isNode, -} from '../utis'; +} from './utis'; describe('Path', function () { // ====================================================== @@ -738,7 +738,7 @@ describe('Path', function () { start, 0 ); - c = 'M ' + p1.x.toString() + ' ' + p1.y.toString(); + c = 'M ' + p1.x.toFixed(2) + ' ' + p1.y.toFixed(2); if ( dTheta < 0 // clockwise @@ -752,7 +752,7 @@ describe('Path', function () { t, 0 ); - c += ' ' + p1.x.toString() + ' ' + p1.y.toString(); + c += ' ' + p1.x.toFixed(2) + ' ' + p1.y.toFixed(2); } } else { // counter-clockwise @@ -765,7 +765,7 @@ describe('Path', function () { t, 0 ); - c += ' ' + p1.x.toString() + ' ' + p1.y.toString(); + c += ' ' + p1.x.toFixed(2) + ' ' + p1.y.toFixed(2); } } p1 = Konva.Path.getPointOnEllipticalArc( @@ -776,7 +776,7 @@ describe('Path', function () { end, 0 ); - c += ' ' + p1.x.toString() + ' ' + p1.y.toString(); + c += ' ' + p1.x.toFixed(2) + ' ' + p1.y.toFixed(2); var testpath = new Konva.Path({ stroke: 'black', @@ -789,7 +789,7 @@ describe('Path', function () { assert.equal( c, - 'M 50 100 63.39745962155612 75.00000000000001 99.99999999999996 56.698729810778076 149.99999999999997 50 200 56.69872981077807 236.60254037844388 75.00000000000001 250 100.00000000000003 236.60254037844382 125.00000000000004 199.9999999999999 143.30127018922195 150.00000000000003 150' + 'M 50.00 100.00 63.40 75.00 100.00 56.70 150.00 50.00 200.00 56.70 236.60 75.00 250.00 100.00 236.60 125.00 200.00 143.30 150.00 150.00' ); }); @@ -938,7 +938,7 @@ describe('Path', function () { start, psi ); - c = 'M ' + p1.x.toString() + ' ' + p1.y.toString(); + c = 'M ' + p1.x.toFixed(2) + ' ' + p1.y.toFixed(2); if ( dTheta < 0 // clockwise @@ -952,7 +952,7 @@ describe('Path', function () { t, psi ); - c += ' ' + p1.x.toString() + ' ' + p1.y.toString(); + c += ' ' + p1.x.toFixed(2) + ' ' + p1.y.toFixed(2); } } else { // counter-clockwise @@ -965,7 +965,7 @@ describe('Path', function () { t, psi ); - c += ' ' + p1.x.toString() + ' ' + p1.y.toString(); + c += ' ' + p1.x.toFixed(2) + ' ' + p1.y.toFixed(2); } } p1 = Konva.Path.getPointOnEllipticalArc( @@ -976,7 +976,7 @@ describe('Path', function () { end, psi ); - c += ' ' + p1.x.toString() + ' ' + p1.y.toString(); + c += ' ' + p1.x.toFixed(2) + ' ' + p1.y.toFixed(2); var testpath = new Konva.Path({ stroke: 'black', @@ -989,7 +989,7 @@ describe('Path', function () { assert.equal( c, - 'M 250 99.99999999999999 209.63024270137728 69.46654531272594 162.9710386647049 50.769536422212866 122.52468393108823 48.91882176155127 99.12874658818252 64.41029882948584 99.0521491531885 93.09303885609827 122.31541584695515 127.28152481454595 150 150' + 'M 250.00 100.00 209.63 69.47 162.97 50.77 122.52 48.92 99.13 64.41 99.05 93.09 122.32 127.28 150.00 150.00' ); }); diff --git a/test/functional/PointerEvents-test.js b/test/unit/PointerEvents-test.ts similarity index 78% rename from test/functional/PointerEvents-test.js rename to test/unit/PointerEvents-test.ts index b3e42096..60de8610 100644 --- a/test/functional/PointerEvents-test.js +++ b/test/unit/PointerEvents-test.ts @@ -1,14 +1,23 @@ -/* eslint-disable max-nested-callbacks */ -// TODO: repair it -suite.skip('PointerEvents', function () { +import { assert } from 'chai'; + +import { + addStage, + Konva, + simulatePointerDown, + simulatePointerMove, + simulatePointerUp, +} from './utis'; + +// TODO: restore it! +describe.skip('PointerEvents', function () { Konva._pointerEventsEnabled = true; // ====================================================== - test('pointerdown pointerup pointermove', function (done) { + it('pointerdown pointerup pointermove', function (done) { var stage = addStage(); var layer = new Konva.Layer(); var circle = new Konva.Circle({ - x: stage.getWidth() / 2, - y: stage.getHeight() / 2, + x: stage.width() / 2, + y: stage.height() / 2, radius: 70, fill: 'red', stroke: 'black', @@ -38,12 +47,10 @@ suite.skip('PointerEvents', function () { layer.add(circle); stage.add(layer); - var top = stage.content.getBoundingClientRect().top; - // touchstart circle - stage._pointerdown({ - clientX: 289, - clientY: 100 + top, + simulatePointerDown(stage, { + x: 289, + y: 100, pointerId: 1, preventDefault: function () {}, }); @@ -53,7 +60,7 @@ suite.skip('PointerEvents', function () { assert(!pointerup, '1) pointerup should be false'); // pointerup circle - stage._pointerup({ + simulatePointerUp(stage, { touches: [], preventDefault: function () {}, }); @@ -63,11 +70,11 @@ suite.skip('PointerEvents', function () { assert(pointerup, '2) pointerup should be true'); // pointerdown circle - stage._pointerdown({ + simulatePointerDown(stage, { touches: [ { - clientX: 289, - clientY: 100 + top, + x: 289, + y: 100, }, ], preventDefault: function () {}, @@ -78,7 +85,7 @@ suite.skip('PointerEvents', function () { assert(pointerup, '3) pointerup should be true'); // pointerup circle to triger dbltap - stage._pointerup({ + simulatePointerUp(stage, { touches: [], preventDefault: function () {}, }); @@ -92,11 +99,11 @@ suite.skip('PointerEvents', function () { setTimeout(function () { // pointermove circle - stage._pointermove({ + simulatePointerMove(stage, { touches: [ { - clientX: 290, - clientY: 100 + top, + x: 290, + y: 100, }, ], preventDefault: function () {}, @@ -111,12 +118,12 @@ suite.skip('PointerEvents', function () { }); // ====================================================== - test('pointer capture', function (done) { + it('pointer capture', function (done) { var stage = addStage(); var layer = new Konva.Layer(); var circle = new Konva.Circle({ - x: stage.getWidth() / 2, - y: stage.getHeight() / 2, + x: stage.width() / 2, + y: stage.height() / 2, radius: 70, fill: 'red', stroke: 'black', @@ -124,7 +131,7 @@ suite.skip('PointerEvents', function () { }); var circle2 = new Konva.Circle({ - x: stage.getWidth() / 2, + x: stage.width() / 2, y: 20, radius: 20, fill: 'red', @@ -145,16 +152,19 @@ suite.skip('PointerEvents', function () { circle.on('pointerdown', function (event) { downCount++; - this.setPointerCapture(event.pointerId); + this.setPointerCapture(event['pointerId']); }); circle.on('pointerup', function (evt) { - assert(this.hasPointerCapture(evt.pointerId), 'circle released capture'); + assert( + this.hasPointerCapture(evt['pointerId']), + 'circle released capture' + ); pointerup = true; }); circle.on('pointermove', function (evt) { - assert(this.hasPointerCapture(evt.pointerId), 'circle has capture'); + assert(this.hasPointerCapture(evt['pointerId']), 'circle has capture'); pointermove = true; }); @@ -165,9 +175,9 @@ suite.skip('PointerEvents', function () { var top = stage.content.getBoundingClientRect().top; // on circle 2 to confirm it works - stage._pointerdown({ - clientX: 289, - clientY: 10 + top, + simulatePointerDown(stage, { + x: 289, + y: 10 + top, pointerId: 0, preventDefault: function () {}, }); @@ -178,9 +188,9 @@ suite.skip('PointerEvents', function () { assert(!pointerup, '6) pointerup should be false'); // on circle with capture - stage._pointerdown({ - clientX: 289, - clientY: 100 + top, + simulatePointerDown(stage, { + x: 289, + y: 100 + top, pointerId: 1, preventDefault: function () {}, }); @@ -191,9 +201,9 @@ suite.skip('PointerEvents', function () { assert(!pointerup, '7) pointerup should be true'); // second pointerdown - stage._pointerdown({ - clientX: 289, - clientY: 10 + top, + simulatePointerDown(stage, { + x: 289, + y: 10 + top, pointerId: 1, preventDefault: function () {}, }); @@ -205,9 +215,9 @@ suite.skip('PointerEvents', function () { setTimeout(function () { // pointermove over circle 2 - stage._pointermove({ - clientX: 290, - clientY: 10 + top, + simulatePointerMove(stage, { + x: 290, + y: 10 + top, pointerId: 1, preventDefault: function () {}, }); @@ -215,14 +225,14 @@ suite.skip('PointerEvents', function () { assert(otherDownCount === 1, '9) otherDownCount should be 1'); assert(pointermove, '9) pointermove should be true'); - stage._pointerup({ + simulatePointerUp(stage, { pointerId: 1, preventDefault: function () {}, }); - stage._pointerdown({ - clientX: 289, - clientY: 10 + top, + simulatePointerDown(stage, { + x: 289, + y: 10 + top, pointerId: 1, preventDefault: function () {}, }); diff --git a/test/unit-new/shapes/Polygon-test.ts b/test/unit/Polygon-test.ts similarity index 91% rename from test/unit-new/shapes/Polygon-test.ts rename to test/unit/Polygon-test.ts index 0c76340a..72378aa8 100644 --- a/test/unit-new/shapes/Polygon-test.ts +++ b/test/unit/Polygon-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva } from '../utis'; +import { addStage, Konva } from './utis'; describe('Polygon', function () { it('add polygon', function () { diff --git a/test/unit-new/shapes/Rect-test.ts b/test/unit/Rect-test.ts similarity index 99% rename from test/unit-new/shapes/Rect-test.ts rename to test/unit/Rect-test.ts index 58da17a3..47b42597 100644 --- a/test/unit-new/shapes/Rect-test.ts +++ b/test/unit/Rect-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, createCanvas, compareLayerAndCanvas } from '../utis'; +import { addStage, Konva, createCanvas, compareLayerAndCanvas } from './utis'; describe('Rect', function () { // ====================================================== diff --git a/test/unit-new/shapes/RegularPolygon-test.ts b/test/unit/RegularPolygon-test.ts similarity index 95% rename from test/unit-new/shapes/RegularPolygon-test.ts rename to test/unit/RegularPolygon-test.ts index ebf1a661..51052535 100644 --- a/test/unit-new/shapes/RegularPolygon-test.ts +++ b/test/unit/RegularPolygon-test.ts @@ -1,6 +1,11 @@ import { assert } from 'chai'; -import { addStage, Konva, cloneAndCompareLayer } from '../utis'; +import { + addStage, + Konva, + cloneAndCompareLayer, + assertAlmostEqual, +} from './utis'; describe('RegularPolygon', function () { // ====================================================== @@ -198,7 +203,7 @@ describe('RegularPolygon', function () { var box = poly.getClientRect(); - assert.equal(box.width, 92.60254037844388); - assert.equal(box.height, 81.00000000000003); + assertAlmostEqual(box.width, 92.60254037844388); + assertAlmostEqual(box.height, 81.00000000000003); }); }); diff --git a/test/unit-new/shapes/Ring-test.ts b/test/unit/Ring-test.ts similarity index 97% rename from test/unit-new/shapes/Ring-test.ts rename to test/unit/Ring-test.ts index 5cf35353..fe78d6cb 100644 --- a/test/unit-new/shapes/Ring-test.ts +++ b/test/unit/Ring-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, compareLayers } from '../utis'; +import { addStage, Konva, compareLayers } from './utis'; describe('Ring', function () { // ====================================================== diff --git a/test/unit-new/Shape-test.ts b/test/unit/Shape-test.ts similarity index 99% rename from test/unit-new/Shape-test.ts rename to test/unit/Shape-test.ts index 81364131..741759c9 100644 --- a/test/unit-new/Shape-test.ts +++ b/test/unit/Shape-test.ts @@ -1131,7 +1131,7 @@ describe('Shape', function () { ); }); - it.skip('hitStrokeWidth', function () { + it('hitStrokeWidth', function () { var stage = addStage(); var layer = new Konva.Layer(); diff --git a/test/unit-new/shapes/Spline-test.ts b/test/unit/Spline-test.ts similarity index 98% rename from test/unit-new/shapes/Spline-test.ts rename to test/unit/Spline-test.ts index 64eb3369..fc7252a9 100644 --- a/test/unit-new/shapes/Spline-test.ts +++ b/test/unit/Spline-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva } from '../utis'; +import { addStage, Konva } from './utis'; describe('Spline', function () { // ====================================================== diff --git a/test/unit-new/shapes/Sprite-test.ts b/test/unit/Sprite-test.ts similarity index 99% rename from test/unit-new/shapes/Sprite-test.ts rename to test/unit/Sprite-test.ts index 8a3a4df0..6596c342 100644 --- a/test/unit-new/shapes/Sprite-test.ts +++ b/test/unit/Sprite-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, loadImage } from '../utis'; +import { addStage, Konva, loadImage } from './utis'; describe('Sprite', function () { // ====================================================== diff --git a/test/unit-new/Stage-test.ts b/test/unit/Stage-test.ts similarity index 100% rename from test/unit-new/Stage-test.ts rename to test/unit/Stage-test.ts diff --git a/test/unit-new/shapes/Star-test.ts b/test/unit/Star-test.ts similarity index 97% rename from test/unit-new/shapes/Star-test.ts rename to test/unit/Star-test.ts index 06f804ff..dd199739 100644 --- a/test/unit-new/shapes/Star-test.ts +++ b/test/unit/Star-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, cloneAndCompareLayer } from '../utis'; +import { addStage, Konva, cloneAndCompareLayer } from './utis'; describe('Star', function () { // ====================================================== diff --git a/test/unit-new/shapes/Text-test.ts b/test/unit/Text-test.ts similarity index 89% rename from test/unit-new/shapes/Text-test.ts rename to test/unit/Text-test.ts index 6e15104e..55db039a 100644 --- a/test/unit-new/shapes/Text-test.ts +++ b/test/unit/Text-test.ts @@ -9,7 +9,8 @@ import { loadImage, isBrowser, isNode, -} from '../utis'; + assertAlmostEqual, +} from './utis'; describe('Text', function () { // ====================================================== @@ -150,7 +151,7 @@ describe('Text', function () { context.fillStyle = 'black'; context.fillText('Hello World!', 10, 10 + 25); - compareLayerAndCanvas(layer, canvas, 254); + compareLayerAndCanvas(layer, canvas, 254, 200); }); it('check emoji with letterSpacing', function () { @@ -207,10 +208,10 @@ describe('Text', function () { var layer2 = new Konva.Layer(); layer2.getCanvas().setPixelRatio(1); - layer2.add(text1.clone().cache({ pixelRatio: 4 })); + layer2.add(text1.clone().cache({ pixelRatio: 3 })); stage.add(layer1, layer2); - compareLayers(layer1, layer2, 220); + compareLayers(layer1, layer2, 250, 100); }); it('text cache with fill and shadow and some scale', function () { @@ -675,13 +676,13 @@ describe('Text', function () { if (isBrowser) { assert.equal( - layer.getContext().getTrace(), - "clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);shadowColor=rgba(255,0,0,0.5);shadowBlur=1;shadowOffsetX=10;shadowOffsetY=10;font=normal normal 16px Calibri;textBaseline=middle;textAlign=left;translate(20,20);save();fillStyle=#555;fillText(HEADING,133.563,8);restore();save();fillStyle=#555;fillText(,170,24);restore();save();fillStyle=#555;fillText(All the world's a stage, and all the men and women,6.602,40);restore();save();fillStyle=#555;fillText(merely players. They have their exits and their,21.168,56);restore();save();fillStyle=#555;fillText(entrances; And one man in his time plays many,18.035,72);restore();save();fillStyle=#555;fillText(parts.,152.449,88);restore();restore();" + layer.getContext().getTrace(false, true), + "clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);shadowColor=rgba(255,0,0,0.5);shadowBlur=1;shadowOffsetX=10;shadowOffsetY=10;font=normal normal 16px Calibri;textBaseline=middle;textAlign=left;translate(20,20);save();fillStyle=#555;fillText(HEADING,133,8);restore();save();fillStyle=#555;fillText(,170,24);restore();save();fillStyle=#555;fillText(All the world's a stage, and all the men and women,6,40);restore();save();fillStyle=#555;fillText(merely players. They have their exits and their,21,56);restore();save();fillStyle=#555;fillText(entrances; And one man in his time plays many,18,72);restore();save();fillStyle=#555;fillText(parts.,152,88);restore();restore();" ); } else { assert.equal( - layer.getContext().getTrace(), - "clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);shadowColor=rgba(255,0,0,0.5);shadowBlur=1;shadowOffsetX=10;shadowOffsetY=10;font=normal normal 16px Calibri;textBaseline=middle;textAlign=left;translate(20,20);save();fillStyle=#555;fillText(HEADING,133,8);restore();save();fillStyle=#555;fillText(,170,24);restore();save();fillStyle=#555;fillText(All the world's a stage, and all the men and,18.5,40);restore();save();fillStyle=#555;fillText(women merely players. They have their exits,12.5,56);restore();save();fillStyle=#555;fillText(and their entrances; And one man in his time,13,72);restore();save();fillStyle=#555;fillText(plays many parts.,108,88);restore();restore();" + layer.getContext().getTrace(false, true), + "clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);shadowColor=rgba(255,0,0,0.5);shadowBlur=1;shadowOffsetX=10;shadowOffsetY=10;font=normal normal 16px Calibri;textBaseline=middle;textAlign=left;translate(20,20);save();fillStyle=#555;fillText(HEADING,133,8);restore();save();fillStyle=#555;fillText(,170,24);restore();save();fillStyle=#555;fillText(All the world's a stage, and all the men and,18,40);restore();save();fillStyle=#555;fillText(women merely players. They have their exits,12,56);restore();save();fillStyle=#555;fillText(and their entrances; And one man in his time,13,72);restore();save();fillStyle=#555;fillText(plays many parts.,108,88);restore();restore();" ); } }); @@ -705,17 +706,10 @@ describe('Text', function () { layer.add(text); stage.add(layer); - if (isBrowser) { - var trace = - 'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 80px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();save();beginPath();moveTo(0,80);lineTo(189,80);stroke();restore();fillStyle=red;fillText(h,0,40);fillStyle=red;fillText(e,49.492,40);fillStyle=red;fillText(l,98.984,40);fillStyle=red;fillText(l,121.758,40);fillStyle=red;fillText(o,144.531,40);restore();save();save();beginPath();moveTo(0,160);lineTo(211,160);stroke();restore();fillStyle=red;fillText(w,0,120);fillStyle=red;fillText(o,62.773,120);fillStyle=red;fillText(r,112.266,120);fillStyle=red;fillText(l,143.906,120);fillStyle=red;fillText(d,166.68,120);restore();restore();'; - - assert.equal(layer.getContext().getTrace(), trace); - } else { - var trace = - 'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 80px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();save();beginPath();moveTo(0,80);lineTo(188,80);stroke();restore();fillStyle=red;fillText(h,0,40);fillStyle=red;fillText(e,49,40);fillStyle=red;fillText(l,98,40);fillStyle=red;fillText(l,121,40);fillStyle=red;fillText(o,144,40);restore();save();save();beginPath();moveTo(0,160);lineTo(211,160);stroke();restore();fillStyle=red;fillText(w,0,120);fillStyle=red;fillText(o,63,120);fillStyle=red;fillText(r,112,120);fillStyle=red;fillText(l,144,120);fillStyle=red;fillText(d,167,120);restore();restore();'; - - assert.equal(layer.getContext().getTrace(), trace); - } + assert.equal( + layer.getContext().getTrace(true), + 'clearRect();save();transform();font;textBaseline;textAlign;translate();save();save();beginPath();moveTo();lineTo();stroke();restore();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();restore();save();save();beginPath();moveTo();lineTo();stroke();restore();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();restore();restore();' + ); }); // ====================================================== @@ -882,17 +876,10 @@ describe('Text', function () { layer.add(text); stage.add(layer); - if (isBrowser) { - var trace = - 'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);beginPath();rect(0,0,200,100);closePath();lineWidth=2;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,10,10);font=normal normal 16px Arial;textBaseline=middle;textAlign=left;translate(10,42);save();fillStyle=#555;fillText(Some awesome text,17.523,8);restore();restore();'; - - assert.equal(layer.getContext().getTrace(), trace); - } else { - var trace = - 'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);beginPath();rect(0,0,200,100);closePath();lineWidth=2;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,10,10);font=normal normal 16px Arial;textBaseline=middle;textAlign=left;translate(10,42);save();fillStyle=#555;fillText(Some awesome text,18,8);restore();restore();'; - - assert.equal(layer.getContext().getTrace(), trace); - } + assert.equal( + layer.getContext().getTrace(false, true), + 'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);beginPath();rect(0,0,200,100);closePath();lineWidth=2;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,10,10);font=normal normal 16px Arial;textBaseline=middle;textAlign=left;translate(10,42);save();fillStyle=#555;fillText(Some awesome text,17,8);restore();restore();' + ); }); it('get text width', function () { @@ -977,17 +964,10 @@ describe('Text', function () { layer.draw(); - if (isBrowser) { - assert.almostEqual(Math.round(text1.width()), 1725); - assert.almostEqual(Math.round(text2.width()), 2613); - assert.almostEqual(Math.round(text3.width()), 2005); - assert.almostEqual(Math.round(text4.width()), 1932); - } else { - assert.almostEqual(Math.round(text1.width()), 1745); - assert.almostEqual(Math.round(text2.width()), 2633); - assert.almostEqual(Math.round(text3.width()), 1995); - assert.almostEqual(Math.round(text4.width()), 1981); - } + assert.equal(Math.abs(Math.round(text1.width()) - 1725) < 4, true); + assert.equal(Math.abs(Math.round(text2.width()) - 2613) < 4, true); + assert.equal(Math.abs(Math.round(text3.width()) - 2005) < 4, true); + assert.equal(Math.abs(Math.round(text4.width()) - 1932) < 4, true); }); it('default text color should be black', function () { @@ -1270,34 +1250,6 @@ describe('Text', function () { layer.draw(); }); - it.skip('we should be able to clip underline by group', function () { - var stage = addStage(); - var layer = new Konva.Layer(); - stage.add(layer); - - var group = new Konva.Group({ - clipX: 10, - clipY: 10, - clipWidth: 100, - clipHeight: 27, - }); - layer.add(group); - - var text = new Konva.Text({ - x: 10, - y: 10, - width: 100, - text: 'Hello World', - textDecoration: 'underline', - fontSize: 40, - }); - group.add(text); - - layer.draw(); - - throw 1; - }); - it('image gradient for text', function (done) { const oldRatio = Konva.pixelRatio; Konva.pixelRatio = 1; diff --git a/test/unit-new/shapes/TextPath-test.ts b/test/unit/TextPath-test.ts similarity index 99% rename from test/unit-new/shapes/TextPath-test.ts rename to test/unit/TextPath-test.ts index 930053a0..3eaa8cf1 100644 --- a/test/unit-new/shapes/TextPath-test.ts +++ b/test/unit/TextPath-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva, cloneAndCompareLayer, isBrowser } from '../utis'; +import { addStage, Konva, cloneAndCompareLayer, isBrowser } from './utis'; describe('TextPath', function () { // ====================================================== @@ -52,7 +52,7 @@ describe('TextPath', function () { }); // ====================================================== - it.skip('Find Next Segment when Arc is in Path', function () { + it('Find Next Segment when Arc is in Path', function () { var stage = addStage(); var layer = new Konva.Layer(); @@ -82,9 +82,7 @@ describe('TextPath', function () { stage.add(layer); var trace = layer.getContext().getTrace(); - console.log(trace); assert.equal(trace.indexOf('NaN') === -1, true, 'No NaNs'); - throw ''; }); // ====================================================== @@ -308,7 +306,7 @@ describe('TextPath', function () { layer.add(textpath); stage.add(layer); - cloneAndCompareLayer(layer, 200); + cloneAndCompareLayer(layer, 200, 30); }); it('Text path with align', function () { diff --git a/test/functional/TouchEvents-test.js b/test/unit/TouchEvents-test.ts similarity index 80% rename from test/functional/TouchEvents-test.js rename to test/unit/TouchEvents-test.ts index f78b7693..760be522 100644 --- a/test/functional/TouchEvents-test.js +++ b/test/unit/TouchEvents-test.ts @@ -1,6 +1,16 @@ -suite('TouchEvents', function () { +import { assert } from 'chai'; + +import { + addStage, + Konva, + simulateTouchStart, + simulateTouchEnd, + simulateTouchMove, +} from './utis'; + +describe('TouchEvents', function () { // ====================================================== - test('stage content touch events', function () { + it('stage content touch events', function () { var stage = addStage(); var layer = new Konva.Layer(); var circle = new Konva.Circle({ @@ -16,9 +26,13 @@ suite('TouchEvents', function () { layer.add(circle); stage.add(layer); - var circleTouchstart = (circleTouchend = stageContentTouchstart = stageContentTouchend = stageContentTouchmove = stageContentTap = stageContentDbltap = 0); - - var top = stage.content.getBoundingClientRect().top; + var circleTouchstart = 0; + var circleTouchend = 0; + var stageContentTouchstart = 0; + var stageContentTouchend = 0; + var stageContentTouchmove = 0; + var stageContentTap = 0; + var stageContentDbltap = 0; circle.on('touchstart', function () { circleTouchstart++; @@ -48,31 +62,31 @@ suite('TouchEvents', function () { stageContentDbltap++; }); - stage.simulateTouchStart([{ x: 100, y: 100, id: 0 }]); + simulateTouchStart(stage, [{ x: 100, y: 100, id: 0 }]); - stage.simulateTouchEnd([], [{ x: 100, y: 100, id: 0 }]); - assert.equal(circleTouchstart, 1, 1); - assert.equal(circleTouchend, 1, 2); - assert.equal(stageContentTouchstart, 1, 3); - assert.equal(stageContentTouchend, 1, 4); - assert.equal(stageContentDbltap, 0, 5); + simulateTouchEnd(stage, [], [{ x: 100, y: 100, id: 0 }]); + assert.equal(circleTouchstart, 1, '1'); + assert.equal(circleTouchend, 1, '2'); + assert.equal(stageContentTouchstart, 1, '3'); + assert.equal(stageContentTouchend, 1, '4'); + assert.equal(stageContentDbltap, 0, '5'); - stage.simulateTouchStart([{ x: 1, y: 1, id: 0 }]); + simulateTouchStart(stage, [{ x: 1, y: 1, id: 0 }]); - stage.simulateTouchEnd([], [{ x: 1, y: 1, id: 0 }]); + simulateTouchEnd(stage, [], [{ x: 1, y: 1, id: 0 }]); - assert.equal(stageContentTouchstart, 2, 6); - assert.equal(stageContentTouchend, 2, 7); - assert.equal(stageContentDbltap, 1, 8); + assert.equal(stageContentTouchstart, 2, '6'); + assert.equal(stageContentTouchend, 2, '7'); + assert.equal(stageContentDbltap, 1, '8'); }); // ====================================================== - test('touchstart touchend touchmove tap dbltap', function (done) { + it('touchstart touchend touchmove tap dbltap', function (done) { var stage = addStage(); var layer = new Konva.Layer(); var circle = new Konva.Circle({ - x: stage.getWidth() / 2, - y: stage.getHeight() / 2, + x: stage.width() / 2, + y: stage.height() / 2, radius: 70, fill: 'red', stroke: 'black', @@ -125,7 +139,7 @@ suite('TouchEvents', function () { Konva.inDblClickWindow = false; // touchstart circle - stage.simulateTouchStart([{ x: 289, y: 100, id: 0 }]); + simulateTouchStart(stage, [{ x: 289, y: 100, id: 0 }]); assert(touchstart, '8) touchstart should be true'); assert(!touchmove, '8) touchmove should be false'); @@ -134,7 +148,7 @@ suite('TouchEvents', function () { assert(!dbltap, '8) dbltap should be false'); // touchend circle - stage.simulateTouchEnd([], [{ x: 289, y: 100, id: 0 }]); + simulateTouchEnd(stage, [], [{ x: 289, y: 100, id: 0 }]); // end drag is tied to document mouseup and touchend event // which can't be simulated. call _endDrag manually //Konva.DD._endDrag(); @@ -146,7 +160,7 @@ suite('TouchEvents', function () { assert(!dbltap, '9) dbltap should be false'); // touchstart circle - stage.simulateTouchStart([{ x: 289, y: 100, id: 0 }]); + simulateTouchStart(stage, [{ x: 289, y: 100, id: 0 }]); assert(touchstart, '10) touchstart should be true'); assert(!touchmove, '10) touchmove should be false'); @@ -155,7 +169,7 @@ suite('TouchEvents', function () { assert(!dbltap, '10) dbltap should be false'); // touchend circle to triger dbltap - stage.simulateTouchEnd([], [{ x: 289, y: 100, id: 0 }]); + simulateTouchEnd(stage, [], [{ x: 289, y: 100, id: 0 }]); // end drag is tied to document mouseup and touchend event // which can't be simulated. call _endDrag manually //Konva.DD._endDrag(); @@ -168,7 +182,7 @@ suite('TouchEvents', function () { setTimeout(function () { // touchmove circle - stage.simulateTouchMove([], [{ x: 289, y: 100, id: 0 }]); + simulateTouchMove(stage, [], [{ x: 289, y: 100, id: 0 }]); assert(touchstart, '12) touchstart should be true'); assert(touchmove, '12) touchmove should be true'); @@ -180,7 +194,7 @@ suite('TouchEvents', function () { }, 17); }); - test('tap on stage and second tap on shape should not trigger double tap (check after dbltap)', function (done) { + it('tap on stage and second tap on shape should not trigger double tap (check after dbltap)', function (done) { var stage = addStage(); var layer = new Konva.Layer(); stage.add(layer); @@ -200,19 +214,19 @@ suite('TouchEvents', function () { var bigDblClicks = 0; // make dblclick - stage.simulateTouchStart({ + simulateTouchStart(stage, { x: 100, y: 100, }); - stage.simulateTouchEnd({ + simulateTouchEnd(stage, { x: 100, y: 100, }); - stage.simulateTouchStart({ + simulateTouchStart(stage, { x: 100, y: 100, }); - stage.simulateTouchEnd({ + simulateTouchEnd(stage, { x: 100, y: 100, }); @@ -225,11 +239,11 @@ suite('TouchEvents', function () { bigDblClicks += 1; }); - stage.simulateTouchStart({ + simulateTouchStart(stage, { x: 10, y: 10, }); - stage.simulateTouchEnd({ + simulateTouchEnd(stage, { x: 10, y: 10, }); @@ -237,11 +251,11 @@ suite('TouchEvents', function () { assert.equal(bigClicks, 0); assert.equal(bigDblClicks, 0); - stage.simulateTouchStart({ + simulateTouchStart(stage, { x: 100, y: 100, }); - stage.simulateTouchEnd({ + simulateTouchEnd(stage, { x: 100, y: 100, }); @@ -253,7 +267,7 @@ suite('TouchEvents', function () { }); // test for https://github.com/konvajs/konva/issues/156 - test('touchstart out of shape, then touch end inside shape', function () { + it('touchstart out of shape, then touch end inside shape', function () { var stage = addStage(); var layer = new Konva.Layer(); var circle = new Konva.Circle({ @@ -269,7 +283,9 @@ suite('TouchEvents', function () { layer.add(circle); stage.add(layer); - var circleTouchend = (stageContentTouchstart = stageContentTouchend = 0); + var circleTouchend = 0; + var stageContentTouchstart = 0; + var stageContentTouchend = 0; var top = stage.content.getBoundingClientRect().top; @@ -285,15 +301,15 @@ suite('TouchEvents', function () { stageContentTouchend++; }); - stage.simulateTouchStart([{ x: 1, y: 1, id: 0 }]); - stage.simulateTouchEnd([], [{ x: 100, y: 100, id: 0 }]); + simulateTouchStart(stage, [{ x: 1, y: 1, id: 0 }]); + simulateTouchEnd(stage, [], [{ x: 100, y: 100, id: 0 }]); assert.equal(stageContentTouchstart, 1); assert.equal(stageContentTouchend, 1); assert.equal(circleTouchend, 1); }); - test('tap on one shape, then fast tap on another shape should no trigger double tap', function () { + it('tap on one shape, then fast tap on another shape should no trigger double tap', function () { var stage = addStage(); var layer = new Konva.Layer(); stage.add(layer); @@ -338,8 +354,8 @@ suite('TouchEvents', function () { circle2DoubleTap++; }); - stage.simulateTouchStart({ x: 100, y: 100 }); - stage.simulateTouchEnd({ x: 100, y: 100 }); + simulateTouchStart(stage, { x: 100, y: 100 }); + simulateTouchEnd(stage, { x: 100, y: 100 }); assert.equal(circle1Tap, 1, 'should trigger tap on first circle'); assert.equal(circle2Tap, 0, 'should NOT trigger tap on second circle'); @@ -349,8 +365,8 @@ suite('TouchEvents', function () { 'should NOT trigger dbltap on second circle' ); - stage.simulateTouchStart({ x: 200, y: 100 }); - stage.simulateTouchEnd({ x: 200, y: 100 }); + simulateTouchStart(stage, { x: 200, y: 100 }); + simulateTouchEnd(stage, { x: 200, y: 100 }); assert.equal(circle1Tap, 1, 'should trigger tap on first circle'); assert.equal(circle2Tap, 1, 'should trigger tap on second circle'); @@ -361,7 +377,7 @@ suite('TouchEvents', function () { ); }); - test('multitouch - register all touches', function () { + it('multitouch - register all touches', function () { var stage = addStage(); var layer = new Konva.Layer(); stage.add(layer); @@ -425,7 +441,8 @@ suite('TouchEvents', function () { }); // start with one touch - stage.simulateTouchStart( + simulateTouchStart( + stage, [{ x: 100, y: 100, id: 0 }], [{ x: 100, y: 100, id: 0 }] ); @@ -434,7 +451,8 @@ suite('TouchEvents', function () { assert.equal(touchStart, 1, 'trigger first touch start on circle'); // make second touch - stage.simulateTouchStart( + simulateTouchStart( + stage, [ { x: 100, y: 100, id: 0 }, { x: 210, y: 100, id: 1 }, @@ -455,7 +473,8 @@ suite('TouchEvents', function () { // now try to make two touches at the same time // TODO: should we trigger touch end first? - stage.simulateTouchStart( + simulateTouchStart( + stage, [ { x: 100, y: 100, id: 0 }, { x: 210, y: 100, id: 1 }, @@ -481,7 +500,8 @@ suite('TouchEvents', function () { ]); // move one finger - stage.simulateTouchMove( + simulateTouchMove( + stage, [ { x: 100, y: 100, id: 0 }, { x: 220, y: 100, id: 1 }, @@ -492,7 +512,8 @@ suite('TouchEvents', function () { assert.equal(stageTouchMove, 1, 'should trigger touch move on stage'); // move two fingers - stage.simulateTouchMove( + simulateTouchMove( + stage, [ { x: 100, y: 100, id: 0 }, { x: 220, y: 100, id: 1 }, @@ -509,7 +530,8 @@ suite('TouchEvents', function () { 'should trigger two more touchmoves on stage' ); - stage.simulateTouchEnd( + simulateTouchEnd( + stage, [], [ { x: 100, y: 100, id: 0 }, @@ -520,7 +542,8 @@ suite('TouchEvents', function () { assert.equal(stageTouchEnd, 1); // try two touch ends on both shapes - stage.simulateTouchEnd( + simulateTouchEnd( + stage, [], [ { x: 100, y: 100, id: 0 }, @@ -534,7 +557,7 @@ suite('TouchEvents', function () { assert.equal(stageTouchEnd, 3); }); - test('can capture touch events', function () { + it('can capture touch events', function () { Konva.captureTouchEventsEnabled = true; var stage = addStage(); var layer = new Konva.Layer(); @@ -567,20 +590,23 @@ suite('TouchEvents', function () { touchEnd++; }); - stage.simulateTouchStart( + simulateTouchStart( + stage, [{ x: 100, y: 100, id: 0 }], [{ x: 100, y: 100, id: 0 }] ); // go out of circle - stage.simulateTouchMove( + simulateTouchMove( + stage, [{ x: 180, y: 100, id: 0 }], [{ x: 180, y: 100, id: 0 }] ); assert.equal(touchMove, 1, 'first touchmove'); // add another finger - stage.simulateTouchStart( + simulateTouchStart( + stage, [ { x: 180, y: 100, id: 0 }, { x: 100, y: 100, id: 1 }, @@ -589,7 +615,8 @@ suite('TouchEvents', function () { ); // move all out - stage.simulateTouchMove( + simulateTouchMove( + stage, [ { x: 185, y: 100, id: 0 }, { x: 190, y: 100, id: 1 }, @@ -603,7 +630,8 @@ suite('TouchEvents', function () { assert.equal(touchMove, 2, 'second touchmove'); // remove fingers - stage.simulateTouchEnd( + simulateTouchEnd( + stage, [], [ { x: 185, y: 100, id: 0 }, @@ -620,7 +648,7 @@ suite('TouchEvents', function () { Konva.captureTouchEventsEnabled = false; }); - test('tap and double tap should trigger just once on stage', function () { + it('tap and double tap should trigger just once on stage', function () { var stage = addStage(); var layer = new Konva.Layer(); stage.add(layer); @@ -650,27 +678,29 @@ suite('TouchEvents', function () { dbltap += 1; }); - stage.simulateTouchStart( + simulateTouchStart( + stage, [{ x: 100, y: 100, id: 0 }], [{ x: 100, y: 100, id: 0 }] ); - stage.simulateTouchEnd([], [{ x: 100, y: 100, id: 0 }]); + simulateTouchEnd(stage, [], [{ x: 100, y: 100, id: 0 }]); assert.equal(tap, 1, 'tap triggered'); assert.equal(dbltap, 0, 'no dbltap triggered'); - stage.simulateTouchStart( + simulateTouchStart( + stage, [{ x: 100, y: 100, id: 0 }], [{ x: 100, y: 100, id: 0 }] ); - stage.simulateTouchEnd([], [{ x: 100, y: 100, id: 0 }]); + simulateTouchEnd(stage, [], [{ x: 100, y: 100, id: 0 }]); assert.equal(tap, 2, 'tap triggered'); assert.equal(dbltap, 1, 'no dbltap triggered'); }); - test('drag and second tap should not trigger dbltap', function () { + it('drag and second tap should not trigger dbltap', function () { var stage = addStage(); var layer = new Konva.Layer(); stage.add(layer); @@ -705,34 +735,37 @@ suite('TouchEvents', function () { dragmove += 1; }); - stage.simulateTouchStart( + simulateTouchStart( + stage, [{ x: 100, y: 100, id: 0 }], [{ x: 100, y: 100, id: 0 }] ); - stage.simulateTouchMove( + simulateTouchMove( + stage, [{ x: 150, y: 150, id: 0 }], [{ x: 150, y: 150, id: 0 }] ); - stage.simulateTouchEnd([], [{ x: 150, y: 150, id: 0 }]); + simulateTouchEnd(stage, [], [{ x: 150, y: 150, id: 0 }]); assert.equal(tap, 0, 'no tap triggered'); assert.equal(dbltap, 0, 'no dbltap triggered'); assert.equal(dragmove, 1, 'dragmove triggered'); - stage.simulateTouchStart( + simulateTouchStart( + stage, [{ x: 150, y: 150, id: 0 }], [{ x: 150, y: 150, id: 0 }] ); - stage.simulateTouchEnd([], [{ x: 150, y: 150, id: 0 }]); + simulateTouchEnd(stage, [], [{ x: 150, y: 150, id: 0 }]); assert.equal(tap, 1, 'tap triggered'); assert.equal(dbltap, 0, 'no dbltap triggered'); }); - test('tap should give pointer position', function () { + it('tap should give pointer position', function () { var stage = addStage(); var layer = new Konva.Layer(); stage.add(layer); @@ -764,12 +797,13 @@ suite('TouchEvents', function () { click += 1; }); - stage.simulateTouchStart( + simulateTouchStart( + stage, [{ x: 100, y: 100, id: 0 }], [{ x: 100, y: 100, id: 0 }] ); - stage.simulateTouchEnd([], [{ x: 100, y: 100, id: 0 }]); + simulateTouchEnd(stage, [], [{ x: 100, y: 100, id: 0 }]); assert.equal(tap, 1, 'tap triggered'); assert.equal(click, 0, 'no click triggered'); diff --git a/test/unit-new/shapes/Transformer-test.ts b/test/unit/Transformer-test.ts similarity index 85% rename from test/unit-new/shapes/Transformer-test.ts rename to test/unit/Transformer-test.ts index d68dbe5f..44b260cc 100644 --- a/test/unit-new/shapes/Transformer-test.ts +++ b/test/unit/Transformer-test.ts @@ -1,5 +1,5 @@ import { assert } from 'chai'; -import { Transformer } from '../../../src/shapes/Transformer'; +import { Transformer } from '../../src/shapes/Transformer'; import { addStage, @@ -8,7 +8,8 @@ import { simulateMouseDown as sd, simulateMouseMove as sm, simulateMouseUp as su, -} from '../utis'; + assertAlmostEqual, +} from './utis'; function simulateMouseDown(tr, pos) { sd(tr.getStage(), pos); @@ -36,16 +37,6 @@ function simulateMouseUp(tr: Transformer, pos = { x: 0, y: 0 }) { } describe('Transformer', function () { - function isClose(a, b) { - return Math.abs(a - b) < 0.000001; - } - - assert.almostEqual = function (val1, val2) { - if (!isClose(val1, val2)) { - throw new Error('Expected ' + val1 + ' to be almost equal to ' + val2); - } - }; - // ====================================================== it('init transformer on simple rectangle', function () { var stage = addStage(); @@ -223,11 +214,11 @@ describe('Transformer', function () { rotation: Konva.getAngle(45), }); - assert.almostEqual(rect.x(), 50); - assert.almostEqual(rect.y(), 50); - assert.almostEqual(tr.width(), 100); - assert.almostEqual(tr.height(), 150); - assert.almostEqual(tr.rotation(), rect.rotation()); + assertAlmostEqual(rect.x(), 50); + assertAlmostEqual(rect.y(), 50); + assertAlmostEqual(tr.width(), 100); + assertAlmostEqual(tr.height(), 150); + assertAlmostEqual(tr.rotation(), rect.rotation()); }); it('transformer should follow rotation on single node', function () { @@ -292,11 +283,11 @@ describe('Transformer', function () { rotation: 0, }); - assert.almostEqual(rect.x(), 0); - assert.almostEqual(rect.y(), 0); - assert.almostEqual(tr.width(), 100); - assert.almostEqual(tr.height(), 150); - assert.almostEqual(rect.rotation(), -45); + assertAlmostEqual(rect.x(), 0); + assertAlmostEqual(rect.y(), 0); + assertAlmostEqual(tr.width(), 100); + assertAlmostEqual(tr.height(), 150); + assertAlmostEqual(rect.rotation(), -45); }); it('transformer should follow rotation on single node inside group', function () { @@ -329,7 +320,7 @@ describe('Transformer', function () { rect.rotation(45); layer.draw(); - assert.equal(isClose(tr.rotation(), 90), true); + assertAlmostEqual(tr.rotation(), 90); }); it('try to fit simple rotated rectangle - 2', function () { @@ -362,12 +353,12 @@ describe('Transformer', function () { rotation: 0, }); - assert.almostEqual(rect.x(), 40); - assert.almostEqual(rect.y(), 40); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.height(), 200); - assert.almostEqual(rect.scaleY(), 0.5); - assert.almostEqual(rect.rotation(), 0); + assertAlmostEqual(rect.x(), 40); + assertAlmostEqual(rect.y(), 40); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.height(), 200); + assertAlmostEqual(rect.scaleY(), 0.5); + assertAlmostEqual(rect.rotation(), 0); }); it('rotate around center', function () { @@ -400,12 +391,12 @@ describe('Transformer', function () { rotation: 0, }); - assert.almostEqual(rect.x(), 40); - assert.almostEqual(rect.y(), 40); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.height(), 200); - assert.almostEqual(rect.scaleY(), 0.5); - assert.almostEqual(rect.rotation(), 0); + assertAlmostEqual(rect.x(), 40); + assertAlmostEqual(rect.y(), 40); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.height(), 200); + assertAlmostEqual(rect.scaleY(), 0.5); + assertAlmostEqual(rect.rotation(), 0); }); it('change transform of parent', function () { @@ -516,7 +507,7 @@ describe('Transformer', function () { assert.equal(tr.width(), 50); assert.equal(tr.height(), 50); assert.equal(tr.rotation(), rect.rotation()); - assert.almostEqual(rect.skewX(), 0.2); + assertAlmostEqual(rect.skewX(), 0.2); }); it('try to resize in draggable stage', function () { @@ -620,13 +611,13 @@ describe('Transformer', function () { tr._fitNodesInto(box); - assert.almostEqual(rect.x(), 100); - assert.almostEqual(rect.y(), 0); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.scaleX(), 1); - assert.almostEqual(rect.height(), 100); - assert.almostEqual(rect.scaleY(), -1); - assert.almostEqual(rect.rotation(), -180); + assertAlmostEqual(rect.x(), 100); + assertAlmostEqual(rect.y(), 0); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.scaleX(), 1); + assertAlmostEqual(rect.height(), 100); + assertAlmostEqual(rect.scaleY(), -1); + assertAlmostEqual(rect.rotation(), -180); layer.draw(); }); @@ -665,11 +656,11 @@ describe('Transformer', function () { rotation: 0, }); - assert.almostEqual(rect.x(), 20); - assert.almostEqual(rect.y(), 20); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.height(), 100); - assert.almostEqual(rect.scaleX(), 2); + assertAlmostEqual(rect.x(), 20); + assertAlmostEqual(rect.y(), 20); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.height(), 100); + assertAlmostEqual(rect.scaleX(), 2); }); it('listen shape changes', function () { @@ -768,11 +759,11 @@ describe('Transformer', function () { rotation: 0, }); - assert.almostEqual(rect.x(), 100); - assert.almostEqual(rect.y(), 70); - assert.almostEqual(rect.width() * rect.scaleX(), 100); - assert.almostEqual(rect.height() * rect.scaleY(), 100); - assert.almostEqual(rect.rotation(), rect.rotation()); + assertAlmostEqual(rect.x(), 100); + assertAlmostEqual(rect.y(), 70); + assertAlmostEqual(rect.width() * rect.scaleX(), 100); + assertAlmostEqual(rect.height() * rect.scaleY(), 100); + assertAlmostEqual(rect.rotation(), rect.rotation()); }); it('add transformer for transformed rect with offset', function () { @@ -838,17 +829,17 @@ describe('Transformer', function () { }); layer.draw(); - assert.almostEqual(rect.x(), 100); - assert.almostEqual(rect.y(), 50); - assert.almostEqual(rect.width() * rect.scaleX(), 200); - assert.almostEqual(rect.height() * rect.scaleY(), 100); - assert.almostEqual(rect.rotation(), rect.rotation()); + assertAlmostEqual(rect.x(), 100); + assertAlmostEqual(rect.y(), 50); + assertAlmostEqual(rect.width() * rect.scaleX(), 200); + assertAlmostEqual(rect.height() * rect.scaleY(), 100); + assertAlmostEqual(rect.rotation(), rect.rotation()); - assert.almostEqual(tr.x(), 0); - assert.almostEqual(tr.y(), 0); - assert.almostEqual(tr.width(), 200); - assert.almostEqual(tr.height(), 100); - assert.almostEqual(rect.rotation(), rect.rotation()); + assertAlmostEqual(tr.x(), 0); + assertAlmostEqual(tr.y(), 0); + assertAlmostEqual(tr.width(), 200); + assertAlmostEqual(tr.height(), 100); + assertAlmostEqual(rect.rotation(), rect.rotation()); }); it('add transformer for circle', function () { @@ -944,16 +935,16 @@ describe('Transformer', function () { }); layer.draw(); - assert.almostEqual(circle.x(), 40); - assert.almostEqual(circle.y(), 40); - assert.almostEqual(circle.width() * circle.scaleX(), 80); - assert.almostEqual(circle.height() * circle.scaleY(), 80); - assert.almostEqual(circle.rotation(), 90); + assertAlmostEqual(circle.x(), 40); + assertAlmostEqual(circle.y(), 40); + assertAlmostEqual(circle.width() * circle.scaleX(), 80); + assertAlmostEqual(circle.height() * circle.scaleY(), 80); + assertAlmostEqual(circle.rotation(), 90); - assert.almostEqual(tr.x(), 80); - assert.almostEqual(tr.y(), 0); - assert.almostEqual(tr.width(), 80); - assert.almostEqual(tr.height(), 80); + assertAlmostEqual(tr.x(), 80); + assertAlmostEqual(tr.y(), 0); + assertAlmostEqual(tr.width(), 80); + assertAlmostEqual(tr.height(), 80); }); it('add transformer for transformed circle', function () { @@ -1106,16 +1097,16 @@ describe('Transformer', function () { var rect = group.getClientRect(); - assert.almostEqual(group.x(), 50); - assert.almostEqual(group.y(), 50); - assert.almostEqual(rect.width, 100); - assert.almostEqual(rect.height, 100); - assert.almostEqual(group.rotation(), 90); + assertAlmostEqual(group.x(), 50); + assertAlmostEqual(group.y(), 50); + assertAlmostEqual(rect.width, 100); + assertAlmostEqual(rect.height, 100); + assertAlmostEqual(group.rotation(), 90); - assert.almostEqual(tr.x(), 100); - assert.almostEqual(tr.y(), 0); - assert.almostEqual(tr.width(), 100); - assert.almostEqual(tr.height(), 100); + assertAlmostEqual(tr.x(), 100); + assertAlmostEqual(tr.y(), 0); + assertAlmostEqual(tr.width(), 100); + assertAlmostEqual(tr.height(), 100); }); it('add transformer to another group', function () { @@ -1208,15 +1199,15 @@ describe('Transformer', function () { var rect = group.getClientRect(); - assert.almostEqual(group.x(), 100); - assert.almostEqual(group.y(), 50); - assert.almostEqual(rect.width, 200); - assert.almostEqual(rect.height, 100); + assertAlmostEqual(group.x(), 100); + assertAlmostEqual(group.y(), 50); + assertAlmostEqual(rect.width, 200); + assertAlmostEqual(rect.height, 100); - assert.almostEqual(tr.x(), 0); - assert.almostEqual(tr.y(), 0); - assert.almostEqual(tr.width(), 200); - assert.almostEqual(tr.height(), 100); + assertAlmostEqual(tr.x(), 0); + assertAlmostEqual(tr.y(), 0); + assertAlmostEqual(tr.width(), 200); + assertAlmostEqual(tr.height(), 100); }); it('toJSON should not save attached node and children', function () { @@ -1370,12 +1361,12 @@ describe('Transformer', function () { y: 150, }); - assert.almostEqual(rect.x(), 80); - assert.almostEqual(rect.y(), 30); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.scaleX(), 0.5); - assert.almostEqual(rect.height(), 100); - assert.almostEqual(rect.scaleY(), 1); + assertAlmostEqual(rect.x(), 80); + assertAlmostEqual(rect.y(), 30); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.scaleX(), 0.5); + assertAlmostEqual(rect.height(), 100); + assertAlmostEqual(rect.scaleY(), 1); }); it('keep ratio should allow negative scaling', function () { @@ -1415,36 +1406,11 @@ describe('Transformer', function () { y: pos.y + 100, }); - assert.almostEqual(rect.scaleX(), 1); - assert.almostEqual(rect.scaleY(), 1); - assert.almostEqual(rect.rotation(), -180); + assertAlmostEqual(rect.scaleX(), 1); + assertAlmostEqual(rect.scaleY(), 1); + assertAlmostEqual(rect.rotation(), -180); }); - it.skip('visual test', function (done) { - var stage = addStage(); - var layer = new Konva.Layer(); - stage.add(layer); - var src = 'assets/darth-vader.jpg'; - Konva.Image.fromURL(src, function (image) { - image.setAttrs({ - draggable: true, - scaleX: 0.5, - scaleY: 0.5, - shadowColor: 'black', - // shadowBlur: 10, - shadowOffset: { x: 10, y: 10 }, - }); - layer.add(image); - var tr = new Konva.Transformer({ - nodes: [image], - }); - layer.add(tr); - layer.draw(); - - throw 1; - done(); - }); - }); it('slightly move for cache check (top-left anchor)', function () { var stage = addStage(); @@ -1469,7 +1435,7 @@ describe('Transformer', function () { layer.draw(); var anchor = tr.findOne('.top-left'); - assert.almostEqual(anchor.getAbsolutePosition().x, 20); + assertAlmostEqual(anchor.getAbsolutePosition().x, 20); simulateMouseDown(tr, { x: 20, @@ -1484,8 +1450,8 @@ describe('Transformer', function () { simulateMouseUp(tr); layer.draw(); - assert.almostEqual(rect.x(), 20); - assert.almostEqual(rect.y(), 20); + assertAlmostEqual(rect.x(), 20); + assertAlmostEqual(rect.y(), 20); }); it('rotation snaps', function () { @@ -1552,24 +1518,24 @@ describe('Transformer', function () { x: 0, y: 199, }); - assert.almostEqual(rect.rotation(), -90); + assertAlmostEqual(rect.rotation(), -90); simulateMouseMove(tr, { x: 0, y: 50, }); - assert.almostEqual(rect.rotation(), -90); + assertAlmostEqual(rect.rotation(), -90); simulateMouseMove(tr, { x: 0, y: 45, }); - assert.almostEqual(rect.rotation(), -90); + assertAlmostEqual(rect.rotation(), -90); simulateMouseMove(tr, { x: 0, y: 1, }); - assert.almostEqual(rect.rotation(), -90); + assertAlmostEqual(rect.rotation(), -90); simulateMouseMove(tr, { x: 1, @@ -1613,25 +1579,25 @@ describe('Transformer', function () { y: 60, }); - assert.almostEqual(rect.x(), 115); - assert.almostEqual(rect.y(), 10); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.scaleX(), 0.05); - assert.almostEqual(rect.scaleY(), -1); - assert.almostEqual(rect.height(), 100); - assert.almostEqual(rect.rotation(), -180); + assertAlmostEqual(rect.x(), 115); + assertAlmostEqual(rect.y(), 10); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.scaleX(), 0.05); + assertAlmostEqual(rect.scaleY(), -1); + assertAlmostEqual(rect.height(), 100); + assertAlmostEqual(rect.rotation(), -180); simulateMouseMove(tr, { x: 125, y: 60, }); - assert.almostEqual(rect.x(), 115); - assert.almostEqual(rect.y(), 10); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.scaleX(), 0.05); - assert.almostEqual(rect.height(), 100); - assert.almostEqual(rect.scaleY(), -1); + assertAlmostEqual(rect.x(), 115); + assertAlmostEqual(rect.y(), 10); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.scaleX(), 0.05); + assertAlmostEqual(rect.height(), 100); + assertAlmostEqual(rect.scaleY(), -1); // switch again simulateMouseMove(tr, { @@ -1639,12 +1605,12 @@ describe('Transformer', function () { y: 60, }); - assert.almostEqual(rect.x(), 100); - assert.almostEqual(rect.y(), 10); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.scaleY(), 1); - assert.almostEqual(rect.scaleX(), 0.1); - assert.almostEqual(rect.height(), 100); + assertAlmostEqual(rect.x(), 100); + assertAlmostEqual(rect.y(), 10); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.scaleY(), 1); + assertAlmostEqual(rect.scaleX(), 0.1); + assertAlmostEqual(rect.height(), 100); simulateMouseUp(tr); }); @@ -1682,24 +1648,24 @@ describe('Transformer', function () { y: 125, }); - assert.almostEqual(rect.x(), 10); - assert.almostEqual(rect.y(), 115); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.scaleY(), -0.05); - assert.almostEqual(rect.height(), 100); - assert.almostEqual(rect.rotation(), 0); + assertAlmostEqual(rect.x(), 10); + assertAlmostEqual(rect.y(), 115); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.scaleY(), -0.05); + assertAlmostEqual(rect.height(), 100); + assertAlmostEqual(rect.rotation(), 0); simulateMouseMove(tr, { x: 60, y: 125, }); - assert.almostEqual(rect.x(), 10); - assert.almostEqual(rect.y(), 115); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.scaleY(), -0.05); - assert.almostEqual(rect.height(), 100); - assert.almostEqual(rect.rotation(), 0); + assertAlmostEqual(rect.x(), 10); + assertAlmostEqual(rect.y(), 115); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.scaleY(), -0.05); + assertAlmostEqual(rect.height(), 100); + assertAlmostEqual(rect.rotation(), 0); // switch again simulateMouseMove(tr, { @@ -1707,13 +1673,13 @@ describe('Transformer', function () { y: 90, }); - assert.almostEqual(rect.x(), 10); - assert.almostEqual(rect.y(), 100); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.scaleX(), 1); - assert.almostEqual(rect.scaleY(), 0.1); - assert.almostEqual(rect.height(), 100); - assert.almostEqual(rect.rotation(), 0); + assertAlmostEqual(rect.x(), 10); + assertAlmostEqual(rect.y(), 100); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.scaleX(), 1); + assertAlmostEqual(rect.scaleY(), 0.1); + assertAlmostEqual(rect.height(), 100); + assertAlmostEqual(rect.rotation(), 0); simulateMouseUp(tr); }); @@ -1751,13 +1717,13 @@ describe('Transformer', function () { }); layer.draw(); - assert.almostEqual(rect.x(), 150); - assert.almostEqual(rect.y(), 50); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.scaleX(), 0.5); - assert.almostEqual(rect.scaleY(), -0.5); - assert.almostEqual(rect.height(), 100); - assert.almostEqual(rect.rotation(), -180); + assertAlmostEqual(rect.x(), 150); + assertAlmostEqual(rect.y(), 50); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.scaleX(), 0.5); + assertAlmostEqual(rect.scaleY(), -0.5); + assertAlmostEqual(rect.height(), 100); + assertAlmostEqual(rect.rotation(), -180); simulateMouseMove(tr, { x: 98, @@ -1802,12 +1768,12 @@ describe('Transformer', function () { y: 0, }); - assert.almostEqual(rect.x(), 0); - assert.almostEqual(rect.y(), 0); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.scaleY(), 1); - assert.almostEqual(rect.scaleX(), 1); - assert.almostEqual(rect.height(), 100); + assertAlmostEqual(rect.x(), 0); + assertAlmostEqual(rect.y(), 0); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.scaleY(), 1); + assertAlmostEqual(rect.scaleX(), 1); + assertAlmostEqual(rect.height(), 100); simulateMouseUp(tr); }); @@ -1845,12 +1811,12 @@ describe('Transformer', function () { }); layer.draw(); - assert.almostEqual(rect.x(), 0); - assert.almostEqual(rect.y(), 200); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.scaleX(), 1); - assert.almostEqual(rect.height(), 100); - assert.almostEqual(rect.rotation(), 0); + assertAlmostEqual(rect.x(), 0); + assertAlmostEqual(rect.y(), 200); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.scaleX(), 1); + assertAlmostEqual(rect.height(), 100); + assertAlmostEqual(rect.rotation(), 0); simulateMouseMove(tr, { x: 0, @@ -1859,13 +1825,13 @@ describe('Transformer', function () { layer.draw(); simulateMouseUp(tr); - assert.almostEqual(rect.x(), 0); - assert.almostEqual(rect.y(), 0); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.scaleX(), 1); - assert.almostEqual(rect.height(), 100); - assert.almostEqual(rect.rotation(), 0); - assert.almostEqual(rect.scaleY(), 1); + assertAlmostEqual(rect.x(), 0); + assertAlmostEqual(rect.y(), 0); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.scaleX(), 1); + assertAlmostEqual(rect.height(), 100); + assertAlmostEqual(rect.rotation(), 0); + assertAlmostEqual(rect.scaleY(), 1); }); it('switch scaling with padding for rotated - x', function () { @@ -1902,25 +1868,25 @@ describe('Transformer', function () { y: 125, }); - assert.almostEqual(rect.x(), 110); - assert.almostEqual(rect.y(), 115); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.scaleX(), 0.05); - assert.almostEqual(rect.scaleY(), -1); - assert.almostEqual(rect.height(), 100); - assert.almostEqual(rect.rotation(), -90); + assertAlmostEqual(rect.x(), 110); + assertAlmostEqual(rect.y(), 115); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.scaleX(), 0.05); + assertAlmostEqual(rect.scaleY(), -1); + assertAlmostEqual(rect.height(), 100); + assertAlmostEqual(rect.rotation(), -90); simulateMouseMove(tr, { x: 60, y: 125, }); - assert.almostEqual(rect.x(), 110); - assert.almostEqual(rect.y(), 115); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.scaleX(), 0.05); - assert.almostEqual(rect.height(), 100); - assert.almostEqual(rect.scaleY(), -1); + assertAlmostEqual(rect.x(), 110); + assertAlmostEqual(rect.y(), 115); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.scaleX(), 0.05); + assertAlmostEqual(rect.height(), 100); + assertAlmostEqual(rect.scaleY(), -1); layer.draw(); @@ -1930,13 +1896,13 @@ describe('Transformer', function () { y: 90, }); - assert.almostEqual(rect.x(), 110); - assert.almostEqual(rect.y(), 100); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.scaleX(), 0.1); - assert.almostEqual(rect.scaleY(), 1); + assertAlmostEqual(rect.x(), 110); + assertAlmostEqual(rect.y(), 100); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.scaleX(), 0.1); + assertAlmostEqual(rect.scaleY(), 1); - assert.almostEqual(rect.height(), 100); + assertAlmostEqual(rect.height(), 100); simulateMouseUp(tr); }); @@ -1975,26 +1941,26 @@ describe('Transformer', function () { y: 60, }); - assert.almostEqual(rect.x(), 110); - assert.almostEqual(rect.y(), 10); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.scaleX(), 1); - assert.almostEqual(rect.scaleY(), -0.05); - assert.almostEqual(rect.height(), 100); - assert.almostEqual(rect.rotation(), 90); + assertAlmostEqual(rect.x(), 110); + assertAlmostEqual(rect.y(), 10); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.scaleX(), 1); + assertAlmostEqual(rect.scaleY(), -0.05); + assertAlmostEqual(rect.height(), 100); + assertAlmostEqual(rect.rotation(), 90); simulateMouseMove(tr, { x: 125, y: 60, }); - assert.almostEqual(rect.x(), 110); - assert.almostEqual(rect.y(), 10); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.scaleX(), 1); - assert.almostEqual(rect.scaleY(), -0.05); - assert.almostEqual(rect.height(), 100); - assert.almostEqual(rect.rotation(), 90); + assertAlmostEqual(rect.x(), 110); + assertAlmostEqual(rect.y(), 10); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.scaleX(), 1); + assertAlmostEqual(rect.scaleY(), -0.05); + assertAlmostEqual(rect.height(), 100); + assertAlmostEqual(rect.rotation(), 90); // switch again simulateMouseMove(tr, { @@ -2002,12 +1968,12 @@ describe('Transformer', function () { y: 60, }); - assert.almostEqual(rect.x(), 110); - assert.almostEqual(rect.y() - 120 < 0.001, true); - assert.almostEqual(rect.width(), 100); - assert.almostEqual(rect.scaleX(), 1); - assert.almostEqual(rect.scaleY(), 0.1); - assert.almostEqual(rect.height(), 100); + assertAlmostEqual(rect.x(), 110); + assertAlmostEqual(rect.y() - 120 < 0.001, true); + assertAlmostEqual(rect.width(), 100); + assertAlmostEqual(rect.scaleX(), 1); + assertAlmostEqual(rect.scaleY(), 0.1); + assertAlmostEqual(rect.height(), 100); simulateMouseUp(tr); }); @@ -2901,16 +2867,8 @@ describe('Transformer', function () { }); layer.draw(); - assert.almostEqual( - rect.width() * rect.scaleX(), - test.expectedWidth, - test.name + ' width check' - ); - assert.almostEqual( - rect.height() * rect.scaleY(), - test.expectedHeight, - test.name + ' height check' - ); + assertAlmostEqual(rect.width() * rect.scaleX(), test.expectedWidth); + assertAlmostEqual(rect.height() * rect.scaleY(), test.expectedHeight); }); }); @@ -2965,16 +2923,8 @@ describe('Transformer', function () { }); layer.draw(); - assert.almostEqual( - rect.width() * rect.scaleX(), - test.expectedWidth, - test.name + ' width check' - ); - assert.almostEqual( - rect.height() * rect.scaleY(), - test.expectedHeight, - test.name + ' height check' - ); + assertAlmostEqual(rect.width() * rect.scaleX(), test.expectedWidth); + assertAlmostEqual(rect.height() * rect.scaleY(), test.expectedHeight); }); }); @@ -3028,16 +2978,8 @@ describe('Transformer', function () { }); layer.draw(); - assert.almostEqual( - rect.width() * rect.scaleX(), - test.expectedWidth, - test.name + ' width check' - ); - assert.almostEqual( - rect.height() * rect.scaleY(), - test.expectedHeight, - test.name + ' height check' - ); + assertAlmostEqual(rect.width() * rect.scaleX(), test.expectedWidth); + assertAlmostEqual(rect.height() * rect.scaleY(), test.expectedHeight); }); }); @@ -3099,26 +3041,26 @@ describe('Transformer', function () { simulateMouseDown(tr, start); simulateMouseMove(tr, end); var box = rect.getClientRect(); - assert.almostEqual(box.x, 0); - assert.almostEqual(box.y, 0); - assert.almostEqual(box.width, 200); - assert.almostEqual(box.height, 100); + assertAlmostEqual(box.x, 0); + assertAlmostEqual(box.y, 0); + assertAlmostEqual(box.width, 200); + assertAlmostEqual(box.height, 100); // make extra move on end simulateMouseMove(tr, end); var box = rect.getClientRect(); - assert.almostEqual(box.x, 0); - assert.almostEqual(box.y, 0); - assert.almostEqual(box.width, 200); - assert.almostEqual(box.height, 100); + assertAlmostEqual(box.x, 0); + assertAlmostEqual(box.y, 0); + assertAlmostEqual(box.width, 200); + assertAlmostEqual(box.height, 100); // move back simulateMouseMove(tr, start); simulateMouseUp(tr); - assert.almostEqual(box.x, 0); - assert.almostEqual(box.y, 0); - assert.almostEqual(box.width, 200); - assert.almostEqual(box.height, 100); + assertAlmostEqual(box.x, 0); + assertAlmostEqual(box.y, 0); + assertAlmostEqual(box.width, 200); + assertAlmostEqual(box.height, 100); }); }); @@ -3763,7 +3705,7 @@ describe('Transformer', function () { // should not throw error rect2.width(100); - assert(tr2.width(), 200); + assertAlmostEqual(tr2.width(), 100); stage.draw(); }); @@ -3824,7 +3766,7 @@ describe('Transformer', function () { y: 50, }); - assert.almostEqual(rect.width() * rect.scaleX(), 200); + assertAlmostEqual(rect.width() * rect.scaleX(), 200); }); it('rotate several nodes', function () { @@ -3869,17 +3811,17 @@ describe('Transformer', function () { layer.draw(); - assert.almostEqual(rect1.x(), 100); - assert.almostEqual(rect1.y(), 0); - assert.almostEqual(rect1.width() + rect2.width(), 100); - assert.almostEqual(rect1.height() + rect2.width(), 100); - assert.almostEqual(rect1.rotation(), 90); + assertAlmostEqual(rect1.x(), 100); + assertAlmostEqual(rect1.y(), 0); + assertAlmostEqual(rect1.width() + rect2.width(), 100); + assertAlmostEqual(rect1.height() + rect2.width(), 100); + assertAlmostEqual(rect1.rotation(), 90); - assert.almostEqual(rect2.x(), 50); - assert.almostEqual(rect2.y(), 50); - assert.almostEqual(rect2.width() + rect2.width(), 100); - assert.almostEqual(rect2.height() + rect2.width(), 100); - assert.almostEqual(tr.rotation(), 90); + assertAlmostEqual(rect2.x(), 50); + assertAlmostEqual(rect2.y(), 50); + assertAlmostEqual(rect2.width() + rect2.width(), 100); + assertAlmostEqual(rect2.height() + rect2.width(), 100); + assertAlmostEqual(tr.rotation(), 90); tr._fitNodesInto({ x: 100, @@ -3889,11 +3831,11 @@ describe('Transformer', function () { rotation: Konva.getAngle(180), }); - assert.almostEqual(tr.x(), rect1.x()); - assert.almostEqual(tr.y(), rect1.y()); - assert.almostEqual(tr.width(), rect1.width() + rect2.width()); - assert.almostEqual(tr.height(), rect1.height() + rect2.width()); - assert.almostEqual(tr.rotation(), 180); + assertAlmostEqual(tr.x(), rect1.x()); + assertAlmostEqual(tr.y(), rect1.y()); + assertAlmostEqual(tr.width(), rect1.width() + rect2.width()); + assertAlmostEqual(tr.height(), rect1.height() + rect2.width()); + assertAlmostEqual(tr.rotation(), 180); }); it('events on several nodes', function () { @@ -4015,17 +3957,17 @@ describe('Transformer', function () { layer.draw(); - assert.almostEqual(rect1.x(), 100); - assert.almostEqual(rect1.y(), 41.421356237309496); - assert.almostEqual(rect1.width() + rect2.width(), 100); - assert.almostEqual(rect1.height() + rect2.width(), 100); - assert.almostEqual(rect1.rotation(), 132.45339125826706); + assertAlmostEqual(rect1.x(), 100); + assertAlmostEqual(rect1.y(), 41.421356237309496); + assertAlmostEqual(rect1.width() + rect2.width(), 100); + assertAlmostEqual(rect1.height() + rect2.width(), 100); + assertAlmostEqual(rect1.rotation(), 132.45339125826706); - assert.almostEqual(rect2.x(), 46.41016151377549); - assert.almostEqual(rect2.y(), 100); - assert.almostEqual(rect2.width() + rect2.width(), 100); - assert.almostEqual(rect2.height() + rect2.width(), 100); - assert.almostEqual(tr.rotation(), 90); + assertAlmostEqual(rect2.x(), 46.41016151377549); + assertAlmostEqual(rect2.y(), 100); + assertAlmostEqual(rect2.width() + rect2.width(), 100); + assertAlmostEqual(rect2.height() + rect2.width(), 100); + assertAlmostEqual(tr.rotation(), 90); tr._fitNodesInto({ x: 100, @@ -4035,8 +3977,8 @@ describe('Transformer', function () { rotation: Konva.getAngle(180), }); - assert.almostEqual(tr.x(), 100); - assert.almostEqual(tr.y(), 100); + assertAlmostEqual(tr.x(), 100); + assertAlmostEqual(tr.y(), 100); }); it('drag several nodes', function () { @@ -4368,20 +4310,20 @@ describe('Transformer', function () { rotation: Konva.getAngle(90), }); - assert.almostEqual(tr.x(), rect1.x()); - assert.almostEqual(tr.y(), rect1.y()); - assert.almostEqual(tr.width(), rect1.width() + rect2.width()); - assert.almostEqual(tr.height(), rect1.height() + rect2.width()); - assert.almostEqual(tr.rotation(), 90); + assertAlmostEqual(tr.x(), rect1.x()); + assertAlmostEqual(tr.y(), rect1.y()); + assertAlmostEqual(tr.width(), rect1.width() + rect2.width()); + assertAlmostEqual(tr.height(), rect1.height() + rect2.width()); + assertAlmostEqual(tr.rotation(), 90); layer.draw(); tr.nodes([rect1, rect2]); - assert.almostEqual(tr.x(), 0); - assert.almostEqual(tr.y(), 0); - assert.almostEqual(tr.width(), rect1.width() + rect2.width()); - assert.almostEqual(tr.height(), rect1.height() + rect2.width()); - assert.almostEqual(tr.rotation(), 0); + assertAlmostEqual(tr.x(), 0); + assertAlmostEqual(tr.y(), 0); + assertAlmostEqual(tr.width(), rect1.width() + rect2.width()); + assertAlmostEqual(tr.height(), rect1.height() + rect2.width()); + assertAlmostEqual(tr.rotation(), 0); }); it('rotate several nodes inside different parents', function () { @@ -4441,23 +4383,23 @@ describe('Transformer', function () { var newBox = tr._getNodeRect(); - assert.almostEqual(box.x, newBox.x); - assert.almostEqual(box.y, newBox.y); - assert.almostEqual(box.width, newBox.width); - assert.almostEqual(box.height, newBox.height); - assert.almostEqual(box.rotation, newBox.rotation); + assertAlmostEqual(box.x, newBox.x); + assertAlmostEqual(box.y, newBox.y); + assertAlmostEqual(box.width, newBox.width); + assertAlmostEqual(box.height, newBox.height); + assertAlmostEqual(box.rotation, newBox.rotation); - assert.almostEqual(rect1.x(), 0); - assert.almostEqual(rect1.y(), 0); - assert.almostEqual(rect1.width(), 50); - assert.almostEqual(rect1.height(), 50); - assert.almostEqual(rect1.rotation(), 0); + assertAlmostEqual(rect1.x(), 0); + assertAlmostEqual(rect1.y(), 0); + assertAlmostEqual(rect1.width(), 50); + assertAlmostEqual(rect1.height(), 50); + assertAlmostEqual(rect1.rotation(), 0); - assert.almostEqual(rect2.x(), 0); - assert.almostEqual(rect2.y(), 50); - assert.almostEqual(rect2.width(), 25); - assert.almostEqual(rect2.height(), 50); - assert.almostEqual(rect2.rotation(), 0); + assertAlmostEqual(rect2.x(), 0); + assertAlmostEqual(rect2.y(), 50); + assertAlmostEqual(rect2.width(), 25); + assertAlmostEqual(rect2.height(), 50); + assertAlmostEqual(rect2.rotation(), 0); }); it('can attach transformer into several nodes and fit into negative scale', function () { @@ -4508,11 +4450,11 @@ describe('Transformer', function () { }); layer.draw(); - assert.almostEqual(Math.round(tr.x()), 0); - assert.almostEqual(Math.round(tr.y()), 0); - assert.almostEqual(tr.width(), rect1.width() + rect2.width()); - assert.almostEqual(tr.height(), rect1.height() + rect2.height()); - assert.almostEqual(tr.rotation(), 0); + assertAlmostEqual(Math.round(tr.x()), 0); + assertAlmostEqual(Math.round(tr.y()), 0); + assertAlmostEqual(tr.width(), rect1.width() + rect2.width()); + assertAlmostEqual(tr.height(), rect1.height() + rect2.height()); + assertAlmostEqual(tr.rotation(), 0); }); it('boundBoxFox should work in absolute coordinates', function () { diff --git a/test/unit-new/Tween-test.ts b/test/unit/Tween-test.ts similarity index 100% rename from test/unit-new/Tween-test.ts rename to test/unit/Tween-test.ts diff --git a/test/unit-new/Util-test.ts b/test/unit/Util-test.ts similarity index 100% rename from test/unit-new/Util-test.ts rename to test/unit/Util-test.ts diff --git a/test/unit-new/shapes/Wedge-test.ts b/test/unit/Wedge-test.ts similarity index 97% rename from test/unit-new/shapes/Wedge-test.ts rename to test/unit/Wedge-test.ts index 28800228..00aab0ed 100644 --- a/test/unit-new/shapes/Wedge-test.ts +++ b/test/unit/Wedge-test.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import { addStage, Konva } from '../utis'; +import { addStage, Konva } from './utis'; describe('Wedge', function () { // ====================================================== diff --git a/test/unit-new/imagediff.ts b/test/unit/imagediff.ts similarity index 100% rename from test/unit-new/imagediff.ts rename to test/unit/imagediff.ts diff --git a/test/unit-new/utis.ts b/test/unit/utis.ts similarity index 86% rename from test/unit-new/utis.ts rename to test/unit/utis.ts index a523f2bb..b29f361a 100644 --- a/test/unit-new/utis.ts +++ b/test/unit/utis.ts @@ -11,6 +11,7 @@ Konva.showWarnings = true; import { imagediff } from './imagediff'; import { Layer } from '../../src/Layer'; +import { Stage } from '../../src/Stage'; export const isNode = typeof global.document === 'undefined'; export const isBrowser = !isNode; @@ -46,19 +47,6 @@ export function addStage(attrs?) { return stage; } -beforeEach(function () { - Konva.inDblClickWindow = false; - - if ( - !( - this.currentTest.body.indexOf('assert') !== -1 || - this.currentTest.body.toLowerCase().indexOf('compare') !== -1 - ) - ) { - console.error('Found test without asserts: ' + this.currentTest.title); - } -}); - export function loadImage(url, callback) { const isBase64 = url.indexOf('base64') >= 0; if (isNode && !isBase64) { @@ -129,15 +117,15 @@ export function compareLayerAndCanvas(layer: Layer, canvas, tol?, secondTol?) { compareCanvases(layer.getCanvasElement(), canvas, tol, secondTol); } -export function cloneAndCompareLayer(layer: Layer, tol?) { +export function cloneAndCompareLayer(layer: Layer, tol?, secondTol?) { var layer2 = layer.clone(); layer.getStage().add(layer2); layer2.hide(); - compareLayers(layer, layer2, tol); + compareLayers(layer, layer2, tol, secondTol); } -export function compareLayers(layer1: Layer, layer2: Layer, tol?) { - compareLayerAndCanvas(layer1, layer2.getCanvasElement(), tol); +export function compareLayers(layer1: Layer, layer2: Layer, tol?, secondTol?) { + compareLayerAndCanvas(layer1, layer2.getCanvasElement(), tol, secondTol); } export function createCanvas() { @@ -160,24 +148,6 @@ export function showHit(layer) { Konva.UA.mobile = false; -afterEach(function () { - var isFailed = this.currentTest.state == 'failed'; - var isManual = this.currentTest.parent.title === 'Manual'; - - Konva.stages.forEach(function (stage) { - clearTimeout(stage.dblTimeout); - }); - - if (!isFailed && !isManual) { - Konva.stages.forEach(function (stage) { - stage.destroy(); - }); - if (Konva.DD._dragElements.size) { - throw 'Why drag elements are not cleaned?'; - } - } -}); - export function simulateMouseDown(stage, pos) { var top = isNode ? 0 : stage.content.getBoundingClientRect().top; @@ -324,17 +294,17 @@ export function simulateTouchEnd(stage, pos, changed?) { Konva.DD._endDragAfter(evt); } -export function simulatePointerDown(stage, pos) { +export function simulatePointerDown(stage: Stage, pos) { var top = isNode ? 0 : stage.content.getBoundingClientRect().top; - stage._mousedown({ + stage._pointerdown({ clientX: pos.x, clientY: pos.y + top, button: pos.button || 0, pointerId: pos.pointerId || 1, - }); + } as any); } -export function simulatePointerMove(stage, pos) { +export function simulatePointerMove(stage: Stage, pos) { var top = isNode ? 0 : stage.content.getBoundingClientRect().top; var evt = { clientX: pos.x, @@ -343,11 +313,12 @@ export function simulatePointerMove(stage, pos) { pointerId: pos.pointerId || 1, }; - stage._mousemove(evt); + stage._pointermove(evt as any); Konva.DD._drag(evt); } -export function simulatePointerUp(stage, pos) { +export function simulatePointerUp(stage: Stage, pos) { + debugger; var top = isNode ? 0 : stage.content.getBoundingClientRect().top; var evt = { clientX: pos.x, @@ -357,6 +328,16 @@ export function simulatePointerUp(stage, pos) { }; Konva.DD._endDragBefore(evt); - stage._mouseup(evt); + stage._pointerup(evt as any); Konva.DD._endDragAfter(evt); } + +function isClose(a, b) { + return Math.abs(a - b) < 0.000001; +} + +export const assertAlmostEqual = function (val1, val2) { + if (!isClose(val1, val2)) { + throw new Error('Expected ' + val1 + ' to be almost equal to ' + val2); + } +}; diff --git a/test/worker.js b/test/worker.js deleted file mode 100644 index 4a46d60e..00000000 --- a/test/worker.js +++ /dev/null @@ -1,193 +0,0 @@ -importScripts('../../konva.js'); - -Konva.Util.createCanvasElement = () => { - const canvas = new OffscreenCanvas(1, 1); - canvas.style = {}; - return canvas; -}; - -var stage = new Konva.Stage({ - width: 200, - height: 200, -}); - -var layer = new Konva.Layer(); -stage.add(layer); - -var topGroup = new Konva.Group(); -layer.add(topGroup); - -var counter = new Konva.Text({ - x: 5, - y: 35, -}); -topGroup.add(counter); - -var button = new Konva.Label({ - x: 5, - y: 5, - opacity: 0.75, -}); -topGroup.add(button); - -button.add( - new Konva.Tag({ - fill: 'black', - }) -); - -button.add( - new Konva.Text({ - text: 'Push me to add bunnies', - fontFamily: 'Calibri', - fontSize: 18, - padding: 5, - fill: 'white', - }) -); - -var circle = new Konva.Circle({ - x: stage.width() / 2, - y: stage.height() / 2, - radius: 20, - fill: 'red', - draggable: true, -}); -topGroup.add(circle); -layer.draw(); - -onmessage = function (evt) { - if (evt.data.canvas) { - var canvas = evt.data.canvas; - stage.setSize({ - width: canvas.width, - height: canvas.height, - }); - const ctx = canvas.getContext('2d'); - setInterval(() => { - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.drawImage(layer.getCanvas()._canvas, 0, 0); - }, 16); - } - if (evt.data.eventName === 'mouseup') { - Konva.DD._endDragBefore(evt.data.event); - } - if (evt.data.eventName === 'touchend') { - Konva.DD._endDragBefore(evt.data.event); - } - if (evt.data.eventName === 'mousemove') { - Konva.DD._drag(evt.data.event); - } - if (evt.data.eventName === 'touchmove') { - Konva.DD._drag(evt.data.event); - } - if (evt.data.eventName === 'mouseup') { - Konva.DD._endDragAfter(evt.data.event); - } - if (evt.data.eventName === 'touchend') { - Konva.DD._endDragAfter(evt.data.event); - } - - if (evt.data.eventName) { - stage['_' + evt.data.eventName](evt.data.event); - } -}; - -function requestAnimationFrame(cb) { - setTimeout(cb, 16); -} -async function runBunnies() { - var bunnys = []; - var gravity = 0.75; - - var startBunnyCount = 100; - var isAdding = false; - var count = 0; - var amount = 10; - const imgBlob = await fetch('./assets/bunny.png').then((r) => r.blob()); - const img = await createImageBitmap(imgBlob); - - button.on('mousedown', function () { - isAdding = true; - }); - - button.on('mouseup', function () { - isAdding = false; - }); - - for (var i = 0; i < startBunnyCount; i++) { - var bunny = new Konva.Image({ - image: img, - transformsEnabled: 'position', - x: 10, - y: 10, - listening: false, - }); - - bunny.speedX = Math.random() * 10; - bunny.speedY = Math.random() * 10 - 5; - - bunnys.push(bunny); - counter.text('Bunnies number: ' + bunnys.length); - layer.add(bunny); - } - topGroup.moveToTop(); - layer.draw(); - - function update() { - var maxX = stage.width() - 10; - var minX = 0; - var maxY = stage.height() - 10; - var minY = 0; - if (isAdding) { - // add 10 at a time :) - - for (var i = 0; i < amount; i++) { - var bunny = new Konva.Image({ - image: img, - transformsEnabled: 'position', - x: 0, - y: 0, - listening: false, - }); - bunny.speedX = Math.random() * 10; - bunny.speedY = Math.random() * 10 - 5; - bunnys.push(bunny); - layer.add(bunny); - counter.text('Bunnies number: ' + bunnys.length); - count++; - } - topGroup.moveToTop(); - } - - for (var i = 0; i < bunnys.length; i++) { - var bunny = bunnys[i]; - bunny.setX(bunny.getX() + bunny.speedX); - bunny.setY(bunny.getY() + bunny.speedY); - bunny.speedY += gravity; - if (bunny.getX() > maxX - img.width) { - bunny.speedX *= -1; - bunny.setX(maxX - img.width); - } else if (bunny.getX() < minX) { - bunny.speedX *= -1; - bunny.setX(minX); - } - - if (bunny.getY() > maxY - img.height) { - bunny.speedY *= -0.85; - bunny.setY(maxY - img.height); - if (Math.random() > 0.5) { - bunny.speedY -= Math.random() * 6; - } - } else if (bunny.getY() < minY) { - bunny.speedY = 0; - bunny.setY(minY); - } - } - layer.drawScene(); - requestAnimationFrame(update); - } - update(); -} - -runBunnies();