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

Merge pull request #1830 from tbo47/var-to-const-or-let
Some checks failed
Test Browser / build (16.x) (push) Has been cancelled
Details
Test NodeJS / build (16.x) (push) Has been cancelled
Details

Browse Source 
var to const or let
This commit is contained in:
Anton Lavrenov 2024-10-08 21:53:27 -05:00 committed by GitHub
commit 16bd91bba1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
49 changed files with 717 additions and 718 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Animation.ts
View File

@ -212,7 +212,7 @@ export class Animation {
}
}
for (let key in layerHash) {
for (const key in layerHash) {
if (!layerHash.hasOwnProperty(key)) {
continue;
}

3
src/BezierFunctions.ts
View File

@ -692,7 +692,6 @@ export const cValues = [
export const binomialCoefficients = [[1], [1, 1], [1, 2, 1], [1, 3, 3, 1]];
export const getCubicArcLength = (xs: number[], ys: number[], t: number) => {
let z: number;
let sum: number;
let correctedT: number;
@ -702,7 +701,7 @@ export const getCubicArcLength = (xs: number[], ys: number[], t: number) => {
const n = 20;
z = t / 2;
const z = t / 2;
sum = 0;
for (let i = 0; i < n; i++) {
correctedT = z * tValues[n][i] + z;

18
src/Canvas.ts
View File

@ -5,15 +5,15 @@ import { Factory } from './Factory';
import { getNumberValidator } from './Validators';
// calculate pixel ratio
var _pixelRatio;
let _pixelRatio;
function getDevicePixelRatio() {
if (_pixelRatio) {
return _pixelRatio;
}
var canvas = Util.createCanvasElement();
var context = canvas.getContext('2d') as any;
const canvas = Util.createCanvasElement();
const context = canvas.getContext('2d') as any;
_pixelRatio = (function () {
var devicePixelRatio = Konva._global.devicePixelRatio || 1,
const devicePixelRatio = Konva._global.devicePixelRatio || 1,
backingStoreRatio =
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
@ -55,9 +55,9 @@ export class Canvas {
isCache = false;
constructor(config: ICanvasConfig) {
var conf = config || {};
const conf = config || {};
var pixelRatio =
const pixelRatio =
conf.pixelRatio || Konva.pixelRatio || getDevicePixelRatio();
this.pixelRatio = pixelRatio;
@ -86,7 +86,7 @@ export class Canvas {
return this.pixelRatio;
}
setPixelRatio(pixelRatio) {
var previousRatio = this.pixelRatio;
const previousRatio = this.pixelRatio;
this.pixelRatio = pixelRatio;
this.setSize(
this.getWidth() / previousRatio,
@ -98,7 +98,7 @@ export class Canvas {
this.width = this._canvas.width = width * this.pixelRatio;
this._canvas.style.width = width + 'px';
var pixelRatio = this.pixelRatio,
const pixelRatio = this.pixelRatio,
_context = this.getContext()._context;
_context.scale(pixelRatio, pixelRatio);
}
@ -106,7 +106,7 @@ export class Canvas {
// take into account pixel ratio
this.height = this._canvas.height = height * this.pixelRatio;
this._canvas.style.height = height + 'px';
var pixelRatio = this.pixelRatio,
const pixelRatio = this.pixelRatio,
_context = this.getContext()._context;
_context.scale(pixelRatio, pixelRatio);
}

58
src/Container.ts
View File

@ -56,7 +56,7 @@ export abstract class Container<
}
const children = this.children || [];
var results: Array<ChildType> = [];
const results: Array<ChildType> = [];
children.forEach(function (child) {
if (filterFunc(child)) {
results.push(child);
@ -128,7 +128,7 @@ export abstract class Container<
return this;
}
if (children.length > 1) {
for (var i = 0; i < children.length; i++) {
for (let i = 0; i < children.length; i++) {
this.add(children[i]);
}
return this;
@ -223,14 +223,14 @@ export abstract class Container<
findOne<ChildNode extends Node = Node>(
selector: string | Function
): ChildNode | undefined {
var result = this._generalFind<ChildNode>(selector, true);
const result = this._generalFind<ChildNode>(selector, true);
return result.length > 0 ? result[0] : undefined;
}
_generalFind<ChildNode extends Node>(
selector: string | Function,
findOne: boolean
) {
var retArr: Array<ChildNode> = [];
const retArr: Array<ChildNode> = [];
this._descendants((node) => {
const valid = node._isMatch(selector);
@ -265,7 +265,7 @@ export abstract class Container<
}
// extenders
toObject() {
var obj = Node.prototype.toObject.call(this);
const obj = Node.prototype.toObject.call(this);
obj.children = [];
@ -283,7 +283,7 @@ export abstract class Container<
* @param {Konva.Node} node
*/
isAncestorOf(node: Node) {
var parent = node.getParent();
let parent = node.getParent();
while (parent) {
if (parent._id === this._id) {
return true;
@ -295,7 +295,7 @@ export abstract class Container<
}
clone(obj?: any) {
// call super method
var node = Node.prototype.clone.call(this, obj);
const node = Node.prototype.clone.call(this, obj);
this.getChildren().forEach(function (no) {
node.add(no.clone());
@ -316,7 +316,7 @@ export abstract class Container<
* @returns {Array} array of shapes
*/
getAllIntersections(pos) {
var arr: Shape[] = [];
const arr: Shape[] = [];
this.find<Shape>('Shape').forEach((shape) => {
if (shape.isVisible() && shape.intersects(pos)) {
@ -344,20 +344,20 @@ export abstract class Container<
this._requestDraw();
}
drawScene(can?: SceneCanvas, top?: Node, bufferCanvas?: SceneCanvas) {
var layer = this.getLayer()!,
const layer = this.getLayer()!,
canvas = can || (layer && layer.getCanvas()),
context = canvas && canvas.getContext(),
cachedCanvas = this._getCanvasCache(),
cachedSceneCanvas = cachedCanvas && cachedCanvas.scene;
var caching = canvas && canvas.isCache;
const caching = canvas && canvas.isCache;
if (!this.isVisible() && !caching) {
return this;
}
if (cachedSceneCanvas) {
context.save();
var m = this.getAbsoluteTransform(top).getMatrix();
const m = this.getAbsoluteTransform(top).getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
this._drawCachedSceneCanvas(context);
context.restore();
@ -371,7 +371,7 @@ export abstract class Container<
return this;
}
var layer = this.getLayer()!,
const layer = this.getLayer()!,
canvas = can || (layer && layer.hitCanvas),
context = canvas && canvas.getContext(),
cachedCanvas = this._getCanvasCache(),
@ -379,7 +379,7 @@ export abstract class Container<
if (cachedHitCanvas) {
context.save();
var m = this.getAbsoluteTransform(top).getMatrix();
const m = this.getAbsoluteTransform(top).getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
this._drawCachedHitCanvas(context);
context.restore();
@ -389,7 +389,7 @@ export abstract class Container<
return this;
}
_drawChildren(drawMethod, canvas, top, bufferCanvas?) {
var context = canvas && canvas.getContext(),
const context = canvas && canvas.getContext(),
clipWidth = this.clipWidth(),
clipHeight = this.clipHeight(),
clipFunc = this.clipFunc(),
@ -401,16 +401,16 @@ export abstract class Container<
if (hasClip) {
context.save();
var transform = this.getAbsoluteTransform(top);
var m = transform.getMatrix();
const transform = this.getAbsoluteTransform(top);
let m = transform.getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
context.beginPath();
let clipArgs;
if (clipFunc) {
clipArgs = clipFunc.call(this, context, this);
} else {
var clipX = this.clipX();
var clipY = this.clipY();
const clipX = this.clipX();
const clipY = this.clipY();
context.rect(clipX || 0, clipY || 0, clipWidth, clipHeight);
}
context.clip.apply(context, clipArgs);
@ -418,7 +418,7 @@ export abstract class Container<
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
var hasComposition =
const hasComposition =
!selfCache &&
this.globalCompositeOperation() !== 'source-over' &&
drawMethod === 'drawScene';
@ -448,24 +448,24 @@ export abstract class Container<
relativeTo?: Container<Node>;
} = {}
): IRect {
var skipTransform = config.skipTransform;
var relativeTo = config.relativeTo;
const skipTransform = config.skipTransform;
const relativeTo = config.relativeTo;
var minX, minY, maxX, maxY;
var selfRect = {
let minX, minY, maxX, maxY;
let selfRect = {
x: Infinity,
y: Infinity,
width: 0,
height: 0,
};
var that = this;
const that = this;
this.children?.forEach(function (child) {
// skip invisible children
if (!child.visible()) {
return;
}
var rect = child.getClientRect({
const rect = child.getClientRect({
relativeTo: that,
skipShadow: config.skipShadow,
skipStroke: config.skipStroke,
@ -491,10 +491,10 @@ export abstract class Container<
});
// if child is group we need to make sure it has visible shapes inside
var shapes = this.find('Shape');
var hasVisible = false;
for (var i = 0; i < shapes.length; i++) {
var shape = shapes[i];
const shapes = this.find('Shape');
let hasVisible = false;
for (let i = 0; i < shapes.length; i++) {
const shape = shapes[i];
if (shape._isVisible(this)) {
hasVisible = true;
break;

54
src/Context.ts
View File

@ -6,7 +6,7 @@ import { IRect } from './types';
import type { Node } from './Node';
function simplifyArray(arr: Array<any>) {
var retArr: Array<any> = [],
let retArr: Array<any> = [],
len = arr.length,
util = Util,
n,
@ -26,7 +26,7 @@ function simplifyArray(arr: Array<any>) {
return retArr;
}
var COMMA = ',',
const COMMA = ',',
OPEN_PAREN = '(',
CLOSE_PAREN = ')',
OPEN_PAREN_BRACKET = '([',
@ -71,7 +71,7 @@ var COMMA = ',',
'translate',
];
var CONTEXT_PROPERTIES = [
const CONTEXT_PROPERTIES = [
'fillStyle',
'strokeStyle',
'shadowColor',
@ -124,7 +124,7 @@ interface ExtendedCanvasRenderingContext2D extends CanvasRenderingContext2D {
export class Context {
canvas: Canvas;
_context: CanvasRenderingContext2D;
traceArr: Array<String>;
traceArr: Array<string>;
constructor(canvas: Canvas) {
this.canvas = canvas;
@ -183,7 +183,7 @@ export class Context {
}
getTrace(relaxed?: boolean, rounded?: boolean) {
var traceArr = this.traceArr,
let traceArr = this.traceArr,
len = traceArr.length,
str = '',
n,
@ -231,7 +231,7 @@ export class Context {
this.traceArr = [];
}
_trace(str) {
var traceArr = this.traceArr,
let traceArr = this.traceArr,
len;
traceArr.push(str);
@ -247,7 +247,7 @@ export class Context {
* @name Konva.Context#reset
*/
reset() {
var pixelRatio = this.getCanvas().getPixelRatio();
const pixelRatio = this.getCanvas().getPixelRatio();
this.setTransform(1 * pixelRatio, 0, 0, 1 * pixelRatio, 0, 0);
}
/**
@ -270,7 +270,7 @@ export class Context {
* @param {Number} [bounds.height]
*/
clear(bounds?: IRect) {
var canvas = this.getCanvas();
const canvas = this.getCanvas();
if (bounds) {
this.clearRect(
@ -295,7 +295,7 @@ export class Context {
}
}
_applyOpacity(shape: Node) {
var absOpacity = shape.getAbsoluteOpacity();
const absOpacity = shape.getAbsoluteOpacity();
if (absOpacity !== 1) {
this.setAttr('globalAlpha', absOpacity);
}
@ -391,7 +391,7 @@ export class Context {
* @name Konva.Context#createImageData
*/
createImageData(width, height) {
var a = arguments;
const a = arguments;
if (a.length === 2) {
return this._context.createImageData(width, height);
} else if (a.length === 1) {
@ -446,7 +446,7 @@ export class Context {
dHeight?: number
) {
// this._context.drawImage(...arguments);
var a = arguments,
const a = arguments,
_context = this._context;
if (a.length === 3) {
_context.drawImage(image, sx, sy);
@ -728,15 +728,15 @@ export class Context {
this._context.translate(x, y);
}
_enableTrace() {
var that = this,
let that = this,
len = CONTEXT_METHODS.length,
origSetter = this.setAttr,
n,
args;
// to prevent creating scope function at each loop
var func = function (methodName) {
var origMethod = that[methodName],
const func = function (methodName) {
let origMethod = that[methodName],
ret;
that[methodName] = function () {
@ -759,8 +759,8 @@ export class Context {
// attrs
that.setAttr = function () {
origSetter.apply(that, arguments as any);
var prop = arguments[0];
var val = arguments[1];
const prop = arguments[0];
let val = arguments[1];
if (
prop === 'shadowOffsetX' ||
prop === 'shadowOffsetY' ||
@ -776,7 +776,7 @@ export class Context {
}
_applyGlobalCompositeOperation(node) {
const op = node.attrs.globalCompositeOperation;
var def = !op || op === 'source-over';
const def = !op || op === 'source-over';
if (!def) {
this.setAttr('globalCompositeOperation', op);
}
@ -810,7 +810,7 @@ export class SceneContext extends Context {
}) as CanvasRenderingContext2D;
}
_fillColor(shape: Shape) {
var fill = shape.fill();
const fill = shape.fill();
this.setAttr('fillStyle', fill);
shape._fillFunc(this);
@ -820,7 +820,7 @@ export class SceneContext extends Context {
shape._fillFunc(this);
}
_fillLinearGradient(shape: Shape) {
var grd = shape._getLinearGradient();
const grd = shape._getLinearGradient();
if (grd) {
this.setAttr('fillStyle', grd);
@ -881,21 +881,21 @@ export class SceneContext extends Context {
if (colorStops) {
// build color stops
for (var n = 0; n < colorStops.length; n += 2) {
for (let n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n] as number, colorStops[n + 1] as string);
}
this.setAttr('strokeStyle', grd);
}
}
_stroke(shape) {
var dash = shape.dash(),
const dash = shape.dash(),
// ignore strokeScaleEnabled for Text
strokeScaleEnabled = shape.getStrokeScaleEnabled();
if (shape.hasStroke()) {
if (!strokeScaleEnabled) {
this.save();
var pixelRatio = this.getCanvas().getPixelRatio();
const pixelRatio = this.getCanvas().getPixelRatio();
this.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
}
@ -911,7 +911,7 @@ export class SceneContext extends Context {
this.setAttr('shadowColor', 'rgba(0,0,0,0)');
}
var hasLinearGradient = shape.getStrokeLinearGradientColorStops();
const hasLinearGradient = shape.getStrokeLinearGradientColorStops();
if (hasLinearGradient) {
this._strokeLinearGradient(shape);
} else {
@ -926,7 +926,7 @@ export class SceneContext extends Context {
}
}
_applyShadow(shape) {
var color = shape.getShadowRGBA() ?? 'black',
const color = shape.getShadowRGBA() ?? 'black',
blur = shape.getShadowBlur() ?? 5,
offset = shape.getShadowOffset() ?? {
x: 0,
@ -971,13 +971,13 @@ export class HitContext extends Context {
const strokeScaleEnabled = shape.getStrokeScaleEnabled();
if (!strokeScaleEnabled) {
this.save();
var pixelRatio = this.getCanvas().getPixelRatio();
const pixelRatio = this.getCanvas().getPixelRatio();
this.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
}
this._applyLineCap(shape);
var hitStrokeWidth = shape.hitStrokeWidth();
var strokeWidth =
const hitStrokeWidth = shape.hitStrokeWidth();
const strokeWidth =
hitStrokeWidth === 'auto' ? shape.strokeWidth() : hitStrokeWidth;
this.setAttr('lineWidth', strokeWidth);

8
src/DragAndDrop.ts
View File

@ -6,7 +6,7 @@ import { Util } from './Util';
export const DD = {
get isDragging() {
var flag = false;
let flag = false;
DD._dragElements.forEach((elem) => {
if (elem.dragStatus === 'dragging') {
flag = true;
@ -17,7 +17,7 @@ export const DD = {
justDragged: false,
get node() {
// return first dragging node
var node: Node | undefined;
let node: Node | undefined;
DD._dragElements.forEach((elem) => {
node = elem.node;
});
@ -62,8 +62,8 @@ export const DD = {
return;
}
if (elem.dragStatus !== 'dragging') {
var dragDistance = node.dragDistance();
var distance = Math.max(
const dragDistance = node.dragDistance();
const distance = Math.max(
Math.abs(pos.x - elem.startPointerPos.x),
Math.abs(pos.y - elem.startPointerPos.y)
);

32
src/Factory.ts
View File

@ -2,7 +2,7 @@ import { Node } from './Node';
import { Util } from './Util';
import { getComponentValidator } from './Validators';
var GET = 'get',
const GET = 'get',
SET = 'set';
export const Factory = {
@ -12,25 +12,25 @@ export const Factory = {
Factory.addOverloadedGetterSetter(constructor, attr);
},
addGetter(constructor, attr, def?) {
var method = GET + Util._capitalize(attr);
const method = GET + Util._capitalize(attr);
constructor.prototype[method] =
constructor.prototype[method] ||
function (this: Node) {
var val = this.attrs[attr];
const val = this.attrs[attr];
return val === undefined ? def : val;
};
},
addSetter(constructor, attr, validator?, after?) {
var method = SET + Util._capitalize(attr);
const method = SET + Util._capitalize(attr);
if (!constructor.prototype[method]) {
Factory.overWriteSetter(constructor, attr, validator, after);
}
},
overWriteSetter(constructor, attr, validator?, after?) {
var method = SET + Util._capitalize(attr);
const method = SET + Util._capitalize(attr);
constructor.prototype[method] = function (val) {
if (validator && val !== undefined && val !== null) {
val = validator.call(this, val, attr);
@ -52,7 +52,7 @@ export const Factory = {
validator?: Function,
after?: Function
) {
var len = components.length,
let len = components.length,
capitalize = Util._capitalize,
getter = GET + capitalize(attr),
setter = SET + capitalize(attr),
@ -61,7 +61,7 @@ export const Factory = {
// getter
constructor.prototype[getter] = function () {
var ret = {};
const ret = {};
for (n = 0; n < len; n++) {
component = components[n];
@ -71,11 +71,11 @@ export const Factory = {
return ret;
};
var basicValidator = getComponentValidator(components);
const basicValidator = getComponentValidator(components);
// setter
constructor.prototype[setter] = function (val) {
var oldVal = this.attrs[attr],
let oldVal = this.attrs[attr],
key;
if (validator) {
@ -110,7 +110,7 @@ export const Factory = {
Factory.addOverloadedGetterSetter(constructor, attr);
},
addOverloadedGetterSetter(constructor, attr) {
var capitalizedAttr = Util._capitalize(attr),
const capitalizedAttr = Util._capitalize(attr),
setter = SET + capitalizedAttr,
getter = GET + capitalizedAttr;
@ -127,14 +127,14 @@ export const Factory = {
addDeprecatedGetterSetter(constructor, attr, def, validator) {
Util.error('Adding deprecated ' + attr);
var method = GET + Util._capitalize(attr);
const method = GET + Util._capitalize(attr);
var message =
const message =
attr +
' property is deprecated and will be removed soon. Look at Konva change log for more information.';
constructor.prototype[method] = function () {
Util.error(message);
var val = this.attrs[attr];
const val = this.attrs[attr];
return val === undefined ? def : val;
};
Factory.addSetter(constructor, attr, validator, function () {
@ -144,9 +144,9 @@ export const Factory = {
},
backCompat(constructor, methods) {
Util.each(methods, function (oldMethodName, newMethodName) {
var method = constructor.prototype[newMethodName];
var oldGetter = GET + Util._capitalize(oldMethodName);
var oldSetter = SET + Util._capitalize(oldMethodName);
const method = constructor.prototype[newMethodName];
const oldGetter = GET + Util._capitalize(oldMethodName);
const oldSetter = SET + Util._capitalize(oldMethodName);
function deprecated(this: Node) {
method.apply(this, arguments);

2
src/Group.ts
View File

@ -19,7 +19,7 @@ export interface GroupConfig extends ContainerConfig {}
*/
export class Group extends Container<Group | Shape> {
_validateAdd(child: Node) {
var type = child.getType();
const type = child.getType();
if (type !== 'Group' && type !== 'Shape') {
Util.throw('You may only add groups and shapes to groups.');
}

34
src/Layer.ts
View File

@ -18,7 +18,7 @@ export interface LayerConfig extends ContainerConfig {
}
// constants
var HASH = '#',
const HASH = '#',
BEFORE_DRAW = 'beforeDraw',
DRAW = 'draw',
/*
@ -116,7 +116,7 @@ export class Layer extends Container<Group | Shape> {
// extend Node.prototype.setZIndex
setZIndex(index) {
super.setZIndex(index);
var stage = this.getStage();
const stage = this.getStage();
if (stage && stage.content) {
stage.content.removeChild(this.getNativeCanvasElement());
@ -133,7 +133,7 @@ export class Layer extends Container<Group | Shape> {
}
moveToTop() {
Node.prototype.moveToTop.call(this);
var stage = this.getStage();
const stage = this.getStage();
if (stage && stage.content) {
stage.content.removeChild(this.getNativeCanvasElement());
stage.content.appendChild(this.getNativeCanvasElement());
@ -141,11 +141,11 @@ export class Layer extends Container<Group | Shape> {
return true;
}
moveUp() {
var moved = Node.prototype.moveUp.call(this);
const moved = Node.prototype.moveUp.call(this);
if (!moved) {
return false;
}
var stage = this.getStage();
const stage = this.getStage();
if (!stage || !stage.content) {
return false;
}
@ -164,9 +164,9 @@ export class Layer extends Container<Group | Shape> {
// extend Node.prototype.moveDown
moveDown() {
if (Node.prototype.moveDown.call(this)) {
var stage = this.getStage();
const stage = this.getStage();
if (stage) {
var children = stage.children;
const children = stage.children;
if (stage.content) {
stage.content.removeChild(this.getNativeCanvasElement());
stage.content.insertBefore(
@ -182,9 +182,9 @@ export class Layer extends Container<Group | Shape> {
// extend Node.prototype.moveToBottom
moveToBottom() {
if (Node.prototype.moveToBottom.call(this)) {
var stage = this.getStage();
const stage = this.getStage();
if (stage) {
var children = stage.children;
const children = stage.children;
if (stage.content) {
stage.content.removeChild(this.getNativeCanvasElement());
stage.content.insertBefore(
@ -201,7 +201,7 @@ export class Layer extends Container<Group | Shape> {
return this;
}
remove() {
var _canvas = this.getNativeCanvasElement();
const _canvas = this.getNativeCanvasElement();
Node.prototype.remove.call(this);
@ -220,7 +220,7 @@ export class Layer extends Container<Group | Shape> {
return this;
}
_validateAdd(child) {
var type = child.getType();
const type = child.getType();
if (type !== 'Group' && type !== 'Shape') {
Util.throw('You may only add groups and shapes to a layer.');
}
@ -325,8 +325,8 @@ export class Layer extends Container<Group | Shape> {
}
// in some cases antialiased area may be bigger than 1px
// it is possible if we will cache node, then scale it a lot
var spiralSearchDistance = 1;
var continueSearch = false;
let spiralSearchDistance = 1;
let continueSearch = false;
while (true) {
for (let i = 0; i < INTERSECTION_OFFSETS_LEN; i++) {
const intersectionOffset = INTERSECTION_OFFSETS[i];
@ -386,7 +386,7 @@ export class Layer extends Container<Group | Shape> {
return {};
}
drawScene(can?: SceneCanvas, top?: Node) {
var layer = this.getLayer(),
const layer = this.getLayer(),
canvas = can || (layer && layer.getCanvas());
this._fire(BEFORE_DRAW, {
@ -406,7 +406,7 @@ export class Layer extends Container<Group | Shape> {
return this;
}
drawHit(can?: HitCanvas, top?: Node) {
var layer = this.getLayer(),
const layer = this.getLayer(),
canvas = can || (layer && layer.hitCanvas);
if (layer && layer.clearBeforeDraw()) {
@ -460,8 +460,8 @@ export class Layer extends Container<Group | Shape> {
if (!this.parent || !this.parent['content']) {
return;
}
var parent = this.parent as any;
var added = !!this.hitCanvas._canvas.parentNode;
const parent = this.parent as any;
const added = !!this.hitCanvas._canvas.parentNode;
if (added) {
parent.content.removeChild(this.hitCanvas._canvas);
} else {

174
src/Node.ts
View File

@ -77,7 +77,7 @@ export interface NodeConfig {
}
// CONSTANTS
var ABSOLUTE_OPACITY = 'absoluteOpacity',
const ABSOLUTE_OPACITY = 'absoluteOpacity',
ALL_LISTENERS = 'allEventListeners',
ABSOLUTE_TRANSFORM = 'absoluteTransform',
ABSOLUTE_SCALE = 'absoluteScale',
@ -193,12 +193,12 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
}
}
_getCache(attr: string, privateGetter: Function) {
var cache = this._cache.get(attr);
let cache = this._cache.get(attr);
// for transform the cache can be NOT empty
// but we still need to recalculate it if it is dirty
var isTransform = attr === TRANSFORM || attr === ABSOLUTE_TRANSFORM;
var invalid = cache === undefined || (isTransform && cache.dirty === true);
const isTransform = attr === TRANSFORM || attr === ABSOLUTE_TRANSFORM;
const invalid = cache === undefined || (isTransform && cache.dirty === true);
// if not cached, we need to set it using the private getter method.
if (invalid) {
@ -311,8 +311,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
imageSmoothingEnabled?: boolean;
hitCanvasPixelRatio?: number;
}) {
var conf = config || {};
var rect = {} as IRect;
const conf = config || {};
let rect = {} as IRect;
// don't call getClientRect if we have all attributes
// it means call it only if have one undefined
@ -327,7 +327,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
relativeTo: this.getParent() || undefined,
});
}
var width = Math.ceil(conf.width || rect.width),
let width = Math.ceil(conf.width || rect.width),
height = Math.ceil(conf.height || rect.height),
pixelRatio = conf.pixelRatio,
x = conf.x === undefined ? Math.floor(rect.x) : conf.x,
@ -365,7 +365,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
// console.log({ x, y, width, height }, rect);
var cachedSceneCanvas = new SceneCanvas({
const cachedSceneCanvas = new SceneCanvas({
pixelRatio: pixelRatio,
width: width,
height: height,
@ -498,19 +498,19 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
throw new Error('abstract "getClientRect" method call');
}
_transformedRect(rect: IRect, top?: Node | null) {
var points = [
const 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 = Infinity,
let minX: number = Infinity,
minY: number = Infinity,
maxX: number = -Infinity,
maxY: number = -Infinity;
var trans = this.getAbsoluteTransform(top);
const trans = this.getAbsoluteTransform(top);
points.forEach(function (point) {
var transformed = trans.point(point);
const transformed = trans.point(point);
if (minX === undefined) {
minX = maxX = transformed.x;
minY = maxY = transformed.y;
@ -535,8 +535,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
const canvasCache = this._getCanvasCache();
context.translate(canvasCache.x, canvasCache.y);
var cacheCanvas = this._getCachedSceneCanvas();
var ratio = cacheCanvas.pixelRatio;
const cacheCanvas = this._getCachedSceneCanvas();
const ratio = cacheCanvas.pixelRatio;
context.drawImage(
cacheCanvas._canvas,
@ -548,7 +548,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
context.restore();
}
_drawCachedHitCanvas(context: Context) {
var canvasCache = this._getCanvasCache(),
const canvasCache = this._getCanvasCache(),
hitCanvas = canvasCache.hit;
context.save();
context.translate(canvasCache.x, canvasCache.y);
@ -562,7 +562,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
context.restore();
}
_getCachedSceneCanvas() {
var filters = this.filters(),
let filters = this.filters(),
cachedCanvas = this._getCanvasCache(),
sceneCanvas = cachedCanvas.scene,
filterCanvas = cachedCanvas.filter,
@ -574,7 +574,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
if (filters) {
if (!this._filterUpToDate) {
var ratio = sceneCanvas.pixelRatio;
const ratio = sceneCanvas.pixelRatio;
filterCanvas.setSize(
sceneCanvas.width / sceneCanvas.pixelRatio,
sceneCanvas.height / sceneCanvas.pixelRatio
@ -697,7 +697,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
if (arguments.length === 3) {
return this._delegate.apply(this, arguments as any);
}
var events = (evtStr as string).split(SPACE),
let events = (evtStr as string).split(SPACE),
len = events.length,
n,
event,
@ -751,7 +751,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* node.off('click.foo');
*/
off(evtStr?: string, callback?: Function) {
var events = (evtStr || '').split(SPACE),
let events = (evtStr || '').split(SPACE),
len = events.length,
n,
t,
@ -788,7 +788,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
}
// some event aliases for third party integration like HammerJS
dispatchEvent(evt: any) {
var e = {
const e = {
target: this,
type: evt.type,
evt: evt,
@ -809,10 +809,10 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
}
// like node.on
_delegate(event: string, selector: string, handler: (e: Event) => void) {
var stopNode = this;
const stopNode = this;
this.on(event, function (evt) {
var targets = evt.target.findAncestors(selector, true, stopNode);
for (var i = 0; i < targets.length; i++) {
const targets = evt.target.findAncestors(selector, true, stopNode);
for (let i = 0; i < targets.length; i++) {
evt = Util.cloneObject(evt);
evt.currentTarget = targets[i] as any;
handler.call(targets[i], evt as any);
@ -850,7 +850,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
// traversal must be cleared when removing a node
this._clearCaches();
var parent = this.getParent();
const parent = this.getParent();
if (parent && parent.children) {
parent.children.splice(this.index, 1);
@ -881,7 +881,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* var x = node.getAttr('x');
*/
getAttr(attr: string) {
var method = 'get' + Util._capitalize(attr);
const method = 'get' + Util._capitalize(attr);
if (Util._isFunction((this as any)[method])) {
return (this as any)[method]();
}
@ -899,7 +899,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* })
*/
getAncestors() {
var parent = this.getParent(),
let parent = this.getParent(),
ancestors: Array<Node> = [];
while (parent) {
@ -932,7 +932,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
*/
setAttrs(config: any) {
this._batchTransformChanges(() => {
var key, method;
let key, method;
if (!config) {
return this;
}
@ -1016,9 +1016,9 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
if (top) {
return this._isVisible(top) && this._isListening(top);
}
var layer = this.getLayer();
const layer = this.getLayer();
var layerUnderDrag = false;
let layerUnderDrag = false;
DD._dragElements.forEach((elem) => {
if (elem.dragStatus !== 'dragging') {
return;
@ -1029,7 +1029,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
}
});
var dragSkip =
const dragSkip =
!skipDragCheck &&
!Konva.hitOnDragEnabled &&
(layerUnderDrag || Konva.isTransforming());
@ -1067,7 +1067,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* @returns {Integer}
*/
getAbsoluteZIndex() {
var depth = this.getDepth(),
let depth = this.getDepth(),
that = this,
index = 0,
nodes,
@ -1111,7 +1111,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* @returns {Integer}
*/
getDepth() {
var depth = 0,
let depth = 0,
parent = this.parent;
while (parent) {
@ -1167,11 +1167,11 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
return null;
}
// get pointer (say mouse or touch) position
var pos = stage.getPointerPosition();
const pos = stage.getPointerPosition();
if (!pos) {
return null;
}
var transform = this.getAbsoluteTransform().copy();
const transform = this.getAbsoluteTransform().copy();
// to detect relative position we need to invert transform
transform.invert();
// now we can find relative point
@ -1207,7 +1207,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
// "true" is not a node, but it will just allow skip all caching
top = true as any;
}
var absoluteMatrix = this.getAbsoluteTransform(top).getMatrix(),
const absoluteMatrix = this.getAbsoluteTransform(top).getMatrix(),
absoluteTransform = new Transform(),
offset = this.offset();
@ -1226,7 +1226,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
// important, use non cached value
this._clearCache(TRANSFORM);
var it = this._getAbsoluteTransform().copy();
const it = this._getAbsoluteTransform().copy();
it.invert();
it.translate(pos.x, pos.y);
@ -1242,7 +1242,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
return this;
}
_setTransform(trans) {
var key;
let key;
for (key in trans) {
this.attrs[key] = trans[key];
@ -1251,7 +1251,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
// this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
}
_clearTransform() {
var trans = {
const trans = {
x: this.x(),
y: this.y(),
rotation: this.rotation(),
@ -1292,7 +1292,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* });
*/
move(change: Vector2d) {
var changeX = change.x,
let changeX = change.x,
changeY = change.y,
x = this.x(),
y = this.y();
@ -1309,7 +1309,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
return this;
}
_eachAncestorReverse(func, top) {
var family: Array<Node> = [],
let family: Array<Node> = [],
parent = this.getParent(),
len,
n;
@ -1356,7 +1356,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
Util.warn('Node has no parent. moveToTop function is ignored.');
return false;
}
var index = this.index,
const index = this.index,
len = this.parent.getChildren().length;
if (index < len - 1) {
this.parent.children.splice(index, 1);
@ -1377,7 +1377,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
Util.warn('Node has no parent. moveUp function is ignored.');
return false;
}
var index = this.index,
const index = this.index,
len = this.parent.getChildren().length;
if (index < len - 1) {
this.parent.children.splice(index, 1);
@ -1398,7 +1398,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
Util.warn('Node has no parent. moveDown function is ignored.');
return false;
}
var index = this.index;
const index = this.index;
if (index > 0) {
this.parent.children.splice(index, 1);
this.parent.children.splice(index - 1, 0, this);
@ -1418,7 +1418,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
Util.warn('Node has no parent. moveToBottom function is ignored.');
return false;
}
var index = this.index;
const index = this.index;
if (index > 0) {
this.parent.children.splice(index, 1);
this.parent.children.unshift(this);
@ -1441,7 +1441,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
'.'
);
}
var index = this.index;
const index = this.index;
this.parent.children.splice(index, 1);
this.parent.children.splice(zIndex, 0, this);
this.parent._setChildrenIndices();
@ -1457,8 +1457,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
return this._getCache(ABSOLUTE_OPACITY, this._getAbsoluteOpacity);
}
_getAbsoluteOpacity() {
var absOpacity = this.opacity();
var parent = this.getParent();
let absOpacity = this.opacity();
const parent = this.getParent();
if (parent && !parent._isUnderCache) {
absOpacity *= parent.getAbsoluteOpacity();
}
@ -1489,7 +1489,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* @returns {Object}
*/
toObject() {
var attrs = this.getAttrs() as any,
let attrs = this.getAttrs() as any,
key,
val,
getter,
@ -1562,12 +1562,12 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
includeSelf?: boolean,
stopNode?: Node
) {
var res: Array<Node> = [];
const res: Array<Node> = [];
if (includeSelf && this._isMatch(selector)) {
res.push(this);
}
var ancestor = this.parent;
let ancestor = this.parent;
while (ancestor) {
if (ancestor === stopNode) {
return res;
@ -1609,7 +1609,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
if (typeof selector === 'function') {
return selector(this);
}
var selectorArr = selector.replace(/ /g, '').split(','),
let selectorArr = selector.replace(/ /g, '').split(','),
len = selectorArr.length,
n,
sel;
@ -1650,7 +1650,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* @returns {Konva.Layer}
*/
getLayer(): Layer | null {
var parent = this.getParent();
const parent = this.getParent();
return parent ? parent.getLayer() : null;
}
/**
@ -1664,7 +1664,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
}
_getStage() {
var parent = this.getParent();
const parent = this.getParent();
if (parent) {
return parent.getStage();
} else {
@ -1726,13 +1726,13 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
}
}
_getAbsoluteTransform(top?: Node) {
var at: Transform;
let at: Transform;
// we we need position relative to an ancestor, we will iterate for all
if (top) {
at = new Transform();
// start with stage and traverse downwards to self
this._eachAncestorReverse(function (node: Node) {
var transformsEnabled = node.transformsEnabled();
const transformsEnabled = node.transformsEnabled();
if (transformsEnabled === 'all') {
at.multiply(node.getTransform());
@ -1750,7 +1750,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
} else {
at.reset();
}
var transformsEnabled = this.transformsEnabled();
const transformsEnabled = this.transformsEnabled();
if (transformsEnabled === 'all') {
at.multiply(this.getTransform());
} else if (transformsEnabled === 'position') {
@ -1780,7 +1780,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
// do not cache this calculations,
// because it use cache transform
// this is special logic for caching with some shapes with shadow
var parent: Node | null = this;
let parent: Node | null = this;
while (parent) {
if (parent._isUnderCache) {
top = parent;
@ -1827,13 +1827,13 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
return this._getCache(TRANSFORM, this._getTransform) as Transform;
}
_getTransform(): Transform {
var m: Transform = this._cache.get(TRANSFORM) || new Transform();
const m: Transform = this._cache.get(TRANSFORM) || new Transform();
m.reset();
// I was trying to use attributes directly here
// but it doesn't work for Transformer well
// because it overwrite x,y getters
var x = this.x(),
const x = this.x(),
y = this.y(),
rotation = Konva.getAngle(this.rotation()),
scaleX = this.attrs.scaleX ?? 1,
@ -1882,7 +1882,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
*/
clone(obj?: any) {
// instantiate new node
var attrs = Util.cloneObject(this.attrs),
let attrs = Util.cloneObject(this.attrs),
key,
allListeners,
len,
@ -1893,7 +1893,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
attrs[key] = obj[key];
}
var node = new (<any>this.constructor)(attrs);
const node = new (<any>this.constructor)(attrs);
// copy over listeners
for (key in this.eventListeners) {
allListeners = this.eventListeners[key];
@ -1918,9 +1918,9 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
_toKonvaCanvas(config) {
config = config || {};
var box = this.getClientRect();
const box = this.getClientRect();
var stage = this.getStage(),
const stage = this.getStage(),
x = config.x !== undefined ? config.x : Math.floor(box.x),
y = config.y !== undefined ? config.y : Math.floor(box.y),
pixelRatio = config.pixelRatio || 1,
@ -2013,9 +2013,9 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
callback?: (str: string) => void;
}) {
config = config || {};
var mimeType = config.mimeType || null,
const mimeType = config.mimeType || null,
quality = config.quality || null;
var url = this._toKonvaCanvas(config).toDataURL(mimeType, quality);
const url = this._toKonvaCanvas(config).toDataURL(mimeType, quality);
if (config.callback) {
config.callback(url);
}
@ -2163,7 +2163,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
}
}
_off(type, name?, callback?) {
var evtListeners = this.eventListeners[type],
let evtListeners = this.eventListeners[type],
i,
evtName,
handler;
@ -2209,8 +2209,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
*/
addName(name) {
if (!this.hasName(name)) {
var oldName = this.name();
var newName = oldName ? oldName + ' ' + name : name;
const oldName = this.name();
const newName = oldName ? oldName + ' ' + name : name;
this.name(newName);
}
return this;
@ -2236,7 +2236,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
return false;
}
// if name is '' the "names" will be [''], so I added extra check above
var names = (fullName || '').split(/\s/g);
const names = (fullName || '').split(/\s/g);
return names.indexOf(name) !== -1;
}
/**
@ -2252,8 +2252,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* node.name(); // return 'red'
*/
removeName(name) {
var names = (this.name() || '').split(/\s/g);
var index = names.indexOf(name);
const names = (this.name() || '').split(/\s/g);
const index = names.indexOf(name);
if (index !== -1) {
names.splice(index, 1);
this.name(names.join(' '));
@ -2271,7 +2271,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* node.setAttr('x', 5);
*/
setAttr(attr, val) {
var func = this[SET + Util._capitalize(attr)];
const func = this[SET + Util._capitalize(attr)];
if (Util._isFunction(func)) {
func.call(this, val);
@ -2288,7 +2288,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
}
}
_setAttr(key, val) {
var oldVal = this.attrs[key];
const oldVal = this.attrs[key];
if (oldVal === val && !Util.isObject(val)) {
return;
}
@ -2303,7 +2303,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
this._requestDraw();
}
_setComponentAttr(key, component, val) {
var oldVal;
let oldVal;
if (val !== undefined) {
oldVal = this.attrs[key];
@ -2321,7 +2321,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
evt.target = this;
}
var shouldStop =
const shouldStop =
(eventType === MOUSEENTER || eventType === MOUSELEAVE) &&
((compareShape &&
(this === compareShape ||
@ -2332,7 +2332,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
this._fire(eventType, evt);
// simulate event bubbling
var stopBubble =
const stopBubble =
(eventType === MOUSEENTER || eventType === MOUSELEAVE) &&
compareShape &&
compareShape.isAncestorOf &&
@ -2407,13 +2407,13 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
// drag & drop
_createDragElement(evt) {
var pointerId = evt ? evt.pointerId : undefined;
var stage = this.getStage();
var ap = this.getAbsolutePosition();
const pointerId = evt ? evt.pointerId : undefined;
const stage = this.getStage();
const ap = this.getAbsolutePosition();
if (!stage) {
return;
}
var pos =
const pos =
stage._getPointerById(pointerId) ||
stage._changedPointerPositions[0] ||
ap;
@ -2460,12 +2460,12 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
if (!pos) {
return;
}
var newNodePos = {
let newNodePos = {
x: pos.x - elem.offset.x,
y: pos.y - elem.offset.y,
};
var dbf = this.dragBoundFunc();
const dbf = this.dragBoundFunc();
if (dbf !== undefined) {
const bounded = dbf.call(this, newNodePos, evt);
if (!bounded) {
@ -2522,8 +2522,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
this._dragCleanup();
this.on('mousedown.konva touchstart.konva', function (evt) {
var shouldCheckButton = evt.evt['button'] !== undefined;
var canDrag =
const shouldCheckButton = evt.evt['button'] !== undefined;
const canDrag =
!shouldCheckButton || Konva.dragButtons.indexOf(evt.evt['button']) >= 0;
if (!canDrag) {
return;
@ -2532,7 +2532,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
return;
}
var hasDraggingChild = false;
let hasDraggingChild = false;
DD._dragElements.forEach((elem) => {
if (this.isAncestorOf(elem.node)) {
hasDraggingChild = true;
@ -2558,7 +2558,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* if this node is currently in
* drag and drop mode
*/
var stage = this.getStage();
const stage = this.getStage();
if (!stage) {
return;
}
@ -2700,7 +2700,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
}
static _createNode(obj, container?) {
var className = Node.prototype.getClassName.call(obj),
let className = Node.prototype.getClassName.call(obj),
children = obj.children,
no,
len,

62
src/Shape.ts
View File

@ -94,11 +94,11 @@ export type FillFuncOutput =
| [Path2D | CanvasFillRule]
| [Path2D, CanvasFillRule];
var HAS_SHADOW = 'hasShadow';
var SHADOW_RGBA = 'shadowRGBA';
var patternImage = 'patternImage';
var linearGradient = 'linearGradient';
var radialGradient = 'radialGradient';
const HAS_SHADOW = 'hasShadow';
const SHADOW_RGBA = 'shadowRGBA';
const patternImage = 'patternImage';
const linearGradient = 'linearGradient';
const radialGradient = 'radialGradient';
let dummyContext: CanvasRenderingContext2D;
function getDummyContext(): CanvasRenderingContext2D {
@ -255,7 +255,7 @@ export class Shape<
}
__getFillPattern() {
if (this.fillPatternImage()) {
var ctx = getDummyContext();
const ctx = getDummyContext();
const pattern = ctx.createPattern(
this.fillPatternImage(),
this.fillPatternRepeat() || 'repeat'
@ -294,16 +294,16 @@ export class Shape<
return this._getCache(linearGradient, this.__getLinearGradient);
}
__getLinearGradient() {
var colorStops = this.fillLinearGradientColorStops();
const colorStops = this.fillLinearGradientColorStops();
if (colorStops) {
var ctx = getDummyContext();
const ctx = getDummyContext();
var start = this.fillLinearGradientStartPoint();
var end = this.fillLinearGradientEndPoint();
var grd = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
const start = this.fillLinearGradientStartPoint();
const end = this.fillLinearGradientEndPoint();
const grd = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
// build color stops
for (var n = 0; n < colorStops.length; n += 2) {
for (let n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n] as number, colorStops[n + 1] as string);
}
return grd;
@ -314,13 +314,13 @@ export class Shape<
return this._getCache(radialGradient, this.__getRadialGradient);
}
__getRadialGradient() {
var colorStops = this.fillRadialGradientColorStops();
const colorStops = this.fillRadialGradientColorStops();
if (colorStops) {
var ctx = getDummyContext();
const ctx = getDummyContext();
var start = this.fillRadialGradientStartPoint();
var end = this.fillRadialGradientEndPoint();
var grd = ctx.createRadialGradient(
const start = this.fillRadialGradientStartPoint();
const end = this.fillRadialGradientEndPoint();
const grd = ctx.createRadialGradient(
start.x,
start.y,
this.fillRadialGradientStartRadius(),
@ -330,7 +330,7 @@ export class Shape<
);
// build color stops
for (var n = 0; n < colorStops.length; n += 2) {
for (let n = 0; n < colorStops.length; n += 2) {
grd.addColorStop(colorStops[n] as number, colorStops[n + 1] as string);
}
return grd;
@ -343,7 +343,7 @@ export class Shape<
if (!this.hasShadow()) {
return;
}
var rgba = Util.colorToRGBA(this.shadowColor());
const rgba = Util.colorToRGBA(this.shadowColor());
if (rgba) {
return (
'rgba(' +
@ -443,7 +443,7 @@ export class Shape<
* @returns {Boolean}
*/
intersects(point) {
var stage = this.getStage();
const stage = this.getStage();
if (!stage) {
return false;
}
@ -524,7 +524,7 @@ export class Shape<
*
*/
getSelfRect() {
var size = this.size();
const size = this.size();
return {
x: this._centroid ? -size.width / 2 : 0,
y: this._centroid ? -size.height / 2 : 0,
@ -593,8 +593,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();
var canvas = can || layer!.getCanvas(),
const layer = this.getLayer();
let canvas = can || layer!.getCanvas(),
context = canvas.getContext() as SceneContext,
cachedCanvas = this._getCanvasCache(),
drawFunc = this.getSceneFunc(),
@ -602,8 +602,8 @@ export class Shape<
stage,
bufferContext;
var skipBuffer = canvas.isCache;
var cachingSelf = top === this;
const skipBuffer = canvas.isCache;
const cachingSelf = top === this;
if (!this.isVisible() && !cachingSelf) {
return this;
@ -612,7 +612,7 @@ export class Shape<
if (cachedCanvas) {
context.save();
var m = this.getAbsoluteTransform(top).getMatrix();
const m = this.getAbsoluteTransform(top).getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
this._drawCachedSceneCanvas(context);
context.restore();
@ -639,7 +639,7 @@ export class Shape<
drawFunc.call(this, bufferContext, this);
bufferContext.restore();
var ratio = bc.pixelRatio;
const ratio = bc.pixelRatio;
if (hasShadow) {
context._applyShadow(this);
@ -671,7 +671,7 @@ export class Shape<
return this;
}
var layer = this.getLayer(),
const layer = this.getLayer(),
canvas = can || layer!.hitCanvas,
context = canvas && canvas.getContext(),
drawFunc = this.hitFunc() || this.sceneFunc(),
@ -687,7 +687,7 @@ export class Shape<
if (cachedHitCanvas) {
context.save();
var m = this.getAbsoluteTransform(top).getMatrix();
const m = this.getAbsoluteTransform(top).getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
this._drawCachedHitCanvas(context);
@ -702,7 +702,7 @@ export class Shape<
const selfCache = this === top;
if (!selfCache) {
var o = this.getAbsoluteTransform(top).getMatrix();
const o = this.getAbsoluteTransform(top).getMatrix();
context.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
}
drawFunc.call(this, context, this);
@ -722,7 +722,7 @@ export class Shape<
* shape.drawHitFromCache();
*/
drawHitFromCache(alphaThreshold = 0) {
var cachedCanvas = this._getCanvasCache(),
let cachedCanvas = this._getCanvasCache(),
sceneCanvas = this._getCachedSceneCanvas(),
hitCanvas = cachedCanvas.hit,
hitContext = hitCanvas.getContext(),

56
src/Stage.ts
View File

@ -15,7 +15,7 @@ export interface StageConfig extends ContainerConfig {
}
// CONSTANTS
var STAGE = 'Stage',
const STAGE = 'Stage',
STRING = 'string',
PX = 'px',
MOUSEOUT = 'mouseout',
@ -215,7 +215,7 @@ export class Stage extends Container<Layer> {
setContainer(container) {
if (typeof container === STRING) {
if (container.charAt(0) === '.') {
var className = container.slice(1);
const className = container.slice(1);
container = document.getElementsByClassName(className)[0];
} else {
var id;
@ -249,7 +249,7 @@ export class Stage extends Container<Layer> {
* @name Konva.Stage#clear
*/
clear() {
var layers = this.children,
let layers = this.children,
len = layers.length,
n;
@ -270,11 +270,11 @@ export class Stage extends Container<Layer> {
destroy() {
super.destroy();
var content = this.content;
const content = this.content;
if (content && Util._isInDocument(content)) {
this.container().removeChild(content);
}
var index = stages.indexOf(this);
const index = stages.indexOf(this);
if (index > -1) {
stages.splice(index, 1);
}
@ -322,13 +322,13 @@ export class Stage extends Container<Layer> {
config.width = config.width || this.width();
config.height = config.height || this.height();
var canvas = new SceneCanvas({
const canvas = new SceneCanvas({
width: config.width,
height: config.height,
pixelRatio: config.pixelRatio || 1,
});
var _context = canvas.getContext()._context;
var layers = this.children;
const _context = canvas.getContext()._context;
const layers = this.children;
if (config.x || config.y) {
_context.translate(-1 * config.x, -1 * config.y);
@ -338,7 +338,7 @@ export class Stage extends Container<Layer> {
if (!layer.isVisible()) {
return;
}
var layerCanvas = layer._toKonvaCanvas(config);
const layerCanvas = layer._toKonvaCanvas(config);
_context.drawImage(
layerCanvas._canvas,
config.x,
@ -367,7 +367,7 @@ export class Stage extends Container<Layer> {
if (!pos) {
return null;
}
var layers = this.children,
let layers = this.children,
len = layers.length,
end = len - 1,
n;
@ -382,8 +382,8 @@ export class Stage extends Container<Layer> {
return null;
}
_resizeDOM() {
var width = this.width();
var height = this.height();
const width = this.width();
const height = this.height();
if (this.content) {
// set content dimensions
this.content.style.width = width + PX;
@ -401,14 +401,14 @@ export class Stage extends Container<Layer> {
}
add(layer: Layer, ...rest) {
if (arguments.length > 1) {
for (var i = 0; i < arguments.length; i++) {
for (let i = 0; i < arguments.length; i++) {
this.add(arguments[i]);
}
return this;
}
super.add(layer);
var length = this.children.length;
const length = this.children.length;
if (length > MAX_LAYERS_NUMBER) {
Util.warn(
'The stage has ' +
@ -507,8 +507,8 @@ export class Stage extends Container<Layer> {
}
this.setPointersPositions(evt);
var targetShape = this._getTargetShape(eventType);
var eventsEnabled =
const targetShape = this._getTargetShape(eventType);
const eventsEnabled =
!(Konva.isDragging() || Konva.isTransforming()) || Konva.hitOnDragEnabled;
if (targetShape && eventsEnabled) {
targetShape._fireAndBubble(events.pointerout, { evt: evt });
@ -543,9 +543,9 @@ export class Stage extends Container<Layer> {
}
this.setPointersPositions(evt);
var triggeredOnShape = false;
let triggeredOnShape = false;
this._changedPointerPositions.forEach((pos) => {
var shape = this.getIntersection(pos);
const shape = this.getIntersection(pos);
DD.justDragged = false;
// probably we are staring a click
Konva['_' + eventType + 'ListenClick'] = true;
@ -598,22 +598,22 @@ export class Stage extends Container<Layer> {
}
this.setPointersPositions(evt);
var eventsEnabled =
const eventsEnabled =
!(Konva.isDragging() || Konva.isTransforming()) || Konva.hitOnDragEnabled;
if (!eventsEnabled) {
return;
}
var processedShapesIds = {};
const processedShapesIds = {};
let triggeredOnShape = false;
var targetShape = this._getTargetShape(eventType);
const targetShape = this._getTargetShape(eventType);
this._changedPointerPositions.forEach((pos) => {
const shape = (PointerEvents.getCapturedShape(pos.id) ||
this.getIntersection(pos)) as Shape;
const pointerId = pos.id;
const event = { evt: evt, pointerId };
var differentTarget = targetShape !== shape;
const differentTarget = targetShape !== shape;
if (differentTarget && targetShape) {
targetShape._fireAndBubble(events.pointerout, { ...event }, shape);
@ -667,7 +667,7 @@ export class Stage extends Container<Layer> {
this.setPointersPositions(evt);
const clickStartShape = this[eventType + 'ClickStartShape'];
const clickEndShape = this[eventType + 'ClickEndShape'];
var processedShapesIds = {};
const processedShapesIds = {};
let triggeredOnShape = false;
this._changedPointerPositions.forEach((pos) => {
const shape = (PointerEvents.getCapturedShape(pos.id) ||
@ -760,7 +760,7 @@ export class Stage extends Container<Layer> {
}
_contextmenu(evt) {
this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition()!);
const shape = this.getIntersection(this.getPointerPosition()!);
if (shape && shape.isListening()) {
shape._fireAndBubble(CONTEXTMENU, { evt: evt });
@ -775,7 +775,7 @@ export class Stage extends Container<Layer> {
_wheel(evt) {
this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition()!);
const shape = this.getIntersection(this.getPointerPosition()!);
if (shape && shape.isListening()) {
shape._fireAndBubble(WHEEL, { evt: evt });
@ -820,7 +820,7 @@ export class Stage extends Container<Layer> {
* });
*/
setPointersPositions(evt) {
var contentPosition = this._getContentPosition(),
let contentPosition = this._getContentPosition(),
x: number | null = null,
y: number | null = null;
evt = evt ? evt : window.event;
@ -879,7 +879,7 @@ export class Stage extends Container<Layer> {
};
}
var rect = this.content.getBoundingClientRect();
const rect = this.content.getBoundingClientRect();
return {
top: rect.top,
@ -904,7 +904,7 @@ export class Stage extends Container<Layer> {
if (!Konva.isBrowser) {
return;
}
var container = this.container();
const container = this.container();
if (!container) {
throw 'Stage has no container. A container is required.';
}

42
src/Tween.ts
View File

@ -4,7 +4,7 @@ import { Node, NodeConfig } from './Node';
import { Konva } from './Global';
import { Line } from './shapes/Line';
var blacklist = {
let blacklist = {
node: 1,
duration: 1,
easing: 1,
@ -58,7 +58,7 @@ class TweenEngine {
this.pause();
}
fire(str) {
var handler = this[str];
const handler = this[str];
if (handler) {
handler();
}
@ -133,7 +133,7 @@ class TweenEngine {
this.fire('onUpdate');
}
onEnterFrame() {
var t = this.getTimer() - this._startTime;
const t = this.getTimer() - this._startTime;
if (this.state === PLAYING) {
this.setTime(t);
} else if (this.state === REVERSING) {
@ -195,7 +195,7 @@ export class Tween {
onUpdate: Function | undefined;
constructor(config: TweenConfig) {
var that = this,
let that = this,
node = config.node as any,
nodeId = node._id,
duration,
@ -214,7 +214,7 @@ export class Tween {
this.node = node;
this._id = idCounter++;
var layers =
const layers =
node.getLayer() ||
(node instanceof Konva['Stage'] ? node.getLayers() : null);
if (!layers) {
@ -266,7 +266,7 @@ export class Tween {
this.onUpdate = config.onUpdate;
}
_addAttr(key, end) {
var node = this.node,
let node = this.node,
nodeId = node._id,
start,
diff,
@ -314,7 +314,7 @@ export class Tween {
if (n % 2 === 0) {
diff.push(end[n] - start[n]);
} else {
var startRGBA = Util.colorToRGBA(start[n])!;
const startRGBA = Util.colorToRGBA(start[n])!;
endRGBA = Util.colorToRGBA(end[n]);
start[n] = startRGBA;
diff.push({
@ -353,7 +353,7 @@ export class Tween {
Tween.tweens[nodeId][key] = this._id;
}
_tweenFunc(i) {
var node = this.node,
let node = this.node,
attrs = Tween.attrs[node._id][this._id],
key,
attr,
@ -428,10 +428,10 @@ export class Tween {
this.anim.stop();
};
this.tween.onFinish = () => {
var node = this.node as Node;
const node = this.node as Node;
// after tweening points of line we need to set original end
var attrs = Tween.attrs[node._id][this._id];
const attrs = Tween.attrs[node._id][this._id];
if (attrs.points && attrs.points.trueEnd) {
node.setAttr('points', attrs.points.trueEnd);
}
@ -441,9 +441,9 @@ export class Tween {
}
};
this.tween.onReset = () => {
var node = this.node as any;
const node = this.node as any;
// after tweening points of line we need to set original start
var attrs = Tween.attrs[node._id][this._id];
const attrs = Tween.attrs[node._id][this._id];
if (attrs.points && attrs.points.trueStart) {
node.points(attrs.points.trueStart);
}
@ -525,7 +525,7 @@ export class Tween {
* @name Konva.Tween#destroy
*/
destroy() {
var nodeId = this.node._id,
let nodeId = this.node._id,
thisId = this._id,
attrs = Tween.tweens[nodeId],
key;
@ -555,7 +555,7 @@ export class Tween {
* });
*/
Node.prototype.to = function (params) {
var onFinish = params.onFinish;
const onFinish = params.onFinish;
params.node = this;
params.onFinish = function () {
this.destroy();
@ -563,7 +563,7 @@ Node.prototype.to = function (params) {
onFinish();
}
};
var tween = new Tween(params as any);
const tween = new Tween(params as any);
tween.play();
};
@ -583,7 +583,7 @@ export const Easings = {
* @memberof Konva.Easings
*/
BackEaseIn(t, b, c, d) {
var s = 1.70158;
const s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
/**
@ -592,7 +592,7 @@ export const Easings = {
* @memberof Konva.Easings
*/
BackEaseOut(t, b, c, d) {
var s = 1.70158;
const s = 1.70158;
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
/**
@ -601,7 +601,7 @@ export const Easings = {
* @memberof Konva.Easings
*/
BackEaseInOut(t, b, c, d) {
var s = 1.70158;
let s = 1.70158;
if ((t /= d / 2) < 1) {
return (c / 2) * (t * t * (((s *= 1.525) + 1) * t - s)) + b;
}
@ -614,7 +614,7 @@ export const Easings = {
*/
ElasticEaseIn(t, b, c, d, a, p) {
// added s = 0
var s = 0;
let s = 0;
if (t === 0) {
return b;
}
@ -645,7 +645,7 @@ export const Easings = {
*/
ElasticEaseOut(t, b, c, d, a, p) {
// added s = 0
var s = 0;
let s = 0;
if (t === 0) {
return b;
}
@ -674,7 +674,7 @@ export const Easings = {
*/
ElasticEaseInOut(t, b, c, d, a, p) {
// added s = 0
var s = 0;
let s = 0;
if (t === 0) {
return b;
}

128
src/Util.ts
View File

@ -67,7 +67,7 @@ export class Transform {
* @returns {Object} 2D point(x, y)
*/
point(point: Vector2d) {
var m = this.m;
const m = this.m;
return {
x: m[0] * point.x + m[2] * point.y + m[4],
y: m[1] * point.x + m[3] * point.y + m[5],
@ -109,12 +109,12 @@ export class Transform {
* @returns {Konva.Transform}
*/
rotate(rad: number) {
var c = Math.cos(rad);
var s = Math.sin(rad);
var m11 = this.m[0] * c + this.m[2] * s;
var m12 = this.m[1] * c + this.m[3] * s;
var m21 = this.m[0] * -s + this.m[2] * c;
var m22 = this.m[1] * -s + this.m[3] * c;
const c = Math.cos(rad);
const s = Math.sin(rad);
const m11 = this.m[0] * c + this.m[2] * s;
const m12 = this.m[1] * c + this.m[3] * s;
const m21 = this.m[0] * -s + this.m[2] * c;
const m22 = this.m[1] * -s + this.m[3] * c;
this.m[0] = m11;
this.m[1] = m12;
this.m[2] = m21;
@ -142,10 +142,10 @@ export class Transform {
* @returns {Konva.Transform}
*/
skew(sx: number, sy: number) {
var m11 = this.m[0] + this.m[2] * sy;
var m12 = this.m[1] + this.m[3] * sy;
var m21 = this.m[2] + this.m[0] * sx;
var m22 = this.m[3] + this.m[1] * sx;
const m11 = this.m[0] + this.m[2] * sy;
const m12 = this.m[1] + this.m[3] * sy;
const m21 = this.m[2] + this.m[0] * sx;
const m22 = this.m[3] + this.m[1] * sx;
this.m[0] = m11;
this.m[1] = m12;
this.m[2] = m21;
@ -160,14 +160,14 @@ export class Transform {
* @returns {Konva.Transform}
*/
multiply(matrix: Transform) {
var m11 = this.m[0] * matrix.m[0] + this.m[2] * matrix.m[1];
var m12 = this.m[1] * matrix.m[0] + this.m[3] * matrix.m[1];
const m11 = this.m[0] * matrix.m[0] + this.m[2] * matrix.m[1];
const m12 = this.m[1] * matrix.m[0] + this.m[3] * matrix.m[1];
var m21 = this.m[0] * matrix.m[2] + this.m[2] * matrix.m[3];
var m22 = this.m[1] * matrix.m[2] + this.m[3] * matrix.m[3];
const m21 = this.m[0] * matrix.m[2] + this.m[2] * matrix.m[3];
const m22 = this.m[1] * matrix.m[2] + this.m[3] * matrix.m[3];
var dx = this.m[0] * matrix.m[4] + this.m[2] * matrix.m[5] + this.m[4];
var dy = this.m[1] * matrix.m[4] + this.m[3] * matrix.m[5] + this.m[5];
const dx = this.m[0] * matrix.m[4] + this.m[2] * matrix.m[5] + this.m[4];
const dy = this.m[1] * matrix.m[4] + this.m[3] * matrix.m[5] + this.m[5];
this.m[0] = m11;
this.m[1] = m12;
@ -184,13 +184,13 @@ export class Transform {
* @returns {Konva.Transform}
*/
invert() {
var d = 1 / (this.m[0] * this.m[3] - this.m[1] * this.m[2]);
var m0 = this.m[3] * d;
var m1 = -this.m[1] * d;
var m2 = -this.m[2] * d;
var m3 = this.m[0] * d;
var m4 = d * (this.m[2] * this.m[5] - this.m[3] * this.m[4]);
var m5 = d * (this.m[1] * this.m[4] - this.m[0] * this.m[5]);
const d = 1 / (this.m[0] * this.m[3] - this.m[1] * this.m[2]);
const m0 = this.m[3] * d;
const m1 = -this.m[1] * d;
const m2 = -this.m[2] * d;
const m3 = this.m[0] * d;
const m4 = d * (this.m[2] * this.m[5] - this.m[3] * this.m[4]);
const m5 = d * (this.m[1] * this.m[4] - this.m[0] * this.m[5]);
this.m[0] = m0;
this.m[1] = m1;
this.m[2] = m2;
@ -214,16 +214,16 @@ export class Transform {
* @returns {Konva.Transform}
*/
decompose() {
var a = this.m[0];
var b = this.m[1];
var c = this.m[2];
var d = this.m[3];
var e = this.m[4];
var f = this.m[5];
const a = this.m[0];
const b = this.m[1];
const c = this.m[2];
const d = this.m[3];
const e = this.m[4];
const f = this.m[5];
var delta = a * d - b * c;
const delta = a * d - b * c;
let result = {
const result = {
x: e,
y: f,
rotation: 0,
@ -235,14 +235,14 @@ export class Transform {
// Apply the QR-like decomposition.
if (a != 0 || b != 0) {
var r = Math.sqrt(a * a + b * b);
const r = Math.sqrt(a * a + b * b);
result.rotation = b > 0 ? Math.acos(a / r) : -Math.acos(a / r);
result.scaleX = r;
result.scaleY = delta / r;
result.skewX = (a * c + b * d) / delta;
result.skewY = 0;
} else if (c != 0 || d != 0) {
var s = Math.sqrt(c * c + d * d);
const s = Math.sqrt(c * c + d * d);
result.rotation =
Math.PI / 2 - (d > 0 ? Math.acos(-c / s) : -Math.acos(c / s));
result.scaleX = delta / s;
@ -260,7 +260,7 @@ export class Transform {
}
// CONSTANTS
var OBJECT_ARRAY = '[object Array]',
let OBJECT_ARRAY = '[object Array]',
OBJECT_NUMBER = '[object Number]',
OBJECT_STRING = '[object String]',
OBJECT_BOOLEAN = '[object Boolean]',
@ -465,14 +465,14 @@ export const Util = {
return Object.prototype.toString.call(obj) === OBJECT_BOOLEAN;
},
// arrays are objects too
isObject(val: any): val is Object {
isObject(val: any): val is object {
return val instanceof Object;
},
isValidSelector(selector: any) {
if (typeof selector !== 'string') {
return false;
}
var firstChar = selector[0];
const firstChar = selector[0];
return (
firstChar === '#' ||
firstChar === '.' ||
@ -505,7 +505,7 @@ export const Util = {
}
},
createCanvasElement() {
var canvas = document.createElement('canvas');
const canvas = document.createElement('canvas');
// on some environments canvas.style is readonly
try {
(<any>canvas).style = canvas.style || {};
@ -529,7 +529,7 @@ export const Util = {
*/
_urlToImage(url: string, callback: Function) {
// if arg is a string, then it's a data url
var imageObj = Util.createImageElement();
const imageObj = Util.createImageElement();
imageObj.onload = function () {
callback(imageObj);
};
@ -540,7 +540,7 @@ export const Util = {
},
_hexToRgb(hex: string): RGB {
hex = hex.replace(HASH, EMPTY_STRING);
var bigint = parseInt(hex, 16);
const bigint = parseInt(hex, 16);
return {
r: (bigint >> 16) & 255,
g: (bigint >> 8) & 255,
@ -555,7 +555,7 @@ export const Util = {
* shape.fill(Konva.Util.getRandomColor());
*/
getRandomColor() {
var randColor = ((Math.random() * 0xffffff) << 0).toString(16);
let randColor = ((Math.random() * 0xffffff) << 0).toString(16);
while (randColor.length < 6) {
randColor = ZERO + randColor;
}
@ -574,7 +574,7 @@ export const Util = {
* var rgb = Konva.Util.getRGB('rgb(0,0,255)');
*/
getRGB(color: string): RGB {
var rgb;
let rgb;
// color string
if (color in COLORS) {
rgb = COLORS[color as keyof typeof COLORS];
@ -620,7 +620,7 @@ export const Util = {
},
// Parse named css color. Like "green"
_namedColorToRBA(str: string) {
var c = COLORS[str.toLowerCase() as keyof typeof COLORS];
const c = COLORS[str.toLowerCase() as keyof typeof COLORS];
if (!c) {
return null;
}
@ -635,7 +635,7 @@ export const Util = {
_rgbColorToRGBA(str: string) {
if (str.indexOf('rgb(') === 0) {
str = str.match(/rgb\(([^)]+)\)/)![1];
var parts = str.split(/ *, */).map(Number);
const parts = str.split(/ *, */).map(Number);
return {
r: parts[0],
g: parts[1],
@ -648,7 +648,7 @@ export const Util = {
_rgbaColorToRGBA(str: string) {
if (str.indexOf('rgba(') === 0) {
str = str.match(/rgba\(([^)]+)\)/)![1]!;
var parts = str.split(/ *, */).map((n, index) => {
const parts = str.split(/ *, */).map((n, index) => {
if (n.slice(-1) === '%') {
return index === 3 ? parseInt(n) / 100 : (parseInt(n) / 100) * 255;
}
@ -789,8 +789,8 @@ export const Util = {
);
},
cloneObject<Any>(obj: Any): Any {
var retObj: any = {};
for (var key in obj) {
const retObj: any = {};
for (const key in obj) {
if (this._isPlainObject(obj[key])) {
retObj[key] = this.cloneObject(obj[key]);
} else if (this._isArray(obj[key])) {
@ -840,8 +840,8 @@ export const Util = {
}
console.warn(KONVA_WARNING + str);
},
each(obj: Object, func: Function) {
for (var key in obj) {
each(obj: object, func: Function) {
for (const key in obj) {
func(key, obj[key as keyof typeof obj]);
}
},
@ -849,15 +849,15 @@ export const Util = {
return left <= val && val < right;
},
_getProjectionToSegment(x1, y1, x2, y2, x3, y3) {
var x, y, dist;
let x, y, dist;
var pd2 = (x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2);
const pd2 = (x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2);
if (pd2 == 0) {
x = x1;
y = y1;
dist = (x3 - x2) * (x3 - x2) + (y3 - y2) * (y3 - y2);
} else {
var u = ((x3 - x1) * (x2 - x1) + (y3 - y1) * (y2 - y1)) / pd2;
const u = ((x3 - x1) * (x2 - x1) + (y3 - y1) * (y2 - y1)) / pd2;
if (u < 0) {
x = x1;
y = y1;
@ -877,14 +877,14 @@ export const Util = {
// line as array of points.
// line might be closed
_getProjectionToLine(pt: Vector2d, line: Array<Vector2d>, isClosed: boolean) {
var pc = Util.cloneObject(pt);
var dist = Number.MAX_VALUE;
const pc = Util.cloneObject(pt);
let dist = Number.MAX_VALUE;
line.forEach(function (p1, i) {
if (!isClosed && i === line.length - 1) {
return;
}
var p2 = line[(i + 1) % line.length];
var proj = Util._getProjectionToSegment(
const p2 = line[(i + 1) % line.length];
const proj = Util._getProjectionToSegment(
p1.x,
p1.y,
p2.x,
@ -892,7 +892,7 @@ export const Util = {
pt.x,
pt.y
);
var px = proj[0],
const px = proj[0],
py = proj[1],
pdist = proj[2];
if (pdist < dist) {
@ -904,11 +904,11 @@ export const Util = {
return pc;
},
_prepareArrayForTween(startArray, endArray, isClosed) {
var n,
let n,
start: Vector2d[] = [],
end: Vector2d[] = [];
if (startArray.length > endArray.length) {
var temp = endArray;
const temp = endArray;
endArray = startArray;
startArray = temp;
}
@ -925,20 +925,20 @@ export const Util = {
});
}
var newStart: number[] = [];
const newStart: number[] = [];
end.forEach(function (point) {
var pr = Util._getProjectionToLine(point, start, isClosed);
const pr = Util._getProjectionToLine(point, start, isClosed);
newStart.push(pr.x);
newStart.push(pr.y);
});
return newStart;
},
_prepareToStringify<T>(obj: any): T | null {
var desc;
let desc;
obj.visitedByCircularReferenceRemoval = true;
for (var key in obj) {
for (const key in obj) {
if (
!(obj.hasOwnProperty(key) && obj[key] && typeof obj[key] == 'object')
) {
@ -969,7 +969,7 @@ export const Util = {
},
// very simplified version of Object.assign
_assign<T, U>(target: T, source: U) {
for (var key in source) {
for (const key in source) {
(<any>target)[key] = source[key];
}
return target as T & U;

10
src/Validators.ts
View File

@ -52,8 +52,8 @@ export function getNumberValidator() {
export function getNumberOrArrayOfNumbersValidator(noOfElements: number) {
if (Konva.isUnminified) {
return function <T>(val: T, attr: string): T | void {
let isNumber = Util._isNumber(val);
let isValidArray = Util._isArray(val) && val.length == noOfElements;
const isNumber = Util._isNumber(val);
const isValidArray = Util._isArray(val) && val.length == noOfElements;
if (!isNumber && !isValidArray) {
Util.warn(
_formatValue(val) +
@ -72,8 +72,8 @@ export function getNumberOrArrayOfNumbersValidator(noOfElements: number) {
export function getNumberOrAutoValidator() {
if (Konva.isUnminified) {
return function <T extends string>(val: T, attr: string): T | void {
var isNumber = Util._isNumber(val);
var isAuto = val === 'auto';
const isNumber = Util._isNumber(val);
const isAuto = val === 'auto';
if (!(isNumber || isAuto)) {
Util.warn(
@ -175,7 +175,7 @@ export function getNumberArrayValidator() {
export function getBooleanValidator() {
if (Konva.isUnminified) {
return function (val: any, attr: string) {
var isBool = val === true || val === false;
const isBool = val === true || val === false;
if (!isBool) {
Util.warn(
_formatValue(val) +

12
src/filters/Blur.ts
View File

@ -54,7 +54,7 @@ function BlurStack(this: any) {
this.next = null;
}
var mul_table = [
const 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,
@ -74,7 +74,7 @@ var mul_table = [
289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259,
];
var shg_table = [
const 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,
@ -92,11 +92,11 @@ var shg_table = [
];
function filterGaussBlurRGBA(imageData, radius) {
var pixels = imageData.data,
const pixels = imageData.data,
width = imageData.width,
height = imageData.height;
var x,
let x,
y,
i,
p,
@ -121,7 +121,7 @@ function filterGaussBlurRGBA(imageData, radius) {
pa,
rbs;
var div = radius + radius + 1,
let div = radius + radius + 1,
widthMinus1 = width - 1,
heightMinus1 = height - 1,
radiusPlus1 = radius + 1,
@ -365,7 +365,7 @@ function filterGaussBlurRGBA(imageData, radius) {
* node.blurRadius(10);
*/
export const Blur: Filter = function Blur(imageData) {
var radius = Math.round(this.blurRadius());
const radius = Math.round(this.blurRadius());
if (radius > 0) {
filterGaussBlurRGBA(imageData, radius);

2
src/filters/Brighten.ts
View File

@ -13,7 +13,7 @@ import { getNumberValidator } from '../Validators';
* node.brightness(0.8);
*/
export const Brighten: Filter = function (imageData) {
var brightness = this.brightness() * 255,
let brightness = this.brightness() * 255,
data = imageData.data,
len = data.length,
i;

4
src/filters/Contrast.ts
View File

@ -13,9 +13,9 @@ import { getNumberValidator } from '../Validators';
*/
export const Contrast: Filter = function (imageData) {
var adjust = Math.pow((this.contrast() + 100) / 100, 2);
const adjust = Math.pow((this.contrast() + 100) / 100, 2);
var data = imageData.data,
let data = imageData.data,
nPixels = data.length,
red = 150,
green = 150,

38
src/filters/Emboss.ts
View File

@ -23,7 +23,7 @@ export const Emboss: Filter = function (imageData) {
// pixastic greyLevel is between 0 and 255. I want it between 0 and 1. Also,
// a max value of greyLevel yields a white emboss, and the min value yields a black
// emboss. Therefore, I changed greyLevel to whiteLevel
var strength = this.embossStrength() * 10,
let strength = this.embossStrength() * 10,
greyLevel = this.embossWhiteLevel() * 255,
direction = this.embossDirection(),
blend = this.embossBlend(),
@ -73,9 +73,9 @@ export const Emboss: Filter = function (imageData) {
}
do {
var offsetY = (y - 1) * w4;
const offsetY = (y - 1) * w4;
var otherY = dirY;
let otherY = dirY;
if (y + otherY < 1) {
otherY = 0;
}
@ -83,13 +83,13 @@ export const Emboss: Filter = function (imageData) {
otherY = 0;
}
var offsetYOther = (y - 1 + otherY) * w * 4;
const offsetYOther = (y - 1 + otherY) * w * 4;
var x = w;
let x = w;
do {
var offset = offsetY + (x - 1) * 4;
const offset = offsetY + (x - 1) * 4;
var otherX = dirX;
let otherX = dirX;
if (x + otherX < 1) {
otherX = 0;
}
@ -97,17 +97,17 @@ export const Emboss: Filter = function (imageData) {
otherX = 0;
}
var offsetOther = offsetYOther + (x - 1 + otherX) * 4;
const offsetOther = offsetYOther + (x - 1 + otherX) * 4;
var dR = data[offset] - data[offsetOther];
var dG = data[offset + 1] - data[offsetOther + 1];
var dB = data[offset + 2] - data[offsetOther + 2];
const dR = data[offset] - data[offsetOther];
const dG = data[offset + 1] - data[offsetOther + 1];
const dB = data[offset + 2] - data[offsetOther + 2];
var dif = dR;
var absDif = dif > 0 ? dif : -dif;
let dif = dR;
const absDif = dif > 0 ? dif : -dif;
var absG = dG > 0 ? dG : -dG;
var absB = dB > 0 ? dB : -dB;
const absG = dG > 0 ? dG : -dG;
const absB = dB > 0 ? dB : -dB;
if (absG > absDif) {
dif = dG;
@ -119,15 +119,15 @@ export const Emboss: Filter = function (imageData) {
dif *= strength;
if (blend) {
var r = data[offset] + dif;
var g = data[offset + 1] + dif;
var b = data[offset + 2] + dif;
const r = data[offset] + dif;
const g = data[offset + 1] + dif;
const b = data[offset + 2] + dif;
data[offset] = r > 255 ? 255 : r < 0 ? 0 : r;
data[offset + 1] = g > 255 ? 255 : g < 0 ? 0 : g;
data[offset + 2] = b > 255 ? 255 : b < 0 ? 0 : b;
} else {
var grey = greyLevel - dif;
let grey = greyLevel - dif;
if (grey < 0) {
grey = 0;
} else if (grey > 255) {

8
src/filters/Enhance.ts
View File

@ -4,7 +4,7 @@ import { getNumberValidator } from '../Validators';
function remap(fromValue: number, fromMin: number, fromMax: number, toMin: number, toMax: number) {
// Compute the range of the data
var fromRange = fromMax - fromMin,
let fromRange = fromMax - fromMin,
toRange = toMax - toMin,
toValue;
@ -38,7 +38,7 @@ function remap(fromValue: number, fromMin: number, fromMax: number, toMin: numbe
* node.enhance(0.4);
*/
export const Enhance: Filter = function (imageData) {
var data = imageData.data,
let data = imageData.data,
nSubPixels = data.length,
rMin = data[0],
rMax = rMin,
@ -52,7 +52,7 @@ export const Enhance: Filter = function (imageData) {
i;
// If we are not enhancing anything - don't do any computation
var enhanceAmount = this.enhance();
const enhanceAmount = this.enhance();
if (enhanceAmount === 0) {
return;
}
@ -96,7 +96,7 @@ export const Enhance: Filter = function (imageData) {
bMin = 0;
}
var rMid,
let rMid,
rGoalMax,
rGoalMin,
gMid,

2
src/filters/Grayscale.ts
View File

@ -10,7 +10,7 @@ import { Filter } from '../Node';
* node.filters([Konva.Filters.Grayscale]);
*/
export const Grayscale: Filter = function (imageData) {
var data = imageData.data,
let data = imageData.data,
len = data.length,
i,
brightness;

12
src/filters/HSL.ts
View File

@ -59,7 +59,7 @@ Factory.addGetterSetter(
*/
export const HSL: Filter = function (imageData) {
var data = imageData.data,
let data = imageData.data,
nPixels = data.length,
v = 1,
s = Math.pow(2, this.saturation()),
@ -79,20 +79,20 @@ export const HSL: Filter = function (imageData) {
//[ .299V-.300vsu+1.25vsw .587V-.588vsu-1.05vsw .114V+.886vsu-.203vsw ] [B]
// Precompute the values in the matrix:
var vsu = v * s * Math.cos((h * Math.PI) / 180),
const vsu = v * s * Math.cos((h * Math.PI) / 180),
vsw = v * s * Math.sin((h * Math.PI) / 180);
// (result spot)(source spot)
var rr = 0.299 * v + 0.701 * vsu + 0.167 * vsw,
const rr = 0.299 * v + 0.701 * vsu + 0.167 * vsw,
rg = 0.587 * v - 0.587 * vsu + 0.33 * vsw,
rb = 0.114 * v - 0.114 * vsu - 0.497 * vsw;
var gr = 0.299 * v - 0.299 * vsu - 0.328 * vsw,
const gr = 0.299 * v - 0.299 * vsu - 0.328 * vsw,
gg = 0.587 * v + 0.413 * vsu + 0.035 * vsw,
gb = 0.114 * v - 0.114 * vsu + 0.293 * vsw;
var br = 0.299 * v - 0.3 * vsu + 1.25 * vsw,
const br = 0.299 * v - 0.3 * vsu + 1.25 * vsw,
bg = 0.587 * v - 0.586 * vsu - 1.05 * vsw,
bb = 0.114 * v + 0.886 * vsu - 0.2 * vsw;
var r, g, b, a;
let r: number, g: number, b: number, a: number;
for (i = 0; i < nPixels; i += 4) {
r = data[i + 0];

12
src/filters/HSV.ts
View File

@ -15,7 +15,7 @@ import { getNumberValidator } from '../Validators';
*/
export const HSV: Filter = function (imageData) {
var data = imageData.data,
let data = imageData.data,
nPixels = data.length,
v = Math.pow(2, this.value()),
s = Math.pow(2, this.saturation()),
@ -34,20 +34,20 @@ export const HSV: Filter = function (imageData) {
//[ .299V-.300vsu+1.25vsw .587V-.588vsu-1.05vsw .114V+.886vsu-.203vsw ] [B]
// Precompute the values in the matrix:
var vsu = v * s * Math.cos((h * Math.PI) / 180),
const vsu = v * s * Math.cos((h * Math.PI) / 180),
vsw = v * s * Math.sin((h * Math.PI) / 180);
// (result spot)(source spot)
var rr = 0.299 * v + 0.701 * vsu + 0.167 * vsw,
const rr = 0.299 * v + 0.701 * vsu + 0.167 * vsw,
rg = 0.587 * v - 0.587 * vsu + 0.33 * vsw,
rb = 0.114 * v - 0.114 * vsu - 0.497 * vsw;
var gr = 0.299 * v - 0.299 * vsu - 0.328 * vsw,
const gr = 0.299 * v - 0.299 * vsu - 0.328 * vsw,
gg = 0.587 * v + 0.413 * vsu + 0.035 * vsw,
gb = 0.114 * v - 0.114 * vsu + 0.293 * vsw;
var br = 0.299 * v - 0.3 * vsu + 1.25 * vsw,
const br = 0.299 * v - 0.3 * vsu + 1.25 * vsw,
bg = 0.587 * v - 0.586 * vsu - 1.05 * vsw,
bb = 0.114 * v + 0.886 * vsu - 0.2 * vsw;
var r, g, b, a;
let r, g, b, a;
for (i = 0; i < nPixels; i += 4) {
r = data[i + 0];

2
src/filters/Invert.ts
View File

@ -9,7 +9,7 @@ import { Filter } from '../Node';
* node.filters([Konva.Filters.Invert]);
*/
export const Invert: Filter = function (imageData) {
var data = imageData.data,
let data = imageData.data,
len = data.length,
i;

40
src/filters/Kaleidoscope.ts
View File

@ -19,8 +19,8 @@ import { getNumberValidator } from '../Validators';
* default is in the middle
*/
var ToPolar = function (src, dst, opt) {
var srcPixels = src.data,
const ToPolar = function (src, dst, opt) {
let srcPixels = src.data,
dstPixels = dst.data,
xSize = src.width,
ySize = src.height,
@ -35,7 +35,7 @@ var ToPolar = function (src, dst, opt) {
a = 0;
// Find the largest radius
var rad,
let rad,
rMax = Math.sqrt(xMid * xMid + yMid * yMid);
x = xSize - xMid;
y = ySize - yMid;
@ -43,14 +43,14 @@ var ToPolar = function (src, dst, opt) {
rMax = rad > rMax ? rad : rMax;
// We'll be uisng y as the radius, and x as the angle (theta=t)
var rSize = ySize,
let rSize = ySize,
tSize = xSize,
radius,
theta;
// We want to cover all angles (0-360) and we need to convert to
// radians (*PI/180)
var conversion = ((360 / tSize) * Math.PI) / 180,
let conversion = ((360 / tSize) * Math.PI) / 180,
sin,
cos;
@ -96,8 +96,8 @@ var ToPolar = function (src, dst, opt) {
* 0 is no rotation, 360 degrees is a full rotation
*/
var FromPolar = function (src, dst, opt) {
var srcPixels = src.data,
const FromPolar = function (src, dst, opt) {
let srcPixels = src.data,
dstPixels = dst.data,
xSize = src.width,
ySize = src.height,
@ -114,7 +114,7 @@ var FromPolar = function (src, dst, opt) {
a = 0;
// Find the largest radius
var rad,
let rad,
rMax = Math.sqrt(xMid * xMid + yMid * yMid);
x = xSize - xMid;
y = ySize - yMid;
@ -122,7 +122,7 @@ var FromPolar = function (src, dst, opt) {
rMax = rad > rMax ? rad : rMax;
// We'll be uisng x as the radius, and y as the angle (theta=t)
var rSize = ySize,
let rSize = ySize,
tSize = xSize,
radius,
theta,
@ -133,7 +133,7 @@ var FromPolar = function (src, dst, opt) {
// var conversion = tSize/360*180/Math.PI;
//var conversion = tSize/360*180/Math.PI;
var x1, y1;
let x1, y1;
for (x = 0; x < xSize; x += 1) {
for (y = 0; y < ySize; y += 1) {
@ -178,23 +178,23 @@ var FromPolar = function (src, dst, opt) {
* node.kaleidoscopeAngle(45);
*/
export const Kaleidoscope: Filter = function (imageData) {
var xSize = imageData.width,
const xSize = imageData.width,
ySize = imageData.height;
var x, y, xoff, i, r, g, b, a, srcPos, dstPos;
var power = Math.round(this.kaleidoscopePower());
var angle = Math.round(this.kaleidoscopeAngle());
var offset = Math.floor((xSize * (angle % 360)) / 360);
let x, y, xoff, i, r, g, b, a, srcPos, dstPos;
let power = Math.round(this.kaleidoscopePower());
const angle = Math.round(this.kaleidoscopeAngle());
const offset = Math.floor((xSize * (angle % 360)) / 360);
if (power < 1) {
return;
}
// Work with our shared buffer canvas
var tempCanvas = Util.createCanvasElement();
const tempCanvas = Util.createCanvasElement();
tempCanvas.width = xSize;
tempCanvas.height = ySize;
var scratchData = tempCanvas
const scratchData = tempCanvas
.getContext('2d')!
.getImageData(0, 0, xSize, ySize);
Util.releaseCanvas(tempCanvas);
@ -206,18 +206,18 @@ export const Kaleidoscope: Filter = function (imageData) {
// Determine how big each section will be, if it's too small
// make it bigger
var minSectionSize = xSize / Math.pow(2, power);
let minSectionSize = xSize / Math.pow(2, power);
while (minSectionSize <= 8) {
minSectionSize = minSectionSize * 2;
power -= 1;
}
minSectionSize = Math.ceil(minSectionSize);
var sectionSize = minSectionSize;
let sectionSize = minSectionSize;
// Copy the offset region to 0
// Depending on the size of filter and location of the offset we may need
// to copy the section backwards to prevent it from rewriting itself
var xStart = 0,
let xStart = 0,
xEnd = sectionSize,
xDelta = 1;
if (offset + minSectionSize > xSize) {

114
src/filters/Mask.ts
View File

@ -3,8 +3,8 @@ import { Node, Filter } from '../Node';
import { getNumberValidator } from '../Validators';
function pixelAt(idata, x, y) {
var idx = (y * idata.width + x) * 4;
var d: Array<number> = [];
let idx = (y * idata.width + x) * 4;
const d: Array<number> = [];
d.push(
idata.data[idx++],
idata.data[idx++],
@ -23,9 +23,9 @@ function rgbDistance(p1, p2) {
}
function rgbMean(pTab) {
var m = [0, 0, 0];
const m = [0, 0, 0];
for (var i = 0; i < pTab.length; i++) {
for (let i = 0; i < pTab.length; i++) {
m[0] += pTab[i][0];
m[1] += pTab[i][1];
m[2] += pTab[i][2];
@ -39,12 +39,12 @@ function rgbMean(pTab) {
}
function backgroundMask(idata, threshold) {
var rgbv_no = pixelAt(idata, 0, 0);
var rgbv_ne = pixelAt(idata, idata.width - 1, 0);
var rgbv_so = pixelAt(idata, 0, idata.height - 1);
var rgbv_se = pixelAt(idata, idata.width - 1, idata.height - 1);
const rgbv_no = pixelAt(idata, 0, 0);
const rgbv_ne = pixelAt(idata, idata.width - 1, 0);
const rgbv_so = pixelAt(idata, 0, idata.height - 1);
const rgbv_se = pixelAt(idata, idata.width - 1, idata.height - 1);
var thres = threshold || 10;
const thres = threshold || 10;
if (
rgbDistance(rgbv_no, rgbv_ne) < thres &&
rgbDistance(rgbv_ne, rgbv_se) < thres &&
@ -52,12 +52,12 @@ function backgroundMask(idata, threshold) {
rgbDistance(rgbv_so, rgbv_no) < thres
) {
// Mean color
var mean = rgbMean([rgbv_ne, rgbv_no, rgbv_se, rgbv_so]);
const mean = rgbMean([rgbv_ne, rgbv_no, rgbv_se, rgbv_so]);
// Mask based on color distance
var mask: Array<number> = [];
for (var i = 0; i < idata.width * idata.height; i++) {
var d = rgbDistance(mean, [
const mask: Array<number> = [];
for (let i = 0; i < idata.width * idata.height; i++) {
const d = rgbDistance(mean, [
idata.data[i * 4],
idata.data[i * 4 + 1],
idata.data[i * 4 + 2],
@ -70,29 +70,29 @@ function backgroundMask(idata, threshold) {
}
function applyMask(idata, mask) {
for (var i = 0; i < idata.width * idata.height; i++) {
for (let i = 0; i < idata.width * idata.height; i++) {
idata.data[4 * i + 3] = mask[i];
}
}
function erodeMask(mask, sw, sh) {
var weights = [1, 1, 1, 1, 0, 1, 1, 1, 1];
var side = Math.round(Math.sqrt(weights.length));
var halfSide = Math.floor(side / 2);
const weights = [1, 1, 1, 1, 0, 1, 1, 1, 1];
const side = Math.round(Math.sqrt(weights.length));
const halfSide = Math.floor(side / 2);
var maskResult: Array<number> = [];
for (var y = 0; y < sh; y++) {
for (var x = 0; x < sw; x++) {
var so = y * sw + x;
var a = 0;
for (var cy = 0; cy < side; cy++) {
for (var cx = 0; cx < side; cx++) {
var scy = y + cy - halfSide;
var scx = x + cx - halfSide;
const maskResult: Array<number> = [];
for (let y = 0; y < sh; y++) {
for (let x = 0; x < sw; x++) {
const so = y * sw + x;
let a = 0;
for (let cy = 0; cy < side; cy++) {
for (let cx = 0; cx < side; cx++) {
const scy = y + cy - halfSide;
const scx = x + cx - halfSide;
if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
var srcOff = scy * sw + scx;
var wt = weights[cy * side + cx];
const srcOff = scy * sw + scx;
const wt = weights[cy * side + cx];
a += mask[srcOff] * wt;
}
@ -107,23 +107,23 @@ function erodeMask(mask, sw, sh) {
}
function dilateMask(mask, sw, sh) {
var weights = [1, 1, 1, 1, 1, 1, 1, 1, 1];
var side = Math.round(Math.sqrt(weights.length));
var halfSide = Math.floor(side / 2);
const weights = [1, 1, 1, 1, 1, 1, 1, 1, 1];
const side = Math.round(Math.sqrt(weights.length));
const halfSide = Math.floor(side / 2);
var maskResult: Array<number> = [];
for (var y = 0; y < sh; y++) {
for (var x = 0; x < sw; x++) {
var so = y * sw + x;
var a = 0;
for (var cy = 0; cy < side; cy++) {
for (var cx = 0; cx < side; cx++) {
var scy = y + cy - halfSide;
var scx = x + cx - halfSide;
const maskResult: Array<number> = [];
for (let y = 0; y < sh; y++) {
for (let x = 0; x < sw; x++) {
const so = y * sw + x;
let a = 0;
for (let cy = 0; cy < side; cy++) {
for (let cx = 0; cx < side; cx++) {
const scy = y + cy - halfSide;
const scx = x + cx - halfSide;
if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
var srcOff = scy * sw + scx;
var wt = weights[cy * side + cx];
const srcOff = scy * sw + scx;
const wt = weights[cy * side + cx];
a += mask[srcOff] * wt;
}
@ -138,23 +138,23 @@ function dilateMask(mask, sw, sh) {
}
function smoothEdgeMask(mask, sw, sh) {
var weights = [1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9];
var side = Math.round(Math.sqrt(weights.length));
var halfSide = Math.floor(side / 2);
const weights = [1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9];
const side = Math.round(Math.sqrt(weights.length));
const halfSide = Math.floor(side / 2);
var maskResult: Array<number> = [];
for (var y = 0; y < sh; y++) {
for (var x = 0; x < sw; x++) {
var so = y * sw + x;
var a = 0;
for (var cy = 0; cy < side; cy++) {
for (var cx = 0; cx < side; cx++) {
var scy = y + cy - halfSide;
var scx = x + cx - halfSide;
const maskResult: Array<number> = [];
for (let y = 0; y < sh; y++) {
for (let x = 0; x < sw; x++) {
const so = y * sw + x;
let a = 0;
for (let cy = 0; cy < side; cy++) {
for (let cx = 0; cx < side; cx++) {
const scy = y + cy - halfSide;
const scx = x + cx - halfSide;
if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
var srcOff = scy * sw + scx;
var wt = weights[cy * side + cx];
const srcOff = scy * sw + scx;
const wt = weights[cy * side + cx];
a += mask[srcOff] * wt;
}
@ -181,7 +181,7 @@ function smoothEdgeMask(mask, sw, sh) {
*/
export const Mask: Filter = function (imageData) {
// Detect pixels close to the background color
var threshold = this.threshold(),
let threshold = this.threshold(),
mask = backgroundMask(imageData, threshold);
if (mask) {
// Erode

2
src/filters/Noise.ts
View File

@ -15,7 +15,7 @@ import { getNumberValidator } from '../Validators';
* node.noise(0.8);
*/
export const Noise: Filter = function (imageData) {
var amount = this.noise() * 255,
let amount = this.noise() * 255,
data = imageData.data,
nPixels = data.length,
half = amount / 2,

4
src/filters/Pixelate.ts
View File

@ -1,4 +1,4 @@
/*eslint-disable max-depth */
import { Factory } from '../Factory';
import { Util } from '../Util';
import { Node, Filter } from '../Node';
@ -19,7 +19,7 @@ import { getNumberValidator } from '../Validators';
*/
export const Pixelate: Filter = function (imageData) {
var pixelSize = Math.ceil(this.pixelSize()),
let pixelSize = Math.ceil(this.pixelSize()),
width = imageData.width,
height = imageData.height,
x,

2
src/filters/Posterize.ts
View File

@ -18,7 +18,7 @@ import { getNumberValidator } from '../Validators';
export const Posterize: Filter = function (imageData) {
// level must be between 1 and 255
var levels = Math.round(this.levels() * 254) + 1,
let levels = Math.round(this.levels() * 254) + 1,
data = imageData.data,
len = data.length,
scale = 255 / levels,

2
src/filters/RGB.ts
View File

@ -17,7 +17,7 @@ import { RGBComponent } from '../Validators';
*/
export const RGB: Filter = function (imageData) {
var data = imageData.data,
let data = imageData.data,
nPixels = data.length,
red = this.red(),
green = this.green(),

2
src/filters/RGBA.ts
View File

@ -18,7 +18,7 @@ import { RGBComponent } from '../Validators';
*/
export const RGBA: Filter = function (imageData) {
var data = imageData.data,
let data = imageData.data,
nPixels = data.length,
red = this.red(),
green = this.green(),

2
src/filters/Sepia.ts
View File

@ -12,7 +12,7 @@ import { Filter } from '../Node';
* node.filters([Konva.Filters.Sepia]);
*/
export const Sepia: Filter = function (imageData) {
var data = imageData.data,
let data = imageData.data,
nPixels = data.length,
i,
r,

14
src/filters/Solarize.ts
View File

@ -14,20 +14,20 @@ import { Filter } from '../Node';
*/
export const Solarize: Filter = function (imageData) {
var data = imageData.data,
let data = imageData.data,
w = imageData.width,
h = imageData.height,
w4 = w * 4,
y = h;
do {
var offsetY = (y - 1) * w4;
var x = w;
const offsetY = (y - 1) * w4;
let x = w;
do {
var offset = offsetY + (x - 1) * 4;
var r = data[offset];
var g = data[offset + 1];
var b = data[offset + 2];
const offset = offsetY + (x - 1) * 4;
let r = data[offset];
let g = data[offset + 1];
let b = data[offset + 2];
if (r > 127) {
r = 255 - r;

2
src/filters/Threshold.ts
View File

@ -17,7 +17,7 @@ import { getNumberValidator } from '../Validators';
*/
export const Threshold: Filter = function (imageData) {
var level = this.threshold() * 255,
let level = this.threshold() * 255,
data = imageData.data,
len = data.length,
i;

2
src/shapes/Arc.ts
View File

@ -39,7 +39,7 @@ export interface ArcConfig extends ShapeConfig {
*/
export class Arc extends Shape<ArcConfig> {
_sceneFunc(context: Context) {
var angle = Konva.getAngle(this.angle()),
const angle = Konva.getAngle(this.angle()),
clockwise = this.clockwise();
context.beginPath();

20
src/shapes/Arrow.ts
View File

@ -43,19 +43,19 @@ export interface ArrowConfig extends LineConfig {
export class Arrow extends Line<ArrowConfig> {
_sceneFunc(ctx: Context) {
super._sceneFunc(ctx);
var PI2 = Math.PI * 2;
var points = this.points();
const PI2 = Math.PI * 2;
const points = this.points();
var tp = points;
var fromTension = this.tension() !== 0 && points.length > 4;
let tp = points;
const fromTension = this.tension() !== 0 && points.length > 4;
if (fromTension) {
tp = this.getTensionPoints();
}
var length = this.pointerLength();
const length = this.pointerLength();
var n = points.length;
const n = points.length;
var dx, dy;
let dx, dy;
if (fromTension) {
const lp = [
tp[tp.length - 4],
@ -88,9 +88,9 @@ export class Arrow extends Line<ArrowConfig> {
dy = points[n - 1] - points[n - 3];
}
var radians = (Math.atan2(dy, dx) + PI2) % PI2;
const radians = (Math.atan2(dy, dx) + PI2) % PI2;
var width = this.pointerWidth();
const width = this.pointerWidth();
if (this.pointerAtEnding()) {
ctx.save();
@ -130,7 +130,7 @@ export class Arrow extends Line<ArrowConfig> {
__fillStroke(ctx: Context) {
// here is a tricky part
// we need to disable dash for arrow pointers
var isDashEnabled = this.dashEnabled();
const isDashEnabled = this.dashEnabled();
if (isDashEnabled) {
// manually disable dash for head
// it is better not to use setter here,

2
src/shapes/Ellipse.ts
View File

@ -31,7 +31,7 @@ export interface EllipseConfig extends ShapeConfig {
*/
export class Ellipse extends Shape<EllipseConfig> {
_sceneFunc(context: Context) {
var rx = this.radiusX(),
const rx = this.radiusX(),
ry = this.radiusY();
context.beginPath();

6
src/shapes/Image.ts
View File

@ -117,7 +117,7 @@ export class Image extends Shape<ImageConfig> {
// If you need to draw later, you need to execute save/restore
}
_hitFunc(context: Context) {
var width = this.width(),
const width = this.width(),
height = this.height(),
cornerRadius = this.cornerRadius();
@ -156,9 +156,9 @@ export class Image extends Shape<ImageConfig> {
callback: (img: Image) => void,
onError: OnErrorEventHandler = null
) {
var img = Util.createImageElement();
const img = Util.createImageElement();
img.onload = function () {
var image = new Image({
const image = new Image({
image: img,
});
callback(image);

14
src/shapes/Label.ts
View File

@ -15,7 +15,7 @@ import { Text } from './Text';
export interface LabelConfig extends ContainerConfig {}
// constants
var ATTR_CHANGE_LIST = [
const ATTR_CHANGE_LIST = [
'fontFamily',
'fontSize',
'fontStyle',
@ -105,9 +105,9 @@ export class Label extends Group {
return this.find('Tag')[0] as Tag;
}
_addListeners(text) {
var that = this,
let that = this,
n;
var func = function () {
const func = function () {
that._sync();
};
@ -123,7 +123,7 @@ export class Label extends Group {
return this.getText().height();
}
_sync() {
var text = this.getText(),
let text = this.getText(),
tag = this.getTag(),
width,
height,
@ -200,7 +200,7 @@ export interface TagConfig extends ShapeConfig {
*/
export class Tag extends Shape<TagConfig> {
_sceneFunc(context: Context) {
var width = this.width(),
const width = this.width(),
height = this.height(),
pointerDirection = this.pointerDirection(),
pointerWidth = this.pointerWidth(),
@ -289,7 +289,7 @@ export class Tag extends Shape<TagConfig> {
context.fillStrokeShape(this);
}
getSelfRect() {
var x = 0,
let x = 0,
y = 0,
pointerWidth = this.pointerWidth(),
pointerHeight = this.pointerHeight(),
@ -317,7 +317,7 @@ export class Tag extends Shape<TagConfig> {
};
}
pointerDirection: GetSet<'left' | 'top' | 'right' | 'bottom', this>;
pointerDirection: GetSet<'left' | 'top' | 'right' | 'bottom' | 'up' | 'down', this>;
pointerWidth: GetSet<number, this>;
pointerHeight: GetSet<number, this>;
cornerRadius: GetSet<number, this>;

22
src/shapes/Line.ts
View File

@ -8,7 +8,7 @@ import { GetSet } from '../types';
import { Context } from '../Context';
function getControlPoints(x0, y0, x1, y1, x2, y2, t) {
var d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2)),
const d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2)),
d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)),
fa = (t * d01) / (d01 + d12),
fb = (t * d12) / (d01 + d12),
@ -21,7 +21,7 @@ function getControlPoints(x0, y0, x1, y1, x2, y2, t) {
}
function expandPoints(p, tension) {
var len = p.length,
let len = p.length,
allPoints: Array<number> = [],
n,
cp;
@ -105,7 +105,7 @@ export class Line<
}
_sceneFunc(context: Context) {
var points = this.points(),
let points = this.points(),
length = points.length,
tension = this.tension(),
closed = this.closed(),
@ -191,7 +191,7 @@ export class Line<
}
}
_getTensionPointsClosed() {
var p = this.points(),
const p = this.points(),
len = p.length,
tension = this.tension(),
firstControlPoints = getControlPoints(
@ -238,7 +238,7 @@ export class Line<
}
// overload size detection
getSelfRect() {
var points = this.points();
let points = this.points();
if (points.length < 4) {
return {
x: points[0] || 0,
@ -258,12 +258,12 @@ export class Line<
} else {
points = this.points();
}
var minX = points[0];
var maxX = points[0];
var minY = points[1];
var maxY = points[1];
var x, y;
for (var i = 0; i < points.length / 2; i++) {
let minX = points[0];
let maxX = points[0];
let minY = points[1];
let maxY = points[1];
let x, y;
for (let i = 0; i < points.length / 2; i++) {
x = points[i * 2];
y = points[i * 2 + 1];
minX = Math.min(minX, x);

124
src/shapes/Path.ts
View File

@ -51,14 +51,14 @@ export class Path extends Shape<PathConfig> {
}
_sceneFunc(context) {
var ca = this.dataArray;
const ca = this.dataArray;
// context position
context.beginPath();
var isClosed = false;
for (var n = 0; n < ca.length; n++) {
var c = ca[n].command;
var p = ca[n].points;
let isClosed = false;
for (let n = 0; n < ca.length; n++) {
const c = ca[n].command;
const p = ca[n].points;
switch (c) {
case 'L':
context.lineTo(p[0], p[1]);
@ -109,16 +109,16 @@ export class Path extends Shape<PathConfig> {
}
}
getSelfRect() {
var points: Array<number> = [];
let points: Array<number> = [];
this.dataArray.forEach(function (data) {
if (data.command === 'A') {
// Approximates by breaking curve into line segments
var start = data.points[4];
const start = data.points[4];
// 4 = theta
var dTheta = data.points[5];
const dTheta = data.points[5];
// 5 = dTheta
var end = data.points[4] + dTheta;
var inc = Math.PI / 180.0;
const end = data.points[4] + dTheta;
let inc = Math.PI / 180.0;
// 1 degree resolution
if (Math.abs(start - end) < inc) {
inc = Math.abs(start - end);
@ -171,12 +171,12 @@ export class Path extends Shape<PathConfig> {
points = points.concat(data.points);
}
});
var minX = points[0];
var maxX = points[0];
var minY = points[1];
var maxY = points[1];
var x, y;
for (var i = 0; i < points.length / 2; i++) {
let minX = points[0];
let maxX = points[0];
let minY = points[1];
let maxY = points[1];
let x, y;
for (let i = 0; i < points.length / 2; i++) {
x = points[i * 2];
y = points[i * 2 + 1];
@ -229,14 +229,14 @@ export class Path extends Shape<PathConfig> {
static getPathLength(dataArray: PathSegment[]) {
let pathLength = 0;
for (var i = 0; i < dataArray.length; ++i) {
for (let i = 0; i < dataArray.length; ++i) {
pathLength += dataArray[i].pathLength;
}
return pathLength;
}
static getPointAtLengthOfDataArray(length: number, dataArray: PathSegment[]) {
var points: number[],
let points: number[],
i = 0,
ii = dataArray.length;
@ -265,8 +265,8 @@ export class Path extends Shape<PathConfig> {
};
}
var cp = dataArray[i];
var p = cp.points;
const cp = dataArray[i];
const p = cp.points;
switch (cp.command) {
case 'L':
return Path.getPointOnLine(length, cp.start.x, cp.start.y, p[0], p[1]);
@ -375,8 +375,8 @@ export class Path extends Shape<PathConfig> {
function CB4(t) {
return (1 - t) * (1 - t) * (1 - t);
}
var x = P4x * CB1(pct) + P3x * CB2(pct) + P2x * CB3(pct) + P1x * CB4(pct);
var y = P4y * CB1(pct) + P3y * CB2(pct) + P2y * CB3(pct) + P1y * CB4(pct);
const x = P4x * CB1(pct) + P3x * CB2(pct) + P2x * CB3(pct) + P1x * CB4(pct);
const y = P4y * CB1(pct) + P3y * CB2(pct) + P2y * CB3(pct) + P1y * CB4(pct);
return {
x: x,
@ -393,8 +393,8 @@ export class Path extends Shape<PathConfig> {
function QB3(t) {
return (1 - t) * (1 - t);
}
var x = P3x * QB1(pct) + P2x * QB2(pct) + P1x * QB3(pct);
var y = P3y * QB1(pct) + P2y * QB2(pct) + P1y * QB3(pct);
const x = P3x * QB1(pct) + P2x * QB2(pct) + P1x * QB3(pct);
const y = P3y * QB1(pct) + P2y * QB2(pct) + P1y * QB3(pct);
return {
x: x,
@ -409,9 +409,9 @@ export class Path extends Shape<PathConfig> {
theta: number,
psi: number
) {
var cosPsi = Math.cos(psi),
const cosPsi = Math.cos(psi),
sinPsi = Math.sin(psi);
var pt = {
const pt = {
x: rx * Math.cos(theta),
y: ry * Math.sin(theta),
};
@ -455,10 +455,10 @@ export class Path extends Shape<PathConfig> {
}
// command string
var cs = data;
let cs = data;
// command chars
var cc = [
const cc = [
'm',
'M',
'l',
@ -487,18 +487,18 @@ export class Path extends Shape<PathConfig> {
cs = cs.replace(new RegExp(cc[n], 'g'), '|' + cc[n]);
}
// create array
var arr = cs.split('|');
var ca: PathSegment[] = [];
var coords: string[] = [];
const arr = cs.split('|');
const ca: PathSegment[] = [];
const coords: string[] = [];
// init context point
var cpx = 0;
var cpy = 0;
let cpx = 0;
let cpy = 0;
var re = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/gi;
var match;
const re = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/gi;
let match;
for (n = 1; n < arr.length; n++) {
var str = arr[n];
var c = str.charAt(0);
let str = arr[n];
let c = str.charAt(0);
str = str.slice(1);
coords.length = 0;
@ -509,15 +509,15 @@ export class Path extends Shape<PathConfig> {
// while ((match = re.exec(str))) {
// coords.push(match[0]);
// }
var p: number[] = [];
const p: number[] = [];
for (var j = 0, jlen = coords.length; j < jlen; j++) {
for (let j = 0, jlen = coords.length; j < jlen; j++) {
// extra case for merged flags
if (coords[j] === '00') {
p.push(0, 0);
continue;
}
var parsed = parseFloat(coords[j]);
const parsed = parseFloat(coords[j]);
if (!isNaN(parsed)) {
p.push(parsed);
} else {
@ -531,9 +531,9 @@ export class Path extends Shape<PathConfig> {
break;
}
var cmd: string = '';
var points: number[] = [];
var startX = cpx,
let cmd: string = '';
let points: number[] = [];
const startX = cpx,
startY = cpy;
// Move var from within the switch to up here (jshint)
var prevCmd, ctlPtx, ctlPty; // Ss, Tt
@ -563,7 +563,7 @@ export class Path extends Shape<PathConfig> {
// After closing the path move the current position
// to the the first point of the path (if any).
if (ca.length > 2 && ca[ca.length - 1].command === 'z') {
for (var idx = ca.length - 2; idx >= 0; idx--) {
for (let idx = ca.length - 2; idx >= 0; idx--) {
if (ca[idx].command === 'M') {
cpx = ca[idx].points[0] + dx;
cpy = ca[idx].points[1] + dy;
@ -761,8 +761,8 @@ export class Path extends Shape<PathConfig> {
return ca;
}
static calcLength(x, y, cmd, points) {
var len, p1, p2, t;
var path = Path;
let len, p1, p2, t;
const path = Path;
switch (cmd) {
case 'L':
@ -857,21 +857,21 @@ export class Path extends Shape<PathConfig> {
psiDeg
) {
// Derived from: http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
var psi = psiDeg * (Math.PI / 180.0);
var xp =
const psi = psiDeg * (Math.PI / 180.0);
const xp =
(Math.cos(psi) * (x1 - x2)) / 2.0 + (Math.sin(psi) * (y1 - y2)) / 2.0;
var yp =
const yp =
(-1 * Math.sin(psi) * (x1 - x2)) / 2.0 +
(Math.cos(psi) * (y1 - y2)) / 2.0;
var lambda = (xp * xp) / (rx * rx) + (yp * yp) / (ry * ry);
const lambda = (xp * xp) / (rx * rx) + (yp * yp) / (ry * ry);
if (lambda > 1) {
rx *= Math.sqrt(lambda);
ry *= Math.sqrt(lambda);
}
var f = Math.sqrt(
let f = Math.sqrt(
(rx * rx * (ry * ry) - rx * rx * (yp * yp) - ry * ry * (xp * xp)) /
(rx * rx * (yp * yp) + ry * ry * (xp * xp))
);
@ -883,25 +883,25 @@ export class Path extends Shape<PathConfig> {
f = 0;
}
var cxp = (f * rx * yp) / ry;
var cyp = (f * -ry * xp) / rx;
const cxp = (f * rx * yp) / ry;
const cyp = (f * -ry * xp) / rx;
var cx = (x1 + x2) / 2.0 + Math.cos(psi) * cxp - Math.sin(psi) * cyp;
var cy = (y1 + y2) / 2.0 + Math.sin(psi) * cxp + Math.cos(psi) * cyp;
const cx = (x1 + x2) / 2.0 + Math.cos(psi) * cxp - Math.sin(psi) * cyp;
const cy = (y1 + y2) / 2.0 + Math.sin(psi) * cxp + Math.cos(psi) * cyp;
var vMag = function (v) {
const vMag = function (v) {
return Math.sqrt(v[0] * v[0] + v[1] * v[1]);
};
var vRatio = function (u, v) {
const vRatio = function (u, v) {
return (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v));
};
var vAngle = function (u, v) {
const vAngle = function (u, v) {
return (u[0] * v[1] < u[1] * v[0] ? -1 : 1) * Math.acos(vRatio(u, v));
};
var theta = vAngle([1, 0], [(xp - cxp) / rx, (yp - cyp) / ry]);
var u = [(xp - cxp) / rx, (yp - cyp) / ry];
var v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry];
var dTheta = vAngle(u, v);
const theta = vAngle([1, 0], [(xp - cxp) / rx, (yp - cyp) / ry]);
const u = [(xp - cxp) / rx, (yp - cyp) / ry];
const v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry];
let dTheta = vAngle(u, v);
if (vRatio(u, v) <= -1) {
dTheta = Math.PI;

2
src/shapes/Rect.ts
View File

@ -31,7 +31,7 @@ export interface RectConfig extends ShapeConfig {
*/
export class Rect extends Shape<RectConfig> {
_sceneFunc(context: Context) {
var cornerRadius = this.cornerRadius(),
const cornerRadius = this.cornerRadius(),
width = this.width(),
height = this.height();

12
src/shapes/RegularPolygon.ts
View File

@ -37,7 +37,7 @@ export class RegularPolygon extends Shape<RegularPolygonConfig> {
context.beginPath();
context.moveTo(points[0].x, points[0].y);
for (var n = 1; n < points.length; n++) {
for (let n = 1; n < points.length; n++) {
context.lineTo(points[n].x, points[n].y);
}
@ -48,7 +48,7 @@ export class RegularPolygon extends Shape<RegularPolygonConfig> {
const sides = this.attrs.sides as number;
const radius = this.attrs.radius || 0;
const points: Vector2d[] = [];
for (var n = 0; n < sides; n++) {
for (let n = 0; n < sides; n++) {
points.push({
x: radius * Math.sin((n * 2 * Math.PI) / sides),
y: -1 * radius * Math.cos((n * 2 * Math.PI) / sides),
@ -59,10 +59,10 @@ export class RegularPolygon extends Shape<RegularPolygonConfig> {
getSelfRect() {
const points = this._getPoints();
var minX = points[0].x;
var maxX = points[0].y;
var minY = points[0].x;
var maxY = points[0].y;
let minX = points[0].x;
let maxX = points[0].y;
let minY = points[0].x;
let maxY = points[0].y;
points.forEach((point) => {
minX = Math.min(minX, point.x);
maxX = Math.max(maxX, point.x);

2
src/shapes/Ring.ts
View File

@ -10,7 +10,7 @@ export interface RingConfig extends ShapeConfig {
outerRadius: number;
}
var PIx2 = Math.PI * 2;
const PIx2 = Math.PI * 2;
/**
* Ring constructor
* @constructor

18
src/shapes/Sprite.ts
View File

@ -70,7 +70,7 @@ export class Sprite extends Shape<SpriteConfig> {
super(config);
this.anim = new Animation(() => {
// if we don't need to redraw layer we should return false
var updated = this._updated;
const updated = this._updated;
this._updated = false;
return updated;
});
@ -92,7 +92,7 @@ export class Sprite extends Shape<SpriteConfig> {
}
_sceneFunc(context: Context) {
var anim = this.animation(),
const anim = this.animation(),
index = this.frameIndex(),
ix4 = index * 4,
set = this.animations()[anim],
@ -112,7 +112,7 @@ export class Sprite extends Shape<SpriteConfig> {
if (image) {
if (offsets) {
var offset = offsets[anim],
const offset = offsets[anim],
ix2 = index * 2;
context.drawImage(
image,
@ -131,7 +131,7 @@ export class Sprite extends Shape<SpriteConfig> {
}
}
_hitFunc(context: Context) {
var anim = this.animation(),
const anim = this.animation(),
index = this.frameIndex(),
ix4 = index * 4,
set = this.animations()[anim],
@ -141,8 +141,8 @@ export class Sprite extends Shape<SpriteConfig> {
context.beginPath();
if (offsets) {
var offset = offsets[anim];
var ix2 = index * 2;
const offset = offsets[anim];
const ix2 = index * 2;
context.rect(offset[ix2 + 0], offset[ix2 + 1], width, height);
} else {
context.rect(0, 0, width, height);
@ -156,7 +156,7 @@ export class Sprite extends Shape<SpriteConfig> {
}
_setInterval() {
var that = this;
const that = this;
this.interval = setInterval(function () {
that._updateIndex();
}, 1000 / this.frameRate());
@ -170,7 +170,7 @@ export class Sprite extends Shape<SpriteConfig> {
if (this.isRunning()) {
return;
}
var layer = this.getLayer();
const layer = this.getLayer();
/*
* animation object has no executable function because
@ -201,7 +201,7 @@ export class Sprite extends Shape<SpriteConfig> {
return this.anim.isRunning();
}
_updateIndex() {
var index = this.frameIndex(),
const index = this.frameIndex(),
animation = this.animation(),
animations = this.animations(),
anim = animations[animation],

10
src/shapes/Star.ts
View File

@ -37,17 +37,17 @@ export interface StarConfig extends ShapeConfig {
*/
export class Star extends Shape<StarConfig> {
_sceneFunc(context: Context) {
var innerRadius = this.innerRadius(),
const innerRadius = this.innerRadius(),
outerRadius = this.outerRadius(),
numPoints = this.numPoints();
context.beginPath();
context.moveTo(0, 0 - outerRadius);
for (var n = 1; n < numPoints * 2; n++) {
var radius = n % 2 === 0 ? outerRadius : innerRadius;
var x = radius * Math.sin((n * Math.PI) / numPoints);
var y = -1 * radius * Math.cos((n * Math.PI) / numPoints);
for (let n = 1; n < numPoints * 2; n++) {
const radius = n % 2 === 0 ? outerRadius : innerRadius;
const x = radius * Math.sin((n * Math.PI) / numPoints);
const y = -1 * radius * Math.cos((n * Math.PI) / numPoints);
context.lineTo(x, y);
}
context.closePath();

70
src/shapes/Text.ts
View File

@ -60,7 +60,7 @@ export interface TextConfig extends ShapeConfig {
}
// constants
var AUTO = 'auto',
const AUTO = 'auto',
//CANVAS = 'canvas',
CENTER = 'center',
INHERIT = 'inherit',
@ -119,7 +119,7 @@ function normalizeFontFamily(fontFamily: string) {
.join(', ');
}
var dummyContext: CanvasRenderingContext2D;
let dummyContext: CanvasRenderingContext2D;
function getDummyContext() {
if (dummyContext) {
return dummyContext;
@ -194,21 +194,21 @@ export class Text extends Shape<TextConfig> {
constructor(config?: TextConfig) {
super(checkDefaultFill(config));
// update text data for certain attr changes
for (var n = 0; n < attrChangeListLen; n++) {
for (let n = 0; n < attrChangeListLen; n++) {
this.on(ATTR_CHANGE_LIST[n] + CHANGE_KONVA, this._setTextData);
}
this._setTextData();
}
_sceneFunc(context: Context) {
var textArr = this.textArr,
const textArr = this.textArr,
textArrLen = textArr.length;
if (!this.text()) {
return;
}
var padding = this.padding(),
let padding = this.padding(),
fontSize = this.fontSize(),
lineHeightPx = this.lineHeight() * fontSize,
verticalAlign = this.verticalAlign(),
@ -225,10 +225,10 @@ export class Text extends Shape<TextConfig> {
direction = direction === INHERIT ? context.direction : direction;
var translateY = lineHeightPx / 2;
var baseline = MIDDLE;
let translateY = lineHeightPx / 2;
let baseline = MIDDLE;
if (Konva._fixTextRendering) {
var metrics = this.measureSize('M'); // Use a sample character to get the ascent
const metrics = this.measureSize('M'); // Use a sample character to get the ascent
baseline = 'alphabetic';
translateY =
@ -282,7 +282,7 @@ export class Text extends Shape<TextConfig> {
context.save();
context.beginPath();
let yOffset = Konva._fixTextRendering
const yOffset = Konva._fixTextRendering
? Math.round(fontSize / 4)
: Math.round(fontSize / 2);
const x = lineTranslateX;
@ -306,7 +306,7 @@ export class Text extends Shape<TextConfig> {
if (shouldLineThrough) {
context.save();
context.beginPath();
let yOffset = Konva._fixTextRendering ? -Math.round(fontSize / 4) : 0;
const yOffset = Konva._fixTextRendering ? -Math.round(fontSize / 4) : 0;
context.moveTo(lineTranslateX, translateY + lineTranslateY + yOffset);
spacesNumber = text.split(' ').length - 1;
oneWord = spacesNumber === 0;
@ -330,9 +330,9 @@ export class Text extends Shape<TextConfig> {
if (direction !== RTL && (letterSpacing !== 0 || align === JUSTIFY)) {
// var words = text.split(' ');
spacesNumber = text.split(' ').length - 1;
var array = stringToArray(text);
for (var li = 0; li < array.length; li++) {
var letter = array[li];
const array = stringToArray(text);
for (let li = 0; li < array.length; li++) {
const letter = array[li];
// skip justify for the last line
if (letter === ' ' && !lastLine && align === JUSTIFY) {
lineTranslateX += (totalWidth - padding * 2 - width) / spacesNumber;
@ -364,7 +364,7 @@ export class Text extends Shape<TextConfig> {
}
}
_hitFunc(context: Context) {
var width = this.getWidth(),
const width = this.getWidth(),
height = this.getHeight();
context.beginPath();
@ -373,7 +373,7 @@ export class Text extends Shape<TextConfig> {
context.fillStrokeShape(this);
}
setText(text: string) {
var str = Util._isString(text)
const str = Util._isString(text)
? text
: text === null || text === undefined
? ''
@ -382,11 +382,11 @@ export class Text extends Shape<TextConfig> {
return this;
}
getWidth() {
var isAuto = this.attrs.width === AUTO || this.attrs.width === undefined;
const isAuto = this.attrs.width === AUTO || this.attrs.width === undefined;
return isAuto ? this.getTextWidth() + this.padding() * 2 : this.attrs.width;
}
getHeight() {
var isAuto = this.attrs.height === AUTO || this.attrs.height === undefined;
const isAuto = this.attrs.height === AUTO || this.attrs.height === undefined;
return isAuto
? this.fontSize() * this.textArr.length * this.lineHeight() +
this.padding() * 2
@ -417,7 +417,7 @@ export class Text extends Shape<TextConfig> {
* @returns {Object} { width , height } of measured text
*/
measureSize(text: string) {
var _context = getDummyContext(),
let _context = getDummyContext(),
fontSize = this.fontSize(),
metrics: TextMetrics;
@ -468,7 +468,7 @@ export class Text extends Shape<TextConfig> {
if (align === JUSTIFY) {
line = line.trim();
}
var width = this._getTextWidth(line);
const width = this._getTextWidth(line);
return this.textArr.push({
text: line,
width: width,
@ -476,15 +476,15 @@ export class Text extends Shape<TextConfig> {
});
}
_getTextWidth(text: string) {
var letterSpacing = this.letterSpacing();
var length = text.length;
const letterSpacing = this.letterSpacing();
const length = text.length;
return (
getDummyContext().measureText(text).width +
(length ? letterSpacing * (length - 1) : 0)
);
}
_setTextData() {
var lines = this.text().split('\n'),
let lines = this.text().split('\n'),
fontSize = +this.fontSize(),
textWidth = 0,
lineHeightPx = this.lineHeight() * fontSize,
@ -504,11 +504,11 @@ export class Text extends Shape<TextConfig> {
this.textArr = [];
getDummyContext().font = this._getContextFont();
var additionalWidth = shouldAddEllipsis ? this._getTextWidth(ELLIPSIS) : 0;
for (var i = 0, max = lines.length; i < max; ++i) {
var line = lines[i];
const additionalWidth = shouldAddEllipsis ? this._getTextWidth(ELLIPSIS) : 0;
for (let i = 0, max = lines.length; i < max; ++i) {
let line = lines[i];
var lineWidth = this._getTextWidth(line);
let lineWidth = this._getTextWidth(line);
if (fixedWidth && lineWidth > maxWidth) {
/*
* if width is fixed and line does not fit entirely
@ -519,12 +519,12 @@ export class Text extends Shape<TextConfig> {
* use binary search to find the longest substring that
* that would fit in the specified width
*/
var low = 0,
let low = 0,
high = line.length,
match = '',
matchWidth = 0;
while (low < high) {
var mid = (low + high) >>> 1,
const mid = (low + high) >>> 1,
substr = line.slice(0, mid + 1),
substrWidth = this._getTextWidth(substr) + additionalWidth;
if (substrWidth <= maxWidth) {
@ -545,8 +545,8 @@ export class Text extends Shape<TextConfig> {
if (wrapAtWord) {
// try to find a space or dash where wrapping could be done
var wrapIndex;
var nextChar = line[match.length];
var nextIsSpaceOrDash = nextChar === SPACE || nextChar === DASH;
const nextChar = line[match.length];
const nextIsSpaceOrDash = nextChar === SPACE || nextChar === DASH;
if (nextIsSpaceOrDash && matchWidth <= maxWidth) {
wrapIndex = match.length;
} else {
@ -568,7 +568,7 @@ export class Text extends Shape<TextConfig> {
textWidth = Math.max(textWidth, matchWidth);
currentHeightPx += lineHeightPx;
var shouldHandleEllipsis =
const shouldHandleEllipsis =
this._shouldHandleEllipsis(currentHeightPx);
if (shouldHandleEllipsis) {
this._tryToAddEllipsisToLastLine();
@ -629,7 +629,7 @@ export class Text extends Shape<TextConfig> {
* @returns
*/
_shouldHandleEllipsis(currentHeightPx: number): boolean {
var fontSize = +this.fontSize(),
const fontSize = +this.fontSize(),
lineHeightPx = this.lineHeight() * fontSize,
height = this.attrs.height,
fixedHeight = height !== AUTO && height !== undefined,
@ -645,19 +645,19 @@ export class Text extends Shape<TextConfig> {
}
_tryToAddEllipsisToLastLine(): void {
var width = this.attrs.width,
const width = this.attrs.width,
fixedWidth = width !== AUTO && width !== undefined,
padding = this.padding(),
maxWidth = width - padding * 2,
shouldAddEllipsis = this.ellipsis();
var lastLine = this.textArr[this.textArr.length - 1];
const lastLine = this.textArr[this.textArr.length - 1];
if (!lastLine || !shouldAddEllipsis) {
return;
}
if (fixedWidth) {
var haveSpace = this._getTextWidth(lastLine.text + ELLIPSIS) < maxWidth;
const haveSpace = this._getTextWidth(lastLine.text + ELLIPSIS) < maxWidth;
if (!haveSpace) {
lastLine.text = lastLine.text.slice(0, lastLine.text.length - 3);
}

46
src/shapes/TextPath.ts
View File

@ -18,7 +18,7 @@ export interface TextPathConfig extends ShapeConfig {
letterSpacing?: number;
}
var EMPTY_STRING = '',
const EMPTY_STRING = '',
NORMAL = 'normal';
function _fillFunc(this: TextPath, context) {
@ -137,18 +137,18 @@ export class TextPath extends Shape<TextPathConfig> {
context.setAttr('textAlign', 'left');
context.save();
var textDecoration = this.textDecoration();
var fill = this.fill();
var fontSize = this.fontSize();
const textDecoration = this.textDecoration();
const fill = this.fill();
const fontSize = this.fontSize();
var glyphInfo = this.glyphInfo;
const glyphInfo = this.glyphInfo;
if (textDecoration === 'underline') {
context.beginPath();
}
for (var i = 0; i < glyphInfo.length; i++) {
for (let i = 0; i < glyphInfo.length; i++) {
context.save();
var p0 = glyphInfo[i].p0;
const p0 = glyphInfo[i].p0;
context.translate(p0.x, p0.y);
context.rotate(glyphInfo[i].rotation);
@ -184,13 +184,13 @@ export class TextPath extends Shape<TextPathConfig> {
_hitFunc(context: Context) {
context.beginPath();
var glyphInfo = this.glyphInfo;
const glyphInfo = this.glyphInfo;
if (glyphInfo.length >= 1) {
var p0 = glyphInfo[0].p0;
const p0 = glyphInfo[0].p0;
context.moveTo(p0.x, p0.y);
}
for (var i = 0; i < glyphInfo.length; i++) {
var p1 = glyphInfo[i].p1;
for (let i = 0; i < glyphInfo.length; i++) {
const p1 = glyphInfo[i].p1;
context.lineTo(p1.x, p1.y);
}
context.setAttr('lineWidth', this.fontSize());
@ -220,13 +220,13 @@ export class TextPath extends Shape<TextPathConfig> {
}
_getTextSize(text: string) {
var dummyCanvas = this.dummyCanvas;
var _context = dummyCanvas.getContext('2d')!;
const dummyCanvas = this.dummyCanvas;
const _context = dummyCanvas.getContext('2d')!;
_context.save();
_context.font = this._getContextFont();
var metrics = _context.measureText(text);
const metrics = _context.measureText(text);
_context.restore();
@ -271,7 +271,7 @@ export class TextPath extends Shape<TextPathConfig> {
// 3. Calculate the rotation, width, and midpoint of the glyph using the start and end points,
// 4. Add glyph width to the offsetToGlyph and repeat
let offsetToGlyph = offset;
for (var i = 0; i < charArr.length; i++) {
for (let i = 0; i < charArr.length; i++) {
const charStartPoint = this._getPointAtLength(offsetToGlyph);
if (!charStartPoint) return;
@ -338,7 +338,7 @@ export class TextPath extends Shape<TextPathConfig> {
height: 0,
};
}
var points: number[] = [];
const points: number[] = [];
this.glyphInfo.forEach(function (info) {
points.push(info.p0.x);
@ -346,12 +346,12 @@ export class TextPath extends Shape<TextPathConfig> {
points.push(info.p1.x);
points.push(info.p1.y);
});
var minX = points[0] || 0;
var maxX = points[0] || 0;
var minY = points[1] || 0;
var maxY = points[1] || 0;
var x, y;
for (var i = 0; i < points.length / 2; i++) {
let minX = points[0] || 0;
let maxX = points[0] || 0;
let minY = points[1] || 0;
let maxY = points[1] || 0;
let x, y;
for (let i = 0; i < points.length / 2; i++) {
x = points[i * 2];
y = points[i * 2 + 1];
minX = Math.min(minX, x);
@ -359,7 +359,7 @@ export class TextPath extends Shape<TextPathConfig> {
minY = Math.min(minY, y);
maxY = Math.max(maxY, y);
}
var fontSize = this.fontSize();
const fontSize = this.fontSize();
return {
x: minX - fontSize / 2,
y: minY - fontSize / 2,

126
src/shapes/Transformer.ts
View File

@ -50,9 +50,9 @@ export interface TransformerConfig extends ContainerConfig {
anchorStyleFunc?: (anchor: Rect) => void;
}
var EVENTS_NAME = 'tr-konva';
const EVENTS_NAME = 'tr-konva';
var ATTR_CHANGE_LIST = [
const ATTR_CHANGE_LIST = [
'resizeEnabledChange',
'rotateAnchorOffsetChange',
'rotateEnabledChange',
@ -72,9 +72,9 @@ var ATTR_CHANGE_LIST = [
.map((e) => e + `.${EVENTS_NAME}`)
.join(' ');
var NODES_RECT = 'nodesRect';
const NODES_RECT = 'nodesRect';
var TRANSFORM_CHANGE_STR = [
const TRANSFORM_CHANGE_STR = [
'widthChange',
'heightChange',
'scaleXChange',
@ -88,7 +88,7 @@ var TRANSFORM_CHANGE_STR = [
'strokeWidthChange',
];
var ANGLES = {
const ANGLES = {
'top-left': -45,
'top-center': 0,
'top-right': 45,
@ -107,7 +107,7 @@ function getCursor(anchorName, rad, rotateCursor) {
}
rad += Util.degToRad(ANGLES[anchorName] || 0);
var angle = ((Util.radToDeg(rad) % 360) + 360) % 360;
const angle = ((Util.radToDeg(rad) % 360) + 360) % 360;
if (Util._inRange(angle, 315 + 22.5, 360) || Util._inRange(angle, 0, 22.5)) {
// TOP
@ -140,7 +140,7 @@ function getCursor(anchorName, rad, rotateCursor) {
}
}
var ANCHORS_NAMES = [
const ANCHORS_NAMES = [
'top-left',
'top-center',
'top-right',
@ -151,7 +151,7 @@ var ANCHORS_NAMES = [
'bottom-right',
];
var MAX_SAFE_INTEGER = 100000000;
const MAX_SAFE_INTEGER = 100000000;
function getCenter(shape: Box) {
return {
@ -351,7 +351,7 @@ export class Transformer extends Group {
this._resetTransformCache();
// we may need it if we set node in initial props
// so elements are not defined yet
var elementsCreated = !!this.findOne('.top-left');
const elementsCreated = !!this.findOne('.top-left');
if (elementsCreated) {
this.update();
}
@ -449,17 +449,17 @@ export class Transformer extends Group {
// return absolute rotated bounding rectangle
__getNodeShape(node: Node, rot = this.rotation(), relative?: Node) {
var rect = node.getClientRect({
const rect = node.getClientRect({
skipTransform: true,
skipShadow: true,
skipStroke: this.ignoreStroke(),
});
var absScale = node.getAbsoluteScale(relative);
var absPos = node.getAbsolutePosition(relative);
const absScale = node.getAbsoluteScale(relative);
const absPos = node.getAbsolutePosition(relative);
var dx = rect.x * absScale.x - node.offsetX() * absScale.x;
var dy = rect.y * absScale.y - node.offsetY() * absScale.y;
const dx = rect.x * absScale.x - node.offsetX() * absScale.x;
const dy = rect.y * absScale.y - node.offsetY() * absScale.y;
const rotation =
(Konva.getAngle(node.getAbsoluteRotation()) + Math.PI * 2) %
@ -479,7 +479,7 @@ export class Transformer extends Group {
}
// returns box + rotation of all shapes
__getNodeRect() {
var node = this.getNode();
const node = this.getNode();
if (!node) {
return {
x: -MAX_SAFE_INTEGER,
@ -497,15 +497,15 @@ export class Transformer extends Group {
skipShadow: true,
skipStroke: this.ignoreStroke(),
});
var points = [
const points = [
{ x: box.x, y: box.y },
{ x: box.x + box.width, y: box.y },
{ x: box.x + box.width, y: box.y + box.height },
{ x: box.x, y: box.y + box.height },
];
var trans = node.getAbsoluteTransform();
const trans = node.getAbsoluteTransform();
points.forEach(function (point) {
var transformed = trans.point(point);
const transformed = trans.point(point);
totalPoints.push(transformed);
});
});
@ -513,12 +513,12 @@ export class Transformer extends Group {
const tr = new Transform();
tr.rotate(-Konva.getAngle(this.rotation()));
var minX: number = Infinity,
let minX: number = Infinity,
minY: number = Infinity,
maxX: number = -Infinity,
maxY: number = -Infinity;
totalPoints.forEach(function (point) {
var transformed = tr.point(point);
const transformed = tr.point(point);
if (minX === undefined) {
minX = maxX = transformed.x;
minY = maxY = transformed.y;
@ -570,7 +570,7 @@ export class Transformer extends Group {
this._createAnchor('rotater');
}
_createAnchor(name) {
var anchor = new Rect({
const anchor = new Rect({
stroke: 'rgb(0, 161, 255)',
fill: 'white',
strokeWidth: 1,
@ -581,7 +581,7 @@ export class Transformer extends Group {
draggable: true,
hitStrokeWidth: TOUCH_DEVICE ? 10 : 'auto',
});
var self = this;
const self = this;
anchor.on('mousedown touchstart', function (e) {
self._handleMouseDown(e);
});
@ -595,9 +595,9 @@ export class Transformer extends Group {
// add hover styling
anchor.on('mouseenter', () => {
var rad = Konva.getAngle(this.rotation());
var rotateCursor = this.rotateAnchorCursor();
var cursor = getCursor(name, rad, rotateCursor);
const rad = Konva.getAngle(this.rotation());
const rotateCursor = this.rotateAnchorCursor();
const cursor = getCursor(name, rad, rotateCursor);
anchor.getStage()!.content &&
(anchor.getStage()!.content.style.cursor = cursor);
this._cursorChange = true;
@ -610,14 +610,14 @@ export class Transformer extends Group {
this.add(anchor);
}
_createBack() {
var back = new Shape({
const back = new Shape({
name: 'back',
width: 0,
height: 0,
draggable: true,
sceneFunc(ctx, shape) {
var tr = shape.getParent() as Transformer;
var padding = tr.padding();
const tr = shape.getParent() as Transformer;
const padding = tr.padding();
ctx.beginPath();
ctx.rect(
-padding,
@ -639,7 +639,7 @@ export class Transformer extends Group {
if (!this.shouldOverdrawWholeArea()) {
return;
}
var padding = this.padding();
const padding = this.padding();
ctx.beginPath();
ctx.rect(
-padding,
@ -677,11 +677,11 @@ export class Transformer extends Group {
}
this._movingAnchorName = e.target.name().split(' ')[0];
var attrs = this._getNodeRect();
var width = attrs.width;
var height = attrs.height;
const attrs = this._getNodeRect();
const width = attrs.width;
const height = attrs.height;
var hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
const hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
this.sin = Math.abs(height / hypotenuse);
this.cos = Math.abs(width / hypotenuse);
@ -693,8 +693,8 @@ export class Transformer extends Group {
}
this._transforming = true;
var ap = e.target.getAbsolutePosition();
var pos = e.target.getStage().getPointerPosition();
const ap = e.target.getAbsolutePosition();
const pos = e.target.getStage().getPointerPosition();
this._anchorDragOffset = {
x: pos.x - ap.x,
y: pos.y - ap.y,
@ -706,9 +706,9 @@ export class Transformer extends Group {
});
}
_handleMouseMove(e) {
var x, y, newHypotenuse;
var anchorNode = this.findOne('.' + this._movingAnchorName)!;
var stage = anchorNode.getStage()!;
let x, y, newHypotenuse;
const anchorNode = this.findOne('.' + this._movingAnchorName)!;
const stage = anchorNode.getStage()!;
stage.setPointersPositions(e);
@ -733,7 +733,7 @@ export class Transformer extends Group {
// rotater is working very differently, so do it first
if (this._movingAnchorName === 'rotater') {
var attrs = this._getNodeRect();
const attrs = this._getNodeRect();
x = anchorNode.x() - attrs.width / 2;
y = -anchorNode.y() + attrs.height / 2;
@ -744,7 +744,7 @@ export class Transformer extends Group {
delta -= Math.PI;
}
var oldRotation = Konva.getAngle(this.rotation());
const oldRotation = Konva.getAngle(this.rotation());
const newRotation = oldRotation + delta;
const tol = Konva.getAngle(this.rotationSnapTolerance());
@ -757,9 +757,9 @@ export class Transformer extends Group {
return;
}
var shiftBehavior = this.shiftBehavior();
const shiftBehavior = this.shiftBehavior();
var keepProportion: boolean;
let keepProportion: boolean;
if (shiftBehavior === 'inverted') {
keepProportion = this.keepRatio() && !e.shiftKey;
} else if (shiftBehavior === 'none') {
@ -908,13 +908,13 @@ 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 topOffsetX = topLeft.x();
var topOffsetY = topLeft.y();
const topLeft = this.findOne('.top-left')!;
const bottomRight = this.findOne('.bottom-right')!;
const topOffsetX = topLeft.x();
const topOffsetY = topLeft.y();
var bottomOffsetX = this.getWidth() - bottomRight.x();
var bottomOffsetY = this.getHeight() - bottomRight.y();
const bottomOffsetX = this.getWidth() - bottomRight.x();
const bottomOffsetY = this.getHeight() - bottomRight.y();
bottomRight.move({
x: -topOffsetX,
@ -927,15 +927,15 @@ export class Transformer extends Group {
});
}
var absPos = this.findOne('.top-left')!.getAbsolutePosition();
const absPos = this.findOne('.top-left')!.getAbsolutePosition();
x = absPos.x;
y = absPos.y;
var width =
const width =
this.findOne('.bottom-right')!.x() - this.findOne('.top-left')!.x();
var height =
const height =
this.findOne('.bottom-right')!.y() - this.findOne('.top-left')!.y();
this._fitNodesInto(
@ -964,7 +964,7 @@ export class Transformer extends Group {
window.removeEventListener('mouseup', this._handleMouseUp, true);
window.removeEventListener('touchend', this._handleMouseUp, true);
}
var node = this.getNode();
const node = this.getNode();
activeTransformersCount--;
this._fire('transformend', { evt: e, target: node });
// redraw layer to restore hit graph
@ -981,7 +981,7 @@ export class Transformer extends Group {
}
}
_fitNodesInto(newAttrs, evt?) {
var oldAttrs = this._getNodeRect();
const oldAttrs = this._getNodeRect();
const minSize = 1;
@ -996,7 +996,7 @@ export class Transformer extends Group {
return;
}
var t = new Transform();
const t = new Transform();
t.rotate(Konva.getAngle(this.rotation()));
if (
this._movingAnchorName &&
@ -1153,16 +1153,16 @@ export class Transformer extends Group {
}
update() {
var attrs = this._getNodeRect();
const attrs = this._getNodeRect();
this.rotation(Util._getRotation(attrs.rotation));
var width = attrs.width;
var height = attrs.height;
const width = attrs.width;
const height = attrs.height;
var enabledAnchors = this.enabledAnchors();
var resizeEnabled = this.resizeEnabled();
var padding = this.padding();
const enabledAnchors = this.enabledAnchors();
const resizeEnabled = this.resizeEnabled();
const padding = this.padding();
var anchorSize = this.anchorSize();
const anchorSize = this.anchorSize();
const anchors = this.find<Rect>('._anchor');
anchors.forEach((node) => {
node.setAttrs({
@ -1273,7 +1273,7 @@ export class Transformer extends Group {
stopTransform() {
if (this._transforming) {
this._removeEvents();
var anchorNode = this.findOne('.' + this._movingAnchorName);
const anchorNode = this.findOne('.' + this._movingAnchorName);
if (anchorNode) {
anchorNode.stopDrag();
}
@ -1296,7 +1296,7 @@ export class Transformer extends Group {
// overwrite clone to NOT use method from Container
clone(obj?: any) {
var node = Node.prototype.clone.call(this, obj);
const node = Node.prototype.clone.call(this, obj);
return node as this;
}
getClientRect() {