ace-colorpicker-rpk 0.0.12

package/src/colorpicker/vscode/index.js

@@ -0,0 +1,82 @@
+import BaseColorPicker from '../BaseColorPicker'
+
+import ColorControl from './ColorControl'
+import ColorPalette from '../ui/ColorPalette'
+import Color from '../../util/Color'
+
+export default class VSCodePicker extends BaseColorPicker {
+
+    template () {
+        return /*html*/`
+            <div class='colorpicker-body'>
+                <div class='color-view'>
+                    <div class='color-view-container'  ref="$colorview"></div>
+                </div>
+                <div class='color-tool'>
+                    <div target="palette"></div>
+                    <div target="control"></div>
+                </div>
+            </div>
+        `
+    } 
+    
+    components() {
+        return { 
+            palette: ColorPalette,  
+            control: ColorControl
+        }
+    }
+
+    initColorWithoutChangeEvent (color) {
+        this.$store.dispatch('/initColor', color);
+        this.refresh();
+    }
+
+    setBackgroundColor () {
+        var color = this.$store.dispatch('/toColor')
+        var rgb = this.$store.rgb;
+        var bValue = Color.brightness(rgb.r,rgb.g,rgb.b);
+
+        this.refs.$colorview.css({
+            "background-color": color,
+            'color': bValue > 127 ? 'black': 'white'
+        });
+        this.refs.$colorview.html(color);
+    }
+
+    'click $colorview' (e) {
+        this.nextFormat()
+    }
+
+    nextFormat() {
+        var current_format = this.$store.format || 'hex';
+
+        var next_format = 'hex';
+        if (current_format == 'hex') {
+            next_format = 'rgb';
+        } else if (current_format == 'rgb') {
+            next_format = 'hsl';
+        } else if (current_format == 'hsl') {
+            next_format = 'hex';
+        }
+
+        this.$store.dispatch('/changeFormat', next_format);
+        this.$store.emit('lastUpdateColor')
+        this.refresh();
+    }
+
+    refresh () {
+        this.setBackgroundColor()
+    }
+
+    '@changeColor' () {
+        this.refresh()
+    }
+
+    '@initColor' () { 
+        this.refresh() 
+    }
+
+
+
+}

package/src/colorpicker/xd/ColorControl.js

@@ -0,0 +1,36 @@
+import Hue from '../ui/control/VerticalHue';
+import Opacity from '../ui/control/VerticalOpacity'
+import UIElement from '../UIElement';
+
+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' () {
+        this.refresh()
+    }
+
+    '@initColor' () { this.refresh() }    
+
+}
+ 

package/src/colorpicker/xd/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 XDColorPicker 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/extension/ace/colorview.js

@@ -0,0 +1,198 @@
+import Color from '../../util/Color'
+import ColorPicker from '../../colorpicker/index';
+import { brightness } from '../../util/functions/fromRGB';
+import Dom from '../../util/Dom';
+import { debounce } from '../../util/functions/func';
+
+const colorpicker_token_class = 'ace_color';
+const colorpicker_container_class = 'ace-colorpicker'
+
+export default class ColorView {
+    constructor(ace, editor, opt = {
+        type: 'vscode',
+        showDelay: 300,
+        containerClass: colorpicker_container_class
+    }) {
+        this.opt = opt;
+        this.ace = ace;
+        this.editor = editor;
+
+        this.colorpicker = ColorPicker.create(this.opt);
+        this.init_event();
+
+    }
+
+    get_brightness(colorString) {
+        const colorObj = Color.parse(colorString);
+        const fontColorString = brightness(colorObj.r, colorObj.g, colorObj.b) > 127 ? "#000" : "#fff";
+
+        return fontColorString;
+    }
+
+    mouse_over(evt) {
+        const $colorElement = new Dom(evt.target);
+        this.__colorview_check_target = evt.target; 
+
+        if ($colorElement.hasClass(colorpicker_token_class)) {
+            this.openDebouncedColorPicker(evt);
+        }
+
+    }
+
+    init_mouse_event() {
+
+        const { renderer } = this.editor;
+        const { content } = renderer;
+
+        this.openDebouncedColorPicker = debounce(this.open_color_picker.bind(this), this.opt.showDelay);
+
+        this.onMouseOver = this.mouse_over.bind(this);
+
+        // content.addEventListener('mouseover', this.onMouseOver);
+        content.addEventListener('mousemove', this.onMouseOver);
+
+    }
+
+
+    init_event() {
+
+        const { renderer, session } = this.editor;
+        const { content } = renderer;
+
+        this.init_mouse_event();
+
+        let rules = session.$mode.$highlightRules.getRules();
+        for (let stateName in rules) {
+            if (Object.prototype.hasOwnProperty.call(rules, stateName)) {
+                rules[stateName].unshift({
+                    token: "color",
+                    regex: '#(?:[\\da-f]{8})|#(?:[\\da-f]{3}){1,2}|rgb\\((?:\\s*\\d{1,3},\\s*){2}\\d{1,3}\\s*\\)|rgba\\((?:\\s*\\d{1,3},\\s*){3}\\d*\\.?\\d+\\s*\\)|hsl\\(\\s*\\d{1,3}(?:,\\s*\\d{1,3}%){2}\\s*\\)|hsla\\(\\s*\\d{1,3}(?:,\\s*\\d{1,3}%){2},\\s*\\d*\\.?\\d+\\s*\\)'
+                });
+
+                // FIXME: Exception handling when the highlight does not turn into color due to the scss function name
+                // LINK : https://github.com/ajaxorg/ace/blob/cbcb78c3a7c5e642d615a9f5665a44dbb94d3e92/lib/ace/mode/scss_highlight_rules.js#L43-L48
+                rules[stateName].unshift({
+                    token: "color",
+                    regex: "blue|green|red"
+                });
+
+            }
+        }
+        // force recreation of tokenizer
+        session.$mode.$tokenizer = null;
+        session.bgTokenizer.setTokenizer(editor.session.$mode.getTokenizer());
+        // force re-highlight whole document
+        session.bgTokenizer.start(0);
+
+        // each editor render update, update all displayed colors
+        renderer.on('afterRender', () => {
+
+            // each time renderer updates, get all elements with ace_color class
+            var colors = content.getElementsByClassName(colorpicker_token_class);
+
+            // iterate through them and set their background color and font color accordingly
+            for (var i = 0, len = colors.length; i < len; i++) {
+
+                const colorString = colors[i].textContent;
+
+                if (colors[i].getAttribute('data-color') === colorString) {
+                    // dont rerender the same color 
+                    continue;
+                }
+
+                const fontColorString = this.get_brightness(colorString);
+
+                colors[i].setAttribute("data-color", colorString);
+                colors[i].style.cssText = `
+                    background-color: ${colorString};
+                    color: ${fontColorString};
+                    pointer-events: all;
+                `
+            }
+        });
+
+
+    }
+
+    destroy() {
+        const { renderer } = this.editor;
+        const { content } = renderer;
+
+        // content.removeEventListener('mouseover', this.onMouseOver);
+        content.removeEventListener('mousemove', this.onMouseOver);
+    }
+
+    open_color_picker(evt) {
+        // check wheather event.target is equals this.__colorview_check_target
+        if (evt.target !== this.__colorview_check_target) {
+            this.close_color_picker();
+            return; 
+        }
+
+        const { Range } = this.ace;
+        const { renderer, session } = this.editor;
+        const { layerConfig } = renderer;
+
+        const screenPosition = renderer.screenToTextCoordinates(evt.clientX - layerConfig.padding, evt.clientY);
+        const token = session.getTokenAt(screenPosition.row, screenPosition.column);
+
+        if (!token || token.type.includes("color") === false) {
+            return;
+        }
+
+        const row = screenPosition.row;
+        const startColumn = token.start;
+        const colorString = token.value;
+
+        let prevColor = colorString;
+        const pos = renderer.textToScreenCoordinates(row, startColumn);
+
+        // support scrollTop
+        const scrollTop = Dom.getScrollTop()
+
+        this.colorpicker.show({
+            left: pos.pageX,
+            top: pos.pageY + scrollTop,
+            bottom: pos.pageY + scrollTop + layerConfig.lineHeight,
+            hideDelay: this.opt.hideDelay || 10
+        }, colorString, (newColor) => {
+            this.editor.session.replace(
+                new Range(row, startColumn, row, startColumn + prevColor.length),
+                newColor
+            );
+            prevColor = newColor;
+        });
+    }
+
+    close_color_picker() {
+        if (this.colorpicker) {
+            this.colorpicker.hide();
+        }
+    }
+
+    hide_delay_color_picker() {
+        if (this.colorpicker) {
+            this.colorpicker.runHideDelay();
+        }
+    }
+
+    key(lineNo, ch) {
+        return [lineNo, ch].join(":");
+    }
+
+
+    keyup(evt) {
+
+        if (this.colorpicker) {
+            if (evt.key == 'Escape') {
+                this.colorpicker.hide();
+            } else if (this.colorpicker.isShortCut == false) {
+                this.colorpicker.hide();
+            }
+        }
+    }
+
+
+}
+
+

package/src/extension/ace/index.js

@@ -0,0 +1,11 @@
+import AceColorView from './colorview' 
+
+function LOAD_ACE_COLORPICKER (ace, editor, opt) {
+
+    return new AceColorView(ace, editor, opt);    
+
+}
+
+export default {
+    load: LOAD_ACE_COLORPICKER
+}

package/src/index.js

@@ -0,0 +1,12 @@
+import './scss/index.scss'
+
+import Util from './util/index'
+import ColorPicker from './colorpicker/index'
+import AceExtension from './extension/ace/index'
+
+
+export default {
+    ...Util,
+    ...ColorPicker,
+    ...AceExtension
+}

package/src/scss/colorpicker.scss

@@ -0,0 +1,65 @@
+
+/* ace-colorpicker */
+
+.ace-colorpicker {
+  position: relative;
+  width: 224px;
+  z-index: 1000;
+  display:inline-block;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  background-color: #fff;
+  border-radius: 3px; 
+  box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.12);
+   
+  > .arrow {
+    position: absolute;
+    top: -10px;   
+    left: 7px; 
+    width: 0; 
+    height: 0; 
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    display:none;
+    
+    border-bottom: 10px solid rgba(0, 0, 0, 0.2);
+    pointer-events: none;
+    &:after {
+      position: absolute;      
+      content: ""; 
+      top: 1px;  
+      left: -9px;
+      width: 0;  
+      height: 0; 
+      border-left: 9px solid transparent;
+      border-right: 9px solid transparent; 
+      
+      border-bottom: 9px solid white;
+    }   
+  }
+
+  .colorpicker-body {
+    @import './component/button';
+    @import './component/palette';
+    @import './component/control';
+    @import './component/information';
+    @import './component/colorsets'; 
+    @import './component/colorchooser'; 
+  
+  }
+
+  &.chromedevtool {
+
+  }
+
+  /* theme */
+  @import './themes/sketch'; 
+  @import './themes/palette'; 
+  @import './themes/macos'; 
+  @import './themes/mini';   
+  @import './themes/mini-vertical';   
+  @import './themes/ring';   
+  @import './themes/xd';   
+  @import './themes/vscode';
+}    
+
+@import './component/colorsets-contextmenu'; 

package/src/scss/colorview.scss

@@ -0,0 +1,32 @@
+/* codemirror colorview */
+
+.ace-colorview {
+    position: absolute;
+	border : 1px solid #cecece;
+	display : inline-block;
+	box-sizing : border-box; 
+	width : 10px;
+	height : 10px;
+    cursor: pointer;
+    vertical-align: middle;
+    transform: translateY(-50%);
+    pointer-events: all;
+    @include transparent-background();
+    padding: 10px 10px; 
+    z-index: -100;
+
+    .ace-colorview-background {
+        content: "";
+        position: absolute;
+        left:0px;
+        right:0px;
+        bottom:0px;
+        top:0px;
+    }
+
+    &:hover {
+        border-color: #494949;
+    }
+}
+
+

package/src/scss/component/button.scss

@@ -0,0 +1,33 @@
+.arrow-button {
+  position: relative;
+  width: 10px;
+  height: 12px;
+  padding: 0px;
+  background-color: transparent;
+  
+  &:before {
+    content: "";
+    display:inline-block;
+    position:absolute;
+    left:0px;
+    right:0px;
+    top:0px;
+    height:50%;    
+    @include arrow_top(3px, black);
+    margin: 2px;
+    box-sizing:border-box;
+  }
+
+  &:after {
+    content: "";
+    display:inline-block;
+    position:absolute;
+    left:0px;
+    right:0px;
+    bottom:0px;
+    top:50%;
+    @include arrow_bottom(3px, black);
+    margin: 2px;
+    box-sizing:border-box;    
+  }
+}

package/src/scss/component/colorchooser.scss

@@ -0,0 +1,141 @@
+.color-chooser {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    top: 0px;
+    opacity: 0; 
+    background-color: rgba(0, 0, 0, 0.5);
+    transition: opacity 0.05s ease-out;  
+    pointer-events: none;
+
+    &.open {
+        opacity: 1;
+        pointer-events: all;
+    }
+
+    .color-chooser-container {
+        position: absolute;
+        top: 120px;
+        left:0px;
+        right:0px;
+        bottom:0px;
+        background-color: white; 
+
+        .colorsets-item-header {
+            position: absolute;
+            top:0px;
+            left:0px;
+            right:0px;
+            height: 34px;
+            display:flex;
+            padding: 3px 0px;      
+            box-sizing: border-box;       
+            border-bottom: 1px solid rgba(0, 0, 0, 0.2);                
+
+            .title {
+                flex: 2; 
+                font-weight: bold;
+                font-size: 15px;
+                box-sizing: border-box;
+                margin-right: 30px;
+                vertical-align: middle;
+                margin: 0px;
+                padding: 5px;
+                padding-left:14px;                
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;     
+                color:#000;
+                text-align: left;               
+            }
+
+            .items {
+                flex:1; 
+                text-align: right;
+                padding-right: 10px;
+                display:block;
+                height: 100%;
+                line-height: 2;    
+                cursor:pointer;                   
+            }
+        }
+
+        .colorsets-list {
+            position: absolute;
+            top: 34px;
+            left:0px;
+            right:0px;
+            bottom:0px;
+            overflow: auto;
+    
+            .colorsets-item {
+                cursor: pointer;
+
+                &:hover {
+                    background-color: rgba(0, 0, 0, 0.05);
+                }
+
+                .title {
+                    flex:2;                
+                    font-size: 14px;
+                    box-sizing: border-box;
+                    margin-right: 30px;
+                    vertical-align: middle;
+                    pointer-events: none;                    
+                    margin: 0px;
+                    padding: 5px;
+                    padding-left:14px;
+                    font-weight: normal;
+                    font-size: 13px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    color:#000;
+                    text-align: left;
+                }
+    
+                .items {
+                    flex:3;
+                    display:block;
+                    height: 100%;
+                    line-height: 1.6;    
+                    cursor:pointer;    
+                    pointer-events: none;                    
+                    
+                    .color-item {
+                        width: 13px;
+                        height: 13px;
+                        border-radius:3px;
+                        display:inline-block;
+                        margin-right:10px;
+                        @include transparent-background();
+                        background-size: contain;
+                        border: 1px solid rgba(221, 221, 221, 1);
+                        overflow:hidden;
+                        box-sizing:border-box;
+                        cursor: pointer;
+                        vertical-align: middle;
+    
+                        .color-view {
+                            width: 100%;
+                            height: 100%;
+                            padding:0px;
+                            margin:0px;
+                            pointer-events: none;
+                        }
+                    }
+                }
+    
+                display:flex;
+                padding: 3px 0px; 
+                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    
+                
+            }
+    
+        }
+    }
+
+    
+}

package/src/scss/component/colorsets-contextmenu.scss

@@ -0,0 +1,33 @@
+
+.colorsets-contextmenu {
+    position:fixed;
+    padding-top:4px;
+    padding-bottom:4px;
+    border-radius: 6px; 
+    background-color: #ececec;
+    border: 1px solid rgba(204, 204, 204, 1);
+    display: none;
+    list-style: none;
+    font-size: 13px;
+    padding-left: 0px;
+    padding-right: 0px;
+    &.show {
+        display:inline-block;
+    }
+
+    .menu-item {
+        padding: 2px 20px;
+        cursor: default;
+
+        &:hover {
+            background-color: #5ea3fb;
+            color: white;
+        }
+    }    
+
+    &.small {
+        .menu-item.small-hide {
+            display: none;
+        }
+    }
+}