ace-colorpicker-rpk 0.0.12

package/src/colorpicker/chromedevtool/ColorControl.js

@@ -0,0 +1,47 @@
+import Hue from '../ui/control/Hue';
+import Opacity from '../ui/control/Opacity'
+import UIElement from '../UIElement';
+
+const source = 'chromedevtool-control';
+
+export default class ColorControl extends UIElement {
+
+    components () {
+        return { Hue, Opacity }
+    }
+
+    template () {
+        return `
+        <div class="control">
+            <div target="Hue" ></div>
+            <div target="Opacity" ></div>
+            <div ref="$controlPattern" class="empty"></div>
+            <div ref="$controlColor" class="color"></div>
+        </div>
+        `
+    }
+
+    setBackgroundColor () {
+        this.refs.$controlColor.css("background-color", this.$store.dispatch('/toRGB'));
+    }
+
+    refresh () {
+        this.setColorUI();
+        this.setBackgroundColor()
+    }
+
+    setColorUI() {
+        this.Hue.setColorUI()
+        this.Opacity.setColorUI()
+    }    
+
+    '@changeColor' (sourceType) {
+        if (source != sourceType) {
+            this.refresh()
+        }
+    }
+
+    '@initColor' () { this.refresh() }    
+
+}
+ 

package/src/colorpicker/chromedevtool/index.js

@@ -0,0 +1,36 @@
+import BaseColorPicker from '../BaseColorPicker'
+
+import ColorControl from './ColorControl'
+import ColorInformation from '../ui/ColorInformation'
+import ColorPalette from '../ui/ColorPalette'
+import ColorSetsChooser from '../ui/ColorSetsChooser'
+import CurrentColorSets from '../ui/CurrentColorSets'
+import CurrentColorSetsContextMenu from '../ui/CurrentColorSetsContextMenu'
+
+export default class ChromeDevToolColorPicker extends BaseColorPicker {
+
+    template () {
+        return `
+            <div class='colorpicker-body'>
+                <div target="palette"></div> 
+                <div target="control"></div>
+                <div target="information"></div>
+                <div target="currentColorSets"></div>
+                <div target="colorSetsChooser"></div>
+                <div target="contextMenu"></div>
+            </div>
+        `
+    }
+
+    components() {
+        return { 
+            palette: ColorPalette,  
+            control: ColorControl,
+            information: ColorInformation,
+            currentColorSets: CurrentColorSets,
+            colorSetsChooser: ColorSetsChooser,
+            contextMenu: CurrentColorSetsContextMenu
+        }
+    }
+
+}

package/src/colorpicker/index.js

@@ -0,0 +1,37 @@
+import MacOSColorPicker from './macos/index'
+import ChromeDevToolColorPicker from './chromedevtool/index'
+import MiniColorPicker from './mini/index'
+import MiniVerticalColorPicker from './mini-vertical/index'
+import RingColorPicker from './ring/index'
+import XDColorPicker from './xd/index'
+import VSCodePicker from './vscode/index'
+
+export default {
+    create (opts) {
+        switch(opts.type) {
+        case 'macos': 
+            return new MacOSColorPicker(opts);
+        case 'xd': 
+            return new XDColorPicker(opts);            
+        case 'ring': 
+            return new RingColorPicker(opts);            
+        case 'mini': 
+            return new MiniColorPicker(opts);            
+        case 'vscode': 
+            return new VSCodePicker(opts);
+        case 'mini-vertical': 
+            return new MiniVerticalColorPicker(opts);
+        case 'sketch':
+        case 'palette':
+        default: 
+            return new ChromeDevToolColorPicker(opts);
+        }
+    },
+    ColorPicker: ChromeDevToolColorPicker,
+    ChromeDevToolColorPicker,
+    MacOSColorPicker,
+    RingColorPicker,
+    MiniColorPicker,
+    VSCodePicker,
+    MiniVerticalColorPicker 
+}    

package/src/colorpicker/macos/ColorControl.js

@@ -0,0 +1,47 @@
+import Value from '../ui/control/Value';
+import UIElement from '../UIElement';
+import Opacity from '../ui/control/Opacity'
+
+const source = 'macos-control';
+
+export default class ColorControl extends UIElement {
+
+    components () {
+        return { Value, Opacity }
+    } 
+
+    template () {
+        return `
+        <div class="control">
+            <div target="Value" ></div>
+            <div target="Opacity" ></div>
+            <div ref="$controlPattern" class="empty"></div>
+            <div ref="$controlColor" class="color"></div>
+        </div>
+        `
+    }
+
+    setBackgroundColor () {
+        this.refs.$controlColor.css("background-color", this.$store.dispatch('/toRGB'));
+    }
+ 
+    refresh () {
+        this.setColorUI();
+        this.setBackgroundColor()
+    }
+
+    setColorUI() {
+        this.Value.setColorUI()
+        this.Opacity.setColorUI()
+    }   
+    
+    '@changeColor' (sourceType) {
+        if (source != sourceType) {
+            this.refresh()
+        }
+    } 
+
+    '@initColor' () { this.refresh() }    
+
+}
+ 

package/src/colorpicker/macos/index.js

@@ -0,0 +1,38 @@
+import BaseColorPicker from '../BaseColorPicker'
+
+import ColorControl from './ColorControl'
+
+import ColorWheel from '../ui/ColorWheel'
+import ColorInformation from '../ui/ColorInformation'
+import ColorSetsChooser from '../ui/ColorSetsChooser'
+import CurrentColorSets from '../ui/CurrentColorSets'
+import CurrentColorSetsContextMenu from '../ui/CurrentColorSetsContextMenu'
+
+export default class MacOSColorPicker extends BaseColorPicker {
+ 
+    template () {
+        return `
+            <div class='colorpicker-body'>
+                <div target="colorwheel"></div>
+                <div target="control"></div>
+                <div target="information"></div>
+                <div target="currentColorSets"></div>
+                <div target="colorSetsChooser"></div>
+                <div target="contextMenu"></div>                
+            </div>
+        `
+    }
+
+    components() {
+        return { 
+            colorwheel: ColorWheel,  
+            control: ColorControl,
+            information: ColorInformation,
+            currentColorSets: CurrentColorSets,
+            colorSetsChooser: ColorSetsChooser,
+            contextMenu: CurrentColorSetsContextMenu
+        }
+    }
+
+
+}

package/src/colorpicker/mini/ColorControl.js

@@ -0,0 +1,40 @@
+import Hue from '../ui/control/Hue';
+import Opacity from '../ui/control/Opacity'
+import UIElement from '../UIElement';
+
+const source = 'mini-control';
+
+export default class ColorControl extends UIElement {
+
+    components () {
+        return { Hue, Opacity }
+    }
+ 
+    template () {
+        return `
+        <div class="control">
+            <div target="Hue" ></div>
+            <div target="Opacity" ></div>
+        </div>
+        `
+    }
+
+    refresh () {
+        this.setColorUI();
+    }
+
+    setColorUI() {
+        this.Hue.setColorUI()
+        this.Opacity.setColorUI()
+    }    
+
+    '@changeColor' (sourceType) {
+        if (source != sourceType) {
+            this.refresh()
+        }
+    }
+
+    '@initColor' () { this.refresh() }    
+
+}
+ 

package/src/colorpicker/mini/index.js

@@ -0,0 +1,24 @@
+import BaseColorPicker from '../BaseColorPicker'
+
+import ColorControl from './ColorControl'
+import ColorPalette from '../ui/ColorPalette'
+
+export default class MiniColorPicker extends BaseColorPicker {
+
+    template () {
+        return `
+            <div class='colorpicker-body'>
+                <div target="palette"></div>
+                <div target="control"></div>
+            </div>
+        `
+    } 
+
+    components() {
+        return { 
+            palette: ColorPalette,  
+            control: ColorControl
+        }
+    }
+
+}

package/src/colorpicker/mini-vertical/ColorControl.js

@@ -0,0 +1,35 @@
+import Hue from '../ui/control/VerticalHue';
+import Opacity from '../ui/control/VerticalOpacity'
+import UIElement from '../UIElement';
+
+const source = 'mini-control';
+
+export default class ColorControl extends UIElement {
+
+    components () {
+        return { Hue, Opacity }
+    }
+ 
+    template () {
+        return `<div class="control"><div target="Hue" ></div><div target="Opacity" ></div></div>`
+    }
+
+    refresh () {
+        this.setColorUI();
+    }
+
+    setColorUI() {
+        this.Hue.setColorUI()
+        this.Opacity.setColorUI()
+    }    
+
+    '@changeColor' (sourceType) {
+        if (source != sourceType) {
+            this.refresh()
+        }
+    }
+
+    '@initColor' () { this.refresh() }    
+
+}
+ 

package/src/colorpicker/mini-vertical/index.js

@@ -0,0 +1,23 @@
+import BaseColorPicker from '../BaseColorPicker'
+
+import ColorControl from './ColorControl'
+import ColorPalette from '../ui/ColorPalette'
+
+export default class MiniColorPicker extends BaseColorPicker {
+
+    template () {
+        return `
+            <div class='colorpicker-body'>
+                <div target="palette"></div><div target="control"></div>
+            </div>
+        `
+    } 
+
+    components() {
+        return { 
+            palette: ColorPalette,  
+            control: ColorControl
+        }
+    }
+
+}

package/src/colorpicker/module/ColorManager.js

@@ -0,0 +1,111 @@
+import Color from '../../util/Color'
+import HueColor from '../../util/HueColor'
+import BaseModule from '../BaseModule';
+
+
+function isUndefined (v) {
+    return typeof v == 'undefined' || v == null;  
+}
+
+export default class ColorManager extends BaseModule {
+
+    initialize () {        
+        super.initialize()
+
+        this.$store.rgb = {}
+        this.$store.hsl = {}
+        this.$store.hsv = {}
+        this.$store.alpha = 1 
+        this.$store.format = 'hex'
+
+        // this.$store.dispatch('/changeColor');
+    }
+
+    '/changeFormat' ($store, format) {
+        $store.format = format;
+
+        $store.emit('changeFormat');
+    }
+
+    '/initColor' ($store, colorObj, source) {
+        $store.dispatch('/changeColor', colorObj, source, true);
+        $store.emit('initColor')
+    }
+
+    '/changeColor' ($store, colorObj, source, isNotEmit) {
+
+        colorObj = colorObj || '#FF0000'
+
+        if (typeof colorObj == 'string') {
+            colorObj = Color.parse(colorObj);
+        }
+
+        colorObj.source = colorObj.source || source 
+
+        $store.alpha = isUndefined(colorObj.a) ? $store.alpha : colorObj.a; 
+        $store.format = colorObj.type != 'hsv' ? (colorObj.type || $store.format) : $store.format;
+        
+        if (colorObj.type == 'hsl') {
+            $store.hsl = Object.assign($store.hsl, colorObj); 
+            $store.rgb = Color.HSLtoRGB($store.hsl);
+            $store.hsv = Color.HSLtoHSV(colorObj);            
+        } else if (colorObj.type == 'hex') {
+            $store.rgb = Object.assign($store.rgb, colorObj);
+            $store.hsl = Color.RGBtoHSL($store.rgb);
+            $store.hsv = Color.RGBtoHSV(colorObj);            
+        } else if (colorObj.type == 'rgb') {
+            $store.rgb = Object.assign($store.rgb, colorObj);
+            $store.hsl = Color.RGBtoHSL($store.rgb);            
+            $store.hsv = Color.RGBtoHSV(colorObj);            
+        } else if (colorObj.type == 'hsv') {
+            $store.hsv = Object.assign($store.hsv, colorObj);
+            $store.rgb = Color.HSVtoRGB($store.hsv);
+            $store.hsl = Color.HSVtoHSL($store.hsv);
+        }
+
+        if (!isNotEmit) {
+            $store.emit('changeColor', colorObj.source);
+        }
+
+    }
+
+    '/getHueColor' ($store) {
+        return HueColor.checkHueColor($store.hsv.h/360);
+    }
+
+    '/toString' ($store, type) {
+        type = type || $store.format
+        var colorObj = $store[type] || $store.rgb
+        return Color.format({
+            ...colorObj,
+            a: $store.alpha
+        }, type);
+    }
+
+    '/toColor' ($store, type) {
+        type = type || $store.format; 
+
+        if (type == 'rgb') {
+            return $store.dispatch('/toRGB')
+        } else if (type == 'hsl') {
+            return $store.dispatch('/toHSL')
+        } else if (type == 'hex') {
+            return $store.dispatch('/toHEX')            
+        }
+
+        return $store.dispatch('/toString', type);
+    }
+
+    '/toRGB' ($store) {
+        return $store.dispatch('/toString', 'rgb')
+    }
+
+    '/toHSL' ($store) {
+        return $store.dispatch('/toString', 'hsl')
+    }
+
+    '/toHEX' ($store) {
+        return $store.dispatch('/toString', 'hex').toUpperCase()
+    }
+
+}

package/src/colorpicker/module/ColorSetsList.js

@@ -0,0 +1,132 @@
+import Color from '../../util/Color'
+import BaseModule from '../BaseModule';
+
+export default class ColorSetsList extends BaseModule {
+    initialize () {
+        super.initialize();
+
+        // set property
+        this.$store.colorSetsList = [
+            {   name : "Material", 
+                colors: [ 
+                    '#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', 
+                    '#2196F3', '#03A9F4', '#00BCD4',  '#009688', '#4CAF50', 
+                    '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', 
+                    '#FF5722',  '#795548', '#9E9E9E', '#607D8B' 
+                ]
+            },
+            { name : "Custom", "edit" : true, "colors" : [] },
+            { name: "Color Scale", "scale" : ['red', 'yellow', 'black' ], count : 5 }
+        ]
+        this.$store.currentColorSets = {}        
+    }
+
+    '/list' ($store) {
+        return Array.isArray($store.userList) && $store.userList.length ? $store.userList : $store.colorSetsList;
+    }
+
+    '/setUserPalette' ($store, list) {
+        $store.userList = list; 
+
+        $store.dispatch('/resetUserPalette');
+        $store.dispatch('/setCurrentColorSets');
+    }
+
+    '/resetUserPalette' ($store) {
+        if ($store.userList && $store.userList.length) {
+            $store.userList = $store.userList.map( (element, index) => {
+
+                if (typeof element.colors == 'function') {
+                    const makeCallback = element.colors; 
+
+                    element.colors = makeCallback($store);
+                    element._colors = makeCallback;
+                }
+
+                return Object.assign({ 
+                    name: `color-${index}`,
+                    colors : [] 
+                }, element)
+            })
+
+            $store.emit('changeUserList');
+        }
+    }
+
+    '/setCurrentColorSets' ($store, nameOrIndex) {
+
+        const _list = $store.dispatch('/list');
+
+        if (typeof nameOrIndex == 'undefined') {
+            $store.currentColorSets = _list[0];
+        } else if (typeof nameOrIndex == 'number') {
+            $store.currentColorSets = _list[nameOrIndex];
+        } else {
+            $store.currentColorSets = _list.filter(function (obj) {
+                return obj.name == nameOrIndex;
+            })[0];
+        }
+    
+        $store.emit('changeCurrentColorSets');
+    }
+
+    '/getCurrentColorSets' ($store) {
+        return $store.currentColorSets;
+    }
+
+    '/addCurrentColor' ($store, color) {
+        if (Array.isArray($store.currentColorSets.colors)) {
+            $store.currentColorSets.colors.push(color);
+            $store.emit('changeCurrentColorSets');
+        } 
+    }
+
+    '/setCurrentColorAll' ($store, colors = []) {
+        $store.currentColorSets.colors = colors;
+        $store.emit('changeCurrentColorSets');
+    }
+
+    '/removeCurrentColor' ($store, index) {
+        if ($store.currentColorSets.colors[index]) {
+            $store.currentColorSets.colors.splice(index, 1);
+            $store.emit('changeCurrentColorSets');
+        }
+    }
+
+    '/removeCurrentColorToTheRight' ($store, index) {
+        if ($store.currentColorSets.colors[index]) {
+            $store.currentColorSets.colors.splice(index, Number.MAX_VALUE);
+            $store.emit('changeCurrentColorSets');
+        }
+    }    
+
+    '/clearPalette' ($store) {
+        if ($store.currentColorSets.colors) {
+            $store.currentColorSets.colors = [];
+            $store.emit('changeCurrentColorSets');
+        }
+    }
+
+    '/getCurrentColors' ($store ) {
+        return $store.dispatch('/getColors', $store.currentColorSets);
+    }
+
+    '/getColors' ($store, element) {
+        if (element.scale) {
+            return Color.scale(element.scale, element.count);
+        }
+        
+        return element.colors || []; 
+    }
+
+    '/getColorSetsList' ($store) {
+        return $store.dispatch('/list').map(element => {
+           return {
+               name : element.name,
+               edit : element.edit,
+               colors : $store.dispatch('/getColors', element)
+           } 
+        });
+    }
+  
+}

package/src/colorpicker/ring/ColorControl.js

@@ -0,0 +1,47 @@
+import Value from '../ui/control/Value';
+import UIElement from '../UIElement';
+import Opacity from '../ui/control/Opacity'
+
+const source = 'macos-control';
+
+export default class ColorControl extends UIElement {
+
+    components () {
+        return { Value, Opacity }
+    } 
+
+    template () {
+        return `
+        <div class="control">
+            <div target="Value" ></div>
+            <div target="Opacity" ></div>
+            <div ref="$controlPattern" class="empty"></div>
+            <div ref="$controlColor" class="color"></div>
+        </div>
+        `
+    }
+
+    setBackgroundColor () {
+        this.refs.$controlColor.css("background-color", this.$store.dispatch('/toRGB'));
+    }
+ 
+    refresh () {
+        this.setColorUI();
+        this.setBackgroundColor()
+    }
+
+    setColorUI() {
+        this.Value.setColorUI()
+        this.Opacity.setColorUI()
+    }   
+    
+    '@changeColor' (sourceType) {
+        if (source != sourceType) {
+            this.refresh()
+        }
+    } 
+
+    '@initColor' () { this.refresh() }    
+
+}
+ 

package/src/colorpicker/ring/index.js

@@ -0,0 +1,42 @@
+import BaseColorPicker from '../BaseColorPicker'
+
+import ColorControl from './ColorControl'
+
+// import ColorWheel from '../ui/ColorWheel'
+import ColorInformation from '../ui/ColorInformation'
+import ColorSetsChooser from '../ui/ColorSetsChooser'
+import CurrentColorSets from '../ui/CurrentColorSets'
+import CurrentColorSetsContextMenu from '../ui/CurrentColorSetsContextMenu'
+import ColorRing from '../ui/ColorRing';
+import ColorPalette from '../ui/ColorPalette';
+
+export default class RingColorPicker extends BaseColorPicker {
+ 
+    template () {
+        return `
+            <div class='colorpicker-body'>
+                <div target="colorring"></div>
+                <div target="palette"></div> 
+                <div target="control"></div>
+                <div target="information"></div>
+                <div target="currentColorSets"></div>
+                <div target="colorSetsChooser"></div>
+                <div target="contextMenu"></div>
+            </div>
+        `
+    }
+
+    components() {
+        return { 
+            colorring: ColorRing, 
+            palette: ColorPalette, 
+            control: ColorControl,
+            information: ColorInformation,
+            currentColorSets: CurrentColorSets,
+            colorSetsChooser: ColorSetsChooser,
+            contextMenu: CurrentColorSetsContextMenu
+        }
+    }
+
+
+}