Skip to content

Commit

Permalink
More control of the alpha slider
Browse files Browse the repository at this point in the history
  • Loading branch information
@David-Mulder
David-Mulder committed Dec 7, 2015
1 parent 2d5dcb2 commit f1e50de
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 101 deletions.
6 changes: 4 additions & 2 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ <h1><code>&lt;paper-color-input&gt;</code></h1>
<paper-color-input label="Pick a color..."></paper-color-input>
<paper-color-input value='{"red":255,"green":155,"blue":55}' label="My favourite color"></paper-color-input>
<paper-color-input value='{"red":255,"green":155,"blue":55}' shape="huebox" label="Color with hue picker"></paper-color-input>
<paper-color-input value='{"red":255,"green":155,"blue":55,"alpha": 0.5}' shape="huebox" label="Color with hue picker and alpha" allow-alpha></paper-color-input>
<paper-color-input value='{"red":255,"green":155,"blue":55,"alpha": 0.5}' shape="huebox" label="Color with hue picker and alpha" always-show-alpha allow-alpha></paper-color-input>
<paper-color-input value='{"red":0,"green":255,"blue":0}' shape="huebox" label="Color with hue picker"></paper-color-input>
<paper-color-input value='{"red":12,"green":34,"blue":56}' shape="square" label="Color with square picker"></paper-color-input>
<paper-color-input value='{"red":12,"green":34,"blue":56}' shape="square" label="Input with [with-description]" with-description allow-alpha></paper-color-input>
Expand All @@ -65,7 +65,9 @@ <h1><code>&lt;paper-color-circle&gt;</code></h1>
<paper-color-circle style="margin:20px;" shape="square"></paper-color-circle>
<paper-color-circle style="margin:20px;" type="hsl" shape="square"></paper-color-circle><br />
<paper-color-circle style="margin:20px;" shape="huebox"></paper-color-circle>
<paper-color-circle style="margin:20px;" type="hsl" shape="huebox"></paper-color-circle>
<paper-color-circle style="margin:20px;" type="hsl" shape="huebox"></paper-color-circle><br />
<paper-color-circle style="margin:20px;" no-aa-border></paper-color-circle>
<paper-color-circle style="margin:20px;" coloured-aa-border=""></paper-color-circle>

</section>

Expand Down
174 changes: 77 additions & 97 deletions paper-color-circle.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,10 +133,9 @@
* @type boolean
* @default false
*/
AaBorder: {
noAaBorder: {
type: Boolean,
value: true,
notify: true
value: false
},
_ctx: {
type: Object,
Expand Down Expand Up @@ -278,7 +277,7 @@
observer: 'valueChanged'
}
},
pickColor: function(e, redraw){
pickColor: function(e){
var rect = this.getBoundingClientRect();
var touchX = e.detail.x - rect.left;
var touchY = e.detail.y - rect.top;
Expand All @@ -287,38 +286,17 @@
this.set('color.red', color[0]);
this.set('color.green', color[1]);
this.set('color.blue', color[2]);
if(redraw)
if(!this.noAaBorder && this.colouredAaBorder)
this.redraw();
}
},
onDown: function(e){
this._setAaBorder = this.AaBorder;
this.pickColor(e, true);
this._down = true;
},
onMove: function(e){
if(!this._moveStart){
if(this._setAaBorder && this._down){
this.AaBorder = false;
this.pickColor(e, true);
} else {
this.pickColor(e, false);
}
this._moveStart = true;
} else {
this.pickColor(e, false);
}
this.pickColor(e);
},
onUp: function(e){
this._down = false;
if(this._moveStart){
if(this._setAaBorder){
this.AaBorder = this._setAaBorder;
this.redraw();
}
this._moveStart = false;
}

this.$.ripple.style.color = 'rgb(' + this.color['red'] + ',' + this.color['green'] + ',' + this.color['blue'] + ')';

this.$.ripple.downAction(e);
Expand All @@ -327,89 +305,91 @@
})
},
redraw: function(){
var size = this.getBoundingClientRect();
var width = size.width;
var height = size.height;
if(width == 0 || height == 0){
var computedStyle = window.getComputedStyle(this);
width = parseInt(computedStyle.width);
height = parseInt(computedStyle.height);
}
this.$.canvas.width = width;
this.$.canvas.height = height;
this.size = Math.min(width, height);
var halfsize = this.size/2;
var bitmap = this._ctx.getImageData(0, 0, this.size, this.size);
var smoothBorder = 0;
for (var y = 0; y < this.size; y++){
for (var x = 0; x < this.size; x++){
this.debounce('redraw', function(){
var size = this.getBoundingClientRect();
var width = size.width;
var height = size.height;
if(width == 0 || height == 0){
var computedStyle = window.getComputedStyle(this);
width = parseInt(computedStyle.width);
height = parseInt(computedStyle.height);
}
this.$.canvas.width = width;
this.$.canvas.height = height;
this.size = Math.min(width, height);
var halfsize = this.size/2;
var bitmap = this._ctx.getImageData(0, 0, this.size, this.size);
var smoothBorder = 0;
for (var y = 0; y < this.size; y++){
for (var x = 0; x < this.size; x++){

// offset for the 4 RGBA values in the data array
var offset = 4 * ((y * this.size) + x);

if(this.shape === 'circle'){
var distanceFromCenter = Math.sqrt(Math.pow(y - halfsize, 2) + Math.pow(x - halfsize, 2)) / halfsize;
if(distanceFromCenter < (halfsize+smoothBorder)/halfsize - 0.01){
var hue = Math.atan2(y - halfsize, x - halfsize) * (180 / Math.PI);
if(hue < 0) hue+=360;
var saturation = Math.round(distanceFromCenter*1000)/1000;
saturation = Math.min(1, saturation);
if(this.type === 'hsv'){
var value = Math.round(this.value*1000)/1000;
var color = hsv2rgb(hue, saturation, value);
}else if(this.type === 'hsl'){
var lightness = Math.round(this.lightness*1000)/1000;
var color = hsl2rgb(hue, saturation, lightness);
}

// offset for the 4 RGBA values in the data array
var offset = 4 * ((y * this.size) + x);
// fill RGBA values
bitmap.data[offset + 0] = color[0];
bitmap.data[offset + 1] = color[1];
bitmap.data[offset + 2] = color[2];
if(distanceFromCenter - 1 >= 0){
var distance = Math.round((distanceFromCenter - 1)*halfsize);

if(this.shape === 'circle'){
var distanceFromCenter = Math.sqrt(Math.pow(y - halfsize, 2) + Math.pow(x - halfsize, 2)) / halfsize;
if(distanceFromCenter < (halfsize+smoothBorder)/halfsize - 0.01){
var hue = Math.atan2(y - halfsize, x - halfsize) * (180 / Math.PI);
if(hue < 0) hue+=360;
var saturation = Math.round(distanceFromCenter*1000)/1000;
saturation = Math.min(1, saturation);
bitmap.data[offset + 3] = 255*((smoothBorder-distance)/smoothBorder); // transparency
}else{
bitmap.data[offset + 3] = 255; // no transparency
}
};
}else if(this.shape === 'huebox'){
var saturation = x/width;
var hue = Math.round(this.hue*1000)/1000*360;
var third = 1-y/this.size;
if(this.type === 'hsv'){
var color = hsv2rgb(hue, saturation, third);
}else if(this.type === 'hsl'){
var color = hsl2rgb(hue, saturation, third);
}
bitmap.data[offset + 0] = color[0];
bitmap.data[offset + 1] = color[1];
bitmap.data[offset + 2] = color[2];
bitmap.data[offset + 3] = 255; // no transparency
}else if(this.shape === 'square'){
var hue = x/width*360;
var saturation = 1-y/this.size;
if(this.type === 'hsv'){
var value = Math.round(this.value*1000)/1000;
var color = hsv2rgb(hue, saturation, value);
}else if(this.type === 'hsl'){
var lightness = Math.round(this.lightness*1000)/1000;
var color = hsl2rgb(hue, saturation, lightness);
}

// fill RGBA values
bitmap.data[offset + 0] = color[0];
bitmap.data[offset + 1] = color[1];
bitmap.data[offset + 2] = color[2];
if(distanceFromCenter - 1 >= 0){
var distance = Math.round((distanceFromCenter - 1)*halfsize);

bitmap.data[offset + 3] = 255*((smoothBorder-distance)/smoothBorder); // transparency
}else{
bitmap.data[offset + 3] = 255; // no transparency
}
};
}else if(this.shape === 'huebox'){
var saturation = x/width;
var hue = Math.round(this.hue*1000)/1000*360;
var third = 1-y/this.size;
if(this.type === 'hsv'){
var color = hsv2rgb(hue, saturation, third);
}else if(this.type === 'hsl'){
var color = hsl2rgb(hue, saturation, third);
bitmap.data[offset + 3] = 255; // no transparency
}
bitmap.data[offset + 0] = color[0];
bitmap.data[offset + 1] = color[1];
bitmap.data[offset + 2] = color[2];
bitmap.data[offset + 3] = 255; // no transparency
}else if(this.shape === 'square'){
var hue = x/width*360;
var saturation = 1-y/this.size;
if(this.type === 'hsv'){
var value = Math.round(this.value*1000)/1000;
var color = hsv2rgb(hue, saturation, value);
}else if(this.type === 'hsl'){
var lightness = Math.round(this.lightness*1000)/1000;
var color = hsl2rgb(hue, saturation, lightness);
}
bitmap.data[offset + 0] = color[0];
bitmap.data[offset + 1] = color[1];
bitmap.data[offset + 2] = color[2];
bitmap.data[offset + 3] = 255; // no transparency
}

};
};
};
this._ctx.putImageData(bitmap, 0, 0);
if(this.AaBorder && this.shape === 'circle'){
//Getting a nice anti aliased edge using canvas is hard, so instead a white circle is draw over the border
this.drawAACircle();
}
this._ctx.putImageData(bitmap, 0, 0);
if(!this.noAaBorder && this.shape === 'circle'){
//Getting a nice anti aliased edge using canvas is hard, so instead a white circle is draw over the border
this.drawAACircle();
}
});
},
drawAACircle: function(){
if(this.colouredAaBorder){
Expand Down Expand Up @@ -450,8 +430,8 @@
if(!isNaN(hsv[0])) this.hue = hsv[0];
this.value = hsv[2];
}
if(this._domReady)
this.redraw();
//if(this._domReady)
// this.redraw();
},
attached: function(){
this._domReady = true;
Expand Down
6 changes: 5 additions & 1 deletion paper-color-input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
</div>
</paper-input-container>

<paper-color-picker id="picker" color="{{value}}" color-as-string="{{colorName}}" shape="{{shape}}" type="{{type}}" allow-alpha="{{allowAlpha}}"></paper-color-picker>
<paper-color-picker id="picker" color="{{value}}" color-as-string="{{colorName}}" shape="{{shape}}" type="{{type}}" allow-alpha="{{allowAlpha}}" always-show-alpha="{{alwaysShowAlpha}}"></paper-color-picker>

</template>

Expand Down Expand Up @@ -152,6 +152,10 @@
* Whether to show the color also as a string
*/
withDescription: Boolean,
/**
* Show alpha slider always instead of only in the advanced settings
*/
alwaysShowAlpha: Boolean,
},
behaviors: [
/* Polymer.IronFormElementBehavior */ // disabled till https://github.com/Polymer/polymer/issues/3167 gets fixed
Expand Down
12 changes: 11 additions & 1 deletion paper-color-picker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@
</template>

<template is="dom-if" if="{{_and(allowAlpha,_initialAlphaValueHackApplied)}}">
<paper-input-container attr-for-value="immediate-value">
<paper-input-container attr-for-value="immediate-value" hidden$="{{!_or(alwaysShowAlpha, advanced)}}">
<label>Alpha (transparency)</label>
<paper-slider id="alphaPicker" class="paper-input-input" min="0" max="1" step="0.01" value="{{_initialAlphaValueHack}}" immediate-value="{{immediateColor.alpha}}"></paper-slider>
</paper-input-container>
Expand Down Expand Up @@ -314,6 +314,10 @@
type: Boolean,
value: false
},
/**
* Show alpha slider always instead of only in the advanced settings
*/
alwaysShowAlpha: Boolean,
/**
* Whether to allow changing the transparency of the picked color
*/
Expand Down Expand Up @@ -398,6 +402,9 @@
if(!this.advanced){
this.set('advanced', false);
}
if(!this.alwaysShowAlpha){
this.set('alwaysShowAlpha', false);
}
if(!this.noFullNames){
this.set('noFullNames', false);
retrieveColorNames(this);
Expand All @@ -418,6 +425,9 @@
_and: function(a,b){
return a && b;
},
_or: function(a,b){
return a || b;
},
_isColorDefined: function(){
return this.color.red >= 0 && this.color.green >= 0 && this.color.blue >= 0;
},
Expand Down

0 comments on commit f1e50de

Please sign in to comment.