types fixes

This commit is contained in:
Anton Lavrenov 2019-05-11 07:56:55 -05:00
parent ca417be48e
commit b4902595e0
8 changed files with 124 additions and 142 deletions

View File

@ -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._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
_this._clearCache(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 canDrag = !shouldCheckButton || Konva.dragButtons.indexOf(evt.evt.button) >= 0;
var shouldCheckButton = evt.evt['button'] !== undefined;
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(tr.rotation());
var scale = tr.getNode().getAbsoluteScale();
var rad = Konva.getAngle(_this.rotation());
var scale = _this.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);
};

4
konva.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -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;

View File

@ -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;
_attrsAffectingSize: string[];
_lastPos: Point = null;
_attrsAffectingSize!: string[];
_filterUpToDate = false;
_isUnderCache = false;
children = emptyChildren;
nodeType: string;
className: string;
nodeType!: 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 drawHit(canvas?, top?, caching?, skipBuffer?): void;
abstract drawScene(
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])) {
return this[method]();
if (Util._isFunction((this as any)[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;
}

View File

@ -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) +

View File

@ -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;

View File

@ -348,24 +348,22 @@ export class Transformer extends Group {
});
// add hover styling
anchor.on('mouseenter', function() {
var tr = this.getParent();
anchor.on('mouseenter', () => {
var rad = Konva.getAngle(this.rotation());
var rad = Konva.getAngle(tr.rotation());
var scale = tr.getNode().getAbsoluteScale();
var scale = this.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()) {
anchor.on('mouseout', () => {
if (!anchor.getStage() || !anchor.getParent()) {
return;
}
anchor.getStage().content.style.cursor = '';
this.getParent()._cursorChange = false;
this._cursorChange = false;
});
this.add(anchor);
}

View File

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