diff --git a/konva.js b/konva.js index ae7caf4f..42299fa7 100644 --- a/konva.js +++ b/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); diff --git a/konva.min.js b/konva.min.js index 4e6bf7a6..a60123af 100644 --- a/konva.min.js +++ b/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) diff --git a/src/Node.ts b/src/Node.ts index ef650b69..eab6c734 100644 --- a/src/Node.ts +++ b/src/Node.ts @@ -169,6 +169,19 @@ interface NodeEventMap { touchstart: TouchEvent; } +export interface KonvaEventObject { + target: Shape | Stage; + evt: NodeEventMap[EventType]; + currentTarget: Node; + cancelBubble: boolean; + child?: Node; +} + +export type KonvaEventListener = ( + this: This, + ev: KonvaEventObject +) => 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 { * }); */ on( - 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) { + evtStr: K, + handler: KonvaEventListener + ) { 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, diff --git a/src/PointerEvents.ts b/src/PointerEvents.ts index f1fa50d6..931cf496 100644 --- a/src/PointerEvents.ts +++ b/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(); -export interface KonvaPointerEvent extends KonvaEventObject { +export interface KonvaPointerEvent extends KonvaEventObject<'touchstart'> { pointerId: number; } diff --git a/src/index-types.d.ts b/src/index-types.d.ts index 16b22c1a..2efb1edc 100644 --- a/src/index-types.d.ts +++ b/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 = import('./Node').KonvaEventObject< + EventType + >; + + export type KonvaEventListener< + This, + EventType + > = import('./Node').KonvaEventListener; + export const Container: typeof import('./Container').Container; export type Container = import('./Container').Container; 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 = import('./types').KonvaEventObject; - export const Filters: { Blur: typeof Blur; Brighten: typeof Brighten; diff --git a/src/types.ts b/src/types.ts index 75966015..2e816338 100644 --- a/src/types.ts +++ b/src/types.ts @@ -18,15 +18,6 @@ export interface IRect { height: number; } -export interface KonvaEventObject { - target: Shape | Stage; - evt: E; - currentTarget: Node; - cancelBubble: boolean; -} - -export type HandlerFunc = (e: KonvaEventObject) => 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;