diff --git a/CHANGELOG.md b/CHANGELOG.md index f7a7273d..a697fd06 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,9 @@ All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/). +* New property `fillAfterStrokeEnabled` for `Konva.Shape`. See API docs for more information. +* Fix for `Konva.Transformer` when it may fail to draw. + ## 7.1.9 * Fix autodrawing for `Konva.Transformer` when it is on a different layer diff --git a/konva.js b/konva.js index 780b762b..9989eb49 100644 --- a/konva.js +++ b/konva.js @@ -8,7 +8,7 @@ * Konva JavaScript Framework v7.1.9 * http://konvajs.org/ * Licensed under the MIT - * Date: Fri Nov 20 2020 + * Date: Sun Nov 22 2020 * * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva) @@ -1662,8 +1662,14 @@ * @param {Konva.Shape} shape */ Context.prototype.fillStrokeShape = function (shape) { - this.fillShape(shape); - this.strokeShape(shape); + if (shape.attrs.fillAfterStrokeEnabled) { + this.strokeShape(shape); + this.fillShape(shape); + } + else { + this.fillShape(shape); + this.strokeShape(shape); + } }; Context.prototype.getTrace = function (relaxed) { var traceArr = this.traceArr, len = traceArr.length, str = '', n, trace, method, args; @@ -6889,6 +6895,7 @@ * @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 @@ -7463,6 +7470,23 @@ * // set stroke width * shape.strokeWidth(10); */ + Factory.addGetterSetter(Shape, 'fillAfterStrokeEnabled', false); + /** + * get/set fillAfterStrokeEnabled property. By default Konva is drawing filling first, then stroke on top of the fill. + * In rare situations you may want a different behavior. When you have a stroke first then fill on top of it. + * Especially useful for Text objects. + * Default is false. + * @name Konva.Shape#fillAfterStrokeEnabled + * @method + * @param {Boolean} fillAfterStrokeEnabled + * @returns {Boolean} + * @example + * // get stroke width + * var fillAfterStrokeEnabled = shape.fillAfterStrokeEnabled(); + * + * // set stroke width + * shape.fillAfterStrokeEnabled(true); + */ Factory.addGetterSetter(Shape, 'hitStrokeWidth', 'auto', getNumberOrAutoValidator()); /** * get/set stroke width for hit detection. Default value is "auto", it means it will be equals to strokeWidth @@ -9983,6 +10007,7 @@ * @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 @@ -10173,6 +10198,7 @@ * @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 @@ -10468,6 +10494,7 @@ * @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 @@ -10686,6 +10713,7 @@ * @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 @@ -10824,6 +10852,7 @@ * @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 @@ -10999,6 +11028,7 @@ * @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 @@ -11573,6 +11603,7 @@ * @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 @@ -12394,6 +12425,7 @@ * @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 @@ -12547,6 +12579,7 @@ * @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 @@ -12735,6 +12768,7 @@ * @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 @@ -12889,6 +12923,7 @@ * @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 @@ -13257,6 +13292,7 @@ * @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 @@ -13506,6 +13542,7 @@ * @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 @@ -14184,6 +14221,7 @@ * @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 @@ -15653,6 +15691,7 @@ }; Transformer.prototype.update = function () { var _this = this; + var _a; var attrs = this._getNodeRect(); this.rotation(Util._getRotation(attrs.rotation)); var width = attrs.width; @@ -15740,6 +15779,7 @@ x: 0, y: 0, }); + (_a = this.getLayer()) === null || _a === void 0 ? void 0 : _a.batchDraw(); }; /** * determine if transformer is in active transform @@ -16156,6 +16196,7 @@ * @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 diff --git a/konva.min.js b/konva.min.js index c7833902..3b261de4 100644 --- a/konva.min.js +++ b/konva.min.js @@ -3,10 +3,10 @@ * Konva JavaScript Framework v7.1.9 * http://konvajs.org/ * Licensed under the MIT - * Date: Fri Nov 20 2020 + * Date: Sun Nov 22 2020 * * 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;var 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 n=t.indexOf("edge/");return n>0&&parseInt(t.substring(n+5,t.indexOf(".",n)),10)},i=function(t){var i=t.toLowerCase(),n=/(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)||[],r=!!t.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i),o=!!t.match(/IEMobile/i);return{browser:n[1]||"",version:n[2]||"0",isIE:e(i),mobile:r,ieMobile:o}},n="undefined"!=typeof global?global:"undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope?self:{},r={_global:n,version:"7.1.9",isBrowser:"undefined"!=typeof window&&("[object Window]"==={}.toString.call(window)||"[object global]"==={}.toString.call(window)),isUnminified:/param/.test(function(t){}.toString()),dblClickWindow:400,getAngle:function(e){return r.angleDeg?e*t:e},enableTrace:!1,_pointerEventsEnabled:!1,hitOnDragEnabled:!1,captureTouchEventsEnabled:!1,listenClickTap:!1,inDblClickWindow:!1,pixelRatio:void 0,dragDistance:3,angleDeg:!0,showWarnings:!0,dragButtons:[0,1],isDragging:function(){return r.DD.isDragging},isDragReady:function(){return!!r.DD.node},UA:i(n.navigator&&n.navigator.userAgent||""),document:n.document,_injectGlobal:function(t){n.Konva=t},_parseUA:i},o={},a=function(t){o[t.prototype.getClassName()]=t,r[t.prototype.getClassName()]=t},s=function(){function t(){}return t.toCollection=function(e){var i,n=new t,r=e.length;for(i=0;i0?Math.acos(t/a):-Math.acos(t/a),o.scaleX=a,o.scaleY=r/a,o.skewX=(t*i+e*n)/r,o.skewY=0}else if(0!=i||0!=n){var s=Math.sqrt(i*i+n*n);o.rotation=Math.PI/2-(n>0?Math.acos(-i/s):-Math.acos(i/s)),o.scaleX=r/s,o.scaleY=s,o.skewX=0,o.skewY=(t*i+e*n)/r}return o.rotation=f._getRotation(o.rotation),o},t}(),l=Math.PI/180,c=180/Math.PI,d={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]},u=/rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/,p=[],f={_isElement:function(t){return!(!t||1!=t.nodeType)},_isFunction:function(t){return!!(t&&t.constructor&&t.call&&t.apply)},_isPlainObject:function(t){return!!t&&t.constructor===Object},_isArray:function(t){return"[object Array]"===Object.prototype.toString.call(t)},_isNumber:function(t){return"[object Number]"===Object.prototype.toString.call(t)&&!isNaN(t)&&isFinite(t)},_isString:function(t){return"[object String]"===Object.prototype.toString.call(t)},_isBoolean:function(t){return"[object Boolean]"===Object.prototype.toString.call(t)},isObject:function(t){return t instanceof Object},isValidSelector:function(t){if("string"!=typeof t)return!1;var e=t[0];return"#"===e||"."===e||e===e.toUpperCase()},_sign:function(t){return 0===t?0:t>0?1:-1},requestAnimFrame:function(t){p.push(t),1===p.length&&requestAnimationFrame((function(){var t=p;p=[],t.forEach((function(t){t()}))}))},createCanvasElement:function(){var t=document.createElement("canvas");try{t.style=t.style||{}}catch(t){}return t},createImageElement:function(){return document.createElement("img")},_isInDocument:function(t){for(;t=t.parentNode;)if(t==document)return!0;return!1},_simplifyArray:function(t){var e,i,n=[],r=t.length,o=f;for(e=0;e>16&255,g:e>>8&255,b:255&e}},getRandomColor:function(){for(var t=(16777215*Math.random()<<0).toString(16);t.length<6;)t="0"+t;return"#"+t},get:function(t,e){return void 0===t?e:t},getRGB:function(t){var e;return t in d?{r:(e=d[t])[0],g:e[1],b:e[2]}:"#"===t[0]?this._hexToRgb(t.substring(1)):"rgb("===t.substr(0,4)?(e=u.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:function(t){return t=t||"black",f._namedColorToRBA(t)||f._hex3ColorToRGBA(t)||f._hex6ColorToRGBA(t)||f._rgbColorToRGBA(t)||f._rgbaColorToRGBA(t)||f._hslColorToRGBA(t)},_namedColorToRBA:function(t){var e=d[t.toLowerCase()];return e?{r:e[0],g:e[1],b:e[2],a:1}:null},_rgbColorToRGBA:function(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:function(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:function(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:function(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:function(t){if(/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.test(t)){var e=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(t),i=(e[0],e.slice(1)),n=Number(i[0])/360,r=Number(i[1])/100,o=Number(i[2])/100,a=void 0,s=void 0,h=void 0;if(0===r)return h=255*o,{r:Math.round(h),g:Math.round(h),b:Math.round(h),a:1};for(var l=2*o-(a=o<.5?o*(1+r):o+r-o*r),c=[0,0,0],d=0;d<3;d++)(s=n+1/3*-(d-1))<0&&s++,s>1&&s--,h=6*s<1?l+6*(a-l)*s:2*s<1?a:3*s<2?l+(a-l)*(2/3-s)*6:l,c[d]=255*h;return{r:Math.round(c[0]),g:Math.round(c[1]),b:Math.round(c[2]),a:1}}},haveIntersection:function(t,e){return!(e.x>t.x+t.width||e.x+e.widtht.y+t.height||e.y+e.height1?(a=i,s=n,h=(i-r)*(i-r)+(n-o)*(n-o)):h=((a=t+c*(i-t))-r)*(a-r)+((s=e+c*(n-e))-o)*(s-o)}return[a,s,h]},_getProjectionToLine:function(t,e,i){var n=f.cloneObject(t),r=Number.MAX_VALUE;return e.forEach((function(o,a){if(i||a!==e.length-1){var s=e[(a+1)%e.length],h=f._getProjectionToSegment(o.x,o.y,s.x,s.y,t.x,t.y),l=h[0],c=h[1],d=h[2];de.length){var a=e;e=t,t=a}for(n=0;n255?255:t<0?0:Math.round(t)}function y(){if(r.isUnminified)return function(t,e){return f._isNumber(t)||f.warn(g(t)+' is a not valid value for "'+e+'" attribute. The value should be a number.'),t}}function m(t){if(r.isUnminified)return function(e,i){var n=f._isNumber(e),r=f._isArray(e)&&e.length==t;return n||r||f.warn(g(e)+' is a not valid value for "'+i+'" attribute. The value should be a number or Array('+t+")"),e}}function _(){if(r.isUnminified)return function(t,e){return f._isNumber(t)||"auto"===t||f.warn(g(t)+' is a not valid value for "'+e+'" attribute. The value should be a number or "auto".'),t}}function b(){if(r.isUnminified)return function(t,e){return f._isString(t)||f.warn(g(t)+' is a not valid value for "'+e+'" attribute. The value should be a string.'),t}}function x(){if(r.isUnminified)return function(t,e){var i=f._isString(t),n="[object CanvasGradient]"===Object.prototype.toString.call(t);return i||n||f.warn(g(t)+' is a not valid value for "'+e+'" attribute. The value should be a string or a native gradient.'),t}}function S(){if(r.isUnminified)return function(t,e){return!0===t||!1===t||f.warn(g(t)+' is a not valid value for "'+e+'" attribute. The value should be a boolean.'),t}}var w={addGetterSetter:function(t,e,i,n,r){w.addGetter(t,e,i),w.addSetter(t,e,n,r),w.addOverloadedGetterSetter(t,e)},addGetter:function(t,e,i){var n="get"+f._capitalize(e);t.prototype[n]=t.prototype[n]||function(){var t=this.attrs[e];return void 0===t?i:t}},addSetter:function(t,e,i,n){var r="set"+f._capitalize(e);t.prototype[r]||w.overWriteSetter(t,e,i,n)},overWriteSetter:function(t,e,i,n){var r="set"+f._capitalize(e);t.prototype[r]=function(t){return i&&null!=t&&(t=i.call(this,t,e)),this._setAttr(e,t),n&&n.call(this),this}},addComponentsGetterSetter:function(t,e,i,n,o){var a,s,h=i.length,l=f._capitalize,c="get"+l(e),d="set"+l(e);t.prototype[c]=function(){var t={};for(a=0;a=100&&e.shift()},t.prototype.reset=function(){var t=this.getCanvas().getPixelRatio();this.setTransform(1*t,0,0,1*t,0,0)},t.prototype.getCanvas=function(){return this.canvas},t.prototype.clear=function(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)},t.prototype._applyLineCap=function(t){var e=t.getLineCap();e&&this.setAttr("lineCap",e)},t.prototype._applyOpacity=function(t){var e=t.getAbsoluteOpacity();1!==e&&this.setAttr("globalAlpha",e)},t.prototype._applyLineJoin=function(t){var e=t.attrs.lineJoin;e&&this.setAttr("lineJoin",e)},t.prototype.setAttr=function(t,e){this._context[t]=e},t.prototype.arc=function(t,e,i,n,r,o){this._context.arc(t,e,i,n,r,o)},t.prototype.arcTo=function(t,e,i,n,r){this._context.arcTo(t,e,i,n,r)},t.prototype.beginPath=function(){this._context.beginPath()},t.prototype.bezierCurveTo=function(t,e,i,n,r,o){this._context.bezierCurveTo(t,e,i,n,r,o)},t.prototype.clearRect=function(t,e,i,n){this._context.clearRect(t,e,i,n)},t.prototype.clip=function(){this._context.clip()},t.prototype.closePath=function(){this._context.closePath()},t.prototype.createImageData=function(t,e){var i=arguments;return 2===i.length?this._context.createImageData(t,e):1===i.length?this._context.createImageData(t):void 0},t.prototype.createLinearGradient=function(t,e,i,n){return this._context.createLinearGradient(t,e,i,n)},t.prototype.createPattern=function(t,e){return this._context.createPattern(t,e)},t.prototype.createRadialGradient=function(t,e,i,n,r,o){return this._context.createRadialGradient(t,e,i,n,r,o)},t.prototype.drawImage=function(t,e,i,n,r,o,a,s,h){var l=arguments,c=this._context;3===l.length?c.drawImage(t,e,i):5===l.length?c.drawImage(t,e,i,n,r):9===l.length&&c.drawImage(t,e,i,n,r,o,a,s,h)},t.prototype.ellipse=function(t,e,i,n,r,o,a,s){this._context.ellipse(t,e,i,n,r,o,a,s)},t.prototype.isPointInPath=function(t,e){return this._context.isPointInPath(t,e)},t.prototype.fill=function(){this._context.fill()},t.prototype.fillRect=function(t,e,i,n){this._context.fillRect(t,e,i,n)},t.prototype.strokeRect=function(t,e,i,n){this._context.strokeRect(t,e,i,n)},t.prototype.fillText=function(t,e,i){this._context.fillText(t,e,i)},t.prototype.measureText=function(t){return this._context.measureText(t)},t.prototype.getImageData=function(t,e,i,n){return this._context.getImageData(t,e,i,n)},t.prototype.lineTo=function(t,e){this._context.lineTo(t,e)},t.prototype.moveTo=function(t,e){this._context.moveTo(t,e)},t.prototype.rect=function(t,e,i,n){this._context.rect(t,e,i,n)},t.prototype.putImageData=function(t,e,i){this._context.putImageData(t,e,i)},t.prototype.quadraticCurveTo=function(t,e,i,n){this._context.quadraticCurveTo(t,e,i,n)},t.prototype.restore=function(){this._context.restore()},t.prototype.rotate=function(t){this._context.rotate(t)},t.prototype.save=function(){this._context.save()},t.prototype.scale=function(t,e){this._context.scale(t,e)},t.prototype.setLineDash=function(t){this._context.setLineDash?this._context.setLineDash(t):"mozDash"in this._context?this._context.mozDash=t:"webkitLineDash"in this._context&&(this._context.webkitLineDash=t)},t.prototype.getLineDash=function(){return this._context.getLineDash()},t.prototype.setTransform=function(t,e,i,n,r,o){this._context.setTransform(t,e,i,n,r,o)},t.prototype.stroke=function(){this._context.stroke()},t.prototype.strokeText=function(t,e,i,n){this._context.strokeText(t,e,i,n)},t.prototype.transform=function(t,e,i,n,r,o){this._context.transform(t,e,i,n,r,o)},t.prototype.translate=function(t,e){this._context.translate(t,e)},t.prototype._enableTrace=function(){var t,e,i=this,n=T.length,r=f._simplifyArray,o=this.setAttr,a=function(t){var n,o=i[t];i[t]=function(){return e=r(Array.prototype.slice.call(arguments,0)),n=o.apply(i,arguments),i._trace({method:t,args:e}),n}};for(t=0;t0&&t[0].getDepth()<=r&&s(t)}(o.getStage().getChildren()),a},t.prototype.getDepth=function(){for(var t=0,e=this.parent;e;)t++,e=e.parent;return t},t.prototype._batchTransformChanges=function(t){this._batchingTransformChange=!0,t(),this._batchingTransformChange=!1,this._needClearTransformCache&&(this._clearCache("transform"),this._clearSelfAndDescendantCache("absoluteTransform",!0)),this._needClearTransformCache=!1},t.prototype.setPosition=function(t){var e=this;return this._batchTransformChanges((function(){e.x(t.x),e.y(t.y)})),this},t.prototype.getPosition=function(){return{x:this.x(),y:this.y()}},t.prototype.getAbsolutePosition=function(t){for(var e=!1,i=this.parent;i;){if(i.isCached()){e=!0;break}i=i.parent}e&&!t&&(t=!0);var n=this.getAbsoluteTransform(t).getMatrix(),r=new h,o=this.offset();return r.m=n.slice(),r.translate(o.x,o.y),r.getTranslation()},t.prototype.setAbsolutePosition=function(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},t.prototype._setTransform=function(t){var e;for(e in t)this.attrs[e]=t[e]},t.prototype._clearTransform=function(){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},t.prototype.move=function(t){var e=t.x,i=t.y,n=this.x(),r=this.y();return void 0!==e&&(n+=e),void 0!==i&&(r+=i),this.setPosition({x:n,y:r}),this},t.prototype._eachAncestorReverse=function(t,e){var i,n,r=[],o=this.getParent();if(!e||e._id!==this._id){for(r.unshift(this);o&&(!e||o._id!==e._id);)r.unshift(o),o=o.parent;for(i=r.length,n=0;n0&&(this.parent.children.splice(t,1),this.parent.children.splice(t-1,0,this),this.parent._setChildrenIndices(),!0)},t.prototype.moveToBottom=function(){if(!this.parent)return f.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)},t.prototype.setZIndex=function(t){if(!this.parent)return f.warn("Node has no parent. zIndex parameter is ignored."),this;(t<0||t>=this.parent.children.length)&&f.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},t.prototype.getAbsoluteOpacity=function(){return this._getCache("absoluteOpacity",this._getAbsoluteOpacity)},t.prototype._getAbsoluteOpacity=function(){var t=this.opacity(),e=this.getParent();return e&&!e._isUnderCache&&(t*=e.getAbsoluteOpacity()),t},t.prototype.moveTo=function(t){return this.getParent()!==t&&(this._remove(),t.add(this)),this},t.prototype.toObject=function(){var t,e,i,n,r={},o=this.getAttrs();for(t in r.attrs={},o)e=o[t],f.isObject(e)&&!f._isPlainObject(e)&&!f._isArray(e)||(i="function"==typeof this[t]&&this[t],delete o[t],n=i?i.call(this):null,o[t]=e,n!==e&&(r.attrs[t]=e));return r.className=this.getClassName(),f._prepareToStringify(r)},t.prototype.toJSON=function(){return JSON.stringify(this.toObject())},t.prototype.getParent=function(){return this.parent},t.prototype.findAncestors=function(t,e,i){var n=[];e&&this._isMatch(t)&&n.push(this);for(var r=this.parent;r;){if(r===i)return n;r._isMatch(t)&&n.push(r),r=r.parent}return n},t.prototype.isAncestorOf=function(t){return!1},t.prototype.findAncestor=function(t,e,i){return this.findAncestors(t,e,i)[0]},t.prototype._isMatch=function(t){if(!t)return!1;if("function"==typeof t)return t(this);var e,i,n=t.replace(/ /g,"").split(","),r=n.length;for(e=0;e=0)&&!this.isDragging()){var i=!1;D._dragElements.forEach((function(t){e.isAncestorOf(t.node)&&(i=!0)})),i||this._createDragElement(t)}}))},t.prototype._dragChange=function(){if(this.attrs.draggable)this._listenDrag();else{if(this._dragCleanup(),!this.getStage())return;var t=D._dragElements.get(this._id),e=t&&"dragging"===t.dragStatus,i=t&&"ready"===t.dragStatus;e?this.stopDrag():i&&D._dragElements.delete(this._id)}},t.prototype._dragCleanup=function(){this.off("mousedown.konva"),this.off("touchstart.konva")},t.create=function(t,e){return f._isString(t)&&(t=JSON.parse(t)),this._createNode(t,e)},t._createNode=function(e,i){var n,r,a,s=t.prototype.getClassName.call(e),h=e.children;if(i&&(e.attrs.container=i),o[s]||(f.warn('Can not find a node with class name "'+s+'". Fallback to "Shape".'),s="Shape"),n=new(0,o[s])(e.attrs),h)for(r=h.length,a=0;a0},e.prototype.removeChildren=function(){for(var t,e=0;e1){for(var i=0;i0?e[0]:void 0},e.prototype._generalFind=function(t,e){var i=[];return this._descendants((function(n){var r=n._isMatch(t);return r&&i.push(n),!(!r||!e)})),s.toCollection(i)},e.prototype._descendants=function(t){for(var e=0;e-1&&nt.splice(i,1),this},e.prototype.getPointerPosition=function(){var t=this._pointerPositions[0]||this._changedPointerPositions[0];return t?{x:t.x,y:t.y}:(f.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)},e.prototype._getPointerById=function(t){return this._pointerPositions.find((function(e){return e.id===t}))},e.prototype.getPointersPositions=function(){return this._pointerPositions},e.prototype.getStage=function(){return this},e.prototype.getContent=function(){return this.content},e.prototype._toKonvaCanvas=function(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 E({width:t.width,height:t.height,pixelRatio:t.pixelRatio||1}),i=e.getContext()._context,n=this.children;return(t.x||t.y)&&i.translate(-1*t.x,-1*t.y),n.each((function(e){if(e.isVisible()){var n=e._toKonvaCanvas(t);i.drawImage(n._canvas,t.x,t.y,n.getWidth()/n.getPixelRatio(),n.getHeight()/n.getPixelRatio())}})),e},e.prototype.getIntersection=function(t,e){if(!t)return null;var i,n,r=this.children;for(i=r.length-1;i>=0;i--)if(n=r[i].getIntersection(t,e))return n;return null},e.prototype._resizeDOM=function(){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.each((function(i){i.setSize({width:t,height:e}),i.draw()}))},e.prototype.add=function(e){if(arguments.length>1){for(var i=0;i5&&f.warn("The stage has "+n+" 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."),e.setSize({width:this.width(),height:this.height()}),e.draw(),r.isBrowser&&this.content.appendChild(e.canvas._canvas),this},e.prototype.getParent=function(){return null},e.prototype.getLayer=function(){return null},e.prototype.hasPointerCapture=function(t){return J(t,this)},e.prototype.setPointerCapture=function(t){Z(t,this)},e.prototype.releaseCapture=function(t){$(t)},e.prototype.getLayers=function(){return this.getChildren()},e.prototype._bindContentEvents=function(){if(r.isBrowser)for(var t=0;t0},e.prototype.destroy=function(){return X.prototype.destroy.call(this),delete ht[this.colorKey],delete this.colorKey,this},e.prototype._useBufferCanvas=function(t){var e;if(!this.getStage())return!1;if(!(null===(e=this.attrs.perfectDrawEnabled)||void 0===e||e))return!1;var i=t||this.hasFill(),n=this.hasStroke(),r=1!==this.getAbsoluteOpacity();if(i&&n&&r)return!0;var o=this.hasShadow(),a=this.shadowForStrokeEnabled();return!!(i&&n&&o&&a)},e.prototype.setStrokeHitEnabled=function(t){f.warn("strokeHitEnabled property is deprecated. Please use hitStrokeWidth instead."),t?this.hitStrokeWidth("auto"):this.hitStrokeWidth(0)},e.prototype.getStrokeHitEnabled=function(){return 0!==this.hitStrokeWidth()},e.prototype.getSelfRect=function(){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}},e.prototype.getClientRect=function(t){void 0===t&&(t={});var e=t.skipTransform,i=t.relativeTo,n=this.getSelfRect(),r=!t.skipStroke&&this.hasStroke()&&this.strokeWidth()||0,o=n.width+r,a=n.height+r,s=!t.skipShadow&&this.hasShadow(),h=s?this.shadowOffsetX():0,l=s?this.shadowOffsetY():0,c=o+Math.abs(h),d=a+Math.abs(l),u=s&&this.shadowBlur()||0,p=c+2*u,f=d+2*u,g=0;Math.round(r/2)!==r/2&&(g=1);var v={width:p+g,height:f+g,x:-Math.round(r/2+u)+Math.min(h,0)+n.x,y:-Math.round(r/2+u)+Math.min(l,0)+n.y};return e?v:this._transformedRect(v,i)},e.prototype.drawScene=function(t,e){var i,n,r=this.getLayer(),o=t||r.getCanvas(),a=o.getContext(),s=this._getCanvasCache(),h=this.getSceneFunc(),l=this.hasShadow(),c=o.isCache,d=o.isCache,u=e===this;if(!this.isVisible()&&!c)return this;if(s){a.save();var p=this.getAbsoluteTransform(e).getMatrix();return a.transform(p[0],p[1],p[2],p[3],p[4],p[5]),this._drawCachedSceneCanvas(a),a.restore(),this}if(!h)return this;if(a.save(),this._useBufferCanvas()&&!d){(n=(i=this.getStage().bufferCanvas).getContext()).clear(),n.save(),n._applyLineJoin(this);var f=this.getAbsoluteTransform(e).getMatrix();n.transform(f[0],f[1],f[2],f[3],f[4],f[5]),h.call(this,n,this),n.restore();var g=i.pixelRatio;l&&a._applyShadow(this),a._applyOpacity(this),a._applyGlobalCompositeOperation(this),a.drawImage(i._canvas,0,0,i.width/g,i.height/g)}else{if(a._applyLineJoin(this),!u){f=this.getAbsoluteTransform(e).getMatrix();a.transform(f[0],f[1],f[2],f[3],f[4],f[5]),a._applyOpacity(this),a._applyGlobalCompositeOperation(this)}l&&a._applyShadow(this),h.call(this,a,this)}return a.restore(),this},e.prototype.drawHit=function(t,e){if(!this.shouldDrawHit(e))return this;var i=this.getLayer(),n=t||i.hitCanvas,r=n&&n.getContext(),o=this.hitFunc()||this.sceneFunc(),a=this._getCanvasCache(),s=a&&a.hit;if(this.colorKey||(console.log(this),f.warn("Looks like your canvas has a destroyed shape in it. Do not reuse shape after you destroyed it. See the shape in logs above. If you want to reuse shape you should call remove() instead of destroy()")),s){r.save();var h=this.getAbsoluteTransform(e).getMatrix();return r.transform(h[0],h[1],h[2],h[3],h[4],h[5]),this._drawCachedHitCanvas(r),r.restore(),this}if(!o)return this;if(r.save(),r._applyLineJoin(this),!(this===e)){var l=this.getAbsoluteTransform(e).getMatrix();r.transform(l[0],l[1],l[2],l[3],l[4],l[5])}return o.call(this,r,this),r.restore(),this},e.prototype.drawHitFromCache=function(t){void 0===t&&(t=0);var e,i,n,r,o,a=this._getCanvasCache(),s=this._getCachedSceneCanvas(),h=a.hit,l=h.getContext(),c=h.getWidth(),d=h.getHeight();l.clear(),l.drawImage(s._canvas,0,0,c,d);try{for(n=(i=(e=l.getImageData(0,0,c,d)).data).length,r=f._hexToRgb(this.colorKey),o=0;ot?(i[o]=r.r,i[o+1]=r.g,i[o+2]=r.b,i[o+3]=255):i[o+3]=0;l.putImageData(e,0,0)}catch(t){f.error("Unable to draw hit graph from cached scene canvas. "+t.message)}return this},e.prototype.hasPointerCapture=function(t){return J(t,this)},e.prototype.setPointerCapture=function(t){Z(t,this)},e.prototype.releaseCapture=function(t){$(t)},e}(X);lt.prototype._fillFunc=function(t){t.fill()},lt.prototype._strokeFunc=function(t){t.stroke()},lt.prototype._fillFuncHit=function(t){t.fill()},lt.prototype._strokeFuncHit=function(t){t.stroke()},lt.prototype._centroid=!1,lt.prototype.nodeType="Shape",a(lt),lt.prototype.eventListeners={},lt.prototype.on.call(lt.prototype,"shadowColorChange.konva shadowBlurChange.konva shadowOffsetChange.konva shadowOpacityChange.konva shadowEnabledChange.konva",(function(){this._clearCache("hasShadow")})),lt.prototype.on.call(lt.prototype,"shadowColorChange.konva shadowOpacityChange.konva shadowEnabledChange.konva",(function(){this._clearCache("shadowRGBA")})),lt.prototype.on.call(lt.prototype,"fillPriorityChange.konva fillPatternImageChange.konva fillPatternRepeatChange.konva fillPatternScaleXChange.konva fillPatternScaleYChange.konva",(function(){this._clearCache("patternImage")})),lt.prototype.on.call(lt.prototype,"fillPriorityChange.konva fillLinearGradientColorStopsChange.konva fillLinearGradientStartPointXChange.konva fillLinearGradientStartPointYChange.konva fillLinearGradientEndPointXChange.konva fillLinearGradientEndPointYChange.konva",(function(){this._clearCache("linearGradient")})),lt.prototype.on.call(lt.prototype,"fillPriorityChange.konva fillRadialGradientColorStopsChange.konva fillRadialGradientStartPointXChange.konva fillRadialGradientStartPointYChange.konva fillRadialGradientEndPointXChange.konva fillRadialGradientEndPointYChange.konva fillRadialGradientStartRadiusChange.konva fillRadialGradientEndRadiusChange.konva",(function(){this._clearCache("radialGradient")})),w.addGetterSetter(lt,"stroke",void 0,x()),w.addGetterSetter(lt,"strokeWidth",2,y()),w.addGetterSetter(lt,"hitStrokeWidth","auto",_()),w.addGetterSetter(lt,"strokeHitEnabled",!0,S()),w.addGetterSetter(lt,"perfectDrawEnabled",!0,S()),w.addGetterSetter(lt,"shadowForStrokeEnabled",!0,S()),w.addGetterSetter(lt,"lineJoin"),w.addGetterSetter(lt,"lineCap"),w.addGetterSetter(lt,"sceneFunc"),w.addGetterSetter(lt,"hitFunc"),w.addGetterSetter(lt,"dash"),w.addGetterSetter(lt,"dashOffset",0,y()),w.addGetterSetter(lt,"shadowColor",void 0,b()),w.addGetterSetter(lt,"shadowBlur",0,y()),w.addGetterSetter(lt,"shadowOpacity",1,y()),w.addComponentsGetterSetter(lt,"shadowOffset",["x","y"]),w.addGetterSetter(lt,"shadowOffsetX",0,y()),w.addGetterSetter(lt,"shadowOffsetY",0,y()),w.addGetterSetter(lt,"fillPatternImage"),w.addGetterSetter(lt,"fill",void 0,x()),w.addGetterSetter(lt,"fillPatternX",0,y()),w.addGetterSetter(lt,"fillPatternY",0,y()),w.addGetterSetter(lt,"fillLinearGradientColorStops"),w.addGetterSetter(lt,"strokeLinearGradientColorStops"),w.addGetterSetter(lt,"fillRadialGradientStartRadius",0),w.addGetterSetter(lt,"fillRadialGradientEndRadius",0),w.addGetterSetter(lt,"fillRadialGradientColorStops"),w.addGetterSetter(lt,"fillPatternRepeat","repeat"),w.addGetterSetter(lt,"fillEnabled",!0),w.addGetterSetter(lt,"strokeEnabled",!0),w.addGetterSetter(lt,"shadowEnabled",!0),w.addGetterSetter(lt,"dashEnabled",!0),w.addGetterSetter(lt,"strokeScaleEnabled",!0),w.addGetterSetter(lt,"fillPriority","color"),w.addComponentsGetterSetter(lt,"fillPatternOffset",["x","y"]),w.addGetterSetter(lt,"fillPatternOffsetX",0,y()),w.addGetterSetter(lt,"fillPatternOffsetY",0,y()),w.addComponentsGetterSetter(lt,"fillPatternScale",["x","y"]),w.addGetterSetter(lt,"fillPatternScaleX",1,y()),w.addGetterSetter(lt,"fillPatternScaleY",1,y()),w.addComponentsGetterSetter(lt,"fillLinearGradientStartPoint",["x","y"]),w.addComponentsGetterSetter(lt,"strokeLinearGradientStartPoint",["x","y"]),w.addGetterSetter(lt,"fillLinearGradientStartPointX",0),w.addGetterSetter(lt,"strokeLinearGradientStartPointX",0),w.addGetterSetter(lt,"fillLinearGradientStartPointY",0),w.addGetterSetter(lt,"strokeLinearGradientStartPointY",0),w.addComponentsGetterSetter(lt,"fillLinearGradientEndPoint",["x","y"]),w.addComponentsGetterSetter(lt,"strokeLinearGradientEndPoint",["x","y"]),w.addGetterSetter(lt,"fillLinearGradientEndPointX",0),w.addGetterSetter(lt,"strokeLinearGradientEndPointX",0),w.addGetterSetter(lt,"fillLinearGradientEndPointY",0),w.addGetterSetter(lt,"strokeLinearGradientEndPointY",0),w.addComponentsGetterSetter(lt,"fillRadialGradientStartPoint",["x","y"]),w.addGetterSetter(lt,"fillRadialGradientStartPointX",0),w.addGetterSetter(lt,"fillRadialGradientStartPointY",0),w.addComponentsGetterSetter(lt,"fillRadialGradientEndPoint",["x","y"]),w.addGetterSetter(lt,"fillRadialGradientEndPointX",0),w.addGetterSetter(lt,"fillRadialGradientEndPointY",0),w.addGetterSetter(lt,"fillPatternRotation",0),w.backCompat(lt,{dashArray:"dash",getDashArray:"getDash",setDashArray:"getDash",drawFunc:"sceneFunc",getDrawFunc:"getSceneFunc",setDrawFunc:"setSceneFunc",drawHitFunc:"hitFunc",getDrawHitFunc:"getHitFunc",setDrawHitFunc:"setHitFunc"}),s.mapMethods(lt);var ct=[{x:0,y:0},{x:-1,y:-1},{x:1,y:-1},{x:1,y:1},{x:-1,y:1}],dt=ct.length,ut=function(t){function e(e){var i=t.call(this,e)||this;return i.canvas=new E,i.hitCanvas=new O({pixelRatio:1}),i._waitingForDraw=!1,i.on("visibleChange.konva",i._checkVisibility),i._checkVisibility(),i.on("imageSmoothingEnabledChange.konva",i._setSmoothEnabled),i._setSmoothEnabled(),i}return P(e,t),e.prototype.createPNGStream=function(){return this.canvas._canvas.createPNGStream()},e.prototype.getCanvas=function(){return this.canvas},e.prototype.getHitCanvas=function(){return this.hitCanvas},e.prototype.getContext=function(){return this.getCanvas().getContext()},e.prototype.clear=function(t){return this.getContext().clear(t),this.getHitCanvas().getContext().clear(t),this},e.prototype.setZIndex=function(e){t.prototype.setZIndex.call(this,e);var i=this.getStage();return i&&(i.content.removeChild(this.getCanvas()._canvas),e0?{antialiased:!0}:{}},e.prototype.drawScene=function(t,e){var i=this.getLayer(),n=t||i&&i.getCanvas();return this._fire("beforeDraw",{node:this}),this.clearBeforeDraw()&&n.getContext().clear(),U.prototype.drawScene.call(this,n,e),this._fire("draw",{node:this}),this},e.prototype.drawHit=function(t,e){var i=this.getLayer(),n=t||i&&i.hitCanvas;return i&&i.clearBeforeDraw()&&i.getHitCanvas().getContext().clear(),U.prototype.drawHit.call(this,n,e),this},e.prototype.enableHitGraph=function(){return this.hitGraphEnabled(!0),this},e.prototype.disableHitGraph=function(){return this.hitGraphEnabled(!1),this},e.prototype.setHitGraphEnabled=function(t){f.warn("hitGraphEnabled method is deprecated. Please use layer.listening() instead."),this.listening(t)},e.prototype.getHitGraphEnabled=function(t){return f.warn("hitGraphEnabled method is deprecated. Please use layer.listening() instead."),this.listening()},e.prototype.toggleHitCanvas=function(){if(this.parent){var t=this.parent;!!this.hitCanvas._canvas.parentNode?t.content.removeChild(this.hitCanvas._canvas):t.content.appendChild(this.hitCanvas._canvas)}},e}(U);ut.prototype.nodeType="Layer",a(ut),w.addGetterSetter(ut,"imageSmoothingEnabled",!0),w.addGetterSetter(ut,"clearBeforeDraw",!0),w.addGetterSetter(ut,"hitGraphEnabled",!0,S()),s.mapMethods(ut);var pt=function(t){function e(e){var i=t.call(this,e)||this;return i.listening(!1),f.warn('Konva.Fast layer is deprecated. Please use "new Konva.Layer({ listening: false })" instead.'),i}return P(e,t),e}(ut);pt.prototype.nodeType="FastLayer",a(pt),s.mapMethods(pt);var ft=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return P(e,t),e.prototype._validateAdd=function(t){var e=t.getType();"Group"!==e&&"Shape"!==e&&f.throw("You may only add groups and shapes to groups.")},e}(U);ft.prototype.nodeType="Group",a(ft),s.mapMethods(ft);var gt=n.performance&&n.performance.now?function(){return n.performance.now()}:function(){return(new Date).getTime()},vt=function(){function t(e,i){this.id=t.animIdCounter++,this.frame={time:0,timeDiff:0,lastTime:gt(),frameRate:0},this.func=e,this.setLayers(i)}return t.prototype.setLayers=function(t){var e=[];return e=t?t.length>0?t:[t]:[],this.layers=e,this},t.prototype.getLayers=function(){return this.layers},t.prototype.addLayer=function(t){var e,i=this.layers,n=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())},t.prototype.getTime=function(){return this._time},t.prototype.setPosition=function(t){this.prevPos=this._pos,this.propFunc(t),this._pos=t},t.prototype.getPosition=function(t){return void 0===t&&(t=this._time),this.func(t,this.begin,this._change,this.duration)},t.prototype.play=function(){this.state=2,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onPlay")},t.prototype.reverse=function(){this.state=3,this._time=this.duration-this._time,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onReverse")},t.prototype.seek=function(t){this.pause(),this._time=t,this.update(),this.fire("onSeek")},t.prototype.reset=function(){this.pause(),this._time=0,this.update(),this.fire("onReset")},t.prototype.finish=function(){this.pause(),this._time=this.duration,this.update(),this.fire("onFinish")},t.prototype.update=function(){this.setPosition(this.getPosition(this._time)),this.fire("onUpdate")},t.prototype.onEnterFrame=function(){var t=this.getTimer()-this._startTime;2===this.state?this.setTime(t):3===this.state&&this.setTime(this.duration-t)},t.prototype.pause=function(){this.state=1,this.fire("onPause")},t.prototype.getTimer=function(){return(new Date).getTime()},t}(),xt=function(){function t(e){var i,n,o=this,a=e.node,s=a._id,h=e.easing||St.Linear,l=!!e.yoyo;i=void 0===e.duration?.3:0===e.duration?.001:e.duration,this.node=a,this._id=mt++;var c=a.getLayer()||(a instanceof r.Stage?a.getLayers():null);for(n in c||f.error("Tween constructor have `node` that is not in a layer. Please add node into layer first."),this.anim=new vt((function(){o.tween.onEnterFrame()}),c),this.tween=new bt(n,(function(t){o._tweenFunc(t)}),h,0,1,1e3*i,l),this._addListeners(),t.attrs[s]||(t.attrs[s]={}),t.attrs[s][this._id]||(t.attrs[s][this._id]={}),t.tweens[s]||(t.tweens[s]={}),e)void 0===yt[n]&&this._addAttr(n,e[n]);this.reset(),this.onFinish=e.onFinish,this.onReset=e.onReset,this.onUpdate=e.onUpdate}return t.prototype._addAttr=function(e,i){var n,r,o,a,s,h,l,c,d=this.node,u=d._id;if((o=t.tweens[u][e])&&delete t.attrs[u][o][e],n=d.getAttr(e),f._isArray(i))if(r=[],s=Math.max(i.length,n.length),"points"===e&&i.length!==n.length&&(i.length>n.length?(l=n,n=f._prepareArrayForTween(n,i,d.closed())):(h=i,i=f._prepareArrayForTween(i,n,d.closed()))),0===e.indexOf("fill"))for(a=0;a4){for(i=(e=this.getTensionPoints()).length,n=s?0:4,s||t.quadraticCurveTo(e[0],e[1],e[2],e[3]);n4;o&&(r=this.getTensionPoints());var a,s,h=n.length;o?(a=n[h-2]-(r[r.length-2]+r[r.length-4])/2,s=n[h-1]-(r[r.length-1]+r[r.length-3])/2):(a=n[h-2]-n[h-4],s=n[h-1]-n[h-3]);var l=(Math.atan2(s,a)+i)%i,c=this.pointerLength(),d=this.pointerWidth();e.save(),e.beginPath(),e.translate(n[h-2],n[h-1]),e.rotate(l),e.moveTo(0,0),e.lineTo(-c,d/2),e.lineTo(-c,-d/2),e.closePath(),e.restore(),this.pointerAtBeginning()&&(e.save(),e.translate(n[0],n[1]),o?(a=(r[0]+r[2])/2-n[0],s=(r[1]+r[3])/2-n[1]):(a=n[2]-n[0],s=n[3]-n[1]),e.rotate((Math.atan2(-s,-a)+i)%i),e.moveTo(0,0),e.lineTo(-c,d/2),e.lineTo(-c,-d/2),e.closePath(),e.restore());var u=this.dashEnabled();u&&(this.attrs.dashEnabled=!1,e.setLineDash([])),e.fillStrokeShape(this),u&&(this.attrs.dashEnabled=!0)},e.prototype.getSelfRect=function(){var e=t.prototype.getSelfRect.call(this),i=this.pointerWidth()/2;return{x:e.x-i,y:e.y-i,width:e.width+2*i,height:e.height+2*i}},e}(Pt);kt.prototype.className="Arrow",a(kt),w.addGetterSetter(kt,"pointerLength",10,y()),w.addGetterSetter(kt,"pointerWidth",10,y()),w.addGetterSetter(kt,"pointerAtBeginning",!1),s.mapMethods(kt);var Tt=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return P(e,t),e.prototype._sceneFunc=function(t){t.beginPath(),t.arc(0,0,this.attrs.radius||0,0,2*Math.PI,!1),t.closePath(),t.fillStrokeShape(this)},e.prototype.getWidth=function(){return 2*this.radius()},e.prototype.getHeight=function(){return 2*this.radius()},e.prototype.setWidth=function(t){this.radius()!==t/2&&this.radius(t/2)},e.prototype.setHeight=function(t){this.radius()!==t/2&&this.radius(t/2)},e}(lt);Tt.prototype._centroid=!0,Tt.prototype.className="Circle",Tt.prototype._attrsAffectingSize=["radius"],a(Tt),w.addGetterSetter(Tt,"radius",0,y()),s.mapMethods(Tt);var At=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return P(e,t),e.prototype._sceneFunc=function(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)},e.prototype.getWidth=function(){return 2*this.radiusX()},e.prototype.getHeight=function(){return 2*this.radiusY()},e.prototype.setWidth=function(t){this.radiusX(t/2)},e.prototype.setHeight=function(t){this.radiusY(t/2)},e}(lt);At.prototype.className="Ellipse",At.prototype._centroid=!0,At.prototype._attrsAffectingSize=["radiusX","radiusY"],a(At),w.addComponentsGetterSetter(At,"radius",["x","y"]),w.addGetterSetter(At,"radiusX",0,y()),w.addGetterSetter(At,"radiusY",0,y()),s.mapMethods(At);var Mt=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return P(e,t),e.prototype._useBufferCanvas=function(){return t.prototype._useBufferCanvas.call(this,!0)},e.prototype._sceneFunc=function(t){var e,i=this.getWidth(),n=this.getHeight(),r=this.attrs.image;if(r){var o=this.attrs.cropWidth,a=this.attrs.cropHeight;e=o&&a?[r,this.cropX(),this.cropY(),o,a,0,0,i,n]:[r,0,0,i,n]}(this.hasFill()||this.hasStroke())&&(t.beginPath(),t.rect(0,0,i,n),t.closePath(),t.fillStrokeShape(this)),r&&t.drawImage.apply(t,e)},e.prototype._hitFunc=function(t){var e=this.width(),i=this.height();t.beginPath(),t.rect(0,0,e,i),t.closePath(),t.fillStrokeShape(this)},e.prototype.getWidth=function(){var t,e;return null!==(t=this.attrs.width)&&void 0!==t?t:(null===(e=this.image())||void 0===e?void 0:e.width)||0},e.prototype.getHeight=function(){var t,e;return null!==(t=this.attrs.height)&&void 0!==t?t:(null===(e=this.image())||void 0===e?void 0:e.height)||0},e.fromURL=function(t,i){var n=f.createImageElement();n.onload=function(){var t=new e({image:n});i(t)},n.crossOrigin="Anonymous",n.src=t},e}(lt);Mt.prototype.className="Image",a(Mt),w.addGetterSetter(Mt,"image"),w.addComponentsGetterSetter(Mt,"crop",["x","y","width","height"]),w.addGetterSetter(Mt,"cropX",0,y()),w.addGetterSetter(Mt,"cropY",0,y()),w.addGetterSetter(Mt,"cropWidth",0,y()),w.addGetterSetter(Mt,"cropHeight",0,y()),s.mapMethods(Mt);var Gt=["fontFamily","fontSize","fontStyle","padding","lineHeight","text","width"],Rt=Gt.length,Lt=function(t){function e(e){var i=t.call(this,e)||this;return i.on("add.konva",(function(t){this._addListeners(t.child),this._sync()})),i}return P(e,t),e.prototype.getText=function(){return this.find("Text")[0]},e.prototype.getTag=function(){return this.find("Tag")[0]},e.prototype._addListeners=function(t){var e,i=this,n=function(){i._sync()};for(e=0;el?h:l,g=h>l?1:h/l,v=h>l?l/h:1;t.translate(a,s),t.rotate(u),t.scale(g,v),t.arc(0,0,f,c,c+d,1-p),t.scale(1/g,1/v),t.rotate(-u),t.translate(-a,-s);break;case"z":i=!0,t.closePath()}}i||this.hasFill()?t.fillStrokeShape(this):t.strokeShape(this)},e.prototype.getSelfRect=function(){var t=[];this.dataArray.forEach((function(i){if("A"===i.command){var n=i.points[4],r=i.points[5],o=i.points[4]+r,a=Math.PI/180;if(Math.abs(n-o)o;s-=a){var h=e.getPointOnEllipticalArc(i.points[0],i.points[1],i.points[2],i.points[3],s,0);t.push(h.x,h.y)}else for(s=n+a;sthis.dataArray[n].pathLength;)t-=this.dataArray[n].pathLength,++n;if(n===r)return{x:(i=this.dataArray[n-1].points.slice(-2))[0],y:i[1]};if(t<.01)return{x:(i=this.dataArray[n].points.slice(0,2))[0],y:i[1]};var o=this.dataArray[n],a=o.points;switch(o.command){case"L":return e.getPointOnLine(t,o.start.x,o.start.y,a[0],a[1]);case"C":return e.getPointOnCubicBezier(t/o.pathLength,o.start.x,o.start.y,a[0],a[1],a[2],a[3],a[4],a[5]);case"Q":return e.getPointOnQuadraticBezier(t/o.pathLength,o.start.x,o.start.y,a[0],a[1],a[2],a[3]);case"A":var s=a[0],h=a[1],l=a[2],c=a[3],d=a[4],u=a[5],p=a[6];return d+=u*t/o.pathLength,e.getPointOnEllipticalArc(s,h,l,c,d,p)}return null},e.getLineLength=function(t,e,i,n){return Math.sqrt((i-t)*(i-t)+(n-e)*(n-e))},e.getPointOnLine=function(t,e,i,n,r,o,a){void 0===o&&(o=e),void 0===a&&(a=i);var s=(r-i)/(n-e+1e-8),h=Math.sqrt(t*t/(1+s*s));n0&&!isNaN(p[0]);){var y,m,_,b,x,S,w,C,P,k,T=null,A=[],M=h,G=l;switch(u){case"l":h+=p.shift(),l+=p.shift(),T="L",A.push(h,l);break;case"L":h=p.shift(),l=p.shift(),A.push(h,l);break;case"m":var R=p.shift(),L=p.shift();if(h+=R,l+=L,T="M",a.length>2&&"z"===a[a.length-1].command)for(var E=a.length-2;E>=0;E--)if("M"===a[E].command){h=a[E].points[0]+R,l=a[E].points[1]+L;break}A.push(h,l),u="l";break;case"M":h=p.shift(),l=p.shift(),T="M",A.push(h,l),u="L";break;case"h":h+=p.shift(),T="L",A.push(h,l);break;case"H":h=p.shift(),T="L",A.push(h,l);break;case"v":l+=p.shift(),T="L",A.push(h,l);break;case"V":l=p.shift(),T="L",A.push(h,l);break;case"C":A.push(p.shift(),p.shift(),p.shift(),p.shift()),h=p.shift(),l=p.shift(),A.push(h,l);break;case"c":A.push(h+p.shift(),l+p.shift(),h+p.shift(),l+p.shift()),h+=p.shift(),l+=p.shift(),T="C",A.push(h,l);break;case"S":m=h,_=l,"C"===(y=a[a.length-1]).command&&(m=h+(h-y.points[2]),_=l+(l-y.points[3])),A.push(m,_,p.shift(),p.shift()),h=p.shift(),l=p.shift(),T="C",A.push(h,l);break;case"s":m=h,_=l,"C"===(y=a[a.length-1]).command&&(m=h+(h-y.points[2]),_=l+(l-y.points[3])),A.push(m,_,h+p.shift(),l+p.shift()),h+=p.shift(),l+=p.shift(),T="C",A.push(h,l);break;case"Q":A.push(p.shift(),p.shift()),h=p.shift(),l=p.shift(),A.push(h,l);break;case"q":A.push(h+p.shift(),l+p.shift()),h+=p.shift(),l+=p.shift(),T="Q",A.push(h,l);break;case"T":m=h,_=l,"Q"===(y=a[a.length-1]).command&&(m=h+(h-y.points[0]),_=l+(l-y.points[1])),h=p.shift(),l=p.shift(),T="Q",A.push(m,_,h,l);break;case"t":m=h,_=l,"Q"===(y=a[a.length-1]).command&&(m=h+(h-y.points[0]),_=l+(l-y.points[1])),h+=p.shift(),l+=p.shift(),T="Q",A.push(m,_,h,l);break;case"A":b=p.shift(),x=p.shift(),S=p.shift(),w=p.shift(),C=p.shift(),P=h,k=l,h=p.shift(),l=p.shift(),T="A",A=this.convertEndpointToCenterParameterization(P,k,h,l,w,C,b,x,S);break;case"a":b=p.shift(),x=p.shift(),S=p.shift(),w=p.shift(),C=p.shift(),P=h,k=l,h+=p.shift(),l+=p.shift(),T="A",A=this.convertEndpointToCenterParameterization(P,k,h,l,w,C,b,x,S)}a.push({command:T||u,points:A,start:{x:M,y:G},pathLength:this.calcLength(M,G,T||u,A)})}"z"!==u&&"Z"!==u||a.push({command:"z",points:[],start:void 0,pathLength:0})}return a},e.calcLength=function(t,i,n,r){var o,a,s,h,l=e;switch(n){case"L":return l.getLineLength(t,i,r[0],r[1]);case"C":for(o=0,a=l.getPointOnCubicBezier(0,t,i,r[0],r[1],r[2],r[3],r[4],r[5]),h=.01;h<=1;h+=.01)s=l.getPointOnCubicBezier(h,t,i,r[0],r[1],r[2],r[3],r[4],r[5]),o+=l.getLineLength(a.x,a.y,s.x,s.y),a=s;return o;case"Q":for(o=0,a=l.getPointOnQuadraticBezier(0,t,i,r[0],r[1],r[2],r[3]),h=.01;h<=1;h+=.01)s=l.getPointOnQuadraticBezier(h,t,i,r[0],r[1],r[2],r[3]),o+=l.getLineLength(a.x,a.y,s.x,s.y),a=s;return o;case"A":o=0;var c=r[4],d=r[5],u=r[4]+d,p=Math.PI/180;if(Math.abs(c-u)u;h-=p)s=l.getPointOnEllipticalArc(r[0],r[1],r[2],r[3],h,0),o+=l.getLineLength(a.x,a.y,s.x,s.y),a=s;else for(h=c+p;h1&&(a*=Math.sqrt(u),s*=Math.sqrt(u));var p=Math.sqrt((a*a*(s*s)-a*a*(d*d)-s*s*(c*c))/(a*a*(d*d)+s*s*(c*c)));r===o&&(p*=-1),isNaN(p)&&(p=0);var f=p*a*d/s,g=p*-s*c/a,v=(t+i)/2+Math.cos(l)*f-Math.sin(l)*g,y=(e+n)/2+Math.sin(l)*f+Math.cos(l)*g,m=function(t){return Math.sqrt(t[0]*t[0]+t[1]*t[1])},_=function(t,e){return(t[0]*e[0]+t[1]*e[1])/(m(t)*m(e))},b=function(t,e){return(t[0]*e[1]=1&&(C=0),0===o&&C>0&&(C-=2*Math.PI),1===o&&C<0&&(C+=2*Math.PI),[v,y,a,s,x,C,l,o]},e}(lt);Ot.prototype.className="Path",Ot.prototype._attrsAffectingSize=["data"],a(Ot),w.addGetterSetter(Ot,"data"),s.mapMethods(Ot);var Dt=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return P(e,t),e.prototype._sceneFunc=function(t){var e=this.cornerRadius(),i=this.width(),n=this.height();if(t.beginPath(),e){var r=0,o=0,a=0,s=0;"number"==typeof e?r=o=a=s=Math.min(e,i/2,n/2):(r=Math.min(e[0]||0,i/2,n/2),o=Math.min(e[1]||0,i/2,n/2),s=Math.min(e[2]||0,i/2,n/2),a=Math.min(e[3]||0,i/2,n/2)),t.moveTo(r,0),t.lineTo(i-o,0),t.arc(i-o,o,o,3*Math.PI/2,0,!1),t.lineTo(i,n-s),t.arc(i-s,n-s,s,0,Math.PI/2,!1),t.lineTo(a,n),t.arc(a,n-a,a,Math.PI/2,Math.PI,!1),t.lineTo(0,r),t.arc(r,r,r,Math.PI,3*Math.PI/2,!1)}else t.rect(0,0,i,n);t.closePath(),t.fillStrokeShape(this)},e}(lt);Dt.prototype.className="Rect",a(Dt),w.addGetterSetter(Dt,"cornerRadius",0,m(4)),s.mapMethods(Dt);var It=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return P(e,t),e.prototype._sceneFunc=function(t){var e=this._getPoints();t.beginPath(),t.moveTo(e[0].x,e[0].y);for(var i=1;i1&&(v+=a)}}},e.prototype._hitFunc=function(t){var e=this.getWidth(),i=this.getHeight();t.beginPath(),t.rect(0,0,e,i),t.closePath(),t.fillStrokeShape(this)},e.prototype.setText=function(t){var e=f._isString(t)?t:null==t?"":t+"";return this._setAttr("text",e),this},e.prototype.getWidth=function(){return"auto"===this.attrs.width||void 0===this.attrs.width?this.getTextWidth()+2*this.padding():this.attrs.width},e.prototype.getHeight=function(){return"auto"===this.attrs.height||void 0===this.attrs.height?this.fontSize()*this.textArr.length*this.lineHeight()+2*this.padding():this.attrs.height},e.prototype.getTextWidth=function(){return this.textWidth},e.prototype.getTextHeight=function(){return f.warn("text.getTextHeight() method is deprecated. Use text.height() - for full height and text.fontSize() - for one line height."),this.textHeight},e.prototype.measureSize=function(t){var e,i=jt(),n=this.fontSize();return i.save(),i.font=this._getContextFont(),e=i.measureText(t),i.restore(),{width:e.width,height:n}},e.prototype._getContextFont=function(){return r.UA.isIE?this.fontStyle()+" "+this.fontSize()+"px "+this.fontFamily():this.fontStyle()+" "+this.fontVariant()+" "+this.fontSize()+"px "+this.fontFamily().split(",").map((function(t){var e=(t=t.trim()).indexOf(" ")>=0,i=t.indexOf('"')>=0||t.indexOf("'")>=0;return e&&!i&&(t='"'+t+'"'),t})).join(", ")},e.prototype._addTextLine=function(t){"justify"===this.align()&&(t=t.trim());var e=this._getTextWidth(t);return this.textArr.push({text:t,width:e})},e.prototype._getTextWidth=function(t){var e=this.letterSpacing(),i=t.length;return jt().measureText(t).width+(i?e*(i-1):0)},e.prototype._setTextData=function(){var t=this.text().split("\n"),e=+this.fontSize(),i=0,n=this.lineHeight()*e,r=this.attrs.width,o=this.attrs.height,a="auto"!==r&&void 0!==r,s="auto"!==o&&void 0!==o,h=this.padding(),l=r-2*h,c=o-2*h,d=0,u=this.wrap(),p="none"!==u,f="char"!==u&&p,g=this.ellipsis();this.textArr=[],jt().font=this._getContextFont();for(var v=g?this._getTextWidth("…"):0,y=0,m=t.length;yl)for(;_.length>0;){for(var x=0,S=_.length,w="",C=0;x>>1,k=_.slice(0,P+1),T=this._getTextWidth(k)+v;T<=l?(x=P+1,w=k+(g?"…":""),C=T):S=P}if(!w)break;if(f){var A,M=_[w.length];(A=(" "===M||"-"===M)&&C<=l?w.length:Math.max(w.lastIndexOf(" "),w.lastIndexOf("-"))+1)>0&&(x=A,w=w.slice(0,x),C=this._getTextWidth(w))}if(w=w.trimRight(),this._addTextLine(w),i=Math.max(i,C),d+=n,!p||s&&d+n>c){var G=this.textArr[this.textArr.length-1];if(G)if(g)this._getTextWidth(G.text+"…")0&&(b=this._getTextWidth(_))<=l){this._addTextLine(_),d+=n,i=Math.max(i,b);break}}else this._addTextLine(_),d+=n,i=Math.max(i,b);if(s&&d+n>c)break}this.textHeight=e,this.textWidth=i},e.prototype.getStrokeScaleEnabled=function(){return!0},e}(lt);Ut.prototype._fillFunc=function(t){t.fillText(this._partialText,this._partialTextX,this._partialTextY)},Ut.prototype._strokeFunc=function(t){t.strokeText(this._partialText,this._partialTextX,this._partialTextY)},Ut.prototype.className="Text",Ut.prototype._attrsAffectingSize=["text","fontSize","padding","wrap","lineHeight"],a(Ut),w.overWriteSetter(Ut,"width",_()),w.overWriteSetter(Ut,"height",_()),w.addGetterSetter(Ut,"fontFamily","Arial"),w.addGetterSetter(Ut,"fontSize",12,y()),w.addGetterSetter(Ut,"fontStyle","normal"),w.addGetterSetter(Ut,"fontVariant","normal"),w.addGetterSetter(Ut,"padding",0,y()),w.addGetterSetter(Ut,"align","left"),w.addGetterSetter(Ut,"verticalAlign","top"),w.addGetterSetter(Ut,"lineHeight",1,y()),w.addGetterSetter(Ut,"wrap","word"),w.addGetterSetter(Ut,"ellipsis",!1,S()),w.addGetterSetter(Ut,"letterSpacing",0,y()),w.addGetterSetter(Ut,"text","",b()),w.addGetterSetter(Ut,"textDecoration",""),s.mapMethods(Ut);function qt(t){t.fillText(this.partialText,0,0)}function Kt(t){t.strokeText(this.partialText,0,0)}var Vt=function(t){function e(e){var i=t.call(this,e)||this;return i.dummyCanvas=f.createCanvasElement(),i.dataArray=[],i.dataArray=Ot.parsePathData(i.attrs.data),i.on("dataChange.konva",(function(){this.dataArray=Ot.parsePathData(this.attrs.data),this._setTextData()})),i.on("textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva",i._setTextData),e&&e.getKerning&&(f.warn('getKerning TextPath API is deprecated. Please use "kerningFunc" instead.'),i.kerningFunc(e.getKerning)),i._setTextData(),i}return P(e,t),e.prototype._sceneFunc=function(t){t.setAttr("font",this._getContextFont()),t.setAttr("textBaseline",this.textBaseline()),t.setAttr("textAlign","left"),t.save();var e=this.textDecoration(),i=this.fill(),n=this.fontSize(),r=this.glyphInfo;"underline"===e&&t.beginPath();for(var o=0;o=1){var i=e[0].p0;t.moveTo(i.x,i.y)}for(var n=0;n0&&(a+=t.dataArray[s].pathLength);var h=0;"center"===n&&(h=Math.max(0,a/2-o/2)),"right"===n&&(h=Math.max(0,a-o));for(var l,c,d,u=Wt(this.text()),p=this.text().split(" ").length-1,f=-1,g=0,v=function(){g=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{}},y=function(e){var r=t._getTextSize(e).width+i;" "===e&&"justify"===n&&(r+=(a-o)/p);var s=0,h=0;for(c=void 0;Math.abs(r-s)/r>.01&&h<5;){h++;for(var u=s;void 0===d;)(d=v())&&u+d.pathLengthr?c=Ot.getPointOnLine(r,l.x,l.y,d.points[0],d.points[1],l.x,l.y):d=void 0;break;case"A":var y=d.points[4],m=d.points[5],_=d.points[4]+m;0===g?g=y+1e-8:r>s?g+=Math.PI/180*m/Math.abs(m):g-=Math.PI/360*m/Math.abs(m),(m<0&&g<_||m>=0&&g>_)&&(g=_,f=!0),c=Ot.getPointOnEllipticalArc(d.points[0],d.points[1],d.points[2],d.points[3],g,d.points[6]);break;case"C":0===g?g=r>d.pathLength?1e-8:r/d.pathLength:r>s?g+=(r-s)/d.pathLength:(g-=(s-r)/d.pathLength)<0&&(g+=.02),g>1&&(g=1,f=!0),c=Ot.getPointOnCubicBezier(g,d.start.x,d.start.y,d.points[0],d.points[1],d.points[2],d.points[3],d.points[4],d.points[5]);break;case"Q":0===g?g=r/d.pathLength:r>s?g+=(r-s)/d.pathLength:g-=(s-r)/d.pathLength,g>1&&(g=1,f=!0),c=Ot.getPointOnQuadraticBezier(g,d.start.x,d.start.y,d.points[0],d.points[1],d.points[2],d.points[3])}void 0!==c&&(s=Ot.getLineLength(l.x,l.y,c.x,c.y)),f&&(f=!1,d=void 0)}},m=h/(t._getTextSize("C").width+i)-1,_=0;_p.x?-1:1,g=this.findOne(".top-left").y()>p.y?-1:1;e=n*this.cos*f,i=n*this.sin*g,this.findOne(".top-left").x(p.x-e),this.findOne(".top-left").y(p.y-i)}}else if("top-center"===this._movingAnchorName)this.findOne(".top-left").y(o.y());else if("top-right"===this._movingAnchorName){if(d){p=u?{x:this.width()/2,y:this.height()/2}:{x:this.findOne(".bottom-left").x(),y:this.findOne(".bottom-left").y()};n=Math.sqrt(Math.pow(o.x()-p.x,2)+Math.pow(p.y-o.y(),2));f=this.findOne(".top-right").x()p.y?-1:1;e=n*this.cos*f,i=n*this.sin*g,this.findOne(".top-right").x(p.x+e),this.findOne(".top-right").y(p.y-i)}var v=o.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(o.x());else if("middle-right"===this._movingAnchorName)this.findOne(".bottom-right").x(o.x());else if("bottom-left"===this._movingAnchorName){if(d){p=u?{x:this.width()/2,y:this.height()/2}:{x:this.findOne(".top-right").x(),y:this.findOne(".top-right").y()};n=Math.sqrt(Math.pow(p.x-o.x(),2)+Math.pow(o.y()-p.y,2));f=p.x=0){var a=o.point({x:2*-this.padding(),y:0});t.x+=a.x,t.y+=a.y,t.width+=2*this.padding(),this._movingAnchorName=this._movingAnchorName.replace("left","right"),this._anchorDragOffset.x-=a.x,this._anchorDragOffset.y-=a.y}else if(this._movingAnchorName&&t.width<0&&this._movingAnchorName.indexOf("right")>=0){a=o.point({x:2*this.padding(),y:0});this._movingAnchorName=this._movingAnchorName.replace("right","left"),this._anchorDragOffset.x-=a.x,this._anchorDragOffset.y-=a.y,t.width+=2*this.padding()}if(this._movingAnchorName&&t.height<0&&this._movingAnchorName.indexOf("top")>=0){a=o.point({x:0,y:2*-this.padding()});t.x+=a.x,t.y+=a.y,this._movingAnchorName=this._movingAnchorName.replace("top","bottom"),this._anchorDragOffset.x-=a.x,this._anchorDragOffset.y-=a.y,t.height+=2*this.padding()}else if(this._movingAnchorName&&t.height<0&&this._movingAnchorName.indexOf("bottom")>=0){a=o.point({x:0,y:2*this.padding()});this._movingAnchorName=this._movingAnchorName.replace("bottom","top"),this._anchorDragOffset.x-=a.x,this._anchorDragOffset.y-=a.y,t.height+=2*this.padding()}if(this.boundBoxFunc()){var s=this.boundBoxFunc()(n,t);s?t=s:f.warn("boundBoxFunc returned falsy. You should return new bound rect from it!")}var l=new h;l.translate(n.x,n.y),l.rotate(n.rotation),l.scale(n.width/1e7,n.height/1e7);var c=new h;c.translate(t.x,t.y),c.rotate(t.rotation),c.scale(t.width/1e7,t.height/1e7);var d=c.multiply(l.invert());this._nodes.forEach((function(t){var n,r=t.getParent().getAbsoluteTransform(),o=t.getTransform().copy();o.translate(t.offsetX(),t.offsetY());var a=new h;a.multiply(r.copy().invert()).multiply(d).multiply(r).multiply(o);var s=a.decompose();t.setAttrs(s),i._fire("transform",{evt:e,target:t}),t._fire("transform",{evt:e,target:t}),null===(n=t.getLayer())||void 0===n||n.batchDraw()})),this.rotation(f._getRotation(t.rotation)),this._resetTransformCache(),this.update(),this.getLayer().batchDraw()}},e.prototype.forceUpdate=function(){this._resetTransformCache(),this.update()},e.prototype._batchChangeChild=function(t,e){this.findOne(t).setAttrs(e)},e.prototype.update=function(){var t=this,e=this._getNodeRect();this.rotation(f._getRotation(e.rotation));var i=e.width,n=e.height,r=this.enabledAnchors(),o=this.resizeEnabled(),a=this.padding(),s=this.anchorSize();this.find("._anchor").each((function(e){e.setAttrs({width:s,height:s,offsetX:s/2,offsetY:s/2,stroke:t.anchorStroke(),strokeWidth:t.anchorStrokeWidth(),fill:t.anchorFill(),cornerRadius:t.anchorCornerRadius()})})),this._batchChangeChild(".top-left",{x:0,y:0,offsetX:s/2+a,offsetY:s/2+a,visible:o&&r.indexOf("top-left")>=0}),this._batchChangeChild(".top-center",{x:i/2,y:0,offsetY:s/2+a,visible:o&&r.indexOf("top-center")>=0}),this._batchChangeChild(".top-right",{x:i,y:0,offsetX:s/2-a,offsetY:s/2+a,visible:o&&r.indexOf("top-right")>=0}),this._batchChangeChild(".middle-left",{x:0,y:n/2,offsetX:s/2+a,visible:o&&r.indexOf("middle-left")>=0}),this._batchChangeChild(".middle-right",{x:i,y:n/2,offsetX:s/2-a,visible:o&&r.indexOf("middle-right")>=0}),this._batchChangeChild(".bottom-left",{x:0,y:n,offsetX:s/2+a,offsetY:s/2-a,visible:o&&r.indexOf("bottom-left")>=0}),this._batchChangeChild(".bottom-center",{x:i/2,y:n,offsetY:s/2-a,visible:o&&r.indexOf("bottom-center")>=0}),this._batchChangeChild(".bottom-right",{x:i,y:n,offsetX:s/2-a,offsetY:s/2-a,visible:o&&r.indexOf("bottom-right")>=0}),this._batchChangeChild(".rotater",{x:i/2,y:-this.rotateAnchorOffset()*f._sign(n)-a,visible:this.rotateEnabled()}),this._batchChangeChild(".back",{width:i,height:n,visible:this.borderEnabled(),stroke:this.borderStroke(),strokeWidth:this.borderStrokeWidth(),dash:this.borderDash(),x:0,y:0})},e.prototype.isTransforming=function(){return this._transforming},e.prototype.stopTransform=function(){if(this._transforming){this._removeEvents();var t=this.findOne("."+this._movingAnchorName);t&&t.stopDrag()}},e.prototype.destroy=function(){return this.getStage()&&this._cursorChange&&(this.getStage().content.style.cursor=""),ft.prototype.destroy.call(this),this.detach(),this._removeEvents(),this},e.prototype.toObject=function(){return X.prototype.toObject.call(this)},e}(ft);ne.prototype.className="Transformer",a(ne),w.addGetterSetter(ne,"enabledAnchors",te,(function(t){return t instanceof Array||f.warn("enabledAnchors value should be an array"),t instanceof Array&&t.forEach((function(t){-1===te.indexOf(t)&&f.warn("Unknown anchor name: "+t+". Available names are: "+te.join(", "))})),t||[]})),w.addGetterSetter(ne,"resizeEnabled",!0),w.addGetterSetter(ne,"anchorSize",10,y()),w.addGetterSetter(ne,"rotateEnabled",!0),w.addGetterSetter(ne,"rotationSnaps",[]),w.addGetterSetter(ne,"rotateAnchorOffset",50,y()),w.addGetterSetter(ne,"rotationSnapTolerance",5,y()),w.addGetterSetter(ne,"borderEnabled",!0),w.addGetterSetter(ne,"anchorStroke","rgb(0, 161, 255)"),w.addGetterSetter(ne,"anchorStrokeWidth",1,y()),w.addGetterSetter(ne,"anchorFill","white"),w.addGetterSetter(ne,"anchorCornerRadius",0,y()),w.addGetterSetter(ne,"borderStroke","rgb(0, 161, 255)"),w.addGetterSetter(ne,"borderStrokeWidth",1,y()),w.addGetterSetter(ne,"borderDash"),w.addGetterSetter(ne,"keepRatio",!0),w.addGetterSetter(ne,"centeredScaling",!1),w.addGetterSetter(ne,"ignoreStroke",!1),w.addGetterSetter(ne,"padding",0,y()),w.addGetterSetter(ne,"node"),w.addGetterSetter(ne,"nodes"),w.addGetterSetter(ne,"boundBoxFunc"),w.addGetterSetter(ne,"shouldOverdrawWholeArea",!1),w.backCompat(ne,{lineEnabled:"borderEnabled",rotateHandlerOffset:"rotateAnchorOffset",enabledHandlers:"enabledAnchors"}),s.mapMethods(ne);var re=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return P(e,t),e.prototype._sceneFunc=function(t){t.beginPath(),t.arc(0,0,this.radius(),0,r.getAngle(this.angle()),this.clockwise()),t.lineTo(0,0),t.closePath(),t.fillStrokeShape(this)},e.prototype.getWidth=function(){return 2*this.radius()},e.prototype.getHeight=function(){return 2*this.radius()},e.prototype.setWidth=function(t){this.radius(t/2)},e.prototype.setHeight=function(t){this.radius(t/2)},e}(lt);function oe(){this.r=0,this.g=0,this.b=0,this.a=0,this.next=null}re.prototype.className="Wedge",re.prototype._centroid=!0,re.prototype._attrsAffectingSize=["radius"],a(re),w.addGetterSetter(re,"radius",0,y()),w.addGetterSetter(re,"angle",0,y()),w.addGetterSetter(re,"clockwise",!1),w.backCompat(re,{angleDeg:"angle",getAngleDeg:"getAngle",setAngleDeg:"setAngle"}),s.mapMethods(re);var ae=[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],se=[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];w.addGetterSetter(X,"blurRadius",0,y(),w.afterSetFilter);w.addGetterSetter(X,"brightness",0,y(),w.afterSetFilter);w.addGetterSetter(X,"contrast",0,y(),w.afterSetFilter);function he(t,e,i,n,r){var o=i-e,a=r-n;return 0===o?n+a/2:0===a?n:a*((t-e)/o)+n}w.addGetterSetter(X,"embossStrength",.5,y(),w.afterSetFilter),w.addGetterSetter(X,"embossWhiteLevel",.5,y(),w.afterSetFilter),w.addGetterSetter(X,"embossDirection","top-left",null,w.afterSetFilter),w.addGetterSetter(X,"embossBlend",!1,null,w.afterSetFilter);w.addGetterSetter(X,"enhance",0,y(),w.afterSetFilter);w.addGetterSetter(X,"hue",0,y(),w.afterSetFilter),w.addGetterSetter(X,"saturation",0,y(),w.afterSetFilter),w.addGetterSetter(X,"luminance",0,y(),w.afterSetFilter);w.addGetterSetter(X,"hue",0,y(),w.afterSetFilter),w.addGetterSetter(X,"saturation",0,y(),w.afterSetFilter),w.addGetterSetter(X,"value",0,y(),w.afterSetFilter);function le(t,e,i){var n=4*(i*t.width+e),r=[];return r.push(t.data[n++],t.data[n++],t.data[n++],t.data[n++]),r}function ce(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))}w.addGetterSetter(X,"kaleidoscopePower",2,y(),w.afterSetFilter),w.addGetterSetter(X,"kaleidoscopeAngle",0,y(),w.afterSetFilter);w.addGetterSetter(X,"threshold",0,y(),w.afterSetFilter);w.addGetterSetter(X,"noise",.2,y(),w.afterSetFilter);w.addGetterSetter(X,"pixelSize",8,y(),w.afterSetFilter);w.addGetterSetter(X,"levels",.5,y(),w.afterSetFilter);w.addGetterSetter(X,"red",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),w.addGetterSetter(X,"green",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),w.addGetterSetter(X,"blue",0,v,w.afterSetFilter);w.addGetterSetter(X,"red",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),w.addGetterSetter(X,"green",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),w.addGetterSetter(X,"blue",0,v,w.afterSetFilter),w.addGetterSetter(X,"alpha",1,(function(t){return this._filterUpToDate=!1,t>1?1:t<0?0:t}));return w.addGetterSetter(X,"threshold",.5,y(),w.afterSetFilter),wt.Util._assign(wt,{Arc:Ct,Arrow:kt,Circle:Tt,Ellipse:At,Image:Mt,Label:Lt,Tag:Et,Line:Pt,Path:Ot,Rect:Dt,RegularPolygon:It,Ring:Bt,Sprite:Nt,Star:zt,Text:Ut,TextPath:Vt,Transformer:ne,Wedge:re,Filters:{Blur:function(t){var e=Math.round(this.blurRadius());e>0&&function(t,e){var i,n,r,o,a,s,h,l,c,d,u,p,f,g,v,y,m,_,b,x,S,w,C,P,k=t.data,T=t.width,A=t.height,M=e+e+1,G=T-1,R=A-1,L=e+1,E=L*(L+1)/2,O=new oe,D=null,I=O,F=null,B=null,N=ae[e],z=se[e];for(r=1;r>z,0!==C?(C=255/C,k[s]=(l*N>>z)*C,k[s+1]=(c*N>>z)*C,k[s+2]=(d*N>>z)*C):k[s]=k[s+1]=k[s+2]=0,l-=p,c-=f,d-=g,u-=v,p-=F.r,f-=F.g,g-=F.b,v-=F.a,o=h+((o=i+e+1)>z,C>0?(C=255/C,k[o]=(l*N>>z)*C,k[o+1]=(c*N>>z)*C,k[o+2]=(d*N>>z)*C):k[o]=k[o+1]=k[o+2]=0,l-=p,c-=f,d-=g,u-=v,p-=F.r,f-=F.g,g-=F.b,v-=F.a,o=i+((o=n+L)255?255:o,a=(a*=255)<0?0:a>255?255:a,s=(s*=255)<0?0:s>255?255:s,n[e]=o,n[e+1]=a,n[e+2]=s},Emboss:function(t){var e=10*this.embossStrength(),i=255*this.embossWhiteLevel(),n=this.embossDirection(),r=this.embossBlend(),o=0,a=0,s=t.data,h=t.width,l=t.height,c=4*h,d=l;switch(n){case"top-left":o=-1,a=-1;break;case"top":o=-1,a=0;break;case"top-right":o=-1,a=1;break;case"right":o=0,a=1;break;case"bottom-right":o=1,a=1;break;case"bottom":o=1,a=0;break;case"bottom-left":o=1,a=-1;break;case"left":o=0,a=-1;break;default:f.error("Unknown emboss direction: "+n)}do{var u=(d-1)*c,p=o;d+p<1&&(p=0),d+p>l&&(p=0);var g=(d-1+p)*h*4,v=h;do{var y=u+4*(v-1),m=a;v+m<1&&(m=0),v+m>h&&(m=0);var _=g+4*(v-1+m),b=s[y]-s[_],x=s[y+1]-s[_+1],S=s[y+2]-s[_+2],w=b,C=w>0?w:-w;if((x>0?x:-x)>C&&(w=x),(S>0?S:-S)>C&&(w=S),w*=e,r){var P=s[y]+w,k=s[y+1]+w,T=s[y+2]+w;s[y]=P>255?255:P<0?0:P,s[y+1]=k>255?255:k<0?0:k,s[y+2]=T>255?255:T<0?0:T}else{var A=i-w;A<0?A=0:A>255&&(A=255),s[y]=s[y+1]=s[y+2]=A}}while(--v)}while(--d)},Enhance:function(t){var e,i,n,r,o=t.data,a=o.length,s=o[0],h=s,l=o[1],c=l,d=o[2],u=d,p=this.enhance();if(0!==p){for(r=0;rh&&(h=e),(i=o[r+1])c&&(c=i),(n=o[r+2])u&&(u=n);var f,g,v,y,m,_,b,x,S;for(h===s&&(h=255,s=0),c===l&&(c=255,l=0),u===d&&(u=255,d=0),p>0?(g=h+p*(255-h),v=s-p*(s-0),m=c+p*(255-c),_=l-p*(l-0),x=u+p*(255-u),S=d-p*(d-0)):(g=h+p*(h-(f=.5*(h+s))),v=s+p*(s-f),m=c+p*(c-(y=.5*(c+l))),_=l+p*(l-y),x=u+p*(u-(b=.5*(u+d))),S=d+p*(d-b)),r=0;ry?a:y;var m,_,b,x,S=c,w=l,C=360/w*Math.PI/180;for(_=0;_c&&(b=_,x=0,S=-1),i=0;i_?h:_;var b,x,S,w=u,C=d,P=i.polarRotation||0;for(r=0;r=0&&p=0&&f=0&&p=0&&f=1020?255:0}return a}(e=function(t,e,i){for(var n=[1,1,1,1,0,1,1,1,1],r=Math.round(Math.sqrt(n.length)),o=Math.floor(r/2),a=[],s=0;s=0&&p=0&&f=y))for(i=c;i=m||(r+=x[(n=4*(y*i+e))+0],o+=x[n+1],a+=x[n+2],s+=x[n+3],g+=1);for(r/=g,o/=g,a/=g,s/=g,e=h;e=y))for(i=c;i=m||(x[(n=4*(y*i+e))+0]=r,x[n+1]=o,x[n+2]=a,x[n+3]=s)}},Posterize:function(t){var e,i=Math.round(254*this.levels())+1,n=t.data,r=n.length,o=255/i;for(e=0;e127&&(h=255-h),l>127&&(l=255-l),c>127&&(c=255-c),e[s]=h,e[s+1]=l,e[s+2]=c}while(--a)}while(--r)},Threshold:function(t){var e,i=255*this.threshold(),n=t.data,r=n.length;for(e=0;e0)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 n=t.indexOf("edge/");return n>0&&parseInt(t.substring(n+5,t.indexOf(".",n)),10)},i=function(t){var i=t.toLowerCase(),n=/(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)||[],r=!!t.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i),o=!!t.match(/IEMobile/i);return{browser:n[1]||"",version:n[2]||"0",isIE:e(i),mobile:r,ieMobile:o}},n="undefined"!=typeof global?global:"undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope?self:{},r={_global:n,version:"7.1.9",isBrowser:"undefined"!=typeof window&&("[object Window]"==={}.toString.call(window)||"[object global]"==={}.toString.call(window)),isUnminified:/param/.test(function(t){}.toString()),dblClickWindow:400,getAngle:function(e){return r.angleDeg?e*t:e},enableTrace:!1,_pointerEventsEnabled:!1,hitOnDragEnabled:!1,captureTouchEventsEnabled:!1,listenClickTap:!1,inDblClickWindow:!1,pixelRatio:void 0,dragDistance:3,angleDeg:!0,showWarnings:!0,dragButtons:[0,1],isDragging:function(){return r.DD.isDragging},isDragReady:function(){return!!r.DD.node},UA:i(n.navigator&&n.navigator.userAgent||""),document:n.document,_injectGlobal:function(t){n.Konva=t},_parseUA:i},o={},a=function(t){o[t.prototype.getClassName()]=t,r[t.prototype.getClassName()]=t},s=function(){function t(){}return t.toCollection=function(e){var i,n=new t,r=e.length;for(i=0;i0?Math.acos(t/a):-Math.acos(t/a),o.scaleX=a,o.scaleY=r/a,o.skewX=(t*i+e*n)/r,o.skewY=0}else if(0!=i||0!=n){var s=Math.sqrt(i*i+n*n);o.rotation=Math.PI/2-(n>0?Math.acos(-i/s):-Math.acos(i/s)),o.scaleX=r/s,o.scaleY=s,o.skewX=0,o.skewY=(t*i+e*n)/r}return o.rotation=f._getRotation(o.rotation),o},t}(),l=Math.PI/180,c=180/Math.PI,d={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]},u=/rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/,p=[],f={_isElement:function(t){return!(!t||1!=t.nodeType)},_isFunction:function(t){return!!(t&&t.constructor&&t.call&&t.apply)},_isPlainObject:function(t){return!!t&&t.constructor===Object},_isArray:function(t){return"[object Array]"===Object.prototype.toString.call(t)},_isNumber:function(t){return"[object Number]"===Object.prototype.toString.call(t)&&!isNaN(t)&&isFinite(t)},_isString:function(t){return"[object String]"===Object.prototype.toString.call(t)},_isBoolean:function(t){return"[object Boolean]"===Object.prototype.toString.call(t)},isObject:function(t){return t instanceof Object},isValidSelector:function(t){if("string"!=typeof t)return!1;var e=t[0];return"#"===e||"."===e||e===e.toUpperCase()},_sign:function(t){return 0===t?0:t>0?1:-1},requestAnimFrame:function(t){p.push(t),1===p.length&&requestAnimationFrame((function(){var t=p;p=[],t.forEach((function(t){t()}))}))},createCanvasElement:function(){var t=document.createElement("canvas");try{t.style=t.style||{}}catch(t){}return t},createImageElement:function(){return document.createElement("img")},_isInDocument:function(t){for(;t=t.parentNode;)if(t==document)return!0;return!1},_simplifyArray:function(t){var e,i,n=[],r=t.length,o=f;for(e=0;e>16&255,g:e>>8&255,b:255&e}},getRandomColor:function(){for(var t=(16777215*Math.random()<<0).toString(16);t.length<6;)t="0"+t;return"#"+t},get:function(t,e){return void 0===t?e:t},getRGB:function(t){var e;return t in d?{r:(e=d[t])[0],g:e[1],b:e[2]}:"#"===t[0]?this._hexToRgb(t.substring(1)):"rgb("===t.substr(0,4)?(e=u.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:function(t){return t=t||"black",f._namedColorToRBA(t)||f._hex3ColorToRGBA(t)||f._hex6ColorToRGBA(t)||f._rgbColorToRGBA(t)||f._rgbaColorToRGBA(t)||f._hslColorToRGBA(t)},_namedColorToRBA:function(t){var e=d[t.toLowerCase()];return e?{r:e[0],g:e[1],b:e[2],a:1}:null},_rgbColorToRGBA:function(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:function(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:function(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:function(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:function(t){if(/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.test(t)){var e=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(t),i=(e[0],e.slice(1)),n=Number(i[0])/360,r=Number(i[1])/100,o=Number(i[2])/100,a=void 0,s=void 0,h=void 0;if(0===r)return h=255*o,{r:Math.round(h),g:Math.round(h),b:Math.round(h),a:1};for(var l=2*o-(a=o<.5?o*(1+r):o+r-o*r),c=[0,0,0],d=0;d<3;d++)(s=n+1/3*-(d-1))<0&&s++,s>1&&s--,h=6*s<1?l+6*(a-l)*s:2*s<1?a:3*s<2?l+(a-l)*(2/3-s)*6:l,c[d]=255*h;return{r:Math.round(c[0]),g:Math.round(c[1]),b:Math.round(c[2]),a:1}}},haveIntersection:function(t,e){return!(e.x>t.x+t.width||e.x+e.widtht.y+t.height||e.y+e.height1?(a=i,s=n,h=(i-r)*(i-r)+(n-o)*(n-o)):h=((a=t+c*(i-t))-r)*(a-r)+((s=e+c*(n-e))-o)*(s-o)}return[a,s,h]},_getProjectionToLine:function(t,e,i){var n=f.cloneObject(t),r=Number.MAX_VALUE;return e.forEach((function(o,a){if(i||a!==e.length-1){var s=e[(a+1)%e.length],h=f._getProjectionToSegment(o.x,o.y,s.x,s.y,t.x,t.y),l=h[0],c=h[1],d=h[2];de.length){var a=e;e=t,t=a}for(n=0;n255?255:t<0?0:Math.round(t)}function y(){if(r.isUnminified)return function(t,e){return f._isNumber(t)||f.warn(g(t)+' is a not valid value for "'+e+'" attribute. The value should be a number.'),t}}function m(t){if(r.isUnminified)return function(e,i){var n=f._isNumber(e),r=f._isArray(e)&&e.length==t;return n||r||f.warn(g(e)+' is a not valid value for "'+i+'" attribute. The value should be a number or Array('+t+")"),e}}function _(){if(r.isUnminified)return function(t,e){return f._isNumber(t)||"auto"===t||f.warn(g(t)+' is a not valid value for "'+e+'" attribute. The value should be a number or "auto".'),t}}function b(){if(r.isUnminified)return function(t,e){return f._isString(t)||f.warn(g(t)+' is a not valid value for "'+e+'" attribute. The value should be a string.'),t}}function x(){if(r.isUnminified)return function(t,e){var i=f._isString(t),n="[object CanvasGradient]"===Object.prototype.toString.call(t);return i||n||f.warn(g(t)+' is a not valid value for "'+e+'" attribute. The value should be a string or a native gradient.'),t}}function S(){if(r.isUnminified)return function(t,e){return!0===t||!1===t||f.warn(g(t)+' is a not valid value for "'+e+'" attribute. The value should be a boolean.'),t}}var w={addGetterSetter:function(t,e,i,n,r){w.addGetter(t,e,i),w.addSetter(t,e,n,r),w.addOverloadedGetterSetter(t,e)},addGetter:function(t,e,i){var n="get"+f._capitalize(e);t.prototype[n]=t.prototype[n]||function(){var t=this.attrs[e];return void 0===t?i:t}},addSetter:function(t,e,i,n){var r="set"+f._capitalize(e);t.prototype[r]||w.overWriteSetter(t,e,i,n)},overWriteSetter:function(t,e,i,n){var r="set"+f._capitalize(e);t.prototype[r]=function(t){return i&&null!=t&&(t=i.call(this,t,e)),this._setAttr(e,t),n&&n.call(this),this}},addComponentsGetterSetter:function(t,e,i,n,o){var a,s,h=i.length,l=f._capitalize,c="get"+l(e),d="set"+l(e);t.prototype[c]=function(){var t={};for(a=0;a=100&&e.shift()},t.prototype.reset=function(){var t=this.getCanvas().getPixelRatio();this.setTransform(1*t,0,0,1*t,0,0)},t.prototype.getCanvas=function(){return this.canvas},t.prototype.clear=function(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)},t.prototype._applyLineCap=function(t){var e=t.getLineCap();e&&this.setAttr("lineCap",e)},t.prototype._applyOpacity=function(t){var e=t.getAbsoluteOpacity();1!==e&&this.setAttr("globalAlpha",e)},t.prototype._applyLineJoin=function(t){var e=t.attrs.lineJoin;e&&this.setAttr("lineJoin",e)},t.prototype.setAttr=function(t,e){this._context[t]=e},t.prototype.arc=function(t,e,i,n,r,o){this._context.arc(t,e,i,n,r,o)},t.prototype.arcTo=function(t,e,i,n,r){this._context.arcTo(t,e,i,n,r)},t.prototype.beginPath=function(){this._context.beginPath()},t.prototype.bezierCurveTo=function(t,e,i,n,r,o){this._context.bezierCurveTo(t,e,i,n,r,o)},t.prototype.clearRect=function(t,e,i,n){this._context.clearRect(t,e,i,n)},t.prototype.clip=function(){this._context.clip()},t.prototype.closePath=function(){this._context.closePath()},t.prototype.createImageData=function(t,e){var i=arguments;return 2===i.length?this._context.createImageData(t,e):1===i.length?this._context.createImageData(t):void 0},t.prototype.createLinearGradient=function(t,e,i,n){return this._context.createLinearGradient(t,e,i,n)},t.prototype.createPattern=function(t,e){return this._context.createPattern(t,e)},t.prototype.createRadialGradient=function(t,e,i,n,r,o){return this._context.createRadialGradient(t,e,i,n,r,o)},t.prototype.drawImage=function(t,e,i,n,r,o,a,s,h){var l=arguments,c=this._context;3===l.length?c.drawImage(t,e,i):5===l.length?c.drawImage(t,e,i,n,r):9===l.length&&c.drawImage(t,e,i,n,r,o,a,s,h)},t.prototype.ellipse=function(t,e,i,n,r,o,a,s){this._context.ellipse(t,e,i,n,r,o,a,s)},t.prototype.isPointInPath=function(t,e){return this._context.isPointInPath(t,e)},t.prototype.fill=function(){this._context.fill()},t.prototype.fillRect=function(t,e,i,n){this._context.fillRect(t,e,i,n)},t.prototype.strokeRect=function(t,e,i,n){this._context.strokeRect(t,e,i,n)},t.prototype.fillText=function(t,e,i){this._context.fillText(t,e,i)},t.prototype.measureText=function(t){return this._context.measureText(t)},t.prototype.getImageData=function(t,e,i,n){return this._context.getImageData(t,e,i,n)},t.prototype.lineTo=function(t,e){this._context.lineTo(t,e)},t.prototype.moveTo=function(t,e){this._context.moveTo(t,e)},t.prototype.rect=function(t,e,i,n){this._context.rect(t,e,i,n)},t.prototype.putImageData=function(t,e,i){this._context.putImageData(t,e,i)},t.prototype.quadraticCurveTo=function(t,e,i,n){this._context.quadraticCurveTo(t,e,i,n)},t.prototype.restore=function(){this._context.restore()},t.prototype.rotate=function(t){this._context.rotate(t)},t.prototype.save=function(){this._context.save()},t.prototype.scale=function(t,e){this._context.scale(t,e)},t.prototype.setLineDash=function(t){this._context.setLineDash?this._context.setLineDash(t):"mozDash"in this._context?this._context.mozDash=t:"webkitLineDash"in this._context&&(this._context.webkitLineDash=t)},t.prototype.getLineDash=function(){return this._context.getLineDash()},t.prototype.setTransform=function(t,e,i,n,r,o){this._context.setTransform(t,e,i,n,r,o)},t.prototype.stroke=function(){this._context.stroke()},t.prototype.strokeText=function(t,e,i,n){this._context.strokeText(t,e,i,n)},t.prototype.transform=function(t,e,i,n,r,o){this._context.transform(t,e,i,n,r,o)},t.prototype.translate=function(t,e){this._context.translate(t,e)},t.prototype._enableTrace=function(){var t,e,i=this,n=T.length,r=f._simplifyArray,o=this.setAttr,a=function(t){var n,o=i[t];i[t]=function(){return e=r(Array.prototype.slice.call(arguments,0)),n=o.apply(i,arguments),i._trace({method:t,args:e}),n}};for(t=0;t0&&t[0].getDepth()<=r&&s(t)}(o.getStage().getChildren()),a},t.prototype.getDepth=function(){for(var t=0,e=this.parent;e;)t++,e=e.parent;return t},t.prototype._batchTransformChanges=function(t){this._batchingTransformChange=!0,t(),this._batchingTransformChange=!1,this._needClearTransformCache&&(this._clearCache("transform"),this._clearSelfAndDescendantCache("absoluteTransform",!0)),this._needClearTransformCache=!1},t.prototype.setPosition=function(t){var e=this;return this._batchTransformChanges((function(){e.x(t.x),e.y(t.y)})),this},t.prototype.getPosition=function(){return{x:this.x(),y:this.y()}},t.prototype.getAbsolutePosition=function(t){for(var e=!1,i=this.parent;i;){if(i.isCached()){e=!0;break}i=i.parent}e&&!t&&(t=!0);var n=this.getAbsoluteTransform(t).getMatrix(),r=new h,o=this.offset();return r.m=n.slice(),r.translate(o.x,o.y),r.getTranslation()},t.prototype.setAbsolutePosition=function(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},t.prototype._setTransform=function(t){var e;for(e in t)this.attrs[e]=t[e]},t.prototype._clearTransform=function(){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},t.prototype.move=function(t){var e=t.x,i=t.y,n=this.x(),r=this.y();return void 0!==e&&(n+=e),void 0!==i&&(r+=i),this.setPosition({x:n,y:r}),this},t.prototype._eachAncestorReverse=function(t,e){var i,n,r=[],o=this.getParent();if(!e||e._id!==this._id){for(r.unshift(this);o&&(!e||o._id!==e._id);)r.unshift(o),o=o.parent;for(i=r.length,n=0;n0&&(this.parent.children.splice(t,1),this.parent.children.splice(t-1,0,this),this.parent._setChildrenIndices(),!0)},t.prototype.moveToBottom=function(){if(!this.parent)return f.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)},t.prototype.setZIndex=function(t){if(!this.parent)return f.warn("Node has no parent. zIndex parameter is ignored."),this;(t<0||t>=this.parent.children.length)&&f.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},t.prototype.getAbsoluteOpacity=function(){return this._getCache("absoluteOpacity",this._getAbsoluteOpacity)},t.prototype._getAbsoluteOpacity=function(){var t=this.opacity(),e=this.getParent();return e&&!e._isUnderCache&&(t*=e.getAbsoluteOpacity()),t},t.prototype.moveTo=function(t){return this.getParent()!==t&&(this._remove(),t.add(this)),this},t.prototype.toObject=function(){var t,e,i,n,r={},o=this.getAttrs();for(t in r.attrs={},o)e=o[t],f.isObject(e)&&!f._isPlainObject(e)&&!f._isArray(e)||(i="function"==typeof this[t]&&this[t],delete o[t],n=i?i.call(this):null,o[t]=e,n!==e&&(r.attrs[t]=e));return r.className=this.getClassName(),f._prepareToStringify(r)},t.prototype.toJSON=function(){return JSON.stringify(this.toObject())},t.prototype.getParent=function(){return this.parent},t.prototype.findAncestors=function(t,e,i){var n=[];e&&this._isMatch(t)&&n.push(this);for(var r=this.parent;r;){if(r===i)return n;r._isMatch(t)&&n.push(r),r=r.parent}return n},t.prototype.isAncestorOf=function(t){return!1},t.prototype.findAncestor=function(t,e,i){return this.findAncestors(t,e,i)[0]},t.prototype._isMatch=function(t){if(!t)return!1;if("function"==typeof t)return t(this);var e,i,n=t.replace(/ /g,"").split(","),r=n.length;for(e=0;e=0)&&!this.isDragging()){var i=!1;D._dragElements.forEach((function(t){e.isAncestorOf(t.node)&&(i=!0)})),i||this._createDragElement(t)}}))},t.prototype._dragChange=function(){if(this.attrs.draggable)this._listenDrag();else{if(this._dragCleanup(),!this.getStage())return;var t=D._dragElements.get(this._id),e=t&&"dragging"===t.dragStatus,i=t&&"ready"===t.dragStatus;e?this.stopDrag():i&&D._dragElements.delete(this._id)}},t.prototype._dragCleanup=function(){this.off("mousedown.konva"),this.off("touchstart.konva")},t.create=function(t,e){return f._isString(t)&&(t=JSON.parse(t)),this._createNode(t,e)},t._createNode=function(e,i){var n,r,a,s=t.prototype.getClassName.call(e),h=e.children;if(i&&(e.attrs.container=i),o[s]||(f.warn('Can not find a node with class name "'+s+'". Fallback to "Shape".'),s="Shape"),n=new(0,o[s])(e.attrs),h)for(r=h.length,a=0;a0},e.prototype.removeChildren=function(){for(var t,e=0;e1){for(var i=0;i0?e[0]:void 0},e.prototype._generalFind=function(t,e){var i=[];return this._descendants((function(n){var r=n._isMatch(t);return r&&i.push(n),!(!r||!e)})),s.toCollection(i)},e.prototype._descendants=function(t){for(var e=0;e-1&&nt.splice(i,1),this},e.prototype.getPointerPosition=function(){var t=this._pointerPositions[0]||this._changedPointerPositions[0];return t?{x:t.x,y:t.y}:(f.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)},e.prototype._getPointerById=function(t){return this._pointerPositions.find((function(e){return e.id===t}))},e.prototype.getPointersPositions=function(){return this._pointerPositions},e.prototype.getStage=function(){return this},e.prototype.getContent=function(){return this.content},e.prototype._toKonvaCanvas=function(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 E({width:t.width,height:t.height,pixelRatio:t.pixelRatio||1}),i=e.getContext()._context,n=this.children;return(t.x||t.y)&&i.translate(-1*t.x,-1*t.y),n.each((function(e){if(e.isVisible()){var n=e._toKonvaCanvas(t);i.drawImage(n._canvas,t.x,t.y,n.getWidth()/n.getPixelRatio(),n.getHeight()/n.getPixelRatio())}})),e},e.prototype.getIntersection=function(t,e){if(!t)return null;var i,n,r=this.children;for(i=r.length-1;i>=0;i--)if(n=r[i].getIntersection(t,e))return n;return null},e.prototype._resizeDOM=function(){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.each((function(i){i.setSize({width:t,height:e}),i.draw()}))},e.prototype.add=function(e){if(arguments.length>1){for(var i=0;i5&&f.warn("The stage has "+n+" 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."),e.setSize({width:this.width(),height:this.height()}),e.draw(),r.isBrowser&&this.content.appendChild(e.canvas._canvas),this},e.prototype.getParent=function(){return null},e.prototype.getLayer=function(){return null},e.prototype.hasPointerCapture=function(t){return J(t,this)},e.prototype.setPointerCapture=function(t){Z(t,this)},e.prototype.releaseCapture=function(t){$(t)},e.prototype.getLayers=function(){return this.getChildren()},e.prototype._bindContentEvents=function(){if(r.isBrowser)for(var t=0;t0},e.prototype.destroy=function(){return X.prototype.destroy.call(this),delete ht[this.colorKey],delete this.colorKey,this},e.prototype._useBufferCanvas=function(t){var e;if(!this.getStage())return!1;if(!(null===(e=this.attrs.perfectDrawEnabled)||void 0===e||e))return!1;var i=t||this.hasFill(),n=this.hasStroke(),r=1!==this.getAbsoluteOpacity();if(i&&n&&r)return!0;var o=this.hasShadow(),a=this.shadowForStrokeEnabled();return!!(i&&n&&o&&a)},e.prototype.setStrokeHitEnabled=function(t){f.warn("strokeHitEnabled property is deprecated. Please use hitStrokeWidth instead."),t?this.hitStrokeWidth("auto"):this.hitStrokeWidth(0)},e.prototype.getStrokeHitEnabled=function(){return 0!==this.hitStrokeWidth()},e.prototype.getSelfRect=function(){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}},e.prototype.getClientRect=function(t){void 0===t&&(t={});var e=t.skipTransform,i=t.relativeTo,n=this.getSelfRect(),r=!t.skipStroke&&this.hasStroke()&&this.strokeWidth()||0,o=n.width+r,a=n.height+r,s=!t.skipShadow&&this.hasShadow(),h=s?this.shadowOffsetX():0,l=s?this.shadowOffsetY():0,c=o+Math.abs(h),d=a+Math.abs(l),u=s&&this.shadowBlur()||0,p=c+2*u,f=d+2*u,g=0;Math.round(r/2)!==r/2&&(g=1);var v={width:p+g,height:f+g,x:-Math.round(r/2+u)+Math.min(h,0)+n.x,y:-Math.round(r/2+u)+Math.min(l,0)+n.y};return e?v:this._transformedRect(v,i)},e.prototype.drawScene=function(t,e){var i,n,r=this.getLayer(),o=t||r.getCanvas(),a=o.getContext(),s=this._getCanvasCache(),h=this.getSceneFunc(),l=this.hasShadow(),c=o.isCache,d=o.isCache,u=e===this;if(!this.isVisible()&&!c)return this;if(s){a.save();var p=this.getAbsoluteTransform(e).getMatrix();return a.transform(p[0],p[1],p[2],p[3],p[4],p[5]),this._drawCachedSceneCanvas(a),a.restore(),this}if(!h)return this;if(a.save(),this._useBufferCanvas()&&!d){(n=(i=this.getStage().bufferCanvas).getContext()).clear(),n.save(),n._applyLineJoin(this);var f=this.getAbsoluteTransform(e).getMatrix();n.transform(f[0],f[1],f[2],f[3],f[4],f[5]),h.call(this,n,this),n.restore();var g=i.pixelRatio;l&&a._applyShadow(this),a._applyOpacity(this),a._applyGlobalCompositeOperation(this),a.drawImage(i._canvas,0,0,i.width/g,i.height/g)}else{if(a._applyLineJoin(this),!u){f=this.getAbsoluteTransform(e).getMatrix();a.transform(f[0],f[1],f[2],f[3],f[4],f[5]),a._applyOpacity(this),a._applyGlobalCompositeOperation(this)}l&&a._applyShadow(this),h.call(this,a,this)}return a.restore(),this},e.prototype.drawHit=function(t,e){if(!this.shouldDrawHit(e))return this;var i=this.getLayer(),n=t||i.hitCanvas,r=n&&n.getContext(),o=this.hitFunc()||this.sceneFunc(),a=this._getCanvasCache(),s=a&&a.hit;if(this.colorKey||(console.log(this),f.warn("Looks like your canvas has a destroyed shape in it. Do not reuse shape after you destroyed it. See the shape in logs above. If you want to reuse shape you should call remove() instead of destroy()")),s){r.save();var h=this.getAbsoluteTransform(e).getMatrix();return r.transform(h[0],h[1],h[2],h[3],h[4],h[5]),this._drawCachedHitCanvas(r),r.restore(),this}if(!o)return this;if(r.save(),r._applyLineJoin(this),!(this===e)){var l=this.getAbsoluteTransform(e).getMatrix();r.transform(l[0],l[1],l[2],l[3],l[4],l[5])}return o.call(this,r,this),r.restore(),this},e.prototype.drawHitFromCache=function(t){void 0===t&&(t=0);var e,i,n,r,o,a=this._getCanvasCache(),s=this._getCachedSceneCanvas(),h=a.hit,l=h.getContext(),c=h.getWidth(),d=h.getHeight();l.clear(),l.drawImage(s._canvas,0,0,c,d);try{for(n=(i=(e=l.getImageData(0,0,c,d)).data).length,r=f._hexToRgb(this.colorKey),o=0;ot?(i[o]=r.r,i[o+1]=r.g,i[o+2]=r.b,i[o+3]=255):i[o+3]=0;l.putImageData(e,0,0)}catch(t){f.error("Unable to draw hit graph from cached scene canvas. "+t.message)}return this},e.prototype.hasPointerCapture=function(t){return J(t,this)},e.prototype.setPointerCapture=function(t){Z(t,this)},e.prototype.releaseCapture=function(t){$(t)},e}(X);lt.prototype._fillFunc=function(t){t.fill()},lt.prototype._strokeFunc=function(t){t.stroke()},lt.prototype._fillFuncHit=function(t){t.fill()},lt.prototype._strokeFuncHit=function(t){t.stroke()},lt.prototype._centroid=!1,lt.prototype.nodeType="Shape",a(lt),lt.prototype.eventListeners={},lt.prototype.on.call(lt.prototype,"shadowColorChange.konva shadowBlurChange.konva shadowOffsetChange.konva shadowOpacityChange.konva shadowEnabledChange.konva",(function(){this._clearCache("hasShadow")})),lt.prototype.on.call(lt.prototype,"shadowColorChange.konva shadowOpacityChange.konva shadowEnabledChange.konva",(function(){this._clearCache("shadowRGBA")})),lt.prototype.on.call(lt.prototype,"fillPriorityChange.konva fillPatternImageChange.konva fillPatternRepeatChange.konva fillPatternScaleXChange.konva fillPatternScaleYChange.konva",(function(){this._clearCache("patternImage")})),lt.prototype.on.call(lt.prototype,"fillPriorityChange.konva fillLinearGradientColorStopsChange.konva fillLinearGradientStartPointXChange.konva fillLinearGradientStartPointYChange.konva fillLinearGradientEndPointXChange.konva fillLinearGradientEndPointYChange.konva",(function(){this._clearCache("linearGradient")})),lt.prototype.on.call(lt.prototype,"fillPriorityChange.konva fillRadialGradientColorStopsChange.konva fillRadialGradientStartPointXChange.konva fillRadialGradientStartPointYChange.konva fillRadialGradientEndPointXChange.konva fillRadialGradientEndPointYChange.konva fillRadialGradientStartRadiusChange.konva fillRadialGradientEndRadiusChange.konva",(function(){this._clearCache("radialGradient")})),w.addGetterSetter(lt,"stroke",void 0,x()),w.addGetterSetter(lt,"strokeWidth",2,y()),w.addGetterSetter(lt,"fillAfterStrokeEnabled",!1),w.addGetterSetter(lt,"hitStrokeWidth","auto",_()),w.addGetterSetter(lt,"strokeHitEnabled",!0,S()),w.addGetterSetter(lt,"perfectDrawEnabled",!0,S()),w.addGetterSetter(lt,"shadowForStrokeEnabled",!0,S()),w.addGetterSetter(lt,"lineJoin"),w.addGetterSetter(lt,"lineCap"),w.addGetterSetter(lt,"sceneFunc"),w.addGetterSetter(lt,"hitFunc"),w.addGetterSetter(lt,"dash"),w.addGetterSetter(lt,"dashOffset",0,y()),w.addGetterSetter(lt,"shadowColor",void 0,b()),w.addGetterSetter(lt,"shadowBlur",0,y()),w.addGetterSetter(lt,"shadowOpacity",1,y()),w.addComponentsGetterSetter(lt,"shadowOffset",["x","y"]),w.addGetterSetter(lt,"shadowOffsetX",0,y()),w.addGetterSetter(lt,"shadowOffsetY",0,y()),w.addGetterSetter(lt,"fillPatternImage"),w.addGetterSetter(lt,"fill",void 0,x()),w.addGetterSetter(lt,"fillPatternX",0,y()),w.addGetterSetter(lt,"fillPatternY",0,y()),w.addGetterSetter(lt,"fillLinearGradientColorStops"),w.addGetterSetter(lt,"strokeLinearGradientColorStops"),w.addGetterSetter(lt,"fillRadialGradientStartRadius",0),w.addGetterSetter(lt,"fillRadialGradientEndRadius",0),w.addGetterSetter(lt,"fillRadialGradientColorStops"),w.addGetterSetter(lt,"fillPatternRepeat","repeat"),w.addGetterSetter(lt,"fillEnabled",!0),w.addGetterSetter(lt,"strokeEnabled",!0),w.addGetterSetter(lt,"shadowEnabled",!0),w.addGetterSetter(lt,"dashEnabled",!0),w.addGetterSetter(lt,"strokeScaleEnabled",!0),w.addGetterSetter(lt,"fillPriority","color"),w.addComponentsGetterSetter(lt,"fillPatternOffset",["x","y"]),w.addGetterSetter(lt,"fillPatternOffsetX",0,y()),w.addGetterSetter(lt,"fillPatternOffsetY",0,y()),w.addComponentsGetterSetter(lt,"fillPatternScale",["x","y"]),w.addGetterSetter(lt,"fillPatternScaleX",1,y()),w.addGetterSetter(lt,"fillPatternScaleY",1,y()),w.addComponentsGetterSetter(lt,"fillLinearGradientStartPoint",["x","y"]),w.addComponentsGetterSetter(lt,"strokeLinearGradientStartPoint",["x","y"]),w.addGetterSetter(lt,"fillLinearGradientStartPointX",0),w.addGetterSetter(lt,"strokeLinearGradientStartPointX",0),w.addGetterSetter(lt,"fillLinearGradientStartPointY",0),w.addGetterSetter(lt,"strokeLinearGradientStartPointY",0),w.addComponentsGetterSetter(lt,"fillLinearGradientEndPoint",["x","y"]),w.addComponentsGetterSetter(lt,"strokeLinearGradientEndPoint",["x","y"]),w.addGetterSetter(lt,"fillLinearGradientEndPointX",0),w.addGetterSetter(lt,"strokeLinearGradientEndPointX",0),w.addGetterSetter(lt,"fillLinearGradientEndPointY",0),w.addGetterSetter(lt,"strokeLinearGradientEndPointY",0),w.addComponentsGetterSetter(lt,"fillRadialGradientStartPoint",["x","y"]),w.addGetterSetter(lt,"fillRadialGradientStartPointX",0),w.addGetterSetter(lt,"fillRadialGradientStartPointY",0),w.addComponentsGetterSetter(lt,"fillRadialGradientEndPoint",["x","y"]),w.addGetterSetter(lt,"fillRadialGradientEndPointX",0),w.addGetterSetter(lt,"fillRadialGradientEndPointY",0),w.addGetterSetter(lt,"fillPatternRotation",0),w.backCompat(lt,{dashArray:"dash",getDashArray:"getDash",setDashArray:"getDash",drawFunc:"sceneFunc",getDrawFunc:"getSceneFunc",setDrawFunc:"setSceneFunc",drawHitFunc:"hitFunc",getDrawHitFunc:"getHitFunc",setDrawHitFunc:"setHitFunc"}),s.mapMethods(lt);var ct=[{x:0,y:0},{x:-1,y:-1},{x:1,y:-1},{x:1,y:1},{x:-1,y:1}],dt=ct.length,ut=function(t){function e(e){var i=t.call(this,e)||this;return i.canvas=new E,i.hitCanvas=new O({pixelRatio:1}),i._waitingForDraw=!1,i.on("visibleChange.konva",i._checkVisibility),i._checkVisibility(),i.on("imageSmoothingEnabledChange.konva",i._setSmoothEnabled),i._setSmoothEnabled(),i}return P(e,t),e.prototype.createPNGStream=function(){return this.canvas._canvas.createPNGStream()},e.prototype.getCanvas=function(){return this.canvas},e.prototype.getHitCanvas=function(){return this.hitCanvas},e.prototype.getContext=function(){return this.getCanvas().getContext()},e.prototype.clear=function(t){return this.getContext().clear(t),this.getHitCanvas().getContext().clear(t),this},e.prototype.setZIndex=function(e){t.prototype.setZIndex.call(this,e);var i=this.getStage();return i&&(i.content.removeChild(this.getCanvas()._canvas),e0?{antialiased:!0}:{}},e.prototype.drawScene=function(t,e){var i=this.getLayer(),n=t||i&&i.getCanvas();return this._fire("beforeDraw",{node:this}),this.clearBeforeDraw()&&n.getContext().clear(),U.prototype.drawScene.call(this,n,e),this._fire("draw",{node:this}),this},e.prototype.drawHit=function(t,e){var i=this.getLayer(),n=t||i&&i.hitCanvas;return i&&i.clearBeforeDraw()&&i.getHitCanvas().getContext().clear(),U.prototype.drawHit.call(this,n,e),this},e.prototype.enableHitGraph=function(){return this.hitGraphEnabled(!0),this},e.prototype.disableHitGraph=function(){return this.hitGraphEnabled(!1),this},e.prototype.setHitGraphEnabled=function(t){f.warn("hitGraphEnabled method is deprecated. Please use layer.listening() instead."),this.listening(t)},e.prototype.getHitGraphEnabled=function(t){return f.warn("hitGraphEnabled method is deprecated. Please use layer.listening() instead."),this.listening()},e.prototype.toggleHitCanvas=function(){if(this.parent){var t=this.parent;!!this.hitCanvas._canvas.parentNode?t.content.removeChild(this.hitCanvas._canvas):t.content.appendChild(this.hitCanvas._canvas)}},e}(U);ut.prototype.nodeType="Layer",a(ut),w.addGetterSetter(ut,"imageSmoothingEnabled",!0),w.addGetterSetter(ut,"clearBeforeDraw",!0),w.addGetterSetter(ut,"hitGraphEnabled",!0,S()),s.mapMethods(ut);var pt=function(t){function e(e){var i=t.call(this,e)||this;return i.listening(!1),f.warn('Konva.Fast layer is deprecated. Please use "new Konva.Layer({ listening: false })" instead.'),i}return P(e,t),e}(ut);pt.prototype.nodeType="FastLayer",a(pt),s.mapMethods(pt);var ft=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return P(e,t),e.prototype._validateAdd=function(t){var e=t.getType();"Group"!==e&&"Shape"!==e&&f.throw("You may only add groups and shapes to groups.")},e}(U);ft.prototype.nodeType="Group",a(ft),s.mapMethods(ft);var gt=n.performance&&n.performance.now?function(){return n.performance.now()}:function(){return(new Date).getTime()},vt=function(){function t(e,i){this.id=t.animIdCounter++,this.frame={time:0,timeDiff:0,lastTime:gt(),frameRate:0},this.func=e,this.setLayers(i)}return t.prototype.setLayers=function(t){var e=[];return e=t?t.length>0?t:[t]:[],this.layers=e,this},t.prototype.getLayers=function(){return this.layers},t.prototype.addLayer=function(t){var e,i=this.layers,n=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())},t.prototype.getTime=function(){return this._time},t.prototype.setPosition=function(t){this.prevPos=this._pos,this.propFunc(t),this._pos=t},t.prototype.getPosition=function(t){return void 0===t&&(t=this._time),this.func(t,this.begin,this._change,this.duration)},t.prototype.play=function(){this.state=2,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onPlay")},t.prototype.reverse=function(){this.state=3,this._time=this.duration-this._time,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onReverse")},t.prototype.seek=function(t){this.pause(),this._time=t,this.update(),this.fire("onSeek")},t.prototype.reset=function(){this.pause(),this._time=0,this.update(),this.fire("onReset")},t.prototype.finish=function(){this.pause(),this._time=this.duration,this.update(),this.fire("onFinish")},t.prototype.update=function(){this.setPosition(this.getPosition(this._time)),this.fire("onUpdate")},t.prototype.onEnterFrame=function(){var t=this.getTimer()-this._startTime;2===this.state?this.setTime(t):3===this.state&&this.setTime(this.duration-t)},t.prototype.pause=function(){this.state=1,this.fire("onPause")},t.prototype.getTimer=function(){return(new Date).getTime()},t}(),xt=function(){function t(e){var i,n,o=this,a=e.node,s=a._id,h=e.easing||St.Linear,l=!!e.yoyo;i=void 0===e.duration?.3:0===e.duration?.001:e.duration,this.node=a,this._id=mt++;var c=a.getLayer()||(a instanceof r.Stage?a.getLayers():null);for(n in c||f.error("Tween constructor have `node` that is not in a layer. Please add node into layer first."),this.anim=new vt((function(){o.tween.onEnterFrame()}),c),this.tween=new bt(n,(function(t){o._tweenFunc(t)}),h,0,1,1e3*i,l),this._addListeners(),t.attrs[s]||(t.attrs[s]={}),t.attrs[s][this._id]||(t.attrs[s][this._id]={}),t.tweens[s]||(t.tweens[s]={}),e)void 0===yt[n]&&this._addAttr(n,e[n]);this.reset(),this.onFinish=e.onFinish,this.onReset=e.onReset,this.onUpdate=e.onUpdate}return t.prototype._addAttr=function(e,i){var n,r,o,a,s,h,l,c,d=this.node,u=d._id;if((o=t.tweens[u][e])&&delete t.attrs[u][o][e],n=d.getAttr(e),f._isArray(i))if(r=[],s=Math.max(i.length,n.length),"points"===e&&i.length!==n.length&&(i.length>n.length?(l=n,n=f._prepareArrayForTween(n,i,d.closed())):(h=i,i=f._prepareArrayForTween(i,n,d.closed()))),0===e.indexOf("fill"))for(a=0;a4){for(i=(e=this.getTensionPoints()).length,n=s?0:4,s||t.quadraticCurveTo(e[0],e[1],e[2],e[3]);n4;o&&(r=this.getTensionPoints());var a,s,h=n.length;o?(a=n[h-2]-(r[r.length-2]+r[r.length-4])/2,s=n[h-1]-(r[r.length-1]+r[r.length-3])/2):(a=n[h-2]-n[h-4],s=n[h-1]-n[h-3]);var l=(Math.atan2(s,a)+i)%i,c=this.pointerLength(),d=this.pointerWidth();e.save(),e.beginPath(),e.translate(n[h-2],n[h-1]),e.rotate(l),e.moveTo(0,0),e.lineTo(-c,d/2),e.lineTo(-c,-d/2),e.closePath(),e.restore(),this.pointerAtBeginning()&&(e.save(),e.translate(n[0],n[1]),o?(a=(r[0]+r[2])/2-n[0],s=(r[1]+r[3])/2-n[1]):(a=n[2]-n[0],s=n[3]-n[1]),e.rotate((Math.atan2(-s,-a)+i)%i),e.moveTo(0,0),e.lineTo(-c,d/2),e.lineTo(-c,-d/2),e.closePath(),e.restore());var u=this.dashEnabled();u&&(this.attrs.dashEnabled=!1,e.setLineDash([])),e.fillStrokeShape(this),u&&(this.attrs.dashEnabled=!0)},e.prototype.getSelfRect=function(){var e=t.prototype.getSelfRect.call(this),i=this.pointerWidth()/2;return{x:e.x-i,y:e.y-i,width:e.width+2*i,height:e.height+2*i}},e}(Pt);kt.prototype.className="Arrow",a(kt),w.addGetterSetter(kt,"pointerLength",10,y()),w.addGetterSetter(kt,"pointerWidth",10,y()),w.addGetterSetter(kt,"pointerAtBeginning",!1),s.mapMethods(kt);var Tt=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return P(e,t),e.prototype._sceneFunc=function(t){t.beginPath(),t.arc(0,0,this.attrs.radius||0,0,2*Math.PI,!1),t.closePath(),t.fillStrokeShape(this)},e.prototype.getWidth=function(){return 2*this.radius()},e.prototype.getHeight=function(){return 2*this.radius()},e.prototype.setWidth=function(t){this.radius()!==t/2&&this.radius(t/2)},e.prototype.setHeight=function(t){this.radius()!==t/2&&this.radius(t/2)},e}(lt);Tt.prototype._centroid=!0,Tt.prototype.className="Circle",Tt.prototype._attrsAffectingSize=["radius"],a(Tt),w.addGetterSetter(Tt,"radius",0,y()),s.mapMethods(Tt);var At=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return P(e,t),e.prototype._sceneFunc=function(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)},e.prototype.getWidth=function(){return 2*this.radiusX()},e.prototype.getHeight=function(){return 2*this.radiusY()},e.prototype.setWidth=function(t){this.radiusX(t/2)},e.prototype.setHeight=function(t){this.radiusY(t/2)},e}(lt);At.prototype.className="Ellipse",At.prototype._centroid=!0,At.prototype._attrsAffectingSize=["radiusX","radiusY"],a(At),w.addComponentsGetterSetter(At,"radius",["x","y"]),w.addGetterSetter(At,"radiusX",0,y()),w.addGetterSetter(At,"radiusY",0,y()),s.mapMethods(At);var Mt=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return P(e,t),e.prototype._useBufferCanvas=function(){return t.prototype._useBufferCanvas.call(this,!0)},e.prototype._sceneFunc=function(t){var e,i=this.getWidth(),n=this.getHeight(),r=this.attrs.image;if(r){var o=this.attrs.cropWidth,a=this.attrs.cropHeight;e=o&&a?[r,this.cropX(),this.cropY(),o,a,0,0,i,n]:[r,0,0,i,n]}(this.hasFill()||this.hasStroke())&&(t.beginPath(),t.rect(0,0,i,n),t.closePath(),t.fillStrokeShape(this)),r&&t.drawImage.apply(t,e)},e.prototype._hitFunc=function(t){var e=this.width(),i=this.height();t.beginPath(),t.rect(0,0,e,i),t.closePath(),t.fillStrokeShape(this)},e.prototype.getWidth=function(){var t,e;return null!==(t=this.attrs.width)&&void 0!==t?t:(null===(e=this.image())||void 0===e?void 0:e.width)||0},e.prototype.getHeight=function(){var t,e;return null!==(t=this.attrs.height)&&void 0!==t?t:(null===(e=this.image())||void 0===e?void 0:e.height)||0},e.fromURL=function(t,i){var n=f.createImageElement();n.onload=function(){var t=new e({image:n});i(t)},n.crossOrigin="Anonymous",n.src=t},e}(lt);Mt.prototype.className="Image",a(Mt),w.addGetterSetter(Mt,"image"),w.addComponentsGetterSetter(Mt,"crop",["x","y","width","height"]),w.addGetterSetter(Mt,"cropX",0,y()),w.addGetterSetter(Mt,"cropY",0,y()),w.addGetterSetter(Mt,"cropWidth",0,y()),w.addGetterSetter(Mt,"cropHeight",0,y()),s.mapMethods(Mt);var Gt=["fontFamily","fontSize","fontStyle","padding","lineHeight","text","width"],Rt=Gt.length,Lt=function(t){function e(e){var i=t.call(this,e)||this;return i.on("add.konva",(function(t){this._addListeners(t.child),this._sync()})),i}return P(e,t),e.prototype.getText=function(){return this.find("Text")[0]},e.prototype.getTag=function(){return this.find("Tag")[0]},e.prototype._addListeners=function(t){var e,i=this,n=function(){i._sync()};for(e=0;el?h:l,g=h>l?1:h/l,v=h>l?l/h:1;t.translate(a,s),t.rotate(u),t.scale(g,v),t.arc(0,0,f,c,c+d,1-p),t.scale(1/g,1/v),t.rotate(-u),t.translate(-a,-s);break;case"z":i=!0,t.closePath()}}i||this.hasFill()?t.fillStrokeShape(this):t.strokeShape(this)},e.prototype.getSelfRect=function(){var t=[];this.dataArray.forEach((function(i){if("A"===i.command){var n=i.points[4],r=i.points[5],o=i.points[4]+r,a=Math.PI/180;if(Math.abs(n-o)o;s-=a){var h=e.getPointOnEllipticalArc(i.points[0],i.points[1],i.points[2],i.points[3],s,0);t.push(h.x,h.y)}else for(s=n+a;sthis.dataArray[n].pathLength;)t-=this.dataArray[n].pathLength,++n;if(n===r)return{x:(i=this.dataArray[n-1].points.slice(-2))[0],y:i[1]};if(t<.01)return{x:(i=this.dataArray[n].points.slice(0,2))[0],y:i[1]};var o=this.dataArray[n],a=o.points;switch(o.command){case"L":return e.getPointOnLine(t,o.start.x,o.start.y,a[0],a[1]);case"C":return e.getPointOnCubicBezier(t/o.pathLength,o.start.x,o.start.y,a[0],a[1],a[2],a[3],a[4],a[5]);case"Q":return e.getPointOnQuadraticBezier(t/o.pathLength,o.start.x,o.start.y,a[0],a[1],a[2],a[3]);case"A":var s=a[0],h=a[1],l=a[2],c=a[3],d=a[4],u=a[5],p=a[6];return d+=u*t/o.pathLength,e.getPointOnEllipticalArc(s,h,l,c,d,p)}return null},e.getLineLength=function(t,e,i,n){return Math.sqrt((i-t)*(i-t)+(n-e)*(n-e))},e.getPointOnLine=function(t,e,i,n,r,o,a){void 0===o&&(o=e),void 0===a&&(a=i);var s=(r-i)/(n-e+1e-8),h=Math.sqrt(t*t/(1+s*s));n0&&!isNaN(p[0]);){var y,m,_,b,x,S,w,C,P,k,T=null,A=[],M=h,G=l;switch(u){case"l":h+=p.shift(),l+=p.shift(),T="L",A.push(h,l);break;case"L":h=p.shift(),l=p.shift(),A.push(h,l);break;case"m":var R=p.shift(),L=p.shift();if(h+=R,l+=L,T="M",a.length>2&&"z"===a[a.length-1].command)for(var E=a.length-2;E>=0;E--)if("M"===a[E].command){h=a[E].points[0]+R,l=a[E].points[1]+L;break}A.push(h,l),u="l";break;case"M":h=p.shift(),l=p.shift(),T="M",A.push(h,l),u="L";break;case"h":h+=p.shift(),T="L",A.push(h,l);break;case"H":h=p.shift(),T="L",A.push(h,l);break;case"v":l+=p.shift(),T="L",A.push(h,l);break;case"V":l=p.shift(),T="L",A.push(h,l);break;case"C":A.push(p.shift(),p.shift(),p.shift(),p.shift()),h=p.shift(),l=p.shift(),A.push(h,l);break;case"c":A.push(h+p.shift(),l+p.shift(),h+p.shift(),l+p.shift()),h+=p.shift(),l+=p.shift(),T="C",A.push(h,l);break;case"S":m=h,_=l,"C"===(y=a[a.length-1]).command&&(m=h+(h-y.points[2]),_=l+(l-y.points[3])),A.push(m,_,p.shift(),p.shift()),h=p.shift(),l=p.shift(),T="C",A.push(h,l);break;case"s":m=h,_=l,"C"===(y=a[a.length-1]).command&&(m=h+(h-y.points[2]),_=l+(l-y.points[3])),A.push(m,_,h+p.shift(),l+p.shift()),h+=p.shift(),l+=p.shift(),T="C",A.push(h,l);break;case"Q":A.push(p.shift(),p.shift()),h=p.shift(),l=p.shift(),A.push(h,l);break;case"q":A.push(h+p.shift(),l+p.shift()),h+=p.shift(),l+=p.shift(),T="Q",A.push(h,l);break;case"T":m=h,_=l,"Q"===(y=a[a.length-1]).command&&(m=h+(h-y.points[0]),_=l+(l-y.points[1])),h=p.shift(),l=p.shift(),T="Q",A.push(m,_,h,l);break;case"t":m=h,_=l,"Q"===(y=a[a.length-1]).command&&(m=h+(h-y.points[0]),_=l+(l-y.points[1])),h+=p.shift(),l+=p.shift(),T="Q",A.push(m,_,h,l);break;case"A":b=p.shift(),x=p.shift(),S=p.shift(),w=p.shift(),C=p.shift(),P=h,k=l,h=p.shift(),l=p.shift(),T="A",A=this.convertEndpointToCenterParameterization(P,k,h,l,w,C,b,x,S);break;case"a":b=p.shift(),x=p.shift(),S=p.shift(),w=p.shift(),C=p.shift(),P=h,k=l,h+=p.shift(),l+=p.shift(),T="A",A=this.convertEndpointToCenterParameterization(P,k,h,l,w,C,b,x,S)}a.push({command:T||u,points:A,start:{x:M,y:G},pathLength:this.calcLength(M,G,T||u,A)})}"z"!==u&&"Z"!==u||a.push({command:"z",points:[],start:void 0,pathLength:0})}return a},e.calcLength=function(t,i,n,r){var o,a,s,h,l=e;switch(n){case"L":return l.getLineLength(t,i,r[0],r[1]);case"C":for(o=0,a=l.getPointOnCubicBezier(0,t,i,r[0],r[1],r[2],r[3],r[4],r[5]),h=.01;h<=1;h+=.01)s=l.getPointOnCubicBezier(h,t,i,r[0],r[1],r[2],r[3],r[4],r[5]),o+=l.getLineLength(a.x,a.y,s.x,s.y),a=s;return o;case"Q":for(o=0,a=l.getPointOnQuadraticBezier(0,t,i,r[0],r[1],r[2],r[3]),h=.01;h<=1;h+=.01)s=l.getPointOnQuadraticBezier(h,t,i,r[0],r[1],r[2],r[3]),o+=l.getLineLength(a.x,a.y,s.x,s.y),a=s;return o;case"A":o=0;var c=r[4],d=r[5],u=r[4]+d,p=Math.PI/180;if(Math.abs(c-u)u;h-=p)s=l.getPointOnEllipticalArc(r[0],r[1],r[2],r[3],h,0),o+=l.getLineLength(a.x,a.y,s.x,s.y),a=s;else for(h=c+p;h1&&(a*=Math.sqrt(u),s*=Math.sqrt(u));var p=Math.sqrt((a*a*(s*s)-a*a*(d*d)-s*s*(c*c))/(a*a*(d*d)+s*s*(c*c)));r===o&&(p*=-1),isNaN(p)&&(p=0);var f=p*a*d/s,g=p*-s*c/a,v=(t+i)/2+Math.cos(l)*f-Math.sin(l)*g,y=(e+n)/2+Math.sin(l)*f+Math.cos(l)*g,m=function(t){return Math.sqrt(t[0]*t[0]+t[1]*t[1])},_=function(t,e){return(t[0]*e[0]+t[1]*e[1])/(m(t)*m(e))},b=function(t,e){return(t[0]*e[1]=1&&(C=0),0===o&&C>0&&(C-=2*Math.PI),1===o&&C<0&&(C+=2*Math.PI),[v,y,a,s,x,C,l,o]},e}(lt);Ot.prototype.className="Path",Ot.prototype._attrsAffectingSize=["data"],a(Ot),w.addGetterSetter(Ot,"data"),s.mapMethods(Ot);var Dt=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return P(e,t),e.prototype._sceneFunc=function(t){var e=this.cornerRadius(),i=this.width(),n=this.height();if(t.beginPath(),e){var r=0,o=0,a=0,s=0;"number"==typeof e?r=o=a=s=Math.min(e,i/2,n/2):(r=Math.min(e[0]||0,i/2,n/2),o=Math.min(e[1]||0,i/2,n/2),s=Math.min(e[2]||0,i/2,n/2),a=Math.min(e[3]||0,i/2,n/2)),t.moveTo(r,0),t.lineTo(i-o,0),t.arc(i-o,o,o,3*Math.PI/2,0,!1),t.lineTo(i,n-s),t.arc(i-s,n-s,s,0,Math.PI/2,!1),t.lineTo(a,n),t.arc(a,n-a,a,Math.PI/2,Math.PI,!1),t.lineTo(0,r),t.arc(r,r,r,Math.PI,3*Math.PI/2,!1)}else t.rect(0,0,i,n);t.closePath(),t.fillStrokeShape(this)},e}(lt);Dt.prototype.className="Rect",a(Dt),w.addGetterSetter(Dt,"cornerRadius",0,m(4)),s.mapMethods(Dt);var It=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return P(e,t),e.prototype._sceneFunc=function(t){var e=this._getPoints();t.beginPath(),t.moveTo(e[0].x,e[0].y);for(var i=1;i1&&(v+=a)}}},e.prototype._hitFunc=function(t){var e=this.getWidth(),i=this.getHeight();t.beginPath(),t.rect(0,0,e,i),t.closePath(),t.fillStrokeShape(this)},e.prototype.setText=function(t){var e=f._isString(t)?t:null==t?"":t+"";return this._setAttr("text",e),this},e.prototype.getWidth=function(){return"auto"===this.attrs.width||void 0===this.attrs.width?this.getTextWidth()+2*this.padding():this.attrs.width},e.prototype.getHeight=function(){return"auto"===this.attrs.height||void 0===this.attrs.height?this.fontSize()*this.textArr.length*this.lineHeight()+2*this.padding():this.attrs.height},e.prototype.getTextWidth=function(){return this.textWidth},e.prototype.getTextHeight=function(){return f.warn("text.getTextHeight() method is deprecated. Use text.height() - for full height and text.fontSize() - for one line height."),this.textHeight},e.prototype.measureSize=function(t){var e,i=jt(),n=this.fontSize();return i.save(),i.font=this._getContextFont(),e=i.measureText(t),i.restore(),{width:e.width,height:n}},e.prototype._getContextFont=function(){return r.UA.isIE?this.fontStyle()+" "+this.fontSize()+"px "+this.fontFamily():this.fontStyle()+" "+this.fontVariant()+" "+this.fontSize()+"px "+this.fontFamily().split(",").map((function(t){var e=(t=t.trim()).indexOf(" ")>=0,i=t.indexOf('"')>=0||t.indexOf("'")>=0;return e&&!i&&(t='"'+t+'"'),t})).join(", ")},e.prototype._addTextLine=function(t){"justify"===this.align()&&(t=t.trim());var e=this._getTextWidth(t);return this.textArr.push({text:t,width:e})},e.prototype._getTextWidth=function(t){var e=this.letterSpacing(),i=t.length;return jt().measureText(t).width+(i?e*(i-1):0)},e.prototype._setTextData=function(){var t=this.text().split("\n"),e=+this.fontSize(),i=0,n=this.lineHeight()*e,r=this.attrs.width,o=this.attrs.height,a="auto"!==r&&void 0!==r,s="auto"!==o&&void 0!==o,h=this.padding(),l=r-2*h,c=o-2*h,d=0,u=this.wrap(),p="none"!==u,f="char"!==u&&p,g=this.ellipsis();this.textArr=[],jt().font=this._getContextFont();for(var v=g?this._getTextWidth("…"):0,y=0,m=t.length;yl)for(;_.length>0;){for(var x=0,S=_.length,w="",C=0;x>>1,k=_.slice(0,P+1),T=this._getTextWidth(k)+v;T<=l?(x=P+1,w=k+(g?"…":""),C=T):S=P}if(!w)break;if(f){var A,M=_[w.length];(A=(" "===M||"-"===M)&&C<=l?w.length:Math.max(w.lastIndexOf(" "),w.lastIndexOf("-"))+1)>0&&(x=A,w=w.slice(0,x),C=this._getTextWidth(w))}if(w=w.trimRight(),this._addTextLine(w),i=Math.max(i,C),d+=n,!p||s&&d+n>c){var G=this.textArr[this.textArr.length-1];if(G)if(g)this._getTextWidth(G.text+"…")0&&(b=this._getTextWidth(_))<=l){this._addTextLine(_),d+=n,i=Math.max(i,b);break}}else this._addTextLine(_),d+=n,i=Math.max(i,b);if(s&&d+n>c)break}this.textHeight=e,this.textWidth=i},e.prototype.getStrokeScaleEnabled=function(){return!0},e}(lt);Ut.prototype._fillFunc=function(t){t.fillText(this._partialText,this._partialTextX,this._partialTextY)},Ut.prototype._strokeFunc=function(t){t.strokeText(this._partialText,this._partialTextX,this._partialTextY)},Ut.prototype.className="Text",Ut.prototype._attrsAffectingSize=["text","fontSize","padding","wrap","lineHeight"],a(Ut),w.overWriteSetter(Ut,"width",_()),w.overWriteSetter(Ut,"height",_()),w.addGetterSetter(Ut,"fontFamily","Arial"),w.addGetterSetter(Ut,"fontSize",12,y()),w.addGetterSetter(Ut,"fontStyle","normal"),w.addGetterSetter(Ut,"fontVariant","normal"),w.addGetterSetter(Ut,"padding",0,y()),w.addGetterSetter(Ut,"align","left"),w.addGetterSetter(Ut,"verticalAlign","top"),w.addGetterSetter(Ut,"lineHeight",1,y()),w.addGetterSetter(Ut,"wrap","word"),w.addGetterSetter(Ut,"ellipsis",!1,S()),w.addGetterSetter(Ut,"letterSpacing",0,y()),w.addGetterSetter(Ut,"text","",b()),w.addGetterSetter(Ut,"textDecoration",""),s.mapMethods(Ut);function qt(t){t.fillText(this.partialText,0,0)}function Kt(t){t.strokeText(this.partialText,0,0)}var Vt=function(t){function e(e){var i=t.call(this,e)||this;return i.dummyCanvas=f.createCanvasElement(),i.dataArray=[],i.dataArray=Ot.parsePathData(i.attrs.data),i.on("dataChange.konva",(function(){this.dataArray=Ot.parsePathData(this.attrs.data),this._setTextData()})),i.on("textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva",i._setTextData),e&&e.getKerning&&(f.warn('getKerning TextPath API is deprecated. Please use "kerningFunc" instead.'),i.kerningFunc(e.getKerning)),i._setTextData(),i}return P(e,t),e.prototype._sceneFunc=function(t){t.setAttr("font",this._getContextFont()),t.setAttr("textBaseline",this.textBaseline()),t.setAttr("textAlign","left"),t.save();var e=this.textDecoration(),i=this.fill(),n=this.fontSize(),r=this.glyphInfo;"underline"===e&&t.beginPath();for(var o=0;o=1){var i=e[0].p0;t.moveTo(i.x,i.y)}for(var n=0;n0&&(a+=t.dataArray[s].pathLength);var h=0;"center"===n&&(h=Math.max(0,a/2-o/2)),"right"===n&&(h=Math.max(0,a-o));for(var l,c,d,u=Wt(this.text()),p=this.text().split(" ").length-1,f=-1,g=0,v=function(){g=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{}},y=function(e){var r=t._getTextSize(e).width+i;" "===e&&"justify"===n&&(r+=(a-o)/p);var s=0,h=0;for(c=void 0;Math.abs(r-s)/r>.01&&h<5;){h++;for(var u=s;void 0===d;)(d=v())&&u+d.pathLengthr?c=Ot.getPointOnLine(r,l.x,l.y,d.points[0],d.points[1],l.x,l.y):d=void 0;break;case"A":var y=d.points[4],m=d.points[5],_=d.points[4]+m;0===g?g=y+1e-8:r>s?g+=Math.PI/180*m/Math.abs(m):g-=Math.PI/360*m/Math.abs(m),(m<0&&g<_||m>=0&&g>_)&&(g=_,f=!0),c=Ot.getPointOnEllipticalArc(d.points[0],d.points[1],d.points[2],d.points[3],g,d.points[6]);break;case"C":0===g?g=r>d.pathLength?1e-8:r/d.pathLength:r>s?g+=(r-s)/d.pathLength:(g-=(s-r)/d.pathLength)<0&&(g+=.02),g>1&&(g=1,f=!0),c=Ot.getPointOnCubicBezier(g,d.start.x,d.start.y,d.points[0],d.points[1],d.points[2],d.points[3],d.points[4],d.points[5]);break;case"Q":0===g?g=r/d.pathLength:r>s?g+=(r-s)/d.pathLength:g-=(s-r)/d.pathLength,g>1&&(g=1,f=!0),c=Ot.getPointOnQuadraticBezier(g,d.start.x,d.start.y,d.points[0],d.points[1],d.points[2],d.points[3])}void 0!==c&&(s=Ot.getLineLength(l.x,l.y,c.x,c.y)),f&&(f=!1,d=void 0)}},m=h/(t._getTextSize("C").width+i)-1,_=0;_p.x?-1:1,g=this.findOne(".top-left").y()>p.y?-1:1;e=n*this.cos*f,i=n*this.sin*g,this.findOne(".top-left").x(p.x-e),this.findOne(".top-left").y(p.y-i)}}else if("top-center"===this._movingAnchorName)this.findOne(".top-left").y(o.y());else if("top-right"===this._movingAnchorName){if(d){p=u?{x:this.width()/2,y:this.height()/2}:{x:this.findOne(".bottom-left").x(),y:this.findOne(".bottom-left").y()};n=Math.sqrt(Math.pow(o.x()-p.x,2)+Math.pow(p.y-o.y(),2));f=this.findOne(".top-right").x()p.y?-1:1;e=n*this.cos*f,i=n*this.sin*g,this.findOne(".top-right").x(p.x+e),this.findOne(".top-right").y(p.y-i)}var v=o.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(o.x());else if("middle-right"===this._movingAnchorName)this.findOne(".bottom-right").x(o.x());else if("bottom-left"===this._movingAnchorName){if(d){p=u?{x:this.width()/2,y:this.height()/2}:{x:this.findOne(".top-right").x(),y:this.findOne(".top-right").y()};n=Math.sqrt(Math.pow(p.x-o.x(),2)+Math.pow(o.y()-p.y,2));f=p.x=0){var a=o.point({x:2*-this.padding(),y:0});t.x+=a.x,t.y+=a.y,t.width+=2*this.padding(),this._movingAnchorName=this._movingAnchorName.replace("left","right"),this._anchorDragOffset.x-=a.x,this._anchorDragOffset.y-=a.y}else if(this._movingAnchorName&&t.width<0&&this._movingAnchorName.indexOf("right")>=0){a=o.point({x:2*this.padding(),y:0});this._movingAnchorName=this._movingAnchorName.replace("right","left"),this._anchorDragOffset.x-=a.x,this._anchorDragOffset.y-=a.y,t.width+=2*this.padding()}if(this._movingAnchorName&&t.height<0&&this._movingAnchorName.indexOf("top")>=0){a=o.point({x:0,y:2*-this.padding()});t.x+=a.x,t.y+=a.y,this._movingAnchorName=this._movingAnchorName.replace("top","bottom"),this._anchorDragOffset.x-=a.x,this._anchorDragOffset.y-=a.y,t.height+=2*this.padding()}else if(this._movingAnchorName&&t.height<0&&this._movingAnchorName.indexOf("bottom")>=0){a=o.point({x:0,y:2*this.padding()});this._movingAnchorName=this._movingAnchorName.replace("bottom","top"),this._anchorDragOffset.x-=a.x,this._anchorDragOffset.y-=a.y,t.height+=2*this.padding()}if(this.boundBoxFunc()){var s=this.boundBoxFunc()(n,t);s?t=s:f.warn("boundBoxFunc returned falsy. You should return new bound rect from it!")}var l=new h;l.translate(n.x,n.y),l.rotate(n.rotation),l.scale(n.width/1e7,n.height/1e7);var c=new h;c.translate(t.x,t.y),c.rotate(t.rotation),c.scale(t.width/1e7,t.height/1e7);var d=c.multiply(l.invert());this._nodes.forEach((function(t){var n,r=t.getParent().getAbsoluteTransform(),o=t.getTransform().copy();o.translate(t.offsetX(),t.offsetY());var a=new h;a.multiply(r.copy().invert()).multiply(d).multiply(r).multiply(o);var s=a.decompose();t.setAttrs(s),i._fire("transform",{evt:e,target:t}),t._fire("transform",{evt:e,target:t}),null===(n=t.getLayer())||void 0===n||n.batchDraw()})),this.rotation(f._getRotation(t.rotation)),this._resetTransformCache(),this.update(),this.getLayer().batchDraw()}},e.prototype.forceUpdate=function(){this._resetTransformCache(),this.update()},e.prototype._batchChangeChild=function(t,e){this.findOne(t).setAttrs(e)},e.prototype.update=function(){var t,e=this,i=this._getNodeRect();this.rotation(f._getRotation(i.rotation));var n=i.width,r=i.height,o=this.enabledAnchors(),a=this.resizeEnabled(),s=this.padding(),h=this.anchorSize();this.find("._anchor").each((function(t){t.setAttrs({width:h,height:h,offsetX:h/2,offsetY:h/2,stroke:e.anchorStroke(),strokeWidth:e.anchorStrokeWidth(),fill:e.anchorFill(),cornerRadius:e.anchorCornerRadius()})})),this._batchChangeChild(".top-left",{x:0,y:0,offsetX:h/2+s,offsetY:h/2+s,visible:a&&o.indexOf("top-left")>=0}),this._batchChangeChild(".top-center",{x:n/2,y:0,offsetY:h/2+s,visible:a&&o.indexOf("top-center")>=0}),this._batchChangeChild(".top-right",{x:n,y:0,offsetX:h/2-s,offsetY:h/2+s,visible:a&&o.indexOf("top-right")>=0}),this._batchChangeChild(".middle-left",{x:0,y:r/2,offsetX:h/2+s,visible:a&&o.indexOf("middle-left")>=0}),this._batchChangeChild(".middle-right",{x:n,y:r/2,offsetX:h/2-s,visible:a&&o.indexOf("middle-right")>=0}),this._batchChangeChild(".bottom-left",{x:0,y:r,offsetX:h/2+s,offsetY:h/2-s,visible:a&&o.indexOf("bottom-left")>=0}),this._batchChangeChild(".bottom-center",{x:n/2,y:r,offsetY:h/2-s,visible:a&&o.indexOf("bottom-center")>=0}),this._batchChangeChild(".bottom-right",{x:n,y:r,offsetX:h/2-s,offsetY:h/2-s,visible:a&&o.indexOf("bottom-right")>=0}),this._batchChangeChild(".rotater",{x:n/2,y:-this.rotateAnchorOffset()*f._sign(r)-s,visible:this.rotateEnabled()}),this._batchChangeChild(".back",{width:n,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()},e.prototype.isTransforming=function(){return this._transforming},e.prototype.stopTransform=function(){if(this._transforming){this._removeEvents();var t=this.findOne("."+this._movingAnchorName);t&&t.stopDrag()}},e.prototype.destroy=function(){return this.getStage()&&this._cursorChange&&(this.getStage().content.style.cursor=""),ft.prototype.destroy.call(this),this.detach(),this._removeEvents(),this},e.prototype.toObject=function(){return X.prototype.toObject.call(this)},e}(ft);ne.prototype.className="Transformer",a(ne),w.addGetterSetter(ne,"enabledAnchors",te,(function(t){return t instanceof Array||f.warn("enabledAnchors value should be an array"),t instanceof Array&&t.forEach((function(t){-1===te.indexOf(t)&&f.warn("Unknown anchor name: "+t+". Available names are: "+te.join(", "))})),t||[]})),w.addGetterSetter(ne,"resizeEnabled",!0),w.addGetterSetter(ne,"anchorSize",10,y()),w.addGetterSetter(ne,"rotateEnabled",!0),w.addGetterSetter(ne,"rotationSnaps",[]),w.addGetterSetter(ne,"rotateAnchorOffset",50,y()),w.addGetterSetter(ne,"rotationSnapTolerance",5,y()),w.addGetterSetter(ne,"borderEnabled",!0),w.addGetterSetter(ne,"anchorStroke","rgb(0, 161, 255)"),w.addGetterSetter(ne,"anchorStrokeWidth",1,y()),w.addGetterSetter(ne,"anchorFill","white"),w.addGetterSetter(ne,"anchorCornerRadius",0,y()),w.addGetterSetter(ne,"borderStroke","rgb(0, 161, 255)"),w.addGetterSetter(ne,"borderStrokeWidth",1,y()),w.addGetterSetter(ne,"borderDash"),w.addGetterSetter(ne,"keepRatio",!0),w.addGetterSetter(ne,"centeredScaling",!1),w.addGetterSetter(ne,"ignoreStroke",!1),w.addGetterSetter(ne,"padding",0,y()),w.addGetterSetter(ne,"node"),w.addGetterSetter(ne,"nodes"),w.addGetterSetter(ne,"boundBoxFunc"),w.addGetterSetter(ne,"shouldOverdrawWholeArea",!1),w.backCompat(ne,{lineEnabled:"borderEnabled",rotateHandlerOffset:"rotateAnchorOffset",enabledHandlers:"enabledAnchors"}),s.mapMethods(ne);var re=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return P(e,t),e.prototype._sceneFunc=function(t){t.beginPath(),t.arc(0,0,this.radius(),0,r.getAngle(this.angle()),this.clockwise()),t.lineTo(0,0),t.closePath(),t.fillStrokeShape(this)},e.prototype.getWidth=function(){return 2*this.radius()},e.prototype.getHeight=function(){return 2*this.radius()},e.prototype.setWidth=function(t){this.radius(t/2)},e.prototype.setHeight=function(t){this.radius(t/2)},e}(lt);function oe(){this.r=0,this.g=0,this.b=0,this.a=0,this.next=null}re.prototype.className="Wedge",re.prototype._centroid=!0,re.prototype._attrsAffectingSize=["radius"],a(re),w.addGetterSetter(re,"radius",0,y()),w.addGetterSetter(re,"angle",0,y()),w.addGetterSetter(re,"clockwise",!1),w.backCompat(re,{angleDeg:"angle",getAngleDeg:"getAngle",setAngleDeg:"setAngle"}),s.mapMethods(re);var ae=[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],se=[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];w.addGetterSetter(X,"blurRadius",0,y(),w.afterSetFilter);w.addGetterSetter(X,"brightness",0,y(),w.afterSetFilter);w.addGetterSetter(X,"contrast",0,y(),w.afterSetFilter);function he(t,e,i,n,r){var o=i-e,a=r-n;return 0===o?n+a/2:0===a?n:a*((t-e)/o)+n}w.addGetterSetter(X,"embossStrength",.5,y(),w.afterSetFilter),w.addGetterSetter(X,"embossWhiteLevel",.5,y(),w.afterSetFilter),w.addGetterSetter(X,"embossDirection","top-left",null,w.afterSetFilter),w.addGetterSetter(X,"embossBlend",!1,null,w.afterSetFilter);w.addGetterSetter(X,"enhance",0,y(),w.afterSetFilter);w.addGetterSetter(X,"hue",0,y(),w.afterSetFilter),w.addGetterSetter(X,"saturation",0,y(),w.afterSetFilter),w.addGetterSetter(X,"luminance",0,y(),w.afterSetFilter);w.addGetterSetter(X,"hue",0,y(),w.afterSetFilter),w.addGetterSetter(X,"saturation",0,y(),w.afterSetFilter),w.addGetterSetter(X,"value",0,y(),w.afterSetFilter);function le(t,e,i){var n=4*(i*t.width+e),r=[];return r.push(t.data[n++],t.data[n++],t.data[n++],t.data[n++]),r}function ce(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))}w.addGetterSetter(X,"kaleidoscopePower",2,y(),w.afterSetFilter),w.addGetterSetter(X,"kaleidoscopeAngle",0,y(),w.afterSetFilter);w.addGetterSetter(X,"threshold",0,y(),w.afterSetFilter);w.addGetterSetter(X,"noise",.2,y(),w.afterSetFilter);w.addGetterSetter(X,"pixelSize",8,y(),w.afterSetFilter);w.addGetterSetter(X,"levels",.5,y(),w.afterSetFilter);w.addGetterSetter(X,"red",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),w.addGetterSetter(X,"green",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),w.addGetterSetter(X,"blue",0,v,w.afterSetFilter);w.addGetterSetter(X,"red",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),w.addGetterSetter(X,"green",0,(function(t){return this._filterUpToDate=!1,t>255?255:t<0?0:Math.round(t)})),w.addGetterSetter(X,"blue",0,v,w.afterSetFilter),w.addGetterSetter(X,"alpha",1,(function(t){return this._filterUpToDate=!1,t>1?1:t<0?0:t}));return w.addGetterSetter(X,"threshold",.5,y(),w.afterSetFilter),wt.Util._assign(wt,{Arc:Ct,Arrow:kt,Circle:Tt,Ellipse:At,Image:Mt,Label:Lt,Tag:Et,Line:Pt,Path:Ot,Rect:Dt,RegularPolygon:It,Ring:Bt,Sprite:Nt,Star:zt,Text:Ut,TextPath:Vt,Transformer:ne,Wedge:re,Filters:{Blur:function(t){var e=Math.round(this.blurRadius());e>0&&function(t,e){var i,n,r,o,a,s,h,l,c,d,u,p,f,g,v,y,m,_,b,x,S,w,C,P,k=t.data,T=t.width,A=t.height,M=e+e+1,G=T-1,R=A-1,L=e+1,E=L*(L+1)/2,O=new oe,D=null,I=O,F=null,B=null,N=ae[e],z=se[e];for(r=1;r>z,0!==C?(C=255/C,k[s]=(l*N>>z)*C,k[s+1]=(c*N>>z)*C,k[s+2]=(d*N>>z)*C):k[s]=k[s+1]=k[s+2]=0,l-=p,c-=f,d-=g,u-=v,p-=F.r,f-=F.g,g-=F.b,v-=F.a,o=h+((o=i+e+1)>z,C>0?(C=255/C,k[o]=(l*N>>z)*C,k[o+1]=(c*N>>z)*C,k[o+2]=(d*N>>z)*C):k[o]=k[o+1]=k[o+2]=0,l-=p,c-=f,d-=g,u-=v,p-=F.r,f-=F.g,g-=F.b,v-=F.a,o=i+((o=n+L)255?255:o,a=(a*=255)<0?0:a>255?255:a,s=(s*=255)<0?0:s>255?255:s,n[e]=o,n[e+1]=a,n[e+2]=s},Emboss:function(t){var e=10*this.embossStrength(),i=255*this.embossWhiteLevel(),n=this.embossDirection(),r=this.embossBlend(),o=0,a=0,s=t.data,h=t.width,l=t.height,c=4*h,d=l;switch(n){case"top-left":o=-1,a=-1;break;case"top":o=-1,a=0;break;case"top-right":o=-1,a=1;break;case"right":o=0,a=1;break;case"bottom-right":o=1,a=1;break;case"bottom":o=1,a=0;break;case"bottom-left":o=1,a=-1;break;case"left":o=0,a=-1;break;default:f.error("Unknown emboss direction: "+n)}do{var u=(d-1)*c,p=o;d+p<1&&(p=0),d+p>l&&(p=0);var g=(d-1+p)*h*4,v=h;do{var y=u+4*(v-1),m=a;v+m<1&&(m=0),v+m>h&&(m=0);var _=g+4*(v-1+m),b=s[y]-s[_],x=s[y+1]-s[_+1],S=s[y+2]-s[_+2],w=b,C=w>0?w:-w;if((x>0?x:-x)>C&&(w=x),(S>0?S:-S)>C&&(w=S),w*=e,r){var P=s[y]+w,k=s[y+1]+w,T=s[y+2]+w;s[y]=P>255?255:P<0?0:P,s[y+1]=k>255?255:k<0?0:k,s[y+2]=T>255?255:T<0?0:T}else{var A=i-w;A<0?A=0:A>255&&(A=255),s[y]=s[y+1]=s[y+2]=A}}while(--v)}while(--d)},Enhance:function(t){var e,i,n,r,o=t.data,a=o.length,s=o[0],h=s,l=o[1],c=l,d=o[2],u=d,p=this.enhance();if(0!==p){for(r=0;rh&&(h=e),(i=o[r+1])c&&(c=i),(n=o[r+2])u&&(u=n);var f,g,v,y,m,_,b,x,S;for(h===s&&(h=255,s=0),c===l&&(c=255,l=0),u===d&&(u=255,d=0),p>0?(g=h+p*(255-h),v=s-p*(s-0),m=c+p*(255-c),_=l-p*(l-0),x=u+p*(255-u),S=d-p*(d-0)):(g=h+p*(h-(f=.5*(h+s))),v=s+p*(s-f),m=c+p*(c-(y=.5*(c+l))),_=l+p*(l-y),x=u+p*(u-(b=.5*(u+d))),S=d+p*(d-b)),r=0;ry?a:y;var m,_,b,x,S=c,w=l,C=360/w*Math.PI/180;for(_=0;_c&&(b=_,x=0,S=-1),i=0;i_?h:_;var b,x,S,w=u,C=d,P=i.polarRotation||0;for(r=0;r=0&&p=0&&f=0&&p=0&&f=1020?255:0}return a}(e=function(t,e,i){for(var n=[1,1,1,1,0,1,1,1,1],r=Math.round(Math.sqrt(n.length)),o=Math.floor(r/2),a=[],s=0;s=0&&p=0&&f=y))for(i=c;i=m||(r+=x[(n=4*(y*i+e))+0],o+=x[n+1],a+=x[n+2],s+=x[n+3],g+=1);for(r/=g,o/=g,a/=g,s/=g,e=h;e=y))for(i=c;i=m||(x[(n=4*(y*i+e))+0]=r,x[n+1]=o,x[n+2]=a,x[n+3]=s)}},Posterize:function(t){var e,i=Math.round(254*this.levels())+1,n=t.data,r=n.length,o=255/i;for(e=0;e127&&(h=255-h),l>127&&(l=255-l),c>127&&(c=255-c),e[s]=h,e[s+1]=l,e[s+2]=c}while(--a)}while(--r)},Threshold:function(t){var e,i=255*this.threshold(),n=t.data,r=n.length;for(e=0;e extends Node< height: size.height, }; } - getClientRect(config: ShapegGetClientRectConfig = {}) { + getClientRect(config: ShapeGetClientRectConfig = {}) { const skipTransform = config.skipTransform; const relativeTo = config.relativeTo; @@ -812,6 +813,7 @@ export class Shape extends Node< shadowBlur: GetSet; stroke: GetSet; strokeEnabled: GetSet; + fillAfterStrokeEnabled: GetSet; strokeScaleEnabled: GetSet; strokeHitEnabled: GetSet; strokeWidth: GetSet; @@ -906,6 +908,25 @@ Factory.addGetterSetter(Shape, 'strokeWidth', 2, getNumberValidator()); * shape.strokeWidth(10); */ +Factory.addGetterSetter(Shape, 'fillAfterStrokeEnabled', false); + +/** + * get/set fillAfterStrokeEnabled property. By default Konva is drawing filling first, then stroke on top of the fill. + * In rare situations you may want a different behavior. When you have a stroke first then fill on top of it. + * Especially useful for Text objects. + * Default is false. + * @name Konva.Shape#fillAfterStrokeEnabled + * @method + * @param {Boolean} fillAfterStrokeEnabled + * @returns {Boolean} + * @example + * // get stroke width + * var fillAfterStrokeEnabled = shape.fillAfterStrokeEnabled(); + * + * // set stroke width + * shape.fillAfterStrokeEnabled(true); + */ + Factory.addGetterSetter( Shape, 'hitStrokeWidth', diff --git a/src/shapes/Transformer.ts b/src/shapes/Transformer.ts index 0b533d6a..0b513625 100644 --- a/src/shapes/Transformer.ts +++ b/src/shapes/Transformer.ts @@ -1149,6 +1149,7 @@ export class Transformer extends Group { x: 0, y: 0, }); + this.getLayer()?.batchDraw(); } /** * determine if transformer is in active transform diff --git a/test/unit/Shape-test.js b/test/unit/Shape-test.js index 12047bb1..27497321 100644 --- a/test/unit/Shape-test.js +++ b/test/unit/Shape-test.js @@ -521,6 +521,34 @@ suite('Shape', function () { ); }); + // ====================================================== + test('draw fill after stroke', function () { + var stage = addStage(); + + var layer = new Konva.Layer(); + + var rect = new Konva.Rect({ + x: 100, + y: 50, + width: 100, + height: 50, + fill: 'green', + stroke: 'red', + strokeWidth: 10, + fillAfterStrokeEnabled: true, + }); + + layer.add(rect); + stage.add(layer); + + var trace = layer.getContext().getTrace(); + + assert.equal( + trace, + 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();rect(0,0,100,50);closePath();lineWidth=10;strokeStyle=red;stroke();fillStyle=green;fill();restore();' + ); + }); + // ====================================================== test('test strokeWidth = 0', function () { var stage = addStage(); diff --git a/test/unit/shapes/RegularPolygon-test.js b/test/unit/shapes/RegularPolygon-test.js index a4e41cb0..893100bb 100644 --- a/test/unit/shapes/RegularPolygon-test.js +++ b/test/unit/shapes/RegularPolygon-test.js @@ -158,17 +158,17 @@ suite('RegularPolygon', function () { stage.add(layer); assert.deepEqual(poly.getSelfRect(), { - x: -50, + x: -47.55282581475768, y: -50, - height: 100, - width: 100, + height: 90.45084971874738, + width: 95.10565162951536, }); cloneAndCompareLayer(layer, 254); Konva.pixelRatio = undefined; }); - test.only('triangle - bounding box', function () { + test('triangle - bounding box', function () { var stage = addStage(); var layer = new Konva.Layer();