ace-colorpicker-rpk 0.0.12

package/src/colorpicker/ui/ColorWheel.js

@@ -0,0 +1,257 @@
+
+import Color from '../../util/Color'
+import Dom from '../../util/Dom'
+import Event from '../../util/Event'
+import UIElement from '../UIElement';
+import { getXYInCircle, caculateAngle } from '../../util/functions/math';
+
+export default class ColorWheel extends UIElement {
+
+    constructor (opt) {
+        super(opt)
+
+        this.width = 214;
+        this.height = 214;
+        this.thinkness = 0; 
+        this.half_thinkness = 0         
+        this.source = 'colorwheel'
+    }
+
+    template () {
+        return `
+        <div class="wheel">
+            <canvas class="wheel-canvas" ref="$colorwheel" ></canvas>
+            <div class="wheel-canvas" ref="$valuewheel" ></div>
+            <div class="drag-pointer" ref="$drag_pointer"></div>
+        </div>
+        `
+    }
+
+    refresh (isEvent) {
+        this.setColorUI(isEvent);
+    }
+
+    setColorUI(isEvent) {
+        this.renderCanvas();        
+        this.renderValue()   
+        this.setHueColor(null, isEvent);
+    }
+
+
+    renderValue () {
+        var value = (1 - (this.$store.hsv.v) );
+        this.refs.$valuewheel.css({
+            'background-color': `rgba(0, 0, 0, ${value})`
+        })
+    }
+
+
+    renderWheel (width, height) {
+
+
+        if (this.width && !width) width = this.width;
+        if (this.height && !height) height = this.height;        
+
+        const $canvas = new Dom('canvas');
+        const context = $canvas.el.getContext('2d')
+        $canvas.el.width = width;
+        $canvas.el.height = height; 
+        $canvas.css({ width: width + 'px', height: height + 'px' })
+
+        var img = context.getImageData(0, 0, width, height);
+        var pixels = img.data;
+        var half_width = Math.floor(width/2)
+        var half_height = Math.floor(height/2)
+
+        var radius = (width > height) ? half_height : half_width;
+        var cx = half_width;
+        var cy = half_height;
+
+        for(var y = 0; y < height; y++) {
+            for (var x = 0; x < width; x++) {
+                var rx = x - cx + 1,
+                ry = y - cy + 1,
+                d = rx * rx + ry * ry,
+                hue = caculateAngle(rx, ry);
+
+                var rgb = Color.HSVtoRGB(
+                    hue,     // 0~360 hue 
+                    Math.min(Math.sqrt(d) / radius, 1),     // 0..1 Saturation 
+                    1  //  0..1 Value
+                );
+
+                var index = (y * width + x) * 4; 
+                pixels[index] = rgb.r;
+                pixels[index + 1] = rgb.g;
+                pixels[index + 2] = rgb.b;
+                pixels[index + 3] = 255;
+            }
+        }
+
+        context.putImageData(img,0, 0)
+
+        if (this.thinkness > 0) {
+            context.globalCompositeOperation = "destination-out"    // destination-out 은 그리는 영역이 지워진다. 
+            context.fillStyle = 'black'
+            context.beginPath();
+            context.arc(cx, cy, radius - this.thinkness, 0, Math.PI * 2);
+            context.closePath();
+            context.fill()        
+    
+        }
+
+        return $canvas; 
+    }    
+
+    renderCanvas () {
+        
+        // only once rendering 
+        if (this.$store.createdWheelCanvas) return;
+
+        const $canvas = this.refs.$colorwheel
+        // console.log($canvas);
+        const context = $canvas.el.getContext('2d')
+
+        let [width, height] = $canvas.size()
+
+        if (this.width && !width) width = this.width;
+        if (this.height && !height) height = this.height;
+
+        $canvas.el.width = width;
+        $canvas.el.height = height; 
+        $canvas.css({ width: width + 'px', height: height + 'px' })
+
+        var $wheelCanvas = this.renderWheel(width, height)
+
+        context.drawImage($wheelCanvas.el, 0, 0)
+
+        this.$store.createdWheelCanvas = true; 
+    }
+
+    getDefaultValue () {
+        return this.$store.hsv.h 
+    }
+
+    getDefaultSaturation () {
+        return this.$store.hsv.s 
+    }
+
+    getCurrentXY(e, angle, radius, centerX, centerY) {
+        return e ? Event.posXY(e) : getXYInCircle(angle, radius, centerX, centerY)
+    }
+
+    getRectangle () {
+        var width = this.state.get('$el.width');  
+        var height = this.state.get('$el.height');  
+        var radius = this.state.get('$colorwheel.width') / 2;  
+
+        var minX = this.refs.$el.offset().left;
+        var centerX = minX + width / 2;
+
+        var minY = this.refs.$el.offset().top;
+        var centerY = minY + height / 2;
+
+        return { minX, minY, width, height, radius,  centerX, centerY }
+    }
+
+    setHueColor (e, isEvent) {
+
+        if (!this.state.get('$el.width')) return;
+
+        var { minX, minY, radius,  centerX, centerY } = this.getRectangle()
+
+        var { x , y } = this.getCurrentXY(
+            e, 
+            this.getDefaultValue(),
+            this.getDefaultSaturation() * radius, 
+            centerX, 
+            centerY
+        )
+
+        var rx = x - centerX, ry = y - centerY, d = rx * rx + ry * ry, hue = caculateAngle(rx, ry);
+
+        if (d > radius * radius) {
+            var {x, y} = this.getCurrentXY(null, hue, radius, centerX, centerY);
+        }
+
+        // saturation 을 
+        var saturation = Math.min(Math.sqrt(d) / radius, 1)
+
+        // set drag pointer position 
+        this.refs.$drag_pointer.css({
+            left: (x - minX) + 'px',
+            top: (y - minY) + 'px' 
+        });
+
+        if (!isEvent) {
+            this.changeColor({
+                type: 'hsv',
+                h: hue,
+                s: saturation
+            })
+        }
+    }
+
+    changeColor (opt) {
+        this.$store.dispatch('/changeColor',Object.assign({
+            source: this.source
+        }, opt || {}))
+    }
+
+    '@changeColor' (sourceType) {
+        if (this.source != sourceType) {
+            this.refresh(true);
+        }
+    }
+
+    '@initColor' () { this.refresh(true) }    
+
+    // Event Bindings 
+    'mouseup document' (e) {
+        if (this.isDown) {
+            this.isDown = false ;
+            this.$store.emit('lastUpdateColor');              
+        }
+    }
+
+    'mousemove document' (e) {
+        if (this.isDown) {
+            this.setHueColor(e);
+        }
+    }
+
+    'mousedown $drag_pointer' (e) {
+        e.preventDefault();
+        this.isDown = true; 
+    }
+
+    'mousedown $el' (e) {
+        this.isDown = true; 
+        this.setHueColor(e);        
+    }    
+
+    'touchend document' (e) {
+        if (this.isDown) {
+            this.isDown = false ;
+            this.$store.emit('lastUpdateColor');              
+        }
+    }
+
+    'touchmove document' (e) {
+        if (this.isDown) {
+            this.setHueColor(e);
+        }
+    }
+
+    'touchstart $drag_pointer' (e) {
+        e.preventDefault();
+        this.isDown = true; 
+    }
+
+    'touchstart $el' (e) {
+        e.preventDefault()
+        this.isDown = true; 
+        this.setHueColor(e);        
+    }        
+}
+ 

package/src/colorpicker/ui/CurrentColorSets.js

@@ -0,0 +1,81 @@
+import Dom from '../../util/Dom'
+import UIElement from '../UIElement';
+
+export default class CurrentColorSets extends UIElement {
+
+    template() {
+        return `
+            <div class="colorsets">
+                <div class="menu" title="Open Color Palettes">
+                    <button ref="$colorSetsChooseButton" type="button" class="color-sets-choose-btn arrow-button"></button>
+                </div>
+                <div ref="$colorSetsColorList" class="color-list"></div>
+            </div>
+        `
+    }    
+    
+    'load $colorSetsColorList' () {
+        const currentColorSets  = this.$store.dispatch('/getCurrentColorSets')
+        const colors  = this.$store.dispatch('/getCurrentColors')
+
+        return `
+            <div class="current-color-sets">
+            ${colors.map( (color, i) => {
+                return `<div class="color-item" title="${color}" data-index="${i}" data-color="${color}">
+                    <div class="empty"></div>
+                    <div class="color-view" style="background-color: ${color}"></div>
+                </div>`
+            }).join('')}   
+            ${currentColorSets.edit ? `<div class="add-color-item">+</div>` : ''}         
+            </div>
+        `
+    }    
+
+    refresh () {
+        this.load();
+    }
+
+
+    addColor (color) {
+        this.$store.dispatch('/addCurrentColor', color);
+    }
+
+    '@changeCurrentColorSets' () {
+        this.refresh()
+    }
+
+    'click $colorSetsChooseButton' (e) {
+        this.$store.emit('toggleColorChooser');
+    }
+
+    'contextmenu $colorSetsColorList' (e) {
+        e.preventDefault();
+        const currentColorSets  = this.$store.dispatch('/getCurrentColorSets')
+
+        if (!currentColorSets.edit) {
+            return; 
+        }
+
+        const $target = new Dom(e.target);
+        
+        const $item = $target.closest('color-item');
+
+        if ($item) {
+            const index = parseInt($item.attr('data-index'));
+
+            this.$store.emit('showContextMenu', e, index);
+        } else {
+            this.$store.emit('showContextMenu', e);            
+        }
+    }
+
+    'click $colorSetsColorList .add-color-item' (e) {
+        this.addColor(this.$store.dispatch('/toColor'));
+    }
+
+    'click $colorSetsColorList .color-item'  (e) {
+        this.$store.dispatch('/changeColor', e.$delegateTarget.attr('data-color'));
+        this.$store.emit('lastUpdateColor')        
+    }
+
+}

package/src/colorpicker/ui/CurrentColorSetsContextMenu.js

@@ -0,0 +1,63 @@
+import Event from '../../util/Event'
+import UIElement from '../UIElement';
+
+export default class CurrentColorSetsContextMenu extends UIElement {
+
+    template () {
+        return `
+            <ul class="colorsets-contextmenu">
+                <li class="menu-item small-hide" data-type="remove-color">Remove color</li>
+                <li class="menu-item small-hide" data-type="remove-all-to-the-right">Remove all to the right</li>
+                <li class="menu-item" data-type="clear-palette">Clear palette</li>
+            </ul>
+        `
+    }
+
+    show (e, index) {
+        const $event = Event.pos(e);
+
+        this.$el.css({
+            top: ($event.clientY - 10) + 'px',
+            left: $event.clientX + 'px' 
+        });
+        this.$el.addClass('show');
+        this.selectedColorIndex = index; 
+
+        if (typeof this.selectedColorIndex == 'undefined') {
+            this.$el.addClass('small')
+        } else {
+            this.$el.removeClass('small')
+        }
+
+    }
+
+    hide () {
+        this.$el.removeClass('show');
+    }
+
+    runCommand (command) {
+        switch(command) {
+        case 'remove-color': 
+            this.$store.dispatch('/removeCurrentColor', this.selectedColorIndex);        
+            break;
+        case 'remove-all-to-the-right': 
+            this.$store.dispatch('/removeCurrentColorToTheRight', this.selectedColorIndex);        
+            break;
+        case 'clear-palette': 
+            this.$store.dispatch('/clearPalette');
+            break;
+        }
+    }
+
+    '@showContextMenu' (e, index) {
+        this.show(e, index)
+    }
+
+    'click $el .menu-item' (e) {
+        e.preventDefault();
+
+        this.runCommand(e.$delegateTarget.attr('data-type'));
+        this.hide();        
+    }
+
+}

package/src/colorpicker/ui/control/Hue.js

@@ -0,0 +1,40 @@
+import BaseSlider from '../../BaseSlider';
+
+export default class Hue extends BaseSlider {
+
+    constructor (opt) {
+        super(opt)
+
+        this.minValue = 0
+        this.maxValue = 360
+        this.source = 'hue-control'
+    }
+
+    template () {
+        return `
+            <div class="hue">
+                <div ref="$container" class="hue-container">
+                    <div ref="$bar" class="drag-bar"></div>
+                </div>
+            </div>
+        `
+    }
+
+    getDefaultValue () {
+        return this.$store.hsv.h
+    }
+
+    refreshColorUI(e) {
+
+        var dist = this.getCaculatedDist(e);
+     
+        this.setColorUI(dist/100 * this.maxValue);
+
+        this.changeColor({
+            h: (dist/100) * this.maxValue,
+            type: 'hsv'
+        })
+    }     
+
+
+}

package/src/colorpicker/ui/control/Opacity.js

@@ -0,0 +1,65 @@
+
+import Color from '../../../util/Color'
+import Event from '../../../util/Event'
+import BaseSlider from '../../BaseSlider';
+
+const source = 'chromedevtool-control-Opacity';
+
+export default class Opacity extends BaseSlider {
+
+    constructor (opt) {
+        super(opt);
+
+        this.minValue = 0;
+        this.maxValue = 1; 
+        this.source = 'opacity-control'
+    }
+
+    template () {
+        return `
+        <div class="opacity">
+            <div ref="$container" class="opacity-container">
+                <div ref="$colorbar" class="color-bar"></div>
+                <div ref="$bar" class="drag-bar"></div>
+            </div>
+        </div>
+        `
+    }
+
+    refresh () {
+        super.refresh()
+        this.setOpacityColorBar()
+    }
+
+    setOpacityColorBar() {
+        var rgb = Object.assign({}, this.$store.rgb);
+    
+        rgb.a = 0;
+        var start = Color.format(rgb, 'rgb');
+    
+        rgb.a = 1;
+        var end = Color.format(rgb, 'rgb');
+    
+        this.setOpacityColorBarBackground(start, end);
+    }
+
+    setOpacityColorBarBackground(start, end) {
+        this.refs.$colorbar.css('background',  'linear-gradient(to right, ' + start + ', ' + end + ')');
+    }
+
+    getDefaultValue () {
+        return this.$store.alpha
+    }
+    
+    refreshColorUI(e) {
+        var dist = this.getCaculatedDist(e);
+
+        this.setColorUI( (dist/100) * this.maxValue);
+
+        this.changeColor({
+            a: (Math.floor(dist) / 100) * this.maxValue
+        })
+
+    }
+
+}

package/src/colorpicker/ui/control/Value.js

@@ -0,0 +1,50 @@
+
+import Event from '../../../util/Event'
+import BaseSlider from '../../BaseSlider';
+
+export default class Value extends BaseSlider {
+
+    constructor (opt) {
+        super(opt)
+
+        this.minValue = 0
+        this.maxValue = 1 
+        this.source = 'value-control'
+    }
+
+    template () {
+        return `
+            <div class="value">
+                <div ref="$container" class="value-container">
+                    <div ref="$bar" class="drag-bar"></div>
+                </div>
+            </div>
+        `
+    }
+
+    setBackgroundColor () {
+        this.refs.$container.css("background-color", this.$store.dispatch('/toRGB'));
+    }
+
+
+    refresh () {
+        super.refresh()
+        this.setBackgroundColor();
+    }
+
+    getDefaultValue () {
+        return this.$store.hsv.v 
+    }
+         
+    refreshColorUI(e) {
+        var dist = this.getCaculatedDist(e);
+
+        this.setColorUI(dist/100 * this.maxValue)
+
+        this.changeColor({
+            type: 'hsv',
+            v: dist/100 * this.maxValue
+        })
+    }    
+    
+}

package/src/colorpicker/ui/control/VerticalHue.js

@@ -0,0 +1,39 @@
+import VerticalSlider from '../../VerticalSlider';
+
+export default class VerticalHue extends VerticalSlider {
+
+    constructor (opt) {
+        super(opt)
+
+        this.minValue = 0
+        this.maxValue = 360 
+        this.source = 'vertical-hue-control'
+    }
+
+    template () {
+        return `
+            <div class="hue">
+                <div ref="$container" class="hue-container">
+                    <div ref="$bar" class="drag-bar"></div>
+                </div>
+            </div>
+        `
+    }
+
+    getDefaultValue () {
+        return this.$store.hsv.h 
+    }
+
+    refreshColorUI(e) {
+
+        var dist = this.getCaculatedDist(e)
+    
+        this.setColorUI( dist/100 * this.maxValue);
+
+        this.changeColor({
+            h: (dist/100) * this.maxValue,
+            type: 'hsv'
+        })
+    }     
+
+}

package/src/colorpicker/ui/control/VerticalOpacity.js

@@ -0,0 +1,55 @@
+
+import Color from '../../../util/Color'
+import Event from '../../../util/Event'
+import VerticalSlider from '../../VerticalSlider';
+
+export default class Opacity extends VerticalSlider {
+
+    constructor (opt) {
+        super(opt)
+
+        this.source = 'vertical-opacity-control'
+    }
+
+    template () {
+        return `
+        <div class="opacity">
+            <div ref="$container" class="opacity-container">
+                <div ref="$colorbar" class="color-bar"></div>
+                <div ref="$bar" class="drag-bar2"></div>
+            </div>
+        </div>
+        `
+    }
+
+    refresh () {
+        super.refresh() 
+        this.setOpacityColorBar()
+    }
+
+    setOpacityColorBar() {
+        var rgb = Object.assign({}, this.$store.rgb);
+    
+        rgb.a = 0;
+        var start = Color.format(rgb, 'rgb');
+    
+        rgb.a = 1;
+        var end = Color.format(rgb, 'rgb');
+    
+        this.refs.$colorbar.css('background',  'linear-gradient(to top, ' + start + ', ' + end + ')');
+    }
+
+    getDefaultValue () {
+        return this.$store.alpha
+    }
+
+    refreshColorUI(e) {
+        var dist = this.getCaculatedDist(e)
+
+        this.setColorUI(  ( dist/100 * this.maxValue) );
+
+        this.changeColor({
+            a: Math.floor(dist) / 100 * this.maxValue
+        })
+    }
+}

package/src/colorpicker/vscode/ColorControl.js

@@ -0,0 +1,40 @@
+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 /*html*/`
+            <div class="control">
+                <div target="Opacity" ></div>            
+                <div target="Hue" ></div>
+            </div>
+        `
+    }
+
+    refresh () {
+        this.setColorUI();
+    }
+
+    setColorUI() {
+        this.Hue.setColorUI()
+        this.Opacity.setColorUI()
+    }    
+
+    '@changeColor' (sourceType) {
+        if (source != sourceType) {
+            this.refresh()
+        }
+    }
+
+    '@initColor' () { this.refresh() }    
+
+}
+