types fixes

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v3.2.6
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Thu May 09 2019
+   * Date: Sat May 11 2019
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -2483,11 +2483,12 @@
    */
   var Node = /** @class */ (function () {
       function Node(config) {
+          var _this = this;
           this._id = idCounter++;
           this.eventListeners = {};
           this.attrs = {};
           this.index = 0;
-          this.parent = null;
+          this.parent = undefined;
           this._cache = new Map();
           this._lastPos = null;
           this._filterUpToDate = false;
@@ -2496,20 +2497,20 @@
           this.setAttrs(config);
           // event bindings for cache handling
           this.on(TRANSFORM_CHANGE_STR, function () {
-              this._clearCache(TRANSFORM);
+              _this._clearCache(TRANSFORM);
-              this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
+              _this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
           });
           this.on(SCALE_CHANGE_STR, function () {
-              this._clearSelfAndDescendantCache(ABSOLUTE_SCALE);
+              _this._clearSelfAndDescendantCache(ABSOLUTE_SCALE);
           });
           this.on('visibleChange.konva', function () {
-              this._clearSelfAndDescendantCache(VISIBLE);
+              _this._clearSelfAndDescendantCache(VISIBLE);
           });
           this.on('listeningChange.konva', function () {
-              this._clearSelfAndDescendantCache(LISTENING);
+              _this._clearSelfAndDescendantCache(LISTENING);
           });
           this.on('opacityChange.konva', function () {
-              this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
+              _this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
           });
       }
       Node.prototype.hasChildren = function () {
@@ -2804,67 +2805,6 @@
           }
           return sceneCanvas;
       };
-      /**
-       * bind events to the node. KonvaJS supports mouseover, mousemove,
-       *  mouseout, mouseenter, mouseleave, mousedown, mouseup, wheel, contextmenu, click, dblclick, touchstart, touchmove,
-       *  touchend, tap, dbltap, dragstart, dragmove, and dragend events.
-       *  Pass in a string of events delimited by a space to bind multiple events at once
-       *  such as 'mousedown mouseup mousemove'. Include a namespace to bind an
-       *  event by name such as 'click.foobar'.
-       * @method
-       * @name Konva.Node#on
-       * @param {String} evtStr e.g. 'click', 'mousedown touchstart', 'mousedown.foo touchstart.foo'
-       * @param {Function} handler The handler function is passed an event object
-       * @returns {Konva.Node}
-       * @example
-       * // add click listener
-       * node.on('click', function() {
-       *   console.log('you clicked me!');
-       * });
-       *
-       * // get the target node
-       * node.on('click', function(evt) {
-       *   console.log(evt.target);
-       * });
-       *
-       * // stop event propagation
-       * node.on('click', function(evt) {
-       *   evt.cancelBubble = true;
-       * });
-       *
-       * // bind multiple listeners
-       * node.on('click touchstart', function() {
-       *   console.log('you clicked/touched me!');
-       * });
-       *
-       * // namespace listener
-       * node.on('click.foo', function() {
-       *   console.log('you clicked/touched me!');
-       * });
-       *
-       * // get the event type
-       * node.on('click tap', function(evt) {
-       *   var eventType = evt.type;
-       * });
-       *
-       * // get native event object
-       * node.on('click tap', function(evt) {
-       *   var nativeEvent = evt.evt;
-       * });
-       *
-       * // for change events, get the old and new val
-       * node.on('xChange', function(evt) {
-       *   var oldVal = evt.oldVal;
-       *   var newVal = evt.newVal;
-       * });
-       *
-       * // get event targets
-       * // with event delegations
-       * layer.on('click', 'Group', function(evt) {
-       *   var shape = evt.target;
-       *   var group = evt.currentTarget;
-       * });
-       */
       Node.prototype.on = function (evtStr, handler) {
           if (arguments.length === 3) {
               return this._delegate.apply(this, arguments);
@@ -4289,8 +4229,8 @@
       Node.prototype._listenDrag = function () {
           this._dragCleanup();
           this.on('mousedown.konva touchstart.konva', function (evt) {
-              var shouldCheckButton = evt.evt.button !== undefined;
+              var shouldCheckButton = evt.evt['button'] !== undefined;
-              var canDrag = !shouldCheckButton || Konva.dragButtons.indexOf(evt.evt.button) >= 0;
+              var canDrag = !shouldCheckButton || Konva.dragButtons.indexOf(evt.evt['button']) >= 0;
               if (!canDrag) {
                   return;
               }
@@ -10798,7 +10738,7 @@
               _this.pathLength += _this.dataArray[i].pathLength;
           }
           _this.on('dataChange.konva', function () {
-              this.dataArray = Path.parsePathData(this.getData());
+              this.dataArray = Path.parsePathData(this.data());
               this.pathLength = 0;
               for (var i = 0; i < this.dataArray.length; ++i) {
                   this.pathLength += this.dataArray[i].pathLength;
@@ -14060,6 +14000,7 @@
           this._createAnchor('rotater');
       };
       Transformer.prototype._createAnchor = function (name) {
+          var _this = this;
           var anchor = new Rect({
               stroke: 'rgb(0, 161, 255)',
               fill: 'white',
@@ -14083,21 +14024,20 @@
           });
           // add hover styling
           anchor.on('mouseenter', function () {
-              var tr = this.getParent();
+              var rad = Konva.getAngle(_this.rotation());
-              var rad = Konva.getAngle(tr.rotation());
+              var scale = _this.getNode().getAbsoluteScale();
-              var scale = tr.getNode().getAbsoluteScale();
               // If scale.y < 0 xor scale.x < 0 we need to flip (not rotate).
               var isMirrored = scale.y * scale.x < 0;
               var cursor = getCursor(name, rad, isMirrored);
               anchor.getStage().content.style.cursor = cursor;
-              tr._cursorChange = true;
+              _this._cursorChange = true;
           });
           anchor.on('mouseout', function () {
-              if (!anchor.getStage() || !this.getParent()) {
+              if (!anchor.getStage() || !anchor.getParent()) {
                   return;
               }
               anchor.getStage().content.style.cursor = '';
-              this.getParent()._cursorChange = false;
+              _this._cursorChange = false;
           });
           this.add(anchor);
       };

src/Context.ts

@@ -312,7 +312,7 @@ export class Context {
   createRadialGradient(a0, a1, a2, a3, a4, a5) {
     return this._context.createRadialGradient(a0, a1, a2, a3, a4, a5);
   }
-  drawImage(a0, a1, a2, a3, a4, a5, a6, a7, a8) {
+  drawImage(a0, a1, a2, a3?, a4?, a5?, a6?, a7?, a8?) {
     var a = arguments,
       _context = this._context;
 

src/Node.ts

@@ -1,15 +1,18 @@
-import { Util, Collection, Transform, RectConf } from './Util';
+import { Util, Collection, Transform, RectConf, Point } from './Util';
 import { Factory } from './Factory';
-import { SceneCanvas, HitCanvas } from './Canvas';
+import { SceneCanvas, HitCanvas, Canvas } from './Canvas';
 import { Konva, _NODES_REGISTRY } from './Global';
 import { Container } from './Container';
-import { GetSet, Vector2d } from './types';
+import { GetSet, Vector2d, IRect } from './types';
 import { DD } from './DragAndDrop';
 import {
   getNumberValidator,
   getStringValidator,
   getBooleanValidator
 } from './Validators';
+import { Context } from './Context';
+import { Shape } from './Shape';
+import { Stage } from './Stage';
 
 export const ids: any = {};
 export const names: any = {};
@@ -33,7 +36,7 @@ export const _removeId = function(id: string, node: any) {
   delete ids[id];
 };
 
-export const _addName = function(node: any, name) {
+export const _addName = function(node: any, name: string) {
   if (name) {
     if (!names[name]) {
       names[name] = [];
@@ -42,7 +45,7 @@ export const _addName = function(node: any, name) {
   }
 };
 
-export const _removeName = function(name, _id) {
+export const _removeName = function(name: string, _id: number) {
   if (!name) {
     return;
   }
@@ -154,9 +157,17 @@ var ABSOLUTE_OPACITY = 'absoluteOpacity',
   ].join(SPACE),
   SCALE_CHANGE_STR = ['scaleXChange.konva', 'scaleYChange.konva'].join(SPACE);
 
-const emptyChildren = new Collection<Node>();
+const emptyChildren: Collection<Node> = new Collection();
 
 let idCounter = 1;
+
+// create all the events here
+interface NodeEventMap {
+  [index: string]: any;
+  click: MouseEvent;
+  touchstart: TouchEvent;
+}
+
 /**
  * Node constructor. Nodes are entities that can be transformed, layered,
  * and have bound events. The stage, layers, groups, and shapes all extend Node.
@@ -167,40 +178,42 @@ let idCounter = 1;
  */
 export abstract class Node<Config extends NodeConfig = NodeConfig> {
   _id = idCounter++;
-  eventListeners = {};
+  eventListeners: {
+    [index: string]: Array<{ name: string; handler: Function }>;
+  } = {};
   attrs: any = {};
   index = 0;
-  parent: Container<Node> | null = null;
+  parent: Container<Node> | undefined = undefined;
   _cache: Map<string, any> = new Map<string, any>();
-  _lastPos = null;
+  _lastPos: Point = null;
-  _attrsAffectingSize: string[];
+  _attrsAffectingSize!: string[];
 
   _filterUpToDate = false;
   _isUnderCache = false;
   children = emptyChildren;
-  nodeType: string;
+  nodeType!: string;
-  className: string;
+  className!: string;
 
   constructor(config?: Config) {
     this.setAttrs(config);
 
     // event bindings for cache handling
-    this.on(TRANSFORM_CHANGE_STR, function() {
+    this.on(TRANSFORM_CHANGE_STR, () => {
       this._clearCache(TRANSFORM);
       this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
     });
 
-    this.on(SCALE_CHANGE_STR, function() {
+    this.on(SCALE_CHANGE_STR, () => {
       this._clearSelfAndDescendantCache(ABSOLUTE_SCALE);
     });
 
-    this.on('visibleChange.konva', function() {
+    this.on('visibleChange.konva', () => {
       this._clearSelfAndDescendantCache(VISIBLE);
     });
-    this.on('listeningChange.konva', function() {
+    this.on('listeningChange.konva', () => {
       this._clearSelfAndDescendantCache(LISTENING);
     });
-    this.on('opacityChange.konva', function() {
+    this.on('opacityChange.konva', () => {
       this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
     });
   }
@@ -214,14 +227,14 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
   }
 
   /** @lends Konva.Node.prototype */
-  _clearCache(attr) {
+  _clearCache(attr?: string) {
     if (attr) {
       this._cache.delete(attr);
     } else {
       this._cache.clear();
     }
   }
-  _getCache(attr, privateGetter) {
+  _getCache(attr: string, privateGetter: Function) {
     var cache = this._cache.get(attr);
 
     // if not cached, we need to set it using the private getter method.
@@ -239,7 +252,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * when the logic for a cached result depends on ancestor propagation, use this
    * method to clear self and children cache
    */
-  _clearSelfAndDescendantCache(attr?) {
+  _clearSelfAndDescendantCache(attr?: string) {
     this._clearCache(attr);
 
     // skip clearing if node is cached with canvas
@@ -307,7 +320,15 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    *   drawBorder: true
    * });
    */
-  cache(config) {
+  cache(config?: {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    drawBorder?: boolean;
+    offset?: number;
+    pixelRatio?: number;
+  }) {
     var conf = config || {};
     var rect = {} as RectConf;
 
@@ -410,8 +431,18 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     return this;
   }
 
-  abstract drawScene(canvas?, top?, caching?, skipBuffer?): void;
+  abstract drawScene(
-  abstract drawHit(canvas?, top?, caching?, skipBuffer?): void;
+    canvas?: Canvas,
+    top?: Node,
+    caching?: boolean,
+    skipBuffer?: boolean
+  ): void;
+  abstract drawHit(
+    canvas?: Canvas,
+    top?: Node,
+    caching?: boolean,
+    skipBuffer?: boolean
+  ): void;
   /**
    * Return client rectangle {x, y, width, height} of node. This rectangle also include all styling (strokes, shadows, etc).
    * The rectangle position is relative to parent container.
@@ -459,7 +490,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     // redefine in Container and Shape
     throw new Error('abstract "getClientRect" method call');
   }
-  _transformedRect(rect, top) {
+  _transformedRect(rect: IRect, top: Node) {
     var points = [
       { x: rect.x, y: rect.y },
       { x: rect.x + rect.width, y: rect.y },
@@ -486,7 +517,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       height: maxY - minY
     };
   }
-  _drawCachedSceneCanvas(context) {
+  _drawCachedSceneCanvas(context: Context) {
     context.save();
     context._applyOpacity(this);
     context._applyGlobalCompositeOperation(this);
@@ -506,7 +537,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     );
     context.restore();
   }
-  _drawCachedHitCanvas(context) {
+  _drawCachedHitCanvas(context: Context) {
     var canvasCache = this._getCanvasCache(),
       hitCanvas = canvasCache.hit;
     context.save();
@@ -635,7 +666,20 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    *   var group = evt.currentTarget;
    * });
    */
-  on(evtStr, handler) {
+  on<K extends keyof NodeEventMap>(
+    type: K,
+    listener: (
+      this: this,
+      ev: {
+        target: Shape | Stage;
+        evt: NodeEventMap[K];
+        currentTarget: Node;
+        cancelBubble: boolean;
+        child?: Node;
+      }
+    ) => any
+  ): void;
+  on(evtStr: string, handler: (evt: any) => void) {
     if (arguments.length === 3) {
       return this._delegate.apply(this, arguments);
     }
@@ -692,7 +736,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * // remove listener by name
    * node.off('click.foo');
    */
-  off(evtStr, callback?) {
+  off(evtStr: string, callback?: Function) {
     var events = (evtStr || '').split(SPACE),
       len = events.length,
       n,
@@ -727,7 +771,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     return this;
   }
   // some event aliases for third party integration like HammerJS
-  dispatchEvent(evt) {
+  dispatchEvent(evt: any) {
     var e = {
       target: this,
       type: evt.type,
@@ -736,19 +780,19 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     this.fire(evt.type, e);
     return this;
   }
-  addEventListener(type, handler) {
+  addEventListener(type: string, handler: (e: Event) => void) {
     // we have to pass native event to handler
     this.on(type, function(evt) {
       handler.call(this, evt.evt);
     });
     return this;
   }
-  removeEventListener(type) {
+  removeEventListener(type: string) {
     this.off(type);
     return this;
   }
   // like node.on
-  _delegate(event, selector, handler) {
+  _delegate(event: string, selector: string, handler: (e: Event) => void) {
     var stopNode = this;
     this.on(event, function(evt) {
       var targets = evt.target.findAncestors(selector, true, stopNode);
@@ -821,10 +865,10 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * @example
    * var x = node.getAttr('x');
    */
-  getAttr(attr) {
+  getAttr(attr: string) {
     var method = 'get' + Util._capitalize(attr);
-    if (Util._isFunction(this[method])) {
+    if (Util._isFunction((this as any)[method])) {
-      return this[method]();
+      return (this as any)[method]();
     }
     // otherwise get directly
     return this.attrs[attr];
@@ -871,7 +915,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    *   fill: 'red'
    * });
    */
-  setAttrs(config) {
+  setAttrs(config: any) {
     var key, method;
 
     if (!config) {
@@ -2220,9 +2264,9 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     this._dragCleanup();
 
     this.on('mousedown.konva touchstart.konva', function(evt) {
-      var shouldCheckButton = evt.evt.button !== undefined;
+      var shouldCheckButton = evt.evt['button'] !== undefined;
       var canDrag =
-        !shouldCheckButton || Konva.dragButtons.indexOf(evt.evt.button) >= 0;
+        !shouldCheckButton || Konva.dragButtons.indexOf(evt.evt['button']) >= 0;
       if (!canDrag) {
         return;
       }

src/Validators.ts

@@ -1,7 +1,7 @@
 import { Konva } from './Global';
 import { Util } from './Util';
 
-function _formatValue(val) {
+function _formatValue(val: any) {
   if (Util._isString(val)) {
     return '"' + val + '"';
   }
@@ -14,7 +14,7 @@ function _formatValue(val) {
   return Object.prototype.toString.call(val);
 }
 
-export function RGBComponent(val) {
+export function RGBComponent(val: number) {
   if (val > 255) {
     return 255;
   } else if (val < 0) {
@@ -22,7 +22,7 @@ export function RGBComponent(val) {
   }
   return Math.round(val);
 }
-export function alphaComponent(val) {
+export function alphaComponent(val: number) {
   if (val > 1) {
     return 1;
   } else if (val < 0.0001) {
@@ -35,7 +35,7 @@ export function alphaComponent(val) {
 
 export function getNumberValidator() {
   if (Konva.isUnminified) {
-    return function(val, attr) {
+    return function(val: any, attr: string) {
       if (!Util._isNumber(val)) {
         Util.warn(
           _formatValue(val) +
@@ -50,7 +50,7 @@ export function getNumberValidator() {
 }
 export function getNumberOrAutoValidator() {
   if (Konva.isUnminified) {
-    return function(val, attr) {
+    return function(val: any, attr: string) {
       var isNumber = Util._isNumber(val);
       var isAuto = val === 'auto';
 
@@ -68,7 +68,7 @@ export function getNumberOrAutoValidator() {
 }
 export function getStringValidator() {
   if (Konva.isUnminified) {
-    return function(val, attr) {
+    return function(val: any, attr: string) {
       if (!Util._isString(val)) {
         Util.warn(
           _formatValue(val) +
@@ -83,7 +83,7 @@ export function getStringValidator() {
 }
 export function getFunctionValidator() {
   if (Konva.isUnminified) {
-    return function(val, attr) {
+    return function(val: any, attr: string) {
       if (!Util._isFunction(val)) {
         Util.warn(
           _formatValue(val) +
@@ -98,7 +98,7 @@ export function getFunctionValidator() {
 }
 export function getNumberArrayValidator() {
   if (Konva.isUnminified) {
-    return function(val, attr) {
+    return function(val: any, attr: string) {
       if (!Util._isArray(val)) {
         Util.warn(
           _formatValue(val) +
@@ -107,7 +107,7 @@ export function getNumberArrayValidator() {
             '" attribute. The value should be a array of numbers.'
         );
       } else {
-        val.forEach(function(item) {
+        val.forEach(function(item: any) {
           if (!Util._isNumber(item)) {
             Util.warn(
               '"' +
@@ -125,7 +125,7 @@ export function getNumberArrayValidator() {
 }
 export function getBooleanValidator() {
   if (Konva.isUnminified) {
-    return function(val, attr) {
+    return function(val: any, attr: string) {
       var isBool = val === true || val === false;
       if (!isBool) {
         Util.warn(
@@ -139,9 +139,9 @@ export function getBooleanValidator() {
     };
   }
 }
-export function getComponentValidator(components) {
+export function getComponentValidator(components: any) {
   if (Konva.isUnminified) {
-    return function(val, attr) {
+    return function(val: any, attr: string) {
       if (!Util.isObject(val)) {
         Util.warn(
           _formatValue(val) +

src/shapes/Path.ts

@@ -40,7 +40,7 @@ export class Path extends Shape<PathConfig> {
       this.pathLength += this.dataArray[i].pathLength;
     }
     this.on('dataChange.konva', function() {
-      this.dataArray = Path.parsePathData(this.getData());
+      this.dataArray = Path.parsePathData(this.data());
       this.pathLength = 0;
       for (var i = 0; i < this.dataArray.length; ++i) {
         this.pathLength += this.dataArray[i].pathLength;

src/shapes/Transformer.ts

@@ -348,24 +348,22 @@ export class Transformer extends Group {
     });
 
     // add hover styling
-    anchor.on('mouseenter', function() {
+    anchor.on('mouseenter', () => {
-      var tr = this.getParent();
+      var rad = Konva.getAngle(this.rotation());
 
-      var rad = Konva.getAngle(tr.rotation());
+      var scale = this.getNode().getAbsoluteScale();
-
-      var scale = tr.getNode().getAbsoluteScale();
       // If scale.y < 0 xor scale.x < 0 we need to flip (not rotate).
       var isMirrored = scale.y * scale.x < 0;
       var cursor = getCursor(name, rad, isMirrored);
       anchor.getStage().content.style.cursor = cursor;
-      tr._cursorChange = true;
+      this._cursorChange = true;
     });
-    anchor.on('mouseout', function() {
+    anchor.on('mouseout', () => {
-      if (!anchor.getStage() || !this.getParent()) {
+      if (!anchor.getStage() || !anchor.getParent()) {
         return;
       }
       anchor.getStage().content.style.cursor = '';
-      this.getParent()._cursorChange = false;
+      this._cursorChange = false;
     });
     this.add(anchor);
   }

tsconfig.json

@@ -6,7 +6,7 @@
     "noEmitOnError": true,
     "lib": ["es2015", "dom"]
     // "noImplicitAny": true
-    // "strict": true,
+    // "strict": true
     // "strictFunctionTypes": true
   },
   "include": ["./src/*.ts"]