mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
more strict typescript
This commit is contained in:
Anton Lavrenov
parent
cd2e17338a
commit
d33b8e944b
@ -61,11 +61,11 @@ export class Animation {
|
||||
* @param {Konva.Layer|Array} [layers] layer(s) to be redrawn. Can be a layer, an array of layers, or null. Not specifying a node will result in no redraw.
|
||||
* @return {Konva.Animation} this
|
||||
*/
|
||||
setLayers(layers:null | Layer | Layer[]) {
|
||||
setLayers(layers: null | Layer | Layer[]) {
|
||||
let lays: Layer[] = [];
|
||||
// if passing in no layers
|
||||
if (layers) {
|
||||
lays = Array.isArray(layers)? layers : [layers]
|
||||
lays = Array.isArray(layers) ? layers : [layers];
|
||||
}
|
||||
this.layers = lays;
|
||||
return this;
|
||||
@ -87,8 +87,8 @@ export class Animation {
|
||||
* @return {Bool} true if layer is added to animation, otherwise false
|
||||
*/
|
||||
addLayer(layer: Layer) {
|
||||
const layers = this.layers
|
||||
const len = layers.length
|
||||
const layers = this.layers;
|
||||
const len = layers.length;
|
||||
|
||||
// don't add the layer if it already exists
|
||||
for (let n = 0; n < len; n++) {
|
||||
@ -107,9 +107,9 @@ export class Animation {
|
||||
* @return {Bool} is animation running?
|
||||
*/
|
||||
isRunning() {
|
||||
const a = Animation
|
||||
const animations = a.animations
|
||||
const len = animations.length
|
||||
const a = Animation;
|
||||
const animations = a.animations;
|
||||
const len = animations.length;
|
||||
|
||||
for (let n = 0; n < len; n++) {
|
||||
if (animations[n].id === this.id) {
|
||||
@ -148,7 +148,7 @@ export class Animation {
|
||||
this.frame.frameRate = 1000 / this.frame.timeDiff;
|
||||
}
|
||||
|
||||
static animations = [];
|
||||
static animations: Array<Animation> = [];
|
||||
static animIdCounter = 0;
|
||||
static animRunning = false;
|
||||
|
||||
@ -157,9 +157,9 @@ export class Animation {
|
||||
this._handleAnimation();
|
||||
}
|
||||
static _removeAnimation(anim) {
|
||||
const id = anim.id
|
||||
const animations = this.animations
|
||||
const len = animations.length
|
||||
const id = anim.id;
|
||||
const animations = this.animations;
|
||||
const len = animations.length;
|
||||
|
||||
for (let n = 0; n < len; n++) {
|
||||
if (animations[n].id === id) {
|
||||
@ -170,8 +170,8 @@ export class Animation {
|
||||
}
|
||||
|
||||
static _runFrames() {
|
||||
const layerHash = {}
|
||||
const animations = this.animations
|
||||
const layerHash = {};
|
||||
const animations = this.animations;
|
||||
/*
|
||||
* loop through all animations and execute animation
|
||||
* function. if the animation object has specified node,
|
||||
@ -193,7 +193,7 @@ export class Animation {
|
||||
const layersLen = layers.length;
|
||||
|
||||
// if animation object has a function, execute it
|
||||
let needRedraw
|
||||
let needRedraw;
|
||||
if (func) {
|
||||
// allow anim bypassing drawing
|
||||
needRedraw = func.call(anim, anim.frame) !== false;
|
||||
|
||||
@ -197,7 +197,7 @@ export abstract class Container<
|
||||
* return node.getType() === 'Node' && node.getAbsoluteOpacity() < 1;
|
||||
* });
|
||||
*/
|
||||
find<ChildNode extends Node = Node>(selector): Array<ChildNode> {
|
||||
find<ChildNode extends Node>(selector): Array<ChildNode> {
|
||||
// protecting _generalFind to prevent user from accidentally adding
|
||||
// second argument and getting unexpected `findOne` result
|
||||
return this._generalFind<ChildNode>(selector, false);
|
||||
@ -317,7 +317,7 @@ export abstract class Container<
|
||||
getAllIntersections(pos) {
|
||||
var arr: Shape[] = [];
|
||||
|
||||
this.find('Shape').forEach(function (shape: Shape) {
|
||||
this.find<Shape>('Shape').forEach((shape) => {
|
||||
if (shape.isVisible() && shape.intersects(pos)) {
|
||||
arr.push(shape);
|
||||
}
|
||||
@ -437,13 +437,14 @@ export abstract class Container<
|
||||
}
|
||||
}
|
||||
|
||||
getClientRect(config?: {
|
||||
skipTransform?: boolean;
|
||||
skipShadow?: boolean;
|
||||
skipStroke?: boolean;
|
||||
relativeTo?: Container<Node>;
|
||||
}): IRect {
|
||||
config = config || {};
|
||||
getClientRect(
|
||||
config: {
|
||||
skipTransform?: boolean;
|
||||
skipShadow?: boolean;
|
||||
skipStroke?: boolean;
|
||||
relativeTo?: Container<Node>;
|
||||
} = {}
|
||||
): IRect {
|
||||
var skipTransform = config.skipTransform;
|
||||
var relativeTo = config.relativeTo;
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ import { IRect } from './types';
|
||||
import type { Node } from './Node';
|
||||
|
||||
function simplifyArray(arr: Array<any>) {
|
||||
var retArr = [],
|
||||
var retArr: Array<any> = [],
|
||||
len = arr.length,
|
||||
util = Util,
|
||||
n,
|
||||
@ -441,9 +441,19 @@ export class Context {
|
||||
if (a.length === 3) {
|
||||
_context.drawImage(a0, a1, a2);
|
||||
} else if (a.length === 5) {
|
||||
_context.drawImage(a0, a1, a2, a3, a4);
|
||||
_context.drawImage(a0, a1, a2, a3 as number, a4 as number);
|
||||
} else if (a.length === 9) {
|
||||
_context.drawImage(a0, a1, a2, a3, a4, a5, a6, a7, a8);
|
||||
_context.drawImage(
|
||||
a0,
|
||||
a1,
|
||||
a2,
|
||||
a3 as number,
|
||||
a4 as number,
|
||||
a5 as number,
|
||||
a6 as number,
|
||||
a7 as number,
|
||||
a8 as number
|
||||
);
|
||||
}
|
||||
}
|
||||
/**
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { Container } from './Container';
|
||||
import { Konva } from './Global';
|
||||
import { Node } from './Node';
|
||||
import { Vector2d } from './types';
|
||||
@ -44,7 +45,7 @@ export const DD = {
|
||||
DD._dragElements.forEach((elem, key) => {
|
||||
const { node } = elem;
|
||||
// we need to find pointer relative to that node
|
||||
const stage = node.getStage();
|
||||
const stage = node.getStage()!;
|
||||
stage.setPointersPositions(evt);
|
||||
|
||||
// it is possible that user call startDrag without any event
|
||||
@ -95,11 +96,11 @@ export const DD = {
|
||||
// dragBefore and dragAfter allows us to set correct order of events
|
||||
// setup all in dragbefore, and stop dragging only after pointerup triggered.
|
||||
_endDragBefore(evt?) {
|
||||
const drawNodes = [];
|
||||
const drawNodes: Array<Container> = [];
|
||||
DD._dragElements.forEach((elem) => {
|
||||
const { node } = elem;
|
||||
// we need to find pointer relative to that node
|
||||
const stage = node.getStage();
|
||||
const stage = node.getStage()!;
|
||||
if (evt) {
|
||||
stage.setPointersPositions(evt);
|
||||
}
|
||||
|
||||
58
src/Node.ts
58
src/Node.ts
@ -322,7 +322,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
|
||||
) {
|
||||
rect = this.getClientRect({
|
||||
skipTransform: true,
|
||||
relativeTo: this.getParent(),
|
||||
relativeTo: this.getParent() || undefined,
|
||||
});
|
||||
}
|
||||
var width = Math.ceil(conf.width || rect.width),
|
||||
@ -492,14 +492,17 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
|
||||
// redefine in Container and Shape
|
||||
throw new Error('abstract "getClientRect" method call');
|
||||
}
|
||||
_transformedRect(rect: IRect, top: Node) {
|
||||
_transformedRect(rect: IRect, top?: Node | null) {
|
||||
var points = [
|
||||
{ x: rect.x, y: rect.y },
|
||||
{ x: rect.x + rect.width, y: rect.y },
|
||||
{ x: rect.x + rect.width, y: rect.y + rect.height },
|
||||
{ x: rect.x, y: rect.y + rect.height },
|
||||
];
|
||||
var minX: number, minY: number, maxX: number, maxY: number;
|
||||
var minX: number = Infinity,
|
||||
minY: number = Infinity,
|
||||
maxX: number = -Infinity,
|
||||
maxY: number = -Infinity;
|
||||
var trans = this.getAbsoluteTransform(top);
|
||||
points.forEach(function (point) {
|
||||
var transformed = trans.point(point);
|
||||
@ -1084,8 +1087,9 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
|
||||
addChildren(nodes);
|
||||
}
|
||||
}
|
||||
if (that.nodeType !== UPPER_STAGE) {
|
||||
addChildren(that.getStage().getChildren());
|
||||
const stage = this.getStage();
|
||||
if (that.nodeType !== UPPER_STAGE && stage) {
|
||||
addChildren(stage.getChildren());
|
||||
}
|
||||
|
||||
return index;
|
||||
@ -1150,11 +1154,12 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
|
||||
* rect.getRelativePointerPosition();
|
||||
*/
|
||||
getRelativePointerPosition() {
|
||||
if (!this.getStage()) {
|
||||
const stage = this.getStage();
|
||||
if (!stage) {
|
||||
return null;
|
||||
}
|
||||
// get pointer (say mouse or touch) position
|
||||
var pos = this.getStage().getPointerPosition();
|
||||
var pos = stage.getPointerPosition();
|
||||
if (!pos) {
|
||||
return null;
|
||||
}
|
||||
@ -1205,13 +1210,11 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
|
||||
return absoluteTransform.getTranslation();
|
||||
}
|
||||
setAbsolutePosition(pos: Vector2d) {
|
||||
var origTrans = this._clearTransform();
|
||||
const { x, y, ...origTrans } = this._clearTransform();
|
||||
|
||||
// don't clear translation
|
||||
this.attrs.x = origTrans.x;
|
||||
this.attrs.y = origTrans.y;
|
||||
delete origTrans.x;
|
||||
delete origTrans.y;
|
||||
this.attrs.x = x;
|
||||
this.attrs.y = y;
|
||||
|
||||
// important, use non cached value
|
||||
this._clearCache(TRANSFORM);
|
||||
@ -1298,7 +1301,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
|
||||
return this;
|
||||
}
|
||||
_eachAncestorReverse(func, top) {
|
||||
var family = [],
|
||||
var family: Array<Node> = [],
|
||||
parent = this.getParent(),
|
||||
len,
|
||||
n;
|
||||
@ -1541,7 +1544,11 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
|
||||
* // get one of the parent group
|
||||
* var parentGroups = node.findAncestors('Group');
|
||||
*/
|
||||
findAncestors(selector: string, includeSelf?: boolean, stopNode?: Node) {
|
||||
findAncestors(
|
||||
selector: string | Function,
|
||||
includeSelf?: boolean,
|
||||
stopNode?: Node
|
||||
) {
|
||||
var res: Array<Node> = [];
|
||||
|
||||
if (includeSelf && this._isMatch(selector)) {
|
||||
@ -1574,7 +1581,11 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
|
||||
* // get one of the parent group
|
||||
* var group = node.findAncestors('.mygroup');
|
||||
*/
|
||||
findAncestor(selector?: string, includeSelf?: boolean, stopNode?: Container) {
|
||||
findAncestor(
|
||||
selector: string | Function,
|
||||
includeSelf?: boolean,
|
||||
stopNode?: Container
|
||||
) {
|
||||
return this.findAncestors(selector, includeSelf, stopNode)[0];
|
||||
}
|
||||
// is current node match passed selector?
|
||||
@ -1639,12 +1650,12 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
|
||||
return this._getCache(STAGE, this._getStage);
|
||||
}
|
||||
|
||||
_getStage(): Stage | undefined {
|
||||
_getStage() {
|
||||
var parent = this.getParent();
|
||||
if (parent) {
|
||||
return parent.getStage();
|
||||
} else {
|
||||
return undefined;
|
||||
return null;
|
||||
}
|
||||
}
|
||||
/**
|
||||
@ -1689,7 +1700,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
|
||||
* @name Konva.Node#getAbsoluteTransform
|
||||
* @returns {Konva.Transform}
|
||||
*/
|
||||
getAbsoluteTransform(top?: Node) {
|
||||
getAbsoluteTransform(top?: Node | null) {
|
||||
// if using an argument, we can't cache the result.
|
||||
if (top) {
|
||||
return this._getAbsoluteTransform(top);
|
||||
@ -1756,7 +1767,7 @@ export abstract class Node<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 = this;
|
||||
var parent: Node | null = this;
|
||||
while (parent) {
|
||||
if (parent._isUnderCache) {
|
||||
top = parent;
|
||||
@ -2071,7 +2082,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
|
||||
pixelRatio?: number;
|
||||
mimeType?: string;
|
||||
quality?: number;
|
||||
callback?: (blob: Blob) => void;
|
||||
callback?: (blob: Blob | null) => void;
|
||||
}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
@ -2373,6 +2384,9 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
|
||||
var pointerId = evt ? evt.pointerId : undefined;
|
||||
var stage = this.getStage();
|
||||
var ap = this.getAbsolutePosition();
|
||||
if (!stage) {
|
||||
return;
|
||||
}
|
||||
var pos =
|
||||
stage._getPointerById(pointerId) ||
|
||||
stage._changedPointerPositions[0] ||
|
||||
@ -2399,7 +2413,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
|
||||
this._createDragElement(evt);
|
||||
}
|
||||
|
||||
const elem = DD._dragElements.get(this._id);
|
||||
const elem = DD._dragElements.get(this._id)!;
|
||||
elem.dragStatus = 'dragging';
|
||||
this.fire(
|
||||
'dragstart',
|
||||
@ -2415,7 +2429,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
|
||||
_setDragPosition(evt, elem) {
|
||||
// const pointers = this.getStage().getPointersPositions();
|
||||
// const pos = pointers.find(p => p.id === this._dragEventId);
|
||||
const pos = this.getStage()._getPointerById(elem.pointerId);
|
||||
const pos = this.getStage()!._getPointerById(elem.pointerId);
|
||||
|
||||
if (!pos) {
|
||||
return;
|
||||
|
||||
26
src/Shape.ts
26
src/Shape.ts
@ -105,7 +105,7 @@ function getDummyContext(): CanvasRenderingContext2D {
|
||||
if (dummyContext) {
|
||||
return dummyContext;
|
||||
}
|
||||
dummyContext = Util.createCanvasElement().getContext('2d');
|
||||
dummyContext = Util.createCanvasElement().getContext('2d')!;
|
||||
return dummyContext;
|
||||
}
|
||||
|
||||
@ -210,11 +210,11 @@ export class Shape<
|
||||
|
||||
getContext() {
|
||||
Util.warn('shape.getContext() method is deprecated. Please do not use it.');
|
||||
return this.getLayer().getContext();
|
||||
return this.getLayer()!.getContext();
|
||||
}
|
||||
getCanvas() {
|
||||
Util.warn('shape.getCanvas() method is deprecated. Please do not use it.');
|
||||
return this.getLayer().getCanvas();
|
||||
return this.getLayer()!.getCanvas();
|
||||
}
|
||||
|
||||
getSceneFunc() {
|
||||
@ -438,13 +438,15 @@ export class Shape<
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
intersects(point) {
|
||||
var stage = this.getStage(),
|
||||
bufferHitCanvas = stage.bufferHitCanvas,
|
||||
p;
|
||||
var stage = this.getStage();
|
||||
if (!stage) {
|
||||
return false;
|
||||
}
|
||||
const bufferHitCanvas = stage.bufferHitCanvas;
|
||||
|
||||
bufferHitCanvas.getContext().clear();
|
||||
this.drawHit(bufferHitCanvas, null, true);
|
||||
p = bufferHitCanvas.context.getImageData(
|
||||
this.drawHit(bufferHitCanvas, undefined, true);
|
||||
const p = bufferHitCanvas.context.getImageData(
|
||||
Math.round(point.x),
|
||||
Math.round(point.y),
|
||||
1,
|
||||
@ -456,7 +458,7 @@ export class Shape<
|
||||
destroy() {
|
||||
Node.prototype.destroy.call(this);
|
||||
delete shapes[this.colorKey];
|
||||
delete this.colorKey;
|
||||
delete (this as any).colorKey;
|
||||
return this;
|
||||
}
|
||||
// why do we need buffer canvas?
|
||||
@ -577,8 +579,8 @@ export class Shape<
|
||||
// 2 - when we are caching current
|
||||
// 3 - when node is cached and we need to draw it into layer
|
||||
|
||||
var layer = this.getLayer(),
|
||||
canvas = can || layer.getCanvas(),
|
||||
var layer = this.getLayer();
|
||||
var canvas = can || layer!.getCanvas(),
|
||||
context = canvas.getContext() as SceneContext,
|
||||
cachedCanvas = this._getCanvasCache(),
|
||||
drawFunc = this.getSceneFunc(),
|
||||
@ -663,7 +665,7 @@ export class Shape<
|
||||
}
|
||||
|
||||
var layer = this.getLayer(),
|
||||
canvas = can || layer.hitCanvas,
|
||||
canvas = can || layer!.hitCanvas,
|
||||
context = canvas && canvas.getContext(),
|
||||
drawFunc = this.hitFunc() || this.sceneFunc(),
|
||||
cachedCanvas = this._getCanvasCache(),
|
||||
|
||||
45
src/Stage.ts
45
src/Stage.ts
@ -279,7 +279,7 @@ export class Stage extends Container<Layer> {
|
||||
stages.splice(index, 1);
|
||||
}
|
||||
|
||||
Util.releaseCanvas(this.bufferCanvas._canvas, this.bufferHitCanvas._canvas)
|
||||
Util.releaseCanvas(this.bufferCanvas._canvas, this.bufferHitCanvas._canvas);
|
||||
|
||||
return this;
|
||||
}
|
||||
@ -468,23 +468,27 @@ export class Stage extends Container<Layer> {
|
||||
);
|
||||
});
|
||||
}
|
||||
_pointerenter(evt) {
|
||||
_pointerenter(evt: PointerEvent) {
|
||||
this.setPointersPositions(evt);
|
||||
const events = getEventsMap(evt.type);
|
||||
this._fire(events.pointerenter, {
|
||||
evt: evt,
|
||||
target: this,
|
||||
currentTarget: this,
|
||||
});
|
||||
if (events) {
|
||||
this._fire(events.pointerenter, {
|
||||
evt: evt,
|
||||
target: this,
|
||||
currentTarget: this,
|
||||
});
|
||||
}
|
||||
}
|
||||
_pointerover(evt) {
|
||||
this.setPointersPositions(evt);
|
||||
const events = getEventsMap(evt.type);
|
||||
this._fire(events.pointerover, {
|
||||
evt: evt,
|
||||
target: this,
|
||||
currentTarget: this,
|
||||
});
|
||||
if (events) {
|
||||
this._fire(events.pointerover, {
|
||||
evt: evt,
|
||||
target: this,
|
||||
currentTarget: this,
|
||||
});
|
||||
}
|
||||
}
|
||||
_getTargetShape(evenType) {
|
||||
let shape: Shape | null = this[evenType + 'targetShape'];
|
||||
@ -525,7 +529,7 @@ export class Stage extends Container<Layer> {
|
||||
currentTarget: this,
|
||||
});
|
||||
}
|
||||
this.pointerPos = undefined;
|
||||
this.pointerPos = null;
|
||||
this._pointerPositions = [];
|
||||
}
|
||||
_pointerdown(evt: TouchEvent | MouseEvent | PointerEvent) {
|
||||
@ -545,8 +549,7 @@ export class Stage extends Container<Layer> {
|
||||
Konva['_' + eventType + 'ListenClick'] = true;
|
||||
|
||||
// no shape detected? do nothing
|
||||
const hasShape = shape && shape.isListening();
|
||||
if (!hasShape) {
|
||||
if (!shape || !shape.isListening()) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -587,7 +590,7 @@ export class Stage extends Container<Layer> {
|
||||
if (!events) {
|
||||
return;
|
||||
}
|
||||
if (DD.isDragging && DD.node.preventDefault() && evt.cancelable) {
|
||||
if (DD.isDragging && DD.node!.preventDefault() && evt.cancelable) {
|
||||
evt.preventDefault();
|
||||
}
|
||||
this.setPointersPositions(evt);
|
||||
@ -753,7 +756,7 @@ export class Stage extends Container<Layer> {
|
||||
}
|
||||
_contextmenu(evt) {
|
||||
this.setPointersPositions(evt);
|
||||
var shape = this.getIntersection(this.getPointerPosition());
|
||||
var shape = this.getIntersection(this.getPointerPosition()!);
|
||||
|
||||
if (shape && shape.isListening()) {
|
||||
shape._fireAndBubble(CONTEXTMENU, { evt: evt });
|
||||
@ -768,7 +771,7 @@ export class Stage extends Container<Layer> {
|
||||
|
||||
_wheel(evt) {
|
||||
this.setPointersPositions(evt);
|
||||
var shape = this.getIntersection(this.getPointerPosition());
|
||||
var shape = this.getIntersection(this.getPointerPosition()!);
|
||||
|
||||
if (shape && shape.isListening()) {
|
||||
shape._fireAndBubble(WHEEL, { evt: evt });
|
||||
@ -785,7 +788,7 @@ export class Stage extends Container<Layer> {
|
||||
this.setPointersPositions(evt);
|
||||
const shape =
|
||||
PointerEvents.getCapturedShape(evt.pointerId) ||
|
||||
this.getIntersection(this.getPointerPosition());
|
||||
this.getIntersection(this.getPointerPosition()!);
|
||||
|
||||
if (shape) {
|
||||
shape._fireAndBubble(POINTERUP, PointerEvents.createEvent(evt));
|
||||
@ -814,8 +817,8 @@ export class Stage extends Container<Layer> {
|
||||
*/
|
||||
setPointersPositions(evt) {
|
||||
var contentPosition = this._getContentPosition(),
|
||||
x = null,
|
||||
y = null;
|
||||
x: number | null = null,
|
||||
y: number | null = null;
|
||||
evt = evt ? evt : window.event;
|
||||
|
||||
// touch events
|
||||
|
||||
@ -190,9 +190,9 @@ export class Tween {
|
||||
anim: Animation;
|
||||
tween: TweenEngine;
|
||||
_id: number;
|
||||
onFinish: Function;
|
||||
onReset: Function;
|
||||
onUpdate: Function;
|
||||
onFinish: Function | undefined;
|
||||
onReset: Function | undefined;
|
||||
onUpdate: Function | undefined;
|
||||
|
||||
constructor(config: TweenConfig) {
|
||||
var that = this,
|
||||
@ -314,7 +314,7 @@ export class Tween {
|
||||
if (n % 2 === 0) {
|
||||
diff.push(end[n] - start[n]);
|
||||
} else {
|
||||
var startRGBA = Util.colorToRGBA(start[n]);
|
||||
var startRGBA = Util.colorToRGBA(start[n])!;
|
||||
endRGBA = Util.colorToRGBA(end[n]);
|
||||
start[n] = startRGBA;
|
||||
diff.push({
|
||||
|
||||
51
src/Util.ts
51
src/Util.ts
@ -605,7 +605,7 @@ export const Util = {
|
||||
},
|
||||
// convert any color string to RGBA object
|
||||
// from https://github.com/component/color-parser
|
||||
colorToRGBA(str: string): RGBA {
|
||||
colorToRGBA(str: string) {
|
||||
str = str || 'black';
|
||||
return (
|
||||
Util._namedColorToRBA(str) ||
|
||||
@ -632,9 +632,9 @@ export const Util = {
|
||||
};
|
||||
},
|
||||
// Parse rgb(n, n, n)
|
||||
_rgbColorToRGBA(str: string): RGBA {
|
||||
_rgbColorToRGBA(str: string) {
|
||||
if (str.indexOf('rgb(') === 0) {
|
||||
str = str.match(/rgb\(([^)]+)\)/)[1];
|
||||
str = str.match(/rgb\(([^)]+)\)/)![1];
|
||||
var parts = str.split(/ *, */).map(Number);
|
||||
return {
|
||||
r: parts[0],
|
||||
@ -645,9 +645,9 @@ export const Util = {
|
||||
}
|
||||
},
|
||||
// Parse rgba(n, n, n, n)
|
||||
_rgbaColorToRGBA(str: string): RGBA {
|
||||
_rgbaColorToRGBA(str: string) {
|
||||
if (str.indexOf('rgba(') === 0) {
|
||||
str = str.match(/rgba\(([^)]+)\)/)[1];
|
||||
str = str.match(/rgba\(([^)]+)\)/)![1]!;
|
||||
var parts = str.split(/ *, */).map((n, index) => {
|
||||
if (n.slice(-1) === '%') {
|
||||
return index === 3 ? parseInt(n) / 100 : (parseInt(n) / 100) * 255;
|
||||
@ -663,7 +663,7 @@ export const Util = {
|
||||
}
|
||||
},
|
||||
// Parse #nnnnnnnn
|
||||
_hex8ColorToRGBA(str: string): RGBA {
|
||||
_hex8ColorToRGBA(str: string) {
|
||||
if (str[0] === '#' && str.length === 9) {
|
||||
return {
|
||||
r: parseInt(str.slice(1, 3), 16),
|
||||
@ -674,7 +674,7 @@ export const Util = {
|
||||
}
|
||||
},
|
||||
// Parse #nnnnnn
|
||||
_hex6ColorToRGBA(str: string): RGBA {
|
||||
_hex6ColorToRGBA(str: string) {
|
||||
if (str[0] === '#' && str.length === 7) {
|
||||
return {
|
||||
r: parseInt(str.slice(1, 3), 16),
|
||||
@ -685,7 +685,7 @@ export const Util = {
|
||||
}
|
||||
},
|
||||
// Parse #nnnn
|
||||
_hex4ColorToRGBA(str: string): RGBA {
|
||||
_hex4ColorToRGBA(str: string) {
|
||||
if (str[0] === '#' && str.length === 5) {
|
||||
return {
|
||||
r: parseInt(str[1] + str[1], 16),
|
||||
@ -696,7 +696,7 @@ export const Util = {
|
||||
}
|
||||
},
|
||||
// Parse #nnn
|
||||
_hex3ColorToRGBA(str: string): RGBA {
|
||||
_hex3ColorToRGBA(str: string) {
|
||||
if (str[0] === '#' && str.length === 4) {
|
||||
return {
|
||||
r: parseInt(str[1] + str[1], 16),
|
||||
@ -707,11 +707,11 @@ export const Util = {
|
||||
}
|
||||
},
|
||||
// Code adapted from https://github.com/Qix-/color-convert/blob/master/conversions.js#L244
|
||||
_hslColorToRGBA(str: string): RGBA {
|
||||
_hslColorToRGBA(str: string) {
|
||||
// Check hsl() format
|
||||
if (/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.test(str)) {
|
||||
// Extract h, s, l
|
||||
const [_, ...hsl] = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(str);
|
||||
const [_, ...hsl] = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(str)!;
|
||||
|
||||
const h = Number(hsl[0]) / 360;
|
||||
const s = Number(hsl[1]) / 100;
|
||||
@ -905,8 +905,8 @@ export const Util = {
|
||||
},
|
||||
_prepareArrayForTween(startArray, endArray, isClosed) {
|
||||
var n,
|
||||
start = [],
|
||||
end = [];
|
||||
start: Vector2d[] = [],
|
||||
end: Vector2d[] = [];
|
||||
if (startArray.length > endArray.length) {
|
||||
var temp = endArray;
|
||||
endArray = startArray;
|
||||
@ -925,7 +925,7 @@ export const Util = {
|
||||
});
|
||||
}
|
||||
|
||||
var newStart = [];
|
||||
var newStart: number[] = [];
|
||||
end.forEach(function (point) {
|
||||
var pr = Util._getProjectionToLine(point, start, isClosed);
|
||||
newStart.push(pr.x);
|
||||
@ -985,22 +985,27 @@ export const Util = {
|
||||
releaseCanvas(...canvases: HTMLCanvasElement[]) {
|
||||
if (!Konva.releaseCanvasOnDestroy) return;
|
||||
|
||||
canvases.forEach(c => {
|
||||
canvases.forEach((c) => {
|
||||
c.width = 0;
|
||||
c.height = 0;
|
||||
})
|
||||
});
|
||||
},
|
||||
drawRoundedRectPath(context: Context, width: number, height: number, cornerRadius: number | number[]) {
|
||||
drawRoundedRectPath(
|
||||
context: Context,
|
||||
width: number,
|
||||
height: number,
|
||||
cornerRadius: number | number[]
|
||||
) {
|
||||
let topLeft = 0;
|
||||
let topRight = 0;
|
||||
let bottomLeft = 0;
|
||||
let bottomRight = 0;
|
||||
if (typeof cornerRadius === 'number') {
|
||||
topLeft = topRight = bottomLeft = bottomRight = Math.min(
|
||||
cornerRadius,
|
||||
width / 2,
|
||||
height / 2
|
||||
);
|
||||
topLeft =
|
||||
topRight =
|
||||
bottomLeft =
|
||||
bottomRight =
|
||||
Math.min(cornerRadius, width / 2, height / 2);
|
||||
} else {
|
||||
topLeft = Math.min(cornerRadius[0] || 0, width / 2, height / 2);
|
||||
topRight = Math.min(cornerRadius[1] || 0, width / 2, height / 2);
|
||||
@ -1037,5 +1042,5 @@ export const Util = {
|
||||
);
|
||||
context.lineTo(0, topLeft);
|
||||
context.arc(topLeft, topLeft, topLeft, Math.PI, (Math.PI * 3) / 2, false);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
@ -55,519 +55,40 @@ function BlurStack() {
|
||||
}
|
||||
|
||||
var mul_table = [
|
||||
512,
|
||||
512,
|
||||
456,
|
||||
512,
|
||||
328,
|
||||
456,
|
||||
335,
|
||||
512,
|
||||
405,
|
||||
328,
|
||||
271,
|
||||
456,
|
||||
388,
|
||||
335,
|
||||
292,
|
||||
512,
|
||||
454,
|
||||
405,
|
||||
364,
|
||||
328,
|
||||
298,
|
||||
271,
|
||||
496,
|
||||
456,
|
||||
420,
|
||||
388,
|
||||
360,
|
||||
335,
|
||||
312,
|
||||
292,
|
||||
273,
|
||||
512,
|
||||
482,
|
||||
454,
|
||||
428,
|
||||
405,
|
||||
383,
|
||||
364,
|
||||
345,
|
||||
328,
|
||||
312,
|
||||
298,
|
||||
284,
|
||||
271,
|
||||
259,
|
||||
496,
|
||||
475,
|
||||
456,
|
||||
437,
|
||||
420,
|
||||
404,
|
||||
388,
|
||||
374,
|
||||
360,
|
||||
347,
|
||||
335,
|
||||
323,
|
||||
312,
|
||||
302,
|
||||
292,
|
||||
282,
|
||||
273,
|
||||
265,
|
||||
512,
|
||||
497,
|
||||
482,
|
||||
468,
|
||||
454,
|
||||
441,
|
||||
428,
|
||||
417,
|
||||
405,
|
||||
394,
|
||||
383,
|
||||
373,
|
||||
364,
|
||||
354,
|
||||
345,
|
||||
337,
|
||||
328,
|
||||
320,
|
||||
312,
|
||||
305,
|
||||
298,
|
||||
291,
|
||||
284,
|
||||
278,
|
||||
271,
|
||||
265,
|
||||
259,
|
||||
507,
|
||||
496,
|
||||
485,
|
||||
475,
|
||||
465,
|
||||
456,
|
||||
446,
|
||||
437,
|
||||
428,
|
||||
420,
|
||||
412,
|
||||
404,
|
||||
396,
|
||||
388,
|
||||
381,
|
||||
374,
|
||||
367,
|
||||
360,
|
||||
354,
|
||||
347,
|
||||
341,
|
||||
335,
|
||||
329,
|
||||
323,
|
||||
318,
|
||||
312,
|
||||
307,
|
||||
302,
|
||||
297,
|
||||
292,
|
||||
287,
|
||||
282,
|
||||
278,
|
||||
273,
|
||||
269,
|
||||
265,
|
||||
261,
|
||||
512,
|
||||
505,
|
||||
497,
|
||||
489,
|
||||
482,
|
||||
475,
|
||||
468,
|
||||
461,
|
||||
454,
|
||||
447,
|
||||
441,
|
||||
435,
|
||||
428,
|
||||
422,
|
||||
417,
|
||||
411,
|
||||
405,
|
||||
399,
|
||||
394,
|
||||
389,
|
||||
383,
|
||||
378,
|
||||
373,
|
||||
368,
|
||||
364,
|
||||
359,
|
||||
354,
|
||||
350,
|
||||
345,
|
||||
341,
|
||||
337,
|
||||
332,
|
||||
328,
|
||||
324,
|
||||
320,
|
||||
316,
|
||||
312,
|
||||
309,
|
||||
305,
|
||||
301,
|
||||
298,
|
||||
294,
|
||||
291,
|
||||
287,
|
||||
284,
|
||||
281,
|
||||
278,
|
||||
274,
|
||||
271,
|
||||
268,
|
||||
265,
|
||||
262,
|
||||
259,
|
||||
257,
|
||||
507,
|
||||
501,
|
||||
496,
|
||||
491,
|
||||
485,
|
||||
480,
|
||||
475,
|
||||
470,
|
||||
465,
|
||||
460,
|
||||
456,
|
||||
451,
|
||||
446,
|
||||
442,
|
||||
437,
|
||||
433,
|
||||
428,
|
||||
424,
|
||||
420,
|
||||
416,
|
||||
412,
|
||||
408,
|
||||
404,
|
||||
400,
|
||||
396,
|
||||
392,
|
||||
388,
|
||||
385,
|
||||
381,
|
||||
377,
|
||||
374,
|
||||
370,
|
||||
367,
|
||||
363,
|
||||
360,
|
||||
357,
|
||||
354,
|
||||
350,
|
||||
347,
|
||||
344,
|
||||
341,
|
||||
338,
|
||||
335,
|
||||
332,
|
||||
329,
|
||||
326,
|
||||
323,
|
||||
320,
|
||||
318,
|
||||
315,
|
||||
312,
|
||||
310,
|
||||
307,
|
||||
304,
|
||||
302,
|
||||
299,
|
||||
297,
|
||||
294,
|
||||
292,
|
||||
289,
|
||||
287,
|
||||
285,
|
||||
282,
|
||||
280,
|
||||
278,
|
||||
275,
|
||||
273,
|
||||
271,
|
||||
269,
|
||||
267,
|
||||
265,
|
||||
263,
|
||||
261,
|
||||
259,
|
||||
512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292,
|
||||
512, 454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292,
|
||||
273, 512, 482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259,
|
||||
496, 475, 456, 437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292,
|
||||
282, 273, 265, 512, 497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373,
|
||||
364, 354, 345, 337, 328, 320, 312, 305, 298, 291, 284, 278, 271, 265, 259,
|
||||
507, 496, 485, 475, 465, 456, 446, 437, 428, 420, 412, 404, 396, 388, 381,
|
||||
374, 367, 360, 354, 347, 341, 335, 329, 323, 318, 312, 307, 302, 297, 292,
|
||||
287, 282, 278, 273, 269, 265, 261, 512, 505, 497, 489, 482, 475, 468, 461,
|
||||
454, 447, 441, 435, 428, 422, 417, 411, 405, 399, 394, 389, 383, 378, 373,
|
||||
368, 364, 359, 354, 350, 345, 341, 337, 332, 328, 324, 320, 316, 312, 309,
|
||||
305, 301, 298, 294, 291, 287, 284, 281, 278, 274, 271, 268, 265, 262, 259,
|
||||
257, 507, 501, 496, 491, 485, 480, 475, 470, 465, 460, 456, 451, 446, 442,
|
||||
437, 433, 428, 424, 420, 416, 412, 408, 404, 400, 396, 392, 388, 385, 381,
|
||||
377, 374, 370, 367, 363, 360, 357, 354, 350, 347, 344, 341, 338, 335, 332,
|
||||
329, 326, 323, 320, 318, 315, 312, 310, 307, 304, 302, 299, 297, 294, 292,
|
||||
289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259,
|
||||
];
|
||||
|
||||
var shg_table = [
|
||||
9,
|
||||
11,
|
||||
12,
|
||||
13,
|
||||
13,
|
||||
14,
|
||||
14,
|
||||
15,
|
||||
15,
|
||||
15,
|
||||
15,
|
||||
16,
|
||||
16,
|
||||
16,
|
||||
16,
|
||||
17,
|
||||
17,
|
||||
17,
|
||||
17,
|
||||
17,
|
||||
17,
|
||||
17,
|
||||
18,
|
||||
18,
|
||||
18,
|
||||
18,
|
||||
18,
|
||||
18,
|
||||
18,
|
||||
18,
|
||||
18,
|
||||
19,
|
||||
19,
|
||||
19,
|
||||
19,
|
||||
19,
|
||||
19,
|
||||
19,
|
||||
19,
|
||||
19,
|
||||
19,
|
||||
19,
|
||||
19,
|
||||
19,
|
||||
19,
|
||||
20,
|
||||
20,
|
||||
20,
|
||||
20,
|
||||
20,
|
||||
20,
|
||||
20,
|
||||
20,
|
||||
20,
|
||||
20,
|
||||
20,
|
||||
20,
|
||||
20,
|
||||
20,
|
||||
20,
|
||||
20,
|
||||
20,
|
||||
20,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
21,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
22,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
23,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
24,
|
||||
9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17, 17, 17, 17, 17,
|
||||
17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19, 19, 19, 19, 19, 19,
|
||||
19, 19, 19, 19, 19, 19, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20,
|
||||
20, 20, 20, 20, 20, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21,
|
||||
21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22,
|
||||
22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22,
|
||||
22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23, 23, 23, 23, 23, 23, 23,
|
||||
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
|
||||
23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
|
||||
23, 23, 23, 23, 23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
|
||||
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
|
||||
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
|
||||
24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
|
||||
24, 24, 24, 24, 24, 24, 24,
|
||||
];
|
||||
|
||||
function filterGaussBlurRGBA(imageData, radius) {
|
||||
@ -608,8 +129,8 @@ function filterGaussBlurRGBA(imageData, radius) {
|
||||
stackStart = new BlurStack(),
|
||||
stackEnd = null,
|
||||
stack = stackStart,
|
||||
stackIn = null,
|
||||
stackOut = null,
|
||||
stackIn: any = null,
|
||||
stackOut: any = null,
|
||||
mul_sum = mul_table[radius],
|
||||
shg_sum = shg_table[radius];
|
||||
|
||||
@ -625,7 +146,15 @@ function filterGaussBlurRGBA(imageData, radius) {
|
||||
yw = yi = 0;
|
||||
|
||||
for (y = 0; y < height; y++) {
|
||||
r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0;
|
||||
r_in_sum =
|
||||
g_in_sum =
|
||||
b_in_sum =
|
||||
a_in_sum =
|
||||
r_sum =
|
||||
g_sum =
|
||||
b_sum =
|
||||
a_sum =
|
||||
0;
|
||||
|
||||
r_out_sum = radiusPlus1 * (pr = pixels[yi]);
|
||||
g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);
|
||||
@ -717,7 +246,15 @@ function filterGaussBlurRGBA(imageData, radius) {
|
||||
}
|
||||
|
||||
for (x = 0; x < width; x++) {
|
||||
g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0;
|
||||
g_in_sum =
|
||||
b_in_sum =
|
||||
a_in_sum =
|
||||
r_in_sum =
|
||||
g_sum =
|
||||
b_sum =
|
||||
a_sum =
|
||||
r_sum =
|
||||
0;
|
||||
|
||||
yi = x << 2;
|
||||
r_out_sum = radiusPlus1 * (pr = pixels[yi]);
|
||||
|
||||
@ -195,7 +195,7 @@ export const Kaleidoscope: Filter = function (imageData) {
|
||||
tempCanvas.width = xSize;
|
||||
tempCanvas.height = ySize;
|
||||
var scratchData = tempCanvas
|
||||
.getContext('2d')
|
||||
.getContext('2d')!
|
||||
.getImageData(0, 0, xSize, ySize);
|
||||
Util.releaseCanvas(tempCanvas);
|
||||
// Convert thhe original to polar coordinates
|
||||
|
||||
@ -4,7 +4,7 @@ import { getNumberValidator } from '../Validators';
|
||||
|
||||
function pixelAt(idata, x, y) {
|
||||
var idx = (y * idata.width + x) * 4;
|
||||
var d = [];
|
||||
var d: Array<number> = [];
|
||||
d.push(
|
||||
idata.data[idx++],
|
||||
idata.data[idx++],
|
||||
@ -55,7 +55,7 @@ function backgroundMask(idata, threshold) {
|
||||
var mean = rgbMean([rgbv_ne, rgbv_no, rgbv_se, rgbv_so]);
|
||||
|
||||
// Mask based on color distance
|
||||
var mask = [];
|
||||
var mask: Array<number> = [];
|
||||
for (var i = 0; i < idata.width * idata.height; i++) {
|
||||
var d = rgbDistance(mean, [
|
||||
idata.data[i * 4],
|
||||
@ -80,7 +80,7 @@ function erodeMask(mask, sw, sh) {
|
||||
var side = Math.round(Math.sqrt(weights.length));
|
||||
var halfSide = Math.floor(side / 2);
|
||||
|
||||
var maskResult = [];
|
||||
var maskResult: Array<number> = [];
|
||||
for (var y = 0; y < sh; y++) {
|
||||
for (var x = 0; x < sw; x++) {
|
||||
var so = y * sw + x;
|
||||
@ -111,7 +111,7 @@ function dilateMask(mask, sw, sh) {
|
||||
var side = Math.round(Math.sqrt(weights.length));
|
||||
var halfSide = Math.floor(side / 2);
|
||||
|
||||
var maskResult = [];
|
||||
var maskResult: Array<number> = [];
|
||||
for (var y = 0; y < sh; y++) {
|
||||
for (var x = 0; x < sw; x++) {
|
||||
var so = y * sw + x;
|
||||
@ -142,7 +142,7 @@ function smoothEdgeMask(mask, sw, sh) {
|
||||
var side = Math.round(Math.sqrt(weights.length));
|
||||
var halfSide = Math.floor(side / 2);
|
||||
|
||||
var maskResult = [];
|
||||
var maskResult: Array<number> = [];
|
||||
for (var y = 0; y < sh; y++) {
|
||||
for (var x = 0; x < sw; x++) {
|
||||
var so = y * sw + x;
|
||||
|
||||
@ -22,7 +22,7 @@ function getControlPoints(x0, y0, x1, y1, x2, y2, t) {
|
||||
|
||||
function expandPoints(p, tension) {
|
||||
var len = p.length,
|
||||
allPoints = [],
|
||||
allPoints: Array<number> = [],
|
||||
n,
|
||||
cp;
|
||||
|
||||
@ -51,7 +51,17 @@ function expandPoints(p, tension) {
|
||||
}
|
||||
|
||||
export interface LineConfig extends ShapeConfig {
|
||||
points?: number[] | Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array;
|
||||
points?:
|
||||
| number[]
|
||||
| Int8Array
|
||||
| Uint8Array
|
||||
| Uint8ClampedArray
|
||||
| Int16Array
|
||||
| Uint16Array
|
||||
| Int32Array
|
||||
| Uint32Array
|
||||
| Float32Array
|
||||
| Float64Array;
|
||||
tension?: number;
|
||||
closed?: boolean;
|
||||
bezier?: boolean;
|
||||
|
||||
@ -33,7 +33,7 @@ export interface PathConfig extends ShapeConfig {
|
||||
* });
|
||||
*/
|
||||
export class Path extends Shape<PathConfig> {
|
||||
dataArray = [];
|
||||
dataArray: PathSegment[] = [];
|
||||
pathLength = 0;
|
||||
|
||||
constructor(config?: PathConfig) {
|
||||
@ -109,7 +109,7 @@ export class Path extends Shape<PathConfig> {
|
||||
}
|
||||
}
|
||||
getSelfRect() {
|
||||
var points = [];
|
||||
var points: Array<number> = [];
|
||||
this.dataArray.forEach(function (data) {
|
||||
if (data.command === 'A') {
|
||||
// Approximates by breaking curve into line segments
|
||||
@ -416,7 +416,14 @@ export class Path extends Shape<PathConfig> {
|
||||
y: y,
|
||||
};
|
||||
}
|
||||
static getPointOnEllipticalArc(cx, cy, rx, ry, theta, psi) {
|
||||
static getPointOnEllipticalArc(
|
||||
cx: number,
|
||||
cy: number,
|
||||
rx: number,
|
||||
ry: number,
|
||||
theta: number,
|
||||
psi: number
|
||||
) {
|
||||
var cosPsi = Math.cos(psi),
|
||||
sinPsi = Math.sin(psi);
|
||||
var pt = {
|
||||
@ -496,8 +503,8 @@ export class Path extends Shape<PathConfig> {
|
||||
}
|
||||
// create array
|
||||
var arr = cs.split('|');
|
||||
var ca = [];
|
||||
var coords = [];
|
||||
var ca: PathSegment[] = [];
|
||||
var coords: string[] = [];
|
||||
// init context point
|
||||
var cpx = 0;
|
||||
var cpy = 0;
|
||||
@ -517,7 +524,7 @@ export class Path extends Shape<PathConfig> {
|
||||
// while ((match = re.exec(str))) {
|
||||
// coords.push(match[0]);
|
||||
// }
|
||||
var p = [];
|
||||
var p: number[] = [];
|
||||
|
||||
for (var j = 0, jlen = coords.length; j < jlen; j++) {
|
||||
// extra case for merged flags
|
||||
@ -539,8 +546,8 @@ export class Path extends Shape<PathConfig> {
|
||||
break;
|
||||
}
|
||||
|
||||
var cmd = null;
|
||||
var points = [];
|
||||
var cmd: string = '';
|
||||
var points: number[] = [];
|
||||
var startX = cpx,
|
||||
startY = cpy;
|
||||
// Move var from within the switch to up here (jshint)
|
||||
@ -551,20 +558,20 @@ export class Path extends Shape<PathConfig> {
|
||||
switch (c) {
|
||||
// Note: Keep the lineTo's above the moveTo's in this switch
|
||||
case 'l':
|
||||
cpx += p.shift();
|
||||
cpy += p.shift();
|
||||
cpx += p.shift()!;
|
||||
cpy += p.shift()!;
|
||||
cmd = 'L';
|
||||
points.push(cpx, cpy);
|
||||
break;
|
||||
case 'L':
|
||||
cpx = p.shift();
|
||||
cpy = p.shift();
|
||||
cpx = p.shift()!;
|
||||
cpy = p.shift()!;
|
||||
points.push(cpx, cpy);
|
||||
break;
|
||||
// Note: lineTo handlers need to be above this point
|
||||
case 'm':
|
||||
var dx = p.shift();
|
||||
var dy = p.shift();
|
||||
var dx = p.shift()!;
|
||||
var dy = p.shift()!;
|
||||
cpx += dx;
|
||||
cpy += dy;
|
||||
cmd = 'M';
|
||||
@ -584,8 +591,8 @@ export class Path extends Shape<PathConfig> {
|
||||
// subsequent points are treated as relative lineTo
|
||||
break;
|
||||
case 'M':
|
||||
cpx = p.shift();
|
||||
cpy = p.shift();
|
||||
cpx = p.shift()!;
|
||||
cpy = p.shift()!;
|
||||
cmd = 'M';
|
||||
points.push(cpx, cpy);
|
||||
c = 'L';
|
||||
@ -593,40 +600,40 @@ export class Path extends Shape<PathConfig> {
|
||||
break;
|
||||
|
||||
case 'h':
|
||||
cpx += p.shift();
|
||||
cpx += p.shift()!;
|
||||
cmd = 'L';
|
||||
points.push(cpx, cpy);
|
||||
break;
|
||||
case 'H':
|
||||
cpx = p.shift();
|
||||
cpx = p.shift()!;
|
||||
cmd = 'L';
|
||||
points.push(cpx, cpy);
|
||||
break;
|
||||
case 'v':
|
||||
cpy += p.shift();
|
||||
cpy += p.shift()!;
|
||||
cmd = 'L';
|
||||
points.push(cpx, cpy);
|
||||
break;
|
||||
case 'V':
|
||||
cpy = p.shift();
|
||||
cpy = p.shift()!;
|
||||
cmd = 'L';
|
||||
points.push(cpx, cpy);
|
||||
break;
|
||||
case 'C':
|
||||
points.push(p.shift(), p.shift(), p.shift(), p.shift());
|
||||
cpx = p.shift();
|
||||
cpy = p.shift();
|
||||
points.push(p.shift()!, p.shift()!, p.shift()!, p.shift()!);
|
||||
cpx = p.shift()!;
|
||||
cpy = p.shift()!;
|
||||
points.push(cpx, cpy);
|
||||
break;
|
||||
case 'c':
|
||||
points.push(
|
||||
cpx + p.shift(),
|
||||
cpy + p.shift(),
|
||||
cpx + p.shift(),
|
||||
cpy + p.shift()
|
||||
cpx + p.shift()!,
|
||||
cpy + p.shift()!,
|
||||
cpx + p.shift()!,
|
||||
cpy + p.shift()!
|
||||
);
|
||||
cpx += p.shift();
|
||||
cpy += p.shift();
|
||||
cpx += p.shift()!;
|
||||
cpy += p.shift()!;
|
||||
cmd = 'C';
|
||||
points.push(cpx, cpy);
|
||||
break;
|
||||
@ -638,9 +645,9 @@ export class Path extends Shape<PathConfig> {
|
||||
ctlPtx = cpx + (cpx - prevCmd.points[2]);
|
||||
ctlPty = cpy + (cpy - prevCmd.points[3]);
|
||||
}
|
||||
points.push(ctlPtx, ctlPty, p.shift(), p.shift());
|
||||
cpx = p.shift();
|
||||
cpy = p.shift();
|
||||
points.push(ctlPtx, ctlPty, p.shift()!, p.shift()!);
|
||||
cpx = p.shift()!;
|
||||
cpy = p.shift()!;
|
||||
cmd = 'C';
|
||||
points.push(cpx, cpy);
|
||||
break;
|
||||
@ -652,22 +659,22 @@ export class Path extends Shape<PathConfig> {
|
||||
ctlPtx = cpx + (cpx - prevCmd.points[2]);
|
||||
ctlPty = cpy + (cpy - prevCmd.points[3]);
|
||||
}
|
||||
points.push(ctlPtx, ctlPty, cpx + p.shift(), cpy + p.shift());
|
||||
cpx += p.shift();
|
||||
cpy += p.shift();
|
||||
points.push(ctlPtx, ctlPty, cpx + p.shift()!, cpy + p.shift()!);
|
||||
cpx += p.shift()!;
|
||||
cpy += p.shift()!;
|
||||
cmd = 'C';
|
||||
points.push(cpx, cpy);
|
||||
break;
|
||||
case 'Q':
|
||||
points.push(p.shift(), p.shift());
|
||||
cpx = p.shift();
|
||||
cpy = p.shift();
|
||||
points.push(p.shift()!, p.shift()!);
|
||||
cpx = p.shift()!;
|
||||
cpy = p.shift()!;
|
||||
points.push(cpx, cpy);
|
||||
break;
|
||||
case 'q':
|
||||
points.push(cpx + p.shift(), cpy + p.shift());
|
||||
cpx += p.shift();
|
||||
cpy += p.shift();
|
||||
points.push(cpx + p.shift()!, cpy + p.shift()!);
|
||||
cpx += p.shift()!;
|
||||
cpy += p.shift()!;
|
||||
cmd = 'Q';
|
||||
points.push(cpx, cpy);
|
||||
break;
|
||||
@ -679,8 +686,8 @@ export class Path extends Shape<PathConfig> {
|
||||
ctlPtx = cpx + (cpx - prevCmd.points[0]);
|
||||
ctlPty = cpy + (cpy - prevCmd.points[1]);
|
||||
}
|
||||
cpx = p.shift();
|
||||
cpy = p.shift();
|
||||
cpx = p.shift()!;
|
||||
cpy = p.shift()!;
|
||||
cmd = 'Q';
|
||||
points.push(ctlPtx, ctlPty, cpx, cpy);
|
||||
break;
|
||||
@ -692,21 +699,21 @@ export class Path extends Shape<PathConfig> {
|
||||
ctlPtx = cpx + (cpx - prevCmd.points[0]);
|
||||
ctlPty = cpy + (cpy - prevCmd.points[1]);
|
||||
}
|
||||
cpx += p.shift();
|
||||
cpy += p.shift();
|
||||
cpx += p.shift()!;
|
||||
cpy += p.shift()!;
|
||||
cmd = 'Q';
|
||||
points.push(ctlPtx, ctlPty, cpx, cpy);
|
||||
break;
|
||||
case 'A':
|
||||
rx = p.shift();
|
||||
ry = p.shift();
|
||||
psi = p.shift();
|
||||
fa = p.shift();
|
||||
fs = p.shift();
|
||||
rx = p.shift()!;
|
||||
ry = p.shift()!;
|
||||
psi = p.shift()!;
|
||||
fa = p.shift()!;
|
||||
fs = p.shift()!;
|
||||
x1 = cpx;
|
||||
y1 = cpy;
|
||||
cpx = p.shift();
|
||||
cpy = p.shift();
|
||||
cpx = p.shift()!;
|
||||
cpy = p.shift()!;
|
||||
cmd = 'A';
|
||||
points = this.convertEndpointToCenterParameterization(
|
||||
x1,
|
||||
@ -728,8 +735,8 @@ export class Path extends Shape<PathConfig> {
|
||||
fs = p.shift();
|
||||
x1 = cpx;
|
||||
y1 = cpy;
|
||||
cpx += p.shift();
|
||||
cpy += p.shift();
|
||||
cpx += p.shift()!;
|
||||
cpy += p.shift()!;
|
||||
cmd = 'A';
|
||||
points = this.convertEndpointToCenterParameterization(
|
||||
x1,
|
||||
@ -760,7 +767,7 @@ export class Path extends Shape<PathConfig> {
|
||||
ca.push({
|
||||
command: 'z',
|
||||
points: [],
|
||||
start: undefined,
|
||||
start: undefined as any,
|
||||
pathLength: 0,
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Factory } from '../Factory';
|
||||
import { Shape, ShapeConfig } from '../Shape';
|
||||
import { GetSet } from '../types';
|
||||
import { GetSet, Vector2d } from '../types';
|
||||
import { getNumberValidator } from '../Validators';
|
||||
import { _registerNode } from '../Global';
|
||||
import { Context } from '../Context';
|
||||
@ -45,9 +45,9 @@ export class RegularPolygon extends Shape<RegularPolygonConfig> {
|
||||
context.fillStrokeShape(this);
|
||||
}
|
||||
_getPoints() {
|
||||
const sides = this.attrs.sides;
|
||||
const sides = this.attrs.sides as number;
|
||||
const radius = this.attrs.radius || 0;
|
||||
const points = [];
|
||||
const points: Vector2d[] = [];
|
||||
for (var n = 0; n < sides; n++) {
|
||||
points.push({
|
||||
x: radius * Math.sin((n * 2 * Math.PI) / sides),
|
||||
|
||||
@ -112,7 +112,7 @@ function _strokeFunc(context: Context) {
|
||||
context.strokeText(this._partialText, this._partialTextX, this._partialTextY);
|
||||
}
|
||||
|
||||
function checkDefaultFill(config: TextConfig) {
|
||||
function checkDefaultFill(config?: TextConfig) {
|
||||
config = config || {};
|
||||
|
||||
// set default color to black
|
||||
|
||||
@ -7,7 +7,7 @@ import { Text, stringToArray } from './Text';
|
||||
import { getNumberValidator } from '../Validators';
|
||||
import { _registerNode } from '../Global';
|
||||
|
||||
import { GetSet, Vector2d } from '../types';
|
||||
import { GetSet, PathSegment, Vector2d } from '../types';
|
||||
|
||||
export interface TextPathConfig extends ShapeConfig {
|
||||
text?: string;
|
||||
@ -74,7 +74,7 @@ function _strokeFunc(context) {
|
||||
*/
|
||||
export class TextPath extends Shape<TextPathConfig> {
|
||||
dummyCanvas = Util.createCanvasElement();
|
||||
dataArray = [];
|
||||
dataArray: PathSegment[] = [];
|
||||
glyphInfo: Array<{
|
||||
transposeX: number;
|
||||
transposeY: number;
|
||||
@ -221,7 +221,7 @@ export class TextPath extends Shape<TextPathConfig> {
|
||||
|
||||
_getTextSize(text: string) {
|
||||
var dummyCanvas = this.dummyCanvas;
|
||||
var _context = dummyCanvas.getContext('2d');
|
||||
var _context = dummyCanvas.getContext('2d')!;
|
||||
|
||||
_context.save();
|
||||
|
||||
@ -338,7 +338,7 @@ export class TextPath extends Shape<TextPathConfig> {
|
||||
height: 0,
|
||||
};
|
||||
}
|
||||
var points = [];
|
||||
var points: number[] = [];
|
||||
|
||||
this.glyphInfo.forEach(function (info) {
|
||||
points.push(info.p0.x);
|
||||
|
||||
@ -21,7 +21,7 @@ export interface TransformerConfig extends ContainerConfig {
|
||||
rotationSnaps?: Array<number>;
|
||||
rotationSnapTolerance?: number;
|
||||
rotateAnchorOffset?: number;
|
||||
rotateAnchorCursor?: string,
|
||||
rotateAnchorCursor?: string;
|
||||
borderEnabled?: boolean;
|
||||
borderStroke?: string;
|
||||
borderStrokeWidth?: number;
|
||||
@ -239,7 +239,7 @@ function getSnap(snaps: Array<number>, newRotationRad: number, tol: number) {
|
||||
|
||||
export class Transformer extends Group {
|
||||
_nodes: Array<Node>;
|
||||
_movingAnchorName: string;
|
||||
_movingAnchorName: string | null = null;
|
||||
_transforming = false;
|
||||
_anchorDragOffset: Vector2d;
|
||||
sin: number;
|
||||
@ -478,7 +478,7 @@ export class Transformer extends Group {
|
||||
};
|
||||
}
|
||||
|
||||
const totalPoints = [];
|
||||
const totalPoints: Vector2d[] = [];
|
||||
this.nodes().map((node) => {
|
||||
const box = node.getClientRect({
|
||||
skipTransform: true,
|
||||
@ -501,7 +501,10 @@ export class Transformer extends Group {
|
||||
const tr = new Transform();
|
||||
tr.rotate(-Konva.getAngle(this.rotation()));
|
||||
|
||||
var minX: number, minY: number, maxX: number, maxY: number;
|
||||
var minX: number = Infinity,
|
||||
minY: number = Infinity,
|
||||
maxX: number = -Infinity,
|
||||
maxY: number = -Infinity;
|
||||
totalPoints.forEach(function (point) {
|
||||
var transformed = tr.point(point);
|
||||
if (minX === undefined) {
|
||||
@ -585,13 +588,13 @@ export class Transformer extends Group {
|
||||
var rad = Konva.getAngle(this.rotation());
|
||||
var rotateCursor = this.rotateAnchorCursor();
|
||||
var cursor = getCursor(name, rad, rotateCursor);
|
||||
anchor.getStage().content &&
|
||||
(anchor.getStage().content.style.cursor = cursor);
|
||||
anchor.getStage()!.content &&
|
||||
(anchor.getStage()!.content.style.cursor = cursor);
|
||||
this._cursorChange = true;
|
||||
});
|
||||
anchor.on('mouseout', () => {
|
||||
anchor.getStage().content &&
|
||||
(anchor.getStage().content.style.cursor = '');
|
||||
anchor.getStage()!.content &&
|
||||
(anchor.getStage()!.content.style.cursor = '');
|
||||
this._cursorChange = false;
|
||||
});
|
||||
this.add(anchor);
|
||||
@ -688,12 +691,12 @@ export class Transformer extends Group {
|
||||
}
|
||||
_handleMouseMove(e) {
|
||||
var x, y, newHypotenuse;
|
||||
var anchorNode = this.findOne('.' + this._movingAnchorName);
|
||||
var stage = anchorNode.getStage();
|
||||
var anchorNode = this.findOne('.' + this._movingAnchorName)!;
|
||||
var stage = anchorNode.getStage()!;
|
||||
|
||||
stage.setPointersPositions(e);
|
||||
|
||||
const pp = stage.getPointerPosition();
|
||||
const pp = stage.getPointerPosition()!;
|
||||
let newNodePos = {
|
||||
x: pp.x - this._anchorDragOffset.x,
|
||||
y: pp.y - this._anchorDragOffset.y,
|
||||
@ -759,26 +762,26 @@ export class Transformer extends Group {
|
||||
y: this.height() / 2,
|
||||
}
|
||||
: {
|
||||
x: this.findOne('.bottom-right').x(),
|
||||
y: this.findOne('.bottom-right').y(),
|
||||
x: this.findOne('.bottom-right')!.x(),
|
||||
y: this.findOne('.bottom-right')!.y(),
|
||||
};
|
||||
newHypotenuse = Math.sqrt(
|
||||
Math.pow(comparePoint.x - anchorNode.x(), 2) +
|
||||
Math.pow(comparePoint.y - anchorNode.y(), 2)
|
||||
);
|
||||
|
||||
var reverseX = this.findOne('.top-left').x() > comparePoint.x ? -1 : 1;
|
||||
var reverseX = this.findOne('.top-left')!.x() > comparePoint.x ? -1 : 1;
|
||||
|
||||
var reverseY = this.findOne('.top-left').y() > comparePoint.y ? -1 : 1;
|
||||
var reverseY = this.findOne('.top-left')!.y() > comparePoint.y ? -1 : 1;
|
||||
|
||||
x = newHypotenuse * this.cos * reverseX;
|
||||
y = newHypotenuse * this.sin * reverseY;
|
||||
|
||||
this.findOne('.top-left').x(comparePoint.x - x);
|
||||
this.findOne('.top-left').y(comparePoint.y - y);
|
||||
this.findOne('.top-left')!.x(comparePoint.x - x);
|
||||
this.findOne('.top-left')!.y(comparePoint.y - y);
|
||||
}
|
||||
} else if (this._movingAnchorName === 'top-center') {
|
||||
this.findOne('.top-left').y(anchorNode.y());
|
||||
this.findOne('.top-left')!.y(anchorNode.y());
|
||||
} else if (this._movingAnchorName === 'top-right') {
|
||||
if (keepProportion) {
|
||||
var comparePoint = centeredScaling
|
||||
@ -787,8 +790,8 @@ export class Transformer extends Group {
|
||||
y: this.height() / 2,
|
||||
}
|
||||
: {
|
||||
x: this.findOne('.bottom-left').x(),
|
||||
y: this.findOne('.bottom-left').y(),
|
||||
x: this.findOne('.bottom-left')!.x(),
|
||||
y: this.findOne('.bottom-left')!.y(),
|
||||
};
|
||||
|
||||
newHypotenuse = Math.sqrt(
|
||||
@ -796,23 +799,25 @@ export class Transformer extends Group {
|
||||
Math.pow(comparePoint.y - anchorNode.y(), 2)
|
||||
);
|
||||
|
||||
var reverseX = this.findOne('.top-right').x() < comparePoint.x ? -1 : 1;
|
||||
var reverseX =
|
||||
this.findOne('.top-right')!.x() < comparePoint.x ? -1 : 1;
|
||||
|
||||
var reverseY = this.findOne('.top-right').y() > comparePoint.y ? -1 : 1;
|
||||
var reverseY =
|
||||
this.findOne('.top-right')!.y() > comparePoint.y ? -1 : 1;
|
||||
|
||||
x = newHypotenuse * this.cos * reverseX;
|
||||
y = newHypotenuse * this.sin * reverseY;
|
||||
|
||||
this.findOne('.top-right').x(comparePoint.x + x);
|
||||
this.findOne('.top-right').y(comparePoint.y - y);
|
||||
this.findOne('.top-right')!.x(comparePoint.x + x);
|
||||
this.findOne('.top-right')!.y(comparePoint.y - y);
|
||||
}
|
||||
var pos = anchorNode.position();
|
||||
this.findOne('.top-left').y(pos.y);
|
||||
this.findOne('.bottom-right').x(pos.x);
|
||||
this.findOne('.top-left')!.y(pos.y);
|
||||
this.findOne('.bottom-right')!.x(pos.x);
|
||||
} else if (this._movingAnchorName === 'middle-left') {
|
||||
this.findOne('.top-left').x(anchorNode.x());
|
||||
this.findOne('.top-left')!.x(anchorNode.x());
|
||||
} else if (this._movingAnchorName === 'middle-right') {
|
||||
this.findOne('.bottom-right').x(anchorNode.x());
|
||||
this.findOne('.bottom-right')!.x(anchorNode.x());
|
||||
} else if (this._movingAnchorName === 'bottom-left') {
|
||||
if (keepProportion) {
|
||||
var comparePoint = centeredScaling
|
||||
@ -821,8 +826,8 @@ export class Transformer extends Group {
|
||||
y: this.height() / 2,
|
||||
}
|
||||
: {
|
||||
x: this.findOne('.top-right').x(),
|
||||
y: this.findOne('.top-right').y(),
|
||||
x: this.findOne('.top-right')!.x(),
|
||||
y: this.findOne('.top-right')!.y(),
|
||||
};
|
||||
|
||||
newHypotenuse = Math.sqrt(
|
||||
@ -843,10 +848,10 @@ export class Transformer extends Group {
|
||||
|
||||
pos = anchorNode.position();
|
||||
|
||||
this.findOne('.top-left').x(pos.x);
|
||||
this.findOne('.bottom-right').y(pos.y);
|
||||
this.findOne('.top-left')!.x(pos.x);
|
||||
this.findOne('.bottom-right')!.y(pos.y);
|
||||
} else if (this._movingAnchorName === 'bottom-center') {
|
||||
this.findOne('.bottom-right').y(anchorNode.y());
|
||||
this.findOne('.bottom-right')!.y(anchorNode.y());
|
||||
} else if (this._movingAnchorName === 'bottom-right') {
|
||||
if (keepProportion) {
|
||||
var comparePoint = centeredScaling
|
||||
@ -855,8 +860,8 @@ export class Transformer extends Group {
|
||||
y: this.height() / 2,
|
||||
}
|
||||
: {
|
||||
x: this.findOne('.top-left').x(),
|
||||
y: this.findOne('.top-left').y(),
|
||||
x: this.findOne('.top-left')!.x(),
|
||||
y: this.findOne('.top-left')!.y(),
|
||||
};
|
||||
|
||||
newHypotenuse = Math.sqrt(
|
||||
@ -865,16 +870,16 @@ export class Transformer extends Group {
|
||||
);
|
||||
|
||||
var reverseX =
|
||||
this.findOne('.bottom-right').x() < comparePoint.x ? -1 : 1;
|
||||
this.findOne('.bottom-right')!.x() < comparePoint.x ? -1 : 1;
|
||||
|
||||
var reverseY =
|
||||
this.findOne('.bottom-right').y() < comparePoint.y ? -1 : 1;
|
||||
this.findOne('.bottom-right')!.y() < comparePoint.y ? -1 : 1;
|
||||
|
||||
x = newHypotenuse * this.cos * reverseX;
|
||||
y = newHypotenuse * this.sin * reverseY;
|
||||
|
||||
this.findOne('.bottom-right').x(comparePoint.x + x);
|
||||
this.findOne('.bottom-right').y(comparePoint.y + y);
|
||||
this.findOne('.bottom-right')!.x(comparePoint.x + x);
|
||||
this.findOne('.bottom-right')!.y(comparePoint.y + y);
|
||||
}
|
||||
} else {
|
||||
console.error(
|
||||
@ -887,8 +892,8 @@ export class Transformer extends Group {
|
||||
|
||||
var centeredScaling = this.centeredScaling() || e.altKey;
|
||||
if (centeredScaling) {
|
||||
var topLeft = this.findOne('.top-left');
|
||||
var bottomRight = this.findOne('.bottom-right');
|
||||
var topLeft = this.findOne('.top-left')!;
|
||||
var bottomRight = this.findOne('.bottom-right')!;
|
||||
var topOffsetX = topLeft.x();
|
||||
var topOffsetY = topLeft.y();
|
||||
|
||||
@ -906,16 +911,16 @@ export class Transformer extends Group {
|
||||
});
|
||||
}
|
||||
|
||||
var absPos = this.findOne('.top-left').getAbsolutePosition();
|
||||
var absPos = this.findOne('.top-left')!.getAbsolutePosition();
|
||||
|
||||
x = absPos.x;
|
||||
y = absPos.y;
|
||||
|
||||
var width =
|
||||
this.findOne('.bottom-right').x() - this.findOne('.top-left').x();
|
||||
this.findOne('.bottom-right')!.x() - this.findOne('.top-left')!.x();
|
||||
|
||||
var height =
|
||||
this.findOne('.bottom-right').y() - this.findOne('.top-left').y();
|
||||
this.findOne('.bottom-right')!.y() - this.findOne('.top-left')!.y();
|
||||
|
||||
this._fitNodesInto(
|
||||
{
|
||||
@ -1088,7 +1093,7 @@ export class Transformer extends Group {
|
||||
// [delta transform] * [parent transform] * [old local transform] = [parent transform] * [new local transform]
|
||||
// and we need to find [new local transform]
|
||||
// [new local] = [parent inverted] * [delta] * [parent] * [old local]
|
||||
const parentTransform = node.getParent().getAbsoluteTransform();
|
||||
const parentTransform = node.getParent()!.getAbsoluteTransform();
|
||||
const localTransform = node.getTransform().copy();
|
||||
// skip offset:
|
||||
localTransform.translate(node.offsetX(), node.offsetY());
|
||||
@ -1109,7 +1114,7 @@ export class Transformer extends Group {
|
||||
this.rotation(Util._getRotation(newAttrs.rotation));
|
||||
this._resetTransformCache();
|
||||
this.update();
|
||||
this.getLayer().batchDraw();
|
||||
this.getLayer()!.batchDraw();
|
||||
}
|
||||
/**
|
||||
* force update of Konva.Transformer.
|
||||
@ -1123,7 +1128,7 @@ export class Transformer extends Group {
|
||||
}
|
||||
|
||||
_batchChangeChild(selector: string, attrs: any) {
|
||||
const anchor = this.findOne(selector);
|
||||
const anchor = this.findOne(selector)!;
|
||||
anchor.setAttrs(attrs);
|
||||
}
|
||||
|
||||
@ -1256,7 +1261,7 @@ export class Transformer extends Group {
|
||||
}
|
||||
destroy() {
|
||||
if (this.getStage() && this._cursorChange) {
|
||||
this.getStage().content && (this.getStage().content.style.cursor = '');
|
||||
this.getStage()!.content && (this.getStage()!.content.style.cursor = '');
|
||||
}
|
||||
Group.prototype.destroy.call(this);
|
||||
this.detach();
|
||||
|
||||
@ -31,7 +31,7 @@ export interface PathSegment {
|
||||
| 'a'
|
||||
| 'A';
|
||||
start: Vector2d;
|
||||
points: Vector2d[];
|
||||
points: number[];
|
||||
pathLength: number;
|
||||
}
|
||||
|
||||
|
||||
@ -2396,6 +2396,9 @@ describe('Node', function () {
|
||||
assert.equal(group3.getAbsoluteZIndex(), 5);
|
||||
assert.equal(group4.getAbsoluteZIndex(), 6);
|
||||
assert.equal(shape2.getAbsoluteZIndex(), 7);
|
||||
|
||||
const tempLayer = new Konva.Layer();
|
||||
assert.equal(tempLayer.getAbsoluteZIndex(), 0);
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
"compilerOptions": {
|
||||
"outDir": "lib",
|
||||
"module": "CommonJS",
|
||||
"target": "ES2015",
|
||||
"target": "ES2018",
|
||||
// "sourceMap": true,
|
||||
"noEmitOnError": true,
|
||||
"lib": ["ES2015", "dom"],
|
||||
"moduleResolution": "node",
|
||||
"declaration": true,
|
||||
"removeComments": false,
|
||||
"strictNullChecks": false,
|
||||
"strictNullChecks": true,
|
||||
},
|
||||
"include": ["./src/**/*.ts"]
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user