From d33b8e944bd92a0f27c9bf7f6156db28c98eb77b Mon Sep 17 00:00:00 2001 From: Anton Lavrenov Date: Mon, 28 Aug 2023 09:23:57 -0500 Subject: [PATCH] more strict typescript --- src/Animation.ts | 28 +- src/Container.ts | 19 +- src/Context.ts | 16 +- src/DragAndDrop.ts | 7 +- src/Node.ts | 58 ++-- src/Shape.ts | 26 +- src/Stage.ts | 45 +-- src/Tween.ts | 8 +- src/Util.ts | 51 ++-- src/filters/Blur.ts | 565 ++++------------------------------- src/filters/Kaleidoscope.ts | 2 +- src/filters/Mask.ts | 10 +- src/shapes/Line.ts | 14 +- src/shapes/Path.ts | 117 ++++---- src/shapes/RegularPolygon.ts | 6 +- src/shapes/Text.ts | 2 +- src/shapes/TextPath.ts | 8 +- src/shapes/Transformer.ts | 101 ++++--- src/types.ts | 2 +- test/unit/Node-test.ts | 3 + tsconfig.json | 4 +- 21 files changed, 345 insertions(+), 747 deletions(-) diff --git a/src/Animation.ts b/src/Animation.ts index 2ca5e404..addb6aaf 100644 --- a/src/Animation.ts +++ b/src/Animation.ts @@ -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. * @return {Konva.Animation} this */ - setLayers(layers:null | Layer | Layer[]) { + setLayers(layers: null | Layer | Layer[]) { let lays: Layer[] = []; // if passing in no layers if (layers) { - lays = Array.isArray(layers)? layers : [layers] + lays = Array.isArray(layers) ? layers : [layers]; } this.layers = lays; return this; @@ -87,8 +87,8 @@ export class Animation { * @return {Bool} true if layer is added to animation, otherwise false */ addLayer(layer: Layer) { - const layers = this.layers - const len = layers.length + const layers = this.layers; + const len = layers.length; // don't add the layer if it already exists for (let n = 0; n < len; n++) { @@ -107,9 +107,9 @@ export class Animation { * @return {Bool} is animation running? */ isRunning() { - const a = Animation - const animations = a.animations - const len = animations.length + const a = Animation; + const animations = a.animations; + const len = animations.length; for (let n = 0; n < len; n++) { if (animations[n].id === this.id) { @@ -148,7 +148,7 @@ export class Animation { this.frame.frameRate = 1000 / this.frame.timeDiff; } - static animations = []; + static animations: Array = []; static animIdCounter = 0; static animRunning = false; @@ -157,9 +157,9 @@ export class Animation { this._handleAnimation(); } static _removeAnimation(anim) { - const id = anim.id - const animations = this.animations - const len = animations.length + const id = anim.id; + const animations = this.animations; + const len = animations.length; for (let n = 0; n < len; n++) { if (animations[n].id === id) { @@ -170,8 +170,8 @@ export class Animation { } static _runFrames() { - const layerHash = {} - const animations = this.animations + const layerHash = {}; + const animations = this.animations; /* * loop through all animations and execute animation * function. if the animation object has specified node, @@ -193,7 +193,7 @@ export class Animation { const layersLen = layers.length; // if animation object has a function, execute it - let needRedraw + let needRedraw; if (func) { // allow anim bypassing drawing needRedraw = func.call(anim, anim.frame) !== false; diff --git a/src/Container.ts b/src/Container.ts index a400b4c3..447e6c98 100644 --- a/src/Container.ts +++ b/src/Container.ts @@ -197,7 +197,7 @@ export abstract class Container< * return node.getType() === 'Node' && node.getAbsoluteOpacity() < 1; * }); */ - find(selector): Array { + find(selector): Array { // protecting _generalFind to prevent user from accidentally adding // second argument and getting unexpected `findOne` result return this._generalFind(selector, false); @@ -317,7 +317,7 @@ export abstract class Container< getAllIntersections(pos) { var arr: Shape[] = []; - this.find('Shape').forEach(function (shape: Shape) { + this.find('Shape').forEach((shape) => { if (shape.isVisible() && shape.intersects(pos)) { arr.push(shape); } @@ -437,13 +437,14 @@ export abstract class Container< } } - getClientRect(config?: { - skipTransform?: boolean; - skipShadow?: boolean; - skipStroke?: boolean; - relativeTo?: Container; - }): IRect { - config = config || {}; + getClientRect( + config: { + skipTransform?: boolean; + skipShadow?: boolean; + skipStroke?: boolean; + relativeTo?: Container; + } = {} + ): IRect { var skipTransform = config.skipTransform; var relativeTo = config.relativeTo; diff --git a/src/Context.ts b/src/Context.ts index 1d7c53a8..d912f8e8 100644 --- a/src/Context.ts +++ b/src/Context.ts @@ -6,7 +6,7 @@ import { IRect } from './types'; import type { Node } from './Node'; function simplifyArray(arr: Array) { - var retArr = [], + var retArr: Array = [], len = arr.length, util = Util, n, @@ -441,9 +441,19 @@ export class Context { if (a.length === 3) { _context.drawImage(a0, a1, a2); } 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) { - _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 + ); } } /** diff --git a/src/DragAndDrop.ts b/src/DragAndDrop.ts index 4523601f..271c7311 100644 --- a/src/DragAndDrop.ts +++ b/src/DragAndDrop.ts @@ -1,3 +1,4 @@ +import { Container } from './Container'; import { Konva } from './Global'; import { Node } from './Node'; import { Vector2d } from './types'; @@ -44,7 +45,7 @@ export const DD = { DD._dragElements.forEach((elem, key) => { const { node } = elem; // we need to find pointer relative to that node - const stage = node.getStage(); + const stage = node.getStage()!; stage.setPointersPositions(evt); // 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 // setup all in dragbefore, and stop dragging only after pointerup triggered. _endDragBefore(evt?) { - const drawNodes = []; + const drawNodes: Array = []; DD._dragElements.forEach((elem) => { const { node } = elem; // we need to find pointer relative to that node - const stage = node.getStage(); + const stage = node.getStage()!; if (evt) { stage.setPointersPositions(evt); } diff --git a/src/Node.ts b/src/Node.ts index 96f24638..e4d26eb4 100644 --- a/src/Node.ts +++ b/src/Node.ts @@ -322,7 +322,7 @@ export abstract class Node { ) { rect = this.getClientRect({ skipTransform: true, - relativeTo: this.getParent(), + relativeTo: this.getParent() || undefined, }); } var width = Math.ceil(conf.width || rect.width), @@ -492,14 +492,17 @@ export abstract class Node { // redefine in Container and Shape throw new Error('abstract "getClientRect" method call'); } - _transformedRect(rect: IRect, top: Node) { + _transformedRect(rect: IRect, top?: Node | null) { var points = [ { x: rect.x, y: rect.y }, { x: rect.x + rect.width, y: rect.y }, { x: rect.x + rect.width, 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); points.forEach(function (point) { var transformed = trans.point(point); @@ -1084,8 +1087,9 @@ export abstract class Node { addChildren(nodes); } } - if (that.nodeType !== UPPER_STAGE) { - addChildren(that.getStage().getChildren()); + const stage = this.getStage(); + if (that.nodeType !== UPPER_STAGE && stage) { + addChildren(stage.getChildren()); } return index; @@ -1150,11 +1154,12 @@ export abstract class Node { * rect.getRelativePointerPosition(); */ getRelativePointerPosition() { - if (!this.getStage()) { + const stage = this.getStage(); + if (!stage) { return null; } // get pointer (say mouse or touch) position - var pos = this.getStage().getPointerPosition(); + var pos = stage.getPointerPosition(); if (!pos) { return null; } @@ -1205,13 +1210,11 @@ export abstract class Node { return absoluteTransform.getTranslation(); } setAbsolutePosition(pos: Vector2d) { - var origTrans = this._clearTransform(); + const { x, y, ...origTrans } = this._clearTransform(); // don't clear translation - this.attrs.x = origTrans.x; - this.attrs.y = origTrans.y; - delete origTrans.x; - delete origTrans.y; + this.attrs.x = x; + this.attrs.y = y; // important, use non cached value this._clearCache(TRANSFORM); @@ -1298,7 +1301,7 @@ export abstract class Node { return this; } _eachAncestorReverse(func, top) { - var family = [], + var family: Array = [], parent = this.getParent(), len, n; @@ -1541,7 +1544,11 @@ export abstract class Node { * // get one of the parent group * var parentGroups = node.findAncestors('Group'); */ - findAncestors(selector: string, includeSelf?: boolean, stopNode?: Node) { + findAncestors( + selector: string | Function, + includeSelf?: boolean, + stopNode?: Node + ) { var res: Array = []; if (includeSelf && this._isMatch(selector)) { @@ -1574,7 +1581,11 @@ export abstract class Node { * // get one of the parent group * 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]; } // is current node match passed selector? @@ -1639,12 +1650,12 @@ export abstract class Node { return this._getCache(STAGE, this._getStage); } - _getStage(): Stage | undefined { + _getStage() { var parent = this.getParent(); if (parent) { return parent.getStage(); } else { - return undefined; + return null; } } /** @@ -1689,7 +1700,7 @@ export abstract class Node { * @name Konva.Node#getAbsoluteTransform * @returns {Konva.Transform} */ - getAbsoluteTransform(top?: Node) { + getAbsoluteTransform(top?: Node | null) { // if using an argument, we can't cache the result. if (top) { return this._getAbsoluteTransform(top); @@ -1756,7 +1767,7 @@ export abstract class Node { // do not cache this calculations, // because it use cache transform // this is special logic for caching with some shapes with shadow - var parent: Node = this; + var parent: Node | null = this; while (parent) { if (parent._isUnderCache) { top = parent; @@ -2071,7 +2082,7 @@ export abstract class Node { pixelRatio?: number; mimeType?: string; quality?: number; - callback?: (blob: Blob) => void; + callback?: (blob: Blob | null) => void; }) { return new Promise((resolve, reject) => { try { @@ -2373,6 +2384,9 @@ export abstract class Node { var pointerId = evt ? evt.pointerId : undefined; var stage = this.getStage(); var ap = this.getAbsolutePosition(); + if (!stage) { + return; + } var pos = stage._getPointerById(pointerId) || stage._changedPointerPositions[0] || @@ -2399,7 +2413,7 @@ export abstract class Node { this._createDragElement(evt); } - const elem = DD._dragElements.get(this._id); + const elem = DD._dragElements.get(this._id)!; elem.dragStatus = 'dragging'; this.fire( 'dragstart', @@ -2415,7 +2429,7 @@ export abstract class Node { _setDragPosition(evt, elem) { // const pointers = this.getStage().getPointersPositions(); // 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) { return; diff --git a/src/Shape.ts b/src/Shape.ts index aa36eb45..fd6b0d27 100644 --- a/src/Shape.ts +++ b/src/Shape.ts @@ -105,7 +105,7 @@ function getDummyContext(): CanvasRenderingContext2D { if (dummyContext) { return dummyContext; } - dummyContext = Util.createCanvasElement().getContext('2d'); + dummyContext = Util.createCanvasElement().getContext('2d')!; return dummyContext; } @@ -210,11 +210,11 @@ export class Shape< getContext() { Util.warn('shape.getContext() method is deprecated. Please do not use it.'); - return this.getLayer().getContext(); + return this.getLayer()!.getContext(); } getCanvas() { Util.warn('shape.getCanvas() method is deprecated. Please do not use it.'); - return this.getLayer().getCanvas(); + return this.getLayer()!.getCanvas(); } getSceneFunc() { @@ -438,13 +438,15 @@ export class Shape< * @returns {Boolean} */ intersects(point) { - var stage = this.getStage(), - bufferHitCanvas = stage.bufferHitCanvas, - p; + var stage = this.getStage(); + if (!stage) { + return false; + } + const bufferHitCanvas = stage.bufferHitCanvas; bufferHitCanvas.getContext().clear(); - this.drawHit(bufferHitCanvas, null, true); - p = bufferHitCanvas.context.getImageData( + this.drawHit(bufferHitCanvas, undefined, true); + const p = bufferHitCanvas.context.getImageData( Math.round(point.x), Math.round(point.y), 1, @@ -456,7 +458,7 @@ export class Shape< destroy() { Node.prototype.destroy.call(this); delete shapes[this.colorKey]; - delete this.colorKey; + delete (this as any).colorKey; return this; } // why do we need buffer canvas? @@ -577,8 +579,8 @@ export class Shape< // 2 - when we are caching current // 3 - when node is cached and we need to draw it into layer - var layer = this.getLayer(), - canvas = can || layer.getCanvas(), + var layer = this.getLayer(); + var canvas = can || layer!.getCanvas(), context = canvas.getContext() as SceneContext, cachedCanvas = this._getCanvasCache(), drawFunc = this.getSceneFunc(), @@ -663,7 +665,7 @@ export class Shape< } var layer = this.getLayer(), - canvas = can || layer.hitCanvas, + canvas = can || layer!.hitCanvas, context = canvas && canvas.getContext(), drawFunc = this.hitFunc() || this.sceneFunc(), cachedCanvas = this._getCanvasCache(), diff --git a/src/Stage.ts b/src/Stage.ts index d1a8075b..a1bbb7cf 100644 --- a/src/Stage.ts +++ b/src/Stage.ts @@ -279,7 +279,7 @@ export class Stage extends Container { stages.splice(index, 1); } - Util.releaseCanvas(this.bufferCanvas._canvas, this.bufferHitCanvas._canvas) + Util.releaseCanvas(this.bufferCanvas._canvas, this.bufferHitCanvas._canvas); return this; } @@ -468,23 +468,27 @@ export class Stage extends Container { ); }); } - _pointerenter(evt) { + _pointerenter(evt: PointerEvent) { this.setPointersPositions(evt); const events = getEventsMap(evt.type); - this._fire(events.pointerenter, { - evt: evt, - target: this, - currentTarget: this, - }); + if (events) { + this._fire(events.pointerenter, { + evt: evt, + target: this, + currentTarget: this, + }); + } } _pointerover(evt) { this.setPointersPositions(evt); const events = getEventsMap(evt.type); - this._fire(events.pointerover, { - evt: evt, - target: this, - currentTarget: this, - }); + if (events) { + this._fire(events.pointerover, { + evt: evt, + target: this, + currentTarget: this, + }); + } } _getTargetShape(evenType) { let shape: Shape | null = this[evenType + 'targetShape']; @@ -525,7 +529,7 @@ export class Stage extends Container { currentTarget: this, }); } - this.pointerPos = undefined; + this.pointerPos = null; this._pointerPositions = []; } _pointerdown(evt: TouchEvent | MouseEvent | PointerEvent) { @@ -545,8 +549,7 @@ export class Stage extends Container { Konva['_' + eventType + 'ListenClick'] = true; // no shape detected? do nothing - const hasShape = shape && shape.isListening(); - if (!hasShape) { + if (!shape || !shape.isListening()) { return; } @@ -587,7 +590,7 @@ export class Stage extends Container { if (!events) { return; } - if (DD.isDragging && DD.node.preventDefault() && evt.cancelable) { + if (DD.isDragging && DD.node!.preventDefault() && evt.cancelable) { evt.preventDefault(); } this.setPointersPositions(evt); @@ -753,7 +756,7 @@ export class Stage extends Container { } _contextmenu(evt) { this.setPointersPositions(evt); - var shape = this.getIntersection(this.getPointerPosition()); + var shape = this.getIntersection(this.getPointerPosition()!); if (shape && shape.isListening()) { shape._fireAndBubble(CONTEXTMENU, { evt: evt }); @@ -768,7 +771,7 @@ export class Stage extends Container { _wheel(evt) { this.setPointersPositions(evt); - var shape = this.getIntersection(this.getPointerPosition()); + var shape = this.getIntersection(this.getPointerPosition()!); if (shape && shape.isListening()) { shape._fireAndBubble(WHEEL, { evt: evt }); @@ -785,7 +788,7 @@ export class Stage extends Container { this.setPointersPositions(evt); const shape = PointerEvents.getCapturedShape(evt.pointerId) || - this.getIntersection(this.getPointerPosition()); + this.getIntersection(this.getPointerPosition()!); if (shape) { shape._fireAndBubble(POINTERUP, PointerEvents.createEvent(evt)); @@ -814,8 +817,8 @@ export class Stage extends Container { */ setPointersPositions(evt) { var contentPosition = this._getContentPosition(), - x = null, - y = null; + x: number | null = null, + y: number | null = null; evt = evt ? evt : window.event; // touch events diff --git a/src/Tween.ts b/src/Tween.ts index 813ee394..45636d60 100644 --- a/src/Tween.ts +++ b/src/Tween.ts @@ -190,9 +190,9 @@ export class Tween { anim: Animation; tween: TweenEngine; _id: number; - onFinish: Function; - onReset: Function; - onUpdate: Function; + onFinish: Function | undefined; + onReset: Function | undefined; + onUpdate: Function | undefined; constructor(config: TweenConfig) { var that = this, @@ -314,7 +314,7 @@ export class Tween { if (n % 2 === 0) { diff.push(end[n] - start[n]); } else { - var startRGBA = Util.colorToRGBA(start[n]); + var startRGBA = Util.colorToRGBA(start[n])!; endRGBA = Util.colorToRGBA(end[n]); start[n] = startRGBA; diff.push({ diff --git a/src/Util.ts b/src/Util.ts index 19da8d5a..5cbcc281 100644 --- a/src/Util.ts +++ b/src/Util.ts @@ -605,7 +605,7 @@ export const Util = { }, // convert any color string to RGBA object // from https://github.com/component/color-parser - colorToRGBA(str: string): RGBA { + colorToRGBA(str: string) { str = str || 'black'; return ( Util._namedColorToRBA(str) || @@ -632,9 +632,9 @@ export const Util = { }; }, // Parse rgb(n, n, n) - _rgbColorToRGBA(str: string): RGBA { + _rgbColorToRGBA(str: string) { if (str.indexOf('rgb(') === 0) { - str = str.match(/rgb\(([^)]+)\)/)[1]; + str = str.match(/rgb\(([^)]+)\)/)![1]; var parts = str.split(/ *, */).map(Number); return { r: parts[0], @@ -645,9 +645,9 @@ export const Util = { } }, // Parse rgba(n, n, n, n) - _rgbaColorToRGBA(str: string): RGBA { + _rgbaColorToRGBA(str: string) { if (str.indexOf('rgba(') === 0) { - str = str.match(/rgba\(([^)]+)\)/)[1]; + str = str.match(/rgba\(([^)]+)\)/)![1]!; var parts = str.split(/ *, */).map((n, index) => { if (n.slice(-1) === '%') { return index === 3 ? parseInt(n) / 100 : (parseInt(n) / 100) * 255; @@ -663,7 +663,7 @@ export const Util = { } }, // Parse #nnnnnnnn - _hex8ColorToRGBA(str: string): RGBA { + _hex8ColorToRGBA(str: string) { if (str[0] === '#' && str.length === 9) { return { r: parseInt(str.slice(1, 3), 16), @@ -674,7 +674,7 @@ export const Util = { } }, // Parse #nnnnnn - _hex6ColorToRGBA(str: string): RGBA { + _hex6ColorToRGBA(str: string) { if (str[0] === '#' && str.length === 7) { return { r: parseInt(str.slice(1, 3), 16), @@ -685,7 +685,7 @@ export const Util = { } }, // Parse #nnnn - _hex4ColorToRGBA(str: string): RGBA { + _hex4ColorToRGBA(str: string) { if (str[0] === '#' && str.length === 5) { return { r: parseInt(str[1] + str[1], 16), @@ -696,7 +696,7 @@ export const Util = { } }, // Parse #nnn - _hex3ColorToRGBA(str: string): RGBA { + _hex3ColorToRGBA(str: string) { if (str[0] === '#' && str.length === 4) { return { 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 - _hslColorToRGBA(str: string): RGBA { + _hslColorToRGBA(str: string) { // Check hsl() format if (/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.test(str)) { // 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 s = Number(hsl[1]) / 100; @@ -905,8 +905,8 @@ export const Util = { }, _prepareArrayForTween(startArray, endArray, isClosed) { var n, - start = [], - end = []; + start: Vector2d[] = [], + end: Vector2d[] = []; if (startArray.length > endArray.length) { var temp = endArray; endArray = startArray; @@ -925,7 +925,7 @@ export const Util = { }); } - var newStart = []; + var newStart: number[] = []; end.forEach(function (point) { var pr = Util._getProjectionToLine(point, start, isClosed); newStart.push(pr.x); @@ -985,22 +985,27 @@ export const Util = { releaseCanvas(...canvases: HTMLCanvasElement[]) { if (!Konva.releaseCanvasOnDestroy) return; - canvases.forEach(c => { + canvases.forEach((c) => { c.width = 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 topRight = 0; let bottomLeft = 0; let bottomRight = 0; if (typeof cornerRadius === 'number') { - topLeft = topRight = bottomLeft = bottomRight = Math.min( - cornerRadius, - width / 2, - height / 2 - ); + topLeft = + topRight = + bottomLeft = + bottomRight = + Math.min(cornerRadius, width / 2, height / 2); } else { topLeft = Math.min(cornerRadius[0] || 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.arc(topLeft, topLeft, topLeft, Math.PI, (Math.PI * 3) / 2, false); - } + }, }; diff --git a/src/filters/Blur.ts b/src/filters/Blur.ts index 8abeab78..ef29f4e4 100644 --- a/src/filters/Blur.ts +++ b/src/filters/Blur.ts @@ -55,519 +55,40 @@ function BlurStack() { } var mul_table = [ - 512, - 512, - 456, - 512, - 328, - 456, - 335, - 512, - 405, - 328, - 271, - 456, - 388, - 335, - 292, - 512, - 454, - 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, + 512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292, + 512, 454, 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 = [ - 9, - 11, - 12, - 13, - 13, - 14, - 14, - 15, - 15, - 15, - 15, - 16, - 16, - 16, - 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, + 9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 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) { @@ -608,8 +129,8 @@ function filterGaussBlurRGBA(imageData, radius) { stackStart = new BlurStack(), stackEnd = null, stack = stackStart, - stackIn = null, - stackOut = null, + stackIn: any = null, + stackOut: any = null, mul_sum = mul_table[radius], shg_sum = shg_table[radius]; @@ -625,7 +146,15 @@ function filterGaussBlurRGBA(imageData, radius) { yw = yi = 0; 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]); g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]); @@ -717,7 +246,15 @@ function filterGaussBlurRGBA(imageData, radius) { } 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; r_out_sum = radiusPlus1 * (pr = pixels[yi]); diff --git a/src/filters/Kaleidoscope.ts b/src/filters/Kaleidoscope.ts index 53a50426..dc13d86c 100644 --- a/src/filters/Kaleidoscope.ts +++ b/src/filters/Kaleidoscope.ts @@ -195,7 +195,7 @@ export const Kaleidoscope: Filter = function (imageData) { tempCanvas.width = xSize; tempCanvas.height = ySize; var scratchData = tempCanvas - .getContext('2d') + .getContext('2d')! .getImageData(0, 0, xSize, ySize); Util.releaseCanvas(tempCanvas); // Convert thhe original to polar coordinates diff --git a/src/filters/Mask.ts b/src/filters/Mask.ts index cb22dc46..e2ff5a85 100644 --- a/src/filters/Mask.ts +++ b/src/filters/Mask.ts @@ -4,7 +4,7 @@ import { getNumberValidator } from '../Validators'; function pixelAt(idata, x, y) { var idx = (y * idata.width + x) * 4; - var d = []; + var d: Array = []; d.push( 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]); // Mask based on color distance - var mask = []; + var mask: Array = []; for (var i = 0; i < idata.width * idata.height; i++) { var d = rgbDistance(mean, [ idata.data[i * 4], @@ -80,7 +80,7 @@ function erodeMask(mask, sw, sh) { var side = Math.round(Math.sqrt(weights.length)); var halfSide = Math.floor(side / 2); - var maskResult = []; + var maskResult: Array = []; for (var y = 0; y < sh; y++) { for (var x = 0; x < 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 halfSide = Math.floor(side / 2); - var maskResult = []; + var maskResult: Array = []; for (var y = 0; y < sh; y++) { for (var x = 0; x < 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 halfSide = Math.floor(side / 2); - var maskResult = []; + var maskResult: Array = []; for (var y = 0; y < sh; y++) { for (var x = 0; x < sw; x++) { var so = y * sw + x; diff --git a/src/shapes/Line.ts b/src/shapes/Line.ts index 09fa8ccb..291a3de5 100644 --- a/src/shapes/Line.ts +++ b/src/shapes/Line.ts @@ -22,7 +22,7 @@ function getControlPoints(x0, y0, x1, y1, x2, y2, t) { function expandPoints(p, tension) { var len = p.length, - allPoints = [], + allPoints: Array = [], n, cp; @@ -51,7 +51,17 @@ function expandPoints(p, tension) { } 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; closed?: boolean; bezier?: boolean; diff --git a/src/shapes/Path.ts b/src/shapes/Path.ts index 55497c2b..1c8e0841 100644 --- a/src/shapes/Path.ts +++ b/src/shapes/Path.ts @@ -33,7 +33,7 @@ export interface PathConfig extends ShapeConfig { * }); */ export class Path extends Shape { - dataArray = []; + dataArray: PathSegment[] = []; pathLength = 0; constructor(config?: PathConfig) { @@ -109,7 +109,7 @@ export class Path extends Shape { } } getSelfRect() { - var points = []; + var points: Array = []; this.dataArray.forEach(function (data) { if (data.command === 'A') { // Approximates by breaking curve into line segments @@ -416,7 +416,14 @@ export class Path extends Shape { 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), sinPsi = Math.sin(psi); var pt = { @@ -496,8 +503,8 @@ export class Path extends Shape { } // create array var arr = cs.split('|'); - var ca = []; - var coords = []; + var ca: PathSegment[] = []; + var coords: string[] = []; // init context point var cpx = 0; var cpy = 0; @@ -517,7 +524,7 @@ export class Path extends Shape { // while ((match = re.exec(str))) { // coords.push(match[0]); // } - var p = []; + var p: number[] = []; for (var j = 0, jlen = coords.length; j < jlen; j++) { // extra case for merged flags @@ -539,8 +546,8 @@ export class Path extends Shape { break; } - var cmd = null; - var points = []; + var cmd: string = ''; + var points: number[] = []; var startX = cpx, startY = cpy; // Move var from within the switch to up here (jshint) @@ -551,20 +558,20 @@ export class Path extends Shape { switch (c) { // Note: Keep the lineTo's above the moveTo's in this switch case 'l': - cpx += p.shift(); - cpy += p.shift(); + cpx += p.shift()!; + cpy += p.shift()!; cmd = 'L'; points.push(cpx, cpy); break; case 'L': - cpx = p.shift(); - cpy = p.shift(); + cpx = p.shift()!; + cpy = p.shift()!; points.push(cpx, cpy); break; // Note: lineTo handlers need to be above this point case 'm': - var dx = p.shift(); - var dy = p.shift(); + var dx = p.shift()!; + var dy = p.shift()!; cpx += dx; cpy += dy; cmd = 'M'; @@ -584,8 +591,8 @@ export class Path extends Shape { // subsequent points are treated as relative lineTo break; case 'M': - cpx = p.shift(); - cpy = p.shift(); + cpx = p.shift()!; + cpy = p.shift()!; cmd = 'M'; points.push(cpx, cpy); c = 'L'; @@ -593,40 +600,40 @@ export class Path extends Shape { break; case 'h': - cpx += p.shift(); + cpx += p.shift()!; cmd = 'L'; points.push(cpx, cpy); break; case 'H': - cpx = p.shift(); + cpx = p.shift()!; cmd = 'L'; points.push(cpx, cpy); break; case 'v': - cpy += p.shift(); + cpy += p.shift()!; cmd = 'L'; points.push(cpx, cpy); break; case 'V': - cpy = p.shift(); + cpy = p.shift()!; cmd = 'L'; points.push(cpx, cpy); break; case 'C': - points.push(p.shift(), p.shift(), p.shift(), p.shift()); - cpx = p.shift(); - cpy = p.shift(); + points.push(p.shift()!, p.shift()!, p.shift()!, p.shift()!); + cpx = p.shift()!; + cpy = p.shift()!; points.push(cpx, cpy); break; case 'c': points.push( - cpx + p.shift(), - cpy + p.shift(), - cpx + p.shift(), - cpy + p.shift() + cpx + p.shift()!, + cpy + p.shift()!, + cpx + p.shift()!, + cpy + p.shift()! ); - cpx += p.shift(); - cpy += p.shift(); + cpx += p.shift()!; + cpy += p.shift()!; cmd = 'C'; points.push(cpx, cpy); break; @@ -638,9 +645,9 @@ export class Path extends Shape { ctlPtx = cpx + (cpx - prevCmd.points[2]); ctlPty = cpy + (cpy - prevCmd.points[3]); } - points.push(ctlPtx, ctlPty, p.shift(), p.shift()); - cpx = p.shift(); - cpy = p.shift(); + points.push(ctlPtx, ctlPty, p.shift()!, p.shift()!); + cpx = p.shift()!; + cpy = p.shift()!; cmd = 'C'; points.push(cpx, cpy); break; @@ -652,22 +659,22 @@ export class Path extends Shape { ctlPtx = cpx + (cpx - prevCmd.points[2]); ctlPty = cpy + (cpy - prevCmd.points[3]); } - points.push(ctlPtx, ctlPty, cpx + p.shift(), cpy + p.shift()); - cpx += p.shift(); - cpy += p.shift(); + points.push(ctlPtx, ctlPty, cpx + p.shift()!, cpy + p.shift()!); + cpx += p.shift()!; + cpy += p.shift()!; cmd = 'C'; points.push(cpx, cpy); break; case 'Q': - points.push(p.shift(), p.shift()); - cpx = p.shift(); - cpy = p.shift(); + points.push(p.shift()!, p.shift()!); + cpx = p.shift()!; + cpy = p.shift()!; points.push(cpx, cpy); break; case 'q': - points.push(cpx + p.shift(), cpy + p.shift()); - cpx += p.shift(); - cpy += p.shift(); + points.push(cpx + p.shift()!, cpy + p.shift()!); + cpx += p.shift()!; + cpy += p.shift()!; cmd = 'Q'; points.push(cpx, cpy); break; @@ -679,8 +686,8 @@ export class Path extends Shape { ctlPtx = cpx + (cpx - prevCmd.points[0]); ctlPty = cpy + (cpy - prevCmd.points[1]); } - cpx = p.shift(); - cpy = p.shift(); + cpx = p.shift()!; + cpy = p.shift()!; cmd = 'Q'; points.push(ctlPtx, ctlPty, cpx, cpy); break; @@ -692,21 +699,21 @@ export class Path extends Shape { ctlPtx = cpx + (cpx - prevCmd.points[0]); ctlPty = cpy + (cpy - prevCmd.points[1]); } - cpx += p.shift(); - cpy += p.shift(); + cpx += p.shift()!; + cpy += p.shift()!; cmd = 'Q'; points.push(ctlPtx, ctlPty, cpx, cpy); break; case 'A': - rx = p.shift(); - ry = p.shift(); - psi = p.shift(); - fa = p.shift(); - fs = p.shift(); + rx = p.shift()!; + ry = p.shift()!; + psi = p.shift()!; + fa = p.shift()!; + fs = p.shift()!; x1 = cpx; y1 = cpy; - cpx = p.shift(); - cpy = p.shift(); + cpx = p.shift()!; + cpy = p.shift()!; cmd = 'A'; points = this.convertEndpointToCenterParameterization( x1, @@ -728,8 +735,8 @@ export class Path extends Shape { fs = p.shift(); x1 = cpx; y1 = cpy; - cpx += p.shift(); - cpy += p.shift(); + cpx += p.shift()!; + cpy += p.shift()!; cmd = 'A'; points = this.convertEndpointToCenterParameterization( x1, @@ -760,7 +767,7 @@ export class Path extends Shape { ca.push({ command: 'z', points: [], - start: undefined, + start: undefined as any, pathLength: 0, }); } diff --git a/src/shapes/RegularPolygon.ts b/src/shapes/RegularPolygon.ts index 9c727939..e9ce01cc 100644 --- a/src/shapes/RegularPolygon.ts +++ b/src/shapes/RegularPolygon.ts @@ -1,6 +1,6 @@ import { Factory } from '../Factory'; import { Shape, ShapeConfig } from '../Shape'; -import { GetSet } from '../types'; +import { GetSet, Vector2d } from '../types'; import { getNumberValidator } from '../Validators'; import { _registerNode } from '../Global'; import { Context } from '../Context'; @@ -45,9 +45,9 @@ export class RegularPolygon extends Shape { context.fillStrokeShape(this); } _getPoints() { - const sides = this.attrs.sides; + const sides = this.attrs.sides as number; const radius = this.attrs.radius || 0; - const points = []; + const points: Vector2d[] = []; for (var n = 0; n < sides; n++) { points.push({ x: radius * Math.sin((n * 2 * Math.PI) / sides), diff --git a/src/shapes/Text.ts b/src/shapes/Text.ts index 9cf42e2c..902c7df5 100644 --- a/src/shapes/Text.ts +++ b/src/shapes/Text.ts @@ -112,7 +112,7 @@ function _strokeFunc(context: Context) { context.strokeText(this._partialText, this._partialTextX, this._partialTextY); } -function checkDefaultFill(config: TextConfig) { +function checkDefaultFill(config?: TextConfig) { config = config || {}; // set default color to black diff --git a/src/shapes/TextPath.ts b/src/shapes/TextPath.ts index 72aaa6b3..150f8f8c 100644 --- a/src/shapes/TextPath.ts +++ b/src/shapes/TextPath.ts @@ -7,7 +7,7 @@ import { Text, stringToArray } from './Text'; import { getNumberValidator } from '../Validators'; import { _registerNode } from '../Global'; -import { GetSet, Vector2d } from '../types'; +import { GetSet, PathSegment, Vector2d } from '../types'; export interface TextPathConfig extends ShapeConfig { text?: string; @@ -74,7 +74,7 @@ function _strokeFunc(context) { */ export class TextPath extends Shape { dummyCanvas = Util.createCanvasElement(); - dataArray = []; + dataArray: PathSegment[] = []; glyphInfo: Array<{ transposeX: number; transposeY: number; @@ -221,7 +221,7 @@ export class TextPath extends Shape { _getTextSize(text: string) { var dummyCanvas = this.dummyCanvas; - var _context = dummyCanvas.getContext('2d'); + var _context = dummyCanvas.getContext('2d')!; _context.save(); @@ -338,7 +338,7 @@ export class TextPath extends Shape { height: 0, }; } - var points = []; + var points: number[] = []; this.glyphInfo.forEach(function (info) { points.push(info.p0.x); diff --git a/src/shapes/Transformer.ts b/src/shapes/Transformer.ts index 7947b32e..97a61c9a 100644 --- a/src/shapes/Transformer.ts +++ b/src/shapes/Transformer.ts @@ -21,7 +21,7 @@ export interface TransformerConfig extends ContainerConfig { rotationSnaps?: Array; rotationSnapTolerance?: number; rotateAnchorOffset?: number; - rotateAnchorCursor?: string, + rotateAnchorCursor?: string; borderEnabled?: boolean; borderStroke?: string; borderStrokeWidth?: number; @@ -239,7 +239,7 @@ function getSnap(snaps: Array, newRotationRad: number, tol: number) { export class Transformer extends Group { _nodes: Array; - _movingAnchorName: string; + _movingAnchorName: string | null = null; _transforming = false; _anchorDragOffset: Vector2d; sin: number; @@ -478,7 +478,7 @@ export class Transformer extends Group { }; } - const totalPoints = []; + const totalPoints: Vector2d[] = []; this.nodes().map((node) => { const box = node.getClientRect({ skipTransform: true, @@ -501,7 +501,10 @@ export class Transformer extends Group { const tr = new Transform(); 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) { var transformed = tr.point(point); if (minX === undefined) { @@ -585,13 +588,13 @@ export class Transformer extends Group { var rad = Konva.getAngle(this.rotation()); var rotateCursor = this.rotateAnchorCursor(); var cursor = getCursor(name, rad, rotateCursor); - anchor.getStage().content && - (anchor.getStage().content.style.cursor = cursor); + anchor.getStage()!.content && + (anchor.getStage()!.content.style.cursor = cursor); this._cursorChange = true; }); anchor.on('mouseout', () => { - anchor.getStage().content && - (anchor.getStage().content.style.cursor = ''); + anchor.getStage()!.content && + (anchor.getStage()!.content.style.cursor = ''); this._cursorChange = false; }); this.add(anchor); @@ -688,12 +691,12 @@ export class Transformer extends Group { } _handleMouseMove(e) { var x, y, newHypotenuse; - var anchorNode = this.findOne('.' + this._movingAnchorName); - var stage = anchorNode.getStage(); + var anchorNode = this.findOne('.' + this._movingAnchorName)!; + var stage = anchorNode.getStage()!; stage.setPointersPositions(e); - const pp = stage.getPointerPosition(); + const pp = stage.getPointerPosition()!; let newNodePos = { x: pp.x - this._anchorDragOffset.x, y: pp.y - this._anchorDragOffset.y, @@ -759,26 +762,26 @@ export class Transformer extends Group { y: this.height() / 2, } : { - x: this.findOne('.bottom-right').x(), - y: this.findOne('.bottom-right').y(), + x: this.findOne('.bottom-right')!.x(), + y: this.findOne('.bottom-right')!.y(), }; newHypotenuse = Math.sqrt( Math.pow(comparePoint.x - anchorNode.x(), 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; y = newHypotenuse * this.sin * reverseY; - this.findOne('.top-left').x(comparePoint.x - x); - this.findOne('.top-left').y(comparePoint.y - y); + this.findOne('.top-left')!.x(comparePoint.x - x); + this.findOne('.top-left')!.y(comparePoint.y - y); } } 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') { if (keepProportion) { var comparePoint = centeredScaling @@ -787,8 +790,8 @@ export class Transformer extends Group { y: this.height() / 2, } : { - x: this.findOne('.bottom-left').x(), - y: this.findOne('.bottom-left').y(), + x: this.findOne('.bottom-left')!.x(), + y: this.findOne('.bottom-left')!.y(), }; newHypotenuse = Math.sqrt( @@ -796,23 +799,25 @@ export class Transformer extends Group { 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; y = newHypotenuse * this.sin * reverseY; - this.findOne('.top-right').x(comparePoint.x + x); - this.findOne('.top-right').y(comparePoint.y - y); + this.findOne('.top-right')!.x(comparePoint.x + x); + this.findOne('.top-right')!.y(comparePoint.y - y); } var pos = anchorNode.position(); - this.findOne('.top-left').y(pos.y); - this.findOne('.bottom-right').x(pos.x); + this.findOne('.top-left')!.y(pos.y); + this.findOne('.bottom-right')!.x(pos.x); } 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') { - this.findOne('.bottom-right').x(anchorNode.x()); + this.findOne('.bottom-right')!.x(anchorNode.x()); } else if (this._movingAnchorName === 'bottom-left') { if (keepProportion) { var comparePoint = centeredScaling @@ -821,8 +826,8 @@ export class Transformer extends Group { y: this.height() / 2, } : { - x: this.findOne('.top-right').x(), - y: this.findOne('.top-right').y(), + x: this.findOne('.top-right')!.x(), + y: this.findOne('.top-right')!.y(), }; newHypotenuse = Math.sqrt( @@ -843,10 +848,10 @@ export class Transformer extends Group { pos = anchorNode.position(); - this.findOne('.top-left').x(pos.x); - this.findOne('.bottom-right').y(pos.y); + this.findOne('.top-left')!.x(pos.x); + this.findOne('.bottom-right')!.y(pos.y); } 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') { if (keepProportion) { var comparePoint = centeredScaling @@ -855,8 +860,8 @@ export class Transformer extends Group { y: this.height() / 2, } : { - x: this.findOne('.top-left').x(), - y: this.findOne('.top-left').y(), + x: this.findOne('.top-left')!.x(), + y: this.findOne('.top-left')!.y(), }; newHypotenuse = Math.sqrt( @@ -865,16 +870,16 @@ export class Transformer extends Group { ); var reverseX = - this.findOne('.bottom-right').x() < comparePoint.x ? -1 : 1; + this.findOne('.bottom-right')!.x() < comparePoint.x ? -1 : 1; 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; y = newHypotenuse * this.sin * reverseY; - this.findOne('.bottom-right').x(comparePoint.x + x); - this.findOne('.bottom-right').y(comparePoint.y + y); + this.findOne('.bottom-right')!.x(comparePoint.x + x); + this.findOne('.bottom-right')!.y(comparePoint.y + y); } } else { console.error( @@ -887,8 +892,8 @@ export class Transformer extends Group { var centeredScaling = this.centeredScaling() || e.altKey; if (centeredScaling) { - var topLeft = this.findOne('.top-left'); - var bottomRight = this.findOne('.bottom-right'); + var topLeft = this.findOne('.top-left')!; + var bottomRight = this.findOne('.bottom-right')!; var topOffsetX = topLeft.x(); 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; y = absPos.y; var width = - this.findOne('.bottom-right').x() - this.findOne('.top-left').x(); + this.findOne('.bottom-right')!.x() - this.findOne('.top-left')!.x(); var height = - this.findOne('.bottom-right').y() - this.findOne('.top-left').y(); + this.findOne('.bottom-right')!.y() - this.findOne('.top-left')!.y(); this._fitNodesInto( { @@ -1088,7 +1093,7 @@ export class Transformer extends Group { // [delta transform] * [parent transform] * [old local transform] = [parent transform] * [new local transform] // and we need to find [new local transform] // [new local] = [parent inverted] * [delta] * [parent] * [old local] - const parentTransform = node.getParent().getAbsoluteTransform(); + const parentTransform = node.getParent()!.getAbsoluteTransform(); const localTransform = node.getTransform().copy(); // skip offset: localTransform.translate(node.offsetX(), node.offsetY()); @@ -1109,7 +1114,7 @@ export class Transformer extends Group { this.rotation(Util._getRotation(newAttrs.rotation)); this._resetTransformCache(); this.update(); - this.getLayer().batchDraw(); + this.getLayer()!.batchDraw(); } /** * force update of Konva.Transformer. @@ -1123,7 +1128,7 @@ export class Transformer extends Group { } _batchChangeChild(selector: string, attrs: any) { - const anchor = this.findOne(selector); + const anchor = this.findOne(selector)!; anchor.setAttrs(attrs); } @@ -1256,7 +1261,7 @@ export class Transformer extends Group { } destroy() { 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); this.detach(); diff --git a/src/types.ts b/src/types.ts index f71b2bb2..6ce992fe 100644 --- a/src/types.ts +++ b/src/types.ts @@ -31,7 +31,7 @@ export interface PathSegment { | 'a' | 'A'; start: Vector2d; - points: Vector2d[]; + points: number[]; pathLength: number; } diff --git a/test/unit/Node-test.ts b/test/unit/Node-test.ts index 50d6a46b..599254b6 100644 --- a/test/unit/Node-test.ts +++ b/test/unit/Node-test.ts @@ -2396,6 +2396,9 @@ describe('Node', function () { assert.equal(group3.getAbsoluteZIndex(), 5); assert.equal(group4.getAbsoluteZIndex(), 6); assert.equal(shape2.getAbsoluteZIndex(), 7); + + const tempLayer = new Konva.Layer(); + assert.equal(tempLayer.getAbsoluteZIndex(), 0); }); // ====================================================== diff --git a/tsconfig.json b/tsconfig.json index 69361d4d..83ad40e0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,14 +2,14 @@ "compilerOptions": { "outDir": "lib", "module": "CommonJS", - "target": "ES2015", + "target": "ES2018", // "sourceMap": true, "noEmitOnError": true, "lib": ["ES2015", "dom"], "moduleResolution": "node", "declaration": true, "removeComments": false, - "strictNullChecks": false, + "strictNullChecks": true, }, "include": ["./src/**/*.ts"] }