lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 05:10:26 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

more strict typescript

Browse Source
This commit is contained in:
Anton Lavrenov 2023-08-28 09:23:57 -05:00
parent cd2e17338a
commit d33b8e944b
21 changed files with 345 additions and 747 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/Animation.ts
View File

@ -61,11 +61,11 @@ export class Animation {
* @param {Konva.Layer|Array} [layers] layer(s) to be redrawn. Can be a layer, an array of layers, or null. Not specifying a node will result in no redraw. * @param {Konva.Layer|Array} [layers] layer(s) to be redrawn. Can be a layer, an array of layers, or null. Not specifying a node will result in no redraw.
* @return {Konva.Animation} this * @return {Konva.Animation} this
*/ */
setLayers(layers:null | Layer | Layer[]) { setLayers(layers: null | Layer | Layer[]) {
let lays: Layer[] = []; let lays: Layer[] = [];
// if passing in no layers // if passing in no layers
if (layers) { if (layers) {
lays = Array.isArray(layers)? layers : [layers] lays = Array.isArray(layers) ? layers : [layers];
} }
this.layers = lays; this.layers = lays;
return this; return this;
@ -87,8 +87,8 @@ export class Animation {
* @return {Bool} true if layer is added to animation, otherwise false * @return {Bool} true if layer is added to animation, otherwise false
*/ */
addLayer(layer: Layer) { addLayer(layer: Layer) {
const layers = this.layers const layers = this.layers;
const len = layers.length const len = layers.length;
// don't add the layer if it already exists // don't add the layer if it already exists
for (let n = 0; n < len; n++) { for (let n = 0; n < len; n++) {
@ -107,9 +107,9 @@ export class Animation {
* @return {Bool} is animation running? * @return {Bool} is animation running?
*/ */
isRunning() { isRunning() {
const a = Animation const a = Animation;
const animations = a.animations const animations = a.animations;
const len = animations.length const len = animations.length;
for (let n = 0; n < len; n++) { for (let n = 0; n < len; n++) {
if (animations[n].id === this.id) { if (animations[n].id === this.id) {
@ -148,7 +148,7 @@ export class Animation {
this.frame.frameRate = 1000 / this.frame.timeDiff; this.frame.frameRate = 1000 / this.frame.timeDiff;
} }
static animations = []; static animations: Array<Animation> = [];
static animIdCounter = 0; static animIdCounter = 0;
static animRunning = false; static animRunning = false;
@ -157,9 +157,9 @@ export class Animation {
this._handleAnimation(); this._handleAnimation();
} }
static _removeAnimation(anim) { static _removeAnimation(anim) {
const id = anim.id const id = anim.id;
const animations = this.animations const animations = this.animations;
const len = animations.length const len = animations.length;
for (let n = 0; n < len; n++) { for (let n = 0; n < len; n++) {
if (animations[n].id === id) { if (animations[n].id === id) {
@ -170,8 +170,8 @@ export class Animation {
} }
static _runFrames() { static _runFrames() {
const layerHash = {} const layerHash = {};
const animations = this.animations const animations = this.animations;
/* /*
* loop through all animations and execute animation * loop through all animations and execute animation
* function. if the animation object has specified node, * function. if the animation object has specified node,
@ -193,7 +193,7 @@ export class Animation {
const layersLen = layers.length; const layersLen = layers.length;
// if animation object has a function, execute it // if animation object has a function, execute it
let needRedraw let needRedraw;
if (func) { if (func) {
// allow anim bypassing drawing // allow anim bypassing drawing
needRedraw = func.call(anim, anim.frame) !== false; needRedraw = func.call(anim, anim.frame) !== false;

19
src/Container.ts
View File

@ -197,7 +197,7 @@ export abstract class Container<
* return node.getType() === 'Node' && node.getAbsoluteOpacity() < 1; * return node.getType() === 'Node' && node.getAbsoluteOpacity() < 1;
* }); * });
*/ */
find<ChildNode extends Node = Node>(selector): Array<ChildNode> { find<ChildNode extends Node>(selector): Array<ChildNode> {
// protecting _generalFind to prevent user from accidentally adding // protecting _generalFind to prevent user from accidentally adding
// second argument and getting unexpected `findOne` result // second argument and getting unexpected `findOne` result
return this._generalFind<ChildNode>(selector, false); return this._generalFind<ChildNode>(selector, false);
@ -317,7 +317,7 @@ export abstract class Container<
getAllIntersections(pos) { getAllIntersections(pos) {
var arr: Shape[] = []; var arr: Shape[] = [];
this.find('Shape').forEach(function (shape: Shape) { this.find<Shape>('Shape').forEach((shape) => {
if (shape.isVisible() && shape.intersects(pos)) { if (shape.isVisible() && shape.intersects(pos)) {
arr.push(shape); arr.push(shape);
} }
@ -437,13 +437,14 @@ export abstract class Container<
} }
} }
getClientRect(config?: { getClientRect(
skipTransform?: boolean; config: {
skipShadow?: boolean; skipTransform?: boolean;
skipStroke?: boolean; skipShadow?: boolean;
relativeTo?: Container<Node>; skipStroke?: boolean;
}): IRect { relativeTo?: Container<Node>;
config = config || {}; } = {}
): IRect {
var skipTransform = config.skipTransform; var skipTransform = config.skipTransform;
var relativeTo = config.relativeTo; var relativeTo = config.relativeTo;

16
src/Context.ts
View File

@ -6,7 +6,7 @@ import { IRect } from './types';
import type { Node } from './Node'; import type { Node } from './Node';
function simplifyArray(arr: Array<any>) { function simplifyArray(arr: Array<any>) {
var retArr = [], var retArr: Array<any> = [],
len = arr.length, len = arr.length,
util = Util, util = Util,
n, n,
@ -441,9 +441,19 @@ export class Context {
if (a.length === 3) { if (a.length === 3) {
_context.drawImage(a0, a1, a2); _context.drawImage(a0, a1, a2);
} else if (a.length === 5) { } else if (a.length === 5) {
_context.drawImage(a0, a1, a2, a3, a4); _context.drawImage(a0, a1, a2, a3 as number, a4 as number);
} else if (a.length === 9) { } else if (a.length === 9) {
_context.drawImage(a0, a1, a2, a3, a4, a5, a6, a7, a8); _context.drawImage(
a0,
a1,
a2,
a3 as number,
a4 as number,
a5 as number,
a6 as number,
a7 as number,
a8 as number
);
} }
} }
/** /**

7
src/DragAndDrop.ts
View File

@ -1,3 +1,4 @@
import { Container } from './Container';
import { Konva } from './Global'; import { Konva } from './Global';
import { Node } from './Node'; import { Node } from './Node';
import { Vector2d } from './types'; import { Vector2d } from './types';
@ -44,7 +45,7 @@ export const DD = {
DD._dragElements.forEach((elem, key) => { DD._dragElements.forEach((elem, key) => {
const { node } = elem; const { node } = elem;
// we need to find pointer relative to that node // we need to find pointer relative to that node
const stage = node.getStage(); const stage = node.getStage()!;
stage.setPointersPositions(evt); stage.setPointersPositions(evt);
// it is possible that user call startDrag without any event // it is possible that user call startDrag without any event
@ -95,11 +96,11 @@ export const DD = {
// dragBefore and dragAfter allows us to set correct order of events // dragBefore and dragAfter allows us to set correct order of events
// setup all in dragbefore, and stop dragging only after pointerup triggered. // setup all in dragbefore, and stop dragging only after pointerup triggered.
_endDragBefore(evt?) { _endDragBefore(evt?) {
const drawNodes = []; const drawNodes: Array<Container> = [];
DD._dragElements.forEach((elem) => { DD._dragElements.forEach((elem) => {
const { node } = elem; const { node } = elem;
// we need to find pointer relative to that node // we need to find pointer relative to that node
const stage = node.getStage(); const stage = node.getStage()!;
if (evt) { if (evt) {
stage.setPointersPositions(evt); stage.setPointersPositions(evt);
} }

58
src/Node.ts
View File

@ -322,7 +322,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
) { ) {
rect = this.getClientRect({ rect = this.getClientRect({
skipTransform: true, skipTransform: true,
relativeTo: this.getParent(), relativeTo: this.getParent() || undefined,
}); });
} }
var width = Math.ceil(conf.width || rect.width), var width = Math.ceil(conf.width || rect.width),
@ -492,14 +492,17 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
// redefine in Container and Shape // redefine in Container and Shape
throw new Error('abstract "getClientRect" method call'); throw new Error('abstract "getClientRect" method call');
} }
_transformedRect(rect: IRect, top: Node) { _transformedRect(rect: IRect, top?: Node | null) {
var points = [ var points = [
{ x: rect.x, y: rect.y }, { x: rect.x, y: rect.y },
{ x: rect.x + rect.width, y: rect.y }, { x: rect.x + rect.width, y: rect.y },
{ x: rect.x + rect.width, y: rect.y + rect.height }, { x: rect.x + rect.width, y: rect.y + rect.height },
{ x: rect.x, y: rect.y + rect.height }, { x: rect.x, y: rect.y + rect.height },
]; ];
var minX: number, minY: number, maxX: number, maxY: number; var minX: number = Infinity,
minY: number = Infinity,
maxX: number = -Infinity,
maxY: number = -Infinity;
var trans = this.getAbsoluteTransform(top); var trans = this.getAbsoluteTransform(top);
points.forEach(function (point) { points.forEach(function (point) {
var transformed = trans.point(point); var transformed = trans.point(point);
@ -1084,8 +1087,9 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
addChildren(nodes); addChildren(nodes);
} }
} }
if (that.nodeType !== UPPER_STAGE) { const stage = this.getStage();
addChildren(that.getStage().getChildren()); if (that.nodeType !== UPPER_STAGE && stage) {
addChildren(stage.getChildren());
} }
return index; return index;
@ -1150,11 +1154,12 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* rect.getRelativePointerPosition(); * rect.getRelativePointerPosition();
*/ */
getRelativePointerPosition() { getRelativePointerPosition() {
if (!this.getStage()) { const stage = this.getStage();
if (!stage) {
return null; return null;
} }
// get pointer (say mouse or touch) position // get pointer (say mouse or touch) position
var pos = this.getStage().getPointerPosition(); var pos = stage.getPointerPosition();
if (!pos) { if (!pos) {
return null; return null;
} }
@ -1205,13 +1210,11 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
return absoluteTransform.getTranslation(); return absoluteTransform.getTranslation();
} }
setAbsolutePosition(pos: Vector2d) { setAbsolutePosition(pos: Vector2d) {
var origTrans = this._clearTransform(); const { x, y, ...origTrans } = this._clearTransform();
// don't clear translation // don't clear translation
this.attrs.x = origTrans.x; this.attrs.x = x;
this.attrs.y = origTrans.y; this.attrs.y = y;
delete origTrans.x;
delete origTrans.y;
// important, use non cached value // important, use non cached value
this._clearCache(TRANSFORM); this._clearCache(TRANSFORM);
@ -1298,7 +1301,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
return this; return this;
} }
_eachAncestorReverse(func, top) { _eachAncestorReverse(func, top) {
var family = [], var family: Array<Node> = [],
parent = this.getParent(), parent = this.getParent(),
len, len,
n; n;
@ -1541,7 +1544,11 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* // get one of the parent group * // get one of the parent group
* var parentGroups = node.findAncestors('Group'); * var parentGroups = node.findAncestors('Group');
*/ */
findAncestors(selector: string, includeSelf?: boolean, stopNode?: Node) { findAncestors(
selector: string | Function,
includeSelf?: boolean,
stopNode?: Node
) {
var res: Array<Node> = []; var res: Array<Node> = [];
if (includeSelf && this._isMatch(selector)) { if (includeSelf && this._isMatch(selector)) {
@ -1574,7 +1581,11 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* // get one of the parent group * // get one of the parent group
* var group = node.findAncestors('.mygroup'); * var group = node.findAncestors('.mygroup');
*/ */
findAncestor(selector?: string, includeSelf?: boolean, stopNode?: Container) { findAncestor(
selector: string | Function,
includeSelf?: boolean,
stopNode?: Container
) {
return this.findAncestors(selector, includeSelf, stopNode)[0]; return this.findAncestors(selector, includeSelf, stopNode)[0];
} }
// is current node match passed selector? // is current node match passed selector?
@ -1639,12 +1650,12 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
return this._getCache(STAGE, this._getStage); return this._getCache(STAGE, this._getStage);
} }
_getStage(): Stage | undefined { _getStage() {
var parent = this.getParent(); var parent = this.getParent();
if (parent) { if (parent) {
return parent.getStage(); return parent.getStage();
} else { } else {
return undefined; return null;
} }
} }
/** /**
@ -1689,7 +1700,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* @name Konva.Node#getAbsoluteTransform * @name Konva.Node#getAbsoluteTransform
* @returns {Konva.Transform} * @returns {Konva.Transform}
*/ */
getAbsoluteTransform(top?: Node) { getAbsoluteTransform(top?: Node | null) {
// if using an argument, we can't cache the result. // if using an argument, we can't cache the result.
if (top) { if (top) {
return this._getAbsoluteTransform(top); return this._getAbsoluteTransform(top);
@ -1756,7 +1767,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
// do not cache this calculations, // do not cache this calculations,
// because it use cache transform // because it use cache transform
// this is special logic for caching with some shapes with shadow // this is special logic for caching with some shapes with shadow
var parent: Node = this; var parent: Node | null = this;
while (parent) { while (parent) {
if (parent._isUnderCache) { if (parent._isUnderCache) {
top = parent; top = parent;
@ -2071,7 +2082,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
pixelRatio?: number; pixelRatio?: number;
mimeType?: string; mimeType?: string;
quality?: number; quality?: number;
callback?: (blob: Blob) => void; callback?: (blob: Blob | null) => void;
}) { }) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { try {
@ -2373,6 +2384,9 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
var pointerId = evt ? evt.pointerId : undefined; var pointerId = evt ? evt.pointerId : undefined;
var stage = this.getStage(); var stage = this.getStage();
var ap = this.getAbsolutePosition(); var ap = this.getAbsolutePosition();
if (!stage) {
return;
}
var pos = var pos =
stage._getPointerById(pointerId) || stage._getPointerById(pointerId) ||
stage._changedPointerPositions[0] || stage._changedPointerPositions[0] ||
@ -2399,7 +2413,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
this._createDragElement(evt); this._createDragElement(evt);
} }
const elem = DD._dragElements.get(this._id); const elem = DD._dragElements.get(this._id)!;
elem.dragStatus = 'dragging'; elem.dragStatus = 'dragging';
this.fire( this.fire(
'dragstart', 'dragstart',
@ -2415,7 +2429,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
_setDragPosition(evt, elem) { _setDragPosition(evt, elem) {
// const pointers = this.getStage().getPointersPositions(); // const pointers = this.getStage().getPointersPositions();
// const pos = pointers.find(p => p.id === this._dragEventId); // const pos = pointers.find(p => p.id === this._dragEventId);
const pos = this.getStage()._getPointerById(elem.pointerId); const pos = this.getStage()!._getPointerById(elem.pointerId);
if (!pos) { if (!pos) {
return; return;

26
src/Shape.ts
View File

@ -105,7 +105,7 @@ function getDummyContext(): CanvasRenderingContext2D {
if (dummyContext) { if (dummyContext) {
return dummyContext; return dummyContext;
} }
dummyContext = Util.createCanvasElement().getContext('2d'); dummyContext = Util.createCanvasElement().getContext('2d')!;
return dummyContext; return dummyContext;
} }
@ -210,11 +210,11 @@ export class Shape<
getContext() { getContext() {
Util.warn('shape.getContext() method is deprecated. Please do not use it.'); Util.warn('shape.getContext() method is deprecated. Please do not use it.');
return this.getLayer().getContext(); return this.getLayer()!.getContext();
} }
getCanvas() { getCanvas() {
Util.warn('shape.getCanvas() method is deprecated. Please do not use it.'); Util.warn('shape.getCanvas() method is deprecated. Please do not use it.');
return this.getLayer().getCanvas(); return this.getLayer()!.getCanvas();
} }
getSceneFunc() { getSceneFunc() {
@ -438,13 +438,15 @@ export class Shape<
* @returns {Boolean} * @returns {Boolean}
*/ */
intersects(point) { intersects(point) {
var stage = this.getStage(), var stage = this.getStage();
bufferHitCanvas = stage.bufferHitCanvas, if (!stage) {
p; return false;
}
const bufferHitCanvas = stage.bufferHitCanvas;
bufferHitCanvas.getContext().clear(); bufferHitCanvas.getContext().clear();
this.drawHit(bufferHitCanvas, null, true); this.drawHit(bufferHitCanvas, undefined, true);
p = bufferHitCanvas.context.getImageData( const p = bufferHitCanvas.context.getImageData(
Math.round(point.x), Math.round(point.x),
Math.round(point.y), Math.round(point.y),
1, 1,
@ -456,7 +458,7 @@ export class Shape<
destroy() { destroy() {
Node.prototype.destroy.call(this); Node.prototype.destroy.call(this);
delete shapes[this.colorKey]; delete shapes[this.colorKey];
delete this.colorKey; delete (this as any).colorKey;
return this; return this;
} }
// why do we need buffer canvas? // why do we need buffer canvas?
@ -577,8 +579,8 @@ export class Shape<
// 2 - when we are caching current // 2 - when we are caching current
// 3 - when node is cached and we need to draw it into layer // 3 - when node is cached and we need to draw it into layer
var layer = this.getLayer(), var layer = this.getLayer();
canvas = can || layer.getCanvas(), var canvas = can || layer!.getCanvas(),
context = canvas.getContext() as SceneContext, context = canvas.getContext() as SceneContext,
cachedCanvas = this._getCanvasCache(), cachedCanvas = this._getCanvasCache(),
drawFunc = this.getSceneFunc(), drawFunc = this.getSceneFunc(),
@ -663,7 +665,7 @@ export class Shape<
} }
var layer = this.getLayer(), var layer = this.getLayer(),
canvas = can || layer.hitCanvas, canvas = can || layer!.hitCanvas,
context = canvas && canvas.getContext(), context = canvas && canvas.getContext(),
drawFunc = this.hitFunc() || this.sceneFunc(), drawFunc = this.hitFunc() || this.sceneFunc(),
cachedCanvas = this._getCanvasCache(), cachedCanvas = this._getCanvasCache(),

45
src/Stage.ts
View File

@ -279,7 +279,7 @@ export class Stage extends Container<Layer> {
stages.splice(index, 1); stages.splice(index, 1);
} }
Util.releaseCanvas(this.bufferCanvas._canvas, this.bufferHitCanvas._canvas) Util.releaseCanvas(this.bufferCanvas._canvas, this.bufferHitCanvas._canvas);
return this; return this;
} }
@ -468,23 +468,27 @@ export class Stage extends Container<Layer> {
); );
}); });
} }
_pointerenter(evt) { _pointerenter(evt: PointerEvent) {
this.setPointersPositions(evt); this.setPointersPositions(evt);
const events = getEventsMap(evt.type); const events = getEventsMap(evt.type);
this._fire(events.pointerenter, { if (events) {
evt: evt, this._fire(events.pointerenter, {
target: this, evt: evt,
currentTarget: this, target: this,
}); currentTarget: this,
});
}
} }
_pointerover(evt) { _pointerover(evt) {
this.setPointersPositions(evt); this.setPointersPositions(evt);
const events = getEventsMap(evt.type); const events = getEventsMap(evt.type);
this._fire(events.pointerover, { if (events) {
evt: evt, this._fire(events.pointerover, {
target: this, evt: evt,
currentTarget: this, target: this,
}); currentTarget: this,
});
}
} }
_getTargetShape(evenType) { _getTargetShape(evenType) {
let shape: Shape | null = this[evenType + 'targetShape']; let shape: Shape | null = this[evenType + 'targetShape'];
@ -525,7 +529,7 @@ export class Stage extends Container<Layer> {
currentTarget: this, currentTarget: this,
}); });
} }
this.pointerPos = undefined; this.pointerPos = null;
this._pointerPositions = []; this._pointerPositions = [];
} }
_pointerdown(evt: TouchEvent | MouseEvent | PointerEvent) { _pointerdown(evt: TouchEvent | MouseEvent | PointerEvent) {
@ -545,8 +549,7 @@ export class Stage extends Container<Layer> {
Konva['_' + eventType + 'ListenClick'] = true; Konva['_' + eventType + 'ListenClick'] = true;
// no shape detected? do nothing // no shape detected? do nothing
const hasShape = shape && shape.isListening(); if (!shape || !shape.isListening()) {
if (!hasShape) {
return; return;
} }
@ -587,7 +590,7 @@ export class Stage extends Container<Layer> {
if (!events) { if (!events) {
return; return;
} }
if (DD.isDragging && DD.node.preventDefault() && evt.cancelable) { if (DD.isDragging && DD.node!.preventDefault() && evt.cancelable) {
evt.preventDefault(); evt.preventDefault();
} }
this.setPointersPositions(evt); this.setPointersPositions(evt);
@ -753,7 +756,7 @@ export class Stage extends Container<Layer> {
} }
_contextmenu(evt) { _contextmenu(evt) {
this.setPointersPositions(evt); this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition()); var shape = this.getIntersection(this.getPointerPosition()!);
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
shape._fireAndBubble(CONTEXTMENU, { evt: evt }); shape._fireAndBubble(CONTEXTMENU, { evt: evt });
@ -768,7 +771,7 @@ export class Stage extends Container<Layer> {
_wheel(evt) { _wheel(evt) {
this.setPointersPositions(evt); this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition()); var shape = this.getIntersection(this.getPointerPosition()!);
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
shape._fireAndBubble(WHEEL, { evt: evt }); shape._fireAndBubble(WHEEL, { evt: evt });
@ -785,7 +788,7 @@ export class Stage extends Container<Layer> {
this.setPointersPositions(evt); this.setPointersPositions(evt);
const shape = const shape =
PointerEvents.getCapturedShape(evt.pointerId) || PointerEvents.getCapturedShape(evt.pointerId) ||
this.getIntersection(this.getPointerPosition()); this.getIntersection(this.getPointerPosition()!);
if (shape) { if (shape) {
shape._fireAndBubble(POINTERUP, PointerEvents.createEvent(evt)); shape._fireAndBubble(POINTERUP, PointerEvents.createEvent(evt));
@ -814,8 +817,8 @@ export class Stage extends Container<Layer> {
*/ */
setPointersPositions(evt) { setPointersPositions(evt) {
var contentPosition = this._getContentPosition(), var contentPosition = this._getContentPosition(),
x = null, x: number | null = null,
y = null; y: number | null = null;
evt = evt ? evt : window.event; evt = evt ? evt : window.event;
// touch events // touch events

8
src/Tween.ts
View File

@ -190,9 +190,9 @@ export class Tween {
anim: Animation; anim: Animation;
tween: TweenEngine; tween: TweenEngine;
_id: number; _id: number;
onFinish: Function; onFinish: Function | undefined;
onReset: Function; onReset: Function | undefined;
onUpdate: Function; onUpdate: Function | undefined;
constructor(config: TweenConfig) { constructor(config: TweenConfig) {
var that = this, var that = this,
@ -314,7 +314,7 @@ export class Tween {
if (n % 2 === 0) { if (n % 2 === 0) {
diff.push(end[n] - start[n]); diff.push(end[n] - start[n]);
} else { } else {
var startRGBA = Util.colorToRGBA(start[n]); var startRGBA = Util.colorToRGBA(start[n])!;
endRGBA = Util.colorToRGBA(end[n]); endRGBA = Util.colorToRGBA(end[n]);
start[n] = startRGBA; start[n] = startRGBA;
diff.push({ diff.push({

51
src/Util.ts
View File

@ -605,7 +605,7 @@ export const Util = {
}, },
// convert any color string to RGBA object // convert any color string to RGBA object
// from https://github.com/component/color-parser // from https://github.com/component/color-parser
colorToRGBA(str: string): RGBA { colorToRGBA(str: string) {
str = str || 'black'; str = str || 'black';
return ( return (
Util._namedColorToRBA(str) || Util._namedColorToRBA(str) ||
@ -632,9 +632,9 @@ export const Util = {
}; };
}, },
// Parse rgb(n, n, n) // Parse rgb(n, n, n)
_rgbColorToRGBA(str: string): RGBA { _rgbColorToRGBA(str: string) {
if (str.indexOf('rgb(') === 0) { if (str.indexOf('rgb(') === 0) {
str = str.match(/rgb\(([^)]+)\)/)[1]; str = str.match(/rgb\(([^)]+)\)/)![1];
var parts = str.split(/ *, */).map(Number); var parts = str.split(/ *, */).map(Number);
return { return {
r: parts[0], r: parts[0],
@ -645,9 +645,9 @@ export const Util = {
} }
}, },
// Parse rgba(n, n, n, n) // Parse rgba(n, n, n, n)
_rgbaColorToRGBA(str: string): RGBA { _rgbaColorToRGBA(str: string) {
if (str.indexOf('rgba(') === 0) { if (str.indexOf('rgba(') === 0) {
str = str.match(/rgba\(([^)]+)\)/)[1]; str = str.match(/rgba\(([^)]+)\)/)![1]!;
var parts = str.split(/ *, */).map((n, index) => { var parts = str.split(/ *, */).map((n, index) => {
if (n.slice(-1) === '%') { if (n.slice(-1) === '%') {
return index === 3 ? parseInt(n) / 100 : (parseInt(n) / 100) * 255; return index === 3 ? parseInt(n) / 100 : (parseInt(n) / 100) * 255;
@ -663,7 +663,7 @@ export const Util = {
} }
}, },
// Parse #nnnnnnnn // Parse #nnnnnnnn
_hex8ColorToRGBA(str: string): RGBA { _hex8ColorToRGBA(str: string) {
if (str[0] === '#' && str.length === 9) { if (str[0] === '#' && str.length === 9) {
return { return {
r: parseInt(str.slice(1, 3), 16), r: parseInt(str.slice(1, 3), 16),
@ -674,7 +674,7 @@ export const Util = {
} }
}, },
// Parse #nnnnnn // Parse #nnnnnn
_hex6ColorToRGBA(str: string): RGBA { _hex6ColorToRGBA(str: string) {
if (str[0] === '#' && str.length === 7) { if (str[0] === '#' && str.length === 7) {
return { return {
r: parseInt(str.slice(1, 3), 16), r: parseInt(str.slice(1, 3), 16),
@ -685,7 +685,7 @@ export const Util = {
} }
}, },
// Parse #nnnn // Parse #nnnn
_hex4ColorToRGBA(str: string): RGBA { _hex4ColorToRGBA(str: string) {
if (str[0] === '#' && str.length === 5) { if (str[0] === '#' && str.length === 5) {
return { return {
r: parseInt(str[1] + str[1], 16), r: parseInt(str[1] + str[1], 16),
@ -696,7 +696,7 @@ export const Util = {
} }
}, },
// Parse #nnn // Parse #nnn
_hex3ColorToRGBA(str: string): RGBA { _hex3ColorToRGBA(str: string) {
if (str[0] === '#' && str.length === 4) { if (str[0] === '#' && str.length === 4) {
return { return {
r: parseInt(str[1] + str[1], 16), r: parseInt(str[1] + str[1], 16),
@ -707,11 +707,11 @@ export const Util = {
} }
}, },
// Code adapted from https://github.com/Qix-/color-convert/blob/master/conversions.js#L244 // Code adapted from https://github.com/Qix-/color-convert/blob/master/conversions.js#L244
_hslColorToRGBA(str: string): RGBA { _hslColorToRGBA(str: string) {
// Check hsl() format // Check hsl() format
if (/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.test(str)) { if (/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.test(str)) {
// Extract h, s, l // Extract h, s, l
const [_, ...hsl] = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(str); const [_, ...hsl] = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(str)!;
const h = Number(hsl[0]) / 360; const h = Number(hsl[0]) / 360;
const s = Number(hsl[1]) / 100; const s = Number(hsl[1]) / 100;
@ -905,8 +905,8 @@ export const Util = {
}, },
_prepareArrayForTween(startArray, endArray, isClosed) { _prepareArrayForTween(startArray, endArray, isClosed) {
var n, var n,
start = [], start: Vector2d[] = [],
end = []; end: Vector2d[] = [];
if (startArray.length > endArray.length) { if (startArray.length > endArray.length) {
var temp = endArray; var temp = endArray;
endArray = startArray; endArray = startArray;
@ -925,7 +925,7 @@ export const Util = {
}); });
} }
var newStart = []; var newStart: number[] = [];
end.forEach(function (point) { end.forEach(function (point) {
var pr = Util._getProjectionToLine(point, start, isClosed); var pr = Util._getProjectionToLine(point, start, isClosed);
newStart.push(pr.x); newStart.push(pr.x);
@ -985,22 +985,27 @@ export const Util = {
releaseCanvas(...canvases: HTMLCanvasElement[]) { releaseCanvas(...canvases: HTMLCanvasElement[]) {
if (!Konva.releaseCanvasOnDestroy) return; if (!Konva.releaseCanvasOnDestroy) return;
canvases.forEach(c => { canvases.forEach((c) => {
c.width = 0; c.width = 0;
c.height = 0; c.height = 0;
}) });
}, },
drawRoundedRectPath(context: Context, width: number, height: number, cornerRadius: number | number[]) { drawRoundedRectPath(
context: Context,
width: number,
height: number,
cornerRadius: number | number[]
) {
let topLeft = 0; let topLeft = 0;
let topRight = 0; let topRight = 0;
let bottomLeft = 0; let bottomLeft = 0;
let bottomRight = 0; let bottomRight = 0;
if (typeof cornerRadius === 'number') { if (typeof cornerRadius === 'number') {
topLeft = topRight = bottomLeft = bottomRight = Math.min( topLeft =
cornerRadius, topRight =
width / 2, bottomLeft =
height / 2 bottomRight =
); Math.min(cornerRadius, width / 2, height / 2);
} else { } else {
topLeft = Math.min(cornerRadius[0] || 0, width / 2, height / 2); topLeft = Math.min(cornerRadius[0] || 0, width / 2, height / 2);
topRight = Math.min(cornerRadius[1] || 0, width / 2, height / 2); topRight = Math.min(cornerRadius[1] || 0, width / 2, height / 2);
@ -1037,5 +1042,5 @@ export const Util = {
); );
context.lineTo(0, topLeft); context.lineTo(0, topLeft);
context.arc(topLeft, topLeft, topLeft, Math.PI, (Math.PI * 3) / 2, false); context.arc(topLeft, topLeft, topLeft, Math.PI, (Math.PI * 3) / 2, false);
} },
}; };

565
src/filters/Blur.ts
View File

@ -55,519 +55,40 @@ function BlurStack() {
} }
var mul_table = [ var mul_table = [
512, 512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292,
512, 512, 454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292,
456, 273, 512, 482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259,
512, 496, 475, 456, 437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292,
328, 282, 273, 265, 512, 497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373,
456, 364, 354, 345, 337, 328, 320, 312, 305, 298, 291, 284, 278, 271, 265, 259,
335, 507, 496, 485, 475, 465, 456, 446, 437, 428, 420, 412, 404, 396, 388, 381,
512, 374, 367, 360, 354, 347, 341, 335, 329, 323, 318, 312, 307, 302, 297, 292,
405, 287, 282, 278, 273, 269, 265, 261, 512, 505, 497, 489, 482, 475, 468, 461,
328, 454, 447, 441, 435, 428, 422, 417, 411, 405, 399, 394, 389, 383, 378, 373,
271, 368, 364, 359, 354, 350, 345, 341, 337, 332, 328, 324, 320, 316, 312, 309,
456, 305, 301, 298, 294, 291, 287, 284, 281, 278, 274, 271, 268, 265, 262, 259,
388, 257, 507, 501, 496, 491, 485, 480, 475, 470, 465, 460, 456, 451, 446, 442,
335, 437, 433, 428, 424, 420, 416, 412, 408, 404, 400, 396, 392, 388, 385, 381,
292, 377, 374, 370, 367, 363, 360, 357, 354, 350, 347, 344, 341, 338, 335, 332,
512, 329, 326, 323, 320, 318, 315, 312, 310, 307, 304, 302, 299, 297, 294, 292,
454, 289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259,
405,
364,
328,
298,
271,
496,
456,
420,
388,
360,
335,
312,
292,
273,
512,
482,
454,
428,
405,
383,
364,
345,
328,
312,
298,
284,
271,
259,
496,
475,
456,
437,
420,
404,
388,
374,
360,
347,
335,
323,
312,
302,
292,
282,
273,
265,
512,
497,
482,
468,
454,
441,
428,
417,
405,
394,
383,
373,
364,
354,
345,
337,
328,
320,
312,
305,
298,
291,
284,
278,
271,
265,
259,
507,
496,
485,
475,
465,
456,
446,
437,
428,
420,
412,
404,
396,
388,
381,
374,
367,
360,
354,
347,
341,
335,
329,
323,
318,
312,
307,
302,
297,
292,
287,
282,
278,
273,
269,
265,
261,
512,
505,
497,
489,
482,
475,
468,
461,
454,
447,
441,
435,
428,
422,
417,
411,
405,
399,
394,
389,
383,
378,
373,
368,
364,
359,
354,
350,
345,
341,
337,
332,
328,
324,
320,
316,
312,
309,
305,
301,
298,
294,
291,
287,
284,
281,
278,
274,
271,
268,
265,
262,
259,
257,
507,
501,
496,
491,
485,
480,
475,
470,
465,
460,
456,
451,
446,
442,
437,
433,
428,
424,
420,
416,
412,
408,
404,
400,
396,
392,
388,
385,
381,
377,
374,
370,
367,
363,
360,
357,
354,
350,
347,
344,
341,
338,
335,
332,
329,
326,
323,
320,
318,
315,
312,
310,
307,
304,
302,
299,
297,
294,
292,
289,
287,
285,
282,
280,
278,
275,
273,
271,
269,
267,
265,
263,
261,
259,
]; ];
var shg_table = [ var shg_table = [
9, 9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17, 17, 17, 17, 17,
11, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19, 19, 19, 19, 19, 19,
12, 19, 19, 19, 19, 19, 19, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20,
13, 20, 20, 20, 20, 20, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21,
13, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22,
14, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22,
14, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23, 23, 23, 23, 23, 23, 23,
15, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
15, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
15, 23, 23, 23, 23, 23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
15, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
16, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
16, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
16, 24, 24, 24, 24, 24, 24, 24,
16,
17,
17,
17,
17,
17,
17,
17,
18,
18,
18,
18,
18,
18,
18,
18,
18,
19,
19,
19,
19,
19,
19,
19,
19,
19,
19,
19,
19,
19,
19,
20,
20,
20,
20,
20,
20,
20,
20,
20,
20,
20,
20,
20,
20,
20,
20,
20,
20,
21,
21,
21,
21,
21,
21,
21,
21,
21,
21,
21,
21,
21,
21,
21,
21,
21,
21,
21,
21,
21,
21,
21,
21,
21,
21,
21,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
22,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
23,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
24,
]; ];
function filterGaussBlurRGBA(imageData, radius) { function filterGaussBlurRGBA(imageData, radius) {
@ -608,8 +129,8 @@ function filterGaussBlurRGBA(imageData, radius) {
stackStart = new BlurStack(), stackStart = new BlurStack(),
stackEnd = null, stackEnd = null,
stack = stackStart, stack = stackStart,
stackIn = null, stackIn: any = null,
stackOut = null, stackOut: any = null,
mul_sum = mul_table[radius], mul_sum = mul_table[radius],
shg_sum = shg_table[radius]; shg_sum = shg_table[radius];
@ -625,7 +146,15 @@ function filterGaussBlurRGBA(imageData, radius) {
yw = yi = 0; yw = yi = 0;
for (y = 0; y < height; y++) { for (y = 0; y < height; y++) {
r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0; r_in_sum =
g_in_sum =
b_in_sum =
a_in_sum =
r_sum =
g_sum =
b_sum =
a_sum =
0;
r_out_sum = radiusPlus1 * (pr = pixels[yi]); r_out_sum = radiusPlus1 * (pr = pixels[yi]);
g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]); g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);
@ -717,7 +246,15 @@ function filterGaussBlurRGBA(imageData, radius) {
} }
for (x = 0; x < width; x++) { for (x = 0; x < width; x++) {
g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0; g_in_sum =
b_in_sum =
a_in_sum =
r_in_sum =
g_sum =
b_sum =
a_sum =
r_sum =
0;
yi = x << 2; yi = x << 2;
r_out_sum = radiusPlus1 * (pr = pixels[yi]); r_out_sum = radiusPlus1 * (pr = pixels[yi]);

2
src/filters/Kaleidoscope.ts
View File

@ -195,7 +195,7 @@ export const Kaleidoscope: Filter = function (imageData) {
tempCanvas.width = xSize; tempCanvas.width = xSize;
tempCanvas.height = ySize; tempCanvas.height = ySize;
var scratchData = tempCanvas var scratchData = tempCanvas
.getContext('2d') .getContext('2d')!
.getImageData(0, 0, xSize, ySize); .getImageData(0, 0, xSize, ySize);
Util.releaseCanvas(tempCanvas); Util.releaseCanvas(tempCanvas);
// Convert thhe original to polar coordinates // Convert thhe original to polar coordinates

10
src/filters/Mask.ts
View File

@ -4,7 +4,7 @@ import { getNumberValidator } from '../Validators';
function pixelAt(idata, x, y) { function pixelAt(idata, x, y) {
var idx = (y * idata.width + x) * 4; var idx = (y * idata.width + x) * 4;
var d = []; var d: Array<number> = [];
d.push( d.push(
idata.data[idx++], idata.data[idx++],
idata.data[idx++], idata.data[idx++],
@ -55,7 +55,7 @@ function backgroundMask(idata, threshold) {
var mean = rgbMean([rgbv_ne, rgbv_no, rgbv_se, rgbv_so]); var mean = rgbMean([rgbv_ne, rgbv_no, rgbv_se, rgbv_so]);
// Mask based on color distance // Mask based on color distance
var mask = []; var mask: Array<number> = [];
for (var i = 0; i < idata.width * idata.height; i++) { for (var i = 0; i < idata.width * idata.height; i++) {
var d = rgbDistance(mean, [ var d = rgbDistance(mean, [
idata.data[i * 4], idata.data[i * 4],
@ -80,7 +80,7 @@ function erodeMask(mask, sw, sh) {
var side = Math.round(Math.sqrt(weights.length)); var side = Math.round(Math.sqrt(weights.length));
var halfSide = Math.floor(side / 2); var halfSide = Math.floor(side / 2);
var maskResult = []; var maskResult: Array<number> = [];
for (var y = 0; y < sh; y++) { for (var y = 0; y < sh; y++) {
for (var x = 0; x < sw; x++) { for (var x = 0; x < sw; x++) {
var so = y * sw + x; var so = y * sw + x;
@ -111,7 +111,7 @@ function dilateMask(mask, sw, sh) {
var side = Math.round(Math.sqrt(weights.length)); var side = Math.round(Math.sqrt(weights.length));
var halfSide = Math.floor(side / 2); var halfSide = Math.floor(side / 2);
var maskResult = []; var maskResult: Array<number> = [];
for (var y = 0; y < sh; y++) { for (var y = 0; y < sh; y++) {
for (var x = 0; x < sw; x++) { for (var x = 0; x < sw; x++) {
var so = y * sw + x; var so = y * sw + x;
@ -142,7 +142,7 @@ function smoothEdgeMask(mask, sw, sh) {
var side = Math.round(Math.sqrt(weights.length)); var side = Math.round(Math.sqrt(weights.length));
var halfSide = Math.floor(side / 2); var halfSide = Math.floor(side / 2);
var maskResult = []; var maskResult: Array<number> = [];
for (var y = 0; y < sh; y++) { for (var y = 0; y < sh; y++) {
for (var x = 0; x < sw; x++) { for (var x = 0; x < sw; x++) {
var so = y * sw + x; var so = y * sw + x;

14
src/shapes/Line.ts
View File

@ -22,7 +22,7 @@ function getControlPoints(x0, y0, x1, y1, x2, y2, t) {
function expandPoints(p, tension) { function expandPoints(p, tension) {
var len = p.length, var len = p.length,
allPoints = [], allPoints: Array<number> = [],
n, n,
cp; cp;
@ -51,7 +51,17 @@ function expandPoints(p, tension) {
} }
export interface LineConfig extends ShapeConfig { export interface LineConfig extends ShapeConfig {
points?: number[] | Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array; points?:
| number[]
| Int8Array
| Uint8Array
| Uint8ClampedArray
| Int16Array
| Uint16Array
| Int32Array
| Uint32Array
| Float32Array
| Float64Array;
tension?: number; tension?: number;
closed?: boolean; closed?: boolean;
bezier?: boolean; bezier?: boolean;

117
src/shapes/Path.ts
View File

@ -33,7 +33,7 @@ export interface PathConfig extends ShapeConfig {
* }); * });
*/ */
export class Path extends Shape<PathConfig> { export class Path extends Shape<PathConfig> {
dataArray = []; dataArray: PathSegment[] = [];
pathLength = 0; pathLength = 0;
constructor(config?: PathConfig) { constructor(config?: PathConfig) {
@ -109,7 +109,7 @@ export class Path extends Shape<PathConfig> {
} }
} }
getSelfRect() { getSelfRect() {
var points = []; var points: Array<number> = [];
this.dataArray.forEach(function (data) { this.dataArray.forEach(function (data) {
if (data.command === 'A') { if (data.command === 'A') {
// Approximates by breaking curve into line segments // Approximates by breaking curve into line segments
@ -416,7 +416,14 @@ export class Path extends Shape<PathConfig> {
y: y, y: y,
}; };
} }
static getPointOnEllipticalArc(cx, cy, rx, ry, theta, psi) { static getPointOnEllipticalArc(
cx: number,
cy: number,
rx: number,
ry: number,
theta: number,
psi: number
) {
var cosPsi = Math.cos(psi), var cosPsi = Math.cos(psi),
sinPsi = Math.sin(psi); sinPsi = Math.sin(psi);
var pt = { var pt = {
@ -496,8 +503,8 @@ export class Path extends Shape<PathConfig> {
} }
// create array // create array
var arr = cs.split('|'); var arr = cs.split('|');
var ca = []; var ca: PathSegment[] = [];
var coords = []; var coords: string[] = [];
// init context point // init context point
var cpx = 0; var cpx = 0;
var cpy = 0; var cpy = 0;
@ -517,7 +524,7 @@ export class Path extends Shape<PathConfig> {
// while ((match = re.exec(str))) { // while ((match = re.exec(str))) {
// coords.push(match[0]); // coords.push(match[0]);
// } // }
var p = []; var p: number[] = [];
for (var j = 0, jlen = coords.length; j < jlen; j++) { for (var j = 0, jlen = coords.length; j < jlen; j++) {
// extra case for merged flags // extra case for merged flags
@ -539,8 +546,8 @@ export class Path extends Shape<PathConfig> {
break; break;
} }
var cmd = null; var cmd: string = '';
var points = []; var points: number[] = [];
var startX = cpx, var startX = cpx,
startY = cpy; startY = cpy;
// Move var from within the switch to up here (jshint) // Move var from within the switch to up here (jshint)
@ -551,20 +558,20 @@ export class Path extends Shape<PathConfig> {
switch (c) { switch (c) {
// Note: Keep the lineTo's above the moveTo's in this switch // Note: Keep the lineTo's above the moveTo's in this switch
case 'l': case 'l':
cpx += p.shift(); cpx += p.shift()!;
cpy += p.shift(); cpy += p.shift()!;
cmd = 'L'; cmd = 'L';
points.push(cpx, cpy); points.push(cpx, cpy);
break; break;
case 'L': case 'L':
cpx = p.shift(); cpx = p.shift()!;
cpy = p.shift(); cpy = p.shift()!;
points.push(cpx, cpy); points.push(cpx, cpy);
break; break;
// Note: lineTo handlers need to be above this point // Note: lineTo handlers need to be above this point
case 'm': case 'm':
var dx = p.shift(); var dx = p.shift()!;
var dy = p.shift(); var dy = p.shift()!;
cpx += dx; cpx += dx;
cpy += dy; cpy += dy;
cmd = 'M'; cmd = 'M';
@ -584,8 +591,8 @@ export class Path extends Shape<PathConfig> {
// subsequent points are treated as relative lineTo // subsequent points are treated as relative lineTo
break; break;
case 'M': case 'M':
cpx = p.shift(); cpx = p.shift()!;
cpy = p.shift(); cpy = p.shift()!;
cmd = 'M'; cmd = 'M';
points.push(cpx, cpy); points.push(cpx, cpy);
c = 'L'; c = 'L';
@ -593,40 +600,40 @@ export class Path extends Shape<PathConfig> {
break; break;
case 'h': case 'h':
cpx += p.shift(); cpx += p.shift()!;
cmd = 'L'; cmd = 'L';
points.push(cpx, cpy); points.push(cpx, cpy);
break; break;
case 'H': case 'H':
cpx = p.shift(); cpx = p.shift()!;
cmd = 'L'; cmd = 'L';
points.push(cpx, cpy); points.push(cpx, cpy);
break; break;
case 'v': case 'v':
cpy += p.shift(); cpy += p.shift()!;
cmd = 'L'; cmd = 'L';
points.push(cpx, cpy); points.push(cpx, cpy);
break; break;
case 'V': case 'V':
cpy = p.shift(); cpy = p.shift()!;
cmd = 'L'; cmd = 'L';
points.push(cpx, cpy); points.push(cpx, cpy);
break; break;
case 'C': case 'C':
points.push(p.shift(), p.shift(), p.shift(), p.shift()); points.push(p.shift()!, p.shift()!, p.shift()!, p.shift()!);
cpx = p.shift(); cpx = p.shift()!;
cpy = p.shift(); cpy = p.shift()!;
points.push(cpx, cpy); points.push(cpx, cpy);
break; break;
case 'c': case 'c':
points.push( points.push(
cpx + p.shift(), cpx + p.shift()!,
cpy + p.shift(), cpy + p.shift()!,
cpx + p.shift(), cpx + p.shift()!,
cpy + p.shift() cpy + p.shift()!
); );
cpx += p.shift(); cpx += p.shift()!;
cpy += p.shift(); cpy += p.shift()!;
cmd = 'C'; cmd = 'C';
points.push(cpx, cpy); points.push(cpx, cpy);
break; break;
@ -638,9 +645,9 @@ export class Path extends Shape<PathConfig> {
ctlPtx = cpx + (cpx - prevCmd.points[2]); ctlPtx = cpx + (cpx - prevCmd.points[2]);
ctlPty = cpy + (cpy - prevCmd.points[3]); ctlPty = cpy + (cpy - prevCmd.points[3]);
} }
points.push(ctlPtx, ctlPty, p.shift(), p.shift()); points.push(ctlPtx, ctlPty, p.shift()!, p.shift()!);
cpx = p.shift(); cpx = p.shift()!;
cpy = p.shift(); cpy = p.shift()!;
cmd = 'C'; cmd = 'C';
points.push(cpx, cpy); points.push(cpx, cpy);
break; break;
@ -652,22 +659,22 @@ export class Path extends Shape<PathConfig> {
ctlPtx = cpx + (cpx - prevCmd.points[2]); ctlPtx = cpx + (cpx - prevCmd.points[2]);
ctlPty = cpy + (cpy - prevCmd.points[3]); ctlPty = cpy + (cpy - prevCmd.points[3]);
} }
points.push(ctlPtx, ctlPty, cpx + p.shift(), cpy + p.shift()); points.push(ctlPtx, ctlPty, cpx + p.shift()!, cpy + p.shift()!);
cpx += p.shift(); cpx += p.shift()!;
cpy += p.shift(); cpy += p.shift()!;
cmd = 'C'; cmd = 'C';
points.push(cpx, cpy); points.push(cpx, cpy);
break; break;
case 'Q': case 'Q':
points.push(p.shift(), p.shift()); points.push(p.shift()!, p.shift()!);
cpx = p.shift(); cpx = p.shift()!;
cpy = p.shift(); cpy = p.shift()!;
points.push(cpx, cpy); points.push(cpx, cpy);
break; break;
case 'q': case 'q':
points.push(cpx + p.shift(), cpy + p.shift()); points.push(cpx + p.shift()!, cpy + p.shift()!);
cpx += p.shift(); cpx += p.shift()!;
cpy += p.shift(); cpy += p.shift()!;
cmd = 'Q'; cmd = 'Q';
points.push(cpx, cpy); points.push(cpx, cpy);
break; break;
@ -679,8 +686,8 @@ export class Path extends Shape<PathConfig> {
ctlPtx = cpx + (cpx - prevCmd.points[0]); ctlPtx = cpx + (cpx - prevCmd.points[0]);
ctlPty = cpy + (cpy - prevCmd.points[1]); ctlPty = cpy + (cpy - prevCmd.points[1]);
} }
cpx = p.shift(); cpx = p.shift()!;
cpy = p.shift(); cpy = p.shift()!;
cmd = 'Q'; cmd = 'Q';
points.push(ctlPtx, ctlPty, cpx, cpy); points.push(ctlPtx, ctlPty, cpx, cpy);
break; break;
@ -692,21 +699,21 @@ export class Path extends Shape<PathConfig> {
ctlPtx = cpx + (cpx - prevCmd.points[0]); ctlPtx = cpx + (cpx - prevCmd.points[0]);
ctlPty = cpy + (cpy - prevCmd.points[1]); ctlPty = cpy + (cpy - prevCmd.points[1]);
} }
cpx += p.shift(); cpx += p.shift()!;
cpy += p.shift(); cpy += p.shift()!;
cmd = 'Q'; cmd = 'Q';
points.push(ctlPtx, ctlPty, cpx, cpy); points.push(ctlPtx, ctlPty, cpx, cpy);
break; break;
case 'A': case 'A':
rx = p.shift(); rx = p.shift()!;
ry = p.shift(); ry = p.shift()!;
psi = p.shift(); psi = p.shift()!;
fa = p.shift(); fa = p.shift()!;
fs = p.shift(); fs = p.shift()!;
x1 = cpx; x1 = cpx;
y1 = cpy; y1 = cpy;
cpx = p.shift(); cpx = p.shift()!;
cpy = p.shift(); cpy = p.shift()!;
cmd = 'A'; cmd = 'A';
points = this.convertEndpointToCenterParameterization( points = this.convertEndpointToCenterParameterization(
x1, x1,
@ -728,8 +735,8 @@ export class Path extends Shape<PathConfig> {
fs = p.shift(); fs = p.shift();
x1 = cpx; x1 = cpx;
y1 = cpy; y1 = cpy;
cpx += p.shift(); cpx += p.shift()!;
cpy += p.shift(); cpy += p.shift()!;
cmd = 'A'; cmd = 'A';
points = this.convertEndpointToCenterParameterization( points = this.convertEndpointToCenterParameterization(
x1, x1,
@ -760,7 +767,7 @@ export class Path extends Shape<PathConfig> {
ca.push({ ca.push({
command: 'z', command: 'z',
points: [], points: [],
start: undefined, start: undefined as any,
pathLength: 0, pathLength: 0,
}); });
} }

6
src/shapes/RegularPolygon.ts
View File

@ -1,6 +1,6 @@
import { Factory } from '../Factory'; import { Factory } from '../Factory';
import { Shape, ShapeConfig } from '../Shape'; import { Shape, ShapeConfig } from '../Shape';
import { GetSet } from '../types'; import { GetSet, Vector2d } from '../types';
import { getNumberValidator } from '../Validators'; import { getNumberValidator } from '../Validators';
import { _registerNode } from '../Global'; import { _registerNode } from '../Global';
import { Context } from '../Context'; import { Context } from '../Context';
@ -45,9 +45,9 @@ export class RegularPolygon extends Shape<RegularPolygonConfig> {
context.fillStrokeShape(this); context.fillStrokeShape(this);
} }
_getPoints() { _getPoints() {
const sides = this.attrs.sides; const sides = this.attrs.sides as number;
const radius = this.attrs.radius || 0; const radius = this.attrs.radius || 0;
const points = []; const points: Vector2d[] = [];
for (var n = 0; n < sides; n++) { for (var n = 0; n < sides; n++) {
points.push({ points.push({
x: radius * Math.sin((n * 2 * Math.PI) / sides), x: radius * Math.sin((n * 2 * Math.PI) / sides),

2
src/shapes/Text.ts
View File

@ -112,7 +112,7 @@ function _strokeFunc(context: Context) {
context.strokeText(this._partialText, this._partialTextX, this._partialTextY); context.strokeText(this._partialText, this._partialTextX, this._partialTextY);
} }
function checkDefaultFill(config: TextConfig) { function checkDefaultFill(config?: TextConfig) {
config = config || {}; config = config || {};
// set default color to black // set default color to black

8
src/shapes/TextPath.ts
View File

@ -7,7 +7,7 @@ import { Text, stringToArray } from './Text';
import { getNumberValidator } from '../Validators'; import { getNumberValidator } from '../Validators';
import { _registerNode } from '../Global'; import { _registerNode } from '../Global';
import { GetSet, Vector2d } from '../types'; import { GetSet, PathSegment, Vector2d } from '../types';
export interface TextPathConfig extends ShapeConfig { export interface TextPathConfig extends ShapeConfig {
text?: string; text?: string;
@ -74,7 +74,7 @@ function _strokeFunc(context) {
*/ */
export class TextPath extends Shape<TextPathConfig> { export class TextPath extends Shape<TextPathConfig> {
dummyCanvas = Util.createCanvasElement(); dummyCanvas = Util.createCanvasElement();
dataArray = []; dataArray: PathSegment[] = [];
glyphInfo: Array<{ glyphInfo: Array<{
transposeX: number; transposeX: number;
transposeY: number; transposeY: number;
@ -221,7 +221,7 @@ export class TextPath extends Shape<TextPathConfig> {
_getTextSize(text: string) { _getTextSize(text: string) {
var dummyCanvas = this.dummyCanvas; var dummyCanvas = this.dummyCanvas;
var _context = dummyCanvas.getContext('2d'); var _context = dummyCanvas.getContext('2d')!;
_context.save(); _context.save();
@ -338,7 +338,7 @@ export class TextPath extends Shape<TextPathConfig> {
height: 0, height: 0,
}; };
} }
var points = []; var points: number[] = [];
this.glyphInfo.forEach(function (info) { this.glyphInfo.forEach(function (info) {
points.push(info.p0.x); points.push(info.p0.x);

101
src/shapes/Transformer.ts
View File

@ -21,7 +21,7 @@ export interface TransformerConfig extends ContainerConfig {
rotationSnaps?: Array<number>; rotationSnaps?: Array<number>;
rotationSnapTolerance?: number; rotationSnapTolerance?: number;
rotateAnchorOffset?: number; rotateAnchorOffset?: number;
rotateAnchorCursor?: string, rotateAnchorCursor?: string;
borderEnabled?: boolean; borderEnabled?: boolean;
borderStroke?: string; borderStroke?: string;
borderStrokeWidth?: number; borderStrokeWidth?: number;
@ -239,7 +239,7 @@ function getSnap(snaps: Array<number>, newRotationRad: number, tol: number) {
export class Transformer extends Group { export class Transformer extends Group {
_nodes: Array<Node>; _nodes: Array<Node>;
_movingAnchorName: string; _movingAnchorName: string | null = null;
_transforming = false; _transforming = false;
_anchorDragOffset: Vector2d; _anchorDragOffset: Vector2d;
sin: number; sin: number;
@ -478,7 +478,7 @@ export class Transformer extends Group {
}; };
} }
const totalPoints = []; const totalPoints: Vector2d[] = [];
this.nodes().map((node) => { this.nodes().map((node) => {
const box = node.getClientRect({ const box = node.getClientRect({
skipTransform: true, skipTransform: true,
@ -501,7 +501,10 @@ export class Transformer extends Group {
const tr = new Transform(); const tr = new Transform();
tr.rotate(-Konva.getAngle(this.rotation())); tr.rotate(-Konva.getAngle(this.rotation()));
var minX: number, minY: number, maxX: number, maxY: number; var minX: number = Infinity,
minY: number = Infinity,
maxX: number = -Infinity,
maxY: number = -Infinity;
totalPoints.forEach(function (point) { totalPoints.forEach(function (point) {
var transformed = tr.point(point); var transformed = tr.point(point);
if (minX === undefined) { if (minX === undefined) {
@ -585,13 +588,13 @@ export class Transformer extends Group {
var rad = Konva.getAngle(this.rotation()); var rad = Konva.getAngle(this.rotation());
var rotateCursor = this.rotateAnchorCursor(); var rotateCursor = this.rotateAnchorCursor();
var cursor = getCursor(name, rad, rotateCursor); var cursor = getCursor(name, rad, rotateCursor);
anchor.getStage().content && anchor.getStage()!.content &&
(anchor.getStage().content.style.cursor = cursor); (anchor.getStage()!.content.style.cursor = cursor);
this._cursorChange = true; this._cursorChange = true;
}); });
anchor.on('mouseout', () => { anchor.on('mouseout', () => {
anchor.getStage().content && anchor.getStage()!.content &&
(anchor.getStage().content.style.cursor = ''); (anchor.getStage()!.content.style.cursor = '');
this._cursorChange = false; this._cursorChange = false;
}); });
this.add(anchor); this.add(anchor);
@ -688,12 +691,12 @@ export class Transformer extends Group {
} }
_handleMouseMove(e) { _handleMouseMove(e) {
var x, y, newHypotenuse; var x, y, newHypotenuse;
var anchorNode = this.findOne('.' + this._movingAnchorName); var anchorNode = this.findOne('.' + this._movingAnchorName)!;
var stage = anchorNode.getStage(); var stage = anchorNode.getStage()!;
stage.setPointersPositions(e); stage.setPointersPositions(e);
const pp = stage.getPointerPosition(); const pp = stage.getPointerPosition()!;
let newNodePos = { let newNodePos = {
x: pp.x - this._anchorDragOffset.x, x: pp.x - this._anchorDragOffset.x,
y: pp.y - this._anchorDragOffset.y, y: pp.y - this._anchorDragOffset.y,
@ -759,26 +762,26 @@ export class Transformer extends Group {
y: this.height() / 2, y: this.height() / 2,
} }
: { : {
x: this.findOne('.bottom-right').x(), x: this.findOne('.bottom-right')!.x(),
y: this.findOne('.bottom-right').y(), y: this.findOne('.bottom-right')!.y(),
}; };
newHypotenuse = Math.sqrt( newHypotenuse = Math.sqrt(
Math.pow(comparePoint.x - anchorNode.x(), 2) + Math.pow(comparePoint.x - anchorNode.x(), 2) +
Math.pow(comparePoint.y - anchorNode.y(), 2) Math.pow(comparePoint.y - anchorNode.y(), 2)
); );
var reverseX = this.findOne('.top-left').x() > comparePoint.x ? -1 : 1; var reverseX = this.findOne('.top-left')!.x() > comparePoint.x ? -1 : 1;
var reverseY = this.findOne('.top-left').y() > comparePoint.y ? -1 : 1; var reverseY = this.findOne('.top-left')!.y() > comparePoint.y ? -1 : 1;
x = newHypotenuse * this.cos * reverseX; x = newHypotenuse * this.cos * reverseX;
y = newHypotenuse * this.sin * reverseY; y = newHypotenuse * this.sin * reverseY;
this.findOne('.top-left').x(comparePoint.x - x); this.findOne('.top-left')!.x(comparePoint.x - x);
this.findOne('.top-left').y(comparePoint.y - y); this.findOne('.top-left')!.y(comparePoint.y - y);
} }
} else if (this._movingAnchorName === 'top-center') { } else if (this._movingAnchorName === 'top-center') {
this.findOne('.top-left').y(anchorNode.y()); this.findOne('.top-left')!.y(anchorNode.y());
} else if (this._movingAnchorName === 'top-right') { } else if (this._movingAnchorName === 'top-right') {
if (keepProportion) { if (keepProportion) {
var comparePoint = centeredScaling var comparePoint = centeredScaling
@ -787,8 +790,8 @@ export class Transformer extends Group {
y: this.height() / 2, y: this.height() / 2,
} }
: { : {
x: this.findOne('.bottom-left').x(), x: this.findOne('.bottom-left')!.x(),
y: this.findOne('.bottom-left').y(), y: this.findOne('.bottom-left')!.y(),
}; };
newHypotenuse = Math.sqrt( newHypotenuse = Math.sqrt(
@ -796,23 +799,25 @@ export class Transformer extends Group {
Math.pow(comparePoint.y - anchorNode.y(), 2) Math.pow(comparePoint.y - anchorNode.y(), 2)
); );
var reverseX = this.findOne('.top-right').x() < comparePoint.x ? -1 : 1; var reverseX =
this.findOne('.top-right')!.x() < comparePoint.x ? -1 : 1;
var reverseY = this.findOne('.top-right').y() > comparePoint.y ? -1 : 1; var reverseY =
this.findOne('.top-right')!.y() > comparePoint.y ? -1 : 1;
x = newHypotenuse * this.cos * reverseX; x = newHypotenuse * this.cos * reverseX;
y = newHypotenuse * this.sin * reverseY; y = newHypotenuse * this.sin * reverseY;
this.findOne('.top-right').x(comparePoint.x + x); this.findOne('.top-right')!.x(comparePoint.x + x);
this.findOne('.top-right').y(comparePoint.y - y); this.findOne('.top-right')!.y(comparePoint.y - y);
} }
var pos = anchorNode.position(); var pos = anchorNode.position();
this.findOne('.top-left').y(pos.y); this.findOne('.top-left')!.y(pos.y);
this.findOne('.bottom-right').x(pos.x); this.findOne('.bottom-right')!.x(pos.x);
} else if (this._movingAnchorName === 'middle-left') { } else if (this._movingAnchorName === 'middle-left') {
this.findOne('.top-left').x(anchorNode.x()); this.findOne('.top-left')!.x(anchorNode.x());
} else if (this._movingAnchorName === 'middle-right') { } else if (this._movingAnchorName === 'middle-right') {
this.findOne('.bottom-right').x(anchorNode.x()); this.findOne('.bottom-right')!.x(anchorNode.x());
} else if (this._movingAnchorName === 'bottom-left') { } else if (this._movingAnchorName === 'bottom-left') {
if (keepProportion) { if (keepProportion) {
var comparePoint = centeredScaling var comparePoint = centeredScaling
@ -821,8 +826,8 @@ export class Transformer extends Group {
y: this.height() / 2, y: this.height() / 2,
} }
: { : {
x: this.findOne('.top-right').x(), x: this.findOne('.top-right')!.x(),
y: this.findOne('.top-right').y(), y: this.findOne('.top-right')!.y(),
}; };
newHypotenuse = Math.sqrt( newHypotenuse = Math.sqrt(
@ -843,10 +848,10 @@ export class Transformer extends Group {
pos = anchorNode.position(); pos = anchorNode.position();
this.findOne('.top-left').x(pos.x); this.findOne('.top-left')!.x(pos.x);
this.findOne('.bottom-right').y(pos.y); this.findOne('.bottom-right')!.y(pos.y);
} else if (this._movingAnchorName === 'bottom-center') { } else if (this._movingAnchorName === 'bottom-center') {
this.findOne('.bottom-right').y(anchorNode.y()); this.findOne('.bottom-right')!.y(anchorNode.y());
} else if (this._movingAnchorName === 'bottom-right') { } else if (this._movingAnchorName === 'bottom-right') {
if (keepProportion) { if (keepProportion) {
var comparePoint = centeredScaling var comparePoint = centeredScaling
@ -855,8 +860,8 @@ export class Transformer extends Group {
y: this.height() / 2, y: this.height() / 2,
} }
: { : {
x: this.findOne('.top-left').x(), x: this.findOne('.top-left')!.x(),
y: this.findOne('.top-left').y(), y: this.findOne('.top-left')!.y(),
}; };
newHypotenuse = Math.sqrt( newHypotenuse = Math.sqrt(
@ -865,16 +870,16 @@ export class Transformer extends Group {
); );
var reverseX = var reverseX =
this.findOne('.bottom-right').x() < comparePoint.x ? -1 : 1; this.findOne('.bottom-right')!.x() < comparePoint.x ? -1 : 1;
var reverseY = var reverseY =
this.findOne('.bottom-right').y() < comparePoint.y ? -1 : 1; this.findOne('.bottom-right')!.y() < comparePoint.y ? -1 : 1;
x = newHypotenuse * this.cos * reverseX; x = newHypotenuse * this.cos * reverseX;
y = newHypotenuse * this.sin * reverseY; y = newHypotenuse * this.sin * reverseY;
this.findOne('.bottom-right').x(comparePoint.x + x); this.findOne('.bottom-right')!.x(comparePoint.x + x);
this.findOne('.bottom-right').y(comparePoint.y + y); this.findOne('.bottom-right')!.y(comparePoint.y + y);
} }
} else { } else {
console.error( console.error(
@ -887,8 +892,8 @@ export class Transformer extends Group {
var centeredScaling = this.centeredScaling() || e.altKey; var centeredScaling = this.centeredScaling() || e.altKey;
if (centeredScaling) { if (centeredScaling) {
var topLeft = this.findOne('.top-left'); var topLeft = this.findOne('.top-left')!;
var bottomRight = this.findOne('.bottom-right'); var bottomRight = this.findOne('.bottom-right')!;
var topOffsetX = topLeft.x(); var topOffsetX = topLeft.x();
var topOffsetY = topLeft.y(); var topOffsetY = topLeft.y();
@ -906,16 +911,16 @@ export class Transformer extends Group {
}); });
} }
var absPos = this.findOne('.top-left').getAbsolutePosition(); var absPos = this.findOne('.top-left')!.getAbsolutePosition();
x = absPos.x; x = absPos.x;
y = absPos.y; y = absPos.y;
var width = var width =
this.findOne('.bottom-right').x() - this.findOne('.top-left').x(); this.findOne('.bottom-right')!.x() - this.findOne('.top-left')!.x();
var height = var height =
this.findOne('.bottom-right').y() - this.findOne('.top-left').y(); this.findOne('.bottom-right')!.y() - this.findOne('.top-left')!.y();
this._fitNodesInto( this._fitNodesInto(
{ {
@ -1088,7 +1093,7 @@ export class Transformer extends Group {
// [delta transform] * [parent transform] * [old local transform] = [parent transform] * [new local transform] // [delta transform] * [parent transform] * [old local transform] = [parent transform] * [new local transform]
// and we need to find [new local transform] // and we need to find [new local transform]
// [new local] = [parent inverted] * [delta] * [parent] * [old local] // [new local] = [parent inverted] * [delta] * [parent] * [old local]
const parentTransform = node.getParent().getAbsoluteTransform(); const parentTransform = node.getParent()!.getAbsoluteTransform();
const localTransform = node.getTransform().copy(); const localTransform = node.getTransform().copy();
// skip offset: // skip offset:
localTransform.translate(node.offsetX(), node.offsetY()); localTransform.translate(node.offsetX(), node.offsetY());
@ -1109,7 +1114,7 @@ export class Transformer extends Group {
this.rotation(Util._getRotation(newAttrs.rotation)); this.rotation(Util._getRotation(newAttrs.rotation));
this._resetTransformCache(); this._resetTransformCache();
this.update(); this.update();
this.getLayer().batchDraw(); this.getLayer()!.batchDraw();
} }
/** /**
* force update of Konva.Transformer. * force update of Konva.Transformer.
@ -1123,7 +1128,7 @@ export class Transformer extends Group {
} }
_batchChangeChild(selector: string, attrs: any) { _batchChangeChild(selector: string, attrs: any) {
const anchor = this.findOne(selector); const anchor = this.findOne(selector)!;
anchor.setAttrs(attrs); anchor.setAttrs(attrs);
} }
@ -1256,7 +1261,7 @@ export class Transformer extends Group {
} }
destroy() { destroy() {
if (this.getStage() && this._cursorChange) { if (this.getStage() && this._cursorChange) {
this.getStage().content && (this.getStage().content.style.cursor = ''); this.getStage()!.content && (this.getStage()!.content.style.cursor = '');
} }
Group.prototype.destroy.call(this); Group.prototype.destroy.call(this);
this.detach(); this.detach();

2
src/types.ts
View File

@ -31,7 +31,7 @@ export interface PathSegment {
| 'a' | 'a'
| 'A'; | 'A';
start: Vector2d; start: Vector2d;
points: Vector2d[]; points: number[];
pathLength: number; pathLength: number;
} }

3
test/unit/Node-test.ts
View File

@ -2396,6 +2396,9 @@ describe('Node', function () {
assert.equal(group3.getAbsoluteZIndex(), 5); assert.equal(group3.getAbsoluteZIndex(), 5);
assert.equal(group4.getAbsoluteZIndex(), 6); assert.equal(group4.getAbsoluteZIndex(), 6);
assert.equal(shape2.getAbsoluteZIndex(), 7); assert.equal(shape2.getAbsoluteZIndex(), 7);
const tempLayer = new Konva.Layer();
assert.equal(tempLayer.getAbsoluteZIndex(), 0);
}); });
// ====================================================== // ======================================================

4
tsconfig.json
View File

@ -2,14 +2,14 @@
"compilerOptions": { "compilerOptions": {
"outDir": "lib", "outDir": "lib",
"module": "CommonJS", "module": "CommonJS",
"target": "ES2015", "target": "ES2018",
// "sourceMap": true, // "sourceMap": true,
"noEmitOnError": true, "noEmitOnError": true,
"lib": ["ES2015", "dom"], "lib": ["ES2015", "dom"],
"moduleResolution": "node", "moduleResolution": "node",
"declaration": true, "declaration": true,
"removeComments": false, "removeComments": false,
"strictNullChecks": false, "strictNullChecks": true,
}, },
"include": ["./src/**/*.ts"] "include": ["./src/**/*.ts"]
} }