ace-colorpicker-rpk 0.0.12

package/src/util/functions/func.js

@@ -0,0 +1,194 @@
+
+export function debounce (callback, delay) {
+
+    var t = undefined;
+
+    return function ($1, $2, $3, $4, $5) {
+        if (t) {
+            clearTimeout(t);
+        }
+
+        t = setTimeout(function () {
+            callback($1, $2, $3, $4, $5);
+        }, delay || 300);
+    }
+}
+  
+
+export function throttle (callback, delay) {
+
+    var t = undefined;
+
+    return function ($1, $2, $3, $4, $5) {
+        if (!t) {
+            t = setTimeout(function () {
+                callback($1, $2, $3, $4, $5);
+                t = null; 
+            }, delay || 300);
+        }
+
+    }
+}
+
+export function keyEach (obj, callback) {
+    Object.keys(obj).forEach( (key, index) => {
+        callback (key, obj[key], index);
+    })
+}
+
+export function keyMap (obj, callback) {
+    return Object.keys(obj).map( (key, index) => {
+        return callback (key, obj[key], index);
+    })
+}
+
+export function get(obj, key, callback) {
+    
+    var returnValue = defaultValue(obj[key], key);
+
+    if (isFunction( callback ) ) {
+        return callback(returnValue);
+    }
+
+    return returnValue; 
+}
+
+export function defaultValue (value, defaultValue) {
+    return typeof value == 'undefined' ? defaultValue : value;
+}
+
+export function isUndefined (value) {
+    return typeof value == 'undefined' || value === null;
+}
+
+export function isNotUndefined (value) {
+    return isUndefined(value) === false;
+}
+
+export function isArray (value) {
+    return Array.isArray(value);
+}
+
+export function isBoolean (value) {
+    return typeof value == 'boolean'
+}
+
+export function isString (value) {
+    return typeof value == 'string'
+}
+
+export function isNotString (value) {
+    return isString(value) === false;
+}
+
+export function isObject (value) {
+    return typeof value == 'object' && !isArray(value) && !isNumber(value) && !isString(value)  && value !== null; 
+}
+
+export function isFunction (value) {
+    return typeof value == 'function'
+}
+
+export function isNumber (value) {
+    return typeof value == 'number';
+}
+
+export function clone (obj) {
+    return JSON.parse(JSON.stringify(obj));
+}
+
+export function cleanObject (obj) {
+    var realObject = {}
+    Object.keys(obj).filter(key => {
+        return !!obj[key]
+    }).forEach(key => {
+        realObject[key] = obj[key]
+    });
+
+    return realObject;
+}
+
+export function combineKeyArray (obj) {
+    Object.keys(obj).forEach(key => {
+        if (Array.isArray(obj[key])) {
+            obj[key] = obj[key].join(', ')
+        }
+    })
+
+    return obj;
+}
+
+export function repeat (count) {
+    return [...Array(count)];
+}
+
+
+const short_tag_regexp = /\<(\w*)([^\>]*)\/\>/gim;
+
+const HTML_TAG = {
+    'image': true,
+    'input': true,
+    'br': true,
+    'path': true 
+}
+
+
+export const html = (strings, ...args) => {
+
+    var results =  strings.map((it, index) => {
+        
+        var results = args[index] || ''
+
+        if (isFunction(results)) {
+            results = results()
+        }
+
+        if (!isArray(results)) {
+            results = [results]
+        }
+
+        results = results.map(r => {
+            if (isObject(r) && !isArray(r)) {
+                return Object.keys(r).map(key => {
+                    return `${key}="${r[key]}"`
+                }).join(' ')
+            }
+
+            return r
+        }).join('')
+
+        return it + results;
+    }).join('');
+
+    results = results.replace(short_tag_regexp, function (match, p1) {
+        if (HTML_TAG[p1.toLowerCase()]) {
+            return match;
+        } else {
+            return match.replace('/>', `></${p1}>`)
+        }
+    })
+
+    return results; 
+}
+
+export function CSS_TO_STRING(style) {
+    var newStyle = style;
+  
+    return Object.keys(newStyle)
+      .filter(key => newStyle[key])
+      .map(key => `${key}: ${newStyle[key]}`)
+      .join(";");
+  }
+  
+
+export function STRING_TO_CSS (str) {
+    var style = {}
+    str.split(';').forEach(it => {
+       var [key, ...value] = it.split(':').map(it => it.trim())
+       if (key != '') {
+        style[key] = value.join(':'); 
+       }
+    })
+
+    return style;
+}

package/src/util/functions/image.js

@@ -0,0 +1,145 @@
+import kmeans from '../Kmeans'
+import ImageLoader from '../ImageLoader'
+import Canvas from '../Canvas'
+import GL from '../GL' 
+import { format } from './formatter'
+
+export function palette(colors, k = 6, exportFormat = 'hex') {
+
+    if (colors.length > k) {
+        colors = kmeans(colors, k);
+    }
+
+    return colors.map(c => {
+        return format(c, exportFormat);
+    }); 
+}
+
+export function ImageToRGB(url, callbackOrOption = {}, callback) {
+
+    if (!callback) {
+        var img = new ImageLoader(url);
+        img.loadImage(() => {
+            if (typeof callbackOrOption == 'function') {
+                callbackOrOption(img.toRGB());
+            }
+
+        })
+    } else if (callback) {
+        var img = new ImageLoader(url, callbackOrOption);
+        img.loadImage(() => {
+            if (typeof callback == 'function') {
+                callback(img.toRGB());
+            }
+
+        })
+    }
+}
+
+export function ImageToCanvas (url, filter, callback, opt = { frameTimer: 'full' }) {
+    ImageToURL(url, filter, callback, Object.assign({
+        returnTo: 'canvas'
+    }, opt))
+}
+
+export function ImageToURL(url, filter, callback, opt = { frameTimer : 'full'}) {
+    var img = new ImageLoader(url);
+    img.loadImage(() => {
+        img.toArray(filter, function (datauri) {
+            if (typeof callback == 'function') {
+                callback(datauri)
+            }                
+        }, opt);
+    })
+}
+
+export function GLToCanvas (url, filter, callback, opt = {}) {
+    var img = new ImageLoader(url);
+    img.load(() => {
+        GL.filter(img.newImage, filter, function done (datauri) {
+            if (typeof callback == 'function') {
+                callback(datauri)
+            }
+        }, opt)
+    })
+}
+
+export function histogram (url, callback, opt = {}) {
+    var img = new ImageLoader(url);
+    img.loadImage(() => {
+        if (typeof callback == 'function') {
+            callback(img.toHistogram(opt));
+        }
+    })
+}
+
+export function histogramToPoints (points, tension = 0.2) {
+
+    var controlPoints = [];
+    for(let i = 0; i < points.length; i++) {
+        var p = points[i]
+        if (i == 0) {
+            controlPoints[i] = []
+            continue; 
+        } 
+
+        if (i == points.length - 1) {
+            controlPoints[i] = []
+            continue; 
+        }
+
+        var prevPoint = points[i-1]
+        var nextPoint = points[i+1]
+
+        // 기울기 
+        var M = (nextPoint[1] - prevPoint[1]) / (nextPoint[0] - prevPoint[0])
+
+        var newControlPoint = [ 
+            prevPoint[0] + (nextPoint[0] - prevPoint[0]) * tension,
+            prevPoint[1] + (nextPoint[1] - prevPoint[1]) * tension
+        ]
+
+        var controlPoint = [
+            [...prevPoint], /* start */ 
+            [...newControlPoint] /* end */
+        ]
+
+        var P = Math.sqrt(Math.pow((p[0] - prevPoint[0]), 2) + Math.pow((p[1] - prevPoint[1]), 2))
+        var N = Math.sqrt(Math.pow((nextPoint[0] - p[0]), 2) + Math.pow((nextPoint[1] - p[1]), 2))
+
+        var rate = P / N 
+
+        var dx = controlPoint[0][0] + (controlPoint[1][0] - controlPoint[0][0] ) * rate
+        var dy = controlPoint[0][1] + (controlPoint[1][1] - controlPoint[0][1] ) * rate
+
+        controlPoint[0][0] += p[0] - dx 
+        controlPoint[0][1] += p[1] - dy 
+        controlPoint[1][0] += p[0] - dx 
+        controlPoint[1][1] += p[1] - dy         
+
+        controlPoints[i] = controlPoint
+    }
+
+    return controlPoints
+}
+
+export function ImageToHistogram(url, callback, opt = { width: 200, height: 100 }) {
+
+    var img = new ImageLoader(url);
+    img.loadImage(() => {
+        Canvas.createHistogram (opt.width || 200, opt.height || 100, img.toHistogram(opt), function (canvas) {
+            if (typeof callback == 'function') callback(canvas.toDataURL('image/png'));
+        }, opt)
+    })
+}
+
+export default {
+    palette,
+    ImageToCanvas,
+    ImageToHistogram,
+    ImageToRGB,
+    ImageToURL,
+    GLToCanvas,
+    histogram,
+    histogramToPoints
+}

package/src/util/functions/math.js

@@ -0,0 +1,56 @@
+export function round (n, k) {
+    k = typeof k == 'undefined' ? 1 : k; 
+    return Math.round(n * k) / k;
+}
+
+
+export function degreeToRadian (angle) {
+    return angle * Math.PI / 180;
+}
+
+/**
+ * 
+ * convert radian to degree 
+ * 
+ * @param {*} radian 
+ * @returns {Number} 0..360
+ */
+export function radianToDegree(radian) {
+    var angle =  radian * 180 / Math.PI;
+
+
+    if (angle < 0) {   // 각도가 0보다 작으면 360 에서 반전시킨다. 
+        angle = 360 + angle
+    }
+
+    return angle; 
+}
+
+
+export function getXInCircle (angle, radius, centerX = 0) {
+    return centerX + radius * Math.cos(degreeToRadian (angle))
+}
+
+export function getYInCircle (angle, radius, centerY = 0) {
+    return centerY + radius * Math.sin(degreeToRadian(angle))
+}    
+
+export function getXYInCircle (angle, radius, centerX = 0, centerY = 0) {
+    return {
+        x : getXInCircle(angle, radius, centerX),
+        y : getYInCircle(angle, radius, centerY)
+    }
+}
+
+export function caculateAngle (rx, ry) {
+    return radianToDegree(Math.atan2(ry, rx))
+}
+
+export default {
+    round,
+    radianToDegree,
+    degreeToRadian,
+    getXInCircle,
+    getYInCircle,
+    caculateAngle
+}

package/src/util/functions/mixin.js

@@ -0,0 +1,164 @@
+import { parse, convertMatchesArray, parseGradient } from './parser'
+import { round } from './math' 
+import { format } from './formatter' 
+import { RGBtoHSV } from './fromRGB'
+import { HSVtoRGB } from './fromHSV'
+
+/**
+ * @deprecated 
+ * 
+ * instead of this,  use blend function 
+ *  
+ * @param {*} startColor 
+ * @param {*} endColor 
+ * @param {*} t 
+ */
+export function interpolateRGB(startColor, endColor, t = 0.5, exportFormat = 'hex') {
+    var obj = {
+        r: round(startColor.r + (endColor.r - startColor.r) * t),
+        g: round(startColor.g + (endColor.g - startColor.g) * t),
+        b: round(startColor.b + (endColor.b - startColor.b) * t),
+        a: round(startColor.a + (endColor.a - startColor.a) * t, 100 )
+    };  
+
+    return format(obj, obj.a < 1 ? 'rgb' : exportFormat);
+
+}
+
+export function scale(scale, count = 5) {
+    if (!scale) return [];
+
+    if (typeof scale === 'string') {
+        scale = convertMatchesArray(scale);
+    }
+
+    scale = scale || [];
+    var len = scale.length;
+
+    var colors = [];
+    for (var i = 0; i < len - 1; i++) {
+        for (var index = 0; index < count; index++) {
+            colors.push(blend(scale[i], scale[i + 1], (index / count)));
+        }
+
+    }
+    return colors;
+}
+
+export function blend(startColor, endColor, ratio = 0.5, format = 'hex') {
+    var s = parse(startColor);
+    var e = parse(endColor);
+
+    return interpolateRGB(s, e, ratio, format);
+}
+
+export function mix(startcolor, endColor, ratio = 0.5, format = 'hex') {
+    return blend(startcolor, endColor, ratio, format);
+}
+
+/**
+ * 
+ * @param {Color|String} c 
+ */
+export function contrast(c) {
+    c = parse(c);
+    return (Math.round(c.r * 299) + Math.round(c.g * 587) + Math.round(c.b * 114)) / 1000;
+}
+
+export function contrastColor (c) {
+    return contrast(c) >= 128 ? 'black' : 'white'
+}
+
+export function gradient(colors, count = 10) {
+    colors = parseGradient(colors);
+
+    let newColors = [] 
+    let maxCount = count - (colors.length - 1)
+    let allCount = maxCount
+
+    for (var i = 1, len = colors.length; i < len; i++) {
+
+        var startColor = colors[i-1][0]
+        var endColor = colors[i][0]
+
+        // if it is second color
+        var rate = i == 1 ? colors[i][1] : colors[i][1] - colors[i-1][1]
+
+        // if it is last color 
+        var colorCount = (i == colors.length - 1) ? allCount : Math.floor(rate * maxCount)
+
+        newColors = newColors.concat(scale([startColor, endColor], colorCount), [endColor])
+
+        allCount -= colorCount
+    }
+    return newColors;
+}
+
+export function scaleHSV(color, target = 'h', count = 9, exportFormat = 'rgb', min = 0, max = 1, dist = 100) {
+    var colorObj = parse(color);
+    var hsv = RGBtoHSV(colorObj);
+    var unit = ((max - min) * dist / count);
+
+    var results = [];
+    for (var i = 1; i <= count; i++) {
+        hsv[target] = Math.abs((dist - unit * i) / dist);
+        results.push(format(HSVtoRGB(hsv), exportFormat));
+    }
+
+    return results;
+}
+
+export function scaleH(color, count = 9, exportFormat = 'rgb', min = 0, max = 360) {
+    return scaleHSV(color, 'h', count, exportFormat, min, max, 1);
+}
+
+export function scaleS(color, count = 9, exportFormat = 'rgb', min = 0, max = 1) {
+    return scaleHSV(color, 's', count, exportFormat, min, max, 100);
+}
+
+export function scaleV(color, count = 9, exportFormat = 'rgb', min = 0, max = 1) {
+    return scaleHSV(color, 'v', count, exportFormat, min, max, 100);
+}
+
+
+/* predefined scale colors */
+scale.parula = function (count) {
+    return scale(['#352a87', '#0f5cdd', '#00b5a6', '#ffc337', '#fdff00'], count);
+};
+
+scale.jet = function (count) {
+    return scale(['#00008f', '#0020ff', '#00ffff', '#51ff77', '#fdff00', '#ff0000', '#800000'], count);
+}
+
+scale.hsv = function (count) {
+    return scale(['#ff0000', '#ffff00', '#00ff00', '#00ffff', '#0000ff', '#ff00ff', '#ff0000'], count);
+}
+
+scale.hot = function (count) {
+    return scale(['#0b0000', '#ff0000', '#ffff00', '#ffffff'], count);
+}
+scale.pink = function (count) {
+    return scale(['#1e0000', '#bd7b7b', '#e7e5b2', '#ffffff'], count);
+}
+
+scale.bone = function (count) {
+    return scale(['#000000', '#4a4a68', '#a6c6c6', '#ffffff'], count);
+}
+
+scale.copper = function (count) {
+    return scale(['#000000', '#3d2618', '#9d623e', '#ffa167', '#ffc77f'], count);
+}
+
+export default {
+    interpolateRGB,
+    blend,
+    mix,
+    scale,
+    contrast,
+    contrastColor,
+    gradient,
+    scaleHSV,
+    scaleH,
+    scaleS,
+    scaleV
+}