Update refactoring filter functions

index.html

@@ -672,8 +672,11 @@ <h1> Image Filter </h1>
                     <button type="button" onclick="filter_image(['filter', 'gradient(black, yellow 0.5, rgba(255, 0, 0, 0.5) 0.7, white, 100) sepia(5)'])">parse</button>
                 </div>                    
                 <div>
-                    <button type="button" onclick="filter_image(['filter', 'vintage'])">vintage</button>
-                </div>                                    
+                    <button type="button" onclick="filter_image(['vintage'])">vintage</button>
+                </div>          
+                <div>
+                    <button type="button" onclick="filter_image(['stack-blur', '10px'])">stack-blur(5px)</button>
+                </div>                                                    
                 <div>
                     <button type="button" onclick="filter_image(['flipH'])">flipH</button>
                 </div>    
@@ -737,11 +740,7 @@ <h1> Image Filter </h1>
                 <div>
                     <button type="button" onclick="filter_image(['blur', +document.getElementById('blur-value').value])">blur</button>
                     <input type="range" min="1" max="100" step="1" value="3" id="blur-value" />
-                </div>   
-                <div>
-                    <button type="button" onclick="filter_count(['blur', +document.getElementById('blur-count-value').value])">blur (10)</button>
-                    <input type="range" min="0" max="200" step="1" value="100" id="blur-count-value" />
-                </div>                   
+                </div>                     
                 <div>
                     <button type="button" onclick="filter_image('motionBlur')">motion blur</button>
                 </div>                   
@@ -766,26 +765,7 @@ <h1> Image Filter </h1>
                 <div>
                     <button type="button" onclick="filter_image('sharpen', 'blur', 'sobel')">sobel</button>
                 </div>                                                                                                            
-                <div>
-                    <table class="weights" border="0">
-                        <tr>
-                            <td><input type="number" min="-100" max="100" step="1" value="0" /></td>
-                            <td><input type="number" min="-100" max="100" step="1" value="-1"  /></td>
-                            <td><input type="number" min="-100" max="100" step="1" value="0"  /></td>
-                        </tr>
-                        <tr>
-                            <td><input type="number" min="-100" max="100" step="1" value="-1"  /></td>
-                            <td><input type="number" min="-100" max="100" step="1" value="5"  /></td>
-                            <td><input type="number" min="-100" max="100" step="1" value="-1"  /></td>
-                        </tr>
-                        <tr>
-                            <td><input type="number" min="-100" max="100" step="1" value="0"  /></td>
-                            <td><input type="number" min="-100" max="100" step="1" value="-1"  /></td>
-                            <td><input type="number" min="-100" max="100" step="1" value="0"  /></td>
-                        </tr>                                                    
-                    </table>
-                    <button type="button" onclick="filter_custom()">custom</button>
-                </div>                                                
+
             </div>            
 
     </div>
@@ -985,34 +965,8 @@ <h1 class="title">Default Html Sample </h1>
             document.getElementById('filtered-image').src = url;
         })
     }  
-
-    function filter_count () {
-        var args = Array.prototype.slice.call(arguments);
-        var file = document.getElementById('imageforfilter').files[0];
-        var ImageFilter = CodeMirrorColorPicker.ImageFilter;
-        document.getElementById('sampled-image').src = URL.createObjectURL(file);
 
-        Color.ImageToURL(file, ImageFilter.counter(ImageFilter.merge(args), 100), function (url) {
-            document.getElementById('filtered-image').src = url;
-        })
-    }   
 
-    function filter_custom () {
-        var file = document.getElementById('imageforfilter').files[0];
-        var ImageFilter = CodeMirrorColorPicker.ImageFilter;
-        document.getElementById('sampled-image').src = URL.createObjectURL(file);
-
-        var items = document.querySelectorAll(".weights input[type=number]");
-        var weights = [];
-        [].forEach.call(items, function (it) {
-            weights.push(+it.value);
-        })
-
-        Color.ImageToURL(file, ImageFilter.convolution(weights), function (url) {
-            document.getElementById('filtered-image').src = url;
-        })
-    }           
-
     function shuffle(a) {
         var j, x, i;
         for (i = a.length - 1; i > 0; i--) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codemirror-colorpicker",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "colorpicker for codemirror",
   "main": "./dist/codemirror-colorpicker.js",
   "scripts": {

src/util/ImageFilter.js

@@ -1,120 +1,6 @@
 // TODO: worker run 
-import {
-    makeFilter,
-    getBitmap,
-    putBitmap,
-    pack,
-    packXY,
-    swapColor,
-    matches 
-} from './filter/functions'
+import FilterFunctions from './filter/functions'
 
-import ImageFilter from './filter/index' 
+import FilterList from './filter/index' 
 
-Object.assign(ImageFilter, {
-    pack,
-    packXY,
-    swapColor
-})
-
-let F = ImageFilter
-
-F.filter = function (str) {
-    return F.merge(matches(str).map(it => {
-        return it.arr 
-    }))
-}
-
-/** 
- * 
- * multiply filters
- * 
- * ImageFilter.multi('blur', 'grayscale', 'sharpen', ['blur', 3], function (bitmap) {  return bitmap });
- * 
- */
-F.multi = function (...filters) {
-    filters = filters.map(filter => {
-        return makeFilter(filter, F);
-    })
-
-    return function (bitmap) {
-        return filters.reduce((bitmap, f) => {
-            return f(bitmap);
-        }, bitmap)
-    }
-}
-
-
-F.merge = function (filters) {
-    return F.multi(...filters);
-}
-
-/**
- * apply filter into special area
- * 
- * F.partial({x,y,width,height}, filter, filter, filter )
- * F.partial({x,y,width,height}, 'filter' )
- * 
- * @param {{x, y, width, height}} area 
- * @param {*} filters   
- */
-F.partial = function (area, ...filters) {
-    var allFilter = null 
-    if (filters.length == 1 && typeof filters[0] === 'string') {
-        allFilter = F.filter(filters[0])
-    } else {
-        allFilter = F.merge(filters)
-    } 
-
-    return (bitmap) => {
-        return putBitmap(bitmap, allFilter(getBitmap(bitmap, area)), area);
-    }
-}
-
-F.counter = function (filter, count = 1) {
-    var filters = [];
-
-    for (var i = 0; i < count; i++) {
-        filters.push(filter);
-    }
-
-    return F.multi(...filters);
-}
-
-
-/**
- * multi filter 
- */
-
-
-F.laplacian.grayscale = function (amount = 100) {
-    return F.filter(`grayscale laplacian(${amount}`)
-}
-
-
-F.laplacian5x.grayscale = function () {
-    return F.filter('grayscale laplacian5x');
-}
-
-
-F.kirsch = function () {
-    return F.filter('kirsch-horizontal kirsch-vertical');
-}
-
-F.kirsch.grayscale = function () {
-    return F.filter('grayscale kirsch');
-}
-
-F.sobel = function () {
-    return F.filter('sobel-horizontal sobel-vertical');
-}
-
-F.sobel.grayscale = function () {
-    return F.filter('grayscale sobel');
-}
-
-F.vintage = function () {
-    return F.filter(`brightness(15) saturation(-20) gamma(1.8)`)
-}
-
-export default ImageFilter
+export default Object.assign({}, FilterList, FilterFunctions)

src/util/filter/functions.js

@@ -1,5 +1,39 @@
 import Canvas from '../Canvas'
 import Matrix from '../Matrix'
+import ImageFilter from './index' 
+
+const functions = {
+    partial,
+    multi,
+    merge,
+    weight,
+    repeat,
+    colorMatrix,
+    each,
+    eachXY,
+    createRandomCount,
+    createRandRange,
+    createBitmap,
+    createBlurMatrix,
+    pack,
+    packXY,
+    getBitmap,
+    putBitmap,
+    radian,
+    convolution,
+    parseParamNumber,
+    filter,
+    clamp,
+    multi,
+    merge,
+    matches,
+    parseFilter,
+    partial
+}
+
+const LocalFilter = functions
+
+export default functions
 
 export function weight(arr, num = 1) {
     return arr.map(i => {
@@ -25,7 +59,7 @@ export function colorMatrix(pixels, i, matrix) {
 
 }
 
-export function makeFilter(filter, F) {
+export function makeFilter(filter) {
 
     if (typeof filter == 'function') {
         return filter;
@@ -43,7 +77,7 @@ export function makeFilter(filter, F) {
 
     const params = filter;
 
-    const filterFunction = F[filterName];
+    const filterFunction = ImageFilter[filterName] || LocalFilter[filterName] ;
 
     if (!filterFunction) {
         throw new Error(`${filterName} is not filter. please check filter name.`)
@@ -272,3 +306,57 @@ export function parseFilter (filterString) {
 export function clamp (num) {ß
     return Math.min(255, num)
 } 
+
+
+
+export function filter (str) {
+    return merge(matches(str).map(it => {
+        return it.arr 
+    }))
+}
+
+/** 
+ * 
+ * multiply filters
+ * 
+ * ImageFilter.multi('blur', 'grayscale', 'sharpen', ['blur', 3], function (bitmap) {  return bitmap });
+ * 
+ */
+export function multi (...filters) {
+    filters = filters.map(filter => {
+        return makeFilter(filter);
+    })
+
+    return function (bitmap) {
+        return filters.reduce((bitmap, f) => {
+            return f(bitmap);
+        }, bitmap)
+    }
+}
+
+
+export function merge (filters) {
+    return multi(...filters);
+}
+
+/**
+ * apply filter into special area
+ * 
+ * F.partial({x,y,width,height}, filter, filter, filter )
+ * F.partial({x,y,width,height}, 'filter' )
+ * 
+ * @param {{x, y, width, height}} area 
+ * @param {*} filters   
+ */
+export function partial (area, ...filters) {
+    var allFilter = null 
+    if (filters.length == 1 && typeof filters[0] === 'string') {
+        allFilter = filter(filters[0])
+    } else {
+        allFilter = merge(filters)
+    } 
+
+    return (bitmap) => {
+        return putBitmap(bitmap, allFilter(getBitmap(bitmap, area)), area);
+    }
+}

src/util/filter/index.js

@@ -1,9 +1,11 @@
 import image from './image/index'
 import pixel from './pixel/index'
 import matrix from './matrix/index'
+import multi from './multi/index'
 
-export default {
+export default { 
     ...image,
     ...pixel,
-    ...matrix 
+    ...matrix,
+    ...multi
 } 

src/util/filter/matrix/stack-blur.js

@@ -2,7 +2,7 @@ import {
     parseParamNumber
 } from '../functions'
 
-import StackBlur from '../../blur/StackBlur'
+import StackBlur from '../StackBlur'
 
 export default function (radius = 10, hasAlphaChannel = true) {
     radius = parseParamNumber(radius)

src/util/filter/multi/index.js

@@ -0,0 +1,9 @@
+import kirsch from './kirsch'
+import sobel from './sobel'
+import vintage from './vintage'
+
+export default {
+    kirsch,
+    sobel,
+    vintage
+} 

src/util/filter/multi/kirsch.js

@@ -0,0 +1,7 @@
+import {
+    filter
+} from '../functions'
+
+export default function kirsch () {
+    return filter('kirsch-horizontal kirsch-vertical');
+}

src/util/filter/multi/sobel.js

@@ -0,0 +1,7 @@
+import {
+    filter
+} from '../functions'
+
+export default function sobel () {
+    return filter('sobel-horizontal sobel-vertical');
+}