This commit is contained in:
Anton Lavrenov 2019-06-18 15:29:07 -05:00
parent a4650e310d
commit 4e489321f8
22 changed files with 1395 additions and 103 deletions

View File

@ -5,6 +5,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## Not released:
* TS types fixes
## [3.3.3][2019-06-07]
* Some fixes for better support `konva-node`

1398
konva.js

File diff suppressed because it is too large Load Diff

4
konva.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -2340,7 +2340,9 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
brightness: GetSet<number, this>;
contrast: GetSet<number, this>;
blurRadius: GetSet<number, this>;
luminance: GetSet<number, this>;
green: GetSet<number, this>;
alpha: GetSet<number, this>;
hue: GetSet<number, this>;
kaleidoscopeAngle: GetSet<number, this>;
kaleidoscopePower: GetSet<number, this>;

View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node } from '../Node';
import { Node, Filter } from '../Node';
import { getNumberValidator } from '../Validators';
/*
the Gauss filter
@ -827,7 +827,7 @@ function filterGaussBlurRGBA(imageData, radius) {
* node.filters([Konva.Filters.Blur]);
* node.blurRadius(10);
*/
export const Blur = function Blur(this: Node, imageData: CanvasImageData) {
export const Blur: Filter = function Blur(imageData) {
var radius = Math.round(this.blurRadius());
if (radius > 0) {

View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node } from '../Node';
import { Node, Filter } from '../Node';
import { getNumberValidator } from '../Validators';
/**
* Contrast Filter.
@ -12,8 +12,8 @@ import { getNumberValidator } from '../Validators';
* node.contrast(10);
*/
export const Contrast = function(imageData) {
var adjust = Math.pow((parseInt(this.contrast()) + 100) / 100, 2);
export const Contrast: Filter = function(imageData) {
var adjust = Math.pow((this.contrast() + 100) / 100, 2);
var data = imageData.data,
nPixels = data.length,

View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node } from '../Node';
import { Node, Filter } from '../Node';
import { Util } from '../Util';
import { getNumberValidator } from '../Validators';
/**
@ -18,7 +18,7 @@ import { getNumberValidator } from '../Validators';
* node.embossDirection('right');
* node.embossBlend(true);
*/
export const Emboss = function(imageData) {
export const Emboss: Filter = function(imageData) {
// pixastic strength is between 0 and 10. I want it between 0 and 1
// 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

View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node } from '../Node';
import { Node, Filter } from '../Node';
import { getNumberValidator } from '../Validators';
function remap(fromValue, fromMin, fromMax, toMin, toMax) {
@ -37,7 +37,7 @@ function remap(fromValue, fromMin, fromMax, toMin, toMax) {
* node.filters([Konva.Filters.Enhance]);
* node.enhance(0.4);
*/
export const Enhance = function(imageData) {
export const Enhance: Filter = function(imageData) {
var data = imageData.data,
nSubPixels = data.length,
rMin = data[0],

View File

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

View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node } from '../Node';
import { Node, Filter } from '../Node';
import { getNumberValidator } from '../Validators';
Factory.addGetterSetter(
@ -58,7 +58,7 @@ Factory.addGetterSetter(
* image.luminance(0.2);
*/
export const HSL = function(imageData) {
export const HSL: Filter = function(imageData) {
var data = imageData.data,
nPixels = data.length,
v = 1,

View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node } from '../Node';
import { Node, Filter } from '../Node';
import { getNumberValidator } from '../Validators';
/**
@ -14,7 +14,7 @@ import { getNumberValidator } from '../Validators';
* image.value(200);
*/
export const HSV = function(imageData) {
export const HSV: Filter = function(imageData) {
var data = imageData.data,
nPixels = data.length,
v = Math.pow(2, this.value()),

View File

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

View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node } from '../Node';
import { Node, Filter } from '../Node';
import { Util } from '../Util';
import { getNumberValidator } from '../Validators';
@ -177,7 +177,7 @@ var FromPolar = function(src, dst, opt) {
* node.kaleidoscopePower(3);
* node.kaleidoscopeAngle(45);
*/
export const Kaleidoscope = function(imageData) {
export const Kaleidoscope: Filter = function(imageData) {
var xSize = imageData.width,
ySize = imageData.height;

View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node } from '../Node';
import { Node, Filter } from '../Node';
import { getNumberValidator } from '../Validators';
function pixelAt(idata, x, y) {
@ -179,7 +179,7 @@ function smoothEdgeMask(mask, sw, sh) {
* node.filters([Konva.Filters.Mask]);
* node.threshold(200);
*/
export const Mask = function(imageData) {
export const Mask: Filter = function(imageData) {
// Detect pixels close to the background color
var threshold = this.threshold(),
mask = backgroundMask(imageData, threshold);

View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node } from '../Node';
import { Node, Filter } from '../Node';
import { getNumberValidator } from '../Validators';
/**
@ -14,7 +14,7 @@ import { getNumberValidator } from '../Validators';
* node.filters([Konva.Filters.Noise]);
* node.noise(0.8);
*/
export const Noise = function(imageData) {
export const Noise: Filter = function(imageData) {
var amount = this.noise() * 255,
data = imageData.data,
nPixels = data.length,

View File

@ -1,7 +1,7 @@
/*eslint-disable max-depth */
import { Factory } from '../Factory';
import { Util } from '../Util';
import { Node } from '../Node';
import { Node, Filter } from '../Node';
import { getNumberValidator } from '../Validators';
/**
@ -18,7 +18,7 @@ import { getNumberValidator } from '../Validators';
* node.pixelSize(10);
*/
export const Pixelate = function(imageData) {
export const Pixelate: Filter = function(imageData) {
var pixelSize = Math.ceil(this.pixelSize()),
width = imageData.width,
height = imageData.height,
@ -38,8 +38,8 @@ export const Pixelate = function(imageData) {
yBinEnd,
xBin,
yBin,
pixelsInBin;
imageData = imageData.data;
pixelsInBin,
data = imageData.data;
if (pixelSize <= 0) {
Util.error('pixelSize value can not be <= 0');
@ -71,10 +71,10 @@ export const Pixelate = function(imageData) {
continue;
}
i = (width * y + x) * 4;
red += imageData[i + 0];
green += imageData[i + 1];
blue += imageData[i + 2];
alpha += imageData[i + 3];
red += data[i + 0];
green += data[i + 1];
blue += data[i + 2];
alpha += data[i + 3];
pixelsInBin += 1;
}
}
@ -95,10 +95,10 @@ export const Pixelate = function(imageData) {
continue;
}
i = (width * y + x) * 4;
imageData[i + 0] = red;
imageData[i + 1] = green;
imageData[i + 2] = blue;
imageData[i + 3] = alpha;
data[i + 0] = red;
data[i + 1] = green;
data[i + 2] = blue;
data[i + 3] = alpha;
}
}
}

View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node } from '../Node';
import { Node, Filter } from '../Node';
import { getNumberValidator } from '../Validators';
/**
* Posterize Filter. Adjusts the channels so that there are no more
@ -16,7 +16,7 @@ import { getNumberValidator } from '../Validators';
* node.levels(0.8); // between 0 and 1
*/
export const Posterize = function(imageData) {
export const Posterize: Filter = function(imageData) {
// level must be between 1 and 255
var levels = Math.round(this.levels() * 254) + 1,
data = imageData.data,

View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node } from '../Node';
import { Node, Filter } from '../Node';
import { RGBComponent } from '../Validators';
/**
@ -16,7 +16,7 @@ import { RGBComponent } from '../Validators';
* node.green(200);
*/
export const RGB = function(imageData) {
export const RGB: Filter = function(imageData) {
var data = imageData.data,
nPixels = data.length,
red = this.red(),

View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node } from '../Node';
import { Node, Filter } from '../Node';
import { RGBComponent } from '../Validators';
/**
@ -17,7 +17,7 @@ import { RGBComponent } from '../Validators';
* node.alpha(0.3);
*/
export const RGBA = function(imageData) {
export const RGBA: Filter = function(imageData) {
var data = imageData.data,
nPixels = data.length,
red = this.red(),

View File

@ -1,3 +1,5 @@
import { Filter } from '../Node';
// based on https://stackoverflow.com/questions/1061093/how-is-a-sepia-tone-created
/**
@ -9,7 +11,7 @@
* node.cache();
* node.filters([Konva.Filters.Sepia]);
*/
export const Sepia = function(imageData) {
export const Sepia: Filter = function(imageData) {
var data = imageData.data,
nPixels = data.length,
i,

View File

@ -1,3 +1,4 @@
import { Filter } from '../Node';
/**
* Solarize Filter
* Pixastic Lib - Solarize filter - v0.1.0
@ -12,7 +13,7 @@
* node.filters([Konva.Filters.Solarize]);
*/
export const Solarize = function(imageData) {
export const Solarize: Filter = function(imageData) {
var data = imageData.data,
w = imageData.width,
h = imageData.height,

View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node } from '../Node';
import { Node, Filter } from '../Node';
import { getNumberValidator } from '../Validators';
/**
* Threshold Filter. Pushes any value above the mid point to
@ -16,7 +16,7 @@ import { getNumberValidator } from '../Validators';
* node.threshold(0.1);
*/
export const Threshold = function(imageData) {
export const Threshold: Filter = function(imageData) {
var level = this.threshold() * 255,
data = imageData.data,
len = data.length,