ace-colorpicker-rpk 0.0.12

package/src/scss/themes/sketch.scss

@@ -0,0 +1,172 @@
+&.sketch {
+    border-radius: 5px;
+
+    > .colorpicker-body {
+
+        > .color {
+            margin: 10px 10px 2px 10px;
+            box-sizing: border-box;
+            height: 150px;
+        }
+    
+        > .control {
+            padding: 0px;
+    
+            > .color, > .empty {
+                position: absolute;
+                right: 10px;
+                left: auto;
+                top: 1px;
+                width: 26px;
+                height: 26px;
+                border-radius: 2px;
+                box-sizing: border-box;
+            }
+    
+            > .color {
+                box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
+            }
+    
+            > .hue {
+                position: relative;
+                padding: 2px 2px 2px 10px;
+                margin: 0px 38px 0px 0px;
+    
+                > .hue-container {
+                    border-radius: 0px;
+                }
+            }
+    
+            > .opacity {
+                position: relative;
+                padding: 2px 2px 2px 10px;
+                margin: 0px 38px 0px 0px;
+    
+                > .opacity-container {
+                    border-radius: 0px;
+                }
+            }
+    
+            .drag-bar, .drag-bar2 {
+                border-radius: 0px;
+                top: 50%;
+                left: 0px;
+                width: 2px;
+                height: 50%;
+                transform: translateX(-50%) translateY(-50%);
+                border-radius: 1px;
+                bottom: 1px !important;
+    
+                &.first {
+                    left: 0px;
+                    transform: translateX(50%) translateY(-50%) !important;
+                }
+    
+                &.last {
+                    transform: translateX(-150%) translateY(-50%) !important;
+                }            
+            }
+        }
+    
+        > .information {
+            .information-change {
+                display: none;
+            }
+    
+            &.rgb {
+                .information-item.rgb {
+                    display: inherit;
+                }
+
+                .information-item.hsl {
+                    display: none !important;
+                }                 
+            }
+    
+            &.hex {
+                .information-item.hex {
+                    display: inherit;
+                }
+                .information-item.hsl {
+                    display: none !important;
+                }                           
+            }
+
+            &.hsl {
+                .information-item.rgb {
+                  display: none !important;
+                }
+        
+                .information-item.hsl {
+                  display: inherit;
+                }        
+            }            
+    
+            .information-item {
+                display: inline-flex !important;
+                margin-right: 0px;
+
+    
+                > .input-field {
+                                    
+                    padding-left: 0px;
+
+                    &:last-child {
+                        padding-right: 0px;
+                    }                
+
+                    > .title {
+                        color: black;
+                        font-size: 11px;
+                        cursor: pointer;
+
+                    }
+                }
+    
+                > .input-field:last-child:not(:first-child) {
+                    padding-right: 0px;
+                }
+            }
+    
+    
+            .information-item.hex {
+                width: 74px;
+                padding-right: 0px;
+                padding-left: 5px;
+            }
+    
+            .information-item.rgb {
+                width: 140px;
+                padding-left: 0px;
+                padding-right: 0px;
+            }
+
+            .information-item.hsl {
+                display: none;
+                width: 140px;
+                padding-left: 0px;
+                padding-right: 0px;
+            }   
+        }
+    
+        > .colorsets {
+            > .menu {
+                // display: none;
+            }
+    
+            > .color-list {
+                margin-right: 0px;
+                padding-right: 12px;
+    
+                .color-item {
+                    width: 16px;
+                    height: 16px;
+                    border-radius: 3px;
+                    margin-right: 9px;
+                    margin-bottom: 10px;
+                }
+            }
+        }
+    }
+
+}

package/src/scss/themes/vscode.scss

@@ -0,0 +1,93 @@
+&.vscode {
+    width: 335px; 
+    display: inline-block;
+    background-color: #333;
+    border: 1px solid #ececec;
+    box-sizing: border-box;
+    border-radius: 0px;
+
+    .colorpicker-body {
+        border-radius: 0px;
+        display: inline-block;
+
+        .color-view {
+            height: 34px;
+            @include transparent-background();
+
+            .color-view-container {
+                line-height: 34px;
+                font-size: 14px;
+                text-align: center;                
+                width: 100%;
+                height: 100%;
+                cursor: pointer;
+                user-select: none;                
+                text-shadow: 0 0 3px rgb(83, 83, 83);
+            }
+        }
+
+        .color-tool {
+            padding: 8px;
+        }
+    }
+
+    .color {
+        display:inline-block;
+        width: 239px;
+        height: 160px;
+        vertical-align: middle;
+    }
+
+    .control {
+        height: 160px;
+        vertical-align: middle;
+        display:inline-block;
+        padding: 0px 0px 0px 4px;
+
+        .hue, .opacity {
+            margin: 0px;
+            padding:0px;
+            width: 30px;
+            display:inline-block;
+            vertical-align: middle;
+            height: 100%;
+            position: relative;
+        }
+
+
+        .hue {
+            padding-left: 5px;
+            width: 35px;
+        }
+
+        .hue > .hue-container {
+            border-radius:0px;
+            height: 100%;
+            background: linear-gradient(to top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);            
+        }
+      
+
+        .opacity > .opacity-container {
+            border-radius: 0px;
+            height: 100%;            
+            width: 30px;
+        }
+        
+
+        .drag-bar, .drag-bar2 {
+            background-color: transparent;
+            height:5px;
+            width:33px;
+            box-sizing: border-box;
+            box-shadow: none;
+            transform: translateY(-50%) translateX(-2px);
+            border: 1px solid rgba(255, 255, 255, 1); 
+            border-radius: 0px;
+            box-shadow: 0 0 2px 0 rgba(0, 0, 0, 1), inset 0 0 0 0 rgba(0, 0, 0, 1);
+
+            
+        }
+
+    }
+
+}

package/src/scss/themes/xd.scss

@@ -0,0 +1,88 @@
+&.xd {
+    display: inline-block;
+    // padding: 12px;
+    padding-top: 12px;
+    width: 245px;
+
+    .color {
+        display:inline-block;
+        margin-left: 12px;
+        margin-bottom: 12px;        
+        width: 170px;
+        height: 170px;
+        vertical-align: middle;
+        border-radius: 3px;
+        overflow: hidden;
+        box-sizing: border-box;
+        border: 1px solid #cecece;
+
+        > .saturation {
+            > .value  {
+                > .drag-pointer {
+                    border: 2px solid white;
+                    width: 7px;
+                    height: 7px;        
+                    box-shadow: 0 0 1px 0px rgba(0, 0, 0, 1), inset 0 0 1px 0px rgba(0, 0, 0, 1);            
+                }
+            }
+        }
+        
+    }
+
+    .control {
+        height: 170px;
+        padding: 0px;
+        vertical-align: middle;
+        display:inline-block;
+        margin-right: 12px;
+        margin-bottom: 12px;
+
+        .hue, .opacity {
+            margin: 0px;
+            padding:0px;
+            width: 13px;
+            display:inline-block;
+            vertical-align: middle;
+            height: 100%;
+            position: relative;
+            overflow: hidden;
+            border-radius: 3px;
+            margin-left: 8px;
+        }
+
+        .hue > .hue-container {
+            border-radius:0px;
+            overflow:hidden;
+            height: 100%;
+            background: linear-gradient(to top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);            
+        }
+      
+
+        .opacity > .opacity-container {
+            border-radius: 0px;
+            overflow: hidden;
+            height: 100%;       
+        }
+        
+
+        .drag-bar, .drag-bar2 {
+            border:0px;
+            background-color: transparent;
+            border: 2px solid white;
+            box-shadow: 0 0 1px 0px rgba(0, 0, 0, 1), inset 0 0 1px 0px rgba(0, 0, 0, 1);            
+            width: 10px;
+            height: 10px;                    
+            box-sizing: border-box;
+            transform: none;
+            overflow: hidden;
+            left: 50%;
+            transform: translateX(-50%) translateY(-50%); 
+        }
+
+    }
+
+    .information {
+        margin-top: 5px;
+    }
+
+}

package/src/util/Blender.js

@@ -0,0 +1,29 @@
+import separable from './blend/separable'
+import nonseparable from './blend/non-separable'
+import composite from './blend/composite'
+
+function num(n) {
+  if (n < 0) return 0; 
+  return n > 255 ? 255 : n; 
+}
+
+function Blender (back, source, blendFunction, blendMode = 'normal', compositeOperation = 'source-over')  {
+
+  const compositeFunction = composite[compositeOperation];
+
+  return compositeFunction(back, blendFunction(back, source, blendMode));
+
+}
+
+Object.keys(separable).forEach(mode => {
+  Blender[mode] = function (back, source, compositeOperation = 'source-over') {
+    return Blender(back, source, separable[mode],mode, compositeOperation)
+  }
+})
+Object.keys(nonseparable).forEach(mode => {
+  Blender[mode] = function (back, source, compositeOperation = 'source-over') {
+    return Blender(back, source, nonseparable[mode],mode, compositeOperation)
+  }
+})
+
+export default Blender

package/src/util/Canvas.js

@@ -0,0 +1,128 @@
+import Color from './Color'
+
+function each(len, callback) {
+    for (var i = 0; i < len; i += 4) {
+        callback(i);
+    }
+}
+
+function pack(bitmap, callback) {
+
+    each(bitmap.pixels.length, (i) => {
+        callback(bitmap.pixels, i)
+    })
+}
+
+const Canvas = {
+
+    create (width, height) {
+        var canvas = document.createElement('canvas');
+        canvas.width = width || 0;
+        canvas.height = height || 0;
+
+        return canvas; 
+    },
+
+    drawPixels(bitmap) {
+        var canvas = this.create(bitmap.width, bitmap.height);
+
+        var context = canvas.getContext('2d');
+        var imagedata = context.getImageData(0, 0, canvas.width, canvas.height);
+
+        imagedata.data.set(bitmap.pixels);
+
+        context.putImageData(imagedata, 0, 0);
+
+        return canvas;
+    },
+
+    createHistogram (width, height, histogram, callback, opt = { black: true, red: false, green : false, blue: false}) {
+        var canvas = this.create(width, height)
+        const context = canvas.getContext('2d')
+        context.clearRect(0, 0, width, height)
+        context.fillStyle = "white"
+        context.fillRect(0, 0, width, height)
+        context.globalAlpha = 0.7
+
+        var omit = { black: false }
+        if (opt.black) {omit.black = false  } else {omit.black = true}
+        if (opt.red) {omit.red = false  } else {omit.red = true}
+        if (opt.green) {omit.green = false  } else {omit.green = true}
+        if (opt.blue) {omit.blue = false  } else {omit.blue = true} 
+
+
+        Object.keys(histogram).forEach(color => {
+
+            if (!omit[color]) {
+
+                var array = histogram[color]
+                const ymax = Math.max.apply(Math, array)
+                const unitWith = width / array.length 
+    
+                context.fillStyle = color
+                array.forEach((it, index) => {
+                    const currentHeight = height * (it / ymax) 
+                    const x = index * unitWith 
+        
+                    context.fillRect(x, height - currentHeight, unitWith, currentHeight);
+                });
+            }
+
+        })
+
+
+        if (typeof callback == 'function') callback(canvas)
+
+    },
+
+    getHistogram (bitmap) {
+        let black = new Array(256)
+        let red = new Array(256)
+        let green = new Array(256)
+        let blue = new Array(256)
+        for(var i = 0; i < 256; i++) {
+            black[i] = 0
+            red[i] = 0
+            green[i] = 0
+            blue[i] = 0
+        }
+
+        pack(bitmap, (pixels, i) => {
+            // gray scale 
+            const grayIndex = Math.round(Color.brightness(pixels[i], pixels[i+1], pixels[i+2]))
+            black[grayIndex]++
+
+            red[pixels[i]]++
+            green[pixels[i+1]]++
+            blue[pixels[i+2]]++
+
+        })
+
+        return {black, red, green, blue } 
+    },
+
+    getBitmap(bitmap, area) {
+        var canvas = this.drawPixels(bitmap);
+
+        var context = canvas.getContext('2d');
+        var pixels = context.getImageData(area.x || 0, area.y || 0, area.width || canvas.width, area.height || canvas.height).data;
+
+        return { pixels, width: area.width, height: area.height };
+    },
+
+    putBitmap(bitmap, subBitmap, area) {
+
+        var canvas = this.drawPixels(bitmap);
+        var subCanvas = this.drawPixels(subBitmap);
+
+        var context = canvas.getContext('2d');
+        context.drawImage(subCanvas, area.x, area.y);
+
+        bitmap.pixels = context.getImageData(0, 0, bitmap.width, bitmap.height).data;
+
+        return bitmap;
+    }
+
+}
+
+export default Canvas;

package/src/util/Color.js

@@ -0,0 +1,27 @@
+import formatter from "./functions/formatter";
+import math from './functions/math'
+import fromRGB from './functions/fromRGB'
+import fromCMYK from './functions/fromCMYK'
+import fromLAB from './functions/fromLAB'
+import fromHSV from './functions/fromHSV'
+import fromHSL from './functions/fromHSL'
+import fromYCrCb from './functions/fromYCrCb'
+import mixin from "./functions/mixin";
+import parser from "./functions/parser";
+import image from "./functions/image";
+
+
+export default {
+    ...formatter, 
+    ...math, 
+    ...mixin,
+    ...parser,
+    ...fromYCrCb,
+    ...fromRGB,
+    ...fromCMYK,
+    ...fromHSV,
+    ...fromHSL,
+    ...fromLAB,
+    ...image
+}
+

package/src/util/ColorNames.js

@@ -0,0 +1,14 @@
+export const color_names = { aliceblue: "rgb(240, 248, 255)", antiquewhite: "rgb(250, 235, 215)", aqua: "rgb(0, 255, 255)", aquamarine: "rgb(127, 255, 212)", azure: "rgb(240, 255, 255)", beige: "rgb(245, 245, 220)", bisque: "rgb(255, 228, 196)", black: "rgb(0, 0, 0)", blanchedalmond: "rgb(255, 235, 205)", blue: "rgb(0, 0, 255)", blueviolet: "rgb(138, 43, 226)", brown: "rgb(165, 42, 42)", burlywood: "rgb(222, 184, 135)", cadetblue: "rgb(95, 158, 160)", chartreuse: "rgb(127, 255, 0)", chocolate: "rgb(210, 105, 30)", coral: "rgb(255, 127, 80)", cornflowerblue: "rgb(100, 149, 237)", cornsilk: "rgb(255, 248, 220)", crimson: "rgb(237, 20, 61)", cyan: "rgb(0, 255, 255)", darkblue: "rgb(0, 0, 139)", darkcyan: "rgb(0, 139, 139)", darkgoldenrod: "rgb(184, 134, 11)", darkgray: "rgb(169, 169, 169)", darkgrey: "rgb(169, 169, 169)", darkgreen: "rgb(0, 100, 0)", darkkhaki: "rgb(189, 183, 107)", darkmagenta: "rgb(139, 0, 139)", darkolivegreen: "rgb(85, 107, 47)", darkorange: "rgb(255, 140, 0)", darkorchid: "rgb(153, 50, 204)", darkred: "rgb(139, 0, 0)", darksalmon: "rgb(233, 150, 122)", darkseagreen: "rgb(143, 188, 143)", darkslateblue: "rgb(72, 61, 139)", darkslategray: "rgb(47, 79, 79)", darkslategrey: "rgb(47, 79, 79)", darkturquoise: "rgb(0, 206, 209)", darkviolet: "rgb(148, 0, 211)", deeppink: "rgb(255, 20, 147)", deepskyblue: "rgb(0, 191, 255)", dimgray: "rgb(105, 105, 105)", dimgrey: "rgb(105, 105, 105)", dodgerblue: "rgb(30, 144, 255)", firebrick: "rgb(178, 34, 34)", floralwhite: "rgb(255, 250, 240)", forestgreen: "rgb(34, 139, 34)", fuchsia: "rgb(255, 0, 255)", gainsboro: "rgb(220, 220, 220)", ghostwhite: "rgb(248, 248, 255)", gold: "rgb(255, 215, 0)", goldenrod: "rgb(218, 165, 32)", gray: "rgb(128, 128, 128)", grey: "rgb(128, 128, 128)", green: "rgb(0, 128, 0)", greenyellow: "rgb(173, 255, 47)", honeydew: "rgb(240, 255, 240)", hotpink: "rgb(255, 105, 180)", indianred: "rgb(205, 92, 92)", indigo: "rgb(75, 0, 130)", ivory: "rgb(255, 255, 240)", khaki: "rgb(240, 230, 140)", lavender: "rgb(230, 230, 250)", lavenderblush: "rgb(255, 240, 245)", lawngreen: "rgb(124, 252, 0)", lemonchiffon: "rgb(255, 250, 205)", lightblue: "rgb(173, 216, 230)", lightcoral: "rgb(240, 128, 128)", lightcyan: "rgb(224, 255, 255)", lightgoldenrodyellow: "rgb(250, 250, 210)", lightgreen: "rgb(144, 238, 144)", lightgray: "rgb(211, 211, 211)", lightgrey: "rgb(211, 211, 211)", lightpink: "rgb(255, 182, 193)", lightsalmon: "rgb(255, 160, 122)", lightseagreen: "rgb(32, 178, 170)", lightskyblue: "rgb(135, 206, 250)", lightslategray: "rgb(119, 136, 153)", lightslategrey: "rgb(119, 136, 153)", lightsteelblue: "rgb(176, 196, 222)", lightyellow: "rgb(255, 255, 224)", lime: "rgb(0, 255, 0)", limegreen: "rgb(50, 205, 50)", linen: "rgb(250, 240, 230)", magenta: "rgb(255, 0, 255)", maroon: "rgb(128, 0, 0)", mediumaquamarine: "rgb(102, 205, 170)", mediumblue: "rgb(0, 0, 205)", mediumorchid: "rgb(186, 85, 211)", mediumpurple: "rgb(147, 112, 219)", mediumseagreen: "rgb(60, 179, 113)", mediumslateblue: "rgb(123, 104, 238)", mediumspringgreen: "rgb(0, 250, 154)", mediumturquoise: "rgb(72, 209, 204)", mediumvioletred: "rgb(199, 21, 133)", midnightblue: "rgb(25, 25, 112)", mintcream: "rgb(245, 255, 250)", mistyrose: "rgb(255, 228, 225)", moccasin: "rgb(255, 228, 181)", navajowhite: "rgb(255, 222, 173)", navy: "rgb(0, 0, 128)", oldlace: "rgb(253, 245, 230)", olive: "rgb(128, 128, 0)", olivedrab: "rgb(107, 142, 35)", orange: "rgb(255, 165, 0)", orangered: "rgb(255, 69, 0)", orchid: "rgb(218, 112, 214)", palegoldenrod: "rgb(238, 232, 170)", palegreen: "rgb(152, 251, 152)", paleturquoise: "rgb(175, 238, 238)", palevioletred: "rgb(219, 112, 147)", papayawhip: "rgb(255, 239, 213)", peachpuff: "rgb(255, 218, 185)", peru: "rgb(205, 133, 63)", pink: "rgb(255, 192, 203)", plum: "rgb(221, 160, 221)", powderblue: "rgb(176, 224, 230)", purple: "rgb(128, 0, 128)", rebeccapurple: "rgb(102, 51, 153)", red: "rgb(255, 0, 0)", rosybrown: "rgb(188, 143, 143)", royalblue: "rgb(65, 105, 225)", saddlebrown: "rgb(139, 69, 19)", salmon: "rgb(250, 128, 114)", sandybrown: "rgb(244, 164, 96)", seagreen: "rgb(46, 139, 87)", seashell: "rgb(255, 245, 238)", sienna: "rgb(160, 82, 45)", silver: "rgb(192, 192, 192)", skyblue: "rgb(135, 206, 235)", slateblue: "rgb(106, 90, 205)", slategray: "rgb(112, 128, 144)", slategrey: "rgb(112, 128, 144)", snow: "rgb(255, 250, 250)", springgreen: "rgb(0, 255, 127)", steelblue: "rgb(70, 130, 180)", tan: "rgb(210, 180, 140)", teal: "rgb(0, 128, 128)", thistle: "rgb(216, 191, 216)", tomato: "rgb(255, 99, 71)", turquoise: "rgb(64, 224, 208)", violet: "rgb(238, 130, 238)", wheat: "rgb(245, 222, 179)", white: "rgb(255, 255, 255)", whitesmoke: "rgb(245, 245, 245)", yellow: "rgb(255, 255, 0)", yellowgreen: "rgb(154, 205, 50)", transparent: "rgba(0, 0, 0, 0)" };
+
+function isColorName (name) {
+    return !!color_names[name];
+}
+
+function getColorByName (name) {
+    return color_names[name];
+}
+
+export default {
+    isColorName,
+    getColorByName 
+}