light9 Changeset - 826e295b6a75

Changeset - 826e295b6a75

Parent rev.

Child rev.

[Not reviewed]

default

0 1 0

Drew Perttula - 8 years ago 2017-06-05 09:57:18
drewp@bigasterisk.com

faster updates on largerainbow. don't cover the 0.0 button
Ignore-this: ec49c10cf9f25b9b5d2e0cf1a35a1d1a

1 file changed with 9 insertions and 3 deletions:

light9/web/light9-color-picker.html

0 comments (0 inline, 0 general)

light9/web/light9-color-picker.html

➞

Show inline comments

@@ @@ -146,82 +146,88 @@ @@
    Polymer({
        is: "light9-color-picker",
        properties: {
            color: {
                type: String,
                notify: true,
            },
            hueSatColor: { type: String, notify: true, value: '#000000' },
            value: { type: Number, notify: true }, // 0..255
            sliderWriteValue: { type: Number, notify: true },
        },
        observers: [
-           'updateSmall(color)',
+           'readColor(color)',
            'onValue(value)',
            'writeColor(hueSatColor, value)'
        ],
        attached: function() {
            if (!window.pickerCanvases) {
                window.pickerCanvases = {
                    large: new RainbowCanvas(
                        '/colorpick_rainbow_large.png', [400, 200]),
                    small: new RainbowCanvas(
                        '/colorpick_rainbow_small.png', [150, 30]),
                };
+           }
            this.large = window.pickerCanvases.large;
            this.small = window.pickerCanvases.small;
        },
        onValue: function(value) {
            let neverBlack = .1 + .9 * value / 255;
            this.$.smallRainbow.style.filter = `brightness(${neverBlack})`;
        },
        writeColor: function(hueSatColor, value) {
            this.color = one.color(hueSatColor).value(value / 255).hex();
        },
        updateSmall: function(color) {
        readColor: function(color) {
            if (this.$.largeRainbowComp.style.display == 'block') {
                // for performance, don't do color searches on covered widget
                return;
+           }
            // setting immediate-value doesn't work
            this.sliderWriteValue = one.color(color).value() * 255;
            try {
                var pos = this.small.posFor(color);
            } catch(e) {
                this.moveSmallCrosshair([-999, -999]);
                return;
+           }
            this.moveSmallCrosshair(pos);
        },
        _floatLarge: function() {
            // Large might span multiple columns, and chrome won't
            // send events for those parts. Workaround: take it out of
            // the columns.
            let large = this.$.largeRainbowComp;
            let rect = this.$.smallRainbowComp.getBoundingClientRect();
            document.body.append(large);
            large.style.position = 'fixed';
-           large.style.left = (rect.left - 100) + 'px';
            large.style.left = (rect.left) + 'px';
            large.style.top = (rect.top - 50) + 'px';
        },
        showLarge: function() {
            this._floatLarge();
            this.$.largeRainbowComp.style.display = 'block';
            try {
                this.moveLargeCrosshair(this.large.posFor(this.color));
            } catch(e) {
                this.moveLargeCrosshair([-999, -999]);
                return;
+           }
        },
        hideLarge: function() {
            this.$.largeRainbowComp.style.display = 'none';
            this.readColor(this.color);
        },
        onEnterSmall: function() {
            // not if we just closed the large one
            this.showLarge();
        },
        moveLargeCrosshair: function(pos, _elem) {
            _elem = _elem || this.$.largeCrosshair;
            _elem.style.left = (pos[0] - _elem.offsetWidth / 2) + 'px';
            _elem.style.top = (pos[1] - _elem.offsetHeight / 2) + 'px';
        },
        moveSmallCrosshair: function(pos) {
            this.moveLargeCrosshair(pos, this.$.smallCrosshair);

0 comments (0 inline, 0 general)