ts fixes

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v3.3.0
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Tue May 28 2019
+   * Date: Wed May 29 2019
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -2812,6 +2812,67 @@
           }
           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);

konva.min.js

@@ -3,7 +3,7 @@
    * Konva JavaScript Framework v3.3.0
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Tue May 28 2019
+   * Date: Wed May 29 2019
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)

src/Node.ts

@@ -169,6 +169,19 @@ interface NodeEventMap {
   touchstart: TouchEvent;
 }
 
+export interface KonvaEventObject<EventType extends keyof NodeEventMap> {
+  target: Shape | Stage;
+  evt: NodeEventMap[EventType];
+  currentTarget: Node;
+  cancelBubble: boolean;
+  child?: Node;
+}
+
+export type KonvaEventListener<This, EventType extends keyof NodeEventMap> = (
+  this: This,
+  ev: KonvaEventObject<EventType>
+) => void;
+
 /**
  * Node constructor. Nodes are entities that can be transformed, layered,
  * and have bound events. The stage, layers, groups, and shapes all extend Node.
@@ -668,23 +681,13 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * });
    */
   on<K extends keyof NodeEventMap>(
-    type: K,
+    evtStr: K,
-    listener: (
+    handler: KonvaEventListener<this, K>
-      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);
     }
-    var events = evtStr.split(SPACE),
+    var events = (evtStr as string).split(SPACE),
       len = events.length,
       n,
       event,

src/PointerEvents.ts

@@ -1,11 +1,11 @@
-import { KonvaEventObject } from './types';
+import { KonvaEventObject } from './Node';
 
 import { Shape } from './Shape';
 import { Stage } from './Stage';
 
 const Captures = new Map<number, Shape | Stage>();
 
-export interface KonvaPointerEvent extends KonvaEventObject<PointerEvent> {
+export interface KonvaPointerEvent extends KonvaEventObject<'touchstart'> {
   pointerId: number;
 }
 

src/index-types.d.ts

@@ -42,6 +42,15 @@ declare namespace Konva {
   export type Node = import('./Node').Node;
   export type NodeConfig = import('./Node').NodeConfig;
 
+  export type KonvaEventObject<EventType> = import('./Node').KonvaEventObject<
+    EventType
+  >;
+
+  export type KonvaEventListener<
+    This,
+    EventType
+  > = import('./Node').KonvaEventListener<This, EventType>;
+
   export const Container: typeof import('./Container').Container;
   export type Container = import('./Container').Container<Node>;
   export type ContainerConfig = import('./Container').ContainerConfig;
@@ -133,8 +142,6 @@ declare namespace Konva {
   export type Wedge = import('./shapes/Wedge').Wedge;
   export type WedgeConfig = import('./shapes/Wedge').WedgeConfig;
 
-  export type KonvaEventObject<E> = import('./types').KonvaEventObject<E>;
-
   export const Filters: {
     Blur: typeof Blur;
     Brighten: typeof Brighten;

src/types.ts

@@ -18,15 +18,6 @@ export interface IRect {
   height: number;
 }
 
-export interface KonvaEventObject<E> {
-  target: Shape | Stage;
-  evt: E;
-  currentTarget: Node;
-  cancelBubble: boolean;
-}
-
-export type HandlerFunc<E = Event> = (e: KonvaEventObject<E>) => void;
-
 export enum KonvaNodeEvent {
   mouseover = 'mouseover',
   mouseout = 'mouseout',
@@ -48,7 +39,3 @@ export enum KonvaNodeEvent {
   dragmove = 'dragmove',
   dragend = 'dragend'
 }
-
-type KonvaEvent = KonvaNodeEvent;
-
-type KonvaEventString = KonvaEvent | string;