css-js-filter - npm Package Compare versions

Comparing version 1.2.3 to 1.3.0

CHANGELOG.md

@@ -5,2 +5,11 @@ # Changelog
 
+## [1.3.0](https://github.com/wolframdeus/css-js-filter/compare/v1.2.3...v1.3.0) (2020-11-15)
+
+
+### Features
+
+* **filters:** add blur filter. Apply to now accepts only ImageData ([af487d3](https://github.com/wolframdeus/css-js-filter/commit/af487d36a2c0408526c74c3432a25409b2de67a1))
+* **filters:** add InversionFilter filter ([4578cbf](https://github.com/wolframdeus/css-js-filter/commit/4578cbfd8170905eb9715575a54af36c2b6c6ae8))
+* **filters:** add OpacityFilter and make applyTo settings required ([fd008fe](https://github.com/wolframdeus/css-js-filter/commit/fd008feb35dafc790b697a54269a7c9d3056ae98))
+
 ### [1.2.3](https://github.com/wolframdeus/css-js-filter/compare/v1.2.2...v1.2.3) (2020-11-15)
@@ -7,0 +16,0 @@

dist/ColorsFilter.d.ts

@@ -34,3 +34,3 @@ /**
      * @param {number} b
-     * @param {number} amount
+     * @param amount
      * @returns {[number, number, number]}
@@ -45,6 +45,6 @@ */
      * @param {number} b
-     * @param {number} angle
+     * @param amount
      * @returns {[number, number, number]}
      */
-    static hueRotationBrowser(r: number, g: number, b: number, angle: number): [number, number, number];
+    static hueRotationBrowser(r: number, g: number, b: number, amount: number): [number, number, number];
     /**
@@ -112,2 +112,26 @@ * Changes pixel saturation.
     static brighten(r: number, g: number, b: number, multiplier: number): [number, number, number];
+    /**
+     * Opacifies pixel component.
+     * @param {number} a
+     * @param {number} multiplier
+     * @returns {number}
+     */
+    static opacify(a: number, multiplier: number): number;
+    /**
+     * Inverts pixel component.
+     * @param {number} component
+     * @param {number} multiplier
+     * @returns {number}
+     * @private
+     */
+    private static invertComponent;
+    /**
+     * Inverts pixel.
+     * @param {number} r
+     * @param {number} g
+     * @param {number} b
+     * @param {number} multiplier
+     * @returns {[number, number, number]}
+     */
+    static invert(r: number, g: number, b: number, multiplier: number): [number, number, number];
 }

dist/ColorsFilter.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ColorsFilter=void 0;var ColorsConverter_1=require("./ColorsConverter"),ColorsFilter=function(){function t(){}return t.adjustComponent=function(t){return Math.min(Math.max(0,Math.ceil(t)),255)},t.grayscaleComponent=function(t,o,n){var r=(o-t)*n;return this.adjustComponent(t+r)},t.grayscale=function(t,o,n,r){var e=.299*t+.587*o+.114*n;return[this.grayscaleComponent(t,e,r),this.grayscaleComponent(o,e,r),this.grayscaleComponent(n,e,r)]},t.hueRotation=function(t,o,n,r){var e=ColorsConverter_1.ColorsConverter.rgbToHsl(t,o,n),s=e[0],i=e[1],a=e[2];return ColorsConverter_1.ColorsConverter.hslToRgb(s+r,i,a)},t.hueRotationBrowser=function(t,o,n,r){var e=[1,0,0,0,1,0,0,0,1];r=(r%360+360)%360;var s=Math.cos(r*Math.PI/180),i=Math.sin(r*Math.PI/180);return e[0]=.2126+.7874*s-.2126*i,e[1]=.7152-.7152*s-.7152*i,e[2]=.0722-.0722*s+.9278*i,e[3]=.2126-.2126*s+.143*i,e[4]=.7152+(1-.7152)*s+.14*i,e[5]=.0722-.0722*s-.283*i,e[6]=.2126-.2126*s-.7874*i,e[7]=.7152-.7152*s+.7152*i,e[8]=.0722+.9278*s+.0722*i,[this.adjustComponent(e[0]*t+e[1]*o+e[2]*n),this.adjustComponent(e[3]*t+e[4]*o+e[5]*n),this.adjustComponent(e[6]*t+e[7]*o+e[8]*n)]},t.saturate=function(t,o,n,r){var e=ColorsConverter_1.ColorsConverter.rgbToHsl(t,o,n),s=e[0],i=e[1],a=e[2];return ColorsConverter_1.ColorsConverter.hslToRgb(s,i*r,a)},t.sepiaComponent=function(t,o,n){var r=(o-t)*n;return this.adjustComponent(t+r)},t.sepia=function(t,o,n,r){var e=.393*t+.769*o+.189*n,s=.349*t+.686*o+.168*n,i=.272*t+.534*o+.131*n;return[this.sepiaComponent(t,e,r),this.sepiaComponent(o,s,r),this.sepiaComponent(n,i,r)]},t.contrastComponent=function(t,o){return o*(t-128)+128},t.contrast=function(t,o,n,r){return[this.contrastComponent(t,r),this.contrastComponent(o,r),this.contrastComponent(n,r)]},t.brightenComponent=function(t,o){return this.adjustComponent(t*o)},t.brighten=function(t,o,n,r){return[this.brightenComponent(t,r),this.brightenComponent(o,r),this.brightenComponent(n,r)]},t}();exports.ColorsFilter=ColorsFilter;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ColorsFilter=void 0;var ColorsConverter_1=require("./ColorsConverter"),ColorsFilter=function(){function t(){}return t.adjustComponent=function(t){return Math.min(Math.max(0,Math.ceil(t)),255)},t.grayscaleComponent=function(t,n,o){var r=(n-t)*o;return this.adjustComponent(t+r)},t.grayscale=function(t,n,o,r){var e=.299*t+.587*n+.114*o;return[this.grayscaleComponent(t,e,r),this.grayscaleComponent(n,e,r),this.grayscaleComponent(o,e,r)]},t.hueRotation=function(t,n,o,r){var e=ColorsConverter_1.ColorsConverter.rgbToHsl(t,n,o),s=e[0],i=e[1],C=e[2];return ColorsConverter_1.ColorsConverter.hslToRgb(s+r,i,C)},t.hueRotationBrowser=function(t,n,o,r){var e=[1,0,0,0,1,0,0,0,1],s=360*r,i=Math.cos(s*Math.PI/180),C=Math.sin(s*Math.PI/180);return e[0]=.2126+.7874*i-.2126*C,e[1]=.7152-.7152*i-.7152*C,e[2]=.0722-.0722*i+.9278*C,e[3]=.2126-.2126*i+.143*C,e[4]=.7152+(1-.7152)*i+.14*C,e[5]=.0722-.0722*i-.283*C,e[6]=.2126-.2126*i-.7874*C,e[7]=.7152-.7152*i+.7152*C,e[8]=.0722+.9278*i+.0722*C,[this.adjustComponent(e[0]*t+e[1]*n+e[2]*o),this.adjustComponent(e[3]*t+e[4]*n+e[5]*o),this.adjustComponent(e[6]*t+e[7]*n+e[8]*o)]},t.saturate=function(t,n,o,r){var e=ColorsConverter_1.ColorsConverter.rgbToHsl(t,n,o),s=e[0],i=e[1],C=e[2];return ColorsConverter_1.ColorsConverter.hslToRgb(s,i*r,C)},t.sepiaComponent=function(t,n,o){var r=(n-t)*o;return this.adjustComponent(t+r)},t.sepia=function(t,n,o,r){var e=.393*t+.769*n+.189*o,s=.349*t+.686*n+.168*o,i=.272*t+.534*n+.131*o;return[this.sepiaComponent(t,e,r),this.sepiaComponent(n,s,r),this.sepiaComponent(o,i,r)]},t.contrastComponent=function(t,n){return n*(t-128)+128},t.contrast=function(t,n,o,r){return[this.contrastComponent(t,r),this.contrastComponent(n,r),this.contrastComponent(o,r)]},t.brightenComponent=function(t,n){return this.adjustComponent(t*n)},t.brighten=function(t,n,o,r){return[this.brightenComponent(t,r),this.brightenComponent(n,r),this.brightenComponent(o,r)]},t.opacify=function(t,n){return this.adjustComponent(t*n)},t.invertComponent=function(t,n){var o=255-t-t;return this.adjustComponent(t+o*n)},t.invert=function(t,n,o,r){return[this.invertComponent(t,r),this.invertComponent(n,r),this.invertComponent(o,r)]},t}();exports.ColorsFilter=ColorsFilter;

dist/createCSSFilter.d.ts

@@ -1,2 +0,2 @@
-import { ICSSFilter, TCSSFilterDefaultValue, TProcessImageFunc } from './types';
+import { ICSSFilter, TCSSFilterDefaultValue, TProcessableImageType, TProcessImageFunc } from './types';
 declare type TDefaultValueMixin<V = TCSSFilterDefaultValue> = {
@@ -17,3 +17,3 @@ /**
 };
-declare type TGetCSSFilter<V = TCSSFilterDefaultValue> = {
+declare type TGetCSSFilterMixin<V = TCSSFilterDefaultValue> = {
     /**
@@ -38,3 +38,3 @@ * CSS filter function name. For example: hue-rotate, contrast
 };
-declare type TOptions<V = TCSSFilterDefaultValue> = TDefaultValueMixin<V> & TGetCSSFilter<V> & {
+declare type TOptions<Value = TCSSFilterDefaultValue, ImageType extends TProcessableImageType = TProcessableImageType> = TDefaultValueMixin<Value> & TGetCSSFilterMixin<Value> & {
     /**
@@ -47,3 +47,3 @@ * Filter class name.
      */
-    processImage: TProcessImageFunc<V>;
+    processImage: TProcessImageFunc<Value, ImageType>;
 };
@@ -55,3 +55,3 @@ /**
  */
-export declare function createCSSFilter<V = TCSSFilterDefaultValue>(options: TOptions<V>): ICSSFilter<V>;
+export declare function createCSSFilter<Value = TCSSFilterDefaultValue, ImageType extends TProcessableImageType = TProcessableImageType>(options: TOptions<Value, ImageType>): ICSSFilter<Value, ImageType>;
 export {};

dist/createCSSFilter.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.createCSSFilter=void 0;var utils_1=require("./utils");function createCSSFilter(e){var t=e.name,r=e.processImage,i="getCSSFilter"in e?e.getCSSFilter:function(t){return e.cssFunctionName+"("+t+e.cssFunctionValuePostfix+")"},n="isDefault"in e?e.isDefault:function(t){return e.defaultValue===t};function o(e,t,i){void 0===i&&(i={});var n=i.type,o=void 0===n?"rgba":n,a=e instanceof ImageData?e.data:e;if(a.length%utils_1.getBytesCount(o))throw new Error("Entity is corrupted. Choose another entity type or check entity itself");return r(a,t,o),e}var a=function(){function e(){}return e.applyTo=o,e.getCSSFilter=i,e.isDefault=n,e}();return"string"==typeof t&&Object.defineProperty(a,"name",{value:t}),a}exports.createCSSFilter=createCSSFilter;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.createCSSFilter=void 0;var utils_1=require("./utils");function createCSSFilter(e){var t=e.name,r=e.processImage,i="getCSSFilter"in e?e.getCSSFilter:function(t){return e.cssFunctionName+"("+t+e.cssFunctionValuePostfix+")"},n="isDefault"in e?e.isDefault:function(t){return e.defaultValue===t};function u(e,t,i){var n=i.type;if(e.data.length%utils_1.getBytesCount(n))throw new Error("Entity is corrupted. Choose another entity type or check entity itself");return r(e,t,n),e}var o=function(){function e(){}return e.applyTo=u,e.getCSSFilter=i,e.isDefault=n,e}();return"string"==typeof t&&Object.defineProperty(o,"name",{value:t}),o}exports.createCSSFilter=createCSSFilter;

dist/filters/BrightnessFilter.d.ts

@@ -1,1 +0,1 @@
-export declare const BrightnessFilter: import("..").ICSSFilter<number>;
+export declare const BrightnessFilter: import("..").ICSSFilter<number, import("..").TProcessableImageType>;

dist/filters/BrightnessFilter.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BrightnessFilter=void 0;var ColorsFilter_1=require("../ColorsFilter"),createCSSFilter_1=require("../createCSSFilter"),utils_1=require("../utils");exports.BrightnessFilter=createCSSFilter_1.createCSSFilter({cssFunctionName:"brightness",cssFunctionValuePostfix:"%",defaultValue:100,name:"BrightnessFilter",processImage:function(e,r,t){return utils_1.forEachPixel(e,t,function(t,i,s,l){utils_1.assignPixel(e,t,ColorsFilter_1.ColorsFilter.brighten(i,s,l,r/100))}),e}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BrightnessFilter=void 0;var ColorsFilter_1=require("../ColorsFilter"),createCSSFilter_1=require("../createCSSFilter"),utils_1=require("../utils");exports.BrightnessFilter=createCSSFilter_1.createCSSFilter({cssFunctionName:"brightness",cssFunctionValuePostfix:"%",defaultValue:100,name:"BrightnessFilter",processImage:function(e,r,t){var i=r/100;return utils_1.forEachPixel(e,t,function(r,t,s,l){utils_1.assignPixel(e,r,ColorsFilter_1.ColorsFilter.brighten(t,s,l,i))}),e}});

dist/filters/ContrastFilter.d.ts

@@ -1,1 +0,1 @@
-export declare const ContrastFilter: import("..").ICSSFilter<number>;
+export declare const ContrastFilter: import("..").ICSSFilter<number, import("..").TProcessableImageType>;

dist/filters/ContrastFilter.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ContrastFilter=void 0;var ColorsFilter_1=require("../ColorsFilter"),createCSSFilter_1=require("../createCSSFilter"),utils_1=require("../utils");exports.ContrastFilter=createCSSFilter_1.createCSSFilter({cssFunctionName:"contrast",cssFunctionValuePostfix:"%",defaultValue:100,name:"ContrastFilter",processImage:function(e,t,r){return utils_1.forEachPixel(e,r,function(r,i,s,l){utils_1.assignPixel(e,r,ColorsFilter_1.ColorsFilter.contrast(i,s,l,t/100))}),e}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ContrastFilter=void 0;var ColorsFilter_1=require("../ColorsFilter"),createCSSFilter_1=require("../createCSSFilter"),utils_1=require("../utils");exports.ContrastFilter=createCSSFilter_1.createCSSFilter({cssFunctionName:"contrast",cssFunctionValuePostfix:"%",defaultValue:100,name:"ContrastFilter",processImage:function(e,t,r){var i=t/100;return utils_1.forEachPixel(e,r,function(t,r,s,l){utils_1.assignPixel(e,t,ColorsFilter_1.ColorsFilter.contrast(r,s,l,i))}),e}});

dist/filters/GrayscaleFilter.d.ts

@@ -1,1 +0,1 @@
-export declare const GrayscaleFilter: import("..").ICSSFilter<number>;
+export declare const GrayscaleFilter: import("..").ICSSFilter<number, import("..").TProcessableImageType>;

dist/filters/GrayscaleFilter.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.GrayscaleFilter=void 0;var createCSSFilter_1=require("../createCSSFilter"),utils_1=require("../utils"),ColorsFilter_1=require("../ColorsFilter");exports.GrayscaleFilter=createCSSFilter_1.createCSSFilter({cssFunctionName:"grayscale",cssFunctionValuePostfix:"%",defaultValue:0,name:"GrayscaleFilter",processImage:function(e,r,t){return utils_1.forEachPixel(e,t,function(t,l,i,s){utils_1.assignPixel(e,t,ColorsFilter_1.ColorsFilter.grayscale(l,i,s,r/100))}),e}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.GrayscaleFilter=void 0;var createCSSFilter_1=require("../createCSSFilter"),utils_1=require("../utils"),ColorsFilter_1=require("../ColorsFilter");exports.GrayscaleFilter=createCSSFilter_1.createCSSFilter({cssFunctionName:"grayscale",cssFunctionValuePostfix:"%",defaultValue:0,name:"GrayscaleFilter",processImage:function(e,r,t){var l=r/100;return utils_1.forEachPixel(e,t,function(r,t,i,s){utils_1.assignPixel(e,r,ColorsFilter_1.ColorsFilter.grayscale(t,i,s,l))}),e}});

dist/filters/HueRotationBrowserFilter.d.ts

@@ -1,1 +0,1 @@
-export declare const HueRotationBrowserFilter: import("..").ICSSFilter<number>;
+export declare const HueRotationBrowserFilter: import("..").ICSSFilter<number, import("..").TProcessableImageType>;

dist/filters/HueRotationBrowserFilter.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.HueRotationBrowserFilter=void 0;var ColorsFilter_1=require("../ColorsFilter"),createCSSFilter_1=require("../createCSSFilter"),utils_1=require("../utils");exports.HueRotationBrowserFilter=createCSSFilter_1.createCSSFilter({cssFunctionName:"hue-rotate",cssFunctionValuePostfix:"deg",defaultValue:0,name:"HueRotationBrowserFilter",processImage:function(e,r,t){return utils_1.forEachPixel(e,t,function(t,o,i,s){utils_1.assignPixel(e,t,ColorsFilter_1.ColorsFilter.hueRotationBrowser(o,i,s,r))}),e}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.HueRotationBrowserFilter=void 0;var ColorsFilter_1=require("../ColorsFilter"),createCSSFilter_1=require("../createCSSFilter"),utils_1=require("../utils");exports.HueRotationBrowserFilter=createCSSFilter_1.createCSSFilter({cssFunctionName:"hue-rotate",cssFunctionValuePostfix:"deg",defaultValue:0,name:"HueRotationBrowserFilter",processImage:function(e,r,t){var o=r/360;return utils_1.forEachPixel(e,t,function(r,t,i,s){utils_1.assignPixel(e,r,ColorsFilter_1.ColorsFilter.hueRotationBrowser(t,i,s,o))}),e}});

dist/filters/HueRotationFilter.d.ts

@@ -1,1 +0,1 @@
-export declare const HueRotationFilter: import("..").ICSSFilter<number>;
+export declare const HueRotationFilter: import("..").ICSSFilter<number, import("..").TProcessableImageType>;

dist/filters/HueRotationFilter.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.HueRotationFilter=void 0;var ColorsFilter_1=require("../ColorsFilter"),createCSSFilter_1=require("../createCSSFilter"),utils_1=require("../utils");exports.HueRotationFilter=createCSSFilter_1.createCSSFilter({cssFunctionName:"hue-rotate",cssFunctionValuePostfix:"deg",defaultValue:0,name:"HueRotationFilter",processImage:function(e,t,r){return utils_1.forEachPixel(e,r,function(r,i,o,l){utils_1.assignPixel(e,r,ColorsFilter_1.ColorsFilter.hueRotation(i,o,l,t/360))}),e}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.HueRotationFilter=void 0;var ColorsFilter_1=require("../ColorsFilter"),createCSSFilter_1=require("../createCSSFilter"),utils_1=require("../utils");exports.HueRotationFilter=createCSSFilter_1.createCSSFilter({cssFunctionName:"hue-rotate",cssFunctionValuePostfix:"deg",defaultValue:0,name:"HueRotationFilter",processImage:function(e,t,r){var i=t/360;return utils_1.forEachPixel(e,r,function(t,r,o,l){utils_1.assignPixel(e,t,ColorsFilter_1.ColorsFilter.hueRotation(r,o,l,i))}),e}});

dist/filters/index.d.ts

@@ -0,1 +1,2 @@
+export * from './BlurFilter';
 export * from './BrightnessFilter';
@@ -6,3 +7,5 @@ export * from './ContrastFilter';
 export * from './HueRotationFilter';
+export * from './InversionFilter';
+export * from './OpacityFilter';
 export * from './SaturationFilter';
 export * from './SepiaFilter';

dist/filters/index.js

@@ -1,1 +0,1 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,r,t,i){void 0===i&&(i=t),Object.defineProperty(e,i,{enumerable:!0,get:function(){return r[t]}})}:function(e,r,t,i){void 0===i&&(i=t),e[i]=r[t]}),__exportStar=this&&this.__exportStar||function(e,r){for(var t in e)"default"===t||Object.prototype.hasOwnProperty.call(r,t)||__createBinding(r,e,t)};Object.defineProperty(exports,"__esModule",{value:!0}),__exportStar(require("./BrightnessFilter"),exports),__exportStar(require("./ContrastFilter"),exports),__exportStar(require("./GrayscaleFilter"),exports),__exportStar(require("./HueRotationBrowserFilter"),exports),__exportStar(require("./HueRotationFilter"),exports),__exportStar(require("./SaturationFilter"),exports),__exportStar(require("./SepiaFilter"),exports);
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(r,e,t,i){void 0===i&&(i=t),Object.defineProperty(r,i,{enumerable:!0,get:function(){return e[t]}})}:function(r,e,t,i){void 0===i&&(i=t),r[i]=e[t]}),__exportStar=this&&this.__exportStar||function(r,e){for(var t in r)"default"===t||Object.prototype.hasOwnProperty.call(e,t)||__createBinding(e,r,t)};Object.defineProperty(exports,"__esModule",{value:!0}),__exportStar(require("./BlurFilter"),exports),__exportStar(require("./BrightnessFilter"),exports),__exportStar(require("./ContrastFilter"),exports),__exportStar(require("./GrayscaleFilter"),exports),__exportStar(require("./HueRotationBrowserFilter"),exports),__exportStar(require("./HueRotationFilter"),exports),__exportStar(require("./InversionFilter"),exports),__exportStar(require("./OpacityFilter"),exports),__exportStar(require("./SaturationFilter"),exports),__exportStar(require("./SepiaFilter"),exports);

dist/filters/SaturationFilter.d.ts

@@ -1,1 +0,1 @@
-export declare const SaturationFilter: import("..").ICSSFilter<number>;
+export declare const SaturationFilter: import("..").ICSSFilter<number, import("..").TProcessableImageType>;

dist/filters/SaturationFilter.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SaturationFilter=void 0;var ColorsFilter_1=require("../ColorsFilter"),createCSSFilter_1=require("../createCSSFilter"),utils_1=require("../utils");exports.SaturationFilter=createCSSFilter_1.createCSSFilter({cssFunctionName:"saturate",cssFunctionValuePostfix:"%",defaultValue:100,name:"SaturationFilter",processImage:function(e,t,r){return utils_1.forEachPixel(e,r,function(r,i,l,s){utils_1.assignPixel(e,r,ColorsFilter_1.ColorsFilter.saturate(i,l,s,t/100))}),e}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SaturationFilter=void 0;var ColorsFilter_1=require("../ColorsFilter"),createCSSFilter_1=require("../createCSSFilter"),utils_1=require("../utils");exports.SaturationFilter=createCSSFilter_1.createCSSFilter({cssFunctionName:"saturate",cssFunctionValuePostfix:"%",defaultValue:100,name:"SaturationFilter",processImage:function(e,t,r){var i=t/100;return utils_1.forEachPixel(e,r,function(t,r,l,a){utils_1.assignPixel(e,t,ColorsFilter_1.ColorsFilter.saturate(r,l,a,i))}),e}});

dist/filters/SepiaFilter.d.ts

@@ -1,1 +0,1 @@
-export declare const SepiaFilter: import("..").ICSSFilter<number>;
+export declare const SepiaFilter: import("..").ICSSFilter<number, import("..").TProcessableImageType>;

dist/filters/SepiaFilter.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SepiaFilter=void 0;var ColorsFilter_1=require("../ColorsFilter"),createCSSFilter_1=require("../createCSSFilter"),utils_1=require("../utils");exports.SepiaFilter=createCSSFilter_1.createCSSFilter({cssFunctionName:"sepia",cssFunctionValuePostfix:"%",defaultValue:0,name:"SepiaFilter",processImage:function(e,r,i){return utils_1.forEachPixel(e,i,function(i,t,l,s){utils_1.assignPixel(e,i,ColorsFilter_1.ColorsFilter.sepia(t,l,s,r/100))}),e}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SepiaFilter=void 0;var ColorsFilter_1=require("../ColorsFilter"),createCSSFilter_1=require("../createCSSFilter"),utils_1=require("../utils");exports.SepiaFilter=createCSSFilter_1.createCSSFilter({cssFunctionName:"sepia",cssFunctionValuePostfix:"%",defaultValue:0,name:"SepiaFilter",processImage:function(e,r,i){var t=r/100;return utils_1.forEachPixel(e,i,function(r,i,l,s){utils_1.assignPixel(e,r,ColorsFilter_1.ColorsFilter.sepia(i,l,s,t))}),e}});

dist/types.d.ts

@@ -1,5 +0,3 @@
-export declare type TProcessableImage = Uint8ClampedArray | number[];
-export declare type TCSSFilterApplyToImage = Uint8ClampedArray | ImageData | number[];
 export declare type TProcessableImageType = 'rgb' | 'rgba';
-export interface IApplyToSettings {
+export interface IApplyToSettings<Type extends TProcessableImageType = TProcessableImageType> {
     /**
@@ -9,5 +7,4 @@ * Defines passed image type. So, when filter is applied to image, it
      * should be modified.
-     * @default 'rgba'
      */
-    type?: TProcessableImageType;
+    type: Type;
 }
@@ -17,8 +14,11 @@ /**
  */
-export declare type TProcessImageFunc<V = TCSSFilterDefaultValue> = <T extends TProcessableImage>(image: T, value: V, type: TProcessableImageType) => T;
+export declare type TProcessImageFunc<Value = TCSSFilterDefaultValue, ImageType extends TProcessableImageType = TProcessableImageType> = (image: ImageData, value: Value, type: ImageType) => ImageData;
 /**
- * CSS filter default value default type.
+ * CSS filter default value's default type.
  */
 export declare type TCSSFilterDefaultValue = number;
-export interface ICSSFilter<V = TCSSFilterDefaultValue> {
+/**
+ * Describes any CSS filter which could be used in CSS's filter property.
+ */
+export interface ICSSFilter<Value = TCSSFilterDefaultValue, ImageType extends TProcessableImageType = TProcessableImageType> {
     /**
@@ -28,12 +28,12 @@ * Returns CSS filter function applied to passed value. As a result,
      * in CSS's "filter" property.
-     * @param {V} value
+     * @param {Value} value
      * @returns {string}
      */
-    getCSSFilter(value: V): string;
+    getCSSFilter(value: Value): string;
     /**
      * States if passed value is default for this filter.
-     * @param {V} value
+     * @param {Value} value
      * @returns {boolean}
      */
-    isDefault(value: V): boolean;
+    isDefault(value: Value): boolean;
     /**
@@ -46,3 +46,3 @@ * Applies filter to pixel or set of RGB/RGBA pixels. To make it more
      */
-    applyTo<T extends TCSSFilterApplyToImage>(image: T, value: V, settings?: IApplyToSettings): T;
+    applyTo(image: ImageData, value: Value, settings: IApplyToSettings<ImageType>): ImageData;
 }

dist/utils.d.ts

@@ -1,2 +0,7 @@
-import { TProcessableImage, TProcessableImageType } from './types';
+import { TProcessableImageType } from './types';
+declare type TRGBAComponent = number;
+declare type TR = TRGBAComponent;
+declare type TG = TRGBAComponent;
+declare type TB = TRGBAComponent;
+declare type TA = TRGBAComponent;
 /**
@@ -8,23 +13,18 @@ * Returns bytes count for specified pixel type.
 export declare function getBytesCount(type: TProcessableImageType): number;
-declare type TRGBAComponent = number;
-declare type TR = TRGBAComponent;
-declare type TG = TRGBAComponent;
-declare type TB = TRGBAComponent;
-declare type TA = TRGBAComponent;
 /**
  * Applies function f to each pixel of image.
- * @param {TProcessableImage} image
+ * @param {ImageData} image
  * @param {"rgb"} type
  * @param {(r: number, g: number, b: number) => any} f
  */
-export declare function forEachPixel(image: TProcessableImage, type: 'rgb', f: (index: number, r: TR, g: TG, b: TB) => any): void;
-export declare function forEachPixel(image: TProcessableImage, type: 'rgba', f: (index: number, r: TR, g: TG, b: TB, a: TA) => any): void;
-export declare function forEachPixel(image: TProcessableImage, type: TProcessableImageType, f: (index: number, r: TR, g: TG, b: TB) => any): void;
+export declare function forEachPixel(image: ImageData, type: 'rgb', f: (index: number, r: TR, g: TG, b: TB) => any): void;
+export declare function forEachPixel(image: ImageData, type: 'rgba', f: (index: number, r: TR, g: TG, b: TB, a: TA) => any): void;
+export declare function forEachPixel(image: ImageData, type: TProcessableImageType, f: (index: number, r: TR, g: TG, b: TB) => any): void;
 /**
  * Changes pixel in image.
- * @param {TProcessableImage} image
+ * @param {ImageData} image
  * @param {number} from
  * @param {number[]} components
  */
-export declare function assignPixel(image: TProcessableImage, from: number, components: number[]): void;
+export declare function assignPixel(image: ImageData, from: number, components: number[]): void;
 export {};

dist/utils.js

@@ -1,1 +0,1 @@
-"use strict";function getBytesCount(e){return"rgb"===e?3:4}function forEachPixel(e,t,o){for(var r=getBytesCount(t),s=0;s<e.length;s+=r){var i=e[s],n=e[s+1],l=e[s+2];if("rgba"===t){var a=e[s+3];o.call(o,s,i,n,l,a)}else o.call(o,s,i,n,l)}}function assignPixel(e,t,o){for(var r=0;r<o.length;r++)e[t+r]=o[r]}Object.defineProperty(exports,"__esModule",{value:!0}),exports.assignPixel=exports.forEachPixel=exports.getBytesCount=void 0,exports.getBytesCount=getBytesCount,exports.forEachPixel=forEachPixel,exports.assignPixel=assignPixel;
+"use strict";function getBytesCount(e){return"rgb"===e?3:4}function forEachPixel(e,t,o){for(var r=e.data,s=getBytesCount(t),a=0;a<r.length;a+=s){var i=r[a],n=r[a+1],l=r[a+2];if("rgba"===t){var x=r[a+3];o.call(o,a,i,n,l,x)}else o.call(o,a,i,n,l)}}function assignPixel(e,t,o){for(var r=0;r<o.length;r++)e.data[t+r]=o[r]}Object.defineProperty(exports,"__esModule",{value:!0}),exports.assignPixel=exports.forEachPixel=exports.getBytesCount=void 0,exports.getBytesCount=getBytesCount,exports.forEachPixel=forEachPixel,exports.assignPixel=assignPixel;

package.json

 {
   "name": "css-js-filter",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "repository": "https://github.com/wolframdeus/css-js-filter.git",
@@ -74,3 +74,6 @@ "author": "Vladislav Kibenko <[e-mail]>",
     ]
+  },
+  "dependencies": {
+    "stackblur-canvas": "^2.4.0"
   }
 }

README.md

@@ -159,3 +159,3 @@ # css-js-filter
         // NOTE: To be replaced in near future. 
-        assignPixel(image, i, Filter.applyTo([r, g, b], value * intensity));
+        assignPixel(image, i, Filter.applyTo([r, g, b], value * intensity, {type: 'rgb'}));
       });
@@ -167,2 +167,20 @@ }));
 });
-``` 
+```
+
+## Preview
+
+Firstly, clone repository:
+
+```bash
+git clone [e-mail]:wolframdeus/css-js-filter.git
+```
+
+After, when repository is cloned, install all dependencies:
+```bash
+yarn install
+```
+
+Finally, run preview and go to http://localhost:9000 :
+```bash
+yarn dev:browser
+```

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

34009

increased by14.81%

Number of package files

38

increased by18.75%

Lines of code

312

increased by10.64%

Number of lines in readme file

184

increased by10.84%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of low quality alerts

15

increased by25%

Dependency changes

• + Addedstackblur-canvas@^2.4.0

• + Addedstackblur-canvas@2.7.0(transitive)