diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index d6f71d70..00000000 --- a/.travis.yml +++ /dev/null @@ -1,20 +0,0 @@ -language: node_js -node_js: - - node -branches: - only: - - master -sudo: required -before_script: - - npm install -g gulp -script: - - npm run full-build -deploy: - provider: npm - email: lavrton@gmail.com - api_key: - secure: rYqyBhn3K8tnt/XK6RFodBiIsIqwmUuPBEAOQxRt/elK4F7BVC+ba7/xgsvdFLP+Bqn4sS8b/YjfxUqm0lfxoph3qvvyKZ+qjuGCXBtvbY8EgGqX3FJKq/LJp8Vu4encCUOpI3PWXQEB+0OrC8ntKnBn1L1WP6lzDbRHj49e9ew= - on: - tags: true - all_branches: true - repo: konvajs/konva diff --git a/README.md b/README.md index d57ceff4..d2d5bf1a 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ This repository began as a GitHub fork of [ericdrowell/KineticJS](https://github - **Visit:** The [Home Page](http://konvajs.org/) and follow on [Twitter](https://twitter.com/lavrton) - **Discover:** [Tutorials](http://konvajs.org/docs), [API Documentation](http://konvajs.org/api) -- **Help:** [StackOverflow](http://stackoverflow.com/questions/tagged/konvajs), [Chat](https://gitter.im/konvajs/konva) +- **Help:** [StackOverflow](http://stackoverflow.com/questions/tagged/konvajs), [Discord Chat](https://discord.gg/8FqZwVT) # Quick Look diff --git a/konva.js b/konva.js index cbd2bfd7..bace17e2 100644 --- a/konva.js +++ b/konva.js @@ -5,10 +5,10 @@ }(this, (function () { 'use strict'; /* - * Konva JavaScript Framework v@@version + * Konva JavaScript Framework v7.2.5 * http://konvajs.org/ * Licensed under the MIT - * Date: @@date + * Date: Wed May 05 2021 * * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva) @@ -35,7 +35,7 @@ : {}; const Konva$2 = { _global: glob, - version: '@@version', + version: '7.2.5', isBrowser: detectBrowser(), isUnminified: /param/.test(function (param) { }.toString()), dblClickWindow: 400, @@ -2484,7 +2484,26 @@ * @constructor * @memberof Konva * @param {Object} config - * @@nodeParams + * @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] */ class Node { constructor(config) { @@ -2561,7 +2580,7 @@ * when the logic for a cached result depends on ancestor propagation, use this * method to clear self and children cache */ - _clearSelfAndDescendantCache(attr, forceEvent) { + _clearSelfAndDescendantCache(attr) { this._clearCache(attr); // trigger clear cache, so transformer can use it if (attr === ABSOLUTE_TRANSFORM) { @@ -3302,7 +3321,7 @@ this._batchingTransformChange = false; if (this._needClearTransformCache) { this._clearCache(TRANSFORM); - this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM, true); + this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM); } this._needClearTransformCache = false; } @@ -5105,8 +5124,33 @@ * @augments Konva.Node * @abstract * @param {Object} config - * @@nodeParams - * @@containerParams + * @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 + */ class Container extends Node { constructor() { @@ -5378,16 +5422,16 @@ }); return arr; } - _clearSelfAndDescendantCache(attr, forceEvent) { + _clearSelfAndDescendantCache(attr) { var _a; - super._clearSelfAndDescendantCache(attr, forceEvent); + super._clearSelfAndDescendantCache(attr); // skip clearing if node is cached with canvas // for performance reasons !!! if (this.isCached()) { return; } (_a = this.children) === null || _a === void 0 ? void 0 : _a.forEach(function (node) { - node._clearSelfAndDescendantCache(attr, forceEvent); + node._clearSelfAndDescendantCache(attr); }); } _setChildrenIndices() { @@ -5727,7 +5771,26 @@ * @augments Konva.Container * @param {Object} config * @param {String|Element} config.container Container selector or DOM element - * @@nodeParams + * @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] * @example * var stage = new Konva.Stage({ * width: 500, @@ -6609,8 +6672,80 @@ * @memberof Konva * @augments Konva.Node * @param {Object} config - * @@shapeParams - * @@nodeParams + * @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] * @example * var customShape = new Konva.Shape({ * x: 5, @@ -8123,8 +8258,33 @@ * @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. - * @@nodeParams - * @@containerParams + * @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 + * @example * var layer = new Konva.Layer(); * stage.add(layer); @@ -8589,7 +8749,13 @@ * @constructor * @memberof Konva * @augments Konva.Layer - * @@containerParams + * * @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 + * @example * var layer = new Konva.FastLayer(); */ @@ -8609,8 +8775,33 @@ * @memberof Konva * @augments Konva.Container * @param {Object} config - * @@nodeParams - * @@containerParams + * @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 + * @example * var group = new Konva.Group(); */ @@ -9577,8 +9768,80 @@ * @param {Number} config.innerRadius * @param {Number} config.outerRadius * @param {Boolean} [config.clockwise] - * @@shapeParams - * @@nodeParams + * @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] * @example * // draw a Arc that's pointing downwards * var arc = new Konva.Arc({ @@ -9690,8 +9953,80 @@ * 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 - * @@shapeParams - * @@nodeParams + * @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] * @example * var line = new Konva.Line({ * x: 100, @@ -9911,8 +10246,80 @@ * @param {Number} config.pointerWidth Arrow pointer width. Default value is 10. * @param {Boolean} config.pointerAtBeginning Do we need to draw pointer on beginning position?. Default false. * @param {Boolean} config.pointerAtEnding Do we need to draw pointer on ending position?. Default true. - * @@shapeParams - * @@nodeParams + * @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] * @example * var line = new Konva.Line({ * points: [73, 70, 340, 23, 450, 60, 500, 20], @@ -10068,8 +10475,80 @@ * @augments Konva.Shape * @param {Object} config * @param {Number} config.radius - * @@shapeParams - * @@nodeParams + * @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] * @example * // create circle * var circle = new Konva.Circle({ @@ -10129,8 +10608,80 @@ * @augments Konva.Shape * @param {Object} config * @param {Object} config.radius defines x and y radius - * @@shapeParams - * @@nodeParams + * @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] * @example * var ellipse = new Konva.Ellipse({ * radius : { @@ -10227,8 +10778,80 @@ * @param {Object} config * @param {Image} config.image * @param {Object} [config.crop] - * @@shapeParams - * @@nodeParams + * @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] * @example * var imageObj = new Image(); * imageObj.onload = function() { @@ -10450,7 +11073,26 @@ * @constructor * @memberof Konva * @param {Object} config - * @@nodeParams + * @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] * @example * // create label * var label = new Konva.Label({ @@ -10711,8 +11353,80 @@ * @augments Konva.Shape * @param {Object} config * @param {String} config.data SVG data string - * @@shapeParams - * @@nodeParams + * @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] * @example * var path = new Konva.Path({ * x: 240, @@ -11457,8 +12171,80 @@ * @augments Konva.Shape * @param {Object} config * @param {Number} [config.cornerRadius] - * @@shapeParams - * @@nodeParams + * @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] * @example * var rect = new Konva.Rect({ * width: 100, @@ -11533,8 +12319,80 @@ * @param {Object} config * @param {Number} config.sides * @param {Number} config.radius - * @@shapeParams - * @@nodeParams + * @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] * @example * var hexagon = new Konva.RegularPolygon({ * x: 100, @@ -11644,8 +12502,80 @@ * @param {Number} config.innerRadius * @param {Number} config.outerRadius * @param {Boolean} [config.clockwise] - * @@shapeParams - * @@nodeParams + * @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] * @example * var ring = new Konva.Ring({ * innerRadius: 40, @@ -11721,8 +12651,80 @@ * @param {Integer} [config.frameIndex] animation frame index * @param {Image} config.image image object * @param {Integer} [config.frameRate] animation frame rate - * @@shapeParams - * @@nodeParams + * @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] * @example * var imageObj = new Image(); * imageObj.onload = function() { @@ -12014,8 +13016,80 @@ * @param {Integer} config.numPoints * @param {Number} config.innerRadius * @param {Number} config.outerRadius - * @@shapeParams - * @@nodeParams + * @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] * @example * var star = new Konva.Star({ * x: 100, @@ -12186,8 +13260,80 @@ * @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 - * @@shapeParams - * @@nodeParams + * @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] * @example * var text = new Konva.Text({ * x: 10, @@ -12779,8 +13925,80 @@ * @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 - * @@shapeParams - * @@nodeParams + * @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] * @example * var kerningPairs = { * 'A': { @@ -14667,8 +15885,80 @@ * @param {Number} config.angle in degrees * @param {Number} config.radius * @param {Boolean} [config.clockwise] - * @@shapeParams - * @@nodeParams + * @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] * @example * // draw a wedge that's pointing downwards * var wedge = new Konva.Wedge({ diff --git a/konva.min.js b/konva.min.js index 368a104b..e7660c94 100644 --- a/konva.min.js +++ b/konva.min.js @@ -3,10 +3,10 @@ * Konva JavaScript Framework v7.2.5 * http://konvajs.org/ * Licensed under the MIT - * Date: Tue May 04 2021 + * Date: Wed May 05 2021 * * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva) * * @license - */var t=Math.PI/180;const e=function(t){var e=t.indexOf("msie ");if(e>0)return parseInt(t.substring(e+5,t.indexOf(".",e)),10);if(t.indexOf("trident/")>0){var i=t.indexOf("rv:");return parseInt(t.substring(i+3,t.indexOf(".",i)),10)}var r=t.indexOf("edge/");return r>0&&parseInt(t.substring(r+5,t.indexOf(".",r)),10)},i=function(t){var i=t.toLowerCase(),r=/(chrome)[ /]([\w.]+)/.exec(i)||/(webkit)[ /]([\w.]+)/.exec(i)||/(opera)(?:.*version|)[ /]([\w.]+)/.exec(i)||/(msie) ([\w.]+)/.exec(i)||i.indexOf("compatible")<0&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(i)||[],a=!!t.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i),n=!!t.match(/IEMobile/i);return{browser:r[1]||"",version:r[2]||"0",isIE:e(i),mobile:a,ieMobile:n}},r="undefined"!=typeof global?global:"undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope?self:{},a={_global:r,version:"7.2.5",isBrowser:"undefined"!=typeof window&&("[object Window]"==={}.toString.call(window)||"[object global]"==={}.toString.call(window)),isUnminified:/param/.test(function(t){}.toString()),dblClickWindow:400,getAngle:e=>a.angleDeg?e*t:e,enableTrace:!1,_pointerEventsEnabled:!1,autoDrawEnabled:!0,hitOnDragEnabled:!1,captureTouchEventsEnabled:!1,listenClickTap:!1,inDblClickWindow:!1,pixelRatio:"undefined"!=typeof window&&window.devicePixelRatio||1,dragDistance:3,angleDeg:!0,showWarnings:!0,dragButtons:[0,1],isDragging:()=>a.DD.isDragging,isDragReady:()=>!!a.DD.node,UA:i(r.navigator&&r.navigator.userAgent||""),document:r.document,_injectGlobal(t){r.Konva=t},_parseUA:i},n=t=>{a[t.prototype.getClassName()]=t};a._injectGlobal(a);class s{constructor(t=[1,0,0,1,0,0]){this.dirty=!1,this.m=t&&t.slice()||[1,0,0,1,0,0]}reset(){this.m[0]=1,this.m[1]=0,this.m[2]=0,this.m[3]=1,this.m[4]=0,this.m[5]=0}copy(){return new s(this.m)}copyInto(t){t.m[0]=this.m[0],t.m[1]=this.m[1],t.m[2]=this.m[2],t.m[3]=this.m[3],t.m[4]=this.m[4],t.m[5]=this.m[5]}point(t){var e=this.m;return{x:e[0]*t.x+e[2]*t.y+e[4],y:e[1]*t.x+e[3]*t.y+e[5]}}translate(t,e){return this.m[4]+=this.m[0]*t+this.m[2]*e,this.m[5]+=this.m[1]*t+this.m[3]*e,this}scale(t,e){return this.m[0]*=t,this.m[1]*=t,this.m[2]*=e,this.m[3]*=e,this}rotate(t){var e=Math.cos(t),i=Math.sin(t),r=this.m[0]*e+this.m[2]*i,a=this.m[1]*e+this.m[3]*i,n=this.m[0]*-i+this.m[2]*e,s=this.m[1]*-i+this.m[3]*e;return this.m[0]=r,this.m[1]=a,this.m[2]=n,this.m[3]=s,this}getTranslation(){return{x:this.m[4],y:this.m[5]}}skew(t,e){var i=this.m[0]+this.m[2]*e,r=this.m[1]+this.m[3]*e,a=this.m[2]+this.m[0]*t,n=this.m[3]+this.m[1]*t;return this.m[0]=i,this.m[1]=r,this.m[2]=a,this.m[3]=n,this}multiply(t){var e=this.m[0]*t.m[0]+this.m[2]*t.m[1],i=this.m[1]*t.m[0]+this.m[3]*t.m[1],r=this.m[0]*t.m[2]+this.m[2]*t.m[3],a=this.m[1]*t.m[2]+this.m[3]*t.m[3],n=this.m[0]*t.m[4]+this.m[2]*t.m[5]+this.m[4],s=this.m[1]*t.m[4]+this.m[3]*t.m[5]+this.m[5];return this.m[0]=e,this.m[1]=i,this.m[2]=r,this.m[3]=a,this.m[4]=n,this.m[5]=s,this}invert(){var t=1/(this.m[0]*this.m[3]-this.m[1]*this.m[2]),e=this.m[3]*t,i=-this.m[1]*t,r=-this.m[2]*t,a=this.m[0]*t,n=t*(this.m[2]*this.m[5]-this.m[3]*this.m[4]),s=t*(this.m[1]*this.m[4]-this.m[0]*this.m[5]);return this.m[0]=e,this.m[1]=i,this.m[2]=r,this.m[3]=a,this.m[4]=n,this.m[5]=s,this}getMatrix(){return this.m}setAbsolutePosition(t,e){var i=this.m[0],r=this.m[1],a=this.m[2],n=this.m[3],s=this.m[4],o=(i*(e-this.m[5])-r*(t-s))/(i*n-r*a),h=(t-s-a*o)/i;return this.translate(h,o)}decompose(){var t=this.m[0],e=this.m[1],i=this.m[2],r=this.m[3],a=t*r-e*i;let n={x:this.m[4],y:this.m[5],rotation:0,scaleX:0,scaleY:0,skewX:0,skewY:0};if(0!=t||0!=e){var s=Math.sqrt(t*t+e*e);n.rotation=e>0?Math.acos(t/s):-Math.acos(t/s),n.scaleX=s,n.scaleY=a/s,n.skewX=(t*i+e*r)/a,n.skewY=0}else if(0!=i||0!=r){var o=Math.sqrt(i*i+r*r);n.rotation=Math.PI/2-(r>0?Math.acos(-i/o):-Math.acos(i/o)),n.scaleX=a/o,n.scaleY=o,n.skewX=0,n.skewY=(t*i+e*r)/a}return n.rotation=g._getRotation(n.rotation),n}}var o=Math.PI/180,h=180/Math.PI,l={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,132,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,255,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,203],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[119,128,144],slategrey:[119,128,144],snow:[255,255,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],transparent:[255,255,255,0],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,5]},d=/rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/,c=[];const g={_isElement:t=>!(!t||1!=t.nodeType),_isFunction:t=>!!(t&&t.constructor&&t.call&&t.apply),_isPlainObject:t=>!!t&&t.constructor===Object,_isArray:t=>"[object Array]"===Object.prototype.toString.call(t),_isNumber:t=>"[object Number]"===Object.prototype.toString.call(t)&&!isNaN(t)&&isFinite(t),_isString:t=>"[object String]"===Object.prototype.toString.call(t),_isBoolean:t=>"[object Boolean]"===Object.prototype.toString.call(t),isObject:t=>t instanceof Object,isValidSelector(t){if("string"!=typeof t)return!1;var e=t[0];return"#"===e||"."===e||e===e.toUpperCase()},_sign:t=>0===t||t>0?1:-1,requestAnimFrame(t){c.push(t);const e="undefined"!=typeof requestAnimationFrame&&requestAnimationFrame||function(t){setTimeout(t,60)};1===c.length&&e((function(){const t=c;c=[],t.forEach((function(t){t()}))}))},createCanvasElement(){var t=document.createElement("canvas");try{t.style=t.style||{}}catch(t){}return t},createImageElement:()=>document.createElement("img"),_isInDocument(t){for(;t=t.parentNode;)if(t==document)return!0;return!1},_simplifyArray(t){var e,i,r=[],a=t.length,n=g;for(e=0;e((1<<24)+(t<<16)+(e<<8)+i).toString(16).slice(1),_hexToRgb(t){t=t.replace("#","");var e=parseInt(t,16);return{r:e>>16&255,g:e>>8&255,b:255&e}},getRandomColor(){for(var t=(16777215*Math.random()<<0).toString(16);t.length<6;)t="0"+t;return"#"+t},get:(t,e)=>void 0===t?e:t,getRGB(t){var e;return t in l?{r:(e=l[t])[0],g:e[1],b:e[2]}:"#"===t[0]?this._hexToRgb(t.substring(1)):"rgb("===t.substr(0,4)?(e=d.exec(t.replace(/ /g,"")),{r:parseInt(e[1],10),g:parseInt(e[2],10),b:parseInt(e[3],10)}):{r:0,g:0,b:0}},colorToRGBA:t=>(t=t||"black",g._namedColorToRBA(t)||g._hex3ColorToRGBA(t)||g._hex6ColorToRGBA(t)||g._rgbColorToRGBA(t)||g._rgbaColorToRGBA(t)||g._hslColorToRGBA(t)),_namedColorToRBA(t){var e=l[t.toLowerCase()];return e?{r:e[0],g:e[1],b:e[2],a:1}:null},_rgbColorToRGBA(t){if(0===t.indexOf("rgb(")){var e=(t=t.match(/rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number);return{r:e[0],g:e[1],b:e[2],a:1}}},_rgbaColorToRGBA(t){if(0===t.indexOf("rgba(")){var e=(t=t.match(/rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number);return{r:e[0],g:e[1],b:e[2],a:e[3]}}},_hex6ColorToRGBA(t){if("#"===t[0]&&7===t.length)return{r:parseInt(t.slice(1,3),16),g:parseInt(t.slice(3,5),16),b:parseInt(t.slice(5,7),16),a:1}},_hex3ColorToRGBA(t){if("#"===t[0]&&4===t.length)return{r:parseInt(t[1]+t[1],16),g:parseInt(t[2]+t[2],16),b:parseInt(t[3]+t[3],16),a:1}},_hslColorToRGBA(t){if(/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.test(t)){const[e,...i]=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(t),r=Number(i[0])/360,a=Number(i[1])/100,n=Number(i[2])/100;let s,o,h;if(0===a)return h=255*n,{r:Math.round(h),g:Math.round(h),b:Math.round(h),a:1};s=n<.5?n*(1+a):n+a-n*a;const l=2*n-s,d=[0,0,0];for(let t=0;t<3;t++)o=r+1/3*-(t-1),o<0&&o++,o>1&&o--,h=6*o<1?l+6*(s-l)*o:2*o<1?s:3*o<2?l+(s-l)*(2/3-o)*6:l,d[t]=255*h;return{r:Math.round(d[0]),g:Math.round(d[1]),b:Math.round(d[2]),a:1}}},haveIntersection:(t,e)=>!(e.x>t.x+t.width||e.x+e.widtht.y+t.height||e.y+e.heightt.slice(0),_degToRad:t=>t*o,_radToDeg:t=>t*h,_getRotation:t=>a.angleDeg?g._radToDeg(t):t,_capitalize:t=>t.charAt(0).toUpperCase()+t.slice(1),throw(t){throw new Error("Konva error: "+t)},error(t){console.error("Konva error: "+t)},warn(t){a.showWarnings&&console.warn("Konva warning: "+t)},extend(t,e){function i(){this.constructor=t}i.prototype=e.prototype;var r=t.prototype;for(var a in t.prototype=new i,r)r.hasOwnProperty(a)&&(t.prototype[a]=r[a]);t.__super__=e.prototype,t.super=e},_getControlPoints(t,e,i,r,a,n,s){var o=Math.sqrt(Math.pow(i-t,2)+Math.pow(r-e,2)),h=Math.sqrt(Math.pow(a-i,2)+Math.pow(n-r,2)),l=s*o/(o+h),d=s*h/(o+h);return[i-l*(a-t),r-l*(n-e),i+d*(a-t),r+d*(n-e)]},_expandPoints(t,e){var i,r,a=t.length,n=[];for(i=2;ie<=t&&t1?(s=i,o=r,h=(i-a)*(i-a)+(r-n)*(r-n)):h=((s=t+d*(i-t))-a)*(s-a)+((o=e+d*(r-e))-n)*(o-n)}return[s,o,h]},_getProjectionToLine(t,e,i){var r=g.cloneObject(t),a=Number.MAX_VALUE;return e.forEach((function(n,s){if(i||s!==e.length-1){var o=e[(s+1)%e.length],h=g._getProjectionToSegment(n.x,n.y,o.x,o.y,t.x,t.y),l=h[0],d=h[1],c=h[2];ce.length){var s=e;e=t,t=s}for(r=0;rt.touches?t.changedTouches[0].identifier:999};function u(t){return g._isString(t)?'"'+t+'"':"[object Number]"===Object.prototype.toString.call(t)||g._isBoolean(t)?t:Object.prototype.toString.call(t)}function f(t){return t>255?255:t<0?0:Math.round(t)}function p(){if(a.isUnminified)return function(t,e){return g._isNumber(t)||g.warn(u(t)+' is a not valid value for "'+e+'" attribute. The value should be a number.'),t}}function v(t){if(a.isUnminified)return function(e,i){let r=g._isNumber(e),a=g._isArray(e)&&e.length==t;return r||a||g.warn(u(e)+' is a not valid value for "'+i+'" attribute. The value should be a number or Array('+t+")"),e}}function m(){if(a.isUnminified)return function(t,e){return g._isNumber(t)||"auto"===t||g.warn(u(t)+' is a not valid value for "'+e+'" attribute. The value should be a number or "auto".'),t}}function _(){if(a.isUnminified)return function(t,e){return g._isString(t)||g.warn(u(t)+' is a not valid value for "'+e+'" attribute. The value should be a string.'),t}}function y(){if(a.isUnminified)return function(t,e){const i=g._isString(t),r="[object CanvasGradient]"===Object.prototype.toString.call(t)||t&&t.addColorStop;return i||r||g.warn(u(t)+' is a not valid value for "'+e+'" attribute. The value should be a string or a native gradient.'),t}}function x(){if(a.isUnminified)return function(t,e){return!0===t||!1===t||g.warn(u(t)+' is a not valid value for "'+e+'" attribute. The value should be a boolean.'),t}}const b={addGetterSetter(t,e,i,r,a){b.addGetter(t,e,i),b.addSetter(t,e,r,a),b.addOverloadedGetterSetter(t,e)},addGetter(t,e,i){var r="get"+g._capitalize(e);t.prototype[r]=t.prototype[r]||function(){var t=this.attrs[e];return void 0===t?i:t}},addSetter(t,e,i,r){var a="set"+g._capitalize(e);t.prototype[a]||b.overWriteSetter(t,e,i,r)},overWriteSetter(t,e,i,r){var a="set"+g._capitalize(e);t.prototype[a]=function(t){return i&&null!=t&&(t=i.call(this,t,e)),this._setAttr(e,t),r&&r.call(this),this}},addComponentsGetterSetter(t,e,i,r,n){var s,o,h=i.length,l=g._capitalize,d="get"+l(e),c="set"+l(e);t.prototype[d]=function(){var t={};for(s=0;s"number"==typeof t?Math.floor(t):t)),h+="("+n.join(",")+")")):(h+=r.property,t||(h+="="+r.val)),h+=";";return h}clearTrace(){this.traceArr=[]}_trace(t){var e=this.traceArr;e.push(t),e.length>=100&&e.shift()}reset(){var t=this.getCanvas().getPixelRatio();this.setTransform(1*t,0,0,1*t,0,0)}getCanvas(){return this.canvas}clear(t){var e=this.getCanvas();t?this.clearRect(t.x||0,t.y||0,t.width||0,t.height||0):this.clearRect(0,0,e.getWidth()/e.pixelRatio,e.getHeight()/e.pixelRatio)}_applyLineCap(t){var e=t.getLineCap();e&&this.setAttr("lineCap",e)}_applyOpacity(t){var e=t.getAbsoluteOpacity();1!==e&&this.setAttr("globalAlpha",e)}_applyLineJoin(t){var e=t.attrs.lineJoin;e&&this.setAttr("lineJoin",e)}setAttr(t,e){this._context[t]=e}arc(t,e,i,r,a,n){this._context.arc(t,e,i,r,a,n)}arcTo(t,e,i,r,a){this._context.arcTo(t,e,i,r,a)}beginPath(){this._context.beginPath()}bezierCurveTo(t,e,i,r,a,n){this._context.bezierCurveTo(t,e,i,r,a,n)}clearRect(t,e,i,r){this._context.clearRect(t,e,i,r)}clip(){this._context.clip()}closePath(){this._context.closePath()}createImageData(t,e){var i=arguments;return 2===i.length?this._context.createImageData(t,e):1===i.length?this._context.createImageData(t):void 0}createLinearGradient(t,e,i,r){return this._context.createLinearGradient(t,e,i,r)}createPattern(t,e){return this._context.createPattern(t,e)}createRadialGradient(t,e,i,r,a,n){return this._context.createRadialGradient(t,e,i,r,a,n)}drawImage(t,e,i,r,a,n,s,o,h){var l=arguments,d=this._context;3===l.length?d.drawImage(t,e,i):5===l.length?d.drawImage(t,e,i,r,a):9===l.length&&d.drawImage(t,e,i,r,a,n,s,o,h)}ellipse(t,e,i,r,a,n,s,o){this._context.ellipse(t,e,i,r,a,n,s,o)}isPointInPath(t,e){return this._context.isPointInPath(t,e)}fill(){this._context.fill()}fillRect(t,e,i,r){this._context.fillRect(t,e,i,r)}strokeRect(t,e,i,r){this._context.strokeRect(t,e,i,r)}fillText(t,e,i){this._context.fillText(t,e,i)}measureText(t){return this._context.measureText(t)}getImageData(t,e,i,r){return this._context.getImageData(t,e,i,r)}lineTo(t,e){this._context.lineTo(t,e)}moveTo(t,e){this._context.moveTo(t,e)}rect(t,e,i,r){this._context.rect(t,e,i,r)}putImageData(t,e,i){this._context.putImageData(t,e,i)}quadraticCurveTo(t,e,i,r){this._context.quadraticCurveTo(t,e,i,r)}restore(){this._context.restore()}rotate(t){this._context.rotate(t)}save(){this._context.save()}scale(t,e){this._context.scale(t,e)}setLineDash(t){this._context.setLineDash?this._context.setLineDash(t):"mozDash"in this._context?this._context.mozDash=t:"webkitLineDash"in this._context&&(this._context.webkitLineDash=t)}getLineDash(){return this._context.getLineDash()}setTransform(t,e,i,r,a,n){this._context.setTransform(t,e,i,r,a,n)}stroke(){this._context.stroke()}strokeText(t,e,i,r){this._context.strokeText(t,e,i,r)}transform(t,e,i,r,a,n){this._context.transform(t,e,i,r,a,n)}translate(t,e){this._context.translate(t,e)}_enableTrace(){var t,e,i=this,r=S.length,a=this.setAttr,n=function(t){var r,a=i[t];i[t]=function(){return e=g._simplifyArray(Array.prototype.slice.call(arguments,0)),r=a.apply(i,arguments),i._trace({method:t,args:e}),r}};for(t=0;t{"dragging"===e.dragStatus&&(t=!0)}),t},justDragged:!1,get node(){var t;return G._dragElements.forEach(e=>{t=e.node}),t},_dragElements:new Map,_drag(t){const e=[];G._dragElements.forEach((i,r)=>{const{node:a}=i,n=a.getStage();n.setPointersPositions(t),void 0===i.pointerId&&(i.pointerId=g._getFirstPointerId(t));const s=n._changedPointerPositions.find(t=>t.id===i.pointerId);if(s){if("dragging"!==i.dragStatus){var o=a.dragDistance();if(Math.max(Math.abs(s.x-i.startPointerPos.x),Math.abs(s.y-i.startPointerPos.y)){e.fire("dragmove",{type:"dragmove",target:e,evt:t},!0)})},_endDragBefore(t){G._dragElements.forEach((e,i)=>{const{node:r}=e,n=r.getStage();t&&n.setPointersPositions(t);if(!n._changedPointerPositions.find(t=>t.id===e.pointerId))return;"dragging"!==e.dragStatus&&"stopped"!==e.dragStatus||(G.justDragged=!0,a.listenClickTap=!1,e.dragStatus="stopped");const s=e.node.getLayer()||e.node instanceof a.Stage&&e.node;s&&s.batchDraw()})},_endDragAfter(t){G._dragElements.forEach((e,i)=>{"stopped"===e.dragStatus&&e.node.fire("dragend",{type:"dragend",target:e.node,evt:t},!0),"dragging"!==e.dragStatus&&G._dragElements.delete(i)})}};a.isBrowser&&(window.addEventListener("mouseup",G._endDragBefore,!0),window.addEventListener("touchend",G._endDragBefore,!0),window.addEventListener("mousemove",G._drag),window.addEventListener("touchmove",G._drag),window.addEventListener("mouseup",G._endDragAfter,!1),window.addEventListener("touchend",G._endDragAfter,!1));const E={},R={},L=function(t,e){t&&E[t]===e&&delete E[t]},D=function(t,e){e&&(R[e]||(R[e]=[]),R[e].push(t))},I=function(t,e){if(t){var i=R[t];if(i){for(var r=0;rt+"Change.konva").join(" ");this.on(i,()=>{this._clearCache(t)}),this._attachedDepsListeners.set(t,!0)}return this._getCache(t,i)}_getCanvasCache(){return this._cache.get("canvas")}_clearSelfAndDescendantCache(t,e){this._clearCache(t),"absoluteTransform"===t&&this.fire("absoluteTransformChange")}clearCache(){return this._cache.delete("canvas"),this._clearSelfAndDescendantCache(),this._requestDraw(),this}cache(t){var e=t||{},i={};void 0!==e.x&&void 0!==e.y&&void 0!==e.width&&void 0!==e.height||(i=this.getClientRect({skipTransform:!0,relativeTo:this.getParent()}));var r=Math.ceil(e.width||i.width),a=Math.ceil(e.height||i.height),n=e.pixelRatio,s=void 0===e.x?i.x:e.x,o=void 0===e.y?i.y:e.y,h=e.offset||0,l=e.drawBorder||!1,d=e.hitCanvasPixelRatio||1;if(r&&a){s-=h,o-=h;var c=new A({pixelRatio:n,width:r+=2*h,height:a+=2*h}),u=new A({pixelRatio:n,width:0,height:0}),f=new M({pixelRatio:d,width:r,height:a}),p=c.getContext(),v=f.getContext();return f.isCache=!0,c.isCache=!0,this._cache.delete("canvas"),this._filterUpToDate=!1,!1===e.imageSmoothingEnabled&&(c.getContext()._context.imageSmoothingEnabled=!1,u.getContext()._context.imageSmoothingEnabled=!1),p.save(),v.save(),p.translate(-s,-o),v.translate(-s,-o),this._isUnderCache=!0,this._clearSelfAndDescendantCache("absoluteOpacity"),this._clearSelfAndDescendantCache("absoluteScale"),this.drawScene(c,this),this.drawHit(f,this),this._isUnderCache=!1,p.restore(),v.restore(),l&&(p.save(),p.beginPath(),p.rect(0,0,r,a),p.closePath(),p.setAttr("strokeStyle","red"),p.setAttr("lineWidth",5),p.stroke(),p.restore()),this._cache.set("canvas",{scene:c,filter:u,hit:f,x:s,y:o}),this._requestDraw(),this}g.error("Can not cache the node. Width or height of the node equals 0. Caching is skipped.")}isCached(){return this._cache.has("canvas")}getClientRect(t){throw new Error('abstract "getClientRect" method call')}_transformedRect(t,e){var i,r,a,n,s=[{x:t.x,y:t.y},{x:t.x+t.width,y:t.y},{x:t.x+t.width,y:t.y+t.height},{x:t.x,y:t.y+t.height}],o=this.getAbsoluteTransform(e);return s.forEach((function(t){var e=o.point(t);void 0===i&&(i=a=e.x,r=n=e.y),i=Math.min(i,e.x),r=Math.min(r,e.y),a=Math.max(a,e.x),n=Math.max(n,e.y)})),{x:i,y:r,width:a-i,height:n-r}}_drawCachedSceneCanvas(t){t.save(),t._applyOpacity(this),t._applyGlobalCompositeOperation(this);const e=this._getCanvasCache();t.translate(e.x,e.y);var i=this._getCachedSceneCanvas(),r=i.pixelRatio;t.drawImage(i._canvas,0,0,i.width/r,i.height/r),t.restore()}_drawCachedHitCanvas(t){var e=this._getCanvasCache(),i=e.hit;t.save(),t.translate(e.x,e.y),t.drawImage(i._canvas,0,0,i.width/i.pixelRatio,i.height/i.pixelRatio),t.restore()}_getCachedSceneCanvas(){var t,e,i,r,a=this.filters(),n=this._getCanvasCache(),s=n.scene,o=n.filter,h=o.getContext();if(a){if(!this._filterUpToDate){var l=s.pixelRatio;o.setSize(s.width/s.pixelRatio,s.height/s.pixelRatio);try{for(t=a.length,h.clear(),h.drawImage(s._canvas,0,0,s.getWidth()/l,s.getHeight()/l),e=h.getImageData(0,0,o.getWidth(),o.getHeight()),i=0;i{var e,i;if(!t)return this;for(e in t)"children"!==e&&(i="set"+g._capitalize(e),g._isFunction(this[i])?this[i](t[e]):this._setAttr(e,t[e]))}),this}isListening(){return this._getCache("listening",this._isListening)}_isListening(t){if(!this.listening())return!1;const e=this.getParent();return!e||e===t||this===t||e._isListening(t)}isVisible(){return this._getCache("visible",this._isVisible)}_isVisible(t){if(!this.visible())return!1;const e=this.getParent();return!e||e===t||this===t||e._isVisible(t)}shouldDrawHit(t,e=!1){if(t)return this._isVisible(t)&&this._isListening(t);var i=this.getLayer(),r=!1;G._dragElements.forEach(t=>{"dragging"===t.dragStatus&&("Stage"===t.node.nodeType||t.node.getLayer()===i)&&(r=!0)});var n=!e&&!a.hitOnDragEnabled&&r;return this.isListening()&&this.isVisible()&&!n}show(){return this.visible(!0),this}hide(){return this.visible(!1),this}getZIndex(){return this.index||0}getAbsoluteZIndex(){var t,e,i,r,a=this.getDepth(),n=this,s=0;return"Stage"!==n.nodeType&&function o(h){for(t=[],e=h.length,i=0;i0&&t[0].getDepth()<=a&&o(t)}(n.getStage().getChildren()),s}getDepth(){for(var t=0,e=this.parent;e;)t++,e=e.parent;return t}_batchTransformChanges(t){this._batchingTransformChange=!0,t(),this._batchingTransformChange=!1,this._needClearTransformCache&&(this._clearCache("transform"),this._clearSelfAndDescendantCache("absoluteTransform",!0)),this._needClearTransformCache=!1}setPosition(t){return this._batchTransformChanges(()=>{this.x(t.x),this.y(t.y)}),this}getPosition(){return{x:this.x(),y:this.y()}}getAbsolutePosition(t){let e=!1,i=this.parent;for(;i;){if(i.isCached()){e=!0;break}i=i.parent}e&&!t&&(t=!0);var r=this.getAbsoluteTransform(t).getMatrix(),a=new s,n=this.offset();return a.m=r.slice(),a.translate(n.x,n.y),a.getTranslation()}setAbsolutePosition(t){var e=this._clearTransform();this.attrs.x=e.x,this.attrs.y=e.y,delete e.x,delete e.y,this._clearCache("transform");var i=this._getAbsoluteTransform().copy();return i.invert(),i.translate(t.x,t.y),t={x:this.attrs.x+i.getTranslation().x,y:this.attrs.y+i.getTranslation().y},this._setTransform(e),this.setPosition({x:t.x,y:t.y}),this._clearCache("transform"),this._clearSelfAndDescendantCache("absoluteTransform"),this}_setTransform(t){var e;for(e in t)this.attrs[e]=t[e]}_clearTransform(){var t={x:this.x(),y:this.y(),rotation:this.rotation(),scaleX:this.scaleX(),scaleY:this.scaleY(),offsetX:this.offsetX(),offsetY:this.offsetY(),skewX:this.skewX(),skewY:this.skewY()};return this.attrs.x=0,this.attrs.y=0,this.attrs.rotation=0,this.attrs.scaleX=1,this.attrs.scaleY=1,this.attrs.offsetX=0,this.attrs.offsetY=0,this.attrs.skewX=0,this.attrs.skewY=0,t}move(t){var e=t.x,i=t.y,r=this.x(),a=this.y();return void 0!==e&&(r+=e),void 0!==i&&(a+=i),this.setPosition({x:r,y:a}),this}_eachAncestorReverse(t,e){var i,r,a=[],n=this.getParent();if(!e||e._id!==this._id){for(a.unshift(this);n&&(!e||n._id!==e._id);)a.unshift(n),n=n.parent;for(i=a.length,r=0;r0&&(this.parent.children.splice(t,1),this.parent.children.splice(t-1,0,this),this.parent._setChildrenIndices(),!0)}moveToBottom(){if(!this.parent)return g.warn("Node has no parent. moveToBottom function is ignored."),!1;var t=this.index;return t>0&&(this.parent.children.splice(t,1),this.parent.children.unshift(this),this.parent._setChildrenIndices(),!0)}setZIndex(t){if(!this.parent)return g.warn("Node has no parent. zIndex parameter is ignored."),this;(t<0||t>=this.parent.children.length)&&g.warn("Unexpected value "+t+" for zIndex property. zIndex is just index of a node in children of its parent. Expected value is from 0 to "+(this.parent.children.length-1)+".");var e=this.index;return this.parent.children.splice(e,1),this.parent.children.splice(t,0,this),this.parent._setChildrenIndices(),this}getAbsoluteOpacity(){return this._getCache("absoluteOpacity",this._getAbsoluteOpacity)}_getAbsoluteOpacity(){var t=this.opacity(),e=this.getParent();return e&&!e._isUnderCache&&(t*=e.getAbsoluteOpacity()),t}moveTo(t){return this.getParent()!==t&&(this._remove(),t.add(this)),this}toObject(){var t,e,i,r,a={},n=this.getAttrs();for(t in a.attrs={},n)e=n[t],g.isObject(e)&&!g._isPlainObject(e)&&!g._isArray(e)||(i="function"==typeof this[t]&&this[t],delete n[t],r=i?i.call(this):null,n[t]=e,r!==e&&(a.attrs[t]=e));return a.className=this.getClassName(),g._prepareToStringify(a)}toJSON(){return JSON.stringify(this.toObject())}getParent(){return this.parent}findAncestors(t,e,i){var r=[];e&&this._isMatch(t)&&r.push(this);for(var a=this.parent;a;){if(a===i)return r;a._isMatch(t)&&r.push(a),a=a.parent}return r}isAncestorOf(t){return!1}findAncestor(t,e,i){return this.findAncestors(t,e,i)[0]}_isMatch(t){if(!t)return!1;if("function"==typeof t)return t(this);var e,i,r=t.replace(/ /g,"").split(","),a=r.length;for(e=0;e=0)&&!this.isDragging()){var e=!1;G._dragElements.forEach(t=>{this.isAncestorOf(t.node)&&(e=!0)}),e||this._createDragElement(t)}}))}_dragChange(){if(this.attrs.draggable)this._listenDrag();else{if(this._dragCleanup(),!this.getStage())return;const t=G._dragElements.get(this._id),e=t&&"dragging"===t.dragStatus,i=t&&"ready"===t.dragStatus;e?this.stopDrag():i&&G._dragElements.delete(this._id)}}_dragCleanup(){this.off("mousedown.konva"),this.off("touchstart.konva")}static create(t,e){return g._isString(t)&&(t=JSON.parse(t)),this._createNode(t,e)}static _createNode(t,e){var i,r,n,s=N.prototype.getClassName.call(t),o=t.children;e&&(t.attrs.container=e),a[s]||(g.warn('Can not find a node with class name "'+s+'". Fallback to "Shape".'),s="Shape");if(i=new(0,a[s])(t.attrs),o)for(r=o.length,n=0;n0}removeChildren(){return this.getChildren().forEach(t=>{t.parent=null,t.index=0,t.remove()}),this.children=[],this}destroyChildren(){return this.getChildren().forEach(t=>{t.parent=null,t.index=0,t.destroy()}),this.children=[],this}add(...t){if(arguments.length>1){for(var e=0;e0?e[0]:void 0}_generalFind(t,e){var i=[];return this._descendants(r=>{const a=r._isMatch(t);return a&&i.push(r),!(!a||!e)}),i}_descendants(t){let e=!1;const i=this.getChildren();for(const r of i){if(e=t(r),e)return!0;if(r.hasChildren()&&(e=r._descendants(t),e))return!0}return!1}toObject(){var t=N.prototype.toObject.call(this);return t.children=[],this.getChildren().forEach(e=>{t.children.push(e.toObject())}),t}isAncestorOf(t){for(var e=t.getParent();e;){if(e._id===this._id)return!0;e=e.getParent()}return!1}clone(t){var e=N.prototype.clone.call(this,t);return this.getChildren().forEach((function(t){e.add(t.clone())})),e}getAllIntersections(t){var e=[];return this.find("Shape").forEach((function(i){i.isVisible()&&i.intersects(t)&&e.push(i)})),e}_clearSelfAndDescendantCache(t,e){var i;super._clearSelfAndDescendantCache(t,e),this.isCached()||null===(i=this.children)||void 0===i||i.forEach((function(i){i._clearSelfAndDescendantCache(t,e)}))}_setChildrenIndices(){var t;null===(t=this.children)||void 0===t||t.forEach((function(t,e){t.index=e})),this._requestDraw()}drawScene(t,e){var i=this.getLayer(),r=t||i&&i.getCanvas(),a=r&&r.getContext(),n=this._getCanvasCache(),s=n&&n.scene,o=r&&r.isCache;if(!this.isVisible()&&!o)return this;if(s){a.save();var h=this.getAbsoluteTransform(e).getMatrix();a.transform(h[0],h[1],h[2],h[3],h[4],h[5]),this._drawCachedSceneCanvas(a),a.restore()}else this._drawChildren("drawScene",r,e);return this}drawHit(t,e){if(!this.shouldDrawHit(e))return this;var i=this.getLayer(),r=t||i&&i.hitCanvas,a=r&&r.getContext(),n=this._getCanvasCache();if(n&&n.hit){a.save();var s=this.getAbsoluteTransform(e).getMatrix();a.transform(s[0],s[1],s[2],s[3],s[4],s[5]),this._drawCachedHitCanvas(a),a.restore()}else this._drawChildren("drawHit",r,e);return this}_drawChildren(t,e,i){var r,a=e&&e.getContext(),n=this.clipWidth(),s=this.clipHeight(),o=this.clipFunc(),h=n&&s||o;const l=i===this;if(h){a.save();var d=this.getAbsoluteTransform(i),c=d.getMatrix();if(a.transform(c[0],c[1],c[2],c[3],c[4],c[5]),a.beginPath(),o)o.call(this,a,this);else{var g=this.clipX(),u=this.clipY();a.rect(g,u,n,s)}a.clip(),c=d.copy().invert().getMatrix(),a.transform(c[0],c[1],c[2],c[3],c[4],c[5])}var f=!l&&"source-over"!==this.globalCompositeOperation()&&"drawScene"===t;f&&(a.save(),a._applyGlobalCompositeOperation(this)),null===(r=this.children)||void 0===r||r.forEach((function(r){r[t](e,i)})),f&&a.restore(),h&&a.restore()}getClientRect(t){var e,i,r,a,n,s=(t=t||{}).skipTransform,o=t.relativeTo,h={x:1/0,y:1/0,width:0,height:0},l=this;null===(e=this.children)||void 0===e||e.forEach((function(e){if(e.visible()){var s=e.getClientRect({relativeTo:l,skipShadow:t.skipShadow,skipStroke:t.skipStroke});0===s.width&&0===s.height||(void 0===i?(i=s.x,r=s.y,a=s.x+s.width,n=s.y+s.height):(i=Math.min(i,s.x),r=Math.min(r,s.y),a=Math.max(a,s.x+s.width),n=Math.max(n,s.y+s.height)))}}));for(var d=this.find("Shape"),c=!1,g=0;g{$(this.attrs)}),this._checkVisibility()}_validateAdd(t){const e="Layer"===t.getType(),i="FastLayer"===t.getType();e||i||g.throw("You may only add layers to the stage.")}_checkVisibility(){if(!this.content)return;const t=this.visible()?"":"none";this.content.style.display=t}setContainer(t){if("string"==typeof t){if("."===t.charAt(0)){var e=t.slice(1);t=document.getElementsByClassName(e)[0]}else{var i;i="#"!==t.charAt(0)?t:t.slice(1),t=document.getElementById(i)}if(!t)throw"Can not find container in document with id "+i}return this._setAttr("container",t),this.content&&(this.content.parentElement&&this.content.parentElement.removeChild(this.content),t.appendChild(this.content)),this}shouldDrawHit(){return!0}clear(){var t,e=this.children,i=e.length;for(t=0;t-1&&Z.splice(e,1),this}getPointerPosition(){const t=this._pointerPositions[0]||this._changedPointerPositions[0];return t?{x:t.x,y:t.y}:(g.warn("Pointer position is missing and not registered by the stage. Looks like it is outside of the stage container. You can set it manually from event: stage.setPointersPositions(event);"),null)}_getPointerById(t){return this._pointerPositions.find(e=>e.id===t)}getPointersPositions(){return this._pointerPositions}getStage(){return this}getContent(){return this.content}_toKonvaCanvas(t){(t=t||{}).x=t.x||0,t.y=t.y||0,t.width=t.width||this.width(),t.height=t.height||this.height();var e=new A({width:t.width,height:t.height,pixelRatio:t.pixelRatio||1}),i=e.getContext()._context,r=this.children;return(t.x||t.y)&&i.translate(-1*t.x,-1*t.y),r.forEach((function(e){if(e.isVisible()){var r=e._toKonvaCanvas(t);i.drawImage(r._canvas,t.x,t.y,r.getWidth()/r.getPixelRatio(),r.getHeight()/r.getPixelRatio())}})),e}getIntersection(t,e){if(!t)return null;var i,r=this.children;for(i=r.length-1;i>=0;i--){const a=r[i].getIntersection(t,e);if(a)return a}return null}_resizeDOM(){var t=this.width(),e=this.height();this.content&&(this.content.style.width=t+"px",this.content.style.height=e+"px"),this.bufferCanvas.setSize(t,e),this.bufferHitCanvas.setSize(t,e),this.children.forEach(i=>{i.setSize({width:t,height:e}),i.draw()})}add(t,...e){if(arguments.length>1){for(var i=0;i5&&g.warn("The stage has "+r+" layers. Recommended maximum number of layers is 3-5. Adding more layers into the stage may drop the performance. Rethink your tree structure, you can use Konva.Group."),t.setSize({width:this.width(),height:this.height()}),t.draw(),a.isBrowser&&this.content.appendChild(t.canvas._canvas),this}getParent(){return null}getLayer(){return null}hasPointerCapture(t){return U(t,this)}setPointerCapture(t){q(t,this)}releaseCapture(t){K(t)}getLayers(){return this.children}_bindContentEvents(){if(a.isBrowser)for(var t=0;t{var r=this.getIntersection(i);a.listenClickTap=!0,G.justDragged=!1;r&&r.isListening()&&(a.captureTouchEventsEnabled&&r.setPointerCapture(i.id),this.tapStartShape=r,r._fireAndBubble("touchstart",{evt:t,pointerId:i.id},this),e=!0,r.isListening()&&r.preventDefault()&&t.cancelable&&t.preventDefault())}),e||this._fire("touchstart",{evt:t,target:this,currentTarget:this,pointerId:this._changedPointerPositions[0].id}),this._fire("contentTouchstart",{evt:t})}_touchmove(t){if(this.setPointersPositions(t),!G.isDragging||a.hitOnDragEnabled){var e=!1,i={};this._changedPointerPositions.forEach(r=>{const a=X(r.id)||this.getIntersection(r);a&&a.isListening()&&(i[a._id]||(i[a._id]=!0,a._fireAndBubble("touchmove",{evt:t,pointerId:r.id}),e=!0,a.isListening()&&a.preventDefault()&&t.cancelable&&t.preventDefault()))}),e||this._fire("touchmove",{evt:t,target:this,currentTarget:this,pointerId:this._changedPointerPositions[0].id}),this._fire("contentTouchmove",{evt:t})}G.isDragging&&G.node.preventDefault()&&t.cancelable&&t.preventDefault()}_touchend(t){this.setPointersPositions(t);var e=this.tapEndShape,i=!1;a.inDblClickWindow?(i=!0,clearTimeout(this.dblTimeout)):G.justDragged||(a.inDblClickWindow=!0,clearTimeout(this.dblTimeout)),this.dblTimeout=setTimeout((function(){a.inDblClickWindow=!1}),a.dblClickWindow);var r=!1,n={},s=!1,o=!1;this._changedPointerPositions.forEach(h=>{var l=X(h.id)||this.getIntersection(h);l&&l.releaseCapture(h.id);l&&l.isListening()&&(n[l._id]||(n[l._id]=!0,this.tapEndShape=l,l._fireAndBubble("touchend",{evt:t,pointerId:h.id}),r=!0,a.listenClickTap&&l===this.tapStartShape&&(s=!0,l._fireAndBubble("tap",{evt:t,pointerId:h.id}),i&&e&&e===l&&(o=!0,l._fireAndBubble("dbltap",{evt:t,pointerId:h.id}))),l.isListening()&&l.preventDefault()&&t.cancelable&&t.preventDefault()))}),r||this._fire("touchend",{evt:t,target:this,currentTarget:this,pointerId:this._changedPointerPositions[0].id}),a.listenClickTap&&!s&&(this.tapEndShape=null,this._fire("tap",{evt:t,target:this,currentTarget:this,pointerId:this._changedPointerPositions[0].id})),i&&!o&&this._fire("dbltap",{evt:t,target:this,currentTarget:this,pointerId:this._changedPointerPositions[0].id}),this._fire("contentTouchend",{evt:t}),a.listenClickTap&&(this._fire("contentTap",{evt:t}),i&&this._fire("contentDbltap",{evt:t})),this.preventDefault()&&t.cancelable&&t.preventDefault(),a.listenClickTap=!1}_wheel(t){this.setPointersPositions(t);var e=this.getIntersection(this.getPointerPosition());e&&e.isListening()?e._fireAndBubble("wheel",{evt:t}):this._fire("wheel",{evt:t,target:this,currentTarget:this}),this._fire("contentWheel",{evt:t})}_pointerdown(t){if(!a._pointerEventsEnabled)return;this.setPointersPositions(t);const e=X(t.pointerId)||this.getIntersection(this.getPointerPosition());e&&e._fireAndBubble("pointerdown",j(t))}_pointermove(t){if(!a._pointerEventsEnabled)return;this.setPointersPositions(t);const e=X(t.pointerId)||this.getIntersection(this.getPointerPosition());e&&e._fireAndBubble("pointermove",j(t))}_pointerup(t){if(!a._pointerEventsEnabled)return;this.setPointersPositions(t);const e=X(t.pointerId)||this.getIntersection(this.getPointerPosition());e&&e._fireAndBubble("pointerup",j(t)),K(t.pointerId)}_pointercancel(t){if(!a._pointerEventsEnabled)return;this.setPointersPositions(t);const e=X(t.pointerId)||this.getIntersection(this.getPointerPosition());e&&e._fireAndBubble("pointerup",j(t)),K(t.pointerId)}_lostpointercapture(t){K(t.pointerId)}setPointersPositions(t){var e=this._getContentPosition(),i=null,r=null;void 0!==(t=t||window.event).touches?(this._pointerPositions=[],this._changedPointerPositions=[],Array.prototype.forEach.call(t.touches,t=>{this._pointerPositions.push({id:t.identifier,x:(t.clientX-e.left)/e.scaleX,y:(t.clientY-e.top)/e.scaleY})}),Array.prototype.forEach.call(t.changedTouches||t.touches,t=>{this._changedPointerPositions.push({id:t.identifier,x:(t.clientX-e.left)/e.scaleX,y:(t.clientY-e.top)/e.scaleY})})):(i=(t.clientX-e.left)/e.scaleX,r=(t.clientY-e.top)/e.scaleY,this.pointerPos={x:i,y:r},this._pointerPositions=[{x:i,y:r,id:g._getFirstPointerId(t)}],this._changedPointerPositions=[{x:i,y:r,id:g._getFirstPointerId(t)}])}_setPointerPosition(t){g.warn('Method _setPointerPosition is deprecated. Use "stage.setPointersPositions(event)" instead.'),this.setPointersPositions(t)}_getContentPosition(){if(!this.content||!this.content.getBoundingClientRect)return{top:0,left:0,scaleX:1,scaleY:1};var t=this.content.getBoundingClientRect();return{top:t.top,left:t.left,scaleX:t.width/this.content.clientWidth||1,scaleY:t.height/this.content.clientHeight||1}}_buildDOM(){if(this.bufferCanvas=new A({width:this.width(),height:this.height()}),this.bufferHitCanvas=new M({pixelRatio:1,width:this.width(),height:this.height()}),a.isBrowser){var t=this.container();if(!t)throw"Stage has no container. A container is required.";t.innerHTML="",this.content=document.createElement("div"),this.content.style.position="relative",this.content.style.userSelect="none",this.content.className="konvajs-content",this.content.setAttribute("role","presentation"),t.appendChild(this.content),this._resizeDOM()}}cache(){return g.warn("Cache function is not allowed for stage. You may use cache only for layers, groups and shapes."),this}clearCache(){return this}batchDraw(){return this.getChildren().forEach((function(t){t.batchDraw()})),this}}tt.prototype.nodeType="Stage",n(tt),b.addGetterSetter(tt,"container");let et;function it(){return et||(et=g.createCanvasElement().getContext("2d"),et)}const rt={};class at extends N{constructor(t){let e;for(super(t);e=g.getRandomColor(),!e||e in rt;);this.colorKey=e,rt[e]=this}getContext(){return this.getLayer().getContext()}getCanvas(){return this.getLayer().getCanvas()}getSceneFunc(){return this.attrs.sceneFunc||this._sceneFunc}getHitFunc(){return this.attrs.hitFunc||this._hitFunc}hasShadow(){return this._getCache("hasShadow",this._hasShadow)}_hasShadow(){return this.shadowEnabled()&&0!==this.shadowOpacity()&&!!(this.shadowColor()||this.shadowBlur()||this.shadowOffsetX()||this.shadowOffsetY())}_getFillPattern(){return this._getCache("patternImage",this.__getFillPattern)}__getFillPattern(){if(this.fillPatternImage()){const t=it().createPattern(this.fillPatternImage(),this.fillPatternRepeat()||"repeat");return t&&t.setTransform&&t.setTransform({a:this.fillPatternScaleX(),b:0,c:0,d:this.fillPatternScaleY(),e:0,f:0}),t}}_getLinearGradient(){return this._getCache("linearGradient",this.__getLinearGradient)}__getLinearGradient(){var t=this.fillLinearGradientColorStops();if(t){for(var e=it(),i=this.fillLinearGradientStartPoint(),r=this.fillLinearGradientEndPoint(),a=e.createLinearGradient(i.x,i.y,r.x,r.y),n=0;nthis.fillEnabled()&&!!(this.fill()||this.fillPatternImage()||this.fillLinearGradientColorStops()||this.fillRadialGradientColorStops()))}hasStroke(){return this._calculate("hasStroke",["strokeEnabled","strokeWidth","stroke","strokeLinearGradientColorStops"],()=>this.strokeEnabled()&&this.strokeWidth()&&!(!this.stroke()&&!this.strokeLinearGradientColorStops()))}hasHitStroke(){const t=this.hitStrokeWidth();return"auto"===t?this.hasStroke():this.strokeEnabled()&&!!t}intersects(t){var e=this.getStage().bufferHitCanvas;return e.getContext().clear(),this.drawHit(e,null,!0),e.context.getImageData(Math.round(t.x),Math.round(t.y),1,1).data[3]>0}destroy(){return N.prototype.destroy.call(this),delete rt[this.colorKey],delete this.colorKey,this}_useBufferCanvas(t){var e;if(!this.getStage())return!1;if(!(null===(e=this.attrs.perfectDrawEnabled)||void 0===e||e))return!1;const i=t||this.hasFill(),r=this.hasStroke(),a=1!==this.getAbsoluteOpacity();if(i&&r&&a)return!0;const n=this.hasShadow(),s=this.shadowForStrokeEnabled();return!!(i&&r&&n&&s)}setStrokeHitEnabled(t){g.warn("strokeHitEnabled property is deprecated. Please use hitStrokeWidth instead."),t?this.hitStrokeWidth("auto"):this.hitStrokeWidth(0)}getStrokeHitEnabled(){return 0!==this.hitStrokeWidth()}getSelfRect(){var t=this.size();return{x:this._centroid?-t.width/2:0,y:this._centroid?-t.height/2:0,width:t.width,height:t.height}}getClientRect(t={}){const e=t.skipTransform,i=t.relativeTo,r=this.getSelfRect(),a=!t.skipStroke&&this.hasStroke()&&this.strokeWidth()||0,n=r.width+a,s=r.height+a,o=!t.skipShadow&&this.hasShadow(),h=o?this.shadowOffsetX():0,l=o?this.shadowOffsetY():0,d=n+Math.abs(h),c=s+Math.abs(l),g=o&&this.shadowBlur()||0,u=d+2*g,f=c+2*g;let p=0;Math.round(a/2)!==a/2&&(p=1);const v={width:u+p,height:f+p,x:-Math.round(a/2+g)+Math.min(h,0)+r.x,y:-Math.round(a/2+g)+Math.min(l,0)+r.y};return e?v:this._transformedRect(v,i)}drawScene(t,e){var i,r,a=this.getLayer(),n=t||a.getCanvas(),s=n.getContext(),o=this._getCanvasCache(),h=this.getSceneFunc(),l=this.hasShadow(),d=n.isCache,c=n.isCache,g=e===this;if(!this.isVisible()&&!d)return this;if(o){s.save();var u=this.getAbsoluteTransform(e).getMatrix();return s.transform(u[0],u[1],u[2],u[3],u[4],u[5]),this._drawCachedSceneCanvas(s),s.restore(),this}if(!h)return this;if(s.save(),this._useBufferCanvas()&&!c){(r=(i=this.getStage().bufferCanvas).getContext()).clear(),r.save(),r._applyLineJoin(this);var f=this.getAbsoluteTransform(e).getMatrix();r.transform(f[0],f[1],f[2],f[3],f[4],f[5]),h.call(this,r,this),r.restore();var p=i.pixelRatio;l&&s._applyShadow(this),s._applyOpacity(this),s._applyGlobalCompositeOperation(this),s.drawImage(i._canvas,0,0,i.width/p,i.height/p)}else{if(s._applyLineJoin(this),!g){f=this.getAbsoluteTransform(e).getMatrix();s.transform(f[0],f[1],f[2],f[3],f[4],f[5]),s._applyOpacity(this),s._applyGlobalCompositeOperation(this)}l&&s._applyShadow(this),h.call(this,s,this)}return s.restore(),this}drawHit(t,e,i=!1){if(!this.shouldDrawHit(e,i))return this;var r=this.getLayer(),a=t||r.hitCanvas,n=a&&a.getContext(),s=this.hitFunc()||this.sceneFunc(),o=this._getCanvasCache(),h=o&&o.hit;if(this.colorKey||g.warn("Looks like your canvas has a destroyed shape in it. Do not reuse shape after you destroyed it. If you want to reuse shape you should call remove() instead of destroy()"),h){n.save();var l=this.getAbsoluteTransform(e).getMatrix();return n.transform(l[0],l[1],l[2],l[3],l[4],l[5]),this._drawCachedHitCanvas(n),n.restore(),this}if(!s)return this;n.save(),n._applyLineJoin(this);if(!(this===e)){var d=this.getAbsoluteTransform(e).getMatrix();n.transform(d[0],d[1],d[2],d[3],d[4],d[5])}return s.call(this,n,this),n.restore(),this}drawHitFromCache(t=0){var e,i,r,a,n,s=this._getCanvasCache(),o=this._getCachedSceneCanvas(),h=s.hit,l=h.getContext(),d=h.getWidth(),c=h.getHeight();l.clear(),l.drawImage(o._canvas,0,0,d,c);try{for(r=(i=(e=l.getImageData(0,0,d,c)).data).length,a=g._hexToRgb(this.colorKey),n=0;nt?(i[n]=a.r,i[n+1]=a.g,i[n+2]=a.b,i[n+3]=255):i[n+3]=0;l.putImageData(e,0,0)}catch(t){g.error("Unable to draw hit graph from cached scene canvas. "+t.message)}return this}hasPointerCapture(t){return U(t,this)}setPointerCapture(t){q(t,this)}releaseCapture(t){K(t)}}at.prototype._fillFunc=function(t){t.fill()},at.prototype._strokeFunc=function(t){t.stroke()},at.prototype._fillFuncHit=function(t){t.fill()},at.prototype._strokeFuncHit=function(t){t.stroke()},at.prototype._centroid=!1,at.prototype.nodeType="Shape",n(at),at.prototype.eventListeners={},at.prototype.on.call(at.prototype,"shadowColorChange.konva shadowBlurChange.konva shadowOffsetChange.konva shadowOpacityChange.konva shadowEnabledChange.konva",(function(){this._clearCache("hasShadow")})),at.prototype.on.call(at.prototype,"shadowColorChange.konva shadowOpacityChange.konva shadowEnabledChange.konva",(function(){this._clearCache("shadowRGBA")})),at.prototype.on.call(at.prototype,"fillPriorityChange.konva fillPatternImageChange.konva fillPatternRepeatChange.konva fillPatternScaleXChange.konva fillPatternScaleYChange.konva",(function(){this._clearCache("patternImage")})),at.prototype.on.call(at.prototype,"fillPriorityChange.konva fillLinearGradientColorStopsChange.konva fillLinearGradientStartPointXChange.konva fillLinearGradientStartPointYChange.konva fillLinearGradientEndPointXChange.konva fillLinearGradientEndPointYChange.konva",(function(){this._clearCache("linearGradient")})),at.prototype.on.call(at.prototype,"fillPriorityChange.konva fillRadialGradientColorStopsChange.konva fillRadialGradientStartPointXChange.konva fillRadialGradientStartPointYChange.konva fillRadialGradientEndPointXChange.konva fillRadialGradientEndPointYChange.konva fillRadialGradientStartRadiusChange.konva fillRadialGradientEndRadiusChange.konva",(function(){this._clearCache("radialGradient")})),b.addGetterSetter(at,"stroke",void 0,y()),b.addGetterSetter(at,"strokeWidth",2,p()),b.addGetterSetter(at,"fillAfterStrokeEnabled",!1),b.addGetterSetter(at,"hitStrokeWidth","auto",m()),b.addGetterSetter(at,"strokeHitEnabled",!0,x()),b.addGetterSetter(at,"perfectDrawEnabled",!0,x()),b.addGetterSetter(at,"shadowForStrokeEnabled",!0,x()),b.addGetterSetter(at,"lineJoin"),b.addGetterSetter(at,"lineCap"),b.addGetterSetter(at,"sceneFunc"),b.addGetterSetter(at,"hitFunc"),b.addGetterSetter(at,"dash"),b.addGetterSetter(at,"dashOffset",0,p()),b.addGetterSetter(at,"shadowColor",void 0,_()),b.addGetterSetter(at,"shadowBlur",0,p()),b.addGetterSetter(at,"shadowOpacity",1,p()),b.addComponentsGetterSetter(at,"shadowOffset",["x","y"]),b.addGetterSetter(at,"shadowOffsetX",0,p()),b.addGetterSetter(at,"shadowOffsetY",0,p()),b.addGetterSetter(at,"fillPatternImage"),b.addGetterSetter(at,"fill",void 0,y()),b.addGetterSetter(at,"fillPatternX",0,p()),b.addGetterSetter(at,"fillPatternY",0,p()),b.addGetterSetter(at,"fillLinearGradientColorStops"),b.addGetterSetter(at,"strokeLinearGradientColorStops"),b.addGetterSetter(at,"fillRadialGradientStartRadius",0),b.addGetterSetter(at,"fillRadialGradientEndRadius",0),b.addGetterSetter(at,"fillRadialGradientColorStops"),b.addGetterSetter(at,"fillPatternRepeat","repeat"),b.addGetterSetter(at,"fillEnabled",!0),b.addGetterSetter(at,"strokeEnabled",!0),b.addGetterSetter(at,"shadowEnabled",!0),b.addGetterSetter(at,"dashEnabled",!0),b.addGetterSetter(at,"strokeScaleEnabled",!0),b.addGetterSetter(at,"fillPriority","color"),b.addComponentsGetterSetter(at,"fillPatternOffset",["x","y"]),b.addGetterSetter(at,"fillPatternOffsetX",0,p()),b.addGetterSetter(at,"fillPatternOffsetY",0,p()),b.addComponentsGetterSetter(at,"fillPatternScale",["x","y"]),b.addGetterSetter(at,"fillPatternScaleX",1,p()),b.addGetterSetter(at,"fillPatternScaleY",1,p()),b.addComponentsGetterSetter(at,"fillLinearGradientStartPoint",["x","y"]),b.addComponentsGetterSetter(at,"strokeLinearGradientStartPoint",["x","y"]),b.addGetterSetter(at,"fillLinearGradientStartPointX",0),b.addGetterSetter(at,"strokeLinearGradientStartPointX",0),b.addGetterSetter(at,"fillLinearGradientStartPointY",0),b.addGetterSetter(at,"strokeLinearGradientStartPointY",0),b.addComponentsGetterSetter(at,"fillLinearGradientEndPoint",["x","y"]),b.addComponentsGetterSetter(at,"strokeLinearGradientEndPoint",["x","y"]),b.addGetterSetter(at,"fillLinearGradientEndPointX",0),b.addGetterSetter(at,"strokeLinearGradientEndPointX",0),b.addGetterSetter(at,"fillLinearGradientEndPointY",0),b.addGetterSetter(at,"strokeLinearGradientEndPointY",0),b.addComponentsGetterSetter(at,"fillRadialGradientStartPoint",["x","y"]),b.addGetterSetter(at,"fillRadialGradientStartPointX",0),b.addGetterSetter(at,"fillRadialGradientStartPointY",0),b.addComponentsGetterSetter(at,"fillRadialGradientEndPoint",["x","y"]),b.addGetterSetter(at,"fillRadialGradientEndPointX",0),b.addGetterSetter(at,"fillRadialGradientEndPointY",0),b.addGetterSetter(at,"fillPatternRotation",0),b.backCompat(at,{dashArray:"dash",getDashArray:"getDash",setDashArray:"getDash",drawFunc:"sceneFunc",getDrawFunc:"getSceneFunc",setDrawFunc:"setSceneFunc",drawHitFunc:"hitFunc",getDrawHitFunc:"getHitFunc",setDrawHitFunc:"setHitFunc"});var nt=[{x:0,y:0},{x:-1,y:-1},{x:1,y:-1},{x:1,y:1},{x:-1,y:1}],st=nt.length;class ot extends W{constructor(t){super(t),this.canvas=new A,this.hitCanvas=new M({pixelRatio:1}),this._waitingForDraw=!1,this.on("visibleChange.konva",this._checkVisibility),this._checkVisibility(),this.on("imageSmoothingEnabledChange.konva",this._setSmoothEnabled),this._setSmoothEnabled()}createPNGStream(){return this.canvas._canvas.createPNGStream()}getCanvas(){return this.canvas}getNativeCanvasElement(){return this.canvas._canvas}getHitCanvas(){return this.hitCanvas}getContext(){return this.getCanvas().getContext()}clear(t){return this.getContext().clear(t),this.getHitCanvas().getContext().clear(t),this}setZIndex(t){super.setZIndex(t);var e=this.getStage();return e&&e.content&&(e.content.removeChild(this.getNativeCanvasElement()),t{this.draw(),this._waitingForDraw=!1})),this}getIntersection(t,e){if(!this.isListening()||!this.isVisible())return null;for(var i=1,r=!1;;){for(let a=0;a0?{antialiased:!0}:{}}drawScene(t,e){var i=this.getLayer(),r=t||i&&i.getCanvas();return this._fire("beforeDraw",{node:this}),this.clearBeforeDraw()&&r.getContext().clear(),W.prototype.drawScene.call(this,r,e),this._fire("draw",{node:this}),this}drawHit(t,e){var i=this.getLayer(),r=t||i&&i.hitCanvas;return i&&i.clearBeforeDraw()&&i.getHitCanvas().getContext().clear(),W.prototype.drawHit.call(this,r,e),this}enableHitGraph(){return this.hitGraphEnabled(!0),this}disableHitGraph(){return this.hitGraphEnabled(!1),this}setHitGraphEnabled(t){g.warn("hitGraphEnabled method is deprecated. Please use layer.listening() instead."),this.listening(t)}getHitGraphEnabled(t){return g.warn("hitGraphEnabled method is deprecated. Please use layer.listening() instead."),this.listening()}toggleHitCanvas(){if(this.parent&&this.parent.content){var t=this.parent;!!this.hitCanvas._canvas.parentNode?t.content.removeChild(this.hitCanvas._canvas):t.content.appendChild(this.hitCanvas._canvas)}}}ot.prototype.nodeType="Layer",n(ot),b.addGetterSetter(ot,"imageSmoothingEnabled",!0),b.addGetterSetter(ot,"clearBeforeDraw",!0),b.addGetterSetter(ot,"hitGraphEnabled",!0,x());class ht extends ot{constructor(t){super(t),this.listening(!1),g.warn('Konva.Fast layer is deprecated. Please use "new Konva.Layer({ listening: false })" instead.')}}ht.prototype.nodeType="FastLayer",n(ht);class lt extends W{_validateAdd(t){var e=t.getType();"Group"!==e&&"Shape"!==e&&g.throw("You may only add groups and shapes to groups.")}}lt.prototype.nodeType="Group",n(lt);var dt=r.performance&&r.performance.now?function(){return r.performance.now()}:function(){return(new Date).getTime()};class ct{constructor(t,e){this.id=ct.animIdCounter++,this.frame={time:0,timeDiff:0,lastTime:dt(),frameRate:0},this.func=t,this.setLayers(e)}setLayers(t){var e=[];return e=t?t.length>0?t:[t]:[],this.layers=e,this}getLayers(){return this.layers}addLayer(t){var e,i=this.layers,r=i.length;for(e=0;ethis.duration?this.yoyo?(this._time=this.duration,this.reverse()):this.finish():t<0?this.yoyo?(this._time=0,this.play()):this.reset():(this._time=t,this.update())}getTime(){return this._time}setPosition(t){this.prevPos=this._pos,this.propFunc(t),this._pos=t}getPosition(t){return void 0===t&&(t=this._time),this.func(t,this.begin,this._change,this.duration)}play(){this.state=2,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onPlay")}reverse(){this.state=3,this._time=this.duration-this._time,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onReverse")}seek(t){this.pause(),this._time=t,this.update(),this.fire("onSeek")}reset(){this.pause(),this._time=0,this.update(),this.fire("onReset")}finish(){this.pause(),this._time=this.duration,this.update(),this.fire("onFinish")}update(){this.setPosition(this.getPosition(this._time)),this.fire("onUpdate")}onEnterFrame(){var t=this.getTimer()-this._startTime;2===this.state?this.setTime(t):3===this.state&&this.setTime(this.duration-t)}pause(){this.state=1,this.fire("onPause")}getTimer(){return(new Date).getTime()}}class vt{constructor(t){var e,i,r=this,n=t.node,s=n._id,o=t.easing||mt.Linear,h=!!t.yoyo;e=void 0===t.duration?.3:0===t.duration?.001:t.duration,this.node=n,this._id=ut++;var l=n.getLayer()||(n instanceof a.Stage?n.getLayers():null);for(i in l||g.error("Tween constructor have `node` that is not in a layer. Please add node into layer first."),this.anim=new ct((function(){r.tween.onEnterFrame()}),l),this.tween=new pt(i,(function(t){r._tweenFunc(t)}),o,0,1,1e3*e,h),this._addListeners(),vt.attrs[s]||(vt.attrs[s]={}),vt.attrs[s][this._id]||(vt.attrs[s][this._id]={}),vt.tweens[s]||(vt.tweens[s]={}),t)void 0===gt[i]&&this._addAttr(i,t[i]);this.reset(),this.onFinish=t.onFinish,this.onReset=t.onReset,this.onUpdate=t.onUpdate}_addAttr(t,e){var i,r,a,n,s,o,h,l,d=this.node,c=d._id;if((a=vt.tweens[c][t])&&delete vt.attrs[c][a][t],i=d.getAttr(t),g._isArray(e))if(r=[],s=Math.max(e.length,i.length),"points"===t&&e.length!==i.length&&(e.length>i.length?(h=i,i=g._prepareArrayForTween(i,e,d.closed())):(o=e,e=g._prepareArrayForTween(e,i,d.closed()))),0===t.indexOf("fill"))for(n=0;n{this.anim.start()},this.tween.onReverse=()=>{this.anim.start()},this.tween.onPause=()=>{this.anim.stop()},this.tween.onFinish=()=>{var t=this.node,e=vt.attrs[t._id][this._id];e.points&&e.points.trueEnd&&t.setAttr("points",e.points.trueEnd),this.onFinish&&this.onFinish.call(this)},this.tween.onReset=()=>{var t=this.node,e=vt.attrs[t._id][this._id];e.points&&e.points.trueStart&&t.points(e.points.trueStart),this.onReset&&this.onReset()},this.tween.onUpdate=()=>{this.onUpdate&&this.onUpdate.call(this)}}play(){return this.tween.play(),this}reverse(){return this.tween.reverse(),this}reset(){return this.tween.reset(),this}seek(t){return this.tween.seek(1e3*t),this}pause(){return this.tween.pause(),this}finish(){return this.tween.finish(),this}destroy(){var t,e=this.node._id,i=this._id,r=vt.tweens[e];for(t in this.pause(),r)delete vt.tweens[e][t];delete vt.attrs[e][i]}}vt.attrs={},vt.tweens={},N.prototype.to=function(t){var e=t.onFinish;t.node=this,t.onFinish=function(){this.destroy(),e&&e()},new vt(t).play()};const mt={BackEaseIn(t,e,i,r){var a=1.70158;return i*(t/=r)*t*((a+1)*t-a)+e},BackEaseOut(t,e,i,r){var a=1.70158;return i*((t=t/r-1)*t*((a+1)*t+a)+1)+e},BackEaseInOut(t,e,i,r){var a=1.70158;return(t/=r/2)<1?i/2*(t*t*((1+(a*=1.525))*t-a))+e:i/2*((t-=2)*t*((1+(a*=1.525))*t+a)+2)+e},ElasticEaseIn(t,e,i,r,a,n){var s=0;return 0===t?e:1==(t/=r)?e+i:(n||(n=.3*r),!a||a(t/=r)<1/2.75?i*(7.5625*t*t)+e:t<2/2.75?i*(7.5625*(t-=1.5/2.75)*t+.75)+e:t<2.5/2.75?i*(7.5625*(t-=2.25/2.75)*t+.9375)+e:i*(7.5625*(t-=2.625/2.75)*t+.984375)+e,BounceEaseIn:(t,e,i,r)=>i-mt.BounceEaseOut(r-t,0,i,r)+e,BounceEaseInOut:(t,e,i,r)=>ti*(t/=r)*t+e,EaseOut:(t,e,i,r)=>-i*(t/=r)*(t-2)+e,EaseInOut:(t,e,i,r)=>(t/=r/2)<1?i/2*t*t+e:-i/2*(--t*(t-2)-1)+e,StrongEaseIn:(t,e,i,r)=>i*(t/=r)*t*t*t*t+e,StrongEaseOut:(t,e,i,r)=>i*((t=t/r-1)*t*t*t*t+1)+e,StrongEaseInOut:(t,e,i,r)=>(t/=r/2)<1?i/2*t*t*t*t*t+e:i/2*((t-=2)*t*t*t*t+2)+e,Linear:(t,e,i,r)=>i*t/r+e},_t=g._assign(a,{Util:g,Transform:s,Node:N,ids:E,names:R,Container:W,Stage:tt,stages:Z,Layer:ot,FastLayer:ht,Group:lt,DD:G,Shape:at,shapes:rt,Animation:ct,Tween:vt,Easings:mt,Context:w,Canvas:T});class yt extends at{_sceneFunc(t){var e=a.getAngle(this.angle()),i=this.clockwise();t.beginPath(),t.arc(0,0,this.outerRadius(),0,e,i),t.arc(0,0,this.innerRadius(),e,0,!i),t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.outerRadius()}getHeight(){return 2*this.outerRadius()}setWidth(t){this.outerRadius(t/2)}setHeight(t){this.outerRadius(t/2)}}yt.prototype._centroid=!0,yt.prototype.className="Arc",yt.prototype._attrsAffectingSize=["innerRadius","outerRadius"],n(yt),b.addGetterSetter(yt,"innerRadius",0,p()),b.addGetterSetter(yt,"outerRadius",0,p()),b.addGetterSetter(yt,"angle",0,p()),b.addGetterSetter(yt,"clockwise",!1,x());class xt extends at{constructor(t){super(t),this.on("pointsChange.konva tensionChange.konva closedChange.konva bezierChange.konva",(function(){this._clearCache("tensionPoints")}))}_sceneFunc(t){var e,i,r,a=this.points(),n=a.length,s=this.tension(),o=this.closed(),h=this.bezier();if(n){if(t.beginPath(),t.moveTo(a[0],a[1]),0!==s&&n>4){for(i=(e=this.getTensionPoints()).length,r=o?0:4,o||t.quadraticCurveTo(e[0],e[1],e[2],e[3]);r4;a&&(r=this.getTensionPoints());var n,s,o=i.length;a?(n=i[o-2]-(r[r.length-2]+r[r.length-4])/2,s=i[o-1]-(r[r.length-1]+r[r.length-3])/2):(n=i[o-2]-i[o-4],s=i[o-1]-i[o-3]);var h=(Math.atan2(s,n)+e)%e,l=this.pointerLength(),d=this.pointerWidth();this.pointerAtEnding()&&(t.save(),t.beginPath(),t.translate(i[o-2],i[o-1]),t.rotate(h),t.moveTo(0,0),t.lineTo(-l,d/2),t.lineTo(-l,-d/2),t.closePath(),t.restore()),this.pointerAtBeginning()&&(t.save(),t.translate(i[0],i[1]),a?(n=(r[0]+r[2])/2-i[0],s=(r[1]+r[3])/2-i[1]):(n=i[2]-i[0],s=i[3]-i[1]),t.rotate((Math.atan2(-s,-n)+e)%e),t.moveTo(0,0),t.lineTo(-l,d/2),t.lineTo(-l,-d/2),t.closePath(),t.restore());var c=this.dashEnabled();c&&(this.attrs.dashEnabled=!1,t.setLineDash([])),t.fillStrokeShape(this),c&&(this.attrs.dashEnabled=!0)}getSelfRect(){const t=super.getSelfRect(),e=this.pointerWidth()/2;return{x:t.x-e,y:t.y-e,width:t.width+2*e,height:t.height+2*e}}}bt.prototype.className="Arrow",n(bt),b.addGetterSetter(bt,"pointerLength",10,p()),b.addGetterSetter(bt,"pointerWidth",10,p()),b.addGetterSetter(bt,"pointerAtBeginning",!1),b.addGetterSetter(bt,"pointerAtEnding",!0);class St extends at{_sceneFunc(t){t.beginPath(),t.arc(0,0,this.attrs.radius||0,0,2*Math.PI,!1),t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.radius()}getHeight(){return 2*this.radius()}setWidth(t){this.radius()!==t/2&&this.radius(t/2)}setHeight(t){this.radius()!==t/2&&this.radius(t/2)}}St.prototype._centroid=!0,St.prototype.className="Circle",St.prototype._attrsAffectingSize=["radius"],n(St),b.addGetterSetter(St,"radius",0,p());class wt extends at{_sceneFunc(t){var e=this.radiusX(),i=this.radiusY();t.beginPath(),t.save(),e!==i&&t.scale(1,i/e),t.arc(0,0,e,0,2*Math.PI,!1),t.restore(),t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.radiusX()}getHeight(){return 2*this.radiusY()}setWidth(t){this.radiusX(t/2)}setHeight(t){this.radiusY(t/2)}}wt.prototype.className="Ellipse",wt.prototype._centroid=!0,wt.prototype._attrsAffectingSize=["radiusX","radiusY"],n(wt),b.addComponentsGetterSetter(wt,"radius",["x","y"]),b.addGetterSetter(wt,"radiusX",0,p()),b.addGetterSetter(wt,"radiusY",0,p());class Ct extends at{constructor(t){super(t),this.on("imageChange.konva",()=>{this._setImageLoad()}),this._setImageLoad()}_setImageLoad(){const t=this.image();t&&t.addEventListener&&t.addEventListener("load",()=>{this._requestDraw()})}_useBufferCanvas(){return super._useBufferCanvas(!0)}_sceneFunc(t){const e=this.getWidth(),i=this.getHeight(),r=this.attrs.image;let a;if(r){const t=this.attrs.cropWidth,n=this.attrs.cropHeight;a=t&&n?[r,this.cropX(),this.cropY(),t,n,0,0,e,i]:[r,0,0,e,i]}(this.hasFill()||this.hasStroke())&&(t.beginPath(),t.rect(0,0,e,i),t.closePath(),t.fillStrokeShape(this)),r&&t.drawImage.apply(t,a)}_hitFunc(t){var e=this.width(),i=this.height();t.beginPath(),t.rect(0,0,e,i),t.closePath(),t.fillStrokeShape(this)}getWidth(){var t,e;return null!==(t=this.attrs.width)&&void 0!==t?t:null===(e=this.image())||void 0===e?void 0:e.width}getHeight(){var t,e;return null!==(t=this.attrs.height)&&void 0!==t?t:null===(e=this.image())||void 0===e?void 0:e.height}static fromURL(t,e){var i=g.createImageElement();i.onload=function(){var t=new Ct({image:i});e(t)},i.crossOrigin="Anonymous",i.src=t}}Ct.prototype.className="Image",n(Ct),b.addGetterSetter(Ct,"image"),b.addComponentsGetterSetter(Ct,"crop",["x","y","width","height"]),b.addGetterSetter(Ct,"cropX",0,p()),b.addGetterSetter(Ct,"cropY",0,p()),b.addGetterSetter(Ct,"cropWidth",0,p()),b.addGetterSetter(Ct,"cropHeight",0,p());var Pt=["fontFamily","fontSize","fontStyle","padding","lineHeight","text","width","height"],kt=Pt.length;class Tt extends lt{constructor(t){super(t),this.on("add.konva",(function(t){this._addListeners(t.child),this._sync()}))}getText(){return this.find("Text")[0]}getTag(){return this.find("Tag")[0]}_addListeners(t){var e,i=this,r=function(){i._sync()};for(e=0;el?h:l,p=h>l?1:h/l,v=h>l?l/h:1;t.translate(s,o),t.rotate(g),t.scale(p,v),t.arc(0,0,f,d,d+c,1-u),t.scale(1/p,1/v),t.rotate(-g),t.translate(-s,-o);break;case"z":i=!0,t.closePath()}}i||this.hasFill()?t.fillStrokeShape(this):t.strokeShape(this)}getSelfRect(){var t=[];this.dataArray.forEach((function(e){if("A"===e.command){var i=e.points[4],r=e.points[5],a=e.points[4]+r,n=Math.PI/180;if(Math.abs(i-a)a;r-=n){const i=Mt.getPointOnEllipticalArc(e.points[0],e.points[1],e.points[2],e.points[3],r,0);t.push(i.x,i.y)}else for(let r=i+n;rthis.dataArray[i].pathLength;)t-=this.dataArray[i].pathLength,++i;if(i===r)return{x:(e=this.dataArray[i-1].points.slice(-2))[0],y:e[1]};if(t<.01)return{x:(e=this.dataArray[i].points.slice(0,2))[0],y:e[1]};var a=this.dataArray[i],n=a.points;switch(a.command){case"L":return Mt.getPointOnLine(t,a.start.x,a.start.y,n[0],n[1]);case"C":return Mt.getPointOnCubicBezier(t/a.pathLength,a.start.x,a.start.y,n[0],n[1],n[2],n[3],n[4],n[5]);case"Q":return Mt.getPointOnQuadraticBezier(t/a.pathLength,a.start.x,a.start.y,n[0],n[1],n[2],n[3]);case"A":var s=n[0],o=n[1],h=n[2],l=n[3],d=n[4],c=n[5],g=n[6];return d+=c*t/a.pathLength,Mt.getPointOnEllipticalArc(s,o,h,l,d,g)}return null}static getLineLength(t,e,i,r){return Math.sqrt((i-t)*(i-t)+(r-e)*(r-e))}static getPointOnLine(t,e,i,r,a,n,s){void 0===n&&(n=e),void 0===s&&(s=i);var o=(a-i)/(r-e+1e-8),h=Math.sqrt(t*t/(1+o*o));r0&&!isNaN(u[0]);){var m,_,y,x,b,S,w,C,P,k,T=null,A=[],M=h,G=l;switch(g){case"l":h+=u.shift(),l+=u.shift(),T="L",A.push(h,l);break;case"L":h=u.shift(),l=u.shift(),A.push(h,l);break;case"m":var E=u.shift(),R=u.shift();if(h+=E,l+=R,T="M",s.length>2&&"z"===s[s.length-1].command)for(var L=s.length-2;L>=0;L--)if("M"===s[L].command){h=s[L].points[0]+E,l=s[L].points[1]+R;break}A.push(h,l),g="l";break;case"M":h=u.shift(),l=u.shift(),T="M",A.push(h,l),g="L";break;case"h":h+=u.shift(),T="L",A.push(h,l);break;case"H":h=u.shift(),T="L",A.push(h,l);break;case"v":l+=u.shift(),T="L",A.push(h,l);break;case"V":l=u.shift(),T="L",A.push(h,l);break;case"C":A.push(u.shift(),u.shift(),u.shift(),u.shift()),h=u.shift(),l=u.shift(),A.push(h,l);break;case"c":A.push(h+u.shift(),l+u.shift(),h+u.shift(),l+u.shift()),h+=u.shift(),l+=u.shift(),T="C",A.push(h,l);break;case"S":_=h,y=l,"C"===(m=s[s.length-1]).command&&(_=h+(h-m.points[2]),y=l+(l-m.points[3])),A.push(_,y,u.shift(),u.shift()),h=u.shift(),l=u.shift(),T="C",A.push(h,l);break;case"s":_=h,y=l,"C"===(m=s[s.length-1]).command&&(_=h+(h-m.points[2]),y=l+(l-m.points[3])),A.push(_,y,h+u.shift(),l+u.shift()),h+=u.shift(),l+=u.shift(),T="C",A.push(h,l);break;case"Q":A.push(u.shift(),u.shift()),h=u.shift(),l=u.shift(),A.push(h,l);break;case"q":A.push(h+u.shift(),l+u.shift()),h+=u.shift(),l+=u.shift(),T="Q",A.push(h,l);break;case"T":_=h,y=l,"Q"===(m=s[s.length-1]).command&&(_=h+(h-m.points[0]),y=l+(l-m.points[1])),h=u.shift(),l=u.shift(),T="Q",A.push(_,y,h,l);break;case"t":_=h,y=l,"Q"===(m=s[s.length-1]).command&&(_=h+(h-m.points[0]),y=l+(l-m.points[1])),h+=u.shift(),l+=u.shift(),T="Q",A.push(_,y,h,l);break;case"A":x=u.shift(),b=u.shift(),S=u.shift(),w=u.shift(),C=u.shift(),P=h,k=l,h=u.shift(),l=u.shift(),T="A",A=this.convertEndpointToCenterParameterization(P,k,h,l,w,C,x,b,S);break;case"a":x=u.shift(),b=u.shift(),S=u.shift(),w=u.shift(),C=u.shift(),P=h,k=l,h+=u.shift(),l+=u.shift(),T="A",A=this.convertEndpointToCenterParameterization(P,k,h,l,w,C,x,b,S)}s.push({command:T||g,points:A,start:{x:M,y:G},pathLength:this.calcLength(M,G,T||g,A)})}"z"!==g&&"Z"!==g||s.push({command:"z",points:[],start:void 0,pathLength:0})}return s}static calcLength(t,e,i,r){var a,n,s,o,h=Mt;switch(i){case"L":return h.getLineLength(t,e,r[0],r[1]);case"C":for(a=0,n=h.getPointOnCubicBezier(0,t,e,r[0],r[1],r[2],r[3],r[4],r[5]),o=.01;o<=1;o+=.01)s=h.getPointOnCubicBezier(o,t,e,r[0],r[1],r[2],r[3],r[4],r[5]),a+=h.getLineLength(n.x,n.y,s.x,s.y),n=s;return a;case"Q":for(a=0,n=h.getPointOnQuadraticBezier(0,t,e,r[0],r[1],r[2],r[3]),o=.01;o<=1;o+=.01)s=h.getPointOnQuadraticBezier(o,t,e,r[0],r[1],r[2],r[3]),a+=h.getLineLength(n.x,n.y,s.x,s.y),n=s;return a;case"A":a=0;var l=r[4],d=r[5],c=r[4]+d,g=Math.PI/180;if(Math.abs(l-c)c;o-=g)s=h.getPointOnEllipticalArc(r[0],r[1],r[2],r[3],o,0),a+=h.getLineLength(n.x,n.y,s.x,s.y),n=s;else for(o=l+g;o1&&(s*=Math.sqrt(g),o*=Math.sqrt(g));var u=Math.sqrt((s*s*(o*o)-s*s*(c*c)-o*o*(d*d))/(s*s*(c*c)+o*o*(d*d)));a===n&&(u*=-1),isNaN(u)&&(u=0);var f=u*s*c/o,p=u*-o*d/s,v=(t+i)/2+Math.cos(l)*f-Math.sin(l)*p,m=(e+r)/2+Math.sin(l)*f+Math.cos(l)*p,_=function(t){return Math.sqrt(t[0]*t[0]+t[1]*t[1])},y=function(t,e){return(t[0]*e[0]+t[1]*e[1])/(_(t)*_(e))},x=function(t,e){return(t[0]*e[1]=1&&(C=0),0===n&&C>0&&(C-=2*Math.PI),1===n&&C<0&&(C+=2*Math.PI),[v,m,s,o,b,C,l,n]}}Mt.prototype.className="Path",Mt.prototype._attrsAffectingSize=["data"],n(Mt),b.addGetterSetter(Mt,"data");class Gt extends at{_sceneFunc(t){var e=this.cornerRadius(),i=this.width(),r=this.height();if(t.beginPath(),e){let a=0,n=0,s=0,o=0;"number"==typeof e?a=n=s=o=Math.min(e,i/2,r/2):(a=Math.min(e[0]||0,i/2,r/2),n=Math.min(e[1]||0,i/2,r/2),o=Math.min(e[2]||0,i/2,r/2),s=Math.min(e[3]||0,i/2,r/2)),t.moveTo(a,0),t.lineTo(i-n,0),t.arc(i-n,n,n,3*Math.PI/2,0,!1),t.lineTo(i,r-o),t.arc(i-o,r-o,o,0,Math.PI/2,!1),t.lineTo(s,r),t.arc(s,r-s,s,Math.PI/2,Math.PI,!1),t.lineTo(0,a),t.arc(a,a,a,Math.PI,3*Math.PI/2,!1)}else t.rect(0,0,i,r);t.closePath(),t.fillStrokeShape(this)}}Gt.prototype.className="Rect",n(Gt),b.addGetterSetter(Gt,"cornerRadius",0,v(4));class Et extends at{_sceneFunc(t){const e=this._getPoints();t.beginPath(),t.moveTo(e[0].x,e[0].y);for(var i=1;i{e=Math.min(e,t.x),i=Math.max(i,t.x),r=Math.min(r,t.y),a=Math.max(a,t.y)}),{x:e,y:r,width:i-e,height:a-r}}getWidth(){return 2*this.radius()}getHeight(){return 2*this.radius()}setWidth(t){this.radius(t/2)}setHeight(t){this.radius(t/2)}}Et.prototype.className="RegularPolygon",Et.prototype._centroid=!0,Et.prototype._attrsAffectingSize=["radius"],n(Et),b.addGetterSetter(Et,"radius",0,p()),b.addGetterSetter(Et,"sides",0,p());var Rt=2*Math.PI;class Lt extends at{_sceneFunc(t){t.beginPath(),t.arc(0,0,this.innerRadius(),0,Rt,!1),t.moveTo(this.outerRadius(),0),t.arc(0,0,this.outerRadius(),Rt,0,!0),t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.outerRadius()}getHeight(){return 2*this.outerRadius()}setWidth(t){this.outerRadius(t/2)}setHeight(t){this.outerRadius(t/2)}}Lt.prototype.className="Ring",Lt.prototype._centroid=!0,Lt.prototype._attrsAffectingSize=["innerRadius","outerRadius"],n(Lt),b.addGetterSetter(Lt,"innerRadius",0,p()),b.addGetterSetter(Lt,"outerRadius",0,p());class Dt extends at{constructor(t){super(t),this._updated=!0,this.anim=new ct(()=>{var t=this._updated;return this._updated=!1,t}),this.on("animationChange.konva",(function(){this.frameIndex(0)})),this.on("frameIndexChange.konva",(function(){this._updated=!0})),this.on("frameRateChange.konva",(function(){this.anim.isRunning()&&(clearInterval(this.interval),this._setInterval())}))}_sceneFunc(t){var e=this.animation(),i=this.frameIndex(),r=4*i,a=this.animations()[e],n=this.frameOffsets(),s=a[r+0],o=a[r+1],h=a[r+2],l=a[r+3],d=this.image();if((this.hasFill()||this.hasStroke())&&(t.beginPath(),t.rect(0,0,h,l),t.closePath(),t.fillStrokeShape(this)),d)if(n){var c=n[e],g=2*i;t.drawImage(d,s,o,h,l,c[g+0],c[g+1],h,l)}else t.drawImage(d,s,o,h,l,0,0,h,l)}_hitFunc(t){var e=this.animation(),i=this.frameIndex(),r=4*i,a=this.animations()[e],n=this.frameOffsets(),s=a[r+2],o=a[r+3];if(t.beginPath(),n){var h=n[e],l=2*i;t.rect(h[l+0],h[l+1],s,o)}else t.rect(0,0,s,o);t.closePath(),t.fillShape(this)}_useBufferCanvas(){return super._useBufferCanvas(!0)}_setInterval(){var t=this;this.interval=setInterval((function(){t._updateIndex()}),1e3/this.frameRate())}start(){if(!this.isRunning()){var t=this.getLayer();this.anim.setLayers(t),this._setInterval(),this.anim.start()}}stop(){this.anim.stop(),clearInterval(this.interval)}isRunning(){return this.anim.isRunning()}_updateIndex(){var t=this.frameIndex(),e=this.animation();t1&&(v+=s)}}}_hitFunc(t){var e=this.getWidth(),i=this.getHeight();t.beginPath(),t.rect(0,0,e,i),t.closePath(),t.fillStrokeShape(this)}setText(t){var e=g._isString(t)?t:null==t?"":t+"";return this._setAttr("text",e),this}getWidth(){return"auto"===this.attrs.width||void 0===this.attrs.width?this.getTextWidth()+2*this.padding():this.attrs.width}getHeight(){return"auto"===this.attrs.height||void 0===this.attrs.height?this.fontSize()*this.textArr.length*this.lineHeight()+2*this.padding():this.attrs.height}getTextWidth(){return this.textWidth}getTextHeight(){return g.warn("text.getTextHeight() method is deprecated. Use text.height() - for full height and text.fontSize() - for one line height."),this.textHeight}measureSize(t){var e,i=zt(),r=this.fontSize();return i.save(),i.font=this._getContextFont(),e=i.measureText(t),i.restore(),{width:e.width,height:r}}_getContextFont(){return a.UA.isIE?this.fontStyle()+" "+this.fontSize()+"px "+this.fontFamily():this.fontStyle()+" "+this.fontVariant()+" "+this.fontSize()+"px "+this.fontFamily().split(",").map(t=>{const e=(t=t.trim()).indexOf(" ")>=0,i=t.indexOf('"')>=0||t.indexOf("'")>=0;return e&&!i&&(t=`"${t}"`),t}).join(", ")}_addTextLine(t){"justify"===this.align()&&(t=t.trim());var e=this._getTextWidth(t);return this.textArr.push({text:t,width:e})}_getTextWidth(t){var e=this.letterSpacing(),i=t.length;return zt().measureText(t).width+(i?e*(i-1):0)}_setTextData(){var t=this.text().split("\n"),e=+this.fontSize(),i=0,r=this.lineHeight()*e,a=this.attrs.width,n=this.attrs.height,s="auto"!==a&&void 0!==a,o="auto"!==n&&void 0!==n,h=this.padding(),l=a-2*h,d=n-2*h,c=0,g=this.wrap(),u="none"!==g,f="char"!==g&&u,p=this.ellipsis();this.textArr=[],zt().font=this._getContextFont();for(var v=p?this._getTextWidth("…"):0,m=0,_=t.length;m<_;++m){var y=t[m],x=this._getTextWidth(y);if(s&&x>l)for(;y.length>0;){for(var b=0,S=y.length,w="",C=0;b>>1,k=y.slice(0,P+1),T=this._getTextWidth(k)+v;T<=l?(b=P+1,w=k,C=T):S=P}if(!w)break;if(f){var A,M=y[w.length];(A=(" "===M||"-"===M)&&C<=l?w.length:Math.max(w.lastIndexOf(" "),w.lastIndexOf("-"))+1)>0&&(b=A,w=w.slice(0,b),C=this._getTextWidth(w))}if(w=w.trimRight(),this._addTextLine(w),i=Math.max(i,C),c+=r,!u||o&&c+r>d){var G=this.textArr[this.textArr.length-1];if(G)if(p)this._getTextWidth(G.text+"…")0&&(x=this._getTextWidth(y))<=l){this._addTextLine(y),c+=r,i=Math.max(i,x);break}}else this._addTextLine(y),c+=r,i=Math.max(i,x);if(o&&c+r>d)break}this.textHeight=e,this.textWidth=i}getStrokeScaleEnabled(){return!0}}Wt.prototype._fillFunc=function(t){t.fillText(this._partialText,this._partialTextX,this._partialTextY)},Wt.prototype._strokeFunc=function(t){t.strokeText(this._partialText,this._partialTextX,this._partialTextY)},Wt.prototype.className="Text",Wt.prototype._attrsAffectingSize=["text","fontSize","padding","wrap","lineHeight","letterSpacing"],n(Wt),b.overWriteSetter(Wt,"width",m()),b.overWriteSetter(Wt,"height",m()),b.addGetterSetter(Wt,"fontFamily","Arial"),b.addGetterSetter(Wt,"fontSize",12,p()),b.addGetterSetter(Wt,"fontStyle","normal"),b.addGetterSetter(Wt,"fontVariant","normal"),b.addGetterSetter(Wt,"padding",0,p()),b.addGetterSetter(Wt,"align","left"),b.addGetterSetter(Wt,"verticalAlign","top"),b.addGetterSetter(Wt,"lineHeight",1,p()),b.addGetterSetter(Wt,"wrap","word"),b.addGetterSetter(Wt,"ellipsis",!1,x()),b.addGetterSetter(Wt,"letterSpacing",0,p()),b.addGetterSetter(Wt,"text","",_()),b.addGetterSetter(Wt,"textDecoration","");function Ht(t){t.fillText(this.partialText,0,0)}function Yt(t){t.strokeText(this.partialText,0,0)}class Xt extends at{constructor(t){super(t),this.dummyCanvas=g.createCanvasElement(),this.dataArray=[],this.dataArray=Mt.parsePathData(this.attrs.data),this.on("dataChange.konva",(function(){this.dataArray=Mt.parsePathData(this.attrs.data),this._setTextData()})),this.on("textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva fontSizeChange.konva",this._setTextData),t&&t.getKerning&&(g.warn('getKerning TextPath API is deprecated. Please use "kerningFunc" instead.'),this.kerningFunc(t.getKerning)),this._setTextData()}_sceneFunc(t){t.setAttr("font",this._getContextFont()),t.setAttr("textBaseline",this.textBaseline()),t.setAttr("textAlign","left"),t.save();var e=this.textDecoration(),i=this.fill(),r=this.fontSize(),a=this.glyphInfo;"underline"===e&&t.beginPath();for(var n=0;n=1){var i=e[0].p0;t.moveTo(i.x,i.y)}for(var r=0;r0&&(s+=t.dataArray[o].pathLength);var h=0;"center"===r&&(h=Math.max(0,s/2-n/2)),"right"===r&&(h=Math.max(0,s-n));for(var l,d,c,g=Ot(this.text()),u=this.text().split(" ").length-1,f=-1,p=0,v=function(){p=0;for(var e=t.dataArray,i=f+1;i0)return f=i,e[i];"M"===e[i].command&&(l={x:e[i].points[0],y:e[i].points[1]})}return{}},m=function(e){var a=t._getTextSize(e).width+i;" "===e&&"justify"===r&&(a+=(s-n)/u);var o=0,h=0;for(d=void 0;Math.abs(a-o)/a>.01&&h<20;){h++;for(var g=o;void 0===c;)(c=v())&&g+c.pathLengtha?d=Mt.getPointOnLine(a,l.x,l.y,c.points[0],c.points[1],l.x,l.y):c=void 0;break;case"A":var m=c.points[4],_=c.points[5],y=c.points[4]+_;0===p?p=m+1e-8:a>o?p+=Math.PI/180*_/Math.abs(_):p-=Math.PI/360*_/Math.abs(_),(_<0&&p=0&&p>y)&&(p=y,f=!0),d=Mt.getPointOnEllipticalArc(c.points[0],c.points[1],c.points[2],c.points[3],p,c.points[6]);break;case"C":0===p?p=a>c.pathLength?1e-8:a/c.pathLength:a>o?p+=(a-o)/c.pathLength/2:p=Math.max(p-(o-a)/c.pathLength/2,0),p>1&&(p=1,f=!0),d=Mt.getPointOnCubicBezier(p,c.start.x,c.start.y,c.points[0],c.points[1],c.points[2],c.points[3],c.points[4],c.points[5]);break;case"Q":0===p?p=a/c.pathLength:a>o?p+=(a-o)/c.pathLength:p-=(o-a)/c.pathLength,p>1&&(p=1,f=!0),d=Mt.getPointOnQuadraticBezier(p,c.start.x,c.start.y,c.points[0],c.points[1],c.points[2],c.points[3])}void 0!==d&&(o=Mt.getLineLength(l.x,l.y,d.x,d.y)),f&&(f=!1,c=void 0)}},_=h/(t._getTextSize("C").width+i)-1,y=0;y<_&&(m("C"),void 0!==l&&void 0!==d);y++)l=d;for(var x=0;xt+".tr-konva").join(" "),Ut=["widthChange","heightChange","scaleXChange","scaleYChange","skewXChange","skewYChange","rotationChange","offsetXChange","offsetYChange","transformsEnabledChange","strokeWidthChange"].map(t=>t+".tr-konva").join(" "),qt={"top-left":-45,"top-center":0,"top-right":45,"middle-right":-90,"middle-left":90,"bottom-left":-135,"bottom-center":180,"bottom-right":135};const Kt="ontouchstart"in a._global;var Vt=["top-left","top-center","top-right","middle-right","middle-left","bottom-left","bottom-center","bottom-right"];function Qt(t,e,i){const r=i.x+(t.x-i.x)*Math.cos(e)-(t.y-i.y)*Math.sin(e),a=i.y+(t.x-i.x)*Math.sin(e)+(t.y-i.y)*Math.cos(e);return Object.assign(Object.assign({},t),{rotation:t.rotation+e,x:r,y:a})}function Jt(t,e){return Qt(t,e,function(t){return{x:t.x+t.width/2*Math.cos(t.rotation)+t.height/2*Math.sin(-t.rotation),y:t.y+t.height/2*Math.cos(t.rotation)+t.width/2*Math.sin(t.rotation)}}(t))}class Zt extends lt{constructor(t){super(t),this._transforming=!1,this._createElements(),this._handleMouseMove=this._handleMouseMove.bind(this),this._handleMouseUp=this._handleMouseUp.bind(this),this.update=this.update.bind(this),this.on(jt,this.update),this.getNode()&&this.update()}attachTo(t){return this.setNode(t),this}setNode(t){return g.warn("tr.setNode(shape), tr.node(shape) and tr.attachTo(shape) methods are deprecated. Please use tr.nodes(nodesArray) instead."),this.setNodes([t])}getNode(){return this._nodes&&this._nodes[0]}setNodes(t=[]){return this._nodes&&this._nodes.length&&this.detach(),this._nodes=t,1===t.length?this.rotation(t[0].getAbsoluteRotation()):this.rotation(0),this._nodes.forEach(t=>{const e=t._attrsAffectingSize.map(t=>t+"Change.tr-konva").join(" "),i=()=>{1===this.nodes().length&&this.rotation(this.nodes()[0].getAbsoluteRotation()),this._resetTransformCache(),this._transforming||this.isDragging()||this.update()};t.on(e,i),t.on(Ut,i),t.on("absoluteTransformChange.tr-konva",i),t.on("xChange.tr-konva yChange.tr-konva",i),this._proxyDrag(t)}),this._resetTransformCache(),!!this.findOne(".top-left")&&this.update(),this}_proxyDrag(t){let e;t.on("dragstart.tr-konva",i=>{e=t.getAbsolutePosition(),this.isDragging()||t===this.findOne(".back")||this.startDrag(i,!1)}),t.on("dragmove.tr-konva",i=>{if(!e)return;const r=t.getAbsolutePosition(),a=r.x-e.x,n=r.y-e.y;this.nodes().forEach(e=>{if(e===t)return;if(e.isDragging())return;const r=e.getAbsolutePosition();e.setAbsolutePosition({x:r.x+a,y:r.y+n}),e.startDrag(i)}),e=null})}getNodes(){return this._nodes||[]}getActiveAnchor(){return this._movingAnchorName}detach(){this._nodes&&this._nodes.forEach(t=>{t.off(".tr-konva")}),this._nodes=[],this._resetTransformCache()}_resetTransformCache(){this._clearCache("nodesRect"),this._clearCache("transform"),this._clearSelfAndDescendantCache("absoluteTransform")}_getNodeRect(){return this._getCache("nodesRect",this.__getNodeRect)}__getNodeShape(t,e=this.rotation(),i){var r=t.getClientRect({skipTransform:!0,skipShadow:!0,skipStroke:this.ignoreStroke()}),n=t.getAbsoluteScale(i),s=t.getAbsolutePosition(i),o=r.x*n.x-t.offsetX()*n.x,h=r.y*n.y-t.offsetY()*n.y;const l=(a.getAngle(t.getAbsoluteRotation())+2*Math.PI)%(2*Math.PI);return Qt({x:s.x+o*Math.cos(l)+h*Math.sin(-l),y:s.y+h*Math.cos(l)+o*Math.sin(l),width:r.width*n.x,height:r.height*n.y,rotation:l},-a.getAngle(e),{x:0,y:0})}__getNodeRect(){if(!this.getNode())return{x:-1e8,y:-1e8,width:0,height:0,rotation:0};const t=[];this.nodes().map(e=>{const i=e.getClientRect({skipTransform:!0,skipShadow:!0,skipStroke:this.ignoreStroke()});var r=[{x:i.x,y:i.y},{x:i.x+i.width,y:i.y},{x:i.x+i.width,y:i.y+i.height},{x:i.x,y:i.y+i.height}],a=e.getAbsoluteTransform();r.forEach((function(e){var i=a.point(e);t.push(i)}))});const e=new s;var i,r,n,o;e.rotate(-a.getAngle(this.rotation())),t.forEach((function(t){var a=e.point(t);void 0===i&&(i=n=a.x,r=o=a.y),i=Math.min(i,a.x),r=Math.min(r,a.y),n=Math.max(n,a.x),o=Math.max(o,a.y)})),e.invert();const h=e.point({x:i,y:r});return{x:h.x,y:h.y,width:n-i,height:o-r,rotation:a.getAngle(this.rotation())}}getX(){return this._getNodeRect().x}getY(){return this._getNodeRect().y}getWidth(){return this._getNodeRect().width}getHeight(){return this._getNodeRect().height}_createElements(){this._createBack(),Vt.forEach(function(t){this._createAnchor(t)}.bind(this)),this._createAnchor("rotater")}_createAnchor(t){var e=new Gt({stroke:"rgb(0, 161, 255)",fill:"white",strokeWidth:1,name:t+" _anchor",dragDistance:0,draggable:!0,hitStrokeWidth:Kt?10:"auto"}),i=this;e.on("mousedown touchstart",(function(t){i._handleMouseDown(t)})),e.on("dragstart",t=>{e.stopDrag(),t.cancelBubble=!0}),e.on("dragend",t=>{t.cancelBubble=!0}),e.on("mouseenter",()=>{var i=a.getAngle(this.rotation()),r=function(t,e){if("rotater"===t)return"crosshair";e+=g._degToRad(qt[t]||0);var i=(g._radToDeg(e)%360+360)%360;return g._inRange(i,337.5,360)||g._inRange(i,0,22.5)?"ns-resize":g._inRange(i,22.5,67.5)?"nesw-resize":g._inRange(i,67.5,112.5)?"ew-resize":g._inRange(i,112.5,157.5)?"nwse-resize":g._inRange(i,157.5,202.5)?"ns-resize":g._inRange(i,202.5,247.5)?"nesw-resize":g._inRange(i,247.5,292.5)?"ew-resize":g._inRange(i,292.5,337.5)?"nwse-resize":(g.error("Transformer has unknown angle for cursor detection: "+i),"pointer")}(t,i);e.getStage().content&&(e.getStage().content.style.cursor=r),this._cursorChange=!0}),e.on("mouseout",()=>{e.getStage().content&&(e.getStage().content.style.cursor=""),this._cursorChange=!1}),this.add(e)}_createBack(){var t=new at({name:"back",width:0,height:0,draggable:!0,sceneFunc(t){var e=this.getParent(),i=e.padding();t.beginPath(),t.rect(-i,-i,this.width()+2*i,this.height()+2*i),t.moveTo(this.width()/2,-i),e.rotateEnabled()&&t.lineTo(this.width()/2,-e.rotateAnchorOffset()*g._sign(this.height())-i),t.fillStrokeShape(this)},hitFunc:(t,e)=>{if(this.shouldOverdrawWholeArea()){var i=this.padding();t.beginPath(),t.rect(-i,-i,e.width()+2*i,e.height()+2*i),t.fillStrokeShape(e)}}});this.add(t),this._proxyDrag(t),t.on("dragstart",t=>{t.cancelBubble=!0}),t.on("dragmove",t=>{t.cancelBubble=!0}),t.on("dragend",t=>{t.cancelBubble=!0})}_handleMouseDown(t){this._movingAnchorName=t.target.name().split(" ")[0];var e=this._getNodeRect(),i=e.width,r=e.height,a=Math.sqrt(Math.pow(i,2)+Math.pow(r,2));this.sin=Math.abs(r/a),this.cos=Math.abs(i/a),"undefined"!=typeof window&&(window.addEventListener("mousemove",this._handleMouseMove),window.addEventListener("touchmove",this._handleMouseMove),window.addEventListener("mouseup",this._handleMouseUp,!0),window.addEventListener("touchend",this._handleMouseUp,!0)),this._transforming=!0;var n=t.target.getAbsolutePosition(),s=t.target.getStage().getPointerPosition();this._anchorDragOffset={x:s.x-n.x,y:s.y-n.y},this._fire("transformstart",{evt:t,target:this.getNode()}),this._nodes.forEach(e=>{e._fire("transformstart",{evt:t,target:e})})}_handleMouseMove(t){var e,i,r,n=this.findOne("."+this._movingAnchorName),s=n.getStage();s.setPointersPositions(t);const o=s.getPointerPosition();var h={x:o.x-this._anchorDragOffset.x,y:o.y-this._anchorDragOffset.y};const l=n.getAbsolutePosition();n.setAbsolutePosition(h);const d=n.getAbsolutePosition();if(l.x!==d.x||l.y!==d.y)if("rotater"!==this._movingAnchorName){var c=this.keepRatio()||t.shiftKey,g=this.centeredScaling()||t.altKey;if("top-left"===this._movingAnchorName){if(c){var u=g?{x:this.width()/2,y:this.height()/2}:{x:this.findOne(".bottom-right").x(),y:this.findOne(".bottom-right").y()};r=Math.sqrt(Math.pow(u.x-n.x(),2)+Math.pow(u.y-n.y(),2));var f=this.findOne(".top-left").x()>u.x?-1:1,p=this.findOne(".top-left").y()>u.y?-1:1;e=r*this.cos*f,i=r*this.sin*p,this.findOne(".top-left").x(u.x-e),this.findOne(".top-left").y(u.y-i)}}else if("top-center"===this._movingAnchorName)this.findOne(".top-left").y(n.y());else if("top-right"===this._movingAnchorName){if(c){u=g?{x:this.width()/2,y:this.height()/2}:{x:this.findOne(".bottom-left").x(),y:this.findOne(".bottom-left").y()};r=Math.sqrt(Math.pow(n.x()-u.x,2)+Math.pow(u.y-n.y(),2));f=this.findOne(".top-right").x()u.y?-1:1;e=r*this.cos*f,i=r*this.sin*p,this.findOne(".top-right").x(u.x+e),this.findOne(".top-right").y(u.y-i)}var v=n.position();this.findOne(".top-left").y(v.y),this.findOne(".bottom-right").x(v.x)}else if("middle-left"===this._movingAnchorName)this.findOne(".top-left").x(n.x());else if("middle-right"===this._movingAnchorName)this.findOne(".bottom-right").x(n.x());else if("bottom-left"===this._movingAnchorName){if(c){u=g?{x:this.width()/2,y:this.height()/2}:{x:this.findOne(".top-right").x(),y:this.findOne(".top-right").y()};r=Math.sqrt(Math.pow(u.x-n.x(),2)+Math.pow(n.y()-u.y,2));f=u.x{e._fire("transformend",{evt:t,target:e})}),this._movingAnchorName=null}}_fitNodesInto(t,e){var i=this._getNodeRect();if(g._inRange(t.width,2*-this.padding()-1,1))return void this.update();if(g._inRange(t.height,2*-this.padding()-1,1))return void this.update();var r=new s;if(r.rotate(a.getAngle(this.rotation())),this._movingAnchorName&&t.width<0&&this._movingAnchorName.indexOf("left")>=0){const e=r.point({x:2*-this.padding(),y:0});t.x+=e.x,t.y+=e.y,t.width+=2*this.padding(),this._movingAnchorName=this._movingAnchorName.replace("left","right"),this._anchorDragOffset.x-=e.x,this._anchorDragOffset.y-=e.y}else if(this._movingAnchorName&&t.width<0&&this._movingAnchorName.indexOf("right")>=0){const e=r.point({x:2*this.padding(),y:0});this._movingAnchorName=this._movingAnchorName.replace("right","left"),this._anchorDragOffset.x-=e.x,this._anchorDragOffset.y-=e.y,t.width+=2*this.padding()}if(this._movingAnchorName&&t.height<0&&this._movingAnchorName.indexOf("top")>=0){const e=r.point({x:0,y:2*-this.padding()});t.x+=e.x,t.y+=e.y,this._movingAnchorName=this._movingAnchorName.replace("top","bottom"),this._anchorDragOffset.x-=e.x,this._anchorDragOffset.y-=e.y,t.height+=2*this.padding()}else if(this._movingAnchorName&&t.height<0&&this._movingAnchorName.indexOf("bottom")>=0){const e=r.point({x:0,y:2*this.padding()});this._movingAnchorName=this._movingAnchorName.replace("bottom","top"),this._anchorDragOffset.x-=e.x,this._anchorDragOffset.y-=e.y,t.height+=2*this.padding()}if(this.boundBoxFunc()){const e=this.boundBoxFunc()(i,t);e?t=e:g.warn("boundBoxFunc returned falsy. You should return new bound rect from it!")}const n=new s;n.translate(i.x,i.y),n.rotate(i.rotation),n.scale(i.width/1e7,i.height/1e7);const o=new s;o.translate(t.x,t.y),o.rotate(t.rotation),o.scale(t.width/1e7,t.height/1e7);const h=o.multiply(n.invert());this._nodes.forEach(t=>{var i;const r=t.getParent().getAbsoluteTransform(),a=t.getTransform().copy();a.translate(t.offsetX(),t.offsetY());const n=new s;n.multiply(r.copy().invert()).multiply(h).multiply(r).multiply(a);const o=n.decompose();t.setAttrs(o),this._fire("transform",{evt:e,target:t}),t._fire("transform",{evt:e,target:t}),null===(i=t.getLayer())||void 0===i||i.batchDraw()}),this.rotation(g._getRotation(t.rotation)),this._resetTransformCache(),this.update(),this.getLayer().batchDraw()}forceUpdate(){this._resetTransformCache(),this.update()}_batchChangeChild(t,e){this.findOne(t).setAttrs(e)}update(){var t,e=this._getNodeRect();this.rotation(g._getRotation(e.rotation));var i=e.width,r=e.height,a=this.enabledAnchors(),n=this.resizeEnabled(),s=this.padding(),o=this.anchorSize();this.find("._anchor").forEach(t=>{t.setAttrs({width:o,height:o,offsetX:o/2,offsetY:o/2,stroke:this.anchorStroke(),strokeWidth:this.anchorStrokeWidth(),fill:this.anchorFill(),cornerRadius:this.anchorCornerRadius()})}),this._batchChangeChild(".top-left",{x:0,y:0,offsetX:o/2+s,offsetY:o/2+s,visible:n&&a.indexOf("top-left")>=0}),this._batchChangeChild(".top-center",{x:i/2,y:0,offsetY:o/2+s,visible:n&&a.indexOf("top-center")>=0}),this._batchChangeChild(".top-right",{x:i,y:0,offsetX:o/2-s,offsetY:o/2+s,visible:n&&a.indexOf("top-right")>=0}),this._batchChangeChild(".middle-left",{x:0,y:r/2,offsetX:o/2+s,visible:n&&a.indexOf("middle-left")>=0}),this._batchChangeChild(".middle-right",{x:i,y:r/2,offsetX:o/2-s,visible:n&&a.indexOf("middle-right")>=0}),this._batchChangeChild(".bottom-left",{x:0,y:r,offsetX:o/2+s,offsetY:o/2-s,visible:n&&a.indexOf("bottom-left")>=0}),this._batchChangeChild(".bottom-center",{x:i/2,y:r,offsetY:o/2-s,visible:n&&a.indexOf("bottom-center")>=0}),this._batchChangeChild(".bottom-right",{x:i,y:r,offsetX:o/2-s,offsetY:o/2-s,visible:n&&a.indexOf("bottom-right")>=0}),this._batchChangeChild(".rotater",{x:i/2,y:-this.rotateAnchorOffset()*g._sign(r)-s,visible:this.rotateEnabled()}),this._batchChangeChild(".back",{width:i,height:r,visible:this.borderEnabled(),stroke:this.borderStroke(),strokeWidth:this.borderStrokeWidth(),dash:this.borderDash(),x:0,y:0}),null===(t=this.getLayer())||void 0===t||t.batchDraw()}isTransforming(){return this._transforming}stopTransform(){if(this._transforming){this._removeEvents();var t=this.findOne("."+this._movingAnchorName);t&&t.stopDrag()}}destroy(){return this.getStage()&&this._cursorChange&&this.getStage().content&&(this.getStage().content.style.cursor=""),lt.prototype.destroy.call(this),this.detach(),this._removeEvents(),this}toObject(){return N.prototype.toObject.call(this)}}Zt.prototype.className="Transformer",n(Zt),b.addGetterSetter(Zt,"enabledAnchors",Vt,(function(t){return t instanceof Array||g.warn("enabledAnchors value should be an array"),t instanceof Array&&t.forEach((function(t){-1===Vt.indexOf(t)&&g.warn("Unknown anchor name: "+t+". Available names are: "+Vt.join(", "))})),t||[]})),b.addGetterSetter(Zt,"resizeEnabled",!0),b.addGetterSetter(Zt,"anchorSize",10,p()),b.addGetterSetter(Zt,"rotateEnabled",!0),b.addGetterSetter(Zt,"rotationSnaps",[]),b.addGetterSetter(Zt,"rotateAnchorOffset",50,p()),b.addGetterSetter(Zt,"rotationSnapTolerance",5,p()),b.addGetterSetter(Zt,"borderEnabled",!0),b.addGetterSetter(Zt,"anchorStroke","rgb(0, 161, 255)"),b.addGetterSetter(Zt,"anchorStrokeWidth",1,p()),b.addGetterSetter(Zt,"anchorFill","white"),b.addGetterSetter(Zt,"anchorCornerRadius",0,p()),b.addGetterSetter(Zt,"borderStroke","rgb(0, 161, 255)"),b.addGetterSetter(Zt,"borderStrokeWidth",1,p()),b.addGetterSetter(Zt,"borderDash"),b.addGetterSetter(Zt,"keepRatio",!0),b.addGetterSetter(Zt,"centeredScaling",!1),b.addGetterSetter(Zt,"ignoreStroke",!1),b.addGetterSetter(Zt,"padding",0,p()),b.addGetterSetter(Zt,"node"),b.addGetterSetter(Zt,"nodes"),b.addGetterSetter(Zt,"boundBoxFunc"),b.addGetterSetter(Zt,"shouldOverdrawWholeArea",!1),b.backCompat(Zt,{lineEnabled:"borderEnabled",rotateHandlerOffset:"rotateAnchorOffset",enabledHandlers:"enabledAnchors"});class $t extends at{_sceneFunc(t){t.beginPath(),t.arc(0,0,this.radius(),0,a.getAngle(this.angle()),this.clockwise()),t.lineTo(0,0),t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.radius()}getHeight(){return 2*this.radius()}setWidth(t){this.radius(t/2)}setHeight(t){this.radius(t/2)}}function te(){this.r=0,this.g=0,this.b=0,this.a=0,this.next=null}$t.prototype.className="Wedge",$t.prototype._centroid=!0,$t.prototype._attrsAffectingSize=["radius"],n($t),b.addGetterSetter($t,"radius",0,p()),b.addGetterSetter($t,"angle",0,p()),b.addGetterSetter($t,"clockwise",!1),b.backCompat($t,{angleDeg:"angle",getAngleDeg:"getAngle",setAngleDeg:"setAngle"});var ee=[512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,289,287,285,282,280,278,275,273,271,269,267,265,263,261,259],ie=[9,11,12,13,13,14,14,15,15,15,15,16,16,16,16,17,17,17,17,17,17,17,18,18,18,18,18,18,18,18,18,19,19,19,19,19,19,19,19,19,19,19,19,19,19,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24];b.addGetterSetter(N,"blurRadius",0,p(),b.afterSetFilter);b.addGetterSetter(N,"brightness",0,p(),b.afterSetFilter);b.addGetterSetter(N,"contrast",0,p(),b.afterSetFilter);function re(t,e,i,r,a){var n=i-e,s=a-r;return 0===n?r+s/2:0===s?r:s*((t-e)/n)+r}b.addGetterSetter(N,"embossStrength",.5,p(),b.afterSetFilter),b.addGetterSetter(N,"embossWhiteLevel",.5,p(),b.afterSetFilter),b.addGetterSetter(N,"embossDirection","top-left",null,b.afterSetFilter),b.addGetterSetter(N,"embossBlend",!1,null,b.afterSetFilter);b.addGetterSetter(N,"enhance",0,p(),b.afterSetFilter);b.addGetterSetter(N,"hue",0,p(),b.afterSetFilter),b.addGetterSetter(N,"saturation",0,p(),b.afterSetFilter),b.addGetterSetter(N,"luminance",0,p(),b.afterSetFilter);b.addGetterSetter(N,"hue",0,p(),b.afterSetFilter),b.addGetterSetter(N,"saturation",0,p(),b.afterSetFilter),b.addGetterSetter(N,"value",0,p(),b.afterSetFilter);function ae(t,e,i){var r=4*(i*t.width+e),a=[];return a.push(t.data[r++],t.data[r++],t.data[r++],t.data[r++]),a}function ne(t,e){return Math.sqrt(Math.pow(t[0]-e[0],2)+Math.pow(t[1]-e[1],2)+Math.pow(t[2]-e[2],2))}b.addGetterSetter(N,"kaleidoscopePower",2,p(),b.afterSetFilter),b.addGetterSetter(N,"kaleidoscopeAngle",0,p(),b.afterSetFilter);b.addGetterSetter(N,"threshold",0,p(),b.afterSetFilter);b.addGetterSetter(N,"noise",.2,p(),b.afterSetFilter);b.addGetterSetter(N,"pixelSize",8,p(),b.afterSetFilter);b.addGetterSetter(N,"levels",.5,p(),b.afterSetFilter);b.addGetterSetter(N,"red",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),b.addGetterSetter(N,"green",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),b.addGetterSetter(N,"blue",0,f,b.afterSetFilter);b.addGetterSetter(N,"red",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),b.addGetterSetter(N,"green",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),b.addGetterSetter(N,"blue",0,f,b.afterSetFilter),b.addGetterSetter(N,"alpha",1,(function(t){return this._filterUpToDate=!1,t>1?1:t<0?0:t}));b.addGetterSetter(N,"threshold",.5,p(),b.afterSetFilter);return _t.Util._assign(_t,{Arc:yt,Arrow:bt,Circle:St,Ellipse:wt,Image:Ct,Label:Tt,Tag:At,Line:xt,Path:Mt,Rect:Gt,RegularPolygon:Et,Ring:Lt,Sprite:Dt,Star:It,Text:Wt,TextPath:Xt,Transformer:Zt,Wedge:$t,Filters:{Blur:function(t){var e=Math.round(this.blurRadius());e>0&&function(t,e){var i,r,a,n,s,o,h,l,d,c,g,u,f,p,v,m,_,y,x,b,S,w,C,P,k=t.data,T=t.width,A=t.height,M=e+e+1,G=T-1,E=A-1,R=e+1,L=R*(R+1)/2,D=new te,I=null,O=D,F=null,B=null,N=ee[e],z=ie[e];for(a=1;a>z,0!==C?(C=255/C,k[o]=(l*N>>z)*C,k[o+1]=(d*N>>z)*C,k[o+2]=(c*N>>z)*C):k[o]=k[o+1]=k[o+2]=0,l-=u,d-=f,c-=p,g-=v,u-=F.r,f-=F.g,p-=F.b,v-=F.a,n=h+((n=i+e+1)>z,C>0?(C=255/C,k[n]=(l*N>>z)*C,k[n+1]=(d*N>>z)*C,k[n+2]=(c*N>>z)*C):k[n]=k[n+1]=k[n+2]=0,l-=u,d-=f,c-=p,g-=v,u-=F.r,f-=F.g,p-=F.b,v-=F.a,n=i+((n=r+R)255?255:n,s=(s*=255)<0?0:s>255?255:s,o=(o*=255)<0?0:o>255?255:o,r[e]=n,r[e+1]=s,r[e+2]=o},Emboss:function(t){var e=10*this.embossStrength(),i=255*this.embossWhiteLevel(),r=this.embossDirection(),a=this.embossBlend(),n=0,s=0,o=t.data,h=t.width,l=t.height,d=4*h,c=l;switch(r){case"top-left":n=-1,s=-1;break;case"top":n=-1,s=0;break;case"top-right":n=-1,s=1;break;case"right":n=0,s=1;break;case"bottom-right":n=1,s=1;break;case"bottom":n=1,s=0;break;case"bottom-left":n=1,s=-1;break;case"left":n=0,s=-1;break;default:g.error("Unknown emboss direction: "+r)}do{var u=(c-1)*d,f=n;c+f<1&&(f=0),c+f>l&&(f=0);var p=(c-1+f)*h*4,v=h;do{var m=u+4*(v-1),_=s;v+_<1&&(_=0),v+_>h&&(_=0);var y=p+4*(v-1+_),x=o[m]-o[y],b=o[m+1]-o[y+1],S=o[m+2]-o[y+2],w=x,C=w>0?w:-w;if((b>0?b:-b)>C&&(w=b),(S>0?S:-S)>C&&(w=S),w*=e,a){var P=o[m]+w,k=o[m+1]+w,T=o[m+2]+w;o[m]=P>255?255:P<0?0:P,o[m+1]=k>255?255:k<0?0:k,o[m+2]=T>255?255:T<0?0:T}else{var A=i-w;A<0?A=0:A>255&&(A=255),o[m]=o[m+1]=o[m+2]=A}}while(--v)}while(--c)},Enhance:function(t){var e,i,r,a,n=t.data,s=n.length,o=n[0],h=o,l=n[1],d=l,c=n[2],g=c,u=this.enhance();if(0!==u){for(a=0;ah&&(h=e),(i=n[a+1])d&&(d=i),(r=n[a+2])g&&(g=r);var f,p,v,m,_,y,x,b,S;for(h===o&&(h=255,o=0),d===l&&(d=255,l=0),g===c&&(g=255,c=0),u>0?(p=h+u*(255-h),v=o-u*(o-0),_=d+u*(255-d),y=l-u*(l-0),b=g+u*(255-g),S=c-u*(c-0)):(p=h+u*(h-(f=.5*(h+o))),v=o+u*(o-f),_=d+u*(d-(m=.5*(d+l))),y=l+u*(l-m),b=g+u*(g-(x=.5*(g+c))),S=c+u*(c-x)),a=0;am?s:m;var _,y,x,b,S=d,w=l,C=360/w*Math.PI/180;for(y=0;yd&&(x=y,b=0,S=-1),i=0;iy?h:y;var x,b,S,w=g,C=c,P=i.polarRotation||0;for(a=0;a=0&&u=0&&f=0&&u=0&&f=1020?255:0}return s}(e=function(t,e,i){for(var r=[1,1,1,1,0,1,1,1,1],a=Math.round(Math.sqrt(r.length)),n=Math.floor(a/2),s=[],o=0;o=0&&u=0&&f=m))for(i=d;i=_||(a+=b[(r=4*(m*i+e))+0],n+=b[r+1],s+=b[r+2],o+=b[r+3],p+=1);for(a/=p,n/=p,s/=p,o/=p,e=h;e=m))for(i=d;i=_||(b[(r=4*(m*i+e))+0]=a,b[r+1]=n,b[r+2]=s,b[r+3]=o)}},Posterize:function(t){var e,i=Math.round(254*this.levels())+1,r=t.data,a=r.length,n=255/i;for(e=0;e127&&(h=255-h),l>127&&(l=255-l),d>127&&(d=255-d),e[o]=h,e[o+1]=l,e[o+2]=d}while(--s)}while(--a)},Threshold:function(t){var e,i=255*this.threshold(),r=t.data,a=r.length;for(e=0;ei.angleDeg?e*t:e,enableTrace:!1,_pointerEventsEnabled:!1,autoDrawEnabled:!0,hitOnDragEnabled:!1,captureTouchEventsEnabled:!1,listenClickTap:!1,inDblClickWindow:!1,pixelRatio:"undefined"!=typeof window&&window.devicePixelRatio||1,dragDistance:3,angleDeg:!0,showWarnings:!0,dragButtons:[0,1],isDragging:()=>i.DD.isDragging,isDragReady:()=>!!i.DD.node,document:e.document,_injectGlobal(t){e.Konva=t}},r=t=>{i[t.prototype.getClassName()]=t};i._injectGlobal(i);class a{constructor(t=[1,0,0,1,0,0]){this.dirty=!1,this.m=t&&t.slice()||[1,0,0,1,0,0]}reset(){this.m[0]=1,this.m[1]=0,this.m[2]=0,this.m[3]=1,this.m[4]=0,this.m[5]=0}copy(){return new a(this.m)}copyInto(t){t.m[0]=this.m[0],t.m[1]=this.m[1],t.m[2]=this.m[2],t.m[3]=this.m[3],t.m[4]=this.m[4],t.m[5]=this.m[5]}point(t){var e=this.m;return{x:e[0]*t.x+e[2]*t.y+e[4],y:e[1]*t.x+e[3]*t.y+e[5]}}translate(t,e){return this.m[4]+=this.m[0]*t+this.m[2]*e,this.m[5]+=this.m[1]*t+this.m[3]*e,this}scale(t,e){return this.m[0]*=t,this.m[1]*=t,this.m[2]*=e,this.m[3]*=e,this}rotate(t){var e=Math.cos(t),i=Math.sin(t),r=this.m[0]*e+this.m[2]*i,a=this.m[1]*e+this.m[3]*i,n=this.m[0]*-i+this.m[2]*e,s=this.m[1]*-i+this.m[3]*e;return this.m[0]=r,this.m[1]=a,this.m[2]=n,this.m[3]=s,this}getTranslation(){return{x:this.m[4],y:this.m[5]}}skew(t,e){var i=this.m[0]+this.m[2]*e,r=this.m[1]+this.m[3]*e,a=this.m[2]+this.m[0]*t,n=this.m[3]+this.m[1]*t;return this.m[0]=i,this.m[1]=r,this.m[2]=a,this.m[3]=n,this}multiply(t){var e=this.m[0]*t.m[0]+this.m[2]*t.m[1],i=this.m[1]*t.m[0]+this.m[3]*t.m[1],r=this.m[0]*t.m[2]+this.m[2]*t.m[3],a=this.m[1]*t.m[2]+this.m[3]*t.m[3],n=this.m[0]*t.m[4]+this.m[2]*t.m[5]+this.m[4],s=this.m[1]*t.m[4]+this.m[3]*t.m[5]+this.m[5];return this.m[0]=e,this.m[1]=i,this.m[2]=r,this.m[3]=a,this.m[4]=n,this.m[5]=s,this}invert(){var t=1/(this.m[0]*this.m[3]-this.m[1]*this.m[2]),e=this.m[3]*t,i=-this.m[1]*t,r=-this.m[2]*t,a=this.m[0]*t,n=t*(this.m[2]*this.m[5]-this.m[3]*this.m[4]),s=t*(this.m[1]*this.m[4]-this.m[0]*this.m[5]);return this.m[0]=e,this.m[1]=i,this.m[2]=r,this.m[3]=a,this.m[4]=n,this.m[5]=s,this}getMatrix(){return this.m}setAbsolutePosition(t,e){var i=this.m[0],r=this.m[1],a=this.m[2],n=this.m[3],s=this.m[4],o=(i*(e-this.m[5])-r*(t-s))/(i*n-r*a),h=(t-s-a*o)/i;return this.translate(h,o)}decompose(){var t=this.m[0],e=this.m[1],i=this.m[2],r=this.m[3],a=t*r-e*i;let n={x:this.m[4],y:this.m[5],rotation:0,scaleX:0,scaleY:0,skewX:0,skewY:0};if(0!=t||0!=e){var s=Math.sqrt(t*t+e*e);n.rotation=e>0?Math.acos(t/s):-Math.acos(t/s),n.scaleX=s,n.scaleY=a/s,n.skewX=(t*i+e*r)/a,n.skewY=0}else if(0!=i||0!=r){var o=Math.sqrt(i*i+r*r);n.rotation=Math.PI/2-(r>0?Math.acos(-i/o):-Math.acos(i/o)),n.scaleX=a/o,n.scaleY=o,n.skewX=0,n.skewY=(t*i+e*r)/a}return n.rotation=d._getRotation(n.rotation),n}}var n=Math.PI/180,s=180/Math.PI,o={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,132,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,255,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,203],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[119,128,144],slategrey:[119,128,144],snow:[255,255,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],transparent:[255,255,255,0],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,5]},h=/rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/,l=[];const d={_isElement:t=>!(!t||1!=t.nodeType),_isFunction:t=>!!(t&&t.constructor&&t.call&&t.apply),_isPlainObject:t=>!!t&&t.constructor===Object,_isArray:t=>"[object Array]"===Object.prototype.toString.call(t),_isNumber:t=>"[object Number]"===Object.prototype.toString.call(t)&&!isNaN(t)&&isFinite(t),_isString:t=>"[object String]"===Object.prototype.toString.call(t),_isBoolean:t=>"[object Boolean]"===Object.prototype.toString.call(t),isObject:t=>t instanceof Object,isValidSelector(t){if("string"!=typeof t)return!1;var e=t[0];return"#"===e||"."===e||e===e.toUpperCase()},_sign:t=>0===t||t>0?1:-1,requestAnimFrame(t){l.push(t);const e="undefined"!=typeof requestAnimationFrame&&requestAnimationFrame||function(t){setTimeout(t,60)};1===l.length&&e((function(){const t=l;l=[],t.forEach((function(t){t()}))}))},createCanvasElement(){var t=document.createElement("canvas");try{t.style=t.style||{}}catch(t){}return t},createImageElement:()=>document.createElement("img"),_isInDocument(t){for(;t=t.parentNode;)if(t==document)return!0;return!1},_simplifyArray(t){var e,i,r=[],a=t.length,n=d;for(e=0;e((1<<24)+(t<<16)+(e<<8)+i).toString(16).slice(1),_hexToRgb(t){t=t.replace("#","");var e=parseInt(t,16);return{r:e>>16&255,g:e>>8&255,b:255&e}},getRandomColor(){for(var t=(16777215*Math.random()<<0).toString(16);t.length<6;)t="0"+t;return"#"+t},get:(t,e)=>void 0===t?e:t,getRGB(t){var e;return t in o?{r:(e=o[t])[0],g:e[1],b:e[2]}:"#"===t[0]?this._hexToRgb(t.substring(1)):"rgb("===t.substr(0,4)?(e=h.exec(t.replace(/ /g,"")),{r:parseInt(e[1],10),g:parseInt(e[2],10),b:parseInt(e[3],10)}):{r:0,g:0,b:0}},colorToRGBA:t=>(t=t||"black",d._namedColorToRBA(t)||d._hex3ColorToRGBA(t)||d._hex6ColorToRGBA(t)||d._rgbColorToRGBA(t)||d._rgbaColorToRGBA(t)||d._hslColorToRGBA(t)),_namedColorToRBA(t){var e=o[t.toLowerCase()];return e?{r:e[0],g:e[1],b:e[2],a:1}:null},_rgbColorToRGBA(t){if(0===t.indexOf("rgb(")){var e=(t=t.match(/rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number);return{r:e[0],g:e[1],b:e[2],a:1}}},_rgbaColorToRGBA(t){if(0===t.indexOf("rgba(")){var e=(t=t.match(/rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number);return{r:e[0],g:e[1],b:e[2],a:e[3]}}},_hex6ColorToRGBA(t){if("#"===t[0]&&7===t.length)return{r:parseInt(t.slice(1,3),16),g:parseInt(t.slice(3,5),16),b:parseInt(t.slice(5,7),16),a:1}},_hex3ColorToRGBA(t){if("#"===t[0]&&4===t.length)return{r:parseInt(t[1]+t[1],16),g:parseInt(t[2]+t[2],16),b:parseInt(t[3]+t[3],16),a:1}},_hslColorToRGBA(t){if(/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.test(t)){const[e,...i]=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(t),r=Number(i[0])/360,a=Number(i[1])/100,n=Number(i[2])/100;let s,o,h;if(0===a)return h=255*n,{r:Math.round(h),g:Math.round(h),b:Math.round(h),a:1};s=n<.5?n*(1+a):n+a-n*a;const l=2*n-s,d=[0,0,0];for(let t=0;t<3;t++)o=r+1/3*-(t-1),o<0&&o++,o>1&&o--,h=6*o<1?l+6*(s-l)*o:2*o<1?s:3*o<2?l+(s-l)*(2/3-o)*6:l,d[t]=255*h;return{r:Math.round(d[0]),g:Math.round(d[1]),b:Math.round(d[2]),a:1}}},haveIntersection:(t,e)=>!(e.x>t.x+t.width||e.x+e.widtht.y+t.height||e.y+e.heightt.slice(0),_degToRad:t=>t*n,_radToDeg:t=>t*s,_getRotation:t=>i.angleDeg?d._radToDeg(t):t,_capitalize:t=>t.charAt(0).toUpperCase()+t.slice(1),throw(t){throw new Error("Konva error: "+t)},error(t){console.error("Konva error: "+t)},warn(t){i.showWarnings&&console.warn("Konva warning: "+t)},extend(t,e){function i(){this.constructor=t}i.prototype=e.prototype;var r=t.prototype;for(var a in t.prototype=new i,r)r.hasOwnProperty(a)&&(t.prototype[a]=r[a]);t.__super__=e.prototype,t.super=e},_getControlPoints(t,e,i,r,a,n,s){var o=Math.sqrt(Math.pow(i-t,2)+Math.pow(r-e,2)),h=Math.sqrt(Math.pow(a-i,2)+Math.pow(n-r,2)),l=s*o/(o+h),d=s*h/(o+h);return[i-l*(a-t),r-l*(n-e),i+d*(a-t),r+d*(n-e)]},_expandPoints(t,e){var i,r,a=t.length,n=[];for(i=2;ie<=t&&t1?(s=i,o=r,h=(i-a)*(i-a)+(r-n)*(r-n)):h=((s=t+d*(i-t))-a)*(s-a)+((o=e+d*(r-e))-n)*(o-n)}return[s,o,h]},_getProjectionToLine(t,e,i){var r=d.cloneObject(t),a=Number.MAX_VALUE;return e.forEach((function(n,s){if(i||s!==e.length-1){var o=e[(s+1)%e.length],h=d._getProjectionToSegment(n.x,n.y,o.x,o.y,t.x,t.y),l=h[0],c=h[1],g=h[2];ge.length){var s=e;e=t,t=s}for(r=0;rt.touches?t.changedTouches[0].identifier:999};function c(t){return d._isString(t)?'"'+t+'"':"[object Number]"===Object.prototype.toString.call(t)||d._isBoolean(t)?t:Object.prototype.toString.call(t)}function g(t){return t>255?255:t<0?0:Math.round(t)}function u(){if(i.isUnminified)return function(t,e){return d._isNumber(t)||d.warn(c(t)+' is a not valid value for "'+e+'" attribute. The value should be a number.'),t}}function f(t){if(i.isUnminified)return function(e,i){let r=d._isNumber(e),a=d._isArray(e)&&e.length==t;return r||a||d.warn(c(e)+' is a not valid value for "'+i+'" attribute. The value should be a number or Array('+t+")"),e}}function p(){if(i.isUnminified)return function(t,e){return d._isNumber(t)||"auto"===t||d.warn(c(t)+' is a not valid value for "'+e+'" attribute. The value should be a number or "auto".'),t}}function v(){if(i.isUnminified)return function(t,e){return d._isString(t)||d.warn(c(t)+' is a not valid value for "'+e+'" attribute. The value should be a string.'),t}}function m(){if(i.isUnminified)return function(t,e){const i=d._isString(t),r="[object CanvasGradient]"===Object.prototype.toString.call(t)||t&&t.addColorStop;return i||r||d.warn(c(t)+' is a not valid value for "'+e+'" attribute. The value should be a string or a native gradient.'),t}}function _(){if(i.isUnminified)return function(t,e){return!0===t||!1===t||d.warn(c(t)+' is a not valid value for "'+e+'" attribute. The value should be a boolean.'),t}}const y={addGetterSetter(t,e,i,r,a){y.addGetter(t,e,i),y.addSetter(t,e,r,a),y.addOverloadedGetterSetter(t,e)},addGetter(t,e,i){var r="get"+d._capitalize(e);t.prototype[r]=t.prototype[r]||function(){var t=this.attrs[e];return void 0===t?i:t}},addSetter(t,e,i,r){var a="set"+d._capitalize(e);t.prototype[a]||y.overWriteSetter(t,e,i,r)},overWriteSetter(t,e,i,r){var a="set"+d._capitalize(e);t.prototype[a]=function(t){return i&&null!=t&&(t=i.call(this,t,e)),this._setAttr(e,t),r&&r.call(this),this}},addComponentsGetterSetter(t,e,r,a,n){var s,o,h=r.length,l=d._capitalize,g="get"+l(e),u="set"+l(e);t.prototype[g]=function(){var t={};for(s=0;s"number"==typeof t?Math.floor(t):t)),h+="("+n.join(",")+")")):(h+=r.property,t||(h+="="+r.val)),h+=";";return h}clearTrace(){this.traceArr=[]}_trace(t){var e=this.traceArr;e.push(t),e.length>=100&&e.shift()}reset(){var t=this.getCanvas().getPixelRatio();this.setTransform(1*t,0,0,1*t,0,0)}getCanvas(){return this.canvas}clear(t){var e=this.getCanvas();t?this.clearRect(t.x||0,t.y||0,t.width||0,t.height||0):this.clearRect(0,0,e.getWidth()/e.pixelRatio,e.getHeight()/e.pixelRatio)}_applyLineCap(t){var e=t.getLineCap();e&&this.setAttr("lineCap",e)}_applyOpacity(t){var e=t.getAbsoluteOpacity();1!==e&&this.setAttr("globalAlpha",e)}_applyLineJoin(t){var e=t.attrs.lineJoin;e&&this.setAttr("lineJoin",e)}setAttr(t,e){this._context[t]=e}arc(t,e,i,r,a,n){this._context.arc(t,e,i,r,a,n)}arcTo(t,e,i,r,a){this._context.arcTo(t,e,i,r,a)}beginPath(){this._context.beginPath()}bezierCurveTo(t,e,i,r,a,n){this._context.bezierCurveTo(t,e,i,r,a,n)}clearRect(t,e,i,r){this._context.clearRect(t,e,i,r)}clip(){this._context.clip()}closePath(){this._context.closePath()}createImageData(t,e){var i=arguments;return 2===i.length?this._context.createImageData(t,e):1===i.length?this._context.createImageData(t):void 0}createLinearGradient(t,e,i,r){return this._context.createLinearGradient(t,e,i,r)}createPattern(t,e){return this._context.createPattern(t,e)}createRadialGradient(t,e,i,r,a,n){return this._context.createRadialGradient(t,e,i,r,a,n)}drawImage(t,e,i,r,a,n,s,o,h){var l=arguments,d=this._context;3===l.length?d.drawImage(t,e,i):5===l.length?d.drawImage(t,e,i,r,a):9===l.length&&d.drawImage(t,e,i,r,a,n,s,o,h)}ellipse(t,e,i,r,a,n,s,o){this._context.ellipse(t,e,i,r,a,n,s,o)}isPointInPath(t,e){return this._context.isPointInPath(t,e)}fill(){this._context.fill()}fillRect(t,e,i,r){this._context.fillRect(t,e,i,r)}strokeRect(t,e,i,r){this._context.strokeRect(t,e,i,r)}fillText(t,e,i){this._context.fillText(t,e,i)}measureText(t){return this._context.measureText(t)}getImageData(t,e,i,r){return this._context.getImageData(t,e,i,r)}lineTo(t,e){this._context.lineTo(t,e)}moveTo(t,e){this._context.moveTo(t,e)}rect(t,e,i,r){this._context.rect(t,e,i,r)}putImageData(t,e,i){this._context.putImageData(t,e,i)}quadraticCurveTo(t,e,i,r){this._context.quadraticCurveTo(t,e,i,r)}restore(){this._context.restore()}rotate(t){this._context.rotate(t)}save(){this._context.save()}scale(t,e){this._context.scale(t,e)}setLineDash(t){this._context.setLineDash?this._context.setLineDash(t):"mozDash"in this._context?this._context.mozDash=t:"webkitLineDash"in this._context&&(this._context.webkitLineDash=t)}getLineDash(){return this._context.getLineDash()}setTransform(t,e,i,r,a,n){this._context.setTransform(t,e,i,r,a,n)}stroke(){this._context.stroke()}strokeText(t,e,i,r){this._context.strokeText(t,e,i,r)}transform(t,e,i,r,a,n){this._context.transform(t,e,i,r,a,n)}translate(t,e){this._context.translate(t,e)}_enableTrace(){var t,e,i=this,r=x.length,a=this.setAttr,n=function(t){var r,a=i[t];i[t]=function(){return e=d._simplifyArray(Array.prototype.slice.call(arguments,0)),r=a.apply(i,arguments),i._trace({method:t,args:e}),r}};for(t=0;t{"dragging"===e.dragStatus&&(t=!0)}),t},justDragged:!1,get node(){var t;return A._dragElements.forEach(e=>{t=e.node}),t},_dragElements:new Map,_drag(t){const e=[];A._dragElements.forEach((i,r)=>{const{node:a}=i,n=a.getStage();n.setPointersPositions(t),void 0===i.pointerId&&(i.pointerId=d._getFirstPointerId(t));const s=n._changedPointerPositions.find(t=>t.id===i.pointerId);if(s){if("dragging"!==i.dragStatus){var o=a.dragDistance();if(Math.max(Math.abs(s.x-i.startPointerPos.x),Math.abs(s.y-i.startPointerPos.y)){e.fire("dragmove",{type:"dragmove",target:e,evt:t},!0)})},_endDragBefore(t){A._dragElements.forEach((e,r)=>{const{node:a}=e,n=a.getStage();t&&n.setPointersPositions(t);if(!n._changedPointerPositions.find(t=>t.id===e.pointerId))return;"dragging"!==e.dragStatus&&"stopped"!==e.dragStatus||(A.justDragged=!0,i.listenClickTap=!1,e.dragStatus="stopped");const s=e.node.getLayer()||e.node instanceof i.Stage&&e.node;s&&s.batchDraw()})},_endDragAfter(t){A._dragElements.forEach((e,i)=>{"stopped"===e.dragStatus&&e.node.fire("dragend",{type:"dragend",target:e.node,evt:t},!0),"dragging"!==e.dragStatus&&A._dragElements.delete(i)})}};i.isBrowser&&(window.addEventListener("mouseup",A._endDragBefore,!0),window.addEventListener("touchend",A._endDragBefore,!0),window.addEventListener("mousemove",A._drag),window.addEventListener("touchmove",A._drag),window.addEventListener("mouseup",A._endDragAfter,!1),window.addEventListener("touchend",A._endDragAfter,!1));const M={},G={},E=function(t,e){t&&M[t]===e&&delete M[t]},R=function(t,e){e&&(G[e]||(G[e]=[]),G[e].push(t))},L=function(t,e){if(t){var i=G[t];if(i){for(var r=0;rt+"Change.konva").join(" ");this.on(i,()=>{this._clearCache(t)}),this._attachedDepsListeners.set(t,!0)}return this._getCache(t,i)}_getCanvasCache(){return this._cache.get("canvas")}_clearSelfAndDescendantCache(t){this._clearCache(t),"absoluteTransform"===t&&this.fire("absoluteTransformChange")}clearCache(){return this._cache.delete("canvas"),this._clearSelfAndDescendantCache(),this._requestDraw(),this}cache(t){var e=t||{},i={};void 0!==e.x&&void 0!==e.y&&void 0!==e.width&&void 0!==e.height||(i=this.getClientRect({skipTransform:!0,relativeTo:this.getParent()}));var r=Math.ceil(e.width||i.width),a=Math.ceil(e.height||i.height),n=e.pixelRatio,s=void 0===e.x?i.x:e.x,o=void 0===e.y?i.y:e.y,h=e.offset||0,l=e.drawBorder||!1,c=e.hitCanvasPixelRatio||1;if(r&&a){s-=h,o-=h;var g=new k({pixelRatio:n,width:r+=2*h,height:a+=2*h}),u=new k({pixelRatio:n,width:0,height:0}),f=new T({pixelRatio:c,width:r,height:a}),p=g.getContext(),v=f.getContext();return f.isCache=!0,g.isCache=!0,this._cache.delete("canvas"),this._filterUpToDate=!1,!1===e.imageSmoothingEnabled&&(g.getContext()._context.imageSmoothingEnabled=!1,u.getContext()._context.imageSmoothingEnabled=!1),p.save(),v.save(),p.translate(-s,-o),v.translate(-s,-o),this._isUnderCache=!0,this._clearSelfAndDescendantCache("absoluteOpacity"),this._clearSelfAndDescendantCache("absoluteScale"),this.drawScene(g,this),this.drawHit(f,this),this._isUnderCache=!1,p.restore(),v.restore(),l&&(p.save(),p.beginPath(),p.rect(0,0,r,a),p.closePath(),p.setAttr("strokeStyle","red"),p.setAttr("lineWidth",5),p.stroke(),p.restore()),this._cache.set("canvas",{scene:g,filter:u,hit:f,x:s,y:o}),this._requestDraw(),this}d.error("Can not cache the node. Width or height of the node equals 0. Caching is skipped.")}isCached(){return this._cache.has("canvas")}getClientRect(t){throw new Error('abstract "getClientRect" method call')}_transformedRect(t,e){var i,r,a,n,s=[{x:t.x,y:t.y},{x:t.x+t.width,y:t.y},{x:t.x+t.width,y:t.y+t.height},{x:t.x,y:t.y+t.height}],o=this.getAbsoluteTransform(e);return s.forEach((function(t){var e=o.point(t);void 0===i&&(i=a=e.x,r=n=e.y),i=Math.min(i,e.x),r=Math.min(r,e.y),a=Math.max(a,e.x),n=Math.max(n,e.y)})),{x:i,y:r,width:a-i,height:n-r}}_drawCachedSceneCanvas(t){t.save(),t._applyOpacity(this),t._applyGlobalCompositeOperation(this);const e=this._getCanvasCache();t.translate(e.x,e.y);var i=this._getCachedSceneCanvas(),r=i.pixelRatio;t.drawImage(i._canvas,0,0,i.width/r,i.height/r),t.restore()}_drawCachedHitCanvas(t){var e=this._getCanvasCache(),i=e.hit;t.save(),t.translate(e.x,e.y),t.drawImage(i._canvas,0,0,i.width/i.pixelRatio,i.height/i.pixelRatio),t.restore()}_getCachedSceneCanvas(){var t,e,i,r,a=this.filters(),n=this._getCanvasCache(),s=n.scene,o=n.filter,h=o.getContext();if(a){if(!this._filterUpToDate){var l=s.pixelRatio;o.setSize(s.width/s.pixelRatio,s.height/s.pixelRatio);try{for(t=a.length,h.clear(),h.drawImage(s._canvas,0,0,s.getWidth()/l,s.getHeight()/l),e=h.getImageData(0,0,o.getWidth(),o.getHeight()),i=0;i{var e,i;if(!t)return this;for(e in t)"children"!==e&&(i="set"+d._capitalize(e),d._isFunction(this[i])?this[i](t[e]):this._setAttr(e,t[e]))}),this}isListening(){return this._getCache("listening",this._isListening)}_isListening(t){if(!this.listening())return!1;const e=this.getParent();return!e||e===t||this===t||e._isListening(t)}isVisible(){return this._getCache("visible",this._isVisible)}_isVisible(t){if(!this.visible())return!1;const e=this.getParent();return!e||e===t||this===t||e._isVisible(t)}shouldDrawHit(t,e=!1){if(t)return this._isVisible(t)&&this._isListening(t);var r=this.getLayer(),a=!1;A._dragElements.forEach(t=>{"dragging"===t.dragStatus&&("Stage"===t.node.nodeType||t.node.getLayer()===r)&&(a=!0)});var n=!e&&!i.hitOnDragEnabled&&a;return this.isListening()&&this.isVisible()&&!n}show(){return this.visible(!0),this}hide(){return this.visible(!1),this}getZIndex(){return this.index||0}getAbsoluteZIndex(){var t,e,i,r,a=this.getDepth(),n=this,s=0;return"Stage"!==n.nodeType&&function o(h){for(t=[],e=h.length,i=0;i0&&t[0].getDepth()<=a&&o(t)}(n.getStage().getChildren()),s}getDepth(){for(var t=0,e=this.parent;e;)t++,e=e.parent;return t}_batchTransformChanges(t){this._batchingTransformChange=!0,t(),this._batchingTransformChange=!1,this._needClearTransformCache&&(this._clearCache("transform"),this._clearSelfAndDescendantCache("absoluteTransform")),this._needClearTransformCache=!1}setPosition(t){return this._batchTransformChanges(()=>{this.x(t.x),this.y(t.y)}),this}getPosition(){return{x:this.x(),y:this.y()}}getAbsolutePosition(t){let e=!1,i=this.parent;for(;i;){if(i.isCached()){e=!0;break}i=i.parent}e&&!t&&(t=!0);var r=this.getAbsoluteTransform(t).getMatrix(),n=new a,s=this.offset();return n.m=r.slice(),n.translate(s.x,s.y),n.getTranslation()}setAbsolutePosition(t){var e=this._clearTransform();this.attrs.x=e.x,this.attrs.y=e.y,delete e.x,delete e.y,this._clearCache("transform");var i=this._getAbsoluteTransform().copy();return i.invert(),i.translate(t.x,t.y),t={x:this.attrs.x+i.getTranslation().x,y:this.attrs.y+i.getTranslation().y},this._setTransform(e),this.setPosition({x:t.x,y:t.y}),this._clearCache("transform"),this._clearSelfAndDescendantCache("absoluteTransform"),this}_setTransform(t){var e;for(e in t)this.attrs[e]=t[e]}_clearTransform(){var t={x:this.x(),y:this.y(),rotation:this.rotation(),scaleX:this.scaleX(),scaleY:this.scaleY(),offsetX:this.offsetX(),offsetY:this.offsetY(),skewX:this.skewX(),skewY:this.skewY()};return this.attrs.x=0,this.attrs.y=0,this.attrs.rotation=0,this.attrs.scaleX=1,this.attrs.scaleY=1,this.attrs.offsetX=0,this.attrs.offsetY=0,this.attrs.skewX=0,this.attrs.skewY=0,t}move(t){var e=t.x,i=t.y,r=this.x(),a=this.y();return void 0!==e&&(r+=e),void 0!==i&&(a+=i),this.setPosition({x:r,y:a}),this}_eachAncestorReverse(t,e){var i,r,a=[],n=this.getParent();if(!e||e._id!==this._id){for(a.unshift(this);n&&(!e||n._id!==e._id);)a.unshift(n),n=n.parent;for(i=a.length,r=0;r0&&(this.parent.children.splice(t,1),this.parent.children.splice(t-1,0,this),this.parent._setChildrenIndices(),!0)}moveToBottom(){if(!this.parent)return d.warn("Node has no parent. moveToBottom function is ignored."),!1;var t=this.index;return t>0&&(this.parent.children.splice(t,1),this.parent.children.unshift(this),this.parent._setChildrenIndices(),!0)}setZIndex(t){if(!this.parent)return d.warn("Node has no parent. zIndex parameter is ignored."),this;(t<0||t>=this.parent.children.length)&&d.warn("Unexpected value "+t+" for zIndex property. zIndex is just index of a node in children of its parent. Expected value is from 0 to "+(this.parent.children.length-1)+".");var e=this.index;return this.parent.children.splice(e,1),this.parent.children.splice(t,0,this),this.parent._setChildrenIndices(),this}getAbsoluteOpacity(){return this._getCache("absoluteOpacity",this._getAbsoluteOpacity)}_getAbsoluteOpacity(){var t=this.opacity(),e=this.getParent();return e&&!e._isUnderCache&&(t*=e.getAbsoluteOpacity()),t}moveTo(t){return this.getParent()!==t&&(this._remove(),t.add(this)),this}toObject(){var t,e,i,r,a={},n=this.getAttrs();for(t in a.attrs={},n)e=n[t],d.isObject(e)&&!d._isPlainObject(e)&&!d._isArray(e)||(i="function"==typeof this[t]&&this[t],delete n[t],r=i?i.call(this):null,n[t]=e,r!==e&&(a.attrs[t]=e));return a.className=this.getClassName(),d._prepareToStringify(a)}toJSON(){return JSON.stringify(this.toObject())}getParent(){return this.parent}findAncestors(t,e,i){var r=[];e&&this._isMatch(t)&&r.push(this);for(var a=this.parent;a;){if(a===i)return r;a._isMatch(t)&&r.push(a),a=a.parent}return r}isAncestorOf(t){return!1}findAncestor(t,e,i){return this.findAncestors(t,e,i)[0]}_isMatch(t){if(!t)return!1;if("function"==typeof t)return t(this);var e,i,r=t.replace(/ /g,"").split(","),a=r.length;for(e=0;e=0)&&!this.isDragging()){var e=!1;A._dragElements.forEach(t=>{this.isAncestorOf(t.node)&&(e=!0)}),e||this._createDragElement(t)}}))}_dragChange(){if(this.attrs.draggable)this._listenDrag();else{if(this._dragCleanup(),!this.getStage())return;const t=A._dragElements.get(this._id),e=t&&"dragging"===t.dragStatus,i=t&&"ready"===t.dragStatus;e?this.stopDrag():i&&A._dragElements.delete(this._id)}}_dragCleanup(){this.off("mousedown.konva"),this.off("touchstart.konva")}static create(t,e){return d._isString(t)&&(t=JSON.parse(t)),this._createNode(t,e)}static _createNode(t,e){var r,a,n,s=O.prototype.getClassName.call(t),o=t.children;e&&(t.attrs.container=e),i[s]||(d.warn('Can not find a node with class name "'+s+'". Fallback to "Shape".'),s="Shape");if(r=new(0,i[s])(t.attrs),o)for(a=o.length,n=0;n0}removeChildren(){return this.getChildren().forEach(t=>{t.parent=null,t.index=0,t.remove()}),this.children=[],this}destroyChildren(){return this.getChildren().forEach(t=>{t.parent=null,t.index=0,t.destroy()}),this.children=[],this}add(...t){if(arguments.length>1){for(var e=0;e0?e[0]:void 0}_generalFind(t,e){var i=[];return this._descendants(r=>{const a=r._isMatch(t);return a&&i.push(r),!(!a||!e)}),i}_descendants(t){let e=!1;const i=this.getChildren();for(const r of i){if(e=t(r),e)return!0;if(r.hasChildren()&&(e=r._descendants(t),e))return!0}return!1}toObject(){var t=O.prototype.toObject.call(this);return t.children=[],this.getChildren().forEach(e=>{t.children.push(e.toObject())}),t}isAncestorOf(t){for(var e=t.getParent();e;){if(e._id===this._id)return!0;e=e.getParent()}return!1}clone(t){var e=O.prototype.clone.call(this,t);return this.getChildren().forEach((function(t){e.add(t.clone())})),e}getAllIntersections(t){var e=[];return this.find("Shape").forEach((function(i){i.isVisible()&&i.intersects(t)&&e.push(i)})),e}_clearSelfAndDescendantCache(t){var e;super._clearSelfAndDescendantCache(t),this.isCached()||null===(e=this.children)||void 0===e||e.forEach((function(e){e._clearSelfAndDescendantCache(t)}))}_setChildrenIndices(){var t;null===(t=this.children)||void 0===t||t.forEach((function(t,e){t.index=e})),this._requestDraw()}drawScene(t,e){var i=this.getLayer(),r=t||i&&i.getCanvas(),a=r&&r.getContext(),n=this._getCanvasCache(),s=n&&n.scene,o=r&&r.isCache;if(!this.isVisible()&&!o)return this;if(s){a.save();var h=this.getAbsoluteTransform(e).getMatrix();a.transform(h[0],h[1],h[2],h[3],h[4],h[5]),this._drawCachedSceneCanvas(a),a.restore()}else this._drawChildren("drawScene",r,e);return this}drawHit(t,e){if(!this.shouldDrawHit(e))return this;var i=this.getLayer(),r=t||i&&i.hitCanvas,a=r&&r.getContext(),n=this._getCanvasCache();if(n&&n.hit){a.save();var s=this.getAbsoluteTransform(e).getMatrix();a.transform(s[0],s[1],s[2],s[3],s[4],s[5]),this._drawCachedHitCanvas(a),a.restore()}else this._drawChildren("drawHit",r,e);return this}_drawChildren(t,e,i){var r,a=e&&e.getContext(),n=this.clipWidth(),s=this.clipHeight(),o=this.clipFunc(),h=n&&s||o;const l=i===this;if(h){a.save();var d=this.getAbsoluteTransform(i),c=d.getMatrix();if(a.transform(c[0],c[1],c[2],c[3],c[4],c[5]),a.beginPath(),o)o.call(this,a,this);else{var g=this.clipX(),u=this.clipY();a.rect(g,u,n,s)}a.clip(),c=d.copy().invert().getMatrix(),a.transform(c[0],c[1],c[2],c[3],c[4],c[5])}var f=!l&&"source-over"!==this.globalCompositeOperation()&&"drawScene"===t;f&&(a.save(),a._applyGlobalCompositeOperation(this)),null===(r=this.children)||void 0===r||r.forEach((function(r){r[t](e,i)})),f&&a.restore(),h&&a.restore()}getClientRect(t){var e,i,r,a,n,s=(t=t||{}).skipTransform,o=t.relativeTo,h={x:1/0,y:1/0,width:0,height:0},l=this;null===(e=this.children)||void 0===e||e.forEach((function(e){if(e.visible()){var s=e.getClientRect({relativeTo:l,skipShadow:t.skipShadow,skipStroke:t.skipStroke});0===s.width&&0===s.height||(void 0===i?(i=s.x,r=s.y,a=s.x+s.width,n=s.y+s.height):(i=Math.min(i,s.x),r=Math.min(r,s.y),a=Math.max(a,s.x+s.width),n=Math.max(n,s.y+s.height)))}}));for(var d=this.find("Shape"),c=!1,g=0;g{Q(this.attrs)}),this._checkVisibility()}_validateAdd(t){const e="Layer"===t.getType(),i="FastLayer"===t.getType();e||i||d.throw("You may only add layers to the stage.")}_checkVisibility(){if(!this.content)return;const t=this.visible()?"":"none";this.content.style.display=t}setContainer(t){if("string"==typeof t){if("."===t.charAt(0)){var e=t.slice(1);t=document.getElementsByClassName(e)[0]}else{var i;i="#"!==t.charAt(0)?t:t.slice(1),t=document.getElementById(i)}if(!t)throw"Can not find container in document with id "+i}return this._setAttr("container",t),this.content&&(this.content.parentElement&&this.content.parentElement.removeChild(this.content),t.appendChild(this.content)),this}shouldDrawHit(){return!0}clear(){var t,e=this.children,i=e.length;for(t=0;t-1&&V.splice(e,1),this}getPointerPosition(){const t=this._pointerPositions[0]||this._changedPointerPositions[0];return t?{x:t.x,y:t.y}:(d.warn("Pointer position is missing and not registered by the stage. Looks like it is outside of the stage container. You can set it manually from event: stage.setPointersPositions(event);"),null)}_getPointerById(t){return this._pointerPositions.find(e=>e.id===t)}getPointersPositions(){return this._pointerPositions}getStage(){return this}getContent(){return this.content}_toKonvaCanvas(t){(t=t||{}).x=t.x||0,t.y=t.y||0,t.width=t.width||this.width(),t.height=t.height||this.height();var e=new k({width:t.width,height:t.height,pixelRatio:t.pixelRatio||1}),i=e.getContext()._context,r=this.children;return(t.x||t.y)&&i.translate(-1*t.x,-1*t.y),r.forEach((function(e){if(e.isVisible()){var r=e._toKonvaCanvas(t);i.drawImage(r._canvas,t.x,t.y,r.getWidth()/r.getPixelRatio(),r.getHeight()/r.getPixelRatio())}})),e}getIntersection(t,e){if(!t)return null;var i,r=this.children;for(i=r.length-1;i>=0;i--){const a=r[i].getIntersection(t,e);if(a)return a}return null}_resizeDOM(){var t=this.width(),e=this.height();this.content&&(this.content.style.width=t+"px",this.content.style.height=e+"px"),this.bufferCanvas.setSize(t,e),this.bufferHitCanvas.setSize(t,e),this.children.forEach(i=>{i.setSize({width:t,height:e}),i.draw()})}add(t,...e){if(arguments.length>1){for(var r=0;r5&&d.warn("The stage has "+a+" layers. Recommended maximum number of layers is 3-5. Adding more layers into the stage may drop the performance. Rethink your tree structure, you can use Konva.Group."),t.setSize({width:this.width(),height:this.height()}),t.draw(),i.isBrowser&&this.content.appendChild(t.canvas._canvas),this}getParent(){return null}getLayer(){return null}hasPointerCapture(t){return Y(t,this)}setPointerCapture(t){X(t,this)}releaseCapture(t){j(t)}getLayers(){return this.children}_bindContentEvents(){if(i.isBrowser)for(var t=0;t{var a=this.getIntersection(r);i.listenClickTap=!0,A.justDragged=!1;a&&a.isListening()&&(i.captureTouchEventsEnabled&&a.setPointerCapture(r.id),this.tapStartShape=a,a._fireAndBubble("touchstart",{evt:t,pointerId:r.id},this),e=!0,a.isListening()&&a.preventDefault()&&t.cancelable&&t.preventDefault())}),e||this._fire("touchstart",{evt:t,target:this,currentTarget:this,pointerId:this._changedPointerPositions[0].id}),this._fire("contentTouchstart",{evt:t})}_touchmove(t){if(this.setPointersPositions(t),!A.isDragging||i.hitOnDragEnabled){var e=!1,r={};this._changedPointerPositions.forEach(i=>{const a=W(i.id)||this.getIntersection(i);a&&a.isListening()&&(r[a._id]||(r[a._id]=!0,a._fireAndBubble("touchmove",{evt:t,pointerId:i.id}),e=!0,a.isListening()&&a.preventDefault()&&t.cancelable&&t.preventDefault()))}),e||this._fire("touchmove",{evt:t,target:this,currentTarget:this,pointerId:this._changedPointerPositions[0].id}),this._fire("contentTouchmove",{evt:t})}A.isDragging&&A.node.preventDefault()&&t.cancelable&&t.preventDefault()}_touchend(t){this.setPointersPositions(t);var e=this.tapEndShape,r=!1;i.inDblClickWindow?(r=!0,clearTimeout(this.dblTimeout)):A.justDragged||(i.inDblClickWindow=!0,clearTimeout(this.dblTimeout)),this.dblTimeout=setTimeout((function(){i.inDblClickWindow=!1}),i.dblClickWindow);var a=!1,n={},s=!1,o=!1;this._changedPointerPositions.forEach(h=>{var l=W(h.id)||this.getIntersection(h);l&&l.releaseCapture(h.id);l&&l.isListening()&&(n[l._id]||(n[l._id]=!0,this.tapEndShape=l,l._fireAndBubble("touchend",{evt:t,pointerId:h.id}),a=!0,i.listenClickTap&&l===this.tapStartShape&&(s=!0,l._fireAndBubble("tap",{evt:t,pointerId:h.id}),r&&e&&e===l&&(o=!0,l._fireAndBubble("dbltap",{evt:t,pointerId:h.id}))),l.isListening()&&l.preventDefault()&&t.cancelable&&t.preventDefault()))}),a||this._fire("touchend",{evt:t,target:this,currentTarget:this,pointerId:this._changedPointerPositions[0].id}),i.listenClickTap&&!s&&(this.tapEndShape=null,this._fire("tap",{evt:t,target:this,currentTarget:this,pointerId:this._changedPointerPositions[0].id})),r&&!o&&this._fire("dbltap",{evt:t,target:this,currentTarget:this,pointerId:this._changedPointerPositions[0].id}),this._fire("contentTouchend",{evt:t}),i.listenClickTap&&(this._fire("contentTap",{evt:t}),r&&this._fire("contentDbltap",{evt:t})),this.preventDefault()&&t.cancelable&&t.preventDefault(),i.listenClickTap=!1}_wheel(t){this.setPointersPositions(t);var e=this.getIntersection(this.getPointerPosition());e&&e.isListening()?e._fireAndBubble("wheel",{evt:t}):this._fire("wheel",{evt:t,target:this,currentTarget:this}),this._fire("contentWheel",{evt:t})}_pointerdown(t){if(!i._pointerEventsEnabled)return;this.setPointersPositions(t);const e=W(t.pointerId)||this.getIntersection(this.getPointerPosition());e&&e._fireAndBubble("pointerdown",H(t))}_pointermove(t){if(!i._pointerEventsEnabled)return;this.setPointersPositions(t);const e=W(t.pointerId)||this.getIntersection(this.getPointerPosition());e&&e._fireAndBubble("pointermove",H(t))}_pointerup(t){if(!i._pointerEventsEnabled)return;this.setPointersPositions(t);const e=W(t.pointerId)||this.getIntersection(this.getPointerPosition());e&&e._fireAndBubble("pointerup",H(t)),j(t.pointerId)}_pointercancel(t){if(!i._pointerEventsEnabled)return;this.setPointersPositions(t);const e=W(t.pointerId)||this.getIntersection(this.getPointerPosition());e&&e._fireAndBubble("pointerup",H(t)),j(t.pointerId)}_lostpointercapture(t){j(t.pointerId)}setPointersPositions(t){var e=this._getContentPosition(),i=null,r=null;void 0!==(t=t||window.event).touches?(this._pointerPositions=[],this._changedPointerPositions=[],Array.prototype.forEach.call(t.touches,t=>{this._pointerPositions.push({id:t.identifier,x:(t.clientX-e.left)/e.scaleX,y:(t.clientY-e.top)/e.scaleY})}),Array.prototype.forEach.call(t.changedTouches||t.touches,t=>{this._changedPointerPositions.push({id:t.identifier,x:(t.clientX-e.left)/e.scaleX,y:(t.clientY-e.top)/e.scaleY})})):(i=(t.clientX-e.left)/e.scaleX,r=(t.clientY-e.top)/e.scaleY,this.pointerPos={x:i,y:r},this._pointerPositions=[{x:i,y:r,id:d._getFirstPointerId(t)}],this._changedPointerPositions=[{x:i,y:r,id:d._getFirstPointerId(t)}])}_setPointerPosition(t){d.warn('Method _setPointerPosition is deprecated. Use "stage.setPointersPositions(event)" instead.'),this.setPointersPositions(t)}_getContentPosition(){if(!this.content||!this.content.getBoundingClientRect)return{top:0,left:0,scaleX:1,scaleY:1};var t=this.content.getBoundingClientRect();return{top:t.top,left:t.left,scaleX:t.width/this.content.clientWidth||1,scaleY:t.height/this.content.clientHeight||1}}_buildDOM(){if(this.bufferCanvas=new k({width:this.width(),height:this.height()}),this.bufferHitCanvas=new T({pixelRatio:1,width:this.width(),height:this.height()}),i.isBrowser){var t=this.container();if(!t)throw"Stage has no container. A container is required.";t.innerHTML="",this.content=document.createElement("div"),this.content.style.position="relative",this.content.style.userSelect="none",this.content.className="konvajs-content",this.content.setAttribute("role","presentation"),t.appendChild(this.content),this._resizeDOM()}}cache(){return d.warn("Cache function is not allowed for stage. You may use cache only for layers, groups and shapes."),this}clearCache(){return this}batchDraw(){return this.getChildren().forEach((function(t){t.batchDraw()})),this}}J.prototype.nodeType="Stage",r(J),y.addGetterSetter(J,"container");let Z;function $(){return Z||(Z=d.createCanvasElement().getContext("2d"),Z)}const tt={};class et extends O{constructor(t){let e;for(super(t);e=d.getRandomColor(),!e||e in tt;);this.colorKey=e,tt[e]=this}getContext(){return this.getLayer().getContext()}getCanvas(){return this.getLayer().getCanvas()}getSceneFunc(){return this.attrs.sceneFunc||this._sceneFunc}getHitFunc(){return this.attrs.hitFunc||this._hitFunc}hasShadow(){return this._getCache("hasShadow",this._hasShadow)}_hasShadow(){return this.shadowEnabled()&&0!==this.shadowOpacity()&&!!(this.shadowColor()||this.shadowBlur()||this.shadowOffsetX()||this.shadowOffsetY())}_getFillPattern(){return this._getCache("patternImage",this.__getFillPattern)}__getFillPattern(){if(this.fillPatternImage()){const t=$().createPattern(this.fillPatternImage(),this.fillPatternRepeat()||"repeat");return t&&t.setTransform&&t.setTransform({a:this.fillPatternScaleX(),b:0,c:0,d:this.fillPatternScaleY(),e:0,f:0}),t}}_getLinearGradient(){return this._getCache("linearGradient",this.__getLinearGradient)}__getLinearGradient(){var t=this.fillLinearGradientColorStops();if(t){for(var e=$(),i=this.fillLinearGradientStartPoint(),r=this.fillLinearGradientEndPoint(),a=e.createLinearGradient(i.x,i.y,r.x,r.y),n=0;nthis.fillEnabled()&&!!(this.fill()||this.fillPatternImage()||this.fillLinearGradientColorStops()||this.fillRadialGradientColorStops()))}hasStroke(){return this._calculate("hasStroke",["strokeEnabled","strokeWidth","stroke","strokeLinearGradientColorStops"],()=>this.strokeEnabled()&&this.strokeWidth()&&!(!this.stroke()&&!this.strokeLinearGradientColorStops()))}hasHitStroke(){const t=this.hitStrokeWidth();return"auto"===t?this.hasStroke():this.strokeEnabled()&&!!t}intersects(t){var e=this.getStage().bufferHitCanvas;return e.getContext().clear(),this.drawHit(e,null,!0),e.context.getImageData(Math.round(t.x),Math.round(t.y),1,1).data[3]>0}destroy(){return O.prototype.destroy.call(this),delete tt[this.colorKey],delete this.colorKey,this}_useBufferCanvas(t){var e;if(!this.getStage())return!1;if(!(null===(e=this.attrs.perfectDrawEnabled)||void 0===e||e))return!1;const i=t||this.hasFill(),r=this.hasStroke(),a=1!==this.getAbsoluteOpacity();if(i&&r&&a)return!0;const n=this.hasShadow(),s=this.shadowForStrokeEnabled();return!!(i&&r&&n&&s)}setStrokeHitEnabled(t){d.warn("strokeHitEnabled property is deprecated. Please use hitStrokeWidth instead."),t?this.hitStrokeWidth("auto"):this.hitStrokeWidth(0)}getStrokeHitEnabled(){return 0!==this.hitStrokeWidth()}getSelfRect(){var t=this.size();return{x:this._centroid?-t.width/2:0,y:this._centroid?-t.height/2:0,width:t.width,height:t.height}}getClientRect(t={}){const e=t.skipTransform,i=t.relativeTo,r=this.getSelfRect(),a=!t.skipStroke&&this.hasStroke()&&this.strokeWidth()||0,n=r.width+a,s=r.height+a,o=!t.skipShadow&&this.hasShadow(),h=o?this.shadowOffsetX():0,l=o?this.shadowOffsetY():0,d=n+Math.abs(h),c=s+Math.abs(l),g=o&&this.shadowBlur()||0,u=d+2*g,f=c+2*g;let p=0;Math.round(a/2)!==a/2&&(p=1);const v={width:u+p,height:f+p,x:-Math.round(a/2+g)+Math.min(h,0)+r.x,y:-Math.round(a/2+g)+Math.min(l,0)+r.y};return e?v:this._transformedRect(v,i)}drawScene(t,e){var i,r,a=this.getLayer(),n=t||a.getCanvas(),s=n.getContext(),o=this._getCanvasCache(),h=this.getSceneFunc(),l=this.hasShadow(),d=n.isCache,c=n.isCache,g=e===this;if(!this.isVisible()&&!d)return this;if(o){s.save();var u=this.getAbsoluteTransform(e).getMatrix();return s.transform(u[0],u[1],u[2],u[3],u[4],u[5]),this._drawCachedSceneCanvas(s),s.restore(),this}if(!h)return this;if(s.save(),this._useBufferCanvas()&&!c){(r=(i=this.getStage().bufferCanvas).getContext()).clear(),r.save(),r._applyLineJoin(this);var f=this.getAbsoluteTransform(e).getMatrix();r.transform(f[0],f[1],f[2],f[3],f[4],f[5]),h.call(this,r,this),r.restore();var p=i.pixelRatio;l&&s._applyShadow(this),s._applyOpacity(this),s._applyGlobalCompositeOperation(this),s.drawImage(i._canvas,0,0,i.width/p,i.height/p)}else{if(s._applyLineJoin(this),!g){f=this.getAbsoluteTransform(e).getMatrix();s.transform(f[0],f[1],f[2],f[3],f[4],f[5]),s._applyOpacity(this),s._applyGlobalCompositeOperation(this)}l&&s._applyShadow(this),h.call(this,s,this)}return s.restore(),this}drawHit(t,e,i=!1){if(!this.shouldDrawHit(e,i))return this;var r=this.getLayer(),a=t||r.hitCanvas,n=a&&a.getContext(),s=this.hitFunc()||this.sceneFunc(),o=this._getCanvasCache(),h=o&&o.hit;if(this.colorKey||d.warn("Looks like your canvas has a destroyed shape in it. Do not reuse shape after you destroyed it. If you want to reuse shape you should call remove() instead of destroy()"),h){n.save();var l=this.getAbsoluteTransform(e).getMatrix();return n.transform(l[0],l[1],l[2],l[3],l[4],l[5]),this._drawCachedHitCanvas(n),n.restore(),this}if(!s)return this;n.save(),n._applyLineJoin(this);if(!(this===e)){var c=this.getAbsoluteTransform(e).getMatrix();n.transform(c[0],c[1],c[2],c[3],c[4],c[5])}return s.call(this,n,this),n.restore(),this}drawHitFromCache(t=0){var e,i,r,a,n,s=this._getCanvasCache(),o=this._getCachedSceneCanvas(),h=s.hit,l=h.getContext(),c=h.getWidth(),g=h.getHeight();l.clear(),l.drawImage(o._canvas,0,0,c,g);try{for(r=(i=(e=l.getImageData(0,0,c,g)).data).length,a=d._hexToRgb(this.colorKey),n=0;nt?(i[n]=a.r,i[n+1]=a.g,i[n+2]=a.b,i[n+3]=255):i[n+3]=0;l.putImageData(e,0,0)}catch(t){d.error("Unable to draw hit graph from cached scene canvas. "+t.message)}return this}hasPointerCapture(t){return Y(t,this)}setPointerCapture(t){X(t,this)}releaseCapture(t){j(t)}}et.prototype._fillFunc=function(t){t.fill()},et.prototype._strokeFunc=function(t){t.stroke()},et.prototype._fillFuncHit=function(t){t.fill()},et.prototype._strokeFuncHit=function(t){t.stroke()},et.prototype._centroid=!1,et.prototype.nodeType="Shape",r(et),et.prototype.eventListeners={},et.prototype.on.call(et.prototype,"shadowColorChange.konva shadowBlurChange.konva shadowOffsetChange.konva shadowOpacityChange.konva shadowEnabledChange.konva",(function(){this._clearCache("hasShadow")})),et.prototype.on.call(et.prototype,"shadowColorChange.konva shadowOpacityChange.konva shadowEnabledChange.konva",(function(){this._clearCache("shadowRGBA")})),et.prototype.on.call(et.prototype,"fillPriorityChange.konva fillPatternImageChange.konva fillPatternRepeatChange.konva fillPatternScaleXChange.konva fillPatternScaleYChange.konva",(function(){this._clearCache("patternImage")})),et.prototype.on.call(et.prototype,"fillPriorityChange.konva fillLinearGradientColorStopsChange.konva fillLinearGradientStartPointXChange.konva fillLinearGradientStartPointYChange.konva fillLinearGradientEndPointXChange.konva fillLinearGradientEndPointYChange.konva",(function(){this._clearCache("linearGradient")})),et.prototype.on.call(et.prototype,"fillPriorityChange.konva fillRadialGradientColorStopsChange.konva fillRadialGradientStartPointXChange.konva fillRadialGradientStartPointYChange.konva fillRadialGradientEndPointXChange.konva fillRadialGradientEndPointYChange.konva fillRadialGradientStartRadiusChange.konva fillRadialGradientEndRadiusChange.konva",(function(){this._clearCache("radialGradient")})),y.addGetterSetter(et,"stroke",void 0,m()),y.addGetterSetter(et,"strokeWidth",2,u()),y.addGetterSetter(et,"fillAfterStrokeEnabled",!1),y.addGetterSetter(et,"hitStrokeWidth","auto",p()),y.addGetterSetter(et,"strokeHitEnabled",!0,_()),y.addGetterSetter(et,"perfectDrawEnabled",!0,_()),y.addGetterSetter(et,"shadowForStrokeEnabled",!0,_()),y.addGetterSetter(et,"lineJoin"),y.addGetterSetter(et,"lineCap"),y.addGetterSetter(et,"sceneFunc"),y.addGetterSetter(et,"hitFunc"),y.addGetterSetter(et,"dash"),y.addGetterSetter(et,"dashOffset",0,u()),y.addGetterSetter(et,"shadowColor",void 0,v()),y.addGetterSetter(et,"shadowBlur",0,u()),y.addGetterSetter(et,"shadowOpacity",1,u()),y.addComponentsGetterSetter(et,"shadowOffset",["x","y"]),y.addGetterSetter(et,"shadowOffsetX",0,u()),y.addGetterSetter(et,"shadowOffsetY",0,u()),y.addGetterSetter(et,"fillPatternImage"),y.addGetterSetter(et,"fill",void 0,m()),y.addGetterSetter(et,"fillPatternX",0,u()),y.addGetterSetter(et,"fillPatternY",0,u()),y.addGetterSetter(et,"fillLinearGradientColorStops"),y.addGetterSetter(et,"strokeLinearGradientColorStops"),y.addGetterSetter(et,"fillRadialGradientStartRadius",0),y.addGetterSetter(et,"fillRadialGradientEndRadius",0),y.addGetterSetter(et,"fillRadialGradientColorStops"),y.addGetterSetter(et,"fillPatternRepeat","repeat"),y.addGetterSetter(et,"fillEnabled",!0),y.addGetterSetter(et,"strokeEnabled",!0),y.addGetterSetter(et,"shadowEnabled",!0),y.addGetterSetter(et,"dashEnabled",!0),y.addGetterSetter(et,"strokeScaleEnabled",!0),y.addGetterSetter(et,"fillPriority","color"),y.addComponentsGetterSetter(et,"fillPatternOffset",["x","y"]),y.addGetterSetter(et,"fillPatternOffsetX",0,u()),y.addGetterSetter(et,"fillPatternOffsetY",0,u()),y.addComponentsGetterSetter(et,"fillPatternScale",["x","y"]),y.addGetterSetter(et,"fillPatternScaleX",1,u()),y.addGetterSetter(et,"fillPatternScaleY",1,u()),y.addComponentsGetterSetter(et,"fillLinearGradientStartPoint",["x","y"]),y.addComponentsGetterSetter(et,"strokeLinearGradientStartPoint",["x","y"]),y.addGetterSetter(et,"fillLinearGradientStartPointX",0),y.addGetterSetter(et,"strokeLinearGradientStartPointX",0),y.addGetterSetter(et,"fillLinearGradientStartPointY",0),y.addGetterSetter(et,"strokeLinearGradientStartPointY",0),y.addComponentsGetterSetter(et,"fillLinearGradientEndPoint",["x","y"]),y.addComponentsGetterSetter(et,"strokeLinearGradientEndPoint",["x","y"]),y.addGetterSetter(et,"fillLinearGradientEndPointX",0),y.addGetterSetter(et,"strokeLinearGradientEndPointX",0),y.addGetterSetter(et,"fillLinearGradientEndPointY",0),y.addGetterSetter(et,"strokeLinearGradientEndPointY",0),y.addComponentsGetterSetter(et,"fillRadialGradientStartPoint",["x","y"]),y.addGetterSetter(et,"fillRadialGradientStartPointX",0),y.addGetterSetter(et,"fillRadialGradientStartPointY",0),y.addComponentsGetterSetter(et,"fillRadialGradientEndPoint",["x","y"]),y.addGetterSetter(et,"fillRadialGradientEndPointX",0),y.addGetterSetter(et,"fillRadialGradientEndPointY",0),y.addGetterSetter(et,"fillPatternRotation",0),y.backCompat(et,{dashArray:"dash",getDashArray:"getDash",setDashArray:"getDash",drawFunc:"sceneFunc",getDrawFunc:"getSceneFunc",setDrawFunc:"setSceneFunc",drawHitFunc:"hitFunc",getDrawHitFunc:"getHitFunc",setDrawHitFunc:"setHitFunc"});var it=[{x:0,y:0},{x:-1,y:-1},{x:1,y:-1},{x:1,y:1},{x:-1,y:1}],rt=it.length;class at extends B{constructor(t){super(t),this.canvas=new k,this.hitCanvas=new T({pixelRatio:1}),this._waitingForDraw=!1,this.on("visibleChange.konva",this._checkVisibility),this._checkVisibility(),this.on("imageSmoothingEnabledChange.konva",this._setSmoothEnabled),this._setSmoothEnabled()}createPNGStream(){return this.canvas._canvas.createPNGStream()}getCanvas(){return this.canvas}getNativeCanvasElement(){return this.canvas._canvas}getHitCanvas(){return this.hitCanvas}getContext(){return this.getCanvas().getContext()}clear(t){return this.getContext().clear(t),this.getHitCanvas().getContext().clear(t),this}setZIndex(t){super.setZIndex(t);var e=this.getStage();return e&&e.content&&(e.content.removeChild(this.getNativeCanvasElement()),t{this.draw(),this._waitingForDraw=!1})),this}getIntersection(t,e){if(!this.isListening()||!this.isVisible())return null;for(var i=1,r=!1;;){for(let a=0;a0?{antialiased:!0}:{}}drawScene(t,e){var i=this.getLayer(),r=t||i&&i.getCanvas();return this._fire("beforeDraw",{node:this}),this.clearBeforeDraw()&&r.getContext().clear(),B.prototype.drawScene.call(this,r,e),this._fire("draw",{node:this}),this}drawHit(t,e){var i=this.getLayer(),r=t||i&&i.hitCanvas;return i&&i.clearBeforeDraw()&&i.getHitCanvas().getContext().clear(),B.prototype.drawHit.call(this,r,e),this}enableHitGraph(){return this.hitGraphEnabled(!0),this}disableHitGraph(){return this.hitGraphEnabled(!1),this}setHitGraphEnabled(t){d.warn("hitGraphEnabled method is deprecated. Please use layer.listening() instead."),this.listening(t)}getHitGraphEnabled(t){return d.warn("hitGraphEnabled method is deprecated. Please use layer.listening() instead."),this.listening()}toggleHitCanvas(){if(this.parent&&this.parent.content){var t=this.parent;!!this.hitCanvas._canvas.parentNode?t.content.removeChild(this.hitCanvas._canvas):t.content.appendChild(this.hitCanvas._canvas)}}}at.prototype.nodeType="Layer",r(at),y.addGetterSetter(at,"imageSmoothingEnabled",!0),y.addGetterSetter(at,"clearBeforeDraw",!0),y.addGetterSetter(at,"hitGraphEnabled",!0,_());class nt extends at{constructor(t){super(t),this.listening(!1),d.warn('Konva.Fast layer is deprecated. Please use "new Konva.Layer({ listening: false })" instead.')}}nt.prototype.nodeType="FastLayer",r(nt);class st extends B{_validateAdd(t){var e=t.getType();"Group"!==e&&"Shape"!==e&&d.throw("You may only add groups and shapes to groups.")}}st.prototype.nodeType="Group",r(st);var ot=e.performance&&e.performance.now?function(){return e.performance.now()}:function(){return(new Date).getTime()};class ht{constructor(t,e){this.id=ht.animIdCounter++,this.frame={time:0,timeDiff:0,lastTime:ot(),frameRate:0},this.func=t,this.setLayers(e)}setLayers(t){var e=[];return e=t?t.length>0?t:[t]:[],this.layers=e,this}getLayers(){return this.layers}addLayer(t){var e,i=this.layers,r=i.length;for(e=0;ethis.duration?this.yoyo?(this._time=this.duration,this.reverse()):this.finish():t<0?this.yoyo?(this._time=0,this.play()):this.reset():(this._time=t,this.update())}getTime(){return this._time}setPosition(t){this.prevPos=this._pos,this.propFunc(t),this._pos=t}getPosition(t){return void 0===t&&(t=this._time),this.func(t,this.begin,this._change,this.duration)}play(){this.state=2,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onPlay")}reverse(){this.state=3,this._time=this.duration-this._time,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onReverse")}seek(t){this.pause(),this._time=t,this.update(),this.fire("onSeek")}reset(){this.pause(),this._time=0,this.update(),this.fire("onReset")}finish(){this.pause(),this._time=this.duration,this.update(),this.fire("onFinish")}update(){this.setPosition(this.getPosition(this._time)),this.fire("onUpdate")}onEnterFrame(){var t=this.getTimer()-this._startTime;2===this.state?this.setTime(t):3===this.state&&this.setTime(this.duration-t)}pause(){this.state=1,this.fire("onPause")}getTimer(){return(new Date).getTime()}}class ut{constructor(t){var e,r,a=this,n=t.node,s=n._id,o=t.easing||ft.Linear,h=!!t.yoyo;e=void 0===t.duration?.3:0===t.duration?.001:t.duration,this.node=n,this._id=dt++;var l=n.getLayer()||(n instanceof i.Stage?n.getLayers():null);for(r in l||d.error("Tween constructor have `node` that is not in a layer. Please add node into layer first."),this.anim=new ht((function(){a.tween.onEnterFrame()}),l),this.tween=new gt(r,(function(t){a._tweenFunc(t)}),o,0,1,1e3*e,h),this._addListeners(),ut.attrs[s]||(ut.attrs[s]={}),ut.attrs[s][this._id]||(ut.attrs[s][this._id]={}),ut.tweens[s]||(ut.tweens[s]={}),t)void 0===lt[r]&&this._addAttr(r,t[r]);this.reset(),this.onFinish=t.onFinish,this.onReset=t.onReset,this.onUpdate=t.onUpdate}_addAttr(t,e){var i,r,a,n,s,o,h,l,c=this.node,g=c._id;if((a=ut.tweens[g][t])&&delete ut.attrs[g][a][t],i=c.getAttr(t),d._isArray(e))if(r=[],s=Math.max(e.length,i.length),"points"===t&&e.length!==i.length&&(e.length>i.length?(h=i,i=d._prepareArrayForTween(i,e,c.closed())):(o=e,e=d._prepareArrayForTween(e,i,c.closed()))),0===t.indexOf("fill"))for(n=0;n{this.anim.start()},this.tween.onReverse=()=>{this.anim.start()},this.tween.onPause=()=>{this.anim.stop()},this.tween.onFinish=()=>{var t=this.node,e=ut.attrs[t._id][this._id];e.points&&e.points.trueEnd&&t.setAttr("points",e.points.trueEnd),this.onFinish&&this.onFinish.call(this)},this.tween.onReset=()=>{var t=this.node,e=ut.attrs[t._id][this._id];e.points&&e.points.trueStart&&t.points(e.points.trueStart),this.onReset&&this.onReset()},this.tween.onUpdate=()=>{this.onUpdate&&this.onUpdate.call(this)}}play(){return this.tween.play(),this}reverse(){return this.tween.reverse(),this}reset(){return this.tween.reset(),this}seek(t){return this.tween.seek(1e3*t),this}pause(){return this.tween.pause(),this}finish(){return this.tween.finish(),this}destroy(){var t,e=this.node._id,i=this._id,r=ut.tweens[e];for(t in this.pause(),r)delete ut.tweens[e][t];delete ut.attrs[e][i]}}ut.attrs={},ut.tweens={},O.prototype.to=function(t){var e=t.onFinish;t.node=this,t.onFinish=function(){this.destroy(),e&&e()},new ut(t).play()};const ft={BackEaseIn(t,e,i,r){var a=1.70158;return i*(t/=r)*t*((a+1)*t-a)+e},BackEaseOut(t,e,i,r){var a=1.70158;return i*((t=t/r-1)*t*((a+1)*t+a)+1)+e},BackEaseInOut(t,e,i,r){var a=1.70158;return(t/=r/2)<1?i/2*(t*t*((1+(a*=1.525))*t-a))+e:i/2*((t-=2)*t*((1+(a*=1.525))*t+a)+2)+e},ElasticEaseIn(t,e,i,r,a,n){var s=0;return 0===t?e:1==(t/=r)?e+i:(n||(n=.3*r),!a||a(t/=r)<1/2.75?i*(7.5625*t*t)+e:t<2/2.75?i*(7.5625*(t-=1.5/2.75)*t+.75)+e:t<2.5/2.75?i*(7.5625*(t-=2.25/2.75)*t+.9375)+e:i*(7.5625*(t-=2.625/2.75)*t+.984375)+e,BounceEaseIn:(t,e,i,r)=>i-ft.BounceEaseOut(r-t,0,i,r)+e,BounceEaseInOut:(t,e,i,r)=>ti*(t/=r)*t+e,EaseOut:(t,e,i,r)=>-i*(t/=r)*(t-2)+e,EaseInOut:(t,e,i,r)=>(t/=r/2)<1?i/2*t*t+e:-i/2*(--t*(t-2)-1)+e,StrongEaseIn:(t,e,i,r)=>i*(t/=r)*t*t*t*t+e,StrongEaseOut:(t,e,i,r)=>i*((t=t/r-1)*t*t*t*t+1)+e,StrongEaseInOut:(t,e,i,r)=>(t/=r/2)<1?i/2*t*t*t*t*t+e:i/2*((t-=2)*t*t*t*t+2)+e,Linear:(t,e,i,r)=>i*t/r+e},pt=d._assign(i,{Util:d,Transform:a,Node:O,ids:M,names:G,Container:B,Stage:J,stages:V,Layer:at,FastLayer:nt,Group:st,DD:A,Shape:et,shapes:tt,Animation:ht,Tween:ut,Easings:ft,Context:b,Canvas:P});class vt extends et{_sceneFunc(t){var e=i.getAngle(this.angle()),r=this.clockwise();t.beginPath(),t.arc(0,0,this.outerRadius(),0,e,r),t.arc(0,0,this.innerRadius(),e,0,!r),t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.outerRadius()}getHeight(){return 2*this.outerRadius()}setWidth(t){this.outerRadius(t/2)}setHeight(t){this.outerRadius(t/2)}}vt.prototype._centroid=!0,vt.prototype.className="Arc",vt.prototype._attrsAffectingSize=["innerRadius","outerRadius"],r(vt),y.addGetterSetter(vt,"innerRadius",0,u()),y.addGetterSetter(vt,"outerRadius",0,u()),y.addGetterSetter(vt,"angle",0,u()),y.addGetterSetter(vt,"clockwise",!1,_());class mt extends et{constructor(t){super(t),this.on("pointsChange.konva tensionChange.konva closedChange.konva bezierChange.konva",(function(){this._clearCache("tensionPoints")}))}_sceneFunc(t){var e,i,r,a=this.points(),n=a.length,s=this.tension(),o=this.closed(),h=this.bezier();if(n){if(t.beginPath(),t.moveTo(a[0],a[1]),0!==s&&n>4){for(i=(e=this.getTensionPoints()).length,r=o?0:4,o||t.quadraticCurveTo(e[0],e[1],e[2],e[3]);r4;a&&(r=this.getTensionPoints());var n,s,o=i.length;a?(n=i[o-2]-(r[r.length-2]+r[r.length-4])/2,s=i[o-1]-(r[r.length-1]+r[r.length-3])/2):(n=i[o-2]-i[o-4],s=i[o-1]-i[o-3]);var h=(Math.atan2(s,n)+e)%e,l=this.pointerLength(),d=this.pointerWidth();this.pointerAtEnding()&&(t.save(),t.beginPath(),t.translate(i[o-2],i[o-1]),t.rotate(h),t.moveTo(0,0),t.lineTo(-l,d/2),t.lineTo(-l,-d/2),t.closePath(),t.restore()),this.pointerAtBeginning()&&(t.save(),t.translate(i[0],i[1]),a?(n=(r[0]+r[2])/2-i[0],s=(r[1]+r[3])/2-i[1]):(n=i[2]-i[0],s=i[3]-i[1]),t.rotate((Math.atan2(-s,-n)+e)%e),t.moveTo(0,0),t.lineTo(-l,d/2),t.lineTo(-l,-d/2),t.closePath(),t.restore());var c=this.dashEnabled();c&&(this.attrs.dashEnabled=!1,t.setLineDash([])),t.fillStrokeShape(this),c&&(this.attrs.dashEnabled=!0)}getSelfRect(){const t=super.getSelfRect(),e=this.pointerWidth()/2;return{x:t.x-e,y:t.y-e,width:t.width+2*e,height:t.height+2*e}}}_t.prototype.className="Arrow",r(_t),y.addGetterSetter(_t,"pointerLength",10,u()),y.addGetterSetter(_t,"pointerWidth",10,u()),y.addGetterSetter(_t,"pointerAtBeginning",!1),y.addGetterSetter(_t,"pointerAtEnding",!0);class yt extends et{_sceneFunc(t){t.beginPath(),t.arc(0,0,this.attrs.radius||0,0,2*Math.PI,!1),t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.radius()}getHeight(){return 2*this.radius()}setWidth(t){this.radius()!==t/2&&this.radius(t/2)}setHeight(t){this.radius()!==t/2&&this.radius(t/2)}}yt.prototype._centroid=!0,yt.prototype.className="Circle",yt.prototype._attrsAffectingSize=["radius"],r(yt),y.addGetterSetter(yt,"radius",0,u());class xt extends et{_sceneFunc(t){var e=this.radiusX(),i=this.radiusY();t.beginPath(),t.save(),e!==i&&t.scale(1,i/e),t.arc(0,0,e,0,2*Math.PI,!1),t.restore(),t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.radiusX()}getHeight(){return 2*this.radiusY()}setWidth(t){this.radiusX(t/2)}setHeight(t){this.radiusY(t/2)}}xt.prototype.className="Ellipse",xt.prototype._centroid=!0,xt.prototype._attrsAffectingSize=["radiusX","radiusY"],r(xt),y.addComponentsGetterSetter(xt,"radius",["x","y"]),y.addGetterSetter(xt,"radiusX",0,u()),y.addGetterSetter(xt,"radiusY",0,u());class bt extends et{constructor(t){super(t),this.on("imageChange.konva",()=>{this._setImageLoad()}),this._setImageLoad()}_setImageLoad(){const t=this.image();t&&t.addEventListener&&t.addEventListener("load",()=>{this._requestDraw()})}_useBufferCanvas(){return super._useBufferCanvas(!0)}_sceneFunc(t){const e=this.getWidth(),i=this.getHeight(),r=this.attrs.image;let a;if(r){const t=this.attrs.cropWidth,n=this.attrs.cropHeight;a=t&&n?[r,this.cropX(),this.cropY(),t,n,0,0,e,i]:[r,0,0,e,i]}(this.hasFill()||this.hasStroke())&&(t.beginPath(),t.rect(0,0,e,i),t.closePath(),t.fillStrokeShape(this)),r&&t.drawImage.apply(t,a)}_hitFunc(t){var e=this.width(),i=this.height();t.beginPath(),t.rect(0,0,e,i),t.closePath(),t.fillStrokeShape(this)}getWidth(){var t,e;return null!==(t=this.attrs.width)&&void 0!==t?t:null===(e=this.image())||void 0===e?void 0:e.width}getHeight(){var t,e;return null!==(t=this.attrs.height)&&void 0!==t?t:null===(e=this.image())||void 0===e?void 0:e.height}static fromURL(t,e){var i=d.createImageElement();i.onload=function(){var t=new bt({image:i});e(t)},i.crossOrigin="Anonymous",i.src=t}}bt.prototype.className="Image",r(bt),y.addGetterSetter(bt,"image"),y.addComponentsGetterSetter(bt,"crop",["x","y","width","height"]),y.addGetterSetter(bt,"cropX",0,u()),y.addGetterSetter(bt,"cropY",0,u()),y.addGetterSetter(bt,"cropWidth",0,u()),y.addGetterSetter(bt,"cropHeight",0,u());var St=["fontFamily","fontSize","fontStyle","padding","lineHeight","text","width","height"],wt=St.length;class Ct extends st{constructor(t){super(t),this.on("add.konva",(function(t){this._addListeners(t.child),this._sync()}))}getText(){return this.find("Text")[0]}getTag(){return this.find("Tag")[0]}_addListeners(t){var e,i=this,r=function(){i._sync()};for(e=0;el?h:l,p=h>l?1:h/l,v=h>l?l/h:1;t.translate(s,o),t.rotate(g),t.scale(p,v),t.arc(0,0,f,d,d+c,1-u),t.scale(1/p,1/v),t.rotate(-g),t.translate(-s,-o);break;case"z":i=!0,t.closePath()}}i||this.hasFill()?t.fillStrokeShape(this):t.strokeShape(this)}getSelfRect(){var t=[];this.dataArray.forEach((function(e){if("A"===e.command){var i=e.points[4],r=e.points[5],a=e.points[4]+r,n=Math.PI/180;if(Math.abs(i-a)a;r-=n){const i=kt.getPointOnEllipticalArc(e.points[0],e.points[1],e.points[2],e.points[3],r,0);t.push(i.x,i.y)}else for(let r=i+n;rthis.dataArray[i].pathLength;)t-=this.dataArray[i].pathLength,++i;if(i===r)return{x:(e=this.dataArray[i-1].points.slice(-2))[0],y:e[1]};if(t<.01)return{x:(e=this.dataArray[i].points.slice(0,2))[0],y:e[1]};var a=this.dataArray[i],n=a.points;switch(a.command){case"L":return kt.getPointOnLine(t,a.start.x,a.start.y,n[0],n[1]);case"C":return kt.getPointOnCubicBezier(t/a.pathLength,a.start.x,a.start.y,n[0],n[1],n[2],n[3],n[4],n[5]);case"Q":return kt.getPointOnQuadraticBezier(t/a.pathLength,a.start.x,a.start.y,n[0],n[1],n[2],n[3]);case"A":var s=n[0],o=n[1],h=n[2],l=n[3],d=n[4],c=n[5],g=n[6];return d+=c*t/a.pathLength,kt.getPointOnEllipticalArc(s,o,h,l,d,g)}return null}static getLineLength(t,e,i,r){return Math.sqrt((i-t)*(i-t)+(r-e)*(r-e))}static getPointOnLine(t,e,i,r,a,n,s){void 0===n&&(n=e),void 0===s&&(s=i);var o=(a-i)/(r-e+1e-8),h=Math.sqrt(t*t/(1+o*o));r0&&!isNaN(u[0]);){var m,_,y,x,b,S,w,C,P,k,T=null,A=[],M=h,G=l;switch(g){case"l":h+=u.shift(),l+=u.shift(),T="L",A.push(h,l);break;case"L":h=u.shift(),l=u.shift(),A.push(h,l);break;case"m":var E=u.shift(),R=u.shift();if(h+=E,l+=R,T="M",s.length>2&&"z"===s[s.length-1].command)for(var L=s.length-2;L>=0;L--)if("M"===s[L].command){h=s[L].points[0]+E,l=s[L].points[1]+R;break}A.push(h,l),g="l";break;case"M":h=u.shift(),l=u.shift(),T="M",A.push(h,l),g="L";break;case"h":h+=u.shift(),T="L",A.push(h,l);break;case"H":h=u.shift(),T="L",A.push(h,l);break;case"v":l+=u.shift(),T="L",A.push(h,l);break;case"V":l=u.shift(),T="L",A.push(h,l);break;case"C":A.push(u.shift(),u.shift(),u.shift(),u.shift()),h=u.shift(),l=u.shift(),A.push(h,l);break;case"c":A.push(h+u.shift(),l+u.shift(),h+u.shift(),l+u.shift()),h+=u.shift(),l+=u.shift(),T="C",A.push(h,l);break;case"S":_=h,y=l,"C"===(m=s[s.length-1]).command&&(_=h+(h-m.points[2]),y=l+(l-m.points[3])),A.push(_,y,u.shift(),u.shift()),h=u.shift(),l=u.shift(),T="C",A.push(h,l);break;case"s":_=h,y=l,"C"===(m=s[s.length-1]).command&&(_=h+(h-m.points[2]),y=l+(l-m.points[3])),A.push(_,y,h+u.shift(),l+u.shift()),h+=u.shift(),l+=u.shift(),T="C",A.push(h,l);break;case"Q":A.push(u.shift(),u.shift()),h=u.shift(),l=u.shift(),A.push(h,l);break;case"q":A.push(h+u.shift(),l+u.shift()),h+=u.shift(),l+=u.shift(),T="Q",A.push(h,l);break;case"T":_=h,y=l,"Q"===(m=s[s.length-1]).command&&(_=h+(h-m.points[0]),y=l+(l-m.points[1])),h=u.shift(),l=u.shift(),T="Q",A.push(_,y,h,l);break;case"t":_=h,y=l,"Q"===(m=s[s.length-1]).command&&(_=h+(h-m.points[0]),y=l+(l-m.points[1])),h+=u.shift(),l+=u.shift(),T="Q",A.push(_,y,h,l);break;case"A":x=u.shift(),b=u.shift(),S=u.shift(),w=u.shift(),C=u.shift(),P=h,k=l,h=u.shift(),l=u.shift(),T="A",A=this.convertEndpointToCenterParameterization(P,k,h,l,w,C,x,b,S);break;case"a":x=u.shift(),b=u.shift(),S=u.shift(),w=u.shift(),C=u.shift(),P=h,k=l,h+=u.shift(),l+=u.shift(),T="A",A=this.convertEndpointToCenterParameterization(P,k,h,l,w,C,x,b,S)}s.push({command:T||g,points:A,start:{x:M,y:G},pathLength:this.calcLength(M,G,T||g,A)})}"z"!==g&&"Z"!==g||s.push({command:"z",points:[],start:void 0,pathLength:0})}return s}static calcLength(t,e,i,r){var a,n,s,o,h=kt;switch(i){case"L":return h.getLineLength(t,e,r[0],r[1]);case"C":for(a=0,n=h.getPointOnCubicBezier(0,t,e,r[0],r[1],r[2],r[3],r[4],r[5]),o=.01;o<=1;o+=.01)s=h.getPointOnCubicBezier(o,t,e,r[0],r[1],r[2],r[3],r[4],r[5]),a+=h.getLineLength(n.x,n.y,s.x,s.y),n=s;return a;case"Q":for(a=0,n=h.getPointOnQuadraticBezier(0,t,e,r[0],r[1],r[2],r[3]),o=.01;o<=1;o+=.01)s=h.getPointOnQuadraticBezier(o,t,e,r[0],r[1],r[2],r[3]),a+=h.getLineLength(n.x,n.y,s.x,s.y),n=s;return a;case"A":a=0;var l=r[4],d=r[5],c=r[4]+d,g=Math.PI/180;if(Math.abs(l-c)c;o-=g)s=h.getPointOnEllipticalArc(r[0],r[1],r[2],r[3],o,0),a+=h.getLineLength(n.x,n.y,s.x,s.y),n=s;else for(o=l+g;o1&&(s*=Math.sqrt(g),o*=Math.sqrt(g));var u=Math.sqrt((s*s*(o*o)-s*s*(c*c)-o*o*(d*d))/(s*s*(c*c)+o*o*(d*d)));a===n&&(u*=-1),isNaN(u)&&(u=0);var f=u*s*c/o,p=u*-o*d/s,v=(t+i)/2+Math.cos(l)*f-Math.sin(l)*p,m=(e+r)/2+Math.sin(l)*f+Math.cos(l)*p,_=function(t){return Math.sqrt(t[0]*t[0]+t[1]*t[1])},y=function(t,e){return(t[0]*e[0]+t[1]*e[1])/(_(t)*_(e))},x=function(t,e){return(t[0]*e[1]=1&&(C=0),0===n&&C>0&&(C-=2*Math.PI),1===n&&C<0&&(C+=2*Math.PI),[v,m,s,o,b,C,l,n]}}kt.prototype.className="Path",kt.prototype._attrsAffectingSize=["data"],r(kt),y.addGetterSetter(kt,"data");class Tt extends et{_sceneFunc(t){var e=this.cornerRadius(),i=this.width(),r=this.height();if(t.beginPath(),e){let a=0,n=0,s=0,o=0;"number"==typeof e?a=n=s=o=Math.min(e,i/2,r/2):(a=Math.min(e[0]||0,i/2,r/2),n=Math.min(e[1]||0,i/2,r/2),o=Math.min(e[2]||0,i/2,r/2),s=Math.min(e[3]||0,i/2,r/2)),t.moveTo(a,0),t.lineTo(i-n,0),t.arc(i-n,n,n,3*Math.PI/2,0,!1),t.lineTo(i,r-o),t.arc(i-o,r-o,o,0,Math.PI/2,!1),t.lineTo(s,r),t.arc(s,r-s,s,Math.PI/2,Math.PI,!1),t.lineTo(0,a),t.arc(a,a,a,Math.PI,3*Math.PI/2,!1)}else t.rect(0,0,i,r);t.closePath(),t.fillStrokeShape(this)}}Tt.prototype.className="Rect",r(Tt),y.addGetterSetter(Tt,"cornerRadius",0,f(4));class At extends et{_sceneFunc(t){const e=this._getPoints();t.beginPath(),t.moveTo(e[0].x,e[0].y);for(var i=1;i{e=Math.min(e,t.x),i=Math.max(i,t.x),r=Math.min(r,t.y),a=Math.max(a,t.y)}),{x:e,y:r,width:i-e,height:a-r}}getWidth(){return 2*this.radius()}getHeight(){return 2*this.radius()}setWidth(t){this.radius(t/2)}setHeight(t){this.radius(t/2)}}At.prototype.className="RegularPolygon",At.prototype._centroid=!0,At.prototype._attrsAffectingSize=["radius"],r(At),y.addGetterSetter(At,"radius",0,u()),y.addGetterSetter(At,"sides",0,u());var Mt=2*Math.PI;class Gt extends et{_sceneFunc(t){t.beginPath(),t.arc(0,0,this.innerRadius(),0,Mt,!1),t.moveTo(this.outerRadius(),0),t.arc(0,0,this.outerRadius(),Mt,0,!0),t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.outerRadius()}getHeight(){return 2*this.outerRadius()}setWidth(t){this.outerRadius(t/2)}setHeight(t){this.outerRadius(t/2)}}Gt.prototype.className="Ring",Gt.prototype._centroid=!0,Gt.prototype._attrsAffectingSize=["innerRadius","outerRadius"],r(Gt),y.addGetterSetter(Gt,"innerRadius",0,u()),y.addGetterSetter(Gt,"outerRadius",0,u());class Et extends et{constructor(t){super(t),this._updated=!0,this.anim=new ht(()=>{var t=this._updated;return this._updated=!1,t}),this.on("animationChange.konva",(function(){this.frameIndex(0)})),this.on("frameIndexChange.konva",(function(){this._updated=!0})),this.on("frameRateChange.konva",(function(){this.anim.isRunning()&&(clearInterval(this.interval),this._setInterval())}))}_sceneFunc(t){var e=this.animation(),i=this.frameIndex(),r=4*i,a=this.animations()[e],n=this.frameOffsets(),s=a[r+0],o=a[r+1],h=a[r+2],l=a[r+3],d=this.image();if((this.hasFill()||this.hasStroke())&&(t.beginPath(),t.rect(0,0,h,l),t.closePath(),t.fillStrokeShape(this)),d)if(n){var c=n[e],g=2*i;t.drawImage(d,s,o,h,l,c[g+0],c[g+1],h,l)}else t.drawImage(d,s,o,h,l,0,0,h,l)}_hitFunc(t){var e=this.animation(),i=this.frameIndex(),r=4*i,a=this.animations()[e],n=this.frameOffsets(),s=a[r+2],o=a[r+3];if(t.beginPath(),n){var h=n[e],l=2*i;t.rect(h[l+0],h[l+1],s,o)}else t.rect(0,0,s,o);t.closePath(),t.fillShape(this)}_useBufferCanvas(){return super._useBufferCanvas(!0)}_setInterval(){var t=this;this.interval=setInterval((function(){t._updateIndex()}),1e3/this.frameRate())}start(){if(!this.isRunning()){var t=this.getLayer();this.anim.setLayers(t),this._setInterval(),this.anim.start()}}stop(){this.anim.stop(),clearInterval(this.interval)}isRunning(){return this.anim.isRunning()}_updateIndex(){var t=this.frameIndex(),e=this.animation();t1&&(v+=s)}}}_hitFunc(t){var e=this.getWidth(),i=this.getHeight();t.beginPath(),t.rect(0,0,e,i),t.closePath(),t.fillStrokeShape(this)}setText(t){var e=d._isString(t)?t:null==t?"":t+"";return this._setAttr("text",e),this}getWidth(){return"auto"===this.attrs.width||void 0===this.attrs.width?this.getTextWidth()+2*this.padding():this.attrs.width}getHeight(){return"auto"===this.attrs.height||void 0===this.attrs.height?this.fontSize()*this.textArr.length*this.lineHeight()+2*this.padding():this.attrs.height}getTextWidth(){return this.textWidth}getTextHeight(){return d.warn("text.getTextHeight() method is deprecated. Use text.height() - for full height and text.fontSize() - for one line height."),this.textHeight}measureSize(t){var e,i=Ft(),r=this.fontSize();return i.save(),i.font=this._getContextFont(),e=i.measureText(t),i.restore(),{width:e.width,height:r}}_getContextFont(){return this.fontStyle()+" "+this.fontVariant()+" "+this.fontSize()+"px "+this.fontFamily().split(",").map(t=>{const e=(t=t.trim()).indexOf(" ")>=0,i=t.indexOf('"')>=0||t.indexOf("'")>=0;return e&&!i&&(t=`"${t}"`),t}).join(", ")}_addTextLine(t){"justify"===this.align()&&(t=t.trim());var e=this._getTextWidth(t);return this.textArr.push({text:t,width:e})}_getTextWidth(t){var e=this.letterSpacing(),i=t.length;return Ft().measureText(t).width+(i?e*(i-1):0)}_setTextData(){var t=this.text().split("\n"),e=+this.fontSize(),i=0,r=this.lineHeight()*e,a=this.attrs.width,n=this.attrs.height,s="auto"!==a&&void 0!==a,o="auto"!==n&&void 0!==n,h=this.padding(),l=a-2*h,d=n-2*h,c=0,g=this.wrap(),u="none"!==g,f="char"!==g&&u,p=this.ellipsis();this.textArr=[],Ft().font=this._getContextFont();for(var v=p?this._getTextWidth("…"):0,m=0,_=t.length;m<_;++m){var y=t[m],x=this._getTextWidth(y);if(s&&x>l)for(;y.length>0;){for(var b=0,S=y.length,w="",C=0;b>>1,k=y.slice(0,P+1),T=this._getTextWidth(k)+v;T<=l?(b=P+1,w=k,C=T):S=P}if(!w)break;if(f){var A,M=y[w.length];(A=(" "===M||"-"===M)&&C<=l?w.length:Math.max(w.lastIndexOf(" "),w.lastIndexOf("-"))+1)>0&&(b=A,w=w.slice(0,b),C=this._getTextWidth(w))}if(w=w.trimRight(),this._addTextLine(w),i=Math.max(i,C),c+=r,!u||o&&c+r>d){var G=this.textArr[this.textArr.length-1];if(G)if(p)this._getTextWidth(G.text+"…")0&&(x=this._getTextWidth(y))<=l){this._addTextLine(y),c+=r,i=Math.max(i,x);break}}else this._addTextLine(y),c+=r,i=Math.max(i,x);if(o&&c+r>d)break}this.textHeight=e,this.textWidth=i}getStrokeScaleEnabled(){return!0}}Bt.prototype._fillFunc=function(t){t.fillText(this._partialText,this._partialTextX,this._partialTextY)},Bt.prototype._strokeFunc=function(t){t.strokeText(this._partialText,this._partialTextX,this._partialTextY)},Bt.prototype.className="Text",Bt.prototype._attrsAffectingSize=["text","fontSize","padding","wrap","lineHeight","letterSpacing"],r(Bt),y.overWriteSetter(Bt,"width",p()),y.overWriteSetter(Bt,"height",p()),y.addGetterSetter(Bt,"fontFamily","Arial"),y.addGetterSetter(Bt,"fontSize",12,u()),y.addGetterSetter(Bt,"fontStyle","normal"),y.addGetterSetter(Bt,"fontVariant","normal"),y.addGetterSetter(Bt,"padding",0,u()),y.addGetterSetter(Bt,"align","left"),y.addGetterSetter(Bt,"verticalAlign","top"),y.addGetterSetter(Bt,"lineHeight",1,u()),y.addGetterSetter(Bt,"wrap","word"),y.addGetterSetter(Bt,"ellipsis",!1,_()),y.addGetterSetter(Bt,"letterSpacing",0,u()),y.addGetterSetter(Bt,"text","",v()),y.addGetterSetter(Bt,"textDecoration","");function Nt(t){t.fillText(this.partialText,0,0)}function zt(t){t.strokeText(this.partialText,0,0)}class Wt extends et{constructor(t){super(t),this.dummyCanvas=d.createCanvasElement(),this.dataArray=[],this.dataArray=kt.parsePathData(this.attrs.data),this.on("dataChange.konva",(function(){this.dataArray=kt.parsePathData(this.attrs.data),this._setTextData()})),this.on("textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva fontSizeChange.konva",this._setTextData),t&&t.getKerning&&(d.warn('getKerning TextPath API is deprecated. Please use "kerningFunc" instead.'),this.kerningFunc(t.getKerning)),this._setTextData()}_sceneFunc(t){t.setAttr("font",this._getContextFont()),t.setAttr("textBaseline",this.textBaseline()),t.setAttr("textAlign","left"),t.save();var e=this.textDecoration(),i=this.fill(),r=this.fontSize(),a=this.glyphInfo;"underline"===e&&t.beginPath();for(var n=0;n=1){var i=e[0].p0;t.moveTo(i.x,i.y)}for(var r=0;r0&&(s+=t.dataArray[o].pathLength);var h=0;"center"===r&&(h=Math.max(0,s/2-n/2)),"right"===r&&(h=Math.max(0,s-n));for(var l,d,c,g=Lt(this.text()),u=this.text().split(" ").length-1,f=-1,p=0,v=function(){p=0;for(var e=t.dataArray,i=f+1;i0)return f=i,e[i];"M"===e[i].command&&(l={x:e[i].points[0],y:e[i].points[1]})}return{}},m=function(e){var a=t._getTextSize(e).width+i;" "===e&&"justify"===r&&(a+=(s-n)/u);var o=0,h=0;for(d=void 0;Math.abs(a-o)/a>.01&&h<20;){h++;for(var g=o;void 0===c;)(c=v())&&g+c.pathLengtha?d=kt.getPointOnLine(a,l.x,l.y,c.points[0],c.points[1],l.x,l.y):c=void 0;break;case"A":var m=c.points[4],_=c.points[5],y=c.points[4]+_;0===p?p=m+1e-8:a>o?p+=Math.PI/180*_/Math.abs(_):p-=Math.PI/360*_/Math.abs(_),(_<0&&p=0&&p>y)&&(p=y,f=!0),d=kt.getPointOnEllipticalArc(c.points[0],c.points[1],c.points[2],c.points[3],p,c.points[6]);break;case"C":0===p?p=a>c.pathLength?1e-8:a/c.pathLength:a>o?p+=(a-o)/c.pathLength/2:p=Math.max(p-(o-a)/c.pathLength/2,0),p>1&&(p=1,f=!0),d=kt.getPointOnCubicBezier(p,c.start.x,c.start.y,c.points[0],c.points[1],c.points[2],c.points[3],c.points[4],c.points[5]);break;case"Q":0===p?p=a/c.pathLength:a>o?p+=(a-o)/c.pathLength:p-=(o-a)/c.pathLength,p>1&&(p=1,f=!0),d=kt.getPointOnQuadraticBezier(p,c.start.x,c.start.y,c.points[0],c.points[1],c.points[2],c.points[3])}void 0!==d&&(o=kt.getLineLength(l.x,l.y,d.x,d.y)),f&&(f=!1,c=void 0)}},_=h/(t._getTextSize("C").width+i)-1,y=0;y<_&&(m("C"),void 0!==l&&void 0!==d);y++)l=d;for(var x=0;xt+".tr-konva").join(" "),Yt=["widthChange","heightChange","scaleXChange","scaleYChange","skewXChange","skewYChange","rotationChange","offsetXChange","offsetYChange","transformsEnabledChange","strokeWidthChange"].map(t=>t+".tr-konva").join(" "),Xt={"top-left":-45,"top-center":0,"top-right":45,"middle-right":-90,"middle-left":90,"bottom-left":-135,"bottom-center":180,"bottom-right":135};const jt="ontouchstart"in i._global;var Ut=["top-left","top-center","top-right","middle-right","middle-left","bottom-left","bottom-center","bottom-right"];function qt(t,e,i){const r=i.x+(t.x-i.x)*Math.cos(e)-(t.y-i.y)*Math.sin(e),a=i.y+(t.x-i.x)*Math.sin(e)+(t.y-i.y)*Math.cos(e);return Object.assign(Object.assign({},t),{rotation:t.rotation+e,x:r,y:a})}function Kt(t,e){return qt(t,e,function(t){return{x:t.x+t.width/2*Math.cos(t.rotation)+t.height/2*Math.sin(-t.rotation),y:t.y+t.height/2*Math.cos(t.rotation)+t.width/2*Math.sin(t.rotation)}}(t))}class Vt extends st{constructor(t){super(t),this._transforming=!1,this._createElements(),this._handleMouseMove=this._handleMouseMove.bind(this),this._handleMouseUp=this._handleMouseUp.bind(this),this.update=this.update.bind(this),this.on(Ht,this.update),this.getNode()&&this.update()}attachTo(t){return this.setNode(t),this}setNode(t){return d.warn("tr.setNode(shape), tr.node(shape) and tr.attachTo(shape) methods are deprecated. Please use tr.nodes(nodesArray) instead."),this.setNodes([t])}getNode(){return this._nodes&&this._nodes[0]}setNodes(t=[]){return this._nodes&&this._nodes.length&&this.detach(),this._nodes=t,1===t.length?this.rotation(t[0].getAbsoluteRotation()):this.rotation(0),this._nodes.forEach(t=>{const e=t._attrsAffectingSize.map(t=>t+"Change.tr-konva").join(" "),i=()=>{1===this.nodes().length&&this.rotation(this.nodes()[0].getAbsoluteRotation()),this._resetTransformCache(),this._transforming||this.isDragging()||this.update()};t.on(e,i),t.on(Yt,i),t.on("absoluteTransformChange.tr-konva",i),t.on("xChange.tr-konva yChange.tr-konva",i),this._proxyDrag(t)}),this._resetTransformCache(),!!this.findOne(".top-left")&&this.update(),this}_proxyDrag(t){let e;t.on("dragstart.tr-konva",i=>{e=t.getAbsolutePosition(),this.isDragging()||t===this.findOne(".back")||this.startDrag(i,!1)}),t.on("dragmove.tr-konva",i=>{if(!e)return;const r=t.getAbsolutePosition(),a=r.x-e.x,n=r.y-e.y;this.nodes().forEach(e=>{if(e===t)return;if(e.isDragging())return;const r=e.getAbsolutePosition();e.setAbsolutePosition({x:r.x+a,y:r.y+n}),e.startDrag(i)}),e=null})}getNodes(){return this._nodes||[]}getActiveAnchor(){return this._movingAnchorName}detach(){this._nodes&&this._nodes.forEach(t=>{t.off(".tr-konva")}),this._nodes=[],this._resetTransformCache()}_resetTransformCache(){this._clearCache("nodesRect"),this._clearCache("transform"),this._clearSelfAndDescendantCache("absoluteTransform")}_getNodeRect(){return this._getCache("nodesRect",this.__getNodeRect)}__getNodeShape(t,e=this.rotation(),r){var a=t.getClientRect({skipTransform:!0,skipShadow:!0,skipStroke:this.ignoreStroke()}),n=t.getAbsoluteScale(r),s=t.getAbsolutePosition(r),o=a.x*n.x-t.offsetX()*n.x,h=a.y*n.y-t.offsetY()*n.y;const l=(i.getAngle(t.getAbsoluteRotation())+2*Math.PI)%(2*Math.PI);return qt({x:s.x+o*Math.cos(l)+h*Math.sin(-l),y:s.y+h*Math.cos(l)+o*Math.sin(l),width:a.width*n.x,height:a.height*n.y,rotation:l},-i.getAngle(e),{x:0,y:0})}__getNodeRect(){if(!this.getNode())return{x:-1e8,y:-1e8,width:0,height:0,rotation:0};const t=[];this.nodes().map(e=>{const i=e.getClientRect({skipTransform:!0,skipShadow:!0,skipStroke:this.ignoreStroke()});var r=[{x:i.x,y:i.y},{x:i.x+i.width,y:i.y},{x:i.x+i.width,y:i.y+i.height},{x:i.x,y:i.y+i.height}],a=e.getAbsoluteTransform();r.forEach((function(e){var i=a.point(e);t.push(i)}))});const e=new a;var r,n,s,o;e.rotate(-i.getAngle(this.rotation())),t.forEach((function(t){var i=e.point(t);void 0===r&&(r=s=i.x,n=o=i.y),r=Math.min(r,i.x),n=Math.min(n,i.y),s=Math.max(s,i.x),o=Math.max(o,i.y)})),e.invert();const h=e.point({x:r,y:n});return{x:h.x,y:h.y,width:s-r,height:o-n,rotation:i.getAngle(this.rotation())}}getX(){return this._getNodeRect().x}getY(){return this._getNodeRect().y}getWidth(){return this._getNodeRect().width}getHeight(){return this._getNodeRect().height}_createElements(){this._createBack(),Ut.forEach(function(t){this._createAnchor(t)}.bind(this)),this._createAnchor("rotater")}_createAnchor(t){var e=new Tt({stroke:"rgb(0, 161, 255)",fill:"white",strokeWidth:1,name:t+" _anchor",dragDistance:0,draggable:!0,hitStrokeWidth:jt?10:"auto"}),r=this;e.on("mousedown touchstart",(function(t){r._handleMouseDown(t)})),e.on("dragstart",t=>{e.stopDrag(),t.cancelBubble=!0}),e.on("dragend",t=>{t.cancelBubble=!0}),e.on("mouseenter",()=>{var r=i.getAngle(this.rotation()),a=function(t,e){if("rotater"===t)return"crosshair";e+=d._degToRad(Xt[t]||0);var i=(d._radToDeg(e)%360+360)%360;return d._inRange(i,337.5,360)||d._inRange(i,0,22.5)?"ns-resize":d._inRange(i,22.5,67.5)?"nesw-resize":d._inRange(i,67.5,112.5)?"ew-resize":d._inRange(i,112.5,157.5)?"nwse-resize":d._inRange(i,157.5,202.5)?"ns-resize":d._inRange(i,202.5,247.5)?"nesw-resize":d._inRange(i,247.5,292.5)?"ew-resize":d._inRange(i,292.5,337.5)?"nwse-resize":(d.error("Transformer has unknown angle for cursor detection: "+i),"pointer")}(t,r);e.getStage().content&&(e.getStage().content.style.cursor=a),this._cursorChange=!0}),e.on("mouseout",()=>{e.getStage().content&&(e.getStage().content.style.cursor=""),this._cursorChange=!1}),this.add(e)}_createBack(){var t=new et({name:"back",width:0,height:0,draggable:!0,sceneFunc(t){var e=this.getParent(),i=e.padding();t.beginPath(),t.rect(-i,-i,this.width()+2*i,this.height()+2*i),t.moveTo(this.width()/2,-i),e.rotateEnabled()&&t.lineTo(this.width()/2,-e.rotateAnchorOffset()*d._sign(this.height())-i),t.fillStrokeShape(this)},hitFunc:(t,e)=>{if(this.shouldOverdrawWholeArea()){var i=this.padding();t.beginPath(),t.rect(-i,-i,e.width()+2*i,e.height()+2*i),t.fillStrokeShape(e)}}});this.add(t),this._proxyDrag(t),t.on("dragstart",t=>{t.cancelBubble=!0}),t.on("dragmove",t=>{t.cancelBubble=!0}),t.on("dragend",t=>{t.cancelBubble=!0})}_handleMouseDown(t){this._movingAnchorName=t.target.name().split(" ")[0];var e=this._getNodeRect(),i=e.width,r=e.height,a=Math.sqrt(Math.pow(i,2)+Math.pow(r,2));this.sin=Math.abs(r/a),this.cos=Math.abs(i/a),"undefined"!=typeof window&&(window.addEventListener("mousemove",this._handleMouseMove),window.addEventListener("touchmove",this._handleMouseMove),window.addEventListener("mouseup",this._handleMouseUp,!0),window.addEventListener("touchend",this._handleMouseUp,!0)),this._transforming=!0;var n=t.target.getAbsolutePosition(),s=t.target.getStage().getPointerPosition();this._anchorDragOffset={x:s.x-n.x,y:s.y-n.y},this._fire("transformstart",{evt:t,target:this.getNode()}),this._nodes.forEach(e=>{e._fire("transformstart",{evt:t,target:e})})}_handleMouseMove(t){var e,r,a,n=this.findOne("."+this._movingAnchorName),s=n.getStage();s.setPointersPositions(t);const o=s.getPointerPosition();var h={x:o.x-this._anchorDragOffset.x,y:o.y-this._anchorDragOffset.y};const l=n.getAbsolutePosition();n.setAbsolutePosition(h);const d=n.getAbsolutePosition();if(l.x!==d.x||l.y!==d.y)if("rotater"!==this._movingAnchorName){var c=this.keepRatio()||t.shiftKey,g=this.centeredScaling()||t.altKey;if("top-left"===this._movingAnchorName){if(c){var u=g?{x:this.width()/2,y:this.height()/2}:{x:this.findOne(".bottom-right").x(),y:this.findOne(".bottom-right").y()};a=Math.sqrt(Math.pow(u.x-n.x(),2)+Math.pow(u.y-n.y(),2));var f=this.findOne(".top-left").x()>u.x?-1:1,p=this.findOne(".top-left").y()>u.y?-1:1;e=a*this.cos*f,r=a*this.sin*p,this.findOne(".top-left").x(u.x-e),this.findOne(".top-left").y(u.y-r)}}else if("top-center"===this._movingAnchorName)this.findOne(".top-left").y(n.y());else if("top-right"===this._movingAnchorName){if(c){u=g?{x:this.width()/2,y:this.height()/2}:{x:this.findOne(".bottom-left").x(),y:this.findOne(".bottom-left").y()};a=Math.sqrt(Math.pow(n.x()-u.x,2)+Math.pow(u.y-n.y(),2));f=this.findOne(".top-right").x()u.y?-1:1;e=a*this.cos*f,r=a*this.sin*p,this.findOne(".top-right").x(u.x+e),this.findOne(".top-right").y(u.y-r)}var v=n.position();this.findOne(".top-left").y(v.y),this.findOne(".bottom-right").x(v.x)}else if("middle-left"===this._movingAnchorName)this.findOne(".top-left").x(n.x());else if("middle-right"===this._movingAnchorName)this.findOne(".bottom-right").x(n.x());else if("bottom-left"===this._movingAnchorName){if(c){u=g?{x:this.width()/2,y:this.height()/2}:{x:this.findOne(".top-right").x(),y:this.findOne(".top-right").y()};a=Math.sqrt(Math.pow(u.x-n.x(),2)+Math.pow(n.y()-u.y,2));f=u.x{e._fire("transformend",{evt:t,target:e})}),this._movingAnchorName=null}}_fitNodesInto(t,e){var r=this._getNodeRect();if(d._inRange(t.width,2*-this.padding()-1,1))return void this.update();if(d._inRange(t.height,2*-this.padding()-1,1))return void this.update();var n=new a;if(n.rotate(i.getAngle(this.rotation())),this._movingAnchorName&&t.width<0&&this._movingAnchorName.indexOf("left")>=0){const e=n.point({x:2*-this.padding(),y:0});t.x+=e.x,t.y+=e.y,t.width+=2*this.padding(),this._movingAnchorName=this._movingAnchorName.replace("left","right"),this._anchorDragOffset.x-=e.x,this._anchorDragOffset.y-=e.y}else if(this._movingAnchorName&&t.width<0&&this._movingAnchorName.indexOf("right")>=0){const e=n.point({x:2*this.padding(),y:0});this._movingAnchorName=this._movingAnchorName.replace("right","left"),this._anchorDragOffset.x-=e.x,this._anchorDragOffset.y-=e.y,t.width+=2*this.padding()}if(this._movingAnchorName&&t.height<0&&this._movingAnchorName.indexOf("top")>=0){const e=n.point({x:0,y:2*-this.padding()});t.x+=e.x,t.y+=e.y,this._movingAnchorName=this._movingAnchorName.replace("top","bottom"),this._anchorDragOffset.x-=e.x,this._anchorDragOffset.y-=e.y,t.height+=2*this.padding()}else if(this._movingAnchorName&&t.height<0&&this._movingAnchorName.indexOf("bottom")>=0){const e=n.point({x:0,y:2*this.padding()});this._movingAnchorName=this._movingAnchorName.replace("bottom","top"),this._anchorDragOffset.x-=e.x,this._anchorDragOffset.y-=e.y,t.height+=2*this.padding()}if(this.boundBoxFunc()){const e=this.boundBoxFunc()(r,t);e?t=e:d.warn("boundBoxFunc returned falsy. You should return new bound rect from it!")}const s=new a;s.translate(r.x,r.y),s.rotate(r.rotation),s.scale(r.width/1e7,r.height/1e7);const o=new a;o.translate(t.x,t.y),o.rotate(t.rotation),o.scale(t.width/1e7,t.height/1e7);const h=o.multiply(s.invert());this._nodes.forEach(t=>{var i;const r=t.getParent().getAbsoluteTransform(),n=t.getTransform().copy();n.translate(t.offsetX(),t.offsetY());const s=new a;s.multiply(r.copy().invert()).multiply(h).multiply(r).multiply(n);const o=s.decompose();t.setAttrs(o),this._fire("transform",{evt:e,target:t}),t._fire("transform",{evt:e,target:t}),null===(i=t.getLayer())||void 0===i||i.batchDraw()}),this.rotation(d._getRotation(t.rotation)),this._resetTransformCache(),this.update(),this.getLayer().batchDraw()}forceUpdate(){this._resetTransformCache(),this.update()}_batchChangeChild(t,e){this.findOne(t).setAttrs(e)}update(){var t,e=this._getNodeRect();this.rotation(d._getRotation(e.rotation));var i=e.width,r=e.height,a=this.enabledAnchors(),n=this.resizeEnabled(),s=this.padding(),o=this.anchorSize();this.find("._anchor").forEach(t=>{t.setAttrs({width:o,height:o,offsetX:o/2,offsetY:o/2,stroke:this.anchorStroke(),strokeWidth:this.anchorStrokeWidth(),fill:this.anchorFill(),cornerRadius:this.anchorCornerRadius()})}),this._batchChangeChild(".top-left",{x:0,y:0,offsetX:o/2+s,offsetY:o/2+s,visible:n&&a.indexOf("top-left")>=0}),this._batchChangeChild(".top-center",{x:i/2,y:0,offsetY:o/2+s,visible:n&&a.indexOf("top-center")>=0}),this._batchChangeChild(".top-right",{x:i,y:0,offsetX:o/2-s,offsetY:o/2+s,visible:n&&a.indexOf("top-right")>=0}),this._batchChangeChild(".middle-left",{x:0,y:r/2,offsetX:o/2+s,visible:n&&a.indexOf("middle-left")>=0}),this._batchChangeChild(".middle-right",{x:i,y:r/2,offsetX:o/2-s,visible:n&&a.indexOf("middle-right")>=0}),this._batchChangeChild(".bottom-left",{x:0,y:r,offsetX:o/2+s,offsetY:o/2-s,visible:n&&a.indexOf("bottom-left")>=0}),this._batchChangeChild(".bottom-center",{x:i/2,y:r,offsetY:o/2-s,visible:n&&a.indexOf("bottom-center")>=0}),this._batchChangeChild(".bottom-right",{x:i,y:r,offsetX:o/2-s,offsetY:o/2-s,visible:n&&a.indexOf("bottom-right")>=0}),this._batchChangeChild(".rotater",{x:i/2,y:-this.rotateAnchorOffset()*d._sign(r)-s,visible:this.rotateEnabled()}),this._batchChangeChild(".back",{width:i,height:r,visible:this.borderEnabled(),stroke:this.borderStroke(),strokeWidth:this.borderStrokeWidth(),dash:this.borderDash(),x:0,y:0}),null===(t=this.getLayer())||void 0===t||t.batchDraw()}isTransforming(){return this._transforming}stopTransform(){if(this._transforming){this._removeEvents();var t=this.findOne("."+this._movingAnchorName);t&&t.stopDrag()}}destroy(){return this.getStage()&&this._cursorChange&&this.getStage().content&&(this.getStage().content.style.cursor=""),st.prototype.destroy.call(this),this.detach(),this._removeEvents(),this}toObject(){return O.prototype.toObject.call(this)}}Vt.prototype.className="Transformer",r(Vt),y.addGetterSetter(Vt,"enabledAnchors",Ut,(function(t){return t instanceof Array||d.warn("enabledAnchors value should be an array"),t instanceof Array&&t.forEach((function(t){-1===Ut.indexOf(t)&&d.warn("Unknown anchor name: "+t+". Available names are: "+Ut.join(", "))})),t||[]})),y.addGetterSetter(Vt,"resizeEnabled",!0),y.addGetterSetter(Vt,"anchorSize",10,u()),y.addGetterSetter(Vt,"rotateEnabled",!0),y.addGetterSetter(Vt,"rotationSnaps",[]),y.addGetterSetter(Vt,"rotateAnchorOffset",50,u()),y.addGetterSetter(Vt,"rotationSnapTolerance",5,u()),y.addGetterSetter(Vt,"borderEnabled",!0),y.addGetterSetter(Vt,"anchorStroke","rgb(0, 161, 255)"),y.addGetterSetter(Vt,"anchorStrokeWidth",1,u()),y.addGetterSetter(Vt,"anchorFill","white"),y.addGetterSetter(Vt,"anchorCornerRadius",0,u()),y.addGetterSetter(Vt,"borderStroke","rgb(0, 161, 255)"),y.addGetterSetter(Vt,"borderStrokeWidth",1,u()),y.addGetterSetter(Vt,"borderDash"),y.addGetterSetter(Vt,"keepRatio",!0),y.addGetterSetter(Vt,"centeredScaling",!1),y.addGetterSetter(Vt,"ignoreStroke",!1),y.addGetterSetter(Vt,"padding",0,u()),y.addGetterSetter(Vt,"node"),y.addGetterSetter(Vt,"nodes"),y.addGetterSetter(Vt,"boundBoxFunc"),y.addGetterSetter(Vt,"shouldOverdrawWholeArea",!1),y.backCompat(Vt,{lineEnabled:"borderEnabled",rotateHandlerOffset:"rotateAnchorOffset",enabledHandlers:"enabledAnchors"});class Qt extends et{_sceneFunc(t){t.beginPath(),t.arc(0,0,this.radius(),0,i.getAngle(this.angle()),this.clockwise()),t.lineTo(0,0),t.closePath(),t.fillStrokeShape(this)}getWidth(){return 2*this.radius()}getHeight(){return 2*this.radius()}setWidth(t){this.radius(t/2)}setHeight(t){this.radius(t/2)}}function Jt(){this.r=0,this.g=0,this.b=0,this.a=0,this.next=null}Qt.prototype.className="Wedge",Qt.prototype._centroid=!0,Qt.prototype._attrsAffectingSize=["radius"],r(Qt),y.addGetterSetter(Qt,"radius",0,u()),y.addGetterSetter(Qt,"angle",0,u()),y.addGetterSetter(Qt,"clockwise",!1),y.backCompat(Qt,{angleDeg:"angle",getAngleDeg:"getAngle",setAngleDeg:"setAngle"});var Zt=[512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,289,287,285,282,280,278,275,273,271,269,267,265,263,261,259],$t=[9,11,12,13,13,14,14,15,15,15,15,16,16,16,16,17,17,17,17,17,17,17,18,18,18,18,18,18,18,18,18,19,19,19,19,19,19,19,19,19,19,19,19,19,19,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24];y.addGetterSetter(O,"blurRadius",0,u(),y.afterSetFilter);y.addGetterSetter(O,"brightness",0,u(),y.afterSetFilter);y.addGetterSetter(O,"contrast",0,u(),y.afterSetFilter);function te(t,e,i,r,a){var n=i-e,s=a-r;return 0===n?r+s/2:0===s?r:s*((t-e)/n)+r}y.addGetterSetter(O,"embossStrength",.5,u(),y.afterSetFilter),y.addGetterSetter(O,"embossWhiteLevel",.5,u(),y.afterSetFilter),y.addGetterSetter(O,"embossDirection","top-left",null,y.afterSetFilter),y.addGetterSetter(O,"embossBlend",!1,null,y.afterSetFilter);y.addGetterSetter(O,"enhance",0,u(),y.afterSetFilter);y.addGetterSetter(O,"hue",0,u(),y.afterSetFilter),y.addGetterSetter(O,"saturation",0,u(),y.afterSetFilter),y.addGetterSetter(O,"luminance",0,u(),y.afterSetFilter);y.addGetterSetter(O,"hue",0,u(),y.afterSetFilter),y.addGetterSetter(O,"saturation",0,u(),y.afterSetFilter),y.addGetterSetter(O,"value",0,u(),y.afterSetFilter);function ee(t,e,i){var r=4*(i*t.width+e),a=[];return a.push(t.data[r++],t.data[r++],t.data[r++],t.data[r++]),a}function ie(t,e){return Math.sqrt(Math.pow(t[0]-e[0],2)+Math.pow(t[1]-e[1],2)+Math.pow(t[2]-e[2],2))}y.addGetterSetter(O,"kaleidoscopePower",2,u(),y.afterSetFilter),y.addGetterSetter(O,"kaleidoscopeAngle",0,u(),y.afterSetFilter);y.addGetterSetter(O,"threshold",0,u(),y.afterSetFilter);y.addGetterSetter(O,"noise",.2,u(),y.afterSetFilter);y.addGetterSetter(O,"pixelSize",8,u(),y.afterSetFilter);y.addGetterSetter(O,"levels",.5,u(),y.afterSetFilter);y.addGetterSetter(O,"red",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),y.addGetterSetter(O,"green",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),y.addGetterSetter(O,"blue",0,g,y.afterSetFilter);y.addGetterSetter(O,"red",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),y.addGetterSetter(O,"green",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),y.addGetterSetter(O,"blue",0,g,y.afterSetFilter),y.addGetterSetter(O,"alpha",1,(function(t){return this._filterUpToDate=!1,t>1?1:t<0?0:t}));y.addGetterSetter(O,"threshold",.5,u(),y.afterSetFilter);return pt.Util._assign(pt,{Arc:vt,Arrow:_t,Circle:yt,Ellipse:xt,Image:bt,Label:Ct,Tag:Pt,Line:mt,Path:kt,Rect:Tt,RegularPolygon:At,Ring:Gt,Sprite:Et,Star:Rt,Text:Bt,TextPath:Wt,Transformer:Vt,Wedge:Qt,Filters:{Blur:function(t){var e=Math.round(this.blurRadius());e>0&&function(t,e){var i,r,a,n,s,o,h,l,d,c,g,u,f,p,v,m,_,y,x,b,S,w,C,P,k=t.data,T=t.width,A=t.height,M=e+e+1,G=T-1,E=A-1,R=e+1,L=R*(R+1)/2,D=new Jt,I=null,O=D,F=null,B=null,N=Zt[e],z=$t[e];for(a=1;a>z,0!==C?(C=255/C,k[o]=(l*N>>z)*C,k[o+1]=(d*N>>z)*C,k[o+2]=(c*N>>z)*C):k[o]=k[o+1]=k[o+2]=0,l-=u,d-=f,c-=p,g-=v,u-=F.r,f-=F.g,p-=F.b,v-=F.a,n=h+((n=i+e+1)>z,C>0?(C=255/C,k[n]=(l*N>>z)*C,k[n+1]=(d*N>>z)*C,k[n+2]=(c*N>>z)*C):k[n]=k[n+1]=k[n+2]=0,l-=u,d-=f,c-=p,g-=v,u-=F.r,f-=F.g,p-=F.b,v-=F.a,n=i+((n=r+R)255?255:n,s=(s*=255)<0?0:s>255?255:s,o=(o*=255)<0?0:o>255?255:o,r[e]=n,r[e+1]=s,r[e+2]=o},Emboss:function(t){var e=10*this.embossStrength(),i=255*this.embossWhiteLevel(),r=this.embossDirection(),a=this.embossBlend(),n=0,s=0,o=t.data,h=t.width,l=t.height,c=4*h,g=l;switch(r){case"top-left":n=-1,s=-1;break;case"top":n=-1,s=0;break;case"top-right":n=-1,s=1;break;case"right":n=0,s=1;break;case"bottom-right":n=1,s=1;break;case"bottom":n=1,s=0;break;case"bottom-left":n=1,s=-1;break;case"left":n=0,s=-1;break;default:d.error("Unknown emboss direction: "+r)}do{var u=(g-1)*c,f=n;g+f<1&&(f=0),g+f>l&&(f=0);var p=(g-1+f)*h*4,v=h;do{var m=u+4*(v-1),_=s;v+_<1&&(_=0),v+_>h&&(_=0);var y=p+4*(v-1+_),x=o[m]-o[y],b=o[m+1]-o[y+1],S=o[m+2]-o[y+2],w=x,C=w>0?w:-w;if((b>0?b:-b)>C&&(w=b),(S>0?S:-S)>C&&(w=S),w*=e,a){var P=o[m]+w,k=o[m+1]+w,T=o[m+2]+w;o[m]=P>255?255:P<0?0:P,o[m+1]=k>255?255:k<0?0:k,o[m+2]=T>255?255:T<0?0:T}else{var A=i-w;A<0?A=0:A>255&&(A=255),o[m]=o[m+1]=o[m+2]=A}}while(--v)}while(--g)},Enhance:function(t){var e,i,r,a,n=t.data,s=n.length,o=n[0],h=o,l=n[1],d=l,c=n[2],g=c,u=this.enhance();if(0!==u){for(a=0;ah&&(h=e),(i=n[a+1])d&&(d=i),(r=n[a+2])g&&(g=r);var f,p,v,m,_,y,x,b,S;for(h===o&&(h=255,o=0),d===l&&(d=255,l=0),g===c&&(g=255,c=0),u>0?(p=h+u*(255-h),v=o-u*(o-0),_=d+u*(255-d),y=l-u*(l-0),b=g+u*(255-g),S=c-u*(c-0)):(p=h+u*(h-(f=.5*(h+o))),v=o+u*(o-f),_=d+u*(d-(m=.5*(d+l))),y=l+u*(l-m),b=g+u*(g-(x=.5*(g+c))),S=c+u*(c-x)),a=0;am?s:m;var _,y,x,b,S=d,w=l,C=360/w*Math.PI/180;for(y=0;yc&&(x=y,b=0,S=-1),i=0;iy?h:y;var x,b,S,w=g,C=c,P=i.polarRotation||0;for(a=0;a=0&&u=0&&f=0&&u=0&&f=1020?255:0}return s}(e=function(t,e,i){for(var r=[1,1,1,1,0,1,1,1,1],a=Math.round(Math.sqrt(r.length)),n=Math.floor(a/2),s=[],o=0;o=0&&u=0&&f=m))for(i=c;i=_||(a+=b[(r=4*(m*i+e))+0],n+=b[r+1],s+=b[r+2],o+=b[r+3],p+=1);for(a/=p,n/=p,s/=p,o/=p,e=h;e=m))for(i=c;i=_||(b[(r=4*(m*i+e))+0]=a,b[r+1]=n,b[r+2]=s,b[r+3]=o)}},Posterize:function(t){var e,i=Math.round(254*this.levels())+1,r=t.data,a=r.length,n=255/i;for(e=0;e127&&(h=255-h),l>127&&(l=255-l),d>127&&(d=255-d),e[o]=h,e[o+1]=l,e[o+2]=d}while(--s)}while(--a)},Threshold:function(t){var e,i=255*this.threshold(),r=t.data,a=r.length;for(e=0;e number { if (glob.performance && glob.performance.now) { diff --git a/src/Canvas.ts b/src/Canvas.ts index 7ed53e22..f84d7d6c 100644 --- a/src/Canvas.ts +++ b/src/Canvas.ts @@ -1,8 +1,8 @@ -import { Util } from './Util.js'; -import { SceneContext, HitContext, Context } from './Context.js'; -import { Konva } from './Global.js'; -import { Factory } from './Factory.js'; -import { getNumberValidator } from './Validators.js'; +import { Util } from './Util'; +import { SceneContext, HitContext, Context } from './Context'; +import { Konva } from './Global'; +import { Factory } from './Factory'; +import { getNumberValidator } from './Validators'; // calculate pixel ratio var _pixelRatio; diff --git a/src/Container.ts b/src/Container.ts index 9f814c94..9f5d4ae6 100644 --- a/src/Container.ts +++ b/src/Container.ts @@ -1,10 +1,10 @@ -import { Factory } from './Factory.js'; -import { Node, NodeConfig } from './Node.js'; -import { getNumberValidator } from './Validators.js'; +import { Factory } from './Factory'; +import { Node, NodeConfig } from './Node'; +import { getNumberValidator } from './Validators'; import { GetSet, IRect } from './types'; -import { Shape } from './Shape.js'; -import { HitCanvas, SceneCanvas } from './Canvas.js'; +import { Shape } from './Shape'; +import { HitCanvas, SceneCanvas } from './Canvas'; export interface ContainerConfig extends NodeConfig { clearBeforeDraw?: boolean; @@ -309,15 +309,15 @@ export abstract class Container< return arr; } - _clearSelfAndDescendantCache(attr?: string, forceEvent?: boolean) { - super._clearSelfAndDescendantCache(attr, forceEvent); + _clearSelfAndDescendantCache(attr?: string) { + super._clearSelfAndDescendantCache(attr); // skip clearing if node is cached with canvas // for performance reasons !!! if (this.isCached()) { return; } this.children?.forEach(function (node) { - node._clearSelfAndDescendantCache(attr, forceEvent); + node._clearSelfAndDescendantCache(attr); }); } _setChildrenIndices() { diff --git a/src/Context.ts b/src/Context.ts index 3a9a1bf3..b15a33ba 100644 --- a/src/Context.ts +++ b/src/Context.ts @@ -1,7 +1,7 @@ -import { Util } from './Util.js'; -import { Konva } from './Global.js'; -import { Canvas } from './Canvas.js'; -import { Shape } from './Shape.js'; +import { Util } from './Util'; +import { Konva } from './Global'; +import { Canvas } from './Canvas'; +import { Shape } from './Shape'; var COMMA = ',', OPEN_PAREN = '(', diff --git a/src/Core.ts b/src/Core.ts index 10845f01..e6eecb92 100644 --- a/src/Core.ts +++ b/src/Core.ts @@ -1,5 +1,5 @@ // enter file of limited Konva version with only core functions -export { Konva } from './_CoreInternals.js'; -import { Konva } from './_CoreInternals.js'; +export { Konva } from './_CoreInternals'; +import { Konva } from './_CoreInternals'; export default Konva; diff --git a/src/DragAndDrop.ts b/src/DragAndDrop.ts index 347d5d1f..4b99d4ac 100644 --- a/src/DragAndDrop.ts +++ b/src/DragAndDrop.ts @@ -1,7 +1,7 @@ -import { Konva } from './Global.js'; -import { Node } from './Node.js'; +import { Konva } from './Global'; +import { Node } from './Node'; import { Vector2d } from './types'; -import { Util } from './Util.js'; +import { Util } from './Util'; export const DD = { get isDragging() { diff --git a/src/Factory.ts b/src/Factory.ts index 4366dc26..c62c5caa 100644 --- a/src/Factory.ts +++ b/src/Factory.ts @@ -1,5 +1,5 @@ -import { Util } from './Util.js'; -import { getComponentValidator } from './Validators.js'; +import { Util } from './Util'; +import { getComponentValidator } from './Validators'; var GET = 'get', SET = 'set'; diff --git a/src/FastLayer.ts b/src/FastLayer.ts index dd7028be..a7f59931 100644 --- a/src/FastLayer.ts +++ b/src/FastLayer.ts @@ -1,6 +1,6 @@ -import { Util } from './Util.js'; -import { Layer } from './Layer.js'; -import { _registerNode } from './Global.js'; +import { Util } from './Util'; +import { Layer } from './Layer'; +import { _registerNode } from './Global'; /** * FastLayer constructor. **DEPRECATED!** Please use `Konva.Layer({ listening: false})` instead. Layers are tied to their own canvas element and are used diff --git a/src/Group.ts b/src/Group.ts index 5c65bc1d..4ebb0bd5 100644 --- a/src/Group.ts +++ b/src/Group.ts @@ -1,8 +1,8 @@ -import { Util } from './Util.js'; -import { Container } from './Container.js'; -import { _registerNode } from './Global.js'; -import { Node } from './Node.js'; -import { Shape } from './Shape.js'; +import { Util } from './Util'; +import { Container } from './Container'; +import { _registerNode } from './Global'; +import { Node } from './Node'; +import { Shape } from './Shape'; /** * Group constructor. Groups are used to contain shapes or other groups. diff --git a/src/Layer.ts b/src/Layer.ts index 9cafdad2..d5e1eb5f 100644 --- a/src/Layer.ts +++ b/src/Layer.ts @@ -1,15 +1,15 @@ -import { Util } from './Util.js'; -import { Container, ContainerConfig } from './Container.js'; -import { Node } from './Node.js'; -import { Factory } from './Factory.js'; -import { SceneCanvas, HitCanvas } from './Canvas.js'; -import { Stage } from './Stage.js'; -import { getBooleanValidator } from './Validators.js'; +import { Util } from './Util'; +import { Container, ContainerConfig } from './Container'; +import { Node } from './Node'; +import { Factory } from './Factory'; +import { SceneCanvas, HitCanvas } from './Canvas'; +import { Stage } from './Stage'; +import { getBooleanValidator } from './Validators'; import { GetSet, Vector2d } from './types'; -import { Group } from './Group.js'; -import { Shape, shapes } from './Shape.js'; -import { _registerNode } from './Global.js'; +import { Group } from './Group'; +import { Shape, shapes } from './Shape'; +import { _registerNode } from './Global'; export interface LayerConfig extends ContainerConfig { clearBeforeDraw?: boolean; diff --git a/src/Node.ts b/src/Node.ts index 87eec11e..fe754af7 100644 --- a/src/Node.ts +++ b/src/Node.ts @@ -1,19 +1,19 @@ -import { Util, Transform } from './Util.js'; -import { Factory } from './Factory.js'; -import { SceneCanvas, HitCanvas, Canvas } from './Canvas.js'; -import { Konva } from './Global.js'; -import { Container } from './Container.js'; +import { Util, Transform } from './Util'; +import { Factory } from './Factory'; +import { SceneCanvas, HitCanvas, Canvas } from './Canvas'; +import { Konva } from './Global'; +import { Container } from './Container'; import { GetSet, Vector2d, IRect } from './types'; -import { DD } from './DragAndDrop.js'; +import { DD } from './DragAndDrop'; import { getNumberValidator, getStringValidator, getBooleanValidator, -} from './Validators.js'; -import { Stage } from './Stage.js'; -import { Context } from './Context.js'; -import { Shape } from './Shape.js'; -import { Layer } from './Layer.js'; +} from './Validators'; +import { Stage } from './Stage'; +import { Context } from './Context'; +import { Shape } from './Shape'; +import { Layer } from './Layer'; export const ids: any = {}; export const names: any = {}; @@ -1162,7 +1162,7 @@ export abstract class Node { this._batchingTransformChange = false; if (this._needClearTransformCache) { this._clearCache(TRANSFORM); - this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM, true); + this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM); } this._needClearTransformCache = false; } @@ -1208,7 +1208,7 @@ export abstract class Node { if (haveCachedParent && !top) { // make fake top element // "true" is not a node, but it will just allow skip all caching - top = true; + top = true as any; } var absoluteMatrix = this.getAbsoluteTransform(top).getMatrix(), absoluteTransform = new Transform(), @@ -1553,7 +1553,7 @@ export abstract class Node { * // get one of the parent group * var parentGroups = node.findAncestors('Group'); */ - findAncestors(selector: string, includeSelf?: boolean, stopNode?: Container) { + findAncestors(selector: string, includeSelf?: boolean, stopNode?: Node) { var res: Array = []; if (includeSelf && this._isMatch(selector)) { diff --git a/src/PointerEvents.ts b/src/PointerEvents.ts index 26b69b06..82515948 100644 --- a/src/PointerEvents.ts +++ b/src/PointerEvents.ts @@ -1,8 +1,8 @@ -import { KonvaEventObject } from './Node.js'; -import { Konva } from './Global.js'; +import { KonvaEventObject } from './Node'; +import { Konva } from './Global'; -import { Shape } from './Shape.js'; -import { Stage } from './Stage.js'; +import { Shape } from './Shape'; +import { Stage } from './Stage'; const Captures = new Map(); diff --git a/src/Shape.ts b/src/Shape.ts index aa476c12..61da4332 100644 --- a/src/Shape.ts +++ b/src/Shape.ts @@ -1,20 +1,20 @@ -import { Util } from './Util.js'; -import { Factory } from './Factory.js'; -import { Node, NodeConfig } from './Node.js'; +import { Util } from './Util'; +import { Factory } from './Factory'; +import { Node, NodeConfig } from './Node'; import { getNumberValidator, getNumberOrAutoValidator, getStringValidator, getBooleanValidator, getStringOrGradientValidator, -} from './Validators.js'; +} from './Validators'; -import { Context, SceneContext } from './Context.js'; -import { _registerNode } from './Global.js'; -import * as PointerEvents from './PointerEvents.js'; +import { Context, SceneContext } from './Context'; +import { _registerNode } from './Global'; +import * as PointerEvents from './PointerEvents'; import { GetSet, Vector2d } from './types'; -import { HitCanvas, SceneCanvas } from './Canvas.js'; +import { HitCanvas, SceneCanvas } from './Canvas'; // hack from here https://stackoverflow.com/questions/52667959/what-is-the-purpose-of-bivariancehack-in-typescript-types/52668133#52668133 export type ShapeConfigHandler = { diff --git a/src/Stage.ts b/src/Stage.ts index 6782a5c2..0542a9c9 100644 --- a/src/Stage.ts +++ b/src/Stage.ts @@ -1,14 +1,14 @@ -import { Util } from './Util.js'; -import { Factory } from './Factory.js'; -import { Container, ContainerConfig } from './Container.js'; -import { Konva } from './Global.js'; -import { SceneCanvas, HitCanvas } from './Canvas.js'; +import { Util } from './Util'; +import { Factory } from './Factory'; +import { Container, ContainerConfig } from './Container'; +import { Konva } from './Global'; +import { SceneCanvas, HitCanvas } from './Canvas'; import { GetSet, Vector2d } from './types'; -import { Shape } from './Shape.js'; -import { Layer } from './Layer.js'; -import { DD } from './DragAndDrop.js'; -import { _registerNode } from './Global.js'; -import * as PointerEvents from './PointerEvents.js'; +import { Shape } from './Shape'; +import { Layer } from './Layer'; +import { DD } from './DragAndDrop'; +import { _registerNode } from './Global'; +import * as PointerEvents from './PointerEvents'; export interface StageConfig extends ContainerConfig { container: HTMLDivElement | string; @@ -464,7 +464,6 @@ export class Stage extends Container { this._fire(CONTENT_MOUSEOUT, { evt: evt }); } _mousemove(evt) { - this.setPointersPositions(evt); var pointerId = Util._getFirstPointerId(evt); var targetShape = this.targetShape?.getStage() ? this.targetShape : null; diff --git a/src/Tween.ts b/src/Tween.ts index b82ca988..813ee394 100644 --- a/src/Tween.ts +++ b/src/Tween.ts @@ -1,7 +1,7 @@ -import { Util } from './Util.js'; -import { Animation } from './Animation.js'; -import { Node, NodeConfig } from './Node.js'; -import { Konva } from './Global.js'; +import { Util } from './Util'; +import { Animation } from './Animation'; +import { Node, NodeConfig } from './Node'; +import { Konva } from './Global'; import { Line } from './shapes/Line'; var blacklist = { diff --git a/src/Util.ts b/src/Util.ts index b2e4f07f..d562f4dc 100644 --- a/src/Util.ts +++ b/src/Util.ts @@ -1,4 +1,4 @@ -import { Konva } from './Global.js'; +import { Konva } from './Global'; import { IRect, RGB, RGBA, Vector2d } from './types'; /* diff --git a/src/Validators.ts b/src/Validators.ts index fd3aca74..a41e6537 100644 --- a/src/Validators.ts +++ b/src/Validators.ts @@ -1,5 +1,5 @@ -import { Konva } from './Global.js'; -import { Util } from './Util.js'; +import { Konva } from './Global'; +import { Util } from './Util'; function _formatValue(val: any) { if (Util._isString(val)) { diff --git a/src/_CoreInternals.ts b/src/_CoreInternals.ts index 561a21ce..4a539eda 100644 --- a/src/_CoreInternals.ts +++ b/src/_CoreInternals.ts @@ -1,26 +1,26 @@ // what is core parts of Konva? -import { Konva as Global } from './Global.js'; +import { Konva as Global } from './Global'; -import { Util, Transform } from './Util.js'; -import { Node, ids, names } from './Node.js'; -import { Container } from './Container.js'; +import { Util, Transform } from './Util'; +import { Node, ids, names } from './Node'; +import { Container } from './Container'; -import { Stage, stages } from './Stage.js'; +import { Stage, stages } from './Stage'; -import { Layer } from './Layer.js'; -import { FastLayer } from './FastLayer.js'; +import { Layer } from './Layer'; +import { FastLayer } from './FastLayer'; -import { Group } from './Group.js'; +import { Group } from './Group'; -import { DD } from './DragAndDrop.js'; +import { DD } from './DragAndDrop'; -import { Shape, shapes } from './Shape.js'; +import { Shape, shapes } from './Shape'; -import { Animation } from './Animation.js'; -import { Tween, Easings } from './Tween.js'; +import { Animation } from './Animation'; +import { Tween, Easings } from './Tween'; -import { Context } from './Context.js'; -import { Canvas } from './Canvas.js'; +import { Context } from './Context'; +import { Canvas } from './Canvas'; export const Konva = Util._assign(Global, { Util, diff --git a/src/_FullInternals.ts b/src/_FullInternals.ts index 8384c812..d257f4cd 100644 --- a/src/_FullInternals.ts +++ b/src/_FullInternals.ts @@ -1,46 +1,46 @@ // we need to import core of the Konva and then extend it with all additional objects -import { Konva as Core } from './_CoreInternals.js'; +import { Konva as Core } from './_CoreInternals'; // shapes -import { Arc } from './shapes/Arc.js'; -import { Arrow } from './shapes/Arrow.js'; -import { Circle } from './shapes/Circle.js'; -import { Ellipse } from './shapes/Ellipse.js'; -import { Image } from './shapes/Image.js'; -import { Label, Tag } from './shapes/Label.js'; -import { Line } from './shapes/Line.js'; -import { Path } from './shapes/Path.js'; -import { Rect } from './shapes/Rect.js'; -import { RegularPolygon } from './shapes/RegularPolygon.js'; -import { Ring } from './shapes/Ring.js'; -import { Sprite } from './shapes/Sprite.js'; -import { Star } from './shapes/Star.js'; -import { Text } from './shapes/Text.js'; -import { TextPath } from './shapes/TextPath.js'; -import { Transformer } from './shapes/Transformer.js'; -import { Wedge } from './shapes/Wedge.js'; +import { Arc } from './shapes/Arc'; +import { Arrow } from './shapes/Arrow'; +import { Circle } from './shapes/Circle'; +import { Ellipse } from './shapes/Ellipse'; +import { Image } from './shapes/Image'; +import { Label, Tag } from './shapes/Label'; +import { Line } from './shapes/Line'; +import { Path } from './shapes/Path'; +import { Rect } from './shapes/Rect'; +import { RegularPolygon } from './shapes/RegularPolygon'; +import { Ring } from './shapes/Ring'; +import { Sprite } from './shapes/Sprite'; +import { Star } from './shapes/Star'; +import { Text } from './shapes/Text'; +import { TextPath } from './shapes/TextPath'; +import { Transformer } from './shapes/Transformer'; +import { Wedge } from './shapes/Wedge'; // filters -import { Blur } from './filters/Blur.js'; -import { Brighten } from './filters/Brighten.js'; -import { Contrast } from './filters/Contrast.js'; -import { Emboss } from './filters/Emboss.js'; -import { Enhance } from './filters/Enhance.js'; -import { Grayscale } from './filters/Grayscale.js'; -import { HSL } from './filters/HSL.js'; -import { HSV } from './filters/HSV.js'; -import { Invert } from './filters/Invert.js'; -import { Kaleidoscope } from './filters/Kaleidoscope.js'; -import { Mask } from './filters/Mask.js'; -import { Noise } from './filters/Noise.js'; -import { Pixelate } from './filters/Pixelate.js'; -import { Posterize } from './filters/Posterize.js'; -import { RGB } from './filters/RGB.js'; -import { RGBA } from './filters/RGBA.js'; -import { Sepia } from './filters/Sepia.js'; -import { Solarize } from './filters/Solarize.js'; -import { Threshold } from './filters/Threshold.js'; +import { Blur } from './filters/Blur'; +import { Brighten } from './filters/Brighten'; +import { Contrast } from './filters/Contrast'; +import { Emboss } from './filters/Emboss'; +import { Enhance } from './filters/Enhance'; +import { Grayscale } from './filters/Grayscale'; +import { HSL } from './filters/HSL'; +import { HSV } from './filters/HSV'; +import { Invert } from './filters/Invert'; +import { Kaleidoscope } from './filters/Kaleidoscope'; +import { Mask } from './filters/Mask'; +import { Noise } from './filters/Noise'; +import { Pixelate } from './filters/Pixelate'; +import { Posterize } from './filters/Posterize'; +import { RGB } from './filters/RGB'; +import { RGBA } from './filters/RGBA'; +import { Sepia } from './filters/Sepia'; +import { Solarize } from './filters/Solarize'; +import { Threshold } from './filters/Threshold'; export const Konva = Core.Util._assign(Core, { Arc, diff --git a/src/filters/Blur.ts b/src/filters/Blur.ts index 44b9addd..8abeab78 100644 --- a/src/filters/Blur.ts +++ b/src/filters/Blur.ts @@ -1,6 +1,6 @@ -import { Factory } from '../Factory.js'; -import { Node, Filter } from '../Node.js'; -import { getNumberValidator } from '../Validators.js'; +import { Factory } from '../Factory'; +import { Node, Filter } from '../Node'; +import { getNumberValidator } from '../Validators'; /* the Gauss filter master repo: https://github.com/pavelpower/kineticjsGaussFilter diff --git a/src/filters/Brighten.ts b/src/filters/Brighten.ts index 198d35dd..2e11e823 100644 --- a/src/filters/Brighten.ts +++ b/src/filters/Brighten.ts @@ -1,6 +1,6 @@ -import { Factory } from '../Factory.js'; -import { Node, Filter } from '../Node.js'; -import { getNumberValidator } from '../Validators.js'; +import { Factory } from '../Factory'; +import { Node, Filter } from '../Node'; +import { getNumberValidator } from '../Validators'; /** * Brighten Filter. diff --git a/src/filters/Contrast.ts b/src/filters/Contrast.ts index ee878315..078048e4 100644 --- a/src/filters/Contrast.ts +++ b/src/filters/Contrast.ts @@ -1,6 +1,6 @@ -import { Factory } from '../Factory.js'; -import { Node, Filter } from '../Node.js'; -import { getNumberValidator } from '../Validators.js'; +import { Factory } from '../Factory'; +import { Node, Filter } from '../Node'; +import { getNumberValidator } from '../Validators'; /** * Contrast Filter. * @function diff --git a/src/filters/Emboss.ts b/src/filters/Emboss.ts index f12ee491..99bebca5 100644 --- a/src/filters/Emboss.ts +++ b/src/filters/Emboss.ts @@ -1,7 +1,7 @@ -import { Factory } from '../Factory.js'; -import { Node, Filter } from '../Node.js'; -import { Util } from '../Util.js'; -import { getNumberValidator } from '../Validators.js'; +import { Factory } from '../Factory'; +import { Node, Filter } from '../Node'; +import { Util } from '../Util'; +import { getNumberValidator } from '../Validators'; /** * Emboss Filter. * Pixastic Lib - Emboss filter - v0.1.0 diff --git a/src/filters/Enhance.ts b/src/filters/Enhance.ts index c12f3a73..2bc74943 100644 --- a/src/filters/Enhance.ts +++ b/src/filters/Enhance.ts @@ -1,6 +1,6 @@ -import { Factory } from '../Factory.js'; -import { Node, Filter } from '../Node.js'; -import { getNumberValidator } from '../Validators.js'; +import { Factory } from '../Factory'; +import { Node, Filter } from '../Node'; +import { getNumberValidator } from '../Validators'; function remap(fromValue, fromMin, fromMax, toMin, toMax) { // Compute the range of the data diff --git a/src/filters/Grayscale.ts b/src/filters/Grayscale.ts index 59be65b7..980cd3ad 100644 --- a/src/filters/Grayscale.ts +++ b/src/filters/Grayscale.ts @@ -1,4 +1,4 @@ -import { Filter } from '../Node.js'; +import { Filter } from '../Node'; /** * Grayscale Filter diff --git a/src/filters/HSL.ts b/src/filters/HSL.ts index 02f8a34f..d91506c4 100644 --- a/src/filters/HSL.ts +++ b/src/filters/HSL.ts @@ -1,6 +1,6 @@ -import { Factory } from '../Factory.js'; -import { Node, Filter } from '../Node.js'; -import { getNumberValidator } from '../Validators.js'; +import { Factory } from '../Factory'; +import { Node, Filter } from '../Node'; +import { getNumberValidator } from '../Validators'; Factory.addGetterSetter( Node, diff --git a/src/filters/HSV.ts b/src/filters/HSV.ts index c4836d8a..b3996b3d 100644 --- a/src/filters/HSV.ts +++ b/src/filters/HSV.ts @@ -1,6 +1,6 @@ -import { Factory } from '../Factory.js'; -import { Node, Filter } from '../Node.js'; -import { getNumberValidator } from '../Validators.js'; +import { Factory } from '../Factory'; +import { Node, Filter } from '../Node'; +import { getNumberValidator } from '../Validators'; /** * HSV Filter. Adjusts the hue, saturation and value diff --git a/src/filters/Invert.ts b/src/filters/Invert.ts index fd4a6d60..4b8668a7 100644 --- a/src/filters/Invert.ts +++ b/src/filters/Invert.ts @@ -1,4 +1,4 @@ -import { Filter } from '../Node.js'; +import { Filter } from '../Node'; /** * Invert Filter * @function diff --git a/src/filters/Kaleidoscope.ts b/src/filters/Kaleidoscope.ts index 73fd51ba..f03ec795 100644 --- a/src/filters/Kaleidoscope.ts +++ b/src/filters/Kaleidoscope.ts @@ -1,7 +1,7 @@ -import { Factory } from '../Factory.js'; -import { Node, Filter } from '../Node.js'; -import { Util } from '../Util.js'; -import { getNumberValidator } from '../Validators.js'; +import { Factory } from '../Factory'; +import { Node, Filter } from '../Node'; +import { Util } from '../Util'; +import { getNumberValidator } from '../Validators'; /* * ToPolar Filter. Converts image data to polar coordinates. Performs diff --git a/src/filters/Mask.ts b/src/filters/Mask.ts index d1bc3c67..cb22dc46 100644 --- a/src/filters/Mask.ts +++ b/src/filters/Mask.ts @@ -1,6 +1,6 @@ -import { Factory } from '../Factory.js'; -import { Node, Filter } from '../Node.js'; -import { getNumberValidator } from '../Validators.js'; +import { Factory } from '../Factory'; +import { Node, Filter } from '../Node'; +import { getNumberValidator } from '../Validators'; function pixelAt(idata, x, y) { var idx = (y * idata.width + x) * 4; diff --git a/src/filters/Noise.ts b/src/filters/Noise.ts index 9007a7fc..0b741c1c 100644 --- a/src/filters/Noise.ts +++ b/src/filters/Noise.ts @@ -1,6 +1,6 @@ -import { Factory } from '../Factory.js'; -import { Node, Filter } from '../Node.js'; -import { getNumberValidator } from '../Validators.js'; +import { Factory } from '../Factory'; +import { Node, Filter } from '../Node'; +import { getNumberValidator } from '../Validators'; /** * Noise Filter. Randomly adds or substracts to the color channels diff --git a/src/filters/Pixelate.ts b/src/filters/Pixelate.ts index 4a4b1b12..35c3c630 100644 --- a/src/filters/Pixelate.ts +++ b/src/filters/Pixelate.ts @@ -1,8 +1,8 @@ /*eslint-disable max-depth */ -import { Factory } from '../Factory.js'; -import { Util } from '../Util.js'; -import { Node, Filter } from '../Node.js'; -import { getNumberValidator } from '../Validators.js'; +import { Factory } from '../Factory'; +import { Util } from '../Util'; +import { Node, Filter } from '../Node'; +import { getNumberValidator } from '../Validators'; /** * Pixelate Filter. Averages groups of pixels and redraws diff --git a/src/filters/Posterize.ts b/src/filters/Posterize.ts index 8fb12073..b27c0cf4 100644 --- a/src/filters/Posterize.ts +++ b/src/filters/Posterize.ts @@ -1,6 +1,6 @@ -import { Factory } from '../Factory.js'; -import { Node, Filter } from '../Node.js'; -import { getNumberValidator } from '../Validators.js'; +import { Factory } from '../Factory'; +import { Node, Filter } from '../Node'; +import { getNumberValidator } from '../Validators'; /** * Posterize Filter. Adjusts the channels so that there are no more * than n different values for that channel. This is also applied diff --git a/src/filters/RGB.ts b/src/filters/RGB.ts index 9de05ae5..6af6568c 100644 --- a/src/filters/RGB.ts +++ b/src/filters/RGB.ts @@ -1,6 +1,6 @@ -import { Factory } from '../Factory.js'; -import { Node, Filter } from '../Node.js'; -import { RGBComponent } from '../Validators.js'; +import { Factory } from '../Factory'; +import { Node, Filter } from '../Node'; +import { RGBComponent } from '../Validators'; /** * RGB Filter diff --git a/src/filters/RGBA.ts b/src/filters/RGBA.ts index 324adb0a..5fe10729 100644 --- a/src/filters/RGBA.ts +++ b/src/filters/RGBA.ts @@ -1,6 +1,6 @@ -import { Factory } from '../Factory.js'; -import { Node, Filter } from '../Node.js'; -import { RGBComponent } from '../Validators.js'; +import { Factory } from '../Factory'; +import { Node, Filter } from '../Node'; +import { RGBComponent } from '../Validators'; /** * RGBA Filter diff --git a/src/filters/Sepia.ts b/src/filters/Sepia.ts index 849e76fd..ee0c7870 100644 --- a/src/filters/Sepia.ts +++ b/src/filters/Sepia.ts @@ -1,4 +1,4 @@ -import { Filter } from '../Node.js'; +import { Filter } from '../Node'; // based on https://stackoverflow.com/questions/1061093/how-is-a-sepia-tone-created diff --git a/src/filters/Solarize.ts b/src/filters/Solarize.ts index f5a27816..472a68da 100644 --- a/src/filters/Solarize.ts +++ b/src/filters/Solarize.ts @@ -1,4 +1,4 @@ -import { Filter } from '../Node.js'; +import { Filter } from '../Node'; /** * Solarize Filter * Pixastic Lib - Solarize filter - v0.1.0 diff --git a/src/filters/Threshold.ts b/src/filters/Threshold.ts index 70b6152f..da8d5543 100644 --- a/src/filters/Threshold.ts +++ b/src/filters/Threshold.ts @@ -1,6 +1,6 @@ -import { Factory } from '../Factory.js'; -import { Node, Filter } from '../Node.js'; -import { getNumberValidator } from '../Validators.js'; +import { Factory } from '../Factory'; +import { Node, Filter } from '../Node'; +import { getNumberValidator } from '../Validators'; /** * Threshold Filter. Pushes any value above the mid point to * the max and any value below the mid point to the min. diff --git a/src/index-node.ts b/src/index-node.ts index a0b98bd3..e5dfc134 100644 --- a/src/index-node.ts +++ b/src/index-node.ts @@ -1,5 +1,5 @@ // main entry for umd build for rollup -import { Konva } from './_FullInternals.js'; +import { Konva } from './_FullInternals'; import * as canvas from 'canvas'; const isNode = typeof global.document === 'undefined'; diff --git a/src/shapes/Arc.ts b/src/shapes/Arc.ts index 721e10c4..ff65bfb2 100644 --- a/src/shapes/Arc.ts +++ b/src/shapes/Arc.ts @@ -1,9 +1,9 @@ -import { Factory } from '../Factory.js'; -import { Shape, ShapeConfig } from '../Shape.js'; -import { Konva } from '../Global.js'; +import { Factory } from '../Factory'; +import { Shape, ShapeConfig } from '../Shape'; +import { Konva } from '../Global'; import { GetSet } from '../types'; -import { getNumberValidator, getBooleanValidator } from '../Validators.js'; -import { _registerNode } from '../Global.js'; +import { getNumberValidator, getBooleanValidator } from '../Validators'; +import { _registerNode } from '../Global'; export interface ArcConfig extends ShapeConfig { angle: number; diff --git a/src/shapes/Arrow.ts b/src/shapes/Arrow.ts index 9417d4ba..c78a99d7 100644 --- a/src/shapes/Arrow.ts +++ b/src/shapes/Arrow.ts @@ -1,8 +1,8 @@ -import { Factory } from '../Factory.js'; -import { Line, LineConfig } from './Line.js'; +import { Factory } from '../Factory'; +import { Line, LineConfig } from './Line'; import { GetSet } from '../types'; -import { getNumberValidator } from '../Validators.js'; -import { _registerNode } from '../Global.js'; +import { getNumberValidator } from '../Validators'; +import { _registerNode } from '../Global'; export interface ArrowConfig extends LineConfig { points: number[]; diff --git a/src/shapes/Circle.ts b/src/shapes/Circle.ts index 1bbb23a1..9491ca3b 100644 --- a/src/shapes/Circle.ts +++ b/src/shapes/Circle.ts @@ -1,8 +1,8 @@ -import { Factory } from '../Factory.js'; -import { Shape, ShapeConfig } from '../Shape.js'; +import { Factory } from '../Factory'; +import { Shape, ShapeConfig } from '../Shape'; import { GetSet } from '../types'; -import { getNumberValidator } from '../Validators.js'; -import { _registerNode } from '../Global.js'; +import { getNumberValidator } from '../Validators'; +import { _registerNode } from '../Global'; export interface CircleConfig extends ShapeConfig { radius?: number; diff --git a/src/shapes/Ellipse.ts b/src/shapes/Ellipse.ts index 67970fa6..c410bbfa 100644 --- a/src/shapes/Ellipse.ts +++ b/src/shapes/Ellipse.ts @@ -1,7 +1,7 @@ -import { Factory } from '../Factory.js'; -import { Shape, ShapeConfig } from '../Shape.js'; -import { getNumberValidator } from '../Validators.js'; -import { _registerNode } from '../Global.js'; +import { Factory } from '../Factory'; +import { Shape, ShapeConfig } from '../Shape'; +import { getNumberValidator } from '../Validators'; +import { _registerNode } from '../Global'; import { GetSet, Vector2d } from '../types'; diff --git a/src/shapes/Image.ts b/src/shapes/Image.ts index b52b3141..b0f4fb9e 100644 --- a/src/shapes/Image.ts +++ b/src/shapes/Image.ts @@ -1,11 +1,11 @@ -import { Util } from '../Util.js'; -import { Factory } from '../Factory.js'; -import { Shape, ShapeConfig } from '../Shape.js'; -import { getNumberValidator } from '../Validators.js'; -import { _registerNode } from '../Global.js'; +import { Util } from '../Util'; +import { Factory } from '../Factory'; +import { Shape, ShapeConfig } from '../Shape'; +import { getNumberValidator } from '../Validators'; +import { _registerNode } from '../Global'; import { GetSet, IRect } from '../types'; -import { Context } from '../Context.js'; +import { Context } from '../Context'; export interface ImageConfig extends ShapeConfig { image: CanvasImageSource | undefined; diff --git a/src/shapes/Label.ts b/src/shapes/Label.ts index bcdf053c..d4c3128c 100644 --- a/src/shapes/Label.ts +++ b/src/shapes/Label.ts @@ -1,15 +1,15 @@ -import { Factory } from '../Factory.js'; -import { Shape, ShapeConfig } from '../Shape.js'; -import { Group } from '../Group.js'; -import { ContainerConfig } from '../Container.js'; +import { Factory } from '../Factory'; +import { Shape, ShapeConfig } from '../Shape'; +import { Group } from '../Group'; +import { ContainerConfig } from '../Container'; import { getNumberOrArrayOfNumbersValidator, getNumberValidator, -} from '../Validators.js'; -import { _registerNode } from '../Global.js'; +} from '../Validators'; +import { _registerNode } from '../Global'; import { GetSet } from '../types'; -import { Text } from './Text.js'; +import { Text } from './Text'; export interface LabelConfig extends ContainerConfig {} diff --git a/src/shapes/Line.ts b/src/shapes/Line.ts index b90c7c06..e686bcaa 100644 --- a/src/shapes/Line.ts +++ b/src/shapes/Line.ts @@ -1,11 +1,11 @@ -import { Util } from '../Util.js'; -import { Factory } from '../Factory.js'; -import { Shape, ShapeConfig } from '../Shape.js'; -import { getNumberValidator, getNumberArrayValidator } from '../Validators.js'; -import { _registerNode } from '../Global.js'; +import { Util } from '../Util'; +import { Factory } from '../Factory'; +import { Shape, ShapeConfig } from '../Shape'; +import { getNumberValidator, getNumberArrayValidator } from '../Validators'; +import { _registerNode } from '../Global'; import { GetSet } from '../types'; -import { Context } from '../Context.js'; +import { Context } from '../Context'; export interface LineConfig extends ShapeConfig { points?: number[]; diff --git a/src/shapes/Path.ts b/src/shapes/Path.ts index 3e7f2d61..ecb2b507 100644 --- a/src/shapes/Path.ts +++ b/src/shapes/Path.ts @@ -1,6 +1,6 @@ -import { Factory } from '../Factory.js'; -import { Shape, ShapeConfig } from '../Shape.js'; -import { _registerNode } from '../Global.js'; +import { Factory } from '../Factory'; +import { Shape, ShapeConfig } from '../Shape'; +import { _registerNode } from '../Global'; import { GetSet } from '../types'; diff --git a/src/shapes/Rect.ts b/src/shapes/Rect.ts index e8a9cb94..27549e7f 100644 --- a/src/shapes/Rect.ts +++ b/src/shapes/Rect.ts @@ -1,9 +1,9 @@ -import { Factory } from '../Factory.js'; -import { Shape, ShapeConfig } from '../Shape.js'; -import { _registerNode } from '../Global.js'; +import { Factory } from '../Factory'; +import { Shape, ShapeConfig } from '../Shape'; +import { _registerNode } from '../Global'; import { GetSet } from '../types'; -import { getNumberOrArrayOfNumbersValidator } from '../Validators.js'; +import { getNumberOrArrayOfNumbersValidator } from '../Validators'; export interface RectConfig extends ShapeConfig { cornerRadius?: number | number[]; } diff --git a/src/shapes/RegularPolygon.ts b/src/shapes/RegularPolygon.ts index 29037fd8..580a156f 100644 --- a/src/shapes/RegularPolygon.ts +++ b/src/shapes/RegularPolygon.ts @@ -1,8 +1,8 @@ -import { Factory } from '../Factory.js'; -import { Shape, ShapeConfig } from '../Shape.js'; +import { Factory } from '../Factory'; +import { Shape, ShapeConfig } from '../Shape'; import { GetSet } from '../types'; -import { getNumberValidator } from '../Validators.js'; -import { _registerNode } from '../Global.js'; +import { getNumberValidator } from '../Validators'; +import { _registerNode } from '../Global'; export interface RegularPolygonConfig extends ShapeConfig { sides: number; diff --git a/src/shapes/Ring.ts b/src/shapes/Ring.ts index 90b09f80..bf547f10 100644 --- a/src/shapes/Ring.ts +++ b/src/shapes/Ring.ts @@ -1,8 +1,8 @@ -import { Factory } from '../Factory.js'; -import { Shape, ShapeConfig } from '../Shape.js'; +import { Factory } from '../Factory'; +import { Shape, ShapeConfig } from '../Shape'; import { GetSet } from '../types'; -import { getNumberValidator } from '../Validators.js'; -import { _registerNode } from '../Global.js'; +import { getNumberValidator } from '../Validators'; +import { _registerNode } from '../Global'; export interface RingConfig extends ShapeConfig { innerRadius: number; diff --git a/src/shapes/Sprite.ts b/src/shapes/Sprite.ts index 9de4843d..832615c6 100644 --- a/src/shapes/Sprite.ts +++ b/src/shapes/Sprite.ts @@ -1,8 +1,8 @@ -import { Factory } from '../Factory.js'; -import { Shape, ShapeConfig } from '../Shape.js'; -import { Animation } from '../Animation.js'; -import { getNumberValidator } from '../Validators.js'; -import { _registerNode } from '../Global.js'; +import { Factory } from '../Factory'; +import { Shape, ShapeConfig } from '../Shape'; +import { Animation } from '../Animation'; +import { getNumberValidator } from '../Validators'; +import { _registerNode } from '../Global'; import { GetSet } from '../types'; diff --git a/src/shapes/Star.ts b/src/shapes/Star.ts index 3dcc8283..4df5d97c 100644 --- a/src/shapes/Star.ts +++ b/src/shapes/Star.ts @@ -1,7 +1,7 @@ -import { Factory } from '../Factory.js'; -import { Shape, ShapeConfig } from '../Shape.js'; -import { getNumberValidator } from '../Validators.js'; -import { _registerNode } from '../Global.js'; +import { Factory } from '../Factory'; +import { Shape, ShapeConfig } from '../Shape'; +import { getNumberValidator } from '../Validators'; +import { _registerNode } from '../Global'; import { GetSet } from '../types'; diff --git a/src/shapes/Text.ts b/src/shapes/Text.ts index 3e82c1a0..753d6de7 100644 --- a/src/shapes/Text.ts +++ b/src/shapes/Text.ts @@ -1,14 +1,14 @@ -import { Util } from '../Util.js'; -import { Factory } from '../Factory.js'; -import { Shape, ShapeConfig } from '../Shape.js'; -import { Konva } from '../Global.js'; +import { Util } from '../Util'; +import { Factory } from '../Factory'; +import { Shape, ShapeConfig } from '../Shape'; +import { Konva } from '../Global'; import { getNumberValidator, getStringValidator, getNumberOrAutoValidator, getBooleanValidator, -} from '../Validators.js'; -import { _registerNode } from '../Global.js'; +} from '../Validators'; +import { _registerNode } from '../Global'; import { GetSet } from '../types'; diff --git a/src/shapes/TextPath.ts b/src/shapes/TextPath.ts index 377a865f..50818f4c 100644 --- a/src/shapes/TextPath.ts +++ b/src/shapes/TextPath.ts @@ -1,10 +1,10 @@ -import { Util } from '../Util.js'; -import { Factory } from '../Factory.js'; -import { Shape, ShapeConfig } from '../Shape.js'; -import { Path } from './Path.js'; -import { Text, stringToArray } from './Text.js'; -import { getNumberValidator } from '../Validators.js'; -import { _registerNode } from '../Global.js'; +import { Util } from '../Util'; +import { Factory } from '../Factory'; +import { Shape, ShapeConfig } from '../Shape'; +import { Path } from './Path'; +import { Text, stringToArray } from './Text'; +import { getNumberValidator } from '../Validators'; +import { _registerNode } from '../Global'; import { GetSet, Vector2d } from '../types'; diff --git a/src/shapes/Transformer.ts b/src/shapes/Transformer.ts index fdea4b22..a882b567 100644 --- a/src/shapes/Transformer.ts +++ b/src/shapes/Transformer.ts @@ -1,13 +1,13 @@ -import { Util, Transform } from '../Util.js'; -import { Factory } from '../Factory.js'; -import { Node } from '../Node.js'; -import { Shape } from '../Shape.js'; -import { Rect } from './Rect.js'; -import { Group } from '../Group.js'; -import { ContainerConfig } from '../Container.js'; -import { Konva } from '../Global.js'; -import { getNumberValidator } from '../Validators.js'; -import { _registerNode } from '../Global.js'; +import { Util, Transform } from '../Util'; +import { Factory } from '../Factory'; +import { Node } from '../Node'; +import { Shape } from '../Shape'; +import { Rect } from './Rect'; +import { Group } from '../Group'; +import { ContainerConfig } from '../Container'; +import { Konva } from '../Global'; +import { getNumberValidator } from '../Validators'; +import { _registerNode } from '../Global'; import { GetSet, IRect, Vector2d } from '../types'; diff --git a/src/shapes/Wedge.ts b/src/shapes/Wedge.ts index 30726c0c..28b11792 100644 --- a/src/shapes/Wedge.ts +++ b/src/shapes/Wedge.ts @@ -1,8 +1,8 @@ -import { Factory } from '../Factory.js'; -import { Shape, ShapeConfig } from '../Shape.js'; -import { Konva } from '../Global.js'; -import { getNumberValidator } from '../Validators.js'; -import { _registerNode } from '../Global.js'; +import { Factory } from '../Factory'; +import { Shape, ShapeConfig } from '../Shape'; +import { Konva } from '../Global'; +import { getNumberValidator } from '../Validators'; +import { _registerNode } from '../Global'; import { GetSet } from '../types'; diff --git a/test/unit/test-utils.ts b/test/unit/test-utils.ts index cb6b130b..39d870b5 100644 --- a/test/unit/test-utils.ts +++ b/test/unit/test-utils.ts @@ -1,6 +1,6 @@ import { assert } from 'chai'; -import KonvaModule from '../../src/index'; -import '../../src/index-node'; +import KonvaModule from '../../lib/index'; +import '../../lib/index-node'; export const Konva = KonvaModule; @@ -10,8 +10,8 @@ Konva.enableTrace = true; Konva.showWarnings = true; import { imagediff } from './imagediff'; -import { Layer } from '../../src/Layer.js'; -import { Stage } from '../../src/Stage.js'; +import { Layer } from '../../lib/Layer.js'; +import { Stage } from '../../lib/Stage.js'; // reset some data beforeEach(function () {