fix: 🐛 fix types, improve type support for TypeScript

src/Context.ts

@@ -153,7 +153,7 @@ export class Context {
     }
   }
 
-  _stroke(shape) {
+  _stroke(shape: Shape) {
     // abstract
   }
 
@@ -173,7 +173,7 @@ export class Context {
     }
   }
 
-  getTrace(relaxed?, rounded?) {
+  getTrace(relaxed?: boolean, rounded?: boolean) {
     var traceArr = this.traceArr,
       len = traceArr.length,
       str = '',
@@ -279,13 +279,13 @@ export class Context {
       );
     }
   }
-  _applyLineCap(shape) {
+  _applyLineCap(shape: Shape) {
-    var lineCap = shape.getLineCap();
+    const lineCap = shape.attrs.lineCap;
     if (lineCap) {
       this.setAttr('lineCap', lineCap);
     }
   }
-  _applyOpacity(shape) {
+  _applyOpacity(shape: Shape) {
     var absOpacity = shape.getAbsoluteOpacity();
     if (absOpacity !== 1) {
       this.setAttr('globalAlpha', absOpacity);
@@ -663,7 +663,7 @@ export class Context {
    * @method
    * @name Konva.Context#strokeText
    */
-  strokeText(a0: string, a1: number, a2: number, a3: number) {
+  strokeText(a0: string, a1: number, a2: number, a3?: number) {
     this._context.strokeText(a0, a1, a2, a3);
   }
   /**
@@ -775,11 +775,11 @@ export class SceneContext extends Context {
     this.setAttr('fillStyle', fill);
     shape._fillFunc(this);
   }
-  _fillPattern(shape) {
+  _fillPattern(shape: Shape) {
     this.setAttr('fillStyle', shape._getFillPattern());
     shape._fillFunc(this);
   }
-  _fillLinearGradient(shape) {
+  _fillLinearGradient(shape: Shape) {
     var grd = shape._getLinearGradient();
 
     if (grd) {
@@ -787,16 +787,16 @@ export class SceneContext extends Context {
       shape._fillFunc(this);
     }
   }
-  _fillRadialGradient(shape) {
+  _fillRadialGradient(shape: Shape) {
-    var grd = shape._getRadialGradient();
+    const grd = shape._getRadialGradient();
     if (grd) {
       this.setAttr('fillStyle', grd);
       shape._fillFunc(this);
     }
   }
-  _fill(shape) {
+  _fill(shape: Shape) {
-    var hasColor = shape.fill(),
+    const hasColor = shape.fill(),
-      fillPriority = shape.getFillPriority();
+      fillPriority = shape.fillPriority();
 
     // priority fills
     if (hasColor && fillPriority === 'color') {
@@ -804,19 +804,19 @@ export class SceneContext extends Context {
       return;
     }
 
-    var hasPattern = shape.getFillPatternImage();
+    const hasPattern = shape.fillPatternImage();
     if (hasPattern && fillPriority === 'pattern') {
       this._fillPattern(shape);
       return;
     }
 
-    var hasLinearGradient = shape.getFillLinearGradientColorStops();
+    const hasLinearGradient = shape.fillLinearGradientColorStops();
     if (hasLinearGradient && fillPriority === 'linear-gradient') {
       this._fillLinearGradient(shape);
       return;
     }
 
-    var hasRadialGradient = shape.getFillRadialGradientColorStops();
+    const hasRadialGradient = shape.fillRadialGradientColorStops();
     if (hasRadialGradient && fillPriority === 'radial-gradient') {
       this._fillRadialGradient(shape);
       return;
@@ -833,29 +833,30 @@ export class SceneContext extends Context {
       this._fillRadialGradient(shape);
     }
   }
-  _strokeLinearGradient(shape) {
+  _strokeLinearGradient(shape: Shape) {
-    var start = shape.getStrokeLinearGradientStartPoint(),
+    const start = shape.strokeLinearGradientStartPoint(),
-      end = shape.getStrokeLinearGradientEndPoint(),
+      end = shape.strokeLinearGradientEndPoint(),
-      colorStops = shape.getStrokeLinearGradientColorStops(),
+      colorStops = shape.strokeLinearGradientColorStops(),
       grd = this.createLinearGradient(start.x, start.y, end.x, end.y);
 
     if (colorStops) {
       // build color stops
       for (var n = 0; n < colorStops.length; n += 2) {
-        grd.addColorStop(colorStops[n], colorStops[n + 1]);
+        grd.addColorStop(colorStops[n] as number, colorStops[n + 1] as string);
       }
       this.setAttr('strokeStyle', grd);
     }
   }
-  _stroke(shape) {
+  _stroke(shape: Shape) {
     var dash = shape.dash(),
       // ignore strokeScaleEnabled for Text
-      strokeScaleEnabled = shape.getStrokeScaleEnabled();
+      strokeScaleEnabled = shape.strokeScaleEnabled();
 
     if (shape.hasStroke()) {
       if (!strokeScaleEnabled) {
         this.save();
         var pixelRatio = this.getCanvas().getPixelRatio();
+        console.log(pixelRatio);
         this.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
       }
 
@@ -867,11 +868,11 @@ export class SceneContext extends Context {
 
       this.setAttr('lineWidth', shape.strokeWidth());
 
-      if (!shape.getShadowForStrokeEnabled()) {
+      if (!shape.shadowForStrokeEnabled()) {
         this.setAttr('shadowColor', 'rgba(0,0,0,0)');
       }
 
-      var hasLinearGradient = shape.getStrokeLinearGradientColorStops();
+      var hasLinearGradient = shape.strokeLinearGradientColorStops();
       if (hasLinearGradient) {
         this._strokeLinearGradient(shape);
       } else {
@@ -885,10 +886,10 @@ export class SceneContext extends Context {
       }
     }
   }
-  _applyShadow(shape) {
+  _applyShadow(shape: Shape) {
     var color = shape.getShadowRGBA() ?? 'black',
-      blur = shape.getShadowBlur() ?? 5,
+      blur = shape.shadowBlur() ?? 5,
-      offset = shape.getShadowOffset() ?? {
+      offset = shape.shadowOffset() ?? {
         x: 0,
         y: 0,
       },
@@ -925,10 +926,10 @@ export class HitContext extends Context {
       this._stroke(shape);
     }
   }
-  _stroke(shape) {
+  _stroke(shape: Shape) {
     if (shape.hasHitStroke()) {
       // ignore strokeScaleEnabled for Text
-      var strokeScaleEnabled = shape.getStrokeScaleEnabled();
+      const strokeScaleEnabled = shape.strokeScaleEnabled();
       if (!strokeScaleEnabled) {
         this.save();
         var pixelRatio = this.getCanvas().getPixelRatio();

src/Shape.ts

@@ -820,6 +820,8 @@ export class Shape<
   strokeHitEnabled: GetSet<boolean, this>;
   strokeWidth: GetSet<number, this>;
   hitStrokeWidth: GetSet<number | 'auto', this>;
+  strokeLinearGradientStartPoint: GetSet<Vector2d, this>;
+  strokeLinearGradientEndPoint: GetSet<Vector2d, this>;
   strokeLinearGradientColorStops: GetSet<Array<number | string>, this>;
 }
 

src/shapes/Arc.ts

@@ -4,7 +4,7 @@ import { Konva } from '../Global';
 import { GetSet } from '../types';
 import { getNumberValidator, getBooleanValidator } from '../Validators';
 import { _registerNode } from '../Global';
-import { Transform, Util } from '../Util';
+import { Context } from '../Context';
 
 export interface ArcConfig extends ShapeConfig {
   angle: number;
@@ -38,7 +38,7 @@ export interface ArcConfig extends ShapeConfig {
  * });
  */
 export class Arc extends Shape<ArcConfig> {
-  _sceneFunc(context) {
+  _sceneFunc(context: Context) {
     var angle = Konva.getAngle(this.angle()),
       clockwise = this.clockwise();
 
@@ -54,10 +54,10 @@ export class Arc extends Shape<ArcConfig> {
   getHeight() {
     return this.outerRadius() * 2;
   }
-  setWidth(width) {
+  setWidth(width: number) {
     this.outerRadius(width / 2);
   }
-  setHeight(height) {
+  setHeight(height: number) {
     this.outerRadius(height / 2);
   }
 

src/shapes/Arrow.ts

@@ -4,6 +4,7 @@ import { GetSet } from '../types';
 import { getNumberValidator } from '../Validators';
 import { _registerNode } from '../Global';
 import { Path } from './Path';
+import { Context } from '../Context';
 
 export interface ArrowConfig extends LineConfig {
   points: number[];
@@ -40,7 +41,7 @@ export interface ArrowConfig extends LineConfig {
  * });
  */
 export class Arrow extends Line<ArrowConfig> {
-  _sceneFunc(ctx) {
+  _sceneFunc(ctx: Context) {
     super._sceneFunc(ctx);
     var PI2 = Math.PI * 2;
     var points = this.points();
@@ -126,7 +127,7 @@ export class Arrow extends Line<ArrowConfig> {
     }
   }
 
-  __fillStroke(ctx) {
+  __fillStroke(ctx: Context) {
     // here is a tricky part
     // we need to disable dash for arrow pointers
     var isDashEnabled = this.dashEnabled();

src/shapes/Circle.ts

@@ -3,6 +3,7 @@ import { Shape, ShapeConfig } from '../Shape';
 import { GetSet } from '../types';
 import { getNumberValidator } from '../Validators';
 import { _registerNode } from '../Global';
+import { Context } from '../Context';
 
 export interface CircleConfig extends ShapeConfig {
   radius?: number;
@@ -27,7 +28,7 @@ export interface CircleConfig extends ShapeConfig {
  * });
  */
 export class Circle extends Shape<CircleConfig> {
-  _sceneFunc(context) {
+  _sceneFunc(context: Context) {
     context.beginPath();
     context.arc(0, 0, this.attrs.radius || 0, 0, Math.PI * 2, false);
     context.closePath();
@@ -39,12 +40,12 @@ export class Circle extends Shape<CircleConfig> {
   getHeight() {
     return this.radius() * 2;
   }
-  setWidth(width) {
+  setWidth(width: number) {
     if (this.radius() !== width / 2) {
       this.radius(width / 2);
     }
   }
-  setHeight(height) {
+  setHeight(height: number) {
     if (this.radius() !== height / 2) {
       this.radius(height / 2);
     }

src/shapes/Ellipse.ts

@@ -2,6 +2,7 @@ import { Factory } from '../Factory';
 import { Shape, ShapeConfig } from '../Shape';
 import { getNumberValidator } from '../Validators';
 import { _registerNode } from '../Global';
+import { Context } from '../Context';
 
 import { GetSet, Vector2d } from '../types';
 
@@ -29,7 +30,7 @@ export interface EllipseConfig extends ShapeConfig {
  * });
  */
 export class Ellipse extends Shape<EllipseConfig> {
-  _sceneFunc(context) {
+  _sceneFunc(context: Context) {
     var rx = this.radiusX(),
       ry = this.radiusY();
 
@@ -49,10 +50,10 @@ export class Ellipse extends Shape<EllipseConfig> {
   getHeight() {
     return this.radiusY() * 2;
   }
-  setWidth(width) {
+  setWidth(width: number) {
     this.radiusX(width / 2);
   }
-  setHeight(height) {
+  setHeight(height: number) {
     this.radiusY(height / 2);
   }
 

src/shapes/Image.ts

@@ -111,7 +111,7 @@ export class Image extends Shape<ImageConfig> {
     }
     // If you need to draw later, you need to execute save/restore
   }
-  _hitFunc(context) {
+  _hitFunc(context: Context) {
     var width = this.width(),
       height = this.height(),
       cornerRadius = this.cornerRadius();
@@ -146,7 +146,7 @@ export class Image extends Shape<ImageConfig> {
    *    layer.draw();
    *  });
    */
-  static fromURL(url, callback, onError = null) {
+  static fromURL(url: string, callback: (img: Image) => void, onError: OnErrorEventHandler = null) {
     var img = Util.createImageElement();
     img.onload = function () {
       var image = new Image({

src/shapes/Label.ts

@@ -1,6 +1,7 @@
 import { Factory } from '../Factory';
 import { Shape, ShapeConfig } from '../Shape';
 import { Group } from '../Group';
+import { Context } from '../Context';
 import { ContainerConfig } from '../Container';
 import {
   getNumberOrArrayOfNumbersValidator,
@@ -75,7 +76,7 @@ var ATTR_CHANGE_LIST = [
  *  }));
  */
 export class Label extends Group {
-  constructor(config?) {
+  constructor(config?: LabelConfig) {
     super(config);
     this.on('add.konva', function (evt) {
       this._addListeners(evt.child);
@@ -198,7 +199,7 @@ export interface TagConfig extends ShapeConfig {
  * @param {Number} [config.cornerRadius]
  */
 export class Tag extends Shape<TagConfig> {
-  _sceneFunc(context) {
+  _sceneFunc(context: Context) {
     var width = this.width(),
       height = this.height(),
       pointerDirection = this.pointerDirection(),

src/shapes/RegularPolygon.ts

@@ -3,6 +3,7 @@ import { Shape, ShapeConfig } from '../Shape';
 import { GetSet } from '../types';
 import { getNumberValidator } from '../Validators';
 import { _registerNode } from '../Global';
+import { Context } from '../Context';
 
 export interface RegularPolygonConfig extends ShapeConfig {
   sides: number;
@@ -30,7 +31,7 @@ export interface RegularPolygonConfig extends ShapeConfig {
  * });
  */
 export class RegularPolygon extends Shape<RegularPolygonConfig> {
-  _sceneFunc(context) {
+  _sceneFunc(context: Context) {
     const points = this._getPoints();
 
     context.beginPath();
@@ -81,10 +82,10 @@ export class RegularPolygon extends Shape<RegularPolygonConfig> {
   getHeight() {
     return this.radius() * 2;
   }
-  setWidth(width) {
+  setWidth(width: number) {
     this.radius(width / 2);
   }
-  setHeight(height) {
+  setHeight(height: number) {
     this.radius(height / 2);
   }
 

src/shapes/Ring.ts

@@ -3,6 +3,7 @@ import { Shape, ShapeConfig } from '../Shape';
 import { GetSet } from '../types';
 import { getNumberValidator } from '../Validators';
 import { _registerNode } from '../Global';
+import { Context } from '../Context';
 
 export interface RingConfig extends ShapeConfig {
   innerRadius: number;
@@ -30,7 +31,7 @@ var PIx2 = Math.PI * 2;
  * });
  */
 export class Ring extends Shape<RingConfig> {
-  _sceneFunc(context) {
+  _sceneFunc(context: Context) {
     context.beginPath();
     context.arc(0, 0, this.innerRadius(), 0, PIx2, false);
     context.moveTo(this.outerRadius(), 0);
@@ -44,10 +45,10 @@ export class Ring extends Shape<RingConfig> {
   getHeight() {
     return this.outerRadius() * 2;
   }
-  setWidth(width) {
+  setWidth(width: number) {
     this.outerRadius(width / 2);
   }
-  setHeight(height) {
+  setHeight(height: number) {
     this.outerRadius(height / 2);
   }
 

src/shapes/Sprite.ts

@@ -1,4 +1,5 @@
 import { Factory } from '../Factory';
+import { Context } from '../Context';
 import { Shape, ShapeConfig } from '../Shape';
 import { Animation } from '../Animation';
 import { getNumberValidator } from '../Validators';
@@ -65,7 +66,7 @@ export class Sprite extends Shape<SpriteConfig> {
   _updated = true;
   anim: Animation;
   interval: any;
-  constructor(config) {
+  constructor(config: SpriteConfig) {
     super(config);
     this.anim = new Animation(() => {
       // if we don't need to redraw layer we should return false
@@ -90,7 +91,7 @@ export class Sprite extends Shape<SpriteConfig> {
     });
   }
 
-  _sceneFunc(context) {
+  _sceneFunc(context: Context) {
     var anim = this.animation(),
       index = this.frameIndex(),
       ix4 = index * 4,
@@ -129,7 +130,7 @@ export class Sprite extends Shape<SpriteConfig> {
       }
     }
   }
-  _hitFunc(context) {
+  _hitFunc(context: Context) {
     var anim = this.animation(),
       index = this.frameIndex(),
       ix4 = index * 4,

src/shapes/Star.ts

@@ -1,4 +1,5 @@
 import { Factory } from '../Factory';
+import { Context } from '../Context';
 import { Shape, ShapeConfig } from '../Shape';
 import { getNumberValidator } from '../Validators';
 import { _registerNode } from '../Global';
@@ -35,7 +36,7 @@ export interface StarConfig extends ShapeConfig {
  * });
  */
 export class Star extends Shape<StarConfig> {
-  _sceneFunc(context) {
+  _sceneFunc(context: Context) {
     var innerRadius = this.innerRadius(),
       outerRadius = this.outerRadius(),
       numPoints = this.numPoints();
@@ -59,10 +60,10 @@ export class Star extends Shape<StarConfig> {
   getHeight() {
     return this.outerRadius() * 2;
   }
-  setWidth(width) {
+  setWidth(width: number) {
     this.outerRadius(width / 2);
   }
-  setHeight(height) {
+  setHeight(height: number) {
     this.outerRadius(height / 2);
   }
 

src/shapes/Text.ts

@@ -1,4 +1,5 @@
 import { Util } from '../Util';
+import { Context } from '../Context';
 import { Factory } from '../Factory';
 import { Shape, ShapeConfig } from '../Shape';
 import { Konva } from '../Global';
@@ -92,23 +93,23 @@ function normalizeFontFamily(fontFamily: string) {
     .join(', ');
 }
 
-var dummyContext;
+var dummyContext: CanvasRenderingContext2D;
 function getDummyContext() {
   if (dummyContext) {
     return dummyContext;
   }
-  dummyContext = Util.createCanvasElement().getContext(CONTEXT_2D);
+  dummyContext = Util.createCanvasElement().getContext(CONTEXT_2D) as CanvasRenderingContext2D;
   return dummyContext;
 }
 
-function _fillFunc(context) {
+function _fillFunc(context: Context) {
   context.fillText(this._partialText, this._partialTextX, this._partialTextY);
 }
-function _strokeFunc(context) {
+function _strokeFunc(context: Context) {
   context.strokeText(this._partialText, this._partialTextX, this._partialTextY);
 }
 
-function checkDefaultFill(config) {
+function checkDefaultFill(config: TextConfig) {
   config = config || {};
 
   // set default color to black
@@ -169,7 +170,7 @@ export class Text extends Shape<TextConfig> {
     this._setTextData();
   }
 
-  _sceneFunc(context) {
+  _sceneFunc(context: Context) {
     var textArr = this.textArr,
       textArrLen = textArr.length;
 
@@ -311,7 +312,7 @@ export class Text extends Shape<TextConfig> {
       }
     }
   }
-  _hitFunc(context) {
+  _hitFunc(context: Context) {
     var width = this.getWidth(),
       height = this.getHeight();
 
@@ -320,7 +321,7 @@ export class Text extends Shape<TextConfig> {
     context.closePath();
     context.fillStrokeShape(this);
   }
-  setText(text) {
+  setText(text: string) {
     var str = Util._isString(text)
       ? text
       : text === null || text === undefined
@@ -390,7 +391,7 @@ export class Text extends Shape<TextConfig> {
       normalizeFontFamily(this.fontFamily())
     );
   }
-  _addTextLine(line) {
+  _addTextLine(line: string) {
     const align = this.align();
     if (align === JUSTIFY) {
       line = line.trim();
@@ -402,7 +403,7 @@ export class Text extends Shape<TextConfig> {
       lastInParagraph: false,
     });
   }
-  _getTextWidth(text) {
+  _getTextWidth(text: string) {
     var letterSpacing = this.letterSpacing();
     var length = text.length;
     return (

src/shapes/TextPath.ts

@@ -1,5 +1,6 @@
 import { Util } from '../Util';
 import { Factory } from '../Factory';
+import { Context } from '../Context';
 import { Shape, ShapeConfig } from '../Shape';
 import { Path } from './Path';
 import { Text, stringToArray } from './Text';
@@ -105,7 +106,7 @@ export class TextPath extends Shape<TextPathConfig> {
     this._setTextData();
   }
 
-  _sceneFunc(context) {
+  _sceneFunc(context: Context) {
     context.setAttr('font', this._getContextFont());
     context.setAttr('textBaseline', this.textBaseline());
     context.setAttr('textAlign', 'left');
@@ -155,7 +156,7 @@ export class TextPath extends Shape<TextPathConfig> {
 
     context.restore();
   }
-  _hitFunc(context) {
+  _hitFunc(context: Context) {
     context.beginPath();
 
     var glyphInfo = this.glyphInfo;
@@ -185,7 +186,7 @@ export class TextPath extends Shape<TextPathConfig> {
     );
     return this.textHeight;
   }
-  setText(text) {
+  setText(text: string) {
     return Text.prototype.setText.call(this, text);
   }
 
@@ -193,7 +194,7 @@ export class TextPath extends Shape<TextPathConfig> {
     return Text.prototype._getContextFont.call(this);
   }
 
-  _getTextSize(text) {
+  _getTextSize(text: string) {
     var dummyCanvas = this.dummyCanvas;
     var _context = dummyCanvas.getContext('2d');
 

src/shapes/Transformer.ts

@@ -266,11 +266,11 @@ export class Transformer extends Group {
    * @example
    * transformer.attachTo(shape);
    */
-  attachTo(node) {
+  attachTo(node: Node) {
     this.setNode(node);
     return this;
   }
-  setNode(node) {
+  setNode(node: Node) {
     Util.warn(
       'tr.setNode(shape), tr.node(shape) and tr.attachTo(shape) methods are deprecated. Please use tr.nodes(nodesArray) instead.'
     );

src/shapes/Wedge.ts

@@ -1,4 +1,5 @@
 import { Factory } from '../Factory';
+import { Context } from '../Context';
 import { Shape, ShapeConfig } from '../Shape';
 import { Konva } from '../Global';
 import { getNumberValidator } from '../Validators';
@@ -35,7 +36,7 @@ export interface WedgeConfig extends ShapeConfig {
  * });
  */
 export class Wedge extends Shape<WedgeConfig> {
-  _sceneFunc(context) {
+  _sceneFunc(context: Context) {
     context.beginPath();
     context.arc(
       0,
@@ -55,10 +56,10 @@ export class Wedge extends Shape<WedgeConfig> {
   getHeight() {
     return this.radius() * 2;
   }
-  setWidth(width) {
+  setWidth(width: number) {
     this.radius(width / 2);
   }
-  setHeight(height) {
+  setHeight(height: number) {
     this.radius(height / 2);
   }